feat: 故障报警完成；添加故障、报警日志

src/apis/index.js

@@ -27,6 +27,12 @@ export const removeWarning = params => http.post(`${corrosion}/devices/warning/c
 // 查询获取设备故障列表
 export const getBrokenList = deviceId => http.post(`${corrosion}/devices/broken/list`, { deviceId });
 
+// 查询设备故障日志
+export const getBrokenLog = deviceId => http.post(`${corrosion}/devices/broken/log`, { deviceId });
+
+// 查询设备报警日志
+export const getWarningLog = deviceId => http.post(`${corrosion}/devices/warning/log`, { deviceId });
+
 // 关闭故障
 export const removeBroken = params => http.post(`${corrosion}/devices/broken/close`, params);
 

src/components/commands/broken-log.vue

@@ -0,0 +1,24 @@
+<template>
+  <SearchCommands @search="onSearch" />
+
+  <BrokenTable :data="data" @removeBrokenSuccess="onSearch" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import SearchCommands from 'components/commands/search-commands.vue';
+import BrokenTable from 'components/overview/broken-table.vue';
+import { getBrokenLog } from 'apis';
+
+const data = ref(null);
+
+async function onSearch(options) {
+  const { deviceId } = options;
+  try {
+    const res = await getBrokenLog(deviceId);
+    data.value = res || null;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+</script>

src/views/commands.vue → src/components/commands/commands.vue

@@ -1,5 +1,6 @@
 <template>
   <SearchCommands @search="onSearch" />
+
   <template v-if="data">
     <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
       <el-table-column align="center" fixed label="设备ID" min-width="100" prop="deviceId" />

src/components/commands/search-commands.vue

@@ -12,22 +12,6 @@
       </el-select>
     </el-form-item>
 
-    <!--    <el-form-item label="类型">-->
-    <!--      <el-select v-model="searchDevice.type" placeholder="选择查询类型">-->
-    <!--        <el-option label="全部" value=""></el-option>-->
-    <!--        <el-option label="事件上报" value="EVENT"></el-option>-->
-    <!--        <el-option label="业务上报" value="DATA"></el-option>-->
-    <!--      </el-select>-->
-    <!--    </el-form-item>-->
-
-    <!--    <el-form-item label="状态">-->
-    <!--      <el-select v-model="searchDevice.status" placeholder="选择查询类型">-->
-    <!--        <el-option label="全部" value=""></el-option>-->
-    <!--        <el-option label="PENDING" value="PENDING"></el-option>-->
-    <!--        <el-option label="SUCCESS" value="SUCCESS"></el-option>-->
-    <!--      </el-select>-->
-    <!--    </el-form-item>-->
-
     <el-form-item>
       <el-button type="primary" @click="onSubmit">
         <i class="el-icon-search mr-2"></i>

src/components/commands/warning-log.vue

@@ -0,0 +1,29 @@
+<template>
+  <SearchCommands @search="onSearch" />
+
+  <WarningLog :data="data" :is-log="true" @removeWarningSuccess="onSearch" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import SearchCommands from 'components/commands/search-commands.vue';
+import WarningLog from 'components/overview/warning-table.vue';
+import { getWarningLog } from 'apis';
+import { ElMessage } from 'element-plus';
+
+const data = ref(null);
+
+async function onSearch(options) {
+  const { deviceId } = options;
+  try {
+    const res = await getWarningLog(deviceId);
+    console.log('res: ', res);
+    if (!res || !res.length) {
+      ElMessage.info('暂无数据');
+    }
+    data.value = res || null;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+</script>

src/components/overview/broken-table.vue

@@ -2,32 +2,41 @@
   <template v-if="data && data.length">
     <el-table :data="data" border stripe style="width: 100%">
       <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceId" />
-      <el-table-column align="center" label="产生时间" min-width="170">
+
+      <el-table-column align="center" label="故障信息" min-width="200">
         <template #default="scope">
-          {{ formatTime(+scope.row.startTime) }}
+          {{ scope.row.sensorName }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="消失时间" min-width="170">
+
+      <el-table-column align="center" label="产生时间" min-width="170">
         <template #default="scope">
-          {{ scope.row.endTime ? formatTime(+scope.row.endTime) : '-' }}
+          {{ formatTime(+scope.row.startTime) }}
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="故障信息">
+      <el-table-column align="center" label="消失时间" min-width="170">
         <template #default="scope">
-          {{ scope.row.sensorName }}
+          {{ scope.row.endTime ? formatTime(+scope.row.endTime) : '-' }}
         </template>
       </el-table-column>
 
-      <el-table-column align="center" fixed label="状态">
+      <el-table-column align="center" label="状态" min-width="100">
         <template #default="scope">
-          {{ scope.row.brokenStatus }}
+          <el-tag :type="computeStatus(scope.row.brokenStatus)">{{ scope.row.brokenStatus }}</el-tag>
         </template>
       </el-table-column>
 
       <el-table-column align="center" fixed="right" label="操作" min-width="120">
         <template #default="scope">
-          <el-button size="mini" type="danger" @click="onCloseBroken(scope.row.deviceId, scope.row.id)">关闭故障</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            :disabled="scope.row.brokenStatus !== '待解除'"
+            @click="onCloseBroken(scope.row.deviceId, scope.row.id)"
+          >
+            解除故障
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -53,6 +62,20 @@ function formatTime(time) {
   return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
 }
 
+/**
+ * 根据返回值计算tag's type
+ * @param {string} status 状态
+ */
+function computeStatus(status) {
+  if (status === '解除失败') {
+    return 'danger';
+  }
+  if (status === '解除成功') {
+    return 'success';
+  }
+  return 'warning';
+}
+
 /**
  * 关闭某条故障
  * @param {string} warningId 故障记录id
@@ -62,11 +85,10 @@ async function onCloseBroken(deviceId, warningId) {
   try {
     const params = {
       deviceId,
-      warningIdList: [warningId],
+      brokenIdList: [warningId],
     };
     await removeBroken(params);
-    ElMessage.success('关闭故障成功');
-    emit('removeBrokenSuccess', { warningId });
+    emit('removeBrokenSuccess', { warningId, deviceId });
   } catch (error) {
     console.error('onCloseBroken: ', error);
     ElMessage.error('关闭故障失败');

src/components/overview/device-table.vue

@@ -51,12 +51,12 @@
 
   <!-- 报警列表 -->
   <el-dialog v-model="warningTableShow" title="设备报警" top="30px" width="90%">
-    <WarningTable :data="warningDeviceData" @removeWarningSuccess="onRemoveWarningSuccess" />
+    <WarningTable :data="warningDeviceData" @removeWarningSuccess="getWarningDevicesData" />
   </el-dialog>
 
   <!-- 故障列表 -->
   <el-dialog v-model="brokenTableShow" title="设备故障" top="30px" width="90%">
-    <BrokenTable :data="brokenDeviceData" @removeBrokenSuccess="onRemoveBrokenSuccess" />
+    <BrokenTable :data="brokenDeviceData" @removeBrokenSuccess="getBrokenListData" />
   </el-dialog>
 </template>
 
@@ -139,14 +139,15 @@ const onSizeChange = size => {
  * @param deviceId
  * @returns {Promise<void>}
  */
-async function getWarningDevicesData(deviceId) {
+async function getWarningDevicesData({ deviceId }) {
   try {
     const res = await getWarningDevices({ deviceId });
     if (res && res.length) {
       warningTableShow.value = true;
       warningDeviceData.value = res;
     } else {
-      ElMessage.success('该设备暂无故障信息');
+      warningDeviceData.value = [];
+      ElMessage.info('该设备暂无报警信息');
     }
   } catch (error) {
     console.log('getWarningDevicesData:', error);
@@ -158,7 +159,7 @@ async function getWarningDevicesData(deviceId) {
  * 查询设备故障列表
  * @param {string} deviceId
  */
-async function getBrokenListData(deviceId) {
+async function getBrokenListData({ deviceId }) {
   try {
     const res = await getBrokenList(deviceId);
     if (res && res.length) {
@@ -180,21 +181,10 @@ async function getBrokenListData(deviceId) {
  * @returns {Promise<void>}
  */
 async function onClickStatus({ status, deviceId }) {
-  // DEBUG:
-  if (status === 'OFFLINE') {
-    await getWarningDevicesData(deviceId);
+  if (status === 'WARNING') {
+    await getWarningDevicesData({ deviceId });
   } else if (status === 'BROKEN') {
-    await getBrokenListData(deviceId);
-    // store.commit('device/setCurrentDeviceId', deviceId);
-    // await router.push('/corrosion/data-realtime');
-  }
+    await getBrokenListData({ deviceId });
   }
-
-/**
- * 关闭报警 移除这条记录
- * @param {string} warningId
- */
-function onRemoveWarningSuccess({ warningId }) {
-  warningDeviceData.value = warningDeviceData.value.filter(item => item.id !== warningId);
 }
 </script>

src/components/overview/warning-table.vue

@@ -34,9 +34,33 @@
       <el-table-column align="center" label="基站编号" min-width="130" prop="stationNo" />
       <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
       <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
+
+      <template v-if="isLog">
+        <el-table-column align="center" label="协议代码" min-width="160" prop="code" />
+        <el-table-column align="center" label="上报原因" min-width="120" prop="reason" />
+        <el-table-column align="center" label="采集时间" min-width="200" prop="gatheredAt">
+          <template #default="scope">
+            {{ scope.row.gatheredAt ? formatTime(+scope.row.gatheredAt) : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="上报时间" min-width="200" prop="createdAt">
+          <template #default="scope">
+            {{ scope.row.createdAt ? formatTime(+scope.row.createdAt) : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="处理状态" min-width="120" prop="warningStatus" />
+      </template>
+
       <el-table-column align="center" fixed="right" label="操作" min-width="120">
         <template #default="scope">
-          <el-button size="mini" type="danger" @click="onCloseWarning(scope.row.deviceId, scope.row.id)">关闭报警</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            :disabled="scope.row.warningStatus === '已处理'"
+            @click="onCloseWarning(scope.row.deviceId, scope.row.id)"
+          >
+            关闭报警
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -49,7 +73,7 @@ import { defineProps, defineEmits } from 'vue';
 import { removeWarning } from 'apis';
 import { ElMessage } from 'element-plus';
 
-defineProps({ data: Object });
+defineProps({ data: Object, isLog: { type: Boolean, default: false } });
 
 const emit = defineEmits(['removeWarningSuccess']);
 
@@ -75,7 +99,7 @@ async function onCloseWarning(deviceId, warningId) {
     };
     await removeWarning(params);
     ElMessage.success('关闭报警成功');
-    emit('removeWarningSuccess', { warningId });
+    emit('removeWarningSuccess', { warningId, deviceId });
   } catch (error) {
     console.error('onCloseWarning: ', error);
     ElMessage.error('关闭报警失败');

src/routers/index.js

@@ -63,7 +63,7 @@ export const routes = [
       title: '平台日志',
       icon: 'el-icon-moon-night',
     },
-    component: () => import('@/views/commands.vue'),
+    component: () => import('@/views/Log.vue'),
   },
 ];
 

src/views/Log.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-tabs v-model="activeName">
+    <el-tab-pane :lazy="true" label="平台日志" name="all">
+      <Commands v-if="activeName === 'all'" :active-name="activeName" />
+    </el-tab-pane>
+    <el-tab-pane :lazy="true" label="报警日志" name="warning">
+      <WarningLog v-if="activeName === 'warning'" :active-name="activeName" />
+    </el-tab-pane>
+    <el-tab-pane :lazy="true" label="故障日志" name="broken">
+      <BrokenLog v-if="activeName === 'broken'" :active-name="activeName" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Commands from 'components/commands/commands.vue';
+import WarningLog from 'components/commands/warning-log.vue';
+import BrokenLog from 'components/commands/broken-log.vue';
+
+const activeName = ref('all');
+</script>