monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit ba4dca79bd381f6e31bae2dad93dd748cc6599f1 2 parents 66d50371 1257751d

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 5 changed files with 368 additions and 30 deletions
@@ -37,7 +37,7 @@ @@ -37,7 +37,7 @@
37 <h style="font-size: 20px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h> 37 <h style="font-size: 20px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h>
38 </div> 38 </div>
39 | 39 |
40 - <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #f8d305"> 40 + <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #f8d305" @click="openAlarm">
41 <img src="../src/style/img/error.png"> 41 <img src="../src/style/img/error.png">
42 <span style="margin: 0px 6px 0px 6px;width: 95px;"> 异常</span> 42 <span style="margin: 0px 6px 0px 6px;width: 95px;"> 异常</span>
43 <h style="font-size: 20px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h> 43 <h style="font-size: 20px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h>
1 import store from '/vue3/src/store/index.js'; 1 import store from '/vue3/src/store/index.js';
  2 +import service from '/vue3/src/views/faultDiagnosis/result/service.js';
2 3
3 export default { 4 export default {
4 name: 'faultDialTest', 5 name: 'faultDialTest',
@@ -41,6 +42,13 @@ export default { @@ -41,6 +42,13 @@ export default {
41 }) 42 })
42 } 43 }
43 44
  45 + const openAlarm = () => {
  46 + service.sendEventAlarmDialog(emit,{
  47 + faultNo: props.faultNo,
  48 + targetType: "dialtest"
  49 + });
  50 + }
  51 +
44 // 挂载完 52 // 挂载完
45 Vue.onMounted(() => { 53 Vue.onMounted(() => {
46 getDialtestList(); 54 getDialtestList();
@@ -51,7 +59,8 @@ export default { @@ -51,7 +59,8 @@ export default {
51 allCard, 59 allCard,
52 closeCard, 60 closeCard,
53 cardOpen, 61 cardOpen,
54 - dialTest 62 + dialTest,
  63 + openAlarm
55 } 64 }
56 } 65 }
57 } 66 }
@@ -18,9 +18,48 @@ @@ -18,9 +18,48 @@
18 :itemInfo="faultDetailDetailInfo" 18 :itemInfo="faultDetailDetailInfo"
19 :colType="item.colType" 19 :colType="item.colType"
20 :itemName="item.itemName" 20 :itemName="item.itemName"
21 - :showDetail="item.detail"/> 21 + :showDetail="item.detail"
  22 + @openDialog="openDialog"
  23 + @getResList=""/>
22 </el-card> 24 </el-card>
23 25
24 </el-timeline-item> 26 </el-timeline-item>
25 </el-timeline> 27 </el-timeline>
26 </div> 28 </div>
  29 +
  30 +<!-- *************************************************************************************************************** -->
  31 +<!-- 资源明细 -->
  32 +<cm-dialog top="3vh" title="资源明细" width="80%" :showDialogVisible="resListDialog"
  33 + @hidedialog="showResListDialog" :showFooter="false">
  34 + <template v-slot>
  35 + <div>
  36 + <cm-table-page v-if="resList.columns.length > 0" :columns="resList.columns"
  37 + :dataList="resList.dataList"
  38 + :showIndex="true"
  39 + :showBorder="true"
  40 + @loaddata="loadPage"
  41 + :showPage="false"
  42 + :height="500"
  43 + :showTools="false">
  44 + </cm-table-page>
  45 + </div>
  46 + </template>
  47 +</cm-dialog>
  48 +
  49 +<!-- 告警列表 -->
  50 +<cm-dialog top="3vh" title="告警列表" width="90%" :showDialogVisible="alarmFlg"
  51 + @hidedialog="showAlarmDialog" :showFooter="false">
  52 + <template v-slot>
  53 + <div style="height:720px;max-height:720px;overflow-y: auto;">
  54 + <cm-table-page v-if="alarmList.columns.length > 0" :columns="alarmList.columns"
  55 + :dataList="alarmList.dataList"
  56 + :showIndex="true"
  57 + :showBorder="true"
  58 + @loaddata="loadPage"
  59 + :showPage="false"
  60 + :height="720"
  61 + :showTools="false">
  62 + </cm-table-page>
  63 + </div>
  64 + </template>
  65 +</cm-dialog>
  1 +import service from './service.js'
  2 +
1 export default { 3 export default {
2 name: 'resIndex', 4 name: 'resIndex',
3 template: '', 5 template: '',
@@ -31,9 +33,9 @@ export default { @@ -31,9 +33,9 @@ export default {
31 faultTypeName: '网络链路', 33 faultTypeName: '网络链路',
32 components: 'netLinks', 34 components: 'netLinks',
33 color: '#409EFF', 35 color: '#409EFF',
34 - detail:true,  
35 - state:'0'  
36 - },{ 36 + detail: true,
  37 + state: '0'
  38 + }, {
37 faultType: 'DIALTEST', 39 faultType: 'DIALTEST',
38 faultTypeName: '拨测', 40 faultTypeName: '拨测',
39 components: 'dialtest-item', 41 components: 'dialtest-item',
@@ -41,7 +43,7 @@ export default { @@ -41,7 +43,7 @@ export default {
41 itemName: '场景名称', 43 itemName: '场景名称',
42 detail: false, 44 detail: false,
43 colType: 'kpi', 45 colType: 'kpi',
44 - state:'0' 46 + state: '0'
45 }, { 47 }, {
46 faultType: 'NPM', 48 faultType: 'NPM',
47 faultTypeName: 'NPM', 49 faultTypeName: 'NPM',
@@ -50,7 +52,7 @@ export default { @@ -50,7 +52,7 @@ export default {
50 itemName: '链路（流名称）', 52 itemName: '链路（流名称）',
51 detail: false, 53 detail: false,
52 colType: 'kpi', 54 colType: 'kpi',
53 - state:'0' 55 + state: '0'
54 }, { 56 }, {
55 faultType: 'BASE', 57 faultType: 'BASE',
56 faultTypeName: '基础', 58 faultTypeName: '基础',
@@ -59,7 +61,7 @@ export default { @@ -59,7 +61,7 @@ export default {
59 itemName: '检测指标', 61 itemName: '检测指标',
60 detail: true, 62 detail: true,
61 colType: 'flag', 63 colType: 'flag',
62 - state:'0' 64 + state: '0'
63 }, { 65 }, {
64 faultType: 'APM', 66 faultType: 'APM',
65 faultTypeName: 'APM', 67 faultTypeName: 'APM',
@@ -68,7 +70,7 @@ export default { @@ -68,7 +70,7 @@ export default {
68 itemName: '检测指标', 70 itemName: '检测指标',
69 detail: true, 71 detail: true,
70 colType: 'flag', 72 colType: 'flag',
71 - state:'0' 73 + state: '0'
72 }, { 74 }, {
73 faultType: 'faultHis', 75 faultType: 'faultHis',
74 faultTypeName: '知识库', 76 faultTypeName: '知识库',
@@ -77,7 +79,7 @@ export default { @@ -77,7 +79,7 @@ export default {
77 itemName: '知识库', 79 itemName: '知识库',
78 detail: true, 80 detail: true,
79 colType: 'flag', 81 colType: 'flag',
80 - state:'1' 82 + state: '1'
81 }] 83 }]
82 }); 84 });
83 85
@@ -90,48 +92,61 @@ export default { @@ -90,48 +92,61 @@ export default {
90 * @param row 92 * @param row
91 */ 93 */
92 let settingDetail = (row) => { 94 let settingDetail = (row) => {
93 - proxy.$http.get('/api-web/fault/conf/detail/getDetailByNo', {faultNo:faultDetailDetailInfo.value.faultNo},function(res) {  
94 - if(res.length>0){  
95 - res.forEach((item)=>{  
96 - if(item.type.toUpperCase()=='NETLINK'){  
97 - faultDetailDetailInfo.value.items[0].state= item.state 95 + proxy.$http.get('/api-web/fault/conf/detail/getDetailByNo', {faultNo: faultDetailDetailInfo.value.faultNo}, function (res) {
  96 + if (res.length > 0) {
  97 + res.forEach((item) => {
  98 + if (item.type.toUpperCase() == 'NETLINK') {
  99 + faultDetailDetailInfo.value.items[0].state = item.state
98 } 100 }
99 101
100 - if(item.type.toUpperCase()=='DIALTEST'){  
101 - faultDetailDetailInfo.value.items[1].state= item.state 102 + if (item.type.toUpperCase() == 'DIALTEST') {
  103 + faultDetailDetailInfo.value.items[1].state = item.state
102 } 104 }
103 - if(item.type.toUpperCase()=='NPM'){  
104 - faultDetailDetailInfo.value.items[2].state= item.state 105 + if (item.type.toUpperCase() == 'NPM') {
  106 + faultDetailDetailInfo.value.items[2].state = item.state
105 107
106 } 108 }
107 - if(item.type.toUpperCase()=='BASE'){  
108 - faultDetailDetailInfo.value.items[3].state= item.state 109 + if (item.type.toUpperCase() == 'BASE') {
  110 + faultDetailDetailInfo.value.items[3].state = item.state
109 } 111 }
110 - if(item.type.toUpperCase()=='APM'){  
111 - faultDetailDetailInfo.value.items[4].state= item.state 112 + if (item.type.toUpperCase() == 'APM') {
  113 + faultDetailDetailInfo.value.items[4].state = item.state
112 } 114 }
113 }) 115 })
114 } 116 }
115 117
116 - let arr=[];  
117 - for(var i=0;i<faultDetailDetailInfo.value.items.length;i++ ){  
118 - if(faultDetailDetailInfo.value.items[i].state=='1'){ 118 + let arr = [];
  119 + for (var i = 0; i < faultDetailDetailInfo.value.items.length; i++) {
  120 + if (faultDetailDetailInfo.value.items[i].state == '1') {
119 arr.push(faultDetailDetailInfo.value.items[i]) 121 arr.push(faultDetailDetailInfo.value.items[i])
120 } 122 }
121 } 123 }
122 - faultDetailDetailInfo.value.items= arr; 124 + faultDetailDetailInfo.value.items = arr;
123 }); 125 });
124 // 设置标题 126 // 设置标题
125 faultDetailDialogTitle.value = decodeURI(proxy.$global.getQueryVariable('faultTitle')); 127 faultDetailDialogTitle.value = decodeURI(proxy.$global.getQueryVariable('faultTitle'));
126 } 128 }
127 129
128 - Vue.onMounted(() =>{ 130 + // 展示弹框
  131 + const openDialog = (type, {faultNo, targetType, resId, kpiId, flag}) => {
  132 + if (type == 'alarm') {
  133 + service.openAlarmDialog(proxy, faultNo, targetType, resId, kpiId, flag);
  134 + } else if (type == 'resList') {
  135 + service.handleClick(proxy, faultNo, targetType, resId, kpiId, flag);
  136 + } else if (type == 'line') {
  137 + service.openLine(proxy, faultNo, targetType, resId, kpiId, flag);
  138 + }
  139 + }
  140 +
  141 + Vue.onMounted(() => {
129 settingDetail(); 142 settingDetail();
130 }); 143 });
131 144
132 return { 145 return {
133 faultDetailDialogTitle, 146 faultDetailDialogTitle,
134 - faultDetailDetailInfo 147 + faultDetailDetailInfo,
  148 + openDialog,
  149 + ...service
135 } 150 }
136 } 151 }
137 } 152 }
  1 +/**
  2 + * 折线图
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/15 19:59
  6 + */
  7 +const lineService = () => {
  8 +
  9 + let showLineDialog = Vue.ref(false);
  10 + let dataSet = Vue.ref([]);
  11 +
  12 +
  13 + let closeLineDialog = (flg) => {
  14 + showLineDialog.value = flg;
  15 + }
  16 +
  17 + let openLine = (proxy, faultNo, targetType, resId, kpiId, flag) => {
  18 + // 展示弹框
  19 + closeLineDialog(true);
  20 + // 获取数据
  21 + getLineData(proxy, faultNo, targetType, resId, kpiId, flag);
  22 + }
  23 +
  24 + let getLineData = (proxy, faultNo, targetType, resId, kpiId, flag) => {
  25 + let params = {
  26 + faultNo: faultNo,
  27 + targetType: targetType,
  28 + resId: resId,
  29 + kpiId: kpiId,
  30 + flag: flag
  31 + }
  32 + proxy.$http.get('/api-web/fault/result/findLineData', params, function (res) {
  33 + if (res && res.success) {
  34 + if (res.data) {
  35 + let arr = [];
  36 + arr.push(['product', res.data[0].resName]);
  37 +
  38 + res.data.forEach(function (v) {
  39 + let time = v.collTime;
  40 + let val = v.kpiValue;
  41 + arr.push([time, val]);
  42 + })
  43 + dataSet.value = arr;
  44 + }
  45 + } else {
  46 + proxy.$global.showMsg(res.msg, "warning");
  47 + }
  48 + });
  49 + }
  50 +
  51 + return {
  52 + showLineDialog,
  53 + closeLineDialog,
  54 + openLine,
  55 + dataSet
  56 + }
  57 +}
  58 +
  59 +
  60 +/**
  61 + * 告警列表
  62 + * <p>
  63 + * 作者： Wang
  64 + * 时间：2021/12/15 19:59
  65 + */
  66 +const alarmService = () => {
  67 + let alarmFlg = Vue.ref(false);
  68 +
  69 + let alarmList = Vue.ref({
  70 + columns: [],
  71 + dataList: [],
  72 + total: 0
  73 + });
  74 +
  75 + let showAlarmDialog = (flg) => {
  76 + alarmFlg.value = flg;
  77 + }
  78 +
  79 + let openAlarmDialog = (proxy, faultNo, targetType, resId, kpiId, flag) => {
  80 + showAlarmDialog(true);
  81 + // 获取告警列表
  82 + let params = {
  83 + faultNo: faultNo,
  84 + targetType: targetType,
  85 + resId: resId,
  86 + kpiId: kpiId,
  87 + flag: flag
  88 + }
  89 +
  90 + // 设置表头内容
  91 + alarmList.value.columns = [{
  92 + prop: "resId",
  93 + label: "资源ID",
  94 + width: 120
  95 + }, {
  96 + prop: "kpiId",
  97 + label: "指标ID",
  98 + width: 120
  99 + }, {
  100 + prop: "flag",
  101 + label: "指标标识",
  102 + width: 120
  103 + }, {
  104 + prop: "alarmId",
  105 + label: "告警ID",
  106 + width: 120
  107 + }, {
  108 + prop: "alarmContent",
  109 + label: "告警内容",
  110 + width: 250
  111 + }, {
  112 + prop: "firstAlarmTime",
  113 + label: "首次告警时间",
  114 + width: 120
  115 + }, {
  116 + prop: "recentAlarmTime",
  117 + label: "最近告警时间",
  118 + width: 120
  119 + }, {
  120 + prop: "alarmRepeatCnt",
  121 + label: "告警次数",
  122 + width: 80
  123 + }, {
  124 + prop: "noticeContent",
  125 + label: "通知内容",
  126 + width: 300
  127 + }, {
  128 + prop: "alarmLevel",
  129 + label: "告警级别",
  130 + width: 80,
  131 + render: function (row) {
  132 + let obj = proxy.$global.getAlarmLevel(row.alarmLevel);
  133 + if (obj) {
  134 + return `<span style="color: ${obj.color}">${obj.name}</span>`
  135 + }
  136 + return '';
  137 + }
  138 + }];
  139 +
  140 + proxy.$http.get(`/api-web/fault/result/findAlarmList`, params, function (res) {
  141 + if (res && res.success) {
  142 + if (res.data) {
  143 + alarmList.value.dataList = res.data;
  144 + }
  145 + } else {
  146 + proxy.$global.showMsg(res.msg ? res.msg : '暂无告警数据！', "warning");
  147 + }
  148 + });
  149 + }
  150 +
  151 + return {
  152 + showAlarmDialog,
  153 + openAlarmDialog,
  154 + alarmList,
  155 + alarmFlg
  156 + }
  157 +}
  158 +
  159 +
  160 +/**
  161 + * 资源列表
  162 + * @param props
  163 + * @param openLine
  164 + */
  165 +const resListService = () => {
  166 + let resListDialog = Vue.ref(false);
  167 + let resList = Vue.ref({
  168 + columns: [],
  169 + dataList: [],
  170 + total: 0
  171 + });
  172 +
  173 + let showResListDialog = (flg) => {
  174 + resListDialog.value = flg;
  175 + }
  176 +
  177 + let handleClick = (proxy, faultNo, targetType, resId, kpiId, flag) => {
  178 + showResListDialog(true);
  179 + getResListPage(proxy, faultNo, targetType, resId, kpiId, flag);
  180 + }
  181 +
  182 + let getResListPage = (proxy, faultNo, targetType, resId, kpiId, flag) => {
  183 + let params = {
  184 + faultNo: faultNo,
  185 + targetType: targetType,
  186 + resId: resId,
  187 + kpiId: kpiId,
  188 + flag: flag
  189 + }
  190 +
  191 + resList.value.columns = [{
  192 + prop: "resType",
  193 + label: "资源类型",
  194 + }, {
  195 + prop: "resName",
  196 + label: "资源名称",
  197 + }, {
  198 + prop: "kpiName",
  199 + label: "指标名称",
  200 + }, {
  201 + prop: "kpiValue",
  202 + label: "指标值",
  203 + click: function (row) {
  204 + openLine(row);
  205 + },
  206 + render: function (row) {
  207 + return `<span style="text-decoration: underline;color: blue;">${row.kpiValue}</span>`
  208 + }
  209 + }, {
  210 + prop: "collTime",
  211 + label: "采集时间",
  212 + }];
  213 +
  214 +
  215 + proxy.$http.get('/api-web/fault/result/findResList', params, function (res) {
  216 + if (res && res.success) {
  217 + if (res.data) {
  218 + resList.value.dataList = res.data;
  219 + }
  220 + } else {
  221 + proxy.$global.showMsg(res.msg, "warning");
  222 + }
  223 + });
  224 + }
  225 +
  226 + return {
  227 + resList,
  228 + resListDialog,
  229 + showResListDialog,
  230 + getResListPage,
  231 + handleClick
  232 + }
  233 +}
  234 +
  235 +const faultEvent = () => {
  236 +
  237 + const getParams = (params) => {
  238 + return Object.assign({
  239 + faultNo: '',
  240 + targetType: '',
  241 + resId: '',
  242 + kpiId: '',
  243 + flag: ''
  244 + }, params);
  245 + }
  246 +
  247 + const sendEventAlarmDialog = (emit, params) => {
  248 + emit('openDialog', 'alarm', getParams(params));
  249 + }
  250 +
  251 + const sendEventResListDialog = (emit, params) => {
  252 + emit('openDialog', 'resList', getParams(params));
  253 + }
  254 +
  255 + const sendEventLineDialog = (emit, params) => {
  256 + emit('openDialog', 'line', getParams(params));
  257 + }
  258 +
  259 + return {
  260 + sendEventAlarmDialog,
  261 + sendEventResListDialog,
  262 + sendEventLineDialog
  263 +
  264 + }
  265 +
  266 +}
  267 +
  268 +const service = {
  269 + ...lineService(),
  270 + ...alarmService(),
  271 + ...resListService(),
  272 + ...faultEvent()
  273 +}
  274 +
  275 +export default service