kdyjs_ui/src/views/HomeView.vue

<template>
  <div class="home">
    <Header></Header>
    <Map />

    <div :class="{ 'yjdp-btn': true, isActive: yjdpShow }" @click="addyjdp" v-if="!isMobile">沿街店铺</div>
    <div :class="{ 'kzdp-btn': true, isActive: kzdpShow }" @click="addkzdp" v-if="!isMobile">空置店铺</div>
    <div class="yhfk-btn" @click="openYHFK" v-if="!isMobile">用户反馈</div>
    <div :class="{ 'yjdp-btn-mb': true, isActive: yjdpShow }" @click="addyjdp" v-if="isMobile">沿街店铺</div>
    <div :class="{ 'kzdp-btn-mb': true, isActive: kzdpShow }" @click="addkzdp" v-if="isMobile">空置店铺</div>
    <div class="yhfk-btn-mb" @click="openYHFK" v-if="isMobile">用户反馈</div>
    <!-- 智小青 -->
    <div class="zxq-btn" @click="openZXQ" v-if="!isMobile"></div>
    <div class="zxq-btn-mb" @click="openZXQ" v-if="isMobile"></div>


    <div :class="isMobile == true ? zxqIframeContainer:'zxqIframeContainer'" v-if="isShowZXQ">
      <!-- <div class="wind" @click="tiggerWind" v-if="isMobile">口</div> -->
      <div class="close" @click="closeZXQ">×</div>
      <iframe :src="zxqUrl" frameborder="0" ></iframe>
    </div>

    <!-- <div class="control3D">
      <div class="label">三维模型</div>
      <el-switch v-model="isShow3D" size="large" active-text @change="changeModel" />
    </div> -->
    <div class="changeBaseMap" v-if="!isMobile">
      <div class="container">
        <div v-for="(item, index) in baseMapArr" :key="index" @click="changeMap(item)" >
          <div :class="{ 'content': true, 'active': item.isActive }">
            <div class="label">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="changeBaseMap-mb" v-if="isMobile" @click="changeBaseMapType()">
      <div>{{baseMap}}</div>
    </div>

    <div class="heatmapContorl">
      <div :class="{ 'ckzb-btn': true, isActive: heatmapPanelShow }" @click="handleOpenHeatmapPanelShow" v-if="!isMobile">热力图层</div>
      <div :class="{ 'ckzb-btn-mb': true, isActive: heatmapPanelShow }" @click="handleOpenHeatmapPanelShow" v-if="isMobile">热力图层</div>
      <div class="heatmapPanel" v-show="heatmapPanelShow">
        <el-scrollbar>
          <ul>
            <li v-for="(item, index) in heatmapList" :key="index">
              <el-checkbox v-model="item.isAdd" :label="item.name" size="large"
                @change="judgeLayerType($event, item)" />
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>

    <div :class="isMobile == true ? 'heatmapLegend-mb':'heatmapLegend'" v-show="heatmapPanelShow">
    </div>

    <div :class="{ 'zxq-ckzb-btn': true, isActive: isActiveZXQ }" @click="isActiveZXQ">智小青</div>

    <div class="layerContorl">
      <div :class="{ 'ckzb-btn': true, isActive: layerPanelShow }" @click="handleOpenLayerPanelShow" v-if="!isMobile">查看周边</div>
      <div :class="{ 'ckzb-btn-mb': true, isActive: layerPanelShow }" @click="handleOpenLayerPanelShow" v-if="isMobile">查看周边</div>
      <div :class="isMobile == true ? 'layerPanel-mb':'layerPanel'" v-show="layerPanelShow">
        <el-scrollbar>
          <ul>
            <li v-for="(item, index) in layerList" :key="index">
              <el-checkbox v-model="item.isAdd" :label="item.name" size="large"
                @change="judgeLayerType($event, item)" />
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>

    <KDYJS ref="kdyjs" :message="parentMessage"></KDYJS>

    <div class="tips">试运行阶段服务范围：夏阳街道</div>
    <div class="yjdpInfoDialog" v-show="yjdpInfoDialogShow">
      <div class="close" @click="closeYJDP">×</div>
      <div class="content" v-if="nowPoint != null">
        <el-scrollbar>
          <div class="item">店铺名称: {{ nowPoint.properties["店铺名称"] }}</div>
          <div class="item">店铺类型: {{ nowPoint.properties["店铺类型"] }}</div>
          <div class="item">街镇: {{ nowPoint.properties["街镇"] }}</div>
          <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div>
        </el-scrollbar>
      </div>
    </div>
    <div class="kzdpInfoDialog" v-show="kzdpInfoDialogShow">
      <div class="close" @click="closeKZDP">×</div>
      <div class="content" v-if="nowPoint != null">
        <el-scrollbar>
          <div class="item">店铺名称: {{ nowPoint.properties["店铺名称"] }}</div>
          <div class="item">店铺类型: {{ nowPoint.properties["店铺类型"] }}</div>
          <div class="item">街镇: {{ nowPoint.properties["街镇"] }}</div>
          <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div>
        </el-scrollbar>
      </div>
    </div>
    <!-- 此处弹框样式写在App.vue中 -->
    <el-dialog class="yhfkInfoDialog" title="用户反馈" header-class="yhfkInfoDialogHeader"
      footer-class="yhfkInfoDialogfooter" v-model="yhfkInfoDialogShow" :close="closeKZDP" :close-on-click-modal="false"
      :append-to-body="true" :width="isMobile == true ? 'auto':600">
      <el-form ref="yhfkInfoDialogRef" :model="yhfkForm" label-width="auto" :rules="rules" style="max-width: 600px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="yhfkForm.name" />
        </el-form-item>
        <el-form-item label="联系方式" prop="tele">
          <el-input v-model="yhfkForm.tele" />
        </el-form-item>
        <el-form-item label="问题描述" prop="desc">
          <el-input v-model="yhfkForm.desc" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeYHFK">取消</el-button>
          <el-button type="primary" @click="yhfkSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>


import { toRaw, ref, onMounted, onBeforeUnmount } from "vue";

import { ElMessage } from 'element-plus'

import Map from "@/components/Map.vue";
import Header from "@/components/Header.vue";

import KDYJS from "@/views/KDYJS.vue";
import UTIL from '@/utils/util'

export default {
  name: "HomeView",
  components: {
    Map,
    Header,
    KDYJS
  },
  data() {
    let arr = webConfig.layerList;
    arr = arr.map(function (item, index) {
      item.id = index;
      item.isAdd = false
      return item
    })
    let arrHeatmap = webConfig.heatmapList;
    arrHeatmap = arrHeatmap.map(function (item, index) {
      item.id = index;
      item.isAdd = false
      return item
    })
    return {
      isMobile:false,
      baseMap:'影像图层',
      parentMessage:'',
      zxqIframeContainer:'zxqIframeContainer-mb-mx',

      isShow3D: false,
      baseMapArr: [
        {
          type: "yxt",
          label: "影像图层",
          isActive: false
        },
        {
          type: "xht",
          label: "线划图层",
          isActive: true
        }
      ],
      yjdpShow: false,
      kzdpShow: false,
      mapHandle: null,
      yjdpInfoDialogShow: false,
      kzdpInfoDialogShow: false,
      yhfkInfoDialogShow: false,
      nowPoint: null,

      layerPanelShow: false,
      layerRoot: webConfig.GEOSERVER_URL_WMS,
      layerList: arr,
      wmslayer: {},

      heatmapPanelShow: false,
      heatmapList: arrHeatmap,
      heatmapLayer: {},

      yhfkForm: {
        name: "",
        tele: "",
        desc: ""
      },
      rules: {
        name: [
          { required: true, message: '请填写姓名', trigger: 'blur' },
        ],
        tele: [
          { required: true, message: '请填写联系方式', trigger: 'blur' },
        ],
        desc: [
          { required: true, message: '请填写问题描述', trigger: 'blur' },
        ],
      },
      isShowZXQ: false,
      zxqUrl: webConfig.zxqUrl
    };
  },
  mounted() {
    let that = this;
    that.isMobile = UTIL.terminalType()
    this.$refs.kdyjs.open();
    // 监听message事件
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      // // 确保消息来自预期的源
      // // 如果需要更严格的安全性，请验证event.origin
      // if (event.source !== window.parent) {
      //   return;
      // }

      // 处理接收到的消息数据
      const data = event.data;
      // const imgUrl = data.imgUrl;
      // const otherParam = data.otherParam;

      // 在Vue父组件中处理数据
      // ...
    },
    changeModel(status) {
      mapTriggerEvent("changeModel", {
        status: status
      });
    },
    changeMap(item) {
      this.baseMapArr = this.baseMapArr.map(function (item) {
        item.isActive = false;
        return item;
      });
      item.isActive = true;
      switch (item.type) {
        case "yxt":
          mapTriggerEvent("changeBaseMap", { type: "yxt" });
          break;
        case "xht":
          mapTriggerEvent("changeBaseMap", { type: "xht" });
          break;
      }
    },
    changeBaseMapType(){
      let that = this;
      
      if(that.baseMap == '影像图层'){
        that.baseMap = '线划图层'
        mapTriggerEvent("changeBaseMap", { type: "yxt" });
      }else{
        that.baseMap = '影像图层'
        mapTriggerEvent("changeBaseMap", { type: "xht" });
      }
    },
    // 打开用户反馈
    openYHFK() {
      this.yhfkInfoDialogShow = true
    },
    // 关闭用户反馈
    closeYHFK() {
      this.yhfkInfoDialogShow = false;
      this.yhfkForm = {
        name: "",
        tele: "",
        desc: ""
      }
    },
    // 提交用户反馈
    yhfkSubmit() {
      let that = this;
      this.$refs.yhfkInfoDialogRef.validate((valid, fields) => {
        if (valid) {
          let formData = new FormData();
          let obj = {
            "title": that.yhfkForm.tele,
            "content": that.yhfkForm.name,
            // "c_name": that.yhfkForm.name,
            // "c_tele": that.yhfkForm.tele,
            // "c_describe": that.yhfkForm.desc
          }
          obj[webConfig.userFeedback.name] = that.yhfkForm.name
          obj[webConfig.userFeedback.tele] = that.yhfkForm.tele
          obj[webConfig.userFeedback.desc] = that.yhfkForm.desc

          formData.append("content", JSON.stringify(obj))
          formData.append("columnId", webConfig.userFeedback.columnId)
          formData.append("modelId", webConfig.userFeedback.modelId)
          // 使用 fetch API 提交数据
          fetch(webConfig.DMS_URL + "/content/addContent", {
            method: 'POST', // 或者 'PUT', 'DELETE', 等等
            body: formData, // 直接传递 FormData 对象
            headers: {
              // 如果需要设置 Content-Type，通常不需要，因为 fetch 会自动设置，但如果需要可以手动设置
              // 'Content-Type': 'application/x-www-form-urlencoded'
              token: localStorage.getItem(webConfig.AUTH_USER_TOKEN_KEY)
            }
          })
            .then(response => response.json()) // 假设服务器返回 JSON 数据
            .then(data => {
              // 处理返回的数据，例如更新页面等
              if (data.code == 200) {
                ElMessage({
                  message: '您的反馈已提交，后续我们将与您联系确认问题，感谢您的反馈！',
                  type: 'success',
                  plain: true,
                })
                setTimeout(() => {
                  that.yhfkInfoDialogShow = false
                }, 500);
              }
            })
            .catch((error) => {
              // console.error('Error:', error);
            });
        } else {
          ElMessage({
            message: '请您完善反馈的问题后再尝试提交！',
            type: 'warning',
            plain: true,
          })
        }
      })
    },
    // 打开智小青
    openZXQ() {
      this.isShowZXQ = true
    },
    tiggerWind(){
      if(this.zxqIframeContainer == 'zxqIframeContainer-mb'){
        this.zxqIframeContainer = 'zxqIframeContainer-mb-mx'
      }else{
        this.zxqIframeContainer = 'zxqIframeContainer-mb'
      }
      
    },
    // 关闭智小青
    closeZXQ() {
      this.zxqIframeContainer ='zxqIframeContainer-mb-mx'
      this.isShowZXQ = false
    },
    // 沿街店铺
    addyjdp() {
      let that = this;
      this.yjdpShow = !this.yjdpShow
      if (this.yjdpShow) {
        // 添加
        fetch("./static/data/沿街店铺.geojson")
          .then(response => response.json())
          .then(function (result) {
            that.pointYJDPArr = result.features.map(function (pointInfo) {
              return viewer.entities.add(new SkyScenery.Entity({
                position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]),
                type: "yjdp",
                info: {
                  coor: [pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]],
                  properties: pointInfo.properties
                },
                billboard: {
                  width: 48,
                  height: 48,
                  image: "./static/image/point-dp.png",
                  scale: 1,
                  horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
                  verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
                }
              }));
            })
          })
      } else {
        // 删除
        this.pointYJDPArr.map(function (point) {
          viewer.entities.remove(point)
        })
        this.pointYJDPArr = []
        this.yjdpInfoDialogShow = false;
        this.nowPoint = null
      }
      this.pointTCHandle();
    },
    closeYJDP() {
      this.yjdpInfoDialogShow = false;
      this.nowPoint = null
    },
    // 空置店铺
    addkzdp() {
      let that = this;
      this.kzdpShow = !this.kzdpShow
      if (this.kzdpShow) {
        // 添加
        fetch("./static/data/沿街店铺-空置.geojson")
          .then(response => response.json())
          .then(function (result) {
            that.pointKZDPArr = result.features.map(function (pointInfo) {
              return viewer.entities.add(new SkyScenery.Entity({
                position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1], 0.5),
                type: "kzdp",
                info: {
                  coor: [pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]],
                  properties: pointInfo.properties
                },
                billboard: {
                  width: 48,
                  height: 48,
                  image: "./static/image/kzdp.png",
                  scale: 1,
                  horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
                  verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
                }
              }));
            })
          })
      } else {
        // 删除
        this.pointKZDPArr.map(function (point) {
          viewer.entities.remove(point)
        })
        this.pointKZDPArr = []
        this.kzdpInfoDialogShow = false;
        this.nowPoint = null
      }
      this.pointTCHandle();
    },
    closeKZDP() {
      this.kzdpInfoDialogShow = false;
      this.nowPoint = null
    },
    // 点击事件绑定
    pointTCHandle() {
      let that = this;
      if (!this.mapHandle) {
        this.mapHandle = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas, this);
        this.mapHandle.setInputAction(function (movement) {
          // 获取鼠标位置
          const pickedObject = viewer.scene.pick(movement.position);
          if (SkyScenery.defined(pickedObject) && SkyScenery.defined(pickedObject.id)) {
            const entity = pickedObject.id;
            if (entity.type == "yjdp") {
              /**
                * 根据拾取到的点位的经纬度 转成 屏幕坐标
                * 添加文字描述
                */
              // let xy = viewer.scene.cartesianToCanvasCoordinates(entity.position.getValue())
              // "街镇": "夏阳街道",
              // "网格编码": "31011800101",
              // "居委": "祥龙居委会",
              // "地理编码": "310118001005",
              // "地址": "浦仓路437号",
              // "城市": "上海市",
              // "区县": "青浦区",
              // "网格名称": "第一责任网格",
              // "简称": "31011800101"
              that.yjdpInfoDialogShow = true
              that.nowPoint = entity.info;
              that.nowPoint["type"] = "yjdp";
              let xy = that.lonlatConvertToScreenXY(entity.info.coor)
              document.querySelector(".yjdpInfoDialog").style.top = (xy.y - 250) + "px";
              document.querySelector(".yjdpInfoDialog").style.left = (xy.x - 150) + "px";
              // document.querySelector("#yjdpInfoDialog")
              // that.removePanel();
              // that.addPointDivLabel(xy, entity.info.name)
            } else if (entity.type == "kzdp") {
              that.kzdpInfoDialogShow = true
              that.nowPoint = entity.info;
              that.nowPoint["type"] = "kzdp";
              let xy = that.lonlatConvertToScreenXY(entity.info.coor)
              document.querySelector(".kzdpInfoDialog").style.top = (xy.y - 250) + "px";
              document.querySelector(".kzdpInfoDialog").style.left = (xy.x - 150) + "px";
            }
            that.$refs.kdyjs.clickPointJGTL({
              lon: entity.info.coor[0],
              lat: entity.info.coor[1]
            })
            that.parentMessage = that.nowPoint
          } else {
            // console.log('未拾取到实体');
            /**
             * 删除文字描述
             */
            // that.removePanel();
          }
        }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
        viewer.scene.postRender.addEventListener(this.updatePosition, this);
      } else {
        if (this.yjdpShow == false && this.kzdpShow == false) {
          toRaw(this.mapHandle).destroy();
          this.mapHandle = null
          viewer.scene.postRender.removeEventListener(this.updatePosition, this);
        }
      }
    },
    // 位置更新
    updatePosition() {
      try {
        if (this.nowPoint != null) {
          const obj = toRaw(this.nowPoint);
          let xy = this.lonlatConvertToScreenXY(obj.coor)
          if (!xy) {
            if (obj.type == "yjdp") {
              document.querySelector(".yjdpInfoDialog").style.top = "-9999px";
              document.querySelector(".yjdpInfoDialog").style.left = "-9999px";
            } else if (obj.type == "kzdp") {
              document.querySelector(".kzdpInfoDialog").style.top = "-9999px";
              document.querySelector(".kzdpInfoDialog").style.left = "-9999px";
            }

          } else {
            if (obj.type == "yjdp") {
              document.querySelector(".yjdpInfoDialog").style.top = (xy.y - 250) + "px";
              document.querySelector(".yjdpInfoDialog").style.left = (xy.x - 150) + "px";
            } else if (obj.type == "kzdp") {
              document.querySelector(".kzdpInfoDialog").style.top = (xy.y - 250) + "px";
              document.querySelector(".kzdpInfoDialog").style.left = (xy.x - 150) + "px";
            }

          }
        }
      } catch (error) {
        // debugger
      }
    },
    // 经纬度转屏幕坐标
    lonlatConvertToScreenXY(lonlat) {
      // 定义经纬度
      var longitude = SkyScenery.Math.toRadians(lonlat[0]); // 例如：东经116.391度
      var latitude = SkyScenery.Math.toRadians(lonlat[1]); // 例如：北纬39.907度
      var height = 0; // 高度，通常在地表为0
      // 将经纬度转换为笛卡尔坐标
      // var cartographic = SkyScenery.Cartographic.fromDegrees(longitude, latitude, height);
      var cartesian = SkyScenery.Cartesian3.fromRadians(longitude, latitude, height, viewer.scene.globe.ellipsoid);
      // 将笛卡尔坐标转换为窗口坐标
      var canvasCoordinates = viewer.scene.cartesianToCanvasCoordinates(cartesian);
      return canvasCoordinates
    },

    // 热力图列表展示
    handleOpenHeatmapPanelShow() {
      this.heatmapPanelShow = !toRaw(this.heatmapPanelShow)
      this.layerPanelShow = false
    },
    // 图层列表展示
    handleOpenLayerPanelShow() {
      this.layerPanelShow = !toRaw(this.layerPanelShow)
      this.heatmapPanelShow = false
    },

    // 区分图层类型后按照不同类型加载
    judgeLayerType(judge, params) {
      if (params.type == "heatmap") {
        this.addHeatMapLayer(judge, params);
      } else {
        this.addWMSLayer(judge, params);
      }
    },
    // 加载wms服务
    addWMSLayer(judge, params) {
      if (judge) {
        debugger
        console.log(1111);
        
        let layer = viewer.imageryLayers.addImageryProvider(
          new SkyScenery.WebMapServiceImageryProvider({
            url: this.layerRoot,
            layers: params.layers,
            parameters: {
              TRANSPARENT: true,
              format: "image/png"
            }
          })
        )
        this.wmslayer[params.name] = layer;
      } else {
        viewer.imageryLayers.remove(toRaw(this.wmslayer[params.name]))
        delete this.wmslayer[params.name];
      }
    },
    // 加载热力图
    addHeatMapLayer(judge, params) {
      let that = this;
      if (judge) {
        fetch(params.url)
          .then(response => response.json())
          .then(function (result) {
            let arr = result.features.map(function (item) {
              let coor = item.geometry.coordinates
              return {
                x: coor[0],
                y: coor[1],
                value: 1
              }
            })
            that.heatmapLayer[params.name] = new SkySceneryHeatmap(viewer, {
              data: arr,
              flyTo: false,
              height: 0,
              heatStyle: {
                // blur: 0.7,
                // gradient: { 0.3: 'blue', 0.6: 'green', 0.8: 'yellow', 0.9: 'red' },
                // maxOpacity: 0.9,
                // minOpacity: 0.3,
                radius: 1,
                maxOpacity: 0.6,
                minOpacity: 0,
                blur: 0.85,
                gradient: {
                  0.4: 'blue',
                  0.5: 'cyan',
                  0.6: 'green',
                  0.7: 'yellow',
                  0.8: 'orange',
                  0.9: 'red'
                }
              },
            }, SkyScenery)
          })
      } else {
        if (Object.keys(toRaw(this.heatmapLayer)).length > 0) {
          this.heatmapLayer[params.name].destroy();
          delete this.heatmapLayer[params.name]
        }
      }
    }
  }
};

</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  user-select: none;
  /* Chrome, Opera, Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -khtml-user-select: none;
  /* Konqueror/Safari */

  .control3D {
    height: 40px;
    position: absolute;
    bottom: 155px;
    right: 20px;
    background: #01346f99;
    border: 1px solid #ffffff;
    padding: 0px 10px;
    border-radius: 10px;
    color: #ffffff;

    .label {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      margin-right: 5px;
    }

    .el-switch {
      vertical-align: top;
    }
  }

  .changeBaseMap {
    position: absolute;
    bottom: 50px;
    right: 20px;
    background: #01346f99;
    padding: 0px 10px;
    color: #ffffff;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 10px;
    z-index: 9;

    .container {
      position: relative;
      height: 80px;
      width: 122px;
      animation: animation-wdith-back 0.5s ease-in-out 1;

      div .content {
        height: 80px;
        width: 100px;
        border-radius: 10px;
        border: 1px solid #ffffff;
      }

      div .content.active {
        border-color: #00bbff;

        .label {
          color: #00bbff;
        }
      }

      div .content:hover {
        border-color: #00bbff;

        .label {
          color: #00bbff;
        }
      }

      >div {
        width: 100px;
        height: 80px;
        position: absolute;
        // border: 1px solid #ffffff;
        border-radius: 10px;

        .label {
          width: 100%;
          height: 24px;
          position: absolute;
          bottom: 0px;
          text-align: center;
          font-size: 16px;
          background: #00000080;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }

      >div:nth-child(1) {
        z-index: 1;
        right: 20px;
        background: url(~@/assets/images/base2.png) no-repeat center center/100% 100%;
        animation: animation-right-back 0.5s ease-in-out 1;
      }

      >div:nth-child(2) {
        z-index: 2;
        right: 0px;
        background: url(~@/assets/images/base1.png) no-repeat center center/100% 100%;
      }
    }

    &:hover {
      .container {
        width: 220px;
        animation: animation-wdith 0.5s ease-in-out 1;

        >div:nth-child(1) {
          right: 120px;
          animation: animation-right 0.5s ease-in-out 1;
        }
      }
    }
  }
    .changeBaseMap-mb {
      position: absolute;
      bottom: 50px;
      z-index: 9;
      right: 20px;
      width: 30px;
      font-size: 12px;
      border-radius: 10px;
      color: #ffffff;
      cursor: pointer;
      background: #01346f99;
      padding: 5px;
      text-align: center;
      border: 1px solid #eeeeee;
    }

  @keyframes animation-right {
    from {
      right: 20px;
    }

    to {
      right: 120px;
    }
  }

  @keyframes animation-right-back {
    from {
      right: 120px;
    }

    to {
      right: 20px;
    }
  }

  @keyframes animation-wdith {
    from {
      width: 124px;
    }

    to {
      width: 224px;
    }
  }

  @keyframes animation-wdith-back {
    from {
      width: 224px;
    }

    to {
      width: 122px;
    }
  }

  .layerContorl {
    position: absolute;
    right: 20px;
    bottom: 160px;

    .ckzb-btn {
      width: 70px;
      height: 40px;
      border-radius: 10px;
      color: #ffffff;
      cursor: pointer;
      background: #01346f99;
      line-height: 38px;
      padding: 0 15px;
      text-align: center;
      border: 1px solid #eeeeee;

      &.isActive {
        background: #005cc6cc
      }

      &:hover {
        background: #005cc6cc;
      }
    }
    .ckzb-btn-mb {
      width: 30px;
      font-size: 12px;
      border-radius: 10px;
      color: #ffffff;
      cursor: pointer;
      background: #01346f99;
      padding: 5px;
      text-align: center;
      border: 1px solid #eeeeee;

      &.isActive {
        background: #005cc6cc
      }

      &:hover {
        background: #005cc6cc;
      }
    }

    .layerPanel {
      position: absolute;
      right: 110px;
      bottom: 0px;
      background: #01346f99;
      border-radius: 5px;
      // padding: 0 10px;
      padding-left: 10px;
      height: fit-content;
      overflow: hidden;
      overflow-y: auto;
      height: 240px;

      ul {
        margin: 0 0;
        padding: 0 0;
      }

      li {
        list-style: none;
        padding-right: 10px;

        .el-checkbox {
          color: #ffffff;

          &.is-checked {
            :deep(.el-checkbox__label) {
              color: #ffffff;
            }
          }
        }
      }
    }

    .layerPanel-mb {
      position: absolute;
      right: 50px;
      bottom: 0px;
      background: #01346f99;
      border-radius: 5px;
      // padding: 0 10px;
      padding-left: 10px;
      height: fit-content;
      overflow: hidden;
      overflow-y: auto;
      height: 240px;

      ul {
        margin: 0 0;
        padding: 0 0;
      }

      li {
        list-style: none;
        padding-right: 10px;

        .el-checkbox {
          color: #ffffff;

          &.is-checked {
            :deep(.el-checkbox__label) {
              color: #ffffff;
            }
          }
        }
      }
    }

  }

  .heatmapContorl {
    position: absolute;
    right: 20px;
    bottom: 220px;

    .ckzb-btn {
      width: 70px;
      height: 40px;
      border-radius: 10px;
      color: #ffffff;
      cursor: pointer;
      background: #01346f99;
      line-height: 38px;
      padding: 0 15px;
      text-align: center;
      border: 1px solid #eeeeee;

      &.isActive {
        background: #005cc6cc
      }

      &:hover {
        background: #005cc6cc;
      }
    }

    .ckzb-btn-mb {
      width: 30px;
      font-size: 12px;
      border-radius: 10px;
      color: #ffffff;
      cursor: pointer;
      background: #01346f99;
      padding: 5px;
      text-align: center;
      border: 1px solid #eeeeee;

      &.isActive {
        background: #005cc6cc
      }

      &:hover {
        background: #005cc6cc;
      }
    }

    .heatmapPanel {
      position: absolute;
      right: 0;
      bottom: 50px;
      background: #01346f99;
      border-radius: 5px;
      padding-left: 10px;
      height: fit-content;
      overflow: hidden;
      overflow-y: auto;
      height: 280px;

      ul {
        margin: 0 0;
        padding: 0 0;
      }

      li {
        list-style: none;
        padding-right: 10px;

        .el-checkbox {
          color: #ffffff;

          &.is-checked {
            :deep(.el-checkbox__label) {
              color: #ffffff;
            }
          }
        }
      }
    }

  }

  .heatmapLegend {
    position: absolute;
    left: 400px;
    bottom: 50px;
    width: 50px;
    height: 200px;
    background: url(~@/assets/images/heatmapLegend.png) no-repeat center center/100% 100%;
  }

  .heatmapLegend-mb {
    position: absolute;
    left: 10px;
    bottom: 50px;
    width: 10px;
    height: 100px;
    background: url(~@/assets/images/heatmapLegend.png) no-repeat center center/100% 100%;
  }



  .tips {
    position: absolute;
    left: 0px;
    bottom: 0px;
    color: #ffffff;
    padding: 10px 10px;
    background: #01346f99;
    width: 100%;
    text-align: center;
  }



  .yjdp-btn {
    position: absolute;
    top: 80px;
    right: 20px;
    width: 70px;
    height: 40px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: #01346f99;
    line-height: 38px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid #eeeeee;

    &.isActive {
      background: #005cc6cc;
    }

    &:hover {
      background: #005cc6cc;
    }
  }

   .yjdp-btn-mb {
    position: absolute;
    top: 130px;
    right: 20px;
    width: 30px;
    font-size: 12px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: #01346f99;
    padding: 5px;
    text-align: center;
    border: 1px solid #eeeeee;

    &.isActive {
      background: #005cc6cc;
    }

    &:hover {
      background: #005cc6cc;
    }
  }

  .kzdp-btn {
    position: absolute;
    top: 130px;
    right: 20px;
    width: 70px;
    height: 40px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: #01346f99;
    line-height: 38px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid #eeeeee;

    &.isActive {
      background: #005cc6cc;
    }

    &:hover {
      background: #005cc6cc;
    }
  }

  .kzdp-btn-mb {
    position: absolute;
    top: 180px;
    right: 20px;
    width: 30px;
    font-size: 12px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: #01346f99;
    padding: 5px;
    text-align: center;
    border: 1px solid #eeeeee;

    &.isActive {
      background: #005cc6cc;
    }

    &:hover {
      background: #005cc6cc;
    }
  }

  .yhfk-btn {
    position: absolute;
    top: 180px;
    right: 20px;
    width: 70px;
    height: 40px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: #01346f99;
    line-height: 38px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid #eeeeee;

    &:hover {
      background: #005cc6cc;
    }
  }

  .yhfk-btn-mb {
    position: absolute;
    top: 230px;
    right: 20px;
    width: 30px;
    font-size: 12px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: #01346f99;
    padding: 5px;
    text-align: center;
    border: 1px solid #eeeeee;

    &:hover {
      background: #005cc6cc;
    }
  }

  .zxq-btn {
    position: absolute;
    top: 230px;
    right: 20px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: #01346f99 url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
    padding: 10px 10px;
    text-align: center;
    line-height: 90px;
    border: 1px solid #eeeeee;

    &.isActive {
      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
    }

    &:hover {
      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
    }
  }
  .zxq-btn-mb {
    position: absolute;
    top: 280px;
    right: 10px;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    background: url(~@/assets/images/zxq.png) no-repeat center center / 90% 90%;
    text-align: center;

    &.isActive {
      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
    }

    &:hover {
      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
    }
  }

  .yjdpInfoDialog {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    background: #01346f99;
    border-radius: 10px;

    .close {
      font-size: 24px;
      position: absolute;
      top: 6px;
      right: 8px;
      line-height: 24px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      color: #ffffff;
    }

    .content {
      height: 160px;
      color: #ffffff;
      margin: 30px 0px 10px 20px;

      .item {
        line-height: 30px;
        margin-right: 20px;
      }
    }
  }

  .kzdpInfoDialog {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    background: #01346f99;
    border-radius: 10px;

    .close {
      font-size: 24px;
      position: absolute;
      top: 6px;
      right: 8px;
      line-height: 24px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      color: #ffffff;
    }

    .content {
      height: 160px;
      color: #ffffff;
      margin: 30px 0px 10px 20px;

      .item {
        line-height: 30px;
        margin-right: 20px;
      }
    }

  }

  .zxqIframeContainer {
    position: absolute;
    top: 100px;
    bottom: 100px;
    width: 600px;
    right: 200px;
    padding: 10px 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #01346f99;

    .close {
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 1;
      cursor: pointer;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .zxqIframeContainer-mb-mx {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%; /* iframe高度自适应 */
    border-radius: 10px;
    overflow: hidden;
    background: #01346f99;
    z-index: 999;
    .wind {
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: 15px;
      right: 40px;
      z-index: 1;
      cursor: pointer;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .close {
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 1;
      cursor: pointer;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .zxqIframeContainer-mb {
    position: absolute;
    //top: 0px;
    bottom: 0px;
    width: 100%;
    height: 30%;
    border-radius: 10px;
    overflow: hidden;
    background: #01346f99;
    z-index: 999;
    .wind {
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: 15px;
      right: 40px;
      z-index: 1;
      cursor: pointer;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .close {
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 1;
      cursor: pointer;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  }
}
</style>