代码提交

wj-smartcity/src/dao/RealTimeData.js

+import request from '../utils/request'
+
+/*雷视车道事实数据*/
+export const analysisLanePage = (data) =>
+    request({
+        url: '/holo/analysis-realtime-data-lane/page',
+        method: 'post',
+        data: data
+    })
+/*雷视人行横道数据*/
+export const analysisZebraPage = (data) =>
+    request({
+        url: '/holo/analysis-realtime-data-zebra/page',
+        method: 'post',
+        data: data
+    })
+/*雷视行人等待区数据*/
+export const analysisWaitareaPage = (data) =>
+    request({
+        url: '/holo/analysis-realtime-data-waitarea/page',
+        method: 'post',
+        data: data
+    })
+/*雷视非机动车数据*/
+export const analysisNonmotorLanePage = (data) =>
+    request({
+        url: '/holo/analysis-realtime-data-nonmotor-lane/page',
+        method: 'post',
+        data: data
+    })

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

+<template>
+  <div class="full-w-h cycleDataContainer">
+    <div style="margin-bottom: 10px; margin-top: 10px" class="custom-form">
+      <label class="custom-form-label">时段选择： </label>
+      <el-date-picker
+          :clearable="false"
+          @change="dateChange"
+          v-model="dateTimeRange"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+      >
+      </el-date-picker>
+      <label class="custom-form-label">数据类型： </label>
+      <el-select
+          @change="changeTableTh"
+          style="margin-right: 10px"
+          v-model="locationType1"
+          placeholder="请选择"
+      >
+        <el-option
+            v-for="item in locationOptions1"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+      </el-select>
+    </div>
+    <div style="margin-bottom: 10px" class="custom-table">
+      <el-table
+          ref="table"
+          header-row-class-name="custom-table-header"
+          header-cell-class-name="custom-table-header-cell"
+          :data="tableData"
+          :row-class-name="getRowClassName"
+          style="width: 100%"
+          height="100%"
+      >
+        <el-table-column
+            v-for="(it, index) of laneTableColumn"
+            :key="index"
+            align="center"
+            :width="index === 0 ? '150' : 'auto'"
+            :prop="it.prop"
+            :label="it.label"
+            show-overflow-tooltip
+        >
+          <template slot-scope="{row}">
+            {{ occupancyValue(row[it.prop]) }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page.sync="paginationData.pageNum"
+          :page-size="paginationData.pageSize"
+          layout=" prev, pager, next"
+          :total="paginationData.total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import {occupancyValue} from "@/utils";
+import {analysisLanePage, analysisPage, analysisZebraPage} from "@/dao/RealTimeData";
+
+export default {
+  name: "RealTimeData",
+  props: ["crossData"],
+  data() {
+    return {
+      laneTableColumn: [],
+      locationType1: "1",
+      locationOptions1: [
+        { value: "1", label: "车道数据" },
+        { value: "2", label: "人行横道数据" },
+        { value: "3", label: "行人等待区数据" },
+        { value: "4", label: "非机动车数据" },
+        // { value: "5", label: "事件信息" },
+        // { value: "6", label: "30s车道数据" },
+        // { value: "7", label: "30s路口综合指标" },
+      ],
+      dateTimeRange: [],
+      tableData: [],
+      laneTableColumn1: [
+        { label: "数据曝光时间", prop: "expTime" },
+        { label: "数据生成时间", prop: "pdTime" },
+        { label: "厂商名称", prop: "producer" },
+        { label: "方向编号", prop: "laneDir" },
+        { label: "方向名称", prop: "laneDirDesc" },
+        { label: "车流类型", prop: "flowTypeDesc" },
+        { label: "静止车辆数", prop: "staticCount" },
+        { label: "运动车辆数", prop: "movingCount" },
+        { label: "车辆总数", prop: "count" },
+      ],
+      laneTableColumn2: [
+        { label: "数据曝光时间", prop: "expTime" },
+        { label: "数据生成时间", prop: "pdTime" },
+        { label: "厂商名称", prop: "producer" },
+        { label: "方向编号", prop: "zebraDir" },
+        { label: "方向名称", prop: "zebraDirDesc" },
+        { label: "行人数", prop: "zebraCount" },
+        { label: "进口行人数", prop: "zebraCountIn" },
+        { label: "出口行人数", prop: "zebraCountOut" },
+      ],
+      laneTableColumn3: [
+        { label: "数据曝光时间", prop: "expTime" },
+        { label: "数据生成时间", prop: "pdTime" },
+        { label: "厂商名称", prop: "producer" },
+        { label: "方向编号", prop: "waitDir" },
+        { label: "方向名称", prop: "waitDirDesc" },
+        { label: "行人等待数量", prop: "waitCount" },
+      ],
+      laneTableColumn4: [
+        { label: "数据曝光时间", prop: "expTime" },
+        { label: "数据生成时间", prop: "pdTime" },
+        { label: "厂商名称", prop: "producer" },
+        { label: "方向编号", prop: "nonMotorsDir" },
+        { label: "方向名称", prop: "nonMotorsDirDesc" },
+        { label: "非机动车数量", prop: "nonMotorsCount" },
+        { label: "非机动车排队", prop: "nonMotorsLength" },
+      ],
+      laneTableColumn5: [
+        { label: "数据曝光时间", prop: "time" },
+        { label: "数据生成时间", prop: "time" },
+        { label: "厂商名称", prop: "time" },
+        { label: "溢出方向", prop: "time" },
+        { label: "溢出状态", prop: "time" },
+        { label: "溢出原因", prop: "time" },
+      ],
+      laneTableColumn6: [
+        { label: "统计开始时间", prop: "time" },
+        { label: "数据曝光时间", prop: "time" },
+        { label: "数据生成时间", prop: "time" },
+        { label: "统计周期", prop: "time" },
+        { label: "厂商名称", prop: "time" },
+        { label: "方向", prop: "time" },
+        { label: "编号", prop: "time" },
+        { label: "车流类型", prop: "time" },
+        { label: "车流总数", prop: "time" },
+        { label: "左转流量", prop: "time" },
+        { label: "直行流量", prop: "time" },
+        { label: "右转流量", prop: "time" },
+        { label: "掉头流量", prop: "time" },
+        { label: "平均速度", prop: "time" },
+      ],
+      laneTableColumn7: [
+        { label: "统计开始时间", prop: "time" },
+        { label: "数据曝光时间", prop: "time" },
+        { label: "数据生成时间", prop: "time" },
+        { label: "统计周期", prop: "time" },
+        { label: "厂商名称", prop: "time" },
+        { label: "方向", prop: "time" },
+        { label: "非机动车数量(非机动车道)", prop: "time" },
+        { label: "非机动车数量(人行横道)", prop: "time" },
+        { label: "停车次数", prop: "time" },
+        { label: "平均速度", prop: "time" },
+      ],
+      paginationData:{
+        total:0,
+        pageNum:1,
+        pageSize:10,
+      },
+    };
+  },
+  created(){
+    this.laneTableColumn = this.laneTableColumn1
+  },
+  mounted() {
+    console.log(this.crossData);
+    // if (time_config.dataQuery_cycleTime) {
+    //   this.dateTimeRange = [
+    //     new Date(time_config.dataQuery_cycleTime[0]),
+    //     new Date(time_config.dataQuery_cycleTime[1]),
+    //   ];
+    // } else {
+    // }
+      this.dateTimeRange = [
+        new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
+        new Date(),
+      ];
+    if (this.crossData.crossId) {
+      this.getData();
+    }
+  },
+  methods: {
+    changeTableTh(){
+      this.laneTableColumn = this['laneTableColumn'+this.locationType1];
+      this.getData();
+    },
+    handleCurrentChange(e){
+      this.paginationData.pageNum = e
+      this.getData();
+    },
+    getData() {
+      let params = {
+        channelName:this.crossData.crossName,
+        // channelName:"龙鼎大道与龙翔路路口北向南",
+        endTime: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
+        startTime: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
+        // endTime: "2024-11-09 17:18:00",
+        // startTime: "2024-01-01 00:00:00",
+        pageNum: this.paginationData.pageNum,
+        pageSize: this.paginationData.pageSize,
+      };
+      if (this.locationType1 === "1") {
+        analysisLanePage(params).then((res) => {
+          console.log(res);
+          if(res.code==200){
+            this.tableData = res.content.rows;
+            this.paginationData.total = res.content.total;
+            this.$nextTick(() => {
+              this.$refs.table.doLayout();
+            });
+          }
+        });
+      }
+      else if (this.locationType1 === "2") {
+        analysisZebraPage(params).then((res) => {
+          console.log(res);
+          if(res.code==200){
+            this.tableData = res.content.rows;
+            this.paginationData.total = res.content.total;
+            this.$nextTick(() => {
+              this.$refs.table.doLayout();
+            });
+          }
+        });
+      }
+      else if (this.locationType1 === "3") {
+        analysisWaitareaPage(params).then((res) => {
+          console.log(res);
+          if(res.code==200){
+            this.tableData = res.content.rows;
+            this.paginationData.total = res.content.total;
+            this.$nextTick(() => {
+              this.$refs.table.doLayout();
+            });
+          }
+        });
+      }
+      else if (this.locationType1 === "4") {
+        analysisNonmotorLanePage(params).then((res) => {
+          console.log(res);
+          if(res.code==200){
+            this.tableData = res.content.rows;
+            this.paginationData.total = res.content.total;
+            this.$nextTick(() => {
+              this.$refs.table.doLayout();
+            });
+          }
+        });
+      }
+      /*else if (this.locationType1 === "5") {
+        analysisPage(params).then((res) => {
+          console.log(res);
+          this.tableData = res.content.rows;
+          this.paginationData.total = res.content.total;
+          this.$nextTick(() => {
+            this.$refs.table.doLayout();
+          });
+        });
+      }
+      else if (this.locationType1 === "6") {
+        analysisPage(params).then((res) => {
+          console.log(res);
+          this.tableData = res.content.rows;
+          this.paginationData.total = res.content.total;
+          this.$nextTick(() => {
+            this.$refs.table.doLayout();
+          });
+        });
+      }
+      else if (this.locationType1 === "7") {
+        analysisPage(params).then((res) => {
+          console.log(res);
+          this.tableData = res.content.rows;
+          this.paginationData.total = res.content.total;
+          this.$nextTick(() => {
+            this.$refs.table.doLayout();
+          });
+        });
+      }*/
+    },
+
+    occupancyValue,
+    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()
+    },
+    getRowClassName(e) {
+      if (e.rowIndex % 2 !== 0) {
+        return "row-odd";
+      } else {
+        return "row-even";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+//table fixed 列样式
+::v-deep .el-table__fixed::before {
+  height: 0;
+}
+
+::v-deep .el-table__fixed {
+  box-shadow: 0 0 0.52083vw rgba(255, 255, 255, 0.12);
+}
+
+::v-deep .el-table {
+  overflow: unset;
+}
+
+//table fixed 列样式 end
+::v-deep .el-input__inner {
+  border: 1px solid rgba(90, 144, 238, 0.34);
+  color: white;
+}
+
+::v-deep .el-range-separator {
+  color: white;
+}
+
+label {
+  margin-left: 10px;
+}
+
+label:first-child {
+  margin-left: 0;
+}
+
+.chartContainer {
+  flex: 1;
+  position: relative;
+
+  .indexOptionSelector {
+    position: absolute;
+    width: 180px;
+    right: 0;
+    top: 0;
+  }
+}
+
+.custom-form {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  .rightExport {
+    width: 78px;
+    height: 28px;
+    position: absolute;
+    right: 0;
+    border: none;
+    top: 50%;
+    font-size: 14px;
+    cursor: pointer;
+    letter-spacing: 1px;
+    background-color: rgba(41, 67, 114);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+  }
+
+  .rightExport:hover {
+    background-color: #355287;
+  }
+}
+
+.custom-table {
+  height: 600px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.cycleDataContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+}
+.custom-export-button {
+  position: absolute;
+  right: 0;
+  border-radius: 0;
+  background-color: #294372;
+  color: white;
+  letter-spacing: 1px;
+  border: none;
+  width: 78px;
+  font-size: 14px;
+  height: 28px;
+}
+.custom-export-button:hover {
+  background-color: #355287;
+}
+
+
+::v-deep .el-pagination{
+  position: absolute;
+  top: 650PX;
+  left: 0;
+  right: 0;
+  margin: auto;
+  button:disabled,.el-pager li ,.btn-next, .btn-prev{
+    background: transparent;
+    color:rgba(255,255,255,.5);
+    font-size: 12PX;
+    width: 35PX;
+    height: 28PX;
+  }
+
+  .btn-next .el-icon, .btn-prev .el-icon{
+    font-size: 12PX;
+  }
+  .el-pager li.active{
+    color:#409EFF !important;
+  }
+}
+</style>

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

@@ -11,6 +11,9 @@
       </div>
     </div>
     <div class="custom-tab-content">
+      <div class="tab-item" v-if="activeTab === '0'">
+        <RealTimeData ref="tab0" :crossData="crossData" />
+      </div>
       <div class="tab-item" v-if="activeTab === '1'">
         <cycle-data ref="tab1" :crossData="crossData" />
       </div>
@@ -28,18 +31,19 @@
 import { getLanePeriodTurnData, getLaneTrafficIndex } from "@/dao/optApi";
 import { noDataTitle } from "@/utils/chartStyle";
 import { getFontSize } from "@/config/holo/fontSize";
+import RealTimeData from "@/views/dataQueries/rightForm/RealTimeData.vue";
 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 },
+  components: { RealTimeData,EventData, SnapshotData, CycleData },
   props: ["crossData"],
   data() {
     return {
-      activeTab: "1",
-      tabs: [{ 1: "周期数据" }, { 2: "快照数据" }, 
+      activeTab: "0",
+      tabs: [{ 0: "实时数据" },{ 1: "周期数据" }, { 2: "快照数据" },
       // { 3: "事件数据" }
     ],
     };