From 11bc53810840e0a6c541077c193fc7ac5610a18f Mon Sep 17 00:00:00 2001
From: "lj7788@126.com" <lj7788@126.com>
Date: Thu, 16 Oct 2025 16:26:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=9F=BA=E5=9D=91=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/safety/excavation.vue           | 273 +++++++++++++++---
 1 file changed, 239 insertions(+), 34 deletions(-)

diff --git a/yanzhu-bigscreen/src/views/safety/excavation.vue b/yanzhu-bigscreen/src/views/safety/excavation.vue
index 70129010..d681ef8b 100644
--- a/yanzhu-bigscreen/src/views/safety/excavation.vue
+++ b/yanzhu-bigscreen/src/views/safety/excavation.vue
@@ -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>