yjhtgl-web/src/views/globalMap/index.vue

<template>
  <div id="globalMap">
    <div class="global-map">
      <Map
        v-if="mapStore.isAMap"
        ref="mapRef"
        @handle-show-video="handleShowVideo"
        @handle-show-warehouse="handleShowWarehouse"
        @handle-show-people="handleShowPeople"
        @handle-show-track="handleShowTrack"
      />
      <YztMap
        v-else
        ref="map2Ref"
        @handle-show-video="handleShowVideo"
        @handle-show-warehouse="handleShowWarehouse"
        @handle-show-people="handleShowPeople"
        @handle-show-track="handleShowTrack"
      />
      <!--左侧菜单-->
      <LeftMenu
        ref="leftMenuRef"
        style="position: absolute; top: 20px; left: 20px"
        @click-menu="clickMenu"
        @select-search-marker="selectSearchMarker"
      />
      <!--右侧功能模块-->
      <RightMenu ref="rightMenuRef" />
      <!--切换地图图层-->
      <SwitchMapTool class="tool-box" />
      <!--右下角地图工具 -->
      <RightTool />
      <!--时间轴-->
      <TimeAxis ref="timeAxisRef" />
      <!--绘制工具-->
      <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />
      <!--附近视频-->
      <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
      <!--格点雨量-->
      <GridPointRainfall v-if="showRainfall" v-model="showRainfall" :location="location" />
      <!--物资详情-->
      <MaterialDetail v-if="showWarehouse" v-model="showWarehouse" :warehouse-data="warehouseData" />
      <!--通讯保障-->
      <CommunicationSupport v-if="communicationSupport.show" @close="handleHideCommunicationSupport" />
      <!--应急人员详情-->
      <EmergencyCrew v-if="showPeople" v-model="showPeople" :id="teamId" />
    </div>
  </div>
</template>

<script lang="ts" setup name="globalMap">
import Map from '@/components/Map/index.vue';
import YztMap from '@/components/Map/YztMap/index.vue';
import SwitchMapTool from './SwitchMapTool.vue';
import LeftMenu from './LeftMenu.vue';
import RightMenu from './RightMenu/index.vue';
import MaterialDetail from './MaterialDetail.vue';
import TimeAxis from '@/components/TimeAxis/index.vue';
import DrawTools from './RightMenu/DrawTools.vue';
import CommunicationSupport from './RightMenu/CommunicationSupport.vue';
import GridPointRainfall from './RightMenu/GridPointRainfall.vue';
import EmergencyCrew from './RightMenu/EmergencyCrew.vue';
import useMapStore from '@/store/modules/map';
import { getPointInfo } from '@/api/globalMap';
import { getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
import { iconList } from './data/mapData';
import { deepClone } from '@/utils';
import { parseTime } from '@/utils/ruoyi';
import { getLocationVideos } from '@/api/videoMonitor';

//dom元素
const rightMenuRef = ref(null);
const mapRef = ref(null);
const map2Ref = ref(null);
const leftMenuRef = ref(null);
const timeAxisRef = ref(null);

// 地图
let map: any = {};
// 地图类
let mapUtils: any = {};
const mapStore = useMapStore();
// 附近视频菜单数据
let tempMenu = ref({
  name: '',
  checked: false
});
const communicationSupport = reactive({
  show: false,
  data: {}
});
let markerList = ref([]);
let addMarkersTimer;
// 添加打点
const addMarkers = (item) => {
  const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
  if (dom) {
    if (!item.checked) {
      let index = mapStore.pointType.findIndex((item2) => item.component === item2.component);
      if (index > -1) {
        mapStore.pointType.splice(index, 1);
      }
      if (mapStore.pointType && mapStore.pointType.length === 0) {
        dom.clearMarker('point');
        return;
      }
    } else {
      // 右侧图层分析状态
      item.checked2 = true;
      mapStore.pointType.push(item);
    }
    addMarkersMethod();
  }
};
const adjustPoint = (data) => {
  data.forEach((item2) => {
    // 获取图标
    if (iconList[item2.dataType]) {
      item2.icon = iconList[item2.dataType].image;
      item2.image = iconList[item2.dataType].image;
      item2.imageHover = iconList[item2.dataType].imageHover;
      item2.size = iconList[item2.dataType].size;
    } else {
      item2.icon = iconList['common'].image;
      item2.image = iconList['common'].image;
      item2.imageHover = iconList['common'].imageHover;
      item2.size = iconList['common'].size;
    }
    if (item2.materia_name) {
      item2.name = item2.materia_name;
    }
    if (item2.dataType === 43) {
      item2.showName = true;
    }
    item2.lnglat = [item2.longitude, item2.latitude];
  });
  return data;
};

const addMarkersMethod = () => {
  const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
  const path = [];
  mapStore.pointType.forEach((item) => {
    path.push(item.component);
  });
  getPointInfo(path.toString()).then((res) => {
    const data = res.data && res.data.list ? res.data?.list : [];
    markerList.value = adjustPoint(data);
    dom?.addMarker(data);
  });
  if (!path.includes('43') && addMarkersTimer) {
    clearInterval(addMarkersTimer);
    addMarkersTimer = null;
  }
  if (path.includes('43')) {
    addMarkersTimer = setInterval(addMarkersMethod, 60 * 1000);
  }
};
// 跳转指定地点
const toAddress = (item) => {
  const dom = mapStore.activeMap === 'imageMap' ? map2Ref.value : mapRef.value;
  dom.setCenter(item);
};

let showDrawTools = ref(false);

// 点击菜单
const clickMenu = (item, dataList) => {
  if (item.path === '1') {
    // 空间分析
    if (item.component === 'spatial') {
      showDrawTools.value = !showDrawTools.value;
    }
    rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item);
  } else if (item.path === '2') {
    let checked = item.checked ? '1' : '2';
    // 打点信息
    addMarkers(item);
    if (
      [
        '易涝隐患点',
        '省政务无人机',
        '铁塔运行监测',
        // '物资与装备',
        '通讯保障',
        '路网视频',
        '江湖河库',
        '防溺水',
        // '森林防火',
        '森防视频',
        '防灾救援',
        '救援队伍',
        '交通局视频',
        '重点车辆'
      ].includes(item.name)
    ) {
      rightMenuRef.value.updateMenu(checked, item);
    } else {
      let index = findChecked(dataList, item.name);
      if (item.checked && index > 0) {
        // 已有图层分析直接切换到该index
        rightMenuRef.value.showIndexMenu('图层分析');
      } else if (item.checked || (!item.checked && index === 0)) {
        rightMenuRef.value.updateMenu(checked, { name: '图层分析', meta: { icon: 'icon1' } });
      }
    }
  } else if (item.path === '3') {
    // 通讯保障
    communicationSupport.show = !communicationSupport.show;
    communicationSupport.data = item;
  } else if (item.path === '4') {
    // 附近视频
    tempMenu.value = item;
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', handleClickMap);
    mapStore.setIsMapSelect(true);
  }
};
const handleHideCommunicationSupport = () => {
  communicationSupport.show = false;
  leftMenuRef.value.setMenuChange(communicationSupport.data, false);
};
const findChecked = (dataList, name) => {
  let index = 0;
  dataList.forEach((item) => {
    if (item.name !== name && item.path === '2' && !!item.checked) {
      index++;
    }
    if (item.children && item.children.length > 0) {
      let res = findChecked(item.children, name);
      index += res;
    }
  });
  return index;
};
// 点击搜索结果，添加标注
const selectSearchMarker = (item) => {
  const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
  let item2 = deepClone(item);
  // 获取图标
  if (iconList[item2.dataType]) {
    item2.icon = iconList[item2.dataType].imageHover;
    item2.image = iconList[item2.dataType].image;
    item2.imageHover = iconList[item2.dataType].imageHover;
    item2.size = iconList[item2.dataType].size;
  } else {
    item2.icon = iconList['common'].imageHover;
    item2.image = iconList['common'].image;
    item2.imageHover = iconList['common'].imageHover;
    item2.size = iconList['common'].size;
  }
  item2.lnglat = [item2.longitude, item2.latitude];
  dom.addSearchMarker(item2);
};
const handleAnalysisData = (data) => {
  rightMenuRef.value.handleMenu('空间分析', data);
};
const getMapUtils = () => {
  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
  return !!domRef ? domRef.getMapUtils() : {};
};
// 获取地图元素操作
const getMap = () => {
  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
  return !!domRef ? domRef.getMap() : {};
};
const showDetail = (data, dataType) => {
  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
  if (!!domRef) {
    domRef.handleHover(data, dataType);
  }
};
const getDrawTool = () => {
  return mapStore.isAMap ? mapRef.value.drawTool : mapUtils;
};
const getPlaceSearch = () => {
  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
  if (!!domRef) {
    domRef.getPlaceSearch();
  }
};
const trackPlayback = (data) => {
  const domRef = mapStore.isAMap ? mapRef.value : mapUtils;
  if (!!domRef) {
    domRef.trackPlayback(data);
  }
};
let showNearbyVideos = ref(false);
let showRainfall = ref(false);
let location = ref([]);
watch(showNearbyVideos, () => {
  if (!!showNearbyVideos.value) {
    closeClickMap();
  } else {
    clearData();
  }
});
watch(showRainfall, () => {
  if (!!showRainfall.value) {
    closeClickMap();
  } else {
    clearData();
  }
});
const clearData = () => {
  location.value = [];
  if (!!tempMenu.value && !!tempMenu.value.name) {
    leftMenuRef.value.setMenuChange(tempMenu.value, false);
    tempMenu.value = {
      name: '',
      checked: false
    };
  }
};
const closeClickMap = () => {
  if (mapStore.isAMap) {
    map.off('click', handleClickMap);
  } else {
    map.un('click', handleClickMap);
  }
  mapStore.setIsMapSelect(false);
};
// 显示附近视频
const handleShowVideo = (data) => {
  location.value = [data.longitude, data.latitude];
  showNearbyVideos.value = true;
};
const handleClickMap = (e) => {
  if (mapStore.isAMap) {
    location.value = [e.lnglat.lng, e.lnglat.lat];
  } else {
    location.value = e.coordinate;
  }
  if (!!tempMenu.value && tempMenu.value.name === '附近视频') {
    showNearbyVideos.value = true;
  } else if (!!tempMenu.value && tempMenu.value.name === '格点雨量') {
    showRainfall.value = true;
  } else if (!!tempMenu.value && tempMenu.value.name === '定点分析') {
    const item = deepClone(tempMenu.value);
    const nowLocation = deepClone(location.value);
    tempMenu.value = {
      name: '',
      checked: false
    };
    if (mapStore.isAMap) {
      map.off('click', handleClickMap);
    } else {
      map.un('click', handleClickMap);
    }
    mapStore.setIsMapSelect(false);
    rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item, nowLocation);
  }
};
let showWarehouse = ref(false);
let warehouseData = ref('');
const handleShowWarehouse = (data) => {
  warehouseData.value = data;
  showWarehouse.value = true;
};

// 救援队伍人员列表
let showPeople = ref(false);
let teamId = ref('');
const handleShowPeople = (data) => {
  teamId.value = data.id;
  showPeople.value = true;
};

watch(
  () => mapStore.trackState.show,
  (show) => {
    if (!!show) {
      const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
      dom?.addMarker(adjustPoint(mapStore.trackState.data));
      mapStore.trackState.data = [];
      mapStore.trackState.show = false;
    }
  }
);
const handleShowTrack = (data) => {
  getVehicleTrajectory(data.id).then((res) => {
    const trajectory = [];
    if (res.data && res.data.list) {
      res.data.list.forEach((item) => {
        trajectory.push({
          time: !!item.gpsDate ? parseTime(item.gpsDate, '{h}:{i}') : '',
          lnglat: [item.lng, item.lat]
        });
      });
      initDataToPlay({ type: 'track', data: trajectory });
    }
  });
};
// 传递数据给时间轴
const initDataToPlay = (data) => {
  if (!!timeAxisRef.value) {
    timeAxisRef.value.initDataToPlay(data);
  }
};

watch(
  () => mapStore.mapLoaded,
  (loaded) => {
    if (loaded) {
      map = getMap();
      mapUtils = getMapUtils();
    }
  },
  {
    immediate: true
  }
);
// 监听视频打点
watch(
  () => mapStore.videoPointParams,
  () => {
    if (!mapStore.videoPointParams.flag) return;
    const queryParams = {
      zoom_level: mapStore.mapState.zoom,
      // zoom_level: 8,
      latitude_min: '',
      latitude_max: '',
      longitude_min: '',
      longitude_max: '',
      dict_value: 'slfh'
      // dict_value: mapStore.videoPointParams.dict_value
    };
    if (mapStore.isAMap) {
      const AMap = mapUtils.getAMap();
      const pixel = new AMap.Pixel(0, 0);
      const size = mapRef.value.getMapDomSize();
      const pixel2 = new AMap.Pixel(size[0], size[1]);
      const lnglat = map.containerToLngLat(pixel);
      const lnglat2 = map.containerToLngLat(pixel2);
      queryParams.longitude_min = lnglat.lng;
      queryParams.latitude_max = lnglat.lat;
      queryParams.longitude_max = lnglat2.lng;
      queryParams.latitude_min = lnglat2.lat;
    }
    getLocationVideos(queryParams).then((res) => {
      mapUtils.addMarker2(res.data);
    });
  },
  {
    deep: true
  }
);
onMounted(() => {
  mapStore.initData();
});
onBeforeUnmount(() => {
  if (!!map) {
    if (mapStore.isAMap) {
      map.off('click', handleClickMap);
    } else {
      map.un('click', handleClickMap);
    }
    mapStore.setIsMapSelect(false);
  }
  if (!!addMarkersTimer) {
    clearInterval(addMarkersTimer);
    addMarkersTimer = null;
  }
});

provide('getMapUtils', getMapUtils);
provide('getMap', getMap);
provide('trackPlayback', trackPlayback);
provide('showDetail', showDetail);
provide('getDrawTool', getDrawTool);
provide('getPlaceSearch', getPlaceSearch);
provide('initDataToPlay', initDataToPlay);
</script>

<style lang="scss" scoped>
#globalMap {
  width: 100%;
  height: 100%;
}
.global-map {
  width: 100%;
  height: 100%;
  position: relative;
  //overflow: hidden;
  .tool-box {
    position: absolute;
    right: 85px;
    bottom: 90px;
    z-index: 10;
    color: #fff;
  }
}
.box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  background-color: #041d55;
  display: flex;
  flex-direction: column;
  padding: 20px;
  color: #fff;
  font-size: 16px;
  height: 500px;
  max-height: 90%;
  div {
    line-height: 30px;
    cursor: pointer;
  }
}
.fixed {
  position: fixed !important;
}
</style>