<template>
    <div>
      <!--<div class="map" @click="abc()">-->
      <div class="map">
          <!--<img src="../assets/images/yj-mapbg.png"/>-->
          <!--<img src="../assets/images/cjms_camera/water_1.jpg"/>-->
          <!-- 地图 -->
          <!--<supermapDialog ref="supermapDialog"-->
                          <!--style="position: absolute; top:0;left: 0;"-->
                          <!--:mapDiv="'forestWarmSuperMap'"-->
          <!--/>-->
          <supermap ref="supermap" style="width: 100%;height: 100vh;"
                          class="indexSupermapClass" :mapDiv="'forestMap'"
          :dynamicPlotting="false"
          :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview"
          @abc="abc"></supermap>
          </div>
          <Header></Header>
          <Leftnav></Leftnav>
          <Rightnav></Rightnav>
          <Btmbutton></Btmbutton>
          <Jsmsdialog ref="Jsmsdialog"></Jsmsdialog>
        <!--<div class="yj-topnav-div" title="地图信息"><i class="iconfont yj-icon-centerdata-t-firecontrol-other-linkage-force"></i></div>-->
            <div class="yj-topnav">
                <el-checkbox-group v-model="checkList" @change="eventPoints_byType(checkList)">
                    <el-checkbox label="shelter">避难场所</el-checkbox>
                    <el-checkbox label="rescueSupplies">救援物资库</el-checkbox>
                    <el-checkbox label="rescueTeam">救援队伍</el-checkbox>
                    <el-checkbox label="camera">视联网</el-checkbox>
                </el-checkbox-group>
                <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>

      <script>
      import '../assets/iconfont/iconfont.css'
      import Header from '../components/Header.vue'
      import Leftnav from '../components/Leftnav.vue'
      import Rightnav from '../components/Rightnav.vue'
      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: [],
                  pc: false,
                  switchingStyle: 1,
              }
          },
        components: {
            Header,
            Leftnav,
            Rightnav,
            Btmbutton,
            Jsmsdialog,
            supermap
        },
        created() {
          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 = [];
                pointList.push({
                    name:"白石村火情",
                    contacts:"张洁玲",
                    phone:"13500805931",
                    longitude:129.416,
                    latitude:42.908
                });
                pointList.push({
                    name:"延河路火情",
                    contacts:"王建军",
                    phone:"13664407655",
                    longitude:129.46,
                    latitude:42.888
                });
                pointList.push({
                    name:"兴安村火情",
                    contacts:"蔡雨虹",
                    phone:"15754320117",
                    longitude:129.496,
                    latitude:42.935
                });
                pointList.push({
                    name:"小白石村火情",
                    contacts:"吕国琴",
                    phone:"15044076332",
                    longitude:129.426,
                    latitude:42.929
                });
                pointList.push({
                    name:"上东沟火情",
                    contacts:"吴明月",
                    phone:"15044076332",
                    longitude:129.396,
                    latitude:42.935
                });

                var markersList = []
                for (let i = 0; i < pointList.length; i++) {
                    let markersMap = {
                        lng: 124.59,
                        lat: 43.02,
                        icon: 'marker',
                        bindPopupHtml: '',
                        click: 'abc',
                        parameter: pointList[i],
                        keepBindPopup: false,
                        isAggregation: false
                    }
                    markersMap.icon = 'sj-icon-map-' + type.replaceAll("_", "-");
                    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>' +
                        '</div>'
                    markersList.push(markersMap)
                    // let icon = new window.L.Icon({
                    //     iconUrl: iconList[markersList[i].icon],
                    //     iconSize: [48, 48],
                    //     iconAnchor: [24, 40],
                    //     popupAnchor: [-3, -40],
                    //     shadowSize: [41, 41]
                    // })
                    // let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
                    //     icon: markersMap.icon
                    // })
                    // markerClick.on('click', function() {
                    //     let clickName = markersList[i].click
                    //     this.$emit(clickName, markersList[i].parameter)
                    // })
                }
                setTimeout(() => {
                    // this.$refs.supermap.setMarkers(markersList);
                    this.$refs.supermap.setMarkersByType(markersList, type);
                }, 3000)
            },

            //避难场所 落点
            eventPoints_byType(checkList){
                console.log("checkList=",checkList)
                this.$refs.supermap.clearM(false);
                for (let i = 0; i < checkList.length; i++) {
                    let type = checkList[i];
                    if(type == "shelter"){
                        this.eventPoints_shelter(type);
                    }else if(type == "rescueSupplies"){
                        this.eventPoints_rescueSupplies(type);
                    }else if(type == "rescueTeam"){
                        this.eventPoints_rescueTeam(type);
                    }else if(type == "camera"){
                        this.eventPoints_camera(type);
                    }
                }
            },
            //避难场所 落点
            eventPoints_shelter(type){
                console.log(666)
                let pointList = [];
                pointList.push({
                    name:"延吉体育场避难所",
                    contacts:"于尽力",
                    phone:"13844388900",
                    longitude:129.427918,
                    latitude:42.897634
                });
                pointList.push({
                    name:"延吉市新兴街道",
                    contacts:"周围",
                    phone:"15943366512",
                    longitude:129.503563,
                    latitude:42.93300298
                });
                pointList.push({
                    name:"延吉市新兴街道民昌社区",
                    contacts:"高博",
                    phone:"15834925550",
                    longitude:129.507597,
                    latitude:42.9135427
                });
                pointList.push({
                    name:"帽儿山避难所",
                    contacts:"刘星",
                    phone:"18804332888",
                    longitude:129.485738,
                    latitude:42.857949
                });
                pointList.push({
                    name:"阿里郎广场避难所",
                    contacts:"高博",
                    phone:"15834925550",
                    longitude:129.476863,
                    latitude:42.909891
                });

                var 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 = 'sj-icon-map-' + type.replaceAll("_", "-");
                    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>' +
                        '</div>'
                    markersList.push(markersMap)
                    // let icon = new window.L.Icon({
                    //     iconUrl: iconList[markersList[i].icon],
                    //     iconSize: [48, 48],
                    //     iconAnchor: [24, 40],
                    //     popupAnchor: [-3, -40],
                    //     shadowSize: [41, 41]
                    // })
                    // let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
                    //     icon: markersMap.icon
                    // })
                    // markerClick.on('click', function() {
                    //     let clickName = markersList[i].click
                    //     this.$emit(clickName, markersList[i].parameter)
                    // })
                }
                setTimeout(() => {
                    // this.$refs.supermap.clearM(false);
                    this.$refs.supermap.setMarkers(markersList);
                    // this.$refs.supermap.setMarkersByType(markersList, type);
                }, 500)
            },

            //救援物资库 落点
            eventPoints_rescueSupplies(type){
                console.log(777)
                let pointList = [];
                pointList.push({
                    name:"白石村救援物资库",
                    contacts:"张洁玲",
                    phone:"13500805931",
                    longitude:129.406,
                    latitude:42.898
                });
                pointList.push({
                    name:"延河路救援物资库",
                    contacts:"王建军",
                    phone:"13664407655",
                    longitude:129.45,
                    latitude:42.878
                });
                pointList.push({
                    name:"兴安村救援物资库",
                    contacts:"蔡雨虹",
                    phone:"15754320117",
                    longitude:129.486,
                    latitude:42.925
                });
                pointList.push({
                    name:"小白石村救援物资库",
                    contacts:"吕国琴",
                    phone:"15044076332",
                    longitude:129.416,
                    latitude:42.919
                });
                pointList.push({
                    name:"上东沟救援物资库",
                    contacts:"吴明月",
                    phone:"15044076332",
                    longitude:129.386,
                    latitude:42.925
                });

                var 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 = 'sj-icon-map-' + type.replaceAll("_", "-");
                    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>' +
                        '</div>'
                    markersList.push(markersMap)
                    // let icon = new window.L.Icon({
                    //     iconUrl: iconList[markersList[i].icon],
                    //     iconSize: [48, 48],
                    //     iconAnchor: [24, 40],
                    //     popupAnchor: [-3, -40],
                    //     shadowSize: [41, 41]
                    // })
                    // let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
                    //     icon: markersMap.icon
                    // })
                    // markerClick.on('click', function() {
                    //     let clickName = markersList[i].click
                    //     this.$emit(clickName, markersList[i].parameter)
                    // })
                }
                setTimeout(() => {
                    // this.$refs.supermap.clearM(false);
                    this.$refs.supermap.setMarkers(markersList);
                    // this.$refs.supermap.setMarkersByType(markersList, type);
                }, 500)
            },

            //救援队伍 落点
            eventPoints_rescueTeam(type){
                console.log(888)
                let pointList = [];
                pointList.push({
                    name:"白石村救援队伍",
                    contacts:"张洁玲",
                    phone:"13500805931",
                    longitude:129.426,
                    latitude:42.898
                });
                pointList.push({
                    name:"延河路救援队伍",
                    contacts:"王建军",
                    phone:"13664407655",
                    longitude:129.47,
                    latitude:42.878
                });
                pointList.push({
                    name:"兴安村救援队伍",
                    contacts:"蔡雨虹",
                    phone:"15754320117",
                    longitude:129.506,
                    latitude:42.925
                });
                pointList.push({
                    name:"小白石村救援队伍",
                    contacts:"吕国琴",
                    phone:"15044076332",
                    longitude:129.436,
                    latitude:42.919
                });
                pointList.push({
                    name:"上东沟救援队伍",
                    contacts:"吴明月",
                    phone:"15044076332",
                    longitude:129.406,
                    latitude:42.925
                });

                var 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 = 'sj-icon-map-' + type.replaceAll("_", "-");
                    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>' +
                        '</div>'
                    markersList.push(markersMap)
                    // let icon = new window.L.Icon({
                    //     iconUrl: iconList[markersList[i].icon],
                    //     iconSize: [48, 48],
                    //     iconAnchor: [24, 40],
                    //     popupAnchor: [-3, -40],
                    //     shadowSize: [41, 41]
                    // })
                    // let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
                    //     icon: markersMap.icon
                    // })
                    // markerClick.on('click', function() {
                    //     let clickName = markersList[i].click
                    //     this.$emit(clickName, markersList[i].parameter)
                    // })
                }
                setTimeout(() => {
                    // this.$refs.supermap.clearM(false);
                    this.$refs.supermap.setMarkers(markersList);
                    // this.$refs.supermap.setMarkersByType(markersList, type);
                }, 500)
            },

            //视联网 落点
            eventPoints_camera(type){
                let pointList = [];
                pointList.push({
                    name:"延吉龙源村",
                    contacts:"张洁玲",
                    phone:"13500805931",
                    longitude:129.465361,
                    latitude:42.955267,
                  parameter:'22010400001320000001'
                });
                pointList.push({
                    name:"延吉台岩",
                    contacts:"王建军",
                    phone:"13664407655",
                    longitude:129.409443,
                    latitude:	42.996666,
                  parameter:'22010400001320000002'
                });
                pointList.push({
                    name:"延吉新依兰镇政府重保",
                    contacts:"蔡雨虹",
                    phone:"15754320117",
                    longitude:129.479842,
                    latitude:42.981544,
                  parameter:'22010400001320000003'
                });
                pointList.push({
                    name:"延吉利民",
                    contacts:"吕国琴",
                    phone:"15044076332",
                    longitude:129.487777,
                    latitude:42.998889,
                  parameter:'22010400001320000004'
                });
                pointList.push({
                    name:"延吉梦都美",
                    contacts:"吴明月",
                    phone:"15044076332",
                    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++) {
                    let markersMap = {
                        lng: 124.59,
                        lat: 43.02,
                        icon: 'marker',
                        bindPopupHtml: '',
                        click: 'preview',
                        parameter: pointList[i].parameter,
                        keepBindPopup: false,
                        isAggregation: false
                    }
                    markersMap.icon = 'sj-icon-map-' + type.replaceAll("_", "-");
                    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>' +
                        '</div>'
                    markersList.push(markersMap)
                    // let icon = new window.L.Icon({
                    //     iconUrl: iconList[markersList[i].icon],
                    //     iconSize: [48, 48],
                    //     iconAnchor: [24, 40],
                    //     popupAnchor: [-3, -40],
                    //     shadowSize: [41, 41]
                    // })
                    // let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
                    //     icon: markersMap.icon
                    // })
                    // markerClick.on('click', function() {
                    //     let clickName = markersList[i].click
                    //     this.$emit(clickName, markersList[i].parameter)
                    // })
                }
                setTimeout(() => {
                    // this.$refs.supermap.clearM(false);
                    this.$refs.supermap.setMarkers(markersList);
                    // this.$refs.supermap.setMarkersByType(markersList, type);
                }, 500)
            },


            /** 预览按钮操作 */
            preview(cameraParam) {
              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.realTimeVideoDialog([cameraParam])
                    }
                  })
                }
              })
            },
          realTimeVideoDialog(cameraParams) {
            // 调用弹窗实时播放接口
            if (!this.isLogin) {
              this.$Message.info("正在登陆客户端，请稍等......");
              return false;
            }
            this.ws.openVideo(cameraParams);
          },
            /* 电视墙替换开始 */
            showTVWall(channelCode, channelName) {
                let tvListJson = [
                    {
                        "switchTab": "2",
                        "treeLabels": [
                            {
                                "id": null,
                                "labelCode": "999",
                                "labelName": "电视墙",
                                "cameraType": null,
                                "parentLabelCode": ""
                            },
                            {
                                "id": "spcamera00010",
                                "labelCode": channelCode,
                                "labelName": channelName,
                                "cameraType": "1",
                                "parentLabelCode": "999"
                            }
                        ],
                        "labelChannels": [
                            {
                                "labelCode": channelCode,
                                "channelDates": [
                                    {
                                        "channelCode": channelCode,
                                        "channelName": channelName,
                                        "channelSn": null,
                                        "cameraType": "1",
                                        "online": "1",
                                        "cameraCode": "1"
                                    }
                                ]
                            }
                        ]
                    }
                ]
                this.$refs.TVWall.showTVWall(tvListJson, [{
                    "channelId": channelCode
                }]);
                this.$refs.bottomMenu.showMeasure = false;
                this.$refs.bottomMenu.showChild = false;
                this.$refs.bottomMenu.showBanChild = false;
                this.$refs.bottomMenu.showChangChild = false;
            },
            abc(point){
                this.$refs.Jsmsdialog.outerVisible = true
                this.$refs.Jsmsdialog.setPoint(point);
                console.log('1111')
            }
        },
      }
      </script>
      <style>
          .map{
              position: fixed;
              z-index: 1;
              width: 100%;
              height: 100vh;
              left: 0px;
          }
          .map img{
              width: 100%;
              height: 100%;
          }
          .yj-topnav-div{
              position: fixed;
              top:85px;
              right: 400px;
              width: 60px;
              height: 60px;
              /*background: url("../assets/images/yj-topnavbg.png") no-repeat center;*/
              background-size: 100% 100%;
              border-radius: 50%;
              z-index: 99;
          }
          .yj-topnav-div i{
              color: #fff;
              font-size: 40px;
              line-height: 57px;
              cursor: pointer;

          }
          .yj-topnav{
              position: fixed;
              top:85px;
              transform: translateX(-50%);
              z-index: 2;
              display: flex;
              flex-direction: row;
              /*background: url("../assets/images/yj-topnavbg.png") no-repeat center;*/
              background-size: 100% 100%;
              padding: 12px 20px;
              left: 50%;
              align-items: center;
              font-size: 12px;
              color: #fff;
          }
          .yj-topnav a{
              display: block;
              /*background:#08388c;*/
              background: url("../assets/images/yj-topnavbg1-on.png") no-repeat center;
              background-size: 100% 100%;
              color: #fff;
              /*padding: 5px 15px;*/
              /*border-radius: 50px;*/
              margin-right: 15px;
              font-size: 14px;
              width: 120px;
              height: 42px;
              line-height: 42px;
          }
          .yj-topnav a:hover{
              color: #0bf3f7;
          }
          .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>
