<template>
|
<div class="dashboard-title">
|
<div class="title-text">智能工作台 — {{ props?.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="connection-status"></div>
|
</div>
|
</div>
|
</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>()
|
|
const showModal = ref(false)
|
|
function openSelectDeviceModal() {
|
showModal.value = true
|
}
|
</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 {
|
position: absolute;
|
top: 16px;
|
right: 40px;
|
}
|
.connection-info {
|
cursor: pointer;
|
}
|
</style>
|
