ylj20011123 2bdb2c9f60 update
2025-06-11 19:20:31 +08:00

2283 lines
80 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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]
: '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>
<span class="detailState" :style="{
color: `${item.businessObj.AVR_TICKET >= 30
? '#FF5959'
: item.businessObj.AVR_TICKET < 30 &&
item.businessObj.AVR_TICKET >= 15
? '#FF8830'
: item.businessObj.AVR_TICKET < 15
? '#01BD8B'
: ''
}`,
backgroundColor: `rgba(${item.businessObj.AVR_TICKET >= 30
? '255, 89, 89, 0.1'
: item.businessObj.AVR_TICKET < 30 &&
item.businessObj.AVR_TICKET >= 15
? '255, 136, 48,0.1'
: item.businessObj.AVR_TICKET < 15
? '1, 189, 139, 0.1'
: ''
})`,
}" v-if="item.businessObj">{{
item.businessObj.AVR_TICKET >= 30
? "繁忙"
: item.businessObj.AVR_TICKET >= 15 &&
item.businessObj.AVR_TICKET < 30 ? "良好" : item.businessObj.AVR_TICKET < 15 ? "空闲" : "" }}</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="https://eshangtech.com/wanmeiyizhanImg/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)" v-if="styleType === 1">
<!-- 拥有设施的小图标 -->
<view class="centerConfigItem" v-for="(subItem, index) in item.imgList" :key="index">
<image class="configImg" :src="subItem.url" />
<text class="configText">{{ subItem.title || "" }}</text>
</view>
</view>
<!-- 新款样式 -->
<view class="centerItem" @click="handleGoServiceDetail(item.SERVERPART_ID)" v-if="styleType === 2">
<view class="centerConfigItemNew" v-for="(subItem, index) in item.imgList.slice(
0,
item.noMore ? 5 : 12
)" :key="index">
<image class="configImg" :src="subItem.url" />
<text class="configText">{{ subItem.title || "" }}</text>
</view>
<view class="centerConfigItemNew" v-if="item.noMore" @click.stop="handleGetMore(item)">
<image class="configImg" src="https://eshangtech.com/minTestImg/chargeImgNew/getMore.svg" />
<text class="configText">更多</text>
</view>
</view>
<view v-if="styleType === 1" 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="https://eshangtech.com/wanmeiyizhanImg/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 class="bottomItemNew" v-if="styleType === 2" @click="handleOpenDetail(item)">
<view class="leftCharge">
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
<image class="chargeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
</view>
<view class="rightcharge">
<span class="empty">空</span>
<span class="emptyValue">{{
item.allChargeDetail && item.allChargeDetail.empty
? item.allChargeDetail.empty
: "0"
}}</span>
<span class="sum">/{{
item.allChargeDetail && item.allChargeDetail.allSum
? item.allChargeDetail.allSum
: "0"
}}</span>
</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="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(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
? '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>
</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,
SERVERPART_TARGETOBJ: {},
styleType: 2, // 1 为老款样式 2 为蓝湖新的样式
};
},
props: ["serviceAreaList", "startObj", "endObj", "pageType"],
onReady() {
console.log("onShow");
let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
if (SERVERPART_TARGET) {
this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
} else {
// 拿到枚举
this.handleSERVERPART_TARGETOBJ();
}
this.handldGetData();
},
methods: {
handleGetMore(obj) {
obj.noMore = false;
},
// 解服务区的一个枚举
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;
},
async handldGetData() {
uni.showLoading({
title: "加载中...",
});
// 先去请求一下服务区的繁忙度
let businessReq = {
action_type: "getCurHalfCollect",
province_code: 3544,
};
const businessRes = await new Promise((resolve, reject) => {
uni.request({
url: `https://cloud.eshangtech.com/MobileServicePlatform/Handler/handler_ajax.ashx`,
method: "GET",
data: businessReq,
success(res) {
let data = res.data.CollectionObject;
if (data && data.length > 0) {
resolve(data);
} else {
resolve([]);
}
},
});
});
let seatInfo = uni.getStorageSync("seatInfo");
if (seatInfo) {
// this.seatInfo = JSON.parse(seatInfo);
this.seatInfo = 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 serviceArea = await this.$api.$javaGet2('/third-party/getServerPartList', req)
let serviceList = serviceArea.Result_Data.List;
uni.setStorageSync("serviceList", JSON.stringify(serviceList));
}
let _this = this;
let list = [];
let nameList = [];
if (_this.serviceAreaList && _this.serviceAreaList.length > 0) {
_this.serviceAreaList.forEach((item) => {
nameList.push(item.split("服务区")[0]);
if (serviceList && serviceList.length > 0) {
serviceList.forEach((subItem) => {
if (item === subItem.SERVERPART_NAME) {
// 给这个服务区 赋值服务区的繁忙度
if (businessRes && businessRes.length > 0) {
businessRes.forEach((businessItem) => {
if (businessItem.SERVERPART_NAME === item) {
subItem.businessObj = businessItem;
}
});
}
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 HASMOTHER = 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; // 加水
let REFUELINGGUN92 = 0; // 加油枪92号
let REFUELINGGUN95 = 0; // 加油枪95号
let REFUELINGGUN0 = 0; // 加油枪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;
REFUELINGGUN92 += thirdItem.REFUELINGGUN92;
REFUELINGGUN95 += thirdItem.REFUELINGGUN95;
REFUELINGGUN0 += thirdItem.REFUELINGGUN0;
if (thirdItem.HASPILOTLOUNGE) {
HASPILOTLOUNGE = true;
}
if (thirdItem.HASCHILD) {
HASCHILD = true;
}
if (thirdItem.HASMOTHER) {
HASMOTHER = 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 =
this.styleType === 1
? [
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/WC.svg"
: "https://eshangtech.com/minTestImg/noWC.svg",
isShow: HASPANTRY > 0,
title: "卫生间",
},
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/motherAndBaby.svg"
: "https://eshangtech.com/minTestImg/nomotherAndBaby.svg",
isShow: HASPANTRY > 0 || HASWIFI > 0,
title: "母婴室",
},
// {
// url:
// HASSHOWERROOM > 0
// ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
// : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
// isShow: HASSHOWERROOM > 0,
// title: "淋浴房",
// },
{
url:
HASPILOTLOUNGE > 0
? "https://eshangtech.com/minTestImg/HASPILOTLOUNGE.svg"
: "https://eshangtech.com/minTestImg/noHASPILOTLOUNGE.svg",
isShow: HASPILOTLOUNGE > 0,
title: "司机之家",
},
// {
// url:
// HASWATERROOM > 0
// ? "https://eshangtech.com/minTestImg/HASWATERROOM.svg"
// : "https://eshangtech.com/minTestImg/noHASWATERROOM.svg",
// isShow: HASWATERROOM > 0,
// title: "开水器",
// },
{
url:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0
? "https://eshangtech.com/minTestImg/SMALLPARKING.svg"
: "https://eshangtech.com/minTestImg/noSMALLPARKING.svg",
isShow:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0,
title: "停车场",
},
{
url:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0
? "https://eshangtech.com/minTestImg/REFUELINGGUN.svg"
: "https://eshangtech.com/minTestImg/noREFUELINGGUN.svg",
isShow:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0,
title: "加油站",
},
{
url:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0
? "https://eshangtech.com/minTestImg/chargingStation.svg"
: "https://eshangtech.com/minTestImg/nochargingStation.svg",
isShow:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0,
title: "充电桩",
},
{
url:
DININGROOMCOUNT > 0
? "https://eshangtech.com/minTestImg/DININGROOMCOUNT.svg"
: "https://eshangtech.com/minTestImg/noDININGROOMCOUNT.svg",
isShow: DININGROOMCOUNT > 0,
title: "餐饮",
},
{
url:
HASBACKGROUNDRADIO > 0
? "https://eshangtech.com/minTestImg/HASBACKGROUNDRADIO.svg"
: "https://eshangtech.com/minTestImg/noHASBACKGROUNDRADIO.svg",
isShow: HASBACKGROUNDRADIO > 0,
title: "便利店",
},
{
url: HASCHILD
? "https://eshangtech.com/minTestImg/HASCHILD.svg"
: "https://eshangtech.com/minTestImg/noHASCHILD.svg",
isShow: SMALLPARKING,
title: "车辆维修",
},
{
url:
POINTCONTROLCOUNT > 0
? "https://eshangtech.com/minTestImg/POINTCONTROLCOUNT.svg"
: "https://eshangtech.com/minTestImg/noPOINTCONTROLCOUNT.svg",
isShow: POINTCONTROLCOUNT > 0,
title: "客房",
},
// {
// url:
// WASHERCOUNT > 0
// ? "https://eshangtech.com/minTestImg/WASHERCOUNT.svg"
// : "https://eshangtech.com/minTestImg/noWASHERCOUNT.svg",
// isShow: WASHERCOUNT > 0,
// title: "洗衣机",
// },
// {
// url:
// MICROWAVEOVEN > 0
// ? "https://eshangtech.com/minTestImg/MICROWAVEOVEN.svg"
// : "https://eshangtech.com/minTestImg/noMICROWAVEOVEN.svg",
// isShow: MICROWAVEOVEN > 0,
// title: "微波炉",
// },
// {
// 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,
// title: "淋浴间",
// },
// {
// url:
// HASWATERROOM > 0
// ? "https://eshangtech.com/minTestImg/HASWATERROOM.svg"
// : "https://eshangtech.com/minTestImg/noHASWATERROOM.svg",
// isShow: HASWATERROOM > 0,
// title: "开水器",
// },
// // {
// // url:
// // SLEEPINGPODS > 0
// // ? "https://eshangtech.com/minTestImg/SLEEPINGPODS.svg"
// // : "https://eshangtech.com/minTestImg/noSLEEPINGPODS.svg",
// // isShow: SLEEPINGPODS > 0,
// // title: "睡眠仓",
// // },
// {
// url:
// HASPILOTLOUNGE > 0
// ? "https://eshangtech.com/minTestImg/HASPILOTLOUNGE.svg"
// : "https://eshangtech.com/minTestImg/noHASPILOTLOUNGE.svg",
// isShow: HASPILOTLOUNGE > 0,
// title: "司机之家",
// },
// {
// url:
// HASCHILD > 0
// ? "https://eshangtech.com/minTestImg/HASCHILD.svg"
// : "https://eshangtech.com/minTestImg/noHASCHILD.svg",
// isShow: HASCHILD > 0,
// title: "车辆维修",
// },
// {
// url:
// DININGBXCOUNT > 0
// ? "https://eshangtech.com/minTestImg/DININGBXCOUNT.svg"
// : "https://eshangtech.com/minTestImg/noDININGBXCOUNT.svg",
// isShow: DININGBXCOUNT > 0,
// title: "商铺",
// },
// {
// url:
// SMALLPARKING > 0
// ? "https://eshangtech.com/minTestImg/SMALLPARKING.svg"
// : "https://eshangtech.com/minTestImg/noSMALLPARKING.svg",
// isShow: SMALLPARKING > 0,
// title: "轿车车位",
// },
// {
// url:
// PACKING > 0
// ? "https://eshangtech.com/minTestImg/PACKING.svg"
// : "https://eshangtech.com/minTestImg/noPACKING.svg",
// isShow: PACKING > 0,
// title: "轿车车位",
// },
// {
// 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,
// title: "便利店",
// },
// // {
// // 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,
// title: "厕纸巾",
// },
// {
// url:
// CHANGING_TABLE > 0
// ? "https://eshangtech.com/minTestImg/CHANGING_TABLE.svg"
// : "https://eshangtech.com/minTestImg/noCHANGING_TABLE.svg",
// isShow: CHANGING_TABLE > 0,
// title: "尿布台",
// },
// {
// url:
// NURSING_TABLE > 0
// ? "https://eshangtech.com/minTestImg/NURSING_TABLE.svg"
// : "https://eshangtech.com/minTestImg/noNURSING_TABLE.svg",
// isShow: NURSING_TABLE > 0,
// title: "哺乳桌",
// },
// {
// url:
// BABY_COT > 0
// ? "https://eshangtech.com/minTestImg/BABY_COT.svg"
// : "https://eshangtech.com/minTestImg/noBABY_COT.svg",
// isShow: BABY_COT > 0,
// title: "婴儿床",
// },
]
: this.styleType === 2
? [
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
isShow: HASPANTRY > 0,
title: "卫生间",
},
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
isShow: HASPANTRY > 0 || HASWIFI > 0,
title: "母婴室",
},
{
url:
HASPILOTLOUNGE > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
isShow: HASPILOTLOUNGE > 0,
title: "司机之家",
},
{
url:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
isShow:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0,
title: "停车场",
},
{
url:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
isShow:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0,
title: "加油站",
},
{
url:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
isShow:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0,
title: "充电桩",
},
{
url:
DININGROOMCOUNT > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
isShow: DININGROOMCOUNT > 0,
title: "餐饮",
},
{
url:
HASBACKGROUNDRADIO > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
isShow: HASBACKGROUNDRADIO > 0,
title: "便利店",
},
{
url: HASCHILD
? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
isShow: SMALLPARKING,
title: "车辆维修",
},
{
url:
POINTCONTROLCOUNT > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
isShow: POINTCONTROLCOUNT > 0,
title: "客房",
},
{
url:
WASHERCOUNT > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/WASHERCOUNT.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noWASHERCOUNT.svg",
isShow: WASHERCOUNT > 0,
title: "洗衣机",
},
{
url:
MICROWAVEOVEN > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/MICROWAVEOVEN.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noMICROWAVEOVEN.svg",
isShow: MICROWAVEOVEN > 0,
title: "微波炉",
},
]
: [];
// 理想的随机百分比
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)
);
});
}
});
}
console.log("_this.serviceAreaList", _this.serviceAreaList);
// 高德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];
item.noMore = true;
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,
};
}
}
// 根据当前位置到目的地的位置 排序
for (let i = 0; i < list.length - 1; i++) {
// 外层循环控制排序趟数
for (let j = 0; j < list.length - i - 1; j++) {
// 内层循环控制每趟排序多少次
// 如果当前元素大于下一个元素,则交换它们
if (
Number(list[j].SERVERPART_DISTANCE || 0) >
Number(list[j + 1].SERVERPART_DISTANCE || 0)
) {
let temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
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, ["新桥", "丰乐", "肥东"]);
_this.handleGetChargeData(list, nameList);
uni.hideLoading();
},
// 随机给充电桩数据
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("/oss/upload", {
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("/oss/upload", {
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("/oss/upload", {
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 (this.styleType === 2) {
item.allChargeDetail = {
allSum:
Number(LXSum || 0) +
Number(item.WLDetail.WLSum || 0) +
Number(item.SunDetail.SunSum || 0) +
Number(item.chargeAndReplaceDetail.chargeAndReplaceSum || 0),
empty:
Number(LXEmpty || 0) +
Number(item.WLDetail.WLEmpty || 0) +
Number(item.SunDetail.WLEmpty || 0) +
Number(item.chargeAndReplaceDetail.WLEmpty || 0),
};
}
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 = [];
}
this.selectSmallTab = 0
},
},
};
</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: 300rpx;
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;
margin-top: 24rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
.centerConfigItem {
width: calc(100% / 5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
.configImg {
width: 32rpx;
height: 32rpx;
// margin-right: 8rpx;
margin-bottom: 8rpx;
}
.configText {
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
sans-serif;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 40rpx;
}
}
.centerConfigItemNew {
width: calc(100% / 6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
.configImg {
width: 48rpx;
height: 48rpx;
// margin-right: 8rpx;
margin-bottom: 8rpx;
}
.configText {
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
sans-serif;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 40rpx;
}
}
}
.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: 400;
font-size: 28rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 4rpx;
}
.sum {
font-family: "DINAlternate";
font-weight: 400;
font-size: 28rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
}
.bottomItemNew {
width: 100%;
box-sizing: border-box;
padding: 18rpx 24rpx 22rpx;
background: #f8f8f8;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
.leftCharge {
display: flex;
align-items: center;
.chargeIcon {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
border-radius: 50%;
}
}
.rightcharge {
.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: 400;
font-size: 28rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 4rpx;
}
.sum {
font-family: "DINAlternate";
font-weight: 400;
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>