|
|
|
@ -6,9 +6,42 @@ |
|
|
|
</ButtonGradient> |
|
|
|
</WgtTitle> |
|
|
|
|
|
|
|
<div class="board"> |
|
|
|
<div class="charts keep-ratio " id="auditAnalytics"></div> |
|
|
|
<div class="box"> |
|
|
|
<div class="title-top"> |
|
|
|
<div class="close">收费站封闭（次）</div> |
|
|
|
<div class="traffic">收费站限行（次）</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<div class="content-item" v-for="item in tollBoothsData" :key="item.facilityName"> |
|
|
|
<div class="content-item-left"> |
|
|
|
<span class="name">{{ item.facilityName }}</span> |
|
|
|
<img class="icon" src="./assets/icon.svg" /> |
|
|
|
</div> |
|
|
|
<div class="content-item-right" :style="{ |
|
|
|
'--width': item.trafficRestriction + '%' |
|
|
|
}"> |
|
|
|
<div class="box-item"> |
|
|
|
<span class="num">{{ item.trafficClose }}次</span> |
|
|
|
</div> |
|
|
|
<div class="box-item" :style="{ |
|
|
|
'--width': item.trafficRestriction + '%' |
|
|
|
}"> |
|
|
|
<span class="num">{{ item.trafficRestriction }}次</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> --> |
|
|
|
<!-- <el-progress :width="600"></el-progress> |
|
|
|
<el-progress :percentage="50"></el-progress> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- <div class="board"> |
|
|
|
<div class="charts keep-ratio " id="auditAnalytics"></div> |
|
|
|
</div> --> |
|
|
|
<StatsDialogVisible :visible="statsDialogVisible" @update:value="handleClose" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -20,7 +53,7 @@ import * as echarts from "echarts"; |
|
|
|
import chartsStatistics from "./assets/charts"; |
|
|
|
import { tollStationAnalysis } from "@/api/event/governanceAnalysis" |
|
|
|
import StatsDialogVisible from "./StatsDialogVisible/index.vue" |
|
|
|
import Group from "./assets/Group.png"; |
|
|
|
import icon from "./assets/icon.svg"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'RailWayDay', |
|
|
|
@ -32,6 +65,7 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
statsDialogVisible: false, |
|
|
|
tollBoothsData: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -40,44 +74,45 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleStats() { |
|
|
|
console.log("统计") |
|
|
|
this.statsDialogVisible = true |
|
|
|
console.log(this.statsDialogVisible) |
|
|
|
}, |
|
|
|
handleClose() { |
|
|
|
this.statsDialogVisible = false |
|
|
|
}, |
|
|
|
getTollStationAnalysis() { |
|
|
|
return tollStationAnalysis().then((response) => { |
|
|
|
let facilityName = [] |
|
|
|
let trafficRestriction = [] |
|
|
|
let trafficClose = [] |
|
|
|
response.data.forEach(item => { |
|
|
|
facilityName.push(item.facilityName) |
|
|
|
trafficRestriction.push(item.trafficRestriction) |
|
|
|
trafficClose.push(item.trafficClose) |
|
|
|
}); |
|
|
|
|
|
|
|
for (let i = 0; i < facilityName.length; i++) { |
|
|
|
chartsStatistics.yAxis[0].axisLabel.rich[facilityName[i]] = { |
|
|
|
height: 40, |
|
|
|
align: 'center', |
|
|
|
backgroundColor: { |
|
|
|
image: Group |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
chartsStatistics.yAxis[0].data = facilityName; |
|
|
|
chartsStatistics.series[0].data = trafficClose; |
|
|
|
chartsStatistics.series[1].data = trafficRestriction; |
|
|
|
this.tollBoothsData = response.data |
|
|
|
console.log("response", response) |
|
|
|
// let facilityName = [] |
|
|
|
// let trafficRestriction = [] |
|
|
|
// let trafficClose = [] |
|
|
|
// response.data.forEach(item => { |
|
|
|
// facilityName.push(item.facilityName) |
|
|
|
// trafficRestriction.push(item.trafficRestriction) |
|
|
|
// trafficClose.push(item.trafficClose) |
|
|
|
// }); |
|
|
|
|
|
|
|
// for (let i = 0; i < facilityName.length; i++) { |
|
|
|
// chartsStatistics.yAxis[0].axisLabel.rich[facilityName[i]] = { |
|
|
|
// marginLeft: 10, |
|
|
|
// height: 20, |
|
|
|
// align: 'center', |
|
|
|
// backgroundColor: { |
|
|
|
// image: icon |
|
|
|
// }, |
|
|
|
// } |
|
|
|
// } |
|
|
|
// chartsStatistics.yAxis[0].data = facilityName; |
|
|
|
// chartsStatistics.series[0].data = trafficClose; |
|
|
|
// chartsStatistics.series[1].data = trafficRestriction; |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
async mounted() { |
|
|
|
await this.getTollStationAnalysis() |
|
|
|
const myChart = echarts.init(document.getElementById('auditAnalytics')); |
|
|
|
myChart.setOption(chartsStatistics); |
|
|
|
// const myChart = echarts.init(document.getElementById('auditAnalytics')); |
|
|
|
// myChart.setOption(chartsStatistics); |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
@ -86,6 +121,7 @@ export default { |
|
|
|
<style lang='scss' scoped> |
|
|
|
.congestion { |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.board { |
|
|
|
height: 346px; |
|
|
|
@ -114,4 +150,132 @@ export default { |
|
|
|
height: 326px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.box { |
|
|
|
height: 346px; |
|
|
|
width: 100%; |
|
|
|
padding: 0px 20px; |
|
|
|
overflow-y: auto; |
|
|
|
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: space-between; |
|
|
|
// align-items: center; |
|
|
|
|
|
|
|
.title-top { |
|
|
|
margin-top: 10px; |
|
|
|
width: 100%; |
|
|
|
font-size: 12px; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
flex-direction: row-reverse; |
|
|
|
|
|
|
|
.traffic { |
|
|
|
width: 130px; |
|
|
|
} |
|
|
|
|
|
|
|
.traffic:before { |
|
|
|
content: ''; |
|
|
|
display: block; |
|
|
|
position: relative; |
|
|
|
top: 13px; |
|
|
|
left: -15px; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
background: #5FD7FE; |
|
|
|
border-radius: 50%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.close:before { |
|
|
|
content: ''; |
|
|
|
display: block; |
|
|
|
position: relative; |
|
|
|
top: 13px; |
|
|
|
left: -15px; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
background: #FC6A67; |
|
|
|
border-radius: 50%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
.content-item { |
|
|
|
margin-top: 30px; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.content-item-left { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.name { |
|
|
|
width: 130px; |
|
|
|
text-align: right; |
|
|
|
color: #fff; |
|
|
|
font-size: 14px; |
|
|
|
margin-right: 10px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.icon { |
|
|
|
width: 12px; |
|
|
|
height: 27px; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.content-item-right {} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.box-item { |
|
|
|
position: relative; |
|
|
|
height: 8px; |
|
|
|
width: 289px; |
|
|
|
background: linear-gradient(180deg, rgba(11, 167, 218, 0.1) 0%, rgba(79, 211, 255, 0.1) 100%); |
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.box-item:nth-child(1) { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.box-item:nth-child(1)::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
height: 8px; |
|
|
|
width: var(--width); |
|
|
|
background: linear-gradient(90deg, rgba(97, 216, 255, 0) 0%, #60D7FF 100%); |
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.box-item:nth-child(2)::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
height: 8px; |
|
|
|
width: var(--width); |
|
|
|
background: linear-gradient(90deg, rgba(255, 185, 4, 0) 0%, rgba(255, 105, 105, 1) 100%); |
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.num { |
|
|
|
width: 50px; |
|
|
|
position: absolute; |
|
|
|
left: 100%; |
|
|
|
top: -5px; |
|
|
|
margin-left: 10px; |
|
|
|
font-size: 12px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
