wj-smartcity 济南反馈问题/展示内容统一修正提交，事件列表添加checkbox&展示逻辑修改，过长图表展示近六条等

wj-smartcity/src/views/dataQueries/rightForm/cycleData.vue

@@ -153,7 +153,7 @@ export default {
         { label: "中车流量", prop: "trafficFlowB" },
         { label: "大车流量", prop: "trafficFlowA" },
         { label: "平均速度", prop: "speed" },
-        { label: "时间占有率", prop: "timeOccupancy" },
+        { label: "平均时间占有率", prop: "timeOccupancy" },
         { label: "平均车头时距", prop: "vehheadTime" },
         { label: "平均车身间距", prop: "vehheadDist" },
         { label: "85位速度", prop: "v85" },

wj-smartcity/src/views/dataQueries/rightForm/snapshotData.vue

@@ -135,7 +135,7 @@ export default {
         { label: "队尾距离", prop: "teamTailDistance" },
         { label: "排队车辆数", prop: "queueNums" },
         { label: "车道内车辆数", prop: "carNums" },
-        { label: "空间占有率", prop: "vehicleLengthRatio" },
+        { label: "平均空间占有率", prop: "vehicleLengthRatio" },
         { label: "平均速度", prop: "speed" },
         { label: "车辆分布情况", prop: "stdSpaceHeadway" },
         { label: "头车速度", prop: "headSpeed" },

wj-smartcity/src/views/signal/dialogs/greenWave/crossKipData.vue

@@ -50,7 +50,6 @@ export default {
           queue: "25",
           time: "12",
         },
-        {name: "相城大道与南天成路", race: "91", queue: "25", time: "12"},
         {
           name: "相城大道与朱径支路",
           race: "91",

wj-smartcity/src/views/signal/dialogs/greenWave/greenWaveDetail.vue

@@ -5,7 +5,7 @@
       class="wave-item"
       v-for="item in waveData"
       :key="item.crossId"
-        style="width: 100%;"
+      style="width: 100%"
     >
       <i class="item-icon"></i>
       <div class="item-title">
@@ -29,29 +29,33 @@
         </div>
       </div>
     </div>
-    <div class="time-run-dash" v-if="contentData.areaDetailFlag" :style="{
-          left:
-            (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
-        }">
-      <div class="dash-line">
-
-      </div>
+    <div
+      class="time-run-dash"
+      v-if="contentData.areaDetailFlag"
+      :style="{
+        left: (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
+      }"
+    >
+      <div class="dash-line"></div>
       <div class="dash-secend">{{ contentData.pointerSecond }}s</div>
     </div>
     <div class="time-line" v-if="contentData.areaDetailFlag">
-<!--      <div-->
-<!--          class="line-pointer"-->
-<!--          :style="{-->
-<!--          left:-->
-<!--            (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',-->
-<!--        }"-->
-<!--      >-->
-        <span style="position:absolute" :style="{
+      <!--      <div-->
+      <!--          class="line-pointer"-->
+      <!--          :style="{-->
+      <!--          left:-->
+      <!--            (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',-->
+      <!--        }"-->
+      <!--      >-->
+      <span
+        style="position: absolute"
+        :style="{
           left:
             (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
         }"
-            class="pointer-second"></span>
-<!--      </div>-->
+        class="pointer-second"
+      ></span>
+      <!--      </div>-->
       <span class="cycle-left">0s</span>
       <span class="cycle">{{ contentData.cycle }}s</span>
     </div>
@@ -59,7 +63,7 @@
 </template>
 
 <script>
-import {api_phaseByTimeList} from "@/common/api/crossControl.js";
+import { api_phaseByTimeList } from "@/common/api/crossControl.js";
 import wsMixins from "@/common/mixin/wsMixins.js";
 
 export default {
@@ -77,8 +81,8 @@ export default {
         "redFlashTime",
       ],
       waveCoordPhaseData: [
-        {second: 85, forward: 18, reverse: 20, width: 20},
-        {second: 85, forward: 38, reverse: 20, width: 20},
+        { second: 85, forward: 18, reverse: 20, width: 20 },
+        { second: 85, forward: 38, reverse: 20, width: 20 },
       ],
       waveData: [
         // { title: "相城大道与朱径支路交叉口", phaseData: [], speed: 52 },
@@ -104,7 +108,7 @@ export default {
     },
   },
   mounted() {
-    console.log('contentData', this.contentData)
+    console.log("contentData", this.contentData);
     this.getCrossWs(); //赋值第一路口的crossId
     // this.contentData.pointerSecond = 235;
     this.timeInterval = setInterval(() => {
@@ -143,14 +147,19 @@ export default {
         //     (item.distanceToNextCross / sum) * boxHeight + "px";
         // console.log((item.distanceToNextCross / sum) * boxHeight);
       });
-      console.log(this.contentData.forwardGreenwaveList);
       this.contentData.forwardGreenwaveList.forEach((item) => {
         item.offsetToEnd = item.offsetToStart + this.contentData.forwardWidth;
       });
-      this.$nextTick(()=>{
-        document.getElementById("waveCanvas").style.left = `${document.getElementById('greenWaveDialog').getBoundingClientRect().left*-1}px`
-        document.getElementById("waveCanvas").style.top = `${document.getElementById('greenWaveDialog').getBoundingClientRect().top*-1}px`
-      })
+      this.$nextTick(() => {
+        document.getElementById("waveCanvas").style.left = `${
+          document.getElementById("greenWaveDialog").getBoundingClientRect()
+            .left * -1
+        }px`;
+        document.getElementById("waveCanvas").style.top = `${
+          document.getElementById("greenWaveDialog").getBoundingClientRect()
+            .top * -1
+        }px`;
+      });
       setTimeout(() => {
         // this.draw();
         this.setGreenWaveLine();
@@ -180,6 +189,7 @@ export default {
         } else {
           endDiv = divs[i + 1];
         }
+        console.log("draw line...", startDiv, endDiv);
         // 获取 div 元素的位置和大小信息
         const startDivRect = startDiv.getBoundingClientRect();
         const endDivRect = endDiv.getBoundingClientRect();
@@ -197,7 +207,8 @@ export default {
           const endX =
             endDivRect.left +
             endXEachSecondW *
-              data[i === divs.length - 1 ? divs.length - 1 : i + 1].offsetToStart;
+              data[i === divs.length - 1 ? divs.length - 1 : i + 1]
+                .offsetToStart;
           const endY = endDivRect.top;
           if (type === "f" || type === "r") {
             ctx.moveTo(startX, startY);
@@ -358,18 +369,18 @@ export default {
     //height: 100%;
     pointer-events: none;
   }
-  .time-run-dash{
+  .time-run-dash {
     position: absolute;
     padding-left: 196px;
     height: 100%;
     width: 206px;
-    .dash-line{
+    .dash-line {
       height: calc(100% - 20px);
       width: 23px;
       background-image: url("../../../../assets/images/signal/line-pointer.png");
       background-size: 100% 100%;
     }
-    .dash-secend{
+    .dash-secend {
       height: 20px;
       line-height: 20px;
     }
@@ -403,7 +414,6 @@ export default {
       width: 24px;
       //height: 300px;
       height: 240px;
-
     }
 
     .pointer-second {
@@ -431,7 +441,8 @@ export default {
       display: inline-block;
       width: 18px;
       height: 17px;
-      background: url("../../../../assets/images/dialogImg/wave-icon.png") no-repeat;
+      background: url("../../../../assets/images/dialogImg/wave-icon.png")
+        no-repeat;
       background-size: 100% 100%;
     }
 

wj-smartcity/src/views/signal/msgs/bottomComponents/eventComp.vue

 <template>
-  <div class="full-w-h" style="display: flex;flex-direction: column;">
+  <div class="full-w-h" style="display: flex; flex-direction: column">
     <div class="custom-form">
       <label class="custom-form-label">事件类型： </label>
-      <el-select highlight-current-row style="width: 120px;margin-right: 10px" @change="filterDataByType"
+      <el-select
+        highlight-current-row
+        style="width: 120px; margin-right: 10px"
+        @change="filterDataByType"
         v-model="value"
-                 placeholder="请选择">
+        placeholder="请选择"
+      >
         <el-option
           v-for="item in options"
           :key="item"
-            :label="$store.state.dicts.EventType.find((it) => {
+          :label="
+            $store.state.dicts.EventType.find((it) => {
               return it.code == item;
-            })?.name || item"
-            :value="item">
+            })?.name || item
+          "
+          :value="item"
+        >
         </el-option>
       </el-select>
       <label class="custom-form-label">时段选择： </label>
@@ -21,7 +28,8 @@
         type="datetimerange"
         range-separator="至"
         start-placeholder="开始日期"
-          end-placeholder="结束日期">
+        end-placeholder="结束日期"
+      >
       </el-date-picker>
     </div>
     <el-table
@@ -34,42 +42,47 @@
       header-cell-class-name="custom-table-header-cell"
       @row-click="rowClick"
       :data="listDataCopy"
+      ref="multipleTable"
       :row-class-name="getRowClassName"
-        style="width: 100%;flex:1"
-        height="100%">
-<!--      <el-table-column-->
-<!--          show-overflow-tooltip-->
-<!--          align="center"-->
-<!--          label="事件编号">-->
-<!--        <template slot-scope="scope">{{ occupancyValue(scope.row.eventId) }}</template>-->
-<!--      </el-table-column>-->
-      <el-table-column width="100" align="center" label="事件编号"
-          type="index">
+      style="width: 100%; flex: 1"
+      height="100%"
+      @selection-change="handleSelectionChange"
+    >
+      <!--      <el-table-column-->
+      <!--          show-overflow-tooltip-->
+      <!--          align="center"-->
+      <!--          label="事件编号">-->
+      <!--        <template slot-scope="scope">{{ occupancyValue(scope.row.eventId) }}</template>-->
+      <!--      </el-table-column>-->
+      <el-table-column type="selection" width="55"> </el-table-column>
+      <el-table-column width="100" align="center" label="事件编号" type="index">
       </el-table-column>
       <el-table-column
         prop="eventType"
         align="center"
         label="事件类型"
-          show-overflow-tooltip>
-        <template slot-scope="scope">{{ translateDict(scope.row.eventType, 'EventType') }}</template>
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{
+          translateDict(scope.row.eventType, "EventType")
+        }}</template>
       </el-table-column>
       <el-table-column
         prop="startTime"
         align="center"
         label="时间"
-          show-overflow-tooltip>
+        show-overflow-tooltip
+      >
       </el-table-column>
-      <el-table-column
-          align="center"
-          label="位置"
-          show-overflow-tooltip>
-        <template slot-scope="scope">{{ occupancyValue(scope.row.placeDesc) }}</template>
+      <el-table-column align="center" label="位置" show-overflow-tooltip>
+        <template slot-scope="scope">{{
+          occupancyValue(scope.row.placeDesc)
+        }}</template>
       </el-table-column>
-      <el-table-column
-          align="center"
-          label="备注"
-          show-overflow-tooltip>
-        <template slot-scope="scope">{{ occupancyValue(scope.row.remark) }}</template>
+      <el-table-column align="center" label="备注" show-overflow-tooltip>
+        <template slot-scope="scope">{{
+          occupancyValue(scope.row.remark)
+        }}</template>
       </el-table-column>
     </el-table>
   </div>
@@ -77,80 +90,110 @@
 
 <script>
 import Vue from "vue";
-import * as mapTool from '@/utils/mapboxTools'
-import {getHoloEventList} from "@/dao/optApi";
-import {occupancyValue} from "@/utils";
+import * as mapTool from "@/utils/mapboxTools";
+import { getHoloEventList } from "@/dao/optApi";
+import { occupancyValue } from "@/utils";
 import eventPopupVue from "../../mapPopup/eventPopup.vue";
 
 const EventPopupVue = Vue.extend(eventPopupVue);
 export default {
-  name: 'eventComp',
-  props: ['crossData'],
+  name: "eventComp",
+  props: ["crossData"],
   data() {
     return {
       options: [],
-      value: '',
+      value: "",
       dateTimeRange: [],
       tableData: [],
       listDataCopy: [],
       loading: true,
-    }
+      multipleSelection: [],
+    };
   },
   mounted() {
     if (time_config.homepage_eventTime) {
       this.dateTimeRange = [
         new Date(time_config.homepage_eventTime[0]),
-        new Date(time_config.homepage_eventTime[1])
+        new Date(time_config.homepage_eventTime[1]),
       ];
     } else {
       this.dateTimeRange = [
-        new Date(
-            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
-        ),
-        new Date()
+        new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
+        new Date(),
       ];
     }
-    this.getData()
+    this.getData();
   },
   methods: {
+    showEventPoint(events){
+      let features = []
+      for (let item of events) {
+        if (item.lng && item.lat) {
+          features.push(turf.point([item.lng, item.lat], item))
+        }
+      }
+      // features.push(turf.point([map.getCenter().lng,map.getCenter().lat],{a:1}))
+      let geo = turf.featureCollection(features)
+      mapTool.addOrUpdateEventPoint1(window.map, geo)
+      window.map.off('click', 'eventPoint1', this.eventPointClick)
+      window.map.on('click', 'eventPoint1', this.eventPointClick)
+    },
+    eventPointClick(e) {
+      mapTool.addPopupEvent(window.map, e.features[0].properties)
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      this.showEventPoint(this.multipleSelection)
+    },
     translateDict(value, type) {
-      let result = value
+      let result = value;
       let target = this.$store.state.dicts[type].find((dict) => {
         return dict.code == value;
-      })
+      });
       if (target) {
-        result = target.name
+        result = target.name;
       }
-      return result
+      return result;
     },
     occupancyValue,
+    sliceTableAndRender(){
+      let sliceSelection = this.listDataCopy.slice(0, 10);
+      this.$nextTick(() => {
+        for (let i = 0; i < this.listDataCopy.length; i++) {
+          if (i <= 9) {
+            this.$refs.multipleTable.toggleRowSelection(this.listDataCopy[i], true);
+          }
+        }
+        this.showEventPoint(sliceSelection)
+      });
+    },
     filterDataByType() {
-      this.listDataCopy = this.tableData.filter(item => {
-        return this.value === item.eventType
-      })
-      this.$emit('showEventPoint', this.listDataCopy)
+      this.listDataCopy = this.tableData.filter((item) => {
+        return this.value === item.eventType;
+      });
+      this.sliceTableAndRender()
     },
     getData() {
-      this.loading = true
+      this.loading = true;
       getHoloEventList({
         crossId: this.crossData.id,
-        "end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
-        "start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-'),
-      }).then(res => {
-        this.loading = false
-        this.$emit('showEventPoint', res.content)
-        this.tableData = res.content
-        this.listDataCopy = JSON.parse(JSON.stringify(this.tableData))
+        end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
+        start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
+      }).then((res) => {
+        this.loading = false;
+        this.tableData = res.content;
+        this.listDataCopy = JSON.parse(JSON.stringify(this.tableData));
         this.options = res.content.reduce((a, b) => {
           if (!a.includes(b.eventType)) {
-            a.push(b.eventType)
+            a.push(b.eventType);
           }
-          return a
-        }, [])
-      })
+          return a;
+        }, []);
+        this.sliceTableAndRender()
+      });
     },
     rowClick(row) {
-      mapTool.addPopupEvent(window.map, row)
+      mapTool.addPopupEvent(window.map, row);
     },
     getRowClassName(e) {
       if (e.rowIndex % 2 !== 0) {
@@ -159,8 +202,8 @@ export default {
         return "row-odd";
       }
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -170,7 +213,8 @@ export default {
   align-items: center;
 }
 
-::v-deep .el-range-input, ::v-deep .el-input__inner {
+::v-deep .el-range-input,
+::v-deep .el-input__inner {
   background-color: transparent;
   color: white;
 }

wj-smartcity/src/views/signal/msgs/right/detailComponents/queueLength.vue

@@ -205,8 +205,8 @@ export default {
         title,
         dataZoom: {
           type: "inside",
-          startValue: Object.keys(yDatas).length - 6,
-          endValue: Object.keys(yDatas).length - 1,
+          startValue: xData.length - 6,
+          endValue:xData.length-1,
         },
         tooltip: {
           enterable: true,
@@ -327,9 +327,9 @@ export default {
     renderTurn() {
       let filterData = this.allTurnData.filter(item => {
         return item.fRidDir === this.selectVal
-      })
+      }).reverse()
       let xData = filterData.reduce((a,b) => {
-        let time = new Date(b.windowEndTime).toLocaleTimeString()
+        let time = new Date(b.windowEndTime).toLocaleTimeString().slice(0,5)
         if(!a.includes(time)){
           a.push(time)
         }
@@ -361,8 +361,8 @@ export default {
         title,
         dataZoom: {
           type: "inside",
-          startValue: Object.keys(yDatas).length - 6,
-          endValue: Object.keys(yDatas).length - 1,
+          startValue: xData.length - 6,
+          endValue:xData.length-1,
         },
         color: colors,
         tooltip: {

wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficFlow.vue

@@ -229,8 +229,8 @@ export default {
         title,
         dataZoom: {
           type: "inside",
-          startValue: Object.keys(yDatas).length - 6,
-          endValue: Object.keys(yDatas).length - 1,
+          startValue: xData.length - 6,
+          endValue:xData.length-1,
         },
         color: this.colors,
         tooltip: {
@@ -378,8 +378,8 @@ export default {
         title,
         dataZoom: {
           type: "inside",
-          startValue: Object.keys(yDatas).length - 6,
-          endValue: Object.keys(yDatas).length - 1,
+          startValue: xData.length - 6,
+          endValue:xData.length-1,
         },
         color: [
           "rgba(24, 144, 255, 1)",
@@ -552,8 +552,8 @@ export default {
         title,
         dataZoom: {
           type: "inside",
-          startValue: Object.keys(yDatas).length - 6,
-          endValue: Object.keys(yDatas).length - 1,
+          startValue: xData.length - 6,
+          endValue:xData.length-1,
         },
         color: [
           "rgba(24, 144, 255, 1)",

wj-smartcity/src/views/signal/msgs/right/keyCross.vue

@@ -88,8 +88,8 @@ export default {
         title,
         dataZoom: {
           type: "inside",
-          startValue: Object.keys(this.chartResult).length - 6,
-          endValue: Object.keys(this.chartResult).length - 1,
+          startValue: this.xData.length - 6,
+          endValue:this.xData.length-1,
         },
         tooltip: {
           enterable: true,

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/mutLineChart.vue

@@ -179,17 +179,6 @@ export default {
         }
       });
     },
-    timeSetSort(time) {
-      // 使用 Set 进行去重
-      const uniqueTimeStrings = [...new Set(time)];
-      // 使用 sort 方法进行排序
-      const sortedTimeStrings = uniqueTimeStrings.sort((a, b) => {
-        const timeA = new Date(`2000-01-01 ${a}`);
-        const timeB = new Date(`2000-01-01 ${b}`);
-        return timeA - timeB;
-      });
-      return sortedTimeStrings;
-    },
     getChart(data) {
       const xData = [...new Set(data.map((item) => item.metricTime))];
       // const xData = metricsList.map((item) => item.metricTime);

wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue

@@ -8,11 +8,15 @@
     element-loading-background="rgba(0,0,0, 0.4)"
   >
     <div class="item-txt">详细指标查询</div>
-    <div class="content-container" style="flex: 1;display: flex;flex-direction: column">
-      <div class="forms" style="display: flex;">
+    <div
+      class="content-container"
+      style="flex: 1; display: flex; flex-direction: column"
+    >
+      <div class="forms" style="display: flex">
         <div class="select-box">
           <label class="custom-form-label">路口名称：</label>
           <el-select
+            style="margin-right: 10px"
             v-model="crossModel"
             placeholder="请选择路口"
             class="custom-form-input"
@@ -42,7 +46,7 @@
             </el-option>
           </el-select>
           <el-select
-              style="margin-left: 10px;"
+            style="margin-left: 10px"
             multiple
             collapse-tags
             v-model="scopeListModel"
@@ -94,16 +98,14 @@
       </div>
       <div class="line-chart noDataMsg" v-if="!indexModel">暂无数据</div>
       <div class="line-chart" ref="chartLine" v-else></div>
-
     </div>
-
   </div>
 </template>
 
 <script>
-import {bottomMenu, bottomCurve} from "@/common/api/signalEvaluation.js";
-import {formatDateTime} from "@/common/js/utils.js";
-import {getFontSize} from "@/config/holo/fontSize";
+import { bottomMenu, bottomCurve } from "@/common/api/signalEvaluation.js";
+import { formatDateTime } from "@/common/js/utils.js";
+import { getFontSize } from "@/config/holo/fontSize";
 
 export default {
   data() {
@@ -115,10 +117,10 @@ export default {
       scopeListModel: [],
       scopeListOption: [],
       scopeOption: [
-        {label: "路口", value: 0},
-        {label: "进口道", value: 1},
-        {label: "方向", value: 2},
-        {label: "车道", value: 3},
+        { label: "路口", value: 0 },
+        { label: "进口道", value: 1 },
+        { label: "方向", value: 2 },
+        { label: "车道", value: 3 },
       ],
       xData: [],
       treeModel: "",
@@ -127,9 +129,9 @@ export default {
       timeModel: 5,
       indexModel: "",
       timeOptions: [
-        {label: "5min", value: 5},
-        {label: "15min", value: 15},
-        {label: "30min", value: 30},
+        { label: "5min", value: 5 },
+        { label: "15min", value: 15 },
+        { label: "30min", value: 30 },
       ],
       // indexOptions: [
       //   { code: "1", name: "不停车通过率" },
@@ -144,31 +146,15 @@ export default {
         checkStrictly: true,
         multiple: true,
       },
-      treeData: [
-        {
-          value: "路口",
-          name: "路口",
-          children: [
-            {
-              value: "进口道",
-              name: "进口道",
-              children: [
-                {value: "东", name: "东"},
-                {value: "北", name: "北", children: []},
-              ],
-            },
-          ],
-        },
-      ],
       dirObj: {
-        "1": "北进口",
-        "2": "东北进口",
-        "3": "东进口",
-        "4": "东南进口",
-        "5": "南进口",
-        "6": "西南进口",
-        "7": "西进口",
-        "8": "西北进口",
+        1: "北进口",
+        2: "东北进口",
+        3: "东进口",
+        4: "东南进口",
+        5: "南进口",
+        6: "西南进口",
+        7: "西进口",
+        8: "西北进口",
       },
       turnObj: {
         u: "掉头",
@@ -180,8 +166,7 @@ export default {
     };
   },
   props: ["date", "detailApiData", "areaObj", "indexOption"],
-  mounted() {
-  },
+  mounted() {},
   watch: {
     date(val) {
       this.dateAll = [
@@ -198,7 +183,7 @@ export default {
       // this.indexModel = this.indexOption?.[
       // this.indexOption.length - 1
       //     ].metricName;
-      this.indexModel = '平均速度'
+      this.indexModel = "平均速度";
       this.crossOption = this.areaObj.crossList;
       if (this.crossOption.length) {
         this.crossModel = this.crossOption[0].crossId;
@@ -208,7 +193,6 @@ export default {
         ];
         this.initLineData();
       }
-
     },
     scopeChange() {
       this.scopeListModel = [];
@@ -242,7 +226,7 @@ export default {
       return data;
     },
     initLineData() {
-      if (!this.indexModel) return
+      if (!this.indexModel) return;
       this.detailedIndexLoading = true;
       bottomCurve({
         crossId: this.crossModel,
@@ -253,7 +237,7 @@ export default {
         startTime: this.dateAll[0],
         endTime: this.dateAll[1],
       }).then((res) => {
-        console.log('bottom data', res.data)
+        console.log("bottom data", res.data);
         this.detailedIndexLoading = false;
         if (res && res.data) {
           const data = res.data.content.map((item) => {
@@ -264,17 +248,6 @@ export default {
         }
       });
     },
-    timeSetSort(time) {
-      // 使用 Set 进行去重
-      const uniqueTimeStrings = [...new Set(time)];
-      // 使用 sort 方法进行排序
-      const sortedTimeStrings = uniqueTimeStrings.sort((a, b) => {
-        const timeA = new Date(`2000-01-01 ${a}`);
-        const timeB = new Date(`2000-01-01 ${b}`);
-        return timeA - timeB;
-      });
-      return sortedTimeStrings;
-    },
     getChart(data) {
       const xData = [...new Set(data.map((item) => item.metricTime))];
       // const xData = metricsList.map((item) => item.metricTime);
@@ -287,10 +260,20 @@ export default {
         objData[item.scopeName].push(item.value || 0);
       });
       const seriesData = [];
-      let colors = ['#00933a','#ff8200','#c0cfc5','#f5da3e',
-        '#5b45ff','#ed4438','#aceb2d','#5e6c52',
-        '#458fff','#c3b5f0','#9a5b67']
-      legendData.forEach((item,index) => {
+      let colors = [
+        "#00933a",
+        "#ff8200",
+        "#c0cfc5",
+        "#f5da3e",
+        "#5b45ff",
+        "#ed4438",
+        "#aceb2d",
+        "#5e6c52",
+        "#458fff",
+        "#c3b5f0",
+        "#9a5b67",
+      ];
+      legendData.forEach((item, index) => {
         seriesData.push({
           yAxisIndex: 0,
           name: item,
@@ -300,7 +283,7 @@ export default {
           showSymbol: false,
           lineStyle: {
             width: 2,
-            color: colors[index]
+            color: colors[index],
             // color: obj[item].color,
           },
           areaStyle: {
@@ -316,7 +299,7 @@ export default {
                 },
                 {
                   offset: 1,
-                    color: colors[index] , // 0% 处的颜色
+                  color: colors[index], // 0% 处的颜色
                 },
               ],
               false
@@ -330,7 +313,7 @@ export default {
         // color: colors,
         // color: colorList,
         legend: {
-          inactiveColor:'rgba(255,255,255,0.7)',
+          inactiveColor: "rgba(255,255,255,0.7)",
           right: 0,
           textStyle: {
             color: "rgba(255,255,255,0.9)",
@@ -342,17 +325,17 @@ export default {
           bottom: 0,
           left: 0,
           top: 40,
-          containLabel: true
+          containLabel: true,
         },
         tooltip: {
           trigger: "axis",
-          backgroundColor: 'rgba(0,0,0,0.8)',
+          backgroundColor: "rgba(0,0,0,0.8)",
           borderWidth: 0,
           textStyle: {
             fontSize: getFontSize(12),
-            color: 'white',
+            color: "white",
           },
-          confine:true
+          confine: true,
           // formatter: (params) => {
           //   return `${this.indexModel} : ${params[0].value}`;
           // },
@@ -365,7 +348,7 @@ export default {
             type: "category",
             boundaryGap: false,
             // prettier-ignore
-            data: xData
+            data: xData,
           },
           {
             type: "category",
@@ -383,9 +366,9 @@ export default {
             },
             splitLine: {
               lineStyle: {
-                color: 'rgba(255,255,255,0.2)'
-              }
-            }
+                color: "rgba(255,255,255,0.2)",
+              },
+            },
           },
           {
             type: "value",
@@ -394,9 +377,9 @@ export default {
             },
             splitLine: {
               lineStyle: {
-                color: 'rgba(255,255,255,0.2)'
-              }
-            }
+                color: "rgba(255,255,255,0.2)",
+              },
+            },
           },
         ],
         series: seriesData,