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