monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 6587519b6766519a78aaf7b47e1a5874512e9c9a 2 parents 600b1b83 d2d0454d

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

Inline Side-by-side
Showing 26 changed files with 724 additions and 26 deletions
@@ -1604,7 +1604,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -1604,7 +1604,8 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
1604 // {field: 'adminName', title: '负责人', minWidth: 123, align: 'center', sort: true}, 1604 // {field: 'adminName', title: '负责人', minWidth: 123, align: 'center', sort: true},
1605 // {field: 'adminPhone', title: '负责人电话', minWidth: 118, align: 'center', sort: true}, 1605 // {field: 'adminPhone', title: '负责人电话', minWidth: 118, align: 'center', sort: true},
1606 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'}, 1606 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
1607 - {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'} 1607 + {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'},
  1608 + {field: 'linkState', title: '连接状态', align: 'center', minWidth: x_110, templet: '#linkStateTpl', sort: true}
1608 ], 1609 ],
1609 "MIDDLEWARE_TOMCAT": [ 1610 "MIDDLEWARE_TOMCAT": [
1610 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'}, 1611 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -469,7 +469,7 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common', @@ -469,7 +469,7 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
469 , icon: 1 469 , icon: 1
470 , time: 1000 470 , time: 1000
471 },function () { 471 },function () {
472 - reloadTable(); 472 + // reloadTable();
473 }); 473 });
474 }).error(function (error) { 474 }).error(function (error) {
475 console.error(error); 475 console.error(error);
@@ -467,7 +467,7 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common', @@ -467,7 +467,7 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
467 elem: '#upload_tasktemp' //绑定元素 467 elem: '#upload_tasktemp' //绑定元素
468 , url: common.domainName + '/api-web/inspectiontask/upload?access_token=' + accessToken //上传接口 468 , url: common.domainName + '/api-web/inspectiontask/upload?access_token=' + accessToken //上传接口
469 , accept: 'file' //允许上传的文件类型 469 , accept: 'file' //允许上传的文件类型
470 - , exts: 'docx' 470 + , exts: 'docx|doc'
471 , multiple: false 471 , multiple: false
472 , before: function () { 472 , before: function () {
473 layer.load(2); 473 layer.load(2);
@@ -46,6 +46,24 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -46,6 +46,24 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
46 }); 46 });
47 deleteById(noticeTimelyCodeList); 47 deleteById(noticeTimelyCodeList);
48 }); 48 });
  49 + // 全部刷新
  50 + $('#btn-noticeTimely-refresh').on('click', function () {
  51 + layer.load(2);
  52 + $.ajax({
  53 + url: domainName + '/api-web/noticeTimely/refresh?access_token=' + accessToken,
  54 + type: 'get',
  55 + success: function (response) {
  56 + layer.closeAll('loading');
  57 + if (response.success) {
  58 + layer.msg('刷新成功!', {icon: 1, time: 3000});
  59 + reloadTable();
  60 + } else {
  61 + layer.msg('刷新失败!', {icon: 2, time: 3000});
  62 + }
  63 + }
  64 + })
  65 + });
  66 +
49 //switch事件 67 //switch事件
50 $.each(switchElement, function (i, v) { 68 $.each(switchElement, function (i, v) {
51 form.on('switch(switch_noticeTimely_checkbox_' + v + ')', function (data) { 69 form.on('switch(switch_noticeTimely_checkbox_' + v + ')', function (data) {
@@ -135,6 +153,17 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -135,6 +153,17 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
135 var ids = [$(this).data('id')]; 153 var ids = [$(this).data('id')];
136 deleteStateById(ids); 154 deleteStateById(ids);
137 }); 155 });
  156 + //全部删除
  157 + $('#btn-notice-state-delete').unbind("click").on('click',function () {
  158 + //获取选中数据
  159 + var checks = table.checkStatus('table-noticeTimely-state-list').data;
  160 + var list= checks.map(item => item.id);
  161 + if(list.length>0){
  162 + deleteStateById(list);
  163 + }else{
  164 + layer.msg('请最少选择一项数据', {icon: 7, time: 2000});
  165 + }
  166 + })
138 } 167 }
139 }); 168 });
140 } 169 }
@@ -223,12 +252,6 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -223,12 +252,6 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
223 loadStateTable(id); 252 loadStateTable(id);
224 }, 253 },
225 yes: function (index, layero) { 254 yes: function (index, layero) {
226 - //获取选中数据  
227 - var checks = table.checkStatus('table-noticeTimely-state-list').data;  
228 - var list= checks.map(item => item.id);  
229 - if(list.length>0){  
230 - deleteStateById(list);  
231 - }  
232 layer.close(index); 255 layer.close(index);
233 } 256 }
234 }); 257 });
@@ -24,6 +24,8 @@ layui.define(['commonDetail','common'], function (exports) { @@ -24,6 +24,8 @@ layui.define(['commonDetail','common'], function (exports) {
24 var netcardkpi = "KPIFABFD741,KPID339D51B,KPI02062F43"; 24 var netcardkpi = "KPIFABFD741,KPID339D51B,KPI02062F43";
25 //HBA卡 25 //HBA卡
26 var hbaKpi = "KPIFABFD741,KPI6BF1F392,KPI5858832B,KPI8BFD7BC7,KPI2EF4F8CD"; 26 var hbaKpi = "KPIFABFD741,KPI6BF1F392,KPI5858832B,KPI8BFD7BC7,KPI2EF4F8CD";
  27 + // LUN信息
  28 + var lunKpi = "KPID9EE5B18,KPI2D4365CA,KPI06F12BAA,KPI008F0D3A,KPI17B00478";
27 reload() 29 reload()
28 30
29 //渲染页面 31 //渲染页面
@@ -58,6 +60,11 @@ layui.define(['commonDetail','common'], function (exports) { @@ -58,6 +60,11 @@ layui.define(['commonDetail','common'], function (exports) {
58 commonDetail.renderActiveAlarms("vmware_physicshost_alarmlist",resId); 60 commonDetail.renderActiveAlarms("vmware_physicshost_alarmlist",resId);
59 61
60 commonDetail.renderVhostTable("vmware_physicshost_vhostlist",'VIRTUALIZATION_VMWARE_VHOST',resId); 62 commonDetail.renderVhostTable("vmware_physicshost_vhostlist",'VIRTUALIZATION_VMWARE_VHOST',resId);
  63 +
  64 + // Start Wang 2022/2/24 9:29 解决：vm宿主机连接的LUN信息没有展示
  65 + // LUN信息
  66 + commonDetail.renderTable("vmware_physicshost_lunlist",false,resId,lunKpi,'LUN信息','lun');
  67 + // End Wang 2022/2/24 9:30
61 } 68 }
62 69
63 //定时任务 70 //定时任务
@@ -50,6 +50,8 @@ @@ -50,6 +50,8 @@
50 <label class="layui-form-label">周期类型<span style="color: red">*</span>：</label> 50 <label class="layui-form-label">周期类型<span style="color: red">*</span>：</label>
51 <div class="layui-input-block"> 51 <div class="layui-input-block">
52 <select class="layui-select" name="frequencyType"> 52 <select class="layui-select" name="frequencyType">
  53 + <!--增加请选择项，去除默认加载年报，joke modify 20220224-->
  54 + <option value="">请选择</option>
53 <option value="year">年报</option> 55 <option value="year">年报</option>
54 <option value="quarter">季报</option> 56 <option value="quarter">季报</option>
55 <option value="week">周报</option> 57 <option value="week">周报</option>
@@ -119,7 +119,7 @@ @@ -119,7 +119,7 @@
119 <div class="layui-form-item hide" id="notice_timely_param_sql"> 119 <div class="layui-form-item hide" id="notice_timely_param_sql">
120 <label class="layui-form-label textarea-label">展示内容</label> 120 <label class="layui-form-label textarea-label">展示内容</label>
121 <div class="layui-input-block" style="display: flex;"> 121 <div class="layui-input-block" style="display: flex;">
122 - <textarea name="details" placeholder="请输入展示内容" class="layui-textarea" style="width: 92%"></textarea> 122 + <textarea name="details" placeholder="请输入展示内容" class="layui-textarea" style=""></textarea>
123 </div> 123 </div>
124 </div> 124 </div>
125 <div class="layui-form-item hide" id="notice_timely_param_level"> 125 <div class="layui-form-item hide" id="notice_timely_param_level">
@@ -129,7 +129,7 @@ @@ -129,7 +129,7 @@
129 </article> 129 </article>
130 <script type="text/html" id="noticeTimelyParamAddRowHtml"> 130 <script type="text/html" id="noticeTimelyParamAddRowHtml">
131 <div class="layui-form-item"> 131 <div class="layui-form-item">
132 - <div class="layui-inline" style="float: right"> 132 + <div class="layui-inline" style="margin-left: 110px">
133 <div class="layui-notice-time-lable">当数据集中的</div> 133 <div class="layui-notice-time-lable">当数据集中的</div>
134 <select class="layui-notice-time-select notice_time_select_sql_value"> 134 <select class="layui-notice-time-select notice_time_select_sql_value">
135 135
@@ -29,6 +29,9 @@ @@ -29,6 +29,9 @@
29 <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-noticeTimely-delete"> 29 <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-noticeTimely-delete">
30 <i class="layui-icon">&#xe640;</i>删除 30 <i class="layui-icon">&#xe640;</i>删除
31 </button> 31 </button>
  32 + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-noticeTimely-refresh">
  33 + <i class="layui-icon">&#xe669;</i>全部刷新
  34 + </button>
32 </div> 35 </div>
33 <table id="table-noticeTimely-list" lay-filter="table-noticeTimely-list"></table> 36 <table id="table-noticeTimely-list" lay-filter="table-noticeTimely-list"></table>
34 </div> 37 </div>
@@ -37,6 +40,13 @@ @@ -37,6 +40,13 @@
37 </div> 40 </div>
38 </article> 41 </article>
39 <script type="text/html" id="noticeTimely-state-html" > 42 <script type="text/html" id="noticeTimely-state-html" >
  43 + <div class="layui-card-body">
  44 + <div class="warn-btns">
  45 + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-notice-state-delete">
  46 + <i class="layui-icon">&#xe640;</i>删除
  47 + </button>
  48 + </div>
  49 + </div>
40 <div> 50 <div>
41 <table id="table-noticeTimely-state-list" lay-filter="table-noticeTimely-state-list"></table> 51 <table id="table-noticeTimely-state-list" lay-filter="table-noticeTimely-state-list"></table>
42 </div> 52 </div>
@@ -21,9 +21,9 @@ @@ -21,9 +21,9 @@
21 <button class="layui-btn layui-btn-sm layui-btn-normal" id="reporttype-create"> 21 <button class="layui-btn layui-btn-sm layui-btn-normal" id="reporttype-create">
22 <i class="layui-icon">&#xe654;</i>新增 22 <i class="layui-icon">&#xe654;</i>新增
23 </button> 23 </button>
24 - <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-reporttype-delete">  
25 - <i class="layui-icon">&#xe640;</i>删除  
26 - </button> 24 +<!-- <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-reporttype-delete">-->
  25 +<!-- <i class="layui-icon">&#xe640;</i>删除-->
  26 +<!-- </button>-->
27 </div> 27 </div>
28 <table id="reporttype-table" lay-filter="reporttypetable"></table> 28 <table id="reporttype-table" lay-filter="reporttypetable"></table>
29 </div> 29 </div>
@@ -34,7 +34,7 @@ @@ -34,7 +34,7 @@
34 34
35 <!--新增/编辑弹出框--> 35 <!--新增/编辑弹出框-->
36 <script type="text/html" id="reporttypeEdit"> 36 <script type="text/html" id="reporttypeEdit">
37 - <form class="layui-form layui-form-pane" action="" lay-filter="form-reporttype-edit" id="form-reporttype-edit"> 37 + <form class="layui-form layui-form-pane" action="" lay-filter="form-reporttype-edit" id="form-reporttype-edit" onsubmit="return false;">
38 <input type="hidden" name="id"> 38 <input type="hidden" name="id">
39 <fieldset class="layui-elem-field layui-field-title"> 39 <fieldset class="layui-elem-field layui-field-title">
40 <legend>基本信息</legend> 40 <legend>基本信息</legend>
@@ -80,6 +80,14 @@ @@ -80,6 +80,14 @@
80 <div id="vmware_physicshost_vhostlist"></div> 80 <div id="vmware_physicshost_vhostlist"></div>
81 </div> 81 </div>
82 </div> 82 </div>
  83 + <!--Start Wang 2022/2/24 9:29 解决：vm宿主机连接的LUN信息没有展示-->
  84 + <div class="lay-row">
  85 + <div class="lay-row-item">
  86 + <h5 class="lay-row-title">LUN信息</h5>
  87 + <div id="vmware_physicshost_lunlist"></div>
  88 + </div>
  89 + </div>
  90 + <!--End Wang 2022/2/24 9:30-->
83 <div class="lay-row"> 91 <div class="lay-row">
84 <div class="lay-row-item"> 92 <div class="lay-row-item">
85 <h5 class="lay-row-title">实时告警动态</h5> 93 <h5 class="lay-row-title">实时告警动态</h5>
1 @import "../icon/iconfont.css"; 1 @import "../icon/iconfont.css";
2 @import "../css/assets.css"; 2 @import "../css/assets.css";
3 @import "../css/components.css"; 3 @import "../css/components.css";
  4 +/*缓存数据*/
  5 +@import "../css/cacheData.css";
4 6
5 .d-flex { 7 .d-flex {
6 display: flex; 8 display: flex;
@@ -126,3 +128,10 @@ custom-class="config-dialog" @@ -126,3 +128,10 @@ custom-class="config-dialog"
126 .breadcrumb .el-breadcrumb .el-breadcrumb__item { 128 .breadcrumb .el-breadcrumb .el-breadcrumb__item {
127 cursor: pointer; 129 cursor: pointer;
128 } 130 }
  131 +
  132 +.margin-top-bottom-30{
  133 + margin:30px 0;
  134 +}
  135 +.margin-top-bottom-10{
  136 + margin:10px 0;
  137 +}
  1 +.flex-div-start{
  2 + display: flex;
  3 + align-items: center;
  4 + justify-content: flex-start;
  5 +}
  6 +.cache-container{
  7 + height:100%;
  8 + background: #FFFFFF;
  9 + padding:20px;
  10 +}
  11 +.tag-item{
  12 + margin-right: 10px;
  13 +}
  14 +.view-container{
  15 + min-height: 600px;
  16 + padding:0 10px 10px;
  17 + display: flex;
  18 + flex-flow: column;
  19 + align-items: flex-start;
  20 +}
  21 +.view-title{
  22 + padding-bottom: 10px;
  23 +}
  24 +.view-detail{
  25 + flex: 1;
  26 + width: 100%;
  27 + text-align: left;
  28 + border:1px solid #ccc;
  29 + max-height: 600px;
  30 + overflow-y: auto;
  31 +}
  32 +.detail-data{
  33 + padding:10px;
  34 +}
@@ -47,7 +47,27 @@ const routes = [{ @@ -47,7 +47,27 @@ const routes = [{
47 path: '/alarmsubscribe/excludeKpi', 47 path: '/alarmsubscribe/excludeKpi',
48 name: 'alarmSubscribeExcludeKpi', 48 name: 'alarmSubscribeExcludeKpi',
49 component: () => myImport('views/alarmsubscribe/index') 49 component: () => myImport('views/alarmsubscribe/index')
50 - } 50 + },
  51 + {
  52 + path: '/vue3/pieDetailLine',
  53 + name: 'pieDetailLine',
  54 + component: () => myImport('views/pieDetailLine/index')
  55 + },
  56 + {
  57 + path: '/vue3/portSenseSelect',
  58 + name: 'portSenseSelect',
  59 + component: () => myImport('views/portSenseSelect/index')
  60 + },
  61 + {
  62 + path: '/alarmsubscribe/excludeKpi',
  63 + name: 'alarmSubscribeExcludeKpi',
  64 + component: () => myImport('views/alarmsubscribe/index')
  65 + },
  66 + {
  67 + path: '/cache',
  68 + name: 'cacheData',
  69 + component: () => myImport('views/cacheData/index')
  70 + },
51 ]; 71 ];
52 72
53 // hash模式： createWebHashHistory 73 // hash模式： createWebHashHistory
  1 +export default {
  2 + name: 'lineChart',
  3 + template: '',
  4 + // props:['yAxisData','seriesData','legendData','chartId'],
  5 + props:['optionData'],
  6 + components: {
  7 + },
  8 + data(){
  9 + return {
  10 + myChart:'',
  11 + titleFontSize:30,
  12 + yAxisData:'',//y序列的数据
  13 + seriesData:[],//y轴数据
  14 + newOptionData:this.optionData,
  15 + chartId:'line-echart'
  16 +
  17 + }
  18 + },
  19 + watch:{
  20 + optionData(newValue,oldValue){
  21 + this.newOptionData=newValue
  22 + this.chartSetOption()
  23 + }
  24 + },
  25 + setup(props, {attrs, slots, emit}) {
  26 + const {proxy} = Vue.getCurrentInstance();
  27 + // 挂载完
  28 + Vue.onMounted(() => {
  29 + proxy.chartSetOption()
  30 +
  31 + })
  32 + const chartSetOption=()=>{
  33 + const chartDom=proxy.$el
  34 + const myChart = echarts.init(chartDom);
  35 + proxy.myChart=myChart;
  36 + /* window.addEventListener('resize', proxy.screenAdapter)
  37 + proxy.screenAdapter()*/
  38 + let option=props.optionData;
  39 +
  40 + /* option = {
  41 + title: {
  42 + text: ''
  43 + },
  44 + tooltip: {
  45 + trigger: 'axis',
  46 + backgroundColor:'rgba(50,50,50,0.7)',
  47 + borderColor:"#333",
  48 + textStyle:{
  49 + color:"#fff",
  50 + align:'left'
  51 + }
  52 +
  53 + },
  54 + legend: {
  55 + data: props.legendData,
  56 + itemHeight:0,//图例圆圈大小设置
  57 + y:'7px',
  58 + textStyle: {
  59 + color: '#ffffff',
  60 + fontsize:"12px"
  61 + }
  62 +
  63 + },
  64 + grid: {
  65 + left: '3%',
  66 + right: '4%',
  67 + bottom: '3%',
  68 + containLabel: true,
  69 + },
  70 + /!*toolbox: {
  71 + feature: {
  72 + saveAsImage: {}
  73 + }
  74 + },*!/
  75 + xAxis: {
  76 + type: 'category',
  77 + boundaryGap: false,
  78 + data: xAxisData,
  79 +
  80 + axisLine:{
  81 + show:false,//是否显示坐标线
  82 + },
  83 + axisTick: {
  84 + show: false //是否显示坐标刻度
  85 + },
  86 + axisLabel:{
  87 + color:'#ffffff',
  88 + },
  89 +
  90 + },
  91 + yAxis: proxy.yAxisData,
  92 + series: proxy.seriesData,
  93 + itemStyle:{
  94 + showSymbol:false
  95 + }
  96 + };*/
  97 +
  98 + option && myChart.setOption(option,true);
  99 + }
  100 +
  101 +
  102 + const screenAdapter= ()=> {
  103 + proxy.titleFontSize = proxy.myChart.offsetWidth / 100 * 3.6
  104 + const adapterOption = {
  105 + legend: {
  106 + itemWidth: proxy.titleFontSize,
  107 + itemHeight: proxy.titleFontSize,
  108 + itemGap: proxy.titleFontSize,
  109 + textStyle: {
  110 + fontSize: proxy.titleFontSize / 2
  111 + }
  112 + }
  113 + }
  114 + proxy.myChart.setOption(adapterOption,true)
  115 + proxy.myChart.resize()
  116 + }
  117 +
  118 +
  119 + return{
  120 + chartSetOption,
  121 + screenAdapter
  122 +
  123 + }
  124 + },
  125 + unmounted () {
  126 + // window.removeEventListener('resize', this.screenAdapter)
  127 + }
  128 +}
  1 +<div class="pie-detail-line-container" >
  2 + <div class="pie-detail-title">
  3 + <span class="pie-detail-title-active">性能走势</span>
  4 + </div>
  5 + <!-- 趋势分析 预警分析-->
  6 + <div class="pie-detail-content">
  7 + <el-row class="detail-content-title">
  8 + <el-col :span="8"></el-col>
  9 + <el-col :span="16" class="pie-flex-end">
  10 + <div class="pie-date-range">
  11 + <cm-date-range-influx v-if="interval=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx>
  12 + </div>
  13 + <div class="line-filter pie-line-filter">
  14 + <div class="linechartfrequency line-filter-content">
  15 + <div v-if="interval!='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='DAY'}]" data-value="DAY" >一天</div>
  16 + <div v-if="interval!='custom'" @click="changeInterval('WEEK')" :class="['line-filter-item', {'active':interval=='WEEK'}]" data-value="WEEK">一周</div>
  17 + <div v-if="interval!='custom'" @click="changeInterval('MONTH')" :class="['line-filter-item', {'active':interval=='MONTH'}]" data-value="MONTH">一月</div>
  18 + <div v-if="interval!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':interval=='YEAR'}]" data-value="YEAR">一年</div>
  19 + <div v-if="interval!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">自定义</div>
  20 + <div v-if="interval=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">返 回</div>
  21 + </div>
  22 + </div>
  23 +
  24 + </el-col>
  25 +
  26 + </el-row>
  27 + <el-row class="detail-content">
  28 + <el-col :span="24" class="detail_linechart">
  29 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
  30 +
  31 +<!-- <div class="detail_linechart" id="indentKpiLineChart"></div>-->
  32 + <!-- <div class="detail_linechart" id="warningKpiLineChart" style="margin-top:35px;"></div>-->
  33 + <!-- <div class="detail_linechart" id="line-tingyun-trendKpiLineChart" style="margin-top:35px;"></div>-->
  34 +
  35 +
  36 + </el-col>
  37 + </el-row>
  38 + </div>
  39 +
  40 +</div>
  41 +
  1 +export default {
  2 + name: 'pieDetailLine',
  3 + template: '',
  4 + components:{
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/page/components/lineChart/index')
  7 + )
  8 + },
  9 + data() {
  10 + return{}
  11 + },
  12 + setup(props, {attrs, slots, emit}) {
  13 + const {proxy} = Vue.getCurrentInstance();
  14 + let interval=Vue.ref('DAY');
  15 + let optionData=Vue.ref('');
  16 + let names = Vue.ref(['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']);
  17 + let series = Vue.ref([]);
  18 + let rateData = Vue.ref([]);
  19 + let kpiUnit = Vue.ref('');
  20 + let kpiName = Vue.ref('');//指标名称
  21 + let startTime=Vue.ref('');
  22 + let endTime=Vue.ref('');
  23 + let colorsArr=Vue.ref([
  24 + {
  25 + start: '#46d6d8',
  26 + end: '#2883d0'
  27 + },
  28 + {
  29 + start: '#facf5b',
  30 + end: '#f77623'
  31 + },
  32 + {
  33 + start: '#C04DD8',
  34 + end: '#D81F72'
  35 + },
  36 + {
  37 + start: '#F5A1EB',
  38 + end: '#A04DE2'
  39 + },
  40 + {
  41 + start: '#F36093',
  42 + end: '#FF465C'
  43 + },
  44 + {
  45 + start: '#C2E74D',
  46 + end: '#00AE8B'
  47 + },
  48 + {
  49 + start: '#3DC3FF',
  50 + end: '#01FFFF'
  51 + },
  52 + {
  53 + start: '#B850ED',
  54 + end: '#9062EF'
  55 + },
  56 + {
  57 + start: '#305be6',
  58 + end: '#36a7d3'
  59 + },
  60 + {
  61 + start: '#FFA500',
  62 + end: '#FFEE00'
  63 + },
  64 + {
  65 + start: '#C4E64C',
  66 + end: '#2de078'
  67 + },
  68 + {
  69 + start: '#30ffb3',
  70 + end: '#01FFFF'
  71 + },
  72 + {
  73 + start: '#FF4488',
  74 + end: '#F13EFF'
  75 + },
  76 + {
  77 + start: '#A64CE2',
  78 + end: '#625AE7'
  79 + },
  80 + {
  81 + start: '#5AEBC7',
  82 + end: '#5FC9F8'
  83 + },
  84 + {
  85 + start: '#FFA500',
  86 + end: '#FFEE00'
  87 + },
  88 + {
  89 + start: '#00AAD6',
  90 + end: '#625AE7'
  91 + },
  92 + {
  93 + start: '#E48BDE',
  94 + end: '#FF9262'
  95 + },
  96 + {
  97 + start: '#B2797B',
  98 + end: '#FF4B51'
  99 + },
  100 + {
  101 + start: '#ffe393',
  102 + end: '#feff5b'
  103 + }
  104 + ])
  105 + let keys=Vue.ref('');
  106 + let getOptionData=(res)=>{
  107 + let nameArr=[];
  108 + let dataArr=[];
  109 + if(res && res.success){
  110 + if(res.map){
  111 + let resData=res.map;
  112 + kpiUnit.value = resData.kpiUnit == null ? "" : resData.kpiUnit;
  113 + Object.keys(resData).forEach(function(key){
  114 + Object.keys(resData[key]).sort(function (a, b) {
  115 + return a<b?1:-1;
  116 + }).forEach(function(time){
  117 + nameArr.unshift(time);
  118 + dataArr.unshift(resData[key][time])
  119 + })
  120 + })
  121 + rateData.value = {
  122 + names: nameArr,
  123 + series: [{
  124 + "data": dataArr,
  125 + "name": '平均值'
  126 + }],
  127 + kpiUnit: kpiUnit.value
  128 + }
  129 +
  130 + }
  131 +
  132 + }else{
  133 + proxy.$global.showMsg(res.msg,'warning');
  134 + }
  135 + setSeries();
  136 + }
  137 +
  138 + const getInfluxOption = (res) => {
  139 + let str = res.str;
  140 + if (res.map && Object.keys(res.map).length == 0) {
  141 + let defData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  142 + let seriesDefArr = [];
  143 + if(str == 'performance'){
  144 + seriesDefArr = [{
  145 + "data": defData,
  146 + "name": kpiName.value
  147 + }];
  148 + } else {
  149 + seriesDefArr = [{
  150 + "data": defData,
  151 + "name": "最大"
  152 + },{
  153 + "data": defData,
  154 + "name": "最小"
  155 + },{
  156 + "data": defData,
  157 + "name": "平均"
  158 + }];
  159 + }
  160 + rateData.value = {
  161 + names: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
  162 + series: seriesDefArr,
  163 + kpiUnit: kpiUnit.value
  164 + }
  165 + } else {
  166 + let names = [];
  167 + let max = [];
  168 + let min = [];
  169 + let avg = [];
  170 + let kpiValueArr = [];
  171 + let seriesArr = [];
  172 + let kpiName = '';
  173 + let kpiUnitVal = '';
  174 + let kpiList = res.data;
  175 +
  176 + Object.keys(res.map).forEach(function(key){
  177 + res.map[key].forEach(function(item){
  178 + names.push(item.dbTimeStr);
  179 + if(str == 'performance'){
  180 + kpiValueArr.push(item.kpiValue);
  181 + } else {
  182 + max.push(item.maxValue);
  183 + min.push(item.minValue);
  184 + avg.push(item.avgValue);
  185 + }
  186 + if(kpiName == '' && kpiUnitVal == ''){
  187 + kpiList.filter(function (v){
  188 + if(v.kpiId == item.kpiId){
  189 + kpiName = v.kpiName;
  190 + kpiUnitVal = v.unit;
  191 + }
  192 + })
  193 + }
  194 + })
  195 + })
  196 +
  197 + if(str == 'performance'){
  198 + seriesArr = [{
  199 + "data": kpiValueArr,
  200 + "name": kpiName
  201 + }];
  202 + } else {
  203 + seriesArr = [{
  204 + "data": max,
  205 + "name": "最大"
  206 + },{
  207 + "data": min,
  208 + "name": "最小"
  209 + },{
  210 + "data": avg,
  211 + "name": "平均"
  212 + }];
  213 + }
  214 +
  215 +
  216 + kpiUnit.value = kpiUnitVal;
  217 + rateData.value = {
  218 + names: names,
  219 + series: seriesArr,
  220 + kpiUnit: kpiUnit.value
  221 + };
  222 + }
  223 + setSeries();
  224 + }
  225 +
  226 +
  227 + const changeInterval=(val)=>{
  228 + interval.value=val;
  229 + if(val=='custom'){
  230 + }else{
  231 + getLineChart();
  232 +
  233 + }
  234 + }
  235 +
  236 + const getLineChart=()=>{
  237 + let params=proxy.$route.query
  238 + let resourceId=params.resId;//资源ID
  239 + let kpiId =params.kpiId; //指标ID
  240 + let flag =params.flag;//二级资源标识
  241 + let warning =params.warning;//预警指标标识
  242 + let ident =params.ident;//性能指标标识
  243 + let trend =params.trend;//趋势指标标识
  244 + keys.value=resourceId+":"+kpiId+":"+flag;
  245 + kpiName.value = params.name;//指标名称
  246 + let url = '/api-web/detail/performance/line/chart?interval=' + interval.value + '&startTime='
  247 + + startTime.value + '&endTime=' + endTime.value + '&resId=' + resourceId + '&kpiIds=' + kpiId + '&subResId=' + flag;
  248 + proxy.$http.get(url, {},function (res){
  249 + kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
  250 + if (res.data && res.data.names.length == 0) {
  251 + rateData.value = {
  252 + names: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
  253 + series: [{
  254 + "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  255 + "name": kpiName.value
  256 + }],
  257 + kpiUnit: kpiUnit.value
  258 + }
  259 + } else {
  260 + rateData.value = res.data;
  261 + }
  262 + setSeries();
  263 + },function (error){
  264 + rateData.value = {
  265 + names: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
  266 + series: [{
  267 + "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  268 + "name": kpiName.value
  269 + }],
  270 + kpiUnit: kpiUnit.value
  271 + }
  272 + setSeries();
  273 + })
  274 +
  275 + }
  276 + const setSeries=()=>{
  277 + series.value=[];
  278 + $.each(rateData.value.series,function (i,v) {
  279 + series.value.push({
  280 + name: v.name,
  281 + type: 'line',
  282 + data: v.data,
  283 + symbolSize: 12,
  284 + symbol: 'circle',
  285 + itemStyle: {
  286 + normal: {
  287 + color: colorsArr.value[i].start //图标颜色
  288 + }
  289 + },
  290 + lineStyle: {
  291 + normal: {
  292 + width: 3, //连线粗细
  293 + color: colorsArr.value[i].end //连线颜色
  294 + }
  295 + }
  296 + })
  297 + });
  298 + optionDataInit();
  299 + }
  300 + const optionDataInit=()=>{
  301 +
  302 + optionData.value = {
  303 + tooltip: {
  304 + trigger: 'axis',
  305 + formatter:function (param) {
  306 + var tips = kpiName.value+" "+param[0].name +"<br/>";
  307 + $.each(param,function (i,v) {
  308 + tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
  309 + });
  310 + return tips;
  311 + }
  312 + },
  313 + legend: {
  314 + show: true
  315 + },
  316 + grid: {
  317 + top: '10%',
  318 + left: '3%',
  319 + right: '4%',
  320 + bottom: '15%',
  321 + containLabel: true
  322 + },
  323 + toolbox: {
  324 + feature: {
  325 + saveAsImage: {
  326 + show: false
  327 + }
  328 + }
  329 + },
  330 + xAxis: {
  331 + type: 'category',
  332 + data: rateData.value.names,
  333 + axisLine: {
  334 + lineStyle: {
  335 + color: '#c9c9c9'
  336 + }
  337 + },
  338 + axisLabel: {
  339 + color: '#232425',
  340 + showMaxLabel: true
  341 + },
  342 + splitArea: {
  343 + show: true,
  344 + areaStyle: {
  345 + color: ['rgba(200,200,200,0.1)', 'transparent'
  346 + ]
  347 + }
  348 + }
  349 + },
  350 + yAxis: {
  351 + type: 'value',
  352 + scale: true,
  353 + boundaryGap: ['10%', '10%'],
  354 + axisLine: {
  355 + lineStyle: {
  356 + color: '#232425'
  357 + },
  358 + show: false
  359 + },
  360 + axisTick: {
  361 + show: false
  362 + },
  363 + splitLine: {
  364 + lineStyle: {
  365 + color: ['#ccc']
  366 + }
  367 + }
  368 + },
  369 + // x轴拖动
  370 + dataZoom: [
  371 + {
  372 + type: "slider",
  373 + realtime: true, //拖动滚动条时是否动态的更新图表数据
  374 + height: 25, //滚动条高度
  375 + start: 40, //滚动条开始位置（共100等份）
  376 + end: 65 //结束位置（共100等份）
  377 + }
  378 + ],
  379 + series:series.value
  380 + };
  381 + }
  382 + //时间范围组件回调函数--时间范围
  383 + const callbacktime=(val)=>{
  384 +
  385 + }
  386 + //时间范围组件回调函数--聚合频率
  387 + const callbackrate=(val)=>{
  388 +
  389 + }
  390 + // 挂载完
  391 + Vue.onMounted(() => {
  392 + getLineChart();
  393 + })
  394 + return {
  395 + interval,
  396 + optionData,
  397 + names,
  398 + series,
  399 + rateData,
  400 + kpiUnit,
  401 + kpiName,
  402 + keys,
  403 + optionDataInit,
  404 + getOptionData,
  405 + getInfluxOption,
  406 + getLineChart,
  407 + changeInterval
  408 + }
  409 + }
  410 +}
@@ -48,6 +48,10 @@ layui.define(['commonDetail','common', 'admin'], function (exports) { @@ -48,6 +48,10 @@ layui.define(['commonDetail','common', 'admin'], function (exports) {
48 dataRenderingBase("arms_JVM_threadCount_lineChart", resId, "KPI7C4BEB26,KPI97B71BAA,KPI15EC2627,KPIA9E2E4DE,KPI068D9FA5,KPI6ECA9036,KPI328E5AFE,KPI8F8FAD7F", "JVM线程数/每分钟", null, 1); 48 dataRenderingBase("arms_JVM_threadCount_lineChart", resId, "KPI7C4BEB26,KPI97B71BAA,KPI15EC2627,KPIA9E2E4DE,KPI068D9FA5,KPI6ECA9036,KPI328E5AFE,KPI8F8FAD7F", "JVM线程数/每分钟", null, 1);
49 //响应时间/每分钟 49 //响应时间/每分钟
50 dataRenderingBase("arms_time_lineChart", resId, "KPI678F9FC3", "响应时间/每分钟", null); 50 dataRenderingBase("arms_time_lineChart", resId, "KPI678F9FC3", "响应时间/每分钟", null);
  51 + // Start Wang 2022/2/24 9:29 解决：arms采集结果展示(详情页面开发)
  52 + // 节点详情
  53 + commonDetail.renderTable("arms_node_detail",false,resId,"KPI452C0F78,KPI678F9FC3,KPIFC03301B,KPI4D6871EA,KPI649E288B,KPI5769F327,KPI8B2CCCCF",'节点详情',`detail`);
  54 + // End Wang 2022/2/24 9:30
51 //活动告警 55 //活动告警
52 commonDetail.renderActiveAlarms("arms_active_alram", resId); 56 commonDetail.renderActiveAlarms("arms_active_alram", resId);
53 } 57 }
@@ -1443,8 +1443,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', ' @@ -1443,8 +1443,9 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'admin', 'form', 'table', '
1443 if(resType == 'HOST_MINICOMPUTER' || resType=='HUAWEI_CLOUD_CLUSTER' || resType=='HUAWEI_CLOUD_COLONY' || resType=='HUAWEI_CLOUD_PHYSICSHOST' || 1443 if(resType == 'HOST_MINICOMPUTER' || resType=='HUAWEI_CLOUD_CLUSTER' || resType=='HUAWEI_CLOUD_COLONY' || resType=='HUAWEI_CLOUD_PHYSICSHOST' ||
1444 resType == 'HUAWEI_CLOUD_STORAGE' || resType == 'HUAWEI_CLOUD_SWITCHBOARD' || resType == 'HUAWEI_CLOUD_FIREWALL' || resType == 'ALI_CLOUD_RDS' 1444 resType == 'HUAWEI_CLOUD_STORAGE' || resType == 'HUAWEI_CLOUD_SWITCHBOARD' || resType == 'HUAWEI_CLOUD_FIREWALL' || resType == 'ALI_CLOUD_RDS'
1445 || resType == 'ALI_CLOUD_SLB' || resType == 'ALI_CLOUD_OSS'||resType=='VIRTUALIZATION_VMWARE_VHOST'||resType=='MIDDLEWARE_WEBLOGIC' 1445 || resType == 'ALI_CLOUD_SLB' || resType == 'ALI_CLOUD_OSS'||resType=='VIRTUALIZATION_VMWARE_VHOST'||resType=='MIDDLEWARE_WEBLOGIC'
1446 - ){//小型机整机 屏蔽连接状态 1446 + ){//屏蔽连接状态
1447 $('.info-box-count').eq(3).hide(); 1447 $('.info-box-count').eq(3).hide();
  1448 + $('#link_state_div').hide();
1448 } 1449 }
1449 form.render("select"); 1450 form.render("select");
1450 form.render(); 1451 form.render();
@@ -44,6 +44,12 @@ @@ -44,6 +44,12 @@
44 </div> 44 </div>
45 <div class="lay-row"> 45 <div class="lay-row">
46 <div class="lay-row-item"> 46 <div class="lay-row-item">
  47 + <h5 class="lay-row-title">节点详情</h5>
  48 + <div id="arms_node_detail"></div>
  49 + </div>
  50 + </div>
  51 + <div class="lay-row">
  52 + <div class="lay-row-item">
47 <h5 class="lay-row-title">实时告警动态</h5> 53 <h5 class="lay-row-title">实时告警动态</h5>
48 <div id="arms_active_alram"></div> 54 <div id="arms_active_alram"></div>
49 </div> 55 </div>
@@ -53,5 +53,4 @@ @@ -53,5 +53,4 @@
53 53
54 /*对比分析*/ 54 /*对比分析*/
55 @import "../css/analysis.css"; 55 @import "../css/analysis.css";
56 -/*缓存数据*/  
57 -@import "../css/cacheData.css"; 56 +
@@ -128,13 +128,7 @@ @@ -128,13 +128,7 @@
128 padding:15px ; 128 padding:15px ;
129 flex:1; 129 flex:1;
130 } 130 }
131 -.margin-top-bottom-30{  
132 - margin:30px 0;  
133 -}  
134 -.margin-top-bottom-10{  
135 - margin:10px 0;  
136 131
137 -}  
138 .export-div{ 132 .export-div{
139 position: absolute; 133 position: absolute;
140 right:0; 134 right:0;
@@ -52,7 +52,7 @@ export default { @@ -52,7 +52,7 @@ export default {
52 resData.push({ 52 resData.push({
53 "resTypeAllNum": 0, 53 "resTypeAllNum": 0,
54 "code": "other", 54 "code": "other",
55 - "name": "其他", 55 + "name": "暂无",
56 "excellentNum": 0, 56 "excellentNum": 0,
57 "middleNum": 0, 57 "middleNum": 0,
58 "goodNum": 0, 58 "goodNum": 0,