monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 68192c3c3495c23f79fb26eeefb5a1448394c661 1 parent 69b42a4b

机房机柜组件开发

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 @@ @@ -40,6 +40,10 @@
40 40
41 @import "../css/navTabs.css"; 41 @import "../css/navTabs.css";
42 42
  43 +@import "../css/machineroom.css";
  44 +
  45 +@import "../css/Details.css";
  46 +
43 /*故障诊断书*/ 47 /*故障诊断书*/
44 @import "../css/faultDiagnosis.css"; 48 @import "../css/faultDiagnosis.css";
45 49
  1 +
  2 +body{
  3 + background-image: url(/vue3/src/assets/images/machineRoom/img-bg-1.png);
  4 + background-size: 100%;
  5 +
  6 +}
  7 +li{
  8 + list-style: none
  9 +}
  10 +
  11 +.all{
  12 + display:flex;
  13 + justify-content: space-between;
  14 + overflow: hidden;
  15 + width:90%;
  16 + margin:auto;
  17 +}
  18 +.flex-center{
  19 + justify-content: center;
  20 +}
  21 +
  22 +/* 左侧机柜样式 */
  23 +
  24 +.contain{
  25 +
  26 + width:413px;
  27 + height:710px;
  28 + /*margin-left:3%;*/
  29 + /*margin-top:5%;*/
  30 + /* background-color: red; */
  31 + background-image: url(/vue3/src/assets/images/machineRoom/img-no-machine.png);
  32 + background-size: 100%;
  33 + background-repeat: no-repeat;
  34 + position: relative;
  35 +
  36 +}
  37 +
  38 +.contain-server{
  39 + /*position: absolute;*/
  40 + /*width:365px;*/
  41 + /*height:40%;*/
  42 + /*margin-left:18px;*/
  43 + /*bottom:7%; */
  44 + display: flex;
  45 + justify-content: space-between;
  46 + flex-direction:column;
  47 + align-items: center;
  48 + /* background-color: red; */
  49 +
  50 +}
  51 +
  52 +
  53 +.serve{
  54 + width:382px;
  55 + height:61px;
  56 + /*margin-left:-3px;*/
  57 + background-image: url(/vue3/src/assets/images/machineRoom/img-4Uservice.png);
  58 + background-size: 100% 100%;
  59 + background-repeat: no-repeat;
  60 + margin-bottom: 10px;
  61 +}
  62 +.img-serve-8{
  63 + background-image: url(/vue3/src/assets/images/machineRoom/img-8Uservice.png);
  64 + height:127px;
  65 + width:383px;
  66 +}
  67 +.img-serve{
  68 +
  69 + /*width:340px;
  70 + height:50px;
  71 + margin:12px auto;*/
  72 + display: flex;
  73 + justify-content: space-around;
  74 + align-items: center;
  75 + height: 100%;
  76 +
  77 +}
  78 +
  79 +.lamp{
  80 + display:flex;
  81 + width:58%;
  82 +}
  83 +
  84 +.server-flex{
  85 + display: flex;
  86 + justify-content: space-around;
  87 + width:42%;
  88 +}
  89 +.img-lamp{
  90 + /*margin-left:15px;*/
  91 + margin-top:10px
  92 +}
  93 +
  94 +/* 服务器状态图片样式 */
  95 +.state{
  96 + width:35px;
  97 + height:35px;
  98 + margin-top:8px;
  99 + margin-left:4px;
  100 +}
  101 +
  102 +.img-serve-text{
  103 + color:#fff;
  104 + line-height: 50px;
  105 + /*margin-left:10px;*/
  106 +}
  107 +
  108 +
  109 +.img-weblog{
  110 + margin-left:50px;
  111 + margin-top:15px;
  112 + width:30px;
  113 + height:20px;
  114 +
  115 +}
  116 +
  117 +
  118 +
  119 +
  120 +/* 右侧机柜详细信息样式 */
  121 +
  122 +.info{
  123 + width:500px;
  124 + height:700px;
  125 + margin-right:8%;
  126 + /*margin-top:5%;*/
  127 + /* background-color: red; */
  128 + display: flex;
  129 + flex-flow: column;
  130 + justify-content: center;
  131 +
  132 +}
  133 +
  134 +
  135 +.info-top{
  136 + height:340px;
  137 + /*margin-top:-10px;*/
  138 + background-image: url(/vue3/src/assets/images/machineRoom/img-machineInfo-bg.png);
  139 +
  140 +}
  141 +
  142 +.info-bottom{
  143 + height:340px;
  144 + margin-top:20px;
  145 + background-image: url(/vue3/src/assets/images/machineRoom/img-deviceInfo-bg.png);
  146 +}
  147 +.contain{
  148 + display: flex;
  149 + justify-content: center;
  150 + align-items: end;
  151 +}
  152 +.info-contain{
  153 + width:90%;
  154 + display:inline-block;
  155 + height:250px;
  156 + margin-top:60px;
  157 + margin-left: 60px;
  158 +
  159 +}
  160 +
  161 +
  162 +.info-text{
  163 + height:50px;
  164 + font-weight: bolder;
  165 + font-size: 20px;
  166 + color:#fff;
  167 + text-align: left;
  168 + /* background-color: rgb(59, 185, 8); */
  169 +}
  170 +
  171 +.info-text-bot{
  172 + margin-top:-15px;
  173 + height:200px;
  174 + font-size: 16px;
  175 + letter-spacing: 2px;
  176 + color:#fff;
  177 + text-align: left;
  178 + /* background-color: rgb(93, 15, 196); */
  179 +}
  180 +.info-text-bot p{
  181 + text-align: left;
  182 + margin:16px 0;
  183 +}
  184 +.img-serve{
  185 + cursor: pointer;
  186 +}
  187 +.info-bottom{
  188 + /*display:none;*/
  189 +}
  190 +body::-webkit-scrollbar{
  191 + width:15px;
  192 +}
  193 +/* 垂直滚动条的滑动块 */
  194 +body::-webkit-scrollbar-thumb:vertical {
  195 + border-radius: 4px;
  196 + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  197 + background-color:#169db2;
  198 +}
  199 +/*修改滚动条的下面的样式*/
  200 +body::-webkit-scrollbar-track{
  201 + background-color:#05235c;
  202 + -webkit-borderd-radius:2em;
  203 + -moz-borderd-radius:2em;
  204 + borderd-radius:2em;
  205 +}
@@ -108,3 +108,6 @@ @@ -108,3 +108,6 @@
108 .dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__nav{ 108 .dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__nav{
109 border-color: #00ccff; 109 border-color: #00ccff;
110 } 110 }
  111 +.dataCenter-container .el-dialog__body{
  112 + min-height: 700px;
  113 +}
  1 +@charset "utf-8";
  2 +*
  3 +{
  4 + margin:0;
  5 + padding:0;
  6 +}
  7 +html
  8 +{
  9 + width:100%;
  10 + height:100%;
  11 + font-size:14px;
  12 + font-family:Arial, Helvetica, sans-serif;
  13 + -webkit-text-size-adjust:none;
  14 + background-image:url("/vue3/src/assets/images/machineRoom/img-beijing-dp.png");
  15 + background-repeat: no-repeat;
  16 + background-position: center;
  17 +}
  18 +body
  19 +{
  20 + padding:5px;
  21 +}
  22 +
  23 +.outlinediv {
  24 + padding-top: 30px;
  25 + border: 2px solid #0a93be;
  26 + width: 900px;
  27 + height: 600px;
  28 + margin: 0 auto;
  29 + font-size: 16px;
  30 + border-radius: 5px;
  31 + text-align: center;
  32 + color: #bbb;
  33 + position: relative;
  34 + display: list-item;
  35 +
  36 +
  37 +}
  38 +.outlinediv span {
  39 + /*color: rgba(0, 0, 0, 0.89);*/
  40 + color: rgba(255, 255, 255, 0.89);
  41 + line-height: 20px;
  42 + font-size: 14px;
  43 +}
  44 +.outlinediv .xiaoshansecond-topcabinet{
  45 + margin-top: 20px;
  46 + margin-left: 7%;
  47 + padding: 20px;
  48 + width: 80%;
  49 + height:100px;
  50 +
  51 +}
  52 +
  53 +.outlinediv .xiaoshansecond-middlecabinet{
  54 + margin-top: 50px;
  55 + margin-bottom: 50px;
  56 + margin-left: 7%;
  57 + padding: 20px;
  58 + width: 80%;
  59 + height:100px;
  60 +
  61 +}
  62 +.outlinediv .xiaoshansecond-bottomcabinet{
  63 + margin-left: 7%;
  64 + padding: 20px;
  65 + width: 80%;
  66 + height:100px;
  67 +
  68 +}
  69 +.cabinet{
  70 + width:auto;height:auto;max-height:100%;max-width:100%;
  71 +}
  72 +table{
  73 + margin-top: 20px;
  74 + border-collapse:collapse;
  75 +}
  76 +table tr{
  77 + height: 50px;
  78 +}
  79 +tr.sevenempty {
  80 + height: 10px;
  81 +}
  82 +table tr td{
  83 + position: relative;
  84 + max-width: 35px;
  85 +}
  86 +
  87 +table td .cabinetId{
  88 +
  89 + position: absolute;/*绝对定位*/
  90 + top:20px;
  91 + width: 100%;
  92 + bottom: 0px;/*离底下0像素*/
  93 + left: 0px;/*离左边0像素*/
  94 + text-align: center;
  95 +
  96 + font-size: 12px;
  97 +
  98 + color: white;
  99 +}
  100 +.outlinediv .xiaoshanthird-topcabinet{
  101 + margin-left:22%;
  102 + padding: 20px;
  103 + width: 80%;
  104 +}
  105 +.outlinediv .xiaoshanseven-leftcabinet{
  106 + margin-left:1%;
  107 + width: 40%;
  108 +}
  109 +.outlinediv .xiaoshanseven-rightcabinet{
  110 + margin-left: 5px;
  111 + width: 40%;
  112 +}
  113 +.outlinediv .xiaoshanseven-middlecabinet{
  114 + margin-top: 20px;
  115 + padding-top: 30%;
  116 + border: 2px solid #111D1A;
  117 + width:12% ;
  118 + height: 255px;
  119 + text-align: center;
  120 +}
  121 +.outlinediv .huzhouone-topcabinet{
  122 + margin-left:10%;
  123 + width: 90%;
  124 +}
  125 +tr.zaibeione{
  126 + height: 90px;
  127 +}
  128 +.zaibei.cabinetId{
  129 + position: absolute;/*绝对定位*/
  130 + top:10px;
  131 + width: 100%;
  132 + bottom: 0px;/*离底下0像素*/
  133 + left: 0px;/*离左边0像素*/
  134 + text-align: center;
  135 +
  136 + font-size: 8px;
  137 +
  138 + color: white;
  139 +}
  140 +.cursorClass{
  141 + cursor: pointer;
  142 +}
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 <div class="room-html"> 21 <div class="room-html">
22 <el-row> 22 <el-row>
23 <el-col class="video-item" :span="24" > 23 <el-col class="video-item" :span="24" >
24 - <MachineRoom v-if="src" :src="src"></MachineRoom> 24 + <MachineRoom v-if="src" :src="src" ref="machineRoom" ></MachineRoom>
25 </el-col> 25 </el-col>
26 </el-row> 26 </el-row>
27 </div> 27 </div>
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const changeIndex = Vue.toRef(store.state, 'changeIndex')
  7 +
  8 + return {
  9 + changeIndex
  10 + }
  11 +}
1 export default { 12 export default {
2 name: 'machineRoom', 13 name: 'machineRoom',
3 template: '', 14 template: '',
@@ -19,20 +30,14 @@ export default { @@ -19,20 +30,14 @@ export default {
19 30
20 } 31 }
21 }, 32 },
22 - watch:{  
23 - changeIndex(newValue, oldValue) {  
24 - console.log("changeIndex",newValue)  
25 - }  
26 -  
27 - },  
28 -  
29 setup(props, {attrs, slots, emit}) { 33 setup(props, {attrs, slots, emit}) {
30 const {proxy} = Vue.getCurrentInstance(); 34 const {proxy} = Vue.getCurrentInstance();
31 proxy.htmlName=Vue.ref(); 35 proxy.htmlName=Vue.ref();
32 proxy.commandVal=Vue.ref() 36 proxy.commandVal=Vue.ref()
33 proxy.commandName=Vue.ref(); 37 proxy.commandName=Vue.ref();
34 proxy.src=Vue.ref(); 38 proxy.src=Vue.ref();
35 - 39 + // 获取状态
  40 + const { changeIndex} = indirectManage()
36 41
37 // 挂载完 42 // 挂载完
38 Vue.onMounted(() => { 43 Vue.onMounted(() => {
@@ -50,8 +55,9 @@ export default { @@ -50,8 +55,9 @@ export default {
50 proxy.commandVal=item.val; 55 proxy.commandVal=item.val;
51 } 56 }
52 }) 57 })
53 - proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex  
54 - console.log("htmlName",proxy.htmlName,proxy.src) 58 + // proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
  59 + //根据htmlName确定引入的机房
  60 + proxy.src=proxy.htmlName
55 61
56 } 62 }
57 const handleCommand=(command,event)=>{ 63 const handleCommand=(command,event)=>{
@@ -59,14 +65,12 @@ export default { @@ -59,14 +65,12 @@ export default {
59 proxy.commandVal=command.props.name; 65 proxy.commandVal=command.props.name;
60 66
61 proxy.getMachine(proxy.commandVal) 67 proxy.getMachine(proxy.commandVal)
62 -  
63 - // proxy.innerVisible=true; 68 + changeIndex.value=proxy.changeIndex;
64 } 69 }
65 70
66 return{ 71 return{
67 getMachine, 72 getMachine,
68 handleCommand 73 handleCommand
69 -  
70 } 74 }
71 } 75 }
72 } 76 }
  1 +<div v-if="!isDetailShow" class="outlinediv" style="height: 666px">
  2 + <!-- <span>湖州灾备一机房平面图</span>-->
  3 + <div class="huzhouone-topcabinet">
  4 + <table>
  5 + <tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
  6 + <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
  7 + <img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
  8 + <span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
  9 + </td>
  10 + </tr>
  11 + <!-- <tr>
  12 + <td><img></td>
  13 + <td><img></td>
  14 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 4A</span></a></td>
  15 + <td><img></td>
  16 + <td><img></td>
  17 + <td><img ></td>
  18 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-7</span></a></td>
  19 + <td><img/></td>
  20 + <td><img/></td>
  21 + <td><img ></td>
  22 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FA-6</span></a></td>
  23 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-5</span></a></td>
  24 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FA-4</span></a></td>
  25 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-3</span></a></td>
  26 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-2</span></a></td>
  27 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-1</span></a></td>
  28 + <td><img/></td>
  29 + <td><img/></td>
  30 + <td><img ></td>
  31 + <td><img></td>
  32 + <td><img></td>
  33 + <td><img></td>
  34 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-3</span></a></td>
  35 + </tr>
  36 + <tr>
  37 + <td><img></td>
  38 + <td><img></td>
  39 + <td><img ></td>
  40 + <td><img></td>
  41 + <td><img></td>
  42 + <td><img ></td>
  43 + <td><img ></td>
  44 + <td><img/></td>
  45 + <td><img/></td>
  46 + <td><img ></td>
  47 + <td><img ></td>
  48 + <td><img></td>
  49 + <td><img></td>
  50 + <td><img></td>
  51 + <td><img ></td>
  52 + <td><img></td>
  53 + <td><img/></td>
  54 + <td><img/></td>
  55 + <td><img ></td>
  56 + <td><img></td>
  57 + <td><img></td>
  58 + <td><img></td>
  59 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
  60 + </tr>
  61 + <tr>
  62 + <td><img></td>
  63 + <td><img></td>
  64 + <td><img ></td>
  65 + <td><img></td>
  66 + <td><img></td>
  67 + <td><img ></td>
  68 + <td><img ></td>
  69 + <td><img/></td>
  70 + <td><img/></td>
  71 + <td><img ></td>
  72 + <td><img ></td>
  73 + <td><img></td>
  74 + <td><img></td>
  75 + <td><img></td>
  76 + <td><img ></td>
  77 + <td><img></td>
  78 + <td><img/></td>
  79 + <td><img/></td>
  80 + <td><img ></td>
  81 + <td><img></td>
  82 + <td><img></td>
  83 + <td><img></td>
  84 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-4</span></a></td>
  85 + </tr>
  86 + <tr>
  87 + <td><img></td>
  88 + <td><img></td>
  89 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 3A</span></a></td>
  90 + <td><img></td>
  91 + <td><img></td>
  92 + <td><img ></td>
  93 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-7</span></a></td>
  94 + <td><img/></td>
  95 + <td><img/></td>
  96 + <td><img ></td>
  97 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-6</span></a></td>
  98 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-5</span></a></td>
  99 + <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>
  100 + <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>
  101 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-2</span></a></td>
  102 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-1</span></a></td>
  103 + <td><img/></td>
  104 + <td><img/></td>
  105 + <td><img ></td>
  106 + <td><img></td>
  107 + <td><img></td>
  108 + <td><img></td>
  109 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
  110 + </tr>
  111 + <tr class="zaibeione"></tr>
  112 + <tr>
  113 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-11</span></a></td>
  114 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-10</span></a></td>
  115 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 1A</span></a></td>
  116 + <td width="10px"></td>
  117 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">EMC1</span></a></td>
  118 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">EMC2</span></a></td>
  119 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">EMC3</span></a></td>
  120 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-7</span></a></td>
  121 + <td><img></td>
  122 + <td><img ></td>
  123 + <td><img></td>
  124 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">小型机595A</span></a></td>
  125 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机595B</span></a></td>
  126 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机3</span></a></td>
  127 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-2</span></a></td>
  128 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-1</span></a></td>
  129 + <td><img></td>
  130 +
  131 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-1</span></a></td>
  132 + </tr>
  133 + <tr>
  134 + <td><img></td>
  135 + <td><img></td>
  136 + <td><img ></td>
  137 + <td><img></td>
  138 + <td><img></td>
  139 + <td><img ></td>
  140 + <td><img ></td>
  141 + <td><img/></td>
  142 + <td><img/></td>
  143 + <td><img ></td>
  144 + <td><img ></td>
  145 + <td><img></td>
  146 + <td><img></td>
  147 + <td><img></td>
  148 + <td><img ></td>
  149 + <td><img></td>
  150 + <td><img/></td>
  151 + <td><img/></td>
  152 + <td><img ></td>
  153 + <td><img></td>
  154 + <td><img></td>
  155 + <td><img></td>
  156 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
  157 + </tr>
  158 + <tr>
  159 + <td><img></td>
  160 + <td><img></td>
  161 + <td><img ></td>
  162 + <td><img></td>
  163 + <td><img></td>
  164 + <td><img ></td>
  165 + <td><img ></td>
  166 + <td><img/></td>
  167 + <td><img/></td>
  168 + <td><img ></td>
  169 + <td><img ></td>
  170 + <td><img></td>
  171 + <td><img></td>
  172 + <td><img></td>
  173 + <td><img ></td>
  174 + <td><img></td>
  175 + <td><img/></td>
  176 + <td><img/></td>
  177 + <td><img ></td>
  178 + <td><img></td>
  179 + <td><img></td>
  180 + <td><img></td>
  181 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-2</span></a></td>
  182 + </tr>
  183 + <tr>
  184 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-11</span></a></td>
  185 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-10</span></a></td>
  186 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 2B</span></a></td>
  187 + <td style="width: 15px"></td>
  188 + <td><img></td>
  189 + <td><img ></td>
  190 + <td><img></td>
  191 + <td><img></td>
  192 + <td><img></td>
  193 + <td><img ></td>
  194 + <td><img></td>
  195 + <td><img/></td>
  196 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-4</span></a></td>
  197 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">小型机570-3</span></a></td>
  198 + <td><img ></td>
  199 + <td><img></td>
  200 + <td><img></td>
  201 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-1</span></a></td>
  202 + <td><img ></td>
  203 + <td><img></td>
  204 + <td><img></td>
  205 + <td><img></td>
  206 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
  207 + </tr>
  208 + <tr>
  209 + <td><img></td>
  210 + <td><img></td>
  211 + <td><img ></td>
  212 + <td><img></td>
  213 + <td><img></td>
  214 + <td><img ></td>
  215 + <td><img ></td>
  216 + <td><img/></td>
  217 + <td><img/></td>
  218 + <td><img ></td>
  219 + <td><img ></td>
  220 + <td><img></td>
  221 + <td><img></td>
  222 + <td><img></td>
  223 + <td><img ></td>
  224 + <td><img></td>
  225 + <td><img/></td>
  226 + <td><img/></td>
  227 + <td><img ></td>
  228 + <td><img></td>
  229 + <td><img></td>
  230 + <td><img></td>
  231 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-1</span></a></td>
  232 + </tr>-->
  233 + </table>
  234 + </div>
  235 +</div>
  236 +<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const changeIndex = Vue.toRef(store.state, 'changeIndex')
  7 +
  8 + return {
  9 + changeIndex
  10 + }
  11 +}
  12 +export default {
  13 + name: 'huzhouOne',
  14 + template: '',
  15 + components: {
  16 + 'MachineRoomDetail': Vue.defineAsyncComponent(
  17 + () => myImport('views/commonComponents/machineRoomDetail/index')
  18 + ),
  19 + },
  20 + props:['src'],
  21 + data(){
  22 + return {
  23 + domainName:sessionStorage.getItem('domainName'),
  24 + accessToken:localStorage.getItem('access_token'),
  25 + isDetailShow:false,//是否展示详情页
  26 + detailData:'',//详情数据
  27 + htmlName:'huzhouzaibeione',
  28 + machineData:this.src,
  29 + allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
  30 + tableData:[
  31 + [
  32 +
  33 + {
  34 + name:'',
  35 + isShow:false,
  36 + className:'',
  37 + width:''
  38 + },
  39 + {
  40 + name:'',
  41 + isShow:false,
  42 + className:'',
  43 + width:''
  44 + },
  45 + {
  46 + name:'PDA 4A',
  47 + isShow:true,
  48 + className:'',
  49 + width:''
  50 + },
  51 + {
  52 + name:'',
  53 + isShow:false,
  54 + className:'',
  55 + width:''
  56 + },
  57 + {
  58 + name:'',
  59 + isShow:false,
  60 + className:'',
  61 + width:''
  62 + },
  63 + {
  64 + name:'',
  65 + isShow:false,
  66 + className:'',
  67 + width:''
  68 + },
  69 + {
  70 + name:'FA-7',
  71 + isShow:true,
  72 + className:'',
  73 + width:''
  74 + },
  75 + {
  76 + name:'',
  77 + isShow:false,
  78 + className:'',
  79 + width:''
  80 + },
  81 + {
  82 + name:'',
  83 + isShow:false,
  84 + className:'',
  85 + width:''
  86 + },
  87 + {
  88 + name:'',
  89 + isShow:false,
  90 + className:'',
  91 + width:''
  92 + },
  93 + {
  94 + name:'FA-6',
  95 +
  96 + isShow:true,
  97 + className:'',
  98 + width:''
  99 + },
  100 + {
  101 + name:'FA-5',
  102 +
  103 + isShow:true,
  104 + className:'',
  105 + width:''
  106 + },
  107 + {
  108 + name:'FA-4',
  109 +
  110 + isShow:true,
  111 + className:'',
  112 + width:''
  113 + },
  114 + {
  115 + name:'FA-3',
  116 +
  117 + isShow:true,
  118 + className:'',
  119 + width:''
  120 + },
  121 + {
  122 + name:'FA-2',
  123 +
  124 + isShow:true,
  125 + className:'',
  126 + width:''
  127 + },
  128 + {
  129 + name:'FA-1',
  130 +
  131 + isShow:true,
  132 + className:'',
  133 + width:''
  134 + },
  135 + {
  136 + name:'',
  137 +
  138 + isShow:false,
  139 + className:'',
  140 + width:''
  141 + },
  142 + {
  143 + name:'',
  144 +
  145 + isShow:false,
  146 + className:'',
  147 + width:''
  148 + },
  149 + {
  150 + name:'',
  151 +
  152 + isShow:false,
  153 + className:'',
  154 + width:''
  155 + },
  156 + {
  157 + name:'',
  158 +
  159 + isShow:false,
  160 + className:'',
  161 + width:''
  162 + },
  163 + {
  164 + name:'',
  165 +
  166 + isShow:false,
  167 + className:'',
  168 + width:''
  169 + },
  170 + {
  171 + name:'',
  172 +
  173 + isShow:false,
  174 + className:'',
  175 + width:''
  176 + },
  177 + {
  178 + name:'AC-3',
  179 +
  180 + isShow:true,
  181 + className:'',
  182 + width:''
  183 + },
  184 +
  185 +
  186 + ],
  187 + [
  188 +
  189 + {
  190 + name:'',
  191 +
  192 + isShow:false,
  193 + className:'',
  194 + width:''
  195 + },
  196 + {
  197 + name:'',
  198 +
  199 + isShow:false,
  200 + className:'',
  201 + width:''
  202 + },
  203 + {
  204 + name:'',
  205 +
  206 + isShow:false,
  207 + className:'',
  208 + width:''
  209 + },
  210 + {
  211 + name:'',
  212 +
  213 + isShow:false,
  214 + className:'',
  215 + width:''
  216 + },
  217 + {
  218 + name:'',
  219 +
  220 + isShow:false,
  221 + className:'',
  222 + width:''
  223 + },
  224 + {
  225 + name:'',
  226 +
  227 + isShow:false,
  228 + className:'',
  229 + width:''
  230 + },
  231 + {
  232 + name:'',
  233 +
  234 + isShow:false,
  235 + className:'',
  236 + width:''
  237 + },
  238 + {
  239 + name:'',
  240 +
  241 + isShow:false,
  242 + className:'',
  243 + width:''
  244 + },
  245 + {
  246 + name:'',
  247 +
  248 + isShow:false,
  249 + className:'',
  250 + width:''
  251 + },
  252 + {
  253 + name:'',
  254 +
  255 + isShow:false,
  256 + className:'',
  257 + width:''
  258 + },
  259 + {
  260 + name:'',
  261 +
  262 + isShow:false,
  263 + className:'',
  264 + width:''
  265 + },
  266 + {
  267 + name:'',
  268 +
  269 + isShow:false,
  270 + className:'',
  271 + width:''
  272 + },
  273 + {
  274 + name:'',
  275 +
  276 + isShow:false,
  277 + className:'',
  278 + width:''
  279 + },
  280 + {
  281 + name:'',
  282 +
  283 + isShow:false,
  284 + className:'',
  285 + width:''
  286 + },
  287 + {
  288 + name:'',
  289 +
  290 + isShow:false,
  291 + className:'',
  292 + width:''
  293 + },
  294 + {
  295 + name:'',
  296 +
  297 + isShow:false,
  298 + className:'',
  299 + width:''
  300 + },
  301 + {
  302 + name:'',
  303 +
  304 + isShow:false,
  305 + className:'',
  306 + width:''
  307 + },
  308 + {
  309 + name:'',
  310 +
  311 + isShow:false,
  312 + className:'',
  313 + width:''
  314 + },
  315 + {
  316 + name:'',
  317 +
  318 + isShow:false,
  319 + className:'',
  320 + width:''
  321 + },
  322 + {
  323 + name:'',
  324 +
  325 + isShow:false,
  326 + className:'',
  327 + width:''
  328 + },
  329 + {
  330 + name:'',
  331 +
  332 + isShow:false,
  333 + className:'',
  334 + width:''
  335 + },
  336 + {
  337 + name:'',
  338 +
  339 + isShow:false,
  340 + className:'',
  341 + width:''
  342 + },
  343 + {
  344 + name:'',
  345 +
  346 + isShow:true,
  347 + className:'',
  348 + width:''
  349 + },
  350 +
  351 +
  352 + ],
  353 + [
  354 +
  355 + {
  356 + name:'',
  357 +
  358 + isShow:false,
  359 + className:'',
  360 + width:''
  361 + },
  362 + {
  363 + name:'',
  364 +
  365 + isShow:false,
  366 + className:'',
  367 + width:''
  368 + },
  369 + {
  370 + name:'',
  371 +
  372 + isShow:false,
  373 + className:'',
  374 + width:''
  375 + },
  376 + {
  377 + name:'',
  378 +
  379 + isShow:false,
  380 + className:'',
  381 + width:''
  382 + },
  383 + {
  384 + name:'',
  385 +
  386 + isShow:false,
  387 + className:'',
  388 + width:''
  389 + },
  390 + {
  391 + name:'',
  392 +
  393 + isShow:false,
  394 + className:'',
  395 + width:''
  396 + },
  397 + {
  398 + name:'',
  399 +
  400 + isShow:false,
  401 + className:'',
  402 + width:''
  403 + },
  404 + {
  405 + name:'',
  406 +
  407 + isShow:false,
  408 + className:'',
  409 + width:''
  410 + },
  411 + {
  412 + name:'',
  413 +
  414 + isShow:false,
  415 + className:'',
  416 + width:''
  417 + },
  418 + {
  419 + name:'',
  420 +
  421 + isShow:false,
  422 + className:'',
  423 + width:''
  424 + },
  425 + {
  426 + name:'',
  427 +
  428 + isShow:false,
  429 + className:'',
  430 + width:''
  431 + },
  432 + {
  433 + name:'',
  434 +
  435 + isShow:false,
  436 + className:'',
  437 + width:''
  438 + },
  439 + {
  440 + name:'',
  441 +
  442 + isShow:false,
  443 + className:'',
  444 + width:''
  445 + },
  446 + {
  447 + name:'',
  448 +
  449 + isShow:false,
  450 + className:'',
  451 + width:''
  452 + },
  453 + {
  454 + name:'',
  455 +
  456 + isShow:false,
  457 + className:'',
  458 + width:''
  459 + },
  460 + {
  461 + name:'',
  462 +
  463 + isShow:false,
  464 + className:'',
  465 + width:''
  466 + },
  467 + {
  468 + name:'',
  469 +
  470 + isShow:false,
  471 + className:'',
  472 + width:''
  473 + },
  474 + {
  475 + name:'',
  476 +
  477 + isShow:false,
  478 + className:'',
  479 + width:''
  480 + },
  481 + {
  482 + name:'',
  483 +
  484 + isShow:false,
  485 + className:'',
  486 + width:''
  487 + },
  488 + {
  489 + name:'',
  490 +
  491 + isShow:false,
  492 + className:'',
  493 + width:''
  494 + },
  495 + {
  496 + name:'',
  497 +
  498 + isShow:false,
  499 + className:'',
  500 + width:''
  501 + },
  502 + {
  503 + name:'',
  504 +
  505 + isShow:false,
  506 + className:'',
  507 + width:''
  508 + },
  509 + {
  510 + name:'AC-4',
  511 +
  512 + isShow:true,
  513 + className:'',
  514 + width:''
  515 + },
  516 +
  517 +
  518 + ],
  519 + [
  520 +
  521 + {
  522 + name:'',
  523 +
  524 + isShow:false,
  525 + className:'',
  526 + width:''
  527 + },
  528 + {
  529 + name:'',
  530 +
  531 + isShow:false,
  532 + className:'',
  533 + width:''
  534 + },
  535 + {
  536 + name:'PDA 3A',
  537 +
  538 + isShow:true,
  539 + className:'',
  540 + width:''
  541 + },
  542 + {
  543 + name:'',
  544 +
  545 + isShow:false,
  546 + className:'',
  547 + width:''
  548 + },
  549 + {
  550 + name:'',
  551 +
  552 + isShow:false,
  553 + className:'',
  554 + width:''
  555 + },
  556 + {
  557 + name:'',
  558 +
  559 + isShow:false,
  560 + className:'',
  561 + width:''
  562 + },
  563 + {
  564 + name:'FB-7',
  565 +
  566 + isShow:true,
  567 + className:'',
  568 + width:''
  569 + },
  570 + {
  571 + name:'',
  572 +
  573 + isShow:false,
  574 + className:'',
  575 + width:''
  576 + },
  577 + {
  578 + name:'',
  579 +
  580 + isShow:false,
  581 + className:'',
  582 + width:''
  583 + },
  584 + {
  585 + name:'',
  586 +
  587 + isShow:false,
  588 + className:'',
  589 + width:''
  590 + },
  591 + {
  592 + name:'FB-6',
  593 +
  594 + isShow:true,
  595 + className:'',
  596 + width:''
  597 + },
  598 + {
  599 + name:'FB-5',
  600 +
  601 + isShow:true,
  602 + className:'',
  603 + width:''
  604 + },
  605 + {
  606 + name:'FB-4',
  607 +
  608 + isShow:true,
  609 + className:'',
  610 + width:''
  611 + },
  612 + {
  613 + name:'FB-3',
  614 +
  615 + isShow:true,
  616 + className:'',
  617 + width:''
  618 + },
  619 + {
  620 + name:'FB-2',
  621 +
  622 + isShow:true,
  623 + className:'',
  624 + width:''
  625 + },
  626 + {
  627 + name:'FB-1',
  628 +
  629 + isShow:true,
  630 + className:'',
  631 + width:''
  632 + },
  633 + {
  634 + name:'',
  635 +
  636 + isShow:false,
  637 + className:'',
  638 + width:''
  639 + },
  640 + {
  641 + name:'',
  642 +
  643 + isShow:false,
  644 + className:'',
  645 + width:''
  646 + },
  647 + {
  648 + name:'',
  649 +
  650 + isShow:false,
  651 + className:'',
  652 + width:''
  653 + },
  654 + {
  655 + name:'',
  656 +
  657 + isShow:false,
  658 + className:'',
  659 + width:''
  660 + },
  661 + {
  662 + name:'',
  663 +
  664 + isShow:false,
  665 + className:'',
  666 + width:''
  667 + },
  668 + {
  669 + name:'',
  670 +
  671 + isShow:false,
  672 + className:'',
  673 + width:''
  674 + },
  675 + {
  676 + name:'',
  677 +
  678 + isShow:true,
  679 + className:'',
  680 + width:''
  681 + },
  682 +
  683 +
  684 + ],
  685 + [
  686 +
  687 + ],
  688 + [
  689 +
  690 + {
  691 + name:'XA-11',
  692 +
  693 + isShow:true,
  694 + className:'',
  695 + width:''
  696 + },
  697 + {
  698 + name:'XA-10',
  699 +
  700 + isShow:true,
  701 + className:'',
  702 + width:''
  703 + },
  704 + {
  705 + name:'PDA 1A',
  706 +
  707 + isShow:true,
  708 + className:'',
  709 + width:''
  710 + },
  711 + {
  712 + name:'',
  713 +
  714 + isShow:false,
  715 + className:'',
  716 + width:'10px'
  717 + },
  718 + {
  719 + name:'EMC1',
  720 +
  721 + isShow:true,
  722 + className:'',
  723 + width:''
  724 + },
  725 + {
  726 + name:'EMC2',
  727 +
  728 + isShow:true,
  729 + className:'',
  730 + width:''
  731 + },
  732 + {
  733 + name:'EMC3',
  734 +
  735 + isShow:true,
  736 + className:'',
  737 + width:''
  738 + },
  739 + {
  740 + name:'XA-7',
  741 +
  742 + isShow:true,
  743 + className:'',
  744 + width:''
  745 + },
  746 + {
  747 + name:'',
  748 +
  749 + isShow:false,
  750 + className:'',
  751 + width:''
  752 + },
  753 + {
  754 + name:'',
  755 +
  756 + isShow:false,
  757 + className:'',
  758 + width:''
  759 + },
  760 + {
  761 + name:'',
  762 +
  763 + isShow:false,
  764 + className:'',
  765 + width:''
  766 + },
  767 + {
  768 + name:'小型机595A',
  769 +
  770 + isShow:true,
  771 + className:'',
  772 + width:''
  773 + },
  774 + {
  775 + name:'小型机595B',
  776 +
  777 + isShow:true,
  778 + className:'',
  779 + width:''
  780 + },
  781 + {
  782 + name:'小型机3',
  783 +
  784 + isShow:true,
  785 + className:'',
  786 + width:''
  787 + },
  788 + {
  789 + name:'小型机570-2',
  790 +
  791 + isShow:true,
  792 + className:'',
  793 + width:''
  794 + },
  795 + {
  796 + name:'小型机570-1',
  797 +
  798 + isShow:true,
  799 + className:'',
  800 + width:''
  801 + },
  802 + {
  803 + name:'',
  804 +
  805 + isShow:false,
  806 + className:'',
  807 + width:''
  808 + },
  809 + {
  810 + name:'XA-1',
  811 +
  812 + isShow:true,
  813 + className:'',
  814 + width:''
  815 + }
  816 + ],
  817 + [
  818 +
  819 + {
  820 + name:'',
  821 +
  822 + isShow:false,
  823 + className:'',
  824 + width:''
  825 + },
  826 + {
  827 + name:'',
  828 +
  829 + isShow:false,
  830 + className:'',
  831 + width:''
  832 + },
  833 + {
  834 + name:'',
  835 +
  836 + isShow:false,
  837 + className:'',
  838 + width:''
  839 + },
  840 + {
  841 + name:'',
  842 +
  843 + isShow:false,
  844 + className:'',
  845 + width:''
  846 + },
  847 + {
  848 + name:'',
  849 +
  850 + isShow:false,
  851 + className:'',
  852 + width:''
  853 + },
  854 + {
  855 + name:'',
  856 +
  857 + isShow:false,
  858 + className:'',
  859 + width:''
  860 + },
  861 + {
  862 + name:'',
  863 +
  864 + isShow:false,
  865 + className:'',
  866 + width:''
  867 + },
  868 + {
  869 + name:'',
  870 +
  871 + isShow:false,
  872 + className:'',
  873 + width:''
  874 + },
  875 + {
  876 + name:'',
  877 +
  878 + isShow:false,
  879 + className:'',
  880 + width:''
  881 + },
  882 + {
  883 + name:'',
  884 +
  885 + isShow:false,
  886 + className:'',
  887 + width:''
  888 + },
  889 + {
  890 + name:'',
  891 +
  892 + isShow:false,
  893 + className:'',
  894 + width:''
  895 + },
  896 + {
  897 + name:'',
  898 +
  899 + isShow:false,
  900 + className:'',
  901 + width:''
  902 + },
  903 + {
  904 + name:'',
  905 +
  906 + isShow:false,
  907 + className:'',
  908 + width:''
  909 + },
  910 + {
  911 + name:'',
  912 +
  913 + isShow:false,
  914 + className:'',
  915 + width:''
  916 + },
  917 + {
  918 + name:'',
  919 +
  920 + isShow:false,
  921 + className:'',
  922 + width:''
  923 + },
  924 + {
  925 + name:'',
  926 +
  927 + isShow:false,
  928 + className:'',
  929 + width:''
  930 + },
  931 + {
  932 + name:'',
  933 +
  934 + isShow:false,
  935 + className:'',
  936 + width:''
  937 + },
  938 + {
  939 + name:'',
  940 +
  941 + isShow:false,
  942 + className:'',
  943 + width:''
  944 + },
  945 + {
  946 + name:'',
  947 +
  948 + isShow:false,
  949 + className:'',
  950 + width:''
  951 + },
  952 + {
  953 + name:'',
  954 +
  955 + isShow:false,
  956 + className:'',
  957 + width:''
  958 + },
  959 + {
  960 + name:'',
  961 +
  962 + isShow:false,
  963 + className:'',
  964 + width:''
  965 + },
  966 + {
  967 + name:'',
  968 +
  969 + isShow:false,
  970 + className:'',
  971 + width:''
  972 + },
  973 + {
  974 + name:'',
  975 +
  976 + isShow:true,
  977 + className:'',
  978 + width:''
  979 + },
  980 +
  981 +
  982 + ],
  983 + [
  984 +
  985 + {
  986 + name:'',
  987 +
  988 + isShow:false,
  989 + className:'',
  990 + width:''
  991 + },
  992 + {
  993 + name:'',
  994 +
  995 + isShow:false,
  996 + className:'',
  997 + width:''
  998 + },
  999 + {
  1000 + name:'',
  1001 +
  1002 + isShow:false,
  1003 + className:'',
  1004 + width:''
  1005 + },
  1006 + {
  1007 + name:'',
  1008 +
  1009 + isShow:false,
  1010 + className:'',
  1011 + width:''
  1012 + },
  1013 + {
  1014 + name:'',
  1015 +
  1016 + isShow:false,
  1017 + className:'',
  1018 + width:''
  1019 + },
  1020 + {
  1021 + name:'',
  1022 +
  1023 + isShow:false,
  1024 + className:'',
  1025 + width:''
  1026 + },
  1027 + {
  1028 + name:'',
  1029 +
  1030 + isShow:false,
  1031 + className:'',
  1032 + width:''
  1033 + },
  1034 + {
  1035 + name:'',
  1036 +
  1037 + isShow:false,
  1038 + className:'',
  1039 + width:''
  1040 + },
  1041 + {
  1042 + name:'',
  1043 +
  1044 + isShow:false,
  1045 + className:'',
  1046 + width:''
  1047 + },
  1048 + {
  1049 + name:'',
  1050 +
  1051 + isShow:false,
  1052 + className:'',
  1053 + width:''
  1054 + },
  1055 + {
  1056 + name:'',
  1057 +
  1058 + isShow:false,
  1059 + className:'',
  1060 + width:''
  1061 + },
  1062 + {
  1063 + name:'',
  1064 +
  1065 + isShow:false,
  1066 + className:'',
  1067 + width:''
  1068 + },
  1069 + {
  1070 + name:'',
  1071 +
  1072 + isShow:false,
  1073 + className:'',
  1074 + width:''
  1075 + },
  1076 + {
  1077 + name:'',
  1078 +
  1079 + isShow:false,
  1080 + className:'',
  1081 + width:''
  1082 + },
  1083 + {
  1084 + name:'',
  1085 +
  1086 + isShow:false,
  1087 + className:'',
  1088 + width:''
  1089 + },
  1090 + {
  1091 + name:'',
  1092 +
  1093 + isShow:false,
  1094 + className:'',
  1095 + width:''
  1096 + },
  1097 + {
  1098 + name:'',
  1099 +
  1100 + isShow:false,
  1101 + className:'',
  1102 + width:''
  1103 + },
  1104 + {
  1105 + name:'',
  1106 +
  1107 + isShow:false,
  1108 + className:'',
  1109 + width:''
  1110 + },
  1111 + {
  1112 + name:'',
  1113 +
  1114 + isShow:false,
  1115 + className:'',
  1116 + width:''
  1117 + },
  1118 + {
  1119 + name:'',
  1120 +
  1121 + isShow:false,
  1122 + className:'',
  1123 + width:''
  1124 + },
  1125 + {
  1126 + name:'',
  1127 +
  1128 + isShow:false,
  1129 + className:'',
  1130 + width:''
  1131 + },
  1132 + {
  1133 + name:'',
  1134 +
  1135 + isShow:false,
  1136 + className:'',
  1137 + width:''
  1138 + },
  1139 + {
  1140 + name:'AC-2',
  1141 +
  1142 + isShow:true,
  1143 + className:'',
  1144 + width:''
  1145 + },
  1146 + ],
  1147 + [
  1148 +
  1149 + {
  1150 + name:'XB-11',
  1151 +
  1152 + isShow:true,
  1153 + className:'',
  1154 + width:''
  1155 + },
  1156 + {
  1157 + name:'XB-10',
  1158 +
  1159 + isShow:true,
  1160 + className:'',
  1161 + width:''
  1162 + },
  1163 + {
  1164 + name:'PDA 2B',
  1165 +
  1166 + isShow:true,
  1167 + className:'',
  1168 + width:''
  1169 + },
  1170 + {
  1171 + name:'',
  1172 +
  1173 + isShow:false,
  1174 + className:'',
  1175 + width:'15px'
  1176 + },
  1177 + {
  1178 + name:'',
  1179 +
  1180 + isShow:false,
  1181 + className:'',
  1182 + width:''
  1183 + },
  1184 + {
  1185 + name:'',
  1186 +
  1187 + isShow:false,
  1188 + className:'',
  1189 + width:''
  1190 + },
  1191 + {
  1192 + name:'',
  1193 +
  1194 + isShow:false,
  1195 + className:'',
  1196 + width:''
  1197 + },
  1198 + {
  1199 + name:'',
  1200 +
  1201 + isShow:false,
  1202 + className:'',
  1203 + width:''
  1204 + },
  1205 + {
  1206 + name:'',
  1207 +
  1208 + isShow:false,
  1209 + className:'',
  1210 + width:''
  1211 + },
  1212 + {
  1213 + name:'',
  1214 +
  1215 + isShow:false,
  1216 + className:'',
  1217 + width:''
  1218 + },
  1219 + {
  1220 + name:'',
  1221 +
  1222 + isShow:false,
  1223 + className:'',
  1224 + width:''
  1225 + },
  1226 + {
  1227 + name:'',
  1228 +
  1229 + isShow:false,
  1230 + className:'',
  1231 + width:''
  1232 + },
  1233 + {
  1234 + name:'小型机570-4',
  1235 +
  1236 + isShow:true,
  1237 + className:'',
  1238 + width:''
  1239 + },
  1240 + {
  1241 + name:'小型机570-3',
  1242 +
  1243 + isShow:true,
  1244 + className:'',
  1245 + width:''
  1246 + },
  1247 + {
  1248 + name:'',
  1249 +
  1250 + isShow:false,
  1251 + className:'',
  1252 + width:''
  1253 + },
  1254 + {
  1255 + name:'',
  1256 +
  1257 + isShow:false,
  1258 + className:'',
  1259 + width:''
  1260 + },
  1261 + {
  1262 + name:'',
  1263 +
  1264 + isShow:false,
  1265 + className:'',
  1266 + width:''
  1267 + },
  1268 + {
  1269 + name:'XB-1',
  1270 +
  1271 + isShow:true,
  1272 + className:'',
  1273 + width:''
  1274 + },
  1275 + {
  1276 + name:'',
  1277 +
  1278 + isShow:false,
  1279 + className:'',
  1280 + width:''
  1281 + },
  1282 + {
  1283 + name:'',
  1284 +
  1285 + isShow:false,
  1286 + className:'',
  1287 + width:''
  1288 + },
  1289 + {
  1290 + name:'',
  1291 +
  1292 + isShow:false,
  1293 + className:'',
  1294 + width:''
  1295 + },
  1296 + {
  1297 + name:'',
  1298 +
  1299 + isShow:false,
  1300 + className:'',
  1301 + width:''
  1302 + },
  1303 + {
  1304 + name:'',
  1305 +
  1306 + isShow:true,
  1307 + className:'',
  1308 + width:''
  1309 + },
  1310 +
  1311 +
  1312 + ],
  1313 + [
  1314 +
  1315 + {
  1316 + name:'',
  1317 +
  1318 + isShow:false,
  1319 + className:'',
  1320 + width:''
  1321 + },
  1322 + {
  1323 + name:'',
  1324 +
  1325 + isShow:false,
  1326 + className:'',
  1327 + width:''
  1328 + },
  1329 + {
  1330 + name:'',
  1331 +
  1332 + isShow:false,
  1333 + className:'',
  1334 + width:''
  1335 + },
  1336 + {
  1337 + name:'',
  1338 +
  1339 + isShow:false,
  1340 + className:'',
  1341 + width:''
  1342 + },
  1343 + {
  1344 + name:'',
  1345 +
  1346 + isShow:false,
  1347 + className:'',
  1348 + width:''
  1349 + },
  1350 + {
  1351 + name:'',
  1352 +
  1353 + isShow:false,
  1354 + className:'',
  1355 + width:''
  1356 + },
  1357 + {
  1358 + name:'',
  1359 +
  1360 + isShow:false,
  1361 + className:'',
  1362 + width:''
  1363 + },
  1364 + {
  1365 + name:'',
  1366 +
  1367 + isShow:false,
  1368 + className:'',
  1369 + width:''
  1370 + },
  1371 + {
  1372 + name:'',
  1373 +
  1374 + isShow:false,
  1375 + className:'',
  1376 + width:''
  1377 + },
  1378 + {
  1379 + name:'',
  1380 +
  1381 + isShow:false,
  1382 + className:'',
  1383 + width:''
  1384 + },
  1385 + {
  1386 + name:'',
  1387 +
  1388 + isShow:false,
  1389 + className:'',
  1390 + width:''
  1391 + },
  1392 + {
  1393 + name:'',
  1394 +
  1395 + isShow:false,
  1396 + className:'',
  1397 + width:''
  1398 + },
  1399 + {
  1400 + name:'',
  1401 +
  1402 + isShow:false,
  1403 + className:'',
  1404 + width:''
  1405 + },
  1406 + {
  1407 + name:'',
  1408 +
  1409 + isShow:false,
  1410 + className:'',
  1411 + width:''
  1412 + },
  1413 + {
  1414 + name:'',
  1415 +
  1416 + isShow:false,
  1417 + className:'',
  1418 + width:''
  1419 + },
  1420 + {
  1421 + name:'',
  1422 +
  1423 + isShow:false,
  1424 + className:'',
  1425 + width:''
  1426 + },
  1427 + {
  1428 + name:'',
  1429 +
  1430 + isShow:false,
  1431 + className:'',
  1432 + width:''
  1433 + },
  1434 + {
  1435 + name:'',
  1436 +
  1437 + isShow:false,
  1438 + className:'',
  1439 + width:''
  1440 + },
  1441 + {
  1442 + name:'',
  1443 +
  1444 + isShow:false,
  1445 + className:'',
  1446 + width:''
  1447 + },
  1448 + {
  1449 + name:'',
  1450 +
  1451 + isShow:false,
  1452 + className:'',
  1453 + width:''
  1454 + },
  1455 + {
  1456 + name:'',
  1457 +
  1458 + isShow:false,
  1459 + className:'',
  1460 + width:''
  1461 + },
  1462 + {
  1463 + name:'',
  1464 +
  1465 + isShow:false,
  1466 + className:'',
  1467 + width:''
  1468 + },
  1469 + {
  1470 + name:'AC-1',
  1471 +
  1472 + isShow:true,
  1473 + className:'',
  1474 + width:''
  1475 + },
  1476 +
  1477 +
  1478 + ],
  1479 + ]
  1480 +
  1481 + }
  1482 + },
  1483 + setup(props, {attrs, slots, emit}) {
  1484 + const {proxy} = Vue.getCurrentInstance();
  1485 + // 获取状态
  1486 + const { changeIndex} = indirectManage()
  1487 + // 监听编辑状态
  1488 + Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
  1489 + console.log('vux',changeIndex.value,newVal)
  1490 + proxy.isDetailShow=false;
  1491 +
  1492 + });
  1493 + // 挂载完
  1494 + Vue.onMounted(() => {
  1495 + })
  1496 + const goDetail=(item)=>{
  1497 + proxy.allowClickData.map((itemName,index)=>{
  1498 + if(item.name==itemName){
  1499 + proxy.isDetailShow=true;
  1500 + console.log("detail",item)
  1501 + proxy.detailData=item;
  1502 + }
  1503 + })
  1504 +
  1505 + }
  1506 +
  1507 + return{
  1508 + goDetail
  1509 + }
  1510 + }
  1511 +}
  1 +<div v-if="!isDetailShow" class="outlinediv" >
  2 + <!-- <span>湖州灾备三机房平面图</span>-->
  3 + <div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px">
  4 + <table>
  5 + <tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
  6 + <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
  7 + <img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
  8 + <span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
  9 + </td>
  10 + </tr>
  11 +
  12 + <!-- <tr>
  13 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">TB-6</span></a></td>
  14 + <td style="width: 30px"></td>
  15 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">TB-5</span></a></td>
  16 + <td style="width: 30px"></td>
  17 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  18 + <td style="width: 30px"></td>
  19 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  20 + <td style="width: 30px"></td>
  21 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  22 + <td style="width: 30px"></td>
  23 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
  24 +
  25 + </tr>
  26 + <tr>
  27 + <td><img></td>
  28 + <td><img ></td>
  29 + <td><img></td>
  30 + <td><img></td>
  31 + <td><img ></td>
  32 + <td><img ></td>
  33 +
  34 + </tr>
  35 + <tr>
  36 + <td><img></td>
  37 + <td><img ></td>
  38 + <td><img></td>
  39 + <td><img></td>
  40 + <td><img ></td>
  41 + <td><img ></td>
  42 + </tr>
  43 + <tr>
  44 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
  45 + <td style="width: 30px"></td>
  46 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  47 + <td style="width: 30px"></td>
  48 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
  49 + <td style="width: 30px"></td>
  50 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  51 + <td style="width: 30px"></td>
  52 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  53 + <td style="width: 30px"></td>
  54 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  55 + </tr>
  56 + <tr class="zaibeione"></tr>-->
  57 +
  58 + </table>
  59 + </div>
  60 +</div>
  61 +<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const changeIndex = Vue.toRef(store.state, 'changeIndex')
  7 +
  8 + return {
  9 + changeIndex
  10 + }
  11 +}
  12 +export default {
  13 + name: 'huzhouThree',
  14 + template: '',
  15 + components: {
  16 + 'MachineRoomDetail': Vue.defineAsyncComponent(
  17 + () => myImport('views/commonComponents/machineRoomDetail/index')
  18 + ),
  19 + },
  20 + props:['src'],
  21 + data(){
  22 + return {
  23 + domainName:sessionStorage.getItem('domainName'),
  24 + accessToken:localStorage.getItem('access_token'),
  25 + isDetailShow:false,//是否展示详情页
  26 + detailData:'',//详情数据
  27 + htmlName:'huzhouzaibeithree',
  28 + machineData:this.src,
  29 + allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
  30 + tableData:[
  31 + [
  32 +
  33 + {
  34 + name:'TB-6',
  35 + isShow:true,
  36 + className:'',
  37 + width:''
  38 + },
  39 + {
  40 + name:'',
  41 + isShow:false,
  42 + className:'',
  43 + width:'30px'
  44 + },
  45 + {
  46 + name:'TB-5',
  47 + isShow:true,
  48 + className:'',
  49 + width:''
  50 + },
  51 + {
  52 + name:'',
  53 + isShow:false,
  54 + className:'',
  55 + width:'30px'
  56 + },
  57 + {
  58 + name:'',
  59 + isShow:true,
  60 + className:'',
  61 + width:''
  62 + },
  63 + {
  64 + name:'',
  65 + isShow:false,
  66 + className:'',
  67 + width:'30px'
  68 + },
  69 + {
  70 + name:'',
  71 + isShow:true,
  72 + className:'',
  73 + width:''
  74 + },
  75 + {
  76 + name:'',
  77 + isShow:false,
  78 + className:'',
  79 + width:'30px'
  80 + },
  81 + {
  82 + name:'',
  83 + isShow:true,
  84 + className:'',
  85 + width:''
  86 + },
  87 + {
  88 + name:'',
  89 + isShow:false,
  90 + className:'',
  91 + width:'30px'
  92 + },
  93 + {
  94 + name:'',
  95 + isShow:true,
  96 + className:'',
  97 + width:''
  98 + }
  99 + ],
  100 + [
  101 + {
  102 + name:'',
  103 + isShow:false,
  104 + className:'',
  105 + width:''
  106 + },
  107 + {
  108 + name:'',
  109 + isShow:false,
  110 + className:'',
  111 + width:''
  112 + },
  113 + {
  114 + name:'',
  115 + isShow:false,
  116 + className:'',
  117 + width:''
  118 + },
  119 + {
  120 + name:'',
  121 + isShow:false,
  122 + className:'',
  123 + width:''
  124 + },
  125 + {
  126 + name:'',
  127 + isShow:false,
  128 + className:'',
  129 + width:''
  130 + },
  131 + {
  132 + name:'',
  133 + isShow:false,
  134 + className:'',
  135 + width:''
  136 + },
  137 + ],
  138 + [
  139 + {
  140 + name:'',
  141 + isShow:false,
  142 + className:'',
  143 + width:''
  144 + },
  145 + {
  146 + name:'',
  147 + isShow:false,
  148 + className:'',
  149 + width:''
  150 + },
  151 + {
  152 + name:'',
  153 + isShow:false,
  154 + className:'',
  155 + width:''
  156 + },
  157 + {
  158 + name:'',
  159 + isShow:false,
  160 + className:'',
  161 + width:''
  162 + },
  163 + {
  164 + name:'',
  165 + isShow:false,
  166 + className:'',
  167 + width:''
  168 + },
  169 + {
  170 + name:'',
  171 + isShow:false,
  172 + className:'',
  173 + width:''
  174 + },
  175 + ],
  176 + [
  177 +
  178 + {
  179 + name:'',
  180 + isShow:true,
  181 + className:'',
  182 + width:''
  183 + },
  184 + {
  185 + name:'',
  186 + isShow:false,
  187 + className:'',
  188 + width:'30px'
  189 + },
  190 + {
  191 + name:'',
  192 + isShow:true,
  193 + className:'',
  194 + width:''
  195 + },
  196 + {
  197 + name:'',
  198 + isShow:false,
  199 + className:'',
  200 + width:'30px'
  201 + },
  202 + {
  203 + name:'',
  204 + isShow:true,
  205 + className:'',
  206 + width:''
  207 + },
  208 + {
  209 + name:'',
  210 + isShow:false,
  211 + className:'',
  212 + width:'30px'
  213 + },
  214 + {
  215 + name:'',
  216 + isShow:true,
  217 + className:'',
  218 + width:''
  219 + },
  220 + {
  221 + name:'',
  222 + isShow:false,
  223 + className:'',
  224 + width:'30px'
  225 + },
  226 + {
  227 + name:'',
  228 + isShow:true,
  229 + className:'',
  230 + width:''
  231 + },
  232 + {
  233 + name:'',
  234 + isShow:false,
  235 + className:'',
  236 + width:'30px'
  237 + },
  238 + {
  239 + name:'',
  240 + isShow:true,
  241 + className:'',
  242 + width:''
  243 + }
  244 + ],
  245 + []
  246 + ]
  247 + }
  248 + },
  249 +
  250 + setup(props, {attrs, slots, emit}) {
  251 + const {proxy} = Vue.getCurrentInstance();
  252 + // 获取状态
  253 + const { changeIndex} = indirectManage()
  254 + // 监听编辑状态
  255 + Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
  256 + console.log('vux',changeIndex.value,newVal)
  257 + proxy.isDetailShow=false;
  258 +
  259 + });
  260 +
  261 + // 挂载完
  262 + Vue.onMounted(() => {
  263 +
  264 + })
  265 + const goDetail=(item)=>{
  266 + proxy.allowClickData.map((itemName,index)=>{
  267 + if(item.name==itemName){
  268 + proxy.isDetailShow=true;
  269 + proxy.detailData=item;
  270 + }
  271 + })
  272 + }
  273 +
  274 + return{
  275 + goDetail
  276 + }
  277 + }
  278 +}
  1 +<div v-if="!isDetailShow" class="outlinediv" >
  2 + <!-- <span>湖州灾备二机房平面图</span>-->
  3 + <div class="huzhouone-topcabinet" style="margin-left: 20%">
  4 + <table>
  5 +
  6 + <tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
  7 + <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
  8 + <img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
  9 + <span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
  10 + </td>
  11 + </tr>
  12 +
  13 + <!-- <tr>
  14 +
  15 + <td><img/></td>
  16 + <td style="width: 30px"></td>
  17 +
  18 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-1</span></a></td>
  19 + <td style="width: 30px"></td>
  20 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LA-2</span></a></td>
  21 + <td style="width: 30px"></td>
  22 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-3</span></a></td>
  23 + <td style="width: 30px"></td>
  24 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-2</span></a></td>
  25 + <td style="width: 30px"></td>
  26 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-1</span></a></td>
  27 + <td style="width: 30px"></td>
  28 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">PDA6B</span></a></td>
  29 +
  30 + </tr>
  31 + <tr>
  32 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">AC-5</span></a></td>
  33 + <td style="width: 30px"></td>
  34 + <td><img></td>
  35 + <td><img ></td>
  36 + <td><img></td>
  37 + <td><img></td>
  38 + <td><img ></td>
  39 + <td><img ></td>
  40 +
  41 + </tr>
  42 + <tr>
  43 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
  44 + <td style="width: 30px"></td>
  45 + <td><img></td>
  46 + <td><img ></td>
  47 + <td><img></td>
  48 + <td><img></td>
  49 + <td><img ></td>
  50 + <td><img ></td>
  51 + </tr>
  52 + <tr>
  53 + <td><img/></td>
  54 + <td style="width: 30px"></td>
  55 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LB-1</span></a></td>
  56 + <td style="width: 30px"></td>
  57 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-2</span></a></td>
  58 + <td style="width: 30px"></td>
  59 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LB-3</span></a></td>
  60 + <td style="width: 30px"></td>
  61 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-2</span></a></td>
  62 + <td style="width: 30px"></td>
  63 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-1</span></a></td>
  64 + <td style="width: 30px"></td>
  65 + <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">PDA5A</span></a></td>
  66 + </tr>
  67 + <tr class="zaibeione"></tr>-->
  68 +
  69 + </table>
  70 + </div>
  71 +</div>
  72 +<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const changeIndex = Vue.toRef(store.state, 'changeIndex')
  7 +
  8 + return {
  9 + changeIndex
  10 + }
  11 +}
  12 +export default {
  13 + name: 'huzhouTwo',
  14 + template: '',
  15 + components: {
  16 + 'MachineRoomDetail': Vue.defineAsyncComponent(
  17 + () => myImport('views/commonComponents/machineRoomDetail/index')
  18 + ),
  19 + },
  20 + props:['src'],
  21 + data(){
  22 + return {
  23 + domainName:sessionStorage.getItem('domainName'),
  24 + accessToken:localStorage.getItem('access_token'),
  25 + isDetailShow:false,//是否展示详情页
  26 + detailData:'',//详情数据
  27 + htmlName:'huzhouzaibeitwo',
  28 + machineData:this.src,
  29 + allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
  30 + tableData:[
  31 + [
  32 +
  33 + {
  34 + name:'',
  35 + isShow:false,
  36 + className:'',
  37 + width:''
  38 + },
  39 + {
  40 + name:'',
  41 + isShow:false,
  42 + className:'',
  43 + width:'30px'
  44 + },
  45 + {
  46 + name:'LA-1',
  47 + isShow:true,
  48 + className:'',
  49 + width:''
  50 + },
  51 + {
  52 + name:'',
  53 + isShow:false,
  54 + className:'',
  55 + width:'30px'
  56 + },
  57 + {
  58 + name:'LA-2',
  59 + isShow:true,
  60 + className:'',
  61 + width:''
  62 + },
  63 + {
  64 + name:'',
  65 + isShow:false,
  66 + className:'',
  67 + width:'30px'
  68 + },
  69 + {
  70 + name:'LA-3',
  71 + isShow:true,
  72 + className:'',
  73 + width:''
  74 + },
  75 + {
  76 + name:'',
  77 + isShow:false,
  78 + className:'',
  79 + width:'30px'
  80 + },
  81 + {
  82 + name:'LA-2',
  83 + isShow:true,
  84 + className:'',
  85 + width:''
  86 + },
  87 + {
  88 + name:'',
  89 + isShow:false,
  90 + className:'',
  91 + width:'30px'
  92 + },
  93 + {
  94 + name:'FA-1',
  95 + isShow:true,
  96 + className:'',
  97 + width:''
  98 + },
  99 + {
  100 + name:'',
  101 + isShow:false,
  102 + className:'',
  103 + width:'30px'
  104 + },
  105 + {
  106 + name:'PDA6B',
  107 + isShow:true,
  108 + className:'',
  109 + width:''
  110 + }
  111 + ],
  112 + [
  113 +
  114 + {
  115 + name:'AC-5',
  116 + isShow:true,
  117 + className:'',
  118 + width:''
  119 + },
  120 + {
  121 + name:'',
  122 + isShow:false,
  123 + className:'',
  124 + width:'30px'
  125 + },
  126 + {
  127 + name:'',
  128 + isShow:false,
  129 + className:'',
  130 + width:''
  131 + },
  132 + {
  133 + name:'',
  134 + isShow:false,
  135 + className:'',
  136 + width:''
  137 + },
  138 + {
  139 + name:'',
  140 + isShow:false,
  141 + className:'',
  142 + width:''
  143 + },
  144 + {
  145 + name:'',
  146 + isShow:false,
  147 + className:'',
  148 + width:''
  149 + },
  150 + {
  151 + name:'',
  152 + isShow:false,
  153 + className:'',
  154 + width:''
  155 + },
  156 + {
  157 + name:'',
  158 + isShow:false,
  159 + className:'',
  160 + width:''
  161 + },
  162 + ],
  163 + [
  164 +
  165 + {
  166 + name:'',
  167 + isShow:true,
  168 + className:'',
  169 + width:''
  170 + },
  171 + {
  172 + name:'',
  173 + isShow:false,
  174 + className:'',
  175 + width:'30px'
  176 + },
  177 + {
  178 + name:'',
  179 + isShow:false,
  180 + className:'',
  181 + width:''
  182 + },
  183 + {
  184 + name:'',
  185 + isShow:false,
  186 + className:'',
  187 + width:''
  188 + },
  189 + {
  190 + name:'',
  191 + isShow:false,
  192 + className:'',
  193 + width:''
  194 + },
  195 + {
  196 + name:'',
  197 + isShow:false,
  198 + className:'',
  199 + width:''
  200 + },
  201 + {
  202 + name:'',
  203 + isShow:false,
  204 + className:'',
  205 + width:''
  206 + },
  207 + {
  208 + name:'',
  209 + isShow:false,
  210 + className:'',
  211 + width:''
  212 + },
  213 + ],
  214 + [
  215 +
  216 + {
  217 + name:'',
  218 + isShow:false,
  219 + className:'',
  220 + width:''
  221 + },
  222 + {
  223 + name:'',
  224 + isShow:false,
  225 + className:'',
  226 + width:'30px'
  227 + },
  228 + {
  229 + name:'LB-1',
  230 + isShow:true,
  231 + className:'',
  232 + width:''
  233 + },
  234 + {
  235 + name:'',
  236 + isShow:false,
  237 + className:'',
  238 + width:'30px'
  239 + },
  240 + {
  241 + name:'LB-2',
  242 + isShow:true,
  243 + className:'',
  244 + width:''
  245 + },
  246 + {
  247 + name:'',
  248 + isShow:false,
  249 + className:'',
  250 + width:'30px'
  251 + },
  252 + {
  253 + name:'LB-3',
  254 + isShow:true,
  255 + className:'',
  256 + width:''
  257 + },
  258 + {
  259 + name:'',
  260 + isShow:false,
  261 + className:'',
  262 + width:'30px'
  263 + },
  264 + {
  265 + name:'LB-2',
  266 + isShow:true,
  267 + className:'',
  268 + width:''
  269 + },
  270 + {
  271 + name:'',
  272 + isShow:false,
  273 + className:'',
  274 + width:'30px'
  275 + },
  276 + {
  277 + name:'FB-1',
  278 + isShow:true,
  279 + className:'',
  280 + width:''
  281 + },
  282 + {
  283 + name:'',
  284 + isShow:false,
  285 + className:'',
  286 + width:'30px'
  287 + },
  288 + {
  289 + name:'PDA5A',
  290 + isShow:true,
  291 + className:'',
  292 + width:''
  293 + }
  294 + ],
  295 + []
  296 + ]
  297 + }
  298 + },
  299 +
  300 + setup(props, {attrs, slots, emit}) {
  301 + const {proxy} = Vue.getCurrentInstance();
  302 + // 获取状态
  303 + const { changeIndex} = indirectManage()
  304 + // 监听编辑状态
  305 + Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
  306 + console.log('vux',changeIndex.value,newVal)
  307 + proxy.isDetailShow=false;
  308 +
  309 + });
  310 +
  311 + // 挂载完
  312 + Vue.onMounted(() => {
  313 +
  314 + })
  315 + const goDetail=(item)=>{
  316 + proxy.allowClickData.map((itemName,index)=>{
  317 + if(item.name==itemName){
  318 + proxy.isDetailShow=true;
  319 + proxy.detailData=item;
  320 + }
  321 + })
  322 + }
  323 +
  324 + return{
  325 + goDetail
  326 + }
  327 + }
  328 +}
1 -<iframe v-if="src" style="width:90%;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe> 1 +<!--<iframe v-if="src" style="width:90%;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>-->
  2 +<HuzhouOne v-if="showNum==1" :src="machineData"></HuzhouOne>
  3 +<HuzhouTwo v-if="showNum==2" :src="machineData"></HuzhouTwo>
  4 +<HuzhouThree v-if="showNum==3" :src="machineData"></HuzhouThree>
  5 +<Xiaoshansecond v-if="showNum==4" :src="machineData"></Xiaoshansecond>
  6 +<Xiaoshanthird v-if="showNum==5" :src="machineData"></Xiaoshanthird>
  7 +<Xiaoshanseven v-if="showNum==6" :src="machineData"></Xiaoshanseven>
1 export default { 1 export default {
2 name: 'machineRoom', 2 name: 'machineRoom',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'HuzhouOne': Vue.defineAsyncComponent(
  6 + () => myImport('views/commonComponents/huzhouOne/index')
  7 + ),
  8 + 'HuzhouTwo': Vue.defineAsyncComponent(
  9 + () => myImport('views/commonComponents/huzhouTwo/index')
  10 + ),
  11 + 'HuzhouThree': Vue.defineAsyncComponent(
  12 + () => myImport('views/commonComponents/huzhouThree/index')
  13 + ),
  14 + 'Xiaoshansecond': Vue.defineAsyncComponent(
  15 + () => myImport('views/commonComponents/xiaoshansecond/index')
  16 + ),
  17 + 'Xiaoshanthird': Vue.defineAsyncComponent(
  18 + () => myImport('views/commonComponents/xiaoshanthird/index')
  19 + ),
  20 + 'Xiaoshanseven': Vue.defineAsyncComponent(
  21 + () => myImport('views/commonComponents/xiaoshanseven/index')
  22 + ),
  23 + },
5 props:['src'], 24 props:['src'],
6 data(){ 25 data(){
7 return { 26 return {
8 domainName:sessionStorage.getItem('domainName'), 27 domainName:sessionStorage.getItem('domainName'),
9 accessToken:localStorage.getItem('access_token'), 28 accessToken:localStorage.getItem('access_token'),
10 - 29 + isDetailShow:false,//详情页
  30 + // changeIndexNav:this.changeIndex,//nav是否点击变化
  31 + htmmlNameData:[
  32 + {name:'huzhouzaibeione',val:'湖州灾备机房一'},
  33 + {name:'huzhouzaibeitwo',val:'湖州灾备机房二'},
  34 + {name:'huzhouzaibeithree',val:'湖州灾备机房三'},
  35 + {name:'xiaoshansecond',val:'萧山IDC二号机房'},
  36 + {name:'xiaoshanthird',val:'萧山IDC三号机房'},
  37 + {name:'xiaoshanseven',val:'萧山IDC七号机房'},
  38 + ],
  39 + srcName:this.src,
  40 + machineData:'',//机房信息数据
11 // src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken 41 // src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken
12 42
13 } 43 }
14 }, 44 },
  45 + watch:{
  46 + src(newValue, oldValue) {
  47 + console.log("srcName",newValue)
  48 + this.srcName=newValue;
  49 + this.getName();
  50 + }
  51 +
  52 + },
15 53
16 setup(props, {attrs, slots, emit}) { 54 setup(props, {attrs, slots, emit}) {
17 const {proxy} = Vue.getCurrentInstance(); 55 const {proxy} = Vue.getCurrentInstance();
  56 + const showNum=Vue.ref()
18 57
19 58
20 // 挂载完 59 // 挂载完
21 Vue.onMounted(() => { 60 Vue.onMounted(() => {
22 61
  62 + proxy.getName();
23 }) 63 })
  64 + const getName=()=>{
  65 + proxy.htmmlNameData.map((item,index)=>{
  66 + if(proxy.srcName==item.name){
  67 + proxy.showNum=index+1;
  68 + proxy.machineData=item;
  69 + }
  70 + })
  71 + console.log("src",proxy.src,proxy.showNum)
  72 + }
24 73
25 return{ 74 return{
26 // src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken 75 // src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
  76 + getName,
  77 + showNum
27 78
28 } 79 }
29 } 80 }
  1 +<div :class="['all',{'flex-center':isCenter}]">
  2 + <!-- 左侧机柜效果图 -->
  3 + <div class='contain'>
  4 +
  5 + <!-- 机柜内部服务器 -->
  6 + <div class='contain-server'>
  7 +
  8 +
  9 + <!-- 第一个物理服务器 -->
  10 + <div :class="['serve',{'img-serve-8':infoData.cabinetCapacity=='8U'}]"@click="showDevice" v-for="(item,index) in serviceData">
  11 + <div class='img-serve' >
  12 +
  13 + <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
  14 + <div class='img-serve-text'>物理服务器</div>
  15 + <div class='lamp'>
  16 + <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
  17 + <div class='img-lamp'>
  18 + <img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
  19 + <img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
  20 + <img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
  21 + <img src="/vue3/src/assets/images/machineRoom/greenColor.png" alt="">
  22 + </div>
  23 + </div>
  24 +
  25 + </div>
  26 + </div>
  27 + </div>
  28 + </div>
  29 + <!-- 右侧机柜详细信息 -->
  30 + <div class='info' v-if="!isCenter">
  31 +
  32 + <!-- 机柜信息 -->
  33 + <div class='info-top'>
  34 + <div class='info-contain'>
  35 + <div class='info-text'>机柜信息</div>
  36 + <div class='info-text-bot'>
  37 + <p>机 房：{{machineData.val}}</p>
  38 + <p>机柜编号：{{detailData.name}}</p>
  39 + <p>机柜容量：{{infoData.cabinetCapacity}}</p>
  40 + <p>设备数量：{{infoData.deviceNum}}台</p>
  41 + <p v-if="infoData.alarmNum">告警量：{{infoData.AlarmNum}}无告警</p>
  42 + <p v-if="!infoData.alarmNum">告警量：无告警</p>
  43 + </div>
  44 + </div>
  45 + </div>
  46 +
  47 + <!-- 设备信息 -->
  48 + <div class='info-bottom' id="info-bottom" v-if="isShowDevice">
  49 + <div class='info-contain'>
  50 + <div class='info-text'>设备信息</div>
  51 + <div class='info-text-bot'>
  52 + <p>资源名称：{{infoData.resName}}</p>
  53 + <p>品 牌：{{infoData.brandName}}</p>
  54 + <p>型 号：{{infoData.model}}</p>
  55 + <p>序 列 号：{{infoData.serialNumber}}</p>
  56 + <p>业 务 IP：{{infoData.ServiceIP}}</p>
  57 + <p>用 途：{{infoData.purpose}}</p>
  58 + </div>
  59 + </div>
  60 + </div>
  61 +
  62 +
  63 + </div>
  64 +
  65 +
  66 +</div>
  67 +
  68 +<!--
  69 +</body>
  70 +
  71 +</html>
  72 +<script>
  73 + var eleInfo=document.getElementsByClassName('serve');
  74 + eleInfo[0].onclick = function() {
  75 + var eleBottom=document.getElementById("info-bottom")
  76 + eleBottom.setAttribute('style','display:block')
  77 + }
  78 +</script>-->
  1 +export default {
  2 + name: 'machineRoomDetail',
  3 + template: '',
  4 + components: {
  5 + 'MachineRoomDetail': Vue.defineAsyncComponent(
  6 + () => myImport('views/commonComponents/machineRoomDetail/index')
  7 + ),
  8 + },
  9 + props:['detailData','machineData'],
  10 + data(){
  11 + return {
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + accessToken:localStorage.getItem('access_token'),
  14 + isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
  15 + serviceData:[],//服务器数据
  16 + deviceData: [
  17 + {
  18 + name:'E12',
  19 + resName:'管理决策二包(数据集市39)',
  20 + brandName:'浪潮',
  21 + model:'TS860',
  22 + serialNumber:'216365930',
  23 + ServiceIP:'80.12.73.39',
  24 + purpose:'管理决策二包使用',
  25 + cabinetCapacity :'8U',
  26 + deviceNum:'1',
  27 + alarmNum:'0'
  28 + },
  29 + {
  30 + name:'E13',
  31 + resName:'管理决策二包(数据集市38)',
  32 + brandName:'浪潮',
  33 + model:'TS860',
  34 + serialNumber:'216365928',
  35 + ServiceIP:'80.12.73.38',
  36 + purpose:'管理决策二包使用',
  37 + cabinetCapacity :'8U',
  38 + deviceNum:'1',
  39 + alarmNum:'0'
  40 + },
  41 + {
  42 + name:'FB-3',
  43 + deviceNum:'3',
  44 + cabinetCapacity :'4U',
  45 + },
  46 + {
  47 + name:'FB-4',
  48 + deviceNum:'1',
  49 + cabinetCapacity :'4U',
  50 + },
  51 + ],//设备信息
  52 + infoData:'',//设备详细信息
  53 + // isShowDevice:false,//是否显示设备信息
  54 +
  55 + }
  56 + },
  57 +
  58 + setup(props, {attrs, slots, emit}) {
  59 + const {proxy} = Vue.getCurrentInstance();
  60 + const isShowDevice=Vue.ref(false);
  61 +
  62 + const CabinetNum=props.detailData.name;//机柜编号
  63 +
  64 + // 挂载完
  65 + Vue.onMounted(() => {
  66 + if(props.machineData.name.indexOf('huzhou')!=-1){
  67 + proxy.isCenter=true;
  68 + }else{
  69 + proxy.isCenter=false;
  70 + }
  71 + proxy.getDeviceInfo();
  72 +
  73 + })
  74 + const getDeviceInfo=()=>{
  75 + proxy.deviceData.map((item,index)=>{
  76 + if(CabinetNum==item.name){
  77 + proxy.infoData=item;
  78 +
  79 + }
  80 + })
  81 + for(let i=0;i<proxy.infoData.deviceNum;i++){
  82 + proxy.serviceData.push({
  83 + name:'物理服务器'
  84 + })
  85 + }
  86 + }
  87 + const showDevice=()=>{
  88 + console.log("iscenter",proxy.isCenter)
  89 + if(!proxy.isCenter){
  90 + console.log("lalala")
  91 + proxy.isShowDevice=true;
  92 + }
  93 +
  94 + }
  95 +
  96 + return{
  97 + showDevice,
  98 + isShowDevice,
  99 + getDeviceInfo
  100 + }
  101 + }
  102 +}
  1 +<div v-if="!isDetailShow" class="outlinediv" >
  2 + <!-- <span>2号机房平面图</span>-->
  3 + <div v-for="(items,indexs) in tableData" :class="[{'xiaoshansecond-topcabinet':indexs==0,'xiaoshansecond-middlecabinet':indexs==1,'xiaoshansecond-bottomcabinet':indexs==2}]" class="xiaoshansecond-topcabinet" >
  4 + <table>
  5 +
  6 + <tr >
  7 + <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
  8 + <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="">
  9 + <span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
  10 + </td>
  11 + </tr>
  12 + </table>
  13 + </div>
  14 +</div>
  15 +<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const changeIndex = Vue.toRef(store.state, 'changeIndex')
  7 +
  8 + return {
  9 + changeIndex
  10 + }
  11 +}
  12 +export default {
  13 + name: 'xiaoshansecond',
  14 + template: '',
  15 + components: {
  16 + 'MachineRoomDetail': Vue.defineAsyncComponent(
  17 + () => myImport('views/commonComponents/machineRoomDetail/index')
  18 + ),
  19 + },
  20 + props:['src'],
  21 + data(){
  22 + return {
  23 + domainName:sessionStorage.getItem('domainName'),
  24 + accessToken:localStorage.getItem('access_token'),
  25 + isDetailShow:false,//是否展示详情页
  26 + detailData:'',//详情数据
  27 + htmlName:'xiaoshansecond',
  28 + machineData:this.src,
  29 + allowClickData:['E12','E13'],//允许进入详情的机柜
  30 + tableData:[
  31 + [
  32 +
  33 + {
  34 + name:'F1',
  35 + isShow:true,
  36 + className:'',
  37 + imgEmpty:false,
  38 + width:''
  39 + },
  40 + {
  41 + name:'F2',
  42 + isShow:true,
  43 + className:'',
  44 + imgEmpty:false,
  45 + width:''
  46 + },
  47 + {
  48 + name:'F3',
  49 + isShow:true,
  50 + className:'',
  51 + imgEmpty:false,
  52 + width:''
  53 + },
  54 + {
  55 + name:'F4',
  56 + isShow:true,
  57 + className:'',
  58 + imgEmpty:false,
  59 + width:''
  60 + },
  61 + {
  62 + name:'F4',
  63 + isShow:true,
  64 + className:'',
  65 + imgEmpty:false,
  66 + width:''
  67 + },
  68 + {
  69 + name:'F6',
  70 + isShow:true,
  71 + className:'',
  72 + imgEmpty:false,
  73 + width:''
  74 + },
  75 + {
  76 + name:'F7',
  77 + isShow:true,
  78 + className:'',
  79 + imgEmpty:false,
  80 + width:''
  81 + },
  82 + {
  83 + name:'F8',
  84 + isShow:true,
  85 + className:'',
  86 + imgEmpty:false,
  87 + width:''
  88 + },
  89 + {
  90 + name:'F9',
  91 + isShow:true,
  92 + className:'',
  93 + imgEmpty:false,
  94 + width:''
  95 + },
  96 + {
  97 + name:'F10',
  98 + isShow:true,
  99 + className:'',
  100 + imgEmpty:false,
  101 + width:''
  102 + },
  103 + {
  104 + name:'F11',
  105 + isShow:true,
  106 + className:'',
  107 + imgEmpty:false,
  108 + width:''
  109 + },
  110 + {
  111 + name:'',
  112 + isShow:true,
  113 + className:'',
  114 + imgEmpty:true,
  115 + width:''
  116 + },
  117 + {
  118 + name:'',
  119 + isShow:true,
  120 + className:'',
  121 + imgEmpty:true,
  122 + width:''
  123 + },
  124 + {
  125 + name:'F14',
  126 + isShow:true,
  127 + className:'',
  128 + imgEmpty:false,
  129 + width:''
  130 + },
  131 + {
  132 + name:'F15',
  133 + isShow:true,
  134 + className:'',
  135 + imgEmpty:false,
  136 + width:''
  137 + },
  138 + {
  139 + name:'F16',
  140 + isShow:true,
  141 + className:'',
  142 + imgEmpty:false,
  143 + width:''
  144 + },
  145 + {
  146 + name:'F17',
  147 + isShow:true,
  148 + className:'',
  149 + imgEmpty:false,
  150 + width:''
  151 + },
  152 + {
  153 + name:'F18',
  154 + isShow:true,
  155 + className:'',
  156 + imgEmpty:false,
  157 + width:''
  158 + },
  159 + {
  160 + name:'F19',
  161 + isShow:true,
  162 + className:'',
  163 + imgEmpty:false,
  164 + width:''
  165 + },
  166 + {
  167 + name:'F20',
  168 + isShow:true,
  169 + className:'',
  170 + imgEmpty:false,
  171 + width:''
  172 + },
  173 + ],
  174 + [
  175 +
  176 + {
  177 + name:'G1',
  178 + isShow:true,
  179 + className:'',
  180 + imgEmpty:false,
  181 + width:''
  182 + },
  183 + {
  184 + name:'G2',
  185 + isShow:true,
  186 + className:'',
  187 + imgEmpty:false,
  188 + width:''
  189 + },
  190 + {
  191 + name:'G3',
  192 + isShow:true,
  193 + className:'',
  194 + imgEmpty:false,
  195 + width:''
  196 + },
  197 + {
  198 + name:'G4',
  199 + isShow:true,
  200 + className:'',
  201 + imgEmpty:false,
  202 + width:''
  203 + },
  204 + {
  205 + name:'G4',
  206 + isShow:true,
  207 + className:'',
  208 + imgEmpty:false,
  209 + width:''
  210 + },
  211 + {
  212 + name:'G6',
  213 + isShow:true,
  214 + className:'',
  215 + imgEmpty:false,
  216 + width:''
  217 + },
  218 + {
  219 + name:'G7',
  220 + isShow:true,
  221 + className:'',
  222 + imgEmpty:false,
  223 + width:''
  224 + },
  225 + {
  226 + name:'G8',
  227 + isShow:true,
  228 + className:'',
  229 + imgEmpty:false,
  230 + width:''
  231 + },
  232 + {
  233 + name:'G9',
  234 + isShow:true,
  235 + className:'',
  236 + imgEmpty:false,
  237 + width:''
  238 + },
  239 + {
  240 + name:'G10',
  241 + isShow:true,
  242 + className:'',
  243 + imgEmpty:false,
  244 + width:''
  245 + },
  246 + {
  247 + name:'G11',
  248 + isShow:true,
  249 + className:'',
  250 + imgEmpty:false,
  251 + width:''
  252 + },
  253 + {
  254 + name:'G12',
  255 + isShow:true,
  256 + className:'',
  257 + imgEmpty:false,
  258 + width:''
  259 + },
  260 + {
  261 + name:'G13',
  262 + isShow:true,
  263 + className:'',
  264 + imgEmpty:false,
  265 + width:''
  266 + },
  267 + {
  268 + name:'G14',
  269 + isShow:true,
  270 + className:'',
  271 + imgEmpty:false,
  272 + width:''
  273 + },
  274 + {
  275 + name:'G15',
  276 + isShow:true,
  277 + className:'',
  278 + imgEmpty:false,
  279 + width:''
  280 + },
  281 + {
  282 + name:'G16',
  283 + isShow:true,
  284 + className:'',
  285 + imgEmpty:false,
  286 + width:''
  287 + },
  288 + {
  289 + name:'G17',
  290 + isShow:true,
  291 + className:'',
  292 + imgEmpty:false,
  293 + width:''
  294 + },
  295 + {
  296 + name:'G18',
  297 + isShow:true,
  298 + className:'',
  299 + imgEmpty:false,
  300 + width:''
  301 + },
  302 + {
  303 + name:'G19',
  304 + isShow:true,
  305 + className:'',
  306 + imgEmpty:false,
  307 + width:''
  308 + },
  309 + {
  310 + name:'G20',
  311 + isShow:true,
  312 + className:'',
  313 + imgEmpty:false,
  314 + width:''
  315 + },
  316 + ],
  317 + [
  318 +
  319 + {
  320 + name:'H1',
  321 + isShow:true,
  322 + className:'',
  323 + imgEmpty:false,
  324 + width:''
  325 + },
  326 + {
  327 + name:'H2',
  328 + isShow:true,
  329 + className:'',
  330 + imgEmpty:false,
  331 + width:''
  332 + },
  333 + {
  334 + name:'H3',
  335 + isShow:true,
  336 + className:'',
  337 + imgEmpty:false,
  338 + width:''
  339 + },
  340 + {
  341 + name:'H4',
  342 + isShow:true,
  343 + className:'',
  344 + imgEmpty:false,
  345 + width:''
  346 + },
  347 + {
  348 + name:'H4',
  349 + isShow:true,
  350 + className:'',
  351 + imgEmpty:false,
  352 + width:''
  353 + },
  354 + {
  355 + name:'H6',
  356 + isShow:true,
  357 + className:'',
  358 + imgEmpty:false,
  359 + width:''
  360 + },
  361 + {
  362 + name:'H7',
  363 + isShow:true,
  364 + className:'',
  365 + imgEmpty:false,
  366 + width:''
  367 + },
  368 + {
  369 + name:'H8',
  370 + isShow:true,
  371 + className:'',
  372 + imgEmpty:false,
  373 + width:''
  374 + },
  375 + {
  376 + name:'H9',
  377 + isShow:true,
  378 + className:'',
  379 + imgEmpty:false,
  380 + width:''
  381 + },
  382 + {
  383 + name:'H10',
  384 + isShow:true,
  385 + className:'',
  386 + imgEmpty:false,
  387 + width:''
  388 + },
  389 + {
  390 + name:'H11',
  391 + isShow:true,
  392 + className:'',
  393 + imgEmpty:false,
  394 + width:''
  395 + },
  396 + {
  397 + name:'H12',
  398 + isShow:true,
  399 + className:'',
  400 + imgEmpty:false,
  401 + width:''
  402 + },
  403 + {
  404 + name:'H13',
  405 + isShow:true,
  406 + className:'',
  407 + imgEmpty:false,
  408 + width:''
  409 + },
  410 + {
  411 + name:'H14',
  412 + isShow:true,
  413 + className:'',
  414 + imgEmpty:false,
  415 + width:''
  416 + },
  417 + {
  418 + name:'H15',
  419 + isShow:true,
  420 + className:'',
  421 + imgEmpty:false,
  422 + width:''
  423 + },
  424 + {
  425 + name:'H16',
  426 + isShow:true,
  427 + className:'',
  428 + imgEmpty:false,
  429 + width:''
  430 + },
  431 + {
  432 + name:'H17',
  433 + isShow:true,
  434 + className:'',
  435 + imgEmpty:false,
  436 + width:''
  437 + },
  438 + {
  439 + name:'H18',
  440 + isShow:true,
  441 + className:'',
  442 + imgEmpty:false,
  443 + width:''
  444 + },
  445 + {
  446 + name:'H19',
  447 + isShow:true,
  448 + className:'',
  449 + imgEmpty:false,
  450 + width:''
  451 + },
  452 + {
  453 + name:'H20',
  454 + isShow:true,
  455 + className:'',
  456 + imgEmpty:false,
  457 + width:''
  458 + },
  459 + ],
  460 + ]
  461 + }
  462 + },
  463 +
  464 + setup(props, {attrs, slots, emit}) {
  465 + const {proxy} = Vue.getCurrentInstance();
  466 + // 获取状态
  467 + const { changeIndex} = indirectManage()
  468 + // 监听编辑状态
  469 + Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
  470 + console.log('vux',changeIndex.value,newVal)
  471 + proxy.isDetailShow=false;
  472 +
  473 + });
  474 +
  475 + // 挂载完
  476 + Vue.onMounted(() => {
  477 +
  478 + })
  479 + const goDetail=(item)=>{
  480 + proxy.allowClickData.map((itemName,index)=>{
  481 + if(item.name==itemName){
  482 + proxy.isDetailShow=true;
  483 + proxy.detailData=item;
  484 + }
  485 + })
  486 + }
  487 +
  488 + return{
  489 + goDetail
  490 + }
  491 + }
  492 +}
  1 +<div v-if="!isDetailShow" class="outlinediv" >
  2 + <!-- <span>7号机房平面图</span>-->
  3 + <div style="width: 100%;height: 100%;display: inline-flex">
  4 + <div class="xiaoshanseven-leftcabinet">
  5 + <table>
  6 + <tr v-for="(items,indexs) in tableData" :class="{'sevenempty':items.length==0}">
  7 + <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
  8 + <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="">
  9 + <span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
  10 + </td>
  11 + </tr>
  12 + </table>
  13 + </div>
  14 + <div class="xiaoshanseven-middlecabinet"><span>过道</span></div>
  15 + <div class="xiaoshanseven-rightcabinet">
  16 + <table>
  17 + <tr v-for="(items,indexs) in tableData2" :class="{'sevenempty':items.length==0}">
  18 + <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
  19 + <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="">
  20 + <span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
  21 + </td>
  22 + </tr>
  23 + </table>
  24 + </div>
  25 +
  26 + </div>
  27 +</div>
  28 +<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const changeIndex = Vue.toRef(store.state, 'changeIndex')
  7 +
  8 + return {
  9 + changeIndex
  10 + }
  11 +}
  12 +export default {
  13 + name: 'xiaoshanseven',
  14 + template: '',
  15 + components: {
  16 + 'MachineRoomDetail': Vue.defineAsyncComponent(
  17 + () => myImport('views/commonComponents/machineRoomDetail/index')
  18 + ),
  19 + },
  20 + props:['src'],
  21 + data(){
  22 + return {
  23 + domainName:sessionStorage.getItem('domainName'),
  24 + accessToken:localStorage.getItem('access_token'),
  25 + isDetailShow:false,//是否展示详情页
  26 + detailData:'',//详情数据
  27 + htmlName:'xiaoshanseven',
  28 + machineData:this.src,
  29 + allowClickData:['E12','E13'],//允许进入详情的机柜
  30 + tableData:[
  31 + [
  32 +
  33 + {
  34 + name:'I1',
  35 + isShow:true,
  36 + className:'',
  37 + imgEmpty:false,
  38 + width:''
  39 + },
  40 + {
  41 + name:'I2',
  42 + isShow:true,
  43 + className:'',
  44 + imgEmpty:false,
  45 + width:''
  46 + },
  47 + {
  48 + name:'I3',
  49 + isShow:true,
  50 + className:'',
  51 + imgEmpty:false,
  52 + width:''
  53 + },
  54 + {
  55 + name:'I4',
  56 + isShow:true,
  57 + className:'',
  58 + imgEmpty:false,
  59 + width:''
  60 + },
  61 + {
  62 + name:'I4',
  63 + isShow:true,
  64 + className:'',
  65 + imgEmpty:false,
  66 + width:''
  67 + },
  68 + {
  69 + name:'I6',
  70 + isShow:true,
  71 + className:'',
  72 + imgEmpty:false,
  73 + width:''
  74 + },
  75 + {
  76 + name:'I7',
  77 + isShow:true,
  78 + className:'',
  79 + imgEmpty:false,
  80 + width:''
  81 + }
  82 + ],
  83 + [],
  84 + [
  85 +
  86 + {
  87 + name:'H1',
  88 + isShow:true,
  89 + className:'',
  90 + imgEmpty:false,
  91 + width:''
  92 + },
  93 + {
  94 + name:'H2',
  95 + isShow:true,
  96 + className:'',
  97 + imgEmpty:false,
  98 + width:''
  99 + },
  100 + {
  101 + name:'H3',
  102 + isShow:true,
  103 + className:'',
  104 + imgEmpty:false,
  105 + width:''
  106 + },
  107 + {
  108 + name:'H4',
  109 + isShow:true,
  110 + className:'',
  111 + imgEmpty:false,
  112 + width:''
  113 + },
  114 + {
  115 + name:'H4',
  116 + isShow:true,
  117 + className:'',
  118 + imgEmpty:false,
  119 + width:''
  120 + },
  121 + {
  122 + name:'H6',
  123 + isShow:true,
  124 + className:'',
  125 + imgEmpty:false,
  126 + width:''
  127 + },
  128 + {
  129 + name:'H7',
  130 + isShow:true,
  131 + className:'',
  132 + imgEmpty:false,
  133 + width:''
  134 + },
  135 + {
  136 + name:'H8',
  137 + isShow:true,
  138 + className:'',
  139 + imgEmpty:false,
  140 + width:''
  141 + },
  142 + {
  143 + name:'H9',
  144 + isShow:true,
  145 + className:'',
  146 + imgEmpty:false,
  147 + width:''
  148 + },
  149 + {
  150 + name:'H10',
  151 + isShow:true,
  152 + className:'',
  153 + imgEmpty:false,
  154 + width:''
  155 + }
  156 + ],
  157 + [],
  158 + [
  159 +
  160 + {
  161 + name:'G1',
  162 + isShow:true,
  163 + className:'',
  164 + imgEmpty:false,
  165 + width:''
  166 + },
  167 + {
  168 + name:'G2',
  169 + isShow:true,
  170 + className:'',
  171 + imgEmpty:false,
  172 + width:''
  173 + },
  174 + {
  175 + name:'G3',
  176 + isShow:true,
  177 + className:'',
  178 + imgEmpty:false,
  179 + width:''
  180 + },
  181 + {
  182 + name:'G4',
  183 + isShow:true,
  184 + className:'',
  185 + imgEmpty:false,
  186 + width:''
  187 + },
  188 + {
  189 + name:'G4',
  190 + isShow:true,
  191 + className:'',
  192 + imgEmpty:false,
  193 + width:''
  194 + },
  195 + {
  196 + name:'G6',
  197 + isShow:true,
  198 + className:'',
  199 + imgEmpty:false,
  200 + width:''
  201 + },
  202 + {
  203 + name:'G7',
  204 + isShow:true,
  205 + className:'',
  206 + imgEmpty:false,
  207 + width:''
  208 + },
  209 + {
  210 + name:'G8',
  211 + isShow:true,
  212 + className:'',
  213 + imgEmpty:false,
  214 + width:''
  215 + },
  216 + {
  217 + name:'G9',
  218 + isShow:true,
  219 + className:'',
  220 + imgEmpty:false,
  221 + width:''
  222 + },
  223 + {
  224 + name:'G10',
  225 + isShow:true,
  226 + className:'',
  227 + imgEmpty:false,
  228 + width:''
  229 + }
  230 + ],
  231 + [],
  232 + [
  233 +
  234 + {
  235 + name:'F1',
  236 + isShow:true,
  237 + className:'',
  238 + imgEmpty:false,
  239 + width:''
  240 + },
  241 + {
  242 + name:'F2',
  243 + isShow:true,
  244 + className:'',
  245 + imgEmpty:false,
  246 + width:''
  247 + },
  248 + {
  249 + name:'F3',
  250 + isShow:true,
  251 + className:'',
  252 + imgEmpty:false,
  253 + width:''
  254 + },
  255 + {
  256 + name:'F4',
  257 + isShow:true,
  258 + className:'',
  259 + imgEmpty:false,
  260 + width:''
  261 + },
  262 + {
  263 + name:'F4',
  264 + isShow:true,
  265 + className:'',
  266 + imgEmpty:false,
  267 + width:''
  268 + },
  269 + {
  270 + name:'F6',
  271 + isShow:true,
  272 + className:'',
  273 + imgEmpty:false,
  274 + width:''
  275 + },
  276 + {
  277 + name:'F7',
  278 + isShow:true,
  279 + className:'',
  280 + imgEmpty:false,
  281 + width:''
  282 + },
  283 + {
  284 + name:'F8',
  285 + isShow:true,
  286 + className:'',
  287 + imgEmpty:false,
  288 + width:''
  289 + },
  290 + {
  291 + name:'F9',
  292 + isShow:true,
  293 + className:'',
  294 + imgEmpty:false,
  295 + width:''
  296 + },
  297 + {
  298 + name:'F10',
  299 + isShow:true,
  300 + className:'',
  301 + imgEmpty:false,
  302 + width:''
  303 + }
  304 + ],
  305 + [],
  306 + [
  307 +
  308 + {
  309 + name:'E1',
  310 + isShow:true,
  311 + className:'',
  312 + imgEmpty:false,
  313 + width:''
  314 + },
  315 + {
  316 + name:'E2',
  317 + isShow:true,
  318 + className:'',
  319 + imgEmpty:false,
  320 + width:''
  321 + },
  322 + {
  323 + name:'E3',
  324 + isShow:true,
  325 + className:'',
  326 + imgEmpty:false,
  327 + width:''
  328 + },
  329 + {
  330 + name:'E4',
  331 + isShow:true,
  332 + className:'',
  333 + imgEmpty:false,
  334 + width:''
  335 + },
  336 + {
  337 + name:'E4',
  338 + isShow:true,
  339 + className:'',
  340 + imgEmpty:false,
  341 + width:''
  342 + },
  343 + {
  344 + name:'E6',
  345 + isShow:true,
  346 + className:'',
  347 + imgEmpty:false,
  348 + width:''
  349 + },
  350 + {
  351 + name:'E7',
  352 + isShow:true,
  353 + className:'',
  354 + imgEmpty:false,
  355 + width:''
  356 + },
  357 + {
  358 + name:'E8',
  359 + isShow:true,
  360 + className:'',
  361 + imgEmpty:false,
  362 + width:''
  363 + },
  364 + {
  365 + name:'E9',
  366 + isShow:true,
  367 + className:'',
  368 + imgEmpty:false,
  369 + width:''
  370 + },
  371 + {
  372 + name:'E10',
  373 + isShow:true,
  374 + className:'',
  375 + imgEmpty:false,
  376 + width:''
  377 + }
  378 + ],
  379 + [],
  380 + [
  381 +
  382 + {
  383 + name:'D1',
  384 + isShow:true,
  385 + className:'',
  386 + imgEmpty:false,
  387 + width:''
  388 + },
  389 + {
  390 + name:'D2',
  391 + isShow:true,
  392 + className:'',
  393 + imgEmpty:false,
  394 + width:''
  395 + },
  396 + {
  397 + name:'D3',
  398 + isShow:true,
  399 + className:'',
  400 + imgEmpty:false,
  401 + width:''
  402 + },
  403 + {
  404 + name:'D4',
  405 + isShow:true,
  406 + className:'',
  407 + imgEmpty:false,
  408 + width:''
  409 + },
  410 + {
  411 + name:'D4',
  412 + isShow:true,
  413 + className:'',
  414 + imgEmpty:false,
  415 + width:''
  416 + },
  417 + {
  418 + name:'D6',
  419 + isShow:true,
  420 + className:'',
  421 + imgEmpty:false,
  422 + width:''
  423 + },
  424 + {
  425 + name:'D7',
  426 + isShow:true,
  427 + className:'',
  428 + imgEmpty:false,
  429 + width:''
  430 + },
  431 + {
  432 + name:'D8',
  433 + isShow:true,
  434 + className:'',
  435 + imgEmpty:false,
  436 + width:''
  437 + },
  438 + {
  439 + name:'D9',
  440 + isShow:true,
  441 + className:'',
  442 + imgEmpty:false,
  443 + width:''
  444 + }
  445 + ],
  446 + [],
  447 + [
  448 +
  449 + {
  450 + name:'',
  451 + isShow:false,
  452 + className:'',
  453 + imgEmpty:false,
  454 + width:''
  455 + },
  456 + {
  457 + name:'',
  458 + isShow:false,
  459 + className:'',
  460 + imgEmpty:false,
  461 + width:''
  462 + },
  463 + {
  464 + name:'',
  465 + isShow:false,
  466 + className:'',
  467 + imgEmpty:false,
  468 + width:''
  469 + },
  470 + {
  471 + name:'',
  472 + isShow:false,
  473 + className:'',
  474 + imgEmpty:false,
  475 + width:''
  476 + },
  477 + {
  478 + name:'C5',
  479 + isShow:true,
  480 + className:'',
  481 + imgEmpty:false,
  482 + width:''
  483 + },
  484 + {
  485 + name:'C6',
  486 + isShow:true,
  487 + className:'',
  488 + imgEmpty:false,
  489 + width:''
  490 + },
  491 + {
  492 + name:'C7',
  493 + isShow:true,
  494 + className:'',
  495 + imgEmpty:false,
  496 + width:''
  497 + },
  498 + {
  499 + name:'C8',
  500 + isShow:true,
  501 + className:'',
  502 + imgEmpty:false,
  503 + width:''
  504 + },
  505 + {
  506 + name:'C9',
  507 + isShow:true,
  508 + className:'',
  509 + imgEmpty:false,
  510 + width:''
  511 + },
  512 + {
  513 + name:'C10',
  514 + isShow:true,
  515 + className:'',
  516 + imgEmpty:false,
  517 + width:''
  518 + }
  519 + ],
  520 + [],
  521 + [
  522 +
  523 + {
  524 + name:'',
  525 + isShow:false,
  526 + className:'',
  527 + imgEmpty:false,
  528 + width:''
  529 + },
  530 + {
  531 + name:'',
  532 + isShow:false,
  533 + className:'',
  534 + imgEmpty:false,
  535 + width:''
  536 + },
  537 + {
  538 + name:'',
  539 + isShow:false,
  540 + className:'',
  541 + imgEmpty:false,
  542 + width:''
  543 + },
  544 + {
  545 + name:'',
  546 + isShow:false,
  547 + className:'',
  548 + imgEmpty:false,
  549 + width:''
  550 + },
  551 + {
  552 + name:'',
  553 + isShow:false,
  554 + className:'',
  555 + imgEmpty:false,
  556 + width:''
  557 + },
  558 + {
  559 + name:'',
  560 + isShow:false,
  561 + className:'',
  562 + imgEmpty:false,
  563 + width:''
  564 + },
  565 + {
  566 + name:'B7',
  567 + isShow:true,
  568 + className:'',
  569 + imgEmpty:false,
  570 + width:''
  571 + },
  572 + {
  573 + name:'B8',
  574 + isShow:true,
  575 + className:'',
  576 + imgEmpty:false,
  577 + width:''
  578 + },
  579 + {
  580 + name:'B9',
  581 + isShow:true,
  582 + className:'',
  583 + imgEmpty:false,
  584 + width:''
  585 + },
  586 + {
  587 + name:'B10',
  588 + isShow:true,
  589 + className:'',
  590 + imgEmpty:false,
  591 + width:''
  592 + }
  593 + ],
  594 + ],
  595 + tableData2:[
  596 + [
  597 +
  598 + {
  599 + name:'I14',
  600 + isShow:true,
  601 + className:'',
  602 + imgEmpty:false,
  603 + width:''
  604 + },
  605 + {
  606 + name:'I15',
  607 + isShow:true,
  608 + className:'',
  609 + imgEmpty:false,
  610 + width:''
  611 + },
  612 + {
  613 + name:'I16',
  614 + isShow:true,
  615 + className:'',
  616 + imgEmpty:false,
  617 + width:''
  618 + },
  619 + {
  620 + name:'I17',
  621 + isShow:true,
  622 + className:'',
  623 + imgEmpty:false,
  624 + width:''
  625 + },
  626 + {
  627 + name:'I18',
  628 + isShow:true,
  629 + className:'',
  630 + imgEmpty:false,
  631 + width:''
  632 + },
  633 + {
  634 + name:'I19',
  635 + isShow:true,
  636 + className:'',
  637 + imgEmpty:false,
  638 + width:''
  639 + }
  640 + ],
  641 + [],
  642 + [
  643 +
  644 + {
  645 + name:'H14',
  646 + isShow:true,
  647 + className:'',
  648 + imgEmpty:false,
  649 + width:''
  650 + },
  651 + {
  652 + name:'H15',
  653 + isShow:true,
  654 + className:'',
  655 + imgEmpty:false,
  656 + width:''
  657 + },
  658 + {
  659 + name:'H16',
  660 + isShow:true,
  661 + className:'',
  662 + imgEmpty:false,
  663 + width:''
  664 + },
  665 + {
  666 + name:'H17',
  667 + isShow:true,
  668 + className:'',
  669 + imgEmpty:false,
  670 + width:''
  671 + },
  672 + {
  673 + name:'H18',
  674 + isShow:true,
  675 + className:'',
  676 + imgEmpty:false,
  677 + width:''
  678 + },
  679 + {
  680 + name:'H19',
  681 + isShow:true,
  682 + className:'',
  683 + imgEmpty:false,
  684 + width:''
  685 + },
  686 + {
  687 + name:'',
  688 + isShow:false,
  689 + className:'',
  690 + imgEmpty:false,
  691 + width:''
  692 + },
  693 + {
  694 + name:'',
  695 + isShow:false,
  696 + className:'',
  697 + imgEmpty:false,
  698 + width:''
  699 + },
  700 + {
  701 + name:'H22',
  702 + isShow:true,
  703 + className:'',
  704 + imgEmpty:false,
  705 + width:''
  706 + },
  707 + {
  708 + name:'H23',
  709 + isShow:true,
  710 + className:'',
  711 + imgEmpty:false,
  712 + width:''
  713 + },
  714 + {
  715 + name:'H24',
  716 + isShow:true,
  717 + className:'',
  718 + imgEmpty:false,
  719 + width:''
  720 + }
  721 + ],
  722 + [],
  723 + [
  724 +
  725 + {
  726 + name:'G14',
  727 + isShow:true,
  728 + className:'',
  729 + imgEmpty:false,
  730 + width:''
  731 + },
  732 + {
  733 + name:'G15',
  734 + isShow:true,
  735 + className:'',
  736 + imgEmpty:false,
  737 + width:''
  738 + },
  739 + {
  740 + name:'G16',
  741 + isShow:true,
  742 + className:'',
  743 + imgEmpty:false,
  744 + width:''
  745 + },
  746 + {
  747 + name:'G17',
  748 + isShow:true,
  749 + className:'',
  750 + imgEmpty:false,
  751 + width:''
  752 + },
  753 + {
  754 + name:'G18',
  755 + isShow:true,
  756 + className:'',
  757 + imgEmpty:false,
  758 + width:''
  759 + },
  760 +
  761 + {
  762 + name:'',
  763 + isShow:false,
  764 + className:'',
  765 + imgEmpty:false,
  766 + width:''
  767 + },
  768 + {
  769 + name:'',
  770 + isShow:false,
  771 + className:'',
  772 + imgEmpty:false,
  773 + width:''
  774 + },
  775 + {
  776 + name:'G21',
  777 + isShow:true,
  778 + className:'',
  779 + imgEmpty:false,
  780 + width:''
  781 + },
  782 + {
  783 + name:'G22',
  784 + isShow:true,
  785 + className:'',
  786 + imgEmpty:false,
  787 + width:''
  788 + },
  789 + {
  790 + name:'G23',
  791 + isShow:true,
  792 + className:'',
  793 + imgEmpty:false,
  794 + width:''
  795 + },
  796 + {
  797 + name:'G24',
  798 + isShow:true,
  799 + className:'',
  800 + imgEmpty:false,
  801 + width:''
  802 + },
  803 + {
  804 + name:'G25',
  805 + isShow:true,
  806 + className:'',
  807 + imgEmpty:false,
  808 + width:''
  809 + },
  810 + ],
  811 + [],
  812 + [
  813 +
  814 + {
  815 + name:'F14',
  816 + isShow:true,
  817 + className:'',
  818 + imgEmpty:false,
  819 + width:''
  820 + },
  821 + {
  822 + name:'F15',
  823 + isShow:true,
  824 + className:'',
  825 + imgEmpty:false,
  826 + width:''
  827 + }
  828 + ],
  829 + [],
  830 + [
  831 +
  832 + {
  833 + name:'E14',
  834 + isShow:true,
  835 + className:'',
  836 + imgEmpty:false,
  837 + width:''
  838 + },
  839 + {
  840 + name:'E15',
  841 + isShow:true,
  842 + className:'',
  843 + imgEmpty:false,
  844 + width:''
  845 + },
  846 + {
  847 + name:'E16',
  848 + isShow:true,
  849 + className:'',
  850 + imgEmpty:false,
  851 + width:''
  852 + },
  853 +
  854 + {
  855 + name:'',
  856 + isShow:false,
  857 + className:'',
  858 + imgEmpty:false,
  859 + width:''
  860 + },
  861 + {
  862 + name:'',
  863 + isShow:false,
  864 + className:'',
  865 + imgEmpty:false,
  866 + width:''
  867 + },
  868 + {
  869 + name:'',
  870 + isShow:false,
  871 + className:'',
  872 + imgEmpty:false,
  873 + width:''
  874 + },
  875 + {
  876 + name:'E20',
  877 + isShow:true,
  878 + className:'',
  879 + imgEmpty:false,
  880 + width:''
  881 + },
  882 + {
  883 + name:'E21',
  884 + isShow:true,
  885 + className:'',
  886 + imgEmpty:false,
  887 + width:''
  888 + },
  889 + {
  890 + name:'E22',
  891 + isShow:true,
  892 + className:'',
  893 + imgEmpty:false,
  894 + width:''
  895 + },
  896 + {
  897 + name:'E23',
  898 + isShow:true,
  899 + className:'',
  900 + imgEmpty:false,
  901 + width:''
  902 + },
  903 + {
  904 + name:'E24',
  905 + isShow:true,
  906 + className:'',
  907 + imgEmpty:false,
  908 + width:''
  909 + }
  910 + ],
  911 + [],
  912 + [
  913 +
  914 + {
  915 + name:'D14',
  916 + isShow:true,
  917 + className:'',
  918 + imgEmpty:false,
  919 + width:''
  920 + },
  921 + {
  922 + name:'D15',
  923 + isShow:true,
  924 + className:'',
  925 + imgEmpty:false,
  926 + width:''
  927 + },
  928 + {
  929 + name:'D16',
  930 + isShow:true,
  931 + className:'',
  932 + imgEmpty:false,
  933 + width:''
  934 + },
  935 + {
  936 + name:'D17',
  937 + isShow:true,
  938 + className:'',
  939 + imgEmpty:false,
  940 + width:''
  941 + },
  942 + {
  943 + name:'D18',
  944 + isShow:true,
  945 + className:'',
  946 + imgEmpty:false,
  947 + width:''
  948 + },
  949 +
  950 + {
  951 + name:'D19',
  952 + isShow:true,
  953 + className:'',
  954 + imgEmpty:false,
  955 + width:''
  956 + },
  957 + {
  958 + name:'',
  959 + isShow:false,
  960 + className:'',
  961 + imgEmpty:false,
  962 + width:''
  963 + },
  964 + {
  965 + name:'',
  966 + isShow:false,
  967 + className:'',
  968 + imgEmpty:false,
  969 + width:''
  970 + },
  971 + {
  972 + name:'D22',
  973 + isShow:true,
  974 + className:'',
  975 + imgEmpty:false,
  976 + width:''
  977 + },
  978 + {
  979 + name:'D23',
  980 + isShow:true,
  981 + className:'',
  982 + imgEmpty:false,
  983 + width:''
  984 + },
  985 + {
  986 + name:'D24',
  987 + isShow:true,
  988 + className:'',
  989 + imgEmpty:false,
  990 + width:''
  991 + },
  992 + {
  993 + name:'D25',
  994 + isShow:true,
  995 + className:'',
  996 + imgEmpty:false,
  997 + width:''
  998 + }
  999 + ],
  1000 + [],
  1001 + [
  1002 +
  1003 + {
  1004 + name:'C14',
  1005 + isShow:true,
  1006 + className:'',
  1007 + imgEmpty:false,
  1008 + width:''
  1009 + },
  1010 + {
  1011 + name:'C15',
  1012 + isShow:true,
  1013 + className:'',
  1014 + imgEmpty:false,
  1015 + width:''
  1016 + }
  1017 + ],
  1018 + [],
  1019 + [
  1020 +
  1021 + {
  1022 + name:'B14',
  1023 + isShow:true,
  1024 + className:'',
  1025 + imgEmpty:false,
  1026 + width:''
  1027 + },
  1028 + {
  1029 + name:'B15',
  1030 + isShow:true,
  1031 + className:'',
  1032 + imgEmpty:false,
  1033 + width:''
  1034 + },
  1035 + {
  1036 + name:'B16',
  1037 + isShow:true,
  1038 + className:'',
  1039 + imgEmpty:false,
  1040 + width:''
  1041 + },
  1042 + {
  1043 + name:'B17',
  1044 + isShow:true,
  1045 + className:'',
  1046 + imgEmpty:false,
  1047 + width:''
  1048 + },
  1049 + {
  1050 + name:'B18',
  1051 + isShow:true,
  1052 + className:'',
  1053 + imgEmpty:false,
  1054 + width:''
  1055 + },
  1056 +
  1057 + {
  1058 + name:'B19',
  1059 + isShow:true,
  1060 + className:'',
  1061 + imgEmpty:false,
  1062 + width:''
  1063 + }
  1064 + ],
  1065 + ]
  1066 + }
  1067 + },
  1068 +
  1069 + setup(props, {attrs, slots, emit}) {
  1070 + const {proxy} = Vue.getCurrentInstance();
  1071 + // 获取状态
  1072 + const { changeIndex} = indirectManage()
  1073 + // 监听编辑状态
  1074 + Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
  1075 + console.log('vux',changeIndex.value,newVal)
  1076 + proxy.isDetailShow=false;
  1077 +
  1078 + });
  1079 +
  1080 + // 挂载完
  1081 + Vue.onMounted(() => {
  1082 +
  1083 + })
  1084 + const goDetail=(item)=>{
  1085 + proxy.allowClickData.map((itemName,index)=>{
  1086 + if(item.name==itemName){
  1087 + proxy.isDetailShow=true;
  1088 + proxy.detailData=item;
  1089 + }
  1090 + })
  1091 + }
  1092 +
  1093 + return{
  1094 + goDetail
  1095 + }
  1096 + }
  1097 +}
  1 +<div v-if="!isDetailShow" class="outlinediv" >
  2 + <!-- <span>3号机房平面图</span>-->
  3 + <div class="xiaoshanthird-topcabinet">
  4 + <table>
  5 +
  6 + <tr v-for="(items,indexs) in tableData">
  7 + <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
  8 + <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="">
  9 + <span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
  10 + </td>
  11 + </tr>
  12 + </table>
  13 + </div>
  14 +</div>
  15 +<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>