top预览对接

This commit is contained in:
clay 2021-07-25 23:47:14 +08:00
parent 42f37a4137
commit bdfb5744c3
10 changed files with 236 additions and 45 deletions

View File

@ -29,3 +29,12 @@ export function updateQuery(data) {
data:data
})
}
// 查询万能查询详细
export function preview(data) {
return request({
url: '/top/preview',
method: 'post',
data:data
})
}

View File

@ -1,11 +1,11 @@
<template>
<button
class="cc-button"
class="top-button"
@click="handleClick"
:disabled="buttonDisabled"
:class="[
type ? 'cc-button--' + type : '',
buttonSize ? 'cc-button--' + buttonSize : '',
type ? 'top-button--' + type : '',
buttonSize ? 'top-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-plain': plain
@ -18,7 +18,7 @@
<script>
export default {
name: 'CcButton',
name: 'TopButton',
props: {
type: {
type: String,
@ -54,7 +54,7 @@ export default {
</script>
<style lang="scss" scoped>
.cc-button {
.top-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
@ -76,17 +76,17 @@ export default {
border-radius: 4px;
}
.cc-button:focus, .cc-button:hover {
.top-button:focus, .top-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.cc-button--mini, .cc-button--mini.is-round {
.top-button--mini, .top-button--mini.is-round {
padding: 7px 15px;
}
.cc-button--mini, .cc-button--small {
.top-button--mini, .top-button--small {
font-size: 12px;
border-radius: 3px;
}

View File

@ -2,12 +2,13 @@
<div class="toolbar">
<div class="left">
<!--<el-checkbox class="edge-enabled" title="连线模式" @change="$parent.enableEdgeHandler"></el-checkbox>-->
<!-- <cc-dropdown-->
<!-- <top-dropdown-->
<!-- class="edge-shape"-->
<!-- :dropdown-items="$parent.edgeShapeList"-->
<!-- @change="$parent.changeEdgeShapeHandler"-->
<!-- >-->
<!-- </cc-dropdown>-->
<!-- </top-dropdown>-->
<top-button size="mini" @click="$parent.reBack">返回</top-button>
</div>
<div class="center">
<div class="graph-ops">
@ -31,24 +32,26 @@
<i class="iconfont icon-roi-select" id="multi-select" title="框选" @click="$parent.multiSelectHandler"></i>
<div v-if="$parent.$data.graphMode === 'edit'" class="iconfont zx"><cc-dropdown
<div v-if="$parent.$data.graphMode === 'edit'" class="iconfont zx">
<top-dropdown
class="edge-shape"
:dropdown-items="$parent.edgeShapeList"
@change="$parent.changeEdgeShapeHandler"
>
</cc-dropdown></div>
@change="$parent.changeEdgeShapeHandler">
</top-dropdown>
</div>
</div>
</div>
<div class="right">
<cc-button size="mini" @click="$parent.forceLayoutHandler">自动布局</cc-button>
<top-button size="mini" @click="$parent.forceLayoutHandler">自动布局</top-button>
<!--<el-button size="mini" @click="$parent.circularLayoutHandler">环形布局</el-button>-->
<!--<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>-->
<!-- todo 返回到预览模式 -->
<cc-button size="mini" @click="$parent.changeModeHandler('preview')">返回</cc-button>
<cc-button size="mini" @click="$parent.saveDataHandler">保存</cc-button>
<el-button size="mini" @click="$parent.searchPreview">预览</el-button>
<!-- 返回到预览模式 -->
<!-- <top-button size="mini" @click="$parent.changeModeHandler('preview')">返回</top-button>-->
<top-button size="mini" @click="$parent.saveDataHandler">保存</top-button>
</div>
</div>
</template>
@ -59,8 +62,8 @@ import { Button, Dropdown } from '../../elements';
export default {
name: "ToolbarEdit",
components: {
"cc-button": Button,
"cc-dropdown": Dropdown
"top-button": Button,
"top-dropdown": Dropdown
}
};
</script>
@ -155,7 +158,7 @@ export default {
}
}
.cc-button {
.top-button {
margin: 0 5px;
}
}

View File

@ -881,7 +881,10 @@ export default {
//
// this.graph.$C.edge.type = this.currentEdgeShape["guid"];
},
//
reBack(){
this.$router.replace('/tool/er-top')
},
undoHandler() {
if (this.historyIndex > 0 && this.historyIndex - (this.undoCount + 1) >= 0) {
this.undoCount += 1
@ -1410,6 +1413,12 @@ export default {
this.changeGraphTheme('defaultStyle')
this.$emit('doChangeMode', graphMode)
},
// todo
searchPreview(){
let graphData = this.getGraphData()
// console.log(graphData)
this.$emit('doPreview', graphData)
},
//
saveDataHandler() {
let graphData = this.getGraphData()

View File

@ -11,8 +11,85 @@
@doManualRefresh="doManualRefresh"
@doChangeMode="doChangeMode"
@doSaveData="doSaveData"
@doPreview="doPreview"
>
</topology>
<el-dialog :title="previewDate.title" width="1400px" :visible.sync="previewDate.open">
<el-form ref="ucon" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item v-for="item in uconList"
:key="item.id"
:label="item.ucName">
<el-input v-if="item.type == 1" v-model="item.ucReal"
clearable
:placeholder="outPlaceholder(item)"
size="small"
@keyup.enter.native="handleQuery"
/>
<div style="width: 200px" v-else-if="item.type == 2">
<el-row :gutter="15">
<el-col :span="12">
<el-input size="small" placeholder="开始值" v-model="item.ucReal.begin"></el-input>
</el-col>
<el-col :span="12">
<el-input size="small" placeholder="结束值" v-model="item.ucReal.end"></el-input>
</el-col>
</el-row>
</div>
<el-date-picker
v-else-if="item.type ==3"
v-model="item.ucReal"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
<el-date-picker v-else-if="item.type ==4"
v-model="item.ucReal"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['tool:query:export']"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery"></right-toolbar>
</el-row>
<el-table :data="previewDate.data">
<el-table-column v-for="item in previewDate.header"
:label="item"
align="center"
:key="item"
:prop="item"/>
</el-table>
<pagination
v-show="previewDate.total>0"
:total="previewDate.total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="previewQuery"
/>
</el-dialog>
</div>
</template>
@ -20,7 +97,7 @@
/* 局部注册 */
import Topology from './packages/topology/src/topology'
import { deepClone } from './utils/index'
import {getQuery,getTables,updateQuery} from '@/api/tool/top'
import {getQuery,getTables,updateQuery,preview} from '@/api/tool/top'
export default {
name: 'DemoTopology',
@ -29,6 +106,18 @@ export default {
},
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 10,
},
baseData:null,
previewDate:{
open:false,
title:"预览",
data:[],
header:[],
total:0
},
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","sourceAttrs":[{"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,"targetAttrs":[{"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":[]},
},
@ -55,7 +144,7 @@ export default {
mounted() {
this.topId = this.$route.params && this.$route.params.topId;
getQuery(this.topId).then(res =>{
console.log(res)
this.baseData = res.data
this.graphData = JSON.parse(res.data.topJson)
let graphData = deepClone(this.graphData)
this.$refs.topology.initTopo(graphData)
@ -99,7 +188,21 @@ export default {
updateQuery(data).then(res =>{
console.log(res)
})
},
doPreview(graphData){
if (graphData.nodes&&graphData.nodes.length>0){
preview({jsonData:JSON.stringify(graphData)}).then(res=>{
this.previewDate.data = res.data
this.previewDate.header = []
for (var key in this.previewDate.data[0]) {
this.previewDate.header.push(key)
}
this.previewDate.title = this.baseData.uqName + "数据预览"
this.previewDate.open = true
})
}else {
this.msgError("top数据有误,请再次检查")
}
},
randomChange() {
let graphData = deepClone(this.$refs.topology.getGraphData())

View File

@ -13,6 +13,9 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
/**
* @author: Clay
@ -64,10 +67,10 @@ public class TopQueryController {
}
/**
* 简单修改万能能查询
* 简单修改top万能能查询
*/
@PreAuthorize("@ebts.hasPermi('top:edit')")
@Log(title = "万能查询", businessType = BusinessType.UPDATE)
@Log(title = "top万能查询", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult edit(@RequestBody UniQuery uniQuery) {
if (uniQuery.getId()<0){
@ -83,6 +86,21 @@ public class TopQueryController {
return AjaxResult.error(ServerResult.getMsg());
}
}
/**
* 简单修改top万能能查询
*/
@PreAuthorize("@ebts.hasPermi('top:preview')")
@Log(title = "top预览", businessType = BusinessType.OTHER)
@PostMapping("/preview")
public AjaxResult preview(@RequestBody Map<String,String> params){
if (StringUtils.isNull(params.get("jsonData"))){
return AjaxResult.error("缺少必要参数!");
}
ServerResult<List<Map<String, Object>>> serverResult = topQueryService.preview(params.get("jsonData"));
if (serverResult.isStart()){
return AjaxResult.success(serverResult.getData());
}else {
return AjaxResult.error(serverResult.getMsg());
}
}
}

View File

@ -1,7 +1,6 @@
package com.ebts.generator.service;
import com.ebts.generator.entity.TopSearchTable;
import org.apache.poi.ss.formula.functions.T;
import com.ebts.common.utils.ServerResult;
import java.util.List;
import java.util.Map;
@ -15,4 +14,6 @@ import java.util.Map;
public interface TopQueryService {
Map<String, Object> selectTopSearchTables();
ServerResult<List<Map<String, Object>>> preview(String jsonData);
}

View File

@ -8,15 +8,14 @@ import com.ebts.generator.entity.TopSearchTable;
/**
* top万能查询主Service接口
*
*
* @author clay
* @date 2021-07-20
*/
public interface TopSearchTableService
{
public interface TopSearchTableService {
/**
* 查询top万能查询主
*
*
* @param id top万能查询主ID
* @return top万能查询主
*/
@ -24,22 +23,22 @@ public interface TopSearchTableService
/**
* 查询top万能查询主列表
*
*
* @param topSearchTable top万能查询主
* @return top万能查询主集合
*/
ServerResult<List<TopSearchTable>> selectTopSearchTableList(TopSearchTable topSearchTable);
/**
*
* @return
*/
ServerResult<List<TopSearchTable>> selectTopSearchTableInfo();
List<TopSearchColumn> selectTableColumns(Long id);
/**
* 新增top万能查询主
*
*
* @param topSearchTable top万能查询主
* @return 结果
*/
@ -47,7 +46,7 @@ public interface TopSearchTableService
/**
* 修改top万能查询主
*
*
* @param topSearchTable top万能查询主
* @return 结果
*/
@ -59,7 +58,7 @@ public interface TopSearchTableService
/**
* 批量删除top万能查询主
*
*
* @param ids 需要删除的top万能查询主ID
* @return 结果
*/
@ -67,7 +66,7 @@ public interface TopSearchTableService
/**
* 删除top万能查询主信息
*
*
* @param id top万能查询主ID
* @return 结果
*/

View File

@ -139,7 +139,7 @@ public class QueryServiceImpl implements QueryService {
return new ServerResult<>(true, dataMap);
} catch (RuntimeException e) {
logger.error(e.getMessage());
throw new EbtsException(ReturnConstants.OP_ERROR,e);
return new ServerResult<>(false, e.getMessage());
}
}

View File

@ -1,13 +1,21 @@
package com.ebts.generator.service.impl;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.ebts.common.utils.ServerResult;
import com.ebts.generator.dao.QueryDao;
import com.ebts.generator.dao.RelationalMapDao;
import com.ebts.generator.dao.TopSearchTableDao;
import com.ebts.generator.entity.RelationalMap;
import com.ebts.generator.service.TopQueryService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
@ -18,16 +26,57 @@ import java.util.Map;
*/
@Service
public class TopQueryServiceImpl implements TopQueryService {
private final Logger logger = LoggerFactory.getLogger(TopQueryServiceImpl.class);
@Autowired
private TopSearchTableDao topSearchTableDao;
@Autowired
private RelationalMapDao relationalMapDao;
@Autowired
private QueryDao queryDao;
@Override
public Map<String, Object> selectTopSearchTables() {
Map<String,Object> modeMap = new HashMap<>();
modeMap.put("tables",topSearchTableDao.selectTopSearchTables());
modeMap.put("relationalMap",relationalMapDao.selectRelationalMapList(new RelationalMap()));
Map<String, Object> modeMap = new HashMap<>();
modeMap.put("tables", topSearchTableDao.selectTopSearchTables());
modeMap.put("relationalMap", relationalMapDao.selectRelationalMapList(new RelationalMap()));
return modeMap;
}
@Override
public ServerResult<List<Map<String, Object>>> preview(String jsonData) {
try {
JSONObject graphData = JSON.parseObject(jsonData);
JSONArray nodes = graphData.getJSONArray("nodes");
JSONArray edges = graphData.getJSONArray("edges");
JSONObject node = nodes.getJSONObject(0);
StringBuffer sql = new StringBuffer("select ");
JSONArray attrs = node.getJSONArray("attrs");
boolean start = false;
for (int i = 0; i < attrs.size(); i++) {
JSONObject column = attrs.getJSONObject(i);
if (column.getInteger("isUse") == 1) {
if (start) {
sql.append(", ");
}
sql.append(column.getString("columnName"));
sql.append(" as ");
sql.append("'" + column.getString("columnComment") + "'");
start=true;
}
}
sql.append(" from " + node.getString("table"));
System.out.println(sql.toString());
List<Map<String, Object>> dataMap = queryDao.UniQuery(sql.toString());
return new ServerResult<>(true, dataMap);
} catch (RuntimeException e) {
logger.error(e.getMessage());
return new ServerResult<>(false, e.getMessage());
}
}
}