数据异常处理
This commit is contained in:
@ -156,7 +156,7 @@ def create_app():
|
|||||||
func=auto_monitor_job,
|
func=auto_monitor_job,
|
||||||
args=[app],
|
args=[app],
|
||||||
trigger='cron',
|
trigger='cron',
|
||||||
hour=10,
|
hour=12,
|
||||||
minute=0
|
minute=0
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -18,7 +18,131 @@ api_bp = Blueprint('api', __name__, url_prefix='/api')
|
|||||||
|
|
||||||
|
|
||||||
# =======================
|
# =======================
|
||||||
# 0. 认证接口
|
# 0. 核心算法:数据质量分析 (含夜间免打扰)
|
||||||
|
# =======================
|
||||||
|
def check_data_quality(content_data, source_type, data_time_str=None):
|
||||||
|
"""
|
||||||
|
在后端快速分析数据质量
|
||||||
|
:param content_data: 已解析的 JSON 对象 (Dict 或 String)
|
||||||
|
:param source_type: 设备类型源字符串 (区分 106 或 82)
|
||||||
|
:param data_time_str: 数据生成时间字符串 (用于判断是否为夜晚)
|
||||||
|
:return: 'ok' | 'warning' | 'error'
|
||||||
|
"""
|
||||||
|
if not content_data:
|
||||||
|
return 'ok'
|
||||||
|
|
||||||
|
# --- [夜间免打扰逻辑] ---
|
||||||
|
# 物理规律:晚上没有太阳,光谱仪数值低是正常的,不应报错。
|
||||||
|
# 逻辑:只有在 08:00 - 17:00 之间才检查数值。
|
||||||
|
if data_time_str and data_time_str != 'N/A':
|
||||||
|
try:
|
||||||
|
# 1. 格式清洗
|
||||||
|
clean_time = str(data_time_str).replace('_', '-')
|
||||||
|
|
||||||
|
# 2. 尝试解析时间
|
||||||
|
dt = None
|
||||||
|
try:
|
||||||
|
dt = datetime.strptime(clean_time, "%Y-%m-%d %H:%M:%S")
|
||||||
|
except ValueError:
|
||||||
|
try:
|
||||||
|
dt = datetime.strptime(clean_time, "%Y-%m-%d %H:%M")
|
||||||
|
except ValueError:
|
||||||
|
pass
|
||||||
|
|
||||||
|
# 3. 如果解析成功,判断小时数
|
||||||
|
if dt:
|
||||||
|
start_hour = 8 # 早上 8 点
|
||||||
|
end_hour = 17 # 下午 5 点
|
||||||
|
|
||||||
|
# 如果当前时间 小于8点 或者 大于等于17点,视为夜晚,直接返回正常
|
||||||
|
if dt.hour < start_hour or dt.hour >= end_hour:
|
||||||
|
return 'ok'
|
||||||
|
|
||||||
|
except Exception:
|
||||||
|
pass
|
||||||
|
# ---------------------------
|
||||||
|
|
||||||
|
status = 'ok'
|
||||||
|
source_str = str(source_type)
|
||||||
|
|
||||||
|
# === 106 设备逻辑 (CSV 格式) ===
|
||||||
|
if '106' in source_str:
|
||||||
|
try:
|
||||||
|
text_content = ""
|
||||||
|
if isinstance(content_data, dict):
|
||||||
|
text_content = content_data.get('content', str(content_data))
|
||||||
|
else:
|
||||||
|
text_content = str(content_data)
|
||||||
|
|
||||||
|
lines = text_content.split('\n')
|
||||||
|
for line in lines:
|
||||||
|
if 'OSIFBeta' not in line: continue
|
||||||
|
|
||||||
|
parts = line.split(',')
|
||||||
|
if len(parts) < 10: continue
|
||||||
|
|
||||||
|
try:
|
||||||
|
int_time = int(parts[2])
|
||||||
|
except:
|
||||||
|
continue
|
||||||
|
|
||||||
|
# 只有积分时间饱和 (>= 66534) 才检查数值
|
||||||
|
if int_time >= 66534:
|
||||||
|
data_points = []
|
||||||
|
for p in parts[3:]:
|
||||||
|
try:
|
||||||
|
data_points.append(float(p))
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
|
||||||
|
if not data_points: continue
|
||||||
|
|
||||||
|
# 规则1:红色报错 (存在 < 100 的点)
|
||||||
|
for val in data_points:
|
||||||
|
if val < 100:
|
||||||
|
return 'error'
|
||||||
|
|
||||||
|
# 规则2:黄色警告 (连续 5 个点在 100-500 之间)
|
||||||
|
consecutive_warning = 0
|
||||||
|
for val in data_points:
|
||||||
|
if 100 <= val <= 500:
|
||||||
|
consecutive_warning += 1
|
||||||
|
if consecutive_warning >= 5:
|
||||||
|
status = 'warning'
|
||||||
|
else:
|
||||||
|
consecutive_warning = 0
|
||||||
|
return status
|
||||||
|
|
||||||
|
except Exception:
|
||||||
|
return 'ok'
|
||||||
|
|
||||||
|
# === 82 设备逻辑 (JSON 格式) ===
|
||||||
|
else:
|
||||||
|
try:
|
||||||
|
if not isinstance(content_data, dict):
|
||||||
|
return 'ok'
|
||||||
|
specs = content_data.get('downspec', [])
|
||||||
|
if not specs:
|
||||||
|
specs = content_data.get('upspec', [])
|
||||||
|
|
||||||
|
if not specs: return 'ok'
|
||||||
|
|
||||||
|
consecutive_low = 0
|
||||||
|
for val in specs:
|
||||||
|
if not isinstance(val, (int, float)): continue
|
||||||
|
if val < 500:
|
||||||
|
consecutive_low += 1
|
||||||
|
if consecutive_low >= 2:
|
||||||
|
return 'error'
|
||||||
|
else:
|
||||||
|
consecutive_low = 0
|
||||||
|
return 'ok'
|
||||||
|
except Exception:
|
||||||
|
return 'ok'
|
||||||
|
|
||||||
|
|
||||||
|
# =======================
|
||||||
|
# 1. 认证接口
|
||||||
# =======================
|
# =======================
|
||||||
|
|
||||||
@api_bp.route('/login', methods=['POST'])
|
@api_bp.route('/login', methods=['POST'])
|
||||||
@ -39,16 +163,32 @@ def login():
|
|||||||
|
|
||||||
|
|
||||||
# =======================
|
# =======================
|
||||||
# 1. 设备概览与详情接口
|
# 2. 设备概览与详情接口
|
||||||
# =======================
|
# =======================
|
||||||
|
|
||||||
@api_bp.route('/devices_overview', methods=['GET'])
|
@api_bp.route('/devices_overview', methods=['GET'])
|
||||||
def devices_overview():
|
def devices_overview():
|
||||||
try:
|
try:
|
||||||
devices = Device.query.all()
|
devices = Device.query.all()
|
||||||
data_list = [d.to_dict() for d in devices]
|
data_list = []
|
||||||
|
|
||||||
|
for d in devices:
|
||||||
|
item = d.to_dict()
|
||||||
|
parsed_content = None
|
||||||
|
if d.json_data:
|
||||||
|
try:
|
||||||
|
parsed_content = json.loads(d.json_data)
|
||||||
|
except:
|
||||||
|
parsed_content = None
|
||||||
|
|
||||||
|
# 传入 d.latest_time 以启用夜间判断
|
||||||
|
quality_status = check_data_quality(parsed_content, d.source, d.latest_time)
|
||||||
|
item['data_quality'] = quality_status
|
||||||
|
data_list.append(item)
|
||||||
|
|
||||||
return jsonify({'code': 200, 'data': data_list})
|
return jsonify({'code': 200, 'data': data_list})
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
|
print(f"Overview Error: {e}")
|
||||||
return jsonify({'code': 500, 'message': str(e)})
|
return jsonify({'code': 500, 'message': str(e)})
|
||||||
|
|
||||||
|
|
||||||
@ -86,7 +226,7 @@ def device_data_by_date():
|
|||||||
|
|
||||||
|
|
||||||
# =======================
|
# =======================
|
||||||
# 2. 维修日志接口
|
# 3. 维修日志接口
|
||||||
# =======================
|
# =======================
|
||||||
|
|
||||||
@api_bp.route('/logs/list', methods=['GET'])
|
@api_bp.route('/logs/list', methods=['GET'])
|
||||||
@ -166,7 +306,7 @@ def delete_log():
|
|||||||
|
|
||||||
|
|
||||||
# =======================
|
# =======================
|
||||||
# 3. 辅助与控制接口 (核心修复逻辑)
|
# 4. 辅助与控制接口
|
||||||
# =======================
|
# =======================
|
||||||
|
|
||||||
def calculate_offset(latest_time_str):
|
def calculate_offset(latest_time_str):
|
||||||
@ -201,7 +341,6 @@ def run_monitor():
|
|||||||
source = item.get('source', '')
|
source = item.get('source', '')
|
||||||
target_time = item.get('target_time')
|
target_time = item.get('target_time')
|
||||||
|
|
||||||
# 处理 106 路径时间
|
|
||||||
if '106' in str(source):
|
if '106' in str(source):
|
||||||
try:
|
try:
|
||||||
path_str = d_raw.get('path', '')
|
path_str = d_raw.get('path', '')
|
||||||
@ -213,15 +352,12 @@ def run_monitor():
|
|||||||
|
|
||||||
json_str = json.dumps(d_raw, ensure_ascii=False) if isinstance(d_raw, (dict, list)) else str(d_raw)
|
json_str = json.dumps(d_raw, ensure_ascii=False) if isinstance(d_raw, (dict, list)) else str(d_raw)
|
||||||
|
|
||||||
# --- 关键修改:先查询,后更新 ---
|
|
||||||
device = Device.query.filter_by(name=d_name).first()
|
device = Device.query.filter_by(name=d_name).first()
|
||||||
if not device:
|
if not device:
|
||||||
# 只有新设备才初始化静态字段
|
|
||||||
device = Device(name=d_name, source=source, install_site="")
|
device = Device(name=d_name, source=source, install_site="")
|
||||||
db.session.add(device)
|
db.session.add(device)
|
||||||
db.session.flush() # 获取 ID 供 History 使用
|
db.session.flush()
|
||||||
|
|
||||||
# 仅更新动态抓取的字段,保留手动填写的 install_site, is_maintaining, is_hidden
|
|
||||||
device.status = item.get('status')
|
device.status = item.get('status')
|
||||||
device.current_value = item.get('value')
|
device.current_value = item.get('value')
|
||||||
device.latest_time = target_time
|
device.latest_time = target_time
|
||||||
@ -277,3 +413,47 @@ def toggle_hidden():
|
|||||||
db.session.commit()
|
db.session.commit()
|
||||||
return jsonify({'code': 200})
|
return jsonify({'code': 200})
|
||||||
return jsonify({'code': 404}), 404
|
return jsonify({'code': 404}), 404
|
||||||
|
|
||||||
|
|
||||||
|
# =======================
|
||||||
|
# 5. 手动添加设备接口 (新增)
|
||||||
|
# =======================
|
||||||
|
@api_bp.route('/add_device', methods=['POST'])
|
||||||
|
def add_device():
|
||||||
|
data = request.get_json()
|
||||||
|
name = data.get('name')
|
||||||
|
site = data.get('site', '')
|
||||||
|
|
||||||
|
if not name:
|
||||||
|
return jsonify({'code': 400, 'message': '必须填写设备名称'}), 400
|
||||||
|
|
||||||
|
# 1. 检查是否已存在
|
||||||
|
existing = Device.query.filter_by(name=name).first()
|
||||||
|
if existing:
|
||||||
|
return jsonify({'code': 400, 'message': f'设备 {name} 已存在,无需重复添加'}), 400
|
||||||
|
|
||||||
|
try:
|
||||||
|
# 2. 创建新设备记录
|
||||||
|
# source 标记为 'manual',方便以后区分
|
||||||
|
# status 默认为 'offline' (离线)
|
||||||
|
# latest_time 默认为 'N/A'
|
||||||
|
new_device = Device(
|
||||||
|
name=name,
|
||||||
|
install_site=site,
|
||||||
|
source='manual',
|
||||||
|
status='offline',
|
||||||
|
current_value='0',
|
||||||
|
latest_time='N/A',
|
||||||
|
check_time=datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
|
||||||
|
json_data='{}',
|
||||||
|
is_hidden=0,
|
||||||
|
is_maintaining=0
|
||||||
|
)
|
||||||
|
|
||||||
|
db.session.add(new_device)
|
||||||
|
db.session.commit()
|
||||||
|
|
||||||
|
return jsonify({'code': 200, 'message': '设备添加成功'})
|
||||||
|
except Exception as e:
|
||||||
|
db.session.rollback()
|
||||||
|
return jsonify({'code': 500, 'message': str(e)})
|
||||||
@ -13,37 +13,35 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<el-button type="info" plain icon="Document" @click="openLogCenter(null)">
|
<el-button type="primary" plain icon="Plus" @click="showAddDialog = true">新增</el-button>
|
||||||
日志
|
|
||||||
</el-button>
|
<el-button type="info" plain icon="Document" @click="openLogCenter(null)">日志</el-button>
|
||||||
<el-button type="warning" plain icon="RefreshRight" :loading="runningTask" @click="runManualMonitor">
|
<el-button type="warning" plain icon="RefreshRight" :loading="runningTask" @click="runManualMonitor">检测</el-button>
|
||||||
检测
|
|
||||||
</el-button>
|
|
||||||
<el-button circle icon="Refresh" :loading="loading" @click="fetchData" />
|
<el-button circle icon="Refresh" :loading="loading" @click="fetchData" />
|
||||||
|
|
||||||
<div class="divider-mobile"></div>
|
<div class="divider-mobile"></div>
|
||||||
|
<el-button type="danger" plain icon="SwitchButton" @click="handleLogout">退出</el-button>
|
||||||
<el-button type="danger" plain icon="SwitchButton" @click="handleLogout">
|
|
||||||
退出
|
|
||||||
</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="status-summary">
|
<div class="status-summary">
|
||||||
<el-tag color="#409EFF" effect="dark" class="legend-tag">修</el-tag>
|
<el-tag color="#409EFF" effect="dark" class="legend-tag">修</el-tag>
|
||||||
<el-tag color="#F56C6C" effect="dark" class="legend-tag">离线/>7天</el-tag>
|
<el-tag color="#F56C6C" effect="dark" class="legend-tag">离线/严重滞后</el-tag>
|
||||||
<el-tag color="#E6A23C" effect="dark" class="legend-tag">滞后1-7天</el-tag>
|
<el-tag color="#E6A23C" effect="dark" class="legend-tag">滞后 (>24h)</el-tag>
|
||||||
<el-tag color="#FAC858" effect="dark" class="legend-tag" style="color: #333">滞后24h</el-tag>
|
<el-tag color="#FAC858" effect="dark" class="legend-tag" style="color: #333">数据异常/昨日</el-tag>
|
||||||
<el-tag color="#67C23A" effect="dark" class="legend-tag">正常</el-tag>
|
<el-tag color="#67C23A" effect="dark" class="legend-tag">正常</el-tag>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<el-radio-group v-model="filters.status" @change="fetchData" size="default">
|
<el-radio-group v-model="filters.status" size="default">
|
||||||
<el-radio-button label="all">全部</el-radio-button>
|
<el-radio-button label="all">全部({{ summary.totalCount }})</el-radio-button>
|
||||||
|
|
||||||
<el-radio-button label="abnormal" class="red-radio">
|
<el-radio-button label="abnormal" class="red-radio">
|
||||||
异常({{ summary.errorCount + summary.warningCount }})
|
状态异常({{ summary.errorCount + summary.warningCount }})
|
||||||
|
</el-radio-button>
|
||||||
|
<el-radio-button label="data_error" class="yellow-radio">
|
||||||
|
数据异常({{ summary.dataErrorCount }})
|
||||||
</el-radio-button>
|
</el-radio-button>
|
||||||
<el-radio-button label="hidden" class="gray-radio">
|
<el-radio-button label="hidden" class="gray-radio">
|
||||||
回收({{ summary.hiddenCount }})
|
回收({{ summary.hiddenCount }})
|
||||||
@ -118,16 +116,48 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column label="数据时效" width="220" prop="sortHours" sortable>
|
<el-table-column label="数据时效与质量" width="240" prop="sortHours" sortable>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div style="font-size: 13px;"><el-icon><Clock /></el-icon> {{ row.latest_time || '--' }}</div>
|
<div style="font-size: 13px; display:flex; align-items:center; gap:5px;">
|
||||||
<div v-if="!row.is_maintaining && !row.is_hidden">
|
<el-icon><Clock /></el-icon> {{ row.latest_time || '--' }}
|
||||||
<div v-if="row.status === 'offline' || row.status === '已离线'" class="status-text error-text">⚠️ 设备已离线</div>
|
|
||||||
<div v-else-if="row.diffDays > 7" class="status-text error-text">⚠️ 严重滞后 {{ Math.floor(row.diffDays) }} 天</div>
|
|
||||||
<div v-else-if="row.diffHours > 24" class="status-text warning-text">⚠️ 滞后 {{ Math.floor(row.diffDays) }} 天</div>
|
|
||||||
<div v-else-if="!row.isToday" class="status-text slight-warning-text">⚠️ 昨日数据</div>
|
|
||||||
<div v-else class="status-text success-text">✅ 数据最新</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!row.is_maintaining && !row.is_hidden">
|
||||||
|
|
||||||
|
<div v-if="row.status === 'offline' || row.status === '已离线'" class="status-text error-text">
|
||||||
|
⚠️ 设备已离线
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="row.diffDays > 7" class="status-text error-text">
|
||||||
|
⚠️ 严重滞后 {{ Math.floor(row.diffDays) }} 天
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="row.diffHours > 24" class="status-text warning-text">
|
||||||
|
⚠️ 滞后 {{ Math.floor(row.diffDays) }} 天
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="!row.isToday" class="status-text slight-warning-text">
|
||||||
|
⚠️ 昨日数据
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="status-text success-text">
|
||||||
|
✅ 时效最新
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="row.status !== 'offline' && row.status !== '已离线'" style="margin-top: 4px;">
|
||||||
|
<el-tag v-if="row.data_quality === 'error'" type="danger" size="small" effect="dark">
|
||||||
|
<el-icon><Warning /></el-icon> 数据严重异常
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else-if="row.data_quality === 'warning'" type="warning" size="small" effect="dark">
|
||||||
|
<el-icon><WarningFilled /></el-icon> 数值警告
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else type="success" size="small" effect="plain">
|
||||||
|
数值正常
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-else-if="row.is_maintaining" class="status-text maintenance-text">🛠️ 维护中</div>
|
<div v-else-if="row.is_maintaining" class="status-text maintenance-text">🛠️ 维护中</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@ -162,6 +192,26 @@
|
|||||||
|
|
||||||
<DataMonitor ref="dataMonitorRef" />
|
<DataMonitor ref="dataMonitorRef" />
|
||||||
<MaintenanceLogs ref="maintenanceLogsRef" />
|
<MaintenanceLogs ref="maintenanceLogsRef" />
|
||||||
|
|
||||||
|
<el-dialog v-model="showAddDialog" title="手动添加设备" width="400px" align-center>
|
||||||
|
<el-form :model="newDeviceForm" label-width="80px">
|
||||||
|
<el-form-item label="设备名称">
|
||||||
|
<el-input v-model="newDeviceForm.name" placeholder="请输入唯一设备名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="安装地点">
|
||||||
|
<el-input v-model="newDeviceForm.site" placeholder="可选填" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="showAddDialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="isAdding" @click="handleAddDeviceSubmit">
|
||||||
|
确认添加
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -170,9 +220,8 @@ import { ref, reactive, computed, onMounted, nextTick, onBeforeUnmount } from 'v
|
|||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton } from '@element-plus/icons-vue'
|
import { Clock, DataLine, Document, Refresh, EditPen, Search, Edit, RefreshRight, Delete, RefreshLeft, SwitchButton, Warning, WarningFilled, Plus } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
// 引入子组件
|
|
||||||
import DataMonitor from './DataMonitor.vue'
|
import DataMonitor from './DataMonitor.vue'
|
||||||
import MaintenanceLogs from './MaintenanceLogs.vue'
|
import MaintenanceLogs from './MaintenanceLogs.vue'
|
||||||
|
|
||||||
@ -184,37 +233,35 @@ const lastCheckTime = ref('')
|
|||||||
const windowHeight = ref(window.innerHeight)
|
const windowHeight = ref(window.innerHeight)
|
||||||
const windowWidth = ref(window.innerWidth)
|
const windowWidth = ref(window.innerWidth)
|
||||||
|
|
||||||
// 计算表格高度:手机端预留更多空间给折行的头部
|
|
||||||
const tableHeight = computed(() => {
|
const tableHeight = computed(() => {
|
||||||
const isMobile = windowWidth.value < 768
|
const isMobile = windowWidth.value < 768
|
||||||
// 手机端头部元素堆叠,需要减去更多的高度
|
|
||||||
const offset = isMobile ? 380 : 250
|
const offset = isMobile ? 380 : 250
|
||||||
return windowHeight.value - offset
|
return windowHeight.value - offset
|
||||||
})
|
})
|
||||||
|
|
||||||
const filters = reactive({ status: 'all', keyword: '' })
|
const filters = reactive({ status: 'all', keyword: '' })
|
||||||
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
|
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
|
||||||
|
|
||||||
const dataMonitorRef = ref(null)
|
const dataMonitorRef = ref(null)
|
||||||
const maintenanceLogsRef = ref(null)
|
const maintenanceLogsRef = ref(null)
|
||||||
|
|
||||||
|
// === 添加设备相关变量 ===
|
||||||
|
const showAddDialog = ref(false)
|
||||||
|
const isAdding = ref(false)
|
||||||
|
const newDeviceForm = reactive({ name: '', site: '' })
|
||||||
|
|
||||||
|
// === 统计逻辑 (修改:增加了 totalCount) ===
|
||||||
const summary = computed(() => {
|
const summary = computed(() => {
|
||||||
const activeDevices = rawData.value.filter(r => !r.is_hidden)
|
const active = rawData.value.filter(r => !r.is_hidden)
|
||||||
const errors = activeDevices.filter(r => r.statusType === 'error').length
|
return {
|
||||||
const warnings = activeDevices.filter(r => r.statusType === 'warning').length
|
totalCount: active.length, // [新增] 统计所有非隐藏设备数量
|
||||||
const hidden = rawData.value.filter(r => r.is_hidden).length
|
errorCount: active.filter(r => r.statusType === 'error').length,
|
||||||
return { errorCount: errors, warningCount: warnings, hiddenCount: hidden }
|
warningCount: active.filter(r => r.statusType === 'warning').length,
|
||||||
|
hiddenCount: rawData.value.filter(r => r.is_hidden).length,
|
||||||
|
dataErrorCount: active.filter(r => r.data_quality === 'error' || r.data_quality === 'warning').length
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleLogout = () => {
|
// === 数据获取逻辑 ===
|
||||||
ElMessageBox.confirm('确定退出系统吗?', '提示', { type: 'warning' }).then(() => {
|
|
||||||
localStorage.removeItem('isLoggedIn')
|
|
||||||
localStorage.removeItem('token')
|
|
||||||
router.push('/')
|
|
||||||
ElMessage.success('已安全退出')
|
|
||||||
}).catch(() => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
@ -222,54 +269,109 @@ const fetchData = async () => {
|
|||||||
const backendList = res.data.data || res.data
|
const backendList = res.data.data || res.data
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
|
|
||||||
let processedData = backendList.map(item => {
|
rawData.value = backendList.map(item => {
|
||||||
const isHidden = item.is_hidden === true || item.is_hidden === 1
|
const isHidden = item.is_hidden === true || item.is_hidden === 1
|
||||||
let diffDays = 0, diffHours = 0, isToday = false, validTime = false
|
let diffDays = 0, diffHours = 0, isToday = false, validTime = false
|
||||||
|
|
||||||
|
// === 1. 时间计算逻辑 ===
|
||||||
if (item.latest_time && item.latest_time !== 'N/A') {
|
if (item.latest_time && item.latest_time !== 'N/A') {
|
||||||
const cleanDateStr = item.latest_time.toString().replace(/_/g, '-')
|
const cleanDateStr = item.latest_time.toString().replace(/_/g, '-')
|
||||||
const d = new Date(cleanDateStr)
|
const d = new Date(cleanDateStr)
|
||||||
if (!isNaN(d.getTime())) {
|
if (!isNaN(d.getTime())) {
|
||||||
validTime = true
|
validTime = true
|
||||||
const diffTime = now - d
|
|
||||||
const safeDiff = diffTime > 0 ? diffTime : 0
|
|
||||||
diffHours = safeDiff / (1000 * 60 * 60)
|
|
||||||
diffDays = safeDiff / (1000 * 60 * 60 * 24)
|
|
||||||
isToday = d.toDateString() === now.toDateString()
|
isToday = d.toDateString() === now.toDateString()
|
||||||
|
const diff = now - d
|
||||||
|
diffHours = (diff > 0 ? diff : 0) / (1000 * 3600)
|
||||||
|
diffDays = diffHours / 24
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let sortHours = diffHours;
|
// === 2. 排序权重计算 ===
|
||||||
if (item.is_maintaining) sortHours = Number.MAX_SAFE_INTEGER;
|
let sortHours = diffHours
|
||||||
else if (item.status === 'offline' || item.status === '已离线') sortHours = 1000000000;
|
if (item.is_maintaining) sortHours = Number.MAX_SAFE_INTEGER
|
||||||
else if (!validTime) sortHours = 500000000;
|
else if (item.status === 'offline' || item.status === '已离线') sortHours = 1000000000
|
||||||
|
else if (!validTime) sortHours = 500000000
|
||||||
|
|
||||||
|
// === 3. 状态分类逻辑 ===
|
||||||
let statusColor = '#67C23A', statusLabel = '正常', statusType = 'normal', statusLabelColor = '#fff'
|
let statusColor = '#67C23A', statusLabel = '正常', statusType = 'normal', statusLabelColor = '#fff'
|
||||||
|
|
||||||
if (item.is_maintaining) {
|
if (item.is_maintaining) {
|
||||||
statusColor = '#409EFF'; statusLabel = '维修中'; statusType = 'maintenance';
|
statusColor = '#409EFF'; statusLabel = '维修中'; statusType = 'maintenance';
|
||||||
} else if ((item.status === 'offline' || item.status === '已离线') || (!validTime || diffDays > 7)) {
|
} else if ((item.status === 'offline' || item.status === '已离线')) {
|
||||||
statusLabel = '离线/滞后'; statusColor = '#F56C6C'; statusType = 'error';
|
statusLabel = '离线'; statusColor = '#F56C6C'; statusType = 'error';
|
||||||
|
} else if (!validTime || diffDays > 7) {
|
||||||
|
statusLabel = '严重滞后'; statusColor = '#F56C6C'; statusType = 'error';
|
||||||
} else if (diffHours > 24) {
|
} else if (diffHours > 24) {
|
||||||
statusColor = '#E6A23C'; statusLabel = '数据滞后'; statusType = 'warning';
|
statusLabel = '滞后'; statusColor = '#E6A23C'; statusType = 'warning';
|
||||||
} else if (!isToday) {
|
} else if (!isToday) {
|
||||||
statusColor = '#FAC858'; statusLabel = '昨日数据'; statusType = 'slight-warning'; statusLabelColor = '#333';
|
statusLabel = '昨日数据'; statusColor = '#FAC858'; statusType = 'slight-warning'; statusLabelColor = '#333';
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...item, is_hidden: isHidden, diffDays, diffHours, sortHours, isToday,
|
...item,
|
||||||
statusColor, statusLabel, statusType, statusLabelColor, isEditingSite: false, tempSite: ''
|
is_hidden: isHidden,
|
||||||
|
diffDays, diffHours, sortHours, isToday,
|
||||||
|
statusColor, statusLabel, statusType, statusLabelColor,
|
||||||
|
isEditingSite: false, tempSite: '',
|
||||||
|
data_quality: item.data_quality || 'ok'
|
||||||
}
|
}
|
||||||
})
|
}).sort((a, b) => b.sortHours - a.sortHours)
|
||||||
processedData.sort((a, b) => b.sortHours - a.sortHours)
|
|
||||||
rawData.value = processedData
|
|
||||||
lastCheckTime.value = new Date().toLocaleString()
|
lastCheckTime.value = new Date().toLocaleString()
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
ElMessage.error('获取数据失败')
|
ElMessage.error('获取数据失败')
|
||||||
|
console.error(e)
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// === 筛选逻辑 ===
|
||||||
|
const filteredData = computed(() => {
|
||||||
|
return rawData.value.filter(item => {
|
||||||
|
if (filters.status === 'hidden') return item.is_hidden
|
||||||
|
if (item.is_hidden) return false
|
||||||
|
|
||||||
|
if (filters.status === 'abnormal') {
|
||||||
|
return (item.statusType === 'error' || item.statusType === 'warning' || item.statusType === 'slight-warning')
|
||||||
|
}
|
||||||
|
if (filters.status === 'data_error') {
|
||||||
|
return (item.data_quality === 'error' || item.data_quality === 'warning')
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}).filter(item => !filters.keyword || item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
|
||||||
|
})
|
||||||
|
|
||||||
|
// === 提交新设备逻辑 ===
|
||||||
|
const handleAddDeviceSubmit = async () => {
|
||||||
|
if (!newDeviceForm.name) {
|
||||||
|
ElMessage.warning('请填写设备名称')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
isAdding.value = true
|
||||||
|
try {
|
||||||
|
const res = await axios.post(`${API_BASE}/api/add_device`, {
|
||||||
|
name: newDeviceForm.name,
|
||||||
|
site: newDeviceForm.site
|
||||||
|
})
|
||||||
|
ElMessage.success(res.data.message)
|
||||||
|
showAddDialog.value = false
|
||||||
|
|
||||||
|
// 清空表单
|
||||||
|
newDeviceForm.name = ''
|
||||||
|
newDeviceForm.site = ''
|
||||||
|
|
||||||
|
// 刷新列表
|
||||||
|
fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
const msg = error.response?.data?.message || '添加失败'
|
||||||
|
ElMessage.error(msg)
|
||||||
|
} finally {
|
||||||
|
isAdding.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 辅助功能函数 ===
|
||||||
const handleDeviceClick = (row) => { if (!row.is_hidden && dataMonitorRef.value) dataMonitorRef.value.open(row) }
|
const handleDeviceClick = (row) => { if (!row.is_hidden && dataMonitorRef.value) dataMonitorRef.value.open(row) }
|
||||||
const openLogCenter = (row) => { if (maintenanceLogsRef.value) maintenanceLogsRef.value.open(row ? { deviceName: row.name } : null) }
|
const openLogCenter = (row) => { if (maintenanceLogsRef.value) maintenanceLogsRef.value.open(row ? { deviceName: row.name } : null) }
|
||||||
const runManualMonitor = async () => {
|
const runManualMonitor = async () => {
|
||||||
@ -281,152 +383,100 @@ const runManualMonitor = async () => {
|
|||||||
} catch (e) { ElMessage.warning('请求频繁') }
|
} catch (e) { ElMessage.warning('请求频繁') }
|
||||||
finally { setTimeout(() => { runningTask.value = false }, 1000) }
|
finally { setTimeout(() => { runningTask.value = false }, 1000) }
|
||||||
}
|
}
|
||||||
|
|
||||||
const filteredData = computed(() => {
|
|
||||||
return rawData.value.filter(item => {
|
|
||||||
if (filters.status === 'hidden') return item.is_hidden
|
|
||||||
if (item.is_hidden) return false
|
|
||||||
if (filters.status === 'abnormal') return (item.statusType === 'error' || item.statusType === 'warning' || item.statusType === 'slight-warning')
|
|
||||||
return true
|
|
||||||
}).filter(item => !filters.keyword || item.name.toLowerCase().includes(filters.keyword.toLowerCase()))
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleEditSite = (row) => {
|
const handleEditSite = (row) => {
|
||||||
row.tempSite = row.install_site; row.isEditingSite = true
|
row.tempSite = row.install_site; row.isEditingSite = true
|
||||||
nextTick(() => {
|
nextTick(() => { const inputs = document.querySelectorAll('.site-input-inner input'); if(inputs.length) inputs[inputs.length-1].focus() })
|
||||||
// 兼容性查找 input
|
|
||||||
const inputs = document.querySelectorAll('.site-input-inner input')
|
|
||||||
if (inputs.length > 0) inputs[inputs.length - 1].focus()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveSite = async (row) => {
|
const saveSite = async (row) => {
|
||||||
if (!row.isEditingSite) return
|
if (!row.isEditingSite) return
|
||||||
const oldVal = row.install_site; row.install_site = row.tempSite; row.isEditingSite = false
|
const oldVal = row.install_site; row.install_site = row.tempSite; row.isEditingSite = false
|
||||||
if (oldVal === row.tempSite) return
|
if (oldVal === row.tempSite) return
|
||||||
try {
|
try { await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: row.tempSite }); ElMessage.success('已更新') }
|
||||||
await axios.post(`${API_BASE}/api/update_site`, { name: row.name, site: row.tempSite })
|
catch (e) { row.install_site = oldVal; ElMessage.error('更新失败') }
|
||||||
ElMessage.success('已更新')
|
|
||||||
} catch (e) { row.install_site = oldVal; ElMessage.error('更新失败') }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMaintenanceBeforeChange = (row) => {
|
const handleMaintenanceBeforeChange = (row) => {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const newVal = !row.is_maintaining
|
const newVal = !row.is_maintaining
|
||||||
axios.post(`${API_BASE}/api/toggle_maintenance`, { name: row.name, is_maintaining: newVal })
|
axios.post(`${API_BASE}/api/toggle_maintenance`, { name: row.name, is_maintaining: newVal })
|
||||||
.then(() => { row.is_maintaining = newVal; fetchData(); ElMessage.success(newVal ? '已进入维修模式' : '已恢复'); resolve(true) })
|
.then(() => { row.is_maintaining = newVal; fetchData(); resolve(true) })
|
||||||
.catch(() => { ElMessage.error('操作失败'); resolve(false) })
|
.catch(() => { resolve(false) })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const toggleHidden = async (row, val) => {
|
||||||
const toggleHidden = async (row, targetState) => {
|
try { await axios.post(`${API_BASE}/api/toggle_hidden`, { name: row.name, is_hidden: val }); row.is_hidden = val; fetchData(); }
|
||||||
try {
|
catch (e) { ElMessage.error('操作失败') }
|
||||||
await axios.post(`${API_BASE}/api/toggle_hidden`, { name: row.name, is_hidden: targetState })
|
}
|
||||||
row.is_hidden = targetState; fetchData(); ElMessage.success(targetState ? '已隐藏' : '已恢复')
|
const handleLogout = () => {
|
||||||
} catch (e) { ElMessage.error('操作失败') }
|
ElMessageBox.confirm('确定退出?', '提示', { type: 'warning' }).then(() => { localStorage.removeItem('token'); router.push('/'); }).catch(() => {})
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
|
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
|
||||||
|
|
||||||
|
// 行样式计算
|
||||||
const tableRowClassName = ({ row }) => {
|
const tableRowClassName = ({ row }) => {
|
||||||
if (row.is_hidden) return 'hidden-row'
|
if (row.is_hidden) return 'hidden-row'
|
||||||
if (row.statusType === 'maintenance') return 'maintenance-row'
|
if (row.data_quality === 'error') return 'data-error-row'
|
||||||
if (row.statusType === 'error') return 'error-row'
|
if (row.statusType === 'error') return 'error-row'
|
||||||
|
if (row.data_quality === 'warning') return 'data-warning-row'
|
||||||
if (row.statusType === 'warning') return 'warning-row'
|
if (row.statusType === 'warning') return 'warning-row'
|
||||||
|
if (row.statusType === 'maintenance') return 'maintenance-row'
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
const updateDimensions = () => { windowHeight.value = window.innerHeight; windowWidth.value = window.innerWidth }
|
||||||
const updateDimensions = () => {
|
onMounted(() => { fetchData(); window.addEventListener('resize', updateDimensions) })
|
||||||
windowHeight.value = window.innerHeight
|
|
||||||
windowWidth.value = window.innerWidth
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
fetchData()
|
|
||||||
window.addEventListener('resize', updateDimensions)
|
|
||||||
})
|
|
||||||
onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
|
onBeforeUnmount(() => window.removeEventListener('resize', updateDimensions))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.dashboard-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
|
.dashboard-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
|
||||||
.main-card { border-radius: 8px; overflow: visible; } /* overflow visible 确保下拉框不被遮挡 */
|
.main-card { border-radius: 8px; }
|
||||||
|
.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
|
||||||
/* 头部布局:默认 flex,手机端会自动调整 */
|
.sys-title { font-size: 20px; font-weight: 700; color: #303133; margin: 0; }
|
||||||
.header-row {
|
.left-panel { display: flex; align-items: center; gap: 10px; }
|
||||||
display: flex;
|
.header-actions { display: flex; gap: 8px; align-items: center; }
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.sys-title { margin: 0; font-size: 20px; color: #303133; font-weight: 700; white-space: nowrap; }
|
|
||||||
.left-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
||||||
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
||||||
|
|
||||||
/* 状态标签区 */
|
|
||||||
.status-summary { margin-bottom: 15px; display: flex; gap: 5px; flex-wrap: wrap; }
|
.status-summary { margin-bottom: 15px; display: flex; gap: 5px; flex-wrap: wrap; }
|
||||||
.legend-tag { font-weight: bold; border: none; font-size: 12px; }
|
.legend-tag { font-weight: bold; border: none; font-size: 12px; }
|
||||||
|
.toolbar { background: #fff; padding: 10px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #e4e7ed; }
|
||||||
|
.filter-section { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||||
|
.search-input { width: 220px; }
|
||||||
|
|
||||||
/* 工具栏区域 */
|
/* Radio 颜色 */
|
||||||
.toolbar {
|
:deep(.red-radio.is-active .el-radio-button__inner) { background-color: #F56C6C; border-color: #F56C6C; box-shadow: -1px 0 0 0 #F56C6C; }
|
||||||
background: #fff;
|
:deep(.yellow-radio.is-active .el-radio-button__inner) { background-color: #E6A23C; border-color: #E6A23C; box-shadow: -1px 0 0 0 #E6A23C; }
|
||||||
padding: 10px;
|
:deep(.gray-radio.is-active .el-radio-button__inner) { background-color: #909399; border-color: #909399; box-shadow: -1px 0 0 0 #909399; }
|
||||||
border-radius: 6px;
|
:deep(.red-radio .el-radio-button__inner),
|
||||||
margin-bottom: 10px;
|
:deep(.yellow-radio .el-radio-button__inner),
|
||||||
border: 1px solid #e4e7ed;
|
:deep(.gray-radio .el-radio-button__inner) { color: #606266; }
|
||||||
}
|
|
||||||
.filter-section {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap; /* 允许换行 */
|
|
||||||
}
|
|
||||||
.search-input { width: 220px; transition: width 0.3s; }
|
|
||||||
|
|
||||||
/* 表格内元素 */
|
|
||||||
.device-name-wrapper { display: flex; align-items: center; gap: 5px; cursor: pointer; }
|
.device-name-wrapper { display: flex; align-items: center; gap: 5px; cursor: pointer; }
|
||||||
.device-name-wrapper:hover .device-name { color: #409EFF; text-decoration: underline; }
|
|
||||||
.device-name { font-weight: bold; font-size: 14px; color: #303133; }
|
.device-name { font-weight: bold; font-size: 14px; color: #303133; }
|
||||||
|
.device-name-wrapper:hover .device-name { color: #409EFF; text-decoration: underline; }
|
||||||
.text-deleted { text-decoration: line-through; color: #999; }
|
.text-deleted { text-decoration: line-through; color: #999; }
|
||||||
|
|
||||||
.status-text { font-size: 12px; margin-top: 4px; font-weight: bold; }
|
.status-text { font-size: 12px; margin-top: 4px; font-weight: bold; }
|
||||||
.error-text { color: #F56C6C; }
|
.error-text { color: #F56C6C; }
|
||||||
.warning-text { color: #E6A23C; }
|
.warning-text { color: #E6A23C; }
|
||||||
.success-text { color: #67C23A; }
|
.success-text { color: #67C23A; }
|
||||||
|
.slight-warning-text { color: #E6A23C; }
|
||||||
.maintenance-text { color: #409EFF; }
|
.maintenance-text { color: #409EFF; }
|
||||||
|
|
||||||
.display-cell { cursor: pointer; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; }
|
.display-cell { cursor: pointer; padding: 4px 0; display: flex; justify-content: space-between; }
|
||||||
.edit-icon { color: #409EFF; margin-left: 5px; }
|
.edit-icon { color: #409EFF; }
|
||||||
|
|
||||||
/* 颜色行样式 */
|
/* 表格行背景色 */
|
||||||
:deep(.error-row) { background-color: #fef0f0 !important; }
|
:deep(.error-row) { background-color: #fef0f0 !important; }
|
||||||
:deep(.warning-row) { background-color: #fdf6ec !important; }
|
:deep(.warning-row) { background-color: #fdf6ec !important; }
|
||||||
:deep(.maintenance-row) { background-color: #f0f9ff !important; }
|
:deep(.maintenance-row) { background-color: #f0f9ff !important; }
|
||||||
:deep(.hidden-row) { background-color: #f4f4f5 !important; color: #909399; }
|
:deep(.hidden-row) { background-color: #f4f4f5 !important; color: #909399; }
|
||||||
|
:deep(.data-error-row) { background-color: #ffe6e6 !important; }
|
||||||
|
:deep(.data-warning-row) { background-color: #fffbe6 !important; }
|
||||||
|
|
||||||
/* --- 📱 移动端适配专用 CSS --- */
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.dashboard-container { padding: 5px; }
|
.dashboard-container { padding: 5px; }
|
||||||
|
.left-panel, .header-actions { width: 100%; justify-content: space-between; margin-bottom: 5px; }
|
||||||
/* 标题和状态堆叠 */
|
.header-actions .el-button { flex: 1; margin: 0 2px; }
|
||||||
.left-panel { width: 100%; justify-content: space-between; margin-bottom: 5px; }
|
|
||||||
.sys-title { font-size: 18px; }
|
|
||||||
|
|
||||||
/* 按钮组撑满 */
|
|
||||||
.header-actions { width: 100%; justify-content: space-between; }
|
|
||||||
.header-actions .el-button { flex: 1; margin-left: 5px !important; margin-right: 5px !important; }
|
|
||||||
|
|
||||||
/* 分隔符 */
|
|
||||||
.divider-mobile { width: 1px; height: 20px; background: #dcdfe6; margin: 0 5px; }
|
|
||||||
|
|
||||||
/* 搜索框独占一行 */
|
|
||||||
.filter-section { justify-content: space-between; }
|
.filter-section { justify-content: space-between; }
|
||||||
.el-radio-group { width: 100%; display: flex; }
|
.el-radio-group { width: 100%; display: flex; }
|
||||||
.el-radio-button { flex: 1; }
|
.el-radio-button { flex: 1; }
|
||||||
:deep(.el-radio-button__inner) { width: 100%; padding: 8px 0; }
|
|
||||||
|
|
||||||
.search-input { width: 100%; margin-top: 5px; }
|
.search-input { width: 100%; margin-top: 5px; }
|
||||||
|
|
||||||
/* 隐藏非关键按钮文字,节省空间 */
|
|
||||||
.el-button [class*="el-icon"] + span { display: inline-block; }
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user