|
...
|
...
|
@@ -25,13 +25,23 @@ export default { |
|
|
|
today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
titleFontSize: 30,
|
|
|
|
kpiIds:'KPI20352505',
|
|
|
|
resId:'166eb917fe734dafa2d2474b0a66c37b',
|
|
|
|
resId1:'0002fe6fd00c4ab3b6383104b1565c18',
|
|
|
|
startValue: 0, // 区域缩放的起点值
|
|
|
|
endValue: 6, // 区域缩放的终点值
|
|
|
|
timerId: null // 定时器的标识
|
|
|
|
}
|
|
|
|
},
|
|
|
|
setUp(){
|
|
|
|
const allData=ref({});
|
|
|
|
return{
|
|
|
|
allData
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
this.getData()
|
|
|
|
this.getData(this)
|
|
|
|
window.addEventListener('resize', this.screenAdapter)
|
|
|
|
this.screenAdapter()
|
|
|
|
},
|
|
...
|
...
|
@@ -41,13 +51,86 @@ export default { |
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
async getData () {
|
|
|
|
// await this.$http.get()
|
|
|
|
// const { data: ret } = await this.$http.get('documentcpu')
|
|
|
|
// this.allData = ret
|
|
|
|
// console.log(ret)
|
|
|
|
this.updateChart()
|
|
|
|
this.startInterval()
|
|
|
|
getData1(that){
|
|
|
|
const { proxy } = Vue.getCurrentInstance();
|
|
|
|
|
|
|
|
var params = {
|
|
|
|
resId: that.resId1,
|
|
|
|
kpiIds: that.kpiIds,
|
|
|
|
subResId: 'vmem',
|
|
|
|
startTime:'',
|
|
|
|
endTime:'',
|
|
|
|
access_token:localStorage.getItem("access_token")
|
|
|
|
};
|
|
|
|
// proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
|
|
|
|
var res1={
|
|
|
|
code:'0',
|
|
|
|
data:{
|
|
|
|
kpiUnit:'%',
|
|
|
|
names:['20:10','21:10','22:15','23:15'],
|
|
|
|
series:[
|
|
|
|
{
|
|
|
|
name:'89.12.97.3',
|
|
|
|
datas:[0.7,1,1,0.7,1,0.7,0.5,1],
|
|
|
|
flag:'vmem'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(res1 && res1.data){
|
|
|
|
let resData=res1.data;
|
|
|
|
that.allData.polyline.data.push(resData.series[0])
|
|
|
|
console.log("123",that.allData)
|
|
|
|
that.updateChart()
|
|
|
|
|
|
|
|
}
|
|
|
|
// });
|
|
|
|
},
|
|
|
|
|
|
|
|
getData (that) {
|
|
|
|
const { proxy } = Vue.getCurrentInstance();
|
|
|
|
var params = {
|
|
|
|
resId: that.resId,
|
|
|
|
kpiIds: that.kpiIds,
|
|
|
|
subResId: 'vmem',
|
|
|
|
startTime:'',
|
|
|
|
endTime:'',
|
|
|
|
access_token:localStorage.getItem("access_token")
|
|
|
|
};
|
|
|
|
// proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
|
|
|
|
var res={
|
|
|
|
code:'0',
|
|
|
|
data:{
|
|
|
|
kpiUnit:'%',
|
|
|
|
names:['20:10','21:10','22:15','23:15'],
|
|
|
|
series:[
|
|
|
|
{
|
|
|
|
name:'89.12.97.2',
|
|
|
|
datas:[0.9,0.9,1,1,0.9,1,1,1],
|
|
|
|
flag:'vmem'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(res && res.data){
|
|
|
|
let resData=res.data;
|
|
|
|
let seriesData1=[];
|
|
|
|
seriesData1.push(resData.series[0])
|
|
|
|
// that.seriesData1=resData.series;
|
|
|
|
that.allData = {
|
|
|
|
polyline: {
|
|
|
|
title: "文书库CPU监控",
|
|
|
|
unit: "cpu%",
|
|
|
|
data: seriesData1
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
today:resData.names
|
|
|
|
}
|
|
|
|
};
|
|
|
|
that.getData1(that)
|
|
|
|
}
|
|
|
|
// });
|
|
|
|
|
|
|
|
},
|
|
|
|
updateChart () {
|
|
|
|
// 半透明的颜色值
|
|
...
|
...
|
@@ -69,11 +152,21 @@ export default { |
|
|
|
'rgba(250, 105, 0, 0)'
|
|
|
|
]
|
|
|
|
const timeArr = this.allData.xAxis.today
|
|
|
|
const seriesArr = this.allData.polyline.data.map((item, index) => {
|
|
|
|
return {
|
|
|
|
const seriesArr = this.allData.polyline.data;
|
|
|
|
const title=this.allData.polyline.title;
|
|
|
|
const unit=this.allData.polyline.unit;
|
|
|
|
|
|
|
|
let seriesData=[];
|
|
|
|
|
|
|
|
console.log("***",seriesArr)
|
|
|
|
$.each(seriesArr,function (index,item){
|
|
|
|
console.log("&&&",item)
|
|
|
|
console.log("/*/*/*",item.name)
|
|
|
|
|
|
|
|
seriesData .push({
|
|
|
|
name: item.name,
|
|
|
|
type: 'line',
|
|
|
|
data: item.data,
|
|
|
|
data: item.datas,
|
|
|
|
smooth: true,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
...
|
...
|
@@ -97,15 +190,13 @@ export default { |
|
|
|
} // 100%的颜色值
|
|
|
|
])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
// 图例的数据
|
|
|
|
const legendArr = this.allData.polyline.data.map(item => {
|
|
|
|
return item.name
|
|
|
|
})
|
|
|
|
const title = this.allData.polyline.title
|
|
|
|
const unit = this.allData.polyline.unit
|
|
|
|
const seriesData=seriesArr;
|
|
|
|
let xAxisData=timeArr;
|
|
|
|
this.optionData = {
|
|
|
|
title: {
|
...
|
...
|
|
