Skip to content

D
digital-construction
Commit 34160b55 authored by 张牧越's avatar 张牧越
Browse files
Options

样式修正

parent 6a1f6c01
Hide whitespace changes
Inline Side-by-side
Showing with 314 additions and 235 deletions
.env.development
View file @ 34160b55
NODE_ENV = "development"
Mock: true
VUE_APP_API_URL = "http://192.168.0.153:8002"
VUE_APP_API_URL = "http://qjwl.ythplan.com/"
dist.zip
View file @ 34160b55
No preview for this file type
public/index.html
View file @ 34160b55
......@@ -32,7 +32,7 @@
</style>
</head>
<body style="height:100%">
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
......
src/components/Index.vue
View file @ 34160b55
<template>
<div>
<div style="height: 100%">
<div class="nav-header">
<div class="left-nav">
<div class="weather">
......@@ -17,13 +17,17 @@
</div>
</div>
<template v-for="(router, index) in leftNav">
<router-link
<div
v-if="router.child && router.child.length == 0"
:key="index"
:to="{ path: router.menu_url, query: { token_code: token } }"
>
{{ router.right_name }}</router-link
class="router-link"
>
<router-link
:to="{ path: router.menu_url, query: { token_code: token } }"
>
{{ router.right_name }}</router-link
>
</div>
<el-dropdown v-else :key="index" placement="bottom">
<div class="parent-router">
......@@ -94,7 +98,7 @@
</div>
</div>
</div>
<div>
<div class="route-container">
<router-view></router-view>
</div>
</div>
......@@ -165,8 +169,9 @@ export default {
// document.getElementsByTagName("html")[0].offsetHeight;
// console.log(windowHeight - documentHeight);
var deviceHeight = window.screen.height;
var scale = deviceHeight / 1220;
var scale = deviceHeight / 1080;
document.body.style.zoom = scale;
document.body.style.height = (1 / scale) * 100 + "vh";
document.styleSheets[document.styleSheets.length - 1].insertRule(
"canvas:not(.amap-layer):not(.amap-labels) {zoom: " +
Number(1 / scale).toFixed(2) +
......@@ -213,17 +218,22 @@ export default {
};
</script>
<style scoped lang="less">
.route-container {
height: calc(100% - 78px);
}
.nav-header {
display: flex;
align-content: center;
line-height: 70px;
padding: 0 18px;
min-height: 78px;
height: 78px;
margin: 0px;
background: url("@/assets/nav.png") no-repeat;
background-size: 100% 100%;
.left-nav {
width: calc(100% / 3);
display: flex;
justify-content: flex-start;
span {
color: #fff;
margin-right: 16px;
......@@ -265,6 +275,12 @@ export default {
.parent-router {
margin-right: 0 !important;
}
.router-link {
margin-right: 30px;
&:last-child {
margin-right: 0;
}
}
a,
.parent-router {
cursor: pointer;
......
src/components/ShadowContainer.vue
View file @ 34160b55
......@@ -30,6 +30,9 @@ export default {
2 2;
clip-path: inset(0 round 5px); //裁剪
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.shadow-container::after {
......
src/components/construction/Index.vue
View file @ 34160b55
......@@ -2,7 +2,7 @@
<div id="construction">
<div class="side-area">
<Title text="项目概况"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="construction-status">
<div class="construction-details">
<div class="construction-detail">
......@@ -129,7 +129,7 @@
</div>
</ShadowContainer>
<Title text="今日考勤率"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="check-in">
<div class="checks">
<div class="title">管理人员/考勤率</div>
......@@ -158,13 +158,13 @@
</div>
<div class="mid-area">
<Title text="项目平面图" type="long"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="swagger-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<el-carousel :interval="5000" arrow="always" height="530px">
<el-carousel :interval="5000" arrow="always" height="100%">
<el-carousel-item
v-for="(item, index) in screenDetail.banner_image_arr"
:key="index"
......@@ -175,7 +175,7 @@
</div>
</ShadowContainer>
<Title text="工程进度" type="long"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="progress-contains">
<div class="progress">
<div class="progress-container">
......@@ -220,7 +220,7 @@
</div>
<div class="side-area">
<Title text="设备情况"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="status">
<div
class="status-count"
......@@ -241,10 +241,8 @@
</div>
</ShadowContainer>
<Title text="AI预警"> </Title>
<ShadowContainer>
<div class="chart-container">
<div ref="qualityChart" id="quality-chart"></div>
</div>
<ShadowContainer class="short-container">
<div ref="qualityChart" id="quality-chart"></div>
</ShadowContainer>
</div>
</div>
......@@ -544,15 +542,17 @@ export default {
padding: 12px 20px;
display: flex;
justify-content: space-between;
height: 100%;
height: calc(100% - 12px);
padding-bottom: 0;
}
.side-area {
width: 25%;
width: 460px;
height: 100%;
}
.mid-area {
width: calc(50% - 40px);
margin: 0 20px;
height: 100%;
}
.divider {
display: flex;
......@@ -686,7 +686,7 @@ table {
#security-chart,
#quality-chart {
width: 100%;
height: 220px;
height: 100%;
}
.steps {
padding-top: 40px;
......@@ -745,6 +745,7 @@ table {
}
.swagger-container {
position: relative;
height: 100%;
.container-img {
width: 100%;
height: 100%;
......@@ -779,7 +780,7 @@ table {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: 528px;
overflow-y: auto;
.status-count {
width: calc(100% / 3);
......@@ -812,9 +813,7 @@ table {
max-height: 160px;
overflow: scroll;
}
.construction-status {
min-height: 380px;
}
.table-label {
font-size: 14px;
color: #22c3ed;
......@@ -826,7 +825,7 @@ table {
}
}
.table-scroll {
max-height: 366px;
height: calc(100% - 166px);
overflow-y: auto;
}
.check-in {
......@@ -861,4 +860,16 @@ table {
#step-scroll {
margin-top: 32px;
}
.long-container {
height: calc(53% - 50px);
}
.short-container {
height: calc(33% - 50px);
}
::v-deep .el-carousel {
height: 100%;
}
.construction-status {
height: 100%;
}
</style>
\ No newline at end of file
src/components/earlywarning/Index.vue
View file @ 34160b55
......@@ -46,7 +46,7 @@
<div class="mid-container">
<div class="today-warning">
<Title type="long" text="今日预警"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="warp" id="warning-list">
<div
class="person-check"
......@@ -87,18 +87,14 @@
</div>
<div class="right-container">
<Title type="long" text="整改统计"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="total-chart">
<div class="chart-container">
<div ref="todayChart" id="today-chart"></div>
</div>
<div class="chart-container">
<div ref="historyChart" id="history-chart"></div>
</div>
<div ref="todayChart" id="today-chart"></div>
<div ref="historyChart" id="history-chart"></div>
</div>
</ShadowContainer>
<Title type="long" text="本月报警趋势"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="warning-chart" ref="warningChart"></div>
</ShadowContainer>
</div>
......@@ -230,7 +226,7 @@ export default {
const option = {
title: {
x: "27%", //X坐标
y: "37%",
y: "34%",
text: total,
subtext: "今日整改",
textAlign: "center",
......@@ -254,7 +250,7 @@ export default {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "10%",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 40,
......@@ -331,7 +327,7 @@ export default {
const option = {
title: {
x: "27%", //X坐标
y: "37%",
y: "34%",
text: total,
subtext: "历史整改",
textAlign: "center",
......@@ -355,7 +351,7 @@ export default {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "10%",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 40,
......@@ -510,6 +506,7 @@ export default {
#earlywarning {
padding: 12px 20px;
padding-bottom: 0;
height: calc(100% - 24px);
}
.top-stauts {
display: flex;
......@@ -545,6 +542,7 @@ export default {
color: #1abcec;
text-align: right;
line-height: 60px;
white-space: nowrap;
}
.status-number {
text-align: right;
......@@ -561,6 +559,7 @@ export default {
.mid-container {
display: flex;
justify-content: space-between;
height: calc(100% - 208px);
.today-warning,
.right-container {
width: calc(50% - 10px);
......@@ -568,7 +567,7 @@ export default {
}
.warp {
width: 100%;
height: 660px;
height: 100%;
overflow-y: auto;
}
.person-check {
......@@ -622,26 +621,17 @@ export default {
}
#warning-chart {
width: 100%;
height: 280px;
height: 100%;
}
.total-chart {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.chart-container {
width: calc(50% - 20px);
position: relative;
.custom-chart {
position: absolute;
width: 25%;
top: 50%;
transform: translateY(-50%);
left: 15.5%;
}
}
#today-chart,
#history-chart {
width: 100%;
height: 268px;
width: calc(50% - 20px);
height: 100%;
}
}
.no-data {
......@@ -654,4 +644,10 @@ export default {
vertical-align: top;
}
}
.long-container {
height: calc(100% - 98px);
}
.short-container {
height: calc(50% - 106px);
}
</style>
\ No newline at end of file
src/components/elevator/Index.vue
View file @ 34160b55
......@@ -2,7 +2,7 @@
<div id="elevator">
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="elevator-description">
<div
:class="['elevator', activeElevatorIndex == index ? 'active' : '']"
......@@ -41,7 +41,7 @@
</div>
</ShadowContainer>
<Title text="报警信息"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="warning-info">
<div>
<div class="warning-info-text">今日报警</div>
......@@ -114,8 +114,8 @@
</ShadowContainer>
</div>
<div class="elevator-container">
<ShadowContainer>
<div style="height: 930px" id="elevator-detail">
<ShadowContainer class="long-container">
<div id="elevator-detail">
<div class="left-detail">
<template
v-if="
......@@ -402,13 +402,14 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 100%;
}
.side-area {
width: 25%;
width: 350px;
}
#elevator-description {
height: 290px;
height: 100%;
overflow-y: scroll;
.elevator {
background: rgba(44, 96, 162, 0.2);
......@@ -460,7 +461,7 @@ export default {
}
}
.elevator-container {
width: calc(75% - 20px);
width: calc(100% - 362px);
}
.platform {
img {
......@@ -502,6 +503,7 @@ export default {
justify-content: space-between;
text-align: center;
.warning-info-text {
white-space: nowrap;
padding-top: 20px;
font-size: 16px;
color: #ffffff;
......@@ -532,8 +534,9 @@ export default {
font-size: 14px;
text-align: center;
color: #c6def9;
height: calc(100% - 105px);
.warning-table-list {
height: 280px;
height: calc(100% - 50px);
overflow-y: auto;
}
.warning-table-header {
......@@ -578,7 +581,7 @@ export default {
#tower-main {
display: inline-block;
position: relative;
height: 100%;
.left-elevator {
position: absolute;
left: 0;
......@@ -617,7 +620,7 @@ export default {
height: 10px;
}
.tower {
height: 920px;
height: 100%;
}
}
.driver-info {
......@@ -662,6 +665,7 @@ export default {
line-height: 40px;
}
.t-des {
white-space: nowrap;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.1) 0%,
......@@ -681,4 +685,13 @@ export default {
margin: 10px 0 20px 0;
}
}
.long-container {
height: calc(100% - 52px);
}
.short-container {
height: calc(50% - 112px);
}
#elevator-detail {
height: 100%;
}
</style>
\ No newline at end of file
src/components/fallprotection/Index.vue
View file @ 34160b55
......@@ -2,7 +2,7 @@
<div id="fall-protection">
<div class="side-area">
<Title text="工地区域"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="level-description">
<div
class="levels"
......@@ -33,7 +33,7 @@
</div>
</ShadowContainer>
<Title text="近24小时报警分析"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="today-warning-chart" ref="today24hourWarningChart"></div>
</ShadowContainer>
</div>
......@@ -66,7 +66,7 @@
</div>
<div class="side-area">
<Title text="今日报警统计"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="warning-scroll">
<div
class="warning-count"
......@@ -81,7 +81,7 @@
</div>
</ShadowContainer>
<Title text="报警信息"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="warning-info">
<div>
<div class="warning-info-text">今日报警</div>
......@@ -214,7 +214,7 @@ export default {
mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
});
this.$nextTick(() => {
var scale = window.screen.height / 1220;
var scale = window.screen.height / 1080;
console.log(document.getElementById("amap-container").style);
document.getElementById("amap-container").style.zoom = 1 / scale;
});
......@@ -422,6 +422,7 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: calc(100% - 24px);
}
.side-area {
width: 25%;
......@@ -469,10 +470,10 @@ export default {
}
.swagger-container {
width: 100%;
height: 950px;
height: 100%;
}
#level-description {
height: 340px;
height: 100%;
overflow-y: scroll;
.levels {
margin-bottom: 12px;
......@@ -521,7 +522,7 @@ export default {
}
}
#today-warning-chart {
height: 400px;
height: 100%;
}
.warning-count {
display: inline-block;
......@@ -561,6 +562,7 @@ export default {
font-size: 16px;
color: #ffffff;
line-height: 18px;
white-space: nowrap;
}
.warning-info-num {
font-size: 24px;
......@@ -580,8 +582,9 @@ export default {
font-size: 14px;
text-align: center;
color: #c6def9;
height: calc(100% - 105px);
.warning-table-list {
height: 200px;
height: calc(100% - 50px);
overflow-y: auto;
}
.warning-table-header {
......@@ -612,7 +615,7 @@ export default {
}
}
.warning-scroll {
height: 346px;
height: 100%;
overflow-y: auto;
}
......@@ -663,4 +666,7 @@ export default {
height: 50px;
}
}
.short-container {
height: calc(50% - 108px);
}
</style>
\ No newline at end of file
src/components/management/Index.vue
View file @ 34160b55
......@@ -241,7 +241,7 @@ export default {
});
this.map.on("click", () => {});
this.$nextTick(() => {
var scale = window.screen.height / 1220;
var scale = window.screen.height / 1080;
document.getElementById("amap-container").style.zoom = 1 / scale;
});
})
......
src/components/management/sampleDialog.vue
View file @ 34160b55
......@@ -88,7 +88,7 @@ export default {
mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
});
this.$nextTick(() => {
var scale = window.screen.height / 1220;
var scale = window.screen.height / 1080;
document.getElementById("sample-map-container").style.zoom =
1 / scale;
});
......
src/components/noise/Index.vue
View file @ 34160b55
......@@ -2,7 +2,7 @@
<div id="noise">
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="monitor-list">
<div
:class="['noise-monitor', activeIndex == index ? 'active' : '']"
......@@ -16,21 +16,17 @@
</div>
</ShadowContainer>
<Title text="设备总览"></Title>
<ShadowContainer>
<div class="chart-container">
<div ref="deviceChart" id="device-chart"></div>
</div>
<ShadowContainer class="short-container">
<div ref="deviceChart" id="device-chart"></div>
</ShadowContainer>
<Title text="近30日噪音"></Title>
<ShadowContainer>
<div class="chart-container">
<div ref="noiseChart" id="noise-chart"></div>
</div>
<ShadowContainer class="short-container">
<div ref="noiseChart" id="noise-chart"></div>
</ShadowContainer>
</div>
<div class="mid-area">
<Title text="实时监测" type="long"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div
id="stats-container"
v-loading="loading"
......@@ -122,7 +118,7 @@
</div>
<div class="side-area">
<Title text="报警信息"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-time">报警时间</div>
......@@ -230,7 +226,7 @@ export default {
const option = {
title: {
x: "27%", //X坐标
y: "35%",
y: "28%",
text: total,
subtext: "总数",
textAlign: "center",
......@@ -254,8 +250,8 @@ export default {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "15%",
top: "35%",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 20,
textStyle: {
......@@ -327,7 +323,7 @@ export default {
const option = {
title: {
x: "27%", //X坐标
y: "32%",
y: "28%",
subtext: "近30日\n噪音情况",
textAlign: "center",
subtextStyle: {
......@@ -345,8 +341,8 @@ export default {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "15%",
top: "35%",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 20,
textStyle: {
......@@ -594,14 +590,13 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: calc(100% - 24px);
.side-area {
width: 28%;
min-width: calc(calc(100% - 880px) / 2);
width: 360px;
}
.mid-area {
width: calc(44% - 40px);
margin: 0 20px;
min-width: 840px;
width: calc(100% - 744px);
margin: 0 12px;
}
}
.chart-container {
......@@ -617,7 +612,7 @@ export default {
#device-chart,
#noise-chart {
width: 100%;
height: 210px;
height: 100%;
}
.i-type {
display: flex;
......@@ -829,8 +824,9 @@ export default {
font-size: 14px;
text-align: center;
color: #c6def9;
height: 100%;
.warning-table-list {
height: 820px;
height: calc(100% - 50px);
overflow-y: auto;
}
.warning-table-header {
......@@ -946,4 +942,10 @@ export default {
::v-deep .el-loading-mask {
position: absolute !important;
}
.short-container {
height: calc(33% - 108px);
}
.long-container {
height: calc(100% - 108px);
}
</style>
\ No newline at end of file
src/components/projectcheck/Index.vue
View file @ 34160b55
......@@ -2,13 +2,11 @@
<div id="project-check">
<div class="side-area">
<Title text="本月检查统计"></Title>
<ShadowContainer>
<div class="chart-container" id="current-chart">
<div id="current-check-stats" ref="currentCheckStatsChart"></div>
</div>
<ShadowContainer class="long-container">
<div id="current-check-stats" ref="currentCheckStatsChart"></div>
</ShadowContainer>
<Title text="检查事项隐患排行"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="blackspot-table">
<div class="warning-table-header">
<div class="warning-table-index">排序</div>
......@@ -59,7 +57,7 @@
</div>
<div class="right-area">
<Title text="月检测概况" type="long"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="time-selector">
<i class="el-icon-arrow-left" @click="getPrevMonth"></i>
<span>{{ year }}年{{ month }}月</span>
......@@ -69,34 +67,26 @@
<div class="left-pie-charts">
<div class="chart-angle">
<div class="chart-title">项目自查</div>
<div class="chart-container">
<div id="project-check-chart" ref="projectCheck"></div>
</div>
<div id="project-check-chart" ref="projectCheck"></div>
</div>
<div class="chart-angle">
<div class="chart-title">企业检查</div>
<div class="chart-container">
<div id="enterprise-check" ref="enterpriseCheck"></div>
</div>
<div id="enterprise-check" ref="enterpriseCheck"></div>
</div>
<div class="chart-angle">
<div class="chart-title">监督检测</div>
<div class="chart-container">
<div id="supervise-check" ref="superviseCheck"></div>
</div>
<div id="supervise-check" ref="superviseCheck"></div>
</div>
<div class="chart-angle">
<div class="chart-title">移动巡查</div>
<div class="chart-container">
<div id="move-check" ref="moveCheck"></div>
</div>
<div id="move-check" ref="moveCheck"></div>
</div>
</div>
<div id="right-question-chart" ref="questionBarChart"></div>
</div>
</ShadowContainer>
<Title text="整改记录" type="long"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="record-table">
<div class="warning-table-header">
<div class="warning-table-no">检查单号</div>
......@@ -259,7 +249,7 @@ export default {
series: [
{
type: "pie",
radius: ["50%", "60%"],
radius: ["45%", "55%"],
center: ["28%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
......@@ -399,7 +389,7 @@ export default {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "15%",
right: "5%",
top: "28%",
orient: "vertical",
itemGap: 20,
......@@ -598,12 +588,14 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 100%;
.side-area {
width: 28%;
width: 460px;
height: 100%;
}
.right-area {
width: calc(72% - 20px);
margin-left: 0 20px;
width: calc(100% - 472px);
height: 100%;
}
}
.time-selector {
......@@ -623,6 +615,7 @@ export default {
.chart-status {
display: flex;
margin-top: 12px;
height: calc(100% - 52px);
.left-pie-charts {
width: calc(50% - 6px);
display: flex;
......@@ -630,6 +623,14 @@ export default {
justify-content: space-between;
.chart-angle {
width: calc(50% - 6px);
height: calc(50% - 6px);
#project-check-chart,
#enterprise-check,
#supervise-check,
#move-check {
width: 100%;
height: calc(100% - 30px);
}
}
.chart-container {
width: 100%;
......@@ -657,6 +658,7 @@ export default {
}
#right-question-chart {
width: calc(50% - 6px);
height: 100%;
}
}
.chart-title {
......@@ -672,14 +674,16 @@ export default {
font-size: 14px;
color: #c6def9;
}
.warning-table-list {
height: calc(100% - 43.5px);
overflow: auto;
}
.blackspot-table {
font-size: 14px;
text-align: center;
color: #c6def9;
.warning-table-list {
height: 280px;
overflow: auto;
}
height: 100%;
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
......@@ -717,10 +721,8 @@ export default {
font-size: 14px;
text-align: center;
color: #c6def9;
.warning-table-list {
height: 280px;
overflow: auto;
}
height: 100%;
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
......@@ -772,17 +774,14 @@ export default {
}
}
}
#current-chart {
position: relative;
.custom-chart {
position: absolute;
width: 32%;
top: 50%;
transform: translateY(-50%);
left: 12%;
}
#current-check-stats {
height: 396px;
}
#current-check-stats {
width: 100%;
height: 100%;
}
.long-container {
height: calc(53% - 50px);
}
.short-container {
height: calc(32% - 50px);
}
</style>
\ No newline at end of file
src/components/realname/Index.vue
View file @ 34160b55
......@@ -84,7 +84,7 @@
</div>
<div class="mid-area">
<Title text="实时考勤"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="warp" id="warp-list">
<div
class="person-check"
......@@ -122,22 +122,20 @@
</div>
</ShadowContainer>
<Title text="人员地域分布"></Title>
<ShadowContainer>
<div class="chart-container" id="reset-area2">
<div ref="areaChart" id="area-chart"></div>
</div>
<ShadowContainer class="short-container">
<div ref="areaChart" id="area-chart"></div>
</ShadowContainer>
</div>
<div class="rt-area" id="reset-area1">
<Title type="long" text="一周考勤"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="chart-title">近一周考勤</div>
<div id="week-check-chart" ref="weekcheckChart"></div>
<div class="chart-title">近一周工种考勤</div>
<div id="week-work-chart" ref="weekworkChart"></div>
</ShadowContainer>
<div class="bottom-chart">
<div>
<div style="margin-right: 12px">
<Title text="近一周进出场统计"></Title>
<ShadowContainer>
<div id="in-out-chart" ref="inoutChart"></div>
......@@ -229,8 +227,8 @@ export default {
});
const option = {
title: {
x: "27%", //X坐标
y: "40%",
x: "26.5%", //X坐标
y: "36%",
text: total,
subtext: "总人数",
textAlign: "center",
......@@ -262,11 +260,11 @@ export default {
color: "inherit",
rich: {
a: {
fontSize: 14,
fontSize: 12,
align: "left",
},
b: {
fontSize: 20,
fontSize: 12,
align: "left",
lineHeight: 25,
},
......@@ -287,7 +285,7 @@ export default {
series: [
{
type: "pie",
radius: ["60%", "70%"],
radius: ["50%", "60%"],
center: ["28%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
......@@ -622,19 +620,24 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 100%;
.lt-area {
width: 20%;
width: 320px;
}
.mid-area {
width: 28%;
width: 360px;
height: 100%;
}
.lt-area {
height: 100%;
.status {
height: 100%;
.status-count {
background: url("@/assets/realname/rect.png") no-repeat;
background-size: 100% 100%;
padding: 10px 20px;
margin-bottom: 20px;
padding: 0px 20px;
margin-bottom: 12px;
height: calc(100% / 6 - 14px);
&:last-child {
margin-bottom: 0;
}
......@@ -665,22 +668,29 @@ export default {
}
}
.mid-area {
margin: 0 20px;
margin: 0 12px;
}
.rt-area {
width: 50%;
width: calc(100% - 704px);
}
}
.bottom-chart {
display: flex;
justify-content: space-between;
height: 32%;
& > div {
width: calc(50% - 10px);
width: calc(50% - 6px);
height: 100%;
::v-deep {
.shadow-container {
height: calc(100% - 50px);
}
}
}
}
.warp {
height: 480px;
height: 100%;
overflow: hidden;
}
.person-check {
......@@ -717,19 +727,10 @@ export default {
}
}
}
.chart-container {
position: relative;
.custom-chart {
position: absolute;
width: 23%;
top: 50%;
transform: translateY(-50%);
left: 16.5%;
}
}
#area-chart {
width: 100%;
height: 270px;
height: 100%;
}
.chart-title {
background: rgba(40, 137, 195, 0.2);
......@@ -745,15 +746,15 @@ export default {
}
#week-check-chart {
width: 100%;
height: 203px;
height: calc(50% - 35px);
}
#week-work-chart {
width: 100%;
height: 203px;
height: calc(50% - 35px);
}
#in-out-chart {
width: 100%;
height: 270px;
height: 100%;
}
.i-type {
display: flex;
......@@ -795,7 +796,7 @@ export default {
transform: translateY(-50%) translateX(-50%);
}
.work-types {
max-height: 270px;
max-height: 100%;
overflow-y: scroll;
}
.no-data {
......@@ -808,4 +809,11 @@ export default {
vertical-align: top;
}
}
.long-container {
height: calc(52% - 50px);
}
.short-container {
height: calc(32% - 50px);
}
</style>
\ No newline at end of file
src/components/safecap/Index.vue
View file @ 34160b55
......@@ -4,11 +4,11 @@
<el-input
prefix-icon="el-icon-search"
placeholder="设备编号/佩戴人员名称"
style="margin-bottom: 20px"
style="margin-bottom: 12px"
v-model="keywords"
@input="searchDevice"
></el-input>
<ShadowContainer>
<ShadowContainer class="long-container">
<div id="cap-list">
<div
class="device-user"
......@@ -272,7 +272,7 @@ export default {
this.capWindowVisible = false;
});
this.$nextTick(() => {
var scale = window.screen.height / 1220;
var scale = window.screen.height / 1080;
document.getElementById("amap-container").style.zoom = 1 / scale;
});
this.getSafeCapDeviceList();
......@@ -411,11 +411,13 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: calc(100% - 24px);
.side-area {
width: 20%;
width: 400px;
}
#map-area {
width: calc(80% - 20px);
width: calc(100% - 412px);
height: 100%;
}
}
......@@ -452,13 +454,13 @@ export default {
}
}
#cap-list {
height: 850px;
height: 100%;
overflow-y: scroll;
}
.swagger-container {
width: 100%;
height: 950px;
height: 100%;
}
#amap-container {
width: 100%;
......@@ -600,4 +602,7 @@ export default {
color: #3eec6f;
}
}
.long-container {
height: calc(100% - 92px);
}
</style>
\ No newline at end of file
src/components/safecap/mapDialog.vue
View file @ 34160b55
......@@ -98,7 +98,7 @@ export default {
mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
});
this.$nextTick(() => {
var scale = window.screen.height / 1220;
var scale = window.screen.height / 1080;
document.getElementById("route-map-container").style.zoom = 1 / scale;
});
this.search();
......
src/components/supervisory/Index.vue
View file @ 34160b55
......@@ -4,10 +4,10 @@
<el-input
prefix-icon="el-icon-search"
placeholder="监控点名称"
style="margin-bottom: 20px"
style="margin-bottom: 12px"
v-model="filterText"
></el-input>
<ShadowContainer>
<ShadowContainer class="tree-shadow-container">
<div class="tree-container">
<el-tree
ref="tree"
......@@ -315,8 +315,10 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 100%;
.side-area {
width: 20%;
width: 300px;
height: 100%;
}
}
......@@ -339,14 +341,14 @@ export default {
}
.tree-container {
height: 860px;
height: 100%;
overflow-y: scroll;
}
.video-out-container {
width: calc(80% - 20px);
width: calc(100% - 312px);
}
.video-area {
height: 914px;
height: calc(97% - 55px);
width: 100%;
.camera {
&:hover {
......@@ -362,20 +364,20 @@ export default {
}
&.camera-in-4 {
width: calc(50% - 2px);
height: calc(914px / 2 - 2px);
height: calc(100% / 2 - 2px);
}
&.camera-in-6 {
width: calc(100% / 3 - 2px);
height: calc(910px / 3 - 1px);
width: calc(100% / 3);
height: calc(100% / 3);
display: inline-block;
&:first-child {
width: calc(calc(100% / 3 - 2px) * 2);
height: calc(calc(906px / 3) * 2);
width: calc(calc(100% / 3) * 2);
height: calc(calc(100% / 3 - calc(1px / 3)) * 2);
}
}
&.camera-in-9 {
width: calc(100% / 3 - 2px);
height: calc(914px / 3 - 2px);
height: calc(100% / 3 - 2px);
}
.video-info {
......@@ -461,4 +463,7 @@ export default {
top: 20px;
z-index: 999;
}
.tree-shadow-container {
height: calc(97% - 52px);
}
</style>
\ No newline at end of file
src/components/tower/Index.vue
View file @ 34160b55
......@@ -2,17 +2,15 @@
<div id="tower">
<div class="side-area">
<Title text="设备总览"></Title>
<ShadowContainer>
<div class="chart-container">
<div ref="deviceChart" id="device-chart"></div>
</div>
<ShadowContainer class="short-container">
<div ref="deviceChart" id="device-chart"></div>
</ShadowContainer>
<Title text="各塔吊24h力矩百分比统计"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="force-chart" ref="forceChart"></div>
</ShadowContainer>
<Title text="各塔吊24h载重统计"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="dip-chart" ref="dipChart"></div>
</ShadowContainer>
</div>
......@@ -56,7 +54,7 @@
</div>
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div class="monitor-list">
<div
class="noise-monitor"
......@@ -83,7 +81,7 @@
</div>
</ShadowContainer>
<Title text="报警信息"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-run-time">运行时间</div>
......@@ -188,7 +186,7 @@ export default {
const option = {
title: {
x: "27%", //X坐标
y: "35%",
y: "30%",
text: total,
subtext: "总数",
textAlign: "center",
......@@ -212,8 +210,8 @@ export default {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "15%",
top: "30%",
right: "10%",
top: "25%",
orient: "vertical",
itemGap: 40,
textStyle: {
......@@ -461,7 +459,7 @@ export default {
mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
});
this.$nextTick(() => {
var scale = window.screen.height / 1220;
var scale = window.screen.height / 1080;
document.getElementById("amap-container").style.zoom = 1 / scale;
});
this.map.on("click", (e) => {
......@@ -724,12 +722,12 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: calc(100% - 24px);
.side-area {
width: 25%;
width: 360px;
}
#mid-area {
width: calc(50% - 40px);
margin: 0 20px;
width: calc(100% - 744px);
position: relative;
}
}
......@@ -768,7 +766,7 @@ export default {
#force-chart,
#dip-chart {
width: 100%;
height: 210px;
height: 100%;
}
.chart-container {
position: relative;
......@@ -782,7 +780,7 @@ export default {
}
#device-chart {
width: 100%;
height: 210px;
height: 100%;
}
.tower-name {
background: rgba(255, 175, 81, 0.1);
......@@ -863,7 +861,7 @@ export default {
}
}
.monitor-list {
height: 210px;
height: 100%;
overflow-y: auto;
}
.noise-monitor {
......@@ -947,8 +945,9 @@ export default {
font-size: 14px;
text-align: center;
color: #c6def9;
height: 100%;
.warning-table-list {
height: 500px;
height: calc(100% - 50px);
overflow-y: auto;
}
.warning-table-header {
......@@ -978,4 +977,10 @@ export default {
width: 20%;
}
}
.short-container {
height: calc(33% - 106px);
}
.long-container {
height: calc(66% - 98px);
}
</style>
\ No newline at end of file
src/components/unloadingplatform/Index.vue
View file @ 34160b55
......@@ -2,7 +2,7 @@
<div id="unloading-platform">
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer>
<ShadowContainer class="short-container">
<div id="platform-description">
<div
:class="['platforms', activePlatform == index ? 'active' : '']"
......@@ -22,7 +22,7 @@
</div>
</ShadowContainer>
<Title text="各平台运行分析"></Title>
<ShadowContainer>
<ShadowContainer class="long-2-container">
<div class="filters">
<div
:class="['filter', activeType == '0' ? 'active' : '']"
......@@ -69,7 +69,7 @@
</div>
<div class="side-area">
<Title text="报警信息"></Title>
<ShadowContainer>
<ShadowContainer class="long-container">
<div id="warning-info">
<div>
<div class="warning-info-text">今日报警</div>
......@@ -205,7 +205,7 @@ export default {
});
this.$nextTick(() => {
var scale = window.screen.height / 1220;
var scale = window.screen.height / 1080;
document.getElementById("amap-container").style.zoom = 1 / scale;
});
this.map.on("click", () => {
......@@ -500,17 +500,20 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: calc(100% - 24px);
}
.side-area {
width: 25%;
width: 360px;
}
.mid-area {
width: calc(50% - 40px);
margin: 0 20px;
width: calc(100% - 732px);
margin: 0 12px;
position: relative;
height: 100%;
}
.swagger-container {
position: relative;
height: 100%;
.container-img {
width: 100%;
height: 520px;
......@@ -545,12 +548,8 @@ export default {
width: 100%;
height: 100%;
}
.swagger-container {
width: 100%;
height: 950px;
}
#platform-description {
height: 200px;
height: 100%;
overflow-y: scroll;
.platforms {
margin-bottom: 12px;
......@@ -600,7 +599,7 @@ export default {
}
#battery-chart,
#weight-chart {
height: 230px;
height: calc(50% - 42px);
}
.warning-count {
display: inline-block;
......@@ -636,6 +635,7 @@ export default {
justify-content: space-between;
text-align: center;
.warning-info-text {
white-space: nowrap;
padding-top: 20px;
font-size: 16px;
color: #ffffff;
......@@ -659,8 +659,9 @@ export default {
font-size: 14px;
text-align: center;
color: #c6def9;
height: calc(100% - 105px);
.warning-table-list {
height: 670px;
height: calc(100% - 50px);
overflow-y: auto;
}
.warning-table-header {
......@@ -783,8 +784,8 @@ export default {
display: flex;
justify-content: center;
margin-bottom: 10px;
.filter {
white-space: nowrap;
font-size: 14px;
color: rgba(198, 222, 249, 1);
width: 120px;
......@@ -809,4 +810,13 @@ export default {
width: 100%;
margin: 20px 0;
}
.short-container {
height: calc(99% / 3 - 98px);
}
.long-2-container {
height: calc(99% / 3 * 2 - 98px);
}
.long-container {
height: calc(100% - 98px);
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment