大屏基坑管理
parent
8a3097c456
commit
11bc538108
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="project-excavation" @click="clickOutside">
|
||||
<el-row style="display: flex">
|
||||
<el-col :span="6">
|
||||
<el-row style="display: flex; height: 66%">
|
||||
<el-col :span="6" style="height: 100%">
|
||||
<module-one-2-1 label="监测概况">
|
||||
<div class="analyse-equipment" style="">深基坑监测</div>
|
||||
<div class="czz-max">
|
||||
|
|
@ -146,6 +146,11 @@
|
|||
<div class="sjk-icon-max">
|
||||
<div
|
||||
class="sjk-icon-spot-list"
|
||||
:style="{
|
||||
transform: `scale(${imgScale})`,
|
||||
width: imgWidth + 'px',
|
||||
height: imgHeight + 'px',
|
||||
}"
|
||||
style="
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -153,7 +158,7 @@
|
|||
"
|
||||
>
|
||||
<div class="sjk-img-min" style="display: inline-block">
|
||||
<img :src="urlImgBgd" />
|
||||
<img :src="urlImgBgd" class="sjk-img-min-img" />
|
||||
</div>
|
||||
<span
|
||||
class="icon-img"
|
||||
|
|
@ -222,8 +227,8 @@
|
|||
<div class="mon-time-row1">
|
||||
<img src="/cdn/bsimages/security1.gif" class="time-img" />
|
||||
<div class="time-info">
|
||||
<div style="color: #cbdaff; font-size: 16px">监测时长(天)</div>
|
||||
<div style="color: #5bf8b5; font-size: 24px; font-weight: bold">
|
||||
<div class="time-title">监测时长(天)</div>
|
||||
<div class="time-val">
|
||||
{{ monitDays }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -349,8 +354,8 @@
|
|||
</module-one-2-1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row style="height: 34%">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<module-one-1-2 label="基坑变化趋势" style="position: relative">
|
||||
<div style="position: absolute; right: 0px; top: 4px; z-index: 100">
|
||||
<el-date-picker
|
||||
|
|
@ -436,7 +441,7 @@
|
|||
</div>
|
||||
</module-one-1-2>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<module-one-1-2 label="测点统计">
|
||||
<div class="pt-list scroll">
|
||||
<div v-for="(it, idx) in pointElements" :key="idx" class="pt-item">
|
||||
|
|
@ -474,12 +479,15 @@ export default {
|
|||
name: "JhbigscreenExcavation",
|
||||
data() {
|
||||
return {
|
||||
imgScale: 1,
|
||||
imgWidth: 0,
|
||||
imgHeight: 0,
|
||||
elKey: 0,
|
||||
selProject: null,
|
||||
dept: {},
|
||||
prjs: [],
|
||||
chart1Height: 250,
|
||||
chart2Height: 220,
|
||||
chart1Height: 200,
|
||||
chart2Height: 200,
|
||||
monitDays: 0,
|
||||
selPoint: null,
|
||||
monTotal: 0,
|
||||
|
|
@ -574,8 +582,25 @@ export default {
|
|||
this.dpi = this.$dpi();
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
this.chart1Height = is1K ? 250 : is2K ? 320 : 500;
|
||||
this.chart2Height = is1K ? 220 : is2K ? 260 : 440;
|
||||
this.chart1Height = is1K ? 200 : is2K ? 290 : 500;
|
||||
this.chart2Height = is1K ? 200 : is2K ? 320 : 540;
|
||||
this.charElIdx++;
|
||||
this.reScale();
|
||||
},
|
||||
reScale() {
|
||||
setTimeout(() => {
|
||||
let elList = this.$el.querySelector(".sjk-icon-max");
|
||||
let elImg = this.$el.querySelector(".sjk-img-min-img");
|
||||
let w1 = elList.offsetWidth;
|
||||
let w2 = elImg.offsetWidth;
|
||||
let h1 = elList.offsetHeight;
|
||||
let h2 = elImg.offsetHeight;
|
||||
let s1 = w1 / w2;
|
||||
let s2 = h1 / h2;
|
||||
this.imgScale = Math.min(s1, s2);
|
||||
this.imgWidth = w2;
|
||||
this.imgHeight = h2;
|
||||
}, 400);
|
||||
},
|
||||
getPtImg(it) {
|
||||
return it.isOnline
|
||||
|
|
@ -611,9 +636,14 @@ export default {
|
|||
"variation2",
|
||||
"changeRate2",
|
||||
];
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
let o = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 18,
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
|
|
@ -623,12 +653,12 @@ export default {
|
|||
legend: {
|
||||
textStyle: {
|
||||
color: "#c3dbfd",
|
||||
fontSize: is1K ? 14 : is2K ? 18 : 24,
|
||||
},
|
||||
data: objs.map((it) => it[0].spName),
|
||||
type: "scroll",
|
||||
animation: false,
|
||||
left: "30",
|
||||
right: "20",
|
||||
left: "center",
|
||||
selected: [],
|
||||
},
|
||||
grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
|
||||
|
|
@ -639,6 +669,7 @@ export default {
|
|||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#c5d9fc",
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 18,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
|
|
@ -651,14 +682,16 @@ export default {
|
|||
},
|
||||
yAxis: {
|
||||
name: titles[this.btnNav],
|
||||
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 18,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#c5d9fc",
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 18,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -728,6 +761,7 @@ export default {
|
|||
];
|
||||
let url = this.selProject.setting?.pitImgUrl || "";
|
||||
this.urlImgBgd = url || "";
|
||||
this.reScale();
|
||||
this.$api.http.all(ajaxs).then((res) => {
|
||||
this.monTotal = res[0].data.dev || 0;
|
||||
this.onlineDevTotal = res[0].data.data || 0;
|
||||
|
|
@ -933,10 +967,14 @@ export default {
|
|||
</script>
|
||||
<style lang="less">
|
||||
.project-excavation {
|
||||
height: 100%;
|
||||
.screen-one-2-2,
|
||||
.screen-one-2-1 {
|
||||
height: calc(100% - 40px) !important;
|
||||
}
|
||||
.screen-one-1-2 {
|
||||
height: calc(100% - 20px) !important;
|
||||
}
|
||||
|
||||
.my-svg-icon-blue,
|
||||
.my-svg-icon-green {
|
||||
|
|
@ -974,6 +1012,12 @@ export default {
|
|||
.time-info {
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
.time-title{
|
||||
color: #cbdaff; font-size: 16px
|
||||
}
|
||||
.time-val{
|
||||
color: #5bf8b5; font-size: 24px; font-weight: bold
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1013,26 +1057,22 @@ export default {
|
|||
|
||||
.pt-item-line {
|
||||
.el-row {
|
||||
margin-top: 8px;
|
||||
|
||||
.el-col {
|
||||
div {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.pt-label {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #b3e5fc;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.pt-val {
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #03cce0;
|
||||
line-height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1109,7 +1149,7 @@ export default {
|
|||
}
|
||||
|
||||
.analyse-number-max {
|
||||
height: 300px;
|
||||
height: 190px;
|
||||
|
||||
.warn-item {
|
||||
font-size: 12px;
|
||||
|
|
@ -1155,7 +1195,9 @@ export default {
|
|||
height: calc(100% - 50px);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon-img {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
|
@ -1188,21 +1230,22 @@ export default {
|
|||
}
|
||||
|
||||
.sjk-icon-legend {
|
||||
left: 11px;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
width: calc(100% - 22px);
|
||||
width: calc(100% - 3px);
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.analyse-equipment {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 325px;
|
||||
right: 0px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.czz-max {
|
||||
.czz-number {
|
||||
padding: 40px 10px;
|
||||
padding: 20px 10px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1234,10 +1277,12 @@ export default {
|
|||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.sjk-chart-line {
|
||||
.title-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chart-nav {
|
||||
div {
|
||||
font-size: 14px;
|
||||
|
|
@ -1245,18 +1290,22 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sjk-chart-line-title.mon-points {
|
||||
max-height: 70px;
|
||||
padding: 5px 20px;
|
||||
|
||||
.title-item {
|
||||
font-size: 14px;
|
||||
margin: 4px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mon-point-info {
|
||||
.mon-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.pt-item-line {
|
||||
.el-row {
|
||||
margin-top: 8px;
|
||||
|
|
@ -1264,38 +1313,41 @@ export default {
|
|||
.el-col {
|
||||
.pt-label {
|
||||
font-size: 16px;
|
||||
line-height: 55px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.pt-val {
|
||||
font-size: 20px;
|
||||
line-height: 55px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pt-list {
|
||||
.pt-item {
|
||||
height: 257px;
|
||||
height: 320px;
|
||||
width: calc(14% - 8px);
|
||||
font-size: 14px;
|
||||
|
||||
.pt-icon {
|
||||
font-size: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pt-name {
|
||||
margin-top: 12px;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pt-deptname {
|
||||
margin-top: 12px;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pt-data {
|
||||
margin-top: 12px;
|
||||
margin-top: 30px;
|
||||
|
||||
.pt-data-type {
|
||||
font-size: 16px;
|
||||
|
|
@ -1310,6 +1362,159 @@ export default {
|
|||
}
|
||||
|
||||
@media (min-width: 2561px) {
|
||||
.analyse-number-max {
|
||||
height: 530px;
|
||||
.warn-item {
|
||||
font-size: 20px;
|
||||
line-height: 45px;
|
||||
.sp-label {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.analyse-equipment{
|
||||
font-size:30px;
|
||||
}
|
||||
.czz-max {
|
||||
.czz-number {
|
||||
.czz-number-img{
|
||||
width:100px;
|
||||
height: 100px;
|
||||
.my-svg-icon-blue,.my-svg-icon-green{
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
top:8px;
|
||||
}
|
||||
}
|
||||
.survey_content_number{
|
||||
font-size: 24px;
|
||||
.survey_content_value{
|
||||
span{
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.analyse-title{
|
||||
height:60px;
|
||||
.analyse-text{
|
||||
line-height: 80px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.sjk-chart-line {
|
||||
.title-item {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.chart-nav {
|
||||
div {
|
||||
font-size: 18px;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sjk-chart-line-title.mon-points {
|
||||
max-height: 150px;
|
||||
margin-top: 10px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.title-item {
|
||||
font-size: 20px;
|
||||
margin: 8px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mon-time-row1{
|
||||
.time-img{
|
||||
height: 200px;
|
||||
}
|
||||
.time-info{
|
||||
line-height: 60px;
|
||||
font-size: 32px;
|
||||
.time-title{
|
||||
font-size: 24px
|
||||
}
|
||||
.time-val{
|
||||
font-size: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mon-point-info {
|
||||
.mon-title {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.pt-item-line {
|
||||
.mon-point-title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.el-row {
|
||||
margin-top: 12px;
|
||||
|
||||
.el-col {
|
||||
.pt-label {
|
||||
font-size: 20px;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
.pt-val {
|
||||
font-size: 24px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sjk-icon-max {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.sjk-icon-legend {
|
||||
.sjk-icon-legend-color-list-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.pt-list {
|
||||
.pt-item {
|
||||
height: 550px;
|
||||
width: calc(15% - 10px);
|
||||
font-size: 20px;
|
||||
|
||||
.pt-icon {
|
||||
font-size: 80px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.pt-name {
|
||||
margin-top: 80px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.pt-type {
|
||||
margin-top: 40px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.pt-deptname {
|
||||
margin-top: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.pt-data {
|
||||
margin-top: 40px;
|
||||
|
||||
.pt-data-type {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.pt-data-val {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue