monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 张凯
Commit 0b43dbf4f67e939d62ece6d4b8db09b0d50d2a6f 2 parents fe58090a 1cde713c

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

Inline Side-by-side
Showing 24 changed files with 252 additions and 155 deletions
  1 +-- 添加告警临时表的唯一索引 列有资源id、时间
  2 +ALTER TABLE `b_alarm_trend_temporary` ADD CONSTRAINT unique_resId_and_createTime UNIQUE(resId,createTime);
  3 +
  4 +-- 删除告警临时表重复数据的
  5 +delete from b_alarm_trend_temporary where id not in (select id from (select count(1) as number,id,createTime,resId from b_alarm_trend_temporary group by createTime,resId having number=1) as c);
  6 +
  7 +--查询告警临时表又没重复数据
  8 +select count(1) as number,id,createTime,resId from b_alarm_trend_temporary group by createTime,resId having number>1;
  1 +/**
  2 + * @desc 阿里云平台
  3 + * @author joke
  4 + * @date 2020/4/16 22:11
  5 + **/
  6 +layui.define(['commonDetail','common'], function (exports) {
  7 + var commonDetail = layui.commonDetail;
  8 + var common = layui.common;
  9 + //对外暴露的接口
  10 + exports('ali_cloud_plat', function (data) {
  11 + var resId = '';
  12 + var showFlag = common.getUrlParam("show");
  13 + if(showFlag && showFlag == '0'){
  14 + resId = common.getUrlParam("resId");
  15 + }else{
  16 + resId = data.resId;
  17 + }
  18 + commonDetail.bindTips();
  19 + //基本信息
  20 + var jbxxKpi = "KPIE13DD9A3,KPIF74D9D2B,KPI72E7FB4B";
  21 + //性能信息
  22 + var xnxxKpi = "KPI9E5E1B3E,KPIBFA3F5CD,KPI1584BE1C,KPIC40A80AC,KPI5B7998C9,KPI46BAA9BE";
  23 +
  24 + reload()
  25 +
  26 + //渲染页面
  27 + function reload() {
  28 + //资源状态
  29 + commonDetail.renderResHealth("ali_cloud_plat_state",resId);
  30 + //基本信息
  31 + commonDetail.renderText("ali_cloud_plat_baseinfo",resId,jbxxKpi);
  32 + //性能信息
  33 + commonDetail.renderTextCols("ali_cloud_plat_xnxxinfo",resId,xnxxKpi,1);
  34 + // CPU分配率
  35 + commonDetail.renderGauge("ali_cloud_plat_cpu_rate",resId,"KPIBFA3F5CD");
  36 + // 内存分配率
  37 + commonDetail.renderGauge("ali_cloud_plat_mem_rate",resId,"KPIC40A80AC");
  38 + // 存储分配率
  39 + commonDetail.renderGauge("ali_cloud_plat_storage_rate",resId,"KPI46BAA9BE");
  40 + // CPU分配率走势(12小时)
  41 + commonDetail.renderLineCharat("ali_cloud_plat_cpuset_linechart",resId,"KPIBFA3F5CD","CPU分配率","cpu");
  42 + // 内存分配率走势(12小时)
  43 + commonDetail.renderLineCharat("ali_cloud_plat_memeryset_linechart",resId,"KPIC40A80AC","内存分配率","mem");
  44 + // 存储分配率走势(12小时)
  45 + commonDetail.renderLineCharat("ali_cloud_plat_storageset_linechart",resId,"KPI46BAA9BE","存储分配率","storage", null, 'KPI6EB26394');
  46 + //活动告警
  47 + commonDetail.renderActiveAlarms("ali_cloud_plat_alarms",resId);
  48 + }
  49 +
  50 + //定时任务
  51 + var timer = setInterval(function () {
  52 + reload()
  53 + },commonDetail.timerTime);
  54 + commonDetail.detailTimer.push(timer);
  55 +
  56 + });
  57 +});
@@ -459,7 +459,7 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -459,7 +459,7 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
459 {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true}, 459 {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
460 {field: 'memorySize', title: '内存大小', align: 'center', minWidth: x_120, sort: true, templet: '<div>{{d.memorySize}} GB</div>'}, 460 {field: 'memorySize', title: '内存大小', align: 'center', minWidth: x_120, sort: true, templet: '<div>{{d.memorySize}} GB</div>'},
461 {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true}, 461 {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
462 - {field: 'ptName', title: '所属平台', minWidth: x_130, align: 'center', sort: true}, 462 + // {field: 'ptName', title: '所属平台', minWidth: x_130, align: 'center', sort: true},
463 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'}, 463 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
464 {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true}, 464 {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
465 {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true}, 465 {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
@@ -153,8 +153,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -153,8 +153,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
153 } 153 }
154 var $html = addIconByValue(valueStr); 154 var $html = addIconByValue(valueStr);
155 var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.id); 155 var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.id);
156 - span += ' <span>' + ar.name + '</span>' +  
157 - '<span title="' + titleStr + '" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">' 156 + span += ' <span style="text-align:left;width:40%">' + ar.name + '</span>' +
  157 + '<span title="' + titleStr + '" style="width:60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
158 + $html + valueStr +'</span>'; 158 + $html + valueStr +'</span>';
159 //补充空白区域 159 //补充空白区域
160 if (v.length < cols) { 160 if (v.length < cols) {
  1 +<!--阿里云集群-->
  2 +<article class="page-container template">
  3 + <div class="page-panel">
  4 + <div class="main">
  5 + <div class="layui-card template_detail_content">
  6 + <div class="layui-card-body">
  7 + <div class="lay-row">
  8 + <div class="lay-row-item lay-row-item--auto-width">
  9 + <h5 class="lay-row-title">资源状态</h5>
  10 + <div class="res-state" id="ali_cloud_plat_state"></div>
  11 + </div>
  12 + <div class="lay-row-item lay-row-item--auto-width">
  13 + <h5 class="lay-row-title">基本信息<i data-id="ali_cloud_plat_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
  14 + <ul class="info-table" id="ali_cloud_plat_baseinfo"></ul>
  15 + </div>
  16 + <div class="lay-row-item lay-row-item--auto-width">
  17 + <h5 class="lay-row-title">资源使用概况</h5>
  18 + <ul class="info-table" id="ali_cloud_plat_xnxxinfo"></ul>
  19 + </div>
  20 + </div>
  21 + <div class="lay-row">
  22 + <div class="lay-row-item">
  23 + <h5 class="lay-row-title">CPU分配率</h5>
  24 + <ul id="ali_cloud_plat_cpu_rate" class="pie-wrap dasboard">
  25 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  26 + <div class="pie-half-text">
  27 + <b>0%</b>
  28 + <span></span>
  29 + </div>
  30 + </li>
  31 + </ul>
  32 + </div>
  33 + <div class="lay-row-item">
  34 + <h5 class="lay-row-title">内存分配率</h5>
  35 + <ul id="ali_cloud_plat_mem_rate" class="pie-wrap dasboard">
  36 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  37 + <div class="pie-half-text">
  38 + <b>0%</b>
  39 + <span></span>
  40 + </div>
  41 + </li>
  42 + </ul>
  43 + </div>
  44 + <div class="lay-row-item">
  45 + <h5 class="lay-row-title">存储分配率</h5>
  46 + <ul id="ali_cloud_plat_storage_rate" class="pie-wrap dasboard">
  47 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  48 + <div class="pie-half-text">
  49 + <b>0%</b>
  50 + <span></span>
  51 + </div>
  52 + </li>
  53 + </ul>
  54 + </div>
  55 + </div>
  56 + <div class="lay-row">
  57 + <div class="lay-row-item">
  58 + <h5 class="lay-row-title">CPU分配率走势(12小时)</h5>
  59 + <div id="ali_cloud_plat_cpuset_linechart" class="detail_line_chart"></div>
  60 + </div>
  61 + <div class="lay-row-item">
  62 + <h5 class="lay-row-title">内存分配率走势(12小时)</h5>
  63 + <div id="ali_cloud_plat_memeryset_linechart" class="detail_line_chart"></div>
  64 + </div>
  65 + <div class="lay-row-item">
  66 + <h5 class="lay-row-title">存储分配率走势(12小时)</h5>
  67 + <div id="ali_cloud_plat_storageset_linechart" class="detail_line_chart"></div>
  68 + </div>
  69 + </div>
  70 + <div class="lay-row">
  71 + <div class="lay-row-item">
  72 + <h5 class="lay-row-title">实时告警动态</h5>
  73 + <div id="ali_cloud_plat_alarms"></div>
  74 + </div>
  75 + </div>
  76 + </div>
  77 + </div>
  78 + </div>
  79 + </div>
  80 +</article>
  81 +<textarea id="ali_cloud_plat_param_id" style="display: none;">{{d}}</textarea>
  82 +<script>
  83 + layui.use('ali_cloud_plat', function (fn) {
  84 + var $ = layui.$;
  85 + var parm = $("#ali_cloud_plat_param_id").val();
  86 + if(parm.indexOf('{{d') != -1){
  87 + fn();
  88 + }else{
  89 + fn(JSON.parse(parm));
  90 + }
  91 + });
  92 +</script>
@@ -63,7 +63,7 @@ export default { @@ -63,7 +63,7 @@ export default {
63 63
64 64
65 let hideElDialog = () =>{ 65 let hideElDialog = () =>{
66 - emit('hidedialog'); 66 + emit('hidedialog',false);
67 } 67 }
68 68
69 let okFunc = () =>{ 69 let okFunc = () =>{
@@ -17,13 +17,13 @@ @@ -17,13 +17,13 @@
17 {{node.label }} 17 {{node.label }}
18 </div> 18 </div>
19 <div v-if="isAdmin()" :style="{'width':isAdmin()?'60px':'0px'}"> 19 <div v-if="isAdmin()" :style="{'width':isAdmin()?'60px':'0px'}">
20 - <a @click="editType(data)" style="margin-right: 10px;"> 20 + <a @click="editType(data)" v-if="!data.root" style="margin-right: 10px;">
21 <i class="el-icon-edit"></i> 21 <i class="el-icon-edit"></i>
22 </a> 22 </a>
23 <a @click="showFolder(true,false,node) " style="margin-right: 10px;"> 23 <a @click="showFolder(true,false,node) " style="margin-right: 10px;">
24 <i class="el-icon-plus"></i> 24 <i class="el-icon-plus"></i>
25 </a> 25 </a>
26 - <a @click="deleteDocument(data.id,'folder')"> 26 + <a @click="deleteDocument(data.id,'folder')" v-if="!data.root">
27 <i class="el-icon-delete"></i> 27 <i class="el-icon-delete"></i>
28 </a> 28 </a>
29 </div> 29 </div>
@@ -164,7 +164,7 @@ @@ -164,7 +164,7 @@
164 </el-col> 164 </el-col>
165 </el-row> 165 </el-row>
166 166
167 - <cm-dialog :title="addDialogTitle" width="500px" :showDialogVisible="addDialogVisible" :showFooter="false"> 167 + <cm-dialog :title="addDialogTitle" width="500px" :showDialogVisible="addDialogVisible" @hidedialog="showFolder" :showFooter="false">
168 <template v-slot> 168 <template v-slot>
169 <el-form 169 <el-form
170 label-width="120px" 170 label-width="120px"
@@ -246,11 +246,16 @@ export default { @@ -246,11 +246,16 @@ export default {
246 // // 加载第一个节点数据 246 // // 加载第一个节点数据
247 // getPage(first.id); 247 // getPage(first.id);
248 248
  249 +
249 let root = { 250 let root = {
250 id: '0', 251 id: '0',
251 name: '文档管理', 252 name: '文档管理',
  253 + root:'root',
252 children: res.data 254 children: res.data
253 } 255 }
  256 + if(props.isRecycle){
  257 + root.name = '文档回收站';
  258 + }
254 259
255 defaultExpandedKeys.value = [root.id]; 260 defaultExpandedKeys.value = [root.id];
256 addHistoryNode(root); 261 addHistoryNode(root);
@@ -481,12 +486,12 @@ export default { @@ -481,12 +486,12 @@ export default {
481 sort: 100 486 sort: 100
482 }); 487 });
483 let showFolder = (flg, isUser,node) => { 488 let showFolder = (flg, isUser,node) => {
  489 + addDialogVisible.value = flg;
484 let title=""; 490 let title="";
485 if(node){ 491 if(node){
486 currentNodeData.value = node.data; 492 currentNodeData.value = node.data;
487 title =`修改树节点“${currentNodeData.value.name}“子文件夹`; 493 title =`修改树节点“${currentNodeData.value.name}“子文件夹`;
488 } 494 }
489 -  
490 docForm.value = { 495 docForm.value = {
491 id:'', 496 id:'',
492 name: '', 497 name: '',
@@ -494,10 +499,11 @@ export default { @@ -494,10 +499,11 @@ export default {
494 type: '', 499 type: '',
495 sort: 100 500 sort: 100
496 }; 501 };
  502 + if(isUser != undefined){
497 isUserFolder.value = isUser; 503 isUserFolder.value = isUser;
498 - addDialogVisible.value = flg; 504 + }
499 505
500 - if (addDialogVisible.value) { 506 + if (addDialogVisible.value != undefined) {
501 title = `新建自定义文件夹`; 507 title = `新建自定义文件夹`;
502 } 508 }
503 addDialogTitle.value = title 509 addDialogTitle.value = title
@@ -90,7 +90,7 @@ @@ -90,7 +90,7 @@
90 <dl class="layui-nav-child"> 90 <dl class="layui-nav-child">
91 <!--调整到刷新旁边，此处去掉 lu 屏蔽 20211130--> 91 <!--调整到刷新旁边，此处去掉 lu 屏蔽 20211130-->
92 <!-- <dd layadmin-event="toBigScreen" style="text-align: left;"><a><img src="/src/style/img/icon-daping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;大屏</a></dd>--> 92 <!-- <dd layadmin-event="toBigScreen" style="text-align: left;"><a><img src="/src/style/img/icon-daping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;大屏</a></dd>-->
93 - <dd layadmin-event="toDZSWJScreen" style="text-align: left;"><a><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px">&nbsp;&nbsp;电子税务大屏</a></dd> 93 + <dd layadmin-event="toDZSWJScreen" style="text-align: left;"><a><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px">&nbsp;&nbsp;电子税务局大屏</a></dd>
94 <!--调整到首页旁边，此处去掉 joke 屏蔽 20211129--> 94 <!--调整到首页旁边，此处去掉 joke 屏蔽 20211129-->
95 <!-- <dd layadmin-event="toYTHViewScreen" style="text-align: left;"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;一体化视图</a></dd>--> 95 <!-- <dd layadmin-event="toYTHViewScreen" style="text-align: left;"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;一体化视图</a></dd>-->
96 <dd layadmin-event="toBiZhEalZhSYS" style="text-align: left;"><a><img src="/src/style/img/icon-YWJKD.png" style="width: 16px;height: 16px">&nbsp;&nbsp;业务健康度</a></dd> 96 <dd layadmin-event="toBiZhEalZhSYS" style="text-align: left;"><a><img src="/src/style/img/icon-YWJKD.png" style="width: 16px;height: 16px">&nbsp;&nbsp;业务健康度</a></dd>
1 <div> 1 <div>
2 <span class="el-dropdown-link" @click="showMachineRoomDialog(true)" > 2 <span class="el-dropdown-link" @click="showMachineRoomDialog(true)" >
3 - {{textString}} 3 + {{textString}}1111
4 </span> 4 </span>
5 5
6 - <cm-dialog title="收藏" width="500px" :showDialogVisible="dialogFlg" @hidedialog="showMachineRoomDialog"> 6 + <cm-dialog title="机房布局" :showFooter="false" :showDialogVisible="dialogFlg" @hidedialog="showMachineRoomDialog">
7 <template v-slot> 7 <template v-slot>
  8 + <div style="overflow: auto">
8 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom> 9 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
  10 + </div>
9 </template> 11 </template>
10 </cm-dialog> 12 </cm-dialog>
11 13
1 <div> 1 <div>
2 <span class="el-dropdown-link" @click="showMachineRoomDialog(true)" > 2 <span class="el-dropdown-link" @click="showMachineRoomDialog(true)" >
3 - {{textString}} 3 + {{textString}}2222
4 </span> 4 </span>
5 5
6 - <cm-dialog title="收藏" width="500px" :showDialogVisible="dialogFlg" @hidedialog="showMachineRoomDialog"> 6 + <cm-dialog title="机柜" :showFooter="false" :showDialogVisible="dialogFlg" @hidedialog="showMachineRoomDialog">
7 <template v-slot> 7 <template v-slot>
8 - <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom> 8 + <machineRoomDetail v-if="isDetailShow" :detailData="detailData" :machineData="machineData"></machineRoomDetail>
9 </template> 9 </template>
10 </cm-dialog> 10 </cm-dialog>
11 11
@@ -2,8 +2,8 @@ export default { @@ -2,8 +2,8 @@ export default {
2 name: 'machineRoomDetailComponents', 2 name: 'machineRoomDetailComponents',
3 template: '', 3 template: '',
4 components: { 4 components: {
5 - 'GetMachineRoom': Vue.defineAsyncComponent(  
6 - () => myImport('views/commonComponents/getMachineRoom/index') 5 + 'machineRoomDetail': Vue.defineAsyncComponent(
  6 + () => myImport('views/commonComponents/machineRoomDetail/index')
7 ), 7 ),
8 }, 8 },
9 props: { 9 props: {
1 <div class="machine-room"> 1 <div class="machine-room">
2 <div class="room-top"> 2 <div class="room-top">
3 <el-tabs type="card" @tab-click="handleCommand" v-model="commandVal"> 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> 4 + <el-tab-pane v-for="item in commandNameData" :label="item.machineRoomName" :name="item.machineRoomCode"></el-tab-pane>
5 5
6 </el-tabs> 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> 7 </div>
21 <div class="room-html"> 8 <div class="room-html">
22 <el-row> 9 <el-row>
23 <el-col class="video-item" :span="24" > 10 <el-col class="video-item" :span="24" >
24 - <MachineRoom v-if="src" :src="src" ref="machineRoom" ></MachineRoom> 11 + <MachineRoom v-if="src" :src="src" :commandNameDataItem="commandNameDataItem" ref="machineRoom" ></MachineRoom>
25 </el-col> 12 </el-col>
26 </el-row> 13 </el-row>
27 </div> 14 </div>
@@ -22,7 +22,7 @@ export default { @@ -22,7 +22,7 @@ export default {
22 return { 22 return {
23 domainName:sessionStorage.getItem('domainName'), 23 domainName:sessionStorage.getItem('domainName'),
24 accessToken:localStorage.getItem('access_token'), 24 accessToken:localStorage.getItem('access_token'),
25 - commandName:'',//下拉选择默认显示名称 25 + // commandName:'',//下拉选择默认显示名称
26 htmlName:'',//机房组件名称-html名称 26 htmlName:'',//机房组件名称-html名称
27 commandVal:'',//下拉选择选中值 27 commandVal:'',//下拉选择选中值
28 src:'',//机房布局html地址 28 src:'',//机房布局html地址
@@ -34,30 +34,34 @@ export default { @@ -34,30 +34,34 @@ export default {
34 const {proxy} = Vue.getCurrentInstance(); 34 const {proxy} = Vue.getCurrentInstance();
35 proxy.htmlName=Vue.ref(); 35 proxy.htmlName=Vue.ref();
36 proxy.commandVal=Vue.ref() 36 proxy.commandVal=Vue.ref()
37 - proxy.commandName=Vue.ref(); 37 + // proxy.commandName=Vue.ref();
38 proxy.src=Vue.ref(); 38 proxy.src=Vue.ref();
  39 + const commandNameDataItem=Vue.ref();
  40 + const allComponents=Vue.ref();
39 // 获取状态 41 // 获取状态
40 const { changeIndex} = indirectManage() 42 const { changeIndex} = indirectManage()
41 43
42 // 挂载完 44 // 挂载完
43 Vue.onMounted(() => { 45 Vue.onMounted(() => {
44 - proxy.commandVal='one'; 46 + proxy.commandVal=props.commandNameData[0].machineRoomCode;
45 proxy.getMachine(proxy.commandVal); 47 proxy.getMachine(proxy.commandVal);
46 48
47 }) 49 })
48 //初始获取默认机房选择信息 50 //初始获取默认机房选择信息
49 const getMachine=(command)=>{ 51 const getMachine=(command)=>{
50 //commandNameData机房机柜数据 52 //commandNameData机房机柜数据
  53 + let allComponent=[];
51 props.commandNameData.map((item,index)=>{ 54 props.commandNameData.map((item,index)=>{
52 - if(command==item.val){  
53 - proxy.htmlName=item.htmlName;  
54 - proxy.commandName=item.name;  
55 - proxy.commandVal=item.val; 55 + if(command==item.machineRoomCode){
  56 + // proxy.htmlName=item.htmlName;
  57 + // proxy.commandName=item.name;
  58 + proxy.commandVal=item.machineRoomCode;
  59 + proxy.commandNameDataItem=item;
56 } 60 }
57 }) 61 })
58 // proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex 62 // proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
59 //根据htmlName确定引入的机房 63 //根据htmlName确定引入的机房
60 - proxy.src=proxy.htmlName 64 + proxy.src=proxy.commandVal
61 65
62 } 66 }
63 const handleCommand=(command,event)=>{ 67 const handleCommand=(command,event)=>{
@@ -70,7 +74,9 @@ export default { @@ -70,7 +74,9 @@ export default {
70 74
71 return{ 75 return{
72 getMachine, 76 getMachine,
73 - handleCommand 77 + handleCommand,
  78 + commandNameDataItem,
  79 + allComponents
74 } 80 }
75 } 81 }
76 } 82 }
1 -<!--<iframe v-if="src" style="width:90%;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>-->  
2 -<HuzhouOne v-if="showNum==1" :src="machineData"></HuzhouOne>  
3 -<HuzhouTwo v-if="showNum==2" :src="machineData"></HuzhouTwo>  
4 -<HuzhouThree v-if="showNum==3" :src="machineData"></HuzhouThree>  
5 -<Xiaoshansecond v-if="showNum==4" :src="machineData"></Xiaoshansecond>  
6 -<Xiaoshanthird v-if="showNum==5" :src="machineData"></Xiaoshanthird>  
7 -<Xiaoshanseven v-if="showNum==6" :src="machineData"></Xiaoshanseven> 1 +<component :is="srcName" :src="machineData" />
@@ -19,23 +19,16 @@ export default { @@ -19,23 +19,16 @@ export default {
19 ), 19 ),
20 'Xiaoshanseven': Vue.defineAsyncComponent( 20 'Xiaoshanseven': Vue.defineAsyncComponent(
21 () => myImport('views/commonComponents/xiaoshanseven/index') 21 () => myImport('views/commonComponents/xiaoshanseven/index')
22 - ), 22 + )
23 }, 23 },
24 - props:['src'], 24 + props:['src','commandNameDataItem'],
25 data(){ 25 data(){
26 return { 26 return {
27 domainName:sessionStorage.getItem('domainName'), 27 domainName:sessionStorage.getItem('domainName'),
28 accessToken:localStorage.getItem('access_token'), 28 accessToken:localStorage.getItem('access_token'),
29 isDetailShow:false,//详情页 29 isDetailShow:false,//详情页
30 // changeIndexNav:this.changeIndex,//nav是否点击变化 30 // changeIndexNav:this.changeIndex,//nav是否点击变化
31 - htmmlNameData:[  
32 - {name:'huzhouzaibeione',val:'湖州灾备机房一'},  
33 - {name:'huzhouzaibeitwo',val:'湖州灾备机房二'},  
34 - {name:'huzhouzaibeithree',val:'湖州灾备机房三'},  
35 - {name:'xiaoshansecond',val:'萧山IDC二号机房'},  
36 - {name:'xiaoshanthird',val:'萧山IDC三号机房'},  
37 - {name:'xiaoshanseven',val:'萧山IDC七号机房'},  
38 - ], 31 +
39 srcName:this.src, 32 srcName:this.src,
40 machineData:'',//机房信息数据 33 machineData:'',//机房信息数据
41 // src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken 34 // src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken
@@ -54,27 +47,24 @@ export default { @@ -54,27 +47,24 @@ export default {
54 setup(props, {attrs, slots, emit}) { 47 setup(props, {attrs, slots, emit}) {
55 const {proxy} = Vue.getCurrentInstance(); 48 const {proxy} = Vue.getCurrentInstance();
56 const showNum=Vue.ref() 49 const showNum=Vue.ref()
  50 + const componentName=Vue.ref();
57 51
58 52
59 // 挂载完 53 // 挂载完
60 Vue.onMounted(() => { 54 Vue.onMounted(() => {
61 -  
62 proxy.getName(); 55 proxy.getName();
63 }) 56 })
64 const getName=()=>{ 57 const getName=()=>{
65 - proxy.htmmlNameData.map((item,index)=>{  
66 - if(proxy.srcName==item.name){  
67 - proxy.showNum=index+1;  
68 - proxy.machineData=item;  
69 - }  
70 - })  
71 - console.log("src",proxy.src,proxy.showNum) 58 + console.log("accept",proxy.srcName, props.commandNameDataItem)
  59 +
  60 + proxy.machineData= props.commandNameDataItem;
72 } 61 }
73 62
74 return{ 63 return{
75 // src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken 64 // src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
76 getName, 65 getName,
77 - showNum 66 + showNum,
  67 + componentName
78 68
79 } 69 }
80 } 70 }
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 <div class='img-serve' > 12 <div class='img-serve' >
13 13
14 <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'> 14 <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
15 - <div class='img-serve-text'>{{item.provider}}</div> 15 + <div class='img-serve-text'>{{item.resName}}</div>
16 <div class='lamp'> 16 <div class='lamp'>
17 <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'> 17 <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
18 <div class='img-lamp'> 18 <div class='img-lamp'>
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 <div class='info-contain'> 35 <div class='info-contain'>
36 <div class='info-text'>机柜信息</div> 36 <div class='info-text'>机柜信息</div>
37 <div class='info-text-bot'> 37 <div class='info-text-bot'>
38 - <p>机 房：{{machineData.val}}</p> 38 + <p>机 房：{{machineData.machineRoomName}}</p>
39 <p>机柜编号：{{detailData.name}}</p> 39 <p>机柜编号：{{detailData.name}}</p>
40 <p>机柜容量：{{infoData.cabinetCapacity}}</p> 40 <p>机柜容量：{{infoData.cabinetCapacity}}</p>
41 <p>设备数量：{{infoData.deviceNum}}台</p> 41 <p>设备数量：{{infoData.deviceNum}}台</p>
@@ -14,7 +14,8 @@ export default { @@ -14,7 +14,8 @@ export default {
14 isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房 14 isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
15 serviceData:[],//机柜的服务器数据 15 serviceData:[],//机柜的服务器数据
16 deviceDataInfo:'',//设备详细信息 16 deviceDataInfo:'',//设备详细信息
17 - deviceDatas: [ 17 + deviceDatas:[],
  18 + /* deviceDatas: [
18 { 19 {
19 name:'E12',//机柜名称 20 name:'E12',//机柜名称
20 21
@@ -158,7 +159,7 @@ export default { @@ -158,7 +159,7 @@ export default {
158 deviceNum:'1', 159 deviceNum:'1',
159 cabinetCapacity :'42U', 160 cabinetCapacity :'42U',
160 }, 161 },
161 - ],//服务器设备信息 162 + ],//服务器设备信息*/
162 infoData:'',//设备详细信息 163 infoData:'',//设备详细信息
163 // isShowDevice:false,//是否显示设备信息 164 // isShowDevice:false,//是否显示设备信息
164 165
@@ -173,26 +174,17 @@ export default { @@ -173,26 +174,17 @@ export default {
173 174
174 // 挂载完 175 // 挂载完
175 Vue.onMounted(() => { 176 Vue.onMounted(() => {
176 - if(props.machineData.name.indexOf('huzhou')!=-1){  
177 - proxy.isCenter=true;  
178 - proxy.theirRoom='湖州灾备';  
179 - }else{  
180 - proxy.isCenter=false;  
181 - proxy.theirRoom='兴议机房'; 177 + console.log('&&&',proxy.machineData)
182 178
183 - }  
184 proxy.getData(); 179 proxy.getData();
185 - // proxy.getDeviceInfo();  
186 180
187 }) 181 })
188 const getData=()=>{ 182 const getData=()=>{
189 let parmas={ 183 let parmas={
190 - theirRoom:proxy.theirRoom, 184 + theirRoomId:props.machineData.machineRoomId,
191 theirCabinet:CabinetNum 185 theirCabinet:CabinetNum
192 } 186 }
193 $.get(proxy.domainName+'/api-web/v32/res/cabinet?access_token='+proxy.accessToken,parmas,function (res){ 187 $.get(proxy.domainName+'/api-web/v32/res/cabinet?access_token='+proxy.accessToken,parmas,function (res){
194 -  
195 - console.log("res1",res)  
196 if(res){ 188 if(res){
197 let resData=res.data; 189 let resData=res.data;
198 let deviceDatas=[]; 190 let deviceDatas=[];
@@ -204,7 +196,6 @@ export default { @@ -204,7 +196,6 @@ export default {
204 deviceData:resData 196 deviceData:resData
205 }) 197 })
206 proxy.deviceDatas=deviceDatas; 198 proxy.deviceDatas=deviceDatas;
207 - console.log("devdats",proxy.deviceDatas)  
208 proxy.getDeviceInfo() 199 proxy.getDeviceInfo()
209 200
210 } 201 }
@@ -232,7 +223,7 @@ export default { @@ -232,7 +223,7 @@ export default {
232 itemD.serviceClass='img-serve-'+serveNum;//设备的css的class 223 itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
233 itemD.uClass=''; 224 itemD.uClass='';
234 if(leftStr>1){ 225 if(leftStr>1){
235 - let bottom=(leftStr-1)*17; 226 + let bottom=(leftStr-1)*16;
236 itemD.uClass='bottom:'+bottom+'px'; 227 itemD.uClass='bottom:'+bottom+'px';
237 228
238 } 229 }
@@ -50,8 +50,8 @@ @@ -50,8 +50,8 @@
50 <div class="grid-content bg-purple-light com-box"> 50 <div class="grid-content bg-purple-light com-box">
51 <span> 51 <span>
52 <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png"> 52 <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
53 - <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>  
54 - <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span> 53 + <span class="com-box-value" :style="combitnumberStyle" style="left: 32%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
  54 + <span class="com-box-value" :style="combitnumberStyle" style="left: 32%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
55 </span> 55 </span>
56 </div> 56 </div>
57 </el-col> 57 </el-col>
@@ -50,8 +50,8 @@ @@ -50,8 +50,8 @@
50 <div class="grid-content bg-purple-light com-box"> 50 <div class="grid-content bg-purple-light com-box">
51 <span> 51 <span>
52 <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png"> 52 <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
53 - <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>  
54 - <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span> 53 + <span class="com-box-value" :style="combitnumberStyle" style="left: 32%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
  54 + <span class="com-box-value" :style="combitnumberStyle" style="left: 32%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
55 </span> 55 </span>
56 </div> 56 </div>
57 </el-col> 57 </el-col>
@@ -43,7 +43,7 @@ export default { @@ -43,7 +43,7 @@ export default {
43 {value:v.value,date:v.date} 43 {value:v.value,date:v.date}
44 ) 44 )
45 legendData.push( 45 legendData.push(
46 - {value:i+1,date:v.date} 46 + {value:v.number,date:v.date}
47 ) 47 )
48 }) 48 })
49 proxy.legendData=legendData 49 proxy.legendData=legendData
@@ -82,7 +82,7 @@ export default { @@ -82,7 +82,7 @@ export default {
82 }, 82 },
83 xAxis: { 83 xAxis: {
84 type: 'category', 84 type: 'category',
85 - data: proxy.legendData, 85 + data: proxy.legendData.reverse(),
86 axisLine:{ 86 axisLine:{
87 show:true,//是否显示坐标线 87 show:true,//是否显示坐标线
88 lineStyle: { 88 lineStyle: {
@@ -14,46 +14,6 @@ export default { @@ -14,46 +14,6 @@ export default {
14 jfdata:'', 14 jfdata:'',
15 dialogMachineName:'', 15 dialogMachineName:'',
16 commandNameData:'', 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 - // name:'兴议二号机房',  
52 - // htmlName:'xiaoshansecond',  
53 - // val:'one'  
54 - // }  
55 - ],  
56 - commandName:'',//下拉选择默认显示名称  
57 htmlName:'',//机房组件名称-html名称 17 htmlName:'',//机房组件名称-html名称
58 commandVal:'',//下拉选择选中值 18 commandVal:'',//下拉选择选中值
59 src:'',//机房布局html地址 19 src:'',//机房布局html地址
@@ -63,7 +23,6 @@ export default { @@ -63,7 +23,6 @@ export default {
63 const {proxy} = Vue.getCurrentInstance(); 23 const {proxy} = Vue.getCurrentInstance();
64 proxy.htmlName=Vue.ref(); 24 proxy.htmlName=Vue.ref();
65 proxy.commandVal=Vue.ref() 25 proxy.commandVal=Vue.ref()
66 - proxy.commandName=Vue.ref();  
67 proxy.src=Vue.ref(); 26 proxy.src=Vue.ref();
68 27
69 // 挂载完 28 // 挂载完
@@ -71,22 +30,7 @@ export default { @@ -71,22 +30,7 @@ export default {
71 $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),function (res) { 30 $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),function (res) {
72 if(res.data){ 31 if(res.data){
73 proxy.jfdata=res.data; 32 proxy.jfdata=res.data;
74 - /* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data);  
75 - $("#sjzx_machineroom_id").html(html);  
76 - //机房点击事件  
77 - $(".sjzx_machineroom").on("click",function () {  
78 - const name = $(this).attr("name");  
79 - layer.open({  
80 - type:2  
81 - , shade: 0.6 //遮罩透明度  
82 - , maxmin: false //允许全屏最小化  
83 - , anim: 1 //0-6的动画形式，-1不开启  
84 - , content:['http://127.0.0.1:8081/video.html?type='+name+'','no']  
85 - , area:["1100px",'720px']  
86 - // , title: true //不显示标题栏  
87 - // , title: name  
88 - })  
89 - });*/ 33 +
90 } 34 }
91 }) 35 })
92 36
@@ -98,12 +42,7 @@ export default { @@ -98,12 +42,7 @@ export default {
98 const isShowOuter=(item)=>{ 42 const isShowOuter=(item)=>{
99 proxy.dialogMachineName=item.machineRoomName; 43 proxy.dialogMachineName=item.machineRoomName;
100 proxy.outerVisible = true; 44 proxy.outerVisible = true;
101 - if(item.layout == 0){  
102 - proxy.commandNameData=proxy.commandNameDataH;//湖州机房布局数据  
103 - }else{  
104 - proxy.commandNameData=proxy.commandNameDataX;//兴议机房布局数据  
105 -  
106 - } 45 + proxy.getData(item);
107 } 46 }
108 //关闭弹框时清空数据 47 //关闭弹框时清空数据
109 const closeDialog=()=>{ 48 const closeDialog=()=>{
@@ -111,13 +50,38 @@ export default { @@ -111,13 +50,38 @@ export default {
111 50
112 } 51 }
113 52
  53 + /*获取机房数据
  54 + * */
  55 + let roomSecondData=Vue.ref([]);//兴议或者湖州下层机房数据
  56 + const getData=(roomRow)=>{
  57 + proxy.$http.get('/api-web/machineroom/list',{},function (res){
  58 + if(res && res.data){
  59 + let roomSecondDataArr=res.data;
  60 + let roomSecondData=[];
  61 +
  62 + roomSecondDataArr.map((item,index)=>{
  63 + if(item.parentId!='0' && roomRow.machineRoomId==item.parentId){
  64 + roomSecondData.push(item)
  65 + }
  66 + })
  67 + proxy.roomSecondData=roomSecondData;
  68 +
  69 + proxy.commandNameData=proxy.roomSecondData;//机房布局数据
  70 +
  71 + console.log("下层机房数据",proxy.roomSecondData)
  72 + }
  73 + })
  74 + }
  75 +
114 return{ 76 return{
115 centerDialogVisible: Vue.ref(false), 77 centerDialogVisible: Vue.ref(false),
116 outerVisible: Vue.ref(false), 78 outerVisible: Vue.ref(false),
117 innerVisible: Vue.ref(false), 79 innerVisible: Vue.ref(false),
118 isShowOuter, 80 isShowOuter,
119 isShow, 81 isShow,
120 - closeDialog 82 + closeDialog,
  83 + roomSecondData,
  84 + getData
121 } 85 }
122 } 86 }
123 } 87 }