Authored by 王涛
<div class="machine-room">
<div class="room-top">
<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-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 class="room-html">
<el-row>
<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-row>
</div>
... ...
... ... @@ -22,7 +22,7 @@ export default {
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
commandName:'',//下拉选择默认显示名称
// commandName:'',//下拉选择默认显示名称
htmlName:'',//机房组件名称-html名称
commandVal:'',//下拉选择选中值
src:'',//机房布局html地址
... ... @@ -34,30 +34,34 @@ export default {
const {proxy} = Vue.getCurrentInstance();
proxy.htmlName=Vue.ref();
proxy.commandVal=Vue.ref()
proxy.commandName=Vue.ref();
// proxy.commandName=Vue.ref();
proxy.src=Vue.ref();
const commandNameDataItem=Vue.ref();
const allComponents=Vue.ref();
// 获取状态
const { changeIndex} = indirectManage()
// 挂载完
Vue.onMounted(() => {
proxy.commandVal='one';
proxy.commandVal=props.commandNameData[0].machineRoomCode;
proxy.getMachine(proxy.commandVal);
})
//初始获取默认机房选择信息
const getMachine=(command)=>{
//commandNameData机房机柜数据
let allComponent=[];
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
//根据htmlName确定引入的机房
proxy.src=proxy.htmlName
proxy.src=proxy.commandVal
}
const handleCommand=(command,event)=>{
... ... @@ -70,7 +74,9 @@ export default {
return{
getMachine,
handleCommand
handleCommand,
commandNameDataItem,
allComponents
}
}
}
\ No newline at end of file
... ...
<!--<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" />
\ No newline at end of file
... ...
... ... @@ -19,23 +19,16 @@ export default {
),
'Xiaoshanseven': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/xiaoshanseven/index')
),
)
},
props:['src'],
props:['src','commandNameDataItem'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isDetailShow:false,//详情页
// 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,
machineData:'',//机房信息数据
// src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken
... ... @@ -54,27 +47,24 @@ export default {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const showNum=Vue.ref()
const componentName=Vue.ref();
// 挂载完
Vue.onMounted(() => {
proxy.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{
// src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
getName,
showNum
showNum,
componentName
}
}
... ...
... ... @@ -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.provider}}</div>
<div class='img-serve-text'>{{item.resName}}</div>
<div class='lamp'>
<img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
... ... @@ -35,7 +35,7 @@
<div class='info-contain'>
<div class='info-text'>机柜信息</div>
<div class='info-text-bot'>
<p>机 房:{{machineData.val}}</p>
<p>机 房:{{machineData.machineRoomName}}</p>
<p>机柜编号:{{detailData.name}}</p>
<p>机柜容量:{{infoData.cabinetCapacity}}</p>
<p>设备数量:{{infoData.deviceNum}}台</p>
... ...
... ... @@ -14,7 +14,8 @@ export default {
isCenter:false,//是否居中--true代表湖州机房,false代表萧山机房
serviceData:[],//机柜的服务器数据
deviceDataInfo:'',//设备详细信息
deviceDatas: [
deviceDatas:[],
/* deviceDatas: [
{
name:'E12',//机柜名称
... ... @@ -158,7 +159,7 @@ export default {
deviceNum:'1',
cabinetCapacity :'42U',
},
],//服务器设备信息
],//服务器设备信息*/
infoData:'',//设备详细信息
// isShowDevice:false,//是否显示设备信息
... ... @@ -173,26 +174,17 @@ export default {
// 挂载完
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.getDeviceInfo();
})
const getData=()=>{
let parmas={
theirRoom:proxy.theirRoom,
theirRoomId:props.machineData.machineRoomId,
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=[];
... ... @@ -204,7 +196,6 @@ export default {
deviceData:resData
})
proxy.deviceDatas=deviceDatas;
console.log("devdats",proxy.deviceDatas)
proxy.getDeviceInfo()
}
... ... @@ -232,7 +223,7 @@ export default {
itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
itemD.uClass='';
if(leftStr>1){
let bottom=(leftStr-1)*17;
let bottom=(leftStr-1)*16;
itemD.uClass='bottom:'+bottom+'px';
}
... ...
... ... @@ -14,46 +14,6 @@ export default {
jfdata:'',
dialogMachineName:'',
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名称
commandVal:'',//下拉选择选中值
src:'',//机房布局html地址
... ... @@ -63,7 +23,6 @@ export default {
const {proxy} = Vue.getCurrentInstance();
proxy.htmlName=Vue.ref();
proxy.commandVal=Vue.ref()
proxy.commandName=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) {
if(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)=>{
proxy.dialogMachineName=item.machineRoomName;
proxy.outerVisible = true;
if(item.layout == 0){
proxy.commandNameData=proxy.commandNameDataH;//湖州机房布局数据
}else{
proxy.commandNameData=proxy.commandNameDataX;//兴议机房布局数据
}
proxy.getData(item);
}
//关闭弹框时清空数据
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{
centerDialogVisible: Vue.ref(false),
outerVisible: Vue.ref(false),
innerVisible: Vue.ref(false),
isShowOuter,
isShow,
closeDialog
closeDialog,
roomSecondData,
getData
}
}
}
... ...