页面调整、菜单折叠

src/assets/styles/index.scss

@@ -251,15 +251,10 @@ aside {
 }
 
 .gradient-text2 {
-  /* 设置字体透明 */
   color: transparent;
-  /* 设置线性渐变，从红色渐变到蓝色 */
   background-image: linear-gradient(to bottom, #fff 50%, #5CC4FA 70%, #40A2E7 100%);
-  /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
   -webkit-background-clip: text;
-  /* 非Webkit内核浏览器需要使用标准前缀 */
   background-clip: text;
-  /* 把当前元素设置为行内块，以便能够应用背景 */
   display: inline-block;
   font-family: 'YouSheBiaoTiHei';
 }

src/components/Map/index.vue

@@ -85,7 +85,7 @@ const height = ref('100%');
 
 const mapState = reactive({
   center: [110.925175, 21.678955],
-  zoom: 7.9,
+  zoom: 8.5,
   minZoom: 6,
   maxZoom: 20,
   isThreeDimensional: false,
@@ -100,6 +100,7 @@ const drawTool = useDrawTool();
 // 初始化地图
 const mapUtils = useAMap({
   key: '9c5041381e5e824f9ee324d8f7a40150', // 申请好的Web端开发者Key，首次调用 load 时必填
+  securityJsCode: '4868bc1b8fac7d9e54e7279ed556879a',
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
   zoom: mapState.zoom,

src/hooks/AMap/useAMap.ts

@@ -11,6 +11,9 @@ export function useAMap(options) {
   let addPoints = [];
   // 初始化事件
   const initMap = (options) => {
+    window._AMapSecurityConfig = {
+      securityJsCode: options.securityJsCode
+    };
     AMapLoader.load({
       key: options.key, // 申请好的Web端开发者Key，首次调用 load 时必填
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@@ -248,12 +251,6 @@ export function useAMap(options) {
       ];
       options.forEach((option) => {
         const holes = result.districtList[0].boundaries;
-        // if (option.offset) {
-        //
-        //   holes.forEach((items) => {
-        //
-        //   })
-        // }
         let pathArray = [outer];
         pathArray.push.apply(pathArray, holes);
         maskPolygon = new AMap.Polygon({

src/router/index.ts

@@ -64,16 +64,16 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '',
-    component: () => import('@/views/routineCommandMap/index.vue')
+    component: () => import('@/views/routineCommandMap/index2.vue')
   },
   {
     path: '/index',
-    component: () => import('@/views/routineCommandMap/index.vue'),
+    component: () => import('@/views/routineCommandMap/index2.vue'),
     name: 'Index'
   },
   {
     path: '/index2',
-    component: () => import('@/views/routineCommandMap/index2.vue'),
+    component: () => import('@/views/routineCommandMap/index.vue'),
     name: 'Index2'
   },
   {
@@ -92,22 +92,22 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '/emergencyCommandMap',
-    component: () => import('@/views/emergencyCommandMap/index.vue'),
+    component: () => import('@/views/emergencyCommandMap/index2.vue'),
     name: 'emergencyCommandMap'
   },
   {
     path: '/emergencyCommandMap2',
-    component: () => import('@/views/emergencyCommandMap/index2.vue'),
+    component: () => import('@/views/emergencyCommandMap/index.vue'),
     name: 'emergencyCommandMap2'
   },
   {
     path: '/globalMap',
-    component: () => import('@/views/globalMapPage/index.vue'),
+    component: () => import('@/views/globalMapPage/index2.vue'),
     name: 'globalMap'
   },
   {
     path: '/globalMap2',
-    component: () => import('@/views/globalMapPage/index2.vue'),
+    component: () => import('@/views/globalMapPage/index.vue'),
     name: 'globalMap2'
   }
 ];

src/views/emergencyCommandMap/MiddleSection.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 });
 const router = useRouter();
 const handleQuery1 = () => {
-  router.push({ path: props.flag ? '/index2' : '/' });
+  router.push({ path: props.flag ? '/' : '/index2' });
 };
 </script>
 

src/views/emergencyCommandMap/index.vue

@@ -19,6 +19,7 @@
 import LeftSection from './LeftSection/index.vue';
 import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';
+import HeaderSection from '@/components/HeaderSection/index2.vue';
 import autofit from 'autofit.js';
 import { getTransformScale } from '@/utils';
 import useAppStore from '@/store/modules/app';

src/views/emergencyCommandMap/index2.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import HeaderSection from '@/components/HeaderSection/index2.vue';
+import HeaderSection from '@/components/HeaderSection/index.vue';
 import LeftSection from './LeftSection/index.vue';
 import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';

src/views/globalMap/LeftMenu.vue

@@ -8,6 +8,7 @@
           <div class="search-header">
             <div class="header-left">
               <i class="icon-position1" />
+              <div class="text1">地址</div>
             </div>
           </div>
           <div class="search-list">
@@ -34,7 +35,6 @@
                 v-for="(item, index) in searchState.layerList"
                 :key="index"
                 class="list-item"
-                style="margin-top: 20px"
                 @click="selectSearchMarker(item)"
               >
                 <div class="tag">{{ item.dict_label }}</div>
@@ -57,7 +57,6 @@
                 v-for="(item, index) in searchState.videoList"
                 :key="index"
                 class="list-item2"
-                style="margin-top: 20px"
               >
                 <div class="text1" :title="item.name" @click="handleShowDialog(item)">{{ item.name }}</div>
                 <div class="tags">
@@ -297,8 +296,8 @@ defineExpose({ setMenuChange });
     border: none;
     outline: none;
     color: #fff;
-    width: calc(100% - 85px);
-    margin-left: 85px;
+    width: calc(100% - 100px);
+    margin-left: 100px;
     height: 90px;
     font-size: 46px;
     background-color: transparent;
@@ -316,7 +315,13 @@ defineExpose({ setMenuChange });
     z-index: 9;
     padding: 35px 15px;
     .search-title {
-      font-size: 44px;
+      color: transparent;
+      background-image: linear-gradient(to bottom, #fff 50%, #a6d3e1 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      display: inline-block;
+      font-family: 'YouSheBiaoTiHei';
+      font-size: 48px;
       line-height: 36px;
       padding: 0 27px;
     }
@@ -327,11 +332,12 @@ defineExpose({ setMenuChange });
         align-items: center;
         justify-content: space-between;
         width: 805px;
-        height: 76px;
-        background: url('@/assets/images/map/titleBox3.png') no-repeat;
-        background-size: 100% 100%;
-        padding-left: 20px;
+        height: 100px;
+        background: url('@/assets/images/map/titleBox3.png') no-repeat bottom left;
+        background-size: 100% 76px;
+        padding-left: 50px;
         padding-bottom: 16px;
+        margin-top: 20px;
         .header-left {
           display: flex;
           align-items: center;
@@ -357,7 +363,7 @@ defineExpose({ setMenuChange });
             background-size: 100% 100%;
           }
           .text1 {
-            margin-left: -12px;
+            margin-left: 5px;
             font-size: 38px;
           }
         }
@@ -365,12 +371,12 @@ defineExpose({ setMenuChange });
     }
     .search-list {
       width: 780px;
-      height: 500px;
+      height: 445px;
       padding-bottom: 10px;
       background: url('@/assets/images/map/base.png') no-repeat center bottom;
       background-size: 780px 198px;
       .scroll {
-        height: 490px;
+        height: 410px;
         overflow-y: auto;
       }
       .list-item,
@@ -378,7 +384,7 @@ defineExpose({ setMenuChange });
         display: flex;
         align-items: center;
         cursor: pointer;
-        margin-top: -11px;
+        margin-top: 20px;
         .icon1 {
           display: inline-block;
           width: 90px;

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -892,11 +892,11 @@ const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  webSock = createWebSocket('ZEaBf-NZ4Fi29kSYGdNeJ', getWebSocketData);
-  patternId.value = 'ZEaBf-NZ4Fi29kSYGdNeJ';
-  // createCollaboration(form.value).then(() => {
-  //   patternId.value = form.value.pattern_id;
-  //   webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
+  // webSock = createWebSocket('ZEaBf-NZ4Fi29kSYGdNeJ', getWebSocketData);
+  // patternId.value = 'ZEaBf-NZ4Fi29kSYGdNeJ';
+  createCollaboration(form.value).then(() => {
+    patternId.value = form.value.pattern_id;
+    webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
   showForm.value = false;
   collaboration.value = true;
   // });

src/views/globalMap/RightMenu/index.vue

@@ -14,13 +14,22 @@
             <div class="gradient-text text">{{ item.name }}</div>
           </div>
         </div>
-        <div v-show="menuState.menuData.length > 0" :class="menuState.showMenu ? 'right-btn' : 'left-btn'" style="pointer-events: auto" @click="clickContractMenu"></div>
+        <div
+          v-show="menuState.menuData.length > 0"
+          :class="menuState.showMenu ? 'right-btn' : 'left-btn'"
+          style="pointer-events: auto"
+          @click="clickContractMenu"
+        ></div>
         <div v-show="menuState.menuData.length > 7" class="btn-box" style="pointer-events: auto">
           <div class="up-btn" @click="clickBtn('up')"></div>
           <div class="down-btn" @click="clickBtn('down')"></div>
         </div>
       </div>
-      <div v-show="menuState.showMenu" style="pointer-events: auto">
+      <div v-show="menuState.showMenu" style="pointer-events: auto; position: relative">
+        <div class="fold-btn" @click="clickContractMenu">
+          <i class="fold-icon" />
+          折叠菜单
+        </div>
         <!--图层分析-->
         <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :point-type="pointType" />
         <!--空间分析-->
@@ -304,6 +313,16 @@ defineExpose({ handleMenu, showIndexMenu, clickContractMenu, updateMenu, getMenu
     }
   }
 }
+.fold-btn {
+  position: absolute;
+  right: 16px;
+  top: 20px;
+  z-index: 10;
+  width: 103px;
+  height: 26px;
+  background: url('@/assets/images/map/rightMenu/btn3.png') no-repeat;
+  background-size: 100% 100%;
+}
 .icon1 {
   width: 99px;
   height: 92px;

src/views/globalMap/index.vue

@@ -67,7 +67,7 @@ let mapRef = ref(null);
 let map2Ref = ref(null);
 let leftMenuRef = ref(null);
 let showMask = ref(true);
-//  vectorgraph satellite imageMap 废弃：logical satellite2 satellite3
+//  vectorgraph satellite imageMap logical satellite2 satellite3
 let activeMap = ref('satellite');
 // 附近视频菜单数据
 let tempMenu = ref({
@@ -85,7 +85,7 @@ const switchMap = (key) => {
 let pointType = ref<PointType[]>([]);
 let markerList = ref([]);
 const addMarkers = (item) => {
-  const dom = activeMap.value === 'imageMap' ? map2Ref.value : mapRef.value;
+  const dom = ['satellite2', 'satellite3', 'imageMap', 'imageMap2'].includes(activeMap.value) ? map2Ref.value : mapRef.value;
   if (dom) {
     if (!item.checked) {
       let index = pointType.value.findIndex((item2) => item.component === item2.component);

src/views/globalMapPage/index.vue

@@ -12,6 +12,7 @@
 
 <script lang="ts" setup name="globalMapPage">
 import GlobalMap from '@/views/globalMap/index.vue';
+import HeaderSection from '@/components/HeaderSection/index2.vue';
 import autofit from 'autofit.js';
 import { getTransformScale } from '@/utils';
 

src/views/globalMapPage/index2.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup name="globalMapPage">
-import HeaderSection from '@/components/HeaderSection/index2.vue';
+import HeaderSection from '@/components/HeaderSection/index.vue';
 import GlobalMap from '@/views/globalMap/index.vue';
 import { getTransformScale } from '@/utils';
 

src/views/routineCommandMap/PositionMap.vue

@@ -326,7 +326,7 @@ function submit() {
       console.log('提交数据', form);
       addEvent(form).then((res) => {
         router.push({
-          path: props.flag ? '/emergencyCommandMap2' : '/emergencyCommandMap',
+          path: props.flag ? '/emergencyCommandMap' : '/emergencyCommandMap2',
           query: {
             event_id: res.data
           }

src/views/routineCommandMap/RightSection/EventReport/EventManage.vue

@@ -363,7 +363,7 @@ const enterCommand = (item) => {
     // 查看事件详情逻辑
     console.log('进入指挥', item);
     router.push({
-      path: props.flag ? '/emergencyCommandMap2' : '/emergencyCommandMap',
+      path: props.flag ? '/emergencyCommandMap' : '/emergencyCommandMap2',
       query: { event_id: item.event_id }
     });
   }

src/views/routineCommandMap/RightSection/EventReport/index.vue

@@ -100,7 +100,7 @@ const enterCommand = (item) => {
   if (item) {
     // 查看事件详情逻辑
     router.push({
-      path: props.flag ? '/emergencyCommandMap2' : '/emergencyCommandMap',
+      path: props.flag ? '/emergencyCommandMap' : '/emergencyCommandMap2',
       query: { event_id: item.event_id }
     });
   }

src/views/routineCommandMap/index.vue

@@ -19,6 +19,7 @@
 import LeftSection from './LeftSection/index.vue';
 import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';
+import HeaderSection from '@/components/HeaderSection/index2.vue';
 import autofit from 'autofit.js';
 import { getTransformScale } from '@/utils';
 import useAppStore from '@/store/modules/app';

src/views/routineCommandMap/index2.vue

@@ -24,7 +24,7 @@
 import LeftSection from './LeftSection/index.vue';
 import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';
-import HeaderSection from '@/components/HeaderSection/index2.vue';
+import HeaderSection from '@/components/HeaderSection/index.vue';
 import { getTransformScale } from '@/utils';
 import useAppStore from '@/store/modules/app';