|
...
|
...
|
@@ -8,177 +8,165 @@ export default { |
|
|
|
},
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
titleFontSize:20,
|
|
|
|
domainName:sessionStorage.getItem('domainName'),
|
|
|
|
apiUrl:'/api-web/sxview/getBusinessAvailability',
|
|
|
|
resourceStatisticsData:'',
|
|
|
|
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
|
|
|
|
busId:'247c0c978f574285bf642f55611ea75d',
|
|
|
|
performanceData:'',
|
|
|
|
xAxisData:'',
|
|
|
|
yAxisData:'',
|
|
|
|
optionData:'',
|
|
|
|
ySeriesCommon:[],
|
|
|
|
titleFontSize: 30,
|
|
|
|
ySeriesCommon:[]
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
comtitleTextStyle () {
|
|
|
|
return {
|
|
|
|
fontSize: this.titleFontSize / 1.2 + 'px'
|
|
|
|
fontSize: this.titleFontSize / 2.1 + 'px'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
comtitleImgStyle () {
|
|
|
|
return {
|
|
|
|
height: this.titleFontSize * 2.1 + 'px'
|
|
|
|
height: this.titleFontSize * 1.8 + 'px'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
const xAxisData=Vue.ref();
|
|
|
|
const yAxisData=Vue.ref([]);
|
|
|
|
const legendData=Vue.ref([]);
|
|
|
|
|
|
|
|
|
|
|
|
// 半透明的颜色值
|
|
|
|
const colorArr1 = [
|
|
|
|
'rgba(151,213,244, 0.8)',
|
|
|
|
'rgba(239,224,167, 0.8)',
|
|
|
|
'rgba(229,171,209, 0.8)',
|
|
|
|
'rgba(151,170,255, 0.8)'
|
|
|
|
]
|
|
|
|
// 全透明的颜色值
|
|
|
|
const colorArr2 = [
|
|
|
|
'rgba(151,213,244, 0)',
|
|
|
|
'rgba(239,224,167, 0)',
|
|
|
|
'rgba(229,171,209, 0)',
|
|
|
|
'rgba(151,170,255, 0)'
|
|
|
|
]
|
|
|
|
// 挂载完
|
|
|
|
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
proxy.screenAdapter();
|
|
|
|
proxy.getData();
|
|
|
|
|
|
|
|
})
|
|
|
|
const getData=()=> {
|
|
|
|
$.get(proxy.domainName + proxy.apiUrl, function (res) {
|
|
|
|
const getData=()=>{
|
|
|
|
let params = {
|
|
|
|
kpiIds: proxy.kpiIds,
|
|
|
|
busId: proxy.busId,
|
|
|
|
startTime:'',
|
|
|
|
endTime:'',
|
|
|
|
access_token:localStorage.getItem('access_token')
|
|
|
|
};
|
|
|
|
$.get(proxy.domainName +proxy.apiUrl,params,function (res) {
|
|
|
|
const data = res;
|
|
|
|
if (data && data.data) {
|
|
|
|
let resData = data.data;
|
|
|
|
if (data ) {
|
|
|
|
if(data.map){
|
|
|
|
let resData=data.map;
|
|
|
|
proxy.legendData=resData.legend;
|
|
|
|
proxy.xAxisData=resData.x;
|
|
|
|
proxy.yAxisData=resData.y;
|
|
|
|
}else{
|
|
|
|
let nullArr=[];
|
|
|
|
for(let i=0;i<4;i++){
|
|
|
|
nullArr.push(i)
|
|
|
|
proxy.legendData.push({
|
|
|
|
name:''
|
|
|
|
})
|
|
|
|
}
|
|
|
|
proxy.xAxisData=nullArr;
|
|
|
|
for(let i=0;i<4;i++){
|
|
|
|
proxy.yAxisData.push(nullArr);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
proxy.optionInit();
|
|
|
|
|
|
|
|
}
|
|
|
|
// proxy.optionInit();
|
|
|
|
|
|
|
|
})
|
|
|
|
// proxy.optionInit();
|
|
|
|
|
|
|
|
proxy.optionInit();
|
|
|
|
}
|
|
|
|
|
|
|
|
const optionInit=()=>{
|
|
|
|
const optionInit=()=>{
|
|
|
|
|
|
|
|
let data3=[350, 350, 350, 350, 350, 350, 350];
|
|
|
|
let data4=[220, 182, 191, 234, 290, 330, 310];
|
|
|
|
let data2=[100, 100, 100, 100, 100, 100, 100];
|
|
|
|
let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
|
|
|
|
let data3=proxy.yAxisData[0];
|
|
|
|
let data4=proxy.yAxisData[3];
|
|
|
|
let data2=proxy.yAxisData[2];
|
|
|
|
let data1=proxy.yAxisData[1];
|
|
|
|
|
|
|
|
let min1=proxy.calMin([data1,data2]);
|
|
|
|
let max1=proxy.calMax([data1,data2]);
|
|
|
|
let min2=proxy.calMin([data3,data4]);
|
|
|
|
let max2=proxy.calMax([data3,data4]);
|
|
|
|
//业务双y轴数据
|
|
|
|
proxy.ySeriesCommon=[
|
|
|
|
{
|
|
|
|
name:'可用性',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:data3,
|
|
|
|
yAxisIndex:1,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#97d5f4",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#97d5f4',
|
|
|
|
width:1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
// color:'rgba(151,213,244,0.4)',
|
|
|
|
normal:{
|
|
|
|
color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
|
|
|
|
offset: 0,
|
|
|
|
color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明
|
|
|
|
}, {
|
|
|
|
offset: 1,
|
|
|
|
color: 'rgba(151,213,244,0.1)'
|
|
|
|
}])
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'成功率',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:data1,
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#efe0a7",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#efe0a7',
|
|
|
|
width:1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
color:'rgba(239,224,167,0)'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'响应率',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:data2,
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#e5abd1",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#e5abd1',
|
|
|
|
width:1
|
|
|
|
proxy.legendData.map((item,index)=>{
|
|
|
|
let i=0;
|
|
|
|
if(index%2==0 ||index%3==0){
|
|
|
|
i=0;
|
|
|
|
}else{
|
|
|
|
i=1;
|
|
|
|
}
|
|
|
|
proxy.ySeriesCommon.push(
|
|
|
|
{
|
|
|
|
name:item,
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:proxy.yAxisData[index],
|
|
|
|
yAxisIndex:i,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:colorArr1[index],//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:colorArr1[index],
|
|
|
|
width:1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
color:'rgba(229,171,209,0)'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'交易量',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:data4,
|
|
|
|
yAxisIndex:1,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#97aaff",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#97aaff',
|
|
|
|
width:1,
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
// color:'rgba(151,213,244,0.4)',
|
|
|
|
normal:{
|
|
|
|
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
|
|
|
|
offset: 0,
|
|
|
|
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
|
|
|
|
}, {
|
|
|
|
offset: 1,
|
|
|
|
color: colorArr2[index]
|
|
|
|
}])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
color:'rgba(151,170,255,0)'
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
]
|
|
|
|
)
|
|
|
|
})
|
|
|
|
//业务双y轴数据
|
|
|
|
|
|
|
|
// let xAxisDataLength=proxy.ySeriesCommon[0].length;
|
|
|
|
let xAxisData=[];
|
|
|
|
for(let i=0;i<=24;i++){
|
|
|
|
if(i%4==0){
|
|
|
|
xAxisData.push(i+':00')
|
|
|
|
if(proxy.xAxisData){
|
|
|
|
proxy.xAxisData.map((item,index)=>{
|
|
|
|
if(index%20==0){
|
|
|
|
xAxisData.push(item)
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let legendData=[];
|
|
|
|
$.each(proxy.ySeriesCommon,function (i,v){
|
|
|
|
legendData.push(v.name)
|
|
|
|
})
|
|
|
|
proxy.legendData=legendData;
|
|
|
|
proxy.optionData = {
|
|
|
|
title: {
|
|
|
|
text: ''
|
|
...
|
...
|
@@ -308,6 +296,9 @@ export default { |
|
|
|
calMin,
|
|
|
|
optionInit,
|
|
|
|
getData,
|
|
|
|
xAxisData,
|
|
|
|
yAxisData,
|
|
|
|
legendData,
|
|
|
|
screenAdapter
|
|
|
|
}
|
|
|
|
}
|
...
|
...
|
|
