zhoule
2 years ago
20 changed files with 2413 additions and 2249 deletions
@ -1,144 +1,143 @@ |
|||||
window.echartsData = [ |
window.echartsData = [ |
||||
{ value: 25, name: '处理中' }, |
{ value: 25, name: '处理中' }, |
||||
{ value: 32, name: '待处理' }, |
{ value: 40, name: '待处理' }, |
||||
{ value: 30, name: '已处理' },] |
{ value: 35, name: '已处理' },] |
||||
|
|
||||
window.colorList = [ |
window.colorList = [ |
||||
"#FFee0B", |
"#FFee0B", |
||||
"#61D8FF", |
"#61D8FF", |
||||
"#6AE0BC", |
"#6AE0BC", |
||||
|
|
||||
] |
] |
||||
window.count = 0; |
window.count = 0; |
||||
|
|
||||
echartsData.forEach((it)=>{ |
echartsData.forEach((it) => { |
||||
count += it.value; |
count += it.value; |
||||
}) |
}) |
||||
|
|
||||
|
|
||||
var options = { |
var options = { |
||||
color: colorList, |
color: colorList, |
||||
legend: { |
legend: { |
||||
orient: 'vertical', |
orient: 'vertical', |
||||
top: "center", |
top: "center", |
||||
icon: "circle", |
icon: "circle", |
||||
right: 30, |
right: 30, |
||||
itemGap: 16, |
itemGap: 16, |
||||
itemWidth: 8, |
itemWidth: 8, |
||||
itemHeight: 8, |
itemHeight: 8, |
||||
textStyle: { |
textStyle: { |
||||
color: "#fff", |
color: "#fff", |
||||
fontSize: 12, |
fontSize: 12, |
||||
rich:{ |
rich: { |
||||
ast: { |
ast: { |
||||
align: "left", |
align: "left", |
||||
fontSize: 12, |
fontSize: 12, |
||||
width:35, |
width: 35, |
||||
}, |
}, |
||||
bst: { |
bst: { |
||||
align: "left", |
align: "left", |
||||
fontSize: 12, |
fontSize: 12, |
||||
marginLeft:20, |
marginLeft: 20, |
||||
color:"#37E7FF" |
color: "#37E7FF" |
||||
} |
} |
||||
} |
} |
||||
}, |
|
||||
formatter: (params) => { |
|
||||
let obj = echartsData.filter(it=>{ return it.name == params}) |
|
||||
console.log(obj); |
|
||||
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value/count* 100) }%}` |
|
||||
}, |
}, |
||||
data: echartsData?.map(x => x), |
formatter: (params) => { |
||||
}, |
let obj = echartsData.filter(it => { return it.name == params }) |
||||
tooltip: { |
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value)}%}` |
||||
trigger: 'item', |
}, |
||||
}, |
data: echartsData?.map(x => x), |
||||
series: [{ |
}, |
||||
name: '', |
tooltip: { |
||||
type: 'pie', |
trigger: 'item', |
||||
radius: '78%', |
}, |
||||
center: ['40%', '50%'], |
series: [{ |
||||
roseType: 'radius', |
name: '', |
||||
label: { |
type: 'pie', |
||||
show: false, |
radius: '78%', |
||||
position: 'outside', |
center: ['40%', '50%'], |
||||
fontSize: 16, |
roseType: 'radius', |
||||
formatter: (params) => { |
label: { |
||||
return `{a|${params.name}} {b|${params.value/count}%}` |
show: false, |
||||
}, |
position: 'outside', |
||||
rich: { |
fontSize: 16, |
||||
a: { |
formatter: (params) => { |
||||
align: "left", |
return `{a|${params.name}} {b|${params.value / count}%}` |
||||
fontSize: 12, |
}, |
||||
}, |
rich: { |
||||
b: { |
a: { |
||||
|
align: "left", |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
b: { |
||||
align: "left", |
align: "left", |
||||
fontSize: 12, |
fontSize: 12, |
||||
} |
} |
||||
}, |
}, |
||||
}, |
}, |
||||
itemStyle: { |
itemStyle: { |
||||
normal: { |
normal: { |
||||
shadowColor: "rgba(0, 0, 0, 0.5)", |
shadowColor: "rgba(0, 0, 0, 0.5)", |
||||
shadowBlur: 50, |
shadowBlur: 50, |
||||
}, |
}, |
||||
}, |
}, |
||||
labelLine: { |
labelLine: { |
||||
show:false, |
show: false, |
||||
length: 10, |
length: 10, |
||||
length2: 30, |
length2: 30, |
||||
}, |
}, |
||||
data: echartsData.map((item, index) => { |
data: echartsData.map((item, index) => { |
||||
return { |
return { |
||||
...item, |
...item, |
||||
label: { |
label: { |
||||
color: colorList[index] |
color: colorList[index] |
||||
} |
} |
||||
} |
} |
||||
}) |
}) |
||||
},{ |
}, { |
||||
name: '', |
name: '', |
||||
type: 'pie', |
type: 'pie', |
||||
radius: '90%', |
radius: '90%', |
||||
hoverAnimation: false, |
hoverAnimation: false, |
||||
emphasis: { scale: false }, |
emphasis: { scale: false }, |
||||
center: ['40%', '50%'], |
center: ['40%', '50%'], |
||||
roseType: 'radius', |
roseType: 'radius', |
||||
label: { |
label: { |
||||
show: false, |
show: false, |
||||
position: 'outside', |
position: 'outside', |
||||
fontSize: 16, |
fontSize: 16, |
||||
formatter: (params) => { |
formatter: (params) => { |
||||
return `{a|${params.name}} ` |
return `{a|${params.name}} ` |
||||
}, |
}, |
||||
rich: { |
rich: { |
||||
a: { |
a: { |
||||
align: "left", |
align: "left", |
||||
fontSize: 12, |
fontSize: 12, |
||||
} |
} |
||||
}, |
}, |
||||
}, |
}, |
||||
itemStyle: { |
itemStyle: { |
||||
normal: { |
normal: { |
||||
opacity:0.3, |
opacity: 0.3, |
||||
shadowColor: "rgba(0, 0, 0, 0.8)", |
shadowColor: "rgba(0, 0, 0, 0.8)", |
||||
shadowBlur: 50, |
shadowBlur: 50, |
||||
}, |
}, |
||||
}, |
}, |
||||
labelLine: { |
labelLine: { |
||||
show:false, |
show: false, |
||||
length: 10, |
length: 10, |
||||
length2: 30, |
length2: 30, |
||||
}, |
}, |
||||
data: echartsData.map((item, index) => { |
data: echartsData.map((item, index) => { |
||||
return { |
return { |
||||
...item, |
...item, |
||||
label: { |
label: { |
||||
color: colorList[index] |
color: colorList[index] |
||||
} |
} |
||||
} |
} |
||||
}) |
}) |
||||
}] |
}] |
||||
}; |
}; |
||||
|
|
||||
export default options; |
export default options; |
||||
@ -1,178 +1,178 @@ |
|||||
<template> |
<template> |
||||
<div class='congestion'> |
<div class='congestion'> |
||||
<WgtTitle :title="'日事件处置情况占比'"></WgtTitle> |
<WgtTitle :title="'日事件处置情况占比'"></WgtTitle> |
||||
<div class="board"> |
<div class="board"> |
||||
<div class="charts keep-ratio " id="dailyDisposal"></div> |
<div class="charts keep-ratio " id="dailyDisposal"></div> |
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
|
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
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 { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent'; |
import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent'; |
||||
|
|
||||
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { |
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => { |
||||
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
||||
ctx.beginPath(); |
ctx.beginPath(); |
||||
ctx.fillStyle = gr; |
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.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.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.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.closePath(); |
||||
//ctx.stroke(); |
//ctx.stroke(); |
||||
ctx.fill() |
ctx.fill() |
||||
} |
} |
||||
|
|
||||
export default { |
export default { |
||||
name: 'dailyDisposal', |
name: 'dailyDisposal', |
||||
components: { |
components: { |
||||
WgtTitle |
WgtTitle |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
|
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
created() { |
created() { |
||||
|
|
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
|
|
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
setTimeout(() => { |
setTimeout(() => { |
||||
this.$nextTick(() => { |
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 ) { |
if (res.code == 200) { |
||||
let data = res.data; |
let data = res.data; |
||||
console.log(data); |
if (data.lemgth > 0) { |
||||
window.echartsData = []; |
window.echartsData = []; |
||||
for (let i = 0;i < data.length;i++){ |
for (let i = 0; i < data.length; i++) { |
||||
let it = data[i]; |
let it = data[i]; |
||||
if ( it.warningState == 1 ) { |
if (it.warningState == 1) { |
||||
echartsData.push({ |
echartsData.push({ |
||||
name:"上报", |
name: "上报", |
||||
value: it.number |
value: it.number |
||||
}); |
}); |
||||
} |
} |
||||
if (it.warningState == 2 ) { |
if (it.warningState == 2) { |
||||
echartsData.push({ |
echartsData.push({ |
||||
name:"已完成", |
name: "已完成", |
||||
value: it.number |
value: it.number |
||||
}); |
}); |
||||
|
|
||||
} |
} |
||||
if (it.warningState == 3 ) { |
if (it.warningState == 3) { |
||||
echartsData.push({ |
echartsData.push({ |
||||
name:"已终止", |
name: "已终止", |
||||
value: it.number |
value: it.number |
||||
}); |
}); |
||||
|
|
||||
} |
} |
||||
if (it.warningState == 4 ) { |
if (it.warningState == 4) { |
||||
echartsData.push({ |
echartsData.push({ |
||||
name:"自动结束", |
name: "自动结束", |
||||
value: it.number |
value: it.number |
||||
}); |
}); |
||||
|
|
||||
} |
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
let count = 0; |
||||
|
|
||||
|
echartsData.forEach((it) => { |
||||
|
count += it.value; |
||||
|
}) |
||||
|
|
||||
|
chartsStatistics.legend.data = window.echartsData?.map(x => x); |
||||
|
chartsStatistics.series[0].data = echartsData.map((item, index) => { |
||||
|
return { |
||||
|
...item, |
||||
|
label: { |
||||
|
color: colorList[index] |
||||
|
} |
||||
} |
} |
||||
count = 0; |
}) |
||||
|
chartsStatistics.series[1].data = echartsData.map((item, index) => { |
||||
echartsData.forEach((it)=>{ |
return { |
||||
count += it.value; |
...item, |
||||
}) |
label: { |
||||
|
color: colorList[index] |
||||
console.log(echartsData); |
} |
||||
|
} |
||||
chartsStatistics.legend.data = window.echartsData?.map(x => x); |
}) |
||||
chartsStatistics.series[0].data = echartsData.map((item, index) => { |
} |
||||
return { |
} |
||||
...item, |
|
||||
label: { |
myChart.setOption(chartsStatistics); |
||||
color: colorList[index] |
}); |
||||
} |
|
||||
} |
|
||||
}) |
|
||||
chartsStatistics.series[1].data = echartsData.map((item, index) => { |
|
||||
return { |
const domMap = document.getElementById("dailyDisposal"); |
||||
...item, |
let parentDiv = domMap.firstChild; |
||||
label: { |
// 创建canvas |
||||
color: colorList[index] |
let canvas = document.createElement('canvas'); |
||||
} |
canvas.width = parentDiv.offsetWidth; |
||||
} |
canvas.height = parentDiv.offsetHeight; |
||||
}) |
parentDiv.appendChild(canvas); |
||||
} |
const context = canvas.getContext('2d'); |
||||
|
|
||||
myChart.setOption(chartsStatistics); |
// 填充渐变颜色 |
||||
}); |
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)'); |
||||
|
|
||||
const domMap = document.getElementById("dailyDisposal"); |
|
||||
let parentDiv = domMap.firstChild; |
context.lineWidth = 1; // 设置线段宽度 |
||||
// 创建canvas |
|
||||
let canvas = document.createElement('canvas'); |
// 绘制圆角矩形 |
||||
canvas.width = parentDiv.offsetWidth; |
// drawRoundRect(context, 260, 50, 120, 24, 12, gr) |
||||
canvas.height =parentDiv.offsetHeight; |
// drawRoundRect(context, 260, 78, 120, 24, 12, gr) |
||||
parentDiv.appendChild(canvas); |
// drawRoundRect(context, 260, 106, 120, 24, 12, gr) |
||||
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)'); |
|
||||
|
|
||||
|
|
||||
context.lineWidth = 1; // 设置线段宽度 |
|
||||
|
|
||||
// 绘制圆角矩形 |
|
||||
drawRoundRect(context, 260, 50, 120, 24, 12,gr) |
|
||||
drawRoundRect(context, 260, 78, 120, 24, 12,gr) |
|
||||
drawRoundRect(context, 260, 106, 120, 24, 12,gr) |
|
||||
|
|
||||
}); |
|
||||
}); |
}); |
||||
}, |
}); |
||||
} |
}, |
||||
</script> |
} |
||||
|
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.congestion { |
.congestion { |
||||
|
width: 100%; |
||||
|
|
||||
|
.board { |
||||
|
height: 200px; |
||||
width: 100%; |
width: 100%; |
||||
.board{ |
padding: 0px 20px; |
||||
height:200px; |
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
||||
width: 100%; |
border-radius: 5px 5px 5px 5px; |
||||
padding: 0px 20px; |
opacity: 1; |
||||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
border: 1px solid; |
||||
border-radius: 5px 5px 5px 5px; |
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
opacity: 1; |
display: flex; |
||||
border: 1px solid; |
justify-content: space-between; |
||||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
align-items: center; |
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
} |
|
||||
} |
} |
||||
.charts { |
} |
||||
height:180px; |
|
||||
width: 100%; |
.charts { |
||||
} |
height: 180px; |
||||
|
width: 100%; |
||||
</style> |
} |
||||
|
</style> |
||||
|
|
||||
@ -1,88 +1,134 @@ |
|||||
<template> |
<template> |
||||
<div class='congestion'> |
<div class='congestion'> |
||||
<WgtTitle :title="'日累计感知事件'"></WgtTitle> |
<WgtTitle :title="'日累计感知事件趋势'"></WgtTitle> |
||||
<div class="board"> |
<div class="board"> |
||||
<div class="charts keep-ratio " id="daytotal"></div> |
<div class="charts keep-ratio " id="daytotal"></div> |
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
|
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
import WgtTitle from '../../../widgets/title' |
|
||||
import * as echarts from "echarts"; |
|
||||
import chartsStatistics from "./assets/charts"; |
|
||||
import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent'; |
|
||||
|
|
||||
export default { |
import WgtTitle from '../../../widgets/title' |
||||
name: 'RailWayDay', |
import * as echarts from "echarts"; |
||||
components: { |
import chartsStatistics from "./assets/charts"; |
||||
WgtTitle |
import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent'; |
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
created() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
}, |
|
||||
mounted() { |
|
||||
setTimeout(() => { |
|
||||
this.$nextTick(() => { |
|
||||
var myChart = echarts.init(document.getElementById('daytotal')); |
|
||||
|
|
||||
getDailyCumulative().then(res=>{ |
export default { |
||||
if ( res.code == 200) { |
name: 'RailWayDay', |
||||
let data = res.data; |
components: { |
||||
let timer = []; |
WgtTitle |
||||
let number = []; |
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
data.forEach((it)=>{ |
created() { |
||||
timer.push(it.time); |
|
||||
number.push(it.number); |
|
||||
}); |
|
||||
|
|
||||
chartsStatistics.xAxis.data = timer; |
}, |
||||
chartsStatistics.series[0].data = number; |
methods: { |
||||
|
|
||||
myChart.setOption(chartsStatistics); |
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById('daytotal')); |
||||
|
|
||||
|
getDailyCumulative().then(res => { |
||||
|
if (res.code == 200) { |
||||
|
let data = res.data; |
||||
|
let timer = []; |
||||
|
let number = []; |
||||
|
//默认数值 |
||||
|
if(data.length < 1){ |
||||
|
data = [ |
||||
|
{ |
||||
|
time: '00:00', |
||||
|
number: 800 |
||||
|
}, |
||||
|
{ |
||||
|
time: '02:00', |
||||
|
number: 1000 |
||||
|
}, |
||||
|
{ |
||||
|
time: '04:00', |
||||
|
number: 800 |
||||
|
}, |
||||
|
{ |
||||
|
time: '06:00', |
||||
|
number: 700 |
||||
|
}, |
||||
|
{ |
||||
|
time: '08:00', |
||||
|
number: 400 |
||||
|
}, |
||||
|
{ |
||||
|
time: '10:00', |
||||
|
number: 1000 |
||||
|
}, |
||||
|
{ |
||||
|
time: '12:00', |
||||
|
number: 800 |
||||
|
}, |
||||
|
{ |
||||
|
time: '14:00', |
||||
|
number: 500 |
||||
|
}, |
||||
|
{ |
||||
|
time: '16:00', |
||||
|
number: 800 |
||||
|
}, |
||||
|
{ |
||||
|
time: '18:00', |
||||
|
number: 500 |
||||
|
}, |
||||
|
] |
||||
} |
} |
||||
|
|
||||
}); |
data.forEach((it) => { |
||||
|
timer.push(it.time); |
||||
|
number.push(it.number); |
||||
|
}); |
||||
|
|
||||
|
chartsStatistics.xAxis.data = timer; |
||||
|
chartsStatistics.series[0].data = number; |
||||
|
|
||||
|
myChart.setOption(chartsStatistics); |
||||
|
} |
||||
|
|
||||
}); |
}); |
||||
|
|
||||
}); |
}); |
||||
}, |
}); |
||||
} |
}, |
||||
</script> |
} |
||||
|
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.congestion { |
.congestion { |
||||
|
width: 100%; |
||||
|
|
||||
|
.board { |
||||
|
height: 200px; |
||||
width: 100%; |
width: 100%; |
||||
.board{ |
padding: 0px 20px; |
||||
height:200px; |
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
||||
width: 100%; |
border-radius: 5px 5px 5px 5px; |
||||
padding: 0px 20px; |
opacity: 1; |
||||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
border: 1px solid; |
||||
border-radius: 5px 5px 5px 5px; |
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
opacity: 1; |
display: flex; |
||||
border: 1px solid; |
justify-content: space-between; |
||||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
align-items: center; |
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
} |
|
||||
} |
} |
||||
.charts { |
} |
||||
height:180px; |
|
||||
width: 100%; |
.charts { |
||||
} |
height: 180px; |
||||
|
width: 100%; |
||||
</style> |
} |
||||
|
</style> |
||||
|
|
||||
@ -1,272 +1,267 @@ |
|||||
import * as echarts from "echarts"; |
let data = [ |
||||
let data = [{ |
{ |
||||
average:20, |
average: 10, |
||||
typeName:'行人', |
typeName: "交通拥堵", |
||||
percent:0.2 |
percent: 0.1, |
||||
},{ |
}, |
||||
average:35, |
{ |
||||
typeName:'非机动车', |
average: 11, |
||||
percent:0.25 |
typeName: "行人", |
||||
},{ |
percent: 0.11, |
||||
average:23, |
}, |
||||
typeName:'抛洒物', |
{ |
||||
percent:0.08 |
average: 12, |
||||
},{ |
typeName: "非机动车", |
||||
average:20, |
percent: 0.12, |
||||
typeName:'烟火', |
}, |
||||
percent:0.14 |
{ |
||||
},{ |
average: 13, |
||||
average:8, |
typeName: "停车", |
||||
typeName:'拥堵', |
percent: 0.13, |
||||
percent:0.14 |
}, |
||||
},{ |
{ |
||||
average:5, |
average: 5, |
||||
typeName:'逆行', |
typeName: "倒车/逆行", |
||||
percent:0.14 |
percent: 0.05, |
||||
}] |
}, |
||||
let chartData = [],lengData=[], colorList = ['#50EED3', '#5DEF9E', '#29B3FF', '#FB5C38', '#FB5C38','#FCBB14']; |
{ |
||||
for (let i = 0; i < data.length; i++) { |
average: 15, |
||||
chartData.push({ |
typeName: "烟火", |
||||
value: data[i].average, |
percent: 0.15, |
||||
name: data[i].typeName, |
}, |
||||
percent: data[i].percent, |
{ |
||||
color: colorList[i] |
average: 10, |
||||
}) |
typeName: "撒落物", |
||||
lengData.push({ |
percent: 0.1, |
||||
name: data[i].typeName, |
}, |
||||
color: colorList[i] |
{ |
||||
}) |
average: 10, |
||||
} |
typeName: "异常天气", |
||||
|
percent: 0.1, |
||||
let a = chartData.map(t=>{ |
}, |
||||
t.value = parseInt(t.value) |
{ |
||||
return t |
average: 14, |
||||
}) |
typeName: "护栏碰撞", |
||||
const sum = a.reduce((per, cur) => per + cur.value, 0); |
percent: 0.14, |
||||
const gap = (1 * sum) / 100; |
}, |
||||
const pieData1 = []; |
]; |
||||
const gapData = { |
let chartData = [], |
||||
name: "", |
lengData = [], |
||||
value: gap, |
colorList = [ |
||||
itemStyle: { |
"#50EED3", |
||||
color: "transparent", |
"#5DEF9E", |
||||
}, |
"#29B3FF", |
||||
}; |
"#FB5C38", |
||||
let total = 0; |
"#FB5C38", |
||||
chartData.forEach((item) => { |
"#FCBB14", |
||||
total += parseInt(item.value); |
]; |
||||
}); |
for (let i = 0; i < data.length; i++) { |
||||
|
chartData.push({ |
||||
for (let i = 0; i < chartData.length; i++) { |
value: data[i].average, |
||||
// 第一圈数据
|
name: data[i].typeName, |
||||
pieData1.push({ |
percent: data[i].percent, |
||||
...chartData[i], |
color: colorList[i], |
||||
}); |
}); |
||||
pieData1.push(gapData); |
lengData.push({ |
||||
} |
name: data[i].typeName, |
||||
|
color: colorList[i], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
let a = chartData.map((t) => { |
||||
|
t.value = parseInt(t.value); |
||||
|
return t; |
||||
|
}); |
||||
|
const sum = a.reduce((per, cur) => per + cur.value, 0); |
||||
|
const gap = (1 * sum) / 100; |
||||
|
const pieData1 = []; |
||||
|
const gapData = { |
||||
|
name: "", |
||||
|
value: gap, |
||||
|
itemStyle: { |
||||
|
color: "transparent", |
||||
|
}, |
||||
|
}; |
||||
|
let total = 0; |
||||
|
chartData.forEach((item) => { |
||||
|
total += parseInt(item.value); |
||||
|
}); |
||||
|
|
||||
console.log(pieData1); |
for (let i = 0; i < chartData.length; i++) { |
||||
var options = { |
// 第一圈数据
|
||||
tooltip: { |
pieData1.push({ |
||||
confine: true, |
...chartData[i], |
||||
textStyle: { |
}); |
||||
fontSize: 14 // 字体大小
|
pieData1.push(gapData); |
||||
}, |
} |
||||
|
|
||||
|
console.log(pieData1); |
||||
|
var options = { |
||||
|
tooltip: { |
||||
|
confine: true, |
||||
|
textStyle: { |
||||
|
fontSize: 14, // 字体大小
|
||||
|
}, |
||||
|
}, |
||||
|
title: { |
||||
|
//圆环中间内容
|
||||
|
text: "100%", |
||||
|
subtext: "类型分析", |
||||
|
left: "19%", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 26, |
||||
|
align: "center", |
||||
}, |
}, |
||||
title:{ //圆环中间内容
|
subtextStyle: { |
||||
text: '100%', |
fontSize: 18, |
||||
subtext: '类型分析', |
fontWeight: "400", |
||||
left:"19%", |
top: -8, |
||||
top:"40%", |
|
||||
textStyle:{ |
|
||||
color:"#fff", |
|
||||
fontSize:26, |
|
||||
align:"center" |
|
||||
}, |
|
||||
subtextStyle: { |
|
||||
fontSize: 18, |
|
||||
fontWeight: '400', |
|
||||
top: -8, |
|
||||
|
|
||||
align:"center", |
align: "center", |
||||
color:'#fff' |
color: "#fff", |
||||
}, |
}, |
||||
|
}, |
||||
|
color: colorList, |
||||
|
legend: { |
||||
|
top: "15%", |
||||
|
right: -5, |
||||
|
orient: "vertical", //改变排列方式
|
||||
|
icon: "circle", //改变legend小图标形状
|
||||
|
itemGap: 20, // 设置legend的间距
|
||||
|
itemWidth: 10, // 设置宽度
|
||||
|
itemHeight: 10, // 设置高度
|
||||
|
textStyle: { |
||||
|
right: -19, |
||||
|
fontSize: 30, |
||||
|
color: "#fff", |
||||
|
rich: { |
||||
|
a: { |
||||
|
width: 45, |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
b: { |
||||
|
fontSize: 14, |
||||
|
color: "#37E7FF", |
||||
|
marginLeft: -0, |
||||
|
}, |
||||
|
}, |
||||
}, |
}, |
||||
color:['#50EED3', '#5F8EFE','#29B3FF', '#5DEF9E', '#FB5C38', '#FCBB14','#50EED3'], |
itemStyle: { |
||||
legend: { |
borderColor: "transparent", |
||||
top:'20%', |
}, |
||||
right: -10, |
data: lengData, |
||||
orient: "vertical", //改变排列方式
|
formatter: function (name) { |
||||
icon: "circle", //改变legend小图标形状
|
let total = 0; |
||||
itemGap: 20, // 设置legend的间距
|
let target; |
||||
itemWidth: 12, // 设置宽度
|
for (let i = 0; i < data.length; i++) { |
||||
itemHeight: 12, // 设置高度
|
total += data[i].average; |
||||
itemStyle:{ |
if (data[i].typeName == name) { |
||||
|
target = data[i].average; |
||||
}, |
} |
||||
textStyle: { |
} |
||||
right: -19, |
var arr = [ |
||||
fontSize: 50, |
"{a|" + name + "}", |
||||
|
"{b|" + ((target / total) * 100).toFixed(2) + "%}", |
||||
|
]; |
||||
|
return arr.join(" "); |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
roseType: "radius", |
||||
|
startAngle: -220, |
||||
|
avoidLabelOverlap: true, //防止标签重叠
|
||||
|
type: "pie", |
||||
|
radius: ["50%", "80%"], //大小
|
||||
|
center: ["25%", "50%"], //位置
|
||||
|
hoverAnimation: true, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
borderWidth: 6, |
||||
|
shadowBlur: 10, |
||||
|
borderRadius: 0, // 圆角
|
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
width: 3, |
||||
|
}, |
||||
|
normal: { |
||||
|
length: 30, // 指示线长度
|
||||
|
length2: 80, |
||||
|
}, |
||||
|
}, |
||||
|
data: pieData1, |
||||
|
label: { |
||||
|
show: false, |
||||
|
formatter: function (params) {}, |
||||
|
textStyle: { |
||||
|
fontSize: "18", |
||||
|
fontWeight: "bold", |
||||
color: "#fff", |
color: "#fff", |
||||
rich:{ |
}, |
||||
a:{ |
rich: { |
||||
width:45, |
color0: { |
||||
fontSize: 12, |
color: "#D56383", |
||||
}, |
}, |
||||
b:{ |
color1: { |
||||
fontSize:14, |
color: "#00FF95", |
||||
color:"#37E7FF", |
}, |
||||
marginLeft:-0, |
color3: { |
||||
} |
color: "#FFE900", |
||||
}, |
}, |
||||
}, |
color2: { |
||||
itemStyle: { |
color: "#F5B157", |
||||
borderColor: "transparent", |
}, |
||||
}, |
color4: { |
||||
data: lengData, |
color: "#1DA7FF", |
||||
formatter: function(name){ |
}, |
||||
let total = 0 |
color5: { |
||||
let target |
color: "#2967EA", |
||||
for (let i = 0; i < data.length; i++) { |
}, |
||||
total += data[i].average |
}, |
||||
if (data[i].typeName === name) { |
}, |
||||
target = data[i].average |
emphasis: { |
||||
} |
show: false, |
||||
} |
}, |
||||
var arr = [ |
|
||||
'{a|' + name + '}', |
|
||||
'{b|' + ((target / total) * 100).toFixed(2) + '%}', |
|
||||
] |
|
||||
return arr.join(' ') |
|
||||
}, |
|
||||
|
|
||||
}, |
}, |
||||
series: [ |
{ |
||||
{ |
type: "gauge", |
||||
name: '', |
zlevel: 2, |
||||
roseType: 'radius', |
splitNumber: 185, |
||||
startAngle:-220, |
radius: "70%", |
||||
avoidLabelOverlap: true,//防止标签重叠
|
center: ["25%", "50%"], |
||||
type: 'pie', |
startAngle: 90, |
||||
radius: ['63%', '90%'], //大小
|
endAngle: -269.9999, |
||||
center : ['25%','50%'], //位置
|
axisLine: { |
||||
hoverAnimation: true, |
show: false, |
||||
itemStyle: { |
}, |
||||
normal: { |
axisTick: { |
||||
borderWidth: 6, |
show: false, |
||||
shadowBlur: 10, |
}, |
||||
borderRadius: 0, // 圆角
|
axisLabel: { |
||||
}, |
show: false, |
||||
}, |
}, |
||||
labelLine: { |
splitLine: { |
||||
show:false, |
show: true, |
||||
lineStyle: { |
length: 2, |
||||
width: 3, |
lineStyle: { |
||||
}, |
width: 1, |
||||
normal: { |
color: "#017383", |
||||
length: 30, // 指示线长度
|
}, |
||||
length2:80 |
}, |
||||
}, |
pointer: { |
||||
}, |
show: 0, |
||||
data: pieData1, |
}, |
||||
label: { |
detail: { |
||||
show: false, |
show: 0, |
||||
formatter: function(params){ }, |
}, |
||||
textStyle: { |
}, |
||||
fontSize: '18', |
], |
||||
fontWeight: 'bold', |
}; |
||||
color:'#fff' |
|
||||
}, |
export default options; |
||||
rich: { |
|
||||
color0: { |
|
||||
color: '#D56383', |
|
||||
}, |
|
||||
color1: { |
|
||||
color: '#00FF95', |
|
||||
}, |
|
||||
color3: { |
|
||||
color: '#FFE900', |
|
||||
}, |
|
||||
color2: { |
|
||||
color: '#F5B157', |
|
||||
}, |
|
||||
color4: { |
|
||||
color: '#1DA7FF', |
|
||||
}, |
|
||||
color5:{ |
|
||||
color:'#2967EA' |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
emphasis: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
// {
|
|
||||
// type: 'gauge',
|
|
||||
// zlevel: 0,
|
|
||||
// splitNumber: 360,
|
|
||||
// radius: '50%',
|
|
||||
// center: ['25%', '50%'],
|
|
||||
// startAngle: 90,
|
|
||||
// endAngle: -269.9999,
|
|
||||
// axisLine: {
|
|
||||
// show: false,
|
|
||||
// },
|
|
||||
// axisTick: {
|
|
||||
// show: false,
|
|
||||
// },
|
|
||||
// axisLabel: {
|
|
||||
// show: false,
|
|
||||
// },
|
|
||||
// splitLine: {
|
|
||||
// show: true,
|
|
||||
// length:68,
|
|
||||
// lineStyle: {
|
|
||||
// width: 2,
|
|
||||
// color: '#277DCA',
|
|
||||
// },
|
|
||||
// },
|
|
||||
// pointer: {
|
|
||||
// show: 0,
|
|
||||
// },
|
|
||||
// detail: {
|
|
||||
// show: 0,
|
|
||||
// },
|
|
||||
// },
|
|
||||
{ |
|
||||
type: 'gauge', |
|
||||
zlevel: 2, |
|
||||
splitNumber: 185, |
|
||||
radius: '70%', |
|
||||
center: ['25%', '50%'], |
|
||||
startAngle: 90, |
|
||||
endAngle: -269.9999, |
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
show: false, |
|
||||
}, |
|
||||
splitLine: { |
|
||||
show: true, |
|
||||
length:2, |
|
||||
lineStyle: { |
|
||||
width: 1, |
|
||||
color: '#017383', |
|
||||
}, |
|
||||
}, |
|
||||
pointer: { |
|
||||
show: 0, |
|
||||
}, |
|
||||
detail: { |
|
||||
show: 0, |
|
||||
}, |
|
||||
}, |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
export default options |
|
||||
|
|||||
File diff suppressed because it is too large
@ -1,96 +1,97 @@ |
|||||
<template> |
<template> |
||||
<div class='congestion'> |
<div class='congestion'> |
||||
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle> |
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle> |
||||
<div class="board"> |
<div class="board"> |
||||
<div class="charts keep-ratio " id="monthStatistics"></div> |
<div class="charts keep-ratio " id="monthStatistics"></div> |
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
|
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
import WgtTitle from '../../../widgets/title' |
|
||||
import * as echarts from "echarts"; |
|
||||
import chartsStatistics from "./assets/charts"; |
|
||||
import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent'; |
|
||||
|
|
||||
export default { |
import WgtTitle from '../../../widgets/title' |
||||
name: 'MonthStatistics', |
import * as echarts from "echarts"; |
||||
components: { |
import chartsStatistics from "./assets/charts"; |
||||
WgtTitle |
import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent'; |
||||
}, |
|
||||
data() { |
export default { |
||||
return { |
name: 'MonthStatistics', |
||||
|
components: { |
||||
} |
WgtTitle |
||||
}, |
}, |
||||
|
data() { |
||||
created() { |
return { |
||||
|
|
||||
}, |
} |
||||
methods: { |
}, |
||||
|
|
||||
}, |
created() { |
||||
mounted() { |
|
||||
setTimeout(() => { |
}, |
||||
this.$nextTick(() => { |
methods: { |
||||
var myChart = echarts.init(document.getElementById('monthStatistics')); |
|
||||
getDailyCumulativeMonth().then((res)=>{ |
}, |
||||
console.log(res); |
mounted() { |
||||
if ( res.code == 200 ) { |
setTimeout(() => { |
||||
let data = res.data; |
this.$nextTick(() => { |
||||
let timeData = []; |
var myChart = echarts.init(document.getElementById('monthStatistics')); |
||||
let datasN = []; |
getDailyCumulativeMonth().then((res) => { |
||||
for (var i = 0; i < 24;i++){ |
console.log(res); |
||||
let k = 0; |
if (res.code == 200) { |
||||
for (var j = 0;j < data.length;j++){ |
let data = res.data; |
||||
let it = data[j]; |
let timeData = []; |
||||
if ( it.time == i ) { |
let datasN = []; |
||||
timeData.push( i +"点至"+ (i +1)+"点"); |
for (var i = 0; i < 24; i++) { |
||||
datasN.push(it.number); |
let k = 0; |
||||
k++; |
for (var j = 0; j < data.length; j++) { |
||||
} |
let it = data[j]; |
||||
} |
if (it.time == i) { |
||||
if ( k == 0 ) { |
timeData.push(i + "点至" + (i + 1) + "点"); |
||||
timeData.push( i +"点至"+ (i +1)+"点"); |
datasN.push(it.number); |
||||
datasN.push(0); |
k++; |
||||
} |
} |
||||
|
} |
||||
|
if (k == 0) { |
||||
|
timeData.push(i + "点至" + (i + 1) + "点"); |
||||
|
datasN.push(0); |
||||
} |
} |
||||
chartsStatistics.xAxis.data = timeData; |
|
||||
chartsStatistics.series[0].data = datasN; |
|
||||
|
|
||||
myChart.setOption(chartsStatistics); |
|
||||
} |
} |
||||
|
chartsStatistics.xAxis.data = timeData; |
||||
}); |
chartsStatistics.series[0].data = datasN; |
||||
|
|
||||
|
myChart.setOption(chartsStatistics); |
||||
|
} |
||||
|
|
||||
}); |
}); |
||||
}); |
}); |
||||
}, |
}); |
||||
} |
}, |
||||
</script> |
} |
||||
|
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.congestion { |
.congestion { |
||||
|
width: 100%; |
||||
|
|
||||
|
.board { |
||||
|
height: 200px; |
||||
width: 100%; |
width: 100%; |
||||
.board{ |
padding: 0px 20px; |
||||
height:200px; |
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
||||
width: 100%; |
border-radius: 5px 5px 5px 5px; |
||||
padding: 0px 20px; |
opacity: 1; |
||||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
border: 1px solid; |
||||
border-radius: 5px 5px 5px 5px; |
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
opacity: 1; |
display: flex; |
||||
border: 1px solid; |
justify-content: space-between; |
||||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
align-items: center; |
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
} |
|
||||
} |
} |
||||
.charts { |
} |
||||
height:180px; |
|
||||
width: 100%; |
.charts { |
||||
} |
height: 180px; |
||||
|
width: 100%; |
||||
</style> |
} |
||||
|
</style> |
||||
|
|
||||
@ -1,111 +1,158 @@ |
|||||
<template> |
<template> |
||||
<div class='situation'> |
<div class="situation"> |
||||
<WgtTitle :title="'路段感知事件排名'"></WgtTitle> |
<WgtTitle :title="'路段感知事件排名'"></WgtTitle> |
||||
<div class="board"> |
<div class="board"> |
||||
<!-- <div class="tag"> |
<!-- <div class="tag"> |
||||
<div class="checked">路段车流量Top10</div> |
<div class="checked">路段车流量Top10</div> |
||||
<div>断面交通量Top10</div> |
<div>断面交通量Top10</div> |
||||
</div> --> |
</div> --> |
||||
<div class="charts keep-ratio " id="situationEchartBox"></div> |
<div class="charts keep-ratio" id="situationEchartBox"></div> |
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
|
</template> |
||||
<script> |
|
||||
|
|
||||
import WgtTitle from '../../../widgets/title' |
|
||||
import * as echarts from "echarts"; |
|
||||
import chartsStatistics from "./assets/charts"; |
|
||||
import { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent'; |
|
||||
|
|
||||
export default { |
<script> |
||||
name: 'Situation', |
import WgtTitle from "../../../widgets/title"; |
||||
components: { |
import * as echarts from "echarts"; |
||||
WgtTitle |
import chartsStatistics from "./assets/charts"; |
||||
}, |
import { getSectionPerceivedList } from "../../../../../../../api/event/perceiveEvent"; |
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
mounted() { |
|
||||
setTimeout(() => { |
|
||||
this.$nextTick(() => { |
|
||||
var myChart = echarts.init(document.getElementById('situationEchartBox')); |
|
||||
|
|
||||
getSectionPerceivedList({}).then((res)=>{ |
|
||||
console.log(res); |
|
||||
if ( res.code == 200 ) { |
|
||||
let data = res.data; |
|
||||
let texts = []; |
|
||||
let datas = []; |
|
||||
|
|
||||
data.forEach(it => { |
export default { |
||||
texts.push(it.sectionName); |
name: "Situation", |
||||
datas.push(it.number); |
components: { |
||||
}); |
WgtTitle, |
||||
|
}, |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
|
||||
chartsStatistics.yAxis[0].data = texts; |
mounted() { |
||||
chartsStatistics.series[0].data = datas; |
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init( |
||||
|
document.getElementById("situationEchartBox") |
||||
|
); |
||||
|
|
||||
myChart.setOption(chartsStatistics); |
getSectionPerceivedList({}).then((res) => { |
||||
} |
console.log(res); |
||||
}); |
if (res.code == 200) { |
||||
|
let data = res.data; |
||||
|
|
||||
|
let texts = []; |
||||
|
let datas = []; |
||||
|
//默认显示数值 |
||||
|
if (data.length <= 0) { |
||||
|
data = [ |
||||
|
{ |
||||
|
sectionName: "华山北枢纽-济南虚", |
||||
|
number: 32774, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "东客站虚-华山北枢纽", |
||||
|
number: 30067, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "小许家枢纽-东客站虚", |
||||
|
number: 30057, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "临沂枣园枢纽-临沂虚", |
||||
|
number: 28774, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "华山北枢纽-济南虚", |
||||
|
number: 26021, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "华山北枢纽-济南虚", |
||||
|
number: 24061, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "华山北枢纽-济南虚", |
||||
|
number: 20150, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "华山北枢纽-济南虚", |
||||
|
number: 20140, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "华山北枢纽-济南虚", |
||||
|
number: 20050, |
||||
|
}, |
||||
|
{ |
||||
|
sectionName: "华山北枢纽-济南虚", |
||||
|
number: 20010, |
||||
|
}, |
||||
|
]; |
||||
|
} |
||||
|
data.forEach((it) => { |
||||
|
texts.push(it.sectionName); |
||||
|
datas.push(it.number); |
||||
|
}); |
||||
|
|
||||
|
chartsStatistics.yAxis[0].data = texts; |
||||
|
chartsStatistics.series[0].data = datas; |
||||
|
|
||||
|
myChart.setOption(chartsStatistics); |
||||
|
} |
||||
}); |
}); |
||||
}); |
}); |
||||
}, |
}); |
||||
created() { |
}, |
||||
|
created() {}, |
||||
}, |
methods: {}, |
||||
methods: { |
}; |
||||
|
</script> |
||||
} |
|
||||
|
<style lang="scss" scoped> |
||||
|
.situation { |
||||
|
width: 100%; |
||||
|
|
||||
|
.board { |
||||
|
height: 455px; |
||||
|
width: 100%; |
||||
|
padding: 10px 10px; |
||||
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
||||
|
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; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
} |
} |
||||
</script> |
|
||||
|
.charts { |
||||
<style lang='scss' scoped> |
// margin-top: -40px; |
||||
.situation { |
height: 450px; |
||||
width: 100%; |
width: 100%; |
||||
.board{ |
} |
||||
height: 455px; |
|
||||
width: 100%; |
.tag { |
||||
padding: 0px 30px; |
margin-top: 20px; |
||||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
display: flex; |
||||
border-radius: 5px 5px 5px 5px; |
width: 100%; |
||||
opacity: 1; |
justify-content: flex-start; |
||||
border: 1px solid; |
|
||||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
div { |
||||
display: flex; |
width: 150px; |
||||
justify-content: flex-start; |
height: 25px; |
||||
align-items: center; |
line-height: 25px; |
||||
flex-direction: column; |
border-radius: 20px; |
||||
} |
text-align: center; |
||||
.charts { |
background-color: #c87800; |
||||
margin-top: -40px; |
margin-right: 10px; |
||||
height: 400px; |
|
||||
width: 100%; |
|
||||
} |
} |
||||
.tag{ |
|
||||
margin-top: 20px; |
.checked { |
||||
display: flex; |
background-color: #00b3cc; |
||||
width: 100%; |
|
||||
justify-content: flex-start; |
|
||||
div{ |
|
||||
width: 150px; |
|
||||
height: 25px; |
|
||||
line-height: 25px; |
|
||||
border-radius: 20px; |
|
||||
text-align: center; |
|
||||
background-color: #C87800; |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
.checked{ |
|
||||
background-color: #00B3CC;; |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
</style> |
} |
||||
|
</style> |
||||
|
|||||
@ -1,201 +1,201 @@ |
|||||
<template> |
<template> |
||||
<div class='congestion'> |
<div class='congestion'> |
||||
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
||||
<div class="board"> |
<div class="board"> |
||||
<div class="charts keep-ratio " id="typeAnalysis"></div> |
<div class="charts keep-ratio " id="typeAnalysis"></div> |
||||
</div> |
|
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
|
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
import WgtTitle from '../../../widgets/title' |
|
||||
import * as echarts from "echarts"; |
|
||||
import chartsStatistics from "./assets/charts"; |
|
||||
import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent'; |
|
||||
|
|
||||
|
import WgtTitle from '../../../widgets/title' |
||||
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { |
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, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
||||
ctx.beginPath(); |
ctx.beginPath(); |
||||
ctx.fillStyle = gr; |
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.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.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.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.closePath(); |
||||
//ctx.stroke(); |
//ctx.stroke(); |
||||
ctx.fill() |
ctx.fill() |
||||
} |
} |
||||
|
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'TypeAnalysis', |
name: 'TypeAnalysis', |
||||
components: { |
components: { |
||||
WgtTitle |
WgtTitle |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
|
||||
} |
} |
||||
}, |
}, |
||||
|
created() { |
||||
created() { |
|
||||
|
}, |
||||
}, |
methods: { |
||||
methods: { |
|
||||
|
}, |
||||
}, |
mounted() { |
||||
mounted() { |
setTimeout(() => { |
||||
setTimeout(() => { |
this.$nextTick(() => { |
||||
this.$nextTick(() => { |
var myChart = echarts.init(document.getElementById('typeAnalysis')); |
||||
var myChart = echarts.init(document.getElementById('typeAnalysis')); |
|
||||
|
|
||||
|
getWarningTypeDay().then(res => { |
||||
getWarningTypeDay().then(res=>{ |
console.log(res); |
||||
console.log(res); |
if (res.code == 200) { |
||||
if ( res.code == 200 ) { |
let data = res.data; |
||||
let data = res.data; |
console.log("===================", data); |
||||
console.log("===================",data); |
typeAnalysisData = []; |
||||
typeAnalysisData = []; |
for (var i = 0; i < data.length; i++) { |
||||
for (var i = 0;i < data.length;i++){ |
var it = data[i]; |
||||
var it = data[i]; |
if (it.warningType == 1) { |
||||
if ( it.warningType == 1) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '交通拥堵', |
||||
name:'交通拥堵', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 2) { |
||||
if ( it.warningType == 2) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '行人', |
||||
name:'行人', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 3) { |
||||
if ( it.warningType == 3) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '非机动车', |
||||
name:'非机动车', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 4) { |
||||
if ( it.warningType == 4) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '停车', |
||||
name:'停车', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 5) { |
||||
if ( it.warningType == 5) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '倒车/逆行', |
||||
name:'倒车/逆行', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 6) { |
||||
if ( it.warningType == 6) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '烟火', |
||||
name:'烟火', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 7) { |
||||
if ( it.warningType == 7) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '撒落物', |
||||
name:'撒落物', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 8) { |
||||
if ( it.warningType == 8) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '异常天气', |
||||
name:'异常天气', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
if (it.warningType == 9) { |
||||
if ( it.warningType == 9) { |
typeAnalysisData.push({ |
||||
typeAnalysisData.push({ |
name: '护栏碰撞', |
||||
name:'护栏碰撞', |
value: it.number |
||||
value:it.number |
}); |
||||
}); |
} |
||||
} |
|
||||
|
drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12, gr) |
||||
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] |
||||
} |
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name); |
myChart.setOption(chartsStatistics); |
||||
chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => { |
}) |
||||
return { |
|
||||
...item, |
const domMap = document.getElementById("typeAnalysis"); |
||||
label: { |
let parentDiv = domMap.firstChild; |
||||
color: colorList[index] |
// 创建canvas |
||||
} |
let canvas = document.createElement('canvas'); |
||||
} |
canvas.width = parentDiv.offsetWidth; |
||||
}) |
canvas.height = parentDiv.offsetHeight; |
||||
chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => { |
parentDiv.appendChild(canvas); |
||||
return { |
const context = canvas.getContext('2d'); |
||||
...item, |
|
||||
label: { |
// 填充渐变颜色 |
||||
color: colorList[index] |
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)'); |
||||
} |
|
||||
|
|
||||
myChart.setOption(chartsStatistics); |
context.lineWidth = 1; // 设置线段宽度 |
||||
}) |
|
||||
|
// 绘制圆角矩形 |
||||
const domMap = document.getElementById("typeAnalysis"); |
|
||||
let parentDiv = domMap.firstChild; |
// drawRoundRect(context, 260, 36, 120, 24, 12,gr) |
||||
// 创建canvas |
// drawRoundRect(context, 260, 64, 120, 24, 12,gr) |
||||
let canvas = document.createElement('canvas'); |
// drawRoundRect(context, 260, 92, 120, 24, 12,gr) |
||||
canvas.width = parentDiv.offsetWidth; |
// drawRoundRect(context, 260, 120, 120, 24, 12,gr) |
||||
canvas.height =parentDiv.offsetHeight; |
// drawRoundRect(context, 260, 148, 120, 24, 12,gr) |
||||
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)'); |
|
||||
|
|
||||
|
|
||||
context.lineWidth = 1; // 设置线段宽度 |
|
||||
|
|
||||
// 绘制圆角矩形 |
|
||||
|
|
||||
// drawRoundRect(context, 260, 36, 120, 24, 12,gr) |
|
||||
// drawRoundRect(context, 260, 64, 120, 24, 12,gr) |
|
||||
// drawRoundRect(context, 260, 92, 120, 24, 12,gr) |
|
||||
// drawRoundRect(context, 260, 120, 120, 24, 12,gr) |
|
||||
// drawRoundRect(context, 260, 148, 120, 24, 12,gr) |
|
||||
}); |
|
||||
}); |
}); |
||||
}, |
}); |
||||
} |
}, |
||||
</script> |
} |
||||
|
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.congestion { |
.congestion { |
||||
|
width: 100%; |
||||
|
|
||||
|
.board { |
||||
|
height: 200px; |
||||
width: 100%; |
width: 100%; |
||||
.board{ |
padding: 0px 20px; |
||||
height:200px; |
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #06425888 100%); |
||||
width: 100%; |
border-radius: 5px 5px 5px 5px; |
||||
padding: 0px 20px; |
opacity: 1; |
||||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425888 100%); |
border: 1px solid; |
||||
border-radius: 5px 5px 5px 5px; |
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1; |
||||
opacity: 1; |
display: flex; |
||||
border: 1px solid; |
justify-content: space-between; |
||||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.1), rgba(55, 231, 255, 0)) 1 1; |
align-items: center; |
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
} |
|
||||
} |
} |
||||
.charts { |
} |
||||
height:180px; |
|
||||
width: 100%; |
.charts { |
||||
} |
height: 180px; |
||||
|
width: 100%; |
||||
</style> |
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue