拓扑图升级

ebts-ui/src/views/system/query/queryDate.vue

@@ -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"
+      <el-table-column v-for="(item,index) in realDate.header"
-                       :label="item"
+                       :label="item.label"
                        align="center"
-                       :key="item"
+                       :key="index"
-                       :prop="item"/>
+                       :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 = []
+        // this.realDate.header = []
-        for (var key in this.realDate.data[0]) {
+        // for (var key in this.realDate.data[0]) {
-          this.realDate.header.push(key)
+        //   this.realDate.header.push(key)
-        }
+        // }
       })
     },
 

ebts-ui/src/views/tool/query/uniQuery.vue

@@ -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.info = data.info
-      this.columns = JSONparse(res.data.list)
+      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({

ebts-ui/src/views/tool/top/packages/topology/src/toolbar-edit.vue

@@ -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>
       <!-- 返回到预览模式      -->

ebts-ui/src/views/tool/top/topology.vue

@@ -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"
+        <el-table-column v-for="(item,index) in previewDate.header"
-                         :label="item"
+                         :label="item.label"
                          align="center"
-                         :key="item"
+                         :key="index"
-                         :prop="item"/>
+                         :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 { getQuery, getTables, updateQuery, preview } from '@/api/tool/top'
-import {RealData} from "@/api/system/data"
+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,
+      baseData: null,
-      previewDate:{
+      previewDate: {
-        open:false,
+        open: false,
-        title:"预览",
+        title: '预览',
-        data:[],
+        data: [],
-        header:[],
+        header: [],
-        total:0,
+        total: 0,
-        uconList:[],
+        uconList: [],
-        showSearch:false,
+        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;
+    this.topId = this.$route.params && this.$route.params.topId
-    getQuery(this.topId).then(res =>{
+    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 {
+      } else {
-        this.graphData ={
+        this.graphData = {
-          nodes:[],
+          nodes: [],
-          edges:[]
+          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('是否确认导出查询数据项?', "警告", {
+      this.$confirm('是否确认导出查询数据项?', '警告', {
-        confirmButtonText: "确定",
+        confirmButtonText: '确定',
-        cancelButtonText: "取消",
+        cancelButtonText: '取消',
-        type: "warning"
+        type: 'warning'
-      }).then(function () {
+      }).then(function() {
         let data = {
-          id:that.topId,
+          id: that.topId,
-          uniCons:that.previewDate.uconList,
+          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,
+        id: this.topId,
-        topJson:JSON.stringify(graphData)
+        topJson: JSON.stringify(graphData)
       }
       //todo 入库完成
-      updateQuery(data).then(res =>{
+      updateQuery(data).then(res => {
         this.msgSuccess(res.msg)
       })
     },
-    doOnLine(){
+    doOnLine() {
-      this.$confirm('请确认top图结构无误并预览结果无误后上线?', "警告", {
+      this.$confirm('请确认top图结构无误并预览结果无误后上线?', '警告', {
-        confirmButtonText: "确定",
+        confirmButtonText: '确定',
-        cancelButtonText: "取消",
+        cancelButtonText: '取消',
-        type: "warning"
+        type: 'warning'
-      }).then(function () {
+      }).then(function() {
 
       })
     },
     //预览
-    doPreview(graphData){
+    doPreview(graphData) {
-      if (graphData.nodes&&graphData.nodes.length>0){
+      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),
+          jsonData: JSON.stringify({
-          id:this.topId
+            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]) {
+          let infoList = res.infoList
-            this.previewDate.header.push(key)
+          infoList.forEach( info=>{
-          }
+            this.previewDate.header.push({
-          this.previewDate.title = this.baseData.uqName + "数据预览"
+              key: info.prop,
+              label: info.label,
+              prop: info.prop
+            })
+          })
+
+          this.previewDate.title = this.baseData.uqName + '数据预览'
           this.previewDate.open = true
         })
-      }else {
+      } else {
-        this.msgError("top数据有误,请再次检查")
+        this.msgError('top数据有误,请再次检查')
       }
     },
     randomChange() {