<template>
  <div id="oneMapIndex">
    <!-- 内容 -->
    <div id="oneMapBody">
      <!-- 顶部 -->
      <div
              id="oneMapHeader"
              :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
      >
        <!-- 标题 -->
        <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
        <div id="titleFont">延安市城市生命线安全运行监测系统</div>
        <!-- 标题左侧展示组件 -->
        <div class="Location">
          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
          延安
        </div>
        <div class="Timer">
          <span class="date">{{ dates }}</span>
          <span class="time">{{ times }}</span>
          <span class="date week">{{ weeks }}</span>
        </div>
        <div class="Wather"></div>
        <!-- 标题右侧功能组件 -->
        <router-link to="/index?type=FullScreen">
          <div class="goHome header_icon"></div>
        </router-link>
        <div class="goUser_com header_icon" @click="toRYBox"></div>
        <router-link to="/user/profile">
          <div class="goClose_com header_icon"></div>
        </router-link>
      </div>
      <!-- 地图组件 -->
      <OneMap @map-click="mapClick" v-if="AllData.MapShowBol" :loadCallback="mapLoad"></OneMap>
      <!-- 桥梁BIM -->
      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
      <!-- 隧道BIM -->
      <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
      <!-- 降雨效果 -->
      <CanvasRain v-if="showRainFlow"></CanvasRain>
      <!-- 地图标注点弹窗popup -->
      <PopupInfo></PopupInfo>
      <!-- 动态信息 -->
      <dynamicInformation
              v-show="AllData.ComShowID != 4"
              :showPanel="showPanel"
      ></dynamicInformation>
      <!-- 左右面板展示隐藏-->
      <el-tooltip effect="dark" content="显隐面板" placement="top">
        <img
                id="ShowComVs"
                :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
                @click="showPanel = !showPanel"
                :src="showPanel ? ZuoYou2 : ZuoYou1"
        />
      </el-tooltip>

      <!-- 图例 -->
      <img
              id="TuChengImg"
              src="@/assets/images/Sponge_screen/TuCheng.png"
              alt=""
              @click="ShowTuCheng = !ShowTuCheng"
              :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
              v-if="AllData.MapShowBol"
      />
      <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng" :showPanel="showPanel"></LayerControl>
      <!-- 1:总体概览 -->
      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
      <!-- 2:智慧燃气 -->
      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
      <!-- 3:智慧排水 -->
      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
      <!-- 4:智慧桥梁 -->
      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
      <!-- 5:智慧隧道 -->
      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
      <!-- 6:智慧海绵 -->
      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
      <!-- 智慧海绵-监测分析 -->
      <ZHHMJCFX
              v-if="AllData.ComShowID == 61"
              :isActive="AllData.ComShowID == 61 ? true : false"
              :showPanel="showPanel"
      ></ZHHMJCFX>
      <!-- 智慧海绵-建设评估 -->
      <ZHHMJSPG
              v-if="AllData.ComShowID == 62"
              :isActive="AllData.ComShowID == 62 ? true : false"
              :showPanel="showPanel"
      ></ZHHMJSPG>
      <!-- 7:防洪排涝 -->
      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
    </div>
    <!-- 底部菜单 -->
    <div id="BottomMenuBox">
      <Transition name="slide-fade">
        <div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div>
      </Transition>
      <!-- 菜单List -->
      <div
              class="MenuList"
              :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
              v-for="(item, index) in AllData.MenuListData"
              @click="MenuClick(item, index)"
              v-if="BottomshowPanel"
              @mouseenter="handleMouseEnter(item)"
              @mouseleave="handleMouseLeave(item)"
      >
        <img class="MenuImg" v-if="AllData.AC_MenuIndex == item.id" :src="item.AC_icon" />
        <img class="MenuImg" v-else :src="item.iocn" />
        <div class="MenuFont" :class="AllData.AC_MenuIndex == item.id ? 'AC_Font' : ''">
          {{ item.name }}

          <!-- 二级菜单 -->
          <!-- <Transition name="slide-fade2"> -->
          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
            <span
                    class="ErJiMenuList"
                    :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
                    v-for="item2 in item.children"
                    @click.stop="ErJiMenuClick(item, item2)"
            >
              {{ item2.name }}
            </span>
          </div>
          <!-- </Transition> -->
        </div>
      </div>
    </div>

    <!-- 语音组件 -->
    <Voice></Voice>
  </div>
  <!-- 融云弹窗 -->
  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
  <!-- 前端组件公共弹窗 -->
  <el-dialog
          modal-class="publicDialogVisible"
          v-model="dialogConfig.visible"
          :title="dialogConfig.title"
          width="1400px"
          :append-to-body="true"
          :destroy-on-close="true"
          :draggable="true"
  >
    <DialogTabs
            :dataID="dialogConfig.getSiteId"
            :SiteNo="dialogConfig.SiteNo"
            :comIDs="dialogConfig.comIDs"
            :customComponents="dialogConfig.customData"
            :RefName="dialogConfig.RefName"
    ></DialogTabs>
  </el-dialog>
</template>

<script setup name="oneMapIndex">
  import bus from '@/bus';
  import request from '@/utils/request';
  import { fullscreenToggel } from '@/utils/util';
  import { ref, reactive, toRefs, onMounted } from 'vue';

  import useUserStore from '@/store/modules/user';
  const userStore = useUserStore();
  // 菜单的图片资源
  import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
  import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
  import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
  import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
  import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
  import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
  import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
  import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
  import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
  import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
  import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
  import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
  import JSPG from "@/assets/images/Sponge_screen/menu/JSPG.png";
  import AC_JSPG from "@/assets/images/Sponge_screen/menu/AC_JSPG.png";
  import JCFX from "@/assets/images/Sponge_screen/menu/JCFX.png";
  import AC_JCFX from "@/assets/images/Sponge_screen/menu/AC_JCFX.png";
  // 引用地图
  import OneMap from './map/newfiberMapBox.vue';

  // 引用王家坪大桥BIm
  import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
  // 引用隧道BIm
  import Tunnel from './BIM/Tunnel.vue';
  // 引用语音识别
  import Voice from './../voice/recordPage/index.vue';
  // 引入融云通讯录
  import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
  // 子系统引入
  import ComZTGL from './components/ZTGL.vue'; //总体概览
  import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
  import ComZHPS from './components/ZHPS.vue'; //智慧排水
  import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
  import ComZHSD from './components/ZHSD.vue'; //智慧隧道
  import ComZHHM from './components/ZHHM.vue'; //智慧海绵
  import ComFHPL from './components/FHPL.vue'; //防洪排涝
  import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
  import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
  import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
  import dynamicInformation from '@/views/oneMap/components/dynamicInformation.vue'; //地图标注点弹窗
  // 降雨效果
  import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
  // 图层控制面板
  import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
  // 前端共同弹窗
  import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
  // 左右滑动
  import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
  import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
  import xtb_img from '@/assets/newImgs/xtb_img.png';
  import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
  // 时间以及天气
  const timer = ref(null);
  const dates = ref(null);
  const weeks = ref(null);
  const times = ref(null);
  const weather = ref({
    temperature: null,
    imgNum: '',
    text: '',
  });
  const showPanel = ref(false);
  const showPanel2 = ref(false);
  const ShowTuCheng = ref(false); //图层面板显隐
  const AllData = reactive({
    MapShowBol: true, //是否展示中心地图
    MenuListData: [
      // {
      //   name: "总体概览",
      //   iocn: ZTGL,
      //   AC_icon: AC_ZTGL,
      //   id: 1,
      //   Layers: ["路网", "河流水系"],
      // },
      // {
      //   name: "智慧燃气",
      //   iocn: ZHRQ,
      //   AC_icon: AC_ZHRQ,
      //   id: 2,
      //   Layers: ["干管", "主管", "干管流向", "主管流向"],
      // },
      // {
      //   name: "智慧排水",
      //   iocn: ZHPS,
      //   AC_icon: AC_ZHPS,
      //   id: 3,
      //   Layers: ["雨水管网", "污水管网"],
      // },
      // {
      //   name: "智慧海绵",
      //   iocn: ZHHM,
      //   AC_icon: AC_ZHHM,
      //   id: 6,
      //   children: [
      //     {
      //       name: "城市概览",
      //       id: 6,
      //       Layers: [],
      //     },
      //     {
      //       name: "监测分析",
      //       id: 61,
      //       Layers: [],
      //     },
      //     {
      //       name: "建设评估",
      //       id: 62,
      //       Layers: [],
      //     },
      //   ],
      // },
      // {
      //   name: "智慧桥梁",
      //   iocn: ZHQL,
      //   AC_icon: AC_ZHQL,
      //   id: 4,
      //   Layers: [],
      // },
      // {
      //   name: "智慧隧道",
      //   iocn: ZHSD,
      //   AC_icon: AC_ZHSD,
      //   id: 5,
      //   Layers: [],
      // },
      // {
      //   name: "防汛排涝",
      //   iocn: FXPL,
      //   AC_icon: AC_FXPL,
      //   id: 7,
      //   Layers: [],
      // },
    ],
    AC_MenuIndex: 1, //一级菜单选中的ID
    BottmBackGroundShow: false,
    RYDialog: false,
    ZhuDongBoHao: false,
    ErJiMenuShowID: null,
    ErJiMenuCheckID: null, //二级菜单选中的ID
    ComShowID: 1, //最终展示组件的ID
  });
  // 降雨效果
  const showRainFlow = ref(false);
  const BottomshowPanel = ref(true);
  // 公共弹窗
  const dialogConfig = reactive({
    visible: false,
    getSiteId: '',
    SiteNo: '',
    data: {},
    comIDs: ['spjk'],
    customData: [],
    RefName: '',
    title: '详情',
  });
  onBeforeMount(() => {
    console.log('ZhuanTiType', userStore.ZhuanTiType);
    if (userStore.ZhuanTiType == 1) {
      // 城市生命线
      AllData.MenuListData = [
        {
          name: '总体概览',
          iocn: ZTGL,
          AC_icon: AC_ZTGL,
          id: 1,
          Layers: ['路网', '河流水系'],
        },
        {
          name: '燃气安全',
          iocn: ZHRQ,
          AC_icon: AC_ZHRQ,
          id: 2,
          Layers: ['干管', '主管', '干管流向', '主管流向'],
        },
        {
          name: '排水安全',
          iocn: ZHPS,
          AC_icon: AC_ZHPS,
          id: 3,
          Layers: ['雨水管网', '污水管网'],
          children: [
            {
              name: '排水安全',
              id: 3,
              Layers: [],
            },
            {
              name: '防汛排涝',
              id: 7,
              Layers: [],
            },
          ],
        },
        {
          name: '桥梁安全',
          iocn: ZHQL,
          AC_icon: AC_ZHQL,
          id: 4,
          Layers: [],
        },
        {
          name: '隧道安全',
          iocn: ZHSD,
          AC_icon: AC_ZHSD,
          id: 5,
          Layers: [],
        },
      ];
    } else if (userStore.ZhuanTiType == 2) {
      // 海绵
      AllData.MenuListData = [
        {
          name: '城市概览',
          iocn: ZHHM,
          AC_icon: AC_ZHHM,
          id: 6,
        },
        {
          name: "监测分析",
          iocn: JCFX,
          AC_icon: AC_JCFX,
          id: 61,
        },
        {
          name: "建设评估",
          iocn: JSPG,
          AC_icon: AC_JSPG,
          id: 62,
        },
      ];
    }
    // 默认选中展示第一个菜单
    AllData.AC_MenuIndex = AllData.MenuListData[0].id;
    AllData.ComShowID = AllData.MenuListData[0].id;
  });
  onMounted(() => {
    fullscreenToggel();
    AllData.BottmBackGroundShow = true;
    console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
    bus.emit('BottomHidden', AllData.BottmBackGroundShow);
    // 降雨特征点击
    bus.on('checkRainL', params => {
      if (params == 1) {
        showRainFlow.value = false;
      } else {
        showRainFlow.value = true;
      }
    });
    // 底部隐藏
    bus.on('checkBottom', params => {
      if (params == 1) {
        BottomshowPanel.value = false;
      } else {
        BottomshowPanel.value = true;
      }
    });
    // 共同弹窗触发事件
    bus.on('publicDialog', params => {
      dialogConfig.getSiteId = params.getSiteId;
      dialogConfig.title = params.title ?? '详情';
      dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
      // 打开弹窗
      dialogConfig.visible = true;
    });
    // 共同弹窗触发事件
    bus.on('publicDialog_Close', params => {
      // 打开弹窗
      dialogConfig.visible = false;
    });
    // 获取天气
    getWeather();
    // 获取时间
    currentTime();
    //initRainImage();
    // 打开融云通讯录主动拨号
    bus.on('OpenRY', params => {
      AllData.ZhuDongBoHao = true;
      AllData.RYDialog = true;
      bus.emit('showRy');
    });

    // 切换专题图
    bus.on('ChangeZhuanTiTu', params => {
      if (params.num == 1) {
        // 一级
        MenuClick(params.MenuData1);
      } else if (params.num == 2) {
        // 二级
        ErJiMenuClick(params.MenuData1, params.MenuData2);
      }
    });
    // 切换面板显示隐藏
    bus.on('changeShowPanel', params => {
      showPanel.value = params;
    });
  });
  onBeforeUnmount(() => {
    bus.off('BottomHidden');
    bus.off('publicDialog');
    bus.off('publicDialog_Close');
    bus.off('OpenRY');
    bus.off('ChangeZhuanTiTu');
    bus.off('checkRainL');
    bus.off('changeShowPanel');
  });
  // 菜单点击
  const MenuClick = (item, index) => {
    ShowTuCheng.value = false;
    showRainFlow.value = false;
    showPanel.value = false;
    // 改变菜单选中索引
    AllData.AC_MenuIndex = item.id;
    // 二级也选中一级菜单默认展示的那个
    AllData.ErJiMenuCheckID = item.id;
    // 最终展示的组件ID
    AllData.ComShowID = item.id;
    // 当选择的是智慧桥梁时 将隐藏地图展示BIM
    if (AllData.ComShowID == 4 || AllData.ComShowID == 5) {
      AllData.MapShowBol = false;
    } else {
      AllData.MapShowBol = true;
      // 点击菜单时隐藏所有图层
      bus.emit('clearAllLayer');
      // 打开默认的菜单
      bus.emit('SetLayerShow', item.Layers);
    }
  };
  // 二级菜单点击
  const ErJiMenuClick = (item, item2) => {
    ShowTuCheng.value = false;
    showRainFlow.value = false;
    console.log(22);
    // 改变菜单选中索引
    AllData.AC_MenuIndex = item.id;
    // 二级也选中点击的那个
    AllData.ErJiMenuCheckID = item2.id;
    // 最终展示的组件ID
    AllData.ComShowID = item2.id;
  };
  // 打开融云通讯录
  const toRYBox = () => {
    AllData.RYDialog = true;
    AllData.ZhuDongBoHao = false;
    bus.emit('showRy');
  };
  // 关闭融云通讯录弹窗
  const dialogHide = val => {
    if (!val) {
      AllData.RYDialog = false;
      AllData.ZhuDongBoHao = false;
    }
  };
  //地图点击事件
  const mapClick = async (point, properties, feature) => {
    console.log('point', point);
    console.log('properties', properties);
    console.log('feature---', feature);
    if (!feature) {
      let currentZoom = newfiberMapbox.map.getZoom();
      console.log('currentZoom--', currentZoom);
      if (currentZoom >= 18) {
        let clickPoint = turf.point(point);
        let positionAddress = '';
        gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
        console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
        let data = await request({
          url: `/bdApi//baiduservice/panorama`,
          method: 'GET',
          params: {
            location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
            fov: 180,
            height: 256,
            width: 512,
          },
        });
        if (data && data.data) {
          data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
        }
        console.log('data----', data);
        gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
        gcoord.transform(clickPoint, gcoord.WGS84, gcoord.GCJ02);
        let regeodata = await request({
          url: `/amap/v3/geocode/regeo`,
          method: 'GET',
          params: {
            location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
            key: '76eac14980622704ba95c1bf080f3b4c',
            radius: 100,
            extensions: 'all',
            output: 'json',
          },
        });
        if (regeodata.info === 'OK') {
          console.log('坐标返地名data----', data);
          positionAddress = regeodata.regeocode.formatted_address;
        }
        gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
        mapBoxVectorLayer.removeByIds(['clickPoint']);
        mapBoxVectorLayer.addGeojsonSymbol('clickPoint', turf.featureCollection([clickPoint]), xtb_img, 2);
        data.roadName = positionAddress;
        bus.emit('popupcontent', {
          popupShow: true,
          point: point,
          popupInfo: data,
        });
      }
    }
    if (properties) {
      if (feature == 'rq_pipeline_info') {
        if (!!newfiberMapbox.getLayerByName('rqLine')) {
          newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
        }
        let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
        let layer = new mapboxL7.LineLayer({
          name: 'rqLine',
        })
                .source(rqLine)
                .size(4)
                .shape('line')
                .texture('arrow')
                .color('rgb(241, 159, 27)')
                .animate({
                  interval: 2, // 间隔
                  duration: 2, // 持续时间，延时
                  trailLength: 3, // 流线长度
                })
                .style({
                  opacity: 1,
                  lineTexture: true, // 开启线的贴图功能
                  iconStep: 50, // 设置贴图纹理的间距
                  borderWidth: 0, // 默认文 0，最大有效值为 0.5
                  borderColor: '#fff', // 默认为 #ccc
                });
        newfiberMapbox.addLayer(layer);
      }
      bus.emit('popupcontent', {
        popupShow: true,
        point: point,
        popupInfo: properties,
      });
    }
  };

  // 获取当前时间
  const formatTime = () => {
    let date = new Date();
    let year = date.getFullYear(); // 年
    let month = date.getMonth() + 1; // 月
    let day = date.getDate(); // 日
    let hour = date.getHours(); // 时
    hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
    let minute = date.getMinutes(); // 分
    minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
    let second = date.getSeconds(); // 秒
    second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
    let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
    weeks.value = weekAry[date.getDay()];
    dates.value = `${year}-${month}-${day}`;
    times.value = `${hour}:${minute}:${second}`;
  };
  const currentTime = () => {
    clearInterval(timer.value);
    timer.value = setInterval(() => {
      formatTime();
    }, 500);
  };
  // 获取天气
  const getWeather = async () => {
    // let res = await getAppService();
    // if (res.code == 200) {
    //   weather.value.temperature = res.data.tempFc;
    //   weather.value.imgNum = new URL(
    //     `/src/assets/images/weather_icon/icon__${res.data.code}.png`,
    //     import.meta.url
    //   ).href;
    // }
  };
  // 二级菜单展示
  const handleMouseEnter = item => {
    AllData.ErJiMenuShowID = item.id;
  };
  // 二级菜单展示
  const handleMouseLeave = item => {
    AllData.ErJiMenuShowID = null;
  };

  const mapLoad = ()=>{
    mapBoxVectorLayer.load3DTiles();
  }
</script>

<style lang="scss" scoped>
  #oneMapIndex {
    width: 100%;
    height: 100vh;
    background: black;
    position: relative;

    #oneMapBody {
      width: 100%;
      height: 100vh;
      background: rgba(255, 192, 203, 0.304);
      // margin-top: -30px;
      z-index: 99;
      position: relative;

      #oneMapHeader {
        width: 100%;
        height: 100px;
        background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
        background-size: cover;
        z-index: 100;
        position: absolute;
        top: 0;
        left: 0;
        #titleFont {
          width: 634px;
          height: 47px;
          position: absolute;
          left: 50%;
          margin-left: -317px;
          top: 20px;
          font-family: PangMenZhengDao;
          font-weight: 400;
          font-size: 38px;
          color: #ffffff;
          line-height: 47px;
          // text-shadow: 0px 2px 8px rgba(0, 83, 95, 0.9);
          font-style: italic;

          background: linear-gradient(0deg, aqua 0%, #ffffff 80%, #ffffff 100%);

          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-align: center;
        }

        .Location {
          position: absolute;
          top: 15px;
          left: 20px;
          height: 15px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          line-height: 13px;
          font-style: italic;
          height: 18px;
          line-height: 18px;
          display: inline-block;
        }
        .Timer {
          position: absolute;
          top: 15px;
          left: 90px;
          height: 18px;
          line-height: 18px;

          .time {
            display: inline-block;
            width: auto;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 16px;
            color: #ffffff;
            height: 18px;
            line-height: 18px;
            font-style: italic;
            margin: 0 10px;
          }

          .date {
            display: inline-block;
            width: auto;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 16px;
            color: #ffffff;
            height: 18px;
            line-height: 18px;
            font-style: italic;
          }
        }

        .header_icon {
          width: 22px;
          height: 22px;
          position: absolute;
          top: 10px;
          cursor: pointer;
        }
        .goHome {
          background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
          background-size: contain;
          right: 150px;
        }
        .goUser_com {
          background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
          background-size: contain;
          right: 100px;
        }
        .goClose_com {
          background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
          background-size: contain;
          right: 50px;
        }
      }

      #TuChengImg {
        width: 36px;
        height: 36px;
        position: absolute;
        right: 470px;
        top: 100px;
        cursor: pointer;
      }
      .TuChengImgTrue {
        transform: translateX(460px);
        transition: all 1s ease;
      }
      .TuChengImgFalse {
        transform: translateX(0px);
        transition: all 1s ease;
      }
      #ShowComVs {
        position: absolute;
        left: 0px;
        top: 300px;
        width: 40px;
        height: 40px;
        // background: #00cee0;
        cursor: pointer;
      }

      .ShowComVsTrue {
        transform: translateX(10px);
        transition: all 1s ease;
      }
      .ShowComVsFalse {
        transform: translateX(460px);
        transition: all 0.8s ease;
      }
    }
    #BottomMenuBox {
      position: absolute;
      bottom: 0;
      width: 952px;
      height: 93px;
      left: 50%;
      margin-left: -476px;
      z-index: 999;

      .BottmBackGround {
        position: absolute;
        bottom: 0;
        width: 952px;
        height: 53px;
        background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
        background-size: cover;
      }
      // 图标菜单样式 从左到右按照顺序进行设定
      .MenuList {
        position: absolute;
        width: 156;
        height: 48px;
        text-align: center;
        cursor: pointer;
        .MenuImg {
          width: 156px;
          height: 48px;
          position: absolute;
        }
        .MenuFont {
          margin: 0;
          padding: 0;
          display: inline-block;
          width: 156px;
          height: 48px;
          line-height: 46px;
          font-family: PangMenZhengDao;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          text-shadow: 0px 0px 20px #00303c;
          position: relative;
          box-sizing: border-box;
          padding-left: 30px;
          .ErJiMenuBox {
            position: absolute;
            bottom: 50px;
            left: 4px;
            font-size: 0;
            line-height: 0;
            text-align: center;
            display: flex;
            align-items: center;
            width: 147px;
            height: auto;
            flex-direction: column;

            .ErJiMenuList {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
              text-shadow: 0px 0px 20px #00303c;
              height: 40px;
              line-height: 40px;
              display: inline-block;
              margin: 5px 0;
              width: 147px;
              background: linear-gradient(
                              0deg,
                              rgba(1, 86, 126, 1) 0%,
                              rgba(43, 123, 159, 0.8) 100%
              );
              border-radius: 20px;
              &:hover {
                color: #ffd97f;
              }
            }
            .ErJiMenuCheck {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 14px;
              color: #ffd97f;
              background: linear-gradient(
                              0deg,
                              rgba(1, 86, 126, 1) 0%,
                              rgba(43, 123, 159, 1) 100%
              );
            }

            .ErJiMenuJT {
              width: 28px;
              height: 21px;
              margin-bottom: 10px;
            }
          }
        }
        .AC_Font {
          color: #ffd97f;
        }
      }
      .MenuList3 {
        left: 38px;
        top: 26px;
      }
      .MenuList1 {
        left: 218px;
        top: 13px;
      }
      .MenuList0 {
        left: 398px;
        top: 0px;
      }
      .MenuList2 {
        left: 578px;
        top: 13px;
      }
      .MenuList4 {
        left: 758px;
        top: 26px;
      }
    }
  }

  /*
      进入和离开动画可以使用不同
      持续时间和速度曲线。
    */
  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateY(80px);
    opacity: 0;
  }
</style>

<style lang="scss">
  .publicDialogVisible {
    .el-dialog {
      background: rgba(14, 69, 89, 0.9);
      height: 800px;
      border: 1px solid #15d2fd;
      .el-dialog__header {
        background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
        background-size: cover;
        padding: 0;
        height: 60px;
        margin: 0;
        .el-dialog__title {
          font-family: PangMenZhengDao;
          font-weight: 400;
          font-size: 24px;
          color: #ebfeff;
          height: 60px;
          line-height: 60px;
          margin-left: 40px;
        }
      }

      .el-dialog__body {
        width: 100%;
        height: calc(100% - 60px);
      }
    }
  }
</style>