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

songshankun

2023-11-02 7e7424b2662e5b27dcc1c0d37f43e909e0b15ee1

 src/views/dashboard/components/DashboardTitle.vue

@@ -1,32 +1,41 @@
<template>
  <div class="dashboard-title">
    <div class="title-text">智能工作台 — {{ props?.deviceInfo?.currentDeviceID ?? '' }}</div>
    <div class="title-text">智能工作台 — {{ deviceStore?.devices?.currentDeviceID ?? '' }}</div>
    <div class="title-status">
      <div class="connection-info" @click="openSelectDeviceModal">
        <el-icon size="30" color="red">
          <AlertLightIcon></AlertLightIcon>
        </el-icon>
      </div>
      <div class="connection-status"></div>
      <div class="cloud-connection-status">
        <el-icon size="45" color="#ff0000">
          <IconCloudOff></IconCloudOff>
        </el-icon>

        <el-icon size="45" color="#00ff00">
          <IconCloudDone></IconCloudDone>
        </el-icon>
      </div>
    </div>
  </div>

  <TroubleTrackerModal v-model="showModal"></TroubleTrackerModal>
</template>
<script setup lang="ts">
import type { Devices } from '@/api/device'
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
import { ref } from 'vue'

export interface DashBoardTitleProps {
  deviceInfo: Devices
}

const props = defineProps<DashBoardTitleProps>()
import { useDevicesStore } from '@/stores/devices'
import TroubleTrackerModal from '@/views/dashboard/components/TroubleTrackerModal.vue'
import IconCloudDone from '~icons/material-symbols-light/cloud-done-outline'
import IconCloudOff from '~icons/material-symbols-light/cloud-off-outline'

const showModal = ref(false)

function openSelectDeviceModal() {
  showModal.value = true
}

const deviceStore = useDevicesStore()
</script>

<style scoped lang="scss">
@@ -41,11 +50,14 @@
  font-weight: 700;
}
.title-status {
  display: flex;
  align-items: center;
  position: absolute;
  top: 16px;
  right: 40px;
}
.connection-info {
  margin-right: 10px;
  cursor: pointer;
}
</style>