monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit b105aafead13319bd23a27fa415e8aff3779ff97 2 parents 48036717 c5799ed8

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

数据中心的机房布局



See merge request !90
Inline Side-by-side
Showing 39 changed files with 802 additions and 31 deletions
@@ -101,8 +101,8 @@ @@ -101,8 +101,8 @@
101 <td><img ></td> 101 <td><img ></td>
102 <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-6</span></a></td> 102 <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-6</span></a></td>
103 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-5</span></a></td> 103 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-5</span></a></td>
104 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-4</span></a></td>  
105 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-3</span></a></td> 104 + <td><a href="/h5/machineroomDetail/FB-4.html"><img src="img/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-4</span></a></td>
  105 + <td><a href="/h5/machineroomDetail/FB-3.html"><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-3</span></a></td>
106 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-2</span></a></td> 106 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-2</span></a></td>
107 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-1</span></a></td> 107 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-1</span></a></td>
108 <td><img/></td> 108 <td><img/></td>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/Details.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 + <div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-server'>
  19 +
  20 +
  21 + <!-- 第一个物理服务器 -->
  22 + <div class='serve'>
  23 + <div class='img-serve'>
  24 +
  25 + <img src="img/icon-state.png" alt="" class='state'>
  26 + <div class='img-serve-text'>物理服务器</div>
  27 + <div class='lamp'>
  28 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  29 + <div class='img-lamp'>
  30 + <img src="img/nocolor.png" alt="">
  31 + <img src="img/nocolor.png" alt="">
  32 + <img src="img/nocolor.png" alt="">
  33 + <img src="img/greenColor.png" alt="">
  34 + </div>
  35 + </div>
  36 +
  37 + </div>
  38 + </div>
  39 +
  40 + <!-- 第二个物理服务器 -->
  41 + <div class='serve'>
  42 + <div class='img-serve'>
  43 +
  44 + <img src="img/icon-state.png" alt="" class='state'>
  45 + <div class='img-serve-text'>物理服务器</div>
  46 + <div class='lamp'>
  47 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  48 + <div class='img-lamp'>
  49 + <img src="img/nocolor.png" alt="">
  50 + <img src="img/nocolor.png" alt="">
  51 + <img src="img/nocolor.png" alt="">
  52 + <img src="img/greenColor.png" alt="">
  53 + </div>
  54 + </div>
  55 + </div>
  56 + </div>
  57 +
  58 + <!-- 第三个物理服务器 -->
  59 + <div class='serve'>
  60 + <div class='img-serve'>
  61 + <img src="img/icon-state.png" alt="" class='state'>
  62 + <div class='img-serve-text'>物理服务器</div>
  63 + <div class='lamp'>
  64 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  65 + <div class='img-lamp'>
  66 + <img src="img/nocolor.png" alt="">
  67 + <img src="img/nocolor.png" alt="">
  68 + <img src="img/nocolor.png" alt="">
  69 + <img src="img/greenColor.png" alt="">
  70 + </div>
  71 + </div>
  72 + </div>
  73 + </div>
  74 +
  75 +
  76 + </div>
  77 +
  78 +
  79 + </div>
  80 +
  81 +
  82 +
  83 + <!-- 右侧机柜详细信息 -->
  84 + <div class='info'>
  85 +
  86 +<!-- 机柜信息 -->
  87 + <div class='info-top'>
  88 + <div class='info-contain'>
  89 + <div class='info-text'>机柜信息</div>
  90 + <div class='info-text-bot'>
  91 + <p>机 房：萧山7号机</p>
  92 + <p>机柜编号：E07</p>
  93 + <p>机柜容量：42U</p>
  94 + <p>设备数量：3台</p>
  95 + <p>告警量：无告警</p>
  96 + </div>
  97 + </div>
  98 + </div>
  99 +
  100 +<!-- 设备信息 -->
  101 + <div class='info-bottom'>
  102 + <div class='info-contain'>
  103 + <div class='info-text'>设备信息</div>
  104 + <div class='info-text-bot'>
  105 + <p>品 牌：曙光</p>
  106 + <p>型 号：I840—G25</p>
  107 + <p>序 列 号：9800076500643112</p>
  108 + <p>管 理 IP：80.12.92.21</p>
  109 + <p>业 务 IP：80.12.92.31</p>
  110 + <p>用 途：发票系统使用</p>
  111 + </div>
  112 + </div>
  113 + </div>
  114 +
  115 +
  116 + </div>
  117 +
  118 +
  119 + </div>
  120 +
  121 +</body>
  122 +
  123 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/FB-3.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 + <div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-serve'>
  19 +
  20 + <div class='serve'>
  21 + <div class='img-serve'>
  22 +
  23 + <img src="img/icon-state.png" alt="" class='state'>
  24 + <div class='img-serve-text'>物理服务器</div>
  25 + <div class='lamp'>
  26 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  27 + <div class='img-lamp'>
  28 + <img src="img/nocolor.png" alt="">
  29 + <img src="img/nocolor.png" alt="">
  30 + <img src="img/nocolor.png" alt="">
  31 + <img src="img/greenColor.png" alt="">
  32 + </div>
  33 + </div>
  34 +
  35 + </div>
  36 + </div>
  37 +
  38 + <!-- 第二个物理服务器 -->
  39 + <div class='serve'>
  40 + <div class='img-serve'>
  41 +
  42 + <img src="img/icon-state.png" alt="" class='state'>
  43 + <div class='img-serve-text'>物理服务器</div>
  44 + <div class='lamp'>
  45 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  46 + <div class='img-lamp'>
  47 + <img src="img/nocolor.png" alt="">
  48 + <img src="img/nocolor.png" alt="">
  49 + <img src="img/nocolor.png" alt="">
  50 + <img src="img/greenColor.png" alt="">
  51 + </div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 +
  56 + <!-- 第三个物理服务器 -->
  57 + <div class='serve'>
  58 + <div class='img-serve'>
  59 + <img src="img/icon-state.png" alt="" class='state'>
  60 + <div class='img-serve-text'>物理服务器</div>
  61 + <div class='lamp'>
  62 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  63 + <div class='img-lamp'>
  64 + <img src="img/nocolor.png" alt="">
  65 + <img src="img/nocolor.png" alt="">
  66 + <img src="img/nocolor.png" alt="">
  67 + <img src="img/greenColor.png" alt="">
  68 + </div>
  69 + </div>
  70 + </div>
  71 + </div>
  72 +
  73 +
  74 + </div>
  75 +
  76 +
  77 + </div>
  78 +
  79 +
  80 + </div>
  81 +
  82 +</body>
  83 +
  84 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/FB-4.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 + <div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-serve'>
  19 +
  20 + <div class='serve'>
  21 + <div class='img-serve'>
  22 +
  23 + <img src="img/icon-state.png" alt="" class='state'>
  24 + <div class='img-serve-text'>物理服务器</div>
  25 + <div class='lamp'>
  26 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  27 + <div class='img-lamp'>
  28 + <img src="img/nocolor.png" alt="">
  29 + <img src="img/nocolor.png" alt="">
  30 + <img src="img/nocolor.png" alt="">
  31 + <img src="img/greenColor.png" alt="">
  32 + </div>
  33 + </div>
  34 +
  35 + </div>
  36 + </div>
  37 +
  38 + </div>
  39 +
  40 +
  41 + </div>
  42 +
  43 +
  44 + </div>
  45 +
  46 +</body>
  47 +
  48 +</html>
  1 +
  2 +body{
  3 + background-image: url(../img/img-bg.png);
  4 + background-size: 100%;
  5 +
  6 +}
  7 +li{
  8 + list-style: none
  9 +}
  10 +
  11 +.all{
  12 + display:flex;
  13 +}
  14 +
  15 +
  16 +/* 左侧机柜样式 */
  17 +
  18 +.contain{
  19 +
  20 + width:400px;
  21 + height:710px;
  22 + margin-left:15%;
  23 + margin-top:5%;
  24 + /* background-color: red; */
  25 + background-image: url(../img/img-no-machine.png);
  26 + background-size: 100%;
  27 + background-repeat: no-repeat;
  28 + position: relative;
  29 +
  30 +}
  31 +
  32 +.contain-server{
  33 + position: absolute;
  34 + width:365px;
  35 + height:40%;
  36 + margin-left:18px;
  37 + bottom:7%;
  38 + display: flex;
  39 + justify-content: space-between;
  40 + flex-direction:column;
  41 + /* background-color: red; */
  42 +
  43 +}
  44 +
  45 +
  46 +.serve{
  47 + width:370px;
  48 + height:78px;
  49 + margin-left:-3px;
  50 + background-image: url(../img/img-4Uservice.png);
  51 + background-size: 100% 100%;
  52 + background-repeat: no-repeat;
  53 +
  54 +
  55 +}
  56 +.img-serve{
  57 +
  58 + width:340px;
  59 + height:50px;
  60 + margin:12px auto;
  61 + display: flex;
  62 +
  63 +}
  64 +
  65 +.lamp{
  66 + display:flex;
  67 +}
  68 +
  69 +
  70 +.img-lamp{
  71 + margin-left:15px;
  72 + margin-top:10px
  73 +}
  74 +
  75 +/* 服务器状态图片样式 */
  76 +.state{
  77 + width:35px;
  78 + height:35px;
  79 + margin-top:8px;
  80 + margin-left:4px;
  81 +}
  82 +
  83 +.img-serve-text{
  84 + color:#fff;
  85 + line-height: 50px;
  86 + margin-left:10px;
  87 +}
  88 +
  89 +
  90 +.img-weblog{
  91 + margin-left:50px;
  92 + margin-top:15px;
  93 + width:30px;
  94 + height:20px;
  95 +
  96 +}
  97 +
  98 +
  99 +
  100 +
  101 +/* 右侧机柜详细信息样式 */
  102 +
  103 +.info{
  104 + width:500px;
  105 + height:700px;
  106 + margin-left:8%;
  107 + margin-top:5%;
  108 + /* background-color: red; */
  109 +
  110 +}
  111 +
  112 +
  113 +.info-top{
  114 + height:340px;
  115 + margin-top:-10px;
  116 + background-image: url(../img/img-machineInfo-bg.png);
  117 +
  118 +}
  119 +
  120 +.info-bottom{
  121 + height:340px;
  122 + margin-top:10px;
  123 + background-image: url(../img/img-deviceInfo-bg.png);
  124 +}
  125 +
  126 +.info-contain{
  127 + width:90%;
  128 + display:inline-block;
  129 + height:250px;
  130 + margin-top:60px;
  131 + margin-left: 60px;
  132 +
  133 +}
  134 +
  135 +
  136 +.info-text{
  137 + height:50px;
  138 + font-weight: bolder;
  139 + font-size: 20px;
  140 + color:#fff
  141 + /* background-color: rgb(59, 185, 8); */
  142 +}
  143 +
  144 +.info-text-bot{
  145 + margin-top:-15px;
  146 + height:200px;
  147 + font-size: 16px;
  148 + letter-spacing: 2px;
  149 + color:#fff
  150 + /* background-color: rgb(93, 15, 196); */
  151 +}
  1 +
  2 +body{
  3 + background-image: url(../img/img-bg.png);
  4 + background-size: 100%;
  5 +
  6 +}
  7 +
  8 +
  9 +.all{
  10 + display:flex;
  11 +}
  12 +
  13 +
  14 +/* 机柜样式 */
  15 +
  16 +.contain{
  17 +
  18 + width:400px;
  19 + height:710px;
  20 + margin-left:37%;
  21 + margin-top:5%;
  22 + /* background-color: red; */
  23 + background-image: url(../img/img-no-machine.png);
  24 + background-size: 100%;
  25 + background-repeat: no-repeat;
  26 + position: relative;
  27 +
  28 +}
  29 +
  30 +.contain-serve{
  31 + position: absolute;
  32 + margin-top:60%;
  33 + width:365px;
  34 + height:40%;
  35 + margin-left:18px;
  36 +
  37 + display: flex;
  38 + justify-content: space-between;
  39 + flex-direction:column;
  40 +
  41 +
  42 +}
  43 +
  44 +
  45 +.serve{
  46 + width:370px;
  47 + height:78px;
  48 + margin-left:-3px;
  49 + background-image: url(../img/img-4Uservice.png);
  50 + background-size: 100% 100%;
  51 + background-repeat: no-repeat;
  52 +
  53 +
  54 +}
  55 +.img-serve{
  56 +
  57 + width:340px;
  58 + height:50px;
  59 + margin:12px auto;
  60 + display: flex;
  61 +
  62 +}
  63 +
  64 +.lamp{
  65 + display:flex;
  66 +}
  67 +
  68 +
  69 +.img-lamp{
  70 + margin-left:15px;
  71 + margin-top:10px
  72 +}
  73 +
  74 +
  75 +.state{
  76 + width:35px;
  77 + height:35px;
  78 + margin-top:8px;
  79 + margin-left:4px;
  80 +}
  81 +
  82 +.img-serve-text{
  83 + color:#fff;
  84 + line-height: 50px;
  85 + margin-left:10px;
  86 +}
  87 +
  88 +
  89 +.img-weblog{
  90 + margin-left:50px;
  91 + margin-top:15px;
  92 + width:30px;
  93 + height:20px;
  94 +
  95 +}
  96 +
  97 +
  1 +
  2 +body{
  3 + background-image: url(../img/img-bg.png);
  4 + background-size: 100%;
  5 +
  6 +}
  7 +
  8 +
  9 +.all{
  10 + display:flex;
  11 +}
  12 +
  13 +
  14 +/* 机柜样式 */
  15 +
  16 +.contain{
  17 +
  18 + width:400px;
  19 + height:710px;
  20 + margin-left:37%;
  21 + margin-top:5%;
  22 + /* background-color: red; */
  23 + background-image: url(../img/img-no-machine.png);
  24 + background-size: 100%;
  25 + background-repeat: no-repeat;
  26 + position: relative;
  27 +
  28 +}
  29 +
  30 +.contain-serve{
  31 + position: absolute;
  32 + margin-top:50%;
  33 + width:365px;
  34 + height:40%;
  35 + margin-left:18px;
  36 +
  37 + display: flex;
  38 + justify-content: space-between;
  39 + flex-direction:column;
  40 +
  41 +
  42 +}
  43 +
  44 +
  45 +.serve{
  46 + width:370px;
  47 + height:78px;
  48 + margin-left:-3px;
  49 + background-image: url(../img/img-4Uservice.png);
  50 + background-size: 100% 100%;
  51 + background-repeat: no-repeat;
  52 +
  53 +
  54 +}
  55 +.img-serve{
  56 +
  57 + width:340px;
  58 + height:50px;
  59 + margin:12px auto;
  60 + display: flex;
  61 +
  62 +}
  63 +
  64 +.lamp{
  65 + display:flex;
  66 +}
  67 +
  68 +
  69 +.img-lamp{
  70 + margin-left:15px;
  71 + margin-top:10px
  72 +}
  73 +
  74 +/* 服务器状态图样式 */
  75 +.state{
  76 + width:35px;
  77 + height:35px;
  78 + margin-top:8px;
  79 + margin-left:4px;
  80 +}
  81 +
  82 +.img-serve-text{
  83 + color:#fff;
  84 + line-height: 50px;
  85 + margin-left:10px;
  86 +}
  87 +
  88 +
  89 +.img-weblog{
  90 + margin-left:50px;
  91 + margin-top:15px;
  92 + width:30px;
  93 + height:20px;
  94 +
  95 +}
  96 +
  97 +
  1 +<div class="machine-room">
  2 + <div class="room-top">
  3 + <el-tabs type="card" @tab-click="handleCommand" v-model="commandVal">
  4 + <el-tab-pane v-for="item in commandNameData" :label="item.name" :name="item.val"></el-tab-pane>
  5 +
  6 + </el-tabs>
  7 + <!--<el-dropdown @command="handleCommand" class="elSelf" :popper-append-to-body="false">
  8 + <span class="el-dropdown-link">
  9 + {{commandName}}
  10 + <i class="icon-arrow"></i>
  11 + </span>
  12 + <template #dropdown>
  13 + <el-dropdown-menu class="cpuDropdown">
  14 + <el-dropdown-item v-for="item in commandNameData" :command="item.val">{{item.name}}</el-dropdown-item>
  15 +
  16 +
  17 + </el-dropdown-menu>
  18 + </template>
  19 + </el-dropdown>-->
  20 + </div>
  21 + <div class="room-html">
  22 + <el-row>
  23 + <el-col class="video-item" :span="24" >
  24 + <MachineRoom v-if="src" :src="src"></MachineRoom>
  25 + </el-col>
  26 + </el-row>
  27 + </div>
  28 +
  29 +</div>
  1 +export default {
  2 + name: 'machineRoom',
  3 + template: '',
  4 + components: {
  5 + 'MachineRoom': Vue.defineAsyncComponent(
  6 + () => myImport('views/commonComponents/machineRoom/index')
  7 + ),
  8 + },
  9 + props:['commandNameData'],
  10 + data(){
  11 + return {
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + accessToken:localStorage.getItem('access_token'),
  14 + commandName:'',//下拉选择默认显示名称
  15 + htmlName:'',//机房组件名称-html名称
  16 + commandVal:'',//下拉选择选中值
  17 + src:'',//机房布局html地址
  18 + changeIndex:1//每点击tab的值变化
  19 +
  20 + }
  21 + },
  22 + watch:{
  23 + changeIndex(newValue, oldValue) {
  24 + console.log("changeIndex",newValue)
  25 + }
  26 +
  27 + },
  28 +
  29 + setup(props, {attrs, slots, emit}) {
  30 + const {proxy} = Vue.getCurrentInstance();
  31 + proxy.htmlName=Vue.ref();
  32 + proxy.commandVal=Vue.ref()
  33 + proxy.commandName=Vue.ref();
  34 + proxy.src=Vue.ref();
  35 +
  36 +
  37 + // 挂载完
  38 + Vue.onMounted(() => {
  39 + proxy.commandVal='one';
  40 + proxy.getMachine(proxy.commandVal);
  41 +
  42 + })
  43 + //初始获取默认机房选择信息
  44 + const getMachine=(command)=>{
  45 + //commandNameData机房机柜数据
  46 + props.commandNameData.map((item,index)=>{
  47 + if(command==item.val){
  48 + proxy.htmlName=item.htmlName;
  49 + proxy.commandName=item.name;
  50 + proxy.commandVal=item.val;
  51 + }
  52 + })
  53 + proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
  54 + console.log("htmlName",proxy.htmlName,proxy.src)
  55 +
  56 + }
  57 + const handleCommand=(command,event)=>{
  58 + proxy.changeIndex++;
  59 + proxy.commandVal=command.props.name;
  60 +
  61 + proxy.getMachine(proxy.commandVal)
  62 +
  63 + // proxy.innerVisible=true;
  64 + }
  65 +
  66 + return{
  67 + getMachine,
  68 + handleCommand
  69 +
  70 + }
  71 + }
  72 +}
  1 +<iframe v-if="src" style="width:1100px;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>
  1 +export default {
  2 + name: 'machineRoom',
  3 + template: '',
  4 + components: {},
  5 + props:['src'],
  6 + data(){
  7 + return {
  8 + domainName:sessionStorage.getItem('domainName'),
  9 + accessToken:localStorage.getItem('access_token'),
  10 +
  11 + // src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken
  12 +
  13 + }
  14 + },
  15 +
  16 + setup(props, {attrs, slots, emit}) {
  17 + const {proxy} = Vue.getCurrentInstance();
  18 +
  19 +
  20 + // 挂载完
  21 + Vue.onMounted(() => {
  22 +
  23 + })
  24 +
  25 + return{
  26 + // src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
  27 +
  28 + }
  29 + }
  30 +}
@@ -35,21 +35,8 @@ @@ -35,21 +35,8 @@
35 </el-dialog> 35 </el-dialog>
36 36
37 <!--机房布局--> 37 <!--机房布局-->
38 - <el-dialog v-model="outerVisible" title="机房布局" width="60%">  
39 - <el-row>  
40 - <el-col :span="11"></el-col>  
41 - <el-col :span="2">过道</el-col>  
42 - <el-col :span="11"></el-col>  
43 - </el-row>  
44 - <template #default>  
45 - <el-dialog  
46 - v-model="innerVisible"  
47 - width="60%"  
48 - title="Inner Dialog"  
49 - append-to-body  
50 - >  
51 - </el-dialog>  
52 - </template> 38 + <el-dialog v-model="outerVisible" :title="dialogMachineName" width="60%" @close="closeDialog">
  39 + <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
53 40
54 </el-dialog> 41 </el-dialog>
55 42
1 export default { 1 export default {
2 name: 'dataCenter', 2 name: 'dataCenter',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'GetMachineRoom': Vue.defineAsyncComponent(
  6 + () => myImport('views/commonComponents/getMachineRoom/index')
  7 + ),
  8 + },
5 data(){ 9 data(){
6 return { 10 return {
7 domainName:sessionStorage.getItem('domainName'), 11 domainName:sessionStorage.getItem('domainName'),
@@ -9,10 +13,53 @@ export default { @@ -9,10 +13,53 @@ export default {
9 apiUrl:'/api-web/bigScreen/getMachineRoomInfoList', 13 apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
10 jfdata:'', 14 jfdata:'',
11 dialogMachineName:'', 15 dialogMachineName:'',
  16 + commandNameData:'',
  17 + commandNameDataH:[
  18 + {
  19 + name:'湖州灾备机房一',
  20 + htmlName:'huzhouzaibeione',
  21 + val:'one'
  22 + },
  23 + {
  24 + name:'湖州灾备机房二',
  25 + htmlName:'huzhouzaibeitwo',
  26 + val:'two'
  27 + },
  28 + {
  29 + name:'湖州灾备机房三',
  30 + htmlName:'huzhouzaibeithree',
  31 + val:'three'
  32 + }
  33 + ],//机房布局html数据
  34 + commandNameDataX:[
  35 + {
  36 + name:'萧山IDC二号机房',
  37 + htmlName:'xiaoshansecond',
  38 + val:'one'
  39 + },
  40 + {
  41 + name:'萧山IDC三号机房',
  42 + htmlName:'xiaoshanthird',
  43 + val:'two'
  44 + },
  45 + {
  46 + name:'萧山IDC七号机房',
  47 + htmlName:'xiaoshanseven',
  48 + val:'three'
  49 + }
  50 + ],
  51 + commandName:'',//下拉选择默认显示名称
  52 + htmlName:'',//机房组件名称-html名称
  53 + commandVal:'',//下拉选择选中值
  54 + src:'',//机房布局html地址
12 } 55 }
13 }, 56 },
14 setup(props, {attrs, slots, emit}) { 57 setup(props, {attrs, slots, emit}) {
15 const {proxy} = Vue.getCurrentInstance(); 58 const {proxy} = Vue.getCurrentInstance();
  59 + proxy.htmlName=Vue.ref();
  60 + proxy.commandVal=Vue.ref()
  61 + proxy.commandName=Vue.ref();
  62 + proxy.src=Vue.ref();
16 63
17 // 挂载完 64 // 挂载完
18 Vue.onMounted(() => { 65 Vue.onMounted(() => {
@@ -37,31 +84,36 @@ export default { @@ -37,31 +84,36 @@ export default {
37 });*/ 84 });*/
38 } 85 }
39 }) 86 })
40 - proxy.jfdata=[  
41 - {machineRoomName:'兴议机房',wd:'0',sd:'0',area:'0'},  
42 - {machineRoomName:'湖州机房',wd:'0',sd:'0',area:'0'}  
43 - ] 87 +
44 }) 88 })
45 const isShow=(item)=>{ 89 const isShow=(item)=>{
46 - console.log("999",item)  
47 -  
48 - proxy.dialogMachineName=item.machineRoomName  
49 - proxy.centerDialogVisible = true 90 + proxy.dialogMachineName=item.machineRoomName;
  91 + proxy.centerDialogVisible = true;
50 } 92 }
51 const isShowOuter=(item)=>{ 93 const isShowOuter=(item)=>{
52 - console.log(";;;",item)  
53 - if(item.layout == 1){  
54 - proxy.outerVisible = true  
55 - } 94 + proxy.dialogMachineName=item.machineRoomName;
  95 + proxy.outerVisible = true;
56 96
  97 + if(item.layout == 0){
  98 + proxy.commandNameData=proxy.commandNameDataH;//湖州机房布局数据
  99 + }else{
  100 + // proxy.commandNameData=proxy.commandNameDataX;//兴议机房布局数据
57 101
  102 + }
58 } 103 }
  104 + //关闭弹框时清空数据
  105 + const closeDialog=()=>{
  106 + proxy.commandNameData=Vue.ref();
  107 +
  108 + }
  109 +
59 return{ 110 return{
60 centerDialogVisible: Vue.ref(false), 111 centerDialogVisible: Vue.ref(false),
61 outerVisible: Vue.ref(false), 112 outerVisible: Vue.ref(false),
62 innerVisible: Vue.ref(false), 113 innerVisible: Vue.ref(false),
63 isShowOuter, 114 isShowOuter,
64 - isShow 115 + isShow,
  116 + closeDialog
65 } 117 }
66 } 118 }
67 } 119 }