|
|
|
@ -1,49 +1,56 @@ |
|
|
|
<template> |
|
|
|
<div @resize="changeReisze" class='congestion'> |
|
|
|
<div @resize="changeReisze" class="congestion"> |
|
|
|
<WgtTitle :title="'感知事件源分析'"></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<div class="charts keep-ratio " id="eventSource"></div> |
|
|
|
<div class="charts keep-ratio" id="eventSource"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
import WgtTitle from '../../../widgets/title' |
|
|
|
<script> |
|
|
|
import WgtTitle from "../../../widgets/title"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import chartsStatistics from "./assets/charts"; |
|
|
|
import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent'; |
|
|
|
import { getWarningSourceGroup } from "../../../../../../../api/event/perceiveEvent"; |
|
|
|
|
|
|
|
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => { |
|
|
|
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|
|
|
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.fillStyle = gr; |
|
|
|
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
|
|
|
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.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.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.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI); |
|
|
|
ctx.closePath(); |
|
|
|
//ctx.stroke(); |
|
|
|
ctx.fill() |
|
|
|
} |
|
|
|
ctx.fill(); |
|
|
|
}; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'EventSource', |
|
|
|
name: "EventSource", |
|
|
|
components: { |
|
|
|
WgtTitle |
|
|
|
WgtTitle, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
} |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
methods: { |
|
|
|
changeReisze() { |
|
|
|
this.myChart.resize(); |
|
|
|
@ -52,7 +59,7 @@ export default { |
|
|
|
mounted() { |
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
var myChart = echarts.init(document.getElementById('eventSource')); |
|
|
|
var myChart = echarts.init(document.getElementById("eventSource")); |
|
|
|
|
|
|
|
getWarningSourceGroup().then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
@ -63,32 +70,36 @@ export default { |
|
|
|
let chartData = [ |
|
|
|
{ |
|
|
|
average: 0, |
|
|
|
name: '视频AI', |
|
|
|
percent: 0.3 |
|
|
|
name: "视频AI", |
|
|
|
percent: 0.3, |
|
|
|
}, |
|
|
|
{ |
|
|
|
average: 0, |
|
|
|
name: '雷达识别', |
|
|
|
percent: 0.2 |
|
|
|
}, { |
|
|
|
name: "雷达识别", |
|
|
|
percent: 0.2, |
|
|
|
}, |
|
|
|
{ |
|
|
|
average: 0, |
|
|
|
name: '锥桶', |
|
|
|
percent: 0.1 |
|
|
|
}, { |
|
|
|
name: "锥桶", |
|
|
|
percent: 0.1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
average: 0, |
|
|
|
name: '护栏碰撞', |
|
|
|
percent: 0.2 |
|
|
|
}, { |
|
|
|
name: "护栏碰撞", |
|
|
|
percent: 0.2, |
|
|
|
}, |
|
|
|
{ |
|
|
|
average: 0, |
|
|
|
name: '扫码报警', |
|
|
|
percent: 0.1 |
|
|
|
}, { |
|
|
|
name: "扫码报警", |
|
|
|
percent: 0.1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
average: 0, |
|
|
|
name: '非机预警', |
|
|
|
percent: 0.1 |
|
|
|
name: "非机预警", |
|
|
|
percent: 0.1, |
|
|
|
}, |
|
|
|
] |
|
|
|
data.forEach(it => { |
|
|
|
]; |
|
|
|
data.forEach((it) => { |
|
|
|
if (it.warningSource == 1) { |
|
|
|
chartData[0].average += it.number; |
|
|
|
} |
|
|
|
@ -109,9 +120,16 @@ export default { |
|
|
|
} |
|
|
|
// total ++; |
|
|
|
// drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr); |
|
|
|
}) |
|
|
|
}); |
|
|
|
// console.log('data',chartData) |
|
|
|
let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA']; |
|
|
|
let colorList = [ |
|
|
|
"#006EDF", |
|
|
|
"#00FF00", |
|
|
|
"#FFC30D", |
|
|
|
"#FF8400", |
|
|
|
"#1DA7FF", |
|
|
|
"#2967EA", |
|
|
|
]; |
|
|
|
let lengData = []; |
|
|
|
let mainData = []; |
|
|
|
|
|
|
|
@ -126,55 +144,70 @@ export default { |
|
|
|
name: it.name, |
|
|
|
color: colorList[i], |
|
|
|
value: it.average, |
|
|
|
percent: (it.average / total) || 0 |
|
|
|
}) |
|
|
|
percent: it.average / total || 0, |
|
|
|
}); |
|
|
|
} |
|
|
|
window.mainData = mainData; |
|
|
|
// console.log('mainData', mainData) |
|
|
|
console.log("mainData", mainData); |
|
|
|
chartsStatistics.title.text = `{tb|${total}}`; |
|
|
|
chartsStatistics.title.subtext = "{zb|总数}"; |
|
|
|
|
|
|
|
chartsStatistics.legend.data = lengData; |
|
|
|
chartsStatistics.series[0].data = mainData; |
|
|
|
|
|
|
|
myChart.on('mouseover', (params) => { |
|
|
|
// console.log('params',params) |
|
|
|
if (params.componentType == 'graphic') { |
|
|
|
return |
|
|
|
} |
|
|
|
chartsStatistics.title.text = `{tb|${params.percent}%}`; |
|
|
|
chartsStatistics.title.subtext = `{zb|${params.data.name}}`; |
|
|
|
// chartsStatistics.title.left = "22%"; |
|
|
|
myChart.setOption(chartsStatistics); |
|
|
|
}) |
|
|
|
|
|
|
|
// 用户鼠标移出时，重新开始自动切换 |
|
|
|
myChart.on('mouseout', (params) => { |
|
|
|
chartsStatistics.title.text = `{tb|${total}}`; |
|
|
|
chartsStatistics.title.subtext = "{zb|总数}"; |
|
|
|
// chartsStatistics.title.left = "25%"; |
|
|
|
myChart.setOption(chartsStatistics); |
|
|
|
}) |
|
|
|
// chartsStatistics.legend.formatter = (name) => { |
|
|
|
// let target = 0; |
|
|
|
// if (!mainData) return ""; |
|
|
|
// for (let i = 0; i < window.mainData.length; i++) { |
|
|
|
// if (window.mainData[i].name === name) { |
|
|
|
// target = window.mainData[i].value; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// console.log("starget", target); |
|
|
|
// var arr = [ |
|
|
|
// "{ast|" + name + "}", |
|
|
|
// "{bst|" + Math.round((target * 100).toFixed(0)) + "% }", |
|
|
|
// "{cst|" + Math.round(target) + "起}", |
|
|
|
// ]; |
|
|
|
// return arr.join(" "); |
|
|
|
// }; |
|
|
|
|
|
|
|
// myChart.on("mouseover", (params) => { |
|
|
|
// // console.log('params',params) |
|
|
|
// if (params.componentType == "graphic") { |
|
|
|
// return; |
|
|
|
// } |
|
|
|
// chartsStatistics.title.text = `{tb|${params.percent}%}`; |
|
|
|
// chartsStatistics.title.subtext = `{zb|${params.data.name}}`; |
|
|
|
// // chartsStatistics.title.left = "22%"; |
|
|
|
// myChart.setOption(chartsStatistics); |
|
|
|
// }); |
|
|
|
|
|
|
|
// // 用户鼠标移出时，重新开始自动切换 |
|
|
|
// myChart.on("mouseout", (params) => { |
|
|
|
// chartsStatistics.title.text = `{tb|${total}}`; |
|
|
|
// chartsStatistics.title.subtext = "{zb|总数}"; |
|
|
|
// // chartsStatistics.title.left = "25%"; |
|
|
|
// myChart.setOption(chartsStatistics); |
|
|
|
// }); |
|
|
|
// } |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
myChart.setOption(chartsStatistics); |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
const domMap = document.getElementById("eventSource"); |
|
|
|
let parentDiv = domMap.firstChild; |
|
|
|
// 创建canvas |
|
|
|
let canvas = document.createElement('canvas'); |
|
|
|
let canvas = document.createElement("canvas"); |
|
|
|
canvas.width = parentDiv.offsetWidth; |
|
|
|
canvas.height = parentDiv.offsetHeight; |
|
|
|
parentDiv.appendChild(canvas); |
|
|
|
const context = canvas.getContext('2d'); |
|
|
|
const context = canvas.getContext("2d"); |
|
|
|
|
|
|
|
// 填充渐变颜色 |
|
|
|
let gr = context.createLinearGradient(230, 0, 360, 0); |
|
|
|
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
gr.addColorStop(0, 'rgba(92,197,255,0.3)'); |
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.3)"); |
|
|
|
drawRoundRect(context, 214, 15, 134, 21, 12, gr); |
|
|
|
drawRoundRect(context, 214, 42, 134, 21, 12, gr); |
|
|
|
drawRoundRect(context, 214, 69, 134, 21, 12, gr); |
|
|
|
@ -184,17 +217,14 @@ export default { |
|
|
|
|
|
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.myChart = myChart; |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.congestion { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
@ -206,11 +236,15 @@ export default { |
|
|
|
border-radius: 5px 5px 5px 5px; |
|
|
|
opacity: 1; |
|
|
|
border: 1px solid; |
|
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
border-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; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -219,4 +253,3 @@ export default { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
hui
1 year ago