android-uniapp/pages/task/info.vue

<template>
  <view class="window-box dis-flex" style="background-color: #E9ECF2">
    <ly-back :autoBack="false" @backClick="backClick"/>
    <view v-if="countDown >= 0" class="countDown">{{ formatZero(countDown, 2) }}</view>

    <view class="w100 flex-center-center flex-dir-column">
      <view class="baseMessage w80 p-r">
        <view class="p-a avatar">
          <student-info :student="student"/>
        </view>
        <view class="dis-flex flex-wrap flex-y-center m-40" style="height: 80px;text-align: center">
          <view class="flex-three p-10">姓名：{{ pageData.studentInfo.name }}</view>
          <view class="flex-three p-10">性别：{{ pageData.studentInfo.gender }}</view>
          <view class="flex-three p-10">班级：{{ pageData.studentInfo.class }}</view>
          <view class="flex-three p-10">模式：{{ pageData.studentInfo.model }}</view>
          <view class="flex-three p-10">学校：{{ pageData.studentInfo.school }}</view>
          <view class="flex-three p-10">卡号：{{ pageData.studentInfo.mac || '手动选择' }}</view>
        </view>
      </view>

      <view class="dis-flex w80">
        <!--        <view v-if="pageData.status == 1" class="m-t-50 p-r-20">-->
        <!--          <view v-for="(item,index) in pageData.card" :key="index" :class="['cardbg-'+index]" class="cardbg b-r-15"-->
        <!--                @click="showDetail(item)">-->
        <!--            <view class="f-u-35 dis-flex flex-y-center checkCard p-l-20 p-r-20 p-t-20 p-b-5">-->
        <!--              <view :class="['circle-'+index]" class="circle"></view>-->
        <!--              <view class="flex-grow t-a-c">-->
        <!--                <view class="f-w-b">{{ item.name }}</view>-->
        <!--                <view class="f-u-32 font-color p-10">-->
        <!--                  <view v-if="pageData.status == 1" class="t-a-c f-w-5 f-u-29">-->
        <!--                    <view v-if="item.value1">{{ item.title1 }}:{{ item.value1 }}</view>-->
        <!--                    <view v-if="item.value2" class="m-t-10">{{ item.title2 }}:{{ item.value2 }}</view>-->
        <!--                  </view>-->
        <!--                </view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->

        <view class="checkMessage p-40 m-t-50 b-r-15 flex-center-center flex-dir-column flex-grow"
              style="min-height: 500rpx">
          <view class="f-u-35 col-f p-20">{{ pageData.status == 1 ? '检测结果展示' : '待检测项目' }}</view>
          <view class="w-bg w100 b-r-15 m-t-10 flex-y-start flex-wrap flex-grow ">
            <view v-for="(item,index) in card" :key="index" class="flex-two t-a-c p-20 f-u-32 f-w-b">
              <view class="flex-center-center">
                <view :class="['circleBg-'+index]" class="circle1"></view>
                <view class="p-l-10">{{ item.name }}</view>
              </view>
              <view v-for="(it,ind) in item.val" :key="ind"
                    class="t-a-c f-w-5 p-l-50 p-t-20 font-color flex-start-end">
                <view class="m-r-10">{{ it.title }}:</view>
                <template v-if="it.value">
                  {{ it.value || '待检测' }}{{}}
                </template>
                <view v-else class="col-red f-u-21">
                  待检测
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>


      <view class="dis-flex flex-x-center w100 m-t-50">
        <view v-if="pageData.status == -1" class="w10">
          <template v-if="configStore.mType === 7">
            <view v-if="!machineFun.machine.bmi" class="col-red">体重秤设备未连接</view>
          </template>
        </view>
        <view v-if="pageData.status == 0" class="w10" @click="toTask(10)">
          <view class="btn btn-primary w100">进入测试</view>
        </view>
        <view v-if="pageData.status == 1" class="w10">
          <view class="btn btn-primary w100">重新检测</view>
        </view>
        <view v-if="pageData.status == 1" class="w10 m-l-50" @click="logout">
          <view class="btn btn-primary w100">完成</view>
        </view>
      </view>
    </view>
    <!--    <view class="window w40 flex-center-center flex-dir-column">-->
    <!--      <student-info :student="student"/>-->
    <!--    </view>-->
    <!--    <view class="w60 h100 dis-flex flex-x-center flex-dir-column">-->
    <!--      <template v-if="configStore.mType === 7">-->
    <!--        <view class="info-item">-->
    <!--          <view class="info-item-label">身高</view>-->
    <!--          <view class="">-->
    <!--            <view class="col-checked f-64">{{ queryForm.value1 }}</view>-->
    <!--          </view>-->
    <!--        </view>-->
    <!--        <view class="info-item">-->
    <!--          <view class="info-item-label">体重</view>-->
    <!--          <view class="">-->
    <!--            <view class="col-checked f-64">{{ queryForm.value2 }}</view>-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </template>-->
    <!--      <view v-if="configStore.mType === 8" class="info-item">-->
    <!--        <view class="info-item-label">肺活量</view>-->
    <!--        <view class="">-->
    <!--          <view class="btn btn-primary">进入肺活量</view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view v-if="configStore.mType === 9" class="info-item">-->
    <!--        <view class="info-item-label">视力</view>-->
    <!--        <view class="">-->
    <!--          <view class="btn btn-primary">进入视力</view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <ly-modal ref="modelRef"></ly-modal>
  </view>
</template>

<script setup>
import {inject, onActivated, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {array_column, formatZero, logs, sleep} from "@/utils/util";
import {useConfigStore} from "@/store/useConfigStore";
import {redirectTo} from "@/utils/app";
import debounce from "@/utils/debounce";
import storage from "@/utils/storage";
import {onShow, onHide} from "@dcloudio/uni-app";
import {machineFun} from "@/utils/machine/machineFun"

const configStore = useConfigStore()
const countDown = ref(0)
const debounces = new debounce()
const modelRef = ref()
const $machine = inject('$machine')


const pD = reactive({
  value2: '',
  value3: '',
})
let student = reactive({
  jname: '未识别',
  gender: 1,
})
const queryForm = reactive({
  student_id: 0,
  value1: 0,
  value2: 0,
})
const defaultCard = {
  7: {
    name: 'BMI',
    img: '/card-bg1.png',
    val: [
      {
        id: 1,
        title: '身高',
        value: '',
        unit: 'Cm',
      },
      {
        id: 2,
        title: '体重',
        value: '',
        unit: 'Kg',
      },
    ],
  },
  8: {
    name: '肺活量',
    img: '/card-bg2.png',
    val: [
      {
        id: 1,
        title: '身高',
        value: '',
        unit: 'ml',
      },
    ]
  },
  9: {
    name: '视力',
    img: '/card-bg3.png',
    val: [
      {
        id: 1,
        title: '左眼',
        value: '',
        unit: '',
      },
      {
        id: 2,
        title: '右眼',
        value: '',
        unit: '',
      },
    ]
  },
}
const pageData = reactive({
  status: 0,
  studentInfo: {
    name: '测试',
    gender: '男',
    class: 'xx年级xx班',
    model: '机器录入',
    school: 'xxxx学校',
    mac: '',
  },
  card: []
})

const card = reactive([])

const search = () => {
  queryForm.student_id = 2260
}
const backClick = () => {
  console.log('modelRef', modelRef, modelRef.value.open)
  modelRef.value.open({
    title: '温馨提示',
    content: '确认要退出吗？',
    showCancelButton: true,
    confirm: () => {
      logout()
    }
  })
  // confirmModal('请认要退出吗？').then(() => {
  //   redirectTo('pages/index/index')
  // }, () => {
  // })
}
const logout = () => {
  storage.remove(`student-${student.id}`)
  redirectTo('pages/index/index')
}
const countDownHandle = () => {
  countDown.value = 30
  debounces.countDown('countDown', {
    duration: 30000,
    callback: () => {
      countDown.value--
    },
    endCallback: () => {
      // 清空缓存学生信息
      // logout()
    },
  })
}
const showDetail = (item) => {
  console.log(item)
}
const toTask = () => {
  pageData.status = 1
}


const bmiWatch = ({kg, cm}) => {
  // console.log('bmiWatch123', res)
  countDownHandle()
  pD.value2 = kg
  pD.value3 = cm
}

const setWatch = (open = false) => {
  if (open) {
    $machine.bmi().setWatch(bmiWatch)
  } else {
    $machine.bmi().setWatch(null)
  }
}


onShow(async () => {
  setWatch(true)
})

onHide(async () => {
  setWatch()
})
// 页面卸载前
onBeforeUnmount(() => {
  setWatch()
  machineFun.setUsbNotify(false)
})

// 挂载完成之后
onMounted(async (r) => {
  await sleep(1000)
  // student = storage.getKey(`student-${r.id}`)
  card.push(defaultCard[configStore.mType])
  countDownHandle()
  machineFun.getOnlineUsb($machine, (list = []) => {
    if (list.indexOf('bmi') === -1) pageData.status = -1
  })
  machineFun.setUsbNotify()
})

// 激活页面时
onActivated(() => {
})
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  &-label {
    margin-right: 50rpx;
  }
}

.countDown {
  width: 130rpx;
  height: 130rpx;
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  border: 6rpx solid green;
  color: green;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rpx;
}

.baseMessage {
  background: linear-gradient(180deg, #FFFFFF 0%, #E0EDF8 100%);
  box-shadow: 0px 0px 8px 1px #498CFC;
}

.avatar {
  border: 8rpx solid #498CFC;
  border-radius: 50%;
  top: 0;
  transform: translateY(-50%);
  left: 60rpx;
}

.checkMessage {
  background: linear-gradient(180deg, #498CFC 0%, #E0EDF8 100%);
}

.cardbg {
  width: 500rpx;
  height: 230rpx;
  background-size: 100%;
  border-radius: 15rpx;
  margin-bottom: 20rpx;

  &-0 {
    background: url('static/image/card-bg1.png') no-repeat center center;
  }

  &-1 {
    background: url('static/image/card-bg2.png') no-repeat center center;
  }

  &-2 {
    background: url('static/image/card-bg3.png') no-repeat center center;
  }
}

.checkCard {

  height: 80%;
  background-color: #FFFFFF;
  border-radius: 15rpx 15rpx 25rpx 25rpx;

  .circle {
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;

    &-0 {
      background-color: #027EEC;
    }

    &-1 {
      background-color: #F7B03C;
    }

    &-2 {
      background-color: #17ACC3;
    }
  }
}

.circle1 {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
}

.circleBg {
  &-0 {
    background-color: #027EEC;
  }

  &-1 {
    background-color: #F7B03C;
  }

  &-2 {
    background-color: #17ACC3;
  }
}

.font-color {
  color: #153269;
}
</style>