|
|
|
/**
|
|
|
|
* 时间范围：time_scope
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/11/20 16:13
|
|
|
|
*/
|
|
|
|
const timeRange = () => {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let timeRangeArr = Vue.ref([]);
|
|
|
|
|
|
|
|
let loadTimeRange = (callback) => {
|
|
|
|
if (timeRangeArr.value.length > 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
proxy.$http.post(`/api-web/manage/ddic/findSucDdics/time_scope`, {}, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
timeRangeArr.value = res.data;
|
|
|
|
|
|
|
|
if (callback) {
|
|
|
|
callback(res.data[0].ddicCode);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
timeRangeArr,
|
|
|
|
loadTimeRange
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 契合频率
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/11/20 16:38
|
|
|
|
*/
|
|
|
|
const frequency = () => {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let frequencyArr = Vue.ref([]);
|
|
|
|
|
|
|
|
let loadFrequency = (defCode, callback) => {
|
|
|
|
if (frequencyArr.value.lnegth > 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let param = {
|
|
|
|
ddicName: defCode
|
|
|
|
}
|
|
|
|
proxy.$http.get(`/api-web/ContrastAnalysis/selectTogetherRate`, param, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
frequencyArr.value = res.data;
|
|
|
|
if (callback) {
|
|
|
|
callback();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
frequencyArr,
|
|
|
|
loadFrequency
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'resIndex',
|
|
|
|
template: '',
|
|
|
|
components: {
|
|
|
|
'analysis-line': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('components/page/analysis/lineChars/index')
|
|
|
|
),
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
props: {
|
|
|
|
label: 'label',
|
|
|
|
children: 'children'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
setup() {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let height = Vue.ref(window.innerHeight - 10);
|
|
|
|
|
|
|
|
let columns = Vue.ref([
|
|
|
|
{
|
|
|
|
prop: 'busTypeName',
|
|
|
|
label: '业务系统',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'resTypeName',
|
|
|
|
label: '资源类型',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'resName',
|
|
|
|
label: '资源名称',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'ip',
|
|
|
|
label: 'ip地址',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'kpiName',
|
|
|
|
label: '指标名称',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'flag',
|
|
|
|
label: '指标标识',
|
|
|
|
sortable: true,
|
|
|
|
align: 'center',
|
|
|
|
}
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
var id = proxy.$global.getQueryVariable('configId');
|
|
|
|
|
|
|
|
let resTypeArr = Vue.ref([]);
|
|
|
|
let kpiTypeArr = Vue.ref([]);
|
|
|
|
let busTypeArr = Vue.ref([]);
|
|
|
|
let keyWords = Vue.ref('');
|
|
|
|
let config = Vue.ref(id);
|
|
|
|
let lineChart = Vue.ref({
|
|
|
|
legend: {
|
|
|
|
data: []
|
|
|
|
},
|
|
|
|
xAxis: [],
|
|
|
|
series: [{
|
|
|
|
name: '',
|
|
|
|
type: 'bar',
|
|
|
|
data: []
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
let activeName = Vue.ref('first');
|
|
|
|
const tabFirstList = Vue.ref([]);
|
|
|
|
const tabSecondList = Vue.ref([]);
|
|
|
|
let dialogFormVisible = Vue.ref(false);
|
|
|
|
let parentList = Vue.ref([]);
|
|
|
|
let isAdd = Vue.ref(false);
|
|
|
|
|
|
|
|
let form = Vue.ref({
|
|
|
|
parentId: '',
|
|
|
|
parentName: '',
|
|
|
|
desc: '',
|
|
|
|
scene: {
|
|
|
|
name: '',
|
|
|
|
desc: '',
|
|
|
|
sort: 1,
|
|
|
|
timeScope: '',
|
|
|
|
frequency: '',
|
|
|
|
},
|
|
|
|
resourceList: []
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let getResType = (arr) => {
|
|
|
|
console.log(arr);
|
|
|
|
var types = arr.map(function (v) {
|
|
|
|
return v.id;
|
|
|
|
});
|
|
|
|
resTypeArr.value = types;
|
|
|
|
loeadTable();
|
|
|
|
}
|
|
|
|
let getKpiType = (arr) => {
|
|
|
|
console.log(arr);
|
|
|
|
var types = arr.map(function (v) {
|
|
|
|
e
|
|
|
|
return v.kpiId;
|
|
|
|
});
|
|
|
|
kpiTypeArr.value = types;
|
|
|
|
loeadTable();
|
|
|
|
}
|
|
|
|
let getBizType = (arr) => {
|
|
|
|
console.log(arr);
|
|
|
|
var types = arr.map(function (v) {
|
|
|
|
return v.busId;
|
|
|
|
});
|
|
|
|
busTypeArr.value = types;
|
|
|
|
loeadTable();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 查询参数
|
|
|
|
let params = {
|
|
|
|
keyWords: keyWords.value,
|
|
|
|
resType: resTypeArr.value.join(','),
|
|
|
|
kpiType: kpiTypeArr.value.join(','),
|
|
|
|
bizType: busTypeArr.value.join(','),
|
|
|
|
configId: config.value
|
|
|
|
}
|
|
|
|
|
|
|
|
let loadFirstList = (reload) => {
|
|
|
|
if (!reload && tabFirstList.value.length > 0) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
tabFirstList.value = res.data;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
let loadSecondList = (reload) => {
|
|
|
|
if (!reload && tabSecondList.value.length > 0) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
tabSecondList.value = res.data;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let tabClick = (tab, event) => {
|
|
|
|
let name = tab.paneName;
|
|
|
|
if (name == 'first') {
|
|
|
|
loadFirstList(false);
|
|
|
|
} else {
|
|
|
|
loadSecondList(false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let loeadTable = (reload) => {
|
|
|
|
if (activeName.value == 'first') {
|
|
|
|
loadFirstList(reload);
|
|
|
|
} else {
|
|
|
|
loadSecondList(reload);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const {
|
|
|
|
frequencyArr,
|
|
|
|
loadFrequency
|
|
|
|
} = frequency();
|
|
|
|
|
|
|
|
const {
|
|
|
|
timeRangeArr,
|
|
|
|
loadTimeRange,
|
|
|
|
} = timeRange();
|
|
|
|
|
|
|
|
let timeRangeChange = (item) => {
|
|
|
|
let code = item.ddicCode;
|
|
|
|
loadFrequency(code);
|
|
|
|
}
|
|
|
|
|
|
|
|
let addRes = (row, index) => {
|
|
|
|
tabFirstList.value.push(row);
|
|
|
|
activeName.value = 'first'
|
|
|
|
//proxy.$global.showMsg("添加成功！");
|
|
|
|
|
|
|
|
// 加载折线图
|
|
|
|
getChartData();
|
|
|
|
|
|
|
|
}
|
|
|
|
let deleteRes = (row, index) => {
|
|
|
|
proxy.$global.confirm("确认删除资源吗？", function () {
|
|
|
|
// proxy.$global.showMsg("删除成功！")
|
|
|
|
tabFirstList.value.splice(index, 1);
|
|
|
|
getChartData();
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
let getChartData = () => {
|
|
|
|
|
|
|
|
let timeScope = form.value.scene.timeScope.replaceAll("time_scope_", "")
|
|
|
|
if (timeScope == '') {
|
|
|
|
proxy.$global.showMsg("请选择时间范围！", "warning");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (form.value.scene.frequency == '') {
|
|
|
|
proxy.$global.showMsg("请选择契合频率！", "warning");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let resList = tabFirstList.value.map(function (v) {
|
|
|
|
return {resId: v.resId, kpiId: v.kpiId, kpiFlg: v.flag}
|
|
|
|
});
|
|
|
|
|
|
|
|
// let p = {
|
|
|
|
// timeScope: timeScope,
|
|
|
|
// frequency: form.value.scene.frequency,
|
|
|
|
// resource: resList,
|
|
|
|
// type : 'avg'
|
|
|
|
// }
|
|
|
|
let p = {
|
|
|
|
"timeScope": timeScope,
|
|
|
|
"frequency": form.value.scene.frequency,
|
|
|
|
"resource": [
|
|
|
|
{
|
|
|
|
"resId": "F6F24DADC01ADE5DD9583144BE6E8E15",
|
|
|
|
"kpiId": "KPI20352505",
|
|
|
|
"kpiFlg": "mem"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"resId": "C5DC239D719ACAB61231ACED7CE68CD1",
|
|
|
|
"kpiId": "KPI7054BC34",
|
|
|
|
"kpiFlg": "cpu"
|
|
|
|
}
|
|
|
|
],
|
|
|
|
"type": "avg"
|
|
|
|
}
|
|
|
|
|
|
|
|
proxy.$http.post(`/api-web/ContrastAnalysis/getLineData`, p, function (res) {
|
|
|
|
if (res && res.map) {
|
|
|
|
let map = res.map;
|
|
|
|
|
|
|
|
let legend = map.legend;
|
|
|
|
//let units = map.units;
|
|
|
|
let xAxis = map.x;
|
|
|
|
|
|
|
|
let yArr = map.y;
|
|
|
|
|
|
|
|
//
|
|
|
|
let series = [];
|
|
|
|
legend.forEach(function (v, i) {
|
|
|
|
series.push({
|
|
|
|
name: v,
|
|
|
|
type: 'line',
|
|
|
|
data: yArr[i]
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
lineChart.value = {
|
|
|
|
legend: {
|
|
|
|
data: legend
|
|
|
|
},
|
|
|
|
xAxis: xAxis,
|
|
|
|
series: series
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 点击按钮搜索
|
|
|
|
let onBtnSearch = () => {
|
|
|
|
loeadTable(true);
|
|
|
|
}
|
|
|
|
|
|
|
|
let onReset = () => {
|
|
|
|
keyWords.value = '';
|
|
|
|
resTypeArr.value = [];
|
|
|
|
kpiTypeArr.value = [];
|
|
|
|
busTypeArr.value = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
let showDialogForm = (flg) => {
|
|
|
|
dialogFormVisible.value = flg;
|
|
|
|
}
|
|
|
|
|
|
|
|
let analysisChange = (val) => {
|
|
|
|
if (val && val === true && parentList.value.length == 0) {
|
|
|
|
// 加载数据
|
|
|
|
proxy.$http.post(`/api-web/ContrastAnalysis/selectScene`, {}, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
parentList.value = res.data;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let saveAnalysis = () => {
|
|
|
|
let formVal = form.value;
|
|
|
|
let parentName = formVal.parentName;
|
|
|
|
let parentId = formVal.parentId;
|
|
|
|
let name = formVal.scene.name;
|
|
|
|
let sort = formVal.scene.sort;
|
|
|
|
let timeScope = formVal.scene.timeScope;
|
|
|
|
let frequency = formVal.scene.frequency;
|
|
|
|
let resourceList = tabFirstList.value;
|
|
|
|
|
|
|
|
if(name == ''){
|
|
|
|
proxy.$global.showMsg("请输入场景名称！","warning");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(resourceList && resourceList.length == 0){
|
|
|
|
proxy.$global.showMsg("请添加资源！","warning");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let resList = resourceList.map(function (v) {
|
|
|
|
return {resId: v.resId, kpiId: v.kpiId, kpiFlg: v.flag,resType:v.resType,kpiUnit:v.kpiUnit}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let addParam = {
|
|
|
|
scene: [{
|
|
|
|
name: name,
|
|
|
|
desc: '',
|
|
|
|
sort: sort,
|
|
|
|
timeScope: timeScope,
|
|
|
|
frequency: frequency,
|
|
|
|
resourceList: resList
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
|
|
|
|
let url = '';
|
|
|
|
if (isAdd.value == false) {
|
|
|
|
if(parentName == ''){
|
|
|
|
proxy.$global.showMsg("请输入场景分类！","warning");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
addParam['parentName'] = parentName;
|
|
|
|
url = '/api-web/ContrastAnalysis/insertScene';
|
|
|
|
} else {
|
|
|
|
if(parentId == ''){
|
|
|
|
proxy.$global.showMsg("请选择场景分类！","warning");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
addParam['parentId'] = parentId;
|
|
|
|
url = '/api-web/ContrastAnalysis/updateNode';
|
|
|
|
}
|
|
|
|
|
|
|
|
proxy.$http.post(url, addParam, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
proxy.$global.showMsg("添加成功！");
|
|
|
|
setTimeout(function () {
|
|
|
|
window.top.location.href = window.top.location.origin + "/#/analysis/index"
|
|
|
|
}, 1500)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
if(!id){
|
|
|
|
activeName.value = 'second';
|
|
|
|
}
|
|
|
|
loeadTable();
|
|
|
|
|
|
|
|
// 先加载时间范围，然后在加载
|
|
|
|
loadTimeRange(function (defCode) {
|
|
|
|
form.value.scene.timeScope = defCode;
|
|
|
|
loadFrequency(defCode, function () {
|
|
|
|
if (frequencyArr.value.length > 0) {
|
|
|
|
form.value.scene.frequency = frequencyArr.value[0].ddicCode;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
console.log('onMounted');
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
height,
|
|
|
|
lineChart,
|
|
|
|
form,
|
|
|
|
columns,
|
|
|
|
tabFirstList,
|
|
|
|
tabSecondList,
|
|
|
|
addRes,
|
|
|
|
deleteRes,
|
|
|
|
onBtnSearch,
|
|
|
|
onReset,
|
|
|
|
|
|
|
|
getResType,
|
|
|
|
getKpiType,
|
|
|
|
getBizType,
|
|
|
|
keyWords,
|
|
|
|
|
|
|
|
loadFirstList,
|
|
|
|
loadSecondList,
|
|
|
|
|
|
|
|
activeName,
|
|
|
|
tabClick,
|
|
|
|
|
|
|
|
frequencyArr,
|
|
|
|
loadFrequency,
|
|
|
|
timeRangeArr,
|
|
|
|
loadTimeRange,
|
|
|
|
timeRangeChange,
|
|
|
|
|
|
|
|
isAdd,
|
|
|
|
analysisChange,
|
|
|
|
dialogFormVisible,
|
|
|
|
showDialogForm,
|
|
|
|
saveAnalysis,
|
|
|
|
parentList
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
...
|
...
|
|
