monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 8878061031d226bde9b05a629c13988a32458ab4 2 parents d7ce881a 48d48f17

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

机房机柜组件开发



See merge request !122
Inline Side-by-side
Showing 52 changed files with 4745 additions and 17 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 52 of 52+ files are displayed.

... ... @@ -40,6 +40,10 @@
@import "../css/navTabs.css";
@import "../css/machineroom.css";
@import "../css/Details.css";
/*故障诊断书*/
@import "../css/faultDiagnosis.css";
... ...
body{
background-image: url(/vue3/src/assets/images/machineRoom/img-bg-1.png);
background-size: 100%;
}
li{
list-style: none
}
.all{
display:flex;
justify-content: space-between;
overflow: hidden;
width:90%;
margin:auto;
}
.flex-center{
justify-content: center;
}
/* 左侧机柜样式 */
.contain{
width:413px;
height:710px;
/*margin-left:3%;*/
/*margin-top:5%;*/
/* background-color: red; */
background-image: url(/vue3/src/assets/images/machineRoom/img-no-machine.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
.contain-server{
/*position: absolute;*/
/*width:365px;*/
/*height:40%;*/
/*margin-left:18px;*/
/*bottom:7%; */
display: flex;
justify-content: space-between;
flex-direction:column;
align-items: center;
/* background-color: red; */
}
.serve{
width:382px;
height:61px;
/*margin-left:-3px;*/
background-image: url(/vue3/src/assets/images/machineRoom/img-4Uservice.png);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 10px;
}
.img-serve-8{
background-image: url(/vue3/src/assets/images/machineRoom/img-8Uservice.png);
height:127px;
width:383px;
}
.img-serve{
/*width:340px;
height:50px;
margin:12px auto;*/
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.lamp{
display:flex;
width:58%;
}
.server-flex{
display: flex;
justify-content: space-around;
width:42%;
}
.img-lamp{
/*margin-left:15px;*/
margin-top:10px
}
/* 服务器状态图片样式 */
.state{
width:35px;
height:35px;
margin-top:8px;
margin-left:4px;
}
.img-serve-text{
color:#fff;
line-height: 50px;
/*margin-left:10px;*/
}
.img-weblog{
margin-left:50px;
margin-top:15px;
width:30px;
height:20px;
}
/* 右侧机柜详细信息样式 */
.info{
width:500px;
height:700px;
margin-right:8%;
/*margin-top:5%;*/
/* background-color: red; */
display: flex;
flex-flow: column;
justify-content: center;
}
.info-top{
height:340px;
/*margin-top:-10px;*/
background-image: url(/vue3/src/assets/images/machineRoom/img-machineInfo-bg.png);
}
.info-bottom{
height:340px;
margin-top:20px;
background-image: url(/vue3/src/assets/images/machineRoom/img-deviceInfo-bg.png);
}
.contain{
display: flex;
justify-content: center;
align-items: end;
}
.info-contain{
width:90%;
display:inline-block;
height:250px;
margin-top:60px;
margin-left: 60px;
}
.info-text{
height:50px;
font-weight: bolder;
font-size: 20px;
color:#fff;
text-align: left;
/* background-color: rgb(59, 185, 8); */
}
.info-text-bot{
margin-top:-15px;
height:200px;
font-size: 16px;
letter-spacing: 2px;
color:#fff;
text-align: left;
/* background-color: rgb(93, 15, 196); */
}
.info-text-bot p{
text-align: left;
margin:16px 0;
}
.img-serve{
cursor: pointer;
}
.info-bottom{
/*display:none;*/
}
body::-webkit-scrollbar{
width:15px;
}
/* 垂直滚动条的滑动块 */
body::-webkit-scrollbar-thumb:vertical {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:#169db2;
}
/*修改滚动条的下面的样式*/
body::-webkit-scrollbar-track{
background-color:#05235c;
-webkit-borderd-radius:2em;
-moz-borderd-radius:2em;
borderd-radius:2em;
}
\ No newline at end of file
... ...
... ... @@ -108,3 +108,6 @@
.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__nav{
border-color: #00ccff;
}
.dataCenter-container .el-dialog__body{
min-height: 700px;
}
\ No newline at end of file
... ...
@charset "utf-8";
*
{
margin:0;
padding:0;
}
html
{
width:100%;
height:100%;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
-webkit-text-size-adjust:none;
background-image:url("/vue3/src/assets/images/machineRoom/img-beijing-dp.png");
background-repeat: no-repeat;
background-position: center;
}
body
{
padding:5px;
}
.outlinediv {
padding-top: 30px;
border: 2px solid #0a93be;
width: 900px;
height: 600px;
margin: 0 auto;
font-size: 16px;
border-radius: 5px;
text-align: center;
color: #bbb;
position: relative;
display: list-item;
}
.outlinediv span {
/*color: rgba(0, 0, 0, 0.89);*/
color: rgba(255, 255, 255, 0.89);
line-height: 20px;
font-size: 14px;
}
.outlinediv .xiaoshansecond-topcabinet{
margin-top: 20px;
margin-left: 7%;
padding: 20px;
width: 80%;
height:100px;
}
.outlinediv .xiaoshansecond-middlecabinet{
margin-top: 50px;
margin-bottom: 50px;
margin-left: 7%;
padding: 20px;
width: 80%;
height:100px;
}
.outlinediv .xiaoshansecond-bottomcabinet{
margin-left: 7%;
padding: 20px;
width: 80%;
height:100px;
}
.cabinet{
width:auto;height:auto;max-height:100%;max-width:100%;
}
table{
margin-top: 20px;
border-collapse:collapse;
}
table tr{
height: 50px;
}
tr.sevenempty {
height: 10px;
}
table tr td{
position: relative;
max-width: 35px;
}
table td .cabinetId{
position: absolute;/*绝对定位*/
top:20px;
width: 100%;
bottom: 0px;/*离底下0像素*/
left: 0px;/*离左边0像素*/
text-align: center;
font-size: 12px;
color: white;
}
.outlinediv .xiaoshanthird-topcabinet{
margin-left:22%;
padding: 20px;
width: 80%;
}
.outlinediv .xiaoshanseven-leftcabinet{
margin-left:1%;
width: 40%;
}
.outlinediv .xiaoshanseven-rightcabinet{
margin-left: 5px;
width: 40%;
}
.outlinediv .xiaoshanseven-middlecabinet{
margin-top: 20px;
padding-top: 30%;
border: 2px solid #111D1A;
width:12% ;
height: 255px;
text-align: center;
}
.outlinediv .huzhouone-topcabinet{
margin-left:10%;
width: 90%;
}
tr.zaibeione{
height: 90px;
}
.zaibei.cabinetId{
position: absolute;/*绝对定位*/
top:10px;
width: 100%;
bottom: 0px;/*离底下0像素*/
left: 0px;/*离左边0像素*/
text-align: center;
font-size: 8px;
color: white;
}
.cursorClass{
cursor: pointer;
}
\ No newline at end of file
... ...
... ... @@ -21,7 +21,7 @@
<div class="room-html">
<el-row>
<el-col class="video-item" :span="24" >
<MachineRoom v-if="src" :src="src"></MachineRoom>
<MachineRoom v-if="src" :src="src" ref="machineRoom" ></MachineRoom>
</el-col>
</el-row>
</div>
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const changeIndex = Vue.toRef(store.state, 'changeIndex')
return {
changeIndex
}
}
export default {
name: 'machineRoom',
template: '',
... ... @@ -19,20 +30,14 @@ export default {
}
},
watch:{
changeIndex(newValue, oldValue) {
console.log("changeIndex",newValue)
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
proxy.htmlName=Vue.ref();
proxy.commandVal=Vue.ref()
proxy.commandName=Vue.ref();
proxy.src=Vue.ref();
// 获取状态
const { changeIndex} = indirectManage()
// 挂载完
Vue.onMounted(() => {
... ... @@ -50,8 +55,9 @@ export default {
proxy.commandVal=item.val;
}
})
proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
console.log("htmlName",proxy.htmlName,proxy.src)
// proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
//根据htmlName确定引入的机房
proxy.src=proxy.htmlName
}
const handleCommand=(command,event)=>{
... ... @@ -59,14 +65,12 @@ export default {
proxy.commandVal=command.props.name;
proxy.getMachine(proxy.commandVal)
// proxy.innerVisible=true;
changeIndex.value=proxy.changeIndex;
}
return{
getMachine,
handleCommand
}
}
}
\ No newline at end of file
... ...
<div v-if="!isDetailShow" class="outlinediv" style="height: 666px">
<!-- <span>湖州灾备一机房平面图</span>-->
<div class="huzhouone-topcabinet">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
</td>
</tr>
<!-- <tr>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 4A</span></a></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-7</span></a></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FA-6</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-5</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FA-4</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-3</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-2</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-1</span></a></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-3</span></a></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-4</span></a></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 3A</span></a></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-7</span></a></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-6</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-5</span></a></td>
<td><a href="/h5/machineroomDetail/FB-4.html"><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-4</span></a></td>
<td><a href="/h5/machineroomDetail/FB-3.html"><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-3</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-2</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-1</span></a></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
</tr>
<tr class="zaibeione"></tr>
<tr>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-11</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-10</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 1A</span></a></td>
<td width="10px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">EMC1</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">EMC2</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">EMC3</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-7</span></a></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">小型机595A</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机595B</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机3</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-2</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-1</span></a></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-1</span></a></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-2</span></a></td>
</tr>
<tr>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-11</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-10</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 2B</span></a></td>
<td style="width: 15px"></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img/></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-4</span></a></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">小型机570-3</span></a></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-1</span></a></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img/></td>
<td><img/></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-1</span></a></td>
</tr>-->
</table>
</div>
</div>
<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
\ No newline at end of file
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const changeIndex = Vue.toRef(store.state, 'changeIndex')
return {
changeIndex
}
}
export default {
name: 'huzhouOne',
template: '',
components: {
'MachineRoomDetail': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/machineRoomDetail/index')
),
},
props:['src'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isDetailShow:false,//是否展示详情页
detailData:'',//详情数据
htmlName:'huzhouzaibeione',
machineData:this.src,
allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
tableData:[
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'PDA 4A',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'FA-7',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'FA-6',
isShow:true,
className:'',
width:''
},
{
name:'FA-5',
isShow:true,
className:'',
width:''
},
{
name:'FA-4',
isShow:true,
className:'',
width:''
},
{
name:'FA-3',
isShow:true,
className:'',
width:''
},
{
name:'FA-2',
isShow:true,
className:'',
width:''
},
{
name:'FA-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'AC-3',
isShow:true,
className:'',
width:''
},
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:true,
className:'',
width:''
},
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'AC-4',
isShow:true,
className:'',
width:''
},
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'PDA 3A',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'FB-7',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'FB-6',
isShow:true,
className:'',
width:''
},
{
name:'FB-5',
isShow:true,
className:'',
width:''
},
{
name:'FB-4',
isShow:true,
className:'',
width:''
},
{
name:'FB-3',
isShow:true,
className:'',
width:''
},
{
name:'FB-2',
isShow:true,
className:'',
width:''
},
{
name:'FB-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:true,
className:'',
width:''
},
],
[
],
[
{
name:'XA-11',
isShow:true,
className:'',
width:''
},
{
name:'XA-10',
isShow:true,
className:'',
width:''
},
{
name:'PDA 1A',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'10px'
},
{
name:'EMC1',
isShow:true,
className:'',
width:''
},
{
name:'EMC2',
isShow:true,
className:'',
width:''
},
{
name:'EMC3',
isShow:true,
className:'',
width:''
},
{
name:'XA-7',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'小型机595A',
isShow:true,
className:'',
width:''
},
{
name:'小型机595B',
isShow:true,
className:'',
width:''
},
{
name:'小型机3',
isShow:true,
className:'',
width:''
},
{
name:'小型机570-2',
isShow:true,
className:'',
width:''
},
{
name:'小型机570-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'XA-1',
isShow:true,
className:'',
width:''
}
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:true,
className:'',
width:''
},
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'AC-2',
isShow:true,
className:'',
width:''
},
],
[
{
name:'XB-11',
isShow:true,
className:'',
width:''
},
{
name:'XB-10',
isShow:true,
className:'',
width:''
},
{
name:'PDA 2B',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'15px'
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'小型机570-4',
isShow:true,
className:'',
width:''
},
{
name:'小型机570-3',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'XB-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:true,
className:'',
width:''
},
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'AC-1',
isShow:true,
className:'',
width:''
},
],
]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 获取状态
const { changeIndex} = indirectManage()
// 监听编辑状态
Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
console.log('vux',changeIndex.value,newVal)
proxy.isDetailShow=false;
});
// 挂载完
Vue.onMounted(() => {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
proxy.isDetailShow=true;
console.log("detail",item)
proxy.detailData=item;
}
})
}
return{
goDetail
}
}
}
\ No newline at end of file
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<!-- <span>湖州灾备三机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
</td>
</tr>
<!-- <tr>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">TB-6</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">TB-5</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
</tr>
<tr>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
</tr>
<tr>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
</tr>
<tr>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
</tr>
<tr class="zaibeione"></tr>-->
</table>
</div>
</div>
<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
\ No newline at end of file
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const changeIndex = Vue.toRef(store.state, 'changeIndex')
return {
changeIndex
}
}
export default {
name: 'huzhouThree',
template: '',
components: {
'MachineRoomDetail': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/machineRoomDetail/index')
),
},
props:['src'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isDetailShow:false,//是否展示详情页
detailData:'',//详情数据
htmlName:'huzhouzaibeithree',
machineData:this.src,
allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
tableData:[
[
{
name:'TB-6',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'TB-5',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
}
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
],
[
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:true,
className:'',
width:''
}
],
[]
]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 获取状态
const { changeIndex} = indirectManage()
// 监听编辑状态
Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
console.log('vux',changeIndex.value,newVal)
proxy.isDetailShow=false;
});
// 挂载完
Vue.onMounted(() => {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
}
return{
goDetail
}
}
}
\ No newline at end of file
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<!-- <span>湖州灾备二机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 20%">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
</td>
</tr>
<!-- <tr>
<td><img/></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-1</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LA-2</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-3</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-2</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-1</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">PDA6B</span></a></td>
</tr>
<tr>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">AC-5</span></a></td>
<td style="width: 30px"></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
</tr>
<tr>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
<td style="width: 30px"></td>
<td><img></td>
<td><img ></td>
<td><img></td>
<td><img></td>
<td><img ></td>
<td><img ></td>
</tr>
<tr>
<td><img/></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LB-1</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-2</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LB-3</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-2</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-1</span></a></td>
<td style="width: 30px"></td>
<td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">PDA5A</span></a></td>
</tr>
<tr class="zaibeione"></tr>-->
</table>
</div>
</div>
<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const changeIndex = Vue.toRef(store.state, 'changeIndex')
return {
changeIndex
}
}
export default {
name: 'huzhouTwo',
template: '',
components: {
'MachineRoomDetail': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/machineRoomDetail/index')
),
},
props:['src'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isDetailShow:false,//是否展示详情页
detailData:'',//详情数据
htmlName:'huzhouzaibeitwo',
machineData:this.src,
allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
tableData:[
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LA-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LA-2',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LA-3',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LA-2',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'FA-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'PDA6B',
isShow:true,
className:'',
width:''
}
],
[
{
name:'AC-5',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
],
[
{
name:'',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:''
},
],
[
{
name:'',
isShow:false,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LB-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LB-2',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LB-3',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'LB-2',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'FB-1',
isShow:true,
className:'',
width:''
},
{
name:'',
isShow:false,
className:'',
width:'30px'
},
{
name:'PDA5A',
isShow:true,
className:'',
width:''
}
],
[]
]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 获取状态
const { changeIndex} = indirectManage()
// 监听编辑状态
Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
console.log('vux',changeIndex.value,newVal)
proxy.isDetailShow=false;
});
// 挂载完
Vue.onMounted(() => {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
}
return{
goDetail
}
}
}
\ No newline at end of file
... ...
<iframe v-if="src" style="width:90%;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>
<!--<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>
... ...
export default {
name: 'machineRoom',
template: '',
components: {},
components: {
'HuzhouOne': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/huzhouOne/index')
),
'HuzhouTwo': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/huzhouTwo/index')
),
'HuzhouThree': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/huzhouThree/index')
),
'Xiaoshansecond': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/xiaoshansecond/index')
),
'Xiaoshanthird': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/xiaoshanthird/index')
),
'Xiaoshanseven': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/xiaoshanseven/index')
),
},
props:['src'],
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
}
},
watch:{
src(newValue, oldValue) {
console.log("srcName",newValue)
this.srcName=newValue;
this.getName();
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const showNum=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)
}
return{
// src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
getName,
showNum
}
}
... ...
<div :class="['all',{'flex-center':isCenter}]">
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-server'>
<!-- 第一个物理服务器 -->
<div :class="['serve',{'img-serve-8':infoData.cabinetCapacity=='8U'}]"@click="showDevice" v-for="(item,index) in serviceData">
<div class='img-serve' >
<img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
<img src="/vue3/src/assets/images/machineRoom/greenColor.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧机柜详细信息 -->
<div class='info' v-if="!isCenter">
<!-- 机柜信息 -->
<div class='info-top'>
<div class='info-contain'>
<div class='info-text'>机柜信息</div>
<div class='info-text-bot'>
<p>机 房：{{machineData.val}}</p>
<p>机柜编号：{{detailData.name}}</p>
<p>机柜容量：{{infoData.cabinetCapacity}}</p>
<p>设备数量：{{infoData.deviceNum}}台</p>
<p v-if="infoData.alarmNum">告警量：{{infoData.AlarmNum}}无告警</p>
<p v-if="!infoData.alarmNum">告警量：无告警</p>
</div>
</div>
</div>
<!-- 设备信息 -->
<div class='info-bottom' id="info-bottom" v-if="isShowDevice">
<div class='info-contain'>
<div class='info-text'>设备信息</div>
<div class='info-text-bot'>
<p>资源名称：{{infoData.resName}}</p>
<p>品 牌：{{infoData.brandName}}</p>
<p>型 号：{{infoData.model}}</p>
<p>序 列 号：{{infoData.serialNumber}}</p>
<p>业 务 IP：{{infoData.ServiceIP}}</p>
<p>用 途：{{infoData.purpose}}</p>
</div>
</div>
</div>
</div>
</div>
<!--
</body>
</html>
<script>
var eleInfo=document.getElementsByClassName('serve');
eleInfo[0].onclick = function() {
var eleBottom=document.getElementById("info-bottom")
eleBottom.setAttribute('style','display:block')
}
</script>-->
... ...
export default {
name: 'machineRoomDetail',
template: '',
components: {
'MachineRoomDetail': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/machineRoomDetail/index')
),
},
props:['detailData','machineData'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
serviceData:[],//服务器数据
deviceData: [
{
name:'E12',
resName:'管理决策二包(数据集市39)',
brandName:'浪潮',
model:'TS860',
serialNumber:'216365930',
ServiceIP:'80.12.73.39',
purpose:'管理决策二包使用',
cabinetCapacity :'8U',
deviceNum:'1',
alarmNum:'0'
},
{
name:'E13',
resName:'管理决策二包(数据集市38)',
brandName:'浪潮',
model:'TS860',
serialNumber:'216365928',
ServiceIP:'80.12.73.38',
purpose:'管理决策二包使用',
cabinetCapacity :'8U',
deviceNum:'1',
alarmNum:'0'
},
{
name:'FB-3',
deviceNum:'3',
cabinetCapacity :'4U',
},
{
name:'FB-4',
deviceNum:'1',
cabinetCapacity :'4U',
},
],//设备信息
infoData:'',//设备详细信息
// isShowDevice:false,//是否显示设备信息
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const isShowDevice=Vue.ref(false);
const CabinetNum=props.detailData.name;//机柜编号
// 挂载完
Vue.onMounted(() => {
if(props.machineData.name.indexOf('huzhou')!=-1){
proxy.isCenter=true;
}else{
proxy.isCenter=false;
}
proxy.getDeviceInfo();
})
const getDeviceInfo=()=>{
proxy.deviceData.map((item,index)=>{
if(CabinetNum==item.name){
proxy.infoData=item;
}
})
for(let i=0;i<proxy.infoData.deviceNum;i++){
proxy.serviceData.push({
name:'物理服务器'
})
}
}
const showDevice=()=>{
console.log("iscenter",proxy.isCenter)
if(!proxy.isCenter){
console.log("lalala")
proxy.isShowDevice=true;
}
}
return{
showDevice,
isShowDevice,
getDeviceInfo
}
}
}
\ No newline at end of file
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<!-- <span>2号机房平面图</span>-->
<div v-for="(items,indexs) in tableData" :class="[{'xiaoshansecond-topcabinet':indexs==0,'xiaoshansecond-middlecabinet':indexs==1,'xiaoshansecond-bottomcabinet':indexs==2}]" class="xiaoshansecond-topcabinet" >
<table>
<tr >
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
</table>
</div>
</div>
<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const changeIndex = Vue.toRef(store.state, 'changeIndex')
return {
changeIndex
}
}
export default {
name: 'xiaoshansecond',
template: '',
components: {
'MachineRoomDetail': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/machineRoomDetail/index')
),
},
props:['src'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isDetailShow:false,//是否展示详情页
detailData:'',//详情数据
htmlName:'xiaoshansecond',
machineData:this.src,
allowClickData:['E12','E13'],//允许进入详情的机柜
tableData:[
[
{
name:'F1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F10',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F11',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:true,
className:'',
imgEmpty:true,
width:''
},
{
name:'',
isShow:true,
className:'',
imgEmpty:true,
width:''
},
{
name:'F14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F19',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F20',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
],
[
{
name:'G1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G10',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G11',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G12',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G13',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G19',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G20',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
],
[
{
name:'H1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H10',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H11',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H12',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H13',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H19',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H20',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
],
]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 获取状态
const { changeIndex} = indirectManage()
// 监听编辑状态
Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
console.log('vux',changeIndex.value,newVal)
proxy.isDetailShow=false;
});
// 挂载完
Vue.onMounted(() => {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
}
return{
goDetail
}
}
}
\ No newline at end of file
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<!-- <span>7号机房平面图</span>-->
<div style="width: 100%;height: 100%;display: inline-flex">
<div class="xiaoshanseven-leftcabinet">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'sevenempty':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
</table>
</div>
<div class="xiaoshanseven-middlecabinet"><span>过道</span></div>
<div class="xiaoshanseven-rightcabinet">
<table>
<tr v-for="(items,indexs) in tableData2" :class="{'sevenempty':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const changeIndex = Vue.toRef(store.state, 'changeIndex')
return {
changeIndex
}
}
export default {
name: 'xiaoshanseven',
template: '',
components: {
'MachineRoomDetail': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/machineRoomDetail/index')
),
},
props:['src'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isDetailShow:false,//是否展示详情页
detailData:'',//详情数据
htmlName:'xiaoshanseven',
machineData:this.src,
allowClickData:['E12','E13'],//允许进入详情的机柜
tableData:[
[
{
name:'I1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I7',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'H1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H10',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'G1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G10',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'F1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F10',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'E1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E10',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'D1',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D2',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D3',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D4',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D9',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'C5',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'C6',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'C7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'C8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'C9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'C10',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'B7',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B8',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B9',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B10',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
],
tableData2:[
[
{
name:'I14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'I19',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'H14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H19',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'H22',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H23',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'H24',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'G14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'G21',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G22',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G23',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G24',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'G25',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
],
[],
[
{
name:'F14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'F15',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'E14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'E20',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E21',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E22',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E23',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'E24',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'D14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D19',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'',
isShow:false,
className:'',
imgEmpty:false,
width:''
},
{
name:'D22',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D23',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D24',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'D25',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'C14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'C15',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
[],
[
{
name:'B14',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B15',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B16',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B17',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B18',
isShow:true,
className:'',
imgEmpty:false,
width:''
},
{
name:'B19',
isShow:true,
className:'',
imgEmpty:false,
width:''
}
],
]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 获取状态
const { changeIndex} = indirectManage()
// 监听编辑状态
Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
console.log('vux',changeIndex.value,newVal)
proxy.isDetailShow=false;
});
// 挂载完
Vue.onMounted(() => {
})
const goDetail=(item)=>{
proxy.allowClickData.map((itemName,index)=>{
if(item.name==itemName){
proxy.isDetailShow=true;
proxy.detailData=item;
}
})
}
return{
goDetail
}
}
}
\ No newline at end of file
... ...
<div v-if="!isDetailShow" class="outlinediv" >
<!-- <span>3号机房平面图</span>-->
<div class="xiaoshanthird-topcabinet">
<table>
<tr v-for="(items,indexs) in tableData">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
</table>
</div>
</div>
<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
... ...