fix 地图

src/api/incident.ts

@@ -21,7 +21,9 @@ export interface IncidentItem {
   assistDept?: string; //
   createBy?: string; //
   createTime?: string; //
-  commanderText?:string;
+  commanderText?: string;
+  madinDeptText?: string;
+  assistDeptText?: string;
 }
 
 export interface IncidentListResponse extends BaseResponse {

src/assets/icons/home/icon_map_dcz.svg

@@ -2,8 +2,8 @@
 <svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>待处置事件</title>
     <defs>
-        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
-            <stop stop-color="#FF512F" offset="0%"></stop>
+        <linearGradient x1="100%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#FF512F" offset="1%"></stop>
             <stop stop-color="#FFA82A" offset="100%"></stop>
         </linearGradient>
     </defs>

src/components/MarkerMap/dialog.ts

@@ -255,9 +255,9 @@ export const renderElement = (image: any) => {
   el.id = 'marker';
   el.style.backgroundImage = `url(${image})`;
   el.style.backgroundSize = 'cover';
-  el.style.width = (24 * 2) / 576 + 'rem';
+  el.style.width = (24 *2.5 * 2) / 576 + 'rem';
   el.style.minWidth = '24px';
-  el.style.height = (25 * 2) / 576 + 'rem';
+  el.style.height = (25 * 2.5* 2) / 576 + 'rem';
   el.style.minHeight = '25px';
   el.className = "pointerc"
 

src/components/MarkerMap/index.tsx

@@ -713,18 +713,20 @@ export default defineComponent({
              if (type === '应急事件') {
                state.markCircle = {
                  type: 'geojson',
-                 data: turf.circle(
+                 data:turf.circle(
                    [
                      parseFloat(i.locations?.split(',')[0] ?? '0'),
                      parseFloat(i.locations?.split(',')[1] ?? '0'),
                    ],
                    5,
                    {
-                     steps: 164,
+                     steps: 499,
                      units: 'kilometers',
                      properties: { foo: 'bar' },
                    },
                  ),
+               
+             
                };
                // mySource = state.markCircle;
                state.map.addSource('pointSource', state.markCircle);
@@ -737,7 +739,7 @@ export default defineComponent({
                    ],
                    10,
                    {
-                     steps: 164,
+                     steps: 64,
                      units: 'kilometers',
                      properties: { foo: 'bar' },
                    },
@@ -748,27 +750,91 @@ export default defineComponent({
                  id: 'polygonLayer',
                  type: 'fill',
                  source: 'pointSource',
-                 layout: {},
+                 layout: {
+                   visibility: 'visible',
+                 },
                  paint: {
-                   'fill-color': '#0dacfc',
-                   'fill-opacity': 0.1,
-                   'fill-translate': [-10, -10],
-                   'fill-outline-color': '#0a217d',
+                   'fill-antialias': true, //2d的半径是实际尺寸，单位是米，不是像素值
+                   'fill-color': '#143981',
+                   'fill-opacity': 0.5,
+                   'fill-outline-color': 'red',
+                   //  'fill-outline-width':20
                  },
+                 minzoom: 7, //2d不支持
+                 maxzoom: 17.5, //2d不支持
                };
+
+              
                state.map.addLayer(state.markCirclelayer);
-              state.map.addLayer({
-                id: 'polygonLayer1',
-                type: 'fill',
-                source: 'pointSource1',
-                layout: {},
-                paint: {
-                  'fill-color': '#0dacfc',
-                  'fill-opacity': 0.2,
-                  'fill-translate': [-10, -10],
-                  'fill-outline-color': '#0a217d',
-                },
-              });
+                state.map.addLayer({
+                  id: 'polygonLayer2',
+                  type: 'line',
+                  source: 'pointSource',
+                  layout: {},
+                  paint: {
+                    // 'fill-color': '#0dacfc',
+                    // 'fill-opacity': 0.2,
+                    // 'fill-translate': [-10, -10],
+                    'line-color': '#143981',
+                    'line-width': 5,
+                  },
+                });
+             
+               state.map.addLayer({
+                 id: 'polygonLayer3',
+                 type: 'fill',
+                 source: 'pointSource1',
+                 layout: {
+                   visibility: 'visible',
+                 },
+                 paint: {
+                   'fill-antialias': true,
+                   'fill-color': '#143981',
+                   'fill-opacity': 0.3,
+                 },
+                 minzoom: 7, //2d不支持
+                 maxzoom: 17.5, //2d不支持
+               });
+                state.map.addLayer({
+                  id: 'polygonLayer1',
+                  type: 'line',
+                  source: 'pointSource1',
+                  layout: {},
+                  paint: {
+                    // 'fill-color': '#0dacfc',
+                    // 'fill-opacity': 0.2,
+                    // 'fill-translate': [-10, -10],
+                    'line-color': '#143981',
+                    'line-width': 5,
+                  },
+                });
+               
+                // state.map.addLayer({
+                //   id: 'polygonLayer4',
+                //   type: 'symbol',
+                //   source: 'pointSource1',
+                //   layout: {
+                //     'text-field': '10km',
+                //     'text-size': 40,
+                //   },
+                //   paint: {
+                //     'text-color': 'red',
+                //   }
+               
+                // });
+              //  state.map.addLayer({
+              //    id: 'polygonLayer5',
+              //    type: 'symbol',
+              //    source: 'pointSource',
+              //    layout: {
+              //      'text-field': '5km',
+              //      'text-size': 40,
+              //    },
+              //    paint: {
+              //      'text-color': 'red',
+              //    },
+              //  });
+               
              }
           } catch (E) {}
          
@@ -831,7 +897,11 @@ export default defineComponent({
           // }
           // debugger
 
-         var imagep= renderElement(nextImage);
+          var imagep = renderElement(nextImage);
+          if (type === '应急事件') {
+            imagep.style.width = (24 * 3 * 2) / 576 + 'rem';
+            imagep.style.height = (25 * 3 * 2) / 576 + 'rem';
+          }
         var markp = 
               new window.minemap.Marker(imagep, {
                 offset: [-25, -25],
@@ -936,11 +1006,14 @@ export default defineComponent({
     };
     const handleRemoveAllMarkers = () => {
       try {
-         state.map.removeSource('pointSource');
-        state.map.removeLayer('polygonLayer');
+        state.map.removeSource('pointSource');
          state.map.removeSource('pointSource1');
-         state.map.removeLayer('polygonLayer1');
+        state.map.removeLayer('polygonLayer');
+        state.map.removeLayer('polygonLayer1');
+        state.map.removeLayer('polygonLayer2');
+        state.map.removeLayer('polygonLayer3');
         
+
       } catch (E) { }
      
       state.markers.forEach((m) => {

src/views/IncidentDetail/CommandChainCard/index.tsx

@@ -77,8 +77,7 @@ export default defineComponent({
           </div>
         </div> */}
         <div class="command-chain-container" id="ss" style="position:relative">
-          
-          {store.incidentDetail?.baseInfo?.commanderText ? 
+          {store.incidentDetail?.baseInfo?.commanderText ? (
             <>
               <div class="main-dept command">
                 <div>
@@ -97,63 +96,81 @@ export default defineComponent({
                 </div>
               </div>
             </>
-          : 
+          ) : (
             ''
-          }
-          
-          <div class="main-dept">
-            <div>
-              <div class="dept" id="11" datatype="1">
-                <img src={main_organized} />
-                主办部门
-              </div>
-              <div class="deptline"></div>
-            </div>
+          )}
+          {store.incidentDetail?.baseInfo?.madinDeptText ? (
+            <>
+              <div class="main-dept">
+                <div>
+                  <div class="dept" id="11" datatype="1">
+                    <img src={main_organized} />
+                    主办部门
+                  </div>
+                  <div class="deptline"></div>
+                </div>
 
-            <div class="dept-list">
-              <div class="dept-name" id="22">
-                <div></div>
-                {getDept(store.incidentDetail?.baseInfo?.madinDept)}
-              </div>
-            </div>
-          </div>
-          <div
-            class="main-dept"
-            v-show={
-              (store?.incidentDetail?.baseInfo?.assistDept?.split(',') ?? [])
-                .length != 0
-            }>
-            <div>
-              <div class="dept" datatype="2">
-                <img src={co_organizer} />
-                协办部门
+                <div class="dept-list">
+                  <div class="dept-name" id="22">
+                    <div></div>
+                    {store.incidentDetail?.baseInfo?.madinDeptText}
+                  </div>
+                </div>
               </div>
-              <div class="deptline"></div>
-            </div>
+            </>
+          ) : (
+            ''
+          )}
 
-            <div class="dept-list">
+          {store.incidentDetail?.baseInfo?.assistDeptText ? (
+            <>
               <div
-                class="leftline"
-                style="position: absolute;background: white;width: 1px;left: 0;"></div>
-              {(
-                store?.incidentDetail?.baseInfo?.assistDept?.split(',') ?? []
-              ).map((item, index) => (
-                <div
-                  class="dept-name"
-                  datatype={
-                    index ==
-                    store?.incidentDetail!.baseInfo!.assistDept!.split(',')
-                      .length -
-                      1
-                      ? ''
-                      : '0'
-                  }>
-                  <div></div>
-                  {getDept(item)}
+                class="main-dept"
+                v-show={
+                  (
+                    store?.incidentDetail?.baseInfo?.assistDeptText?.split(
+                      ',',
+                    ) ?? []
+                  ).length != 0
+                }>
+                <div>
+                  <div class="dept" datatype="2">
+                    <img src={co_organizer} />
+                    协办部门
+                  </div>
+                  <div class="deptline"></div>
                 </div>
-              ))}
-            </div>
-          </div>
+
+                <div class="dept-list">
+                  <div
+                    class="leftline"
+                    style="position: absolute;background: white;width: 1px;left: 0;"></div>
+                  {(
+                    store?.incidentDetail?.baseInfo?.assistDeptText?.split(
+                      ',',
+                    ) ?? []
+                  ).map((item, index) => (
+                    <div
+                      class="dept-name"
+                      datatype={
+                        index ==
+                        store?.incidentDetail!.baseInfo!.assistDeptText!.split(
+                          ',',
+                        ).length -
+                          1
+                          ? ''
+                          : '0'
+                      }>
+                      <div></div>
+                      {getDept(item)}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : (
+            ''
+          )}
         </div>
       </Card>
     );