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

更改

wangqin
zhangzhang 1 year ago
parent
c6001faea4
commit
ded2c1b683
2 changed files with 77 additions and 74 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. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  2. 139
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue

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

@ -4,7 +4,7 @@ window.echartsData = [
{ value: 35, name: "已处理" },
];
window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC"];
window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC", "#1DA7FF"];
window.count = 0;
echartsData.forEach((it) => {
@ -66,10 +66,10 @@ var options = {
{
name: "",
type: "pie",
radius: "60px",
width: "200px",
radius: "70%",
// width: "200px",
center: ["130px", "50%"],
roseType: "radius",
// roseType: "radius",
label: {
show: false,
position: "outside",
@ -111,11 +111,11 @@ var options = {
{
name: "",
type: "pie",
radius: "70px",
radius: "80%",
hoverAnimation: false,
emphasis: { scale: false },
center: ["130px", "50%"],
roseType: "radius",
// roseType: "radius",
label: {
show: false,
position: "outside",

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

@ -1,58 +1,63 @@
<template>
<div class='congestion'>
<div class="congestion">
<WgtTitle :title="'日事件处置情况占比'"></WgtTitle>
<div class="board">
<div class="charts keep-ratio " id="dailyDisposal"></div>
<div class="charts keep-ratio" id="dailyDisposal"></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 { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent';
import { getWarningStateDay } 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: 'dailyDisposal',
name: "dailyDisposal",
components: {
WgtTitle
WgtTitle,
},
data() {
return {
}
},
created() {
return {};
},
methods: {
},
created() {},
methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('dailyDisposal'));
var myChart = echarts.init(document.getElementById("dailyDisposal"));
getWarningStateDay().then(res => {
getWarningStateDay().then((res) => {
if (res.code == 200) {
let data = res.data;
if (data.length > 0) {
@ -69,90 +74,85 @@ export default {
// it.number = 86;
echartsData.push({
name: "上报",
value: it.number
value: it.number,
});
}
if (it.warningState == 2) {
echartsData.push({
name: "已完成",
value: it.number
value: it.number,
});
}
if (it.warningState == 3) {
echartsData.push({
name: "已终止",
value: it.number
value: it.number,
});
}
if (it.warningState == 4) {
echartsData.push({
name: "自动结束",
value: it.number
value: it.number,
});
}
}
chartsStatistics.legend.data = window.echartsData?.map(x => x);
chartsStatistics.series[0].data = echartsData.map((item, index) => {
return {
...item,
label: {
color: colorList[index]
}
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]
}
);
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');
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; // 设置线段宽度
// 绘制圆角矩形
drawRoundRect(context, 230, 36, 180, 24, 12, gr)
drawRoundRect(context, 230, 63, 180, 24, 12, gr)
drawRoundRect(context, 230, 90, 180, 24, 12, gr)
drawRoundRect(context, 230, 117, 180, 24, 12, gr)
drawRoundRect(context, 230, 36, 180, 24, 12, gr);
drawRoundRect(context, 230, 63, 180, 24, 12, gr);
drawRoundRect(context, 230, 90, 180, 24, 12, gr);
drawRoundRect(context, 230, 117, 180, 24, 12, gr);
});
});
},
}
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.congestion {
width: 100%;
@ -164,11 +164,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;
}
}
@ -177,4 +181,3 @@ export default {
width: 100%;
}
</style>
Write Preview
Loading…
Cancel
Save