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 @@
.margin-30{
margin:0 30px;
}
.margin-all-30{
margin:30px
}
.margin-top{
margin-top:30px;
}
... ... @@ -337,4 +340,43 @@
.network-monitor-popup .list-net.isActive .multiple-choice-button{
color:#3B91FF;
}
.margin-left-30{
margin-left:30px;
}
.faultAddIndex{
background-color: #F4F5FA;
height:100%;
padding-top: 20px;
}
.faultAddIndex-img{
width: 40%;
margin: 20px auto;
border: 1px dashed #3B91FF;
padding:30px;
}
.faultAddIndex-img span{
color:#3B91FF;
margin-top:30px;
}
.flex-clum{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.search-text{
color:#FFFFFF;
background-color: #3B91FF;
width:90px;
padding:9px 5px;
}
.doc-name{
color:#666666;
margin-top:10px;
font-size: 12px;
}
.doc-list,.doc-list-add{
cursor: pointer;
}
\ No newline at end of file
... ...
... ... @@ -5,4 +5,138 @@
}
.btn-search{
margin-left: 20px;
}
.faultForm-table .el-table th.el-table__cell{
background-color: #d3f1fc;
color:#3B91FF;
}
.handleBtn{
color:#6667ff;
cursor: pointer;
}
.dialog-fault .el-form-item__label{
color:#3B91FF;
}
.div-fault .el-form-item__content{
text-align: left;
}
.diagnosisDoc-content{
margin:30px 40px;
position: relative;
}
.diagnosisBtn{
color:#ff7979;
cursor: pointer;
}
.step-img-dia{
width: 50px;
height:50px;
border-radius: 50%;
background-color:#1bdf71;
}
.list-line-dia{
width: 84px;
border-top:5px solid #1bdf71;
}
.step-img-yellow{
background-color:#fea500;
}
.list-line-dia-yellow{
border-top-color: #fea500;
}
.step-img-red{
background-color:#fe0000;
}
.list-line-dia-red{
border-top-color: #fe0000;
}
.diagnosisDoc-content .list-stet-net:last-child .list-line-dia{
display: none;
}
.progress-con{
width:80%;
margin:0 20px;
}
.program-text{
color:#666666;
margin-bottom: 15px;
}
.color-yellow{
color:#fea500;
}
.color-green{
color:#1bdf71;
}
.progress-div .el-progress-bar__outer{
background-color: #fea500;
}
.margin-left{
margin-left:10px;
}
.program-table{
border:1px solid #ccc;
margin-top:20px;
}
.width-20{
width:20%;
}
.text-color{
color:#3B91FF;
}
.program-td{
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.program-padding{
padding:16px 20px;
}
.flex-1-width{
flex:1;
}
.program-td-text{
padding: 15px 30px;
color: #fff;
margin-right:3px;
background: #1bdf71;
}
.program-td-text-green{
background: #1bdf71;
}
.program-td-text-yellow{
background: #fea500;
}
.program-td-text-red{
background: #fe0000;
}
.program-tr:last-child .program-td{
border-bottom:none;
}
.program-tr .program-td:last-child{
border-right:none;
}
.margin-left-30{
margin-left: 30px;
}
.program-div{
border:1px solid #ccc;
padding:15px ;
flex:1;
}
.margin-top-bottom-30{
margin:30px 0;
}
.margin-top-bottom-10{
margin:10px 0;
}
.export-div{
position: absolute;
right:0;
top:0;
}
\ No newline at end of file
... ...
... ... @@ -123,15 +123,23 @@ const routes = [{
{
path: '/fault/index',
name: 'view',
// component: () => myImport('views/faultDiagnosis/index')
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
component: () => myImport('views/faultDiagnosis/index')
},
/*{
{
path: '/fault/faultForm',
name: 'view',
name: 'faultForm',
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
}*/
},
{
path: '/fault/faultAddIndex',
name: 'faultAddIndex',
component: () => myImport('views/faultDiagnosis/components/faultAddIndex/index')
},
{
path: '/fault/diagnosisDoc',
name: 'diagnosisDoc',
component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
}
];
// hash模式： createWebHashHistory
... ...
<div class="faultAddIndex diagnosisDoc">
<el-row>
<el-col :span="6">
<div class="search-input margin-30 flex-div-start">
<el-input v-model="input" placeholder="故障诊断" />
<span class="search-text">搜索</span>
</div>
</el-col>
</el-row>
<el-row class="margin-all-30">
<el-col :span="3" v-for="item in 2">
<div class="doc-list flex-clum">
<img src="./src/assets/images/faultDiagnosis/icon-doc.png" alt="">
<span class="doc-name">电子税务局可用性诊断</span>
</div>
</el-col>
<el-col :span="3">
<div class="doc-list-add" @click="addDiagnosisDoc">
<img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
</div>
</el-col>
</el-row>
</div>
\ No newline at end of file
... ...
export default {
name: 'diagnosisDoc',
template: '',
components: {},
data () {
return {
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
},
computed: {},
methods: {
//添加
addDiagnosisDoc(){}
},
mounted () {
},
unmounted () {}
}
\ No newline at end of file
... ...
<div class="faultAddIndex">
<div class="faultAddIndex-img flex-clum" @click="addFault">
<img src="./src/assets/images/faultDiagnosis/icon-add.png" alt="">
<span>点击添加故障诊断配置</span>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'faultAddIndex',
template: '',
components: {},
data () {
return {
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
},
computed: {},
methods: {
//添加
addFault(){}
},
mounted () {
},
unmounted () {}
}
\ No newline at end of file
... ...
... ... @@ -22,6 +22,254 @@
</el-col>
</el-row>
<el-row>
el
<el-col :span="24">
<div class="faultForm-table margin-top flex-div-start margin-30">
<el-table :data="faultFormTableData" border height="250" style="width: 100%">
<el-table-column align="center" type="index" prop="index" label="序号" width="80" />
<el-table-column align="center" prop="categories" label="故障分类" 个 />
<el-table-column align="center" prop="faultBody" label="故障主体" 个 >
<template #default="scope">
<div class="diagnosisBtn">
<span @click="handleDiagnosis(scope.row)" class="list-data-text">{{ scope.row.faultBody}}</span>
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="startTime" label="发生时间" 个 />
<el-table-column align="center" prop="state" label="故障状态" 个 />
<el-table-column align="center" prop="mode" label="处理方式" 个 />
<el-table-column align="center" prop="handleTime" label="处理时间" 个 />
<el-table-column align="center" prop="handlePeople" label="处理人" 个 />
<el-table-column align="center" prop="duration" label="持续时长" 个 />
<el-table-column align="center" prop="range" label="影响范围" 个 />
<el-table-column align="center" prop="categories" label="操作" 个 >
<template #default="scope">
<div class="handleBtn">
<span @click="handleFault(scope.row)" class="list-data-text">处理{{ scope.row.categories }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<!--处理故障弹框-->
<div class="dialog-fault popup-bg">
<el-dialog v-model="faultDiagnosisVisible" title="故障处理内容" width="60%">
<el-form ref="faultHandleForm" :model="faultHandleForm" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="故障分类">
<el-input v-model="faultHandleForm.categories"></el-input>
</el-form-item>
<el-form-item label="当前状态">
<el-input v-model="faultHandleForm.state"></el-input>
</el-form-item>
<el-form-item label="故障主体">
<el-input v-model="faultHandleForm.faultBody"></el-input>
</el-form-item>
<el-form-item class="flex-div-start div-fault " label="处理结果">
<el-radio-group v-model="faultHandleForm.state">
<el-radio label="未解决"></el-radio>
<el-radio label="已解决"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发生时间">
<el-input v-model="faultHandleForm.startTime"></el-input>
</el-form-item>
<el-form-item label="持续时长">
<el-input v-model="faultHandleForm.duration"></el-input>
</el-form-item>
<el-form-item label="影响范围">
<el-input v-model="faultHandleForm.range"></el-input>
</el-form-item>
<el-form-item label="处理时间">
<el-input v-model="faultHandleForm.handleTime"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="原因分析">
<el-input :rows="4" v-model="faultHandleForm.desc" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="处理方案">
<el-input :rows="4" v-model="faultHandleForm.programme" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="btn-faultDiagnosis">
<el-button>取消</el-button>
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-dialog v-model="faultDiagnosisDocVisible" title="电子税务局业务诊断报告" width="60%">
<div class="diagnosisDoc-content">
<div class="export-div" @click="exportDoc"><img src="./src/assets/images/faultDiagnosis/icon-export.png" alt=""></div>
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-green.png" class="title-img">
<span>网络检测</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="3" class="list-stet-net" v-for="(item,index) in 4">
<div class="list-step flex-div-start">
<div class="list-step-top flex-div margin-30">
<div :class="['step-img-dia',{'step-img-yellow':index==0,'step-img-red':index==2}]">
<i class="icon-step"></i>
</div>
<span :class="['list-line-dia',{'list-line-dia-yellow':index==0,'list-line-dia-red':index==2}]"></span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
<span>应用检测</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="program-text margin-30 flex-div-start">
<div>检测量：<span>5节点</span></div>
<span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
</div>
</el-row>
<el-row>
<el-col :span="24">
<div class="progress-div margin-30 flex-div-start">
<div class="color-green">正常</div>
<div class="progress-con">
<el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
</div>
<div class="color-yellow">异常</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="program-table margin-30">
<div class="program-tr flex-div-start" v-for="item in 4">
<div class="program-td program-padding flex-div-center width-20 text-color">节点{{item}}</div>
<div class="program-td flex-1-width flex-div-start">
<span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">交易量响应时间</span>
<span class="program-td-text">响应时间</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
<span>基础环境</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="program-text margin-30 flex-div-start">
<div>检测量：<span>50节点</span></div>
<span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span class="margin-left">2项异常</span>
</div>
</el-row>
<el-row>
<el-col :span="24">
<div class="progress-div margin-30 flex-div-start">
<div class="color-green">正常</div>
<div class="progress-con">
<el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
</div>
<div class="color-yellow">异常</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="program-table margin-30">
<div class="program-tr flex-div-start" v-for="item in 4">
<div class="program-td program-padding flex-div-center width-20 text-color">服务器{{item}}</div>
<div class="program-td flex-1-width flex-div-start">
<span :class="['program-td-text',{'program-td-text-yellow':item==1,'program-td-text-red':item==2}]">cpu</span>
<span class="program-td-text">PNG状态</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text margin-left-30">
<span>APM</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="program-table margin-30">
<div class="program-tr flex-div-start" v-for="item in 4">
<div class="program-td program-padding flex-div-center width-20 text-color">arms{{item}}</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">服务</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="title-text margin-left-30">
<span>推荐解决方案</span>
</div>
</el-col>
</el-row>
<el-row v-for="item in 2">
<el-col :span="24" class="margin-top-bottom-10">
<div class="flex-div-start margin-30 ">
<div class="text-color">
解决方案{{item}}：
</div>
<div class="program-div">
可通过人工调整的方式解决
</div>
</div>
</el-col>
</el-row>
<el-row >
<el-col :span="24">
<div class="btn-faultDiagnosis margin-top-bottom-30">
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-col>
</el-row>
</div>
</el-dialog>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -4,14 +4,56 @@ export default {
components: {},
data () {
return {
options:[{value:120,label:'name'}]
options:[{value:120,label:'name'}],
faultFormTableData: [
{
categories: '业务指标故障',
faultBody: '电子税务局可用性下降到90%',
startTime:'2021-10-12 10:00:00',
state:'已解决',
mode:'人工处理',
handleTime:'2021-11-11 11:11:11',
handlePeople:'张三',
duration:'1小时',
range:'电子税务局系统',
},
],
faultDiagnosisVisible:false,//处理故障弹框
faultDiagnosisDocVisible:false,//电子税务局诊断报告弹框
faultHandleForm:'',//处理故障数据
percentage: 80,
customColor: '#1bdf71',
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
const faultHandleForm=Vue.ref({});
return{
faultHandleForm
}
},
computed: {},
methods: {
//处理
handleFault(item){
console.log("333",item)
this.faultHandleForm=item;
this.faultDiagnosisVisible=true;
},
//诊断书
handleDiagnosis(item){
this.faultDiagnosisDocVisible=true;
},
//下载
exportDoc(){
}
},
mounted () {
},
mounted () {},
unmounted () {}
}
\ No newline at end of file
... ...
... ... @@ -49,6 +49,7 @@ export default {
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
],//基础环境表格数据
//网络检测选中项集合
networkMonitorList: [
... ...