monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 854edd1f5dde35dcc827b9db4f52b56487425d57 2 parents 084bed41 f4bbadd2

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

指标状态散点图从master迁移到500dev



See merge request !613
Inline Side-by-side
Showing 5 changed files with 560 additions and 48 deletions
... ... @@ -153,6 +153,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
// rowMenu.attr('data-canca', data.canCA);
// rowMenu.attr('data-incaing', data.inCAing);
// rowMenu.attr('data-restype', data.resType);
rowMenu.attr('data-restype', (data && data[0])?data[0].resType:'');
//监听告警压制等操作配置
$('#' + targetId + "_detail_row_menu").hover(function () {
var $that = $(this);
... ... @@ -253,6 +254,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
rowMenu.attr("data-unit", "");
rowMenu.attr('data-hidem', 'true');
rowMenu.attr('data-nature', 'true');//性能趋势
rowMenu.attr('data-restype', (data && data[0])?data[0].resType:'');
//监听告警压制等操作配置
$('#' + targetId + "_detail_row_menu").hover(function () {
var $that = $(this);
... ... @@ -4090,7 +4092,42 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
}
});
}
//start 连接状态 2022-05-19
function connectStatus(param,title){
var obj = {
resId: param.resId,
kpiId: param.kpiId,
flag: param.flag,
subFlag: param.subFlag
}
let urlParams='';
for(let key in param){
if(param[key]){
urlParams+=key+'='+param[key]+'&'
}
}
urlParams=urlParams.substr(0,urlParams.length-1)
//End LSQ 2022/1/17
if (!title) {
title = "状态指标";
}
view('commonViewModel').render("template/detail/line").then(function (res) {
layer.open({
title: [title, 'font-size:18px;'],
type: 2,
area: ['80%', '90%'],
shadeClose: true,//开启遮罩层
id: 'kpi_line_chart_div',
content: ['/vue3/index.html#/vue3/connectScatter?'+urlParams, 'no'],
cancel: function () {
clearTimeout(obj.lineTimer);
}
});
});
}
//end lsq 2022-05-19
//监听过滤压制等事件
function filterSuppressMonitor(resId){
//菜单按钮点击事件
... ... @@ -4144,58 +4181,103 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
if (flag) {
flag = flag.replace(/^\s+|\s+$/g, "");
}
//菜单点击事件
$("#detail_menubox_id ul>li").unbind("click").on("click",function (){
var type = $(this).attr("type");
var params = {
resId: resId,
kpiId: id,
flag: flag,
warning:isWarning,
ident:ident,
trend:trend,
unit:unit,
// Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
// name:kpiName + " " + name,
name:kpiName,
// End Wang 2022/2/8 14:29
subFlag: subFlag,
resType: resType
};
switch (type){
case 'w':
setKPIAlarmConfig(params);
break;
case 's':
setKpiFilter(params,true);
break;
case 'm':
setKpiFilter(params,false);
break;
case 't':
//性能趋势
if ($.inArray('back:details:trend', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
//start lsq 根据kpiid获取是否是指标状态 2022-05-23
admin.req({
url: common.domainName + '/api-web/manage/kpi/page?' +
'isWarning=&isTrend=&kpiLevel=&ignoreCnt=&startTime=&endTime=&kpiPower=',
data: {
page:1,limit:99999,
kpiName: '',resType: '',kpiIdent: 2,kpiCategory: '',
kpiDataType:'',kpiUnit:'',isWarning:'',isTrend:'',
kpiLevel:'',ignoreCnt:'',startTime:'',endTime:'',kpiPower:''
},
success(response) {
let arr=[];
if (response && response.success) {
arr=response.data;
let idArr=[];
let idStr='';
if(id.indexOf(',')!=-1){
idArr=id.split(',');
idStr=idArr[0];
}else{
// Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
// common.openLineChart(kpiName + " " + name, params);
common.openLineChart(kpiName, params);
// End Wang 2022/2/8 14:29
idStr=id;
}
break;
case 'n':
setKpiPressTimes(params);
break;
case 'ca-cancel':
caCancel(params, $menu);
break;
case 'ca-add':
caAdd(params, $menu);
break;
let isKpi=false;
arr.map(item=>{
if(idStr==item.kpiId){
isKpi=true;
}
})
if(isKpi){
let menuboxStr = '<li type="link-status-kpi"><i class="layui-icon">&#xe758;</i>状态指标</li>';
$("#detail_menubox_id ul").append(menuboxStr)
}
} else {
// layer.msg('状态指标获取失败!', {icon: 2});
}
},
error(){
// layer.msg('状态指标获取失败!', {icon: 2});
}
});
setTimeout(function (){
//end lsq 2022-05-23
//菜单点击事件
$("#detail_menubox_id ul>li").unbind("click").on("click",function (){
var type = $(this).attr("type");
var params = {
resId: resId,
kpiId: id,
flag: flag,
warning:isWarning,
ident:ident,
trend:trend,
unit:unit,
// Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
// name:kpiName + " " + name,
name:kpiName,
// End Wang 2022/2/8 14:29
subFlag: subFlag,
resType: resType
};
switch (type){
case 'w':
setKPIAlarmConfig(params);
break;
case 's':
setKpiFilter(params,true);
break;
case 'm':
setKpiFilter(params,false);
break;
case 't':
//性能趋势
if ($.inArray('back:details:trend', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
}else{
// Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
// common.openLineChart(kpiName + " " + name, params);
common.openLineChart(kpiName, params);
// End Wang 2022/2/8 14:29
}
break;
case 'n':
setKpiPressTimes(params);
break;
case 'ca-cancel':
caCancel(params, $menu);
break;
case 'ca-add':
caAdd(params, $menu);
break;
//lsq 连接状态指标事件2022-05-19
case 'link-status-kpi':
connectStatus(params);
break;
}
});
},300)
});
//点击空白处隐藏弹出菜单
$(document).click(function(event){
... ...
... ... @@ -121,6 +121,11 @@ const routes = [{
name: 'pingIndex',
component: () => myImport('views/ping/index'),
},
{
path: '/vue3/connectScatter',
name: 'connectScatter',
component: () => myImport('views/connectScatter/index')
},
];
// hash模式： createWebHashHistory
... ...
<div class="pie-detail-line-container" >
<div class="pie-detail-content">
<el-row class="detail-content-title">
<el-col :span="8"></el-col>
<el-col :span="16" class="pie-flex-end">
<div class="pie-date-range">
<!-- <cm-date-range-influx v-if="dateType=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx>-->
</div>
<div class="line-filter pie-line-filter">
<div class="linechartfrequency line-filter-content">
<div v-if="dateType!='custom'" @click="changeInterval('oneDay')" :class="['line-filter-item', {'active':dateType=='oneDay'}]" data-value="oneDay" >近24小时</div>
<div v-if="dateType!='custom'" @click="changeInterval('week')" :class="['line-filter-item', {'active':dateType=='week'}]" data-value="week">一周</div>
<div v-if="dateType!='custom'" @click="changeInterval('month')" :class="['line-filter-item', {'active':dateType=='month'}]" data-value="month">一月</div>
<!-- <div v-if="dateType!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':dateType=='YEAR'}]" data-value="YEAR">一年</div>-->
<!-- <div v-if="dateType!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">自定义</div>-->
<!-- <div v-if="dateType=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">返 回</div>-->
</div>
</div>
</el-col>
</el-row>
<el-row class="detail-content">
<el-col :span="24" class="detail_linechart">
<LineChart :optionData="optionData" v-if="optionData"></LineChart>
<!-- <div class="detail_linechart" id="indentKpiLineChart"></div>-->
<!-- <div class="detail_linechart" id="warningKpiLineChart" style="margin-top:35px;"></div>-->
<!-- <div class="detail_linechart" id="line-tingyun-trendKpiLineChart" style="margin-top:35px;"></div>-->
</el-col>
</el-row>
</div>
</div>
... ...
export default {
name: 'pieDetailLine',
template: '',
components:{
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/page/components/lineChart/index')
)
},
data() {
return{}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let dateType=Vue.ref('oneDay');
let optionData=Vue.ref('');
//series接口无数据时默认数据
let seriesData = Vue.ref([{
"data": [['2022-05-13','02:00'],['2022-05-15','03:00'],['2022-05-17','04:00']],
// "name": kpiName.value
"name": '成功'
},{
"data": [['2022-05-14','08:00'],['2022-05-16','09:00'],['2022-05-17','10:00']],
// "name": kpiName.value
"name": '失败'
}]);
let series = Vue.ref([]);
let rateData = Vue.ref([]);
let kpiUnit = Vue.ref('');
let kpiName = Vue.ref('');//指标名称
let colorsArr=Vue.ref([
{
start: '#46d6d8',
end: '#2883d0'
},
{
start: '#facf5b',
end: '#f77623'
},
{
start: '#C04DD8',
end: '#D81F72'
},
{
start: '#F5A1EB',
end: '#A04DE2'
},
{
start: '#F36093',
end: '#FF465C'
},
{
start: '#C2E74D',
end: '#00AE8B'
},
{
start: '#3DC3FF',
end: '#01FFFF'
},
{
start: '#B850ED',
end: '#9062EF'
},
{
start: '#305be6',
end: '#36a7d3'
},
{
start: '#FFA500',
end: '#FFEE00'
},
{
start: '#C4E64C',
end: '#2de078'
},
{
start: '#30ffb3',
end: '#01FFFF'
},
{
start: '#FF4488',
end: '#F13EFF'
},
{
start: '#A64CE2',
end: '#625AE7'
},
{
start: '#5AEBC7',
end: '#5FC9F8'
},
{
start: '#FFA500',
end: '#FFEE00'
},
{
start: '#00AAD6',
end: '#625AE7'
},
{
start: '#E48BDE',
end: '#FF9262'
},
{
start: '#B2797B',
end: '#FF4B51'
},
{
start: '#ffe393',
end: '#feff5b'
}
])
const changeInterval=(val)=>{
dateType.value=val;
if(val=='custom'){
}else{
getMonthDay();
getLineChart();
}
}
const getLineChart=()=>{
let params=proxy.$route.query
let resourceId=params.resId;//资源ID
let kpiId =params.kpiId; //指标ID
let resType=params.resType;//资源类型
let idArr=[];
let idStr='';
if(kpiId.indexOf(',')!=-1){
idArr=kpiId.split(',');
if(idArr.length<=2){
idStr=idArr[0];
}else{
idStr=kpiId;
}
}else{
idStr=kpiId;
}
kpiName.value = params.name;//指标名称
let url = '/api-web/scatter/getByResId?dateType=' + dateType.value +
'&resId=' + resourceId + '&kpiId=' + idStr + '&resType=' + resType;
proxy.$http.get(url, {},function (res){
kpiUnit.value = (!res.data || res.data.kpiUnit == null) ? "" : res.data.kpiUnit;
if (res.data && res.data.length == 0) {
rateData.value = {
series: seriesData.value,
kpiUnit: kpiUnit.value
}
} else {
rateData.value = res.data;
}
setSeries();
},function (error){
rateData.value = {
series: seriesData.value,
kpiUnit: kpiUnit.value
}
setSeries();
})
}
const setSeries=()=>{
series.value=[];
$.each(rateData.value,function (i,v) {
if(v.x && v.x.length>0){
let nameArr=[];
v.x.map(item=>{
nameArr.unshift(item);
})
xAxisData.value=nameArr;
}
series.value.push({
name: v.name,
type: 'scatter',
data: v.date,
/* symbolSize: 12,
symbol: 'circle',*/
itemStyle: {
normal: {
color: colorsArr.value[i]?colorsArr.value[i].start:colorsArr.value[0].start //图标颜色
}
},
lineStyle: {
normal: {
width: 3, //连线粗细
color: colorsArr.value[i]?colorsArr.value[i].end:colorsArr.value[0].end //连线颜色
}
}
})
});
optionDataInit();
}
const optionDataInit=()=>{
optionData.value = {
tooltip: {
trigger: 'axis',
formatter:function (param) {
// var tips = kpiName.value+" "+param[0].name +"<br/>";
var tips =kpiName.value +"<br/>";
$.each(param,function (i,v) {
// tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
tips += "<div style='display: flex;align-content: flex-start;'><span>"+v.marker+"</span> <span>"+
v.seriesName + ":"+v.value +"</span></div>"
});
return tips;
}
},
legend: {
show: true
},
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
show: false
}
}
},
xAxis: {
type: 'category',
data: xAxisData.value,
axisLine: {
lineStyle: {
color: '#c9c9c9'
}
},
axisLabel: {
color: '#232425',
showMaxLabel: true
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(200,200,200,0.1)', 'transparent'
]
}
}
},
yAxis: {
// data: ['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'],
data:YAxisData.value,
scale: true,
boundaryGap: ['10%', '10%'],
axisLabel: {
interval:59,//label无间隔
formatter: '{value} 时'
},
axisLine: {
lineStyle: {
color: '#232425'
},
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#ccc']
}
}
},
// x轴拖动
dataZoom: [
{
type: "slider",
realtime: true, //拖动滚动条时是否动态的更新图表数据
height: 25, //滚动条高度
start: 40, //滚动条开始位置（共100等份）
end: 65 //结束位置（共100等份）
}
],
series:series.value
};
}
//获取近30天
let xAxisData=Vue.ref([]);
const getMonthDay=()=>{
let m=24;
if(dateType.value=='oneDay'){
m=24;
}else if(dateType.value=='week'){
m=7;
}else if(dateType.value=='month'){
m=30;
}
let dateArr=[];
for(let i=0;i<=m;i++){
let myDate=new Date();
if(dateType.value=='oneDay'){
myDate.setHours(myDate.getHours()-i)
}else if(dateType.value=='week' || dateType.value=='month'){
myDate.setDate(myDate.getDate() - i);
}
let lowData =getDateTime(myDate); //用了上面转年月日的方法
dateArr.unshift(lowData)
}
xAxisData.value=dateArr;
}
//获取时间点 转年月日的方法
const getDateTime=(newDate)=>{
let dateTime='';
let year=newDate.getFullYear();//获取当前年
let month1=(newDate.getMonth()+1)+'';
let month=timeFormat(month1);//获取当前月
let day=timeFormat(newDate.getDate());//获取当前日
let hours=timeFormat(newDate.getHours()+'');//获取当前时
let minutes=timeFormat(newDate.getMinutes()+'');//获取当前分
let seconds=timeFormat(newDate.getSeconds()+'');//获取当前秒
if(day < 10){
day = '0'+day;
}
if(dateType.value=='oneDay'){
dateTime= year+'-'+month+'-'+day+' '+hours+':00';//+minutes;//+':'+seconds;
}else{
dateTime= year+'-'+month+'-'+day;//+' '+hours+':'+minutes+':'+seconds;
}
return dateTime;
}
//转换个位数为 00
let timeFormat =(number)=> {
return number.length == 1 ? ('0' + number) : number
}
//00:00-23:59数据
let YAxisData=Vue.ref([]);
let getYAxisData=()=>{
let arr1=[];
for(let i=0;i<24;i++){
for(let j=0;j<60;j++){
if(i<10){
if(j<10){
arr1.push('0'+i+':0'+j);
}else{
arr1.push('0'+i+':'+j);
}
}else{
if(j<10){
arr1.push(i+':0'+j);
}else{
arr1.push(i+':'+j);
}
}
}
}
YAxisData.value=arr1;
}
// 挂载完
Vue.onMounted(() => {
getYAxisData();
getMonthDay();
getLineChart();
})
return {
xAxisData,
YAxisData,
getMonthDay,
timeFormat,
dateType,
optionData,
seriesData,
series,
rateData,
kpiUnit,
kpiName,
optionDataInit,
getLineChart,
changeInterval
}
}
}
... ...
... ... @@ -216,6 +216,11 @@ const routes = [{
name: 'pingIndex',
component: () => myImport('views/ping/index'),
},
{
path: '/vue3/connectScatter',
name: 'connectScatter',
component: () => myImport('views/connectScatter/index')
},
];
// hash模式： createWebHashHistory
... ...