王钦
7 months ago
83 changed files with 17022 additions and 238 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,155 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
let options = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function (params) { |
|||
let mark = '' |
|||
params.forEach((e,index) => { |
|||
mark += e.marker + e.seriesName + '：'+e.value+'起<br />' |
|||
}); |
|||
return `<div>${params[0].name}</div>${mark}`; |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "10px", |
|||
right: "10px", |
|||
top: "70px", |
|||
bottom: "0px", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: [], |
|||
show: true, |
|||
axisTick: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
align: "center", |
|||
rotate: "1", |
|||
margin: 20, |
|||
textStyle: { |
|||
fontSize: 10, |
|||
color: "#E5E7E8", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
name: "(起)", |
|||
nameTextStyle: { |
|||
color: "#E5E7E8", |
|||
fomtSize: 10, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
type: "solid", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#E5E7E8", |
|||
textStyle: { |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "0", |
|||
right: "2%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "事件数量", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
select: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#1AC5FD", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
|||
// lenged文本
|
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
// console.log("==========a=============", a);
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#00A3FF", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#00A3FF00", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
{ |
|||
name: "去年同期", |
|||
type: "line", //换为line 实现折线与柱状图
|
|||
data:[], |
|||
color: "#E2BA74", |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<div class="chartsETime "id="chartsETime"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import chartsOptions from "./charts"; |
|||
import { exportFile } from "@screen/utils/common"; |
|||
import request from '@/utils/request' |
|||
export default { |
|||
name: "ChartsETime", |
|||
data() { |
|||
return { |
|||
dataList: [], |
|||
}; |
|||
}, |
|||
|
|||
created() {}, |
|||
methods: { |
|||
|
|||
export(name){ |
|||
exportFile({ |
|||
method:'get', |
|||
url: "/business/trafficIncidents/exportSelectEventTypeAnalysis", |
|||
filename: name, |
|||
data: this.data |
|||
}); |
|||
}, |
|||
bind(formData){ |
|||
this.data = {} |
|||
let type = -1; |
|||
let date = '' |
|||
if(formData){ |
|||
formData.keys().forEach(x=>{ |
|||
if(x === 'startTime'){ |
|||
date = formData.get(x).substr(0,10) |
|||
this.data['currently'] = formData.get(x).substr(0,10) |
|||
this.data['lastYear'] = moment(formData.get(x)).subtract(1,'year').format('YYYY-MM-DD') |
|||
} else { |
|||
this.data[x] = formData.get(x) |
|||
} |
|||
if(x === 'type'){ |
|||
type = formData.get(x) |
|||
} |
|||
}) |
|||
if(!this.myChart){ |
|||
this.myChart = echarts.init(document.getElementById("chartsETime")); |
|||
} |
|||
request({ |
|||
url: '/business/trafficIncidents/selectEventTimeProportion', |
|||
method: 'post', |
|||
data: this.data |
|||
}).then(res=>{ |
|||
|
|||
let aryXAxis = [] |
|||
let arySeries0 = [] |
|||
let arySeries1 = [] |
|||
if(type === '1'){ //日 |
|||
for(let i = 0; i < 24; i++){ |
|||
let c = _.find(res.data.currentlyMap,{time:i}) |
|||
let l = _.find(res.data.lastYearMap,{time:i}) |
|||
aryXAxis.push(i.toString()+'点') |
|||
arySeries0.push(c?c.number:0) |
|||
arySeries1.push(l?l.number:0) |
|||
} |
|||
} else if (type === '2'){ //月 |
|||
// 获取本月的天数 |
|||
const daysInMonth = moment().daysInMonth(); |
|||
|
|||
for(let i = 1; i <= daysInMonth; i++){ |
|||
let c = _.find(res.data.currentlyMap, function(o){ |
|||
{ return Number(o.day.substring(8)) === i; } |
|||
}) |
|||
let l = _.find(res.data.lastYearMap,function(o){ |
|||
{ return Number(o.day.substring(8)) === i; } |
|||
}) |
|||
aryXAxis.push(i.toString() + '日') |
|||
arySeries0.push(c?c.num:0) |
|||
arySeries1.push(l?l.num:0) |
|||
} |
|||
} else if (type === '3'){ //季 |
|||
// 获取本月的天数 |
|||
let m = Number(date.substring(5,7)) |
|||
for(let i = m; i < (m+3); i++){ |
|||
let c = _.find(res.data.currentlyMap, {month:i}) |
|||
let l = _.find(res.data.lastYearMap, {month:i}) |
|||
aryXAxis.push(i.toString() + '月') |
|||
arySeries0.push(c?c.number:0) |
|||
arySeries1.push(l?l.number:0) |
|||
} |
|||
} else if(type === '4'){ //年 |
|||
for(let i = 1; i <= 12; i++){ |
|||
let c = _.find(res.data.currentlyMap, {month:i}) |
|||
let l = _.find(res.data.lastYearMap, {month:i}) |
|||
aryXAxis.push(i.toString() + '月') |
|||
arySeries0.push(c?c.number:0) |
|||
arySeries1.push(l?l.number:0) |
|||
} |
|||
} |
|||
chartsOptions.xAxis.data = aryXAxis; |
|||
chartsOptions.series[0].data = arySeries0; |
|||
chartsOptions.series[1].data = arySeries1; |
|||
this.myChart.setOption(chartsOptions); |
|||
}) |
|||
// selectEventType(formData).then((res) => { |
|||
// let lastAvgTimeData = []; |
|||
// let avgTimeData = []; |
|||
// let numData = []; |
|||
// let lastNumData = []; |
|||
// let eventSubclassData = []; |
|||
// res.data.forEach((item) => { |
|||
// lastAvgTimeData.push(item.lastAvgTime); |
|||
// numData.push(item.num); |
|||
// avgTimeData.push(item.avgTime); |
|||
// lastNumData.push(item.lastNum); |
|||
// eventSubclassData.push(item.eventSubclassName); |
|||
// chartsOptions.series[0].data = numData; //事件数量 |
|||
// chartsOptions.series[1].data = lastNumData; //去年同期数量 |
|||
// chartsOptions.series[2].data = avgTimeData; //平均处置时长 |
|||
// chartsOptions.series[3].data = lastAvgTimeData; //去年同期平均处置时长 |
|||
// chartsOptions.xAxis.data = eventSubclassData; |
|||
// }) |
|||
// }) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.chartsETime { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,150 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
let options = { |
|||
color:['#00A3FF'], |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function (params) { |
|||
let mark = '' |
|||
params.forEach((e,index) => { |
|||
mark += e.marker + e.seriesName + '：'+e.value+'起<br />' |
|||
}); |
|||
return `<div>${params[0].name}</div>${mark}`; |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "10px", |
|||
right: "20px", |
|||
top: "70px", |
|||
bottom: "0px", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: [], |
|||
show: true, |
|||
axisTick: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
align: "center", |
|||
rotate: "1", |
|||
margin: 20, |
|||
textStyle: { |
|||
fontSize: 10, |
|||
color: "#E5E7E8", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
name: "(起)", |
|||
nameTextStyle: { |
|||
color: "#E5E7E8", |
|||
fomtSize: 10, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
type: "solid", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#E5E7E8", |
|||
textStyle: { |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "0", |
|||
right: "2%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "事件数量", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
select: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#1AC5FD", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
|||
// lenged文本
|
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
// console.log("==========a=============", a);
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#00A3FF", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#00A3FF00", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: [], |
|||
} |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,266 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
let options = { |
|||
color:['#00A3FF','#0c8c52','#c7d61d'], |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function (params) { |
|||
let mark = '' |
|||
params.forEach((e,index) => { |
|||
mark += e.marker + e.seriesName + '：'+e.value+'起<br />' |
|||
}); |
|||
return `<div>${params[0].name}</div>${mark}`; |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "10px", |
|||
right: "20px", |
|||
top: "70px", |
|||
bottom: "0px", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: [], |
|||
show: true, |
|||
axisTick: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
align: "center", |
|||
rotate: "1", |
|||
margin: 20, |
|||
textStyle: { |
|||
fontSize: 10, |
|||
color: "#E5E7E8", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
name: "(起)", |
|||
nameTextStyle: { |
|||
color: "#E5E7E8", |
|||
fomtSize: 10, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
type: "solid", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#E5E7E8", |
|||
textStyle: { |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "0", |
|||
right: "2%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "货车", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
select: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#0c8c52", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
|||
// lenged文本
|
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
// console.log("==========a=============", a);
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#00A3FF", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#00A3FF00", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, { |
|||
name: "小型车", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
select: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#0c8c52", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
|||
// lenged文本
|
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
// console.log("==========a=============", a);
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#0c8c52", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#0c8c5200", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, { |
|||
name: "客车", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
select: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#c7d61d", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
|||
// lenged文本
|
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
// console.log("==========a=============", a);
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#c7d61d", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#c7d61d00", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: [], |
|||
} |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,105 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
let options = { |
|||
color:['#00A3FF','#c7d61d'], |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function (params) { |
|||
let mark = '' |
|||
params.forEach((e,index) => { |
|||
mark += e.marker + e.seriesName + '：'+e.value+'起<br />' |
|||
}); |
|||
return `<div>${params[0].name}</div>${mark}`; |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "10px", |
|||
right: "20px", |
|||
top: "70px", |
|||
bottom: "0px", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: [], |
|||
show: true, |
|||
axisTick: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
align: "center", |
|||
rotate: "1", |
|||
margin: 20, |
|||
textStyle: { |
|||
fontSize: 10, |
|||
color: "#E5E7E8", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
name: "(起)", |
|||
nameTextStyle: { |
|||
color: "#E5E7E8", |
|||
fomtSize: 10, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
type: "solid", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#E5E7E8", |
|||
textStyle: { |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "0", |
|||
right: "2%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "当前事故总量", |
|||
type: "line", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
data: [], |
|||
}, |
|||
{ |
|||
name: "去年事故总量", |
|||
type: "line", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
data: [], |
|||
} |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,208 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
let options = { |
|||
color:['#00A3FF','#0c8c52'], |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function (params) { |
|||
let mark = '' |
|||
params.forEach((e,index) => { |
|||
mark += e.marker + e.seriesName + '：'+e.value+'起<br />' |
|||
}); |
|||
return `<div>${params[0].name}</div>${mark}`; |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "10px", |
|||
right: "20px", |
|||
top: "70px", |
|||
bottom: "0px", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: [], |
|||
show: true, |
|||
axisTick: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
align: "center", |
|||
rotate: "1", |
|||
margin: 20, |
|||
textStyle: { |
|||
fontSize: 10, |
|||
color: "#E5E7E8", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
name: "(起)", |
|||
nameTextStyle: { |
|||
color: "#E5E7E8", |
|||
fomtSize: 10, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#2A6278", |
|||
type: "solid", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#E5E7E8", |
|||
textStyle: { |
|||
fontSize: 10, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "0", |
|||
right: "2%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "封闭", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
select: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#0c8c52", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
|||
// lenged文本
|
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
// console.log("==========a=============", a);
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#00A3FF", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#00A3FF00", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, { |
|||
name: "限行", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode: false, |
|||
select: { |
|||
itemStyle: { |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#0c8c52", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
|||
// lenged文本
|
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
// console.log("==========a=============", a);
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#0c8c52", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#0c8c5200", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: [], |
|||
} |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,247 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: (params) => { |
|||
|
|||
let name = params[0].name.replace(/-/g, "") |
|||
let name1 = name+'-济南' |
|||
let name2 = name+'-菏泽' |
|||
if(params[0].axisIndex === 1){ |
|||
name1 = name+'-菏泽' |
|||
name2 = name+'-济南' |
|||
} |
|||
return `${name1} |
|||
<br/> |
|||
${params[0].marker}${params[0].seriesName}: <span style="font-weight:bold;"> ${params[0].value} 辆</span> |
|||
<br/><br/> |
|||
${name2} |
|||
<br/> |
|||
${params[1].marker}${params[1].seriesName}: <span style="font-weight:bold;"> ${params[1].value} 辆</span>`; |
|||
}, |
|||
}, |
|||
axisPointer: { |
|||
link: [ |
|||
{ |
|||
xAxisIndex: "all", |
|||
}, |
|||
], |
|||
}, |
|||
legend: { |
|||
top: 0, |
|||
right: 0, |
|||
icon:'rect', |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
itemHeight: 5, |
|||
itemWidth: 10, |
|||
data: [ |
|||
{ |
|||
name: "本期车流量", |
|||
itemStyle: { |
|||
color: '#6DBBFB' |
|||
} |
|||
|
|||
},{ |
|||
name: "去年同期", |
|||
itemStyle: { |
|||
color: '#5FA52B' |
|||
} |
|||
|
|||
}, |
|||
], |
|||
}, |
|||
grid: [ |
|||
{ |
|||
left: 40, |
|||
top: '25%', |
|||
right: 10, |
|||
height: "35%", |
|||
}, |
|||
{ |
|||
left: 40, |
|||
|
|||
right: 10, |
|||
top: "60%", |
|||
height: "35%", |
|||
}, |
|||
], |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
data: [ |
|||
"殷家林-枢纽", |
|||
"大学城-立交", |
|||
"长清-立交", |
|||
"松竹-枢纽", |
|||
"孝里-立交", |
|||
"平阴北-立交", |
|||
"平阴-立交", |
|||
"孔村-枢纽", |
|||
"平阴南-立交", |
|||
"东平-立交", |
|||
"东平湖-枢纽", |
|||
"梁山东-立交", |
|||
"梁山-立交", |
|||
"嘉祥西-立交", |
|||
"王官屯-枢纽", |
|||
], |
|||
axisLabel: { |
|||
show:false |
|||
}, |
|||
z: 10, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
onZero: true, |
|||
axisLine: { show: false }, |
|||
gridIndex: 1, |
|||
type: "category", |
|||
z: 10, |
|||
data: [ |
|||
"殷家林-枢纽", |
|||
"大学城-立交", |
|||
"长清-立交", |
|||
"松竹-枢纽", |
|||
"孝里-立交", |
|||
"平阴北-立交", |
|||
"平阴-立交", |
|||
"孔村-枢纽", |
|||
"平阴南-立交", |
|||
"东平-立交", |
|||
"东平湖-枢纽", |
|||
"梁山东-立交", |
|||
"梁山-立交", |
|||
"嘉祥西-立交", |
|||
"王官屯-枢纽", |
|||
], |
|||
position: "top", |
|||
axisLabel: { |
|||
color: "#fff", |
|||
margin: -20, |
|||
formatter: function (params) { |
|||
return `${params.substr(0,params.length-2)}\n\n${params.substr(params.length-2)}`; |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
name: "车流量 ", |
|||
type: "value", |
|||
axisLabel: { |
|||
color: "#FFF", |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#00D1FF", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
gridIndex: 1, |
|||
name: "", |
|||
type: "value", |
|||
inverse: true, |
|||
axisLabel: { |
|||
color: "#FFF", |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#06AED3", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "本期车流量", |
|||
type: "line", |
|||
symbolSize: 0, |
|||
lineStyle: { |
|||
color: "#06AED3", |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 1, |
|||
color: "#06AED300", |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: "#06AED3", |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
}, |
|||
}, |
|||
data: [ |
|||
57, 36, 56, 95, 125, 194, 94, 94, 74, 34, 125, 194, 94, 94, 74, 34, |
|||
], |
|||
}, |
|||
{ |
|||
name: "本期车流量", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
xAxisIndex: 1, |
|||
yAxisIndex: 1, |
|||
smooth: true, |
|||
lineStyle: { |
|||
color: "#06AED3", |
|||
}, |
|||
areaStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#06AED300", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#06AED3", |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
}, |
|||
}, |
|||
data: [ |
|||
67, 36, 56, 195, 25, 194, 94, 94, 74, 21, 195, 25, 194, 94, 94, 74, 21, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,650 @@ |
|||
<template> |
|||
<div class="serviceAnalysis"> |
|||
<div class="cleft"> |
|||
<el-checkbox |
|||
class="treeCheckbox" |
|||
v-model="menuNodeAll" |
|||
@change="handleCheckedTreeNodeAll($event, 'menu')" |
|||
>全选/全不选</el-checkbox |
|||
> |
|||
<el-tree |
|||
ref="menu" |
|||
:data="treeData" |
|||
show-checkbox |
|||
@current-change="onTreeClick" |
|||
node-key="id" |
|||
default-expand-all |
|||
:highlight-current="true" |
|||
:expand-on-click-node="false" |
|||
:auto-expand-parent="false"> |
|||
</el-tree> |
|||
<!-- <el-checkbox-group class="device" v-model="devices" @change="onDeviceChange"> |
|||
<el-checkbox v-for="(item,index) in deviceTypeList" :label="item.value" >{{ item.label }}</el-checkbox> |
|||
</el-checkbox-group> --> |
|||
</div> |
|||
<div class="cright"> |
|||
<div style="display: flex;justify-content: flex-end;padding-right: 20px;"><Search ref="search" /></div> |
|||
<div class="tag1" v-if="this.curid==='8' ">方向：济南<span>←</span></div> |
|||
<div class="tag2" v-if="this.curid==='8' "><span>→</span>方向：菏泽</div> |
|||
<div class="tag1" v-if=" this.curid==='9'">方向：出口<span>←</span></div> |
|||
<div class="tag2" v-if=" this.curid==='9'"><span>→</span>方向：入口</div> |
|||
<div :hidden="curid===''" class="charts "id="charts"></div> |
|||
<div style="overflow: none;height: 450px"> |
|||
<Table :data="tableData" style="width: 99%;margin-top: 30px;" height="430px"> |
|||
<ElTableColumn v-for="(item,index) of tableCols" :label="item.label" :prop="item.value" align="center" /> |
|||
</Table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Search from './search/index.vue' |
|||
import request from "@/utils/request"; |
|||
// import { setLoading } from "@screen/utils/index.js" |
|||
import { delay, exportFile, confirm, uploadFile } from "@screen/utils/common"; |
|||
import { Message } from "element-ui"; |
|||
import * as echarts from "echarts"; |
|||
import chartsOptions from "./charts"; |
|||
import chartsOptions3 from "./charts3"; |
|||
import chartsOptions4 from "./charts4"; |
|||
import chartsOptions6 from "./charts6"; |
|||
import chartsOptions8 from "./charts8"; |
|||
import Table from '@screen/components/Table.vue'; |
|||
|
|||
// 辖段管理 |
|||
export default { |
|||
name: "serviceAnalysis", |
|||
components: { |
|||
Search, |
|||
Table |
|||
}, |
|||
data() { |
|||
return { |
|||
curid:'', |
|||
treeData:[ |
|||
{ |
|||
id:'a', |
|||
label:'交通事件', |
|||
children:[ |
|||
{ id:'1', label:'事故多发路段'}, |
|||
{ id:'2', label:'事件类型分析'}, |
|||
{ id:'3', label:'事故车型分析'}, |
|||
{ id:'4', label:'事故时间分析'}, |
|||
{ id:'5', label:'事故地市分布'}, |
|||
{ id:'6', label:'交通管制情况统计'}, |
|||
] |
|||
},{ |
|||
id:'b', |
|||
label:'天气情况统计', |
|||
children:[ |
|||
{ id:'7', label:'天气情况统计'}, |
|||
] |
|||
},{ |
|||
id:'c', |
|||
label:'交通量统计', |
|||
children:[ |
|||
{ id:'8', label:'门架车流量'}, |
|||
{ id:'9', label:'收费站车流量'}, |
|||
] |
|||
},{ |
|||
id:'d', |
|||
label:'交通事故情况', |
|||
children:[ |
|||
{ id:'10', label:'事故类型统计'}, |
|||
] |
|||
},{ |
|||
id:'e', |
|||
label:'拥堵情况', |
|||
children:[ |
|||
{ id:'11', label:'拥堵地点统计'}, |
|||
{ id:'12', label:'路段平均拥堵时长'}, |
|||
] |
|||
} |
|||
], |
|||
tableData:[], |
|||
menuNodeAll: false, |
|||
tableCols:[] |
|||
}; |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
const def = 1; |
|||
this.$refs.menu.setCheckedKeys([def]); |
|||
this.$refs.menu.setCurrentKey(def); |
|||
if(!this.myChart){ |
|||
this.myChart = echarts.init(document.getElementById("charts")); |
|||
} |
|||
this.bind(); |
|||
// this.searchQuery() |
|||
}) |
|||
|
|||
window.addEventListener("resize", () => { |
|||
if(this.myChart) |
|||
this.myChart.resize(); |
|||
}); |
|||
}, |
|||
methods: { |
|||
getKeys(){ |
|||
let keys = this.$refs.menu.getCheckedKeys().filter(x=>!isNaN(x)); |
|||
|
|||
return keys; |
|||
}, |
|||
bind(){ |
|||
let id = this.$refs.menu.getCurrentKey(); |
|||
let query = this.$refs.search.searchQuery(); |
|||
if(id==='1'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/sectionAnalysis', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
|
|||
this.tableCols = [{label:'路段桩号',value:'stake'},{label:'数量(起)',value:'num'}] |
|||
let _tableData = [] |
|||
if(_.keys(result.data).length === 0){ |
|||
this.tableData = [] |
|||
chartsOptions.series[0].data = [] |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
for(let i in result.data){ |
|||
_tableData.push({ |
|||
stake:i, num:result.data[i] |
|||
}) |
|||
} |
|||
this.tableData = _tableData; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions.series[0].data = _tableData.map(x=>x.num) |
|||
chartsOptions.xAxis.data = _tableData.map(x=>x.stake); |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
}) |
|||
} else if(id==='2'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/typeAnalysis', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'事故类型',value:'name'},{label:'数量(起)',value:'num'}] |
|||
let _tableData = [] |
|||
if(_.keys(result.data).length === 0){ |
|||
chartsOptions.series[0].data = [] |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
for(let i in result.data){ |
|||
_tableData.push({ |
|||
name:i, num:result.data[i] |
|||
}) |
|||
} |
|||
|
|||
this.tableData = _tableData; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions.series[0].data = _tableData.map(x=>x.num) |
|||
chartsOptions.xAxis.data = _tableData.map(x=>x.name); |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
|
|||
|
|||
}) |
|||
} else if(id==='3'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/accidentModelAnalysis', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'事故类型',value:'name'},{label:'货车',value:'货车'},{label:'小型车',value:'小型车'},{label:'客车',value:'客车'}] |
|||
|
|||
if(_.keys(result.data).length === 0){ |
|||
chartsOptions3.series[0].data = [] |
|||
chartsOptions3.series[1].data = [] |
|||
chartsOptions3.series[2].data = [] |
|||
this.myChart.setOption(chartsOptions3); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
let _tableData = [] |
|||
for(let i in result.data){ |
|||
_tableData.push({ |
|||
name:i, |
|||
货车: result.data[i]['货车'] || 0, |
|||
小型车: result.data[i]['小型车'] || 0, |
|||
客车: result.data[i]['客车'] || 0, |
|||
}) |
|||
} |
|||
this.tableData = _tableData; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions3.xAxis.data = _tableData.map(x=>x.name); |
|||
chartsOptions3.series[0].data = _tableData.map(x=>x.货车) |
|||
chartsOptions3.series[1].data = _tableData.map(x=>x.小型车) |
|||
chartsOptions3.series[2].data = _tableData.map(x=>x.客车) |
|||
this.myChart.setOption(chartsOptions3); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
}) |
|||
} else if(id==='4'){ |
|||
let unit = '时'; |
|||
if(query.type === '1'){unit='日'} |
|||
else if(query.type === '0'){unit='月'} |
|||
request({ |
|||
url: '/business/sdhsEvent/accidentTimeAnalysis', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'事故时间',value:'time'},{label:'当前事故总量(起)',value:'num'},{label:'去年事故总量(起)',value:'numYes'}] |
|||
let _tableData = [] |
|||
|
|||
this.curid = id; |
|||
|
|||
let queryYes = _.cloneDeep(query) |
|||
queryYes.startTime = (Number(queryYes.startTime.substr(0,4))-1).toString()+queryYes.startTime.substr(4) |
|||
queryYes.endTime = (Number(queryYes.endTime.substr(0,4))-1).toString()+queryYes.endTime.substr(4) |
|||
|
|||
request({ |
|||
url: '/business/sdhsEvent/accidentTimeAnalysis', |
|||
method: 'post', |
|||
data: queryYes |
|||
}).then(resultYes=>{ |
|||
if(_.keys(result.data).length === 0){ |
|||
chartsOptions4.series[0].data = [] |
|||
chartsOptions4.series[1].data = [] |
|||
chartsOptions4.xAxis.data = _tableData.map(x=>x.time); |
|||
this.myChart.setOption(chartsOptions4); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
for(let i in result.data){ |
|||
_tableData.push({ |
|||
idx:parseInt(i), |
|||
time:i.toString()+ unit, num:result.data[i.toString()],numYes:resultYes.data[i.toString()] |
|||
}) |
|||
} |
|||
_tableData.sort(function(a,b){return a.idx-b.idx}) |
|||
this.tableData = _tableData; |
|||
chartsOptions4.series[0].data = _tableData.map(x=>x.num) |
|||
chartsOptions4.series[1].data = _tableData.map(x=>x.numYes) |
|||
chartsOptions4.xAxis.data = _tableData.map(x=>x.time); |
|||
this.myChart.setOption(chartsOptions4); |
|||
this.myChart.resize(); |
|||
}) |
|||
setTimeout(() => { |
|||
|
|||
}, 200); |
|||
}) |
|||
} else if(id==='5'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/selectRegionAnalysis', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
console.log(result) |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'发生地区',value:'regionName'},{label:'数量(起)',value:'num'}] |
|||
if(result.data.length===0){ |
|||
chartsOptions.series[0].data = [] |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
this.tableData = result.data; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions.series[0].data = result.data.map(x=>x.num) |
|||
chartsOptions.xAxis.data = result.data.map(x=>x.regionName); |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
}) |
|||
} else if(id==='6'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/selectStationAnalysis', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
console.log(result) |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'发生地区',value:'stationName'},{label:'封闭',value:'close'},{label:'限行',value:'restriction'},{label:'全部',value:'allNum'}] |
|||
if(result.data.length===0){ |
|||
|
|||
chartsOptions6.series[0].data = [] |
|||
chartsOptions6.series[1].data = [] |
|||
this.myChart.setOption(chartsOptions6); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
this.tableData = result.data; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions6.series[0].data = result.data.map(x=>x.close) |
|||
chartsOptions6.series[1].data = result.data.map(x=>x.restriction) |
|||
chartsOptions6.xAxis.data = result.data.map(x=>x.stationName); |
|||
this.myChart.setOption(chartsOptions6); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
|
|||
}) |
|||
} else if(id==='7'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/selectWeather', |
|||
method: 'post' |
|||
}).then(result=>{ |
|||
console.log(result) |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
if(result.data.dataList.length===0){ |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
let col = [{label:'地区',value:'regionName'}] |
|||
for(let i in result.data.column){ |
|||
col.push({label:result.data.column[i],value:i}) |
|||
} |
|||
this.tableCols = col; |
|||
this.tableData = result.data.dataList; |
|||
|
|||
|
|||
}) |
|||
} else if(id==='8'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/gantryAnalysis', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
|
|||
this.tableCols = [{label:'方向',value:'dir'},{label:'门架',value:'name'},{label:'车流量',value:'num'}] |
|||
let _tableData = [] |
|||
for(let i of result.data.jinanDirection){ |
|||
_tableData.push({ |
|||
dir:'济南方向',name:i.intervalName, num:(i.trafficVolume||0) |
|||
}) |
|||
} for(let i of result.data.hezeDirection){ |
|||
_tableData.push({ |
|||
dir:'菏泽方向',name:i.intervalName, num:(i.trafficVolume||0) |
|||
}) |
|||
} |
|||
this.tableData = _tableData; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
const xAxis = result.data.jinanDirection.map(x=>x.intervalName); |
|||
|
|||
// 1今年菏泽 2今年济南 3去年菏泽 4去年济南 |
|||
chartsOptions8.series[0].data = result.data.jinanDirection.map(x=>x.trafficVolume) |
|||
chartsOptions8.series[1].data =result.data.hezeDirection.map(x=>x.trafficVolume) |
|||
this.myChart.setOption(chartsOptions8); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
}) |
|||
} else if(id==='9'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/TollBoothStatisticsList', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
|
|||
this.tableCols = [{label:'方向',value:'dir'},{label:'收费站',value:'name'},{label:'车流量',value:'num'}] |
|||
let _tableData = [] |
|||
for(let i of result.data.exit){ |
|||
_tableData.push({ |
|||
dir:'出口',name:i.facilityName, num:(i.trafficVolume||0) |
|||
}) |
|||
} for(let i of result.data.entrance){ |
|||
_tableData.push({ |
|||
dir:'入口',name:i.facilityName, num:(i.trafficVolume||0) |
|||
}) |
|||
} |
|||
this.tableData = _tableData; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
const xAxis = result.data.exit.map(x=>x.facilityName); |
|||
chartsOptions8.xAxis[0].data = xAxis |
|||
chartsOptions8.xAxis[1].data = xAxis |
|||
chartsOptions8.series[0].data = result.data.exit.map(x=>x.trafficVolume) |
|||
chartsOptions8.series[1].data =result.data.entrance.map(x=>x.trafficVolume) |
|||
this.myChart.setOption(chartsOptions8); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
}) |
|||
} else if(id==='10'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/selectAccidentType', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'事故类型',value:'subclassName'},{label:'数量(起)',value:'num'}] |
|||
if(result.data.length===0){ |
|||
chartsOptions.series[0].data = [] |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
this.tableData = result.data; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions.series[0].data = result.data.map(x=>x.num) |
|||
chartsOptions.xAxis.data = result.data.map(x=>x.subclassName); |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
}) |
|||
} else if(id==='11'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/congestedLocation', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'拥堵类型',value:'name'},{label:'数量(起)',value:'num'}] |
|||
let _tableData = [] |
|||
if(_.keys(result.data).length === 0){ |
|||
chartsOptions.series[0].data = [] |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
for(let i in result.data){ |
|||
_tableData.push({ |
|||
name:i, num:result.data[i] |
|||
}) |
|||
} |
|||
this.tableData = _tableData; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions.series[0].data = _tableData.map(x=>x.num) |
|||
chartsOptions.xAxis.data = _tableData.map(x=>x.name); |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
|
|||
|
|||
}) |
|||
} else if(id==='12'){ |
|||
request({ |
|||
url: '/business/sdhsEvent/congestedTime', |
|||
method: 'post', |
|||
data: query |
|||
}).then(result=>{ |
|||
if (result.code != 200) return this.$message.error(result?.msg); |
|||
this.tableCols = [{label:'路段桩号',value:'name'},{label:'时长(分钟)',value:'num'}] |
|||
let _tableData = [] |
|||
if(_.keys(result.data).length === 0){ |
|||
|
|||
chartsOptions.series[0].data = [] |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
this.tableData = [] |
|||
this.$message.warning('暂无数据') |
|||
return; |
|||
} |
|||
|
|||
for(let i in result.data){ |
|||
_tableData.push({ |
|||
name:i, num:result.data[i] |
|||
}) |
|||
} |
|||
this.tableData = _tableData; |
|||
this.curid = id; |
|||
setTimeout(() => { |
|||
chartsOptions.series[0].data = _tableData.map(x=>x.num) |
|||
chartsOptions.xAxis.data = _tableData.map(x=>x.name); |
|||
this.myChart.setOption(chartsOptions); |
|||
this.myChart.resize(); |
|||
}, 200); |
|||
|
|||
|
|||
}) |
|||
}else { |
|||
this.$message.warning('暂未配置') |
|||
} |
|||
}, |
|||
onTreeClick(e){ |
|||
this.curid = '' |
|||
this.myChart.dispose(); |
|||
|
|||
this.myChart = echarts.init(document.getElementById("charts")); |
|||
if(e.id === 'a'){ |
|||
this.$refs.menu.setCurrentKey(1); |
|||
} else if(e.id === 'b'){ |
|||
this.$refs.menu.setCurrentKey(7); |
|||
} else if(e.id === 'c'){ |
|||
this.$refs.menu.setCurrentKey(8); |
|||
} else if(e.id === 'd'){ |
|||
this.$refs.menu.setCurrentKey(10); |
|||
} else if(e.id === 'e'){ |
|||
this.$refs.menu.setCurrentKey(11); |
|||
} else { |
|||
this.$refs.menu.setCurrentKey(e.id); |
|||
} |
|||
|
|||
this.bind() |
|||
}, |
|||
handleCheckedTreeNodeAll(value) { |
|||
this.$refs.menu.setCheckedNodes(value ? this.treeData : []); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style > |
|||
.el-tree{ |
|||
background-color: #ffffff00; |
|||
color: #fff; |
|||
} |
|||
.el-tree-node__content{ |
|||
margin-bottom: 10px; |
|||
} |
|||
.el-tree-node__content:hover { |
|||
background: #1E374F; |
|||
} |
|||
.el-tree-node:focus>.el-tree-node__content { |
|||
background-color: #009bcc; |
|||
background: linear-gradient(to right, #009bcc 0%, #009bcc00 100%); |
|||
|
|||
} |
|||
.el-tree-node.is-current > .el-tree-node__content { |
|||
|
|||
background-color: #009bcc !important; |
|||
background: linear-gradient(to right, #009bcc 0%, #009bcc00 100%) !important; |
|||
|
|||
} |
|||
.el-checkbox__input.is-checked .el-checkbox__inner { |
|||
background-color: #005c79; |
|||
border-color: #005c79; |
|||
} |
|||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|||
background-color: #005c79; |
|||
border-color: #005c79; |
|||
} |
|||
.el-checkbox__input.is-checked + .el-checkbox__label{ |
|||
color: white !important; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.charts { |
|||
height: 300px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.treeCheckbox{ |
|||
color:white; |
|||
margin:10px 23px; |
|||
} |
|||
.serviceAnalysis { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
.cleft{ |
|||
background-color: #101e25; |
|||
width: 300px; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding:10px; |
|||
|
|||
} |
|||
.cright{ |
|||
flex: 1; |
|||
height: 100%; |
|||
margin-left: 15px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
|
|||
.tag1 { |
|||
position: absolute; |
|||
margin-top: 100px; |
|||
margin-left: 60px; |
|||
font-size: 12px; |
|||
span{ |
|||
color: #8be8fe; |
|||
font-weight: bold; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.tag2 { |
|||
position: absolute; |
|||
font-size: 12px; |
|||
margin-top: 300px; |
|||
margin-left: 74vw; |
|||
span{ |
|||
color: #8be8fe; |
|||
font-weight: bold; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,257 @@ |
|||
<template> |
|||
<div class="searchPanel"> |
|||
<div style="margin-right: 30px;" v-if="fileInfo">上次上传：<a style="text-decoration: underline;" :download="fileInfo.fileName" target="_blank" :href="urlRoot+fileInfo.fileUrl">{{ fileInfo.fileName }}</a> <span class="el-icon-time" style="margin:0px 5px;"></span>{{ fileInfo.uploadTime }}</div> |
|||
<!-- 路段选择 --> |
|||
<!-- <RadioGroup :options="[ |
|||
{ key: '1', label: '菏泽' }, |
|||
{ key: '3', label: '济南' }, |
|||
]" v-model="direction" type="button" size="mini" /> --> |
|||
<el-select v-model="type" class="selectRoad" placeholder="请选择"> |
|||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
<!-- 日期选择 --> |
|||
<el-date-picker size="mini" class="selectRoad" :clearable="false" v-model="dateTime" style="width: 140px" |
|||
:picker-options="pickerOptions" :type="type == 2 |
|||
? 'date' |
|||
: type == 1 |
|||
? 'month' |
|||
: type == 0 |
|||
? 'year' |
|||
: '' |
|||
" placeholder="请选择" /> |
|||
|
|||
<el-button type="primary" size="mini" class="btnSearch" @click="onQuery" icon="el-icon-search">查询</el-button> |
|||
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button> |
|||
<el-upload |
|||
class="upload-file" |
|||
:file-list="fileList" |
|||
:show-file-list="false" |
|||
:before-upload="handleBeforeUpload" |
|||
:on-success="handleUploadSuccess" |
|||
:on-error="handleUploadError" |
|||
accept=".xls,.xlsx" |
|||
:headers="headers" |
|||
:action="uploadUrl" |
|||
> |
|||
<el-button class="btnReset" size="mini" >导入</el-button> |
|||
</el-upload> |
|||
<el-button class="btnReset" size="mini" @click="onExport">导出</el-button> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue"; |
|||
|
|||
import { delay, exportFile2, confirm } from "@screen/utils/common"; |
|||
import request from "@/utils/request"; |
|||
import { getToken } from "@/utils/auth"; |
|||
export default { |
|||
name: "EventQuery", |
|||
components: { |
|||
RadioGroup, |
|||
}, |
|||
data() { |
|||
return { |
|||
fileInfo:null, |
|||
headers: { |
|||
Authorization: "Bearer " + getToken(), |
|||
}, |
|||
|
|||
urlRoot: process.env.VUE_APP_BASE_API, // 上传的图片服务器地址 |
|||
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
|||
|
|||
fileList: [], |
|||
fileType: ["xls", "xlsx"], |
|||
fileName: '', |
|||
|
|||
selectIndex: 1, |
|||
selectId: 1, |
|||
reset: false, |
|||
direction: "1", |
|||
type: "0", |
|||
typeOptions: [ |
|||
{ |
|||
label: "年", |
|||
value: "0", |
|||
}, |
|||
{ |
|||
label: "月", |
|||
value: "1", |
|||
}, |
|||
{ |
|||
label: "日", |
|||
value: "2", |
|||
} |
|||
], |
|||
quarter: "2", |
|||
dateTime: moment().format("YYYY-MM-DD HH:mm:ss"), |
|||
dataList: [], |
|||
year: "", |
|||
|
|||
pickerOptions: { |
|||
disabledDate(time) { |
|||
return time.getTime() > Date.now(); |
|||
}, |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
created() { }, |
|||
methods: { |
|||
// 上传成功 |
|||
|
|||
handleBeforeUpload(file) { |
|||
this.fileName = file.name |
|||
}, |
|||
|
|||
handleUploadSuccess(res, file) { |
|||
if(res.code !== 200){this.$message.error(res.msg); return;} |
|||
request({ |
|||
url: `/business/sdhsEvent/importData`, |
|||
method: "post", |
|||
params: { |
|||
fileName:this.fileName , |
|||
fileUrl:res.fileName |
|||
}, |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.$message.success("上传成功"); |
|||
this.bindFiles(); |
|||
}); |
|||
}, |
|||
|
|||
// 上传失败 |
|||
handleUploadError() { |
|||
this.$message.error("上传失败"); |
|||
}, |
|||
|
|||
searchQuery() { |
|||
const filter = this.getStartTime(); |
|||
return filter; |
|||
}, |
|||
getStartTime(){ |
|||
let startTime = ""; |
|||
let endTime = ""; |
|||
if (this.type == 2) { //日 |
|||
startTime = moment(this.dateTime).format("YYYY-MM-DD 00:00:00"); |
|||
endTime = moment(this.dateTime).format("YYYY-MM-DD 23:59:59"); |
|||
} else if (this.type == 1) { //月 |
|||
startTime = moment(this.dateTime).format("YYYY-MM-01 00:00:00"); |
|||
endTime = moment(this.dateTime).endOf('month').format("YYYY-MM-DD 23:59:59"); |
|||
} else if (this.type == 0) { //年 |
|||
startTime = moment(this.dateTime).format("YYYY-01-01 00:00:00"); |
|||
endTime = moment(this.dateTime).format("YYYY-12-31 23:59:59"); |
|||
} |
|||
return {type: this.type, startTime,endTime} |
|||
}, |
|||
onReset() { |
|||
this.selectId = 1; |
|||
this.selectIndex = 1; |
|||
this.reset = true; |
|||
this.direction = "1"; |
|||
this.type = "1"; |
|||
this.dateTime = moment().format("YYYY-MM-DD HH:mm:ss"); |
|||
this.$parent.bind() |
|||
}, |
|||
onQuery(){ |
|||
this.$parent.bind() |
|||
}, |
|||
|
|||
onExport(){ |
|||
const keys = this.$parent.getKeys(); |
|||
if(keys.length === 0){ |
|||
this.$message.warning('未选中导出事件类型') |
|||
} |
|||
const param = { |
|||
...this.getStartTime(), |
|||
exportKey:keys |
|||
} |
|||
console.log(param) |
|||
param.startTime = new Date(param.startTime) |
|||
param.endTime = new Date(param.endTime) |
|||
exportFile2({ |
|||
url: "/business/sdhsEvent/export", |
|||
filename: "云事件导出", |
|||
data: param, |
|||
ext:'docx' |
|||
}); |
|||
}, |
|||
bindFiles(){ |
|||
request({ |
|||
url: `business/sdhsEvent/getFileInfo`, |
|||
method: "get" |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
if(result.data.fileName){ |
|||
this.fileInfo = result.data |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
this.bindFiles(); |
|||
// this.searchQuery() |
|||
}) |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.searchPanel { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 40px; |
|||
|
|||
font-size: 14px; |
|||
margin-bottom: 10px; |
|||
z-index: 1; |
|||
|
|||
div { |
|||
white-space: nowrap; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
::v-deep { |
|||
.el-input__inner { |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
.el-radio-button__inner{ |
|||
margin-top: -1px; |
|||
height: 29px !important; |
|||
line-height: 29px !important; |
|||
} |
|||
} |
|||
|
|||
.inputZh { |
|||
width: 47px; |
|||
} |
|||
|
|||
.inputJl { |
|||
margin-left: 5px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.selectRoad { |
|||
width: 89px; |
|||
border: 1px solid #00b3cc; |
|||
} |
|||
|
|||
.btnSearch { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
margin-left: 10px; |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.btnReset { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
border-color: transparent; |
|||
color: white; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.keep-ratio { |
|||
height: 200px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue