Skip to content

H
holo-web
Commit 53469680 authored by ninglx's avatar ninglx
Browse files
Options

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

parent e735e9b7
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 150 deletions
wj-smartcity/src/dao/optApi.js
View file @ 53469680
......@@ -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
View file @ 53469680
......@@ -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
View file @ 53469680
......@@ -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
View file @ 53469680
<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>
\ No newline at end of file
</style>
wj-smartcity/src/views/dataQueries/rightForm/snapshotData.vue
View file @ 53469680
......@@ -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
View file @ 53469680
......@@ -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
View file @ 53469680
......@@ -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
View file @ 53469680
<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()
});
},
......
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