From 38a982436dd4996394ceefe82250923931f96ea0 Mon Sep 17 00:00:00 2001
From: sunjianxi <it_kangjiawei@163.com>
Date: Thu, 19 Sep 2024 10:30:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E6=95=B0=E6=8D=AE=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=20-=20=E6=8A=A5=E8=AD=A6=E4=BF=A1=E6=81=AF=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/opsVisualization/warnHistory.vue | 1040 ++++++++++++--------
 1 file changed, 621 insertions(+), 419 deletions(-)

diff --git a/src/views/opsVisualization/warnHistory.vue b/src/views/opsVisualization/warnHistory.vue
index 3186560..bbc8688 100644
--- a/src/views/opsVisualization/warnHistory.vue
+++ b/src/views/opsVisualization/warnHistory.vue
@@ -1,28 +1,46 @@
 <template>
-	<el-row>
-		<el-col :span="3">
-			<div class="box">
-				<el-scrollbar>
-					<basic-container>
-						<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
-					</basic-container>
-				</el-scrollbar>
-			</div>
-		</el-col>
-		<el-col :span="21">
-			<basic-container>
-				<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
-					:permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @row-del="rowDel"
-					@row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
-					@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
-					@refresh-change="refreshChange" @on-load="onLoad" @tree-load="treeLoad" :page.sync="page">
-					<template slot-scope="scope" slot="areaSearch">
-						<el-select v-model="area">
-							<el-option label="业务区" value="1"></el-option>
-							<el-option label="塔台" value="2"></el-option>
-						</el-select>
-					</template>
-					<template slot-scope="scope" slot="startDateSearch">
+  <el-row>
+    <el-col :span="3"> </el-col>
+    <el-col :span="21">
+      <basic-container>
+        <avue-crud
+          :option="option"
+          :table-loading="loading"
+          :data="data"
+          ref="crud"
+          v-model="form"
+          :permission="permissionList"
+          :before-open="beforeOpen"
+          :before-close="beforeClose"
+          @row-del="rowDel"
+          @row-update="rowUpdate"
+          @row-save="rowSave"
+          @search-change="searchChange"
+          @search-reset="searchReset"
+          @selection-change="selectionChange"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+          @refresh-change="refreshChange"
+          @on-load="onLoad"
+          @tree-load="treeLoad"
+          :page.sync="page"
+        >
+          <template slot-scope="scope" slot="areaSearch">
+            <el-select v-model="area">
+              <el-option label="业务区" value="1"></el-option>
+              <el-option label="塔台" value="2"></el-option>
+            </el-select>
+          </template>
+          <template slot-scope="scope" slot="startDateSearch">
+            <el-input
+              v-model="startDate"
+              placeholder=""
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+            >
+            </el-input>
+          </template>
+          <!-- <template slot-scope="scope" slot="startDateSearch">
 						<el-date-picker
 							v-model="startDate"
 							type="date"
@@ -41,405 +59,589 @@
 							format="yyyy-MM-dd"
 						>
 						</el-date-picker>
-					</template>
-				</avue-crud>
-			</basic-container>
-		</el-col>
-	</el-row>
+					</template> -->
+        </avue-crud>
+        <div class="box">
+          <div>
+            <span class="box_tab" style="margin-right: 50px">报警详情信息</span>
+            <span class="box_tab" style="color: #2b8ee5">报警信息记录</span>
+          </div>
+          <el-select placeholder="按报警时间查询" class="box_select">
+          </el-select>
+          <div class="timelineBox">
+            <div>
+              <div class="timelineBoxTitle">dtu报警信息记录</div>
+              <div class="timelineBoxContent">
+                <div
+                  v-for="(item, index) in myList"
+                  :key="item.time"
+                  style="display: flex; align-items: center; line-height: 50px"
+                >
+                  {{ item.time }}
+                  <div
+                    style="
+                      width: 40px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      position: relative;
+                    "
+                  >
+                    <div
+                      style="
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 50%;
+                        background: #e1e1e1;
+                      "
+                    ></div>
+                    <div
+                      v-if="index < myList.length - 1"
+                      style="
+                        border-right: 1px dashed #d1d1d1;
+                        height: 45px;
+                        position: absolute;
+                        left: 19px;
+                        top: 9px;
+                      "
+                    ></div>
+                  </div>
+                  {{ item.content }}dtu编号:{{ item.id }}
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="timelineBoxTitle">设备报警信息详情</div>
+              <div class="timelineBoxContent">
+                <div
+                  v-for="(item, index) in myList"
+                  :key="item.time"
+                  style="display: flex; align-items: center; line-height: 50px"
+                >
+                  {{ item.time }}
+                  <div
+                    style="
+                      width: 40px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      position: relative;
+                    "
+                  >
+                    <div
+                      style="
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 50%;
+                        background: #e1e1e1;
+                      "
+                    ></div>
+                    <div
+                      v-if="index < myList.length - 1"
+                      style="
+                        border-right: 1px dashed #d1d1d1;
+                        height: 45px;
+                        position: absolute;
+                        left: 19px;
+                        top: 9px;
+                      "
+                    ></div>
+                  </div>
+                  {{ item.content }}dtu编号:{{ item.id }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </basic-container>
+    </el-col>
+  </el-row>
 </template>
-
+<style  lang="scss" scoped>
+.box {
+  width: 100%;
+  height: 26vh;
+}
+.tab_btn {
+  cursor: pointer;
+}
+.box_select {
+  width: 183px;
+  height: 30px;
+  margin-top: 20px;
+}
+.timelineBox {
+  margin-top: 30px;
+  width: 100%;
+  height: 19vh;
+  display: flex;
+  justify-content: space-around;
+  border: 1px solid #d1d1d1;
+  > div {
+    width: 50%;
+  }
+  > :nth-child(1) {
+    border-right: 1px solid #d1d1d1;
+  }
+}
+.timelineBoxTitle {
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  background: #e5e5e5;
+}
+.timelineBoxContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+  height: 132px;
+}
+</style>
 <script>
-	import {
-		getLazyList,
-		remove,
-		update,
-		add,
-		getDept,
-		getDeptTree
-	} from "@/api/system/dept";
-	import {
-		mapGetters
-	} from "vuex";
-	import website from '@/config/website';
-	import {getAlarmList,getDeptLazyTree} from '@/api/equipment'
+import {
+  getLazyList,
+  remove,
+  update,
+  add,
+  getDept,
+  getDeptTree,
+} from "@/api/system/dept";
+import { mapGetters } from "vuex";
+import website from "@/config/website";
+import { getAlarmList, getDeptLazyTree } from "@/api/equipment";
 
-	var DIC = {
-		alarmType: [{
-			label: '未知',
-			value: -1
-		},{
-			label: '事件报警',
-			value: 1
-		}, {
-			label: '设备报警',
-			value: 2
-		}],
-		statusType:[{
-			label:'报警中',
-			value:1
-		},{
-			label:'已恢复',
-			value:2
-		}],
-		aereaType:[{
-			label:'业务区',
-			value:'1'
-		},{
-			label:'塔台',
-			value:'2'
-		}],
-		recoveryType:[{
-			label: ' ',
-			value: -1
-		},{
-			label: '手动',
-			value: 1
-		}, {
-			label: '自动',
-			value: 0
-		}]
-	}
-	export default {
-		data() {
-			return {
-				area:this.$route.query.area ? this.$route.query.area : '1',
-				classCode:this.$route.query.classCode ? this.$route.query.classCode : '',
-				startDate:'',
-				endDate:'',
-				form: {},
-				selectionList: [],
-				query: {},
-				loading: false,
-				parentId: 0,
-				page: {
-					pageSize: 10,
-					currentPage: 1,
-					total: 0,
-				},
-				option: {
-					lazy: true,
-					tip: false,
-					// simplePage: true,
-					searchShow: true,
-					searchMenuSpan: 6,
-					tree: true,
-					border: true,
-					index: true,
-					selection: true,
-					viewBtn: true,
-					menuWidth: 80,
-					dialogClickModal: false,
-					addBtn:false,
-					delBtn:false,
-					editBtn:false,
-					column: [
-						{
-							label:'设备名称',
-							prop:'equipName',
-							align:'center'
-						},
-						{
-							label: "设备位置",
-							prop: "location",
-							align:'center'
-						},
-						{
-							label: "报警信息",
-							prop: "warnContent",
-							align:'center'
-						},
-						{
-							label:'报警区域',
-							prop:'area',
-							searchslot:true,
-							search:true,
-							type:"select",
-							dicData: DIC.aereaType,
-							// hide:true,
-							row: false,
-							display: false,
-							viewDisplay:false,
-							align:'center',
-						},
-						{
-							label: "报警类型",
-							prop: "warnType",
-							search: true,
-							type:"select",
-							dicData: DIC.alarmType,
-							align:'center',
-						},
-						{
-							label: "报警状态",
-							prop: "status",
-							type:"select",
-							dicData: DIC.statusType,
-							align:'center',
-						},
-						{
-							label: "报警时间",
-							prop: "warnDate",
-							type:'datetime',
-							width:"140",
-							// format:'yyyy-MM-dd',
-							// valueFormat:'yyyy-MM-dd',
-							align:'center',
-						},
-						{
-							label: "开始时间",
-							prop: "startDate",
-							align:'center',
-							searchslot:true,
-							hide:true,
-							search:true,
-							row: false,
-							display: false,
-							viewDisplay:false
-						},
-						{
-							label: "结束时间",
-							prop: "endDate",
-							align:'center',
-							searchslot:true,
-							hide:true,
-							search:true,
-							row: false,
-							display: false,
-							viewDisplay:false
-						},
-						{
-							label: "恢复方式",
-							prop: "recoveryType",
-							dicData: DIC.recoveryType,
-							type:"select",
-							align:'center',	
-						},
-						{
-							label: "恢复人",
-							prop: "recoveryPerson",
-							align:'center',
-						},
-						{
-							label: "恢复时间",
-							prop: "recoveryDate",
-							type:'datetime',
-							align:'center',
-						},
-					]
-				},
-				data: [],
-				treeData:[],
-				treeOption: {
-					nodeKey: 'id',
-					lazy: true,
-					treeLoad: function(node, resolve) {
-						const parentId = (node.level === 0) ? 0 : node.data.id;
-						getDeptLazyTree(parentId).then(res => {
-							resolve(res.data.data.map(item => {
-								return {
-									...item,
-									leaf: !item.hasChildren
-								}
-							}))
-						});
-					},
-					addBtn: false,
-					menu: false,
-					size: 'small',
-					props: {
-						labelText: '标题',
-						label: 'title',
-						value: 'value',
-						children: 'children'
-					}
-				},
-			};
-		},
-		computed: {
-			...mapGetters(["userInfo", "permission"]),
-			permissionList() {
-				return {
-					addBtn: this.vaildData(this.permission.dept_add, false),
-					viewBtn: this.vaildData(this.permission.dept_view, false),
-					delBtn: this.vaildData(this.permission.dept_delete, false),
-					editBtn: this.vaildData(this.permission.dept_edit, false)
-				};
-			},
-			ids() {
-				let ids = [];
-				this.selectionList.forEach(ele => {
-					ids.push(ele.id);
-				});
-				return ids.join(",");
-			}
-		},
-		methods: {
-			nodeClick(data){
-				this.classCode = data.key;
-				this.page.currentPage = 1;
-				this.onLoad(this.page) 
-			},
+var DIC = {
+  alarmType: [
+    {
+      label: "未知",
+      value: -1,
+    },
+    {
+      label: "事件报警",
+      value: 1,
+    },
+    {
+      label: "设备报警",
+      value: 2,
+    },
+  ],
+  statusType: [
+    {
+      label: "报警中",
+      value: 1,
+    },
+    {
+      label: "已恢复",
+      value: 2,
+    },
+  ],
+  aereaType: [
+    {
+      label: "业务区",
+      value: "1",
+    },
+    {
+      label: "塔台",
+      value: "2",
+    },
+  ],
+  recoveryType: [
+    {
+      label: " ",
+      value: -1,
+    },
+    {
+      label: "手动",
+      value: 1,
+    },
+    {
+      label: "自动",
+      value: 0,
+    },
+  ],
+};
+export default {
+  data() {
+    return {
+      myList: [
+        {
+          time: "2019-08-07 15:36:48",
+          content: "dtu1002报警",
+          id: 1,
+        },
+        {
+          time: "2019-08-07 15:36:48",
+          content: "dtu1002报警",
+          id: 2,
+        },
+        {
+          time: "2019-08-07 15:36:48",
+          content: "dtu1002报警",
+          id: 2,
+        },
+        {
+          time: "2019-08-07 15:36:48",
+          content: "dtu1002报警",
+          id: 2,
+        },
+        {
+          time: "2019-08-07 15:36:48",
+          content: "dtu1002报警",
+          id: 2,
+        },
+        {
+          time: "2019-08-07 15:36:48",
+          content: "dtu1002报警",
+          id: 2,
+        },
+      ],
+      area: this.$route.query.area ? this.$route.query.area : "1",
+      classCode: this.$route.query.classCode ? this.$route.query.classCode : "",
+      startDate: "",
+      endDate: "",
+      form: {},
+      selectionList: [],
+      query: {},
+      loading: false,
+      parentId: 0,
+      page: {
+        pageSize: 6,
+        currentPage: 1,
+        total: 0,
+      },
+      option: {
+        lazy: true,
+        tip: false,
+        // simplePage: true,
+        searchShow: true,
+        searchMenuSpan: 6,
+        tree: true,
+        border: true,
+        index: true,
+        selection: true,
+        viewBtn: true,
+        menuWidth: 80,
+        dialogClickModal: false,
+        addBtn: false,
+        delBtn: false,
+        editBtn: false,
+        column: [
+          {
+            label: "通讯状态",
+            prop: "equipName",
+            align: "center",
+          },
+          {
+            label: "业务类别",
+            prop: "location",
+            align: "center",
+          },
+          {
+            label: "报警信息",
+            prop: "warnContent",
+            align: "center",
+          },
+          {
+            label: "业务类型",
+            prop: "warnType",
+            search: true,
+            type: "select",
+            dicData: DIC.alarmType,
+            align: "center",
+          },
+          {
+            label: "状态",
+            prop: "warnType",
+            search: true,
+            type: "select",
+            dicData: DIC.alarmType,
+            align: "center",
+          },
+          {
+            label: "报警状态",
+            prop: "status",
+            type: "select",
+            dicData: DIC.statusType,
+            align: "center",
+          },
+          {
+            label: "报警时间",
+            prop: "warnDate",
+            type: "datetime",
+            width: "140",
+            // format:'yyyy-MM-dd',
+            // valueFormat:'yyyy-MM-dd',
+            align: "center",
+          },
+          {
+            label: "",
+            prop: "startDate",
+            align: "center",
+            searchslot: true,
+            hide: true,
+            search: true,
+            row: false,
+            display: false,
+            viewDisplay: false,
+          },
+          // {
+          // 	label: "结束时间",
+          // 	prop: "endDate",
+          // 	align:'center',
+          // 	searchslot:true,
+          // 	hide:true,
+          // 	search:true,
+          // 	row: false,
+          // 	display: false,
+          // 	viewDisplay:false
+          // },
+          {
+            label: "恢复方式",
+            prop: "recoveryType",
+            dicData: DIC.recoveryType,
+            type: "select",
+            align: "center",
+          },
+          {
+            label: "恢复人",
+            prop: "recoveryPerson",
+            align: "center",
+          },
+          {
+            label: "恢复时间",
+            prop: "recoveryDate",
+            type: "datetime",
+            align: "center",
+          },
+        ],
+      },
+      data: [],
+      treeData: [],
+      treeOption: {
+        nodeKey: "id",
+        lazy: true,
+        treeLoad: function (node, resolve) {
+          const parentId = node.level === 0 ? 0 : node.data.id;
+          getDeptLazyTree(parentId).then((res) => {
+            resolve(
+              res.data.data.map((item) => {
+                return {
+                  ...item,
+                  leaf: !item.hasChildren,
+                };
+              })
+            );
+          });
+        },
+        addBtn: false,
+        menu: false,
+        size: "small",
+        props: {
+          labelText: "标题",
+          label: "title",
+          value: "value",
+          children: "children",
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+    permissionList() {
+      return {
+        addBtn: this.vaildData(this.permission.dept_add, false),
+        viewBtn: this.vaildData(this.permission.dept_view, false),
+        delBtn: this.vaildData(this.permission.dept_delete, false),
+        editBtn: this.vaildData(this.permission.dept_edit, false),
+      };
+    },
+    ids() {
+      let ids = [];
+      this.selectionList.forEach((ele) => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    },
+  },
+  methods: {
+    nodeClick(data) {
+      this.classCode = data.key;
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+    },
 
-			initData() {
-				getDeptTree().then(res => {
-					const column = this.findObject(this.option.column, "parentId");
-					column.dicData = res.data.data;
-				});
-			},
-			handleAdd(row) {
-				this.parentId = row.id;
-				const column = this.findObject(this.option.column, "parentId");
-				column.value = row.id;
-				column.addDisabled = true;
-				this.$refs.crud.rowAdd();
-			},
-			rowSave(row, done, loading) {
-				add(row).then((res) => {
-					// 获取新增数据的相关字段
-					const data = res.data.data;
-					row.id = data.id;
-					row.deptCategoryName = data.deptCategoryName;
-					row.tenantId = data.tenantId;
-					this.$message({
-						type: "success",
-						message: "操作成功!"
-					});
-					// 数据回调进行刷新
-					done(row);
-				}, error => {
-					window.console.log(error);
-					loading();
-				});
-			},
-			rowUpdate(row, index, done, loading) {
-				update(row).then(() => {
-					this.$message({
-						type: "success",
-						message: "操作成功!"
-					});
-					// 数据回调进行刷新
-					done(row);
-				}, error => {
-					window.console.log(error);
-					loading();
-				});
-			},
-			rowDel(row, index, done) {
-				this.$confirm("确定将选择数据删除?", {
-						confirmButtonText: "确定",
-						cancelButtonText: "取消",
-						type: "warning"
-					})
-					.then(() => {
-						return remove(row.id);
-					})
-					.then(() => {
-						this.$message({
-							type: "success",
-							message: "操作成功!"
-						});
-						// 数据回调进行刷新
-						done(row);
-					});
-			},
-			handleDelete() {
-				if (this.selectionList.length === 0) {
-					this.$message.warning("请选择至少一条数据");
-					return;
-				}
-				this.$confirm("确定将选择数据删除?", {
-						confirmButtonText: "确定",
-						cancelButtonText: "取消",
-						type: "warning"
-					})
-					.then(() => {
-						return remove(this.ids);
-					})
-					.then(() => {
-						// 刷新表格数据并重载
-						this.data = [];
-						this.parentId = 0;
-						this.$refs.crud.refreshTable();
-						this.$refs.crud.toggleSelection();
-						// 表格数据重载
-						this.onLoad(this.page);
-						this.$message({
-							type: "success",
-							message: "操作成功!"
-						});
-					});
-			},
-			searchReset() {
-				this.query.warnType = '';
-				this.query.area = '1';
-				this.startDate = '';
-				this.page.currentPage = 1
-				this.onLoad(this.page);
-			},
-			searchChange(params, done) {
-				this.query.warnType = params.warnType;
-				this.query.startDate = params.startDate;
-				this.page.currentPage = 1;
-				this.onLoad();
-				done();
-			},
-			selectionChange(list) {
-				this.selectionList = list;
-			},
-			selectionClear() {
-				this.selectionList = [];
-				this.$refs.crud.toggleSelection();
-			},
-			beforeOpen(done, type) {
-				if (["add", "edit"].includes(type)) {
-					this.initData();
-				}
-				if (["edit", "view"].includes(type)) {
+    initData() {
+      getDeptTree().then((res) => {
+        const column = this.findObject(this.option.column, "parentId");
+        column.dicData = res.data.data;
+      });
+    },
+    handleAdd(row) {
+      this.parentId = row.id;
+      const column = this.findObject(this.option.column, "parentId");
+      column.value = row.id;
+      column.addDisabled = true;
+      this.$refs.crud.rowAdd();
+    },
+    rowSave(row, done, loading) {
+      add(row).then(
+        (res) => {
+          // 获取新增数据的相关字段
+          const data = res.data.data;
+          row.id = data.id;
+          row.deptCategoryName = data.deptCategoryName;
+          row.tenantId = data.tenantId;
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          // 数据回调进行刷新
+          done(row);
+        },
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
+    },
+    rowUpdate(row, index, done, loading) {
+      update(row).then(
+        () => {
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          // 数据回调进行刷新
+          done(row);
+        },
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
+    },
+    rowDel(row, index, done) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          // 数据回调进行刷新
+          done(row);
+        });
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
+          // 刷新表格数据并重载
+          this.data = [];
+          this.parentId = 0;
+          this.$refs.crud.refreshTable();
+          this.$refs.crud.toggleSelection();
+          // 表格数据重载
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+        });
+    },
+    searchReset() {
+      this.query.warnType = "";
+      this.query.area = "1";
+      this.startDate = "";
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query.warnType = params.warnType;
+      this.query.startDate = params.startDate;
+      this.page.currentPage = 1;
+      this.onLoad();
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    beforeOpen(done, type) {
+      if (["add", "edit"].includes(type)) {
+        this.initData();
+      }
+      if (["edit", "view"].includes(type)) {
+        // getDept(this.form.id).then(res => {
+        // 	this.form = res.data.data;
+        // });
+      }
+      done();
+    },
+    beforeClose(done) {
+      // this.parentId = "";
+      // const column = this.findObject(this.option.column, "parentId");
+      // column.value = "";
+      // column.addDisabled = false;
+      done();
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad() {
+      this.loading = true;
+      getAlarmList(
+        this.query.warnType,
+        this.startDate,
+        this.endDate,
+        this.page.currentPage,
+        this.page.pageSize,
+        this.area,
+        this.classCode
+      ).then((res) => {
+        this.data = res.data.data.records;
+        // this.page.total = res.data.data.total
+        this.page.total = res.data.data.total;
+        console.log(this.page);
+        this.loading = false;
+      });
 
-					// getDept(this.form.id).then(res => {
-					// 	this.form = res.data.data;
-					// });
-				}
-				done();
-			},
-			beforeClose(done) {
-				// this.parentId = "";
-				// const column = this.findObject(this.option.column, "parentId");
-				// column.value = "";
-				// column.addDisabled = false;
-				done();
-			},
-			currentChange(currentPage) {
-				this.page.currentPage = currentPage;
-			},
-			sizeChange(pageSize) {
-				this.page.pageSize = pageSize;
-			},
-			refreshChange() {
-				this.onLoad(this.page, this.query);
-			},
-			onLoad() {
-				this.loading = true;
-				getAlarmList(this.query.warnType,this.startDate,this.endDate,this.page.currentPage,this.page.pageSize,this.area,this.classCode).then(res => {
-					this.data = res.data.data.records;
-					// this.page.total = res.data.data.total
-					this.page.total = res.data.data.total;
-					console.log(this.page)
-					this.loading = false;
-					
-					});
-				
-				// 	this.selectionClear();
-			},
-			// treeLoad(tree, treeNode, resolve) {
-			// 	const parentId = tree.id;
-			// 	getLazyList(parentId).then(res => {
-			// 		resolve(res.data.data);
-			// 	});
-			// }
-		}
-	};
+      // 	this.selectionClear();
+    },
+    // treeLoad(tree, treeNode, resolve) {
+    // 	const parentId = tree.id;
+    // 	getLazyList(parentId).then(res => {
+    // 		resolve(res.data.data);
+    // 	});
+    // }
+  },
+};
 </script>
 
-<style>
-</style>
+