monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 2c25877c4db2f184d12f969715cf6762c9285dbd 2 parents 89b5b37e 2289ff3a

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-V32-XuHaoJie

Inline Side-by-side
Showing 18 changed files with 226 additions and 100 deletions
... ... @@ -201,29 +201,38 @@ global.openCmdbAssets = (resTypeId, resId, proxy) => {
});
}
global.openDetail = (resId, resType, title) => {
// let url = `/#/res/resDetail/view/resId=${resId}`;
let url = window.top.location.href.split('/#')[0] + `/#/res/resDetail/view/resId=${resId}`;
if(resType){
url += '/resType=' + resType
}
if(title){
url += '/title=' + title
}
let lyaui = window.parent.layui;
global.openDetail = (resId, resType, proxy) => {
let lyaui = global.layui;
debugger
let editFlag = false;
let provider = '';
let name= 'test';
let name= '';
let ip = '';
let resTypeName = '';
let adminName = '';
let manageIp = '';
let collProtocol = '';
lyaui.commonCols.detailPage(resId, resType,editFlag,provider,name,ip,resTypeName,adminName,manageIp,collProtocol);
// 获取资源详情
proxy.$http.get(`/api-web/v32/res/detail/${resId}`, {}, function (res) {
if (res && res.map) {
let data = res.map;
provider = data.provider;
ip = data.ip;
resTypeName = data.resTypeName;
adminName = data.adminName;
manageIp = data.manageIp;
collProtocol = data.collProtocol;
name = data.resName;
lyaui.commonCols.detailPage(resId, resType,editFlag,provider,name,ip,resTypeName,adminName,manageIp,collProtocol);
}
});
}
... ...
<el-link type="info" :underline="false" @click="openCmdbAssets"> {{textString}}</el-link>
... ...
export default {
name: 'assetsComponents',
template: '',
components: {},
props: {
// 资源名称
textString: {
type: String,
default: 0
},
// 展示文字 收藏、拓扑、资产 'start,topo,assets'
start: {
type: Boolean,
default: true
},
topo: {
type: Boolean,
default: true
},
assets: {
type: Boolean,
default: true
},
resId: {
type: String,
default: ''
},
resTypeId: {
type: String,
default: ''
},
resType: {
type: String,
default: ''
},
optionData: {
type: Array,
default: []
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let openCmdbAssets = () => {
if (props.resId == '') {
proxy.$global.showMsg("资源编号不存在，请确认！","warning")
return;
}
if (props.resTypeId == '') {
proxy.$global.showMsg("资源类型不存在，请确认！","warning")
return;
}
proxy.$global.openCmdbAssets(props.resTypeId, props.resId, proxy);
}
return {
openCmdbAssets
}
}
}
... ...
... ... @@ -5,8 +5,8 @@
:stroke-width="20"
:percentage="textValue"
:status="status">
<span>{{textValue == '' ? ' ' : textValue }} %</span>
<span>{{textValue == '' ? ' ' : textValue + '%' }}</span>
</el-progress>
</div>
<div style="width: 50px">{{textString == '' ? ' - ' : textString }} </div>
<div style="width: 50px">{{textString == '' ? '' : textString }} </div>
</div>
... ...
<div>
<el-dropdown>
<span class="el-dropdown-link" @click="openDetail" >
<span class="el-dropdown-link" @click="openDetail" style="cursor:pointer">
{{textString}}
<i class="el-icon-arrow-down" style="color: blue;font-weight: bold;" />
</span>
... ...
... ... @@ -75,7 +75,7 @@ export default {
favData.value = arr;
dialogFlg.value = flg;
} else {
proxy.$global.showMsg("没有查询到收藏夹，请先添加！","warning")
proxy.$global.showMsg("没有查询到收藏夹，请先添加！", "warning")
}
});
} else {
... ... @@ -91,7 +91,7 @@ export default {
*/
let saveStart = () => {
if (props.resId == '') {
proxy.$global.showMsg("资源编号不存在，请确认！","warning")
proxy.$global.showMsg("资源编号不存在，请确认！", "warning")
return;
}
... ... @@ -104,13 +104,12 @@ export default {
proxy.$global.showMsg("收藏成功！")
}
});
}
let openTopoPage = () => {
if (props.resId == '') {
proxy.$global.showMsg("资源编号不存在，请确认！","warning")
proxy.$global.showMsg("资源编号不存在，请确认！", "warning")
return;
}
... ... @@ -119,21 +118,21 @@ export default {
let openDetail = () => {
if (props.resId == '') {
proxy.$global.showMsg("资源编号不存在，请确认！","warning")
proxy.$global.showMsg("资源编号不存在，请确认！", "warning")
return;
}
proxy.$global.openDetail(props.resId,props.resType,props.title);
proxy.$global.openDetail(props.resId, props.resType, proxy);
}
let openCmdbAssets = () => {
if (props.resId == '') {
proxy.$global.showMsg("资源编号不存在，请确认！","warning")
proxy.$global.showMsg("资源编号不存在，请确认！", "warning")
return;
}
if (props.resTypeId == '') {
proxy.$global.showMsg("资源类型不存在，请确认！","warning")
proxy.$global.showMsg("资源类型不存在，请确认！", "warning")
return;
}
... ...
... ... @@ -79,6 +79,7 @@
<el-option label="使用率组件" :value="'rateComponents'"></el-option>
<el-option label="机房组件" :value="'machineRoomComponents'"></el-option>
<el-option label="机柜组件" :value="'machineRoomDetailComponents'"></el-option>
<el-option label="资产信息" :value="'assetsComponents'"></el-option>
</el-select>
</div>
... ...
... ... @@ -209,6 +209,10 @@ export default {
'machineRoomDetailComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/machineRoomDetailComponents/index')
),
'assetsComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/assetsComponents/index')
),
},
data() {
return {
... ...
... ... @@ -1494,13 +1494,13 @@ export default {
Vue.onMounted(() => {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
// proxy.allowClickData.map((itemName,index)=>{
// if(item.name==itemName){
proxy.isDetailShow=true;
console.log("detail",item)
proxy.detailData=item;
}
})
// }
// })
}
... ...
... ... @@ -263,12 +263,12 @@ export default {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
// proxy.allowClickData.map((itemName,index)=>{
// if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
// }
// })
}
return{
... ...
... ... @@ -313,12 +313,12 @@ export default {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
// proxy.allowClickData.map((itemName,index)=>{
// if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
// }
// })
}
return{
... ...
... ... @@ -12,7 +12,7 @@
<div class='img-serve' >
<img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>{{item.name}}</div>
<div class='img-serve-text'>{{item.provider}}</div>
<div class='lamp'>
<img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
... ... @@ -54,7 +54,7 @@
<p>品 牌：{{deviceDataInfo.brandName}}</p>
<p>型 号：{{deviceDataInfo.model}}</p>
<p>序 列 号：{{deviceDataInfo.serialNumber}}</p>
<p>业 务 IP：{{deviceDataInfo.ServiceIP}}</p>
<p>业 务 IP：{{deviceDataInfo.ip}}</p>
<p>用 途：{{deviceDataInfo.purpose}}</p>
</div>
</div>
... ...
... ... @@ -16,23 +16,23 @@ export default {
deviceDataInfo:'',//设备详细信息
deviceDatas: [
{
name:'E12',
name:'E12',//机柜名称
cabinetCapacity :'42U',
deviceData:[
cabinetCapacity :'42U',//机柜总U位数-目前都是42U
deviceData:[//机柜所有的服务器
{
name:'物理服务器',
resName:'管理决策二包(数据集市39)',
brandName:'浪潮',
model:'TS860',
serialNumber:'216365930',
ServiceIP:'80.12.73.39',
purpose:'管理决策二包使用',
uPosition:'1-8U',
name:'物理服务器',//服务器名称
resName:'管理决策二包(数据集市39)',//服务器资源名称
brandName:'浪潮',//品牌
model:'TS860',//型号
serialNumber:'216365930',//序列号
ServiceIP:'80.12.73.39',//业务ip
purpose:'管理决策二包使用',//用途
uPosition:'1-8U',//U位
}
],
deviceNum:'1',
alarmNum:'0'
deviceNum:'1',//设备数量
alarmNum:'0'//警告量
},
{
name:'E13',
... ... @@ -168,37 +168,67 @@ export default {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const isShowDevice=Vue.ref(false);
const theirRoom=Vue.ref('');//机房名称
const CabinetNum=props.detailData.name;//机柜编号
// 挂载完
Vue.onMounted(() => {
if(props.machineData.name.indexOf('huzhou')!=-1){
proxy.isCenter=true;
proxy.theirRoom='湖州灾备';
}else{
proxy.isCenter=false;
proxy.theirRoom='兴议机房';
}
proxy.getDeviceInfo();
proxy.getData();
// proxy.getDeviceInfo();
})
const getData=()=>{
let parmas={
theirRoom:proxy.theirRoom,
theirCabinet:CabinetNum
}
$.get(proxy.domainName+'/api-web/v32/res/cabinet?access_token='+proxy.accessToken,parmas,function (res){
console.log("res1",res)
if(res){
let resData=res.data;
let deviceDatas=[];
deviceDatas.push({
name:CabinetNum,//机柜名称
cabinetCapacity :'42U',//机柜总U位数-目前都是42U
deviceNum:resData.length,//设备数量
alarmNum:'0',//警告量
deviceData:resData
})
proxy.deviceDatas=deviceDatas;
console.log("devdats",proxy.deviceDatas)
proxy.getDeviceInfo()
}
})
}
const getDeviceInfo=()=>{
proxy.deviceDatas.map((item,index)=>{
if(CabinetNum==item.name){
proxy.infoData=item;
proxy.serviceData=item.deviceData
item.deviceData.map((itemD,indexD)=>{
let strArr=itemD.uPosition.split("U");//[0]1-4 [1]U
let leftStrArr=strArr[0].split('-');//[0]1 [1]4
let leftStr=leftStrArr[0];
let rightStr=leftStrArr[1];
// let strArr=itemD.uPosition.split("U");//[0]1-4 [1]U
// let leftStrArr=strArr[0].split('-');//[0]1 [1]4
let leftStr=itemD.startU;//leftStrArr[0];
let rightStr=itemD.endU;//leftStrArr[1];
itemD.serviceHeight=rightStr;//nU的设备
let serveNum=1;
if(leftStr==1){
serveNum=rightStr
}else{
serveNum=rightStr-leftStr;
// if(leftStr==1){
// serveNum=rightStr
// }else{
serveNum=rightStr-leftStr+1;
}
// }
itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
itemD.uClass='';
if(leftStr>1){
... ... @@ -219,7 +249,9 @@ export default {
return{
showDevice,
isShowDevice,
getDeviceInfo
getDeviceInfo,
getData,
theirRoom
}
}
}
\ No newline at end of file
... ...
... ... @@ -26,7 +26,7 @@ export default {
detailData:'',//详情数据
htmlName:'xiaoshansecond',
machineData:this.src,
allowClickData:['E12','E13'],//允许进入详情的机柜
allowClickData:['E12','E13','F14'],//允许进入详情的机柜
tableData:[
[
... ... @@ -477,12 +477,12 @@ export default {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
// proxy.allowClickData.map((itemName,index)=>{
// if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
// }
// })
}
return{
... ...
... ... @@ -1082,12 +1082,12 @@ export default {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
// proxy.allowClickData.map((itemName,index)=>{
// if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
// }
// })
}
return{
... ...
... ... @@ -621,12 +621,12 @@ export default {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
// proxy.allowClickData.map((itemName,index)=>{
// if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
// }
// })
}
return{
... ...
... ... @@ -13,13 +13,12 @@
<div style="height: 50px;text-align: left;margin-left: 10px;margin-top: 10px;display: flex">
<div style="width: calc(100% - 100px)">
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="资源名称">
<el-input v-model="searchForm.resName" placeholder="请输入资源名称"></el-input>
<el-form-item v-for="searchInfo in obj.searchList" :label="searchInfo.name">
<el-input v-model="searchForm[searchInfo.key]" placeholder="请输入资源名称"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="onSubmit">查询</el-button>
<el-button @click="loadResList">查询</el-button>
</el-form-item>
</el-form>
</div>
... ... @@ -30,34 +29,21 @@
<cm-table-page :columns="obj.columns" :dataList="obj.maps" @loaddata="getPage" :showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 95)" :maxWidth="max">
:showPage="true" :height="(height - 95)"
:maxWidth="max">
<template #default="{row,prop,column}">
<component v-if="row[prop] && row[prop].props && row[prop].props.colComponents != null && row[prop].props.colComponents != ''" v-bind:is="row[prop].props.colComponents"
:resId="row.resId"
:resTypeId="currentNode.id"
:textString="row[prop] == undefined ? '' : row[prop].value"
:optionData="row"></component>
<el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop] == undefined ? '' : row[prop].value }}</el-link>
<el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop].value == undefined ? '' : row[prop].value }}</el-link>
</template>
</cm-table-page>
</div>
</el-col>
</el-row>
<cm-dialog :title="cellDetail.prop == 'cabinetNo' ? '机柜详情' : cellDetail.title" width="80%" :showDialogVisible="dialogFlg" :showFooter="false" @hidedialog="showDialog" :showOkBtn="false" cancelText="关闭">
<template v-slot>
<div v-if="cellDetail.prop == 'cabinetNo'" @click="openCabinet(false)" :style="{'background-image': 'url(' + cabinetNoSrc + ')'}" style=";height: 600px;background-repeat: no-repeat;background-position: center;background-size: 93% 100%;">
<!--<div style="font-weight: bold;font-size: 20px;">
{{cellDetail.row[cellDetail.prop]}}
</div>-->
</div>
<div v-if="cellDetail.prop == 'resPositon'" @click="openCabinet(false)" style="background-image: url('/vue3/src/assets/images/res/img02.jpg');height: 600px;background-repeat: no-repeat;background-position: center;background-size: 80%;">
<div style="font-weight: bold;font-size: 20px;">
<!--{{cellDetail.row[cellDetail.prop]}}布局图-->
</div>
</div>
</template>
</cm-dialog>
<cm-dialog :title="configObj.title" width="80%" :showDialogVisible="showConfig" :showFooter="false" @hidedialog="showConfigDialog" :showOkBtn="false" cancelText="关闭">
<template v-slot>
... ...
... ... @@ -34,6 +34,15 @@ export default {
'statusComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/statusComponents/index')
),
'machineRoomComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/machineRoomComponents/index')
),
'machineRoomDetailComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/machineRoomDetailComponents/index')
),
'assetsComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/assetsComponents/index')
),
},
data() {
return {
... ... @@ -54,7 +63,7 @@ export default {
const currentNode = Vue.ref({});
// 搜索框内容
const searchForm = Vue.ref({
resName: ''
});
// 单元格点及保存的数据
... ... @@ -89,12 +98,17 @@ export default {
});
}
let page = Vue.ref(1);
let limit = Vue.ref(10);
let loadResList = () => {
if (currentNode.value) {
let fv = searchForm.value;
// 查询参数
let params = {
page: 1,
limit: 10,
page: page.value,
limit: limit.value,
treeNodeId: currentNode.value.id,
query: {}
}
... ... @@ -135,6 +149,16 @@ export default {
}
}
let getPage = (pageInfo) =>{
console.log(pageInfo);
debugger;
page.value = pageInfo.page;
limit.value = pageInfo.limit;
loadResList()
}
// 配置页面
const {showConfig, configObj, showConfigDialog} = configPage()
... ... @@ -164,6 +188,7 @@ export default {
cabinetNoSrc,
total,
max,
getPage,
// 配置页面
showConfig, configObj, showConfigDialog
... ...