湖里大屏(数字工地)：新增环境监测弹框

src/views/projectAdmin/dataBoard/digitalSite/index.vue

@@ -142,7 +142,7 @@
             <!-- 人脸闸机弹框 -->
             <FaceGate v-if="showFaceDevDialog" :close="() => (showFaceDevDialog = false)" :data="{ ...faceDevDialogData }"></FaceGate>
             <!-- 环境设备弹框 -->
-            <div class="environBox pointDialog_s" v-show="showEnvironDialog" :style="{ left: environBoxPos.x, top: environBoxPos.y }">
+            <div class="environBox pointDialog_s" v-show="showEnvironDialog">
               <!-- 实时数据 -->
               <div class="title">
                 {{ environDevDetail.name }} - {{ $t('message.dataBoard.realData') }}
@@ -1136,17 +1136,6 @@
                             <!-- 报警时间： -->
                             {{ $t('message.dataBoard.alarmTime') + ':' }}{{ transformTimestamp(item.alarmTime) }}
                           </p>
-
-                          <!--                          <p v-if="item.windSpeedAlarm" class="p1">风速报警:{{item.windSpeedAlarm == 0?'正常':item.windSpeedAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--&lt;!&ndash;                          <p class="p1">警报类别：{{ item.alarmType == 1?'报警':item.alarmType == 2?'预警':"&#45;&#45;" }}</p>&ndash;&gt;-->
-                          <!--                          <p v-if="item.environmentAlarm" class="p2">环境防撞报警:{{item.environmentAlarm == 0?'正常':item.environmentAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--                          <p v-if="item.heightAlarm" class="p1">高度上限位报警:{{item.heightAlarm == 0?'正常':item.heightAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--                          <p v-if="item.maxRangeAlarm" class="p2">幅度外限位报警:{{item.maxRangeAlarm == 0?'正常':item.maxRangeAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--                          <p v-if="item.minRangeAlarm" class="p1">幅度内限位报警:{{item.minRangeAlarm == 0?'正常':item.minRangeAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--                          <p v-if="item.momentAlarm" class="p2">力矩报警:{{item.momentAlarm == 0?'正常':item.momentAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--                          <p v-if="item.multiAlarm" class="p1">多机防撞报警:{{item.multiAlarm == 0?'正常':item.multiAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--                          <p v-if="item.negAngleAlarm" class="p2">逆时针回转限位报警:{{item.negAngleAlarm == 0?'正常':item.negAngleAlarm == 1?'报警':'预警'}}</p>-->
-                          <!--                          <p v-if="item.posAngleAlarm" class="p1">顺时针回转限位报警 :{{item.posAngleAlarm == 0?'正常':item.posAngleAlarm == 1?'报警':'预警'}}</p>-->
                         </div>
                       </div>
                     </vue-scroll>
@@ -2178,10 +2167,6 @@ export default {
       },
       showEnvironDialog: false,
       environDevDetail: { name: '' },
-      environBoxPos: {
-        x: 0,
-        y: 0
-      },
       showVideoDialog: false,
       showVideoDialog2: false,
       showFaceDevDialog: false,
@@ -2940,16 +2925,6 @@ export default {
           break
         case 6:
           this.environDevDetail = item
-          if (parseFloat(item.mapY) > 500) {
-            this.environBoxPos.y = parseFloat(item.mapY) - 200 + 'px'
-          } else {
-            this.environBoxPos.y = parseFloat(item.mapY) + 0 + 'px'
-          }
-          if (parseFloat(item.mapX / this.imgWidthScale) > 510) {
-            this.environBoxPos.x = parseFloat(item.mapX) / this.imgWidthScale - 350 + 'px'
-          } else {
-            this.environBoxPos.x = parseFloat(item.mapX) / this.imgWidthScale + 50 + 'px'
-          }
           this.showEnvironDialog = true
           this.getRealTimeDustNoiseData(item.devSn)
           break
@@ -3130,50 +3105,15 @@ export default {
           this.environmentTotalAlarm = result.alarmTotal.totalAlarm
         }
       })
-      // // 获取报警列表数据
-      // getAIDangerList(data).then((res) => {
-      //   if (res.code === 200) {
-      //     let { result } = res;
-      //     console.log(result);
-      //     let type = [
-      //       "烟感",
-      //       "明火",
-      //       "人员倒地",
-      //       "未戴安全帽",
-      //       "区域入侵",
-      //       "越界入侵",
-      //       "人员聚集衣",
-      //       "反光衣",
-      //       "裸土覆盖",
-      //     ];
-      //     this.AIDangerAlarmList = result.slice(0, 6).map((x) => {
-      //       return {
-      //         createTime: x.createTime,
-      //         hardwareName: x.hardwareName,
-      //         id: x.id,
-      //         imageUrl: x.imageUrl,
-      //         location: x.location,
-      //         projectName: x.projectName,
-      //         alarmType: type[x.alarmType - 1],
-      //       };
-      //     });
-      //   }
-      //   this.pieAnalyse()
-      // });
     },
     //获取环境设备详情数据
     getRealTimeDustNoiseData(deviceId) {
-      let Id = deviceId
+      getRealTimeDustNoiseDataApi({ deviceId, projectSn: this.projectSn }).then(res => {
-      let data = {
-        deviceId: deviceId,
-        projectSn: this.projectSn
-      }
-      getRealTimeDustNoiseDataApi(data).then(res => {
         if (res.code == 200) {
           if (res.result) {
             this.plantCap = res.result
             this.plantCapInterval = setTimeout(() => {
-              this.getRealTimeDustNoiseData(Id)
+              this.getRealTimeDustNoiseData(deviceId)
             }, 5000)
           } else {
             this.plantCap = {

src/views/projectAdmin/jlw/digitalSite/centerTop.vue

@@ -9,6 +9,7 @@
         @click="handlePoint(point)"
       ></div>
       <FaceGageDialog v-if="faceGateDialog" :close="() => (faceGateDialog = false)" :data="faceGateData" />
+      <EnvironmentDialog v-if="environmentDialog" :data="environmentInfo" :close="() => (environmentDialog = false)" />
     </div>
     <div class="tabs">
       <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
@@ -22,9 +23,11 @@
 import Card from '../components/Card.vue'
 import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 import FaceGageDialog from './components/FaceGageDialog.vue'
+import EnvironmentDialog from './components/EnvironmentDialog.vue'
 import { selectWorkerAttendanceByDevApi } from '@/assets/js/api/dataBoard'
+import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
 export default {
-  components: { Card, JNestedRingChart, FaceGageDialog },
+  components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog },
   props: {
     title: {
       type: String,
@@ -32,7 +35,8 @@ export default {
     }
   },
   mounted() {
-    this.selectWorkerAttendanceByDev()
+    this.getFaceGateInfo()
+    this.getEnvironmentInfo()
   },
   data() {
     return {
@@ -51,7 +55,9 @@ export default {
         list: [],
         totalAttendance: { inTotalNum: 0, outTotalNum: 0 },
         ufaceDev: { deviceState: 1 }
-      }
+      },
+      environmentDialog: false,
+      environmentInfo: {}
     }
   },
   methods: {
@@ -64,17 +70,27 @@ export default {
         case 'gate':
           this.faceGateDialog = true
           break
+        case 'environment':
+          this.environmentDialog = true
+          break
         default:
           break
       }
     },
-    selectWorkerAttendanceByDev() {
+    getFaceGateInfo() {
       selectWorkerAttendanceByDevApi({
         projectSn: this.projectSn,
         devSn: '2525'
       }).then(res => {
         this.faceGateData = { ...res.result }
       })
+    },
+    getEnvironmentInfo() {
+      getRealTimeDustNoiseDataApi({ deviceId: 'BDDA658E1AB347B783E5FAA283466CA9', projectSn: this.projectSn }).then(res => {
+        if (res.code == 200) {
+          this.environmentInfo = res.result || {}
+        }
+      })
     }
   },
   computed: {

src/views/projectAdmin/jlw/digitalSite/components/EnvironmentDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="environmentDialog">
+    <div class="title">
+      <div class="text">实时数据</div>
+      <div class="close" @click="close">×</div>
+    </div>
+    <div class="info">
+      <div class="info-item">
+        <div class="value">--<span>ug/m³</span></div>
+        <div class="label">PM10</div>
+      </div>
+      <div class="info-item">
+        <div class="value">--<span>ug/m³</span></div>
+        <div class="label">PM2.5</div>
+      </div>
+      <div class="info-item">
+        <div class="value">--<span>m/s</span></div>
+        <div class="label">风速</div>
+      </div>
+      <div class="info-item">
+        <div class="value">--</div>
+        <div class="label">风向</div>
+      </div>
+      <div class="info-item">
+        <div class="value">--<span>db</span></div>
+        <div class="label">噪音</div>
+      </div>
+      <div class="info-item">
+        <div class="value">--<span>℃</span></div>
+        <div class="label">温度</div>
+      </div>
+      <div class="info-item">
+        <div class="value">--<span>%</span></div>
+        <div class="label">湿度</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    close: {
+      type: Function,
+      default: () => {}
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.environmentDialog {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  padding: 20px;
+  width: 400px;
+  height: 360px;
+  border: 1px solid #0081c3;
+  background-color: #07162b;
+  .title {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    .text {
+      margin-right: auto;
+    }
+    .close {
+      margin-left: 10px;
+      font-size: 20px;
+      color: #61c9d6;
+      cursor: pointer;
+      &:hover {
+        color: #ff6c7f;
+      }
+    }
+  }
+  .info {
+    display: flex;
+    flex-wrap: wrap;
+    .info-item {
+      margin-bottom: 30px;
+      width: 100px;
+      height: 80px;
+      border: 1px solid #999;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      &:not(:nth-child(3n)) {
+        margin-right: 40px;
+      }
+      .value {
+        margin-bottom: 8px;
+        span {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/projectAdmin/jlw/digitalSite/components/FaceGageDialog.vue

@@ -29,12 +29,6 @@ export default {
       default: () => ({})
     }
   },
-  mounted() {
-    console.log(this.data, '是第三方士大夫')
-    setTimeout(() => {
-      console.log(this.data, '收待发送发生的方法')
-    }, 2000)
-  },
   computed: {
     isOnline() {
       return this.data.ufaceDev && this.data.ufaceDev.deviceState === '1'