接口联调

main
lizhichao 2 years ago
parent 96099bda98
commit dcf3385a97
  1. 4
      src/api/opsVisualization/alarmProcess.js
  2. 6
      src/api/opsVisualization/serviceDataOAM.js
  3. 6
      src/api/opsVisualization/systemMonitoring.js
  4. 2
      src/api/opsVisualization/tuobu.js
  5. 4
      src/page/index/sidebar/opsSidebar.vue
  6. 489
      src/page/opsVisualization/alarmProcess.vue
  7. 64
      src/page/opsVisualization/components/normal.vue
  8. 69
      src/page/opsVisualization/serviceDataOAM.vue
  9. 138
      src/page/opsVisualization/systemMonitoring/index.vue

@ -3,7 +3,7 @@ import request from '@/router/axios';
//设备类型通讯链路及排除方案
export const getWarnPoint = (params) => {
return request({
url: '/kgApi/monitor-business/getWarnPoint',
url: '/monitor-business/getWarnPoint',
method: 'get',
params
})
@ -11,7 +11,7 @@ export const getWarnPoint = (params) => {
//排查方案信息列表
export const getResolveTips = (params) => {
return request({
url: '/kgApi/monitor-business/getResolveTips',
url: '/monitor-business/getResolveTips',
method: 'get',
params
})

@ -2,7 +2,7 @@ import request from '@/router/axios';
//报警设备列表
export const getEquipList = (params) => {
return request({
url: '/kgApi/monitor-business/getEquipList',
url: '/monitor-business/getEquipList',
method: 'get',
params
})
@ -10,7 +10,7 @@ export const getEquipList = (params) => {
//当前报警信息
export const getWarnMsg = (params) => {
return request({
url: '/kgApi/monitor-business/getWarnMsg',
url: '/monitor-business/getWarnMsg',
method: 'get',
params
})
@ -18,7 +18,7 @@ export const getWarnMsg = (params) => {
//报警记录
export const getWarnHisList = (params) => {
return request({
url: '/kgApi/monitor-business/getWarnHisList',
url: '/monitor-business/getWarnHisList',
method: 'get',
params
})

@ -2,19 +2,19 @@ import request from '@/router/axios';
export const getServiceList = () => {
return request({
url: '/kgApi/monitor-system/getServiceList',
url: '/monitor-system/getServiceList',
method: 'get',
})
}
export const getMiddleList = () => {
return request({
url: '/kgApi/monitor-system/getMiddleList',
url: '/monitor-system/getMiddleList',
method: 'get',
})
}
export const getServerParamsList = () => {
return request({
url: '/kgApi/monitor-system/getServerParamsList',
url: '/monitor-system/getServerParamsList',
method: 'get',
})
}

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

@ -32,9 +32,9 @@
<span> 业务数据运维</span>
</template>
<el-menu-item-group>
<el-menu-item index="/opsVisualization/alarmProcess">
<!-- <el-menu-item index="/opsVisualization/alarmProcess">
业务数据监控</el-menu-item
>
> -->
<el-menu-item index="/opsVisualization/serviceDataOAM">
报警信息记录</el-menu-item
>

@ -2,146 +2,177 @@
<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>
<el-carousel
style="position: relative"
:autoplay="false"
:loop="false"
@change="change"
>
<div
style="
width: 100%;
height: 100%;
position: absolute;
background: rgba(255, 255, 255, 0.9);
z-index: 9;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 300px;
z-index: 99;
"
v-show="loading1 || !warnPoint.length"
>
{{
loading1 ? "数据加载中..." : "未查询到设备类型通讯链路及排除方案"
}}
</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>
<el-carousel-item v-for="(item, index) in warnPoint" :key="item">
<div class="main">
<div class="process-example">
<div style="position: absolute; left: 24px">
{{ warnPoint.length }}{{
index + 1 + "/" + warnPoint.length
}}
</div>
<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="name">dtu断联报警</div>
<div class="code">dtu编号SJK001</div>
<div class="btn red-btn">
<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" v-if="item.lineData && item.lineData[0]">
<img
class="img"
src="../../../public/img/process/serch.png"
alt=""
class="nav_img"
src="../../../public/img/process/node1.png"
/>
<div class="text">请检查dtu设备</div>
<div class="node-text">
{{
item.lineData && item.lineData[0] && item.lineData[0].name
}}
</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">
<normal
v-if="item.lineData && item.lineData[1]"
:params="item.lineData[1]"
/>
<div class="node-img" v-if="item.lineData && item.lineData[1]">
<img
class="nav_img"
src="../../../public/img/process/node2.png"
/>
<div class="node-text">
{{
item.lineData && item.lineData[1] && item.lineData[1].name
}}
</div>
</div>
<normal
v-if="item.lineData && item.lineData[2]"
:params="item.lineData[2]"
/>
<div class="node-img" v-if="item.lineData && item.lineData[2]">
<img
class="nav_img"
src="../../../public/img/process/node3.png"
/>
<div class="node-text">
{{
item.lineData && item.lineData[2] && item.lineData[2].name
}}
</div>
</div>
<normal
v-if="item.lineData && item.lineData[3]"
:params="item.lineData[3]"
/>
<div class="node-img" v-if="item.lineData && item.lineData[3]">
<img
class="img"
src="../../../public/img/process/loading.png"
alt=""
class="nav_img"
src="../../../public/img/process/node4.png"
/>
<div class="text">等待重新链接</div>
<div class="node-text">
{{
item.lineData && item.lineData[3] && item.lineData[3].name
}}
</div>
</div>
<normal
v-if="item.lineData && item.lineData[4]"
:params="item.lineData[4]"
/>
<div class="node-img" v-if="item.lineData && item.lineData[4]">
<img
class="nav_img"
src="../../../public/img/process/node5.png"
/>
<div class="node-text">
{{
item.lineData && item.lineData[4] && item.lineData[4].name
}}
</div>
</div>
</div>
<div class="process-more">
<div class="button" @click="() => open(item)">
查看更多报警信息
</div>
</div>
</div>
<div class="restart">
<div class="restart-title">操作</div>
<div class="restart-btn">一键重启</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</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 class="title" style="z-index: 10">报警解决方法</div>
<div
style="
width: 100%;
height: 280px;
position: absolute;
background: rgba(255, 255, 255, 0.9);
z-index: 9;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 300px;
border: 1px solid #d1d1d1;
border-top: none;
"
v-show="loading2 && !resolveTips.length"
>
{{ loading2 ? "数据加载中..." : "未查询到报警解决方法" }}
</div>
<div class="text-box" style="display: flex; padding: 28px 0 0 44px">
<div class="label" style="font-size: 18px; font-weight: bold">
排查方法
</div>
<div class="text-box">
<div class="label">排查方法</div>
<div>
<div class="value">
<div class="item">1.检查电源是否正常重新接入或更换电源</div>
<div class="item">
2.检查是否过载重新调整系统负载或更换更高性能的设备
</div>
<div class="item">
3.检查温度是否过高采取措施降低温度如改变工作环境或更换散热设备
</div>
<div class="item">
4.检查是否受到电磁干扰采取措施降低干扰如改变工作环境或更换屏蔽设备
<div class="item" v-for="item in resolveTips">
{{ item.shortNum }}.{{ item.tips }}
</div>
</div>
</div>
</div>
<!-- <div class="text-box" style="margin: 0;">
<div class="label">{{ item.shortNum }}.</div>
<div class="value">
<div class="item">{{ item.tips }}</div>
</div>
</div> -->
</div>
</div>
</template>
@ -150,52 +181,188 @@
import {
getWarnPoint,
getResolveTips,
} from "@/api/opsVisualization/serviceDataOAM";
} from "@/api/opsVisualization/alarmProcess";
import normal from "./components/normal.vue";
export default {
data() {
return {
data: [
{
classCode: "设备类型编码,0100",
pointCode: "报警节点code,1",
tips: "排查方案说明,简单进线电流",
shortNum: 1, //
},
],
resolveTips: [],
warnPoint: [],
loading1: false,
loading2: false,
carouselIndex: 0,
};
},
components: {
normal,
},
created() {},
mounted() {
// [
// {
// nodeid: 1,
// list: [
// {
// name: "",
// state: "",
// },
// {
// name: "",
// state: "",
// },
// {
// name: "",
// state: "",
// },
// {
// name: "dtu",
// state: "dtu",
// },
// {
// name: "",
// state: "",
// },
// ],
// },
// ];
getResolveTips();
const { serviceCode = "" } = this.$route.query;
this.loading1 = true;
getWarnPoint({ serviceCode })
.then((res) => {
//
this.loading1 = false;
let arr = res.data.data;
// let arr = [
// {
// classCode: "0200", //
// lineData: [
// {
// parent: "294", // id
// name: "data", //
// id: 301, // id
// type: "equip", //
// class_code: "0200", //
// status: 4, //
// },
// {
// parent: "293",
// name: "gateway",
// id: 294,
// type: "middleware",
// status: 4,
// },
// {
// parent: "11",
// name: "mqtt",
// id: 293,
// type: "middleware",
// status: 4,
// },
// {
// parent: "0",
// name: "",
// id: 11,
// type: "service",
// status: 2,
// },
// ],
// },
// {
// classCode: "0201", //
// lineData: [
// {
// parent: "294", // id
// name: "data", //
// id: 301, // id
// type: "equip", //
// class_code: "0200", //
// status: 4, //
// },
// {
// parent: "293",
// name: "gateway",
// id: 294,
// type: "middleware",
// status: 4,
// },
// {
// parent: "11",
// name: "mqtt",
// id: 293,
// type: "middleware",
// status: 4,
// },
// {
// parent: "0",
// name: "",
// id: 11,
// type: "service",
// status: 2,
// },
// ],
// },
// ];
arr.map((i) => {
i.lineData = this.arrSort(i.lineData);
});
this.warnPoint = arr;
this.loading1 = false;
console.log(
arr,
"warnPointwarnPointwarnPointwarnPointwarnPointwarnPoint"
);
//
this.loading2 = true;
getResolveTips({
classCode: this.warnPoint[0].classCode,
pointCode: this.warnPoint[0].lineData.find(
(i) => i.status == 2 || i.status == 3
).type,
})
.then((res) => {
this.resolveTips = res.data.data;
this.loading2 = false;
})
.catch((err) => {
this.$message.warning("排查方案信息列表查询失败,请联系管理员!");
this.loading2 = false;
});
})
.catch((err) => {
this.$message.warning(
"设备类型通讯链路及排除方案查询失败,请联系管理员!"
);
this.loading1 = false;
});
},
methods: {
change(index) {
console.log("indexindexindex", index);
this.loading2 = true;
getResolveTips({
classCode: this.warnPoint[index].classCode,
pointCode: this.warnPoint[index].lineData.find(
(i) => i.status == 2 || i.status == 3
).type,
})
.then((res) => {
this.resolveTips = res.data.data;
this.loading2 = false;
})
.catch((err) => {
this.$message.warning("排查方案信息列表查询失败,请联系管理员!");
this.loading2 = false;
});
},
open(detail) {
this.$router.push({
path: `/opsVisualization/serviceDataOAM?equipCode=&warnStatus=1&classCode=${detail.classCode}`,
});
},
arrSort(list) {
let arr = [];
arr[0] = list.find((i) => i.parent == 0);
if (arr[0]) {
arr[1] = list.find((i) => i.parent == arr[0].id);
}
if (arr[1]) {
arr[2] = list.find((i) => i.parent == arr[1].id);
}
if (arr[2]) {
arr[3] = list.find((i) => i.parent == arr[2].id);
}
if (arr[3]) {
arr[4] = list.find((i) => i.parent == arr[3].id);
}
if (arr[4]) {
arr[5] = list.find((i) => i.parent == arr[4].id);
}
if (arr[5]) {
arr[6] = list.find((i) => i.parent == arr[4].id);
}
arr.splice(arr.length - 1, 1);
return arr;
},
},
methods: {},
};
</script>
@ -205,7 +372,7 @@ export default {
.process {
width: calc(100% - 218px);
margin-left: 218px;
height: 584px;
height: 500px;
background: #ffffff;
border-radius: 0px 0px 0px 0px;
border: 1px solid #d1d1d1;
@ -432,6 +599,7 @@ export default {
}
}
.method {
height: 270px;
flex: 1;
margin-top: 30px;
width: calc(100% - 218px);
@ -442,6 +610,7 @@ export default {
border: 1px solid #d1d1d1;
display: flex;
flex-direction: column;
position: relative;
.title {
width: 100%;
height: 40px;

@ -0,0 +1,64 @@
<template>
<div class="yes-no">
<div class="yes" v-if="params.status != 2 && params.status != 3"></div>
<img
class="nav_img"
src="../../../../public/img/process/yes.png"
v-if="params.status != 2 && params.status != 3"
/>
<div class="no" v-show="!(params.status != 2 && params.status != 3)"></div>
<img
class="nav_img"
src="../../../../public/img/process/no.png"
v-show="!(params.status != 2 && params.status != 3)"
/>
</div>
</template>
<script>
export default {
props: {
params: {
type: Object,
default: {},
},
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.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;
}
}
</style>

@ -4,16 +4,16 @@
<el-col :span="21" style="height: 100%">
<basic-container style="height: 100%">
<div class="search_box">
<el-input
<!-- <el-input
class="search_input"
v-model="classCode"
placeholder="请输入设备类型编码"
clearable
/>
/> -->
<el-select
class="search_select"
placeholder="请选择报警状态"
style="margin: 0 20px 0 10px"
style="margin: 0 20px 0 0"
v-model="warnStatus"
>
<el-option label="全部" value=""></el-option>
@ -26,6 +26,12 @@
placeholder="请输入设备编码"
clearable
/>
<!-- <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>
@ -48,7 +54,7 @@
align="center"
>
</el-table-column>
<el-table-column prop="classCode" label="设备编码" width="180">
<el-table-column prop="equipCode" label="设备编码" width="180">
</el-table-column>
<el-table-column prop="equipName" label="设备名称">
</el-table-column>
@ -59,7 +65,7 @@
align="center"
>
</el-table-column>
<el-table-column prop="equipContent" label="报警信息">
<el-table-column prop="warnContent" label="报警信息">
</el-table-column>
<el-table-column prop="warnDate" label="报警时间">
</el-table-column>
@ -71,7 +77,14 @@
width="100"
align="center"
>
<el-button type="text" size="small">查看</el-button>
<template slot-scope="scope">
<el-button
@click="handleDetail(scope.row)"
type="text"
size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<div class="el_pagination">
@ -80,7 +93,7 @@
width: 100%;
height: 100%;
position: absolute;
background: rgba(255,255,255,.9);
background: rgba(255, 255, 255, 0.9);
z-index: 9;
position: absolute;
top: 0;
@ -118,13 +131,13 @@
>报警信息记录</span
>
</div>
<el-select placeholder="按报警时间查询" class="box_select">
</el-select>
<!-- <el-select placeholder="按报警时间查询" class="box_select">
</el-select> -->
<div class="timelineBox">
<div style="width: 100%">
<div class="timelineBoxTitle">
<span>{{ tabKey == 1 ? "报警详情信息" : "报警信息记录" }}</span>
<span>更多</span>
<!-- <span style="cursor: pointer;">更多</span> -->
</div>
<div class="timelineBoxContent" v-if="warnMsgList.length">
<div
@ -200,7 +213,7 @@
.timelineBox {
margin-top: 30px;
width: 100%;
height: 24vh;
height: 32vh;
display: flex;
border: 1px solid #d1d1d1;
}
@ -210,9 +223,6 @@
display: flex;
justify-content: space-between;
padding: 0 30px 0 24px;
> span {
cursor: pointer;
}
}
.timelineBoxContent {
display: flex;
@ -299,10 +309,16 @@ export default {
tableData: [],
warnMsgList: [],
equipCode2: "",
};
},
computed: {},
mounted() {
const { equipCode = "", warnStatus = "", classCode } = this.$route.query;
this.equipCode = equipCode;
this.warnStatus = warnStatus;
this.classCode = classCode;
this.handleSearch();
},
methods: {
@ -319,29 +335,28 @@ export default {
equipCode,
currentPage,
pageSize,
}).then((res) => {
}).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;
});
},
tabChange(tabKey) {
this.tabKey = tabKey;
const { equipCode } = this;
const { equipCode2 } = this;
if (tabKey == 1) {
getWarnMsg({ equipCode }).then((res) => {
getWarnMsg({ equipCode: equipCode2 }).then((res) => {
this.warnMsgList = res.data.data;
});
} else if (tabKey == 2) {
getWarnHisList({ equipCode, currentPage: 1, pageSize: 10 }).then(
(res) => {
this.warnMsgList = res.data.data.records;
}
);
getWarnHisList({
equipCode: equipCode2,
currentPage: 1,
pageSize: 99,
}).then((res) => {
this.warnMsgList = res.data.data.records;
});
}
},
//
@ -379,6 +394,10 @@ export default {
this.loading = false;
});
},
handleDetail(detail) {
this.equipCode2 = detail.equipCode;
this.tabChange(1);
},
},
};
</script>

@ -22,6 +22,7 @@
borderColor: item.color != 'red' ? '#dcdcdc' : '#e14b33',
background: item.color != 'red' ? '' : '#FFF2F2 ',
}"
@click="() => handleTo(item)"
>
<div
class="item_title"
@ -29,22 +30,18 @@
>
{{ item.name }}
</div>
<!-- <div
class="item_EnTitle"
:style="{ color: item.state ? '#999999' : '#E14B33 ' }"
>
AuthApplication
</div> -->
<div
class="color_block"
:style="{ background: item.color != 'red' ? '#4fd069' : '#e14b33' }"
>
<img :src="item.icon" alt="">
<img :src="item.icon" alt="" />
</div>
<div class="item_bottom">
<div>状态</div>
<div :style="{ color: item.color != 'red' ? '#26B843' : '#E14B33' }">
{{ item.color != 'red' ? "正常" : "设备异常" }}
<div
:style="{ color: item.color != 'red' ? '#26B843' : '#E14B33' }"
>
{{ item.color != "red" ? "正常" : "设备异常" }}
</div>
</div>
</div>
@ -56,28 +53,38 @@
style="width: 240px; height: 216px; position: relative"
v-for="(item, index) in middleListData"
:key="index"
@click="() => handleTo(item)"
: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 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' }"
:style="{
background: item.result != 'result' ? '#4fd069' : '#e14b33',
}"
>
<img :src="item.icon" alt="">
<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
:style="{ color: item.result != 'result' ? '#26B843' : '#E14B33' }"
>
{{ item.result != "result" ? "正常" : "服务已挂" }}
</div>
</div>
</div>
<!-- <div
@ -143,10 +150,22 @@
系统硬件监控
</div>
<div class="bottom-box">
<div v-for="(item, index) in serverParamsListData" :key="index" class="itemBox3">
<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_title">
{{
i.monitorType == "cpu"
? "CPU使用率"
: i.monitorType == "memory"
? "内存使用率"
: "硬盘使用率"
}}
</div>
<!-- <div class="item_EnTitle">AuthApplication</div> -->
<div
style="
@ -165,12 +184,22 @@
position: absolute;
bottom: 0;
"
:style="i.result == 'result' ? 'height: 66%; background: #F68031' : 'height: 33%; background: green'"
:style="
i.result == 'result'
? 'height: 66%; background: #F68031'
: 'height: 33%; background: green'
"
></div>
</div>
<div class="item_bottom">
<div>状态</div>
<div :style="i.result == 'result' ? 'color: #F68031' : 'color: green'">{{ i.result == 'result' ? '硬件异常' : i.result }}</div>
<div
:style="
i.result == 'result' ? 'color: #F68031' : 'color: green'
"
>
{{ i.result == "result" ? "硬件异常" : i.result }}
</div>
</div>
</div>
</div>
@ -180,33 +209,15 @@
</template>
<script>
import { color } from "echarts";
import { getServiceList, getMiddleList, getServerParamsList } from "@/api/opsVisualization/systemMonitoring";
import {
getServiceList,
getMiddleList,
getServerParamsList,
} from "@/api/opsVisualization/systemMonitoring";
export default {
data() {
return {
list: [
{ name: "应用服务", value: 1, state: 1 },
{ name: "应用服务", value: 2, state: 1 },
{ name: "应用服务", value: 3, state: 0 },
{ name: "应用服务", value: 4, state: 1 },
{ name: "应用服务", value: 5, state: 1 },
{ name: "应用服务", value: 6, state: 1 },
{ name: "应用服务", value: 7, state: 1 },
{ name: "应用服务", value: 8, state: 1 },
{ name: "应用服务", value: 9, state: 1 },
{ name: "应用服务", value: 10, state: 0 },
{ name: "应用服务", value: 11, state: 1 },
{ name: "应用服务", value: 12, state: 1 },
],
list2: [
{ name: "应用服务", value: 1, state: 1 },
{ name: "应用服务", value: 2, state: 1 },
{ name: "应用服务", value: 3, state: 1 },
{ name: "应用服务", value: 4, state: 1 },
{ name: "应用服务", value: 5, state: 1 },
],
serviceListData: [],
middleListData: [],
serverParamsListData: [],
@ -215,19 +226,19 @@ export default {
watch: {},
computed: {},
mounted() {
this.init()
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()
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 => {
data.forEach((item) => {
// IP
const ip = item.ip;
// MapIP
@ -239,8 +250,14 @@ export default {
console.log(groupedData);
});
this.serverParamsListData = Array.from(groupedData.values());
console.log(this.serverParamsListData)
}
console.log(this.serverParamsListData);
},
//
handleTo(detail) {
this.$router.push({
path: `/opsVisualization/alarmProcess?serviceCode=${detail.id}`,
});
},
},
};
</script>
@ -330,15 +347,12 @@ export default {
// flex-direction: column;
align-items: center;
position: relative;
padding-top: 60px;
padding-top: 60px;
}
.item_title {
font-weight: bold;
margin: 20px 0 2px 0;
}
.item_EnTitle {
font-size: 14px;
}
.item_bottom {
width: 100%;
display: flex;
@ -354,7 +368,7 @@ export default {
color: #26b843;
}
}
.itemBox3_item{
.itemBox3_item {
width: 210px;
height: 182px;
border: 1px solid #dcdcdc;
@ -363,13 +377,13 @@ export default {
flex-direction: column;
align-items: center;
}
.bottom-box{
.bottom-box {
width: 100%;
display: flex;
flex-direction: column;
// max-width: 1280px
}
.ip-title{
.ip-title {
position: absolute;
top: 10px;
left: 10px;

Loading…
Cancel
Save