zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(首页index): 重构首页布局并添加设备树功能

Browse Source 
- 重新设计了首页布局,增加了左侧设备树和右侧内容区
- 实现了设备树数据加载和节点点击事件处理
- 优化了统计卡片和设备监控数据的展示样式
- 新增了根据设备树节点加载对应设备数据的功能
- 调整了响应式布局
boardTest
zch 1 month ago
parent 5e53e0d7ec
commit 5699dd4f73
5 changed files with 414 additions and 258 deletions
Show Stats Download Patch File Download Diff File

8
src/api/ems/record/recordIotenvInstant.js
Unescape Escape View File

@ -59,3 +59,11 @@ export function getLatestRecords() {
method: 'get' method: 'get'
}) })
} }
// 根据父节点ID获取子设备的最新数据
export function getLatestRecordsByParentId(parentId) {
return request({
url: '/ems/record/recordIotenvInstant/getLatestRecordsByParentId/' + parentId,
method: 'get'
})
}

48
src/views/ems/base/baseCollectDeviceInfo/index.vue
Unescape Escape View File

@ -17,16 +17,16 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="能源类型" prop="energyTypeId"> <!-- <el-form-item label="能源类型" prop="energyTypeId">-->
<el-select v-model="queryParams.energyTypeId" placeholder="请选择能源类型"> <!-- <el-select v-model="queryParams.energyTypeId" placeholder="请选择能源类型">-->
<el-option <!-- <el-option-->
v-for="item in energyTypeList" <!-- v-for="item in energyTypeList"-->
:key="item.energyTypeId" <!-- :key="item.energyTypeId"-->
:label="item.energyName" <!-- :label="item.energyName"-->
:value="item.energyTypeId" <!-- :value="item.energyTypeId"-->
></el-option> <!-- ></el-option>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="启用标识" prop="isFlag"> <el-form-item label="启用标识" prop="isFlag">
<el-select v-model="queryParams.isFlag" placeholder="请选择启用标识" clearable> <el-select v-model="queryParams.isFlag" placeholder="请选择启用标识" clearable>
<el-option <el-option
@ -153,16 +153,16 @@
<el-form-item label="采集设备名称" prop="collectDeviceName"> <el-form-item label="采集设备名称" prop="collectDeviceName">
<el-input v-model="form.collectDeviceName" placeholder="请输入采集设备名称"/> <el-input v-model="form.collectDeviceName" placeholder="请输入采集设备名称"/>
</el-form-item> </el-form-item>
<el-form-item label="能源类型" prop="energyTypeId"> <!-- <el-form-item label="能源类型" prop="energyTypeId">-->
<el-select v-model="form.energyTypeId" placeholder="请选择能源类型编号"> <!-- <el-select v-model="form.energyTypeId" placeholder="请选择能源类型编号">-->
<el-option <!-- <el-option-->
v-for="item in energyTypeList" <!-- v-for="item in energyTypeList"-->
:key="item.energyTypeId" <!-- :key="item.energyTypeId"-->
:label="item.energyName" <!-- :label="item.energyName"-->
:value="item.energyTypeId" <!-- :value="item.energyTypeId"-->
></el-option> <!-- ></el-option>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="型号" prop="model"> <el-form-item label="型号" prop="model">
<el-input v-model="form.model" placeholder="请输入型号"/> <el-input v-model="form.model" placeholder="请输入型号"/>
</el-form-item> </el-form-item>
@ -266,15 +266,15 @@ export default {
collectDeviceName: [ collectDeviceName: [
{ required: true, message: '采集设备名称不能为空', trigger: 'blur' } { required: true, message: '采集设备名称不能为空', trigger: 'blur' }
], ],
energyTypeId: [ // energyTypeId: [
{ required: true, message: '能源类型不能为空', trigger: 'blur' } // { required: true, message: '能源类型不能为空', trigger: 'blur' }
] // ]
}, },
columns: [ columns: [
{ key: 0, label: `自增标识`, visible: false }, { key: 0, label: `自增标识`, visible: false },
{ key: 1, label: `采集设备编号`, visible: true }, { key: 1, label: `采集设备编号`, visible: true },
{ key: 2, label: `采集设备名称`, visible: true }, { key: 2, label: `采集设备名称`, visible: true },
{ key: 3, label: `能源类型`, visible: true }, { key: 3, label: `能源类型`, visible: false },
{ key: 4, label: `型号`, visible: true }, { key: 4, label: `型号`, visible: true },
{ key: 5, label: `生产厂家`, visible: true }, { key: 5, label: `生产厂家`, visible: true },
{ key: 6, label: `通讯地址`, visible: true }, { key: 6, label: `通讯地址`, visible: true },

90
src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
Unescape Escape View File

@ -53,47 +53,47 @@
<el-table v-if="refreshTable" v-loading="loading" :data="baseMonitorInfoList" row-key="objId" <el-table v-if="refreshTable" v-loading="loading" :data="baseMonitorInfoList" row-key="objId"
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column label="父级编号" prop="parentId" v-if="columns[1].visible" /> <el-table-column label="父级编号" prop="parentId" v-if="columns[0].visible" />
<el-table-column label="计量设备编号" align="center" prop="monitorCode" v-if="columns[2].visible" /> <el-table-column label="计量设备编号" align="center" prop="monitorCode" v-if="columns[1].visible" />
<el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[3].visible" /> <el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[2].visible" />
<!-- <el-table-column label="能源类型" align="center" prop="monitorType" v-if="columns[4].visible"> <!-- <el-table-column label="能源类型" align="center" prop="monitorType" v-if="columns[4].visible">
<template slot-scope="scope"> <template slot-scope="scope">
{{ dict.type.monitor_type.find(e=>e.value == scope.row.monitorType).label}} {{ dict.type.monitor_type.find(e=>e.value == scope.row.monitorType).label}}
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column label="能源类型" align="center" prop="energyName" v-if="columns[4].visible"> <el-table-column label="能源类型" align="center" prop="energyName" v-if="columns[3].visible">
</el-table-column> </el-table-column>
<el-table-column label="计量设备位置" align="center" prop="monitorAddr" v-if="columns[5].visible" /> <el-table-column label="计量设备位置" align="center" prop="monitorAddr" v-if="columns[4].visible" />
<el-table-column label="计量设备状态" align="center" prop="monitorStatus" v-if="columns[6].visible"> <el-table-column label="计量设备状态" align="center" prop="monitorStatus" v-if="columns[5].visible">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.monitor_status" :value="scope.row.monitorStatus" /> <dict-tag :options="dict.type.monitor_status" :value="scope.row.monitorStatus" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="采集设备编号" align="center" prop="collectDeviceId" v-if="columns[7].visible" /> <el-table-column label="采集设备编号" align="center" prop="collectDeviceId" v-if="columns[6].visible" />
<el-table-column label="等级" align="center" prop="grade" v-if="columns[9].visible" /> <el-table-column label="等级" align="center" prop="grade" v-if="columns[7].visible" />
<el-table-column label="传感器仪表" align="center" prop="meterTypeId" v-if="columns[10].visible" /> <el-table-column label="传感器仪表" align="center" prop="meterTypeId" v-if="columns[8].visible" />
<el-table-column label="修正值" align="center" prop="correctValue" v-if="columns[11].visible" /> <el-table-column label="修正值" align="center" prop="correctValue" v-if="columns[9].visible" />
<el-table-column label="是否虚拟" align="center" prop="isAmmeter" v-if="columns[14].visible"> <el-table-column label="是否虚拟" align="center" prop="isAmmeter" v-if="columns[10].visible">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.is_ammeter" :value="scope.row.isAmmeter" /> <dict-tag :options="dict.type.is_ammeter" :value="scope.row.isAmmeter" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="通断复位" align="center" prop="isKeyMonitor" v-if="columns[15].visible" /> <el-table-column label="通断复位" align="center" prop="isKeyMonitor" v-if="columns[11].visible" />
<el-table-column label="是否断路" align="center" prop="isCircuit" v-if="columns[16].visible" /> <el-table-column label="是否断路" align="center" prop="isCircuit" v-if="columns[12].visible" />
<el-table-column label="创建人" align="center" prop="createBy" v-if="columns[17].visible" /> <el-table-column label="创建人" align="center" prop="createBy" v-if="columns[13].visible" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[18].visible"> <el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[14].visible">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="更新人" align="center" prop="updateBy" v-if="columns[19].visible" /> <el-table-column label="更新人" align="center" prop="updateBy" v-if="columns[15].visible" />
<el-table-column label="更新时间" align="center" prop="updateTime" width="180" v-if="columns[20].visible"> <el-table-column label="更新时间" align="center" prop="updateTime" width="180" v-if="columns[16].visible">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="公摊表类型" align="center" prop="publicShareType" v-if="columns[21].visible" /> <el-table-column label="公摊表类型" align="center" prop="publicShareType" v-if="columns[17].visible" />
<el-table-column label="表具层级" align="center" prop="monitorHierarchy" v-if="columns[22].visible" /> <el-table-column label="表具层级" align="center" prop="monitorHierarchy" v-if="columns[18].visible" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
@ -101,7 +101,8 @@
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
v-hasPermi="['ems/base:baseMonitorInfo:add']">新增</el-button> v-hasPermi="['ems/base:baseMonitorInfo:add']">新增</el-button>
<el-button size="mini" type="text" icon="el-icon-setting" @click="handleThreshold(scope.row)" <el-button size="mini" type="text" icon="el-icon-setting" @click="handleThreshold(scope.row)"
v-hasPermi="['ems/record:recordAlarmRule:list']">阈值</el-button> v-hasPermi="['ems/record:recordAlarmRule:list']"
v-if="scope.row.isAmmeter !== '0'">阈值</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['ems/base:baseMonitorInfo:remove']">删除</el-button> v-hasPermi="['ems/base:baseMonitorInfo:remove']">删除</el-button>
</template> </template>
@ -136,9 +137,9 @@
:label="parseInt(dict.value)">{{ dict.label }}</el-radio> :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- <el-form-item label="采集设备编号" prop="collectDeviceId">--> <el-form-item label="采集设备编号" prop="collectDeviceId">
<!-- <el-input v-model="form.collectDeviceId" placeholder="请输入采集设备编号" />--> <el-input v-model="form.collectDeviceId" placeholder="请输入采集设备编号" />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="等级" prop="grade">--> <!-- <el-form-item label="等级" prop="grade">-->
<!-- <el-input v-model="form.grade" placeholder="请输入等级" />--> <!-- <el-input v-model="form.grade" placeholder="请输入等级" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
@ -354,30 +355,29 @@ export default {
], ],
}, },
columns: [ columns: [
{ key: 0, label: `自增标识`, visible: false }, // { key: 0, label: `自增标识`, visible: false },
{ key: 1, label: `父级编号`, visible: false }, { key: 0, label: `父级编号`, visible: false },
{ key: 2, label: `计量设备编号`, visible: true }, { key: 1, label: `计量设备编号`, visible: true },
{ key: 3, label: `计量设备名称`, visible: true }, { key: 2, label: `计量设备名称`, visible: true },
{ key: 3, label: `能源类型`, visible: true }, { key: 3, label: `能源类型`, visible: true },
{ key: 4, label: `计量设备位置`, visible: true }, { key: 4, label: `计量设备位置`, visible: true },
{ key: 5, label: `计量设备类型`, visible: true }, // { key: 5, label: `计量设备类型`, visible: true },
{ key: 6, label: `计量设备状态`, visible: true }, { key: 5, label: `计量设备状态`, visible: true },
{ key: 7, label: `采集设备编号`, visible: false }, { key: 6, label: `采集设备编号`, visible: false },
{ key: 8, label: `祖级列表`, visible: false }, { key: 7, label: `等级`, visible: false },
{ key: 9, label: `等级`, visible: false }, { key: 8, label: `传感器仪表`, visible: false },
{ key: 10, label: `传感器仪表`, visible: false }, { key: 9, label: `修正值`, visible: false },
{ key: 11, label: `修正值`, visible: false }, // { key: 12, label: `PT值`, visible: false },
{ key: 12, label: `PT值`, visible: false }, // { key: 13, label: `CT值`, visible: false },
{ key: 13, label: `CT值`, visible: false }, { key: 10, label: `是否虚拟`, visible: true },
{ key: 14, label: `是否虚拟`, visible: true }, { key: 11, label: `通断复位`, visible: false },
{ key: 15, label: `通断复位`, visible: false }, { key: 12, label: `是否断路`, visible: false },
{ key: 16, label: `是否断路`, visible: false }, { key: 13, label: `创建人`, visible: false },
{ key: 17, label: `创建人`, visible: false }, { key: 14, label: `创建时间`, visible: false },
{ key: 18, label: `创建时间`, visible: false }, { key: 15, label: `更新人`, visible: false },
{ key: 19, label: `更新人`, visible: false }, { key: 16, label: `更新时间`, visible: false },
{ key: 20, label: `更新时间`, visible: false }, { key: 17, label: `公摊表类型`, visible: false },
{ key: 21, label: `公摊表类型`, visible: false }, { key: 18, label: `表具层级`, visible: false },
{ key: 22, label: `表具层级`, visible: false },
], ],
//能源类型选项 //能源类型选项
energyTypeList: [], energyTypeList: [],

267
src/views/index.vue
Unescape Escape View File

@ -1,11 +1,35 @@
<template> <template>
<div class="dashboard-container"> <div class="app-container">
<!-- 页面标题 --> <el-row :gutter="20">
<!-- <div class="page-header">--> <!-- 左侧设备树 -->
<!-- <h1 class="page-title">机场行李系统设备健康监测系统</h1>--> <el-col :span="5" :xs="24">
<!-- <div class="page-subtitle">首页</div>--> <div class="head-container">
<!-- </div>--> <el-input
v-model="deviceTreeFilter"
placeholder="请输入设备名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deviceTreeOptions"
:props="deviceTreeProps"
:expand-on-click-node="false"
:filter-node-method="filterDeviceNode"
ref="deviceTree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleDeviceNodeClick">
</el-tree>
</div>
</el-col>
<!-- 右侧内容区 -->
<el-col :span="19" :xs="24">
<!-- 统计卡片区域 --> <!-- 统计卡片区域 -->
<div class="stats-section"> <div class="stats-section">
<div class="stats-grid"> <div class="stats-grid">
@ -46,6 +70,9 @@
<div class="section-header"> <div class="section-header">
<h2 class="section-title">设备监控数据</h2> <h2 class="section-title">设备监控数据</h2>
<div class="section-actions"> <div class="section-actions">
<span v-if="selectedNodeName" class="selected-node">
当前节点：{{ selectedNodeName }}
</span>
<el-button <el-button
type="primary" type="primary"
icon="el-icon-refresh" icon="el-icon-refresh"
@ -60,7 +87,7 @@
<!-- 设备数据卡片网格 --> <!-- 设备数据卡片网格 -->
<div class="device-grid" v-loading="loading"> <div class="device-grid" v-loading="loading">
<div <div
v-for="device in deviceList" v-for="device in filteredDeviceList"
:key="device.monitorId" :key="device.monitorId"
class="device-card" class="device-card"
:class="getDeviceStatus(device)"> :class="getDeviceStatus(device)">
@ -145,18 +172,27 @@
</div> </div>
<!-- 空状态 --> <!-- 空状态 -->
<div v-if="!loading && deviceList.length === 0" class="empty-state"> <div v-if="!loading && filteredDeviceList.length === 0 && selectedNodeName" class="empty-state">
<i class="el-icon-box"></i> <i class="el-icon-box"></i>
<p>暂无设备数据</p> <p>该节点下暂无设备数据</p>
</div>
<!-- 未选择提示 -->
<div v-if="!selectedNodeName && !loading" class="empty-state">
<i class="el-icon-s-grid"></i>
<p>请在设备树中选择节点查看设备数据</p>
</div> </div>
</div> </div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <script>
import { getLatestRecords } from '@/api/ems/record/recordIotenvInstant' import { getLatestRecords, getLatestRecordsByParentId } from '@/api/ems/record/recordIotenvInstant'
import {getAlarmDataTotalCount} from "@/api/ems/record/recordAlarmData"; import {getAlarmDataTotalCount} from "@/api/ems/record/recordAlarmData";
import {getEmsRecordAlarmRuleTotalCount} from "@/api/ems/record/recordAlarmRule"; import {getEmsRecordAlarmRuleTotalCount} from "@/api/ems/record/recordAlarmRule";
import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo';
export default { export default {
name: 'Dashboard', name: 'Dashboard',
@ -165,20 +201,41 @@ export default {
loading: false, loading: false,
deviceList: [], deviceList: [],
refreshTimer: null, refreshTimer: null,
alarmRuleTotalCount:0, alarmRuleTotalCount: 0,
alarmDataTotalCount:0 alarmDataTotalCount: 0,
totalDeviceCount: 0, // 设备总数
// 设备树相关
deviceTreeOptions: [],
deviceTreeFilter: '',
selectedNodeId: null, // 当前选中的节点ID
selectedNodeName: null, // 当前选中的节点名称
deviceTreeProps: {
children: 'children',
label: 'label'
}
} }
}, },
computed: { computed: {
totalDeviceCount() { // 根据选择的设备树节点过滤设备列表
return this.deviceList.length filteredDeviceList() {
return this.deviceList
}
},
watch: {
// 根据名称筛选设备树
deviceTreeFilter(val) {
this.$refs.deviceTree.filter(val)
} }
}, },
mounted() { mounted() {
this.loadDeviceData() this.loadDeviceTree()
// 设置自动刷新，每1分钟刷新一次 this.loadStatistics() // 加载统计数据
// 设置自动刷新，每1分钟刷新一次（只有在选择了节点时才刷新设备数据）
this.refreshTimer = setInterval(() => { this.refreshTimer = setInterval(() => {
this.loadDeviceData() if (this.selectedNodeId !== null) {
this.loadDeviceDataByNode(this.selectedNodeId)
}
this.loadStatistics()
}, 60000) }, 60000)
}, },
beforeDestroy() { beforeDestroy() {
@ -187,12 +244,31 @@ export default {
} }
}, },
methods: { methods: {
async loadDeviceData() { async loadStatistics() {
this.loading = true
try { try {
this.alarmDataTotalCount = await getAlarmDataTotalCount(); this.alarmDataTotalCount = await getAlarmDataTotalCount();
this.alarmRuleTotalCount = await getEmsRecordAlarmRuleTotalCount(); this.alarmRuleTotalCount = await getEmsRecordAlarmRuleTotalCount();
// 获取所有设备数据用于统计设备总数
const response = await getLatestRecords() const response = await getLatestRecords()
if (response.code === 200) {
const rawData = response.data || []
const allDevices = rawData.filter(device => {
return device.monitorName !== '胶东机场' &&
device.monitorId &&
device.monitorName
})
// 更新设备总数
this.totalDeviceCount = allDevices.length
}
} catch (error) {
console.error('获取统计数据失败:', error)
}
},
async loadDeviceDataByNode(parentId) {
this.loading = true
try {
const response = await getLatestRecordsByParentId(parentId)
if (response.code === 200) { if (response.code === 200) {
// 过滤掉异常数据 // 过滤掉异常数据
const rawData = response.data || [] const rawData = response.data || []
@ -204,27 +280,52 @@ export default {
device.monitorId && device.monitorId &&
device.monitorName device.monitorName
}) })
console.log('原始设备数据:', rawData) console.log('选中节点设备数据:', this.deviceList)
console.log('过滤后设备数据:', this.deviceList)
// 如果过滤掉了数据，给出提示
const filteredCount = rawData.length - this.deviceList.length
if (filteredCount > 0) {
console.log(`已过滤掉 ${filteredCount} 条异常数据`)
}
} else { } else {
this.$message.error(response.msg || '获取设备数据失败') this.$message.error(response.msg || '获取设备数据失败')
this.deviceList = []
} }
} catch (error) { } catch (error) {
console.error('获取设备数据失败:', error) console.error('获取设备数据失败:', error)
this.$message.error('获取设备数据失败') this.$message.error('获取设备数据失败')
this.deviceList = []
} finally { } finally {
this.loading = false this.loading = false
} }
}, },
refreshData() { refreshData() {
this.loadDeviceData() if (this.selectedNodeId !== null) {
this.loadDeviceDataByNode(this.selectedNodeId)
}
this.loadStatistics()
},
// 加载设备树
async loadDeviceTree() {
const response = await getMonitorInfoTree({})
this.deviceTreeOptions = response.data || []
console.log('设备树数据:', this.deviceTreeOptions)
},
// 设备树节点筛选
filterDeviceNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
// 设备树节点点击事件
handleDeviceNodeClick(data) {
console.log('点击设备树节点:', data)
// 设置选中的节点信息
this.selectedNodeId = data.id
this.selectedNodeName = data.label
console.log('选中节点ID:', this.selectedNodeId, '节点名称:', this.selectedNodeName)
// 根据选中的节点ID加载该节点下的设备数据
this.loadDeviceDataByNode(this.selectedNodeId)
}, },
hasData(device) { hasData(device) {
@ -300,36 +401,56 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-container { .app-container {
padding: 20px; padding: 20px;
background-color: #f5f7fa; background-color: #f5f7fa;
min-height: 100vh; min-height: 100vh;
} }
.page-header { // 左侧设备树样式
text-align: center; .head-container {
margin-bottom: 30px; background: white;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.page-title { .el-tree {
font-size: 28px; background: transparent;
font-weight: 600;
color: #2c3e50;
margin: 0 0 8px 0;
} }
.page-subtitle { .el-tree-node__content {
font-size: 16px; height: 32px;
color: #7f8c8d; line-height: 32px;
border-radius: 6px;
margin-bottom: 2px;
&:hover {
background-color: #f5f7fa;
}
}
.el-tree-node.is-current > .el-tree-node__content {
background-color: #ecf5ff;
color: #409eff;
}
.el-tree-node__expand-icon {
color: #c0c4cc;
&.is-leaf {
color: transparent;
}
} }
} }
// 统计卡片区域
.stats-section { .stats-section {
margin-bottom: 30px; margin-bottom: 20px;
.stats-grid { .stats-grid {
display: flex; display: flex;
justify-content: center; gap: 16px;
gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -341,7 +462,8 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
min-width: 220px; min-width: 200px;
flex: 1;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
@ -367,7 +489,7 @@ export default {
flex: 1; flex: 1;
.stat-number { .stat-number {
font-size: 28px; font-size: 24px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
margin-bottom: 4px; margin-bottom: 4px;
@ -408,39 +530,61 @@ export default {
} }
} }
// 设备监控数据区域
.monitoring-section { .monitoring-section {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #e9ecef;
.section-title { .section-title {
font-size: 20px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #2c3e50; color: #2c3e50;
margin: 0; margin: 0;
} }
.section-actions {
display: flex;
align-items: center;
gap: 12px;
.selected-node {
font-size: 14px;
color: #409eff;
background: #ecf5ff;
padding: 4px 12px;
border-radius: 4px;
border: 1px solid #d9ecff;
}
}
} }
.device-grid { .device-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px; gap: 16px;
} }
.device-card { .device-card {
background: white; background: #f8f9fa;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
border-left: 4px solid #e9ecef; border-left: 4px solid #e9ecef;
font-size: 0.92em;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
} }
&.normal { &.normal {
@ -480,7 +624,7 @@ export default {
.device-id { .device-id {
font-size: 12px; font-size: 12px;
color: #7f8c8d; color: #7f8c8d;
background: #f8f9fa; background: white;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
} }
@ -567,9 +711,9 @@ export default {
} }
.device-footer { .device-footer {
margin-top: 8px; margin-top: 12px;
padding-top: 8px; padding-top: 12px;
border-top: 1px solid #f0f0f0; border-top: 1px solid #e9ecef;
.update-time { .update-time {
font-size: 11px; font-size: 11px;
@ -599,14 +743,14 @@ export default {
} }
} }
// 响应式设计
@media (max-width: 768px) { @media (max-width: 768px) {
.dashboard-container { .app-container {
padding: 16px; padding: 16px;
} }
.stats-grid { .stats-grid {
flex-direction: column; flex-direction: column;
align-items: center;
} }
.device-grid { .device-grid {
@ -617,6 +761,11 @@ export default {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
.section-actions {
width: 100%;
justify-content: space-between;
}
} }
} }
</style> </style>

3
src/views/login.vue
Unescape Escape View File

@ -161,8 +161,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
//background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
background-image: url("../assets/images/mesnac.jpg");
background-size: cover; background-size: cover;
} }
.title { .title {

Write Preview
Loading…
Cancel
Save