视频监控更多

src/components/Dialog/index.vue

@@ -24,11 +24,12 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'closeDialog']);
 
 // 关闭弹窗
 const closeDialog = () => {
   emit('update:modelValue', false);
+  emit('closeDialog');
 };
 </script>
 

src/components/Map/YztMap/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="map-container">
-    <div ref="mapRef" id="YztMap" class="map-container"></div>
+    <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
     <!-- 右下工具  -->
     <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
@@ -23,6 +23,8 @@ import 'ol/ol.css';
 import { UseOpenLayersMap } from '@/hooks/OpenLayersMap/useOpenLayersMap';
 import QuickZoom from '../quickZoom.vue';
 import { useDrawTool } from "@/hooks/OpenLayersMap/useDrawTool";
+import { MapUtils } from '@/utils/olMap/map';
+import { olMap } from '@/utils/olMap/olMap';
 
 interface Props {
   activeMap: string;
@@ -30,6 +32,8 @@ interface Props {
   color: string;
   drawType: string;
   graphicsType: string;
+  containerWidth: number;
+  containerHeight: number;
 }
 const props = withDefaults(defineProps<Props>(), {});
 const emits = defineEmits(['update:drawing', 'selectGraphics']);
@@ -44,38 +48,17 @@ const mapState = reactive({
   // 是否显示比例尺
   showScale: true
 });
-
+const width = ref('3483px');
+const height = ref('2140px');
 let yztMap;
 const isRanging = ref(false);
-const { initMap } = new UseOpenLayersMap({
-  id: 'YZT1715739306532',
-  center: mapState.center,
-  zoom: mapState.zoom,
-  minZoom: mapState.minZoom,
-  maxZoom: mapState.maxZoom,
-  // 加载完成事件
-  onLoadCompleted: (map) => {
-    yztMap = map;
-    initMouseTool(map);
-  }
-});
+let mapUtils;
 // 鼠标绘制工具
-const { initMouseTool, drawGraphics, setColor, setDrawType, setGraphicsType, closeDraw, handleUndo,currentState,
-  history } = useDrawTool({
+const { initMouseTool, drawGraphics, closeDraw } = useDrawTool({
   color: props.color,
   drawType: props.drawType,
   graphicsType: props.graphicsType,
-  // 绘制完成事件
-  onDrawCompleted: (data, overlaysData, obj) => {
-    emits('selectGraphics', data, overlaysData.length.toString());
-    // 点击空间分析
-    obj.on('click', function () {
-      // 没在编辑时
-      if (!props.drawing) {
-        emits('selectGraphics', data);
-      }
-    });
-  }
+
 });
 
 // 监听是否开启绘制
@@ -91,7 +74,37 @@ watch(
 );
 
 const init = () => {
-  initMap(mapRef.value);
+  mapUtils = new olMap({
+    dom: mapRef.value,
+    id: 'YZT1715739306532',
+    center: mapState.center,
+    zoom: mapState.zoom,
+    minZoom: mapState.minZoom,
+    maxZoom: mapState.maxZoom,
+    drawTool: {
+      use: true,
+      color: props.color,
+      drawType: props.drawType,
+      graphicsType: props.graphicsType,
+      // 绘制完成事件
+      onDrawCompleted: (data, overlaysData, obj) => {
+        emits('selectGraphics', data, overlaysData.length.toString());
+        // 点击空间分析
+        obj.on('click', function () {
+          // 没在编辑时
+          if (!props.drawing) {
+            emits('selectGraphics', data);
+          }
+        });
+      }
+    },
+    // 加载完成事件
+    onLoadCompleted: (map) => {
+      yztMap = map;
+      // initMouseTool(map);
+      handleResize();
+    }
+  });
 };
 // 设置地图层级
 const setMapZoom = (value) => {
@@ -121,9 +134,21 @@ const switchThreeDimensional = () => {
   const pitch = mapState.isThreeDimensional ? 45 : 0;
   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';
+  yztMap.updateSize();
+};
 // 加载事件
 onMounted(() => {
   init();
+  window.addEventListener('resize', handleResize);
+});
+// 卸载事件
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 

src/components/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="containerRef" class="map-container">
-    <div id="aMap" class="map-container" :style="{width: width, height: height}"></div>
+    <div id="aMap" class="map-container" :style="{ width: width, height: height }"></div>
     <!-- 右下工具  -->
     <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
@@ -11,9 +11,9 @@
         <div class="ruler-icon" style="margin-left: 5px" @click="changeScaleControl"></div>
       </div>
       <!-- 测距工具 -->
-<!--      <div class="model-btn" @click="toggleRangingTool">-->
-<!--        {{ isRanging ? '关闭测距' : '开启测距' }}-->
-<!--      </div>-->
+      <!--<div class="model-btn" @click="toggleRangingTool">-->
+      <!--{{ isRanging ? '关闭测距' : '开启测距' }}-->
+      <!--</div>-->
     </div>
   </div>
 </template>
@@ -98,7 +98,7 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
     map.on('zoomchange', zoomChangeHandler);
     initMouseTool({ map, AMap });
     initRuler(map, AMap);
-    handleResize()
+    handleResize();
   }
 });
 // 监听地图类型变化
@@ -188,13 +188,13 @@ defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, h
 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'
+  width.value = containerWidth + 'px';
+  height.value = containerHeight + 'px';
   map.resize();
-}
+};
 onMounted(() => {
   window.addEventListener('resize', handleResize);
-})
+});
 // 卸载事件
 onUnmounted(() => {
   if (map) {
@@ -251,8 +251,10 @@ onUnmounted(() => {
     font-size: 25.73px;
     font-family: 'SourceHanSansCN';
   }
-  :deep(.amap-scale-edgeleft), :deep(.amap-scale-middle), :deep(.amap-scale-edgeright){
-    border: 1px solid #BFE1FC !important;
+  :deep(.amap-scale-edgeleft),
+  :deep(.amap-scale-middle),
+  :deep(.amap-scale-edgeright) {
+    border: 1px solid #bfe1fc !important;
     background: transparent !important;
   }
   :deep(.amap-logo),

src/hooks/OpenLayersMap/useDrawTool.ts

@@ -32,11 +32,12 @@ export function useDrawTool(options: DrawToolOptions) {
     // 绘制结束后，添加到FeatureOverlay显示。
     function onDrawEnd (event) {
       var feature = event.feature;
+      const aa = feature.getGeometry();
       // 开始编辑
       plot.plotEdit.activate(feature);
     }
 
-    plot.plotDraw.on('drawEnd', onDrawEnd)
+    plot.plotDraw.on('drawEnd', onDrawEnd);
     // 初始化绘制工具
     // mouseTool = new AMap.MouseTool(map);
     // // 绘制完成事件

src/utils/olMap/drawTool.ts

@@ -0,0 +1,10 @@
+export class DrawTool {
+  private drawOptions = {
+    strokeColor: options.color,
+    strokeOpacity: 1,
+    strokeWeight: 2,
+    fillColor: options.color,
+    fillOpacity: options.drawType === '1' ? 0 : 0.5,
+    strokeStyle: 'solid'
+  };
+}

src/utils/olMap/olMap.ts

@@ -0,0 +1,144 @@
+import { drawTool } from "./drawTool";
+// 引入OpenLayers的主模块
+import Map from 'ol/Map';
+import View from 'ol/View';
+import Projection from 'ol/proj/Projection';
+import { getWidth, getTopLeft } from 'ol/extent';
+import TileLayer from 'ol/layer/Tile';
+import WMTS from 'ol/source/WMTS';
+import WMTSTileGrid from 'ol/tilegrid/WMTS';
+import WMTSCapabilities from 'ol/format/WMTSCapabilities';
+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';
+
+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 projection = new Projection({
+  code: 'EPSG:4490',
+  units: 'degrees'
+});
+const projectionExtent = [-180, -90, 180, 90];
+const size = getWidth(projectionExtent) / 256;
+const resolutions = [];
+for (let z = 2; z < 22; ++z) {
+  resolutions[z] = size / Math.pow(2, z);
+}
+
+export class olMap {
+  private map;
+  private drawOptions = {
+    strokeColor: options.color,
+    strokeOpacity: 1,
+    strokeWeight: 2,
+    fillColor: options.color,
+    fillOpacity: options.drawType === '1' ? 0 : 0.5,
+    strokeStyle: 'solid'
+  };
+  // private { currentState, commit, undo, history, future } = useHistory();
+  private overlays = [];
+  private overlaysData = [];
+  private graphicsType = '';
+  private plot;
+
+  constructor(options) {
+    this.map = new Map({
+      controls: defaults({
+        zoom: false,
+        rotate: false
+      }),
+      layers: [],
+      target: options.dom,
+      view: new View({
+        center: options.center && options.center.length === 2 ? [options.center[0], options.center[1]] : [110.90153121597234, 21.98323671981171],
+        zoom: options.zoom ? options.zoom : 9.6,
+        projection: projection,
+        maxZoom: options.maxZoom ? options.maxZoom : 18,
+        minZoom: options.minZoom ? options.minZoom : 1
+      })
+    });
+    // 初始化比例尺
+    if (options.showScale) {
+      // map.addControl(new AMap.Scale());
+    }
+    if (options.drawTool.use) {
+      this.initMouseTool(options.drawTool);
+    }
+    if (typeof options.onLoadCompleted === 'function') {
+      options.onLoadCompleted(this.map);
+    }
+    this.formatXml(options.id);
+  }
+
+  formatXml(code, minZoom, maxZoom, zIndex, visible) {
+    const xml = new WMTSCapabilities();
+    this.getCapabilities(code).then((lists) => {
+      const mapData = xml.read(lists.data);
+      const layerParam = {
+        layerName: mapData.Contents.Layer[0].Title,
+        styleName: mapData.Contents.Layer[0].Style[0].Identifier,
+        tilematrixset: mapData.Contents.TileMatrixSet[0].Identifier,
+        format: mapData.Contents.Layer[0].Format[0]
+      };
+      this.createWmsLayer(code, layerParam, minZoom, maxZoom, zIndex, visible);
+    });
+  }
+  // 请求接口获取地图信息
+  getCapabilities(code) {
+    return axios.get(commonUrl + code);
+  }
+  // 请求地图图片加载图层
+  createWmsLayer(code, layerParam, minZoom = 0, maxZoom, zIndex = -1, visible = true) {
+    const source = new WMTS({
+      url: commonUrl + code,
+      crossOrigin: 'Anonymous',
+      layer: layerParam.layerName,
+      style: layerParam.styleName,
+      matrixSet: layerParam.tilematrixset,
+      format: layerParam.format,
+      wrapX: true,
+      tileGrid: new WMTSTileGrid({
+        origin: getTopLeft(projectionExtent),
+        resolutions: resolutions,
+        matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21']
+      })
+    });
+    const layer = new TileLayer({
+      source: source,
+      zIndex: zIndex,
+      minZoom: minZoom,
+      maxZoom,
+      visible: visible
+    });
+    layer.set('layerName', code);
+
+    this.map.addLayer(layer);
+  };
+  // 初始化绘画工具
+  initMouseTool(options) {
+    this.drawOptions = {
+      strokeColor: options.color,
+      strokeOpacity: 1,
+      strokeWeight: 2,
+      fillColor: options.color,
+      fillOpacity: options.drawType === '1' ? 0 : 0.5,
+      strokeStyle: 'solid'
+    };
+    this.plot = new olPlot(this.map, {
+      zoomToExtent: true
+    });
+    this.plot.plotDraw.on('drawEnd', this.onDrawEnd);
+  }
+  // 绘制结束事件
+  onDrawEnd(event) {
+    const feature = event.feature;
+    const aa = feature.getGeometry();
+    // 开始编辑
+    this.plot.plotEdit.activate(feature);
+  }
+}

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="video-card">
+    <div class="title gradient-text">视频监控</div>
+    <div class="more-btn" @click="showVideoMonitorList">查看更多</div>
+    <div class="card-content video-list">
+      <div v-for="(item, index) in listData" :key="index" class="video-box">
+        <div class="video-content">
+          <div style="width: 733px; height: 300px; position: relative">
+            <HKVideo :dot_data="item" :width="733" :height="300" />
+            <div class="video-label">
+              <span class="label">{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Dialog v-model="showListDialog" title="视频监控" @closeDialog="reset">
+    <div class="search-box">
+      <div v-show="!editVideo" class="box-left" @click="activeEdit">
+        <el-button type="primary" size="large">编辑首页视频</el-button>
+      </div>
+      <div v-show="editVideo" class="edit-box">
+        <el-button type="primary" size="large" @click="handleSave">保存</el-button>
+        <el-button type="danger" size="large" @click="handleCancel">取消编辑</el-button>
+        <div class="flex">
+          <div class="box-item">
+            <div class="img2">
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="box-right">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item style="width: 200px" label="实景视频" prop="eventType">
+            <el-select v-model="queryParams.realisticVideoType" placeholder="全部" clearable>
+              <el-option label="全部" value=""></el-option>
+              <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="name">
+            <el-input placeholder="请输入摄像头名称" size="large" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery" size="large">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery" size="large">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="video-list2">
+      <div v-for="(item, index) in dialogListData" :key="index" class="video-box">
+        <div class="video-label">
+          <span class="label">{{ item.name }}</span>
+        </div>
+        <div style="width: 733px; height: 300px; display: flex; align-items: center; justify-content: center">
+          <div v-if="editVideo" class="edit-box">
+            <div v-if="item.sort" class="active-tag">首页展示</div>
+            <div class="img"></div>
+          </div>
+          <HKVideo v-else :dot_data="item" :width="733" :height="300" />
+        </div>
+      </div>
+    </div>
+    <pagination
+      v-show="total > queryParams.size"
+      v-model:page="queryParams.current"
+      v-model:limit="queryParams.size"
+      :total="total"
+      :page-sizes="[5, 10, 20]"
+      @pagination="getList"
+    />
+  </Dialog>
+</template>
+
+<script lang="ts" setup name="VideoMonitor">
+import { getEmergencyVideoCata } from '@/api/routineCommandMap';
+
+const proxy = getCurrentInstance()?.proxy;
+const { realistic_video } = toRefs<any>(proxy?.useDict('realistic_video'));
+
+let listData = ref([]);
+const initData = () => {
+  getEmergencyVideoCata({
+    current: 1,
+    size: 6
+  }).then((res) => {
+    listData.value = res.rows;
+  });
+};
+initData();
+
+//查看更多数据
+const queryFormRef = ref();
+const queryParams = reactive({
+  current: 1,
+  size: 10,
+  realisticVideoType: '',
+  name: ''
+});
+let showListDialog = ref(false);
+let total = ref(0);
+let editVideo = ref(false);
+let editData = ref([]);
+let dialogListData = ref([]);
+const showVideoMonitorList = () => {
+  getList();
+  showListDialog.value = true;
+};
+
+const getList = () => {
+  getEmergencyVideoCata(queryParams).then((res) => {
+    for (let i = 0; i < 6; i++) {
+      if (res.rows && res.rows[i]) {
+        res.rows[i].sort = i.toString();
+        editData.value.push(res.rows[i]);
+      } else {
+        break;
+      }
+    };
+    dialogListData.value = res.rows;
+    total.value = res.total;
+  });
+};
+/** 表单重置 */
+const reset = () => {
+  queryParams.current = 1;
+  queryParams.realisticVideoType = '';
+  queryParams.name = '';
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.current = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+// 开启编辑视频
+const activeEdit = () => {
+  editVideo.value = true;
+};
+// 关闭编辑
+const handleCancel = () => {
+  editVideo.value = false;
+};
+// 保存编辑
+const handleSave = () => {
+  handleCancel();
+};
+</script>
+
+<style lang="scss" scoped>
+.video-card {
+  width: 2601px;
+  height: 879px;
+  background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
+  position: relative;
+  .video-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 100px;
+    padding-left: 60px;
+    .video-box {
+      width: 800px;
+      height: 356px;
+      margin-right: 35.06px;
+      cursor: pointer;
+      background: url('@/assets/images/emergencyCommandMap/videoBg.png') no-repeat 100% 100%;
+      padding: 14.5px 9px;
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3) {
+        margin-bottom: 3.5px;
+      }
+      &:nth-child(3),
+      &:nth-child(6) {
+        margin-right: 0;
+      }
+      .video-label {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+
+        display: flex;
+        .label {
+          width: 546px;
+          height: 50px;
+          line-height: 50px;
+          font-size: 32px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding-left: 10px;
+          color: #fff;
+          background-color: rgba(0, 0, 0, 0.4);
+        }
+        &::before {
+          content: '';
+          width: 0;
+          height: 0;
+          border-bottom: 50px solid rgba(0, 0, 0, 0.4);
+          border-left: 50px solid transparent;
+        }
+      }
+    }
+  }
+}
+.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;
+}
+.video-list2 {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-top: 100px;
+  padding-left: 60px;
+  .video-box {
+    width: 800px;
+    height: 356px;
+    margin-right: 35.06px;
+    cursor: pointer;
+    background-color: #cccccc;
+    margin-bottom: 40px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .video-content {
+      width: 776px;
+      height: 327px;
+      background: url('@/assets/images/emergencyCommandMap/videoBox2.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+    }
+    .video-label {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      .label {
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        font-size: 32px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-left: 10px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+    }
+  }
+}
+.img {
+  width: 733px;
+  height: 300px;
+  background-color: #000;
+}
+.active-tag {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  background-color: #ec808d;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 36px;
+  width: 190px;
+  height: 60px;
+}
+</style>

src/views/emergencyCommandMap/LeftSection.vue → src/views/emergencyCommandMap/LeftSection/index.vue

@@ -94,32 +94,14 @@
         </div>
       </div>
     </div>
-
-    <!--    <div class="card" style="height: 990px">-->
-    <!--      <div class="card-header">-->
-    <!--        <div>分析研判</div>-->
-    <!--      </div>-->
-    <!--      <div class="card-content">-->
-    <!--        <div v-for="(item, index) in analyzeJudge" :key="index" class="line">-->
-    <!--          <div>{{ item.label }}</div>-->
-    <!--          <div class="line-content">-->
-    <!--            <div v-for="(item2, index2) in item.children" :key="index2" class="content-item">-->
-    <!--              <el-icon size="72px" style="margin-right: 10px;"><Shop /></el-icon>-->
-    <!--              <div class="text-box">-->
-    <!--                <div class="">{{ item2.data + item2.unit }}</div>-->
-    <!--                <div class="">{{ item2.label }}</div>-->
-    <!--              </div>-->
-    <!--            </div>-->
-    <!--          </div>-->
-    <!--        </div>-->
-    <!--      </div>-->
-    <!--    </div>-->
+    <VideoMonitor />
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="LeftSection">
 import { getEventDetail } from '@/api/duty/eventing';
-// const duration = ref(0);
+import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.vue';
+const duration = ref(0);
 const formattedDuration = ref('');
 const route = useRoute();
 const router = useRouter();

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>联合值守</div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/emergencyCommandMap/RightSection.vue → src/views/emergencyCommandMap/RightSection/index.vue

@@ -50,23 +50,24 @@
         </div>
       </div>
     </div>
-    <div class="message-card">
-      <div class="title gradient-text">动态消息</div>
-      <div class="message-menu">
-        <div :class="menuState.activeIndex === 0 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 0">消息动态</div>
-        <div :class="menuState.activeIndex === 1 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 1">任务跟踪</div>
-        <div :class="menuState.activeIndex === 2 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 2">资源调度</div>
-      </div>
-      <div v-show="menuState.activeIndex === 0" class="message-content">
-        <div v-for="(item, index) in menuState.messageData" :key="index" class="message-item">
-          <i :class="getIconClass(item.type)"></i>
-          <div class="message-box">
-            <div :class="getTagClass(item.type)">{{ item.text }}</div>
-            <div class="message-time">{{ item.time }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <JointDuty />
+<!--    <div class="message-card">-->
+<!--      <div class="title gradient-text">动态消息</div>-->
+<!--      <div class="message-menu">-->
+<!--        <div :class="menuState.activeIndex === 0 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 0">消息动态</div>-->
+<!--        <div :class="menuState.activeIndex === 1 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 1">任务跟踪</div>-->
+<!--        <div :class="menuState.activeIndex === 2 ? 'menu-item menu-active' : 'menu-item'" @click="menuState.activeIndex = 2">资源调度</div>-->
+<!--      </div>-->
+<!--      <div v-show="menuState.activeIndex === 0" class="message-content">-->
+<!--        <div v-for="(item, index) in menuState.messageData" :key="index" class="message-item">-->
+<!--          <i :class="getIconClass(item.type)"></i>-->
+<!--          <div class="message-box">-->
+<!--            <div :class="getTagClass(item.type)">{{ item.text }}</div>-->
+<!--            <div class="message-time">{{ item.time }}</div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
   </div>
   <Dialog v-model="videoMonitorState.showListDialog" title="视频监控">
     <videoList />
@@ -76,6 +77,7 @@
 <script lang="ts" setup>
 import router from '@/router';
 import { getEmergencyVideoCata} from '@/api/routineCommandMap';
+import JointDuty from '@/views/emergencyCommandMap/RightSection/JointDuty.vue';
 
 const goToHome = () => {
   router.push({ path: '/' });

src/views/emergencyCommandMap/index.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script lang="ts" setup>
-import LeftSection from './LeftSection.vue';
-import RightSection from './RightSection.vue';
+import LeftSection from './LeftSection/index.vue';
+import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';
 import autofit from 'autofit.js';
 
@@ -24,8 +24,8 @@ onMounted(() => {
       dw: 8960,
       dh: 2520,
       el: '#dashboard-container',
-      resize: true,
-      ignore: ["#aMap"]
+      resize: false,
+      ignore: ['#aMap', '#YztMap']
     },
     false
   );

src/views/globalMap/index.vue

@@ -2,10 +2,10 @@
   <div id="globalMap">
     <div
       :class="isComponent ? 'global-map' : 'global-map bg'"
-      :style="{ width: width ? width : '8960px', height: height ? height : '2560px'}"
-
+      :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" />
       <YztMap
         v-else-if="activeMap === 'satellite2'"
@@ -15,6 +15,8 @@
         :color="mouseToolState.color"
         :draw-type="mouseToolState.drawType"
         :graphics-type="mouseToolState.graphicsType"
+        :container-width="isComponent ? 3483 : 8960"
+        :container-height="isComponent ? 2140 : 2520"
         @selectGraphics="analysisSpatial"
       />
       <!--    <YMap-->
@@ -51,7 +53,8 @@
       <SwitchMapTool
         :active-map="activeMap"
         :class="isComponent || activeMap === 'logical' || activeMap === 'satellite2' ? 'tool-box' : 'tool-box fixed'"
-        @switchMap="switchMap" />
+        @switchMap="switchMap"
+      />
       <!--时间轴-->
       <TimeAxis />
       <DrawTools
@@ -280,8 +283,8 @@ onMounted(() => {
         dw: 8960,
         dh: 2520,
         el: '#globalMap',
-        resize: true,
-        ignore: ["#aMap"]
+        resize: false,
+        ignore: ['#aMap', '#YztMap']
       },
       false
     );

src/views/globalMapPage/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="dashboard-container">
+    <div class="dashboard-container">
+      <HeaderSection />
+      <div class="dashboard-content">
+        <globalMap />
+      </div>
+      <FooterSection style="position: absolute; bottom: 0; left: 0" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/routineCommandMap/index.vue

@@ -21,8 +21,8 @@ onMounted(() => {
       dw: 8960,
       dh: 2520,
       el: '#dashboard-container',
-      resize: true,
-      ignore: ["#aMap"]
+      resize: false,
+      ignore: ['#aMap', '#YztMap']
     },
     false
   );