137 lines
3.9 KiB
Vue
137 lines
3.9 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> -->
|
||
<div class="tabs-box">
|
||
<el-button icon="ArrowLeft" circle @click="handleBack" />
|
||
<span class="title">设备信息（{{ device?.gatewayMac }}）</span>
|
||
<el-radio-group v-model="activeMenu" size="large" fill="var(--tech-primary)">
|
||
<el-radio-button label="设备详情" value="info" />
|
||
<el-radio-button label="线路列表" value="line" />
|
||
<el-radio-button label="运行趋势" value="trend" />
|
||
<el-radio-button label="参数配置" value="config" />
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
<DeviceInfo v-if="activeMenu === 'info'" :device="device" />
|
||
<DeviceLine v-if="activeMenu === 'line'" :device="device" />
|
||
<DeviceTrend v-if="activeMenu === 'trend'" :device="device" />
|
||
<DeviceConfig v-if="activeMenu === 'config'" :device="device" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import DeviceInfo from './components/info/index.vue'
|
||
import DeviceLine from './components/line/index.vue'
|
||
import DeviceTrend from './components/trend/index.vue'
|
||
import DeviceConfig from './components/config/index.vue'
|
||
|
||
defineProps({
|
||
device: {
|
||
type: Object,
|
||
default: () => null
|
||
}
|
||
})
|
||
|
||
const activeMenu = ref('info')
|
||
const emit = defineEmits(['back'])
|
||
|
||
const handleBack = () => {
|
||
activeMenu.value = ''
|
||
emit('back')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.device-detail-page {
|
||
// padding: 20px;
|
||
.tabs-box {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 18px 20px;
|
||
margin: 8px 0 14px;
|
||
overflow: hidden;
|
||
color: var(--tech-text);
|
||
border: 1px solid rgba(0, 212, 255, 0.28);
|
||
border-radius: 18px;
|
||
background:
|
||
linear-gradient(90deg, rgba(8, 27, 54, 0.9), rgba(4, 15, 32, 0.76)),
|
||
radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.16), transparent 36%);
|
||
box-shadow:
|
||
var(--tech-shadow),
|
||
inset 0 0 26px rgba(0, 212, 255, 0.08);
|
||
|
||
&::before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: -36%;
|
||
width: 36%;
|
||
height: 100%;
|
||
content: '';
|
||
pointer-events: none;
|
||
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
|
||
animation: equipmentCardGlint 6s ease-in-out infinite;
|
||
}
|
||
|
||
> * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
> .title {
|
||
flex: 1;
|
||
margin: 0 15px 0 0;
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
color: var(--tech-text-strong);
|
||
letter-spacing: 0.06em;
|
||
text-shadow: 0 0 18px rgba(0, 212, 255, 0.38);
|
||
}
|
||
|
||
:deep(.el-button.is-circle) {
|
||
color: #67e8f9;
|
||
border-color: rgba(0, 212, 255, 0.36);
|
||
background: rgba(15, 23, 42, 0.72);
|
||
box-shadow: 0 0 18px rgba(0, 212, 255, 0.14);
|
||
}
|
||
|
||
:deep(.el-radio-button__inner) {
|
||
color: var(--tech-text-muted);
|
||
border-color: rgba(0, 212, 255, 0.22);
|
||
background: rgba(2, 8, 23, 0.42);
|
||
}
|
||
|
||
:deep(.el-radio-button__inner:hover) {
|
||
color: var(--tech-text-strong);
|
||
background: rgba(0, 212, 255, 0.12);
|
||
}
|
||
|
||
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
||
color: #031424;
|
||
border-color: rgba(103, 232, 249, 0.74);
|
||
background: linear-gradient(135deg, #67e8f9, var(--tech-primary));
|
||
box-shadow: 0 0 18px rgba(0, 212, 255, 0.28);
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.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>
|