fix

.env.test

@@ -5,4 +5,4 @@ NODE_ENV = test
 VITE_API_SERVER = 'http://61.147.254.211:30876'
 VITE_MAP_SERVER = 'http://61.147.254.211:21009'
 VITE_LOGIN_SERVER = 'http://61.147.254.211:9999'
-VITE_DH_SERVER = 'http://sqdh.xt.wenhq.top:8083'
+VITE_DH_SERVER = 'http://sqtestdh.xt.wenhq.top:8083'

index.html

@@ -136,13 +136,13 @@
                 console.log(t)
                 if (t != 1 && !isMac) { // 如果进行了缩放，也就是不是1
                     setTimeout(() => {
-                        document.body.style.zoom = -0.6 * t + 1.55; // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
+                        document.body.style.zoom = -0.005 * t + 0.76; // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
                         if (window.map != undefined) {
                             map.resize();
                         }
                     }, 2 * 1000)
                 } else {
-                    document.body.style.zoom = "normal";
+                    document.body.style.zoom = 1;
                 }
 
 

package.json

@@ -17,6 +17,7 @@
         "crypto-js": "^4.1.1",
         "echarts": "^5.2.2",
         "element-plus": "^1.1.0-beta.24",
+        "mitt": "^3.0.0",
         "moment": "^2.29.1",
         "nprogress": "^0.2.0",
         "ol": "^6.9.0",
@@ -60,4 +61,4 @@
         "last 2 versions",
         "not dead"
     ]
-}
+}

public/webClient/defaultConfig.js

@@ -14,5 +14,5 @@ let defaultConfig = { // 默认配置，可以通过option覆盖
     protocol: location.protocol === "file:" ? "http" : location.protocol.split(":")[0],
     // 开发环境配置
     loginIp: '10.55.134.3', // DEMO采用登陆页面的地址,   若第三方自行开发，请填写大华服务器对应的IP
-    port: '6699'  //  DEMO采用登陆页面的映射端口,若第三方自行开发，请填写大华服务器对应的端口
-};
+    port: '8314' //  DEMO采用登陆页面的映射端口,若第三方自行开发，请填写大华服务器对应的端口
+};

public/webClient/initWebSocket.js

@@ -114,7 +114,7 @@ class InitWebSocketClass {
                                 this.settings.getVersion(
                                     Number(
                                         JSON.parse(evt.data).params
-                                            .clientVersion
+                                        .clientVersion
                                     )
                                 );
                         } else if (
@@ -155,7 +155,7 @@ class InitWebSocketClass {
             loginIp: this.settings.letLoginIp,
             method: "login",
             params: {
-                loginPort: 6699,
+                loginPort: 8314,
                 protocol: this.settings.protocol,
                 token: this.settings.token,
                 userName: this.settings.letUserName
@@ -169,85 +169,90 @@ class InitWebSocketClass {
         this.timer();
     }
     UpdateWebTitle() {
-        //切换路由的的时候需要调用此方法更新页面标题。路由标题名不能重复。
-        // this.checkSocket();
-        const params = {
-            loginIp: this.settings.letLoginIp,
-            method: "UpdateWebTitle",
-            params: {
-                webTitle: document.title
-            },
-            userCode: this.settings.letUserCode,
-            socketCode: this.socketCode
-        };
-        this.webSocketSend(JSON.stringify(params));
-    }
-    // 客户端心跳
-    timer() {
-        this.timeId = setInterval(() => {
+            //切换路由的的时候需要调用此方法更新页面标题。路由标题名不能重复。
+            // this.checkSocket();
             const params = {
                 loginIp: this.settings.letLoginIp,
-                method: "heartbeat",
+                method: "UpdateWebTitle",
+                params: {
+                    webTitle: document.title
+                },
                 userCode: this.settings.letUserCode,
                 socketCode: this.socketCode
             };
+            this.webSocketSend(JSON.stringify(params));
+        }
+        // 客户端心跳
+    timer() {
+            this.timeId = setInterval(() => {
+                const params = {
+                    loginIp: this.settings.letLoginIp,
+                    method: "heartbeat",
+                    userCode: this.settings.letUserCode,
+                    socketCode: this.socketCode
+                };
+                if (this.websocket) {
+                    this.webSocketSend(JSON.stringify(params));
+                }
+            }, 10000);
+        }
+        // 停止socket连接
+    stopWebSocket() {
             if (this.websocket) {
-                this.webSocketSend(JSON.stringify(params));
+                this.websocket.close();
             }
-        }, 10000);
-    }
-    // 停止socket连接
-    stopWebSocket() {
-        if (this.websocket) {
-            this.websocket.close();
+            this.websocket = null;
+            this.timeId && clearInterval(this.timeId);
         }
-        this.websocket = null;
-        this.timeId && clearInterval(this.timeId);
-    }
-    //检查socket状态，通过oncheckSocket回调参数，可以判断本地有木有安装客户端
+        //检查socket状态，通过oncheckSocket回调参数，可以判断本地有木有安装客户端
     checkSocket() {
-        if (this.websocket != null) {
-            let stateStr;
-            // console.log(this.websocket.readyState);
-            switch (this.websocket.readyState) {
-                case 0: {
-                    stateStr = "CONNECTING";
-                    break;
-                }
-                case 1: {
-                    stateStr = "OPEN";
-                    break;
-                }
-                case 2: {
-                    stateStr = "CLOSING";
-                    break;
-                }
-                case 3: {
-                    stateStr = "CLOSED";
-                    break;
-                }
-                default: {
-                    stateStr = "UNKNOW";
-                    break;
+            if (this.websocket != null) {
+                let stateStr;
+                // console.log(this.websocket.readyState);
+                switch (this.websocket.readyState) {
+                    case 0:
+                        {
+                            stateStr = "CONNECTING";
+                            break;
+                        }
+                    case 1:
+                        {
+                            stateStr = "OPEN";
+                            break;
+                        }
+                    case 2:
+                        {
+                            stateStr = "CLOSING";
+                            break;
+                        }
+                    case 3:
+                        {
+                            stateStr = "CLOSED";
+                            break;
+                        }
+                    default:
+                        {
+                            stateStr = "UNKNOW";
+                            break;
+                        }
                 }
+                this.settings.oncheckSocket &&
+                    this.settings.oncheckSocket(stateStr === "OPEN");
+            } else {
+                //
             }
-            this.settings.oncheckSocket &&
-                this.settings.oncheckSocket(stateStr === "OPEN");
-        } else {
-            //
         }
-    }
-    //获取本地客户端版本号
+        //获取本地客户端版本号
     startNotice() {
-        const params = JSON.stringify({
-            loginIp: this.settings.letLoginIp,
-            method: "getClientVersion",
-            userCode: this.settings.letUserCode,
-            socketCode: this.socketCode
-        });
-        this.webSocketSend(params);
-    }
-    // 升级客户端方法
+            const params = JSON.stringify({
+                loginIp: this.settings.letLoginIp,
+                method: "getClientVersion",
+                userCode: this.settings.letUserCode,
+                socketCode: this.socketCode
+            });
+            this.webSocketSend(params);
+        }
+        // 升级客户端方法
     setClientDownInfo() {
         const origin = location.origin;
         const params = JSON.stringify({
@@ -256,7 +261,7 @@ class InitWebSocketClass {
             params: {
                 newClientVersion: this.ClientLocalVersion, // 获取的本地版本号
                 clientDownUrl: `${origin}/data/VSL/DSSEnterpriseClient/DSS_LightWeight_Client.zip` // 客户端在服务器上的地址,本地调试放开下面你的getCookie("ip")
-                // "clientDownUrl": `http://${getCookie("ip")}:8314/TheNextWebApp/resources/DSS_LightWeight_Client.zip` // 客户端在服务器上的地址文件
+                    // "clientDownUrl": `http://${getCookie("ip")}:8314/TheNextWebApp/resources/DSS_LightWeight_Client.zip` // 客户端在服务器上的地址文件
             },
             userCode: this.settings.letUserCode,
             socketCode: this.socketCode
@@ -264,63 +269,63 @@ class InitWebSocketClass {
         this.webSocketSend(params);
     }
     closeClient() {
-        const params = {
-            loginIp: this.settings.letLoginIp,
-            method: "logout",
-            userCode: this.settings.letUserCode,
-            socketCode: this.socketCode
-        };
-        this.webSocketSend(JSON.stringify(params));
-        this.stopWebSocket();
-        this.websocket = null;
-    }
-    // 通用方法第三方传方法名和参数体
+            const params = {
+                loginIp: this.settings.letLoginIp,
+                method: "logout",
+                userCode: this.settings.letUserCode,
+                socketCode: this.socketCode
+            };
+            this.webSocketSend(JSON.stringify(params));
+            this.stopWebSocket();
+            this.websocket = null;
+        }
+        // 通用方法第三方传方法名和参数体
     commonUse(method, paramsObj) {
-        const params = JSON.stringify({
-            loginIp: this.settings.letLoginIp,
-            method: method,
-            userCode: this.settings.letUserCode,
-            params: paramsObj,
-            socketCode: this.socketCode
-        });
-        this.webSocketSend(params);
-    }
-    // 创建群聊界面
+            const params = JSON.stringify({
+                loginIp: this.settings.letLoginIp,
+                method: method,
+                userCode: this.settings.letUserCode,
+                params: paramsObj,
+                socketCode: this.socketCode
+            });
+            this.webSocketSend(params);
+        }
+        // 创建群聊界面
     openCreateGroupChatDlg() {
-        const params = JSON.stringify({
-            loginIp: this.settings.letLoginIp,
-            method: "openCreateGroupChatDlg",
-            userCode: this.settings.letUserCode,
-            socketCode: this.socketCode
-        });
-        this.webSocketSend(params);
-    }
-    // 创建群聊会商-邀请一个用户进去会商
+            const params = JSON.stringify({
+                loginIp: this.settings.letLoginIp,
+                method: "openCreateGroupChatDlg",
+                userCode: this.settings.letUserCode,
+                socketCode: this.socketCode
+            });
+            this.webSocketSend(params);
+        }
+        // 创建群聊会商-邀请一个用户进去会商
     createGroupChat(obj) {
-        const params = JSON.stringify({
-            loginIp: this.settings.letLoginIp,
-            method: "createGroupChat",
-            userCode: this.settings.letUserCode,
-            socketCode: this.socketCode,
-            params: {
-                chatName: obj.chatName,
-                bOpenDirect: obj.bOpenDirect, // 是否打开音视频通话标志，true 创建成功后打开音视频通话，false 创建成功后不打开音视频通话
-                memberInfo: [
-                    // 成员信息
-                    {
-                        memberId: obj.memberId, // 成员id
-                        memberName: obj.memberName, // 成员名称
-                        regionId: obj.regionId, // 成员的pass域id
-                        memberType: obj.memberType, // 成员类型，Integer ,1 单兵；2 普通电话；3 对讲机；4 app|客户端；6 可是话机； 7 汇接话机（PSTN、手机号码等）； 8 车载；9 无人机喊话云台； 10 无人机地面站对讲平台； 11 ipc; 12 NVR
-                        memberCode: obj.memberCode, // 成员设备编码
-                        memberNumber: obj.memberNumber // 成员号码
-                    }
-                ]
-            }
-        });
-        this.webSocketSend(params);
-    }
-    // 打开客户端指定模块
+            const params = JSON.stringify({
+                loginIp: this.settings.letLoginIp,
+                method: "createGroupChat",
+                userCode: this.settings.letUserCode,
+                socketCode: this.socketCode,
+                params: {
+                    chatName: obj.chatName,
+                    bOpenDirect: obj.bOpenDirect, // 是否打开音视频通话标志，true 创建成功后打开音视频通话，false 创建成功后不打开音视频通话
+                    memberInfo: [
+                        // 成员信息
+                        {
+                            memberId: obj.memberId, // 成员id
+                            memberName: obj.memberName, // 成员名称
+                            regionId: obj.regionId, // 成员的pass域id
+                            memberType: obj.memberType, // 成员类型，Integer ,1 单兵；2 普通电话；3 对讲机；4 app|客户端；6 可是话机； 7 汇接话机（PSTN、手机号码等）； 8 车载；9 无人机喊话云台； 10 无人机地面站对讲平台； 11 ipc; 12 NVR
+                            memberCode: obj.memberCode, // 成员设备编码
+                            memberNumber: obj.memberNumber // 成员号码
+                        }
+                    ]
+                }
+            });
+            this.webSocketSend(params);
+        }
+        // 打开客户端指定模块
     openClientModule(moduleID) {
         const params = JSON.stringify({
             loginIp: this.settings.letLoginIp,

src/api/incident.ts

@@ -89,11 +89,19 @@ export interface IncidentItemEmergencyPlan {
   createTime?: string;
 }
 
+export interface wz {
+  availablenum?: string;
+  name?: string;
+  num?: string;
+  time?: string;
+}
+
 export interface IncidentItemDetail {
   baseInfo?: IncidentItem; // 基本信息
   process?: IncidentItemDetailProcessItem[]; //处置信息
   task?: IncidentItemDetailTaskItem[]; // 处置任务
   baseTask?: Map<string, IncidentItemEmergencyPlan[]>;
+  resource?: wz[];
 }
 export interface IncidentItemDetailResponse extends BaseResponse {
   data: IncidentItemDetail;

src/api/resource.ts

@@ -153,3 +153,14 @@ export const getAllvideoDevice = () => {
     url: `zhdd/dh/deviceList`,
   });
 };
+
+export interface WarehouseResponse extends BaseResponse {
+  data: ResourcesItem[];
+}
+
+/** 通过物资查询应急仓库 */
+export const searchWarehouseByGoods = (name?: string) => {
+  return request<WarehouseResponse>('GET', {
+    url: `/zhdd/resourceDetail/searchWarehouseByGoods?name=${name}`,
+  });
+};

src/components/Card/index.scss

@@ -46,15 +46,26 @@
         margin-top: px2rem(20px * 2);
     }
     &-bg-incident-plan {
-        margin-top: px2rem(20px *2);
         background-image: url('../../assets/card-bg/frame_czfa.png');
     }
     &-bg-emergency-linkage {
         background-image: url('../../assets/card-bg/frame_yjld.png');
     }
     &-bg-emergency-plan {
+        margin-top: px2rem(20px *2);
         background-image: url('../../assets/card-bg/frame_yjya@2x.png');
     }
+    &-bg-wz-all {
+        margin-right: px2rem(20px *2);
+        margin-top: px2rem(20px *2);
+        height: px2rem(302px * 2);
+        background-image: url('../../assets/card-bg/frame_kywz@2x.png');
+    }
+    &-bg-em-ex {
+        margin-right: px2rem(20px *2);
+        height: px2rem(468px * 2);
+        background-image: url('../../assets/card-bg/frame_czfa@2x.png');
+    }
     &-bg-accident-scene {
         background-image: url('../../assets/card-bg/frame_sgxc@2x.png');
         width: px2rem(472px * 2);
@@ -86,7 +97,7 @@
         height: 554px;
         width: px2rem(472px * 2);
         height: px2rem(789px * 2);
-        background-image: url('../../assets/card-bg/frame_czfa@2x.png');
+        background-image: url('../../assets/card-bg/frame_zxrz@2x.png');
     }
     &-bg-live-monitoring {
         width: 943px;

src/components/Card/index.tsx

@@ -10,7 +10,8 @@ export type CardType =
   | 'emergency-linkage'
   | 'execution-log'
   | 'accident-scene'
-  | 'emergency-plan'
+  | 'wz-all'
+  | 'em-ex'
   | 'live-monitoring';
 
 export default defineComponent({

src/components/MarkerMap/index.scss

@@ -174,7 +174,7 @@
             // width: 332px;
             border-radius: unset;
             @extend .card-bg-container;
-            background: #010d85;
+            background: #030f2b;
             color: #fff;
             .title {
                 padding: px2rem(22px * 2) px2rem(24px * 2) px2rem(15px * 2);
@@ -186,23 +186,37 @@
             }
             .action {
                 margin: 0 px2rem(24px * 2) px2rem(24px * 2);
+                .el-button {
+                    min-height: px2rem(40px * 2);
+                    font-size: px2rem(14px * 2);
+                }
             }
             .ckbg {
                 background: url('../../assets/card-bg/frame_event@2x.png') no-repeat;
                 background-size: 100% 100%;
                 width: px2rem(663px * 2);
-                height: px2rem(565px * 2);
+                height: px2rem(423px * 2);
                 .title {
                     padding-left: px2rem(29px * 2);
-                    padding-top: px2rem(22px * 2);
+                    padding-top: px2rem(23px * 2);
                     // padding-bottom: px2rem(35px * 2);
                 }
                 .wz {
-                    height: px2rem(369px * 2);
+                    height: px2rem(212px * 2);
                     overflow-y: auto;
                     width: px2rem(614px * 2);
                     background: #051B52;
                     margin-left: px2rem(22px * 2);
+                    &::-webkit-scrollbar {
+                        width: 6px;
+                        background-color: #051B52;
+                        border-left: 2px solid rgba($color: #000000, $alpha: 0);
+                        opacity: 1;
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        background: #39d6fe;
+                        border-radius: 3px;
+                    }
                     table {
                         width: 100%;
                         font-size: px2rem(16px * 2);
@@ -212,7 +226,7 @@
                             opacity: 0.6;
                         }
                         tr {
-                            height: px2rem(42px * 2);
+                            height: px2rem(34px * 2);
                             border-bottom: 1px solid #030F2C;
                         }
                         td {
@@ -230,7 +244,7 @@
                     display: flex;
                     flex-wrap: wrap;
                     flex-direction: row;
-                    padding-top: px2rem(22px * 2);
+                    padding-top: px2rem(20px * 2) !important;
                     padding-bottom: px2rem(14px * 2);
                     >div {
                         order: 2;

src/components/MarkerMap/index.tsx

@@ -6,6 +6,7 @@ import {
   watchEffect,
   watch,
   computed,
+  onUnmounted,
 } from 'vue';
 import {
   ResourceItemDetail,
@@ -18,6 +19,8 @@ import useMarkerStore, { MarkerType } from '@/store/useMarkerStore';
 import MapView from '../MapView';
 import { useDaHuaStore } from '@/store';
 
+import emitter from '@/utils/mitt';
+
 /** @ts-ignore */
 import icon_map_yjcl from '@/assets/icons/home/yjcl.svg';
 /** @ts-ignore */
@@ -767,6 +770,16 @@ export default defineComponent({
       // 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) => {

src/constants/constants.ts

@@ -9,7 +9,7 @@ export const DA_HUA = {
   password: 'huashe123',
   ip: '10.55.134.3',
   host: 'http',
-  port: '6699',
+  port: '8314',
 };
 
 export const DA_HUA_URL_PREFIX =

src/layout/BaseLayout/index.tsx

@@ -130,6 +130,8 @@ export default defineComponent({
     const daHuaStore = useDaHuaStore();
 
     const sqdh = ref(import.meta.env.VITE_DH_SERVER as string);
+
+    const markmap = ref(null);
     
     console.log(sqdh.value);
 
@@ -147,6 +149,7 @@ export default defineComponent({
 
     // login da hua
     onMounted(() => {
+      
       // if (!localStorage.getItem('DAHUA_token')) {
       //   daHuaStore.DAHUALogin();
       // } else {
@@ -239,7 +242,7 @@ export default defineComponent({
         <main>
           <RouterView />
           <MarkerMap
-            readonly={route.path.includes('incidentDetail')}
+            readonly={route.path.includes('incidentDetail')} ref={ markmap}
             // marker={store.incidentDetail}
           />
 

src/store/useMarkerStore.ts

@@ -5,9 +5,12 @@ import {
 } from '@/api/incident';
 import {
   getAllResources,
-  getAllsingleDevice, ResourceItemDetail,
-  SingleDeviceItem,getAllvideoDevice
-} from "@/api/resource";
+  getAllsingleDevice,
+  ResourceItemDetail,
+  SingleDeviceItem,
+  getAllvideoDevice,
+  searchWarehouseByGoods,
+} from '@/api/resource';
 import {
   PENDING_DISPOSAL_INCIDENT,
   PENDING_INCIDENT,
@@ -29,7 +32,7 @@ export interface MarkerType extends Simply<AllResources> {
   locations?: string;
   marker?: any;
   popup?: any;
-  // [key: string]: any;
+  [key: string]: any;
 }
 
 export interface MarkerStateType {
@@ -54,6 +57,7 @@ export interface MainActionsType {
   getHDIncidentList(): void;
   getAllResources(): void;
   getAllsingleDevice(): void;
+  searchWarehouseByGoods(name?: string): void;
 }
 
 export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
@@ -109,8 +113,8 @@ export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
           this.toggleLoading();
           const { data } = await getAllvideoDevice();
           let videoData = [];
-          for(var index in data){
-            if(data[index].gpsX){
+          for (var index in data) {
+            if (data[index].gpsX) {
               videoData.push(data[index]);
             }
           }
@@ -152,6 +156,19 @@ export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
           this.toggleLoading();
         }
       },
+      async searchWarehouseByGoods(name) {
+        try {
+          this.toggleLoading();
+          const { data } = await searchWarehouseByGoods(name);
+          this.emergencyWarehouse =
+            data.map((i) => ({
+              ...i,
+              locations: `${i.longitude},${i.latitude}`,
+            })) ?? [];
+        } finally {
+          this.toggleLoading();
+        }
+      },
     },
   },
 );

src/utils/mitt.ts

@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+const emitter = mitt();
+export default emitter;

src/views/IncidentDetail/EmExCard/index.tsx

@@ -0,0 +1,128 @@
+import Card from '@/components/Card';
+import { useIncidentStore,useCommonStore } from '@/store';
+import { defineComponent, ref } from 'vue-demi';
+// @ts-ignore
+import IconStyle from '@/assets/icons/detail/direct1@2x.png';
+
+// @ts-ignore
+import Iconyjya from '@/assets/icons/detail/yjya@2x.png';
+
+// @ts-ignore
+import Iconczfa from '@/assets/icons/detail/czfa@2x.png';
+
+
+
+export default defineComponent({
+  name: 'EmexCard',
+  setup(props) {
+    const store = useIncidentStore();
+    const commonStore = useCommonStore();
+    const activeindex = ref(1);
+
+    const types = ref([]);
+
+    return () => (
+      <Card cardType="em-ex">
+        <div class="headerbutton">
+          <div
+            class={`yjya ${activeindex.value == 1 ? 'active' : ''}`}
+            onClick={() => {
+              activeindex.value = 1;
+            }}>
+            <img src={Iconyjya} />
+          </div>
+          <div
+            class={`czfa ${activeindex.value == 2 ? 'active' : ''}`}
+            onClick={() => {
+              activeindex.value = 2;
+            }}>
+            <img src={Iconczfa} />
+          </div>
+        </div>
+        <div class="content-c">
+          <div
+            class="plan"
+            style={activeindex.value == 1 ? 'display:block' : 'display:none'}>
+            <div class="plan-container">
+              {/* <el-checkbox-group v-model={types.value}> */}
+              {store?.incidentDetail?.task?.map((t) => (
+                <div class="plan-content">
+                  <div class="plan-title">
+                    <img src={IconStyle} />
+                    {t.taskName}
+                  </div>
+                  <div class="plan-c">
+                    <div class="plan-comm">
+                      <div class="pt">指挥：</div>
+                      <div class="pc">
+                        {t.taskPersonVos
+                          ?.map((i) => (i.person ?? '') + (i.position ?? ''))
+                          .join('、')}
+                      </div>
+                    </div>
+                    <div class="plan-cmd">
+                      <div class="pt">指令：</div>
+                      <div class="pc">
+                        {t.taskCommandVos?.map((i) => (
+                          <div>{i.command}</div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                // <el-checkbox disabled class="plan-item" label={t.taskName} />
+              ))}
+              {/* </el-checkbox-group> */}
+            </div>
+          </div>
+          <div
+            class="exc"
+            style={activeindex.value == 2 ? 'display:block' : 'display:none'}>
+            <div class="plan-container">
+              <div class="toph">
+                <div class="djcc">
+                  <div class="dj">等级</div>
+                  <div class="djc">
+                    {commonStore.globalDict['zhdd_incident_level']?.find(
+                      (i) =>
+                        i.dictValue?.toString() ===
+                        (store.incidentDetail?.baseInfo ?? {})[
+                          'level'
+                        ]?.toString(),
+                    )?.dictLabel ?? '-'}
+                  </div>
+                </div>
+
+                {/* <div class="dl" ref={download}>
+              <img src={Icondownload} />
+              下载附件
+            </div>
+
+            <el-popover
+              trigger="click"
+              title="With title"
+              virtual-triggering
+              virtual-ref={download}
+              ref={dpropc}>
+              <span> Some content </span>
+            </el-popover> */}
+              </div>
+
+              <div class="content">
+                {store.incidentDetail.baseTask != undefined
+                  ? (
+                      store.incidentDetail?.baseTask[
+                        store.incidentDetail?.baseInfo?.level
+                      ] ?? []
+                    ).map((i, index) => (
+                      <div>{index + 1 + '、' + i.taskName}</div>
+                    ))
+                  : ''}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    );
+  },
+});

src/views/IncidentDetail/IncidentInfoCard/index.tsx

@@ -18,6 +18,9 @@ import IconStyle2 from '@/assets/icons/detail/style2@2x.png';
 import IconTitle from '@/assets/icons/detail/title@2x.png';
 // @ts-ignore
 import IconList from '@/assets/icons/detail/list@2x.png';
+// @ts-ignore
+import IconInformation from '@/assets/icons/detail/information@2x.png';
+
 
 import { useCommonStore, useIncidentStore,useMainStore } from '@/store';
 
@@ -46,19 +49,58 @@ export default defineComponent({
         icon: IconStyle2,
         prop: 'type' as const,
         dict: 'zhdd_incident_type' as const,
+        class: 'normal',
+        value:
+          (commonStore.globalDict['zhdd_incident_type']?.find(
+            (i) =>
+              i.dictValue?.toString() ===
+              (store.incidentDetail?.baseInfo?.type ?? '').toString(),
+          )?.dictLabel ?? '-') +
+          '  ' +
+          (commonStore.globalDict['zhdd_incident_level']?.find(
+            (i) =>
+              i.dictValue?.toString() ===
+              (store.incidentDetail?.baseInfo?.level ?? '').toString(),
+          )?.dictLabel ?? '-') +
+          ' 级',
       },
       {
         label: '事件来源',
-        icon: IconSource2,
+        icon: IconInformation,
         prop: 'source' as const,
         dict: 'zhdd_incident_source' as const,
+        class: 'logtext',
+        value: (
+          <>
+            <div>
+              上报时间：
+              {store.incidentDetail?.baseInfo?.createTime ?? ''}
+            </div>
+            <div>事件地点：{store.incidentDetail?.baseInfo?.addr ?? ''}</div>
+            <div>
+              上报人员：{store.incidentDetail?.baseInfo?.createBy ?? ''}
+            </div>
+            <div>
+              上报人员：{store.incidentDetail?.baseInfo?.expr1 ?? '-'}
+            </div>
+            <div>
+              上报单位：
+              {commonStore.globalDict['zhdd_org_upload']?.find(
+                (i) =>
+                  i.dictValue?.toString() ===
+                  (store.incidentDetail?.baseInfo?.createDept ?? '').toString(),
+              )?.dictLabel ?? '-'}
+            </div>
+            <div>事件描述：{store.incidentDetail?.baseInfo?.des ?? ''}</div>
+          </>
+        ),
       },
-      {
-        label: '事件等级',
-        icon: IconLevel2,
-        prop: 'level' as const,
-        dict: 'zhdd_incident_level' as const,
-      },
+      // {
+      //   label: '事件等级',
+      //   icon: IconLevel2,
+      //   prop: 'level' as const,
+      //   dict: 'zhdd_incident_level' as const,
+      // },
     ]);
     const showeventlist = () => { 
       mainStore.setEventListshow(true);
@@ -77,12 +119,12 @@ export default defineComponent({
         <div class="info-title">{store.incidentDetail?.baseInfo?.name}</div>
         <div class="info-container">
           {list.value.map((item, idx) => (
-            <div class="info-item">
+            <div class={`info-item ${item.class}`}>
               <div class="info-item-lebel" data-idx={idx}>
                 <img src={item.icon} alt={item.label} />
                 {/* <span>{item.label}</span> */}
               </div>
-              <div class="info-item-value">
+              <div class="info-item-value" >
                 {(item.value
                   ? item.value
                   : item.dict &&

src/views/IncidentDetail/WzCard/index.tsx

@@ -0,0 +1,55 @@
+import Card from '@/components/Card';
+import { computed, defineComponent } from 'vue-demi';
+
+import emitter from '@/utils/mitt';
+
+
+// @ts-ignore
+import IconLevel from '@/assets/icons/detail/level@2x.png';
+
+
+
+import { useCommonStore, useIncidentStore,useMainStore,useMarkerStore } from '@/store';
+
+
+export default defineComponent({
+  name: 'Wzcard',
+  setup(props) {
+    const store = useIncidentStore();
+    const commonStore = useCommonStore();
+    const mainStore = useMainStore();
+     const markStore = useMarkerStore();
+
+    const searchwz = async (wzname) => { 
+
+      emitter.emit('dosearchstart');
+      await markStore.searchWarehouseByGoods(wzname);
+      emitter.emit('dosearchend');
+    };
+    
+    return () => (
+      <Card cardType="wz-all">
+        <div class="content">
+          <div class="header">
+            <div style="flex-basis: 25%;">物资名称</div>
+            <div style="flex-basis: 18%;">仓储总数</div>
+            <div style="flex-basis: 18%;">可用总数</div>
+            <div style="flex-basis: 39%;text-align: left;">更新时间</div>
+          </div>
+          <div class="body">
+            {store.incidentDetail.resource?.map((i) => (
+              <div class="line">
+                <div style="flex-basis: 25%;color:#39D6FE" class="wzname" onClick={() => { 
+                  searchwz(i.name);
+                }}>{i.name}</div>
+                <div style="flex-basis: 18%;">{i.num}</div>
+                <div style="flex-basis: 18%;">{i.availablenum}</div>
+                <div style="flex-basis: 39%;text-align: left;">{i.time}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Card>
+    );
+  },
+});

src/views/IncidentDetail/index.scss

@@ -169,12 +169,12 @@
             flex-wrap: wrap;
         }
         .detail-left {
-            left: px2rem(30px * 2);
+            left: px2rem(20px * 2);
             width: calc(px2rem(480px * 2) * 2 + px2rem(21px * 2));
             // height: calc(px2rem(472px) * 2 + px2rem(21px));
         }
         .detail-right {
-            right: px2rem(30px * 2);
+            right: px2rem(40px * 2);
             width: px2rem(939px * 2);
             flex-direction: column;
             max-height: px2rem(900px * 2);
@@ -223,6 +223,13 @@
                     align-items: start;
                     justify-content: center;
                 }
+                .normal {}
+                .logtext {
+                    flex-grow: 22 !important;
+                    align-items: flex-start !important;
+                    margin-top: px2rem(23px * 2);
+                    ;
+                }
                 .info-item {
                     display: flex;
                     align-items: center;
@@ -230,9 +237,9 @@
                     &:last-child {
                         padding-bottom: 0;
                     }
-                    line-height: px2rem(50px * 2);
-                    height: px2rem(50px * 2);
-                    font-size: px2rem(16px * 2);
+                    // line-height: px2rem(50px * 2);
+                    // height: px2rem(50px * 2);
+                    font-size: px2rem(15px * 2);
                     flex: 1;
                     width: 100%;
                     .info-item-lebel {
@@ -266,10 +273,12 @@
                     }
                     .info-item-value {
                         flex: 1;
-                        margin-left: px2rem(-20px * 2);
-                        height: px2rem(50px * 2);
-                        padding: 0 px2rem(36px * 2);
-                        background-color: #01016b;
+                        margin-left: px2rem(16px * 2);
+                        line-height: px2rem(26px * 2);
+                        padding: px2rem(15px * 2) px2rem(14px * 2);
+                        padding-bottom: px2rem(15px * 2);
+                        ;
+                        background-color: #051B52;
                         // border-top-right-radius: px2rem(50px * 2);
                         // border-bottom-right-radius: px2rem(50px * 2);
                         overflow: hidden;
@@ -587,6 +596,8 @@
                 .execution-log-container {
                     padding: px2rem(20px * 2) 0;
                     padding-top: px2rem(10px * 2);
+                    padding-right: px2rem(6px * 2);
+                    margin-right: px2rem(-14px * 2);
                     .log-item {
                         position: relative;
                         margin-bottom: px2rem(10px * 2);
@@ -760,7 +771,7 @@
                             position: absolute;
                             width: px2rem(14px * 2);
                             height: 100%;
-                            background: #112692;
+                            background: #051E5C;
                             left: px2rem(14px * 2);
                             top: px2rem(5px * 2);
                             z-index: 0;
@@ -820,7 +831,7 @@
                                     padding-top: px2rem(9px * 2);
                                     padding-bottom: px2rem(9px * 2);
                                     border-radius: px2rem(30px * 2);
-                                    background-color: #112692;
+                                    background-color: #051E5C;
                                 }
                             }
                         }
@@ -968,6 +979,246 @@
                     left: 0;
                 }
             }
+            &-bg-wz-all {
+                .content {
+                    overflow: hidden;
+                    margin-right: -10px;
+                    margin-left: -10px;
+                    .header,
+                    .body {
+                        width: 100%;
+                        font-size: px2rem(12px * 2);
+                        font-weight: 400;
+                    }
+                    .body {
+                        .line {
+                            display: flex;
+                            flex-direction: row;
+                            background: #051B52;
+                            min-height: px2rem(34px * 2);
+                            margin-bottom: 2px;
+                            >div {
+                                flex-basis: 25%;
+                                text-align: center;
+                                line-height: px2rem(34px * 2);
+                            }
+                            .wzname:hover {
+                                cursor: pointer;
+                            }
+                        }
+                        overflow-y: auto;
+                        height: 85%;
+                        &::-webkit-scrollbar {
+                            width: 6px;
+                            background-color: #051B52;
+                            border-left: 2px solid rgba($color: #000000, $alpha: 0);
+                            opacity: 1;
+                        }
+                        &::-webkit-scrollbar-thumb {
+                            background: #39d6fe;
+                            border-radius: 3px;
+                        }
+                    }
+                    .header {
+                        background: #051B52;
+                        color: rgba($color: #ffffff, $alpha: 0.6);
+                        display: flex;
+                        flex-direction: row;
+                        margin-bottom: 2px;
+                        >div {
+                            height: px2rem(34px * 2);
+                            line-height: px2rem(34px * 2);
+                            flex-basis: 25%;
+                            text-align: center;
+                        }
+                    }
+                }
+            }
+            &-bg-em-ex {
+                display: block;
+                text-align: center;
+                position: relative;
+                .headerbutton {
+                    position: absolute;
+                    top: px2rem(20px * 2);
+                    left: px2rem(102px * 2);
+                    width: px2rem(289px * 2);
+                    height: px2rem(35px * 2);
+                    // line-height: px2rem(35px * 2);
+                    border: 1px solid #2845fb;
+                    border-radius: px2rem(35px * 1);
+                    display: flex;
+                    .active {
+                        background: #001063;
+                    }
+                    >div {
+                        flex-basis: px2rem(289px * 1);
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    >div :hover {
+                        cursor: pointer;
+                    }
+                    div:first-child {
+                        border-right: 1px solid #2845fb;
+                    }
+                    img {
+                        width: px2rem(72px * 2);
+                        height: px2rem(17px * 2);
+                    }
+                }
+                .content-c {
+                    max-height: px2rem(372px * 2);
+                    margin-top: px2rem(10px * 2);
+                    &::-webkit-scrollbar-thumb {
+                        background: #39d6fe;
+                        border-radius: 3px;
+                    }
+                    .plan {
+                        .plan-container {
+                            .plan-item {
+                                display: flex;
+                                align-items: center;
+                                margin-right: 0;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                padding-bottom: px2rem(20px);
+                                &>span {
+                                    font-size: px2rem(18px * 2);
+                                    font-weight: 400;
+                                }
+                            }
+                            .plan-content {
+                                font-size: px2rem(17px * 2);
+                                font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+                                font-weight: 400;
+                                text-align: left;
+                                color: #ffffff;
+                                // margin-left: px2rem(3px * 2);
+                                margin-bottom: px2rem(20px * 2);
+                                .plan-title {
+                                    >img {
+                                        width: px2rem(35px * 2);
+                                        height: px2rem(35px * 2);
+                                        vertical-align: middle;
+                                        margin-right: px2rem(14px * 2);
+                                    }
+                                }
+                                .plan-c {
+                                    margin-left: px2rem(49px * 2);
+                                    margin-top: px2rem(0px * 2);
+                                    opacity: 0.66;
+                                    font-size: px2rem(14px * 2);
+                                    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+                                    font-weight: 400;
+                                    text-align: left;
+                                    color: #ffffff;
+                                    .plan-comm,
+                                    .plan-cmd {
+                                        margin-top: px2rem(5px * 2);
+                                        .pc {
+                                            max-width: 80%;
+                                        }
+                                    }
+                                    .plan-comm {
+                                        .pc {
+                                            color: #0ED0FF;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        .pt,
+                        .pc {
+                            display: inline-block;
+                            vertical-align: top;
+                        }
+                    }
+                    .exc {
+                        font-size: px2rem(16px * 2);
+                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+                        font-weight: 400;
+                        text-align: left;
+                        color: #ffffff;
+                        position: relative;
+                        .djcc {
+                            position: relative;
+                            width: px2rem(184px * 2);
+                            display: inline-block;
+                        }
+                        .dj {
+                            width: px2rem(184px * 2);
+                            height: px2rem(30px * 2);
+                            border: px2rem(1px * 2) solid #007dff;
+                            border-radius: px2rem(5px * 2);
+                            margin-top: px2rem(5px * 2);
+                            padding-left: px2rem(20px * 2);
+                            line-height: px2rem(30px * 2);
+                        }
+                        .djc {
+                            background: url("../../assets/card-bg/img_blue@2x.png");
+                            background-repeat: no-repeat;
+                            background-size: 100% 100%;
+                            width: px2rem(104px * 2);
+                            height: px2rem(40px * 2);
+                            line-height: px2rem(40px * 2);
+                            position: absolute;
+                            text-align: center;
+                            margin-top: px2rem(-35px * 2);
+                            right: px2rem(5px * 2);
+                            font-size: px2rem(20px * 2);
+                            ;
+                        }
+                        .dl {
+                            display: inline-block;
+                            float: right;
+                            width: px2rem(112px * 2);
+                            height: px2rem(30px * 2);
+                            line-height: px2rem(30px * 2);
+                            font-size: px2rem(16px * 2);
+                            border: px2rem(1px * 2) solid #39d6fe;
+                            border-radius: px2rem(5px * 2);
+                            text-align: center;
+                            margin-top: px2rem(5px * 2);
+                            margin-right: px2rem(5px * 2);
+                            color: #39d6fe;
+                            img {
+                                width: px2rem(15px * 2);
+                                height: px2rem(15px * 2);
+                                vertical-align: middle;
+                            }
+                        }
+                        .content {
+                            margin-top: px2rem(20px * 2);
+                            max-height: px2rem(230px * 2);
+                            overflow-y: auto;
+                            div {
+                                margin-bottom: px2rem(25px * 2);
+                            }
+                            &::-webkit-scrollbar-thumb {
+                                background: #39d6fe;
+                                border-radius: 3px;
+                            }
+                            // &::-webkit-scrollbar-track {
+                            //     border-radius: 3px;
+                            //     background-color: #39d6fe;
+                            // }
+                            &::-webkit-scrollbar {
+                                width: 6px;
+                                background-color: rgba(0, 0, 0, 0);
+                                opacity: 1;
+                            }
+                            // &::-webkit-scrollbar-thumb {
+                            //     border-radius: 10px;
+                            //     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+                            //     background-color: #555;
+                            // }
+                        }
+                    }
+                }
+            }
         }
     }
     

src/views/IncidentDetail/index.tsx

@@ -16,6 +16,8 @@ import ExecutionLogCard from './ExecutionLogCard';
 import LiveVideoCard from './LiveVideoCard';
 import AccidentCard from './AccidentCard';
 import EmergencyCard from './EmergencyCard';
+import EmExCard from './EmExCard';
+import WzCard from './WzCard';
 import './index.scss';
 // import { watch } from 'fs';
 import { isEmpty } from 'lodash';
@@ -213,9 +215,12 @@ export default defineComponent({
 
           {
             <div class="detail-right">
-              <EmergencyCard />
-              <IncidentPlanCard />
-              <ExecutionLogCard ref={logcard}/>
+              {/* <IncidentPlanCard />
+              <EmergencyCard /> */}
+              <EmExCard></EmExCard>
+              <WzCard></WzCard>
+
+              <ExecutionLogCard ref={logcard} />
 
               {/* <LiveMonitoringCard /> */}
             </div>

yarn.lock

@@ -1986,6 +1986,11 @@ minimist@^1.2.5:
   resolved "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=
 
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
+
 mkdirp@^0.5.1:
   version "0.5.5"
   resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"