菜单逻辑调整、联合值守界面

index.html

@@ -16,6 +16,7 @@
     <script src="/lib/GeoGlobeSDK/GeoLevel.js"></script>
     <script src="/h5player.min.js"></script>
     <script src="/Decoder.js"></script>
+    <script src="/ol-plot.js"></script>
 
     <title>应急指挥一张图</title>
     <!--[if lt IE 11

package-lock.json

@@ -42,6 +42,7 @@
         "ol-plot": "^4.1.10",
         "pinia": "^2.1.7",
         "proj4": "^2.11.0",
+        "qrcodejs2": "^0.0.2",
         "screenfull": "6.0.2",
         "vue": "3.4.25",
         "vue-cropper": "1.1.1",
@@ -10566,6 +10567,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA=="
+    },
     "node_modules/query-string": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/query-string/-/query-string-4.3.4.tgz",

package.json

@@ -51,6 +51,7 @@
     "ol-plot": "^4.1.10",
     "pinia": "^2.1.7",
     "proj4": "^2.11.0",
+    "qrcodejs2": "^0.0.2",
     "screenfull": "6.0.2",
     "vue": "3.4.25",
     "vue-cropper": "1.1.1",

src/api/emergencyCommandMap/JointDuty.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request';
+import CryptoJS from 'crypto-js';
+import { nanoid } from 'nanoid';
+
+// 二维码
+export const getMapProduct = (data) => {
+  const nonce = nanoid();
+  const timestampHeader = (Date.now() / 1000).toFixed();
+  const token = 'dsfsdfsdfsf';
+  const signatureHeader = CryptoJS.SHA256(timestampHeader + token + nonce + timestampHeader).toString(CryptoJS.enc.Hex);
+  return request({
+    url: 'https://yzh.gdgov.cn/yzm-generator/generateCode',
+    method: 'POST',
+    headers: {
+      'x-yzm-nonce': nonce,
+      'x-yzm-signature': signatureHeader,
+      'x-yzm-paasid': token,
+      'x-yzm-timestamp': timestampHeader,
+      'Content-Type': 'application/json;charset=utf-8'
+    },
+    data: {
+      id: data.id,
+      name: data.name,
+      areaCode: data.areaCode,
+      ext: data.ext
+    }
+  });
+};

src/api/globalMap/index.ts

@@ -34,6 +34,15 @@ export const getEmergencyExpertNum = (params) => {
     data: params
   });
 };
+
+export const getSpatialAnalysis = (params) => {
+  return request({
+    url: '/api/spatial_analysis/get_info',
+    method: 'post',
+    data: params
+  });
+};
+
 // 空间分析接口 圆形
 export const getEmergencyExpertNumRound = (params) => {
   return request({

src/components/HeaderSection/index.vue

@@ -7,7 +7,7 @@
           :key="index"
           :class="activeMenu === 'left' && activeMenuIndex === index ? 'menu-item active' : 'menu-item'"
           :style="{ left: 400 * index + 'px' }"
-          @click="clickMenu(item, 'left', index)"
+          @click="clickMenu(item)"
         >
           <div class="text">{{ item.label }}</div>
         </div>
@@ -23,7 +23,7 @@
           :key="index"
           :class="activeMenu === 'right' && activeMenuIndex === index ? 'menu-item active' : 'menu-item'"
           :style="{ right: 400 * index + 'px' }"
-          @click="clickMenu(item, 'right', index)"
+          @click="clickMenu(item)"
         >
           <div class="text">{{ item.label }}</div>
         </div>
@@ -33,33 +33,25 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-const router = useRouter();
+<script lang="ts" setup name="headerSection">
+import usePermissionStore from '@/store/modules/permission';
 
+const router = useRouter();
+const permissionStore = usePermissionStore();
 // type 1 系统内地址 2 外链
-const menuState = reactive({
-  leftMenu: [
-    { label: '全域地图', path: '/globalMap', type: '1', checked: false },
-    { label: '一图作战', path: '/', type: '1', checked: false },
-    { label: '总体态势', path: '', type: '2', checked: false },
-    { label: '非煤矿山', path: '', type: '2', checked: false },
-    { label: '粉尘防爆', path: '', type: '2', checked: false }
-  ],
-  rightMenu: [
-    { label: '地质灾害', path: '', type: '2', checked: false },
-    { label: '森林防火', path: '', type: '2', checked: false },
-    { label: '三防', path: '', type: '2', checked: false },
-    { label: '危化品', path: '', type: '2', checked: false }
-  ]
+const menuState = computed(() => {
+  return permissionStore.menuState;
+});
+const activeMenu = computed(() => {
+  return permissionStore.activeMenu;
+});
+const activeMenuIndex = computed(() => {
+  return permissionStore.menuIndex;
 });
-let activeMenu = ref('left');
-let activeMenuIndex = ref(1);
 
 // 点击菜单事件
-const clickMenu = (item, direction: string, index: number) => {
+const clickMenu = (item) => {
   if (!item.path) return;
-  activeMenu.value = direction;
-  activeMenuIndex.value = index;
   if (item.type === '1') {
     router.push({ path: item.path });
   }

src/components/Map/MapLogical.vue

@@ -108,13 +108,12 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  //position: relative;
+  position: relative;
   .chassis {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -39%);
-    position: absolute;
     width: 4196px;
     height: 1548px;
     background: url('@/assets/images/map/circle.png');

src/components/Map/YztMap/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="map-container">
-    <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
+<!--    :style="{ width: width, height: height }"-->
+    <div ref="mapRef" id="YztMap" class="map-container"></div>
     <!-- 右下工具  -->
     <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
@@ -32,8 +33,6 @@ interface Props {
   color: string;
   drawType: string;
   graphicsType: string;
-  containerWidth: number;
-  containerHeight: number;
 }
 const props = withDefaults(defineProps<Props>(), {});
 const emits = defineEmits(['update:drawing', 'selectGraphics']);
@@ -50,31 +49,22 @@ const mapState = reactive({
 });
 const width = ref('3483px');
 const height = ref('2140px');
-let yztMap;
-const isRanging = ref(false);
-let mapUtils;
-// 鼠标绘制工具
-const { initMouseTool, drawGraphics, closeDraw } = useDrawTool({
-  color: props.color,
-  drawType: props.drawType,
-  graphicsType: props.graphicsType,
-
-});
+let yztMap, map;
 
 // 监听是否开启绘制
 watch(
   () => props.drawing,
   (value) => {
     if (value) {
-      drawGraphics(props.graphicsType);
+      map.drawGraphics(props.graphicsType);
     } else {
-      closeDraw();
+      map.closeDraw();
     }
   }
 );
 
 const init = () => {
-  mapUtils = new olMap({
+  map = new olMap({
     dom: mapRef.value,
     id: 'YZT1715739306532',
     center: mapState.center,
@@ -135,10 +125,10 @@ const switchThreeDimensional = () => {
   view.setPitch(pitch);
 };
 const handleResize = () => {
-  const containerWidth = props.containerWidth * (document.body.clientWidth / 8960);
-  const containerHeight = props.containerHeight * (document.body.clientHeight / 2520);
-  width.value = containerWidth + 'px';
-  height.value = containerHeight + 'px';
+  // const containerWidth = props.containerWidth * (document.body.clientWidth / 8960);
+  // const containerHeight = props.containerHeight * (document.body.clientHeight / 2520);
+  // width.value = containerWidth + 'px';
+  // height.value = containerHeight + 'px';
   yztMap.updateSize();
 };
 // 加载事件

src/components/Map/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="containerRef" class="map-container">
-    <div id="aMap" class="map-container" :style="{ width: width, height: height }"></div>
+<!--   :style="{ width: width, height: height }" -->
+    <div id="aMap" class="map-container"></div>
     <!-- 右下工具  -->
     <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
@@ -209,8 +210,9 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
   .zoom-text {
-    position: fixed;
+    position: absolute;
     bottom: 0;
     right: 170px;
     color: #eaf3fc;
@@ -218,7 +220,7 @@ onUnmounted(() => {
     font-family: 'SourceHanSansCN';
   }
   .right-tool {
-    position: fixed;
+    position: absolute;
     bottom: 50px;
     right: 5px;
   }

src/permission.ts

@@ -58,6 +58,7 @@ router.beforeEach(async (to, from, next) => {
   //     NProgress.done();
   //   }
   // }
+  usePermissionStore().setMenu(to);
   next();
 });
 

src/router/index.ts

@@ -82,7 +82,7 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '/globalMap',
-    component: () => import('@/views/globalMap/index.vue'),
+    component: () => import('@/views/globalMapPage/index.vue'),
     name: 'globalMap'
   }
 ];

src/store/modules/app.ts

@@ -17,6 +17,7 @@ export const useAppStore = defineStore('app', () => {
     en_US: enUS,
     zh_CN: zhCN
   };
+
   const locale = computed(() => {
     return languageObj[language.value];
   });

src/store/modules/permission.ts

@@ -19,6 +19,50 @@ export const usePermissionStore = defineStore('permission', () => {
   const defaultRoutes = ref<RouteRecordRaw[]>([]);
   const topbarRouters = ref<RouteRecordRaw[]>([]);
   const sidebarRouters = ref<RouteRecordRaw[]>([]);
+  // 菜单
+  // type 1 系统内地址 2 外链
+  const menuState = reactive({
+    leftMenu: [
+      { label: '全域地图', path: '/globalMap', type: '1', checked: false },
+      { label: '一图作战', path: '/', type: '1', checked: false },
+      { label: '总体态势', path: '', type: '2', checked: false },
+      { label: '非煤矿山', path: '', type: '2', checked: false },
+      { label: '粉尘防爆', path: '', type: '2', checked: false }
+    ],
+    rightMenu: [
+      { label: '地质灾害', path: '', type: '2', checked: false },
+      { label: '森林防火', path: '', type: '2', checked: false },
+      { label: '三防', path: '', type: '2', checked: false },
+      { label: '危化品', path: '', type: '2', checked: false }
+    ]
+  });
+  const activeMenu = ref('left');
+  const menuIndex = ref(1);
+
+  const setMenu = (route) => {
+    let direction = '';
+    let index = -1;
+    for (let i = 0; i < menuState.leftMenu.length; i++) {
+      if (menuState.leftMenu[i].path === route.path) {
+        index = i;
+        direction = 'left';
+        break;
+      }
+    }
+    if (index === -1) {
+      for (let k = 0; k < menuState.rightMenu.length; k++) {
+        if (menuState.rightMenu[k].path === route.path) {
+          index = k;
+          direction = 'right';
+          break;
+        }
+      }
+    }
+    if (index !== -1) {
+      activeMenu.value = direction;
+      menuIndex.value = index;
+    }
+  };
 
   const getRoutes = (): RouteRecordRaw[] => {
     return routes.value;
@@ -127,7 +171,10 @@ export const usePermissionStore = defineStore('permission', () => {
     topbarRouters,
     sidebarRouters,
     defaultRoutes,
-
+    menuState,
+    activeMenu,
+    menuIndex,
+    setMenu,
     getRoutes,
     getSidebarRoutes,
     getTopbarRoutes,

src/utils/olMap/olMap.ts

@@ -1,4 +1,3 @@
-import { drawTool } from "./drawTool";
 // 引入OpenLayers的主模块
 import Map from 'ol/Map';
 import View from 'ol/View';
@@ -12,13 +11,13 @@ import proj4 from 'proj4';
 import { register } from 'ol/proj/proj4';
 import { defaults } from 'ol/control';
 import axios from 'axios';
-import { useHistory } from '@/hooks/useHistory';
-import olPlot from 'ol-plot';
+// import olPlot from 'ol-plot';
+// import { activate } from '../ol-plot/ol-plot'
 
 proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs');
 proj4.defs('EPSG:4525', '+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs');
 register(proj4);
-const commonUrl = import.meta.env.VITE_APP_BASE_API + '/api/oneShare/proxyHandler/mm/';
+const commonUrl = import.meta.env.VITE_APP_BASE_API + '/api/oneShare/proxyHandler/gd/';
 const projection = new Projection({
   code: 'EPSG:4490',
   units: 'degrees'
@@ -33,11 +32,12 @@ for (let z = 2; z < 22; ++z) {
 export class olMap {
   private map;
   private drawOptions = {
-    strokeColor: options.color,
+    graphicsType: 'circle',
+    strokeColor: '#f80102',
     strokeOpacity: 1,
     strokeWeight: 2,
-    fillColor: options.color,
-    fillOpacity: options.drawType === '1' ? 0 : 0.5,
+    fillColor: '#f80102',
+    fillOpacity: 0,
     strokeStyle: 'solid'
   };
   // private { currentState, commit, undo, history, future } = useHistory();
@@ -77,6 +77,9 @@ export class olMap {
 
   formatXml(code, minZoom, maxZoom, zIndex, visible) {
     const xml = new WMTSCapabilities();
+    // axios.post(commonUrl + 'YZT1723547712680', '<wfs:GetFeature xmlns:wfs="http://www.opengis.net/wfs"service="WFS"version="1.0.0"outputFormat="GeoJson"maxFeatures="99999"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.opengis.net/wfshttp://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">\n' +
+    //   '<wfs:QuerytypeName="GDSMMSZJGZDTJX_2023"userecent="true"/>\n' +
+    //   '</wfs:GetFeature>');
     this.getCapabilities(code).then((lists) => {
       const mapData = xml.read(lists.data);
       const layerParam = {
@@ -122,6 +125,7 @@ export class olMap {
   // 初始化绘画工具
   initMouseTool(options) {
     this.drawOptions = {
+      graphicsType: options.graphicsType ? options.graphicsType : 'cirlce',
       strokeColor: options.color,
       strokeOpacity: 1,
       strokeWeight: 2,
@@ -129,16 +133,39 @@ export class olMap {
       fillOpacity: options.drawType === '1' ? 0 : 0.5,
       strokeStyle: 'solid'
     };
-    this.plot = new olPlot(this.map, {
-      zoomToExtent: true
-    });
-    this.plot.plotDraw.on('drawEnd', this.onDrawEnd);
+    // debugger
+    // this.plot = new olPlot(this.map, {
+    //   zoomToExtent: true,
+    //   ...this.drawOptions
+    // });
+    // this.plot.plotDraw.on('drawEnd', this.onDrawEnd.bind(this));
   }
   // 绘制结束事件
   onDrawEnd(event) {
     const feature = event.feature;
     const aa = feature.getGeometry();
-    // 开始编辑
-    this.plot.plotEdit.activate(feature);
+    // 继续编辑编辑
+    this.drawGraphics(this.drawOptions.graphicsType);
+  }
+  // 绘制图形
+  drawGraphics(type: string) {
+    if (type === 'circle') {
+      // 绘制圆形
+      debugger
+      activate('Circle');
+    } else if (type === 'rectangle') {
+      // 绘制矩形
+      this.plot.plotDraw.activate('RectAngle');
+    } else if (type === 'polygon') {
+      // 绘制多边形
+      this.plot.plotDraw.activate('Polygon');
+    } else if (type === 'freePolygon') {
+      // 绘制索套
+      this.plot.plotDraw.activate('FreePolygon');
+    }
+  }
+  // 关闭绘制
+  closeDraw() {
+    this.plot.plotDraw.deactivate();
   }
 }

src/views/emergencyCommandMap/MiddleSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="middle-section">
-    <GlobalMap is-component width="3483px" height="2140px" />
+    <GlobalMap is-component width="3321" height="2140" />
   </div>
 </template>
 
@@ -11,7 +11,7 @@ import GlobalMap from '@/views/globalMap/index.vue';
 <style lang="scss" scoped>
 .middle-section {
   margin: 0 91px;
-  flex: 1;
+  width: 3321px;
   height: 2140px;
   animation: slideAndFade 1.5s;
 }

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -1,11 +1,158 @@
 <template>
-  <div>联合值守</div>
+  <div class="duty-card">
+    <div class="title gradient-text">联合值守</div>
+    <div class="more-btn" @click="handleShowQrCode">签到码</div>
+    <div class="card-content">
+      <div class="custom-table">
+        <div class="table-header">
+          <div v-for="(item, index) in tableHeader" :key="index" class="td">{{ item.name }}</div>
+          <div class="td">操作</div>
+        </div>
+        <div class="table-content">
+          <div v-for="(item, index) in lisdivata" :key="index" class="tr">
+            <div class="td">{{ item.data1 }}</div>
+            <div class="td">
+              <div>{{ item.data2 }}</div>
+              <div>{{ item.data4 }}</div>
+            </div>
+            <div class="td">{{ item.data3 }}</div>
+            <div class="td">
+              <div class="phone-btn">电话</div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <Dialog v-model="showQrCode" title="签到码">
+    <div id="qrCode" ref="qrCodeDiv" style="width: 700px; height: 700px;" />
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
+// import QRCode from 'qrcodejs2';
+
+import { getMapProduct } from '@/api/emergencyCommandMap/JointDuty';
+
+const tableHeader = reactive([
+  {
+    name: '值守单位',
+    key: 'data1'
+  },
+  {
+    name: '值守人员',
+    key: 'data2'
+  },
+  {
+    name: '联系方式',
+    key: 'data3'
+  }
+]);
+const lisdivata = ref([
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
+  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' }
+]);
 
+const showQrCode = ref(false);
+let qrcode = ref();
+const handleShowQrCode = () => {
+  showQrCode.value = true;
+};
+
+// 生成二维码
+// const creatQrcode = (item) => {
+//   if (qrcode) {
+//     qrcode.clear()
+//   }
+//
+//   qrcode.value = new QRCode('qrcode', {
+//     text:item.code, // 二维码的内容
+//     width: 128,
+//     height: 128,
+//     colorDark: 'transparent',
+//     colorLight:'#000',
+//     // 容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
+//     correctLevel: QRCode.CorrectLevel.M
+// })
+//   qrcode.value._el.title = '' // 鼠标移入二维码会展示原生title，如果不需要就可以将title置为空
+// };
+onMounted(() => [
+  getMapProduct({
+    id: '1',
+    name: '12',
+    areaCode: '12',
+    ext: '12'
+  })
+  // creatQrcode({
+  //   code: '1231231'
+  // })
+]);
 </script>
 
 <style lang="scss" scoped>
-
+.duty-card {
+  width: 2601px;
+  height: 879px;
+  background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
+  position: relative;
+  color: #fff;
+  .card-content {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 100px;
+    padding-left: 60px;
+    width: 2500px;
+  }
+}
+.search-box {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+.title {
+  position: absolute;
+  top: 6px;
+  left: 141px;
+  font-size: 60px;
+}
+.more-btn {
+  position: absolute;
+  top: 60px;
+  right: 136px;
+  color: #00e8ff;
+  font-size: 36px;
+  cursor: pointer;
+  z-index: 2;
+}
+.custom-table {
+  width: 100%;
+  .table-header {
+    display: flex;
+    .td {
+      flex: 1;
+    }
+  }
+  .table-content {
+    height: 650px;
+    overflow-y: auto;
+    .tr {
+      display: flex;
+    }
+    .td {
+      flex: 1;
+    }
+    .phone-btn {
+      cursor: pointer;
+      color: rgb(24, 144, 255);
+    }
+  }
+}
 </style>

src/views/globalMap/index.vue

@@ -2,8 +2,8 @@
   <div id="globalMap">
     <div
       :class="isComponent ? 'global-map' : 'global-map bg'"
-      :style="{ width: width ? width : '100%', height: height ? height : '100%' }"
     >
+<!--      :style="{ width: width ? width : '100%', height: height ? height : '100%' }"-->
 <!--      :style="{ width: width ? width : '8960px', height: height ? height : '2560px'}"-->
 <!-- -->
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
@@ -36,8 +36,8 @@
         :draw-type="mouseToolState.drawType"
         :graphics-type="mouseToolState.graphicsType"
         :active-map="activeMap"
-        :container-width="isComponent ? 3483 : 8960"
-        :container-height="isComponent ? 2140 : 2520"
+        :container-width="width"
+        :container-height="height"
         @selectGraphics="analysisSpatial"
         @unSelectGraphics="unSelectGraphics"
       />
@@ -52,7 +52,7 @@
       <!--更换地图类型-->
       <SwitchMapTool
         :active-map="activeMap"
-        :class="isComponent || activeMap === 'logical' || activeMap === 'satellite2' ? 'tool-box' : 'tool-box fixed'"
+        class="tool-box"
         @switchMap="switchMap"
       />
       <!--时间轴-->
@@ -63,7 +63,7 @@
         v-model:color="mouseToolState.color"
         v-model:drawType="mouseToolState.drawType"
         v-model:graphicsType="mouseToolState.graphicsType"
-        :class="isComponent || activeMap === 'logical' || activeMap === 'satellite2' ? 'absoluteTool' : 'absoluteTool fixed'"
+        class="absoluteTool"
         @undo="undo"
       />
 <!--      <AnalyzeDataDialog v-if="analysisSpatialDataShow" :selectedScope="selectedScope" />-->
@@ -87,9 +87,13 @@ import TimeAxis from '@/components/TimeAxis/index.vue';
 import DrawTools from '@/views/globalMap/DrawTools.vue';
 import { countCircleArea, countRectangleArea } from '@/utils/geometryUtil';
 import { deepClone } from '@/utils';
-import { getEmergencyExpertNum, getEmergencyExpertNumRound, getRescueMateria } from '@/api/globalMap';
+import {
+  getEmergencyExpertNum,
+  getEmergencyExpertNumRound,
+  getRescueMateria,
+  getSpatialAnalysis
+} from '@/api/globalMap';
 import { listMenu } from '@/api/system/menu';
-import autofit from 'autofit.js';
 import RightMenu from './RightMenu/index.vue';
 import { getWaterList } from '@/api/globalMap/reservoir';
 
@@ -108,7 +112,7 @@ const mapData = reactive(logicalData);
 let mapRef = ref(null);
 let map2Ref = ref(null);
 // logical vectorgraph satellite satellite2
-let activeMap = ref('logical');
+let activeMap = ref('vectorgraph');
 
 const switchMap = (key) => {
   activeMap.value = key;
@@ -238,34 +242,22 @@ const analysisSpatial = (data, len?: string) => {
       analysisSpatialDataShow.value = true;
     });
   } else {
-    let location = '';
-    let pathArr = [];
-    if (data.type === 'rectangle') {
-      pathArr = [
-        [
-          [data.southWest[0], data.northEast[1]],
-          data.northEast,
-          [data.northEast[0], data.southWest[1]],
-          data.southWest,
-          [data.southWest[0], data.northEast[1]]
-        ]
-      ];
-    } else if (data.type === 'polygon') {
-      pathArr = deepClone(data.path);
-      pathArr.push(deepClone(pathArr[0]));
-      pathArr = [pathArr];
+    let location = [];
+    if (data.path && data.path.length > 1) {
+      data.path.forEach((item) => {
+        location.push({
+          x: item[0],
+          y: item[1]
+        });
+      });
+      location.push({
+        x: data.path[0][0],
+        y: data.path[1][1]
+      });
     }
-    let pathStr = '';
-    pathArr[0].forEach((innerArr, index) => {
-      if (index > 0) {
-        pathStr += ',';
-      }
-      pathStr += innerArr.reverse().join(' ');
-    });
-    location = `POLYGON((${pathStr}))`;
-    getEmergencyExpertNum({ location }).then((res) => {
+    getSpatialAnalysis({ location }).then((res) => {
       selectedScope[data.id] = deepClone(analysisSpatialData);
-      selectedScope[data.id].area = countRectangleArea(pathArr);
+      // selectedScope[data.id].area = countRectangleArea(pathArr);
       selectedScope[data.id].expert = res.data.list[0].expertNum?.toString();
       analysisSpatialDataShow.value = true;
     });
@@ -276,25 +268,6 @@ const unSelectGraphics = (data) => {
   delete selectedScope[data.id];
   analysisSpatialDataShow.value = false;
 };
-onMounted(() => {
-  if (!props.isComponent) {
-    autofit.init(
-      {
-        dw: 8960,
-        dh: 2520,
-        el: '#globalMap',
-        resize: false,
-        ignore: ['#aMap', '#YztMap']
-      },
-      false
-    );
-  }
-});
-onUnmounted(() => {
-  if (autofit) {
-    autofit.off();
-  }
-});
 </script>
 
 <style lang="scss" scoped>
@@ -307,6 +280,8 @@ onUnmounted(() => {
   background-size: cover;
 }
 .global-map {
+  width: 100%;
+  height: 100%;
   position: relative;
   //overflow: hidden;
   .tool-box {

src/views/globalMapPage/index.vue

@@ -3,13 +3,49 @@
     <div class="dashboard-container">
       <HeaderSection />
       <div class="dashboard-content">
-        <globalMap />
+        <GlobalMap width="8798" height="2182" />
       </div>
       <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import GlobalMap from '@/views/globalMap/index.vue';
+import autofit from 'autofit.js';
 
-<style lang="scss" scoped></style>
+onMounted(() => {
+  autofit.init(
+    {
+      dw: 8960,
+      dh: 2520,
+      el: '#dashboard-container',
+      resize: false,
+      ignore: ['#aMap', '#YztMap']
+    },
+    false
+  );
+});
+
+onUnmounted(() => {
+  autofit.off();
+});
+</script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  width: 8960px;
+  height: 2560px;
+  font-size: 74px;
+  background: url('@/assets/images/bg.jpg') no-repeat 100% 100%;
+  background-size: cover;
+  font-family: 'PingFang SC', sans-serif;
+  position: relative;
+  .dashboard-content {
+    padding: 0 81px;
+    display: flex;
+    height: calc(2560px - 228px - 150px);
+    overflow: hidden;
+  }
+}
+</style>

src/views/routineCommandMap/MiddleSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="middle-section">
-    <GlobalMap is-component width="3483px" height="2140px" />
+    <GlobalMap is-component width="3894" height="2140" />
   </div>
 </template>