72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="device-detail-page">
|
||
|
|
<div class="detail-header">
|
||
|
|
<el-button icon="ArrowLeft" circle @click="handleBack" />
|
||
|
|
<span class="detail-title">设备信息</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-menu :default-active="activeMenu" mode="horizontal" class="detail-menu" @select="handleMenuSelect">
|
||
|
|
<el-menu-item index="info">设备详情</el-menu-item>
|
||
|
|
<el-menu-item index="alarm">报警记录</el-menu-item>
|
||
|
|
<el-menu-item index="trend">历史曲线</el-menu-item>
|
||
|
|
</el-menu>
|
||
|
|
|
||
|
|
<DeviceInfo v-show="activeMenu === 'info'" :device="device" />
|
||
|
|
<DeviceTrend v-show="activeMenu === 'trend'" :device="device" />
|
||
|
|
<DeviceAlarm v-show="activeMenu === 'alarm'" :device="device" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import DeviceInfo from './components/info/index.vue'
|
||
|
|
import DeviceTrend from './components/trend/index.vue'
|
||
|
|
import DeviceAlarm from './components/alarm/index.vue'
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
device: {
|
||
|
|
type: Object,
|
||
|
|
default: () => null
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['back'])
|
||
|
|
|
||
|
|
const activeMenu = ref('info')
|
||
|
|
|
||
|
|
const handleMenuSelect = (index) => {
|
||
|
|
activeMenu.value = index
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBack = () => {
|
||
|
|
activeMenu.value = 'info'
|
||
|
|
emit('back')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.device-detail-page {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--el-text-color-primary, #303133);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-menu {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
// border-radius: 8px;
|
||
|
|
// background-color: var(--el-bg-color-overlay, #ffffff);
|
||
|
|
// border: 1px solid var(--el-border-color, #e4e7ed);
|
||
|
|
}
|
||
|
|
</style>
|