From 39864dcc835f1e75efd3f20a99d50a7edae4a94f Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期一, 06 十一月 2023 17:59:51 +0800
Subject: [PATCH] Merge branch 'wn' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into dev

---
 src/views/dashboard/components/DashboardTitle.vue |  124 ++++++++++++++++++++++++++++++++++++-----
 1 files changed, 109 insertions(+), 15 deletions(-)

diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue
index ed14226..015694a 100644
--- a/src/views/dashboard/components/DashboardTitle.vue
+++ b/src/views/dashboard/components/DashboardTitle.vue
@@ -1,32 +1,118 @@
 <template>
   <div class="dashboard-title">
-    <div class="title-text">鏅鸿兘宸ヤ綔鍙� 鈥� {{ props?.deviceInfo?.currentDeviceID ?? '' }}</div>
+    <div class="title-text">
+      鏅鸿兘宸ヤ綔鍙� 鈥�
+      <el-popover
+        placement="bottom"
+        :width="200"
+        trigger="click"
+        :content="deviceStore?.deviceInfo?.currentDeviceID ?? ''"
+      >
+        <template #reference>
+          <el-text truncated class="device-name">{{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}</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="connection-status"></div>
+      <div class="cloud-connection-status">
+        <el-icon v-if="cloudConnectionIconStatus" size="38" color="#00ff00">
+          <IconCloudDone></IconCloudDone>
+        </el-icon>
+
+        <el-icon v-else size="38" color="#ff0000">
+          <IconCloudOff></IconCloudOff>
+        </el-icon>
+      </div>
     </div>
   </div>
+  <DeviceCheckList v-model="showDevicesModal" @should-reload="emits('shouldReload')"></DeviceCheckList>
+  <TroubleTrackerModal v-model="showProblemsModal" :problems="problemList"></TroubleTrackerModal>
 </template>
 <script setup lang="ts">
-import type { Devices } from '@/api/device'
 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'
 
-export interface DashBoardTitleProps {
-  deviceInfo: Devices
+const emits = defineEmits<{
+  shouldReload: []
+}>()
+
+// 鏄惁鏄剧ず闂璇婃柇modal
+const showProblemsModal = ref(false)
+/**
+ * 鎵撳紑闂璇婃柇modal
+ */
+function openProblemsModal() {
+  showProblemsModal.value = true
 }
 
-const props = defineProps<DashBoardTitleProps>()
-
-const showModal = ref(false)
-
-function openSelectDeviceModal() {
-  showModal.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鐘舵��, 闂鍒楄〃涓湁涓�鏉′唬琛ㄤ簯绔摼鎺ョ殑, 寮傚父鍗充负绾㈣壊浜慽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">
@@ -41,11 +127,19 @@
   font-weight: 700;
 }
 .title-status {
+  display: flex;
+  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