From 912ff069e014108f5061cff89713061b01222bb6 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 23 九月 2025 10:23:47 +0800
Subject: [PATCH] 设备运行管理
---
src/views/equipmentManagement/operationManagement/index.vue | 940 +++++++++++++++-------------------------------------------
1 files changed, 243 insertions(+), 697 deletions(-)
diff --git a/src/views/equipmentManagement/operationManagement/index.vue b/src/views/equipmentManagement/operationManagement/index.vue
index 40cc3cb..008cc2c 100644
--- a/src/views/equipmentManagement/operationManagement/index.vue
+++ b/src/views/equipmentManagement/operationManagement/index.vue
@@ -1,203 +1,26 @@
<template>
<div class="app-container">
- <!-- 缁熻姒傝鍗＄墖 -->
- <div class="stats-overview">
- <el-row :gutter="20">
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="stats-content">
- <div class="stats-icon running">
- <el-icon><VideoPlay /></el-icon>
- </div>
- <div class="stats-info">
- <div class="stats-value">{{ overviewData.runningDevices }}</div>
- <div class="stats-label">杩愯璁惧</div>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="stats-content">
- <div class="stats-icon stopped">
- <el-icon><VideoPause /></el-icon>
- </div>
- <div class="stats-info">
- <div class="stats-value">{{ overviewData.stoppedDevices }}</div>
- <div class="stats-label">鍋滄満璁惧</div>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="stats-content">
- <div class="stats-icon alarm">
- <el-icon><Warning /></el-icon>
- </div>
- <div class="stats-info">
- <div class="stats-value">{{ overviewData.alarmCount }}</div>
- <div class="stats-label">鎶ヨ鏁伴噺</div>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stats-card">
- <div class="stats-content">
- <div class="stats-icon maintenance">
- <el-icon><Tools /></el-icon>
- </div>
- <div class="stats-info">
- <div class="stats-value">{{ overviewData.maintenanceCount }}</div>
- <div class="stats-label">缁存姢涓�</div>
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
+ <!-- 绛涢�夋潯浠� -->
+ <div class="filter-section">
+ <el-select v-model="deviceFilter" placeholder="璁惧鐘舵�佺瓫閫�" clearable style="width: 200px; margin-right: 10px;">
+ <el-option label="鍏ㄩ儴" value="all" />
+ <el-option label="杩愯涓�" value="start" />
+ <el-option label="鍋滄杩愯" value="stop" />
+ </el-select>
</div>
- <!-- 涓昏鍐呭鍖哄煙 -->
- <el-row :gutter="20">
- <!-- 宸︿晶锛氳澶囧惎鍋滆褰� -->
- <el-col :span="12">
- <el-card class="main-card">
- <template #header>
- <div class="card-header">
- <span>璁惧鍚仠璁板綍</span>
- <el-button type="primary" size="small" @click="refreshDeviceRecords">
- <el-icon><Refresh /></el-icon>
- 鍒锋柊
- </el-button>
- </div>
- </template>
-
- <!-- 璁惧鐘舵�佺瓫閫� -->
- <div class="filter-section">
- <el-radio-group v-model="deviceFilter" @change="filterDeviceRecords">
- <el-radio-button label="all">鍏ㄩ儴</el-radio-button>
- <el-radio-button label="start">鍚姩</el-radio-button>
- <el-radio-button label="stop">鍋滄満</el-radio-button>
- </el-radio-group>
- </div>
-
- <!-- 璁惧璁板綍鍒楄〃 -->
- <div class="device-records">
- <div
- v-for="record in filteredDeviceRecords"
- :key="record.id"
- class="device-record"
- :class="record.type"
- >
- <div class="record-icon">
- <el-icon v-if="record.type === 'start'"><VideoPlay /></el-icon>
- <el-icon v-else><VideoPause /></el-icon>
- </div>
- <div class="record-content">
- <div class="device-name">{{ record.deviceName }}</div>
- <div class="record-time">{{ record.time }}</div>
- <div class="record-status" :class="record.type">
- {{ record.type === 'start' ? '璁惧鍚姩' : '璁惧鍋滄満' }}
- </div>
- </div>
- </div>
- </div>
- </el-card>
- </el-col>
-
- <!-- 鍙充晶锛氳缃紑鍋滃伐淇℃伅 -->
- <el-col :span="12">
- <el-card class="main-card">
- <template #header>
- <div class="card-header">
- <span>瑁呯疆寮�鍋滃伐淇℃伅</span>
- <el-button type="success" size="small" @click="refreshUnitInfo">
- <el-icon><Refresh /></el-icon>
- 鍒锋柊
- </el-button>
- </div>
- </template>
-
- <!-- 瑁呯疆鐘舵�佺瓫閫� -->
- <div class="filter-section">
- <el-radio-group v-model="unitFilter" @change="filterUnitInfo">
- <el-radio-button label="all">鍏ㄩ儴</el-radio-button>
- <el-radio-button label="startup">寮�宸�</el-radio-button>
- <el-radio-button label="shutdown">鍋滃伐</el-radio-button>
- <el-radio-button label="unplanned">闈炶鍒掑仠宸�</el-radio-button>
- </el-radio-group>
- </div>
-
- <!-- 瑁呯疆淇℃伅鍒楄〃 -->
- <div class="unit-info">
- <div
- v-for="unit in filteredUnitInfo"
- :key="unit.id"
- class="unit-item"
- :class="unit.status"
- >
- <div class="unit-header">
- <div class="unit-name">{{ unit.unitName }}</div>
- <div class="unit-status" :class="unit.status">
- {{ getUnitStatusText(unit.status) }}
- </div>
- </div>
- <div class="unit-details">
- <div class="detail-item">
- <span class="label">寮�濮嬫椂闂达細</span>
- <span class="value">{{ unit.startTime }}</span>
- </div>
- <div class="detail-item" v-if="unit.endTime">
- <span class="label">缁撴潫鏃堕棿锛�</span>
- <span class="value">{{ unit.endTime }}</span>
- </div>
- <div class="detail-item" v-if="unit.reason">
- <span class="label">鍘熷洜锛�</span>
- <span class="value">{{ unit.reason }}</span>
- </div>
- </div>
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
-
- <!-- 鎶ヨ淇℃伅闆嗕腑灞曠ず -->
- <el-card class="alarm-card">
+ <!-- 璁惧鍚仠璁板綍琛ㄦ牸 -->
+ <el-card class="table-card">
<template #header>
- <div class="card-header">
- <span>鎶ヨ淇℃伅闆嗕腑灞曠ず</span>
- <div class="alarm-actions">
- <el-button type="warning" size="small" @click="refreshAlarms">
- <el-icon><Refresh /></el-icon>
- 鍒锋柊
- </el-button>
- <el-button type="danger" size="small" @click="clearAlarms">
- <el-icon><Delete /></el-icon>
- 娓呴櫎宸插鐞�
- </el-button>
- </div>
- </div>
+ <span>璁惧杩愯璁板綍</span>
</template>
-
- <!-- 鎶ヨ绾у埆绛涢�� -->
- <div class="filter-section">
- <el-radio-group v-model="alarmFilter" @change="filterAlarms">
- <el-radio-button label="all">鍏ㄩ儴</el-radio-button>
- <el-radio-button label="critical">涓ラ噸</el-radio-button>
- <el-radio-button label="warning">璀﹀憡</el-radio-button>
- <el-radio-button label="info">淇℃伅</el-radio-button>
- </el-radio-group>
- </div>
-
- <!-- 鎶ヨ淇℃伅琛ㄦ牸 -->
<el-table
- :data="filteredAlarms"
+ :data="filteredDeviceRecords"
style="width: 100%"
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
- max-height="400"
+ :row-class-name="getRowClassName"
+ v-loading="loading"
>
<el-table-column
align="center"
@@ -206,341 +29,277 @@
width="60"
/>
<el-table-column
- label="鎶ヨ鏃堕棿"
- prop="alarmTime"
- width="150"
- align="center"
- />
- <el-table-column
label="璁惧鍚嶇О"
prop="deviceName"
- width="150"
show-overflow-tooltip
/>
<el-table-column
- label="鎶ヨ绾у埆"
- prop="level"
- width="100"
- align="center"
- >
- <template #default="scope">
- <el-tag
- :type="getAlarmTagType(scope.row.level)"
- size="small"
- >
- {{ scope.row.level }}
- </el-tag>
- </template>
- </el-table-column>
- <el-table-column
- label="鎶ヨ鍐呭"
- prop="content"
- min-width="200"
+ label="瑙勬牸鍨嬪彿"
+ prop="deviceModel"
show-overflow-tooltip
/>
<el-table-column
- label="澶勭悊鐘舵��"
+ label="璁惧鐘舵��"
prop="status"
- width="100"
+ width="150"
align="center"
>
<template #default="scope">
- <el-tag
- :type="scope.row.status === '宸插鐞�' ? 'success' : 'danger'"
+ <!-- 瓒呮椂鏈惎鍔ㄦ椂鏄剧ず璀﹀憡 -->
+ <el-tag
+ v-if="isOverdue(scope.row)"
+ type="warning"
+ size="small"
+ effect="dark"
+ >
+ <el-icon><Warning /></el-icon>
+ 瓒呮椂鏈惎鍔�
+ </el-tag>
+ <!-- 姝ｅ父鐘舵�佹椂鏄剧ず璁惧鐘舵�� -->
+ <el-tag
+ v-else
+ :type="getDeviceStatusType(scope.row.status)"
size="small"
>
- {{ scope.row.status }}
+ <el-icon v-if="scope.row.status === '杩愯涓�'"><VideoPlay /></el-icon>
+ <el-icon v-else><VideoPause /></el-icon>
+ {{ scope.row.status || '鏈煡' }}
</el-tag>
</template>
</el-table-column>
<el-table-column
- label="澶勭悊浜�"
- prop="handler"
- width="100"
- show-overflow-tooltip
- />
+ label="璁″垝杩愯鏃堕棿"
+ prop="planRuntimeTime"
+ width="150"
+ align="center"
+ >
+ <template #default="scope">
+ {{ scope.row.planRuntimeTime || '-' }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="寮�濮嬭繍琛屾椂闂�"
+ prop="startRuntimeTime"
+ width="180"
+ align="center"
+ >
+ <template #default="scope">
+ {{ scope.row.startRuntimeTime || '-' }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="缁撴潫杩愯鏃堕棿"
+ prop="endRuntimeTime"
+ width="180"
+ align="center"
+ >
+ <template #default="scope">
+ {{ scope.row.endRuntimeTime || '-' }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="杩愯鏃堕暱"
+ prop="runtimeDuration"
+ width="120"
+ align="center"
+ >
+ <template #default="scope">
+ {{ scope.row.runtimeDuration || '-' }}
+ </template>
+ </el-table-column>
<el-table-column
label="鎿嶄綔"
width="120"
align="center"
>
<template #default="scope">
+ <!-- 瓒呮椂鏈惎鍔ㄦ椂鏄剧ず鍚姩鎸夐挳 -->
<el-button
- v-if="scope.row.status === '鏈鐞�'"
- type="primary"
+ v-if="isOverdue(scope.row)"
+ type="warning"
size="small"
- @click="handleAlarm(scope.row)"
+ @click="changeDeviceStatus(scope.row, '鍚姩杩愯')"
>
- 澶勭悊
+ <el-icon><VideoPlay /></el-icon>
+ 绔嬪嵆鍚姩
</el-button>
- <el-button
- v-else
- type="info"
- size="small"
- disabled
- >
- 宸插鐞�
- </el-button>
+ <!-- 姝ｅ父鐘舵�佹椂鏄剧ず瀵瑰簲鐨勬搷浣滄寜閽� -->
+ <template v-else>
+ <el-button
+ v-if="scope.row.status === '杩愯涓�'"
+ type="danger"
+ size="small"
+ @click="changeDeviceStatus(scope.row, '鍋滄杩愯')"
+ >
+ <el-icon><VideoPause /></el-icon>
+ 鍋滄杩愯
+ </el-button>
+ <el-button
+ v-else
+ type="success"
+ size="small"
+ @click="changeDeviceStatus(scope.row, '鍚姩杩愯')"
+ >
+ <el-icon><VideoPlay /></el-icon>
+ 鍚姩杩愯
+ </el-button>
+ </template>
</template>
</el-table-column>
</el-table>
</el-card>
+
+
</div>
</template>
<script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, onMounted, computed } from 'vue'
+import { ElMessage } from 'element-plus'
import {
VideoPlay,
VideoPause,
- Warning,
- Tools,
- Refresh,
- Delete
+ Warning
} from '@element-plus/icons-vue'
+import {editLedger, getLedgerPage} from "@/api/equipmentManagement/ledger.js";
// 鍝嶅簲寮忔暟鎹�
const deviceFilter = ref('all')
-const unitFilter = ref('all')
-const alarmFilter = ref('all')
-
-// 姒傝鏁版嵁
-const overviewData = reactive({
- runningDevices: 15,
- stoppedDevices: 3,
- alarmCount: 8,
- maintenanceCount: 2
+const loading = ref(false)
+const total = ref(0)
+const queryParams = ref({
+ current: -1,
+ size: -1
})
+
+// 绉婚櫎姒傝鏁版嵁锛屽洜涓虹幇鍦ㄤ娇鐢ㄨ〃鏍煎睍绀�
// 璁惧鍚仠璁板綍鏁版嵁
-const deviceRecords = ref([
- {
- id: 1,
- deviceName: '鍘嬬缉鏈篈-001',
- type: 'start',
- time: '2024-01-15 08:30:25'
- },
- {
- id: 2,
- deviceName: '娉礏-002',
- type: 'stop',
- time: '2024-01-15 08:25:10'
- },
- {
- id: 3,
- deviceName: '椋庢満C-003',
- type: 'start',
- time: '2024-01-15 08:20:15'
- },
- {
- id: 4,
- deviceName: '鎼呮媽鍣―-004',
- type: 'start',
- time: '2024-01-15 08:15:30'
- },
- {
- id: 5,
- deviceName: '鍔犵儹鍣‥-005',
- type: 'stop',
- time: '2024-01-15 08:10:45'
- },
- {
- id: 6,
- deviceName: '鍐峰嵈鍣‵-006',
- type: 'start',
- time: '2024-01-15 08:05:20'
- }
-])
+const deviceRecords = ref([])
+const allDeviceRecords = ref([]) // 瀛樺偍鎵�鏈夊師濮嬫暟鎹�
-// 瑁呯疆寮�鍋滃伐淇℃伅鏁版嵁
-const unitInfo = ref([
- {
- id: 1,
- unitName: '鍙嶅簲瑁呯疆A',
- status: 'startup',
- startTime: '2024-01-15 08:00:00',
- endTime: null,
- reason: null
- },
- {
- id: 2,
- unitName: '鍒嗙瑁呯疆B',
- status: 'shutdown',
- startTime: '2024-01-15 07:30:00',
- endTime: '2024-01-15 08:00:00',
- reason: '璁″垝缁存姢'
- },
- {
- id: 3,
- unitName: '绮惧埗瑁呯疆C',
- status: 'unplanned',
- startTime: '2024-01-15 07:45:00',
- endTime: null,
- reason: '璁惧鏁呴殰'
- },
- {
- id: 4,
- unitName: '鍖呰瑁呯疆D',
- status: 'startup',
- startTime: '2024-01-15 08:15:00',
- endTime: null,
- reason: null
- }
-])
-
-// 鎶ヨ淇℃伅鏁版嵁
-const alarms = ref([
- {
- id: 1,
- alarmTime: '2024-01-15 08:30:00',
- deviceName: '鍘嬬缉鏈篈-001',
- level: '涓ラ噸',
- content: '娓╁害杩囬珮鎶ヨ',
- status: '鏈鐞�',
- handler: ''
- },
- {
- id: 2,
- alarmTime: '2024-01-15 08:25:00',
- deviceName: '娉礏-002',
- level: '璀﹀憡',
- content: '鍘嬪姏寮傚父',
- status: '宸插鐞�',
- handler: '寮犱笁'
- },
- {
- id: 3,
- alarmTime: '2024-01-15 08:20:00',
- deviceName: '椋庢満C-003',
- level: '淇℃伅',
- content: '杩愯鏃堕棿杈惧埌缁存姢鍛ㄦ湡',
- status: '鏈鐞�',
- handler: ''
- },
- {
- id: 4,
- alarmTime: '2024-01-15 08:15:00',
- deviceName: '鎼呮媽鍣―-004',
- level: '涓ラ噸',
- content: '鎸姩寮傚父',
- status: '鏈鐞�',
- handler: ''
- },
- {
- id: 5,
- alarmTime: '2024-01-15 08:10:00',
- deviceName: '鍔犵儹鍣‥-005',
- level: '璀﹀憡',
- content: '鍔犵儹鏁堢巼涓嬮檷',
- status: '宸插鐞�',
- handler: '鏉庡洓'
- }
-])
-
-// 璁＄畻灞炴�� - 杩囨护鍚庣殑璁惧璁板綍
+// 鏍规嵁绛涢�夋潯浠惰繃婊ゆ暟鎹�
const filteredDeviceRecords = computed(() => {
- if (deviceFilter.value === 'all') {
- return deviceRecords.value
+ let filtered = allDeviceRecords.value
+
+ // 鏍规嵁璁惧鐘舵�佺瓫閫�
+ if (deviceFilter.value !== 'all') {
+ if (deviceFilter.value === 'start') {
+ filtered = filtered.filter(device => device.status === '杩愯涓�')
+ } else if (deviceFilter.value === 'stop') {
+ filtered = filtered.filter(device => device.status === '鍋滄杩愯')
+ }
}
- return deviceRecords.value.filter(record => record.type === deviceFilter.value)
+
+ return filtered
})
-// 璁＄畻灞炴�� - 杩囨护鍚庣殑瑁呯疆淇℃伅
-const filteredUnitInfo = computed(() => {
- if (unitFilter.value === 'all') {
- return unitInfo.value
+// 妫�鏌ヨ澶囨槸鍚﹁秴鏃舵湭鍚姩
+const isOverdue = (device) => {
+ if (!device.planRuntimeTime || device.status === '杩愯涓�' || device.startRuntimeTime) {
+ return false
}
- return unitInfo.value.filter(unit => unit.status === unitFilter.value)
-})
-
-// 璁＄畻灞炴�� - 杩囨护鍚庣殑鎶ヨ淇℃伅
-const filteredAlarms = computed(() => {
- if (alarmFilter.value === 'all') {
- return alarms.value
- }
- return alarms.value.filter(alarm => alarm.level === alarmFilter.value)
-})
+
+ const planTime = new Date(device.planRuntimeTime)
+ const currentTime = new Date()
+
+ return currentTime > planTime
+}
// 鏂规硶
-const refreshDeviceRecords = () => {
- ElMessage.success('璁惧璁板綍宸插埛鏂�')
- // 杩欓噷鍙互璋冪敤API鑾峰彇鏈�鏂版暟鎹�
-}
-
-const refreshUnitInfo = () => {
- ElMessage.success('瑁呯疆淇℃伅宸插埛鏂�')
- // 杩欓噷鍙互璋冪敤API鑾峰彇鏈�鏂版暟鎹�
-}
-
-const refreshAlarms = () => {
- ElMessage.success('鎶ヨ淇℃伅宸插埛鏂�')
- // 杩欓噷鍙互璋冪敤API鑾峰彇鏈�鏂版暟鎹�
-}
-
-const clearAlarms = async () => {
+const getList = async () => {
+ loading.value = true
try {
- await ElMessageBox.confirm('纭畾瑕佹竻闄ゆ墍鏈夊凡澶勭悊鐨勬姤璀︿俊鎭悧锛�', '纭娓呴櫎', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- })
+ const response = await getLedgerPage(queryParams.value)
+ if (response.code === 200) {
+ allDeviceRecords.value = response.data.records || []
+ total.value = response.data.total || 0
+ }
+ } catch (error) {
+ console.error('鑾峰彇璁惧鍒楄〃澶辫触:', error)
+ ElMessage.error('鑾峰彇璁惧鍒楄〃澶辫触')
+ } finally {
+ loading.value = false
+ }
+}
+
+const changeDeviceStatus = async (device, status) => {
+ try {
+ const currentTime = new Date().toLocaleString('zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false
+ }).replace(/\//g, '-')
- alarms.value = alarms.value.filter(alarm => alarm.status === '鏈鐞�')
- ElMessage.success('宸叉竻闄ゆ墍鏈夊凡澶勭悊鐨勬姤璀︿俊鎭�')
- } catch {
- // 鐢ㄦ埛鍙栨秷鎿嶄綔
+ // 鏇存柊璁惧鐘舵�佸拰鐩稿叧鏃堕棿瀛楁
+ if (status === '鍚姩杩愯') {
+ device.status = '杩愯涓�'
+ device.startRuntimeTime = currentTime
+ device.endRuntimeTime = null // 娓呯┖缁撴潫鏃堕棿
+ device.runtimeDuration = null // 娓呯┖杩愯鏃堕暱
+ } else {
+ device.status = '鍋滄杩愯'
+ device.endRuntimeTime = currentTime
+ // 璁＄畻杩愯鏃堕暱
+ if (device.startRuntimeTime) {
+ const startTime = new Date(device.startRuntimeTime)
+ const endTime = new Date(currentTime)
+ const duration = endTime - startTime
+ const hours = Math.floor(duration / (1000 * 60 * 60))
+ const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60))
+ device.runtimeDuration = `${hours}灏忔椂${minutes}鍒嗛挓`
+ }
+ }
+ const params = {
+ id: device.id,
+ status: device.status,
+ planRuntimeTime: device.planRuntimeTime,
+ startRuntimeTime: device.startRuntimeTime,
+ endRuntimeTime: device.endRuntimeTime,
+ runtimeDuration: device.runtimeDuration,
+ }
+ // 璋冪敤API鏇存柊璁惧鐘舵��
+ const response = await editLedger(params)
+ if (response.code === 200) {
+ ElMessage.success(`${device.deviceName} ${status}鎴愬姛`)
+ // 鍒锋柊鍒楄〃
+ await getList()
+ } else {
+ ElMessage.error(response.msg || '鎿嶄綔澶辫触')
+ }
+ } catch (error) {
+ console.error('鏇存柊璁惧鐘舵�佸け璐�:', error)
+ ElMessage.error('鎿嶄綔澶辫触')
}
}
-const filterDeviceRecords = () => {
- // 杩囨护閫昏緫宸插湪璁＄畻灞炴�т腑澶勭悊
-}
-
-const filterUnitInfo = () => {
- // 杩囨护閫昏緫宸插湪璁＄畻灞炴�т腑澶勭悊
-}
-
-const filterAlarms = () => {
- // 杩囨护閫昏緫宸插湪璁＄畻灞炴�т腑澶勭悊
-}
-
-const getUnitStatusText = (status) => {
- const statusMap = {
- startup: '寮�宸ヤ腑',
- shutdown: '宸插仠宸�',
- unplanned: '闈炶鍒掑仠宸�'
+const getDeviceStatusType = (status) => {
+ if (status === '杩愯涓�') {
+ return 'success'
+ } else if (status === '鍋滄杩愯') {
+ return 'danger'
+ } else {
+ return 'info'
}
- return statusMap[status] || status
}
-const getAlarmTagType = (level) => {
- const typeMap = {
- '涓ラ噸': 'danger',
- '璀﹀憡': 'warning',
- '淇℃伅': 'info'
+// 鑾峰彇琛ㄦ牸琛岀殑绫诲悕
+const getRowClassName = ({ row }) => {
+ if (isOverdue(row)) {
+ return 'overdue-row'
}
- return typeMap[level] || 'info'
+ return ''
}
-const handleAlarm = (alarm) => {
- ElMessageBox.prompt('璇疯緭鍏ュ鐞嗚鏄�', '澶勭悊鎶ヨ', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- inputPlaceholder: '璇疯緭鍏ュ鐞嗚鏄�'
- }).then(({ value }) => {
- alarm.status = '宸插鐞�'
- alarm.handler = '褰撳墠鐢ㄦ埛' // 杩欓噷搴旇鑾峰彇褰撳墠鐧诲綍鐢ㄦ埛
- ElMessage.success('鎶ヨ澶勭悊瀹屾垚')
- }).catch(() => {
- // 鐢ㄦ埛鍙栨秷鎿嶄綔
- })
-}
+
// 缁勪欢鎸傝浇鏃跺垵濮嬪寲鏁版嵁
onMounted(() => {
- // 杩欓噷鍙互璋冪敤API鑾峰彇鍒濆鏁版嵁
- console.log('杩愯绠＄悊椤甸潰宸插姞杞�')
+ getList()
})
</script>
@@ -552,251 +311,27 @@
}
-.stats-overview {
- margin-bottom: 20px;
-}
-
-.stats-card {
- border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.stats-content {
- display: flex;
- align-items: center;
- padding: 10px 0;
-}
-
-.stats-icon {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 15px;
- font-size: 24px;
- color: #fff;
-}
-
-.stats-icon.running {
- background: linear-gradient(135deg, #67C23A, #85CE61);
-}
-
-.stats-icon.stopped {
- background: linear-gradient(135deg, #F56C6C, #F78989);
-}
-
-.stats-icon.alarm {
- background: linear-gradient(135deg, #E6A23C, #EEBE77);
-}
-
-.stats-icon.maintenance {
- background: linear-gradient(135deg, #409EFF, #66B1FF);
-}
-
-.stats-info {
- flex: 1;
-}
-
-.stats-value {
- font-size: 24px;
- font-weight: bold;
- color: #333;
- line-height: 1;
- margin-bottom: 5px;
-}
-
-.stats-label {
- font-size: 14px;
- color: #666;
-}
-
-.main-card {
- margin-bottom: 20px;
- border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
.filter-section {
- margin-bottom: 15px;
-}
-
-.device-records {
- max-height: 400px;
- overflow-y: auto;
-}
-
-.device-record {
- display: flex;
- align-items: center;
- padding: 12px;
- margin-bottom: 8px;
- border-radius: 6px;
- background: #f8f9fa;
- border-left: 4px solid #ddd;
-}
-
-.device-record.start {
- border-left-color: #67C23A;
- background: #f0f9ff;
-}
-
-.device-record.stop {
- border-left-color: #F56C6C;
- background: #fef0f0;
-}
-
-.record-icon {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 12px;
- font-size: 16px;
- color: #fff;
-}
-
-.device-record.start .record-icon {
- background: #67C23A;
-}
-
-.device-record.stop .record-icon {
- background: #F56C6C;
-}
-
-.record-content {
- flex: 1;
-}
-
-.device-name {
- font-weight: 500;
- color: #333;
- margin-bottom: 4px;
-}
-
-.record-time {
- font-size: 12px;
- color: #666;
- margin-bottom: 4px;
-}
-
-.record-status {
- font-size: 12px;
- padding: 2px 8px;
- border-radius: 12px;
- display: inline-block;
-}
-
-.record-status.start {
- background: #e1f3d8;
- color: #67C23A;
-}
-
-.record-status.stop {
- background: #fde2e2;
- color: #F56C6C;
-}
-
-.unit-info {
- max-height: 400px;
- overflow-y: auto;
-}
-
-.unit-item {
+ margin-bottom: 20px;
padding: 15px;
- margin-bottom: 12px;
- border-radius: 6px;
- background: #f8f9fa;
- border-left: 4px solid #ddd;
-}
-
-.unit-item.startup {
- border-left-color: #67C23A;
- background: #f0f9ff;
-}
-
-.unit-item.shutdown {
- border-left-color: #409EFF;
- background: #f0f9ff;
-}
-
-.unit-item.unplanned {
- border-left-color: #E6A23C;
- background: #fdf6ec;
-}
-
-.unit-header {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 8px;
+ justify-content: flex-start;
}
-.unit-name {
- font-weight: 500;
- color: #333;
- font-size: 14px;
-}
-
-.unit-status {
- font-size: 12px;
- padding: 4px 8px;
- border-radius: 12px;
- display: inline-block;
-}
-
-.unit-status.startup {
- background: #e1f3d8;
- color: #67C23A;
-}
-
-.unit-status.shutdown {
- background: #e1f3ff;
- color: #409EFF;
-}
-
-.unit-status.unplanned {
- background: #fdf6ec;
- color: #E6A23C;
-}
-
-.unit-details {
- font-size: 12px;
- color: #666;
-}
-
-.detail-item {
- margin-bottom: 4px;
-}
-
-.detail-item .label {
- font-weight: 500;
- margin-right: 4px;
-}
-
-.alarm-card {
+.table-card {
+ margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.alarm-actions {
- display: flex;
- gap: 8px;
}
:deep(.el-card__header) {
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
font-weight: 500;
+ font-size: 16px;
}
:deep(.el-table .el-table__header-wrapper th) {
@@ -806,19 +341,30 @@
}
:deep(.el-table .el-table__body-wrapper td) {
- padding: 8px 0;
+ padding: 12px 0;
}
-:deep(.el-radio-button__inner) {
- border-radius: 4px;
+:deep(.el-select) {
+ width: 100%;
}
-:deep(.el-radio-button:first-child .el-radio-button__inner) {
- border-left: 1px solid #dcdfe6;
- border-radius: 4px;
+:deep(.el-tag) {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
}
-:deep(.el-radio-button:last-child .el-radio-button__inner) {
- border-radius: 4px;
+/* 瓒呮椂鏈惎鍔ㄨ鐨勬牱寮� */
+:deep(.overdue-row) {
+ background-color: #fef0f0 !important;
+ border-left: 4px solid #f56c6c;
+}
+
+:deep(.overdue-row:hover) {
+ background-color: #fde2e2 !important;
+}
+
+:deep(.overdue-row td) {
+ background-color: transparent !important;
}
</style>
--
Gitblit v1.9.3