Skip to content

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

样式修正

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