Skip to content

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

wj-smartcity 济南反馈问题/展示内容统一修正提交，事件列表添加checkbox&展示逻辑修改，过长图表展示近六条等

parent c3a14e9b
Hide whitespace changes
Inline Side-by-side
Showing with 1036 additions and 866 deletions
wj-smartcity/src/views/dataQueries/rightForm/cycleData.vue
View file @ 3183856c
...@@ -153,7 +153,7 @@ export default { ...@@ -153,7 +153,7 @@ export default {
{ label: "中车流量", prop: "trafficFlowB" }, { label: "中车流量", prop: "trafficFlowB" },
{ label: "大车流量", prop: "trafficFlowA" }, { label: "大车流量", prop: "trafficFlowA" },
{ label: "平均速度", prop: "speed" }, { label: "平均速度", prop: "speed" },
{ label: "时间占有率", prop: "timeOccupancy" }, { label: "平均时间占有率", prop: "timeOccupancy" },
{ label: "平均车头时距", prop: "vehheadTime" }, { label: "平均车头时距", prop: "vehheadTime" },
{ label: "平均车身间距", prop: "vehheadDist" }, { label: "平均车身间距", prop: "vehheadDist" },
{ label: "85位速度", prop: "v85" }, { label: "85位速度", prop: "v85" },
......
wj-smartcity/src/views/dataQueries/rightForm/snapshotData.vue
View file @ 3183856c
...@@ -135,7 +135,7 @@ export default { ...@@ -135,7 +135,7 @@ export default {
{ label: "队尾距离", prop: "teamTailDistance" }, { label: "队尾距离", prop: "teamTailDistance" },
{ label: "排队车辆数", prop: "queueNums" }, { label: "排队车辆数", prop: "queueNums" },
{ label: "车道内车辆数", prop: "carNums" }, { label: "车道内车辆数", prop: "carNums" },
{ label: "空间占有率", prop: "vehicleLengthRatio" }, { label: "平均空间占有率", prop: "vehicleLengthRatio" },
{ label: "平均速度", prop: "speed" }, { label: "平均速度", prop: "speed" },
{ label: "车辆分布情况", prop: "stdSpaceHeadway" }, { label: "车辆分布情况", prop: "stdSpaceHeadway" },
{ label: "头车速度", prop: "headSpeed" }, { label: "头车速度", prop: "headSpeed" },
......
wj-smartcity/src/views/signal/dialogs/greenWave/crossKipData.vue
View file @ 3183856c
...@@ -50,7 +50,6 @@ export default { ...@@ -50,7 +50,6 @@ export default {
queue: "25", queue: "25",
time: "12", time: "12",
}, },
{name: "相城大道与南天成路", race: "91", queue: "25", time: "12"},
{ {
name: "相城大道与朱径支路", name: "相城大道与朱径支路",
race: "91", race: "91",
......
wj-smartcity/src/views/signal/dialogs/greenWave/greenWaveDetail.vue
View file @ 3183856c
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<div class="green-wave" ref="greenWave"> <div class="green-wave" ref="greenWave">
<canvas id="waveCanvas"></canvas> <canvas id="waveCanvas"></canvas>
<div <div
class="wave-item" class="wave-item"
v-for="item in waveData" v-for="item in waveData"
:key="item.crossId" :key="item.crossId"
style="width: 100%;" style="width: 100%"
> >
<i class="item-icon"></i> <i class="item-icon"></i>
<div class="item-title"> <div class="item-title">
...@@ -16,11 +16,11 @@ ...@@ -16,11 +16,11 @@
</div> </div>
<div class="wave-phase-box"> <div class="wave-phase-box">
<div <div
:class="{ coordPhaseNo: phase.isCoordinate === 1 }" :class="{ coordPhaseNo: phase.isCoordinate === 1 }"
class="wave-phase" class="wave-phase"
v-for="phase in item.greenwavePhaseList" v-for="phase in item.greenwavePhaseList"
:key="phase.id" :key="phase.id"
:style="{ :style="{
flex: phase.seconds / item.allCyclelen, flex: phase.seconds / item.allCyclelen,
display: phase.seconds === 0 ? 'none' : 'inline-block', display: phase.seconds === 0 ? 'none' : 'inline-block',
}" }"
...@@ -29,29 +29,33 @@ ...@@ -29,29 +29,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="time-run-dash" v-if="contentData.areaDetailFlag" :style="{ <div
left: class="time-run-dash"
(770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px', v-if="contentData.areaDetailFlag"
}"> :style="{
<div class="dash-line"> left: (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
}"
</div> >
<div class="dash-line"></div>
<div class="dash-secend">{{ contentData.pointerSecond }}s</div> <div class="dash-secend">{{ contentData.pointerSecond }}s</div>
</div> </div>
<div class="time-line" v-if="contentData.areaDetailFlag"> <div class="time-line" v-if="contentData.areaDetailFlag">
<!-- <div--> <!-- <div-->
<!-- class="line-pointer"--> <!-- class="line-pointer"-->
<!-- :style="{--> <!-- :style="{-->
<!-- left:--> <!-- left:-->
<!-- (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',--> <!-- (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',-->
<!-- }"--> <!-- }"-->
<!-- >--> <!-- >-->
<span style="position:absolute" :style="{ <span
left: style="position: absolute"
(770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px', :style="{
}" left:
class="pointer-second"></span> (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
<!-- </div>--> }"
class="pointer-second"
></span>
<!-- </div>-->
<span class="cycle-left">0s</span> <span class="cycle-left">0s</span>
<span class="cycle">{{ contentData.cycle }}s</span> <span class="cycle">{{ contentData.cycle }}s</span>
</div> </div>
...@@ -59,7 +63,7 @@ ...@@ -59,7 +63,7 @@
</template> </template>
<script> <script>
import {api_phaseByTimeList} from "@/common/api/crossControl.js"; import { api_phaseByTimeList } from "@/common/api/crossControl.js";
import wsMixins from "@/common/mixin/wsMixins.js"; import wsMixins from "@/common/mixin/wsMixins.js";
export default { export default {
...@@ -77,8 +81,8 @@ export default { ...@@ -77,8 +81,8 @@ export default {
"redFlashTime", "redFlashTime",
], ],
waveCoordPhaseData: [ waveCoordPhaseData: [
{second: 85, forward: 18, reverse: 20, width: 20}, { second: 85, forward: 18, reverse: 20, width: 20 },
{second: 85, forward: 38, reverse: 20, width: 20}, { second: 85, forward: 38, reverse: 20, width: 20 },
], ],
waveData: [ waveData: [
// { title: "相城大道与朱径支路交叉口", phaseData: [], speed: 52 }, // { title: "相城大道与朱径支路交叉口", phaseData: [], speed: 52 },
...@@ -104,7 +108,7 @@ export default { ...@@ -104,7 +108,7 @@ export default {
}, },
}, },
mounted() { mounted() {
console.log('contentData', this.contentData) console.log("contentData", this.contentData);
this.getCrossWs(); //赋值第一路口的crossId this.getCrossWs(); //赋值第一路口的crossId
// this.contentData.pointerSecond = 235; // this.contentData.pointerSecond = 235;
this.timeInterval = setInterval(() => { this.timeInterval = setInterval(() => {
...@@ -143,14 +147,19 @@ export default { ...@@ -143,14 +147,19 @@ export default {
// (item.distanceToNextCross / sum) * boxHeight + "px"; // (item.distanceToNextCross / sum) * boxHeight + "px";
// console.log((item.distanceToNextCross / sum) * boxHeight); // console.log((item.distanceToNextCross / sum) * boxHeight);
}); });
console.log(this.contentData.forwardGreenwaveList);
this.contentData.forwardGreenwaveList.forEach((item) => { this.contentData.forwardGreenwaveList.forEach((item) => {
item.offsetToEnd = item.offsetToStart + this.contentData.forwardWidth; item.offsetToEnd = item.offsetToStart + this.contentData.forwardWidth;
}); });
this.$nextTick(()=>{ this.$nextTick(() => {
document.getElementById("waveCanvas").style.left = `${document.getElementById('greenWaveDialog').getBoundingClientRect().left*-1}px` document.getElementById("waveCanvas").style.left = `${
document.getElementById("waveCanvas").style.top = `${document.getElementById('greenWaveDialog').getBoundingClientRect().top*-1}px` document.getElementById("greenWaveDialog").getBoundingClientRect()
}) .left * -1
}px`;
document.getElementById("waveCanvas").style.top = `${
document.getElementById("greenWaveDialog").getBoundingClientRect()
.top * -1
}px`;
});
setTimeout(() => { setTimeout(() => {
// this.draw(); // this.draw();
this.setGreenWaveLine(); this.setGreenWaveLine();
...@@ -180,6 +189,7 @@ export default { ...@@ -180,6 +189,7 @@ export default {
} else { } else {
endDiv = divs[i + 1]; endDiv = divs[i + 1];
} }
console.log("draw line...", startDiv, endDiv);
// 获取 div 元素的位置和大小信息 // 获取 div 元素的位置和大小信息
const startDivRect = startDiv.getBoundingClientRect(); const startDivRect = startDiv.getBoundingClientRect();
const endDivRect = endDiv.getBoundingClientRect(); const endDivRect = endDiv.getBoundingClientRect();
...@@ -191,34 +201,35 @@ export default { ...@@ -191,34 +201,35 @@ export default {
if (data) { if (data) {
const startXEachSecondW = startDivRect.width / this.contentData.cycle; const startXEachSecondW = startDivRect.width / this.contentData.cycle;
const startX = const startX =
startDivRect.left + startXEachSecondW * data[i].offsetToStart; startDivRect.left + startXEachSecondW * data[i].offsetToStart;
const startY = startDivRect.top; const startY = startDivRect.top;
const endXEachSecondW = endDivRect.width / this.contentData.cycle; const endXEachSecondW = endDivRect.width / this.contentData.cycle;
const endX = const endX =
endDivRect.left + endDivRect.left +
endXEachSecondW * endXEachSecondW *
data[i === divs.length - 1 ? divs.length - 1 : i + 1].offsetToStart; data[i === divs.length - 1 ? divs.length - 1 : i + 1]
.offsetToStart;
const endY = endDivRect.top; const endY = endDivRect.top;
if (type === "f" || type === "r") { if (type === "f" || type === "r") {
ctx.moveTo(startX, startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY); ctx.lineTo(endX, endY);
} else if (type === "fw") { } else if (type === "fw") {
ctx.moveTo( ctx.moveTo(
startDivRect.left + startXEachSecondW * data[i].offsetToEnd, startDivRect.left + startXEachSecondW * data[i].offsetToEnd,
startY startY
); );
ctx.lineTo( ctx.lineTo(
endX + endXEachSecondW * this.contentData.forwardWidth, endX + endXEachSecondW * this.contentData.forwardWidth,
endY endY
); );
} else if (type === "rw") { } else if (type === "rw") {
ctx.moveTo( ctx.moveTo(
startX - startXEachSecondW * this.contentData.reverseWidth, startX - startXEachSecondW * this.contentData.reverseWidth,
startY startY
); );
ctx.lineTo( ctx.lineTo(
endX - endXEachSecondW * this.contentData.reverseWidth, endX - endXEachSecondW * this.contentData.reverseWidth,
endY endY
); );
} }
} }
...@@ -297,18 +308,18 @@ export default { ...@@ -297,18 +308,18 @@ export default {
if (res.data) { if (res.data) {
const data = res.data.content; const data = res.data.content;
this.waveData[0].phaseData = this.waveData[1].phaseData = data.map( this.waveData[0].phaseData = this.waveData[1].phaseData = data.map(
(item, index) => { (item, index) => {
item.phaseLen = 0; item.phaseLen = 0;
this.timeAllKey.forEach((key) => { this.timeAllKey.forEach((key) => {
item.phaseLen += item[key]; item.phaseLen += item[key];
}); });
this.allCyclelen += item.phaseLen; this.allCyclelen += item.phaseLen;
return { return {
phaseNo: item.phaseNo, phaseNo: item.phaseNo,
phaseLen: item.phaseLen, phaseLen: item.phaseLen,
coordPhaseNo: index, coordPhaseNo: index,
}; };
} }
); );
setTimeout(() => { setTimeout(() => {
this.setGreenWaveLine(); this.setGreenWaveLine();
...@@ -358,18 +369,18 @@ export default { ...@@ -358,18 +369,18 @@ export default {
//height: 100%; //height: 100%;
pointer-events: none; pointer-events: none;
} }
.time-run-dash{ .time-run-dash {
position: absolute; position: absolute;
padding-left: 196px; padding-left: 196px;
height: 100%; height: 100%;
width: 206px; width: 206px;
.dash-line{ .dash-line {
height: calc(100% - 20px); height: calc(100% - 20px);
width: 23px; width: 23px;
background-image: url("../../../../assets/images/signal/line-pointer.png"); background-image: url("../../../../assets/images/signal/line-pointer.png");
background-size: 100% 100%; background-size: 100% 100%;
} }
.dash-secend{ .dash-secend {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
} }
...@@ -403,7 +414,6 @@ export default { ...@@ -403,7 +414,6 @@ export default {
width: 24px; width: 24px;
//height: 300px; //height: 300px;
height: 240px; height: 240px;
} }
.pointer-second { .pointer-second {
...@@ -417,7 +427,7 @@ export default { ...@@ -417,7 +427,7 @@ export default {
flex: 1; flex: 1;
height: 30px; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
// &:nth-child(2) { // &:nth-child(2) {
// height: 105Px; // height: 105Px;
...@@ -431,7 +441,8 @@ export default { ...@@ -431,7 +441,8 @@ export default {
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 17px; height: 17px;
background: url("../../../../assets/images/dialogImg/wave-icon.png") no-repeat; background: url("../../../../assets/images/dialogImg/wave-icon.png")
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
......
wj-smartcity/src/views/signal/msgs/bottomComponents/eventComp.vue
View file @ 3183856c
<template> <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-form"> <div class="custom-form">
<label class="custom-form-label">事件类型： </label> <label class="custom-form-label">事件类型： </label>
<el-select highlight-current-row style="width: 120px;margin-right: 10px" @change="filterDataByType" <el-select
v-model="value" highlight-current-row
placeholder="请选择"> style="width: 120px; margin-right: 10px"
@change="filterDataByType"
v-model="value"
placeholder="请选择"
>
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item" :key="item"
:label="$store.state.dicts.EventType.find((it) => { :label="
$store.state.dicts.EventType.find((it) => {
return it.code == item; return it.code == item;
})?.name || item" })?.name || item
:value="item"> "
:value="item"
>
</el-option> </el-option>
</el-select> </el-select>
<label class="custom-form-label">时段选择： </label> <label class="custom-form-label">时段选择： </label>
<el-date-picker <el-date-picker
@change="getData" @change="getData"
v-model="dateTimeRange" v-model="dateTimeRange"
type="datetimerange" type="datetimerange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期"> end-placeholder="结束日期"
>
</el-date-picker> </el-date-picker>
</div> </div>
<el-table <el-table
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-text="数据加载中..." element-loading-text="数据加载中..."
element-loading-background="rgba(3, 11, 25, 0.8)" element-loading-background="rgba(3, 11, 25, 0.8)"
v-loading="loading" v-loading="loading"
cell-class-name="custom-table-cell" cell-class-name="custom-table-cell"
header-row-class-name="custom-table-header" header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell" header-cell-class-name="custom-table-header-cell"
@row-click="rowClick" @row-click="rowClick"
:data="listDataCopy" :data="listDataCopy"
:row-class-name="getRowClassName" ref="multipleTable"
style="width: 100%;flex:1" :row-class-name="getRowClassName"
height="100%"> style="width: 100%; flex: 1"
<!-- <el-table-column--> height="100%"
<!-- show-overflow-tooltip--> @selection-change="handleSelectionChange"
<!-- align="center"--> >
<!-- label="事件编号">--> <!-- <el-table-column-->
<!-- <template slot-scope="scope">{{ occupancyValue(scope.row.eventId) }}</template>--> <!-- show-overflow-tooltip-->
<!-- </el-table-column>--> <!-- align="center"-->
<el-table-column width="100" align="center" label="事件编号" <!-- label="事件编号">-->
type="index"> <!-- <template slot-scope="scope">{{ occupancyValue(scope.row.eventId) }}</template>-->
<!-- </el-table-column>-->
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column width="100" align="center" label="事件编号" type="index">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="eventType" prop="eventType"
align="center" align="center"
label="事件类型" label="事件类型"
show-overflow-tooltip> show-overflow-tooltip
<template slot-scope="scope">{{ translateDict(scope.row.eventType, 'EventType') }}</template> >
<template slot-scope="scope">{{
translateDict(scope.row.eventType, "EventType")
}}</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="startTime" prop="startTime"
align="center" align="center"
label="时间" label="时间"
show-overflow-tooltip> show-overflow-tooltip
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" label="位置" show-overflow-tooltip>
align="center" <template slot-scope="scope">{{
label="位置" occupancyValue(scope.row.placeDesc)
show-overflow-tooltip> }}</template>
<template slot-scope="scope">{{ occupancyValue(scope.row.placeDesc) }}</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" label="备注" show-overflow-tooltip>
align="center" <template slot-scope="scope">{{
label="备注" occupancyValue(scope.row.remark)
show-overflow-tooltip> }}</template>
<template slot-scope="scope">{{ occupancyValue(scope.row.remark) }}</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -77,80 +90,110 @@ ...@@ -77,80 +90,110 @@
<script> <script>
import Vue from "vue"; import Vue from "vue";
import * as mapTool from '@/utils/mapboxTools' import * as mapTool from "@/utils/mapboxTools";
import {getHoloEventList} from "@/dao/optApi"; import { getHoloEventList } from "@/dao/optApi";
import {occupancyValue} from "@/utils"; import { occupancyValue } from "@/utils";
import eventPopupVue from "../../mapPopup/eventPopup.vue"; import eventPopupVue from "../../mapPopup/eventPopup.vue";
const EventPopupVue = Vue.extend(eventPopupVue); const EventPopupVue = Vue.extend(eventPopupVue);
export default { export default {
name: 'eventComp', name: "eventComp",
props: ['crossData'], props: ["crossData"],
data() { data() {
return { return {
options: [], options: [],
value: '', value: "",
dateTimeRange: [], dateTimeRange: [],
tableData: [], tableData: [],
listDataCopy: [], listDataCopy: [],
loading: true, loading: true,
} multipleSelection: [],
};
}, },
mounted() { mounted() {
if (time_config.homepage_eventTime) { if (time_config.homepage_eventTime) {
this.dateTimeRange = [ this.dateTimeRange = [
new Date(time_config.homepage_eventTime[0]), new Date(time_config.homepage_eventTime[0]),
new Date(time_config.homepage_eventTime[1]) new Date(time_config.homepage_eventTime[1]),
]; ];
} else { } else {
this.dateTimeRange = [ this.dateTimeRange = [
new Date( new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24) new Date(),
),
new Date()
]; ];
} }
this.getData() this.getData();
}, },
methods: { methods: {
showEventPoint(events){
let features = []
for (let item of events) {
if (item.lng && item.lat) {
features.push(turf.point([item.lng, item.lat], item))
}
}
// features.push(turf.point([map.getCenter().lng,map.getCenter().lat],{a:1}))
let geo = turf.featureCollection(features)
mapTool.addOrUpdateEventPoint1(window.map, geo)
window.map.off('click', 'eventPoint1', this.eventPointClick)
window.map.on('click', 'eventPoint1', this.eventPointClick)
},
eventPointClick(e) {
mapTool.addPopupEvent(window.map, e.features[0].properties)
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.showEventPoint(this.multipleSelection)
},
translateDict(value, type) { translateDict(value, type) {
let result = value let result = value;
let target = this.$store.state.dicts[type].find((dict) => { let target = this.$store.state.dicts[type].find((dict) => {
return dict.code == value; return dict.code == value;
}) });
if (target) { if (target) {
result = target.name result = target.name;
} }
return result return result;
}, },
occupancyValue, occupancyValue,
sliceTableAndRender(){
let sliceSelection = this.listDataCopy.slice(0, 10);
this.$nextTick(() => {
for (let i = 0; i < this.listDataCopy.length; i++) {
if (i <= 9) {
this.$refs.multipleTable.toggleRowSelection(this.listDataCopy[i], true);
}
}
this.showEventPoint(sliceSelection)
});
},
filterDataByType() { filterDataByType() {
this.listDataCopy = this.tableData.filter(item => { this.listDataCopy = this.tableData.filter((item) => {
return this.value === item.eventType return this.value === item.eventType;
}) });
this.$emit('showEventPoint', this.listDataCopy) this.sliceTableAndRender()
}, },
getData() { getData() {
this.loading = true this.loading = true;
getHoloEventList({ getHoloEventList({
crossId: this.crossData.id, crossId: this.crossData.id,
"end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'), end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
"start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-'), start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
}).then(res => { }).then((res) => {
this.loading = false this.loading = false;
this.$emit('showEventPoint', res.content) this.tableData = res.content;
this.tableData = res.content this.listDataCopy = JSON.parse(JSON.stringify(this.tableData));
this.listDataCopy = JSON.parse(JSON.stringify(this.tableData))
this.options = res.content.reduce((a, b) => { this.options = res.content.reduce((a, b) => {
if (!a.includes(b.eventType)) { if (!a.includes(b.eventType)) {
a.push(b.eventType) a.push(b.eventType);
} }
return a return a;
}, []) }, []);
}) this.sliceTableAndRender()
});
}, },
rowClick(row) { rowClick(row) {
mapTool.addPopupEvent(window.map, row) mapTool.addPopupEvent(window.map, row);
}, },
getRowClassName(e) { getRowClassName(e) {
if (e.rowIndex % 2 !== 0) { if (e.rowIndex % 2 !== 0) {
...@@ -159,8 +202,8 @@ export default { ...@@ -159,8 +202,8 @@ export default {
return "row-odd"; return "row-odd";
} }
}, },
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -170,7 +213,8 @@ export default { ...@@ -170,7 +213,8 @@ export default {
align-items: center; align-items: center;
} }
::v-deep .el-range-input, ::v-deep .el-input__inner { ::v-deep .el-range-input,
::v-deep .el-input__inner {
background-color: transparent; background-color: transparent;
color: white; color: white;
} }
...@@ -180,4 +224,4 @@ export default { ...@@ -180,4 +224,4 @@ export default {
::v-deep .el-input__inner { ::v-deep .el-input__inner {
color: white; color: white;
} }
</style> </style>
\ No newline at end of file
wj-smartcity/src/views/signal/msgs/left/cross.vue
View file @ 3183856c
<template> <template>
<msg-card class="item-cross" title="路口监测"> <msg-card class="item-cross" title="路口监测">
<div class="full-w-h" v-loading="loading" <div
element-loading-spinner="el-icon-loading" class="full-w-h"
element-loading-background="rgba(3, 11, 25, 0.8)"> v-loading="loading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(3, 11, 25, 0.8)"
>
<div class="questionArea"> <div class="questionArea">
<div class="kip-box"> <div class="kip-box">
<!-- @click="kipClick(item)"--> <!-- @click="kipClick(item)"-->
<div <div
class="kip-item" class="kip-item"
v-for="(item, index) in kipData" v-for="(item, index) in kipData"
:key="index" :key="index"
@click="kipClick(item)" @click="kipClick(item)"
:style="`border-left: 4px solid ${item.color};background-color: ${item.bg}`" :style="`border-left: 4px solid ${item.color};background-color: ${item.bg}`"
:class="{ active: kipActive.type === item.type }" :class="{ active: kipActive.type === item.type }"
> >
<div> <div>{{ item.name }}：{{ item.value }}</div>
{{ item.name }}：{{ item.value }}
</div>
</div> </div>
</div> </div>
...@@ -33,72 +34,88 @@ ...@@ -33,72 +34,88 @@
<!-- </div>--> <!-- </div>-->
<div class="list_control"> <div class="list_control">
<el-input <el-input
class="homepage-search" class="homepage-search"
suffix-icon="el-icon-search" suffix-icon="el-icon-search"
placeholder="请输入关键字搜索" placeholder="请输入关键字搜索"
v-model="filterText" v-model="filterText"
@input="initData" @input="initData"
> >
</el-input> </el-input>
<el-select @change="typeChange" v-model="typeVal" class="sort_btn"> <el-select @change="typeChange" v-model="typeVal" class="sort_btn">
<el-option <el-option
v-for="item in [{value: '1',label: '常发性'},{value: '0',label: '偶发性'},{value: '-',label: '全部'}]" v-for="item in [
:key="item.value" { value: '1', label: '常发性' },
:label="item.label" { value: '0', label: '偶发性' },
:value="item.value"> { value: '-', label: '全部' },
]"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="alarm-list-box"> <div class="alarm-list-box">
<el-table <el-table
@row-click="rowClick" @row-click="rowClick"
:data="listDataCopy" :data="listDataCopy"
:row-class-name="getRowClassName" :row-class-name="getRowClassName"
style="width: 100%" style="width: 100%"
cell-class-name="custom-table-cell" cell-class-name="custom-table-cell"
header-row-class-name="custom-table-header" header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell" header-cell-class-name="custom-table-header-cell"
height="100%"> height="100%"
>
<el-table-column <el-table-column
width="50" width="50"
align="center" align="center"
prop="index" prop="index"
show-overflow-tooltip show-overflow-tooltip
label="排名"> label="排名"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="name" prop="name"
show-overflow-tooltip show-overflow-tooltip
label="路口名称"> label="路口名称"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="congestionIndex" prop="congestionIndex"
align="center" align="center"
width="80" width="80"
label="拥堵指数"> label="拥堵指数"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
width="70" width="70"
show-overflow-tooltip show-overflow-tooltip
label="同比"> label="同比"
>
<template slot-scope="scope"> <template slot-scope="scope">
<!-- {{ Math.abs(scope.row.lastPeriodIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastPeriodIndex)" alt=""/>--> <!-- {{ Math.abs(scope.row.lastPeriodIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastPeriodIndex)" alt=""/>-->
{{ Math.abs(scope.row.lastPeriodIndex) }}% <i :class="getDownUpIcon(scope.row.lastPeriodIndex)"/> <span :style="getDownUpColor(scope.row.lastPeriodIndex)"
>{{ Math.abs(scope.row.lastPeriodIndex) }}%</span
>
<i :class="getDownUpIcon(scope.row.lastPeriodIndex)" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="环比" label="环比"
width="70" width="70"
show-overflow-tooltip show-overflow-tooltip
align="center" align="center"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<!-- {{ Math.abs(scope.row.lastWeekIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastWeekIndex)" alt=""/>--> <!-- {{ Math.abs(scope.row.lastWeekIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastWeekIndex)" alt=""/>-->
{{ Math.abs(scope.row.lastWeekIndex) }}% <i :class="getDownUpIcon(scope.row.lastWeekIndex)"/> <span :style="getDownUpColor(scope.row.lastWeekIndex)"
>{{ Math.abs(scope.row.lastWeekIndex) }}%</span
>
<i :class="getDownUpIcon(scope.row.lastWeekIndex)" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -159,7 +176,7 @@ ...@@ -159,7 +176,7 @@
<script> <script>
import msgCard from "../../../../components/Standard/msg-card.vue"; import msgCard from "../../../../components/Standard/msg-card.vue";
import {getAbnormalList} from "@/dao/optApi"; import { getAbnormalList } from "@/dao/optApi";
export default { export default {
name: "cross", name: "cross",
...@@ -168,24 +185,24 @@ export default { ...@@ -168,24 +185,24 @@ export default {
}, },
data() { data() {
return { return {
typeVal: '-', typeVal: "-",
dirObj: { dirObj: {
"0": "无", 0: "无",
"1": "北", 1: "北",
"2": "东北", 2: "东北",
"3": "东", 3: "东",
"4": "东南", 4: "东南",
"5": "南", 5: "南",
"6": "西南", 6: "西南",
"7": "西", 7: "西",
"8": "西北", 8: "西北",
}, },
filterText: "", filterText: "",
sourceValue: { sourceValue: {
"1": "事故", 1: "事故",
"2": "施工", 2: "施工",
"3": "拥堵", 3: "拥堵",
"4": "管制", 4: "管制",
}, },
sourceClass: { sourceClass: {
事故: "#D43030", 事故: "#D43030",
...@@ -197,18 +214,48 @@ export default { ...@@ -197,18 +214,48 @@ export default {
listData: [], listData: [],
listDataCopy: [], listDataCopy: [],
kipData: [ kipData: [
{name: "溢出", type: 3, value: 0, color: '#9a0807', bg: 'rgba(154, 8, 7,0.3)'}, {
{name: "拥堵", type: 2, value: 0, color: '#c56504', bg: 'rgba(197, 101, 4,0.3)'}, name: "溢出",
{name: "失衡", type: 1, value: 0, color: '#e1b102', bg: 'rgba(225, 177, 2,0.3)'}, type: 3,
{name: "空放", type: 5, value: 0, color: '#87898c', bg: 'rgba(135, 137, 140,0.3)'}, value: 0,
{name: "畅通", type: 0, value: 0, color: '#007b33', bg: 'rgba(0, 123, 51,0.3)'}, color: "#9a0807",
bg: "rgba(154, 8, 7,0.3)",
},
{
name: "拥堵",
type: 2,
value: 0,
color: "#c56504",
bg: "rgba(197, 101, 4,0.3)",
},
{
name: "失衡",
type: 1,
value: 0,
color: "#e1b102",
bg: "rgba(225, 177, 2,0.3)",
},
{
name: "空放",
type: 5,
value: 0,
color: "#87898c",
bg: "rgba(135, 137, 140,0.3)",
},
{
name: "畅通",
type: 0,
value: 0,
color: "#007b33",
bg: "rgba(0, 123, 51,0.3)",
},
], ],
infoStatusObj: { infoStatusObj: {
"0": "未开启", 0: "未开启",
"1": "相位差优化", 1: "相位差优化",
"2": "选择方案", 2: "选择方案",
}, },
kipActive: {name: "", type: null}, kipActive: { name: "", type: null },
radio: "", radio: "",
loading: false, loading: false,
}; };
...@@ -221,46 +268,56 @@ export default { ...@@ -221,46 +268,56 @@ export default {
return "row-odd"; return "row-odd";
} }
}, },
getDownUpIcon(number){ getDownUpIcon(number) {
if (number > 0) { if (number > 0) {
return 'el-icon-top' return "el-icon-top";
} }
if (number < 0) { if (number < 0) {
return 'el-icon-bottom' return "el-icon-bottom";
}
},
getDownUpColor(number) {
if (number > 0) {
return "color: #c00000";
}
if (number < 0) {
return "color: #0f9900";
} }
}, },
getDownUpImg(number) { getDownUpImg(number) {
if (number > 0) { if (number > 0) {
return require('@/assets/images/smartCityMain/up.png') return require("@/assets/images/smartCityMain/up.png");
} }
if (number < 0) { if (number < 0) {
return require('@/assets/images/smartCityMain/down.png') return require("@/assets/images/smartCityMain/down.png");
} }
}, },
typeChange(targetType) { typeChange(targetType) {
if (targetType === '-') { if (targetType === "-") {
this.listDataCopy = this.listData.sort((a, b) => { this.listDataCopy = this.listData.sort((a, b) => {
return Number(b.congestionIndex) - Number(a.congestionIndex) return Number(b.congestionIndex) - Number(a.congestionIndex);
}) });
} else { } else {
this.listDataCopy = this.listData.sort((a, b) => { this.listDataCopy = this.listData
return Number(b.congestionIndex) - Number(a.congestionIndex) .sort((a, b) => {
}).filter(item => { return Number(b.congestionIndex) - Number(a.congestionIndex);
return item.frequent == targetType })
}) .filter((item) => {
return item.frequent == targetType;
});
} }
}, },
rowClick(data) { rowClick(data) {
this.$emit('openCrossIndexDetail', data) this.$emit("openCrossIndexDetail", data);
}, },
initData() { initData() {
this.typeVal = '-' this.typeVal = "-";
getAbnormalList({ getAbnormalList({
name: this.filterText, name: this.filterText,
status: this.kipActive.type, status: this.kipActive.type,
type: null, type: null,
}).then((res) => { }).then((res) => {
console.log('res right', res) console.log("res right", res);
if (res && res.code === 200) { if (res && res.code === 200) {
const data = res.content; const data = res.content;
this.kipData = [ this.kipData = [
...@@ -276,64 +333,67 @@ export default { ...@@ -276,64 +333,67 @@ export default {
name: "溢出", name: "溢出",
type: 3, type: 3,
value: data.abnormalCrossStats.spillover, value: data.abnormalCrossStats.spillover,
color: '#9a0807', color: "#9a0807",
bg: 'rgba(154, 8, 7,0.3)' bg: "rgba(154, 8, 7,0.3)",
}, },
{ {
name: "拥堵", name: "拥堵",
type: 2, type: 2,
value: data.abnormalCrossStats.congestion, value: data.abnormalCrossStats.congestion,
color: '#c56504', color: "#c56504",
bg: 'rgba(197, 101, 4,0.3)', bg: "rgba(197, 101, 4,0.3)",
}, },
{ {
name: "失衡", name: "失衡",
type: 1, type: 1,
value: data.abnormalCrossStats.unbalance, value: data.abnormalCrossStats.unbalance,
color: '#e1b102', color: "#e1b102",
bg: 'rgba(225, 177, 2,0.3)' bg: "rgba(225, 177, 2,0.3)",
}, },
{ {
name: "空放", name: "空放",
type: 5, type: 5,
value: data.abnormalCrossStats.phaseEmpty, value: data.abnormalCrossStats.phaseEmpty,
color: '#87898c', color: "#87898c",
bg: 'rgba(135, 137, 140,0.3)' bg: "rgba(135, 137, 140,0.3)",
}, },
{ {
name: "畅通", name: "畅通",
type: 0, type: 0,
value: data.abnormalCrossStats.normal, value: data.abnormalCrossStats.normal,
color: '#007b33', color: "#007b33",
bg: 'rgba(0, 123, 51,0.3)' bg: "rgba(0, 123, 51,0.3)",
}, },
]; ];
this.listData = data.abnormalCrossList.sort((a, b) => { this.listData = data.abnormalCrossList
return Number(b.congestionIndex) - Number(a.congestionIndex) .sort((a, b) => {
}).map((item, index) => { return Number(b.congestionIndex) - Number(a.congestionIndex);
return {index: index + 1, ...item,} })
}).sort((a, b) => { .map((item, index) => {
return Number(b.congestionIndex) - Number(a.congestionIndex) return { index: index + 1, ...item };
}); })
this.listDataCopy = (JSON.parse(JSON.stringify(this.listData))) .sort((a, b) => {
return Number(b.congestionIndex) - Number(a.congestionIndex);
});
this.listDataCopy = JSON.parse(JSON.stringify(this.listData));
} }
}); });
}, },
kipClick(item) { kipClick(item) {
if (item.type === this.kipActive.type) { if (item.type === this.kipActive.type) {
this.kipActive = {name: "", type: null}; this.kipActive = { name: "", type: null };
this.listDataCopy = (JSON.parse(JSON.stringify(this.listData))) this.listDataCopy = JSON.parse(JSON.stringify(this.listData));
} else { } else {
this.kipActive = {name: item.name, type: item.type}; this.kipActive = { name: item.name, type: item.type };
this.listDataCopy = this.listData.filter(row => { this.listDataCopy = this.listData.filter((row) => {
return row.realtimeStatus == item.type return row.realtimeStatus == item.type;
}) });
} }
}, },
getAll() { getAll() {
this.typeVal = '-' this.typeVal = "-";
getAbnormalList({ getAbnormalList({
name: '', name: "",
status: null, status: null,
type: null, type: null,
}).then((res) => { }).then((res) => {
...@@ -352,66 +412,70 @@ export default { ...@@ -352,66 +412,70 @@ export default {
name: "溢出", name: "溢出",
type: 3, type: 3,
value: data.abnormalCrossStats.spillover, value: data.abnormalCrossStats.spillover,
color: '#9a0807', color: "#9a0807",
bg: 'rgba(154, 8, 7,0.3)' bg: "rgba(154, 8, 7,0.3)",
}, },
{ {
name: "拥堵", name: "拥堵",
type: 2, type: 2,
value: data.abnormalCrossStats.congestion, value: data.abnormalCrossStats.congestion,
color: '#c56504', color: "#c56504",
bg: 'rgba(197, 101, 4,0.3)', bg: "rgba(197, 101, 4,0.3)",
}, },
{ {
name: "失衡", name: "失衡",
type: 1, type: 1,
value: data.abnormalCrossStats.unbalance, value: data.abnormalCrossStats.unbalance,
color: '#e1b102', color: "#e1b102",
bg: 'rgba(225, 177, 2,0.3)' bg: "rgba(225, 177, 2,0.3)",
}, },
{ {
name: "空放", name: "空放",
type: 5, type: 5,
value: data.abnormalCrossStats.phaseEmpty, value: data.abnormalCrossStats.phaseEmpty,
color: '#87898c', color: "#87898c",
bg: 'rgba(135, 137, 140,0.3)' bg: "rgba(135, 137, 140,0.3)",
}, },
{ {
name: "畅通", name: "畅通",
type: 0, type: 0,
value: data.abnormalCrossStats.normal, value: data.abnormalCrossStats.normal,
color: '#007b33', color: "#007b33",
bg: 'rgba(0, 123, 51,0.3)' bg: "rgba(0, 123, 51,0.3)",
}, },
]; ];
this.listData = data.abnormalCrossList.sort((a, b) => { this.listData = data.abnormalCrossList
return Number(b.congestionIndex) - Number(a.congestionIndex) .sort((a, b) => {
}).map((item, index) => { return Number(b.congestionIndex) - Number(a.congestionIndex);
return {index: index + 1, ...item} })
}); .map((item, index) => {
this.$emit('showCrossStatus', this.listData) return { index: index + 1, ...item };
console.log('listData', this.listData) });
this.listDataCopy = (JSON.parse(JSON.stringify(this.listData))).sort((a, b) => { this.$emit("showCrossStatus", this.listData);
return Number(b.congestionIndex) - Number(a.congestionIndex) console.log("listData", this.listData);
}) this.listDataCopy = JSON.parse(JSON.stringify(this.listData)).sort(
(a, b) => {
return Number(b.congestionIndex) - Number(a.congestionIndex);
}
);
} }
}); });
}, },
}, },
mounted() { mounted() {
this.getAll() this.getAll();
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url("../../../../assets/less/elementTable.less"); @import url("../../../../assets/less/elementTable.less");
.el-icon-top{ .el-icon-top {
color: #0f9900;
}
.el-icon-bottom{
color: #c00000; color: #c00000;
} }
.el-icon-bottom {
color: #0f9900;
}
//::v-deep .el-table { //::v-deep .el-table {
// background-color: transparent; // background-color: transparent;
//} //}
...@@ -460,15 +524,11 @@ export default { ...@@ -460,15 +524,11 @@ export default {
// color: #ccc; // color: #ccc;
//} //}
::v-deep .el-input__inner { ::v-deep .el-input__inner {
color: white; color: white;
} }
.item-cross { .item-cross {
.list_control { .list_control {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -616,6 +676,5 @@ export default { ...@@ -616,6 +676,5 @@ export default {
} }
} }
} }
} }
</style> </style>
wj-smartcity/src/views/signal/msgs/right/detailComponents/queueLength.vue
View file @ 3183856c
...@@ -205,8 +205,8 @@ export default { ...@@ -205,8 +205,8 @@ export default {
title, title,
dataZoom: { dataZoom: {
type: "inside", type: "inside",
startValue: Object.keys(yDatas).length - 6, startValue: xData.length - 6,
endValue: Object.keys(yDatas).length - 1, endValue:xData.length-1,
}, },
tooltip: { tooltip: {
enterable: true, enterable: true,
...@@ -327,9 +327,9 @@ export default { ...@@ -327,9 +327,9 @@ export default {
renderTurn() { renderTurn() {
let filterData = this.allTurnData.filter(item => { let filterData = this.allTurnData.filter(item => {
return item.fRidDir === this.selectVal return item.fRidDir === this.selectVal
}) }).reverse()
let xData = filterData.reduce((a,b) => { let xData = filterData.reduce((a,b) => {
let time = new Date(b.windowEndTime).toLocaleTimeString() let time = new Date(b.windowEndTime).toLocaleTimeString().slice(0,5)
if(!a.includes(time)){ if(!a.includes(time)){
a.push(time) a.push(time)
} }
...@@ -361,8 +361,8 @@ export default { ...@@ -361,8 +361,8 @@ export default {
title, title,
dataZoom: { dataZoom: {
type: "inside", type: "inside",
startValue: Object.keys(yDatas).length - 6, startValue: xData.length - 6,
endValue: Object.keys(yDatas).length - 1, endValue:xData.length-1,
}, },
color: colors, color: colors,
tooltip: { tooltip: {
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficFlow.vue
View file @ 3183856c
...@@ -229,8 +229,8 @@ export default { ...@@ -229,8 +229,8 @@ export default {
title, title,
dataZoom: { dataZoom: {
type: "inside", type: "inside",
startValue: Object.keys(yDatas).length - 6, startValue: xData.length - 6,
endValue: Object.keys(yDatas).length - 1, endValue:xData.length-1,
}, },
color: this.colors, color: this.colors,
tooltip: { tooltip: {
...@@ -378,8 +378,8 @@ export default { ...@@ -378,8 +378,8 @@ export default {
title, title,
dataZoom: { dataZoom: {
type: "inside", type: "inside",
startValue: Object.keys(yDatas).length - 6, startValue: xData.length - 6,
endValue: Object.keys(yDatas).length - 1, endValue:xData.length-1,
}, },
color: [ color: [
"rgba(24, 144, 255, 1)", "rgba(24, 144, 255, 1)",
...@@ -552,8 +552,8 @@ export default { ...@@ -552,8 +552,8 @@ export default {
title, title,
dataZoom: { dataZoom: {
type: "inside", type: "inside",
startValue: Object.keys(yDatas).length - 6, startValue: xData.length - 6,
endValue: Object.keys(yDatas).length - 1, endValue:xData.length-1,
}, },
color: [ color: [
"rgba(24, 144, 255, 1)", "rgba(24, 144, 255, 1)",
......
wj-smartcity/src/views/signal/msgs/right/keyCross.vue
View file @ 3183856c
...@@ -88,8 +88,8 @@ export default { ...@@ -88,8 +88,8 @@ export default {
title, title,
dataZoom: { dataZoom: {
type: "inside", type: "inside",
startValue: Object.keys(this.chartResult).length - 6, startValue: this.xData.length - 6,
endValue: Object.keys(this.chartResult).length - 1, endValue:this.xData.length-1,
}, },
tooltip: { tooltip: {
enterable: true, enterable: true,
......
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/mutLineChart.vue
View file @ 3183856c
...@@ -179,17 +179,6 @@ export default { ...@@ -179,17 +179,6 @@ export default {
} }
}); });
}, },
timeSetSort(time) {
// 使用 Set 进行去重
const uniqueTimeStrings = [...new Set(time)];
// 使用 sort 方法进行排序
const sortedTimeStrings = uniqueTimeStrings.sort((a, b) => {
const timeA = new Date(`2000-01-01 ${a}`);
const timeB = new Date(`2000-01-01 ${b}`);
return timeA - timeB;
});
return sortedTimeStrings;
},
getChart(data) { getChart(data) {
const xData = [...new Set(data.map((item) => item.metricTime))]; const xData = [...new Set(data.map((item) => item.metricTime))];
// const xData = metricsList.map((item) => item.metricTime); // const xData = metricsList.map((item) => item.metricTime);
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/index.vue
View file @ 3183856c
...@@ -4,25 +4,26 @@ ...@@ -4,25 +4,26 @@
<div class="head-timeSelector"> <div class="head-timeSelector">
<div class="custom-form-label">时段选择：</div> <div class="custom-form-label">时段选择：</div>
<el-date-picker <el-date-picker
@change="init" @change="init"
v-model="dateModel" v-model="dateModel"
type="datetimerange" type="datetimerange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期"> end-placeholder="结束日期"
>
</el-date-picker> </el-date-picker>
</div> </div>
<div class="content"> <div class="content">
<div <div
class="content-item" class="content-item"
v-loading="schemeAnalysisLoading" v-loading="schemeAnalysisLoading"
element-loading-text="数据加载中..." element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0, 0.4)" element-loading-background="rgba(0,0,0, 0.4)"
> >
<div class="item-txt">干线运行分析</div> <div class="item-txt">干线运行分析</div>
<div class="chart"> <div class="chart">
<v-chart style="z-index: 5;" autoresize :option="leftPieOption"/> <v-chart style="z-index: 5" autoresize :option="leftPieOption" />
<div class="liner-border"> <div class="liner-border">
<div class="border-inner"></div> <div class="border-inner"></div>
</div> </div>
...@@ -33,18 +34,25 @@ ...@@ -33,18 +34,25 @@
<div class="leftPieChartLegend"> <div class="leftPieChartLegend">
<div class="legendItem" v-for="item of pieData"> <div class="legendItem" v-for="item of pieData">
<div style="display: flex; align-items: center;height:100%"> <div style="display: flex; align-items: center; height: 100%">
<div class="legendItemColor" :style="`background-color:${pieColorMap[item.nameVal]}`"></div> <div
{{item.name}}: class="legendItemColor"
:style="`background-color:${pieColorMap[item.nameVal]}`"
></div>
{{ item.name }}:
</div> </div>
{{((item.value/(60*24*60))*100).toFixed(0)}}% {{ ((item.value / (60 * 24 * 60)) * 100).toFixed(0) }}%
</div> </div>
</div> </div>
</div> </div>
<div v-loading="schemeEvaluationLoading" <div
element-loading-text="数据加载中..." v-loading="schemeEvaluationLoading"
element-loading-spinner="el-icon-loading" element-loading-text="数据加载中..."
element-loading-background="rgba(0,0,0, 0.4)" class="content-item" style="position: relative;"> element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0, 0.4)"
class="content-item"
style="position: relative"
>
<div class="item-txt">干线方案评价</div> <div class="item-txt">干线方案评价</div>
<div class="content-container"> <div class="content-container">
<div class="select-box1"> <div class="select-box1">
...@@ -52,30 +60,32 @@ ...@@ -52,30 +60,32 @@
<div class="row_col"> <div class="row_col">
<div class="custom-form-label">当前时段：</div> <div class="custom-form-label">当前时段：</div>
<el-select <el-select
class="custom-form-input" class="custom-form-input"
v-model="schemeModel" v-model="schemeModel"
placeholder="" placeholder=""
filterable filterable
@change="getDirOption" @change="getDirOption"
value-key="name" value-key="name"
> >
<el-option <el-option
v-for="item in schemeOption" v-for="item in schemeOption"
:key="item.name" :key="item.name"
:value="item" :value="item"
:label="item.timeSpan" :label="item.timeSpan"
> >
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="row_col"> <div class="row_col">
<div class="custom-form-label button_left">场景：{{ sceneName || '--' }}</div> <div class="custom-form-label button_left">
场景：{{ sceneName || "--" }}
</div>
<div> <div>
<el-button <el-button
type="primary" type="primary"
:disabled="!detailShow" :disabled="!detailShow"
@click="detailClick" @click="detailClick"
>详情 >详情
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -84,15 +94,15 @@ ...@@ -84,15 +94,15 @@
<div class="row_col"> <div class="row_col">
<div class="custom-form-label">对比时段：</div> <div class="custom-form-label">对比时段：</div>
<el-select <el-select
class="custom-form-input" class="custom-form-input"
v-model="compareTimeType" v-model="compareTimeType"
@change="compareTimeTypeChange" @change="compareTimeTypeChange"
> >
<el-option <el-option
v-for="item in compareTimeTypeOptions" v-for="item in compareTimeTypeOptions"
:key="item.value" :key="item.value"
:value="item.value" :value="item.value"
:label="item.label" :label="item.label"
> >
</el-option> </el-option>
</el-select> </el-select>
...@@ -100,72 +110,86 @@ ...@@ -100,72 +110,86 @@
<div class="row_col"> <div class="row_col">
<div class="custom-form-label">指标：</div> <div class="custom-form-label">指标：</div>
<el-select <el-select
class="custom-form-input" class="custom-form-input"
v-model="indexModelMiddle" v-model="indexModelMiddle"
placeholder="" placeholder=""
filterable filterable
@change="compareTimeTypeChange" @change="compareTimeTypeChange"
> >
<el-option <el-option
v-for="item in indexOption" v-for="item in indexOption"
:key="item.label" :key="item.label"
:value="item.metricName" :value="item.metricName"
:label="item.label" :label="item.label"
> >
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="row_item" v-if="compareTimeType===3"> <div class="row_item" v-if="compareTimeType === 3">
<div class="custom-form-label">自定义对比时段：</div> <div class="custom-form-label">自定义对比时段：</div>
<el-date-picker :clearable="false" @change="getMiddleData" class="form3" <el-date-picker
value-format="yyyy-MM-dd HH:mm:ss" :clearable="false"
v-model="compareTimes" @change="getMiddleData"
type="datetimerange"> class="form3"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="compareTimes"
type="datetimerange"
>
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
<oneLineChart <oneLineChart
class="chart" class="chart"
ref="lineChart" ref="lineChart"
:indexModelMiddle="indexModelMiddle" :indexModelMiddle="indexModelMiddle"
:data1="middleRes1.curveElementList" :data1="middleRes1.curveElementList"
:data2="middleRes2.curveElementList" :data2="middleRes2.curveElementList"
:compareTimeType="compareTimeType" :compareTimeType="compareTimeType"
:key="`oneLineChart${oneLineChartKey}`" :key="`oneLineChart${oneLineChartKey}`"
></oneLineChart> ></oneLineChart>
</div> </div>
</div> </div>
<div v-loading="crossEvaluationLoading" <div
element-loading-text="数据加载中..." v-loading="crossEvaluationLoading"
element-loading-spinner="el-icon-loading" element-loading-text="数据加载中..."
element-loading-background="rgba(0,0,0, 0.4)" class="content-item"> element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0, 0.4)"
class="content-item"
>
<div class="item-txt">干线路口评价</div> <div class="item-txt">干线路口评价</div>
<div class="content-container"> <div class="content-container">
<div class="full-w-h noDataMsg" v-if="!middleRes.greenwaveCrossList.length">暂无数据...</div> <div
class="full-w-h noDataMsg"
v-if="!middleRes.greenwaveCrossList.length"
>
暂无数据...
</div>
<crossDistance <crossDistance
:canClick="true" :canClick="true"
class="cross-distance" class="cross-distance"
:key="`crossDistance${crossDistanceKey}`" :key="`crossDistance${crossDistanceKey}`"
:contentData="middleRes" :contentData="middleRes"
type="areaLine" type="areaLine"
@crossClick="crossClick" @crossClick="crossClick"
></crossDistance> ></crossDistance>
<v-chart class="chart" autoresize :option="rightLineOption"/> <v-chart class="chart" autoresize :option="rightLineOption" />
</div> </div>
</div> </div>
</div> </div>
<mutLineChart <mutLineChart
ref="mutLineChart" ref="mutLineChart"
class="content-bottom" class="content-bottom"
:date="dateModel" :date="dateModel"
:detailApiData="detailApiData" :detailApiData="detailApiData"
:areaObj="areaObj" :areaObj="areaObj"
:indexOption="indexOption2" :indexOption="indexOption2"
></mutLineChart> ></mutLineChart>
<signal-op-green-detail @close="showDialog=false" v-if="showDialog" :props-data="propsData"/> <signal-op-green-detail
@close="showDialog = false"
v-if="showDialog"
:props-data="propsData"
/>
</div> </div>
</template> </template>
...@@ -178,31 +202,32 @@ import { ...@@ -178,31 +202,32 @@ import {
import { import {
mainlineSchemeAnalysis, mainlineSchemeAnalysis,
mainlineSchemeEvaluate, mainlineSchemeEvaluate,
mainlineCrossEvaluate, mainlineRunAnalyse, mainlineCrossEvaluate,
mainlineRunAnalyse,
} from "@/common/api/signalEvaluation.js"; } from "@/common/api/signalEvaluation.js";
import SignalOpGreenDetail from "@/views/signalEvaluation/rightIndex/lineComponents/signalOpGreenDetail.vue"; import SignalOpGreenDetail from "@/views/signalEvaluation/rightIndex/lineComponents/signalOpGreenDetail.vue";
import {getFontSize} from "@/config/holo/fontSize"; import { getFontSize } from "@/config/holo/fontSize";
// import signalOpGreenDetail from "../../../components/dialog/signalOpGreenDetail.vue"; // import signalOpGreenDetail from "../../../components/dialog/signalOpGreenDetail.vue";
export default { export default {
name: 'lineEvaluation', name: "lineEvaluation",
data() { data() {
return { return {
rightClickCrossName:'', rightClickCrossName: "",
pieColorMap:{ pieColorMap: {
1:'#00933a', 1: "#00933a",
2: '#ff8200', 2: "#ff8200",
3: '#ffd145' 3: "#ffd145",
}, },
pieData: [], pieData: [],
showDialog: false, showDialog: false,
rightCheckList: [], rightCheckList: [],
compareTimeTypeOptions: [ compareTimeTypeOptions: [
{label: '同比', value: 1}, { label: "同比", value: 1 },
{label: '环比', value: 2}, { label: "环比", value: 2 },
{label: '自定义', value: 3}, { label: "自定义", value: 3 },
], ],
compareTimes: ['', ''], compareTimes: ["", ""],
compareTimeType: 1, compareTimeType: 1,
charts: {}, charts: {},
schemeAnalysisLoading: true, schemeAnalysisLoading: true,
...@@ -270,15 +295,15 @@ export default { ...@@ -270,15 +295,15 @@ export default {
}, },
dirModel: "", dirModel: "",
dirOption: [], dirOption: [],
schemeOption: [{name: "方案1", code: "1"}], schemeOption: [{ name: "方案1", code: "1" }],
schemeModel: null, schemeModel: null,
tableData: { tableData: {
name: "关键路口", name: "关键路口",
key: "keyCross", key: "keyCross",
clickable: true, clickable: true,
header: [ header: [
{label: "关键路口", key: "name", align: "center"}, { label: "关键路口", key: "name", align: "center" },
{label: "关键路口次数", key: "times", align: "center"}, { label: "关键路口次数", key: "times", align: "center" },
], ],
body: [], body: [],
}, },
...@@ -293,19 +318,19 @@ export default { ...@@ -293,19 +318,19 @@ export default {
indexModelMiddle: "干线行程时间", indexModelMiddle: "干线行程时间",
indexModelRight: "", indexModelRight: "",
indexOption: [ indexOption: [
{label: '行程时间', metricName: '干线行程时间'}, { label: "行程时间", metricName: "干线行程时间" },
{label: '平均速度', metricName: '平均速度'}, { label: "平均速度", metricName: "平均速度" },
{label: '平均延误', metricName: '平均延误'}, { label: "平均延误", metricName: "平均延误" },
{label: '不停车通过率', metricName: '协调不停车通过率'}, { label: "不停车通过率", metricName: "协调不停车通过率" },
], ],
indexOption2: [], indexOption2: [],
leftRes: {}, leftRes: {},
rightRes: [], rightRes: [],
rightTableModel: {}, rightTableModel: {},
legendMap: { legendMap: {
1: '畅通', 1: "畅通",
2: '溢出', 2: "溢出",
3: '拥堵', 3: "拥堵",
}, },
}; };
}, },
...@@ -313,77 +338,82 @@ export default { ...@@ -313,77 +338,82 @@ export default {
SignalOpGreenDetail, SignalOpGreenDetail,
oneLineChart: (resolve) => require(["./oneLineChart.vue"], resolve), //路口流量 oneLineChart: (resolve) => require(["./oneLineChart.vue"], resolve), //路口流量
tableData: () => tableData: () =>
import( import(/*webpackChunkName:"tableData" */ "./tableData.vue"),
/*webpackChunkName:"tableData" */ "./tableData.vue"
),
reverseBar: (resolve) => require(["./reverseBar.vue"], resolve), //路口流量 reverseBar: (resolve) => require(["./reverseBar.vue"], resolve), //路口流量
barChart: (resolve) => require(["./barChart.vue"], resolve), //路口流量 barChart: (resolve) => require(["./barChart.vue"], resolve), //路口流量
mutLineChart: () => mutLineChart: () =>
import(/*webpackChunkName:"checkExpendTable" */ "./mutLineChart.vue"), import(/*webpackChunkName:"checkExpendTable" */ "./mutLineChart.vue"),
crossDistance: (resolve) => crossDistance: (resolve) =>
require(["../../../signal/dialogs/greenWave/crossDistance.vue"], resolve), require(["../../../signal/dialogs/greenWave/crossDistance.vue"], resolve),
}, },
props: ["areaObj"], props: ["areaObj"],
computed: { computed: {
rightLineOption(){ rightLineOption() {
let targetCrossData = (this.rightRes||[]).find(item => { let targetCrossData = (this.rightRes || []).find((item) => {
return item.crossName === this.rightClickCrossName return item.crossName === this.rightClickCrossName;
}) });
let indexes = { let indexes = {
queueList: '非协调排队长度', queueList: "非协调排队长度",
stopTimesList: '非协调停车次数', stopTimesList: "非协调停车次数",
twoStopRateList: '非协调二次停车率(%)' twoStopRateList: "非协调二次停车率(%)",
} };
let colors = { let colors = {
queueList: '#00933a', queueList: "#00933a",
stopTimesList: '#ff8200', stopTimesList: "#ff8200",
twoStopRateList: '#ffd145' twoStopRateList: "#ffd145",
}; };
let seriesData = [] let seriesData = [];
let xData = [] let xData = [];
if(targetCrossData){ if (targetCrossData) {
console.log('t',targetCrossData) console.log("t", targetCrossData);
for (let key in indexes) { for (let key in indexes) {
if(targetCrossData[key]){ if (targetCrossData[key]) {
xData = targetCrossData[key].map(item => { xData = targetCrossData[key].map((item) => {
return item.time return item.time;
}) });
seriesData.push( let yAxisIndex, yItemData;
{ if (indexes[key].includes("率")) {
smooth: true, yAxisIndex = 1;
symbol:'none', yItemData = targetCrossData[key].map((item) => {
name: indexes[key], return item.value * 100;
type: 'line', });
data: targetCrossData[key].map(item => { } else {
return item.value yAxisIndex = 0;
}), yItemData = targetCrossData[key].map((item) => {
itemStyle:{ return item.value;
color: colors[key] });
}, }
yAxisIndex: indexes[key].includes('率') ? 1 : 0, seriesData.push({
areaStyle: { smooth: true,
color: new echarts.graphic.LinearGradient( symbol: "none",
0, name: indexes[key],
1, type: "line",
0, data: yItemData,
0, itemStyle: {
[ color: colors[key],
{ },
offset: 0, yAxisIndex: yAxisIndex,
color: "rgba(62, 170, 247, 0)", // 100% 处的颜色 areaStyle: {
}, color: new echarts.graphic.LinearGradient(
{ 0,
offset: 1, 1,
color: colors[key] , // 0% 处的颜色 0,
}, 0,
], [
false {
), offset: 0,
}, color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
} },
) {
offset: 1,
color: colors[key], // 0% 处的颜色
},
],
false
),
},
});
} }
} }
} }
return { return {
...@@ -393,95 +423,110 @@ export default { ...@@ -393,95 +423,110 @@ export default {
// endValue: xData.length - 1, // endValue: xData.length - 1,
// }, // },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
backgroundColor: 'rgba(0,0,0,0.8)', backgroundColor: "rgba(0,0,0,0.8)",
borderWidth: 0, borderWidth: 0,
textStyle: { textStyle: {
fontSize: getFontSize(12), fontSize: getFontSize(12),
color: 'white', color: "white",
}, },
confine:true confine: true,
}, },
legend: { legend: {
inactiveColor:'rgba(255,255,255,0.7)', inactiveColor: "rgba(255,255,255,0.7)",
type: "scroll", type: "scroll",
itemWidth: 10, itemWidth: 10,
show: true, show: true,
left: "center",
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.9)', color: "rgba(255,255,255,0.9)",
} },
}, },
grid: { grid: {
top: 30, top: 30,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
}, },
yAxis: [{ yAxis: [
type: 'value', {
splitLine: { type: "value",
lineStyle: { splitLine: {
color: "rgba(153, 153, 153, 0.6)", lineStyle: {
type: "dashed", color: "rgba(153, 153, 153, 0.6)",
type: "dashed",
},
}, },
}, },
}, { {
type: 'value', type: "value",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,0)' color: "rgba(255,255,255,0)",
} },
} },
}], },
series: seriesData ],
series: seriesData,
}; };
}, },
leftPieOption(){ leftPieOption() {
let currentTotal = 0 let currentTotal = 0;
for (let item of this.pieData) { for (let item of this.pieData) {
currentTotal += item.value currentTotal += item.value;
} }
let except = 24 * 60 * 60 - currentTotal let except = 24 * 60 * 60 - currentTotal;
let colors = this.pieData.map(item => { let colors = this.pieData.map((item) => {
return item.color return item.color;
}) });
colors.push('#00933a') colors.push("#00933a");
this.pieData.push({nameVal: 1, value: except, includes: [], name: this.legendMap[1]}) this.pieData.push({
nameVal: 1,
value: except,
includes: [],
name: this.legendMap[1],
});
return { return {
color: colors, color: colors,
tooltip: { tooltip: {
confine: true, confine: true,
trigger: 'item', trigger: "item",
enterable: true, enterable: true,
backgroundColor: 'rgba(0,0,0,0.8)', backgroundColor: "rgba(0,0,0,0.8)",
borderWidth: 0, borderWidth: 0,
textStyle: { textStyle: {
fontSize: getFontSize(12), fontSize: getFontSize(12),
color: 'white', color: "white",
}, },
formatter: (params) => { formatter: (params) => {
let back = ""; let back = "";
back = `${params.data.name}时段${params.data.includes.length ? '：' : ''}</br>`; back = `${params.data.name}时段${
params.data.includes.length ? "：" : ""
}</br>`;
for (let item of params.data.includes) { for (let item of params.data.includes) {
back += `${item}</br>`; back += `${item}</br>`;
} }
// '<div style="max-height:180px;overflow-y:auto">' + // '<div style="max-height:180px;overflow-y:auto">' +
return '<div style="max-height:250px;overflow-y:auto;padding: 2px 8px 2px 2px;">' + back + "</div>"; return (
} '<div style="max-height:250px;overflow-y:auto;padding: 2px 8px 2px 2px;">' +
back +
"</div>"
);
},
}, },
legend: { legend: {
show: false, show: false,
bottom: '5%', bottom: "5%",
left: 'center', left: "center",
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: "rgba(255,255,255,0.8)",
} },
}, },
series: [ series: [
{ {
...@@ -490,28 +535,28 @@ export default { ...@@ -490,28 +535,28 @@ export default {
// borderColor: 'transparent', // borderColor: 'transparent',
// borderWidth: 2 // borderWidth: 2
}, },
name: '', name: "",
type: 'pie', type: "pie",
center: ['50%', '50%'], center: ["50%", "50%"],
radius: ['45%', '70%'], radius: ["45%", "70%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: "center",
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false,
fontSize: 40, fontSize: 40,
fontWeight: 'bold' fontWeight: "bold",
} },
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data: this.pieData data: this.pieData,
} },
] ],
}; };
}, },
// 当前场景 计算逻辑为： 若当前时段包含前面饼图中的溢出时段 则当前场景为溢出 // 当前场景 计算逻辑为： 若当前时段包含前面饼图中的溢出时段 则当前场景为溢出
...@@ -520,38 +565,38 @@ export default { ...@@ -520,38 +565,38 @@ export default {
sceneName() { sceneName() {
// 溢出 拥堵 畅通 // 溢出 拥堵 畅通
if (this.schemeModel?.name) { if (this.schemeModel?.name) {
let strArr = this.schemeModel.name.split(' ') let strArr = this.schemeModel.name.split(" ");
let timeRange = strArr[strArr.length - 1] let timeRange = strArr[strArr.length - 1];
if (this.pieData.length) { if (this.pieData.length) {
// 先判断是否为溢出 优先级为 溢出-拥堵-畅通 // 先判断是否为溢出 优先级为 溢出-拥堵-畅通
let overflow = this.pieData.find(item => { let overflow = this.pieData.find((item) => {
return item.nameVal === 2 return item.nameVal === 2;
}) });
if(overflow){ if (overflow) {
let overflowTimeArr = overflow.includes let overflowTimeArr = overflow.includes;
for (let timeItem of overflowTimeArr) { for (let timeItem of overflowTimeArr) {
let rangeHaveItem = this.checkTimeRange(timeRange, timeItem) let rangeHaveItem = this.checkTimeRange(timeRange, timeItem);
if (rangeHaveItem) { if (rangeHaveItem) {
return '溢出' return "溢出";
} }
} }
} }
let crowd = this.pieData.find(item => { let crowd = this.pieData.find((item) => {
return item.nameVal === 3 return item.nameVal === 3;
}) });
if(crowd){ if (crowd) {
let crowdTimeArr = crowd.includes let crowdTimeArr = crowd.includes;
for (let timeItem of crowdTimeArr) { for (let timeItem of crowdTimeArr) {
let rangeHaveItem = this.checkTimeRange(timeRange, timeItem) let rangeHaveItem = this.checkTimeRange(timeRange, timeItem);
if (rangeHaveItem) { if (rangeHaveItem) {
return '拥堵' return "拥堵";
} }
} }
} }
// 溢出拥堵都没return 则 返回畅通 // 溢出拥堵都没return 则 返回畅通
return '畅通' return "畅通";
} }
} }
}, },
...@@ -562,114 +607,134 @@ export default { ...@@ -562,114 +607,134 @@ export default {
schemeName: this.schemeModel?.name, schemeName: this.schemeModel?.name,
endTime: formatDate(this.dateModel[1]), endTime: formatDate(this.dateModel[1]),
startTime: formatDate(this.dateModel[0]), startTime: formatDate(this.dateModel[0]),
} };
}, },
currentTimeStart() { currentTimeStart() {
if (this.schemeModel) { if (this.schemeModel) {
let month = this.dateModel[0].getMonth() + 1 let month = this.dateModel[0].getMonth() + 1;
let year = this.dateModel[0].getFullYear() let year = this.dateModel[0].getFullYear();
// 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
let inToday = this.checkTimeRange(`00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,this.schemeModel.timeSpan) let inToday = this.checkTimeRange(
let date `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
if(inToday){ this.schemeModel.timeSpan
date = this.dateModel[1].getDate() );
}else{ let date;
date = this.dateModel[0].getDate() if (inToday) {
date = this.dateModel[1].getDate();
} else {
date = this.dateModel[0].getDate();
} }
return `${year}-${month}-${date} ${this.schemeModel.timeSpan.split('-')[0]}:00` return `${year}-${month}-${date} ${
this.schemeModel.timeSpan.split("-")[0]
}:00`;
} }
}, },
currentTimeEnd() { currentTimeEnd() {
if (this.schemeModel) { if (this.schemeModel) {
let month = this.dateModel[1].getMonth() + 1 let month = this.dateModel[1].getMonth() + 1;
let year = this.dateModel[1].getFullYear() let year = this.dateModel[1].getFullYear();
// 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
let inToday = this.checkTimeRange(`00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,this.schemeModel.timeSpan) let inToday = this.checkTimeRange(
let date `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
if(inToday){ this.schemeModel.timeSpan
date = this.dateModel[1].getDate() );
}else{ let date;
date = this.dateModel[0].getDate() if (inToday) {
date = this.dateModel[1].getDate();
} else {
date = this.dateModel[0].getDate();
} }
return `${year}-${month}-${date} ${this.schemeModel.timeSpan.split('-')[1]}:00` return `${year}-${month}-${date} ${
this.schemeModel.timeSpan.split("-")[1]
}:00`;
} }
}, },
compareTimeStart() { compareTimeStart() {
if (this.compareTimeType === 3) { if (this.compareTimeType === 3) {
return this.compareTimes[0] return this.compareTimes[0];
} }
if (this.schemeModel?.name && this.dateModel?.length) { if (this.schemeModel?.name && this.dateModel?.length) {
let currentInterval = this.schemeModel?.name.slice(-11) let currentInterval = this.schemeModel?.name.slice(-11);
let [currentS, currentE] = currentInterval.split('-') let [currentS, currentE] = currentInterval.split("-");
let month = this.dateModel[0].getMonth() + 1 let month = this.dateModel[0].getMonth() + 1;
let year = this.dateModel[0].getFullYear() let year = this.dateModel[0].getFullYear();
// 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
let inToday = this.checkTimeRange(`00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,this.schemeModel.timeSpan) let inToday = this.checkTimeRange(
let date `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
if(inToday){ this.schemeModel.timeSpan
date = this.dateModel[1].getDate() );
}else{ let date;
date = this.dateModel[0].getDate() if (inToday) {
date = this.dateModel[1].getDate();
} else {
date = this.dateModel[0].getDate();
} }
let currentDate = `${year}-${month}-${date}` let currentDate = `${year}-${month}-${date}`;
let fullS = `${currentDate} ${currentS}:00` let fullS = `${currentDate} ${currentS}:00`;
let fullE = `${currentDate} ${currentE}:00` let fullE = `${currentDate} ${currentE}:00`;
// 同比 // 同比
if (this.compareTimeType === 1) { if (this.compareTimeType === 1) {
return new Date(new Date(fullS).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-') return new Date(new Date(fullS).getTime() - 7 * 24 * 60 * 60 * 1000)
.toLocaleString()
.replaceAll("/", "-");
} }
// 环比 // 环比
if (this.compareTimeType === 2) { if (this.compareTimeType === 2) {
let range = new Date(fullE).getTime() - new Date(fullS).getTime() let range = new Date(fullE).getTime() - new Date(fullS).getTime();
return new Date(new Date(fullS).getTime() - range).toLocaleString().replaceAll('/', '-') return new Date(new Date(fullS).getTime() - range)
.toLocaleString()
.replaceAll("/", "-");
} }
} }
return '' return "";
}, },
compareTimeEnd() { compareTimeEnd() {
if (this.compareTimeType === 3) { if (this.compareTimeType === 3) {
return this.compareTimes[1] return this.compareTimes[1];
} }
if (this.schemeModel?.name && this.dateModel?.length) { if (this.schemeModel?.name && this.dateModel?.length) {
let currentInterval = this.schemeModel?.name.slice(-11) let currentInterval = this.schemeModel?.name.slice(-11);
let [currentS, currentE] = currentInterval.split('-') let [currentS, currentE] = currentInterval.split("-");
let month = this.dateModel[1].getMonth() + 1 let month = this.dateModel[1].getMonth() + 1;
let year = this.dateModel[1].getFullYear() let year = this.dateModel[1].getFullYear();
// 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
let inToday = this.checkTimeRange(`00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,this.schemeModel.timeSpan) let inToday = this.checkTimeRange(
let date `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
if(inToday){ this.schemeModel.timeSpan
date = this.dateModel[1].getDate() );
}else{ let date;
date = this.dateModel[0].getDate() if (inToday) {
date = this.dateModel[1].getDate();
} else {
date = this.dateModel[0].getDate();
} }
let currentDate = `${year}-${month}-${date}` let currentDate = `${year}-${month}-${date}`;
let fullS = `${currentDate} ${currentS}:00` let fullS = `${currentDate} ${currentS}:00`;
let fullE = `${currentDate} ${currentE}:00` let fullE = `${currentDate} ${currentE}:00`;
// 同比 // 同比
if (this.compareTimeType === 1) { if (this.compareTimeType === 1) {
return new Date(new Date(fullE).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-') return new Date(new Date(fullE).getTime() - 7 * 24 * 60 * 60 * 1000)
.toLocaleString()
.replaceAll("/", "-");
} }
// 环比 // 环比
if (this.compareTimeType === 2) { if (this.compareTimeType === 2) {
return fullS return fullS;
} }
} }
return '' return "";
}, },
}, },
mounted() { mounted() {
if(time_config.signalEvaluation_lineTime){ if (time_config.signalEvaluation_lineTime) {
this.dateModel = [ this.dateModel = [
new Date(time_config.signalEvaluation_lineTime[0]), new Date(time_config.signalEvaluation_lineTime[0]),
new Date(time_config.signalEvaluation_lineTime[1]) new Date(time_config.signalEvaluation_lineTime[1]),
]; ];
}else{ } else {
this.dateModel = [ this.dateModel = [
new Date( new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24) new Date(),
),
new Date()
]; ];
} }
this.init(); this.init();
...@@ -680,28 +745,27 @@ export default { ...@@ -680,28 +745,27 @@ export default {
})(); })();
}; };
}, },
beforeDestroy() { beforeDestroy() {},
},
methods: { methods: {
// 判断inner时间区间是否在range时间区间内 // 判断inner时间区间是否在range时间区间内
checkTimeRange(range, inner) { checkTimeRange(range, inner) {
let [rangeStart, rangeEnd] = range.split('-') let [rangeStart, rangeEnd] = range.split("-");
let [innerStart, innerEnd] = inner.split('-') let [innerStart, innerEnd] = inner.split("-");
let rangeS = new Date(`2020-01-01 ${rangeStart}`).getTime() let rangeS = new Date(`2020-01-01 ${rangeStart}`).getTime();
let rangeE = new Date(`2020-01-01 ${rangeEnd}`).getTime() let rangeE = new Date(`2020-01-01 ${rangeEnd}`).getTime();
let innerS = new Date(`2020-01-01 ${innerStart}`).getTime() let innerS = new Date(`2020-01-01 ${innerStart}`).getTime();
let innerE = new Date(`2020-01-01 ${innerEnd}`).getTime() let innerE = new Date(`2020-01-01 ${innerEnd}`).getTime();
if (rangeS <= innerS && rangeE >= innerE) { if (rangeS <= innerS && rangeE >= innerE) {
return true return true;
} }
return false return false;
}, },
compareTimeTypeChange() { compareTimeTypeChange() {
if (this.compareTimeType === 3) return; if (this.compareTimeType === 3) return;
this.getMiddleData() this.getMiddleData();
}, },
detailClick() { detailClick() {
this.showDialog = true this.showDialog = true;
}, },
getTableHeight() { getTableHeight() {
this.tableHeight1 = String(Math.floor(getFontSizeHeight(150))); this.tableHeight1 = String(Math.floor(getFontSizeHeight(150)));
...@@ -709,12 +773,16 @@ export default { ...@@ -709,12 +773,16 @@ export default {
}, },
init(e) { init(e) {
if(new Date(this.dateModel[1]).getTime() - new Date(this.dateModel[0]).getTime() !== 1000*60*60*24){ if (
this.$message.warning('选择时段需要等于24小时') new Date(this.dateModel[1]).getTime() -
return new Date(this.dateModel[0]).getTime() !==
1000 * 60 * 60 * 24
) {
this.$message.warning("选择时段需要等于24小时");
return;
} }
console.log('dateModel',this.dateModel,e) console.log("dateModel", this.dateModel, e);
this.schemeAnalysisLoading = true this.schemeAnalysisLoading = true;
// status 1畅通；2溢出；3拥堵 // status 1畅通；2溢出；3拥堵
Promise.all([ Promise.all([
mainlineSchemeAnalysis({ mainlineSchemeAnalysis({
...@@ -726,92 +794,102 @@ export default { ...@@ -726,92 +794,102 @@ export default {
id: this.areaObj.greenId, id: this.areaObj.greenId,
endDate: formatDateTime(this.dateModel[1]), endDate: formatDateTime(this.dateModel[1]),
startDate: formatDateTime(this.dateModel[0]), startDate: formatDateTime(this.dateModel[0]),
}) }),
]).then(async ([res, res1]) => { ]).then(async ([res, res1]) => {
if (res && res.data) { if (res && res.data) {
const data = res.data.content; const data = res.data.content;
this.leftRes = data; this.leftRes = data;
this.schemeAnalysisLoading = false this.schemeAnalysisLoading = false;
if (data.greenwaveData.length) { if (data.greenwaveData.length) {
this.schemeOption = data.greenwaveData.map(item => { this.schemeOption = data.greenwaveData
return {...item, timeSpan: item.name.slice(-11)} .map((item) => {
}); return { ...item, timeSpan: item.name.slice(-11) };
})
.sort((a, b) => {
let aDate = a.timeSpan.split("-")[0];
let bDate = b.timeSpan.split("-")[0];
let aComplate = `2000-01-01 ${aDate}:00`;
let bComplate = `2000-01-01 ${bDate}:00`;
return (
new Date(aComplate).getTime() - new Date(bComplate).getTime()
);
});
this.schemeModel = this.schemeOption[0]; this.schemeModel = this.schemeOption[0];
this.getDirOption(); this.getDirOption();
this.tableData.body = this.leftRes.crossData; this.tableData.body = this.leftRes.crossData;
this.reverseBarKey += 1; this.reverseBarKey += 1;
setTimeout(() => { setTimeout(() => {
this.$refs.mutLineChart.init() this.$refs.mutLineChart.init();
}, 0); }, 0);
let allDuration = res1.data.content let allDuration = res1.data.content;
// 1畅通；2溢出；3拥堵 // 1畅通；2溢出；3拥堵
let pieData = allDuration.reduce((a, b) => { let pieData = allDuration.reduce((a, b) => {
let aIncludeB = false let aIncludeB = false;
for (let i = 0; i < a.length; i++) { for (let i = 0; i < a.length; i++) {
if (a[i].nameVal === b.status) { if (a[i].nameVal === b.status) {
a[i].value += b.duration a[i].value += b.duration;
a[i].includes.push(b.timeSpan) a[i].includes.push(b.timeSpan);
aIncludeB = true aIncludeB = true;
} }
} }
let color = this.pieColorMap[b.status] let color = this.pieColorMap[b.status];
if (!aIncludeB) { if (!aIncludeB) {
a.push({ a.push({
color: color, color: color,
nameVal: b.status, nameVal: b.status,
value: b.duration, value: b.duration,
includes: [b.timeSpan], includes: [b.timeSpan],
name: this.legendMap[b.status] name: this.legendMap[b.status],
}) });
} }
return a return a;
}, []) }, []);
this.pieData = pieData this.pieData = pieData;
} else { } else {
this.schemeOption = [{ this.schemeOption = [
timeSpan: '00:00-05:00', {
name: null, timeSpan: "00:00-05:00",
dirList:[] name: null,
}] dirList: [],
},
];
this.schemeModel = this.schemeOption[0]; this.schemeModel = this.schemeOption[0];
this.getDirOption(); this.getDirOption();
this.tableData.body = this.leftRes.crossData; this.tableData.body = this.leftRes.crossData;
this.reverseBarKey += 1; this.reverseBarKey += 1;
setTimeout(() => { setTimeout(() => {
this.$refs.mutLineChart.init() this.$refs.mutLineChart.init();
}, 0); }, 0);
let allDuration = res1.data.content let allDuration = res1.data.content;
// 1畅通；2溢出；3拥堵 // 1畅通；2溢出；3拥堵
let pieData = allDuration.reduce((a, b) => { let pieData = allDuration.reduce((a, b) => {
let aIncludeB = false let aIncludeB = false;
for (let i = 0; i < a.length; i++) { for (let i = 0; i < a.length; i++) {
if (a[i].nameVal === b.status) { if (a[i].nameVal === b.status) {
a[i].value += b.duration a[i].value += b.duration;
a[i].includes.push(b.timeSpan) a[i].includes.push(b.timeSpan);
aIncludeB = true aIncludeB = true;
} }
} }
let color = this.pieColorMap[b.status] let color = this.pieColorMap[b.status];
if (!aIncludeB) { if (!aIncludeB) {
a.push({ a.push({
color: color, color: color,
nameVal: b.status, nameVal: b.status,
value: b.duration, value: b.duration,
includes: [b.timeSpan], includes: [b.timeSpan],
name: this.legendMap[b.status] name: this.legendMap[b.status],
}) });
} }
return a return a;
}, []) }, []);
this.pieData = pieData this.pieData = pieData;
} }
} }
}); });
}, },
async getMiddleData() { async getMiddleData() {
this.schemeEvaluationLoading = true this.schemeEvaluationLoading = true;
let [res, resCompare] = await Promise.all([ let [res, resCompare] = await Promise.all([
mainlineSchemeEvaluate({ mainlineSchemeEvaluate({
isCityBrain: 1, isCityBrain: 1,
...@@ -831,25 +909,25 @@ export default { ...@@ -831,25 +909,25 @@ export default {
greenwaveName: this.schemeModel?.name, greenwaveName: this.schemeModel?.name,
metricName: this.indexModelMiddle, metricName: this.indexModelMiddle,
}), }),
]) ]);
console.log('resCompare', resCompare) console.log("resCompare", resCompare);
this.schemeEvaluationLoading = false this.schemeEvaluationLoading = false;
if (res && res.data) { if (res && res.data) {
this.middleRes = res.data.content; this.middleRes = res.data.content;
} }
this.middleRes1 = res.data.content this.middleRes1 = res.data.content;
this.middleRes2 = resCompare.data.content this.middleRes2 = resCompare.data.content;
this.crossDistanceKey += 1; this.crossDistanceKey += 1;
this.oneLineChartKey += 1; this.oneLineChartKey += 1;
this.detailShow = true; this.detailShow = true;
}, },
// 根据选择路口 绘制对应路口三个指标的折线图 id line1 // 根据选择路口 绘制对应路口三个指标的折线图 id line1
async crossClick(crossName) { async crossClick(crossName) {
this.rightClickCrossName = crossName this.rightClickCrossName = crossName;
await this.getRightData() await this.getRightData();
}, },
async getRightData() { async getRightData() {
this.crossEvaluationLoading = true this.crossEvaluationLoading = true;
const res = await mainlineCrossEvaluate({ const res = await mainlineCrossEvaluate({
crossIdList: this.areaObj.crossList.map((item) => item.crossId), crossIdList: this.areaObj.crossList.map((item) => item.crossId),
endHourMinute: this.middleRes.timeSection.split("-")[1], endHourMinute: this.middleRes.timeSection.split("-")[1],
...@@ -859,17 +937,17 @@ export default { ...@@ -859,17 +937,17 @@ export default {
metricName: this.indexModelRight, metricName: this.indexModelRight,
startHourMinute: this.middleRes.timeSection.split("-")[0], startHourMinute: this.middleRes.timeSection.split("-")[0],
}); });
this.crossEvaluationLoading = false this.crossEvaluationLoading = false;
this.rightRes = res.data.content; this.rightRes = res.data.content;
// this.rightRes 为三个指标数据 处理数据 // this.rightRes 为三个指标数据 处理数据
console.log('rightRes', this.rightRes) console.log("rightRes", this.rightRes);
}, },
getDirOption() { getDirOption() {
this.detailShow = false; this.detailShow = false;
this.dirOption = this.schemeModel?.dirList.filter( this.dirOption = this.schemeModel?.dirList.filter(
(item) => !item.name.includes("非协调方向") (item) => !item.name.includes("非协调方向")
); );
this.dirModel = this.dirOption[0] this.dirModel = this.dirOption[0];
this.getIndexOption(); this.getIndexOption();
// this.getRightData() // this.getRightData()
}, },
...@@ -879,29 +957,28 @@ export default { ...@@ -879,29 +957,28 @@ export default {
// }) // })
this.indexOption2 = this.dirModel?.metricList; this.indexOption2 = this.dirModel?.metricList;
// this.indexModelMiddle = this.indexOption?.[0].metricName; // this.indexModelMiddle = this.indexOption?.[0].metricName;
this.indexModelRight = this.indexOption2?.[ this.indexModelRight =
this.indexOption2.length - 1 this.indexOption2?.[this.indexOption2.length - 1].metricName;
].metricName;
this.getMiddleData(); this.getMiddleData();
}, },
}, },
}; };
</script> </script>
<style> <style>
.custom-form-label{ .custom-form-label {
font-size: 14px; font-size: 14px;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
label{ label {
margin-bottom: 0; margin-bottom: 0;
} }
.custom-form-input{ .custom-form-input {
width: 150px width: 150px;
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
::v-deep .el-range-separator{ ::v-deep .el-range-separator {
color: white; color: white;
} }
.area-line { .area-line {
...@@ -913,7 +990,7 @@ label{ ...@@ -913,7 +990,7 @@ label{
//padding: 15px; //padding: 15px;
//border: 1px solid #009ad8; //border: 1px solid #009ad8;
.form3 { .form3 {
width: 350px width: 350px;
} }
::v-deep .el-range-input { ::v-deep .el-range-input {
background-color: transparent; background-color: transparent;
...@@ -939,7 +1016,7 @@ label{ ...@@ -939,7 +1016,7 @@ label{
.content { .content {
display: flex; display: flex;
height:50%; height: 50%;
margin-bottom: 10px; margin-bottom: 10px;
justify-content: space-between; justify-content: space-between;
...@@ -960,12 +1037,12 @@ label{ ...@@ -960,12 +1037,12 @@ label{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #0e2b4c; background-color: #0e2b4c;
.leftPieChartLegend{ .leftPieChartLegend {
height: 100px; height: 100px;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.legendItem{ .legendItem {
height: 30px; height: 30px;
width: 115px; width: 115px;
font-size: 16px; font-size: 16px;
...@@ -973,7 +1050,7 @@ label{ ...@@ -973,7 +1050,7 @@ label{
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
letter-spacing: 1px; letter-spacing: 1px;
.legendItemColor{ .legendItemColor {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-top: 4px; margin-top: 4px;
...@@ -981,9 +1058,13 @@ label{ ...@@ -981,9 +1058,13 @@ label{
} }
} }
} }
.content-container{ .content-container {
padding: 10px; padding: 10px;
flex: 1;width:100%;display: flex;flex-direction: column;background-color: #0e2b4c; flex: 1;
width: 100%;
display: flex;
flex-direction: column;
background-color: #0e2b4c;
} }
.select-box1 { .select-box1 {
...@@ -1009,7 +1090,7 @@ label{ ...@@ -1009,7 +1090,7 @@ label{
flex: 1; flex: 1;
background-color: #0e2b4c; background-color: #0e2b4c;
position: relative; position: relative;
.liner-border{ .liner-border {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -1020,15 +1101,20 @@ label{ ...@@ -1020,15 +1101,20 @@ label{
padding: 1px; padding: 1px;
//background-color: #2e4353; //background-color: #2e4353;
border-radius: 50%; border-radius: 50%;
background-image: linear-gradient(180deg, rgba(94, 187, 206, 0.20), rgba(151, 223, 233, 1), rgba(94, 187, 206, 0.20)); background-image: linear-gradient(
.border-inner{ 180deg,
width:100%; rgba(94, 187, 206, 0.2),
height:100%; rgba(151, 223, 233, 1),
border-radius:50%; rgba(94, 187, 206, 0.2)
background:#0e2b4c; );
.border-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: #0e2b4c;
} }
} }
.liner-border1{ .liner-border1 {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -1040,16 +1126,15 @@ label{ ...@@ -1040,16 +1126,15 @@ label{
background-color: #2e4353; background-color: #2e4353;
border-radius: 50%; border-radius: 50%;
//background-image: linear-gradient(180deg, rgba(94, 187, 206, 0.20), rgba(151, 223, 233, 1), rgba(94, 187, 206, 0.20)); //background-image: linear-gradient(180deg, rgba(94, 187, 206, 0.20), rgba(151, 223, 233, 1), rgba(94, 187, 206, 0.20));
.border-inner1{ .border-inner1 {
width:100%; width: 100%;
height:100%; height: 100%;
border-radius:50%; border-radius: 50%;
background:#0e2b4c; background: #0e2b4c;
} }
} }
} }
&:nth-child(2) { &:nth-child(2) {
margin: 0 20px; margin: 0 20px;
flex: 1; flex: 1;
...@@ -1094,9 +1179,9 @@ label{ ...@@ -1094,9 +1179,9 @@ label{
} }
.content-bottom { .content-bottom {
flex: 1 flex: 1;
} }
.head-timeSelector{ .head-timeSelector {
width: 100%; width: 100%;
height: 25px; height: 25px;
display: flex; display: flex;
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue
View file @ 3183856c
<!--折线图 --> <!--折线图 -->
<template> <template>
<div <div
class="content-bottom mutLineChart" class="content-bottom mutLineChart"
v-loading="detailedIndexLoading" v-loading="detailedIndexLoading"
element-loading-text="数据加载中..." element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0, 0.4)" element-loading-background="rgba(0,0,0, 0.4)"
> >
<div class="item-txt">详细指标查询</div> <div class="item-txt">详细指标查询</div>
<div class="content-container" style="flex: 1;display: flex;flex-direction: column"> <div
<div class="forms" style="display: flex;"> class="content-container"
style="flex: 1; display: flex; flex-direction: column"
>
<div class="forms" style="display: flex">
<div class="select-box"> <div class="select-box">
<label class="custom-form-label">路口名称：</label> <label class="custom-form-label">路口名称：</label>
<el-select <el-select
v-model="crossModel" style="margin-right: 10px"
placeholder="请选择路口" v-model="crossModel"
class="custom-form-input" placeholder="请选择路口"
@change="initLineData" class="custom-form-input"
@change="initLineData"
> >
<el-option <el-option
v-for="item in crossOption" v-for="item in crossOption"
:key="item.crossId" :key="item.crossId"
:label="item.crossName" :label="item.crossName"
:value="item.crossId" :value="item.crossId"
> >
</el-option> </el-option>
</el-select> </el-select>
<label class="custom-form-label">范围：</label> <label class="custom-form-label">范围：</label>
<el-select <el-select
class="custom-form-input" class="custom-form-input"
v-model="scopeModel" v-model="scopeModel"
placeholder="请选择" placeholder="请选择"
@change="scopeChange" @change="scopeChange"
> >
<el-option <el-option
v-for="item in scopeOption" v-for="item in scopeOption"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
> >
</el-option> </el-option>
</el-select> </el-select>
<el-select <el-select
style="margin-left: 10px;" style="margin-left: 10px"
multiple multiple
collapse-tags collapse-tags
v-model="scopeListModel" v-model="scopeListModel"
placeholder="路口" placeholder="路口"
@change="initLineData" @change="initLineData"
> >
<el-option <el-option
v-for="item in scopeListOption" v-for="item in scopeListOption"
:key="item" :key="item"
:label="item" :label="item"
:value="item" :value="item"
> >
</el-option> </el-option>
</el-select> </el-select>
...@@ -61,15 +65,15 @@ ...@@ -61,15 +65,15 @@
<div class="select-box"> <div class="select-box">
<label class="custom-form-label">时间粒度：</label> <label class="custom-form-label">时间粒度：</label>
<el-select <el-select
v-model="timeModel" v-model="timeModel"
placeholder="请选择" placeholder="请选择"
@change="initLineData" @change="initLineData"
> >
<el-option <el-option
v-for="item in timeOptions" v-for="item in timeOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
> >
</el-option> </el-option>
</el-select> </el-select>
...@@ -77,16 +81,16 @@ ...@@ -77,16 +81,16 @@
<div class="select-box"> <div class="select-box">
<label class="custom-form-label">指标选择：</label> <label class="custom-form-label">指标选择：</label>
<el-select <el-select
v-model="indexModel" v-model="indexModel"
placeholder="请选择" placeholder="请选择"
@change="initLineData" @change="initLineData"
@remove-tag="initLineData" @remove-tag="initLineData"
> >
<el-option <el-option
v-for="item in indexOption" v-for="item in indexOption"
:key="item.metricName" :key="item.metricName"
:label="item.metricName" :label="item.metricName"
:value="item.metricName" :value="item.metricName"
> >
</el-option> </el-option>
</el-select> </el-select>
...@@ -94,16 +98,14 @@ ...@@ -94,16 +98,14 @@
</div> </div>
<div class="line-chart noDataMsg" v-if="!indexModel">暂无数据</div> <div class="line-chart noDataMsg" v-if="!indexModel">暂无数据</div>
<div class="line-chart" ref="chartLine" v-else></div> <div class="line-chart" ref="chartLine" v-else></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {bottomMenu, bottomCurve} from "@/common/api/signalEvaluation.js"; import { bottomMenu, bottomCurve } from "@/common/api/signalEvaluation.js";
import {formatDateTime} from "@/common/js/utils.js"; import { formatDateTime } from "@/common/js/utils.js";
import {getFontSize} from "@/config/holo/fontSize"; import { getFontSize } from "@/config/holo/fontSize";
export default { export default {
data() { data() {
...@@ -115,10 +117,10 @@ export default { ...@@ -115,10 +117,10 @@ export default {
scopeListModel: [], scopeListModel: [],
scopeListOption: [], scopeListOption: [],
scopeOption: [ scopeOption: [
{label: "路口", value: 0}, { label: "路口", value: 0 },
{label: "进口道", value: 1}, { label: "进口道", value: 1 },
{label: "方向", value: 2}, { label: "方向", value: 2 },
{label: "车道", value: 3}, { label: "车道", value: 3 },
], ],
xData: [], xData: [],
treeModel: "", treeModel: "",
...@@ -127,9 +129,9 @@ export default { ...@@ -127,9 +129,9 @@ export default {
timeModel: 5, timeModel: 5,
indexModel: "", indexModel: "",
timeOptions: [ timeOptions: [
{label: "5min", value: 5}, { label: "5min", value: 5 },
{label: "15min", value: 15}, { label: "15min", value: 15 },
{label: "30min", value: 30}, { label: "30min", value: 30 },
], ],
// indexOptions: [ // indexOptions: [
// { code: "1", name: "不停车通过率" }, // { code: "1", name: "不停车通过率" },
...@@ -144,31 +146,15 @@ export default { ...@@ -144,31 +146,15 @@ export default {
checkStrictly: true, checkStrictly: true,
multiple: true, multiple: true,
}, },
treeData: [
{
value: "路口",
name: "路口",
children: [
{
value: "进口道",
name: "进口道",
children: [
{value: "东", name: "东"},
{value: "北", name: "北", children: []},
],
},
],
},
],
dirObj: { dirObj: {
"1": "北进口", 1: "北进口",
"2": "东北进口", 2: "东北进口",
"3": "东进口", 3: "东进口",
"4": "东南进口", 4: "东南进口",
"5": "南进口", 5: "南进口",
"6": "西南进口", 6: "西南进口",
"7": "西进口", 7: "西进口",
"8": "西北进口", 8: "西北进口",
}, },
turnObj: { turnObj: {
u: "掉头", u: "掉头",
...@@ -180,8 +166,7 @@ export default { ...@@ -180,8 +166,7 @@ export default {
}; };
}, },
props: ["date", "detailApiData", "areaObj", "indexOption"], props: ["date", "detailApiData", "areaObj", "indexOption"],
mounted() { mounted() {},
},
watch: { watch: {
date(val) { date(val) {
this.dateAll = [ this.dateAll = [
...@@ -198,7 +183,7 @@ export default { ...@@ -198,7 +183,7 @@ export default {
// this.indexModel = this.indexOption?.[ // this.indexModel = this.indexOption?.[
// this.indexOption.length - 1 // this.indexOption.length - 1
// ].metricName; // ].metricName;
this.indexModel = '平均速度' this.indexModel = "平均速度";
this.crossOption = this.areaObj.crossList; this.crossOption = this.areaObj.crossList;
if (this.crossOption.length) { if (this.crossOption.length) {
this.crossModel = this.crossOption[0].crossId; this.crossModel = this.crossOption[0].crossId;
...@@ -208,7 +193,6 @@ export default { ...@@ -208,7 +193,6 @@ export default {
]; ];
this.initLineData(); this.initLineData();
} }
}, },
scopeChange() { scopeChange() {
this.scopeListModel = []; this.scopeListModel = [];
...@@ -242,7 +226,7 @@ export default { ...@@ -242,7 +226,7 @@ export default {
return data; return data;
}, },
initLineData() { initLineData() {
if (!this.indexModel) return if (!this.indexModel) return;
this.detailedIndexLoading = true; this.detailedIndexLoading = true;
bottomCurve({ bottomCurve({
crossId: this.crossModel, crossId: this.crossModel,
...@@ -253,7 +237,7 @@ export default { ...@@ -253,7 +237,7 @@ export default {
startTime: this.dateAll[0], startTime: this.dateAll[0],
endTime: this.dateAll[1], endTime: this.dateAll[1],
}).then((res) => { }).then((res) => {
console.log('bottom data', res.data) console.log("bottom data", res.data);
this.detailedIndexLoading = false; this.detailedIndexLoading = false;
if (res && res.data) { if (res && res.data) {
const data = res.data.content.map((item) => { const data = res.data.content.map((item) => {
...@@ -264,17 +248,6 @@ export default { ...@@ -264,17 +248,6 @@ export default {
} }
}); });
}, },
timeSetSort(time) {
// 使用 Set 进行去重
const uniqueTimeStrings = [...new Set(time)];
// 使用 sort 方法进行排序
const sortedTimeStrings = uniqueTimeStrings.sort((a, b) => {
const timeA = new Date(`2000-01-01 ${a}`);
const timeB = new Date(`2000-01-01 ${b}`);
return timeA - timeB;
});
return sortedTimeStrings;
},
getChart(data) { getChart(data) {
const xData = [...new Set(data.map((item) => item.metricTime))]; const xData = [...new Set(data.map((item) => item.metricTime))];
// const xData = metricsList.map((item) => item.metricTime); // const xData = metricsList.map((item) => item.metricTime);
...@@ -287,10 +260,20 @@ export default { ...@@ -287,10 +260,20 @@ export default {
objData[item.scopeName].push(item.value || 0); objData[item.scopeName].push(item.value || 0);
}); });
const seriesData = []; const seriesData = [];
let colors = ['#00933a','#ff8200','#c0cfc5','#f5da3e', let colors = [
'#5b45ff','#ed4438','#aceb2d','#5e6c52', "#00933a",
'#458fff','#c3b5f0','#9a5b67'] "#ff8200",
legendData.forEach((item,index) => { "#c0cfc5",
"#f5da3e",
"#5b45ff",
"#ed4438",
"#aceb2d",
"#5e6c52",
"#458fff",
"#c3b5f0",
"#9a5b67",
];
legendData.forEach((item, index) => {
seriesData.push({ seriesData.push({
yAxisIndex: 0, yAxisIndex: 0,
name: item, name: item,
...@@ -300,26 +283,26 @@ export default { ...@@ -300,26 +283,26 @@ export default {
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: colors[index] color: colors[index],
// color: obj[item].color, // color: obj[item].color,
}, },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
1, 1,
0, 0,
0, 0,
[ [
{ {
offset: 0, offset: 0,
color: "rgba(62, 170, 247, 0)", // 100% 处的颜色 color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: colors[index] , // 0% 处的颜色 color: colors[index], // 0% 处的颜色
}, },
], ],
false false
), ),
}, },
data: objData[item], data: objData[item],
...@@ -330,7 +313,7 @@ export default { ...@@ -330,7 +313,7 @@ export default {
// color: colors, // color: colors,
// color: colorList, // color: colorList,
legend: { legend: {
inactiveColor:'rgba(255,255,255,0.7)', inactiveColor: "rgba(255,255,255,0.7)",
right: 0, right: 0,
textStyle: { textStyle: {
color: "rgba(255,255,255,0.9)", color: "rgba(255,255,255,0.9)",
...@@ -342,17 +325,17 @@ export default { ...@@ -342,17 +325,17 @@ export default {
bottom: 0, bottom: 0,
left: 0, left: 0,
top: 40, top: 40,
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: 'rgba(0,0,0,0.8)', backgroundColor: "rgba(0,0,0,0.8)",
borderWidth: 0, borderWidth: 0,
textStyle: { textStyle: {
fontSize: getFontSize(12), fontSize: getFontSize(12),
color: 'white', color: "white",
}, },
confine:true confine: true,
// formatter: (params) => { // formatter: (params) => {
// return `${this.indexModel} : ${params[0].value}`; // return `${this.indexModel} : ${params[0].value}`;
// }, // },
...@@ -365,7 +348,7 @@ export default { ...@@ -365,7 +348,7 @@ export default {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
// prettier-ignore // prettier-ignore
data: xData data: xData,
}, },
{ {
type: "category", type: "category",
...@@ -383,9 +366,9 @@ export default { ...@@ -383,9 +366,9 @@ export default {
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,0.2)' color: "rgba(255,255,255,0.2)",
} },
} },
}, },
{ {
type: "value", type: "value",
...@@ -394,9 +377,9 @@ export default { ...@@ -394,9 +377,9 @@ export default {
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,0.2)' color: "rgba(255,255,255,0.2)",
} },
} },
}, },
], ],
series: seriesData, series: seriesData,
......
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