fix 应急物资

src/api/resource.ts

@@ -14,6 +14,7 @@ export interface ResourceListItem {
   carryGoods?: null; //携带物资（应急时）
   contactName?: string; //联系人
   contactPhone?: string; //联系电话
+  updateTime?:string;
 }
 
 export interface GetResourceListParams {
@@ -52,6 +53,7 @@ export interface ResourceItemDetail extends ResourceListItem {
     resourceId?: number;
     size?: string;
     unit?: string;
+    availableNum?:string;
   }[];
 }
 export interface ResourceItemDetailResponse extends BaseResponse {

src/components/MarkerMap/dialog.ts

@@ -1,8 +1,15 @@
 import { IncidentItem } from '@/api/incident';
-import { ResourceItemDetail, SingleDeviceItem } from '@/api/resource';
+import {
+  ResourceItemDetail,
+  SingleDeviceItem,
+  getResourceItem,
+  ResourceItemDetailResponse,
+} from '@/api/resource';
 import { useCommonStore } from '@/store';
 import { MarkerType } from "@/store/useMarkerStore";
 
+
+
 export const GET_INCIDENT_DIALOG_HTML = (
   item: MarkerType,
   callback = () => {},
@@ -93,24 +100,27 @@ export const GET_VIDEO_DIALOG_HTML = (
 // f.按钮（方式一：跳转应急仓库详情查看物资情况，方式二：在按钮旁边打开一个列表，该列表显示应急仓库的物资情况：物资名称、型号、数量）
 
 export const GET_WAREHOUSE_DIALOG_HTML = (item: ResourceItemDetail) => {
+  var header = ['序号', '名称', '型号', '规格', '仓储数量', '可用数量', '单位'];
   const el = document.createElement('div');
   el.innerHTML = `
-  <div>
+  <div class="ckbg">
     <div class="title">应急仓库信息</div>
     <div class="content">
-      <div><span>名称：</span><span>${item.name ?? '-'}</span></div>
+      <div><span>仓库名称：</span><span>${item.name ?? '-'}</span></div>
       <div><span>地点：</span><span>${item.address ?? '-'}</span></div>
       <div><span>管理单位：</span><span>${item.manageUnit ?? '-'}</span></div>
       <div><span>联系人：</span><span>${item.contactName ?? '-'}</span></div>
+      <div><span>更新时间：</span><span>${item.updateTime ?? '-'}</span></div>
       <div><span>联系方式：</span><span>${item.contactPhone ?? '-'}</span></div>
     </div>
-    <div class="action">
-      <button class="el-button el-button--primary el-button--small" type="button">
-        <span>查看物资情况</span>
-      </button>
+    <div class="wz">
+       <table id="tbl-${item.id}">
+         <tr>
+        ${ header.map((i) => '<th>' + i + '</th>').join("")}
+       </tr>
+
+       </table>
     </div>
-    <i class="card-border-bottom-left"></i>
-    <i class="card-border-bottom-right"></i>
   </div>
   `;
   return el;

src/components/MarkerMap/index.scss

@@ -102,7 +102,7 @@
             align-items: center;
             // margin-right: px2rem(20px * 2);
             color: white;
-            font-size: 300%;
+            font-size: px2rem(20px * 2);
             font-weight: bold;
             .sys-item-img>img {
                 width: px2rem(75px * 2);
@@ -120,7 +120,7 @@
         .minemap-popup-content {
             max-width: unset !important;
             padding: unset;
-            width: px2rem(332px * 2);
+            min-width: px2rem(332px * 2);
             // width: 332px;
             border-radius: unset;
             @extend .card-bg-container;
@@ -137,6 +137,54 @@
             .action {
                 margin: 0 px2rem(24px * 2) px2rem(24px * 2);
             }
+            .ckbg {
+                background: url('../../assets/card-bg/frame_event@2x.png') no-repeat;
+                background-size: 100% 100%;
+                width: px2rem(663px * 2);
+                height: px2rem(688px * 2);
+                .title {
+                    padding-left: px2rem(29px * 2);
+                    padding-top: px2rem(22px * 2);
+                    padding-bottom: px2rem(35px * 2);
+                }
+                .wz {
+                    height: px2rem(433px * 2);
+                    overflow-y: auto;
+                    width: px2rem(614px * 2);
+                    background: #000B70;
+                    margin-left: px2rem(22px * 2);
+                    table {
+                        width: 100%;
+                        font-size: px2rem(16px * 2);
+                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+                        font-weight: 400;
+                        th {
+                            opacity: 0.6;
+                        }
+                        tr {
+                            height: px2rem(42px * 2);
+                        }
+                        td {
+                            color: white;
+                            opacity: 1;
+                            text-align: center;
+                        }
+                    }
+                }
+                .wz::-webkit-scrollbar-thumb {
+                    background: #39d6fe;
+                    border-radius: 3px;
+                }
+                .content {
+                    display: flex;
+                    flex-wrap: wrap;
+                    flex-direction: row;
+                    >div {
+                        order: 2;
+                        flex: 0 0 50%;
+                    }
+                }
+            }
             .content {
                 height: max-content;
                 padding: px2rem(24px * 2);

src/components/MarkerMap/index.tsx

@@ -7,6 +7,11 @@ import {
   watch,
   computed,
 } 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';
@@ -499,6 +504,33 @@ export default defineComponent({
             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) {}
+               },
+             );
+          });
           return {
             locations: i.locations,
             popup,