提交

src/components/Btmbutton.vue

@@ -50,7 +50,7 @@
 			  <div class="btn-right">
 				  <p>物联网<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,437 @@
 	  </div>
 
   </div>
-
+      <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" @close="cancelEventLocationShow()" class="TVWallCustomWidth-right">
+        <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: "spcamera00010",
+              labelName: "延吉龙源村",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00011",
+              labelCode: "spcamera00011",
+              labelName: "延吉台岩",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00012",
+              labelCode: "spcamera00012",
+              labelName: "延吉新依兰镇政府重保",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00013",
+              labelCode: "spcamera00013",
+              labelName: "延吉利民",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00014",
+              labelCode: "spcamera00014",
+              labelName: "延吉梦都美",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00015",
+              labelCode: "spcamera00015",
+              labelName: "延吉小河龙",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00016",
+              labelCode: "spcamera00016",
+              labelName: "延吉五道水库",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00017",
+              labelCode: "spcamera00017",
+              labelName: "天池大桥",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00018",
+              labelCode: "spcamera00018",
+              labelName: "延吉河坝",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00019",
+              labelCode: "spcamera00019",
+              labelName: "延吉市实现九队",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00020",
+              labelCode: "spcamera00020",
+              labelName: "延吉向阳村",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+            {
+              id: "spcamera00021",
+              labelCode: "spcamera00021",
+              labelName: "延边分公司珲乌高速95公里",
+              cameraType: "1",
+              parentLabelCode: "999",
+            },
+          ],
+          labelChannels: [
+            {
+              labelCode: 'spcamera00010',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000001',
+                  channelName: "延吉龙源村",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00011',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000002',
+                  channelName: "延吉台岩",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00012',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000003',
+                  channelName: "延吉新依兰镇政府重保",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00013',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000004',
+                  channelName: "延吉利民",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00014',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000005',
+                  channelName: "延吉梦都美",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00015',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000006',
+                  channelName: "延吉小河龙",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00016',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000007',
+                  channelName: "延吉五道水库",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00017',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000008',
+                  channelName: "天池大桥",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00018',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000009',
+                  channelName: "延吉河坝",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00019',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000010',
+                  channelName: "延吉市实现九队",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00020',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000011',
+                  channelName: "延吉向阳村",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+            {
+              labelCode: 'spcamera00021',
+              channelDates: [
+                {
+                  channelCode: '22010400001320000012',
+                  channelName: "延边分公司珲乌高速95公里",
+                  channelSn: null,
+                  cameraType: "1",
+                  online: "1",
+                  cameraCode: "1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      autoList:[{"channelId":"22010400001320000012"}],
+      TVWallVisible: false,
+      activeName: 'tv',
+      channelId: ['ZgVzqsjwA1DTF561VHG69F'],
+      /** ----------------------------------摄像头预览开始------------------------------------- */
+      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 +527,116 @@ 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() {  // 断开与插件服务连接失败
+            })
+      }
+    },
+    info(){
+      this.TVWallVisible = true;
+      this.ws.detectConnectQt().then(res => {
+        if (res) { // 连接客户端成功
+          this.ws.login({
+            loginIp: '116.142.80.11',
+            loginPort: 7902,
+            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
+      debugger
+      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');
@@ -409,4 +933,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/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,7 +19,7 @@
 				<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>

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>
@@ -31,6 +31,7 @@
                 <a><i class="iconfont yj-icon-nav"></i>普查结果</a>
                 <a><i class="iconfont yj-icon-zhiban"></i>值班信息</a>
             </div>
+
         </div>
       </template>
 
@@ -42,13 +43,14 @@
       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: [],
               }
           },
         components: {
@@ -60,7 +62,9 @@
             supermap
         },
         created() {
-            this.eventPoints("event_point");
+          const DHWsInstance = DHWs.getInstance()
+          this.ws = DHWsInstance
+          this.eventPoints("event_point");
         },
         methods: {
             //事件落点
@@ -512,43 +516,103 @@
 
             //视联网 落点
             eventPoints_camera(type){
-                console.log(999)
                 let pointList = [];
                 pointList.push({
-                    name:"白石村摄像头",
+                    name:"延吉龙源村",
                     contacts:"张洁玲",
                     phone:"13500805931",
                     longitude:129.406,
-                    latitude:42.918
+                    latitude:42.918,
+                  parameter:'22010400001320000001'
                 });
                 pointList.push({
-                    name:"延河路摄像头",
+                    name:"延吉台岩",
                     contacts:"王建军",
                     phone:"13664407655",
                     longitude:129.45,
-                    latitude:42.898
+                    latitude:42.898,
+                  parameter:'22010400001320000002'
                 });
                 pointList.push({
-                    name:"兴安村摄像头",
+                    name:"延吉新依兰镇政府重保",
                     contacts:"蔡雨虹",
                     phone:"15754320117",
                     longitude:129.486,
-                    latitude:42.945
+                    latitude:42.945,
+                  parameter:'22010400001320000003'
                 });
                 pointList.push({
-                    name:"小白石村摄像头",
+                    name:"延吉利民",
                     contacts:"吕国琴",
                     phone:"15044076332",
                     longitude:129.416,
-                    latitude:42.939
+                    latitude:42.939,
+                  parameter:'22010400001320000004'
                 });
                 pointList.push({
-                    name:"上东沟摄像头",
+                    name:"延吉梦都美",
                     contacts:"吴明月",
                     phone:"15044076332",
                     longitude:129.386,
-                    latitude:42.945
+                    latitude:42.945,
+                  parameter:'22010400001320000005'
                 });
+              pointList.push({
+                name:"延吉小河龙",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.5091,
+                latitude:42.89107,
+                parameter:'22010400001320000006'
+              });
+              pointList.push({
+                name:"延吉五道水库",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.5012,
+                latitude:42.902,
+                parameter:'22010400001320000007'
+              });
+              pointList.push({
+                name:"天池大桥",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.4969,
+                latitude:42.897,
+                parameter:'22010400001320000008'
+              });
+              pointList.push({
+                name:"延吉河坝",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.4780,
+                latitude:42.887,
+                parameter:'22010400001320000009'
+              });
+              pointList.push({
+                name:"延吉市实现九队",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.515,
+                latitude:42.882,
+                parameter:'22010400001320000010'
+              });
+              pointList.push({
+                name:"延吉向阳村",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.5307,
+                latitude:42.889,
+                parameter:'22010400001320000011'
+              });
+              pointList.push({
+                name:"延边分公司珲乌高速95公里",
+                contacts:"吴明月",
+                phone:"15044076332",
+                longitude:129.5255,
+                latitude:42.915,
+                parameter:'22010400001320000012'
+              });
 
                 var markersList = []
                 for (let i = 0; i < pointList.length; i++) {
@@ -557,8 +621,8 @@
                         lat: 43.02,
                         icon: 'marker',
                         bindPopupHtml: '',
-                        click: '',
-                        parameter: pointList[i],
+                        click: 'preview',
+                        parameter: pointList[i].parameter,
                         keepBindPopup: false,
                         isAggregation: false
                     }
@@ -621,8 +685,35 @@
 
             /** 预览按钮操作 */
             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,
+                    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 = [