<template>
<panel-container>
<modular-layout>
<!--<panel-title-1>智慧交通</panel-title-1>-->
<div class="Modular_main">
<div>
<vue-scroll>
<div class="row-full" style="display: flex;justify-content: space-between">
<div class="col-30">
<TitleThree title="交通建设情况" />
<div class="module-corner Modular_left">
<div class="progressBox">
<Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
<div v-for="(value,index) in basic_info_bar" :key="index">
<!--<ProgressBar :data="value" :labelWidth=".25" />-->
<ProgressBar2 :data="value" :labelWidth=".28" />
</div>
</div>
<Corner2 />
</div>
</div>
<div class="col-60">
<traffic-safety/>
</div>
</div>
<div class="row">
<div class="col-30">
<TitleThree title="拥堵路口" />
<div class="Modular_left">
<DataList :data="jamRoad" :title="['日期','数据']" >
<Corner2 slot="corner" />
</DataList>
</div>
</div>
<div class="col-40">
<TitleThree title="交通违法" />
<div id="traffic_violation_box" class="">
<EchartLine
:id="traffic_violation.id"
:width="traffic_violation.width"
:height="traffic_violation.height"
:legend="traffic_violation.legend"
:unit="traffic_violation.unit"
:xAxisData="traffic_violation.xAxisData"
:yAxisData="traffic_violation.yAxisData"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-30">
<TitleThree title="交通事件" />
<div class="Modular_left">
<DataList :data="trafficEvent" :title="['日期','数据']" >
<Corner2 slot="corner" />
</DataList>
</div>
</div>
<div class="col-30">
<TitleThree title="公交乘客" />
<div id="bus_passengers_box" class="Modular_left">
<EchartBar1Color
:id="bus_passengers.id"
:width="bus_passengers.width"
:height="bus_passengers.height"
:unit="bus_passengers.unit"
:xAxisData="bus_passengers.xAxisData"
:seriesData="bus_passengers.seriesData"
/>
</div>
</div>
<div class="col-40">
<TitleThree title="停车位" />
<div class="Modular_left Modular_right">
<div class="module-corner">
<div style="width: 100%; padding: .02rem 0; overflow:hidden;">
<div class="col-60" id="parking_space_box">
<ProgressBarMany
:id="parking_space.id"
:width="parking_space.width"
:height="parking_space.height"
:unit="parking_space.unit"
:yAxisData="parking_space.yAxisData"
:seriesData="parking_space.seriesData"
/>
</div>
<div class="col-40 parking_bg">
<div class="parking_til">
<p class="single-line">日期</p>
<p class="single-line">总数</p>
<p class="single-line">占用数</p>
<p class="single-line">空闲数</p>
</div>
<div class="parking_data" v-for="(item,index) in parking_data" :key="index">
<p class="single-line">{{item.date}}</p>
<p class="single-line">{{item.total}}</p>
<p class="single-line">{{item.occupancy}}</p>
<p class="single-line">{{item.free}}</p>
</div>
</div>
</div>
<Corner2 />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-30">
<TitleThree title="设备在线状况" />
<div class="Modular_left">
<div class="module-corner">
<div style=" padding: 0 .02rem 0 .02rem;">
<div class="circularChartBox" v-for="(item,index) in onlineStatus" :key="index" style="margin: .02rem 0 .02rem;">
<div class="circularChartBox-echart" :id="'onlineStatus2_box'+(index+1)">
<EchartAnnular
:id="item.echartData.id"
:width="item.echartData.width"
:height="item.echartData.height"
:data="item.echartData.data"
:color="item.echartData.color"
/>
</div>
<text1
:titles="{name:'名称', num:'设备数量'}"
:options="{color: item.color,name: 'name',num: 'num',unit: ''}"
:data="item"
/>
<!--<div class="circularChartBox-info">-->
<!--<div>-->
<!--<span>名称：{{item.name}}</span>-->
<!--</div>-->
<!--<div>-->
<!--<span>设备数量：<b :style="'color:'+item.color">{{item.num}}</b></span>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<Corner2 />
</div>
</div>
</div>
<div class="col-70">
<TitleThree title="数据分析" />
<div class="Modular_left Modular_right">
<DataAnalysis />
</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</modular-layout>
</panel-container>
</template>
<script>
import Corner from '@/components/Corner'
import Corner2 from '@/components/Corner2'
import DataList from '@/components/board/DataList'
import EchartBar1Color from '@/components/echart/EchartBar1Color'
import Legend from '@/components/echart/Legend'
import ProgressBar from './components/ProgressBar'
import EchartLine from '@/components/echart/EchartLine'
import DataAnalysis from './components/DataAnalysis'
import ProgressBarMany from '@/components/echart/ProgressBarMany'
import EchartAnnular from '@/components/echart/EchartAnnular'
import ProgressBar2 from '../../components/progressBar/ProgressBar2'
import Text1 from '../../components/text/Text1'
import TrafficSafety from "./components/trafficSafety";
export default {
components: {
TrafficSafety,
Text1,
ProgressBar2,
Corner,
Corner2,
DataList,
EchartBar1Color,
Legend,
ProgressBar,
EchartLine,
DataAnalysis,
ProgressBarMany,
EchartAnnular
},
data () {
return {
colors: ['213,55,78', '216,46,215', '255,248,98', '140,220,61'],
// 基础信息
basic_info_bar: [
{title: '交通路口', num1: 50, num2: 100, percentage: 50},
{title: '交通站台', num1: 50, num2: 100, percentage: 50},
{title: '停车场', num1: 0, num2: 0, percentage: 0},
{title: '停车位', num1: 50, num2: 100, percentage: 50}
],
// 停车位
parking_data: [
{date: '9-24', total: 152, occupancy: 85, free: 85},
{date: '9-24', total: 152, occupancy: 85, free: 85},
{date: '9-24', total: 152, occupancy: 85, free: 85},
{date: '9-24', total: 152, occupancy: 85, free: 85},
{date: '9-24', total: 152, occupancy: 85, free: 85},
{date: '9-24', total: 152, occupancy: 85, free: 85},
{date: '9-24', total: 152, occupancy: 85, free: 85}
],
// 拥堵路口
jamRoad: [
{ name: '2019-09-24', num: '100', unit: '（个)' },
{ name: '2019-09-24', num: '100', unit: '（个)' },
{ name: '2019-09-24', num: '100', unit: '（个)' },
{ name: '2019-09-24', num: '100', unit: '（个)' },
{ name: '2019-09-24', num: '100', unit: '（个)' }
],
// 交通违法
traffic_violation: {
id: 'traffic_violation_id',
width: 0,
height: 0,
unit: '起',
xAxisData: ['8.1', '8.2', '8.3', '8.4', '8.5', '8.6', '8.7'],
yAxisData: [
{name: '不按导向行驶', data: [ 855, 578, 856, 865, 890, 782, 1210 ], color: '213,55,78'},
{name: '未系安全带', data: [545, 745, 546, 575, 777, 467, 710 ], color: '216,46,215'}
]
},
// 交通事件
trafficEvent: [
{ name: '2019-09-24', num: '100', unit: '（件)' },
{ name: '2019-09-24', num: '100', unit: '（件)' },
{ name: '2019-09-24', num: '100', unit: '（件)' },
{ name: '2019-09-24', num: '100', unit: '（件)' },
{ name: '2019-09-24', num: '100', unit: '（件)' }
],
// 公交乘客
bus_passengers: {
id: 'bus_passengers_id',
width: 0,
height: 0,
unit: '乘客数(人) ',
xAxisData: ['10路', '202路', '61路', '802路', '13路'],
seriesData: [10, 52, 200, 334, 390]
},
// 停车位
parking_space: {
id: 'parking_space_id',
width: 0,
height: 0,
yAxisData: ['9-23', '9-23', '9-23', '9-23', '9-23', '9-23'],
legend: ['总数量', '占用数', '空闲数'],
seriesData: [
{name: '空闲数', data: [45, 45, 45, 45, 45, 45], color: '#d5384d', zlevel: 10},
{name: '占用数', data: [34, 34, 34, 34, 34, 34], color: '#ff9e00', zlevel: 5},
{name: '总数量', data: [100, 80, 100, 90, 140, 100], color: '#0468f1', zlevel: 0}
]
},
// 设备在线情况
onlineStatus: [
{
name: '电子警察',
num: '10',
color: '#fc5e5f',
echartData: {
id: 'onlineStatus2_id1',
width: 0,
height: 0,
data: 50,
color: ['#fc5e5f', '#f90006']
}
},
{
name: '卡口',
num: '10',
color: '#1bfb11',
echartData: {
id: 'onlineStatus2_id2',
width: 0,
height: 0,
data: 50,
color: ['#1bfb11', '#08f37a']
}
},
{
name: '流量',
num: '10',
color: '#f9ae07',
echartData: {
id: 'onlineStatus2_id3',
width: 0,
height: 0,
data: 50,
color: ['#f9ae07', '#f9cd54']
}
}
]
}
},
created () {
},
mounted () {
// 获取基础信息-停车场
this.getBasicInfoParkingLot()
// 获取基础信息-停车位
this.getBasicInfoParkingSpace()
// 获取监测设备
this.callEchart('onlineStatus2_box1', this.onlineStatus[0].echartData, 1)
this.callEchart('onlineStatus2_box2', this.onlineStatus[1].echartData, 1)
this.callEchart('onlineStatus2_box3', this.onlineStatus[2].echartData, 1)
this.getMonitorQty()
// 交通违法
this.callEchart('traffic_violation_box', this.traffic_violation, 1.7)
this.getTrafficViolation()
// 交通事件
this.getTrafficEvent()
// 公交乘客echart
this.callEchart('bus_passengers_box', this.bus_passengers, 1.2)
// 停车位echart
this.callEchart('parking_space_box', this.parking_space, 1)
},
methods: {
// 获取基础信息-停车场
getBasicInfoParkingLot () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1055'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
let data = res.data
data.forEach((item, index) => {
if (item.LX.indexOf('竣工') != -1) {
this.basic_info_bar[2].num1 = item.SL // 竣工数
}
if (item.LX.indexOf('规划') != -1) {
this.basic_info_bar[2].num2 = item.SL // 规划数
}
})
this.basic_info_bar[2].percentage = (Number(this.basic_info_bar[2].num1) / Number(this.basic_info_bar[2].num2)).toFixed(2) * 100
})
},
// 获取基础信息-停车位
getBasicInfoParkingSpace () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1056'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
let data = res.data
data.forEach((item, index) => {
if (item.LX.indexOf('竣工') != -1) {
this.basic_info_bar[3].num1 = item.SL // 竣工数
}
if (item.LX.indexOf('规划') != -1) {
this.basic_info_bar[3].num2 = item.SL // 规划数
}
})
this.basic_info_bar[3].percentage = (Number(this.basic_info_bar[3].num1) / Number(this.basic_info_bar[3].num2)).toFixed(2) * 100
})
},
// 获取监测设备
getMonitorQty () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1046'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
let data = res.data
let total = 0
for (let i = 0; i < data.length; i++) {
if (data[i].SP_NAME == '交通专项') {
total += Number(data[i].SL)
}
};
data.forEach((item, index) => {
if (item.SP_NAME == '交通专项') {
this.onlineStatus[index].name = item.PRODUCT_NAME
this.onlineStatus[index].echartData.data = (Number(item.SL) / total).toFixed(2) * 100 // 计算数量在总数中的占比
this.onlineStatus[index].num = item.SL
}
})
// 设备在线情况echart
this.callEchart('onlineStatus2_box1', this.onlineStatus[0].echartData, 1)
this.callEchart('onlineStatus2_box2', this.onlineStatus[1].echartData, 1)
this.callEchart('onlineStatus2_box3', this.onlineStatus[2].echartData, 1)
})
},
// 获取交通违法
getTrafficViolation () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1097'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
let data = res.data
let xAxisData = []
data.forEach((item, index) => {
let index1 = xAxisData.indexOf(item.SJ.split(' ')[0])
if (index1 < 0) {
xAxisData.push(item.SJ.split(' ')[0])
}
})
xAxisData = xAxisData.sort()
let yAxisData = [
{name: '不按导向行驶', data: new Array(xAxisData.length).fill(0), color: '213,55,78'},
{name: '拨打接听手持电话', data: new Array(xAxisData.length).fill(0), color: '216,46,215'},
{name: '未系安全带', data: new Array(xAxisData.length).fill(0), color: '255,248,98'},
{name: '违反禁止标线', data: new Array(xAxisData.length).fill(0), color: '140,220,61'}
]
data.forEach((item, index) => {
let index1 = xAxisData.indexOf(item.SJ.split(' ')[0])
if (item.VIOLATION_TYPE_ABBR == '不按导向行驶') {
yAxisData[0].data[index1] = item.SL
}
if (item.VIOLATION_TYPE_ABBR == '拨打接听手持电话') {
yAxisData[1].data[index1] = item.SL
}
if (item.VIOLATION_TYPE_ABBR == '未系安全带') {
yAxisData[2].data[index1] = item.SL
}
if (item.VIOLATION_TYPE_ABBR == '违反禁止标线') {
yAxisData[3].data[index1] = item.SL
}
})
this.traffic_violation.xAxisData = xAxisData
this.traffic_violation.yAxisData = yAxisData
this.callEchart('traffic_violation_box', this.traffic_violation, 1.7)
})
},
// 获取交通事件
getTrafficEvent () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1098'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
let trafficEvent = []
res.data.reverse().forEach((item, index) => {
if (index < 5) { trafficEvent.push({ name: item.SJ, num: item.SL, unit: item.SLDW}) }
})
this.trafficEvent = trafficEvent
})
},
callEchart (idBox, data, offset) {
const _width = document.getElementById(idBox).clientWidth
this.$set(data, 'width', _width)
this.$set(data, 'height', _width / offset)
}
}
}
</script>
<style scoped>
.panel-container{
width: 100%;
height: 100%;
overflow: auto;
}
/* 盒子 */
.row{
width: 100%;
overflow: hidden;
margin: 0.07rem 0;
}
.row-flex{
display:flex;
justify-content:space-between;
}
.col-45{
width: 43%;
float: left;
}
.col-55{
width: 55%;
float: left;
}
.col-40{
width: 40%;
float: left;
}
.col-50{
width: 50%;
float: left;
}
.col-60{
width: 60%;
float: left;
}
.col-30{
width: 30%;
float: left;
}
.col-70{
width: 70%;
float: left;
}
/* */
.progressBox{
padding: .03rem .15rem .03rem .01rem;
}
/* 停车位 */
.parking_bg{background:#05164a;border-radius:.03rem; padding:0.02rem;}
.parking_til{display:flex;border-bottom:1px dashed #1c2c68}
.parking_til p{width:25%;text-align:center;font-size:0.01rem;}
.parking_til p:first-child{color:#6bc2ff;}
.parking_til p:nth-child(2){color:#006bf8;}
.parking_til p:nth-child(3){color:#faa304;}
.parking_til p:last-child{color:#d63650;}
.parking_data{display:flex;}
.parking_data p{width:25%;text-align:center;font-size:0.01rem;line-height:0.11rem;}
.parking_data p:first-child{color:#6bc2ff;}
.parking_data p:nth-child(2){color:#006bf8;font-weight:bold;}
.parking_data p:nth-child(3){color:#faa304;font-weight:bold;}
.parking_data p:last-child{color:#d63650;font-weight:bold;}
/* 设备在线情况 */
.circularChartBox{
display: flex;
padding: .02rem 0;
}
.circularChartBox .circularChartBox-echart{
width: .27rem;
margin-right: .02rem;
}
.circularChartBox .circularChartBox-info{
flex:1;
}
.circularChartBox .circularChartBox-info>div{
overflow: hidden;
height: .12rem;
}
.circularChartBox .circularChartBox-info span{
font-size: .04rem;
color:#00caff;
-webkit-transform-origin-x: 0;
transform: scale(0.5833333333333334);
-webkit-transform: scale(.5)
}
.circularChartBox .circularChartBox-info span b{
font-weight: bold;
font-size: .07rem
}
.single-line{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
</style>
<style>
.page-shms .dataListBox li{
padding: .05rem .08rem !important;
}
</style>
