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-title">总设备数</div>
<div class="card-value">{{ totalDevices.toLocaleString() }}</div> <div class="card-value">{{ totalDevices.toLocaleString() }}</div>
<div class="card-trend growth"> <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> <span>较上月增长 {{ totalDevicesGrowth }}%</span>
</div> </div>
</div> </div>
@@ -51,62 +53,58 @@
<div class="table-title">园区信息列表</div> <div class="table-title">园区信息列表</div>
<el-table <el-table
:data="parkList" :data="parkList"
stripe :style="{ width: '100%' }"
style="width: 100%"
class="park-table" class="park-table"
height="calc(100% - 50px)" height="calc(100% - 50px)"
:header-cell-style="{ :header-cell-style="{
background: 'rgba(78, 155, 248, 0.08)', background: '#1a3a52',
color: '#ffffff', color: '#ffffff',
borderBottom: '1px solid rgba(78, 155, 248, 0.15)', borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
fontWeight: '500', fontWeight: '500',
padding: '12px 8px' padding: '12px 8px'
}" }"
:row-style="{ :row-style="getRowStyle"
background: 'transparent',
color: '#ffffff'
}"
:cell-style="{ :cell-style="{
borderBottom: '1px solid rgba(78, 155, 248, 0.08)', borderBottom: '1px solid rgba(78, 155, 248, 0.08)',
color: '#ffffff', color: '#ffffff',
padding: '12px 8px' padding: '12px 8px'
}" }"
> >
<el-table-column prop="parkName" label="园区名称" width="180" align="left" /> <el-table-column prop="parkName" label="园区名称" min-width="200" align="left" />
<el-table-column prop="totalDevices" label="设备总数" width="100" align="center"> <el-table-column prop="totalDevices" label="设备总数" min-width="120" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span class="device-count">{{ row.totalDevices }}</span> <span class="device-count">{{ row.totalDevices }}</span>
</template> </template>
</el-table-column> </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 }"> <template #default="{ row }">
<span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']"> <span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
{{ row.upsStatus }} {{ row.upsStatus }}
</span> </span>
</template> </template>
</el-table-column> </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 }"> <template #default="{ row }">
<span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']"> <span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
{{ row.airConditionStatus }} {{ row.airConditionStatus }}
</span> </span>
</template> </template>
</el-table-column> </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 }"> <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 }} {{ row.temperatureStatus }}
</span> </span>
</template> </template>
</el-table-column> </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 }"> <template #default="{ row }">
<span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']"> <span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
{{ row.otherStatus }} {{ row.otherStatus }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="详情" width="150" align="center"> <el-table-column label="详情" min-width="180" align="center">
<template #default="{ row }"> <template #default="{ row }">
<a <a
:class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']" :class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
@@ -201,7 +199,7 @@ const parkList = ref<ParkInfo[]>([
totalDevices: 124, totalDevices: 124,
upsStatus: '正常', upsStatus: '正常',
airConditionStatus: '正常', airConditionStatus: '正常',
temperatureStatus: 2, temperatureStatus: '正常',
otherStatus: '正常', otherStatus: '正常',
hasAlarm: false hasAlarm: false
}, },
@@ -227,7 +225,7 @@ const parkList = ref<ParkInfo[]>([
}, },
{ {
key: '6', key: '6',
parkName: '雄安地面站', parkName: '崇左地面站',
totalDevices: 64, totalDevices: 64,
upsStatus: '正常', upsStatus: '正常',
airConditionStatus: '正常', airConditionStatus: '正常',
@@ -261,7 +259,7 @@ const parkList = ref<ParkInfo[]>([
totalDevices: 68, totalDevices: 68,
upsStatus: '正常', upsStatus: '正常',
airConditionStatus: '正常', airConditionStatus: '正常',
temperatureStatus: 1, temperatureStatus: '正常',
otherStatus: '正常', otherStatus: '正常',
hasAlarm: false hasAlarm: false
}, },
@@ -466,6 +464,20 @@ const initDeviceTypePieChart = () => {
deviceTypePieChart.setOption(option); 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) => { const handleViewDetail = (record: ParkInfo) => {
console.log('查看园区详情:', record); console.log('查看园区详情:', record);
@@ -690,8 +702,8 @@ const handleResize = () => {
// 表格行悬浮效果 // 表格行悬浮效果
.el-table__row { .el-table__row {
&:hover { &:hover > td {
background: rgba(78, 155, 248, 0.05) !important; background: rgba(78, 155, 248, 0.1) !important;
} }
} }
@@ -728,21 +740,26 @@ const handleResize = () => {
font-size: 13px; font-size: 13px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 8px;
text-decoration: none; text-decoration: none;
color: #4e9bf8;
&.detail-normal { .alarm-badge,
color: #52c41a; .normal-badge {
display: inline-block;
.normal-badge { padding: 4px 12px;
color: #52c41a; border-radius: 4px;
} font-size: 12px;
color: #ffffff;
font-weight: 500;
} }
&.detail-alarm { .alarm-badge {
.alarm-badge { background: #ff4d4f;
color: #ff4d4f; }
}
.normal-badge {
background: #52c41a;
} }
&:hover { &:hover {

2
vite.config.ts
View File

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