Skip to content

E
ETL-admin
Commit 4d80872f by 莫晓莉
Options

资源库导入和画布图标回显，转换可以回显，作业不能实现回显

parent 250e8065
Showing with 202 additions and 25 deletions
src/assets/default-style.xml 0 → 100644
<mxStylesheet>
<add as="defaultVertex">
<add as="strokeColor" value="#3d6380"/>
<add as="fontSize" value="12"/>
<add as="fontColor" value="#000000"/>
<add as="fontFamily" value="宋体"/>
</add>
<add as="defaultEdge">
<add as="shape" value="connector"/>
<add as="labelBackgroundColor" value="white"/>
<add as="endArrow" value="classic"/>
<add as="fontSize" value="11"/>
<add as="fontFamily" value="宋体"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="labelBackgroundColor" value="#ffffff"/>
<add as="rounded" value="1"/>
<add as="strokeColor" value="#3d6380"/>
</add>
<add as="error">
<add as="shape" value="connector"/>
<add as="labelBackgroundColor" value="white"/>
<add as="endArrow" value="classic"/>
<add as="fontSize" value="11"/>
<add as="fontFamily" value="宋体"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="labelBackgroundColor" value="#ffffff"/>
<add as="dashed" value="1"/>
<add as="strokeColor" value="#ff0000"/>
</add>
<add as="label">
<add as="shape" value="label"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontStyle" value="1"/>
<add as="align" value="left"/>
<add as="verticalAlign" value="middle"/>
<add as="imageWidth" value="32"/>
<add as="imageHeight" value="32"/>
<add as="rounded" value="1"/>
<add as="glass" value="1"/>
</add>
<add as="icon" extend="label">
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="verticalAlign" value="top"/>
<add as="labelBackgroundColor" value="#FFFFFF"/>
<add as="fontStyle" value="0"/>
<add as="imageWidth" value="32"/>
<add as="imageHeight" value="32"/>
</add>
<add as="entity">
<add as="edgeStyle" value="entityRelationEdgeStyle"/>
</add>
<add as="vertical">
<add as="elbow" value="vertical"/>
</add>
<add as="straight">
<add as="shape" value="connector"/>
<add as="endArrow" value="classic"/>
<add as="edgeStyle" value="none"/>
</add>
<add as="arrow">
<add as="shape" value="arrow"/>
</add>
<add as="swimlane">
<add as="shape" value="swimlane"/>
<add as="fontSize" value="12"/>
<add as="fontStyle" value="1"/>
<add as="startSize" value="23"/>
</add>
<add as="group">
<add as="verticalAlign" value="top"/>
<add as="dashed" value="1"/>
<add as="opacity" value="50"/>
</add>
<add as="ellipse">
<add as="shape" value="ellipse"/>
<add as="perimeter" value="ellipsePerimeter"/>
</add>
<add as="rhombus">
<add as="shape" value="rhombus"/>
<add as="perimeter" value="rhombusPerimeter"/>
</add>
<add as="triangle">
<add as="shape" value="triangle"/>
<add as="perimeter" value="trianglePerimeter"/>
</add>
<add as="line">
<add as="shape" value="line"/>
<add as="strokeWidth" value="4"/>
<add as="labelBackgroundColor" value="white"/>
<add as="verticalAlign" value="top"/>
<add as="spacingTop" value="8"/>
</add>
<add as="image">
<add as="shape" value="image"/>
<add as="labelBackgroundColor" value="white"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="verticalAlign" value="top"/>
</add>
<add as="roundImage" extend="image">
<add as="perimeter" value="ellipsePerimeter"/>
</add>
<add as="rhombusImage" extend="image">
<add as="perimeter" value="rhombusPerimeter"/>
</add>
</mxStylesheet>
\ No newline at end of file
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
......@@ -994,6 +994,7 @@ import homeworkDialog from "../../../job-dialog/homework";
// 作业弹窗组件结束---------------------------------------
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
......@@ -1623,6 +1624,15 @@ previousField(){
// var dec = new mxCodec(node.ownerDocument);
// dec.decode(node, this.graph.getStylesheet());
// new mxRubberband(this.graph);
// 图标回显----------------------------
var node = mxUtils.load('./mxgraph/default-style.xml').getDocumentElement();
var dec = new mxCodec(node.ownerDocument);
dec.decode(node, this.graph.getStylesheet());
new mxRubberband(this.graph);
// 图标回显----------------------------
this.graph.setConnectable(true); // 允许连线
......@@ -1638,6 +1648,8 @@ previousField(){
this.graph.convertValueToString = (cell) => {
var label = cell.getAttribute("label");
if(label) {
......@@ -1646,10 +1658,13 @@ previousField(){
} else if(cell.isEdge() && cell.value.nodeName == 'JobHop') {
console.log(label,'label');
// var jsonArray = JSON.parse(label), label = '';
console.log(JSON.parse(label),'mylabel');
var jsonArray = JSON.parse(label), label = '';
console.log(jsonArray,'jsonArray');
jsonArray.forEach(img=>{
label += '<img src="' + img + '" width="16" height="16" />';
label += '<img src="'+this.etlWeb + img + '" width="16" height="16" />';
})
return label;
......@@ -1704,6 +1719,14 @@ previousField(){
// console.log(this.R.prop("title", cell),132132);
// return this.R.prop("title", cell);
};
// var cellLabelChanged = this.graph.cellLabelChanged;
// this.graph.cellLabelChanged = function(cell, newValue, autoSize){
// var tmp = cell.value.cloneNode(true);
// tmp.setAttribute('label', value);
// value = tmp;
// cellLabelChanged.apply(this, arguments);
// };
//监听连线
this.graph.addListener(mxEvent.CELLS_ADDED,(graph,evt)=>{
......@@ -1759,7 +1782,7 @@ previousField(){
});
if (
cell.ids == "step1" ||
(this.curFileType=="transformation" && cell.ids == "step1") ||
cell.value.attributes.ctype.value == "ExcelInput"
) {
this.excelLnput = !this.excelLnput;
......
src/views/dialogs-components/global/in-repository/main.vue
......@@ -7,7 +7,7 @@
:before-close="handleClose">
<!-- <span>请输入{{title}}名称：</span> -->
<!-- <el-input style="margin-top:15px;" v-model="inputValue" :placeholder="'请输入'+title+'名称'"></el-input> -->
<el-upload
<!-- <el-upload
ref="upload"
:limit="1"
class="input-length"
......@@ -16,6 +16,16 @@
:auto-upload="false"
:on-change="handleChange">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload> -->
<el-upload
ref="upload"
:limit="1"
class="input-length"
action="/etlweb/attachment/upload"
:file-list="fileList"
:headers="headers"
:on-success="uplodSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
......@@ -60,11 +70,13 @@
<script>
import {Imptree,imp } from "@/api/kettle/file";
import { getToken } from "@/utils/auth";
export default {
name: "in-repository",
data() {
return {
headers: {}, // 头部信息
impFileList:[],//导入的文件列表
fileList:[],
defaultProps: {
......@@ -83,22 +95,29 @@ export default {
},
created() {
// this.exptree();
this.setHeaders();
},
methods: {
//获取导出资源库树
exptree() {
let data = new FormData();
data.append("loadElement", 3);
data.append("node", "root");
exptree(data).then((res) => {
if (res) {
console.log("导出资源库树列表：", res);
this.exTreeList = res;
} else {
this.$message.error(res.errMsg);
}
});
setHeaders() {
this.headers = {
contentType: "application/x-www-form-urlencoded",
Authorization: getToken(),
};
},
//获取导出资源库树
// exptree() {
// let data = new FormData();
// data.append("loadElement", 3);
// data.append("node", "root");
// exptree(data).then((res) => {
// if (res) {
// console.log("导出资源库树列表：", res);
// this.exTreeList = res;
// } else {
// this.$message.error(res.errMsg);
// }
// });
// },
getCheckedNodes() {
console.log('当前勾选的所有数据',this.$refs.tree.getCheckedNodes());
var allCheckedsNodes=this.$refs.tree.getCheckedNodes();
......@@ -171,16 +190,33 @@ export default {
handleClose() {
this.$emit("update:inputVisibility", false);
},
handleChange(file, fileList) {
console.log('已经上传的文件==',file);
var path=file.name;
// path='H:\\小曾发来的新项目\\kettle\\kettle-webapp\\file_trans1.zip';
path="D:\\file\\111.zip";
this.uploadPath=path;
// handleChange(file, fileList) {
// console.log('已经上传的文件==',file);
// console.log('已经上传的文件夹==',fileList);
// var path=file.name;
// // path='H:\\小曾发来的新项目\\kettle\\kettle-webapp\\file_trans1.zip';
// // path="D:\\file\\111.zip";
// this.uploadPath=path;
// this.Imptree(path);
// },
// 上传资源文件成功
uplodSuccess(response, file, fileList) {
console.log(response, file, fileList);
if (response.success !== true) {
this.$message.error("上传失败！");
return;
}
this.Imptree(path);
console.log('上传资源文件成功返回数据================',response);
this.uploadPath = response.message;//添加作业
this.Imptree(this.uploadPath);
this.$message.success("上传成功！");
},
// 导入资源库
Imptree(path){
var formData = new FormData();
......
src/views/kettle/home2.vue
......@@ -44,7 +44,7 @@
<el-dropdown-item >管理资源库</el-dropdown-item>
<el-dropdown-item @click.native="disconnect()" >断开资源库</el-dropdown-item>
<el-dropdown-item @click.native="exportTreeDialog()">导出资源库</el-dropdown-item>
<el-dropdown-item>导入资源库</el-dropdown-item>
<el-dropdown-item @click.native="importTreeDialog()">导入资源库</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown
......@@ -320,7 +320,8 @@
<scanDialog ref="scanDialog" :scanDialogVisible.sync="scanDialogVisible" :createModel="createModel"></scanDialog>
<feature ref="feature" :featureDialogVisible.sync="featureDialogVisible"></feature>
<establishDialog ref="establishDialog" :estabDialogVisible.sync="estabDialogVisible" :title="estabTitle" :nodePath="nodePath" :explorer="explorer"></establishDialog>
<export-tree ref="exDialog" :exportDialogVisible.sync="exportDialogVisible"></export-tree>
<export-tree ref="exDialog" :exportDialogVisible.sync="exportDialogVisible" :explorer="explorer"></export-tree>
<in-repository ref="importDialog" :inputVisibility.sync="inputVisibility" :explorer="explorer"></in-repository>
</div>
</template>
......@@ -384,6 +385,7 @@ export default {
props: ["dragItem"],
data() {
return {
inputVisibility:false,//导入资源库
noneRespository:0,
curNodeText:'数据库名称',//当前点击选中的资源库节点
blankCanvas:"",//空白画布xml
......@@ -1337,6 +1339,12 @@ props: ["dragItem"],
exportTreeDialog(){
console.log('导出资源库====');
this.exportDialogVisible=true;
},
// 导入资源库弹窗
importTreeDialog(){
console.log('导入资源库====');
this.inputVisibility=true;
}
......
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