isoftstone/lc_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动环监控大屏

Browse Source
This commit is contained in:
chenlin
2025-12-03 15:25:06 +08:00
parent 685a02ac01
commit 4bca8652d6
2 changed files with 50 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/screen/powerMonitoring.vue
View File

@@ -15,7 +15,9 @@
<div class="card-title">总设备数</div>
<div class="card-value">{{ totalDevices.toLocaleString() }}</div>
<div class="card-trend growth">
<img src="@/assets/images/screen/up_arrow.png" />
<svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
<path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" />
</svg>
<span>较上月增长 {{ totalDevicesGrowth }}%</span>
</div>
</div>
@@ -51,62 +53,58 @@
<div class="table-title">园区信息列表</div>
<el-table
:data="parkList"
stripe
style="width: 100%"
:style="{ width: '100%' }"
class="park-table"
height="calc(100% - 50px)"
:header-cell-style="{
background: 'rgba(78, 155, 248, 0.08)',
background: '#1a3a52',
color: '#ffffff',
borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
fontWeight: '500',
padding: '12px 8px'
}"
:row-style="{
background: 'transparent',
color: '#ffffff'
}"
:row-style="getRowStyle"
:cell-style="{
borderBottom: '1px solid rgba(78, 155, 248, 0.08)',
color: '#ffffff',
padding: '12px 8px'
}"
>
<el-table-column prop="parkName" label="园区名称" width="180" align="left" />
<el-table-column prop="totalDevices" label="设备总数" width="100" align="center">
<el-table-column prop="parkName" label="园区名称" min-width="200" align="left" />
<el-table-column prop="totalDevices" label="设备总数" min-width="120" align="center">
<template #default="{ row }">
<span class="device-count">{{ row.totalDevices }}</span>
</template>
</el-table-column>
<el-table-column prop="upsStatus" label="UPS" width="120" align="center">
<el-table-column prop="upsStatus" label="UPS" min-width="140" align="center">
<template #default="{ row }">
<span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
{{ row.upsStatus }}
</span>
</template>
</el-table-column>
<el-table-column prop="airConditionStatus" label="精密空调" width="120" align="center">
<el-table-column prop="airConditionStatus" label="精密空调" min-width="140" align="center">
<template #default="{ row }">
<span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
{{ row.airConditionStatus }}
</span>
</template>
</el-table-column>
<el-table-column prop="temperatureStatus" label="温湿度" width="120" align="center">
<el-table-column prop="temperatureStatus" label="温湿度" min-width="140" align="center">
<template #default="{ row }">
<span :class="['status-text', row.temperatureStatus === '正常' || typeof row.temperatureStatus === 'number' ? 'status-normal' : 'status-alarm']">
<span :class="['status-text', row.temperatureStatus === '正常' ? 'status-normal' : 'status-alarm']">
{{ row.temperatureStatus }}
</span>
</template>
</el-table-column>
<el-table-column prop="otherStatus" label="其他" width="120" align="center">
<el-table-column prop="otherStatus" label="其他" min-width="140" align="center">
<template #default="{ row }">
<span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
{{ row.otherStatus }}
</span>
</template>
</el-table-column>
<el-table-column label="详情" width="150" align="center">
<el-table-column label="详情" min-width="180" align="center">
<template #default="{ row }">
<a
:class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
@@ -201,7 +199,7 @@ const parkList = ref<ParkInfo[]>([
totalDevices: 124,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: 2,
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
@@ -227,7 +225,7 @@ const parkList = ref<ParkInfo[]>([
},
{
key: '6',
parkName: '雄安地面站',
parkName: '崇左地面站',
totalDevices: 64,
upsStatus: '正常',
airConditionStatus: '正常',
@@ -261,7 +259,7 @@ const parkList = ref<ParkInfo[]>([
totalDevices: 68,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: 1,
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
@@ -466,6 +464,20 @@ const initDeviceTypePieChart = () => {
deviceTypePieChart.setOption(option);
};
// 获取行样式（条纹效果）
const getRowStyle = ({ rowIndex }: { rowIndex: number }) => {
if (rowIndex % 2 === 0) {
return {
background: 'rgba(78, 155, 248, 0.03)',
color: '#ffffff'
};
}
return {
background: 'transparent',
color: '#ffffff'
};
};
// 查看详情
const handleViewDetail = (record: ParkInfo) => {
console.log('查看园区详情:', record);
@@ -690,8 +702,8 @@ const handleResize = () => {
// 表格行悬浮效果
.el-table__row {
&:hover {
background: rgba(78, 155, 248, 0.05) !important;
&:hover > td {
background: rgba(78, 155, 248, 0.1) !important;
}
}
@@ -728,21 +740,26 @@ const handleResize = () => {
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 4px;
gap: 8px;
text-decoration: none;
color: #4e9bf8;
&.detail-normal {
color: #52c41a;
.normal-badge {
color: #52c41a;
}
.alarm-badge,
.normal-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
color: #ffffff;
font-weight: 500;
}
&.detail-alarm {
.alarm-badge {
color: #ff4d4f;
}
.alarm-badge {
background: #ff4d4f;
}
.normal-badge {
background: #52c41a;
}
&:hover {

2
vite.config.ts
View File

@@ -32,7 +32,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
proxy: {
['/admin-api']: {
target: 'http://10.28.117.100:48080',
target: 'http://10.28.117.48:48080',
ws: false,
changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),