DataCenter-gis/src/stores/mapStore.js

import { ref } from 'vue';
import { defineStore } from 'pinia';
import {
  addImagePoint,
  addJuHePoint,
  closePoint,
  stopTrajectory,
  startBidding,
  closeOutputPoint,
  addPoint,
  fullExtent,
  change3DTheme,
  regionZone
} from '@/utils/map/mapOperation.js';
import {
  getTrajectorPointOnPeople,
  getTrajectorPointOnCar,
  sprinkleSomeByType
} from '@/service/api/mapRequest.js';
import { useDrawPointStore } from '@/stores/drawPointManage';

export const useMapStore = defineStore('mapStore', () => {
  //当前病例点位列表
  const currentToolSelectArray = ref(['newAdress', 'touch', 'autoPlay']);

  //自动播放类型
  const autoPlayType = ref(1);
  //自动播放时间范围
  const autoPlayTime = ref(1);

  const getTimeArray = () => {
    const nowTime = Date.now();
    let resultArr = [];
    if (autoPlayTime.value == 1) {
      const datTime = 60 * 60 * 1000;
      for (let i = 1; i < 24; i++) {
        const end = nowTime - datTime * (i - 1);
        const start = nowTime - datTime * i;
        resultArr.unshift({
          startTime: new Date(start).toLocaleString().replaceAll('/', '-'),
          endTime: new Date(end).toLocaleString().replaceAll('/', '-')
        });
      }
    } else if (autoPlayTime.value == 7) {
      const datTime = 24 * 60 * 60 * 1000;
      for (let i = 1; i < 7; i++) {
        const end = nowTime - datTime * (i - 1);
        const start = nowTime - datTime * i;
        resultArr.unshift({
          startTime: new Date(start).toLocaleDateString().replaceAll('/', '-'),
          endTime: new Date(end).toLocaleDateString().replaceAll('/', '-')
        });
      }
    } else if (autoPlayTime.value == 30) {
      const datTime = 24 * 60 * 60 * 1000;
      for (let i = 1; i < 30; i++) {
        const end = nowTime - datTime * (i - 1);
        const start = nowTime - datTime * i;
        resultArr.unshift({
          startTime: new Date(start).toLocaleDateString().replaceAll('/', '-'),
          endTime: new Date(end).toLocaleDateString().replaceAll('/', '-')
        });
      }
    }
    return resultArr;
  };

  const currentTimePoint = ref(0);
  //自动播放点位获取
  const getSprinkleSomeByType = (startTime, endTime) => {
    closePoint('autoPlay');
    sprinkleSomeByType({
      endTime: endTime,
      startTime: startTime,
      type: autoPlayType.value
    }).then((res) => {
      if (res.code == 200) {
        addImagePoint('autoPlay', res.data, {
          imageUrl: new URL(`@/assets/image/bidding.png`, import.meta.url).href
        });
        currentTimePoint.value = res?.data?.length || 0;
      }
    });
  };

  const intervalFlag = ref(false);
  const timeInterval = ref(null);
  const timeArr = ref([]);
  const autoNum = ref(0);
  // 自动播放事件
  const autoPlayFun = () => {
    timeArr.value = getTimeArray();
    intervalFlag.value = true;
    timeInterval.value = setInterval(() => {
      try {
        getSprinkleSomeByType(
          timeArr.value[autoNum.value].startTime,
          timeArr.value[autoNum.value].endTime
        );
      } catch (error) {
        console.log(error);
      }
      autoNum.value = autoNum.value + 1;
      if (autoNum.value >= timeArr.value.length) {
        autoNum.value = 0;
      }
    }, 5000);
  };

  // 地图地图类型
  const mapTheme = ref('dark');

  //区选择
  const selectPartKey = ref('松江区');

  //所有病例点位
  const currentAllPointList = ref([]);

  // 会商车绘制列表
  const flowCarList = ref([]);

  const pushFlowCarList = (value) => {
    flowCarList.value.push(value);
  };

  const delFlowCarList = () => {
    flowCarList.value = [];
  };

  const changeTheme = (is3D) => {
    change3DTheme(is3D);
    if (is3D) {
      currentToolSelectArray.value.push('3dChange');
    } else {
      currentToolSelectArray.value = currentToolSelectArray.value.filter(
        (item) => item != '3dChange'
      );
    }
  };

  //切换主题后加载初始化地图
  const initChangeMap = (is3D) => {
    changeTheme(is3D);

    currentToolSelectArray.value.forEach((item) => {
      if (item != '3dChange' && item != 'Bidding' && item != 'flowCar') {
        setCurrentToolSelectArray(item);
        if (selectPartKey.value?.length > 0) {
          if (selectPartKey.value == '浦东新区') {
            regionZone('浦东新区');
          } else {
            regionZone(selectPartKey.value);
          }
        }
      }
    });
  };

  //点亮地图工具图标
  const setCurrentToolSelectArray = async (value) => {
    currentToolSelectArray.value.push(value);
    try {
      switch (value) {
        case 'newAdress': {
          //新址图标
          addImagePoint('newAdress', [{ x: -14926.528171515301, y: -1705.2657878212942 }], {
            imageUrl: new URL(`@/assets/image/mapTools/new_icon.png`, import.meta.url).href
          });
          break;
        }
        case 'touch': {
          //密接图标
          addImagePoint(
            'touch',
            [
              { x: 9604.191858692775, y: -19248.016463574288 },
              { x: 13799.47156001244, y: -11944.303054916069 },
              { x: 17672.277882889364, y: -9192.565371300574 }
            ],
            {
              imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
            }
          );
          // const res = await getTrajectorPointOnPeople({ type: 1 });
          // if (res?.code == 200) {
          //   addJuHePoint(value, res?.data || []);
          // } else {
          //   console.log('获取传染病数据错误');
          // }
          // addImagePoint(value, {
          //   imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
          // });
          break;
        }
        case 'infectious': {
          //传染病图标
          const res = await getTrajectorPointOnPeople({ type: 1 });
          if (res?.code == 200) {
            addJuHePoint(value, res?.data || [], {
              label: '传染病',
              color: 'rgba(230, 162, 60, 0.5)',
              borderColor: 'rgba(230, 162, 60, 1)'
            });
          } else {
            console.log('获取传染病数据错误');
          }

          break;
        }
        case 'feverClinic': {
          //发热门诊图标
          const res = await getTrajectorPointOnPeople({ type: 2 });
          if (res?.code == 200) {
            addJuHePoint(value, res?.data || [], {
              label: '发热门诊',
              color: 'rgba(245, 108, 108, 0.5)',
              borderColor: 'rgba(245, 108, 108, 1)'
            });
          } else {
            console.log('获取发热数据错误');
          }
          break;
        }
        case 'breathe': {
          //呼吸图标
          const res = await getTrajectorPointOnPeople({ type: 3 });
          if (res?.code == 200) {
            addJuHePoint(value, res?.data || [], {
              label: '呼吸数据',
              color: 'rgba(148, 0, 211, 0.5)',
              borderColor: 'rgba(148, 0, 211, 1)'
            });
          } else {
            console.log('获取呼吸数据错误');
          }
          break;
        }
        case 'flowCar': {
          const res = await getTrajectorPointOnCar();
          if (res?.code == 200) {
            addImagePoint(value, res?.data || [], {
              imageUrl: new URL(`@/assets/image/mapTools/6.png`, import.meta.url).href
            });
          }
          initChangeMap(true);
          break;
        }
        case 'Bidding': {
          initChangeMap(true);
          //有轨迹点;
          const allShowHasPoint = currentAllPointList.value.filter((item) => {
            return item?.x && item?.y && item?.ty == '有轨迹';
          });
          //无轨迹点
          const allShowNoPoint = currentAllPointList.value.filter((item) => {
            return item?.x && item?.y && item?.ty == '无轨迹';
          });
          allShowHasPoint?.length > 0 &&
            addPoint(allShowHasPoint, 'hasPointView', {
              color: 'rgba(0, 128, 255, 0.4)',
              borderColor: 'rgba(0, 128, 255, 0.6)'
            });
          allShowNoPoint?.length > 0 &&
            addPoint(allShowNoPoint, 'noPointView', {
              color: 'rgba(255, 127, 0, 0.4)',
              borderColor: 'rgba(255, 127, 0, 0.6)'
            });
          //无轨迹点
          break;
        }
        case '3dChange': {
          initChangeMap(true);
          break;
        }
        case 'autoPlay': {
          autoPlayFun();
          break;
        }
      }
    } catch (error) {
      console.log(error);
    }
  };

  //关闭地图工具图标
  const delCurrentToolSelectArray = (value) => {
    currentToolSelectArray.value = currentToolSelectArray.value.filter((item) => item != value);
    if (value == 'Bidding') {
      startBidding(false);
      stopTrajectory('car_layerdrawLine');
      closePoint('car_layerdrawLine');
      closePoint('drawPoint');
      closePoint('clickView');
      closePoint('hasPointView');
      closePoint('noPointView');

      useDrawPointStore().modifyTrail = false;
      closeOutputPoint();
      initChangeMap(false);
    } else if (value == 'flowCar') {
      flowCarList.value.forEach((item) => {
        stopTrajectory(item);
        closePoint(item);
      });
      closePoint(value);
      delFlowCarList();
      initChangeMap(false);
    } else if (value == '3dChange') {
      change3DTheme(false);
      initChangeMap();
    } else if (value == 'autoPlay') {
      autoNum.value = 0;
      clearInterval(timeInterval.value);
      timeInterval.value = null;
    } else {
      closePoint(value);
    }
    fullExtent();
  };

  return {
    currentToolSelectArray,
    flowCarList,
    selectPartKey,
    currentAllPointList,
    pushFlowCarList,
    delFlowCarList,
    setCurrentToolSelectArray,
    delCurrentToolSelectArray,
    mapTheme,
    changeTheme,
    autoPlayType,
    autoPlayTime,
    getSprinkleSomeByType,
    autoPlayFun,
    timeInterval,
    intervalFlag,
    autoNum,
    timeArr,
    currentTimePoint
  };
});