|
|
|
export default {
|
|
|
|
name: 'addIndex',
|
|
|
|
template: '',
|
|
|
|
components: {},
|
|
|
|
components: {
|
|
|
|
'LineChart': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('views/zjdaping/components/lineChart/index')
|
|
|
|
)
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
commandVal:'max',
|
|
|
|
domainName:sessionStorage.getItem('domainName'),
|
|
|
|
apiUrl:'/api-web/ContrastAnalysis/getLineData',
|
|
|
|
optionData:'',
|
|
|
|
titleFontSize:'30',
|
|
|
|
allData: '',
|
|
|
|
newCommandVal:this.commandVal,
|
|
|
|
startValue: 0, // 区域缩放的起点值
|
|
|
|
endValue: 6, // 区域缩放的终点值
|
|
|
|
timerId: null,// 定时器的标识
|
|
|
|
props: {
|
|
|
|
label: 'label',
|
|
|
|
children: 'children'
|
|
...
|
...
|
@@ -11,9 +25,22 @@ export default { |
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.loadResList()
|
|
|
|
this.loadResList();
|
|
|
|
this.loadFrequency();
|
|
|
|
this.getData()
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
dialogFormVisible:false,
|
|
|
|
height: {
|
|
|
|
type: Number,
|
|
|
|
default: 0
|
|
|
|
},
|
|
|
|
setup() {
|
|
|
|
pageSize: {
|
|
|
|
type: Number,
|
|
|
|
default: 10
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
// 分页信息
|
|
|
|
const pageInfo = Vue.reactive({
|
|
...
|
...
|
@@ -23,15 +50,60 @@ export default { |
|
|
|
keyWords: ''
|
|
|
|
|
|
|
|
})
|
|
|
|
let temp ={
|
|
|
|
}
|
|
|
|
let dialogFormVisible= false
|
|
|
|
let dialogStatus= ''
|
|
|
|
let textMap ={
|
|
|
|
update: '追加场景',
|
|
|
|
create: 'Create'
|
|
|
|
}
|
|
|
|
let columns = Vue.ref([
|
|
|
|
|
|
|
|
{
|
|
|
|
prop: 'busId',
|
|
|
|
label: '业务系统',
|
|
|
|
sortable: true,
|
|
|
|
align: 'right',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'resTypeName',
|
|
|
|
label: '资源类型',
|
|
|
|
sortable: true,
|
|
|
|
align: 'right',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'resName',
|
|
|
|
label: '资源名称',
|
|
|
|
sortable: true,
|
|
|
|
align: 'right',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'ip',
|
|
|
|
label: 'ip地址',
|
|
|
|
sortable: true,
|
|
|
|
align: 'right',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'kpiId',
|
|
|
|
label: '指标类型',
|
|
|
|
sortable: true,
|
|
|
|
align: 'right',
|
|
|
|
}
|
|
|
|
|
|
|
|
]);
|
|
|
|
const allData=Vue.ref({});
|
|
|
|
let currentPage = Vue.ref(1);
|
|
|
|
let frequencyArr= Vue.ref([]);
|
|
|
|
// 表格数据对象
|
|
|
|
const addedObj = Vue.ref({});
|
|
|
|
const addedObj = Vue.ref([]);
|
|
|
|
let resTypeArr = Vue.ref([]);
|
|
|
|
let busTypeArr = Vue.ref([]);
|
|
|
|
let kpiTypeArr = Vue.ref([]);
|
|
|
|
// 搜索框内容
|
|
|
|
let addedTotal = Vue.ref(0);
|
|
|
|
// 表格数据对象
|
|
|
|
const noaddObj = Vue.ref({});
|
|
|
|
const noaddObj = Vue.ref([]);
|
|
|
|
|
|
|
|
let noaddTotal = Vue.ref(0);
|
|
|
|
// 计算减去左侧树的宽度
|
|
...
|
...
|
@@ -40,35 +112,79 @@ export default { |
|
|
|
let treeWidth = (right / 24) * 4;
|
|
|
|
return right - treeWidth;
|
|
|
|
})();
|
|
|
|
let loadFrequency = ()=> {
|
|
|
|
let param = {
|
|
|
|
ddicName:'Day'
|
|
|
|
}
|
|
|
|
proxy.$http.get(`/api-web/ContrastAnalysis/selectTogetherRate`, param, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
frequencyArr = res.data;
|
|
|
|
console.log(frequencyArr);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
let loadResList = () => {
|
|
|
|
// 查询参数
|
|
|
|
let params = {
|
|
|
|
page: pageInfo.page,
|
|
|
|
limit: pageInfo.limit,
|
|
|
|
// keyWords: pageInfo.keyWords,
|
|
|
|
// keyWords: this.form.keyWords.value,
|
|
|
|
resType: resTypeArr.value.join(','),
|
|
|
|
kpiType: kpiTypeArr.value.join(','),
|
|
|
|
bizType: busTypeArr.value.join(','),
|
|
|
|
configId: 1,
|
|
|
|
configId: 64,
|
|
|
|
}
|
|
|
|
proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
|
|
|
|
if (res && res.object) {
|
|
|
|
if (res && res.data) {
|
|
|
|
addedObj.value = res.data;
|
|
|
|
addedTotal.value = res.count;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
|
|
|
|
if (res && res.object) {
|
|
|
|
if (res && res.data) {
|
|
|
|
noaddObj.value = res.data;
|
|
|
|
noaddTotal.value = res.count;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
let deleteRow = (row,index) => {
|
|
|
|
proxy.$global.confirm("确认删除该项吗？", function () {
|
|
|
|
if(row.isAdd && row.isAdd == 1){
|
|
|
|
proxy.$global.showMsg("删除成功！")
|
|
|
|
dataList.value.splice(index, 1);
|
|
|
|
} else {
|
|
|
|
// 删除配置项
|
|
|
|
proxy.$http.post(`/api-web/ContrastAnalysis/delete/${row.id}`, {}, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
proxy.$global.showMsg("删除成功！");
|
|
|
|
dataList.value.splice(index, 1);
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg && res.msg != '' ? res.msg : "删除失败！", "error");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
let handleUpdate =(row,index) =>{
|
|
|
|
console.log(row);
|
|
|
|
console.log(index);
|
|
|
|
// this.temp = Object.assign({}, row) // copy obj
|
|
|
|
// this.temp.timestamp = new Date(this.temp.timestamp)
|
|
|
|
// this.dialogStatus = 'update'
|
|
|
|
dialogFormVisible = true
|
|
|
|
// this.nextTick(() => {
|
|
|
|
// this.$refs['dataForm'].clearValidate()
|
|
|
|
// })
|
|
|
|
}
|
|
|
|
// 点击按钮搜索
|
|
|
|
let onBtnSearch = () => {
|
|
|
|
pageInfo.page = 1;
|
|
|
|
loadResList();
|
|
|
|
}
|
|
|
|
|
|
|
|
let onReset = () => {
|
|
|
|
|
|
|
|
}
|
|
|
|
let getResType = (arr) => {
|
|
|
|
console.log(arr);
|
|
|
|
var types = arr.map(function (v) {
|
|
...
|
...
|
@@ -79,7 +195,7 @@ export default { |
|
|
|
}
|
|
|
|
let getKpiType = (arr) => {
|
|
|
|
console.log(arr);
|
|
|
|
var types = arr.map(function (v) {
|
|
|
|
var types = arr.map(function (v) {e
|
|
|
|
return v.kpiId;
|
|
|
|
});
|
|
|
|
kpiTypeArr.value = types;
|
|
...
|
...
|
@@ -94,10 +210,21 @@ export default { |
|
|
|
loadResList();
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
allData,
|
|
|
|
temp,
|
|
|
|
dialogFormVisible,
|
|
|
|
dialogStatus,
|
|
|
|
textMap,
|
|
|
|
loadFrequency,
|
|
|
|
frequencyArr,
|
|
|
|
loadResList,
|
|
|
|
getResType,
|
|
|
|
getKpiType,
|
|
|
|
onBtnSearch,
|
|
|
|
handleUpdate,
|
|
|
|
deleteRow,
|
|
|
|
currentPage,
|
|
|
|
columns,
|
|
|
|
addedObj,
|
|
|
|
addedTotal,
|
|
|
|
noaddObj,
|
|
...
|
...
|
@@ -105,5 +232,210 @@ export default { |
|
|
|
max
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
this.getData()
|
|
|
|
window.addEventListener('resize', this.screenAdapter)
|
|
|
|
this.screenAdapter()
|
|
|
|
},
|
|
|
|
unmounted () {
|
|
|
|
window.removeEventListener('resize', this.screenAdapter)
|
|
|
|
},
|
|
|
|
watch:{
|
|
|
|
commandVal(newValue, oldValue) {
|
|
|
|
this.newCommandVal=newValue
|
|
|
|
this.getData()
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getData () {
|
|
|
|
let that=this;
|
|
|
|
console.log(this.domainName)
|
|
|
|
console.log(this.apiUrl)
|
|
|
|
|
|
|
|
// 查询参数
|
|
|
|
let params = {
|
|
|
|
access_token: localStorage.getItem('access_token'),
|
|
|
|
timeScope: 'Day',
|
|
|
|
frequency: 5,
|
|
|
|
resource :{
|
|
|
|
resId :'i-k5e0597zznlzz1iaa8cc',
|
|
|
|
kpiId : 'KPI05227E45',
|
|
|
|
kpiFlg : 'base'
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
that.$http.post(this.domainName +this.apiUrl, params, function (ret) {
|
|
|
|
if(ret){
|
|
|
|
let dataArr=[];
|
|
|
|
let xAxisData='';
|
|
|
|
if(ret.map){
|
|
|
|
dataArr=ret.map.y
|
|
|
|
xAxisData=ret.map.x
|
|
|
|
}else{
|
|
|
|
for(let i=0;i<12;i++){
|
|
|
|
dataArr.push('0')
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
that.allData= {
|
|
|
|
polyline: {
|
|
|
|
title: '',
|
|
|
|
legend : ret.map.legend,
|
|
|
|
unit: ret.map.units,
|
|
|
|
data: {
|
|
|
|
data: dataArr
|
|
|
|
}
|
|
|
|
},
|
|
|
|
xAxis: xAxisData
|
|
|
|
|
|
|
|
}
|
|
|
|
that.updateChart()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
updateChart () {
|
|
|
|
console.log("ddd",this.allData)
|
|
|
|
// 半透明的颜色值
|
|
|
|
const colorArr1 = [
|
|
|
|
'rgba(11, 168, 44, 0.5)',
|
|
|
|
'rgba(44, 110, 255, 0.5)',
|
|
|
|
'rgba(22, 242, 217, 0.5)',
|
|
|
|
'rgba(35, 255, 255, 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(35, 255, 255, 0)',
|
|
|
|
'rgba(254, 33, 30, 0)',
|
|
|
|
'rgba(250, 105, 0, 0)'
|
|
|
|
]
|
|
|
|
const timeArr = this.allData.xAxis
|
|
|
|
const seriesData = this.allData.polyline.data
|
|
|
|
// 图例的数据
|
|
|
|
// const legendArr = this.allData.polyline.data.map(item => {
|
|
|
|
// return item.name
|
|
|
|
// })
|
|
|
|
const legendArr=[];
|
|
|
|
legendArr.push(this.allData.polyline.legend);
|
|
|
|
const title = this.allData.polyline.title
|
|
|
|
|
|
|
|
|
|
|
|
this.optionData = {
|
|
|
|
title: {
|
|
|
|
text: title,
|
|
|
|
left: '10%',
|
|
|
|
textStyle: {
|
|
|
|
fontSize: this.titleFontSize*0.6,
|
|
|
|
color:'#ffffff'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
backgroundColor:'rgba(50,50,50,0.7)',
|
|
|
|
borderColor:"#333",
|
|
|
|
textStyle:{
|
|
|
|
color:"#fff",
|
|
|
|
align:'left'
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
data: legendArr,
|
|
|
|
itemHeight:0,//图例圆圈大小设置
|
|
|
|
top:'10%',
|
|
|
|
right:'20%',
|
|
|
|
textStyle: {
|
|
|
|
color: '#ffffff',
|
|
|
|
fontsize:"12px"
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
bottom: '3%',
|
|
|
|
containLabel: true,
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false,
|
|
|
|
data: timeArr,
|
|
|
|
|
|
|
|
axisLine:{
|
|
|
|
show:false,//是否显示坐标线
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: false //是否显示坐标刻度
|
|
|
|
},
|
|
|
|
axisLabel:{
|
|
|
|
color:'#ffffff',
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
axisLabel: {
|
|
|
|
color:'#ffffff',
|
|
|
|
},
|
|
|
|
splitLine:{
|
|
|
|
lineStyle: {
|
|
|
|
color:'#0a1b31'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
series: {
|
|
|
|
type: 'line',
|
|
|
|
data: seriesData,
|
|
|
|
smooth: true,
|
|
|
|
showSymbol:false,
|
|
|
|
color:colorArr1[1],
|
|
|
|
areaStyle: {
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
|
|
|
color: colorArr1[1]
|
|
|
|
}, // %0的颜色值
|
|
|
|
{
|
|
|
|
offset: 1,
|
|
|
|
color: colorArr2[1]
|
|
|
|
} // 100%的颜色值
|
|
|
|
])
|
|
|
|
}
|
|
|
|
},
|
|
|
|
itemStyle:{
|
|
|
|
showSymbol:false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
screenAdapter () {
|
|
|
|
this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
|
|
|
|
const adapterOption = {
|
|
|
|
title: {
|
|
|
|
textStyle: {
|
|
|
|
fontSize: this.titleFontSize / 1.5
|
|
|
|
}
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
itemWidth: this.titleFontSize,
|
|
|
|
itemHeight: this.titleFontSize,
|
|
|
|
itemGap: this.titleFontSize,
|
|
|
|
textStyle: {
|
|
|
|
fontSize: this.titleFontSize / 2
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
