Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 ...

haoxuan

2023-11-03 6b027c18660b828ec7b57ad0e3f4ffca9f4d14d1

 src/views/dashboard/components/DashboardTitle.vue

@@ -1,41 +1,103 @@
<template>
  <div class="dashboard-title">
    <div class="title-text">智能工作台 — {{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}</div>
    <div class="title-text">
      智能工作台 — {{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}
      <el-icon size="32" color="#0db7f5" style="margin-left: 20px; cursor: pointer" @click="openDevicesModal">
        <IconSlider></IconSlider>
      </el-icon>
    </div>
    <div class="title-status">
      <div class="connection-info" @click="openSelectDeviceModal">
        <el-icon size="30" color="red">
      <div class="connection-info" @click="openProblemsModal">
        <el-icon size="30" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
          <AlertLightIcon></AlertLightIcon>
        </el-icon>
      </div>
      <div class="cloud-connection-status">
        <el-icon size="45" color="#ff0000">
          <IconCloudOff></IconCloudOff>
        </el-icon>

        <el-icon size="45" color="#00ff00">
        <el-icon v-if="cloudConnectionIconStatus" size="45" color="#00ff00">
          <IconCloudDone></IconCloudDone>
        </el-icon>

        <el-icon v-else size="45" color="#ff0000">
          <IconCloudOff></IconCloudOff>
        </el-icon>
      </div>
    </div>
  </div>

  <TroubleTrackerModal v-model="showModal"></TroubleTrackerModal>
  <TroubleTrackerModal v-model="showProblemsModal" :problems="problemList"></TroubleTrackerModal>
</template>
<script setup lang="ts">
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
import { ref } from 'vue'
import { computed, onUnmounted, ref } from 'vue'
import { useDevicesStore } from '@/stores/devices'
import TroubleTrackerModal from '@/views/dashboard/components/TroubleTrackerModal.vue'
import IconCloudDone from '~icons/material-symbols-light/cloud-done-outline'
import IconCloudOff from '~icons/material-symbols-light/cloud-off-outline'
import IconSlider from '~icons/bx/slider'
import { useRequest } from 'vue-hooks-plus'
import { apiGetProblemList } from '@/api'
import { PROBLEMS_POLLING_DURATION } from '@/common/constants'

const showModal = ref(false)

function openSelectDeviceModal() {
  showModal.value = true
// 是否显示问题诊断modal
const showProblemsModal = ref(false)
/**
 * 打开问题诊断modal
 */
function openProblemsModal() {
  showProblemsModal.value = true
}

// 是否显示设备切换modal
const showDevicesModal = ref(false)
/**
 * 打开设备切换modal
 */
function openDevicesModal() {
  showDevicesModal.value = true
}

// 获取当前设备名
const deviceStore = useDevicesStore()

// 问题诊断列表
const problemList = computed(() => {
  return problemsRes?.value?.data ?? []
})
// 问题诊断icon状态, 问题列表中有一条异常即为红灯 否则是绿灯  true绿灯
const problemsIconStatus = computed(() => {
  if (!problemList.value || !problemList.value?.length) {
    // 默认绿灯, 拿到一次数据后才以接口为准
    return true
  }
  return !problemList.value.some((ele) => !ele.CheckResult)
})
// 云端连接icon状态, 问题列表中有一条代表云端链接的, 异常即为红色云icon 否则是绿色  true绿云
const cloudConnectionIconStatus = computed(() => {
  if (!problemList.value || !problemList.value?.length) {
    // 默认绿灯, 拿到一次数据后才以接口为准
    return true
  }
  // 没数据就当是链接正常
  const cloudConnection = problemList.value.find((ele) => ele.ItemCode === 'cloud')
  return cloudConnection ? cloudConnection?.CheckResult : true
})

/**
 * 轮询问题诊断
 */
const {
  data: problemsRes,
  run: startProblemsPolling,
  cancel: cancelProblemsPolling
} = useRequest(apiGetProblemList, {
  manual: true,
  pollingInterval: PROBLEMS_POLLING_DURATION,
  pollingWhenHidden: false
})
startProblemsPolling()
onUnmounted(() => {
  cancelProblemsPolling()
})
</script>

<style scoped lang="scss">