feat:创建新分支

charles

2024-04-29 b95cf940af8e01e4eca30b2599b029c2f645bd1e

 src/views/dashboard/components/DashboardTitle.vue

@@ -1,51 +1,238 @@
<template>
  <div class="dashboard-title">
    <div class="title-text">智能工作台 — {{ props?.deviceInfo?.currentDeviceID ?? '' }}</div>
    <div class="title-text-box">
      <div class="title-text">
        <span> 智能工作台 —</span>
        <el-popover placement="bottom" :width="180" trigger="click" :content="currentDeviceName">
          <template #reference>
            <el-text truncated class="device-name">{{ currentDeviceName }}</el-text>
          </template>
        </el-popover>
        <el-icon class="text-icon" color="#0db7f5" @click="openDevicesModal">
          <IconSlider></IconSlider>
        </el-icon>
      </div>
    </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 class="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" class="size_36" color="#00ff00">
          <IconCloudDone></IconCloudDone>
        </el-icon>

        <el-icon v-else class="size_36" color="#ff0000">
          <IconCloudOff></IconCloudOff>
        </el-icon>
      </div>

      <div class="reporting-record">
        <el-icon
          class="size_26"
          :color="taskStore.activeTask ? '#0db7f5' : '#c0c0c0'"
          :style="{ 'margin-right': '10px', cursor: taskStore.activeTask ? 'pointer' : 'not-allowed' }"
          @click="openReportingRecord"
        >
          <IconRecords></IconRecords>
        </el-icon>
      </div>

      <div class="params-config" @click="openConfigModal">
        <el-icon class="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>
  <ReportingRecordModal v-model="showReportingRecordModal"></ReportingRecordModal>
</template>
<script setup lang="ts">
import type { Devices } from '@/api/device'
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
import { ref } from 'vue'
import IconRecords from '~icons/vaadin/records'
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'
import ReportingRecordModal from '@/views/dashboard/components/ReportingRecordModal.vue'
import { useTasksStore } from '@/stores/tasks'

export interface DashBoardTitleProps {
  deviceInfo: Devices
const emits = defineEmits<{
  shouldReload: []
}>()

// 是否显示问题诊断modal
const showProblemsModal = ref(false)
/**
 * 打开问题诊断modal
 */
function openProblemsModal() {
  showProblemsModal.value = true
}

const props = defineProps<DashBoardTitleProps>()
// 是否显示设备切换modal
const showDevicesModal = ref(false)
/**
 * 打开设备切换modal
 */
function openDevicesModal() {
  showDevicesModal.value = true
}

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

function openSelectDeviceModal() {
  showModal.value = true
// 问题诊断列表
const problemList = computed(() => {
  // return problemsRes?.value?.data ?? []
  return []
})
// 问题诊断icon状态, 问题列表中有一条异常即为红灯 否则是绿灯  true绿灯
const problemsIconStatus = computed(() => {
  if (!problemList.value || !problemList.value?.length) {
    // 默认绿灯, 拿到一次数据后才以接口为准
    return true
  }
  // return !problemList.value.some((ele) => !ele.CheckResult)
  return false
})
// 云端连接icon状态, 问题列表中有一条代表云端链接的, 异常即为红色云icon 否则是绿色  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
  return false
})

// 配置下发参数弹窗
const showConfigModal = ref(false)
function openConfigModal() {
  showConfigModal.value = true
}
function closeConfigModal() {
  showConfigModal.value = false
}
/**
 * 轮询问题诊断
 */
// const {
//   data: problemsRes,
//   run: startProblemsPolling,
//   cancel: cancelProblemsPolling
// } = useRequest(apiGetProblemList, {
//   manual: true,
//   pollingInterval: PROBLEMS_POLLING_DURATION,
//   pollingWhenHidden: false
// })
// startProblemsPolling()
// onUnmounted(() => {
//   cancelProblemsPolling()
// })

const taskStore = useTasksStore()

// 是否显示报工记录
const showReportingRecordModal = ref(false)
function openReportingRecord() {
  if (!taskStore.activeTask) {
    ElMessage.error('请先选择任务')
    return
  }
  showReportingRecordModal.value = true
}
</script>

<style scoped lang="scss">
.dashboard-title {
  position: relative;
  height: 100%;
}
.title-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
.el-icon.size_28 {
  font-size: 28px;
}
.size_26 {
  font-size: 26px;
}
.size_36 {
  font-size: 36px;
}
.title-text-box {
  width: calc(100% - 150px);
  height: 100%;

  .title-text {
    // display: flex;
    width: 450px;
    height: 100%;
    margin: 0 auto;
    margin-left: 24%;
    align-items: center;
    line-height: 68px;
    // justify-content: center;
    font-size: 34px;
    font-weight: 700;
    span {
      float: left;
    }
    .text-icon {
      font-size: 40px;
      margin-left: 4px;
      cursor: pointer;
    }
  }
}

.title-status {
  height: 100%;
  display: flex;
  vertical-align: middle;
  align-items: center;
  position: absolute;
  top: 16px;
  right: 40px;
  top: 0px;
  right: 6px;
  div {
    vertical-align: middle;
    display: inline-block;
    margin-top: 7px;
  }
  .cloud-connection-status {
    // margin-top: 5px;
  }
}
.connection-info {
  margin-right: 10px;
  cursor: pointer;
}
.device-name {
  max-width: 180px;
  font-size: 40px;
  color: #fff;
}
.cloud-connection-status {
  margin-right: 10px;
}
.params-config {
  cursor: pointer;
}
</style>