car-wash-front/src/pages-wash/device/index.vue

<template>
  <view :class="['page']">
    <view class="device-header">
      <view class="device-header_name">
        <text>洗车机编号：{{ state.device.deviceName }}</text>
      </view>
      <view class="device-header_fun">
        <uv-tags plain size="mini" type="info" :text="f" v-for="(f,i) in state.device.functions.split('\\|')" :key="i"></uv-tags>
      </view>
      <view class="device-header_fun">
        <uv-tags plain size="mini" type="primary" :text="state.device.state"></uv-tags>
      </view>

    </view>
    <view class="device-body">
      <view class="device-body_ops" @click="debounceStartStopDevice">
        <text v-if="state.device.state==='idle'">启动</text>
        <text v-else>停止</text>
      </view>
      <view class="device-body_ops-time">{{ state.time }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onHide, onLoad, onShow} from "@dcloudio/uni-app";
import {reactive, ref} from "vue";
import {debounce} from "@/utils/common";
import {get, post} from "@/utils/https";

const initState = () => ({
  device: {},
  time: "00:00:00",
  start: new Date()
})

const state = reactive(initState())

onHide(() => {
  Object.assign(state, initState());
})

onLoad((options:any) => {
  console.log("device onLoad>>>>", options)
  let id = options?.shortId;
  if (!id) {
    let query = decodeURIComponent(options);
    let scanTime = options.scancode_time;
    if(query){
      id   = query?.shortId||query?.id||query
    }else{
    return;
    }
  }
  state.device = getApp<any>().globalData.last.device;
  console.log(state.device)
  loadDeviceDetail(id);
});


const loadDeviceDetail = (id: number) => {
  get(`/wash-device/queryDevice/${id}`).then((res: any) => {
    state.device = res;
  }).catch(e => {
    console.error(e)
  })
  countTime();
}

const handleNavigateBack = () => {
  uni.navigateBack();
}

const debounceStartStopDevice = debounce(()=>{
  handleClickDevice();
},600)

const handleClickDevice = () => {
    if(state.device?.state==='idle'){
      uni.showLoading({
        title: "启动中",
        mask: true,
      });
      post(`/wash-device/startDevice/${state.device.shortId}`).then((res:any)=>{
        uni.hideLoading()
      })
    }else{
      uni.showLoading({
        title: "停止中",
        mask: true,
      });
      post(`/wash-device/stopDevice/${state.device.shortId}`).then((res:any)=>{
        uni.hideLoading()
      })
    }
}

const countTime = () => {
  setInterval(() => {
    let delta = new Date().getTime() - state.start.getTime();
    delta = delta / 1000;
    let hour = (delta / 3600).toFixed(0);
    let min = ((delta % 3600) / 60).toFixed(0);
    let second = ((delta % 3600) % 60).toFixed(0);
    state.time = [
      Number(hour) > 9 ? hour : `0${hour}`,
      Number(min) > 9 ? min : `0${min}`,
      Number(second) > 9 ? second : `0${second}`
    ].join(":")
  }, 1000)
}


</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  width: 100%;
  background-color: #f6f7fa;
}

.device-header {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &_name {
    font-weight: 500;
    margin: 15rpx 0;
  }

  &_fun {
    font-size: 13px;
    color: #7a7a7a;
    margin: 10rpx 0;
  }

}

.device-body {
  flex-grow: 1;
  margin-top: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

  &_ops {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 240rpx;
    height: 240rpx;
    border-radius: 50%;
    background-color: $uni-color-primary;
    color: white;
    font-size: 28px;
    font-weight: 500;
  }
}
</style>