<template>
|
<div class="v-map-zhandianinfo">
|
<div class="in-box">
|
<div class="header">
|
<div class="in-top-box flex ju-sb align-c">
|
<div class="header-title-i">站点数量：{{zdname}}</div>
|
<div class="flex">
|
<div class="flex align-c"></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="_station-box flex">
|
<span class="__name">站点</span>
|
<div class="flex">
|
<div v-for="(item, index) in form.stationNameList" :key="index">{{item}}{{index != form.stationNameList.length - 1 ? '/' : ''}}</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>
|
|
</div>
|
</div>
|
</template>
|
<script>
|
import gauge1 from '../../components/echart/gauge1.vue'
|
import { message } from 'ant-design-vue'
|
export default {
|
name: 'zhandiancircleinfo',
|
props: {
|
data1: {
|
type:Object,
|
default(){
|
return{}
|
}
|
}
|
},
|
data() {
|
return {
|
show:false,
|
zdname: "",
|
name: '',
|
form: {
|
realTimePassengerFlow: "1464",
|
stationAmount: 12,
|
yesterdayPassengerFlow: "1291"
|
}
|
}
|
},
|
components:{
|
gauge1
|
},
|
|
methods: {
|
getSelectDetailByName(params) {
|
if (params.substr(0,1) == ',') params = params.substr(1)
|
this.$axios.get(this.$Interface.mapResource.getZhandianDetailByIds, {
|
params: { stationIds: params },
|
}).then((res) => {
|
if(res.code == 0) {
|
if(res.data){
|
console.log(res.data, 'res.data');
|
|
this.form = res.data;
|
} else {
|
message.warning('获取数据为空!')
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
},
|
closediv(){
|
this.$emit("closediv","zhandiancircle")
|
}
|
},
|
mounted() {
|
},
|
watch: {
|
"$store.state.selAttr": function(newVal,oldVal){
|
if(newVal.visa && newVal.type == "zhandiancircle"){
|
|
console.log(newVal, 'this.name');
|
|
this.zdname = newVal.value.split(",").length
|
this.getSelectDetailByName(newVal.value)
|
}
|
}
|
|
}
|
}
|
</script>
|
<style lang="less">
|
.v-map-zhandianinfo {
|
.in-box{
|
width: 536px;
|
height: 200px;
|
opacity: 0.8;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
}
|
._station-box {
|
color: #69CCFF;
|
padding-bottom: 15px;
|
margin: 10px 20px;
|
border-bottom: 2px dashed rgba(42,72,138,0.8);
|
.__name {
|
color: #fff;
|
position: relative;
|
text-align: right;
|
padding: 0 10px;
|
&::before {
|
content: '';
|
display: block;
|
width: 3px;
|
height: 12px;
|
background: #fff;
|
position: absolute;
|
top: 4px;
|
left: 0px;
|
|
}
|
|
}
|
|
}
|
.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}
|
.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;}
|
.divtext {padding-left: 10px; text-align: left;}
|
.divnumber {font-family:'Digital';font-size: 18px;color:aqua}
|
|
}
|
|
|
</style>
|
