diff --git a/src/api/opsVisualization/alarmProcess.js b/src/api/opsVisualization/alarmProcess.js
new file mode 100644
index 0000000..ba4380b
--- /dev/null
+++ b/src/api/opsVisualization/alarmProcess.js
@@ -0,0 +1,19 @@
+import request from '@/router/axios';
+
+//设备类型通讯链路及排除方案
+export const getWarnPoint = (params) => {
+  return request({
+    url: '/kgApi/monitor-business/getWarnPoint',
+    method: 'get',
+    params
+  })
+}
+//排查方案信息列表
+export const getResolveTips = (params) => {
+  return request({
+    url: '/kgApi/monitor-business/getResolveTips',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/api/opsVisualization/serviceDataOAM.js b/src/api/opsVisualization/serviceDataOAM.js
new file mode 100644
index 0000000..1f51a2f
--- /dev/null
+++ b/src/api/opsVisualization/serviceDataOAM.js
@@ -0,0 +1,25 @@
+import request from '@/router/axios';
+//报警设备列表
+export const getEquipList = (params) => {
+  return request({
+    url: '/kgApi/monitor-business/getEquipList',
+    method: 'get',
+    params
+  })
+}
+//当前报警信息
+export const getWarnMsg = (params) => {
+  return request({
+    url: '/kgApi/monitor-business/getWarnMsg',
+    method: 'get',
+    params
+  })
+}
+//报警记录
+export const getWarnHisList = (params) => {
+  return request({
+    url: '/kgApi/monitor-business/getWarnHisList',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 3fc356b..546f812 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -1,112 +1,106 @@
 <template>
-	<div class="avue-contail" :class="{'avue--collapse':isCollapse}">
-		<div class="avue-header">
-			<div class="avue-left">
-				<!-- 左侧导航栏 -->
-				<sidebar />
-			</div>
-			<!-- 顶部导航栏 -->
-			<top ref="top" />
-		</div>
-
-		<opsSidebar v-if="$route.path.indexOf('opsVisualization') != -1"/>
-		<div class="avue-layout">
-			<div class="avue-main">
-				<!-- 顶部标签卡 -->
-				<!-- <tags /> -->
-				<transition name="fade-scale">
-					<search class="avue-view" v-show="isSearch"></search>
-				</transition>
-				<!-- 主体视图层 -->
-				<div style="height:100%;width: 100%;overflow: auto;" id="avue-view" v-show="!isSearch">
-					<keep-alive>
-						<router-view class="avue-view" v-if="$route.meta.keepAlive" />
-					</keep-alive>
-					<router-view class="avue-view" v-if="!$route.meta.keepAlive" />
-				</div>
-			</div>
-			
-		</div>
-		<div class="avue-shade" @click="showCollapse"></div>
-
-	</div>
+  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
+    <div class="avue-header">
+      <div class="avue-left">
+        <!-- 左侧导航栏 -->
+        <sidebar />
+      </div>
+      <!-- 顶部导航栏 -->
+      <top ref="top" />
+    </div>
+    <!-- 运维可视化化左侧导航栏 -->
+    <opsSidebar v-if="$route.path.indexOf('opsVisualization') != -1" />
+    <div class="avue-layout">
+      <div class="avue-main">
+        <!-- 顶部标签卡 -->
+        <!-- <tags /> -->
+        <transition name="fade-scale">
+          <search class="avue-view" v-show="isSearch"></search>
+        </transition>
+        <!-- 主体视图层 -->
+        <div
+          style="height: 100%; width: 100%; overflow: auto"
+          id="avue-view"
+          v-show="!isSearch"
+        >
+          <keep-alive>
+            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
+          </keep-alive>
+          <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
+        </div>
+      </div>
+    </div>
+    <div class="avue-shade" @click="showCollapse"></div>
+  </div>
 </template>
 
 <script>
-	import {
-		mapGetters
-	} from "vuex";
-	import tags from "./tags";
-	import search from "./search";
-	import top from "./top/";
-	import sidebar from "./sidebar/";
-	import opsSidebar from "./sidebar/opsSidebar";
-	import admin from "@/util/admin";
-	import {
-		validatenull
-	} from "@/util/validate";
-	import {
-		calcDate
-	} from "@/util/date.js";
-	import {
-		getStore
-	} from "@/util/store.js";
+import { mapGetters } from "vuex";
+import tags from "./tags";
+import search from "./search";
+import top from "./top/";
+import sidebar from "./sidebar/";
+import opsSidebar from "./sidebar/opsSidebar";
+import admin from "@/util/admin";
+import { validatenull } from "@/util/validate";
+import { calcDate } from "@/util/date.js";
+import { getStore } from "@/util/store.js";
 
-	export default {
-		components: {
-			top,
-			tags,
-			search,
-			sidebar,
-			opsSidebar
-		},
-		name: "index",
-		provide() {
-			return {
-				index: this
-			};
-		},
-		data() {
-			return {
-				//搜索控制
-				isSearch: false,
-				//刷新token锁
-				refreshLock: false,
-				//刷新token的时间
-				refreshTime: ""
-			};
-		},
-		created() {
-			//实时检测刷新token
-			this.refreshToken();
-		},
-		mounted() {
-			this.init();
-		},
-		computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
-		props: [],
-		methods: {
-			showCollapse() {
-				this.$store.commit("SET_COLLAPSE");
-			},
-			// 初始化
-			init() {
-				this.$store.commit("SET_SCREEN", admin.getScreen());
-				window.onresize = () => {
-					setTimeout(() => {
-						this.$store.commit("SET_SCREEN", admin.getScreen());
-					}, 0);
-				};
-				this.$store.dispatch("FlowRoutes").then(() => {});
-			},
-			//打开菜单
-			openMenu(item = {}) {
-				this.$store.dispatch("GetMenu", item.id).then(data => {
-					if (data.length !== 0) {
-						this.$router.$avueRouter.formatRoutes(data, true);
-					}
-					//当点击顶部菜单后默认打开第一个菜单
-					/*if (!this.validatenull(item)) {
+export default {
+  components: {
+    top,
+    tags,
+    search,
+    sidebar,
+    opsSidebar,
+  },
+  name: "index",
+  provide() {
+    return {
+      index: this,
+    };
+  },
+  data() {
+    return {
+      //搜索控制
+      isSearch: false,
+      //刷新token锁
+      refreshLock: false,
+      //刷新token的时间
+      refreshTime: "",
+    };
+  },
+  created() {
+    //实时检测刷新token
+    this.refreshToken();
+  },
+  mounted() {
+    this.init();
+  },
+  computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
+  props: [],
+  methods: {
+    showCollapse() {
+      this.$store.commit("SET_COLLAPSE");
+    },
+    // 初始化
+    init() {
+      this.$store.commit("SET_SCREEN", admin.getScreen());
+      window.onresize = () => {
+        setTimeout(() => {
+          this.$store.commit("SET_SCREEN", admin.getScreen());
+        }, 0);
+      };
+      this.$store.dispatch("FlowRoutes").then(() => {});
+    },
+    //打开菜单
+    openMenu(item = {}) {
+      this.$store.dispatch("GetMenu", item.id).then((data) => {
+        if (data.length !== 0) {
+          this.$router.$avueRouter.formatRoutes(data, true);
+        }
+        //当点击顶部菜单后默认打开第一个菜单
+        /*if (!this.validatenull(item)) {
 					  let itemActive = {},
 					    childItemActive = 0;
 					  if (item.path) {
@@ -126,40 +120,40 @@
 					    }, itemActive.meta)
 					  });
 					}*/
-
-				});
-			},
-			// 定时检测token
-			refreshToken() {
-				this.refreshTime = setInterval(() => {
-					const token = getStore({
-						name: "token",
-						debug: true
-					}) || {};
-					const date = calcDate(token.datetime, new Date().getTime());
-					if (validatenull(date)) return;
-					if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
-						this.refreshLock = true;
-						this.$store
-							.dispatch("refreshToken")
-							.then(() => {
-								this.refreshLock = false;
-							})
-							.catch(() => {
-								this.refreshLock = false;
-							});
-					}
-				}, 10000);
-			}
-		}
-	};
+      });
+    },
+    // 定时检测token
+    refreshToken() {
+      this.refreshTime = setInterval(() => {
+        const token =
+          getStore({
+            name: "token",
+            debug: true,
+          }) || {};
+        const date = calcDate(token.datetime, new Date().getTime());
+        if (validatenull(date)) return;
+        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
+          this.refreshLock = true;
+          this.$store
+            .dispatch("refreshToken")
+            .then(() => {
+              this.refreshLock = false;
+            })
+            .catch(() => {
+              this.refreshLock = false;
+            });
+        }
+      }, 10000);
+    },
+  },
+};
 </script>
 <style scoped type="text/css">
-	.avue-left {
-		position: relative;
-		width: 80%;
-	}
-	.avue-layout {
-		height: calc(100% - 64px);
-	}
+.avue-left {
+  position: relative;
+  width: 80%;
+}
+.avue-layout {
+  height: calc(100% - 64px);
+}
 </style>
diff --git a/src/page/index/sidebar/opsSidebar.vue b/src/page/index/sidebar/opsSidebar.vue
index b7d0db9..6041075 100644
--- a/src/page/index/sidebar/opsSidebar.vue
+++ b/src/page/index/sidebar/opsSidebar.vue
@@ -6,37 +6,37 @@
         @open="handleOpen"
         @close="handleClose"
         background-color="#1E283D"
-        active-background-color="red"
         text-color="#fff"
-        active-text-color="#ffd04b"
+        active-text-color="#04D4FF"
         :default-active="$route.path"
+        :unique-opened="true"
         router
       >
-        <el-submenu index="1">
+        <el-submenu index="1" popper-class="red">
           <template slot="title">
             <span class="point"></span>
             <span>系统监控</span>
           </template>
           <el-menu-item-group>
-            <el-menu-item index="/opsVisualization/tuobu"
-              >系统监控</el-menu-item
-            >
-            <el-menu-item index="/opsVisualization/systemMonitoring"
-              >服务监控</el-menu-item
-            >
+            <el-menu-item index="/opsVisualization/tuobu">
+              系统监控
+            </el-menu-item>
+            <el-menu-item index="/opsVisualization/systemMonitoring">
+              服务监控
+            </el-menu-item>
           </el-menu-item-group>
         </el-submenu>
-        <el-submenu index="2">
+        <el-submenu index="2" popper-class="red">
           <template slot="title">
             <i class="point"></i>
-            <span>业务数据运维</span>
+            <span> 业务数据运维</span>
           </template>
           <el-menu-item-group>
-            <el-menu-item index="/opsVisualization/alarmProcess"
-              >业务数据监控</el-menu-item
+            <el-menu-item index="/opsVisualization/alarmProcess">
+              业务数据监控</el-menu-item
             >
-            <el-menu-item index="/opsVisualization/serviceDataOAM"
-              >报警信息记录</el-menu-item
+            <el-menu-item index="/opsVisualization/serviceDataOAM">
+              报警信息记录</el-menu-item
             >
           </el-menu-item-group>
         </el-submenu>
@@ -50,14 +50,46 @@ export default {
   data() {
     return {};
   },
-  watch: {},
+  watch: {
+    $route(to, from) {
+      if (
+        this.$route.path == "/opsVisualization/tuobu" ||
+        this.$route.path == "/opsVisualization/systemMonitoring"
+      ) {
+        document.getElementsByClassName(
+          "el-submenu__title"
+        )[0].style.background =
+          "linear-gradient(90deg, #07a7ff 0%, #142a43 100%)";
+        document.getElementsByClassName(
+          "el-submenu__title"
+        )[1].style.background = "#1E283D";
+      } else if (
+        this.$route.path == "/opsVisualization/alarmProcess" ||
+        this.$route.path == "/opsVisualization/serviceDataOAM"
+      ) {
+        document.getElementsByClassName(
+          "el-submenu__title"
+        )[1].style.background =
+          "linear-gradient(90deg, #07a7ff 0%, #142a43 100%)";
+        document.getElementsByClassName(
+          "el-submenu__title"
+        )[0].style.background = "#1E283D";
+      }
+    },
+  },
   computed: {},
-  mounted() {},
+  mounted() {
+    document.getElementsByClassName("el-submenu__title")[0].style.background =
+      "linear-gradient(90deg, #07a7ff 0%, #142a43 100%)";
+  },
   methods: {},
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
+.red {
+  background: green !important;
+}
 .page {
   position: absolute;
   top: 64px;
@@ -76,5 +108,40 @@ export default {
   margin: 0 20px 0 30px;
   border-radius: 50%;
 }
+// /deep/.el-submenu__title:hover {
+//   background: linear-gradient(90deg, #07a7ff 0%, #142a43 100%);
+// }
+.el-menu-item {
+  display: flex;
+  align-items: center;
+  &:before {
+    content: "";
+    width: 2px;
+    height: 2px;
+    display: inline-block;
+    margin: 0 20px 0 10px;
+    border-radius: 50%;
+  }
+}
+.el-menu-item.is-active {
+  color: #04d4ff !important;
+  &:before {
+    content: "";
+    width: 2px;
+    height: 2px;
+    background: #04d4ff;
+    display: inline-block;
+    margin: 0 20px 0 10px;
+    border-radius: 50%;
+  }
+}
+/deep/.el-menu-item-group {
+  .el-menu-item {
+    background: rgba(7, 167, 255, 0.15) !important;
+  }
+}
+// /deep/.el-submenu__title {
+//   background: linear-gradient(90deg, #07a7ff 0%, #142a43 100%) !important;
+// }
 </style>
   
\ No newline at end of file
diff --git a/src/page/opsVisualization/alarmProcess.vue b/src/page/opsVisualization/alarmProcess.vue
index 856edcf..da5fad6 100644
--- a/src/page/opsVisualization/alarmProcess.vue
+++ b/src/page/opsVisualization/alarmProcess.vue
@@ -1,422 +1,486 @@
 <template>
-	<div class="content">
-		<div class="process">
-			<div class="title">报警节点示意图</div>
-			<div class="main">
-				<div class="process-example">
-					<div class="example-title">示例：</div>
-					<div class="example-box">
-						<div class="point blue"></div>
-						<div class="value">正常</div>
-					</div>
-					<div class="example-box margin-right-left-20">
-						<div class="point red"></div>
-						<div class="value">报警</div>
-					</div>
-					<div class="example-box">
-						<div class="point grey"></div>
-						<div class="value">静默</div>
-					</div>
-				</div>
-				<div class="process-center">
-					<div class="process-node-box">
-						<div class="node-img">
-							<img class="nav_img" src="../../../public/img/process/node1.png">
-							<div class="node-text">脚本</div>
-						</div>
-						<div class="yes-no">
-							<div class="yes"></div>
-							<img class="nav_img" src="../../../public/img/process/yes.png">
-						</div>
-						<div class="node-img">
-							<img class="nav_img" src="../../../public/img/process/node2.png">
-							<div class="node-text">电子围栏服务</div>
-						</div>
-						<div class="yes-no">
-							<div class="yes"></div>
-							<img class="nav_img" src="../../../public/img/process/yes.png">
-						</div>
-						<div class="node-img">
-							<img class="nav_img" src="../../../public/img/process/node3.png">
-							<div class="node-text">网关</div>
-						</div>
-						<div class="yes-no">
-							<div class="yes"></div>
-							<img class="nav_img" src="../../../public/img/process/yes.png">
-						</div>
-						<div class="node-img">
-							<div class="baojing">dtu断联报警</div>
-							<img class="nav_img" src="../../../public/img/process/node4.png">
-							<div class="node-text">dtu</div>
-						</div>
-						<div class="yes-no">
-							<div class="no"></div>
-							<img class="nav_img" src="../../../public/img/process/no.png">
-						</div>
-						<div class="node-img">
-							<img class="nav_img" src="../../../public/img/process/node5.png">
-							<div class="node-text">电子围栏</div>
-						</div>
-					</div>
-					<div class="process-more">
-						<div class="button">查看更多报警信息</div>
-					</div>
-				</div>
-				<div class="process-bottom">
-					<div class="line">
-						<div class="item">
-							<div class="item-box">
-								<div class="time">2024-5-17 08:51:12</div>
-								<div class="point red"></div>
-								<div class="name">dtu断联报警</div>
-								<div class="code">dtu编号：SJK001</div>
-								<div class="btn red-btn">
-									<img class="img" src="../../../public/img/process/serch.png" alt="">
-									<div class="text">请检查dtu设备</div>
-								</div>
-							</div>
-							<div class="item-box">
-								<div class="time">2024-5-17 08:51:13</div>
-								<div class="point grey"></div>
-								<div class="name">静默</div>
-								<div class="code">设备编号：SHUIBIAO1</div>
-								<div class="btn grey-btn">
-									<img class="img" src="../../../public/img/process/loading.png" alt="">
-									<div class="text">等待重新链接</div>
-								</div>
-							</div>
-						</div>
-						<div class="restart">
-							<div class="restart-title">操作：</div>
-							<div class="restart-btn">一键重启</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="method">
-			<div class="title">报警解决方法</div>
-			<div class="main">
-				<div class="text-box">
-					<div class="label">设备位置：</div>
-					<div class="value">
-						<div class="item">园区2号围栏</div>
-					</div>
-				</div>
-				<div class="text-box">
-					<div class="label">排查方法：</div>
-					<div class="value">
-						<div class="item">1.检查电源是否正常，重新接入或更换电源；</div>
-						<div class="item">2.检查是否过载，重新调整系统负载或更换更高性能的设备；</div>
-						<div class="item">3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备；</div>
-						<div class="item">4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="content">
+    <div class="process">
+      <div class="title">报警节点示意图</div>
+      <div class="main">
+        <div class="process-example">
+          <div class="example-title">示例：</div>
+          <div class="example-box">
+            <div class="point blue"></div>
+            <div class="value">正常</div>
+          </div>
+          <div class="example-box margin-right-left-20">
+            <div class="point red"></div>
+            <div class="value">报警</div>
+          </div>
+          <div class="example-box">
+            <div class="point grey"></div>
+            <div class="value">静默</div>
+          </div>
+        </div>
+        <div class="process-center">
+          <div class="process-node-box">
+            <div class="node-img">
+              <img
+                class="nav_img"
+                src="../../../public/img/process/node1.png"
+              />
+              <div class="node-text">脚本</div>
+            </div>
+            <div class="yes-no">
+              <div class="yes"></div>
+              <img class="nav_img" src="../../../public/img/process/yes.png" />
+            </div>
+            <div class="node-img">
+              <img
+                class="nav_img"
+                src="../../../public/img/process/node2.png"
+              />
+              <div class="node-text">电子围栏服务</div>
+            </div>
+            <div class="yes-no">
+              <div class="yes"></div>
+              <img class="nav_img" src="../../../public/img/process/yes.png" />
+            </div>
+            <div class="node-img">
+              <img
+                class="nav_img"
+                src="../../../public/img/process/node3.png"
+              />
+              <div class="node-text">网关</div>
+            </div>
+            <div class="yes-no">
+              <div class="yes"></div>
+              <img class="nav_img" src="../../../public/img/process/yes.png" />
+            </div>
+            <div class="node-img">
+              <div class="baojing">dtu断联报警</div>
+              <img
+                class="nav_img"
+                src="../../../public/img/process/node4.png"
+              />
+              <div class="node-text">dtu</div>
+            </div>
+            <div class="yes-no">
+              <div class="no"></div>
+              <img class="nav_img" src="../../../public/img/process/no.png" />
+            </div>
+            <div class="node-img">
+              <img
+                class="nav_img"
+                src="../../../public/img/process/node5.png"
+              />
+              <div class="node-text">电子围栏</div>
+            </div>
+          </div>
+          <div class="process-more">
+            <div class="button">查看更多报警信息</div>
+          </div>
+        </div>
+        <div class="process-bottom">
+          <div class="line">
+            <div class="item">
+              <div class="item-box">
+                <div class="time">2024-5-17 08:51:12</div>
+                <div class="point red"></div>
+                <div class="name">dtu断联报警</div>
+                <div class="code">dtu编号：SJK001</div>
+                <div class="btn red-btn">
+                  <img
+                    class="img"
+                    src="../../../public/img/process/serch.png"
+                    alt=""
+                  />
+                  <div class="text">请检查dtu设备</div>
+                </div>
+              </div>
+              <div class="item-box">
+                <div class="time">2024-5-17 08:51:13</div>
+                <div class="point grey"></div>
+                <div class="name">静默</div>
+                <div class="code">设备编号：SHUIBIAO1</div>
+                <div class="btn grey-btn">
+                  <img
+                    class="img"
+                    src="../../../public/img/process/loading.png"
+                    alt=""
+                  />
+                  <div class="text">等待重新链接</div>
+                </div>
+              </div>
+            </div>
+            <div class="restart">
+              <div class="restart-title">操作：</div>
+              <div class="restart-btn">一键重启</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="method">
+      <div class="title">报警解决方法</div>
+      <div class="main" v-for="item in data">
+        <div class="text-box">
+          <div class="label">设备类型编码：</div>
+          <div class="value">
+            <div class="item">{{ item.classCode }}</div>
+          </div>
+        </div>
+        <div class="text-box">
+          <div class="label">排查方法：</div>
+          <div class="value">
+            <div class="item">1.检查电源是否正常，重新接入或更换电源；</div>
+            <div class="item">
+              2.检查是否过载，重新调整系统负载或更换更高性能的设备；
+            </div>
+            <div class="item">
+              3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备；
+            </div>
+            <div class="item">
+              4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-
+import {
+  getWarnPoint,
+  getResolveTips,
+} from "@/api/opsVisualization/serviceDataOAM";
 export default {
-	data() {
-		return {
-
-		}
-	},
-	created() {
-
-	},	
-	mounted() {
-	},
-	methods: {
-	}
-}
+  data() {
+    return {
+      data: [
+        {
+          classCode: "设备类型编码,0100",
+          pointCode: "报警节点code，1",
+          tips: "排查方案说明，简单进线电流",
+          shortNum: 1, // 排查方案排序，展示时按照排序升序展示
+        },
+      ],
+    };
+  },
+  created() {},
+  mounted() {
+    // [
+    //   {
+    //     nodeid: 1,
+    //     list: [
+    //       {
+    //         name: "脚本",
+    //         state: "正常",
+    //       },
+    //       {
+    //         name: "电子围栏服务",
+    //         state: "正常",
+    //       },
+    //       {
+    //         name: "网关",
+    //         state: "正常",
+    //       },
+    //       {
+    //         name: "dtu",
+    //         state: "dtu断联报警",
+    //       },
+    //       {
+    //         name: "电子围栏",
+    //         state: "",
+    //       },
+    //     ],
+    //   },
+    // ];
+    getResolveTips();
+  },
+  methods: {},
+};
 </script>
 
 <style lang="scss" scoped>
-.content{
-	padding: 20px !important;
-	.process{
-		width: calc(100% - 218px);
-		margin-left: 218px;
-		height: 584px;
-		background: #FFFFFF;
-		border-radius: 0px 0px 0px 0px;
-		border: 1px solid #D1D1D1;
-		display: flex;
-		flex-direction: column;
-		.title{
-			width: 100%;
-			height: 40px;
-			background: #E5E5E5;
-			border-radius: 0px 0px 0px 0px;
-			border: 1px solid #D1D1D1;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			font-size: 18px;
-			color: #333333;
-		}
-		.main{
-			display: flex;
-			flex-direction: column;
-			padding: 30px;
-			height: 50%;
-			.process-example{
-				width: 100%;
-				display: flex;
-				justify-content: flex-end;
-				.example-title{
-					color: #999999;
-					margin-right: 6px;
-					font-size: 14px;
-				}
-				.example-box{
-					display: flex;
-					align-items: center;
-					.point{
-						width: 11px;
-						height: 11px;
-						border-radius: 10px;
-						margin-right: 11px;
-					}
-					.value{
-						color: #999999;
-						font-size: 14px;
-					}
-				}
-				.margin-right-left-20{
-					margin: 0 20px;
-				}
-			}
-			.process-center{
-				display: flex;
-				align-items: center;
-				justify-content: space-around;
-				margin-top: 75px;
-				.process-node-box{
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					.node-img{
-						width: 69px;
-						height: 69px;
-						display: flex;
-						flex-direction: column;
-						justify-content: center;
-						align-items: center;
-						position: relative;
-						.baojing{
-							width: 133px;
-							height: 31px;
-							background: #FFF3F3;
-							border-radius: 0px 0px 0px 0px;
-							border: 1px solid #EE6464;
-							font-size: 16px;
-							color: #E14B33;
-							position: absolute;
-							top: -55px;
-							transform: translateY(-50%);
-							display: flex;
-							justify-content: center;
-							align-items: center;
-						}
-						.nav_img{
-							width: 100%;
-							height: 100%;
-							// margin-bottom: 20px;
-						}
-						.node-text{
-							position: absolute;
-							transform: translateY(-50%);
-							width: 100px;
-							text-align: center;
-							top: 100px;
-						}
-					}
-					.yes-no{
-						width: 163px;
-						height: 17px;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						position: relative;
-						.yes{
-							width: 167px;
-							height: 17px;
-							background: #21A2E5;
-							opacity: 0.18;
-							position: absolute;
-						}
-						.no{
-							width: 167px;
-							height: 17px;
-							background: #A5A5A5;
-							opacity: 0.18;
-							position: absolute;
-						}
-						.nav_img{
-							width: 24px;
-							height: 24px;
-							opacity: 1;
-							z-index: 10;
-						}
-					}
-				}
-				.process-more{
-					.button{
-						width: 190px;
-						height: 40px;
-						background: #FFFFFF;
-						border-radius: 0px 0px 0px 0px;
-						border: 1px solid #2B8EE5;
-						color: #2B8EE5;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						cursor: pointer;
-					}
-				}
-			}
-			.process-bottom{
-				border-top: 1px solid #D1D1D1;
-				margin-top: 200px;
-				display: flex;
-				flex-direction: column;
-				.line{
-					margin-top: 20px;
-					display: flex;
-					align-items: flex-start;
-					justify-content: center;
-				}
-				.item{
-					display: flex;
-					flex-direction: column;
-					.item-box{
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						margin-bottom: 20px;
-						.point{
-							width: 10px;
-							height: 10px;
-							margin: 0 20px;
-							border-radius: 10px;
-						}
-						.name{
-							width: 200px;
-						}
-						.code{
-							width: 250px;
-							margin-left: 40px;
-						}
-						.btn{
-							margin-left: 20px;
-							width: 185px;
-							height: 31px;
-							border-radius: 0px 0px 0px 0px;
-							display: flex;
-							justify-content: space-around;
-							align-items: center;
-							font-size: 16px;
-							.img{
-								width: 15px;
-								height: 15px;
-							}
-						}
-						.red-btn{
-							background: #FFF3F3;
-							border: 1px solid #EE6464;
-							.text{
-								color: #E14B33;
-							}
-						}
-						.grey-btn{
-							background: #F5F5F5;
-							border: 1px solid #999999;
-							.text{
-								color: #999999;
-							}
-						}
-					}
-				}
-				.restart{
-					margin-left: 72px;
-					display: flex;
-					align-items: center;
-					cursor: pointer;
-					.restart-text{
-						font-size: 16px;
-						color: #333333;
-					}
-					.restart-btn{
-						width: 93px;
-						height: 31px;
-						background: #2B8EE5;
-						border-radius: 0px 0px 0px 0px;
-						font-size: 16px;
-						color: #FFFFFF;
-						margin-left: 7px;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-					}
-				}
-			}
-		}
-	}
-	.method{
-		flex: 1;
-		margin-top: 30px;
-		width: calc(100% - 218px);
-		// height: 326px;
-		margin-left: 218px;
-		background: #FFFFFF;
-		border-radius: 0px 0px 0px 0px;
-		border: 1px solid #D1D1D1;
-		display: flex;
-		flex-direction: column;
-		.title{
-			width: 100%;
-			height: 40px;
-			background: #E5E5E5;
-			border-radius: 0px 0px 0px 0px;
-			border: 1px solid #D1D1D1;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			font-size: 18px;
-			color: #333333;
-		}
-		.main{
-			display: flex;
-			flex-direction: column;
-			padding: 22px;
-			// height: 50%;
-			overflow: auto;
-			.text-box{
-				margin-bottom: 22px;
-				display: flex;
-				.label{
-				}
-				.value{
-					.item{
-						margin-bottom: 12px;
-					}
-				}
-			}
-		}
-	}
-	.blue{
-		background: #21A2E5;
-	}
-	.red{
-		background: #E96955;
-	}
-	.grey{
-		background: #E1E1E1;
-	}
+.content {
+  padding: 20px !important;
+  .process {
+    width: calc(100% - 218px);
+    margin-left: 218px;
+    height: 584px;
+    background: #ffffff;
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid #d1d1d1;
+    display: flex;
+    flex-direction: column;
+    .title {
+      width: 100%;
+      height: 40px;
+      background: #e5e5e5;
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid #d1d1d1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 18px;
+      color: #333333;
+    }
+    .main {
+      display: flex;
+      flex-direction: column;
+      padding: 30px;
+      height: 50%;
+      .process-example {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        .example-title {
+          color: #999999;
+          margin-right: 6px;
+          font-size: 14px;
+        }
+        .example-box {
+          display: flex;
+          align-items: center;
+          .point {
+            width: 11px;
+            height: 11px;
+            border-radius: 10px;
+            margin-right: 11px;
+          }
+          .value {
+            color: #999999;
+            font-size: 14px;
+          }
+        }
+        .margin-right-left-20 {
+          margin: 0 20px;
+        }
+      }
+      .process-center {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        margin-top: 75px;
+        .process-node-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .node-img {
+            width: 69px;
+            height: 69px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            .baojing {
+              width: 133px;
+              height: 31px;
+              background: #fff3f3;
+              border-radius: 0px 0px 0px 0px;
+              border: 1px solid #ee6464;
+              font-size: 16px;
+              color: #e14b33;
+              position: absolute;
+              top: -55px;
+              transform: translateY(-50%);
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+            .nav_img {
+              width: 100%;
+              height: 100%;
+              // margin-bottom: 20px;
+            }
+            .node-text {
+              position: absolute;
+              transform: translateY(-50%);
+              width: 100px;
+              text-align: center;
+              top: 100px;
+            }
+          }
+          .yes-no {
+            width: 163px;
+            height: 17px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            .yes {
+              width: 167px;
+              height: 17px;
+              background: #21a2e5;
+              opacity: 0.18;
+              position: absolute;
+            }
+            .no {
+              width: 167px;
+              height: 17px;
+              background: #a5a5a5;
+              opacity: 0.18;
+              position: absolute;
+            }
+            .nav_img {
+              width: 24px;
+              height: 24px;
+              opacity: 1;
+              z-index: 10;
+            }
+          }
+        }
+        .process-more {
+          .button {
+            width: 190px;
+            height: 40px;
+            background: #ffffff;
+            border-radius: 0px 0px 0px 0px;
+            border: 1px solid #2b8ee5;
+            color: #2b8ee5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+      }
+      .process-bottom {
+        border-top: 1px solid #d1d1d1;
+        margin-top: 200px;
+        display: flex;
+        flex-direction: column;
+        .line {
+          margin-top: 20px;
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+        }
+        .item {
+          display: flex;
+          flex-direction: column;
+          .item-box {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 20px;
+            .point {
+              width: 10px;
+              height: 10px;
+              margin: 0 20px;
+              border-radius: 10px;
+            }
+            .name {
+              width: 200px;
+            }
+            .code {
+              width: 250px;
+              margin-left: 40px;
+            }
+            .btn {
+              margin-left: 20px;
+              width: 185px;
+              height: 31px;
+              border-radius: 0px 0px 0px 0px;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              font-size: 16px;
+              .img {
+                width: 15px;
+                height: 15px;
+              }
+            }
+            .red-btn {
+              background: #fff3f3;
+              border: 1px solid #ee6464;
+              .text {
+                color: #e14b33;
+              }
+            }
+            .grey-btn {
+              background: #f5f5f5;
+              border: 1px solid #999999;
+              .text {
+                color: #999999;
+              }
+            }
+          }
+        }
+        .restart {
+          margin-left: 72px;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          .restart-text {
+            font-size: 16px;
+            color: #333333;
+          }
+          .restart-btn {
+            width: 93px;
+            height: 31px;
+            background: #2b8ee5;
+            border-radius: 0px 0px 0px 0px;
+            font-size: 16px;
+            color: #ffffff;
+            margin-left: 7px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+  .method {
+    flex: 1;
+    margin-top: 30px;
+    width: calc(100% - 218px);
+    // height: 326px;
+    margin-left: 218px;
+    background: #ffffff;
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid #d1d1d1;
+    display: flex;
+    flex-direction: column;
+    .title {
+      width: 100%;
+      height: 40px;
+      background: #e5e5e5;
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid #d1d1d1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 18px;
+      color: #333333;
+    }
+    .main {
+      display: flex;
+      flex-direction: column;
+      padding: 22px;
+      // height: 50%;
+      overflow: auto;
+      .text-box {
+        margin-bottom: 22px;
+        display: flex;
+        .label {
+        }
+        .value {
+          .item {
+            margin-bottom: 12px;
+          }
+        }
+      }
+    }
+  }
+  .blue {
+    background: #21a2e5;
+  }
+  .red {
+    background: #e96955;
+  }
+  .grey {
+    background: #e1e1e1;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/page/opsVisualization/serviceDataOAM.vue b/src/page/opsVisualization/serviceDataOAM.vue
index 07bf249..0087b43 100644
--- a/src/page/opsVisualization/serviceDataOAM.vue
+++ b/src/page/opsVisualization/serviceDataOAM.vue
@@ -3,75 +3,136 @@
     <el-col :span="3"> </el-col>
     <el-col :span="21" style="height: 100%">
       <basic-container style="height: 100%">
-        <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>
+        <div class="search_box">
+          <el-input
+            class="search_input"
+            v-model="classCode"
+            placeholder="请输入设备类型编码"
+            clearable
+          />
+          <el-select
+            class="search_select"
+            placeholder="请选择报警状态"
+            style="margin: 0 20px 0 10px"
+            v-model="warnStatus"
+          >
+            <el-option label="全部" value=""></el-option>
+            <el-option label="正常" value="0"></el-option>
+            <el-option label="报警" value="1"></el-option>
+          </el-select>
+          <el-input
+            class="search_input"
+            v-model="equipCode"
+            placeholder="请输入设备编码"
+            clearable
+          />
+          <el-button class="search_button" @click="handleSearch">
+            <i class="el-icon-search"></i>
+          </el-button>
+        </div>
+        <div style="position: relative">
+          <el-table
+            class="el_table"
+            :data="tableData"
+            border
+            stripe
+            lo
+            height="340"
+            v-loading="loading"
+          >
+            <el-table-column
+              type="index"
+              :index="indexMethod"
+              label="序号"
+              width="80"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column prop="classCode" label="设备编码" width="180">
+            </el-table-column>
+            <el-table-column prop="equipName" label="设备名称">
+            </el-table-column>
+            <el-table-column
+              prop="equipStatus"
+              label="设备状态"
+              width="100"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column prop="equipContent" label="报警信息">
+            </el-table-column>
+            <el-table-column prop="warnDate" label="报警时间">
+            </el-table-column>
+            <el-table-column prop="equipLocation" label="设备位置">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="操作"
+              width="100"
+              align="center"
+            >
+              <el-button type="text" size="small">查看</el-button>
+            </el-table-column>
+          </el-table>
+          <div class="el_pagination">
+            <div
+              style="
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                background: rgba(255,255,255,.9);
+                z-index: 9;
+                position: absolute;
+                top: 0;
+                left: 0;
+              "
+              v-show="loading"
+            ></div>
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[6, 10, 20, 50, 100]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+            >
+            </el-pagination>
+          </div>
+        </div>
         <div class="box">
           <div class="box_nav">
-            <span class="box_tab" style="margin-right: 50px">报警详情信息</span>
-            <span class="box_tab" style="color: #2b8ee5">报警信息记录</span>
+            <span
+              class="box_tab"
+              :style="{
+                marginRight: '50px',
+                color: tabKey == 1 ? '#2b8ee5' : '',
+              }"
+              @click="() => tabChange(1)"
+              >报警详情信息</span
+            >
+            <span
+              class="box_tab"
+              :style="{ color: tabKey == 2 ? '#2b8ee5' : '' }"
+              @click="() => tabChange(2)"
+              >报警信息记录</span
+            >
           </div>
           <el-select placeholder="按报警时间查询" class="box_select">
           </el-select>
           <div class="timelineBox">
             <div style="width: 100%">
               <div class="timelineBoxTitle">
-                <span>设备报警信息详情</span>
+                <span>{{ tabKey == 1 ? "报警详情信息" : "报警信息记录" }}</span>
                 <span>更多</span>
               </div>
-              <div class="timelineBoxContent">
+              <div class="timelineBoxContent" v-if="warnMsgList.length">
                 <div
-                  v-for="(item, index) in myList"
-                  :key="item.time"
+                  v-for="(item, index) in warnMsgList"
+                  :key="item.warnDate"
                   style="display: flex; align-items: center; line-height: 50px"
                 >
-                  {{ item.time }}
+                  {{ item.warnDate }}
                   <div
                     style="
                       width: 40px;
@@ -90,7 +151,7 @@
                       "
                     ></div>
                     <div
-                      v-if="index < myList.length - 1"
+                      v-if="index < warnMsgList.length - 1"
                       style="
                         border-right: 1px dashed #d1d1d1;
                         height: 45px;
@@ -100,9 +161,16 @@
                       "
                     ></div>
                   </div>
-                  {{ item.content }}dtu编号:{{ item.id }}
+                  {{ item.warnContent }}设备编号:{{ item.equipCode }}
                 </div>
               </div>
+              <div
+                v-else
+                class="timelineBoxContent"
+                style="text-align: center; line-height: 100px"
+              >
+                暂无数据
+              </div>
             </div>
           </div>
         </div>
@@ -114,6 +182,7 @@
 .box {
   width: 100%;
   height: 26vh;
+  margin-top: 30px;
 }
 .tab_btn {
   cursor: pointer;
@@ -123,8 +192,8 @@
   height: 30px;
   margin-top: 20px;
 }
-.box_nav{
-  >span{
+.box_nav {
+  > span {
     cursor: pointer;
   }
 }
@@ -155,464 +224,161 @@
 /deep/ .basic-container__card {
   height: 100%;
 }
+.search_box {
+  display: flex;
+  margin-bottom: 30px;
+  .search_select {
+    // width: 138px;
+    height: 40px;
+  }
+  .search_input {
+    width: 238px;
+    height: 40px;
+  }
+  /deep/.el-input__inner {
+    border-radius: 0;
+  }
+  .search_button {
+    width: 50px;
+    height: 40px;
+    border-radius: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 6px;
+    .el-icon-search {
+      font-size: 19px;
+      color: #c9c9c9;
+    }
+  }
+}
+.el-table {
+  ::v-deep td {
+    padding: 0 !important;
+  }
+}
+/deep/.el-table__row {
+  height: 40px;
+}
+.el_pagination {
+  display: flex;
+  justify-content: end;
+  border: 1px solid #d1d1d1;
+  border-top: none;
+  padding: 10px 7px 7px 7px;
+  position: absolute;
+  bottom: 0;
+  width: 99%;
+}
+.el_table {
+  width: 100%;
+  overflow: auto;
+  border: 1px solid #d1d1d1;
+  border-bottom: 50px solid #fff;
+}
 </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";
+  getEquipList,
+  getWarnMsg,
+  getWarnHisList,
+} from "@/api/opsVisualization/serviceDataOAM";
 
-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: {},
+      tabKey: 1,
+
+      classCode: "",
+      warnStatus: "",
+      equipCode: "",
+      currentPage: 1,
+      pageSize: 6,
+      total: 0,
       loading: false,
-      parentId: 0,
-      page: {
-        pageSize: 5,
-        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,
-        emptyBtn: false,
-        column: [
-          {
-            label: "通讯状态",
-            prop: "equipName",
-            align: "center",
-            search: true,
-            type: "select",
-            dicData: DIC.alarmType,
-          },
-          {
-            label: "业务类别",
-            prop: "location",
-            search: true,
-            type: "select",
-            dicData: DIC.alarmType,
-            align: "center",
-          },
-          {
-            label: "报警信息",
-            prop: "warnContent",
-            align: "center",
-          },
-          {
-            label: "dtu编号",
-            prop: "warnContent",
-            align: "center",
-          },
-          {
-            label: "设备编号",
-            prop: "warnContent",
-            align: "center",
-            search: true,
-            type: "input",
-            dicData: DIC.alarmType,
-          },
-          // {
-          //   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: "endDate",
-          // 	align:'center',
-          // 	searchslot:true,
-          // 	hide:true,
-          // 	search:true,
-          // 	row: false,
-          // 	display: false,
-          // 	viewDisplay:false
-          // },
-          {
-            label: "dtu报警信息",
-            prop: "recoveryType",
-            dicData: DIC.recoveryType,
-            type: "select",
-            align: "center",
-          },
-          {
-            label: "报警时间",
-            prop: "recoveryPerson",
-            align: "center",
-          },
-          {
-            label: "设备报警信息",
-            prop: "recoveryDate",
-            type: "datetime",
-            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",
-        },
-      },
+
+      tableData: [],
+      warnMsgList: [],
     };
   },
-  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(",");
-    },
+  computed: {},
+  mounted() {
+    this.handleSearch();
   },
   methods: {
-    nodeClick(data) {
-      this.classCode = data.key;
-      this.page.currentPage = 1;
-      this.onLoad(this.page);
+    indexMethod(index) {
+      const { currentPage, pageSize } = this;
+      return (currentPage - 1) * pageSize + index + 1;
     },
-
-    initData() {
-      getDeptTree().then((res) => {
-        const column = this.findObject(this.option.column, "parentId");
-        column.dicData = res.data.data;
+    handleSearch() {
+      const { classCode, warnStatus, equipCode, currentPage, pageSize } = this;
+      this.loading = true;
+      getEquipList({
+        classCode,
+        warnStatus,
+        equipCode,
+        currentPage,
+        pageSize,
+      }).then((res) => {      
+        this.tableData = res.data.data.records;
+        this.currentPage = res.data.data.current;
+        this.total = res.data.data.total;
+        this.loading = false;
+      });
+      getWarnMsg({ equipCode }).then((res) => {
+        this.warnMsgList = 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: "操作成功!",
-          });
+    tabChange(tabKey) {
+      this.tabKey = tabKey;
+      const { equipCode } = this;
+      if (tabKey == 1) {
+        getWarnMsg({ equipCode }).then((res) => {
+          this.warnMsgList = res.data.data;
         });
-    },
-    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;
-        // });
+      } else if (tabKey == 2) {
+        getWarnHisList({ equipCode, currentPage: 1, pageSize: 10 }).then(
+          (res) => {
+            this.warnMsgList = res.data.data.records;
+          }
+        );
       }
-      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);
+    // 改变每页显示条数
+    handleSizeChange(pageSize) {
+      this.pageSize = pageSize;
+      this.loading = true;
+      const { classCode, warnStatus, equipCode, currentPage } = this;
+      getEquipList({
+        classCode,
+        warnStatus,
+        equipCode,
+        currentPage,
+        pageSize,
+      }).then((res) => {
+        this.tableData = res.data.data.records;
+        this.currentPage = res.data.data.current;
+        this.total = res.data.data.total;
+        this.loading = false;
+      });
     },
-    onLoad() {
+    // 改变当前页数
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage;
       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);
+      const { classCode, warnStatus, equipCode, pageSize } = this;
+      getEquipList({
+        classCode,
+        warnStatus,
+        equipCode,
+        currentPage,
+        pageSize,
+      }).then((res) => {
+        this.tableData = res.data.data.records;
+        this.total = res.data.data.total;
         this.loading = false;
       });
-
-      // 	this.selectionClear();
     },
-    // treeLoad(tree, treeNode, resolve) {
-    // 	const parentId = tree.id;
-    // 	getLazyList(parentId).then(res => {
-    // 		resolve(res.data.data);
-    // 	});
-    // }
   },
 };
 </script>
diff --git a/src/permission.js b/src/permission.js
index 05858d8..bf69c23 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -70,9 +70,11 @@ router.beforeEach((to, from, next) => {
     if (meta.isAuth === false) {
       next()
     } else {
-      if (to.path.indexOf('/opsVisualization/alarmProcess') == '-1') {
+      if (to.path.indexOf('/opsVisualization') == '-1') {
         next('/login')
-      } else {
+      }
+      //运维可视化免登录
+      else {
         next()
       }
     }
diff --git a/src/router/page/index.js b/src/router/page/index.js
index 50ee997..1113f84 100644
--- a/src/router/page/index.js
+++ b/src/router/page/index.js
@@ -87,6 +87,7 @@ export default [{
   path: '/opsVisualization',
   name: '系统监控',
   component: Layout,
+  redirect: '/opsVisualization/tuobu',
   meta: {
     keepAlive: true,
     isTab: false,
@@ -94,10 +95,13 @@ export default [{
   },
   children: [
     {
-      path: "alarmProcess",
-      name: '系统监控1',
+      path: 'tuobu',
+      name: '系统监控',
+      meta: {
+        i18n: 'dashboard'
+      },
       component: () =>
-        import( /* webpackChunkName: "page" */ '@/page/opsVisualization/alarmProcess'),
+        import( /* webpackChunkName: "views" */ '@/page/opsVisualization/tuobu')
     },
     {
       path: "systemMonitoring",
@@ -106,20 +110,17 @@ export default [{
         import( /* webpackChunkName: "page" */ '@/page/opsVisualization/systemMonitoring'),
     },
     {
-      path: "serviceDataOAM",
+      path: "alarmProcess",
       name: '业务数据监控',
       component: () =>
-        import( /* webpackChunkName: "page" */ '@/page/opsVisualization/serviceDataOAM'),
+        import( /* webpackChunkName: "page" */ '@/page/opsVisualization/alarmProcess'),
     },
     {
-      path: 'tuobu',
-      name: 'tuobu',
-      meta: {
-        i18n: 'dashboard'
-      },
+      path: "serviceDataOAM",
+      name: '报警信息记录',
       component: () =>
-        import( /* webpackChunkName: "views" */ '@/page/opsVisualization/tuobu')
-    }
+        import( /* webpackChunkName: "page" */ '@/page/opsVisualization/serviceDataOAM'),
+    },
   ]
 },
 ]
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 06682fb..6f9f9a6 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -243,35 +243,5 @@ export default [{
 		component: () =>
 			import( /* webpackChunkName: "views" */ '@/views/system/systemSetting')
 	}]
-},
-{
-	path: '/opsVisualization',
-	component: Layout,
-	redirect: '/opsVisualization/index',
-	children: [{
-		path: 'index',
-		name: 'index',
-		meta: {
-			i18n: 'dashboard'
-		},
-		component: () =>
-			import( /* webpackChunkName: "views" */ '@/views/opsVisualization/index')
-	}, {
-		path: 'alarmProcess',
-		name: 'alarmProcess',
-		meta: {
-			i18n: 'dashboard'
-		},
-		component: () =>
-			import( /* webpackChunkName: "views" */ '@/views/opsVisualization/alarmProcess')
-	}, {
-		path: 'tuobu',
-		name: 'tuobu',
-		meta: {
-			i18n: 'dashboard'
-		},
-		component: () =>
-			import( /* webpackChunkName: "views" */ '@/views/opsVisualization/tuobu')
-	}]
-},
+}
 ]