Commit 7764ca9d authored by ninglx's avatar ninglx

nlx

parent a71bc7d3
......@@ -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({
......
<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>
......@@ -26,7 +26,6 @@ export default {
setTimeout(()=>{
this.$refs.rightForm.getData()
},0)
}
}
}
......
......@@ -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(() => {
......
......@@ -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;
......
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment