农业修改-根据林业事件流程、责任制人员选择、摄像头品牌、切换方式等进行同步更改

src/api/components/supermap.js

@@ -49,5 +49,6 @@ export const iconList = {
   'sj-icon-map-qianshou': require('@/assets/icons/sj-icon-map/sj-icon-map-qianshou.png'),//签收
   'sj-icon-map-guidang': require('@/assets/icons/sj-icon-map/sj-icon-map-guidang.png'),//归档
   'sj-icon-map-banjie': require('@/assets/icons/sj-icon-map/sj-icon-map-banjie.png'),//办结
+  'sj-icon-map-queren': require('@/assets/icons/sj-icon-map/sj-icon-map-queren.png'),//办结
 
 }

src/api/forest.js

@@ -3,14 +3,14 @@ import request from '@/utils/request'
 // 左侧获取部门信息
 export function getBaseInfo() {
   return request({
-    url: '/center-agriculture/fire/getBaseInfo',
+    url: '/center-agriculture/VisuForestCloudMapController/getBaseInfo',
     method: 'post',
   })
 }
 // 左侧获取事件信息统计
 export function getTodayEvents(param,loading) {
   return request({
-    url: '/center-agriculture/fire/getTodayEvents',
+    url: '/center-agriculture/VisuForestCloudMapController/getTodayEvents',
     method: 'post',
     data: param,
     headers: {
@@ -21,7 +21,7 @@ export function getTodayEvents(param,loading) {
 // 左侧获取事件部门数量
 export function getDeptEventCount(param,loading) {
   return request({
-    url: '/center-agriculture/fire/getDeptEventCount',
+    url: '/center-agriculture/VisuForestCloudMapController/getDeptEventCount',
     method: 'post',
     data: param,
     headers: {
@@ -32,17 +32,16 @@ export function getDeptEventCount(param,loading) {
 // 右侧获取天气
 export function getWeather(param) {
   return request({
-    url: '/center-agriculture/fire/getWeather',
+    url: '/center-agriculture/VisuForestCloudMapController/getWeather',
     method: 'post',
     data: param
   })
 }
 
-
 // 右侧获取事件列表
 export function getEventList(param,loading) {
   return request({
-    url: '/center-agriculture/fire/getEventList',
+    url: '/center-agriculture/VisuForestCloudMapController/getEventList',
     method: 'post',
     data: param,
     headers: {
@@ -53,7 +52,7 @@ export function getEventList(param,loading) {
 // 右侧获取曝光台列表
 export function getExposureStage(param,loading) {
   return request({
-    url: 'center-agriculture/fire/getExposureStage',
+    url: 'center-agriculture/VisuForestCloudMapController/getExposureStage',
     method: 'post',
     data: param,
     headers: {
@@ -65,17 +64,15 @@ export function getExposureStage(param,loading) {
 // 获取事件详情
 export function getEventDetail(param) {
   return request({
-    url: '/center-agriculture/fire/getEventDetail',
+    url: '/center-agriculture/VisuForestCloudMapController/getEventDetail',
     method: 'post',
     data: param
   })
 }
-
-
 // 获取日历颜色状态
 export function getEventByCalendar(param) {
   return request({
-    url: '/center-agriculture/fire/getEventByCalendar',
+    url: '/center-agriculture/VisuForestCloudMapController/getEventByCalendar',
     method: 'post',
     data: param
   })
@@ -83,7 +80,7 @@ export function getEventByCalendar(param) {
 // 获取事件分类
 export function getEventByEventType(param,loading) {
   return request({
-    url: '/center-agriculture/fire/getEventByEventType',
+    url: '/center-agriculture/VisuForestCloudMapController/getEventByEventType',
     method: 'post',
     data: param,
     headers: {
@@ -94,7 +91,7 @@ export function getEventByEventType(param,loading) {
 // 获取上报排名
 export function getEventByReportorOrder(param,loading) {
   return request({
-    url: '/center-agriculture/fire/getEventByReportorOrder',
+    url: '/center-agriculture/VisuForestCloudMapController/getEventByReportorOrder',
     method: 'post',
     data: param,
     headers: {
@@ -121,7 +118,7 @@ export function sendEventLog(param) {
 // 事件处理流程
 export function updateCentereventTEventcatalogueStatus(param) {
   return request({
-    url: '/center-agriculture/fire/updateCentereventTEventcatalogueStatus',
+    url: '/center-agriculture/VisuForestCloudMapController/updateCentereventTEventcatalogueStatus',
     method: 'post',
     data: param
   })
@@ -129,7 +126,7 @@ export function updateCentereventTEventcatalogueStatus(param) {
 // 事件处理流程-事件类型
 export function listSJfl(param) {
   return request({
-    url: '/center-agriculture/fire/listSJfl',
+    url: '/center-agriculture/VisuForestCloudMapController/listSJfl',
     method: 'post',
     data: param
   })
@@ -137,21 +134,21 @@ export function listSJfl(param) {
 // 事件处理流程-关联预案
 export function listYuAn() {
   return request({
-    url: '/center-agriculture/fire/listYuAn',
+    url: '/center-agriculture/VisuForestCloudMapController/listYuAn',
     method: 'post'
   })
 }
 // 事件处理流程-签收部门
 export function selectByeventCode(eventCode) {
   return request({
-    url: '/center-agriculture/fire/selectByeventCode/'+eventCode,
+    url: '/center-agriculture/VisuForestCloudMapController/selectByeventCode/'+eventCode,
     method: 'post'
   })
 }
 // 事件处理流程-联动
 export function sendTask(param) {
   return request({
-    url: '/center-agriculture/fire/sendTask',
+    url: '/center-agriculture/VisuForestCloudMapController/sendTask',
     method: 'post',
     data:param
   })
@@ -159,14 +156,14 @@ export function sendTask(param) {
 // 任务接口
 export function selectTaskBO() {
   return request({
-    url: '/center-agriculture/fire/selectTaskBO',
+    url: '/center-agriculture/VisuForestCloudMapController/selectTaskBO',
     method: 'post',
   })
 }
 // 搜索物资
 export function listResourceByWz(param) {
   return request({
-    url: '/center-agriculture/fire/listResourceByWz',
+    url: '/center-agriculture/VisuForestCloudMapController/listResourceByWz',
     method: 'post',
     data:param
   })
@@ -174,7 +171,7 @@ export function listResourceByWz(param) {
 // 任务领取部门列表
 export function selectTaskDtpts(param) {
   return request({
-    url: '/center-agriculture/fire/selectTaskDtpts',
+    url: '/center-agriculture/VisuForestCloudMapController/selectTaskDtpts',
     method: 'post',
     data:param
   })
@@ -182,7 +179,7 @@ export function selectTaskDtpts(param) {
 // 任务领取
 export function receiveTask(param) {
   return request({
-    url: '/center-agriculture/fire/receiveTask',
+    url: '/center-agriculture/VisuForestCloudMapController/receiveTask',
     method: 'post',
     data:param
   })
@@ -190,7 +187,7 @@ export function receiveTask(param) {
 // 任务拒绝
 export function refusedTask(param) {
   return request({
-    url: '/center-agriculture/fire/refusedTask',
+    url: '/center-agriculture/VisuForestCloudMapController/refusedTask',
     method: 'post',
     data:param
   })
@@ -198,7 +195,7 @@ export function refusedTask(param) {
 // 事件调整关联预案
 export function updateYjYuAn(param) {
   return request({
-    url: '/center-agriculture/fire/updateYjYuAn',
+    url: '/center-agriculture/VisuForestCloudMapController/updateYjYuAn',
     method: 'post',
     data:param
   })
@@ -206,15 +203,51 @@ export function updateYjYuAn(param) {
 // 事件详情截图直接上传日志
 export function uploadBase64(param) {
   return request({
-    url: '/center-agriculture/fire/uploadBase64',
+    url: '/center-agriculture/VisuForestCloudMapController/uploadBase64',
+    method: 'post',
+    data:param
+  })
+}
+
+// 通过事件code查询事件责任部门
+export function centereventtdepteventList(param) {
+  return request({
+    url: '/center-agriculture/VisuForestCloudMapController/centereventtdepteventList',
+    method: 'post',
+    data:param
+  })
+}
+// 通过责任部门查询责任人
+export function dutysystemList(param) {
+  return request({
+    url: '/center-agriculture/VisuForestCloudMapController/dutysystemList',
     method: 'post',
     data:param
   })
 }
-// 事件短信联系人
+
+// 事件责任制添加联系人
+export function dutysystemAdd(param) {
+  return request({
+    url: '/center-agriculture/VisuForestCloudMapController/dutysystemAdd',
+    method: 'post',
+    data:param
+  })
+}
+// 事件责任制删除联系人
+export function dutysystemRemove(param) {
+  return request({
+    url: '/center-agriculture/VisuForestCloudMapController/dutysystemRemove',
+    method: 'get',
+    params:param
+  })
+}
+
+// 通过部门id获取责任人
 export function userFeginlist(param) {
   return request({
-    url: '/center-fire/VisuForestCloudMapController/userFeginlist',
-    method: 'post'
+    url: '/system/user/userFeginlist',
+    method: 'post',
+    data: param
   })
 }

src/assets/styles/base.scss

@@ -65,6 +65,7 @@ $eventStateColor-wb: #c2bc43;
 $eventStateColor-cf: #a23737;
 $eventStateColor-bj: #6ae08f;
 $eventStateColor-gd: #0369ef;
+$eventStateColor-gd: #20EF56;
 
 $eventStateColor-xsb: #11b57e;
 $eventStateColor-cb: #e63b4a;
@@ -2477,6 +2478,28 @@ div::-webkit-scrollbar {
       }
     }
 
+    //确认
+    .event-state-qr {
+      display: flex;
+      align-items: center;
+
+      i {
+        color: $eventStateColor-qr;
+        font-size: 1rem;
+        margin-left: -.5rem;
+      }
+
+      .event-list-state-qr {
+        width: fit-content;
+        background-color: $eventStateColor-qr;
+        color: $white;
+        padding:0.25rem 0.4rem;
+        margin-left: -.5rem;
+        margin-bottom: .2rem;
+        border-radius: .2rem;
+      }
+    }
+
     .bgt-info-name {
       color: $inBlue;
       font-weight: bolder;

src/components/TVWall.vue

@@ -2,28 +2,30 @@
   <div>
     <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
                @close="cancelEventLocationShow()">
-	  <div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">
-	  	<!-- <div class="this-title">
-	  		<span>林场</span>
-	  		<span>45</span>
-	  	</div> -->
-	  	<div class="i-list-con" style="height: 64vh; overflow-y: scroll;">
-	  		<span v-for="(item,index) in cameraList" :key="index">
-	  			<div class="d-l-con" @click="playhk(item.channelCode)">
-	  				<div class="d-l-l-text">
-	  					<i class="i-small"></i>
-	  					<h4>{{ item.cameraName }}</h4>
-	  				</div>
-	  			</div>
-	  		</span>
-	  	</div>
-	  </div>
-      <div style="width:70%;height:400px;position:absolute;">
-        <!--视频窗口展示---大华-->
-        <div id="dom1" class="dom1"></div>
-        <!--视频窗口展示---海康-->
-        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
-      </div>
+	  <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
+	  	<!--&lt;!&ndash; <div class="this-title">-->
+	  		<!--<span>林场</span>-->
+	  		<!--<span>45</span>-->
+	  	<!--</div> &ndash;&gt;-->
+	  	<!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
+	  		<!--<span v-for="(item,index) in cameraList" :key="index">-->
+	  			<!--<div class="d-l-con" @click="playhk(item.channelCode)">-->
+	  				<!--<div class="d-l-l-text">-->
+	  					<!--<i class="i-small"></i>-->
+	  					<!--<h4>{{ item.cameraName }}</h4>-->
+	  				<!--</div>-->
+	  			<!--</div>-->
+	  		<!--</span>-->
+	  	<!--</div>-->
+	  <!--</div>-->
+      <!--<div style="width:70%;height:400px;position:absolute;">-->
+        <!--&lt;!&ndash;视频窗口展示-&#45;&#45;大华&ndash;&gt;-->
+        <!--<div id="dom1" class="dom1"></div>-->
+        <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
+        <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
+      <!--</div>-->
+
+      <div id="dom1" class="dom1"></div>
     </el-dialog>
   </div>
 
@@ -32,7 +34,7 @@
 <script>
 /** ----------------------------------摄像头预览开始------------------------------------- */
 import { getDahuaVideoServer, getTVWallList } from '@/api/dahua/dahua'
-import { cameraTVHaiKangList } from '@/api/haikang/haikang'
+import { tvCameraList } from '@/api/haikang/haikang'
 import DHWs from '@/dahua/lib/DHWs'
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
@@ -249,8 +251,8 @@ export default {
         }],
       crtPosX: 0,
       crtPosY: 0,
-      crtWidth: 740,
-      crtHeight: 400,
+      crtWidth: 1150,
+      crtHeight: 700,
       domId: 'dom1',
       mixedVideoDisplayMode: 2,
       isShowTipe: true,
@@ -262,12 +264,14 @@ export default {
     }
   },
   created() {
+    const DHWsInstance = DHWs.getInstance()
+    this.ws = DHWsInstance
   },
   methods: {
     cancelEventLocationShow() {
       // this.activeName = 'tv'
       this.TVWallVisible = false
-      // this.destroy()
+      this.destroy()
 
       if (this.oWebControl != null) {
         this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
@@ -278,40 +282,38 @@ export default {
       }
     },
     showTVWall() {
-      let that=this;
+      // let that=this;
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
-      // const DHWsInstance = DHWs.getInstance()
-      // this.ws = DHWsInstance
-      // this.ws.addEventListener('connectStateChange', data => {
-      //   if (data) {
-      //     console.log('连接成功')
-      //   } else {
-      //     console.log('连接失败，下载客户端')
-      //     this.alertReinstall()
-      //     // this.isShowTipe && this.$modal.confirm({
-      //     //   title: '下载客户端',
-      //     //   content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
-      //     //   onOk: () => {
-      //     //     //这里写下载方法
-      //     //     this.isShowTipe = false
-      //     //   },
-      //     //   onCancel: () => {
-      //     //     this.isShowTipe = false
-      //     //   }
-      //     // });
-      //   }
-      // })
-      // this.preview()
+      this.ws.addEventListener('connectStateChange', data => {
+        if (data) {
+          console.log('连接成功')
+        } else {
+          console.log('连接失败，下载客户端')
+          this.alertReinstall()
+          this.isShowTipe && this.$modal.confirm({
+            title: '下载客户端',
+            content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
+            onOk: () => {
+              //这里写下载方法
+              this.isShowTipe = false
+            },
+            onCancel: () => {
+              this.isShowTipe = false
+            }
+          });
+        }
+      })
+      this.preview()
       /** ----------------------------------大华摄像头预览结束------------------------------------- */
       /** ----------------------------------海康摄像头预览开始------------------------------------- */
-      cameraTVHaiKangList().then(response => {
-        this.cameraList=response.data
-      })
-      that.initPlugin()
-      setTimeout(function() {
-        that.playhk();
-      }, 5000)
-      /** ----------------------------------海康摄像头预览结束------------------------------------- */
+      // tvCameraList().then(response => {
+      //   this.cameraList=response.data
+      // })
+      // that.initPlugin()
+      // setTimeout(function() {
+      //   that.playhk();
+      // }, 5000)
+      // /** ----------------------------------海康摄像头预览结束------------------------------------- */
       this.TVWallVisible = true
     },
     /** ----------------------------------大华摄像头预览开始------------------------------------- */
@@ -339,8 +341,12 @@ export default {
                 loginPort: newResponse.loginPort,
                 userName: newResponse.userName,
                 userPwd: newResponse.userPwd,
+                // loginIp: '192.168.100.100',
+                // loginPort: 8314,
+                // userName: 'system',
+                // userPwd: 'Admin@123',
                 token: '',
-                https: 1
+                https: 0
               })
               this.ws.on('loginState', (res) => {
                 this.isLogin = res
@@ -362,6 +368,7 @@ export default {
     },
 
     create(tvListJson) { // 调用创建控件接口
+      debugger
       let _this = this
       const params = [
         {
@@ -372,7 +379,7 @@ export default {
             'splitNum': 1,
             'channelList': [
               {
-                'channelId': '8ORBqXFlA1D77U45SM1ROC'
+                'channelId': ''
               }
             ]
           },
@@ -457,7 +464,7 @@ export default {
         },
         cbConnectError: function() { // 创建WebControl实例失败
           that.oWebControl = null
-          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
+          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
@@ -465,7 +472,7 @@ export default {
               that.initPlugin()
             }, 3000)
           } else {
-            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
+            $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           }
         },
         cbConnectClose: function(bNormalClose) {
@@ -481,11 +488,11 @@ export default {
       let that=this
       this.getPubKey(function() {
         ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
-        var appkey = '22654202'                           //综合安防管理平台提供的appkey，必填
-        var secret = that.setEncrypt('d7HlmRIaiXp3MQBmsuUg')   //综合安防管理平台提供的secret，必填
-        var ip = '218.27.1.154'                           //综合安防管理平台IP地址，必填
+        var appkey = '24699060'                           //综合安防管理平台提供的appkey，必填
+        var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw')   //综合安防管理平台提供的secret，必填
+        var ip = '36.49.108.22'                           //综合安防管理平台IP地址，必填
         var playMode = 0                                  //初始播放模式：0-预览，1-回放
-        var port = 54321                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
+        var port = 1443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
         var snapDir = 'D:\\SnapDir'                       //抓图存储路径
         var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
         var layout = '3x3'                                //playMode指定模式的布局

src/views/findUserByDept.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="姓名" prop="nickName">
+        <el-input
+          v-model="queryParams.nickName"
+          placeholder="姓名"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="phonenumber">
+        <el-input
+          v-model="queryParams.phonenumber"
+          placeholder="手机号"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="addSelection">确认</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="userList"  @selection-change="handleSelectionChange">
+      <el-table-column align="center" type="selection" width="60"></el-table-column>
+      <el-table-column label="姓名" align="center" prop="nickName"></el-table-column>
+      <el-table-column label="岗位" align="center" prop="name" ></el-table-column>
+      <el-table-column label="手机号" align="center" prop="phonenumber"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  import {userFeginlist} from "@/api/forest";
+
+  export default {
+    name: "findUserByDept",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: false,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 可视化前端配置表表格数据
+        userList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          deptId: null,
+          nickName:null,
+          phonenumber:null
+        },
+        // 表单参数
+        form: {},
+        resUser:[],
+      };
+    },
+    props: {
+      deptId: {
+        type: String,
+        required: true
+      },
+    },
+    created() {
+      this.queryParams.deptId = this.deptId;
+      this.getList();
+    },
+    methods: {
+      /** 查询可视化前端配置表列表 */
+      getList() {
+        this.loading = true;
+        userFeginlist(this.queryParams).then(response => {
+          this.userList = response.data;
+          this.loading = false;
+        });
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams.nickName=null;
+        this.queryParams.phonenumber=null;
+        this.getList();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.resUser = [];
+        for (let i in selection){
+          const res = {};
+          res.id = '';
+          res.dept = '';
+          res.depteventId = '';
+          res.name = selection[i].nickName;
+          res.post = '';
+          res.telphone = selection[i].phonenumber;
+          this.resUser.push(res);
+        }
+      },
+      //数据提交到父页
+      addSelection(){
+        this.$emit("addSelection",this.resUser);
+      }
+    }
+  };
+</script>

src/views/monitor.vue

@@ -8,11 +8,11 @@
       <!-- 左侧 -->
       <div class="leftbar" :class="indentleft" ref="left">
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>事态感知</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
             </div>
             <div class="i-list-con h-73">
               <div class="d-l-con-icon">
@@ -26,6 +26,20 @@
                     <h5>{{ item.deviceName }}</h5>
                   </div>
                 </div>
+                <div class="icon-con w-33 m-btm-no">
+                  <div class="icon icon-dot"></div>
+                  <div class="icon-text">
+                    <h6>0</h6>
+                    <h5>传感器</h5>
+                  </div>
+                </div>
+                <div class="icon-con w-33 m-btm-no">
+                  <div class="icon icon-dot"></div>
+                  <div class="icon-text">
+                    <h6>0</h6>
+                    <h5>大喇叭</h5>
+                  </div>
+                </div>
               </div>
               <div class="overflow-y" style="height: 33vh;">
                 <el-collapse accordion>
@@ -59,11 +73,11 @@
       <!-- 右侧 -->
       <div class="rightbar" :class="indentright" ref="right">
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;"><!--height: 750px;-->
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>列表</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
             </div>
             <div class="i-list-con h-43">
               <div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOList"
@@ -78,14 +92,14 @@
           </dv-border-box-13>
         </div>
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>重点区域</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
             </div>
             <div class="i-list-con h-25">
-              <div class="d-l-con" v-for="(item,index) in keyAreaList" @click="">
+              <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}" @click="getRegionalFlag(item.id)">
                 <div class="d-l-l-text">
                   <i class="i-small"></i>
                   <h4>{{ item.areaName }}</h4>
@@ -96,10 +110,10 @@
         </div>
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
-      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
-        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
-          src="@/assets/images/mascot.png"/></div>
-      </el-tooltip>
+<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
+<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
+<!--          src="@/assets/images/mascot.png"/></div>-->
+<!--      </el-tooltip>-->
 
     </div>
     <eventLocation ref="eventLocation"></eventLocation>
@@ -118,7 +132,8 @@
 import {
   selectDeviceType,
   selectCameraByDeptId,
-  selectKeyAreaList
+  selectKeyAreaList,
+  getRegionalFlag
 } from '@/api/monitor'
 
 import supermap from '@/components/supermap' //超图
@@ -134,7 +149,7 @@ import {
 import {
   getHaiKangVideoServer
 } from '@/api/haikang/haikang'
-// import DHWs from '@/dahua/lib/DHWs'
+import DHWs from '@/dahua/lib/DHWs'
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
   // import echarts from 'echarts'
@@ -150,8 +165,8 @@ export default {
   },
   created() {
     /** ----------------------------------摄像头预览开始------------------------------------- */
-    // const DHWsInstance = DHWs.getInstance()
-    // this.ws = DHWsInstance
+    const DHWsInstance = DHWs.getInstance()
+    this.ws = DHWsInstance
     /** ----------------------------------摄像头预览结束------------------------------------- */
 
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
@@ -161,7 +176,7 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.selectDeviceType()
+    this.selectDeviceType(-1)
     this.selectKeyAreaList()
   },
   data() {
@@ -169,6 +184,8 @@ export default {
       iconCurrentIndex1: '-1',
       listCurrentIndex1: '-1',
       listCurrentIndex2: '-1',
+      listCurrentIndex3: '-1',
+      graphicsList:[],//重点区域
       /** ----------------------------------摄像头预览开始------------------------------------- */
       //大华
       activePanel: 'key1',
@@ -198,10 +215,43 @@ export default {
       indentleft: '',
       indentright: '',
       indentText: '收起左右栏',
-      indentdisabled: false
+      indentdisabled: false,
+      domId: 'dom1',
     }
   },
   methods: {
+    selectKeyAreaList() {
+      this.keyAreaList=[]
+      //获取重点区域列表
+      let that = this
+      selectKeyAreaList().then(res => {
+        that.keyAreaList = res.data
+      })
+    },
+    getRegionalFlag(id){
+      //获取重点区域
+      this.listCurrentIndex3=id
+      let that = this
+      getRegionalFlag(id).then(res => {
+        that.graphicsList=[]
+        //地图标记
+        if (res.data != null && res.data.length > 0) {
+          for (let i = 0; i < res.data.length; i++) {
+            let latlng = {
+              lat: res.data[i].lat,
+              lng: res.data[i].lng
+            }
+            that.graphicsList.push(latlng)
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearG()
+            that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
+          }, 1000)
+        } else {
+          that.$refs.supermap.clearG()
+        }
+      })
+    },
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
     showDialog(click) {
       if (click == 'eventLocation') {
@@ -296,7 +346,8 @@ export default {
         }],
         xAxis: {
           show: false,
-          type: 'value'
+          type: 'value',
+          left:10
         },
         yAxis: {
           type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
@@ -369,19 +420,12 @@ export default {
         }]
       })
     },
-    selectKeyAreaList() {
-      //获取重点区域
-      let that = this;
-      selectKeyAreaList().then(res => {
-        that.keyAreaList = res
-      })
-    },
     selectDeviceType(index) {
       this.iconCurrentIndex1 = index
       //获取左侧动态感知设备
       let that = this
       selectDeviceType().then(res => {
-
+        that.cameraMarkersList=[]
         that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
 
         that.region = res.data.visuForestCloudTodaySjfbBOList
@@ -412,13 +456,15 @@ export default {
               isAggregation: false
             }
             if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
-              markersMap.parameter = res.data.visuForestCloudCameraBOList[i].cameraCode
+              markersMap.parameter = {code:res.data.visuForestCloudCameraBOList[i].cameraCode,
+                type:res.data.visuForestCloudCameraBOList[i].cameraFactory}
             } else {
               markersMap.parameter = []
             }
 
             markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
             markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
+            markersMap.radius = res.data.visuForestCloudCameraBOList[i].cameraRadius
             markersMap.bindPopupHtml = '<div class="map-tip">' +
               '<span>' +
               '                  <div class="d-l-con">' +
@@ -436,6 +482,22 @@ export default {
               '                </div>' +
               '                </div>' +
               '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头类型：' + res.data.visuForestCloudCameraBOList[i]
+                .cameraFactory + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头半径：' + res.data.visuForestCloudCameraBOList[i]
+                .cameraRadius + '米</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
               '</div>'
             this.cameraMarkersList.push(markersMap)
             //   cameraAccount: "1"
@@ -458,7 +520,7 @@ export default {
           setTimeout(() => {
             that.$refs.supermap.clearM(true)
             that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
           }, 1000)
         }
       })
@@ -471,12 +533,10 @@ export default {
       this.listCurrentIndex1 = depId
       let that = this
       that.cameraMarkersList = []
-
       that.visuForestCloudCameraBOList = []
       selectCameraByDeptId(depId).then(res => {
         //根据设备类型查看列表
         that.visuForestCloudCameraBOList = res.data
-
         if (res.data != null && res.data.length > 0) {
           for (let i = 0; i < res.data.length; i++) {
             let markersMap = {
@@ -490,13 +550,15 @@ export default {
               isAggregation: false
             }
             if (res.data[i].channelCode != null) {
-              markersMap.parameter = res.data[i].cameraCode
+              markersMap.parameter = {code:res.data.data[i].cameraCode,
+                type:res.data.data[i].cameraFactory}
             } else {
               markersMap.parameter = []
             }
 
             markersMap.lng = res.data[i].longitude
             markersMap.lat = res.data[i].latitude
+            markersMap.radius = res.data[i].cameraRadius
             markersMap.bindPopupHtml = '<div class="map-tip">' +
               '<span>' +
               '                  <div class="d-l-con">' +
@@ -513,6 +575,22 @@ export default {
               '                </div>' +
               '                </div>' +
               '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头类型：' + res.data[i]
+                .cameraFactory + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>摄像头半径：' + res.data[i]
+                .cameraRadius + '米</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
               '</div>'
             this.cameraMarkersList.push(markersMap)
             //   cameraAccount: "1"
@@ -535,7 +613,7 @@ export default {
           setTimeout(() => {
             that.$refs.supermap.clearM(true)
             that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
+            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
           }, 1000)
         }
       })
@@ -579,45 +657,48 @@ export default {
       }
     },
     /** 预览按钮操作 */
-    preview(cameraCode) {
-      let that = this
-      // getDahuaVideoServer().then(newResponse => {
-      //   console.log(newResponse)
-      //   this.ws.detectConnectQt().then(res => {
-      //     if (res) { // 连接客户端成功
-      //       this.alertLogin()
-      //       this.ws.login({
-      //         loginIp: newResponse.loginIp,
-      //         loginPort: newResponse.loginPort,
-      //         userName: newResponse.userName,
-      //         userPwd: newResponse.userPwd,
-      //         token: '',
-      //         https: 1
-      //       })
-      //       this.ws.on('loginState', (res) => {
-      //         this.isLogin = res
-      //         console.log('---res-----', res)
-      //         if (res) {
-      //           this.alertLoginSuccess()
-      //           this.activePanel = 'key2'
-      //           this.realTimeVideoDialog(channelCode)
-      //         } else {
-      //           this.alertLoginFailed()
-      //         }
-      //       })
-      //     } else { // 连接客户端失败
-      //       this.alertReinstall()
-      //     }
-      //   })
-      // })
-      that.cameraVisible = true
-      getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
-        that.cameraTitle = '摄像头-'+newResponse.data.cameraName
-        that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
-        setTimeout(function() {
-          that.playhk(newResponse.data.channelCode)
-        }, 5000)
-      })
+    preview(cameraParam) {
+      if(cameraParam.type=='大华'){
+        getDahuaVideoServer().then(newResponse => {
+          console.log(newResponse)
+          this.ws.detectConnectQt().then(res => {
+            if (res) { // 连接客户端成功
+              this.alertLogin()
+              this.ws.login({
+                loginIp: newResponse.loginIp,
+                loginPort: newResponse.loginPort,
+                userName: newResponse.userName,
+                userPwd: newResponse.userPwd,
+                token: '',
+                https: 0
+              })
+              this.ws.on('loginState', (res) => {
+                this.isLogin = res
+                console.log('---res-----', res)
+                if (res) {
+                  this.alertLoginSuccess()
+                  this.activePanel = 'key2'
+                  this.realTimeVideoDialog(cameraParam.code)
+                } else {
+                  this.alertLoginFailed()
+                }
+              })
+            } else { // 连接客户端失败
+              this.alertReinstall()
+            }
+          })
+        })
+      }else if(cameraParam.type=='海康'){
+        let that = this
+        that.cameraVisible = true
+        getHaiKangVideoServer({cameraCode:cameraParam.code}).then(newResponse => {
+          that.cameraTitle = '摄像头-'+newResponse.data.cameraName
+          that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
+          setTimeout(function() {
+            that.playhk(newResponse.data.channelCode)
+          }, 5000)
+        })
+      }
 
     },
     realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
@@ -625,7 +706,8 @@ export default {
         this.$Message.info('正在登陆客户端，请稍等......')
         return false
       }
-      this.ws.openVideo(cameraParams)
+      const params = [cameraParams];
+      this.ws.openVideo(params)
     },
     /** ----------------------------------摄像头预览结束------------------------------------- */
 
@@ -655,7 +737,7 @@ export default {
         },
         cbConnectError: function() { // 创建WebControl实例失败
           that.oWebControl = null
-          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
+          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
@@ -663,7 +745,7 @@ export default {
               that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
             }, 3000)
           } else {
-            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
+            $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
           }
         },
         cbConnectClose: function(bNormalClose) {
@@ -772,14 +854,13 @@ function cbIntegrationCallBack(oData) {
 </script>
 
 
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import '@/assets/styles/base.scss';
+@import '@/assets/styles/base.scss';
 
-  .playWnd {
-    margin: 4px 0 0 8px;
-    width: 1020px; /*播放容器的宽和高设定*/
-    height: 600px;
-    border: 1px solid red;
-  }
+.playWnd {
+  margin: 4px 0 0 8px;
+  width: 1020px; /*播放容器的宽和高设定*/
+  height: 600px;
+  border: 1px solid red;
+}
 </style>