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="请选择" @change="getSendDic">
+          <el-select v-model="form.SUOSHUQUYU" placeholder="请选择">
-            <el-option v-for="item in statusList" :key="item.DICTIONARIES_ID" :label="item.name" :value="item.DICTIONARIES_ID" />
+            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.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.DICTIONARIES_ID" :label="item.name" :value="item.DICTIONARIES_ID" />
+            <el-option v-for="item in quyuList" :key="item.id" :label="item.name" :value="item.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="closeDia()">取 消</el-button>
+        <el-button @click="dialogForm =false">取 消</el-button>
         <el-button type="primary" @click="upload">确 定</el-button>
       </div>
     </el-dialog>
@@ -198,7 +198,11 @@ export default {
       },
       quyuList: [],
       shexiangtouForm: {},
-      statusList: []
+      statusList: [
+        { id: '0', name: '请选择' },
+        { id: '1', name: '油管区' },
+        { id: '2', name: '码头区' }
+      ]
     }
   },
   async created() {
@@ -262,7 +266,7 @@ export default {
       this.msg = 'add'
       this.resetForm()
       this.dialogForm = true
-      this.getDic()
+      // this.$refs.platformvideo.init()
     },
     resetForm() {
       this.shexiangtouForm.LONGITUDE = ''
@@ -308,7 +312,6 @@ export default {
           ).then(async(data) => {
             await this.getAllList()
             this.getList()
-            this.shexiangtouForm = {}
           }).catch((e) => {
             this.listLoading = false
           })
@@ -323,7 +326,6 @@ export default {
     goEdit(row) {
       this.dialogForm = true
       this.listLoading = true
-      this.getDic()
       return new Promise(resolve => {
         requestFN(
           '/platformelectronic/goEdit',
@@ -332,18 +334,15 @@ export default {
           }
         ).then((data) => {
           this.shexiangtouForm = data.pd
-          this.form.SUOSHUQUYU = data.pd.SUOSHUQUYU
+          this.form.bianjiequyu = data.pd.FANGQU_IDS.split(',')
-          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
         })
       })
@@ -382,8 +381,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
@@ -506,58 +505,6 @@ 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,29 +10,39 @@
           <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 id="main1"/>
+        <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>
         </div>
-    <div class="block4">
+      </div>
-      <layout-title title="报警列表"/>
+    </div>
+
+    <div class="block3">
+      <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 block4List" :key="index" class="tr">
+          <div v-for="(item,index) in block3List" :key="index" class="tr">
-            <div class="td">{{ item.alarmName }}</div>
+            <div class="td">{{ item.CORP_NAME }}</div>
-            <div class="td">{{ item.equipmentName }}</div>
+            <div class="td">{{ item.OUTSOURCED_COUNT }}</div>
-            <div class="td">{{ item.statusName }}</div>
+            <div class="td">{{ item.CHECK_COUNT }}</div>
+            <div class="td">{{ item.HIDDEN_COUNT }}</div>
           </div>
         </div>
       </div>
@@ -44,9 +54,7 @@
 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,
@@ -70,15 +78,26 @@ 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: [
         {
@@ -101,19 +120,12 @@ export default {
           CHECK_COUNT: '-',
           HIDDEN_COUNT: '-'
         }
-      ],
+      ]
-      block4List: []
     }
   },
   mounted() {
-    this.initNum()
+    this.getCount()
     this.initgetTable()
-    window.onresize = function() {
-      Echarts1 && Echarts1.resize()
-    }
-  },
-  beforeDestroy() {
-    Echarts1 = null
   },
   methods: {
     getCount() {
@@ -135,22 +147,6 @@ 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',
@@ -162,112 +158,6 @@ 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)
     }
   }
 }
@@ -353,7 +243,6 @@ export default {
       }
     }
   }
-
   .block2 {
     width: 410px;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
@@ -364,12 +253,67 @@ 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;
 
-      #main1 {
+      .option{
-        width: 100%;
+        width: 50%;
-        height: 250px;
+        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;
           }
         }
+
+        .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 {
@@ -413,48 +357,6 @@ 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 {
@@ -468,7 +370,6 @@ export default {
     transform: scale(0.9);
   }
 }
-
 @keyframes slideY {
   0% {
     transform: translateY(0);