fix: call dev api for demo

index.html

@@ -4,23 +4,23 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>交通运输应急监管系统</title>
+    <title>交通运输应急指挥系统</title>
     <link
       rel="stylesheet"
       href="https://minedata.cn/minemapapi/v2.1.0/minemap.css"
     />
     <script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js"></script>
     <script>
-      minemap.domainUrl = "https://minedata.cn";
-      minemap.dataDomainUrl = "https://minedata.cn";
-      minemap.serverDomainUrl = "https://minedata.cn";
-      minemap.spriteUrl = "https://minedata.cn/minemapapi/v2.1.0/sprite/sprite";
-      minemap.serviceUrl = "https://minedata.cn/service/";
+      minemap.domainUrl = 'https://minedata.cn';
+      minemap.dataDomainUrl = 'https://minedata.cn';
+      minemap.serverDomainUrl = 'https://minedata.cn';
+      minemap.spriteUrl = 'https://minedata.cn/minemapapi/v2.1.0/sprite/sprite';
+      minemap.serviceUrl = 'https://minedata.cn/service/';
 
       /**
        * key、solution设置
        */
-      minemap.key = "77ef70465c2d4888b3a5132523494b94";
+      minemap.key = '77ef70465c2d4888b3a5132523494b94';
       minemap.solution = 16857;
     </script>
     <script>
@@ -35,16 +35,16 @@
         var flexible = lib.flexible || (lib.flexible = {});
 
         if (metaEl) {
-          console.warn("将根据已有的meta标签来设置缩放比例");
+          console.warn('将根据已有的meta标签来设置缩放比例');
           var match = metaEl
-            .getAttribute("content")
+            .getAttribute('content')
             .match(/initial\-scale=([\d\.]+)/);
           if (match) {
             scale = parseFloat(match[1]);
             dpr = parseInt(1 / scale);
           }
         } else if (flexibleEl) {
-          var content = flexibleEl.getAttribute("content");
+          var content = flexibleEl.getAttribute('content');
           if (content) {
             var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
             var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
@@ -79,24 +79,24 @@
           scale = 1 / dpr;
         }
 
-        docEl.setAttribute("data-dpr", dpr);
+        docEl.setAttribute('data-dpr', dpr);
         if (!metaEl) {
-          metaEl = doc.createElement("meta");
-          metaEl.setAttribute("name", "viewport");
+          metaEl = doc.createElement('meta');
+          metaEl.setAttribute('name', 'viewport');
           metaEl.setAttribute(
-            "content",
-            "initial-scale=" +
+            'content',
+            'initial-scale=' +
               scale +
-              ", maximum-scale=" +
+              ', maximum-scale=' +
               scale +
-              ", minimum-scale=" +
+              ', minimum-scale=' +
               scale +
-              ", user-scalable=no"
+              ', user-scalable=no',
           );
           if (docEl.firstElementChild) {
             docEl.firstElementChild.appendChild(metaEl);
           } else {
-            var wrap = doc.createElement("div");
+            var wrap = doc.createElement('div');
             wrap.appendChild(metaEl);
             doc.write(wrap.innerHTML);
           }
@@ -108,38 +108,38 @@
             width = 540 * dpr;
           }
           var rem = width / 10;
-          docEl.style.fontSize = rem + "px";
+          docEl.style.fontSize = rem + 'px';
           flexible.rem = win.rem = rem;
         }
 
         win.addEventListener(
-          "resize",
+          'resize',
           function () {
             clearTimeout(tid);
             tid = setTimeout(refreshRem, 300);
           },
-          false
+          false,
         );
         win.addEventListener(
-          "pageshow",
+          'pageshow',
           function (e) {
             if (e.persisted) {
               clearTimeout(tid);
               tid = setTimeout(refreshRem, 300);
             }
           },
-          false
+          false,
         );
 
-        if (doc.readyState === "complete") {
-          doc.body.style.fontSize = 12 * dpr + "px";
+        if (doc.readyState === 'complete') {
+          doc.body.style.fontSize = 12 * dpr + 'px';
         } else {
           doc.addEventListener(
-            "DOMContentLoaded",
+            'DOMContentLoaded',
             function (e) {
-              doc.body.style.fontSize = 12 * dpr + "px";
+              doc.body.style.fontSize = 12 * dpr + 'px';
             },
-            false
+            false,
           );
         }
 
@@ -149,19 +149,19 @@
         flexible.refreshRem = refreshRem;
         flexible.rem2px = function (d) {
           var val = parseFloat(d) * this.rem;
-          if (typeof d === "string" && d.match(/rem$/)) {
-            val += "px";
+          if (typeof d === 'string' && d.match(/rem$/)) {
+            val += 'px';
           }
           return val;
         };
         flexible.px2rem = function (d) {
           var val = parseFloat(d) / this.rem;
-          if (typeof d === "string" && d.match(/px$/)) {
-            val += "rem";
+          if (typeof d === 'string' && d.match(/px$/)) {
+            val += 'rem';
           }
           return val;
         };
-      })(window, window["lib"] || (window["lib"] = {}));
+      })(window, window['lib'] || (window['lib'] = {}));
     </script>
   </head>
   <body>

src/api/common.ts

@@ -4,22 +4,26 @@ import { BaseResponse } from './type';
 /**
  * - 预案类型: zhdd_plan_type;
  * - 事件类型: zhdd_incident_type;
- * - 事件状态: zhdd_incident_status; - 可用于 事件页面右侧菜单
+ * - 事件状态 + 事件页面右侧菜单: zhdd_incident_status;
  * - 事件等级: zhdd_incident_level;
  * - 事件来源: zhdd_incident_source;
- * - 上报单位: zhdd_org_upload; - 可用于预案页面右侧菜单,
- * - 应急资源:zhdd_resource - 可用于资源页面右侧菜单
+ * - 上报单位 + 归属部门 + 预案页面右侧菜单 : zhdd_org_upload;
+ * - 应急资源 + 资源页面右侧菜单:zhdd_resource
  * - 首页标记点: zhdd_screen_type
+ * - 车辆类型: zhdd_car_type
+ * - 处置方案用户角色: zhdd_incident_task_role
  */
-export type DictType =
-  | 'zhdd_plan_type'
-  | 'zhdd_incident_type'
-  | 'zhdd_incident_status'
-  | 'zhdd_incident_level'
-  | 'zhdd_incident_source'
-  | 'zhdd_org_upload'
-  | 'zhdd_resource'
-  | 'zhdd_screen_type';
+ export type DictType =
+ | 'zhdd_plan_type'
+ | 'zhdd_incident_type'
+ | 'zhdd_incident_status'
+ | 'zhdd_incident_level'
+ | 'zhdd_incident_source'
+ | 'zhdd_org_upload'
+ | 'zhdd_resource'
+ | 'zhdd_screen_type'
+ | 'zhdd_car_type'
+ | 'zhdd_incident_task_role';
 
 export interface GlobalDict {
   dictLabel: string; // 字典标签

src/api/incident.ts

@@ -129,3 +129,14 @@ export const AddIncidentProcess = (params: IncidentProcessParam) =>
     url: `/incidentProcess`,
     data: params,
   });
+/** /zhdd/bigscreen/incident/list */
+
+export interface HDIncidentListResponse extends BaseResponse {
+  data?: NonNullable<IncidentItem>[];
+}
+
+/** 事件详情 */
+export const getHDIncidentList = () =>
+  request<HDIncidentListResponse>('GET', {
+    url: `/zhdd/bigscreen/incident/list`,
+  });

src/api/resource.ts

@@ -73,3 +73,33 @@ export const putResourceItem = (data: ResourceItemDetail) =>
     url: `/zhdd/resource`,
     data,
   });
+
+export interface ResourcesItem {
+  id?: string;
+  resourceType?: number;
+  name?: string;
+  address?: string;
+  longitude?: string;
+  latitude?: string;
+  manageUnit?: string;
+  carType?: null;
+  num?: number;
+  carryGoods?: null;
+  contactName?: string;
+  contactPhone?: string;
+  resourceDetailList?: null;
+}
+
+export interface AllResourcesResponse {
+  data: {
+    应急队伍: ResourcesItem[];
+    应急车队: ResourcesItem[];
+    应急仓库: ResourcesItem[];
+  };
+}
+
+/** 获取所有应急资源信息 */
+export const getAllResources = () =>
+  request<AllResourcesResponse>('GET', {
+    url: `/zhdd/resource/location`,
+  });

src/components/MarkerMap/constants.ts

@@ -9,209 +9,149 @@ const ICON_MAP_TYPES = {
   EMERGENCY_WAREHOUSE: { name: '应急仓库' as const },
 };
 
-export const EMERGENCY_TEAM = [
-  {
-    name: '宿迁学院',
-    location: '118.296459,33.929648',
-  },
-  {
-    location: '118.504329,33.903868',
-    name: '宿迁市大兴派出所',
-  },
-  {
-    location: '118.291631,33.884288',
-    name: '明珠派出所',
-  },
-  {
-    location: '118.790799,33.705629',
-    name: '来安派出所',
-  },
-];
 export const WARNING_INCIDENT = [
   {
     name: '宿迁学院',
-    location: '118.296459,33.929648',
-    id: '1',
+    locations: '118.296459,33.929648',
   },
   {
-    location: '118.504329,33.903868',
-    id: '2',
+    locations: '118.504329,33.903868',
     name: '宿迁市大兴派出所',
   },
   {
-    location: '118.291631,33.884288',
-    id: '3',
+    locations: '118.291631,33.884288',
     name: '明珠派出所',
   },
   {
-    location: '118.790799,33.705629',
-    id: '4',
+    locations: '118.790799,33.705629',
     name: '来安派出所',
   },
 ];
 
 export const PENDING_INCIDENT = [
   {
-    location: '118.288721,33.951047',
-    id: '1',
-    name: '宿迁宝龙城市广场',
-  },
-  {
-    location: '118.285469,33.950549',
-    id: '2',
-    name: '用世水韵城',
-  },
-  {
-    location: '118.290689,33.952558',
-    id: '3',
-    name: '金鹰天地广场(宿迁店)',
-  },
-  {
-    location: '118.300139,33.955468',
-    id: '4',
-    name: '苏宁广场',
-  },
-  {
-    location: '118.300149,33.953758',
-    name: '宿迁人民商场',
-    id: '5',
-  },
-  {
-    location: '118.262051,33.956094',
-    name: '鑫鑫奶站',
-    id: '6',
-  },
-  {
-    location: '118.27269,33.97476',
-    name: '恒茂商业广场',
-    id: '7',
-  },
-];
-export const EMERGENCY_VEHICLES = [
-  {
-    location: '118.288721,33.951047',
+    locations: '118.288721,33.951047',
     name: '宿迁宝龙城市广场',
   },
   {
-    location: '118.285469,33.950549',
+    locations: '118.285469,33.950549',
     name: '用世水韵城',
   },
   {
-    location: '118.290689,33.952558',
+    locations: '118.290689,33.952558',
     name: '金鹰天地广场(宿迁店)',
   },
   {
-    location: '118.300139,33.955468',
+    locations: '118.300139,33.955468',
     name: '苏宁广场',
   },
   {
-    location: '118.300149,33.953758',
+    locations: '118.300149,33.953758',
     name: '宿迁人民商场',
   },
   {
-    location: '118.262051,33.956094',
+    locations: '118.262051,33.956094',
     name: '鑫鑫奶站',
   },
   {
-    location: '118.27269,33.97476',
+    locations: '118.27269,33.97476',
     name: '恒茂商业广场',
   },
 ];
+
 export const PENDING_DISPOSAL_INCIDENT = [
   {
-    id: '1',
     name: '宿迁市中心血站',
-    location: '118.273349,33.954288',
+    locations: '118.273349,33.954288',
   },
   {
-    id: '2',
     name: '早点中心',
-    location: '118.296279,33.962388',
+    locations: '118.296279,33.962388',
   },
   {
-    id: '3',
-
     name: '宿迁市体育运动中心',
-    location: '118.266809,33.953318',
+    locations: '118.266809,33.953318',
   },
   {
-    id: '4',
-
     name: '宿迁市体育运动中心',
-    location: '118.268309,33.953778',
+    locations: '118.268309,33.953778',
   },
   {
-    id: '5',
-
     name: '宿迁市奥体中心',
-    location: '118.290087,34.004411',
+    locations: '118.290087,34.004411',
   },
   {
-    id: '6',
     name: '中心大酒店',
-    location: '118.245129,33.938378',
+    locations: '118.245129,33.938378',
   },
   {
-    id: '7',
     name: '中心庄',
-    location: '118.752399,34.118339',
+    locations: '118.752399,34.118339',
   },
   {
-    id: '8',
     name: '中心桥',
-    location: '118.404649,33.415169',
+    locations: '118.404649,33.415169',
   },
   {
-    id: '9',
     name: '国贸中心',
-    location: '118.270089,33.895378',
+    locations: '118.270089,33.895378',
   },
   {
-    id: '10',
     name: '泗洪县中心医院',
-    location: '118.243579,33.460968',
+    locations: '118.243579,33.460968',
   },
 ];
 
 export const VIDEO_SURVEILLANCE = [
   {
-    name: '宿迁市第一人民医院',
-    location: '118.269259,33.974288',
+    name: 'SUQIAN1234',
+    addr: '宿迁市第一人民医院',
+
+    locations: '118.269259,33.974288',
   },
   {
-    name: '宿迁市宿城区人民医院',
-    location: '118.300829,33.967868',
+    name: 'SUQIAN1234',
+    addr: '宿迁市宿城区人民医院',
+    locations: '118.300829,33.967868',
   },
   {
-    name: '宿迁市工人医院(新)',
-    location: '118.268819,33.939198',
+    name: 'SUQIAN1234',
+    addr: '宿迁市工人医院(新)',
+    locations: '118.268819,33.939198',
   },
   {
-    name: '南京鼓楼医院集团宿迁市人民医院',
-    location: '118.296529,33.945168',
+    name: 'SUQIAN1234',
+    addr: '南京鼓楼医院集团宿迁市人民医院',
+    locations: '118.296529,33.945168',
   },
   {
-    name: '宿迁市儿童医院(旧)',
-    location: '118.295179,33.947398',
+    name: 'SUQIAN1234',
+    addr: '宿迁市儿童医院(旧)',
+    locations: '118.295179,33.947398',
   },
   {
-    name: '宿迁市儿童医院',
-    location: '118.255491,33.949056',
+    name: 'SUQIAN1234',
+    addr: '宿迁市儿童医院',
+    locations: '118.255491,33.949056',
   },
   {
-    name: '宿迁市第一人民医院-药学部',
-    location: '118.268199,33.976638',
+    name: 'SUQIAN1234',
+    addr: '宿迁市第一人民医院-药学部',
+    locations: '118.268199,33.976638',
   },
   {
-    name: '宿迁市钟吾医院',
-    location: '118.275649,33.930958',
+    name: 'SUQIAN1234',
+    addr: '宿迁市钟吾医院',
+    locations: '118.275649,33.930958',
   },
   {
-    name: '宿迁市骨科医院',
-    location: '118.270939,33.959068',
+    name: 'SUQIAN1234',
+    addr: '宿迁市骨科医院',
+    locations: '118.270939,33.959068',
   },
   {
-    name: '钟吾医院-住院大楼',
-    location: '118.275809,33.929618',
+    name: 'SUQIAN1234',
+    addr: '钟吾医院-住院大楼',
+    locations: '118.275809,33.929618',
   },
 ];

src/components/MarkerMap/dialog.ts

@@ -1,26 +1,38 @@
 import { IncidentItem } from '@/api/incident';
 import { ResourceItemDetail } from '@/api/resource';
+import { useCommonStore } from '@/store';
 
 export const GET_INCIDENT_DIALOG_HTML = (
   item: IncidentItem,
   callback = () => {},
 ) => {
+  const commonStore = useCommonStore();
   const el = document.createElement('div');
+
   el.innerHTML = `
 <div>
   <div class="title">事件信息</div>
   <div class="content">
-    <div><span>标题：</span><span>${item?.name ?? '-'}</span></div>
-    <div><span>来源：</span><span>${item?.source ?? '-'}</span></div>
-    <div><span>类型：</span><span>${item?.type ?? '-'}</span></div>
-    <div><span>时间：</span><span>${item?.createTime ?? '-'}</span></div>
-    <div><span>地点：</span><span>${item?.addr ?? '-'}</span></div>
-    <div><span>描述：</span><span>${item?.des ?? '-'}</span></div>
+        <div><span>标题：</span><span>${item?.name ?? '-'}</span></div>
+        <div><span>来源：</span><span>${
+          commonStore.globalDict['zhdd_incident_type']?.find(
+            (i) => i.dictValue.toString() === `${item?.source}`,
+          )?.dictLabel ?? '-'
+        }</span></div>
+        <div><span>类型：</span><span>${
+          commonStore.globalDict['zhdd_incident_type']?.find(
+            (i) => i.dictValue.toString() === `${item?.type}`,
+          )?.dictLabel ?? '-'
+        }</span></div>
+        <div><span>时间：</span><span>${item?.createTime ?? '-'}</span></div>
+        <div><span>地点：</span><span>${item?.addr ?? '-'}</span></div>
+        <div><span>描述：</span><span>${item?.des ?? '-'}</span></div>
   </div>
-  
   <i class="card-border-bottom-left"></i>
   <i class="card-border-bottom-right"></i>
-</div>`;
+
+</div>
+`;
 
   const action = document.createElement('div');
   action.className = 'action';

src/components/MarkerMap/index.scss

@@ -81,12 +81,27 @@
       }
     }
   }
+  .address-type-card-container {
+    &.in-detail {
+      position: absolute;
+      height: px2rem(965px);
+      right: px2rem(939px + 30px + 30px);
+
+      top: calc(50% + px2rem(52px));
+      transform: translateY(calc(-50% - px2rem(52px / 2)));
+      .address-type-card {
+        top: 0;
+        right: 0;
+        animation: fadeInRight 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+      }
+    }
+  }
   .address-type-card {
     position: absolute;
     top: px2rem(83px);
     right: px2rem(30px);
-    min-width: px2rem(178px);
-    min-height: px2rem(293px);
+    // min-width: px2rem(178px);
+    // min-height: px2rem(293px);
     width: max-content;
     height: max-content;
     border-radius: 1px;

src/components/MarkerMap/index.tsx

@@ -42,6 +42,8 @@ import { IncidentItemDetail } from '@/api/incident';
 import { useIncidentStore } from '@/store';
 import Popup from '../Popup';
 import { ElMessage } from 'element-plus';
+import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 const MARKER_MAP_TYPES = [
   // '待派发事件',
@@ -77,6 +79,15 @@ interface ActionType {
 // 路况信息刷新间隔
 const REFESH_TRAFFIC_TIME = 60000;
 
+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: {
@@ -101,10 +112,16 @@ export default defineComponent({
 
     const store = useMarkerStore();
     const incidentStore = useIncidentStore();
-    const markerStore = useMarkerStore();
     const router = useRouter();
     const route = useRoute();
 
+    const adrsMapTypes = computed(() =>
+      props.adrsMapTypes.map((i) => ({
+        name: i,
+        disabled: route.query.id && i === '应急事件',
+      })),
+    );
+
     const actionTypes = computed<ActionType[]>(() => [
       {
         type: '路况信息',
@@ -116,8 +133,8 @@ export default defineComponent({
         type: '应急事件',
         hasActioned: state.hasTypes.includes('应急事件'),
         action: () =>
-          handleAddMarkers('应急事件', store.pendingIncident, icon_map_dpf),
-        remove: () => handleRemoveMarkers('应急事件', store.pendingIncident),
+          handleAddMarkers('应急事件', store.incident, icon_map_dpf),
+        remove: () => handleRemoveMarkers('应急事件', store.incident),
       },
 
       {
@@ -156,16 +173,11 @@ export default defineComponent({
         // case '待派发事件':
         // case '预警事件':
         default:
-          return GET_INCIDENT_DIALOG_HTML(
-            {
-              name: '事件名称',
-              addr: 'su qian',
-            },
-            () => {
-              router.push(`/incidentDetail?id=${marker?.id}`);
-              handleSetDetailMarker(marker);
-            },
-          );
+          return GET_INCIDENT_DIALOG_HTML(marker, () => {
+            router.push(`/incidentDetail?id=${marker?.id}`);
+            handleSetDetailMarker(marker);
+            store.currentIncident = marker;
+          });
         case '应急仓库':
           return GET_WAREHOUSE_DIALOG_HTML({
             name: '应急仓库 111',
@@ -198,17 +210,17 @@ export default defineComponent({
             },
             () => {
               if (route.query.id) {
-                markerStore.livevideovisible = true;
-                const idx = markerStore.livevideos.findIndex(
-                  (item) => item.location === marker.location,
+                store.livevideovisible = true;
+                const idx = store.livevideos.findIndex(
+                  (item) => item.locations === marker.locations,
                 );
                 if (idx < 0) {
-                  markerStore.livevideos.length === 6
-                    ? (markerStore.livevideos = [
+                  store.livevideos.length === 6
+                    ? (store.livevideos = [
                         marker,
-                        ...markerStore.livevideos.slice(1, 6),
+                        ...store.livevideos.slice(1, 6),
                       ])
-                    : markerStore.livevideos.push(marker);
+                    : store.livevideos.push(marker);
                 } else {
                   ElMessage.info({ message: '该点位已经打开~' });
                 }
@@ -264,6 +276,8 @@ export default defineComponent({
     ) => {
       state.markers.push(
         ...markers.map((i) => {
+          const nextImage =
+            type === '应急事件' ? getIncidentImage(i?.status) : image;
           const popup = new window.minemap.Popup({
             anchor: 'left',
             closeOnClick: true,
@@ -273,21 +287,23 @@ export default defineComponent({
             // autoPan: true,
           }).setDOMContent(getMarkerPopupHTML(type, i));
           return {
-            location: i.location,
+            locations: i.locations,
             popup,
-            marker: new window.minemap.Marker(renderElement(image), {
-              offset: [-25, -25],
-            })
-              .setLngLat({
-                lng: i.location?.split(',')[0],
-                lat: i.location?.split(',')[1],
+            marker:
+              i.locations &&
+              new window.minemap.Marker(renderElement(nextImage), {
+                offset: [-25, -25],
               })
-              .setPopup(popup)
-              .addTo(state.map),
+                .setLngLat({
+                  lng: i.locations?.split(',')[0],
+                  lat: i.locations?.split(',')[1],
+                })
+                .setPopup(popup)
+                .addTo(state.map),
           };
         }),
       );
-      state.positions.push(...markers.map((i) => i.location).filter(isString));
+      state.positions.push(...markers.map((i) => i.locations).filter(isString));
 
       handleFitBounds();
     };
@@ -335,17 +351,17 @@ export default defineComponent({
     ) => {
       state.hasTypes = state.hasTypes.filter((t) => t !== type);
 
-      const locations = markers.map((i) => i.location);
+      const locations = markers.map((i) => i.locations);
       state.markers.forEach((m) => {
-        if (locations.includes(m.location)) {
-          m.marker.remove();
-          m.popup.remove();
+        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.location),
+        (m) => !locations.includes(m.locations),
       );
       state.positions = state.positions.filter((p) => !locations.includes(p));
 
@@ -353,8 +369,8 @@ export default defineComponent({
     };
     const handleRemoveAllMarkers = () => {
       state.markers.forEach((m) => {
-        m.marker.remove();
-        m.popup.remove();
+        m.marker?.remove();
+        m.popup?.remove();
       });
       state.markers = [];
       state.positions = [];
@@ -362,20 +378,20 @@ export default defineComponent({
 
     const handleSetDetailMarker = (marker: MarkerType) => {
       handleRemoveAllMarkers();
-      const location = marker.location?.split(',').map(Number);
+      const locations = marker.locations?.split(',').map(Number);
 
-      if (!location) {
+      if (!locations) {
         ElMessage.error({ message: '该点位无地址经纬度' });
         return;
       }
 
       // 获取事件周围的 5km 内的 监控点
-      const bounds: number[][] = new window.minemap.LngLat(...location)
+      const bounds: number[][] = new window.minemap.LngLat(...locations)
         .toBounds(10000)
         .toArray();
 
-      const videos = markerStore.videoSurveillance.reduce((carry, next) => {
-        const [lng, lat] = next.location?.split(',') ?? [];
+      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] &&
@@ -388,8 +404,6 @@ export default defineComponent({
         return carry;
       }, [] as MarkerType[]);
 
-      console.log(location, bounds, videos, markerStore.videoSurveillance);
-
       // 开启路况信息
       if (!state.types.includes('路况信息')) {
         state.types.push('路况信息');
@@ -397,11 +411,7 @@ export default defineComponent({
         toggleControlTraffic();
       }
 
-      handleAddMarkers(
-        '应急事件',
-        [{ location: marker?.location, name: '中心庄' }],
-        icon_map_dpf,
-      );
+      handleAddMarkers('应急事件', [marker], icon_map_dpf);
       handleAddMarkers('视频监控', videos, icon_map_spjk);
       // state.markers[0].marker.togglePopup();
     };
@@ -461,20 +471,23 @@ export default defineComponent({
         state.trafficStatus = false;
         updateTrafficLayerVisibility('none');
 
-        if (!route.query.id) return;
-        // 如果存在id
-        handleSetDetailMarker({
-          location: '118.288721,33.951047',
-          name: '中心庄',
-        });
+        store.getAllResources();
+        store.getHDIncidentList();
       });
+      if (!route.query.id) return;
+      // 如果存在id
+      await incidentStore.getIncidentItem(route.query.id as string);
+      handleSetDetailMarker(incidentStore.incidentDetail.baseInfo ?? {});
     });
 
     watch(
-      () => route.query.id,
+      () => store?.currentIncident,
       (next) => {
-        // 返回首页时 需要清除事件相关的
-        if (!next) {
+        if (!isEmpty(next)) {
+          handleSetDetailMarker({
+            ...next,
+          });
+        } else {
           handleRemoveAllMarkers();
           if (state.types.includes('应急事件')) {
             state.types.forEach((next) => {
@@ -499,18 +512,6 @@ export default defineComponent({
     );
 
     watch(
-      () => props.marker?.baseInfo?.locations,
-      (next) => {
-        if (next && !state.positions.includes(next)) {
-          // handleSetDetailMarker({
-          //   location: '118.288721,33.951047',
-          //   name: '中心庄',
-          // });
-        }
-      },
-    );
-
-    watch(
       () => state.types,
       (next) => {
         actionTypes.value.forEach((item) => {
@@ -528,18 +529,28 @@ export default defineComponent({
     return () => (
       <div class="task-map-container">
         <MapView v-model:map={state.map} />
-        {!props.readonly && (
-          <Popup class="address-type-card">
+        <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}>
-              {props.adrsMapTypes &&
-                props.adrsMapTypes.map((t) => (
-                  <el-checkbox key={t} class="card-item" label={t} />
+              {adrsMapTypes.value &&
+                adrsMapTypes.value?.map((t) => (
+                  <>
+                    {!t.disabled && (
+                      <el-checkbox key={t} class="card-item" label={t.name} />
+                    )}
+                  </>
                 ))}
             </el-checkbox-group>
             <i class="card-border-bottom-left"></i>
             <i class="card-border-bottom-right"></i>
           </Popup>
-        )}
+        </div>
       </div>
     );
   },

src/constants/constants.ts

@@ -0,0 +1 @@
+export const BaseMediaUrl = 'http://sqfile.xt.wenhq.top:8083';

src/layout/BaseLayout/index.tsx

@@ -20,7 +20,7 @@ export default defineComponent({
           <RouterView />
           <MarkerMap
             readonly={route.path.includes('incidentDetail')}
-            marker={store.incidentDetail}
+            // marker={store.incidentDetail}
           />
         </main>
       </section>

src/router/index.ts

@@ -60,8 +60,8 @@ router.beforeEach(() => {
 router.afterEach((to) => {
   NProgress.done();
   document!.title = to.meta.title
-    ? to?.meta?.title + ' - 交通运输应急监管系统'
-    : '交通运输应急监管系统';
+    ? to?.meta?.title + ' - 交通运输应急指挥系统'
+    : '交通运输应急指挥系统';
 });
 
 export default router;

src/store/useMarkerStore.ts

@@ -1,16 +1,22 @@
 import {
+  getHDIncidentList,
+  IncidentItem,
+  IncidentItemDetail,
+} from '@/api/incident';
+import { getAllResources } from '@/api/resource';
+import {
   PENDING_DISPOSAL_INCIDENT,
   PENDING_INCIDENT,
-  EMERGENCY_VEHICLES,
+  // EMERGENCY_VEHICLES,
   VIDEO_SURVEILLANCE,
   WARNING_INCIDENT,
-  EMERGENCY_TEAM,
+  // EMERGENCY_TEAM,
 } from '@/components/MarkerMap/constants';
 import { defineStore } from 'pinia';
 
-export interface MarkerType {
-  id?: string | number;
-  location?: string;
+export interface MarkerType
+  extends NonNullable<IncidentItemDetail['baseInfo']> {
+  locations?: string;
   marker?: any;
   popup?: any;
   [key: string]: any;
@@ -27,24 +33,70 @@ export interface MarkerStateType {
   /** 详情页面 点击监控点位 打开视频 */
   livevideovisible: boolean;
   livevideos: MarkerType[];
+  incident: MarkerType[];
+  loading: boolean;
+  currentIncident: MarkerType;
 }
 
-export interface MainActionsType {}
+export interface MainActionsType {
+  toggleLoading(): void;
+  getHDIncidentList(): void;
+  getAllResources(): void;
+}
 
 export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
   'marker',
   {
     state: () => ({
-      warningIncident: WARNING_INCIDENT,
-      pendingIncident: PENDING_INCIDENT,
-      pendingDisposalIncident: PENDING_DISPOSAL_INCIDENT,
+      currentIncident: {},
+      incident: [],
+      warningIncident: [],
+      pendingIncident: [],
+      pendingDisposalIncident: [],
       videoSurveillance: VIDEO_SURVEILLANCE,
-      emergencyVehicles: EMERGENCY_VEHICLES,
-      emergencyTeam: EMERGENCY_TEAM,
+      emergencyVehicles: [],
+      emergencyTeam: [],
       emergencyWarehouse: [],
-      livevideovisible: false,
       livevideos: [],
+      livevideovisible: false,
+      loading: false,
     }),
-    actions: {},
+    actions: {
+      toggleLoading() {
+        this.loading = !this.loading;
+      },
+      async getHDIncidentList() {
+        try {
+          this.toggleLoading();
+          const { data } = await getHDIncidentList();
+          this.incident = (data as MarkerType[]) ?? [];
+        } finally {
+          this.toggleLoading();
+        }
+      },
+      async getAllResources() {
+        try {
+          this.toggleLoading();
+          const { data } = await getAllResources();
+          this.emergencyVehicles =
+            data.应急车队.map((i) => ({
+              ...i,
+              locations: `${i.longitude},${i.latitude}`,
+            })) ?? [];
+          this.emergencyTeam =
+            data.应急队伍.map((i) => ({
+              ...i,
+              locations: `${i.longitude},${i.latitude}`,
+            })) ?? [];
+          this.emergencyWarehouse =
+            data.应急仓库.map((i) => ({
+              ...i,
+              locations: `${i.longitude},${i.latitude}`,
+            })) ?? [];
+        } finally {
+          this.toggleLoading();
+        }
+      },
+    },
   },
 );

src/styles/global.scss

@@ -103,6 +103,17 @@ body {
   z-index: 9999;
 }
 
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 @keyframes fadeInBottom {
   0% {
     opacity: 0;

src/utils/request.ts

@@ -5,7 +5,7 @@ import useMainStore from '@/store/useMainStore';
 
 const baseURL =
   process.env.NODE_ENV === 'production'
-    ? 'http://api.xt.wenhq.top:8083/mock/43/'
+    ? 'http://sqpcbg.xt.wenhq.top:8083/api'
     : '/api';
 
 const CancelToken = axios.CancelToken;

src/views/HomePage/MessageCard/index.tsx

@@ -1,9 +1,9 @@
 import { IncidentListResponse } from '@/api/incident';
 import Card from '@/components/Card';
-import { useCommonStore } from '@/store';
+import { useCommonStore, useMarkerStore } from '@/store';
 import useIncidentStore from '@/store/useIncidentStore';
 import { computed, defineComponent, PropType } from 'vue-demi';
-import { RouterLink } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   name: 'MessageCard',
@@ -12,13 +12,20 @@ export default defineComponent({
   },
   setup() {
     const store = useIncidentStore();
+    const markerStore = useMarkerStore();
     const commonStore = useCommonStore();
+    const router = useRouter();
 
     return () => (
       <Card cardType="message-list">
         <div class="message-card-container">
           {store.incidents.rows?.map((item, idx) => (
-            <RouterLink to={`/incidentDetail?id=${item.id}`}>
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                markerStore.currentIncident = item;
+                router.push(`/incidentDetail?id=${item.id}`);
+              }}>
               <div class="message-item">
                 <div class="title">
                   <span class="index">{idx + 1}、</span>
@@ -42,7 +49,7 @@ export default defineComponent({
                   }
                 </div>
               </div>
-            </RouterLink>
+            </a>
           ))}
         </div>
       </Card>

src/views/HomePage/index.scss

@@ -26,6 +26,7 @@
   overflow-y: auto;
   > a {
     color: #fff;
+    cursor: pointer;
     &:hover {
       .title {
         transition: color 0.2s;

src/views/HomePage/index.tsx

@@ -8,12 +8,14 @@ export default defineComponent({
   provide: {},
   setup() {
     const store = useIncidentStore();
-    const commonStore = useCommonStore()
+    const commonStore = useCommonStore();
 
     onMounted(() => {
-      commonStore.getGlobalDict('zhdd_incident_source')
-      commonStore.getGlobalDict('zhdd_incident_type')
-      
+      commonStore.getGlobalDict('zhdd_incident_level');
+      commonStore.getGlobalDict('zhdd_incident_type');
+      commonStore.getGlobalDict('zhdd_incident_source');
+      commonStore.getGlobalDict('zhdd_car_type');
+
       store.getIncidentList({
         // 事件等级1,2的事件
         level: 1,

src/views/IncidentDetail/CommandChainCard/index.tsx

@@ -30,14 +30,16 @@ export default defineComponent({
           <div class="chain-item">
             <span class="title">协办部门</span>
             <span class="desc">
-              {getDept(store.incidentDetail?.baseInfo?.madinDept)}
+              {store?.incidentDetail?.baseInfo?.assistDept
+                ?.split(',')
+                ?.map((i) => getDept(i)).join()}
             </span>
             <img class="logo" src={co_organized} alt="" />
           </div>
           <div class="chain-item">
             <span class="title">主办部门</span>
             <span class="desc">
-              {getDept(store.incidentDetail?.baseInfo?.assistDept)}
+              {getDept(store.incidentDetail?.baseInfo?.madinDept)}
             </span>
             <img class="logo" src={host} alt="" />
           </div>

src/views/IncidentDetail/IncidentPlanCard/index.tsx

@@ -23,8 +23,8 @@ export default defineComponent({
       <Card cardType="incident-plan">
         <div class="plan-container">
           <el-checkbox-group v-model={types.value}>
-            {lists.map((t) => (
-              <el-checkbox disabled class="plan-item" label={t} />
+            {store?.incidentDetail?.task?.map((t) => (
+              <el-checkbox disabled class="plan-item" label={t.taskName} />
             ))}
           </el-checkbox-group>
         </div>

src/views/IncidentDetail/LiveMonitoringCard/index.tsx

@@ -1,4 +1,5 @@
 import Card from '@/components/Card';
+import { BaseMediaUrl } from '@/constants/constants';
 import { useIncidentStore } from '@/store';
 import { time } from 'console';
 import {
@@ -24,35 +25,64 @@ export default defineComponent({
         (store.incidentDetail?.baseInfo?.video?.split(',') ?? []).length,
     );
 
-    onMounted(() => {
+    // onMounted(() => {
+    //   let itemWidth = 0;
+    //   let liveWidth = 0;
+    //   let contentWidth = 0;
+    //   timer.value = setInterval(() => {
+    //     if (liveRef.value) {
+    //       itemWidth =
+    //         itemWidth ||
+    //         (liveRef.value?.querySelector('.live-item')?.scrollWidth ?? 0);
+    //       contentWidth =
+    //         contentWidth || (liveRef.value.parentElement?.clientWidth ?? 0);
+    //       liveWidth = liveWidth || (liveRef.value?.scrollWidth ?? 0);
+    //       const count = Math.floor(liveWidth / (contentWidth || 1));
+
+    //       const transformCount = length.value / count || 1;
+
+    //       current.value += 1;
+
+    //       if (current.value < transformCount) {
+    //         liveRef.value.style.transform = `translateX(-${
+    //           itemWidth * count * current.value
+    //         }px)`;
+    //       } else {
+    //         current.value = 0;
+    //         liveRef.value.style.transform = `translateX(0px)`;
+    //       }
+    //     }
+    //   }, 2000);
+    // });
+
+    const handleChangeArrow = (arrow: 'left' | 'right') => {
       let itemWidth = 0;
       let liveWidth = 0;
       let contentWidth = 0;
-      timer.value = setInterval(() => {
-        if (liveRef.value) {
-          itemWidth =
-            itemWidth ||
-            (liveRef.value?.querySelector('.live-item')?.scrollWidth ?? 0);
-          contentWidth =
-            contentWidth || (liveRef.value.parentElement?.clientWidth ?? 0);
-          liveWidth = liveWidth || (liveRef.value?.scrollWidth ?? 0);
-          const count = Math.floor(liveWidth / (contentWidth || 1));
+      if (liveRef.value) {
+        itemWidth =
+          itemWidth ||
+          (liveRef.value?.querySelector('.live-item')?.scrollWidth ?? 0);
+        contentWidth =
+          contentWidth || (liveRef.value.parentElement?.clientWidth ?? 0);
+        liveWidth = liveWidth || (liveRef.value?.scrollWidth ?? 0);
+        const count = Math.floor(liveWidth / (contentWidth || 1));
 
-          const transformCount = length.value / count || 1;
+        const transformCount = length.value / count || 1;
 
-          current.value += 1;
+        current.value =
+          arrow === 'right' ? current.value + 1 : current.value - 1;
 
-          if (current.value < transformCount) {
-            liveRef.value.style.transform = `translateX(-${
-              itemWidth * count * current.value
-            }px)`;
-          } else {
-            current.value = 0;
-            liveRef.value.style.transform = `translateX(0px)`;
-          }
+        if (current.value < transformCount && current.value >= 0) {
+          liveRef.value.style.transform = `translateX(-${
+            itemWidth * count * current.value
+          }px)`;
+        } else {
+          current.value = 0;
+          liveRef.value.style.transform = `translateX(0px)`;
         }
-      }, 2000);
-    });
+      }
+    };
 
     onUnmounted(() => {
       clearInterval(timer.value);
@@ -60,8 +90,18 @@ export default defineComponent({
 
     return () => (
       <Card cardType="live-monitoring">
-        {/* <el-button icon="el-icon-arrow-left" type="info" circle /> */}
-        {/* <el-button icon="el-icon-arrow-right" type="info" circle /> */}
+        <el-button
+          icon="el-icon-arrow-left"
+          onClick={() => handleChangeArrow('left')}
+          type="info"
+          circle
+        />
+        <el-button
+          icon="el-icon-arrow-right"
+          onClick={() => handleChangeArrow('right')}
+          type="info"
+          circle
+        />
         <div class="live-container">
           <div
             style={{
@@ -71,14 +111,14 @@ export default defineComponent({
             {(store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).map(
               (item) => (
                 <div class="live-item">
-                  <img src={item} />
+                  <img src={BaseMediaUrl + item} />
                 </div>
               ),
             )}
             {(store.incidentDetail?.baseInfo?.video?.split(',') ?? []).map(
               (item) => (
                 <div class="live-item">
-                  <video src={item} controls />
+                  <video src={BaseMediaUrl + item} controls />
                 </div>
               ),
             )}

src/views/IncidentDetail/index.scss

@@ -164,6 +164,12 @@
           }
           .desc {
             text-align: center;
+            box-sizing: border-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+            padding: 0 px2rem(6px);
           }
           .logo {
             position: absolute;
@@ -435,6 +441,7 @@
       margin-top: px2rem(21px);
       .el-button {
         position: absolute;
+        z-index: 1;
         top: 50%;
         transform: translateY(-50%);
         right: 0;

src/views/IncidentDetail/index.tsx

@@ -10,6 +10,7 @@ import ExecutionLogCard from './ExecutionLogCard';
 import LiveVideoCard from './LiveVideoCard';
 import './index.scss';
 import { watch } from 'fs';
+import { isEmpty } from 'lodash';
 
 export default defineComponent({
   name: 'IncidentDetail',
@@ -27,15 +28,17 @@ export default defineComponent({
       commonStore.getGlobalDict('zhdd_incident_source');
       commonStore.getGlobalDict('zhdd_org_upload');
       commonStore.getGlobalDict('zhdd_incident_level');
-      store.getIncidentItem(route.query.id as string);
+      if (isEmpty(store.incidentDetail)) {
+        store.getIncidentItem(route.query.id as string);
+      }
       liveVideoRef.value?.addEventListener('click', (el: MouseEvent) => {
         if (el.target && liveVideoRef.value?.contains(el.target as Node)) {
-          console.log('q1111');
         }
       });
     });
     onUnmounted(() => {
       store.incidentDetail = {};
+      markerStore.currentIncident = {};
       markerStore.livevideovisible = false;
       markerStore.livevideos = [];
     });

vite.config.ts

@@ -3,7 +3,7 @@ import { UserConfigExport, ConfigEnv } from 'vite';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import vue from '@vitejs/plugin-vue';
 import svgLoader from 'vite-svg-loader';
-import imageLoader from '@rollup/plugin-image'; 
+import imageLoader from '@rollup/plugin-image';
 import Components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import ElementPlus from 'unplugin-element-plus/vite';
@@ -26,9 +26,9 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
       force: true,
       proxy: {
         '/api': {
-          target: 'http://api.xt.wenhq.top:8083/mock/43',
+          target: 'http://sqpcbg.xt.wenhq.top:8083',
           changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, ''),
+          // rewrite: (path) => path.replace(/^\/api/, ''),
         },
       },
     },
@@ -65,7 +65,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
       vueJsx({
         // options are passed on to @vue/babel-plugin-jsx
       }),
-      imageLoader()
+      imageLoader(),
       // svgLoader(),
       // ElementPlus({ useSource: true }),
     ],