diff --git a/public/img/tuobu/dtu_down_img.png b/public/img/tuobu/dtu_down_img.png
new file mode 100644
index 0000000..d1ea320
Binary files /dev/null and b/public/img/tuobu/dtu_down_img.png differ
diff --git a/public/img/tuobu/shebeiyichang.png b/public/img/tuobu/shebeiyichang.png
new file mode 100644
index 0000000..f758516
Binary files /dev/null and b/public/img/tuobu/shebeiyichang.png differ
diff --git a/public/img/tuobu/wangguan_down_img.png b/public/img/tuobu/wangguan_down_img.png
new file mode 100644
index 0000000..d763ab7
Binary files /dev/null and b/public/img/tuobu/wangguan_down_img.png differ
diff --git a/src/api/opsVisualization/systemMonitoring.js b/src/api/opsVisualization/systemMonitoring.js
new file mode 100644
index 0000000..3d0ceb7
--- /dev/null
+++ b/src/api/opsVisualization/systemMonitoring.js
@@ -0,0 +1,20 @@
+import request from '@/router/axios';
+
+export const getServiceList = () => {
+    return request({
+        url: '/kgApi/monitor-system/getServiceList',
+        method: 'get',
+    })
+}
+export const getMiddleList = () => {
+    return request({
+      url: '/kgApi/monitor-system/getMiddleList',
+      method: 'get',
+    })
+}
+export const getServerParamsList = () => {
+    return request({
+      url: '/kgApi/monitor-system/getServerParamsList',
+      method: 'get',
+    })
+  }
diff --git a/src/api/opsVisualization/tuobu.js b/src/api/opsVisualization/tuobu.js
new file mode 100644
index 0000000..9716e0d
--- /dev/null
+++ b/src/api/opsVisualization/tuobu.js
@@ -0,0 +1,8 @@
+import request from '@/router/axios';
+
+export const getMonitorList = () => {
+  return request({
+    url: '/kgApi/monitor-system/getMonitorList',
+    method: 'get',
+  })
+}
diff --git a/src/page/opsVisualization/alarmProcess.vue b/src/page/opsVisualization/alarmProcess.vue
index 5f2c544..856edcf 100644
--- a/src/page/opsVisualization/alarmProcess.vue
+++ b/src/page/opsVisualization/alarmProcess.vue
@@ -118,6 +118,7 @@
 </template>
 
 <script>
+
 export default {
 	data() {
 		return {
@@ -128,10 +129,8 @@ export default {
 
 	},	
 	mounted() {
-
 	},
 	methods: {
-
 	}
 }
 </script>
diff --git a/src/page/opsVisualization/jiedian.vue b/src/page/opsVisualization/jiedian.vue
index c32edbb..2b70201 100644
--- a/src/page/opsVisualization/jiedian.vue
+++ b/src/page/opsVisualization/jiedian.vue
@@ -1,7 +1,12 @@
 <template>
 	<div class="unit">
-		<!-- <img :class="img == 'jiedian_red' ? 'fuwuyigua' : 'jiedianyigua'" src="../../../public/img/tuobu/fuwuyigua.png" alt=""> -->
-		<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt="">
+		<img
+			v-if="img != 'dut_img' && img != 'dtu_down_img' && img != 'wangguan_img' && img != 'wangguan_down_img' ? status == false : false"
+			:class="img == 'jiedian_blue' ? 'fuwuyigua' : 'jiedianyigua'"
+			:src="img == 'jiedian_blue' ? require('../../../public/img/tuobu/fuwuyigua.png') : require('../../../public/img/tuobu/shebeiyichang.png')"
+			alt=""
+		>
+		<img class="img" :src="require(`../../../public/img/tuobu/${img == 'jiedian_blue' ? (status ? 'jiedian_blue' : 'jiedian_red') : img}.png`)" alt="">
 		<div class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div>
 	</div>
 </template>
@@ -25,7 +30,10 @@ export default {
         },
         top: {
             type: String
-        }
+        },
+		status: {
+			type: Boolean
+		}
 	},
 	created() {},
 	mounted() {
diff --git a/src/page/opsVisualization/systemMonitoring/icon/icon5.png b/src/page/opsVisualization/systemMonitoring/icon/icon5.png
new file mode 100644
index 0000000..c31051b
Binary files /dev/null and b/src/page/opsVisualization/systemMonitoring/icon/icon5.png differ
diff --git a/src/page/opsVisualization/systemMonitoring/index.vue b/src/page/opsVisualization/systemMonitoring/index.vue
index 2e047e8..5ee4264 100644
--- a/src/page/opsVisualization/systemMonitoring/index.vue
+++ b/src/page/opsVisualization/systemMonitoring/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="page">
-    <div class="search_box">
+    <!-- <div class="search_box">
       <el-select class="search_select" placeholder="按服务类别查询">
       </el-select>
       <el-input class="search_input" />
       <el-button class="search_button">
         <i class="el-icon-search"></i>
       </el-button>
-    </div>
+    </div> -->
     <div class="content_box1">
       <div class="content_title">
         <img src="./icon/icon1.png" alt="" />
@@ -15,34 +15,36 @@
       </div>
       <div class="flexBox">
         <div
-          v-for="item in list"
-          :key="item.value"
+          v-for="(item, index) in serviceListData"
+          :key="index"
           class="itemBox"
           :style="{
-            borderColor: item.state ? '#dcdcdc' : '#e14b33',
-            background: item.state ? '' : '#FFF2F2 ',
+            borderColor: item.color != 'red' ? '#dcdcdc' : '#e14b33',
+            background: item.color != 'red' ? '' : '#FFF2F2 ',
           }"
         >
           <div
             class="item_title"
-            :style="{ color: item.state ? '' : '#E14B33  ' }"
+            :style="{ color: item.color != 'red' ? '' : '#E14B33  ' }"
           >
-            权限服务
+            {{ item.name }}
           </div>
-          <div
+          <!-- <div
             class="item_EnTitle"
             :style="{ color: item.state ? '#999999' : '#E14B33 ' }"
           >
             AuthApplication
-          </div>
+          </div> -->
           <div
             class="color_block"
-            :style="{ background: item.state ? '#4fd069' : '#e14b33' }"
-          ></div>
+            :style="{ background: item.color != 'red' ? '#4fd069' : '#e14b33' }"
+          >
+            <img :src="item.icon" alt="">
+          </div>
           <div class="item_bottom">
             <div>状态</div>
-            <div :style="{ color: item.state ? '#26B843' : '#E14B33' }">
-              {{ item.state ? "正常" : "服务已挂" }}
+            <div :style="{ color: item.color != 'red' ? '#26B843' : '#E14B33' }">
+              {{ item.color != 'red' ? "正常" : "设备异常" }}
             </div>
           </div>
         </div>
@@ -52,6 +54,35 @@
       <div
         class="itemBox"
         style="width: 240px; height: 216px; position: relative"
+        v-for="(item, index) in middleListData"
+        :key="index"
+        :style="{
+          borderColor: item.result != 'result' ? '#dcdcdc' : '#e14b33',
+          background: item.result != 'result' ? '' : '#FFF2F2 ',
+        }"
+      >
+        <div
+          class="item_title content_title"
+        >
+          <img :src="item.type == 'redis' ? require('./icon/icon2.png') : require('./icon/icon3.png')" alt="" />
+          {{ item.type == 'redis' ? 'Redis服务监控' : '数据库监控' }}
+        </div>
+        <div
+          class="color_block"
+          :style="{ background: item.result != 'result' ? '#4fd069' : '#e14b33' }"
+        >
+          <img :src="item.icon" alt="">
+        </div>
+        <div class="item_bottom">
+          <div>状态</div>
+            <div :style="{ color: item.result != 'result' ? '#26B843' : '#E14B33' }">
+              {{ item.result != 'result' ? "正常" : "服务已挂" }}
+            </div>
+        </div>
+      </div>
+      <!-- <div
+        class="itemBox"
+        style="width: 240px; height: 216px; position: relative"
       >
         <div
           class="item_title content_title"
@@ -101,19 +132,22 @@
           <div>状态</div>
           <div>正常</div>
         </div>
+      </div> -->
+    </div>
+    <div class="content_box3">
+      <div
+        class="item_title content_title"
+        style="margin: 0; width: 100%; margin-bottom: 20px"
+      >
+        <img src="./icon/icon5.png" alt="" />
+        系统硬件监控
       </div>
-      <div class="content_box3">
-        <div
-          class="item_title content_title"
-          style="height: 0; width: 100%; margin-bottom: 20px"
-        >
-          <img src="./icon/icon4.png" alt="" />
-          系统硬件监控
-        </div>
-        <div style="display: flex; max-width: 1280px">
-          <div v-for="item in list2" :key="item.value" class="itemBox3">
-            <div class="item_title">权限服务</div>
-            <div class="item_EnTitle">AuthApplication</div>
+      <div class="bottom-box">
+        <div v-for="(item, index) in serverParamsListData" :key="index" class="itemBox3">
+          <div class="ip-title">{{ item[0].ip }}</div>
+          <div v-for="(i, n) in item" :key="n" class="itemBox3_item">
+            <div class="item_title">{{ i.monitorType == 'cpu' ? 'CPU使用率': (i.monitorType == 'memory' ? '内存使用率' : '硬盘使用率') }}</div>
+            <!-- <div class="item_EnTitle">AuthApplication</div> -->
             <div
               style="
                 width: 57px;
@@ -131,11 +165,12 @@
                   position: absolute;
                   bottom: 0;
                 "
+                :style="i.result == 'result' ? 'height: 66%; background: #F68031' : 'height: 33%; background: green'"
               ></div>
             </div>
             <div class="item_bottom">
               <div>状态</div>
-              <div>正常</div>
+              <div :style="i.result == 'result' ? 'color: #F68031' : 'color: green'">{{ i.result == 'result' ? '硬件异常' : i.result }}</div>
             </div>
           </div>
         </div>
@@ -146,6 +181,7 @@
 
 <script>
 import { color } from "echarts";
+import { getServiceList, getMiddleList, getServerParamsList } from "@/api/opsVisualization/systemMonitoring";
 
 export default {
   data() {
@@ -171,12 +207,41 @@ export default {
         { name: "应用服务", value: 4, state: 1 },
         { name: "应用服务", value: 5, state: 1 },
       ],
+      serviceListData: [],
+      middleListData: [],
+      serverParamsListData: [],
     };
   },
   watch: {},
   computed: {},
-  mounted() {},
-  methods: {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    async init() {
+      const getServiceListData = await getServiceList()
+      this.serviceListData = getServiceListData.data.data
+      const getMiddleListData = await getMiddleList()
+      this.middleListData = getMiddleListData.data.data
+      const getServerParamsListData = await getServerParamsList()
+      let data = getServerParamsListData.data.data;
+      const groupedData = new Map();
+
+      data.forEach(item => {
+        // 获取当前对象的IP地址
+        const ip = item.ip;
+        // 如果Map中还没有这个IP的条目，则创建一个新的数组
+        if (!groupedData.has(ip)) {
+          groupedData.set(ip, []);
+        }
+        // 将当前对象添加到对应IP的数组中
+        groupedData.get(ip).push(item);
+        console.log(groupedData);
+      });
+      this.serverParamsListData = Array.from(groupedData.values());
+      console.log(this.serverParamsListData)
+    }
+  },
 };
 </script>
 
@@ -214,15 +279,15 @@ export default {
 }
 .content_box1 {
   width: 1640px;
-  height: 498px;
+  // height: 498px;
   border: 1px solid #dcdcdc;
   padding: 20px 0 0 20px;
 }
 .content_box3 {
-  padding: 20px;
-  flex: 1;
-  height: 178px;
+  width: 1640px;
+  // height: 498px;
   border: 1px solid #dcdcdc;
+  padding: 20px;
 }
 .content_title {
   font-size: 20px;
@@ -239,7 +304,7 @@ export default {
   flex-wrap: wrap;
 }
 .itemBox {
-  width: 200px;
+  width: 210px;
   height: 212px;
   border: 1px solid #dcdcdc;
   margin: 0 20px 30px 0;
@@ -250,17 +315,22 @@ export default {
   .color_block {
     width: 76px;
     height: 76px;
-    margin: 20px 0 14px 0;
+    margin: 40px 0 14px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 .itemBox3 {
-  width: 210px;
-  height: 154px;
-  border: 1px solid #dcdcdc;
+  width: 100%;
+  height: 224px;
+  // border: 1px solid #dcdcdc;
   margin: 0 20px 30px 0;
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
   align-items: center;
+  position: relative;
+    padding-top: 60px;
 }
 .item_title {
   font-weight: bold;
@@ -284,4 +354,25 @@ export default {
     color: #26b843;
   }
 }
+.itemBox3_item{
+  width: 210px;
+  height: 182px;
+  border: 1px solid #dcdcdc;
+  margin: 0 20px 30px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bottom-box{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  // max-width: 1280px
+}
+.ip-title{
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  font-weight: bold;
+}
 </style>
diff --git a/src/page/opsVisualization/tuobu.vue b/src/page/opsVisualization/tuobu.vue
index 3e9841f..893008a 100644
--- a/src/page/opsVisualization/tuobu.vue
+++ b/src/page/opsVisualization/tuobu.vue
@@ -5,28 +5,28 @@
 		<!-- 左边 -->
 		<img class="server_1_top_left" src="../../../public/img/tuobu/server_1_top_left.png" alt="">
 		<div class="top_left_jiedian_box">
-			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'定时任务服务'" :left="'-15'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'系统服务'" :left="'0'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :text="'websocke服务'" :left="'-15'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_4" :img="'jiedian_blue'" :text="'门禁服务'" :left="'0'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_5" :img="'jiedian_blue'" :text="'xxljob服务'" :left="'-5'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_6" :img="'jiedian_blue'" :text="'用户服务'" :left="'0'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_7" :img="'jiedian_blue'" :text="'权限服务'" :left="'0'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_8" :img="'jiedian_blue'" :text="'网关服务'" :left="'0'" :top="'35'"></jiedian>
-			<jiedian class="jiedian jiedian_9" :img="'jiedian_blue'" :text="'应用服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :status="dataList.some(item => item.name == '定时任务服务' && item.status == 1)" :text="'定时任务服务'" :left="'-15'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :status="dataList.some(item => item.name == '系统服务' && item.status == 1)" :text="'系统服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :status="dataList.some(item => item.name == 'websocket服务' && item.status == 1)" :text="'websocket服务'" :left="'-15'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_4" :img="'jiedian_blue'" :status="dataList.some(item => item.name == '门禁服务' && item.status == 1)" :text="'门禁服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_5" :img="'jiedian_blue'" :status="dataList.some(item => item.name == 'xxljob服务' && item.status == 1)" :text="'xxljob服务'" :left="'-5'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_6" :img="'jiedian_blue'" :status="dataList.some(item => item.name == '用户服务' && item.status == 1)" :text="'用户服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_7" :img="'jiedian_blue'" :status="dataList.some(item => item.name == '鉴权服务' && item.status == 1)" :text="'权限服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_8" :img="'jiedian_blue'" :status="dataList.some(item => item.name == 'gateway服务' && item.status == 1)" :text="'网关服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_9" :img="'jiedian_blue'" :status="dataList.some(item => item.name == '应用服务' && item.status == 1)" :text="'应用服务'" :left="'0'" :top="'35'"></jiedian>
 		</div>
 		<img class="server_1_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
 		<img class="server_1_center_left" src="../../../public/img/tuobu/server_1_center_left.png" alt="">
 		<img class="server_1_center_center" src="../../../public/img/tuobu/server_1_center_center.png" alt="">
 		<img class="server_1_center_right" src="../../../public/img/tuobu/server_1_center_right.png" alt="">
 		<div class="center_jiedian_box">
-			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'mqtt服务'" :left="'-33'"></jiedian>
-			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'http服务'" :left="'-30'"></jiedian>
-			<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :text="'modebus服务'" :left="'-30'"></jiedian>
+			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :status="dataList.some(item => item.name == 'mqtt服务' && item.status == 1)"  :text="'mqtt服务'" :left="'-33'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :status="dataList.some(item => item.name == 'http服务' && item.status == 1)"  :text="'http服务'" :left="'-30'"></jiedian>
+			<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :status="dataList.some(item => item.name == 'modebus服务' && item.status == 1)"  :text="'modebus服务'" :left="'-30'"></jiedian>
 		</div>
 		<img class="server_1_bottom_center_left" src="../../../public/img/tuobu/server_1_bottom_center.png" alt="">
 		<div class="bottom_jiedian_box_1">
-			<jiedian class="jiedian jiedian_1" :img="'dut_img'" :text="'dut'" :left="'5'" :top="'20'"></jiedian>
+			<jiedian class="jiedian jiedian_1" :img="dataList.some(item => item.name == 'DTU' && item.status == 1)? 'dut_img' : 'dtu_down_img'" :text="'dtu'" :left="'5'" :top="'20'"></jiedian>
 		</div>
 		<img class="server_1_bottom_left" src="../../../public/img/tuobu/server_1_bottom_left.png" alt="">
 		<img class="server_1_bottom_item_1" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
@@ -34,46 +34,46 @@
 		<img class="server_1_bottom_item_3" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
 		<img class="server_1_bottom_item_4" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
 		<div class="bottom_left_jiedian_box">
-			<jiedian class="jiedian jiedian_4" :img="'dianti_img'" :text="'电梯'" :left="'15'" :top="'110'"></jiedian>
-			<jiedian class="jiedian jiedian_3" :img="'xiaofang_img'" :text="'消防'" :left="'10'" :top="'75'"></jiedian>
-			<jiedian class="jiedian jiedian_2" :img="'nuanbiao_img'" :text="'暖表'" :left="'18'" :top="'40'"></jiedian>
-			<jiedian class="jiedian jiedian_1" :img="'shuibiao_img'" :text="'水表'" :left="'15'" :top="'40'"></jiedian>
+			<jiedian class="jiedian jiedian_4" :img="'dianti_img'" :status="shebeiList.dianti" :text="'电梯'" :left="'15'" :top="'110'"></jiedian>
+			<jiedian class="jiedian jiedian_3" :img="'xiaofang_img'" :status="shebeiList.xiaofang" :text="'消防'" :left="'10'" :top="'75'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :img="'nuanbiao_img'" :status="shebeiList.nuanbiao" :text="'暖表'" :left="'18'" :top="'40'"></jiedian>
+			<jiedian class="jiedian jiedian_1" :img="'shuibiao_img'" :status="shebeiList.shuibiao" :text="'水表'" :left="'15'" :top="'40'"></jiedian>
 		</div>
 		<img class="server_1_bottom_center_4" src="../../../public/img/tuobu/server_1_bottom_center_4.png" alt="">
 		<img class="server_1_bottom_center_1" src="../../../public/img/tuobu/server_1_bottom_center_1.png" alt="">
-		<img class="server_1_bottom_center_2" src="../../../public/img/tuobu/server_1_bottom_center_2.png" alt="">
-		<img class="server_1_bottom_center_3" src="../../../public/img/tuobu/server_1_bottom_center_3.png" alt="">
-		<jiedian class="jiedian jiedian_haikang" :img="'haikang_img'" :text="'海康接口'" :left="'-15'" :top="'40'"></jiedian>
-		<jiedian class="jiedian jiedian_kongkai" :img="'kongkai_img'" :text="'空开'" :left="'5'" :top="'40'"></jiedian>
-		<jiedian class="jiedian jiedian_shexiangtou" :img="'shexiangtou_img'" :text="'摄像头'" :left="'5'" :top="'30'"></jiedian>
+		<!-- <img class="server_1_bottom_center_2" src="../../../public/img/tuobu/server_1_bottom_center_2.png" alt="">
+		<img class="server_1_bottom_center_3" src="../../../public/img/tuobu/server_1_bottom_center_3.png" alt=""> -->
+		<!-- <jiedian class="jiedian jiedian_haikang" :img="'haikang_img'" :text="'海康接口'" :left="'-15'" :top="'40'"></jiedian> -->
+		<jiedian class="jiedian jiedian_kongkai" :img="'kongkai_img'" :status="shebeiList.kongkai" :text="'空开'" :left="'5'" :top="'40'"></jiedian>
+		<!-- <jiedian class="jiedian jiedian_shexiangtou" :img="'shexiangtou_img'" :text="'摄像头'" :left="'5'" :top="'30'"></jiedian> -->
 		<img class="server_1_bottom_center_left_right" src="../../../public/img/tuobu/server_1_bottom_center.png" alt="">
-		<jiedian class="jiedian jiedian_wangguan" :img="'wangguan_img'" :text="'网关'" :left="'-15'" :top="'30'"></jiedian>
+		<jiedian class="jiedian jiedian_wangguan" :img="dataList.some(item => item.name == '网关' && item.status == 1)? 'wangguan_img' : 'wangguan_down_img'" :text="'网关'" :left="'-15'" :top="'30'"></jiedian>
 		<img class="server_1_right_center" src="../../../public/img/tuobu/server_1_right_center.png" alt="">
 		<img class="server_1_right_center_left" src="../../../public/img/tuobu/server_1_right_center_left.png" alt="">
 		<img class="server_1_right_center_right" src="../../../public/img/tuobu/server_1_right_center_right.png" alt="">
-		<jiedian class="jiedian jiedian_kongtiao" :img="'kongtiao_img'" :text="'空调面板'" :left="'-10'" :top="'60'"></jiedian>
-		<jiedian class="jiedian jiedian_dianbiao" :img="'dianbiao_img'" :text="'电表'" :left="'5'" :top="'60'"></jiedian>
+		<jiedian class="jiedian jiedian_kongtiao" :img="'kongtiao_img'" :status="shebeiList.kongtiaomianban" :text="'空调面板'" :left="'-10'" :top="'60'"></jiedian>
+		<jiedian class="jiedian jiedian_dianbiao" :img="'dianbiao_img'" :status="shebeiList.dianbiao" :text="'电表'" :left="'5'" :top="'60'"></jiedian>
 		<!-- 第二个 -->
 		<serverUnit class="server_2" :img="'server_img'" :text="'应用服务器'"></serverUnit>
 		<img class="server_2_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
-		<jiedian class="jiedian jiedian_weilan" :img="'jiedian_blue'" :text="'电子围栏服务'" :left="'-33'"></jiedian>
+		<jiedian class="jiedian jiedian_weilan" :img="'jiedian_blue'" :status="dataList.some(item => item.name == '电子围栏服务' && item.status == 1)" :text="'电子围栏服务'" :left="'-33'"></jiedian>
 		<img class="server_2_center" src="../../../public/img/tuobu/server_1_right_center.png" alt="">
-		<jiedian class="jiedian jiedian_dianziweilan" :img="'weilan_img'" :text="'电子围栏'" :left="'5'" :top="'130'"></jiedian>
+		<jiedian class="jiedian jiedian_dianziweilan" :img="'weilan_img'" :status="shebeiList.dianziweilan" :text="'电子围栏'" :left="'5'" :top="'130'"></jiedian>
 		<!-- 第三个 -->
 		<serverUnit class="server_3" :img="'server_img'" :text="'应用服务器'"></serverUnit>
 		<img class="server_3_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
-		<jiedian class="jiedian jiedian_loukong" :img="'jiedian_blue'" :text="'楼空服务'" :left="'-33'"></jiedian>
+		<jiedian class="jiedian jiedian_loukong" :img="'jiedian_blue'" :status="dataList.some(item => item.name == 'bacnet服务' && item.status == 1)" :text="'楼控服务'" :left="'-33'"></jiedian> 
 		<img class="server_3_center" src="../../../public/img/tuobu/server_1_right_center.png" alt="">
 		<img class="server_3_center_left" src="../../../public/img/tuobu/server_1_right_center_left.png" alt="">
 		<img class="server_3_center_right" src="../../../public/img/tuobu/server_1_right_center_right.png" alt="">
-		<jiedian class="jiedian jiedian_kongtiao_2" :img="'kongtiao_2_img'" :text="'空调'" :left="'5'" :top="'60'"></jiedian>
-		<jiedian class="jiedian jiedian_zhaoming" :img="'zhaoming_img'" :text="'照明'" :left="'35'" :top="'30'"></jiedian>
+		<jiedian class="jiedian jiedian_kongtiao_2" :img="'kongtiao_2_img'" :status="shebeiList.kongtiao" :text="'空调'" :left="'5'" :top="'60'"></jiedian>
+		<jiedian class="jiedian jiedian_zhaoming" :img="'zhaoming_img'" :status="shebeiList.zhaoming" :text="'照明'" :left="'35'" :top="'30'"></jiedian>
 		<!-- 第四个 -->
 		<serverUnit class="server_4" :img="'server_img'" :text="'应用服务器'"></serverUnit>
 		<img class="server_4_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
 		<div class="right_jiedian_box">
-			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'resdis服务监控'" :left="'0'" :top="'40'"></jiedian>
-			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'数据库监控'" :left="'10'" :top="'40'"></jiedian>
+			<jiedian class="jiedian jiedian_1" :status="dataList.some(item => item.type == 'redis' && item.status == 1)" :img="'jiedian_blue'" :text="'resdis服务监控'" :left="'0'" :top="'40'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :status="dataList.some(item => item.type == 'mysql' && item.status == 1)" :img="'jiedian_blue'" :text="'数据库监控'" :left="'10'" :top="'40'"></jiedian>
 		</div>
 	</div>
 </template>
@@ -81,16 +81,82 @@
 <script>
 import serverUnit from "./serverUnit.vue"
 import jiedian from "./jiedian.vue"
+import { getMonitorList } from "@/api/opsVisualization/tuobu";
 export default {
 	data() {
 		return {
-
+			dataList: [],
+			shebeiList: {
+				dianti: true,
+				xiaofang: true,
+				nuanbiao: true,
+				shuibiao: true,
+				kongkai: true,
+				kongtiaomianban: true,
+				dianbiao: true,
+				dianziweilan: true,
+				kongtiao: true,
+				zhaoming: true,
+			},
+			timer: null,
 		}
 	},
 	components: {
 		serverUnit,
 		jiedian
 	},
+	computed: {
+	},
+	created() {
+
+	},	
+	mounted() {
+		this.getMonitorList()
+		this.startTimer();
+	},
+	beforeDestroy() {
+		this.clearTimer();
+	},
+	methods: {
+		async getMonitorList(){
+			await getMonitorList().then(res => {
+				// console.log(res)
+				this.dataList = res.data.data
+				this.dataList.forEach(item => {
+					if(item.classCode == '0900' && item.status != 1) {
+						this.shebeiList.kongtiao = false
+						this.shebeiList.kongtiaomianban = false
+					} else if(item.classCode == '0502' && item.status != 1) {
+						this.shebeiList.zhaoming = false
+					} else if(item.classCode == '0501' && item.status != 1) {
+						this.shebeiList.kongkai = false
+					} else if(item.classCode == '0100' && item.status != 1) {
+						this.shebeiList.dianbiao = false
+					} else if(item.classCode == '0200' && item.status != 1) {
+						this.shebeiList.shuibiao = false
+					} else if(item.classCode == '0300' && item.status != 1) {
+						this.shebeiList.nuanbiao = false
+					} else if( item.status != 1) {
+						this.shebeiList.dianti = false
+					} else if(item.classCode == '0600' && item.status != 1) {
+						this.shebeiList.xiaofang = false
+					} else if(item.classCode == '1100' && item.status != 1) {
+						this.shebeiList.dianziweilan = false
+					}
+				})
+			})
+		},
+		startTimer() {
+			this.timer = setInterval(() => {
+				this.getMonitorList();
+			}, 5 * 60 * 1000); // 每隔5分钟执行一次
+		},
+		clearTimer() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		}
+	}
 }
 </script>
 
diff --git a/src/router/page/index.js b/src/router/page/index.js
index 0c402c7..50ee997 100644
--- a/src/router/page/index.js
+++ b/src/router/page/index.js
@@ -118,7 +118,7 @@ export default [{
         i18n: 'dashboard'
       },
       component: () =>
-        import( /* webpackChunkName: "views" */ '@/views/opsVisualization/tuobu')
+        import( /* webpackChunkName: "views" */ '@/page/opsVisualization/tuobu')
     }
   ]
 },
diff --git a/src/views/opsVisualization/jiedian.vue b/src/views/opsVisualization/jiedian.vue
index c32edbb..21b1f00 100644
--- a/src/views/opsVisualization/jiedian.vue
+++ b/src/views/opsVisualization/jiedian.vue
@@ -3,6 +3,7 @@
 		<!-- <img :class="img == 'jiedian_red' ? 'fuwuyigua' : 'jiedianyigua'" src="../../../public/img/tuobu/fuwuyigua.png" alt=""> -->
 		<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt="">
 		<div class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div>
+		<div>{{ status }}</div>
 	</div>
 </template>
 
@@ -25,7 +26,10 @@ export default {
         },
         top: {
             type: String
-        }
+        },
+		status: {
+			type: Boolean
+		}
 	},
 	created() {},
 	mounted() {
diff --git a/vue.config.js b/vue.config.js
index f3fac99..1e9646c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -65,6 +65,13 @@ module.exports = {
           "^/api": "/",
         },
       },
+      "/kgApi": {
+        target: "http://192.168.1.5:8080",
+        ws: true,
+        pathRewrite: {
+          "^/kgApi": "/",
+        },
+      },
     },
   },
 };