<template>
|
<div class="in-box">
|
<div class="header">
|
<div class="in-top-box flex ju-sb align-c">
|
<div class="header-title-i">{{czname}}</div>
|
<div class="flex">
|
<div class="flex align-c" @click="gochangzhan()">
|
<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_changzhanmianji.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.floorArea == "number" ? form.floorArea : '-'}}</div>
|
<div>场站面积(㎡)</div>
|
</div>
|
</div>
|
|
</div> -->
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_fachezhundianlv.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.leaveOnTimeRate == "number" ? form.leaveOnTimeRate : '-'}}%</div>
|
<div>发车准点率</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/png/icon_1.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.passengerFlow == "number" ? form.passengerFlow : '-'}}</div>
|
<div>场站客流(人次)</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="line-fg mt30 mb30"></div>
|
<div class="flex-y mt20">
|
<div class="itemtext">可提供服务<span>{{form.provideService}}</span></div>
|
<div class="itemtext">首末站线路<span>{{form.headEndLine}}</span></div>
|
<div class="itemtext">途经站线路<span>{{form.tripPassLine}}</span></div>
|
</div>
|
<div class="zhuangshi">
|
<div class="zhuangshitext">{{form.stationType}}</div>
|
<img class="zhuangshi-img-size" src="../../assets/map/shuangshi.png" alt="">
|
</div>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import { message } from 'ant-design-vue'
|
export default {
|
name: 'changzhaninfo',
|
props: {
|
data1: {
|
type:Object,
|
default(){
|
return{}
|
}
|
}
|
},
|
data() {
|
return {
|
show:false,
|
czname: "",
|
form: {
|
"stationId": "56",
|
"stationName": "金融岛（横琴）",
|
"stationType": "首末站",
|
"floorArea": null,
|
"leaveOnTimeRate": null,
|
"passengerFlow": 3,
|
"provideService": null,
|
"headEndLine": null,
|
"tripPassLine": "10路、3路、66路、68路、70路、B20路"
|
}
|
}
|
},
|
|
methods: {
|
getSelectDetailByName(params,id) {
|
this.$axios.get(this.$Interface.mapResource.getChangZhanDetailById, {
|
params: { stationId: id },
|
}).then((res) => {
|
if(res.code == 0) {
|
if(res.data){
|
this.form = res.data;
|
} else {
|
message.warning('获取数据为空!')
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
},
|
closediv(){
|
this.$emit("closediv","changzhan")
|
},
|
gochangzhan(){
|
this.$router.push({ path: '/branchOfficeResource', query: { sence: 2, stationName: this.czname }})
|
}
|
},
|
mounted() {
|
},
|
watch: {
|
"$store.state.selAttr": function(newVal,oldVal){
|
if(newVal.visa && newVal.type == "changzhan"){
|
this.czname = newVal.value
|
this.getSelectDetailByName(newVal.value, newVal.id)
|
}
|
}
|
|
}
|
}
|
</script>
|
<style scoped>
|
.in-box{
|
width: 536px;
|
min-height: 315px;
|
opacity: 0.8;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
}
|
.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:#09141C;font-weight: 600;font-size:16px;font-family: 'PingFangSC';}
|
.small-p{color:#00F09B;font-size:14px;}
|
.more-img-size{width:12px;height:12px}
|
.container-info{width:460px;margin:15px auto 0;}
|
.item-info{width:33%;text-align: center;position:relative}
|
.img-size{width:48px;height:48px;}
|
.divtext {padding-left: 10px; text-align: left;}
|
.divnumber {font-family:'Digital';font-size: 18px;color:#69CCFF}
|
.line-fg{height: 0px;opacity: 0.4;border-top: 2px dashed #2a4a8e;}
|
.itemtext{min-height:36px;font-size: 14px;font-family: 'PingFangSC, PingFangSC-Regular';font-weight: 400;text-align: left;color: #ffffff;}
|
.itemtext:before{content: ' ';display: inline-block;width: 10px;height: 12px;border-left:3px solid #ffffff;position:relative;top:2px;}
|
.itemtext span{padding-left: 20px;color: #69CCFF; word-wrap: break-word;display:-moz-inline-box; display:inline-block; width:320px;}
|
.zhuangshi {position:absolute;right:2px;top:193px;}
|
.zhuangshitext {
|
position:absolute;bottom:28px;right:36px;transform: rotate(-45deg);
|
font-family: 'PingFangSC';
|
text-shadow: 0px 0px 20px #ffcc00;
|
font-size: 16px;
|
font-weight: 500;
|
|
}
|
</style>
|
