monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 75f051bcc2f91fb08c420211a7b192a458fbc09a 2 parents 5def50cf 13ccf867

Merge branch 'master-v32-lushangqing' into 'master' 

故障诊断相关页面



See merge request !105
Inline Side-by-side
Showing 16 changed files with 562 additions and 9 deletions
@@ -11,6 +11,9 @@ @@ -11,6 +11,9 @@
11 .margin-30{ 11 .margin-30{
12 margin:0 30px; 12 margin:0 30px;
13 } 13 }
  14 +.margin-all-30{
  15 + margin:30px
  16 +}
14 .margin-top{ 17 .margin-top{
15 margin-top:30px; 18 margin-top:30px;
16 } 19 }
@@ -338,3 +341,42 @@ @@ -338,3 +341,42 @@
338 color:#3B91FF; 341 color:#3B91FF;
339 342
340 } 343 }
  344 +.margin-left-30{
  345 + margin-left:30px;
  346 +}
  347 +
  348 +.faultAddIndex{
  349 + background-color: #F4F5FA;
  350 + height:100%;
  351 + padding-top: 20px;
  352 +}
  353 +.faultAddIndex-img{
  354 + width: 40%;
  355 + margin: 20px auto;
  356 + border: 1px dashed #3B91FF;
  357 + padding:30px;
  358 +}
  359 +.faultAddIndex-img span{
  360 + color:#3B91FF;
  361 + margin-top:30px;
  362 +}
  363 +.flex-clum{
  364 + display: flex;
  365 + flex-flow: column;
  366 + align-items: center;
  367 + justify-content: center;
  368 +}
  369 +.search-text{
  370 + color:#FFFFFF;
  371 + background-color: #3B91FF;
  372 + width:90px;
  373 + padding:9px 5px;
  374 +}
  375 +.doc-name{
  376 + color:#666666;
  377 + margin-top:10px;
  378 + font-size: 12px;
  379 +}
  380 +.doc-list,.doc-list-add{
  381 + cursor: pointer;
  382 +}
@@ -6,3 +6,137 @@ @@ -6,3 +6,137 @@
6 .btn-search{ 6 .btn-search{
7 margin-left: 20px; 7 margin-left: 20px;
8 } 8 }
  9 +.faultForm-table .el-table th.el-table__cell{
  10 + background-color: #d3f1fc;
  11 + color:#3B91FF;
  12 +}
  13 +.handleBtn{
  14 + color:#6667ff;
  15 + cursor: pointer;
  16 +}
  17 +.dialog-fault .el-form-item__label{
  18 + color:#3B91FF;
  19 +}
  20 +.div-fault .el-form-item__content{
  21 + text-align: left;
  22 +}
  23 +.diagnosisDoc-content{
  24 + margin:30px 40px;
  25 + position: relative;
  26 +}
  27 +.diagnosisBtn{
  28 + color:#ff7979;
  29 + cursor: pointer;
  30 +}
  31 +.step-img-dia{
  32 + width: 50px;
  33 + height:50px;
  34 + border-radius: 50%;
  35 + background-color:#1bdf71;
  36 +}
  37 +.list-line-dia{
  38 + width: 84px;
  39 + border-top:5px solid #1bdf71;
  40 +}
  41 +.step-img-yellow{
  42 + background-color:#fea500;
  43 +
  44 +}
  45 +.list-line-dia-yellow{
  46 + border-top-color: #fea500;
  47 +}
  48 +.step-img-red{
  49 + background-color:#fe0000;
  50 +}
  51 +.list-line-dia-red{
  52 + border-top-color: #fe0000;
  53 +}
  54 +
  55 +.diagnosisDoc-content .list-stet-net:last-child .list-line-dia{
  56 + display: none;
  57 +}
  58 +.progress-con{
  59 + width:80%;
  60 + margin:0 20px;
  61 +}
  62 +.program-text{
  63 + color:#666666;
  64 + margin-bottom: 15px;
  65 +}
  66 +.color-yellow{
  67 + color:#fea500;
  68 +}
  69 +.color-green{
  70 + color:#1bdf71;
  71 +}
  72 +.progress-div .el-progress-bar__outer{
  73 + background-color: #fea500;
  74 +}
  75 +.margin-left{
  76 + margin-left:10px;
  77 +}
  78 +.program-table{
  79 + border:1px solid #ccc;
  80 + margin-top:20px;
  81 +}
  82 +.width-20{
  83 + width:20%;
  84 +}
  85 +.text-color{
  86 + color:#3B91FF;
  87 +}
  88 +.program-td{
  89 + border-right: 1px solid #ccc;
  90 + border-bottom: 1px solid #ccc;
  91 +}
  92 +.program-padding{
  93 + padding:16px 20px;
  94 +
  95 +}
  96 +.flex-1-width{
  97 + flex:1;
  98 +}
  99 +.program-td-text{
  100 + padding: 15px 30px;
  101 + color: #fff;
  102 + margin-right:3px;
  103 + background: #1bdf71;
  104 +
  105 +}
  106 +.program-td-text-green{
  107 + background: #1bdf71;
  108 +
  109 +}
  110 +.program-td-text-yellow{
  111 + background: #fea500;
  112 +
  113 +}
  114 +.program-td-text-red{
  115 + background: #fe0000;
  116 +}
  117 +.program-tr:last-child .program-td{
  118 + border-bottom:none;
  119 +}
  120 +.program-tr .program-td:last-child{
  121 + border-right:none;
  122 +}
  123 +.margin-left-30{
  124 + margin-left: 30px;
  125 +}
  126 +.program-div{
  127 + border:1px solid #ccc;
  128 + padding:15px ;
  129 + flex:1;
  130 +}
  131 +.margin-top-bottom-30{
  132 + margin:30px 0;
  133 +}
  134 +.margin-top-bottom-10{
  135 + margin:10px 0;
  136 +
  137 +}
  138 +.export-div{
  139 + position: absolute;
  140 + right:0;
  141 + top:0;
  142 +}
@@ -123,15 +123,23 @@ const routes = [{ @@ -123,15 +123,23 @@ const routes = [{
123 { 123 {
124 path: '/fault/index', 124 path: '/fault/index',
125 name: 'view', 125 name: 'view',
126 - // component: () => myImport('views/faultDiagnosis/index')  
127 - component: () => myImport('views/faultDiagnosis/components/faultForm/index')  
128 - 126 + component: () => myImport('views/faultDiagnosis/index')
129 }, 127 },
130 - /*{ 128 + {
131 path: '/fault/faultForm', 129 path: '/fault/faultForm',
132 - name: 'view', 130 + name: 'faultForm',
133 component: () => myImport('views/faultDiagnosis/components/faultForm/index') 131 component: () => myImport('views/faultDiagnosis/components/faultForm/index')
134 - }*/ 132 + },
  133 + {
  134 + path: '/fault/faultAddIndex',
  135 + name: 'faultAddIndex',
  136 + component: () => myImport('views/faultDiagnosis/components/faultAddIndex/index')
  137 + },
  138 + {
  139 + path: '/fault/diagnosisDoc',
  140 + name: 'diagnosisDoc',
  141 + component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
  142 + }
135 ]; 143 ];
136 144
137 // hash模式： createWebHashHistory 145 // hash模式： createWebHashHistory
  1 +<div class="faultAddIndex diagnosisDoc">
  2 + <el-row>
  3 + <el-col :span="6">
  4 + <div class="search-input margin-30 flex-div-start">
  5 + <el-input v-model="input" placeholder="故障诊断" />
  6 + <span class="search-text">搜索</span>
  7 + </div>
  8 +
  9 + </el-col>
  10 + </el-row>
  11 + <el-row class="margin-all-30">
  12 + <el-col :span="3" v-for="item in 2">
  13 + <div class="doc-list flex-clum">
  14 + <img src="./src/assets/images/faultDiagnosis/icon-doc.png" alt="">
  15 + <span class="doc-name">电子税务局可用性诊断</span>
  16 + </div>
  17 + </el-col>
  18 + <el-col :span="3">
  19 + <div class="doc-list-add" @click="addDiagnosisDoc">
  20 + <img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
  21 + </div>
  22 + </el-col>
  23 + </el-row>
  24 +</div>
  1 +export default {
  2 + name: 'diagnosisDoc',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 + const {proxy} = Vue.getCurrentInstance();
  12 +
  13 + },
  14 + computed: {},
  15 + methods: {
  16 + //添加
  17 + addDiagnosisDoc(){}
  18 + },
  19 + mounted () {
  20 +
  21 + },
  22 + unmounted () {}
  23 +
  24 +}
  1 +<div class="faultAddIndex">
  2 + <div class="faultAddIndex-img flex-clum" @click="addFault">
  3 + <img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
  4 + <span>点击添加故障诊断配置</span>
  5 + </div>
  6 +</div>
  1 +export default {
  2 + name: 'faultAddIndex',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 + const {proxy} = Vue.getCurrentInstance();
  12 +
  13 + },
  14 + computed: {},
  15 + methods: {
  16 + //添加
  17 + addFault(){}
  18 + },
  19 + mounted () {
  20 +
  21 + },
  22 + unmounted () {}
  23 +
  24 +}
@@ -22,6 +22,254 @@ @@ -22,6 +22,254 @@
22 </el-col> 22 </el-col>
23 </el-row> 23 </el-row>
24 <el-row> 24 <el-row>
25 - el 25 + <el-col :span="24">
  26 + <div class="faultForm-table margin-top flex-div-start margin-30">
  27 + <el-table :data="faultFormTableData" border height="250" style="width: 100%">
  28 + <el-table-column align="center" type="index" prop="index" label="序号" width="80" />
  29 + <el-table-column align="center" prop="categories" label="故障分类" 个 />
  30 + <el-table-column align="center" prop="faultBody" label="故障主体" 个 >
  31 + <template #default="scope">
  32 + <div class="diagnosisBtn">
  33 + <span @click="handleDiagnosis(scope.row)" class="list-data-text">{{ scope.row.faultBody}}</span>
  34 + </div>
  35 + </template>
  36 + </el-table-column>
  37 + <el-table-column align="center" prop="startTime" label="发生时间" 个 />
  38 + <el-table-column align="center" prop="state" label="故障状态" 个 />
  39 + <el-table-column align="center" prop="mode" label="处理方式" 个 />
  40 + <el-table-column align="center" prop="handleTime" label="处理时间" 个 />
  41 + <el-table-column align="center" prop="handlePeople" label="处理人" 个 />
  42 + <el-table-column align="center" prop="duration" label="持续时长" 个 />
  43 + <el-table-column align="center" prop="range" label="影响范围" 个 />
  44 + <el-table-column align="center" prop="categories" label="操作" 个 >
  45 + <template #default="scope">
  46 + <div class="handleBtn">
  47 + <span @click="handleFault(scope.row)" class="list-data-text">处理{{ scope.row.categories }}</span>
  48 + </div>
  49 + </template>
  50 + </el-table-column>
  51 + </el-table>
  52 + </div>
  53 + </el-col>
  54 + </el-row>
  55 + <!--处理故障弹框-->
  56 + <div class="dialog-fault popup-bg">
  57 + <el-dialog v-model="faultDiagnosisVisible" title="故障处理内容" width="60%">
  58 + <el-form ref="faultHandleForm" :model="faultHandleForm" label-width="120px">
  59 + <el-row>
  60 + <el-col :span="12">
  61 + <el-form-item label="故障分类">
  62 + <el-input v-model="faultHandleForm.categories"></el-input>
  63 + </el-form-item>
  64 + <el-form-item label="当前状态">
  65 + <el-input v-model="faultHandleForm.state"></el-input>
  66 + </el-form-item>
  67 + <el-form-item label="故障主体">
  68 + <el-input v-model="faultHandleForm.faultBody"></el-input>
  69 + </el-form-item>
  70 + <el-form-item class="flex-div-start div-fault " label="处理结果">
  71 + <el-radio-group v-model="faultHandleForm.state">
  72 + <el-radio label="未解决"></el-radio>
  73 + <el-radio label="已解决"></el-radio>
  74 + </el-radio-group>
  75 + </el-form-item>
  76 + </el-col>
  77 + <el-col :span="12">
  78 + <el-form-item label="发生时间">
  79 + <el-input v-model="faultHandleForm.startTime"></el-input>
  80 + </el-form-item>
  81 + <el-form-item label="持续时长">
  82 + <el-input v-model="faultHandleForm.duration"></el-input>
  83 + </el-form-item>
  84 + <el-form-item label="影响范围">
  85 + <el-input v-model="faultHandleForm.range"></el-input>
  86 + </el-form-item>
  87 + <el-form-item label="处理时间">
  88 + <el-input v-model="faultHandleForm.handleTime"></el-input>
  89 + </el-form-item>
  90 + </el-col>
  91 + </el-row>
  92 + <el-row>
  93 + <el-col :span="24">
  94 + <el-form-item label="原因分析">
  95 + <el-input :rows="4" v-model="faultHandleForm.desc" type="textarea"></el-input>
  96 + </el-form-item>
  97 + </el-col>
  98 +
  99 + </el-row>
  100 + <el-row>
  101 + <el-col :span="24">
  102 + <el-form-item label="处理方案">
  103 + <el-input :rows="4" v-model="faultHandleForm.programme" type="textarea"></el-input>
  104 + </el-form-item>
  105 + </el-col>
  106 + </el-row>
  107 + <el-row>
  108 + <el-col :span="24">
  109 + <div class="btn-faultDiagnosis">
  110 + <el-button>取消</el-button>
  111 + <el-button type="primary" @click="onSubmit">保存</el-button>
  112 + </div>
  113 + </el-col>
  114 + </el-row>
  115 + </el-form>
  116 +
  117 + </el-dialog>
  118 + <el-dialog v-model="faultDiagnosisDocVisible" title="电子税务局业务诊断报告" width="60%">
  119 + <div class="diagnosisDoc-content">
  120 + <div class="export-div" @click="exportDoc"><img src="./src/assets/images/faultDiagnosis/icon-export.png" alt=""></div>
  121 + <el-row>
  122 + <el-col :span="6">
  123 + <div class="title-text">
  124 + <img src="./src/assets/images/faultDiagnosis/icon-green.png" class="title-img">
  125 + <span>网络检测</span>
  126 + </div>
  127 + </el-col>
  128 + </el-row>
  129 + <el-row>
  130 + <el-col :span="3" class="list-stet-net" v-for="(item,index) in 4">
  131 + <div class="list-step flex-div-start">
  132 + <div class="list-step-top flex-div margin-30">
  133 + <div :class="['step-img-dia',{'step-img-yellow':index==0,'step-img-red':index==2}]">
  134 + <i class="icon-step"></i>
  135 + </div>
  136 + <span :class="['list-line-dia',{'list-line-dia-yellow':index==0,'list-line-dia-red':index==2}]"></span>
  137 + </div>
  138 +
  139 + </div>
  140 + </el-col>
  141 + </el-row>
  142 + <el-row>
  143 + <el-col :span="6">
  144 + <div class="title-text">
  145 + <img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
  146 + <span>应用检测</span>
  147 + </div>
  148 + </el-col>
  149 + </el-row>
  150 + <el-row>
  151 + <div class="program-text margin-30 flex-div-start">
  152 + <div>检测量：<span>5节点</span></div>
  153 + <span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
  154 + </div>
  155 + </el-row>
  156 + <el-row>
  157 + <el-col :span="24">
  158 + <div class="progress-div margin-30 flex-div-start">
  159 + <div class="color-green">正常</div>
  160 + <div class="progress-con">
  161 + <el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
  162 + </div>
  163 + <div class="color-yellow">异常</div>
  164 + </div>
  165 + </el-col>
  166 + </el-row>
  167 + <el-row>
  168 + <el-col :span="24">
  169 + <div class="program-table margin-30">
  170 + <div class="program-tr flex-div-start" v-for="item in 4">
  171 + <div class="program-td program-padding flex-div-center width-20 text-color">节点{{item}}</div>
  172 + <div class="program-td flex-1-width flex-div-start">
  173 + <span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">交易量响应时间</span>
  174 + <span class="program-td-text">响应时间</span>
  175 + </div>
  176 + </div>
  177 + </div>
  178 + </el-col>
  179 + </el-row>
  180 +
  181 + <el-row>
  182 + <el-col :span="6">
  183 + <div class="title-text">
  184 + <img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
  185 + <span>基础环境</span>
  186 + </div>
  187 + </el-col>
  188 + </el-row>
  189 + <el-row>
  190 + <div class="program-text margin-30 flex-div-start">
  191 + <div>检测量：<span>50节点</span></div>
  192 + <span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
  193 + </div>
  194 + </el-row>
  195 + <el-row>
  196 + <el-col :span="24">
  197 + <div class="progress-div margin-30 flex-div-start">
  198 + <div class="color-green">正常</div>
  199 + <div class="progress-con">
  200 + <el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
  201 + </div>
  202 + <div class="color-yellow">异常</div>
  203 + </div>
  204 + </el-col>
  205 + </el-row>
  206 + <el-row>
  207 + <el-col :span="24">
  208 + <div class="program-table margin-30">
  209 + <div class="program-tr flex-div-start" v-for="item in 4">
  210 + <div class="program-td program-padding flex-div-center width-20 text-color">服务器{{item}}</div>
  211 + <div class="program-td flex-1-width flex-div-start">
  212 + <span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">cpu</span>
  213 + <span class="program-td-text">PNG状态</span>
  214 + </div>
  215 + </div>
  216 + </div>
  217 + </el-col>
  218 + </el-row>
  219 +
  220 + <el-row>
  221 + <el-col :span="6">
  222 + <div class="title-text margin-left-30">
  223 + <span>APM</span>
  224 + </div>
  225 + </el-col>
  226 + </el-row>
  227 +
  228 + <el-row>
  229 + <el-col :span="24">
  230 + <div class="program-table margin-30">
  231 + <div class="program-tr flex-div-start" v-for="item in 4">
  232 + <div class="program-td program-padding flex-div-center width-20 text-color">arms{{item}}</div>
  233 + <div class="program-td flex-1-width flex-div-start">
  234 +
  235 + <span class="program-td-text">服务</span>
  236 + </div>
  237 + </div>
  238 + </div>
  239 + </el-col>
26 </el-row> 240 </el-row>
  241 +
  242 + <el-row>
  243 + <el-col :span="6">
  244 + <div class="title-text margin-left-30">
  245 + <span>推荐解决方案</span>
  246 + </div>
  247 + </el-col>
  248 + </el-row>
  249 + <el-row v-for="item in 2">
  250 + <el-col :span="24" class="margin-top-bottom-10">
  251 + <div class="flex-div-start margin-30 ">
  252 + <div class="text-color">
  253 + 解决方案{{item}}：
  254 + </div>
  255 + <div class="program-div">
  256 + 可通过人工调整的方式解决
  257 + </div>
  258 + </div>
  259 + </el-col>
  260 +
  261 +
  262 + </el-row>
  263 + <el-row >
  264 + <el-col :span="24">
  265 + <div class="btn-faultDiagnosis margin-top-bottom-30">
  266 + <el-button type="primary" @click="onSubmit">保存</el-button>
  267 + </div>
  268 + </el-col>
  269 + </el-row>
  270 + </div>
  271 +
  272 + </el-dialog>
  273 + </div>
  274 +
27 </div> 275 </div>
@@ -4,14 +4,56 @@ export default { @@ -4,14 +4,56 @@ export default {
4 components: {}, 4 components: {},
5 data () { 5 data () {
6 return { 6 return {
7 - options:[{value:120,label:'name'}] 7 + options:[{value:120,label:'name'}],
  8 + faultFormTableData: [
  9 + {
  10 + categories: '业务指标故障',
  11 + faultBody: '电子税务局可用性下降到90%',
  12 + startTime:'2021-10-12 10:00:00',
  13 + state:'已解决',
  14 + mode:'人工处理',
  15 + handleTime:'2021-11-11 11:11:11',
  16 + handlePeople:'张三',
  17 + duration:'1小时',
  18 + range:'电子税务局系统',
  19 + },
  20 +
  21 + ],
  22 + faultDiagnosisVisible:false,//处理故障弹框
  23 + faultDiagnosisDocVisible:false,//电子税务局诊断报告弹框
  24 + faultHandleForm:'',//处理故障数据
  25 + percentage: 80,
  26 + customColor: '#1bdf71',
  27 + }
  28 + },
  29 + setup(){
  30 + const {proxy} = Vue.getCurrentInstance();
  31 + const faultHandleForm=Vue.ref({});
  32 + return{
  33 + faultHandleForm
8 } 34 }
9 }, 35 },
10 computed: {}, 36 computed: {},
11 methods: { 37 methods: {
  38 + //处理
  39 + handleFault(item){
  40 + console.log("333",item)
  41 + this.faultHandleForm=item;
  42 + this.faultDiagnosisVisible=true;
  43 +
  44 + },
  45 + //诊断书
  46 + handleDiagnosis(item){
  47 + this.faultDiagnosisDocVisible=true;
  48 + },
  49 + //下载
  50 + exportDoc(){
  51 +
  52 + }
  53 + },
  54 + mounted () {
12 55
13 }, 56 },
14 - mounted () {},  
15 unmounted () {} 57 unmounted () {}
16 58
17 } 59 }
@@ -49,6 +49,7 @@ export default { @@ -49,6 +49,7 @@ export default {
49 name: 'Tom', 49 name: 'Tom',
50 address: 'No. 189, Grove St, Los Angeles', 50 address: 'No. 189, Grove St, Los Angeles',
51 }, 51 },
  52 +
52 ],//基础环境表格数据 53 ],//基础环境表格数据
53 //网络检测选中项集合 54 //网络检测选中项集合
54 networkMonitorList: [ 55 networkMonitorList: [