diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue index c1a4801a..e1c91b50 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue @@ -28,33 +28,33 @@ import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; 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.lineTo(width - radius + x, y); - 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.lineTo(radius + x, height + y); - ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI); - ctx.closePath(); - //ctx.stroke(); - ctx.fill(); -}; +// 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.lineTo(width - radius + x, y); +// 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.lineTo(radius + x, height + y); +// ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI); +// ctx.closePath(); +// //ctx.stroke(); +// ctx.fill(); +// }; export default { name: "TypeAnalysis", @@ -187,29 +187,29 @@ export default { myChart.setOption(chartsStatistics); }); - const domMap = document.getElementById("typeAnalysis"); - let parentDiv = domMap.firstChild; - // 创建canvas - let canvas = document.createElement("canvas"); - canvas.width = parentDiv.offsetWidth; - canvas.height = parentDiv.offsetHeight; - parentDiv.appendChild(canvas); - const context = canvas.getContext("2d"); + // const domMap = document.getElementById("typeAnalysis"); + // let parentDiv = domMap.firstChild; + // // 创建canvas + // let canvas = document.createElement("canvas"); + // canvas.width = parentDiv.offsetWidth; + // canvas.height = parentDiv.offsetHeight; + // parentDiv.appendChild(canvas); + // 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)"); + // // 填充渐变颜色 + // 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)"); - context.lineWidth = 1; // 设置线段宽度 + // context.lineWidth = 1; // 设置线段宽度 - // 绘制圆角矩形 - drawRoundRect(context, 228, 8, 280, 24, 12, gr); - drawRoundRect(context, 228, 36, 280, 24, 12, gr); - drawRoundRect(context, 228, 64, 280, 24, 12, gr); - drawRoundRect(context, 228, 92, 280, 24, 12, gr); - drawRoundRect(context, 228, 120, 280, 24, 12, gr); + // // 绘制圆角矩形 + // drawRoundRect(context, 228, 8, 280, 24, 12, gr); + // drawRoundRect(context, 228, 36, 280, 24, 12, gr); + // drawRoundRect(context, 228, 64, 280, 24, 12, gr); + // drawRoundRect(context, 228, 92, 280, 24, 12, gr); + // drawRoundRect(context, 228, 120, 280, 24, 12, gr); }); }); }, @@ -289,7 +289,7 @@ export default { .legend-name { width: 60px; margin-left: 10px; - font-size: 14px; + font-size: 12px; } .legend-num, .legend-percert { @@ -297,7 +297,7 @@ export default { display: flex; justify-content: center; align-items: center; - font-size: 14px; + font-size: 12px; color: #37e7ff; font-weight: bold; }