1804 lines
59 KiB
Vue
1804 lines
59 KiB
Vue
<template>
|
||
<view>
|
||
<view class="chargeBox">
|
||
<view
|
||
class="serviceList"
|
||
v-if="
|
||
detailObj && detailObj.servicePart && detailObj.servicePart.length > 0
|
||
"
|
||
>
|
||
<view
|
||
class="serviceItem"
|
||
v-for="(item, index) in detailObj.servicePart"
|
||
:key="index"
|
||
:style="{
|
||
border: index + 1 === detailObj.servicePart.length ? 'none' : '',
|
||
marginBottom: index + 1 === detailObj.servicePart.length ? '0' : '',
|
||
paddingBottom:
|
||
index + 1 === detailObj.servicePart.length ? '0' : '',
|
||
}"
|
||
>
|
||
<view
|
||
class="leftItem"
|
||
@click="handleGoServiceDetail(item.SERVERPART_ID)"
|
||
>
|
||
<view class="leftImgBox">
|
||
<view
|
||
class="leftImg"
|
||
:style="{
|
||
backgroundImage: `url(${
|
||
item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: '/static/images/discovery/defaultIcon.png'
|
||
})`,
|
||
}"
|
||
></view>
|
||
<!-- <image
|
||
class="leftImg"
|
||
:src="
|
||
item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: '/static/images/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">
|
||
<span class="chargeType">快充</span>
|
||
<span class="chargeValue">空4/8</span>
|
||
</view> -->
|
||
</view>
|
||
<view class="detailBottom">
|
||
<div class="distanceBox">
|
||
<div class="distanceLeft">
|
||
<image
|
||
class="distanceIcon"
|
||
src="/static/images/home/address.png"
|
||
/>
|
||
<span class="distanceNumber"
|
||
>{{
|
||
item.SERVERPART_DISTANCEGD ||
|
||
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>
|
||
</view>
|
||
|
||
<view
|
||
class="centerItem"
|
||
@click="handleGoServiceDetail(item.SERVERPART_ID)"
|
||
>
|
||
<!-- 拥有设施的小图标 -->
|
||
<view
|
||
class="centerConfigItem"
|
||
v-for="(subItem, index) in item.imgList"
|
||
:key="index"
|
||
>
|
||
<image class="configImg" :src="subItem.url" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottomItem" @click="handleOpenDetail(item)">
|
||
<view class="chargeBox">
|
||
<!-- 理想 -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image
|
||
class="chargeIcon"
|
||
src="https://eshangtech.com/minTestImg/LXIcon.png"
|
||
/>
|
||
</view>
|
||
<view class="chargeTitle">理想</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="chargeTitle">蔚来</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="/static/images/home/sunIcon.svg"
|
||
/>
|
||
</view>
|
||
<view class="chargeTitle">时代新能源</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="chargeTitle">国网</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>
|
||
</view>
|
||
|
||
<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="/static/images/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(95vh - 108rpx - 56rpx - 24rpx)`,
|
||
}"
|
||
>
|
||
<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
|
||
? '/static/images/home/offGrid.svg'
|
||
: item.Status === 1
|
||
? '/static/images/home/idle.svg'
|
||
: item.Status === 2
|
||
? '/static/images/home/idle.svg'
|
||
: item.Status === 3
|
||
? '/static/images/home/idle.svg'
|
||
: item.Status === 4
|
||
? '/static/images/home/occupy.svg'
|
||
: item.Status === 255
|
||
? '/static/images/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
|
||
? '/static/images/home/fast.svg'
|
||
: item.Power <= 130 && item.Power > 60
|
||
? '/static/images/home/normal.svg'
|
||
: item.Power < 60
|
||
? '/static/images/home/slow.svg'
|
||
: ''
|
||
"
|
||
/>
|
||
{{
|
||
item.Status === 2
|
||
? "占用"
|
||
: item.Status === 3
|
||
? "充电中"
|
||
: item.Status === 4
|
||
? "预约锁定"
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
detailObj: {},
|
||
seatInfo: {},
|
||
nowCurrentObj: {}, // 当前点击选中的悬浮框的对象
|
||
chargeDetailList: [], // 悬浮框里面的详情数据
|
||
isShow: false,
|
||
popupTab: [
|
||
{ label: "理想", value: 1 },
|
||
{ label: "蔚来", value: 2 },
|
||
{ label: "交控新能源", value: 3 },
|
||
{ label: "国网", value: 4 },
|
||
], // 点开的服务区有哪几种充电的
|
||
selectPopup: 1,
|
||
};
|
||
},
|
||
props: ["serviceAreaList", "startObj", "endObj", "pageType"],
|
||
|
||
onReady() {
|
||
console.log("onShow");
|
||
this.handldGetData();
|
||
},
|
||
methods: {
|
||
async handldGetData() {
|
||
this.seatInfo = JSON.parse(uni.getStorageSync("seatInfo"));
|
||
// 服务区列表
|
||
let serviceList = [];
|
||
|
||
let storgeList = uni.getStorageSync("serviceList");
|
||
if (storgeList) {
|
||
serviceList = JSON.parse(storgeList);
|
||
} else {
|
||
let req = {
|
||
Province_Code: "340000",
|
||
longitude: this.seatInfo.longitude || "",
|
||
latitude: this.seatInfo.latitude || "",
|
||
ShowService: true,
|
||
};
|
||
let serviceArea = await this.$api.$get(
|
||
"/CommercialApi/BaseInfo/GetServerpartList",
|
||
req
|
||
);
|
||
let serviceList = serviceArea.Result_Data.List;
|
||
uni.setStorageSync("serviceList", JSON.stringify(serviceList));
|
||
}
|
||
let _this = this;
|
||
|
||
let list = [];
|
||
if (_this.serviceAreaList && _this.serviceAreaList.length > 0) {
|
||
_this.serviceAreaList.forEach((item) => {
|
||
if (serviceList && serviceList.length > 0) {
|
||
serviceList.forEach((subItem) => {
|
||
if (item === subItem.SERVERPART_NAME) {
|
||
list.push(subItem);
|
||
}
|
||
// 理想总数
|
||
let LIAUTOCHARGESum = 0;
|
||
// 国网总数
|
||
let STATEGRIDCHARGESum = 0;
|
||
// 充换电总数
|
||
let GACENERGYCHARGESum = 0;
|
||
let HASPANTRY = 0; // 男厕数量
|
||
let HASWIFI = 0; // 女厕数量
|
||
let TOILETCOUNT = 0; // 潮汐厕位
|
||
let HASSHOWERROOM = 0; // 淋浴房
|
||
let HASWATERROOM = 0; // 开水器
|
||
let MICROWAVEOVEN = 0; // 微波炉
|
||
let WASHERCOUNT = 0; // 洗衣机数量
|
||
let SLEEPINGPODS = 0; // 睡眠仓
|
||
let HASPILOTLOUNGE = false; // 有无司机之家
|
||
let SHOWERROOM = 0; // 司机之家淋浴间
|
||
let HASCHILD = false; // 有无车辆维修
|
||
let SMALLPARKING = 0; // 轿车车位
|
||
let PACKING = 0; // 客车车位
|
||
let TRUCKPACKING = 0; // 货车车位
|
||
let DANPACKING = 0; // 危化品车位
|
||
let DININGBXCOUNT = 0; // 商铺数量
|
||
let DININGROOMCOUNT = 0; // 餐饮店
|
||
let HASBACKGROUNDRADIO = 0; // 便利店
|
||
let POINTCONTROLCOUNT = 0; // 客房
|
||
let TOILET_PAPER = 0; // 厕纸巾
|
||
let MABROOMWATER_DISPENSER = 0; // 母婴室饮水机
|
||
let NURSING_TABLE = 0; // 哺乳桌
|
||
let BABY_COT = 0; // 婴儿床
|
||
let CHANGING_TABLE = 0; // 尿布台
|
||
let DROOMWATER_DISPENSER = 0; // 司机之家饮水机
|
||
let UREA_COUNT = 0; // 尿素
|
||
let VEHICLEWATERFILLING = 0; // 加水
|
||
|
||
if (subItem.RegionInfo && subItem.RegionInfo.length > 0) {
|
||
subItem.RegionInfo.forEach((thirdItem) => {
|
||
HASPANTRY += thirdItem.HASPANTRY;
|
||
HASWIFI += thirdItem.HASPANTRY;
|
||
TOILETCOUNT += thirdItem.TOILETCOUNT;
|
||
HASSHOWERROOM += thirdItem.HASSHOWERROOM;
|
||
HASWATERROOM += thirdItem.HASWATERROOM;
|
||
MICROWAVEOVEN += thirdItem.MICROWAVEOVEN;
|
||
WASHERCOUNT += thirdItem.WASHERCOUNT;
|
||
SLEEPINGPODS += thirdItem.SLEEPINGPODS;
|
||
SHOWERROOM += thirdItem.SHOWERROOM;
|
||
SMALLPARKING += thirdItem.SMALLPARKING;
|
||
PACKING += thirdItem.PACKING;
|
||
TRUCKPACKING += thirdItem.TRUCKPACKING;
|
||
DANPACKING += thirdItem.DANPACKING;
|
||
DININGBXCOUNT += thirdItem.DININGBXCOUNT;
|
||
DININGROOMCOUNT += thirdItem.DININGROOMCOUNT;
|
||
HASBACKGROUNDRADIO += thirdItem.HASBACKGROUNDRADIO;
|
||
POINTCONTROLCOUNT += thirdItem.POINTCONTROLCOUNT;
|
||
TOILET_PAPER += thirdItem.TOILET_PAPER;
|
||
MABROOMWATER_DISPENSER += thirdItem.MABROOMWATER_DISPENSER;
|
||
NURSING_TABLE += thirdItem.NURSING_TABLE;
|
||
BABY_COT += thirdItem.BABY_COT;
|
||
CHANGING_TABLE += thirdItem.CHANGING_TABLE;
|
||
DROOMWATER_DISPENSER += thirdItem.DROOMWATER_DISPENSER;
|
||
UREA_COUNT += thirdItem.UREA_COUNT;
|
||
VEHICLEWATERFILLING += thirdItem.VEHICLEWATERFILLING;
|
||
|
||
if (thirdItem.HASPILOTLOUNGE) {
|
||
HASPILOTLOUNGE = true;
|
||
}
|
||
if (thirdItem.HASCHILD) {
|
||
HASCHILD = true;
|
||
}
|
||
|
||
LIAUTOCHARGESum += Number(thirdItem.LIAUTOCHARGE || 0);
|
||
STATEGRIDCHARGESum += Number(thirdItem.STATEGRIDCHARGE || 0);
|
||
GACENERGYCHARGESum += Number(thirdItem.GACENERGYCHARGE || 0);
|
||
});
|
||
}
|
||
subItem.LiXiang = LIAUTOCHARGESum;
|
||
subItem.Sun = STATEGRIDCHARGESum;
|
||
subItem.chargeAndReplaceSum = GACENERGYCHARGESum;
|
||
|
||
// 判断小图标是否有值
|
||
subItem.imgList = [
|
||
{
|
||
url:
|
||
HASPANTRY > 0
|
||
? "https://eshangtech.com/minTestImg/manWCIcon.svg"
|
||
: "https://eshangtech.com/minTestImg/nomanWCIcon.svg",
|
||
isShow: HASPANTRY > 0,
|
||
},
|
||
{
|
||
url:
|
||
HASWIFI > 0
|
||
? "https://eshangtech.com/minTestImg/womanWCIcon.svg"
|
||
: "https://eshangtech.com/minTestImg/nowomanWCIcon.svg",
|
||
},
|
||
// {
|
||
// url:
|
||
// TOILETCOUNT > 0
|
||
// ? "https://eshangtech.com/minTestImg/TOILETCOUNT.svg"
|
||
// : "https://eshangtech.com/minTestImg/noTOILETCOUNT.svg",
|
||
// isShow: TOILETCOUNT > 0,
|
||
// },
|
||
{
|
||
url:
|
||
HASSHOWERROOM > 0
|
||
? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
|
||
isShow: HASSHOWERROOM > 0,
|
||
},
|
||
{
|
||
url:
|
||
HASWATERROOM > 0
|
||
? "https://eshangtech.com/minTestImg/HASWATERROOM.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASWATERROOM.svg",
|
||
isShow: HASWATERROOM > 0,
|
||
},
|
||
{
|
||
url:
|
||
MICROWAVEOVEN > 0
|
||
? "https://eshangtech.com/minTestImg/MICROWAVEOVEN.svg"
|
||
: "https://eshangtech.com/minTestImg/noMICROWAVEOVEN.svg",
|
||
isShow: MICROWAVEOVEN > 0,
|
||
},
|
||
{
|
||
url:
|
||
WASHERCOUNT > 0
|
||
? "https://eshangtech.com/minTestImg/WASHERCOUNT.svg"
|
||
: "https://eshangtech.com/minTestImg/noWASHERCOUNT.svg",
|
||
isShow: WASHERCOUNT > 0,
|
||
},
|
||
{
|
||
url:
|
||
SLEEPINGPODS > 0
|
||
? "https://eshangtech.com/minTestImg/SLEEPINGPODS.svg"
|
||
: "https://eshangtech.com/minTestImg/noSLEEPINGPODS.svg",
|
||
isShow: SLEEPINGPODS > 0,
|
||
},
|
||
{
|
||
url:
|
||
HASPILOTLOUNGE > 0
|
||
? "https://eshangtech.com/minTestImg/HASPILOTLOUNGE.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASPILOTLOUNGE.svg",
|
||
isShow: HASPILOTLOUNGE > 0,
|
||
},
|
||
{
|
||
url:
|
||
HASCHILD > 0
|
||
? "https://eshangtech.com/minTestImg/HASCHILD.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASCHILD.svg",
|
||
isShow: HASCHILD > 0,
|
||
},
|
||
{
|
||
url:
|
||
DININGBXCOUNT > 0
|
||
? "https://eshangtech.com/minTestImg/DININGBXCOUNT.svg"
|
||
: "https://eshangtech.com/minTestImg/noDININGBXCOUNT.svg",
|
||
isShow: DININGBXCOUNT > 0,
|
||
},
|
||
{
|
||
url:
|
||
SMALLPARKING > 0
|
||
? "https://eshangtech.com/minTestImg/SMALLPARKING.svg"
|
||
: "https://eshangtech.com/minTestImg/noSMALLPARKING.svg",
|
||
isShow: SMALLPARKING > 0,
|
||
},
|
||
{
|
||
url:
|
||
PACKING > 0
|
||
? "https://eshangtech.com/minTestImg/PACKING.svg"
|
||
: "https://eshangtech.com/minTestImg/noPACKING.svg",
|
||
isShow: PACKING > 0,
|
||
},
|
||
{
|
||
url:
|
||
TRUCKPACKING > 0
|
||
? "https://eshangtech.com/minTestImg/TRUCKPACKING.svg"
|
||
: "https://eshangtech.com/minTestImg/noTRUCKPACKING.svg",
|
||
isShow: TRUCKPACKING > 0,
|
||
},
|
||
{
|
||
url:
|
||
DANPACKING > 0
|
||
? "https://eshangtech.com/minTestImg/DANPACKING.svg"
|
||
: "https://eshangtech.com/minTestImg/noDANPACKING.svg",
|
||
isShow: DANPACKING > 0,
|
||
},
|
||
// {
|
||
// url:
|
||
// DININGROOMCOUNT > 0
|
||
// ? "https://eshangtech.com/minTestImg/DININGROOMCOUNT.svg"
|
||
// : "https://eshangtech.com/minTestImg/noDININGROOMCOUNT.svg",
|
||
// isShow: DININGROOMCOUNT > 0,
|
||
// },
|
||
{
|
||
url:
|
||
HASBACKGROUNDRADIO > 0
|
||
? "https://eshangtech.com/minTestImg/HASBACKGROUNDRADIO.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASBACKGROUNDRADIO.svg",
|
||
isShow: HASBACKGROUNDRADIO > 0,
|
||
},
|
||
// {
|
||
// url:
|
||
// POINTCONTROLCOUNT > 0
|
||
// ? "https://eshangtech.com/minTestImg/POINTCONTROLCOUNT.svg"
|
||
// : "https://eshangtech.com/minTestImg/noPOINTCONTROLCOUNT.svg",
|
||
// isShow: POINTCONTROLCOUNT > 0,
|
||
// },
|
||
{
|
||
url:
|
||
TOILET_PAPER > 0
|
||
? "https://eshangtech.com/minTestImg/TOILET_PAPER.svg"
|
||
: "https://eshangtech.com/minTestImg/noTOILET_PAPER.svg",
|
||
isShow: TOILET_PAPER > 0,
|
||
},
|
||
{
|
||
url:
|
||
CHANGING_TABLE > 0
|
||
? "https://eshangtech.com/minTestImg/CHANGING_TABLE.svg"
|
||
: "https://eshangtech.com/minTestImg/noCHANGING_TABLE.svg",
|
||
isShow: CHANGING_TABLE > 0,
|
||
},
|
||
{
|
||
url:
|
||
NURSING_TABLE > 0
|
||
? "https://eshangtech.com/minTestImg/NURSING_TABLE.svg"
|
||
: "https://eshangtech.com/minTestImg/noNURSING_TABLE.svg",
|
||
isShow: NURSING_TABLE > 0,
|
||
},
|
||
{
|
||
url:
|
||
BABY_COT > 0
|
||
? "https://eshangtech.com/minTestImg/BABY_COT.svg"
|
||
: "https://eshangtech.com/minTestImg/noBABY_COT.svg",
|
||
isShow: BABY_COT > 0,
|
||
},
|
||
];
|
||
// 理想的随机百分比
|
||
let LXRate = this.handleGetRandomData(0, 60);
|
||
// 阳光的随机百分比
|
||
let SunRate = this.handleGetRandomData(0, 60);
|
||
// 充换电的随机百分比
|
||
let chargeAndReplaceRate = this.handleGetRandomData(0, 60);
|
||
|
||
subItem.LXHave = Math.floor(subItem.LiXiang * (LXRate / 100));
|
||
subItem.SunHave = Math.floor(subItem.Sun * (SunRate / 100));
|
||
subItem.chargeAndReplace = Math.floor(
|
||
subItem.chargeAndReplaceSum * (chargeAndReplaceRate / 100)
|
||
);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 高德key
|
||
const key = "6e96a801bcea5290d3dcbf100358a6b3";
|
||
// 起点经纬度
|
||
const start =
|
||
_this.pageType !== "scanCode"
|
||
? `${this.startObj.longitude},${this.startObj.latitude}`
|
||
: "";
|
||
// 终点经纬度
|
||
const end =
|
||
_this.pageType !== "scanCode"
|
||
? `${this.endObj.longitude},${this.endObj.latitude}`
|
||
: "";
|
||
// 拿到途径点的所有坐标
|
||
let routePoint = "";
|
||
|
||
// 下面的距离变成高速实际距离 不再是直线距离
|
||
if (list && list.length > 0) {
|
||
for (let i = 0; i < list.length; i++) {
|
||
let item = list[i];
|
||
|
||
if (_this.pageType !== "scanCode") {
|
||
let itemEnd = `${list[i].SERVERPART_X},${list[i].SERVERPART_Y}`;
|
||
await new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve();
|
||
}, 300);
|
||
});
|
||
const res = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${start}&destination=${itemEnd}&strategy=0`,
|
||
method: "GET",
|
||
success(res) {
|
||
if (
|
||
res.data &&
|
||
res.data.route &&
|
||
res.data.route.paths &&
|
||
res.data.route.paths.length > 0
|
||
) {
|
||
console.log("res1", res);
|
||
|
||
resolve(res.data.route.paths[0] || {});
|
||
} else {
|
||
resolve(undefined);
|
||
}
|
||
},
|
||
});
|
||
});
|
||
console.log("itemEnd", itemEnd);
|
||
console.log("res", res);
|
||
|
||
if (res) {
|
||
list[i].SERVERPART_DISTANCEGD = (
|
||
Number(res.distance) / 1000
|
||
).toFixed(2);
|
||
}
|
||
|
||
let chargeObj = this.handleHaveRandomData();
|
||
list[i].chargeObj = chargeObj;
|
||
|
||
console.log("item", item);
|
||
}
|
||
|
||
let LXSum = 0; // 理想
|
||
let WLSum = 0; // 蔚来
|
||
let SunSum = 0; // 新能源
|
||
let chargeAndReplaceSum = 0; // 国网
|
||
|
||
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
||
item.RegionInfo.forEach((item) => {
|
||
chargeAndReplaceSum += item.STATEGRIDCHARGE; // 国网
|
||
SunSum += item.GACENERGYCHARGE; // 新能源
|
||
WLSum += item.OTHERCHAGRE; // 蔚来
|
||
// LXSum += item.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,
|
||
};
|
||
}
|
||
}
|
||
|
||
console.log("listasdsadasdas", list);
|
||
|
||
_this.detailObj = {
|
||
// distanceNumber: distance,
|
||
// hour: timeObj.hourStr,
|
||
// minutes: timeObj.minuteStr,
|
||
// tolls: tolls,
|
||
// haveProgress: ((smoothAcount / allAcount) * 100).toFixed(2),
|
||
servicePart: list,
|
||
};
|
||
_this.handleGetChargeData(list, ["新桥", "丰乐", "肥东"]);
|
||
},
|
||
|
||
// 随机给充电桩数据
|
||
handleHaveRandomData() {
|
||
// 理想当前充电的
|
||
let LXHave = 0;
|
||
// 理想的全部充电的
|
||
let LXSum = 0;
|
||
// 阳光当前充电的
|
||
let SunHave = 0;
|
||
// 阳光全部充电的
|
||
let SunSum = 0;
|
||
// 充换电当前充电的
|
||
let chargeAndReplace = 0;
|
||
// 充换电全部充电的
|
||
let chargeAndReplaceSum = 0;
|
||
|
||
// 给理想随机 总数
|
||
LXSum = this.handleGetRandomData(15, 20);
|
||
// 给阳光随机 总数
|
||
SunSum = this.handleGetRandomData(10, 17);
|
||
// 给充换电随机 总数
|
||
chargeAndReplaceSum = this.handleGetRandomData(5, 10);
|
||
|
||
// 理想的随机百分比
|
||
let LXRate = this.handleGetRandomData(0, 60);
|
||
// 阳光的随机百分比
|
||
let SunRate = this.handleGetRandomData(0, 60);
|
||
// 充换电的随机百分比
|
||
let chargeAndReplaceRate = this.handleGetRandomData(0, 60);
|
||
|
||
LXHave = Math.floor(LXSum * (LXRate / 100));
|
||
SunHave = Math.floor(SunSum * (SunRate / 100));
|
||
chargeAndReplace = Math.floor(
|
||
chargeAndReplaceSum * (chargeAndReplaceRate / 100)
|
||
);
|
||
|
||
return {
|
||
LXHave: LXHave,
|
||
LXSum: LXSum,
|
||
SunHave: SunHave,
|
||
SunSum: SunSum,
|
||
chargeAndReplace: chargeAndReplace,
|
||
chargeAndReplaceSum: chargeAndReplaceSum,
|
||
};
|
||
},
|
||
// 拿到充电的理想数据
|
||
async handleGetChargeData(serviceList, nameList) {
|
||
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 (nameList && nameList.length > 0) {
|
||
nameList.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;
|
||
});
|
||
}
|
||
|
||
// 查询具体状态
|
||
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 (serviceList && serviceList.length > 0) {
|
||
let newRes = JSON.parse(JSON.stringify(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;
|
||
console.log("LXEmpty", LXEmpty);
|
||
console.log("LXSum", LXSum);
|
||
|
||
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;
|
||
}
|
||
});
|
||
|
||
console.log("newRes", newRes);
|
||
this.detailObj.servicePart = newRes;
|
||
this.$forceUpdate();
|
||
}
|
||
uni.hideLoading();
|
||
},
|
||
// 生成随机数
|
||
handleGetRandomData(max, min) {
|
||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||
},
|
||
// 跳转地图服务区详情
|
||
handleGoServiceDetail(id) {
|
||
uni.navigateTo({
|
||
url: "/pages/serviceDetail/index?id=" + id,
|
||
});
|
||
// uni.navigateTo({
|
||
// url: `/pages/serviceDetail/mapDetail/index?servicePartId=${id}`,
|
||
// });
|
||
},
|
||
// 打开对应的悬浮框
|
||
handleOpenDetail(obj) {
|
||
console.log("obj", 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 },
|
||
{ label: "国网", value: 4 },
|
||
];
|
||
this.selectPopup = 1;
|
||
},
|
||
handleChangeSelectPopup(value) {
|
||
this.selectPopup = value;
|
||
if (value === 1) {
|
||
this.chargeDetailList = this.nowCurrentObj.LXInfoList;
|
||
} else {
|
||
this.chargeDetailList = [];
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.chargeBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.serviceList {
|
||
margin-top: 8px;
|
||
width: 100%;
|
||
.serviceItem {
|
||
// display: flex;
|
||
// align-items: center;
|
||
margin-bottom: 24rpx;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
padding-bottom: 20rpx;
|
||
.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;
|
||
}
|
||
}
|
||
.detailBox {
|
||
width: calc(100% - 164rpx);
|
||
// height: 144rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
.detailTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.topLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
.detailName {
|
||
display: inline-block;
|
||
max-width: 400rpx;
|
||
font-family: "PingFang SC", "Noto Sans CJK SC",
|
||
"Microsoft YaHei", sans-serif;
|
||
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 {
|
||
.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;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.centerItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 8rpx 0 20rpx;
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
.centerConfigItem {
|
||
.configImg {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
.chargeIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.chargeTitle {
|
||
display: inline-block;
|
||
max-width: 400rpx;
|
||
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
|
||
sans-serif;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.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: 28rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
.sum {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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% - 72rpx) / 4);
|
||
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;
|
||
box-sizing: border-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
.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>
|