1

src/views/AlarmInformation/index.vue

@@ -17,7 +17,12 @@
 
             <!-- 主体区域 -->
             <div class="control-content">
-                <div style="width: 100%;">
+                <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
+                    <div class="tabBox">
+                        <div class="tab" :class="{ select: type === '重大预警' }" @click="changeTab('重大预警')">重大预警</div>
+                        <div class="tab" :class="{ select: type === '一般预警' }" @click="changeTab('一般预警')">一般预警</div>
+                    </div>
+                    <div v-if="type === '一般预警'">
                         <el-button @click="handleDeal" class="handleBtn" type="success">
                             <el-icon>
                                 <Delete />
@@ -31,7 +36,23 @@
                             批量删除
                         </el-button>
                     </div>
-                <el-table :data="tableData" style="width: 100%" height="366" stripe v-loading="loading" @selection-change="handleSelectionChange" row-key="id" ref="multipleTableRef">
+                </div>
+                <el-table v-show="type === '重大预警'" :data="bigTableData" style="width: 100%" height="366" stripe v-loading="loading">
+                    <el-table-column align="center" prop="id" label="事件ID" width="70" />
+                    <el-table-column align="center" prop="event_type_id" label="事件类型" width="120" />
+                    <el-table-column align="center" prop="device_id" label="设备ID" />
+                    <el-table-column align="center" prop="content" label="事件内容" />
+                    <el-table-column align="center" prop="created" label="创建时间" width="170">
+                        <template #default="{ row }">
+                            {{ row.created ? dayjs(row.created * 1000).format('YYYY-MM-DD HH:mm:ss') : '' }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column align="center" prop="latitude" label="纬度" width="100">
+                    </el-table-column>
+                    <el-table-column align="center" prop="longitude" label="经度" width="100">
+                    </el-table-column>
+                </el-table>
+                <el-table v-show="type === '一般预警'" :data="tableData" style="width: 100%" height="366" stripe v-loading="loading" @selection-change="handleSelectionChange" row-key="id" ref="multipleTableRef">
                     <el-table-column type="selection" :selectable="selectable" width="55" />
                     <el-table-column align="center" prop="id" label="序号" />
                     <el-table-column align="center" prop="loop_idx" label="回路地址" />
@@ -106,12 +127,29 @@ const loading = ref(false)
 const total = ref(0)
 const pageSize = ref(8)
 const currentPage = ref(1)
+const type = ref('重大预警')
+const changeTab = (tab) => {
+    type.value = tab
+    if (type.value === '重大预警') {
+        getBigData()
+    } else {
+        getData()
+    }
+}
 const handleSizeChange = () => {
     currentPage.value = 1
+    if (type.value === '重大预警') {
+        getBigData()
+    } else {
         getData()
+    }
 }
 const handleCurrentChange = () => {
+    if (type.value === '重大预警') {
+        getBigData()
+    } else {
         getData()
+    }
 }
 
 const tableData = ref([])
@@ -193,11 +231,51 @@ const getData = () => {
         loading.value = false
     })
 }
-getData()
+// getData()
+
+const bigTableData = ref([])
+const getBigData = () => {
+    loading.value = true
+    RPC.post('/eventcenter/type/list', { page: 1, limit: 20, and: { is_fault: [true] } }).then(res => {
+        const faultList = res.rows || []
+        if (faultList.length > 0) {
+            const params = {
+                "limit": pageSize.value,
+                "page": currentPage.value,
+                "and": {
+                    "device_id": [
+                        commit_uid
+                    ],
+                    event_type_id: faultList.map(item => item.id)
+                },
+                "like": {},
+            }
+            RPC.post('/eventcenter/list', params).then(res => {
+                total.value = res.count || 0
+                bigTableData.value = res.rows || []
+            }).finally(() => {
+                loading.value = false
+            })
+        } else {
+            loading.value = false
+            total.value = 0
+            bigTableData.value = []
+            faults.value = []
+        }
+    }).catch(() => {
+        loading.value = false
+    })
+
+}
+getBigData()
 
 const reflesh = () => {
     currentPage.value = 1
+    if (type.value === '重大预警') {
+        getBigData()
+    } else {
         getData()
+    }
 }
 
 
@@ -307,6 +385,25 @@ onUnmounted(() => {
             color: #fff;
         }
     }
+
+    .tabBox {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .tab {
+            color: #fff;
+            padding: 4px 10px;
+            border-radius: 4px;
+            border: 1px solid #fff;
+            cursor: pointer;
+
+            &.select {
+                color: #0881FE;
+                border: 1px solid #0881FE;
+            }
+        }
+    }
 }