首页代码优化
This commit is contained in:
fengerli
@ -13,8 +13,8 @@
|
||||
<div class="title_number">在线设备</div>
|
||||
</div>
|
||||
<div class="data_orgine">
|
||||
<div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div>
|
||||
<div class="title_number">新增绑定</div>
|
||||
<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>
|
||||
@ -30,7 +30,7 @@
|
||||
<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"
|
||||
<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">
|
||||
@ -123,7 +123,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 报警事项 + 柱状图 -->
|
||||
<el-col :span="16">
|
||||
<div class="alarm-items">
|
||||
@ -150,7 +149,7 @@ import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||||
const DataOverview = ref<DataOverviewType>({
|
||||
devicesNumber: 0,
|
||||
equipmentOnline: 0,
|
||||
bindingNew: 0,
|
||||
binding: 0,
|
||||
equipmentAbnormal: 0
|
||||
});
|
||||
const deviceTypeOptions = ref([]); //设备类型
|
||||
@ -168,7 +167,6 @@ const deviceList = 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;
|
||||
@ -301,6 +299,10 @@ const initAlarmRingChart = async () => {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} 次 ({d}%)' // 显示数量和百分比
|
||||
},
|
||||
legend: {
|
||||
origin: 'vertical',
|
||||
data: ['报警', '已处理']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
@ -310,7 +312,24 @@ const initAlarmRingChart = async () => {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: `${alarmsTotalToday}/${processingAlarmToday}\n今日报警/处理`,
|
||||
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: 12, // 文字字号
|
||||
lineHeight: 20 // 文字行高
|
||||
}
|
||||
},
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
@ -320,15 +339,16 @@ const initAlarmRingChart = async () => {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: alarmsTotalToday,
|
||||
name: '已处理报警',
|
||||
itemStyle: { color: '#07BE75' } // 绿色：已处理
|
||||
value: processingAlarmToday,
|
||||
name: '报警',
|
||||
itemStyle: { color: '#F65757' } // 红色：未处理
|
||||
},
|
||||
{
|
||||
value: processingAlarmToday,
|
||||
name: '未处理报警',
|
||||
itemStyle: { color: '#F65757' } // 红色：未处理
|
||||
}
|
||||
value: alarmsTotalToday,
|
||||
name: '已处理',
|
||||
itemStyle: { color: '#07BE75' } // 绿色：已处理
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -449,7 +469,8 @@ const getData = async () => {
|
||||
// 设备类型
|
||||
apiTypeAll.deviceTypeAll().then(res => {
|
||||
if (res.code == 200) {
|
||||
deviceTypeOptions.value = res.data
|
||||
const originalData = Array.isArray(res.data) ? res.data : [];
|
||||
deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: ''}].concat(originalData);
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
@ -489,14 +510,13 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
padding:0px 20px 10px 20px;
|
||||
padding: 0px 20px 10px 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
|
||||
// 数据总览卡片样式
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -506,32 +526,35 @@ onUnmounted(() => {
|
||||
.data_green,
|
||||
.data_orgine,
|
||||
.data_red {
|
||||
width: 280px;
|
||||
height: 110px;
|
||||
width:23%;
|
||||
height: 135px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background-size: 100% 100%; // 确保背景图充满容器
|
||||
}
|
||||
|
||||
.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: 20px;
|
||||
padding-top:30px;
|
||||
font-size: 18px;
|
||||
|
||||
span {
|
||||
@ -550,7 +573,7 @@ onUnmounted(() => {
|
||||
// 设备分类/快捷操作卡片样式
|
||||
.content-row {
|
||||
background-color: #fff;
|
||||
height: 240px;
|
||||
height: 215px;
|
||||
border-radius: 10px;
|
||||
padding: 15px 25px;
|
||||
margin-bottom: 20px;
|
||||
@ -577,16 +600,16 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.progress-name {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-top: 15px;
|
||||
|
||||
.quick-img {
|
||||
width: 80px;
|
||||
@ -733,5 +756,91 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 新增媒体查询，处理更小屏幕尺寸
|
||||
@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>
|
||||
Reference in New Issue
Block a user