<template>
|
<div class="dashboard-title">
|
<div class="title-text">智能工作台 — {{ deviceStore?.deviceInfo?.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="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 AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
|
import { ref } from 'vue'
|
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">
|
.dashboard-title {
|
position: relative;
|
}
|
.title-text {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 40px;
|
font-weight: 700;
|
}
|
.title-status {
|
display: flex;
|
align-items: center;
|
position: absolute;
|
top: 16px;
|
right: 40px;
|
}
|
.connection-info {
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
</style>
|
