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

更改

wangqin
zhangzhang 1 year ago
parent
846d776ccc
commit
f0cbfeebd2
2 changed files with 117 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
  2. 166
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

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

@ -21,6 +21,8 @@ window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
var options = { var options = {
color: colorList, color: colorList,
legend: { legend: {
width: "500px",
height: "220px",
orient: "vertical", orient: "vertical",
top: "10", top: "10",
icon: "circle", icon: "circle",
@ -54,9 +56,11 @@ var options = {
}, },
formatter: (params) => { formatter: (params) => {
let count = 0; let count = 0;
console.log("typeAnalysisData", typeAnalysisData);
typeAnalysisData.forEach((it) => { typeAnalysisData.forEach((it) => {
count += it.value; count += it.value;
}); });
console.log("count", count);
let obj = typeAnalysisData.filter((it) => { let obj = typeAnalysisData.filter((it) => {
return it.name == params; return it.name == params;
}); });
@ -65,6 +69,13 @@ var options = {
Math.round((obj[0].value / count) * 100) || 0 Math.round((obj[0].value / count) * 100) || 0
}%} {cst|${obj[0].value}起}`; }%} {cst|${obj[0].value}起}`;
}, },
pageIconColor: "#fff",
pageIconSize: 10,
pageTextStyle: {
color: "#fff",
},
type: "scroll",
pageButtonPosition: "end",
// data: typeAnalysisData?.map(x => x.name), // data: typeAnalysisData?.map(x => x.name),
}, },
tooltip: { tooltip: {

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

@ -1,162 +1,185 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="typeAnalysis"></div> <div class="charts keep-ratio" id="typeAnalysis"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import WgtTitle from "../../../widgets/title";
import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent'; import { getWarningTypeDay } 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, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = gr; 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.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.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.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.closePath();
//ctx.stroke(); //ctx.stroke();
ctx.fill() ctx.fill();
} };
export default { export default {
name: 'TypeAnalysis', name: "TypeAnalysis",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {};
}
},
created() {
},
methods: {
}, },
created() {},
methods: {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('typeAnalysis')); var myChart = echarts.init(document.getElementById("typeAnalysis"));
getWarningTypeDay().then(res => { getWarningTypeDay().then((res) => {
console.log(res); console.log(res);
if (res.code == 200) { if (res.code == 200) {
let data = res.data; let data = res.data;
console.log("===================", data); console.log("===================22", data);
typeAnalysisData = []; typeAnalysisData = [];
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var it = data[i]; var it = data[i];
if (it.warningType == 1) { if (it.warningType == 1) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '交通拥堵', name: "交通拥堵",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 2) { if (it.warningType == 2) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '行人', name: "行人",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 3) { if (it.warningType == 3) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '非机动车', name: "非机动车",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 4) { if (it.warningType == 4) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '停车', name: "停车",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 5) { if (it.warningType == 5) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '倒车/逆行', name: "倒车/逆行",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 6) { if (it.warningType == 6) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '烟火', name: "烟火",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 7) { if (it.warningType == 7) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '撒落物', name: "撒落物",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 8) { if (it.warningType == 8) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '异常天气', name: "异常天气",
value: it.number value: it.number || 0,
}); });
} }
if (it.warningType == 9) { if (it.warningType == 9) {
typeAnalysisData.push({ typeAnalysisData.push({
name: '护栏碰撞', name: "护栏碰撞",
value: it.number value: it.number || 0,
});
}
if (it.warningType == 10) {
typeAnalysisData.push({
name: "交通事故",
value: it.number || 0,
});
}
if (it.warningType == 11) {
typeAnalysisData.push({
name: "车辆故障",
value: it.number || 0,
});
}
if (it.warningType == 99) {
typeAnalysisData.push({
name: "其他",
value: it.number || 0,
}); });
} }
drawRoundRect(context, 250, 8 + i * 28, 120, 24, 12, gr) drawRoundRect(context, 250, 8 + i * 28, 120, 24, 12, gr);
} }
chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name); chartsStatistics.legend.data = typeAnalysisData?.map((x) => x.name);
chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => { chartsStatistics.series[0].data = typeAnalysisData.map(
(item, index) => {
return { return {
...item, ...item,
label: { label: {
color: colorList[index] color: colorList[index],
} },
};
} }
}) );
chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => { chartsStatistics.series[1].data = typeAnalysisData.map(
(item, index) => {
return { return {
...item, ...item,
label: { label: {
color: colorList[index] color: colorList[index],
} },
};
} }
}) );
} }
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}) });
const domMap = document.getElementById("typeAnalysis"); const domMap = document.getElementById("typeAnalysis");
let parentDiv = domMap.firstChild; let parentDiv = domMap.firstChild;
// 创建canvas // 创建canvas
let canvas = document.createElement('canvas'); let canvas = document.createElement("canvas");
canvas.width = parentDiv.offsetWidth; canvas.width = parentDiv.offsetWidth;
canvas.height = parentDiv.offsetHeight; canvas.height = parentDiv.offsetHeight;
parentDiv.appendChild(canvas); parentDiv.appendChild(canvas);
const context = canvas.getContext('2d'); const context = canvas.getContext("2d");
// 填充渐变颜色 // 填充渐变颜色
var gr = context.createLinearGradient(230, 0, 360, 0); var gr = context.createLinearGradient(230, 0, 360, 0);
// 颜色断点 // 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)'); gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); gr.addColorStop(0, "rgba(92,197,255,0.5)");
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度
@ -170,10 +193,10 @@ export default {
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
@ -181,15 +204,23 @@ export default {
height: 200px; height: 200px;
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #06425888 100%); background: linear-gradient(
180deg,
rgba(6, 66, 88, 0.2) 0%,
#06425888 100%
);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.1),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
} }
@ -198,4 +229,3 @@ export default {
width: 100%; width: 100%;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save