matrix-spray-web/src/views/main/index.vue

<script setup lang="ts">
import { getDeviceStatus } from 'apis/system'
import FtStream from 'components/common/FTStream/index.vue'
import Check from 'components/home/Check/index.vue'
import Stop from 'components/home/stop/index.vue'
import { ElMessageBox } from 'element-plus'
import { isClose, socket } from 'libs/socket'
import { sendControl } from 'libs/utils'
import { useSystemStore } from 'stores/useSystemStore' // 引入 systemStore
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const systemStore = useSystemStore() // 使用 systemStore

const checkVisible = ref(false)

getDeviceStatus().then((res: any) => {
  systemStore.updateSystemStatus(res)
  if (!systemStore.systemStatus.selfTestCompleted) {
    ElMessageBox.confirm('检测到您还未完成自检,是否开始自检？', '提示', {
      type: 'warning',
      confirmButtonText: '确定',
      showCancelButton: false,
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      closeOnHashChange: false,
    }).then(() => {
      checkVisible.value = true
    })
  }
})

const ok = () => {
  checkVisible.value = false
}
const statusMessage = (data: any) => {
  // 更新 systemStore 的 systemStatus
  console.log(data)
  systemStore.updateSystemStatus(data)
}

const sensorMessage = (data: any) => {
  // 更新 systemStore 的 systemInfo
  systemStore.updateSystemSensor(data)
}

socket.init(statusMessage, 'device_status_change')
socket.init(sensorMessage, 'sensor')
socket.init(() => {}, 'pong')

const ingObj = {
  idle: '空闲',
  spraying: '正在喷涂中',
  paused: '喷涂暂停中',
  cleaningSyringePipeline: '正在清洗注射器管路',
  cleaningNozzlePipeline: '正在清洗喷嘴管路',
  prefilling: '正在预充中',
  dehumidifierRunning: '正在除湿中',
  stopPressed: '急停中',
}

const status = computed(() => {
  const keys = Object.keys(systemStore.systemStatus).filter((key) => {
    return !['paused', 'suspendable', 'selfTestCompleted'].includes(key)
  })
  let str = ''
  keys.forEach((key) => {
    if (systemStore.systemStatus[key as keyof typeof systemStore.systemStatus]) {
      str += `${ingObj[key as keyof typeof ingObj]} | `
    }
  })
  if (str === '') {
    return '空闲'
  }
  else {
    return str.slice(0, -2)
  }
})

const logoClickCount = ref(0)
let clickTimeout: NodeJS.Timeout | null = null

const handleLogoClick = () => {
  if (clickTimeout) {
    clearTimeout(clickTimeout)
  }
  logoClickCount.value++
  if (logoClickCount.value === 10) {
    systemStore.updateDebug()
    logoClickCount.value = 0 // 重置计数器
  }
  clickTimeout = setTimeout(() => {
    logoClickCount.value = 0 // 重置计数器
  }, 1000)
}

const slideTrayIn = async () => {
  const params = {
    cmdCode: 'slide_tray_in',
    cmdId: '',
  }
  await sendControl(params)
}

const slideTrayOut = async () => {
  const params = {
    cmdCode: 'slide_tray_out',
    cmdId: '',
  }
  await sendControl(params)
}
</script>

<template>
  <el-container>
    <el-header>
      <div class="logo" @click="handleLogoClick">
        <div style="display: flex;align-items: center">
          <img src="@/assets/images/logo.svg" alt="">
        </div>

        <div v-if="route.path !== '/'">
          <el-divider direction="vertical" />
          <span class="router-name">{{ route.meta.tagName }}</span>
        </div>
      </div>
      <div style="display: flex">
        <img v-show="!isClose" class="wifi-icon" src="../../assets/images/icon_wifi.svg" alt="">
        <img v-show="isClose" class="wifi-icon" src="../../assets/images/icon_wifi_red.svg" alt="">
        <ft-button v-if="systemStore.isDebug" @click="router.push('/debug')">
          调试
        </ft-button>
        <ft-button v-if="route.path !== '/'" @click="router.push('/')">
          返回
        </ft-button>
      </div>
    </el-header>
    <el-main>
      <router-view v-slot="{ Component }" class="main-container">
        <Transition mode="out-in">
          <component :is="Component" :key="route.fullPath" />
        </Transition>
      </router-view>
    </el-main>
    <el-footer>
      <div>
        <ft-button type="info">
          当前湿度: {{ systemStore.systemSensor.humidity }}%RH
        </ft-button>
        <ft-button type="info">
          设备状态: {{ status }}
        </ft-button>
      </div>
      <div>
        <ft-button :click-handle="slideTrayIn">
          推入托盘
        </ft-button>
        <ft-button :click-handle="slideTrayOut">
          推出托盘
        </ft-button>
      </div>
    </el-footer>
    <FtStream :visible="systemStore.streamVisible" />
    <Stop v-if="systemStore.systemStatus.stopPressed" />
    <Check v-if="checkVisible" @ok="ok" @cancel="checkVisible = false" />
  </el-container>
</template>

<style scoped lang="scss">
.el-container {
  background: #26509C;
  overflow: hidden;
  .el-header {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 65px;
    .logo {
      margin-left: 35px;
      display: flex;
      img {
        width: 250px;
      }
    }
    .el-divider {
      margin: 0 60px;
      height: 62px;
    }
  }
  .el-main {
    padding:0 65px;
    .main-container {
      width: 100%;
      height: 100%;
      background: #EEF3FB;
      border-radius: 60px;
      padding: 60px;
      overflow: auto;
    }
  }
  .el-footer {
    padding:0 65px;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.router-name {
  font-size: 50px;
  color: #fff;
}
.wifi-icon {
  width: 50px;
  margin: 0 30px;
}
</style>