|
|
|
@ -44,9 +44,9 @@ |
|
|
|
|
|
|
|
<div> |
|
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
|
<div class="unit_con"> |
|
|
|
<div class="unit_con unit_con_02"> |
|
|
|
<Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..." class="empty"></Empty> |
|
|
|
<div id="chart2" class="chart_div"></div> |
|
|
|
<div ref="chart2" class="chart_div" style="width: 540px; height: 270px;" ></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -71,6 +71,7 @@ import chart2 from "./assets/charts2"; |
|
|
|
import chart3 from "./assets/charts3"; |
|
|
|
import ElQuarterPicker from "./ElQuarterPicker"; |
|
|
|
import moment from "moment"; |
|
|
|
import { WarningType } from "@screen/utils/enum.js"; |
|
|
|
import { |
|
|
|
getWarningTrend, |
|
|
|
getWarningSectionType, |
|
|
|
@ -116,6 +117,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
canvas:null, |
|
|
|
typeOptions: [ |
|
|
|
{ |
|
|
|
value: "year", |
|
|
|
@ -362,7 +364,7 @@ export default { |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
//类型占比 |
|
|
|
//感知事件类型分析 |
|
|
|
getWarningSectionType({ |
|
|
|
type: qType, |
|
|
|
sectionId: this.selectId, |
|
|
|
@ -375,35 +377,11 @@ export default { |
|
|
|
if (res.code == 200) { |
|
|
|
let numbers = []; |
|
|
|
this.chart2List = res.data; |
|
|
|
let data = res.data.warningTypeList; |
|
|
|
let data = res.data.warningTypeList ; |
|
|
|
let total = res.data.total; |
|
|
|
|
|
|
|
data.forEach((it) => { |
|
|
|
if (it.warningType == 1) { |
|
|
|
types.push("交通拥堵"); |
|
|
|
} else if (it.warningType == 2) { |
|
|
|
types.push("行人"); |
|
|
|
} else if (it.warningType == 3) { |
|
|
|
types.push("非机动车"); |
|
|
|
} else if (it.warningType == 4) { |
|
|
|
types.push("停车"); |
|
|
|
} else if (it.warningType == 5) { |
|
|
|
types.push("违规驾驶"); |
|
|
|
} else if (it.warningType == 6) { |
|
|
|
types.push("路障"); |
|
|
|
} else if (it.warningType == 7) { |
|
|
|
types.push("道路施工"); |
|
|
|
} else if (it.warningType == 8) { |
|
|
|
types.push("异常天气"); |
|
|
|
} else if (it.warningType == 9) { |
|
|
|
types.push("护栏碰撞"); |
|
|
|
} else if (it.warningType == 10) { |
|
|
|
types.push("交通事故"); |
|
|
|
} else if (it.warningType == 11) { |
|
|
|
types.push("车辆故障"); |
|
|
|
} else if (it.warningType == 99) { |
|
|
|
types.push("其他"); |
|
|
|
} |
|
|
|
types.push(WarningType[it.warningType]); |
|
|
|
|
|
|
|
numbers.push({ |
|
|
|
name: types[types.length - 1], |
|
|
|
@ -534,89 +512,46 @@ export default { |
|
|
|
this.dateTime = moment(new Date()).format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
}, |
|
|
|
initChart1() { |
|
|
|
this.myChart1 = echarts.init(document.getElementById("chart1")); |
|
|
|
this.myChart1.setOption(chart1); |
|
|
|
}, |
|
|
|
initChart3() { |
|
|
|
this.myChart3 = echarts.init(document.getElementById("chart3")); |
|
|
|
this.myChart3.setOption(chart3); |
|
|
|
}, |
|
|
|
initChart2(types) { |
|
|
|
|
|
|
|
this.myChart2 = echarts.init(document.getElementById("chart2")); |
|
|
|
this.myChart2.setOption(chart2); |
|
|
|
|
|
|
|
const domMap = document.getElementById("chart2"); |
|
|
|
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"); |
|
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
|
|
|
|
// 填充渐变颜色 |
|
|
|
// 颜色断点 |
|
|
|
var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
|
|
|
|
console.log('types', types) |
|
|
|
types.forEach((it, index) => { |
|
|
|
drawRoundRect(context, 357, (98 + index * 32), 140, 24, 12, gr); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(247, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
// gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
// drawRoundRect(context, 357, 130, 140, 24, 12, gr); |
|
|
|
|
|
|
|
// // // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
// gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
// drawRoundRect(context, 357, 162, 140, 24, 12, gr); |
|
|
|
|
|
|
|
// // // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
// gr.addColorStop(0, "rgba(92,197,255,0.5)"); |
|
|
|
// drawRoundRect(context, 357, 194, 140, 24, 12, gr); |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(240, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 267, 258, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(400, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 57, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(350, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 108, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(300, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 157, 140, 24, 12, gr) |
|
|
|
|
|
|
|
// // 颜色断点 |
|
|
|
// var gr = context.createLinearGradient(300, 63, 450, 0); |
|
|
|
// gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|
|
|
// gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|
|
|
// drawRoundRect(context, 416, 208, 140, 24, 12, gr); |
|
|
|
}, |
|
|
|
initChart1(){ |
|
|
|
this.myChart1 = echarts.init(document.getElementById("chart1")); |
|
|
|
this.myChart1.setOption(chart1); |
|
|
|
}, |
|
|
|
initChart3(){ |
|
|
|
this.myChart3 = echarts.init(document.getElementById("chart3")); |
|
|
|
this.myChart3.setOption(chart3); |
|
|
|
}, |
|
|
|
generateChart2(){ |
|
|
|
let ele = this.$refs["chart2"]; |
|
|
|
this.myChart2 = echarts.init(ele); |
|
|
|
let parentDiv = ele.firstChild; |
|
|
|
this.canvasChart2 = document.createElement("canvas"); |
|
|
|
this.canvasChart2.width = parentDiv.offsetWidth; |
|
|
|
this.canvasChart2.height = parentDiv.offsetHeight; |
|
|
|
parentDiv.appendChild(this.canvasChart2); |
|
|
|
}, |
|
|
|
initChart2(){ |
|
|
|
if(!this.myChart2){ |
|
|
|
this.generateChart2(); |
|
|
|
} |
|
|
|
let ele = this.$refs["chart2"]; |
|
|
|
this.myChart2.setOption(chart2); |
|
|
|
|
|
|
|
const context = this.canvasChart2.getContext('2d') |
|
|
|
context.clearRect(0, 0, this.canvasChart2.width, this.canvasChart2.height); // 清空画布 |
|
|
|
|
|
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
let total = chart2.legend.data.length; |
|
|
|
for(let i=0; i<total; i++){ |
|
|
|
let unitH = 32; |
|
|
|
let h = ele.offsetHeight; |
|
|
|
let x = 330; |
|
|
|
let y = (h - total*unitH)/2 + 3 + i*unitH; |
|
|
|
var gr = context.createLinearGradient(330, 0, 500, 0); |
|
|
|
gr.addColorStop(0, "rgba(92,197,255,0.6)"); |
|
|
|
gr.addColorStop(1, "rgba(92,197,255,0)"); |
|
|
|
drawRoundRect(context, x, y, 220, 24, 12, gr); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
getRoadSectionList().then((res) => { |
|
|
|
@ -678,8 +613,8 @@ export default { |
|
|
|
|
|
|
|
.unit_con { |
|
|
|
flex: 1; |
|
|
|
margin: 95px 20px 30px; |
|
|
|
position: relative; |
|
|
|
margin: 95px 20px 30px; position: relative; |
|
|
|
// &.unit_con_02{ margin: 105px 0px 20px; } |
|
|
|
} |
|
|
|
|
|
|
|
.empty { |
|
|
|
|
zhoule
2 years ago
