故障诊断拨测及npm页面

@@ -11,7 +11,18 @@ let getRuleAdvanced = (ruleId) => {
     return get('/api-web/fault/conf/rule/getRuleAdvanced', {ruleId: ruleId});
     return get('/api-web/fault/conf/rule/getRuleAdvanced', {ruleId: ruleId});
 }
 }
 
 
+/**
+ * 诊断报告
+ * http://192.168.0.59:3000/project/78/interface/api/3916
+ * @param ruleId
+ * @returns {Promise<*>}
+ */
+let getFaultList = (params) => {
+    return get('/api-web/fault/result/tableList', params);
+}
+
 
 
 export default {
 export default {
-    getRuleAdvanced
+    getRuleAdvanced,
+    getFaultList
 }
 }

@@ -13,6 +13,9 @@ export default {
     actions: {
     actions: {
         getRuleAdvanced(context, ruleId) {
         getRuleAdvanced(context, ruleId) {
             return faultDiagnosisApi.getRuleAdvanced(ruleId);
             return faultDiagnosisApi.getRuleAdvanced(ruleId);
+        },
+        getFaultList(context, params) {
+            return faultDiagnosisApi.getFaultList(params);
         }
         }
     }
     }
 };
 };

+<div class="container" :style="{'height':height+'px','min-height':height+'px'}">
+    <div class="cm-card" style="margin: 10px">
+        <div class="heard" style="display:flex;padding: 26px 26px 0px 26px">
+            <div style="display:flex;"><img src="../src/style/img/dialtest.gif">
+                <h3 style="margin-left: 10px">业务拨测</h3></div>
+            <div style="flex: 1;text-align: right;display: inline-block;margin-top: 33px;">
+                <a style="margin-right: 20px;color: #1E9FFF;cursor:pointer " @click="allCard()">更多</a>
+                <a style="color: #1E9FFF;cursor:pointer " @click="closeCard()">收起</a>
+            </div>
+        </div>
+        <el-divider/>
+        <div class="content" v-model="dialTest" style="display:flex;padding: 26px 26px 26px 26px;">
+            <div style="height: 50px;text-align: left;margin-left: 4%;min-width: 20%;"><a>汇总信息</a></div>
+            <div>
+                <div style="text-align: left;display: flex;">
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                        <img src="../src/style/img/disRes.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px">诊断业务场景</span>
+                        <h>{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h>
+                    </div>
+                    |
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                        <img src="../src/style/img/disKpi.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px">诊断指标</span>
+                        <h>{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h>
+                    </div>
+                    |
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                        <img src="../src/style/img/disItem.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px"> 诊断项</span>
+                        <h>{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</h>
+                    </div>
+                </div>
+                <div style="text-align: left;display: flex;margin-top: 10px;">
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: yellowgreen">
+                        <img src="../src/style/img/success.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px;">正常</span>
+                        <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">
+                        <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>
+                    </div>
+                </div>
+            </div>
+            <div style="display:flex;width: 35%">
+                <div>正常占比</div>
+                <div class="progress-con">
+                    <el-progress :text-inside="true" :stroke-width="26" :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
+                                 color="#64A64C"/>
+                </div>
+            </div>
+        </div>
+        <div v-if="cardOpen" style="margin-top:20px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 26px 26px 0px 26px;">
+            <div v-for="item in card" style="width: 14%;overflow: hidden;">
+                <div style="width: 100%;min-height: 191px;background: url('../src/style/img/disBiz.png') no-repeat;background-size: 100% 100%;padding-top: 20px;margin-bottom: 26px;box-sizing: border-box;">
+                    <div :style="{backgroundColor: item.color}"
+                         style=" width: 100px;height: 100px;border-radius: 100px;-webkit-border-radius: 100px;margin: 0px auto 10px auto;display: flex;align-items: center;color: white;">
+                        <span>{{item.shortName}}</span>
+                    </div>
+                    <p style="margin: -5px 0px 0px 16px;width: 85%;">{{item.taskName}}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

+import store from '/vue3/src/store/index.js';
+
+export default {
+    name: 'faultDialTest',
+    template: '',
+    components: {},
+    data() {
+        return {}
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+
+
+        let dialTest = Vue.ref();
+        let card = Vue.ref({})
+        let cardOpen = Vue.ref(false);
+        let allCard = () => {
+            cardOpen.value = true;
+        }
+        let closeCard = () => {
+            cardOpen.value = false;
+        }
+        let getDialtestList = () => {
+            let params = {
+                faultNo: "GZ202204080012",
+                targetType: "dialtest"
+            }
+
+            store.dispatch('getFaultList', params).then((res) => {
+                if (res.data && res.success) {
+                    dialTest.value = res.data[0];
+                    card.value = dialTest.value.faultFixInfoList[0];
+                }
+            }).catch(e => {
+                console.log(e);
+            })
+        }
+
+        // 挂载完
+        Vue.onMounted(() => {
+            getDialtestList();
+        })
+
+
+        return {
+            card,
+            allCard,
+            closeCard,
+            cardOpen,
+            dialTest
+        }
+    }
+}

+<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
+    <div class="cm-card" style="margin: 10px">
+        <div class="heard" style="display:flex;padding: 26px 26px 0px 26px">
+            <div style="display:flex;"><img src="../src/style/img/npm.gif">
+                <h3 style="margin-left: 10px">NPM</h3></div>
+            <div style="flex: 1;text-align: right;display: inline-block;margin-top: 33px;">
+                <a style="margin-right: 20px;color: #1E9FFF;cursor:pointer " @click="openNpmCard()">更多</a>
+                <a style="color: #1E9FFF;cursor:pointer " @click="closeNpmCard()">收起</a>
+            </div>
+        </div>
+        <el-divider/>
+        <div class="content" v-model="dialTest" style="display:flex;padding: 26px 26px 26px 26px;">
+            <div style="height: 50px;text-align: left;margin-left: 4%;min-width: 20%;"><a>汇总信息</a></div>
+            <div>
+                <div style="text-align: left;display: flex;">
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                        <img src="../src/style/img/npmLink.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px">诊断链路场景</span>
+                        <h>{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h>
+                    </div>
+                    |
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                        <img src="../src/style/img/disKpi.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px">诊断指标</span>
+                        <h>{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h>
+                    </div>
+                    |
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                        <img src="../src/style/img/disItem.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px"> 诊断项</span>
+                        <h>{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</h>
+                    </div>
+                </div>
+                <div style="text-align: left;display: flex;margin-top: 10px;">
+                    <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: yellowgreen">
+                        <img src="../src/style/img/success.png">
+                        <span style="margin: 0px 6px 0px 6px;width: 95px;">正常</span>
+                        <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">
+                        <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>
+                    </div>
+                </div>
+            </div>
+            <div style="display:flex;width: 35%">
+                <div>正常占比</div>
+                <div class="progress-con">
+                    <el-progress :text-inside="true" :stroke-width="26"
+                                 :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
+                                 color="#64A64C"/>
+                </div>
+            </div>
+        </div>
+        <div v-if="cardOpen"
+             style="margin-top:20px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 26px 26px 0px 26px;">
+            <div v-for="item in card" style="width: 25%;overflow: hidden;">
+                <div style="width: 100%;min-height: 184px;background: url('../src/style/img/npmCard.png') no-repeat;background-size: 100% 100%;padding-top: 20px;margin-bottom: 26px;box-sizing: border-box;">
+                    <p style="width: 85%;margin-left: -40px">{{item[0].streamName}}</p>
+                    <div style="margin-top: 47px;">
+                        <p style="width: 85%;text-align: left;padding-left: 50px;">{{item[1].kpiName}}<h
+                                style="margin-left: 6px;text-decoration: underline">{{item[1].diagnosisResult}}</h></p>
+                    </div>
+                    <div style="display: flex;text-align: left;margin-top: -17px;margin-left: 50px;">
+                        <p style="width: 50%;">{{item[2].kpiName}}<h style="margin-left: 6px;text-decoration: underline"
+                                                         :style="{color: item[2].color}">{{item[2].diagnosisResult}}%</h>
+                        </p>
+                        <p style="width: 50%;">{{item[0].kpiName}}<h style="margin-left: 6px;text-decoration: underline"
+                                                         :style="{color: item[0].color}">{{item[0].diagnosisResult}}%</h>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

+import store from '/vue3/src/store/index.js';
+
+export default {
+    name: 'npm',
+    template: '',
+    components: {},
+    data() {
+        return {}
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+
+
+        let dialTest = Vue.ref();
+        let card = Vue.ref({})
+        let cardOpen = Vue.ref(false);
+        let openNpmCard = () => {
+            cardOpen.value = true;
+        }
+        let closeNpmCard = () => {
+            cardOpen.value = false;
+        }
+        let getNpmList = () => {
+            let params = {
+                faultNo: "GZ202204080012",
+                targetType: "npm"
+            }
+
+            store.dispatch('getFaultList', params).then((res) => {
+                if (res.data && res.success) {
+                    dialTest.value = res.data[0];
+                    card.value = dialTest.value.faultFixInfoList;
+                }
+            }).catch(e => {
+                console.log(e);
+            })
+        }
+
+        // 挂载完
+        Vue.onMounted(() => {
+            getNpmList();
+        })
+
+
+        return {
+            card,
+            openNpmCard,
+            closeNpmCard,
+            cardOpen,
+            dialTest
+        }
+    }
+}