Merge branch 'pet' into liujun-2024-06-13-一公司人员定位新需求

2、边界入侵摄像头标点不显示bug修复

src/views/keyprojects/platformelectronic/index.vue

@@ -96,13 +96,13 @@
           </el-select>
         </el-form-item>
         <el-form-item label="所属区域" prop="bianjiequyu">
-          <el-select v-model="form.SUOSHUQUYU" placeholder="请选择">
-            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
+          <el-select v-model="form.SUOSHUQUYU" placeholder="请选择" @change="getSendDic">
+            <el-option v-for="item in statusList" :key="item.DICTIONARIES_ID" :label="item.name" :value="item.DICTIONARIES_ID" />
           </el-select>
         </el-form-item>
         <el-form-item label="边界入侵区域" prop="bianjiequyu">
           <el-select v-model="form.bianjiequyu" multiple placeholder="请选择监理单位" style="width: 100%;">
-            <el-option v-for="item in quyuList" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option v-for="item in quyuList" :key="item.DICTIONARIES_ID" :label="item.name" :value="item.DICTIONARIES_ID" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="form.VIDEO_TYPE===1" label="视频选择">
@@ -126,7 +126,7 @@
       </el-form>
 
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogForm =false">取 消</el-button>
+        <el-button @click="closeDia()">取 消</el-button>
         <el-button type="primary" @click="upload">确 定</el-button>
       </div>
     </el-dialog>
@@ -198,11 +198,7 @@ export default {
       },
       quyuList: [],
       shexiangtouForm: {},
-      statusList: [
-        { id: '0', name: '请选择' },
-        { id: '1', name: '油管区' },
-        { id: '2', name: '码头区' }
-      ]
+      statusList: []
     }
   },
   async created() {
@@ -266,7 +262,7 @@ export default {
       this.msg = 'add'
       this.resetForm()
       this.dialogForm = true
-      // this.$refs.platformvideo.init()
+      this.getDic()
     },
     resetForm() {
       this.shexiangtouForm.LONGITUDE = ''
@@ -312,6 +308,7 @@ export default {
           ).then(async(data) => {
             await this.getAllList()
             this.getList()
+            this.shexiangtouForm = {}
           }).catch((e) => {
             this.listLoading = false
           })
@@ -326,6 +323,7 @@ export default {
     goEdit(row) {
       this.dialogForm = true
       this.listLoading = true
+      this.getDic()
       return new Promise(resolve => {
         requestFN(
           '/platformelectronic/goEdit',
@@ -334,15 +332,18 @@ export default {
           }
         ).then((data) => {
           this.shexiangtouForm = data.pd
-          this.form.bianjiequyu = data.pd.FANGQU_IDS.split(',')
+          this.form.SUOSHUQUYU = data.pd.SUOSHUQUYU
+          this.getSendDic()
+          this.form.bianjiequyu = data.pd.FANGQU_IDS?data.pd.FANGQU_IDS.split(','):[]
           this.form.CORPINFO_ID = data.pd.CORPINFO_ID
           this.form.VIDEONAME = data.pd.NAME
           this.form.CODE = data.pd.INDEXCODE
-          this.form.SUOSHUQUYU = data.pd.SUOSHUQUYU
+
           this.form.LONGITUDEANDLATITUDE = data.pd.LONGITUDE + ',' + data.pd.LATITUDE
           this.listLoading = false
           resolve()
         }).catch((e) => {
+          console.log(e)
           this.listLoading = false
         })
       })
@@ -381,8 +382,8 @@ export default {
     },
     // 获取列表
     setPosition() {
+      // eslint-disable-next-line no-empty
       if (this.shexiangtouForm.PLATFORMELECTRONIC_ID != null) {
-
       }
       this.shexiangtouForm.LONGITUDE = this.form.LONGITUDE
       this.shexiangtouForm.LATITUDE = this.form.LATITUDE
@@ -505,6 +506,58 @@ export default {
     handleBack() {
       this.player.dispose()
       this.dialogVideoHLS = false
+    },
+
+    getDic() { // 获取区域字典信息
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      requestFN('/dictionaries/listSelectTree', { DICTIONARIES_ID: 'f0bae7becdee4d779a2cb82037948ab4' }
+      ).then((data) => {
+        this.statusList = JSON.parse(data.zTreeNodes)
+        loading.close()
+      }).catch((e) => {
+        loading.close()
+      })
+    },
+    getSendDic() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.form.bianjiequyu = []
+      this.form.quyuList = []
+      requestFN('/dictionaries/listSelectTree', { DICTIONARIES_ID: this.form.SUOSHUQUYU }
+      ).then((data) => {
+        loading.close()
+        this.quyuList = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+        loading.close()
+      })
+    },
+    closeDia() {
+      this.dialogForm = false
+      this.form = {
+        CORPINFO_ID: '',
+        bianjiequyu: [],
+        PLATFORMELECTRONIC_ID: '',
+        LONGITUDEANDLATITUDE: '',
+        VIDEOMANAGER_ID: '',
+        VIDEO_RESOURCES_ID: '',
+        VIDEO_TYPE: 1,
+        VIDEONAME: '', //
+        VIDEOURL: '',
+        CODE: '',
+        PLATFORMVIDEOMANAGEMENT_ID: '',
+        LATITUDE: '',
+        LONGITUDE: '',
+        SUOSHUQUYU: ''
+      }
     }
   }
 }

src/views/map/components/zhongdian.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="renyuan">
     <div class="block1">
-      <layout-title title="重点工程统计"/>
+      <layout-title title="边界入侵统计"/>
       <div class="options">
         <div v-for="(item,index) in block1OptionsList" :key="index" class="option">
           <div class="imger">
@@ -10,39 +10,29 @@
           <div class="info">
             <div class="label">{{ item.title }}</div>
             <div class="text">{{ item.count }}</div>
-            <!--            <div class="text"><count-to :start-val="0" :end-val="item.count" :duration="3600"/></div>-->
           </div>
         </div>
       </div>
     </div>
     <div class="block2">
-      <layout-title title="区域报警数"/>
+      <layout-title title="区域摄像头数量"/>
       <div class="options">
-        <div v-for="(item,index) in block2OptionsList" :key="index" class="option">
-          <div class="circular"><img :src="item.img" alt=""></div>
-          <div class="info">
-            <div class="title">{{ item.label }}</div>
-            <div class="count"> <count-to :start-val="0" :end-val="+item.count" :duration="3600"/></div>
+        <div id="main1"/>
       </div>
     </div>
-      </div>
-    </div>
-
-    <div class="block3">
-      <layout-title title="安全管理记录"/>
+    <div class="block4">
+      <layout-title title="报警列表"/>
       <div class="content">
         <div class="table">
           <div class="tr">
-            <div class="td">公司名称</div>
-            <div class="td">创建数</div>
-            <div class="td">检查次数</div>
-            <div class="td">隐患数量</div>
+            <div class="td">区域名称</div>
+            <div class="td">报警设备编号</div>
+            <div class="td">状态告警</div>
           </div>
-          <div v-for="(item,index) in block3List" :key="index" class="tr">
-            <div class="td">{{ item.CORP_NAME }}</div>
-            <div class="td">{{ item.OUTSOURCED_COUNT }}</div>
-            <div class="td">{{ item.CHECK_COUNT }}</div>
-            <div class="td">{{ item.HIDDEN_COUNT }}</div>
+          <div v-for="(item,index) in block4List" :key="index" class="tr">
+            <div class="td">{{ item.alarmName }}</div>
+            <div class="td">{{ item.equipmentName }}</div>
+            <div class="td">{{ item.statusName }}</div>
           </div>
         </div>
       </div>
@@ -54,7 +44,9 @@
 import layoutTitle from './title.vue'
 import CountTo from 'vue-count-to'
 import { requestFN } from '@/utils/request'
+import * as echarts from 'echarts'
 
+let Echarts1
 export default {
   components: {
     CountTo,
@@ -78,26 +70,15 @@ export default {
     return {
       block1OptionsList: [
         {
-          title: '开工数量',
+          title: '报警数量',
           img: require('../../../assets/map/zhongdian/ico1.png'),
           count: '-'
         },
         {
-          title: '视频数量',
+          title: '监控数量',
           img: require('../../../assets/map/zhongdian/ico2.png'),
           count: '-'
-        },
-        {
-          title: '检查次数',
-          img: require('../../../assets/map/zhongdian/ico3.png'),
-          count: '-'
-        },
-        {
-          title: '发现隐患数量',
-          img: require('../../../assets/map/zhongdian/ico4.png'),
-          count: '-'
         }
-
       ],
       block2OptionsList: [
         {
@@ -120,12 +101,19 @@ export default {
           CHECK_COUNT: '-',
           HIDDEN_COUNT: '-'
         }
-      ]
+      ],
+      block4List: []
     }
   },
   mounted() {
-    this.getCount()
+    this.initNum()
     this.initgetTable()
+    window.onresize = function() {
+      Echarts1 && Echarts1.resize()
+    }
+  },
+  beforeDestroy() {
+    Echarts1 = null
   },
   methods: {
     getCount() {
@@ -147,6 +135,22 @@ export default {
         this.block2OptionsList[1].count = data.pd.AMOUT_SUM
       })
     },
+    initNum() {
+      requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId, source: '0' }
+      ).then((data0) => {
+        this.block1OptionsList[0].count = data0.alarmList.page.total
+        requestFN('/map/mapPlatformelectronic/listAllLocation', { corpId: this.corpInfoId, TYPE: 'bianjieruqin' }
+        ).then((data1) => {
+          this.block4List = data0.alarmList.list
+          this.block1OptionsList[1].count = data1.varList.length
+          this.initEcharts1(data1.iconData)
+        }).catch((e) => {
+          this.$message.error(e)
+        })
+      }).catch((e) => {
+        this.$message.error(e)
+      })
+    },
     initgetTable() {
       requestFN(
         '/map/keyProject/list?showCount=10&currentPage=1',
@@ -158,6 +162,112 @@ export default {
       ).then((data) => {
         this.block3List = data.varList
       })
+    },
+    initEcharts1(data) {
+      console.log(data)
+      const XaxisData = []
+      const seriesData1 = []
+      for (const optionKey in data) {
+        console.log(data[optionKey])
+        for (let i = 0; i < data[optionKey].length; i++) {
+          console.log(data[optionKey][i])
+          XaxisData.push(data[optionKey][i].NAME)
+          seriesData1.push(data[optionKey][i].num)
+        }
+      }
+
+      // eslint-disable-next-line no-undef
+      Echarts1 = echarts.init(document.querySelector('#main1'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '5%',
+          top: '12%',
+          containLabel: true
+        },
+        legend: {
+          top: '0%',
+          right: '0%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          itemWidth: 12,
+          itemHeight: 10
+        },
+        xAxis: {
+          type: 'category',
+          data: XaxisData,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 12
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          max: '50',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#8c9493'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 14
+            }
+          }
+        },
+        series: [
+          {
+            name: '摄像头',
+            type: 'bar',
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#00f0ff'
+                    },
+                    {
+                      offset: 1,
+                      color: '#0066ff'
+                    }
+                  ],
+                  false
+                )
+              }
+            },
+            data: seriesData1
+          }
+        ]
+      }
+      Echarts1.setOption(option)
     }
   }
 }
@@ -243,6 +353,7 @@ export default {
       }
     }
   }
+
   .block2 {
     width: 410px;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
@@ -253,67 +364,12 @@ export default {
       border: 1px solid;
       border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
       border-top: none;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-items: center;
-      position: relative;
-      height: 150px;
 
-      .option{
-        width: 50%;
-        display: flex;
-        align-items: center;
-
-        justify-content: space-around;
-        .circular {
-          margin-top: 5px;
-          background-image: url("../../../assets/map/anquan/icobg.png");
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-          width: 70px;
-          height: 70px;
-          text-align: center;
-          padding-top: 13px;
-
-          img {
-            width: 25px;
-            height: 26px;
-            animation: slideY 2s infinite;
+      #main1 {
+        width: 100%;
+        height: 250px;
       }
     }
-
-        .info{
-          flex: 1;
-          text-align: center;
-
-          .title{
-            background-image: url("../../../assets/map/anquan/label.png");
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            width: 120px;
-            height: 24px;
-            margin-top: 5px;
-            font-size: 12px;
-            line-height: 25px;
-            text-align: center;
-            color: #fff;
-          }
-          .count{
-            margin-top: 10px;
-            font-size: 24px;
-            background: linear-gradient(to top, #48bbf0, #ffffff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-weight: bold;
-            font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
-
-          }
-        }
-
-      }
-
-    }
   }
 
   .block3 {
@@ -357,6 +413,48 @@ export default {
       }
     }
   }
+
+  .block4 {
+    margin-top: 10px;
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .content {
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+      padding: 10px;
+
+      .options {
+        display: flex;
+        justify-content: flex-end;
+
+        .title {
+          cursor: pointer;
+        }
+      }
+
+      .table {
+        margin-top: 5px;
+
+        .tr {
+          display: flex;
+
+          &:nth-child(odd) {
+            background-color: rgba(42, 86, 158, 0.53);
+          }
+
+          .td {
+            flex: 1;
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+          }
+        }
+      }
+    }
+  }
 }
 
 @keyframes scale {
@@ -370,6 +468,7 @@ export default {
     transform: scale(0.9);
   }
 }
+
 @keyframes slideY {
   0% {
     transform: translateY(0);