From f1ee0aa9d6c6c89ee9f0e5d845cd3c64f161aeaf Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 16 十二月 2025 20:03:08 +0800
Subject: [PATCH] 代码调整6
---
src/views/diagnosis/FaultDiagnosis.vue | 411 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 411 insertions(+), 0 deletions(-)
diff --git a/src/views/diagnosis/FaultDiagnosis.vue b/src/views/diagnosis/FaultDiagnosis.vue
new file mode 100644
index 0000000..a1cb864
--- /dev/null
+++ b/src/views/diagnosis/FaultDiagnosis.vue
@@ -0,0 +1,411 @@
+<template>
+ <div class="fault-diagnosis-container">
+ <el-row :gutter="20">
+ <!-- 宸︿晶锛氭晠闅滈璀﹀垪琛� -->
+ <el-col :span="12">
+ <el-card shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>鏁呴殰棰勮鍒楄〃</span>
+ </div>
+ </template>
+ <el-table :data="warningList" stripe style="width: 100%" @row-click="handleWarningClick">
+ <el-table-column prop="deviceName" label="璁惧鍚嶇О" width="180"></el-table-column>
+ <el-table-column prop="warningType" label="棰勮绫诲瀷" width="120"></el-table-column>
+ <el-table-column prop="riskLevel" label="椋庨櫓绛夌骇" width="100">
+ <template #default="scope">
+ <el-tag :type="scope.row.riskLevel === 'high' ? 'danger' : scope.row.riskLevel === 'medium' ? 'warning' : 'info'">
+ {{ scope.row.riskLevel === 'high' ? '楂�' : scope.row.riskLevel === 'medium' ? '涓�' : '浣�' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="occurTime" label="鍙戠敓鏃堕棿" width="180"></el-table-column>
+ <el-table-column prop="status" label="澶勭悊鐘舵��" width="100">
+ <template #default="scope">
+ <el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">
+ {{ scope.row.status === 'pending' ? '寰呭鐞�' : '宸插鐞�' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+
+ <!-- 鏁呴殰鍘嗗彶璁板綍鏌ヨ -->
+ <el-card shadow="hover" style="margin-top: 20px;">
+ <template #header>
+ <div class="card-header">
+ <span>鏁呴殰鍘嗗彶璁板綍</span>
+ </div>
+ </template>
+ <el-form :inline="true" :model="historyFilterForm" class="history-filter-form">
+ <el-form-item label="璁惧">
+ <el-select v-model="historyFilterForm.deviceId" placeholder="璇烽�夋嫨璁惧" clearable>
+ <el-option
+ v-for="device in devices"
+ :key="device.id"
+ :label="device.name"
+ :value="device.id"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏃堕棿鑼冨洿">
+ <el-date-picker
+ v-model="historyTimeRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ ></el-date-picker>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleHistorySearch">鏌ヨ</el-button>
+ </el-form-item>
+ </el-form>
+ <el-table :data="historyList" stripe style="width: 100%" size="small">
+ <el-table-column prop="deviceName" label="璁惧鍚嶇О" width="150"></el-table-column>
+ <el-table-column prop="faultType" label="鏁呴殰绫诲瀷" width="120"></el-table-column>
+ <el-table-column prop="occurTime" label="鍙戠敓鏃堕棿" width="150"></el-table-column>
+ <el-table-column prop="dealTime" label="澶勭悊鏃堕棿" width="150"></el-table-column>
+ <el-table-column prop="status" label="鐘舵��" width="100">
+ <template #default="scope">
+ <el-tag type="success">{{ scope.row.status }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pagination-container">
+ <el-pagination
+ background
+ layout="total, prev, pager, next"
+ :total="historyList.length"
+ :page-size="5"
+ size="small"
+ ></el-pagination>
+ </div>
+ </el-card>
+ </el-col>
+
+ <!-- 鍙充晶锛氭晠闅滆瘖鏂粨鏋� -->
+ <el-col :span="12">
+ <!-- 鏁呴殰璇婃柇缁撴灉 -->
+ <el-card shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>鏁呴殰璇婃柇缁撴灉</span>
+ <el-button type="primary" size="small" @click="handleDiagnosis">閲嶆柊璇婃柇</el-button>
+ </div>
+ </template>
+ <div v-if="currentWarning" class="diagnosis-result">
+ <h3>{{ currentWarning.deviceName }} - {{ currentWarning.warningType }}</h3>
+ <el-descriptions :column="1" border>
+ <el-descriptions-item label="椋庨櫓绛夌骇">
+ <el-tag :type="currentWarning.riskLevel === 'high' ? 'danger' : currentWarning.riskLevel === 'medium' ? 'warning' : 'info'">
+ {{ currentWarning.riskLevel === 'high' ? '楂�' : currentWarning.riskLevel === 'medium' ? '涓�' : '浣�' }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍙戠敓鏃堕棿">{{ currentWarning.occurTime }}</el-descriptions-item>
+ <el-descriptions-item label="鍘熷洜鎺ㄦ祴">{{ diagnosisResult.reason }}</el-descriptions-item>
+ <el-descriptions-item label="褰卞搷鑼冨洿">{{ diagnosisResult.impact }}</el-descriptions-item>
+ <el-descriptions-item label="澶勭悊寤鸿">{{ diagnosisResult.suggestion }}</el-descriptions-item>
+ </el-descriptions>
+ </div>
+ <div v-else class="no-selection">
+ <el-empty description="璇烽�夋嫨涓�涓璀﹂」鏌ョ湅璇婃柇缁撴灉"></el-empty>
+ </div>
+ </el-card>
+
+ <!-- 棰勬祴鎬ц瘖鏂粨鏋� -->
+ <el-card shadow="hover" style="margin-top: 20px;">
+ <template #header>
+ <div class="card-header">
+ <span>棰勬祴鎬ц瘖鏂粨鏋滐紙鏈潵7鏃ユ晠闅滈闄╋級</span>
+ </div>
+ </template>
+ <div class="prediction-result">
+ <el-timeline>
+ <el-timeline-item
+ v-for="item in predictionList"
+ :key="item.date"
+ :timestamp="item.date"
+ :type="item.riskLevel === 'high' ? 'danger' : item.riskLevel === 'medium' ? 'warning' : 'success'"
+ >
+ <div class="timeline-content">
+ <h4>{{ item.deviceName }}</h4>
+ <p class="risk-level">
+ 椋庨櫓绛夌骇锛�
+ <el-tag :type="item.riskLevel === 'high' ? 'danger' : item.riskLevel === 'medium' ? 'warning' : 'success'">
+ {{ item.riskLevel === 'high' ? '楂�' : item.riskLevel === 'medium' ? '涓�' : '浣�' }}
+ </el-tag>
+ </p>
+ <p class="fault-type">鍙兘鏁呴殰绫诲瀷锛歿{ item.possibleFault }}</p>
+ <p class="probability">鍙戠敓姒傜巼锛歿{ item.probability }}%</p>
+ </div>
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// 璁惧鍒楄〃
+const devices = ref([
+ { id: 'D001', name: '绌哄帇鏈篈-001' },
+ { id: 'D002', name: '鍐峰嵈濉擝-002' },
+ { id: 'D003', name: '姘存车C-003' },
+ { id: 'D004', name: '鍙戠數鏈篋-004' },
+ { id: 'D005', name: '鍙樺帇鍣‥-005' }
+])
+
+// 鏁呴殰棰勮鍒楄〃
+const warningList = ref([
+ {
+ id: 1,
+ deviceName: '绌哄帇鏈篈-001',
+ warningType: '鍘嬪姏寮傚父',
+ riskLevel: 'high',
+ occurTime: '2024-12-16 14:32:15',
+ status: 'pending'
+ },
+ {
+ id: 2,
+ deviceName: '鍐峰嵈濉擝-002',
+ warningType: '娓╁害杩囬珮',
+ riskLevel: 'medium',
+ occurTime: '2024-12-16 14:30:45',
+ status: 'pending'
+ },
+ {
+ id: 3,
+ deviceName: '姘存车C-003',
+ warningType: '鎸姩杩囧ぇ',
+ riskLevel: 'medium',
+ occurTime: '2024-12-16 14:28:30',
+ status: 'pending'
+ },
+ {
+ id: 4,
+ deviceName: '鍙戠數鏈篋-004',
+ warningType: '鐢垫祦寮傚父',
+ riskLevel: 'high',
+ occurTime: '2024-12-16 14:25:10',
+ status: 'pending'
+ },
+ {
+ id: 5,
+ deviceName: '鍙樺帇鍣‥-005',
+ warningType: '鐢靛帇娉㈠姩',
+ riskLevel: 'low',
+ occurTime: '2024-12-16 14:20:05',
+ status: 'pending'
+ }
+])
+
+// 褰撳墠閫変腑鐨勯璀﹂」
+const currentWarning = ref(warningList.value[0])
+
+// 鏁呴殰璇婃柇缁撴灉
+const diagnosisResult = reactive({
+ reason: '鏍规嵁璁惧杩愯鏁版嵁鎺ㄦ祴锛屾晠闅滃師鍥犲彲鑳芥槸璁惧鍐呴儴閮ㄤ欢纾ㄦ崯瀵艰嚧鐨勫帇鍔涘紓甯革紝闇�瑕佽繘涓�姝ユ鏌ヨ澶囩殑娲诲鐜拰姘旂几濂椼��',
+ impact: '濡傛灉涓嶅強鏃跺鐞嗭紝鍙兘瀵艰嚧璁惧鍋滄満锛屽奖鍝嶇敓浜х嚎鐨勬甯歌繍琛岋紝棰勮鍋滄満鏃堕棿涓�4-6灏忔椂銆�',
+ suggestion: '1. 绔嬪嵆瀹夋帓缁翠慨浜哄憳杩涜璁惧妫�鏌ワ紱2. 妫�鏌ヨ澶囩殑娲诲鐜拰姘旂几濂楋紱3. 鏇存崲纾ㄦ崯涓ラ噸鐨勯儴浠讹紱4. 妫�鏌ヨ澶囩殑娑︽粦绯荤粺锛岀‘淇濇鼎婊戞甯搞��'
+})
+
+// 棰勬祴鎬ц瘖鏂粨鏋�
+const predictionList = ref([
+ {
+ date: '2024-12-17',
+ deviceName: '绌哄帇鏈篈-001',
+ riskLevel: 'medium',
+ possibleFault: '鍘嬪姏寮傚父',
+ probability: 65
+ },
+ {
+ date: '2024-12-18',
+ deviceName: '鍐峰嵈濉擝-002',
+ riskLevel: 'high',
+ possibleFault: '娓╁害杩囬珮',
+ probability: 85
+ },
+ {
+ date: '2024-12-19',
+ deviceName: '姘存车C-003',
+ riskLevel: 'medium',
+ possibleFault: '鎸姩杩囧ぇ',
+ probability: 70
+ },
+ {
+ date: '2024-12-20',
+ deviceName: '鍙戠數鏈篋-004',
+ riskLevel: 'high',
+ possibleFault: '鐢垫祦寮傚父',
+ probability: 90
+ },
+ {
+ date: '2024-12-21',
+ deviceName: '鍙樺帇鍣‥-005',
+ riskLevel: 'low',
+ possibleFault: '鐢靛帇娉㈠姩',
+ probability: 45
+ },
+ {
+ date: '2024-12-22',
+ deviceName: '绌哄帇鏈篈-001',
+ riskLevel: 'high',
+ possibleFault: '鍘嬪姏寮傚父',
+ probability: 80
+ },
+ {
+ date: '2024-12-23',
+ deviceName: '鍐峰嵈濉擝-002',
+ riskLevel: 'medium',
+ possibleFault: '娓╁害杩囬珮',
+ probability: 60
+ }
+])
+
+// 鏁呴殰鍘嗗彶璁板綍鏌ヨ琛ㄥ崟
+const historyFilterForm = ref({
+ deviceId: ''
+})
+
+// 鍘嗗彶璁板綍鏃堕棿鑼冨洿
+const historyTimeRange = ref([])
+
+// 鏁呴殰鍘嗗彶璁板綍
+const historyList = ref([
+ {
+ id: 1,
+ deviceName: '绌哄帇鏈篈-001',
+ faultType: '鍘嬪姏寮傚父',
+ occurTime: '2024-12-15 08:30:00',
+ dealTime: '2024-12-15 10:45:00',
+ status: '宸插鐞�'
+ },
+ {
+ id: 2,
+ deviceName: '鍐峰嵈濉擝-002',
+ faultType: '娓╁害杩囬珮',
+ occurTime: '2024-12-14 14:20:00',
+ dealTime: '2024-12-14 16:15:00',
+ status: '宸插鐞�'
+ },
+ {
+ id: 3,
+ deviceName: '姘存车C-003',
+ faultType: '鎸姩杩囧ぇ',
+ occurTime: '2024-12-13 09:15:00',
+ dealTime: '2024-12-13 11:30:00',
+ status: '宸插鐞�'
+ },
+ {
+ id: 4,
+ deviceName: '鍙戠數鏈篋-004',
+ faultType: '鐢垫祦寮傚父',
+ occurTime: '2024-12-12 16:45:00',
+ dealTime: '2024-12-12 18:30:00',
+ status: '宸插鐞�'
+ },
+ {
+ id: 5,
+ deviceName: '鍙樺帇鍣‥-005',
+ faultType: '鐢靛帇娉㈠姩',
+ occurTime: '2024-12-11 11:20:00',
+ dealTime: '2024-12-11 13:15:00',
+ status: '宸插鐞�'
+ }
+])
+
+// 澶勭悊棰勮椤圭偣鍑�
+const handleWarningClick = (row) => {
+ currentWarning.value = row
+}
+
+// 閲嶆柊璇婃柇
+const handleDiagnosis = () => {
+ // 妯℃嫙閲嶆柊璇婃柇
+ ElMessage.success('閲嶆柊璇婃柇瀹屾垚')
+}
+
+// 澶勭悊鍘嗗彶璁板綍鏌ヨ
+const handleHistorySearch = () => {
+ // 妯℃嫙鏌ヨ鍘嗗彶璁板綍
+ ElMessage.success('鍘嗗彶璁板綍鏌ヨ鎴愬姛')
+}
+</script>
+
+<style scoped>
+.fault-diagnosis-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.diagnosis-result h3 {
+ margin-bottom: 20px;
+ color: #303133;
+}
+
+.no-selection {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 200px;
+}
+
+.prediction-result {
+ padding: 10px 0;
+}
+
+.timeline-content {
+ padding: 10px;
+ background-color: #fafafa;
+ border-radius: 4px;
+}
+
+.timeline-content h4 {
+ margin-bottom: 10px;
+ color: #303133;
+}
+
+.timeline-content p {
+ margin: 5px 0;
+ font-size: 14px;
+ color: #606266;
+}
+
+.risk-level {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.fault-type {
+ color: #606266;
+}
+
+.probability {
+ color: #606266;
+}
+
+.history-filter-form {
+ margin-bottom: 20px;
+ padding: 10px 0;
+ border-bottom: 1px solid #ebeef5;
+}
+
+.pagination-container {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3