|
@ -12,6 +12,7 @@ |
|
|
import WgtTitle from '../../../widgets/title' |
|
|
import WgtTitle from '../../../widgets/title' |
|
|
import * as echarts from "echarts"; |
|
|
import * as echarts from "echarts"; |
|
|
import chartsStatistics from "./assets/charts"; |
|
|
import chartsStatistics from "./assets/charts"; |
|
|
|
|
|
import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { |
|
|
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { |
|
@ -52,9 +53,95 @@ |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
var myChart = echarts.init(document.getElementById('typeAnalysis')); |
|
|
var myChart = echarts.init(document.getElementById('typeAnalysis')); |
|
|
myChart.setOption(chartsStatistics); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getWarningTypeDay().then(res=>{ |
|
|
|
|
|
console.log(res); |
|
|
|
|
|
if ( res.code == 200 ) { |
|
|
|
|
|
let data = res.data; |
|
|
|
|
|
console.log("===================",data); |
|
|
|
|
|
typeAnalysisData = []; |
|
|
|
|
|
for (var i = 0;i < data.length;i++){ |
|
|
|
|
|
var it = data[i]; |
|
|
|
|
|
if ( it.warningType == 1) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'交通拥堵', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 2) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'行人', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 3) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'非机动车', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 4) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'停车', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 5) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'倒车/逆行', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 6) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'烟火', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 7) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'撒落物', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 8) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'异常天气', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
if ( it.warningType == 9) { |
|
|
|
|
|
typeAnalysisData.push({ |
|
|
|
|
|
name:'护栏碰撞', |
|
|
|
|
|
value:it.number |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
drawRoundRect(context, 260, 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.series[1].data = typeAnalysisData.map((item, index) => { |
|
|
|
|
|
return { |
|
|
|
|
|
...item, |
|
|
|
|
|
label: { |
|
|
|
|
|
color: colorList[index] |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
myChart.setOption(chartsStatistics); |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
const domMap = document.getElementById("typeAnalysis"); |
|
|
const domMap = document.getElementById("typeAnalysis"); |
|
|
let parentDiv = domMap.firstChild; |
|
|
let parentDiv = domMap.firstChild; |
|
@ -75,12 +162,12 @@ |
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
context.lineWidth = 1; // 设置线段宽度 |
|
|
|
|
|
|
|
|
// 绘制圆角矩形 |
|
|
// 绘制圆角矩形 |
|
|
drawRoundRect(context, 260, 8, 120, 24, 12,gr) |
|
|
|
|
|
drawRoundRect(context, 260, 36, 120, 24, 12,gr) |
|
|
// drawRoundRect(context, 260, 36, 120, 24, 12,gr) |
|
|
drawRoundRect(context, 260, 64, 120, 24, 12,gr) |
|
|
// drawRoundRect(context, 260, 64, 120, 24, 12,gr) |
|
|
drawRoundRect(context, 260, 92, 120, 24, 12,gr) |
|
|
// drawRoundRect(context, 260, 92, 120, 24, 12,gr) |
|
|
drawRoundRect(context, 260, 120, 120, 24, 12,gr) |
|
|
// drawRoundRect(context, 260, 120, 120, 24, 12,gr) |
|
|
drawRoundRect(context, 260, 148, 120, 24, 12,gr) |
|
|
// drawRoundRect(context, 260, 148, 120, 24, 12,gr) |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|