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 @@ @@ -5,10 +5,25 @@
5 5
6 <cm-dialog title="机房布局" :showFooter="false" :showDialogVisible="dialogFlg" @hidedialog="showMachineRoomDialog"> 6 <cm-dialog title="机房布局" :showFooter="false" :showDialogVisible="dialogFlg" @hidedialog="showMachineRoomDialog">
7 <template v-slot> 7 <template v-slot>
8 - <div style="overflow: auto"> 8 + <div style="overflow: auto;text-align: right">
  9 + <img class="imgDiv-video" src="/vue3/src/assets/images/zjdp/icon-jf.png" @click="showVideo(true)">
  10 + {{commandNameData}}
9 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom> 11 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
10 </div> 12 </div>
11 </template> 13 </template>
12 </cm-dialog> 14 </cm-dialog>
13 15
  16 + <!--机房视频弹框-->
  17 + <cm-dialog title="机房视频" :showFooter="false" :showDialogVisible="videoDialogVisible" @hidedialog="showVideo">
  18 + <template v-slot>
  19 + <div class="machine-video">
  20 + <el-row>
  21 + <el-col class="video-item" :span="24" >
  22 + <iframe style="width:1100px;height:720px;" :src="'/zjdp/video.html?type=' + roomName " frameborder="0"></iframe>
  23 + </el-col>
  24 + </el-row>
  25 + </div>
  26 + </template>
  27 + </cm-dialog>
  28 +
14 </div> 29 </div>
@@ -38,32 +38,60 @@ export default { @@ -38,32 +38,60 @@ export default {
38 const {proxy} = Vue.getCurrentInstance(); 38 const {proxy} = Vue.getCurrentInstance();
39 39
40 let dialogFlg = Vue.ref(false); 40 let dialogFlg = Vue.ref(false);
41 - let commandNameData = Vue.ref([  
42 - {  
43 - name: '萧山IDC二号机房',  
44 - htmlName: 'xiaoshansecond',//html页面的名称  
45 - val: 'one'  
46 - },  
47 - {  
48 - name: '萧山IDC三号机房',  
49 - htmlName: 'xiaoshanthird',  
50 - val: 'two'  
51 - },  
52 - {  
53 - name: '萧山IDC七号机房',  
54 - htmlName: 'xiaoshanseven',  
55 - val: 'three'  
56 - }  
57 - ]); 41 + let commandNameData = Vue.ref([]);
  42 +
  43 + let videoDialogVisible = Vue.ref(false);
  44 + let roomName = Vue.ref('');
58 45
59 let showMachineRoomDialog = (flg) => { 46 let showMachineRoomDialog = (flg) => {
60 dialogFlg.value = flg; 47 dialogFlg.value = flg;
  48 + if(flg && flg == true){
  49 + getRoomInfo();
  50 + }
  51 + }
  52 +
  53 + const getRoomInfo = () => {
  54 + if(!props.textString || props.textString == ''){
  55 + return;
  56 + }
  57 + proxy.$http.get('/api-web/cmdb/config/get/machineroom',{cmdbVal:props.textString},function (res){
  58 + if(res && res.object){
  59 +
  60 + let roomId = res.object.monitorValue;
  61 + getRoomDetail(roomId);
  62 + }
  63 + })
61 } 64 }
62 65
  66 + const getRoomDetail = (roomId) => {
  67 + proxy.$http.get('/api-web/machineroom/list',{},function (res){
  68 + if(res && res.data){
  69 + let roomSecondData=[];
  70 +
  71 +
  72 + res.data.map((item,index)=>{
  73 + if(item.parentId!='0' && roomId==item.machineRoomId){
  74 + roomSecondData.push(item)
  75 + roomName.value = item.machineRoomName
  76 + }
  77 + })
  78 + commandNameData.value = roomSecondData;//机房布局数据
  79 + }
  80 + })
  81 + }
  82 +
  83 + const showVideo = (flg) => {
  84 + videoDialogVisible.value = flg
  85 + }
  86 +
  87 +
63 return { 88 return {
64 dialogFlg, 89 dialogFlg,
65 commandNameData, 90 commandNameData,
66 showMachineRoomDialog, 91 showMachineRoomDialog,
  92 + roomName,
  93 + showVideo,
  94 + videoDialogVisible
67 } 95 }
68 } 96 }
69 } 97 }
@@ -7,17 +7,6 @@ @@ -7,17 +7,6 @@
7 </div> 7 </div>
8 <el-tree :data="treeData" :props="props" @node-click="handleConfigNodeClick"> 8 <el-tree :data="treeData" :props="props" @node-click="handleConfigNodeClick">
9 <template #default="{ node, data }"> 9 <template #default="{ node, data }">
10 - <!--<div style="display: flex;flex-direction: row;width: 100%;">  
11 - <div style="width: calc(100% - 60px);max-width: calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;text-align: left;"  
12 - @click="handleConfigNodeClick(data)" :title="node.label">  
13 - {{node.label }}  
14 - </div>  
15 - <div style="width: 60px;">  
16 - <a @click="editType(data)" style="margin-right: 10px;">  
17 - <i class="el-icon-setting"></i>  
18 - </a>  
19 - </div>  
20 - </div>-->  
21 {{node.label }} 10 {{node.label }}
22 </template> 11 </template>
23 </el-tree> 12 </el-tree>
@@ -67,7 +56,7 @@ @@ -67,7 +56,7 @@
67 </el-select> 56 </el-select>
68 </div> 57 </div>
69 58
70 - <div v-else-if="prop == 'colComponents'"> 59 + <div v-else-if="prop == 'colComponents'" style="display: flex">
71 <!-- 展示下拉选项 --> 60 <!-- 展示下拉选项 -->
72 <el-select placeholder="请选择" size="small" style="width: 100%" 61 <el-select placeholder="请选择" size="small" style="width: 100%"
73 @change="changeProperty(row,prop,column)" v-model="row.colComponents" 62 @change="changeProperty(row,prop,column)" v-model="row.colComponents"
@@ -81,6 +70,7 @@ @@ -81,6 +70,7 @@
81 <el-option label="机柜组件" :value="'machineRoomDetailComponents'"></el-option> 70 <el-option label="机柜组件" :value="'machineRoomDetailComponents'"></el-option>
82 <el-option label="资产信息" :value="'assetsComponents'"></el-option> 71 <el-option label="资产信息" :value="'assetsComponents'"></el-option>
83 </el-select> 72 </el-select>
  73 + <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>
84 </div> 74 </div>
85 75
86 76
@@ -110,9 +100,7 @@ @@ -110,9 +100,7 @@
110 </div> 100 </div>
111 101
112 <div v-else-if="prop == 'colTypeExtendProps'"> 102 <div v-else-if="prop == 'colTypeExtendProps'">
113 -  
114 <span v-if="row.colType == '' || row.colType == null || row.colType == 'INPUT'"> - </span> 103 <span v-if="row.colType == '' || row.colType == null || row.colType == 'INPUT'"> - </span>
115 -  
116 <el-button v-else @click="showSettingCmDialog(true,row)" size="mini" 104 <el-button v-else @click="showSettingCmDialog(true,row)" size="mini"
117 style="margin-left: 10px"> <i class="el-icon-setting"></i></el-button> 105 style="margin-left: 10px"> <i class="el-icon-setting"></i></el-button>
118 </div> 106 </div>
@@ -131,15 +119,6 @@ @@ -131,15 +119,6 @@
131 119
132 </div> 120 </div>
133 </template> 121 </template>
134 - <!-- <template #tools>  
135 - <el-table-column fixed="right" label="操作" width="80" align="center">  
136 - <template #default="scope">  
137 - <el-button type="text" size="small" @click.prevent="deleteRow(row,scope.$index)">  
138 - <i class="el-icon-delete"/>  
139 - </el-button>  
140 - </template>  
141 - </el-table-column>  
142 - </template>-->  
143 <template #tools="{scope}"> 122 <template #tools="{scope}">
144 <el-button type="text" size="small" @click.prevent="deleteRow(scope.row,scope.$index)"> 123 <el-button type="text" size="small" @click.prevent="deleteRow(scope.row,scope.$index)">
145 <i class="el-icon-delete"/> 124 <i class="el-icon-delete"/>
@@ -212,4 +191,21 @@ @@ -212,4 +191,21 @@
212 </el-form> 191 </el-form>
213 </template> 192 </template>
214 </cm-dialog> 193 </cm-dialog>
  194 +
  195 + <!--关联机房配置-->
  196 + <cm-dialog title="关联机房配置" width="60%" :showDialogVisible="machineRoomDialog" @hidedialog="showMachineRoomDialog" @okfunc="saveMachineRoomConfig">
  197 + <template v-slot>
  198 + <cm-table-page :columns="machineRoomInfo.columns" :dataList="machineRoomInfo.dataList" :showIndex="true"
  199 + :showBorder="true" :loading="false" :showFooter="false"
  200 + :showPage="false" :height="400">
  201 + <template #default="{row,prop,column}">
  202 + <div v-if="prop == 'cmdbValue'" >
  203 + <el-input @blur="saveMachineRoomConfig(row)" type = "text"
  204 + size="small" placeholder="请填写" v-model="row[prop]">
  205 + </el-input>
  206 + </div>
  207 + </template>
  208 + </cm-table-page>
  209 + </template>
  210 + </cm-dialog>
215 </div> 211 </div>
@@ -212,6 +212,61 @@ const treeNodeConfig = (currentNode) => { @@ -212,6 +212,61 @@ const treeNodeConfig = (currentNode) => {
212 } 212 }
213 } 213 }
214 214
  215 +
  216 +const MachineRoom = (proxy) => {
  217 +
  218 + let machineRoomDialog = Vue.ref(false);
  219 + let machineRoomInfo = Vue.ref({
  220 + dataList:[],
  221 + columns:[{
  222 + prop: 'remark',
  223 + label: '机房名称',
  224 + align: 'center',
  225 + },{
  226 + prop: 'cmdbValue',
  227 + label: 'CMDB关联机房',
  228 + align: 'center',
  229 + }]
  230 + });
  231 +
  232 + const getConfigList = () =>{
  233 + proxy.$http.get("/api-web/cmdb/config/list/machineroom", {}, function (res) {
  234 + if (res && res.data) {
  235 + machineRoomInfo.value.dataList = res.data;
  236 + }
  237 + });
  238 + }
  239 +
  240 + const showMachineRoomDialog = (flg) => {
  241 + machineRoomDialog.value = flg;
  242 +
  243 + if(flg == true){
  244 + // 加载配置列表
  245 + getConfigList();
  246 + }
  247 + }
  248 +
  249 + const saveMachineRoomConfig = (row) => {
  250 + let cmdbValue = row.cmdbValue;
  251 + if(cmdbValue && cmdbValue != ''){
  252 + proxy.$http.get("/api-web/cmdb/config/save/machineroom", row, function (res) {
  253 + if (res && res.success) {
  254 + proxy.$global.showMsg("保存成功！", 'success')
  255 + }
  256 + });
  257 + }
  258 +
  259 + }
  260 +
  261 + return {
  262 + machineRoomInfo,
  263 + getConfigList,
  264 + machineRoomDialog,
  265 + showMachineRoomDialog,
  266 + saveMachineRoomConfig
  267 + }
  268 +}
  269 +
215 export default { 270 export default {
216 name: 'resConfigIndex', 271 name: 'resConfigIndex',
217 template: '', 272 template: '',
@@ -282,6 +337,14 @@ export default { @@ -282,6 +337,14 @@ export default {
282 getCmdbResTypeList 337 getCmdbResTypeList
283 } = treeNodeConfig(currentNode); 338 } = treeNodeConfig(currentNode);
284 339
  340 + const {
  341 + machineRoomInfo,
  342 + getConfigList,
  343 + machineRoomDialog,
  344 + showMachineRoomDialog,
  345 + saveMachineRoomConfig
  346 + } = MachineRoom(proxy);
  347 +
285 348
286 // 获取左侧树结构 349 // 获取左侧树结构
287 let loadTree = () => { 350 let loadTree = () => {
@@ -514,7 +577,14 @@ export default { @@ -514,7 +577,14 @@ export default {
514 treeNodeForm, 577 treeNodeForm,
515 treeNodeFormRules, 578 treeNodeFormRules,
516 cmdbResTypeList, 579 cmdbResTypeList,
517 - getCmdbResTypeList 580 + getCmdbResTypeList,
  581 +
  582 + // 机房配置
  583 + machineRoomInfo,
  584 + getConfigList,
  585 + machineRoomDialog,
  586 + showMachineRoomDialog,
  587 + saveMachineRoomConfig
518 } 588 }
519 } 589 }
520 } 590 }
@@ -14,16 +14,18 @@ @@ -14,16 +14,18 @@
14 <div style="width: calc(100% - 100px)"> 14 <div style="width: calc(100% - 100px)">
15 <el-form :inline="true" :model="searchForm" class="demo-form-inline"> 15 <el-form :inline="true" :model="searchForm" class="demo-form-inline">
16 <el-form-item v-for="searchInfo in obj.searchList" :label="searchInfo.name"> 16 <el-form-item v-for="searchInfo in obj.searchList" :label="searchInfo.name">
17 - <el-input v-if="searchInfo.type == 'INPUT'" v-model="searchForm[searchInfo.key]" :placeholder="'请输入' + searchInfo.name"></el-input>  
18 - <el-select v-else v-model="searchForm[searchInfo.key]" :placeholder="'请选择' + searchInfo.name" clearable filterable > 17 +
  18 + <el-select v-if="searchInfo.type == 'TABLE_REL'" v-else v-model="searchForm[searchInfo.key + '_' + searchInfo.type]" :placeholder="'请选择' + searchInfo.name" clearable filterable >
19 <el-option 19 <el-option
20 v-for="item in searchItem[searchInfo.key]" 20 v-for="item in searchItem[searchInfo.key]"
21 :key="item.val" 21 :key="item.val"
22 :label="item.label" 22 :label="item.label"
23 - :value="item.val"  
24 - > 23 + :value="item.val">
25 </el-option> 24 </el-option>
26 </el-select> 25 </el-select>
  26 +
  27 + <el-input v-else v-model="searchForm[searchInfo.key + '_' + searchInfo.type]" :placeholder="'请输入' + searchInfo.name"></el-input>
  28 +
27 </el-form-item> 29 </el-form-item>
28 30
29 <el-form-item> 31 <el-form-item>
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 <!--<module>hg-monitor-web-new</module>--> 20 <!--<module>hg-monitor-web-new</module>-->
21 <module>hg-monitor-web-tj</module> 21 <module>hg-monitor-web-tj</module>
22 <module>hg-monitor-web-zj</module> 22 <module>hg-monitor-web-zj</module>
  23 + <module>hg-monitor-web-demo</module>
23 </modules> 24 </modules>
24 <properties> 25 <properties>
25 <java.version>1.8</java.version> 26 <java.version>1.8</java.version>