| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="warning-system"> |
| | | <h2>é¢è¦è卿ºå¶</h2> |
| | | |
| | | <!-- ç»è®¡å¡ç --> |
| | | <div class="stats"> |
| | | <div class="stat-card red"> |
| | | <span class="number">2</span> |
| | | <span class="label">红è²é¢è¦</span> |
| | | </div> |
| | | <div class="stat-card orange"> |
| | | <span class="number">1</span> |
| | | <span class="label">æ©è²é¢è¦</span> |
| | | </div> |
| | | <div class="stat-card yellow"> |
| | | <span class="number">1</span> |
| | | <span class="label">é»è²é¢è¦</span> |
| | | </div> |
| | | <div class="stat-card green"> |
| | | <span class="number">1</span> |
| | | <span class="label">绿è²é¢è¦</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- é¢è¦å表 --> |
| | | <div class="warning-list"> |
| | | <h3>é¢è¦å表</h3> |
| | | <table> |
| | | <thead> |
| | | <tr> |
| | | <th>ç¼å·</th> |
| | | <th>æ é¢</th> |
| | | <th>ç±»å</th> |
| | | <th>ç级</th> |
| | | <th>ç¶æ</th> |
| | | <th>æä½</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr v-for="warning in warnings" :key="warning.id"> |
| | | <td>{{ warning.id }}</td> |
| | | <td>{{ warning.title }}</td> |
| | | <td>{{ warning.type }}</td> |
| | | <td> |
| | | <span :class="['level-tag', warning.level]"> |
| | | {{ warning.levelText }} |
| | | </span> |
| | | </td> |
| | | <td> |
| | | <span :class="['status-tag', warning.status]"> |
| | | {{ warning.statusText }} |
| | | </span> |
| | | </td> |
| | | <td> |
| | | <button @click="viewDetail(warning)">æ¥ç详æ
</button> |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | |
| | | <!-- 详æ
å¯¹è¯æ¡ --> |
| | | <div v-if="showDetail" class="modal"> |
| | | <div class="modal-content"> |
| | | <h3>é¢è¦è¯¦æ
</h3> |
| | | <div v-if="currentWarning"> |
| | | <p><strong>ç¼å·ï¼</strong>{{ currentWarning.id }}</p> |
| | | <p><strong>æ é¢ï¼</strong>{{ currentWarning.title }}</p> |
| | | <p><strong>ç±»åï¼</strong>{{ currentWarning.type }}</p> |
| | | <p><strong>ç级ï¼</strong>{{ currentWarning.levelText }}</p> |
| | | <p><strong>æè¿°ï¼</strong>{{ currentWarning.description }}</p> |
| | | <p><strong>å½±åï¼</strong>{{ currentWarning.impact }}</p> |
| | | <p><strong>建议ï¼</strong>{{ currentWarning.suggestions }}</p> |
| | | </div> |
| | | <button @click="showDetail = false">å
³é</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: 'WarningSystem', |
| | | data() { |
| | | return { |
| | | showDetail: false, |
| | | currentWarning: null, |
| | | warnings: [ |
| | | { |
| | | id: 'W001', |
| | | title: '项ç®é¢ç®è¶
æ¯é¢è¦', |
| | | type: 'è´¢å¡é¢è¦', |
| | | level: 'red', |
| | | levelText: '红è²é¢è¦', |
| | | status: 'pending', |
| | | statusText: 'å¾
å¤ç', |
| | | responsible: 'éå¿å¼º', |
| | | description: 'A项ç®é¢ç®æ§è¡ç已达95%ï¼é¢è®¡å°è¶
åºé¢ç®èå´ã', |
| | | impact: 'å½±åé¡¹ç®æ´ä½è´¢å¡ææ ï¼å¯è½å¯¼è´é¡¹ç®äºæ', |
| | | suggestions: 'æåéå¿
è¦æ¯åºï¼ä¼åèµæºé
ç½®ï¼ç³è¯·é¢ç®è°æ´' |
| | | }, |
| | | { |
| | | id: 'W002', |
| | | title: 'ååå°æé¢è¦', |
| | | type: 'åè§é¢è¦', |
| | | level: 'orange', |
| | | levelText: 'æ©è²é¢è¦', |
| | | status: 'processing', |
| | | statusText: 'å¤çä¸', |
| | | responsible: 'æä¸»ç®¡', |
| | | description: 'ä¸ä¾åºåBçååå°äº2024å¹´1æ25æ¥å°æã', |
| | | impact: 'å½±åä¾åºé¾ç¨³å®æ§ï¼å¯è½å¯¼è´æå¡ä¸æ', |
| | | suggestions: 'è¯ä¼°ä¾åºå表ç°ï¼åå¤ç»ç¾ææï¼å¶å®å¤éæ¹æ¡' |
| | | }, |
| | | { |
| | | id: 'W003', |
| | | title: '设å¤ç»´æ¤é¢è¦', |
| | | type: 'è¿è¥é¢è¦', |
| | | level: 'yellow', |
| | | levelText: 'é»è²é¢è¦', |
| | | status: 'pending', |
| | | statusText: 'å¾
å¤ç', |
| | | responsible: 'çå·¥ç¨å¸', |
| | | description: 'ç产线设å¤Cå·²è¿è¡8000å°æ¶ï¼æ¥è¿ç»´æ¤å¨æã', |
| | | impact: 'å¯è½å½±åç产æçå产åè´¨é', |
| | | suggestions: 'å®æç»´æ¤æ¶é´ï¼åå¤å¤ä»¶ï¼å¶å®ç»´æ¤è®¡å' |
| | | }, |
| | | { |
| | | id: 'W004', |
| | | title: '人åé
ç½®é¢è¦', |
| | | type: 'è¿è¥é¢è¦', |
| | | level: 'green', |
| | | levelText: '绿è²é¢è¦', |
| | | status: 'resolved', |
| | | statusText: '已解å³', |
| | | responsible: 'èµµHR', |
| | | description: 'ææ¯é¨é¨äººåé
ç½®å
è¶³ï¼é¡¹ç®è¿åº¦æ£å¸¸ã', |
| | | impact: 'æ è´é¢å½±å', |
| | | suggestions: 'ç»§ç»çæ§äººåé
ç½®æ
åµ' |
| | | }, |
| | | { |
| | | id: 'W005', |
| | | title: 'è´¨éäºæ
é¢è¦', |
| | | type: 'è¿è¥é¢è¦', |
| | | level: 'red', |
| | | levelText: '红è²é¢è¦', |
| | | status: 'pending', |
| | | statusText: 'å¾
å¤ç', |
| | | responsible: 'éå¿å¼º', |
| | | description: '产åDå¨å®¢æ·ç°åºåºç°è´¨éé®é¢ã', |
| | | impact: 'å½±åå®¢æ·æ»¡æåº¦ï¼å¯è½é æç»æµæå¤±', |
| | | suggestions: 'ç«å³å¬åé®é¢äº§åï¼åæåå ï¼å¶å®æ¹è¿æªæ½' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | methods: { |
| | | viewDetail(warning) { |
| | | this.currentWarning = warning |
| | | this.showDetail = true |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .warning-system { |
| | | padding: 20px; |
| | | max-width: 1200px; |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | h2 { |
| | | color: #333; |
| | | margin-bottom: 30px; |
| | | } |
| | | |
| | | .stats { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| | | gap: 20px; |
| | | margin-bottom: 30px; |
| | | } |
| | | |
| | | .stat-card { |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | color: white; |
| | | text-align: center; |
| | | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| | | } |
| | | |
| | | .stat-card.red { background: linear-gradient(135deg, #ff6b6b, #ee5a52); } |
| | | .stat-card.orange { background: linear-gradient(135deg, #ffa726, #ff9800); } |
| | | .stat-card.yellow { background: linear-gradient(135deg, #ffd54f, #ffc107); } |
| | | .stat-card.green { background: linear-gradient(135deg, #66bb6a, #4caf50); } |
| | | |
| | | .stat-card .number { |
| | | display: block; |
| | | font-size: 32px; |
| | | font-weight: bold; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .stat-card .label { |
| | | font-size: 14px; |
| | | opacity: 0.9; |
| | | } |
| | | |
| | | .warning-list h3 { |
| | | margin-bottom: 20px; |
| | | color: #333; |
| | | } |
| | | |
| | | table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | background: white; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| | | } |
| | | |
| | | th, td { |
| | | padding: 12px; |
| | | text-align: left; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | th { |
| | | background: #f8f9fa; |
| | | font-weight: 600; |
| | | color: #333; |
| | | } |
| | | |
| | | .level-tag, .status-tag { |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | font-size: 12px; |
| | | color: white; |
| | | } |
| | | |
| | | .level-tag.red { background: #f56c6c; } |
| | | .level-tag.orange { background: #e6a23c; } |
| | | .level-tag.yellow { background: #e6a23c; } |
| | | .level-tag.green { background: #67c23a; } |
| | | |
| | | .status-tag.pending { background: #f56c6c; } |
| | | .status-tag.processing { background: #e6a23c; } |
| | | .status-tag.resolved { background: #67c23a; } |
| | | |
| | | button { |
| | | padding: 6px 12px; |
| | | margin: 0 4px; |
| | | border: none; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | font-size: 12px; |
| | | background: #409eff; |
| | | color: white; |
| | | } |
| | | |
| | | .modal { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0,0,0,0.5); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .modal-content { |
| | | background: white; |
| | | padding: 30px; |
| | | border-radius: 8px; |
| | | max-width: 600px; |
| | | width: 90%; |
| | | max-height: 80vh; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .modal-content h3 { |
| | | margin-bottom: 20px; |
| | | color: #333; |
| | | } |
| | | |
| | | .modal-content p { |
| | | margin-bottom: 15px; |
| | | line-height: 1.6; |
| | | } |
| | | |
| | | .modal-content strong { |
| | | color: #333; |
| | | } |
| | | |
| | | .modal-content button { |
| | | background: #409eff; |
| | | color: white; |
| | | padding: 10px 20px; |
| | | font-size: 14px; |
| | | } |
| | | </style> |