动环监控大屏
This commit is contained in:
chenlin
@@ -399,6 +399,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
|||||||
catalogue: true,
|
catalogue: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/screen/powerMonitoring',
|
||||||
|
component: () => import('@/views/screen/powerMonitoring.vue'),
|
||||||
|
name: 'powerMonitoring',
|
||||||
|
meta: {
|
||||||
|
hidden: true,
|
||||||
|
title: '动环监控大屏',
|
||||||
|
noTagsView: true,
|
||||||
|
catalogue: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/screen/main',
|
path: '/screen/main',
|
||||||
component: () => import('@/views/screen/mainScreen.vue'),
|
component: () => import('@/views/screen/mainScreen.vue'),
|
||||||
|
|||||||
793
src/views/screen/powerMonitoring.vue
Normal file
793
src/views/screen/powerMonitoring.vue
Normal file
@@ -0,0 +1,793 @@
|
|||||||
|
<template>
|
||||||
|
<div class="big-screen-container">
|
||||||
|
<!-- 标题栏 -->
|
||||||
|
<div class="screen-header">
|
||||||
|
<h1 class="screen-title">动环监控大屏</h1>
|
||||||
|
<div class="screen-datetime">{{ currentDateTime }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主要内容区域 -->
|
||||||
|
<div class="screen-content">
|
||||||
|
<!-- 第一行：统计卡片 -->
|
||||||
|
<div class="stats-row">
|
||||||
|
<!-- 总设备数卡片 -->
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="card-title">总设备数</div>
|
||||||
|
<div class="card-value">{{ totalDevices.toLocaleString() }}</div>
|
||||||
|
<div class="card-trend growth">
|
||||||
|
<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"></path>
|
||||||
|
</svg>
|
||||||
|
<span>较上月增长 {{ totalDevicesGrowth }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 在线设备数卡片 -->
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="card-title">在线设备数</div>
|
||||||
|
<div class="card-value">{{ onlineDevices.toLocaleString() }}</div>
|
||||||
|
<div class="card-trend online-rate">
|
||||||
|
<span>在线率 {{ onlineRate }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第二行：图表 -->
|
||||||
|
<div class="charts-row">
|
||||||
|
<!-- 告警趋势折线图 -->
|
||||||
|
<div class="chart-card">
|
||||||
|
<div class="chart-title">当月告警趋势</div>
|
||||||
|
<div ref="alarmTrendChartRef" class="chart-container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 设备类型分布饼图 -->
|
||||||
|
<div class="chart-card">
|
||||||
|
<div class="chart-title">告警设备类型分布</div>
|
||||||
|
<div ref="deviceTypePieChartRef" class="chart-container"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第三行：园区信息列表 -->
|
||||||
|
<div class="table-row">
|
||||||
|
<div class="table-card">
|
||||||
|
<div class="table-title">园区信息列表</div>
|
||||||
|
<a-table
|
||||||
|
:columns="parkColumns"
|
||||||
|
:data-source="parkList"
|
||||||
|
:pagination="false"
|
||||||
|
:scroll="{ y: 'calc(100% - 50px)' }"
|
||||||
|
size="middle"
|
||||||
|
class="park-table"
|
||||||
|
>
|
||||||
|
<!-- 设备总数列 -->
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'totalDevices'">
|
||||||
|
<span class="device-count">{{ record.totalDevices }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- UPS状态 -->
|
||||||
|
<template v-else-if="column.key === 'ups'">
|
||||||
|
<span :class="['status-text', record.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||||
|
{{ record.upsStatus }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 精密空调状态 -->
|
||||||
|
<template v-else-if="column.key === 'airCondition'">
|
||||||
|
<span :class="['status-text', record.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||||
|
{{ record.airConditionStatus }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 温湿度状态 -->
|
||||||
|
<template v-else-if="column.key === 'temperature'">
|
||||||
|
<span :class="['status-text', record.temperatureStatus === '正常' || typeof record.temperatureStatus === 'number' ? 'status-normal' : 'status-alarm']">
|
||||||
|
{{ record.temperatureStatus }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 其他设备状态 -->
|
||||||
|
<template v-else-if="column.key === 'other'">
|
||||||
|
<span :class="['status-text', record.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||||
|
{{ record.otherStatus }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 详情操作 -->
|
||||||
|
<template v-else-if="column.key === 'action'">
|
||||||
|
<a
|
||||||
|
:class="['detail-link', record.hasAlarm ? 'detail-alarm' : 'detail-normal']"
|
||||||
|
@click="handleViewDetail(record)"
|
||||||
|
>
|
||||||
|
<span v-if="record.hasAlarm" class="alarm-badge">异常</span>
|
||||||
|
<span v-else class="normal-badge">正常</span>
|
||||||
|
查看详情
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import type { EChartsOption } from 'echarts';
|
||||||
|
|
||||||
|
// 定义园区信息类型
|
||||||
|
interface ParkInfo {
|
||||||
|
key: string;
|
||||||
|
parkName: string;
|
||||||
|
totalDevices: number;
|
||||||
|
upsStatus: string;
|
||||||
|
airConditionStatus: string;
|
||||||
|
temperatureStatus: string | number;
|
||||||
|
otherStatus: string;
|
||||||
|
hasAlarm: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 当前日期时间
|
||||||
|
const currentDateTime = ref('');
|
||||||
|
|
||||||
|
// 统计数据
|
||||||
|
const totalDevices = ref(1286);
|
||||||
|
const totalDevicesGrowth = ref(5.2);
|
||||||
|
const onlineDevices = ref(1254);
|
||||||
|
const onlineRate = ref(97.5);
|
||||||
|
|
||||||
|
// 图表引用
|
||||||
|
const alarmTrendChartRef = ref<HTMLDivElement>();
|
||||||
|
const deviceTypePieChartRef = ref<HTMLDivElement>();
|
||||||
|
|
||||||
|
// 图表实例
|
||||||
|
let alarmTrendChart: echarts.ECharts | null = null;
|
||||||
|
let deviceTypePieChart: echarts.ECharts | null = null;
|
||||||
|
|
||||||
|
// 告警趋势数据
|
||||||
|
const alarmTrendData = ref({
|
||||||
|
dates: ['5日', '10日', '15日', '20日', '25日', '30日'],
|
||||||
|
values: [8, 4, 20, 16, 21, 9]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设备类型分布数据
|
||||||
|
const deviceTypeData = ref([
|
||||||
|
{ name: 'UPS', value: 35 },
|
||||||
|
{ name: '精密空调', value: 25 },
|
||||||
|
{ name: '温湿度检测', value: 20 },
|
||||||
|
{ name: '其他', value: 20 }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 园区信息列表表头
|
||||||
|
const parkColumns = [
|
||||||
|
{ title: '园区名称', dataIndex: 'parkName', key: 'parkName', width: 180, align: 'left' },
|
||||||
|
{ title: '设备总数', dataIndex: 'totalDevices', key: 'totalDevices', width: 100, align: 'center' },
|
||||||
|
{ title: 'UPS', dataIndex: 'ups', key: 'ups', width: 120, align: 'center' },
|
||||||
|
{ title: '精密空调', dataIndex: 'airCondition', key: 'airCondition', width: 120, align: 'center' },
|
||||||
|
{ title: '温湿度', dataIndex: 'temperature', key: 'temperature', width: 120, align: 'center' },
|
||||||
|
{ title: '其他', dataIndex: 'other', key: 'other', width: 120, align: 'center' },
|
||||||
|
{ title: '详情', key: 'action', width: 150, align: 'center' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 园区信息列表数据
|
||||||
|
const parkList = ref<ParkInfo[]>([
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
parkName: '雄安总部',
|
||||||
|
totalDevices: 156,
|
||||||
|
upsStatus: '3个告警',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
parkName: '恒毅大厦',
|
||||||
|
totalDevices: 98,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
parkName: '丰台创新中心',
|
||||||
|
totalDevices: 124,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: 2,
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '4',
|
||||||
|
parkName: '重庆产业大厦',
|
||||||
|
totalDevices: 92,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '2个告警',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '5',
|
||||||
|
parkName: '海南园区',
|
||||||
|
totalDevices: 78,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '6',
|
||||||
|
parkName: '雄安地面站',
|
||||||
|
totalDevices: 64,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '7',
|
||||||
|
parkName: '铜川地面站',
|
||||||
|
totalDevices: 58,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '8',
|
||||||
|
parkName: '佳木斯地面站',
|
||||||
|
totalDevices: 72,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '9',
|
||||||
|
parkName: '库尔勒地面站',
|
||||||
|
totalDevices: 68,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: 1,
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '10',
|
||||||
|
parkName: '澄迈地面站',
|
||||||
|
totalDevices: 56,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '11',
|
||||||
|
parkName: '文昌地面站',
|
||||||
|
totalDevices: 60,
|
||||||
|
upsStatus: '正常',
|
||||||
|
airConditionStatus: '正常',
|
||||||
|
temperatureStatus: '正常',
|
||||||
|
otherStatus: '正常',
|
||||||
|
hasAlarm: false
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 更新日期时间
|
||||||
|
const updateDateTime = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(now.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(now.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||||
|
currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化告警趋势图表
|
||||||
|
const initAlarmTrendChart = () => {
|
||||||
|
if (!alarmTrendChartRef.value) return;
|
||||||
|
|
||||||
|
alarmTrendChart = echarts.init(alarmTrendChartRef.value);
|
||||||
|
|
||||||
|
const option: EChartsOption = {
|
||||||
|
grid: {
|
||||||
|
top: '15%',
|
||||||
|
left: '8%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '12%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: alarmTrendData.value.dates,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#3a5165'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#8b9bb3',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1e3a52',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 25,
|
||||||
|
interval: 5,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#8b9bb3',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1e3a52',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: alarmTrendData.value.values,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#4e9bf8',
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#4e9bf8',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: 'rgba(78, 155, 248, 0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(78, 155, 248, 0.05)' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markPoint: {
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff5555',
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: '#ff5555'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ name: '峰值1', coord: [2, 20] }, // 15日的告警峰值
|
||||||
|
{ name: '峰值2', coord: [4, 21] } // 25日的告警峰值
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
alarmTrendChart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化设备类型分布饼图
|
||||||
|
const initDeviceTypePieChart = () => {
|
||||||
|
if (!deviceTypePieChartRef.value) return;
|
||||||
|
|
||||||
|
deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);
|
||||||
|
|
||||||
|
const total = deviceTypeData.value.reduce((sum, item) => sum + item.value, 0);
|
||||||
|
|
||||||
|
const option: EChartsOption = {
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
right: '10%',
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 13
|
||||||
|
},
|
||||||
|
formatter: (name: string) => {
|
||||||
|
const item = deviceTypeData.value.find(d => d.name === name);
|
||||||
|
return `${name} (${item?.value || 0})`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['45%', '70%'],
|
||||||
|
center: ['35%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
formatter: () => {
|
||||||
|
return `{value|${total}}\n{label|告警}`;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
value: {
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 28,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
lineHeight: 40
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: '#8b9bb3',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: deviceTypeData.value.map((item, index) => {
|
||||||
|
const colors = ['#4e9bf8', '#52c41a', '#fa8c16', '#8c8c8c'];
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
value: item.value,
|
||||||
|
itemStyle: {
|
||||||
|
color: colors[index]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
deviceTypePieChart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看详情
|
||||||
|
const handleViewDetail = (record: ParkInfo) => {
|
||||||
|
console.log('查看园区详情:', record);
|
||||||
|
// TODO: 实现详情页面跳转或弹窗
|
||||||
|
};
|
||||||
|
|
||||||
|
// 定时器
|
||||||
|
let dateTimeTimer: number | null = null;
|
||||||
|
|
||||||
|
// 组件挂载
|
||||||
|
onMounted(() => {
|
||||||
|
// 更新日期时间
|
||||||
|
updateDateTime();
|
||||||
|
dateTimeTimer = window.setInterval(updateDateTime, 1000);
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
setTimeout(() => {
|
||||||
|
initAlarmTrendChart();
|
||||||
|
initDeviceTypePieChart();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
// 监听窗口大小变化
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (dateTimeTimer) {
|
||||||
|
clearInterval(dateTimeTimer);
|
||||||
|
}
|
||||||
|
if (alarmTrendChart) {
|
||||||
|
alarmTrendChart.dispose();
|
||||||
|
}
|
||||||
|
if (deviceTypePieChart) {
|
||||||
|
deviceTypePieChart.dispose();
|
||||||
|
}
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理窗口大小变化
|
||||||
|
const handleResize = () => {
|
||||||
|
alarmTrendChart?.resize();
|
||||||
|
deviceTypePieChart?.resize();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.big-screen-container {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(180deg, #0a1929 0%, #0d1e2f 100%);
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题栏
|
||||||
|
.screen-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
.screen-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-datetime {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #8b9bb3;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主要内容区域
|
||||||
|
.screen-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统计卡片行
|
||||||
|
.stats-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #8b9bb3;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-trend {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&.growth {
|
||||||
|
color: #52c41a;
|
||||||
|
|
||||||
|
.trend-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.online-rate {
|
||||||
|
color: #13c2c2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图表行
|
||||||
|
.charts-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||||
|
height: 350px;
|
||||||
|
|
||||||
|
.chart-title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格行
|
||||||
|
.table-row {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-card {
|
||||||
|
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||||
|
height: 450px;
|
||||||
|
|
||||||
|
.table-title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.park-table) {
|
||||||
|
.ant-table {
|
||||||
|
background: transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
background: rgba(78, 155, 248, 0.08);
|
||||||
|
color: #ffffff;
|
||||||
|
border-bottom: 1px solid rgba(78, 155, 248, 0.15);
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 12px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&:hover > td {
|
||||||
|
background: rgba(78, 155, 248, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
> td {
|
||||||
|
border-bottom: 1px solid rgba(78, 155, 248, 0.08);
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 12px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-placeholder {
|
||||||
|
background: transparent;
|
||||||
|
color: #8b9bb3;
|
||||||
|
|
||||||
|
.ant-empty-description {
|
||||||
|
color: #8b9bb3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-body {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(78, 155, 248, 0.3) transparent;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(78, 155, 248, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-count {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
&.status-normal {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-alarm {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-link {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&.detail-normal {
|
||||||
|
color: #52c41a;
|
||||||
|
|
||||||
|
.normal-badge {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.detail-alarm {
|
||||||
|
.alarm-badge {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式布局
|
||||||
|
@media screen and (max-width: 1600px) {
|
||||||
|
.screen-header {
|
||||||
|
.screen-title {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-datetime {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
padding: 25px;
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-card {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1366px) {
|
||||||
|
.stats-row,
|
||||||
|
.charts-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user