特色应用模块

src/views/components/map/marsMap.vue

@@ -370,7 +370,7 @@ const initRectangle = () => {
  * 渲染所有点位
  */
 const initMarker = () => {
-  console.log(imageModules);
+
   PointJson.map((item, index) => {
     //绘制名字图标
     lablePoint(item, index);

src/views/components/map/panelLeft.vue

@@ -21,22 +21,11 @@
       <div class="contain-grid">
         <div v-for="item in gridItems" :key="item.id" class="grid-item">
           <div class="grid-item-content">{{ item.content }}</div>
-          <div class="grid-item-footer">{{ item.footer }}</div>
+          <div class="grid-item-footer">{{ item.footer }} <span class="unit-name">{{ item.unit }}</span></div>
         </div>
       </div>
     </view-title>
-    <!-- 底部 -->
+
-    <div class="contain-foot">
-      <div class="itemone">
-          <div><span>经度:</span>: <span>31</span></div>
-      </div>
-      <div class="itemone">
-        <div><span>纬度:</span> <span>31</span></div>
-      </div>
-      <div class="itemtwo">
-        <div><span>经度</span>: <span>31</span></div>
-      </div>
-    </div>
   </div>
 
 </template>
@@ -48,14 +37,14 @@ import { ModelCollada } from "vue-3d-model";
 
 // 定义数据
 const gridItems = [
-  { id: 1, content: '-20', footer: '经度(°)' },
+  { id: 1, content: '-20', footer: '经度',unit:'(°)' },
-  { id: 2, content: '20', footer: '纬度(°)' },
+  { id: 2, content: '20', footer: '纬度' ,unit:'(°)'},
-  { id: 3, content: '20', footer: '高度(m)' },
+  { id: 3, content: '20', footer: '高度' ,unit:'(m)'},
-  { id: 4, content: '20', footer: '偏航角(°)' },
+  { id: 4, content: '20', footer: '偏航角' ,unit:'(°)'},
-  { id: 5, content: '20', footer: '水平速度(°)' },
+  { id: 5, content: '20', footer: '俯仰角',unit:'(°)' },
-  { id: 6, content: '20', footer: '垂直速度(m/s)' },
+  { id: 6, content: '20', footer: '滚转角',unit:'(°)' },
-  { id: 7, content: '20', footer: '电量(%)' },
+  { id: 7, content: '20', footer: '速度',unit:'km/h' },
-  { id: 8, content: '20', footer: '电池温度(°c)' },
+  { id: 8, content: '20', footer: '电池电量',unit:''},
 
 ]
 
@@ -96,7 +85,7 @@ const lights = [
 ];
 </script>
 
-<style scoped>
+<style lang="scss" scoped >
 .panel-left {
   display: flex;
   flex-direction: column;
@@ -115,8 +104,21 @@ const lights = [
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  /* background-color: #fff; */
+  background: url('../../../assets/images/state-bg.png');
-  border:1px solid #ccc;
+  background-size: 100% 100%;
+  .grid-item-content{
+font-size: 30px;
+color: #fff;
+font-weight: bold;
+  }
+  .grid-item-footer{
+    font-size: 15px;
+    color: #FFFFFF;
+  }
+  .unit-name{
+    font-size: 13px;
+    color: #A2CBEA;
+  }
 }
 .contain-foot{
   padding: .3rem 1rem;

src/views/components/map/panelRight.vue

@@ -1,7 +1,41 @@
 <template>
     <div class="panel-box panel-right">
         <view-title height="calc(100% / 3)" title="平台介绍"></view-title>
-        <view-title height="calc(100% / 3)" title="特色应用"></view-title>
+        <view-title height="calc(100% / 3)" title="特色应用">
+            <div class="use-row">
+                <div class="row-item">
+                    <img src="@/assets/images/use-icon1.png" class="row-img" />
+                    <div class="row-name">服务受理</div>
+                </div>
+                <div class="row-item">
+                    <img src="@/assets/images/use-icon2.png" class="row-img" />
+                    <div class="row-name">算法配置</div>
+                </div>
+                <div class="row-item">
+                    <img src="@/assets/images/use-icon3.png" class="row-img" />
+                    <div class="row-name">事件分拨</div>
+                </div>
+                <div class="row-item">
+                    <img src="@/assets/images/use-icon4.png" class="row-img" />
+                    <div class="row-name">飞行服务</div>
+                </div>
+            </div>
+            <div class="use-row" style="margin-top: 6px;">
+                <div class="row-item">
+                    <img src="@/assets/images/use-icon5.png" class="row-img" />
+                    <div class="row-name">飞行控制</div>
+                </div>
+                <div class="row-item">
+                    <img src="@/assets/images/use-icon6.png" class="row-img" />
+                    <div class="row-name">设备管理</div>
+                </div>
+                <div class="row-item">
+                    <img src="@/assets/images/use-icon7.png" class="row-img" />
+                    <div class="row-name">数据共享</div>
+                </div>
+                
+            </div>
+        </view-title>
         <view-title height="calc(100% / 3)" title="飞行场景"></view-title>
     </div>
   </template>
@@ -10,8 +44,34 @@
   import {ViewTitle} from "@/views/components/map"
   </script>
   
-  <style  scoped>
+  <style lang="scss"  scoped>
-  .panel-right{
+    .use-row{
-      right: 46px;
+        display: flex;
-  }
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        .row-item{
+            box-sizing: border-box;
+            padding: 6px;
+            width: 80px;
+            height: 90px;
+            background: url('../../../assets/images/use-row-bg.png');
+            background-size: 100% 100%;
+            .row-img{
+                display: block;
+                width: 100%;
+                height: 80%;
+            }
+            .row-name{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                color: #FEFEFF;
+                height: 20%;
+                background: url('../../../assets/images/use-row-name.png');
+            background-size: 100% 100%;
+            }
+        }
+    }
   </style>

src/views/map.vue

@@ -2,7 +2,7 @@
   <div>
     <map-container>
       <template #map>
-        <mars-map></mars-map>
+        <!-- <mars-map></mars-map> -->
       </template>
       <template #left>
         <panel-left></panel-left>