monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit 5350620f001d7b9e3375f941a4ef82227bbf979c 1 parent ad6e4154

1085 在CPU和内存聚合使用频率上增加悬浮提示 #1

Inline Side-by-side
Showing 4 changed files with 32 additions and 470 deletions
@@ -1071,6 +1071,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -1071,6 +1071,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
1071 * @param kpiNames 多指标对应名称 如果kpiId为多个，则传入 1071 * @param kpiNames 多指标对应名称 如果kpiId为多个，则传入
1072 */ 1072 */
1073 renderLineCharat: function (targetId, resId, kpiId, kpiName, flag, interval, xAxis,kpiNames) { 1073 renderLineCharat: function (targetId, resId, kpiId, kpiName, flag, interval, xAxis,kpiNames) {
  1074 + $('#'+targetId).prev().attr('lay-tips',"聚合频率：5分钟。按照5分钟的频率对实时数据进行聚合");
1074 // 默认查询12小时 1075 // 默认查询12小时
1075 interval || (interval = 'HALFDAY'); 1076 interval || (interval = 'HALFDAY');
1076 xAxis || (xAxis = ''); 1077 xAxis || (xAxis = '');
@@ -12,10 +12,37 @@ @@ -12,10 +12,37 @@
12 </div> 12 </div>
13 <div class="line-filter pie-line-filter"> 13 <div class="line-filter pie-line-filter">
14 <div class="linechartfrequency line-filter-content"> 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> 15 + <el-tooltip class="box-item"
  16 + effect="dark"
  17 + content="聚合频率：15分钟。按照15分钟的频率对实时数据进行聚合"
  18 + placement="top-start">
  19 + <div v-if="interval!='custom'" @click="changeInterval('DAY')"
  20 + :class="['line-filter-item', {'active':interval=='DAY'}]" data-value="DAY">一天
  21 + </div>
  22 + </el-tooltip>
  23 +
  24 + <el-tooltip class="box-item"
  25 + effect="dark"
  26 + content="聚合频率：1小时。按照1小时的频率对实时数据进行聚合"
  27 + placement="top-start">
  28 + <div v-if="interval!='custom'" @click="changeInterval('WEEK')" :class="['line-filter-item', {'active':interval=='WEEK'}]" data-value="WEEK">一周</div>
  29 + </el-tooltip>
  30 +
  31 + <el-tooltip class="box-item"
  32 + effect="dark"
  33 + content="聚合频率：12小时。按照12小时的频率对实时数据进行聚合"
  34 + placement="top-start">
  35 + <div v-if="interval!='custom'" @click="changeInterval('MONTH')" :class="['line-filter-item', {'active':interval=='MONTH'}]" data-value="MONTH">一月</div>
  36 +
  37 + </el-tooltip>
  38 +
  39 + <el-tooltip class="box-item"
  40 + effect="dark"
  41 + content="聚合频率：24分钟。按照24小时的频率对实时数据进行聚合"
  42 + placement="top-start">
  43 + <div v-if="interval!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':interval=='YEAR'}]" data-value="YEAR">一年</div>
  44 + </el-tooltip>
  45 +
19 <div v-if="interval!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">自定义</div> 46 <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> 47 <div v-if="interval=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">返 回</div>
21 </div> 48 </div>
@@ -27,12 +54,6 @@ @@ -27,12 +54,6 @@
27 <el-row class="detail-content"> 54 <el-row class="detail-content">
28 <el-col :span="24" class="detail_linechart"> 55 <el-col :span="24" class="detail_linechart">
29 <LineChart :optionData="optionData" v-if="optionData"></LineChart> 56 <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> 57 </el-col>
37 </el-row> 58 </el-row>
38 </div> 59 </div>
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/zjdaping/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 startSlide=Vue.ref(0);  
24 - let endSlide=Vue.ref(100);  
25 - let colorsArr=Vue.ref([  
26 - {  
27 - start: '#46d6d8',  
28 - end: '#2883d0'  
29 - },  
30 - {  
31 - start: '#facf5b',  
32 - end: '#f77623'  
33 - },  
34 - {  
35 - start: '#C04DD8',  
36 - end: '#D81F72'  
37 - },  
38 - {  
39 - start: '#F5A1EB',  
40 - end: '#A04DE2'  
41 - },  
42 - {  
43 - start: '#F36093',  
44 - end: '#FF465C'  
45 - },  
46 - {  
47 - start: '#C2E74D',  
48 - end: '#00AE8B'  
49 - },  
50 - {  
51 - start: '#3DC3FF',  
52 - end: '#01FFFF'  
53 - },  
54 - {  
55 - start: '#B850ED',  
56 - end: '#9062EF'  
57 - },  
58 - {  
59 - start: '#305be6',  
60 - end: '#36a7d3'  
61 - },  
62 - {  
63 - start: '#FFA500',  
64 - end: '#FFEE00'  
65 - },  
66 - {  
67 - start: '#C4E64C',  
68 - end: '#2de078'  
69 - },  
70 - {  
71 - start: '#30ffb3',  
72 - end: '#01FFFF'  
73 - },  
74 - {  
75 - start: '#FF4488',  
76 - end: '#F13EFF'  
77 - },  
78 - {  
79 - start: '#A64CE2',  
80 - end: '#625AE7'  
81 - },  
82 - {  
83 - start: '#5AEBC7',  
84 - end: '#5FC9F8'  
85 - },  
86 - {  
87 - start: '#FFA500',  
88 - end: '#FFEE00'  
89 - },  
90 - {  
91 - start: '#00AAD6',  
92 - end: '#625AE7'  
93 - },  
94 - {  
95 - start: '#E48BDE',  
96 - end: '#FF9262'  
97 - },  
98 - {  
99 - start: '#B2797B',  
100 - end: '#FF4B51'  
101 - },  
102 - {  
103 - start: '#ffe393',  
104 - end: '#feff5b'  
105 - }  
106 - ])  
107 - let keys=Vue.ref('');  
108 - let getOptionData=(res)=>{  
109 - let nameArr=[];  
110 - let dataArr=[];  
111 - if(res && res.success){  
112 - if(res.map){  
113 - let resData=res.map;  
114 - kpiUnit.value = resData.kpiUnit == null ? "" : resData.kpiUnit;  
115 - Object.keys(resData).forEach(function(key){  
116 - Object.keys(resData[key]).sort(function (a, b) {  
117 - return a<b?1:-1;  
118 - }).forEach(function(time){  
119 - nameArr.unshift(time);  
120 - dataArr.unshift(resData[key][time])  
121 - })  
122 - })  
123 - rateData.value = {  
124 - names: nameArr,  
125 - series: [{  
126 - "data": dataArr,  
127 - "name": '平均值'  
128 - }],  
129 - kpiUnit: kpiUnit.value  
130 - }  
131 -  
132 - }  
133 -  
134 - }else{  
135 - proxy.$global.showMsg(res.msg,'warning');  
136 - }  
137 - setSeries();  
138 - }  
139 -  
140 - const getInfluxOption = (res) => {  
141 - let str = res.str;  
142 - if (res.map && Object.keys(res.map).length == 0) {  
143 - 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];  
144 - let seriesDefArr = [];  
145 - if(str == 'performance'){  
146 - seriesDefArr = [{  
147 - "data": defData,  
148 - "name": kpiName.value  
149 - }];  
150 - } else {  
151 - seriesDefArr = [{  
152 - "data": defData,  
153 - "name": "最大"  
154 - },{  
155 - "data": defData,  
156 - "name": "最小"  
157 - },{  
158 - "data": defData,  
159 - "name": "平均"  
160 - }];  
161 - }  
162 - rateData.value = {  
163 - 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'],  
164 - series: seriesDefArr,  
165 - kpiUnit: kpiUnit.value  
166 - }  
167 - } else {  
168 - let names = [];  
169 - let max = [];  
170 - let min = [];  
171 - let avg = [];  
172 - let kpiValueArr = [];  
173 - let seriesArr = [];  
174 - let kpiName = '';  
175 - let kpiUnitVal = '';  
176 - let kpiList = res.data;  
177 -  
178 - Object.keys(res.map).forEach(function(key){  
179 - res.map[key].forEach(function(item){  
180 - names.push(item.dbTimeStr);  
181 - if(str == 'performance'){  
182 - kpiValueArr.push(item.kpiValue);  
183 - } else {  
184 - max.push(item.maxValue);  
185 - min.push(item.minValue);  
186 - avg.push(item.avgValue);  
187 - }  
188 - if(kpiName == '' && kpiUnitVal == ''){  
189 - kpiList.filter(function (v){  
190 - if(v.kpiId == item.kpiId){  
191 - kpiName = v.kpiName;  
192 - kpiUnitVal = v.unit;  
193 - }  
194 - })  
195 - }  
196 - })  
197 - })  
198 -  
199 - if(str == 'performance'){  
200 - seriesArr = [{  
201 - "data": kpiValueArr,  
202 - "name": kpiName  
203 - }];  
204 - } else {  
205 - seriesArr = [{  
206 - "data": max,  
207 - "name": "最大"  
208 - },{  
209 - "data": min,  
210 - "name": "最小"  
211 - },{  
212 - "data": avg,  
213 - "name": "平均"  
214 - }];  
215 - }  
216 -  
217 -  
218 - kpiUnit.value = kpiUnitVal;  
219 - rateData.value = {  
220 - names: names,  
221 - series: seriesArr,  
222 - kpiUnit: kpiUnit.value  
223 - };  
224 - }  
225 - setSeries();  
226 - }  
227 -  
228 -  
229 - const changeInterval=(val)=>{  
230 - interval.value=val;  
231 - if (val=='DAY'){  
232 - startSlide.value=0;  
233 - }else {  
234 - startSlide.value=75;  
235 - }  
236 - if(val=='custom'){  
237 - }else{  
238 - getLineChart();  
239 -  
240 - }  
241 - }  
242 -  
243 - const getLineChart=()=>{  
244 - let params=proxy.$route.query  
245 - let resourceId=params.resId;//资源ID  
246 - let kpiId =params.kpiId; //指标ID  
247 - let flag =params.flag;//二级资源标识  
248 - let warning =params.warning;//预警指标标识  
249 - let ident =params.ident;//性能指标标识  
250 - let trend =params.trend;//趋势指标标识  
251 - keys.value=resourceId+":"+kpiId+":"+flag;  
252 - kpiName.value = params.name;//指标名称  
253 - let url = '/api-web/detail/performance/line/chart?interval=' + interval.value + '&startTime='  
254 - + startTime.value + '&endTime=' + endTime.value + '&resId=' + resourceId + '&kpiIds=' + kpiId + '&subResId=' + flag;  
255 - proxy.$http.get(url, {},function (res){  
256 - kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;  
257 - if (res.data && res.data.names.length == 0) {  
258 - rateData.value = {  
259 - 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'],  
260 - series: [{  
261 - "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],  
262 - "name": kpiName.value  
263 - }],  
264 - kpiUnit: kpiUnit.value  
265 - }  
266 - } else {  
267 - rateData.value = res.data;  
268 - }  
269 - setSeries();  
270 - },function (error){  
271 - rateData.value = {  
272 - 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'],  
273 - series: [{  
274 - "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],  
275 - "name": kpiName.value  
276 - }],  
277 - kpiUnit: kpiUnit.value  
278 - }  
279 - setSeries();  
280 - })  
281 -  
282 - }  
283 - const setSeries=()=>{  
284 - series.value=[];  
285 - $.each(rateData.value.series,function (i,v) {  
286 - series.value.push({  
287 - name: v.name,  
288 - type: 'line',  
289 - data: v.data,  
290 - symbolSize: 12,  
291 - symbol: 'circle',  
292 - itemStyle: {  
293 - normal: {  
294 - color: colorsArr.value[i].start //图标颜色  
295 - }  
296 - },  
297 - lineStyle: {  
298 - normal: {  
299 - width: 3, //连线粗细  
300 - color: colorsArr.value[i].end //连线颜色  
301 - }  
302 - }  
303 - })  
304 - });  
305 - optionDataInit();  
306 - }  
307 - const optionDataInit=()=>{  
308 -  
309 - optionData.value = {  
310 - tooltip: {  
311 - trigger: 'axis',  
312 - formatter:function (param) {  
313 - var tips = kpiName.value+" "+param[0].name +"<br/>";  
314 - $.each(param,function (i,v) {  
315 - tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"  
316 - });  
317 - return tips;  
318 - }  
319 - },  
320 - legend: {  
321 - show: true  
322 - },  
323 - grid: {  
324 - top: '10%',  
325 - left: '3%',  
326 - right: '4%',  
327 - bottom: '15%',  
328 - containLabel: true  
329 - },  
330 - toolbox: {  
331 - feature: {  
332 - saveAsImage: {  
333 - show: false  
334 - }  
335 - }  
336 - },  
337 - xAxis: {  
338 - type: 'category',  
339 - data: rateData.value.names,  
340 - axisLine: {  
341 - lineStyle: {  
342 - color: '#c9c9c9'  
343 - }  
344 - },  
345 - axisLabel: {  
346 - color: '#232425',  
347 - showMaxLabel: true  
348 - },  
349 - splitArea: {  
350 - show: true,  
351 - areaStyle: {  
352 - color: ['rgba(200,200,200,0.1)', 'transparent'  
353 - ]  
354 - }  
355 - }  
356 - },  
357 - yAxis: {  
358 - type: 'value',  
359 - scale: true,  
360 - boundaryGap: ['10%', '10%'],  
361 - axisLine: {  
362 - lineStyle: {  
363 - color: '#232425'  
364 - },  
365 - show: false  
366 - },  
367 - axisTick: {  
368 - show: false  
369 - },  
370 - splitLine: {  
371 - lineStyle: {  
372 - color: ['#ccc']  
373 - }  
374 - }  
375 - },  
376 - // x轴拖动  
377 - dataZoom: [  
378 - {  
379 - type: "slider",  
380 - realtime: true, //拖动滚动条时是否动态的更新图表数据  
381 - height: 25, //滚动条高度  
382 - start: startSlide, //滚动条开始位置（共100等份）  
383 - end: endSlide //结束位置（共100等份）  
384 - }  
385 - ],  
386 - series:series.value  
387 - };  
388 - }  
389 - //时间范围组件回调函数--时间范围  
390 - const callbacktime=(val)=>{  
391 -  
392 - }  
393 - //时间范围组件回调函数--聚合频率  
394 - const callbackrate=(val)=>{  
395 -  
396 - }  
397 - // 挂载完  
398 - Vue.onMounted(() => {  
399 - getLineChart();  
400 - })  
401 - return {  
402 - interval,  
403 - optionData,  
404 - names,  
405 - series,  
406 - rateData,  
407 - kpiUnit,  
408 - kpiName,  
409 - keys,  
410 - optionDataInit,  
411 - getOptionData,  
412 - getInfluxOption,  
413 - getLineChart,  
414 - changeInterval,  
415 - startSlide,  
416 - endSlide  
417 - }  
418 - }  
419 -}