|
|
|
@ -3,6 +3,21 @@ |
|
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
|
<div class="board fl-1"> |
|
|
|
<div class="charts keep-ratio" id="typeAnalysis"></div> |
|
|
|
<div class="legend-box"> |
|
|
|
<el-carousel height="200px" direction="vertical"> |
|
|
|
<el-carousel-item |
|
|
|
v-for="(item, index) in dataList" |
|
|
|
:key="index" |
|
|
|
class="legend-item" |
|
|
|
> |
|
|
|
<div v-for="(items, index) in item" class="legend-items"> |
|
|
|
<span class="legend-name">{{ items.name }}</span> |
|
|
|
<span class="legend-num">{{ items.value }} 起</span> |
|
|
|
<span class="legend-percert">{{ items.percert }}%</span> |
|
|
|
</div> |
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -13,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", |
|
|
|
@ -47,9 +62,9 @@ export default { |
|
|
|
WgtTitle, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
return { dataList: [] }; |
|
|
|
}, |
|
|
|
created() { }, |
|
|
|
created() {}, |
|
|
|
methods: {}, |
|
|
|
mounted() { |
|
|
|
setTimeout(() => { |
|
|
|
@ -57,10 +72,8 @@ export default { |
|
|
|
var myChart = echarts.init(document.getElementById("typeAnalysis")); |
|
|
|
|
|
|
|
getWarningTypeDay().then((res) => { |
|
|
|
console.log(res); |
|
|
|
if (res.code == 200) { |
|
|
|
let data = res.data; |
|
|
|
console.log("===================22", data); |
|
|
|
typeAnalysisData = [ |
|
|
|
{ |
|
|
|
name: "交通拥堵", |
|
|
|
@ -123,15 +136,31 @@ export default { |
|
|
|
value: 0, |
|
|
|
}, |
|
|
|
]; |
|
|
|
let total = null; |
|
|
|
data.forEach((item, index) => { |
|
|
|
total += item.number; |
|
|
|
}); |
|
|
|
data.forEach((item, index) => { |
|
|
|
typeAnalysisData.forEach((r) => { |
|
|
|
if (item.warningType == r.warningType) { |
|
|
|
r.value += item.number; |
|
|
|
r.value = item.number; |
|
|
|
this.dataList.push({ |
|
|
|
name: r.name, |
|
|
|
value: r.value, |
|
|
|
percert: |
|
|
|
total == 0 ? 0 : ((r.value / total) * 100).toFixed(2), |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
// drawRoundRect(context, 250, 8 + index * 28, 120, 24, 12, gr); |
|
|
|
}); |
|
|
|
|
|
|
|
const list = this.dataList.reduce((acc, curr, index) => { |
|
|
|
if (index % 6 === 0) acc.push([]); |
|
|
|
acc[Math.floor(index / 6)].push(curr); |
|
|
|
return acc; |
|
|
|
}, []); |
|
|
|
this.dataList = list; |
|
|
|
chartsStatistics.legend.data = typeAnalysisData?.map((x) => x.name); |
|
|
|
chartsStatistics.series[0].data = typeAnalysisData.map( |
|
|
|
(item, index) => { |
|
|
|
@ -158,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); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
@ -191,23 +220,199 @@ export default { |
|
|
|
.congestion { |
|
|
|
.board { |
|
|
|
padding: 0px 20px; |
|
|
|
background: linear-gradient(180deg, |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(6, 66, 88, 0.2) 0%, |
|
|
|
#06425888 100%); |
|
|
|
#06425888 100% |
|
|
|
); |
|
|
|
border-radius: 5px 5px 5px 5px; |
|
|
|
opacity: 1; |
|
|
|
border: 1px solid; |
|
|
|
border-image: linear-gradient(360deg, |
|
|
|
border-image: linear-gradient( |
|
|
|
360deg, |
|
|
|
rgba(55, 231, 255, 0.1), |
|
|
|
rgba(55, 231, 255, 0)) 1 1; |
|
|
|
rgba(55, 231, 255, 0) |
|
|
|
) |
|
|
|
1 1; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
.legend-box { |
|
|
|
width: 60%; |
|
|
|
margin: auto; |
|
|
|
margin-top: 20px; |
|
|
|
height: 185px; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.legend-item { |
|
|
|
width: 100%; |
|
|
|
/** |
|
|
|
单个动画循环样式 勿删 |
|
|
|
*/ |
|
|
|
// height: 30px; |
|
|
|
// display: flex; |
|
|
|
// justify-content: space-between; |
|
|
|
// align-items: center; |
|
|
|
// animation: 5s infinite roll; |
|
|
|
// position: relative; |
|
|
|
|
|
|
|
// &::before { |
|
|
|
// // position: absolute; |
|
|
|
// content: ""; |
|
|
|
// width: 8px; |
|
|
|
// height: 8px; |
|
|
|
// left: 0px; |
|
|
|
// border-radius: 50%; |
|
|
|
// background: #37e7ff; |
|
|
|
// } |
|
|
|
.legend-items { |
|
|
|
width: 100%; |
|
|
|
height: 24px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding-left: 20px; |
|
|
|
background: linear-gradient(to right, #327799 0%, #0d3443 60%); |
|
|
|
border-top-left-radius: 25px; |
|
|
|
border-bottom-left-radius: 25px; |
|
|
|
margin-bottom: 5px; |
|
|
|
&::before { |
|
|
|
// position: absolute; |
|
|
|
content: ""; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
left: 0px; |
|
|
|
border-radius: 50%; |
|
|
|
background: #37e7ff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-name { |
|
|
|
width: 60px; |
|
|
|
margin-left: 10px; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
.legend-num, |
|
|
|
.legend-percert { |
|
|
|
width: 50px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 12px; |
|
|
|
color: #37e7ff; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-item:nth-child(1) { |
|
|
|
.legend-items:nth-child(1) { |
|
|
|
&::before { |
|
|
|
background: #019aff; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(2) { |
|
|
|
&::before { |
|
|
|
background: #3cc3f0; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(3) { |
|
|
|
&::before { |
|
|
|
background: #51d5ad; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(4) { |
|
|
|
&::before { |
|
|
|
background: #ffdd69; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(5) { |
|
|
|
&::before { |
|
|
|
background: #f6a73c; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(6) { |
|
|
|
&::before { |
|
|
|
background: #7390fd; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-item:nth-child(2) { |
|
|
|
.legend-items:nth-child(1) { |
|
|
|
&::before { |
|
|
|
background: #2967ea; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(2) { |
|
|
|
&::before { |
|
|
|
background: #1da7ff; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(3) { |
|
|
|
&::before { |
|
|
|
background: #219f73; |
|
|
|
} |
|
|
|
} |
|
|
|
.legend-items:nth-child(4) { |
|
|
|
&::before { |
|
|
|
background: #7cedd5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
单个动画循环样式 勿删 |
|
|
|
*/ |
|
|
|
// .legend-item:nth-child(1) { |
|
|
|
// &::before { |
|
|
|
// background: #68f4dd; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-item:nth-child(2) { |
|
|
|
// &::before { |
|
|
|
// background: #1785c0; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-item:nth-child(3) { |
|
|
|
// &::before { |
|
|
|
// background: #476dbc; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-item:nth-child(4) { |
|
|
|
// &::before { |
|
|
|
// background: #b55233; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-item:nth-child(5) { |
|
|
|
// &::before { |
|
|
|
// background: #b0862c; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-item:nth-child(6) { |
|
|
|
// &::before { |
|
|
|
// background: #35ad6b; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-item:nth-child(7) { |
|
|
|
// &::before { |
|
|
|
// background: #219f73; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-item:nth-child(8) { |
|
|
|
// &::before { |
|
|
|
// background: #7cedd5; |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// .legend-item:nth-child(9) { |
|
|
|
// &::before { |
|
|
|
// background: #68f4dd; |
|
|
|
// } |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-carousel__indicators--vertical { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.charts { |
|
|
|
height: 180px; |
|
|
|
width: 100%; |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
