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.shortId }}</text>
      </view>
      <view class="device-header_fun">
        <view class="device-header_func-tag" v-for="f in state.device.functionList" :key="f" style="margin-right: 10px;">
          <uv-tags :text="f"  size="mini"   plain plainFill bgColor="#19A497" color="white"> </uv-tags>
        </view>
      </view>
      <view class="device-header_fun">
        <uv-tags plain size="mini" type="primary" :text="fmtDictName('WashDevice.status',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_guide>
        <view>●点击上方【启动】按钮启动设备；
        </view>
        <view>●设备启动后，请在设备功能面板按下功能按键以选择服务项目；
        </view>
        <view>●洗车过程中再次按下功能按键可以暂停次功能，暂停过程中将停止计费，如需恢复请再次按下功能按键；
        </view>
        <view>●洗车结束后，请按下结算按键或小程序【结束】按钮，设备停止运行之后将结束计费；
        </view>
        <view>●请在洗车完成后尽快将车辆驶离工位以方便后续用户，谢谢配合。
        </view>

      </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, fmtDictName} from "@/utils/common";
import {get, post} from "@/utils/https";

const initState = () => ({
  device: {
    functions:[],
    deviceName:'',
    state:''
  },
  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.q);
    let scanTime = options.scancode_time;
    console.log(query,scanTime)
    if(query){
      id   = query.split("#")[1]
    }else{
    return;
    }
  }
  state.device = getApp<any>().globalData.last.device;
  loadDeviceDetail(id);
});


const loadDeviceDetail = (id: number) => {
  get(`/wash-device/queryDevice/${id}`).then((res: any) => {
    res.functionList = res.funcs.split("|")||[]
    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();
        uni.showToast({
          title:'设备启动成功'
        })
      })
    }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;
    display: inline-flex;

    &-tag{
      margin-right: 10px;
    }
  }

}

.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: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    background-color: $uni-color-primary;
    color: white;
    font-size: 28px;
    font-weight: 500;
  }

  &_guide{
    width: 80%;
    margin-top: 40px;
    font-size: 14px;
  }
}
</style>