ebike-ui/ebike-maintenance/components/bike-maintain-detail/bike-maintain-detail.vue

<template>
  <view class="bike-maintain-wrapper">
    <view class="header-wrapper">
      <view>
        <view>
          <text style="color: #b7b7b7">车辆编号/类型</text>
          <text style="color: #3b80f8; margin-left: 20rpx" @click="openBikeInfo"
            >详情</text
          >
          <uni-icons color="#3b80f8" type="right" size="15"></uni-icons>
        </view>
        <view style="margin-top: 10rpx">
          <text style="font-weight: bold; font-size: 32rpx">
            {{ bikeInfo["carInfo"]["bikeCode"] || "-" }}
          </text>
          <text style="margin: 0 12rpx; color: #b7b7b7">|</text>
          <text>/</text>
        </view>
      </view>
      <view
        class="header-right"
        :style="{
          color: getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'color'),
        }"
      >
        <uni-icons
          custom-prefix="iconfont"
          :type="getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'icon')"
          :color="
            getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'color')
          "
          :size="iconsize"
        />
        {{ bikeInfo["carInfo"]["resGPSDto"]["soc"] }}%
      </view>
    </view>
    <scroll-view class="content-wrapper" scroll-y="true">
      <view class="card-wrapper">
        <view class="row">
          <view class="key">故障部位</view>
          <view class="value" @click="jumpWXDetail">
            {{ bikeInfo["WXInfo"]["faultPart"] || "-" }}
            <uni-icons color="#464646" type="right" size="15"></uni-icons>
          </view>
        </view>
        <view class="row">
          <view class="key">上报时间</view>
          <view class="value">
            {{ bikeInfo["WXInfo"]["reportAt"] || "-" }}
          </view>
        </view>
        <view class="row">
          <view class="key">上报来源</view>
          <view class="value">
            {{ bikeInfo["WXInfo"]["reportSource"] || "-" }}</view
          >
        </view>

        <view class="row">
          <view class="key"> 上报次数</view>
          <view class="value"> /</view>
        </view>
      </view>
    </scroll-view>
    <view class="footer-wrapper">
      <AuditBtnBox :bellParams="bellParams" :bikeCode="bikecode" />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import AuditBtnBox from "@/components/audit-btn-box/audit-btn-box.vue";
import * as api from "@/utils/api.js";
import navigator from "@/utils/navigator.js";

const iconsize = 18;
const bellParams = ref({
  ecuId: "",
  bikeId: "",
});
const bikecode = ref("");
const bikeInfo = ref({
  carInfo: {
    resGPSDto: {},
  },
  WXInfo: {},
});
const emit = defineEmits(["apiChangeAll"]);

// 获取电池状态
const getSocStatus = (value, key) => {
  let status = {
    color: "#3b80f8",
    icon: "icon-ebikedianliang1",
  };
  if (!value) return status;

  switch (true) {
    case value >= 80:
      status.color = "#66c467";
      status.icon = "icon-ebikedianliang2";
      break;
    case value >= 20 && value < 80:
      status.color = "orange";
      status.icon = "icon-ebikedianliang1";
      break;
    default:
      status.color = "red";
      status.icon = "icon-ebikedianliang";
  }

  return status[key];
};

const getBikeInfo = (bikeCode) => {
  bikecode.value = String(bikeCode);

  if (bikeCode) {
    Promise.allSettled([getBikeINfoData(), getFaultInfo()]).then((results) => {
      results.forEach((result, index) => {
        if (result.status === "fulfilled") {
          if (index === 0) bikeInfo.value.carInfo = result.value;
          if (index === 1) bikeInfo.value.WXInfo = result.value;

          console.log(bikeInfo.value);
        } else {
          console.error("获取车辆信息失败:", result.reason);
        }
        emit("apiChangeAll");
      });
    });
  } else {
    uni.showToast({
      title: "没有找到车辆信息",
      icon: "none",
    });
  }

  // 获取车辆详细信息数据
  function getBikeINfoData() {
    return new Promise((resolve, reject) => {
      api
        .callMaintenanceApi(
          "ebikeBikeInfo/getBikeINfoData?bikeCode=" + bikecode.value,
          {},
          "get"
        )
        .then((res) => {
          if (res && res.data) {
            resolve(res.data);
          } else {
            reject("获取车辆信息失败");
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  // 获取车辆的维护信息
  function getFaultInfo() {
    const userInfo = uni.getStorageSync("userInfo");
    const params = {
      receiverId: userInfo.staffId,
      bikeCode: bikecode.value,
    };
    return new Promise((resolve, reject) => {
      //获取车辆维护订单编号
      api
        .callEbikeInfo("inspectHaveOrNotWorkOrder", params)
        .then((res) => {
          const orderId = res.data;
          api
            .callEbikeInfo("getFaultInfo?orderId=" + orderId, {}, "get")
            .then((res1) => {
              resolve(res1.data);
            })
            .catch((error) => {
              reject(error);
            });
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
};

function jumpWXDetail() {
  navigator.to("/pages/warehouse/maintainDetail/maintainDetail", {
    bikeCode: bikecode.value,
  });
}

function openBikeInfo() {
  const { bikeId, ecuId, ecuSn } = bikeInfo.value.carInfo;
  const url = `/pages/devops/ebikeinfo/ebikeinfo?bikeId=${bikeId}&ecuId=${ecuId}&ecuSn=${ecuSn}`;
  uni.navigateTo({
    url: url,
  });
}

defineExpose({
  getBikeInfo,
});
</script>

<style scoped lang="scss">
.bike-maintain-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: fixed;
  overflow-y: hidden;
  font-size: 26rpx;

  .header-wrapper {
    width: 100%;
    display: flex;
    padding: 0 20rpx;
    justify-content: space-between;
    justify-items: center;

    .header-right {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .content-wrapper {
    width: 100%;
    height: 510rpx;
    padding: 0 20rpx;
  }

  .footer-wrapper {
    width: 100%;
    padding: 20rpx;
    background-color: white;
  }
}

.card-wrapper {
  width: 100%;
  padding: 20rpx;
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
  margin-top: 10rpx;

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    margin: 25rpx 0;

    .key {
      color: #a8a8a8;
    }

    .value {
      color: #464646;
    }
  }
}
</style>