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

@@ -37,7 +37,7 @@
                     <h style="font-size: 20px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h>
                 </div>
                 |
-                <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #f8d305">
+                <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #f8d305" @click="openAlarm">
                     <img src="../src/style/img/error.png">
                     <span style="margin: 0px 6px 0px 6px;width: 95px;"> 异常</span>
                     <h style="font-size: 20px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h>

 import store from '/vue3/src/store/index.js';
+import service from '/vue3/src/views/faultDiagnosis/result/service.js';
 
 export default {
     name: 'faultDialTest',
@@ -13,7 +14,7 @@ export default {
     data() {
         return {}
     },
-    setup(props, {attrs, slots, emit}) {
+        setup(props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
 
         let dialTest = Vue.ref();
@@ -41,6 +42,13 @@ export default {
             })
         }
 
+        const openAlarm = () => {
+            service.sendEventAlarmDialog(emit,{
+                faultNo: props.faultNo,
+                targetType: "dialtest"
+            });
+        }
+
         // 挂载完
         Vue.onMounted(() => {
             getDialtestList();
@@ -51,7 +59,8 @@ export default {
             allCard,
             closeCard,
             cardOpen,
-            dialTest
+            dialTest,
+            openAlarm
         }
     }
 }

@@ -18,9 +18,48 @@
                            :itemInfo="faultDetailDetailInfo"
                            :colType="item.colType"
                            :itemName="item.itemName"
-                           :showDetail="item.detail"/>
+                           :showDetail="item.detail"
+                           @openDialog="openDialog"
+                           @getResList=""/>
             </el-card>
 
         </el-timeline-item>
     </el-timeline>
 </div>
+
+<!-- *************************************************************************************************************** -->
+<!-- 资源明细 -->
+<cm-dialog top="3vh" title="资源明细" width="80%" :showDialogVisible="resListDialog"
+           @hidedialog="showResListDialog" :showFooter="false">
+    <template v-slot>
+        <div>
+            <cm-table-page  v-if="resList.columns.length > 0" :columns="resList.columns"
+                            :dataList="resList.dataList"
+                            :showIndex="true"
+                            :showBorder="true"
+                            @loaddata="loadPage"
+                            :showPage="false"
+                            :height="500"
+                            :showTools="false">
+            </cm-table-page>
+        </div>
+    </template>
+</cm-dialog>
+
+<!-- 告警列表 -->
+<cm-dialog top="3vh" title="告警列表" width="90%" :showDialogVisible="alarmFlg"
+           @hidedialog="showAlarmDialog" :showFooter="false">
+    <template v-slot>
+        <div style="height:720px;max-height:720px;overflow-y: auto;">
+            <cm-table-page  v-if="alarmList.columns.length > 0" :columns="alarmList.columns"
+                            :dataList="alarmList.dataList"
+                            :showIndex="true"
+                            :showBorder="true"
+                            @loaddata="loadPage"
+                            :showPage="false"
+                            :height="720"
+                            :showTools="false">
+            </cm-table-page>
+        </div>
+    </template>
+</cm-dialog>

+import service from './service.js'
+
 export default {
     name: 'resIndex',
     template: '',
@@ -31,9 +33,9 @@ export default {
                 faultTypeName: '网络链路',
                 components: 'netLinks',
                 color: '#409EFF',
-                detail:true,
-                state:'0'
-            },{
+                detail: true,
+                state: '0'
+            }, {
                 faultType: 'DIALTEST',
                 faultTypeName: '拨测',
                 components: 'dialtest-item',
@@ -41,7 +43,7 @@ export default {
                 itemName: '场景名称',
                 detail: false,
                 colType: 'kpi',
-                state:'0'
+                state: '0'
             }, {
                 faultType: 'NPM',
                 faultTypeName: 'NPM',
@@ -50,7 +52,7 @@ export default {
                 itemName: '链路（流名称）',
                 detail: false,
                 colType: 'kpi',
-                state:'0'
+                state: '0'
             }, {
                 faultType: 'BASE',
                 faultTypeName: '基础',
@@ -59,7 +61,7 @@ export default {
                 itemName: '检测指标',
                 detail: true,
                 colType: 'flag',
-                state:'0'
+                state: '0'
             }, {
                 faultType: 'APM',
                 faultTypeName: 'APM',
@@ -68,7 +70,7 @@ export default {
                 itemName: '检测指标',
                 detail: true,
                 colType: 'flag',
-                state:'0'
+                state: '0'
             }, {
                 faultType: 'faultHis',
                 faultTypeName: '知识库',
@@ -77,7 +79,7 @@ export default {
                 itemName: '知识库',
                 detail: true,
                 colType: 'flag',
-                state:'1'
+                state: '1'
             }]
         });
 
@@ -90,48 +92,61 @@ export default {
          * @param row
          */
         let settingDetail = (row) => {
-            proxy.$http.get('/api-web/fault/conf/detail/getDetailByNo', {faultNo:faultDetailDetailInfo.value.faultNo},function(res) {
-                if(res.length>0){
-                    res.forEach((item)=>{
-                        if(item.type.toUpperCase()=='NETLINK'){
-                            faultDetailDetailInfo.value.items[0].state= item.state
+            proxy.$http.get('/api-web/fault/conf/detail/getDetailByNo', {faultNo: faultDetailDetailInfo.value.faultNo}, function (res) {
+                if (res.length > 0) {
+                    res.forEach((item) => {
+                        if (item.type.toUpperCase() == 'NETLINK') {
+                            faultDetailDetailInfo.value.items[0].state = item.state
                         }
 
-                        if(item.type.toUpperCase()=='DIALTEST'){
-                            faultDetailDetailInfo.value.items[1].state= item.state
+                        if (item.type.toUpperCase() == 'DIALTEST') {
+                            faultDetailDetailInfo.value.items[1].state = item.state
                         }
-                        if(item.type.toUpperCase()=='NPM'){
-                            faultDetailDetailInfo.value.items[2].state= item.state
+                        if (item.type.toUpperCase() == 'NPM') {
+                            faultDetailDetailInfo.value.items[2].state = item.state
 
                         }
-                        if(item.type.toUpperCase()=='BASE'){
-                            faultDetailDetailInfo.value.items[3].state= item.state
+                        if (item.type.toUpperCase() == 'BASE') {
+                            faultDetailDetailInfo.value.items[3].state = item.state
                         }
-                        if(item.type.toUpperCase()=='APM'){
-                            faultDetailDetailInfo.value.items[4].state= item.state
+                        if (item.type.toUpperCase() == 'APM') {
+                            faultDetailDetailInfo.value.items[4].state = item.state
                         }
                     })
                 }
 
-                let arr=[];
-                for(var i=0;i<faultDetailDetailInfo.value.items.length;i++ ){
-                    if(faultDetailDetailInfo.value.items[i].state=='1'){
+                let arr = [];
+                for (var i = 0; i < faultDetailDetailInfo.value.items.length; i++) {
+                    if (faultDetailDetailInfo.value.items[i].state == '1') {
                         arr.push(faultDetailDetailInfo.value.items[i])
                     }
                 }
-                faultDetailDetailInfo.value.items=   arr;
+                faultDetailDetailInfo.value.items = arr;
             });
             // 设置标题
             faultDetailDialogTitle.value = decodeURI(proxy.$global.getQueryVariable('faultTitle'));
         }
 
-        Vue.onMounted(() =>{
+        // 展示弹框
+        const openDialog = (type, {faultNo, targetType, resId, kpiId, flag}) => {
+            if (type == 'alarm') {
+                service.openAlarmDialog(proxy, faultNo, targetType, resId, kpiId, flag);
+            } else if (type == 'resList') {
+                service.handleClick(proxy, faultNo, targetType, resId, kpiId, flag);
+            } else if (type == 'line') {
+                service.openLine(proxy, faultNo, targetType, resId, kpiId, flag);
+            }
+        }
+
+        Vue.onMounted(() => {
             settingDetail();
         });
 
         return {
             faultDetailDialogTitle,
-            faultDetailDetailInfo
+            faultDetailDetailInfo,
+            openDialog,
+            ...service
         }
     }
 }

+/**
+ * 折线图
+ * <p>
+ * 作者： Wang
+ * 时间：2021/12/15 19:59
+ */
+const lineService = () => {
+
+    let showLineDialog = Vue.ref(false);
+    let dataSet = Vue.ref([]);
+
+
+    let closeLineDialog = (flg) => {
+        showLineDialog.value = flg;
+    }
+
+    let openLine = (proxy, faultNo, targetType, resId, kpiId, flag) => {
+        // 展示弹框
+        closeLineDialog(true);
+        // 获取数据
+        getLineData(proxy, faultNo, targetType, resId, kpiId, flag);
+    }
+
+    let getLineData = (proxy, faultNo, targetType, resId, kpiId, flag) => {
+        let params = {
+            faultNo: faultNo,
+            targetType: targetType,
+            resId: resId,
+            kpiId: kpiId,
+            flag: flag
+        }
+        proxy.$http.get('/api-web/fault/result/findLineData', params, function (res) {
+            if (res && res.success) {
+                if (res.data) {
+                    let arr = [];
+                    arr.push(['product', res.data[0].resName]);
+
+                    res.data.forEach(function (v) {
+                        let time = v.collTime;
+                        let val = v.kpiValue;
+                        arr.push([time, val]);
+                    })
+                    dataSet.value = arr;
+                }
+            } else {
+                proxy.$global.showMsg(res.msg, "warning");
+            }
+        });
+    }
+
+    return {
+        showLineDialog,
+        closeLineDialog,
+        openLine,
+        dataSet
+    }
+}
+
+
+/**
+ * 告警列表
+ * <p>
+ * 作者： Wang
+ * 时间：2021/12/15 19:59
+ */
+const alarmService = () => {
+    let alarmFlg = Vue.ref(false);
+
+    let alarmList = Vue.ref({
+        columns: [],
+        dataList: [],
+        total: 0
+    });
+
+    let showAlarmDialog = (flg) => {
+        alarmFlg.value = flg;
+    }
+
+    let openAlarmDialog = (proxy, faultNo, targetType, resId, kpiId, flag) => {
+        showAlarmDialog(true);
+        // 获取告警列表
+        let params = {
+            faultNo: faultNo,
+            targetType: targetType,
+            resId: resId,
+            kpiId: kpiId,
+            flag: flag
+        }
+
+        // 设置表头内容
+        alarmList.value.columns = [{
+            prop: "resId",
+            label: "资源ID",
+            width: 120
+        }, {
+            prop: "kpiId",
+            label: "指标ID",
+            width: 120
+        }, {
+            prop: "flag",
+            label: "指标标识",
+            width: 120
+        }, {
+            prop: "alarmId",
+            label: "告警ID",
+            width: 120
+        }, {
+            prop: "alarmContent",
+            label: "告警内容",
+            width: 250
+        }, {
+            prop: "firstAlarmTime",
+            label: "首次告警时间",
+            width: 120
+        }, {
+            prop: "recentAlarmTime",
+            label: "最近告警时间",
+            width: 120
+        }, {
+            prop: "alarmRepeatCnt",
+            label: "告警次数",
+            width: 80
+        }, {
+            prop: "noticeContent",
+            label: "通知内容",
+            width: 300
+        }, {
+            prop: "alarmLevel",
+            label: "告警级别",
+            width: 80,
+            render: function (row) {
+                let obj = proxy.$global.getAlarmLevel(row.alarmLevel);
+                if (obj) {
+                    return `<span style="color: ${obj.color}">${obj.name}</span>`
+                }
+                return '';
+            }
+        }];
+
+        proxy.$http.get(`/api-web/fault/result/findAlarmList`, params, function (res) {
+            if (res && res.success) {
+                if (res.data) {
+                    alarmList.value.dataList = res.data;
+                }
+            } else {
+                proxy.$global.showMsg(res.msg ? res.msg : '暂无告警数据！', "warning");
+            }
+        });
+    }
+
+    return {
+        showAlarmDialog,
+        openAlarmDialog,
+        alarmList,
+        alarmFlg
+    }
+}
+
+
+/**
+ * 资源列表
+ * @param props
+ * @param openLine
+ */
+const resListService = () => {
+    let resListDialog = Vue.ref(false);
+    let resList = Vue.ref({
+        columns: [],
+        dataList: [],
+        total: 0
+    });
+
+    let showResListDialog = (flg) => {
+        resListDialog.value = flg;
+    }
+
+    let handleClick = (proxy, faultNo, targetType, resId, kpiId, flag) => {
+        showResListDialog(true);
+        getResListPage(proxy, faultNo, targetType, resId, kpiId, flag);
+    }
+
+    let getResListPage = (proxy, faultNo, targetType, resId, kpiId, flag) => {
+        let params = {
+            faultNo: faultNo,
+            targetType: targetType,
+            resId: resId,
+            kpiId: kpiId,
+            flag: flag
+        }
+
+        resList.value.columns = [{
+            prop: "resType",
+            label: "资源类型",
+        }, {
+            prop: "resName",
+            label: "资源名称",
+        }, {
+            prop: "kpiName",
+            label: "指标名称",
+        }, {
+            prop: "kpiValue",
+            label: "指标值",
+            click: function (row) {
+                openLine(row);
+            },
+            render: function (row) {
+                return `<span style="text-decoration: underline;color: blue;">${row.kpiValue}</span>`
+            }
+        }, {
+            prop: "collTime",
+            label: "采集时间",
+        }];
+
+
+        proxy.$http.get('/api-web/fault/result/findResList', params, function (res) {
+            if (res && res.success) {
+                if (res.data) {
+                    resList.value.dataList = res.data;
+                }
+            } else {
+                proxy.$global.showMsg(res.msg, "warning");
+            }
+        });
+    }
+
+    return {
+        resList,
+        resListDialog,
+        showResListDialog,
+        getResListPage,
+        handleClick
+    }
+}
+
+const faultEvent = () => {
+
+    const getParams = (params) => {
+        return Object.assign({
+            faultNo: '',
+            targetType: '',
+            resId: '',
+            kpiId: '',
+            flag: ''
+        }, params);
+    }
+
+    const sendEventAlarmDialog = (emit, params) => {
+        emit('openDialog', 'alarm', getParams(params));
+    }
+
+    const sendEventResListDialog = (emit, params) => {
+        emit('openDialog', 'resList', getParams(params));
+    }
+
+    const sendEventLineDialog = (emit, params) => {
+        emit('openDialog', 'line', getParams(params));
+    }
+
+    return {
+        sendEventAlarmDialog,
+        sendEventResListDialog,
+        sendEventLineDialog
+
+    }
+
+}
+
+const service = {
+    ...lineService(),
+    ...alarmService(),
+    ...resListService(),
+    ...faultEvent()
+}
+
+export default service