Merge branch 'master-v32-xwx' into 'master'

故障诊断调整



See merge request !785

+<div>
+    <div class="d-flex">
+        <img src="../src/style/img/apm.gif">
+        <h3 style="margin-left: 10px">APM</h3>
+        <div style="width: calc(100% - 170px);line-height: 54px" class="align-right">
+            <a class="m-r-20" @click="openApmCard()">更多</a>
+            <a @click="closeApmCard()">收起</a>
+        </div>
+    </div>
+    <el-divider/>
+    <div class="d-flex" v-model="dialTest">
+        <div style="width: 300px;text-align: center;"><a>汇总信息</a></div>
+        <div>
+                <div class="d-flex align-left">
+                    <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 class="d-flex" style="flex: 1">
+                <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 apmCard.item" style="width: 50%;overflow: hidden;">
+                <div style="width: 566px;min-height: 357px;background: url('../src/style/img/apmCard.png') no-repeat;background-size: 100% 100%;margin: 0px 0px 26px 90px;box-sizing: border-box;text-align: center;margin: 0 auto;padding-top: 65px">
+                    <div style="color: white;font-size: 25px;">{{item.name}}</div>
+                    <img src="../src/style/img/apmAbout.png" style="padding-top: 30px;">
+                    <div style="padding-top: 30px;font-size: 20px;">应用：<span>{{item.use}}</span></div>
+                    <hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#aed6f4 size=1>
+                    <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;">
+                        <div style="width: 200px;margin-left: 10px;display: flex;align-self: center;">
+                            <span style="margin: 0px 6px;width: 95px">响应时间:</span>
+                            <span>{{item.time}}</span>
+                        </div>
+                        <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                            <span style="margin: 0px 6px 0px 6px;width: 95px">响应时间:</span>
+                            <span>{{item.Fullgc}}</span>
+                        </div>
+                    </div>
+                    <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;">
+                        <div style="width: 200px;margin-left: 10px;display: flex;align-self: center;">
+                            <span style="margin: 0px 6px;width: 95px">线程总数:</span>
+                            <span>{{item.count}}</span>
+                        </div>
+                        <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
+                            <span style="margin: 0px 6px 0px 6px;width: 95px">错误率:</span>
+                            <span>{{item.error}}</span>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

+import store from '/vue3/src/store/index.js';
+
+export default {
+    name: 'apm',
+    template: '',
+    components: {},
+    props: {
+        faultNo: {
+            type: String,
+            default: ''
+        }
+    },
+    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 openApmCard = () => {
+            cardOpen.value = true;
+        }
+        let apmCard = Vue.ref({
+            item:[{
+                name:'内网',
+                use:'234',
+                time:'235',
+                Fullgc:'2',
+                count:2,
+                error:2,
+            },{
+                name:'外网',
+                use:'234',
+                time:'235',
+                Fullgc:'2',
+                count:2,
+                error:2,
+            }]
+        })
+        let closeApmCard = () => {
+            cardOpen.value = false;
+        }
+        let getNpmList = () => {
+            let params = {
+                faultNo: "GZ202207220001",
+                targetType: "apm"
+            }
+
+            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,
+            openApmCard,
+            closeApmCard,
+            cardOpen,
+            dialTest,
+            apmCard
+        }
+    }
+}

@@ -56,11 +56,11 @@
     <div v-if="cardOpen" style="margin-top: 10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
     <div v-if="cardOpen" style="margin-top: 10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
         <div v-for="item in card" style="width: 190px">
         <div v-for="item in card" style="width: 190px">
             <div style="width: 190px;height: 190px;background: url(../src/style/img/disBiz.png) no-repeat;background-size: 100% 100%;padding-top: 10px;">
             <div style="width: 190px;height: 190px;background: url(../src/style/img/disBiz.png) no-repeat;background-size: 100% 100%;padding-top: 10px;">
-                <div :style="{backgroundColor: item.color}"
-                     style="background-color: orange;width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;">
-                    <span>{{item.shortName}}</span>
+                <div :style="{backgroundColor: item[0].color}"
+                     style="width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;">
+                    <span>{{item[0].shortName}}</span>
                 </div>
                 </div>
-                <p style="text-align: center;word-break: break-all;padding: 0px 25px;">{{item.taskName}}</p>
+                <p style="text-align: center;word-break: break-all;padding: 0px 25px;">{{item[0].taskName}}</p>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>

@@ -34,7 +34,7 @@ export default {
             store.dispatch('getFaultList', params).then((res) => {
             store.dispatch('getFaultList', params).then((res) => {
                 if (res.data && res.success) {
                 if (res.data && res.success) {
                     dialTest.value = res.data[0];
                     dialTest.value = res.data[0];
-                    card.value = dialTest.value.faultFixInfoList[0];
+                    card.value = dialTest.value.faultFixInfoList;
                 }
                 }
             }).catch(e => {
             }).catch(e => {
                 console.log(e);
                 console.log(e);

@@ -2,10 +2,9 @@
     <div class="d-flex">
     <div class="d-flex">
         <img src="../src/style/img/fault/base.gif">
         <img src="../src/style/img/fault/base.gif">
         <h3 style="margin-left: 10px">基础资源</h3>
         <h3 style="margin-left: 10px">基础资源</h3>
-        <!--<div style="width: calc(100% - 200px);line-height: 54px" class="align-right">
-            <a class="m-r-20" @click="allCard()">更多</a>
-            <a @click="closeCard()">收起</a>
-        </div>-->
+        <div style="width: calc(100% - 200px);line-height: 54px" class="align-right">
+            <a class="m-r-20" @click="baseCard()">更多</a>
+        </div>
     </div>
     </div>
     <el-divider/>
     <el-divider/>
     <div class="d-flex" v-model="dialTest">
     <div class="d-flex" v-model="dialTest">
@@ -55,6 +54,6 @@
     </div>
     </div>
 
 
 
 
-    <res-item />
+    <res-item v-if="cardOpen" />
 
 
 </div>
 </div>

@@ -23,7 +23,7 @@ export default {
         let dialTest = Vue.ref();
         let dialTest = Vue.ref();
         let card = Vue.ref({})
         let card = Vue.ref({})
         let cardOpen = Vue.ref(false);
         let cardOpen = Vue.ref(false);
-        let allCard = () => {
+        let baseCard = () => {
             cardOpen.value = true;
             cardOpen.value = true;
         }
         }
         let closeCard = () => {
         let closeCard = () => {
@@ -32,11 +32,12 @@ export default {
         let getDialtestList = () => {
         let getDialtestList = () => {
             let params = {
             let params = {
                 faultNo: props.faultNo,
                 faultNo: props.faultNo,
-                targetType: "dialtest"
+                targetType: "base"
             }
             }
 
 
             store.dispatch('getFaultList', params).then((res) => {
             store.dispatch('getFaultList', params).then((res) => {
                 if (res.data && res.success) {
                 if (res.data && res.success) {
+                    debugger
                     dialTest.value = res.data[0];
                     dialTest.value = res.data[0];
                     card.value = dialTest.value.faultFixInfoList[0];
                     card.value = dialTest.value.faultFixInfoList[0];
                 }
                 }
@@ -52,7 +53,7 @@ export default {
 
 
         return {
         return {
             card,
             card,
-            allCard,
+            baseCard,
             closeCard,
             closeCard,
             cardOpen,
             cardOpen,
             dialTest
             dialTest

@@ -46,7 +46,7 @@
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
-    <div class="align-center" style="flex: 1">
+    <div class="align-center" style="flex: 1;text-align: right;margin-right: 80px;">
         <a class="m-r-20" @click="allCard()">更多</a>
         <a class="m-r-20" @click="allCard()">更多</a>
         <a @click="closeCard()">收起</a>
         <a @click="closeCard()">收起</a>
     </div>
     </div>

@@ -26,19 +26,19 @@ export default {
             cardOpen.value = false;
             cardOpen.value = false;
         }
         }
         let getDialtestList = () => {
         let getDialtestList = () => {
-            let params = {
-                faultNo: props.faultNo,
-                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);
-            })
+            // let params = {
+            //     faultNo: props.faultNo,
+            //     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);
+            // })
         }
         }
 
 
         // 挂载完
         // 挂载完

-<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>
+    <div class="d-flex">
+        <img src="../src/style/img/npm.gif">
+        <h3 style="margin-left: 10px">NPM</h3>
+        <div style="width: calc(100% - 170px);line-height: 54px" class="align-right">
+            <a class="m-r-20" @click="openNpmCard()">更多</a>
+            <a @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>
+    <el-divider/>
+    <div class="d-flex" v-model="dialTest">
+        <div style="width: 300px;text-align: center;"><a>汇总信息</a></div>
+        <div>
+            <div class="d-flex align-left">
+                <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>
-                <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 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>
             </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 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>
         </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 class="d-flex" style="flex: 1">
+            <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:10px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 6px;">
+        <div v-for="item in card" style="width: 340px;">
+            <div style="width: 340px;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: 290px;margin-left: 40px;font-size: 16px">{{item[0].streamName}}</p>
+                <div style="margin-top: 35px;">
+                    <p style="width: 85%;text-align: left;padding-left: 50px;">{{item[0].kpiName}}
+                        <h style="margin-left: 6px;text-decoration: underline">{{item[0].diagnosisResult}}</h>
+                    </p>
+                </div>
+                <div style="display: flex;text-align: left;margin-top: -17px;margin-left: 50px;">
+                    <p style="width: 50%;">{{item[1].kpiName}}
+                        <h style="margin-left: 6px;text-decoration: underline"
+                           :style="{color: item[2].color}">{{item[1].diagnosisResult}}%
+                        </h>
+                    </p>
+                    <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>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
 </div>
 </div>
+

@@ -4,6 +4,12 @@ export default {
     name: 'npm',
     name: 'npm',
     template: '',
     template: '',
     components: {},
     components: {},
+    props: {
+        faultNo: {
+            type: String,
+            default: ''
+        }
+    },
     data() {
     data() {
         return {}
         return {}
     },
     },
@@ -22,7 +28,7 @@ export default {
         }
         }
         let getNpmList = () => {
         let getNpmList = () => {
             let params = {
             let params = {
-                faultNo: "GZ202204080012",
+                faultNo: props.faultNo,
                 targetType: "npm"
                 targetType: "npm"
             }
             }
 
 

@@ -11,6 +11,9 @@ export default {
         'npm-item': Vue.defineAsyncComponent(
         'npm-item': Vue.defineAsyncComponent(
             () => myImport('components/page/faultDiagnosis/result/npm/index')
             () => myImport('components/page/faultDiagnosis/result/npm/index')
         ),
         ),
+        'apm-item': Vue.defineAsyncComponent(
+            () => myImport('components/page/faultDiagnosis/result/apm/index')
+        ),
         'netLinks': Vue.defineAsyncComponent(
         'netLinks': Vue.defineAsyncComponent(
             () => myImport('components/page/faultDiagnosis/result/netLinks/index')
             () => myImport('components/page/faultDiagnosis/result/netLinks/index')
         ),
         ),
@@ -60,7 +63,7 @@ export default {
             }, {
             }, {
                 faultType: 'APM',
                 faultType: 'APM',
                 faultTypeName: 'APM',
                 faultTypeName: 'APM',
-                components: 'result-item',
+                components: 'apm-item',
                 color: '#F56C6C',
                 color: '#F56C6C',
                 itemName: '检测指标',
                 itemName: '检测指标',
                 detail: true,
                 detail: true,
@@ -107,7 +110,7 @@ export default {
                             faultDetailDetailInfo.value.items[3].state= item.state
                             faultDetailDetailInfo.value.items[3].state= item.state
                         }
                         }
                         if(item.type.toUpperCase()=='APM'){
                         if(item.type.toUpperCase()=='APM'){
-                            faultDetailDetailInfo.value.items[4].state= item.states
+                            faultDetailDetailInfo.value.items[4].state= item.state
                         }
                         }
                     })
                     })
                 }
                 }