wj-smartcity 修正绿波时间线问题 处理优化数据查询页面逻辑

wj-smartcity/src/dao/optApi.js

@@ -106,4 +106,10 @@ export const initLaneSort = (data) => request({
     url:`${baseUrl}/trend/laneIdList`,
     method:'post',
     data: data
+})
+// 事件查询 溢出事件
+export const overFlowEvent = (data) => request({
+    url:`${baseUrl}/trend/overFlowEvent`,
+    method:'post',
+    data: data
 })
\ No newline at end of file

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

@@ -4,7 +4,7 @@
       <label class="custom-form-label">时段选择： </label>
       <el-date-picker
         :clearable="false"
-        @change="getData"
+        @change="dateChange"
         v-model="dateTimeRange"
         type="datetimerange"
         range-separator="至"
@@ -243,6 +243,13 @@ export default {
     }
   },
   methods: {
+    dateChange(){
+      if(new Date(this.dateTimeRange[1]).getTime() - new Date(this.dateTimeRange[0]).getTime() > 30*24*60*60*1000){
+        this.$message('选择时段需小于30天')
+        return
+      }
+      this.getData()
+    },
     downloadFileExcel(response){
       let blob = new Blob([response.data], { type: "application/x-xls" });
           let a = document.createElement("a");

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

@@ -5,7 +5,7 @@
       <el-date-picker
         style="margin-right: 10px"
         :clearable="false"
-        @change="getData"
+        @change="dateChange"
         v-model="dateTimeRange"
         type="datetimerange"
         range-separator="至"
@@ -175,7 +175,7 @@
             show-overflow-tooltip
           >
             <template slot-scope="scope">
-              {{ occupancyValue(scope.row.time) }}
+              {{ occupancyValue(scope.row.startTime) }}
             </template>
           </el-table-column>
           <el-table-column
@@ -184,7 +184,7 @@
             show-overflow-tooltip
           >
             <template slot-scope="scope">
-              {{ occupancyValue(scope.row.xxx) }}
+              {{ occupancyValue(scope.row.endTime) }}
             </template>
           </el-table-column>
           <el-table-column
@@ -193,7 +193,7 @@
             show-overflow-tooltip
           >
             <template slot-scope="scope">
-              {{ occupancyValue(scope.row.xxx) }}
+              {{ occupancyValue(scope.row.duration) }}
             </template>
           </el-table-column>
           <el-table-column align="center" label="位置" show-overflow-tooltip>
@@ -211,7 +211,7 @@
             show-overflow-tooltip
           >
             <template slot-scope="scope">
-              {{ occupancyValue(scope.row.laneSort) }}
+              {{ occupancyValue(scope.row.dir) }}
             </template>
           </el-table-column>
           <el-table-column
@@ -257,6 +257,7 @@ import {
   getHoloEventList,
   initLaneSort,
   getLaneSnapshotIndex,
+  overFlowEvent,
 } from "@/dao/optApi";
 import { occupancyValue } from "../../../utils";
 
@@ -292,6 +293,17 @@ export default {
     }
   },
   methods: {
+    dateChange() {
+      if (
+        new Date(this.dateTimeRange[1]).getTime() -
+          new Date(this.dateTimeRange[0]).getTime() >
+        30 * 24 * 60 * 60 * 1000
+      ) {
+        this.$message("选择时段需小于30天");
+        return;
+      }
+      this.getData();
+    },
     exportLaneExcel() {
       if (!this.eventTypeValue) {
         this.$message("请选择要导出数据的事件类型");
@@ -334,15 +346,28 @@ export default {
         });
       });
       // 溢出事件
-      getLaneSnapshotIndex({
+      // getLaneSnapshotIndex({
+      //   crossId: this.crossData.crossId,
+      //   end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
+      //   start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
+      //   // end: '2024-06-24 18:00:00',
+      //   // start: '2024-06-24 00:00:00',
+      //   overFlow: true,
+      // }).then((res) => {
+      //   console.log("溢出 （复用快照", res);
+      //   this.overTableData = res.content.map((item, index) => {
+      //     item.index = index + 1;
+      //     return item;
+      //   });
+      // });
+      overFlowEvent({
         crossId: this.crossData.crossId,
         end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
-        start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
-        // end: '2024-06-24 18:00:00',
-        // start: '2024-06-24 00:00:00',
         overFlow: true,
+        pageNum: 0,
+        start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
       }).then((res) => {
-        console.log("溢出 （复用快照", res);
+        console.log("溢出事件", res);
         this.overTableData = res.content.map((item, index) => {
           item.index = index + 1;
           return item;

wj-smartcity/src/views/dataQueries/rightForm/index.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-tab-header">
-      <div @click="clickTab(item)" class="c-tab-item"
-           :class="`${activeTab===Object.keys(item)[0]?'active':''}`" v-for="item of tabs">{{
-          item[Object.keys(item)[0]]
-        }}
+      <div
+        @click="clickTab(item)"
+        class="c-tab-item"
+        :class="`${activeTab === Object.keys(item)[0] ? 'active' : ''}`"
+        v-for="item of tabs"
+      >
+        {{ item[Object.keys(item)[0]] }}
       </div>
     </div>
     <div class="custom-tab-content">
-      <div class="tab-item" v-if="activeTab==='1'">
-        <cycle-data ref="tab1" :crossData="crossData"/>
+      <div class="tab-item" v-if="activeTab === '1'">
+        <cycle-data ref="tab1" :crossData="crossData" />
       </div>
-      <div class="tab-item" v-if="activeTab==='2'">
-        <snapshot-data ref="tab2" :crossData="crossData"/>
+      <div class="tab-item" v-if="activeTab === '2'">
+        <snapshot-data ref="tab2" :crossData="crossData" />
       </div>
-      <div class="tab-item" v-if="activeTab==='3'">
-        <event-data ref="tab3" :crossData="crossData"/>
+      <div class="tab-item" v-if="activeTab === '3'">
+        <event-data ref="tab3" :crossData="crossData" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {getLanePeriodTurnData, getLaneTrafficIndex} from "@/dao/optApi";
-import {noDataTitle} from "@/utils/chartStyle";
-import {getFontSize} from "@/config/holo/fontSize";
+import { getLanePeriodTurnData, getLaneTrafficIndex } from "@/dao/optApi";
+import { noDataTitle } from "@/utils/chartStyle";
+import { getFontSize } from "@/config/holo/fontSize";
 import CycleData from "@/views/dataQueries/rightForm/cycleData.vue";
 import SnapshotData from "@/views/dataQueries/rightForm/snapshotData.vue";
 import EventData from "@/views/dataQueries/rightForm/eventData.vue";
 
 export default {
-  name: 'rightForm',
-  components: {EventData, SnapshotData, CycleData},
-  props: ['crossData'],
+  name: "rightForm",
+  components: { EventData, SnapshotData, CycleData },
+  props: ["crossData"],
   data() {
     return {
-      activeTab: '1',
-      tabs: [
-        {'1': '周期数据'},
-        {'2': '快照数据'},
-        // {'3': '事件数据'},
-      ],
-    }
+      activeTab: "1",
+      tabs: [{ 1: "周期数据" }, { 2: "快照数据" }, 
+      // { 3: "事件数据" }
+    ],
+    };
   },
   computed: {},
-  mounted() {
-  },
+  mounted() {},
   methods: {
-    clickTab(item){
+    clickTab(item) {
       // if(Object.keys(item)[0]==='3') return
-      this.activeTab=Object.keys(item)[0]
+      this.activeTab = Object.keys(item)[0];
     },
     getData() {
       let queue = [];
-      let needDicts = [
-        'Direction'
-      ];
+      let needDicts = ["Direction"];
       for (let item of needDicts) {
         queue.push(
-            this.$store.dispatch("QUERY_DICT", {
-              type: item,
-            })
+          this.$store.dispatch("QUERY_DICT", {
+            type: item,
+          })
         );
       }
       Promise.all(queue).then(() => {
-        this.$refs[`tab${this.activeTab}`].getData()
-      })
-
+        this.$refs[`tab${this.activeTab}`].getData();
+      });
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
-
 @import url("../../../assets/less/elementTable.less");
 
-::v-deep .el-input__inner, ::v-deep .el-range-input {
+::v-deep .el-input__inner,
+::v-deep .el-range-input {
   color: white;
   background-color: transparent;
 }
@@ -86,8 +82,7 @@ export default {
   height: 45px;
   display: flex;
   width: 100%;
-  background: linear-gradient( 90deg, #043A70 0%, rgba(4,59,113,0.2) 100%);
-
+  background: linear-gradient(90deg, #043a70 0%, rgba(4, 59, 113, 0.2) 100%);
 
   .c-tab-item {
     width: 140px;
@@ -99,9 +94,6 @@ export default {
     align-items: center;
     font-size: 16px;
   }
-  .c-tab-item:last-child{
-    //cursor: not-allowed;
-  }
 
   .active {
     background-color: #1f93ff;
@@ -118,6 +110,4 @@ export default {
     height: 100%;
   }
 }
-
-
-</style>
+</style>
\ No newline at end of file

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

@@ -4,7 +4,7 @@
       <label class="custom-form-label">时段选择： </label>
       <el-date-picker
         :clearable="false"
-        @change="getData()"
+        @change="dateChange"
         v-model="dateTimeRange"
         type="datetimerange"
         range-separator="至"
@@ -348,6 +348,13 @@ export default {
     this.getData();
   },
   methods: {
+    dateChange(){
+      if(new Date(this.dateTimeRange[1]).getTime() - new Date(this.dateTimeRange[0]).getTime() > 30*24*60*60*1000){
+        this.$message('选择时段需小于30天')
+        return
+      }
+      this.getData()
+    },
     downloadFileExcel(response) {
       let blob = new Blob([response.data], { type: "application/x-xls" });
       let a = document.createElement("a");

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

@@ -32,9 +32,7 @@
     <div
       class="time-run-dash"
       v-if="contentData.areaDetailFlag"
-      :style="{
-        left: (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
-      }"
+      :style="runLineStyle"
     >
       <div class="dash-line"></div>
       <div class="dash-secend">{{ contentData.pointerSecond }}s</div>
@@ -63,7 +61,6 @@
 </template>
 
 <script>
-import { api_phaseByTimeList } from "@/common/api/crossControl.js";
 import wsMixins from "@/common/mixin/wsMixins.js";
 
 export default {
@@ -110,27 +107,28 @@ export default {
   mounted() {
     console.log("contentData", this.contentData);
     this.getCrossWs(); //赋值第一路口的crossId
-    // this.contentData.pointerSecond = 235;
     this.timeInterval = setInterval(() => {
       if (this.contentData.pointerSecond < this.contentData.cycle) {
         ++this.contentData.pointerSecond;
       } else {
         this.contentData.pointerSecond = 0;
       }
-      // this.waveData = this.waveOldData.map((item) => {
-      //   let data = this.setSecondsData(
-      //     item.greenwavePhaseList,
-      //     this.contentData.pointerSecond
-      //   );
-      //   return {
-      //     ...item,
-      //     greenwavePhaseList: data,
-      //   };
-      // });
     }, 1000);
-    // this.getPhase();
     this.getData();
   },
+
+  computed: {
+    runLineStyle() {
+      if (document.getElementsByClassName("wave-phase-box")?.length) {
+        const div = document.getElementsByClassName("wave-phase-box")[0];
+        return `left: ${
+          (div.getBoundingClientRect().width / this.contentData.cycle) *
+            this.contentData.pointerSecond -
+          10
+        }px`;
+      }
+    },
+  },
   methods: {
     setItemHeight() {
       const boxHeight = this.$refs.greenWave.offsetHeight;
@@ -161,7 +159,6 @@ export default {
         }px`;
       });
       setTimeout(() => {
-        // this.draw();
         this.setGreenWaveLine();
       }, 1000);
     },
@@ -200,6 +197,11 @@ export default {
         }
         if (data) {
           const startXEachSecondW = startDivRect.width / this.contentData.cycle;
+          console.log(
+            "startXEachSecondW",
+            startXEachSecondW,
+            data[i].offsetToStart
+          );
           const startX =
             startDivRect.left + startXEachSecondW * data[i].offsetToStart;
           const startY = startDivRect.top;
@@ -247,29 +249,14 @@ export default {
         return item;
       });
       this.waveOldData = JSON.parse(JSON.stringify(this.waveData));
-      // this.waveData = this.waveOldData.map((item, index) => {
-      //   let data = this.setSecondsData(
-      //     item.greenwavePhaseList,
-      //     this.contentData.pointerSecond
-      //   );
-      //   return {
-      //     ...item,
-      //     greenwavePhaseList: data,
-      //   };
-      //   // item.greenwavePhaseList = JSON.parse(JSON.stringify(data));
-      //   // return item;
-      // });
       this.$nextTick(() => {
         this.setItemHeight();
       });
     },
     setSecondsData(datas, val) {
       const data = JSON.parse(JSON.stringify(datas));
-      // console.log(val);
-      // console.log(data);
       const dataIndex = data.length - 1;
       let index = 0;
-
       function contrastFun() {
         if (data[index].seconds >= val) {
           data[index].seconds -= val;
@@ -292,61 +279,11 @@ export default {
           }
         }
       }
-
       if (index <= dataIndex) {
         contrastFun();
       }
       return data;
     },
-
-    getPhase() {
-      const params = {
-        crossId: "12F6S08J7P0",
-        datetime: "2023-06-09 17:15:42",
-      };
-      api_phaseByTimeList(params).then((res) => {
-        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,
-              };
-            }
-          );
-          setTimeout(() => {
-            this.setGreenWaveLine();
-          }, 1000);
-        }
-      });
-    },
-    //爱心
-    draw() {
-      var canvas = document.getElementById("waveCanvas");
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-        //三次贝塞尔曲线
-        ctx.beginPath();
-        ctx.moveTo(75, 40);
-        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-        ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-        ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-        ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-        ctx.fillStyle = "rgb(247, 150,167)";
-        ctx.fill();
-      }
-    },
   },
 };
 </script>
@@ -381,8 +318,10 @@ export default {
       background-size: 100% 100%;
     }
     .dash-secend {
-      height: 20px;
-      line-height: 20px;
+      height: 23px;
+      line-height: 23px;
+      width: 20px;
+      background-color: #0f2645;
     }
   }
 

wj-smartcity/src/views/signal/msgs/left/cross.vue

@@ -257,7 +257,7 @@ export default {
       },
       kipActive: { name: "", type: null },
       radio: "",
-      loading: false,
+      loading: true,
     };
   },
   methods: {
@@ -317,6 +317,7 @@ export default {
         status: this.kipActive.type,
         type: null,
       }).then((res) => {
+        this.loading = false
         console.log("res right", res);
         if (res && res.code === 200) {
           const data = res.content;
@@ -397,6 +398,7 @@ export default {
         status: null,
         type: null,
       }).then((res) => {
+        this.loading = false
         if (res && res.code === 200) {
           const data = res.content;
           this.kipData = [

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

 <template>
   <msg-card class="item-keyCross" :title="`${crossName}监测`">
-    <div class="full-w-h" style="position: relative">
+    <div class="full-w-h" v-loading="loading"
+      element-loading-spinner="el-icon-loading"
+      element-loading-text="数据加载中..."
+      element-loading-background="rgba(3, 11, 25, 0.8)" style="position: relative">
       <div class="keyCrossTitle">排队长度(m)</div>
       <v-chart autoresize :option="option"/>
     </div>
@@ -22,7 +25,7 @@ export default {
   },
   data() {
     return {
-      tabsLoading: true,
+      loading: true,
       charts: {},
       xData:[],
       chartResult:{},
@@ -178,6 +181,7 @@ export default {
     getData(){
       // 13NF80B5QN0
       getKeyCross({crossId:''}).then(res=>{
+        this.loading = false
         console.log('key cross...',res)
         if(res.content){
           if(res.content.length){
@@ -235,7 +239,6 @@ export default {
       );
     }
     Promise.all(queue).then(() => {
-      this.fullscreenLoading = false;
       this.getData()
     });
   },