diff --git a/index.html b/index.html index 7056f8c..264b8e9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + 科研管理平台
diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..9d77955 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/api/custom-query/adapter.js b/src/api/custom-query/adapter.js deleted file mode 100644 index 0d821bc..0000000 --- a/src/api/custom-query/adapter.js +++ /dev/null @@ -1,61 +0,0 @@ -import request from '@/utils/request.js' - -// 请求数据源适配器list -export const getDataAdapterList = (params) => { - return request({ - url: '/custom/query/query/adapter', - method: 'get', - params - }) -} - -//获取到option列表 -export const getDataAdapterOpt = () => { - return request({ - url: '/custom/query/query/adapter/option', - method: 'get', - }) -} - -// 获取数据源适配器详情 -export const getDataAdapterDetails = (dataAdapterId) => { - return request({ - url: '/custom/query/query/adapter/' + dataAdapterId, - method: 'get' - }) -} - -// 新增数据源适配器 -export const addDataAdapter = (data) => { - return request({ - url: '/custom/query/query/adapter', - method: 'post', - data - }) -} -//模拟执行适配器函数 -export const executeAdapterMockData = (data) => { - return request({ - url: '/custom/query/query/adapter/mock/execute', - method: 'post', - data - }) -} - -// 修改数据源适配器 -export const editDataAdapter = (data) => { - return request({ - url: '/custom/query/query/adapter', - method: 'put', - data - }) -} - -// 删除数据源适配器 -export const delDataAdapter =(dataAdapterId) => { - return request({ - url: '/custom/query/query/adapter/' + dataAdapterId, - method: 'delete' - }) -} - diff --git a/src/api/custom-query/datamodel.js b/src/api/custom-query/datamodel.js deleted file mode 100644 index 45ad7c0..0000000 --- a/src/api/custom-query/datamodel.js +++ /dev/null @@ -1,66 +0,0 @@ -import request from '@/utils/request.js' - -// 请求数据源管理list -export const getDataSourceManageList = (params) => { - return request({ - url: '/custom/query/datasource', - method: 'get', - params - }) -} - -//获取到option列表 -export const getDataSourceManageOpt = () => { - return request({ - url: '/custom/query/datasource/option', - method: 'get', - }) -} - -// 获取数据源管理详情 -export const getDataSourceManageDetails = (queryDataSourceId) => { - return request({ - url: '/custom/query/datasource/' + queryDataSourceId, - method: 'get' - }) -} -// 获取数据源管理详情 -export const getDataSourceType = () => { - return request({ - url: '/custom/query/datasource/option/type', - method: 'get' - }) -} -// 获取校验规则option -export const getDataSourceOption = () => { - return request({ - url: '/custom/query/datasource/option', - method: 'get' - }) -} -// 新增数据源管理 -export const addDataSourceManage = (data) => { - return request({ - url: '/custom/query/datasource', - method: 'post', - data - }) -} - -// 修改数据源管理 -export const editDataSourceManage = (data) => { - return request({ - url: '/custom/query/datasource', - method: 'put', - data - }) -} - -// 删除数据源管理 -export const delDataSourceManage =(queryDataSourceId) => { - return request({ - url: '/custom/query/datasource/' + queryDataSourceId, - method: 'delete' - }) -} - diff --git a/src/api/custom-query/echarts.js b/src/api/custom-query/echarts.js deleted file mode 100644 index 5102760..0000000 --- a/src/api/custom-query/echarts.js +++ /dev/null @@ -1,36 +0,0 @@ -import request from '@/utils/request.js' - -export const getEchartsList = (params) => { - return request({ - url: '/custom/query/echarts', - method: 'get', - params - }) -} -export const getEchartsDetails = (echartsId) => { - return request({ - url: '/custom/query/echarts/' + echartsId, - method: 'get' - }) -} - -export const addEcharts = (data) => { - return request({ - url: '/custom/query/echarts', - method: 'post', - data - }) -} -export const editEcharts = (data) => { - return request({ - url: '/custom/query/echarts', - method: 'put', - data - }) -} -export const delEcharts=(echartsIdList) => { - return request({ - url: '/custom/query/echarts/' + echartsIdList, - method: 'delete' - }) -} diff --git a/src/api/custom-query/query-page.js b/src/api/custom-query/query-page.js deleted file mode 100644 index f25073d..0000000 --- a/src/api/custom-query/query-page.js +++ /dev/null @@ -1,22 +0,0 @@ -import request from '@/utils/request.js' - -// 获取查询页面信息 -export const getPageInfo = (queryId, params) => { - return request({ - url: '/custom/query/page/' + queryId, - method: 'get', - params: params - }) -} - -// 获取到页面数据 -export const getPageData = (params, data) => { - return request({ - url: '/custom/query/page/data', - method: 'post', - params: params, - data: data - }) -} - - diff --git a/src/api/custom-query/sql-search.js b/src/api/custom-query/sql-search.js deleted file mode 100644 index 1d14914..0000000 --- a/src/api/custom-query/sql-search.js +++ /dev/null @@ -1,37 +0,0 @@ -import request from '@/utils/request.js' - -export const getSqlInfo = (queryId) => { - return request({ - url: '/custom/query/sql/search/' + queryId, - method: 'get' - }) -} - -export const previewSql= (data,pageInfo) => { - return request({ - url:'/custom/query/sql/search/preview' , - method: 'put', - data, - params:pageInfo - }) -} -export const saveSqlQueryParams = (data) => { - return request({ - url: '/custom/query/sql/search', - method: 'post', - data - }) -} -export const sqlToLine = (data) => { - return request({ - url: '/custom/query/sql/search/publish', - method: 'post', - data - }) -} -export const sqlDownLine = (queryId) => { - return request({ - url: '/custom/query/sql/search/cancel/'+queryId, - method: 'put' - }) -} diff --git a/src/api/custom-query/sql.js b/src/api/custom-query/sql.js deleted file mode 100644 index d66bda8..0000000 --- a/src/api/custom-query/sql.js +++ /dev/null @@ -1,42 +0,0 @@ -import request from '@/utils/request.js' - -// 获取Sql List -export const getSqlList = (params) => { - return request({ - url: '/custom/query/sql/uni', - method: 'get', - params - }) -} -// 获取Sql详情 -export const getSqlDetails = (sqlId) => { - return request({ - url: '/custom/query/sql/uni/' + sqlId, - method: 'get' - }) -} -// 新增Sql -export const addSql = (data) => { - return request({ - url: '/custom/query/sql/uni', - method: 'post', - data - }) -} - -// 修改Sql -export const editSql = (data) => { - return request({ - url: '/custom/query/sql/uni', - method: 'put', - data - }) -} - -// 删除Sql -export const delSql =(idList) => { - return request({ - url: '/custom/query/sql/uni/' + idList, - method: 'delete' - }) -} diff --git a/src/api/custom-query/table.js b/src/api/custom-query/table.js deleted file mode 100644 index 63335e1..0000000 --- a/src/api/custom-query/table.js +++ /dev/null @@ -1,70 +0,0 @@ -import request from '@/utils/request.js' - -//获取表格维护列表 -export const getTableInfo = (params) => { - return request({ - url: '/custom/query/table', - method: 'get', - params - }) -} -export const getDynamicTableList = (params) => { - return request({ - url: '/custom/query/dynamic/table', - method: 'get', - params - }) -} -//根据数据源获取到表格option信息 -export const getAssociationTableOption = (datasourceId) => { - return request({ - url: '/custom/query/table/option/' + datasourceId, - method: 'get' - }) -} -//获取表格字段option信息 -export const getAssociationFieldOption = (tableId) => { - return request({ - url: '/custom/query/table/column/option/' + tableId, - method: 'get' - }) -} -// 获取详细信息 -export const getTableDetails = (tableId) => { - return request({ - url: '/custom/query/table/' + tableId, - method: 'get' - }) -} -// 导入表信息 -export const addTableInfo= (data) => { - return request({ - url: '/custom/query/table/import', - method: 'post', - data - }) -} - -// 修改自定义查询表格维护 -export const editTable = (data) => { - return request({ - url: '/custom/query/table', - method: 'put', - data - }) -} -// 同步数据库 -export const syncDatabase = (tableId) => { - return request({ - url: '/custom/query/table/sync/'+ tableId, - method: 'put' - }) -} - -// 删除自定义查询表格维护 -export const delTable=(tableId) => { - return request({ - url: '/custom/query/table/' + tableId, - method: 'delete' - }) -} diff --git a/src/api/custom-query/topo-search.js b/src/api/custom-query/topo-search.js deleted file mode 100644 index a4cb4df..0000000 --- a/src/api/custom-query/topo-search.js +++ /dev/null @@ -1,47 +0,0 @@ -import request from '@/utils/request.js' - -// 获取topo拖拽数据信息 -export const getTopoDragInfo = (queryId) => { - return request({ - url: '/custom/query/topo/search/' + queryId, - method: 'get' - }) -} -export const saveTopo = (data) => { - return request({ - url: '/custom/query/topo/search', - method: 'post', - data - }) -} -export const previewTopo = (data,pageInfo) => { - return request({ - url: '/custom/query/topo/search/preview', - method: 'post', - data, - params:pageInfo, - }) -} -export const previewTopologyData = (data,pageInfo) => { - return request({ - url: '/custom/query/topo/search/preview/data', - method: 'post', - data, - params:pageInfo, - }) -} - -export const topoToLine = (data) => { - return request({ - url: '/custom/query/topo/search/publish', - method: 'post', - data - }) -} - -export const topoDownLine = (queryId) => { - return request({ - url: '/custom/query/topo/search/cancel/'+queryId, - method: 'put' - }) -} diff --git a/src/api/custom-query/topo.js b/src/api/custom-query/topo.js deleted file mode 100644 index 2de4b31..0000000 --- a/src/api/custom-query/topo.js +++ /dev/null @@ -1,42 +0,0 @@ -import request from '@/utils/request.js' - -// 获取topoList -export const getTopoList = (params) => { - return request({ - url: '/custom/query/topo/uni', - method: 'get', - params - }) -} -// 获取topo详情 -export const getTopoDetails = (topoId) => { - return request({ - url: '/custom/query/topo/uni/' + topoId, - method: 'get' - }) -} -// 新增topo -export const addTopo = (data) => { - return request({ - url: '/custom/query/topo/uni', - method: 'post', - data - }) -} - -// 修改topo -export const editTopo = (data) => { - return request({ - url: '/custom/query/topo/uni', - method: 'put', - data - }) -} - -// 删除topo -export const delTopo =(idList) => { - return request({ - url: '/custom/query/topo/uni/' + idList, - method: 'delete' - }) -} diff --git a/src/components/AttachmentUpload.vue b/src/components/AttachmentUpload.vue index 9742001..68101c4 100644 --- a/src/components/AttachmentUpload.vue +++ b/src/components/AttachmentUpload.vue @@ -222,9 +222,6 @@ const singleFileList = ref([]) if (props.formData.fileList !== null && props.formData.fileList?.length > 0) { allFileList.value = props.formData.fileList } -watch(() => props.showTable, (newVal) => { - props.showTable = newVal -}, {deep: true}) watch(() => props.showSingleTable, (newVal) => { props.showSingleTable = newVal }, {deep: true}) @@ -237,7 +234,7 @@ watch(() => props.formData.fileList, (newVal) => { } }, {deep: true}) watch(() => props.otherFileList, (newVal) => { - // console.log('newotherFileList', newVal, props.formData) + // console.log('newotherFileList', newVal) if (props.preview) { if (props.formData.fileList === null || props.formData.fileList?.length === 0) { allFileList.value = newVal @@ -250,6 +247,10 @@ watch(() => props.otherFileList, (newVal) => { allFileList.value = newVal } }, {deep: true}) + +watch(() => props.showTable, (newVal) => { + props.showTable = newVal +}, {deep: true}) watch(() => props.singleList, (newVal) => { // console.log('singleFile', newVal) singleFileList.value = newVal diff --git a/src/components/DetailComponent/AllocationSummaryDetail.vue b/src/components/DetailComponent/AllocationSummaryDetail.vue index e4d866c..99b20ff 100644 --- a/src/components/DetailComponent/AllocationSummaryDetail.vue +++ b/src/components/DetailComponent/AllocationSummaryDetail.vue @@ -1,5 +1,5 @@ + + - - diff --git a/src/views/custom-query/data-adapter/index.vue b/src/views/custom-query/data-adapter/index.vue deleted file mode 100644 index cf07e13..0000000 --- a/src/views/custom-query/data-adapter/index.vue +++ /dev/null @@ -1,285 +0,0 @@ - - - - - diff --git a/src/views/custom-query/datamodel/index.vue b/src/views/custom-query/datamodel/index.vue deleted file mode 100644 index 1c3e130..0000000 --- a/src/views/custom-query/datamodel/index.vue +++ /dev/null @@ -1,392 +0,0 @@ - - - - diff --git a/src/views/custom-query/echarts-editor/EchartsDesign.vue b/src/views/custom-query/echarts-editor/EchartsDesign.vue deleted file mode 100644 index f2e7f7c..0000000 --- a/src/views/custom-query/echarts-editor/EchartsDesign.vue +++ /dev/null @@ -1,233 +0,0 @@ - - - diff --git a/src/views/custom-query/echarts-editor/components/AxisBox.vue b/src/views/custom-query/echarts-editor/components/AxisBox.vue deleted file mode 100644 index 459077f..0000000 --- a/src/views/custom-query/echarts-editor/components/AxisBox.vue +++ /dev/null @@ -1,538 +0,0 @@ - - - diff --git a/src/views/custom-query/echarts-editor/components/ChartsOptions.vue b/src/views/custom-query/echarts-editor/components/ChartsOptions.vue deleted file mode 100644 index f7332c7..0000000 --- a/src/views/custom-query/echarts-editor/components/ChartsOptions.vue +++ /dev/null @@ -1,307 +0,0 @@ - - - diff --git a/src/views/custom-query/echarts-editor/components/EchartsEditor.vue b/src/views/custom-query/echarts-editor/components/EchartsEditor.vue deleted file mode 100644 index d1962db..0000000 --- a/src/views/custom-query/echarts-editor/components/EchartsEditor.vue +++ /dev/null @@ -1,307 +0,0 @@ - - - - diff --git a/src/views/custom-query/echarts-editor/components/barChart/AdvancedSettings.vue b/src/views/custom-query/echarts-editor/components/barChart/AdvancedSettings.vue deleted file mode 100644 index 91d15fd..0000000 --- a/src/views/custom-query/echarts-editor/components/barChart/AdvancedSettings.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - \ No newline at end of file diff --git a/src/views/custom-query/echarts-editor/components/barChart/BasicSetting.vue b/src/views/custom-query/echarts-editor/components/barChart/BasicSetting.vue deleted file mode 100644 index 48817c6..0000000 --- a/src/views/custom-query/echarts-editor/components/barChart/BasicSetting.vue +++ /dev/null @@ -1,140 +0,0 @@ - - - diff --git a/src/views/custom-query/echarts-editor/components/lineChart/AdvancedSettings.vue b/src/views/custom-query/echarts-editor/components/lineChart/AdvancedSettings.vue deleted file mode 100644 index 91d15fd..0000000 --- a/src/views/custom-query/echarts-editor/components/lineChart/AdvancedSettings.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - \ No newline at end of file diff --git a/src/views/custom-query/echarts-editor/components/lineChart/BasicSetting.vue b/src/views/custom-query/echarts-editor/components/lineChart/BasicSetting.vue deleted file mode 100644 index dfce2e3..0000000 --- a/src/views/custom-query/echarts-editor/components/lineChart/BasicSetting.vue +++ /dev/null @@ -1,160 +0,0 @@ - - - diff --git a/src/views/custom-query/echarts-editor/components/pieChart/BasicSetting.vue b/src/views/custom-query/echarts-editor/components/pieChart/BasicSetting.vue deleted file mode 100644 index a8a4a35..0000000 --- a/src/views/custom-query/echarts-editor/components/pieChart/BasicSetting.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/custom-query/echarts-editor/components/pieChart/PieBox.vue b/src/views/custom-query/echarts-editor/components/pieChart/PieBox.vue deleted file mode 100644 index dfd79bc..0000000 --- a/src/views/custom-query/echarts-editor/components/pieChart/PieBox.vue +++ /dev/null @@ -1,116 +0,0 @@ - - - - - diff --git a/src/views/custom-query/echarts-editor/components/radarChart/RadarBox.vue b/src/views/custom-query/echarts-editor/components/radarChart/RadarBox.vue deleted file mode 100644 index 4493dc0..0000000 --- a/src/views/custom-query/echarts-editor/components/radarChart/RadarBox.vue +++ /dev/null @@ -1,110 +0,0 @@ - - - - - diff --git a/src/views/custom-query/echarts-editor/index.vue b/src/views/custom-query/echarts-editor/index.vue deleted file mode 100644 index f2e7f7c..0000000 --- a/src/views/custom-query/echarts-editor/index.vue +++ /dev/null @@ -1,233 +0,0 @@ - - - diff --git a/src/views/custom-query/query-page/index.vue b/src/views/custom-query/query-page/index.vue deleted file mode 100644 index aecc0b0..0000000 --- a/src/views/custom-query/query-page/index.vue +++ /dev/null @@ -1,107 +0,0 @@ - - - - - diff --git a/src/views/custom-query/sql/SqlDesign.vue b/src/views/custom-query/sql/SqlDesign.vue deleted file mode 100644 index cf0a170..0000000 --- a/src/views/custom-query/sql/SqlDesign.vue +++ /dev/null @@ -1,486 +0,0 @@ - - - - - diff --git a/src/views/custom-query/sql/index.vue b/src/views/custom-query/sql/index.vue deleted file mode 100644 index 4dee0f7..0000000 --- a/src/views/custom-query/sql/index.vue +++ /dev/null @@ -1,351 +0,0 @@ - - - - - diff --git a/src/views/custom-query/table-management/editTable.vue b/src/views/custom-query/table-management/editTable.vue deleted file mode 100644 index f5a6b88..0000000 --- a/src/views/custom-query/table-management/editTable.vue +++ /dev/null @@ -1,316 +0,0 @@ - - - - - diff --git a/src/views/custom-query/table-management/importTable.vue b/src/views/custom-query/table-management/importTable.vue deleted file mode 100644 index 0bcfd2c..0000000 --- a/src/views/custom-query/table-management/importTable.vue +++ /dev/null @@ -1,201 +0,0 @@ - - - - diff --git a/src/views/custom-query/table-management/index.vue b/src/views/custom-query/table-management/index.vue deleted file mode 100644 index f5c1df6..0000000 --- a/src/views/custom-query/table-management/index.vue +++ /dev/null @@ -1,249 +0,0 @@ - - - diff --git a/src/views/custom-query/topo/components/changeImage/ChangeImage.vue b/src/views/custom-query/topo/components/changeImage/ChangeImage.vue deleted file mode 100644 index 3ba888e..0000000 --- a/src/views/custom-query/topo/components/changeImage/ChangeImage.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/components/changeImage/SettingImageDialog.vue b/src/views/custom-query/topo/components/changeImage/SettingImageDialog.vue deleted file mode 100644 index 1927844..0000000 --- a/src/views/custom-query/topo/components/changeImage/SettingImageDialog.vue +++ /dev/null @@ -1,62 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/index.vue b/src/views/custom-query/topo/index.vue deleted file mode 100644 index 24c7dec..0000000 --- a/src/views/custom-query/topo/index.vue +++ /dev/null @@ -1,352 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/behavior/click-er-edge.js b/src/views/custom-query/topo/top/behavior/click-er-edge.js deleted file mode 100644 index 9668e04..0000000 --- a/src/views/custom-query/topo/top/behavior/click-er-edge.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/14 23:20 - * @email: clay@hchyun.com - * @description: node er图点击事件 - */ -let vm = null; - -const sendThis = (_this) => { - vm = _this; -}; - -export default { - sendThis, - name: "click-er-edge", - options: { - getEvents() { - return { - "edge:click": "onEdgeClick", - "edge:contextmenu": "onEdgeRightClick" - }; - }, - /** - * 点击连线函数 - * @param event - */ - onEdgeClick(event) { - let clickEdge = event.item; - clickEdge.setState("selected", !clickEdge.hasState("selected")); - this.singleClickEdge(event) - // vm.editCurrentFocus("edge") - // this.updateVmData(event); - }, - /** - * 右键点击线 - * @param event - */ - onEdgeRightClick(event) { - this.singleClickEdge(event) - }, - singleClickEdge(event) { - let graph = vm.getGraph(); - let clickEdge = event.item; - let clickEdgeModel = toRaw(clickEdge.getModel()); - let selectedEdges = graph.findAllByState("edge", "selected"); - // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理 - if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) { - // 先取消所有节点的选中状态 - graph.findAllByState("edge", "selected").forEach(edge => { - edge.setState("selected", false); - }); - // 再添加该节点的选中状态 - clickEdge.setState("selected", true); - vm.editCurrentFocus("edge") - this.updateVmData(event); - }else { - vm.editCurrentFocus("edge") - this.updateVmData(event); - } - }, - updateVmData(event) { - // 更新vm的data: selectedEdge 和 selectedEdgeParams - let clickEdge = event.item; - if (clickEdge.hasState("selected")) { - let clickEdgeModel = toRaw(clickEdge.getModel()); - vm.editSelectedEdge(clickEdge) - let edgeAppConfig = { ...vm.getEdgeAppConfig() }; - Object.keys(edgeAppConfig).forEach(function(key) { - edgeAppConfig[key] = ""; - }); - vm.editSelectedEdgeParams({ - label: clickEdgeModel.label || "", - relationalItem: clickEdgeModel.relationalItem, - sourceColumn: clickEdgeModel.sourceColumn, - targetColumn: clickEdgeModel.targetColumn, - appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig } - }) - } - }, - } -}; diff --git a/src/views/custom-query/topo/top/behavior/click-er-node.js b/src/views/custom-query/topo/top/behavior/click-er-node.js deleted file mode 100644 index b06e324..0000000 --- a/src/views/custom-query/topo/top/behavior/click-er-node.js +++ /dev/null @@ -1,157 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/14 23:20 - * @email: clay@hchyun.com - * @description: node er图点击事件 - */ -const isInBBox = (point, bbox) => { - const { - x, - y - } = point; - const { - minX, - minY, - maxX, - maxY - } = bbox; - - return x < maxX && x > minX && y > minY && y < maxY; -}; - -let vm = null; -const sendThis = (_this) => { - vm = _this; -}; - -export default { - sendThis, - name: "click-er-node", - options: { - getEvents() { - return { - wheel: "scroll", - "node:click": "onNodeClick", - "node:contextmenu": "onNodeRightClick", - "canvas:click": "onCanvasClick" - }; - }, - //滚动事件监听 - scroll(event) { - //禁止滚动的默认事件 - event.preventDefault(); - let graph = vm.getGraph() - // ↓|| vm.getClickCtrlValue() === true - if (vm.getClickCtrlValue()) { - if (graph && !graph.destroyed) { - if (event.deltaY > 0) { - graph.zoom(0.8, {x: event.x, y: event.y}) - } else { - graph.zoom(1.2, {x: event.x, y: event.y}) - } - } - } else { - //graph.getNodes()获取 Combo 中所有子节点 - const nodes = graph.getNodes().filter((n) => { - const bbox = n.getBBox();//获取元素的包围盒。 - //将 clientX/clientY 坐标系的坐标值转换为 pointX/pointY 的坐标值。 - return isInBBox(graph.getPointByClient(event.clientX, event.clientY), bbox); - }); - if (nodes) { - nodes.forEach((node) => { - const model = node.getModel(); - if (model.columns.length < 9) { - return; - } - const idx = model.startIndex || 0; // 获取model的startIndex属性，如果没有则使用0赋值给变量idx - // this.start = idx; // 这里将idx赋值给变量this.start - let startX = model.startX || 0.5; // 获取model的startX属性，如果没有则使用0.5赋值给变量startX - //正值向下滚动，负值向上滚动 - let startIndex = idx + event.deltaY * 0.018; // 计算startIndex值，将idx与event的deltaY属性值乘以0.018相加赋值给变量startIndex - if ((model.columns.length - idx) < 10 && startIndex > idx) { // 判断条件，判断model的columns数组的长度减去idx的值是否小于10，并且startIndex的值是否大于idx - return; // 如果条件满足，则结束函数的执行 - } - startX -= event.deltaX;//deltaX 属性在向右滚动时返回正值，向左滚动时返回负值，否则为 0。 - - //对startIndex进行边界检查和调整 - if (startIndex < 0) { - startIndex = 0; - } - if (startX > 0) { - startX = 0; - } - if (startIndex > model.columns.length - 1) { - startIndex = model.columns.length - 1; - } - - graph.update(node, { - startIndex, - startX - }); - }); - } - } - }, - //节点左键点击监听 - onNodeClick(event) { - if (event) { - vm.editCurrentFocus("node") - vm.editRightMenuShow(false) - this.shrinkage(event); - this.updateVmData(event); - } - }, - /** - * todo 右键打开设置面板 - * @param event - */ - onNodeRightClick(event) { - this.updateVmData(event); - vm.editTableColumnEditOpen(true) - }, - onCanvasClick() { - vm.editCurrentFocus("canvas") - vm.editRightMenuShow(false) - }, - updateVmData(event) { - let clickNode = event.item; - clickNode.setState("selected", true); - vm.editSelectedNode(clickNode); - let clickNodeModel = toRaw(clickNode.getModel()); - let nodeAppConfig = {...vm.getNodeAppConfig()}; - Object.keys(nodeAppConfig).forEach(function (key) { - nodeAppConfig[key] = ""; - }); - vm.editSelectedNodeParams({ - label: clickNodeModel.label || "", - columns: clickNodeModel.columns, - appConfig: {...nodeAppConfig, ...clickNodeModel.appConfig} - }) - }, - shrinkage(e) { - if (!e.item) { - return; - } - const graph = vm.getGraph(); - const name=e.shape.get("name") - if (name === "collapse") { - graph.updateItem(e.item, { - collapsed: true, - size: [300, 50], - height: 44 - }); - setTimeout(() => graph.layout(), 100); - } else if (name === "expand") { - graph.updateItem(e.item, { - collapsed: false, - size: [300, 500], - height: 316 - }); - setTimeout(() => graph.layout(), 100); - } - // else { - // const model = e.item.getModel(); - // } - }, - } -}; diff --git a/src/views/custom-query/topo/top/behavior/drag-add-edge.js b/src/views/custom-query/topo/top/behavior/drag-add-edge.js deleted file mode 100644 index 8758774..0000000 --- a/src/views/custom-query/topo/top/behavior/drag-add-edge.js +++ /dev/null @@ -1,232 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 通过拖拽节点上的锚点添加连线 - */ -import utils from "../../utils"; -import theme from "../theme"; -import {ElMessage} from "element-plus"; - -// 用来获取调用此js的vue组件实例（this） -let vm = null; - -const sendThis = (_this) => { - vm = _this; -}; - -export default { - sendThis, // 暴露函数 - name: "drag-add-edge", - options: { - getEvents() { - return { - "node:mousedown": "onNodeMousedown", - "node:mouseup": "onNodeMouseup", - "edge:mouseup": "onEdgeMouseup", - "mousemove": "onMousemove" - }; - }, - onNodeMousedown(event) { - let self = this; - // 交互过程中的信息 - self.evtInfo = { - action: null, - node: event.item, - target: event.target, - }; - if (self.evtInfo.target && self.evtInfo.target.attrs.name) { - // todo...未来可能针对锚点增加其它功能(例如拖拽调整大小) - switch (self.evtInfo.target.attrs.name) { - case "anchor"://点击锚点中间 - self.evtInfo.action = "drawEdge"; - break; - case "anchorBg"://点击锚点 - self.evtInfo.action = "drawEdge"; - break; - } - } - if (self.evtInfo && self.evtInfo.action) { - self[self.evtInfo.action].start.call(self, event); - } - }, - onNodeMouseup(event) { - let self = this; - if (self.evtInfo && self.evtInfo.action) { - self[self.evtInfo.action].stop.call(self, event); - } - }, - onEdgeMouseup(event) { - let self = this; - if (self.evtInfo && self.evtInfo.action === "drawEdge") { - self[self.evtInfo.action].stop.call(self, event); - } - }, - onMousemove(event) { - let self = this; - if (self.evtInfo && self.evtInfo.action) { - self[self.evtInfo.action].move.call(self, event); - } - }, - drawEdge: { - isMoving: false, - currentLine: null, - start: function (event) { - let self = this; - let themeStyle = theme.defaultStyle; // todo...先使用默认主题，后期可能增加其它风格的主体 - - // ************** 暂存【连线】前的数据状态 start ************** - let graph = vm.getGraph(); - self.historyData = JSON.stringify(graph.save()); - // ************** 暂存【连线】前的数据状态 end ************** - - let sourceAnchor = self.evtInfo.node.getAnchorPoints(); - let sourceNodeModel = toRaw(self.evtInfo.node.getModel()); - // 锚点数据 - let anchorPoints = self.evtInfo.node.getAnchorPoints(); - // 处理线条目标点 - if (anchorPoints && anchorPoints.length) { - // 获取距离指定坐标最近的一个锚点 - sourceAnchor = self.evtInfo.node.getLinkPoint({ - x: event.x, - y: event.y - }) - } - // let relational = vm.getRelationalMap().get(sourceNodeModel.tableId) - let relational = vm.getRelationalMap().map(item => { - if (item.mainId === sourceNodeModel.tableId) { - return item - } - }) - //item.columnName+':'+item.columnComment - let columns = [] - sourceNodeModel.columns.forEach(item => { - let column = { - columnName: item.columnName, - columnComment: item.columnComment - } - columns.push(column) - }) - self.drawEdge.currentLine = self.graph.addItem("edge", { - // id: G6.Util.uniqueId(), // 这种生成id的方式有bug，会重复 - id: utils.generateUUID(), - // 起始节点 - source: sourceNodeModel.id, - sourceColumn: columns, - sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "", - // 终止节点/位置 - relational: relational, - target: { - x: event.x, - y: event.y - }, - type: self.graph.$C.edge.type || "top-cubic", - style: themeStyle.edgeStyle.default || self.graph.$C.edge.style - }); - self.drawEdge.isMoving = true; - }, - move(event) { - let self = this; - if (self.drawEdge.isMoving && self.drawEdge.currentLine) { - self.graph.updateItem(self.drawEdge.currentLine, { - target: { - x: event.x, - y: event.y - } - }); - } - }, - stop(event) { - let self = this; - if (self.drawEdge.isMoving) { - if (self.drawEdge.currentLine === event.item) { - // 画线过程中点击则移除当前画线 - self.graph.removeItem(event.item); - } else { - let targetNode = event.item; - let targetNodeModel = toRaw(targetNode.getModel());//节点的数据模型 - let targetAnchor = null; - // 锚点数据 - let anchorPoints = targetNode.getAnchorPoints(); - // 处理线条目标点 - let relational = self.drawEdge.currentLine.getModel().relational//边的数据模型，start函数中定义的包含该节点的关联关系 - let starts = false; - let relationalItem = null; - if (relational) { - relational.map(item => { - if (item) { - if (item.childId === targetNodeModel.tableId) { - starts = true - relationalItem = item - } else { - starts = false - } - } - }) - } - // 去掉关系验证 - // starts = true - if (starts) { - if (anchorPoints && anchorPoints.length > 0) { - // 获取距离指定坐标最近的一个锚点 - targetAnchor = targetNode.getLinkPoint({ - x: event.x, - y: event.y - }); - } - let columns = [] - targetNodeModel.columns.forEach(item => { - let column = { - columnName: item.columnName, - columnComment: item.columnComment - } - columns.push(column) - }) - self.graph.updateItem(self.drawEdge.currentLine, { - target: targetNodeModel.id, - relationalItem: relationalItem, - targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "", - targetColumn: columns, - }); - - // ************** 记录historyData的逻辑 start ************** - if (self.historyData) { - let graph = self.graph; - // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能 - // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 - if (vm.getUndoCount() > 0) { - vm.editHistoryIndex(vm.getHistoryIndex() - vm.getUndoCount()); // 此时的historyIndex应当更新为【撤销】后所在的索引位置 - for (let i = 1; i <= vm.getUndoCount(); i++) { - let key = `graph_history_${vm.getHistoryIndex() + i}`; - vm.removeHistoryData(key); - } - vm.editUndoCount(0) - } else { - // 正常顺序执行的情况，记录拖拽线 前的数据状态 - let key = `graph_history_${vm.getHistoryIndex()}`; - vm.addHistoryData(key, self.historyData); - } - // 记录拖线后的数据状态 - const index = vm.getHistoryIndex() + 1; - vm.editHistoryIndex(index); - let key = `graph_history_${index}`; - let currentData = JSON.stringify(graph.save()); - vm.addHistoryData(key, currentData); - } - } else { - if (self.evtInfo.node.getModel().tableId === targetNodeModel.tableId) { - ElMessage.warning("不可连接自身") - } else { - ElMessage.warning("两表之间无关联关系") - } - self.graph.removeItem(self.drawEdge.currentLine); - } - // ************** 记录historyData的逻辑 end ************** - } - } - self.drawEdge.currentLine = null; - self.drawEdge.isMoving = false; - self.evtInfo = null; - } - } - } -}; diff --git a/src/views/custom-query/topo/top/behavior/drag-event-edit.js b/src/views/custom-query/topo/top/behavior/drag-event-edit.js deleted file mode 100644 index 10cfd43..0000000 --- a/src/views/custom-query/topo/top/behavior/drag-event-edit.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】) - */ - -// 用来获取调用此js的vue组件实例（this） -let vm = null -let historyData = null - -const sendThis = (_this) => { - vm = _this -} - -export default { - sendThis, // 暴露函数 - name: 'drag-event-edit', - options: { - getEvents() { - return { - 'node:dragstart': 'onNodeDragstart', - 'node:dragend': 'onNodeDragend' - } - }, - onNodeDragstart() { - let graph = vm.getGraph() - if(graph.cfg){ - historyData = JSON.stringify(graph.save()) - } - }, - onNodeDragend() { - if (historyData) { - let graph = vm.getGraph() - // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能 - // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 - if (vm.getUndoCount() > 0) { - vm.editHistoryIndex( vm.getHistoryIndex() - vm.getUndoCount()) // 此时的historyIndex应当更新为【撤销】后所在的索引位置 - for (let i = 1; i <= vm.getUndoCount(); i++) { - let key = `graph_history_${vm.getHistoryIndex() + i}` - vm.removeHistoryData(key) - } - vm.editUndoCount(0); - } else { - // 正常顺序执行的情况，记录拖拽前的数据状态 - let key = `graph_history_${vm.getHistoryIndex()}` - vm.addHistoryData(key, historyData) - } - // 记录拖拽后的数据状态 - const index=vm.getHistoryIndex()+ 1; - vm.editHistoryIndex(index); - let key = `graph_history_${index}` - let currentData = JSON.stringify(graph.save()) - vm.addHistoryData(key, currentData) - } - } - } -} diff --git a/src/views/custom-query/topo/top/behavior/hover-event-edit.js b/src/views/custom-query/topo/top/behavior/hover-event-edit.js deleted file mode 100644 index c6bf0e6..0000000 --- a/src/views/custom-query/topo/top/behavior/hover-event-edit.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 悬浮交互 - */ -// 用来获取调用此js的vue组件实例（this） -let vm = null; -let hourItem = null; -const sendThis = (topo) => { - vm = topo; -}; -export default { - sendThis, // 暴露函数 - name: "hover-event-edit", - options: { - getEvents() { - return { - "node:mouseover": "onNodeHover", - // "node:mouseout": "onNodeOut", - // "mouseleave":"onNodeLeave", - }; - }, - onNodeHover(event) { - let graph = vm.getGraph(); - let hoverNode = event.item; - const name = event.shape.get("name");//todo ?? - const item = event.item; - if (name && name.startsWith("item")) { - graph.updateItem(item, {//更新元素，包括更新数据、样式等 - selectedIndex: Number(name.split("-")[1]) - }); - } else { - graph.updateItem(item, { - selectedIndex: NaN - }); - } - if (name && name.startsWith("marker")) { - hoverNode.setState("hover", true, graph); - hourItem=hoverNode; - }else { - if (hourItem!=null){ - hourItem.setState("hover", false) - } - } - }, - // onNodeOut(event) { - // console.log('移出节点') - // const name = event.shape.get("name"); - // let hoverNode = event.item; - // console.log('name',name) - // if (name && name.startsWith("marker")) { - // hoverNode.setState("hover", false); - // } - // if (hourItem!=null){ - // hourItem.setState("hover", false) - // } - // hoverNode.setState("hover", false); - // }, - // onNodeLeave(event) { - // console.log('移出节点2') - // if (hourItem!=null){ - // hourItem.setState("hover", false) - // } - // } - } -}; diff --git a/src/views/custom-query/topo/top/behavior/index.js b/src/views/custom-query/topo/top/behavior/index.js deleted file mode 100644 index c67b1b0..0000000 --- a/src/views/custom-query/topo/top/behavior/index.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: register behaviors - */ - -import dragAddEdge from './drag-add-edge' -import hoverEventEdit from './hover-event-edit' -import dragEventEdit from './drag-event-edit' -import keyupEventEdit from './keyup-event-edit' -import clickErNode from './click-er-node' -import clickErEdge from './click-er-edge' - -const obj = { - dragAddEdge, - hoverEventEdit, - dragEventEdit, - keyupEventEdit, - clickErNode, - clickErEdge -} - -export default { - obj, - register(G6) { - Object.values(obj).map(item => { - G6.registerBehavior(item.name, item.options) - }) - } -} diff --git a/src/views/custom-query/topo/top/behavior/keyup-event-edit.js b/src/views/custom-query/topo/top/behavior/keyup-event-edit.js deleted file mode 100644 index 181bd83..0000000 --- a/src/views/custom-query/topo/top/behavior/keyup-event-edit.js +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/16 - * @description: edit mode: 键盘事件的交互，主要是删除节点和连线(记录删除前后的数据，用于【撤销】和【重做】) - */ - -// 用来获取调用此js的vue组件实例（this） -let vm = null; - -const sendThis = (_this) => { - vm = _this; -}; - -export default { - sendThis, // 暴露函数 - name: "keyup-event-edit", - options: { - getEvents() { - return { - "keyup": "onKeyup", - "keydown": "onKeydown", - }; - }, - onKeyup(event) { - let graph = vm.getGraph(); - let selectedNodes = graph.findAllByState("node", "selected"); - let selectedEdges = graph.findAllByState("edge", "selected"); - //按住键盘delete-46删除功能 - if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) { - // ************** 记录【删除】前的数据状态 start ************** - let historyData = JSON.stringify(graph.save()); - let key = `graph_history_${vm.getHistoryIndex()}`; - vm.addHistoryData(key, historyData); - // ************** 记录【删除】前的数据状态 end ************** - - // 开始删除 - selectedNodes.forEach(item=>graph.removeItem(item)) - selectedEdges.forEach(item=>graph.removeItem(item)) - // ************** 记录【删除】后的数据状态 start ************** - // 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能 - // 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 - if (vm.getUndoCount() > 0) { - vm.editHistoryIndex( vm.getHistoryIndex() - vm.getUndoCount()); // 此时的historyIndex应当更新为【撤销】后所在的索引位置 - for (let i = 1; i <= vm.getUndoCount(); i++) { - let key = `graph_history_${vm.getHistoryIndex() + i}`; - vm.removeHistoryData(key); - } - vm.editUndoCount(0); - } - // 记录【删除】后的数据状态 - const index=vm.getHistoryIndex()+ 1; - vm.editHistoryIndex(index); - key = `graph_history_${index}`; - let currentData = JSON.stringify(graph.save()); - vm.addHistoryData(key, currentData); - // ************** 记录【删除】后的数据状态 end ************** - } else if (event.keyCode == 17) {//ctrl键，将状态传给父组件，在clickErNode里面编写功能（按住ctrl，滚动后放大缩小ER图） - vm.editClickCtrl(false)//松开则为false - } - }, - onKeydown(event) { - if (event.keyCode == 17) {//ctrl键 - vm.editClickCtrl(true)//为true时：一直按着ctrl，以实现滚轮放大缩小功能 - } - } - } -}; diff --git a/src/views/custom-query/topo/top/components/FooterBar.vue b/src/views/custom-query/topo/top/components/FooterBar.vue deleted file mode 100644 index 4f5e008..0000000 --- a/src/views/custom-query/topo/top/components/FooterBar.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/components/HeaderBar.vue b/src/views/custom-query/topo/top/components/HeaderBar.vue deleted file mode 100644 index eb4df07..0000000 --- a/src/views/custom-query/topo/top/components/HeaderBar.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/config/edge.js b/src/views/custom-query/topo/top/config/edge.js deleted file mode 100644 index e908144..0000000 --- a/src/views/custom-query/topo/top/config/edge.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/16 - * @description: 线条的后期设置 - */ - -export default { - type: 'top-cubic', - style: { - startArrow: false, - endArrow: true - } -} diff --git a/src/views/custom-query/topo/top/config/index.js b/src/views/custom-query/topo/top/config/index.js deleted file mode 100644 index abed973..0000000 --- a/src/views/custom-query/topo/top/config/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/16 - * @description: 配置 - */ - -import edge from './edge' - -export default { - edge -} diff --git a/src/views/custom-query/topo/top/edge/base.js b/src/views/custom-query/topo/top/edge/base.js deleted file mode 100644 index f2b5599..0000000 --- a/src/views/custom-query/topo/top/edge/base.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @author: Clay - * @data: 2019/07/18 - * @description: 线公共方法 - */ - -import utils from '../../utils' - -export default { - draw(cfg, group) { - const { startPoint, endPoint } = cfg - const keyShape = group.addShape('path', { - className: 'edge-shape', - attrs: { - ...cfg.style, - path: [ - ['M', startPoint.x, startPoint.y], - ['L', endPoint.x, endPoint.y] - ] - }, - name: 'edge-shape' - }) - keyShape.attrs.endArrow = true - return keyShape - }, - setState(name, value, item) { - // 设置边状态 - utils.edge.setState(name, value, item) - } -} diff --git a/src/views/custom-query/topo/top/edge/index.js b/src/views/custom-query/topo/top/edge/index.js deleted file mode 100644 index bcbbbe4..0000000 --- a/src/views/custom-query/topo/top/edge/index.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/18 - * @description: register edges - */ - - -import topCubic from './top-cubic' - -const obj = { - topCubic -} - -export default function(G6) { - Object.values(obj).map(item => { - G6.registerEdge(item.name, item.options, item.extendName) - }) -} diff --git a/src/views/custom-query/topo/top/edge/top-cubic.js b/src/views/custom-query/topo/top/edge/top-cubic.js deleted file mode 100644 index c53d53f..0000000 --- a/src/views/custom-query/topo/top/edge/top-cubic.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @author: Clay - * @data: 2019/07/18 - * @description: 曲线 - */ - -import base from './base' -export default { - name: 'top-cubic', - extendName: 'cubic', - options: { - ...base - } -} diff --git a/src/views/custom-query/topo/top/elements/button.vue b/src/views/custom-query/topo/top/elements/button.vue deleted file mode 100644 index f9969c1..0000000 --- a/src/views/custom-query/topo/top/elements/button.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/elements/checkbox.vue b/src/views/custom-query/topo/top/elements/checkbox.vue deleted file mode 100644 index b32dc05..0000000 --- a/src/views/custom-query/topo/top/elements/checkbox.vue +++ /dev/null @@ -1,75 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/elements/dropdown.vue b/src/views/custom-query/topo/top/elements/dropdown.vue deleted file mode 100644 index 4e995c3..0000000 --- a/src/views/custom-query/topo/top/elements/dropdown.vue +++ /dev/null @@ -1,75 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/elements/index.js b/src/views/custom-query/topo/top/elements/index.js deleted file mode 100644 index ff793df..0000000 --- a/src/views/custom-query/topo/top/elements/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @author: clay - * @data: 2019/11/14 - * @description: ClayTop内部的通用组件 - */ - -import Checkbox from './checkbox.vue' -import Button from './button.vue' -import Dropdown from './dropdown.vue' -import Loading from './loading.vue' - -export { - Checkbox, - Button, - Dropdown, - Loading -} diff --git a/src/views/custom-query/topo/top/elements/loading.vue b/src/views/custom-query/topo/top/elements/loading.vue deleted file mode 100644 index fc14dd1..0000000 --- a/src/views/custom-query/topo/top/elements/loading.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/graph/index.js b/src/views/custom-query/topo/top/graph/index.js deleted file mode 100644 index 7f9801d..0000000 --- a/src/views/custom-query/topo/top/graph/index.js +++ /dev/null @@ -1,162 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: 图的布局方式/图的初始化 - */ - -// import d3 from '../plugins/d3-installer' -import * as d3 from 'd3' -import theme from '../theme' - -/** - * 图的布局方式/图的初始化 - * @type {{commonGraph: (function(*, *): G6.Graph)}} - */ -const initGraph = { - /** - * 一般布局 - * @param G6 - * @param options - * @returns {G6.Graph} - */ - commonGraph: function(G6, options) { - let graphData = options.graphData - let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - // 生成G6实例 - let graph = new G6.Graph({ - plugins: options.plugins,//向 graph 注册插件 - container: options.container,//图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。 - width: options.width,//指定画布宽度，单位为 'px'，默认为画布容器宽度。 - height: options.height,//指定画布高度 - // layout: { - // type: 'random', - // width: options.width, - // height: options.height - // }, - defaultNode: {//默认状态下节点的配置 - type: 'dice-er-box', - labelCfg: { - position: 'bottom' - } - }, - defaultEdge: {//默认状态下线的配置 - type: 'top-cubic', - labelCfg: { - position: 'center', - autoRotate: false - } - }, - nodeStateStyles: themeStyle.nodeStyle,//各个状态下节点的样式 - // nodeStyle: { - // selected: { - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - // } - // }, - edgeStateStyles:{ - edgeStyle: { - default: { - stroke: '#e2e2e2', - lineWidth: 3, - lineAppendWidth: 10 - }, - selected: { - shadowColor: '#626262', - shadowBlur: 3 - } - }, - },//各个状态下边的样式 - modes: options.modes//设置画布的交互模式 - }) - // 将 read 方法分解成 data() 和 render 方法，便于整个生命周期的管理 - graph.read(graphData) - // 渲染图 - graph.render() - // 返回G6实例 - return graph - }, - /** - * 力导布局 - * @param G6 - * @param options - * @returns {*} - */ - forceLayoutGraph: function(resolve, G6, options) { - let graphData = options.graphData - let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - // 生成G6实例 - let graph = new G6.Graph({ - container: options.container, - width: options.width, - height: options.height, - nodeStateStyles: themeStyle.nodeStyle, - edgeStateStyles: themeStyle.edgeStyle - }) - // 初始化力导布局 - let simulation = d3 - .forceSimulation() - .force( - 'link', - d3 - .forceLink() - .id(function(d) { - return d.id - }) - .distance(linkDistance) - .strength(0.5) - ) - .force('charge', d3.forceManyBody().strength(-500).distanceMax(500).distanceMin(100)) - .force('center', d3.forceCenter(options.width / 2, options.height / 2)) - // 定义节点数据 - simulation.nodes(graphData.nodes).on('tick', ticked) - // 定义连线数据 - let edges = [] - for (let i = 0; i < graphData.edges.length; i++) { - edges.push({ - id: graphData.edges[i].id, - source: graphData.edges[i].source, - target: graphData.edges[i].target - }) - } - simulation.force('link').links(edges) - graph.data(graphData) - graph.render() - - function linkDistance(d) { - return 150 - } - - function ticked() { - // protect: planA: 移除事件监听器 planB: 手动停止力模拟 - if (graph.destroyed) { - // simulation.nodes(graphData.nodes).on('tick', null) - simulation.stop() - return - } - if (!graph.get('data')) { - // 若是第一次渲染，定义数据，渲染 - graph.data(graphData) - graph.render() - } else { - // 后续渲染，直接刷新所有点和边的位置 - graph.refreshPositions() - } - } - - // 控制时间: 只布局10秒 - let t = setTimeout(function() { - simulation.stop() - resolve(graph) - }, 10000) - - // 判断force-layout结束 - simulation.on('end', () => { - clearTimeout(t) - resolve(graph) - }) - } -} - -export default initGraph diff --git a/src/views/custom-query/topo/top/index.vue b/src/views/custom-query/topo/top/index.vue deleted file mode 100644 index fa3d9fc..0000000 --- a/src/views/custom-query/topo/top/index.vue +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/src/views/custom-query/topo/top/node/dice-er-box.js b/src/views/custom-query/topo/top/node/dice-er-box.js deleted file mode 100644 index 41bd657..0000000 --- a/src/views/custom-query/topo/top/node/dice-er-box.js +++ /dev/null @@ -1,302 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/15 0:16 - * @email: clay@hchyun.com - * @description: draw anchor 绘制锚点 - */ -import utils from '../../utils/index' - -const itemHeight = 30; -export default { - name: 'dice-er-box', - options: { - /** - * 响应节点的状态变化。 - * 在需要使用动画来响应状态变化时需要被复写 - * @param {String} name 状态名称 - * @param {Object} value 状态值 - * @param {item} item 节点 - */ - setState(name, value, item) { - // 设置节点状态 - utils.node.setState(name, value, item); - // 设置锚点状态 - utils.anchor.setState(name, value, item); - }, - draw(cfg, group) { - const width = 250; - const height = 316; - const itemCount = 10; - const boxStyle = { - stroke: "#096DD9", - radius: 4, - }; - - const { - columns = [], - startIndex = 0, - selectedIndex, - collapsed, - icon, - } = cfg; - const list = columns; - const afterList = list.slice( - Math.floor(startIndex), - Math.floor(startIndex + itemCount - 1) - ); - const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; - - //设置表名的容器 - group.addShape("rect", { - attrs: { - fill: boxStyle.stroke, - height: 30, - width, - radius: [boxStyle.radius, boxStyle.radius, 0, 0], - }, - draggable: true, - }); - - //设置左侧字体的边距 - let fontLeft = 12; - - // 设置图标 - if (icon && icon.show !== false) { - group.addShape("image", { - attrs: { - x: 8, - y: 8, - height: 16, - width: 16, - ...icon, - }, - }); - fontLeft += 18; - } - - //设置表名 - group.addShape("text", { - attrs: { - y: 22, - x: fontLeft, - fill: "#fff", - text: cfg.label, - fontSize: 12, - fontWeight: 500, - }, - }); - - //设置收缩部分的容器 - group.addShape("rect", { - attrs: { - x: 0, - y: collapsed ? 30 : 300, - height: 15, - width, - fill: "#eee", - radius: [0, 0, boxStyle.radius, boxStyle.radius], - cursor: "pointer", - }, - name: collapsed ? "expand" : "collapse", - }); - - //设置收缩显示字符 - group.addShape("text", { - attrs: { - x: width / 2 - 6, - y: (collapsed ? 30 : 300) + 12, - text: collapsed ? "+" : "-", - width, - fill: "#000", - radius: [0, 0, boxStyle.radius, boxStyle.radius], - cursor: "pointer", - }, - name: collapsed ? "expand" : "collapse", - }); - - //设置外边框 - const keyshape = group.addShape("rect", { - attrs: { - name: 'border', - x: 0, - y: 0, - width, - height: collapsed ? 45 : height, - ...boxStyle, - }, - //是否被允许拖拽 - draggable: true - }); - - //如果收缩状态,则返回当前图形 - if (collapsed) { - return keyshape; - } - //添加空白组 - const listContainer = group.addGroup({}); - //todo 设置裁剪对象,字体加粗? - listContainer.setClip({ - type: "rect", - attrs: { - x: -8, - y: 30, - width: width + 16, - height: 300 - 30, - }, - }); - listContainer.addShape({ - type: "rect", - attrs: { - x: 1, - y: 30, - width: width - 2, - height: 300 - 30, - fill: "#fff", - }, - draggable: true, - }); - - //如果list中的column字段超过10个 - if (list.length > itemCount) { - const barStyle = { - width: 4, - padding: 0, - boxStyle: { - stroke: "#00000022", - }, - innerStyle: { - fill: "#00000022", - }, - }; - - listContainer.addShape("rect", { - attrs: { - y: 30, - x: width - barStyle.padding - barStyle.width, - width: barStyle.width, - height: height - 30, - ...barStyle.boxStyle, - }, - }); - - //设置矩形高度 - const indexHeight = - afterList.length > itemCount ? - (afterList.length / list.length) * height : - 10; - - listContainer.addShape("rect", { - attrs: { - y: 30 + - barStyle.padding + - (startIndex / (list.length-8)) * (height - 30), - x: width - barStyle.padding - barStyle.width, - width: barStyle.width, - height: Math.min(height, indexHeight), - ...barStyle.innerStyle, - }, - }); - } - //渲染显示区域 - if (afterList) { - afterList.forEach((e, i) => { - //设置选中的列 - const isSelected = Math.floor(startIndex) + i === Number(selectedIndex); - let { - columnName = "", columnType,columnComment - } = e; - if (columnComment){ - columnName+= " : " + columnComment - } - if (columnType) { - columnName += " - " + columnType; - } - const label = columnName.length > 26 ? columnName.slice(0, 24) + "..." : columnName; - - listContainer.addShape("rect", { - attrs: { - x: 1, - y: i * itemHeight - itemHeight / 2 + offsetY, - width: width - 4, - height: itemHeight, - radius: 2, - fill:isSelected ? "#ddd" : "#fff", - lineWidth: 1, - cursor: "pointer", - }, - name: `item-${Math.floor(startIndex) + i}-content`, - draggable: true, - }); - - listContainer.addShape("text", { - attrs: { - x: 12, - y: i * itemHeight + offsetY + 6, - text: label, - fontSize: 12, - fill: "#000", - fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol", - full: e, - fontWeight: isSelected ? 500 : 100, - cursor: "pointer", - }, - name: `item-${Math.floor(startIndex) + i}`, - }); - - //未来设置字段之间有锚点 - // if (!cfg.hideDot) { - // utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY) - // utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY) - // listContainer.addShape("marker", { - // attrs: { - // x: 0, - // y: i * itemHeight + offsetY, - // r: 3, - // stroke: boxStyle.stroke, - // fill: "white", - // radius: 2, - // lineWidth: 1, - // cursor: "crosshair", - // }, - // - // name: 'marker-shape' - // }); - // listContainer.addShape("marker", { - // attrs: { - // x: width, - // y: i * itemHeight + offsetY, - // r: 3, - // stroke: boxStyle.stroke, - // fill: "white", - // radius: 2, - // lineWidth: 1, - // cursor: "crosshair", - // - // - // }, - // name: 'marker-shape' - // }); - // } - }); - } - return keyshape; - }, - // getAnchorPoints() { - // return [ - // [0, 0], - // [1, 0], - // ]; - // }, - // 绘制后附加锚点 - afterDraw(cfg, group) { - // 绘制锚点 - utils.anchor.drawMark(cfg, group) - }, - - } -} - - - - - diff --git a/src/views/custom-query/topo/top/node/index.js b/src/views/custom-query/topo/top/node/index.js deleted file mode 100644 index 7ed5492..0000000 --- a/src/views/custom-query/topo/top/node/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @author: clay - * @data: 2019/07/05 - * @description: register nodes - */ - - -import diceErBox from './dice-er-box' -const obj = { - diceErBox -} - -export default { - obj, - register(G6) { - Object.values(obj).map(item => { - G6.registerNode(item.name, item.options, item.extendName) - }) - } -} diff --git a/src/views/custom-query/topo/top/theme/dark-style.js b/src/views/custom-query/topo/top/theme/dark-style.js deleted file mode 100644 index 5c04978..0000000 --- a/src/views/custom-query/topo/top/theme/dark-style.js +++ /dev/null @@ -1,177 +0,0 @@ -/** - * @author: clay - * @data: 2019/11/20 - * @description: dark style - */ - -export default { - // 节点样式 - nodeStyle: { - default: { - stroke: '#CED4D9', - fill: 'transparent', - shadowOffsetX: 0, - shadowOffsetY: 4, - shadowBlur: 10, - shadowColor: 'rgba(13, 26, 38, 0.08)', - lineWidth: 1, - radius: 4, - strokeOpacity: 0.7 - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - }, - unselected: { - shadowColor: '' - } - }, - //todo 节点标签样式??修改不起 - nodeLabelCfg: { - positions: 'center', - style: { - fill: '#fff' - } - }, - // 连线样式 - edgeStyle: { - default: { - stroke: '#000000', - lineWidth: 2, - strokeOpacity: 0.92, - lineAppendWidth: 10 - // endArrow: true - }, - active: { - shadowColor: 'red', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - inactive: { - shadowColor: '' - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - unselected: { - shadowColor: '' - } - }, - // 锚点样式 - anchorStyle: { - default: { - radius: 3, - symbol: 'circle', - fill: '#FFFFFF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 1, - strokeOpacity: 1 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - // 锚点背景样式 - anchorBgStyle: { - default: { - radius: 10, - symbol: 'circle', - fill: '#1890FF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 0.3, - strokeOpacity: 0.5 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - - - nodeActivedOutterStyle: { lineWidth: 0 }, - groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 }, - nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' }, - groupActivedStyle: { stroke: '#1890FF' }, - edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' }, - nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 }, - groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 }, - - groupBackgroundPadding: [40, 10, 10, 10], - groupLabelOffsetX: 10, - groupLabelOffsetY: 10, - edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - edgeLabelRectPadding: 4, - edgeLabelRectStyle: { fill: 'white' }, - nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - groupStyle: { stroke: '#CED4D9', radius: 4 }, - groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' }, - multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 }, - dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 }, - dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 }, - anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 }, - anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 }, - anchorHotsoptActivedStyle: { radius: 14 }, - anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' }, - nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' }, - edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 }, - nodeSelectedBoxStyle: { stroke: '#C2C2C2' }, - cursor: { - panningCanvas: '-webkit-grabbing', - beforePanCanvas: '-webkit-grab', - hoverNode: 'move', - hoverEffectiveAnchor: 'crosshair', - hoverEdge: 'default', - hoverGroup: 'move', - hoverUnEffectiveAnchor: 'default', - hoverEdgeControllPoint: 'crosshair', - multiSelect: 'crosshair' - }, - nodeDelegationStyle: { - stroke: '#1890FF', - fill: '#1890FF', - fillOpacity: .08, - lineDash: [4, 4], - radius: 4, - lineWidth: 1 - }, - edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 } -} diff --git a/src/views/custom-query/topo/top/theme/default-style.js b/src/views/custom-query/topo/top/theme/default-style.js deleted file mode 100644 index 7838462..0000000 --- a/src/views/custom-query/topo/top/theme/default-style.js +++ /dev/null @@ -1,179 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: default style - */ - -export default { - // 节点样式 - nodeStyle: { - default: { - stroke: '#CED4D9', - fill: 'transparent', - // shadowOffsetX: 0, - // shadowOffsetY: 4, - shadowBlur: 10, - shadowColor: 'rgba(13, 26, 38, 0.08)', - lineWidth: 1, - radius: 4, - strokeOpacity: 0.7 - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 2, - // shadowOffsetX: 0, - // shadowOffsetY: 0, - // fontSize:'50' - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - }, - unselected: { - shadowColor: '' - } - }, - // 节点标签样式 - nodeLabelCfg: { - positions: 'center', - style: { - fill: '#000' - } - }, - // 连线样式 - edgeStyle: { - default: { - stroke: '#A3B1BF', - lineWidth: 2, - strokeOpacity: 0.92, - lineAppendWidth: 10 - // endArrow: true - }, - active: { - shadowColor: 'red', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - inactive: { - shadowColor: '' - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - unselected: { - shadowColor: '' - } - }, - // 锚点样式 - anchorStyle: { - default: { - r: 3, - symbol: 'circle', - lineWidth: 1, - fill: '#FFFFFF', - fillOpacity: 1, - stroke: '#096DD9', - strokeOpacity: 1, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 0.3, - strokeOpacity: 0.5 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 1, - strokeOpacity: 1 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - // 锚点背景样式 - anchorBgStyle: { - default: { - r: 10, - symbol: 'circle', - fill: '#1890FF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 0.3, - strokeOpacity: 0.5 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - - - nodeActivedOutterStyle: { lineWidth: 0 }, - groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 }, - nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' }, - groupActivedStyle: { stroke: '#1890FF' }, - edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' }, - nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 }, - groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 }, - - groupBackgroundPadding: [40, 10, 10, 10], - groupLabelOffsetX: 10, - groupLabelOffsetY: 10, - edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - edgeLabelRectPadding: 4, - edgeLabelRectStyle: { fill: 'white' }, - nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - groupStyle: { stroke: '#CED4D9', radius: 4 }, - groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' }, - multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 }, - dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 }, - dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 }, - anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 }, - anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 }, - anchorHotsoptActivedStyle: { radius: 14 }, - anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' }, - nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' }, - edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 }, - nodeSelectedBoxStyle: { stroke: '#C2C2C2' }, - cursor: { - panningCanvas: '-webkit-grabbing', - beforePanCanvas: '-webkit-grab', - hoverNode: 'move', - hoverEffectiveAnchor: 'crosshair', - hoverEdge: 'default', - hoverGroup: 'move', - hoverUnEffectiveAnchor: 'default', - hoverEdgeControllPoint: 'crosshair', - multiSelect: 'crosshair' - }, - nodeDelegationStyle: { - stroke: '#1890FF', - fill: '#1890FF', - fillOpacity: .08, - lineDash: [4, 4], - radius: 4, - lineWidth: 1 - }, - edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 } -} diff --git a/src/views/custom-query/topo/top/theme/index.js b/src/views/custom-query/topo/top/theme/index.js deleted file mode 100644 index 02e514a..0000000 --- a/src/views/custom-query/topo/top/theme/index.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: 编辑器主题样式 - 节点、连线的预设样式 - */ - -import defaultStyle from './default-style' -import darkStyle from './dark-style' -import officeStyle from './office-style' - -export default { - defaultStyle, - darkStyle, - officeStyle -} diff --git a/src/views/custom-query/topo/top/theme/office-style.js b/src/views/custom-query/topo/top/theme/office-style.js deleted file mode 100644 index b1e21a7..0000000 --- a/src/views/custom-query/topo/top/theme/office-style.js +++ /dev/null @@ -1,177 +0,0 @@ -/** - * @author: clay - * @data: 2019/11/21 - * @description: office style - */ - -export default { - // 节点样式 - nodeStyle: { - default: { - stroke: '#CED4D9', - fill: '#FFFFFF', - shadowOffsetX: 0, - shadowOffsetY: 4, - shadowBlur: 10, - shadowColor: 'rgba(13, 26, 38, 0.08)', - lineWidth: 1, - radius: 4, - strokeOpacity: 0.7 - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 1, - shadowOffsetY: 1 - // shadowColor: '#626262', - // shadowBlur: 8, - // shadowOffsetX: -1, - // shadowOffsetY: 3 - }, - unselected: { - shadowColor: '' - } - }, - // 节点标签样式 - nodeLabelCfg: { - positions: 'center', - style: { - fill: '#000' - } - }, - // 连线样式 - edgeStyle: { - default: { - stroke: '#41c23a', - lineWidth: 2, - strokeOpacity: 0.92, - lineAppendWidth: 10 - // endArrow: true - }, - active: { - shadowColor: 'red', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - inactive: { - shadowColor: '' - }, - selected: { - shadowColor: '#ff240b', - shadowBlur: 4, - shadowOffsetX: 0, - shadowOffsetY: 0 - }, - unselected: { - shadowColor: '' - } - }, - // 锚点样式 - anchorStyle: { - default: { - radius: 3, - symbol: 'circle', - fill: '#FFFFFF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 1, - strokeOpacity: 1 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - // 锚点背景样式 - anchorBgStyle: { - default: { - radius: 10, - symbol: 'circle', - fill: '#1890FF', - fillOpacity: 0, - stroke: '#1890FF', - strokeOpacity: 0, - cursor: 'crosshair' - }, - hover: { - fillOpacity: 1, - strokeOpacity: 1 - }, - unhover: { - fillOpacity: 0, - strokeOpacity: 0 - }, - active: { - fillOpacity: 0.3, - strokeOpacity: 0.5 - }, - inactive: { - fillOpacity: 0, - strokeOpacity: 0 - } - }, - - - nodeActivedOutterStyle: { lineWidth: 0 }, - groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 }, - edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 }, - nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' }, - groupActivedStyle: { stroke: '#1890FF' }, - edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' }, - nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 }, - groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 }, - - groupBackgroundPadding: [40, 10, 10, 10], - groupLabelOffsetX: 10, - groupLabelOffsetY: 10, - edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - edgeLabelRectPadding: 4, - edgeLabelRectStyle: { fill: 'white' }, - nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' }, - groupStyle: { stroke: '#CED4D9', radius: 4 }, - groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' }, - multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 }, - dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 }, - dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 }, - anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 }, - anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 }, - anchorHotsoptActivedStyle: { radius: 14 }, - anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' }, - nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' }, - edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 }, - nodeSelectedBoxStyle: { stroke: '#C2C2C2' }, - cursor: { - panningCanvas: '-webkit-grabbing', - beforePanCanvas: '-webkit-grab', - hoverNode: 'move', - hoverEffectiveAnchor: 'crosshair', - hoverEdge: 'default', - hoverGroup: 'move', - hoverUnEffectiveAnchor: 'default', - hoverEdgeControllPoint: 'crosshair', - multiSelect: 'crosshair' - }, - nodeDelegationStyle: { - stroke: '#1890FF', - fill: '#1890FF', - fillOpacity: .08, - lineDash: [4, 4], - radius: 4, - lineWidth: 1 - }, - edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 } -} diff --git a/src/views/custom-query/topo/top/toolbar-edit.vue b/src/views/custom-query/topo/top/toolbar-edit.vue deleted file mode 100644 index 57c9163..0000000 --- a/src/views/custom-query/topo/top/toolbar-edit.vue +++ /dev/null @@ -1,217 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/toolbar-preview.vue b/src/views/custom-query/topo/top/toolbar-preview.vue deleted file mode 100644 index dadfb70..0000000 --- a/src/views/custom-query/topo/top/toolbar-preview.vue +++ /dev/null @@ -1,183 +0,0 @@ - - - - - diff --git a/src/views/custom-query/topo/top/topology.vue b/src/views/custom-query/topo/top/topology.vue deleted file mode 100644 index bbf7134..0000000 --- a/src/views/custom-query/topo/top/topology.vue +++ /dev/null @@ -1,1808 +0,0 @@ - - - - - - diff --git a/src/views/custom-query/topo/topologyDesign.vue b/src/views/custom-query/topo/topologyDesign.vue deleted file mode 100644 index aedb4b9..0000000 --- a/src/views/custom-query/topo/topologyDesign.vue +++ /dev/null @@ -1,312 +0,0 @@ - - - - - - - diff --git a/src/views/custom-query/topo/utils/anchor/draw_mark.js b/src/views/custom-query/topo/utils/anchor/draw_mark.js deleted file mode 100644 index ee23076..0000000 --- a/src/views/custom-query/topo/utils/anchor/draw_mark.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: 画锚点 - */ - - import theme from '@/views/custom-query/topo/top/theme' -export default function(cfg, group) { - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - let { anchorPoints, width, height, id } = cfg - if (anchorPoints && anchorPoints.length) { - for (let i = 0, len = anchorPoints.length; i < len; i++) { - let [x, y] = anchorPoints[i] - // 计算Marker中心点坐标 - let anchorX = x * width - let anchorY = y * height - // 添加锚点背景 - let anchorBgShape = group.addShape('marker', { - id: id + '_anchor_bg_' + i, - attrs: { - name: 'anchorBg', - x: anchorX, - y: anchorY, - // 锚点默认样式 - ...themeStyle.anchorBgStyle.default - }, - draggable: false, - name: 'markerBg-shape' - }) - // 添加锚点Marker形状 - let anchorShape = group.addShape('marker', { - id: id + '_anchor_' + i, - attrs: { - name: 'anchor', - x: anchorX, - y: anchorY, - // 锚点默认样式 - ...themeStyle.anchorStyle.default - }, - draggable: false, - name: 'marker-shape' - }) - - anchorShape.on('mouseenter', function() { - anchorBgShape.attr({ - ...themeStyle.anchorBgStyle.active - }) - }) - anchorShape.on('mouseleave', function() { - anchorBgShape.attr({ - ...themeStyle.anchorBgStyle.inactive - }) - }) - } - } -} diff --git a/src/views/custom-query/topo/utils/anchor/index.js b/src/views/custom-query/topo/utils/anchor/index.js deleted file mode 100644 index e272fab..0000000 --- a/src/views/custom-query/topo/utils/anchor/index.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: anchor - */ - -import setState from './set-state' -import drawMark from './draw_mark' - -export default { - setState, - drawMark, -} diff --git a/src/views/custom-query/topo/utils/anchor/set-state.js b/src/views/custom-query/topo/utils/anchor/set-state.js deleted file mode 100644 index e1ea5f8..0000000 --- a/src/views/custom-query/topo/utils/anchor/set-state.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: set anchor state - */ -import theme from '@/views/custom-query/topo/top/theme' - -export default function (name, value, item) { - const themeStyle = theme.defaultStyle - if (name === 'hover') { - let group = item.getContainer() - let children = group.get('children') - for (let i = 0, len = children.length; i < len; i++) { - let child = children[i] - // 处理锚点状态 - if (child.attrs.name === 'anchorBg') { - if (value) { - child.attr(themeStyle.anchorStyle.hover) - } else { - child.attr(themeStyle.anchorStyle.unhover) - } - } - } - } -} diff --git a/src/views/custom-query/topo/utils/anchor/update.js b/src/views/custom-query/topo/utils/anchor/update.js deleted file mode 100644 index 5de0430..0000000 --- a/src/views/custom-query/topo/utils/anchor/update.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: update anchor - */ - -export default function(cfg, group) { - let { anchorPoints, width, height, id } = cfg - if (anchorPoints && anchorPoints.length) { - for (let i = 0, len = anchorPoints.length; i < len; i++) { - let [x, y] = anchorPoints[i] - // 计算Marker中心点坐标 - let originX = -width / 2 - let originY = -height / 2 - let anchorX = x * width + originX - let anchorY = y * height + originY - // 锚点背景 - let anchorBgShape = group.findById(id + '_anchor_bg_' + i) - // 锚点 - let anchorShape = group.findById(id + '_anchor_' + i) - anchorBgShape.attr({ - x: anchorX, - y: anchorY - }) - anchorShape.attr({ - x: anchorX, - y: anchorY - }) - } - } -} \ No newline at end of file diff --git a/src/views/custom-query/topo/utils/collapse/index.js b/src/views/custom-query/topo/utils/collapse/index.js deleted file mode 100644 index d43dc28..0000000 --- a/src/views/custom-query/topo/utils/collapse/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/11 17:28 - * @email: clay@hchyun.com - * @description: node - */ -import setState from './set-state' - -export default { - setState -} diff --git a/src/views/custom-query/topo/utils/collapse/set-state.js b/src/views/custom-query/topo/utils/collapse/set-state.js deleted file mode 100644 index 67e19f5..0000000 --- a/src/views/custom-query/topo/utils/collapse/set-state.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @author: clay - * @data: 2021/5/11 17:28 - * @email: clay@hchyun.com - * @description: node 节点收缩和放大 - */ -export default function(e){ - const { - graph - } = this; - const item = e.item; - const shape = e.shape; - if (!item) { - return; - } - - //收缩 - if (shape.get("name") === "collapse") { - graph.updateItem(item, { - collapsed: true, - size: [300, 50], - }); - setTimeout(() => graph.layout(), 100); - //展开 - } else if (shape.get("name") === "expand") { - graph.updateItem(item, { - collapsed: false, - size: [300, 500], - }); - setTimeout(() => graph.layout(), 100); - } -} diff --git a/src/views/custom-query/topo/utils/date.js b/src/views/custom-query/topo/utils/date.js deleted file mode 100644 index 92dbc30..0000000 --- a/src/views/custom-query/topo/utils/date.js +++ /dev/null @@ -1,106 +0,0 @@ -//时间转换为String类型 -const simpleDateFormat=(pattern)=> { - const fmt = new Object(); - fmt.pattern = pattern; - fmt.parse = function (source) { - try { - return new Date(source); - } catch (e) { - console.log("字符串 " + source + " 转时间格式失败！"); - return null; - } - }; - fmt.format = function (date) { - if (typeof (date) == "undefined" || date == null || date == "") { - return ""; - } - try { - date = new Date(date); - } catch (e) { - console.log("时间 " + date + " 格式化失败！"); - return ""; - } - let strTime = this.pattern;//时间表达式的正则 - - const o = { - "M+": date.getMonth() + 1, //月份 - "d+": date.getDate(), //日 - "H+": date.getHours(), //小时 - "m+": date.getMinutes(), //分 - "s+": date.getSeconds(), //秒 - "q+": Math.floor((date.getMonth() + 3) / 3), //季度 - "S": date.getMilliseconds() //毫秒 - }; - if (/(y+)/.test(strTime)) { - strTime = strTime - .replace(RegExp.$1, (date.getFullYear() + "") - .substr(4 - RegExp.$1.length)); - } - for (const k in o) { - if (new RegExp("(" + k + ")").test(strTime)) { - strTime = strTime.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); - } - } - return strTime; - }; - return fmt; -} - -//用于一个函数有多个时间格式转换 -export const simpleDateMoreFormat=(date, formatStr) =>{ - console.log(date,formatStr) - const fmt = simpleDateFormat(formatStr); - date = fmt.parse(date) - return fmt.format(date) -} - -//时间格式化为yyyy.MM -const simpleDateFormatByDot=(date) =>{ - const fmt = simpleDateFormat("yyyy.MM"); - date = fmt.parse(date) - return fmt.format(date) -} - -//时间格式化为yyyy-MM -const simpleDateFormatByLine=(date) =>{ - const fmt = simpleDateFormat("yyyy-MM"); - date = fmt.parse(date) - return fmt.format(date) -} - -//时间格式化为yyyy-MM-dd -const simpleDateFormatByMoreLine=(date) =>{ - const fmt = simpleDateFormat("yyyy-MM-dd"); - date = fmt.parse(date) - return fmt.format(date) -} - -//用于list表里每条记录中的startDate,endDate,格式化为yyyy.MM -const converListDateByDot=(list) =>{ - for (const item of list) { - item.startDate = simpleDateFormatByDot(item.startDate); - item.endDate = simpleDateFormatByDot(item.endDate); - } -} - -//用于data.startDate,data.endDate,格式化为yyyy-MM -const converListDateByLine=(date) =>{ - data.startDate = simpleDateFormatByLine(data.startDate); - data.endDate = simpleDateFormatByLine(data.endDate); -} - - -export default { - simpleDateFormat, - simpleDateMoreFormat, - simpleDateFormatByDot, - simpleDateFormatByLine, - simpleDateFormatByMoreLine, - converListDateByDot, - converListDateByLine -} - - - - - diff --git a/src/views/custom-query/topo/utils/edge/index.js b/src/views/custom-query/topo/utils/edge/index.js deleted file mode 100644 index 8002373..0000000 --- a/src/views/custom-query/topo/utils/edge/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: edge - */ - -import setState from './set-state' - -export default { - setState -} diff --git a/src/views/custom-query/topo/utils/edge/set-state.js b/src/views/custom-query/topo/utils/edge/set-state.js deleted file mode 100644 index fde37f7..0000000 --- a/src/views/custom-query/topo/utils/edge/set-state.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: set edge state - */ - -import theme from '@/views/custom-query/topo/top/theme' - -export default function(name, value, item) { - const group = item.getContainer() - const shape = group.get('children')[0] // 顺序根据 draw 时确定 - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - if (name === 'selected') { - if (value) { - shape.attr(themeStyle.edgeStyle.selected) - } else { - shape.attr(themeStyle.edgeStyle.unselected) - } - } -} diff --git a/src/views/custom-query/topo/utils/index.js b/src/views/custom-query/topo/utils/index.js deleted file mode 100644 index 8cd64c9..0000000 --- a/src/views/custom-query/topo/utils/index.js +++ /dev/null @@ -1,117 +0,0 @@ -/** - * Created by clay on 2019/10/14 - * Description: common utils - */ - -/** - * This is just a simple version of deep copy - * Has a lot of edge cases bug - * If you want to use a perfect deep copy, use lodash's _.cloneDeep - * @param {Object} source - * @returns {Object} targetObj - */ -const deepClone = function(source) { - if (!source && typeof source !== 'object') { - throw new Error('error arguments: deepClone') - } - let targetObj = source.constructor === Array ? [] : {} - Object.keys(source).forEach(key => { - if (source[key] && typeof source[key] === 'object') { - targetObj[key] = deepClone(source[key]) - } else { - targetObj[key] = source[key] - } - }) - return targetObj -} - -/** - * Randomly extract one or more elements from an array - * If you want to use a perfect solution, use lodash's _.sample or _.sampleSize - * @param {Array} arr - * @param {number} count - * @returns {Array} arr - */ -const getRandomArrayElements = function(arr, count = 1) { - if (count > arr.length) { - throw new Error('error arguments: count is greater than length of array') - } - let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index - while (i-- > min) { - index = Math.floor((i + 1) * Math.random()) - temp = shuffled[index] - shuffled[index] = shuffled[i] - shuffled[i] = temp - } - return shuffled.slice(min) -} - -/** - * @author: clay - * @data: 2019/08/15 - * @description: graph utils - */ - -import node from './node' -import anchor from './anchor' -import edge from './edge' -import collapse from './collapse' - -/** - * 比较两个对象的内容是否相同（两个对象的键值都相同） - * @param obj1 - * @param obj2 - * @returns {*} - */ -const isObjectValueEqual = function(obj1, obj2) { - let o1 = obj1 instanceof Object - let o2 = obj2 instanceof Object - // 不是对象的情况 - if (!o1 || !o2) { - return obj1 === obj2 - } - // 对象的属性（key值）个数不相等 - if (Object.keys(obj1).length !== Object.keys(obj2).length) { - return false - } - // 判断每个属性（如果属性值也是对象则需要递归） - for (let attr in obj1) { - let t1 = obj1[attr] instanceof Object - let t2 = obj2[attr] instanceof Object - if (t1 && t2) { - return isObjectValueEqual(obj1[attr], obj2[attr]) - } else if (obj1[attr] !== obj2[attr]) { - return false - } - } - return true -} - - -/** - * 生成uuid算法,碰撞率低于1/2^^122 - * @returns {string} - */ -const generateUUID = function() { - let d = new Date().getTime() - // x 是 0-9 或 a-f 范围内的一个32位十六进制数 - let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { - let r = (d + Math.random() * 16) % 16 | 0 - d = Math.floor(d / 16) - return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16) - }) - return uuid -} - -export default { - node, - anchor, - edge, - collapse, - // 通用工具类函数 - isObjectValueEqual, - generateUUID, - deepClone, - getRandomArrayElements -} - diff --git a/src/views/custom-query/topo/utils/node/index.js b/src/views/custom-query/topo/utils/node/index.js deleted file mode 100644 index 61e5741..0000000 --- a/src/views/custom-query/topo/utils/node/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: node - */ - -import setState from './set-state' - -export default { - setState -} diff --git a/src/views/custom-query/topo/utils/node/set-state.js b/src/views/custom-query/topo/utils/node/set-state.js deleted file mode 100644 index b489c94..0000000 --- a/src/views/custom-query/topo/utils/node/set-state.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @author: clay - * @data: 2019/08/15 - * @description: set node state - */ - -import theme from '@/views/custom-query/topo/top/theme' - -export default function(name, value, item) { - const group = item.getContainer() - const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - let children = group.get('children') - for (let i = 0; i < children.length; i++) { - let child = children[i] - //判断是否为er图的外围,是则改变样式 - if (child.attrs.name === 'border') { - if (name === 'selected') { - if (value) { - child.attr(themeStyle.nodeStyle.selected) - } else { - child.attr(themeStyle.nodeStyle.default) - } - } - } - } -} diff --git a/src/views/expense-management/share/add.vue b/src/views/expense-management/share/add.vue index 5cb9d99..28dbf61 100644 --- a/src/views/expense-management/share/add.vue +++ b/src/views/expense-management/share/add.vue @@ -21,7 +21,7 @@ - + - + - + - + - + - + - + - + - + - +