地图功能

src/echarts/options.js

@@ -87,6 +87,7 @@ export function setJrfx(ele, dataIn) {
 
 var aqxs = null
 export function setAqxs(ele, dataIn) {
+	const value = Math.min(dataIn, 100)
 	const max = 100;
 	const min = 0;
 	const centerArr = ['50%', '50%']
@@ -232,9 +233,7 @@ export function setAqxs(ele, dataIn) {
 					},
 					offsetCenter: ['0', '45%'],
 				},
-				data: [{
-					value: dataIn
-				}]
+				data: [{ value }]
 			},
 			{
 				name: '中心灰色圆',
@@ -292,7 +291,7 @@ export function setAqxs(ele, dataIn) {
 			{
 				name: '渐变蓝色进度',
 				type: 'bar',
-				data: [, , dataIn],
+				data: [, , value],
 				z: 1,
 				coordinateSystem: 'polar',
 				barMaxWidth: nowSize(10),

src/views/home/cpns/FloatPanelCube.vue

@@ -39,8 +39,6 @@ import { setAqxs } from '@/echarts/options';
 const mapStore = useMapStore();
 const layoutStore = useLayoutStore()
 
-let safetyIndex = 0
-
 const list = ref([
   { label: '高度', value: '', unit: '米' },
   { label: '是否占用', value: '', unit: '' },
@@ -72,10 +70,11 @@ function getGridData() {
     if (res.data.code == "200") {
       const { data } = res.data
       const { element } = data
-      safetyIndex = data.weightValue || 0
+      setAqxs(document.getElementById('c-chart'), data.weightValue || 0)
       list.value[0].value = data.z.toFixed(2)
       list.value[4].value = element.river? '是': '否'
       list.value[5].value = element.road? '是': '否'
+      list.value[3].value = element.demographics
 
     } else {
       console.log("网格信息查询失败")
@@ -83,17 +82,12 @@ function getGridData() {
   })
 }
 
-onBeforeMount(() => {
-  getGridData()
-})
-
 onMounted(() => {
-  setAqxs(document.getElementById('c-chart'), safetyIndex)
+  getGridData()
 })
 
 watch(() => mapStore.gridCode, (val) => {
   getGridData()
-  setAqxs(document.getElementById('c-chart'), safetyIndex)
 }, {
   deep: true
 })

src/views/home/cpns/FloatPanelFcky.vue

@@ -93,6 +93,8 @@ function handleRestoreChecked() {
   Object.keys(checkAll).forEach(k => {
     checkAll[k] = temp.checkAll[k]
   })
+  drawResult = temp.drawResult
+  queryResult = temp.queryResult
 }
 
 const form = ref({
@@ -293,7 +295,9 @@ function handleStoreChecked() {
     form: form.value,
     checkAll,
     lastBigLayers,
-    lastSmallLayers
+    lastSmallLayers,
+    drawResult,
+    queryResult
   })
 }
 

src/views/home/cpns/PanelKyhs.vue

@@ -81,9 +81,6 @@
           <el-form-item label="绘制空域">
             <el-button class="btn-secondary" @click="handleDraw">绘制</el-button>
           </el-form-item>
-          <!-- <el-form-item label="网格查询">
-            <el-button :disabled="!hasDraw" class="btn-secondary" @click="handleInspect(true)">查询网格</el-button>
-          </el-form-item> -->
         </el-form>
       </Transition>
       <Transition name="emerge-right">
@@ -140,7 +137,7 @@
 
 <script setup>
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
-import { drawArea, clearDraw, InspectCube } from '@/utils/map/addLayer'
+import { drawArea, clearDraw, InspectCube, showShapes } from '@/utils/map/addLayer'
 import { airSpaceTypes } from '@/utils/options';
 import { hexToRgb } from '@/utils/tools';
 import { useMapStore } from '@/store/map';
@@ -215,7 +212,10 @@ function handleDraw() {
   formRef.value.validateField(['height', 'topRadius', 'bottomRadius'], async (isValid) => {
     if (!isValid) return
     if (hasDraw.value) {
-      clearDraw()
+      showShapes({
+        id: 'kyhs_drew_non_editable',
+        data: null
+      })
       handleInspect(false)
       await new Promise((res) => {
         setTimeout(() => res(), 500);
@@ -240,23 +240,23 @@ function getShapeInfo() {
     case '2':
     case '3':
       res = {
-        height,
+        height: +height,
         rings: drawGeometry.rings
       }
       break;
     case '4':
       res = {
         point: { x, y, z },
-        height,
-        radius: topRadius
+        height: +height,
+        radius: +topRadius
       }
       break;
     case '6':
       res = {
         point: { x, y, z },
-        height,
-        topRadius,
-        bottomRadius
+        height: +height,
+        topRadius: +topRadius,
+        bottomRadius: +bottomRadius
       }
       break;
   }
@@ -336,6 +336,17 @@ function toNext() {
   formRef.value.validate(valid => {
     if (valid) {
       layoutStore.toggleGlobalLoading(true)
+      clearDraw()
+      showShapes({
+        id: 'kyhs_drew_non_editable',
+        data: [{
+          type: drawTypes.find(i => i.value === form.value.drawType).shapeType,
+          shape: {
+            ...getShapeInfo(),
+            color: hexToRgb(airSpaceTypes.find(i => i.value===form.value.areaType).color, 0.5) 
+          }
+        }]
+      })
       handleInspect(true)
       currentStep.value = 1
     }
@@ -376,6 +387,10 @@ function handleSave() {
 onBeforeUnmount(() => {
   clearDraw()
   handleInspect(false)
+  showShapes({
+    id: 'kyhs_drew_non_editable',
+    data: null
+  })
 })
 
 </script>

src/views/home/cpns/PanelQjchs.vue

@@ -97,9 +97,6 @@
           <el-form-item label="绘制空域">
             <el-button class="btn-secondary" @click="handleDraw">绘制</el-button>
           </el-form-item>
-          <!-- <el-form-item label="网格查询">
-            <el-button :disabled="!hasDraw" class="btn-secondary" @click="handleInspect(true)">查询网格</el-button>
-          </el-form-item> -->
         </el-form>
       </Transition>
       <Transition name="emerge-right">
@@ -154,7 +151,7 @@
 
 <script setup>
 import { onBeforeUnmount, ref, watch, reactive, computed } from 'vue';
-import { drawArea, clearDraw, InspectCube } from '@/utils/map/addLayer'
+import { drawArea, clearDraw, InspectCube, showShapes } from '@/utils/map/addLayer'
 import { useMapStore } from '@/store/map';
 import { uavList } from '@/utils/options';
 import { AddPlot } from '@/service/http';
@@ -232,7 +229,10 @@ async function handleDraw() {
   formRef.value.validateField(['height', 'topRadius', 'bottomRadius', 'topHeight', 'bottomHeight'], async (isValid) => {
     if (!isValid) return
     if (hasDraw.value) {
-      clearDraw()
+      showShapes({
+        id: 'qjchs_drew_non_editable',
+        data: null
+      })
       handleInspect(false)
       await new Promise((res) => {
         setTimeout(() => res(), 500);
@@ -255,25 +255,25 @@ function getShapeInfo() {
     case '4':
       res = {
         point: { x, y, z },
-        height,
-        radius: topRadius
+        height: +height,
+        radius: +topRadius
       }
       break;
     case '5':
       res = {
         point: { x, y, z },
-        coneHeight: topHeight,
-        cylinderHeight: bottomHeight,
-        topRadius,
-        bottomRadius
+        coneHeight: +topHeight,
+        cylinderHeight: +bottomHeight,
+        topRadius: +topRadius,
+        bottomRadius: +bottomRadius
       }
       break;
     case '6':
       res = {
         point: { x, y, z },
-        height,
-        topRadius,
-        bottomRadius
+        height: +height,
+        topRadius: +topRadius,
+        bottomRadius: +bottomRadius
       }
       break;
   }
@@ -351,6 +351,17 @@ function toNext() {
   formRef.value.validate(valid => {
     if (valid) {
       layoutStore.toggleGlobalLoading(true)
+      clearDraw()
+      showShapes({
+        id: 'qjchs_drew_non_editable',
+        data: [{
+          type: drawTypes.find(i => i.value === form.value.drawType).shapeType,
+          shape: {
+            ...getShapeInfo(),
+            color: [0, 255, 0, 0.5]
+          }
+        }]
+      })
       handleInspect(true)
       currentStep.value = 1
     }
@@ -393,6 +404,10 @@ function handleSave() {
 onBeforeUnmount(() => {
   clearDraw()
   handleInspect(false)
+  showShapes({
+    id: 'qjchs_drew_non_editable',
+    data: null
+  })
 })
 
 </script>

src/views/home/cpns/PanelSjwg.vue

@@ -25,7 +25,7 @@
       <div v-if="contentShow.b2" v-collapse="'scroll'" class="flex-1 pr-1">
         <div class="title-shade">
           <span>空域</span>
-          <i class="btn-edit" :class="{ 'active': checkAll.area }" @click="handleCheckAll('area')"></i>
+          <i class="btn-selectall" :class="{ 'active': checkAll.area }" @click="handleCheckAll('area')"></i>
           <i class="drop-down" @click="toggleContentShow('b2r1')" :class="{ 'reverse': contentShow.b2r1 }"></i>
         </div>
         <Transition>
@@ -42,7 +42,7 @@
 
         <div class="title-shade">
           <span>航线</span>
-          <i class="btn-edit" :class="{ 'active': checkAll.route }" @click="handleCheckAll('route')"></i>
+          <i class="btn-selectall" :class="{ 'active': checkAll.route }" @click="handleCheckAll('route')"></i>
           <i class="drop-down" @click="toggleContentShow('b2r2')" :class="{ 'reverse': contentShow.b2r2 }"></i>
         </div>
         <Transition>
@@ -59,7 +59,7 @@
 
         <div class="title-shade">
           <span>起降场</span>
-          <i class="btn-edit" :class="{ 'active': checkAll.plot }" @click="handleCheckAll('plot')"></i>
+          <i class="btn-selectall" :class="{ 'active': checkAll.plot }" @click="handleCheckAll('plot')"></i>
           <i class="drop-down" @click="toggleContentShow('b2r3')" :class="{ 'reverse': contentShow.b2r3 }"></i>
         </div>
         <Transition>
@@ -178,7 +178,7 @@ async function handleBaseClick(layer) {
 const areaList = ref([])
 
 function handleCheck(item, type) {
-  console.log(item)
+  // console.log(item)
   item.check = !item.check
   let color
   switch (type) {
@@ -417,14 +417,15 @@ const vCollapse = {
     margin-right: 10px;
   }
 
-  .btn-edit {
+  .btn-selectall {
     display: block;
-    width: 14px;
-    height: 14px;
-    background: url('../../../assets/images/page/btn-edit.png');
+    width: 26px;
+    height: 26px;
+    background: url('../../../assets/images/page/btn-selectall.png');
     background-size: 100%;
+    background-position: center 1px;
     cursor: pointer;
-    filter: opacity(0.5);
+    filter: opacity(0.6);
 
     &.active {
       filter: opacity(1);
@@ -477,7 +478,6 @@ const vCollapse = {
     height: 34px;
     margin-left: 5px;
     cursor: pointer;
-    background-size: cover !important;
     filter: grayscale(1);
 
     &.active {
@@ -487,14 +487,18 @@ const vCollapse = {
 
   i:nth-child(3) {
     background: url('../../../assets/images/page/btn-check.png');
+    background-size: cover;
   }
 
   i:nth-child(4) {
     background: url('../../../assets/images/page/btn-mesh.png');
+    background-size: cover;
   }
 
   i:nth-child(5) {
     background: url('../../../assets/images/page/btn-delete.png');
+    background-size: 40px 40px;
+    background-position: center;
   }
 }
 </style>