空气质量监测站数据时间序列改为正序

src/views/chart/pages/MarkerMap.vue

@@ -20,12 +20,8 @@
     <div class="setting-box-wrap">
       <div class="menu-box">
         <div v-for="item in settingData" :key="item.id" class="menu-group">
-          <div
+          <div v-for="subItem in item.children" :key="subItem.id" class="menu-item"
-            v-for="subItem in item.children"
+            :class="{ active: subItem.isActive }" @click="menuClick(subItem)">
-            :key="subItem.id"
-            class="menu-item"
-            :class="{ active: subItem.isActive }"
-            @click="menuClick(subItem)">
             <img :src="getSetImageUrl(subItem.isActive ? subItem.icon + '-hover' : subItem.icon)" class="menu-icon" />
           </div>
         </div>
@@ -74,24 +70,16 @@
               <span class="icon-box"><img src="@/assets/images/setting-icon-2.png" class="icon" /></span>
               Nuclear Facilities
             </div>
-            <el-checkbox
+            <el-checkbox label="" v-model="checkData.nuclearFacilities" class="icon-checkbox dark-checkbox"
-              label=""
+              @change="nuclearFacilitiesChange" />
-              v-model="checkData.nuclearFacilities"
-              class="icon-checkbox dark-checkbox"
-              @change="nuclearFacilitiesChange"
-            />
           </div>
           <div class="setting-icon-check">
             <div class="icon-wrap">
               <span class="icon-box"><img src="@/assets/images/setting-icon-3.png" class="icon" /></span>
               Groud monitoring station
             </div>
-            <el-checkbox
+            <el-checkbox label="" v-model="checkData.groudMonitoringStation" class="icon-checkbox dark-checkbox"
-              label=""
+              @change="groudMonitoringStationChange" />
-              v-model="checkData.groudMonitoringStation"
-              class="icon-checkbox dark-checkbox"
-              @change="groudMonitoringStationChange"
-            />
           </div>
           <!--<div class="setting-icon-check">
             <div class="icon-wrap">
@@ -678,7 +666,7 @@ export default {
     },
 
     groudMonitoringStationChange(boolean) {
-      debugger
+      // debugger
       if (boolean) {
         this.Groud_monitoring_station_Entities = this.imgData.groudMonitoringStation.map((pos) => {
           return this.viewer.entities.add({
@@ -943,7 +931,14 @@ export default {
     },
 
     imageClick(entity, clickPosition) {
-      debugger
+      entity.info?.chartData.sort((a, b) => {
+        // 将时间字符串转为 Date 对象进行比较
+        const timeA = new Date(a.collect_time);
+        const timeB = new Date(b.collect_time);
+        // 正序：timeA - timeB；倒序：timeB - timeA
+        return timeA - timeB;
+      });
+      // debugger
       this.selectedEntity = {
         id: entity.id,
         name: entity.name,
@@ -1200,16 +1195,19 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+
   #cesiumContainer {
     position: relative;
     width: 100%;
     height: 100%;
+
     ::v-deep .cesium-viewer-toolbar {
       .cesium-navigationHelpButton-wrapper {
         display: none;
       }
     }
   }
+
   .setting-box-wrap {
     width: 360px;
     position: absolute;
@@ -1218,14 +1216,18 @@ export default {
     z-index: 8;
     color: #e2e4e3;
     display: flex;
+
     .menu-box {
       width: 32px;
+
       .menu-group {
         margin-bottom: 10px;
+
         &:last-child {
           margin-bottom: 0;
         }
       }
+
       .menu-item {
         width: 100%;
         height: 32px;
@@ -1235,22 +1237,27 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
+
         &+.menu-item {
           margin-top: -1px;
         }
+
         &:hover {
           background-color: #126774;
         }
+
         &.active {
           background-color: #13a2b6;
         }
       }
     }
+
     .setting-box {
       flex: 1;
       overflow: hidden;
       margin-left: 15px;
       background-color: rgba(2, 27, 32, 0.85);
+
       .setting-head {
         height: 40px;
         line-height: 40px;
@@ -1258,27 +1265,32 @@ export default {
         background-color: rgba(6, 61, 68, 0.85);
         color: #01e8fc;
       }
+
       .setting-body {
         padding: 14px;
+
         .setting-icon-check {
           margin: 1px 0;
           display: flex;
           align-items: center;
+
           .icon-wrap {
             flex: 1;
             overflow: hidden;
             display: flex;
             align-items: center;
+
             .icon-box {
               width: 30px;
               margin-right: 12px;
               display: flex;
               align-items: center;
               justify-content: center;
-              .icon {
+
-              }
+              .icon {}
             }
           }
+
           .icon-checkbox {
             width: 20px;
             display: flex;
@@ -1286,6 +1298,7 @@ export default {
             justify-content: flex-end;
           }
         }
+
         .space-line {
           height: 1px;
           margin: 10px 0;
@@ -1306,22 +1319,27 @@ export default {
   height: 200px;
   background-color: rgba(2, 27, 32, 0.85);
   color: #fff;
+
   .popup-header {
     padding: 6px 10px;
     text-align: center;
     color: #a77c11;
   }
+
   .popup-content {
     padding: 0 5px 5px;
+
     .popup-table {
       width: 100%;
       height: 100%;
       border-collapse: collapse;
+
       th,
       td {
         padding: 0 10px;
         text-align: center;
         border: 1px solid #0a4a46;
+
         &:first-child {
           color: #6bb5cc;
         }