From 7e7424b2662e5b27dcc1c0d37f43e909e0b15ee1 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期四, 02 十一月 2023 16:47:38 +0800
Subject: [PATCH] feat: 轮询plc/设备/调整集群状态组件/title组件加图标
---
src/views/dashboard/components/DeviceStatusInfo.vue | 154 ++++++++++++++++++++++++++++++++++++---------------
1 files changed, 109 insertions(+), 45 deletions(-)
diff --git a/src/views/dashboard/components/DeviceStatusInfo.vue b/src/views/dashboard/components/DeviceStatusInfo.vue
index 146ff75..0730135 100644
--- a/src/views/dashboard/components/DeviceStatusInfo.vue
+++ b/src/views/dashboard/components/DeviceStatusInfo.vue
@@ -1,11 +1,11 @@
<template>
<div class="device-status-info">
- <div v-if="type == 1" class="color-one">
+ <div v-if="type === 1" class="color-one">
璁惧鐘舵��
<!-- 1鏂紑2鐢熶骇3寰呮満 -->
- <span v-if="device.plcStatus" class="device-m">
+ <span v-if="plc?.plcStatus" class="device-m">
<el-popover
- v-if="device.plcStatus == 1 && device.plcNotConnected"
+ v-if="plc?.plcStatus === 1 && plc?.plcNotConnected"
:width="180"
placement="top-end"
trigger="click"
@@ -16,10 +16,10 @@
</el-icon>
鏂紑
</template>
- {{ device.plcNotConnected }}
+ {{ plc?.plcNotConnected }}
</el-popover>
<span v-else>
- <el-icon v-if="device.plcStatus == 1 && !device.plcNotConnected" class="duan">
+ <el-icon v-if="plc?.plcStatus == 1 && !plc?.plcNotConnected" class="duan">
<Link />
</el-icon>
<el-icon v-else class="lian">
@@ -30,66 +30,125 @@
'status-off': device.plcStatus != 2,
}" -->
<span class="status-running">
- {{ device.plcStatus == 1 ? '鏂紑' : device.plcStatus == 2 ? '鐢熶骇涓�' : '寰呮満' }}
+ {{ plc?.plcStatus === 1 ? '鏂紑' : plc?.plcStatus === 2 ? '鐢熶骇涓�' : '寰呮満' }}
</span>
</span>
</span>
- <div class="device-b">杩愯鏃堕棿锛�1澶�1灏忔椂23鍒�12绉�</div>
+ <!-- TODO: 搴旇鏀规垚 plc閲屽彇,缂烘帴鍙� -->
+ <div class="device-b">宸ュ簭杩愯鏃堕棿锛歿{ runningTime }}</div>
</div>
<div v-if="type == 2" class="color-two">
闆嗙兢鐘舵��
- <!-- 1鏂紑2鐢熶骇3寰呮満 -->
- <span v-if="device.plcStatus" class="device-m">
- <el-popover
- v-if="device.plcStatus == 1 && device.plcNotConnected"
- :width="180"
- placement="top-end"
- trigger="click"
- >
- <template #reference>
- <el-icon class="duan">
- <CircleCloseFilled />
+ <span class="device-m">
+ <span>
+ <template v-if="device?.clusterStatus">
+ <el-icon class="lian">
+ <SuccessFilled />
</el-icon>
- 鏂紑
+ <span class="status-running"> 鍦ㄧ嚎 </span>
</template>
- {{ device.plcNotConnected }}
- </el-popover>
- <span v-else>
- <el-icon v-if="device.plcStatus == 1 && !device.plcNotConnected" class="duan">
- <CircleCloseFilled />
- </el-icon>
- <el-icon v-else class="lian">
- <SuccessFilled />
- </el-icon>
- <!-- :class="{
- 'status-running': device.plcStatus == 2,
- 'status-off': device.plcStatus != 2,
- }" -->
- <span class="status-running">
- {{ device.plcStatus == 1 ? '鏂紑' : device.plcStatus == 2 ? '鍦ㄧ嚎' : '寰呮満' }}
- </span>
+
+ <template v-else>
+ <span>涓嶅湪闆嗙兢涓�</span>
+ </template>
</span>
</span>
- <div class="device-info">涓昏妭鐐�</div>
+ <div
+ class="device-info"
+ :class="{ master: device?.clusterStatus === 'master', slave: device?.clusterStatus === 'slave' }"
+ >
+ {{ nodeTypeText }}
+ </div>
<div class="device-b title-bng">
- <img src="~@/assets/images/leaf.png" />
- <span>鑺傜偣鏁�</span> <i>120</i>
+ <img src="~@/assets/images/leaf.png" alt="" />
+ <span>鑺傜偣鏁�</span> <i>{{ device?.clusterNodeQuantity ?? 0 }}</i>
</div>
</div>
</div>
</template>
<script setup lang="ts">
-import { toRefs } from 'vue'
-import { Link, CircleCloseFilled, SuccessFilled } from '@element-plus/icons-vue'
+import { computed, toRefs } from 'vue'
+import { Link, SuccessFilled } from '@element-plus/icons-vue'
+import type { Devices } from '@/api/device'
import type { PLCResponse } from '@/api/plc'
+import { useTasksStore } from '@/stores/tasks'
+import { storeToRefs } from 'pinia'
export interface DeviceStatusInfoProps {
- device: PLCResponse
- type?: Number
+ plc?: PLCResponse
+ device?: Devices
+ /** 1: 璁惧鐘舵�� 2:闆嗙兢鐘舵��*/
+ type?: 1 | 2
}
-const props = defineProps<DeviceStatusInfoProps>()
-const { device, type } = toRefs(props)
+const props = withDefaults(defineProps<DeviceStatusInfoProps>(), {
+ type: 1,
+ device: undefined,
+ plc: undefined
+})
+const { type, plc, device } = toRefs(props)
+
+// 闆嗙兢鑺傜偣鏂囨湰
+const nodeTypeText = computed(() => {
+ switch (device?.value?.clusterStatus) {
+ case 'master':
+ return '涓昏妭鐐�'
+ case 'slave':
+ return '浠庤妭鐐�'
+ case '':
+ default:
+ return ''
+ }
+})
+
+/**
+ * 宸ュ簭杩愯鏃堕棿
+ * 鏍规嵁鎺ュ彛杩斿洖 realStartTime realEndTime 鍒ゆ柇濡備綍灞曠ず
+ * 濡傛灉 realEndTime 涓� 0 鍒� 鐢ㄥ綋鍓嶆椂闂� - realStartTime
+ * 濡傛灉 瀛樺湪 realEndTime, 鍒� realEndTime - realStartTime
+ * 娉ㄦ剰 realStartTime realEndTime 鏄帴鍙ｈ繑鍥炵殑10浣嶆椂闂存埑
+ * @param realStartTime
+ * @param realEndTime
+ * @return
+ */
+function getTaskRunningTime(realStartTime?: number, realEndTime?: number) {
+ if (realStartTime && realEndTime) {
+ return calcRunningDuration(realStartTime * 1000, realEndTime * 1000)
+ } else if (!realEndTime && realStartTime) {
+ const now = Math.floor(new Date().getTime() / 1000) * 1000
+ return calcRunningDuration(realStartTime * 1000, now)
+ } else {
+ return '--'
+ }
+}
+
+/**
+ * 璁＄畻鏃堕棿娈�, 娉ㄦ剰鍙傛暟瑕佹眰鏃堕棿鎴充负 JS Date 鐨�13浣嶆椂闂存埑
+ * @param startTime
+ * @param endTime
+ * @return
+ */
+function calcRunningDuration(startTime: number, endTime: number) {
+ let timeDuration = endTime - startTime
+ if (timeDuration < 0) {
+ return '0澶�0鏃�0鍒�'
+ }
+
+ let seconds = Math.floor(timeDuration / 1000)
+ let minutes = Math.floor(seconds / 60)
+
+ let days = Math.floor(timeDuration / 1000 / 60 / 60 / 24)
+ let hours = Math.floor(minutes / 60) - days * 24
+ let m = minutes - days * 24 * 60 - hours * 60
+ return `${days}澶�${hours}鏃�${m}鍒哷
+}
+
+// 宸ュ簭杩愯鏃堕棿
+const taskStore = useTasksStore()
+const { activeTask } = storeToRefs(taskStore)
+const runningTime = computed(() => {
+ return getTaskRunningTime(activeTask?.value?.Procedure?.realStartTime, activeTask?.value?.Procedure?.realEndTime)
+})
</script>
<style scoped lang="scss">
@@ -162,9 +221,14 @@
padding: 0px 6px;
font-size: 12px;
line-height: 20px;
- background: $status-running;
color: #fff;
border-radius: 8px;
+ &.master {
+ background: $status-running;
+ }
+ &.slave {
+ background-color: #3399ff;
+ }
}
.title-bng {
width: calc(90% - 1px);
--
Gitblit v1.8.0