feat: 添加故障、报警、关闭报警功能

4 years ago · dc0ae42e16
6 changed files with 162 additions and 8 deletions
--- a/src/apis/index.js
+++ b/src/apis/index.js
@ -18,6 +18,12 @@ export const changePassword = params => http.post(`${users}/password/account`, p
 // 获取设备列表
 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 getDevicesCount = () => http.get(`${corrosion}/devices/count`);

--- a/src/components/history/local.vue
+++ b/src/components/history/local.vue
@ -23,10 +23,19 @@
      <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="光伏板电压(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="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>

    <el-pagination
--- a/src/components/overview/chart-device-detail.vue
+++ b/src/components/overview/chart-device-detail.vue
@ -25,8 +25,8 @@
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">报警数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.warning }}</div>
-        <div class="line-wrap bg-yellow-50">
-          <div :style="{ width: `${countPercent.warning}` }" class="line bg-yellow-300"></div>
+        <div class="line-wrap bg-yellow-50 cursor-pointer" @click="warningTableShow = true">
+          <div :style="{ width: `${countPercent.warning}` }" class="line bg-yellow-300 hover:bg-yellow-500"></div>
        </div>
      </el-col>
      <el-col :span="12" class="mt-10">
@ -39,8 +39,8 @@
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">故障数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.fault }}</div>
-        <div class="line-wrap bg-red-50">
-          <div :style="{ width: `${countPercent.fault}` }" class="line bg-red-300"></div>
+        <div class="line-wrap bg-red-50 hover:bg-red-100">
+          <div :style="{ width: `${countPercent.fault}` }" class="line bg-red-300 hover:bg-red-500"></div>
        </div>
      </el-col>
    </el-row>
--- a/src/components/overview/device-table.vue
+++ b/src/components/overview/device-table.vue
@ -15,7 +15,13 @@
      </el-table-column>
      <el-table-column align="center" header-align="center" label="设备状态" min-width="150">
        <template #default="scope">
-          <el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color" style="color: #fff">
+          <el-tag
+            v-if="scope.row.status"
+            :color="STATUS_COLOR[scope.row.status].color"
+            class="cursor-pointer"
+            @click="onClickStatus(scope.row)"
+            style="color: #fff"
+          >
            {{ STATUS_COLOR[scope.row.status].text }}
          </el-tag>
        </template>
@ -42,23 +48,34 @@
      @current-change="onCurrentPageChange"
    ></el-pagination>
  </template>
+
+  <el-dialog v-model="warningTableShow" title="设备报警" top="30px" width="90%">
+    <WarningTable :data="warningDeviceData" @removeWarningSuccess="onRemoveWarningSuccess" />
+  </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 { ElMessage } from 'element-plus';
+import WarningTable from 'components/overview/warning-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;
 });
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 const contentHeight = ref(600);
+const warningTableShow = ref(false);
+const warningDeviceData = ref([]);

 // 获取设备完整信息列表
 const getDevicesAllData = () => {
@ -109,4 +126,47 @@ const onCurrentPageChange = page => {
 const onSizeChange = size => {
  onSearch(1, size);
 };
+
+/**
+ * 获取设备报警信息
+ * @param deviceId
+ * @returns {Promise<void>}
+ */
+async function getWarningDevicesData(deviceId) {
+  try {
+    const res = await getWarningDevices({ deviceId });
+    if (res && res.length) {
+      warningTableShow.value = true;
+      warningDeviceData.value = res;
+    } else {
+      ElMessage.success('该设备暂无故障信息');
+    }
+  } catch (error) {
+    console.log('getWarningDevicesData:', error);
+    warningDeviceData.value = [];
+  }
+}
+
+/**
+ * 点击状态
+ * @param {string} status
+ * @param {string} deviceId
+ * @returns {Promise<void>}
+ */
+async function onClickStatus({ status, deviceId }) {
+  if (status === 'WARNING') {
+    await getWarningDevicesData(deviceId);
+  } else if (status === 'BROKEN') {
+    store.commit('device/setCurrentDeviceId', deviceId);
+    await router.push('/corrosion/data-realtime');
+  }
+}
+
+/**
+ * 关闭报警 移除这条记录
+ * @param {string} warningId
+ */
+function onRemoveWarningSuccess({ warningId }) {
+  warningDeviceData.value = warningDeviceData.value.filter(item => item.id !== warningId);
+}
 </script>
--- a/src/components/overview/warning-table.vue
+++ b/src/components/overview/warning-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(['removeWarningSuccess']);
+
+/**
+ * 格式化时间
+ * @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('removeWarningSuccess', { warningId });
+  } catch (error) {
+    console.error('onCloseWarning: ', error);
+    ElMessage.error('关闭报警失败');
+  }
+}
+</script>
--- a/src/views/data-realtime.vue
+++ b/src/views/data-realtime.vue
@ -21,7 +21,6 @@
      <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" />
-      <!--      TODO:-->
      <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" />