<template>
	  <div>
  <div class="btmbuttonbg">

	  <div class="btmbutton">

		  <div class="btmbutton-con">
			  <!--<div class="btm-left-btn">-->
				  <!--<a class="btm-btn">值班信息</a>-->
			  <!--</div>-->
			  <div class="yj-name" style="text-indent: 1em">张雨晴</div>
			  <div class="model-tab">
				  <button class="on" @click="goJiaShi">驾驶模式</button>
				  <button @click="goChenJin">沉浸模式</button>
			  </div>
			  <div class="time"> {{nowdate}}&nbsp;&nbsp;{{nowtime}}</div>
			  <div class="btm-con">
				  <h2 class="yj-sjzs">160</h2>
				  <div class="yj-sjs">
					  <div class="yj-cl">
						  <b>40</b>
						  <span>未处理</span>
					  </div>
					  <div class="yj-k"></div>
					  <div class="yj-cl">
						  <b>120</b>
						  <span>已确认</span>
					  </div>
				  </div>
			  </div>
			  <div class="btm-con2">
				  <span>隐患排查</span>
				  <span>应急物资</span>
			  </div>
			  <div class="btm-con3">
					<span><i class="iconfont yj-icon-fengsu"></i><u>2级</u></span>
					  <span><i class="iconfont yj-icon-fengxiang"></i><u>东南风</u></span>
					  <span><i class="iconfont yj-icon-jiangyuliang"></i><u>10mm</u></span>
					  <span><i class="iconfont yj-icon-shidu"></i><u>93</u></span>
			  </div>
			  <div class="btn-left">
				  <p><i class="iconfont yj-icon-tongxunlu"></i>通讯录</p>
				  <p><i class="iconfont yj-icon-weizhi"></i>人员定位</p>
				  <p><i class="iconfont yj-icon-taizhang"></i>事件台账</p>
				  <div class="btm-cs">
					  <b>72</b>
					  <span>传感器</span>
				  </div>
			  </div>
			  <div class="btn-right">
				  <p @click="cgq">物联网<i class="iconfont yj-icon-wulianwang"></i></p>
				  <p>视联网<i class="iconfont yj-icon-shilianwang"></i></p>
				  <p @click="info">电视墙<i class="iconfont yj-icon-dianshiqiang"></i></p>
				  <div class="btm-cs">
					  <b>160</b>
					  <span>摄像头</span>
				  </div>
			  </div>
		  </div>

	  </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 : '', //定时器


      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); //清除定时器
                // 定时获取时间
                this.newTimer = setInterval(this.timerOneScondRun, 1000);
            },
            beforeRouteLeave(to,from,next){
            	// 离开组件时停掉定时器，节省内存
                clearInterval(this.newTimer);
                next();
            },

  methods: {
         //获取时间
                timerOneScondRun() {
                	let date = new Date();
                	// 日期格式  2022年05月31日
        	        this.nowdate =
        	            date.getFullYear() +
        	            "/" +
        	            (date.getMonth() + 1 >= 10
        	            ? date.getMonth() + 1
        	            : "0" + (date.getMonth() + 1)) +
        	            "/" +
        	            (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate());
        	        // 时间格式 12:11:27
        	        this.nowtime =
        	            date.getHours() +
        	            ":" +
        	            (date.getMinutes() >= 10
        	            ? date.getMinutes()
        	            : "0" + date.getMinutes()) +
        	            ":" +
        	            (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',
            // loginIp: '192.168.100.100',
            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
      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');
		},
	  	// 跳转驾驶模式
		goJiaShi(){
			// this.$router.push( '/index');
		}

  	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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;
		width: 100%;
		height: 239px;
		background: url("../assets/images/yj-btmbg.png") no-repeat center;
		background-size: 100% 100%;
		z-index: 2;
	}
	.btmbutton{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.btmbutton-con{
		width: 900px;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
	}
	.btmbutton-con .model-tab{
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.btmbutton-con .model-tab button{
		background: url("../assets/images/yj-nav.png") no-repeat center;
		display: block;
		width: 165px;
		height: 25px;
		line-height: 25px;
		background-size: 100% 100%;
		margin-top: -15px;
		cursor: pointer;
		color: #8b8b8b;
		font-size: 14px;
		border: 0px;
		outline: 0px;
	}
	.btmbutton-con .model-tab button.on{
		background: url("../assets/images/yj-navon.png") no-repeat center;
		background-size: 100% 100%;
		color: #fff;
	}
	.btmbutton-con .model-tab button:hover{
		background: url("../assets/images/yj-navon.png") no-repeat center;
		background-size: 100% 100%;
		color: #fff;
	}
	.time{
		text-align: center;
		font-family: "黑体";
		font-size: 20px;
		color: #fff;
		font-style: italic;
		margin-top: 10px;
	}
	.btm-con{
		background: url("../assets/images/yj-btmcbg1.png") no-repeat center;
		width: 313px;
		height: 207px;
		margin: -20px auto 0px auto;
		display: flex;
		flex-direction: column;
	}
	.btm-con h2{
		font-size: 55px;
		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
		text-align: center;
		margin-top: 50px;
		font-family: myfont3;
		font-weight: bold;
	}
	.btm-con .yj-sjs{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: -7px;
	}
	.btm-con .yj-sjs b{
		font-size: 28px;
		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
		text-align: center;
		display: block;
		font-family: myfont3;
		font-weight: bold;
	}
	.btm-con .yj-sjs span{
		color: #fff;
		font-size: 12px;
		text-align: center;
		display: block;
	}
	.btm-con .yj-k{
		width: 70px;
	}
	.btm-con2{
		background: url("../assets/images/yj-btmcbg2.png") no-repeat center;
		width: 459px;
		height: 43px;
		margin: -135px auto 0px auto;
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.btm-con2 span{
		color: #fff;
		font-size: 14px;
		line-height: 43px;
	}
	.btm-con2 span:nth-child(1){
		padding-left: 30px;
	}
	.btm-con2 span:nth-child(2){
		padding-right: 30px;
	}
	.btm-con3{
		width:250px ;
		height: 20px;
		margin: 75px auto 0px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.btm-con3 span{
		margin: 0px 5px;
	}
	.btm-con3 i{
		color: #fff;
		font-size: 16px;

	}
	.btm-con3 u{
		color: #fff;
		font-size: 14px;
		text-decoration: none;
		padding-left: 5px;
	}
	.btn-left{
		position: absolute;
		left: 0px;
		top:14px;
	}
	.btn-left p{
		background: url("../assets/images/yj-btmleftbg.png") no-repeat center;
		background-size: 100% 100%;
		width: 150px;
		height: 23px;
		line-height: 23px;
		margin-bottom: 10px;
		color: #fff;
		padding-left: 18px;
		font-size: 14px;
		cursor: pointer;
		text-align: left;
	}
	.btn-left p i{
		font-size: 15px;
		margin-right: 8px;
	}
	.btn-left p:nth-child(1){
		margin-left: 85px;
	}
	.btn-left p:nth-child(2){
		margin-left: 72px;
	}
	.btn-left p:nth-child(3){
		margin-left: 62px;
	}
	.btn-left p:nth-child(4){
		margin-left: 50px;
	}
	.btm-cs{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 25px;
	}
	.btm-cs b{
		font-size: 50px;
		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
		text-align: center;
		display: block;
		font-family: myfont3;
		font-weight: bold;
	}
	.btm-cs span{
		color: #fff;
		font-size: 12px;
	}
	.btn-right{
		position: absolute;
		right: 0px;
		top:14px;
	}
	.btn-right p{
		background: url("../assets/images/yj-btmrightbg.png") no-repeat center;
		background-size: 100% 100%;
		width: 150px;
		height: 23px;
		line-height: 23px;
		margin-bottom: 10px;
		color: #fff;
		padding-right: 18px;
		font-size: 14px;
		cursor: pointer;
		text-align: right;
	}
	.btn-left p:hover,.btn-right p:hover{
		text-shadow: 0px 0px 5px #1cf4ff;
	}
	.btn-right p i{
		font-size: 15px;
		margin-left: 8px;
	}
	.btn-right p:nth-child(1){
		margin-right: 85px;
	}
	.btn-right p:nth-child(2){
		margin-left: 13px;
	}
	.btn-right p:nth-child(3){
		margin-left: 28px;
	}
	.btn-right .btm-cs{
		margin-top: 25px;
	}
	.btm-left-btn{
		position: absolute;
		left: 90px;
		top: -26px;
		z-index: 99;
		display: flex;
		flex-direction: row;
	}
	.btm-right-btn{
		position: fixed;
		right: 20px;
		bottom:18px;
		z-index: 99;
		display: flex;
		flex-direction: row;
	}
	.btm-btn{
		background: url("../assets/images/yj-btmxbg.png") no-repeat center;
		background-size: 100% 100%;
		width: 85px;
		height: 28px;
		line-height: 28px;
		display: block;
		text-align: center;
		font-size: 12px;
		color: #fff;
		cursor: pointer;
		margin: 0px 5px;
	}
	.btm-btn:hover{
		text-shadow: 0px 0px 5px #1cf4ff;
	}
	.yj-name{
		position: absolute;
		cursor: pointer;
		padding-left: 72px;
		height: 26px;
		line-height: 26px;
		right: 101px;
		top: -25px;
		color: #fff;
		font-size: 16px;
		background: url("../assets/images/yj-name.png") no-repeat center;
	}

</style>
