monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 869373de532376061716fae2499c802f980b3680 1 parent b66eacd3

资产视图-机房布局优化

Inline Side-by-side
Showing 6 changed files with 158 additions and 46 deletions
... ... @@ -5,10 +5,25 @@
<cm-dialog title="机房布局" :showFooter="false" :showDialogVisible="dialogFlg" @hidedialog="showMachineRoomDialog">
<template v-slot>
<div style="overflow: auto">
<div style="overflow: auto;text-align: right">
<img class="imgDiv-video" src="/vue3/src/assets/images/zjdp/icon-jf.png" @click="showVideo(true)">
{{commandNameData}}
<GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
</div>
</template>
</cm-dialog>
<!--机房视频弹框-->
<cm-dialog title="机房视频" :showFooter="false" :showDialogVisible="videoDialogVisible" @hidedialog="showVideo">
<template v-slot>
<div class="machine-video">
<el-row>
<el-col class="video-item" :span="24" >
<iframe style="width:1100px;height:720px;" :src="'/zjdp/video.html?type=' + roomName " frameborder="0"></iframe>
</el-col>
</el-row>
</div>
</template>
</cm-dialog>
</div>
... ...
... ... @@ -38,32 +38,60 @@ export default {
const {proxy} = Vue.getCurrentInstance();
let dialogFlg = Vue.ref(false);
let commandNameData = Vue.ref([
{
name: '萧山IDC二号机房',
htmlName: 'xiaoshansecond',//html页面的名称
val: 'one'
},
{
name: '萧山IDC三号机房',
htmlName: 'xiaoshanthird',
val: 'two'
},
{
name: '萧山IDC七号机房',
htmlName: 'xiaoshanseven',
val: 'three'
}
]);
let commandNameData = Vue.ref([]);
let videoDialogVisible = Vue.ref(false);
let roomName = Vue.ref('');
let showMachineRoomDialog = (flg) => {
dialogFlg.value = flg;
if(flg && flg == true){
getRoomInfo();
}
}
const getRoomInfo = () => {
if(!props.textString || props.textString == ''){
return;
}
proxy.$http.get('/api-web/cmdb/config/get/machineroom',{cmdbVal:props.textString},function (res){
if(res && res.object){
let roomId = res.object.monitorValue;
getRoomDetail(roomId);
}
})
}
const getRoomDetail = (roomId) => {
proxy.$http.get('/api-web/machineroom/list',{},function (res){
if(res && res.data){
let roomSecondData=[];
res.data.map((item,index)=>{
if(item.parentId!='0' && roomId==item.machineRoomId){
roomSecondData.push(item)
roomName.value = item.machineRoomName
}
})
commandNameData.value = roomSecondData;//机房布局数据
}
})
}
const showVideo = (flg) => {
videoDialogVisible.value = flg
}
return {
dialogFlg,
commandNameData,
showMachineRoomDialog,
roomName,
showVideo,
videoDialogVisible
}
}
}
... ...
... ... @@ -7,17 +7,6 @@
</div>
<el-tree :data="treeData" :props="props" @node-click="handleConfigNodeClick">
<template #default="{ node, data }">
<!--<div style="display: flex;flex-direction: row;width: 100%;">
<div style="width: calc(100% - 60px);max-width: calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;text-align: left;"
@click="handleConfigNodeClick(data)" :title="node.label">
{{node.label }}
</div>
<div style="width: 60px;">
<a @click="editType(data)" style="margin-right: 10px;">
<i class="el-icon-setting"></i>
</a>
</div>
</div>-->
{{node.label }}
</template>
</el-tree>
... ... @@ -67,7 +56,7 @@
</el-select>
</div>
<div v-else-if="prop == 'colComponents'">
<div v-else-if="prop == 'colComponents'" style="display: flex">
<!-- 展示下拉选项 -->
<el-select placeholder="请选择" size="small" style="width: 100%"
@change="changeProperty(row,prop,column)" v-model="row.colComponents"
... ... @@ -81,6 +70,7 @@
<el-option label="机柜组件" :value="'machineRoomDetailComponents'"></el-option>
<el-option label="资产信息" :value="'assetsComponents'"></el-option>
</el-select>
<el-button size="mini" style="width: 20px;height: 20px;padding: 2px;margin-top: 2px;margin-left: 5px;" v-if="row.colComponents == 'machineRoomComponents'" @click="showMachineRoomDialog(true)"><i class="el-icon-setting"></i></el-button>
</div>
... ... @@ -110,9 +100,7 @@
</div>
<div v-else-if="prop == 'colTypeExtendProps'">
<span v-if="row.colType == '' || row.colType == null || row.colType == 'INPUT'"> - </span>
<el-button v-else @click="showSettingCmDialog(true,row)" size="mini"
style="margin-left: 10px"> <i class="el-icon-setting"></i></el-button>
</div>
... ... @@ -131,15 +119,6 @@
</div>
</template>
<!-- <template #tools>
<el-table-column fixed="right" label="操作" width="80" align="center">
<template #default="scope">
<el-button type="text" size="small" @click.prevent="deleteRow(row,scope.$index)">
<i class="el-icon-delete"/>
</el-button>
</template>
</el-table-column>
</template>-->
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="deleteRow(scope.row,scope.$index)">
<i class="el-icon-delete"/>
... ... @@ -212,4 +191,21 @@
</el-form>
</template>
</cm-dialog>
<!--关联机房配置-->
<cm-dialog title="关联机房配置" width="60%" :showDialogVisible="machineRoomDialog" @hidedialog="showMachineRoomDialog" @okfunc="saveMachineRoomConfig">
<template v-slot>
<cm-table-page :columns="machineRoomInfo.columns" :dataList="machineRoomInfo.dataList" :showIndex="true"
:showBorder="true" :loading="false" :showFooter="false"
:showPage="false" :height="400">
<template #default="{row,prop,column}">
<div v-if="prop == 'cmdbValue'" >
<el-input @blur="saveMachineRoomConfig(row)" type = "text"
size="small" placeholder="请填写" v-model="row[prop]">
</el-input>
</div>
</template>
</cm-table-page>
</template>
</cm-dialog>
</div>
... ...
... ... @@ -212,6 +212,61 @@ const treeNodeConfig = (currentNode) => {
}
}
const MachineRoom = (proxy) => {
let machineRoomDialog = Vue.ref(false);
let machineRoomInfo = Vue.ref({
dataList:[],
columns:[{
prop: 'remark',
label: '机房名称',
align: 'center',
},{
prop: 'cmdbValue',
label: 'CMDB关联机房',
align: 'center',
}]
});
const getConfigList = () =>{
proxy.$http.get("/api-web/cmdb/config/list/machineroom", {}, function (res) {
if (res && res.data) {
machineRoomInfo.value.dataList = res.data;
}
});
}
const showMachineRoomDialog = (flg) => {
machineRoomDialog.value = flg;
if(flg == true){
// 加载配置列表
getConfigList();
}
}
const saveMachineRoomConfig = (row) => {
let cmdbValue = row.cmdbValue;
if(cmdbValue && cmdbValue != ''){
proxy.$http.get("/api-web/cmdb/config/save/machineroom", row, function (res) {
if (res && res.success) {
proxy.$global.showMsg("保存成功！", 'success')
}
});
}
}
return {
machineRoomInfo,
getConfigList,
machineRoomDialog,
showMachineRoomDialog,
saveMachineRoomConfig
}
}
export default {
name: 'resConfigIndex',
template: '',
... ... @@ -282,6 +337,14 @@ export default {
getCmdbResTypeList
} = treeNodeConfig(currentNode);
const {
machineRoomInfo,
getConfigList,
machineRoomDialog,
showMachineRoomDialog,
saveMachineRoomConfig
} = MachineRoom(proxy);
// 获取左侧树结构
let loadTree = () => {
... ... @@ -514,7 +577,14 @@ export default {
treeNodeForm,
treeNodeFormRules,
cmdbResTypeList,
getCmdbResTypeList
getCmdbResTypeList,
// 机房配置
machineRoomInfo,
getConfigList,
machineRoomDialog,
showMachineRoomDialog,
saveMachineRoomConfig
}
}
}
... ...
... ... @@ -14,16 +14,18 @@
<div style="width: calc(100% - 100px)">
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item v-for="searchInfo in obj.searchList" :label="searchInfo.name">
<el-input v-if="searchInfo.type == 'INPUT'" v-model="searchForm[searchInfo.key]" :placeholder="'请输入' + searchInfo.name"></el-input>
<el-select v-else v-model="searchForm[searchInfo.key]" :placeholder="'请选择' + searchInfo.name" clearable filterable >
<el-select v-if="searchInfo.type == 'TABLE_REL'" v-else v-model="searchForm[searchInfo.key + '_' + searchInfo.type]" :placeholder="'请选择' + searchInfo.name" clearable filterable >
<el-option
v-for="item in searchItem[searchInfo.key]"
:key="item.val"
:label="item.label"
:value="item.val"
>
:value="item.val">
</el-option>
</el-select>
<el-input v-else v-model="searchForm[searchInfo.key + '_' + searchInfo.type]" :placeholder="'请输入' + searchInfo.name"></el-input>
</el-form-item>
<el-form-item>
... ...
... ... @@ -20,6 +20,7 @@
<!--<module>hg-monitor-web-new</module>-->
<module>hg-monitor-web-tj</module>
<module>hg-monitor-web-zj</module>
<module>hg-monitor-web-demo</module>
</modules>
<properties>
<java.version>1.8</java.version>
... ...