848 lines
23 KiB
Vue
848 lines
23 KiB
Vue
<template>
|
||
<div class="app-container home">
|
||
<!-- 数据总览卡片 -->
|
||
<div>
|
||
<h2>数据总览</h2>
|
||
<div class="data-item">
|
||
<div class="data_bck">
|
||
<div class="number"><span>{{ DataOverview.devicesNumber }}</span> 个</div>
|
||
<div class="title_number">设备数量</div>
|
||
</div>
|
||
<div class="data_green">
|
||
<div class="number"><span>{{ DataOverview.equipmentOnline }}</span> 个</div>
|
||
<div class="title_number">在线设备</div>
|
||
</div>
|
||
<div class="data_orgine">
|
||
<div class="number"><span>{{ DataOverview.binding }}</span> 个</div>
|
||
<div class="title_number">已绑定设备</div>
|
||
</div>
|
||
<div class="data_red">
|
||
<div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
|
||
<div class="title_number">异常设备</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设备分类 + 快捷操作 -->
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="content-row">
|
||
<h2>设备分类</h2>
|
||
<div class="card-header">
|
||
<div v-for="(item, index) in deviceList" :key="index" class="progress-item"
|
||
style="display: inline-block; margin-right: 40px;">
|
||
<el-progress :stroke-width="7" type="circle" :width="100"
|
||
:percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
|
||
<template #default>
|
||
<div class="progress-text">
|
||
<span class="current">{{ item.current }}</span>
|
||
<span class="divider">/</span>
|
||
<span class="total">{{ item.total }}</span>
|
||
</div>
|
||
</template>
|
||
</el-progress>
|
||
<div class="progress-name">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="content-row">
|
||
<h2>快捷操作</h2>
|
||
<div class="card-header">
|
||
<div class="quick-item" @click="handledeviceTypeAdd">
|
||
<img src="../assets/index/device_type.png" class="quick-img" />
|
||
<div class="card_title">设备类型</div>
|
||
</div>
|
||
<div class="quick-item" @click="handledeviceAdd">
|
||
<img src="../assets/index/device_add.png" class="quick-img" />
|
||
<div class="card_title">设备添加</div>
|
||
</div>
|
||
<div class="quick-item" @click="handleGroup">
|
||
<img src="../assets/index/device_group.png" class="quick-img" />
|
||
<div class="card_title">分组管理</div>
|
||
</div>
|
||
<div class="quick-item" @click="handleControlPanel">
|
||
<img src="../assets/index/conton.png" class="quick-img" />
|
||
<div class="card_title">控制面板</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 图表区域：设备使用频次 + 报警信息 -->
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="region-chart-card">
|
||
<div class="card-header">
|
||
<h2>设备使用频次</h2>
|
||
<div class="chart-controls">
|
||
<el-select v-model="deviceType" placeholder="设备类型" style="width: 150px;"
|
||
@change="handleDeviceTypeChange">
|
||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||
:value="item.deviceTypeId" />
|
||
</el-select>
|
||
<div class="tab-group">
|
||
<div class="tab-item" :class="{ 'tab-item--active': activeTab === '1' }"
|
||
@click="updateFrequencyChart('1')">
|
||
近半年
|
||
</div>
|
||
<div class="tab-item" :class="{ 'tab-item--active': activeTab === '2' }"
|
||
@click="updateFrequencyChart('2')">
|
||
近一年
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 图表容器：设备使用频次 -->
|
||
<div ref="frequencyChartRef" class="chart-container"></div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="region-chart-card">
|
||
<div class="card-header">
|
||
<h2>报警信息</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<el-row :gutter="16">
|
||
<el-col :span="8">
|
||
<div class="alarm-overview">
|
||
<!-- 环形图容器：今日报警处理占比 -->
|
||
<div ref="alarmRingChartRef" class="chart-container"></div>
|
||
<div class="alarm-stats">
|
||
<div class="stat-item" v-if="alarmsData">
|
||
<div class="stat red">{{ alarmsData.alarmsTotal }}</div>
|
||
<div class="label">报警总数</div>
|
||
</div>
|
||
<div class="stat-item" v-if="alarmsData">
|
||
<div class="stat green">{{ alarmsData.processingAlarm }}</div>
|
||
<div class="label">总处理报警</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<!-- 报警事项 + 柱状图 -->
|
||
<el-col :span="16">
|
||
<div class="alarm-items">
|
||
<h3>报警事项</h3>
|
||
<!-- 柱状图容器：各类型报警次数 -->
|
||
<div ref="alarmBarChartRef" class="chart-container"></div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="Index" lang="ts">
|
||
import api from '@/api/home/index'
|
||
import { DataOverviewType } from '@/api/home/types'
|
||
import router from '@/router';
|
||
import * as echarts from 'echarts'; // 引入ECharts核心库
|
||
import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||
const DataOverview = ref<DataOverviewType>({
|
||
devicesNumber: 0,
|
||
equipmentOnline: 0,
|
||
binding: 0,
|
||
equipmentAbnormal: 0
|
||
});
|
||
const deviceTypeOptions = ref([]); //设备类型
|
||
const deviceType = ref()
|
||
const activeTab = ref('1');
|
||
const alarmsData = ref()
|
||
// ---------------------- 基础数据 ----------------------
|
||
// 设备分类数据
|
||
const deviceList = ref([
|
||
{ name: "4G设备", current: 0, total: 0 },
|
||
{ name: "蓝牙设备", current: 0, total: 0 },
|
||
{ name: "4G&蓝牙设备", current: 0, total: 0 },
|
||
]);
|
||
// ---------------------- 图表Ref（用于挂载图表实例） ----------------------
|
||
const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
|
||
const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图
|
||
const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图
|
||
// ---------------------- 图表实例存储（用于销毁/更新） ----------------------
|
||
let frequencyChartInstance: echarts.ECharts | null = null;
|
||
let alarmRingChartInstance: echarts.ECharts | null = null;
|
||
let alarmBarChartInstance: echarts.ECharts | null = null;
|
||
|
||
// ---------------------- 快捷操作方法 ----------------------
|
||
const handledeviceTypeAdd = () => {
|
||
router.push('/equipmentManagement/deviceType');
|
||
};
|
||
const handledeviceAdd = () => {
|
||
router.push('/equipmentManagement/devices');
|
||
};
|
||
const handleGroup = () => {
|
||
router.push('/equipmentManagement/group');
|
||
};
|
||
const handleControlPanel = () => {
|
||
router.push('controlCenter/controlPanel');
|
||
};
|
||
|
||
// ---------------------- 图表初始化方法 ----------------------
|
||
const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
|
||
if (!frequencyChartRef.value) return;
|
||
frequencyChartInstance = echarts.init(frequencyChartRef.value);
|
||
try {
|
||
let data = {
|
||
deviceTypeId: deviceTypeId
|
||
}
|
||
const res = await api.getEquipmentUsageData(range, data);
|
||
const monthData = res.data[0] || {};
|
||
const monthKeys = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12'];
|
||
const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||
// 3. 计算时间范围（核心逻辑）
|
||
let filteredKeys, filteredNames, yAxisData;
|
||
const today = new Date();
|
||
const currentMonth = today.getMonth();
|
||
if (range === '1') {
|
||
const result = [];
|
||
for (let i = 0; i < 6; i++) {
|
||
const targetMonth = (currentMonth - i + 12) % 12;
|
||
result.push(targetMonth);
|
||
}
|
||
const recent6Months = result.reverse();
|
||
// 匹配接口字段和名称
|
||
filteredKeys = recent6Months.map(monthIndex => monthKeys[monthIndex]);
|
||
filteredNames = recent6Months.map(monthIndex => monthNames[monthIndex]);
|
||
yAxisData = filteredKeys.map(key => monthData[key] || 0);
|
||
} else {
|
||
// 近一年：全部12个月（1月→12月）
|
||
filteredKeys = monthKeys;
|
||
filteredNames = monthNames;
|
||
yAxisData = filteredKeys.map(key => monthData[key] || 0);
|
||
}
|
||
const chartData = {
|
||
xAxis: filteredNames,
|
||
yAxis: yAxisData,
|
||
peak: { name: '峰值', value: 0, month: '' }
|
||
};
|
||
if (yAxisData.length) {
|
||
const maxVal = Math.max(...yAxisData);
|
||
const maxIndex = yAxisData.indexOf(maxVal);
|
||
chartData.peak = {
|
||
name: '峰值',
|
||
value: maxVal,
|
||
month: chartData.xAxis[maxIndex] || ''
|
||
};
|
||
}
|
||
const option = {
|
||
tooltip: { trigger: 'axis', formatter: '{b}: {c} 次' },
|
||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: chartData.xAxis,
|
||
axisLabel: { interval: 0 }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '使用次数',
|
||
min: 0,
|
||
max: chartData.yAxis.length ? Math.max(...chartData.yAxis) + 100 : 100
|
||
},
|
||
series: [
|
||
{
|
||
name: '使用频次',
|
||
type: 'line',
|
||
data: chartData.yAxis,
|
||
smooth: false,
|
||
lineStyle: { width: 3, color: '#409eff' },
|
||
itemStyle: { color: '#409eff', radius: 5 },
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0, y: 0, x2: 0, y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
|
||
{ offset: 1, color: 'rgba(64, 158, 255, 0)' }
|
||
]
|
||
}
|
||
},
|
||
markPoint: {
|
||
data: chartData.peak.value
|
||
? [{
|
||
name: chartData.peak.name,
|
||
value: chartData.peak.value,
|
||
xAxis: chartData.xAxis.indexOf(chartData.peak.month),
|
||
yAxis: chartData.peak.value,
|
||
itemStyle: { color: '#409eff' }
|
||
}]
|
||
: []
|
||
}
|
||
}
|
||
]
|
||
};
|
||
frequencyChartInstance.setOption(option);
|
||
} catch (error) {
|
||
}
|
||
};
|
||
/**
|
||
* 2. 报警环形图（今日报警处理占比）
|
||
*/
|
||
const initAlarmRingChart = async () => {
|
||
if (!alarmRingChartRef.value) return;
|
||
alarmRingChartInstance = echarts.init(alarmRingChartRef.value);
|
||
try {
|
||
const res = await api.getAlarmInformation({});
|
||
const { alarmsTotalToday = 0, processingAlarmToday = 0 } = res.data || {};
|
||
alarmsData.value = res.data || '0'
|
||
alarmRingChartInstance = echarts.init(alarmRingChartRef.value);
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c} 次 ({d}%)' // 显示数量和百分比
|
||
},
|
||
legend: {
|
||
origin: 'vertical',
|
||
data: ['报警', '已处理']
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['50%', '60%'], // 环形半径
|
||
center: ['50%', '50%'], // 居中显示
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'center',
|
||
formatter: [
|
||
'{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}',
|
||
'{textStyle|今日报警/处理}'
|
||
].join('\n'), // 换行
|
||
// 关键：配置 rich 定义样式
|
||
rich: {
|
||
valueStyle: {
|
||
color: '#333', // 数字颜色
|
||
fontSize: 18, // 数字字号
|
||
fontWeight: 'bold',// 数字加粗
|
||
lineHeight: 24 // 行高（控制与下一行间距）
|
||
},
|
||
textStyle: {
|
||
color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义）
|
||
fontSize: 14, // 文字字号
|
||
lineHeight: 20 // 文字行高
|
||
}
|
||
},
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
color: '#333'
|
||
},
|
||
labelLine: {
|
||
show: false // 隐藏标签连接线
|
||
},
|
||
data: [
|
||
|
||
{
|
||
value:processingAlarmToday ,
|
||
name: '已处理',
|
||
itemStyle: { color: '#07BE75' }
|
||
},
|
||
{
|
||
value: alarmsTotalToday,
|
||
name: '报警',
|
||
itemStyle: { color: '#F65757' }
|
||
},
|
||
|
||
]
|
||
}
|
||
]
|
||
};
|
||
alarmRingChartInstance.setOption(option);
|
||
// 报警柱状图
|
||
initAlarmBarChart()
|
||
} catch (error) {
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 3. 报警柱状图（各类型报警次数）
|
||
*/
|
||
const initAlarmBarChart = () => {
|
||
if (!alarmBarChartRef.value) return;
|
||
const alarmTypeMap = [
|
||
{ name: '强制报警', field: 'alarmForced' }, // alarmForced
|
||
{ name: '撞击闯入', field: 'intrusionImpact' }, // intrusionImpact
|
||
{ name: '自动报警', field: 'alarmAuto' }, // alarmAuto
|
||
{ name: '电子围栏', field: 'fenceElectronic' } // fenceElectronic
|
||
];
|
||
|
||
const alarmTypes = alarmTypeMap.map(item => item.name);
|
||
const alarmCounts = alarmTypeMap.map(item => {
|
||
const value = alarmsData.value[item.field]; // 提取对应字段值
|
||
console.log(`${item.name}数值:`, value); // 打印每个类型的数值
|
||
return value;
|
||
});
|
||
const commonGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: 'rgba(246, 87, 87, 1)' }, // 渐变起点：#F65757（不透明）
|
||
{ offset: 1, color: 'rgba(224, 52, 52, 0)' } // 渐变终点：#E03434（全透明）
|
||
]);
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: '{b}: {c} 次'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: alarmTypes,
|
||
axisLabel: {
|
||
interval: 0 // 强制显示所有标签
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '报警次数',
|
||
min: 0
|
||
},
|
||
series: [
|
||
{
|
||
name: '报警次数',
|
||
type: 'bar',
|
||
data: alarmCounts,
|
||
barWidth: '20%',
|
||
itemStyle: {
|
||
color: commonGradient, // 所有柱子共用同一渐变色
|
||
borderRadius: 4 // 统一4px圆角
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 4. 初始化并渲染图表
|
||
alarmBarChartInstance = echarts.init(alarmBarChartRef.value);
|
||
alarmBarChartInstance.setOption(option);
|
||
};
|
||
// ---------------------- 图表更新方法（时间范围切换时） ----------------------
|
||
const updateFrequencyChart = (tabValue: any) => {
|
||
activeTab.value = tabValue;
|
||
if (frequencyChartInstance) {
|
||
frequencyChartInstance.dispose();
|
||
}
|
||
deviceType.value=''
|
||
initFrequencyChart(tabValue, '');
|
||
};
|
||
const handleDeviceTypeChange = (all) => {
|
||
initFrequencyChart(activeTab.value, all);
|
||
|
||
};
|
||
// 首页统计接口
|
||
const getData = async () => {
|
||
// 设备总览
|
||
api.getDataOverview({}).then(res => {
|
||
DataOverview.value = res.data
|
||
})
|
||
// 设备分类
|
||
try {
|
||
const res = await api.getEquipmentClassification({});
|
||
console.log(res, 'resss');
|
||
const { equipment4G, deviceBluetooth, devices4GAndBluetooth, total } = res.data;
|
||
// 映射数据：current 为各类型设备数量，total 为总设备数（6）
|
||
deviceList.value = [
|
||
{
|
||
name: "4G设备",
|
||
current: equipment4G,
|
||
total: total
|
||
},
|
||
{
|
||
name: "蓝牙设备",
|
||
current: deviceBluetooth,
|
||
total: total
|
||
},
|
||
{
|
||
name: "4G&蓝牙设备",
|
||
current: devices4GAndBluetooth,
|
||
total: total
|
||
},
|
||
];
|
||
} catch (error) {
|
||
console.log('获取设备分类数据失败：', error);
|
||
}
|
||
// 设备类型
|
||
apiTypeAll.deviceTypeAll().then(res => {
|
||
if (res.code == 200) {
|
||
const originalData = Array.isArray(res.data) ? res.data : [];
|
||
deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: ''}].concat(originalData);
|
||
}
|
||
}).catch(err => {
|
||
|
||
})
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// ---------------------- 生命周期钩子（初始化/销毁图表） ----------------------
|
||
onMounted(() => {
|
||
// 页面加载时初始化所有图表
|
||
initFrequencyChart('1', '');
|
||
initAlarmRingChart();
|
||
getData()
|
||
|
||
// 监听窗口 resize，自动调整图表大小
|
||
window.addEventListener('resize', () => {
|
||
frequencyChartInstance?.resize();
|
||
alarmRingChartInstance?.resize();
|
||
alarmBarChartInstance?.resize();
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// 页面销毁时销毁图表实例，避免内存泄漏
|
||
frequencyChartInstance?.dispose();
|
||
alarmRingChartInstance?.dispose();
|
||
//alarmBarChartInstance?.dispose();
|
||
window.removeEventListener('resize', () => { });
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.home {
|
||
padding: 10px 20px 10px 20px;
|
||
background-color: #f5f7fa;
|
||
min-height: calc(100vh - 84px);
|
||
|
||
// 数据总览卡片样式
|
||
.data-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
color: rgba(255, 255, 255, 1);
|
||
margin-bottom: 20px;
|
||
|
||
.data_bck,
|
||
.data_green,
|
||
.data_orgine,
|
||
.data_red {
|
||
width:23%;
|
||
height: 135px;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
|
||
.data_bck {
|
||
background: url('../assets/index/devices_online.png') no-repeat;
|
||
background-size: 100%; // 确保背景图充满容器
|
||
}
|
||
|
||
.data_green {
|
||
background: url('../assets/index/online.png') no-repeat;
|
||
background-size: 100%; // 确保背景图充满容器
|
||
}
|
||
|
||
.data_orgine {
|
||
background: url('../assets/index/add.png') no-repeat;
|
||
background-size: 100%; // 确保背景图充满容器
|
||
}
|
||
|
||
.data_red {
|
||
background: url('../assets/index/device_yc.png') no-repeat;
|
||
background-size: 100%; // 确保背景图充满容器
|
||
}
|
||
|
||
.number {
|
||
padding-top:30px;
|
||
font-size: 18px;
|
||
|
||
span {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.title_number {
|
||
margin-top: 5px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
// 设备分类/快捷操作卡片样式
|
||
.content-row {
|
||
background-color: #fff;
|
||
height: 215px;
|
||
border-radius: 10px;
|
||
padding: 15px 25px;
|
||
margin-bottom: 20px;
|
||
|
||
h2 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0 0 15px 0;
|
||
}
|
||
|
||
.progress-item {
|
||
text-align: center;
|
||
|
||
.progress-text {
|
||
font-size: 20px;
|
||
color: #666;
|
||
|
||
.current {
|
||
font-weight: bold;
|
||
color: #000;
|
||
font-size: 23px;
|
||
}
|
||
}
|
||
|
||
.progress-name {
|
||
margin-top: 20px;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.quick-item {
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
|
||
.quick-img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.card_title {
|
||
margin-top: 20px;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-group {
|
||
display: flex;
|
||
gap: 12px;
|
||
/* 两个标签的间距 */
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 3px 10px;
|
||
cursor: pointer;
|
||
color: #666;
|
||
/* 未选中时的文字颜色 */
|
||
transition: all 0.2s ease;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.tab-item--active {
|
||
border-color: #409eff;
|
||
/* 选中时的边框颜色（示例用 Element UI 主色） */
|
||
color: #409eff;
|
||
/* 选中时的文字颜色 */
|
||
background-color: rgba(64, 158, 255, 0.05);
|
||
/* 可选：选中时的浅背景 */
|
||
border: 1px solid rgba(2, 124, 251, 1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
|
||
h2 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// 图表卡片样式
|
||
.region-chart-card {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 16px;
|
||
height: 360px; // 固定图表卡片高度，避免布局错乱
|
||
|
||
|
||
.card-body {
|
||
height: calc(100% - 40px); // 卡片内容区高度（减去header高度）
|
||
}
|
||
|
||
// 图表容器通用样式（必须设置宽高，否则图表无法渲染）
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 250px;
|
||
}
|
||
}
|
||
|
||
// 报警信息区域样式
|
||
.alarm-overview {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.alarm-stats {
|
||
// width: 100%;
|
||
display: flex;
|
||
// flex-direction: column;
|
||
gap: 15px;
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
|
||
.stat {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.stat.red {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.stat.green {
|
||
color: #07BE75;
|
||
}
|
||
|
||
.label {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.alarm-items {
|
||
height: 100%;
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0 0 10px 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式适配（小屏幕下调整布局）
|
||
@media (max-width: 1200px) {
|
||
.home {
|
||
.data-item {
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
|
||
.data_bck,
|
||
.data_green,
|
||
.data_orgine,
|
||
.data_red {
|
||
width: calc(50% - 7.5px); // 小屏幕下2列布局
|
||
}
|
||
}
|
||
|
||
.el-col {
|
||
&:span-12 {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 新增媒体查询，处理更小屏幕尺寸
|
||
@media (max-width: 768px) {
|
||
.data-item {
|
||
.data_bck,
|
||
.data_green,
|
||
.data_orgine,
|
||
.data_red {
|
||
width: 100%; // 在更小屏幕上，每个卡片占据一行
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
.content-row {
|
||
height: auto; // 自动高度，避免固定高度导致内容溢出
|
||
padding: 15px;
|
||
|
||
h2 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.progress-item,
|
||
.quick-item {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.region-chart-card {
|
||
height: auto; // 自动高度，避免固定高度导致内容溢出
|
||
|
||
.card-body {
|
||
height: auto;
|
||
}
|
||
|
||
.chart-container {
|
||
height: 200px; // 减少图表高度，适应小屏幕
|
||
}
|
||
}
|
||
|
||
.alarm-overview {
|
||
.alarm-stats {
|
||
flex-direction: column; // 报警统计项改为垂直排列
|
||
gap: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 针对超小屏幕尺寸的适配
|
||
@media (max-width: 480px) {
|
||
.data-item {
|
||
.data_bck,
|
||
.data_green,
|
||
.data_orgine,
|
||
.data_red {
|
||
width: 100%; // 每个卡片占据一行
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.content-row {
|
||
padding: 10px;
|
||
|
||
h2 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.progress-item,
|
||
.quick-item {
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.region-chart-card {
|
||
padding: 10px;
|
||
|
||
.chart-container {
|
||
height: 150px; // 进一步减少图表高度
|
||
}
|
||
}
|
||
|
||
.alarm-overview {
|
||
.alarm-stats {
|
||
gap: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |