mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更改

wangqin
zhangzhang 1 year ago
parent
27febc35ef
commit
846d776ccc
2 changed files with 116 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  2. 185
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue

6
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
View File

@ -125,16 +125,18 @@ var options = {
data: lengData,
formatter: function (name) {
let target = 0;
let percent = 0;
if (!mainData) return "";
for (let i = 0; i < window.mainData.length; i++) {
if (window.mainData[i].name === name) {
target = window.mainData[i].value;
percent = window.mainData[i].percent;
}
}
console.log('starget',target)
console.log("starget", target);
var arr = [
"{ast|" + name + "}",
"{bst|" + Math.round((target * 100).toFixed(0)) + "% }",
"{bst|" + Math.round((percent * 100).toFixed(0)) + "% }",
"{cst|" + Math.round(target) + "起}",
];
return arr.join(" ");

185
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
View File

@ -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'
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.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>
Write Preview
Loading…
Cancel
Save