From f59e7637bfc0200401cf5ac91036cfb474de89f0 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Tue, 4 Jun 2024 14:09:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=91=8A=E8=AD=A6=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dataReport/index.vue                |   2 +-
 src/views/homePage/index.vue                  |   4 +-
 .../warnMessage/components/warnDialog.vue     | 305 ++++++++++++++++++
 src/views/homePage/warnMessage/index.vue      |  58 +++-
 4 files changed, 363 insertions(+), 6 deletions(-)
 create mode 100644 src/views/homePage/warnMessage/components/warnDialog.vue

diff --git a/src/views/dataReport/index.vue b/src/views/dataReport/index.vue
index 71590d7e..75033d60 100644
--- a/src/views/dataReport/index.vue
+++ b/src/views/dataReport/index.vue
@@ -18,10 +18,10 @@
           :props="defaultProps"
           node-key="compositeKey"
           :filter-node-method="filterNode"
-          :default-expand-all="true"
           highlight-current
           :current-node-key="currentNodekey"
           :expand-on-click-node="true"
+          accordion
           @node-click="handleNodeClick"
         >
           <!-- <template class="custom-tree-node" slot-scope="{ node, data }">
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index fbfc31da..32f17854 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -143,8 +143,8 @@ export default {
       .divBottom {
         height: 208px;
         background: rgba(255, 27, 27, 0.2);
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
+        // -webkit-backdrop-filter: blur(10px);
+        // backdrop-filter: blur(10px);
         box-shadow: inset 0 4px 44px 0 rgba(235, 20, 20, 0.69);
         border: 1px solid #ff1b1b;
       }
diff --git a/src/views/homePage/warnMessage/components/warnDialog.vue b/src/views/homePage/warnMessage/components/warnDialog.vue
new file mode 100644
index 00000000..0578beeb
--- /dev/null
+++ b/src/views/homePage/warnMessage/components/warnDialog.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-dialog
+    title="告警详情"
+    :visible.sync="dialogVisible"
+    fullscreen
+    :before-close="handleClose"
+    class="warnDialog"
+  >
+    <div class="warnBox">
+      <div class="search">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <!-- <el-form-item label="审批人">
+            <el-input v-model="formdata.user" placeholder="审批人"></el-input>
+          </el-form-item> -->
+          <el-form-item label="开始日期">
+            <el-date-picker
+              @change="changestartdate"
+              v-model="formdata.starttime"
+              :picker-options="pickerOptions"
+              :clearable="false"
+              type="date"
+              placeholder="开始日期"
+              :default-time="['00:00:00']"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="结束日期">
+            <el-date-picker
+              @change="changeenddate"
+              v-model="formdata.endtime"
+              :clearable="false"
+              :picker-options="pickerOptions"
+              type="date"
+              :default-time="['23:59:59']"
+              placeholder="结束日期"
+              class="ml10"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="warnTable">
+        <el-table
+          ref="restauranttable"
+          :data="tableData"
+          border
+          height="calc(100% - 38px)"
+        >
+          <el-table-column align="center" prop="warnTime" label="报警时间">
+          </el-table-column>
+          <el-table-column align="center" prop="zsbName" label="主设备名称">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="warnDesc"
+            label="告警信息"
+            min-width="200"
+          >
+            <template slot-scope="scope">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="scope.row.warnDesc"
+                placement="top"
+              >
+                <span> {{ scope.row.warnDesc }}</span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" prop="warnValue" label="当前值">
+          </el-table-column>
+          <el-table-column align="center" prop="triggerDesc" label="触发条件">
+          </el-table-column>
+
+          <el-table-column align="center" prop="threshold" label="告警阈值">
+          </el-table-column>
+          <el-table-column align="center" prop="warnLevel" label="告警等级">
+            <template slot-scope="scope">
+              <span v-if="scope.row.warnLevel == 2">高 </span>
+              <span v-else-if="scope.row.warnLevel == 1"> 中 </span>
+              <span v-else-if="scope.row.warnLevel == 0"> 低 </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            :current-page="page"
+            :page-size="pageSize"
+            :page-sizes="[20, 40, 100]"
+            layout="sizes, prev, pager, next, jumper,total"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { warningListApi } from "@/utils/api/index";
+export default {
+  name: "warnDialog",
+  components: {},
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
+      dialogVisible: false,
+      formdata: {},
+      tableData: [],
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {
+    const startDate = new Date(); // 获取当前时间
+    startDate.setHours(0); // 设置小时为23
+    startDate.setMinutes(0); // 设置分钟为59
+    startDate.setSeconds(0); // 设置秒数为59
+    this.$set(this.formdata, "starttime", startDate);
+    console.log(this.formdata.starttime);
+    const currentDate = new Date(); // 获取当前时间
+    currentDate.setHours(23); // 设置小时为23
+    currentDate.setMinutes(59); // 设置分钟为59
+    currentDate.setSeconds(59); // 设置秒数为59
+    this.$set(this.formdata, "endtime", currentDate);
+    console.log("我是开始时间", this.formdata.starttime);
+    console.log("我是结束时间", currentDate);
+  },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+  },
+  mounted() {},
+  methods: {
+    getwarnList(params) {
+      warningListApi(params)
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        val.setHours(23); // 设置小时为23
+        val.setMinutes(59); // 设置分钟为59
+        val.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
+    onSubmit() {
+      console.log(this.formdata);
+      //开始时间和结束时间
+      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      let params = {};
+      params.startTime = this.formdata.starttime;
+      params.endTime = this.formdata.endtime;
+      params.pageSize = this.pageSize;
+      params.pageNum = this.page;
+      console.log(params);
+      this.getwarnList(params);
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.tableData = [];
+      let params = {};
+      params.startTime = this.formdata.starttime;
+      params.endTime = this.formdata.endtime;
+      params.pageSize = this.pageSize;
+      params.pageNum = this.page;
+      console.log(params);
+      this.getwarnList(params);
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.tableData = [];
+      let params = {};
+      params.startTime = this.formdata.starttime;
+      params.endTime = this.formdata.endtime;
+      params.pageSize = this.pageSize;
+      params.pageNum = this.page;
+      console.log(params);
+      this.getwarnList(params);
+    },
+    display(data) {
+      this.dialogVisible = true;
+      this.getwarnList(data);
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.warnDialog {
+  .el-dialog {
+    background-color: #f0f0f0;
+  }
+  .el-dialog__header {
+    background-color: #337ab7;
+    padding: 10px 20px;
+    color: #fff;
+    .el-dialog__title {
+      color: #fff;
+    }
+    .el-dialog__headerbtn {
+      position: absolute;
+      top: 10px;
+      right: 20px;
+      padding: 0;
+      background: 0 0;
+      border: none;
+      outline: 0;
+      cursor: pointer;
+      font-size: 24px;
+      .el-dialog__close {
+        color: #fff;
+      }
+    }
+  }
+  .el-dialog__body {
+    height: calc(100% - 84px);
+    padding: 20px;
+    .warnBox {
+      height: 100%;
+      .search {
+        background-color: #fff;
+        padding: 16px;
+        height: auto;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: 16px;
+        .el-form {
+          .el-form-item {
+            margin-bottom: 0px;
+          }
+        }
+      }
+      .warnTable {
+        background-color: #fff;
+        padding: 16px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        height: calc(100% - 114px);
+      }
+      .pageNation {
+        margin-top: 6px;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/homePage/warnMessage/index.vue b/src/views/homePage/warnMessage/index.vue
index be76adf7..dd47b749 100644
--- a/src/views/homePage/warnMessage/index.vue
+++ b/src/views/homePage/warnMessage/index.vue
@@ -5,6 +5,13 @@
       <span class="arrows3">&gt;</span> {{ pageCardTitle }}
       <span class="arrows3">&lt;</span><span class="arrows2">&lt;</span>
       <span class="arrows1">&lt;</span>
+      <el-button
+        type="text"
+        icon="el-icon-document"
+        class="lookMore"
+        @click="lookMore"
+        >查看全部</el-button
+      >
     </h3>
     <div class="cardContent">
       <el-table
@@ -51,27 +58,61 @@
         </el-table-column>
       </el-table>
     </div>
+    <warnDialog ref="warnRef"></warnDialog>
   </div>
 </template>
 
 <script>
 import { warningListApi } from "@/utils/api/index";
+import warnDialog from "./components/warnDialog.vue";
 export default {
   name: "warnmessage",
-  components: {},
+  components: {
+    warnDialog,
+  },
   data() {
     return {
       pageCardTitle: "告警/故障信息",
       tableData: [],
+      starttime: "",
+      endtime: "",
+      params: {},
     };
   },
   created() {
+    const startDate = new Date(); // 获取当前时间
+    startDate.setHours(0); // 设置小时为23
+    startDate.setMinutes(0); // 设置分钟为59
+    startDate.setSeconds(0); // 设置秒数为59
+    this.starttime = startDate;
+
+    const currentDate = new Date(); // 获取当前时间
+    currentDate.setHours(23); // 设置小时为23
+    currentDate.setMinutes(59); // 设置分钟为59
+    currentDate.setSeconds(59); // 设置秒数为59
+    this.endtime = currentDate;
     this.getwarnList();
   },
   mounted() {},
   methods: {
+    lookMore() {
+      this.params.startTime = this.starttime;
+      this.params.endTime = this.endtime;
+      this.params.pageSize = 1;
+      this.params.pageNum = 20;
+      this.$refs.warnRef.display(this.params);
+    },
     getwarnList() {
-      warningListApi()
+      this.starttime = this.$moment(this.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.endtime = this.$moment(this.endtime).format("YYYY-MM-DD HH:mm:ss");
+
+      this.params.startTime = this.starttime;
+      this.params.endTime = this.endtime;
+      this.params.pageSize = 1;
+      this.params.pageNum = 20;
+      warningListApi(this.params)
         .then((res) => {
           console.log(res);
           this.tableData = res.data.content;
@@ -94,11 +135,12 @@ export default {
     color: #fff;
     font-weight: normal;
     text-align: left;
-    //display: flex;
+    display: flex;
     font-size: 16px;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px dashed #fff;
+
     /* 警告标题箭头 */
     .arrows3 {
       color: #fff;
@@ -109,6 +151,16 @@ export default {
     .arrows1 {
       color: rgba(256, 256, 256, 0.15);
     }
+    .lookMore {
+      margin-left: auto;
+      color: #fff;
+      margin-right: 4px;
+      font-size: 14px;
+      &:hover {
+        color: #03bcff;
+        text-decoration: underline;
+      }
+    }
   }
   .cardContent {
     margin-top: 10px;