|
|
|
@ -1,66 +1,58 @@ |
|
|
|
<template> |
|
|
|
<div class='congestion'> |
|
|
|
<WgtTitle :title="'感知事件查询'" ></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="7" /> |
|
|
|
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectId" /> |
|
|
|
<div class="searchPanel"> |
|
|
|
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in areaOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option> |
|
|
|
<el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in yearOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
<el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-date-picker |
|
|
|
size="mini" |
|
|
|
v-if="year != 'quarter'" |
|
|
|
class="selectRoad" |
|
|
|
v-model="dateTime" |
|
|
|
style="width:140px;" |
|
|
|
:type="year" |
|
|
|
placeholder="请选择" |
|
|
|
/> |
|
|
|
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime" aria-placeholder="请选季度" /> |
|
|
|
<el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;" |
|
|
|
:type="year" placeholder="请选择" /> |
|
|
|
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime" |
|
|
|
aria-placeholder="请选季度" /> |
|
|
|
|
|
|
|
<el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button> |
|
|
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" >重置</el-button> |
|
|
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="body" > |
|
|
|
<div id="chart1" class="keep-ratio" > |
|
|
|
|
|
|
|
<div class="body"> |
|
|
|
<div> |
|
|
|
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle> |
|
|
|
<div id="chart1" class="btnChart" /> |
|
|
|
</div> |
|
|
|
<div id="chart2" class="keep-ratio" > |
|
|
|
|
|
|
|
<div> |
|
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
|
<div id="chart2" class="btnChart" /> |
|
|
|
</div> |
|
|
|
<div id="chart3" class="keep-ratio" > |
|
|
|
|
|
|
|
<div> |
|
|
|
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle> |
|
|
|
<div id="chart3" class="btnChart" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
|
|
|
|
import WgtTitle from '../../../widgets/title' |
|
|
|
import ProgressBar from './progressBar.vue'; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import chart1 from "./assets/charts"; |
|
|
|
import chart2 from "./assets/charts2"; |
|
|
|
import chart3 from "./assets/charts3"; |
|
|
|
import ElQuarterPicker from './ElQuarterPicker' |
|
|
|
import { getWarningTrend,getWarningSectionType,getSectionMarkNumber,getRoadSectionList } from '../../../../../../../api/event/perceiveEvent'; |
|
|
|
import WgtTitle from '../../../widgets/title' |
|
|
|
import ProgressBar from './progressBar'; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import chart1 from "./assets/charts"; |
|
|
|
import chart2 from "./assets/charts2"; |
|
|
|
import chart3 from "./assets/charts3"; |
|
|
|
import ElQuarterPicker from './ElQuarterPicker' |
|
|
|
import { getWarningTrend, getWarningSectionType, getSectionMarkNumber, getRoadSectionList } from '../../../../../../../api/event/perceiveEvent'; |
|
|
|
|
|
|
|
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { |
|
|
|
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => { |
|
|
|
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.fillStyle = gr; |
|
|
|
@ -69,14 +61,14 @@ |
|
|
|
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); |
|
|
|
ctx.lineTo(width + x, height + y - radius); |
|
|
|
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); |
|
|
|
ctx.lineTo(radius + x, height +y); |
|
|
|
ctx.lineTo(radius + x, height + y); |
|
|
|
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|
|
|
ctx.closePath(); |
|
|
|
//ctx.stroke(); |
|
|
|
ctx.fill() |
|
|
|
} |
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: 'EventQuery', |
|
|
|
components: { |
|
|
|
WgtTitle, |
|
|
|
@ -85,11 +77,11 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
yearOptions:[ |
|
|
|
yearOptions: [ |
|
|
|
{ |
|
|
|
value: 'year', |
|
|
|
label: '年' |
|
|
|
},{ |
|
|
|
label: '年度' |
|
|
|
}, { |
|
|
|
value: 'month', |
|
|
|
label: '月' |
|
|
|
}, |
|
|
|
@ -102,127 +94,132 @@ |
|
|
|
label: '季' |
|
|
|
},], |
|
|
|
areaOptions: [{ |
|
|
|
value: '0531', |
|
|
|
label: '济南' |
|
|
|
value: '1', |
|
|
|
label: '济南方向' |
|
|
|
}, { |
|
|
|
value: '菏泽', |
|
|
|
label: '菏泽' |
|
|
|
value: '2', |
|
|
|
label: '菏泽方向' |
|
|
|
}], |
|
|
|
dateTime:"", |
|
|
|
area: '0531', |
|
|
|
dataList:[ |
|
|
|
dateTime: "2024", |
|
|
|
area: '1', |
|
|
|
dataList: [ |
|
|
|
{ |
|
|
|
title:"殷家林枢纽" |
|
|
|
title: "殷家林枢纽" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"大学城立交" |
|
|
|
title: "大学城立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"长清立交" |
|
|
|
title: "长清立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"松竹枢纽" |
|
|
|
title: "松竹枢纽" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"孝里立交" |
|
|
|
title: "孝里立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"平阴立交" |
|
|
|
title: "平阴立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"孔村枢纽" |
|
|
|
title: "孔村枢纽" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"平阴南立交" |
|
|
|
title: "平阴南立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"魏雪枢纽" |
|
|
|
title: "魏雪枢纽" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"东平立交" |
|
|
|
title: "东平立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"东平湖枢纽" |
|
|
|
title: "东平湖枢纽" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"韩岗立交" |
|
|
|
title: "韩岗立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"梁山立交" |
|
|
|
title: "梁山立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"鄄郓枢纽" |
|
|
|
title: "鄄郓枢纽" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"嘉祥西立交" |
|
|
|
title: "嘉祥西立交" |
|
|
|
}, |
|
|
|
{ |
|
|
|
title:"王官屯枢纽" |
|
|
|
title: "王官屯枢纽" |
|
|
|
} |
|
|
|
], |
|
|
|
quarter:"", |
|
|
|
selectId:1, |
|
|
|
year:"year", |
|
|
|
list:[ |
|
|
|
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|
|
|
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|
|
|
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|
|
|
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|
|
|
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|
|
|
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'} |
|
|
|
quarter: "", |
|
|
|
selectId: 3, |
|
|
|
year: "year", |
|
|
|
list: [ |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, |
|
|
|
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectProgress(item){ |
|
|
|
selectProgress(item) { |
|
|
|
this.selectId = item.id; |
|
|
|
}, |
|
|
|
searchQuery(){ |
|
|
|
onReset() { |
|
|
|
this.area = '1'; |
|
|
|
this.year = "year"; |
|
|
|
this.dateTime = '2024'; |
|
|
|
this.selectId = 1; |
|
|
|
}, |
|
|
|
searchQuery() { |
|
|
|
let dateTime = this.dateTime; |
|
|
|
if ( dateTime == "" ) { |
|
|
|
if (dateTime == "") { |
|
|
|
this.$message.error('没有选日期参数！'); |
|
|
|
return |
|
|
|
} |
|
|
|
var quarter = 0; |
|
|
|
if ( this.year == "year") { |
|
|
|
if (this.year == "year") { |
|
|
|
dateTime = new Date(dateTime); |
|
|
|
dateTime = dateTime.getFullYear() + "-01-01 00:00:00"; |
|
|
|
console.log(dateTime); |
|
|
|
} |
|
|
|
if ( this.year == "month") { |
|
|
|
if (this.year == "month") { |
|
|
|
dateTime = new Date(dateTime); |
|
|
|
let m = dateTime.getMonth()+1; |
|
|
|
m = m < 10?"0"+m:m; |
|
|
|
dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00"; |
|
|
|
let m = dateTime.getMonth() + 1; |
|
|
|
m = m < 10 ? "0" + m : m; |
|
|
|
dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00"; |
|
|
|
console.log(dateTime); |
|
|
|
} |
|
|
|
if ( this.year == "quarter" ) { |
|
|
|
if (this.year == "quarter") { |
|
|
|
console.log(dateTime); |
|
|
|
dateTime = new Date(dateTime); |
|
|
|
let m = dateTime.getMonth()+1; |
|
|
|
if ( m == 1) m = 1; |
|
|
|
if ( m == 2) m = 4; |
|
|
|
if ( m == 3) m = 7; |
|
|
|
if ( m == 4) m = 10; |
|
|
|
let m = dateTime.getMonth() + 1; |
|
|
|
if (m == 1) m = 1; |
|
|
|
if (m == 2) m = 4; |
|
|
|
if (m == 3) m = 7; |
|
|
|
if (m == 4) m = 10; |
|
|
|
|
|
|
|
quarter = m; |
|
|
|
m = m < 10?"0"+m:m; |
|
|
|
dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00"; |
|
|
|
m = m < 10 ? "0" + m : m; |
|
|
|
dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00"; |
|
|
|
console.log(dateTime); |
|
|
|
} |
|
|
|
|
|
|
|
if ( this.year == "date" ) { |
|
|
|
if (this.year == "date") { |
|
|
|
this.year = "day"; |
|
|
|
dateTime = new Date(dateTime); |
|
|
|
let m = dateTime.getMonth()+1; |
|
|
|
m = m < 10?"0"+m:m; |
|
|
|
let m = dateTime.getMonth() + 1; |
|
|
|
m = m < 10 ? "0" + m : m; |
|
|
|
let d = dateTime.getDate(); |
|
|
|
d = d < 10?"0"+d:d; |
|
|
|
dateTime = dateTime.getFullYear() + "-" + m +"-"+d+" 00:00:00"; |
|
|
|
d = d < 10 ? "0" + d : d; |
|
|
|
dateTime = dateTime.getFullYear() + "-" + m + "-" + d + " 00:00:00"; |
|
|
|
} |
|
|
|
|
|
|
|
//感知事件趋势 |
|
|
|
@ -230,57 +227,65 @@ |
|
|
|
"type": this.year, |
|
|
|
"sectionId": this.selectId, |
|
|
|
"createTime": dateTime, |
|
|
|
"direction":1, |
|
|
|
}).then(res=>{ |
|
|
|
console.log(res); |
|
|
|
chart1.series[0].data = []; |
|
|
|
if ( res.code == 200 ) { |
|
|
|
"direction": this.area, |
|
|
|
}).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
let data = res.data; |
|
|
|
if ( this.year == "year" ) { |
|
|
|
let years = []; |
|
|
|
chart1.series[0].data = []; |
|
|
|
if (data.length > 0) { |
|
|
|
const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev)); |
|
|
|
let xData = []; |
|
|
|
let numbers = []; |
|
|
|
data.forEach(it=>{ |
|
|
|
years.push(it.month+"月"); |
|
|
|
numbers.push(it.number); |
|
|
|
}) |
|
|
|
chart1.xAxis.data = years; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
} |
|
|
|
|
|
|
|
if ( this.year == "month" ) { |
|
|
|
let months = []; |
|
|
|
let numbers = []; |
|
|
|
data.forEach(it=>{ |
|
|
|
months.push(it.day.split("-")[2]+"日"); |
|
|
|
numbers.push(it.number); |
|
|
|
}) |
|
|
|
chart1.xAxis.data = months; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
data.forEach(it => { |
|
|
|
if (this.year == "year") { |
|
|
|
xData.push(it.month + "月"); |
|
|
|
} |
|
|
|
|
|
|
|
if ( this.year == "day" ) { |
|
|
|
let times = []; |
|
|
|
let numbers = []; |
|
|
|
data.forEach(it=>{ |
|
|
|
times.push(it.time.split(" ")[1]+"小时"); |
|
|
|
numbers.push(it.number); |
|
|
|
}) |
|
|
|
chart1.xAxis.data = times; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
if (this.year == "month") { |
|
|
|
xData.push(it.day.split("-")[2] + "日"); |
|
|
|
} |
|
|
|
if (this.year == "day") { |
|
|
|
xData.push(it.time.split(" ")[1] + "小时"); |
|
|
|
} |
|
|
|
if (this.year == "quarter") { |
|
|
|
xData.push(it.QUARTER); |
|
|
|
} |
|
|
|
if (it.number == maxObject.number) { |
|
|
|
numbers.push({ |
|
|
|
value: it.number, |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
colorStops: [{ |
|
|
|
offset: 0, color: '#FFB904' // 0% 处的颜色 |
|
|
|
}, { |
|
|
|
offset: 1, color: '#FF6969' // 100% 处的颜色 |
|
|
|
}], |
|
|
|
global: false // 缺省为 false |
|
|
|
}, |
|
|
|
borderRadius: 6 |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
numbers.push({ |
|
|
|
value: it.number, |
|
|
|
itemStyle: { |
|
|
|
borderRadius: 6 |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if ( this.year == "quarter" ) { |
|
|
|
let months = []; |
|
|
|
let numbers = []; |
|
|
|
data.forEach(it=>{ |
|
|
|
months.push(it.MONTH+"月"); |
|
|
|
numbers.push(it.number); |
|
|
|
}) |
|
|
|
chart1.xAxis.data = months; |
|
|
|
|
|
|
|
chart1.xAxis.data = xData; |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.myChart1.setOption(chart1); |
|
|
|
}); |
|
|
|
|
|
|
|
@ -289,69 +294,57 @@ |
|
|
|
"type": this.year, |
|
|
|
"sectionId": this.selectId, |
|
|
|
"createTime": dateTime, |
|
|
|
"direction":1, |
|
|
|
}).then(res=>{ |
|
|
|
console.log(res); |
|
|
|
|
|
|
|
"direction": this.area, |
|
|
|
}).then(res => { |
|
|
|
chart2.series[0].data = []; |
|
|
|
if ( res.code == 200 ) { |
|
|
|
if (res.code == 200) { |
|
|
|
let types = []; |
|
|
|
let numbers = []; |
|
|
|
const gapData = { |
|
|
|
name: "", |
|
|
|
value: 0.5, |
|
|
|
itemStyle: { |
|
|
|
color: "transparent", |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
let data = res.data.warningTypeList; |
|
|
|
let total= res.data.total; |
|
|
|
let total = res.data.total; |
|
|
|
|
|
|
|
data.forEach((it)=>{ |
|
|
|
// 1-交通拥堵 2-行人 3-非机动车 4-停车5-倒车/逆行 6-烟火7-撒落物8-异常天气 9-护栏碰撞 |
|
|
|
if ( it.warningType == 1) { |
|
|
|
data.forEach((it) => { |
|
|
|
if (it.warningType == 1) { |
|
|
|
types.push("交通拥堵"); |
|
|
|
|
|
|
|
} |
|
|
|
if ( it.warningType == 2) { |
|
|
|
if (it.warningType == 2) { |
|
|
|
types.push("行人"); |
|
|
|
} |
|
|
|
if ( it.warningType == 3) { |
|
|
|
if (it.warningType == 3) { |
|
|
|
types.push("非机动车"); |
|
|
|
} |
|
|
|
if ( it.warningType == 4) { |
|
|
|
if (it.warningType == 4) { |
|
|
|
types.push("停车"); |
|
|
|
} |
|
|
|
if ( it.warningType == 5) { |
|
|
|
if (it.warningType == 5) { |
|
|
|
types.push("倒车/逆行"); |
|
|
|
} |
|
|
|
if ( it.warningType == 6) { |
|
|
|
if (it.warningType == 6) { |
|
|
|
types.push("烟火"); |
|
|
|
} |
|
|
|
if ( it.warningType == 7) { |
|
|
|
if (it.warningType == 7) { |
|
|
|
types.push("撒落物"); |
|
|
|
} |
|
|
|
if ( it.warningType == 8) { |
|
|
|
if (it.warningType == 8) { |
|
|
|
types.push("异常天气"); |
|
|
|
} |
|
|
|
if ( it.warningType == 9) { |
|
|
|
if (it.warningType == 9) { |
|
|
|
types.push("护栏碰撞"); |
|
|
|
} |
|
|
|
|
|
|
|
numbers.push({ |
|
|
|
name:types[types.length - 1], |
|
|
|
value:it.number |
|
|
|
name: types[types.length - 1], |
|
|
|
value: it.number |
|
|
|
}); |
|
|
|
numbers.push(gapData); |
|
|
|
}) |
|
|
|
console.log(types); |
|
|
|
chart2.legend.data = types; |
|
|
|
chart2.legend.formatter = function(name){ |
|
|
|
chart2.legend.formatter = function (name) { |
|
|
|
let total = 0 |
|
|
|
let target |
|
|
|
for (let i = 0; i < numbers.length; i++) { |
|
|
|
total += numbers[i].value; |
|
|
|
if (types[i] === name) { |
|
|
|
if (types[i] == name) { |
|
|
|
target = numbers[i].value; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -369,7 +362,7 @@ |
|
|
|
return |
|
|
|
} |
|
|
|
console.log(params); |
|
|
|
chart2.title.text = Math.round(params.data.value/total * 100) + "%"; |
|
|
|
chart2.title.text = Math.round(params.data.value / total * 100) + "%"; |
|
|
|
chart2.title.subtext = params.data.name; |
|
|
|
this.myChart2.setOption(chart2); |
|
|
|
}) |
|
|
|
@ -389,20 +382,20 @@ |
|
|
|
"type": this.year, |
|
|
|
"sectionId": this.selectId, |
|
|
|
"createTime": dateTime, |
|
|
|
"direction":1, |
|
|
|
}).then(res=>{ |
|
|
|
console.log(res); |
|
|
|
"direction": this.area, |
|
|
|
}).then(res => { |
|
|
|
chart3.series[0].data = []; |
|
|
|
chart3.series[1].data = []; |
|
|
|
if ( res.code == 200 ) { |
|
|
|
if (res.code == 200) { |
|
|
|
let data = res.data; |
|
|
|
if ( this.year != "quarter" ) { |
|
|
|
if (this.year != "quarter") { |
|
|
|
let zhs = []; |
|
|
|
let values = []; |
|
|
|
data.forEach((it)=>{ |
|
|
|
console.log(it); |
|
|
|
data.forEach((it) => { |
|
|
|
if (it.sectionNumber > 0) { |
|
|
|
values.push(it.sectionNumber); |
|
|
|
zhs.push(it.stakeMarkId); |
|
|
|
} |
|
|
|
}) |
|
|
|
chart3.xAxis.data = zhs; |
|
|
|
chart3.series[0].data = values; |
|
|
|
@ -410,25 +403,27 @@ |
|
|
|
} else { |
|
|
|
let zhs = []; |
|
|
|
let values = []; |
|
|
|
data.forEach((dt,i)=>{ |
|
|
|
dt.forEach((it)=>{ |
|
|
|
console.log(it); |
|
|
|
if ( quarter == 1 && it.QUARTER == "第一季度") { |
|
|
|
data.forEach((dt, i) => { |
|
|
|
dt.forEach((it) => { |
|
|
|
if (it.number > 0) { |
|
|
|
if (quarter == 1 && it.QUARTER == "第一季度") { |
|
|
|
values[i] = it.number; |
|
|
|
zhs[i] = it.stakeMark; |
|
|
|
} |
|
|
|
if ( quarter == 4 && it.QUARTER == "第二季度") { |
|
|
|
if (quarter == 4 && it.QUARTER == "第二季度") { |
|
|
|
values[i] = it.number; |
|
|
|
zhs[i] = it.stakeMark; |
|
|
|
} |
|
|
|
if ( quarter == 7 && it.QUARTER == "第三季度") { |
|
|
|
if (quarter == 7 && it.QUARTER == "第三季度") { |
|
|
|
values[i] = it.number; |
|
|
|
zhs[i] = it.stakeMark; |
|
|
|
} |
|
|
|
if ( quarter == 10 && it.QUARTER == "第四季度") { |
|
|
|
if (quarter == 10 && it.QUARTER == "第四季度") { |
|
|
|
values[i] = it.number; |
|
|
|
zhs[i] = it.stakeMark; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
chart3.xAxis.data = zhs; |
|
|
|
@ -439,7 +434,7 @@ |
|
|
|
|
|
|
|
this.myChart3.setOption(chart3); |
|
|
|
}) |
|
|
|
if ( this.year == "day" ) |
|
|
|
if (this.year == "day") |
|
|
|
this.year = "date"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -447,19 +442,28 @@ |
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
|
|
getRoadSectionList().then(res=>{ |
|
|
|
getRoadSectionList().then(res => { |
|
|
|
console.log(res); |
|
|
|
if ( res.code == 200 ) { |
|
|
|
if (res.code == 200) { |
|
|
|
let rows = res.rows; |
|
|
|
this.dataList = []; |
|
|
|
rows.forEach(it=>{ |
|
|
|
rows.forEach(it => { |
|
|
|
this.dataList.push({ |
|
|
|
title:it.sectionName.split("-")[0], |
|
|
|
id:it.id, |
|
|
|
title: it.sectionName.split("-")[0], |
|
|
|
id: it.id, |
|
|
|
|
|
|
|
}); |
|
|
|
}) |
|
|
|
if (rows.length > 0) { |
|
|
|
let lastRoad = rows[rows.length - 1].sectionName.split("-")[1]; |
|
|
|
this.dataList.push({ |
|
|
|
title: lastRoad, |
|
|
|
id: rows[rows.length - 1].id, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
this.searchQuery(); |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
@ -481,146 +485,192 @@ |
|
|
|
// 创建canvas |
|
|
|
let canvas = document.createElement('canvas'); |
|
|
|
canvas.width = parentDiv.offsetWidth; |
|
|
|
canvas.height =parentDiv.offsetHeight; |
|
|
|
canvas.height = parentDiv.offsetHeight; |
|
|
|
parentDiv.appendChild(canvas); |
|
|
|
const context = canvas.getContext('2d'); |
|
|
|
|
|
|
|
// 填充渐变颜色 |
|
|
|
var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
|
|
|
|
|
|
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
|
|
|
|
// 绘制圆角矩形 |
|
|
|
drawRoundRect(context, 300, 78, 160, 24, 12,gr) |
|
|
|
|
|
|
|
var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 300, 148, 160, 24, 12,gr) |
|
|
|
|
|
|
|
var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 300, 218, 160, 24, 12,gr) |
|
|
|
|
|
|
|
var gr = context.createLinearGradient(400, 63, 450, 0); |
|
|
|
// 填充渐变颜色 |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
|
|
|
|
// var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 267, 57, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 267, 108, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 267, 157, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 267, 208, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 267, 258, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(400, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 57, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(350, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 108, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(300, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 157, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(300, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 208, 140, 24, 12, gr); |
|
|
|
|
|
|
|
drawRoundRect(context, 460, 78, 160, 24, 12,gr) |
|
|
|
var gr = context.createLinearGradient(350, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 460, 148, 160, 24, 12,gr) |
|
|
|
var gr = context.createLinearGradient(300, 63, 450, 0); |
|
|
|
// 颜色断点 |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
drawRoundRect(context, 460, 218, 160, 24, 12,gr) |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
.congestion { |
|
|
|
<style lang='scss' scoped> |
|
|
|
.congestion { |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.body { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
height: 320px; |
|
|
|
width:100%; |
|
|
|
justify-content: space-evenly; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
> div { |
|
|
|
display: inline-flex; |
|
|
|
height:100%; |
|
|
|
width:33%; |
|
|
|
margin-right:px; |
|
|
|
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, rgba(19, 39, 47, 0.9725490196) 93%); |
|
|
|
padding: 10px; |
|
|
|
>div { |
|
|
|
width: 33%; |
|
|
|
height: 470px; |
|
|
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|
|
|
border: 1px solid; |
|
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(1) { |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(2) { |
|
|
|
margin-left: 6px; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(3) { |
|
|
|
margin-left: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.btnChart { |
|
|
|
height: 330px; |
|
|
|
width: 90%; |
|
|
|
margin: 95px auto 0; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.board{ |
|
|
|
height:100px; |
|
|
|
.board { |
|
|
|
height: 100px; |
|
|
|
width: 100%; |
|
|
|
padding:10px 20px; |
|
|
|
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
|
|
|
position: absolute; |
|
|
|
top: 30px; |
|
|
|
padding: 18px 20px; |
|
|
|
// background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|
|
|
border-radius: 5px 5px 5px 5px; |
|
|
|
opacity: 1; |
|
|
|
border: 1px solid; |
|
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
// border: 1px solid; |
|
|
|
// border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
|
|
.searchPanel{ |
|
|
|
.searchPanel { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
height: 40px; |
|
|
|
width:100%; |
|
|
|
width: 100%; |
|
|
|
font-size: 14px; |
|
|
|
margin-top: 10px; |
|
|
|
div{ |
|
|
|
|
|
|
|
div { |
|
|
|
white-space: nowrap; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
.inputZh{ |
|
|
|
|
|
|
|
.inputZh { |
|
|
|
width: 47px; |
|
|
|
::v-deep{ |
|
|
|
.el-input__inner{ |
|
|
|
|
|
|
|
::v-deep { |
|
|
|
.el-input__inner { |
|
|
|
background-color: #064258 !important; |
|
|
|
border-width: 0px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.inputJl{ |
|
|
|
|
|
|
|
.inputJl { |
|
|
|
margin-left: 5px; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
.selectRoad{ |
|
|
|
width:89px; |
|
|
|
border:1px solid #00B3CC; |
|
|
|
::v-deep{ |
|
|
|
.el-input__inner{ |
|
|
|
|
|
|
|
.selectRoad { |
|
|
|
width: 100px; |
|
|
|
border: 1px solid #00B3CC; |
|
|
|
|
|
|
|
::v-deep { |
|
|
|
.el-input__inner { |
|
|
|
background-color: #064258 !important; |
|
|
|
border-width: 0px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.btnSearch{ |
|
|
|
|
|
|
|
.btnSearch { |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
margin-left: 10px; |
|
|
|
border-color: transparent; |
|
|
|
} |
|
|
|
.btnReset{ |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);; |
|
|
|
|
|
|
|
.btnReset { |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
; |
|
|
|
border-color: transparent; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.charts { |
|
|
|
height:100px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
.charts { |
|
|
|
height: 100px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhoule
1 year ago