monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 21dfdd9d8671e5cef46273ce0065c1acbf2c10f1 1 parent 6a6b31d7

性能曲线代码迁移到base

Inline Side-by-side
Showing 3 changed files with 466 additions and 0 deletions
... ... @@ -47,6 +47,21 @@ const routes = [{
path: '/alarmsubscribe/excludeKpi',
name: 'alarmSubscribeExcludeKpi',
component: () => myImport('views/alarmsubscribe/index')
},
{
path: '/vue3/pieDetailLine',
name: 'pieDetailLine',
component: () => myImport('views/pieDetailLine/index')
},
{
path: '/vue3/portSenseSelect',
name: 'portSenseSelect',
component: () => myImport('views/portSenseSelect/index')
},
{
path: '/alarmsubscribe/excludeKpi',
name: 'alarmSubscribeExcludeKpi',
component: () => myImport('views/alarmsubscribe/index')
}
];
... ...
<div class="pie-detail-line-container" >
<div class="pie-detail-title">
<span class="pie-detail-title-active">性能走势</span>
</div>
<!-- 趋势分析 预警分析-->
<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="interval=='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="interval!='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='DAY'}]" data-value="DAY" >一天</div>
<div v-if="interval!='custom'" @click="changeInterval('WEEK')" :class="['line-filter-item', {'active':interval=='WEEK'}]" data-value="WEEK">一周</div>
<div v-if="interval!='custom'" @click="changeInterval('MONTH')" :class="['line-filter-item', {'active':interval=='MONTH'}]" data-value="MONTH">一月</div>
<div v-if="interval!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':interval=='YEAR'}]" data-value="YEAR">一年</div>
<div v-if="interval!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':interval=='custom'}]" data-value="custom">自定义</div>
<div v-if="interval=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='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/zjdaping/components/lineChart/index')
)
},
data() {
return{}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let interval=Vue.ref('DAY');
let optionData=Vue.ref('');
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']);
let series = Vue.ref([]);
let rateData = Vue.ref([]);
let kpiUnit = Vue.ref('');
let kpiName = Vue.ref('');//指标名称
let startTime=Vue.ref('');
let endTime=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'
}
])
let keys=Vue.ref('');
let getOptionData=(res)=>{
let nameArr=[];
let dataArr=[];
if(res && res.success){
if(res.map){
let resData=res.map;
kpiUnit.value = resData.kpiUnit == null ? "" : resData.kpiUnit;
Object.keys(resData).forEach(function(key){
Object.keys(resData[key]).sort(function (a, b) {
return a<b?1:-1;
}).forEach(function(time){
nameArr.unshift(time);
dataArr.unshift(resData[key][time])
})
})
rateData.value = {
names: nameArr,
series: [{
"data": dataArr,
"name": '平均值'
}],
kpiUnit: kpiUnit.value
}
}
}else{
proxy.$global.showMsg(res.msg,'warning');
}
setSeries();
}
const getInfluxOption = (res) => {
let str = res.str;
if (res.map && Object.keys(res.map).length == 0) {
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];
let seriesDefArr = [];
if(str == 'performance'){
seriesDefArr = [{
"data": defData,
"name": kpiName.value
}];
} else {
seriesDefArr = [{
"data": defData,
"name": "最大"
},{
"data": defData,
"name": "最小"
},{
"data": defData,
"name": "平均"
}];
}
rateData.value = {
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'],
series: seriesDefArr,
kpiUnit: kpiUnit.value
}
} else {
let names = [];
let max = [];
let min = [];
let avg = [];
let kpiValueArr = [];
let seriesArr = [];
let kpiName = '';
let kpiUnitVal = '';
let kpiList = res.data;
Object.keys(res.map).forEach(function(key){
res.map[key].forEach(function(item){
names.push(item.dbTimeStr);
if(str == 'performance'){
kpiValueArr.push(item.kpiValue);
} else {
max.push(item.maxValue);
min.push(item.minValue);
avg.push(item.avgValue);
}
if(kpiName == '' && kpiUnitVal == ''){
kpiList.filter(function (v){
if(v.kpiId == item.kpiId){
kpiName = v.kpiName;
kpiUnitVal = v.unit;
}
})
}
})
})
if(str == 'performance'){
seriesArr = [{
"data": kpiValueArr,
"name": kpiName
}];
} else {
seriesArr = [{
"data": max,
"name": "最大"
},{
"data": min,
"name": "最小"
},{
"data": avg,
"name": "平均"
}];
}
kpiUnit.value = kpiUnitVal;
rateData.value = {
names: names,
series: seriesArr,
kpiUnit: kpiUnit.value
};
}
setSeries();
}
const changeInterval=(val)=>{
interval.value=val;
if(val=='custom'){
}else{
getLineChart();
}
}
const getLineChart=()=>{
let params=proxy.$route.query
let resourceId=params.resId;//资源ID
let kpiId =params.kpiId; //指标ID
let flag =params.flag;//二级资源标识
let warning =params.warning;//预警指标标识
let ident =params.ident;//性能指标标识
let trend =params.trend;//趋势指标标识
keys.value=resourceId+":"+kpiId+":"+flag;
kpiName.value = params.name;//指标名称
let url = '/api-web/detail/performance/line/chart?interval=' + interval.value + '&startTime='
+ startTime.value + '&endTime=' + endTime.value + '&resId=' + resourceId + '&kpiIds=' + kpiId + '&subResId=' + flag;
proxy.$http.get(url, {},function (res){
kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
if (res.data && res.data.names.length == 0) {
rateData.value = {
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'],
series: [{
"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],
"name": kpiName.value
}],
kpiUnit: kpiUnit.value
}
} else {
rateData.value = res.data;
}
setSeries();
},function (error){
rateData.value = {
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'],
series: [{
"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],
"name": kpiName.value
}],
kpiUnit: kpiUnit.value
}
setSeries();
})
}
const setSeries=()=>{
series.value=[];
$.each(rateData.value.series,function (i,v) {
series.value.push({
name: v.name,
type: 'line',
data: v.data,
symbolSize: 12,
symbol: 'circle',
itemStyle: {
normal: {
color: colorsArr.value[i].start //图标颜色
}
},
lineStyle: {
normal: {
width: 3, //连线粗细
color: colorsArr.value[i].end //连线颜色
}
}
})
});
optionDataInit();
}
const optionDataInit=()=>{
optionData.value = {
tooltip: {
trigger: 'axis',
formatter:function (param) {
var tips = kpiName.value+" "+param[0].name +"<br/>";
$.each(param,function (i,v) {
tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
});
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: rateData.value.names,
axisLine: {
lineStyle: {
color: '#c9c9c9'
}
},
axisLabel: {
color: '#232425',
showMaxLabel: true
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(200,200,200,0.1)', 'transparent'
]
}
}
},
yAxis: {
type: 'value',
scale: true,
boundaryGap: ['10%', '10%'],
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
};
}
//时间范围组件回调函数--时间范围
const callbacktime=(val)=>{
}
//时间范围组件回调函数--聚合频率
const callbackrate=(val)=>{
}
// 挂载完
Vue.onMounted(() => {
getLineChart();
})
return {
interval,
optionData,
names,
series,
rateData,
kpiUnit,
kpiName,
keys,
optionDataInit,
getOptionData,
getInfluxOption,
getLineChart,
changeInterval
}
}
}
... ...