<template>
|
<div class="v-views-map-zhandianinfo">
|
<div class="header">
|
<div class="in-top-box flex ju-sb align-c">
|
<div class="flex">
|
<div class="header-title-i">{{zdname}}</div>
|
<div class="header-temp"></div>
|
<div class="header-switch" v-show="$store.state.mapMenu ==='站点'">
|
<el-switch class="switch" v-model="linenetwork" active-text="开" inactive-text="关" active-color="#1890ff" inactive-color="#c0c0c0" @change="changline($event,linenetwork)"></el-switch>
|
</div>
|
</div>
|
<div class="flex">
|
<div class="flex align-c" @click="gozhandian()">
|
<div class="small-p">查看详情</div>
|
<img class="more-img-size" src="../../assets/png/icon_more@2x.png" alt="">
|
</div>
|
<div class="header-temp"></div>
|
<div class="flex align-c">
|
<img class="close-img-size" src="../../assets/map/icon_close_s@2x.png" alt="" @click="closediv">
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="container-info color-white ">
|
<div class="flex warp mt20">
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_shishikeliu.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.realTimePassengerFlow == "number" ? form.realTimePassengerFlow : '-'}}</div>
|
<div>实时客流(人次)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_zuorikeliu.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.yesterdayPassengerFlow == "number" ? form.yesterdayPassengerFlow : '-'}}</div>
|
<div>昨日客流(人次)</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="flex warp mt30">
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_xianlushuliang.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumLine == "number" ? form.sumLine : '-'}}</div>
|
<div>线路数量(条)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_zhundianlv.png" alt="">
|
<div class="divtext">
|
<div class="divnumber _green">{{form.shiftNum || '-'}}</div>
|
<div>途径班次</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="zhuangshi">
|
<div class="zhuangshitext">{{form.stationTypeName}}</div>
|
<img class="zhuangshi-img-size" src="../../assets/map/shuangshi.png" alt="">
|
</div>
|
|
</div>
|
<div class="counttable" v-show="$store.state.mapMenu ==='站点' && talbestyle">
|
<div class="navitem mt10 ml10">
|
<!-- <div v-for="(item, index) in navitemlist" :key="index" class="navitemlist">
|
<div>{{item.name}}</div>
|
</div> -->
|
线路时段客流表(人)
|
</div>
|
<div class="g-table navtable ml16 mr16">
|
<el-table
|
:data="tableData"
|
:height="300"
|
stripe
|
v-loading="loading"
|
header-row-class-name="table-header"
|
highlight-current-row
|
style="width: calc(100% - 32px)">
|
<el-table-column
|
prop="lineName"
|
label="线路"
|
width="80">
|
<template slot="header">
|
<div class="_table-header">
|
<div class="__icon"></div>
|
<div class="__title">时段</div>
|
<div>线路</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_0_1"
|
label="0-1点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_0_1, 0) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_1_2"
|
label="1-2点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_1_2, 1) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_2_3"
|
label="2-3点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_2_3, 2) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_3_4"
|
label="3-4点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_3_4, 3) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_4_5"
|
label="4-5点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_4_5, 4) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_5_6"
|
label="5-6点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_5_6, 5) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_6_7"
|
label="6-7点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_6_7, 6) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_7_8"
|
label="7-8点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_7_8, 7) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_8_9"
|
label="8-9点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_8_9, 8) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_9_10"
|
label="9-10点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_9_10, 9) }}</div></template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_10_11"
|
label="10-11点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_10_11, 10)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_11_12"
|
label="11-12点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_11_12, 11)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_12_13"
|
label="12-13点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_12_13, 12)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_13_14"
|
label="13-14点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_13_14, 13)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_14_15"
|
label="14-15点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_14_15, 14)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_15_16"
|
label="15-16点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_15_16, 15)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_16_17"
|
label="16-17点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_16_17, 16)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_17_18"
|
label="17-18点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_17_18, 17)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_18_19"
|
label="18-19点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_18_19, 18)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_19_20"
|
label="19-20点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_19_20, 19)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_20_21"
|
label="20-21点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_20_21, 20)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_21_22"
|
label="21-22点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_21_22, 21)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_22_23"
|
label="22-23点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_22_23, 22)}}</div> </template>
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_23_24"
|
label="23-24点"
|
width="60">
|
<template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_23_24, 23)}}</div> </template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import gauge1 from '../../components/echart/gauge1.vue'
|
import { message } from 'ant-design-vue'
|
import utils from "../../unit/map";
|
export default {
|
name: 'zhandianinfo',
|
props: {
|
data1: {
|
type:Object,
|
default(){
|
return{}
|
}
|
}
|
},
|
data() {
|
return {
|
show:false,
|
zdname: "",
|
zdid: "",
|
loading: false,
|
linenetwork: false,
|
talbestyle: false,
|
form: {
|
"stationName": "夏湾路中",
|
"stationTypeName": "中途站",
|
"realTimePassengerFlow": null,
|
"yesterdayPassengerFlow": null,
|
"sumLine": 1,
|
"headEndLeaveOnTimeRate": null
|
},
|
navitemlist: [],
|
lindids: '',
|
tableData: []
|
}
|
},
|
components:{
|
gauge1
|
},
|
|
methods: {
|
getSelectDetailByName(params,id) {
|
let lineID = ''
|
if(this.$store.state.mapMenu == "线路"){
|
lineID = this.$store.state.lineName
|
}
|
this.$axios.get(this.$Interface.mapResource.getZhandianDetailById, {
|
params: { stationId: id, lineId: lineID },
|
}).then((res) => {
|
if(res.code == 0) {
|
this.navitemlist = []
|
if(res.data){
|
this.form = res.data;
|
if(res.data.passLine && res.data.passLineIds){
|
let name = res.data.passLine.split(",")
|
let ids = res.data.passLineIds.split(",")
|
this.lindids = res.data.passLineIds
|
let names = res.data.passLine
|
for(let index = 0; index<ids.length;index++){
|
this.navitemlist.push({"id":ids[index],"name":name[index]})
|
}
|
this.getKeliuAllDetailByStationName(names, id)
|
}
|
} else {
|
message.warning('获取数据为空!')
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
},
|
getKeliuAllDetailByStationName(lineids, id){
|
this.$axios.get(this.$Interface.mapResource.getListStationLinePassengerFlow, {
|
params: { passLine: lineids, stationId: id },
|
}).then((res) => {
|
if(res.code == 0) {
|
if(res.data){
|
// this.tableData = res.data;
|
// this.tableData = this.navitemlist.map((item, index) => {
|
// console.log(item, 'i', index);
|
|
// return {
|
// lineName: item.name,
|
// ...res.data[index]
|
// }
|
// }) ;
|
this.tableData = res.data;
|
// console.log( this.tableData, ' this.tableData');
|
|
} else {
|
message.warning('获取数据为空!')
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
},
|
changline(row){
|
utils.loadLineNetworkByName(this.zdid,this.zdname,row)
|
this.talbestyle = true
|
},
|
initstate(){
|
this.linenetwork = false
|
},
|
closediv(){
|
this.talbestyle = false
|
this.$emit("closediv","zhandian")
|
},
|
gozhandian(){
|
this.$router.push({ path: '/branchOfficeResource', query: { sence: 5, siteName: this.zdname }})
|
}
|
},
|
mounted() {
|
// this.initstate()
|
},
|
watch: {
|
"$store.state.selAttr": function(newVal,oldVal){
|
if(newVal.visa && newVal.type == "zhandian"){
|
this.zdname = newVal.value
|
this.zdid = newVal.id
|
this.getSelectDetailByName(newVal.value,newVal.id)
|
// this.initstate()
|
}
|
}
|
|
}
|
}
|
</script>
|
<style lang="less">
|
.v-views-map-zhandianinfo {
|
width: 536px;
|
height: 229px;
|
opacity: 0.8;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
.el-table tr {
|
background: #0289B2!important;
|
height: 30px;
|
}
|
.g-table .table-header th {
|
height: 30px !important;
|
line-height: 16px;
|
}
|
.el-table .el-table__cell {
|
padding: 0;
|
|
}
|
._num {
|
color: #FFFFFF;
|
font-family: 'Digital';
|
font-size: 18px;
|
|
}
|
.header{width:100%;height:44px;background:url("../../assets/png/header_bg_info.png") no-repeat center/cover;}
|
.in-top-box{width:90%;height:34px; margin:0 auto;}
|
.header-title-i{color:#333;font-weight: 600;font-size:16px;}
|
.small-p{color:#00f09b;font-size:14px;}
|
.more-img-size{width:12px;height:12px}
|
.divtext {padding-left: 10px; text-align: left;}
|
.divnumber {font-family:'Digital';font-size: 22px;color:#69CCFF}
|
._green {
|
color: #00FFB5
|
}
|
.container-info{width:460px;margin:15px auto 0;}
|
.item-info{width:40%;text-align: center;position:relative}
|
.img-size{width:48px;height:48px;}
|
.line-fg{height: 1px;opacity: 0.4;border: 1px solid #2a4a8e;}
|
.title-b{position: absolute;bottom:0;left:0;right:0;margin:0 auto;font-size:12px;}
|
.zhuangshi {position:absolute;right:2px;top:107px;}
|
.zhuangshitext {
|
position:absolute;bottom:22px;right:23px;transform: rotate(-45deg);
|
font-family: 'PingFangSC';
|
text-shadow: 0px 0px 20px #ffcc00;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
.counttable {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
top: 50px;
|
position: relative;
|
opacity: 0.8;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
.navitem{
|
display: flex;
|
color: #08141c;
|
padding-left: 10px;
|
height: 30px;
|
width: 100%;
|
color: #333;
|
font-weight: 600;
|
font-size: 15px;
|
line-height: 30px;
|
// background: linear-gradient(90deg,rgba(255,255,255,1), rgba(255,255,255,0.1));
|
color: #B7EAFF;
|
font-family: 'PingFangSC';
|
.navitemlist {
|
padding-left:10px;
|
line-height: 30px;
|
|
|
}
|
}
|
.navtable {
|
width: 100%;
|
padding-top: 5px;
|
}
|
|
|
}
|
.switch .el-switch__label {
|
position: absolute;
|
display: none;
|
}
|
|
.el-switch__core {
|
width: 45px !important;
|
border: 1px solid rgb(112 114 116) !important;
|
}
|
.switch .el-switch__label--right {
|
z-index: 1;
|
}
|
/*显示文字*/
|
.switch .el-switch__label.is-active {
|
display: block;
|
}
|
.switch .el-switch__label--right span{
|
padding-right: 9px;
|
color:#fff;
|
font-weight: 600;
|
}
|
.switch .el-switch__label--left {
|
z-index: 1;
|
}
|
.switch .el-switch__label--left span{
|
padding-left: 25px;
|
color:#fff;
|
font-weight: 600;
|
}
|
|
}
|
|
|
</style>
|
