Skip to content

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

wj-smartcity 快照周期转向导出接口联调

parent 9474a287
Hide whitespace changes
Inline Side-by-side
Showing with 795 additions and 626 deletions
wj-smartcity/src/dao/optApi.js
View file @ 76268767
......@@ -79,6 +79,21 @@ export const exportLane = (data) => request({
responseType: "blob",
})
// 周期 转向 导出
export const exportTurn = (data) => request({
url:`${baseUrl}/trend/periodTurnExcel`,
method: 'post',
data: data,
responseType: "blob",
})
export const exportSnapshot = (data) => request({
url:`${baseUrl}/trend/laneSnapshotExcel`,
method: 'post',
data: data,
responseType: "blob",
})
// 数据查询 车道快照指标
export const getLaneSnapshotIndex = (data) => request({
url:`${baseUrl}/trend/laneSnapshotIndex`,
......
wj-smartcity/src/views/dataQueries/rightForm/cycleData.vue
View file @ 76268767
<template>
<div class="full-w-h cycleDataContainer">
<div style="margin-bottom: 10px;margin-top: 10px" class="custom-form">
<div style="margin-bottom: 10px; margin-top: 10px" class="custom-form">
<label class="custom-form-label">时段选择： </label>
<el-date-picker
:clearable="false"
@change="getData"
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
:clearable="false"
@change="getData"
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<label class="custom-form-label">位置： </label>
<el-select @change="getData" style="margin-right: 10px" v-model="locationType1"
placeholder="请选择">
<el-select
@change="getData"
style="margin-right: 10px"
v-model="locationType1"
placeholder="请选择"
>
<el-option
v-for="item in locationOptions1"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in locationOptions1"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select style="margin-right: 10px" multiple collapse-tags @change="filterTable1" v-model="value1"
placeholder="请选择">
<el-select
style="margin-right: 10px"
multiple
collapse-tags
@change="filterTable1"
v-model="value1"
placeholder="请选择"
>
<el-option
v-for="item in options1"
:key="item"
:label="item"
:value="item">
v-for="item in options1"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
<div>（备注：{{ locationType1 === 'laneSort' ? '车道' : '转向' }}可多选）</div>
<div>
（备注：{{ locationType1 === "laneSort" ? "车道" : "转向" }}可多选）
</div>
<div class="rightExport" @click="exportLaneExcel()">导出</div>
</div>
<div style="margin-bottom: 10px" class="custom-table">
<el-table
ref="table"
v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
@row-click="rowClick"
:data="listDataCopy"
:row-class-name="getRowClassName"
style="width: 100%"
height="100%">
ref="table"
v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
@row-click="rowClick"
:data="listDataCopy"
:row-class-name="getRowClassName"
style="width: 100%"
height="100%"
>
<el-table-column
v-for="(it,index) of laneTableColumn"
:key="index"
:fixed="index===0"
align="center"
:width="index===0?'150':'auto'"
:prop="it.prop"
:label="it.label" show-overflow-tooltip>
v-for="(it, index) of laneTableColumn"
:key="index"
:fixed="index === 0"
align="center"
:width="index === 0 ? '150' : 'auto'"
:prop="it.prop"
:label="it.label"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row[it.prop]) }}
</template>
</el-table-column>
</el-table>
</div>
<div class="chartContainer">
<v-chart v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)" :option="option" autoresize>
<v-chart
v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)"
:option="option"
autoresize
>
</v-chart>
<el-select class="indexOptionSelector" multiple collapse-tags @change="filterIndexChange"
v-model="indexOptionValue"
placeholder="请选择">
<el-select
class="indexOptionSelector"
multiple
collapse-tags
@change="filterIndexChange"
v-model="indexOptionValue"
placeholder="请选择"
>
<el-option
v-for="item of computedLaneTableColumn"
:key="item.prop"
:label="item.label"
:value="item.prop">
v-for="item of computedLaneTableColumn"
:key="item.prop"
:label="item.label"
:value="item.prop"
>
</el-option>
</el-select>
</div>
</div>
</template>
<script>
import {noDataTitle} from "@/utils/chartStyle";
import {getFontSize} from "@/config/holo/fontSize";
import {getLanePeriodTurnData, getLaneTrafficIndex, exportLane} from "@/dao/optApi";
import {occupancyValue} from "../../../utils";
import { noDataTitle } from "@/utils/chartStyle";
import { getFontSize } from "@/config/holo/fontSize";
import {
getLanePeriodTurnData,
getLaneTrafficIndex,
exportLane,
exportTurn
} from "@/dao/optApi";
import { occupancyValue } from "../../../utils";
export default {
name: 'cycleData',
props: ['crossData'],
name: "cycleData",
props: ["crossData"],
data() {
return {
loading: true,
laneTableColumn: [],
locationType1: 'laneSort',
locationType1: "laneSort",
locationOptions1: [
{value: 'laneSort', label: '车道级'},
{value: 'turn', label: '转向级'},
{ value: "laneSort", label: "车道级" },
{ value: "turn", label: "转向级" },
],
value1: [],
options1: [],
indexOptionValue: [],
tabs: [
{'1': '周期数据'},
{'2': '快照数据'},
{'3': '事件数据'},
],
tabs: [{ 1: "周期数据" }, { 2: "快照数据" }, { 3: "事件数据" }],
listDataCopy: [],
dateTimeRange: [],
xData: [],
......@@ -117,209 +143,241 @@ export default {
tableData: [],
option: {},
laneTableColumn1: [
{label: '时间', prop: 'time'},
{label: '方向', prop: 'dirName'},
{label: '车道号', prop: 'laneSort'},
{label: '总流量', prop: 'allFlow'},
{label: '行人流量', prop: 'pedFlow'},
{label: '非机动车流量', prop: 'nonMotorFlow'},
{label: '小车流量', prop: 'trafficFlowC'},
{label: '中车流量', prop: 'trafficFlowB'},
{label: '大车流量', prop: 'trafficFlowA'},
{label: '平均速度', prop: 'speed'},
{label: '时间占有率', prop: 'timeOccupancy'},
{label: '平均车头时距', prop: 'vehheadTime'},
{label: '平均车身间距', prop: 'vehheadDist'},
{label: '85位速度', prop: 'v85'},
{label: '车辆总和', prop: 'allVehiceleFlow'},
{label: '平均空间占有率', prop: 'vehicleNumsRatioMean'},
{label: '最大排队长度', prop: 'queueLength'},
{label: '平均停车次数', prop: 'stopTimes'},
{label: '平均延误', prop: 'delayTime'},
{ label: "时间", prop: "time" },
{ label: "方向", prop: "dirName" },
{ label: "车道号", prop: "laneSort" },
{ label: "总流量", prop: "allFlow" },
{ label: "行人流量", prop: "pedFlow" },
{ label: "非机动车流量", prop: "nonMotorFlow" },
{ label: "小车流量", prop: "trafficFlowC" },
{ label: "中车流量", prop: "trafficFlowB" },
{ label: "大车流量", prop: "trafficFlowA" },
{ label: "平均速度", prop: "speed" },
{ label: "时间占有率", prop: "timeOccupancy" },
{ label: "平均车头时距", prop: "vehheadTime" },
{ label: "平均车身间距", prop: "vehheadDist" },
{ label: "85位速度", prop: "v85" },
{ label: "车辆总和", prop: "allVehiceleFlow" },
{ label: "平均空间占有率", prop: "vehicleNumsRatioMean" },
{ label: "最大排队长度", prop: "queueLength" },
{ label: "平均停车次数", prop: "stopTimes" },
{ label: "平均延误", prop: "delayTime" },
],
laneTableColumn2: [
{label: '时间', prop: 'windowEndTime'},
{label: '方向', prop: 'fRidDirTranslate'},
{label: '总流量', prop: 'allFlow'},
{label: '平均速度', prop: 'avgSpeed'},
{label: '左转流量', prop: 'flow1'},
{label: '左转车辆平均速度', prop: 'speed1'},
{label: '直行流量', prop: 'flow2'},
{label: '直行车辆平均速度', prop: 'speed2'},
{label: '右转流量', prop: 'flow3'},
{label: '右转车辆平均速度', prop: 'speed3'},
{ label: "时间", prop: "windowEndTime" },
{ label: "方向", prop: "fRidDirTranslate" },
{ label: "总流量", prop: "allFlow" },
{ label: "平均速度", prop: "avgSpeed" },
{ label: "左转流量", prop: "flow1" },
{ label: "左转车辆平均速度", prop: "speed1" },
{ label: "直行流量", prop: "flow2" },
{ label: "直行车辆平均速度", prop: "speed2" },
{ label: "右转流量", prop: "flow3" },
{ label: "右转车辆平均速度", prop: "speed3" },
],
includeIndex1: ['allFlow', 'allVehiceleFlow', 'delayTime', 'nonMotorFlow',
'pedFlow', 'queueLength', 'speed', 'stopTimes', 'timeOccupancy', 'trafficFlowA', 'trafficFlowB', 'trafficFlowC',
'v85', 'vehheadDist', 'vehheadTime', 'vehicleNumsRatioMean'
includeIndex1: [
"allFlow",
"allVehiceleFlow",
"delayTime",
"nonMotorFlow",
"pedFlow",
"queueLength",
"speed",
"stopTimes",
"timeOccupancy",
"trafficFlowA",
"trafficFlowB",
"trafficFlowC",
"v85",
"vehheadDist",
"vehheadTime",
"vehicleNumsRatioMean",
],
includeIndex2: ['flow1', 'flow2', 'flow3', 'speed1', 'speed2', 'speed3', 'allFlow', 'avgSpeed']
}
includeIndex2: [
"flow1",
"flow2",
"flow3",
"speed1",
"speed2",
"speed3",
"allFlow",
"avgSpeed",
],
};
},
computed: {
computedLaneTableColumn() {
if (this.locationType1 === 'laneSort') {
return this.laneTableColumn1.filter(item => {
return this.includeIndex1.includes(item.prop)
})
if (this.locationType1 === "laneSort") {
return this.laneTableColumn1.filter((item) => {
return this.includeIndex1.includes(item.prop);
});
} else {
return this.laneTableColumn2.filter(item => {
return this.includeIndex2.includes(item.prop)
})
return this.laneTableColumn2.filter((item) => {
return this.includeIndex2.includes(item.prop);
});
}
}
},
},
mounted() {
if (time_config.dataQuery_cycleTime) {
this.dateTimeRange = [
new Date(time_config.dataQuery_cycleTime[0]),
new Date(time_config.dataQuery_cycleTime[1])
new Date(time_config.dataQuery_cycleTime[1]),
];
} else {
this.dateTimeRange = [
new Date(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
),
new Date()
new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
new Date(),
];
}
if (this.crossData.crossId) {
this.getData()
this.getData();
}
},
methods: {
exportLaneExcel() {
// 车道级excel导出下载
if (this.locationType1 === 'laneSort') {
exportLane({
"crossId": this.crossData.crossId,
"end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
"start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-')
// "end": '2024-02-01 00:00:00',
// "start": '2024-02-01 10:00:00',
}).then(response => {
let blob = new Blob([response.data], {type: "application/x-xls"});
downloadFileExcel(response){
let blob = new Blob([response.data], { type: "application/x-xls" });
let a = document.createElement("a");
a.href = URL.createObjectURL(blob);
let fileName = response.headers['content-disposition'].split('=')[1]
fileName = decodeURI(fileName)
// fileName = fileName+'.xls'
let fileName = response.headers["content-disposition"].split("=")[1];
fileName = decodeURI(fileName);
a.download = fileName; //文件名称
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
})
},
exportLaneExcel() {
// 车道级excel导出下载
if (this.locationType1 === "laneSort") {
exportLane({
crossId: this.crossData.crossId,
end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
}).then((response) => {
this.downloadFileExcel(response)
});
}
// 转向级
else{
exportTurn({
crossId: this.crossData.crossId,
end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
}).then((response) => {
this.downloadFileExcel(response)
});
}
},
filterIndexChange() {
if (this.locationType1 === 'laneSort') {
this.renderFilterData1()
if (this.locationType1 === "laneSort") {
this.renderFilterData1();
} else {
this.renderFilterData2()
this.renderFilterData2();
}
},
occupancyValue,
initSelectAndFilterTable1() {
this.value1 = []
console.log('before sort...', this.tableData)
this.options1 = this.tableData.sort((a, b) => {
return Number(a.dir) - Number(b.dir)
}).reduce((a, b) => {
if (!a.includes(b.laneSort)) {
a.push(b.laneSort)
}
return a
}, [])
this.value1 = [];
console.log("before sort...", this.tableData);
this.options1 = this.tableData
.sort((a, b) => {
return Number(a.dir) - Number(b.dir);
})
.reduce((a, b) => {
if (!a.includes(b.laneSort)) {
a.push(b.laneSort);
}
return a;
}, []);
if (this.options1.length) {
this.value1.push(...this.options1)
this.value1.push(...this.options1);
}
this.filterTable1()
this.filterTable1();
},
initSelectAndFilterTable2() {
this.value1 = []
this.value1 = [];
this.options1 = this.tableData.reduce((a, b) => {
if (!a.includes(b.fRidDirTranslate)) {
a.push(b.fRidDirTranslate)
a.push(b.fRidDirTranslate);
}
return a
}, [])
return a;
}, []);
if (this.options1.length) {
// this.value1.push(this.options1[0])
this.value1.push(...this.options1)
this.value1.push(...this.options1);
}
this.filterTable1()
this.filterTable1();
},
filterTable1() {
if (this.locationType1 === 'laneSort') {
this.listDataCopy = this.tableData.filter(item => {
return this.value1.includes(item.laneSort)
})
if (this.locationType1 === "laneSort") {
this.listDataCopy = this.tableData.filter((item) => {
return this.value1.includes(item.laneSort);
});
// this.listDataCopy = this.tableData
this.renderFilterData1()
this.renderFilterData1();
} else {
this.listDataCopy = this.tableData.filter(item => {
return this.value1.includes(item.fRidDirTranslate)
})
this.listDataCopy = this.tableData.filter((item) => {
return this.value1.includes(item.fRidDirTranslate);
});
// this.listDataCopy = this.tableData
this.renderFilterData2()
this.renderFilterData2();
}
},
// 根据筛选后的数据渲染echarts
renderFilterData1() {
this.xData = this.listDataCopy.reduce((a, b) => {
if (!a.includes(b.time)) {
a.push(b.time)
a.push(b.time);
}
return a
}, [])
this.yDatas = []
return a;
}, []);
this.yDatas = [];
let yObj = this.listDataCopy.reduce((a, b) => {
for (let key in b) {
if (
this.includeIndex1.includes(key)
&& this.indexOptionValue.includes(key)
this.includeIndex1.includes(key) &&
this.indexOptionValue.includes(key)
) {
let wholeKey = `${b.laneSort}-${key}`
let wholeKey = `${b.laneSort}-${key}`;
if (a[wholeKey]) {
a[wholeKey].push(b[key])
a[wholeKey].push(b[key]);
} else {
a[wholeKey] = [b[key]]
a[wholeKey] = [b[key]];
}
}
}
return a
}, {})
return a;
}, {});
for (let key in yObj) {
this.yDatas.push({
name: key,
list: yObj[key]
})
list: yObj[key],
});
}
// ---
let title = {
show: false
}
show: false,
};
if (!this.xData.length) {
title = noDataTitle
title = noDataTitle;
}
let series = []
let selected = {}
let series = [];
let selected = {};
for (let [i, item] of this.yDatas.entries()) {
let valueArr = item.name.split('-')
let value = valueArr[valueArr.length - 1]
let realIndex = this.laneTableColumn.find(columnIndex => {
return columnIndex.prop === value
})?.label
let nameReal = item.name.replace(value, realIndex)
if (value !== 'allFlow') {
selected[nameReal] = false
let valueArr = item.name.split("-");
let value = valueArr[valueArr.length - 1];
let realIndex = this.laneTableColumn.find((columnIndex) => {
return columnIndex.prop === value;
})?.label;
let nameReal = item.name.replace(value, realIndex);
if (value !== "allFlow") {
selected[nameReal] = false;
}
series.push({
name: nameReal,
type: "line",
symbol: 'none',
symbol: "none",
smooth: true,
label: {
show: false,
......@@ -328,7 +386,7 @@ export default {
focus: "series",
},
data: item.list.reverse(),
})
});
}
this.option = {
title,
......@@ -336,11 +394,11 @@ export default {
type: "inside",
},
tooltip: {
backgroundColor: 'rgba(0,0,0,0.6)',
backgroundColor: "rgba(0,0,0,0.6)",
borderWidth: 0,
textStyle: {
fontSize: getFontSize(12),
color: 'white',
color: "white",
},
enterable: true,
trigger: "axis",
......@@ -350,9 +408,11 @@ export default {
for (let i = 0; i < params.length; i++) {
str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
}
return '<div style="max-height:200px;overflow-y:auto;padding: 2px 8px 2px 2px;">' +
str +
"</div>";
return (
'<div style="max-height:200px;overflow-y:auto;padding: 2px 8px 2px 2px;">' +
str +
"</div>"
);
}
},
axisPointer: {
......@@ -361,7 +421,7 @@ export default {
confine: true,
},
legend: {
inactiveColor: 'rgba(255,255,255,0.7)',
inactiveColor: "rgba(255,255,255,0.7)",
left: 0,
padding: [7, 200, 0, 0],
// selected,
......@@ -398,8 +458,8 @@ export default {
color: "rgba(126, 139, 166, 1)",
},
axisPointer: {
type: 'line'
}
type: "line",
},
},
yAxis: {
axisTick: {
......@@ -422,7 +482,7 @@ export default {
},
},
series: series,
}
};
// ---
},
......@@ -430,59 +490,59 @@ export default {
renderFilterData2() {
this.xData = this.listDataCopy.reduce((a, b) => {
if (!a.includes(b.windowEndTime)) {
a.push(b.windowEndTime)
a.push(b.windowEndTime);
}
return a
}, [])
this.yDatas = []
return a;
}, []);
this.yDatas = [];
let yObj = this.listDataCopy.reduce((a, b) => {
for (let key in b) {
if (
this.includeIndex2.includes(key)
&& this.indexOptionValue.includes(key)
this.includeIndex2.includes(key) &&
this.indexOptionValue.includes(key)
) {
let wholeKey = `${b.fRidDirTranslate}-${key}`
let wholeKey = `${b.fRidDirTranslate}-${key}`;
if (a[wholeKey]) {
a[wholeKey].push(b[key])
a[wholeKey].push(b[key]);
} else {
a[wholeKey] = [b[key]]
a[wholeKey] = [b[key]];
}
}
}
return a
}, {})
return a;
}, {});
for (let key in yObj) {
this.yDatas.push({
name: key,
list: yObj[key]
})
list: yObj[key],
});
}
console.log('yDatas', this.yDatas)
console.log("yDatas", this.yDatas);
// ---
let title = {
show: false
}
show: false,
};
if (!this.xData.length) {
title = noDataTitle
title = noDataTitle;
}
let series = []
let selected = {}
let series = [];
let selected = {};
for (let [i, item] of this.yDatas.entries()) {
// let nameReal = this.$store.state.dicts.Direction.find((item) => {
// return item.code == key;
// }).name
let value = item.name.split('-')[1]
let realIndex = this.laneTableColumn.find(columnIndex => {
return columnIndex.prop === value
})?.label
let nameReal = item.name.replace(value, realIndex)
if (value !== 'allFlow') {
selected[nameReal] = false
let value = item.name.split("-")[1];
let realIndex = this.laneTableColumn.find((columnIndex) => {
return columnIndex.prop === value;
})?.label;
let nameReal = item.name.replace(value, realIndex);
if (value !== "allFlow") {
selected[nameReal] = false;
}
series.push({
name: nameReal,
type: "line",
symbol: 'none',
symbol: "none",
smooth: true,
// areaStyle: {
// color: new echarts.graphic.LinearGradient(
......@@ -510,16 +570,16 @@ export default {
focus: "series",
},
data: item.list.reverse(),
})
});
}
this.option = {
title,
tooltip: {
backgroundColor: 'rgba(0,0,0,0.6)',
backgroundColor: "rgba(0,0,0,0.6)",
borderWidth: 0,
textStyle: {
fontSize: getFontSize(12),
color: 'white',
color: "white",
},
formatter: function (params) {
if (params && params.length) {
......@@ -527,9 +587,11 @@ export default {
for (let i = 0; i < params.length; i++) {
str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
}
return '<div style="max-height:200px;overflow-y:auto;padding: 2px 8px 2px 2px;">' +
str +
"</div>";
return (
'<div style="max-height:200px;overflow-y:auto;padding: 2px 8px 2px 2px;">' +
str +
"</div>"
);
}
},
enterable: true,
......@@ -540,7 +602,7 @@ export default {
confine: true,
},
legend: {
inactiveColor: 'rgba(255,255,255,0.7)',
inactiveColor: "rgba(255,255,255,0.7)",
padding: [7, 200, 0, 0],
left: 0,
// selected,
......@@ -577,8 +639,8 @@ export default {
color: "rgba(126, 139, 166, 1)",
},
axisPointer: {
type: 'line'
}
type: "line",
},
},
yAxis: {
axisTick: {
......@@ -601,90 +663,100 @@ export default {
},
},
series: series,
}
};
// ---
},
getData() {
this.loading = true
this.indexOptionValue = ['allFlow']
this.loading = true;
this.indexOptionValue = ["allFlow"];
let params = {
"crossId": this.crossData.crossId,
"end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
"start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-'),
"granularity": "1h"
}
crossId: this.crossData.crossId,
end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
granularity: "1h",
};
// 车道级数据
if (this.locationType1 === 'laneSort') {
this.laneTableColumn = this.laneTableColumn1
getLaneTrafficIndex(params).then(res => {
console.log('res1', res)
this.loading = false
this.tableData = res.content
this.tableData.map(item => {
item.dirName = this.$store.state.dicts.Direction.find(dict => {
return dict.code == item.dir
})?.name
})
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData))
this.initSelectAndFilterTable1()
if (this.locationType1 === "laneSort") {
this.laneTableColumn = this.laneTableColumn1;
getLaneTrafficIndex(params).then((res) => {
console.log("res1", res);
this.loading = false;
this.tableData = res.content;
this.tableData.map((item) => {
item.dirName = this.$store.state.dicts.Direction.find((dict) => {
return dict.code == item.dir;
})?.name;
});
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData));
this.initSelectAndFilterTable1();
this.$nextTick(() => {
this.$refs.table.doLayout()
})
})
this.$refs.table.doLayout();
});
});
}
// 转向级数据
else {
this.laneTableColumn = this.laneTableColumn2
getLanePeriodTurnData(params).then(res => {
console.log('转向级', res)
this.loading = false
this.laneTableColumn = this.laneTableColumn2;
getLanePeriodTurnData(params).then((res) => {
console.log("转向级", res);
this.loading = false;
this.tableData = res.content.reduce((a, b) => {
b.windowEndTime = b.windowEndTime.slice(0, 19)
let haveFlag = false
b.windowEndTime = b.windowEndTime.slice(0, 19);
let haveFlag = false;
for (let i = 0; i < a.length; i++) {
if (a[i].crossId === b.crossId && a[i].fRidDir === b.fRidDir && a[i].windowEndTime === b.windowEndTime) {
haveFlag = true
a[i][`flow${b.turnDirNo}`] = b.flow
a[i][`speed${b.turnDirNo}`] = b.speed
if (
a[i].crossId === b.crossId &&
a[i].fRidDir === b.fRidDir &&
a[i].windowEndTime === b.windowEndTime
) {
haveFlag = true;
a[i][`flow${b.turnDirNo}`] = b.flow;
a[i][`speed${b.turnDirNo}`] = b.speed;
}
}
if (!haveFlag) {
let externalObj = {}
externalObj[`flow${b.turnDirNo}`] = b.flow
externalObj[`speed${b.turnDirNo}`] = b.speed
let finalSinglaObj = Object.assign({}, b, externalObj)
delete finalSinglaObj.speed
a.push(finalSinglaObj)
let externalObj = {};
externalObj[`flow${b.turnDirNo}`] = b.flow;
externalObj[`speed${b.turnDirNo}`] = b.speed;
let finalSinglaObj = Object.assign({}, b, externalObj);
delete finalSinglaObj.speed;
a.push(finalSinglaObj);
}
return a
}, [])
return a;
}, []);
for (let i = 0; i < this.tableData.length; i++) {
this.tableData[i].allFlow = (this.tableData[i].flow1 || 0) + (this.tableData[i].flow2 || 0) + (this.tableData[i].flow3 || 0)
let speedNum = 0
this.tableData[i].allFlow =
(this.tableData[i].flow1 || 0) +
(this.tableData[i].flow2 || 0) +
(this.tableData[i].flow3 || 0);
let speedNum = 0;
for (let key in this.tableData[i]) {
if (key.includes('speed')) {
speedNum += 1
if (key.includes("speed")) {
speedNum += 1;
}
}
this.tableData[i].fRidDirTranslate = this.$store.state.dicts.Direction.find((item) => {
return item.code == this.tableData[i].fRidDir;
}).name
this.tableData[i].avgSpeed = (((this.tableData[i].speed1 || 0) + (this.tableData[i].speed2 || 0) + (this.tableData[i].speed3 || 0)) / speedNum).toFixed(2)
this.tableData[i].fRidDirTranslate =
this.$store.state.dicts.Direction.find((item) => {
return item.code == this.tableData[i].fRidDir;
}).name;
this.tableData[i].avgSpeed = (
((this.tableData[i].speed1 || 0) +
(this.tableData[i].speed2 || 0) +
(this.tableData[i].speed3 || 0)) /
speedNum
).toFixed(2);
}
console.log('this.tableData 转向', this.tableData)
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData))
this.initSelectAndFilterTable2()
console.log("this.tableData 转向", this.tableData);
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData));
this.initSelectAndFilterTable2();
this.$nextTick(() => {
this.$refs.table.doLayout()
})
})
this.$refs.table.doLayout();
});
});
}
},
rowClick(e) {
console.log('row', e)
console.log("row", e);
},
getRowClassName(e) {
if (e.rowIndex % 2 !== 0) {
......@@ -693,8 +765,8 @@ export default {
return "row-even";
}
},
}
}
},
};
</script>
<style lang="less" scoped>
......@@ -714,11 +786,11 @@ export default {
//table fixed 列样式 end
::v-deep .el-input__inner {
border: 1px solid rgba(90, 144, 238, 0.34);
color: white
color: white;
}
::v-deep .el-range-separator {
color: white
color: white;
}
label {
......@@ -779,4 +851,4 @@ label:first-child {
flex-direction: column;
padding: 0 10px;
}
</style>
\ No newline at end of file
</style>
wj-smartcity/src/views/dataQueries/rightForm/eventData.vue
View file @ 76268767
<template>
<div class="full-w-h eventDataContainer">
<div style="margin-bottom: 10px;margin-top: 10px" class="custom-form">
<div style="margin-bottom: 10px; margin-top: 10px" class="custom-form">
<label class="custom-form-label">时段选择： </label>
<el-date-picker
style="margin-right: 10px"
:clearable="false"
@change="getData"
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
style="margin-right: 10px"
:clearable="false"
@change="getData"
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<label class="custom-form-label">事件类型： </label>
<el-select class="custom-select" style="margin-right: 10px" v-model="eventTypeValue"
placeholder="请选择">
<el-select
class="custom-select"
style="margin-right: 10px"
v-model="eventTypeValue"
placeholder="请选择"
>
<el-option
v-for="item in eventTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in eventTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button @click="exportLaneExcel()" size="mini" type="primary" class="custom-export-button">导出</el-button>
<el-button
@click="exportLaneExcel()"
size="mini"
type="primary"
class="custom-export-button"
>导出</el-button
>
</div>
<div class="event-type">
<div class="table-title">
......@@ -31,86 +43,97 @@
</div>
<div class="custom-table-container">
<el-table
ref="table"
height="100%"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
:data="stopTableData"
:row-class-name="getRowClassName"
style="width: 100%">
<el-table-column
align="center"
label="序号" show-overflow-tooltip>
ref="table"
height="100%"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
:data="stopTableData"
:row-class-name="getRowClassName"
style="width: 100%"
>
<el-table-column align="center" label="序号" show-overflow-tooltip>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="停车类型" show-overflow-tooltip>
align="center"
label="停车类型"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="开始时间" show-overflow-tooltip>
align="center"
label="开始时间"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="结束时间" show-overflow-tooltip>
align="center"
label="结束时间"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="持续时长" show-overflow-tooltip>
align="center"
label="持续时长"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="位置" show-overflow-tooltip>
<el-table-column align="center" label="位置" show-overflow-tooltip>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="车辆类型" show-overflow-tooltip>
align="center"
label="车辆类型"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="车辆颜色" show-overflow-tooltip>
align="center"
label="车辆颜色"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="车牌类型" show-overflow-tooltip>
align="center"
label="车牌类型"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="车牌号码" show-overflow-tooltip>
align="center"
label="车牌号码"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="操作" show-overflow-tooltip>
<el-table-column align="center" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<a>回放</a>
</template>
......@@ -125,79 +148,88 @@
</div>
<div class="custom-table-container">
<el-table
ref="table"
height="100%"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
:data="overTableData"
:row-class-name="getRowClassName"
style="width: 100%">
<el-table-column
align="center"
label="序号" show-overflow-tooltip>
ref="table"
height="100%"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
:data="overTableData"
:row-class-name="getRowClassName"
style="width: 100%"
>
<el-table-column align="center" label="序号" show-overflow-tooltip>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="开始时间" show-overflow-tooltip>
align="center"
label="开始时间"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="结束时间" show-overflow-tooltip>
align="center"
label="结束时间"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="持续时长" show-overflow-tooltip>
align="center"
label="持续时长"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="位置" show-overflow-tooltip>
<el-table-column align="center" label="位置" show-overflow-tooltip>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="溢出区编号" show-overflow-tooltip>
align="center"
label="溢出区编号"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="溢出区车辆数" show-overflow-tooltip>
align="center"
label="溢出区车辆数"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="平均速度" show-overflow-tooltip>
align="center"
label="平均速度"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="空间占有率" show-overflow-tooltip>
align="center"
label="空间占有率"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row.xxx) }}
</template>
</el-table-column>
<el-table-column
align="center"
label="操作" show-overflow-tooltip>
<el-table-column align="center" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<a>回放</a>
</template>
......@@ -209,39 +241,37 @@
</template>
<script>
import {getHoloEventList, initLaneSort} from "@/dao/optApi";
import {occupancyValue} from "../../../utils";
import { getHoloEventList, initLaneSort } from "@/dao/optApi";
import { occupancyValue } from "../../../utils";
export default {
name: 'eventData',
name: "eventData",
data() {
return {
dateTimeRange: [],
eventTypeValue: '',
eventTypeValue: "",
eventTypeOptions: [
{value: '1', label: '停车事件'},
{value: '2', label: '溢出事件'},
{ value: "1", label: "停车事件" },
{ value: "2", label: "溢出事件" },
],
stopTableData: [],
overTableData: [],
}
};
},
mounted() {
if (time_config.dataQuery_snapshotTime) {
this.dateTimeRange = [
new Date(time_config.dataQuery_snapshotTime[0]),
new Date(time_config.dataQuery_snapshotTime[1])
new Date(time_config.dataQuery_snapshotTime[1]),
];
} else {
this.dateTimeRange = [
new Date(
new Date().setTime(new Date().getTime() - 1000 * 60 * 60)
),
new Date()
new Date(new Date().setTime(new Date().getTime() - 1000 * 60 * 60)),
new Date(),
];
}
if (this.crossData.crossId) {
this.getData()
this.getData();
}
},
methods: {
......@@ -271,13 +301,11 @@ export default {
getData() {
getHoloEventList({
crossId: this.crossData.id,
"end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
"start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-'),
}).then(res => {
console.log(
'event list...',res
)
})
end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
}).then((res) => {
console.log("event list...", res);
});
},
getRowClassName(e) {
if (e.rowIndex % 2 !== 0) {
......@@ -286,8 +314,8 @@ export default {
return "row-even";
}
},
}
}
},
};
</script>
<style lang="less" scoped>
......@@ -296,7 +324,7 @@ export default {
display: flex;
align-items: center;
position: relative;
.custom-export-button{
.custom-export-button {
position: absolute;
right: 0;
border-radius: 0;
......@@ -308,14 +336,14 @@ export default {
font-size: 14px;
height: 28px;
}
.custom-export-button:hover{
.custom-export-button:hover {
background-color: #355287;
}
}
::v-deep .el-input__inner {
border: 1px solid rgba(90, 144, 238, 0.34);
color: white
color: white;
}
.custom-form-label {
......@@ -343,19 +371,22 @@ export default {
width: 236px;
padding-left: 8px;
height: 100%;
background: linear-gradient(270deg, rgba(33, 209, 255, 0) 0%, rgba(0, 153, 255, 0.5) 100%);
background: linear-gradient(
270deg,
rgba(33, 209, 255, 0) 0%,
rgba(0, 153, 255, 0.5) 100%
);
display: flex;
align-items: center;
}
}
;
.custom-table-container {
flex: 1;
}
}
.eventDataContainer{
display: flex; flex-direction: column;
.eventDataContainer {
display: flex;
flex-direction: column;
padding: 0 10px;
}
</style>
\ No newline at end of file
</style>
wj-smartcity/src/views/dataQueries/rightForm/snapshotData.vue
View file @ 76268767
<template>
<div class="full-w-h snapshotDataContainer">
<div style="margin-bottom: 10px;margin-top: 10px" class="custom-form">
<div style="margin-bottom: 10px; margin-top: 10px" class="custom-form">
<label class="custom-form-label">时段选择： </label>
<el-date-picker
:clearable="false"
@change="getData()"
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
:clearable="false"
@change="getData()"
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<label class="custom-form-label">车道： </label>
<el-select class="custom-select" style="margin-right: 10px" multiple collapse-tags @change="lineChangeGetData()"
v-model="value1"
placeholder="请选择">
<el-select
class="custom-select"
style="margin-right: 10px"
multiple
collapse-tags
@change="lineChangeGetData()"
v-model="value1"
placeholder="请选择"
>
<el-option
v-for="item in options1"
:key="item.laneId"
:label="item.aliasName"
:value="item.laneId">
v-for="item in options1"
:key="item.laneId"
:label="item.aliasName"
:value="item.laneId"
>
</el-option>
</el-select>
<div class="custom-form-label">（备注：车道可多选）</div>
<div class="rightExport" @click="exportLaneExcel()">导出</div>
</div>
<div v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)" style="margin-bottom: 10px" class="custom-table">
<div
v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)"
style="margin-bottom: 10px"
class="custom-table"
>
<div class="custom-elTable">
<el-table
ref="table"
height="100%"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
@row-click="rowClick"
:data="listDataCopy"
:row-class-name="getRowClassName"
style="width: 100%">
ref="table"
height="100%"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
@row-click="rowClick"
:data="listDataCopy"
:row-class-name="getRowClassName"
style="width: 100%"
>
<el-table-column
:width="index===0?'150':'auto'"
:key="index"
v-for="(it,index) of laneTableColumn"
align="center"
:label="it.label" show-overflow-tooltip>
:width="index === 0 ? '150' : 'auto'"
:key="index"
v-for="(it, index) of laneTableColumn"
align="center"
:label="it.label"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ occupancyValue(scope.row[it.prop], it.prop) }}
</template>
......@@ -55,63 +70,93 @@
<div class="custom-nextPre">
<div>500 条/页</div>
<div>当前第 {{ currentPage + 1 }} 页</div>
<div @click="lineChangeGetData('pre')"><i class="el-icon-arrow-left"/> 上一页</div>
<div @click="lineChangeGetData('next')">下一页 <i class="el-icon-arrow-right"/></div>
<div @click="lineChangeGetData('pre')">
<i class="el-icon-arrow-left" /> 上一页
</div>
<div @click="lineChangeGetData('next')">
下一页 <i class="el-icon-arrow-right" />
</div>
</div>
</div>
<div class="chartContainer">
<v-chart v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)" :option="option" autoresize></v-chart>
<el-select class="indexOptionSelector" multiple collapse-tags @change="filterIndexChange"
v-model="indexOptionValue"
placeholder="请选择">
<v-chart
v-loading="loading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.4)"
:option="option"
autoresize
></v-chart>
<el-select
class="indexOptionSelector"
multiple
collapse-tags
@change="filterIndexChange"
v-model="indexOptionValue"
placeholder="请选择"
>
<el-option
v-for="item of computedLaneTableColumn"
:key="item.prop"
:label="item.label"
:value="item.prop">
v-for="item of computedLaneTableColumn"
:key="item.prop"
:label="item.label"
:value="item.prop"
>
</el-option>
</el-select>
</div>
</div>
</template>
<script>
import {noDataTitle} from "@/utils/chartStyle";
import {getFontSize} from "@/config/holo/fontSize";
import {exportLane, getLaneSnapshotIndex, initLaneSort} from "@/dao/optApi";
import {occupancyValue} from "../../../utils";
import { noDataTitle } from "@/utils/chartStyle";
import { getFontSize } from "@/config/holo/fontSize";
import {
exportLane,
getLaneSnapshotIndex,
initLaneSort,
exportSnapshot,
} from "@/dao/optApi";
import { occupancyValue } from "../../../utils";
export default {
name: 'snapshotData',
props: ['crossData'],
name: "snapshotData",
props: ["crossData"],
data() {
return {
currentPage: 0,
indexOptionValue: [],
loading: true,
laneTableColumn: [
{label: '时间', prop: 'time'},
{label: '方向', prop: 'dirName'},
{label: '车道号', prop: 'laneSort'},
{label: '排队长度', prop: 'queueLength'},
{label: '队首距离', prop: 'teamHeadDistance'},
{label: '队尾距离', prop: 'teamTailDistance'},
{label: '排队车辆数', prop: 'queueNums'},
{label: '车道内车辆数', prop: 'carNums'},
{label: '空间占有率', prop: 'vehicleLengthRatio'},
{label: '平均速度', prop: 'speed'},
{label: '车辆分布情况', prop: 'stdSpaceHeadway'},
{label: '头车速度', prop: 'headSpeed'},
{label: '末车速度', prop: 'mailSpeed'},
{label: '头车位置', prop: 'firstCarPosition'},
{label: '末车位置', prop: 'endCarPosition'},
{ label: "时间", prop: "time" },
{ label: "方向", prop: "dirName" },
{ label: "车道号", prop: "laneSort" },
{ label: "排队长度", prop: "queueLength" },
{ label: "队首距离", prop: "teamHeadDistance" },
{ label: "队尾距离", prop: "teamTailDistance" },
{ label: "排队车辆数", prop: "queueNums" },
{ label: "车道内车辆数", prop: "carNums" },
{ label: "空间占有率", prop: "vehicleLengthRatio" },
{ label: "平均速度", prop: "speed" },
{ label: "车辆分布情况", prop: "stdSpaceHeadway" },
{ label: "头车速度", prop: "headSpeed" },
{ label: "末车速度", prop: "mailSpeed" },
{ label: "头车位置", prop: "firstCarPosition" },
{ label: "末车位置", prop: "endCarPosition" },
],
includeIndex: [
"queueLength",
"teamHeadDistance",
"teamTailDistance",
"queueNums",
"carNums",
"vehicleLengthRatio",
"speed",
"stdSpaceHeadway",
"headSpeed",
"mailSpeed",
"firstCarPosition",
"endCarPosition",
],
includeIndex: ['queueLength', 'teamHeadDistance', 'teamTailDistance', 'queueNums', 'carNums', 'vehicleLengthRatio', 'speed',
'stdSpaceHeadway', 'headSpeed', 'mailSpeed', 'firstCarPosition', 'endCarPosition'],
value1: [],
options1: [],
listDataCopy: [],
......@@ -120,40 +165,40 @@ export default {
yDatas: [],
tableData: [],
finalXData: [],
}
};
},
computed: {
computedLaneTableColumn() {
return this.laneTableColumn.filter(item => {
return this.includeIndex.includes(item.prop)
})
return this.laneTableColumn.filter((item) => {
return this.includeIndex.includes(item.prop);
});
},
option() {
let title = {
show: false
}
show: false,
};
if (!this.finalXData.length) {
title = noDataTitle
title = noDataTitle;
}
let series = []
let selected = {}
console.log('1111111111', this.finalXData, this.yDatas)
let series = [];
let selected = {};
console.log("1111111111", this.finalXData, this.yDatas);
for (let [i, item] of this.yDatas.entries()) {
// let nameReal = this.$store.state.dicts.Direction.find((item) => {
// return item.code == key;
// }).name
let value = item.name.split('-')[2]
let realIndex = this.laneTableColumn.find(columnIndex => {
return columnIndex.prop === value
})?.label
let nameReal = item.name.replace(value, realIndex)
if (value !== 'allFlow') {
selected[nameReal] = false
let value = item.name.split("-")[2];
let realIndex = this.laneTableColumn.find((columnIndex) => {
return columnIndex.prop === value;
})?.label;
let nameReal = item.name.replace(value, realIndex);
if (value !== "allFlow") {
selected[nameReal] = false;
}
series.push({
name: nameReal,
type: "line",
symbol: 'none',
symbol: "none",
smooth: true,
// areaStyle: {
// color: new echarts.graphic.LinearGradient(
......@@ -181,7 +226,7 @@ export default {
focus: "series",
},
data: item.list.reverse(),
})
});
}
return {
title,
......@@ -189,11 +234,11 @@ export default {
type: "inside",
},
tooltip: {
backgroundColor: 'rgba(0,0,0,0.6)',
backgroundColor: "rgba(0,0,0,0.6)",
borderWidth: 0,
textStyle: {
fontSize: getFontSize(12),
color: 'white',
color: "white",
},
formatter: function (params) {
if (params && params.length) {
......@@ -201,9 +246,11 @@ export default {
for (let i = 0; i < params.length; i++) {
str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
}
return '<div style="max-height:200px;overflow-y:auto;background-color:rgba(0,0,0,0.6);color:white ">' +
str +
"</div>";
return (
'<div style="max-height:200px;overflow-y:auto;background-color:rgba(0,0,0,0.6);color:white ">' +
str +
"</div>"
);
}
},
enterable: true,
......@@ -214,7 +261,7 @@ export default {
confine: true,
},
legend: {
inactiveColor: 'rgba(255,255,255,0.7)',
inactiveColor: "rgba(255,255,255,0.7)",
// selected,
left: 0,
padding: [7, 200, 0, 0],
......@@ -249,9 +296,10 @@ export default {
axisLabel: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
}, axisPointer: {
type: 'line'
}
},
axisPointer: {
type: "line",
},
},
yAxis: {
axisTick: {
......@@ -274,131 +322,130 @@ export default {
},
},
series: series,
}
}
};
},
},
mounted() {
if (time_config.dataQuery_snapshotTime) {
this.dateTimeRange = [
new Date(time_config.dataQuery_snapshotTime[0]),
new Date(time_config.dataQuery_snapshotTime[1])
new Date(time_config.dataQuery_snapshotTime[1]),
];
} else {
this.dateTimeRange = [
new Date(
new Date().setTime(new Date().getTime() - 1000 * 60 * 60)
),
new Date()
new Date(new Date().setTime(new Date().getTime() - 1000 * 60 * 60)),
new Date(),
];
}
this.getData()
this.getData();
},
methods: {
downloadFileExcel(response) {
let blob = new Blob([response.data], { type: "application/x-xls" });
let a = document.createElement("a");
a.href = URL.createObjectURL(blob);
let fileName = response.headers["content-disposition"].split("=")[1];
fileName = decodeURI(fileName);
a.download = fileName; //文件名称
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
},
exportLaneExcel() {
// excel导出下载
// exportLane({
// "crossId": this.crossData.crossId,
// "end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
// "start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-')
// // "end": '2024-02-01 00:00:00',
// // "start": '2024-02-01 10:00:00',
// }).then(response => {
// let blob = new Blob([response.data], {type: "application/x-xls"});
// let a = document.createElement("a");
// a.href = URL.createObjectURL(blob);
// let fileName = response.headers['content-disposition'].split('=')[1]
// fileName = decodeURI(fileName)
// // fileName = fileName+'.xls'
// a.download = fileName; //文件名称
// a.style.display = "none";
// document.body.appendChild(a);
// a.click();
// a.remove();
// })
exportSnapshot({
crossId: this.crossData.crossId,
end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
laneId: this.value1.join(","),
}).then((response) => {
this.downloadFileExcel(response);
});
},
lineChangeGetData(isNextPage) {
this.loading = true
this.loading = true;
if (this.value1.length) {
this.indexOptionValue = ['queueLength']
this.indexOptionValue = ["queueLength"];
let params = {
"crossId": this.crossData.crossId,
"end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
"start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-'),
"laneId": this.value1.join(','),
}
let optionFlag = ''
crossId: this.crossData.crossId,
end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
laneId: this.value1.join(","),
};
let optionFlag = "";
if (isNextPage) {
if (isNextPage === 'pre') {
params = {...params, pageNum: this.currentPage - 1}
optionFlag = 'pre'
if (isNextPage === "pre") {
params = { ...params, pageNum: this.currentPage - 1 };
optionFlag = "pre";
} else {
params = {...params, pageNum: this.currentPage + 1}
optionFlag = 'next'
params = { ...params, pageNum: this.currentPage + 1 };
optionFlag = "next";
}
} else {
params = {...params, pageNum: 0}
params = { ...params, pageNum: 0 };
}
// 车道级数据
getLaneSnapshotIndex(params).then(res => {
console.log('res1快照', res)
this.loading = false
getLaneSnapshotIndex(params).then((res) => {
console.log("res1快照", res);
this.loading = false;
if (res.content && res.content.length) {
if (optionFlag === 'pre') {
this.currentPage -= 1
if (optionFlag === "pre") {
this.currentPage -= 1;
}
if (optionFlag === 'next') {
this.currentPage += 1
if (optionFlag === "next") {
this.currentPage += 1;
}
this.tableData = res.content.map(row => {
row.teamHeadDistance = row.teamHeadDistance < 0 ? '--' : row.teamHeadDistance
row.teamTailDistance = row.teamTailDistance < 0 ? '--' : row.teamTailDistance
row.dirName = this.$store.state.dicts.Direction.find(dict => {
return dict.code == row.dir
})?.name
return row
})
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData))
this.initSelectAndFilterTable1()
this.tableData = res.content.map((row) => {
row.teamHeadDistance =
row.teamHeadDistance < 0 ? "--" : row.teamHeadDistance;
row.teamTailDistance =
row.teamTailDistance < 0 ? "--" : row.teamTailDistance;
row.dirName = this.$store.state.dicts.Direction.find((dict) => {
return dict.code == row.dir;
})?.name;
return row;
});
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData));
this.initSelectAndFilterTable1();
this.$nextTick(() => {
this.$refs.table.doLayout()
})
this.$refs.table.doLayout();
});
} else {
let msg = ''
if (optionFlag === 'pre') {
msg = '已经是第一页'
let msg = "";
if (optionFlag === "pre") {
msg = "已经是第一页";
}
if (optionFlag === 'next') {
msg = '已经是最后一页'
if (optionFlag === "next") {
msg = "已经是最后一页";
}
if (msg) {
this.$message(msg)
this.$message(msg);
} else {
this.tableData = res.content
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData))
this.initSelectAndFilterTable1()
this.tableData = res.content;
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData));
this.initSelectAndFilterTable1();
this.$nextTick(() => {
this.$refs.table.doLayout()
})
this.$refs.table.doLayout();
});
}
}
})
});
} else {
this.loading = false
this.tableData = []
this.listDataCopy = []
this.initSelectAndFilterTable1()
this.loading = false;
this.tableData = [];
this.listDataCopy = [];
this.initSelectAndFilterTable1();
this.$nextTick(() => {
this.$refs.table.doLayout()
})
this.$refs.table.doLayout();
});
}
},
// getLaneName(aliasName){
// let [] aliasName.split('-')
// },
filterIndexChange() {
this.renderFilterData1()
this.renderFilterData1();
},
occupancyValue,
initSelectAndFilterTable1() {
......@@ -412,71 +459,75 @@ export default {
// if (this.options1.length) {
// this.value1.push(this.options1[0])
// }
this.filterTable1()
this.filterTable1();
},
filterTable1() {
this.listDataCopy = this.tableData.filter(item => {
return this.value1.includes(item.laneId)
})
this.renderFilterData1()
this.listDataCopy = this.tableData.filter((item) => {
return this.value1.includes(item.laneId);
});
this.renderFilterData1();
},
// 根据筛选后的数据渲染echarts
renderFilterData1() {
this.xData = this.listDataCopy.reduce((a, b) => {
// if (!a.includes(b.time)) {
a.push(b.time)
a.push(b.time);
// }
return a
}, [])
return a;
}, []);
this.yDatas = []
this.yDatas = [];
let yObj = this.listDataCopy.reduce((a, b) => {
for (let key in b) {
if (this.includeIndex.includes(key) && this.indexOptionValue.includes(key)) {
let wholeKey = `${b.dirName}-${b.laneSort}-${key}`
if (
this.includeIndex.includes(key) &&
this.indexOptionValue.includes(key)
) {
let wholeKey = `${b.dirName}-${b.laneSort}-${key}`;
if (a[wholeKey]) {
a[wholeKey].push(b[key])
a[wholeKey].push(b[key]);
} else {
a[wholeKey] = [b[key]]
a[wholeKey] = [b[key]];
}
}
}
return a
}, {})
return a;
}, {});
for (let key in yObj) {
this.yDatas.push({
name: key,
list: yObj[key]
})
list: yObj[key],
});
}
// 将x轴时间 等比例缩放为数据点数组长度
let xStart = this.xData[0]
let xEnd = this.xData[this.xData.length - 1]
let rangeAllTime = new Date(xEnd).getTime() - new Date(xStart).getTime()
let stepNum = this.xData.length / this.yDatas.length
let onStepTime = rangeAllTime / stepNum
console.log('range', rangeAllTime, stepNum, onStepTime)
this.finalXData = []
let xStart = this.xData[0];
let xEnd = this.xData[this.xData.length - 1];
let rangeAllTime = new Date(xEnd).getTime() - new Date(xStart).getTime();
let stepNum = this.xData.length / this.yDatas.length;
let onStepTime = rangeAllTime / stepNum;
console.log("range", rangeAllTime, stepNum, onStepTime);
this.finalXData = [];
for (let i = 0; i < stepNum; i++) {
this.finalXData.push(new Date((new Date(xStart).getTime() + onStepTime * i)).toLocaleString())
this.finalXData.push(
new Date(new Date(xStart).getTime() + onStepTime * i).toLocaleString()
);
}
},
getData() {
this.value1 = []
this.value1 = [];
if (this.crossData.crossId) {
// todo 获取当前路口所有车道 根据车道 getData
initLaneSort({crossId: this.crossData.crossId}).then(res => {
this.options1 = res.content
initLaneSort({ crossId: this.crossData.crossId }).then((res) => {
this.options1 = res.content;
for (let item of this.options1) {
this.value1.push(item.laneId)
this.value1.push(item.laneId);
}
this.lineChangeGetData()
})
this.lineChangeGetData();
});
}
},
rowClick(e) {
console.log('row', e)
console.log("row", e);
},
getRowClassName(e) {
if (e.rowIndex % 2 !== 0) {
......@@ -485,13 +536,13 @@ export default {
return "row-even";
}
},
}
}
},
};
</script>
<style lang="less" scoped>
.custom-select {
width: 280px
width: 280px;
}
.custom-form-label {
......@@ -500,11 +551,11 @@ export default {
::v-deep .el-input__inner {
border: 1px solid rgba(90, 144, 238, 0.34);
color: white
color: white;
}
::v-deep .el-range-separator {
color: white
color: white;
}
label {
......@@ -586,4 +637,4 @@ label:first-child {
flex-direction: column;
padding: 0 10px;
}
</style>
\ No newline at end of file
</style>
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