ebike-ui/ebike-maintenance/components/devops-home-bikeinfo/devops-home-bikeinfo.vue

<template>
  <div>
    <div class="divRowQC">
      <lable class="lbNoQC">{{ data.bikeCode }}</lable>
      <label
        v-for="(item, index) in data.arrTag"
        :key="index"
        :class="getTagClass(item.type)"
      >
        {{ item.title }}
      </label>
    </div>
    <div class="divRowQC" style="color: #adb3b3; font-size: 14px">
      电量刷新时间：{{ data.time }}
    </div>
    <div
      class="divRowQC"
      style="display: flex; justify-content: space-between; font-size: 14px"
    >
      <label>
        <label :style="{ color: data.color }">
          <uni-icons
            custom-prefix="iconfont"
            :type="data.icon"
            :color="data.color"
            :size="iconsize"
          />
          {{ data.soc }}%
        </label>
        <lable style="color: #00c57c; margin-left: 10px">
          (
          <label>
            <uni-icons
              custom-prefix="iconfont"
              type="icon-ebikecheliangguanli"
              color="#00C57C"
            />
          </label>
          <label>{{ data.distance }}</label>
          )
        </lable>
      </label>
      <div
        style="
          background-color: #e2f8ff;
          border-radius: 15px;
          padding: 3px 15px;
        "
      >
        <label>
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikeyinlianglabashengyin"
            color="#0084FF"
            size="16"
          />
        </label>
        <label style="color: #0084ff" @click="checkecu()">寻车铃</label>
      </div>
    </div>
    <div
      style="margin-top: 15px; display: flex; justify-content: space-between"
    >
      <label class="divBtnBlue" @click="openBikeInfo">车辆详情</label>
      <label
        v-show="data.rightlx == 'dd'"
        class="divBtnBlue"
        style="margin-left: 10px"
        @click="checkecu('unlock')"
        >开锁</label
      >
      <label
        v-show="data.rightlx == 'dd'"
        class="divBtnBlue"
        style="margin-left: 10px"
        @click="checkecu('lock')"
        >关锁</label
      >
      <label
        v-show="data.rightlx == 'dd'"
        class="divBtnBlue"
        style="margin-left: 10px"
        @click="openDispatch"
        >调度</label
      >
      <label
        v-show="data.rightlx == 'hd'"
        class="divBtnBlue"
        style="margin-left: 10px"
        @click="changeBattery"
        >换电</label
      >
    </div>
  </div>
</template>

<script setup>
import { checkEcuBells } from "@/utils/commonApi";

const props = defineProps(["data"]);

// 调度按钮
function openDispatch() {
  const { bikeCode } = props.data;
  console.log(props.data);
  const url = `/pages/warehouse/carDispatchByMine/carDispatchByMine?bikeCode=${bikeCode}`;
  uni.navigateTo({
    url: url,
  });
}

//查看车辆信息
function openBikeInfo() {
  const { bikeId, ecuId, ecuSn } = props.data;
  const url = `/pages/devops/ebikeinfo/ebikeinfo?bikeId=${bikeId}&ecuId=${ecuId}&ecuSn=${ecuSn}`;
  uni.navigateTo({
    url: url,
  });
}

function getTagClass(type) {
  let tagclass = "lbTag";
  switch (type) {
    case "red":
      tagclass += " lbTagRed";
      break;
    case "green":
      tagclass += " lbTagGreen";
      break;
  }
  return tagclass;
}

//中控操作
function checkecu() {
  checkEcuBells(props.data);
}

//完成换电
function changeBattery() {
  const { bikeCode } = props.data;
  uni.navigateTo({
    url: `/pages/devops/changebatteries/changebatteries?bikeCode=${bikeCode}`,
  });
}
</script>

<style scoped>
.divBtnBlue {
  background-color: #0084ff;
  color: white;
  border-radius: 5px;
  padding: 5px 0px;
  font-size: 14px;
  width: 100%;
  text-align: center;
}

.divRowQC {
  line-height: 25px;
}

.lbNoQC {
  font-size: 14px;
  color: #000;
  margin-left: 3px;
  font-weight: 600;
}

.lbTag {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 15px;
  margin-left: 5px;
}

.lbTagGreen {
  color: #1dd950;
  background-color: #e8f9e6;
}

.lbTagRed {
  color: #f98f93;
  background-color: #ffeced;
}
</style>