纯水监测修改

src/components/waterAlarm/waterAlarm.vue

@@ -12,12 +12,12 @@
         </div>
         <div class="waterAlarm-name-box">
           <div class="lv-box type-color-a">
-            <div>纯水设备</div>
+            <div>纯水监测</div>
           </div>
           <p class="name-p">{{planData.buildingName}}：{{planData.deviceName}}</p>
           <p class="time-p">报警时间：{{parseTime(planData.warningTime)}}</p>
         </div>
-        <div v-if="!lookImgType" class="waterAlarm-big-box">
+        <div class="waterAlarm-big-box">
           <div class="waterAlarm-left-box">
             <img :src="planData.deviceImg" alt="">
           </div>
@@ -110,18 +110,14 @@
       //关闭窗口
       outPlan(){
         let self = this;
-        if(this.lookImgType){
-          this.$set(this,'lookImgType',false);
-        }else{
-          this.$confirm('纯水系统监测异常，确定要关闭窗口？', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            clearInterval(self.timer);
-            self.$set(self,'showType',false);
-          }).catch(() => {});
-        }
+        this.$confirm('纯水监测异常，确定要关闭窗口？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          clearInterval(self.timer);
+          self.$set(self,'showType',false);
+        }).catch(() => {});
       },
       //预案-MQTT连接
       offPlanMQTT(type){

src/utils/request.js

@@ -29,7 +29,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: urlText+judgmentNetworkReturnAddress(),
   // 超时
-  timeout: 10000
+  timeout: 20000
 })
 // request拦截器
 service.interceptors.request.use(config => {

src/views/emergencyManagement/index.vue

@@ -20,7 +20,7 @@
         <p class="button-p" @click="goPage(3)">三维模型</p>
         <p class="button-p" @click="goPage(4)">视频监控</p>
         <p class="button-check-p">应急管控</p>
-        <p class="button-p" @click="goPage(6)">纯水系统</p>
+        <p class="button-p" @click="goPage(6)">纯水监测</p>
         <p class="null-p"></p>
       </div>
       <mapComponent ref="mapComponent"></mapComponent>

src/views/newSafetyOverview/index.vue

@@ -28,7 +28,7 @@
         <p class="button-p" @click="goPage(3)">三维模型</p>
         <p class="button-p" @click="goPage(4)">视频监控</p>
         <p class="button-p" @click="goPage(5)">应急管控</p>
-        <p class="button-p" @click="goPage(6)">纯水系统</p>
+        <p class="button-p" @click="goPage(6)">纯水监测</p>
         <p class="null-p"></p>
       </div>
       <centerNumData></centerNumData>

src/views/pureWaterSystem/index.vue

@@ -15,12 +15,32 @@
       <p class="button-p" @click="goPage(3)">三维模型</p>
       <p class="button-p" @click="goPage(6)">视频监控</p>
       <p class="button-p" @click="goPage(5)">应急管控</p>
-      <p class="button-check-p">纯水系统</p>
+      <p class="button-check-p">纯水监测</p>
       <p class="null-p"></p>
     </div>
     <div class="left-max-big-box">
       <title-page-img-components v-if="propsData1" :propsData="propsData1"></title-page-img-components>
       <div class="max-big-box">
+        <!-- Row 1: 产水量统计 -->
+        <div class="grid-row row-1" v-if="propsDataA">
+          <div class="grid-cell center-cell">
+            <div class="cell-label">年度产水量</div>
+            <div class="cell-num">{{ propsDataA.annualOutput || 0 }}<span class="num-unit">M³</span></div>
+          </div>
+          <div class="grid-cell center-cell">
+            <div class="cell-label">当月</div>
+            <div class="cell-num">
+              {{ propsDataA.monthlyOutput || 0 }}<span class="num-unit">M³</span>
+              <i class="num-trend trend-down">
+              {{ propsDataA.isRiseMonthlyOutput ? '↑' : '↓' }}
+              </i>
+            </div>
+          </div>
+          <div class="grid-cell center-cell">
+            <div class="cell-label">去年同期</div>
+            <div class="cell-num">{{ propsDataA.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>
+          </div>
+        </div>
         <div class="big-box">
           <pureWaterPage v-if="propsDataA" :propsData="propsDataA"></pureWaterPage>
         </div>
@@ -32,6 +52,26 @@
     <div class="right-max-big-box">
       <title-page-img-components v-if="propsData2" :propsData="propsData2"></title-page-img-components>
       <div class="max-big-box">
+        <!-- Row 1: 产水量统计 -->
+        <div class="grid-row row-1" v-if="propsDataC">
+          <div class="grid-cell center-cell">
+            <div class="cell-label">年度产水量</div>
+            <div class="cell-num">{{ propsDataC.annualOutput || 0 }}<span class="num-unit">M³</span></div>
+          </div>
+          <div class="grid-cell center-cell">
+            <div class="cell-label">当月</div>
+            <div class="cell-num">
+              {{ propsDataC.monthlyOutput || 0 }}<span class="num-unit">M³</span>
+              <i class="num-trend trend-down">
+                {{ propsDataC.isRiseMonthlyOutput ? '↑' : '↓' }}
+              </i>
+            </div>
+          </div>
+          <div class="grid-cell center-cell">
+            <div class="cell-label">去年同期</div>
+            <div class="cell-num">{{ propsDataC.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>
+          </div>
+        </div>
         <div class="big-box">
           <pureWaterPage v-if="propsDataC" :propsData="propsDataC"></pureWaterPage>
         </div>
@@ -240,10 +280,220 @@
       width:1280px;
       height:1172px;
       .big-box{
-        height:570px;
+        height:472px;
       }
       .big-box:nth-child(2){
-        margin-top:32px;
+        margin-top:40px;
+      }
+
+      /* ===== 右侧数据网格面板 ===== */
+
+      /* --- 行 --- */
+      .grid-row {
+        margin-top:40px;
+        border: 1px solid #00E6FF;
+        display: flex;
+        /*border-bottom: 1px solid rgba(0,230,255,0.4);*/
+        &:last-child { border-bottom: none; }
+      }
+
+      /* --- 单元格通用 --- */
+      .grid-cell {
+        position: relative;
+        overflow: hidden;
+        flex: 1;
+        /*border-right: 1px solid rgba(0,230,255,0.4);*/
+        box-sizing: border-box;
+        &:last-child { border-right: none; }
+      }
+
+      /* 居中单元格 */
+      .center-cell {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 10px;
+      }
+
+      /* 图表单元格 */
+      .chart-cell {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 28px 6px 4px;
+        .echart-box {
+          flex: 1;
+          width: 100%;
+        }
+      }
+      .chart-cell:nth-child(1){
+        padding: 38px 6px 4px;
+      }
+
+      /* 左对齐单元格 */
+      .left-cell {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 14px 22px;
+      }
+
+      /* --- 标签 --- */
+      .cell-label {
+        font-size: 18px;
+        color: #FFFFFF;
+        letter-spacing: 1px;
+        margin-bottom: 10px;
+        flex-shrink: 0;
+        position: absolute;
+        top:1px;
+        left:0;
+        width:400px;
+        text-align: center;
+        line-height:40px;
+        background-color: #052628;
+      }
+
+      /* --- 数值 --- */
+      .cell-num {
+        margin-top:30px;
+        font-size: 32px;
+        font-weight: 700;
+        color: #00E6FF;
+        font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
+        display: flex;
+        align-items: baseline;
+        line-height: 1;
+
+        .num-unit {
+          font-size: 22px;
+          font-weight: 700;
+          margin-left: 2px;
+          color: #00E6FF;
+        }
+
+        .num-trend {
+          font-style: normal;
+          font-size: 16px;
+          margin-left: 4px;
+          font-weight: 700;
+          &.trend-up   { color: #FF4D4F; }
+          &.trend-down { color: #52C41A; }
+        }
+      }
+
+      /* ====== Row 1: 产水量统计 ====== */
+      .row-1 {
+        height: 148px;
+        flex-shrink: 0;
+        margin-left:86px;
+      }
+
+      /* ====== Row 2: 仪表盘 ====== */
+      .row-2 {
+        height: 224px;
+        flex-shrink: 0;
+
+        .cell-label {
+          margin-bottom: 4px;
+        }
+      }
+
+      /* ====== Row 3: 其他指标 ====== */
+      .row-3 {
+        flex: 1;
+
+        .cell-label {
+          margin-top: 20px;
+        }
+        /* 管网流量 */
+        .num-flow {
+          font-size: 28px;
+          margin-bottom: 12px;
+          margin-top:60px;
+          margin-left:60px;
+        }
+
+        .flow-track {
+          width: 100%;
+          height: 8px;
+          background: rgba(0,230,255,0.1);
+          border-radius: 4px;
+          overflow: hidden;
+
+          .flow-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #15827C, #00E6FF);
+            border-radius: 4px;
+            transition: width 0.4s;
+          }
+        }
+
+        /* 水质电阻率 */
+        .max-resist-line{
+          border:1px solid #00E6FF;
+          padding:20px 10px;
+          margin-top:60px;
+          border-radius:6px;
+        }
+        .resist-line {
+          display: flex;
+          align-items: center;
+          margin-bottom: 14px;
+          &:last-of-type { margin-bottom: 0; }
+
+          .resist-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            flex-shrink: 0;
+            margin-right: 8px;
+            display: inline-block;
+            font-style: normal;
+          }
+
+          .dot-green  { background: #1890FF; }
+          .dot-yellow { background: #52C41A; }
+
+          .resist-key {
+            font-size: 20px;
+            color: #FFFFFF;
+            margin-right: 4px;
+            white-space: nowrap;
+          }
+
+          .resist-val {
+            font-size: 22px;
+            font-weight: 700;
+            color: #00E6FF;
+            font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
+            margin-right: 4px;
+            line-height: 1;
+          }
+        }
+
+        /* 回水压力 */
+        .max-resist-line-2{
+          border:1px solid #00E6FF;
+          padding:12px 10px;
+          margin-top:60px;
+          border-radius:6px;
+        }
+        .num-pressure {
+          margin-bottom: 8px;
+          color:#00E6FF;
+          text-align: center;
+          font-size: 22px;
+          font-weight: 700;
+        }
+
+        .pressure-sub {
+          text-align: center;
+          font-size: 18px;
+          color: rgba(255,255,255,0.55);
+          line-height:24px;
+        }
       }
     }
   }

src/views/pureWaterSystem/pageComponent/pureWaterPage.vue

@@ -21,24 +21,24 @@
 
       <!-- Row 1: 产水量统计 -->
       <div class="grid-row row-1">
-        <div class="grid-cell center-cell">
-          <div class="cell-label">年度产水量</div>
-          <div class="cell-num">{{ propsData.annualOutput || 0 }}<span class="num-unit">M³</span></div>
-        </div>
-        <div class="grid-cell center-cell">
-          <div class="cell-label">当月</div>
-          <div class="cell-num">
-            {{ propsData.monthlyOutput || 0 }}<span class="num-unit">M³</span>
-            <!--<i class="num-trend" :class="propsData.isRiseMonthlyOutput ? 'trend-up' : 'trend-down'">-->
-            <i class="num-trend trend-down">
-              {{ propsData.isRiseMonthlyOutput ? '↑' : '↓' }}
-            </i>
-          </div>
-        </div>
-        <div class="grid-cell center-cell">
-          <div class="cell-label">去年同期</div>
-          <div class="cell-num">{{ propsData.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>
-        </div>
+        <!--<div class="grid-cell center-cell">-->
+          <!--<div class="cell-label">年度产水量</div>-->
+          <!--<div class="cell-num">{{ propsData.annualOutput || 0 }}<span class="num-unit">M³</span></div>-->
+        <!--</div>-->
+        <!--<div class="grid-cell center-cell">-->
+          <!--<div class="cell-label">当月</div>-->
+          <!--<div class="cell-num">-->
+            <!--{{ propsData.monthlyOutput || 0 }}<span class="num-unit">M³</span>-->
+            <!--&lt;!&ndash;<i class="num-trend" :class="propsData.isRiseMonthlyOutput ? 'trend-up' : 'trend-down'">&ndash;&gt;-->
+            <!--<i class="num-trend trend-down">-->
+              <!--{{ propsData.isRiseMonthlyOutput ? '↑' : '↓' }}-->
+            <!--</i>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="grid-cell center-cell">-->
+          <!--<div class="cell-label">去年同期</div>-->
+          <!--<div class="cell-num">{{ propsData.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>-->
+        <!--</div>-->
       </div>
 
       <!-- Row 2: 仪表盘 -->
@@ -341,7 +341,7 @@ export default {
 <style scoped lang="scss">
 .pureWaterPage {
   width: 1280px;
-  height: 570px;
+  height: 422px;
   display: flex;
   overflow: hidden;
 
@@ -349,12 +349,12 @@ export default {
   .left-panel {
     width: 500px;
     flex-shrink: 0;
-    height: 570px;
+    height: 422px;
     display: flex;
     flex-direction: column;
 
     .device-name-bar {
-      padding: 32px 18px 0;
+      padding: 16px 18px 16px;
       font-size: 24px;
       font-weight: 700;
       flex-shrink: 0;
@@ -373,14 +373,14 @@ export default {
       justify-content: center;
 
       .photo {
-        max-width: 460px;
-        max-height: 510px;
+        max-width: 327px;
+        max-height: 362px;
         object-fit: contain;
       }
 
       .photo-placeholder {
-        width: 360px;
-        height: 440px;
+        width: 327px;
+        height: 362px;
         border: 2px dashed rgba(0,230,255,0.2);
         border-radius: 4px;
       }
@@ -390,7 +390,8 @@ export default {
   /* ===== 右侧数据网格面板 ===== */
   .right-panel {
     flex: 1;
-    height: 570px;
+    /*height: 470px;*/
+    height: 422px;
     border: 1px solid #00E6FF;
     box-sizing: border-box;
     display: flex;
@@ -497,7 +498,8 @@ export default {
 
     /* ====== Row 1: 产水量统计 ====== */
     .row-1 {
-      height: 148px;
+      /*height: 148px;*/
+      height: 0px;
       flex-shrink: 0;
     }
 

src/views/resourceDevice/index.vue

@@ -23,7 +23,7 @@
           <p class="button-p" @click="goPage(3)">三维模型</p>
           <p class="button-p" @click="goPage(4)">视频监控</p>
           <p class="button-p" @click="goPage(5)">应急管控</p>
-          <p class="button-p" @click="goPage(6)">纯水系统</p>
+          <p class="button-p" @click="goPage(6)">纯水监测</p>
           <p class="null-p"></p>
         </div>
         <div class="center-flex-box" style="margin-top:80px;">

src/views/videoSurveillance/index.vue

@@ -22,7 +22,7 @@
       <p class="button-p" @click="goPage(3)">三维模型</p>
       <p class="button-check-p">视频监控</p>
       <p class="button-p" @click="goPage(5)">应急管控</p>
-      <p class="button-p" @click="goPage(6)">纯水系统</p>
+      <p class="button-p" @click="goPage(6)">纯水监测</p>
       <p class="null-p"></p>
     </div>
   </div>