地图功能接入

src/assets/images/svg/close.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="white"
+    d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z">
+  </path>
+</svg>

src/assets/styles/index.scss

@@ -185,14 +185,17 @@
 
 .btn-secondary {
   font-size: 18px;
-  width: 101px;
-  height: 43px;
-  padding: 0 0 4px;
-  text-align: center;
-  background: url('../images/page/btn-secondary.png') !important;
-  background-size: 100%;
+  min-width: 80px;
+  height: 40px;
+  padding: 0 15px 4px;
+  background: url('../images/page/btn-secondary.png') no-repeat !important;
+  background-size: 100% 100% !important;
   border: none;
   .is-disabled {
     opacity: 0.4;
   }
+  &.small {
+    font-size: 16px;
+    height: 34px;
+  }
 }

src/components/MapView.vue

@@ -25,7 +25,7 @@ export default {
       layoutStore.toggleGlobalLoading(true)
       setTimeout(() => {
         layoutStore.toggleGlobalLoading(false)
-      }, 2000);
+      }, 2500);
       myBridge.bridgeContent = bridge = new CityGis.Bridge({
         id: "i_map",
         // url: 'http://10.1.163.210:5173/map-tool-widget/#/jk_map',

src/utils/options.js

@@ -17,3 +17,7 @@ export const uavList = [
   { id:"5",label: '大型无人机', checked: false },
 ]
 
+// 行政区划
+export const districtList = [
+
+]

src/views/home/Home.vue

@@ -117,6 +117,11 @@
       <FloatPanelKysg v-if="layoutStore.floatPanels.kysg" />
     </Transition>
 
+    <!-- 空域分层 -->
+    <Transition name="emerge-left">
+      <FloatPanelFcky v-if="layoutStore.floatPanels.fcky" />
+    </Transition>
+
   </div>
 </template>
 
@@ -136,6 +141,7 @@ import PanelKypm from './cpns/PanelKypm.vue'
 import PanelSjwg from './cpns/PanelSjwg.vue'
 import FloatPanelUav from './cpns/FloatPanelUav.vue'
 import FloatPanelKysg from './cpns/FloatPanelKysg.vue'
+import FloatPanelFcky from './cpns/FloatPanelFcky.vue'
 
 const layoutStore = useLayoutStore()
 

src/views/home/cpns/FloatPanelFcky.vue

@@ -0,0 +1,91 @@
+<!-- 分层空域 -->
+<template>
+  <Transition name="fade">
+    <div class="panel-fcky" v-if="!layoutStore.asideCollapse">
+      <h2 class="u-title">分层空域</h2>
+
+      <el-form v-model="form" class="form-top mt-3" label-position="left">
+        <el-form-item label="分层范围" prop="rangeType">
+          <el-radio-group v-model="form.rangeType">
+            <el-radio label="行政区划" value="行政区划" />
+            <el-radio label="自定义绘制" value="自定义绘制" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="绘制/选择" prop="range">
+          <el-button v-if="form.rangeType === '自定义绘制'" class="btn-secondary small">绘制</el-button>
+          <el-select v-else v-model="form.range" placeholder="">
+            <el-option v-for="item in districtList" :label="item.label" :value="item.label" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="分层方式" prop="layeringType">
+          <el-radio-group v-model="form.layeringType">
+            <el-radio label="广域分层" value="广域分层" />
+            <el-radio label="细微分层" value="细微分层" />
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <el-form v-model="form" class="mt-3" label-position="top">
+        <el-form-item label="分层空域" prop="layers">
+          <el-checkbox-group v-if="form.layeringType === '广域分层'" v-model="form.layers">
+            <el-checkbox v-for="item in layersListBig" :label="item.label" :value="item.value" />
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+
+
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import useLayoutStore from '@/store/layout';
+import { districtList } from '@/utils/options';
+
+const layoutStore = useLayoutStore()
+
+const form = ref({
+  rangeType: '自定义绘制',
+  layeringType: '广域分层'
+})
+
+const layersListBig = [
+  { label: '120以下', value: 'big_1' },
+  { label: '60-80', value: 'big_2' },
+  { label: '80-100', value: 'big_3' },
+]
+
+function handleClose() {
+  layoutStore.toggleFloatPanel('fcky', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-fcky {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: absolute;
+  left: calc(var(--panel-gap) + var(--aside-width));
+  top: var(--panel-gap);
+  width: 399px;
+  padding: 16px 16px 28px;
+  background: url('../../../assets/images/page/bg-dialog.png');
+  background-size: cover;
+  visibility: visible;
+
+  .u-title {
+    font-size: 26px;
+    background: linear-gradient(186deg, rgba(128, 155, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  :deep(.form-top) {
+    .el-form-item__label {
+      width: 105px;
+    }
+  }
+}
+</style>

src/views/home/cpns/FloatPanelUav.vue

@@ -2,11 +2,7 @@
   <Transition name="fade">
     <div class="panel-uav" v-if="!layoutStore.asideCollapse">
       <i @click="handleClose" class=" absolute right-4 top-4 text-white size-6 cursor-pointer hover:scale-110">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-          <path fill="currentColor"
-            d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z">
-          </path>
-        </svg>
+        <img src="@/assets/images/svg/close.svg" alt="">
       </i>
   
       <h2 class="u-title">{{ data.name }}</h2>

src/views/home/cpns/PanelSjwg.vue

@@ -10,7 +10,7 @@
     <Transition>
       <ul class="list-base flex flex-wrap shrink-0" v-if="contentShow.b1" v-collapse>
         <li v-for="item in basicList" class="text-center w-1/4 mb-4 cursor-pointer" @click="handleBaseClick(item)">
-          <img :src="getAssetsFile(`page/${item.icon}.png`)" alt="" class="ml-2 mb-1">
+          <img :src="getAssetsFile(`page/${item.active ? item.icon + '-h' : item.icon}.png`)" alt="" class="ml-2 mb-1">
           <span class="block text-base ml-2">{{ item.label }}</span>
         </li>
       </ul>
@@ -33,8 +33,8 @@
             <li v-for="item in areaList" class="list-item">
               <img src="../../../assets/images/page/icon-location.png" alt="">
               <span>{{ item.label }}</span>
-              <i title="查看" @click="handleCheckArea(item)"></i>
-              <i title="网格"></i>
+              <i title="查看" @click="handleCheckArea(item)" :class="{'active': item.check}"></i>
+              <i title="网格" :class="{'active': item.mesh}"></i>
             </li>
           </ul>
         </Transition>
@@ -49,8 +49,8 @@
             <li v-for="item in routeList" class="list-item">
               <img src="../../../assets/images/page/icon-route.png" alt="">
               <span>{{ item.label }}</span>
-              <i title="查看"></i>
-              <i title="网格"></i>
+              <i title="查看" :class="{'active': item.check}"></i>
+              <i title="网格" :class="{'active': item.mesh}"></i>
             </li>
           </ul>
         </Transition>
@@ -73,28 +73,28 @@ const basicList = ref([
 ])
 
 const areaList = ref([
-  { label: '临时限制区', active: false },
+  { label: '临时限制区', check: false, mesh: false },
 ])
 
 async function handleCheckArea(item) {
-  item.active = !item.active
+  item.check = !item.check
   showShapes({
     id: 'drawOne',
-    data: item.active ? await getData('restrictArea.json') : null
+    data: item.check ? await getData('restrictArea.json') : null
   })
 }
 
 const routeList = ref([
-  { label: '航线1' },
-  { label: '航线2' },
-  { label: '航线3' },
-  { label: '航线4' },
-  { label: '航线5' },
-  { label: '航线6' },
-  { label: '航线7' },
-  { label: '航线8' },
-  { label: '航线9' },
-  { label: '航线10' },
+  { label: '航线1', check: false, mesh: false },
+  { label: '航线2', check: false, mesh: false },
+  { label: '航线3', check: false, mesh: false },
+  { label: '航线4', check: false, mesh: false },
+  { label: '航线5', check: false, mesh: false },
+  { label: '航线6', check: false, mesh: false },
+  { label: '航线7', check: false, mesh: false },
+  { label: '航线8', check: false, mesh: false },
+  { label: '航线9', check: false, mesh: false },
+  { label: '航线10', check: false, mesh: false },
 ])
 
 function handleBaseClick(item) {
@@ -236,6 +236,10 @@ const vCollapse = {
     margin-left: 5px;
     cursor: pointer;
     background-size: cover !important;
+    filter: grayscale(1);
+    &.active {
+      filter: grayscale(0);
+    }
   }
 
   i:nth-child(3) {