suojin
/
smartpark-front
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

系统监控、服务监控接口对接

Browse Source
main
guanxiaohan 2 years ago
parent 89a68d4066
commit 801e2f85b9
13 changed files with 282 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/img/tuobu/dtu_down_img.png
  2. BIN
      public/img/tuobu/shebeiyichang.png
  3. BIN
      public/img/tuobu/wangguan_down_img.png
  4. 20
      src/api/opsVisualization/systemMonitoring.js
  5. 8
      src/api/opsVisualization/tuobu.js
  6. 3
      src/page/opsVisualization/alarmProcess.vue
  7. 14
      src/page/opsVisualization/jiedian.vue
  8. BIN
      src/page/opsVisualization/systemMonitoring/icon/icon5.png
  9. 169
      src/page/opsVisualization/systemMonitoring/index.vue
  10. 132
      src/page/opsVisualization/tuobu.vue
  11. 2
      src/router/page/index.js
  12. 6
      src/views/opsVisualization/jiedian.vue
  13. 7
      vue.config.js

BIN
public/img/tuobu/dtu_down_img.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/img/tuobu/shebeiyichang.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
public/img/tuobu/wangguan_down_img.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

20
src/api/opsVisualization/systemMonitoring.js
Unescape View File

@ -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',
})
}

8
src/api/opsVisualization/tuobu.js
Unescape View File

@ -0,0 +1,8 @@
import request from '@/router/axios';
export const getMonitorList = () => {
return request({
url: '/kgApi/monitor-system/getMonitorList',
method: 'get',
})
}

3
src/page/opsVisualization/alarmProcess.vue
Unescape View File

@ -118,6 +118,7 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
@ -128,10 +129,8 @@ export default {
}, },
mounted() { mounted() {
}, },
methods: { methods: {
} }
} }
</script> </script>

14
src/page/opsVisualization/jiedian.vue
Unescape View File

@ -1,7 +1,12 @@
<template> <template>
<div class="unit"> <div class="unit">
<!-- <img :class="img == 'jiedian_red' ? 'fuwuyigua' : 'jiedianyigua'" src="../../../public/img/tuobu/fuwuyigua.png" alt=""> --> <img
<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt=""> 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 class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div>
</div> </div>
</template> </template>
@ -25,7 +30,10 @@ export default {
}, },
top: { top: {
type: String type: String
} },
status: {
type: Boolean
}
}, },
created() {}, created() {},
mounted() { mounted() {

BIN
src/page/opsVisualization/systemMonitoring/icon/icon5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 B

169
src/page/opsVisualization/systemMonitoring/index.vue
Unescape View File

@ -1,13 +1,13 @@
<template> <template>
<div class="page"> <div class="page">
<div class="search_box"> <!-- <div class="search_box">
<el-select class="search_select" placeholder="按服务类别查询"> <el-select class="search_select" placeholder="按服务类别查询">
</el-select> </el-select>
<el-input class="search_input" /> <el-input class="search_input" />
<el-button class="search_button"> <el-button class="search_button">
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
</el-button> </el-button>
</div> </div> -->
<div class="content_box1"> <div class="content_box1">
<div class="content_title"> <div class="content_title">
<img src="./icon/icon1.png" alt="" /> <img src="./icon/icon1.png" alt="" />
@ -15,34 +15,36 @@
</div> </div>
<div class="flexBox"> <div class="flexBox">
<div <div
v-for="item in list" v-for="(item, index) in serviceListData"
:key="item.value" :key="index"
class="itemBox" class="itemBox"
:style="{ :style="{
borderColor: item.state ? '#dcdcdc' : '#e14b33', borderColor: item.color != 'red' ? '#dcdcdc' : '#e14b33',
background: item.state ? '' : '#FFF2F2 ', background: item.color != 'red' ? '' : '#FFF2F2 ',
}" }"
> >
<div <div
class="item_title" class="item_title"
:style="{ color: item.state ? '' : '#E14B33 ' }" :style="{ color: item.color != 'red' ? '' : '#E14B33 ' }"
> >
权限服务 {{ item.name }}
</div> </div>
<div <!-- <div
class="item_EnTitle" class="item_EnTitle"
:style="{ color: item.state ? '#999999' : '#E14B33 ' }" :style="{ color: item.state ? '#999999' : '#E14B33 ' }"
> >
AuthApplication AuthApplication
</div> </div> -->
<div <div
class="color_block" class="color_block"
:style="{ background: item.state ? '#4fd069' : '#e14b33' }" :style="{ background: item.color != 'red' ? '#4fd069' : '#e14b33' }"
></div> >
<img :src="item.icon" alt="">
</div>
<div class="item_bottom"> <div class="item_bottom">
<div>状态</div> <div>状态</div>
<div :style="{ color: item.state ? '#26B843' : '#E14B33' }"> <div :style="{ color: item.color != 'red' ? '#26B843' : '#E14B33' }">
{{ item.state ? "正常" : "服务已挂" }} {{ item.color != 'red' ? "正常" : "设备异常" }}
</div> </div>
</div> </div>
</div> </div>
@ -52,6 +54,35 @@
<div <div
class="itemBox" class="itemBox"
style="width: 240px; height: 216px; position: relative" 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 <div
class="item_title content_title" class="item_title content_title"
@ -101,19 +132,22 @@
<div>状态</div> <div>状态</div>
<div>正常</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>
<div class="content_box3"> <div class="bottom-box">
<div <div v-for="(item, index) in serverParamsListData" :key="index" class="itemBox3">
class="item_title content_title" <div class="ip-title">{{ item[0].ip }}</div>
style="height: 0; width: 100%; margin-bottom: 20px" <div v-for="(i, n) in item" :key="n" class="itemBox3_item">
> <div class="item_title">{{ i.monitorType == 'cpu' ? 'CPU使用率': (i.monitorType == 'memory' ? '内存使用率' : '硬盘使用率') }}</div>
<img src="./icon/icon4.png" alt="" /> <!-- <div class="item_EnTitle">AuthApplication</div> -->
系统硬件监控
</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 <div
style=" style="
width: 57px; width: 57px;
@ -131,11 +165,12 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
" "
:style="i.result == 'result' ? 'height: 66%; background: #F68031' : 'height: 33%; background: green'"
></div> ></div>
</div> </div>
<div class="item_bottom"> <div class="item_bottom">
<div>状态</div> <div>状态</div>
<div>正常</div> <div :style="i.result == 'result' ? 'color: #F68031' : 'color: green'">{{ i.result == 'result' ? '硬件异常' : i.result }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -146,6 +181,7 @@
<script> <script>
import { color } from "echarts"; import { color } from "echarts";
import { getServiceList, getMiddleList, getServerParamsList } from "@/api/opsVisualization/systemMonitoring";
export default { export default {
data() { data() {
@ -171,12 +207,41 @@ export default {
{ name: "应用服务", value: 4, state: 1 }, { name: "应用服务", value: 4, state: 1 },
{ name: "应用服务", value: 5, state: 1 }, { name: "应用服务", value: 5, state: 1 },
], ],
serviceListData: [],
middleListData: [],
serverParamsListData: [],
}; };
}, },
watch: {}, watch: {},
computed: {}, computed: {},
mounted() {}, mounted() {
methods: {}, 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> </script>
@ -214,15 +279,15 @@ export default {
} }
.content_box1 { .content_box1 {
width: 1640px; width: 1640px;
height: 498px; // height: 498px;
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
padding: 20px 0 0 20px; padding: 20px 0 0 20px;
} }
.content_box3 { .content_box3 {
padding: 20px; width: 1640px;
flex: 1; // height: 498px;
height: 178px;
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
padding: 20px;
} }
.content_title { .content_title {
font-size: 20px; font-size: 20px;
@ -239,7 +304,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
} }
.itemBox { .itemBox {
width: 200px; width: 210px;
height: 212px; height: 212px;
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
margin: 0 20px 30px 0; margin: 0 20px 30px 0;
@ -250,17 +315,22 @@ export default {
.color_block { .color_block {
width: 76px; width: 76px;
height: 76px; height: 76px;
margin: 20px 0 14px 0; margin: 40px 0 14px 0;
display: flex;
justify-content: center;
align-items: center;
} }
} }
.itemBox3 { .itemBox3 {
width: 210px; width: 100%;
height: 154px; height: 224px;
border: 1px solid #dcdcdc; // border: 1px solid #dcdcdc;
margin: 0 20px 30px 0; margin: 0 20px 30px 0;
display: flex; display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; align-items: center;
position: relative;
padding-top: 60px;
} }
.item_title { .item_title {
font-weight: bold; font-weight: bold;
@ -284,4 +354,25 @@ export default {
color: #26b843; 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> </style>

132
src/page/opsVisualization/tuobu.vue
Unescape View File

@ -5,28 +5,28 @@
<!-- 左边 --> <!-- 左边 -->
<img class="server_1_top_left" src="../../../public/img/tuobu/server_1_top_left.png" alt=""> <img class="server_1_top_left" src="../../../public/img/tuobu/server_1_top_left.png" alt="">
<div class="top_left_jiedian_box"> <div class="top_left_jiedian_box">
<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'定时任务服务'" :left="'-15'" :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'" :text="'系统服务'" :left="'0'" :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'" :text="'websocke服务'" :left="'-15'" :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'" :text="'门禁服务'" :left="'0'" :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'" :text="'xxljob服务'" :left="'-5'" :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'" :text="'用户服务'" :left="'0'" :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'" :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'" :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'" :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> </div>
<img class="server_1_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt=""> <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_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_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=""> <img class="server_1_center_right" src="../../../public/img/tuobu/server_1_center_right.png" alt="">
<div class="center_jiedian_box"> <div class="center_jiedian_box">
<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'mqtt服务'" :left="'-33'"></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'" :text="'http服务'" :left="'-30'"></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'" :text="'modebus服务'" :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> </div>
<img class="server_1_bottom_center_left" src="../../../public/img/tuobu/server_1_bottom_center.png" alt=""> <img class="server_1_bottom_center_left" src="../../../public/img/tuobu/server_1_bottom_center.png" alt="">
<div class="bottom_jiedian_box_1"> <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> </div>
<img class="server_1_bottom_left" src="../../../public/img/tuobu/server_1_bottom_left.png" alt=""> <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=""> <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_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=""> <img class="server_1_bottom_item_4" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
<div class="bottom_left_jiedian_box"> <div class="bottom_left_jiedian_box">
<jiedian class="jiedian jiedian_4" :img="'dianti_img'" :text="'电梯'" :left="'15'" :top="'110'"></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'" :text="'消防'" :left="'10'" :top="'75'"></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'" :text="'暖表'" :left="'18'" :top="'40'"></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'" :text="'水表'" :left="'15'" :top="'40'"></jiedian> <jiedian class="jiedian jiedian_1" :img="'shuibiao_img'" :status="shebeiList.shuibiao" :text="'水表'" :left="'15'" :top="'40'"></jiedian>
</div> </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_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_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_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=""> <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_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_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> <!-- <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=""> <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" 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_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=""> <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_kongtiao" :img="'kongtiao_img'" :status="shebeiList.kongtiaomianban" :text="'空调面板'" :left="'-10'" :top="'60'"></jiedian>
<jiedian class="jiedian jiedian_dianbiao" :img="'dianbiao_img'" :text="'电表'" :left="'5'" :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> <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=""> <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=""> <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> <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=""> <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" 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_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=""> <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_kongtiao_2" :img="'kongtiao_2_img'" :status="shebeiList.kongtiao" :text="'空调'" :left="'5'" :top="'60'"></jiedian>
<jiedian class="jiedian jiedian_zhaoming" :img="'zhaoming_img'" :text="'照明'" :left="'35'" :top="'30'"></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> <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=""> <img class="server_4_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
<div class="right_jiedian_box"> <div class="right_jiedian_box">
<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'resdis服务监控'" :left="'0'" :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" :img="'jiedian_blue'" :text="'数据库监控'" :left="'10'" :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>
</div> </div>
</template> </template>
@ -81,16 +81,82 @@
<script> <script>
import serverUnit from "./serverUnit.vue" import serverUnit from "./serverUnit.vue"
import jiedian from "./jiedian.vue" import jiedian from "./jiedian.vue"
import { getMonitorList } from "@/api/opsVisualization/tuobu";
export default { export default {
data() { data() {
return { 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: { components: {
serverUnit, serverUnit,
jiedian 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> </script>

2
src/router/page/index.js
Unescape View File

@ -118,7 +118,7 @@ export default [{
i18n: 'dashboard' i18n: 'dashboard'
}, },
component: () => component: () =>
import( /* webpackChunkName: "views" */ '@/views/opsVisualization/tuobu') import( /* webpackChunkName: "views" */ '@/page/opsVisualization/tuobu')
} }
] ]
}, },

6
src/views/opsVisualization/jiedian.vue
Unescape View File

@ -3,6 +3,7 @@
<!-- <img :class="img == 'jiedian_red' ? 'fuwuyigua' : 'jiedianyigua'" src="../../../public/img/tuobu/fuwuyigua.png" alt=""> --> <!-- <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 class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt="">
<div class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div> <div class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div>
<div>{{ status }}</div>
</div> </div>
</template> </template>
@ -25,7 +26,10 @@ export default {
}, },
top: { top: {
type: String type: String
} },
status: {
type: Boolean
}
}, },
created() {}, created() {},
mounted() { mounted() {

7
vue.config.js
Unescape View File

@ -65,6 +65,13 @@ module.exports = {
"^/api": "/", "^/api": "/",
}, },
}, },
"/kgApi": {
target: "http://192.168.1.5:8080",
ws: true,
pathRewrite: {
"^/kgApi": "/",
},
},
}, },
}, },
}; };

Write Preview
Loading…
Cancel
Save