Merge branch 'master-v32-lushangqing' into 'master'

机柜机房组件数据更改为接口返回



See merge request !175

 <div class="machine-room">
 <div class="machine-room">
     <div class="room-top">
     <div class="room-top">
         <el-tabs type="card" @tab-click="handleCommand" v-model="commandVal">
         <el-tabs type="card" @tab-click="handleCommand" v-model="commandVal">
-            <el-tab-pane  v-for="item in commandNameData"  :label="item.name" :name="item.val"></el-tab-pane>
+            <el-tab-pane  v-for="item in commandNameData"  :label="item.machineRoomName" :name="item.machineRoomCode"></el-tab-pane>
 
 
         </el-tabs>
         </el-tabs>
-        <!--<el-dropdown @command="handleCommand" class="elSelf"  :popper-append-to-body="false">
-                        <span class="el-dropdown-link">
-                              {{commandName}}
-                              <i class="icon-arrow"></i>
-                        </span>
-            <template #dropdown>
-                <el-dropdown-menu class="cpuDropdown">
-                    <el-dropdown-item v-for="item in commandNameData" :command="item.val">{{item.name}}</el-dropdown-item>
-
-
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>-->
     </div>
     </div>
     <div class="room-html">
     <div class="room-html">
         <el-row>
         <el-row>
             <el-col class="video-item" :span="24" >
             <el-col class="video-item" :span="24" >
-                <MachineRoom v-if="src"  :src="src" ref="machineRoom" ></MachineRoom>
+                <MachineRoom v-if="src"  :src="src" :commandNameDataItem="commandNameDataItem"  ref="machineRoom" ></MachineRoom>
             </el-col>
             </el-col>
         </el-row>
         </el-row>
     </div>
     </div>

@@ -22,7 +22,7 @@ export default {
         return {
         return {
             domainName:sessionStorage.getItem('domainName'),
             domainName:sessionStorage.getItem('domainName'),
             accessToken:localStorage.getItem('access_token'),
             accessToken:localStorage.getItem('access_token'),
-            commandName:'',//下拉选择默认显示名称
+            // commandName:'',//下拉选择默认显示名称
             htmlName:'',//机房组件名称-html名称
             htmlName:'',//机房组件名称-html名称
             commandVal:'',//下拉选择选中值
             commandVal:'',//下拉选择选中值
             src:'',//机房布局html地址
             src:'',//机房布局html地址
@@ -34,30 +34,34 @@ export default {
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
         proxy.htmlName=Vue.ref();
         proxy.htmlName=Vue.ref();
         proxy.commandVal=Vue.ref()
         proxy.commandVal=Vue.ref()
-        proxy.commandName=Vue.ref();
+        // proxy.commandName=Vue.ref();
         proxy.src=Vue.ref();
         proxy.src=Vue.ref();
+        const commandNameDataItem=Vue.ref();
+        const allComponents=Vue.ref();
         // 获取状态
         // 获取状态
         const { changeIndex} = indirectManage()
         const { changeIndex} = indirectManage()
 
 
         // 挂载完
         // 挂载完
         Vue.onMounted(() => {
         Vue.onMounted(() => {
-            proxy.commandVal='one';
+            proxy.commandVal=props.commandNameData[0].machineRoomCode;
             proxy.getMachine(proxy.commandVal);
             proxy.getMachine(proxy.commandVal);
 
 
         })
         })
         //初始获取默认机房选择信息
         //初始获取默认机房选择信息
         const getMachine=(command)=>{
         const getMachine=(command)=>{
             //commandNameData机房机柜数据
             //commandNameData机房机柜数据
+            let allComponent=[];
             props.commandNameData.map((item,index)=>{
             props.commandNameData.map((item,index)=>{
-                if(command==item.val){
-                    proxy.htmlName=item.htmlName;
-                    proxy.commandName=item.name;
-                    proxy.commandVal=item.val;
+                if(command==item.machineRoomCode){
+                    // proxy.htmlName=item.htmlName;
+                    // proxy.commandName=item.name;
+                    proxy.commandVal=item.machineRoomCode;
+                    proxy.commandNameDataItem=item;
                 }
                 }
             })
             })
             // proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
             // proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
             //根据htmlName确定引入的机房
             //根据htmlName确定引入的机房
-            proxy.src=proxy.htmlName
+            proxy.src=proxy.commandVal
 
 
         }
         }
         const handleCommand=(command,event)=>{
         const handleCommand=(command,event)=>{
@@ -70,7 +74,9 @@ export default {
 
 
         return{
         return{
             getMachine,
             getMachine,
-            handleCommand
+            handleCommand,
+            commandNameDataItem,
+            allComponents
         }
         }
     }
     }
 }
 }

-<!--<iframe v-if="src" style="width:90%;height:720px;"  :src="src" frameborder="0" ref="machineIframe" ></iframe>-->
-<HuzhouOne v-if="showNum==1"  :src="machineData"></HuzhouOne>
-<HuzhouTwo v-if="showNum==2"  :src="machineData"></HuzhouTwo>
-<HuzhouThree v-if="showNum==3"  :src="machineData"></HuzhouThree>
-<Xiaoshansecond v-if="showNum==4"  :src="machineData"></Xiaoshansecond>
-<Xiaoshanthird v-if="showNum==5"  :src="machineData"></Xiaoshanthird>
-<Xiaoshanseven v-if="showNum==6"  :src="machineData"></Xiaoshanseven>
+<component :is="srcName" :src="machineData" />

@@ -19,23 +19,16 @@ export default {
         ),
         ),
         'Xiaoshanseven': Vue.defineAsyncComponent(
         'Xiaoshanseven': Vue.defineAsyncComponent(
             () => myImport('views/commonComponents/xiaoshanseven/index')
             () => myImport('views/commonComponents/xiaoshanseven/index')
-        ),
+        )
     },
     },
-    props:['src'],
+    props:['src','commandNameDataItem'],
     data(){
     data(){
         return {
         return {
             domainName:sessionStorage.getItem('domainName'),
             domainName:sessionStorage.getItem('domainName'),
             accessToken:localStorage.getItem('access_token'),
             accessToken:localStorage.getItem('access_token'),
             isDetailShow:false,//详情页
             isDetailShow:false,//详情页
             // changeIndexNav:this.changeIndex,//nav是否点击变化
             // changeIndexNav:this.changeIndex,//nav是否点击变化
-            htmmlNameData:[
-                {name:'huzhouzaibeione',val:'湖州灾备机房一'},
-                {name:'huzhouzaibeitwo',val:'湖州灾备机房二'},
-                {name:'huzhouzaibeithree',val:'湖州灾备机房三'},
-                {name:'xiaoshansecond',val:'萧山IDC二号机房'},
-                {name:'xiaoshanthird',val:'萧山IDC三号机房'},
-                {name:'xiaoshanseven',val:'萧山IDC七号机房'},
-            ],
+
             srcName:this.src,
             srcName:this.src,
             machineData:'',//机房信息数据
             machineData:'',//机房信息数据
             // src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken
             // src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken
@@ -54,27 +47,24 @@ export default {
     setup(props, {attrs, slots, emit}) {
     setup(props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
         const showNum=Vue.ref()
         const showNum=Vue.ref()
+        const componentName=Vue.ref();
 
 
 
 
         // 挂载完
         // 挂载完
         Vue.onMounted(() => {
         Vue.onMounted(() => {
-
             proxy.getName();
             proxy.getName();
         })
         })
         const getName=()=>{
         const getName=()=>{
-            proxy.htmmlNameData.map((item,index)=>{
-                if(proxy.srcName==item.name){
-                    proxy.showNum=index+1;
-                    proxy.machineData=item;
-                }
-            })
-            console.log("src",proxy.src,proxy.showNum)
+        console.log("accept",proxy.srcName, props.commandNameDataItem)
+
+            proxy.machineData= props.commandNameDataItem;
         }
         }
 
 
         return{
         return{
             // src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
             // src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
             getName,
             getName,
-            showNum
+            showNum,
+            componentName
 
 
         }
         }
     }
     }

@@ -12,7 +12,7 @@
                 <div class='img-serve' >
                 <div class='img-serve' >
 
 
                     <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
                     <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
-                    <div class='img-serve-text'>{{item.provider}}</div>
+                    <div class='img-serve-text'>{{item.resName}}</div>
                     <div class='lamp'>
                     <div class='lamp'>
                         <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
                         <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
                         <div class='img-lamp'>
                         <div class='img-lamp'>
@@ -35,7 +35,7 @@
             <div class='info-contain'>
             <div class='info-contain'>
                 <div class='info-text'>机柜信息</div>
                 <div class='info-text'>机柜信息</div>
                 <div class='info-text-bot'>
                 <div class='info-text-bot'>
-                    <p>机 房：{{machineData.val}}</p>
+                    <p>机 房：{{machineData.machineRoomName}}</p>
                     <p>机柜编号：{{detailData.name}}</p>
                     <p>机柜编号：{{detailData.name}}</p>
                     <p>机柜容量：{{infoData.cabinetCapacity}}</p>
                     <p>机柜容量：{{infoData.cabinetCapacity}}</p>
                     <p>设备数量：{{infoData.deviceNum}}台</p>
                     <p>设备数量：{{infoData.deviceNum}}台</p>

@@ -14,7 +14,8 @@ export default {
             isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
             isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
             serviceData:[],//机柜的服务器数据
             serviceData:[],//机柜的服务器数据
             deviceDataInfo:'',//设备详细信息
             deviceDataInfo:'',//设备详细信息
-            deviceDatas: [
+            deviceDatas:[],
+          /*  deviceDatas: [
                 {
                 {
                     name:'E12',//机柜名称
                     name:'E12',//机柜名称
 
 
@@ -158,7 +159,7 @@ export default {
                     deviceNum:'1',
                     deviceNum:'1',
                     cabinetCapacity :'42U',
                     cabinetCapacity :'42U',
                 },
                 },
-            ],//服务器设备信息
+            ],//服务器设备信息*/
             infoData:'',//设备详细信息
             infoData:'',//设备详细信息
             // isShowDevice:false,//是否显示设备信息
             // isShowDevice:false,//是否显示设备信息
 
 
@@ -173,26 +174,17 @@ export default {
 
 
         // 挂载完
         // 挂载完
         Vue.onMounted(() => {
         Vue.onMounted(() => {
-            if(props.machineData.name.indexOf('huzhou')!=-1){
-                proxy.isCenter=true;
-                proxy.theirRoom='湖州灾备';
-            }else{
-                proxy.isCenter=false;
-                proxy.theirRoom='兴议机房';
+            console.log('&&&',proxy.machineData)
 
 
-            }
             proxy.getData();
             proxy.getData();
-            // proxy.getDeviceInfo();
 
 
         })
         })
         const getData=()=>{
         const getData=()=>{
             let parmas={
             let parmas={
-                theirRoom:proxy.theirRoom,
+                theirRoomId:props.machineData.machineRoomId,
                 theirCabinet:CabinetNum
                 theirCabinet:CabinetNum
             }
             }
             $.get(proxy.domainName+'/api-web/v32/res/cabinet?access_token='+proxy.accessToken,parmas,function (res){
             $.get(proxy.domainName+'/api-web/v32/res/cabinet?access_token='+proxy.accessToken,parmas,function (res){
-
-                console.log("res1",res)
                 if(res){
                 if(res){
                     let resData=res.data;
                     let resData=res.data;
                     let deviceDatas=[];
                     let deviceDatas=[];
@@ -204,7 +196,6 @@ export default {
                         deviceData:resData
                         deviceData:resData
                     })
                     })
                     proxy.deviceDatas=deviceDatas;
                     proxy.deviceDatas=deviceDatas;
-                    console.log("devdats",proxy.deviceDatas)
                     proxy.getDeviceInfo()
                     proxy.getDeviceInfo()
 
 
                 }
                 }
@@ -232,7 +223,7 @@ export default {
                         itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
                         itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
                         itemD.uClass='';
                         itemD.uClass='';
                         if(leftStr>1){
                         if(leftStr>1){
-                            let bottom=(leftStr-1)*17;
+                            let bottom=(leftStr-1)*16;
                             itemD.uClass='bottom:'+bottom+'px';
                             itemD.uClass='bottom:'+bottom+'px';
 
 
                         }
                         }

@@ -14,46 +14,6 @@ export default {
             jfdata:'',
             jfdata:'',
             dialogMachineName:'',
             dialogMachineName:'',
             commandNameData:'',
             commandNameData:'',
-            commandNameDataH:[
-                {
-                    name:'湖州灾备机房一',
-                    htmlName:'huzhouzaibeione',
-                    val:'one'
-                },
-                {
-                    name:'湖州灾备机房二',
-                    htmlName:'huzhouzaibeitwo',
-                    val:'two'
-                },
-                {
-                    name:'湖州灾备机房三',
-                    htmlName:'huzhouzaibeithree',
-                    val:'three'
-                }
-            ],//机房布局html数据
-            commandNameDataX:[
-                {
-                    name:'萧山IDC二号机房',
-                    htmlName:'xiaoshansecond',
-                    val:'one'
-                },
-                {
-                    name:'萧山IDC三号机房',
-                    htmlName:'xiaoshanthird',
-                    val:'two'
-                },
-                {
-                    name:'萧山IDC七号机房',
-                    htmlName:'xiaoshanseven',
-                    val:'three'
-                }
-                // {
-                //     name:'兴议二号机房',
-                //     htmlName:'xiaoshansecond',
-                //     val:'one'
-                // }
-            ],
-            commandName:'',//下拉选择默认显示名称
             htmlName:'',//机房组件名称-html名称
             htmlName:'',//机房组件名称-html名称
             commandVal:'',//下拉选择选中值
             commandVal:'',//下拉选择选中值
             src:'',//机房布局html地址
             src:'',//机房布局html地址
@@ -63,7 +23,6 @@ export default {
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
         proxy.htmlName=Vue.ref();
         proxy.htmlName=Vue.ref();
         proxy.commandVal=Vue.ref()
         proxy.commandVal=Vue.ref()
-        proxy.commandName=Vue.ref();
         proxy.src=Vue.ref();
         proxy.src=Vue.ref();
 
 
         // 挂载完
         // 挂载完
@@ -71,22 +30,7 @@ export default {
             $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),function (res) {
             $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),function (res) {
                 if(res.data){
                 if(res.data){
                     proxy.jfdata=res.data;
                     proxy.jfdata=res.data;
-                   /* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data);
-                    $("#sjzx_machineroom_id").html(html);
-                    //机房点击事件
-                    $(".sjzx_machineroom").on("click",function () {
-                        const name = $(this).attr("name");
-                        layer.open({
-                            type:2
-                            , shade: 0.6 //遮罩透明度
-                            , maxmin: false //允许全屏最小化
-                            , anim: 1 //0-6的动画形式，-1不开启
-                            , content:['http://127.0.0.1:8081/video.html?type='+name+'','no']
-                            , area:["1100px",'720px']
-                            // , title: true //不显示标题栏
-                            // , title: name
-                        })
-                    });*/
+
                 }
                 }
             })
             })
 
 
@@ -98,12 +42,7 @@ export default {
         const isShowOuter=(item)=>{
         const isShowOuter=(item)=>{
             proxy.dialogMachineName=item.machineRoomName;
             proxy.dialogMachineName=item.machineRoomName;
             proxy.outerVisible = true;
             proxy.outerVisible = true;
-            if(item.layout == 0){
-                proxy.commandNameData=proxy.commandNameDataH;//湖州机房布局数据
-            }else{
-                proxy.commandNameData=proxy.commandNameDataX;//兴议机房布局数据
-
-            }
+            proxy.getData(item);
         }
         }
         //关闭弹框时清空数据
         //关闭弹框时清空数据
         const closeDialog=()=>{
         const closeDialog=()=>{
@@ -111,13 +50,38 @@ export default {
 
 
         }
         }
 
 
+        /*获取机房数据
+        * */
+        let roomSecondData=Vue.ref([]);//兴议或者湖州下层机房数据
+        const getData=(roomRow)=>{
+              proxy.$http.get('/api-web/machineroom/list',{},function (res){
+                  if(res && res.data){
+                      let roomSecondDataArr=res.data;
+                      let roomSecondData=[];
+
+                      roomSecondDataArr.map((item,index)=>{
+                          if(item.parentId!='0' && roomRow.machineRoomId==item.parentId){
+                              roomSecondData.push(item)
+                          }
+                      })
+                      proxy.roomSecondData=roomSecondData;
+
+                      proxy.commandNameData=proxy.roomSecondData;//机房布局数据
+
+                      console.log("下层机房数据",proxy.roomSecondData)
+                  }
+            })
+        }
+
         return{
         return{
             centerDialogVisible: Vue.ref(false),
             centerDialogVisible: Vue.ref(false),
             outerVisible: Vue.ref(false),
             outerVisible: Vue.ref(false),
             innerVisible: Vue.ref(false),
             innerVisible: Vue.ref(false),
             isShowOuter,
             isShowOuter,
             isShow,
             isShow,
-            closeDialog
+            closeDialog,
+            roomSecondData,
+            getData
         }
         }
     }
     }
 }
 }