yjdp-web/src/store/modules/map.ts

import { PointType } from '@/api/globalMap/type';
import { listMenu } from '@/api/system/menu';

export const useMapStore = defineStore('map', () => {
  const mapState = reactive({
    center: [110.925175, 21.978955],
    zoom: 8.5,
    minZoom: 6,
    maxZoom: 16,
    isThreeDimensional: false,
    // 是否显示比例尺
    showScale: true
  });
  // 地图左侧菜单
  const menuData = ref([]);
  // 右侧菜单
  const menuState = ref({
    showMenu: false,
    activeIndex: 0,
    menuData: []
  });
  // 地图加载是否完成
  const mapLoaded = ref(false);
  // 当前地图类型
  const activeMap = ref<string>('');
  // 是否显示边界遮罩
  const showMask = ref<boolean>(true);
  // 高德地图类型
  const AMapType: string[] = ['vectorgraph', 'satellite'];
  // 粤政图地图类型
  const YMapType: string[] = ['satellite2', 'satellite3', 'imageMap', 'imageMap2'];
  // 是否是高德地图
  const isAMap = computed(() => AMapType.includes(activeMap.value));
  // 选中的菜单
  const pointType = ref<PointType[]>([]);
  // 轨迹
  const trackState = reactive({
    show: false,
    data: []
  });
  // 是否在选点
  const isMapSelect = ref(false);
  // 视频打点参数
  const pointParams = ref({
    // 选择条件
    dict_value: [],
    option: ''
  });
  // 是否需要触发点击菜单
  const updateMenu = ref({});
  // 需要更新灾害点坐标
  const updateAddress = ref([]);
  // 设置地图加载完成状态
  const setMapLoaded = (loaded: boolean) => {
    mapLoaded.value = loaded;
  };
  // 设置zoom
  const setZoom = (zoom: number) => {
    mapState.zoom = zoom;
  };
  // 设置地图类
  const setActiveMap = (newMapKey: string) => {
    activeMap.value = newMapKey;
  };
  // 修改显示遮罩边界
  const setShowMask = (show: boolean) => {
    showMask.value = show;
  };
  // 修改轨迹数据
  const setTrackState = (data: any) => {
    trackState.data = data;
    trackState.show = true;
  };
  // 修改选点状态
  const setIsMapSelect = (flag: boolean) => {
    isMapSelect.value = flag;
  };
  // 更多视频界面、设置视频打点标识
  const setPointParams = (dictValue: string) => {
    const data = menuData.value;
    let shouldBreak = false;
    for (let i = 0; i < data.length; i++) {
      if (data[i].children && data[i].children.length > 0) {
        const data2 = data[i].children;
        for (let k = 0; k < data2.length; k++) {
          if (data2[k].name === '图像资源') {
            shouldBreak = true;
            if (data2[k].children && data2[k].children.length > 0) {
              const data3 = data2[k].children;
              let selectItem = {};
              for (let z = 0; z < data3.length; z++) {
                if (dictValue === data3[z].component) {
                  data3[z].checked = true;
                  selectItem = data3[z];
                }
                // else {
                //   data3[z].checked = false;
                // }
              }
              updateMenu.value = selectItem;
              let selecData = [];
              menuState.value.menuData.forEach((item) => {
                if (!item.isVideo || (item.isVideo && selectItem.component !== item.component)) {
                  selecData.push(item);
                }
              });
              selecData.push(selectItem);
              menuState.value.menuData = selecData;
              menuState.value.activeIndex = selecData.length - 1;
              menuState.value.showMenu = true;
              pointParams.value.dict_value = [dictValue];
              if (shouldBreak) {
                break;
              }
            }
          }
        }
        if (shouldBreak) {
          break;
        }
      }
    }
  };
  const setUpdateMenu = (obj: object) => {
    updateMenu.value = obj;
  };
  // 打点option变化
  const setPointOption = () => {
    const path = [];
    const path2 = [];
    pointType.value.forEach((item: any) => {
      if (item.isVideo) {
        path2.push(item.component);
      } else {
        path.push(item.component);
      }
    });
    pointParams.value.option = path.toString();
    //合并到视频类别里
    pointParams.value.dict_value = path2;
  };
  // 初始化左侧菜单数据
  const initMenuData = () => {
    listMenu().then((res: any) => {
      const data = res.data ? res.data[0]?.children : [];
      data.forEach((item: any) => {
        item.show = true;
        item.name = item.meta?.title;
        item.children?.forEach((item2) => {
          item2.show = true;
          item2.name = item2.meta?.title;
          item2.children?.forEach((item3) => {
            item3.name = item3.meta?.title;
            if (item3.component === '2' && !!item3.path) {
              item3.checked = false;
            }
          });
        });
      });
      menuData.value = data;
    });
  };
  // 取消勾选左侧所有菜单
  const handleCancelAllChecked = () => {
    const data = menuData.value;
    data.forEach((topLevelItem) => {
      if (topLevelItem.children && topLevelItem.children.length > 0) {
        topLevelItem.children.forEach((secondLevelItem) => {
          if (secondLevelItem.children && secondLevelItem.children.length > 0) {
            secondLevelItem.children.forEach((thirdLevelItem) => {
              thirdLevelItem.checked = false;
            });
          }
        });
      }
    });
    menuState.value = {
      showMenu: false,
      activeIndex: 0,
      menuData: []
    };
    pointType.value = [];
    setPointOption();
  };
  const setUpdateAddress = (data) => {
    updateAddress.value = data;
  };
  // 跳转界面时 初始化所有数据
  const initData = () => {
    mapState.center = [110.925175, 21.978955];
    activeMap.value = 'satellite';
    showMask.value = true;
    trackState.show = false;
    trackState.data = [];
    isMapSelect.value = false;
    pointParams.value = {
      dict_value: [],
      option: ''
    };
    pointType.value = [];
    menuState.value = {
      showMenu: false,
      activeIndex: 0,
      menuData: []
    };
    updateMenu.value = [];
    initMenuData();
  };
  return {
    mapState,
    menuData,
    menuState,
    mapLoaded,
    activeMap,
    isAMap,
    updateMenu,
    updateAddress,
    showMask,
    AMapType,
    YMapType,
    pointType,
    trackState,
    isMapSelect,
    pointParams,
    setMapLoaded,
    setZoom,
    setActiveMap,
    setShowMask,
    setTrackState,
    setIsMapSelect,
    initData,
    setUpdateMenu,
    setPointParams,
    setPointOption,
    handleCancelAllChecked,
    setUpdateAddress
  };
});

export default useMapStore;