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

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

@ -1,162 +1,185 @@
<template>
<div class='congestion'>
<div class="congestion">
<WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div class="board">
<div class="charts keep-ratio " id="typeAnalysis"></div>
<div class="charts keep-ratio" id="typeAnalysis"></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 { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent';
import { getWarningTypeDay } 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: 'TypeAnalysis',
name: "TypeAnalysis",
components: {
WgtTitle
WgtTitle,
},
data() {
return {
}
},
created() {
},
methods: {
return {};
},
created() {},
methods: {},
mounted() {
setTimeout(() => {
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);
if (res.code == 200) {
let data = res.data;
console.log("===================", data);
console.log("===================22", data);
typeAnalysisData = [];
for (var i = 0; i < data.length; i++) {
var it = data[i];
if (it.warningType == 1) {
typeAnalysisData.push({
name: '交通拥堵',
value: it.number
name: "交通拥堵",
value: it.number || 0,
});
}
if (it.warningType == 2) {
typeAnalysisData.push({
name: '行人',
value: it.number
name: "行人",
value: it.number || 0,
});
}
if (it.warningType == 3) {
typeAnalysisData.push({
name: '非机动车',
value: it.number
name: "非机动车",
value: it.number || 0,
});
}
if (it.warningType == 4) {
typeAnalysisData.push({
name: '停车',
value: it.number
name: "停车",
value: it.number || 0,
});
}
if (it.warningType == 5) {
typeAnalysisData.push({
name: '倒车/逆行',
value: it.number
name: "倒车/逆行",
value: it.number || 0,
});
}
if (it.warningType == 6) {
typeAnalysisData.push({
name: '烟火',
value: it.number
name: "烟火",
value: it.number || 0,
});
}
if (it.warningType == 7) {
typeAnalysisData.push({
name: '撒落物',
value: it.number
name: "撒落物",
value: it.number || 0,
});
}
if (it.warningType == 8) {
typeAnalysisData.push({
name: '异常天气',
value: it.number
name: "异常天气",
value: it.number || 0,
});
}
if (it.warningType == 9) {
typeAnalysisData.push({
name: '护栏碰撞',
value: it.number
name: "护栏碰撞",
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.series[0].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]
}
);
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');
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");
// 填充渐变颜色
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)');
gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)");
context.lineWidth = 1; // 设置线段宽度
@ -170,10 +193,10 @@ export default {
});
});
},
}
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.congestion {
width: 100%;
@ -181,15 +204,23 @@ export default {
height: 200px;
width: 100%;
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;
opacity: 1;
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;
justify-content: space-between;
align-items: center;
}
}
@ -198,4 +229,3 @@ export default {
width: 100%;
}
</style>
Write Preview
Loading…
Cancel
Save