nlx

wj-smartcity/src/common/api/signalEvaluation.js

@@ -20,6 +20,18 @@ export function crossList(data) {
         params: data
     })
 }
+
+// 1
+export function crossListSignal(data) {
+    return axios({
+        url: optBaseUrl + "/runningEvaluate/crossList",
+        method: 'post',
+        data: data
+        // url: "/holo/base-cross-info/list",
+        // method: 'get',
+        // params: data
+    })
+}
 //溢出情况
 export function spilloverStatus(data) {
     return axios({

wj-smartcity/src/components/Standard/cameraVideo.vue

 <template>
   <div class="cameraVideo">
     <video
-      @loadstart="loadstart($event)"
-      @canplay="canplay($event)"
-      class="videoControl"
-      muted
-      :id="ownVideoData.oid"
+        @loadstart="loadstart($event)"
+        @canplay="canplay($event)"
+        class="videoControl"
+        muted
+        :id="ownVideoData.oid"
     ></video>
     <div class="cameraTable">
       <el-table
           :data="tableData"
-          height="180PX"
+          height="100%"
           style="width: 100%;">
-        <el-table-column show-overflow-tooltip prop="channelName" label="通道名称" width="60"/>
-        <el-table-column show-overflow-tooltip prop="startTime" label="统计开始时间" width="80"/>
-        <el-table-column show-overflow-tooltip prop="laneNum" align="right" label="车道号" width="45"/>
-        <el-table-column show-overflow-tooltip prop="flowTypeDesc" align="right" label="车道类型" width="80"/>
-        <el-table-column show-overflow-tooltip prop="vehicleCount" align="right" label="车道总流量" width="80"/>
-        <el-table-column show-overflow-tooltip prop="straightCount" align="right" label="直行通道车辆数" width="90"/>
-        <el-table-column show-overflow-tooltip prop="leftCount" align="right" label="左转通道车辆数" width="90"/>
-        <el-table-column show-overflow-tooltip prop="rightCount" align="right" label="右转通道车辆数" width="90"/>
-        <el-table-column show-overflow-tooltip prop="turnCount" align="right" label="掉头通道车辆数" width="90"/>
-        <el-table-column show-overflow-tooltip prop="producer" label="厂商" width="50"/>
+        <el-table-column show-overflow-tooltip align="center" prop="channelName" label="通道名称" width="60"/>
+        <el-table-column show-overflow-tooltip align="center" prop="startTime" label="统计开始时间" width="80"/>
+        <el-table-column show-overflow-tooltip align="center" prop="laneNum" label="车道号" width="45"/>
+        <el-table-column show-overflow-tooltip align="center" prop="flowTypeDesc" label="车道类型" width="80"/>
+        <el-table-column show-overflow-tooltip align="center" prop="vehicleCount" label="车道总流量" width="80"/>
+        <el-table-column show-overflow-tooltip align="center" prop="straightCount" label="直行通道车辆数" width="90"/>
+        <el-table-column show-overflow-tooltip align="center" prop="leftCount" label="左转通道车辆数" width="90"/>
+        <el-table-column show-overflow-tooltip align="center" prop="rightCount" label="右转通道车辆数" width="90"/>
+        <el-table-column show-overflow-tooltip align="center" prop="turnCount" label="掉头通道车辆数" width="90"/>
+        <el-table-column show-overflow-tooltip align="center" prop="producer" label="厂商" width="50"/>
       </el-table>
+    </div>
+    <div class="pageContainer">
       <el-pagination
           @current-change="handleCurrentChange"
           :current-page.sync="paginationData.pageNum"
           :page-size="paginationData.pageSize"
-          layout=" prev, pager, next"
+          layout="prev, pager, next"
           :total="paginationData.total">
       </el-pagination>
     </div>
@@ -35,38 +37,40 @@
 </template>
 
 <script>
-import { equip_camera,api_getCameraTable } from "../../dao/situation";
+import {equip_camera, api_getCameraTable} from "../../dao/situation";
 import Videojs from "video.js";
 import "./videojs-flvjs-plugin";
+
 export default {
   name: "cameraVideo",
   props: ["videoData"],
   watch: {},
   data() {
     return {
+      distroyFlag: false,
       player: null,
-      ownVideoData:{},
+      ownVideoData: {},
       tableData: [],
-      paginationData:{
-        total:0,
-        pageNum:1,
-        pageSize:8,
+      paginationData: {
+        total: 0,
+        pageNum: 1,
+        pageSize: 8,
       },
     };
   },
   methods: {
-    handleCurrentChange(e){
+    handleCurrentChange(e) {
       this.paginationData.pageNum = e
       this.getCameraTable();
     },
-    getCameraTable(){
+    getCameraTable() {
       console.log(this.videoData);
       api_getCameraTable({
         "channelName": this.videoData.equipName,
         "pageNum": this.paginationData.pageNum,
         "pageSize": this.paginationData.pageSize
-      }).then(res=>{
-        if(res.code== 200){
+      }).then(res => {
+        if (res.code == 200) {
           this.tableData = res.content.rows
           this.paginationData.total = res.content.total
         }
@@ -75,12 +79,18 @@ export default {
     canplay() {
       this.$emit("vidCanplay", this.ownVideoData);
     },
-    loadstart() {},
-    loadVideo() {},
-    bindEvents() {},
-    handleErr() {},
-    pause() {},
+    loadstart() {
+    },
+    loadVideo() {
+    },
+    bindEvents() {
+    },
+    handleErr() {
+    },
+    pause() {
+    },
     destroy() {
+      this.distroyFlag = true
       if (this.player) {
         this.player.dispose();
         this.player = null;
@@ -142,7 +152,7 @@ export default {
             }, 100);
           });
         });
-      }, 0);
+      }, 100);
     }
     // flv
     else {
@@ -175,8 +185,7 @@ export default {
       }, 0);
     }
   },
-  computed: {
-  },
+  computed: {},
   beforeDestroy() {
     this.destroy();
   },
@@ -214,71 +223,92 @@ video {
     object-fit: fill;
   }
 }
-.cameraTable{
+
+.cameraTable {
   //position: absolute;
   //left: 100% ;
   //top: 0;
-  height: 100%;
+  height: calc(100% - 230PX);
   //width:50%;
-  overflow-x:auto;
+  overflow-x: auto;
   background: #0f2645;
-  border-left:1PX solid #037bb2;
+  border-left: 1PX solid #037bb2;
   margin-left: 1PX;
-  padding:10PX 20PX;
-  box-sizing:border-box;
-  z-index:1000;
+  padding: 10PX 20PX;
+  box-sizing: border-box;
+  z-index: 1000;
+
   ::v-deep .el-table__body tr.hover-row > td.el-table__cell {
     background-color: transparent !important;
   }
-  ::v-deep .el-table__body-wrapper{
+
+  ::v-deep .el-table__body-wrapper {
     z-index: 6
   }
-  ::v-deep .el-table{
+
+  ::v-deep .el-table {
     background: transparent;
-    &::before{
+
+    &::before {
       background: none;
       height: 0 !important;
     }
+
     tr:hover > td {
       background-color: transparent;
     }
-    td.el-table__cell{
-      border-bottom: 1PX solid rgba(255,255,255,.1) !important;
+
+    td.el-table__cell {
+      border-bottom: 1PX solid rgba(255, 255, 255, .1) !important;
     }
-    th{
+
+    th {
       text-align: center;
     }
-    th,td,tr{
+
+    th, td, tr {
       padding: 0;
       color: #fff;
       background: #0f2645;
     }
-    .cell{
+
+    .cell {
       padding-right: 0;
       padding-left: 5PX;
-      color:#fff;
+      color: #fff;
       font-size: 12PX;
     }
   }
 
-  ::v-deep .el-pagination{
+
+}
+
+.pageContainer {
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  ::v-deep .el-pagination {
     position: absolute;
     bottom: 0;
     display: flex;
     justify-content: center;
-    button:disabled,.el-pager li ,.btn-next, .btn-prev{
+
+    button:disabled, .el-pager li, .btn-next, .btn-prev {
       background: transparent;
-      color:rgba(255,255,255,.5);
+      color: rgba(255, 255, 255, .5);
       font-size: 12PX;
       width: 35PX;
       height: 28PX;
     }
 
-    .btn-next .el-icon, .btn-prev .el-icon{
+    .btn-next .el-icon, .btn-prev .el-icon {
       font-size: 12PX;
     }
-    .el-pager li.active{
-      color:#409EFF !important;
+
+    .el-pager li.active {
+      color: #409EFF !important;
     }
   }
 }
@@ -289,19 +319,24 @@ video {
   top: -14PX;
   transform: translateX(-50%);
 }
+
 ::v-deep .vjs-control-bar {
   display: none !important;
 }
+
 ::v-deep .vjs-big-play-button {
   display: none !important;
 }
+
 ::v-deep .vjs-control-text {
   display: none !important;
 }
-::v-deep .vjs-text-track-display{
+
+::v-deep .vjs-text-track-display {
   display: none !important;
 }
-::v-deep .vjs-modal-dialog{
+
+::v-deep .vjs-modal-dialog {
   display: none !important;
 }
 </style>

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

@@ -26,7 +26,6 @@ export default {
       setTimeout(()=>{
         this.$refs.rightForm.getData()
       },0)
-
     }
   }
 }

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

@@ -2,35 +2,35 @@
   <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"
+          @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 === '0'">
-        <RealTimeData ref="tab0" :crossData="crossData" />
+        <RealTimeData ref="tab0" :crossData="crossData"/>
       </div>
       <div class="tab-item" v-if="activeTab === '1'">
-        <cycle-data ref="tab1" :crossData="crossData" />
+        <cycle-data ref="tab1" :crossData="crossData"/>
       </div>
       <div class="tab-item" v-if="activeTab === '2'">
-        <snapshot-data ref="tab2" :crossData="crossData" />
+        <snapshot-data ref="tab2" :crossData="crossData"/>
       </div>
       <div class="tab-item" v-if="activeTab === '3'">
-        <event-data ref="tab3" :crossData="crossData" />
+        <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 RealTimeData from "@/views/dataQueries/rightForm/RealTimeData.vue";
 import CycleData from "@/views/dataQueries/rightForm/cycleData.vue";
 import SnapshotData from "@/views/dataQueries/rightForm/snapshotData.vue";
@@ -38,18 +38,19 @@ import EventData from "@/views/dataQueries/rightForm/eventData.vue";
 
 export default {
   name: "rightForm",
-  components: { RealTimeData,EventData, SnapshotData, CycleData },
+  components: {RealTimeData, EventData, SnapshotData, CycleData},
   props: ["crossData"],
   data() {
     return {
       activeTab: "0",
-      tabs: [{ 0: "实时数据" },{ 1: "周期数据" }, { 2: "快照数据" },
-      // { 3: "事件数据" }
-    ],
+      tabs: [{0: "实时数据"}, {1: "周期数据"}, {2: "快照数据"},
+        // { 3: "事件数据" }
+      ],
     };
   },
   computed: {},
-  mounted() {},
+  mounted() {
+  },
   methods: {
     clickTab(item) {
       // if(Object.keys(item)[0]==='3') return
@@ -60,9 +61,9 @@ export default {
       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(() => {

wj-smartcity/src/views/signal/mapPopup/equipmentPopup.vue

@@ -359,7 +359,7 @@ export default {
 
 .equip_camera {
   width: 800PX;
-  height: 500PX;
+  height: 475PX;
   overflow:hidden;
 
   .camera_header {
@@ -375,7 +375,8 @@ export default {
   }
 
   .camera_main {
-    height: 276PX;
+    //height: 276PX;
+    height: calc(100% - 43PX);
     border: 1PX solid #037bb2;
     //padding: 18PX;
     display: flex;

wj-smartcity/src/views/signalEvaluation/leftLists/components/crossRank.vue

@@ -62,7 +62,7 @@
 
 <script>
 import MsgCard from "@/components/Standard/msg-card.vue";
-import {crossList} from "@/common/api/signalEvaluation";
+import {crossList,crossListSignal} from "@/common/api/signalEvaluation";
 
 export default {
   name: 'crossRank',
@@ -87,7 +87,7 @@ export default {
       this.currentRowKey = null
     },
     getList() {
-      crossList({}).then(res => {
+      crossListSignal({}).then(res => {
         this.tableLoading = false;
         this.fullData = res.data.content.sort((a,b)=>{
           return b.congestionIndex - a.congestionIndex