|
|
|
export default {
|
|
|
|
name: 'Availability',
|
|
|
|
name: 'availability',
|
|
|
|
template: '',
|
|
|
|
components: {},
|
|
|
|
data () {
|
|
|
|
components: {
|
|
|
|
'LineChart': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('views/zjdaping/components/lineChart/index')
|
|
|
|
)
|
|
|
|
},
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
chartInstance: null,
|
|
|
|
allData: {
|
|
|
|
polyline: {
|
|
|
|
title: "业务可用性",
|
|
|
|
unit: "%",
|
|
|
|
data: {
|
|
|
|
name: "占比",
|
|
|
|
data: ["67","70","80","71","90","92","72","70","56","45","89","100"]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
time: ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
titleFontSize: 20,
|
|
|
|
startValue: 0, // 区域缩放的起点值
|
|
|
|
endValue: 6, // 区域缩放的终点值
|
|
|
|
timerId: null // 定时器的标识
|
|
|
|
titleFontSize:20,
|
|
|
|
domainName:sessionStorage.getItem('domainName'),
|
|
|
|
apiUrl:'/api-web/sxview/getBusinessAvailability',
|
|
|
|
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
|
|
|
|
busId:'247c0c978f574285bf642f55611ea75d',
|
|
|
|
performanceData:'',
|
|
|
|
xAxisData:'',
|
|
|
|
yAxisData:'',
|
|
|
|
optionData:'',
|
|
|
|
ySeriesCommon:[]
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
this.initChart()
|
|
|
|
this.getData()
|
|
|
|
window.addEventListener('resize', this.screenAdapter)
|
|
|
|
this.screenAdapter()
|
|
|
|
},
|
|
|
|
unmounted () {
|
|
|
|
window.removeEventListener('resize', this.screenAdapter)
|
|
|
|
clearInterval(this.timerId)
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
comtitleTextStyle () {
|
|
|
|
return {
|
|
|
|
fontSize: this.titleFontSize / 1.2 + 'px'
|
|
|
|
fontSize: this.titleFontSize / 2.1 + 'px'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
comtitleImgStyle () {
|
|
|
|
return {
|
|
|
|
// height: this.titleFontSize + 'px',
|
|
|
|
width: this.titleFontSize * 8 + 'px'
|
|
|
|
height: this.titleFontSize * 1.8 + 'px'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
initChart () {
|
|
|
|
this.chartInstance = echarts.init(document.getElementById('availability_ref'))
|
|
|
|
const initOption = {
|
|
|
|
grid: {
|
|
|
|
top: '25%',
|
|
|
|
left: '3%',
|
|
|
|
right: '6%',
|
|
|
|
bottom: '3%',
|
|
|
|
containLabel: true
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
right: '2%',
|
|
|
|
top: '5%'
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false,
|
|
|
|
axisLabel: {
|
|
|
|
textStyle: {
|
|
|
|
color: '#E6E8EB'
|
|
|
|
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=()=>{
|
|
|
|
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 ) {
|
|
|
|
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:''
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
splitLine: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
textStyle: {
|
|
|
|
color: '#E6E8EB'
|
|
|
|
proxy.xAxisData=nullArr;
|
|
|
|
for(let i=0;i<4;i++){
|
|
|
|
proxy.yAxisData.push(nullArr);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
proxy.optionInit();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.chartInstance.setOption(initOption)
|
|
|
|
},
|
|
|
|
getData () {
|
|
|
|
// await this.$http.get()
|
|
|
|
// const { data: ret } = await this.$http.get('responsemonitor')
|
|
|
|
// this.allData = ret
|
|
|
|
// console.log(ret)
|
|
|
|
this.updateChart()
|
|
|
|
this.startInterval()
|
|
|
|
},
|
|
|
|
updateChart () {
|
|
|
|
// 半透明的颜色值
|
|
|
|
const colorArr1 = [
|
|
|
|
'rgba(11, 168, 44, 0.5)',
|
|
|
|
'rgba(44, 110, 255, 0.5)',
|
|
|
|
'rgba(22, 242, 217, 0.5)',
|
|
|
|
'rgba(254, 33, 30, 0.5)',
|
|
|
|
'rgba(250, 105, 0, 0.5)'
|
|
|
|
]
|
|
|
|
// 全透明的颜色值
|
|
|
|
const colorArr2 = [
|
|
|
|
'rgba(11, 168, 44, 0)',
|
|
|
|
'rgba(44, 110, 255, 0)',
|
|
|
|
'rgba(22, 242, 217, 0)',
|
|
|
|
'rgba(254, 33, 30, 0)',
|
|
|
|
'rgba(250, 105, 0, 0)'
|
|
|
|
]
|
|
|
|
const timeArr = this.allData.xAxis.today
|
|
|
|
const seriesData = this.allData.polyline.data.data
|
|
|
|
const seriesName = this.allData.polyline.data.name
|
|
|
|
// 图例的数据
|
|
|
|
const legendArr = this.allData.polyline.data.data.map(item => {
|
|
|
|
return item.name
|
|
|
|
|
|
|
|
})
|
|
|
|
console.log(legendArr)
|
|
|
|
const title = this.allData.polyline.title
|
|
|
|
const unit = this.allData.polyline.unit
|
|
|
|
const dataOption = {
|
|
|
|
// title: {
|
|
|
|
// text: '{Sunny| 业务可用性 }',
|
|
|
|
// show: true
|
|
|
|
// },
|
|
|
|
xAxis: {
|
|
|
|
data: timeArr
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
data: legendArr
|
|
|
|
},
|
|
|
|
dataZoom: {
|
|
|
|
show: false,
|
|
|
|
startValue: this.startValue,
|
|
|
|
endValue: this.endValue
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
// proxy.optionInit();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const optionInit=()=>{
|
|
|
|
|
|
|
|
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]);
|
|
|
|
proxy.legendData.map((item,index)=>{
|
|
|
|
let i=0;
|
|
|
|
if(index%2==0 ||index%3==0){
|
|
|
|
i=0;
|
|
|
|
}else{
|
|
|
|
i=1;
|
|
|
|
}
|
|
|
|
proxy.ySeriesCommon.push(
|
|
|
|
{
|
|
|
|
name: seriesName,
|
|
|
|
name:item,
|
|
|
|
type: 'line',
|
|
|
|
data: seriesData,
|
|
|
|
smooth: true,
|
|
|
|
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: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
{
|
|
|
|
// color:'rgba(151,213,244,0.4)',
|
|
|
|
normal:{
|
|
|
|
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
|
|
|
|
offset: 0,
|
|
|
|
color: colorArr1[2]
|
|
|
|
}, // %0的颜色值
|
|
|
|
{
|
|
|
|
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
|
|
|
|
}, {
|
|
|
|
offset: 1,
|
|
|
|
color: colorArr2[2]
|
|
|
|
} // 100%的颜色值
|
|
|
|
])
|
|
|
|
}
|
|
|
|
color: colorArr2[index]
|
|
|
|
}])
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
)
|
|
|
|
})
|
|
|
|
//业务双y轴数据
|
|
|
|
|
|
|
|
// let xAxisDataLength=proxy.ySeriesCommon[0].length;
|
|
|
|
let xAxisData=[];
|
|
|
|
if(proxy.xAxisData){
|
|
|
|
proxy.xAxisData.map((item,index)=>{
|
|
|
|
if(index%20==0){
|
|
|
|
xAxisData.push(item)
|
|
|
|
|
|
|
|
}
|
|
|
|
]
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
this.chartInstance.setOption(dataOption)
|
|
|
|
},
|
|
|
|
screenAdapter () {
|
|
|
|
this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
|
|
|
|
const adapterOption = {
|
|
|
|
proxy.optionData = {
|
|
|
|
title: {
|
|
|
|
text: ''
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
backgroundColor:'rgba(50,50,50,0.7)',
|
|
|
|
borderColor:"#333",
|
|
|
|
textStyle:{
|
|
|
|
color:"#fff",
|
|
|
|
align:'left'
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
itemWidth: this.titleFontSize,
|
|
|
|
itemHeight: this.titleFontSize,
|
|
|
|
itemGap: this.titleFontSize,
|
|
|
|
data: proxy.legendData,
|
|
|
|
itemHeight:0,//图例圆圈大小设置
|
|
|
|
y:'0px',
|
|
|
|
textStyle: {
|
|
|
|
fontSize: this.titleFontSize / 2
|
|
|
|
color: '#ffffff',
|
|
|
|
fontsize:"12px"
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
top:'15%',
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
// bottom: '3%',
|
|
|
|
containLabel: true,
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false,
|
|
|
|
data: xAxisData,
|
|
|
|
|
|
|
|
axisLine:{
|
|
|
|
show:false,//是否显示坐标线
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: false //是否显示坐标刻度
|
|
|
|
},
|
|
|
|
axisLabel:{
|
|
|
|
color:'#ffffff',
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
yAxis:[
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'value',
|
|
|
|
axisLabel: {
|
|
|
|
formatter: '{value} %'//以百分比显示
|
|
|
|
},
|
|
|
|
splitLine:{
|
|
|
|
lineStyle: {
|
|
|
|
color:'#0a1b31'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
min:0,
|
|
|
|
max:100,
|
|
|
|
splitNumber:5,
|
|
|
|
interval:(100-0)/5
|
|
|
|
}, {
|
|
|
|
name: '单位:万',
|
|
|
|
type: 'value',
|
|
|
|
axisLabel: {
|
|
|
|
show: true,
|
|
|
|
interval: 'right',//居中显示
|
|
|
|
},
|
|
|
|
splitLine:{
|
|
|
|
lineStyle: {
|
|
|
|
color:'#0a1b31'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
min:min2,
|
|
|
|
max:max2,
|
|
|
|
splitNumber:5,
|
|
|
|
interval:(max2-min2)/5
|
|
|
|
},
|
|
|
|
],
|
|
|
|
series: proxy.ySeriesCommon,
|
|
|
|
itemStyle:{
|
|
|
|
showSymbol:false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.chartInstance.setOption(adapterOption)
|
|
|
|
this.chartInstance.resize()
|
|
|
|
},
|
|
|
|
startInterval () {
|
|
|
|
if (this.timerId) {
|
|
|
|
clearInterval(this.timerId)
|
|
|
|
}
|
|
|
|
let index = 12
|
|
|
|
/*this.timerId = setInterval(() => {
|
|
|
|
this.startValue++
|
|
|
|
this.endValue++
|
|
|
|
// this.allData.polyline.data
|
|
|
|
// console.log((this.allData.polyline.data)[0].data.length)
|
|
|
|
if ((this.allData.polyline.data).length > 0) {
|
|
|
|
index = (this.allData.polyline.data)[0].data.length
|
|
|
|
}
|
|
|
|
if (this.endValue > index - 1) {
|
|
|
|
this.startValue = 0
|
|
|
|
this.endValue = 6
|
|
|
|
}
|
|
|
|
console.log(this.startValue)
|
|
|
|
console.log(this.endValue)
|
|
|
|
this.updateChart()
|
|
|
|
}, 5000)*/
|
|
|
|
};
|
|
|
|
}
|
|
|
|
//计算最大值
|
|
|
|
const calMax=(arr)=>{
|
|
|
|
let max=0;
|
|
|
|
arr.forEach((el)=>{
|
|
|
|
el.forEach((el1)=>{
|
|
|
|
if(!(el1 === undefined || el1 === '')){
|
|
|
|
if(max<el1){
|
|
|
|
max=el1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
let maxint=Math.ceil(max/9.5);
|
|
|
|
let maxval=maxint * 10;//让显示的刻度是整数
|
|
|
|
return maxval;
|
|
|
|
}
|
|
|
|
//计算最小值
|
|
|
|
const calMin=(arr)=>{
|
|
|
|
let min=0;
|
|
|
|
arr.forEach((el)=>{
|
|
|
|
el.forEach((el1)=>{
|
|
|
|
if(!(el1 === undefined || el1 === '')){
|
|
|
|
if(min>el1){
|
|
|
|
min=el1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
let minint=Math.floor(min/10);
|
|
|
|
let minval=minint * 10;//让显示的刻度是整数
|
|
|
|
return minval;
|
|
|
|
}
|
|
|
|
|
|
|
|
const screenAdapter=()=>{
|
|
|
|
proxy.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
|
|
|
|
}
|
|
|
|
|
|
|
|
return{
|
|
|
|
calMax,
|
|
|
|
calMin,
|
|
|
|
optionInit,
|
|
|
|
getData,
|
|
|
|
xAxisData,
|
|
|
|
yAxisData,
|
|
|
|
legendData,
|
|
|
|
screenAdapter
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
