disinfector_vue/src/views/home/chart.vue

<script lang="ts" setup>
import { syncSendCmd } from 'apis/system'
import homeFinish from 'assets/images/home/home-finish.svg'
import homeSettingSvg from 'assets/images/home/home-setting.svg'
import Config from 'components/home/config.vue'
import HomeFormula from 'components/home/HomeFormula.vue'
import LineChart from 'components/home/LineChart.vue'
import { stopTimer } from 'libs/countdownTimer'
import { deviceStateMap } from 'libs/utils'
import { cloneDeep } from 'lodash'
import { provide, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'

import { useFormulaStore } from '@/stores/formulaStore'
import { useHomeStore } from '@/stores/homeStore'

const configRef = ref()
provide<(methods: Home.GrandsonMethods) => void>('registerGrandsonMethods', (methods) => {
  configRef.value = methods
})
const router = useRouter()
const formulaStore = useFormulaStore()
const homeStore = useHomeStore()
const formulaInfo = ref()
const disinfectionState = ref(homeStore.disinfectionState)
const curStateRemainTime = ref(homeStore.curStateRemainTime)
const disinfectFormulaVisible = ref(false)
const isDeviceIdle = ref(homeStore.isDeviceIdle)
const loading = ref(false)
const h2O2SensorData = ref(homeStore.h2O2SensorData)

watchEffect(() => {
  formulaInfo.value = formulaStore.currentSelectedFormulaInfo
  disinfectionState.value = homeStore.disinfectionState
  curStateRemainTime.value = homeStore.curStateRemainTime
  isDeviceIdle.value = homeStore.isDeviceIdle
  h2O2SensorData.value = homeStore.h2O2SensorData.map((item, index) => {
    return {
      ...item,
      title: index === 0 ? '仓内' : `探头${index}`,
      chartId: index === 0 ? 'inside' : `env${index}`,
    }
  })
})

const onDisinfectConfig = () => {
  disinfectFormulaVisible.value = true
}

// 结束消毒
const onFinishDisinfect = async () => {
  stopTimer()
  const stopParams = {
    className: 'DisinfectionCtrlServiceExt',
    fnName: 'stop',
    params: {
      loglevel: formulaStore.loglevel,
    },
  }
  loading.value = true
  syncSendCmd(stopParams).then((res) => {
    if (res.ackcode === 0) {
      loading.value = false
    }
  })
}

const onSave = () => {
  const formData = configRef.value?.getFormData()
  formulaStore.updateSelectedFormulaDataByList(cloneDeep(formData))
  onClose()
}

const goHome = () => {
  router.back()
}
const onClose = () => {
  disinfectFormulaVisible.value = false
}
</script>

<template>
  <main v-loading="loading" class="main-content">
    <div class="line-chart-title">
      <div v-if="formulaInfo && formulaInfo.name" class="line-chart-formula">
        <HomeFormula style="background: #e0f0ff" />
      </div>
      <div class="line-chart-set">
        <bt-button
          v-if="!isDeviceIdle"
          button-text="运行参数"
          text-size="14px"
          border-radius="5px"
          height="3.5rem"
          text-color="#1989fa"
          padding="0.8vw"
          @click="onDisinfectConfig"
        >
          <template #icon>
            <img :src="homeSettingSvg" width="15" alt="">
          </template>
        </bt-button>
      </div>
    </div>
    <div
      class="line-chart-content"
      :style="{ 'grid-template-columns': `repeat(${homeStore.h2O2SensorData.length},1fr)` }"
    >
      <div v-for="(item, index) in homeStore.allData" :key="index">
        <LineChart :env-data="item.data" />
      </div>
    </div>
    <div class="line-chart-bottom">
      <div class="home-chart-time">
        <div v-if="!homeStore.isDeviceIdle" class="home-remain-time">
          <div class="home-chart-label">
            <span v-if="disinfectionState.state === 'disinfection'"> 预计剩余时间: </span>
            <span v-else> 消毒状态： </span>
          </div>
          <div v-if="curStateRemainTime" class="home-chart-value">
            {{ curStateRemainTime }}
          </div>
          <div v-else class="home-chart-value">
            {{ deviceStateMap[disinfectionState.state] }}
          </div>
        </div>
      </div>
      <div class="home-chart-btn">
        <bt-button
          v-if="!isDeviceIdle"
          button-text="结束消毒"
          bg-color="#FF6767"
          text-color="#FFFFFF"
          width="15vw"
          height="7vh"
          text-size="24px"
          border-radius="12px"
          @click="onFinishDisinfect"
        >
          <template #icon>
            <img :src="homeFinish" alt="">
          </template>
        </bt-button>
        <bt-button
          button-text="返回"
          width="10vw"
          height="7vh"
          text-color="#1989fa"
          text-size="24px"
          border-radius="12px"
          @click="goHome"
        />
      </div>
    </div>
    <ft-dialog v-model="disinfectFormulaVisible" title="运行参数" width="80vw" :ok-handle="onSave" @cancel="onClose">
      <div>
        <Config ref="configRef" />
      </div>
    </ft-dialog>
  </main>
</template>

<style lang="scss" scoped>
.main-content {
  overflow: hidden;
  background: $gradient-color;
  height: $main-container-height;
  .line-chart-formula {
    width: 40vw;
    //background: #E0F0FF;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    //border: 1px solid #E0F0FF;
    border-radius: 10px;
    margin-left: 2rem;
  }
  .line-chart-set {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 65vw;
  }
  .line-chart-title {
    height: 15%;
    display: flex;
    align-items: center;
  }
  .line-chart-content {
    display: grid;
    height: 65%;
  }
  .line-chart-bottom {
    height: 15%;
    display: flex;
    padding-right: 20px;
    .home-chart-btn {
      display: flex;
      justify-content: end;
      width: 65%;
    }
    .home-chart-time {
      width: 35%;
      .home-remain-time {
        background: #f6fafe;
        width: 27vw;
        height: 8vh;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        gap: 10px;
        margin-left: 1rem;
        .home-chart-value {
          color: #2892f3;
        }
      }
    }
  }
}
</style>