Merge remote-tracking branch 'origin/master'

src/api/components/supermap.js

@@ -6,4 +6,10 @@ export const iconList = {
     'sj-icon-map-rescueSupplies': require('@/assets/images/event_fire/rescueSupplies.png'),
     'sj-icon-map-rescueTeam': require('@/assets/images/event_fire/rescueTeam.png'),
     'sj-icon-map-camera': require('@/assets/images/event_fire/camera.png'),
+
+    'sj-icon-map-wind-speed': require('@/assets/images/event_fire/wind-speed.png'),//风速
+    'sj-icon-map-rainfall': require('@/assets/images/event_fire/rainfall.png'),//降雨量
+    'sj-icon-map-soil': require('@/assets/images/event_fire/soil.png'),//土壤
+    'sj-icon-map-water-flow-rate': require('@/assets/images/event_fire/water-flow-rate.png'),//水流速
+    'sj-icon-map-displacement': require('@/assets/images/event_fire/displacement.png')//位移
 }

src/components/Btmbutton.vue

@@ -48,9 +48,9 @@
 				  </div>
 			  </div>
 			  <div class="btn-right">
-				  <p>物联网<i class="iconfont yj-icon-wulianwang"></i></p>
+				  <p @click="cgq">物联网<i class="iconfont yj-icon-wulianwang"></i></p>
 				  <p>视联网<i class="iconfont yj-icon-shilianwang"></i></p>
-				  <p>电视墙<i class="iconfont yj-icon-dianshiqiang"></i></p>
+				  <p @click="info">电视墙<i class="iconfont yj-icon-dianshiqiang"></i></p>
 				  <div class="btm-cs">
 					  <b>160</b>
 					  <span>摄像头</span>
@@ -61,22 +61,457 @@
 	  </div>
 
   </div>
-
+      <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" @close="cancelEventLocationShow()" custom-class="TVWallVisible">
+        <div style="display: flex;">
+          <div id="dom1" class="dom1"></div>
+        </div>
+      </el-dialog>
 </div>
 </template>
 <script>
+import DHWs from '@/dahua/lib/DHWs';
 export default {
   name: 'Btmbutton',
   data(){
   	return {
-		nowdate : '', //日期
-		nowtime : '', //时间
-		newTimer : '', //定时器
+      nowdate : '', //日期
+      nowtime : '', //时间
+      newTimer : '', //定时器
+
+
+      tvListJson: [
+        {
+          switchTab: "2",
+          treeLabels: [
+            {
+              id: null,
+              labelCode: "999",
+              labelName: "电视墙",
+              cameraType: null,
+              parentLabelCode: "",
+            },
+            {
+              id: "spcamera00010",
+              labelCode: "22010400001320000001",
+              labelName: "延吉龙源村",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00011",
+              labelCode: "22010400001320000002",
+              labelName: "延吉台岩",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00012",
+              labelCode: "22010400001320000003",
+              labelName: "延吉新依兰镇政府重保",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00013",
+              labelCode: "22010400001320000004",
+              labelName: "延吉利民",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00014",
+              labelCode: "22010400001320000005",
+              labelName: "延吉梦都美",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00015",
+              labelCode: "22010400001320000006",
+              labelName: "延吉小河龙",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00016",
+              labelCode: "22010400001320000007",
+              labelName: "延吉五道水库",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00017",
+              labelCode: "22010400001320000008",
+              labelName: "天池大桥",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00018",
+              labelCode: "22010400001320000009",
+              labelName: "延吉河坝",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00019",
+              labelCode: "22010400001320000010",
+              labelName: "延吉市实现九队",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00020",
+              labelCode: "22010400001320000011",
+              labelName: "延吉向阳村",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00021",
+              labelCode: "22010400001320000012",
+              labelName: "延边分公司珲乌高速95公里",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00022",
+              labelCode: "22010400001320000013",
+              labelName: "延吉水上市场",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+          ],
+          labelChannels: [
+            {
+              labelCode: '22010400001320000001',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000001',
+                  channelName: "延吉龙源村",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000002',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000002',
+                  channelName: "延吉台岩",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000003',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000003',
+                  channelName: "延吉新依兰镇政府重保",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000004',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000004',
+                  channelName: "延吉利民",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000005',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000005',
+                  channelName: "延吉梦都美",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000006',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000006',
+                  channelName: "延吉小河龙",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000007',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000007',
+                  channelName: "延吉五道水库",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000008',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000008',
+                  channelName: "天池大桥",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000009',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000009',
+                  channelName: "延吉河坝",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000010',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000010',
+                  channelName: "延吉市实现九队",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000011',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000011',
+                  channelName: "延吉向阳村",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000012',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000012',
+                  channelName: "延边分公司珲乌高速95公里",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000013',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000013',
+                  channelName: "延吉水上市场",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: null,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      autoList:[{"channelId":"22010400001320000012"}],
+      TVWallVisible: false,
+      activeName: 'tv',
+      channelId: ['22010400001320000012'],
+      /** ----------------------------------摄像头预览开始------------------------------------- */
+      showModal: true,
+      activePanel: 'key1',
+      isLogin: false,
+      loginType: '1',
+      token: '',
+      ctrlType: 'playerWin',
+      https: 1,
+      httpsList: [
+        {
+          value: 0,
+          label: 0
+        },
+        {
+          value: 1,
+          label: 1
+        }
+      ],
+      ctrlTypeList: [{
+        value: 'playerWin',
+        label: '播放控件'
+      }, {
+        value: 'realMonitorUI',
+        label: '带设备树实时预览控件'
+      }, {
+        value: 'playbackUI',
+        label: '带设备树视频回放控件'
+      }, {
+        value: 'TVWallUI',
+        label: '视频上墙'
+      }],
+      ctrlList: [
+        {
+          value: 'ctrl1',
+          label: '控件1'
+        },
+        {
+          value: 'ctrl2',
+          label: '控件2'
+        },
+        {
+          value: 'ctrl3',
+          label: '控件3'
+        }
+      ],
+      splitList: [
+        {
+          value: 1,
+          label: '1 * 1'
+        },
+        {
+          value: 4,
+          label: '2 * 2'
+        },
+        {
+          value: 9,
+          label: '3 * 3'
+        }
+      ],
+      displayModeList: [
+        {
+          value: 1,
+          label: '播放器预览模式'
+        },
+        {
+          value: 2,
+          label: '播放器回放模式'
+        }
+      ],
+      mixedVideoDisplayModeList: [
+        {
+          value: 1,
+          label: '播放实时视频'
+        },
+        {
+          value: 2,
+          label: '播放回放视频'
+        }
+      ],
+      ctrl: 'ctrl1',
+      splitNum: 1,
+      displayMode: 1,
+      displayTimeRange: [],
+      modalDisplayTimeRange: [],
+      mixedVideoTime: null,
+      recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
+      downloadName: '',
+      downTimeRange: [],
+      downloadFormat: 0,
+      downloadFormatList: [{
+        value: 0,
+        label: 'dav'
+      },
+        {
+          value: 1,
+          label: 'avi'
+        }, {
+          value: 2,
+          label: 'mp4'
+        }],
+      downloadSource: 3,
+      downloadSourceList: [
+        {
+          value: 3,
+          label: '中心录像'
+        }, {
+          value: 2,
+          label: '设备录像'
+        }],
+      showDownloadStreamType: false,
+      downloadStreamType: 1,
+      downloadStreamTypeList: [{
+        value: 1,
+        label: '主码流'
+      },
+        {
+          value: 2,
+          label: '辅码流'
+        },
+        {
+          value: 3,
+          label: '三码流'
+        }],
+      downloadIsShow: true,
+      downloadIsShowList: [{
+        value: true,
+        label: '是'
+      },
+        {
+          value: false,
+          label: '否'
+        }],
+      crtPosX: 0,
+      crtPosY: 0,
+      crtWidth: 1100,
+      crtHeight: 640,
+      domId: 'dom1',
+      mixedVideoDisplayMode: 2,
+      isShowTipe: true,
+      /** ----------------------------------摄像头预览结束------------------------------------- */
+      cameraList:[],
+      initCount: 0,
+      pubKey: '',
+      oWebControl: null
 	  }
   },
   props: {
 
   },
+  created() {
+    const DHWsInstance = DHWs.getInstance()
+    this.ws = DHWsInstance
+  },
    mounted () {
          this.timerOneScondRun(); //执行日期函数
                 clearInterval(this.newTimer); //清除定时器
@@ -112,7 +547,391 @@ export default {
         	            ":" +
         	            (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
                 },
+    cancelEventLocationShow() {
+      this.TVWallVisible = false
+      this.destroy()
 
+      if (this.oWebControl != null) {
+        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
+            },
+            function() {  // 断开与插件服务连接失败
+            })
+      }
+    },
+    cgq(){
+      let pointList = [];
+      pointList.push({
+        name:"位移传感器",
+        contacts:"张洁玲",
+        phone:"13500805931",
+        longitude:129.405,
+        latitude:42.907,
+        type:"sj-icon-map-displacement",
+        bindPopupHtml:'<span>' +
+                      ' <div class="d-l-con">' +
+                      '   <div class="d-l-l-text">' +
+                      '     <h4>光源：25nW</h4>' +
+                      '   </div>' +
+                      ' </div>' +
+                      '</span>'+
+                      '<span>' +
+                      ' <div class="d-l-con">' +
+                      '   <div class="d-l-l-text">' +
+                      '     <h4>电压：30V</h4>' +
+                      '   </div>' +
+                      ' </div>' +
+                      '</span>',
+      });
+      pointList.push({
+        name:"土壤温湿度传感器",
+        contacts:"王建军",
+        phone:"13664407655",
+        longitude:129.405,
+        latitude:42.887,
+        type:"sj-icon-map-soil",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>钾含量：135mg/kg</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>导电率：75us/cm</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>氮含量：151mg/kg</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>ph值：9.6PH</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"风速传感器",
+        contacts:"蔡雨虹",
+        phone:"15754320117",
+        longitude:129.455,
+        latitude:42.934,
+        type:"sj-icon-map-wind-speed",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>风速：13m/s</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"降雨量传感器",
+        contacts:"吕国琴",
+        phone:"15044076332",
+        longitude:129.405,
+        latitude:42.928,
+        type:"sj-icon-map-rainfall",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>水量：0.5cm</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"水流速传感器",
+        contacts:"吴明月",
+        phone:"15044076332",
+        longitude:129.375,
+        latitude:42.934,
+        type:"sj-icon-map-water-flow-rate",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>瞬时流速：0m/s</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>瞬时流量：0m³/s</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"位移传感器",
+        contacts:"张洁玲",
+        phone:"13500805931",
+        longitude:129.505,
+        latitude:42.907,
+        type:"sj-icon-map-displacement",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>光源：25nW</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>电压：30V</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"土壤温湿度传感器",
+        contacts:"王建军",
+        phone:"13664407655",
+        longitude:129.505,
+        latitude:42.887,
+        type:"sj-icon-map-soil",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>钾含量：135mg/kg</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>导电率：75us/cm</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>氮含量：151mg/kg</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>ph值：9.6PH</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"风速传感器",
+        contacts:"蔡雨虹",
+        phone:"15754320117",
+        longitude:129.505,
+        latitude:42.934,
+        type:"sj-icon-map-wind-speed",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>风速：15m/s</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"降雨量传感器",
+        contacts:"吕国琴",
+        phone:"15044076332",
+        longitude:129.515,
+        latitude:42.928,
+        type:"sj-icon-map-rainfall",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>水量：0.5cm</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      pointList.push({
+        name:"水流速传感器",
+        contacts:"吴明月",
+        phone:"15044076332",
+        longitude:129.425,
+        latitude:42.954,
+        type:"sj-icon-map-water-flow-rate",
+        bindPopupHtml:'<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>瞬时流速：1m/s</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>'+
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>瞬时流量：0.5m³/s</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>',
+      });
+      const markersList = []
+      for (let i = 0; i < pointList.length; i++) {
+        let markersMap = {
+          lng: 124.59,
+          lat: 43.02,
+          icon: 'marker',
+          bindPopupHtml: '',
+          click: '',
+          parameter: pointList[i],
+          keepBindPopup: false,
+          isAggregation: false
+        }
+        markersMap.icon = pointList[i].type;
+        markersMap.lng = pointList[i].longitude;
+        markersMap.lat = pointList[i].latitude;
+        markersMap.bindPopupHtml = '<div class="map-tip">' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>资源名称：' + pointList[i].name + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>经纬度：' + pointList[i].longitude +','+ pointList[i].latitude + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>联系人：' + (pointList[i].contacts  ? pointList[i].contacts : "")  + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>电话：' +  (pointList[i].phone ? pointList[i].phone : "") + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            pointList[i].bindPopupHtml +
+            '</div>'
+        markersList.push(markersMap)
+      }
+      setTimeout(() => {
+        this.$parent.$refs.supermap.setMarkersByType(markersList, "cgq");
+      }, 3000)
+    },
+    info(){
+      this.TVWallVisible = true;
+      this.ws.detectConnectQt().then(res => {
+        if (res) { // 连接客户端成功
+          this.ws.login({
+            loginIp: '116.142.80.11',
+            loginPort: 7902,
+            // loginIp: '192.168.100.100',
+            // loginPort: 8320,
+            userName: 'system',
+            userPwd: 'Admin123',
+            token: '',
+            https: 1
+          })
+          this.ws.on('loginState', (res) => {
+            this.isLogin = res
+            console.log('---res-----', res)
+            if (res) {
+              this.activePanel = 'key2'
+              this.create()
+            }
+          })
+        }
+      })
+    },
+    /** ----------------------------------大华摄像头预览开始------------------------------------- */
+    create() { // 调用创建控件接口
+      const params = [
+        {
+          'ctrlType': 'realMonitorUI',
+          'ctrlCode': 'ctrl1',
+          'ctrlProperty': {
+            'displayMode': 1,
+            'splitNum': 1,
+            'channelList': [
+              {
+                'channelId': ''
+              }
+            ]
+          },
+          'visible': true,
+          'domId': 'dom1'
+        }
+      ]
+      this.setPos()
+      this.customizeTree(this.tvListJson);
+      this.ws.createCtrl(params);
+      this.playRealMonitorVideo();
+    },
+    playRealMonitorVideo() { // 自定义设备树自动播放指定通道编码视频
+      const config = this.ws.config
+      const {loginIp, userCode} = config
+      this.ws.postMessage('playRealMonitorVideo', {
+        loginIp,
+        userCode,
+        params: {
+          ctrlCode: "ctrl1",
+          array: this.autoList
+        }
+      })
+    },
+    setPos() {
+      let target = document.getElementById(this.domId)
+      console.log(target, 'target')
+      target.style.right = `${this.crtPosX}px`
+      target.style.top = `${this.crtPosY}px`
+      target.style.width = `${this.crtWidth}px`
+      target.style.height = `${this.crtHeight}px`
+      if (document.createEvent) {
+        var event = document.createEvent('HTMLEvents')
+        event.initEvent('resize', true, true)
+        window.dispatchEvent(event)
+      } else if (document.createEventObject) {
+        window.fireEvent('onresize')
+      }
+    },
+    destroy() { // 调用销毁控件接口
+      if (!this.isLogin) {
+        return false
+      }
+      const ctrls = this.ws.ctrls.map(i => {
+        if (i.ctrlCode === this.ctrl) {
+          return i.ctrlCode
+        }
+      })
+      this.ws.destroyCtrl(ctrls)
+    },
+    customizeTree(tvListJson) { // 调用控件接口树
+      const config = this.ws.config
+      const { loginIp, userCode } = config
+      this.ws.postMessage('customizeTree', {
+        loginIp,
+        userCode,
+        params: {
+          array: tvListJson
+        }
+      })
+    },
+    /** ----------------------------------大华摄像头预览结束------------------------------------- */
 		// 跳转沉浸模式
 		goChenJin(){
 			this.$router.push( '/YjCjms');
@@ -127,7 +946,23 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style>
+.TVWallVisible{
+  position: fixed;
+  top:-10%;
+  left:50%;
+  transform: translateX(-50%);
+  width: 1150px;
+  height: 735px;
+  background: #031135;
+  border: 1px solid #2159b3;
+  z-index: 999;
+  box-shadow: 0px 0px 10px #1a498f;
+  color: #FFF;
+}
+.el-dialog__title{
+  color: #FFF;
+}
 	.btmbuttonbg{
 		position: absolute;
 		bottom: 0px;
@@ -409,4 +1244,5 @@ export default {
 		font-size: 16px;
 		background: url("../assets/images/yj-name.png") no-repeat center;
 	}
+
 </style>

src/components/Cjmsbtm.vue

@@ -104,7 +104,7 @@ export default {
 				  icon_0, icon_1, icon_2, icon_3, icon_4, icon_1, icon_2, icon_3, icon_1, icon_2
 			  ],
 		names:[
-				  "摄像头1", "摄像头2", "摄像头3", "摄像头4", "摄像头5", "摄像头6", "摄像头7", "摄像头8", "摄像头9", "摄像头10"
+				  "延吉龙源村", "延吉台岩", "延吉利民", "延吉梦都美", "延吉小河龙", "延吉五道水库", "天池大桥", "延吉河坝", "延吉市实现九队",'延吉向阳村'
 			  ],
 		      iconArrow,
 		      currentProgressId: '',

src/components/Cjmscon.vue

@@ -34,92 +34,99 @@ export default {
             },
             {
               id: "spcamera00010",
-              labelCode: "spcamera00010",
+              labelCode: "22010400001320000001",
               labelName: "延吉龙源村",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00011",
-              labelCode: "spcamera00011",
+              labelCode: "22010400001320000002",
               labelName: "延吉台岩",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00012",
-              labelCode: "spcamera00012",
+              labelCode: "22010400001320000003",
               labelName: "延吉新依兰镇政府重保",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00013",
-              labelCode: "spcamera00013",
+              labelCode: "22010400001320000004",
               labelName: "延吉利民",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00014",
-              labelCode: "spcamera00014",
+              labelCode: "22010400001320000005",
               labelName: "延吉梦都美",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00015",
-              labelCode: "spcamera00015",
+              labelCode: "22010400001320000006",
               labelName: "延吉小河龙",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00016",
-              labelCode: "spcamera00016",
+              labelCode: "22010400001320000007",
               labelName: "延吉五道水库",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00017",
-              labelCode: "spcamera00017",
+              labelCode: "22010400001320000008",
               labelName: "天池大桥",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00018",
-              labelCode: "spcamera00018",
+              labelCode: "22010400001320000009",
               labelName: "延吉河坝",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00019",
-              labelCode: "spcamera00019",
+              labelCode: "22010400001320000010",
               labelName: "延吉市实现九队",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00020",
-              labelCode: "spcamera00020",
+              labelCode: "22010400001320000011",
               labelName: "延吉向阳村",
               cameraType: "1",
               parentLabelCode: "999",
             },
             {
               id: "spcamera00021",
-              labelCode: "spcamera00021",
+              labelCode: "22010400001320000012",
               labelName: "延边分公司珲乌高速95公里",
               cameraType: "1",
               parentLabelCode: "999",
             },
+            {
+              id: "spcamera00022",
+              labelCode: "22010400001320000013",
+              labelName: "延吉水上市场",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
           ],
           labelChannels: [
             {
-              labelCode: 'spcamera00010',
+              labelCode: '22010400001320000001',
               channelDates: [
                 {
                   channelCode: '22010400001320000001',
@@ -132,7 +139,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00011',
+              labelCode: '22010400001320000002',
               channelDates: [
                 {
                   channelCode: '22010400001320000002',
@@ -145,7 +152,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00012',
+              labelCode: '22010400001320000003',
               channelDates: [
                 {
                   channelCode: '22010400001320000003',
@@ -158,7 +165,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00013',
+              labelCode: '22010400001320000004',
               channelDates: [
                 {
                   channelCode: '22010400001320000004',
@@ -171,7 +178,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00014',
+              labelCode: '22010400001320000005',
               channelDates: [
                 {
                   channelCode: '22010400001320000005',
@@ -184,7 +191,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00015',
+              labelCode: '22010400001320000006',
               channelDates: [
                 {
                   channelCode: '22010400001320000006',
@@ -197,7 +204,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00016',
+              labelCode: '22010400001320000007',
               channelDates: [
                 {
                   channelCode: '22010400001320000007',
@@ -210,7 +217,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00017',
+              labelCode: '22010400001320000008',
               channelDates: [
                 {
                   channelCode: '22010400001320000008',
@@ -223,7 +230,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00018',
+              labelCode: '22010400001320000009',
               channelDates: [
                 {
                   channelCode: '22010400001320000009',
@@ -236,7 +243,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00019',
+              labelCode: '22010400001320000010',
               channelDates: [
                 {
                   channelCode: '22010400001320000010',
@@ -249,7 +256,7 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00020',
+              labelCode: '22010400001320000011',
               channelDates: [
                 {
                   channelCode: '22010400001320000011',
@@ -262,12 +269,25 @@ export default {
               ],
             },
             {
-              labelCode: 'spcamera00021',
+              labelCode: '22010400001320000012',
               channelDates: [
                 {
                   channelCode: '22010400001320000012',
                   channelName: "延边分公司珲乌高速95公里",
                   channelSn: null,
+                  cameraType: "0",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: '22010400001320000013',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000013',
+                  channelName: "延吉水上市场",
+                  channelSn: null,
                   cameraType: "1",
                   online: "1",
                   cameraCode: "1",
@@ -453,6 +473,8 @@ export default {
             this.ws.login({
               loginIp: '116.142.80.11',
               loginPort: 7902,
+              // loginIp: '192.168.100.100',
+              // loginPort: 8320,
               userName: 'system',
               userPwd: 'Admin123',
               token: '',

src/components/Cjmsleftnav.vue

@@ -20,15 +20,15 @@
 			  <div class="sxt-img-div">
 				  <!--<img src="../assets/images/yj-cjmsimg1.png"/>-->
 				  <img src="../assets/images/cjms_camera/yj-cjmsimg2.png"/>
-				  <span>摄像头1</span>
+				  <span>延吉龙源村</span>
 			  </div>
 			  <div class="sxt-img-div">
 				  <img src="../assets/images/cjms_camera/water_1.jpg"/>
-				  <span>摄像头2</span>
+				  <span>延吉台岩</span>
 			  </div>
 			  <div class="sxt-img-div">
 				  <img src="../assets/images/cjms_camera/water_2.png"/>
-				  <span>摄像头3</span>
+				  <span>延吉利民</span>
 			  </div>
 		  </div>
 		</div>

src/components/Leftnav.vue

@@ -19,15 +19,15 @@
 				<div class="yj-qyb">
 					<img class="yj-qybimg qing" src="../assets/images/yj-tq-qing.png"/>
 					<div class="yj-qybtxt">
-						<h4>26~30℃</h4>
+						<h4>-12~-4℃</h4>
 						<p><i class="iconfont yj-icon-weizhi"></i>延吉市 晴</p>
 					</div>
 				</div>
 				<div class="yj-tqtxt2">
 					<span>风力：2级</span>
-					<span>低温：26℃</span>
-					<span>风向：东南风</span>
-					<span>高温：30℃</span>
+					<span>低温：-12℃</span>
+					<span>风向：西北风</span>
+					<span>高温：-4℃</span>
 					<span>火险：一级火险</span>
 					<span>湿度：53</span>
 				</div>

src/components/Rightnav.vue

@@ -23,43 +23,19 @@
 			<div id="Jydw"></div>
 			<div class="jydw-list scroll h-50">
 				<div class="jydw-li">
-					<img src="../assets/images/yj-img1.png"/>
+					<img src="../assets/images/event_fire/binansuo1.png"/>
 					<div class="jydw-txt">
-						<h2>长胜村救援队伍</h2>
-						<p>队长：周含章</p>
-						<p>人数：36人</p>
+						<h2>延吉市新兴街道</h2>
+						<p>面积：5.8km²</p>
+						<p>容纳人数：26000人</p>
 					</div>
 				</div>
 				<div class="jydw-li">
-					<img src="../assets/images/emergency_team/team2.jpg"/>
+					<img src="../assets/images/event_fire/binansuo2.png"/>
 					<div class="jydw-txt">
-						<h2>兴安村救援队伍</h2>
-						<p>队长：杨文琴</p>
-						<p>人数：30人</p>
-					</div>
-				</div>
-				<div class="jydw-li">
-					<img src="../assets/images/emergency_team/team3.jpg"/>
-					<div class="jydw-txt">
-						<h2>太阳村救援队伍</h2>
-						<p>队长：张洁玲</p>
-						<p>人数：28人</p>
-					</div>
-				</div>
-				<div class="jydw-li">
-					<img src="../assets/images/emergency_team/team4.jpg"/>
-					<div class="jydw-txt">
-						<h2>实现村救援队伍</h2>
-						<p>队长：刘志义</p>
-						<p>人数：32人</p>
-					</div>
-				</div>
-				<div class="jydw-li">
-					<img src="../assets/images/emergency_team/team5.jpg"/>
-					<div class="jydw-txt">
-						<h2>勤劳村救援队伍</h2>
-						<p>队长：周铭宇</p>
-						<p>人数：24人</p>
+						<h2>延吉市新兴街道民昌社区</h2>
+            <p>面积：800m²</p>
+            <p>容纳人数：2000人</p>
 					</div>
 				</div>
 			</div>

src/components/supermap.vue

@@ -860,7 +860,7 @@ export default {
 
         let icon = new window.L.Icon({
           iconUrl: iconList[markersList[i].icon],
-          iconSize: [65, 58],
+          iconSize: [55, 50],
           iconAnchor: [24, 40],
           popupAnchor: [-3, -40],
           shadowSize: [41, 41]

src/views/index.vue

@@ -12,7 +12,7 @@
           <supermap ref="supermap" style="width: 100%;height: 100vh;"
                           class="indexSupermapClass" :mapDiv="'forestMap'"
           :dynamicPlotting="false"
-          :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
+          :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview"
           @abc="abc"></supermap>
           </div>
           <Header></Header>
@@ -28,9 +28,29 @@
                     <el-checkbox label="rescueTeam">救援队伍</el-checkbox>
                     <el-checkbox label="camera">视联网</el-checkbox>
                 </el-checkbox-group>
-                <a><i class="iconfont yj-icon-nav"></i>普查结果</a>
+                <a @click.prevent="pcover" class="sss"><i class="iconfont yj-icon-nav"></i>普查结果</a>
                 <a><i class="iconfont yj-icon-zhiban"></i>值班信息</a>
             </div>
+<!--      width="75%"-->
+
+            <el-dialog
+                width="65%"
+              title="普查结果"
+              :visible.sync="pc"
+              :popper-append-to-body="false"
+              class="Pcjieguo"
+            >
+              <div class="pc_cotent">
+                <div class="pc_head">
+                  <div @click="switching(1)" :class="switchingStyle == 1 ? 'style_switching' : '' " style="cursor: pointer;">社区（政府村）</div>
+                  <div @click="switching(2)" :class="switchingStyle == 2 ? 'style_switching' : '' " style="cursor: pointer;">乡镇（街道）</div>
+                </div>
+                <div class="pc_img">
+                  <img v-if="switchingStyle == 1 " :src="require('@/assets/images/xingzengcun.png')">
+                  <img v-if=" switchingStyle == 2 " :src="require('@/assets/images/xiangzhen.png')">
+                </div>
+              </div>
+            </el-dialog>
         </div>
       </template>
 
@@ -42,13 +62,16 @@
       import Btmbutton from '../components/Btmbutton.vue'
       import Jsmsdialog from '../components/Jsmsdialog.vue'
       import supermap from '@/components/supermap' //超图
+      import DHWs from '@/dahua/lib/DHWs';
 
       export default {
         name: 'App',
           data() {
               return {
                   mapToolShowBH:false,
-                  checkList: []
+                  checkList: [],
+                  pc: false,
+                  switchingStyle: 1,
               }
           },
         components: {
@@ -60,9 +83,18 @@
             supermap
         },
         created() {
-            this.eventPoints("event_point");
+          const DHWsInstance = DHWs.getInstance()
+          this.ws = DHWsInstance
+          this.eventPoints("event_point");
         },
         methods: {
+            pcover() {
+              console.log(1111)
+              this.pc = true
+            },
+            switching(val) {
+              this.switchingStyle = val
+            },
             //事件落点
             eventPoints(type){
                 let pointList = [];
@@ -194,36 +226,36 @@
                     name:"延吉体育场避难所",
                     contacts:"于尽力",
                     phone:"13844388900",
-                    longitude:129.416,
-                    latitude:42.918
+                    longitude:129.427918,
+                    latitude:42.897634
                 });
                 pointList.push({
-                    name:"金达莱广场避难所",
+                    name:"延吉市新兴街道",
                     contacts:"周围",
                     phone:"15943366512",
-                    longitude:129.47,
-                    latitude:42.898
+                    longitude:129.503563,
+                    latitude:42.93300298
                 });
                 pointList.push({
-                    name:"青年广场避难所",
+                    name:"延吉市新兴街道民昌社区",
                     contacts:"高博",
                     phone:"15834925550",
-                    longitude:129.506,
-                    latitude:42.945
+                    longitude:129.507597,
+                    latitude:42.9135427
                 });
                 pointList.push({
                     name:"帽儿山避难所",
                     contacts:"刘星",
                     phone:"18804332888",
-                    longitude:129.436,
-                    latitude:42.939
+                    longitude:129.485738,
+                    latitude:42.857949
                 });
                 pointList.push({
                     name:"阿里郎广场避难所",
                     contacts:"高博",
                     phone:"15834925550",
-                    longitude:129.406,
-                    latitude:42.945
+                    longitude:129.476863,
+                    latitude:42.909891
                 });
 
                 var markersList = []
@@ -512,43 +544,111 @@
 
             //视联网 落点
             eventPoints_camera(type){
-                console.log(999)
                 let pointList = [];
                 pointList.push({
-                    name:"白石村摄像头",
+                    name:"延吉龙源村",
                     contacts:"张洁玲",
                     phone:"13500805931",
-                    longitude:129.406,
-                    latitude:42.918
+                    longitude:129.465361,
+                    latitude:42.955267,
+                  parameter:'22010400001320000001'
                 });
                 pointList.push({
-                    name:"延河路摄像头",
+                    name:"延吉台岩",
                     contacts:"王建军",
                     phone:"13664407655",
-                    longitude:129.45,
-                    latitude:42.898
+                    longitude:129.409443,
+                    latitude:	42.996666,
+                  parameter:'22010400001320000002'
                 });
                 pointList.push({
-                    name:"兴安村摄像头",
+                    name:"延吉新依兰镇政府重保",
                     contacts:"蔡雨虹",
                     phone:"15754320117",
-                    longitude:129.486,
-                    latitude:42.945
+                    longitude:129.479842,
+                    latitude:42.981544,
+                  parameter:'22010400001320000003'
                 });
                 pointList.push({
-                    name:"小白石村摄像头",
+                    name:"延吉利民",
                     contacts:"吕国琴",
                     phone:"15044076332",
-                    longitude:129.416,
-                    latitude:42.939
+                    longitude:129.487777,
+                    latitude:42.998889,
+                  parameter:'22010400001320000004'
                 });
                 pointList.push({
-                    name:"上东沟摄像头",
+                    name:"延吉梦都美",
                     contacts:"吴明月",
                     phone:"15044076332",
-                    longitude:129.386,
-                    latitude:42.945
+                    longitude:129.582222,
+                    latitude:	43.030278,
+                  parameter:'22010400001320000005'
                 });
+              pointList.push({
+                name:"延吉小河龙",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.623157,
+                latitude:42.903191,
+                parameter:'22010400001320000006'
+              });
+              pointList.push({
+                name:"延吉五道水库",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.262213,
+                latitude:43.06127,
+                parameter:'22010400001320000007'
+              });
+              pointList.push({
+                name:"天池大桥",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.468611,
+                latitude:42.895001,
+                parameter:'22010400001320000008'
+              });
+              pointList.push({
+                name:"延吉河坝",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.491388,
+                latitude:	42.896389,
+                parameter:'22010400001320000009'
+              });
+              pointList.push({
+                name:"延吉市实现九队",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.460801,
+                latitude:	42.939701,
+                parameter:'22010400001320000010'
+              });
+              pointList.push({
+                name:"延吉向阳村",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.446944,
+                latitude:42.972778,
+                parameter:'22010400001320000011'
+              });
+              pointList.push({
+                name:"延边分公司珲乌高速95公里",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.444444,
+                latitude:42.991111,
+                parameter:'22010400001320000012'
+              });
+              pointList.push({
+                name:"延吉水上市场",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.502261,
+                latitude:42.916675,
+                parameter:'22010400001320000013'
+              });
 
                 var markersList = []
                 for (let i = 0; i < pointList.length; i++) {
@@ -557,8 +657,8 @@
                         lat: 43.02,
                         icon: 'marker',
                         bindPopupHtml: '',
-                        click: '',
-                        parameter: pointList[i],
+                        click: 'preview',
+                        parameter: pointList[i].parameter,
                         keepBindPopup: false,
                         isAggregation: false
                     }
@@ -621,8 +721,37 @@
 
             /** 预览按钮操作 */
             preview(cameraParam) {
-                this.showTVWall(cameraParam.code, cameraParam.name);
+              this.ws.detectConnectQt().then(res => {
+                if (res) { // 连接客户端成功
+                  this.ws.login({
+                    loginIp: '116.142.80.11',
+                    loginPort: 7902,
+                    // loginIp: '192.168.100.100',
+                    // loginPort: 8320,
+                    userName: 'system',
+                    userPwd: 'Admin123',
+                    token: '',
+                    https: 1
+                  })
+                  this.ws.on('loginState', (res) => {
+                    this.isLogin = res
+                    console.log('---res-----', res)
+                    if (res) {
+                      this.activePanel = 'key2'
+                      this.realTimeVideoDialog([cameraParam])
+                    }
+                  })
+                }
+              })
             },
+          realTimeVideoDialog(cameraParams) {
+            // 调用弹窗实时播放接口
+            if (!this.isLogin) {
+              this.$Message.info("正在登陆客户端，请稍等......");
+              return false;
+            }
+            this.ws.openVideo(cameraParams);
+          },
             /* 电视墙替换开始 */
             showTVWall(channelCode, channelName) {
                 let tvListJson = [
@@ -742,4 +871,50 @@
           .yj-topnav a i{
               margin-right: 6px;
           }
+          .Pcjieguo{
+            .el-dialog{
+              margin-top: 9vh !important;
+              border: 1px solid #2159b3;
+              box-shadow: 0 0 10px #1a498f;
+              background: #031135;
+            }
+            .el-dialog__header{
+              text-align: left;
+              background: #081a46;
+            }
+            .pc_cotent{
+              width: 100%;
+              height: 100%;
+              .pc_head{
+                height: 5vh;
+                display: flex;
+                align-items: center;
+                border-bottom: 1px solid #2159b3;
+                >div{
+                  height: 3.8vh;
+                  width: 17vh;
+                  font-size: 1rem;
+                  display: flex;
+                  margin-right: 10px;
+                  background: linear-gradient(to bottom, #0d3267 0%, #082954 100%);
+                  justify-content: center;
+                  align-items: center;
+                  color: #8790a0;
+                  border: 1px solid rgb(33,89,179,0.5);
+                }
+                .style_switching{
+                  color: #fff;
+                  background: linear-gradient(to bottom, #134fa3 0%,  #156ada 100%);
+                }
+              }
+              .pc_img{
+                height: 70vh;
+                padding: 40px;
+                >img{
+                  width: 95%;
+                  height: 100%;
+                }
+              }
+            }
+          }
       </style>