|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="congestion"> |
|
|
|
<div class="board"> |
|
|
|
<div class="condition"> |
|
|
|
<ProgressBar |
|
|
|
class="keep-ratio" |
|
|
|
@selectItem="selectProgress" |
|
|
|
@ -85,38 +85,29 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="body"> |
|
|
|
<div class="comp_body"> |
|
|
|
<div> |
|
|
|
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle> |
|
|
|
<!-- <Empty v-show="!chart1List || chart1List.length <= 0" text="暂无数据..."></Empty> --> |
|
|
|
<!-- <div v-show="chart1List || chart1List.length > 0" id="chart1" class="btnChart" />--> |
|
|
|
<div id="chart1" class="btnChart" /> |
|
|
|
<div class="unit_con"> |
|
|
|
<Empty v-if="!chart1List || chart1List.length <= 0" text="暂无数据..." class="empty"></Empty> |
|
|
|
<div v-else id="chart1" class="chart_div" ></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> |
|
|
|
<Empty |
|
|
|
v-show="!chart2List || chart2List.length <= 0" |
|
|
|
text="暂无数据..." |
|
|
|
></Empty> |
|
|
|
<div |
|
|
|
v-show="chart2List || chart2List.length > 0" |
|
|
|
id="chart2" |
|
|
|
class="btnChart" |
|
|
|
/> |
|
|
|
<div class="unit_con"> |
|
|
|
<Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..." class="empty"></Empty> |
|
|
|
<div id="chart2" class="chart_div" ></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle> |
|
|
|
<Empty |
|
|
|
v-show="!chart3List || chart3List.length <= 0" |
|
|
|
text="暂无数据..." |
|
|
|
></Empty> |
|
|
|
<div |
|
|
|
v-show="chart3List || chart3List.length > 0" |
|
|
|
id="chart3" |
|
|
|
class="btnChart" |
|
|
|
/> |
|
|
|
<div class="unit_con"> |
|
|
|
<Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..." class="empty"></Empty> |
|
|
|
<div id="chart3" class="chart_div" ></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -418,7 +409,9 @@ export default { |
|
|
|
chart1.series[0].data = numbers; |
|
|
|
} |
|
|
|
} |
|
|
|
this.myChart1.setOption(chart1); |
|
|
|
this.$nextTick(()=>{ |
|
|
|
this.initChart1(); |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
//类型占比 |
|
|
|
@ -505,7 +498,9 @@ export default { |
|
|
|
// this.myChart2.setOption(chart2); |
|
|
|
// }) |
|
|
|
} |
|
|
|
this.myChart2.setOption(chart2); |
|
|
|
this.$nextTick(()=>{ |
|
|
|
this.initChart2(); |
|
|
|
}) |
|
|
|
}); |
|
|
|
//路段范围内桩号分布 |
|
|
|
getSectionMarkNumber({ |
|
|
|
@ -575,8 +570,9 @@ export default { |
|
|
|
chart3.series[0].data = values1; |
|
|
|
chart3.series[1].data = values2; |
|
|
|
} |
|
|
|
|
|
|
|
this.myChart3.setOption(chart3); |
|
|
|
this.$nextTick(()=>{ |
|
|
|
this.initChart3(); |
|
|
|
}) |
|
|
|
}); |
|
|
|
// if (this.type == "day") |
|
|
|
// this.type = "date"; |
|
|
|
@ -586,43 +582,18 @@ export default { |
|
|
|
this.dateTime = moment(new Date()).format("YYYY-MM-DD"); |
|
|
|
} |
|
|
|
}, |
|
|
|
initChart1(){ |
|
|
|
this.myChart1 = echarts.init(document.getElementById("chart1")); |
|
|
|
this.myChart1.setOption(chart1); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
getRoadSectionList().then((res) => { |
|
|
|
console.log(res); |
|
|
|
if (res.code == 200) { |
|
|
|
let rows = res.data; |
|
|
|
this.dataList = []; |
|
|
|
rows.forEach((it) => { |
|
|
|
this.dataList.push({ |
|
|
|
title: it.sectionName.split("-")[0], |
|
|
|
id: it.id, |
|
|
|
}); |
|
|
|
}); |
|
|
|
//最后一项取结束点 |
|
|
|
if (rows.length > 1) { |
|
|
|
this.dataList.push({ |
|
|
|
title: rows[rows.length - 1].sectionName.split("-")[1], |
|
|
|
id: rows[rows.length - 1].id, |
|
|
|
}); |
|
|
|
} |
|
|
|
console.log("dataList", this.dataList); |
|
|
|
} |
|
|
|
this.searchQuery(); |
|
|
|
}); |
|
|
|
|
|
|
|
var myChart1 = echarts.init(document.getElementById("chart1")); |
|
|
|
myChart1.setOption(chart1); |
|
|
|
var myChart2 = echarts.init(document.getElementById("chart2")); |
|
|
|
myChart2.setOption(chart2); |
|
|
|
var myChart3 = echarts.init(document.getElementById("chart3")); |
|
|
|
myChart3.setOption(chart3); |
|
|
|
initChart3(){ |
|
|
|
this.myChart3 = echarts.init(document.getElementById("chart3")); |
|
|
|
this.myChart3.setOption(chart3); |
|
|
|
}, |
|
|
|
initChart2(){ |
|
|
|
|
|
|
|
this.myChart1 = myChart1; |
|
|
|
this.myChart2 = myChart2; |
|
|
|
this.myChart3 = myChart3; |
|
|
|
this.myChart2 = echarts.init(document.getElementById("chart2")); |
|
|
|
this.myChart2.setOption(chart2); |
|
|
|
|
|
|
|
const domMap = document.getElementById("chart2"); |
|
|
|
let parentDiv = domMap.firstChild; |
|
|
|
@ -688,26 +659,48 @@ export default { |
|
|
|
// 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); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
getRoadSectionList().then((res) => { |
|
|
|
console.log(res); |
|
|
|
if (res.code == 200) { |
|
|
|
let rows = res.data; |
|
|
|
this.dataList = []; |
|
|
|
rows.forEach((it) => { |
|
|
|
this.dataList.push({ |
|
|
|
title: it.sectionName.split("-")[0], |
|
|
|
id: it.id, |
|
|
|
}); |
|
|
|
}); |
|
|
|
//最后一项取结束点 |
|
|
|
if (rows.length > 1) { |
|
|
|
this.dataList.push({ |
|
|
|
title: rows[rows.length - 1].sectionName.split("-")[1], |
|
|
|
id: rows[rows.length - 1].id, |
|
|
|
}); |
|
|
|
} |
|
|
|
console.log("dataList", this.dataList); |
|
|
|
} |
|
|
|
this.searchQuery(); |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.congestion { |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.body { |
|
|
|
.comp_body { |
|
|
|
width: 100%; height: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-evenly; |
|
|
|
align-items: stretch; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
> div { |
|
|
|
width: 33%; |
|
|
|
height: 470px; |
|
|
|
flex: 1; |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(6, 66, 88, 0.2) 0%, |
|
|
|
@ -720,29 +713,22 @@ export default { |
|
|
|
rgba(55, 231, 255, 0) |
|
|
|
) |
|
|
|
1 1; |
|
|
|
display: flex; flex-direction: column; align-items: stretch; |
|
|
|
margin-right: 14px; |
|
|
|
&:last-child{ margin-right: 0;} |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(1) { |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(2) { |
|
|
|
margin-left: 6px; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
:nth-child(3) { |
|
|
|
margin-left: 6px; |
|
|
|
.unit_con { |
|
|
|
flex: 1; |
|
|
|
margin: 95px 20px 30px; position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.btnChart { |
|
|
|
height: 330px; |
|
|
|
width: 90%; |
|
|
|
margin: 95px auto 0; |
|
|
|
.empty{ position: absolute;} |
|
|
|
.chart_div{ |
|
|
|
width: 100%; height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.board { |
|
|
|
.condition { |
|
|
|
height: 100px; |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
@ -827,11 +813,6 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.charts { |
|
|
|
height: 100px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
zhangzhang
11 months ago