推，异常告警表对接接口

portal-manager-ui/admin/src/api/dataAdmin.js

@@ -193,4 +193,12 @@ export function getImpossibleInfo(params) {
  */
 export function getKqalert(params) {
   return http.get(`${BASEURL}/admin/kqalert/list`, params);
-}
+}
\ No newline at end of file
+
+/**
+ * 查询设备告警日志列表
+ */
+// 查询设备告警日志列表
+export function getInfoList(params) {
+  return http.post(`${baseURL}/m/device/alarm/info/list`, params);
+}

portal-manager-ui/admin/src/views/dataAdmin/components/IOT/alerting.vue

@@ -2,19 +2,23 @@
   <div class="PoliticsShow-Container">
     <div class="header_box">
       <div>
-        <a-button type="primary" class="addclass"  @click="exportTable">
+        <a-button type="primary" class="addclass" @click="handleExportTable">
           <span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
         </a-button>
-        <span>告警次数:<i>256次</i></span>
+        <!-- <span>告警次数:<i>256次</i></span>
         <span>危险:<i>200次</i></span>
         <span>次要:<i>65次</i></span>
-        <span>一般:<i>0次</i></span>
+        <span>一般:<i>0次</i></span> -->
       </div>
       <span>
-        <a-input allowClear v-model="searchName" placeholder="请输入设备名称查询">
+        <a-input
+          allowClear
+          v-model="searchName"
+          placeholder="请输入设备名称查询"
+        >
           <a-icon slot="prefix" type="search" />
         </a-input>
-        <a-select default-value="001">
+        <a-select v-model="alarmType">
           <!-- <a-select-option
             v-for="(item, index) of selectOptions"
             :key="index"
@@ -23,10 +27,10 @@
             {{ item.label }}
           </a-select-option> -->
 
-          <a-select-option value="001"> 内容001 </a-select-option>
-          <a-select-option value="002"> 内容002 </a-select-option>
+          <a-select-option value=""> 全部 </a-select-option>
+          <a-select-option value="0"> 离线 </a-select-option>
         </a-select>
-        <a-select default-value="001">
+        <a-select v-model="status">
           <!-- <a-select-option
             v-for="(item, index) of selectOptions"
             :key="index"
@@ -35,31 +39,48 @@
             {{ item.label }}
           </a-select-option> -->
 
-          <a-select-option value="001"> 状态001 </a-select-option>
-          <a-select-option value="002"> 状态002 </a-select-option>
+          <a-select-option value="">全部状态</a-select-option>
+          <a-select-option value="0"> 未清除 </a-select-option>
+          <a-select-option value="1"> 清除未确认 </a-select-option>
+          <a-select-option value="2"> 清除已确认 </a-select-option>
         </a-select>
 
-        <a-range-picker format="YYYY年MM月DD日" class="range_picker_style" @change="rangePickerChange"
-          v-model="BegindAndEndTime">
+        <a-range-picker
+          format="YYYY-MM-DD"
+          class="range_picker_style"
+          @change="rangePickerChange"
+        >
         </a-range-picker>
 
-        <a-button type="primary" class="addclass" >搜索</a-button>
+        <a-button type="primary" class="addclass" @click="search"
+          >搜索</a-button
+        >
       </span>
     </div>
     <div class="main">
-      <a-table size="small" bordered :row-key="(record) => record.id" :row-selection="{
-        selectedRowKeys: tableSelectedKeys,
-        onChange: onSelectChange,
-      }" :scroll="{ y: 590 }" :pagination="tablePagination" @change="pagTableChange" :loading="tableLoading"
-        :columns="tableHeaders" :dataSource="tableSourceData">
-        <template slot="告警级别" slot-scope="text, record, index">
+      <a-table
+        size="small"
+        bordered
+        :row-key="(record) => record.id"
+        :row-selection="{
+          selectedRowKeys: tableSelectedKeys,
+          onChange: onSelectChange,
+        }"
+        :scroll="{ y: 490 }"
+        :pagination="tablePagination"
+        @change="pagTableChange"
+        :loading="tableLoading"
+        :columns="tableHeaders"
+        :dataSource="tableSourceData"
+      >
+        <template slot="alarmLevel" slot-scope="text, record, index">
           <span class="levelState">{{ text }}</span>
         </template>
         <template slot="operation" slot-scope="text, record, index">
-          <a-button type="link" @click="openDetails">查看详情{{ record.id }}</a-button>
+          <a-button type="link" @click="openDetails(record)">查看详情</a-button>
         </template>
       </a-table>
-      <Details ref="Details" />
+      <Details ref="Details" :msg="detailInfo" />
     </div>
   </div>
 </template>
@@ -67,11 +88,16 @@
 <script>
 import table from "@/mixins/table";
 import Details from "./components/Details.vue";
+import { getInfoList } from "@/api/dataAdmin";
+import { export2Excel } from "@/utils/js/exportExcel";
 export default {
   mixins: [table],
   name: "PortalAdminVuePoliticsShow",
   data() {
     return {
+      detailInfo: {},
+      status: "",
+      alarmType: "",
       BegindAndEndTime: [],
       tableHeaders: [
         {
@@ -85,42 +111,60 @@ export default {
         {
           title: "告警时间",
           align: "center",
-          dataIndex: "告警时间",
+          customRender: (record) => {
+            return record.alarmTime
+              ? this.timestampToTime(record.alarmTime)
+              : "--";
+          },
         },
         {
           title: "设备名称",
           align: "center",
-          dataIndex: "设备名称",
+          customRender: (record) => {
+            return record.deviceName ? record.deviceName : "--";
+          },
         },
         {
           title: "告警内容",
           align: "center",
-          dataIndex: "告警内容",
+          dataIndex: "alarmContent",
         },
 
         {
           title: "告警级别",
           align: "center",
-          dataIndex: "告警级别",
-          scopedSlots: {
-            customRender: "告警级别",
+          customRender: (record) => {
+            return record.alarmLevel == 0
+              ? "危险"
+              : record.alarmLevel == 1
+              ? "次要"
+              : record.alarmLevel == 2
+              ? "一般"
+              : "--";
           },
         },
         {
           title: "接收人员",
           align: "center",
-          dataIndex: "接收人员",
+          dataIndex: "alarmReceivePersonnel",
         },
         {
           title: "告警状态",
           align: "center",
-          dataIndex: "告警状态",
+          customRender: (record) => {
+            return record.alarmStatus == 0
+              ? "未清除"
+              : record.alarmStatus == 1
+              ? "清除未确认"
+              : record.alarmStatus == 1
+              ? "清除已确认"
+              : "--";
+          },
         },
         {
           title: "操作",
           align: "center",
           width: "110px",
-          dataIndex: "operation",
           scopedSlots: {
             customRender: "operation",
           },
@@ -133,22 +177,58 @@ export default {
     Details,
   },
   mounted() {
+    console.log(this.tablePagination);
+
     this.setMoment();
-    for (let key = 0; key < 20; key++) {
-      this.tableSourceData.push({
-        id: `00${key + 1}`,
-        告警时间: `2022-06-16 10:00:00${key + 1}`,
-        设备名称: `一楼排队机${key + 1}`,
-        告警内容: `离线${key + 1}`,
-        告警级别: `危险${key + 1}`,
-        接收人员: `刘德华${key + 1}`,
-        告警状态: `清楚已确认${key + 1}`,
-      });
-    }
+    this.getData();
   },
   methods: {
-    rangePickerChange(val) {
-      console.log(val);
+    // 时间戳转换为日期
+    timestampToTime(timestamp) {
+      var date = new Date(timestamp);
+      var Y = date.getFullYear() + "-";
+      var M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      var D =
+        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
+      var h = date.getHours() + ":";
+      var m = date.getMinutes() + ":";
+      var s = date.getSeconds();
+      return Y + M + D + h + m + s;
+    },
+    // 获取数据源
+    getData() {
+      let data = {
+        page: this.tablePagination.current,
+        size: this.tablePagination.pageSize,
+        deviceName: this.searchName,
+        alarmTimeStart: this.BegindAndEndTime[0],
+        alarmTimeEnd: this.BegindAndEndTime[1],
+        alarmStatus: this.status ? Number(this.status) : "",
+        alarmType: this.alarmType ? Number(this.alarmType) : "",
+      };
+      getInfoList(data).then((res) => {
+        if (res.code == 1) {
+          this.tableSourceData = res.data.data;
+          this.tablePagination.total = res.data.total;
+        }
+      });
+    },
+    // 搜索
+    search() {
+      this.tablePagination.current = 1;
+      this.getData();
+    },
+    // 页面跳转
+    pagTableChange(pagination) {
+      this.tablePagination = pagination;
+      this.getData();
+    },
+
+    rangePickerChange(date, dateString) {
+      this.BegindAndEndTime = dateString;
     },
     QueueState(type) {
       switch (type) {
@@ -161,9 +241,32 @@ export default {
           return "type0";
       }
     },
-    openDetails() {
+    openDetails(val) {
       this.$refs.Details.modalInfo.title = "告警详情";
       this.$refs.Details.modalInfo.visible = true;
+      let obj = JSON.parse(JSON.stringify(val));
+      obj.alarmStatus =
+        obj.alarmStatus == 0
+          ? "未清除"
+          : obj.alarmStatus == 1
+          ? "清除未确认"
+          : obj.alarmStatus == 1
+          ? "清除已确认"
+          : "--";
+      obj.alarmLevel =
+        obj.alarmLevel == 0
+          ? "危险"
+          : obj.alarmLevel == 1
+          ? "次要"
+          : obj.alarmLevel == 2
+          ? "一般"
+          : "--";
+      obj.alarmTime = this.timestampToTime(obj.alarmTime);
+      obj.updateTime = obj.updateTime
+        ? this.timestampToTime(obj.updateTime)
+        : "--";
+      obj.updateUserId = obj.updateUserId ? obj.updateUserId : "--";
+      this.detailInfo = obj;
     },
     // 导出
     async handleExportTable() {
@@ -174,25 +277,98 @@ export default {
         data = this.$_.cloneDeep(this.tableSelectedRows);
       } else {
         let datas = this.$_.cloneDeep(
-          await getImpossible({
-            ...this.queryform,
+          await getInfoList({
+            deviceName: this.searchName,
+            alarmTimeStart: this.BegindAndEndTime[0],
+            alarmTimeEnd: this.BegindAndEndTime[1],
+            alarmStatus: this.status ? Number(this.status) : "",
+            alarmType: this.alarmType ? Number(this.alarmType) : "",
             page: 1,
-            size: -1
+            size: -1,
           })
         );
-        this.btnLoading = false
-        data = datas.data.data
+        this.btnLoading = false;
+        data = datas.data.data;
         if (!data.length) return;
       }
-      
-      const tHeader = []
-      const filterVal = []
-      this.tableHeaders.forEach(v=>{
-        if(v.dataIndex){
-          tHeader.push(v.title)
-          filterVal.push(v.dataIndex)
+
+      const tHeader = [];
+      const filterVal = [];
+      data.forEach((v, i) => {
+        v.index = i + 1;
+        v.alarmTime = this.timestampToTime(v.alarmTime);
+        v.alarmStatus =
+          v.alarmStatus == 0
+            ? "未清除"
+            : v.alarmStatus == 1
+            ? "清除未确认"
+            : v.alarmStatus == 1
+            ? "清除已确认"
+            : "--";
+        v.alarmLevel =
+          v.alarmLevel == 0
+            ? "危险"
+            : v.alarmLevel == 1
+            ? "次要"
+            : v.alarmLevel == 2
+            ? "一般"
+            : "--";
+      });
+      let tableHeaders = [
+        {
+          title: "序号",
+          dataIndex: "index",
+          width: "60px",
+          key: "index",
+          align: "center",
+          customRender: (text, record, index) => `${index + 1}`,
+        },
+        {
+          title: "告警时间",
+          align: "center",
+          dataIndex: "alarmTime",
+        },
+        {
+          title: "设备名称",
+          align: "center",
+          dataIndex: "deviceName",
+        },
+        {
+          title: "告警内容",
+          align: "center",
+          dataIndex: "alarmContent",
+        },
+
+        {
+          title: "告警级别",
+          align: "center",
+          dataIndex: "alarmLevel",
+        },
+        {
+          title: "接收人员",
+          align: "center",
+          dataIndex: "alarmReceivePersonnel",
+        },
+        {
+          title: "告警状态",
+          align: "center",
+          dataIndex: "alarmStatus",
+        },
+        {
+          title: "操作",
+          align: "center",
+          width: "110px",
+          scopedSlots: {
+            customRender: "operation",
+          },
+        },
+      ];
+      tableHeaders.forEach((v) => {
+        if (v.dataIndex) {
+          tHeader.push(v.title);
+          filterVal.push(v.dataIndex);
         }
-      })
+      });
       export2Excel(
         tHeader,
         filterVal,
@@ -216,15 +392,15 @@ export default {
   justify-content: space-between;
   align-items: center;
 
-  &>div {
+  & > div {
     display: flex;
     justify-content: flex-start;
     align-items: center;
 
-    &>span {
+    & > span {
       margin-left: 10px;
 
-      &>i {
+      & > i {
         margin: 0 5px;
         font-style: normal;
       }
@@ -258,6 +434,3 @@ export default {
   }
 }
 </style>
-
-
-

portal-manager-ui/admin/src/views/dataAdmin/components/IOT/components/Details.vue

@@ -8,42 +8,47 @@
   >
     <a-form-model
       ref="ruleForm"
-      :model="detailsForm"
+      :model="msg"
       :rules="detailsRules"
       :label-col="{ span: 4 }"
       :wrapper-col="{ span: 20 }"
     >
       <a-form-model-item label="告警设备" prop="告警设备">
-        <a-input v-model="detailsForm.告警设备" placeholder="请输入" disabled />
+        <a-input v-model="msg.deviceName" placeholder="请输入" disabled />
       </a-form-model-item>
       <a-form-model-item label="告警时间" prop="告警时间">
-        <a-input v-model="detailsForm.告警时间" placeholder="请输入" disabled />
+        <a-input v-model="msg.alarmTime" placeholder="请输入" disabled />
       </a-form-model-item>
       <a-form-model-item label="告警内容" prop="告警内容">
-        <a-input v-model="detailsForm.告警内容" placeholder="请输入" disabled />
+        <a-input v-model="msg.alarmContent" placeholder="请输入" disabled />
       </a-form-model-item>
       <a-form-model-item label="告警程度" prop="告警程度">
-        <a-input v-model="detailsForm.告警程度" placeholder="请输入" disabled />
+        <a-input v-model="msg.alarmLevel" placeholder="请输入" disabled />
       </a-form-model-item>
       <a-form-model-item label="告警状态" prop="告警状态">
-        <a-input v-model="detailsForm.告警状态" placeholder="请输入" disabled />
+        <a-input v-model="msg.alarmStatus" placeholder="请输入" disabled />
       </a-form-model-item>
       <a-form-model-item label="接收人员" prop="接收人员">
-        <a-input v-model="detailsForm.接收人员" placeholder="请输入" disabled />
+        <a-input
+          v-model="msg.alarmReceivePersonnel"
+          placeholder="请输入"
+          disabled
+        />
       </a-form-model-item>
 
       <a-form-model-item label="告警详情" prop="告警详情">
         <a-textarea
-          v-model="detailsForm.告警详情"
+          v-model="msg.alarmContent"
           placeholder="请输入"
           :rows="4"
+          disabled
         />
       </a-form-model-item>
       <a-form-model-item label="清楚时间" prop="清楚时间">
-        <a-input v-model="detailsForm.清楚时间" placeholder="请输入" disabled />
+        <a-input v-model="msg.updateTime" placeholder="请输入" disabled />
       </a-form-model-item>
       <a-form-model-item label="清楚人员" prop="清楚人员">
-        <a-input v-model="detailsForm.清楚人员" placeholder="请输入" disabled />
+        <a-input v-model="msg.updateUserId" placeholder="请输入" disabled />
       </a-form-model-item>
     </a-form-model>
   </a-drawer>
@@ -54,7 +59,9 @@ import modal from "../mixins/modal";
 export default {
   mixins: [modal],
   name: "PortalAdminVuePicWorks",
-
+  props: {
+    msg: Object,
+  },
   data() {
     return {
       detailsForm: {
@@ -84,5 +91,3 @@ export default {
   overflow-x: hidden !important;
 }
 </style>
-
-