monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 3c14758887128098fa77a05a4331b3553d0d67c0 2 parents 4072dc6b 7ee1af62

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web into … 

…master-v32-lushangqing
Inline Side-by-side
Showing 5 changed files with 143 additions and 62 deletions
... ... @@ -72,7 +72,8 @@
<dl class="layui-nav-child">
<dd layadmin-event="toBigScreen" style="text-align: left;"><a><img src="/src/style/img/icon-daping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;大屏</a></dd>
<dd layadmin-event="toDZSWJScreen" style="text-align: left;"><a><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px">&nbsp;&nbsp;电子税务大屏</a></dd>
<dd layadmin-event="toYTHViewScreen" style="text-align: left;"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;一体化视图</a></dd>
<!--调整到首页旁边，此处去掉 joke 屏蔽 20211129-->
<!-- <dd layadmin-event="toYTHViewScreen" style="text-align: left;"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;一体化视图</a></dd>-->
<dd layadmin-event="toBiZhEalZhSYS" style="text-align: left;"><a><img src="/src/style/img/icon-YWJKD.png" style="width: 16px;height: 16px">&nbsp;&nbsp;业务健康度</a></dd>
<dd layadmin-event="toCMDB" style="text-align: left;"><a><img src="/src/style/img/icon-CMDB.png" style="width: 16px;height: 16px">&nbsp;&nbsp;CMDB</a></dd>
</dl>
... ... @@ -322,7 +323,7 @@
</ul>
</div>
<div style="padding:0 10px;float: left;">
<dd layadmin-event="toYTHViewScreen" ><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px"></a></dd>
<dd layadmin-event="toYTHViewScreen" title="一体化控制台"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px"></a></dd>
</div>
<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
... ...
... ... @@ -44,7 +44,7 @@
<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>
<span @click="handleFault(scope.row)" class="list-data-text">处理</span>
</div>
</template>
</el-table-column>
... ... @@ -59,13 +59,13 @@
<el-row>
<el-col :span="12">
<el-form-item label="故障分类">
<el-input v-model="faultHandleForm.categories"></el-input>
<el-input readonly="true" v-model="faultHandleForm.categories"></el-input>
</el-form-item>
<el-form-item label="当前状态">
<el-input v-model="faultHandleForm.state"></el-input>
<el-input readonly="true" v-model="faultHandleForm.state"></el-input>
</el-form-item>
<el-form-item label="故障主体">
<el-input v-model="faultHandleForm.faultBody"></el-input>
<el-input readonly="true" 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">
... ... @@ -76,13 +76,13 @@
</el-col>
<el-col :span="12">
<el-form-item label="发生时间">
<el-input v-model="faultHandleForm.startTime"></el-input>
<el-input readonly="true" v-model="faultHandleForm.startTime"></el-input>
</el-form-item>
<el-form-item label="持续时长">
<el-input v-model="faultHandleForm.duration"></el-input>
<el-input readonly="true" v-model="faultHandleForm.duration"></el-input>
</el-form-item>
<el-form-item label="影响范围">
<el-input v-model="faultHandleForm.range"></el-input>
<el-input readonly="true" v-model="faultHandleForm.range"></el-input>
</el-form-item>
<el-form-item label="处理时间">
<el-input v-model="faultHandleForm.handleTime"></el-input>
... ... @@ -115,7 +115,7 @@
</el-form>
</el-dialog>
<el-dialog v-model="faultDiagnosisDocVisible" title="电子税务局业务诊断报告" width="60%">
<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>
... ... @@ -130,10 +130,10 @@
<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}]">
<div :class="['step-img-dia']">
<i class="icon-step"></i>
</div>
<span :class="['list-line-dia',{'list-line-dia-yellow':index==0,'list-line-dia-red':index==2}]"></span>
<span :class="['list-line-dia']"></span>
</div>
</div>
... ... @@ -142,7 +142,7 @@
<el-row>
<el-col :span="6">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-yellow.png" class="title-img">
<img src="./src/assets/images/faultDiagnosis/icon-green.png" class="title-img">
<span>应用检测</span>
</div>
</el-col>
... ... @@ -160,18 +160,18 @@
<div class="progress-con">
<el-progress stroke-width="12" :percentage="percentage" :color="customColor" :show-text="false" />
</div>
<div class="color-yellow">异常</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-tr flex-div-start" v-for="item in 5">
<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>
<span class="program-td-text">成功率</span>
<span class="program-td-text">响应率</span>
</div>
</div>
</div>
... ... @@ -188,8 +188,8 @@
</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><span>操作系统：194&nbsp;&nbsp;数据库：4&nbsp;&nbsp;</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>
... ... @@ -197,7 +197,7 @@
<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" />
<el-progress stroke-width="12" :percentage="percentage2" :color="customColor" :show-text="false" />
</div>
<div class="color-yellow">异常</div>
</div>
... ... @@ -206,11 +206,52 @@
<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-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">7101申报管理平台</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">cpu使用率</span>
<span class="program-td-text">内存使用率</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">申报金三查询</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">cpu使用率</span>
<span class="program-td-text">内存使用率</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">8001:发票服务</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">cpu使用率</span>
<span class="program-td-text">内存使用率</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">出口退税服务</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">cpu使用率</span>
<span class="program-td-text">内存使用率</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">电子税务局文书数据库</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">RAC状态</span>
<span class="program-td-text">ASM磁盘组状态</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">电子税务局申报数据库</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">RAC状态</span>
<span class="program-td-text">ASM磁盘组状态</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">网络申报wlsb-001</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>
<span class="program-td-text-red">服务状态</span>
</div>
</div>
</div>
... ... @@ -219,7 +260,8 @@
<el-row>
<el-col :span="6">
<div class="title-text margin-left-30">
<div class="title-text">
<img src="./src/assets/images/faultDiagnosis/icon-green.png" class="title-img">
<span>APM</span>
</div>
</el-col>
... ... @@ -228,10 +270,27 @@
<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-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">Nw-basedata</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">服务</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">Nw-bzds</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">服务</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">Nw-csht</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">服务</span>
</div>
</div>
<div class="program-tr flex-div-start">
<div class="program-td program-padding flex-div-center width-20 text-color">Nw-dj</div>
<div class="program-td flex-1-width flex-div-start">
<span class="program-td-text">服务</span>
</div>
</div>
... ... @@ -246,27 +305,27 @@
</div>
</el-col>
</el-row>
<el-row v-for="item in 2">
<el-row>
<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>
<!-- <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>
... ...
... ... @@ -9,11 +9,11 @@ export default {
{
categories: '业务指标故障',
faultBody: '电子税务局可用性下降到90%',
startTime:'2021-10-12 10:00:00',
state:'已解决',
startTime:'2021-11-15 10:00:00',
state:'未解决',
mode:'人工处理',
handleTime:'2021-11-11 11:11:11',
handlePeople:'张三',
handleTime:'',
handlePeople:'',
duration:'1小时',
range:'电子税务局系统',
},
... ... @@ -21,14 +21,35 @@ export default {
],
faultDiagnosisVisible:false,//处理故障弹框
faultDiagnosisDocVisible:false,//电子税务局诊断报告弹框
faultHandleForm:'',//处理故障数据
percentage: 80,
faultHandleForm: {
categories: '业务指标故障',
faultBody: '电子税务局可用性下降到90%',
startTime:'2021-11-15 10:00:00',
state:'未解决',
mode:'人工处理',
handleTime:'2021-11-15 14:00:00',
handlePeople:'管理员',
duration:'1小时',
range:'电子税务局系统',
},//处理故障数据
percentage: 100,
percentage2: 80,
customColor: '#1bdf71',
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
const faultHandleForm=Vue.ref({});
const faultHandleForm={
categories: '业务指标故障',
faultBody: '电子税务局可用性下降到90%',
startTime:'2021-11-15 10:00:00',
state:'未解决',
mode:'人工处理',
handleTime:'2021-11-15 14:00:00',
handlePeople:'管理员',
duration:'1小时',
range:'电子税务局系统',
};
return{
faultHandleForm
}
... ...
... ... @@ -248,11 +248,11 @@
<el-col :span="24">
<div class="environment-table margin-top flex-div-start margin-30">
<el-table :data="environmentTableData" border height="250" style="width: 100%">
<el-table-column align="center" prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" class="margin-30" >
<el-table-column align="center" prop="name" label="资源类型" width="180" />
<el-table-column prop="address" label="指标" class="margin-30" >
<template #default="scope">
<div class="list-data">
<span class="list-data-text">住址: {{ scope.row.address }}</span>
<span class="list-data-text">指标: {{ scope.row.address }}</span>
<img :id="scope.row.index" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete">
</div>
... ...
... ... @@ -22,32 +22,32 @@ export default {
isClickNet:0,//配置链接选择
environmentTableData: [
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
],//基础环境表格数据
... ...