Skip to content

E
ETL-admin
Commit b36ea399 by 莫晓莉
Options

执行作业，区分了转换和任务，任务是有弹窗，启动执行显示日志和作业度量

parent 48317d5d
Showing with 1370 additions and 26 deletions
src/api/kettle/file.js
......@@ -254,6 +254,35 @@ export function doTrans(data) {
method: 'post'
})
}
// 执行作业转换
export function initRun(data) {
return request({
url: 'etlweb/job/initRun',
data,
method: 'post'
})
}
// 执行作业--1
export function jobRun(data) {
return request({
url: 'etlweb/job/run',
data,
method: 'post'
})
}
// 执行作业--2
export function jobResult(data) {
return request({
url: 'etlweb/job/result',
data,
method: 'post'
})
}
//删除资源库
export function drop(data) {
return request({
......@@ -310,6 +339,15 @@ export function getVariableType(data) {
method: 'post'
})
}
// 获取Starting point of job
export function getEntries(data) {
return request({
url: 'etlweb/job/entries',
data,
method: 'post'
})
}
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
......@@ -915,6 +915,10 @@
<server-dialog ref="myServer" :serverDialogVisible.sync="serverDialogVisible" ></server-dialog>
<!-- 子服务器结束 -->
<!-- 执行作业开始 -->
<job-run ref="jobRun" :jobRunVisible.sync="jobRunVisible" :saveOutputDialog="saveOutputDialog" :doubleClickCell="doubleClickCell"></job-run>
<!-- 执行作业结束 -->
......@@ -1022,6 +1026,7 @@ export default {
data() {
return {
jobRunVisible:false,//作业转换弹窗
serverDialogVisible:false,//子服务器弹窗
curFileType:"transformation",//当前点击的文件的类型，默认是转换文件--mxl
nodeData:[],
......@@ -1207,8 +1212,8 @@ export default {
watch: {
blankCanvas(n, o) {
this.monitorCanvas = n;
// this.setShowXml();
this.setXml();
this.setShowXml();
// this.setXml();
this.getXml();
},
// blankCanvas:{
......@@ -1244,27 +1249,27 @@ export default {
methods: {
// setShowXml() {
// this.graph.getModel().beginUpdate();
// try {
// var doc = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
// var codec = new mxCodec(doc);
// var style = new Object();
// style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
// style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
// style[mxConstants.STYLE_IMAGE] = 'editors/images/bigicon/start_event_empty.png';
// style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
// style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
// style[mxConstants.STYLE_FONTCOLOR] = '#000000';
// style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_CENTER;
// this.graph.getStylesheet().putCellStyle('start-s', style);
// codec.decode(doc.documentElement, this.graph.getModel());
// } finally {
// this.graph.getModel().endUpdate();
// }
// },
setShowXml() {
this.graph.getModel().beginUpdate();
try {
var doc = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
var codec = new mxCodec(doc);
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'editors/images/bigicon/start_event_empty.png';
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_CENTER;
this.graph.getStylesheet().putCellStyle('start-s', style);
codec.decode(doc.documentElement, this.graph.getModel());
} finally {
this.graph.getModel().endUpdate();
}
},
getTheField(){
this.form.file = JSON.stringify(this.file)
......@@ -1664,7 +1669,7 @@ previousField(){
console.log(jsonArray,'jsonArray');
jsonArray.forEach(img=>{
label += '<img src="'+this.etlWeb + img + '" width="16" height="16" />';
label += '<img src="'+img + '" width="16" height="16" />';
})
return label;
......@@ -2479,8 +2484,14 @@ previousField(){
// 执行转换
doTrans() {
this.transGraphVisible = !this.transGraphVisible;
this.$refs.transRef.clickFun(this.graph);
if(this.curFileType=="transformation"){
this.transGraphVisible = !this.transGraphVisible;
this.$refs.transRef.clickFun(this.graph);
}else if(this.curFileType=="job"){
this.jobRunVisible=!this.jobRunVisible;
this.$refs.jobRun.clickFun(this.graph);
}
},
......
src/views/dialogs-components/global/job-run-result/index.js 0 → 100644
import main from './main.vue'
export default main
\ No newline at end of file
src/views/dialogs-components/global/job-run-result/main.vue 0 → 100644
<template>
<div>
<el-dialog
title="作业"
:visible.sync="jobResultVisibility"
width="1200px"
:before-close="handleClose"
top="10%"
append-to-body>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="作业度量" name="first">
<el-table
:header-cell-style="{'text-align':'center'}"
:data="tableDataResult"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
align="center"
prop="name"
label="任务/任务条目"
sortable
width="180">
</el-table-column>
<el-table-column
align="center"
prop="comment"
label="注释"
sortable
width="180">
</el-table-column>
<el-table-column
align="center"
prop="result"
label="结果">
</el-table-column>
<el-table-column
align="center"
prop="reason"
label="原因">
</el-table-column>
<el-table-column
align="center"
prop="fileName"
label="文件名">
</el-table-column>
<el-table-column
align="center"
prop="number"
label="数量">
</el-table-column>
<el-table-column
align="center"
prop="logDate"
label="日志日期">
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="日志" name="second" >
<!-- <div style="height:50vh;overflow-y:auto;">{{mylog}}</div> -->
<div style="height:50vh;overflow-y:auto;white-space:pre-line;" v-html="mylog"></div>
</el-tab-pane>
<el-tab-pane label="历史" name="third " :disabled="true">
3333
</el-tab-pane>
<el-tab-pane label="Metrics" name="fourth" :disabled="true">
4444
</el-tab-pane>
</el-tabs>
<!-- </el-form> -->
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">确定</el-button>
<!-- <el-button type="primary" @click.native="confirm()">确 定</el-button> -->
</span>
</el-dialog>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
doTrans,//获取表输出
doRun,//启动
} from "@/api/kettle/file";
export default ({
name: "job-run-result",
data(){
return{
hasChildren:true,
defaultProps: {
label: "name",
children: "children",
},
// newGraph:{},
// finished:false,//只有执行成功才显示日志
// executionId:null,//执行转换返回id
// mylog:'',//日志
// field:false,//编辑弹窗
// checkedCities: ['上海', '北京'],
// editDia:false,//编辑表字段
// fieldForm:{},//编辑弹窗
// radioTreaty:'0',
// tableOutForm:{
// commit: "1000",
// connection: "mysql---test",
// fields: "[]",
// ignore_errors: "N",
// partitioning_daily: "N",
// partitioning_enabled: "N",
// partitioning_field: "",
// partitioning_monthly: "Y",
// return_field: undefined,
// return_keys: "N",
// schema: "test",
// specify_fields: "N",
// table: "r_database",
// tablename_field: "",
// tablename_in_field: "N",
// tablename_in_table: "Y",
// truncate: "N",
// use_batch: "Y",
// },
// stepName:{},
activeName:'first',
// engine:[],
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
}
},
props:["jobResultVisibility","tableDataResult","mylog"],
mounted(){
},
created(){
},
methods:{
// load(tree, treeNode, resolve) {
// setTimeout(() => {
// resolve([
// {
// id: 31,
// date: '2016-05-01',
// name: '王小虎',
// address: '上海市普陀区金沙江路 1519 弄'
// }, {
// id: 32,
// date: '2016-05-01',
// name: '王小虎',
// address: '上海市普陀区金沙江路 1519 弄'
// }
// ])
// }, 1000)
// },
clickFun(graph){
console.log(graph,1)
this.newGraph = graph
},
handleClose(){
this.$emit("update:jobResultVisibility", false);
this.activeName='first';
},
//打开弹窗执行方法
openFunc(){
this.doRun();
// if(this.executionId !=''){
// this.doTrans();
// }
},
// // 执行
// doTrans(){
// let pamer = new FormData(); // 创建form对象
// var myexecutionId=this.executionId;
// // "62fd0f2a89b0401bbe6e7aabbb842b56"
// pamer.append("executionId", myexecutionId);
// doTrans(pamer).then((res) => {
// if(res){
// console.log('返回执行的数据====',res);
// if(res.finished){
// // this.tableData=res;
// this.stepMeasure=res.stepMeasure
// this.mylog=res.log;
// this.finished=res.finished;//执行转换以后
// let tableKeyArr = ["name", "num", "r", "x", "i", "o", "u", "f", "e", "a", "t", "s", "pio"]
// let tableData = [] //表格数据
// res.stepMeasure.forEach(item=>{
// let newObj = {}
// item.forEach((v,i)=>{
// newObj[tableKeyArr[i]] = v
// })
// tableData.push(newObj)
// })
// this.tableData = tableData
// }else{
// setTimeout(() => {
// this.doTrans();
// }, 100);
// }
// }
// })
// },
// // 启动
// doRun(){
// // 画布xml转码
// const codec = new mxCodec();
// const encodedModel = codec.encode(this.newGraph.getModel());
// console.log(encodedModel,46546465456);
// var myXmlVal = mxUtils.getXml(encodedModel);
// let pamer = new FormData(); // 创建form对象
// pamer.append("graphXml", myXmlVal);
// var executParam={
// "exec_local":"Y",
// "exec_remote":"N",
// "pass_export":"N",
// "exec_cluster":"N",
// "cluster_post":"Y",
// "cluster_prepare":"Y",
// "cluster_start":"Y",
// "cluster_show_trans":"N",
// "parameters":[
// ],
// "variables":[
// {
// "name":"Internal.Entry.Current.Directory",
// "value":"/"
// },
// {
// "name":"Internal.Job.Filename.Directory",
// "value":"Parent Job File Directory"
// },
// {
// "name":"Internal.Job.Filename.Name",
// "value":"Parent Job Filename"
// },
// {
// "name":"Internal.Job.Name",
// "value":"Parent Job Name"
// },
// {
// "name":"Internal.Job.Repository.Directory",
// "value":"Parent Job Repository Directory"
// }
// ],
// "arguments":[
// ],
// "safe_mode":"N",
// "log_level":"Basic",
// "clear_log":"Y",
// "gather_metrics":"Y",
// "log_file":"N",
// "log_file_append":"N",
// "show_subcomponents":"Y",
// "create_parent_folder":"N",
// "remote_server":"",
// "replay_date":""
// }
// // JSON.parse(executParam);
// pamer.append("executionConfiguration",JSON.stringify(executParam));
// doRun(pamer).then((res) => {
// if(res.success){
// console.log('返回run的id====',res.message);
// this.executionId=res.message;
// if(this.executionId){
// this.doTrans();
// }
// }
// })
// }
renderContent(h, { node, data }) {
console.log(node,11);
console.log(data,22);
let titie = "";
let wid = "";
if (node.level != 1) {
wid = 280 - (node.level - 1) * 18 + "px";
titie = h(
"span",
{
style: {
display: "inline-block",
width: wid,
height: "50px",
"line-height": "50px"
}
},
node.label
);
} else {
titie = (
<span style="display:inline-block;width:280px;line-height: 50px;">
{node.label}
<i
class="el-icon-circle-plus"
style="color: #2972FA; margin-left: 9px;"
on-click={() => this.addSubDis(node, data)}
></i>
</span>
);
}
return (
<div class="orgBox" style="width:100%">
<span class="custom-tree-node" style="display: flex;">
{titie}
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;border-bottom: 1px solid #d4d9e1;">
{data.comment}
</span>
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;border-bottom: 1px solid #d4d9e1;">
{data.result}
</span>
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;border-bottom: 1px solid #d4d9e1;">
{data.reason}
</span>
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;border-bottom: 1px solid #d4d9e1;">
{data.fileName}
</span>
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;border-bottom: 1px solid #d4d9e1;">
{data.number}
</span>
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;border-bottom: 1px solid #d4d9e1;">
{data.logDate}
</span>
</span>
</div>
);
}
}
})
</script>
<style >
.tree-super {
padding: 11px 20px;
}
.tree-super .titie {
width: 100%;
overflow: hidden;
display: flex;
box-sizing: border-box;
}
.tree-super ul{
margin:0;
padding:0;
}
.tree-super li {
list-style: none;
height: 40px;
line-height: 40px;
background-color: #ebedf8;
text-align: center;
border-left: 1px solid #d4d9e1;
}
.tree-super li:first-child {
padding-left: 22px;
height: 40px;
line-height: 40px;
width: 303px;
background-color: #ebedf8;
box-sizing: border-box;
border-left: 0;
}
.tree-super li:nth-child(n + 2) {
flex: 1;
}
</style>
\ No newline at end of file
src/views/dialogs-components/global/job-run/index.js 0 → 100644
import main from './main.vue'
export default main
\ No newline at end of file
src/views/dialogs-components/global/job-run/main.vue 0 → 100644
<template>
<div>
<el-dialog
title="执行作业"
:visible.sync="jobRunVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form ref="refForm" :model="myForm" label-width="200px">
<!-- <el-form-item label="步骤名称:">
<el-input v-model="myForm.label"></el-input>
</el-form-item> -->
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="基本配置" name="first">
<div style="position:relative;border:1px solid #b5b8c8;margin-top:15px;padding:15px 0;">
<div style="position:absolute;top:-15px;left:20px;color:#15428b;background-color:#fff;padding:5px 10px;">执行方式</div>
<el-radio-group v-model="radioTreaty" style="width:100%;" @change="radioChoose">
<el-form-item label="本地执行:">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="0" >备选项</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="远程执行:">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="1" >备选项</el-radio>
</el-col>
</el-row>
</el-form-item>
</el-radio-group>
<!-- <el-form-item label="属性文件名:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.filename"></el-input>
</el-col>
</el-row>
</el-form-item> -->
<el-form-item label="远程主机:">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.remote_server" style="width: 100%" :disabled="myForm.exec_remote=='Y'? false :true">
<el-option v-for="(item,index) in serverList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="将导出的文件发送到远程服务器:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.pass_export" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;margin-top:15px;padding:15px 0;margin-bottom:15px;">
<div style="position:absolute;top:-15px;left:20px;color:#15428b;background-color:#fff;padding:5px 10px;">细节</div>
<el-form-item label="使用安全模式::">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.safe_mode" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Gather performance metrics:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.gather_metrics" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="日志级别:">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.log_level" style="width: 100%">
<el-option v-for="(item,index) in logLevelList" :key="index" :label="item.desc" :value="item.code"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="重放日期(yyyy/MM/dd HH:mm:ss):">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.replay_date"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Starting point of job:">
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="myForm.start_copy_name" style="width: 100%">
<el-option v-for="(item,index) in entriesList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</div>
<!-- <el-radio-group v-model="myForm.specification_method" style="width:100%;">
<div style="position:relative;border:1px solid #b5b8c8;">
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="filename" >作业文件名</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="myForm.filename" :disabled="myForm.specification_method=='filename'? false:true"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button :disabled="myForm.specification_method=='filename'? false:true" size="mini" @click="chooseFile('filename')">选择</el-button></el-col
>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;margin:10px auto;">
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="rep_name" >通过目录与名称指定转换</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10" label-width="100px">
<el-col :span="22">
<el-input :disabled="myForm.specification_method=='rep_name'? false:true" v-model="myForm.directory"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px">
<el-row :gutter="10">
<el-col :span="20">
<el-input :disabled="myForm.specification_method=='rep_name'? false:true" v-model="myForm.jobname"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button :disabled="myForm.specification_method=='rep_name'? false:true" size="mini" @click="chooseExportTreeDialog('directory','jobname')">选择</el-button></el-col
>
</el-row>
</el-form-item>
</div>
<div style="position:relative;border:1px solid #b5b8c8;">
<el-form-item label-width="100px" >
<el-row :gutter="10">
<el-col :span="23">
<el-radio label="rep_ref" >通过引用指定作业</el-radio>
</el-col>
</el-row>
</el-form-item>
<el-form-item label-width="100px" >
<el-row :gutter="10">
<el-col :span="20">
<el-input :disabled="myForm.specification_method=='rep_ref'? false:true" v-model="myForm.referenceName"></el-input>
</el-col>
</el-row>
</el-form-item>
</div>
<el-button size="mini" style="margin-top:10px;">新建转换</el-button>
</el-radio-group> -->
</el-tab-pane>
<el-tab-pane label="命名参数" name="second">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClickUpdate">新增参数</el-button>
<el-button style="padding: 3px 0" type="text" @click="deleteFieldsUpdate">删除参数</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields('update')">获取字段</el-button> -->
</div>
<table-list :tableHead="tableHeadUpdate" :tableData="tableDataUpdate" :field.sync="editDiaUpdate" :fieldClick="fieldClickUpdate"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="fieldUpdate"
width="500px"
:before-close="handleCloseEditUpdate"
append-to-body>
<el-form ref="form" :model="fieldFormUpdate" label-width="80px">
<el-form-item label="命名参数:">
<el-input v-model="fieldFormUpdate.name"></el-input>
</el-form-item>
<el-form-item label="值:">
<el-input v-model="fieldFormUpdate.value"></el-input>
</el-form-item>
<el-form-item label="默认值:">
<el-input v-model="fieldFormUpdate.default_value"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="Update = false">取 消</el-button>
<el-button type="primary" @click="addFieldUpdate">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
<el-tab-pane label="变量" name="third">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClick(true)">新增参数</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields">获取字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFields">删除参数</el-button>
</div>
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="field"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form1" :model="fieldForm" label-width="80px">
<el-form-item label="变量:">
<el-input v-model="fieldForm.name"></el-input>
</el-form-item>
</el-form>
<el-form ref="form1" :model="fieldForm" label-width="80px">
<el-form-item label="值:">
<el-input v-model="fieldForm.value"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
<el-tab-pane label="位置参数" name="fourth ">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClickLo(true)">新增参数</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="inputOutputFields">获取字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFieldsLo">删除参数</el-button>
</div>
<table-list ref="tableDia" :tableHead="tableHeadLo" :tableData="tableDataLo" :field.sync="editDia" :fieldClick="addFieldLo"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="fieldLo"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form1" :model="fieldFormLo" label-width="80px">
<el-form-item label="位置参数:">
<el-input v-model="fieldFormLo.name"></el-input>
</el-form-item>
<el-form-item label="值:">
<el-input v-model="fieldFormLo.value"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addFieldLo">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
</el-tabs>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="jobRunVisible = false">取 消</el-button>
<el-button type="primary" @click="jobRun">确 定</el-button>
</span>
</el-dialog>
<!-- 浏览选择文件 -->
<file-tree :fileDialogVisible.sync="fileDialogVisible" :excelForm="myForm" :formName="formName"></file-tree>
<!-- 数据库浏览 -->
<export-tree-choose ref="exDialog" :exportDialogVisible.sync="exportDialogVisible" :myForm="myForm" :formName="formName" :directoryPath="choosePath"></export-tree-choose>
<!-- 作业执行结果 -->
<job-run-result ref="jubResultDialog" :jobResultVisibility.sync="jobResultVisibility" :tableDataResult="tableDataResult" :mylog="mylog"></job-run-result>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
formatFunc,//获取已经创建的数据库列表
getCodeList,//获取编码列表
getFontname,//表头字体
getFontunderline,//表头字体下划线
getFontoriention,//表头字体方向
getFontcolor,//表头字体颜色
getFontalignment,//表头对齐方式
// getFontname,//数据字体
getValueMetaStore,
getValueFormatStore,
inputOutputFields,
getLogLevelList,//获取日志级别列表
initRun,
getEntries,
jobRun,
jobResult
} from "@/api/kettle/file";
export default {
name: "job-run",
data(){
return{
mylog:'',
finished:false,//只有执行成功才显示日志
jobMeasure:[],
log:'',
executionId:null,//执行转换返回id
entriesList:[],//
radioTreaty:'0',
serverList:[],//服务器列表
logLevelList:[],//日志级别列表
exportDialogVisible:false,//导出资源库
radioTreaty:'0',
myForm:{},//自定义
newGraph:{},
metaStoreList:[],//类型
formatStoreList:[],//字段格式
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
fieldFormLo:{},//编辑弹窗--位置参数
fieldUpdate:false,//更新弹窗
fieldLo:false,//更新弹窗
editDiaUpdate:false,//更新字段
fieldFormUpdate:{},//更新弹窗
fileDialogVisible:false,//选择文件夹弹窗
formName:'',
choosePath:'',
stepName:{
name:"Excel输出"
},
activeName:'first',
// 表头数据
tableHead:[
{
column_name: "name",column_comment:"变量"
},
{
column_name: "value",column_comment:"值"
},
],
// 表格数据
tableData: [
],
// 表头数据
tableHeadLo:[
{
column_name: "name",column_comment:"位置参数"
},
{
column_name: "value",column_comment:"值"
},
],
// 表格数据
tableDataLo: [
],
formatTimeList:[],//时间日期格式
codeList:[],//编码
headFontList:[],//表头字体
headFontUnderlineList:[],//表头字体下划线
entionList:[],//表头字体方向
colorList:[],//表头字体颜色
alignList:[],//表头对齐方式
// fontNameList:[]//数据字体
// 更新字段start------------
// 表头数据
tableHeadUpdate:[
{
column_name: "name",column_comment:"命名参数"
},
{
column_name: "value",column_comment:"值"
},
{
column_name: "default_value",column_comment:"默认值"
},
],
// 表格数据
tableDataUpdate: [
],
// 更新字段end-------------------
tableHeadResult:[
{
column_name: "name",column_comment:"任务/任务条目"
},
{
column_name: "comment",column_comment:"注释"
},
{
column_name: "result",column_comment:"结果"
},
{
column_name: "reason",column_comment:"原因"
},
{
column_name: "fileName",column_comment:"文件名"
},
{
column_name: "number",column_comment:"数量"
},
{
column_name: "logDate",column_comment:"日志日期"
},
],
tableDataResult: [{
name: '',
comment: '',
result:'',
reason:'',
fileName:'',
number:'',
logDate:'',
},
],
jobResultVisibility:false,//执行结果弹窗
}
},
props:["jobRunVisible","excelOutPutVisible","saveOutputDialog","doubleClickCell"],
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
// jobWorkFormSend(val){
// console.log("回显的表单数据===",val);
// this.myForm=val;
// if(val.arguments){
// var ny=JSON.parse(val.arguments);
// this.tableData=ny;
// }
// if(val.parameters){
// var na=JSON.parse(val.parameters);
// this.tableDataUpdate=na;
// }
// },
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
created(){
this.getLogLevelList();//获取日志级别
},
methods:{
radioChoose(val){
let that = this
that.myForm.exec_local=(val==='0')?'Y':'N';
that.myForm.exec_remote=(val==='0')?'N':'Y';
console.log(that.myForm,33);
},
// 获取日志级别
getLogLevelList(){
var formData = new FormData();
formData.append('query', '');
getLogLevelList(formData).then(res=>{
if (res) {
console.log('获取日志级别==',res);
this.logLevelList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
getEntries(){
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());
console.log(encodedModel,46546465456);
var myXmlVal = mxUtils.getXml(encodedModel);
let pamer = new FormData(); // 创建form对象
pamer.append("graphXml", myXmlVal);
getEntries(pamer).then(res=>{
if (res) {
console.log('获取Starting point of job==',res);
this.entriesList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
clickFun(graph){
console.log(graph,1)
this.newGraph = graph;
this.initRun();
this.getSlaveServerStore();
this.getEntries();
},
handleClose(){
this.$emit("update:jobRunVisible", false);
},
//选择文件夹
chooseFile(name){
console.log("选择文件浏览----",name);
this.formName=name;//当前哪个属性需要选择文件夹
this.fileDialogVisible=true;
},
confirm(){
// console.log('步骤名称==：',this.stepName);
// this.excelForm.label=this.stepName.name;
this.myForm.parameters=JSON.stringify(this.tableDataUpdate);//命名参数
this.myForm.variables=JSON.stringify(this.tableData);//变量
this.myForm.arguments=JSON.stringify(this.tableDataLo);//位置参数
console.log('弹窗数据:',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//新增或者编辑弹窗
fieldClickLo(state, val) {
this.fieldLo = !this.fieldLo;
this.dataState = state;
if (state) {
this.fieldFormLo = {};
} else {
this.fieldFormLo = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
// 字段--位置参数
addFieldLo() {
this.fieldLo = !this.fieldLo;
console.log('添加的字段===',this.fieldFormLo);
if (this.dataState) {
this.tableDataLo.push(this.fieldFormLo);
}
},
// 获取字段
inputOutputFields(){
if(this.doubleClickCell){
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
// this.fieldsList2=res;
this.tableData=res;
})
},
//删除全部
deleteFields(){
this.tableData=[];
},
//删除全部
deleteFieldsLo(){
this.tableDataLo=[];
},
//删除全部
deleteFieldsUpdate(){
this.tableDataUpdate=[];
},
//新增或者编辑弹窗-----更新start------------------
fieldClickUpdate(state, val) {
this.fieldUpdate = !this.fieldUpdate;
this.dataState = state;
if (state) {
this.fieldFormUpdate = {};
} else {
this.fieldFormUpdate = val;
}
},
//关闭编辑的弹窗
handleCloseEditUpdate(){
this.fieldUpdate = !this.fieldUpdate;
},
// 字段
addFieldUpdate() {
this.fieldUpdate = !this.fieldUpdate;
console.log('添加的字段===',this.fieldFormUpdate);
if (this.dataState) {
this.tableDataUpdate.push(this.fieldFormUpdate);
}
},
// -----更新end------------------
// 变量新增--start
// 变量新增---end
// 作业start--------------------------------
chooseExportTreeDialog(path,name){
this.choosePath=path;
this.formName=name;//当前哪个属性需要选择文件夹
console.log('导出资源库====');
this.exportDialogVisible=true;
},
// 作业end----------------------------------
//获取保存在画布上的服务器列表
getSlaveServerStore() {
var cell = this.newGraph.getDefaultParent(), data = [];
if(cell.getAttribute('slaveServers') != null)
data = JSON.parse(cell.getAttribute('slaveServers'));
console.log('获取服务器列表===',data);
this.serverList=data;
},
// 执行作业
initRun(){
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());
console.log(encodedModel,46546465456);
var myXmlVal = mxUtils.getXml(encodedModel);
let pamer = new FormData(); // 创建form对象
pamer.append("graphXml", myXmlVal);
initRun(pamer).then(res=>{
if (res) {
this.myForm=res;
// this.chooseParams(res);
}else {
this.$message.error(res.errMsg)
}
})
},
//选出要传给后台的参数集合便于编辑方法 check
// chooseParams(objParams) {
// var newObject = {};
// for (var key in this.myForm) {
// console.log(key, this.myForm[key]);
// newObject[key] = objParams[key];
// }
// console.log("新的对象====", newObject);
// this.myForm = newObject;
// console.log("编辑赋值当前对象====", this.myForm);
// },
jobRun(){
this.myForm.parameters=this.tableDataUpdate;//命名参数
this.myForm.variables=this.tableData;//变量
this.myForm.arguments=this.tableDataLo;//位置参数
console.log('弹窗数据:',this.myForm);
// this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());
console.log(encodedModel,46546465456);
var myXmlVal = mxUtils.getXml(encodedModel);
let pamer = new FormData(); // 创建form对象
pamer.append("graphXml", myXmlVal);
// var p={"exec_local":"Y","exec_remote":"N","pass_export":"N","parameters":[],"variables":[],"arguments":[],"safe_mode":"N","log_level":"Basic","clear_log":"Y","start_copy_nr":0,"gather_metrics":"N","expand_remote_job":"N","remote_server":"","replay_date":"","start_copy_name":""};
// var m={"exec_local":"Y","exec_remote":"N","pass_export":"N","parameters":[],"variables":[],"arguments":[],"safe_mode":"N","log_level":"Basic","clear_log":"Y","start_copy_nr":0,"gather_metrics":"N","expand_remote_job":"N","remote_server":"","replay_date":"","start_copy_name":""}
// var o={"parameters":[],"variables":[],"arguments":[],"exec_local":"N","exec_remote":"Y","safe_mode":"Y","gather_metrics":"Y","remote_server":"127.0.0.1","log_level":"Nothing","replay_date":"00","start_copy_name":" START 3"}
pamer.append('executionConfiguration', JSON.stringify(this.myForm));
// pamer.append('executionConfiguration', JSON.stringify(p));
jobRun(pamer).then(res=>{
if (res.success) {
console.log('返回run的id====',res.message);
this.executionId=res.message;
if(this.executionId){
this.jobResult();
}
}else {
this.$message.error(res.errMsg)
}
})
},
jobResult(){
let pamer = new FormData(); // 创建form对象
var myexecutionId=this.executionId;
pamer.append("executionId", myexecutionId);
jobResult(pamer).then((res) => {
if(res){
console.log('返回执行的数据====',res);
// if(res.finished){
if(res){
this.jobMeasure=res.jobMeasure
this.mylog=res.log;
// 解码
this.mylog=decodeURIComponent(res.log);
this.finished=res.finished;//执行转换以后
// let tableKeyArr = ["name", "comment", "result", "reason", "fileName", "number", "logDate"]
// let tableData = []
// res.jobMeasure.forEach(item=>{
// let newObj = {}
// item.forEach((v,i)=>{
// newObj[tableKeyArr[i]] = v
// })
// tableData.push(newObj)
// })
var tableDataResultmy= res.jobMeasure;
tableDataResultmy.forEach((v,i)=>{
v.id="id_"+(i+1);
if(v.children){
v.children.forEach( (item,j)=>{
item.id="key_"+(j+1);
})
}
})
console.log(tableDataResultmy,999999);
this.tableDataResult = tableDataResultmy;
this.jobResultVisibility=true;
}else{
setTimeout(() => {
this.jobResult();
}, 100);
}
}
})
},
// changeArray(data){
// let tableKeyArr = ["name", "comment", "result", "reason", "fileName", "number", "logDate"]
// let tableData = []
// data.forEach(item=>{
// let newObj = {}
// item.forEach((v,i)=>{
// newObj[tableKeyArr[i]] = v;
// if(v.childen){
// this.changeArray(v.childen)
// }
// })
// tableData.push(newObj)
// })
// return tableData;
// }
}
}
</script>
<style >
.el-form-item--small.el-form-item{
margin-bottom:5px !important;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment