squi-HD/src/components/MarkerMap/index.tsx

import {
  defineComponent,
  reactive,
  PropType,
  onMounted,
  watchEffect,
  watch,
  computed,
  onUnmounted,
} from 'vue';
import {
  ResourceItemDetail,
  getResourceItem,
  ResourceItemDetailResponse,
} from '@/api/resource';
import { useRoute, useRouter } from 'vue-router';
import isString from 'lodash/isString';
import useMarkerStore, { MarkerType } from '@/store/useMarkerStore';
import MapView from '../MapView';
import { useDaHuaStore,useMainStore } from '@/store';

import emitter from '@/utils/mitt';

/** @ts-ignore */
import icon_map_yjcl from '@/assets/icons/home/yjcl.svg';
/** @ts-ignore */
import icon_map_yjsj from '@/assets/icons/home/yjsj.svg';
/** @ts-ignore */
import icon_map_yjdw from '@/assets/icons/home/yjdw.svg';
/** @ts-ignore */
import icon_map_yjdw_w from '@/assets/icons/home/icon_map_yjdw_w.svg';
/** @ts-ignore */
import icon_map_yjck from '@/assets/icons/home/yjck.svg';
/** @ts-ignore */
import icon_map_yjck_w from '@/assets/icons/home/icon_map_yjck_w.svg';
/** @ts-ignore */
import icon_map_spjk from '@/assets/icons/home/spjk.svg';
/** @ts-ignore */
import icon_map_spjk_offline from '@/assets/icons/home/spjkoffline.svg';
/** @ts-ignore */
import icon_map_dcz from '@/assets/icons/home/icon_map_dcz.svg';
/** @ts-ignore */
import icon_map_dpf from '@/assets/icons/home/dpf.svg';
/** @ts-ignore */
import icon_map_dbsb from '@/assets/icons/home/dbsb.svg';

/** @ts-ignore */
import icon_map_dbsblx from '@/assets/icons/home/dbsblx.svg';



// @ts-ignore
import icon_map_traffic from '@/assets/icons/detail/source2@2x.png';

import './index.scss';
import {
  GET_INCIDENT_DIALOG_HTML,
  GET_TEAM_DIALOG_HTML,
  GET_VEHICLES_DIALOG_HTML,
  GET_VIDEO_DIALOG_HTML,
  GET_WAREHOUSE_DIALOG_HTML,
  GET_SINGLE_DEVICE_DIALOG_HTML,
  renderElement,
} from './dialog';
import { IncidentItemDetail } from '@/api/incident';
import { useIncidentStore } from '@/store';
import Popup from '../Popup';
import { ElMessage } from 'element-plus';
import { isEmpty, xor } from 'lodash';
import clsx from 'clsx';
import { SingleDeviceItem } from '@/api/resource';

const MARKER_MAP_TYPES = [
  // '待派发事件',
  // '待处置事件',
  '路况信息',
  '视频监控',
  '应急车辆',
  '应急队伍',
  '应急仓库',
  '应急事件',
  '单兵',
] as const;

export type MarkerMapType = typeof MARKER_MAP_TYPES[number];

interface State {
  map: any;
  types: MarkerMapType[];
  trafficLayerIds: any[];
  timer?: NodeJS.Timer | null;
  trafficStatus: boolean;
  markers: MarkerType[];
  positions: string[];
  hasTypes: string[];
  markCircle: any;
  markCirclelayer:any;
  // theSocket: null;
}

interface ActionType {
  type: MarkerMapType;
  hasActioned: boolean;
  action: Function;
  remove: Function;
}

// locationType + resourceType
const RESOURCE_ICON_MAP = {
  '11': icon_map_yjck_w, // 水上 仓库
  '21': icon_map_yjck, // 陆上 仓库
  '12': icon_map_yjdw_w, // 水上 队伍
  '22': icon_map_yjdw, // 陆上 队伍
  '13': icon_map_yjcl, // 水上 车辆
  '23': icon_map_yjcl, // 陆上 车辆
};

const getResourceIcon = (locationType: string, resourceType: string) => {
  // @ts-ignore
  return RESOURCE_ICON_MAP[locationType + resourceType] || '';
};

// 路况信息刷新间隔
const REFRESH_TRAFFIC_TIME = 60000;

// let theSocket = null;

// let vPlayArea =null;

const getIncidentImage = (status: MarkerType['status']) =>
  status?.toString() === '1'
    ? icon_map_yjsj
    : status?.toString() === '2'
    ? icon_map_dpf
    : status?.toString() === '3'
    ? icon_map_dcz
    : icon_map_yjsj;

export default defineComponent({
  name: 'MarkerMap',
  props: {
    adrsMapTypes: {
      type: Array as PropType<string[]>,
      default: MARKER_MAP_TYPES,
    },
    marker: Object as PropType<IncidentItemDetail | undefined | null>,
    readonly: Boolean,
  },
  setup(props, ctx) {
    const state = reactive<State>({
      map: null,
      types: [],
      trafficLayerIds: [],
      timer: undefined,
      trafficStatus: false,
      markers: [],
      positions: [],
      hasTypes: [],
      markCircle: {},
      markCirclelayer: {},
      // theSocket:null
    });


      
    const store = useMarkerStore();
    const mainstore = useMainStore();
    const incidentStore = useIncidentStore();
    const daHuaStore = useDaHuaStore();
    const router = useRouter();
    const route = useRoute();
    // const theSocket = null;

    const adrsMapTypes = computed(() =>
      props.adrsMapTypes.map((i) => ({
        name: i,
        icon: ((name) => { 
          switch(name)
          { 
            case "路况信息": return icon_map_traffic;
            case "应急事件": return icon_map_dpf;
            case "视频监控": return icon_map_spjk;
            case "应急车辆": return icon_map_yjcl;
            case "应急队伍": return icon_map_yjdw;
            case "应急仓库": return icon_map_yjck;
            case "单兵": return icon_map_dbsb;
             
          }

        })(i),
        disabled: route.query.id && i === '应急事件',
      })),
    );

    const actionTypes = computed<ActionType[]>(() => [
      {
        type: '路况信息',
        hasActioned: state.trafficStatus,
        action: toggleControlTraffic,
        remove: toggleControlTraffic,
      },
      {
        type: '应急事件',
        hasActioned: state.hasTypes.includes('应急事件'),
        action: () =>
          handleAddMarkers('应急事件', store.incident, icon_map_dpf),
        remove: () => handleRemoveMarkers('应急事件', store.incident),
      },

      {
        type: '视频监控',
        hasActioned: state.hasTypes.includes('视频监控'),
        action: () =>
          // console.log(store.videoSurveillance);
          handleAddMarkers('视频监控', store.videoSurveillance, icon_map_spjk),
        remove: () => handleRemoveMarkers('视频监控', store.videoSurveillance),
      },
      {
        type: '应急车辆',
        hasActioned: state.hasTypes.includes('应急车辆'),
        action: () =>
          handleAddMarkers('应急车辆', store.emergencyVehicles, icon_map_yjcl),
        remove: () => handleRemoveMarkers('应急车辆', store.emergencyVehicles),
      },
      {
        type: '应急队伍',
        hasActioned: state.hasTypes.includes('应急队伍'),
        action: () =>
          handleAddMarkers('应急队伍', store.emergencyTeam, icon_map_yjdw),
        remove: () => handleRemoveMarkers('应急队伍', store.emergencyTeam),
      },
      {
        type: '应急仓库',
        hasActioned: state.hasTypes.includes('应急仓库'),
        action: () =>
          handleAddMarkers('应急仓库', store.emergencyWarehouse, icon_map_yjck),
        remove: () => handleRemoveMarkers('应急仓库', store.emergencyWarehouse),
      },
      {
        type: '单兵',
        hasActioned: state.hasTypes.includes('单兵'),
        action: () =>
          handleAddMarkers('单兵', store.singleDevice, icon_map_dbsb),
        remove: () => handleRemoveMarkers('单兵', store.singleDevice),
      },
    ]);

    const getMarkerPopupHTML = (type: MarkerMapType, marker: MarkerType) => {
      switch (type) {
        case '应急事件':
        // case '待派发事件':
        // case '预警事件':
        default:
          return GET_INCIDENT_DIALOG_HTML(marker, async () => {
            marker.id && (await incidentStore.getIncidentItem(marker.id));
            await router.push(`/incidentDetail?id=${marker?.id}`);
            handleSetDetailMarker(marker);
            store.currentIncident = marker;
          });
        case '单兵': {
          var callback = () => {
               if(marker['stat']==='online'){
                mainstore.videoisshow = true;
                // // try {
                  // daHuaStore.DAHUAUserObj(marker["userId"]).then(deviceUser=>{
                    mainstore.videotitle = marker["userName"] + "";
                  // });

                  const userid = marker['userId'];
                  const dievicecode = marker['deviceCode']+"";

                  const channelid = marker['channelId']+"";
                  window.isdanbing = true;

                  async function cremetting(){
                    await window.metting.getLocalUserInfo();
                    const res = await window.metting.queryUser(userid);
    
                    window.metting.localUserInfo.name = "danbing_Meeting";
    
                    await window.metting.creatMeeting();
                    await window.metting.startInvite({
                        userName: res.userName,
                        userId: res.userCode,
                        region: res.paasId,
                        type: "single",
                        // speak:'true',
                        number: res.userPhone,
                        deviceId: dievicecode,
                        channelId: channelid,
                    });
                  }
                  

                  if(window.metting){
                    const meeting = window.metting;
                    meeting.settargetId("vPlayArea");
                      meeting.playVideo({
                        type: 'single',
                        deviceId: marker['deviceCode'],
                        channelId: channelid,
                      });
                      cremetting();
                     
                      setTimeout(() => {
                        try{
                          if(window.vPlayArea){
                            window.vPlayArea.resize();
                            window.vPlayArea.dragResize(0,0,0,0)
                        }
                        }catch(E){
                        }
                        
                      }, 500);
                      
      
                   }else{
                    const meeting = new Meeting();
                    if(window.theSocket){
                      meeting.settargetId("vPlayArea");
                      meeting.playVideo({
                        type: 'single',
                        deviceId: marker['deviceCode'],
                        channelId: channelid,
                      });
                      window.metting = meeting;
                      setTimeout(() => {
                        try{
                          if(window.vPlayArea){
                            window.vPlayArea.resize();
                            window.vPlayArea.dragResize(0,0,0,0)
                        }
                        }catch(E){
                        }
                        
                      }, 500);
      
                    }else{
                      meeting.openClient(() => {
                      
                        meeting.settargetId("vPlayArea");
                        meeting.playVideo({
                          type: 'single',
                          deviceId: marker['deviceCode'],
                          channelId: channelid,
                        });
                        window.metting = meeting;
                        cremetting();
      
                        setTimeout(() => {
                          try{
                            if(window.vPlayArea){
                              window.vPlayArea.resize();
                              window.vPlayArea.dragResize(0,0,0,0)
                          }
                          }catch(E){
                          }
                          
                        }, 1000);
                        
                     
                      });
      
                    }
      
                    }

               }else{
                ElMessage.warning('设备离线，请联系大华相关人员');
               }            
          
          };
          return GET_SINGLE_DEVICE_DIALOG_HTML(
            marker as SingleDeviceItem,
            callback,
          );
        }

        case '应急仓库':
          return GET_WAREHOUSE_DIALOG_HTML(marker);
        case '应急车辆':
          return GET_VEHICLES_DIALOG_HTML(marker);
        case '应急队伍':
          return GET_TEAM_DIALOG_HTML(marker);

        case '视频监控':
          return GET_VIDEO_DIALOG_HTML(marker, (type=1) => {
            window.isdanbing = false;
            if (marker['status'] == 1) {
              // mainstore.videourl =
              //   (import.meta.env.VITE_DH_SERVER as string) +
              //   '/videoplay.html?channelId=' +
              //   marker['deviceCode'];
              const channelid = marker['channelId']+"";
              if(type==1){
                mainstore.videoisshow = true;
              mainstore.videotitle = marker['name'] + "";
            
              
           
             if(window.metting){
              const meeting = window.metting;
              meeting.settargetId("vPlayArea");
                meeting.playVideo({
                  type: 'single',
                  deviceId: marker['deviceCode'],
                  channelId: channelid,
                });
                setTimeout(() => {
                  try{
                    if(window.vPlayArea){
                      window.vPlayArea.resize();
                      window.vPlayArea.dragResize(0,0,0,0)
                  }
                  }catch(E){
                  }
                  
                }, 500);
                

             }else{
              const meeting = new Meeting();
              if(window.theSocket){
                meeting.settargetId("vPlayArea");
                meeting.playVideo({
                  type: 'single',
                  deviceId: marker['deviceCode'],
                  channelId: channelid,
                });
                window.metting = meeting;
                setTimeout(() => {
                  try{
                    if(window.vPlayArea){
                      window.vPlayArea.resize();
                      window.vPlayArea.dragResize(0,0,0,0)
                  }
                  }catch(E){
                  }
                  
                }, 500);

              }else{
                meeting.openClient(() => {
                
                  meeting.settargetId("vPlayArea");
                  meeting.playVideo({
                    type: 'single',
                    deviceId: marker['deviceCode'],
                    channelId: channelid,
                  });
                  window.metting = meeting;

                  setTimeout(() => {
                    try{
                      if(window.vPlayArea){
                        window.vPlayArea.resize();
                        window.vPlayArea.dragResize(0,0,0,0)
                    }
                    }catch(E){
                    }
                    
                  }, 1000);
                  
               
                });

              }

              }

             }
             if(type==2){
              window.indexp = (window.indexp == 1?2:1);
              const meeting = new Meeting();
              if(window.theSocket){
                meeting.settargetId("relvideo"+window.indexp);
                meeting.playVideo({
                  type: 'single',
                  deviceId: marker['deviceCode'],
                  channelId: channelid,
                });

              }else{
                meeting.openClient(() => {
                  meeting.settargetId("relvideo"+window.indexp);
                  meeting.playVideo({
                    type: 'single',
                    deviceId: marker['deviceCode'],
                    channelId: channelid,
                  });
                });
              }
            }
              
              // // try {
              //   const meeting = new Meeting();
               
              //   meeting.closeVideo();

              //   meeting.openClient(() => {
              //     meeting.settargetId("");
              //     meeting.playVideo({
              //       type: 'single',
              //       deviceId: marker['deviceCode'],
              //       channelId: channelid,
              //     });
              //   });

                // mainstore.videohandle = meeting;

              // } catch (E) { }
             
              // const DAHUA = document.getElementById('DAHUA') as HTMLIFrameElement;
              // DAHUA?.contentWindow?.postMessage(
              //   {
              //     key: 'video',
              //     value: marker['userId'],
              //     deviceId: marker['deviceCode'],
              //     channelId: marker['channelId'],
              //   },
              //   '*',
              // );
              // daHuaStore.dahuaUserVisible = true;
            }else{
              ElMessage.warning('设备离线，请联系大华相关人员');
            }
          });
      }
    };

    const videoplay = (item: { type: string; userId: any; channelId: any }) => {
      // console.log('播放视频');
      // console.log(item);
      if (!window.theSocket.websocket) {
        ElMessage.warning('请先打开视频插件');
        return;
      }
      if (item.type == 'client') {
        window.slectOptionmini(item.userId).then((arr: any) => {
          if (arr) {
            window.vPlayArea.openAppVideo(arr);
          }
        });
      } else if (item.type == 'single') {
        //播放单兵视频
        pullFlow(item.channelId);
      } else if (item.type == 'vehicle') {
        //播放车载视频
        pullFlow(item.channelId);
      } else if (item.type == 'uav_dev') {
        //播放无人机视频
        pullFlow(item.channelId);
      }
    };

    const pullFlow = (channelId: any) => {
      channelId &&
        window.vPlayArea &&
        window.vPlayArea.realTimeVideo([{ channelId }]);
    };

    const initSocket = (
      userCode: string,
      memberObj: {
        userName?: any;
        userId: any;
        region?: any;
        type: string;
        number?: any;
        deviceId?: any;
        channelId: any;
      },
    ) => {
      const self = this;
      // console.log(userCode);
      localStorage.setItem('userId', userCode);
      //初始websocket实例，保存在window中方便调用。一个浏览器tab页面只能初始化一次。所有的控件窗口，通过该websocket实例去生成不同的窗口实例，不同的控件窗口通过自己的窗口实例去调用初始化、关闭、隐藏等
      window.theSocket = new window.InitWebSocketClass(
        userCode,
        localStorage.getItem('DAHUA_token'),
        {
          //客户端登陆成功通知;
          loginSuccess: (v: any) => {
            // console.log(2222222222222222);
            console.log('loginSuccess-->', v);
            initWnd();
          },
          //客户端窗口被拉起通知
          onCreateVideoSuccess: (v: any) => {
            console.log('客户端onCreateVideoSuccess-----', v);
          },
          //重点:统一分发客户端ws消息;vue 可以统一用$bus分发.第三方消息分发自定
          onSocketBackInfos: (data: {
            method: string;
            params: { result: number; handleName: string };
          }) => {
            //视频窗口创建成功通知
            if (
              data &&
              data.method === 'createVideoDialogReuslt' &&
              data.params.result === 0
            ) {
              if (data.params.handleName === '#vPlayArea') {
                //客户端窗口创建好后,界面显示窗口;
                window.vPlayArea.resize();
                ElMessage.warning('视频窗口创建成功！');
                videoplay(memberObj);
              }
            }
          },
        },
      );
      // console.log(theSocket);
      //socket实例初始化websocket回调方法;
      window.theSocket
        .initWebSocket()
        .then((v: any) => {
          if (v) {
            ElMessage.warning('视频插件登陆完成!');
          }
        })
        .catch(() => {
          ElMessage.warning('若要观看实时视频，请先安装视频插件');
        });
    };

    const initWnd = () => {
      // console.log(1111);
      //左边窗口类型参数 分割 2行2列
      const typeObj = {
        rows: 2,
        cols: 2,
        wndSpaceing: 10,
        embedVideoMode: true,
        playerCtrlBarEnable: false,
        displayMode: 0,
        playMode: 0,
        playParams: {},
      };
      //左边窗口实例
      window.vPlayArea = new window.VideoPlay(
        '#vPlayArea',
        window.theSocket.websocket, //一个浏览器tab页面公用一个
        window.theSocket.socketCode, //一个浏览器tab页面公用一个
        typeObj,
      );
      //左边窗口初始化
      window.vPlayArea.init();
    };

    const updateTrafficSource = () => {
      if (state.map.getSource('Traffic')) {
        state.map.removeSource('Traffic');
      }
      state.map.addSource('Traffic', {
        type: 'vector',
        traffic: true,
        tiles: [
          'mineserver://data/dynamic-traffic/ertic?servicetype=0&z={z}&x={x}&y={y}',
        ],
      });
    };
    const updateTrafficLayerVisibility = (v: 'none' | 'visible') => {
      state.trafficLayerIds.forEach(function (id) {
        if (state.map?.getLayer(id)) {
          state.map?.setLayoutProperty(id, 'visibility', v);
        }
      });
    };
    const toggleControlTraffic = () => {
      if (state.trafficStatus) {
        state.trafficStatus = false;
        if (state.timer) {
          clearInterval(state.timer);
          state.timer = null;
        }
        updateTrafficLayerVisibility('none');
      } else {
        state.trafficStatus = true;
        if (state.timer) {
          clearInterval(state.timer);
          state.timer = null;
        }
        updateTrafficSource();
        state.timer = setInterval(function () {
          updateTrafficSource();
        }, REFRESH_TRAFFIC_TIME);
        updateTrafficLayerVisibility('visible');
      }
    };
    const handleAddMarkers = (
      type: MarkerMapType,
      markers: State['markers'],
      image: any,
    ) => {
      // console.log(state.markers);
      state.markers.push(
        ...markers.map((i) => {
          
          var nextImage1 =
            type === '应急事件'
              ? getIncidentImage(i?.status)
              : i.locationType && i.resourceType
              ? getResourceIcon(
                  i.locationType.toString(),
                  i.resourceType.toString(),
                )
                : image;
          
          try {
            // state.map.removeSource('pointSource');
            // state.map.removeLayer('polygonLayer');
             if (type === '应急事件') {
               state.markCircle = {
                 type: 'geojson',
                 data:turf.circle(
                   [
                     parseFloat(i.locations?.split(',')[0] ?? '0'),
                     parseFloat(i.locations?.split(',')[1] ?? '0'),
                   ],
                   5,
                   {
                     steps: 499,
                     units: 'kilometers',
                     properties: { foo: 'bar' },
                   },
                 ),
               
             
               };
               // mySource = state.markCircle;
               state.map.addSource('pointSource', state.markCircle);
               state.map.addSource('pointSource1', {
                 type: 'geojson',
                 data: turf.circle(
                   [
                     parseFloat(i.locations?.split(',')[0] ?? '0'),
                     parseFloat(i.locations?.split(',')[1] ?? '0'),
                   ],
                   10,
                   {
                     steps: 64,
                     units: 'kilometers',
                     properties: { foo: 'bar' },
                   },
                 ),
               });

               state.markCirclelayer = {
                 id: 'polygonLayer',
                 type: 'fill',
                 source: 'pointSource',
                 layout: {
                   visibility: 'visible',
                 },
                 paint: {
                   'fill-antialias': true, //2d的半径是实际尺寸，单位是米，不是像素值
                   'fill-color': '#143981',
                   'fill-opacity': 0.5,
                   'fill-outline-color': 'red',
                   'fill-translate':[45,45]
                   //  'fill-outline-width':20
                 }
               };

              
               state.map.addLayer(state.markCirclelayer);
                state.map.addLayer({
                  id: 'polygonLayer2',
                  type: 'line',
                  source: 'pointSource',
                  layout: {},
                  paint: {
                    // 'fill-color': '#0dacfc',
                    // 'fill-opacity': 0.2,
                    // 'fill-translate': [-10, -10],
                    'line-color': '#143981',
                    'line-width': 5,
                    'line-translate': [45, 45],
                  },
                });
             
               state.map.addLayer({
                 id: 'polygonLayer3',
                 type: 'fill',
                 source: 'pointSource1',
                 layout: {
                   visibility: 'visible',
                 },
                 paint: {
                   'fill-antialias': true,
                   'fill-color': '#143981',
                   'fill-opacity': 0.3,
                   'fill-translate': [45, 45],
                 },
                 minzoom: 7, //2d不支持
                 maxzoom: 17.5, //2d不支持
               });
                state.map.addLayer({
                  id: 'polygonLayer1',
                  type: 'line',
                  source: 'pointSource1',
                  layout: {},
                  paint: {
                    // 'fill-color': '#0dacfc',
                    // 'fill-opacity': 0.2,
                    // 'fill-translate': [-10, -10],
                    'line-color': '#143981',
                    'line-width': 5,
                    'line-translate':[45,45]
                  },
                });
               
              
               
             }
          } catch (E) {}
         
          
          
          if (type == "视频监控") { 
            if (i.isOnline == false) { 
               nextImage1 = icon_map_spjk_offline;
            }
          }

          if (type == "单兵") { 
            if (i.stat && i.stat==='offline') { 
               nextImage1 = icon_map_dbsblx;
            }
          }
          const nextImage = nextImage1; 

          const popup = new window.minemap.Popup({
            anchor: 'left',
            closeOnClick: true,
            closeButton: false,
            offset: [10, 25],
            maxWidth: 'max-content',
            // autoPan: true,
          }).setDOMContent(getMarkerPopupHTML(type, i));
          popup.on('open', function () {
             getResourceItem(i.id ?? 0).then(
               (res: ResourceItemDetailResponse) => {
                 var element = document.getElementById('tbl-' + i.id);
                  var header = [
                    '序号',
                    '名称',
                    '型号',
                    '规格',
                    '仓储数量',
                    '可用数量',
                    '单位',
                  ];
                 try {
                   element.innerHTML = ` <tr>
        ${header.map((i) => '<th>' + i + '</th>').join('')}
       </tr>${res.data.resourceDetailList?.map((itemc,index) => { 
         return `<tr><td>${index + 1}</td><td>${itemc.name ?? '-'}</td><td>${
           itemc.model ?? '-'
         }</td><td>${itemc.size ?? '-'}</td><td>${itemc.num ?? '-'}</td><td>${
           itemc.availableNum ?? '-'
         }</td><td>${itemc.unit ?? '-'}</td></tr>`;
       }).join("")}`;
                 } catch (error) {}
               },
             );
          });
          // popup.on('onmouseup',function(){
          //   alert(11)
          // });
          
          // popup.getElement().onmouseout = ()=>{
          //   alert(12)
          // }
          // debugger

          var imagep = renderElement(nextImage);
          if (type === '应急事件') {
            imagep.style.width = (24 * 3 * 2) / 576 + 'rem';
            imagep.style.height = (25 * 3 * 2) / 576 + 'rem';
          }
        var markp = 
              new window.minemap.Marker(imagep, {
                offset: [-25, -25],
              });

        if(type==="单兵"){
          i.name = i.userName;
        }

        imagep.onmouseover = ()=>{
          //console.log(222)
           
           imagep.innerHTML = `<div style="position:relative"><div class="tipc">${i.name}</div></div>`
           markp.setZIndex(111);
        };
        imagep.onmouseout = ()=>{
         
            imagep.innerHTML = "";
            markp.setZIndex(0);
        };
          

          return {
            locations: i.locations,
            popup,
            marker: i.locations && markp.setLngLat({
                  lng: ((i) => { var ii = parseFloat(i.locations?.split(',')[0] ?? "0"); return ii; })(i),
                  lat: ((i) => { var ii = parseFloat(i.locations?.split(',')[1] ?? "0"); return ii>90?89:ii<-90?-89:ii; })(i) ,
                })
                .setPopup(popup)
                .addTo(state.map),
          };
        }),
      );
      state.positions.push(...markers.map((i) => i.locations).filter(isString));

      handleFitBounds();
    };
    const handleFitBounds = () => {
      if (state.positions.length === 0) {
        return;
      }

      const locations = state.positions.map((i) => i.split(',').map(Number));

      const leftTop = locations.reduce((carry, next) => {
        if (carry.length === 0) return next;
        var x = Math.min(carry[0], next[0]);
        var y = Math.max(carry[1], next[1]);

        return [x<118?118:x, y>35?35:y<30?30:y];
      }, []);
      // console.log(leftTop)

      const rightBottom = locations.reduce((carry, next) => {
        if (carry.length === 0) return next;
        return [Math.max(carry[0], next[0]), Math.min(carry[1], next[1])];
      }, []);

      const leftTopBounds: number[][] = new window.minemap.LngLat(...leftTop)
        .toBounds(5000)
        .toArray();

      const rightBottomBounds: number[][] = new window.minemap.LngLat(
        ...rightBottom,
      )
        .toBounds(5000)
        .toArray();

      state.map.fitBounds([
        rightBottomBounds.reduce((carry, next) => {
          if (carry.length === 0) return next;
          return [Math.max(carry[0], next[0]), Math.min(carry[1], next[1])];
        }, []),
        leftTopBounds.reduce((carry, next) => {
          if (carry.length === 0) return next;
          return [Math.min(carry[0], next[0]), Math.max(carry[1], next[1])];
        }, []),
      ]);
    };
    const handleRemoveMarkers = (
      type: MarkerMapType,
      markers: State['markers'],
    ) => {
   
      state.hasTypes = state.hasTypes.filter((t) => t !== type);
      const locations = markers.map((i) => i.locations);
      state.markers.forEach((m) => {
        if (locations.includes(m.locations)) {
          m.marker?.remove();
          m.popup?.remove();
          m.popup = null;
          m.marker = null;
        }
      });
      state.markers = state.markers.filter(
        (m) => !locations.includes(m.locations),
      );
      state.positions = state.positions.filter((p) => !locations.includes(p));

      handleFitBounds();
    };
    const handleRemoveAllMarkers = () => {
      try {
        state.map.removeSource('pointSource');
         state.map.removeSource('pointSource1');
        state.map.removeLayer('polygonLayer');
        state.map.removeLayer('polygonLayer1');
        state.map.removeLayer('polygonLayer2');
        state.map.removeLayer('polygonLayer3');
        

      } catch (E) { }
     
      state.markers.forEach((m) => {
        m.marker?.remove();
        m.popup?.remove();
      });
      state.markers = [];
      state.positions = [];
    };

    const handleSetDetailMarker = (marker: MarkerType) => {
      handleRemoveAllMarkers();
      const locations = marker.locations?.split(',').map(Number);

      if (!locations) {
        ElMessage.error({ message: '该点位无地址经纬度' });
        return;
      }

      // 获取事件周围的 5km 内的 监控点
      const bounds: number[][] = new window.minemap.LngLat(...locations)
        .toBounds(10000)
        .toArray();

      const videos = store.videoSurveillance.reduce((carry, next) => {
        const [lng, lat] = next.locations?.split(',') ?? [];
        // bounds [right-bottom[lng, lat],left-top[lng, lat], ]
        if (
          Number(lng) > bounds[0][0] &&
          Number(lng) < bounds[1][0] &&
          Number(lat) > bounds[0][1] &&
          Number(lat) < bounds[1][1]
        ) {
          carry.push(next);
        }
        return carry;
      }, [] as MarkerType[]);

      // 开启路况信息
      // if (!state.types.includes('路况信息')) {
      //   state.types.push('路况信息');
      //   state.hasTypes.push('路况信息');
      //   toggleControlTraffic();
      // }

      handleAddMarkers('应急事件', [marker], icon_map_dpf);
      handleAddMarkers('视频监控', videos, icon_map_spjk);
      // state.markers[0].marker.togglePopup();
    };

    onMounted(async () => {
      window.minemap.util.getJSON(
        (import.meta.env.VITE_MAP_SERVER as string) +
          '/service/solu/style/id/12878',
        function (error, data) {
          data.layers.forEach(function (layer: any) {
            //判断是否道路线图层
            if (
              layer.type == 'line' &&
              layer.source == 'Traffic' &&
              layer['source-layer'] == 'Trafficrtic'
            ) {
              state.trafficLayerIds.push(layer.id);
            }
          });
        },
      );
      try {
        const html = document.createElement("div");
        actionTypes.value.forEach(atypes => {
          if (atypes?.action == null) return;
          const name = atypes.type;
          const c = (atypes?.action?.toString().split("handleAddMarkers"));
          if (c.length <= 1) return;
          const args1 = c[1].replaceAll("(","").replaceAll(")","");
          // debugger
          const args = args1.split(",");
         
          if (eval(args[2]) == undefined) return;
          const div = document.createElement("div");
          div.className = "tipitem"

          const imagee = renderElement((eval(args[2])));
          div.append(imagee);
          const c1 = document.createElement("span"); c1.innerHTML = (name);
          div.append(c1);
          html.append(div);
          
        });
        state.map["tipcontentRef"].append(html);
      } catch (ee) {

      }

      state.map.on('load', function () {
        updateTrafficSource();
        //如果底图没有配置路况图层，需要自己手动增加
        state.map.addLayer({
          id: 'trafficlines',
          type: 'line',
          source: 'Traffic',
          'source-layer': 'Trafficrtic',
          layout: {
            'line-join': 'round',
            'line-cap': 'round',
          },
          paint: {
            'line-color': {
              property: 'status',
              stops: [
                [0, '#999999'],
                [1, '#66cc00'],
                [2, '#ff9900'],
                [3, '#cc0000'],
                [4, '#9d0404'],
              ],
            },
            'line-width': {
              stops: [
                [5, 1],
                [18, 3],
              ],
              base: 1.2,
            },
          },
        });

        state.trafficLayerIds.push('trafficlines');
        state.trafficStatus = false;
        updateTrafficLayerVisibility('none');

        store.getAllResources();
        store.getAllsingleDevice();
        store.getAllvideoDevice();
        store.getHDIncidentList();
      });
      if (!route.query.id) return;
      // 如果存在id
      await incidentStore.getIncidentItem(route.query.id as string);
      // @ts-ignore
      handleSetDetailMarker(incidentStore.incidentDetail.baseInfo ?? {});

      // const vPlayAreaEl = document.getElementById('vPlayArea');

      // vPlayAreaEl &&
        // (vPlayAreaEl.style.height = window.innerHeight - 20 + 'px');
      // window.theSocket && window.theSocket.resize();
    });


    emitter.on('dosearchstart', () => { handleRemoveMarkers('应急仓库', store.emergencyWarehouse);
    });
    emitter.on('dosearchend', () => {
      handleAddMarkers('应急仓库', store.emergencyWarehouse, icon_map_yjck);
    });
    onUnmounted(() => { 
      emitter.off('dosearchstart', () => { });
      emitter.off('dosearchend', () => {});
    })
    watch(
      () => store?.currentIncident,
      (next) => {
        if (!isEmpty(next)) {
          handleSetDetailMarker({
            ...next,
          });
        } else {
          handleRemoveAllMarkers();
          if (state.types.includes('应急事件')) {
            
            state.types.forEach((next) => {
              actionTypes.value.forEach((item) => {
                if (next === item.type) {
                  state.hasTypes.push(item.type);
                  item.action();
                }
              });
            });
          } else {
            state.map?.flyTo({
              center: [118.29564, 33.97441],
              zoom: 14,
              bearing: 10,
              pitch: 30,
              duration: 2000,
            });
          }
        }
      },
    );

    watch(
      () => state.types,
      (next) => {
        actionTypes.value.forEach((item) => {
          if (next.includes(item.type) && !item.hasActioned) {
            state.hasTypes.push(item.type);
            item.action();
          }
          if (!next.includes(item.type) && item.hasActioned) {
            item.remove();
          }
        });
      },
    );

    return () => (
      <div class="task-map-container">
        <MapView v-model:map={state.map} />
        {/* <div style="width:35%;height:20%;background-color:blue"> */}
        {/*<div id='vPlayArea'  style="width:30%;"/>*/}
        {/* </div> */}

        <div
          class={clsx('address-type-card-container', {
            ['in-detail']: props.readonly,
          })}>
          <Popup
            class={clsx('address-type-card', {
              ['in-detail']: props.readonly,
            })}>
            <el-checkbox-group v-model={state.types}>
              {adrsMapTypes.value &&
                adrsMapTypes.value?.map((t) => (
                  <>
                    {!t.disabled && (
                      <el-checkbox key={t} class="card-item" label={t.name}>
                        <span>
                          <img class="tipicon" v-show={t.icon!=null} src={t.icon} />
                          {t.name}
                        </span>
                      </el-checkbox>
                    )}
                  </>
                ))}
            </el-checkbox-group>
            <i class="card-border-bottom-left"></i>
            <i class="card-border-bottom-right"></i>
          </Popup>
        </div>
      </div>
    );
  },
});