Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into joke

+ALTER TABLE `cloud_backend_monitor_1122`.`b_ops_person`
+ADD COLUMN `politicsStatus` varchar(30) NULL COMMENT '政治面貌' AFTER `idcard`;
\ No newline at end of file

@@ -359,9 +359,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
                 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
                 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-
-                {field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true},
                 {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "HUAWEI_CLOUD_PHYSICSHOST": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -377,10 +376,9 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
                 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
                 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-
-                // 2021-11-22 徐毫杰 连接状态无数据改成展示主机状态
-                {field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true},
                 {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                // 2021-11-22 徐毫杰 连接状态无数据改成展示主机状态
+                {field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true}
             ],
             "HUAWEI_CLOUD_VIRTUALHOST": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -396,9 +394,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
                 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
                 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-
-                {field: 'hostState', title: '主机状态', align: 'center', width: 85, templet: '#hostStateTpl', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "HUAWEI_CLOUD_STORAGE": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -414,8 +411,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
                 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
                 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-                {field: 'hostState', title: '主机状态', align: 'center', width: 85, templet: '#hostStateTpl', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "HUAWEI_CLOUD_SWITCHBOARD": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -427,14 +424,12 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 // {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
                 // {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
                 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
-
-                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-                {field: 'hostState', title: '主机状态', align: 'center', width: 85, templet: '#hostStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
-
+                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
+                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "HUAWEI_CLOUD_FIREWALL": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -446,14 +441,12 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 // {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
                 // {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
                 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
-
-                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-                {field: 'hostState', title: '主机状态', align: 'center', width: 85, templet: '#hostStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
-
+                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
+                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "ALI_CLOUD_ECS": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -467,14 +460,12 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
                 {field: 'ptName', title: '所属平台', minWidth: x_130, align: 'center', sort: true},
                 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
-
-                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
-
+                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
+                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "ALI_CLOUD_RDS": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -486,13 +477,12 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
                 {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
                 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
-                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-                {field: 'hostState', title: '主机状态', align: 'center', width: 85, templet: '#hostStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
-
+                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
+                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "ALI_CLOUD_SLB": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -502,14 +492,12 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 },
                 {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
                 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
-
-                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-
-                {field: 'hostState', title: '主机状态', align: 'center', width: 85, templet: '#hostStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
+                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
+                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
                 {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "ALI_CLOUD_OSS": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -519,13 +507,12 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 },
                 {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
                 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
-                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-                {field: 'hostState', title: '主机状态', align: 'center', width: 85, templet: '#hostStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
-
+                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
+                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "ALI_ARMS": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -550,34 +537,29 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 },
                 {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
                 {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
-
-                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
-
-                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
+                {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
+                {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
+                {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
             ],
             "A_CLOUD_PHYSICSHOST": [
                 // {type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
-
+                {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
                 {
                     field: 'resName', title: '资源名称', minWidth: 250, sort: true,
                     templet: '#resindex_resName'
                 },
-                {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
-                {field: 'resTypeName', title: '资源类型', width: 100, align: 'center'},
                 {field: 'health', title: '健康状态', width: 120, align: 'center', sort: true, templet: '#healthTpl'},
                 {field: 'cpuRate', title: 'CPU使用率', align: 'center', width: 120, templet: '#cpuRateTpl', sort: true},
                 {field: 'memoryRate', title: '内存使用率', align: 'center', width: 120, templet: '#memoryRateTpl', sort: true},
-
+                {field: 'lastColTime', title: '最近采集时间', width: 160, align: 'center', sort: true},
                 {field: 'linkState', title: '连接状态', align: 'center', width: 110, templet: '#linkStateTpl', sort: true},
                 {field: 'adminName', title: '负责人', width: 125, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', width: 120, align: 'center', sort: true},
-
-                {field: 'state', title: '资源状态', width: 120, align: 'center', sort: true, templet: '#resStateTpl'},
-                {field: 'lastColTime', title: '最近采集时间', width: 160, align: 'center', sort: true}
+                {field: 'resTypeName', title: '资源类型', width: 100, align: 'center'},
+                {field: 'state', title: '资源状态', width: 120, align: 'center', sort: true, templet: '#resStateTpl'}
             ],
             "VIRTUALIZATION_COLONY": [
                 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -2575,21 +2557,19 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'vmmemoryUseRate', title: '虚拟内存使用率', align: 'center', minWidth: x_165, templet: '#vmmemoryRateTpl', sort: true},
                 {field: 'maxNetCardUpRate', title: '上行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardUpRate}} kb/s</div>'},
                 {field: 'maxNetCardDownRate', title: '下行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardDownRate}} kb/s</div>'},
+                {field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true},
                 {field: 'linkState', title: '连接状态', align: 'center', minWidth: x_110, templet: '#linkStateTpl', sort: true},
-                {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
-                {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'},
                 {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true}
+                {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
+                {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'}
             ],
             "ALI_CLOUD_PLAT":[
-
+                {field: 'ip', title: 'IP地址', minWidth: x_130, align: 'center', sort: true},
                 {
                     field: 'resName', title: '资源名称', minWidth: x_300, sort: true,
                     templet: '#resindex_resName'
                 },
-                {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
-                {field: 'ip', title: 'IP地址', minWidth: x_130, align: 'center', sort: true},
                 {field: 'health', title: '健康状态', minWidth: x_110, align: 'center', sort: true, templet: '#healthTpl'},
                 // {field: 'diskSize', title: '磁盘总大小', minWidth: 120, align: 'center'},
                 {field: 'fileSysUseRate', title: '文件系统使用率(最大)', align: 'center', minWidth: x_185, templet: '#fileUseRateTpl', sort: true},
@@ -2603,14 +2583,12 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'vmmemoryUseRate', title: '虚拟内存使用率', align: 'center', minWidth: x_165, templet: '#vmmemoryRateTpl', sort: true},
                 {field: 'maxNetCardUpRate', title: '上行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardUpRate}} kb/s</div>'},
                 {field: 'maxNetCardDownRate', title: '下行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardDownRate}} kb/s</div>'},
-
+                {field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true},
                 {field: 'linkState', title: '连接状态', align: 'center', minWidth: x_110, templet: '#linkStateTpl', sort: true},
-
-
-                {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'},
                 {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
                 {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
-                {field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true}
+                {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
+                {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'}
             ],
             "ARMS":[
                 {

@@ -7854,3 +7854,6 @@ form[lay-filter="activewarning-form"] .layui-inline {
 .info-ali-cloud-ecs span{
     width: 16%!important;
 }
+.layui-logo{
+    pointer-events: none;
+}
\ No newline at end of file

@@ -47,15 +47,15 @@
                             <i class="iconfont icon-icon--download"></i>
                             下载
                         </el-button>
-                        <el-button :size="$global.elementSize" @click="showFolder(true,true)" v-if="canAddFolder && !isRecycle">
-                            <i class="iconfont icon-weidaqiadewenjianjia"></i>
-                            新增文件夹
-                        </el-button>
+<!--                        <el-button :size="$global.elementSize" @click="showFolder(true,true)" v-if="canAddFolder && !isRecycle">-->
+<!--                            <i class="iconfont icon-weidaqiadewenjianjia"></i>-->
+<!--                            新增文件夹-->
+<!--                        </el-button>-->
                         <el-button type="primary" :size="$global.elementSize" @click="showUploadFile(true)" v-if=" !isRecycle">
                             <i class="iconfont icon-icon--shangchuan"></i>
                             上传
                         </el-button>
-                        <el-button type="danger" :size="$global.elementSize" @click="deleteDocument('','file')">
+                        <el-button type="danger" :size="$global.elementSize" @click="deleteDocument('','file')"  v-if="isRecycle">
                             <i class="iconfont icon-shanchuwenjianjia"></i>
                             删除
                         </el-button>
@@ -132,7 +132,7 @@
                     <el-input :size="$global.elementSize" v-model="docForm.name" clearable ></el-input>
                 </el-form-item>
 
-                <div v-if="!isUserFolder">
+               <!-- <div v-if="!isUserFolder">
                     <el-form-item label="文档编号" prop="docNo">
                         <el-input :size="$global.elementSize" v-model="docForm.docNo" clearable></el-input>
                     </el-form-item>
@@ -140,7 +140,7 @@
                     <el-form-item label="文档类型" prop="type">
                         <el-input :size="$global.elementSize" v-model="docForm.type" clearable></el-input>
                     </el-form-item>
-                </div>
+                </div>-->
 
 
                 <el-form-item label="排序" prop="sort">

@@ -414,6 +414,7 @@ export default {
         let addDialogVisible = Vue.ref(false);
         let addDialogTitle = Vue.ref('');
         let docForm = Vue.ref({
+            id:'',
             name: '',
             docNo: '',
             type: '',
@@ -421,6 +422,7 @@ export default {
         });
         let showFolder = (flg, isUser) => {
             docForm.value = {
+                id:'',
                 name: '',
                 docNo: '',
                 type: '',
@@ -428,8 +430,8 @@ export default {
             };
             isUserFolder.value = isUser;
             addDialogVisible.value = flg;
-            let title = `新建树节点“${currentNodeData.value.name}“子文件夹`;
-            if (isUser) {
+            let title = `修改树节点“${currentNodeData.value.name}“子文件夹`;
+            if (addDialogVisible.value) {
                 title = `新建自定义文件夹`;
             }
             addDialogTitle.value = title
@@ -561,7 +563,6 @@ export default {
                 authUsernames: userIds,
                 authOrgIds: orgInfo
             }
-
             proxy.$http.post(`/inspection-report/file/doc/grant`, params, function (res) {
                 if (res && res.success) {
                     proxy.$global.showMsg('授权成功!');

@@ -138,10 +138,19 @@ export default {
             proxy.$http.get("/api-user/org/queryOrgs?searchQuery=", {}, function (res) {
                 if (res && res.data) {
                     res.data.map(function (v) {
+                        let desc = [];
+                        let value = v.value;
+                        let name = v.name;
+                        if (name) {
+                            desc.push(name);
+                        }
+                        if (value) {
+                            desc.push(value);
+                        }
                         orgArr.value.push({
                             value: v.orgId,
                             type:'ORG',
-                            desc: ``,
+                            desc: `${desc.join(' / ')}`,
                             props : v
                         })
                     });

@@ -162,7 +162,7 @@
 
                 {{#
                 var dataName = layui.setter.response.dataName;
-                var fisthref = "";
+                var fisthref = "/index";
                 var defaultMenu = d.str;
                 var defaultModuleid = '';
                 var defaultPath = '';
@@ -321,8 +321,14 @@
                     </li>
                 </ul>
             </div>
+            <div style="padding:0 10px;float: left;">
+                <dd  layadmin-event="toYTHViewScreen" ><a><img src="/src/style/img/icon-yitihuadaping.png"  style="width: 16px;height: 16px"></a></dd>
+            </div>
+
             <div class="layui-tab"   lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
+
                 <ul class="layui-tab-title" id="LAY_app_tabsheader">
+
                     {{#  if(d.data.length >= 1 ){ }}
                     {{# if(d.data[0].moduleid == 'index'){ }}
                     <li lay-id="/"><i class="layui-icon layui-icon-home"></i></li>
@@ -335,6 +341,8 @@
                     <li lay-id="/"><i class="layui-icon layui-icon-home"></i></li>
                     {{#  } }}
                 </ul>
+
+
             </div>
         </div>
     </script>

@@ -40,6 +40,10 @@
 
 @import "../css/navTabs.css";
 
+@import "../css/machineroom.css";
+
+@import "../css/Details.css";
+
 /*故障诊断书*/
 @import "../css/faultDiagnosis.css";
 

+
+body{
+   /* background-image: url(/vue3/src/assets/images/machineRoom/img-bg-1.png);
+    background-size: 100%;*/
+
+}
+li{
+    list-style: none
+}
+
+.all{
+    display:flex;
+    justify-content: space-between;
+    overflow: hidden;
+    width:90%;
+    margin:auto;
+}
+.flex-center{
+    justify-content: center;
+}
+
+/* 左侧机柜样式 */
+
+.contain{
+
+    width:413px;
+    height:710px;
+    /*margin-left:3%;*/
+    /*margin-top:5%;*/
+    /* background-color: red; */
+    background-image: url(/vue3/src/assets/images/machineRoom/img-no-machine.png);
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: relative;
+
+}
+
+.contain-server{
+    /*position: absolute;*/
+    /*width:365px;*/
+    /*height:40%;*/
+    /*margin-left:18px;*/
+    /*bottom:7%; */
+    display: flex;
+    justify-content: space-between;
+    flex-direction:column;
+    align-items: center;
+    /* background-color: red; */
+
+}
+
+
+.serve{
+    width:382px;
+    height:61px;
+    /*margin-left:-3px;*/
+    background-image: url(/vue3/src/assets/images/machineRoom/img-4Uservice.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin-bottom: 10px;
+    position: absolute;
+    bottom: 0;
+}
+.serve-4u-1{
+    bottom: 66px;
+}
+.serve-4u-2{
+    bottom: 132px;
+}
+.serve-4u-3{
+    bottom: 198px;
+}
+.serve-4u-4{
+    bottom: 264px;
+}
+.serve-4u-5{
+    bottom: 330px;
+}
+.serve-4u-6{
+    bottom: 396px;
+}
+.serve-4u-7{
+    bottom: 462px;
+}
+.serve-4u-8{
+    bottom: 528px;
+}
+.serve-4u-9{
+    bottom: 594px;
+}
+.serve-4u-10{
+    bottom: 660px;
+}
+.serve-8u-1{
+    bottom: 137px;
+}
+.serve-8u-2{
+    bottom: 274px;
+}
+.serve-8u-3{
+    bottom: 411px;
+}
+.serve-8u-4{
+    bottom: 548px;
+}
+.serve-8u-5{
+    bottom: 878px;
+}
+.img-serve-1{
+    background-image: url(/vue3/src/assets/images/machineRoom/img-1Uservice.png);
+    height:17px;
+    width:383px;
+}
+.img-serve-2{
+    background-image: url(/vue3/src/assets/images/machineRoom/img-2Uservice.png);
+    height:34px;
+    width:383px;
+}
+.img-serve-6{
+    background-image: url(/vue3/src/assets/images/machineRoom/img-6Uservice.png);
+    height:100px;
+    width:383px;
+}
+.img-serve-8{
+    background-image: url(/vue3/src/assets/images/machineRoom/img-8Uservice.png);
+    height:127px;
+    width:383px;
+}
+.img-serve-10{
+    background-image: url(/vue3/src/assets/images/machineRoom/img-10Uservice.png);
+    height:157px;
+    width:383px;
+}
+.img-serve-1 .img-serve-text{
+    font-size: 11px;
+    line-height: 17px;
+}
+.img-serve-1 .state{
+    height: 16px;
+    width: 16px;
+    margin: 0;
+}
+.img-serve-2 .state{
+    height: 20px;
+    width: 20px;
+    margin: 0;
+}
+.img-serve-2 .img-serve-text{
+    font-size: 11px;
+    line-height: 34px;
+}
+.img-serve{
+
+    /*width:340px;
+    height:50px;
+    margin:12px auto;*/
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+
+}
+
+.lamp{
+    display:flex;
+    width:58%;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.server-flex{
+    display: flex;
+    justify-content: space-around;
+    width:42%;
+}
+.img-lamp{
+    /*margin-left:15px;*/
+    /*margin-top:10px*/
+    display: flex;
+    justify-content: space-around;
+    width: 50%;
+}
+
+/* 服务器状态图片样式 */
+.state{
+    width:35px;
+    height:35px;
+    /*margin-top:8px;*/
+    margin-left:4px;
+}
+
+.img-serve-text{
+    color:#fff;
+    line-height: 50px;
+    /*margin-left:10px;*/
+}
+
+
+.img-weblog{
+    margin-left:34px;
+    /*margin-top:15px;*/
+    width:30px;
+    height:20px;
+
+}
+
+
+
+
+/* 右侧机柜详细信息样式 */
+
+.info{
+    width:500px;
+    height:700px;
+    margin-right:8%;
+    /*margin-top:5%;*/
+    /* background-color: red; */
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+
+}
+
+
+.info-top{
+    height:340px;
+    /*margin-top:-10px;*/
+    background-image: url(/vue3/src/assets/images/machineRoom/img-machineInfo-bg.png);
+
+}
+
+.info-bottom{
+    height:340px;
+    margin-top:20px;
+    background-image: url(/vue3/src/assets/images/machineRoom/img-deviceInfo-bg.png);
+}
+.contain{
+    display: flex;
+    justify-content: center;
+    align-items: end;
+}
+.info-contain{
+    width:90%;
+    display:inline-block;
+    height:250px;
+    margin-top:60px;
+    margin-left: 60px;
+
+}
+
+
+.info-text{
+    height:50px;
+    font-weight: bolder;
+    font-size: 20px;
+    color:#fff;
+    text-align: left;
+    /* background-color: rgb(59, 185, 8); */
+}
+
+.info-text-bot{
+    margin-top:-15px;
+    height:200px;
+    font-size: 16px;
+    letter-spacing: 2px;
+    color:#fff;
+    text-align: left;
+    /* background-color: rgb(93, 15, 196); */
+}
+.info-text-bot p{
+    text-align: left;
+    margin:16px 0;
+}
+.img-serve{
+    cursor: pointer;
+}
+.info-bottom{
+    /*display:none;*/
+}
+body::-webkit-scrollbar{
+    width:15px;
+}
+/* 垂直滚动条的滑动块 */
+body::-webkit-scrollbar-thumb:vertical {
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color:#169db2;
+}
+/*修改滚动条的下面的样式*/
+body::-webkit-scrollbar-track{
+    background-color:#05235c;
+    -webkit-borderd-radius:2em;
+    -moz-borderd-radius:2em;
+    borderd-radius:2em;
+}
\ No newline at end of file

@@ -3,6 +3,9 @@
     justify-content: center;
     margin-top: 30px;
 }
+body{
+    padding:0;
+}
 .iconAdd{
     width:50%;
     height:240px;
@@ -16,7 +19,8 @@
 /*add页面*/
 .analysis-add-container{
     height: 100%;
-    background-color: #f6f6f6;
+    background-color: #FFFFFF;
+    overflow: auto;
 }
 .add-top{
     background-color: #FFFFFF;
@@ -79,6 +83,87 @@
     color: #337ab7;
     cursor: pointer;
 }
+.text-left{
+    text-align: left;
+}
+.analysis-list{
+    padding:20px;
+}
+.analysis-list table{
+    margin-top:0;
+}
+.list-title{
+    margin-bottom:20px;
+}
+.analysis-list .el-table th.el-table__cell{
+    color: rgb(30,159,255);
+    font-weight: bold;
+    background-color: rgb(235,245,249);
+}
+.icon-bg{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    background:rgb(30,159,255);
+    border-radius: 2px;
+    cursor: pointer;
+}
+.icon-list{
+    display: inline-block;
+    background-size: 100%;
+    background-position: center;
+    width: 14px;
+    height: 14px;
+}
+.button-flex-div-center span{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.button-flex-div-center .icon-list{
+    margin-right: 3px;
+}
+.list-search{
+    margin-bottom: 20px;
+}
+.icon-list-delete{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-delete.png");
+}
+.icon-list-group{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-group.png");
+}
 
+.icon-list-message{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-message.png");
+}
+.icon-list-safe{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-safe.png");
+}
 
+.icon-list-net{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-net.png");
+}
+.search-text{
+    cursor: pointer;
+}
+.alert-div{
+    position:absolute;
+    top:0;
+}
 
+.analysis-table-div{
+    margin-bottom: 34px;
+}
+.demo-pagination-block{
+    background: #FFFFFF;
+    position: fixed;
+    bottom: 0;
+    border: 1px    solid #ccc;
+    width: 100%;
+    text-align: left;
+    left: 0;
+    padding: 5px 10px;
+    z-index: 1;
+}

@@ -108,3 +108,6 @@
 .dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__nav{
     border-color: #00ccff;
 }
+.dataCenter-container .el-dialog__body{
+    min-height: 700px;
+}
\ No newline at end of file

+@charset "utf-8";
+*
+{
+    margin:0;
+    padding:0;
+}
+html
+{
+    width:100%;
+    height:100%;
+    font-size:14px;
+    font-family:Arial, Helvetica, sans-serif;
+    -webkit-text-size-adjust:none;
+    /*background-image:url("/vue3/src/assets/images/machineRoom/img-beijing-dp.png");
+    background-repeat: no-repeat;
+    background-position: center;*/
+}
+body
+{
+    /*padding:5px;*/
+}
+
+.outlinediv {
+    padding-top: 30px;
+    border: 2px solid #0a93be;
+    width: 900px;
+    height: 600px;
+    margin: 0 auto;
+    font-size: 16px;
+    border-radius: 5px;
+    text-align: center;
+    color: #bbb;
+    position: relative;
+    display: list-item;
+
+
+}
+.outlinediv span {
+    /*color: rgba(0, 0, 0, 0.89);*/
+    color: rgba(255, 255, 255, 0.89);
+    line-height: 20px;
+    font-size: 14px;
+}
+.outlinediv .xiaoshansecond-topcabinet{
+    margin-top: 20px;
+    margin-left: 7%;
+    padding: 20px;
+    width: 80%;
+    height:100px;
+
+}
+
+.outlinediv .xiaoshansecond-middlecabinet{
+    margin-top: 50px;
+    margin-bottom: 50px;
+    margin-left: 7%;
+    padding: 20px;
+    width: 80%;
+    height:100px;
+
+}
+.outlinediv .xiaoshansecond-bottomcabinet{
+    margin-left: 7%;
+    padding: 20px;
+    width: 80%;
+    height:100px;
+
+}
+.cabinet{
+    width:auto;height:auto;max-height:100%;max-width:100%;
+}
+table{
+    margin-top: 20px;
+    border-collapse:collapse;
+}
+table tr{
+    height: 50px;
+}
+tr.sevenempty {
+    height: 10px;
+}
+table tr td{
+    position: relative;
+    max-width: 35px;
+}
+
+table td .cabinetId{
+
+    position: absolute;/*绝对定位*/
+    top:20px;
+    width: 100%;
+    bottom: 0px;/*离底下0像素*/
+    left: 0px;/*离左边0像素*/
+    text-align: center;
+
+    font-size: 12px;
+
+    color: white;
+}
+.outlinediv .xiaoshanthird-topcabinet{
+    margin-left:22%;
+    padding: 20px;
+    width: 80%;
+}
+.outlinediv .xiaoshanseven-leftcabinet{
+    margin-left:1%;
+    width: 40%;
+}
+.outlinediv .xiaoshanseven-rightcabinet{
+    margin-left: 5px;
+    width: 40%;
+}
+.outlinediv .xiaoshanseven-middlecabinet{
+    margin-top: 20px;
+    padding-top: 30%;
+    border: 2px solid #111D1A;
+    width:12% ;
+    height: 255px;
+    text-align: center;
+}
+.outlinediv .huzhouone-topcabinet{
+    margin-left:10%;
+    width: 90%;
+}
+tr.zaibeione{
+    height: 90px;
+}
+.zaibei.cabinetId{
+    position: absolute;/*绝对定位*/
+    top:10px;
+    width: 100%;
+    bottom: 0px;/*离底下0像素*/
+    left: 0px;/*离左边0像素*/
+    text-align: center;
+
+    font-size: 8px;
+
+    color: white;
+}
+.cursorClass{
+    cursor: pointer;
+}
\ No newline at end of file

@@ -107,6 +107,11 @@
 
             <el-row :gutter="5">
                 <el-col :span="8">
+                    <el-form-item label="政治面貌" prop="politicsStatus" class="form-class">
+                        <el-input v-model="ruleForm.politicsStatus"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                     <el-form-item label="在职状态" prop="certificate" :readonly="isAdmin()" class="form-class">
                         <el-radio-group v-model="ruleForm.state">
                             <el-radio :label="1">在职</el-radio>

@@ -235,7 +235,8 @@ export default {
             quitTime: '',
             state: '',
             tel: '',
-            idcard:''
+            idcard:'',
+            politicsStatus:''
         })
 
         // 获取表格数据
@@ -259,7 +260,10 @@ export default {
 
         // 保存用户信息
         let saveUser = () => {
-
+            if(!ruleForm.value.politicsStatus){
+                proxy.$global.showMsg('政治面貌不能为空！',"warning");
+                return false;
+            }
             proxy.$http.post("/api-web/bOpsPerson/saveOrUpdate", ruleForm.value, function (res) {
                 if (res && res.code == 0) {
                     proxy.$global.showMsg('保存成功！');

@@ -194,9 +194,11 @@ export default {
             return  {
                 keyWords: keyWords.value,
                 resType: resTypeArr.value.join(','),
-                kpiType: kpiTypeArr.value.join(','),
-                bizType: busTypeArr.value.join(','),
-                configId: config.value
+                kpiId: kpiTypeArr.value.join(','),
+                busId: busTypeArr.value.join(','),
+                configId: config.value,
+                page:2,
+                limit:10
             }
         }
 

@@ -2,7 +2,7 @@
     <div class="add-top-title" style=" padding: 20px 20px 20px 20px;font-size: 16px;color:#337ab7">
         比对分析场景
     </div>
-    <div class="analysis-drop">
+    <div class="analysis-drop" v-if="!isShowLIst">
         <router-link :to="'/analysis/add'" class="analysis link-type">
             <div  class="analysis-index-container" style="display: grid;">
                     <img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
@@ -11,4 +11,76 @@
         </router-link>
 
     </div>
+    <div class="analysis-list" v-if="isShowLIst">
+        <el-row class="list-search">
+            <el-col :span="6">
+                <div class="search-input flex-div-start">
+                    <el-input v-model="inputSearch" placeholder="请输入创建人名称" />
+                    <span class="search-text" @click="searchData">搜索</span>
+                </div>
+
+            </el-col>
+        </el-row>
+       <!-- <el-row class="list-title">
+            <el-col :span="24" class="text-left">
+                <el-button type="primary" class="button-flex-div-center"><i class="icon-list icon-list-add"></i>新增</el-button>
+                <el-button type="primary" class="button-flex-div-center"><i class="icon-list icon-list-delete"></i>删除</el-button>
+            </el-col>
+        </el-row>-->
+        <el-row class="analysis-table-div">
+            <el-col :span="24">
+                <el-table border ref="multipleTable"  @selection-change="handleSelectionChange" :data="tableData" stripe style="width: 100%">
+<!--                    <el-table-column align="center"  type="selection" width="55" />-->
+                    <el-table-column prop="configName"  align="center" label="配置项名称" sortable  width="180" />
+                    <el-table-column prop="configDepict" label="配置项描述" sortable  width="180" />
+                    <el-table-column prop="timeScopeName" label="时间范围" sortable width="180"  ></el-table-column>
+                    <el-table-column align="center" prop="nickname" label="创建人名称" sortable  width="180" />
+                    <el-table-column align="center" prop="createTime"  :formatter="dateFormat" label="创建时间" sortable  width="210" />
+
+                    <el-table-column prop="address" label="操作" >
+                        <template #default="scope">
+                            <div class="list-handle">
+                                <span class="icon-bg">
+                                     <i class="icon-list icon-list-delete" @click="handleDelete(scope.row)"></i>
+                                </span>
+                                <!--<i class="icon-list icon-list-group"></i>
+                                <i class="icon-list icon-list-message"></i>
+                                <i class="icon-list icon-list-safe"></i>
+                                <i class="icon-list icon-list-net"></i>-->
+                            </div>
+
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-col>
+        </el-row>
+        <el-row>
+            <div class="demo-pagination-block">
+                <el-pagination
+                        v-model:currentPage="currentPage4"
+                        :page-sizes="[10,20,30,40]"
+                        :page-size="pageSize"
+                        layout="total,  prev, pager, next, sizes, jumper"
+                        :total="totalCount"
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                >
+                </el-pagination>
+            </div>
+        </el-row>
+    </div>
+    <div class="add-dialog">
+        <el-dialog  v-model="addVisible" :title="添加配置" width="50%" @close="closeDialog" top="15vh">
+            <el-form ref="addHandleForm" :model="addHandleForm" label-width="120px">
+                <el-form-item label="名称">
+                    <el-input v-model="addHandleForm.parentName"></el-input>
+                </el-form-item>
+
+                <el-form-item label="描述">
+                    <el-input v-model="addHandleForm.desc"></el-input>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+
+    </div>
 </div>

@@ -4,10 +4,128 @@ export default {
     components:{},
     data () {
         return {
+            multipleSelection:[],
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/ContrastAnalysis/getParentNodes',
+            apiUrl1:'/api-web/ContrastAnalysis/deleteScene',
+            addVisible:false,//新增弹框
+            inputSearch:'',//搜索内容
+            nickname:'',//
+            messageVisible:false,//消息提示
+            pageSize:10,//每页显示条数
+            // currentPage:1,//当前页
+            // totalCount:0,//总条数
 
         }
     },
     setup(){
+        const {proxy} = Vue.getCurrentInstance();
+        const isShowLIst=Vue.ref(false);
+        const tableData=Vue.ref([]);
+        const totalCount=Vue.ref(0);
+        const currentPage=Vue.ref(1);
 
+        // 挂载完
+        Vue.onMounted(() => {
+            proxy.getData();
+
+        })
+        //获取对比分析列表
+        const getData=()=>{
+            let params={
+                nickname:proxy.nickname,
+                limit:proxy.pageSize,
+                page:proxy.currentPage
+            }
+            $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),params,function (res) {
+                if(res){
+                    console.log("res",res)
+                    proxy.totalCount=res.count;
+                    proxy.tableData=res.data;
+                    proxy.tableData.map((item,index)=>{
+                        item.createTime= proxy.dateForma(item,item.createTime)
+                    })
+                }
+
+
+                if(proxy.tableData && proxy.tableData.length>0){
+                    proxy.isShowLIst=true
+                }else{
+                    proxy.isShowLIst=false
+
+                }
+
+            })
+
+        }
+
+        const toggleSelection=(rows)=> {
+            if (rows) {
+                rows.forEach((row) => {
+                    this.$refs.multipleTable.toggleRowSelection(row)
+                })
+            } else {
+                this.$refs.multipleTable.clearSelection()
+            }
+        }
+        const handleSelectionChange=(val)=> {
+            this.multipleSelection = val
+        }
+        //单个删除
+        const handleDelete=(item)=>{
+
+            let params={
+                id:item.id
+            }
+            $.get(proxy.domainName +proxy.apiUrl1+'?access_token='+localStorage.getItem('access_token'),params,function (res) {
+                if(res){
+                    proxy.$global.showMsg("删除成功","warning")
+                    proxy.getData();
+                }
+            })
+        }
+        const searchData=()=>{
+            proxy.nickname=proxy.inputSearch;
+            proxy.getData();
+        }
+        //格式化时间格式
+        let dateForma=(row,column)=>{
+            const daterc = column
+            if(daterc!=null){
+                const dateMat= new Date(parseInt(daterc));
+                const year = dateMat.getFullYear();
+                const month = dateMat.getMonth() + 1;
+                const day = dateMat.getDate();
+                const hh = dateMat.getHours();
+                const mm = dateMat.getMinutes();
+                const ss = dateMat.getSeconds();
+                const timeFormat= year + "年" + month + "月" + day + "日 " + hh + ":" + mm + ":" + ss;
+                return timeFormat;
+            }
+
+        }
+        const handleSizeChange = (val) => {
+            proxy.pageSize=val;
+            proxy.getData();
+        }
+        //切换当前页
+        const handleCurrentChange = (val) => {
+            proxy.currentPage=val;
+            proxy.getData();
+        }
+        return{
+            isShowLIst,
+            tableData,
+            toggleSelection,
+            handleSelectionChange,
+            getData,
+            handleDelete,
+            dateForma,
+            searchData,
+            handleSizeChange,
+            handleCurrentChange,
+            totalCount,
+            currentPage
+        }
     }
 }
\ No newline at end of file

@@ -21,7 +21,7 @@
     <div class="room-html">
         <el-row>
             <el-col class="video-item" :span="24" >
-                <MachineRoom v-if="src"  :src="src"></MachineRoom>
+                <MachineRoom v-if="src"  :src="src" ref="machineRoom" ></MachineRoom>
             </el-col>
         </el-row>
     </div>

+// 获取状态
+const indirectManage = () => {
+    const store = Vuex.useStore()
+
+    // 用toRef获取 busId，有相应性，可以直接修改state
+    const changeIndex = Vue.toRef(store.state, 'changeIndex')
+
+    return {
+        changeIndex
+    }
+}
 export default {
     name: 'machineRoom',
     template: '',
@@ -19,20 +30,14 @@ export default {
 
         }
     },
-    watch:{
-        changeIndex(newValue, oldValue) {
-            console.log("changeIndex",newValue)
-        }
-
-    },
-
     setup(props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
         proxy.htmlName=Vue.ref();
         proxy.commandVal=Vue.ref()
         proxy.commandName=Vue.ref();
         proxy.src=Vue.ref();
-
+        // 获取状态
+        const { changeIndex} = indirectManage()
 
         // 挂载完
         Vue.onMounted(() => {
@@ -50,8 +55,9 @@ export default {
                     proxy.commandVal=item.val;
                 }
             })
-            proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
-            console.log("htmlName",proxy.htmlName,proxy.src)
+            // proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
+            //根据htmlName确定引入的机房
+            proxy.src=proxy.htmlName
 
         }
         const handleCommand=(command,event)=>{
@@ -59,14 +65,12 @@ export default {
             proxy.commandVal=command.props.name;
 
             proxy.getMachine(proxy.commandVal)
-
-            // proxy.innerVisible=true;
+            changeIndex.value=proxy.changeIndex;
         }
 
         return{
             getMachine,
             handleCommand
-
         }
     }
 }
\ No newline at end of file

+<div v-if="!isDetailShow" class="outlinediv" style="height: 666px">
+    <!--    <span>湖州灾备一机房平面图</span>-->
+    <div class="huzhouone-topcabinet">
+        <table>
+            <tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
+                <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
+                    <img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
+                    <span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
+                </td>
+            </tr>
+          <!--  <tr>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 4A</span></a></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-7</span></a></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FA-6</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-5</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FA-4</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-3</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-2</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FA-1</span></a></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-3</span></a></td>
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-4</span></a></td>
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 3A</span></a></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-7</span></a></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-6</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-5</span></a></td>
+                <td><a href="/h5/machineroomDetail/FB-4.html"><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-4</span></a></td>
+                <td><a href="/h5/machineroomDetail/FB-3.html"><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-3</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-2</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-1</span></a></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
+            </tr>
+            <tr class="zaibeione"></tr>
+            <tr>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-11</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-10</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 1A</span></a></td>
+                <td width="10px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">EMC1</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">EMC2</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">EMC3</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-7</span></a></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">小型机595A</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机595B</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机3</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-2</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-1</span></a></td>
+                <td><img></td>
+
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XA-1</span></a></td>
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-2</span></a></td>
+            </tr>
+            <tr>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-11</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-10</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">PDA 2B</span></a></td>
+                <td style="width: 15px"></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img/></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">小型机570-4</span></a></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="zaibei cabinetId">小型机570-3</span></a></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">XB-1</span></a></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId"></span></a></td>
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img/></td>
+                <td><img/></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="zaibei cabinetId">AC-1</span></a></td>
+            </tr>-->
+        </table>
+    </div>
+</div>
+<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
\ No newline at end of file

+// 获取状态
+const indirectManage = () => {
+    const store = Vuex.useStore()
+
+    // 用toRef获取 busId，有相应性，可以直接修改state
+    const changeIndex = Vue.toRef(store.state, 'changeIndex')
+
+    return {
+        changeIndex
+    }
+}
+export default {
+    name: 'huzhouOne',
+    template: '',
+    components: {
+        'MachineRoomDetail': Vue.defineAsyncComponent(
+            () => myImport('views/commonComponents/machineRoomDetail/index')
+        ),
+    },
+    props:['src'],
+    data(){
+        return {
+            domainName:sessionStorage.getItem('domainName'),
+            accessToken:localStorage.getItem('access_token'),
+            isDetailShow:false,//是否展示详情页
+            detailData:'',//详情数据
+            htmlName:'huzhouzaibeione',
+            machineData:this.src,
+            allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
+            tableData:[
+                [
+
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'PDA 4A',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FA-7',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FA-6',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FA-5',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FA-4',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FA-3',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FA-2',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FA-1',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'AC-3',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+
+
+                ],
+                [
+
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+
+
+                ],
+                [
+
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'AC-4',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+
+
+                ],
+                [
+
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'PDA 3A',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FB-7',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FB-6',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FB-5',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FB-4',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FB-3',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FB-2',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'FB-1',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+
+
+                ],
+                [
+
+                ],
+                [
+
+                    {
+                        name:'XA-11',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'XA-10',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'PDA 1A',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:'10px'
+                    },
+                    {
+                        name:'EMC1',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'EMC2',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'EMC3',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'XA-7',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'小型机595A',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'小型机595B',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'小型机3',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'小型机570-2',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'小型机570-1',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'XA-1',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    }
+                ],
+                [
+
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+
+
+                ],
+                [
+
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'AC-2',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                ],
+                [
+
+                    {
+                        name:'XB-11',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'XB-10',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'PDA 2B',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:'15px'
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'小型机570-4',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'小型机570-3',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'XB-1',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+
+
+                ],
+                [
+
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'AC-1',
+                        
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+
+
+                ],
+            ]
+
+        }
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        // 获取状态
+        const { changeIndex} = indirectManage()
+        // 监听编辑状态
+        Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
+            console.log('vux',changeIndex.value,newVal)
+            proxy.isDetailShow=false;
+
+        });
+        // 挂载完
+        Vue.onMounted(() => {
+        })
+        const goDetail=(item)=>{
+            proxy.allowClickData.map((itemName,index)=>{
+                if(item.name==itemName){
+                    proxy.isDetailShow=true;
+                    console.log("detail",item)
+                    proxy.detailData=item;
+                }
+            })
+
+        }
+
+        return{
+            goDetail
+        }
+    }
+}
\ No newline at end of file

+<div  v-if="!isDetailShow"  class="outlinediv" >
+    <!--    <span>湖州灾备三机房平面图</span>-->
+    <div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px">
+        <table>
+            <tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
+                <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
+                    <img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
+                    <span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
+                </td>
+            </tr>
+
+           <!-- <tr>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">TB-6</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">TB-5</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
+
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+
+            </tr>
+            <tr>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+            </tr>
+            <tr>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+            </tr>
+            <tr class="zaibeione"></tr>-->
+
+        </table>
+    </div>
+</div>
+<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
\ No newline at end of file

+// 获取状态
+const indirectManage = () => {
+    const store = Vuex.useStore()
+
+    // 用toRef获取 busId，有相应性，可以直接修改state
+    const changeIndex = Vue.toRef(store.state, 'changeIndex')
+
+    return {
+        changeIndex
+    }
+}
+export default {
+    name: 'huzhouThree',
+    template: '',
+    components: {
+        'MachineRoomDetail': Vue.defineAsyncComponent(
+            () => myImport('views/commonComponents/machineRoomDetail/index')
+        ),
+    },
+    props:['src'],
+    data(){
+        return {
+            domainName:sessionStorage.getItem('domainName'),
+            accessToken:localStorage.getItem('access_token'),
+            isDetailShow:false,//是否展示详情页
+            detailData:'',//详情数据
+            htmlName:'huzhouzaibeithree',
+            machineData:this.src,
+            allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
+            tableData:[
+                [
+
+                    {
+                        name:'TB-6',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'TB-5',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    }
+                ],
+                [
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                ],
+                [
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                ],
+                [
+
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    }
+                ],
+                []
+            ]
+        }
+    },
+
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        // 获取状态
+        const { changeIndex} = indirectManage()
+        // 监听编辑状态
+        Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
+            console.log('vux',changeIndex.value,newVal)
+            proxy.isDetailShow=false;
+
+        });
+
+        // 挂载完
+        Vue.onMounted(() => {
+
+        })
+        const goDetail=(item)=>{
+            proxy.allowClickData.map((itemName,index)=>{
+                if(item.name==itemName){
+                    proxy.isDetailShow=true;
+                    proxy.detailData=item;
+                }
+            })
+        }
+
+        return{
+            goDetail
+        }
+    }
+}
\ No newline at end of file

+<div v-if="!isDetailShow" class="outlinediv" >
+    <!--    <span>湖州灾备二机房平面图</span>-->
+    <div class="huzhouone-topcabinet" style="margin-left: 20%">
+        <table>
+
+            <tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
+                <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
+                    <img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
+                    <span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
+                </td>
+            </tr>
+
+         <!--   <tr>
+
+                <td><img/></td>
+                <td style="width: 30px"></td>
+
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-1</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LA-2</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-3</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-2</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LA-1</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">PDA6B</span></a></td>
+
+            </tr>
+            <tr>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">AC-5</span></a></td>
+                <td style="width: 30px"></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+
+            </tr>
+            <tr>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId"></span></a></td>
+                <td style="width: 30px"></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img></td>
+                <td><img></td>
+                <td><img ></td>
+                <td><img ></td>
+            </tr>
+            <tr>
+                <td><img/></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LB-1</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-2</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png"class="cabinet"><span class="cabinetId">LB-3</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-2</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">LB-1</span></a></td>
+                <td style="width: 30px"></td>
+                <td><a href=""><img src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet"><span class="cabinetId">PDA5A</span></a></td>
+            </tr>
+            <tr class="zaibeione"></tr>-->
+
+        </table>
+    </div>
+</div>
+<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>

+// 获取状态
+const indirectManage = () => {
+    const store = Vuex.useStore()
+
+    // 用toRef获取 busId，有相应性，可以直接修改state
+    const changeIndex = Vue.toRef(store.state, 'changeIndex')
+
+    return {
+        changeIndex
+    }
+}
+export default {
+    name: 'huzhouTwo',
+    template: '',
+    components: {
+        'MachineRoomDetail': Vue.defineAsyncComponent(
+            () => myImport('views/commonComponents/machineRoomDetail/index')
+        ),
+    },
+    props:['src'],
+    data(){
+        return {
+            domainName:sessionStorage.getItem('domainName'),
+            accessToken:localStorage.getItem('access_token'),
+            isDetailShow:false,//是否展示详情页
+            detailData:'',//详情数据
+            htmlName:'huzhouzaibeitwo',
+            machineData:this.src,
+            allowClickData:['FB-3','FB-4'],//允许进入详情的机柜
+            tableData:[
+                [
+
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LA-1',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LA-2',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LA-3',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LA-2',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'FA-1',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'PDA6B',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    }
+                ],
+                [
+
+                    {
+                        name:'AC-5',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                ],
+                [
+
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                ],
+                [
+
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LB-1',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LB-2',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LB-3',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'LB-2',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'FB-1',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:false,
+                        className:'',
+                        width:'30px'
+                    },
+                    {
+                        name:'PDA5A',
+                        isShow:true,
+                        className:'',
+                        width:''
+                    }
+                ],
+                []
+            ]
+        }
+    },
+
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        // 获取状态
+        const { changeIndex} = indirectManage()
+        // 监听编辑状态
+        Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
+            console.log('vux',changeIndex.value,newVal)
+            proxy.isDetailShow=false;
+
+        });
+
+        // 挂载完
+        Vue.onMounted(() => {
+
+        })
+        const goDetail=(item)=>{
+            proxy.allowClickData.map((itemName,index)=>{
+                if(item.name==itemName){
+                    proxy.isDetailShow=true;
+                    proxy.detailData=item;
+                }
+            })
+        }
+
+        return{
+            goDetail
+        }
+    }
+}
\ No newline at end of file

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

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

+<div :class="['all']">
+    <!-- 左侧机柜效果图 -->
+    <div class='contain'>
+
+        <!-- 机柜内部服务器 -->
+        <div class='contain-server'>
+
+
+            <!-- 第一个物理服务器 -->
+<!--            <div :class="['serve',{'img-serve-8':item.uPosition=='1-8U'}]"@click="showDevice(item)" v-for="(item,index) in serviceData">-->
+            <div :class="'serve '+item.serviceClass " :style="item.uClass" @click="showDevice(item)" v-for="(item,index) in serviceData">
+                <div class='img-serve' >
+
+                    <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
+                    <div class='img-serve-text'>{{item.name}}</div>
+                    <div class='lamp'>
+                        <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
+                        <div class='img-lamp'>
+                            <img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
+                            <img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
+                            <img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
+                            <img src="/vue3/src/assets/images/machineRoom/greenColor.png" alt="">
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 右侧机柜详细信息 -->
+    <div class='info' >
+
+        <!-- 机柜信息 -->
+        <div class='info-top'>
+            <div class='info-contain'>
+                <div class='info-text'>机柜信息</div>
+                <div class='info-text-bot'>
+                    <p>机 房：{{machineData.val}}</p>
+                    <p>机柜编号：{{detailData.name}}</p>
+                    <p>机柜容量：{{infoData.cabinetCapacity}}</p>
+                    <p>设备数量：{{infoData.deviceNum}}台</p>
+                    <p v-if="infoData.alarmNum">告警量：{{infoData.AlarmNum}}无告警</p>
+                    <p v-if="!infoData.alarmNum">告警量：无告警</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- 设备信息 -->
+        <div class='info-bottom' id="info-bottom" v-if="isShowDevice">
+            <div class='info-contain'>
+                <div class='info-text'>设备信息</div>
+                <div class='info-text-bot'>
+                    <p>资源名称：{{deviceDataInfo.resName}}</p>
+                    <p>品 牌：{{deviceDataInfo.brandName}}</p>
+                    <p>型 号：{{deviceDataInfo.model}}</p>
+                    <p>序 列 号：{{deviceDataInfo.serialNumber}}</p>
+                    <p>业 务 IP：{{deviceDataInfo.ServiceIP}}</p>
+                    <p>用 途：{{deviceDataInfo.purpose}}</p>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+
+
+</div>
+

+export default {
+    name: 'machineRoomDetail',
+    template: '',
+    components: {
+        'MachineRoomDetail': Vue.defineAsyncComponent(
+            () => myImport('views/commonComponents/machineRoomDetail/index')
+        ),
+    },
+    props:['detailData','machineData'],
+    data(){
+        return {
+            domainName:sessionStorage.getItem('domainName'),
+            accessToken:localStorage.getItem('access_token'),
+            isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
+            serviceData:[],//机柜的服务器数据
+            deviceDataInfo:'',//设备详细信息
+            deviceDatas: [
+                {
+                    name:'E12',
+
+                    cabinetCapacity :'42U',
+                    deviceData:[
+                        {
+                            name:'物理服务器',
+                            resName:'管理决策二包(数据集市39)',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'216365930',
+                            ServiceIP:'80.12.73.39',
+                            purpose:'管理决策二包使用',
+                            uPosition:'1-8U',
+                        }
+                    ],
+                    deviceNum:'1',
+                    alarmNum:'0'
+                },
+                {
+                    name:'E13',
+                    cabinetCapacity :'42U',
+                    deviceData:[
+                        {
+                            name:'物理服务器',
+                            resName:'管理决策二包(数据集市38)',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'216365928',
+                            ServiceIP:'80.12.73.38',
+                            purpose:'管理决策二包使用',
+                            uPosition:'1-8U',
+
+                        }
+
+                    ],
+                    deviceNum:'1',
+                    alarmNum:'0'
+                },
+                {
+                    name:'FB-3',
+                    deviceData:[
+                        {
+                            name:'物理服务器1',
+                            resName:'1',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'1-1U',
+
+                        },
+                        {
+                            name:'物理服务器2',
+                            resName:'2',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'5-7U',
+
+                        },
+                        {
+                            name:'物理服务器3',
+                            resName:'3',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'10-16U',
+
+                        },
+                        {
+                            name:'物理服务器3',
+                            resName:'3',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'17-25U',
+
+                        },
+                        {
+                            name:'物理服务器5',
+                            resName:'5',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'26-30U',
+
+                        },
+                        {
+                            name:'物理服务器10',
+                            resName:'5',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'31-41U',
+
+                        }
+
+                    ],
+                    deviceNum:'3',
+                    cabinetCapacity :'42U',
+                },
+                {
+                    name:'FB-4',
+                    deviceData:[
+                        {
+                            name:'物理服务器',
+                            resName:'',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'1-4U',
+
+                        },
+                        {
+                            name:'物理服务器',
+                            resName:'23',
+                            brandName:'浪潮',
+                            model:'TS860',
+                            serialNumber:'',
+                            ServiceIP:'',
+                            purpose:'管理决策二包使用',
+                            uPosition:'6-16U',
+
+                        }
+
+                    ],
+                    deviceNum:'1',
+                    cabinetCapacity :'42U',
+                },
+            ],//服务器设备信息
+            infoData:'',//设备详细信息
+            // isShowDevice:false,//是否显示设备信息
+
+        }
+    },
+
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        const isShowDevice=Vue.ref(false);
+
+        const  CabinetNum=props.detailData.name;//机柜编号
+
+        // 挂载完
+        Vue.onMounted(() => {
+            if(props.machineData.name.indexOf('huzhou')!=-1){
+                proxy.isCenter=true;
+            }else{
+                proxy.isCenter=false;
+            }
+            proxy.getDeviceInfo();
+
+        })
+        const getDeviceInfo=()=>{
+            proxy.deviceDatas.map((item,index)=>{
+                if(CabinetNum==item.name){
+                    proxy.infoData=item;
+                    proxy.serviceData=item.deviceData
+                    item.deviceData.map((itemD,indexD)=>{
+                        let strArr=itemD.uPosition.split("U");//[0]1-4 [1]U
+                        let leftStrArr=strArr[0].split('-');//[0]1 [1]4
+                        let leftStr=leftStrArr[0];
+                        let rightStr=leftStrArr[1];
+                        itemD.serviceHeight=rightStr;//nU的设备
+                        let serveNum=1;
+                        if(leftStr==1){
+                            serveNum=rightStr
+                        }else{
+                            serveNum=rightStr-leftStr;
+
+                        }
+                        itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
+                        itemD.uClass='';
+                        if(leftStr>1){
+                            let bottom=(leftStr-1)*17;
+                            itemD.uClass='bottom:'+bottom+'px';
+
+                        }
+                    })
+                }
+            })
+
+        }
+        const showDevice=(item)=>{
+            proxy.isShowDevice=true;
+            proxy.deviceDataInfo=item;
+        }
+
+        return{
+            showDevice,
+            isShowDevice,
+            getDeviceInfo
+        }
+    }
+}
\ No newline at end of file

+<div v-if="!isDetailShow" class="outlinediv" >
+    <!--          <span>2号机房平面图</span>-->
+    <div v-for="(items,indexs) in tableData" :class="[{'xiaoshansecond-topcabinet':indexs==0,'xiaoshansecond-middlecabinet':indexs==1,'xiaoshansecond-bottomcabinet':indexs==2}]" class="xiaoshansecond-topcabinet" >
+        <table>
+
+            <tr >
+                <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
+                    <img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
+                    <span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>

+// 获取状态
+const indirectManage = () => {
+    const store = Vuex.useStore()
+
+    // 用toRef获取 busId，有相应性，可以直接修改state
+    const changeIndex = Vue.toRef(store.state, 'changeIndex')
+
+    return {
+        changeIndex
+    }
+}
+export default {
+    name: 'xiaoshansecond',
+    template: '',
+    components: {
+        'MachineRoomDetail': Vue.defineAsyncComponent(
+            () => myImport('views/commonComponents/machineRoomDetail/index')
+        ),
+    },
+    props:['src'],
+    data(){
+        return {
+            domainName:sessionStorage.getItem('domainName'),
+            accessToken:localStorage.getItem('access_token'),
+            isDetailShow:false,//是否展示详情页
+            detailData:'',//详情数据
+            htmlName:'xiaoshansecond',
+            machineData:this.src,
+            allowClickData:['E12','E13'],//允许进入详情的机柜
+            tableData:[
+                [
+
+                    {
+                        name:'F1',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F2',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F3',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F4',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F4',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F6',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F7',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F8',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F9',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F10',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F11',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:true,
+                        width:''
+                    },
+                    {
+                        name:'',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:true,
+                        width:''
+                    },
+                    {
+                        name:'F14',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F15',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F16',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F17',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F18',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F19',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'F20',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                ],
+                [
+
+                    {
+                        name:'G1',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G2',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G3',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G4',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G4',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G6',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G7',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G8',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G9',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G10',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G11',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G12',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G13',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G14',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G15',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G16',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G17',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G18',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G19',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'G20',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                ],
+                [
+
+                    {
+                        name:'H1',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H2',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H3',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H4',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H4',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H6',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H7',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H8',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H9',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H10',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H11',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H12',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H13',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H14',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H15',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H16',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H17',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H18',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H19',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                    {
+                        name:'H20',
+                        isShow:true,
+                        className:'',
+                        imgEmpty:false,
+                        width:''
+                    },
+                ],
+            ]
+        }
+    },
+
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        // 获取状态
+        const { changeIndex} = indirectManage()
+        // 监听编辑状态
+        Vue.watch(() =>changeIndex.value, (newVal, oldVlaue) => {
+            console.log('vux',changeIndex.value,newVal)
+            proxy.isDetailShow=false;
+
+        });
+
+        // 挂载完
+        Vue.onMounted(() => {
+
+        })
+        const goDetail=(item)=>{
+            proxy.allowClickData.map((itemName,index)=>{
+                if(item.name==itemName){
+                    proxy.isDetailShow=true;
+                    proxy.detailData=item;
+                }
+            })
+        }
+
+        return{
+            goDetail
+        }
+    }
+}
\ No newline at end of file

+<div v-if="!isDetailShow" class="outlinediv" >
+  <!--    <span>7号机房平面图</span>-->
+  <div style="width: 100%;height: 100%;display: inline-flex">
+    <div class="xiaoshanseven-leftcabinet">
+      <table>
+        <tr v-for="(items,indexs) in tableData"  :class="{'sevenempty':items.length==0}">
+          <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
+            <img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
+            <span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="xiaoshanseven-middlecabinet"><span>过道</span></div>
+    <div class="xiaoshanseven-rightcabinet">
+      <table>
+        <tr v-for="(items,indexs) in tableData2"  :class="{'sevenempty':items.length==0}">
+          <td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
+            <img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
+            <span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+  </div>
+</div>
+<machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>