ebike-ui/ebike-maintenance/pages/warehouse/batteryRegulation/batteryRegulation.vue

<template>
  <view class="batteryRegulation-main">
    <!-- 电池地图 -->
    <map
      show-location
      id="mapRef"
      ref="mapRef"
      :scale="scale"
      :markers="markers"
      :longitude="mapcenter.longitude"
      :latitude="mapcenter.latitude"
      :style="{ width: '100%', height: '100%' }"
      @markertap="markerTap"
    />
    <!-- 电池详情 -->
    <you-touchbox
      ref="touchboxRef"
      initTop="0"
      minTop="0"
      maxTop="0.65"
      :disable="isTouchDisable"
      :customStyle="{
        borderRadius: '40rpx',
        backgroundColor: 'white',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)',
      }"
    >
      <view class="accumulator-detail">
        <view class="title-bar">
          <view class="title">电池详情</view>
          <view class="quantity">
            <uni-icons
              custom-prefix="iconfont"
              color="#42b883"
              type="icon-ebikedianchi1"
              size="24"
            ></uni-icons>
            <view style="margin-left: 5rpx">{{ batteryDetail.soc || 0 }}%</view>
          </view>
        </view>
        <view class="action-bar">
          <button class="action-button" @click="handleEnergize">
            <uni-icons
              custom-prefix="iconfont"
              color="#42b883"
              type="icon-ebiketongdian"
              size="20"
            ></uni-icons>
            <view style="margin-left: 10rpx">通电</view>
          </button>
          <button class="action-button" @click="handleOutage">
            <uni-icons
              custom-prefix="iconfont"
              color="#ff1033"
              type="icon-ebikeduandian"
              size="20"
            ></uni-icons>
            <view style="margin-left: 10rpx">断电</view>
          </button>
        </view>
      </view>
    </you-touchbox>
  </view>
</template>
<script setup>
import AMapWX from "@/utils/amap-wx.130.js";
import * as map from "@/utils/map.js";
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import { callMaintenanceApi } from "@/utils/api";

var amapsdk = new AMapWX({
  key: map.sdkKey,
});

/**
 * 电池详情
 */
const touchboxRef = ref(null);
const isTouchDisable = ref(false); //是否禁止触摸

/**
 * 地图
 */
const mapRef = ref(null);
let mapContext = null;
const scale = ref(14);
const batteryDetail = reactive({
  batteryId: "",
  ecuSn: "",
  latitude: 0,
  longitude: 0,
  soc: 0,
}); //电池详情
const socList = ref([]); //电池SOC数据
const markers = ref([]); //电池数据点位
const mapcenter = ref({
  longitude: null,
  latitude: null,
});
//定位
function getLocation() {
  map.getLoalcation(mapContext, (res) => {
    const { latitude, longitude } = res;
    mapcenter.value = {
      longitude: longitude,
      latitude: latitude,
    };
    getBatteryData();
  });
}
// 获取电池数据
function getBatteryData() {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  callMaintenanceApi("ebikeBattery/list", {}, "get")
    .then((res) => {
      if (res.code == 200 && res?.data.length > 0) {
        socList.value = res.data;
        markers.value = socList.value.map((item) => ({
          id: Number(item.batteryId),
          joinCluster: true,
          latitude: item.latitude,
          longitude: item.longitude,
          iconPath: "/static/map/accumulator.png",
          width: 35,
          height: 35,
        }));
      }
      uni.hideLoading();
    })
    .catch(() => {
      uni.hideLoading();
    });
}
// 点击电池点位
const markerTap = (e) => {
  const { markerId } = e.detail;
  console.log("点击的电池ID", markerId);
  resetForm();
  //根据markerId获取电池详情
  const battery = socList.value.find(
    (item) => Number(item.batteryId) === Number(markerId)
  );
  if (battery) {
    batteryDetail.ecuSn = battery.ecuSn;
    batteryDetail.latitude = battery.latitude;
    batteryDetail.longitude = battery.longitude;
    batteryDetail.soc = battery.soc;
    batteryDetail.batteryId = battery.batteryId;
    touchboxRef.value.setBottom(0.65);
  }
};
const resetForm = () => {
  batteryDetail.batteryId = "";
  batteryDetail.ecuSn = "";
  batteryDetail.latitude = 0;
  batteryDetail.longitude = 0;
  batteryDetail.soc = 0;
};

// 通电
const handleEnergize = () => {
  if (!batteryDetail.ecuSn) return;
  uni.showLoading({
    title: "正在通电中。。。",
    mask: true,
  });
  callMaintenanceApi(
    "ebikeBattery/energize",
    {
      ecuSn: batteryDetail.ecuSn,
    },
    "get"
  )
    .then((res) => {
      uni.hideLoading();
      if (res.data.code != 200) {
        uni.showToast({
          title: "通电异常",
          icon: "error",
        });
        return;
      }
      uni.showToast({
        title: "通电成功",
        icon: "none",
      });
    })
    .catch(() => {
      uni.hideLoading();
    });
};

// 断电
const handleOutage = () => {
  if (!batteryDetail.ecuSn) return;
  uni.showLoading({
    title: "正在断电中。。。",
    mask: true,
  });
  callMaintenanceApi(
    "ebikeBattery/outage",
    {
      ecuSn: batteryDetail.ecuSn,
    },
    "get"
  )
    .then((res) => {
      uni.hideLoading();
      if (res.data.code != 200) {
        uni.showToast({
          title: "断电异常",
          icon: "error",
        });
        return;
      }
      uni.showToast({
        title: "断电成功",
        icon: "none",
      });
    })
    .catch(() => {
      uni.hideLoading();
    });
};

onMounted(() => {
  mapContext = map.getMap("mapRef", getCurrentInstance());
  if (!mapContext) return;
  getLocation();
});
</script>
<style scoped>
.batteryRegulation-main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.accumulator-detail {
  width: 100%;
  padding: 0 30rpx;
}

.title-bar {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.title-bar .title {
  font-size: 32rpx;
  font-weight: bold;
}

.title-bar .quantity {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.action-bar {
  margin-top: 20rpx;
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.action-button {
  width: 40%;
  height: 80rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease; /* 添加过渡动画 */
}
.action-button:active {
  background-color: #e0e0e0; /* 点击时背景变深 */
  transform: scale(0.98); /* 轻微缩小 */
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
</style>