w-vue-middle
Version:
统一公共服务组件
392 lines (376 loc) • 11.3 kB
JavaScript
/*
* @Author: Jason Liu
* @Date: 2023-08-10 14:10:36
* @Desc:
*/
import SeeksRelationGraph from 'relation-graph';
const jsonView = require('vue-json-views').default;
const glSqlEditor = require('w-vue-middle/components/glSqlEditor/index.vue').default;
// const DataChainSource = require('../dataChainSource/index.vue').default;
const { quotaChain: DataChainSource } = require('../dataChainSource/index.js');
const $dataService = require('../api/dataService/index.js');
export default {
components: { glSqlEditor, jsonView, SeeksRelationGraph, DataChainSource },
props: {
value: {
type: Object,
default: {
apiCallRecordId: undefined, //监控记录ID，有记录ID话。另外两个参数不需要
apiPath: undefined, //API地址
requestId: undefined, //请求ID
value: undefined, // API字段值
},
},
columnName: {
type: String,
default: undefined,
},
//主键参数内容
primaryKeyJson: {
type: String,
default: '{}',
},
sheetKey: {
type: String,
default: 'output',
},
},
data() {
return {
chainParams: {
apiId: this.value.apiCallRecordId,
type: 'API',
columnName: undefined,
primaryKeyJson: this.primaryKeyJson,
apiValue: this.value.value, // 字段值
},
isFullScreen: false,
sendTab: this.sheetKey,
valid: true,
loading: false,
visible: this.value,
showDetail: false,
setpNode: {
name: undefined,
sql: undefined,
},
//参数列表
params: [],
//输出列表
outList: [],
headers: [],
lastAppId: undefined,
testData: {
data: {},
},
graphOptions: {
debug: false,
backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
backgrounImageNoRepeat: true,
layouts: [
{
label: $t('树'),
layoutName: 'tree',
layoutClassName: 'seeks-layout-center',
defaultNodeShape: 0,
defaultLineShape: 1,
from: 'left',
// 通过这4个属性来调整 tree-层级距离&节点距离
min_per_width: 370,
max_per_width: undefined,
min_per_height: '140',
max_per_height: undefined,
levelDistance: '360,360,300,300', // 如果此选项有值，则优先级高于上面那4个选项
},
],
defaultLineMarker: {
markerWidth: 120,
markerHeight: 12,
refX: 6,
refY: 6,
data: 'M2,2 L10,6 L2,10 L6,6 L2,2',
},
allowShowMiniToolBar: false,
defaultExpandHolderPosition: 'right',
defaultNodeShape: 1,
defaultNodeWidth: '260',
defaultNodeHeight: '130',
defaultLineShape: 4,
defaultJunctionPoint: 'lr',
defaultNodeBorderWidth: 0,
defaultLineColor: 'rgba(1, 1, 1, .5)',
defaultNodeColor: '#eef2fd',
},
selectKey: 3,
api: {
//基础信息
apiId: undefined,
apiMode: 'base', //API模式，base:基础API;arrange:API编排
apiName: undefined, //API名称，必输
apiPath: undefined, //API地址，必输
apiProtocol: 'http', //协议 http、https
catalogId: undefined, //保存目录,必输
apiDesc: undefined, //API描述
configParms: [], //设置参数
highgrade: [], //高级设置，高级设置和”设置参数有联动关系“
orchestrateNodesInfo: '',
},
sqlList: [], //sql查看
errorLog: '', //异常日志
apiParam: undefined,
};
},
created() {
this.getMonitorDetail();
},
methods: {
/**
* @Author: Jason Liu
* @description: 获取API详情
*/
getApiDetail(apiId) {
$dataService
.findApiById({
apiId: apiId,
})
.then((req) => {
this.api = req.data;
//数据安全处理
if (!this.api.configParms) {
this.api.configParms = [];
}
if (!this.api.highgrade) {
this.api.highgrade = [];
}
});
},
/**
* @Author: Jason Liu
* @description: 获取请求参数
*/
getParamsList(apiId) {
this.params = [];
this.testData = {
data: {},
};
$dataService
.getTestParam({
apiId: apiId,
type: '',
})
.then((req) => {
let apiParam = this.apiParam;
this.params = req.data.paramList.map((param) => {
for (let it in apiParam) {
if (param.code == it) {
if (apiParam[it]) {
param.value = apiParam[it];
param.lock = true;
} else {
param.value = undefined;
}
}
}
return param;
});
const maps = (trees = []) => {
return trees.map((item) => {
return {
...item.tableBody,
label: item.label,
id: item.id,
parentId: item.parentId,
labelDetail: item.labelDetail,
children: maps(item.children),
};
});
};
this.outList = maps(req.data.responseTrees);
this.headers = req.data.headers;
});
},
/**
* @Author: Jason Liu
* @description: 获取API详情
*/
getMonitorDetail() {
if (this.value) {
const { apiPath, requestId } = this.value;
if (this.value.apiCallRecordId || (apiPath && requestId)) {
this.valid = true;
this.loading = true;
delete this.value.primaryKeyJson;
$dataService
.apiCallDetail(this.value)
.then((req) => {
if (req.data) {
const { apiParam, sqlDetailList, errorLog, apiId, apiCallRecordId } = req.data;
this.chainParams = {
apiId: apiCallRecordId,
type: 'API',
columnName: this.columnName,
primaryKeyJson: this.primaryKeyJson,
apiValue: this.value.value,
};
this.getApiDetail(apiId);
this.apiParam = JSON.parse(apiParam);
this.getParamsList(apiId);
this.sqlList = sqlDetailList;
this.errorLog = errorLog;
// sql查看list
this.sqlList = (sqlDetailList || []).map((item) => {
item.sql = item.sqlStateMent;
return item;
});
// 异常日志
this.errorLog = errorLog || $t('异常日志为空');
} else {
this.valid = false;
}
})
.catch(() => {
this.valid = false;
})
.finally(() => {
this.loading = false;
});
} else {
this.valid = false;
}
} else {
this.valid = false;
}
},
/**
* @Author: Jason Liu
* @description: 发送测试请求
*/
sendTest() {
if (this.sendVerify()) {
//验证通过
this.loading = true;
let sendParam = {
apiId: this.api.apiId,
type: this.api.apiMode, //row.source.apiMode == 'base'
// arrangeApiId: this.arrangeApiId,
};
this.params.forEach((param) => {
if (param.value && param.value != '' && param.value != null && param.value != undefined) {
sendParam[param.code] = param.value;
}
});
$dataService
.getApiTestData(sendParam)
.then((req) => {
this.testData = req.data;
this.sendTab = 'flow';
this.setSqlMap('flow');
})
.finally(() => {
this.loading = false;
});
}
},
/**
* @Author: Jason Liu
* @description: 设置sql映射
*/
setSqlMap(key) {
this.$nextTick(() => {
if (this.$refs.sqlMap && key == 'flow') {
var __graph_json_data = {
rootId: undefined,
nodes: [],
links: [], //{ from: "N1", to: "N2", text: "" }
};
const cleanData = (dept, first, pid = 'root', i = 0) => {
let node = {
id: dept.domainName + '_' + pid + '_' + i,
text: dept.domainName || $t('请求'),
data: {
processedSql: dept.processedSql,
excuteStatus: dept.excuteStatus,
sqlTime: dept.sqlTime,
},
width: undefined,
height: undefined,
color: undefined,
};
if (first) {
// node.width = 220;
// node.height = 80;
__graph_json_data.rootId = node.id;
} else {
__graph_json_data.links.push({
from: pid,
to: node.id,
text: undefined,
});
}
__graph_json_data.nodes.push(node);
if (dept.children && dept.children.length > 0) {
dept.children.forEach((item, i) => {
cleanData(item, false, node.id, i);
});
}
};
cleanData(this.testData.sqlProcess, true);
this.$refs.sqlMap.setJsonData(__graph_json_data, (seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
});
}
});
},
/**
* @Author: Jason Liu
* @description: 验证
*/
sendVerify() {
let pass = true;
let nullList = this.params.filter((row) => {
return !row.value;
});
if (nullList.length == this.params.length) {
pass = false;
this.$message.warning($t('请至少输入一个参数条件'));
}
return pass;
},
/**
* @Author: Jason Liu
* @description: 显示步骤详情
*/
showStepDetail(node) {
this.showDetail = true;
this.setpNode = {
name: node.text,
sql: node.data.processedSql,
};
},
/**
* @Author: Jason Liu
* @description: 复制sql
*/
copySql(item) {
if (item) {
this.$copyClipboard(item);
} else {
this.$copyClipboard(this.setpNode.sql);
}
},
},
watch: {
value(val) {
this.getMonitorDetail();
},
primaryKeyJson() {
this.chainParams.primaryKeyJson = this.primaryKeyJson;
},
columnName() {
this.chainParams.columnName = this.columnName;
},
sheetKey(val) {
this.sendTab = val;
},
},
};