monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit f3b293fe25d5f1ac1abdeef8371cdcec0bca0de5 1 parent 65e52c52

资产视图优化

Inline Side-by-side
Showing 16 changed files with 219 additions and 96 deletions
@charset "utf-8";
*
{
margin:0;
padding:0;
}
html
{
width:100%;
height:100%;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
-webkit-text-size-adjust:none;
/*background-image:url("/vue3/src/assets/images/machineRoom/img-beijing-dp.png");
background-repeat: no-repeat;
background-position: center;*/
}
body
{
/*padding:5px;*/
}
.outlinediv {
.machine-room-parent{
}
.machine-room-parent .outlinediv {
padding-top: 30px;
border: 2px solid #0a93be;
width: 900px;
... ... @@ -35,13 +17,13 @@ body
}
.outlinediv span {
.machine-room-parent .outlinediv span {
/*color: rgba(0, 0, 0, 0.89);*/
color: rgba(255, 255, 255, 0.89);
line-height: 20px;
font-size: 14px;
}
.outlinediv .xiaoshansecond-topcabinet{
.machine-room-parent .outlinediv .xiaoshansecond-topcabinet{
margin-top: 20px;
margin-left: 7%;
padding: 20px;
... ... @@ -50,7 +32,7 @@ body
}
.outlinediv .xiaoshansecond-middlecabinet{
.machine-room-parent .outlinediv .xiaoshansecond-middlecabinet{
margin-top: 50px;
margin-bottom: 50px;
margin-left: 7%;
... ... @@ -59,58 +41,59 @@ body
height:100px;
}
.outlinediv .xiaoshansecond-bottomcabinet{
.machine-room-parent .outlinediv .xiaoshansecond-bottomcabinet{
margin-left: 7%;
padding: 20px;
width: 80%;
height:100px;
}
.cabinet{
.machine-room-parent .cabinet{
width:auto;height:auto;max-height:100%;max-width:100%;
}
table{
.machine-room-parent table{
margin-top: 20px;
border-collapse:collapse;
}
table tr{
.machine-room-parent table tr{
height: 50px;
}
tr.sevenempty {
.machine-room-parent tr.sevenempty {
height: 10px;
}
table tr td{
.machine-room-parent table tr td{
position: relative;
max-width: 35px;
}
table td .cabinetId{
.machine-room-parent table td .cabinetId{
position: absolute;/*绝对定位*/
top:20px;
width: 100%;
bottom: 0px;/*离底下0像素*/
left: 0px;/*离左边0像素*/
text-align: center;
font-size: 12px;
color: white;
}
.outlinediv .xiaoshanthird-topcabinet{
.machine-room-parent .outlinediv .xiaoshanthird-topcabinet{
margin-left:22%;
padding: 20px;
width: 80%;
}
.outlinediv .xiaoshanseven-leftcabinet{
.machine-room-parent .outlinediv .xiaoshanseven-leftcabinet{
margin-left:1%;
width: 40%;
}
.outlinediv .xiaoshanseven-rightcabinet{
.machine-room-parent .outlinediv .xiaoshanseven-rightcabinet{
margin-left: 5px;
width: 49%;
}
.outlinediv .xiaoshanseven-middlecabinet{
.machine-room-parent .outlinediv .xiaoshanseven-middlecabinet{
margin-top: 20px;
padding-top: 30%;
border: 2px solid #111D1A;
... ... @@ -118,25 +101,27 @@ table td .cabinetId{
height: 255px;
text-align: center;
}
.outlinediv .huzhouone-topcabinet{
.machine-room-parent .outlinediv .huzhouone-topcabinet{
margin-left:10%;
width: 90%;
}
tr.zaibeione{
.machine-room-parent tr.zaibeione{
height: 90px;
}
.zaibei.cabinetId{
.machine-room-parent .zaibei.cabinetId{
position: absolute;/*绝对定位*/
top:10px;
width: 100%;
bottom: 0px;/*离底下0像素*/
left: 0px;/*离左边0像素*/
text-align: center;
font-size: 8px;
color: white;
}
.cursorClass{
.machine-room-parent .cursorClass{
cursor: pointer;
}
... ...
... ... @@ -152,10 +152,14 @@
<cm-dialog title="属性配置" width="500px" :showDialogVisible="settingCmDialogFlg" @hidedialog="showSettingCmDialog" @okfunc="getSettingDetail">
<template v-slot>
<div style="padding: 10px" style="display: flex">
<div style="padding: 10px" style="display: flex;flex-wrap: wrap">
<div v-for="(v,k) in fieldsValueObj[currentRow.id].props" style="width: 50%">
<div style="text-align: left;padding-left: 10px;">{{v}}</div>
<el-select v-model="settingVal[currentRow.id][k]" :placeholder="v" style="margin: 3px">
<div v-if="k.indexOf('_input') != -1">
<el-input v-model="settingVal[currentRow.id][k]" :placeholder="v"></el-input>
</div>
<el-select v-else v-model="settingVal[currentRow.id][k]" :placeholder="v" style="margin: 3px">
<el-option v-for="(value ,index) in fieldsValueObj[currentRow.id].object"
:key="index"
:label="value[fieldsValueObj[currentRow.id].text]"
... ...
... ... @@ -68,8 +68,9 @@ let configPageEdit = (columns, currentNode) => {
proxy.$global.showMsg("请选择关联扩展属性！", "warning")
return;
}
debugger
if(fieldsValueObj.value[row.id] && Object.keys(fieldsValueObj.value[row.id]).length >0){
settingCmDialogFlg.value = flg;
return;
}
// 获取属性标识的配置
... ... @@ -83,12 +84,16 @@ let configPageEdit = (columns, currentNode) => {
if (res && res.object) {
fieldsValueObj.value[row.id] = res.object;
if(rowProps){
let defVal = JSON.parse(rowProps);
if(defVal){
settingVal.value[row.id] = defVal;
} else {
settingVal.value[row.id] = {};
}
} else {
settingVal.value[row.id] = {};
}
settingCmDialogFlg.value = flg;
} else {
proxy.$global.showMsg("该属性无需配置！", "warning")
... ...
... ... @@ -128,7 +128,7 @@ const routes = [{
{
path: '/fault/faultForm',
name: 'faultForm',
component: () => myImport('views/faultDiagnosis/components/faultForm/index')
component: () => myImport('views/faultDiagnosis/result/index')
}/*,
{
path: '/fault/faultAddIndex',
... ...
<div class="machine-room">
<div class="machine-room machine-room-parent">
<div class="room-top">
<el-tabs type="card" @tab-click="handleCommand" v-model="commandVal">
<el-tab-pane v-for="item in commandNameData" :label="item.machineRoomName" :name="item.machineRoomCode"></el-tab-pane>
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<!-- <span>湖州灾备一机房平面图</span>-->
<div class="huzhouone-topcabinet">
<table>
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<!-- <span>湖州灾备三机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px">
<table>
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<!-- <span>湖州灾备二机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 20%">
<table>
... ...
<div :class="['all']">
<div :class="['all']" class=" machine-room-parent">
<!-- 左侧机柜效果图 -->
<div class='contain'>
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<!-- <span>2号机房平面图</span>-->
<div v-for="(items,indexs) in tableData" :class="[{'xiaoshansecond-topcabinet':indexs==0,'xiaoshansecond-middlecabinet':indexs==1,'xiaoshansecond-bottomcabinet':indexs==2}]" class="xiaoshansecond-topcabinet" >
<table>
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<!-- <span>7号机房平面图</span>-->
<div style="width: 100%;height: 100%;display: inline-flex">
<div class="xiaoshanseven-leftcabinet">
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<!-- <span>3号机房平面图</span>-->
<div class="xiaoshanthird-topcabinet">
<table>
... ...
<div class="faultForm">
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
<div class="faultForm">
<el-row>
<el-col :span="12" class="flex-div">
<div class="grid-content bg-purple">
... ... @@ -25,23 +27,23 @@
<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="故障主体" 个 >
<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="操作" 个 >
<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">处理</span>
... ... @@ -117,7 +119,8 @@
</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>
<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">
... ... @@ -150,7 +153,8 @@
<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>
<span class="margin-left">20项指标</span><span class="margin-left">18项正常</span><span
class="margin-left">2项异常</span>
</div>
</el-row>
<el-row>
... ... @@ -158,9 +162,10 @@
<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="percentage" :color="customColor"
:show-text="false"/>
</div>
<!-- <div class="color-yellow">异常</div>-->
<!-- <div class="color-yellow">异常</div>-->
</div>
</el-col>
</el-row>
... ... @@ -168,7 +173,9 @@
<el-col :span="24">
<div class="program-table margin-30">
<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 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">成功率</span>
<span class="program-td-text">响应率</span>
... ... @@ -189,7 +196,7 @@
<el-row>
<div class="program-text margin-30 flex-div-start">
<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>-->
<!-- <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 +204,8 @@
<div class="progress-div margin-30 flex-div-start">
<div class="color-green">正常</div>
<div class="progress-con">
<el-progress stroke-width="12" :percentage="percentage2" :color="customColor" :show-text="false" />
<el-progress stroke-width="12" :percentage="percentage2" :color="customColor"
:show-text="false"/>
</div>
<div class="color-yellow">异常</div>
</div>
... ... @@ -207,49 +215,63 @@
<el-col :span="24">
<div class="program-table margin-30">
<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 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 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 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 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 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 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 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-red">服务状态</span>
</div>
... ... @@ -271,25 +293,33 @@
<el-col :span="24">
<div class="program-table margin-30">
<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 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 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 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 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>
... ... @@ -319,16 +349,11 @@
</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>
</div>
</div>
... ...
... ... @@ -39,6 +39,8 @@ export default {
},
setup(){
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight - 20);
const faultHandleForm={
categories: '业务指标故障',
faultBody: '电子税务局可用性下降到90%',
... ... @@ -51,7 +53,8 @@ export default {
range:'电子税务局系统',
};
return{
faultHandleForm
faultHandleForm,
height
}
},
computed: {},
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
<div class="search">
<!--<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>-->
<div class="condition">
<el-form-item>
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
<div class="btns">
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</div>
</div>
<cm-table-page :columns="[]" :dataList="[]"
@loaddata="getPage" :showIndex="true"
:showIndex="true"
:showSelection="true"
:pageSizes="[10,50,90, 200, 300, 400]" :pageSize="limit"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 95)"
:maxWidth="max">
</cm-table-page>
</div>
</div>
... ...
export default {
name: 'resIndex',
template: '',
components: {
'tree-config': Vue.defineAsyncComponent(
() => myImport('components/page/res/treeconfig/index')
),
},
data() {
return {
props : {
label:'label',
children:'children'
}
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight -20);
let formInline = Vue.ref({
user: '',
region: '',
});
// 挂载完
Vue.onMounted(() => {
})
return {
height,
formInline
}
}
}
... ...