地图功能

src/assets/styles/element.scss

@@ -220,19 +220,24 @@
 }
 
 .el-checkbox {
-  .el-checkbox__input .el-checkbox__inner {
-    width: 20px;
-    height: 20px;
-    background: rgba(139, 160, 201, 0.2);
-    box-shadow: 0px 4px 0px 0px rgba(101, 122, 165, 0.5);
-    border-radius: 4px;
-    border: 1px solid #B2CCFF;
-
-    &::after {
-      border-width: 2px;
-      height: 11px;
-      left: 6px;
-      width: 5px;
+  .el-checkbox__input {
+    &.is-indeterminate .el-checkbox__inner::before {
+      top: 8px;
+    }
+    .el-checkbox__inner {
+      width: 20px;
+      height: 20px;
+      background: rgba(139, 160, 201, 0.2);
+      box-shadow: 0px 4px 0px 0px rgba(101, 122, 165, 0.5);
+      border-radius: 4px;
+      border: 1px solid #B2CCFF;
+  
+      &::after {
+        border-width: 2px;
+        height: 11px;
+        left: 6px;
+        width: 5px;
+      }
     }
   }
 
@@ -245,16 +250,19 @@
   }
 
   &.el-checkbox--large {
-    .el-checkbox__input .el-checkbox__inner {
-      width: 24px;
-      height: 24px;
+    .el-checkbox__input {
 
-      &::after {
-        height: 13px;
-        left: 8px;
-        width: 6px;
+      .el-checkbox__inner {
+        width: 24px;
+        height: 24px;
+  
+        &::after {
+          height: 13px;
+          left: 8px;
+          width: 6px;
+        }
       }
-    }
+    } 
 
     .el-checkbox__label {
       font-size: 20px;

src/components/MapView.vue

@@ -45,6 +45,7 @@ export default {
       //   status:"show"
       // })
       bridge.addEventListener(arg => {
+        // console.log('map listener:',arg)
         switch (arg.action) {
           case "MapExtentChanged":
             let scale = arg.data.scale;

src/views/home/cpns/FloatPanelFcky.vue

@@ -3,7 +3,10 @@
   <Transition name="fade">
     <div class="f-panel-left panel-fcky"
       :class="{ 'bg-shrink': form.layeringType === '广域分层', 'collapse': layoutStore.leftCollapse }">
-      <h2 class="u-title">分层空域</h2>
+      <h2 class="u-title">
+        分层空域
+        <i title="清空" @click="clearAll(true)"></i>
+      </h2>
 
       <el-form v-model="form" class="form-top mt-3" label-position="left">
         <el-form-item label="分层范围" prop="rangeType">
@@ -28,8 +31,9 @@
       <el-form v-model="form" class="mt-3" label-position="top">
         <el-form-item label="分层空域" prop="layersBig" class="mb-0">
           <el-checkbox v-if="form.layeringType === '广域分层'" v-model="checkAll.big" class="mr-auto"
-            @change="val => handleCheckAll('big', val)">全选</el-checkbox>
-          <el-checkbox-group v-if="form.layeringType === '广域分层'" v-model="form.layersBig">
+            :indeterminate="indeterminate.big" @change="val => handleCheckAll('big', val)">全选</el-checkbox>
+          <el-checkbox-group v-if="form.layeringType === '广域分层'" v-model="form.layersBig"
+            @change="val => handleCheck('big', val, 3)">
             <el-checkbox v-for="item in layersListBig" :label="item.label" :value="item.value" />
           </el-checkbox-group>
 
@@ -37,27 +41,27 @@
             <div class="title-sub mb-2 w-full">
               120以下
               <el-checkbox v-model="checkAll.small_1" @change="val => handleCheckAll('small_1', val)"
-                class="ml-auto pr-1">全选</el-checkbox>
+                class="ml-auto pr-1" :indeterminate="indeterminate.small_1">全选</el-checkbox>
             </div>
-            <el-checkbox-group v-model="form.layersSmall">
+            <el-checkbox-group v-model="form.layersSmall" @change="val => handleCheck('small_1', val)">
               <el-checkbox v-for="item in layersListSmall.slice(0, 6)" :label="item.label" :value="item.value"
                 class="w-1/3 mr-0 mb-1 pl-2" />
             </el-checkbox-group>
             <div class="title-sub my-2 w-full">
               120-300
               <el-checkbox v-model="checkAll.small_2" @change="val => handleCheckAll('small_2', val)"
-                class="ml-auto pr-1">全选</el-checkbox>
+                class="ml-auto pr-1" :indeterminate="indeterminate.small_2">全选</el-checkbox>
             </div>
-            <el-checkbox-group v-model="form.layersSmall">
+            <el-checkbox-group v-model="form.layersSmall" @change="val => handleCheck('small_2', val)">
               <el-checkbox v-for="item in layersListSmall.slice(6, 15)" :label="item.label" :value="item.value"
                 class="w-1/3 mr-0 mb-1 pl-2" />
             </el-checkbox-group>
             <div class="title-sub my-2 w-full">
               300-600
               <el-checkbox v-model="checkAll.small_3" @change="val => handleCheckAll('small_3', val)"
-                class="ml-auto pr-1">全选</el-checkbox>
+                class="ml-auto pr-1" :indeterminate="indeterminate.small_3">全选</el-checkbox>
             </div>
-            <el-checkbox-group v-model="form.layersSmall" class="w-full">
+            <el-checkbox-group v-model="form.layersSmall" class="w-full" @change="val => handleCheck('small_3', val)">
               <el-checkbox v-for="item in layersListSmall.slice(15)" :label="item.label" :value="item.value"
                 class="w-1/3 mr-0 pl-2" />
             </el-checkbox-group>
@@ -251,12 +255,36 @@ const checkAll = reactive({
   small_3: false,
 })
 
-function handleCheckAll(type, checkVal) {
-  const typeMap = {
-    'small_1': [0, 5],
-    'small_2': [6, 14],
-    'small_3': [15, 17],
+const indeterminate = reactive({
+  big: false,
+  small_1: false,
+  small_2: false,
+  small_3: false,
+})
+
+function handleCheck(type, checkVal) {
+  let checkedLen
+  let typeAll
+  if(type==='big') {
+    checkedLen = checkVal.length
+    typeAll = layersListBig
+  } else {
+    typeAll = layersListSmall.value.slice(typeMap[type][0], typeMap[type][1])
+    checkedLen = typeAll.filter(a => checkVal.indexOf(a) > -1).length
   }
+  indeterminate[type] = checkedLen < typeAll.length && checkedLen > 0
+  checkAll[type] = checkedLen === typeAll.length
+}
+
+const typeMap = {
+  'small_1': [0, 5],
+  'small_2': [6, 14],
+  'small_3': [15, 17],
+}
+
+function handleCheckAll(type, checkVal) {
+  indeterminate[type] = false
+  
   if (type === 'big') {
     form.value.layersBig = checkVal ? layersListBig.map(i => i.value) : []
   } else {
@@ -278,7 +306,7 @@ function handleCheckAll(type, checkVal) {
   }
 }
 
-function clearAll() {
+function clearAll(all=false) {
   const currentList = form.value.layeringType === '广域分层' ? layersListBig : layersListSmall.value
   currentList.forEach(i => {
     if ([...lastBigLayers, ...lastSmallLayers].includes(i.value)) {
@@ -288,6 +316,14 @@ function clearAll() {
   lastBigLayers = []
   lastSmallLayers = []
   clearDraw()
+  if(all) {
+    Object.keys(checkAll).forEach(k => checkAll[k] = false)
+    Object.keys(indeterminate).forEach(k => indeterminate[k] = false)
+    form.value.layersBig = []
+    form.value.layersSmall = []
+    drawResult = null
+    queryResult = null
+  }
 }
 
 function handleStoreChecked() {
@@ -323,10 +359,25 @@ onBeforeUnmount(() => {
   }
 
   .u-title {
+    display: flex;
+    justify-content: space-between;
     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;
+    i {
+      display: block;
+      width: 34px;
+      height: 34px;
+      margin-left: 5px;
+      background: url('../../../assets/images/page/btn-delete.png');
+      background-size: 40px 40px;
+      background-position: center;
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
   }
 
   :deep(.form-top) {

src/views/home/cpns/PanelHxhs.vue

@@ -270,9 +270,9 @@ function toggleCubeDetail(row, status) {
         color: c.color
       })),
       size: {
-        xLength: row.cubes[0].boxSize.lonLength,
-        yLength: row.cubes[0].boxSize.latLength,
-        zLength: row.cubes[0].boxSize.height
+        x: row.cubes[0].boxSize.lonLength,
+        y: row.cubes[0].boxSize.latLength,
+        z: row.cubes[0].boxSize.height
       }
     })
   }

src/views/home/cpns/PanelKyhs.vue

@@ -84,42 +84,51 @@
         </el-form>
       </Transition>
       <Transition name="emerge-right">
-        <div v-show="currentStep === 1" class="p-main">
-          <div v-if="isSafe" class="msg-safe mb-2">当前空域无冲突!</div>
-
-          <template v-else>
-            <div v-for="item in results" :key="item.title" class="mb-3">
-              <div class="title-sub">
-                {{ item.title }}
-                <div class="flex-1 flex justify-between items-center pl-2">
-                  <span v-if="item.level" class="risk-label"
-                    :class="riskTypes.find(i => i.value === item.level).color">{{
-                      riskTypes.find(i => i.value === item.level).label
-                    }}</span>
-                  <i v-else></i>
-                  <span class="btn-inline" @click="handleReInspect">重新评估</span>
+        <div v-show="currentStep === 1" class="p-main flex flex-col pr-0">
+
+          <el-form-item label="网格查询">
+            <el-button class="btn-secondary ml-4" @click="handleInspect(true)">查询网格</el-button>
+            <el-button class="btn-secondary ml-4" @click="handleInspect(false)">关闭网格</el-button>
+          </el-form-item>
+
+          <div class="flex-1 overflow-y-auto pr-2">
+            <div v-if="isSafe" class="msg-safe mb-2">当前空域无冲突!</div>
+  
+            <template v-else>
+              <div v-for="item in results" :key="item.title" class="mb-3">
+                <div class="title-sub">
+                  {{ item.title }}
+                  <div class="flex-1 flex justify-between items-center pl-2">
+                    <span v-if="item.level" class="risk-label"
+                      :class="riskTypes.find(i => i.value === item.level).color">{{
+                        riskTypes.find(i => i.value === item.level).label
+                      }}</span>
+                    <i v-else></i>
+                    <span class="btn-inline" @click="handleReInspect">重新评估</span>
+                  </div>
                 </div>
+                <table class="table-default stripe mt-2">
+                  <thead>
+                    <tr>
+                      <th v-for="th in item.cols">{{ th }}</th>
+                      <th class="w-20">地图显示</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="row in item.details">
+                      <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
+                      <td class="w-20">
+                        <el-checkbox size="large" v-model="row.display"
+                          :disabled="(row.id !== '3-3' && !row.cubes.length) || (row.id === '3-3' && item.details.every(r => r.cubes.length === 0))"
+                          @change="val => toggleCubeDetail(row, val)"></el-checkbox>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
-              <table class="table-default stripe mt-2">
-                <thead>
-                  <tr>
-                    <th v-for="th in item.cols">{{ th }}</th>
-                    <th class="w-20">地图显示</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="row in item.details">
-                    <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
-                    <td class="w-20">
-                      <el-checkbox size="large" v-model="row.display"
-                        :disabled="(row.id !== '3-3' && !row.cubes.length) || (row.id === '3-3' && item.details.every(r => r.cubes.length === 0))"
-                        @change="val => toggleCubeDetail(row, val)"></el-checkbox>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </template>
+            </template>
+          </div>
+
         </div>
       </Transition>
     </div>
@@ -264,6 +273,9 @@ function getShapeInfo() {
 }
 
 function handleInspect(show = true) {
+  if (show) {
+    layoutStore.toggleGlobalLoading(true)
+  }
   InspectCube({
     type: drawTypes.find(i => i.value === form.value.drawType).shapeType,
     id: 'inspect_kyhs',
@@ -413,9 +425,9 @@ function toggleCubeDetail(row, status) {
         color: c.color
       })),
       size: {
-        xLength: row.cubes[0].boxSize.lonLength,
-        yLength: row.cubes[0].boxSize.latLength,
-        zLength: row.cubes[0].boxSize.height
+        x: row.cubes[0].boxSize.lonLength,
+        y: row.cubes[0].boxSize.latLength,
+        z: row.cubes[0].boxSize.height
       }
     })
   }

src/views/home/cpns/PanelKypm.vue

@@ -39,14 +39,14 @@
     </table>
 
     <div class="text-center">
-      <el-button class="btn-main" @click="handleCalc">开始计算</el-button>
+      <el-button class="btn-main" @click="handleCalc" :loading="loading.calc">开始计算</el-button>
       <el-button class="btn-main" @click="handleClear(true)">清空结果</el-button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onBeforeUnmount, ref, watch, onBeforeMount } from 'vue';
+import { onBeforeUnmount, ref, watch, onBeforeMount, reactive } from 'vue';
 import { DrawPolygon, QueryCube, clearDraw } from '@/utils/map/addLayer'
 import { useMapStore } from '@/store/map';
 import usePanelStore from '@/store/panel';
@@ -129,11 +129,14 @@ function getMesh(status){
 
 }
 
-
+const loading = reactive({
+  calc: false
+})
 
 function handleCalc() {
   if (!drawResult) return
   if (!form.value.height) return
+  // loading.calc = true
   handleClear();
   getMesh("show");
   setTimeout(() => {

src/views/home/cpns/PanelLeft.vue

@@ -90,12 +90,12 @@ const layoutStore = useLayoutStore()
 
 const panelData = reactive({
   serviceOverview: [
-    { label: '航线数量', count: 1212, unit: '条', icon: getAssetsFile('page/icon-sta-hx.png') },
-    { label: '空域数量', count: 1212, unit: '块', icon: getAssetsFile('page/icon-sta-ky.png') },
-    { label: '起降点数量', count: 1212, unit: '个', icon: getAssetsFile('page/icon-sta-qjd.png') },
-    { label: '航空器数量', count: 1212, unit: '个', icon: getAssetsFile('page/icon-sta-hkq.png') },
-    { label: '企业数量', count: 1212, unit: '家', icon: getAssetsFile('page/icon-sta-qy.png') },
-    { label: '操控员数', count: 1212, unit: '人', icon: getAssetsFile('page/icon-sta-cky.png') },
+    { label: '航线数量', count: 8, unit: '条', icon: getAssetsFile('page/icon-sta-hx.png') },
+    { label: '空域数量', count: 25, unit: '块', icon: getAssetsFile('page/icon-sta-ky.png') },
+    { label: '起降点数量', count: 9, unit: '个', icon: getAssetsFile('page/icon-sta-qjd.png') },
+    { label: '航空器数量', count: 50, unit: '个', icon: getAssetsFile('page/icon-sta-hkq.png') },
+    { label: '企业数量', count: 1, unit: '家', icon: getAssetsFile('page/icon-sta-qy.png') },
+    { label: '操控员数', count: 10, unit: '人', icon: getAssetsFile('page/icon-sta-cky.png') },
   ],
   taskApply: [
     { label: '城配物流', count: 2313, offsetTop: '90px' },
@@ -105,9 +105,9 @@ const panelData = reactive({
     { label: '空中浏览', count: 1638, offsetTop: '78px' },
   ],
   taskAudit: [
-    { count: 250, label: '待审批' },
-    { count: 250, label: '审核通过' },
-    { count: 250, label: '审核不通过' },
+    { count: 9, label: '待审批' },
+    { count: 5, label: '审核通过' },
+    { count: 2, label: '审核不通过' },
   ],
   flightSta: [
     { label: '飞行架次', count: 1334, unit: '次', icon: getAssetsFile('page/icon-plane.png') },

src/views/home/cpns/PanelQjchs.vue

@@ -100,42 +100,49 @@
         </el-form>
       </Transition>
       <Transition name="emerge-right">
-        <div v-show="currentStep === 1" class="p-main">
-          <div v-if="isSafe" class="msg-safe mb-2">当前空域无冲突!</div>
-
-          <template v-else>
-            <div v-for="item in results" :key="item.title" class="mb-3">
-              <div class="title-sub">
-                {{ item.title }}
-                <div class="flex-1 flex justify-between items-center pl-2">
-                  <span v-if="item.level" class="risk-label"
-                    :class="riskTypes.find(i => i.value === item.level).color">{{
-                      riskTypes.find(i => i.value === item.level).label
-                    }}</span>
-                  <i v-else></i>
-                  <span class="btn-inline" @click="handleReInspect">重新评估</span>
+        <div v-show="currentStep === 1" class="p-main  flex flex-col pr-0">
+          <el-form-item label="网格查询">
+            <el-button class="btn-secondary ml-4" @click="handleInspect(true)">查询网格</el-button>
+            <el-button class="btn-secondary ml-4" @click="handleInspect(false)">关闭网格</el-button>
+          </el-form-item>
+
+          <div class="flex-1 overflow-y-auto pr-2">
+            <div v-if="isSafe" class="msg-safe mb-2">当前空域无冲突!</div>
+
+            <template v-else>
+              <div v-for="item in results" :key="item.title" class="mb-3">
+                <div class="title-sub">
+                  {{ item.title }}
+                  <div class="flex-1 flex justify-between items-center pl-2">
+                    <span v-if="item.level" class="risk-label"
+                      :class="riskTypes.find(i => i.value === item.level).color">{{
+                        riskTypes.find(i => i.value === item.level).label
+                      }}</span>
+                    <i v-else></i>
+                    <span class="btn-inline" @click="handleReInspect">重新评估</span>
+                  </div>
                 </div>
+                <table class="table-default stripe mt-2">
+                  <thead>
+                    <tr>
+                      <th v-for="th in item.cols">{{ th }}</th>
+                      <th class="w-20">地图显示</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="row in item.details">
+                      <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
+                      <td class="w-20">
+                        <el-checkbox size="large" v-model="row.display"
+                          :disabled="(row.id !== '3-3' && !row.cubes.length) || (row.id === '3-3' && item.details.every(r => r.cubes.length === 0))"
+                          @change="val => toggleCubeDetail(row, val)"></el-checkbox>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
-              <table class="table-default stripe mt-2">
-                <thead>
-                  <tr>
-                    <th v-for="th in item.cols">{{ th }}</th>
-                    <th class="w-20">地图显示</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="row in item.details">
-                    <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
-                    <td class="w-20">
-                      <el-checkbox size="large" v-model="row.display"
-                        :disabled="(row.id !== '3-3' && !row.cubes.length) || (row.id === '3-3' && item.details.every(r => r.cubes.length === 0))"
-                        @change="val => toggleCubeDetail(row, val)"></el-checkbox>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </template>
+            </template>
+          </div>
         </div>
       </Transition>
     </div>
@@ -281,6 +288,9 @@ function getShapeInfo() {
 }
 
 function handleInspect(show = true) {
+  if (show) {
+    layoutStore.toggleGlobalLoading(true)
+  }
   InspectCube({
     type: drawTypes.find(i => i.value === form.value.drawType).shapeType,
     id: 'inspect_qjchs',
@@ -404,10 +414,10 @@ function toggleCubeDetail(row, status) {
   } else {
     if (!row.cubes.length) return
     const id = 'hxhs_' + row.id
-    if(status) {
+    if (status) {
       addedCubeDetailIds.push(id)
     } else {
-      const targetIndex = addedCubeDetailIds.findIndex(i => i===id)
+      const targetIndex = addedCubeDetailIds.findIndex(i => i === id)
       addedCubeDetailIds.splice(targetIndex, 1)
     }
     InspectPathCube({
@@ -420,9 +430,9 @@ function toggleCubeDetail(row, status) {
         color: c.color
       })),
       size: {
-        xLength: row.cubes[0].boxSize.lonLength,
-        yLength: row.cubes[0].boxSize.latLength,
-        zLength: row.cubes[0].boxSize.height
+        x: row.cubes[0].boxSize.lonLength,
+        y: row.cubes[0].boxSize.latLength,
+        z: row.cubes[0].boxSize.height
       }
     })
   }

src/views/home/cpns/PanelSgzy.vue

@@ -41,18 +41,18 @@
     </table>
 
     <div class="text-center">
-      <el-button class="btn-main" @click="handleCalc">开始计算</el-button>
+      <el-button class="btn-main" @click="handleCalc" :loading="loading.calc">开始计算</el-button>
       <el-button class="btn-main" @click="handleClear(true)">清空结果</el-button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
+import { onBeforeMount, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import { DrawPolygon, QueryCube, clearDraw } from '@/utils/map/addLayer'
 import { useMapStore } from '@/store/map';
 import usePanelStore from '@/store/panel';
-import {geometryMeshEffect} from "@/utils/map/addTool.js";
+import { geometryMeshEffect } from "@/utils/map/addTool.js";
 
 const mapStore = useMapStore()
 const panelStore = usePanelStore()
@@ -89,11 +89,15 @@ watch(() => mapStore.draw_geometry, (val) => {
   tableData.value = drawResult.flat()
 }, { deep: true })
 
+// watch(() => mapStore.queryResult, () => {
+//   loading.calc = false
+// }, { deep: true })
+
 function handleClear(clearAll) {
   //开始计算之后取消绘制功能，转而使用带高度三维体显示
   clearDraw()
   getMesh("hide")
-  if(clearAll) {
+  if (clearAll) {
     tableData.value = []
   }
   QueryCube({
@@ -102,8 +106,8 @@ function handleClear(clearAll) {
 }
 
 //获取带高度三维体
-function getMesh(status){
-  if(status == "hide"){
+function getMesh(status) {
+  if (status == "hide") {
     geometryMeshEffect({
       id: 'sgzy_mesh',
       status: "hide"
@@ -112,29 +116,34 @@ function getMesh(status){
   }
   let height = form.value.maxZ * 1 - form.value.minZ * 1
   let rings = [];
-  for(let i = 0; i < drawResult[0].length; i++){
-    rings.push([drawResult[0][i][0],drawResult[0][i][1],form.value.minZ * 1])
+  for (let i = 0; i < drawResult[0].length; i++) {
+    rings.push([drawResult[0][i][0], drawResult[0][i][1], form.value.minZ * 1])
   }
   debugger
   geometryMeshEffect({
     id: 'sgzy_mesh',
-    status:"show",
+    status: "show",
     data: [{
       type: 'polygon',
       shape: {
         height: height,
         rings: [rings],
-        color: [0,255,0,0.2]
+        color: [0, 255, 0, 0.2]
       }
     }]
   })
 
 }
 
+const loading = reactive({
+  calc: false
+})
+
 function handleCalc() {
   const { maxZ, minZ } = form.value
   if (!drawResult) return
   if (!minZ || !maxZ) return
+  // loading.calc = true
   handleClear();
   getMesh("show");
   setTimeout(() => {
@@ -148,7 +157,7 @@ function handleCalc() {
 }
 
 function handleStoreChecked() {
-  if(!tableData.value.length) {
+  if (!tableData.value.length) {
     panelStore.setSgzy({})
     return
   }