yj_vue3/src/views/index.vue

<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"
          @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><i class="iconfont yj-icon-nav"></i>普查结果</a>
                <a><i class="iconfont yj-icon-zhiban"></i>值班信息</a>
            </div>
        </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' //超图

      export default {
        name: 'App',
          data() {
              return {
                  mapToolShowBH:false,
                  checkList: []
              }
          },
        components: {
            Header,
            Leftnav,
            Rightnav,
            Btmbutton,
            Jsmsdialog,
            supermap
        },
        created() {
            this.eventPoints("event_point");
        },
        methods: {
            //事件落点
            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: true
                    }
                    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(true);
                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:"13500805931",
                    longitude:129.416,
                    latitude:42.918
                });
                pointList.push({
                    name:"延河路避难所",
                    contacts:"王建军",
                    phone:"13664407655",
                    longitude:129.47,
                    latitude:42.898
                });
                pointList.push({
                    name:"兴安村避难所",
                    contacts:"蔡雨虹",
                    phone:"15754320117",
                    longitude:129.506,
                    latitude:42.945
                });
                pointList.push({
                    name:"小白石村避难所",
                    contacts:"吕国琴",
                    phone:"15044076332",
                    longitude:129.436,
                    latitude:42.939
                });
                pointList.push({
                    name:"上东沟避难所",
                    contacts:"吴明月",
                    phone:"15044076332",
                    longitude:129.406,
                    latitude:42.945
                });

                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: true
                    }
                    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: 'abc',
                        parameter: pointList[i],
                        keepBindPopup: false,
                        isAggregation: true
                    }
                    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: 'abc',
                        parameter: pointList[i],
                        keepBindPopup: false,
                        isAggregation: true
                    }
                    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){
                console.log(999)
                let pointList = [];
                pointList.push({
                    name:"白石村摄像头",
                    contacts:"张洁玲",
                    phone:"13500805931",
                    longitude:129.406,
                    latitude:42.918
                });
                pointList.push({
                    name:"延河路摄像头",
                    contacts:"王建军",
                    phone:"13664407655",
                    longitude:129.45,
                    latitude:42.898
                });
                pointList.push({
                    name:"兴安村摄像头",
                    contacts:"蔡雨虹",
                    phone:"15754320117",
                    longitude:129.486,
                    latitude:42.945
                });
                pointList.push({
                    name:"小白石村摄像头",
                    contacts:"吕国琴",
                    phone:"15044076332",
                    longitude:129.416,
                    latitude:42.939
                });
                pointList.push({
                    name:"上东沟摄像头",
                    contacts:"吴明月",
                    phone:"15044076332",
                    longitude:129.386,
                    latitude:42.945
                });

                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: true
                    }
                    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.showTVWall(cameraParam.code, cameraParam.name);
            },
            /* 电视墙替换开始 */
            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;
          }
      </style>