Compare commits

..

2 Commits

Author SHA1 Message Date
clay 197073ab4c Merge remote-tracking branch 'origin/master' 2022-07-19 21:47:57 +08:00
clay 3155c09dc9 拓扑图升级 2022-07-19 21:47:29 +08:00
4 changed files with 119 additions and 76 deletions

View File

@ -60,11 +60,12 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery"></right-toolbar>
</el-row>
<el-table :data="realDate.data">
<el-table-column v-for="item in realDate.header"
:label="item"
<el-table-column v-for="(item,index) in realDate.header"
:label="item.label"
align="center"
:key="item"
:prop="item"/>
:key="index"
:prop="item.prop"
/>
</el-table>
<pagination
v-show="total>0"
@ -111,7 +112,9 @@ export default {
created() {
this.dataId = this.$route.fullPath.split("/")[3]
RealInfo(this.dataId).then(res => {
this.uconList = listInit(res.data)
let data = res.data
this.uconList = listInit(data.uniCons)
this.realDate.header = data.infoList
})
this.handleQuery()
},
@ -140,10 +143,10 @@ export default {
RealData(data).then(res => {
this.realDate.data = res.rows
this.total = res.total
this.realDate.header = []
for (var key in this.realDate.data[0]) {
this.realDate.header.push(key)
}
// this.realDate.header = []
// for (var key in this.realDate.data[0]) {
// this.realDate.header.push(key)
// }
})
},

View File

@ -131,10 +131,10 @@
</div>
<div class="el-table">
<el-table v-show="previewDate.open" :data="previewDate.data">
<el-table-column v-for="item in previewDate.header"
<el-table-column v-for="(item,index) in previewDate.header"
:label="item.label"
align="center"
:key="item.key"
:key="index"
:prop="item.prop"
/>
</el-table>
@ -295,9 +295,11 @@ export default {
created() {
this.queryId = this.$route.params && this.$route.params.queryId
getQueryInfo(this.queryId).then(res => {
let data = res.data
this.columns = []
this.info = res.data.info
this.columns = JSONparse(res.data.list)
this.info = data.info
this.columnInfo.list = data.infoList
this.columns = JSONparse(data.list)
this.sqlConfig.coder.setValue(this.info.uqSql)
})
this.$nextTick(function() {
@ -545,6 +547,7 @@ export default {
})
return
}
data.infoList = this.columnInfo.list
editQueryInfo(data).then(res => {
this.columns = JSONparse(list)
Message({

View File

@ -47,7 +47,7 @@
<!--<el-button size="mini" @click="$parent.radialLayoutHandler">辐射</el-button>-->
<!--<el-button size="mini" @click="$parent.mdsLayoutHandler">MDS</el-button>-->
<!--<el-button size="mini" @click="$parent.dagreLayoutHandler">层次</el-button>-->
<!--<el-button size="mini" @click="$parent.autoLayoutHandler">自动old</el-button>-->
<!-- <el-button size="mini" @click="$parent.autoLayoutHandler">自动old</el-button>-->
<el-button size="mini" v-hasPermi="['top:preview']" @click="$parent.searchPreview">预览</el-button>
<el-button size="mini" v-hasPermi="['top:online']" @click="$parent.searchOnLine">上线</el-button>
<!-- 返回到预览模式 -->

View File

@ -14,12 +14,14 @@
@doPreview="doPreview"
@doOnLine="doOnLine"
>
</topology>
<el-dialog :title="previewDate.title" width="1400px" :visible.sync="previewDate.open">
<el-form ref="ucon" :inline="true" v-show="previewDate.showSearch" label-width="68px">
<el-form-item v-for="item in previewDate.uconList"
:key="item.id"
:label="item.ucName">
:label="item.ucName"
>
<el-input v-if="item.type == 1" v-model="item.ucReal"
clearable
@ -43,7 +45,8 @@
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期时间">
placeholder="选择日期时间"
>
</el-date-picker>
<el-date-picker v-else-if="item.type ==4"
v-model="item.ucReal"
@ -76,11 +79,12 @@
<right-toolbar :showSearch.sync="previewDate.showSearch" @queryTable="handleQuery"></right-toolbar>
</el-row>
<el-table :data="previewDate.data">
<el-table-column v-for="item in previewDate.header"
:label="item"
<el-table-column v-for="(item,index) in previewDate.header"
:label="item.label"
align="center"
:key="item"
:prop="item"/>
:key="index"
:prop="item.prop"
/>
</el-table>
<pagination
v-show="previewDate.total>0"
@ -98,9 +102,10 @@
/* 局部注册 */
import Topology from './packages/topology/src/topology'
import { deepClone } from './utils/index'
import {getQuery,getTables,updateQuery,preview} from '@/api/tool/top'
import {RealData} from "@/api/system/data"
import { getQuery, getTables, updateQuery, preview } from '@/api/tool/top'
import { RealData } from '@/api/system/data'
import { exportReal } from '../../../api/system/data'
export default {
name: 'DemoTopology',
components: {
@ -110,17 +115,17 @@ export default {
return {
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 10
},
baseData:null,
previewDate:{
open:false,
title:"预览",
data:[],
header:[],
total:0,
uconList:[],
showSearch:false,
baseData: null,
previewDate: {
open: false,
title: '预览',
data: [],
header: [],
total: 0,
uconList: [],
showSearch: false
},
graphData: {
// "nodes":[{"id":"305bfbdd-31cc-4028-b2b1-2f504968356d","x":304.8223042174235,"y":131.0267312661499,"label":"","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"id","isUse":0},{"key":"key","type":"varchar(255)","comment":"","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"","isUse":0},{"key":"hometown","type":"varchar(255)","comment":"","isUse":0},{"key":"country","type":"varchar(255)","comment":"","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"depth":0},{"id":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","x":-94.51187075489108,"y":127.35469287559994,"label":"","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"id","isUse":0},{"key":"key","type":"varchar(255)","comment":"","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":0},{"key":"birthday","type":"date","comment":"","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"","isUse":1},{"key":"country","type":"varchar(255)","comment":"","isUse":0},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"startIndex":0,"startX":0,"depth":0}],"edges":[{"id":"8bc0249e-ee5d-4dd7-84e0-e4e32c217f2a","source":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","sourceColumn":[{"key":"id","type":"number(6)","comment":"id","isUse":1},{"key":"key","type":"varchar(255)","comment":"","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"","isUse":1},{"key":"country","type":"varchar(255)","comment":"","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"","isUse":1}],"sourceAnchor":1,"target":"305bfbdd-31cc-4028-b2b1-2f504968356d","type":"top-cubic","style":{"active":{"stroke":"rgb(95, 149, 255)","lineWidth":1},"selected":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"shadowColor":"rgb(95, 149, 255)","shadowBlur":10,"text-shape":{"fontWeight":500}},"highlight":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"text-shape":{"fontWeight":500}},"inactive":{"stroke":"rgb(234, 234, 234)","lineWidth":1},"disable":{"stroke":"rgb(245, 245, 245)","lineWidth":1},"edgeStyle":{"default":{"stroke":"#e2e2e2","lineWidth":3,"lineAppendWidth":10},"selected":{"shadowColor":"#626262","shadowBlur":3}},"stroke":"#A3B1BF","lineWidth":2,"strokeOpacity":0.92,"lineAppendWidth":10},"labelCfg":{"position":"center","autoRotate":false},"startPoint":{"x":155.98812924510892,"y":285.35469287559994,"anchorIndex":1},"endPoint":{"x":304.3223042174235,"y":289.0267312661499,"anchorIndex":3},"curveOffset":[-20,20],"curvePosition":[0.5,0.5],"targetAnchor":3,"targetColumn":[{"key":"id","type":"number(6)","comment":"id","isUse":1},{"key":"key","type":"varchar(255)","comment":"","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"","isUse":1},{"key":"country","type":"varchar(255)","comment":"","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"","isUse":1}],"depth":0}],"combos":[]},
@ -147,22 +152,22 @@ export default {
}
},
mounted() {
this.topId = this.$route.params && this.$route.params.topId;
getQuery(this.topId).then(res =>{
this.topId = this.$route.params && this.$route.params.topId
getQuery(this.topId).then(res => {
this.baseData = res.data
if (res.data.topJson){
if (res.data.topJson) {
this.graphData = JSON.parse(res.data.topJson)
}else {
this.graphData ={
nodes:[],
edges:[]
} else {
this.graphData = {
nodes: [],
edges: []
}
}
}
let graphData = deepClone(this.graphData)
this.$refs.topology.initTopo(graphData)
this.randomChange()
})
getTables().then(res =>{
getTables().then(res => {
this.nodeTypeList = res.data.tables
this.relationalMap = res.data.relationalMap
})
@ -179,38 +184,35 @@ export default {
/** 导出按钮操作 */
handleExport() {
var that = this
this.$confirm('是否确认导出查询数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
this.$confirm('是否确认导出查询数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
let data = {
id:that.topId,
uniCons:that.previewDate.uconList,
id: that.topId,
uniCons: that.previewDate.uconList
}
return exportReal(data)
}).then(response => {
this.download(response.msg);
this.download(response.msg)
})
},
handleQuery() {
let data = {
id: this.topId,
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
pageSize: this.queryParams.pageSize
}
data.uniCons = this.previewDate.uconList
//todo
RealData(data).then(res => {
this.previewDate.data = res.rows
this.total = res.total
this.previewDate.header = []
for (const key in this.previewDate.data[0]) {
this.previewDate.header.push(key)
}
})
},
outPlaceholder(item) {
return "请输入" + item.ucName
return '请输入' + item.ucName
},
doAutoRefresh(interval) {
if (interval === -1) {
@ -235,46 +237,81 @@ export default {
},
doSaveData(graphData) {
let data = {
id : this.topId,
topJson:JSON.stringify(graphData)
id: this.topId,
topJson: JSON.stringify(graphData)
}
//todo
updateQuery(data).then(res =>{
updateQuery(data).then(res => {
this.msgSuccess(res.msg)
})
},
doOnLine(){
this.$confirm('请确认top图结构无误并预览结果无误后上线?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
doOnLine() {
this.$confirm('请确认top图结构无误并预览结果无误后上线?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
})
},
//
doPreview(graphData){
if (graphData.nodes&&graphData.nodes.length>0){
doPreview(graphData) {
if (graphData.nodes && graphData.nodes.length > 0) {
let nodeList = graphData.nodes
let edgeList = graphData.edges
let nodes = []
nodeList.forEach(node => {
nodes.push({
id: node.id,
label: node.label,
table: node.table,
columns: node.columns
})
})
let edges = []
edgeList.forEach(edge => {
edges.push({
id:edge.id,
label: edge.label,
source: edge.source,
target: edge.target,
appConfig: edge.appConfig
})
})
let data = {
jsonData:JSON.stringify(graphData),
id:this.topId
jsonData: JSON.stringify({
nodes: nodes,
edges: edges
}),
id: this.topId
}
preview(data).then(res=>{
console.log({
nodes: nodes,
edges: edges
})
preview(data).then(res => {
this.previewDate.data = res.rows
this.previewDate.total = res.total
this.previewDate.uconList = res.uconList
if (this.previewDate.uconList.length>0){
if (this.previewDate.uconList.length > 0) {
this.previewDate.showSearch = true
}
this.previewDate.header = []
for (const key in this.previewDate.data[0]) {
this.previewDate.header.push(key)
}
this.previewDate.title = this.baseData.uqName + "数据预览"
let infoList = res.infoList
infoList.forEach( info=>{
this.previewDate.header.push({
key: info.prop,
label: info.label,
prop: info.prop
})
})
this.previewDate.title = this.baseData.uqName + '数据预览'
this.previewDate.open = true
})
}else {
this.msgError("top数据有误,请再次检查")
} else {
this.msgError('top数据有误,请再次检查')
}
},
randomChange() {