<template>
|
<div class="dashboard-title">
|
<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="openProblemsModal">
|
<el-icon size="30" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
|
<AlertLightIcon></AlertLightIcon>
|
</el-icon>
|
</div>
|
<div class="cloud-connection-status">
|
<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="showProblemsModal" :problems="problemList"></TroubleTrackerModal>
|
</template>
|
<script setup lang="ts">
|
import AlertLightIcon from '@/components/icons/AlertLightIcon.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'
|
|
// 是否显示问题诊断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">
|
.dashboard-title {
|
position: relative;
|
}
|
.title-text {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 40px;
|
font-weight: 700;
|
}
|
.title-status {
|
display: flex;
|
align-items: center;
|
position: absolute;
|
top: 16px;
|
right: 40px;
|
}
|
.connection-info {
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
</style>
|
