<template>
|
<div class="dashboard-title">
|
<div class="title-text-box">
|
<div class="title-text">
|
<span> 智能工作台 —</span>
|
<el-popover placement="bottom" :width="180" trigger="click" :content="currentDeviceName">
|
<template #reference>
|
<el-text truncated class="device-name">{{ currentDeviceName }}</el-text>
|
</template>
|
</el-popover>
|
<el-icon class="text-icon" color="#0db7f5" @click="openDevicesModal">
|
<IconSlider></IconSlider>
|
</el-icon>
|
</div>
|
</div>
|
<div class="title-status">
|
<div class="connection-info" @click="openProblemsModal">
|
<el-icon class="size_26" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
|
<AlertLightIcon></AlertLightIcon>
|
</el-icon>
|
</div>
|
<div class="cloud-connection-status">
|
<el-icon v-if="cloudConnectionIconStatus" class="size_36" color="#00ff00">
|
<IconCloudDone></IconCloudDone>
|
</el-icon>
|
|
<el-icon v-else class="size_36" color="#ff0000">
|
<IconCloudOff></IconCloudOff>
|
</el-icon>
|
</div>
|
|
<div class="reporting-record">
|
<el-icon
|
class="size_26"
|
:color="taskStore.activeTask ? '#0db7f5' : '#c0c0c0'"
|
:style="{ 'margin-right': '10px', cursor: taskStore.activeTask ? 'pointer' : 'not-allowed' }"
|
@click="openReportingRecord"
|
>
|
<IconRecords></IconRecords>
|
</el-icon>
|
</div>
|
|
<div class="params-config" @click="openConfigModal">
|
<el-icon class="size_28"><Setting /></el-icon>
|
</div>
|
</div>
|
</div>
|
<DeviceCheckList v-model="showDevicesModal" @should-reload="emits('shouldReload')"></DeviceCheckList>
|
<TroubleTrackerModal v-model="showProblemsModal" :problems="problemList"></TroubleTrackerModal>
|
<DeliverParamsConfigModal v-model="showConfigModal"></DeliverParamsConfigModal>
|
<ReportingRecordModal v-model="showReportingRecordModal"></ReportingRecordModal>
|
</template>
|
<script setup lang="ts">
|
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
|
import IconRecords from '~icons/vaadin/records'
|
import { computed, onUnmounted, ref } from 'vue'
|
import { useDevicesStore } from '@/stores/devices'
|
import TroubleTrackerModal from '@/views/dashboard/components/TroubleTrackerModal.vue'
|
import DeviceCheckList from '@/views/dashboard/components/DeviceCheckList.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'
|
import { Setting } from '@element-plus/icons-vue'
|
import DeliverParamsConfigModal from '@/views/dashboard/components/DeliverParamsConfigModal.vue'
|
import ReportingRecordModal from '@/views/dashboard/components/ReportingRecordModal.vue'
|
import { useTasksStore } from '@/stores/tasks'
|
|
const emits = defineEmits<{
|
shouldReload: []
|
}>()
|
|
// 是否显示问题诊断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 currentDeviceName = computed(() => {
|
return (
|
deviceStore?.deviceInfo?.deviceList?.find((ele) => ele?.deviceID === deviceStore?.deviceInfo?.currentDeviceID)
|
?.deviceName ?? ''
|
)
|
})
|
|
// 问题诊断列表
|
const problemList = computed(() => {
|
// return problemsRes?.value?.data ?? []
|
return []
|
})
|
// 问题诊断icon状态, 问题列表中有一条异常即为红灯 否则是绿灯 true绿灯
|
const problemsIconStatus = computed(() => {
|
if (!problemList.value || !problemList.value?.length) {
|
// 默认绿灯, 拿到一次数据后才以接口为准
|
return true
|
}
|
// return !problemList.value.some((ele) => !ele.CheckResult)
|
return false
|
})
|
// 云端连接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
|
return false
|
})
|
|
// 配置下发参数弹窗
|
const showConfigModal = ref(false)
|
function openConfigModal() {
|
showConfigModal.value = true
|
}
|
function closeConfigModal() {
|
showConfigModal.value = false
|
}
|
/**
|
* 轮询问题诊断
|
*/
|
// const {
|
// data: problemsRes,
|
// run: startProblemsPolling,
|
// cancel: cancelProblemsPolling
|
// } = useRequest(apiGetProblemList, {
|
// manual: true,
|
// pollingInterval: PROBLEMS_POLLING_DURATION,
|
// pollingWhenHidden: false
|
// })
|
// startProblemsPolling()
|
// onUnmounted(() => {
|
// cancelProblemsPolling()
|
// })
|
|
const taskStore = useTasksStore()
|
|
// 是否显示报工记录
|
const showReportingRecordModal = ref(false)
|
function openReportingRecord() {
|
if (!taskStore.activeTask) {
|
ElMessage.error('请先选择任务')
|
return
|
}
|
showReportingRecordModal.value = true
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.dashboard-title {
|
position: relative;
|
height: 100%;
|
}
|
.el-icon.size_28 {
|
font-size: 28px;
|
}
|
.size_26 {
|
font-size: 26px;
|
}
|
.size_36 {
|
font-size: 36px;
|
}
|
.title-text-box {
|
width: calc(100% - 150px);
|
height: 100%;
|
|
.title-text {
|
// display: flex;
|
width: 450px;
|
height: 100%;
|
margin: 0 auto;
|
margin-left: 24%;
|
align-items: center;
|
line-height: 68px;
|
// justify-content: center;
|
font-size: 34px;
|
font-weight: 700;
|
span {
|
float: left;
|
}
|
.text-icon {
|
font-size: 40px;
|
margin-left: 4px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.title-status {
|
height: 100%;
|
display: flex;
|
vertical-align: middle;
|
align-items: center;
|
position: absolute;
|
top: 0px;
|
right: 6px;
|
div {
|
vertical-align: middle;
|
display: inline-block;
|
margin-top: 7px;
|
}
|
.cloud-connection-status {
|
// margin-top: 5px;
|
}
|
}
|
.connection-info {
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
.device-name {
|
max-width: 180px;
|
font-size: 40px;
|
color: #fff;
|
}
|
.cloud-connection-status {
|
margin-right: 10px;
|
}
|
.params-config {
|
cursor: pointer;
|
}
|
</style>
|
