2389 lines
79 KiB
Vue
2389 lines
79 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view :class="showListPage ? 'mapBox moveLeft' : 'mapBox'" v-show="!showListPage">
|
||
|
||
<!-- <view class="topBox">
|
||
<view class="topRight">
|
||
<image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png" />
|
||
<input style="margin-left: 16rpx; font-size: 28rpx" placeholder="请输入服务区" v-model="searchText"
|
||
@confirm="handleConfirm" />
|
||
</view>
|
||
|
||
<view class="listBox" @click="handleChangePageType">
|
||
<image class="listIcon" src="/static/home/listIcon.svg" />
|
||
<text class="text">列表</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<cover-view v-if="loginType !== 'min'" style="width: 100vw; height: calc(100vh - 606rpx);position: relative;"
|
||
v-show="showMap">
|
||
<map id="myMap" :longitude="longitude" :latitude="latitude" class="map" :scale="17" :show-location="true"
|
||
:markers="markers" :enable-scroll="!isDragging" @markertap="handleClickMarker"></map>
|
||
|
||
<cover-view class="statusBox" style="z-index: 9999;">
|
||
<!-- 国网 -->
|
||
<cover-view class="statusItem" style="margin: 0 16rpx;">
|
||
<cover-view class="colorBox" style="background-color: #ff9929"></cover-view>
|
||
<cover-view class="brandCharge">国网</cover-view>
|
||
<cover-view class="empty">空</cover-view>
|
||
<cover-view class="valueBox">
|
||
<cover-view class="emptyValue">{{
|
||
chargeData && chargeData.GWDetail
|
||
? chargeData.GWDetail.GWEmpty
|
||
: 0
|
||
}}
|
||
</cover-view>
|
||
<cover-view class="sum">/{{
|
||
chargeData && chargeData.GWDetail
|
||
? chargeData.GWDetail.GWSum
|
||
: 0
|
||
}}</cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
|
||
<!-- 理想 -->
|
||
<cover-view class="statusItem" style="margin: 0 16rpx;">
|
||
<cover-view class="colorBox" style="background-color: #d81e06"></cover-view>
|
||
|
||
<cover-view class="brandCharge">理想</cover-view>
|
||
<cover-view class="empty">空</cover-view>
|
||
<cover-view class="valueBox">
|
||
<cover-view class="emptyValue">{{
|
||
chargeData && chargeData.LXDetail
|
||
? chargeData.LXDetail.LXEmpty
|
||
: 0
|
||
}}</cover-view>
|
||
<cover-view class="sum">/{{
|
||
chargeData && chargeData.LXDetail
|
||
? chargeData.LXDetail.LXSum
|
||
: 0
|
||
}}</cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
|
||
<!-- 蔚来 -->
|
||
<cover-view class="statusItem">
|
||
<cover-view class="colorBox" style="background-color: #f4ea2a;margin: 0 16rpx;"></cover-view>
|
||
<cover-view class="brandCharge">蔚来</cover-view>
|
||
<cover-view class="empty">空</cover-view>
|
||
<cover-view class="valueBox">
|
||
<cover-view class="emptyValue">{{
|
||
chargeData && chargeData.WLDetail
|
||
? chargeData.WLDetail.WLEmpty
|
||
? chargeData.WLDetail.WLEmpty
|
||
: 0
|
||
: 0
|
||
}}</cover-view>
|
||
<cover-view class="sum">/{{
|
||
chargeData && chargeData.WLDetail
|
||
? chargeData.WLDetail.WLSum
|
||
? chargeData.WLDetail.WLSum
|
||
: 0
|
||
: 0
|
||
}}</cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
|
||
<!-- 交控 -->
|
||
<cover-view class="statusItem" style="margin: 0 16rpx;">
|
||
<cover-view class="colorBox" style="background-color: #57d16e"></cover-view>
|
||
<cover-view class="brandCharge">交控新能源</cover-view>
|
||
<cover-view class="empty">空</cover-view>
|
||
<cover-view class="valueBox">
|
||
<cover-view class="emptyValue">{{
|
||
chargeData && chargeData.JKDetail
|
||
? chargeData.JKDetail.JKEmpty
|
||
: 0
|
||
}}
|
||
</cover-view>
|
||
<cover-view class="sum">/{{
|
||
chargeData && chargeData.JKDetail
|
||
? chargeData.JKDetail.JKSum
|
||
: 0
|
||
}}</cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
|
||
</cover-view>
|
||
|
||
<view v-else style="width: 100vw; height: calc(100vh - 606rpx);position: relative;" v-show="showMap">
|
||
<map id="myMap" :longitude="longitude" :latitude="latitude" class="map" :scale="17" :show-location="true"
|
||
:markers="markers" :enable-scroll="!isDragging" @markertap="handleClickMarker"></map>
|
||
|
||
<view class="statusBox" @click="handleShowChargeDetail">
|
||
<view>
|
||
<!-- 国网 -->
|
||
<view class="statusItem">
|
||
<!-- <image
|
||
class="statusIcon"
|
||
src="https://eshangtech.com/minTestImg/stateGridIcon.png"
|
||
/> -->
|
||
<view class="colorBox" style="background-color: #ff9929"></view>
|
||
<text class="brandCharge">国网</text>
|
||
<span class="empty">空</span>
|
||
<view class="valueBox">
|
||
<span class="emptyValue">{{
|
||
chargeData && chargeData.GWDetail
|
||
? chargeData.GWDetail.GWEmpty
|
||
: 0
|
||
}}
|
||
</span>
|
||
<span class="sum">/{{
|
||
chargeData && chargeData.GWDetail
|
||
? chargeData.GWDetail.GWSum
|
||
: 0
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 理想 -->
|
||
<view class="statusItem">
|
||
<view class="colorBox" style="background-color: #d81e06"></view>
|
||
<!-- <image
|
||
class="statusIcon"
|
||
src="https://eshangtech.com/minTestImg/LXIcon.png"
|
||
/> -->
|
||
<text class="brandCharge">理想</text>
|
||
<span class="empty">空</span>
|
||
<view class="valueBox">
|
||
<span class="emptyValue">{{
|
||
chargeData && chargeData.LXDetail
|
||
? chargeData.LXDetail.LXEmpty
|
||
: 0
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
chargeData && chargeData.LXDetail
|
||
? chargeData.LXDetail.LXSum
|
||
: 0
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 蔚来 -->
|
||
<view class="statusItem">
|
||
<!-- <image
|
||
class="statusIcon"
|
||
src="https://eshangtech.com/minTestImg/WLIcon.png"
|
||
/> -->
|
||
<view class="colorBox" style="background-color: #f4ea2a"></view>
|
||
<text class="brandCharge">蔚来</text>
|
||
<span class="empty">空</span>
|
||
<view class="valueBox">
|
||
<span class="emptyValue">{{
|
||
chargeData && chargeData.WLDetail
|
||
? chargeData.WLDetail.WLEmpty
|
||
? chargeData.WLDetail.WLEmpty
|
||
: 0
|
||
: 0
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
chargeData && chargeData.WLDetail
|
||
? chargeData.WLDetail.WLSum
|
||
? chargeData.WLDetail.WLSum
|
||
: 0
|
||
: 0
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 交控 -->
|
||
<view class="statusItem">
|
||
<!-- <image
|
||
class="statusIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg"
|
||
/> -->
|
||
<view class="colorBox" style="background-color: #57d16e"></view>
|
||
<text class="brandCharge">交控新能源</text>
|
||
<span class="empty">空</span>
|
||
<view class="valueBox">
|
||
<span class="emptyValue">{{
|
||
chargeData && chargeData.JKDetail
|
||
? chargeData.JKDetail.JKEmpty
|
||
: 0
|
||
}}
|
||
</span>
|
||
<span class="sum">/{{
|
||
chargeData && chargeData.JKDetail
|
||
? chargeData.JKDetail.JKSum
|
||
: 0
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="pageBottomStyle">
|
||
<view class="pageBottomTop">
|
||
<view class="leftSearchBox">
|
||
<image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/chargeSearch.png" />
|
||
<input style="margin-left: 16rpx; font-size: 28rpx;width: calc(100% - 44rpx);" placeholder="请输入服务区"
|
||
v-model="searchText" @confirm="handleConfirm" />
|
||
</view>
|
||
|
||
<view class="rightBox" @click="handleChangePageType">
|
||
显示列表
|
||
</view>
|
||
</view>
|
||
|
||
<view class="funBox">
|
||
<view class="funItem" @click="handleScan">
|
||
<image class="funItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/scanCode.gif" />
|
||
<span class="funItemText">扫一扫</span>
|
||
</view>
|
||
|
||
<view class="funItem" style="margin-left: 20rpx;" @click="handleShowLocal">
|
||
<image class="funItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/chargeLocal.png" />
|
||
<span class="funItemText">定位</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="currentServiceBox">
|
||
<chargeBoxStyle :dataList="dataList" :pageType="'mapList'" :hideConfig="true"
|
||
:noChargeDetail="loginType !== 'min'" />
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- <view style="width: 100%; display: flex;align-items: flex-start;justify-content: space-between;">
|
||
<view style="width: calc(100vw- 120rpx)">
|
||
<view class="serviceDetailBox" v-if="showChargeBox">
|
||
<charge-box ref="chargeBoxRef" :serviceAreaList="currentServiceList" :pageType="'mapIndex'"
|
||
@allChargeData="handleGetChargeData" @handleChangeShow="handleChangeShow" />
|
||
</view>
|
||
</view>
|
||
<view style="width: 120rpx">
|
||
<view style="margin-top: 16rpx;" class="scanBox" direction="all" @change="handleChangeScanBox"
|
||
:x="positionX || 16" :y="positionY || 60" :damping="100" :friction="100" :inertia="false">
|
||
|
||
<view class="scanIconBox" @click="handleScan">
|
||
<image class="scanIcon" src="/static/home/scanCodeIcon.svg" />
|
||
</view>
|
||
</view>
|
||
|
||
<view style="margin-top: 16rpx;" class="localPosition" @click="handleShowLocal">
|
||
<image class="localIcon" src="/static/home/localPosition.svg" />
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
</view>
|
||
|
||
<view :class="showListPage ? 'listPage moveRight' : 'listPage '" v-show="showListPage">
|
||
<!-- 搜索框 -->
|
||
<!-- <view class="searchBox">
|
||
<view class="topRight">
|
||
<image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png" />
|
||
<input style="margin-left: 16rpx; font-size: 28rpx" placeholder="请输入服务区" v-model="searchText"
|
||
@confirm="handleConfirm" />
|
||
</view>
|
||
|
||
<view class="listBox" @click="handleChangePageType">
|
||
<image class="listIcon" src="/static/home/mapFixed.svg" />
|
||
<text class="text">地图</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="pageBottomTop">
|
||
<view class="leftSearchBox">
|
||
<image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/chargeSearch.png" />
|
||
<input style="margin-left: 16rpx; font-size: 28rpx;width: calc(100% - 44rpx)" placeholder="请输入服务区"
|
||
v-model="searchText" @confirm="handleConfirm" />
|
||
</view>
|
||
|
||
<view class="rightBox" @click="handleChangePageType">
|
||
显示地图
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view class="scrollListBox" :scroll-y="true" @scrolltolower="handleScrollToBottom">
|
||
<view v-if="showChargeList">
|
||
<!-- <charge-box ref="chargeBoxRef" :serviceAreaList="allServiceNameList" :pageStyleType="1"
|
||
:pageType="'mapList'" /> -->
|
||
<chargeBoxStyle :dataList="allDataList" :pageType="'mapList'" :comeForm="'scanCode'"
|
||
@handleGetNowService="handleGetNowService" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
// import ChargeBox from "../../components/chargeBox.vue";
|
||
import chargeBoxStyle from "../../components/chargeBoxStyle.vue";
|
||
import CustomLoading from "../../components/customLoading.vue";
|
||
|
||
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
|
||
export default {
|
||
components: { chargeBoxStyle, CustomLoading },
|
||
data() {
|
||
return {
|
||
longitude: "",
|
||
latitude: "",
|
||
seatInfo: {}, // 经纬度数据
|
||
currentServiceObj: {}, // 当前选择的服务区
|
||
currentServiceList: [], // 当前服务区的名称数组
|
||
allServiceNameList: [], // 全部服务区的名字列表
|
||
defaultAllServiceNameList: [], // 所有服务区的名称列表
|
||
chargeData: {}, // 理想的数据
|
||
markers: [], // 点位数据
|
||
serviceList: [], // 所有服务区的数据
|
||
searchText: "", // 搜索的内容
|
||
showChargeBox: true,
|
||
showChargeList: true,
|
||
showListPage: false, // 是否显示列表页面
|
||
isTouchMove: false, // 用于判断是否开始拖动
|
||
loginType: "",
|
||
menu: {},
|
||
startX: 0, // 拖动开始时的 X 坐标
|
||
startY: 0, // 拖动开始时的 Y 坐标
|
||
positionX: systemInfo.safeArea.width - 130, // 元素当前的 X 坐标
|
||
positionY: 140, // 元素当前的 Y 坐标
|
||
isDragging: false, // 是否正在拖动
|
||
screenWidth: 0, // 屏幕宽度
|
||
screenHeight: 0, // 屏幕高度
|
||
lastMoveTime: 0, // 上次移动的时间戳，用于节流
|
||
lastMoveTime: 0, // 上次移动的时间戳，用于节流
|
||
pageIndex: 1,
|
||
isHaveMore: false,
|
||
isShowAllData: true, // 判断是否点击了服务区 没有点击 就显示全部的数据 点击了 就显示单个服务区的具体每个品牌的数据,
|
||
showMap: true, // 是否显示地图
|
||
dataList: [],
|
||
businessObj: {},// 繁忙度对象
|
||
allDataList: [],// 充电列表的数据
|
||
isLoading: false,
|
||
};
|
||
},
|
||
async onLoad() {
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
console.log('this.loginType', this.loginType);
|
||
|
||
// this.positionX = systemInfo.safeArea.width - 66;
|
||
|
||
this.screenWidth = systemInfo.safeArea.width;
|
||
this.screenHeight = systemInfo.safeArea.height;
|
||
let storgeList = uni.getStorageSync("serviceList");
|
||
if (storgeList) {
|
||
this.serviceList = JSON.parse(storgeList);
|
||
this.handleAddServiceMarkers();
|
||
}
|
||
let nearService = uni.getStorageSync("nearService");
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
if (seatInfo) {
|
||
let res = seatInfo;
|
||
this.seatInfo = {
|
||
longitude: res.longitude,
|
||
latitude: res.latitude,
|
||
};
|
||
this.longitude = this.seatInfo.longitude;
|
||
this.latitude = this.seatInfo.latitude;
|
||
// this.longitude = 116.894166;
|
||
// this.latitude = 31.920213;
|
||
|
||
// this.currentServiceList = ["新桥服务区"];
|
||
// 全部服务区的名称
|
||
// this.handleGetServiceNameList();
|
||
}
|
||
await this.handleGetBusiness()
|
||
await this.handleGetDefaultService()
|
||
// if (nearService) {
|
||
// this.currentServiceObj = nearService;
|
||
// this.currentServiceList = [nearService.SERVERPART_NAME];
|
||
// }
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
methods: {
|
||
// 点击列表里面的服务区时 触发的方法
|
||
handleGetNowService(obj) {
|
||
console.log('objobjobjobj', obj);
|
||
this.searchText = obj.SERVERPART_NAME
|
||
this.handleChangePageType()
|
||
this.handleConfirm()
|
||
},
|
||
extractDirection(stationName) {
|
||
if (!stationName) return '';
|
||
// 定义方向匹配的正则表达式（按优先级排序）
|
||
const directionPatterns = [
|
||
/(?:（|\(|【)([^）\)】]*方向\d*)(?:\)|）|】)/, // 匹配括号内的方向（可含数字）
|
||
/([^，,。.;;！!?？、\s]+方向\d*)/, // 匹配无括号的方向（可含数字）
|
||
/方向([^，,。.;;！!?？、\s]+)/ // 匹配"方向XX"格式
|
||
];
|
||
|
||
for (const pattern of directionPatterns) {
|
||
const match = stationName.match(pattern);
|
||
if (match) {
|
||
// 提取最核心的方向信息
|
||
let direction = match[1] || match[0];
|
||
// 清理结果：去除括号和数字
|
||
direction = direction
|
||
.replace(/^[（\(【]|[）\)】]$/g, '') // 去除括号
|
||
.replace(/\d+$/, '') // 去除末尾数字
|
||
.trim();
|
||
return direction;
|
||
}
|
||
}
|
||
|
||
return '';
|
||
},
|
||
// 每次进入页面拿到一次繁忙度的数据
|
||
async handleGetBusiness() {
|
||
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([]);
|
||
}
|
||
},
|
||
});
|
||
});
|
||
|
||
console.log('fljddlkjalkd', businessRes);
|
||
|
||
let obj = {}
|
||
if (businessRes && businessRes.length > 0) {
|
||
businessRes.forEach((item) => {
|
||
obj[item.SERVERPART_ID] = item
|
||
})
|
||
}
|
||
this.businessObj = obj
|
||
|
||
},
|
||
// 拿到第一个默认的
|
||
async handleGetDefaultService() {
|
||
let req = {
|
||
Province_Code: "340000",
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
PageIndex: 1,
|
||
ShowService: true,
|
||
PageSize: 1
|
||
};
|
||
this.isLoading = true
|
||
const data = await this.$api.$get(
|
||
"/CommercialApi/BaseInfo/GetServerpartList",
|
||
req
|
||
);
|
||
|
||
let list = data.Result_Data.List;
|
||
|
||
let nameList = [];
|
||
let idList = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
nameList.push(item.SERVERPART_NAME);
|
||
idList.push(item.SERVERPART_ID)
|
||
// 理想总数
|
||
let LIAUTOCHARGESum = 0;
|
||
// 国网总数
|
||
let STATEGRIDCHARGESum = 0;
|
||
// 充换电总数
|
||
let GACENERGYCHARGESum = 0;
|
||
let HASPANTRY = 0; // 男厕数量
|
||
let HASWIFI = 0; // 女厕数量
|
||
let HASSHOWERROOM = 0; // 淋浴房
|
||
let MICROWAVEOVEN = 0; // 微波炉
|
||
let WASHERCOUNT = 0; // 洗衣机数量
|
||
let HASPILOTLOUNGE = false; // 有无司机之家
|
||
let HASCHILD = false; // 有无车辆维修
|
||
let SMALLPARKING = 0; // 轿车车位
|
||
let PACKING = 0; // 客车车位
|
||
let TRUCKPACKING = 0; // 货车车位
|
||
let DANPACKING = 0; // 危化品车位
|
||
let DININGROOMCOUNT = 0; // 餐饮店
|
||
let HASBACKGROUNDRADIO = 0; // 便利店
|
||
let POINTCONTROLCOUNT = 0; // 客房
|
||
let REFUELINGGUN92 = 0; // 加油枪92号
|
||
let REFUELINGGUN95 = 0; // 加油枪95号
|
||
let REFUELINGGUN0 = 0; // 加油枪0号
|
||
|
||
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
||
item.RegionInfo.forEach((subItem) => {
|
||
HASPANTRY += subItem.HASPANTRY;
|
||
HASWIFI += subItem.HASPANTRY;
|
||
HASSHOWERROOM += subItem.HASSHOWERROOM;
|
||
MICROWAVEOVEN += subItem.MICROWAVEOVEN;
|
||
WASHERCOUNT += subItem.WASHERCOUNT;
|
||
SMALLPARKING += subItem.SMALLPARKING;
|
||
PACKING += subItem.PACKING;
|
||
TRUCKPACKING += subItem.TRUCKPACKING;
|
||
DANPACKING += subItem.DANPACKING;
|
||
DININGROOMCOUNT += subItem.DININGROOMCOUNT;
|
||
HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
|
||
POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
|
||
REFUELINGGUN92 += subItem.REFUELINGGUN92;
|
||
REFUELINGGUN95 += subItem.REFUELINGGUN95;
|
||
REFUELINGGUN0 += subItem.REFUELINGGUN0;
|
||
|
||
if (subItem.HASPILOTLOUNGE) {
|
||
HASPILOTLOUNGE = true;
|
||
}
|
||
if (subItem.HASCHILD) {
|
||
HASCHILD = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
item.imgList = [
|
||
{
|
||
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: HASCHILD
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
|
||
isShow: SMALLPARKING,
|
||
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:
|
||
HASPANTRY > 0 || HASWIFI > 0
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
|
||
isShow: HASPANTRY > 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:
|
||
POINTCONTROLCOUNT > 0
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
|
||
isShow: POINTCONTROLCOUNT > 0,
|
||
title: "客房",
|
||
},
|
||
{
|
||
url:
|
||
HASSHOWERROOM > 0
|
||
? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
|
||
isShow: HASSHOWERROOM > 0,
|
||
title: "淋浴房",
|
||
},
|
||
]
|
||
|
||
item.businessObj = this.businessObj[item.SERVERPART_ID.toString()]
|
||
});
|
||
}
|
||
|
||
|
||
// 拿到电价数据
|
||
list = await this.handleGetChargeData(list, idList)
|
||
// 拿到油价数据
|
||
list = await this.handleGetOilData(list, idList)
|
||
|
||
this.isLoading = false
|
||
this.dataList = list
|
||
console.log('djasijdaskjdaslkdj', this.dataList);
|
||
this.chargeData = list[0]
|
||
},
|
||
// 到充电数据
|
||
async handleGetChargeData(serviceList, idList) {
|
||
const data = await this.$api.$javaPost("/charge/stationinfo/queryByIds", {
|
||
ids: idList,
|
||
brands: [],
|
||
});
|
||
// 理想
|
||
let LXData = [];
|
||
// 交控
|
||
let JKData = [];
|
||
// 国网
|
||
let GWData = [];
|
||
// 蔚来
|
||
let WLData = [];
|
||
|
||
if (data && data.length > 0) {
|
||
data.forEach((item) => {
|
||
if (item.brand === "理想") {
|
||
LXData.push(item);
|
||
} else if (item.brand === "交控") {
|
||
JKData.push(item);
|
||
} else if (item.brand === "国网") {
|
||
GWData.push(item);
|
||
} else if (item.brand === "蔚来") {
|
||
WLData.push(item);
|
||
}
|
||
});
|
||
}
|
||
|
||
if (serviceList && serviceList.length > 0) {
|
||
serviceList.forEach((item) => {
|
||
let LXInfoList = [];
|
||
let JKInfoList = [];
|
||
let GWInfoList = [];
|
||
let WLInfoList = [];
|
||
// 理想
|
||
let LXRes = [];
|
||
if (LXData && LXData.length > 0) {
|
||
let thisServiceRes = LXData.filter(
|
||
(filterItem) => filterItem.serverpartId === item.SERVERPART_ID
|
||
);
|
||
if (thisServiceRes && thisServiceRes.length > 0) {
|
||
thisServiceRes.forEach((subItem) => {
|
||
if (subItem.equipments && subItem.equipments.length > 0) {
|
||
subItem.equipments.forEach((thirdItem) => {
|
||
if (
|
||
thirdItem.connectors &&
|
||
thirdItem.connectors.length > 0
|
||
) {
|
||
thirdItem.connectors.forEach((fourthItem) => {
|
||
LXRes.push(fourthItem);
|
||
LXInfoList.push({
|
||
...fourthItem,
|
||
address: this.extractDirection(subItem.name),
|
||
Status: fourthItem.status,
|
||
Power: Number(fourthItem.powerMax),
|
||
ConnectorID: fourthItem.connectorCode,
|
||
ConnectorType: Number(fourthItem.connectorType),
|
||
NationalStandard: Number(fourthItem.national),
|
||
VoltageLowerLimits: Number(fourthItem.voltageLimit),
|
||
VoltageUpperLimits: Number(fourthItem.voltageMax),
|
||
electricityFee: subItem.electricityFee
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 空多少个
|
||
let LXEmpty = 0;
|
||
// 一共多少个
|
||
let LXSum = 0;
|
||
if (LXRes && LXRes.length > 0) {
|
||
LXRes.forEach((subItem) => {
|
||
// if (subItem.status !== 3) {
|
||
// 替换空的逻辑 只有空闲的状态 才算空
|
||
if (subItem.status === 1) {
|
||
LXEmpty += 1;
|
||
}
|
||
LXSum += 1;
|
||
});
|
||
}
|
||
item.LXDetail = {
|
||
LXSum: LXSum,
|
||
LXEmpty: LXEmpty,
|
||
};
|
||
|
||
// 交控
|
||
let JKRes = [];
|
||
if (JKData && JKData.length > 0) {
|
||
let thisServiceRes = JKData.filter(
|
||
(filterItem) => filterItem.serverpartId === item.SERVERPART_ID
|
||
);
|
||
if (thisServiceRes && thisServiceRes.length > 0) {
|
||
thisServiceRes.forEach((subItem) => {
|
||
if (subItem.equipments && subItem.equipments.length > 0) {
|
||
subItem.equipments.forEach((thirdItem) => {
|
||
if (
|
||
thirdItem.connectors &&
|
||
thirdItem.connectors.length > 0
|
||
) {
|
||
thirdItem.connectors.forEach((fourthItem) => {
|
||
JKRes.push(fourthItem);
|
||
JKInfoList.push({
|
||
...fourthItem,
|
||
address: this.extractDirection(subItem.name),
|
||
Status: fourthItem.status,
|
||
Power: Number(fourthItem.powerMax),
|
||
ConnectorID: fourthItem.connectorCode,
|
||
ConnectorType: Number(fourthItem.connectorType),
|
||
NationalStandard: Number(fourthItem.national),
|
||
VoltageLowerLimits: Number(fourthItem.voltageLimit),
|
||
VoltageUpperLimits: Number(fourthItem.voltageMax),
|
||
electricityFee: subItem.electricityFee
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 空多少个
|
||
let JKEmpty = 0;
|
||
// 一共多少个
|
||
let JKSum = 0;
|
||
if (JKRes && JKRes.length > 0) {
|
||
JKRes.forEach((subItem) => {
|
||
// 替换空的逻辑 只有空闲的状态 才算空
|
||
if (subItem.status === 1) {
|
||
JKEmpty += 1;
|
||
}
|
||
JKSum += 1;
|
||
});
|
||
}
|
||
item.JKDetail = {
|
||
JKEmpty: JKEmpty,
|
||
JKSum: JKSum,
|
||
};
|
||
|
||
console.log('GWDataGWDataGWDataGWData', GWData);
|
||
|
||
// 国网
|
||
let GWRes = [];
|
||
if (GWData && GWData.length > 0) {
|
||
let thisServiceRes = GWData.filter(
|
||
(filterItem) => filterItem.serverpartId === item.SERVERPART_ID && filterItem.name.indexOf('方向）') !== -1 && filterItem.name.indexOf('充电站') !== -1
|
||
);
|
||
if (thisServiceRes && thisServiceRes.length > 0) {
|
||
thisServiceRes.forEach((subItem) => {
|
||
if (subItem.equipments && subItem.equipments.length > 0) {
|
||
subItem.equipments.forEach((thirdItem) => {
|
||
if (
|
||
thirdItem.connectors &&
|
||
thirdItem.connectors.length > 0
|
||
) {
|
||
thirdItem.connectors.forEach((fourthItem) => {
|
||
GWRes.push(fourthItem);
|
||
GWInfoList.push({
|
||
...fourthItem,
|
||
Status: fourthItem.status,
|
||
address: this.extractDirection(subItem.name),
|
||
Power: Number(fourthItem.powerMax),
|
||
ConnectorID: fourthItem.connectorCode,
|
||
ConnectorType: Number(fourthItem.connectorType),
|
||
NationalStandard: Number(fourthItem.national),
|
||
VoltageLowerLimits: Number(fourthItem.voltageLimit),
|
||
VoltageUpperLimits: Number(fourthItem.voltageMax),
|
||
electricityFee: subItem.electricityFee
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 空多少个
|
||
let GWEmpty = 0;
|
||
// 一共多少个
|
||
let GWSum = 0;
|
||
if (GWRes && GWRes.length > 0) {
|
||
GWRes.forEach((subItem) => {
|
||
// 替换空的逻辑 只有空闲的状态 才算空
|
||
if (subItem.status === 1) {
|
||
GWEmpty += 1;
|
||
}
|
||
GWSum += 1;
|
||
});
|
||
}
|
||
item.GWDetail = {
|
||
GWEmpty: GWEmpty,
|
||
GWSum: GWSum,
|
||
};
|
||
|
||
// console.log('daskjdaskjdaskljdaslkhfjdshf', GWRes);
|
||
|
||
|
||
// 蔚来
|
||
let WLRes = [];
|
||
|
||
if (WLData && WLData.length > 0) {
|
||
let thisServiceRes = WLData.filter(
|
||
(filterItem) => filterItem.serverpartId === item.SERVERPART_ID
|
||
);
|
||
if (thisServiceRes && thisServiceRes.length > 0) {
|
||
thisServiceRes.forEach((subItem) => {
|
||
if (subItem.equipments && subItem.equipments.length > 0) {
|
||
subItem.equipments.forEach((thirdItem) => {
|
||
if (
|
||
thirdItem.connectors &&
|
||
thirdItem.connectors.length > 0
|
||
) {
|
||
thirdItem.connectors.forEach((fourthItem) => {
|
||
WLRes.push(fourthItem);
|
||
WLInfoList.push({
|
||
...fourthItem,
|
||
Status: fourthItem.status,
|
||
address: this.extractDirection(subItem.name),
|
||
Power: Number(fourthItem.powerMax),
|
||
ConnectorID: fourthItem.connectorCode,
|
||
ConnectorType: Number(fourthItem.connectorType),
|
||
NationalStandard: Number(fourthItem.national),
|
||
VoltageLowerLimits: Number(fourthItem.voltageLimit),
|
||
VoltageUpperLimits: Number(fourthItem.voltageMax),
|
||
electricityFee: subItem.electricityFee
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 空多少个
|
||
let WLEmpty = 0;
|
||
// 一共多少个
|
||
let WLSum = 0;
|
||
|
||
if (WLRes && WLRes.length > 0) {
|
||
WLRes.forEach((subItem) => {
|
||
// 替换空的逻辑 只有空闲的状态 才算空
|
||
if (subItem.status === 1) {
|
||
WLEmpty += 1;
|
||
}
|
||
WLSum += 1;
|
||
});
|
||
}
|
||
|
||
item.WLDetail = {
|
||
WLEmpty: WLEmpty,
|
||
WLSum: WLSum,
|
||
};
|
||
|
||
|
||
item.allChargeDetail = {
|
||
allSum:
|
||
Number(
|
||
item.LXDetail && item.LXDetail.LXSum ? item.LXDetail.LXSum : 0
|
||
) +
|
||
Number(item.WLDetail.WLSum || 0) +
|
||
Number(item.JKDetail.JKSum || 0) +
|
||
Number(item.GWDetail.GWSum || 0),
|
||
empty:
|
||
Number(
|
||
item.LXDetail && item.LXDetail.LXEmpty
|
||
? item.LXDetail.LXEmpty
|
||
: 0
|
||
) +
|
||
Number(item.WLDetail.WLEmpty || 0) +
|
||
Number(item.JKDetail.JKEmpty || 0) +
|
||
Number(item.GWDetail.GWEmpty || 0),
|
||
};
|
||
|
||
item.LXInfoList = LXInfoList;
|
||
item.JKInfoList = JKInfoList;
|
||
item.GWInfoList = GWInfoList;
|
||
item.WLInfoList = WLInfoList;
|
||
});
|
||
}
|
||
console.log('dksjdisjfdf', serviceList)
|
||
return serviceList
|
||
},
|
||
// 加油的数据
|
||
async handleGetOilData(list, idList) {
|
||
const data = await this.$api.$javaGet2("/oil-price/getListByServerPartIds", {
|
||
serverpartIds: idList.toString(),
|
||
});
|
||
let oilData = data.Result_Data.List
|
||
|
||
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
let haveOil = false
|
||
let oilList = oilData.filter((filterItem => item.SERVERPART_ID === filterItem.serverpartId))
|
||
if (oilList && oilList.length > 0) {
|
||
haveOil = true
|
||
}
|
||
|
||
item.imgList.forEach((subItem) => {
|
||
if (subItem.title === '充电桩') {
|
||
let isHave = false
|
||
if (item.GWDetail.GWSum > 0 || item.JKDetail.JKSum > 0 || item.LXDetail.LXSum > 0 || item.WLDetail.WLSum > 0) {
|
||
isHave = true
|
||
}
|
||
subItem.url = isHave ? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg"
|
||
} else if (subItem.title === '加油站' && haveOil) {
|
||
subItem.url = haveOil ? "https://eshangtech.com/minTestImg/REFUELINGGUN.svg"
|
||
: "https://eshangtech.com/minTestImg/noREFUELINGGUN.svg"
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
return list
|
||
},
|
||
// 拿到前面10个默认的
|
||
async handleGetchargeAllService() {
|
||
let req = {
|
||
Province_Code: "340000",
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
PageIndex: this.pageIndex,
|
||
ShowService: true,
|
||
PageSize: 10
|
||
};
|
||
this.isLoading = true
|
||
const data = await this.$api.$get(
|
||
"/CommercialApi/BaseInfo/GetServerpartList",
|
||
req
|
||
);
|
||
|
||
let list = data.Result_Data.List;
|
||
|
||
let nameList = [];
|
||
let idList = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
nameList.push(item.SERVERPART_NAME);
|
||
idList.push(item.SERVERPART_ID)
|
||
// 理想总数
|
||
let LIAUTOCHARGESum = 0;
|
||
// 国网总数
|
||
let STATEGRIDCHARGESum = 0;
|
||
// 充换电总数
|
||
let GACENERGYCHARGESum = 0;
|
||
let HASPANTRY = 0; // 男厕数量
|
||
let HASWIFI = 0; // 女厕数量
|
||
let HASSHOWERROOM = 0; // 淋浴房
|
||
let MICROWAVEOVEN = 0; // 微波炉
|
||
let WASHERCOUNT = 0; // 洗衣机数量
|
||
let HASPILOTLOUNGE = false; // 有无司机之家
|
||
let HASCHILD = false; // 有无车辆维修
|
||
let SMALLPARKING = 0; // 轿车车位
|
||
let PACKING = 0; // 客车车位
|
||
let TRUCKPACKING = 0; // 货车车位
|
||
let DANPACKING = 0; // 危化品车位
|
||
let DININGROOMCOUNT = 0; // 餐饮店
|
||
let HASBACKGROUNDRADIO = 0; // 便利店
|
||
let POINTCONTROLCOUNT = 0; // 客房
|
||
let REFUELINGGUN92 = 0; // 加油枪92号
|
||
let REFUELINGGUN95 = 0; // 加油枪95号
|
||
let REFUELINGGUN0 = 0; // 加油枪0号
|
||
|
||
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
||
item.RegionInfo.forEach((subItem) => {
|
||
HASPANTRY += subItem.HASPANTRY;
|
||
HASWIFI += subItem.HASPANTRY;
|
||
HASSHOWERROOM += subItem.HASSHOWERROOM;
|
||
MICROWAVEOVEN += subItem.MICROWAVEOVEN;
|
||
WASHERCOUNT += subItem.WASHERCOUNT;
|
||
SMALLPARKING += subItem.SMALLPARKING;
|
||
PACKING += subItem.PACKING;
|
||
TRUCKPACKING += subItem.TRUCKPACKING;
|
||
DANPACKING += subItem.DANPACKING;
|
||
DININGROOMCOUNT += subItem.DININGROOMCOUNT;
|
||
HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
|
||
POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
|
||
REFUELINGGUN92 += subItem.REFUELINGGUN92;
|
||
REFUELINGGUN95 += subItem.REFUELINGGUN95;
|
||
REFUELINGGUN0 += subItem.REFUELINGGUN0;
|
||
|
||
if (subItem.HASPILOTLOUNGE) {
|
||
HASPILOTLOUNGE = true;
|
||
}
|
||
if (subItem.HASCHILD) {
|
||
HASCHILD = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
item.imgList = [
|
||
{
|
||
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: HASCHILD
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
|
||
isShow: SMALLPARKING,
|
||
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:
|
||
HASPANTRY > 0 || HASWIFI > 0
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
|
||
isShow: HASPANTRY > 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:
|
||
POINTCONTROLCOUNT > 0
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
|
||
isShow: POINTCONTROLCOUNT > 0,
|
||
title: "客房",
|
||
},
|
||
{
|
||
url:
|
||
HASSHOWERROOM > 0
|
||
? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
|
||
isShow: HASSHOWERROOM > 0,
|
||
title: "淋浴房",
|
||
},
|
||
]
|
||
|
||
item.businessObj = this.businessObj[item.SERVERPART_ID.toString()]
|
||
});
|
||
}
|
||
// 拿到电价数据
|
||
list = await this.handleGetChargeData(list, idList)
|
||
// 拿到油价数据
|
||
list = await this.handleGetOilData(list, idList)
|
||
|
||
this.isLoading = false
|
||
|
||
this.allDataList = this.allDataList.concat(list)
|
||
console.log('djasijdaskjdaslkdj', this.allDataList);
|
||
},
|
||
handleChangeShow(e) {
|
||
this.showMap = !e
|
||
this.$forceUpdate();
|
||
},
|
||
handleShowChargeDetail() {
|
||
this.$refs.chargeBoxRef.handleOpenDetail(null);
|
||
},
|
||
// 显示自己的定位
|
||
handleShowLocal() {
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
if (seatInfo) {
|
||
// let res = JSON.parse(seatInfo);
|
||
let res = seatInfo
|
||
this.seatInfo = {
|
||
longitude: Number(res.longitude),
|
||
latitude: Number(res.latitude),
|
||
};
|
||
this.longitude = this.seatInfo.longitude;
|
||
this.latitude = this.seatInfo.latitude;
|
||
let _this = this
|
||
setTimeout(() => {
|
||
uni.createMapContext("myMap", this).moveToLocation({
|
||
longitude: _this.longitude,
|
||
latitude: _this.latitude,
|
||
});
|
||
}, 300); // 300ms 延迟
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
// 给服务区添加点位
|
||
handleAddServiceMarkers() {
|
||
let list = [];
|
||
if (this.serviceList && this.serviceList.length > 0) {
|
||
this.serviceList.forEach((item) => {
|
||
list.push({
|
||
id: Number(`${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
|
||
serviceId: item.SERVERPART_ID,
|
||
serviceName: `${item.SERVERPART_NAME}`,
|
||
latitude: item.SERVERPART_Y,
|
||
longitude: item.SERVERPART_X,
|
||
iconPath: "/static/home/redFixed.svg",
|
||
width: 30,
|
||
height: 30,
|
||
});
|
||
});
|
||
}
|
||
this.markers = list;
|
||
},
|
||
handleChangeScanBox(e) {
|
||
this.positionX = e.target.offsetLeft;
|
||
this.positionY = e.target.offsetTop;
|
||
},
|
||
touchStart(e) {
|
||
this.isDragging = true;
|
||
const touch = e.touches[0];
|
||
this.startX = touch.clientX - this.positionX;
|
||
this.startY = touch.clientY - this.positionY;
|
||
},
|
||
touchMove(e) {
|
||
if (!this.isDragging) return;
|
||
|
||
// 使用时间戳进行节流，每16ms（约60fps）更新一次位置
|
||
const touch = e.touches[0];
|
||
let newPosX = touch.clientX - this.startX;
|
||
let newPosY = touch.clientY - this.startY;
|
||
|
||
// 限制拖动范围，不让元素移出屏幕
|
||
newPosX = Math.max(0, Math.min(newPosX, this.screenWidth - 50)); // 限制 X 轴范围
|
||
newPosY = Math.max(0, Math.min(newPosY, this.screenHeight - 50)); // 限制 Y 轴范围
|
||
|
||
this.positionX = newPosX;
|
||
this.positionY = newPosY;
|
||
},
|
||
touchEnd(e) {
|
||
this.isDragging = false;
|
||
},
|
||
// 取问号后面的参数
|
||
getQueryParams(url) {
|
||
let queryStr = url.split("?")[1]; // 获取 ? 后面的部分
|
||
let params = {};
|
||
|
||
if (queryStr) {
|
||
let pairs = queryStr.split("&");
|
||
pairs.forEach((pair) => {
|
||
let [key, value] = pair.split("=");
|
||
params[key] = decodeURIComponent(value || "");
|
||
});
|
||
}
|
||
|
||
return params;
|
||
},
|
||
// 扫码
|
||
handleScan() {
|
||
let _this = this;
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
console.log('res', res);
|
||
|
||
let url = res.result;
|
||
if (url.indexOf("lixiang") !== -1) {
|
||
let obj = _this.getQueryParams(url);
|
||
uni.showModal({
|
||
title: "",
|
||
content: `识别二维码类型为【理想】，确认跳转？`,
|
||
success(res) {
|
||
let str = url
|
||
console.log('strstrstrstr', url);
|
||
|
||
//"https://www.lixiang.com/business/charge/start?channelCode=169006&devType=hpc&qrcode=81003867"
|
||
|
||
|
||
if (_this.loginType === 'min') {
|
||
uni.navigateToMiniProgram({
|
||
appId: "wxefd5d8119561aaca",
|
||
path: `/pages/electricity/pile/index?connectorId=${obj.qrcode}`,
|
||
success(res) { },
|
||
});
|
||
} else {
|
||
plus.runtime.openURL('http://saas.eshangtech.com/openWxLx.html?' + str.split('?')[1]);
|
||
}
|
||
|
||
// uni.navigateToMiniProgram({
|
||
// appId: "wxefd5d8119561aaca",
|
||
// path: `/pages/electricity/pile/index?connectorId=${obj.qrcode}`,
|
||
// success(res) {
|
||
// plus.runtime.openURL('http://saas.eshangtech.com/openWxLx.html');
|
||
|
||
// },
|
||
// });
|
||
},
|
||
});
|
||
} else if (url.indexOf("jksdxny") !== -1) {
|
||
// 交控
|
||
uni.showModal({
|
||
title: "",
|
||
content: `识别二维码类型为【交控新能源】，确认跳转？`,
|
||
success(res) {
|
||
|
||
if (_this.loginType === 'min') {
|
||
uni.navigateToMiniProgram({
|
||
// appId: "wx01617ba079061ca9",
|
||
appId: "wxcb64b75d93480554",
|
||
path: `/pages/index/index`,
|
||
success(res) { },
|
||
});
|
||
} else {
|
||
plus.runtime.openURL('http://saas.eshangtech.com/openWxJK.html');
|
||
}
|
||
|
||
|
||
// uni.navigateToMiniProgram({
|
||
// appId: "wx01617ba079061ca9",
|
||
// path: `/pages/map/index`,
|
||
// success(res) { },
|
||
// });
|
||
},
|
||
});
|
||
} else if (url.indexOf("app.nio") !== -1) {
|
||
// 蔚来
|
||
uni.showModal({
|
||
title: "",
|
||
content: `识别二维码类型为【蔚来】，确认跳转？`,
|
||
success(res) {
|
||
if (_this.loginType === 'min') {
|
||
uni.navigateToMiniProgram({
|
||
appId: "wx35849c7f0cf7f7a9",
|
||
path: `/pages/index/index`,
|
||
success(res) { },
|
||
});
|
||
} else {
|
||
plus.runtime.openURL('http://saas.eshangtech.com/openWxWL.html');
|
||
}
|
||
|
||
|
||
// plus.runtime.openURL('http://saas.eshangtech.com/openWxWL.html');
|
||
|
||
// uni.navigateToMiniProgram({
|
||
// appId: "wx35849c7f0cf7f7a9",
|
||
// path: `/pages/index/index`,
|
||
// success(res) { },
|
||
// });
|
||
},
|
||
});
|
||
} else if (url.indexOf("hlht://") !== -1) {
|
||
// 国网
|
||
uni.showModal({
|
||
title: "",
|
||
content: `识别二维码类型为【国网】，确认跳转？`,
|
||
success(res) {
|
||
// plus.runtime.openURL(`https://dipper.in.ah.cn/wsth5/#/${_this.user.MEMBERSHIP_MOBILEPHONE}`);
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/thirdParty/chargAndSwapp`,
|
||
});
|
||
// uni.navigateToMiniProgram({
|
||
// appId: "wx35849c7f0cf7f7a9",
|
||
// path: `/pages/index/index`,
|
||
// success(res) { },
|
||
// });
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 拿到全部服务区的名称
|
||
handleGetServiceNameList() {
|
||
let name = [];
|
||
if (this.serviceList && this.serviceList.length > 0) {
|
||
this.serviceList.forEach((item) => {
|
||
name.push(item.SERVERPART_NAME);
|
||
});
|
||
}
|
||
let res = JSON.parse(JSON.stringify(name));
|
||
this.defaultAllServiceNameList = res;
|
||
this.allServiceNameList = name.splice(0, this.pageIndex * 10 - 1);
|
||
},
|
||
// 滚动到底部
|
||
async handleScrollToBottom() {
|
||
console.log('滚动到底部了');
|
||
|
||
this.pageIndex = this.pageIndex + 1
|
||
this.handleGetchargeAllService()
|
||
// if (this.isHaveMore) {
|
||
// return;
|
||
// }
|
||
// this.isHaveMore = true;
|
||
// this.pageIndex = this.pageIndex += 1;
|
||
// let res = JSON.parse(JSON.stringify(this.defaultAllServiceNameList));
|
||
// this.allServiceNameList = res.splice(0, this.pageIndex * 10 - 1);
|
||
|
||
// await this.$refs.chargeBoxRef.handldGetData();
|
||
// this.isHaveMore = false;
|
||
// this.$forceUpdate();
|
||
},
|
||
// 改变页面显示的内容
|
||
handleChangePageType() {
|
||
this.showListPage = !this.showListPage;
|
||
this.handleGetchargeAllService()
|
||
},
|
||
// 搜索服务区的方法
|
||
async handleConfirm() {
|
||
if (this.showListPage) {
|
||
this.showChargeList = false;
|
||
} else {
|
||
this.showChargeBox = false;
|
||
}
|
||
this.chaegeBoxList = [];
|
||
|
||
|
||
let req = {
|
||
Province_Code: "340000",
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
PageIndex: 1,
|
||
Serverpart_Name: this.searchText,
|
||
ShowService: true,
|
||
PageSize: 10
|
||
};
|
||
this.isLoading = true
|
||
const data = await this.$api.$get(
|
||
"/CommercialApi/BaseInfo/GetServerpartList",
|
||
req
|
||
);
|
||
let list = data.Result_Data.List;
|
||
|
||
let nameList = [];
|
||
let idList = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
nameList.push(item.SERVERPART_NAME);
|
||
idList.push(item.SERVERPART_ID)
|
||
// 理想总数
|
||
let LIAUTOCHARGESum = 0;
|
||
// 国网总数
|
||
let STATEGRIDCHARGESum = 0;
|
||
// 充换电总数
|
||
let GACENERGYCHARGESum = 0;
|
||
let HASPANTRY = 0; // 男厕数量
|
||
let HASWIFI = 0; // 女厕数量
|
||
let HASSHOWERROOM = 0; // 淋浴房
|
||
let MICROWAVEOVEN = 0; // 微波炉
|
||
let WASHERCOUNT = 0; // 洗衣机数量
|
||
let HASPILOTLOUNGE = false; // 有无司机之家
|
||
let HASCHILD = false; // 有无车辆维修
|
||
let SMALLPARKING = 0; // 轿车车位
|
||
let PACKING = 0; // 客车车位
|
||
let TRUCKPACKING = 0; // 货车车位
|
||
let DANPACKING = 0; // 危化品车位
|
||
let DININGROOMCOUNT = 0; // 餐饮店
|
||
let HASBACKGROUNDRADIO = 0; // 便利店
|
||
let POINTCONTROLCOUNT = 0; // 客房
|
||
let REFUELINGGUN92 = 0; // 加油枪92号
|
||
let REFUELINGGUN95 = 0; // 加油枪95号
|
||
let REFUELINGGUN0 = 0; // 加油枪0号
|
||
|
||
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
||
item.RegionInfo.forEach((subItem) => {
|
||
HASPANTRY += subItem.HASPANTRY;
|
||
HASWIFI += subItem.HASPANTRY;
|
||
HASSHOWERROOM += subItem.HASSHOWERROOM;
|
||
MICROWAVEOVEN += subItem.MICROWAVEOVEN;
|
||
WASHERCOUNT += subItem.WASHERCOUNT;
|
||
SMALLPARKING += subItem.SMALLPARKING;
|
||
PACKING += subItem.PACKING;
|
||
TRUCKPACKING += subItem.TRUCKPACKING;
|
||
DANPACKING += subItem.DANPACKING;
|
||
DININGROOMCOUNT += subItem.DININGROOMCOUNT;
|
||
HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
|
||
POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
|
||
REFUELINGGUN92 += subItem.REFUELINGGUN92;
|
||
REFUELINGGUN95 += subItem.REFUELINGGUN95;
|
||
REFUELINGGUN0 += subItem.REFUELINGGUN0;
|
||
|
||
if (subItem.HASPILOTLOUNGE) {
|
||
HASPILOTLOUNGE = true;
|
||
}
|
||
if (subItem.HASCHILD) {
|
||
HASCHILD = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
item.imgList = [
|
||
{
|
||
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: HASCHILD
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
|
||
isShow: SMALLPARKING,
|
||
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:
|
||
HASPANTRY > 0 || HASWIFI > 0
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
|
||
isShow: HASPANTRY > 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:
|
||
POINTCONTROLCOUNT > 0
|
||
? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
|
||
: "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
|
||
isShow: POINTCONTROLCOUNT > 0,
|
||
title: "客房",
|
||
},
|
||
{
|
||
url:
|
||
HASSHOWERROOM > 0
|
||
? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
|
||
: "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
|
||
isShow: HASSHOWERROOM > 0,
|
||
title: "淋浴房",
|
||
},
|
||
]
|
||
|
||
item.businessObj = this.businessObj[item.SERVERPART_ID.toString()]
|
||
});
|
||
}
|
||
|
||
|
||
// 拿到电价数据
|
||
list = await this.handleGetChargeData(list, idList)
|
||
// 拿到油价数据
|
||
list = await this.handleGetOilData(list, idList)
|
||
|
||
this.isLoading = false
|
||
this.chargeData = list[0]
|
||
if (this.showListPage) {
|
||
this.allDataList = list
|
||
} else {
|
||
this.dataList = list
|
||
}
|
||
|
||
let obj = list[0];
|
||
if (this.showListPage) {
|
||
this.showChargeList = true;
|
||
if (this.searchText) {
|
||
this.allServiceNameList = [obj.SERVERPART_NAME];
|
||
} else {
|
||
this.handleGetServiceNameList();
|
||
}
|
||
} else {
|
||
this.seatInfo = {
|
||
longitude: obj.SERVERPART_X,
|
||
latitude: obj.SERVERPART_Y,
|
||
};
|
||
this.longitude = this.seatInfo.longitude;
|
||
this.latitude = this.seatInfo.latitude;
|
||
this.currentServiceObj = obj;
|
||
this.currentServiceList = [obj.SERVERPART_NAME];
|
||
this.showChargeBox = true;
|
||
}
|
||
this.searchText = "";
|
||
|
||
|
||
// let req = {
|
||
// // longitude: this.longitude,
|
||
// Province_Code: "340000",
|
||
// longitude: this.seatInfo.longitude,
|
||
// latitude: this.seatInfo.latitude,
|
||
// Serverpart_Name: this.searchText,
|
||
// ShowService: true,
|
||
// };
|
||
// // const data = await this.$api.$get(
|
||
// // "/CommercialApi/BaseInfo/GetServerpartList",
|
||
// // req
|
||
// // );
|
||
// let data = await this.$api.$javaGet2('/third-party/getServerPartList', req)
|
||
// let list = data.Result_Data.List;
|
||
// this.pageIndex = 1;
|
||
// let obj = list[0];
|
||
// if (this.showListPage) {
|
||
// this.showChargeList = true;
|
||
// if (this.searchText) {
|
||
// this.allServiceNameList = [obj.SERVERPART_NAME];
|
||
// } else {
|
||
// this.handleGetServiceNameList();
|
||
// }
|
||
// } else {
|
||
// this.seatInfo = {
|
||
// longitude: obj.SERVERPART_X,
|
||
// latitude: obj.SERVERPART_Y,
|
||
// };
|
||
// this.longitude = this.seatInfo.longitude;
|
||
// this.latitude = this.seatInfo.latitude;
|
||
// this.currentServiceObj = obj;
|
||
// this.currentServiceList = [obj.SERVERPART_NAME];
|
||
// this.showChargeBox = true;
|
||
// }
|
||
// this.searchText = "";
|
||
},
|
||
// 给理想的充电站标点
|
||
handleLXAddMarker(e) {
|
||
let stationList = e.res;
|
||
|
||
let pointList = [];
|
||
// 确保一个服务区点位 只用加一个
|
||
let pointIdList = [];
|
||
if (this.serviceList && this.serviceList.length > 0) {
|
||
this.serviceList.forEach((item) => {
|
||
if (stationList && stationList.length > 0) {
|
||
stationList.forEach((subItem) => {
|
||
if (subItem.Address.indexOf(item.SERVERPART_NAME) !== -1) {
|
||
const date = new Date();
|
||
if (
|
||
pointIdList.indexOf(Number(`1${item.SERVERPART_ID}`)) === -1
|
||
) {
|
||
pointIdList.push(Number(`1${item.SERVERPART_ID}`));
|
||
pointList.push({
|
||
id: Number(`1${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
|
||
markerId: `${item.SERVERPART_ID}LX`,
|
||
serviceId: item.SERVERPART_ID,
|
||
serviceName: `${item.SERVERPART_NAME}`,
|
||
latitude: subItem.StationLat,
|
||
longitude: subItem.StationLng,
|
||
iconPath: "/static/home/redFixed.svg",
|
||
width: 30,
|
||
height: 30,
|
||
// label: {
|
||
// // 文本标签
|
||
// content: "",
|
||
// color: "#3EC273",
|
||
// fontSize: 14,
|
||
// bgColor: "#ffffff",
|
||
// borderRadius: 4,
|
||
// padding: 5,
|
||
// textAlign: "center",
|
||
// },
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
this.markers = this.markers.concat(pointList);
|
||
},
|
||
// 给交控的充电站标点
|
||
handleJKAddMarker(e) {
|
||
let stationList = e.res;
|
||
|
||
let pointList = [];
|
||
// 确保一个服务区点位 只用加一个
|
||
let pointIdList = [];
|
||
if (this.serviceList && this.serviceList.length > 0) {
|
||
this.serviceList.forEach((item) => {
|
||
if (stationList && stationList.length > 0) {
|
||
stationList.forEach((subItem) => {
|
||
if (subItem.areaName.indexOf(item.SERVERPART_NAME) !== -1) {
|
||
const date = new Date();
|
||
if (
|
||
pointIdList.indexOf(Number(`2${item.SERVERPART_ID}`)) === -1
|
||
) {
|
||
pointIdList.push(Number(`2${item.SERVERPART_ID}`));
|
||
pointList.push({
|
||
id: Number(`2${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
|
||
markerId: `${item.SERVERPART_ID}JK`,
|
||
serviceId: item.SERVERPART_ID,
|
||
serviceName: `${item.SERVERPART_NAME}`,
|
||
latitude: subItem.lat,
|
||
longitude: subItem.lng,
|
||
iconPath: "/static/home/greenFixed.svg",
|
||
width: 30,
|
||
height: 30,
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
this.markers = this.markers.concat(pointList);
|
||
},
|
||
// 给国网的充电站标点
|
||
handleGWAddMarker(e) {
|
||
let stationList = e.res.data.Data.StationInfos;
|
||
|
||
let pointList = [];
|
||
// 确保一个服务区点位 只用加一个
|
||
let pointIdList = [];
|
||
if (this.serviceList && this.serviceList.length > 0) {
|
||
this.serviceList.forEach((item) => {
|
||
if (stationList && stationList.length > 0) {
|
||
stationList.forEach((subItem) => {
|
||
if (subItem.Address.indexOf(item.SERVERPART_NAME) !== -1) {
|
||
if (
|
||
pointIdList.indexOf(Number(`3${item.SERVERPART_ID}`)) === -1
|
||
) {
|
||
pointIdList.push(Number(`3${item.SERVERPART_ID}`));
|
||
pointList.push({
|
||
id: Number(`3${item.SERVERPART_ID}`), // 使用时间戳作为唯一ID
|
||
markerId: `${item.SERVERPART_ID}GW`,
|
||
serviceId: item.SERVERPART_ID,
|
||
serviceName: `${item.SERVERPART_NAME}`,
|
||
latitude: subItem.StationLat,
|
||
longitude: subItem.StationLng,
|
||
iconPath: "/static/home/orangeFixed.svg",
|
||
width: 30,
|
||
height: 30,
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
this.markers = this.markers.concat(pointList);
|
||
},
|
||
// // 拿到当前服务区的充电数据
|
||
// handleGetChargeData(e) {
|
||
// let obj = e.res[0];
|
||
// // 因为只返回一个服务区 所以直接e[0]就可以拿到服务区数据
|
||
// this.chargeData = obj;
|
||
|
||
// // this.markers = [
|
||
// // {
|
||
// // id: Number(obj.ServerPart_Id), // 使用时间戳作为唯一ID
|
||
// // latitude: obj.SERVERPART_Y,
|
||
// // longitude: obj.SERVERPART_X,
|
||
// // width: 20,
|
||
// // height: 30,
|
||
// // label: {
|
||
// // // 文本标签
|
||
// // content: obj.name,
|
||
// // color: "#3EC273",
|
||
// // fontSize: 14,
|
||
// // bgColor: "#ffffff",
|
||
// // borderRadius: 4,
|
||
// // padding: 5,
|
||
// // textAlign: "center",
|
||
// // },
|
||
// // },
|
||
// // ];
|
||
// },
|
||
// 点击地图上的锚点
|
||
handleClickMarker(e) {
|
||
const clickedMarker = this.markers.find(
|
||
(item) => item.id === e.detail.markerId // 用小程序返回的id匹配
|
||
);
|
||
this.showChargeBox = false;
|
||
|
||
const serviceDetail = this.serviceList.find(
|
||
(item) => item.SERVERPART_ID === Number(clickedMarker.serviceId) // 用小程序返回的id匹配
|
||
);
|
||
this.longitude = this.longitude;
|
||
this.latitude = this.latitude;
|
||
this.currentServiceObj = serviceDetail;
|
||
this.currentServiceList = [clickedMarker.serviceName];
|
||
|
||
let _this = this;
|
||
setTimeout(() => {
|
||
_this.showChargeBox = true;
|
||
}, 500);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
// background: #f8f8f8;
|
||
background: #F3F4F6;
|
||
|
||
.mapBox {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
transition: transform 0.5s ease;
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 100%;
|
||
// height: calc(100vh - 55px - 300rpx);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.topBox {
|
||
width: 100%;
|
||
height: 55px;
|
||
z-index: 2;
|
||
box-sizing: border-box;
|
||
padding: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.topRight {
|
||
width: calc(100% - 240rpx);
|
||
height: 72rpx;
|
||
background: #fff;
|
||
border-radius: 36rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
|
||
.searchIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.searchText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9fa1aa;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.listBox {
|
||
width: 180rpx;
|
||
height: 72rpx;
|
||
background: #fff;
|
||
border-radius: 36rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
|
||
.listIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.text {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.statusBox {
|
||
box-sizing: border-box;
|
||
padding: 16rpx;
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
position: absolute;
|
||
top: 40rpx;
|
||
right: 16rpx;
|
||
z-index: 2;
|
||
|
||
.statusItem {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8rpx 0;
|
||
|
||
.colorBox {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.statusIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.brandCharge {
|
||
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
|
||
sans-serif;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 120rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.empty {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.valueBox {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
width: 100rpx;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.localPosition {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx;
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
// position: absolute;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// top: 280rpx;
|
||
// right: 16rpx;
|
||
z-index: 1;
|
||
|
||
.localIcon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.serviceDetailBox {
|
||
width: 100%;
|
||
// width: calc(100% - 80rpx);
|
||
height: 450rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx;
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.scanBox {
|
||
// width: 100%;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
// height: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// position: absolute;
|
||
// top: 280rpx;
|
||
// right: 160rpx;
|
||
// bottom: 40rpx;
|
||
// top: 0;
|
||
// left: 0;
|
||
// left: 0;
|
||
z-index: 1;
|
||
|
||
.scanIconBox {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
background: #ba922f;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.scanIcon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.scanBox {
|
||
position: absolute;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: #ba922f;
|
||
overflow: hidden;
|
||
|
||
.line {
|
||
position: absolute;
|
||
width: 37rpx;
|
||
height: 4rpx;
|
||
background: #fff;
|
||
animation: moveUpDown 2s linear infinite;
|
||
}
|
||
|
||
@keyframes moveUpDown {
|
||
0% {
|
||
top: 8rpx;
|
||
}
|
||
|
||
50% {
|
||
top: calc(100% - 12rpx);
|
||
/* 40rpx(容器高度) - 4rpx(线条高度) */
|
||
}
|
||
|
||
100% {
|
||
top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.moveLeft {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.listPage {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 100%;
|
||
transition: transform 0.5s ease;
|
||
box-sizing: border-box;
|
||
padding: 16rpx;
|
||
padding-top: 40rpx;
|
||
z-index: 2;
|
||
// background-color: #fff;
|
||
// background-color: #F3F4F7;
|
||
// background: linear-gradient(0deg, #F2F3F6 0%, #CFE6F5 100%);
|
||
background-image: url(https://eshangtech.com/wanmeiyizhanImg/app/chargeBg.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.pageBottomTop {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftSearchBox {
|
||
width: 486rpx;
|
||
height: 54rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 32rpx;
|
||
box-sizing: border-box;
|
||
padding: 14rpx 30rpx;
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);
|
||
|
||
.searchIcon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.rightBox {
|
||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background-color: #009DFF;
|
||
padding: 6rpx 30rpx 10rpx 32rpx;
|
||
border-radius: 32rpx;
|
||
height: 54rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.searchBox {
|
||
width: 100%;
|
||
height: 72rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.topRight {
|
||
width: calc(100% - 240rpx);
|
||
height: 72rpx;
|
||
background: #fff;
|
||
border-radius: 36rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
|
||
.searchIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.searchText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9fa1aa;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.listBox {
|
||
width: 180rpx;
|
||
height: 72rpx;
|
||
// background: #fff;
|
||
background-image: url("https://eshangtech.com/minTestImg/mapBg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 36rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
|
||
.listIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.text {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scrollListBox {
|
||
width: 100%;
|
||
// height: calc(100% - 100rpx);
|
||
height: calc(100% - 138rpx);
|
||
// margin-top: 16rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.scrollListBox ::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.moveRight {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
|
||
.pageBottomStyle {
|
||
width: 100%;
|
||
height: 606rpx;
|
||
background-image: url(https://eshangtech.com/wanmeiyizhanImg/app/chargeBg.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 44rpx 40rpx;
|
||
|
||
.pageBottomTop {
|
||
width: 100%;
|
||
height: 54rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftSearchBox {
|
||
width: 486rpx;
|
||
height: 54rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
border-radius: 32rpx;
|
||
padding: 14rpx 30rpx;
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);
|
||
|
||
.searchIcon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.rightBox {
|
||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background-color: #009DFF;
|
||
padding: 6rpx 30rpx 10rpx 32rpx;
|
||
border-radius: 32rpx;
|
||
height: 54rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.funBox {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
|
||
.funItem {
|
||
height: 50rpx;
|
||
box-sizing: border-box;
|
||
padding: 10rpx 16rpx;
|
||
background-color: #009DFF;
|
||
border-radius: 32rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
.funItemIcon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.funItemText {
|
||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.currentServiceBox {
|
||
width: 100%;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |