feat: 报警故障未完

4 years ago · 34713db4e4
7 changed files with 9398 additions and 40 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/apis/index.js
+++ b/src/apis/index.js
@ -22,7 +22,13 @@ export const getDevices = () => http.get(`${corrosion}/devices`);
 export const getWarningDevices = params => http.post(`${corrosion}/devices/warning/list`, params);

 // 关闭设备的报警
-export const removeWarning = deviceId => http.post(`${corrosion}/devices/warning/close`, { warningIdList: [deviceId] });
+export const removeWarning = params => http.post(`${corrosion}/devices/warning/close`, params);
+
+// 查询获取设备故障列表
+export const getBrokenList = deviceId => http.post(`${corrosion}/devices/broken/list`, { deviceId });
+
+// 关闭故障
+export const removeBroken = params => http.post(`${corrosion}/devices/broken/close`, params);

 // 查设备概览 数据统计
 export const getDevicesCount = () => http.get(`${corrosion}/devices/count`);
--- a/src/components/overview/broken-table.vue
+++ b/src/components/overview/broken-table.vue
@ -0,0 +1,80 @@
+<template>
+  <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" fixed label="采集时间" min-width="170">
+        <template #default="scope">
+          {{ formatTime(+scope.row.time) }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed label="后台接收时间" min-width="170">
+        <template #default="scope">
+          {{ formatTime(+scope.row.createdAt) }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="锌腐蚀电流(nA)" min-width="130" prop="corrosion1" />
+      <el-table-column align="center" label="铜腐蚀电流(nA)" min-width="130" prop="corrosion2" />
+      <el-table-column align="center" label="铝腐蚀电流(nA)" min-width="130" prop="corrosion3" />
+      <el-table-column align="center" label="钢腐蚀电流(nA)" min-width="130" prop="corrosion4" />
+      <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
+      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
+      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
+      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="saltT" />
+      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="saltR" />
+      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
+      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
+      <el-table-column align="center" label="光伏板电压(V)" min-width="140" prop="solarVoltage" />
+      <el-table-column align="center" label="锂电池电压(V)" min-width="120" prop="batteryVoltage" />
+      <el-table-column align="center" label="电量百分比" min-width="94" prop="batteryVoltagePercentage" />
+      <el-table-column align="center" label="剩余电量(mAH)" min-width="140" prop="batteryVoltageRemain" />
+      <el-table-column align="center" label="损耗电量(mAH)" min-width="140" prop="batteryLoss" />
+      <el-table-column align="center" label="ICCID" min-width="190" prop="iccid" />
+      <el-table-column align="center" label="IMEI" min-width="150" prop="imei" />
+      <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
+      <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" />
+      <el-table-column align="center" fixed="right" label="操作" min-width="120">
+        <template #default="scope">
+          <el-button size="mini" type="danger" @click="onCloseWarning(scope.row.id)">关闭报警</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </template>
+</template>
+
+<script setup>
+import dayjs from 'dayjs';
+import { defineProps, defineEmits } from 'vue';
+import { removeWarning } from 'apis';
+import { ElMessage } from 'element-plus';
+
+defineProps({ data: Object });
+
+const emit = defineEmits(['removeBrokenSuccess']);
+
+/**
+ * 格式化时间
+ * @param {number} time 时间戳
+ * @returns {string}
+ */
+function formatTime(time) {
+  return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
+}
+
+/**
+ * 关闭某条报警
+ * @param {string} warningId 报警记录id
+ * @returns {Promise<void>}
+ */
+async function onCloseWarning(warningId) {
+  try {
+    await removeWarning(warningId);
+    ElMessage.success('关闭报警成功');
+    emit('removeBrokenSuccess', { warningId });
+  } catch (error) {
+    console.error('onCloseWarning: ', error);
+    ElMessage.error('关闭报警失败');
+  }
+}
+</script>
--- a/src/components/overview/device-table.vue
+++ b/src/components/overview/device-table.vue
@ -49,25 +49,30 @@
    ></el-pagination>
  </template>

+  <!-- 报警列表 -->
  <el-dialog v-model="warningTableShow" title="设备报警" top="30px" width="90%">
    <WarningTable :data="warningDeviceData" @removeWarningSuccess="onRemoveWarningSuccess" />
  </el-dialog>
+
+  <!-- 故障列表 -->
+  <el-dialog v-model="brokenTableShow" title="设备故障" top="30px" width="90%">
+    <BrokenTable :data="brokenDeviceData" @removeBrokenSuccess="onRemoveBrokenSuccess" />
+  </el-dialog>
 </template>

 <script setup>
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import dayjs from 'dayjs';
-import { useRouter } from 'vue-router';
-import { getWarningDevices } from 'apis';
+import { getWarningDevices, getBrokenList } from 'apis';
 import { ElMessage } from 'element-plus';
 import WarningTable from 'components/overview/warning-table.vue';
+import BrokenTable from 'components/overview/broken-table.vue';
 import { STATUS_COLOR } from '@/config/config';
 import { ASDU_TYPE } from '@/config/log';

 let timer = null;
 const store = useStore();
-const router = useRouter();
 const token = computed(() => store.getters['user/token']);
 const devicesAll = computed(() => {
  return store.state.device.devicesAll;
@ -76,6 +81,8 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 const contentHeight = ref(600);
 const warningTableShow = ref(false);
 const warningDeviceData = ref([]);
+const brokenTableShow = ref(false);
+const brokenDeviceData = ref([]);

 // 获取设备完整信息列表
 const getDevicesAllData = () => {
@ -147,6 +154,25 @@ async function getWarningDevicesData(deviceId) {
  }
 }

+/**
+ * 查询设备故障列表
+ * @param {string} deviceId
+ */
+async function getBrokenListData(deviceId) {
+  try {
+    const res = await getBrokenList(deviceId);
+    if (res && res.length) {
+      brokenTableShow.value = true;
+      brokenDeviceData.value = res;
+    } else {
+      ElMessage.success('该设备暂无故障信息');
+    }
+  } catch (error) {
+    console.error('getBrokenListData error: ', error);
+    brokenDeviceData.value = [];
+  }
+}
+
 /**
 * 点击状态
 * @param {string} status
@ -154,11 +180,13 @@ async function getWarningDevicesData(deviceId) {
 * @returns {Promise<void>}
 */
 async function onClickStatus({ status, deviceId }) {
-  if (status === 'WARNING') {
+  // DEBUG:
+  if (status === 'OFFLINE') {
    await getWarningDevicesData(deviceId);
  } else if (status === 'BROKEN') {
-    store.commit('device/setCurrentDeviceId', deviceId);
-    await router.push('/corrosion/data-realtime');
+    await getBrokenListData(deviceId);
+    // store.commit('device/setCurrentDeviceId', deviceId);
+    // await router.push('/corrosion/data-realtime');
  }
 }

--- a/src/components/overview/warning-table.vue
+++ b/src/components/overview/warning-table.vue
@ -36,7 +36,7 @@
      <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
      <el-table-column align="center" fixed="right" label="操作" min-width="120">
        <template #default="scope">
-          <el-button size="mini" type="danger" @click="onCloseWarning(scope.row.id)">关闭报警</el-button>
+          <el-button size="mini" type="danger" @click="onCloseWarning(scope.row.deviceId, scope.row.id)">关闭报警</el-button>
        </template>
      </el-table-column>
    </el-table>
@ -67,9 +67,13 @@ function formatTime(time) {
 * @param {string} warningId 报警记录id
 * @returns {Promise<void>}
 */
-async function onCloseWarning(warningId) {
+async function onCloseWarning(deviceId, warningId) {
  try {
-    await removeWarning(warningId);
+    const params = {
+      deviceId,
+      warningIdList: [warningId],
+    };
+    await removeWarning(params);
    ElMessage.success('关闭报警成功');
    emit('removeWarningSuccess', { warningId });
  } catch (error) {
--- a/src/components/statistical/search-bar.vue
+++ b/src/components/statistical/search-bar.vue
@ -43,12 +43,16 @@
  </el-form>
 </template>

+<script></script>
+
 <script setup>
 import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import dayjs from 'dayjs';
 import { exportHistory } from 'apis';

+export default { name: 'StatisticalSearchBar' };
+
 const emit = defineEmits(['search']);
 const searchDevice = reactive({
  deviceId: '',
--- a/yarn.lock
+++ b/yarn.lock
@ -2703,11 +2703,6 @@
  "resolved" "https://registry.nlark.com/fs.realpath/download/fs.realpath-1.0.0.tgz"
  "version" "1.0.0"

-"fsevents@~2.3.2":
-  "integrity" "sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro="
-  "resolved" "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz?cache=0&sync_timestamp=1612536409579&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "function-bind@^1.1.1":
  "integrity" "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
  "resolved" "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz"