站点列表、详情优化修改

src/api/charge.ts

@@ -276,6 +276,15 @@ export function fetchStation(id: number) {
         });
 }
 
+export function fetchStationDetail(stationId: string) {
+    return cHttp
+        .get(`/charge/stationInfo/${stationId}`)
+        .then((res) => {
+            console.log("xxxxx", res)
+            return res;
+        });
+}
+
 export function fetchStationByIds(ids: number[]) {
     return fetchAllStations().then((res) => {
         const list = res.filter((item) => ids.includes(Number(item.StationID)));

src/components/charge-station/charge-station.vue

@@ -69,7 +69,7 @@
           >
           <view
               class="top-right-bound flex-align-center lh-32"
-              v-if="slow && slow.length"
+              v-if="slow "
           >
             <charge-icon type="slow"></charge-icon>
             <view class="ml-6 fs-22 color-666"

src/pages-charge/machines/charge-machine/charge-machine.vue

@@ -9,7 +9,7 @@
       :class="[
         'charge-point_icon',
         'flex-center',
-        `charge-point_icon-${item.connectorStatusInfo.status}`,
+        `charge-point_icon-${item.status}`,
       ]"
     >
       <image
@@ -27,9 +27,9 @@
             'fs-24',
             'flex-center',
             'ml-8',
-            `tag-${item.connectorStatusInfo.status}`,
+            `tag-${item.status}`,
           ]"
-          >{{ (statusMap as any)[item.connectorStatusInfo.status] }}</view
+          >{{ (statusMap as any)[item.status] }}</view
         >
       </view>
       <view class="mt-10 flex-align-center">
@@ -84,10 +84,10 @@ export default {
       const { list } = this;
       if (
         list &&
-        list[index].connectorStatusInfo &&
-        list[index].connectorStatusInfo.status &&
-        (list[index].connectorStatusInfo.status === 1 ||
-          list[index].connectorStatusInfo.status === 2)
+        list[index] &&
+        list[index].status &&
+        (list[index].status === 1 ||
+          list[index].status === 2)
       ) {
         uni.showActionSheet({
           itemList: ["去充电"],

src/pages-charge/machines/machines.vue

@@ -46,7 +46,7 @@
               mode="widthFix"
               style="width: 16px; display: block; flex-shrink: 0"
           />
-          <view class="ml-12 fs-26 color-666">{{ location.address }}</view>
+          <view class="ml-12 fs-26 color-666">{{ station.address }}</view>
           <view class="flex-center ml-auto nav" @click="openAddress">
             <image
                 src="/pages-charge/static/machines-banner-nav.png"
@@ -91,18 +91,17 @@
             class="flex-align-center"
             v-if="
             station &&
-            station.equipmentInfos &&
-            station.equipmentInfos.length &&
-            station.equipmentInfos[0].connectorInfos
+            station.connectInfoList &&
+            station.connectInfoList.length
           "
         >
           <view class="width-168 fs-26 color-666">充电桩类型</view>
           <view class="fs-26 color-000"
           >{{
-              station.equipmentInfos[0].connectorInfos[0].connectorType === 1
+              station.connectInfoList[0].connectorType === 1
                   ? "直流"
                   : "交流"
-            }}{{ station.equipmentInfos[0].connectorInfos[0].power }}kw
+            }}{{ station.connectInfoList[0].power }}kw
           </view
           >
         </view>
@@ -137,9 +136,9 @@
           :key="index"
       >
         <ChargeMachine
-            :title="'NO.' + item.shortId"
+            :title="'NO.' + item.equipmentId"
             :price="station.totalFee"
-            :list="item.connectorInfos"
+            :list="[item]"
             :parkingNo="item.parkingNo"
         ></ChargeMachine>
       </template>
@@ -186,7 +185,7 @@
 
 <script setup lang="ts">
 import {ref} from "vue";
-import {fetchStation, fetchStationPriceDesc} from "../../api/charge";
+import {fetchStation, fetchStationDetail, fetchStationPriceDesc} from "../../api/charge";
 import {onLoad} from "@dcloudio/uni-app";
 import ChargeMachine from "./charge-machine/charge-machine.vue";
 import PriceDesc from "./price-desc/price-desc.vue";
@@ -246,31 +245,29 @@ onLoad((options: any) => {
     title: "加载中",
     mask: true,
   });
-  fetchStation(Number(options.id))
+  fetchStationDetail(options.id)
       .then((res) => {
-        console.log(res);
+        console.log("station detail>>>",res);
         let ConnectorID = "";
-        if (res.equipmentInfos && res.equipmentInfos.length) {
-          res.equipmentInfos.forEach((item: any) => {
-            if (item.connectorInfos && item.connectorInfos.length) {
-              item.connectorInfos.forEach((con: any) => {
-                totalCount.value++;
-                if (!ConnectorID) {
-                  ConnectorID = con.connectorId;
-                }
-                if (
-                    con.connectorStatusInfo &&
-                    con.connectorStatusInfo.status === 1
-                ) {
-                  canUseCount.value++;
-                }
-              });
+        if (res.connectInfoList && res.connectInfoList.length) {
+          res.connectInfoList.forEach((con: any) => {
+            totalCount.value++;
+            if (!ConnectorID) {
+              ConnectorID = con.connectorId;
+            }
+            if (
+                con.status &&
+                con.status === 1
+            ) {
+              canUseCount.value++;
             }
           });
         }
+        res.totalFee = (Number(res.serviceFee)+Number(res.electricityFee)).toFixed(2)
+
         res.bannerImages = res.pictures.split(";");
         station.value = res;
-        stationEquipmentInfos.value = res.equipmentInfos.map((item: any) => {
+        stationEquipmentInfos.value = res.connectInfoList?.map((item: any) => {
           return {
             ...item,
           };

src/pages/map/map.vue

@@ -267,6 +267,8 @@
 </template>
 
 <script setup lang="ts">
+import {throttle} from "@/utils/util";
+
 const defaulDistance = 3;
 const defaultScale = 12;
 const pointSize = {
@@ -408,24 +410,29 @@ const refreshStation = (location: any) => {
     }
   ).then((res) => {
     const _markersIndex = stationPage.value.page === 1 ? 0 : markersIndex.value;
+    console.log("xxxxx",res)
     const _markers: any[] = res.map((item, index) => {
+      item.totalFee =(Number(item.serviceFee)+Number(item.electricityFee)).toFixed(2)
       length = 0;
       available = 0;
-      item.equipmentInfos &&
-        item.equipmentInfos.forEach((eq: any) => {
-          eq.connectorInfos &&
-            eq.connectorInfos.forEach((co: any) => {
-              length += 1;
-              if (
-                co.connectorStatusInfo &&
-                co.connectorStatusInfo.status === 1
-              ) {
-                available += 1;
-              }
-            });
-        });
+      // item.equipmentInfos &&
+      //   item.equipmentInfos.forEach((eq: any) => {
+      //     eq.connectorInfos &&
+      //       eq.connectorInfos.forEach((co: any) => {
+      //         length += 1;
+      //         if (
+      //           co.connectorStatusInfo &&
+      //           co.connectorStatusInfo.status === 1
+      //         ) {
+      //           available += 1;
+      //         }
+      //       });
+      //   });
+      console.log(item.serviceFee,item.StationID)
       return {
         id: Number(item.StationID),
+        totalFee:"12",
+        // (Number()+Number(item.electricityFee)||0).toFixed(2),
         latitude: item.location.stationLat,
         longitude: item.location.stationLng,
         iconPath:
@@ -437,7 +444,7 @@ const refreshStation = (location: any) => {
         height:
           index === _markersIndex ? pointSize.currentHeight : pointSize.height,
         label: {
-          content: `${available}/${length}`,
+          content: `${item.availableParkingNum||0}/${item.parkingNum||0}`,
           color: "#ffffff",
           fontSize:
             index === _markersIndex
@@ -474,6 +481,7 @@ const refreshStation = (location: any) => {
       stationPage.value.page === 1 ? res : [...station.value, ...res];
     markersIndex.value = _markersIndex;
     markers.value = _markers;
+    console.log(">>>>>>>>>>>>>",stationPage.value,station.value,mapMode.value,markersIndex.value)
     return res;
   });
 };
@@ -673,16 +681,20 @@ const mapChange = (e: any) => {
     return;
   }
   if (e.type === "end" && markers.value.length) {
+    //TODO 防抖500ms触发一次
+    throttle(()=>{
+      const current = e.target.centerLocation;
+      const { latitude, longitude } = current;
+      stationPage.value.page = 1;
+      refreshStation({
+        latitude,
+        longitude,
+      });
+    },500)
     // console.log("map change end", {
     //   ...e.detail.centerLocation,
     // });
-    const current = e.target.centerLocation;
-    const { latitude, longitude } = current;
-    stationPage.value.page = 1;
-    refreshStation({
-      latitude,
-      longitude,
-    });
+
   }
 };
 const _changeMarker = (current: number) => {