|
@@ -1,407 +1,399 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <ax-body>
|
|
|
|
|
- <view class="site-body">
|
|
|
|
|
- <view class="top-banner">
|
|
|
|
|
- <swiper class="banner-swiper" circular :autoplay="true" interval="3000" duration="500" @change="swiperChange">
|
|
|
|
|
- <swiper-item class="banner-swiper-item" v-for="item in 4">
|
|
|
|
|
- <image class="swiper-item-image" src="/static/img/share.jpg" mode=""></image>
|
|
|
|
|
- </swiper-item>
|
|
|
|
|
- </swiper>
|
|
|
|
|
- <view class="swiper-current">{{bannerIndex}}/5</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="site-content">
|
|
|
|
|
- <view class="top-site-info">
|
|
|
|
|
- <view class="site-title">{{stationInfo.name}}</view>
|
|
|
|
|
- <view class="site-text">
|
|
|
|
|
- <image src="@/static/img/site-icon03.png" class="icon"></image>
|
|
|
|
|
- <view class="item-text">充电减免2小时停车费,超出部分按每小时3元计算</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="site-location">
|
|
|
|
|
- <view class="location-left">
|
|
|
|
|
- <view class="left-km">距离您{{stationInfo.params.rangeShow}}</view>
|
|
|
|
|
- <view class="left-address">{{stationInfo.addr}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="location-rihgt" @click="openLocation()">
|
|
|
|
|
- <image src="@/static/img/locate2.svg" class="right-icon"></image>
|
|
|
|
|
- <view class="right-nav">导航</view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <ax-body :blank="0">
|
|
|
|
|
+ <view class="site-body">
|
|
|
|
|
+ <view class="top-banner">
|
|
|
|
|
+ <swiper class="banner-swiper" circular :autoplay="true" interval="3000" duration="500"
|
|
|
|
|
+ @change="swiperChange">
|
|
|
|
|
+ <swiper-item class="banner-swiper-item" v-for="item in stationDetail.pictures">
|
|
|
|
|
+ <image class="swiper-item-image" :src="item" mode=""></image>
|
|
|
|
|
+ </swiper-item>
|
|
|
|
|
+ </swiper>
|
|
|
|
|
+ <view class="swiper-current">{{ bannerIndex }}/{{ stationDetail.pictures.length }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="site-cost-info">
|
|
|
|
|
- <view class="cost-info-title">
|
|
|
|
|
- <view class="title-name">费用信息</view>
|
|
|
|
|
- <view class="check-info" @click="toPriceAll()">
|
|
|
|
|
- <text>查看全部</text>
|
|
|
|
|
- <text class="ax ax-iconline i-arrow-right icon"></text>
|
|
|
|
|
|
|
+ <view class="site-content">
|
|
|
|
|
+ <view class="top-site-info">
|
|
|
|
|
+ <view class="site-title">{{ stationDetail.stationName }}</view>
|
|
|
|
|
+ <view class="site-text">
|
|
|
|
|
+ <image src="@/static/img/site-icon03.png" class="icon"></image>
|
|
|
|
|
+ <view class="item-text">{{ stationDetail.tips }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="cost-price-info" v-if="user_info.firmId===null||$app.storage.get('USER_INFO').firmType===0">
|
|
|
|
|
- <view class="cost-title">
|
|
|
|
|
- <view class="title-left">当前价</view>
|
|
|
|
|
- <view class="title-right">惊喜价</view>
|
|
|
|
|
|
|
+ <view class="site-location">
|
|
|
|
|
+ <view class="location-left">
|
|
|
|
|
+ <view class="left-km">距离您{{ stationDetail.distance }}km</view>
|
|
|
|
|
+ <view class="left-address">{{ stationDetail.address }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="cost-price">
|
|
|
|
|
- <text class="symbol">¥</text>
|
|
|
|
|
- <text>{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(2):"0.0000"}}</text>
|
|
|
|
|
- <text class="cost-price-unit">元/度</text>
|
|
|
|
|
|
|
+ <view class="location-rihgt" @click="openLocation()">
|
|
|
|
|
+ <image src="@/static/img/locate2.svg" class="right-icon"></image>
|
|
|
|
|
+ <view class="right-nav">导航</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="time-cost-price">当前时段:</view>
|
|
|
|
|
- <view class="time-cost-number">{{stationInfo.params.priceShow}}</view>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="firm-price-info-box" v-else>
|
|
|
|
|
- <view class="current-price-info">
|
|
|
|
|
- <view class="current-price-title">当前价</view>
|
|
|
|
|
- <view class="current-price">
|
|
|
|
|
- <view class="current-price-text"><text class="operation-symbol">¥</text>
|
|
|
|
|
- <text>{{parseFloat(nowPriceTime.firmPrice).toFixed(2)}}</text></view>
|
|
|
|
|
- <view class="current-price-unit">元/度</view>
|
|
|
|
|
|
|
+ <view class="site-cost-info">
|
|
|
|
|
+ <view class="cost-info-title">
|
|
|
|
|
+ <view class="title-name">费用信息</view>
|
|
|
|
|
+ <view class="check-info" @click="toPriceAll()">
|
|
|
|
|
+ <text>查看全部</text>
|
|
|
|
|
+ <text class="ax ax-iconline i-arrow-right icon"></text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="time-current-price">当前时段:</view>
|
|
|
|
|
- <view class="time-current-number">{{stationInfo.params.priceShow}}</view>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="firm-price-info">
|
|
|
|
|
- <view class="firm-price-title">
|
|
|
|
|
- <view class="title-text">企业专享价</view>
|
|
|
|
|
- <view class="tags-price">特惠价</view>
|
|
|
|
|
|
|
+ <view class="cost-price-info" v-if="!stationDetail.firmUser">
|
|
|
|
|
+ <view class="cost-title">
|
|
|
|
|
+ <view class="title-left">当前价</view>
|
|
|
|
|
+ <view class="title-right">惊喜价</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="firm-price-box">
|
|
|
|
|
- <view class="firm-price-text">{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(4):"0.0000"}}</view>
|
|
|
|
|
- <view class="firm-price-unit">元/度</view>
|
|
|
|
|
|
|
+ <view class="cost-price">
|
|
|
|
|
+ <text style="color: #FF6464;font-size: 48rpx;font-weight: 800;">{{
|
|
|
|
|
+ stationDetail.currentPrice
|
|
|
|
|
+ }}</text>
|
|
|
|
|
+ <text class="cost-price-unit">元/度</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="current-pay-price-box">
|
|
|
|
|
- <view class="pay-price">
|
|
|
|
|
- <view class="firm-old-price">{{parseFloat(nowPriceTime.firmPrice).toFixed(2)}}元/度</view>
|
|
|
|
|
- <view class="discount-price">本单预计省9元</view>
|
|
|
|
|
|
|
+ <view class="time-cost-price">当前时段:</view>
|
|
|
|
|
+ <view class="time-cost-number">{{ stationDetail.currentPeriod }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="firm-price-info-box" v-else>
|
|
|
|
|
+ <view class="current-price-info">
|
|
|
|
|
+ <view class="current-price-title">当前价</view>
|
|
|
|
|
+ <view class="current-price">
|
|
|
|
|
+ <view class="current-price-text"><text class="operation-symbol">¥</text>
|
|
|
|
|
+ <text>{{ stationDetail.currentPrice }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="current-price-unit">元/度</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="time-current-price">当前时段:</view>
|
|
|
|
|
+ <view class="time-current-number">{{ stationDetail.currentPeriod }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="firm-price-info">
|
|
|
|
|
+ <view class="firm-price-title">
|
|
|
|
|
+ <view class="title-text">企业专享价</view>
|
|
|
|
|
+ <view class="tags-price">特惠价</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="firm-price-box">
|
|
|
|
|
+ <view class="firm-price-text">
|
|
|
|
|
+ {{ stationDetail.enterprisePrice || '--' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="firm-price-unit">元/度</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="current-pay-price-box">
|
|
|
|
|
+ <view class="pay-price">
|
|
|
|
|
+ <view class="firm-old-price">{{ stationDetail.currentPrice }}元/度
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <view class="discount-price">本单预计省9元</view> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image class="pay-price-icon" src="/static/img/firm-price.png" mode=""></image>
|
|
|
</view>
|
|
</view>
|
|
|
- <image class="pay-price-icon" src="/static/img/firm-price.png" mode=""></image>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- <view class="stopcar-tips">
|
|
|
|
|
- <image class="stopcar-tips-icon" src="@/static/img/site-icon03.png"></image>
|
|
|
|
|
- <view class="stopcar-tips-text">
|
|
|
|
|
- <view class="tips-text-title">停车参考</view>
|
|
|
|
|
- <view class="tips-text-mini">充电减免2小时停车费</view>
|
|
|
|
|
|
|
+ <view class="stopcar-tips">
|
|
|
|
|
+ <image class="stopcar-tips-icon" src="@/static/img/site-icon03.png"></image>
|
|
|
|
|
+ <view class="stopcar-tips-text">
|
|
|
|
|
+ <view class="tips-text-title">停车参考</view>
|
|
|
|
|
+ <view class="tips-text-mini">充电减免2小时停车费</view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- <view class="site-list-card">
|
|
|
|
|
- <view class="cost-info-title">
|
|
|
|
|
- <view class="title-name">充电终端</view>
|
|
|
|
|
- <view class="check-info" @click="toDeiceAll()">
|
|
|
|
|
- <text>查看全部</text>
|
|
|
|
|
- <text class="ax ax-iconline i-arrow-right icon"></text>
|
|
|
|
|
|
|
+ <view class="site-list-card">
|
|
|
|
|
+ <view class="cost-info-title">
|
|
|
|
|
+ <view class="title-name">充电终端</view>
|
|
|
|
|
+ <view class="check-info" @click="toDeiceAll()">
|
|
|
|
|
+ <text>查看全部</text>
|
|
|
|
|
+ <text class="ax ax-iconline i-arrow-right icon"></text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- <view class="app-flex site-select-tab">
|
|
|
|
|
- <view class="select-item" v-for="(item,index) in siteSortList"
|
|
|
|
|
- @click="selectItem(index)"
|
|
|
|
|
- :class="{selectItemActive:siteSelectIndex==index}">
|
|
|
|
|
- {{item}}
|
|
|
|
|
|
|
+ <view class="app-flex site-select-tab">
|
|
|
|
|
+ <view class="select-item" v-for="(item, index) in siteSortList" @click="selectItem(item, index)"
|
|
|
|
|
+ :class="{ selectItemActive: siteSelectIndex == index }">
|
|
|
|
|
+ {{ item.text }}({{ item.total }})
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- <view class="site-list-box">
|
|
|
|
|
- <view v-for="(item,index) in terminals" :key="index" @click="goTerminal(item)" class="terminal-item">
|
|
|
|
|
- <view class="state" :class="[getSatesObj(item).color]">
|
|
|
|
|
- <view class="cake">
|
|
|
|
|
- <image src="@/static/img/site-icon01.svg" class="icon"></image>
|
|
|
|
|
- <view class="name">{{getSatesObj(item).name}}</view>
|
|
|
|
|
|
|
+ <view class="site-list-box">
|
|
|
|
|
+ <view v-for="(item, index) in filteredConnectorList" :key="index" @click="goTerminal(item)"
|
|
|
|
|
+ class="terminal-item">
|
|
|
|
|
+ <view class="state" :class="[getSatesObj(item).color]">
|
|
|
|
|
+ <view class="cake">
|
|
|
|
|
+ <image src="@/static/img/site-icon01.svg" class="icon"></image>
|
|
|
|
|
+ <view class="name">{{ item.statusName }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info">
|
|
|
|
|
+ <view class="name">{{ item.connectorName }}</view>
|
|
|
|
|
+ <view class="subinfo">电类分类:{{ item.equipmentType }}</view>
|
|
|
|
|
+ <view class="subinfo">终端编号:{{ item.connectorCode }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="info">
|
|
|
|
|
- <view class="name">{{item.deviceName}}</view>
|
|
|
|
|
- <view class="subinfo">电类分类:{{getdeviceTypeName(item.eType)}}</view>
|
|
|
|
|
- <view class="subinfo">终端编号:{{item.deviceNo}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="site-list-card">
|
|
|
|
|
- <view class="cost-info-title">
|
|
|
|
|
- <view class="title-name">电站信息</view>
|
|
|
|
|
- <view class="check-info">
|
|
|
|
|
- <text>查看全部</text>
|
|
|
|
|
- <text class="ax ax-iconline i-arrow-right icon"></text>
|
|
|
|
|
|
|
+ <view v-if="filteredConnectorList.length === 0" class="not-data">暂无设备</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="site-detail-line"></view>
|
|
|
|
|
- <view class="site-detail-info">
|
|
|
|
|
- <view class="detail-info-item">
|
|
|
|
|
- <view class="left-item">营业时间</view>
|
|
|
|
|
- <view class="right-item">{{busineHours.busineHours}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="detail-info-item">
|
|
|
|
|
- <view class="left-item">服务提供</view>
|
|
|
|
|
- <view class="right-item">{{busineHours.entInfo.name}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="detail-info-item">
|
|
|
|
|
- <view class="left-item">发表提供</view>
|
|
|
|
|
- <view class="right-item">{{busineHours.entInfo.name}}</view>
|
|
|
|
|
|
|
+ <view class="site-list-card">
|
|
|
|
|
+ <view class="cost-info-title">
|
|
|
|
|
+ <view class="title-name">电站信息</view>
|
|
|
|
|
+ <view class="check-info">
|
|
|
|
|
+ <text>查看全部</text>
|
|
|
|
|
+ <text class="ax ax-iconline i-arrow-right icon"></text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="detail-info-item">
|
|
|
|
|
- <view class="left-item">客服热线</view>
|
|
|
|
|
- <view class="right-item">{{busineHours.entInfo.tel}}</view>
|
|
|
|
|
|
|
+ <view class="site-detail-line"></view>
|
|
|
|
|
+ <view class="site-detail-info">
|
|
|
|
|
+ <view class="detail-info-item">
|
|
|
|
|
+ <view class="left-item">营业时间</view>
|
|
|
|
|
+ <view class="right-item">{{ stationDetail.businessHours || '--' }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail-info-item">
|
|
|
|
|
+ <view class="left-item">服务提供</view>
|
|
|
|
|
+ <view class="right-item">{{ stationDetail.serviceProvider }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail-info-item">
|
|
|
|
|
+ <view class="left-item">发票提供</view>
|
|
|
|
|
+ <view class="right-item">{{ stationDetail.serviceProvider }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail-info-item">
|
|
|
|
|
+ <view class="left-item">客服热线</view>
|
|
|
|
|
+ <view class="right-item">{{ stationDetail.customerServiceHotline }}</view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view style="height: 200rpx;"></view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- <!-- 扫码充电 -->
|
|
|
|
|
- <view class="footer">
|
|
|
|
|
- <view class="bg5">
|
|
|
|
|
- <view class="text">
|
|
|
|
|
- <view>中数电动</view>
|
|
|
|
|
- <view>特惠价</view>
|
|
|
|
|
|
|
+ <!-- 扫码充电 -->
|
|
|
|
|
+ <view class="footer">
|
|
|
|
|
+ <view class="bg5">
|
|
|
|
|
+ <view class="text">
|
|
|
|
|
+ <view>中数电动</view>
|
|
|
|
|
+ <view>特惠价</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image src="@/static/img/site-bg05.svg" class="bg" mode="heightFix"></image>
|
|
|
</view>
|
|
</view>
|
|
|
- <image src="@/static/img/site-bg05.svg" class="bg" mode="heightFix"></image>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="price-wrap">
|
|
|
|
|
- <view class="price">
|
|
|
|
|
- <text class="symbol">¥</text>
|
|
|
|
|
- <!-- v-if="nowPriceTime.firmPrice===null" -->
|
|
|
|
|
- <text v-if="nowPriceTime.firmPrice===null||$app.storage.get('USER_INFO').firmType===0">{{nowPriceTime.price?nowPriceTime.price.toFixed(4):"0.0000"}}</text>
|
|
|
|
|
- <text v-else>{{parseFloat(nowPriceTime.firmPrice).toFixed(4)}}</text>
|
|
|
|
|
|
|
+ <view class="price-wrap">
|
|
|
|
|
+ <view class="price">
|
|
|
|
|
+ <text class="symbol">¥</text>
|
|
|
|
|
+ <!-- v-if="nowPriceTime.firmPrice===null" -->
|
|
|
|
|
+ <text v-if="!stationDetail.firmUser">{{ stationDetail.currentPrice }}</text>
|
|
|
|
|
+ <text v-else>{{ stationDetail.enterprisePrice || '--' }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="unit">元/度</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="unit">{{nowPriceTime.unit}}</view>
|
|
|
|
|
|
|
+ <view @click="sacn()" class="scan">扫码充电</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view @click="sacn()" class="scan">扫码充电</view>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
</ax-body>
|
|
</ax-body>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- export default {
|
|
|
|
|
- onLoad: function (option) {
|
|
|
|
|
- console.log(option); //打印出上个页面传递的参数。
|
|
|
|
|
- this.stationInfo = JSON.parse(option.item);
|
|
|
|
|
- if(this.stationInfo.pictures){
|
|
|
|
|
- //添加站点图片
|
|
|
|
|
- var imgArr = this.stationInfo.pictures.split(",");
|
|
|
|
|
- if(imgArr.length > 0){
|
|
|
|
|
- this.tops = imgArr;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- this.getStationsInfo();
|
|
|
|
|
- this.getConfigStationInfo();
|
|
|
|
|
|
|
+export default {
|
|
|
|
|
+ onLoad: function (option) {
|
|
|
|
|
+ console.log(option); //打印出上个页面传递的参数。
|
|
|
|
|
+ this.stationInfo = JSON.parse(option.item);
|
|
|
|
|
+ if (this.stationInfo.pictures) {
|
|
|
|
|
+ //添加站点图片
|
|
|
|
|
+ var imgArr = this.stationInfo.pictures.split(",");
|
|
|
|
|
+ if (imgArr.length > 0) {
|
|
|
|
|
+ this.tops = imgArr;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ this.getStationsInfo();
|
|
|
|
|
+ this.getConfigStationInfo();
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.$app.act.selectorQuery(this, '#footer').then(res => {
|
|
|
|
|
+ const win = uni.getWindowInfo();
|
|
|
|
|
+ const tHight = win.windowWidth * 9 / 16;
|
|
|
|
|
+ this.mainHeight = win.windowHeight - tHight - res.height + 10;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ user_info: this.$app.storage.get('USER_INFO'),
|
|
|
|
|
+ mainHeight: 0,
|
|
|
|
|
+ tops: ["../../static/img/$temp-site.png"],
|
|
|
|
|
+ another: false,
|
|
|
|
|
+ terminals: [],
|
|
|
|
|
+ entInfo: {
|
|
|
|
|
+ title: '服务提供',
|
|
|
|
|
+ name: '华能贵州盘州市风电有限责任公司',
|
|
|
|
|
+ code: '915205555155625655',
|
|
|
|
|
+ tel: '0851-8815158',
|
|
|
|
|
+ businessLicenceUrl: "/static/img/$temp-site01.jpg"
|
|
|
|
|
+ },
|
|
|
|
|
+ stationInfo: "",//站点信息
|
|
|
|
|
+ deviceList: [],//该站点桩列表
|
|
|
|
|
+ timePricesList: [],//费用时段列表
|
|
|
|
|
+ nowPriceTime: {},//当前费用时段信息
|
|
|
|
|
+ service: {
|
|
|
|
|
+ tel: '400-0000-0000',
|
|
|
|
|
+ work: '09:00 至 18:00'
|
|
|
|
|
+ },
|
|
|
|
|
+ busineHours: "",//营业时间
|
|
|
|
|
+ bannerIndex: 1,//轮播下标
|
|
|
|
|
+ stationDetail: {},
|
|
|
|
|
+ siteSelectIndex: 0,
|
|
|
|
|
+ siteSortList: [{
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ text: '空闲',
|
|
|
|
|
+ status: 1
|
|
|
|
|
+ }, {
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ text: '占用',
|
|
|
|
|
+ status: 2
|
|
|
|
|
+ }, {
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ text: '离线',
|
|
|
|
|
+ status: 0
|
|
|
|
|
+ }],
|
|
|
|
|
+ filteredConnectorList: [],
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ swiperChange(e) {
|
|
|
|
|
+ this.bannerIndex = e.detail.current + 1
|
|
|
},
|
|
},
|
|
|
- mounted() {
|
|
|
|
|
- this.$app.act.selectorQuery(this,'#footer').then(res=>{
|
|
|
|
|
- const win = uni.getWindowInfo();
|
|
|
|
|
- const tHight = win.windowWidth * 9 /16;
|
|
|
|
|
- this.mainHeight = win.windowHeight - tHight - res.height + 10;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ getStationsInfo() {
|
|
|
|
|
+ let location = this.$app.storage.get('USER_LOCATION')
|
|
|
|
|
+ this.$api.base("get", "/applet/v1/station/detail", {
|
|
|
|
|
+ stationId: parseInt(this.stationInfo.stationId),
|
|
|
|
|
+ longitude: location.split(",")[0],
|
|
|
|
|
+ latitude: location.split(",")[1]
|
|
|
|
|
+ }, {}).then(res => {
|
|
|
|
|
+ res.data.pictures = JSON.parse(res.data.pictures)
|
|
|
|
|
+ const countMapping = {
|
|
|
|
|
+ '空闲': res.data.idleCount,
|
|
|
|
|
+ '占用': res.data.occupiedCount,
|
|
|
|
|
+ '离线': res.data.offlineCount
|
|
|
|
|
+ };
|
|
|
|
|
+ this.siteSortList.forEach(item => {
|
|
|
|
|
+ item.total = countMapping[item.text] || 0;
|
|
|
|
|
+ });
|
|
|
|
|
+ this.stationDetail = res.data
|
|
|
|
|
+ // 初始化默认显示空闲状态的前3个设备
|
|
|
|
|
+ this.siteSelectIndex = 0;
|
|
|
|
|
+ this.filteredConnectorList = this.stationDetail.connectorList
|
|
|
|
|
+ .filter(connector => connector.status == 1) // 空闲状态
|
|
|
|
|
+ .slice(0, 3);
|
|
|
|
|
+ // this.deviceList = res.devices;
|
|
|
|
|
+ // this.timePricesList = res.prices;
|
|
|
|
|
+ // this.nowPriceTime = res.nowPriceTime;
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ selectItem(e, i) {
|
|
|
|
|
+ this.siteSelectIndex = i;
|
|
|
|
|
+ // 根据选择的状态过滤 connectorList
|
|
|
|
|
+ if (e.status === 1) { // 空闲
|
|
|
|
|
+ this.filteredConnectorList = this.stationDetail.connectorList.slice(0, 3).filter(connector => connector.status == 1);
|
|
|
|
|
+ } else if (e.status === 2) { // 占用
|
|
|
|
|
+ this.filteredConnectorList = this.stationDetail.connectorList.slice(0, 3).filter(connector =>
|
|
|
|
|
+ connector.status == 2 || connector.status == 3 || connector.status == 4
|
|
|
|
|
+ );
|
|
|
|
|
+ } else if (e.status === 0) { // 离线
|
|
|
|
|
+ this.filteredConnectorList = this.stationDetail.connectorList.slice(0, 3).filter(connector => connector.status == 0);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ getSatesObj(item) {
|
|
|
|
|
+ //{name:'离线',color:'grey'},{name:'空闲',color:'green'},{name:'占用',color:'blue'}
|
|
|
|
|
+ var obj = {};
|
|
|
|
|
+ if (item.status == 2) {
|
|
|
|
|
+ obj = { color: 'blue' };
|
|
|
|
|
+ } else if (item.status == 0) {
|
|
|
|
|
+ obj = { color: 'grey' };
|
|
|
|
|
+ } else if (item.status == 1) {
|
|
|
|
|
+ obj = { color: 'green' };
|
|
|
|
|
+ }
|
|
|
|
|
+ return obj;
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ //获取配置文件信息
|
|
|
|
|
+ getConfigStationInfo() {
|
|
|
|
|
+ this.$api.static(this.$config.url.configUrl + "stationConfi.json").then(res => {
|
|
|
|
|
+ console.log("获取的配置文件信息:", res.busineHours);
|
|
|
|
|
+ this.entInfo = res.entInfo;
|
|
|
|
|
+ this.service = res.service;
|
|
|
|
|
+ this.busineHours = res;
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 拨打电话
|
|
|
|
|
+ callPhone(phone) {
|
|
|
|
|
+ this.$app.act.callPhone(phone);
|
|
|
|
|
+ },
|
|
|
|
|
+ // 打开客服
|
|
|
|
|
+ openCustomerService() {
|
|
|
|
|
+ this.$refs.service.open();
|
|
|
|
|
+ },
|
|
|
|
|
+ // 打开服务提供
|
|
|
|
|
+ openEnt_Serve() {
|
|
|
|
|
+ this.entInfo.title = '服务提供';
|
|
|
|
|
+ this.$refs.entInfo.open();
|
|
|
|
|
+ },
|
|
|
|
|
+ // 打开发票提供
|
|
|
|
|
+ openEnt_Invoicing() {
|
|
|
|
|
+ this.entInfo.title = '发票提供';
|
|
|
|
|
+ this.$refs.entInfo.open();
|
|
|
|
|
+ },
|
|
|
|
|
+ // 关闭企业弹窗
|
|
|
|
|
+ closeEnt() {
|
|
|
|
|
+ this.$refs.entInfo.close();
|
|
|
|
|
+ },
|
|
|
|
|
+ // 关闭服务弹窗
|
|
|
|
|
+ closeService() {
|
|
|
|
|
+ this.$refs.service.close();
|
|
|
|
|
+ },
|
|
|
|
|
+ // 打开地图
|
|
|
|
|
+ openLocation() {
|
|
|
|
|
+ uni.openLocation({
|
|
|
|
|
+ latitude: Number(this.stationInfo.lat),
|
|
|
|
|
+ longitude: Number(this.stationInfo.lng),
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- user_info:this.$app.storage.get('USER_INFO'),
|
|
|
|
|
- mainHeight: 0,
|
|
|
|
|
- tops:["../../static/img/$temp-site.png"],
|
|
|
|
|
- another: false,
|
|
|
|
|
- terminals: [],
|
|
|
|
|
- entInfo:{
|
|
|
|
|
- title:'服务提供',
|
|
|
|
|
- name: '华能贵州盘州市风电有限责任公司',
|
|
|
|
|
- code: '915205555155625655',
|
|
|
|
|
- tel: '0851-8815158',
|
|
|
|
|
- businessLicenceUrl:"/static/img/$temp-site01.jpg"
|
|
|
|
|
- },
|
|
|
|
|
- stationInfo : "",//站点信息
|
|
|
|
|
- deviceList: [],//该站点桩列表
|
|
|
|
|
- timePricesList: [],//费用时段列表
|
|
|
|
|
- nowPriceTime: {},//当前费用时段信息
|
|
|
|
|
- service:{
|
|
|
|
|
- tel: '400-0000-0000',
|
|
|
|
|
- work: '09:00 至 18:00'
|
|
|
|
|
- },
|
|
|
|
|
- busineHours:"",//营业时间
|
|
|
|
|
- bannerIndex:1,//轮播下标
|
|
|
|
|
|
|
+ // 跳转充电终端
|
|
|
|
|
+ goTerminal(item) {
|
|
|
|
|
+ //设备状态 0:离网1:空闲2:占用(未充电)3:占用(充电中)4:占用(预约锁定)255:故障
|
|
|
|
|
+ if (item.deviceStatus == 0 || item.deviceStatus == 255) {
|
|
|
|
|
+ return;
|
|
|
}
|
|
}
|
|
|
|
|
+ this.$app.url.goto('/pages/terminal/terminal?deviceId=' + item.id + "&deviceStatus=" + item.deviceStatus);
|
|
|
},
|
|
},
|
|
|
- methods: {
|
|
|
|
|
- swiperChange(e){
|
|
|
|
|
- this.bannerIndex=e.detail.current+1
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getStationsInfo(){
|
|
|
|
|
- this.$api.base("post","/chargeApi/getStationsInfoAndUpdateDecice",{"stationId":this.stationInfo.id},{}).then(res=>{
|
|
|
|
|
- this.deviceList = res.devices;
|
|
|
|
|
- this.timePricesList = res.prices;
|
|
|
|
|
- this.nowPriceTime = res.nowPriceTime;
|
|
|
|
|
- //只显示三个设备信息
|
|
|
|
|
- for(var i = 0; i < this.deviceList.length; i++){
|
|
|
|
|
- this.terminals.push(this.deviceList[i]);
|
|
|
|
|
- if(i == 2){
|
|
|
|
|
- break;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- //获取桩状态的数量
|
|
|
|
|
- getStatusNum(status){
|
|
|
|
|
- var num = 0;
|
|
|
|
|
- //设备状态 0:离网1:空闲2:占用(未充电)3:占用(充电中)4:占用(预约锁定)255:故障
|
|
|
|
|
- for(var i = 0; i < this.deviceList.length; i++){
|
|
|
|
|
- var device = this.deviceList[i];
|
|
|
|
|
- if(status == 2){
|
|
|
|
|
- if(device.deviceStatus == 2 || device.deviceStatus == 3 || device.deviceStatus == 4){
|
|
|
|
|
- num++;
|
|
|
|
|
- continue;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- if(device.deviceStatus == status){
|
|
|
|
|
- num++;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- return num;
|
|
|
|
|
- },
|
|
|
|
|
- getSatesObj(item){
|
|
|
|
|
- //{name:'离线',color:'grey'},{name:'空闲',color:'green'},{name:'占用',color:'blue'}
|
|
|
|
|
- var obj = {};
|
|
|
|
|
- if(item.deviceStatus == 2 || item.deviceStatus == 4){
|
|
|
|
|
- obj = {name:'占用',color:'blue'};
|
|
|
|
|
- }else if(item.deviceStatus == 3){
|
|
|
|
|
- obj = {name:'充电中',color:'orange'};
|
|
|
|
|
- }else if(item.deviceStatus == 0){
|
|
|
|
|
- obj = {name:'离线',color:'grey'};
|
|
|
|
|
- }else if(item.deviceStatus == 1){
|
|
|
|
|
- obj = {name:'空闲',color:'green'};
|
|
|
|
|
- }else if(item.deviceStatus == 255){
|
|
|
|
|
- obj = {name:'故障',color:'err'};
|
|
|
|
|
- }
|
|
|
|
|
- return obj;
|
|
|
|
|
- },
|
|
|
|
|
- //获取充电桩设备类型
|
|
|
|
|
- getdeviceTypeName(type){
|
|
|
|
|
- //电类型 1:直流设备;2:交流设备3:交直流一体设备;4:无线设备;5:其他
|
|
|
|
|
- var str = "";
|
|
|
|
|
- switch(type){
|
|
|
|
|
- case "1":
|
|
|
|
|
- str = "直流设备";
|
|
|
|
|
- break
|
|
|
|
|
- case "2":
|
|
|
|
|
- str = "交流设备";
|
|
|
|
|
- break
|
|
|
|
|
- case "3":
|
|
|
|
|
- str = "交直流一体设备";
|
|
|
|
|
- break
|
|
|
|
|
- case "4":
|
|
|
|
|
- str = "无线设备";
|
|
|
|
|
- break
|
|
|
|
|
- case "5":
|
|
|
|
|
- str = "其他";
|
|
|
|
|
- break
|
|
|
|
|
- }
|
|
|
|
|
- return str;
|
|
|
|
|
- },
|
|
|
|
|
- //映射 峰 平 谷
|
|
|
|
|
- getPriceLable(type){
|
|
|
|
|
- //时间类型 1 谷 2 平 3 峰
|
|
|
|
|
- var str = "";
|
|
|
|
|
- switch (type){
|
|
|
|
|
- case 1:
|
|
|
|
|
- str = "谷";
|
|
|
|
|
- break;
|
|
|
|
|
- case 2:
|
|
|
|
|
- str = "平";
|
|
|
|
|
- break;
|
|
|
|
|
- case 3:
|
|
|
|
|
- str = "峰";
|
|
|
|
|
- break;
|
|
|
|
|
- }
|
|
|
|
|
- return str;
|
|
|
|
|
- },
|
|
|
|
|
- //获取配置文件信息
|
|
|
|
|
- getConfigStationInfo(){
|
|
|
|
|
- this.$api.static(this.$config.url.configUrl+"stationConfi.json").then(res=>{
|
|
|
|
|
- console.log("获取的配置文件信息:",res.busineHours);
|
|
|
|
|
- this.entInfo = res.entInfo;
|
|
|
|
|
- this.service = res.service;
|
|
|
|
|
- this.busineHours = res;
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- // 拨打电话
|
|
|
|
|
- callPhone(phone){
|
|
|
|
|
- this.$app.act.callPhone(phone);
|
|
|
|
|
- },
|
|
|
|
|
- // 打开客服
|
|
|
|
|
- openCustomerService(){
|
|
|
|
|
- this.$refs.service.open();
|
|
|
|
|
- },
|
|
|
|
|
- // 打开服务提供
|
|
|
|
|
- openEnt_Serve(){
|
|
|
|
|
- this.entInfo.title = '服务提供';
|
|
|
|
|
- this.$refs.entInfo.open();
|
|
|
|
|
- },
|
|
|
|
|
- // 打开发票提供
|
|
|
|
|
- openEnt_Invoicing(){
|
|
|
|
|
- this.entInfo.title = '发票提供';
|
|
|
|
|
- this.$refs.entInfo.open();
|
|
|
|
|
- },
|
|
|
|
|
- // 关闭企业弹窗
|
|
|
|
|
- closeEnt(){
|
|
|
|
|
- this.$refs.entInfo.close();
|
|
|
|
|
- },
|
|
|
|
|
- // 关闭服务弹窗
|
|
|
|
|
- closeService(){
|
|
|
|
|
- this.$refs.service.close();
|
|
|
|
|
- },
|
|
|
|
|
- // 打开地图
|
|
|
|
|
- openLocation(){
|
|
|
|
|
- uni.openLocation({
|
|
|
|
|
- latitude: Number(this.stationInfo.lat),
|
|
|
|
|
- longitude: Number(this.stationInfo.lng),
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- // 跳转充电终端
|
|
|
|
|
- goTerminal(item){
|
|
|
|
|
- //设备状态 0:离网1:空闲2:占用(未充电)3:占用(充电中)4:占用(预约锁定)255:故障
|
|
|
|
|
- if(item.deviceStatus == 0 || item.deviceStatus == 255 ){
|
|
|
|
|
|
|
+ //去查看全部电站
|
|
|
|
|
+ toDeiceAll() {
|
|
|
|
|
+ var strList = JSON.stringify(this.timePricesList);
|
|
|
|
|
+ var currPriceId = this.nowPriceTime.id
|
|
|
|
|
+ this.$app.url.goto('/pages/site-more/site-more?stationId=' + this.stationInfo.id)
|
|
|
|
|
+ },
|
|
|
|
|
+ //去查看全部电价
|
|
|
|
|
+ toPriceAll() {
|
|
|
|
|
+ this.$app.url.goto('/pages/site-more/site-more?show=1&stationId=' + this.stationInfo.id)
|
|
|
|
|
+ },
|
|
|
|
|
+ //扫一扫
|
|
|
|
|
+ sacn() {
|
|
|
|
|
+ this.$app.act.scan().then(res => {
|
|
|
|
|
+ console.log(res);
|
|
|
|
|
+ var paramObj = this.getUrlParams(res.result);
|
|
|
|
|
+ if (!paramObj || !paramObj.connectorCode) {
|
|
|
|
|
+ this.$app.popup.alert("二维码不正确。", "温馨提示!");
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- this.$app.url.goto('/pages/terminal/terminal?deviceId='+item.id+"&deviceStatus="+item.deviceStatus);
|
|
|
|
|
- },
|
|
|
|
|
- //去查看全部电站
|
|
|
|
|
- toDeiceAll(){
|
|
|
|
|
- var strList = JSON.stringify(this.timePricesList);
|
|
|
|
|
- var currPriceId = this.nowPriceTime.id
|
|
|
|
|
- this.$app.url.goto('/pages/site-more/site-more?stationId='+this.stationInfo.id)
|
|
|
|
|
- },
|
|
|
|
|
- //去查看全部电价
|
|
|
|
|
- toPriceAll(){
|
|
|
|
|
- this.$app.url.goto('/pages/site-more/site-more?show=1&stationId='+this.stationInfo.id)
|
|
|
|
|
- },
|
|
|
|
|
- //扫一扫
|
|
|
|
|
- sacn(){
|
|
|
|
|
- this.$app.act.scan().then(res=>{
|
|
|
|
|
- console.log(res);
|
|
|
|
|
- var paramObj = this.getUrlParams(res.result);
|
|
|
|
|
- if(!paramObj || !paramObj.connectorCode){
|
|
|
|
|
- this.$app.popup.alert("二维码不正确。","温馨提示!");
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- this.getDeviceInfo(paramObj.connectorCode);
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- getUrlParams(url) {
|
|
|
|
|
- const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
|
|
|
|
|
- const params = {};
|
|
|
|
|
- let match;
|
|
|
|
|
- while (match = paramsRegex.exec(url)) {
|
|
|
|
|
- params[match[1]] = match[2];
|
|
|
|
|
- }
|
|
|
|
|
- return params;
|
|
|
|
|
- },
|
|
|
|
|
- //通过充电桩编码(sn)获取设备详情
|
|
|
|
|
- getDeviceInfo(sn){
|
|
|
|
|
- this.$api.base("post","/chargeApi/checkDevicesBySn",{"sn":sn},{}).then(res=>{
|
|
|
|
|
- console.log("设备信息:",res)
|
|
|
|
|
- this.goTerminal(res.device);
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ this.getDeviceInfo(paramObj.connectorCode);
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ getUrlParams(url) {
|
|
|
|
|
+ const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
|
|
|
|
|
+ const params = {};
|
|
|
|
|
+ let match;
|
|
|
|
|
+ while (match = paramsRegex.exec(url)) {
|
|
|
|
|
+ params[match[1]] = match[2];
|
|
|
}
|
|
}
|
|
|
|
|
+ return params;
|
|
|
|
|
+ },
|
|
|
|
|
+ //通过充电桩编码(sn)获取设备详情
|
|
|
|
|
+ getDeviceInfo(sn) {
|
|
|
|
|
+ this.$api.base("post", "/chargeApi/checkDevicesBySn", { "sn": sn }, {}).then(res => {
|
|
|
|
|
+ console.log("设备信息:", res)
|
|
|
|
|
+ this.goTerminal(res.device);
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
- @import url("new-site.css");
|
|
|
|
|
|
|
+@import url("new-site.css");
|
|
|
</style>
|
|
</style>
|