feat: 轮询plc/设备/调整集群状态组件/title组件加图标

songshankun

2023-11-02 7e7424b2662e5b27dcc1c0d37f43e909e0b15ee1

 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);