1795 lines
57 KiB
Vue
1795 lines
57 KiB
Vue
<template>
|
||
<div class="main">
|
||
<scroll-view scroll-y class="chargeList" :style="{
|
||
height: `calc(100vh - ${loginType === 'min' ? 60 + bottomSafeArea : 60
|
||
}px)`,
|
||
}">
|
||
<view class="mapBox">
|
||
<map id="myMap" :longitude="longitude" :latitude="latitude" class="map" :scale="16" :show-location="true"></map>
|
||
</view>
|
||
|
||
<view class="chargeboxComponents" v-if="chaegeBoxList && chaegeBoxList.length > 0">
|
||
<charge-box :serviceAreaList="chaegeBoxList" :pageType="'scanCode'" />
|
||
</view>
|
||
|
||
<view v-if="false">
|
||
<view class="serviceItem" v-for="(item, index) in serviceList" :key="index" :style="{
|
||
border: index + 1 === serviceList.length ? 'none' : '',
|
||
marginBottom: index + 1 === serviceList.length ? '0' : '',
|
||
}" @click="handleOpenDetail(item)">
|
||
<!-- paddingBottom: index + 1 === serviceList.length ? '0' : '', -->
|
||
<view class="leftItem">
|
||
<view class="leftImgBox">
|
||
<view class="leftImg" :style="{
|
||
backgroundImage: `url(${item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
|
||
})`,
|
||
}">
|
||
</view>
|
||
|
||
<!-- <image
|
||
class="leftImg"
|
||
:src="
|
||
item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
|
||
"
|
||
/> -->
|
||
</view>
|
||
<view class="detailBox">
|
||
<view class="detailTop">
|
||
<view class="topLeft">
|
||
<span class="detailName">{{ item.SERVERPART_NAME }}</span>
|
||
<span class="detailState">营业中</span>
|
||
</view>
|
||
<view class="topRight" @click.stop="handleToMap(item)">
|
||
<image class="navigationIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/map.png" />
|
||
</view>
|
||
</view>
|
||
<view class="detailBottom">
|
||
<div class="distanceBox">
|
||
<div class="distanceLeft">
|
||
<image class="distanceIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" />
|
||
<span class="distanceNumber">{{ item.SERVERPART_DISTANCE || "-" }}km</span>
|
||
</div>
|
||
<span class="line"></span>
|
||
<span class="address">{{
|
||
item.SERVERPART_ADDRESS || "-"
|
||
}}</span>
|
||
</div>
|
||
<div class="typeList" v-if="item.ServerpartInfo.SERVERPART_TARGET">
|
||
<div class="typeItem" v-for="(
|
||
subItem, subIndex
|
||
) in item.ServerpartInfo.SERVERPART_TARGET.split(',')" :key="subIndex">
|
||
{{
|
||
SERVERPART_TARGETOBJ && subItem
|
||
? SERVERPART_TARGETOBJ[subItem]
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
</view>
|
||
|
||
<view class="chargeBox" v-if="false">
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<image class="imgIcon" src="https://eshangtech.com/minTestImg/lixiangIcon.png" />
|
||
<span class="chargeTypeName">理想</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{ item.LXDetail.LXEmpty || "0" }}</span>
|
||
<span class="sum">/{{ item.LXDetail.LXSum || "0" }}</span>
|
||
</view>
|
||
</view>
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<image class="imgIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.png" />
|
||
<span class="chargeTypeName">交控新能源</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{ item.SunHave || "0" }}</span>
|
||
<span class="sum">/{{ item.Sun || "0" }}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<image class="imgIcon" src="https://eshangtech.com/minTestImg/chargeAndReplace.png" />
|
||
<span class="chargeTypeName">国网</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{ item.chargeAndReplace || "0" }}</span>
|
||
<span class="sum">/{{ item.chargeAndReplaceSum || "0" }}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottomItem">
|
||
<view class="chargeBox">
|
||
<!-- 理想 -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.LXDetail && item.LXDetail.LXEmpty
|
||
? item.LXDetail.LXEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.LXDetail && item.LXDetail.LXSum
|
||
? item.LXDetail.LXSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 蔚来 -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.WLDetail && item.WLDetail.WLEmpty
|
||
? item.WLDetail.WLEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.WLDetail && item.WLDetail.WLSum
|
||
? item.WLDetail.WLSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 交控新能源(交控新能源) -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.SunDetail && item.SunDetail.SunEmpty
|
||
? item.SunDetail.SunEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.SunDetail && item.SunDetail.SunSum
|
||
? item.SunDetail.SunSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 国网(充换电) -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.chargeAndReplaceDetail &&
|
||
item.chargeAndReplaceDetail.chargeAndReplace
|
||
? item.chargeAndReplaceDetail.chargeAndReplace
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.chargeAndReplaceDetail &&
|
||
item.chargeAndReplaceDetail.chargeAndReplaceSum
|
||
? item.chargeAndReplaceDetail.chargeAndReplaceSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<div class="pageBottom" :style="{ height: 60 + bottomSafeArea + 'px' }">
|
||
<div class="textBox" @click="handleScan">
|
||
<image class="codeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/scanCodeIcon.svg" />
|
||
<span class="codeText">扫码充电</span>
|
||
</div>
|
||
</div>
|
||
|
||
<uni-popup ref="popup" :show="isShow" :safe-area="false" @close="handleClosePopup" @maskClick="handleClosePopup">
|
||
<div class="popupDetailBox">
|
||
<div class="popupTitle">
|
||
<div class="closeIcon" @click="handleClosePopup">
|
||
<image class="img" src="https://eshangtech.com/wanmeiyizhanImg/home/closeIcon.svg" />
|
||
</div>
|
||
<div clsas="title">电桩详情</div>
|
||
<div class="closeIcon"></div>
|
||
</div>
|
||
|
||
<div class="popupTab">
|
||
<div :class="item.value === selectPopup ? 'tabItem selectTabItem' : 'tabItem'
|
||
" v-for="(item, index) in popupTab" :key="index" @click="handleChangeSelectPopup(item.value)">
|
||
{{ item.label }}
|
||
{{
|
||
chargeDetailList &&
|
||
chargeDetailList.length > 0 &&
|
||
item.value === selectPopup
|
||
? `(${chargeDetailList.length})`
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<scroll-view class="stationList" scroll-y :style="{
|
||
height: `calc(100% - 108rpx - 56rpx - 24rpx - ${bottomSafeArea}px)`,
|
||
}">
|
||
<div class="stationItem" v-for="(item, index) in chargeDetailList" :key="index">
|
||
<div class="leftItem" :style="{
|
||
backgroundImage: `url(${item.Status === 0 || item.Status === 255
|
||
? 'https://eshangtech.com/minTestImg/offGrid.svg'
|
||
: item.Power >= 240
|
||
? 'https://eshangtech.com/minTestImg/overfilling.svg'
|
||
: item.Power <= 130 && item.Power > 60
|
||
? 'https://eshangtech.com/minTestImg/occupy.svg'
|
||
: item.Power < 60
|
||
? 'https://eshangtech.com/minTestImg/idle.svg'
|
||
: ''
|
||
})`,
|
||
}">
|
||
<!-- item.Status === 0
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/offGrid.svg'
|
||
: item.Status === 1
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
|
||
: item.Status === 2
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
|
||
: item.Status === 3
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
|
||
: item.Status === 4
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/occupy.svg'
|
||
: item.Status === 255
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/offGrid.svg'
|
||
: '' -->
|
||
|
||
<div class="chargeType" :style="{
|
||
color:
|
||
item.Status === 0 || item.Status === 255
|
||
? '#B8B7B4'
|
||
: item.Power >= 240
|
||
? '#FF5959'
|
||
: item.Power <= 130 && item.Power > 60
|
||
? '#FF8830'
|
||
: item.Power < 60
|
||
? '#01BD8B'
|
||
: '',
|
||
}">
|
||
{{
|
||
item.Status === 0
|
||
? "离网"
|
||
: item.Status === 255
|
||
? "故障"
|
||
: item.Power >= 240
|
||
? "超充"
|
||
: item.Power <= 130 && item.Power > 60
|
||
? "快充"
|
||
: "慢充"
|
||
}}
|
||
</div>
|
||
<div v-if="item.Status !== 0 && item.Status !== 255" class="stausType" :style="{
|
||
color:
|
||
item.Power >= 240
|
||
? '#FF5959'
|
||
: item.Power <= 130 && item.Power > 60
|
||
? '#FF8830'
|
||
: item.Power < 60
|
||
? '#01BD8B'
|
||
: '',
|
||
}">
|
||
{{
|
||
item.Status === 2 || item.Status === 3 || item.Status === 4
|
||
? "占用"
|
||
: item.Status === 1
|
||
? "空闲"
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="rightItem" @click="handleGoMin">
|
||
<div class="messageBox">
|
||
<span class="label">电桩编号</span>
|
||
<span class="value">桩{{ item.ConnectorID || "" }}</span>
|
||
</div>
|
||
<div class="messageBox">
|
||
<span class="label">额定电压</span>
|
||
<span class="value">{{
|
||
item.VoltageLowerLimits
|
||
? item.VoltageLowerLimits + "v"
|
||
: ""
|
||
}}{{
|
||
item.VoltageUpperLimits && item.VoltageLowerLimits
|
||
? "-"
|
||
: ""
|
||
}}{{
|
||
item.VoltageUpperLimits ? `${item.VoltageUpperLimits}v` : ""
|
||
}}</span>
|
||
</div>
|
||
<div class="messageBox">
|
||
<span class="label">最大功率</span>
|
||
<span class="value">{{
|
||
item.Power ? item.Power + "kw" : ""
|
||
}}</span>
|
||
</div>
|
||
|
||
<div class="noticeList">
|
||
<div class="noticeItem" style="margin-right: 12rpx" v-if="item.ConnectorType">
|
||
{{
|
||
item.ConnectorType === 1
|
||
? "家用插座"
|
||
: item.ConnectorType === 2
|
||
? "交流接口插座"
|
||
: item.ConnectorType === 3
|
||
? "交流接口插头"
|
||
: item.ConnectorType === 4
|
||
? "直流接口插头"
|
||
: item.ConnectorType === 5
|
||
? "无线充电座"
|
||
: ""
|
||
}}
|
||
</div>
|
||
<div class="noticeItem" v-if="item.NationalStandard">
|
||
{{
|
||
`国标${item.NationalStandard === 1
|
||
? "2001"
|
||
: item.NationalStandard === 2
|
||
? "2015"
|
||
: ""
|
||
}`
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="statusBox" v-if="item.Status === 2 || item.Status === 3 || item.Status === 4" :style="{
|
||
color:
|
||
item.Power >= 240
|
||
? '#FF5959'
|
||
: item.Power <= 130 && item.Power > 60
|
||
? '#FF8830'
|
||
: item.Power < 60
|
||
? '#01BD8B'
|
||
: '',
|
||
backgroundColor:
|
||
item.Power >= 240
|
||
? '#FFF1F1'
|
||
: item.Power <= 130 && item.Power > 60
|
||
? '#FBF2EB'
|
||
: item.Power < 60
|
||
? '#EAF4F1'
|
||
: '',
|
||
}">
|
||
<image v-if="item.Status === 3" class="chargeIcon" :src="item.Power >= 240
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/fast.svg'
|
||
: item.Power <= 130 && item.Power > 60
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/normal.svg'
|
||
: item.Power < 60
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/slow.svg'
|
||
: ''
|
||
" />
|
||
{{
|
||
item.Status === 2
|
||
? "占用"
|
||
: item.Status === 3
|
||
? "充电中"
|
||
: item.Status === 4
|
||
? "预约锁定"
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
</uni-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ChargeBox from "../../components/chargeBox.vue";
|
||
export default {
|
||
components: { ChargeBox },
|
||
data() {
|
||
return {
|
||
serviceList: [], // 最近的三个服务区的数据
|
||
loginType: "", // 登录类型
|
||
seatInfo: {}, // 经纬度数据
|
||
phoneType: "", // 手机类型
|
||
bottomSafeArea: 0, // 底部留白区域
|
||
isShow: false,
|
||
menu: {}, // 手机数据
|
||
popupTab: [
|
||
{ label: "理想", value: 1 },
|
||
{ label: "交控新能源", value: 2 },
|
||
{ label: "国网", value: 3 },
|
||
], // 点开的服务区有哪几种充电的
|
||
selectPopup: 1,
|
||
serviceName: [], // 服务区名字数组
|
||
chargeDetailList: [], // 悬浮框里面的详情数据
|
||
nowCurrentObj: {}, // 当前点击选中的悬浮框的对象
|
||
SERVERPART_TARGETOBJ: {},
|
||
chaegeBoxList: [], // 组件要的服务区名称的数组
|
||
longitude: "116.894249",
|
||
latitude: "31.919001",
|
||
};
|
||
},
|
||
onLoad() {
|
||
// 拿到现在手机的数据
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
console.log("systemInfo", systemInfo);
|
||
if (systemInfo.osName === "ios") {
|
||
this.phoneType = "ios";
|
||
this.bottomSafeArea =
|
||
systemInfo.screenHeight - systemInfo.safeArea.bottom;
|
||
}
|
||
console.log("this.bottomSafeArea", this.bottomSafeArea);
|
||
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
if (type === "min") {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.menu = systemInfo.safeArea;
|
||
this.$forceUpdate();
|
||
}
|
||
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
if (seatInfo) {
|
||
this.seatInfo = seatInfo;
|
||
this.longitude = this.seatInfo.longitude;
|
||
this.latitude = this.seatInfo.latitude;
|
||
}
|
||
console.log("this.seatInfo", this.seatInfo);
|
||
|
||
let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
|
||
if (SERVERPART_TARGET) {
|
||
this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
|
||
} else {
|
||
// 拿到枚举
|
||
this.handleSERVERPART_TARGETOBJ();
|
||
}
|
||
|
||
// 最近的三个服务区数据
|
||
this.handleGetThreeList();
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
onShareAppMessage() {
|
||
// let _this = this;
|
||
return {
|
||
title: "扫码充电",
|
||
path: "/pages/scanCodeCharge/index",
|
||
// imageUrl: _this.good.DEFAULT_IMG,
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: "扫码充电",
|
||
path: "/pages/scanCodeCharge/index",
|
||
// imageUrl: _this.good.DEFAULT_IMG,
|
||
};
|
||
},
|
||
methods: {
|
||
// 解服务区的一个枚举
|
||
async handleSERVERPART_TARGETOBJ() {
|
||
let SERVERPART_TARGET = await this.$api.$get(
|
||
"/EShangApiMain/FrameWork/GetFieldEnumTree",
|
||
{ FieldExplainField: "SERVERPART_TARGET" }
|
||
);
|
||
let list = this.$utils.wrapTreeNode(SERVERPART_TARGET.Result_Data.List);
|
||
let obj = {};
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
obj[String(item.value)] = item.label;
|
||
});
|
||
}
|
||
console.log("obj", obj);
|
||
uni.setStorageSync("SERVERPART_TARGET", JSON.stringify(obj));
|
||
this.SERVERPART_TARGETOBJ = obj;
|
||
},
|
||
handleChangeSelectPopup(value) {
|
||
this.selectPopup = value;
|
||
if (value === 1) {
|
||
this.chargeDetailList = this.nowCurrentObj.LXInfoList;
|
||
} else {
|
||
this.chargeDetailList = [];
|
||
}
|
||
},
|
||
handleToMap(obj) {
|
||
if (this.loginType === "min") {
|
||
uni.openLocation({
|
||
latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
|
||
longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
|
||
scale: 16, // 缩放比例
|
||
name: obj.SERVERPART_NAME,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
} else {
|
||
const addModule = uni.requireNativePlugin("AMapModule");
|
||
addModule.auth(
|
||
"d773aa156f8ca2160cfb06d5f117dacd",
|
||
(suc) => {
|
||
addModule.reg(
|
||
(suc) => {
|
||
addModule.navfrom(
|
||
this.seatInfo.latitude,
|
||
this.seatInfo.longitude,
|
||
"我的位置",
|
||
obj.latitude ? obj.latitude : obj.SERVERPART_Y,
|
||
obj.longitude ? obj.longitude : obj.SERVERPART_X,
|
||
obj.SERVERPART_NAME,
|
||
(suc) => {
|
||
console.log(suc);
|
||
},
|
||
(err) => {
|
||
console.log(err);
|
||
}
|
||
);
|
||
},
|
||
(err) => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: "none",
|
||
});
|
||
}
|
||
);
|
||
},
|
||
(err) => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: "none",
|
||
});
|
||
}
|
||
);
|
||
}
|
||
},
|
||
// 拿到最近的三个服务区数据
|
||
async handleGetThreeList() {
|
||
uni.showLoading({
|
||
title: "查到附近的服务区...",
|
||
});
|
||
let req = {
|
||
Province_Code: "340000",
|
||
SPRegionType_ID: "72", // 以后数据补齐 这个注释上
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
ShowService: true,
|
||
PageIndex: 1,
|
||
PageSize: 3, // 以后数据补齐 这个值变为3
|
||
};
|
||
// const data = await this.$api.$get(
|
||
// "/CommercialApi/BaseInfo/GetServerpartList",
|
||
// req
|
||
// );
|
||
|
||
let data = await this.$api.$javaGet2('/third-party/getServerPartList', req)
|
||
uni.hideLoading();
|
||
console.log("handleGetThreeListdata", data);
|
||
let list = data.Result_Data.List;
|
||
|
||
this.chaegeBoxList = ["新桥服务区", "丰乐服务区", "肥东服务区"];
|
||
console.log("this.chaegeBoxList", this.chaegeBoxList);
|
||
|
||
return;
|
||
// 如果有数据的话
|
||
if (list && list.length > 0) {
|
||
// 以后数据补齐 直接等于list 不要等于res
|
||
// name 数组必须是要的
|
||
let res = [];
|
||
let nameList = [];
|
||
let service = [418, 416, 417];
|
||
|
||
list.forEach((item) => {
|
||
if (service.indexOf(item.SERVERPART_ID) !== -1) {
|
||
let LXSum = 0; // 理想
|
||
let WLSum = 0; // 蔚来
|
||
let SunSum = 0; // 新能源
|
||
let chargeAndReplaceSum = 0; // 国网
|
||
|
||
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
||
item.RegionInfo.forEach((subItem) => {
|
||
chargeAndReplaceSum += subItem.STATEGRIDCHARGE; // 国网
|
||
SunSum += subItem.GACENERGYCHARGE; // 新能源
|
||
WLSum += subItem.OTHERCHAGRE; // 蔚来
|
||
LXSum += subItem.LIAUTOCHARGE; // 理想
|
||
});
|
||
}
|
||
|
||
// 理想的随机百分比
|
||
let LXRate = this.handleGetRandomData(0, 60);
|
||
// 蔚来的随机百分比
|
||
let WLRate = this.handleGetRandomData(0, 60);
|
||
// 阳光的随机百分比
|
||
let SunRate = this.handleGetRandomData(0, 60);
|
||
// 充换电的随机百分比
|
||
let chargeAndReplaceRate = this.handleGetRandomData(0, 60);
|
||
item.LXDetail = {
|
||
LXEmpty: Math.floor(LXSum * (LXRate / 100)),
|
||
LXSum: LXSum,
|
||
};
|
||
item.WLDetail = {
|
||
WLEmpty: Math.floor(WLSum * (WLRate / 100)),
|
||
WLSum: WLSum,
|
||
};
|
||
item.SunDetail = {
|
||
SunEmpty: Math.floor(SunSum * (SunRate / 100)),
|
||
SunSum: SunSum,
|
||
};
|
||
item.chargeAndReplaceDetail = {
|
||
chargeAndReplace: Math.floor(
|
||
chargeAndReplaceSum * (chargeAndReplaceRate / 100)
|
||
),
|
||
chargeAndReplaceSum: chargeAndReplaceSum,
|
||
};
|
||
res.push(item);
|
||
nameList.push(item.SERVERPART_NAME.split("服务区")[0]);
|
||
}
|
||
});
|
||
this.serviceName = nameList;
|
||
this.serviceList = res;
|
||
|
||
console.log("this.serviceList", this.serviceList);
|
||
|
||
await this.handleGetChargeData();
|
||
// await this.handleGetSunChargeData();
|
||
} else {
|
||
this.serviceList = [];
|
||
}
|
||
},
|
||
|
||
// 生成随机数
|
||
handleGetRandomData(max, min) {
|
||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||
},
|
||
// 拿到充电的理想数据
|
||
async handleGetChargeData() {
|
||
uni.showLoading({
|
||
title: "查询理想设备信息...",
|
||
});
|
||
|
||
const LiOperatorSecret = "bGMyYwJFl17BqwD3";
|
||
const LiOperCode = "MA7EBGWBX";
|
||
const LiSigSecret = "V7I6yvHvEk8STt0P";
|
||
const LiDataSecret = "P2S3WjoLv3rqL0hn";
|
||
const LiIV = "ZRlwcrx7k63ihzXF";
|
||
|
||
const OperatorID = "78109626X"; // 组织机构代码（OperatorID）
|
||
const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
|
||
const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
|
||
const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
|
||
const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV）
|
||
|
||
let tokenData = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_token",
|
||
|
||
data: JSON.stringify({
|
||
OperatorID: OperatorID,
|
||
OperatorSecret: LiOperatorSecret,
|
||
}),
|
||
id: 0,
|
||
seq: "001",
|
||
token: "",
|
||
});
|
||
console.log("tokenData", tokenData);
|
||
// token的实际值
|
||
let token = tokenData.Data.AccessToken;
|
||
|
||
// 拿到所有站点的数据
|
||
const allStationList = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
|
||
data: JSON.stringify({
|
||
PageNo: 1,
|
||
PageSize: 999,
|
||
}),
|
||
id: 0,
|
||
seq: "002",
|
||
token: token,
|
||
});
|
||
let stationList = allStationList.Data.StationInfos;
|
||
console.log("stationList", stationList);
|
||
|
||
let newStationList = [];
|
||
|
||
if (stationList && stationList.length > 0) {
|
||
stationList.forEach((item) => {
|
||
if (item.Address) {
|
||
if (this.serviceName && this.serviceName.length > 0) {
|
||
this.serviceName.forEach((subItem) => {
|
||
if (item.Address.indexOf(subItem) !== -1) {
|
||
newStationList.push(item);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 这段是和自己最近的三个服务区的 理想充电筛出来的数据
|
||
console.log("newStationList", newStationList);
|
||
|
||
let stationIds = [];
|
||
// 创建吧id当key的对象
|
||
let stationObj = {};
|
||
// 拿到充电站的id数组 去查里面的充电枪详情
|
||
if (newStationList && newStationList.length > 0) {
|
||
newStationList.forEach((item) => {
|
||
stationIds.push(item.StationID);
|
||
stationObj[item.StationID] = item;
|
||
});
|
||
}
|
||
|
||
console.log("stationIds", stationIds);
|
||
console.log("stationObj", stationObj);
|
||
|
||
// 查询具体状态
|
||
if (stationIds && stationIds.length > 0) {
|
||
const stationInfo = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_station_status",
|
||
data: JSON.stringify({
|
||
StationIDs: stationIds,
|
||
}),
|
||
id: 0,
|
||
seq: "003",
|
||
token: token,
|
||
});
|
||
let statusList = stationInfo.Data.StationStatusInfos;
|
||
console.log("statusList", statusList);
|
||
if (statusList && statusList.length > 0) {
|
||
statusList.forEach((item) => {
|
||
if (stationObj[item.StationID]) {
|
||
stationObj[item.StationID].statusList = item.ConnectorStatusInfos;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
console.log("stationObj", stationObj);
|
||
|
||
// 带有状态的充电站列表格式
|
||
let haveStationList = [];
|
||
if (stationObj) {
|
||
for (let key in stationObj) {
|
||
haveStationList.push(stationObj[key]);
|
||
}
|
||
}
|
||
|
||
console.log("haveStationList", haveStationList);
|
||
|
||
if (this.serviceList && this.serviceList.length > 0) {
|
||
let newRes = JSON.parse(JSON.stringify(this.serviceList));
|
||
newRes.forEach((item) => {
|
||
let LXCharge = [];
|
||
let LXInfoList = [];
|
||
let sortName = item.SERVERPART_NAME.split("服务区")[0];
|
||
|
||
if (haveStationList && haveStationList.length > 0) {
|
||
haveStationList.forEach((subItem) => {
|
||
if (subItem.Address.indexOf(sortName) !== -1) {
|
||
LXCharge.push(...subItem.statusList);
|
||
if (
|
||
subItem.EquipmentInfos &&
|
||
subItem.EquipmentInfos.length > 0
|
||
) {
|
||
subItem.EquipmentInfos.forEach((thirdItem) => {
|
||
if (
|
||
thirdItem.ConnectorInfos &&
|
||
thirdItem.ConnectorInfos.length > 0
|
||
) {
|
||
thirdItem.ConnectorInfos.forEach((fourthItem) => {
|
||
LXInfoList.push(fourthItem);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
// 空多少个
|
||
let LXEmpty = 0;
|
||
// 一共多少个
|
||
let LXSum = 0;
|
||
|
||
if (LXCharge && LXCharge.length > 0) {
|
||
LXCharge.forEach((subItem) => {
|
||
if (subItem.Status !== 3) {
|
||
LXEmpty += 1;
|
||
}
|
||
LXSum += 1;
|
||
});
|
||
}
|
||
|
||
item.LXDetail = {
|
||
LXSum: LXSum,
|
||
LXEmpty: LXEmpty,
|
||
};
|
||
if (LXInfoList && LXInfoList.length > 0) {
|
||
LXInfoList.forEach((item) => {
|
||
if (LXCharge && LXCharge.length > 0) {
|
||
LXCharge.forEach((subItem) => {
|
||
if (item.ConnectorID === subItem.ConnectorID) {
|
||
item.ParkStatus = subItem.ParkStatus;
|
||
item.Status = subItem.Status;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
item.LXInfoList = LXInfoList;
|
||
|
||
item.LXCharge = LXCharge;
|
||
}
|
||
});
|
||
|
||
this.serviceList = newRes;
|
||
console.log("newRes", newRes);
|
||
}
|
||
|
||
// if (this.serviceList && this.serviceList.length > 0) {
|
||
// let newRes = JSON.parse(JSON.stringify(this.serviceList));
|
||
// newRes.forEach((item) => {
|
||
// let LXCharge = [];
|
||
// let sortName = item.SERVERPART_NAME.split("服务区")[0];
|
||
// if (newStationList && newStationList.length > 0) {
|
||
// newStationList.forEach((subItem) => {
|
||
// if (subItem.Address.indexOf(sortName) !== -1) {
|
||
// LXCharge.push(subItem);
|
||
// }
|
||
// });
|
||
// item.LXCharge = LXCharge;
|
||
// }
|
||
// });
|
||
// // 这一步已经将理想的数据塞进去了 然后就是自己汇总了
|
||
// console.log("newRes", newRes);
|
||
|
||
// newRes.forEach((item) => {
|
||
// // 理想数据的合计对象
|
||
// let LXObj = {};
|
||
// // 理想的合计充电桩
|
||
// let LXSum = 0;
|
||
// // 理想当前在充的电桩
|
||
// let LXHave = 0;
|
||
// if (item.LXCharge && item.LXCharge.length > 0) {
|
||
// item.LXCharge.forEach((subItem) => {
|
||
// if (subItem.EquipmentInfos && subItem.EquipmentInfos.length > 0) {
|
||
// subItem.EquipmentInfos.forEach((thirdItem) => {
|
||
// if (
|
||
// thirdItem.ConnectorInfos &&
|
||
// thirdItem.ConnectorInfos.length > 0
|
||
// ) {
|
||
// LXSum += thirdItem.ConnectorInfos.length;
|
||
// thirdItem.ConnectorInfos.forEach((fourthItem) => {
|
||
// if(fourthItem.)
|
||
// });
|
||
// }
|
||
// });
|
||
// }
|
||
// });
|
||
// }
|
||
// });
|
||
// }
|
||
|
||
// const stationFee = await this.$testApi.$post("/send", {
|
||
// url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_equip_business_policy",
|
||
// data: JSON.stringify({
|
||
// ConnectorID: "81003879",
|
||
// EquipBizSeq: "78109626",
|
||
// }),
|
||
// id: 0,
|
||
// seq: "003",
|
||
// token: token,
|
||
// });
|
||
// console.log("stationFee", stationFee);
|
||
|
||
uni.hideLoading();
|
||
},
|
||
|
||
// 拿到阳光充电的数据
|
||
async handleGetSunChargeData() {
|
||
uni.showLoading({
|
||
title: "查询阳光电源设备信息...",
|
||
});
|
||
const LiOperatorSecret = "tDbBTUSok8TCTjGS";
|
||
const LiOperCode = "MA8PUMF89";
|
||
const LiSigSecret = "PSyM5DrXRjM06a8C";
|
||
const LiDataSecret = "tcqvnw1msfDEtVj9";
|
||
const LiIV = "Uj3F6NWAov6j30tA";
|
||
|
||
const OperatorID = "78109626X"; // 组织机构代码（OperatorID）
|
||
const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
|
||
const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
|
||
const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
|
||
const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV）
|
||
|
||
let tokenData = await this.$testApi.$post("/send", {
|
||
url: "https://dev.suncharger.cn:8443//hlht/MA8PUMF89F/v2.0.0/query_token",
|
||
data: JSON.stringify({
|
||
OperatorID: OperatorID,
|
||
OperatorSecret: LiOperatorSecret,
|
||
}),
|
||
id: 1,
|
||
seq: "001",
|
||
token: "",
|
||
});
|
||
console.log("tokenData", tokenData);
|
||
// token的实际值
|
||
let token = tokenData.Data.AccessToken;
|
||
console.log("token", token);
|
||
|
||
// 拿到所有站点的数据
|
||
const allStationList = await this.$testApi.$post("/send", {
|
||
url: "https://dev.suncharger.cn:8443//hlht/MA8PUMF89F/v2.0.0/query_stations_info",
|
||
data: JSON.stringify({
|
||
PageNo: 1,
|
||
PageSize: 999,
|
||
}),
|
||
id: 1,
|
||
seq: "002",
|
||
token: token,
|
||
});
|
||
let stationList = allStationList.Data.StationInfos;
|
||
console.log("stationList", stationList);
|
||
|
||
//
|
||
const stationInfo = await this.$testApi.$post("/send", {
|
||
url: "https://dev.suncharger.cn:8443//hlht/MA8PUMF89F/v2.0.0/query_station_status",
|
||
data: JSON.stringify({
|
||
StationIDs: [""],
|
||
}),
|
||
id: 1,
|
||
seq: "003",
|
||
token: token,
|
||
});
|
||
console.log("stationInfo", stationInfo);
|
||
|
||
uni.hideLoading();
|
||
},
|
||
|
||
// 打开对应的悬浮框
|
||
handleOpenDetail(obj) {
|
||
this.nowCurrentObj = obj;
|
||
this.chargeDetailList = obj.LXInfoList;
|
||
console.log("this.chargeDetailList", this.chargeDetailList);
|
||
this.$refs.popup.open("bottom");
|
||
this.isShow = true;
|
||
},
|
||
// 关闭悬浮框
|
||
handleClosePopup() {
|
||
this.$refs.popup.close();
|
||
this.isShow = false;
|
||
this.nowCurrentObj = {};
|
||
this.chargeDetailList = [];
|
||
this.popupTab = [
|
||
{ label: "理想", value: 1 },
|
||
{ label: "交控新能源", value: 2 },
|
||
{ label: "国网", value: 3 },
|
||
];
|
||
this.selectPopup = 1;
|
||
},
|
||
|
||
// 跳转理想小程序
|
||
handleGoMin() {
|
||
uni.navigateToMiniProgram({
|
||
appId: "wxefd5d8119561aaca",
|
||
path: `/pages/electricity/pile/index?connectorId=81000251`,
|
||
success(res) {
|
||
// 打开成功
|
||
},
|
||
});
|
||
},
|
||
|
||
// 取问号后面的参数
|
||
getQueryParams(url) {
|
||
let queryStr = url.split("?")[1]; // 获取 ? 后面的部分
|
||
let params = {};
|
||
|
||
if (queryStr) {
|
||
let pairs = queryStr.split("&");
|
||
pairs.forEach((pair) => {
|
||
let [key, value] = pair.split("=");
|
||
params[key] = decodeURIComponent(value || "");
|
||
});
|
||
}
|
||
|
||
return params;
|
||
},
|
||
|
||
// 扫一扫
|
||
handleScan() {
|
||
let _this = this;
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
console.log("条码类型：" + res.scanType);
|
||
console.log("条码内容：" + res.result);
|
||
let url = res.result;
|
||
if (url.indexOf("lixiang") !== -1) {
|
||
let obj = _this.getQueryParams(url);
|
||
console.log("obj", obj);
|
||
uni.showModal({
|
||
title: "",
|
||
content: `识别二维码类型为【理想】，确认跳转？`,
|
||
success(res) {
|
||
uni.navigateToMiniProgram({
|
||
appId: "wxefd5d8119561aaca",
|
||
path: `/pages/electricity/pile/index?connectorId=${obj.qrcode}`,
|
||
success(res) { },
|
||
});
|
||
},
|
||
});
|
||
} else if (url.indexOf("jksdxny") !== -1) {
|
||
// 交控
|
||
uni.showModal({
|
||
title: "",
|
||
content: `识别二维码类型为【交控新能源】，确认跳转？`,
|
||
success(res) {
|
||
uni.navigateToMiniProgram({
|
||
appId: "wx01617ba079061ca9",
|
||
path: `/pages/map/index`,
|
||
success(res) { },
|
||
});
|
||
},
|
||
});
|
||
} else if (url.indexOf("app.nio") !== -1) {
|
||
// 蔚来
|
||
uni.showModal({
|
||
title: "",
|
||
content: `识别二维码类型为【蔚来】，确认跳转？`,
|
||
success(res) {
|
||
uni.navigateToMiniProgram({
|
||
appId: "wx35849c7f0cf7f7a9",
|
||
path: `/pages/index/index`,
|
||
success(res) { },
|
||
});
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.main {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #f5f5f5;
|
||
|
||
.chargeList {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 32rpx;
|
||
|
||
.mapBox {
|
||
width: 100%;
|
||
height: 600rpx;
|
||
margin-bottom: 24rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.chargeboxComponents {
|
||
width: calc(100vw - 112rpx);
|
||
background: #fff;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.serviceItem {
|
||
width: 100%;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
// display: flex;
|
||
// align-items: center;
|
||
margin-bottom: 24rpx;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
background: #ffffff;
|
||
|
||
.leftItem {
|
||
width: 100%;
|
||
// height: 144rpx;
|
||
// width: calc(100% - 70px);
|
||
display: flex;
|
||
// align-items: center;
|
||
align-items: flex-start;
|
||
|
||
.leftImgBox {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
overflow: hidden;
|
||
border-radius: 6rpx;
|
||
margin-right: 20rpx;
|
||
background: #f5f6f7;
|
||
|
||
.leftImg {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
background-position: 50% 50%;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
// .leftImg {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
}
|
||
|
||
.detailBox {
|
||
width: calc(100% - 164rpx);
|
||
// height: 144rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
|
||
.detailTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.topLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.detailName {
|
||
display: inline-block;
|
||
max-width: 400rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.detailState {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #01a157;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
padding: 2rpx 3px;
|
||
background: #e9f8ee;
|
||
border-radius: 2rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.topRight {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
// position: absolute;
|
||
// right: 24rpx;
|
||
// top: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f8f4ea;
|
||
border-radius: 50%;
|
||
|
||
.navigationIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
// .chargeType {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 22rpx;
|
||
// color: #ffffff;
|
||
// line-height: 32rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// padding: 2rpx 8rpx;
|
||
// background: #ba922f;
|
||
// border-radius: 4rpx 0rpx 0rpx 4rpx;
|
||
// }
|
||
// .chargeValue {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #ba922f;
|
||
// line-height: 36rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// padding: 2rpx 8rpx;
|
||
// border-radius: 0rpx 4rpx 4rpx 0rpx;
|
||
// background: #f8f4ea;
|
||
// }
|
||
}
|
||
}
|
||
|
||
.detailBottom {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
|
||
.distanceBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.distanceLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 150rpx;
|
||
|
||
.distanceIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.distanceNumber {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
display: inline-block;
|
||
width: 2rpx;
|
||
height: 22rpx;
|
||
background: #e7e7e6;
|
||
margin: 0 12rpx;
|
||
}
|
||
|
||
.address {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
max-width: 250rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.typeList {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
margin-top: 16rpx;
|
||
|
||
.typeItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 4rpx 8rpx;
|
||
background: #f5f6f7;
|
||
border-radius: 4rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
// .label {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #716f69;
|
||
// line-height: 36rpx;
|
||
// text-align: justify;
|
||
// font-style: normal;
|
||
// width: 100%;
|
||
// display: -webkit-box; /* 必须设置 */
|
||
// -webkit-box-orient: vertical; /* 垂直排列子元素 */
|
||
// -webkit-line-clamp: 3; /* 限制显示的行数 */
|
||
// overflow: hidden; /* 超出内容隐藏 */
|
||
// text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
// word-break: break-all; /* 强制换行，防止长单词溢出 */
|
||
// }
|
||
// .value {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #130f05;
|
||
// line-height: 36rpx;
|
||
// text-align: right;
|
||
// font-style: normal;
|
||
// }
|
||
}
|
||
|
||
// .chargeBox {
|
||
// width: 100%;
|
||
// margin-top: 8rpx;
|
||
// .chargeItem {
|
||
// width: 100%;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
// margin-bottom: 12rpx;
|
||
// .itemLeft {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// .imgIcon {
|
||
// width: 40rpx;
|
||
// height: 40rpx;
|
||
// margin-right: 12rpx;
|
||
// }
|
||
// .chargeTypeName {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 28rpx;
|
||
// color: #130f05;
|
||
// line-height: 40rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// }
|
||
// }
|
||
// .itemRight {
|
||
// background: #f5f6f7;
|
||
// border-radius: 4rpx;
|
||
// padding: 4rpx 12rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// .emptyText {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #130f05;
|
||
// line-height: 32rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// margin-right: 4rpx;
|
||
// }
|
||
// .use {
|
||
// font-family: DINAlternate, DINAlternate;
|
||
// font-weight: bold;
|
||
// font-size: 28rpx;
|
||
// color: #130f05;
|
||
// line-height: 32rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// margin-right: 4rpx;
|
||
// }
|
||
// .sum {
|
||
// font-family: DINAlternate, DINAlternate;
|
||
// font-weight: bold;
|
||
// font-size: 28rpx;
|
||
// color: #716f69;
|
||
// line-height: 32rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// }
|
||
// }
|
||
// // width: 100%;
|
||
// // padding: 8rpx;
|
||
// // background: #f6f6f6;
|
||
// // display: flex;
|
||
// // align-items: center;
|
||
// // justify-content: space-between;
|
||
// // border-radius: 8rpx;
|
||
// // box-sizing: border-box;
|
||
// // padding: 0 16rpx;
|
||
// // margin-bottom: 14rpx;
|
||
// // .chargeItemLabel {
|
||
// // font-family: PingFangSC, PingFang SC;
|
||
// // font-weight: 400;
|
||
// // font-size: 24rpx;
|
||
// // color: #130f05;
|
||
// // line-height: 40rpx;
|
||
// // text-align: left;
|
||
// // font-style: normal;
|
||
// // }
|
||
// // .chargeItemValue {
|
||
// // font-family: PingFangSC, PingFang SC;
|
||
// // font-weight: 400;
|
||
// // font-size: 24rpx;
|
||
// // color: #130f05;
|
||
// // line-height: 36rpx;
|
||
// // text-align: left;
|
||
// // font-style: normal;
|
||
// // .empty {
|
||
// // font-family: DINAlternate, DINAlternate;
|
||
// // font-weight: bold;
|
||
// // font-size: 24rpx;
|
||
// // color: #130f05;
|
||
// // line-height: 36rpx;
|
||
// // text-align: left;
|
||
// // font-style: normal;
|
||
// // margin: 0 4rpx;
|
||
// // }
|
||
// // .sum {
|
||
// // font-family: DINAlternate, DINAlternate;
|
||
// // font-weight: bold;
|
||
// // font-size: 24rpx;
|
||
// // color: #716f69;
|
||
// // line-height: 36rpx;
|
||
// // text-align: left;
|
||
// // font-style: normal;
|
||
// // }
|
||
// // }
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
|
||
.bottomItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 8rpx 0 20rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.chargeBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.chargeItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.chargeIconBox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
.chargeIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.chargeInfo {
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.empty {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.emptyValue {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.sum {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rightItem {
|
||
width: 70px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.navigationTop {
|
||
border-radius: 16px;
|
||
border: 1px solid #ae8d3e;
|
||
padding: 14rpx 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.navigationIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.longText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #787879;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.chargeList ::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.pageBottom {
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 40rpx 0;
|
||
|
||
.textBox {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #ba922f;
|
||
|
||
.codeIcon {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.codeText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popupDetailBox {
|
||
width: 100vw;
|
||
height: 95vh;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
|
||
.popupTitle {
|
||
width: 100%;
|
||
height: 108rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.closeIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
|
||
.img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.popupTab {
|
||
width: 100%;
|
||
height: 56rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.tabItem {
|
||
width: calc((100% - 48rpx) / 3);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 8rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.selectTabItem {
|
||
background: #f8f4ea;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #ba922f;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.stationList {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.stationItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f9f9f9;
|
||
margin-bottom: 24rpx;
|
||
position: relative;
|
||
|
||
.leftItem {
|
||
width: 152rpx;
|
||
height: 152rpx;
|
||
margin-right: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.chargeType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #01bd8b;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.stausType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #01bd8b;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.rightItem {
|
||
.messageBox {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.label {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.value {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.noticeList {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.noticeItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 0 10rpx;
|
||
background: #eef0f6;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.statusBox {
|
||
border-radius: 0rpx 16rpx 0rpx 16rpx;
|
||
padding: 10rpx 12rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.chargeIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.stationList ::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |