From 1ea188fd63bdebea93f5fbb21faf781fc20cab2c Mon Sep 17 00:00:00 2001
From: FrancisHu <2756004617@qq.com>
Date: Thu, 26 Sep 2024 18:02:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                               |  12 +-
 src/api/substation/substation.js          |  25 ++-
 src/components/home/commonDialog.vue      |   2 -
 src/components/substation/envirDetect.vue |  41 ++---
 src/components/substation/pitDetect.vue   |  80 ++++++++-
 src/components/substation/towerDetect.vue | 198 +++++++++++-----------
 src/views/homePage/index.vue              |  15 +-
 7 files changed, 231 insertions(+), 142 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ad80cc6..4505a7b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,10 +28,16 @@ export default {
 
     mounted() {
         autofit.init({
-            designHeight: 1080,
-            designWidth: 1920,
-            renderDom: '#app',
+            /* designHeight: 1080,
+            designWidth: 1920, */
+            el: '#app',
+            dw: 1920, // Width of your design layout
+            dh: 1080, // Height of your design layout
+            scaleType: 'contain', // Scaling type, 'contain' scales the content proportionally
+            offsetLeft: 0, // No left offset
+            offsetTop: 0, // No top offse
             resize: true,
+            cssMode: 'scale'
         })
     },
 }
diff --git a/src/api/substation/substation.js b/src/api/substation/substation.js
index 2650b64..7327b6d 100644
--- a/src/api/substation/substation.js
+++ b/src/api/substation/substation.js
@@ -54,6 +54,13 @@ export const queryEnvironmentInfoByIdApi = (data) => {
   })
 }
 
+// 根据工程id查询预警信息
+export const queryWarnInfoByIdApi = (data) => {
+  return request.get(`/base/screen/info/getPowerDevAttributeRecordByWarn`, {
+    params: data
+  })
+}
+
 // 根据设备id查询折线图数据
 export const queryChartsInfoByIdApi = (data) => {
   return request.get(`/base/screen/info/getDevAttributeRecordById`, {
@@ -68,9 +75,23 @@ export const queryLimitSpaceApi = (data) => {
   })
 }
 
-// 查询组塔监测设备
-export const queryTowerWatchApi = (data) => {
+// 查询组塔监测设备 - 当日监测
+export const queryTowerTodayApi = (data) => {
+  return request.get(`/base/screen/info/getTowerDevAttributeRecordByDay`, {
+    params: data
+  })
+}
+
+// 查询组塔监测设备 - 报警记录
+export const queryTowerWarnApi = (data) => {
   return request.get(`/base/screen/info/getPowerDevAttributeRecordByWarn`, {
     params: data
   })
 }
+
+// 查询基坑数据
+export const queryPitDataApi = (data) => {
+  return request.get(`/base/screen/info/getPitDevAttributeRecordByDevice`, {
+    params: data
+  })
+}
diff --git a/src/components/home/commonDialog.vue b/src/components/home/commonDialog.vue
index 28c7b5a..7461753 100644
--- a/src/components/home/commonDialog.vue
+++ b/src/components/home/commonDialog.vue
@@ -130,8 +130,6 @@
                         <template slot-scope="scope">
                           <template v-if="item.t_slot === 'code'">
                             <span
-                              style="color: #029EFC; cursor: pointer"
-                              @click="toggleCode(scope.row)"
                             >
                               {{ scope.row[item.t_props] }}
                             </span>
diff --git a/src/components/substation/envirDetect.vue b/src/components/substation/envirDetect.vue
index 9e2c35c..01ca406 100644
--- a/src/components/substation/envirDetect.vue
+++ b/src/components/substation/envirDetect.vue
@@ -34,32 +34,32 @@
                   <span>{{ item.tit }}</span>
                 </div>-->
         <div class="single-icon">
-          <span style="color: #42C8E3">37°C</span>
+          <span style="color: #42C8E3">{{ environmentInfoList ? environmentInfoList[8].jcValue : '' }}°C</span>
           <span>温度</span>
           <img src="../../assets/img/temp.png" alt="">
         </div>
         <div class="single-icon">
-          <span style="color: #FDA496">32m/s</span>
+          <span style="color: #FDA496">{{ environmentInfoList ? environmentInfoList[7].jcValue : '' }}m/s</span>
           <span>风速</span>
           <img src="../../assets/img/wind.png" alt="">
         </div>
         <div class="single-icon">
-          <span style="color: #87D674">60%</span>
+          <span style="color: #87D674">{{ environmentInfoList ? environmentInfoList[9].jcValue : '' }}%rh</span>
           <span>湿度</span>
           <img src="../../assets/img/wet.png" alt="">
         </div>
         <div class="single-icon">
-          <span style="color: #F2AD49">{{ environmentInfoList[5].jcValue }}分贝</span>
+          <span style="color: #F2AD49">{{ environmentInfoList ? environmentInfoList[5].jcValue : '' }}db</span>
           <span>噪声</span>
           <img src="../../assets/img/loud.png" alt="">
         </div>
         <div class="single-icon">
-          <span style="color: #9634CC">{{ environmentInfoList[3].jcValue }}/ugm3</span>
+          <span style="color: #9634CC">{{ environmentInfoList ? environmentInfoList[3].jcValue : '' }}/ugm3</span>
           <span>PM2.5</span>
           <img src="../../assets/img/pm2.5.png" alt="">
         </div>
         <div class="single-icon">
-          <span style="color: #1DB1C0">{{ environmentInfoList[4].jcValue }}/ugm3</span>
+          <span style="color: #1DB1C0">{{ environmentInfoList ? environmentInfoList[4].jcValue : '' }}/ugm3</span>
           <span>PM10</span>
           <img src="../../assets/img/pm10.png" alt="">
         </div>
@@ -155,7 +155,7 @@ export default {
   name: 'manDetect',
   data() {
     return {
-      environmentInfoList: [],
+      environmentInfoList: undefined,
       deviceVal: undefined,
       deviceRange: [],
       tableList: [
@@ -197,17 +197,20 @@ export default {
   methods: {
     async getDeviceData(proId) {
       let res = await queryDeviceByProApi({
-        proId
+        proId,
+        devType: 116
       })
-      this.deviceVal = res.data.data[0].devId
-      this.deviceRange = res.data.data.map(item => {
-        return {
-          label: item.devName,
-          value: item.devId
-        }
-      })
-      await this.getEnvironmentData(this.deviceVal)
-      await this.getChartsData(this.deviceVal)
+      if(res.data.data.length !== 0) {
+        this.deviceVal = res.data.data[0].devId
+        this.deviceRange = res.data.data.map(item => {
+          return {
+            label: item.devName,
+            value: item.devId
+          }
+        })
+        await this.getEnvironmentData(this.deviceVal)
+        await this.getChartsData(this.deviceVal)
+      }
     },
     async getEnvironmentData(devId) {
       let res = await queryEnvironmentInfoByIdApi({
@@ -321,7 +324,7 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: '%',
+          name: '%rh',
         },
         series: [
           {
@@ -376,7 +379,7 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: '分贝',
+          name: 'db',
         },
         series: [
           {
diff --git a/src/components/substation/pitDetect.vue b/src/components/substation/pitDetect.vue
index 85a9d50..634aab4 100644
--- a/src/components/substation/pitDetect.vue
+++ b/src/components/substation/pitDetect.vue
@@ -3,8 +3,26 @@
     <div class="pit-lef">
       <div class="tower-watch">
         <div class="inner-tit">
-          <img src="../../assets/img/lef-badge.png" alt="">
-          组塔检测
+          <div>
+            <img src="../../assets/img/lef-badge.png" alt="">
+            组塔检测
+          </div>
+          <div style="display: flex; justify-content: right">
+            <el-select
+              v-model="pitVal"
+              clearable
+              filterable
+              placeholder="请选择"
+              @change="pitChange"
+            >
+              <el-option
+                v-for="item in pitRange"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
         </div>
         <div class="work-icons">
           <!--        <div
@@ -155,6 +173,8 @@
 
 <script>
 import {
+  queryDeviceByProApi,
+  queryPitDataApi,
   queryLimitSpaceApi
 } from '@/api/substation/substation'
 import * as echarts from 'echarts'
@@ -172,6 +192,8 @@ export default {
   data() {
     return {
       currentPit: 1,
+      pitVal: undefined,
+      pitRange: [],
       // 暂定 0离线 1报警 2在线
       pitList: [
         { id: 1, status: 1 },
@@ -195,9 +217,32 @@ export default {
   mounted() {
     console.log(this.sendMsg)
     this.getLimitData(this.sendMsg.projectId)
-    this.generateCharts()
+    this.getDeviceData(this.sendMsg.projectId)
+    // this.generateCharts()
   },
   methods: {
+    async getDeviceData(proId) {
+      let res = await queryDeviceByProApi({
+        proId,
+        devType: 119
+      })
+      if(res.data.data.length !== 0) {
+        this.pitVal = res.data.data[0].devId
+        this.pitRange = res.data.data.map(item => {
+          return {
+            label: item.devName,
+            value: item.devId
+          }
+        })
+        await this.getPitData(this.pitVal)
+      }
+    },
+    async getPitData(devId) {
+      let res = await queryPitDataApi({
+        devId
+      })
+      this.generateCharts(res.data)
+    },
     async getLimitData(proId) {
       let res = await queryLimitSpaceApi({
         proId
@@ -207,6 +252,10 @@ export default {
     selPit(val) {
       this.currentPit = val.id
     },
+    pitChange(e) {
+      console.log(e)
+      this.getPitData(e)
+    },
     rowStyle(scope) {
       if(scope.rowIndex % 2 === 0) {
         return {
@@ -218,7 +267,19 @@ export default {
         }
       }
     },
-    generateCharts() {
+    generateCharts(list) {
+      let O2Arr = list['含氧量'].map(item => {
+        return Number(item.jcValue)
+      })
+      let COArr = list['一氧化碳'].map(item => {
+        return Number(item.jcValue)
+      })
+      let fireArr = list['可燃气体'].map(item => {
+        return Number(item.jcValue)
+      })
+      let H2SArr = list['硫化氢'].map(item => {
+        return Number(item.jcValue)
+      })
       // 含氧量图表
       let O2Option = {
         tooltip: {
@@ -256,7 +317,7 @@ export default {
             name: '含氧量',
             type: 'bar',
             barWidth: '40%',
-            data: [118, 112, 93, 98, 107, 91, 96],
+            data: O2Arr,
             itemStyle:{
               // 设置柱状渐变色
               color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
@@ -302,7 +363,7 @@ export default {
         series: [
           {
             name: '可燃气体',
-            data: [301, 350, 313, 352, 426, 487, 503],
+            data: fireArr,
             type: 'line',
             smooth: true,
             symbol: 'none',
@@ -353,7 +414,7 @@ export default {
         series: [
           {
             name: '一氧化碳',
-            data: [90, 94, 101, 66, 86, 72, 60],
+            data: COArr,
             type: 'line',
             smooth: true,
             lineStyle: {
@@ -423,7 +484,7 @@ export default {
           },*/
           {
             name: '硫化氢',
-            data: [205, 182, 97, 264, 173, 473, 235],
+            data: H2SArr,
             type: 'line',
             lineStyle: {
               color: '#4B84FC'
@@ -483,12 +544,13 @@ export default {
 
       .inner-tit{
 
-        width: 100%;
+        width: 45%;
         box-sizing: border-box;
         padding: 10px 20px;
         background-color: #EFF4FE;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         color: #000;
         font-size: 20px;
         font-family: 'YouShe', sans-serif;
diff --git a/src/components/substation/towerDetect.vue b/src/components/substation/towerDetect.vue
index 648bd19..0c49c0a 100644
--- a/src/components/substation/towerDetect.vue
+++ b/src/components/substation/towerDetect.vue
@@ -21,12 +21,38 @@
               在线
             </div>
           </div>
+          <span>倾角监测设备</span>
           <div class="lef-tower-pic">
             <div
-              :class="['single-tower', { isActive: currentTower === item.id } ]"
-              v-for="item in towerList"
+              :class="['single-tower', { isActive: currentAngleTower === item.id } ]"
+              v-for="item in towerAngleList"
               :key="item.id"
-              @click="selTower(item)"
+              @click="selTowerAngle(item)"
+            >
+              <img
+                v-if="item.status === 0"
+                src="../../assets/img/offline.png"
+                alt=""
+              />
+              <img
+                v-if="item.status === 1"
+                src="../../assets/img/alerting.png"
+                alt=""
+              />
+              <img
+                v-if="item.status === 2"
+                src="../../assets/img/inline.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <span>拉力监测设备</span>
+          <div class="lef-tower-pic">
+            <div
+              :class="['single-tower', { isActive: currentPullTower === item.id } ]"
+              v-for="item in towerPullList"
+              :key="item.id"
+              @click="selTowerPull(item)"
             >
               <img
                 v-if="item.status === 0"
@@ -121,13 +147,13 @@
           :row-style="rowStyle"
         >
           <el-table-column
-            prop="name"
+            prop="devName"
             label="设备名称"
             align="center"
           >
           </el-table-column>
           <el-table-column
-            prop="time"
+            prop="jcTime"
             label="时间"
             align="center"
             width="180"
@@ -137,14 +163,12 @@
             prop="angle"
             label="倾角"
             align="center"
-
           >
           </el-table-column>
           <el-table-column
-            prop="force"
+            prop="pull"
             label="拉力"
             align="center"
-
           >
           </el-table-column>
         </el-table>
@@ -161,13 +185,13 @@
           :row-style="rowStyle"
         >
           <el-table-column
-            prop="name"
+            prop="devName"
             label="设备名称"
             align="center"
           >
           </el-table-column>
           <el-table-column
-            prop="time"
+            prop="jcTime"
             label="时间"
             align="center"
             width="180"
@@ -181,7 +205,7 @@
           >
           </el-table-column>
           <el-table-column
-            prop="force"
+            prop="pull"
             label="拉力"
             align="center"
 
@@ -195,7 +219,8 @@
 
 <script>
 import {
-  queryTowerWatchApi
+  queryTowerTodayApi,
+  queryTowerWarnApi
 } from '@/api/substation/substation'
 export default {
   components: {
@@ -210,9 +235,10 @@ export default {
   name: 'towerDetect',
   data() {
     return {
-      currentTower: 1,
+      currentAngleTower: 1,
+      currentPullTower: 1,
       // 暂定 0离线 1报警 2在线
-      towerList: [
+      towerAngleList: [
         { id: 1, status: 1 },
         { id: 2, status: 2 },
         { id: 3, status: 0 },
@@ -224,87 +250,20 @@ export default {
         { id: 9, status: 2 },
         { id: 10, status: 2 },
       ],
-      detectList: [
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
+      towerPullList: [
+        { id: 1, status: 1 },
+        { id: 2, status: 2 },
+        { id: 3, status: 0 },
+        { id: 4, status: 0 },
+        { id: 5, status: 2 },
+        { id: 6, status: 2 },
+        { id: 7, status: 1 },
+        { id: 8, status: 1 },
+        { id: 9, status: 2 },
+        { id: 10, status: 2 },
       ],
-      alertList: [
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-        {
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },{
-          name: 'xx设备',
-          time: '2024.10.01 12:04:03',
-          angle: '30°',
-          force: '30N'
-        },
-      ]
+      detectList: [],
+      alertList: []
     }
   },
   created() {
@@ -313,16 +272,41 @@ export default {
 
   mounted() {
     console.log(this.sendMsg)
+    this.getTowerTodayData(this.sendMsg.projectId)
     this.getTowerWarnData(this.sendMsg.projectId)
   },
   methods: {
-    async getTowerWarnData(devId) {
-      let res = await queryTowerWatchApi({
-        devId
+    async getTowerWarnData(proId) {
+      let res = await queryTowerWarnApi({
+        proId
       })
+      res.data.forEach(item => {
+        if(item.devType === 'angle') {
+          item.angle = item.jcValue
+        } else if(item.dev === 'pull') {
+          item.pull = item.jcValue
+        }
+      })
+      this.alertList = res.data
     },
-    selTower(val) {
-      this.currentTower = val.id
+    async getTowerTodayData(proId) {
+      let res = await queryTowerTodayApi({
+        proId
+      })
+      res.data.forEach(item => {
+        if(item.devType === 'angle') {
+          item.angle = item.jcValue
+        } else if(item.dev === 'pull') {
+          item.pull = item.jcValue
+        }
+      })
+      this.detectList = res.data
+    },
+    selTowerAngle(val) {
+      this.currentAngleTower = val.id
+    },
+    selTowerPull(val) {
+      this.currentPullTower = val.id
     },
     rowStyle(scope) {
       if(scope.rowIndex % 2 === 0) {
@@ -407,7 +391,7 @@ export default {
         .lef-spin{
 
           width: 100%;
-          height: 30px;
+          height: 4%;
           display: flex;
           align-items: center;
           color: #000;
@@ -432,19 +416,29 @@ export default {
 
         }
 
+        span{
+
+          padding: 15px 0;
+          color: #000;
+          font-size: 16px;
+
+        }
+
         .lef-tower-pic{
 
-          flex: 1;
+          width: 100%;
+          height: 350px;
           box-sizing: border-box;
           padding: 20px;
           display: flex;
           justify-content: space-around;
           flex-wrap: wrap;
+          overflow-y: auto;
 
           .single-tower{
 
             width: 35%;
-            height: 17%;
+            height: 135px;
             border-radius: 20px;
             cursor: pointer;
             display: flex;
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 982c930..7e053bf 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -35,13 +35,13 @@
       <!-- 左侧数据模块列表 -->
       <div class="leftModuleBox">
         <div style="height: 200px; margin-bottom: 10px">
-          <LeftOne @openDialog="handleDialog"></LeftOne>
+          <LeftOne :key="childKey" @openDialog="handleDialog"></LeftOne>
         </div>
         <div style="height: 430px; margin-bottom: 10px">
-          <LeftTwo @openDialog="handleDialog"></LeftTwo>
+          <LeftTwo :key="childKey" @openDialog="handleDialog"></LeftTwo>
         </div>
         <div style="height: 300px">
-          <LeftThree @openDialog="handleDialog"></LeftThree>
+          <LeftThree :key="childKey" @openDialog="handleDialog"></LeftThree>
         </div>
       </div>
       <!-- 中间3D效果展示 -->
@@ -80,10 +80,10 @@
       <!-- 右侧数据模块列表 -->
       <div class="rightModuleBox">
         <div style="height: 470px; margin-bottom: 10px">
-          <RightOne @openDialog="handleDialog"></RightOne>
+          <RightOne :key="childKey" @openDialog="handleDialog"></RightOne>
         </div>
         <div style="height: 470px">
-          <rightTwo @openDialog="handleDialog"></rightTwo>
+          <rightTwo :key="childKey" @openDialog="handleDialog"></rightTwo>
         </div>
         <!--        <rightThree></rightThree>-->
         <!--        <LeftThree></LeftThree>-->
@@ -179,6 +179,7 @@ export default {
   name: 'Home',
   data() {
     return {
+      childKey: 0,
       currentIndex: 1,
       geoData: undefined
     }
@@ -190,6 +191,10 @@ export default {
 
   mounted() {
     this.getGeoData()
+    setInterval(() => {
+      this.childKey++
+      this.getGeoData()
+    }, 1000 * 60)
     /* this.geoData = [
       { name: '北京市', projName: '王府井工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [116.407526, 39.90403] },
       { name: '上海市', projName: '外滩工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [121.473701, 31.230416] },