|
|
|
<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>
|
|
|
|
<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 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 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 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>
|
|
|
|
|
...
|
...
|
|
