zhoule
1 year ago
20 changed files with 2413 additions and 2249 deletions
@ -1,144 +1,143 @@ |
|||
window.echartsData = [ |
|||
{ value: 25, name: '处理中' }, |
|||
{ value: 32, name: '待处理' }, |
|||
{ value: 30, name: '已处理' },] |
|||
|
|||
{ value: 25, name: '处理中' }, |
|||
{ value: 40, name: '待处理' }, |
|||
{ value: 35, name: '已处理' },] |
|||
|
|||
window.colorList = [ |
|||
"#FFee0B", |
|||
"#61D8FF", |
|||
"#6AE0BC", |
|||
|
|||
] |
|||
|
|||
] |
|||
window.count = 0; |
|||
|
|||
echartsData.forEach((it)=>{ |
|||
count += it.value; |
|||
}) |
|||
|
|||
|
|||
var options = { |
|||
color: colorList, |
|||
legend: { |
|||
orient: 'vertical', |
|||
top: "center", |
|||
icon: "circle", |
|||
right: 30, |
|||
itemGap: 16, |
|||
itemWidth: 8, |
|||
itemHeight: 8, |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
rich:{ |
|||
echartsData.forEach((it) => { |
|||
count += it.value; |
|||
}) |
|||
|
|||
|
|||
var options = { |
|||
color: colorList, |
|||
legend: { |
|||
orient: 'vertical', |
|||
top: "center", |
|||
icon: "circle", |
|||
right: 30, |
|||
itemGap: 16, |
|||
itemWidth: 8, |
|||
itemHeight: 8, |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
rich: { |
|||
ast: { |
|||
align: "left", |
|||
fontSize: 12, |
|||
width:35, |
|||
width: 35, |
|||
}, |
|||
bst: { |
|||
align: "left", |
|||
fontSize: 12, |
|||
marginLeft:20, |
|||
color:"#37E7FF" |
|||
} |
|||
} |
|||
}, |
|||
formatter: (params) => { |
|||
let obj = echartsData.filter(it=>{ return it.name == params}) |
|||
console.log(obj); |
|||
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value/count* 100) }%}` |
|||
align: "left", |
|||
fontSize: 12, |
|||
marginLeft: 20, |
|||
color: "#37E7FF" |
|||
} |
|||
} |
|||
}, |
|||
data: echartsData?.map(x => x), |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
}, |
|||
series: [{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: '78%', |
|||
center: ['40%', '50%'], |
|||
roseType: 'radius', |
|||
label: { |
|||
show: false, |
|||
position: 'outside', |
|||
fontSize: 16, |
|||
formatter: (params) => { |
|||
return `{a|${params.name}} {b|${params.value/count}%}` |
|||
}, |
|||
rich: { |
|||
a: { |
|||
align: "left", |
|||
fontSize: 12, |
|||
}, |
|||
b: { |
|||
formatter: (params) => { |
|||
let obj = echartsData.filter(it => { return it.name == params }) |
|||
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value)}%}` |
|||
}, |
|||
data: echartsData?.map(x => x), |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
}, |
|||
series: [{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: '78%', |
|||
center: ['40%', '50%'], |
|||
roseType: 'radius', |
|||
label: { |
|||
show: false, |
|||
position: 'outside', |
|||
fontSize: 16, |
|||
formatter: (params) => { |
|||
return `{a|${params.name}} {b|${params.value / count}%}` |
|||
}, |
|||
rich: { |
|||
a: { |
|||
align: "left", |
|||
fontSize: 12, |
|||
}, |
|||
b: { |
|||
align: "left", |
|||
fontSize: 12, |
|||
} |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
shadowColor: "rgba(0, 0, 0, 0.5)", |
|||
shadowBlur: 50, |
|||
shadowColor: "rgba(0, 0, 0, 0.5)", |
|||
shadowBlur: 50, |
|||
}, |
|||
}, |
|||
labelLine: { |
|||
show:false, |
|||
length: 10, |
|||
length2: 30, |
|||
}, |
|||
data: echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
},{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: '90%', |
|||
hoverAnimation: false, |
|||
emphasis: { scale: false }, |
|||
center: ['40%', '50%'], |
|||
roseType: 'radius', |
|||
label: { |
|||
show: false, |
|||
position: 'outside', |
|||
fontSize: 16, |
|||
formatter: (params) => { |
|||
return `{a|${params.name}} ` |
|||
}, |
|||
rich: { |
|||
a: { |
|||
align: "left", |
|||
fontSize: 12, |
|||
} |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
}, |
|||
labelLine: { |
|||
show: false, |
|||
length: 10, |
|||
length2: 30, |
|||
}, |
|||
data: echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
}, { |
|||
name: '', |
|||
type: 'pie', |
|||
radius: '90%', |
|||
hoverAnimation: false, |
|||
emphasis: { scale: false }, |
|||
center: ['40%', '50%'], |
|||
roseType: 'radius', |
|||
label: { |
|||
show: false, |
|||
position: 'outside', |
|||
fontSize: 16, |
|||
formatter: (params) => { |
|||
return `{a|${params.name}} ` |
|||
}, |
|||
rich: { |
|||
a: { |
|||
align: "left", |
|||
fontSize: 12, |
|||
} |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
opacity:0.3, |
|||
shadowColor: "rgba(0, 0, 0, 0.8)", |
|||
shadowBlur: 50, |
|||
opacity: 0.3, |
|||
shadowColor: "rgba(0, 0, 0, 0.8)", |
|||
shadowBlur: 50, |
|||
}, |
|||
}, |
|||
labelLine: { |
|||
show:false, |
|||
length: 10, |
|||
length2: 30, |
|||
}, |
|||
data: echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
}] |
|||
}; |
|||
}, |
|||
labelLine: { |
|||
show: false, |
|||
length: 10, |
|||
length2: 30, |
|||
}, |
|||
data: echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
}] |
|||
}; |
|||
|
|||
export default options; |
|||
export default options; |
|||
@ -1,178 +1,178 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'日事件处置情况占比'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="dailyDisposal"></div> |
|||
</div> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'日事件处置情况占比'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="dailyDisposal"></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent'; |
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getWarningStateDay } 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.beginPath(); |
|||
ctx.fillStyle = gr; |
|||
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
|||
ctx.lineTo(width - radius + x, y); |
|||
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.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|||
ctx.closePath(); |
|||
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
|||
ctx.lineTo(width - radius + x, y); |
|||
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.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|||
ctx.closePath(); |
|||
//ctx.stroke(); |
|||
ctx.fill() |
|||
} |
|||
|
|||
export default { |
|||
name: 'dailyDisposal', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('dailyDisposal')); |
|||
|
|||
getWarningStateDay().then(res=>{ |
|||
if ( res.code == 200 ) { |
|||
let data = res.data; |
|||
console.log(data); |
|||
window.echartsData = []; |
|||
for (let i = 0;i < data.length;i++){ |
|||
let it = data[i]; |
|||
if ( it.warningState == 1 ) { |
|||
echartsData.push({ |
|||
name:"上报", |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningState == 2 ) { |
|||
echartsData.push({ |
|||
name:"已完成", |
|||
value: it.number |
|||
}); |
|||
|
|||
} |
|||
if (it.warningState == 3 ) { |
|||
echartsData.push({ |
|||
name:"已终止", |
|||
value: it.number |
|||
}); |
|||
|
|||
} |
|||
if (it.warningState == 4 ) { |
|||
echartsData.push({ |
|||
name:"自动结束", |
|||
value: it.number |
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
export default { |
|||
name: 'dailyDisposal', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('dailyDisposal')); |
|||
|
|||
getWarningStateDay().then(res => { |
|||
if (res.code == 200) { |
|||
let data = res.data; |
|||
if (data.lemgth > 0) { |
|||
window.echartsData = []; |
|||
for (let i = 0; i < data.length; i++) { |
|||
let it = data[i]; |
|||
if (it.warningState == 1) { |
|||
echartsData.push({ |
|||
name: "上报", |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningState == 2) { |
|||
echartsData.push({ |
|||
name: "已完成", |
|||
value: it.number |
|||
}); |
|||
|
|||
} |
|||
if (it.warningState == 3) { |
|||
echartsData.push({ |
|||
name: "已终止", |
|||
value: it.number |
|||
}); |
|||
|
|||
} |
|||
if (it.warningState == 4) { |
|||
echartsData.push({ |
|||
name: "自动结束", |
|||
value: it.number |
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
let count = 0; |
|||
|
|||
echartsData.forEach((it) => { |
|||
count += it.value; |
|||
}) |
|||
|
|||
chartsStatistics.legend.data = window.echartsData?.map(x => x); |
|||
chartsStatistics.series[0].data = echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
count = 0; |
|||
|
|||
echartsData.forEach((it)=>{ |
|||
count += it.value; |
|||
}) |
|||
|
|||
console.log(echartsData); |
|||
|
|||
chartsStatistics.legend.data = window.echartsData?.map(x => x); |
|||
chartsStatistics.series[0].data = echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
chartsStatistics.series[1].data = echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
}); |
|||
|
|||
|
|||
|
|||
|
|||
const domMap = document.getElementById("dailyDisposal"); |
|||
let parentDiv = domMap.firstChild; |
|||
// 创建canvas |
|||
let canvas = document.createElement('canvas'); |
|||
canvas.width = parentDiv.offsetWidth; |
|||
canvas.height =parentDiv.offsetHeight; |
|||
parentDiv.appendChild(canvas); |
|||
const context = canvas.getContext('2d'); |
|||
|
|||
// 填充渐变颜色 |
|||
var gr = context.createLinearGradient(230, 0, 360, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
|
|||
|
|||
context.lineWidth = 1; // 设置线段宽度 |
|||
|
|||
// 绘制圆角矩形 |
|||
drawRoundRect(context, 260, 50, 120, 24, 12,gr) |
|||
drawRoundRect(context, 260, 78, 120, 24, 12,gr) |
|||
drawRoundRect(context, 260, 106, 120, 24, 12,gr) |
|||
|
|||
}); |
|||
}) |
|||
chartsStatistics.series[1].data = echartsData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
}); |
|||
|
|||
|
|||
|
|||
|
|||
const domMap = document.getElementById("dailyDisposal"); |
|||
let parentDiv = domMap.firstChild; |
|||
// 创建canvas |
|||
let canvas = document.createElement('canvas'); |
|||
canvas.width = parentDiv.offsetWidth; |
|||
canvas.height = parentDiv.offsetHeight; |
|||
parentDiv.appendChild(canvas); |
|||
const context = canvas.getContext('2d'); |
|||
|
|||
// 填充渐变颜色 |
|||
var gr = context.createLinearGradient(230, 0, 360, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
|
|||
|
|||
context.lineWidth = 1; // 设置线段宽度 |
|||
|
|||
// 绘制圆角矩形 |
|||
// drawRoundRect(context, 260, 50, 120, 24, 12, gr) |
|||
// drawRoundRect(context, 260, 78, 120, 24, 12, gr) |
|||
// drawRoundRect(context, 260, 106, 120, 24, 12, gr) |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
|
|||
.board { |
|||
height: 200px; |
|||
width: 100%; |
|||
.board{ |
|||
height:200px; |
|||
width: 100%; |
|||
padding: 0px 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; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
padding: 0px 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; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
} |
|||
|
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,88 +1,134 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'日累计感知事件'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="daytotal"></div> |
|||
</div> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'日累计感知事件趋势'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="daytotal"></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent'; |
|||
<script> |
|||
|
|||
export default { |
|||
name: 'RailWayDay', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('daytotal')); |
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent'; |
|||
|
|||
getDailyCumulative().then(res=>{ |
|||
if ( res.code == 200) { |
|||
let data = res.data; |
|||
let timer = []; |
|||
let number = []; |
|||
export default { |
|||
name: 'RailWayDay', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
data.forEach((it)=>{ |
|||
timer.push(it.time); |
|||
number.push(it.number); |
|||
}); |
|||
created() { |
|||
|
|||
chartsStatistics.xAxis.data = timer; |
|||
chartsStatistics.series[0].data = number; |
|||
}, |
|||
methods: { |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('daytotal')); |
|||
|
|||
getDailyCumulative().then(res => { |
|||
if (res.code == 200) { |
|||
let data = res.data; |
|||
let timer = []; |
|||
let number = []; |
|||
//默认数值 |
|||
if(data.length < 1){ |
|||
data = [ |
|||
{ |
|||
time: '00:00', |
|||
number: 800 |
|||
}, |
|||
{ |
|||
time: '02:00', |
|||
number: 1000 |
|||
}, |
|||
{ |
|||
time: '04:00', |
|||
number: 800 |
|||
}, |
|||
{ |
|||
time: '06:00', |
|||
number: 700 |
|||
}, |
|||
{ |
|||
time: '08:00', |
|||
number: 400 |
|||
}, |
|||
{ |
|||
time: '10:00', |
|||
number: 1000 |
|||
}, |
|||
{ |
|||
time: '12:00', |
|||
number: 800 |
|||
}, |
|||
{ |
|||
time: '14:00', |
|||
number: 500 |
|||
}, |
|||
{ |
|||
time: '16:00', |
|||
number: 800 |
|||
}, |
|||
{ |
|||
time: '18:00', |
|||
number: 500 |
|||
}, |
|||
] |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
data.forEach((it) => { |
|||
timer.push(it.time); |
|||
number.push(it.number); |
|||
}); |
|||
|
|||
chartsStatistics.xAxis.data = timer; |
|||
chartsStatistics.series[0].data = number; |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
} |
|||
|
|||
}); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
|
|||
.board { |
|||
height: 200px; |
|||
width: 100%; |
|||
.board{ |
|||
height:200px; |
|||
width: 100%; |
|||
padding: 0px 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; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
padding: 0px 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; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
} |
|||
|
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,272 +1,267 @@ |
|||
import * as echarts from "echarts"; |
|||
let data = [{ |
|||
average:20, |
|||
typeName:'行人', |
|||
percent:0.2 |
|||
},{ |
|||
average:35, |
|||
typeName:'非机动车', |
|||
percent:0.25 |
|||
},{ |
|||
average:23, |
|||
typeName:'抛洒物', |
|||
percent:0.08 |
|||
},{ |
|||
average:20, |
|||
typeName:'烟火', |
|||
percent:0.14 |
|||
},{ |
|||
average:8, |
|||
typeName:'拥堵', |
|||
percent:0.14 |
|||
},{ |
|||
average:5, |
|||
typeName:'逆行', |
|||
percent:0.14 |
|||
}] |
|||
let chartData = [],lengData=[], colorList = ['#50EED3', '#5DEF9E', '#29B3FF', '#FB5C38', '#FB5C38','#FCBB14']; |
|||
for (let i = 0; i < data.length; i++) { |
|||
chartData.push({ |
|||
value: data[i].average, |
|||
name: data[i].typeName, |
|||
percent: data[i].percent, |
|||
color: colorList[i] |
|||
}) |
|||
lengData.push({ |
|||
name: data[i].typeName, |
|||
color: colorList[i] |
|||
}) |
|||
} |
|||
|
|||
let a = chartData.map(t=>{ |
|||
t.value = parseInt(t.value) |
|||
return t |
|||
}) |
|||
const sum = a.reduce((per, cur) => per + cur.value, 0); |
|||
const gap = (1 * sum) / 100; |
|||
const pieData1 = []; |
|||
const gapData = { |
|||
name: "", |
|||
value: gap, |
|||
itemStyle: { |
|||
color: "transparent", |
|||
}, |
|||
}; |
|||
let total = 0; |
|||
chartData.forEach((item) => { |
|||
total += parseInt(item.value); |
|||
}); |
|||
|
|||
for (let i = 0; i < chartData.length; i++) { |
|||
// 第一圈数据
|
|||
pieData1.push({ |
|||
...chartData[i], |
|||
}); |
|||
pieData1.push(gapData); |
|||
} |
|||
let data = [ |
|||
{ |
|||
average: 10, |
|||
typeName: "交通拥堵", |
|||
percent: 0.1, |
|||
}, |
|||
{ |
|||
average: 11, |
|||
typeName: "行人", |
|||
percent: 0.11, |
|||
}, |
|||
{ |
|||
average: 12, |
|||
typeName: "非机动车", |
|||
percent: 0.12, |
|||
}, |
|||
{ |
|||
average: 13, |
|||
typeName: "停车", |
|||
percent: 0.13, |
|||
}, |
|||
{ |
|||
average: 5, |
|||
typeName: "倒车/逆行", |
|||
percent: 0.05, |
|||
}, |
|||
{ |
|||
average: 15, |
|||
typeName: "烟火", |
|||
percent: 0.15, |
|||
}, |
|||
{ |
|||
average: 10, |
|||
typeName: "撒落物", |
|||
percent: 0.1, |
|||
}, |
|||
{ |
|||
average: 10, |
|||
typeName: "异常天气", |
|||
percent: 0.1, |
|||
}, |
|||
{ |
|||
average: 14, |
|||
typeName: "护栏碰撞", |
|||
percent: 0.14, |
|||
}, |
|||
]; |
|||
let chartData = [], |
|||
lengData = [], |
|||
colorList = [ |
|||
"#50EED3", |
|||
"#5DEF9E", |
|||
"#29B3FF", |
|||
"#FB5C38", |
|||
"#FB5C38", |
|||
"#FCBB14", |
|||
]; |
|||
for (let i = 0; i < data.length; i++) { |
|||
chartData.push({ |
|||
value: data[i].average, |
|||
name: data[i].typeName, |
|||
percent: data[i].percent, |
|||
color: colorList[i], |
|||
}); |
|||
lengData.push({ |
|||
name: data[i].typeName, |
|||
color: colorList[i], |
|||
}); |
|||
} |
|||
|
|||
let a = chartData.map((t) => { |
|||
t.value = parseInt(t.value); |
|||
return t; |
|||
}); |
|||
const sum = a.reduce((per, cur) => per + cur.value, 0); |
|||
const gap = (1 * sum) / 100; |
|||
const pieData1 = []; |
|||
const gapData = { |
|||
name: "", |
|||
value: gap, |
|||
itemStyle: { |
|||
color: "transparent", |
|||
}, |
|||
}; |
|||
let total = 0; |
|||
chartData.forEach((item) => { |
|||
total += parseInt(item.value); |
|||
}); |
|||
|
|||
console.log(pieData1); |
|||
var options = { |
|||
tooltip: { |
|||
confine: true, |
|||
textStyle: { |
|||
fontSize: 14 // 字体大小
|
|||
}, |
|||
for (let i = 0; i < chartData.length; i++) { |
|||
// 第一圈数据
|
|||
pieData1.push({ |
|||
...chartData[i], |
|||
}); |
|||
pieData1.push(gapData); |
|||
} |
|||
|
|||
console.log(pieData1); |
|||
var options = { |
|||
tooltip: { |
|||
confine: true, |
|||
textStyle: { |
|||
fontSize: 14, // 字体大小
|
|||
}, |
|||
}, |
|||
title: { |
|||
//圆环中间内容
|
|||
text: "100%", |
|||
subtext: "类型分析", |
|||
left: "19%", |
|||
top: "40%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 26, |
|||
align: "center", |
|||
}, |
|||
title:{ //圆环中间内容
|
|||
text: '100%', |
|||
subtext: '类型分析', |
|||
left:"19%", |
|||
top:"40%", |
|||
textStyle:{ |
|||
color:"#fff", |
|||
fontSize:26, |
|||
align:"center" |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 18, |
|||
fontWeight: '400', |
|||
top: -8, |
|||
subtextStyle: { |
|||
fontSize: 18, |
|||
fontWeight: "400", |
|||
top: -8, |
|||
|
|||
align:"center", |
|||
color:'#fff' |
|||
}, |
|||
align: "center", |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
color: colorList, |
|||
legend: { |
|||
top: "15%", |
|||
right: -5, |
|||
orient: "vertical", //改变排列方式
|
|||
icon: "circle", //改变legend小图标形状
|
|||
itemGap: 20, // 设置legend的间距
|
|||
itemWidth: 10, // 设置宽度
|
|||
itemHeight: 10, // 设置高度
|
|||
textStyle: { |
|||
right: -19, |
|||
fontSize: 30, |
|||
color: "#fff", |
|||
rich: { |
|||
a: { |
|||
width: 45, |
|||
fontSize: 12, |
|||
}, |
|||
b: { |
|||
fontSize: 14, |
|||
color: "#37E7FF", |
|||
marginLeft: -0, |
|||
}, |
|||
}, |
|||
}, |
|||
color:['#50EED3', '#5F8EFE','#29B3FF', '#5DEF9E', '#FB5C38', '#FCBB14','#50EED3'], |
|||
legend: { |
|||
top:'20%', |
|||
right: -10, |
|||
orient: "vertical", //改变排列方式
|
|||
icon: "circle", //改变legend小图标形状
|
|||
itemGap: 20, // 设置legend的间距
|
|||
itemWidth: 12, // 设置宽度
|
|||
itemHeight: 12, // 设置高度
|
|||
itemStyle:{ |
|||
|
|||
}, |
|||
textStyle: { |
|||
right: -19, |
|||
fontSize: 50, |
|||
itemStyle: { |
|||
borderColor: "transparent", |
|||
}, |
|||
data: lengData, |
|||
formatter: function (name) { |
|||
let total = 0; |
|||
let target; |
|||
for (let i = 0; i < data.length; i++) { |
|||
total += data[i].average; |
|||
if (data[i].typeName == name) { |
|||
target = data[i].average; |
|||
} |
|||
} |
|||
var arr = [ |
|||
"{a|" + name + "}", |
|||
"{b|" + ((target / total) * 100).toFixed(2) + "%}", |
|||
]; |
|||
return arr.join(" "); |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
roseType: "radius", |
|||
startAngle: -220, |
|||
avoidLabelOverlap: true, //防止标签重叠
|
|||
type: "pie", |
|||
radius: ["50%", "80%"], //大小
|
|||
center: ["25%", "50%"], //位置
|
|||
hoverAnimation: true, |
|||
itemStyle: { |
|||
normal: { |
|||
borderWidth: 6, |
|||
shadowBlur: 10, |
|||
borderRadius: 0, // 圆角
|
|||
}, |
|||
}, |
|||
labelLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
width: 3, |
|||
}, |
|||
normal: { |
|||
length: 30, // 指示线长度
|
|||
length2: 80, |
|||
}, |
|||
}, |
|||
data: pieData1, |
|||
label: { |
|||
show: false, |
|||
formatter: function (params) {}, |
|||
textStyle: { |
|||
fontSize: "18", |
|||
fontWeight: "bold", |
|||
color: "#fff", |
|||
rich:{ |
|||
a:{ |
|||
width:45, |
|||
fontSize: 12, |
|||
}, |
|||
b:{ |
|||
fontSize:14, |
|||
color:"#37E7FF", |
|||
marginLeft:-0, |
|||
} |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
borderColor: "transparent", |
|||
}, |
|||
data: lengData, |
|||
formatter: function(name){ |
|||
let total = 0 |
|||
let target |
|||
for (let i = 0; i < data.length; i++) { |
|||
total += data[i].average |
|||
if (data[i].typeName === name) { |
|||
target = data[i].average |
|||
} |
|||
} |
|||
var arr = [ |
|||
'{a|' + name + '}', |
|||
'{b|' + ((target / total) * 100).toFixed(2) + '%}', |
|||
] |
|||
return arr.join(' ') |
|||
}, |
|||
|
|||
}, |
|||
rich: { |
|||
color0: { |
|||
color: "#D56383", |
|||
}, |
|||
color1: { |
|||
color: "#00FF95", |
|||
}, |
|||
color3: { |
|||
color: "#FFE900", |
|||
}, |
|||
color2: { |
|||
color: "#F5B157", |
|||
}, |
|||
color4: { |
|||
color: "#1DA7FF", |
|||
}, |
|||
color5: { |
|||
color: "#2967EA", |
|||
}, |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
roseType: 'radius', |
|||
startAngle:-220, |
|||
avoidLabelOverlap: true,//防止标签重叠
|
|||
type: 'pie', |
|||
radius: ['63%', '90%'], //大小
|
|||
center : ['25%','50%'], //位置
|
|||
hoverAnimation: true, |
|||
itemStyle: { |
|||
normal: { |
|||
borderWidth: 6, |
|||
shadowBlur: 10, |
|||
borderRadius: 0, // 圆角
|
|||
}, |
|||
}, |
|||
labelLine: { |
|||
show:false, |
|||
lineStyle: { |
|||
width: 3, |
|||
}, |
|||
normal: { |
|||
length: 30, // 指示线长度
|
|||
length2:80 |
|||
}, |
|||
}, |
|||
data: pieData1, |
|||
label: { |
|||
show: false, |
|||
formatter: function(params){ }, |
|||
textStyle: { |
|||
fontSize: '18', |
|||
fontWeight: 'bold', |
|||
color:'#fff' |
|||
}, |
|||
rich: { |
|||
color0: { |
|||
color: '#D56383', |
|||
}, |
|||
color1: { |
|||
color: '#00FF95', |
|||
}, |
|||
color3: { |
|||
color: '#FFE900', |
|||
}, |
|||
color2: { |
|||
color: '#F5B157', |
|||
}, |
|||
color4: { |
|||
color: '#1DA7FF', |
|||
}, |
|||
color5:{ |
|||
color:'#2967EA' |
|||
} |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
// {
|
|||
// type: 'gauge',
|
|||
// zlevel: 0,
|
|||
// splitNumber: 360,
|
|||
// radius: '50%',
|
|||
// center: ['25%', '50%'],
|
|||
// startAngle: 90,
|
|||
// endAngle: -269.9999,
|
|||
// axisLine: {
|
|||
// show: false,
|
|||
// },
|
|||
// axisTick: {
|
|||
// show: false,
|
|||
// },
|
|||
// axisLabel: {
|
|||
// show: false,
|
|||
// },
|
|||
// splitLine: {
|
|||
// show: true,
|
|||
// length:68,
|
|||
// lineStyle: {
|
|||
// width: 2,
|
|||
// color: '#277DCA',
|
|||
// },
|
|||
// },
|
|||
// pointer: {
|
|||
// show: 0,
|
|||
// },
|
|||
// detail: {
|
|||
// show: 0,
|
|||
// },
|
|||
// },
|
|||
{ |
|||
type: 'gauge', |
|||
zlevel: 2, |
|||
splitNumber: 185, |
|||
radius: '70%', |
|||
center: ['25%', '50%'], |
|||
startAngle: 90, |
|||
endAngle: -269.9999, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
length:2, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: '#017383', |
|||
}, |
|||
}, |
|||
pointer: { |
|||
show: 0, |
|||
}, |
|||
detail: { |
|||
show: 0, |
|||
}, |
|||
}, |
|||
] |
|||
}; |
|||
|
|||
export default options |
|||
{ |
|||
type: "gauge", |
|||
zlevel: 2, |
|||
splitNumber: 185, |
|||
radius: "70%", |
|||
center: ["25%", "50%"], |
|||
startAngle: 90, |
|||
endAngle: -269.9999, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
length: 2, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: "#017383", |
|||
}, |
|||
}, |
|||
pointer: { |
|||
show: 0, |
|||
}, |
|||
detail: { |
|||
show: 0, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
File diff suppressed because it is too large
@ -1,96 +1,97 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="monthStatistics"></div> |
|||
</div> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="monthStatistics"></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent'; |
|||
<script> |
|||
|
|||
export default { |
|||
name: 'MonthStatistics', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('monthStatistics')); |
|||
getDailyCumulativeMonth().then((res)=>{ |
|||
console.log(res); |
|||
if ( res.code == 200 ) { |
|||
let data = res.data; |
|||
let timeData = []; |
|||
let datasN = []; |
|||
for (var i = 0; i < 24;i++){ |
|||
let k = 0; |
|||
for (var j = 0;j < data.length;j++){ |
|||
let it = data[j]; |
|||
if ( it.time == i ) { |
|||
timeData.push( i +"点至"+ (i +1)+"点"); |
|||
datasN.push(it.number); |
|||
k++; |
|||
} |
|||
} |
|||
if ( k == 0 ) { |
|||
timeData.push( i +"点至"+ (i +1)+"点"); |
|||
datasN.push(0); |
|||
} |
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent'; |
|||
|
|||
export default { |
|||
name: 'MonthStatistics', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('monthStatistics')); |
|||
getDailyCumulativeMonth().then((res) => { |
|||
console.log(res); |
|||
if (res.code == 200) { |
|||
let data = res.data; |
|||
let timeData = []; |
|||
let datasN = []; |
|||
for (var i = 0; i < 24; i++) { |
|||
let k = 0; |
|||
for (var j = 0; j < data.length; j++) { |
|||
let it = data[j]; |
|||
if (it.time == i) { |
|||
timeData.push(i + "点至" + (i + 1) + "点"); |
|||
datasN.push(it.number); |
|||
k++; |
|||
} |
|||
} |
|||
if (k == 0) { |
|||
timeData.push(i + "点至" + (i + 1) + "点"); |
|||
datasN.push(0); |
|||
} |
|||
chartsStatistics.xAxis.data = timeData; |
|||
chartsStatistics.series[0].data = datasN; |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
} |
|||
|
|||
}); |
|||
chartsStatistics.xAxis.data = timeData; |
|||
chartsStatistics.series[0].data = datasN; |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
} |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
|
|||
.board { |
|||
height: 200px; |
|||
width: 100%; |
|||
.board{ |
|||
height:200px; |
|||
width: 100%; |
|||
padding: 0px 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; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
padding: 0px 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; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
} |
|||
|
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,111 +1,158 @@ |
|||
<template> |
|||
<div class='situation'> |
|||
<WgtTitle :title="'路段感知事件排名'"></WgtTitle> |
|||
<div class="board"> |
|||
<!-- <div class="tag"> |
|||
<div class="situation"> |
|||
<WgtTitle :title="'路段感知事件排名'"></WgtTitle> |
|||
<div class="board"> |
|||
<!-- <div class="tag"> |
|||
<div class="checked">路段车流量Top10</div> |
|||
<div>断面交通量Top10</div> |
|||
</div> --> |
|||
<div class="charts keep-ratio " id="situationEchartBox"></div> |
|||
</div> |
|||
<div class="charts keep-ratio" id="situationEchartBox"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent'; |
|||
</div> |
|||
</template> |
|||
|
|||
export default { |
|||
name: 'Situation', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('situationEchartBox')); |
|||
|
|||
getSectionPerceivedList({}).then((res)=>{ |
|||
console.log(res); |
|||
if ( res.code == 200 ) { |
|||
let data = res.data; |
|||
let texts = []; |
|||
let datas = []; |
|||
<script> |
|||
import WgtTitle from "../../../widgets/title"; |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getSectionPerceivedList } from "../../../../../../../api/event/perceiveEvent"; |
|||
|
|||
data.forEach(it => { |
|||
texts.push(it.sectionName); |
|||
datas.push(it.number); |
|||
}); |
|||
export default { |
|||
name: "Situation", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
chartsStatistics.yAxis[0].data = texts; |
|||
chartsStatistics.series[0].data = datas; |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init( |
|||
document.getElementById("situationEchartBox") |
|||
); |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
} |
|||
}); |
|||
getSectionPerceivedList({}).then((res) => { |
|||
console.log(res); |
|||
if (res.code == 200) { |
|||
let data = res.data; |
|||
|
|||
|
|||
let texts = []; |
|||
let datas = []; |
|||
//默认显示数值 |
|||
if (data.length <= 0) { |
|||
data = [ |
|||
{ |
|||
sectionName: "华山北枢纽-济南虚", |
|||
number: 32774, |
|||
}, |
|||
{ |
|||
sectionName: "东客站虚-华山北枢纽", |
|||
number: 30067, |
|||
}, |
|||
{ |
|||
sectionName: "小许家枢纽-东客站虚", |
|||
number: 30057, |
|||
}, |
|||
{ |
|||
sectionName: "临沂枣园枢纽-临沂虚", |
|||
number: 28774, |
|||
}, |
|||
{ |
|||
sectionName: "华山北枢纽-济南虚", |
|||
number: 26021, |
|||
}, |
|||
{ |
|||
sectionName: "华山北枢纽-济南虚", |
|||
number: 24061, |
|||
}, |
|||
{ |
|||
sectionName: "华山北枢纽-济南虚", |
|||
number: 20150, |
|||
}, |
|||
{ |
|||
sectionName: "华山北枢纽-济南虚", |
|||
number: 20140, |
|||
}, |
|||
{ |
|||
sectionName: "华山北枢纽-济南虚", |
|||
number: 20050, |
|||
}, |
|||
{ |
|||
sectionName: "华山北枢纽-济南虚", |
|||
number: 20010, |
|||
}, |
|||
]; |
|||
} |
|||
data.forEach((it) => { |
|||
texts.push(it.sectionName); |
|||
datas.push(it.number); |
|||
}); |
|||
|
|||
chartsStatistics.yAxis[0].data = texts; |
|||
chartsStatistics.series[0].data = datas; |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.situation { |
|||
width: 100%; |
|||
|
|||
.board { |
|||
height: 455px; |
|||
width: 100%; |
|||
padding: 10px 10px; |
|||
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; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.situation { |
|||
|
|||
.charts { |
|||
// margin-top: -40px; |
|||
height: 450px; |
|||
width: 100%; |
|||
.board{ |
|||
height: 455px; |
|||
width: 100%; |
|||
padding: 0px 30px; |
|||
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; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
.charts { |
|||
margin-top: -40px; |
|||
height: 400px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.tag { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: flex-start; |
|||
|
|||
div { |
|||
width: 150px; |
|||
height: 25px; |
|||
line-height: 25px; |
|||
border-radius: 20px; |
|||
text-align: center; |
|||
background-color: #c87800; |
|||
margin-right: 10px; |
|||
} |
|||
.tag{ |
|||
margin-top: 20px; |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: flex-start; |
|||
div{ |
|||
width: 150px; |
|||
height: 25px; |
|||
line-height: 25px; |
|||
border-radius: 20px; |
|||
text-align: center; |
|||
background-color: #C87800; |
|||
margin-right: 10px; |
|||
} |
|||
.checked{ |
|||
background-color: #00B3CC;; |
|||
} |
|||
|
|||
.checked { |
|||
background-color: #00b3cc; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
} |
|||
</style> |
|||
|
|||
@ -1,201 +1,201 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="typeAnalysis"></div> |
|||
</div> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="typeAnalysis"></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent'; |
|||
<script> |
|||
|
|||
|
|||
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { |
|||
import WgtTitle from '../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent'; |
|||
|
|||
|
|||
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => { |
|||
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|||
ctx.beginPath(); |
|||
ctx.beginPath(); |
|||
ctx.fillStyle = gr; |
|||
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
|||
ctx.lineTo(width - radius + x, y); |
|||
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.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|||
ctx.closePath(); |
|||
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
|||
ctx.lineTo(width - radius + x, y); |
|||
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.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|||
ctx.closePath(); |
|||
//ctx.stroke(); |
|||
ctx.fill() |
|||
} |
|||
|
|||
|
|||
export default { |
|||
name: 'TypeAnalysis', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('typeAnalysis')); |
|||
|
|||
|
|||
getWarningTypeDay().then(res=>{ |
|||
console.log(res); |
|||
if ( res.code == 200 ) { |
|||
let data = res.data; |
|||
console.log("===================",data); |
|||
typeAnalysisData = []; |
|||
for (var i = 0;i < data.length;i++){ |
|||
var it = data[i]; |
|||
if ( it.warningType == 1) { |
|||
typeAnalysisData.push({ |
|||
name:'交通拥堵', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 2) { |
|||
typeAnalysisData.push({ |
|||
name:'行人', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 3) { |
|||
typeAnalysisData.push({ |
|||
name:'非机动车', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 4) { |
|||
typeAnalysisData.push({ |
|||
name:'停车', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 5) { |
|||
typeAnalysisData.push({ |
|||
name:'倒车/逆行', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 6) { |
|||
typeAnalysisData.push({ |
|||
name:'烟火', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 7) { |
|||
typeAnalysisData.push({ |
|||
name:'撒落物', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 8) { |
|||
typeAnalysisData.push({ |
|||
name:'异常天气', |
|||
value:it.number |
|||
}); |
|||
} |
|||
if ( it.warningType == 9) { |
|||
typeAnalysisData.push({ |
|||
name:'护栏碰撞', |
|||
value:it.number |
|||
}); |
|||
} |
|||
|
|||
drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12,gr) |
|||
export default { |
|||
name: 'TypeAnalysis', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('typeAnalysis')); |
|||
|
|||
|
|||
getWarningTypeDay().then(res => { |
|||
console.log(res); |
|||
if (res.code == 200) { |
|||
let data = res.data; |
|||
console.log("===================", data); |
|||
typeAnalysisData = []; |
|||
for (var i = 0; i < data.length; i++) { |
|||
var it = data[i]; |
|||
if (it.warningType == 1) { |
|||
typeAnalysisData.push({ |
|||
name: '交通拥堵', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 2) { |
|||
typeAnalysisData.push({ |
|||
name: '行人', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 3) { |
|||
typeAnalysisData.push({ |
|||
name: '非机动车', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 4) { |
|||
typeAnalysisData.push({ |
|||
name: '停车', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 5) { |
|||
typeAnalysisData.push({ |
|||
name: '倒车/逆行', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 6) { |
|||
typeAnalysisData.push({ |
|||
name: '烟火', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 7) { |
|||
typeAnalysisData.push({ |
|||
name: '撒落物', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 8) { |
|||
typeAnalysisData.push({ |
|||
name: '异常天气', |
|||
value: it.number |
|||
}); |
|||
} |
|||
if (it.warningType == 9) { |
|||
typeAnalysisData.push({ |
|||
name: '护栏碰撞', |
|||
value: it.number |
|||
}); |
|||
} |
|||
|
|||
drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12, gr) |
|||
} |
|||
|
|||
chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name); |
|||
chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name); |
|||
chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => { |
|||
return { |
|||
...item, |
|||
label: { |
|||
color: colorList[index] |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
myChart.setOption(chartsStatistics); |
|||
}) |
|||
|
|||
const domMap = document.getElementById("typeAnalysis"); |
|||
let parentDiv = domMap.firstChild; |
|||
// 创建canvas |
|||
let canvas = document.createElement('canvas'); |
|||
canvas.width = parentDiv.offsetWidth; |
|||
canvas.height =parentDiv.offsetHeight; |
|||
parentDiv.appendChild(canvas); |
|||
const context = canvas.getContext('2d'); |
|||
|
|||
// 填充渐变颜色 |
|||
var gr = context.createLinearGradient(230, 0, 360, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
|
|||
|
|||
context.lineWidth = 1; // 设置线段宽度 |
|||
|
|||
// 绘制圆角矩形 |
|||
|
|||
// drawRoundRect(context, 260, 36, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 64, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 92, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 120, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 148, 120, 24, 12,gr) |
|||
}); |
|||
myChart.setOption(chartsStatistics); |
|||
}) |
|||
|
|||
const domMap = document.getElementById("typeAnalysis"); |
|||
let parentDiv = domMap.firstChild; |
|||
// 创建canvas |
|||
let canvas = document.createElement('canvas'); |
|||
canvas.width = parentDiv.offsetWidth; |
|||
canvas.height = parentDiv.offsetHeight; |
|||
parentDiv.appendChild(canvas); |
|||
const context = canvas.getContext('2d'); |
|||
|
|||
// 填充渐变颜色 |
|||
var gr = context.createLinearGradient(230, 0, 360, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
|
|||
|
|||
context.lineWidth = 1; // 设置线段宽度 |
|||
|
|||
// 绘制圆角矩形 |
|||
|
|||
// drawRoundRect(context, 260, 36, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 64, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 92, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 120, 120, 24, 12,gr) |
|||
// drawRoundRect(context, 260, 148, 120, 24, 12,gr) |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
|
|||
.board { |
|||
height: 200px; |
|||
width: 100%; |
|||
.board{ |
|||
height:200px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425888 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.1), rgba(55, 231, 255, 0)) 1 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #06425888 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
} |
|||
|
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue