地图功能

src/views/home/Home.vue

@@ -87,20 +87,25 @@
       </table>
 
       <div class="title-main rtl">各类违规类型占比次数</div>
-      <ul class="b-wgzb">
-        <li v-for="item in staticPanelData.violationSummary">
-          <span>{{ item.label }}</span>
-          <div>
-            <span>{{ item.count }}</span>
+      <div class="b-wgzb">
+        <video autoplay muted loop id="bg-wgzb">
+          <source src="@/assets/images/motion/bg-uav.webm" type="video/webm">
+        </video>
+        <ul>
+          <li v-for="item in staticPanelData.violationSummary">
+            <span>{{ item.label }}</span>
             <div>
-              <span>{{Math.round(item.count / staticPanelData.violationSummary.reduce((pre, item) => pre + item.count,
-                0)
-                * 100)}}</span>
-              <span>%</span>
+              <span>{{ item.count }}</span>
+              <div>
+                <span>{{Math.round(item.count / staticPanelData.violationSummary.reduce((pre, item) => pre + item.count,
+                  0)
+                  * 100)}}</span>
+                <span>%</span>
+              </div>
             </div>
-          </div>
-        </li>
-      </ul>
+          </li>
+        </ul>
+      </div>
 
     </div>
 
@@ -299,79 +304,87 @@ onMounted(() => {
   }
 
   .b-wgzb {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: space-between;
     height: 200px;
-    background: url('../../assets/images/page/icon-uav.png');
-    background-size: 440px 280px;
-    background-position: center;
-    padding: 15px;
+    position: relative;
 
-    li {
-      width: 50%;
-      height: fit-content;
-      display: flex;
-      flex-direction: column;
-
-
-      &>span {
-        display: block;
-        width: 104px;
-        height: 28px;
-        margin-left: 20px;
-        background: url('../../assets/images/page/bg-label.png');
-        background-size: cover !important;
-        line-height: 28px;
-        font-size: 16px;
-        text-align: center;
-      }
+    #bg-wgzb {
+      position: absolute;
+      left: 0;
+      top: -80px;
+    }
 
-      &>div {
-        width: 163px;
-        height: 45px;
-        padding-left: 20px;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: space-between;
+      height: 100%;
+      padding: 15px;
+
+      li {
+        width: 50%;
+        height: fit-content;
         display: flex;
-        align-items: center;
-        background: url('../../assets/images/page/bg-text-line.png');
-        background-size: cover !important;
-
+        flex-direction: column;
+  
+  
         &>span {
-          font-size: 20px;
-          margin-right: 13px;
+          display: block;
+          width: 104px;
+          height: 28px;
+          margin-left: 20px;
+          background: url('../../assets/images/page/bg-label.png');
+          background-size: cover !important;
+          line-height: 28px;
+          font-size: 16px;
+          text-align: center;
         }
-
+  
         &>div {
-          width: 47px;
-          height: 20px;
-          background: linear-gradient(0deg, rgba(78, 113, 183, 0.7), rgba(158, 183, 234, 0.1));
-          border-radius: 10px;
-          border: 1px solid;
-          // border-image: linear-gradient(0deg, #2C53A1, #97B1E4) 1 1;
-          color: #97B4ED;
-          font-size: 18px;
-          line-height: 18px;
-          text-align: center;
-
-          &>span:last-child {
-            font-size: 14px;
-            margin-left: 1px;
+          width: 163px;
+          height: 45px;
+          padding-left: 20px;
+          display: flex;
+          align-items: center;
+          background: url('../../assets/images/page/bg-text-line.png');
+          background-size: cover !important;
+  
+          &>span {
+            font-size: 20px;
+            margin-right: 13px;
+          }
+  
+          &>div {
+            width: 47px;
+            height: 20px;
+            background: linear-gradient(0deg, rgba(78, 113, 183, 0.7), rgba(158, 183, 234, 0.1));
+            border-radius: 10px;
+            border: 1px solid;
+            // border-image: linear-gradient(0deg, #2C53A1, #97B1E4) 1 1;
+            color: #97B4ED;
+            font-size: 18px;
+            line-height: 18px;
+            text-align: center;
+  
+            &>span:last-child {
+              font-size: 14px;
+              margin-left: 1px;
+            }
           }
         }
-      }
-
-      &:nth-child(2n) {
-        align-items: end;
-
-        &>span {
-          margin-right: 20px;
-          background: url('../../assets/images/page/bg-label2.png');
-        }
-
-        &>div {
-          padding-right: 20px;
-          justify-content: end;
-          background: url('../../assets/images/page/bg-text-line2.png');
+  
+        &:nth-child(2n) {
+          align-items: end;
+  
+          &>span {
+            margin-right: 20px;
+            background: url('../../assets/images/page/bg-label2.png');
+          }
+  
+          &>div {
+            padding-right: 20px;
+            justify-content: end;
+            background: url('../../assets/images/page/bg-text-line2.png');
+          }
         }
       }
     }

src/views/home/cpns/FloatPanelCube.vue

@@ -16,25 +16,26 @@
             <div class="ml-2 pl-2 pt-1 flex-1 flex flex-col justify-evenly">
               <span>{{ item.label }}</span>
               <div>
-                <span>{{ item.value || '-' }}</span>
+                <span v-if="index === 2" :title="item.value.join(',')">{{ item.value.length === 0 ? '-' : item.value.length > 1 ?
+                  item.value[0] + '...' : item.value[0] }}</span>
+                <span v-else>{{ item.value || '-' }}</span>
                 <span v-if="item.value" class="ml-1">{{ item.unit }}</span>
               </div>
             </div>
           </li>
         </ul>
       </div>
-
     </div>
   </Transition>
 </template>
 
 <script setup>
-import { onBeforeMount, onMounted, ref, watch } from 'vue';
+import { setAqxs } from '@/echarts/options';
+import { queryGridByCode } from "@/service/map.js";
 import useLayoutStore from '@/store/layout';
 import { useMapStore } from "@/store/map.js";
-import { queryGridByCode } from "@/service/map.js";
 import { getAssetsFile } from '@/utils/require';
-import { setAqxs } from '@/echarts/options';
+import { onMounted, ref, watch } from 'vue';
 
 const mapStore = useMapStore();
 const layoutStore = useLayoutStore()
@@ -42,23 +43,12 @@ const layoutStore = useLayoutStore()
 const list = ref([
   { label: '高度', value: '', unit: '米' },
   { label: '是否占用', value: '', unit: '' },
-  { label: '占用类型', value: '', unit: '' },
+  { label: '占用类型', value: [], unit: '' },
   { label: '人口', value: '', unit: '人' },
   { label: '河流上方', value: '', unit: '' },
   { label: '道路上方', value: '', unit: '' },
 ])
 
-// let form = ref({
-//   safetyIndex: '',
-//   river: '',
-//   road: '',
-//   collision: '',
-//   green: '',
-//   occupation: '',
-//   airspaceType: '',
-//   populationDensity: ''
-// })
-
 function handleClose() {
   layoutStore.toggleFloatPanel('cube', false)
 }
@@ -72,10 +62,31 @@ function getGridData() {
       const { element } = data
       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[4].value = element.river ? '是' : '否'
+      list.value[5].value = element.road ? '是' : '否'
       list.value[3].value = element.demographics
 
+      const occupyTypes = {
+        clearZone: '净空区',
+        clearZoneBuffer: '净空区缓冲区',
+        noFlyZone: '禁飞区',
+        noFlyZoneBuffer: '禁飞区缓冲区',
+        collision: '建筑物',
+        collisionBuffer: '建筑物缓冲区',
+        expand1: '起降场',
+        expand2: '航线',
+      }
+
+      list.value[1].value = '否'
+      let occupys = []
+      for (const [k, v] of Object.entries(occupyTypes)) {
+        if (element[k]) {
+          list.value[1].value = '是'
+          occupys.push(v)
+        }
+      }
+      list.value[2].value = occupys
+
     } else {
       console.log("网格信息查询失败")
     }

src/views/home/cpns/PanelSjwg.vue

@@ -428,7 +428,7 @@ const vCollapse = {
     filter: opacity(0.6);
 
     &.active {
-      filter: opacity(1);
+      filter: opacity(1) drop-shadow(0 0 5px #379bff);
       transform: scale(1.1);
     }
   }