From d517e5eacb38b075ae7cdffc011fc84401e587a8 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期三, 08 十一月 2023 10:12:50 +0800
Subject: [PATCH] feat: 添加报工输入弹窗
---
src/views/dashboard/components/DashboardTitle.vue | 111 ++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 97 insertions(+), 14 deletions(-)
diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue
index 6d2ba02..49d3323 100644
--- a/src/views/dashboard/components/DashboardTitle.vue
+++ b/src/views/dashboard/components/DashboardTitle.vue
@@ -1,41 +1,119 @@
<template>
<div class="dashboard-title">
- <div class="title-text">鏅鸿兘宸ヤ綔鍙� 鈥� {{ deviceStore?.devices?.currentDeviceID ?? '' }}</div>
+ <div class="title-text">
+ 鏅鸿兘宸ヤ綔鍙� 鈥�
+ <el-popover placement="bottom" :width="200" trigger="click" :content="currentDeviceName">
+ <template #reference>
+ <el-text truncated class="device-name">{{ currentDeviceName }}</el-text>
+ </template>
+ </el-popover>
+ <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="26" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
<AlertLightIcon></AlertLightIcon>
</el-icon>
</div>
<div class="cloud-connection-status">
- <el-icon size="45" color="#ff0000">
- <IconCloudOff></IconCloudOff>
+ <el-icon v-if="cloudConnectionIconStatus" size="38" color="#00ff00">
+ <IconCloudDone></IconCloudDone>
</el-icon>
- <el-icon size="45" color="#00ff00">
- <IconCloudDone></IconCloudDone>
+ <el-icon v-else size="38" color="#ff0000">
+ <IconCloudOff></IconCloudOff>
</el-icon>
</div>
</div>
</div>
-
- <TroubleTrackerModal v-model="showModal"></TroubleTrackerModal>
+ <DeviceCheckList v-model="showDevicesModal" @should-reload="emits('shouldReload')"></DeviceCheckList>
+ <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 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'
-const showModal = ref(false)
+const emits = defineEmits<{
+ shouldReload: []
+}>()
-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 currentDeviceName = computed(() => {
+ return (
+ deviceStore?.deviceInfo?.deviceList?.find((ele) => ele?.deviceID === deviceStore?.deviceInfo?.currentDeviceID)
+ ?.deviceName ?? ''
+ )
+})
+
+// 闂璇婃柇鍒楄〃
+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鐘舵��, 闂鍒楄〃涓湁涓�鏉′唬琛ㄤ簯绔摼鎺ョ殑, 寮傚父鍗充负绾㈣壊浜慽con 鍚﹀垯鏄豢鑹� 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">
@@ -54,10 +132,15 @@
align-items: center;
position: absolute;
top: 16px;
- right: 40px;
+ right: 6px;
}
.connection-info {
margin-right: 10px;
cursor: pointer;
}
+.device-name {
+ max-width: 340px;
+ font-size: 40px;
+ color: #fff;
+}
</style>
--
Gitblit v1.8.0