fix: 修复工序步骤条当前工序展示错误的问题

songshankun

2023-11-14 c8cf9f8ba577ce75e8723ff2d4218fffae349c47

 src/views/dashboard/components/DashboardTitle.vue

@@ -1,42 +1,59 @@
<template>
  <div class="dashboard-title">
    <div class="title-text">
      智能工作台 — {{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}
      智能工作台 —
      <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="openProblemsModal">
        <el-icon size="30" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
        <el-icon size="26" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
          <AlertLightIcon></AlertLightIcon>
        </el-icon>
      </div>
      <div class="cloud-connection-status">
        <el-icon v-if="cloudConnectionIconStatus" size="45" color="#00ff00">
        <el-icon v-if="cloudConnectionIconStatus" size="38" color="#00ff00">
          <IconCloudDone></IconCloudDone>
        </el-icon>

        <el-icon v-else size="45" color="#ff0000">
        <el-icon v-else size="38" color="#ff0000">
          <IconCloudOff></IconCloudOff>
        </el-icon>
      </div>

      <div class="params-config" @click="openConfigModal">
        <el-icon 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>
</template>
<script setup lang="ts">
import AlertLightIcon from '@/components/icons/AlertLightIcon.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'
import { Setting } from '@element-plus/icons-vue'
import DeliverParamsConfigModal from '@/views/dashboard/components/DeliverParamsConfigModal.vue'

const emits = defineEmits<{
  shouldReload: []
}>()

// 是否显示问题诊断modal
const showProblemsModal = ref(false)
@@ -58,6 +75,12 @@

// 获取当前设备名
const deviceStore = useDevicesStore()
const currentDeviceName = computed(() => {
  return (
    deviceStore?.deviceInfo?.deviceList?.find((ele) => ele?.deviceID === deviceStore?.deviceInfo?.currentDeviceID)
      ?.deviceName ?? ''
  )
})

// 问题诊断列表
const problemList = computed(() => {
@@ -82,6 +105,14 @@
  return cloudConnection ? cloudConnection?.CheckResult : true
})

// 配置下发参数弹窗
const showConfigModal = ref(false)
function openConfigModal() {
  showConfigModal.value = true
}
function closeConfigModal() {
  showConfigModal.value = false
}
/**
 * 轮询问题诊断
 */
@@ -116,10 +147,21 @@
  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;
}
.cloud-connection-status {
  margin-right: 10px;
}
.params-config {
  cursor: pointer;
}
</style>