ebike-ui/ebike-maintenance/pages/devops/changebatteries/changebatteries.vue

<!-- 换电 -->
<template>
  <div class="b-body-gray">
    <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }">
      <div style="padding-top: 5px">
        <uni-forms :border="true" :label-width="90">
          <uni-card>
            <uni-forms-item label="车辆编号:">
              <bikeCodeScan
                ref="refbikeScan"
                v-model="bikeCode"
                @scan-change="getBikeInfo"
              />
            </uni-forms-item>
            <uni-forms-item label="车辆状态:">
              <div class="divContent divCenter">{{ formdata.online }}</div>
              <div class="divContent">{{ formdata.timestamp }}</div>
            </uni-forms-item>
            <uni-forms-item label="老电池编号:">
              <div class="divContent divCenter">
                {{ formdata.oldBatteryCode }}
              </div>
            </uni-forms-item>
            <uni-forms-item label="电池电量:">
              <div class="divContent divCenter">
                {{ formdata.soc ? formdata.soc : 0 }}%
              </div>
            </uni-forms-item>
            <uni-forms-item label="车辆位置:">
              <uni-list :border="false">
                <uni-list-item
                  showArrow
                  title="查看地图"
                  :note="
                    formdata.latitude
                      ? formdata.latitude + ',' + formdata.longitude
                      : ''
                  "
                  link="navigateTo"
                  clickable
                  @click="mapClick"
                />
                <!-- :to=" '/pages/map/map-findbike?longitude=' + formdata.longitude
                + '&latitude=' + formdata.latitude " -->
              </uni-list>
            </uni-forms-item>

            <div class="divBtn">
              <text
                :class="formdata.ecuId ? 'b-btn-babyblue' : 'b-btn-gray'"
                v-for="item in arrEcuBtn"
                @click="checkecu(item.url)"
                >{{ item.title }}</text
              >
            </div>
            <uni-forms-item label="新电池编号:">
              <scanCode v-model="newBatteryCode" placeholder="请输入" />
            </uni-forms-item>
            <div
              class="b-btn-blue"
              style="text-align: center"
              @click="checkecu('openBatteryLock')"
            >
              打开电池仓
            </div>
            <div style="text-align: right">
              <text style="margin-right: 5px; margin-top: 5px">
                <uni-icons
                  custom-prefix="iconfont"
                  type="icon-ebikeguzhangshangbao1"
                  size="20"
                  color="#999"
                />
              </text>
              <text class="b-font-gray-sm">电池仓打不开，</text>
              <text
                class="b-font-blue-sm"
                style="font-weight: bold"
                @click="openfaultreport"
                >上报故障</text
              >
            </div>
          </uni-card>

          <div style="padding: 15px">
            <div
              class="b-font-gray-base"
              style="margin-bottom: 10px; font-weight: bold"
            >
              温馨提示
            </div>
            <div class="b-font-gray-sm">
              1、读取到新电池的电量即视为更换成功新的电池;
            </div>
            <div class="b-font-gray-sm">
              2、电池更换完成自动读取设备状态和电池电量，过程可能需要个 几分钟；
            </div>
            <div class="b-font-gray-sm">
              3、更换完成请点击下面完成换电按钮；
            </div>
            <div class="b-font-gray-sm">
              4、如果直接点击更换完成，电量会暂时变成41%，系统检测到电
              量上报后会自动变成上报的电量；
            </div>
          </div>
        </uni-forms>
      </div>
    </scroll-view>
  </div>

  <!-- <div class="divBottom">
		<text class="b-btn-white" style="margin-right: 15px;" @click="refresh">刷新</text>
		<text class="b-btn-blue" @click="completebatter">完成换电</text>
	</div> -->
  <view class="nav-panel">
    <c-uni-goods-nav
      :fill="true"
      :options="[]"
      :buttonGroup="navButtonGroup"
      @buttonClick="navButtonClick"
    />
  </view>
</template>

<script setup>
import * as api from "@/utils/api.js";
import dayjs from "dayjs";
import { showModelMessage } from "@/utils/tools.js";
import { ref, watch, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import navigator from "@/utils/navigator.js";
//车辆信息
let bikeCode = ref(null); //车辆编号
const refbikeScan = ref(null);
let formdata = ref({
  bikeId: "",
  ecuId: "",
  latitude: null,
  longitude: null,
  oldBatteryCode: "",
  online: null,
  soc: "", //电量
  timestamp: "",
});
let newBatteryCode = ref(""); //新电池编号

// 获取设备信息
const systemInfo = uni.getSystemInfoSync();
// 获取屏幕高度和状态栏高度
const screenHeight = systemInfo.screenHeight;
let scrollHeight = screenHeight - 150;

//按钮
let arrEcuBtn = [
  {
    title: "寻车铃声",
    url: "findEbike",
  },
  {
    title: "开锁",
    url: "unlock",
  },
  {
    title: "关锁",
    url: "lock",
  },
];

//加载
onLoad((option) => {
  const { bikeCode } = option;
  getBikeInfo(bikeCode);
});
onMounted(() => {
  if (bikeCode.value != "") {
    if (refbikeScan.value) {
      refbikeScan.value.onSetValue(bikeCode.value); // 调用子组件暴露的方法来更新子组件值
    }
  }
});

//获取车辆信息
const getBikeInfo = (bikecode) => {
  if (bikecode == bikeCode.value) return;
  const params = {
    bikeCode: bikecode,
  };
  bikeCode.value = bikecode;
  api.callEbikeBatteryApply("getBikeMsg", params, "get").then((res) => {
    const { code, data, message } = res;
    if (code === 500) {
      showModelMessage(message);
      formdata.value = {};
      return;
    }
    if (arrEcuBtn.length < 4) {
      arrEcuBtn.push({
        title: "关电池仓",
        url: "closeBatteryLock",
      });
    }
    const timestamp = data.timestamp;
    let newtime = timestamp
      ? dayjs(timestamp * 1000).format("YYYY-MM-DD HH:mm:ss")
      : "";
    const newdata = {
      ...data,
      timestamp: newtime,
    };
    formdata.value = {
      ...newdata,
    };
  });
};

// 地图点击事件
const mapClick = (e) => {
  console.log(navigator);
  const { longitude, latitude } = formdata.value;
  if (longitude & latitude) {
    navigator.to("/pages/map/map-findbike", {
      longitude,
      latitude,
    });
  } else {
    showModelMessage("请先扫码车辆编号！");
  }
};

//中控操作
const checkecu = (url) => {
  const { ecuId, bikeId } = formdata.value;
  if (!ecuId) {
    showModelMessage("请先扫码车辆编号！");
    return;
  }
  api
    .callCoreApi(
      url,
      {
        ecuId,
        bikeId,
      },
      "get"
    )
    .then((res) => {
      const { code, message } = res;
      showModelMessage(message);
    });
};
//上报故障
const openfaultreport = () => {
  const bikecode = bikeCode.value;
  if (!bikecode) {
    showModelMessage("请先扫码车辆编号！");
    return;
  }
  uni.navigateTo({
    url: "/pages/devops/faultreport/faultreport?bikeCode=" + bikecode,
  });
};

//刷新
const refresh = () => {
  const bikecode = bikeCode.value;
  if (!bikecode) {
    showModelMessage("请先扫码车辆编号！");
    return;
  }
  getBikeInfo(bikecode);
};

//完成换电
const completebatter = () => {
  const bikeId = formdata.value.bikeId;
  const bikecode = bikeCode.value;
  const newbattercode = newBatteryCode.value;
  if (!bikecode) {
    showModelMessage("请先扫码车辆编号！");
    return;
  }
  if (!newbattercode) {
    showModelMessage("请先扫码新电池编号！");
    return;
  }
  //校验新电池
  const params = {
    bikeId,
    newBatteryCode: newbattercode,
    bikeCode: bikecode,
  };
  api.callEbikeBatteryApply("change", params).then((res) => {
    const { code, message } = res;
    showModelMessage(message);
    if (code == 200) {
      uni.navigateBack();
    }
  });
};

const navButtonGroup = reactive([
  {
    text: "刷新",
    backgroundColor: "#0078D4",
    color: "#fff",
    disable: false,
  },
  {
    text: "完成换电",
    backgroundColor: "#0078D4",
    color: "#fff",
    disable: false,
  },
]);

const navButtonClick = (e) => {
  const index = e.index;
  if (index == 0) {
    refresh();
  } else if (index == 1) {
    completebatter();
  }
};
</script>

<style scoped>
.divContent {
}

.divBtn {
  height: 35px;
}

.divBtn text {
  margin-right: 5px;
  font-size: 12px;
}

.divCenter {
  display: flex;
  align-items: center;
  height: 35px;
}

.divBottom {
  position: absolute;
  bottom: 0px;
  padding: 0px 15px;
  text-align: center;
  background: white;
  width: 100%;
  line-height: 55px;
}

.nav-panel {
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  padding-bottom: 10px;
  z-index: 999;
  background-color: #fff;
}
</style>