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

@@ -2,10 +2,10 @@
   <div class="green-wave" ref="greenWave">
     <canvas id="waveCanvas"></canvas>
     <div
-        class="wave-item"
-        v-for="item in waveData"
-        :key="item.crossId"
-        style="width: 100%;"
+      class="wave-item"
+      v-for="item in waveData"
+      :key="item.crossId"
+      style="width: 100%"
     >
       <i class="item-icon"></i>
       <div class="item-title">
@@ -16,11 +16,11 @@
       </div>
       <div class="wave-phase-box">
         <div
-            :class="{ coordPhaseNo: phase.isCoordinate === 1 }"
-            class="wave-phase"
-            v-for="phase in item.greenwavePhaseList"
-            :key="phase.id"
-            :style="{
+          :class="{ coordPhaseNo: phase.isCoordinate === 1 }"
+          class="wave-phase"
+          v-for="phase in item.greenwavePhaseList"
+          :key="phase.id"
+          :style="{
             flex: phase.seconds / item.allCyclelen,
             display: phase.seconds === 0 ? 'none' : 'inline-block',
           }"
@@ -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="{
-                left:
-                  (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
-              }"
-            class="pointer-second"></span>
-<!--      </div>-->
+      <!--      <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>-->
       <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();
@@ -191,34 +201,35 @@ export default {
         if (data) {
           const startXEachSecondW = startDivRect.width / this.contentData.cycle;
           const startX =
-              startDivRect.left + startXEachSecondW * data[i].offsetToStart;
+            startDivRect.left + startXEachSecondW * data[i].offsetToStart;
           const startY = startDivRect.top;
           const endXEachSecondW = endDivRect.width / this.contentData.cycle;
           const endX =
-              endDivRect.left +
-              endXEachSecondW *
-              data[i === divs.length - 1 ? divs.length - 1 : i + 1].offsetToStart;
+            endDivRect.left +
+            endXEachSecondW *
+              data[i === divs.length - 1 ? divs.length - 1 : i + 1]
+                .offsetToStart;
           const endY = endDivRect.top;
           if (type === "f" || type === "r") {
             ctx.moveTo(startX, startY);
             ctx.lineTo(endX, endY);
           } else if (type === "fw") {
             ctx.moveTo(
-                startDivRect.left + startXEachSecondW * data[i].offsetToEnd,
-                startY
+              startDivRect.left + startXEachSecondW * data[i].offsetToEnd,
+              startY
             );
             ctx.lineTo(
-                endX + endXEachSecondW * this.contentData.forwardWidth,
-                endY
+              endX + endXEachSecondW * this.contentData.forwardWidth,
+              endY
             );
           } else if (type === "rw") {
             ctx.moveTo(
-                startX - startXEachSecondW * this.contentData.reverseWidth,
-                startY
+              startX - startXEachSecondW * this.contentData.reverseWidth,
+              startY
             );
             ctx.lineTo(
-                endX - endXEachSecondW * this.contentData.reverseWidth,
-                endY
+              endX - endXEachSecondW * this.contentData.reverseWidth,
+              endY
             );
           }
         }
@@ -297,18 +308,18 @@ export default {
         if (res.data) {
           const data = res.data.content;
           this.waveData[0].phaseData = this.waveData[1].phaseData = data.map(
-              (item, index) => {
-                item.phaseLen = 0;
-                this.timeAllKey.forEach((key) => {
-                  item.phaseLen += item[key];
-                });
-                this.allCyclelen += item.phaseLen;
-                return {
-                  phaseNo: item.phaseNo,
-                  phaseLen: item.phaseLen,
-                  coordPhaseNo: index,
-                };
-              }
+            (item, index) => {
+              item.phaseLen = 0;
+              this.timeAllKey.forEach((key) => {
+                item.phaseLen += item[key];
+              });
+              this.allCyclelen += item.phaseLen;
+              return {
+                phaseNo: item.phaseNo,
+                phaseLen: item.phaseLen,
+                coordPhaseNo: index,
+              };
+            }
           );
           setTimeout(() => {
             this.setGreenWaveLine();
@@ -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 {
@@ -417,7 +427,7 @@ export default {
     flex: 1;
     height: 30px;
     display: flex;
-     align-items: center;
+    align-items: center;
     width: 100%;
     // &:nth-child(2) {
     //   height: 105Px;
@@ -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/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);