纯水对接

src/api/index.js

@@ -462,3 +462,20 @@ export function iotCameraLargeFindByCondition(data) {
     data: data
   })
 }
+
+//纯水设备数据获取
+export function waterMonitorWaterUseData(query) {
+  return request({
+    url: '/water/monitor/waterUseData',
+    method: 'get',
+    params: query
+  })
+}
+//获取纯水报警数据
+export function waterWaterWarnRecordGetWarnById(data) {
+  return request({
+    url: '/water/waterWarnRecord/getWarnById',
+    method: 'post',
+    data: data
+  })
+}

src/components/waterAlarm/waterAlarm.vue

@@ -0,0 +1,663 @@
+<template>
+  <div class="waterAlarm">
+    <div class="waterAlarmBlack" v-if="showType">
+      <div class="waterAlarm-max-big-box">
+        <div class="waterAlarm-title-box">
+          <div class="top-img-box">
+            <img class="top-img-one vibrate" src="@/assets/ZDimages/icon_bt_yso@1x.png">
+            <img class="top-img-two" src="@/assets/ZDimages/icon_bt_yst@1x.png">
+          </div>
+          <p class="top-name-p">预警事件详情</p>
+          <p class="top-out-p el-icon-close" @click="outPlan"></p>
+        </div>
+        <div class="waterAlarm-name-box">
+          <div class="lv-box type-color-a">
+            <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-left-box">
+            <img :src="planData.deviceImg" alt="">
+          </div>
+          <div class="waterAlarm-right-box">
+            <div class="waterAlarm-sensor-box waterAlarm-scrollbar">
+              <p>所属单位：{{planData.deptName}}</p>
+              <p>所在位置：{{planData.buildingName}} {{planData.floorName}}</p>
+            </div>
+            <div class="waterAlarm-text-box">
+              <div class="waterAlarm-text-left-box waterAlarm-scrollbar">
+                <div>
+                  <p>设备名称：</p>
+                  <p>{{planData.deviceName}}</p>
+                </div>
+                <div>
+                  <p>报警原因：</p>
+                  <p style="color:#FF0102;">{{planData.warningReason}}</p>
+                </div>
+                <div>
+                  <p>报警时间：</p>
+                  <p>{{parseTime(planData.warningTime)}}</p>
+                </div>
+                <div>
+                  <p>所在位置：</p>
+                  <p>{{planData.buildingName}} {{planData.floorName}}</p>
+                </div>
+              </div>
+              <div class="waterAlarm-text-right-box waterAlarm-scrollbar">
+                <div class="box-one">
+                  <p>通知人：</p>
+                  <p>{{planData.notifierName}}</p>
+                </div>
+                <div class="box-one">
+                  <p>通知时间：</p>
+                  <p>{{parseTime(planData.notifyTime)}}</p>
+                </div>
+                <div class="box-one">
+                  <p>通知方式：</p>
+                  <p>{{planData.notifyMethod}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="waterAlarm-bottom-button-box">
+          <p class="null-p"></p>
+          <p class="button-out-p" @click="outPlan">关闭</p>
+          <p class="null-p"></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import mqtt from 'mqtt'
+  import {
+    waterWaterWarnRecordGetWarnById,
+  } from "@/api/index";
+
+  export default {
+    name: 'waterAlarm',
+    data () {
+      return {
+        showType:false,
+        //预案MQTT
+        planOpic:'water/device/collector/*/',
+        planClient:{},
+        //预案参数
+        planData:{},
+        //持续时间
+        seconds:null,
+        //定时器
+        timer:null,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      let self = this;
+      //判断是否已有链接
+      if(!this.planClient.unsubscribe){
+        this.offPlanMQTT('on');
+      }
+      setTimeout(function(){
+        self.waterWaterWarnRecordGetWarnById();
+      },500)
+    },
+    methods:{
+      //关闭窗口
+      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(() => {});
+        }
+      },
+      //预案-MQTT连接
+      offPlanMQTT(type){
+        let self = this;
+        if(self.planClient.unsubscribe){
+          self.planClient.unsubscribe(self.planOpic, error => {
+            if (error) {
+              // console.log('mqtt关闭连接错误:', error)
+            }
+          })
+          self.planClient.end();
+          this.$set(this,'planClient',{});
+        }
+        //判断传入参数如果存在 发起一次新的连接
+        if(type){
+          this.planMQTT();
+        }
+      },
+      //预案-MQTT订阅
+      planMQTT(){
+        let self = this;
+        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
+          username: localStorage.getItem('mqttUser'),
+          password:localStorage.getItem('mqttPassword')
+        });
+        this.planClient.on("connect", e =>{
+          this.planClient.subscribe(self.planOpic, (err) => {
+            if (!err) {
+              console.log("预案-订阅成功:" + self.planOpic);
+            }else{
+              // console.log("预案-连接错误:" + err);
+            }
+          });
+        });
+        this.planClient.on("message", (topic, message) => {
+          if (message){
+            console.log("纯水报警触发:");
+            //获取预案数据
+            setTimeout(function(){
+              self.waterWaterWarnRecordGetWarnById();
+            },500)
+          }
+        });
+      },
+      //查询当前正在发生的预案
+      waterWaterWarnRecordGetWarnById(){
+        clearInterval(this.timer);
+        waterWaterWarnRecordGetWarnById().then(response => {
+          if(response.data){
+            if(response.data.deviceCode == null){
+              response.data.deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
+            }else if(response.data.deviceCode == '2'){
+              response.data.deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
+            }else if(response.data.deviceCode == '3'){
+              response.data.deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
+            }else if(response.data.deviceCode == '4'){
+              response.data.deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
+            }
+            this.$set(this,'planData',response.data);
+            this.$set(this,'showType',true);
+          }else{
+            this.$set(this,'showType',false);
+          }
+        })
+      },
+      //计算时间戳
+      newTimestamp(value){
+        let timestamp = this.accSub(this.accDiv(Date.parse(new Date()),1000),value);
+        this.time(timestamp);
+      },
+      //定时器
+      time(time){
+        let self = this;
+        self.seconds = parseInt(time);
+        self.timer = window.setInterval(refreshCount, 1000);
+        function refreshCount() {
+          self.seconds++
+        }
+      },
+      //时间格式
+      convertSecondsToHMS(seconds) {
+        var hours = Math.floor(seconds / 3600);
+        var minutes = Math.floor((seconds % 3600) / 60);
+        var remainingSeconds = seconds % 60;
+        return hours + "小时 " + minutes + "分钟 " + remainingSeconds + "秒";
+      },
+    },
+    beforeDestroy() {
+      //清除MQTT
+      let self = this;
+      self.offPlanMQTT();
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .waterAlarm{
+    .waterAlarmBlack{
+      height:100%;
+      width:100%;
+      position: absolute;
+      top:0;
+      left:0;
+      z-index:1100;
+      background-color: rgba(0,0,0,0.8);
+      .waterAlarm-max-big-box{
+        position: absolute;
+        left:50%;
+        top:50%;
+        margin-top:-567px;
+        margin-left:-938px;
+        width: 1720px;
+        height: 1140px;
+        display: flex;
+        flex-direction: column;
+        .waterAlarm-title-box{
+          display: flex;
+          padding:40px 0 36px 30px;
+          border-bottom:1px solid #1ed0f8;
+          background-color: #01232A;
+          border-top-left-radius:20px;
+          border-top-right-radius:20px;
+          .top-img-box {
+            width: 60px;
+            position: relative;
+            .top-img-one {
+              z-index:5;
+              display: block;
+              width:18px;
+              height:20px;
+              position: absolute;
+              top:5px;
+              left:15px;
+            }
+            .top-img-two{
+              z-index:1;
+              display: block;
+              width:28px;
+              height:30px;
+              position: absolute;
+              top:0;
+              left:25px;
+            }
+            .vibrate {
+              position: relative;
+              animation: vibrate 2s infinite;
+            }
+
+            @keyframes vibrate {
+              0% {
+                left:15px;
+              }
+
+              50% {
+                left:20px;
+              }
+
+              100% {
+                left:15px;
+              }
+            }
+          }
+          .top-name-p {
+            flex: 1;
+            line-height: 30px;
+            height:30px;
+            color: #fff;
+            font-size: 26px;
+            margin-left:10px;
+          }
+          .top-out-p{
+            cursor: pointer;
+            font-size:26px;
+            line-height: 30px;
+            height:30px;
+            color:#fff;
+            margin-right:40px;
+          }
+        }
+        .waterAlarm-name-box{
+          height:107px;
+          display: flex;
+          padding:0 20px;
+          background-color: #01232A;
+          border-bottom:1px solid #1ed0f8;
+          .lv-box{
+            margin-top:26px;
+            width:120px;
+            height:54px;
+            border-radius:50px;
+            div{
+              margin:3px 4px;
+              width:110px;
+              height:46px;
+              line-height:46px;
+              font-size:20px;
+              text-align: center;
+              border-radius:50px;
+            }
+          }
+          .type-color-a {
+            border:1px solid #FF0102;
+            div{
+              background-color: #FF0102;
+              color:#fff;
+            }
+          }
+          .type-color-b {
+            border:1px solid rgb(256, 232, 206);
+            div{
+              background-color: rgb(256, 232, 206);
+              color:#FF9900;
+            }
+          }
+          .type-color-c {
+            border:1px solid rgb(251, 228, 206);
+            div{
+              background-color: rgb(251, 228, 206);
+              color:#FF4800;
+            }
+          }
+          .type-color-d {
+            border:1px solid rgb(248, 206, 205);
+            div{
+              background-color: rgb(248, 206, 205);
+              color:#FF0000;
+            }
+          }
+          .name-p{
+            width:450px;
+            font-size:20px;
+            line-height:107px;
+            color:#fff;
+            margin-left:20px;
+          }
+          .time-p{
+            width:450px;
+            font-size:20px;
+            line-height:107px;
+            color:#fff;
+          }
+        }
+        .waterAlarm-big-box{
+          flex:1;
+          display: flex;
+          padding:20px 20px 0;
+          background-color: #01232A;
+          border-bottom-left-radius:20px;
+          border-bottom-right-radius:20px;
+          .waterAlarm-left-box{
+            width: 917px;
+            border-radius:10px;
+            overflow: hidden;
+            img{
+              display: block;
+              /*width: 548px;*/
+              /*height: 608px;*/
+              width: 685px;
+              height: 760px;
+              margin:20px auto;
+            }
+          }
+          .bugle-box{
+            width: 917px;
+            height: 236px;
+            margin-top:20px;
+            border-radius:10px;
+            background-color: #032C32;
+            display: flex;
+            flex-direction: column;
+            .bugle-for-button-box{
+              padding:20px 20px 10px;
+              .for-button-box-check{
+                border:1px solid #24D1F9!important;
+                color:#24D1F9!important;
+              }
+              .for-button-box{
+                display: inline-block;
+                margin:0 22px 11px 0;
+                cursor: pointer;
+                width:150px;
+                padding:0 10px;
+                height:50px;
+                border:1px solid #1E768E;
+                text-align: center;
+                font-size:18px;
+                line-height:50px;
+                border-radius:5px;
+                color:#fff;
+                /*单行省略号*/
+                overflow:hidden;
+                text-overflow:ellipsis;
+                white-space:nowrap;
+              }
+            }
+            .bugle-for-text-box{
+              flex:1;
+              padding:10px 20px;
+              .null-p{
+                color:#999;
+                font-size:18px;
+                text-align: center;
+              }
+              .for-text-box{
+                display: flex;
+                p:nth-child(1){
+                  line-height:24px;
+                  font-size:18px;
+                  color:#24D1F9;
+                  margin-bottom:5px;
+                  margin-right:10px;
+                }
+                p:nth-child(2){
+                  line-height:24px;
+                  font-size:18px;
+                  color:#fff;
+                  margin-bottom:5px;
+                }
+              }
+            }
+            .bugle-for-input-box{
+              margin:20px;
+            }
+            ::v-deep .bugle-for-input-box{
+              .el-input__inner{
+                height:50px;
+                line-height:50px;
+                font-size:18px;
+                background-color: rgba(0,0,0,0);
+                border:1px solid #15827C;
+                box-shadow:0 0 2px 1px #15827C inset;
+                color:#FFFFFF;
+              }
+              .el-input-group__append, .el-input-group__prepend{
+                height:50px;
+                font-size:18px;
+                cursor: pointer;
+                background-color: rgba(0,0,0,0);
+                color:#FFFFFF;
+                border:1px solid #15827C;
+                box-shadow:0 0 2px 1px #15827C inset;
+              }
+            }
+          }
+          .waterAlarm-right-box{
+            width: 900px;
+            margin:20px 20px 0 0;
+            .waterAlarm-text-box{
+              width: 900px;
+              height: 270px;
+              display: flex;
+              .waterAlarm-text-left-box{
+                width: 440px;
+                height: 270px;
+                margin-right:20px;
+                border-radius:10px;
+                background-color: #032C32;
+                padding:20px 30px;
+                div{
+                  display: flex;
+                  p{
+                    color:#fff;
+                    line-height:45px;
+                    font-size:20px;
+                  }
+                  p:nth-child(1){
+                  }
+                  p:nth-child(2){
+                    flex:1;
+                  }
+                }
+              }
+              .waterAlarm-text-right-box{
+                width: 440px;
+                height: 270px;
+                border-radius:10px;
+                background-color: #032C32;
+                padding:20px 30px;
+                .box-one{
+                  display: flex;
+                  p{
+                    color:#fff;
+                    line-height:45px;
+                    font-size:20px;
+                  }
+                  p:nth-child(1){
+                  }
+                  p:nth-child(2){
+                    flex:1;
+                  }
+                }
+                .box-two{
+                  display: flex;
+                  .box-tile-p{
+                    color:#fff;
+                    line-height:45px;
+                    font-size:20px;
+                  }
+                  .box-two-box{
+                    flex:1;
+                    .box-two-box-min{
+                      display: inline-block;
+                      div{
+                        display: flex;
+                        p:nth-child(1){
+                          background-color: #11C01D;
+                          font-size:20px;
+                          border-radius:50%;
+                          width:26px;
+                          height:26px;
+                          color:#fff;
+                          line-height:27px;
+                          text-align: center;
+                          margin:9px;
+                        }
+                        p:nth-child(2){
+                          font-size:20px;
+                          line-height:45px;
+                          color:#fff;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            .waterAlarm-sensor-box{
+              width: 900px;
+              height: 130px;
+              background-color: #032C32;
+              border-radius:10px;
+              margin-bottom:20px;
+              display: flex;
+              p{
+                color:#fff;
+                font-size:26px;
+                line-height:130px;
+              }
+              p:nth-child(1){
+                margin-left:30px;
+              }
+              p:nth-child(2){
+                margin-left:60px;
+              }
+            }
+            .waterAlarm-img-box{
+              width: 900px;
+              height: 236px;
+              background-color: #032C32;
+              border-radius:10px;
+              margin-top:20px;
+              overflow: hidden;
+              .img-title-p{
+                font-size:22px;
+                height:22px;
+                line-height:22px;
+                margin:20px 0 20px 30px;
+                color:#fff;
+              }
+              .for-max-box{
+                img{
+                  cursor: pointer;
+                  display:inline-block;
+                  width:267px;
+                  height:150px;
+                  border-radius:10px;
+                  margin-left:25px;
+                }
+              }
+              .img-null-p{
+                line-height:150px;
+                text-align: center;
+                font-size:20px;
+                color:#999;
+              }
+            }
+          }
+          .lookImg{
+            display: block;
+            width:1449px;
+            height:815px;
+            margin:20px auto 0;
+          }
+        }
+        .waterAlarm-bottom-button-box{
+          display: flex;
+          height:81px;
+          .null-p{
+            flex:1;
+          }
+          .button-out-p{
+            cursor: pointer;
+            border:1px solid #15827C;
+            background-color: #000F14;
+            color:#15827C;
+            width:162px;
+            height:54px;
+            line-height:54px;
+            font-size:20px;
+            text-align: center;
+            border-radius:50px;
+            margin-top:27px;
+          }
+          .button-finish-p{
+            cursor: pointer;
+            border:1px solid #15827C;
+            background-color: #15827C;
+            color:#fff;
+            width:162px;
+            height:54px;
+            line-height:54px;
+            font-size:20px;
+            text-align: center;
+            border-radius:50px;
+            margin-top:27px;
+            margin-left:64px;
+          }
+        }
+      }
+    }
+    .waterAlarm-scrollbar{
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+    .waterAlarm-scrollbar::-webkit-scrollbar {
+      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+      height: 8px;
+    }
+    .waterAlarm-scrollbar::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      -webkit-box-shadow: inset 0 0 5px #15827C;
+      background: #15827C;
+    }
+    .waterAlarm-scrollbar::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 6px rgba(3,44,50,0);
+      border-radius: 0;
+      background:  rgba(3,44,50,0);
+    }
+  }
+</style>

src/views/home.vue

@@ -27,6 +27,7 @@
     <!--纯水系统-->
     <pureWaterSystem v-if="pageType === 6"></pureWaterSystem>
     <planAlarm ref="planAlarm"></planAlarm>
+    <waterAlarm ref="waterAlarm"></waterAlarm>
   </div>
 </template>
 <script>
@@ -38,6 +39,7 @@
   import pureWaterSystem from "./pureWaterSystem/index.vue";
   import { getToken,removeToken } from '@/utils/auth'
   import planAlarm from "@/components/planAlarm/planAlarm.vue";
+  import waterAlarm from "@/components/waterAlarm/waterAlarm.vue";
   export default {
     name: 'home',
     components: {
@@ -48,6 +50,7 @@
       videoSurveillance,
       pureWaterSystem,
       planAlarm,
+      waterAlarm,
     },
     data () {
       return {

src/views/pureWaterSystem/index.vue

@@ -19,24 +19,24 @@
       <p class="null-p"></p>
     </div>
     <div class="left-max-big-box">
-      <title-page-img-components :propsData="propsData1"></title-page-img-components>
+      <title-page-img-components v-if="propsData1" :propsData="propsData1"></title-page-img-components>
       <div class="max-big-box">
         <div class="big-box">
-          <pureWaterPage :propsData="propsData"></pureWaterPage>
+          <pureWaterPage v-if="propsDataA" :propsData="propsDataA"></pureWaterPage>
         </div>
         <div class="big-box">
-          <pureWaterPage :propsData="propsData"></pureWaterPage>
+          <pureWaterPage v-if="propsDataB" :propsData="propsDataB"></pureWaterPage>
         </div>
       </div>
     </div>
     <div class="right-max-big-box">
-      <title-page-img-components :propsData="propsData2"></title-page-img-components>
+      <title-page-img-components v-if="propsData2" :propsData="propsData2"></title-page-img-components>
       <div class="max-big-box">
         <div class="big-box">
-          <pureWaterPage :propsData="propsData"></pureWaterPage>
+          <pureWaterPage v-if="propsDataC" :propsData="propsDataC"></pureWaterPage>
         </div>
         <div class="big-box">
-          <pureWaterPage :propsData="propsData"></pureWaterPage>
+          <pureWaterPage v-if="propsDataD" :propsData="propsDataD"></pureWaterPage>
         </div>
       </div>
     </div>
@@ -45,6 +45,7 @@
 <script>
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
   import pureWaterPage from './pageComponent/pureWaterPage.vue'
+  import { waterMonitorWaterUseData,} from "@/api/index";
   export default {
     name: 'index',
     components: {
@@ -53,43 +54,85 @@
     },
     data () {
       return {
+        echartsTimer:null,
         //组件传参
-        propsData1:{
-          title:'理科楼 - 纯水设备数据监测',
-        },
-        propsData2:{
-          title:'食品楼 - 纯水设备数据监测',
-        },
-        propsData:{
-          annualWater:300,
-          currentMonthWater:400,
-          lastYearSamePeriod:500,
-          pipelineFlow:80,
-          tankLevel:200,
-          deviceStatus:'正常',
-          inletTemp:35,
-          outletTemp:75,
-          inletResistivity:40,
-          outletResistivity:50,
-          returnPressure:0.2,
-          minPressure:1,
-          maxPressure:4,
-
-        },
+        propsData1:null,
+        propsData2:null,
+        propsDataA:null,
+        propsDataB:null,
+        propsDataC:null,
+        propsDataD:null,
       }
     },
     created(){
 
     },
     mounted(){
-
+      this.waterMonitorWaterUseData();
+      this.timeFunction();
     },
     methods:{
       //页面切换
       goPage(type){
         this.$parent.pageCheck(type);
       },
+      //时间定时器
+      timeFunction(){
+        let self = this;
+        this.echartsTimer = window.setInterval(showTime, 180000);
+        function showTime() {
+          self.waterMonitorWaterUseData();
+        }
+      },
+      waterMonitorWaterUseData(){
+        waterMonitorWaterUseData({}).then(response => {
+          for(let i=0;i<response.data.length;i++){
+            for(let o=0;o<response.data[i].pureWaterMonitorVOList.length;o++){
+              if(response.data[i].pureWaterMonitorVOList[o].deviceCode == null){
+                response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
+              }else if(response.data[i].pureWaterMonitorVOList[o].deviceCode == '2'){
+                response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
+              }else if(response.data[i].pureWaterMonitorVOList[o].deviceCode == '3'){
+                response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
+              }else if(response.data[i].pureWaterMonitorVOList[o].deviceCode == '4'){
+                response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
+              }
+            }
+            if(i === 0){
+              this.$set(this,'propsData1',{
+                title:response.data[i].buildName
+              });
+              for(let o=0;o<response.data[i].pureWaterMonitorVOList.length;o++){
+                if (o === 0){
+                  this.$set(this,'propsDataA',response.data[i].pureWaterMonitorVOList[o]);
+                } else if(o === 1){
+                  this.$set(this,'propsDataB',response.data[i].pureWaterMonitorVOList[o]);
+                }
+              }
+            }else if(i === 1){
+              this.$set(this,'propsData2',{
+                title:response.data[i].buildName
+              });
+              for(let o=0;o<response.data[i].pureWaterMonitorVOList.length;o++){
+                if (o === 0){
+                  this.$set(this,'propsDataC',response.data[i].pureWaterMonitorVOList[o]);
+                } else if(o === 1){
+                  this.$set(this,'propsDataD',response.data[i].pureWaterMonitorVOList[o]);
+                }
+              }
+            }
+          }
+        });
+      },
+    },
+    beforeDestroy() {
+      //清除定时器
+      window.clearInterval(this.echartsTimer);
     },
+    destroyed() {
+      //清除定时器
+      window.clearInterval(this.echartsTimer);
+    }
   }
 </script>
 <style scoped lang="scss">

src/views/pureWaterSystem/pageComponent/pureWaterPage.vue

@@ -6,8 +6,8 @@
       <div class="device-name-bar">
         <span class="dn-name">{{ propsData.deviceName || '设备名称' }}</span>
         <span class="dn-sep"> – </span>
-        <span class="dn-status" :class="propsData.deviceStatus === '正常' ? 'ok' : 'err'">
-          {{ propsData.deviceStatus || '正常' }}
+        <span class="dn-status" :class="propsData.deviceStatus == '0' ? 'ok' : 'err'">
+          {{ propsData.deviceStatus == '0' ? '正常' : '报警'}}
         </span>
       </div>
       <div class="device-photo-area">
@@ -23,20 +23,21 @@
       <div class="grid-row row-1">
         <div class="grid-cell center-cell">
           <div class="cell-label">年度产水量</div>
-          <div class="cell-num">{{ propsData.annualWater || 0 }}<span class="num-unit">M³</span></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.currentMonthWater || 0 }}<span class="num-unit">M³</span>
-            <i class="num-trend" :class="propsData.currentMonthTrend === 'up' ? 'trend-up' : 'trend-down'">
-              {{ propsData.currentMonthTrend === 'up' ? '↑' : '↓' }}
+            {{ 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.lastYearSamePeriod || 0 }}<span class="num-unit">M³</span></div>
+          <div class="cell-num">{{ propsData.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>
         </div>
       </div>
 
@@ -61,10 +62,10 @@
         <!-- 管网流量 -->
         <div class="grid-cell left-cell">
           <div class="cell-label">管网流量</div>
-          <div class="cell-num num-flow">{{ propsData.pipelineFlow || 0 }}<span class="num-unit">L/min</span></div>
-          <div class="flow-track">
-            <div class="flow-bar" :style="{width: flowPercent + '%'}"></div>
-          </div>
+          <div class="cell-num num-flow" style="text-align: center;width:200px;">{{ propsData.pipeFlowRate || 0 }}<span class="num-unit">L/min</span></div>
+          <!--<div class="flow-track">-->
+            <!--<div class="flow-bar" :style="{width: flowPercent + '%'}"></div>-->
+          <!--</div>-->
         </div>
         <!-- 水质电阻率 -->
         <div class="grid-cell left-cell">
@@ -87,8 +88,8 @@
           <div class="cell-label">回水压力</div>
           <div class="max-resist-line-2">
             <div class="num-pressure">{{ propsData.returnPressure || 0 }}<span class="num-unit">bar</span></div>
-            <div class="pressure-sub">最低: {{ propsData.minPressure !== undefined ? propsData.minPressure : 0 }} bar</div>
-            <div class="pressure-sub">最高: {{ propsData.maxPressure || 0 }} bar</div>
+            <div class="pressure-sub">最低: {{ propsData.minReturnPressure || 0 }} bar</div>
+            <div class="pressure-sub">最高: {{ propsData.maxReturnPressure || 0 }} bar</div>
           </div>
         </div>
       </div>
@@ -117,8 +118,8 @@ export default {
   },
   computed: {
     flowPercent() {
-      const flow = this.propsData.pipelineFlow || 0;
-      const max = this.propsData.pipelineFlowMax || 100;
+      const flow = this.propsData.pipeFlowRate || 0;
+      const max = this.propsData.pipeFlowRateMax || 100;
       return Math.min(100, (flow / max) * 100);
     }
   },
@@ -151,17 +152,17 @@ export default {
       }
       if (inletEl) {
         this.inletChart = this.$echarts.init(inletEl);
-        this.inletChart.setOption(this.getTempOpt(this.propsData.inletTemp || 0));
+        this.inletChart.setOption(this.getTempOpt(this.propsData.inletWaterTemp || 0));
       }
       if (outletEl) {
         this.outletChart = this.$echarts.init(outletEl);
-        this.outletChart.setOption(this.getTempOpt(this.propsData.outletTemp || 0));
+        this.outletChart.setOption(this.getTempOpt(this.propsData.outletWaterTemp || 0));
       }
     },
     updateCharts() {
       if (this.tankChart) this.tankChart.setOption(this.getTankOpt());
-      if (this.inletChart) this.inletChart.setOption(this.getTempOpt(this.propsData.inletTemp || 0));
-      if (this.outletChart) this.outletChart.setOption(this.getTempOpt(this.propsData.outletTemp || 0));
+      if (this.inletChart) this.inletChart.setOption(this.getTempOpt(this.propsData.inletWaterTemp || 0));
+      if (this.outletChart) this.outletChart.setOption(this.getTempOpt(this.propsData.outletWaterTemp || 0));
     },
     // 水箱液位 - 水球图
     getTankOpt() {
@@ -197,7 +198,7 @@ export default {
         series: [{
           type: 'liquidFill',
           radius: '80%',
-          center: ['50%', '50%'],
+          center: ['50%', '55%'],
           amplitude: 12,
           waveLength: '120%',
           backgroundStyle: {
@@ -270,7 +271,7 @@ export default {
           startAngle: 225,
           endAngle: -45,
           radius: '82%',
-          center: ['50%', '62%'],
+          center: ['50%', '60%'],
           min: 0,
           max: max,
           splitNumber: 10,
@@ -514,10 +515,15 @@ export default {
     .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 {
@@ -539,7 +545,7 @@ export default {
       .max-resist-line{
         border:1px solid #00E6FF;
         padding:20px 10px;
-        margin-top:40px;
+        margin-top:60px;
         border-radius:6px;
       }
       .resist-line {
@@ -582,7 +588,7 @@ export default {
       .max-resist-line-2{
         border:1px solid #00E6FF;
         padding:12px 10px;
-        margin-top:40px;
+        margin-top:60px;
         border-radius:6px;
       }
       .num-pressure {