资产视图-机房布局优化

@@ -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>