Skip to content

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

wj-smartcity 引入vue-echarts使用resize特性完成图表自适应并减少option代码量，部分字体大小自适应

parent ef8ce42a
Hide whitespace changes
Inline Side-by-side
Showing with 633 additions and 682 deletions
wj-smartcity/package.json
View file @ 5b912e2f
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-clipboard2": "^0.3.1", "vue-clipboard2": "^0.3.1",
"vue-draggable-resizable": "^2.3.0", "vue-draggable-resizable": "^2.3.0",
"vue-echarts": "^6.7.2",
"vue-router": "^3.4.6", "vue-router": "^3.4.6",
"vue-seamless-scroll": "^1.1.23", "vue-seamless-scroll": "^1.1.23",
"vuex": "^3.5.1" "vuex": "^3.5.1"
......
wj-smartcity/src/main.js
View file @ 5b912e2f
...@@ -18,6 +18,9 @@ Vue.component('vue-draggable-resizable', VueDraggableResizable) ...@@ -18,6 +18,9 @@ Vue.component('vue-draggable-resizable', VueDraggableResizable)
// script引入element use // script引入element use
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import "echarts";
import Chart from 'vue-echarts';
Vue.component('v-chart', Chart)
Vue.use(ElementUI, { Vue.use(ElementUI, {
size: 'small', size: 'small',
}) })
......
wj-smartcity/src/views/signal/index.vue
View file @ 5b912e2f
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
@showPolygon="showPolygon" @showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs> @openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div> <div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
<!--切换图层 收起放开侧边栏-->
<layers-switch <layers-switch
ref="switch" ref="switch"
:show="boxesShow" :show="boxesShow"
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/queueLength.vue
View file @ 5b912e2f
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="d-chart" id="d-queueLength"></div> <v-chart class="d-chart" autoresize :option="option"/>
</div> </div>
</template> </template>
...@@ -25,6 +25,7 @@ export default { ...@@ -25,6 +25,7 @@ export default {
props:['crossData'], props:['crossData'],
data() { data() {
return { return {
option:{},
turnMap: {'r':'右转','s':'直行','l':'左转'}, turnMap: {'r':'右转','s':'直行','l':'左转'},
options: [], options: [],
selectVal: '', selectVal: '',
...@@ -240,12 +241,7 @@ export default { ...@@ -240,12 +241,7 @@ export default {
return series; return series;
})(), })(),
}; };
if (!this.chart) { this.option = option
this.chart = echarts.init(
document.getElementById("d-queueLength")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
}, },
// 渲染转向级别排队图表 // 渲染转向级别排队图表
renderTurn() { renderTurn() {
...@@ -383,12 +379,7 @@ export default { ...@@ -383,12 +379,7 @@ export default {
return series; return series;
})(), })(),
}; };
if (!this.chart) { this.option = option
this.chart = echarts.init(
document.getElementById("d-queueLength")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
}, },
}, },
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficFlow.vue
View file @ 5b912e2f
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="d-chart" id="d-trafficFlow"></div> <!-- <div class="d-chart" id="d-trafficFlow"></div>-->
<v-chart class="d-chart" autoresize :option="option"/>
</div> </div>
</template> </template>
...@@ -27,6 +28,7 @@ export default { ...@@ -27,6 +28,7 @@ export default {
name: 'trafficFlow', name: 'trafficFlow',
data() { data() {
return { return {
option:{},
colors :[ colors :[
"rgba(24, 144, 255, 1)", "rgba(24, 144, 255, 1)",
"rgba(0, 189, 208, 1)", "rgba(0, 189, 208, 1)",
...@@ -299,16 +301,10 @@ export default { ...@@ -299,16 +301,10 @@ export default {
data: yDatas[key], data: yDatas[key],
}) })
} }
console.log("series", series);
return series; return series;
})(), })(),
}; };
if (!this.chart) { this.option = option
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
}, },
// 渲染转向级别流量图表 // 渲染转向级别流量图表
renderTurn() { renderTurn() {
...@@ -471,12 +467,7 @@ export default { ...@@ -471,12 +467,7 @@ export default {
return series; return series;
})(), })(),
}; };
if (!this.chart) { this.option = option
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
}, },
// 渲染车道级流量图表 // 渲染车道级流量图表
renderLane(){ renderLane(){
...@@ -637,12 +628,7 @@ export default { ...@@ -637,12 +628,7 @@ export default {
return series; return series;
})(), })(),
}; };
if (!this.chart) { this.option = option
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
} }
}, },
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficStatus.vue
View file @ 5b912e2f
<template> <template>
<div class="full-w-h d-trafficStatus"> <div class="full-w-h d-trafficStatus">
<div class="d-trafficStatus-pie" id="d-trafficStatus-pie"></div> <v-chart class="d-trafficStatus-pie" autoresize :option="option"/>
<div class="legends"> <div class="legends">
<div class="legend-item" v-for="(item, index) of pieData" :key="index"> <div class="legend-item" v-for="(item, index) of pieData" :key="index">
<div :style="`background-color:${colorMap[item.name]}`" class="color"></div> <div :style="`background-color:${colorMap[item.name]}`" class="color"></div>
...@@ -34,12 +34,50 @@ export default { ...@@ -34,12 +34,50 @@ export default {
'spilloverTimeRate':'#ffd145', 'spilloverTimeRate':'#ffd145',
'unbalanceTimeRate':'#afafaf', 'unbalanceTimeRate':'#afafaf',
'unblockedTimeRate':'#00933a' 'unblockedTimeRate':'#00933a'
} },
} }
}, },
mounted() { mounted() {
this.renderCharts() this.renderCharts()
}, },
computed:{
option(){
return {
tooltip: {
show:false,
trigger: 'item'
},
legend: {
show:false,
right: 0,
top: 'middle',
orient: 'vertical',
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
}
},
labelLine: {
show: false
},
data: this.pieData
}
]
}
}
},
methods:{ methods:{
renderCharts(){ renderCharts(){
getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{ getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{
...@@ -59,45 +97,6 @@ export default { ...@@ -59,45 +97,6 @@ export default {
} }
} }
this.pieData = result this.pieData = result
let chartDom = document.getElementById('d-trafficStatus-pie');
if(!this.chart){
this.chart = echarts.init(chartDom);
}
console.log('result',result)
let option = {
tooltip: {
show:false,
trigger: 'item'
},
legend: {
show:false,
right: 0,
top: 'middle',
orient: 'vertical',
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
}
},
labelLine: {
show: false
},
data: result
}
]
};
option && this.chart.setOption(option);
}) })
} }
......
wj-smartcity/src/views/signal/msgs/right/keyCross.vue
View file @ 5b912e2f
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<msg-card class="item-keyCross" title="重点路口监测"> <msg-card class="item-keyCross" title="重点路口监测">
<div class="full-w-h" style="position: relative"> <div class="full-w-h" style="position: relative">
<div class="keyCrossTitle">排队长度(m)</div> <div class="keyCrossTitle">排队长度(m)</div>
<div id="keyCross" class="full-w-h chart"> <v-chart autoresize :option="option"/>
</div>
</div> </div>
</msg-card> </msg-card>
</template> </template>
...@@ -18,66 +17,23 @@ let timer = null; ...@@ -18,66 +17,23 @@ let timer = null;
export default { export default {
name: "keyCross", name: "keyCross",
components: { components: {
msgCard, msgCard
}, },
data() { data() {
return { return {
tabsLoading: true, tabsLoading: true,
charts: {}, charts: {},
xData:[],
chartResult:{},
}; };
}, },
methods: { computed:{
getData(){ option(){
getKeyCross({crossId:''}).then(res=>{ return {
console.log('key cross...',res)
if(res.content){
let xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
}
}
return a
},[])
let results = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[item.dir] = [item.queueLength]
}
}
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
}else{
a[key] = [0]
}
}
}
return a
},{})
console.log('results',results)
this.renderCharts(xData, results)
}
})
},
renderCharts(xData, lists){
let option = {
dataZoom: { dataZoom: {
type: "inside", type: "inside",
startValue: Object.keys(lists).length - 6, startValue: Object.keys(this.chartResult).length - 6,
endValue: Object.keys(lists).length - 1, endValue: Object.keys(this.chartResult).length - 1,
}, },
color: [ color: [
"rgba(24, 144, 255, 1)", "rgba(24, 144, 255, 1)",
...@@ -124,7 +80,7 @@ export default { ...@@ -124,7 +80,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xData, data: this.xData,
axisLabel: { axisLabel: {
fontSize: getFontSize(12), fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)", color: "rgba(126, 139, 166, 1)",
...@@ -152,7 +108,9 @@ export default { ...@@ -152,7 +108,9 @@ export default {
}, },
series: (() => { series: (() => {
let series = []; let series = [];
for(let key in lists){ console.log('this.chartResult',this.chartResult)
for(let key in this.chartResult){
console.log('push')
let nameReal = this.$store.state.dicts.Direction.find((item) => { let nameReal = this.$store.state.dicts.Direction.find((item) => {
return item.code == key; return item.code == key;
}).name }).name
...@@ -166,19 +124,58 @@ export default { ...@@ -166,19 +124,58 @@ export default {
emphasis: { emphasis: {
focus: "series", focus: "series",
}, },
data: lists[key], data: this.chartResult[key],
}) })
} }
console.log("series", series);
return series; return series;
})(), })(),
}; }
this.charts.cross = echarts.init(
document.getElementById("keyCross")
);
this.charts.cross && this.charts.cross.setOption(option);
} }
}, },
methods: {
getData(){
getKeyCross({crossId:''}).then(res=>{
console.log('key cross...',res)
if(res.content){
this.xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
}
}
return a
},[])
this.chartResult = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[item.dir] = [item.queueLength]
}
}
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
}else{
a[key] = [0]
}
}
}
return a
},{})
}
})
},
},
mounted() { mounted() {
let queue = []; let queue = [];
let needDicts = [ let needDicts = [
......
wj-smartcity/src/views/signal/msgs/trafficFlow.vue
View file @ 5b912e2f
...@@ -16,7 +16,7 @@ import msgCard from "../../../components/Standard/msg-card.vue"; ...@@ -16,7 +16,7 @@ import msgCard from "../../../components/Standard/msg-card.vue";
import {getFlows, getSingalFlow} from "@/dao/optApi"; import {getFlows, getSingalFlow} from "@/dao/optApi";
let timer = null; let timer = null;
let watchChartWc = null
export default { export default {
name: "trafficFlow", name: "trafficFlow",
components: { components: {
...@@ -370,6 +370,7 @@ export default { ...@@ -370,6 +370,7 @@ export default {
this.charts.cross && this.charts.cross.setOption(option); this.charts.cross && this.charts.cross.setOption(option);
} }
}, },
mounted() { mounted() {
// let queue = []; // let queue = [];
// let needDicts = [ // let needDicts = [
......
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/evaluationIndicators.vue
View file @ 5b912e2f
<template> <template>
<div class="full-w-h" style="background-color:#061b33;color: rgba(255,255,255,0.8);display: flex; flex-direction: row"> <div class="full-w-h"
style="background-color:#061b33;color: rgba(255,255,255,0.8);display: flex; flex-direction: row">
<div class="left-container"> <div class="left-container">
<div class="radio-container"> <div class="radio-container">
<el-radio-group class="groups" @input="dimensionChange" v-model="radio"> <el-radio-group class="groups" @input="dimensionChange" v-model="radio">
...@@ -10,7 +11,7 @@ ...@@ -10,7 +11,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div class="options"> <div class="options">
<div class="option">时间粒度： <div class="option"><label class="custom-form-label">时间粒度：</label>
<el-select @change="timeGranularityChange" class="form1" v-model="timeGranularity" placeholder="请选择"> <el-select @change="timeGranularityChange" class="form1" v-model="timeGranularity" placeholder="请选择">
<el-option <el-option
v-for="item in timeGranularityOptions" v-for="item in timeGranularityOptions"
...@@ -50,14 +51,14 @@ ...@@ -50,14 +51,14 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="option">当前时段： <div class="option"><label class="custom-form-label">当前时段：</label>
<el-date-picker class="form3" :clearable="false" <el-date-picker class="form3" :clearable="false"
v-model="currentTimes" @change="currentChange" v-model="currentTimes" @change="currentChange"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"> type="datetimerange">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="option">对比时段： <div class="option"><label class="custom-form-label">对比时段：</label>
<el-radio-group @input="compareTimeTypeChange" v-model="compareTimeType"> <el-radio-group @input="compareTimeTypeChange" v-model="compareTimeType">
<el-radio :label="1">同比</el-radio> <el-radio :label="1">同比</el-radio>
<el-radio :label="2">环比</el-radio> <el-radio :label="2">环比</el-radio>
...@@ -76,29 +77,29 @@ ...@@ -76,29 +77,29 @@
<div class="leftPies"> <div class="leftPies">
<div class="pie"> <div class="pie">
<div class="pieTitle">溢出时长</div> <div class="pieTitle">溢出时长</div>
<div class="chart" id="overflowPie"></div> <v-chart class="chart" autoresize :option="overflowPieOption"/>
</div> </div>
<div class="pie"> <div class="pie">
<div class="pieTitle">空放时长</div> <div class="pieTitle">空放时长</div>
<div class="chart" id="emptyPie"></div> <v-chart class="chart" autoresize :option="emptyPieOption"/>
</div> </div>
</div> </div>
<div class="centerLines"> <div class="centerLines">
<div class="line"> <div class="line">
<div>交通流量</div> <div>交通流量</div>
<div class="chart" id="trafficFlow"></div> <v-chart class="chart" autoresize :option="trafficFlowOption"/>
</div> </div>
<div class="line"> <div class="line">
<div>排队长度</div> <div>排队长度</div>
<div class="chart" id="queueLength"></div> <v-chart class="chart" autoresize :option="queueLengthOption"/>
</div> </div>
<div class="line"> <div class="line">
<div>平均速度</div> <div>平均速度</div>
<div class="chart" id="averageSpeed"></div> <v-chart class="chart" autoresize :option="averageSpeedOption"/>
</div> </div>
<div class="line"> <div class="line">
<div>停车次数</div> <div>停车次数</div>
<div class="chart" id="stopNumber"></div> <v-chart class="chart" autoresize :option="stopNumberOption"/>
</div> </div>
</div> </div>
</div> </div>
...@@ -150,6 +151,16 @@ export default { ...@@ -150,6 +151,16 @@ export default {
props: ['cross'], props: ['cross'],
data() { data() {
return { return {
overflowData: [],
emptyData: [],
trafficFlowCur:[],
trafficFlowCom:[],
queueLengthCur:[],
queueLengthCom:[],
averageSpeedCur:[],
averageSpeedCom:[],
stopNumberCur:[],
stopNumberCom:[],
// 路口级 0 进口道级 1 转向级 2 车道级 3 // 路口级 0 进口道级 1 转向级 2 车道级 3
radio: 0, radio: 0,
timeGranularityOptions: [ timeGranularityOptions: [
...@@ -171,197 +182,109 @@ export default { ...@@ -171,197 +182,109 @@ export default {
laneLevelOptions: [], laneLevelOptions: [],
planActive: {}, planActive: {},
charts: {}, charts: {},
colors:['#00bdd0','#1f93ff'], colors: ['#00bdd0', '#1f93ff'],
} }
}, },
computed: { computed: {
currentTimeStart() {
return this.currentTimes[0] overflowPieOption() {
}, return {
currentTimeEnd() { color: this.colors,
return this.currentTimes[1] tooltip: {
}, trigger: 'item'
compareTimeStart() { },
if (this.compareTimeType === 3) { legend: {
return this.compareTimes[0] icon: 'circle',
} bottom: '3%',
// 同比 left: 'center',
if (this.compareTimeType === 1) { textStyle: {
return new Date(new Date(this.currentTimes[0]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-') color: 'rgba(255,255,255,0.8)',
}
// 环比
if (this.compareTimeType === 2) {
let range = new Date(this.currentTimes[1]).getTime() - new Date(this.currentTimes[0]).getTime()
return new Date(new Date(this.currentTimes[0]).getTime() - range).toLocaleString().replaceAll('/', '-')
}
},
compareTimeEnd() {
if (this.compareTimeType === 3) {
return this.compareTimes[1]
}
// 同比
if (this.compareTimeType === 1) {
return new Date(new Date(this.currentTimes[1]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
}
// 环比
if (this.compareTimeType === 2) {
return this.currentTimes[0]
}
},
},
mounted() {
let cur1 = new Date().toLocaleString().replaceAll('/', '-')
let cur0 = new Date(new Date(cur1).getTime() - 1000 * 60 * 60).toLocaleString().replaceAll('/', '-')
this.$set(this, 'currentTimes', [cur0, cur1])
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
},
watch: {
cross: {
handler(newVal) {
this.$nextTick(() => {
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
})
},
deep: true
}
},
methods: {
// 选择维度变化
dimensionChange() {
if ([1, 2, 3].includes(this.radio)) {
bottomMenu({
crossId: this.cross.crossId,
scope: this.radio
}).then(res => {
if (this.radio === 1) {
this.crossInLevelOptions = res.data.content
this.crossInLevel = res.data.content[0]
}
if (this.radio === 2) {
this.turnLevelOptions = res.data.content
this.turnLevel = res.data.content[0]
} }
if (this.radio === 3) { },
this.laneLevelOptions = res.data.content series: [
this.laneLevel = res.data.content[0] {
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
itemStyle: {
borderRadius: '5%',
},
labelLine: {
show: false
},
data: this.overflowData
} }
this.$nextTick(() => { ]
this.getLines()
})
})
} else {
this.getLines()
}
},
// 当前时间变化
currentChange(e) {
let start = `${new Date(this.currentTimes[0]).getFullYear()}${new Date(this.currentTimes[0]).getMonth()+1}${new Date(this.currentTimes[0]).getDate()}`
let end = `${new Date(this.currentTimes[1]).getFullYear()}${new Date(this.currentTimes[1]).getMonth()+1}${new Date(this.currentTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
}
},
// 对比时段变化
compareTimeChange() {
let start = `${new Date(this.compareTimes[0]).getFullYear()}${new Date(this.compareTimes[0]).getMonth()+1}${new Date(this.compareTimes[0]).getDate()}`
let end = `${new Date(this.compareTimes[1]).getFullYear()}${new Date(this.compareTimes[1]).getMonth()+1}${new Date(this.compareTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
}
},
// 时间粒度变化
timeGranularityChange() {
this.getLines()
},
// 车道/进口等变化
scopeChange() {
this.getLines()
},
// 对比时段类型变化
compareTimeTypeChange() {
if ([1, 2].includes(this.compareTimeType)) {
this.getLines()
this.getOverflowEmpty()
} }
}, },
// 获取当前&对比时段四个折线图信息 emptyPieOption() {
async getLines() { return {
let currentParam = { color: this.colors,
startTime: this.currentTimeStart, tooltip: {
endTime: this.currentTimeEnd, trigger: 'item'
crossId: this.cross.crossId, },
minutes: this.timeGranularity, legend: {
scope: this.radio, icon: 'circle',
scopeList: [], bottom: '3%',
} left: 'center',
let compareParam = { textStyle: {
startTime: this.compareTimeStart, color: 'rgba(255,255,255,0.8)',
endTime: this.compareTimeEnd, }
crossId: this.cross.crossId, },
minutes: this.timeGranularity, series: [
scope: this.radio, {
scopeList: [], itemStyle: {
} borderRadius: '5%'
// 进口道级/转向级/车道级 参数 },
if ([1, 2, 3].includes(this.radio)) { name: '',
let scopeList type: 'pie',
if (this.radio === 1) { center: ['50%', '45%'],
scopeList = [this.crossInLevel] radius: ['40%', '70%'],
} avoidLabelOverlap: false,
if (this.radio === 2) { label: {
scopeList = [this.turnLevel] show: false,
} position: 'center'
if (this.radio === 3) { },
scopeList = [this.laneLevel] emphasis: {
} label: {
currentParam = Object.assign({}, currentParam, {scopeList: scopeList}) show: false,
compareParam = Object.assign({}, compareParam, {scopeList: scopeList}) fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.emptyData
}
]
} }
Promise.all([
bottomCurve(Object.assign({}, currentParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '停车次数'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '停车次数'})),
]).then(([res1, res2, res3, res4, res5, res6, res7, res8]) => {
this.refreshTrafficFlow(res1.data.content, res2.data.content)
this.refreshQueueLength(res3.data.content, res4.data.content)
this.refreshAverageSpeed(res5.data.content, res6.data.content)
this.refreshStopNumber(res7.data.content, res8.data.content)
})
}, },
refreshTrafficFlow(cur, com) { trafficFlowOption() {
let chartDom = document.getElementById('trafficFlow');
if (!this.charts['line1']) {
this.charts['line1'] = echarts.init(chartDom);
}
let series = [] let series = []
let curS = cur.map(item => { let curS = this.trafficFlowCur.map(item => {
return item.value return item.value
}) })
let comS = com.map(item => { let comS = this.trafficFlowCom.map(item => {
return item.value return item.value
}) })
let xData = cur.map(item => { let xData = this.trafficFlowCur.map(item => {
return item.metricTime return item.metricTime
}) })
let xData1 = com.map(item => { let xData1 = this.trafficFlowCom.map(item => {
return item.metricTime return item.metricTime
}) })
let ifTwoXAxis = [2, 3].includes(this.compareTimeType) let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
...@@ -396,7 +319,7 @@ export default { ...@@ -396,7 +319,7 @@ export default {
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
} }
let option = { return {
color: this.colors, color: this.colors,
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
...@@ -416,7 +339,7 @@ export default { ...@@ -416,7 +339,7 @@ export default {
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis:xAxis, xAxis: xAxis,
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: { splitLine: {
...@@ -426,25 +349,20 @@ export default { ...@@ -426,25 +349,20 @@ export default {
} }
}, },
series: series series: series
};
this.charts['line1'].setOption(option, {notMerge: true});
},
refreshQueueLength(cur, com) {
let chartDom = document.getElementById('queueLength');
if (!this.charts['line2']) {
this.charts['line2'] = echarts.init(chartDom);
} }
},
queueLengthOption(){
let series = [] let series = []
let curS = cur.map(item => { let curS = this.queueLengthCur.map(item => {
return item.value return item.value
}) })
let comS = com.map(item => { let comS = this.queueLengthCom.map(item => {
return item.value return item.value
}) })
let xData = cur.map(item => { let xData = this.queueLengthCur.map(item => {
return item.metricTime return item.metricTime
}) })
let xData1 = com.map(item => { let xData1 = this.queueLengthCom.map(item => {
return item.metricTime return item.metricTime
}) })
let ifTwoXAxis = [2, 3].includes(this.compareTimeType) let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
...@@ -479,7 +397,7 @@ export default { ...@@ -479,7 +397,7 @@ export default {
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
} }
let option = { return {
color: this.colors, color: this.colors,
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
...@@ -510,24 +428,19 @@ export default { ...@@ -510,24 +428,19 @@ export default {
}, },
series: series series: series
}; };
this.charts['line2'].setOption(option, {notMerge: true});
}, },
refreshAverageSpeed(cur, com) { averageSpeedOption(){
let chartDom = document.getElementById('averageSpeed');
if (!this.charts['line3']) {
this.charts['line3'] = echarts.init(chartDom);
}
let series = [] let series = []
let curS = cur.map(item => { let curS = this.averageSpeedCur.map(item => {
return item.value return item.value
}) })
let comS = com.map(item => { let comS = this.averageSpeedCom.map(item => {
return item.value return item.value
}) })
let xData = cur.map(item => { let xData = this.averageSpeedCur.map(item => {
return item.metricTime return item.metricTime
}) })
let xData1 = com.map(item => { let xData1 = this.averageSpeedCom.map(item => {
return item.metricTime return item.metricTime
}) })
let ifTwoXAxis = [2, 3].includes(this.compareTimeType) let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
...@@ -562,7 +475,7 @@ export default { ...@@ -562,7 +475,7 @@ export default {
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
} }
let option = { return {
color: this.colors, color: this.colors,
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
...@@ -593,24 +506,19 @@ export default { ...@@ -593,24 +506,19 @@ export default {
}, },
series: series series: series
}; };
this.charts['line3'].setOption(option, {notMerge: true});
}, },
refreshStopNumber(cur, com) { stopNumberOption(){
let chartDom = document.getElementById('stopNumber');
if (!this.charts['line4']) {
this.charts['line4'] = echarts.init(chartDom);
}
let series = [] let series = []
let curS = cur.map(item => { let curS = this.stopNumberCur.map(item => {
return item.value return item.value
}) })
let comS = com.map(item => { let comS = this.stopNumberCom.map(item => {
return item.value return item.value
}) })
let xData = cur.map(item => { let xData = this.stopNumberCur.map(item => {
return item.metricTime return item.metricTime
}) })
let xData1 = com.map(item => { let xData1 = this.stopNumberCom.map(item => {
return item.metricTime return item.metricTime
}) })
let ifTwoXAxis = [2, 3].includes(this.compareTimeType) let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
...@@ -645,7 +553,7 @@ export default { ...@@ -645,7 +553,7 @@ export default {
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
} }
let option = { return {
color: this.colors, color: this.colors,
tooltip: { tooltip: {
...@@ -676,8 +584,179 @@ export default { ...@@ -676,8 +584,179 @@ export default {
} }
}, },
series: series series: series
}; }
this.charts['line4'].setOption(option, {notMerge: true}); },
currentTimeStart() {
return this.currentTimes[0]
},
currentTimeEnd() {
return this.currentTimes[1]
},
compareTimeStart() {
if (this.compareTimeType === 3) {
return this.compareTimes[0]
}
// 同比
if (this.compareTimeType === 1) {
return new Date(new Date(this.currentTimes[0]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
}
// 环比
if (this.compareTimeType === 2) {
let range = new Date(this.currentTimes[1]).getTime() - new Date(this.currentTimes[0]).getTime()
return new Date(new Date(this.currentTimes[0]).getTime() - range).toLocaleString().replaceAll('/', '-')
}
},
compareTimeEnd() {
if (this.compareTimeType === 3) {
return this.compareTimes[1]
}
// 同比
if (this.compareTimeType === 1) {
return new Date(new Date(this.currentTimes[1]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
}
// 环比
if (this.compareTimeType === 2) {
return this.currentTimes[0]
}
},
},
mounted() {
let cur1 = new Date().toLocaleString().replaceAll('/', '-')
let cur0 = new Date(new Date(cur1).getTime() - 1000 * 60 * 60).toLocaleString().replaceAll('/', '-')
this.$set(this, 'currentTimes', [cur0, cur1])
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
},
watch: {
cross: {
handler(newVal) {
this.$nextTick(() => {
this.getSchemeData()
this.getOverflowEmpty()
this.getLines()
})
},
deep: true
}
},
methods: {
// 选择维度变化
dimensionChange() {
if ([1, 2, 3].includes(this.radio)) {
bottomMenu({
crossId: this.cross.crossId,
scope: this.radio
}).then(res => {
if (this.radio === 1) {
this.crossInLevelOptions = res.data.content
this.crossInLevel = res.data.content[0]
}
if (this.radio === 2) {
this.turnLevelOptions = res.data.content
this.turnLevel = res.data.content[0]
}
if (this.radio === 3) {
this.laneLevelOptions = res.data.content
this.laneLevel = res.data.content[0]
}
this.$nextTick(() => {
this.getLines()
})
})
} else {
this.getLines()
}
},
// 当前时间变化
currentChange(e) {
let start = `${new Date(this.currentTimes[0]).getFullYear()}${new Date(this.currentTimes[0]).getMonth() + 1}${new Date(this.currentTimes[0]).getDate()}`
let end = `${new Date(this.currentTimes[1]).getFullYear()}${new Date(this.currentTimes[1]).getMonth() + 1}${new Date(this.currentTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
}
},
// 对比时段变化
compareTimeChange() {
let start = `${new Date(this.compareTimes[0]).getFullYear()}${new Date(this.compareTimes[0]).getMonth() + 1}${new Date(this.compareTimes[0]).getDate()}`
let end = `${new Date(this.compareTimes[1]).getFullYear()}${new Date(this.compareTimes[1]).getMonth() + 1}${new Date(this.compareTimes[1]).getDate()}`
if (start !== end) {
this.$message.warning('不允许跨天查询，请重新选择时间！')
} else {
this.getLines()
this.getOverflowEmpty()
}
},
// 时间粒度变化
timeGranularityChange() {
this.getLines()
},
// 车道/进口等变化
scopeChange() {
this.getLines()
},
// 对比时段类型变化
compareTimeTypeChange() {
if ([1, 2].includes(this.compareTimeType)) {
this.getLines()
this.getOverflowEmpty()
}
},
// 获取当前&对比时段四个折线图信息
async getLines() {
let currentParam = {
startTime: this.currentTimeStart,
endTime: this.currentTimeEnd,
crossId: this.cross.crossId,
minutes: this.timeGranularity,
scope: this.radio,
scopeList: [],
}
let compareParam = {
startTime: this.compareTimeStart,
endTime: this.compareTimeEnd,
crossId: this.cross.crossId,
minutes: this.timeGranularity,
scope: this.radio,
scopeList: [],
}
// 进口道级/转向级/车道级 参数
if ([1, 2, 3].includes(this.radio)) {
let scopeList
if (this.radio === 1) {
scopeList = [this.crossInLevel]
}
if (this.radio === 2) {
scopeList = [this.turnLevel]
}
if (this.radio === 3) {
scopeList = [this.laneLevel]
}
currentParam = Object.assign({}, currentParam, {scopeList: scopeList})
compareParam = Object.assign({}, compareParam, {scopeList: scopeList})
}
Promise.all([
bottomCurve(Object.assign({}, currentParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '交通流量'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '最大排队长度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '平均速度'})),
bottomCurve(Object.assign({}, currentParam, {metricCode: '停车次数'})),
bottomCurve(Object.assign({}, compareParam, {metricCode: '停车次数'})),
]).then(([res1, res2, res3, res4, res5, res6, res7, res8]) => {
[this.trafficFlowCur, this.trafficFlowCom] = [res1.data.content, res2.data.content];
[this.queueLengthCur, this.queueLengthCom] = [res3.data.content, res4.data.content];
[this.averageSpeedCur, this.averageSpeedCom] = [res5.data.content, res6.data.content];
[this.stopNumberCur, this.stopNumberCom] = [res7.data.content, res8.data.content];
})
}, },
// 获取当前&对比时段两饼图信息 // 获取当前&对比时段两饼图信息
getOverflowEmpty() { getOverflowEmpty() {
...@@ -691,113 +770,19 @@ export default { ...@@ -691,113 +770,19 @@ export default {
endDate: this.compareTimeEnd, endDate: this.compareTimeEnd,
crossId: this.cross.crossId crossId: this.cross.crossId
} }
Promise.all([crossEvaluate(currentParam), crossEvaluate(compareParam)]).then(([res1, res2]) => { Promise.all([crossEvaluate(currentParam), crossEvaluate(compareParam)]).then(([res1, res2]) => {
this.refreshPies(res1.data.content, res2.data.content) this.refreshPies(res1.data.content, res2.data.content)
}) })
}, },
refreshPies(cur, com) { refreshPies(cur, com) {
let chartDom = document.getElementById('overflowPie'); this.overflowData = [
if (!this.charts['pie1']) {
this.charts['pie1'] = echarts.init(chartDom);
}
let overflowData = [
{value: cur.spilloverSum, name: '当前时段'}, {value: cur.spilloverSum, name: '当前时段'},
{value: com.spilloverSum, name: '对比时段'}, {value: com.spilloverSum, name: '对比时段'},
] ]
let option = { this.emptyData = [
color:this.colors,
tooltip: {
trigger: 'item'
},
legend: {
icon:'circle',
bottom: '3%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
itemStyle:{
borderRadius: '5%',
},
labelLine: {
show: false
},
data: overflowData
}
]
};
this.charts['pie1'].setOption(option, {notMerge: true});
let chartDom1 = document.getElementById('emptyPie');
if (!this.charts['pie2']) {
this.charts['pie2'] = echarts.init(chartDom1);
}
let emptyData = [
{value: cur.emptyPhaseSum, name: '当前时段'}, {value: cur.emptyPhaseSum, name: '当前时段'},
{value: com.emptyPhaseSum, name: '对比时段'}, {value: com.emptyPhaseSum, name: '对比时段'},
] ]
let option1 = {
color: this.colors,
tooltip: {
trigger: 'item'
},
legend: {
icon:'circle',
bottom: '3%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
itemStyle:{
borderRadius:'5%'
},
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: emptyData
}
]
};
this.charts['pie2'].setOption(option1, {notMerge: true});
}, },
// 获取右下角配时方案 // 获取右下角配时方案
async getSchemeData() { async getSchemeData() {
...@@ -875,7 +860,8 @@ export default { ...@@ -875,7 +860,8 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 10px; margin-bottom: 10px;
.pieTitle{
.pieTitle {
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -883,17 +869,24 @@ export default { ...@@ -883,17 +869,24 @@ export default {
color: white; color: white;
background-color: #042947; background-color: #042947;
} }
.chart{
.chart {
background-color: #05203b; background-color: #05203b;
} }
} }
} }
.left-container{
width: 70%;height: calc(100% - 10px);display: flex; flex-direction: column;background-color: #061b33; .left-container {
width: 70%;
height: calc(100% - 10px);
display: flex;
flex-direction: column;
background-color: #061b33;
margin-right: 10px; margin-right: 10px;
margin-top: 10px; margin-top: 10px;
} }
.centerLines { .centerLines {
flex: 1; flex: 1;
height: 100%; height: 100%;
...@@ -909,10 +902,11 @@ export default { ...@@ -909,10 +902,11 @@ export default {
flex-direction: column; flex-direction: column;
} }
} }
.right-container{
.right-container {
padding-top: 10px; padding-top: 10px;
.cross-scheme-title{ .cross-scheme-title {
display: flex; display: flex;
align-items: center; align-items: center;
height: 35px; height: 35px;
...@@ -922,12 +916,14 @@ export default { ...@@ -922,12 +916,14 @@ export default {
} }
} }
.rightScheme { .rightScheme {
//width: calc(100% - 1150px); //width: calc(100% - 1150px);
height: calc(100% - 35px); height: calc(100% - 35px);
background-color: #061b33; background-color: #061b33;
width: 100%; width: 100%;
padding: 8px; padding: 8px;
.schemeCross { .schemeCross {
height: 60%; height: 60%;
display: flex; display: flex;
...@@ -943,7 +939,8 @@ export default { ...@@ -943,7 +939,8 @@ export default {
height: 50%; height: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.schemeTitle{
.schemeTitle {
height: 32px; height: 32px;
background-image: linear-gradient(to right, #0a3563, transparent); background-image: linear-gradient(to right, #0a3563, transparent);
width: 100%; width: 100%;
...@@ -964,7 +961,8 @@ export default { ...@@ -964,7 +961,8 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
::v-deep label{
::v-deep label {
margin-bottom: 0; margin-bottom: 0;
} }
} }
...@@ -980,7 +978,8 @@ export default { ...@@ -980,7 +978,8 @@ export default {
flex-grow: 1; flex-grow: 1;
} }
} }
.radio-container{
.radio-container {
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
...@@ -990,6 +989,7 @@ export default { ...@@ -990,6 +989,7 @@ export default {
padding-left: 15px; padding-left: 15px;
background-image: linear-gradient(to right, #0a3563, transparent); background-image: linear-gradient(to right, #0a3563, transparent);
} }
.options { .options {
height: 40px; height: 40px;
display: flex; display: flex;
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/index.vue
View file @ 5b912e2f
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="area-line"> <div class="area-line">
<div class="head-timeSelector"> <div class="head-timeSelector">
<div>时段选择：</div> <div class="custom-form-label">时段选择：</div>
<el-date-picker <el-date-picker
@change="init" @change="init"
v-model="dateModel" v-model="dateModel"
...@@ -21,11 +21,7 @@ ...@@ -21,11 +21,7 @@
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 id="pie1" class="chart"> <v-chart class="chart" autoresize :option="leftPieOption"/>
<div class="liner-border">
<div class="border-inner"></div>
</div>
</div>
<div class="leftPieChartLegend"> <div class="leftPieChartLegend">
<div class="legendItem" v-for="item of pieData"> <div class="legendItem" v-for="item of pieData">
<div class="legendItemColor" :style="`background-color:${pieColorMap[item.nameVal]}`"></div> <div class="legendItemColor" :style="`background-color:${pieColorMap[item.nameVal]}`"></div>
...@@ -42,9 +38,9 @@ ...@@ -42,9 +38,9 @@
<div class="select-box1"> <div class="select-box1">
<div class="row_item"> <div class="row_item">
<div class="row_col"> <div class="row_col">
<div>当前时段：</div> <div class="custom-form-label">当前时段：</div>
<el-select <el-select
style="width:150px" class="custom-form-input"
v-model="schemeModel" v-model="schemeModel"
placeholder="" placeholder=""
filterable filterable
...@@ -61,7 +57,7 @@ ...@@ -61,7 +57,7 @@
</el-select> </el-select>
</div> </div>
<div class="row_col"> <div class="row_col">
<div class="button_left">场景：{{ sceneName || '--' }}</div> <div class="custom-form-label button_left">场景：{{ sceneName || '--' }}</div>
<div> <div>
<el-button <el-button
type="primary" type="primary"
...@@ -74,9 +70,9 @@ ...@@ -74,9 +70,9 @@
</div> </div>
<div class="row_item"> <div class="row_item">
<div class="row_col"> <div class="row_col">
<div>对比时段：</div> <div class="custom-form-label">对比时段：</div>
<el-select <el-select
style="width:150px" class="custom-form-input"
v-model="compareTimeType" v-model="compareTimeType"
@change="compareTimeTypeChange" @change="compareTimeTypeChange"
> >
...@@ -90,9 +86,9 @@ ...@@ -90,9 +86,9 @@
</el-select> </el-select>
</div> </div>
<div class="row_col"> <div class="row_col">
<div>指标：</div> <div class="custom-form-label">指标：</div>
<el-select <el-select
style="width:150px" class="custom-form-input"
v-model="indexModelMiddle" v-model="indexModelMiddle"
placeholder="" placeholder=""
filterable filterable
...@@ -109,7 +105,7 @@ ...@@ -109,7 +105,7 @@
</div> </div>
</div> </div>
<div class="row_item" v-if="compareTimeType===3"> <div class="row_item" v-if="compareTimeType===3">
<div>自定义对比时段：</div> <div class="custom-form-label">自定义对比时段：</div>
<el-date-picker :clearable="false" @change="getMiddleData" class="form3" <el-date-picker :clearable="false" @change="getMiddleData" class="form3"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
v-model="compareTimes" v-model="compareTimes"
...@@ -144,8 +140,7 @@ ...@@ -144,8 +140,7 @@
type="areaLine" type="areaLine"
@crossClick="crossClick" @crossClick="crossClick"
></crossDistance> ></crossDistance>
<div class="chart" id="line1"></div> <v-chart class="chart" autoresize :option="rightLineOption"/>
</div> </div>
</div> </div>
...@@ -180,6 +175,7 @@ export default { ...@@ -180,6 +175,7 @@ export default {
name: 'lineEvaluation', name: 'lineEvaluation',
data() { data() {
return { return {
rightClickCrossName:'',
pieColorMap:{ pieColorMap:{
1:'#00933a', 1:'#00933a',
2: '#ff8200', 2: '#ff8200',
...@@ -291,7 +287,7 @@ export default { ...@@ -291,7 +287,7 @@ export default {
], ],
indexOption2: [], indexOption2: [],
leftRes: {}, leftRes: {},
rightRes: {}, rightRes: [],
rightTableModel: {}, rightTableModel: {},
legendMap: { legendMap: {
1: '畅通', 1: '畅通',
...@@ -316,6 +312,148 @@ export default { ...@@ -316,6 +312,148 @@ export default {
}, },
props: ["areaObj"], props: ["areaObj"],
computed: { computed: {
rightLineOption(){
let targetCrossData = (this.rightRes||[]).find(item => {
return item.crossName === this.rightClickCrossName
})
let indexes = {
queueList: '非协调排队长度',
stopTimesList: '非协调停车次数',
twoStopRateList: '非协调二次停车率(%)'
}
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
}),
yAxisIndex: indexes[key].includes('率') ? 1 : 0
}
)
}
}
}
return {
tooltip: {
trigger: 'axis'
},
legend: {
type: "scroll",
show: true,
right: 0,
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
grid: {
top: 30,
left: 0,
right: 0,
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
},
yAxis: [{
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}, {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
}
}],
series: seriesData
};
},
leftPieOption(){
let currentTotal = 0
for (let item of this.pieData) {
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]})
return {
color: colors,
tooltip: {
confine: true,
trigger: 'item',
enterable: true,
formatter: (params) => {
let back = "";
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>' + back + "</div>";
}
},
legend: {
show: false,
bottom: '5%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
itemStyle: {
borderRadius: 4,
borderColor: 'transparent',
borderWidth: 2
},
name: '',
type: 'pie',
center: ['50%', '50%'],
radius: ['45%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.pieData
}
]
};
},
// 当前场景 计算逻辑为： 若当前时段包含前面饼图中的溢出时段 则当前场景为溢出 // 当前场景 计算逻辑为： 若当前时段包含前面饼图中的溢出时段 则当前场景为溢出
// 若不包含溢出 则检测是否包含拥堵 若包含拥堵 则当前场景为拥堵 // 若不包含溢出 则检测是否包含拥堵 若包含拥堵 则当前场景为拥堵
// 都不是 则当前场景为畅通 // 都不是 则当前场景为畅通
...@@ -560,7 +698,6 @@ export default { ...@@ -560,7 +698,6 @@ export default {
return a return a
}, []) }, [])
this.pieData = pieData this.pieData = pieData
this.refreshPie(pieData)
} else { } else {
this.schemeOption = [{ this.schemeOption = [{
timeSpan: '00:00-05:00', timeSpan: '00:00-05:00',
...@@ -599,86 +736,10 @@ export default { ...@@ -599,86 +736,10 @@ export default {
return a return a
}, []) }, [])
this.pieData = pieData this.pieData = pieData
this.refreshPie(pieData)
// this.$message.warning('选中干线当前时间无绿波数据！')
} }
} }
}); });
}, },
refreshPie(pieData) {
let currentTotal = 0
for (let item of pieData) {
currentTotal += item.value
}
let except = 24 * 60 * 60 - currentTotal
let colors = pieData.map(item => {
return item.color
})
colors.push('#00933a')
pieData.push({nameVal: 1, value: except, includes: [], name: this.legendMap[1]})
let chartDom = document.getElementById('pie1');
if (!this.charts['pie1']) {
this.charts['pie1'] = echarts.init(chartDom);
}
let option = {
color: colors,
tooltip: {
confine: true,
trigger: 'item',
enterable: true,
formatter: (params) => {
let back = "";
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>' + back + "</div>";
}
},
legend: {
show: false,
bottom: '5%',
left: 'center',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
series: [
{
itemStyle: {
borderRadius: 4,
borderColor: 'transparent',
borderWidth: 2
},
name: '',
type: 'pie',
center: ['50%', '50%'],
radius: ['45%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: pieData
}
]
};
this.charts['pie1'].setOption(option, {notMerge: true});
},
// async getData() {
// },
async getMiddleData() { async getMiddleData() {
this.schemeEvaluationLoading = true this.schemeEvaluationLoading = true
let [res, resCompare] = await Promise.all([ let [res, resCompare] = await Promise.all([
...@@ -708,91 +769,14 @@ export default { ...@@ -708,91 +769,14 @@ export default {
} }
this.middleRes1 = res.data.content this.middleRes1 = res.data.content
this.middleRes2 = resCompare.data.content this.middleRes2 = resCompare.data.content
this.$nextTick(() => {
this.$refs.lineChart.getChart()
})
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
await this.getRightData() await this.getRightData()
if (this.rightRes && this.rightRes.length) {
let chartDom = document.getElementById('line1');
if (!this.charts['line1']) {
this.charts['line1'] = echarts.init(chartDom);
}
let targetCrossData = this.rightRes.find(item => {
return item.crossName === crossName
})
let indexes = {
queueList: '非协调排队长度',
stopTimesList: '非协调停车次数',
twoStopRateList: '非协调二次停车率(%)'
}
let seriesData = []
let xData
for (let key in indexes) {
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
}),
yAxisIndex: indexes[key].includes('率') ? 1 : 0
}
)
}
let option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true,
right: 0,
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
grid: {
top: 30,
left: 0,
right: 0,
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData,
},
yAxis: [{
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}, {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
}
}],
series: seriesData
};
this.charts['line1'].setOption(option, {notMerge: true});
}
}, },
async getRightData() { async getRightData() {
this.crossEvaluationLoading = true this.crossEvaluationLoading = true
...@@ -832,7 +816,16 @@ export default { ...@@ -832,7 +816,16 @@ export default {
}, },
}; };
</script> </script>
<style>
.custom-form-label{
font-size: 14px;
width: 70px;
text-align: right;
}
.custom-form-input{
width: 150px
}
</style>
<style lang="less" scoped> <style lang="less" scoped>
::v-deep .el-range-separator{ ::v-deep .el-range-separator{
color: white; color: white;
...@@ -900,6 +893,7 @@ export default { ...@@ -900,6 +893,7 @@ export default {
align-items: center; align-items: center;
.legendItem{ .legendItem{
height: 30px; height: 30px;
font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -939,23 +933,6 @@ export default { ...@@ -939,23 +933,6 @@ export default {
flex: 1; flex: 1;
background-color: #0e2b4c; background-color: #0e2b4c;
position: relative; position: relative;
//.liner-border{
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translateX(-50%) translateY(-50%);
// aspect-ratio: 1;
// height: 90%;
// padding: 1px;
// 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:#0a1d2e;
// }
//}
} }
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue
View file @ 5b912e2f
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
<div class="content-container" style="flex: 1;display: flex;flex-direction: column"> <div class="content-container" style="flex: 1;display: flex;flex-direction: column">
<div class="forms" style="display: flex;"> <div class="forms" style="display: flex;">
<div class="select-box"> <div class="select-box">
<label>路口名称：</label> <label class="custom-form-label">路口名称：</label>
<el-select <el-select
v-model="crossModel" v-model="crossModel"
placeholder="请选择路口" placeholder="请选择路口"
style="width: 200px;" class="custom-form-input"
@change="initLineData" @change="initLineData"
> >
<el-option <el-option
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
> >
</el-option> </el-option>
</el-select> </el-select>
<label style="margin-left: 10px;">范围：</label> <label class="custom-form-label">范围：</label>
<el-select <el-select
style="width: 100px;" class="custom-form-input"
v-model="scopeModel" v-model="scopeModel"
placeholder="请选择" placeholder="请选择"
@change="scopeChange" @change="scopeChange"
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</el-select> </el-select>
</div> </div>
<div class="select-box"> <div class="select-box">
<label>时间粒度：</label> <label class="custom-form-label">时间粒度：</label>
<el-select <el-select
v-model="timeModel" v-model="timeModel"
placeholder="请选择" placeholder="请选择"
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</el-select> </el-select>
</div> </div>
<div class="select-box"> <div class="select-box">
<label>指标选择：</label> <label class="custom-form-label">指标选择：</label>
<el-select <el-select
v-model="indexModel" v-model="indexModel"
placeholder="请选择" placeholder="请选择"
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/oneLineChart.vue
View file @ 5b912e2f
<template> <template>
<div id="one-line-chart" ref="chartLine"></div> <v-chart class="chart" autoresize :option="chartLineOption"/>
</template> </template>
<script> <script>
...@@ -15,15 +15,16 @@ export default { ...@@ -15,15 +15,16 @@ export default {
}; };
}, },
mounted() { mounted() {
// if (this.data1 && this.data2) {
// this.getChart();
// }
}, },
computed: {}, computed: {
props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'], chartLineOption(){
methods: { let [cur, com] = [[],[]]
getChart() { if(this.data1?.length){
let [cur, com] = [this.data1, this.data2] cur = this.data1
}
if(this.data2?.length){
com = this.data2
}
const xData = cur.map((item) => item.metricTime); const xData = cur.map((item) => item.metricTime);
const xData1 = com.map((item) => item.metricTime); const xData1 = com.map((item) => item.metricTime);
let ifTwoXAxis = [2, 3].includes(this.compareTimeType) let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
...@@ -67,15 +68,13 @@ export default { ...@@ -67,15 +68,13 @@ export default {
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
} }
let myChart = echarts.init(this.$refs.chartLine); return {
let option = {
legend:{ legend:{
show: true, show: true,
icon:'circle', icon:'circle',
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.8)', color: 'rgba(255,255,255,0.8)',
} }
}, },
backgroundColor: "transparent", backgroundColor: "transparent",
tooltip: { tooltip: {
...@@ -119,17 +118,13 @@ export default { ...@@ -119,17 +118,13 @@ export default {
}, },
], ],
series: series, series: series,
}; }
myChart.setOption(option, true); }
watchChartWc = new ResizeObserver(() => { },
myChart.resize() props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
}) methods: {
watchChartWc.observe(document.getElementById('one-line-chart'))
},
}, },
beforeDestroy() { beforeDestroy() {
watchChartWc?.unobserve(document.getElementById('one-line-chart'))
} }
}; };
</script> </script>
......
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