From 157f4a96ada9da0088a0a2711d1ca2d79539eec6 Mon Sep 17 00:00:00 2001
From: sunjianxi <it_kangjiawei@163.com>
Date: Wed, 18 Sep 2024 15:02:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E8=8F=9C=E5=8D=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/index/index.vue                   |  10 +-
 src/page/index/sidebar/opsSidebar.vue      |  79 ++++
 src/views/opsVisualization/warnHistory.vue | 445 +++++++++++++++++++++
 3 files changed, 532 insertions(+), 2 deletions(-)
 create mode 100644 src/page/index/sidebar/opsSidebar.vue
 create mode 100644 src/views/opsVisualization/warnHistory.vue

diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index c894bbd..3fc356b 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -8,6 +8,8 @@
 			<!-- 顶部导航栏 -->
 			<top ref="top" />
 		</div>
+
+		<opsSidebar v-if="$route.path.indexOf('opsVisualization') != -1"/>
 		<div class="avue-layout">
 			<div class="avue-main">
 				<!-- 顶部标签卡 -->
@@ -23,8 +25,10 @@
 					<router-view class="avue-view" v-if="!$route.meta.keepAlive" />
 				</div>
 			</div>
+			
 		</div>
 		<div class="avue-shade" @click="showCollapse"></div>
+
 	</div>
 </template>
 
@@ -36,6 +40,7 @@
 	import search from "./search";
 	import top from "./top/";
 	import sidebar from "./sidebar/";
+	import opsSidebar from "./sidebar/opsSidebar";
 	import admin from "@/util/admin";
 	import {
 		validatenull
@@ -52,7 +57,8 @@
 			top,
 			tags,
 			search,
-			sidebar
+			sidebar,
+			opsSidebar
 		},
 		name: "index",
 		provide() {
@@ -156,4 +162,4 @@
 	.avue-layout {
 		height: calc(100% - 64px);
 	}
-</style>
+</style>
diff --git a/src/page/index/sidebar/opsSidebar.vue b/src/page/index/sidebar/opsSidebar.vue
new file mode 100644
index 0000000..098af36
--- /dev/null
+++ b/src/page/index/sidebar/opsSidebar.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="page">
+      <div  style="background: #1e283d; height: 92vh; width: 218px">
+        <el-menu
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+          background-color="#1E283D"
+          active-background-color="red"
+          text-color="#fff"
+          active-text-color="#ffd04b"
+          :default-active="$route.path"
+          router
+        >
+          <el-submenu index="1">
+            <template slot="title">
+              <span class="point"></span>
+              <span>系统监控</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/opsVisualization/index">服务监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/warnHistory">Redis监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/index">网络监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/index">系统硬件监控</el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+          <el-submenu index="2">
+            <template slot="title">
+              <i class="point"></i>
+              <span>业务数据运维</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/opsVisualization/index">服务监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/index">Redis监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/index">网络监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/index">系统硬件监控</el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-menu>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  
+  export default {
+    data() {
+      return {};
+    },
+    watch: {},
+    computed: {},
+    mounted() {},
+    methods: {},
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .page{
+    position: absolute;
+    top: 64px;
+    left: 0;
+    z-index: 1027;
+  }
+  /deep/.el-menu-item-group__title {
+    padding: 0;
+  }
+  .point {
+    width: 4px;
+    height: 4px;
+    background: #fff;
+    opacity: 0.7;
+    display: inline-block;
+    margin: 0 20px 0 30px;
+    border-radius: 50%;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/opsVisualization/warnHistory.vue b/src/views/opsVisualization/warnHistory.vue
new file mode 100644
index 0000000..3186560
--- /dev/null
+++ b/src/views/opsVisualization/warnHistory.vue
@@ -0,0 +1,445 @@
+<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-date-picker
+							v-model="startDate"
+							type="date"
+							placeholder="选择日期"
+							value-format = 'yyyy-MM-dd'
+							format="yyyy-MM-dd"
+						>
+						</el-date-picker>
+					</template>
+					<template slot-scope="scope" slot="endDateSearch">
+						<el-date-picker
+							v-model="endDate"
+							type="date"
+							placeholder="选择日期"
+							value-format = 'yyyy-MM-dd'
+							format="yyyy-MM-dd"
+						>
+						</el-date-picker>
+					</template>
+				</avue-crud>
+			</basic-container>
+		</el-col>
+	</el-row>
+</template>
+
+<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'
+
+	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) 
+			},
+
+			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;
+					
+					});
+				
+				// 	this.selectionClear();
+			},
+			// treeLoad(tree, treeNode, resolve) {
+			// 	const parentId = tree.id;
+			// 	getLazyList(parentId).then(res => {
+			// 		resolve(res.data.data);
+			// 	});
+			// }
+		}
+	};
+</script>
+
+<style>
+</style>