clay
/
hcybasenew
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: clay:master
Branches Tags
clay:master
..
compare: clay:17358bf2cd23909cf2cfc205cca33c028f5fb516
Branches Tags
clay:master

No commits in common. "master" and "17358bf2cd23909cf2cfc205cca33c028f5fb516" have entirely different histories.
master ... 17358bf2cd

917 changed files with 13779 additions and 47062 deletions
Show Stats Expand all files Collapse all files

3
README.md
View File

@ -1,2 +1 @@
# HcyBase # HcyBase
代码下载优化,做成两个接口,现有的下载接口改为生成到本地,然后再使用通用下载接口下载zip,做到能够有消息提醒,提高用户体验

9
ebts-ui/.env.staging
View File

@ -1,9 +0,0 @@
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# EBTS/测试环境
#VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'https://apig.odliken.top/dev-api'
#VUE_APP_BASE_API = 'http://hchyunapi.tomey.live/dev-api'

BIN
ebts-ui/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

25
ebts-ui/src/api/system/data.js
View File

@ -1,25 +0,0 @@
import request from "@/utils/request";
// 获取查询基本信息
export function RealInfo(id){
return request({
url: "/data/real/"+id,
method: 'get',
})
}
// 查询数据
export function RealData(data){
return request({
url: "/data/real",
method: 'put',
data:data
})
}
// 查询数据
export function exportReal(data){
return request({
url: "/data/real/export",
method: 'put',
data:data
})
}

74
ebts-ui/src/api/system/file.js
View File

@ -1,74 +0,0 @@
import request from '@/utils/request'
// 查询文件信息列表
export function listFile(data) {
return request({
url: '/system/file/list',
method: 'put',
data: data
})
}
// 导出文件信息
export function exportFile(data) {
return request({
url: '/system/file/export',
method: 'put',
data: data
})
}
// 查询文件信息详细
export function getFile(fileId) {
return request({
url: '/system/file/' + fileId,
method: 'get'
})
}
// 新增文件信息
export function addFile(data) {
return request({
url: '/system/file',
method: 'post',
data: data
})
}
// 修改文件信息
export function updateFile(data) {
return request({
url: '/system/file',
method: 'put',
data: data
})
}
// 删除文件信息
export function delFile(fileId) {
return request({
url: '/system/file/' + fileId,
method: 'delete'
})
}
// 获取角色选择框列表
export function getRoleAll(){
return request({
url:'/system/role/optionselect',
method:'get',
params:{
type:2
}
})
}
// 获取文件夹列表
export function getFolder(){
return request({
url:'/system/file/folder',
method:'get',
})
}

54
ebts-ui/src/api/test/a.js
View File

@ -1,54 +0,0 @@
import request from '@/utils/request'
// 查询测试a列表
export function listA(data) {
return request({
url: '/test/a/list',
method: 'put',
data: data
})
}
// 导出测试a
export function exportA(data) {
return request({
url: '/test/a/export',
method: 'put',
data: data
})
}
// 查询测试a详细
export function getA(aid) {
return request({
url: '/test/a/' + aid,
method: 'get'
})
}
// 新增测试a
export function addA(data) {
return request({
url: '/test/a',
method: 'post',
data: data
})
}
// 修改测试a
export function updateA(data) {
return request({
url: '/test/a',
method: 'put',
data: data
})
}
// 删除测试a
export function delA(aid) {
return request({
url: '/test/a/' + aid,
method: 'delete'
})
}

54
ebts-ui/src/api/test/father.js
View File

@ -1,54 +0,0 @@
import request from '@/utils/request'
// 查询关联查询父列表
export function listFather(data) {
return request({
url: '/test/father/list',
method: 'put',
data: data
})
}
// 导出关联查询父
export function exportFather(data) {
return request({
url: '/test/father/export',
method: 'put',
data: data
})
}
// 查询关联查询父详细
export function getFather(id) {
return request({
url: '/test/father/' + id,
method: 'get'
})
}
// 新增关联查询父
export function addFather(data) {
return request({
url: '/test/father',
method: 'post',
data: data
})
}
// 修改关联查询父
export function updateFather(data) {
return request({
url: '/test/father',
method: 'put',
data: data
})
}
// 删除关联查询父
export function delFather(id) {
return request({
url: '/test/father/' + id,
method: 'delete'
})
}

95
ebts-ui/src/api/tool/query.js
View File

@ -1,95 +0,0 @@
import request from '@/utils/request'
// 查询万能查询列表
export function listQuery(query) {
return request({
url: '/tool/query/list',
method: 'get',
params: query
})
}
// 查询万能查询详细
export function getQuery(id) {
return request({
url: '/tool/query/' + id,
method: 'get'
})
}
// 新增万能查询
export function addQuery(data) {
return request({
url: '/tool/query',
method: 'post',
data: data
})
}
// 修改万能查询
export function updateQuery(data) {
return request({
url: '/tool/query',
method: 'put',
data: data
})
}
// 删除万能查询
export function delQuery(id) {
return request({
url: '/tool/query/' + id,
method: 'delete'
})
}
// 导出万能查询
export function exportQuery(query) {
return request({
url: '/tool/query/export',
method: 'get',
params: query
})
}
// 获取条件
export function getQueryInfo(id) {
return request({
url: '/query/'+id,
method: 'get',
})
}
// 修改条件
export function editQueryInfo(data) {
return request({
url: '/query',
method: 'put',
data: data
})
}
// 预览
export function previewQueryData(data) {
return request({
url: '/query/preview',
method: 'put',
data: data
})
}
export function exportMock(data){
return request({
url: '/query/export',
method: 'put',
data: data
})
}
//发布撤销
export function Release(data){
return request({
url: "/query/release",
method: 'put',
data:data
})
}

55
ebts-ui/src/api/tool/relApi.js
View File

@ -1,55 +0,0 @@
import request from "@/utils/request";
/**
* 获取到gen_rel_table表的自增字段
* @returns
*/
export function getRelId(){
return request({
url:'/seq/next/gen_rel_table',
method:'get',
})
}
/**
* 获取关联表表的字段信息
* @param tableName 关联表表名
* @param relId 关联表id
* @returns
*/
export function getRelColumns(tableName,relId){
return request({
url: '/rel/'+tableName+'/'+relId,
method: 'get'
})
}
/**
* 获取表信息
* @returns
*/
export function getTableInfos() {
return request({
url: '/rel/tableinfo',
method: 'get'
})
}
/**
* 获取表字段信息
* @returns
*/
export function getTableColumns(tableName) {
return request({
url: '/rel/'+tableName,
method: 'get'
})
}
/**
* 获取子表所以信息(基本信息 字段信息)
* @returns
*/
export function getRelColumnInfos(tableId) {
return request({
url: '/rel/colums/'+tableId,
method: 'get'
})
}

BIN
ebts-ui/src/assets/logo/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

34
ebts-ui/src/utils/fileUtils.js
View File

@ -1,34 +0,0 @@
import axios from "axios";
import {getToken} from "@/utils/auth";
import {Message} from "element-ui";
export function downloadFile(fileId) {
return axios({
method: 'get',
url: process.env.VUE_APP_BASE_API + '/system/file/download/' + fileId,
headers: {
token: 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
})
}
export function uploadFile(data) {
return axios({
url: process.env.VUE_APP_BASE_API + '/system/file',
method: 'post',
data: data,
headers: {
Authorization: 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
}).then(res => {
if (res.data.code === 200) {
return res.data.data
} else {
Message({
message: res.data.msg,
type: 'error'
})
return false
}
})
}

509
ebts-ui/src/views/system/file/index.vue
View File

@ -1,509 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="文件名称" prop="fileName">
<el-input
v-model="queryParams.fileName"
placeholder="请输入文件名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="文件路径" prop="fileAddr">
<el-input
v-model="queryParams.fileAddr"
placeholder="请输入文件路径"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="文件类型" prop="fileType">
<el-select v-model="queryParams.fileType" placeholder="请选择文件类型" clearable size="small">
<el-option
v-for="dict in fileTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="是否公开" prop="isPublic">
<el-select v-model="queryParams.isPublic" placeholder="请选择是否公开" clearable size="small">
<el-option
v-for="dict in isPublicOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="daterangeCreateTime"
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="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['system:file:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
@click="handleFileUpdate"
v-hasPermi="['system:file:edit']"
>文件上传
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:file:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:file:remove']"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:file:export']"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="fileList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="文件名称" align="center" prop="fileName"/>
<el-table-column label="文件路径" align="center" prop="fileAddr"/>
<el-table-column label="文件类型" align="center" prop="fileType" :formatter="fileTypeFormat"/>
<el-table-column label="文件大小(MB)" align="center" prop="fileSize"/>
<el-table-column label="是否公开" align="center" prop="isPublic" :formatter="isPublicFormat"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button v-if="scope.row.isPublic === '2'"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:file:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:file:remove']"
>删除
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-download"
@click="handleDownload(scope.row)"
>下载
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.params.pageNum"
:limit.sync="queryParams.params.pageSize"
@pagination="getList"
/>
<el-dialog :title="fileForm.title" :visible.sync="fileForm.open" width="500px" append-to-body>
<el-form ref="uploadFrom" :model="form" :rules="rules" label-width="80px">
<el-form-item v-show="isAdd" label="是否公开">
<el-radio-group v-model="form.isPublic" @change="isPublicChange">
<el-radio label="1">公开</el-radio>
<el-radio label="2">保护</el-radio>
</el-radio-group>
</el-form-item>
<div v-show="isPublicShow">
<el-form-item v-show="isAdd" label="文件夹">
<el-select v-model="form.pId" clearable placeholder="请选择">
<el-option
v-for="item in folderOptions"
:key="item.fileId"
:label="item.fileName"
:value="item.fileId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="角色" prop="roleIds">
<el-select v-model="form.roleIds" clearable multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="isAdd">
<el-form-item label="文件类型">
<el-switch
v-model="fileForm.fileType"
active-text="文件"
inactive-text="图片" @change="fileTypeChange">
</el-switch>
</el-form-item>
<el-form-item label="图片上传" v-show="!fileForm.fileType" >
<ImageUpload v-model="fileForm.url" v-on:change="changeAddress"/>
</el-form-item>
<el-form-item label="文件上传" v-show="fileForm.fileType" >
<FileUpload v-model="fileForm.url" v-on:change="changeAddress"/>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {listFile, getFile, delFile, addFile, updateFile, exportFile, getRoleAll, getFolder} from "@/api/system/file";
import {downloadFile} from '@/utils/fileUtils'
import ImageUpload from '@/components/ImageUpload';
import FileUpload from '@/components/FileUpload';
export default {
name: "File",
components: {
ImageUpload,
FileUpload,
},
data() {
const checkRoleIds = (rule, value, callback) => {
if (this.form.isPublic === "2") {
if (value.length === 0) {
callback(new Error('角色不能为空'));
} else {
callback();
}
} else {
callback()
}
};
return {
fileForm: {
title: "",
url: "",
open: false,
fileType: false,
},
// 角色选项
roleOptions: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
isPublicShow: false,
// 总条数
total: 0,
// 文件信息表格数据
fileList: [],
// 弹出层标题
title: "",
isAdd: true,
folderOptions: [],
// 文件类型(文件夹:folder,文件:file)字典
fileTypeOptions: [],
// 是否公开字典
isPublicOptions: [],
// 创建时间时间范围
daterangeCreateTime: [],
// 查询参数
queryParams: {
params: {
pageNum: 1,
pageSize: 10,
},
fileName: null,
fileAddr: null,
fileType: null,
isPublic: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
roleIds: [
{required: true, validator: checkRoleIds, trigger: 'change'},
]
},
};
},
created() {
this.getList();
this.getDicts("sys_fIle_type").then(response => {
this.fileTypeOptions = response.data;
});
this.getDicts("sys_file_public").then(response => {
this.isPublicOptions = response.data;
});
getRoleAll().then(res => {
this.roleOptions = res.data
})
getFolder().then(res => {
this.folderOptions = res.data
})
},
methods: {
/** 查询文件信息列表 */
getList() {
this.loading = true;
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
}
listFile(this.queryParams).then(response => {
this.fileList = response.rows;
this.total = response.total;
this.loading = false;
});
},
fileTypeChange() {
this.form.fileAddr = ""
this.fileForm.url = ""
},
/**
*是否公开值改变
*/
isPublicChange() {
this.isPublicShow = (this.form.isPublic !== "1")
},
/**
* 改变地址
*/
changeAddress(addr) {
this.form.fileAddr = addr
},
/** 文件上传 */
handleFileUpdate() {
this.reset()
this.isAdd = true
this.fileForm.title = "文件上传"
this.fileForm.open = true
},
// 文件类型字典翻译
fileTypeFormat(row, column) {
return this.selectDictLabel(this.fileTypeOptions, row.fileType);
},
// 是否公开字典翻译
isPublicFormat(row, column) {
return this.selectDictLabel(this.isPublicOptions, row.isPublic);
},
// 取消按钮
cancel() {
this.fileForm.open = false;
this.reset();
},
// 下载按钮
handleDownload(row) {
this.$confirm("是否确认下载" + row.fileName + "?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return downloadFile(row.fileId)
}).then(res => {
this.download(res.data.msg);
})
},
// 表单重置
reset() {
this.form = {
fileId: null,
pId: null,
roleIds: [],
fileName: null,
mapping: null,
fileAddr: null,
fileType: null,
isPublic: "1",
};
this.isPublicShow = false
this.fileForm.url = null
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeCreateTime = [];
this.resetForm("queryForm");
this.handleQuery();
},
/**
* 多选框选中数据
*/
handleSelectionChange(selection) {
this.ids = selection.map(item => item.fileId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加文件信息";
},
changeArray() {
let roleIds = this.form.roleIds.split(",")
this.form.roleIds = []
for (let i = 0; i < roleIds.length; i++) {
this.form.roleIds[i] = parseInt(roleIds[i])
}
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.isAdd = false
this.isPublicShow = true
const fileId = row.fileId || this.ids
getFile(fileId).then(response => {
this.form = response.data;
this.changeArray()
this.fileForm.open = true;
this.fileForm.title = "修改文件信息";
console.log(this.form)
});
},
/** 提交按钮 */
submitForm() {
this.$refs["uploadFrom"].validate(valid => {
if (valid) {
let roleIds = ""
if (this.form.isPublic ==="2"){
for (let i = 0; i < this.form.roleIds.length; i++) {
roleIds += this.form.roleIds[i]
if (i < this.form.roleIds.length - 1) {
roleIds += ","
}
}
}
this.form.roleIds = roleIds
if (this.form.fileId != null) {
updateFile(this.form).then(response => {
this.msgSuccess("修改成功");
this.fileForm.open = false;
this.changeArray()
this.getList();
});
} else {
addFile(this.form).then(response => {
this.msgSuccess("新增成功");
this.fileForm.open = false;
this.changeArray()
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const fileIds = row.fileId || this.ids;
this.$confirm('是否确认删除文件信息编号为"' + fileIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delFile(fileIds);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有文件信息数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return exportFile(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
};
</script>

173
ebts-ui/src/views/system/query/queryDate.vue
View File

@ -1,173 +0,0 @@
<template>
<div class="app-container">
<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="realDate.data">
<el-table-column v-for="item in realDate.header"
:label="item"
align="center"
:key="item"
:prop="item"/>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="handleQuery"
/>
</div>
</template>
<script>
import {RealInfo, RealData,exportReal} from "@/api/system/data"
function listInit(list) {
for (let i = 0; i < list.length; i++) {
if (list[i].type == 2) {
list[i].ucReal = {begin: null, end: null}
} else if (list[i].type == 4) {
list[i].ucReal = []
}
}
return list;
}
export default {
name: "queryDate",
data() {
return {
dataId: null,
uconList: [],
showSearch: true,
realDate: {
data: [],
header: [],
},
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
}
},
created() {
this.dataId = this.$route.fullPath.split("/")[3]
RealInfo(this.dataId).then(res => {
this.uconList = listInit(res.data)
})
this.handleQuery()
},
methods: {
outPlaceholder(item) {
return "请输入" + item.ucName
},
/**
* 重置
*/
resetQuery() {
for (let i = 0; this.uconList.length; i++) {
this.uconList[i].ucReal = null
}
},
/**
* 搜索
*/
handleQuery() {
let data = {
id: this.dataId,
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
}
data.uniCons = this.uconList
RealData(data).then(res => {
this.realDate.data = res.rows
this.total = res.total
this.realDate.header = []
for (var key in this.realDate.data[0]) {
this.realDate.header.push(key)
}
})
},
/** 导出按钮操作 */
handleExport() {
var that = this
this.$confirm('是否确认导出查询数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
let data = {
id:that.dataId,
uniCons:that.uconList,
}
return exportReal(data)
}).then(response => {
this.download(response.msg);
})
}
}
}
</script>
<style scoped>
</style>

224
ebts-ui/src/views/system/top/demo-topology.vue
View File

@ -1,224 +0,0 @@
<template>
<div class="demo-topology">
<topology
ref="topology"
:graph-data="graphData"
:node-app-config="nodeAppConfig"
@doAutoRefresh="doAutoRefresh"
@doManualRefresh="doManualRefresh"
@doChangeMode="doChangeMode"
@doSaveData="doSaveData"
>
</topology>
</div>
</template>
<script>
/* 局部注册 */
import Topology from "./packages/topology/src/topology";
import { deepClone } from "./utils/index";
export default {
name: "DemoTopology",
components: {
"topology": Topology
},
data() {
return {
graphData: {
nodes: [
{
"id": "info",
"label": "Employee",
"attrs": [{
"key": "id",
"type": "number(6)"
},
{
"key": "key",
"type": "varchar(255)"
},
{
"key": "gender",
"type": "enum(M, F)"
},
{
"key": "birthday",
"type": "date"
},
{
"key": "hometown",
"type": "varchar(255)"
},
{
"key": "country",
"type": "varchar(255)"
},
{
"key": "nation",
"type": "varchar(255)"
},
{
"key": "jobId",
"type": "number(3)",
"relation": [{
"key": "id",
"nodeId": "job"
}]
},
{
"key": "phone",
"type": "varchar(255)"
},
{
"key": "deptId",
"type": "number(6)",
"relation": [{
"key": "id",
"nodeId": "dept"
}]
},
{
"key": "startTime",
"type": "date"
},
{
"key": "leaveTime",
"type": "date"
}
]
},
{
"id": "job",
"label": "Job",
"attrs": [{
"key": "id",
"type": "number(3)"
},
{
"key": "title",
"type": "varchar(255)"
},
{
"key": "level",
"type": "number(3)"
}
]
},
{
"id": "dept",
"label": "Department",
"attrs": [{
"key": "id",
"type": "number(6)"
},
{
"key": "title",
"type": "varchar(255)"
},
{
"key": "desc",
"type": "text"
},
{
"key": "parent",
"type": "number(6)",
"relation": [{
"key": "id",
"nodeId": "dept"
}]
},
{
"key": "manager",
"type": "number(6)"
}
]
}
],
edges: [
{
"source": "info",
"target": "job",
"sourceKey": "jobId",
"targetKey": "id"
},
{
"source": "info",
"target": "dept",
"sourceKey": "deptId",
"targetKey": "id"
},
{
"source": "dept",
"target": "dept",
"sourceKey": "parent",
"targetKey": "id"
}
]
},
nodeTypeList: [
// { guid: "blue", label: "蓝色", imgSrc: require("../../assets/images/blue.svg") },
// { guid: "green", label: "绿色", imgSrc: require("@/assets/images/green.svg") },
// { guid: "purple", label: "紫色", imgSrc: require("@/assets/images/purple.svg") }
],
// 节点配置
nodeAppConfig: {
ip: "节点IP",
port: "节点端口",
sysName: "设备名称"
},
autoRefreshTimer: null
};
},
mounted() {
let graphData = deepClone(this.graphData);
this.$refs.topology.initTopo(graphData);
this.randomChange();
},
methods: {
doAutoRefresh(interval) {
if (interval === -1) {
clearInterval(this.autoRefreshTimer);
} else {
clearInterval(this.autoRefreshTimer);
this.autoRefreshTimer = setInterval(() => {
this.randomChange();
}, interval);
this.$once("hook:beforeDestroy", () => {
clearInterval(this.autoRefreshTimer);
});
}
},
doChangeMode(graphMode) {
clearInterval(this.autoRefreshTimer);
let graphData = deepClone(this.graphData);
this.$refs.topology.changeGraphMode(graphData, graphMode);
},
doManualRefresh() {
this.randomChange();
},
doSaveData(graphData) {
console.log(JSON.stringify(graphData));
},
randomChange() {
let graphData = deepClone(this.$refs.topology.getGraphData());
let { nodes } = graphData;
this.$refs.topology.changeGraphData(graphData);
}
}
};
</script>
<style lang="scss" scoped>
.demo-topology {
width: 100%;
height: 100%;
}
</style>
<style lang="scss">
html {
overflow-x: hidden;
overflow-y: hidden;
}
</style>

109
ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.css
View File

@ -1,109 +0,0 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1568972645985'); /* IE9 */
src: url('iconfont.eot?t=1568972645985#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1568972645985') format('woff'),
url('iconfont.ttf?t=1568972645985') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1568972645985#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-download:before {
content: "\e68d";
}
.icon-zoom-out:before {
content: "\e69c";
}
.icon-image:before {
content: "\e752";
}
.icon-iconedit:before {
content: "\e650";
}
.icon-actualsize:before {
content: "\e665";
}
.icon-copy:before {
content: "\e61c";
}
.icon-zoom-in:before {
content: "\e600";
}
.icon-clear:before {
content: "\e700";
}
.icon-flow-line:before {
content: "\e660";
}
.icon-redo:before {
content: "\e716";
}
.icon-undo:before {
content: "\e71a";
}
.icon-fit:before {
content: "\e7cb";
}
.icon-to-front:before {
content: "\e7cc";
}
.icon-to-back:before {
content: "\e7cd";
}
.icon-roi-select:before {
content: "\e7ce";
}
.icon-json:before {
content: "\e623";
}
.icon-fullscreen:before {
content: "\e648";
}
.icon-broken:before {
content: "\e9ad";
}
.icon-curve:before {
content: "\e9b0";
}
.icon-paste:before {
content: "\e963";
}
.icon-group:before {
content: "\e915";
}
.icon-ungroup:before {
content: "\e917";
}
.icon-arrow-dropdown:before {
content: "\e601";
}

BIN
ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.eot
View File

Binary file not shown.

1
ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

95
ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.svg
View File

@ -1,95 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="download" unicode="&#59021;" d="M135.377782 555.885765l277.111319 0L412.4891 830.342628l207.41905 0 0-274.457886 272.656867 0L513.970376 147.641851 135.377782 555.885765 135.377782 555.885765zM892.268258 145.226848l0-66.952878L136.666124 78.27397l0 66.952878L65.878918 145.226848l0-204.12912L136.666124-58.902272l755.603157 0 65.849754 0 0 204.12912L892.268258 145.226848 892.268258 145.226848zM892.268258 145.226848" horiz-adv-x="1024" />
<glyph glyph-name="zoom-out" unicode="&#59036;" d="M950.075-14.436l-225.921 221.773c123.199 146.698 115.857 366.528-22.075 504.482-145.758 145.751-382.898 145.751-528.647 0-145.752-145.745-145.752-382.87 0-528.615 135.794-135.787 350.91-145.037 497.546-27.789l227.045-222.879c13.304-13.055 34.675-12.864 47.736 0.447l4.758 4.84c13.057 13.306 12.86 34.681-0.442 47.741l0 0zM226.091 235.862c-116.713 116.708-116.713 306.595 0 423.301 116.712 116.713 306.604 116.713 423.323 0 116.68-116.706 116.68-306.593 0-423.289-116.72-116.72-306.611-116.72-423.323-0.012l0 0zM214.441 484.734l446.604 0 0-74.435-446.604 0 0 74.435zM214.441 484.734z" horiz-adv-x="1024" />
<glyph glyph-name="image" unicode="&#59218;" d="M896 704 128 704 128 64 896 64 896 704ZM1024 832 1024 832 1024-64 0-64 0 832 1024 832ZM832 128 192 128 192 256 384 576 647.008 256 832 384 832 320ZM640 544A3 3 2520 1 0 832 544 3 3 2520 1 0 640 544z" horiz-adv-x="1024" />
<glyph glyph-name="iconedit" unicode="&#58960;" d="M893.46655 451.99051l0-444.912046c0-35.100426-28.426423-63.558571-63.557548-63.558571L130.761648-56.480106c-35.068703 0-63.558571 28.459169-63.558571 63.558571L67.203076 706.225819c0 35.132148 28.489868 63.558571 63.558571 63.558571l444.911022 0 0-61.540611L128.77541 708.243779l0-701.165314 701.133591 0L829.909002 451.99051 893.46655 451.99051zM487.78397 229.659843l-201.912639-64.520479 64.490803 201.909569L487.78397 229.659843zM398.007271 412.085662l134.848221-134.808312 313.198212 313.199235L711.194226 725.274664 398.007271 412.085662zM935.921477 770.251018l-44.936445 44.938492c-24.827455 24.827455-65.049528 24.827455-89.876983 0l-43.530422-43.532469 134.808312-134.849244 43.535539 43.535539C960.752002 705.17079 960.752002 745.42254 935.921477 770.251018z" horiz-adv-x="1024" />
<glyph glyph-name="actualsize" unicode="&#58981;" d="M716.8 793.6L716.8 725.33333333 853.33333333 725.33333333 853.33333333 588.8 921.6 588.8 921.6 725.33333333 921.6 793.6ZM853.33333333 42.66666667000004L716.8 42.66666667000004 716.8-25.600000000000023 921.6-25.600000000000023 921.6 42.66666667000004 921.6 179.20000000000005 853.33333333 179.20000000000005ZM170.66666667 179.20000000000005L102.4 179.20000000000005 102.4 42.66666667000004 102.4-25.600000000000023 307.2-25.600000000000023 307.2 42.66666667000004 170.66666667 42.66666667000004ZM170.66666667 725.33333333L307.2 725.33333333 307.2 793.6 102.4 793.6 102.4 725.33333333 102.4 588.8 170.66666667 588.8ZM238.93333333 589.0047999999999l0-410.0096C238.93333333 141.85813333 269.38026667 110.93333332999998 306.9952 110.93333332999998l410.0096 0C754.14186667 110.93333332999998 785.06666667 141.38026666999997 785.06666667 178.99519999999995L785.06666667 589.0047999999999C785.06666667 626.14186667 754.61973333 657.06666667 717.0048 657.06666667L306.9952 657.06666667C269.85813333 657.06666667 238.93333333 626.6197333299999 238.93333333 589.0047999999999zM307.2 588.8l409.6 0 0-409.6L307.2 179.20000000000005 307.2 588.8z" horiz-adv-x="1024" />
<glyph glyph-name="copy" unicode="&#58908;" d="M704 256h256v-355.968c0-15.424-12.608-28.032-28.032-28.032h-455.936c-15.424 0-28.032 12.608-28.032 28.032v583.936c0 15.424 12.608 28.032 31.168 28.032h224.832v-256zM768 506.624v-186.624h192l-182.464 186.624h-9.536zM448 826.624v-122.624h128l-118.464 122.624h-9.536zM384 576h192v64h-192v192h-288.832c-18.56 0-31.168-12.608-31.168-28.032v-644.8c0-15.424 12.608-28.032 28.032-28.032h291.968v444.864z" horiz-adv-x="1024" />
<glyph glyph-name="zoom-in" unicode="&#58880;" d="M968.842667-12.501333L726.698667 229.642667A382.293333 382.293333 0 0 1 810.666667 469.333333C810.666667 681.408 638.752 853.333333 426.666667 853.333333 214.592 853.333333 42.666667 681.408 42.666667 469.333333s171.925333-384 384-384c90.666667 0 173.994667 31.413333 239.690666 83.978667l242.144-242.144a42.666667 42.666667 0 0 1 60.341334 60.330667zM426.666667 170.666667c-164.949333 0-298.666667 133.717333-298.666667 298.666666s133.717333 298.666667 298.666667 298.666667c164.96 0 298.666667-133.717333 298.666666-298.666667S591.626667 170.666667 426.666667 170.666667z m170.666666 298.666666a42.666667 42.666667 0 0 0-42.666666-42.666666h-85.333334v-85.333334a42.666667 42.666667 0 0 0-85.333333 0v85.333334h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h85.333333v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666667z" horiz-adv-x="1024" />
<glyph glyph-name="clear" unicode="&#59136;" d="M791.04 583.68H768V0h-76.8V583.68h-128V0h-76.8V583.68h-128V0h-76.8V583.68H128V-25.6c0-56.32 46.08-102.4 104.96-102.4h558.08c58.88 0 104.96 46.08 104.96 102.4V583.68c0 5.12-46.08 0-104.96 0M947.2 768h-230.4V829.44C716.8 867.84 652.8 896 614.4 896h-204.8c-38.4 0-102.4-28.16-102.4-66.56V768H76.8c-28.16 0-51.2-23.04-51.2-51.2s23.04-51.2 51.2-51.2h870.4c28.16 0 51.2 23.04 51.2 51.2s-23.04 51.2-51.2 51.2M614.4 768h-204.8V793.6h204.8v-25.6m0 0z" horiz-adv-x="1024" />
<glyph glyph-name="flow-line" unicode="&#58976;" d="M563.2 188.2112V579.7888A122.624 122.624 0 0 1 634.88 691.2a122.88 122.88 0 1 1-245.76 0c0-49.5104 29.4912-91.9552 71.68-111.4112v-391.6288A122.5216 122.5216 0 0 1 389.12 76.8a122.88 122.88 0 1 1 245.76 0c0 49.5104-29.44 91.9552-71.68 111.4112zM512 762.112a70.8608 70.8608 0 1 0 0-141.7216 70.8608 70.8608 0 0 0 0 141.7216z m0-756.224a70.912 70.912 0 1 0 0 141.824 70.912 70.912 0 0 0 0-141.824z" horiz-adv-x="1024" />
<glyph glyph-name="redo" unicode="&#59158;" d="M999.551 549.05c13.299 0 24-10.8 24.1-24v-358c0-17.7-14.301-32-32-32h-358.1c-6.4 0-12.5 2.5-17 7-9.4 9.3-9.4 24.5 0 33.9l127 127c-82.201 101.8-208 167-349.001 167-170.3 0-318.4-95-394.2-235 45.7 227 246.2 398 486.7 398 160.101 0 302.399-75.7 393.2-193.3l102.301 102.4c4.5 4.5 10.599 7 17 7z" horiz-adv-x="1024" />
<glyph glyph-name="undo" unicode="&#59162;" d="M41.353 542.029a23.998 23.998 0 0 1-16.97 7.029c-13.255 0-24-10.744-24-24V167c0-17.673 14.327-32 32-32h358.06a24 24 0 0 1 16.969 7.029c9.373 9.373 9.373 24.568 0 33.941L280.418 302.965C362.539 404.832 488.35 470 629.383 470c170.332 0 318.462-95.059 394.234-235.02C977.931 462.016 777.375 633 536.883 633c-160.045 0-302.403-75.725-393.2-193.3L41.353 542.029z" horiz-adv-x="1024" />
<glyph glyph-name="fit" unicode="&#59339;" d="M640 608V800c0 19.2 12.8 32 32 32s32-12.8 32-32v-160h160c19.2 0 32-12.8 32-32s-12.8-32-32-32h-192c-6.4 0-12.8 0-19.2 6.4h-6.4c0 12.8-6.4 19.2-6.4 25.6zM288 832c-19.2 0-32-12.8-32-32v-160H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h192c6.4 0 12.8 0 19.2 6.4h6.4c6.4 6.4 6.4 12.8 6.4 19.2v192C320 819.2 307.2 832 288 832z m576-576h-192c-6.4 0-12.8 0-19.2-6.4h-6.4c-6.4-6.4-6.4-12.8-6.4-19.2v-192c0-19.2 12.8-32 32-32s32 12.8 32 32V192h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-550.4-12.8c-6.4 6.4-6.4 6.4 0 0-12.8 6.4-19.2 12.8-25.6 12.8H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h160v-160c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 6.4-6.4 12.8-6.4 19.2zM480 544c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" horiz-adv-x="1024" />
<glyph glyph-name="to-front" unicode="&#59340;" d="M768 300.8c-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2L358.4 697.6c-6.4 0-19.2 0-25.6-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l390.4-96c6.4 0 19.2 0 25.6 6.4l307.2 268.8c25.6 6.4 25.6 19.2 25.6 25.6zM217.6 377.6l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224 96 300.8l121.6 76.8z m204.8-320l-320 76.8 108.8 76.8L416 160c6.4 0 19.2 0 25.6 6.4L576 288l83.2-12.8-236.8-217.6z m473.6 448l140.8-179.2h-96c-6.4-115.2-76.8-211.2-179.2-262.4 51.2 70.4 83.2 153.6 83.2 249.6v12.8h-96l147.2 179.2z" horiz-adv-x="1036" />
<glyph glyph-name="to-back" unicode="&#59341;" d="M729.6 320l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2L364.8 697.6c-6.4 0-12.8 0-19.2-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6s12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l384-89.6c6.4 0 19.2 0 25.6 6.4l300.8 268.8c6.4 6.4 12.8 19.2 6.4 25.6 12.8 6.4 6.4 12.8-6.4 12.8zM364.8 646.4l300.8-44.8L416 384l-313.6 76.8 262.4 185.6z m-147.2-268.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224l-313.6 76.8 115.2 76.8z m723.2-134.4h96L896 64l-140.8 179.2h96V256c0 96-32 179.2-83.2 249.6 102.4-51.2 172.8-153.6 172.8-262.4z" horiz-adv-x="1036" />
<glyph glyph-name="roi-select" unicode="&#59342;" d="M64 704h64v-64H64V704z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64zM64 768V832h64v-64H64z m128 0V832h64v-64H192z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 64h64v-64h-64V832z m0-128h64v-64h-64V704z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64zM64 0v64h64v-64H64z m128 0v64h64v-64H192z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m384 64v128h64v-128h128v-64h-128v-128h-64v128h-128v64h128z m-256-64v64h64v-64h-64z m-128 576v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM256 320v-64h256v64H256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64H256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z" horiz-adv-x="1024" />
<glyph glyph-name="json" unicode="&#58915;" d="M921.6 716.8L798.72 844.8c-30.72 30.72-76.8 51.2-117.76 51.2H256c-40.96 0-71.68-35.84-71.68-71.68v-353.28h56.32V824.32c0 10.24 5.12 15.36 15.36 15.36h435.2v-235.52h225.28v-660.48c0-10.24-5.12-15.36-15.36-15.36H256c-10.24 0-15.36 5.12-15.36 15.36v107.52H184.32v-102.4c0-40.96 30.72-76.8 71.68-76.8h645.12c40.96 0 71.68 35.84 71.68 71.68V568.32c-5.12 51.2-20.48 102.4-51.2 148.48z m-174.08-61.44V803.84c5.12 0 5.12-5.12 10.24-10.24l128-128 10.24-10.24h-148.48zM798.72 455.68H92.16c-20.48 0-35.84-20.48-35.84-40.96v-276.48c0-20.48 15.36-40.96 40.96-40.96h701.44c20.48 0 40.96 15.36 40.96 40.96V414.72c-5.12 20.48-20.48 40.96-40.96 40.96zM225.28 368.64v-133.12c0-15.36-5.12-30.72-15.36-40.96-10.24-10.24-25.6-15.36-40.96-15.36-10.24 0-20.48 0-30.72 5.12v35.84h20.48c5.12 0 10.24 0 15.36 5.12 5.12 0 5.12 5.12 5.12 5.12v143.36h46.08z m168.96-40.96l-35.84-10.24c-5.12 15.36-15.36 25.6-30.72 20.48-15.36 0-25.6-5.12-25.6-15.36 0-5.12 0-10.24 5.12-10.24 5.12-5.12 15.36-5.12 20.48-10.24 15.36 0 30.72-5.12 40.96-10.24 10.24-5.12 15.36-10.24 20.48-20.48 5.12-10.24 10.24-20.48 10.24-30.72 0-15.36-5.12-30.72-20.48-46.08-15.36-10.24-35.84-15.36-56.32-15.36-20.48 0-35.84 5.12-51.2 15.36-15.36 5.12-25.6 20.48-25.6 35.84l40.96 10.24c5.12-15.36 20.48-30.72 40.96-25.6 10.24 0 15.36 0 20.48 5.12 5.12 5.12 5.12 10.24 5.12 15.36 0 5.12 0 10.24-5.12 15.36-10.24 5.12-15.36 5.12-25.6 10.24-20.48 5.12-35.84 10.24-51.2 20.48-10.24 5.12-15.36 15.36-15.36 30.72s5.12 30.72 20.48 40.96c15.36 10.24 30.72 20.48 51.2 15.36 25.6 5.12 56.32-10.24 66.56-40.96z m102.4-148.48c-25.6 0-46.08 10.24-56.32 30.72-15.36 20.48-20.48 46.08-20.48 71.68 0 25.6 5.12 51.2 20.48 66.56 15.36 20.48 35.84 30.72 61.44 25.6 25.6 0 46.08-10.24 61.44-30.72 15.36-20.48 20.48-40.96 20.48-66.56s-5.12-51.2-20.48-71.68c-20.48-15.36-40.96-25.6-66.56-25.6z m0 158.72c-20.48 0-30.72-20.48-30.72-61.44s10.24-61.44 35.84-61.44c20.48 0 30.72 20.48 30.72 61.44s-10.24 61.44-35.84 61.44z m250.88 30.72V179.2h-35.84l-71.68 128V179.2h-30.72v189.44h46.08l66.56-112.64v107.52l25.6 5.12z" horiz-adv-x="1024" />
<glyph glyph-name="fullscreen" unicode="&#58952;" d="M704 480l188.2 184.4 99.8-99.8V864H704l88.4-96-180.4-192 92-96z m-96-288l184.4-188.2-100-99.8H992V192l-96-88.4-192 180.4-96-92z m-288 96l-188.2-184.4-99.8 100V-96h288l-88.4 96 180.4 192-92 96z m96 288l-184.4 188.2 100 99.8H32v-288l96 88.4 192-180.4 96 92z" horiz-adv-x="1024" />
<glyph glyph-name="broken" unicode="&#59821;" d="M880.71104 160a144.096 144.096 0 0 1-134.08-95.008L746.31104 64h-185.6V800H279.75104c-20.352 56.416-73.44 96-135.776 96A144 144 0 1 1 279.43104 703.008L279.75104 704h184.96v-732.8h279.68c19.424-58.08 73.344-99.2 136.864-99.2a144 144 0 0 1 0 288h-0.576 0.032zM144.71104 694.4a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z m736-736a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z" horiz-adv-x="1025" />
<glyph glyph-name="curve" unicode="&#59824;" d="M927.488273 152.021587V320.758959c0 264.73871-214.628824 479.367534-479.367534 479.367534H279.383367c-20.325183 56.341664-73.343233 95.873507-135.597097 95.873507A143.81026 143.81026 0 1 1 279.063788 703.262293L279.383367 704.252986H448.120739c211.784577 0 383.494028-171.709451 383.494027-383.494027v-169.376529c-56.341664-20.325183-95.873507-73.343233-95.873506-135.597097a143.81026 143.81026 0 1 1 192.737706 135.277518L927.488273 151.38243zM144.5213 694.665636a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z m735.03022-735.03022a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z" horiz-adv-x="1024" />
<glyph glyph-name="paste" unicode="&#59747;" d="M320 528c0 61.758 50.244 112 112 112h272V784c0 26.51-21.49 48-48 48h-161.22C472.612 870.22 431.274 896 384 896s-88.612-25.78-110.78-64H112C85.49 832 64 810.51 64 784v-672c0-26.51 21.49-48 48-48h208V528z m64 288c26.51 0 48-21.49 48-48s-21.49-48-48-48-48 21.49-48 48 21.49 48 48 48z m368-496h208v-400c0-26.51-21.49-48-48-48H432c-26.51 0-48 21.49-48 48V528c0 26.51 21.49 48 48 48h272v-208c0-26.4 21.6-48 48-48z m208 76.118V384h-192v192h12.118a48 48 0 0 0 33.94-14.058l131.882-131.882a48.004 48.004 0 0 0 14.06-33.942z" horiz-adv-x="1024" />
<glyph glyph-name="group" unicode="&#59669;" d="M912 75.9V692.1c28 9.9 48 36.6 48 67.9 0 39.8-32.2 72-72 72-31.3 0-58-20-67.9-48H203.9C194 812 167.3 832 136 832c-39.8 0-72-32.2-72-72 0-31.3 20-58 48-67.9v-616.2C84 66 64 39.3 64 8c0-39.8 32.2-72 72-72 31.3 0 58 20 67.9 48h616.2c9.9-28 36.6-48 67.9-48 39.8 0 72 32.2 72 72 0 31.3-20 58-48 67.9zM888 784c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136-16c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m0 752c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m704-680H184V712h656v-656z m48-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM288 422h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64zM288 138h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64z" horiz-adv-x="1024" />
<glyph glyph-name="ungroup" unicode="&#59671;" d="M736 346H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM736 630H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 688c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72z m0 96c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136 832c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM136 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-dropdown" unicode="&#58881;" d="M512 107.51958124999999l-377.06160075 377.06160074L222.88801761 572.5308003600001 512 283.41881802 801.11198239 572.5308003600001 889.06160075 484.58118199z" horiz-adv-x="1024" />
</font>
</defs></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
ebts-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

BIN
ebts-ui/src/views/system/top/packages/assets/images/client.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
ebts-ui/src/views/system/top/packages/assets/images/database.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
ebts-ui/src/views/system/top/packages/assets/images/firewall.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
ebts-ui/src/views/system/top/packages/assets/images/server.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
ebts-ui/src/views/system/top/packages/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

93
ebts-ui/src/views/system/top/packages/elements/button.vue
View File

@ -1,93 +0,0 @@
<template>
<button
class="cc-button"
@click="handleClick"
:disabled="buttonDisabled"
:class="[
type ? 'cc-button--' + type : '',
buttonSize ? 'cc-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-plain': plain
}
]"
>
<span><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'CcButton',
props: {
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plain: {
type: Boolean,
default: false
}
},
computed: {
buttonSize() {
return this.size
},
buttonDisabled() {
return this.disabled
}
},
methods: {
handleClick(evt) {
this.$emit('click', evt)
}
}
}
</script>
<style lang="scss" scoped>
.cc-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: .1s;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.cc-button:focus, .cc-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.cc-button--mini, .cc-button--mini.is-round {
padding: 7px 15px;
}
.cc-button--mini, .cc-button--small {
font-size: 12px;
border-radius: 3px;
}
</style>

79
ebts-ui/src/views/system/top/packages/elements/checkbox.vue
View File

@ -1,79 +0,0 @@
<template>
<div class="cc-checkbox" :class="{ 'checkbox-checked': checkVal }">
<input
id="checkbox"
type="checkbox"
v-model="checkVal"
@change="handleChange"
/>
<label for="checkbox"></label>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'CcCheckbox',
data() {
return {
checkVal: false
}
},
methods: {
handleChange() {
this.$emit('change', this.checkVal)
}
}
}
</script>
<style lang="scss" scoped>
.cc-checkbox {
display: inline-block;
color: #606266;
font-size: 14px;
input[type='checkbox'] + label {
margin: 0 8px;
cursor: pointer;
}
input[type='checkbox'] + label::before {
content: '\a0';
display: inline-block;
position: relative;
border: 1px solid #dcdfe6;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
line-height: 0.9;
background-color: #fff;
z-index: 1;
-webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
}
input[type='checkbox']:checked + label::before {
content: '\2714';
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
input[type='checkbox'] {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
width: 0;
height: 0;
z-index: -1;
}
}
.checkbox-checked {
color: #409eff;
}
</style>

228
ebts-ui/src/views/system/top/packages/elements/dropdown.vue
View File

@ -1,228 +0,0 @@
<template>
<div class="graph-op">
<i v-for="edgeItem in dropdownItems " :class="edgeItem.class" v-on:title="edgeItem.label" style="width: 120px;"
@click="onItemClick(edgeItem.guid, $event)">&nbsp;&nbsp;{{edgeItem.label}}</i>
</div>
</template>
<script>
import $ from 'jquery'
export default {
name: 'CCDropdownList',
props: {
dropdownItems: {
type: Array,
default() {
return [
]
}
},
defaultIndex: {
type: Number,
default() {
return 0
}
}
},
data() {
return {
activeIndex: this.defaultIndex,
timeout: null
}
},
watch: {
activeIndex() {
this.$emit('change', this.activeIndex)
}
},
mounted() {
// $('.iconfonts')[0].style.backgroundColor = '#ebeef2'
},
methods: {
onItemClick(index,e) {
let lineList = $('.iconfonts')
for (let i=0;i<lineList.length;i++){
lineList[i].style.backgroundColor = '#ffffff'
}
if (e.path[0].style.backgroundColor=='rgb(255, 255, 255)'){
e.path[0].style.backgroundColor = '#ebeef2'
}
if (index !== this.activeIndex) {
this.activeIndex = index
}
}
}
}
</script>
<style lang="scss" scoped>
.iconfonts {
color: #666666;
font-size: 12px;
line-height: 20px;
height: 20px;
padding-bottom: 2px;
}
.graph-op {
display: inline-block;
vertical-align: middle;
i {
width: 20px;
height: 20px;
margin: 0 6px;
line-height: 20px;
color: #a8a8a8;
text-align: center;
border-radius: 2px;
display: inline-block;
border: 1px solid rgba(2, 2, 2, 0);
}
i:hover {
cursor: pointer;
border: 1px solid #E9E9E9;
}
.disabled {
color: rgba(0, 0, 0, 0.25);
}
.disabled:hover {
cursor: not-allowed;
border: 1px solid rgba(2, 2, 2, 0);
}
.icon-select {
background-color: #EEEEEE;
}
.separator {
margin: 4px;
border-left: 1px solid #E9E9E9;
}
}
.cc-dropdown {
position: relative;
display: inline-block;
min-width: 100px;
text-align: center;
a {
color: #000;
text-decoration: none;
}
ul,
li {
list-style: none;
}
span {
display: block;
z-index: 2;
height: 30px;
line-height: 30px;
background-color: transparent;
font-size: 14px;
border-radius: 5px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
span a:after {
content: " ";
display: inline-block;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
border-bottom: solid 6px #000;
border-left: solid 4px transparent;
border-right: solid 4px transparent;
vertical-align: 3px;
margin-left: 10px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
}
.cc-dropdown-menu {
position: absolute;
display: none;
top: 50px;
left: 0;
right: 0;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
z-index: 1;
/* 一个很重要的三角形*/
li:first-child:before {
display: block; /* 独占一行 */
content: " ";
font-size: 0;
line-height: 0;
margin: 0 auto; /* 居中 */
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* 配合整体一样的投影 */
background-color: #fff;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); /* 一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来 */
position: relative;
top: -5px; /* 露出上半部分*/
z-index: 1; /* 隐藏下半部分 */
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
li a {
color: #888;
line-height: 46px;
border-bottom: solid 1px #eee;
font-size: 14px;
display: block;
background-color: #fff; /* 要有背景色才能盖住呀*/
position: relative;
z-index: 2; /* 这里很重要 要挡住三角形的下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/* 以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/
li:first-child a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: -10px;
}
li:last-child a {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: none;
}
/*hover事件给了li，先改变三角 再改变a*/
li:hover:before {
background-color: #ecf5ff;
}
li:hover a {
background-color: #ecf5ff;
color: #66b1ff;
}
}
.cc-dropdown:hover span {
background-color: transparent;
}
.cc-dropdown:hover span a:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>

17
ebts-ui/src/views/system/top/packages/elements/index.js
View File

@ -1,17 +0,0 @@
/**
* @author: clay
* @data: 2019/11/14
* @description: ClayTop内部的通用组件
*/
import Checkbox from './checkbox'
import Button from './button'
import Dropdown from './dropdown'
import Loading from './loading'
export {
Checkbox,
Button,
Dropdown,
Loading
}

92
ebts-ui/src/views/system/top/packages/elements/loading.vue
View File

@ -1,92 +0,0 @@
<template>
<div class="model-overlay">
<div class="cc-loading">
<svg class="circular" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke="#409EFF" stroke-width="5%" stroke-linecap="round"/>
</svg>
</div>
<span class="loading-text">{{ loadingText }}</span>
</div>
</template>
<script>
export default {
name: 'CcLoading',
props: {
loadingText: {
type: String,
default: '加载中...'
}
}
}
</script>
<style lang="scss" scoped>
.model-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
overflow: auto;
background-color: transparent;
}
.cc-loading {
position: absolute;
width: 50px;
top: 45%;
left: 50%;
&:before {
content: '';
display: block;
padding-top: 100%;
}
.circular {
position: absolute;
top: 0;
left: 0;
animation: rotate 2s linear infinite;
}
circle {
animation: circle-dash 1.5s ease-in-out infinite;
}
}
@keyframes circle-dash {
0% {
stroke-dasharray: 1, 125;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 125;
stroke-dashoffset: -25px;
}
100% {
stroke-dasharray: 100, 125;
stroke-dashoffset: -125px;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading-text {
position: absolute;
top: calc(45% + 60px);
left: calc(50% - 10px);
color: #409EFF;
font-size: 14px;
}
</style>

93
ebts-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
View File

@ -1,93 +0,0 @@
/**
* @author: clay
* @data: 2019/07/05
* @description: edit mode: 通过先后点击两个节点来添加连线（容易和节点点击动作交叉，已弃用）
*/
export default {
name: 'click-add-edge',
options: {
getEvents() {
return {
'node:click': 'onNodeClick',
'canvas:mousemove': 'onMousemove',
'edge:click': 'onEdgeClick' // 点击空白处，取消边
}
},
onNodeClick(event) {
let graph = this.graph
let node = event.item
let point = { x: event.x, y: event.y }
let model = node.getModel()
let edgeShape = self.currentEdgeShape.guid || 'line'
if (this.addingEdge && this.edge) {
// 点击第二个节点
graph.updateItem(this.edge, {
target: model.id
})
this.edge = null
this.addingEdge = false
// 记录【连线】前后的数据状态
if (this.historyData) {
let graph = this.graph
// 如果当前点过【撤销】了，连线后没有【重做】功能
// 重置undoCount，连线后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
if (self.undoCount > 0) {
self.historyIndex = self.historyIndex - self.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= self.undoCount; i++) {
let key = `graph_history_${self.historyIndex + i}`
self.removeHistoryData(key)
}
self.undoCount = 0
} else {
// 正常顺序执行的情况，记录【连线】前的数据状态
let key = `graph_history_${self.historyIndex}`
self.addHistoryData(key, this.historyData)
}
// 记录【连线】后的数据状态
self.historyIndex += 1
let key = `graph_history_${self.historyIndex}`
let currentData = JSON.stringify(graph.save())
self.addHistoryData(key, currentData)
}
} else {
// 点击第一个节点
this.historyData = JSON.stringify(graph.save())
if (edgeShape === 'stepline') {
this.edge = graph.addItem('edge', {
source: model.id,
target: point,
type: edgeShape,
controlPoints: [{ x: 100, y: 70 }]
})
} else {
this.edge = graph.addItem('edge', {
source: model.id,
target: point,
type: edgeShape
})
}
this.addingEdge = true
}
},
onMousemove(event) {
const point = { x: event.x, y: event.y }
if (this.addingEdge && this.edge) {
this.graph.updateItem(this.edge, {
target: point
})
}
},
onEdgeClick(ev) {
let graph = this.graph
const currentEdge = ev.item
// 拖拽过程中，点击会点击到新增的边上
if (this.addingEdge && this.edge === currentEdge) {
graph.removeItem(this.edge)
this.edge = null
this.addingEdge = false
}
}
}
}

172
ebts-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
View File

@ -1,172 +0,0 @@
/**
* @author: winyuan
* @data: 2019/07/16
* @repository: https://github.com/winyuan
* @description: edit mode: 鼠标点击交互
*/
// 用来获取调用此js的vue组件实例（this）
let vm = null;
const sendThis = (_this) => {
vm = _this;
};
export default {
sendThis, // 暴露函数
name: "click-event-edit",
options: {
getEvents() {
return {
"node:click": "onNodeClick",
"node:contextmenu": "onNodeRightClick",
"edge:click": "onEdgeClick",
"edge:contextmenu": "onEdgeRightClick",
"canvas:click": "onCanvasClick",
};
},
onNodeClick(event) {
// todo..."selected"是g6自带的状态，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态
// let clickNode = event.item;
// clickNode.setState('selected', !clickNode.hasState('selected'));
vm.currentFocus = "node";
vm.rightMenuShow = false;
this.updateVmData(event);
},
onNodeRightClick(event) {
let graph = vm.graph;
let clickNode = event.item;
let clickNodeModel = clickNode.getModel();
let selectedNodes = graph.findAllByState("node", "selected");
let selectedNodeIds = selectedNodes.map(item => {
return item.getModel().id;
});
vm.selectedNode = clickNode;
// 如果当前点击节点是之前选中的某个节点，就进行下面的处理
if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) {
vm.rightMenuShow = true;
let rightMenu = vm.$refs.rightMenu;
rightMenu.style.left = event.clientX + "px";
rightMenu.style.top = event.clientY + "px";
} else {
// 隐藏右键菜单
vm.rightMenuShow = false;
// 先取消所有节点的选中状态
selectedNodes.forEach(node => {
node.setState("selected", false);
});
// 再添加该节点的选中状态
clickNode.setState("selected", true);
vm.currentFocus = "node";
this.updateVmData(event);
}
graph.paint();
},
onEdgeClick(event) {
let clickEdge = event.item;
clickEdge.setState("selected", !clickEdge.hasState("selected"));
vm.currentFocus = "edge";
this.updateVmData(event);
},
onEdgeRightClick(event) {
let graph = vm.graph;
let clickEdge = event.item;
let clickEdgeModel = 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.currentFocus = "edge";
this.updateVmData(event);
}
let point = { x: event.x, y: event.y };
},
onCanvasClick() {
vm.currentFocus = "canvas";
vm.rightMenuShow = false;
},
updateVmData(event) {
let self = this
if (event.item._cfg.type === "node") {
// const item = event.item;
// let group = item.getContainer();
// let children = group.get("children");
// for (let i = 0, len = children.length; i < len; i++) {
// const shape = children[i];
// if (shape.get("name") === "collapses") {
// console.log(shape.get("name"),"dkfjg");
// self.graph.updateItem(item, {
// collapsed: true,
// size: [300, 50]
// });
// setTimeout(() => graph.layout(), 100);
// } else if (shape.get("name") === "expands") {
//
// console.log(shape.get("name"),"expands");
// self.graph.updateItem(item, {
// collapsed: false,
// size: [300, 500]
// });
// setTimeout(() => graph.layout(), 100);
// }
// }
// 更新vm的data: selectedNode 和 selectedNodeParams
let clickNode = event.item;
// console.log(clickNode)
if (clickNode.hasState("selected")) {
let clickNodeModel = clickNode.getModel();
vm.selectedNode = clickNode;
let nodeAppConfig = { ...vm.nodeAppConfig };
Object.keys(nodeAppConfig).forEach(function(key) {
nodeAppConfig[key] = "";
});
vm.selectedNodeParams = {
label: clickNodeModel.label || "",
appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
};
}
} else if (event.item._cfg.type === "edge") {
// 更新vm的data: selectedEdge 和 selectedEdgeParams
let clickEdge = event.item;
if (clickEdge.hasState("selected")) {
let clickEdgeModel = clickEdge.getModel();
vm.selectedEdge = clickEdge;
let edgeAppConfig = { ...vm.edgeAppConfig };
Object.keys(edgeAppConfig).forEach(function(key) {
edgeAppConfig[key] = "";
});
vm.selectedEdgeParams = {
label: clickEdgeModel.label || "",
appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig }
};
}
}
}
}
};
const isInBBox = (point, bbox) => {
const {
x,
y
} = point;
const {
minX,
minY,
maxX,
maxY
} = bbox;
return x < maxX && x > minX && y > minY && y < maxY;
};

122
ebts-ui/src/views/system/top/packages/topology/src/behavior/dice-er-scroll.js
View File

@ -1,122 +0,0 @@
/**
* @author: clay
* @data: 2021/5/14 23:20
* @email: clay@hchyun.com
* @description: node
*/
const isInBBox = (point, bbox) => {
const {
x,
y
} = point;
const {
minX,
minY,
maxX,
maxY
} = bbox;
return x < maxX && x > minX && y > minY && y < maxY;
};
export default {
name: 'dice-er-scroll',
options: {
getDefaultCfg() {
return {
multiple: true,
};
},
getEvents() {
return {
itemHeight: 50,
wheel: "scroll",
click: "click",
"node:mousemove": "moves",
};
},
scroll(e) {
console.log(454)
e.preventDefault();
const {
graph
} = this;
const nodes = graph.getNodes().filter((n) => {
const bbox = n.getBBox();
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
});
if (nodes) {
nodes.forEach((node) => {
const model = node.getModel();
if (model.attrs.length < 9) {
return;
}
const idx = model.startIndex || 0;
let startX = model.startX || 0.5;
let startIndex = idx + e.deltaY * 0.02;
startX -= e.deltaX;
if (startIndex < 0) {
startIndex = 0;
}
if (startX > 0) {
startX = 0;
}
if (startIndex > model.attrs.length - 1) {
startIndex = model.attrs.length - 1;
}
graph.update(node, {
startIndex,
startX,
});
});
}
},
click(e) {
console.log(789)
const {
graph
} = this;
const {
// eslint-disable-next-line no-unused-vars
y
} = e;
const item = e.item;
const shape = e.shape;
if (!item) {
return;
}
// eslint-disable-next-line no-unused-vars
const model = item.getModel();
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);
}
},
moves(e) {
const name = e.shape.get("name");
const item = e.item;
if (name && name.startsWith("item")) {
this.graph.updateItem(item, {
selectedIndex: Number(name.split("-")[1]),
});
} else {
this.graph.updateItem(item, {
selectedIndex: NaN,
});
}
},
}
}

177
ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
View File

@ -1,177 +0,0 @@
/**
* @author: clay
* @data: 2019/07/16
* @description: edit mode: 通过拖拽节点上的锚点添加连线
*/
import utils from "../utils";
// 用来获取调用此js的vue组件实例（this）
let vm = null;
const sendThis = (_this) => {
vm = _this;
};
import G6 from "@antv/g6";
import theme from "../theme";
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;
}
}
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.graph;
self.historyData = JSON.stringify(graph.save());
// ************** 暂存【连线】前的数据状态 end **************
let sourceAnchor = self.evtInfo.node.getAnchorPoints();
let sourceNodeModel = 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
// })
}
console.log(anchorPoints, sourceAnchor);
self.drawEdge.currentLine = self.graph.addItem("edge", {
// id: G6.Util.uniqueId(), // 这种生成id的方式有bug，会重复
id: utils.generateUUID(),
// 起始节点
source: sourceNodeModel.id,
sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "",
// 终止节点/位置
target: {
x: event.x,
y: event.y
},
type: self.graph.$C.edge.type || "top-line",
style: G6.Util.mix({}, 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 = targetNode.getModel();
let targetAnchor = null;
// 锚点数据
let anchorPoints = targetNode.getAnchorPoints();
// 处理线条目标点
if (anchorPoints && anchorPoints.length) {
// 获取距离指定坐标最近的一个锚点
targetAnchor = targetNode.getLinkPoint({
x: event.x,
y: event.y
});
}
self.graph.updateItem(self.drawEdge.currentLine, {
target: targetNodeModel.id,
targetAnchor: targetAnchor ? targetAnchor.anchorIndex : ""
});
// ************** 记录historyData的逻辑 start **************
if (this.historyData) {
let graph = this.graph;
// 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
// 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
if (vm.undoCount > 0) {
vm.historyIndex = vm.historyIndex - vm.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= vm.undoCount; i++) {
let key = `graph_history_${vm.historyIndex + i}`;
vm.removeHistoryData(key);
}
vm.undoCount = 0;
} else {
// 正常顺序执行的情况，记录拖拽前的数据状态
let key = `graph_history_${vm.historyIndex}`;
vm.addHistoryData(key, this.historyData);
}
// 记录拖拽后的数据状态
vm.historyIndex += 1;
let key = `graph_history_${vm.historyIndex}`;
let currentData = JSON.stringify(graph.save());
vm.addHistoryData(key, currentData);
}
// ************** 记录historyData的逻辑 end **************
}
}
self.drawEdge.currentLine = null;
self.drawEdge.isMoving = false;
self.evtInfo = null;
}
}
}
};

53
ebts-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
View File

@ -1,53 +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: 'drag-event-edit',
options: {
getEvents() {
return {
'node:dragstart': 'onNodeDragstart',
'node:dragend': 'onNodeDragend'
}
},
onNodeDragstart() {
let graph = vm.graph
this.historyData = JSON.stringify(graph.save())
},
onNodeDragend() {
if (this.historyData) {
let graph = this.graph
// 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
// 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
if (vm.undoCount > 0) {
vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= vm.undoCount; i++) {
let key = `graph_history_${vm.historyIndex + i}`
vm.removeHistoryData(key)
}
vm.undoCount = 0
} else {
// 正常顺序执行的情况，记录拖拽前的数据状态
let key = `graph_history_${vm.historyIndex}`
vm.addHistoryData(key, this.historyData)
}
// 记录拖拽后的数据状态
vm.historyIndex += 1
let key = `graph_history_${vm.historyIndex}`
let currentData = JSON.stringify(graph.save())
vm.addHistoryData(key, currentData)
}
}
}
}

45
ebts-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
View File

@ -1,45 +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: "hover-event-edit",
options: {
getEvents() {
return {
"node:mouseover": "onNodeHover",
"node:mouseout": "onNodeOut",
};
},
onNodeHover(event) {
let graph = vm.graph;
let hoverNode = event.item;
const name = event.shape.get("name");
const item = event.item;
if (name && name.startsWith("item")) {
graph.updateItem(item, {
selectedIndex: Number(name.split("-")[1])
});
} else {
graph.updateItem(item, {
selectedIndex: NaN
});
}
// console.log(item);
hoverNode.setState("hover", true);
},
onNodeOut(event) {
let hoverNode = event.item;
hoverNode.setState("hover", false);
}
}
};

30
ebts-ui/src/views/system/top/packages/topology/src/behavior/index.js
View File

@ -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 clickEventEdit from './click-event-edit'
import dragEventEdit from './drag-event-edit'
import keyupEventEdit from './keyup-event-edit'
import diceErScroll from './dice-er-scroll'
const obj = {
// dragAddEdge,
// hoverEventEdit,
// clickEventEdit,
dragEventEdit,
keyupEventEdit,
diceErScroll
}
export default {
obj,
register(G6) {
Object.values(obj).map(item => {
G6.registerBehavior(item.name, item.options)
})
}
}

63
ebts-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
View File

@ -1,63 +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'
}
},
onKeyup(event) {
let graph = this.graph
let selectedNodes = graph.findAllByState('node', 'selected')
let selectedEdges = graph.findAllByState('edge', 'selected')
if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) {
// ************** 记录【删除】前的数据状态 start **************
let historyData = JSON.stringify(graph.save())
let key = `graph_history_${vm.historyIndex}`
vm.addHistoryData(key, historyData)
// ************** 记录【删除】前的数据状态 end **************
// 开始删除
for (let i = 0; i < selectedNodes.length; i++) {
graph.removeItem(selectedNodes[i])
}
for (let i = 0; i < selectedEdges.length; i++) {
graph.removeItem(selectedEdges[i])
}
// ************** 记录【删除】后的数据状态 start **************
// 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能
// 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
if (vm.undoCount > 0) {
vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
for (let i = 1; i <= vm.undoCount; i++) {
let key = `graph_history_${vm.historyIndex + i}`
vm.removeHistoryData(key)
}
vm.undoCount = 0
}
// 记录【删除】后的数据状态
vm.historyIndex += 1
key = `graph_history_${vm.historyIndex}`
let currentData = JSON.stringify(graph.save())
vm.addHistoryData(key, currentData)
// ************** 记录【删除】后的数据状态 end **************
}
}
}
}

58
ebts-ui/src/views/system/top/packages/topology/src/behavior/wheel-node.js
View File

@ -1,58 +0,0 @@
/**
* @author: clay
* @data: 2021/5/13 23:14
* @email: clay@hchyun.com
* @description: node
*/
export default {
name: "wheel-node",
options: {
getEvents() {
return {
wheel: "scorll"
};
},
scorll(e) {
console.log(456)
e.preventDefault();
const {
graph
} = this;
const nodes = graph.getNodes().filter((n) => {
const bbox = n.getBBox();
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
});
if (nodes) {
nodes.forEach((node) => {
const model = node.getModel();
if (model.attrs.length < 9) {
return;
}
const idx = model.startIndex || 0;
let startX = model.startX || 0.5;
let startIndex = idx + e.deltaY * 0.02;
startX -= e.deltaX;
if (startIndex < 0) {
startIndex = 0;
}
if (startX > 0) {
startX = 0;
}
if (startIndex > model.attrs.length - 1) {
startIndex = model.attrs.length - 1;
}
graph.update(node, {
startIndex,
startX,
});
});
}
},
}
};

13
ebts-ui/src/views/system/top/packages/topology/src/config/edge.js
View File

@ -1,13 +0,0 @@
/**
* @author: clay
* @data: 2019/08/16
* @description: 线条的后期设置
*/
export default {
type: 'cc-line',
style: {
startArrow: false,
endArrow: false
}
}

11
ebts-ui/src/views/system/top/packages/topology/src/config/index.js
View File

@ -1,11 +0,0 @@
/**
* @author: clay
* @data: 2019/08/16
* @description: 配置
*/
import edge from './edge'
export default {
edge
}

29
ebts-ui/src/views/system/top/packages/topology/src/edge/base.js
View File

@ -1,29 +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'
})
return keyShape
},
setState(name, value, item) {
// 设置边状态
utils.edge.setState(name, value, item)
}
}

130
ebts-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js
View File

@ -1,130 +0,0 @@
/**
* @author: clay
* @data: 2021/5/14 23:46
* @email: clay@hchyun.com
* @description: node
*/
import {Util} from '@antv/g6'
export default {
name: 'dice-er-edge',
options: {
draw(cfg, group) {
//todo 画线
// console.log("cfg",cfg,"group",group)
const edge = group.cfg.item;
const sourceNode = edge.getSource().getModel();
const targetNode = edge.getTarget().getModel();
const sourceIndex = sourceNode.attrs.findIndex(
(e) => e.key === cfg.sourceKey
);
const sourceStartIndex = sourceNode.startIndex || 0;
let sourceY = 15;
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
sourceY = Math.min(sourceY, 300);
}
const targetIndex = targetNode.attrs.findIndex(
(e) => e.key === cfg.targetKey
);
const targetStartIndex = targetNode.startIndex || 0;
let targetY = 15;
if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
targetY = Math.min(targetY, 300);
}
const startPoint = {
...cfg.startPoint
};
const endPoint = {
...cfg.endPoint
};
startPoint.y = startPoint.y + sourceY;
endPoint.y = endPoint.y + targetY;
let shape;
if (sourceNode.id !== targetNode.id) {
shape = group.addShape("path", {
attrs: {
stroke: "#53da3a",
path: [
["M", startPoint.x, startPoint.y],
[
"C",
endPoint.x / 3 + (2 / 3) * startPoint.x,
startPoint.y,
endPoint.x / 3 + (2 / 3) * startPoint.x,
endPoint.y,
endPoint.x,
endPoint.y,
],
],
endArrow: true,
},
name: "path-shape",
});
} else if (!sourceNode.collapsed) {
let gap = Math.abs((startPoint.y - endPoint.y) / 3);
if (startPoint["index"] === 1) {
gap = -gap;
}
shape = group.addShape("path", {
attrs: {
stroke: "#53da3a",
path: [
["M", startPoint.x, startPoint.y],
[
"C",
startPoint.x - gap,
startPoint.y,
startPoint.x - gap,
endPoint.y,
startPoint.x,
endPoint.y,
],
],
endArrow: true,
},
name: "path-shape",
});
}
return shape;
},
afterDraw(cfg, group) {
// eslint-disable-next-line no-unused-vars
const labelCfg = cfg.labelCfg || {};
const edge = group.cfg.item;
const sourceNode = edge.getSource().getModel();
const targetNode = edge.getTarget().getModel();
if (sourceNode.collapsed && targetNode.collapsed) {
return;
}
const path = group.find(
(element) => element.get("name") === "path-shape"
);
const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
const label = group.addShape("text", {
attrs: {
...labelStyle,
text: cfg.label || '',
fill: "#000",
textAlign: "center",
stroke: "#fff",
lineWidth: 1,
},
});
label.rotateAtStart(labelStyle.rotate);
},
}
}

26
ebts-ui/src/views/system/top/packages/topology/src/edge/index.js
View File

@ -1,26 +0,0 @@
/**
* @author: clay
* @data: 2019/07/18
* @description: register edges
*/
import Line from './top-line'
import Brokenline from './top-brokenline'
import Polyline from './top-polyline'
import Cubic from './top-cubic'
import diceErEdge from './dice-er-edge'
const obj = {
// Line,
// Brokenline,
// Polyline,
// Cubic
diceErEdge
}
export default function(G6) {
Object.values(obj).map(item => {
G6.registerEdge(item.name, item.options, item.extendName)
})
}

275
ebts-ui/src/views/system/top/packages/topology/src/edge/polyline-finding.js
View File

@ -1,275 +0,0 @@
/**
* 带圆角折线连线的策略
* 文档：https://www.yuque.com/antv/blog/eyi70n
* 参考：https://github.com/guozhaolong/wfd/blob/master/src/item/edge.js
* 引用：https://github.com/OXOYO/X-Flowchart-Vue/blob/master/src/global/lib/g6/edge/polylineFinding.js
*/
// 折线寻径
export const polylineFinding = function(sNode, tNode, sPort, tPort, offset = 10) {
const sourceBBox = sNode && sNode.getBBox ? sNode.getBBox() : getPointBBox(sPort)
const targetBBox = tNode && tNode.getBBox ? tNode.getBBox() : getPointBBox(tPort)
// 获取节点带 offset 的区域（扩展区域）
const sBBox = getExpandedBBox(sourceBBox, offset)
const tBBox = getExpandedBBox(targetBBox, offset)
// 获取扩展区域上的起始和终止连接点
const sPoint = getExpandedPort(sBBox, sPort)
const tPoint = getExpandedPort(tBBox, tPort)
// 获取合法折点集
let points = getConnectablePoints(sBBox, tBBox, sPoint, tPoint)
// 过滤合法点集，预处理、剪枝等
filterConnectablePoints(points, sBBox)
// 过滤合法点集，预处理、剪枝等
filterConnectablePoints(points, tBBox)
// 用 A-Star 算法寻径
let polylinePoints = AStar(points, sPoint, tPoint, sBBox, tBBox)
return polylinePoints
}
const getPointBBox = function(t) {
return {
centerX: t.x,
centerY: t.y,
minX: t.x,
minY: t.y,
maxX: t.x,
maxY: t.y,
height: 0,
width: 0
}
}
// 获取扩展区域
const getExpandedBBox = function(bbox, offset) {
if (bbox.width === 0 && bbox.height === 0) {
return bbox
}
return {
centerX: bbox.centerX,
centerY: bbox.centerY,
minX: bbox.minX - offset,
minY: bbox.minY - offset,
maxX: bbox.maxX + offset,
maxY: bbox.maxY + offset,
height: bbox.height + 2 * offset,
width: bbox.width + 2 * offset
}
}
// 获取扩展区域上的连接点
const getExpandedPort = function(bbox, point) {
// 判断连接点在上下左右哪个区域，相应地给x或y加上或者减去offset
if (Math.abs(point.x - bbox.centerX) / bbox.width > Math.abs(point.y - bbox.centerY) / bbox.height) {
return {
x: point.x > bbox.centerX ? bbox.maxX : bbox.minX,
y: point.y
}
}
return {
x: point.x,
y: point.y > bbox.centerY ? bbox.maxY : bbox.minY
}
}
// 获取合法折点集合
const getConnectablePoints = function(sBBox, tBBox, sPoint, tPoint) {
let lineBBox = getBBoxFromVertexes(sPoint, tPoint)
let outerBBox = combineBBoxes(sBBox, tBBox)
let sLineBBox = combineBBoxes(sBBox, lineBBox)
let tLineBBox = combineBBoxes(tBBox, lineBBox)
let points = [
...vertexOfBBox(sLineBBox),
...vertexOfBBox(tLineBBox),
...vertexOfBBox(outerBBox)
]
const centerPoint = { x: outerBBox.centerX, y: outerBBox.centerY }
let bboxes = [outerBBox, sLineBBox, tLineBBox, lineBBox]
bboxes.forEach(bbox => {
// 包含 bbox 延长线和线段的相交线
points = [
...points,
...crossPointsByLineAndBBox(bbox, centerPoint)
]
})
points.push({ x: sPoint.x, y: tPoint.y })
points.push({ x: tPoint.x, y: sPoint.y })
return points
}
const getBBoxFromVertexes = function(sPoint, tPoint) {
const minX = Math.min(sPoint.x, tPoint.x)
const maxX = Math.max(sPoint.x, tPoint.x)
const minY = Math.min(sPoint.y, tPoint.y)
const maxY = Math.max(sPoint.y, tPoint.y)
return {
centerX: (minX + maxX) / 2,
centerY: (minY + maxY) / 2,
maxX: maxX,
maxY: maxY,
minX: minX,
minY: minY,
height: maxY - minY,
width: maxX - minX
}
}
const combineBBoxes = function(sBBox, tBBox) {
const minX = Math.min(sBBox.minX, tBBox.minX)
const minY = Math.min(sBBox.minY, tBBox.minY)
const maxX = Math.max(sBBox.maxX, tBBox.maxX)
const maxY = Math.max(sBBox.maxY, tBBox.maxY)
return {
centerX: (minX + maxX) / 2,
centerY: (minY + maxY) / 2,
minX: minX,
minY: minY,
maxX: maxX,
maxY: maxY,
height: maxY - minY,
width: maxX - minX
}
}
const vertexOfBBox = function(bbox) {
return [
{ x: bbox.minX, y: bbox.minY },
{ x: bbox.maxX, y: bbox.minY },
{ x: bbox.maxX, y: bbox.maxY },
{ x: bbox.minX, y: bbox.maxY }
]
}
const crossPointsByLineAndBBox = function(bbox, centerPoint) {
let crossPoints = []
if (!(centerPoint.x < bbox.minX || centerPoint.x > bbox.maxX)) {
crossPoints = [
...crossPoints,
{ x: centerPoint.x, y: bbox.minY },
{ x: centerPoint.x, y: bbox.maxY }
]
}
if (!(centerPoint.y < bbox.minY || centerPoint.y > bbox.maxY)) {
crossPoints = [
...crossPoints,
{ x: bbox.minX, y: centerPoint.y },
{ x: bbox.maxX, y: centerPoint.y }
]
}
return crossPoints
}
// 过滤连接点
const filterConnectablePoints = function(points, bbox) {
return points.filter(point => {
return point.x <= bbox.minX || point.x >= bbox.maxX || point.y <= bbox.minY || point.y >= bbox.maxY
})
}
const crossBBox = function(bboxes, p1, p2) {
for (let i = 0; i < bboxes.length; i++) {
const bbox = bboxes[i]
if (p1.x === p2.x && bbox.minX < p1.x && bbox.maxX > p1.x) {
if ((p1.y < bbox.maxY && p2.y >= bbox.maxY) || (p2.y < bbox.maxY && p1.y >= bbox.maxY)) {
return true
}
} else if (p1.y === p2.y && bbox.minY < p1.y && bbox.maxY > p1.y) {
if ((p1.x < bbox.maxX && p2.x >= bbox.maxX) || (p2.x < bbox.maxX && p1.x >= bbox.maxX)) {
return true
}
}
}
return false
}
const getCost = function(p1, p2) {
return Math.abs(p1.x - p2.x) + Math.abs(p1.y - p2.y)
}
// aStar 寻径
const AStar = function(points, sPoint, tPoint, sBBox, tBBox) {
const openList = [sPoint]
const closeList = []
points.forEach(item => {
item.id = item.x + '-' + item.y
})
let tmpArr = []
points.forEach(item => {
if (!tmpArr.includes(target => target.id === item.id)) {
tmpArr.push(item)
}
})
points = [
...tmpArr,
tPoint
]
let endPoint
while (openList.length > 0) {
let minCostPoint
openList.forEach((p, i) => {
if (!p.parent) {
p.f = 0
}
if (!minCostPoint) {
minCostPoint = p
}
if (p.f < minCostPoint.f) {
minCostPoint = p
}
})
if (minCostPoint.x === tPoint.x && minCostPoint.y === tPoint.y) {
endPoint = minCostPoint
break
}
openList.splice(openList.findIndex(o => o.x === minCostPoint.x && o.y === minCostPoint.y), 1)
closeList.push(minCostPoint)
const neighbor = points.filter(p => {
return (p.x === minCostPoint.x || p.y === minCostPoint.y) &&
!(p.x === minCostPoint.x && p.y === minCostPoint.y) &&
!crossBBox([sBBox, tBBox], minCostPoint, p)
}
)
neighbor.forEach(p => {
const inOpen = openList.find(o => o.x === p.x && o.y === p.y)
const currentG = getCost(p, minCostPoint)
if (!closeList.find(o => o.x === p.x && o.y === p.y)) {
if (inOpen) {
if (p.g > currentG) {
p.parent = minCostPoint
p.g = currentG
p.f = p.g + p.h
}
} else {
p.parent = minCostPoint
p.g = currentG
let h = getCost(p, tPoint)
if (crossBBox([tBBox], p, tPoint)) {
// 如果穿过bbox则增加该点的预估代价为bbox周长的一半
h += (tBBox.width / 2 + tBBox.height / 2)
}
p.h = h
p.f = p.g + p.h
openList.push(p)
}
}
})
}
if (endPoint) {
const result = []
result.push({
x: endPoint.x,
y: endPoint.y
})
while (endPoint.parent) {
endPoint = endPoint.parent
result.push({
x: endPoint.x,
y: endPoint.y
})
}
return result.reverse()
}
return []
}

52
ebts-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js
View File

@ -1,52 +0,0 @@
/**
* @author: clay
* @data: 2019/10/22
* @description: 折线
*/
import base from './base'
import theme from '../theme'
/**
* fix: 继承 polyline 在 G6 3.x 里面有bug
* 现实现方法参考 https://g6.antv.vision/zh/examples/shape/customEdge#customPolyline
*/
export default {
name: 'top-brokenline',
extendName: 'line',
options: {
...base,
getPath(points) {
const startPoint = points[0]
const endPoint = points[1]
return [
['M', startPoint.x, startPoint.y],
['L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y],
['L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y],
['L', endPoint.x, endPoint.y]
]
},
getShapeStyle(cfg) {
const { startPoint, endPoint } = cfg
const controlPoints = this.getControlPoints(cfg)
let points = [startPoint] // 添加起始点
// 添加控制点
if (controlPoints) {
points = points.concat(controlPoints)
}
// 添加结束点
points.push(endPoint)
const path = this.getPath(points)
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
const style = {
stroke: '#BBB',
lineWidth: 1,
path,
startArrow: false,
endArrow: false,
...themeStyle.edgeStyle.default
}
return style
}
}
}

15
ebts-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js
View File

@ -1,15 +0,0 @@
/**
* @author: clay
* @data: 2019/07/18
* @description: 曲线
*/
import base from './base'
export default {
name: 'top-cubic',
extendName: 'cubic',
options: {
...base
}
}

15
ebts-ui/src/views/system/top/packages/topology/src/edge/top-line.js
View File

@ -1,15 +0,0 @@
/**
* @author: clay
* @data: 2019/07/18
* @description: 直线
*/
import base from './base'
export default {
name: 'top-line',
extendName: 'line',
options: {
...base
}
}

77
ebts-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js
View File

@ -1,77 +0,0 @@
/**
* @author: clay
* @data: 2019/07/18
* @description: 多段线
*/
import base from './base'
import { polylineFinding } from './polyline-finding'
export default {
name: 'top-polyline',
extendName: 'single-edge',
options: {
...base,
draw(cfg, group) {
const { startPoint, endPoint } = cfg
const controlPoints = this.getControlPoints(cfg)
let points = [startPoint]
if (controlPoints) {
points.push(controlPoints)
}
points.push(endPoint)
let path = this.getPath(points)
const keyShape = group.addShape('path', {
className: 'edge-shape',
attrs: {
...cfg,
path: path
},
draggable: true,
name: 'edge-shape'
})
return keyShape
},
getPath(points) {
const path = []
for (let i = 0; i < points.length; i++) {
const point = points[i]
if (i === 0) {
path.push(['M', point.x, point.y])
} else if (i === points.length - 1) {
path.push(['L', point.x, point.y])
} else {
const prevPoint = points[i - 1]
let nextPoint = points[i + 1]
let cornerLen = 5
if (Math.abs(point.y - prevPoint.y) > cornerLen || Math.abs(point.x - prevPoint.x) > cornerLen) {
if (prevPoint.x === point.x) {
path.push(['L', point.x, point.y > prevPoint.y ? point.y - cornerLen : point.y + cornerLen])
} else if (prevPoint.y === point.y) {
path.push(['L', point.x > prevPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y])
}
}
const yLen = Math.abs(point.y - nextPoint.y)
const xLen = Math.abs(point.x - nextPoint.x)
if (yLen > 0 && yLen < cornerLen) {
cornerLen = yLen
} else if (xLen > 0 && xLen < cornerLen) {
cornerLen = xLen
}
if (prevPoint.x !== nextPoint.x && nextPoint.x === point.x) {
path.push(['Q', point.x, point.y, point.x, point.y > nextPoint.y ? point.y - cornerLen : point.y + cornerLen])
} else if (prevPoint.y !== nextPoint.y && nextPoint.y === point.y) {
path.push(['Q', point.x, point.y, point.x > nextPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y])
}
}
}
return path
},
getControlPoints(cfg) {
if (!cfg.sourceNode) {
return cfg.controlPoints
}
return polylineFinding(cfg.sourceNode, cfg.targetNode, cfg.startPoint, cfg.endPoint, 40)
}
}
}

128
ebts-ui/src/views/system/top/packages/topology/src/edge/top-table.js
View File

@ -1,128 +0,0 @@
/**
* @author: clay
* @data: 2021/5/12 0:05
* @email: clay@hchyun.com
* @description: node
*/
export default {
name: 'top-table',
extendName: 'table',
options:{
draw(cfg, group) {
//todo 画线
const edge = group.cfg.item;
const sourceNode = edge.getSource().getModel();
const targetNode = edge.getTarget().getModel();
const sourceIndex = sourceNode.attrs.findIndex(
(e) => e.key === cfg.sourceKey
);
const sourceStartIndex = sourceNode.startIndex || 0;
let sourceY = 15;
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
sourceY = Math.min(sourceY, 300);
}
const targetIndex = targetNode.attrs.findIndex(
(e) => e.key === cfg.targetKey
);
const targetStartIndex = targetNode.startIndex || 0;
let targetY = 15;
if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
targetY = Math.min(targetY, 300);
}
const startPoint = {
...cfg.startPoint
};
const endPoint = {
...cfg.endPoint
};
startPoint.y = startPoint.y + sourceY;
endPoint.y = endPoint.y + targetY;
let shape;
if (sourceNode.id !== targetNode.id) {
shape = group.addShape("path", {
attrs: {
stroke: "#5B8FF9",
path: [
["M", startPoint.x, startPoint.y],
[
"C",
endPoint.x / 3 + (2 / 3) * startPoint.x,
startPoint.y,
endPoint.x / 3 + (2 / 3) * startPoint.x,
endPoint.y,
endPoint.x,
endPoint.y,
],
],
endArrow: true,
},
name: "path-shape",
});
} else if (!sourceNode.collapsed) {
let gap = Math.abs((startPoint.y - endPoint.y) / 3);
if (startPoint["index"] === 1) {
gap = -gap;
}
shape = group.addShape("path", {
attrs: {
stroke: "#5B8FF9",
path: [
["M", startPoint.x, startPoint.y],
[
"C",
startPoint.x - gap,
startPoint.y,
startPoint.x - gap,
endPoint.y,
startPoint.x,
endPoint.y,
],
],
endArrow: true,
},
name: "path-shape",
});
}
return shape;
},
afterDraw(cfg, group) {
const labelCfg = cfg.labelCfg || {};
const edge = group.cfg.item;
const sourceNode = edge.getSource().getModel();
const targetNode = edge.getTarget().getModel();
if (sourceNode.collapsed && targetNode.collapsed) {
return;
}
const path = group.find(
(element) => element.get("name") === "path-shape"
);
const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
const label = group.addShape("text", {
attrs: {
...labelStyle,
text: cfg.label || '',
fill: "#000",
textAlign: "center",
stroke: "#fff",
lineWidth: 1,
},
});
label.rotateAtStart(labelStyle.rotate);
},
}
}

159
ebts-ui/src/views/system/top/packages/topology/src/graph/index.js
View File

@ -1,159 +0,0 @@
/**
* @author: clay
* @data: 2019/07/05
* @description: 图的布局方式/图的初始化
*/
import d3 from '../plugins/d3-installer'
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,
container: options.container,
width: options.width,
height: options.height,
// layout: {
// type: 'random',
// width: options.width,
// height: options.height
// },
defaultNode: {
type: 'dice-er-box',
labelCfg: {
position: 'bottom'
}
},
defaultEdge: {
type: 'dice-er-edge',
labelCfg: {
position: 'center',
autoRotate: false
}
},
nodeStateStyles: themeStyle.nodeStyle,
// nodeStyle: {
// selected: {
// shadowColor: '#626262',
// shadowBlur: 8,
// shadowOffsetX: -1,
// shadowOffsetY: 3
// }
// },
edgeStateStyles: themeStyle.edgeStyle,
// 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

21
ebts-ui/src/views/system/top/packages/topology/src/node/base.js
View File

@ -1,21 +0,0 @@
/**
* @author: clay
* @data: 2019/07/05
* @description: 节点基础方法
*/
import utils from '../utils'
export default {
setState(name, value, item) {
// 设置节点状态
utils.node.setState(name, value, item)
// 设置锚点状态
utils.anchor.setState(name, value, item)
},
// 绘制后附加锚点
afterDraw(cfg, group) {
// 绘制锚点
utils.anchor.draw(cfg, group)
}
}

280
ebts-ui/src/views/system/top/packages/topology/src/node/dice-er-box.js
View File

@ -1,280 +0,0 @@
/**
* @author: clay
* @data: 2021/5/15 0:16
* @email: clay@hchyun.com
* @description: node
*/
import utils from '../utils/index'
const itemHeight = 30;
export default {
name: 'dice-er-box',
options: {
setState(name, value, item,group) {
// 设置节点状态
// utils.node.setState(name, value, item,group);
// 设置锚点状态
utils.anchor.setState(name, value, item);
// //设置收缩状态
// utils.collapse.setState(item)
},
draw(cfg, group) {
const width = 250;
const height = 316;
const itemCount = 10;
const boxStyle = {
stroke: "#096DD9",
radius: 4,
};
const {
attrs = [],
startIndex = 0,
selectedIndex,
collapsed,
icon,
} = cfg;
const list = attrs;
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: {
x: 0,
y: 0,
width,
height: collapsed ? 45 : height,
...boxStyle,
},
draggable: true,
});
if (collapsed) {
return keyshape;
}
const listContainer = group.addGroup({});
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,
});
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) * (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 {
key = "", type
} = e;
if (type) {
key += " - " + type;
}
const label = key.length > 26 ? key.slice(0, 24) + "..." : key;
listContainer.addShape("rect", {
attrs: {
x: 1,
y: i * itemHeight - itemHeight / 2 + offsetY,
width: width - 4,
height: itemHeight,
radius: 2,
lineWidth: 1,
cursor: "pointer",
},
name: `item-${Math.floor(startIndex) + i}-content`,
draggable: true,
});
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: "pointer",
},
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: "pointer",
},
name: 'markerBg-shape'
});
}
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}`,
});
});
}
// console.log(keyshape);
return keyshape;
},
getAnchorPoints() {
return [
[0, 0],
[1, 0],
];
},
}
}

24
ebts-ui/src/views/system/top/packages/topology/src/node/index.js
View File

@ -1,24 +0,0 @@
/**
* @author: clay
* @data: 2019/07/05
* @description: register nodes
*/
// import Rect from './top-rect'
// import Image from './top-image'
import diceErBox from './dice-er-box'
const obj = {
// Rect,
// Image,
diceErBox
}
export default {
obj,
register(G6) {
Object.values(obj).map(item => {
G6.registerNode(item.name, item.options, item.extendName)
})
}
}

126
ebts-ui/src/views/system/top/packages/topology/src/node/top-image.js
View File

@ -1,126 +0,0 @@
/**
* @author: clay
* @data: 2019/07/05
* @description: 图片节点
*/
import utils from '../utils'
// 用来获取调用此js的vue组件实例（this）
let vm = null
const sendThis = (_this) => {
vm = _this
}
export default {
sendThis,
name: 'top-image',
extendName: 'image',
options: {
setState(name, value, item) {
// 设置节点状态
utils.node.setState(name, value, item)
// 设置锚点状态
if (vm.graphMode === 'edit') {
utils.anchor.setState(name, value, item)
}
},
// 绘制后附加锚点
afterDraw(cfg, group) {
// 绘制锚点
if (vm.graphMode === 'edit') {
utils.anchor.draw(cfg, group)
}
},
// 设置告警状态
afterUpdate(cfg, node) {
const group = node.getContainer()
// 获取children
const halos = group.findAll(function(item) {
return item.attrs.name === 'halo'
})
// 告警
if (cfg.appState && cfg.appState.alert) {
if (halos.length > 0) {
return
}
let size = this.getSize(cfg) || [48, 48]
let r = size[0] / 2
let { id } = cfg
let halo1 = group.addShape('circle', {
id: id + '_halo_' + 1,
attrs: {
name: 'halo',
x: 0,
y: 0,
r: r,
fill: cfg.color || '#F56C6C',
opacity: 0.6
},
name: 'halo',
zIndex: -3
})
let halo2 = group.addShape('circle', {
id: id + '_halo_' + 2,
attrs: {
name: 'halo',
x: 0,
y: 0,
r: r,
fill: cfg.color || '#F56C6C', // 为了显示清晰，随意设置了颜色
opacity: 0.6
},
name: 'halo',
zIndex: -2
})
let halo3 = group.addShape('circle', {
id: id + '_halo_' + 3,
attrs: {
name: 'halo',
x: 0,
y: 0,
r: r,
fill: cfg.color || '#F56C6C',
opacity: 0.6
},
name: 'halo',
zIndex: -1
})
group.sort() // 排序，根据zIndex 排序
halo1.animate({ // 逐渐放大，并消失
r: r + 10,
opacity: 0.1,
}, {
repeat: true, // 循环
duration: 3000,
easing: 'easeCubic',
delay: 0 // 无延迟
})
halo2.animate({ // 逐渐放大，并消失
r: r + 10,
opacity: 0.1
}, {
repeat: true, // 循环
duration: 3000,
easing: 'easeCubic',
delay: 1000 // 1 秒延迟
})
halo3.animate({ // 逐渐放大，并消失
r: r + 10,
opacity: 0.1
}, {
repeat: true, // 循环
duration: 3000,
easing: 'easeCubic',
delay: 2000 // 2 秒延迟
})
} else {
halos.forEach(halo => {
// FIXME: G6 3.x在底层库遗留了bug，导致removeChild()方法报错，等待解决
group.removeChild(halo)
})
}
}
}
}

30
ebts-ui/src/views/system/top/packages/topology/src/node/top-rect.js
View File

@ -1,30 +0,0 @@
/**
* @author: clay
* @data: 2019/07/05
* @description: 矩形节点
*/
import base from './base'
import theme from '../theme'
export default {
name: 'top-rect',
extendName: 'rect',
options: {
...base,
getShapeStyle(cfg) {
const size = this.getSize(cfg) || [48, 48]
const width = size[0]
const height = size[1]
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
const style = {
x: 0 - width / 2,
y: 0 - height / 2,
width: width,
height: height,
...themeStyle.nodeStyle.default
}
return style
}
}
}

3
ebts-ui/src/views/system/top/packages/topology/src/node/top-test.js
View File

@ -1,3 +0,0 @@

9
ebts-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js vendored
View File

@ -1,9 +0,0 @@
/**
* @author: clay
* @data: 2019/07/05
* @description: install 3rd plugins
*/
import * as d3 from 'd3-force/dist/d3-force'
export default d3

177
ebts-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
View File

@ -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: ''
}
},
// 节点标签样式
nodeLabelCfg: {
positions: 'center',
style: {
fill: '#FFF'
}
},
// 连线样式
edgeStyle: {
default: {
stroke: '#53da3a',
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 }
}

178
ebts-ui/src/views/system/top/packages/topology/src/theme/default-style.js
View File

@ -1,178 +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: 10,
// 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: {
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 }
}

15
ebts-ui/src/views/system/top/packages/topology/src/theme/index.js
View File

@ -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
}

177
ebts-ui/src/views/system/top/packages/topology/src/theme/office-style.js
View File

@ -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: 0,
shadowOffsetY: 0
// 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 }
}

162
ebts-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
View File

@ -1,162 +0,0 @@
<template>
<div class="toolbar">
<div class="left">
<!--<el-checkbox class="edge-enabled" title="连线模式" @change="$parent.enableEdgeHandler"></el-checkbox>-->
<!-- <cc-dropdown-->
<!-- class="edge-shape"-->
<!-- :dropdown-items="$parent.edgeShapeList"-->
<!-- @change="$parent.changeEdgeShapeHandler"-->
<!-- >-->
<!-- </cc-dropdown>-->
</div>
<div class="center">
<div class="graph-ops">
<i class="iconfont icon-undo" title="撤销" :class="$parent.disableUndo ? 'disabled':''"
@click="$parent.undoHandler"></i>
<i class="iconfont icon-redo" title="重做" :class="$parent.disableRedo ? 'disabled':''"
@click="$parent.redoHandler"></i>
<span class="separator"></span>
<i class="iconfont icon-copy" title="复制" :class="$parent.disableCopy ? 'disabled':''"
@click="$parent.copyHandler"></i>
<i class="iconfont icon-paste" title="粘贴" :class="$parent.disablePaste ? 'disabled':''"
@click="$parent.pasteHandler"></i>
<i class="iconfont icon-clear" title="删除" :class="$parent.disableDelete ? 'disabled':''"
@click="$parent.deleteHandler"></i>
<span class="separator"></span>
<i class="iconfont icon-zoom-in" id="zoom-in" title="放大" @click="$parent.zoomInHandler"></i>
<i class="iconfont icon-zoom-out" title="缩小" @click="$parent.zoomOutHandler"></i>
<i class="iconfont icon-fit" title="适应画布" @click="$parent.autoZoomHandler"></i>
<i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
<span class="separator"></span>
<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
class="edge-shape"
:dropdown-items="$parent.edgeShapeList"
@change="$parent.changeEdgeShapeHandler"
>
</cc-dropdown></div>
</div>
</div>
<div class="right">
<cc-button size="mini" @click="$parent.forceLayoutHandler">自动布局</cc-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>
</div>
</div>
</template>
<script>
import { Button, Dropdown } from '../../elements';
export default {
name: "ToolbarEdit",
components: {
"cc-button": Button,
"cc-dropdown": Dropdown
}
};
</script>
<style lang="scss" scoped>
.zx{
float: right;
}
.toolbar {
/*z-index: 3;*/
/*width: 100%;*/
/*height: 42px;*/
color: #333;
text-align: left;
vertical-align: middle;
line-height: 42px;
background-color: #ffffff;
border: 1px solid #E9E9E9;
box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
.left {
display: inline-block;
width: 12%;
}
.center {
display: inline-block;
width: 58%;
}
.right {
display: inline-block;
width: 30%;
text-align: right;
}
.edge-enabled {
width: 40%;
text-align: center;
}
.edge-shape {
width: 100%;
/*margin-right: 20px;*/
line-height: 25px;
text-align: center;
/*border-right: 1px solid #E6E9ED;*/
}
.graph-ops {
display: inline-block;
vertical-align: middle;
margin-left: 20px;
i {
width: 20px;
height: 20px;
margin: 0 6px;
line-height: 20px;
color: #a8a8a8;
text-align: center;
border-radius: 2px;
display: inline-block;
border: 1px solid rgba(2, 2, 2, 0);
}
i:hover {
cursor: pointer;
border: 1px solid #E9E9E9;
}
.disabled {
color: rgba(0, 0, 0, 0.25);
}
.disabled:hover {
cursor: not-allowed;
border: 1px solid rgba(2, 2, 2, 0);
}
.icon-select {
background-color: #EEEEEE;
}
.separator {
margin: 4px;
border-left: 1px solid #E9E9E9;
}
}
.cc-button {
margin: 0 5px;
}
}
</style>

171
ebts-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue
View File

@ -1,171 +0,0 @@
<template>
<div class="toolbar">
<div class="left">
<cc-dropdown
class="theme-style"
ref="themeOptions"
:dropdown-items="themeOptions"
@change="toggleThemeChange"
>
</cc-dropdown>
</div>
<div class="center">
<div class="graph-ops">
<i class="iconfont icon-zoom-in" id="zoom-in" title="放大" @click="$parent.zoomInHandler"></i>
<i class="iconfont icon-zoom-out" title="缩小" @click="$parent.zoomOutHandler"></i>
<i class="iconfont icon-fit" title="适应画布" @click="$parent.autoZoomHandler"></i>
<i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
<span class="separator"></span>
<cc-checkbox @change="$parent.enableMinimapHandler">导航器</cc-checkbox>
<cc-dropdown :dropdown-items="refreshOptions" @change="toggleAutoRefresh"></cc-dropdown>
</div>
</div>
<div class="right">
<cc-button size="mini" @click="$parent.manualRefreshHandler">刷新</cc-button>
<cc-button size="mini" @click="$parent.changeModeHandler('edit')">编辑</cc-button>
</div>
</div>
</template>
<script>
import { Checkbox, Button, Dropdown } from '../../elements'
export default {
name: 'ToolbarEdit',
components: {
'cc-checkbox': Checkbox,
'cc-button': Button,
'cc-dropdown': Dropdown
},
data() {
return {
themeOptions: [
{ value: 'defaultStyle', label: '默认主题' },
{ value: 'darkStyle', label: '暗黑风格' },
{ value: 'officeStyle', label: '办公风格' }
],
refreshOptions: [
{ value: -1, label: '不自动刷新' },
{ value: 10000, label: '10秒自动刷新' },
{ value: 30000, label: '30秒自动刷新' },
{ value: 60000, label: '60秒自动刷新' }
]
}
},
methods: {
toggleThemeChange(clickItem) {
this.$parent.changeGraphTheme(clickItem.value)
},
toggleAutoRefresh(clickItem) {
this.$parent.autoRefreshHandler(clickItem.value)
},
// 给父组件调用（代码触发主题修改）
changeThemeActiveIndex(index) {
this.$refs.themeOptions.activeIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.toolbar {
/*height: 42px;*/
color: #333;
text-align: left;
vertical-align: middle;
line-height: 42px;
background-color: #ffffff;
border: 1px solid #E9E9E9;
box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
.left {
display: inline-block;
width: 12%;
}
.center {
display: inline-block;
width: 58%;
}
.right {
display: inline-block;
width: 30%;
text-align: right;
}
.edge-enabled {
width: 40%;
text-align: center;
}
.edge-type {
width: 60%;
line-height: 25px;
text-align: left;
}
.theme-style {
width: 100%;
line-height: 25px;
text-align: center;
}
.graph-ops {
display: inline-block;
vertical-align: middle;
margin-left: 20px;
i {
width: 20px;
height: 20px;
margin: 0 6px;
line-height: 20px;
color: #a8a8a8;
text-align: center;
border-radius: 2px;
display: inline-block;
border: 1px solid rgba(2, 2, 2, 0);
}
i:hover {
cursor: pointer;
border: 1px solid #E9E9E9;
}
.disabled {
color: rgba(0, 0, 0, 0.25);
}
.disabled:hover {
cursor: not-allowed;
border: 1px solid rgba(2, 2, 2, 0);
}
.icon-select {
background-color: #EEEEEE;
}
.separator {
margin: 4px;
border-left: 1px solid #E9E9E9;
}
.auto-refresh {
margin: 0 8px 0 12px;
}
.cc-checkbox {
margin: 0 6px;
}
}
.cc-button {
margin: 0 5px;
}
}
</style>

1373
ebts-ui/src/views/system/top/packages/topology/src/topology.vue
View File

File diff suppressed because one or more lines are too long

60
ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js
View File

@ -1,60 +0,0 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: draw anchor
*/
import theme from '../../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 originX = -width / 2
let originY = -height / 2
let anchorX = x * width + originX
let anchorY = y * height + originY
// 添加锚点背景
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形状
// eslint-disable-next-line no-unused-vars
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
})
})
}
}
}

44
ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw-left.js
View File

@ -1,44 +0,0 @@
import theme from '../../theme'
export default function(group,label,x,y,i) {
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
let anchorBgShape = group.addShape('marker', {
id: label+ '_anchor_bg_lift_' + i,
attrs: {
name: 'anchorBg',
x: x,
y: y,
...themeStyle.anchorBgStyle.default
},
draggable: false,
name: 'markerBg-shape'
})
let anchorShape = group.addShape('marker', {
id: label+ '_anchor_bg_lift_' + i,
attrs: {
name: 'anchor',
x: x,
y: y,
...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
})
})
}

17
ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js
View File

@ -1,17 +0,0 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: anchor
*/
// import draw from './draw'
import erDrawLeft from './er-draw-left'
import setState from './set-state'
// import update from './update'
export default {
// draw,
setState,
// update,
erDrawLeft,
}

27
ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js
View File

@ -1,27 +0,0 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: set anchor state
*/
import theme from '../../theme'
export default function(name, value, item) {
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
// console.log(item)
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 === 'anchor') {
if (value) {
child.attr(themeStyle.anchorStyle.hover)
} else {
child.attr(themeStyle.anchorStyle.unhover)
}
}
}
}
}

31
ebts-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js
View File

@ -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
})
}
}
}

11
ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js
View File

@ -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
}

57
ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js
View File

@ -1,57 +0,0 @@
/**
* @author: clay
* @data: 2021/5/11 17:33
* @email: clay@hchyun.com
* @description: node
*/
export default function(e){
e.preventDefault();
const {
graph
} = this;
const nodes = graph.getNodes().filter((n) => {
const bbox = n.getBBox();
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
});
if (nodes) {
nodes.forEach((node) => {
const model = node.getModel();
if (model.attrs.length < 9) {
return;
}
const idx = model.startIndex || 0;
let startX = model.startX || 0.5;
let startIndex = idx + e.deltaY * 0.02;
startX -= e.deltaX;
if (startIndex < 0) {
startIndex = 0;
}
if (startX > 0) {
startX = 0;
}
if (startIndex > model.attrs.length - 1) {
startIndex = model.attrs.length - 1;
}
graph.update(node, {
startIndex,
startX,
});
});
}
}
const isInBBox = (point, bbox) => {
const {
x,
y
} = point;
const {
minX,
minY,
maxX,
maxY
} = bbox;
return x < maxX && x > minX && y > minY && y < maxY;
};

33
ebts-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js
View File

@ -1,33 +0,0 @@
/**
* @author: clay
* @data: 2021/5/11 17:28
* @email: clay@hchyun.com
* @description: node
*/
export default function(e){
const {
graph
} = this;
const {
y
} = e;
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);
}
}

11
ebts-ui/src/views/system/top/packages/topology/src/utils/edge/index.js
View File

@ -1,11 +0,0 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: edge
*/
import setState from './set-state'
export default {
setState
}

26
ebts-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js
View File

@ -1,26 +0,0 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: set edge state
*/
import theme from '../../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 === 'active') {
if (value) {
shape.attr(themeStyle.edgeStyle.active)
} else {
shape.attr(themeStyle.edgeStyle.inactive)
}
} else if (name === 'selected') {
if (value) {
shape.attr(themeStyle.edgeStyle.selected)
} else {
shape.attr(themeStyle.edgeStyle.unselected)
}
}
}

66
ebts-ui/src/views/system/top/packages/topology/src/utils/index.js
View File

@ -1,66 +0,0 @@
/**
* @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
}

11
ebts-ui/src/views/system/top/packages/topology/src/utils/node/index.js
View File

@ -1,11 +0,0 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: node
*/
import setState from './set-state'
export default {
setState
}

27
ebts-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js
View File

@ -1,27 +0,0 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: set node state
*/
import theme from '../../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 === 'active') {
if (value) {
shape.attr(themeStyle.nodeStyle.active)
} else {
shape.attr(themeStyle.nodeStyle.inactive)
}
} else if (name === 'selected') {
if (value) {
group.attr(themeStyle.nodeStyle.selected)
} else {
group.attr(themeStyle.nodeStyle.default)
}
}
}

47
ebts-ui/src/views/system/top/utils/index.js
View File

@ -1,47 +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
*/
export function deepClone(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
*/
export function getRandomArrayElements(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)
}

379
ebts-ui/src/views/test/a/index.vue
View File

@ -1,379 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="a表信息" prop="infoa">
<el-input
v-model="queryParams.infoa"
placeholder="请输入a表信息"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="a表信息">
<el-date-picker
v-model="daterangeCreateTime"
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 label="b创建时间">
<el-date-picker
v-model="relBCreateTime"
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 label="信息b" prop="infob">
<el-input
v-model="queryParams.relB.infob"
placeholder="请输入信息b"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="c表信息" prop="infoc">
<el-input
v-model="queryParams.relC.infoc"
placeholder="请输入c表信息"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="c创建时间">
<el-date-picker
v-model="relCCreateTime"
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="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['test:a:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['test:a:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['test:a:remove']"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['test:a:export']"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="aList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="id表a" align="center" prop="aid"/>
<el-table-column label="a表信息" align="center" prop="infoa"/>
<el-table-column label="a表信息" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="b创建时间" align="center" prop="relB.createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.relB.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="信息b" align="center" prop="relB.infob"/>
<el-table-column label="关联id" align="center" prop="relB.uniconId"/>
<el-table-column label="b表id" align="center" prop="relB.bid"/>
<el-table-column label="c表信息" align="center" prop="relC.infoc"/>
<el-table-column label="关联ID" align="center" prop="relC.uniconId"/>
<el-table-column label="c表id" align="center" prop="relC.cid"/>
<el-table-column label="c创建时间" align="center" prop="relC.createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.relC.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['test:a:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['test:a:remove']"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageInfo.pageNum"
:limit.sync="queryParams.pageInfo.pageSize"
@pagination="getList"
/>
<!-- 添加或修改测试a对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="a表信息" prop="infoa">
<el-input v-model="form.infoa" placeholder="请输入a表信息"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {listA, getA, delA, addA, updateA, exportA} from "@/api/test/a";
export default {
name: "A",
components: {},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 测试a表格数据
aList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// a表信息时间范围
daterangeCreateTime: [],
// b创建时间时间范围
relBCreateTime: [],
// c创建时间时间范围
relCCreateTime: [],
// 查询参数
queryParams: {
pageInfo:{
pageNum: 1,
pageSize: 10,
},
params: {},
infoa: null,
relB: {
infob: null,
params: {
}
},
relC: {
infoc: null,
params: {
}
}
},
// 表单参数
form: {},
// 表单校验
rules: {}
};
},
created() {
this.getList();
},
methods: {
/** 查询测试a列表 */
getList() {
this.loading = true;
this.queryParams.params={}
this.queryParams.relB.params={}
this.queryParams.relC.params={}
if (null != this.daterangeCreateTime && '' !== this.daterangeCreateTime) {
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
}
if (null != this.relBCreateTime && '' !== this.relBCreateTime) {
this.queryParams.relB.params["beginCreateTime"] = this.relBCreateTime[0];
this.queryParams.relB.params["endCreateTime"] = this.relBCreateTime[1];
}
if (null != this.relCCreateTime && '' !== this.relCCreateTime) {
this.queryParams.relC.params["beginCreateTime"] = this.relCCreateTime[0];
this.queryParams.relC.params["endCreateTime"] = this.relCCreateTime[1];
}
listA(this.queryParams).then(response => {
this.aList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
aid: null,
infoa: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeCreateTime = [];
this.relBCreateTime = [];
this.relCCreateTime = [];
this.queryParams.params={}
this.queryParams.relB.params={}
this.queryParams.relC.params={}
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.aid)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加测试a";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const aid = row.aid || this.ids
getA(aid).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改测试a";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.aid != null) {
updateA(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addA(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const aids = row.aid || this.ids;
this.$confirm('是否确认删除测试a编号为"' + aids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delA(aids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有测试a数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return exportA(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
};
</script>

39
ebts-ui/src/views/test/downloadtest.vue
View File

@ -1,39 +0,0 @@
<template>
<div>
F:{{ value }}
<UploadFile ref="download" :v-data="false" :union-id="5" v-model="value" :v-public="true"/>
<el-button @click="submitForm">确 定</el-button>
</div>
</template>
<script>
import UploadFile from '../utils/uploadFile'
export default {
name: "downloadtest",
components: {
UploadFile
},
data() {
return {
value: "",
url:"",
uri:"",
}
},
methods: {
submitForm() {
const start = this.$refs.download.uploadFile();
if (start) {
console.log(this.value)
}else {
console.log(start)
}
}
},
}
</script>
<style scoped>
</style>

360
ebts-ui/src/views/test/father/index.vue
View File

@ -1,360 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="信息" prop="info">
<el-input
v-model="queryParams.info"
placeholder="请输入信息"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="daterangeCreateTime"
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 label="名称" prop="sname">
<el-input
v-model="queryParams.assSun.sname"
placeholder="请输入名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="assCreateTime"
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="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['test:father:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['test:father:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['test:father:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['test:father:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="fatherList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="信息" align="center" prop="info" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="父id" align="center" prop="assSun.fId" :formatter="fIdFormat" />
<el-table-column label="名称" align="center" prop="assSun.sname" :formatter="snameFormat" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['test:father:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['test:father:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.params.pageNum"
:limit.sync="queryParams.params.pageSize"
@pagination="getList"
/>
<!-- 添加或修改关联查询父对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="主键" prop="id">
<el-input v-model="form.id" placeholder="请输入主键" />
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="信息" prop="info">
<el-input v-model="form.info" placeholder="请输入信息" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listFather, getFather, delFather, addFather, updateFather, exportFather } from "@/api/test/father";
export default {
name: "Father",
components: {
},
data() {
var nametest = (rule, value, callback) =>{
if (value === '') {
callback(new Error('请再次输入密码'));
} else {
console.log(value)
callback();
}
};
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 关联查询父表格数据
fatherList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 创建时间时间范围
daterangeCreateTime: [],
// 主键字典
idOptions: [],
// 父id字典
fIdOptions: [],
// 名称字典
snameOptions: [],
// 创建时间字典
createTimeOptions: [],
// 查询参数
queryParams: {
params:{
pageNum: 1,
pageSize: 10,
},
name: null,
info: null,
assSun: {
sname: null,
}
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: "名称不能为空}", trigger: "blur" },
{validator : nametest,trigger: 'blur'}
],
info: [
{ required: true, message: "信息不能为空}", trigger: "blur" },
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询关联查询父列表 */
getList() {
this.loading = true;
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
}
if (null != this.assCreateTime && '' != this.assCreateTime) {
this.queryParams.params["assbeginCreateTime"] = this.assCreateTime[0];
this.queryParams.params["assendCreateTime"] = this.assCreateTime[1];
}
listFather(this.queryParams).then(response => {
this.fatherList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
info: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeCreateTime = [];
this.assdaterangeCreateTime = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加关联查询父";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getFather(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改关联查询父";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateFather(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addFather(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除关联查询父编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delFather(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有关联查询父数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportFather(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
};
</script>

659
ebts-ui/src/views/tool/gen/genInfoForm.vue
View File

@ -1,659 +0,0 @@
<template>
<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
<el-row>
<el-col :span="12">
<el-form-item prop="tplCategory">
<span slot="label">生成模板</span>
<el-select v-model="info.tplCategory" @change="tplSelectChange">
<el-option label="单表（增删改查）" value="crud"/>
<el-option label="树表（增删改查）" value="tree"/>
<el-option label="多表关联（增删改查）" value="rel"/>
<el-option label="主子表（增删改查）" value="sub"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="packageName">
<span slot="label">
生成包路径
<el-tooltip content="生成在哪个java包下，例如 com.hchyun.system" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.packageName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="moduleName">
<span slot="label">
生成模块名
<el-tooltip content="可理解为子系统名，例如 system" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.moduleName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="businessName">
<span slot="label">
生成业务名
<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.businessName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="functionName">
<span slot="label">
生成功能名
<el-tooltip content="用作类描述，例如 用户" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.functionName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
上级菜单
<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<treeselect
:append-to-body="true"
v-model="info.parentMenuId"
:options="menus"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择系统菜单"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="genType">
<span slot="label">
生成代码方式
<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
<el-radio v-model="info.genType" label="1">自定义路径</el-radio>
</el-form-item>
</el-col>
<el-col :span="24" v-if="info.genType == '1'">
<el-form-item prop="genPath">
<span slot="label">
自定义路径
<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.genPath">
<el-dropdown slot="append">
<el-button type="primary">
最近路径快速选择
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!--树表配置-->
<el-row v-show="info.tplCategory == 'tree'">
<h4 class="form-header">其他信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
树编码字段
<el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeCode" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
树父编码字段
<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeParentCode" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
树名称字段
<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeName" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!--主子表配置-->
<el-row v-show="info.tplCategory == 'sub'">
<h4 class="form-header">关联信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
关联子表的表名
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
<el-option
v-for="(table, index) in tables"
:key="index"
:label="table.tableName + '：' + table.tableComment"
:value="table.tableName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
子表关联的外键名
<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.subTableFkName" placeholder="请选择">
<el-option
v-for="(column, index) in subColumns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!--多表关联配置-->
<div v-if="info.tplCategory == 'rel'">
<el-row class="form-header">
<el-col :span="4">
<div style="font-size: 15px;color:#6379bb;font-weight: bold;">多表关联关系</div>
</el-col>
<el-col :offset="18" :span="2">
<el-button
clearable
@click="addRelTable"
>添加表
</el-button>
</el-col>
</el-row>
<div v-for="(table,index) in relTables">
<el-row>
<el-col :span="4">
<el-form-item label-width="95px">
<span slot="label">
关联父表
<el-tooltip content="父表名称， 如：sys_table" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="table.tableName" @change="tableChange(table.tableName,index)"
placeholder="请选择关联主表">
<el-option
v-for="(item , index) in tableList"
:key="index"
:label="item.tableName"
:value="item.tableName"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="80px">
<span slot="label">
父表id
<el-tooltip content="父表id， 如：table_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="table.tableColumn" placeholder="请选择字段">
<el-option
v-for="(column , index) in table.tableColumns"
:key="index"
:label="column.column_name+':'+column.column_comment"
:value="column.column_name"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="110px">
<span slot="label">
关联表表名
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="table.relName" @change="relNameChang(index,table.relName)" placeholder="请选择表名">
<el-option
v-for="(table , index) in tableInfo"
:key="index"
:label="table.table_name + ':'+table.table_comment"
:value="table.table_name"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="110px">
<span slot="label">
关联表字段
<el-tooltip content="关联子表的关联字段， 如：user_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="table.relColumn" placeholder="请选择表名">
<el-option
v-for="(cloumn , index) in table.relColumns"
:key="index"
:label="cloumn.columnName + ':'+cloumn.columnComment"
:value="cloumn.columnName"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="125px">
<span slot="label">
关联查询方式
<el-tooltip content="关联子表的查询方式， 如：inner join" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="table.queryType" placeholder="请选择查询方式">
<el-option label="inner join" value="inner"/>
<el-option label="left join" value="left"/>
<el-option label="right join" value="right"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label-width="20px">
<div style="margin-right: 20px">
<el-select v-model="table.sort" placeholder="请选择关联查询级别">
<el-option label="一级关联" :value="1"/>
<el-option label="二级关联" :value="2"/>
<el-option label="三级关联" :value="3"/>
<el-option label="四级关联" :value="4"/>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="1">
<el-button @click="removeRelTable(index)">删除</el-button>
</el-col>
</el-row>
<el-table :ref="'relColumns'+index" :data="table.relColumns" row-key="columnId" :max-height="tableHeight">
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
<el-table-column
label="字段列名"
prop="columnName"
min-width="10%"
:show-overflow-tooltip="true"
/>
<el-table-column label="字段描述" min-width="10%">
<template slot-scope="scope">
<el-input v-model="scope.row.columnComment"></el-input>
</template>
</el-table-column>
<el-table-column
label="物理类型"
prop="columnType"
min-width="10%"
:show-overflow-tooltip="true"
/>
<el-table-column label="Java类型" min-width="11%">
<template slot-scope="scope">
<el-select v-model="scope.row.javaType">
<el-option label="Long" value="Long"/>
<el-option label="String" value="String"/>
<el-option label="Integer" value="Integer"/>
<el-option label="Double" value="Double"/>
<el-option label="BigDecimal" value="BigDecimal"/>
<el-option label="Date" value="Date"/>
</el-select>
</template>
</el-table-column>
<el-table-column label="java属性" min-width="10%">
<template slot-scope="scope">
<el-input v-model="scope.row.javaField"></el-input>
</template>
</el-table-column>
<el-table-column label="列表" min-width="5%">
<template slot-scope="scope">
<el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="查询" min-width="5%">
<template slot-scope="scope">
<el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="查询方式" min-width="10%">
<template slot-scope="scope">
<el-select v-model="scope.row.queryType">
<el-option label="=" value="EQ"/>
<el-option label="!=" value="NE"/>
<el-option label=">" value="GT"/>
<el-option label=">=" value="GTE"/>
<el-option label="<" value="LT"/>
<el-option label="<=" value="LTE"/>
<el-option label="LIKE" value="LIKE"/>
<el-option label="BETWEEN" value="BETWEEN"/>
</el-select>
</template>
</el-table-column>
<el-table-column label="显示类型" min-width="12%">
<template slot-scope="scope">
<el-select v-model="scope.row.htmlType">
<el-option label="文本框" value="input"/>
<el-option label="下拉框" value="select"/>
<el-option label="单选框" value="radio"/>
<el-option label="复选框" value="checkbox"/>
<el-option label="日期控件" value="datetime"/>
</el-select>
</template>
</el-table-column>
<el-table-column label="字典类型" min-width="12%">
<template slot-scope="scope">
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
<el-option
v-for="dict in dictOptions"
:key="dict.dictType"
:label="dict.dictName"
:value="dict.dictType">
<span style="float: left">{{ dict.dictName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-form>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getRelId, getRelColumns, getTableInfos, getTableColumns, getRelColumnInfos} from '@/api/tool/relApi'
export default {
name: "BasicInfoForm",
components: {Treeselect},
props: {
info: {
type: Object,
default: null
},
tables: {
type: Array,
default: null
},
menus: {
type: Array,
default: []
},
dictOptions: {
type: Array,
default: []
}
},
data() {
return {
subColumns: [],
// 表格的高度
tableHeight: document.documentElement.scrollHeight - 245 + "px",
tableId: null,
relTables: [],
tableInfo: [],
tableList: [],
rules: {
tplCategory: [
{required: true, message: "请选择生成模板", trigger: "blur"}
],
packageName: [
{required: true, message: "请输入生成包路径", trigger: "blur"}
],
moduleName: [
{required: true, message: "请输入生成模块名", trigger: "blur"}
],
businessName: [
{required: true, message: "请输入生成业务名", trigger: "blur"}
],
functionName: [
{required: false, message: "请输入生成功能名", trigger: "blur"}
],
}
};
},
created() {
this.relTables = []
this.tableId = this.$route.params && this.$route.params.tableId;
getTableInfos().then(res => {
this.tableInfo = res.data
})
},
watch: {
'info.subTableName': function (val) {
this.setSubTableColumns(val);
},
'info': function (val) {
if (val.tplCategory === 'rel') {
let table = {
tableName: val.tableName
}
this.tableList.unshift(table)
getRelColumnInfos(this.tableId).then(res => {
if (res.data.length === 0) {
getRelId().then(res => {
let relTable = {
id: res.data,
tableId: this.tableId,
tableName: null,
relName: null,
relComment: null,
relColumn: null,
tableColumn: null,
queryType: 'left',
sort: 1,
tableColumns: [],
relColumns: [],
}
this.relTables.push(relTable);
})
} else {
this.relTables = []
for (let i = 0; i < res.data.length; i++) {
let table = {
tableName: res.data[i].relName,
}
let tableData = res.data[i]
getTableColumns(tableData.tableName).then(res => {
tableData.tableColumns = res.data
})
this.relTables.push(tableData)
this.tableList.push(table)
}
}
})
}
}
},
methods: {
/** 关联父表改变 */
tableChange(tableName, index) {
this.relTables[index].tableColumns = []
getTableColumns(tableName).then(res => {
this.relTables[index].tableColumns = res.data
this.$forceUpdate()
})
},
/** 删除关子联表 */
removeRelTable(index) {
let tableDate = this.relTables[index]
if (tableDate.relName !== null || tableDate.relName !== '') {
for (let i=0;i<this.tableList.length;i++){
if (tableDate.relName === this.tableList[i].tableName){
this.tableList.splice(i,1);
}
}
}
this.relTables.splice(index, 1)
},
/** 关联子表改变 */
relNameChang(index, relName) {
let start = true;
for (let i = 0; i < this.tableList.length; i++) {
if (relName === this.tableList[i].tableName) {
start = false
break
}
}
if (start) {
let table = {
tableName: relName,
}
this.tableList.push(table)
}
getRelColumns(relName, this.relTables[index].id).then(res => {
for (let i = 0; i < this.tableInfo.length; i++) {
if (this.tableInfo[i].table_name === relName) {
this.relTables[index].relComment = this.tableInfo[i].table_comment
break
}
}
this.relTables[index].relColumns = res.data
})
},
/** 添加关联表 */
addRelTable() {
getRelId().then(res => {
let relTable = {
id: res.data,
tableId: this.tableId,
tableName: null,
relName: null,
relComment: null,
relColumn: null,
tableColumn: null,
queryType: 'left',
sort: 1,
tableColumns: [],
relColumns: [],
}
this.relTables.push(relTable)
})
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.menuId,
label: node.menuName,
children: node.children
};
},
/** 选择子表名触发 */
subSelectChange() {
this.info.subTableFkName = '';
},
/** 选择生成模板触发 */
tplSelectChange(value) {
if (value === 'rel') {
this.tableList = []
let table = {
tableName: this.info.tableName,
}
this.tableList.push(table)
getRelId().then(res => {
let relTable = {
id: res.data,
tableId: this.tableId,
tableName: null,
relName: null,
relComment: null,
relColumn: null,
tableColumn: null,
queryType: 'left',
sort: 1,
tableColumns: [],
relColumns: [],
}
this.relTables.push(relTable);
})
} else if (value !== 'sub') {
this.info.subTableName = '';
this.info.subTableFkName = '';
this.relTables = []
} else {
this.relTables = []
}
},
/** 设置关联外键 */
setSubTableColumns(value) {
for (var item in this.tables) {
const name = this.tables[item].tableName;
if (value === name) {
this.subColumns = this.tables[item].columns;
break;
}
}
}
}
};
</script>
<style scoped>
.el-table {
margin-bottom: 22px;
}
</style>

320
ebts-ui/src/views/tool/query/index.vue
View File

@ -1,320 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="uqName">
<el-input
v-model="queryParams.uqName"
placeholder="请输入名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="描述" prop="uqDescribe">
<el-input
v-model="queryParams.uqDescribe"
placeholder="请输入描述"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="daterangeCreateTime"
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="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['tool:query:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['tool:query:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['tool:query:remove']"
>删除</el-button>
</el-col>
<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="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="queryList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" width="50"></el-table-column>
<!-- <el-table-column label="id" align="center" prop="id" />-->
<el-table-column label="名称" align="center" prop="uqName" />
<el-table-column label="描述" align="center" prop="uqDescribe" />
<el-table-column label="创建时间" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['tool:query:edit']"
>修改</el-button>
<el-button
type="text"
size="small"
icon="el-icon-edit-outline"
@click="handleEditTable(scope.row)"
v-hasPermi="['tool:query:update']"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['tool:query:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改万能查询对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="名称" prop="uqName">
<el-input v-model="form.uqName" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="sql语句" prop="uqSql">
<el-input v-model="form.uqSql" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="描述" prop="uqDescribe">
<el-input v-model="form.uqDescribe" placeholder="请输入描述" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listQuery, getQuery, delQuery, addQuery, updateQuery, exportQuery } from "@/api/tool/query";
export default {
name: "Query",
components: {
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 万能查询表格数据
queryList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 创建时间时间范围
daterangeCreateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
uqName: null,
uqDescribe: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
uqName: [
{ required: true, message: "名称不能为空}", trigger: "blur" },
],
uqDescribe: [
{ required: true, message: "描述不能为空}", trigger: "blur" },
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询万能查询列表 */
getList() {
this.loading = true;
listQuery(this.addCreateDateRange(this.queryParams,this.daterangeCreateTime)).then(response =>{
this.queryList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
uqName: null,
uqSql: null,
uqDescribe: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
handleEditTable(row){
this.$router.push("/query/edit/" + row.id);
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeCreateTime = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加万能查询";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getQuery(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改万能查询";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateQuery(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addQuery(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除万能查询编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delQuery(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有万能查询数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportQuery(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
};
</script>

464
ebts-ui/src/views/tool/query/uniQuery.vue
View File

@ -1,464 +0,0 @@
<template>
<div>
<div class="form-header">
<el-row :gutter="15">
<el-form ref="elForm" :model="info" :rules="rules" size="medium" label-width="100px">
<el-col :span="18">
<el-form-item label-width="1px" label="">
<textarea ref="textarea" type="textarea" @change="sqlChang" placeholder="请输入sql"
:autosize="{minRows: 7, maxRows: 7}" :style="{width: '100%'}"></textarea>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label-width="55px" label="名称" prop="uqName">
<el-input v-model="info.uqName" placeholder="请输入名称" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label-width="55px" label="描述" prop="uqDescribe">
<el-input v-model="info.uqDescribe" placeholder="请输入描述" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-button type="text" icon="el-icon-upload" size="medium" @click="submitForm">提交</el-button>
<el-button type="text" icon="el-icon-view" size="medium" @click="previewQuery">预览</el-button>
<el-button type="text" icon="el-icon-plus" size="medium" @click="handleAdd" >新增</el-button>
<el-button type="text" icon="el-icon-download" size="medium" @click="handleExport">导出</el-button>
<el-button v-if="info.isRelease == 2" type="text" icon="el-icon-success" size="medium" @click="handRelease(1)">发布</el-button>
<el-button v-if="info.isRelease == 1" type="text" icon="el-icon-error" size="medium" @click="handRelease(2)">撤销</el-button>
</el-col>
</el-form>
</el-row>
<el-row>
<el-table ref="dragTable" :data="cloumns" row-key="columnId" :max-height="tableHeight">
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
<el-table-column label="查询名称" min-width="10%">
<template slot-scope="scope">
<el-input v-model="scope.row.ucName"></el-input>
</template>
</el-table-column>
<el-table-column label="条件描述" min-width="10%">
<template slot-scope="scope">
<el-input v-model="scope.row.ucDescribe"></el-input>
</template>
</el-table-column>
<el-table-column label="key" min-width="10%">
<template slot-scope="scope">
<el-input v-model="scope.row.ucKey"></el-input>
</template>
</el-table-column>
<el-table-column label="条件" min-width="10%">
<template slot-scope="scope">
<el-select v-model="scope.row.ucCon" @change="ucTypeChang(scope.$index,scope.row)">
<el-option label="=" value="EQ"/>
<el-option label="!=" value="NE"/>
<el-option label=">" value="GT"/>
<el-option label=">=" value="GTE"/>
<el-option label="<" value="LT"/>
<el-option label="<=" value="LTE"/>
<el-option label="LIKE" value="LIKE"/>
<el-option label="BETWEEN" value="BETWEEN"/>
</el-select>
</template>
</el-table-column>
<el-table-column label="显示类型" min-width="12%">
<template slot-scope="scope">
<el-select v-model="scope.row.ucType" @change="ucTypeChang(scope.$index,scope.row)">
<el-option label="文本框" value="input"/>
<el-option label="日期控件" value="datetime"/>
</el-select>
</template>
</el-table-column>
<el-table-column label="模拟数据" min-width="10%">
<template slot-scope="scope">
<el-input v-if="scope.row.type == 1" placeholder="请输入模拟数据" v-model="scope.row.ucMock"></el-input>
<div v-else-if="scope.row.type == 2">
<el-row :gutter="15">
<el-col :span="12">
<el-input placeholder="开始值" v-model="scope.row.ucMock.begin"></el-input>
</el-col>
<el-col :span="12">
<el-input placeholder="结束值" v-model="scope.row.ucMock.end"></el-input>
</el-col>
</el-row>
</div>
<el-date-picker
v-else-if="scope.row.type ==3"
v-model="scope.row.ucMock"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
<el-date-picker v-else-if="scope.row.type ==4"
v-model="scope.row.ucMock"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="5%">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.$index,scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
<div class="el-table">
<el-table v-show="previewDate.open" :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="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="previewQuery"
/>
</div>
</div>
</template>
<script>
// 引入全局实例
import CodeMirror from 'codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/idea.css'
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/sql/sql.js'
//代码补全提示
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/sql-hint.js';
import {getQueryInfo, editQueryInfo, previewQueryData, Release, exportMock} from '@/api/tool/query'
import {Message} from "element-ui";
function JSONString(list) {
for (let i = 0; i < list.length; i++) {
if (list[i].type == 2) {
list[i].ucMock = JSON.stringify(list[i].ucMock)
} else if (list[i].type == 4) {
let time = {
startTime: list[i].ucMock[0],
endTime: list[i].ucMock[1],
}
list[i].ucMock = JSON.stringify(time)
}
}
return list;
}
function JSONparse(list) {
for (let i = 0; i < list.length; i++) {
if (list[i].type == 2) {
list[i].ucMock = JSON.parse(list[i].ucMock)
} else if (list[i].type == 4) {
let time = JSON.parse(list[i].ucMock)
list[i].ucMock = [time.startTime, time.endTime]
}
}
return list;
}
export default {
components: {},
props: [],
data() {
return {
tableHeight: document.documentElement.scrollHeight - 245 + "px",
// 表列信息
cloumns: [],
sqlconfig: {
// 默认的语法类型
mode: 'sql',
// 编辑器实例
coder: null,
// 默认配置
options: {
// 缩进格式
tabSize: 4,
// 主题，对应主题库 JS 需要提前引入
theme: 'idea',
spellcheck: true,
cursorHeight: 0.85,
// 显示行号
lineNumbers: true,
line: true,
extraKeys: {"Tab": "autocomplete"},
lineWrapping: true,//代码折叠
matchBrackets: true,//括号匹配
},
},
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
queryId: null,
info: {
uqSql: '',
uqName: null,
uqDescribe: null,
},
previewDate: {
open: false,
data: [],
header: [],
},
rules: {
uqName: [{required: true, message: '请输入名称', trigger: 'blur'}],
uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}],
},
}
},
computed: {},
watch: {},
created() {
this.queryId = this.$route.params && this.$route.params.queryId;
getQueryInfo(this.queryId).then(res => {
this.cloumns = []
this.info = res.data.info
this.cloumns = JSONparse(res.data.list)
this.sqlconfig.coder.setValue(this.info.uqSql)
})
this.$nextTick(function () {
this.initialize();
});
},
mounted() {
},
methods: {
changUniCon(list) {
console.log(list[0])
console.log(list.length)
for (let i = 0; i < list.length; i++) {
console.log(list[0].ucName)
if (list[i].ucName == "") {
Message({
message: "序号" + i + "查询名称不能为空!",
type: 'error'
})
return false;
}
if (list[i].ucDescribe == "") {
Message({
message: "序号" + i + "描述不能为空!",
type: 'error'
})
return false;
}
if (list[i].ucKey == "") {
Message({
message: "序号" + i + "key不能为空!",
type: 'error'
})
return false;
}
}
return true
},
/** 发布与撤销 */
handRelease(release){
let data = {
id: this.queryId,
isRelease: release,
}
Release(data).then(res=>{
console.log(res)
this.info.isRelease = (this.info.isRelease==1)?2:1
Message({
message:res.msg,
type:"success"
})
})
},
/** 预览 */
previewQuery() {
this.$refs['elForm'].validate(valid => {
if (valid) {
let list = JSONString(this.cloumns)
let data = this.info
if (list.length > 0) {
if (this.changUniCon(list)) {
data.uniCons = list
} else {
return
}
}
data.pageNum = this.queryParams.pageNum
data.pageSize = this.queryParams.pageSize
previewQueryData(data).then(res => {
this.previewDate.data = res.rows
this.total = res.total
this.previewDate.header = []
for (var key in this.previewDate.data[0]) {
this.previewDate.header.push(key)
}
this.previewDate.open = true
this.cloumns = JSONparse(list)
})
}
})
},
sqlChang() {
console.log(this.sqlconfig.coder.getValue())
},
initialize() {
// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
this.sqlconfig.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.sqlconfig.options)
// 编辑器赋值
this.sqlconfig.coder.setValue(this.info.uqSql)
// 支持双向绑定
this.sqlconfig.coder.on('change', (coder) => {
this.info.uqSql = coder.getValue()
console.log(this.info.uqSql)
if (this.$emit) {
this.$emit('input', this.info.uqSql)
}
})
},
/** 删除按钮 */
handleDelete(index) {
this.cloumns.splice(index, 1);
},
ucTypeChang(index, row) {
console.log(typeof this.cloumns[index].ucMock)
if (row.ucType == 'input' && row.ucCon != 'BETWEEN') {
this.cloumns[index].type = 1
if (typeof (this.cloumns[index].ucMock) != 'string') {
this.cloumns[index].ucMock = ''
}
} else if (row.ucType == 'input' && row.ucCon == 'BETWEEN') {
this.cloumns[index].type = 2
this.cloumns[index].ucMock = {begin: '', end: ''}
} else if (row.ucType == 'datetime' && row.ucCon != 'BETWEEN') {
this.cloumns[index].type = 3
this.cloumns[index].ucMock = ''
} else if (row.ucType == 'datetime' && row.ucCon == 'BETWEEN') {
this.cloumns[index].type = 4
this.cloumns[index].ucMock = []
}
},
/** 添加 */
handleAdd() {
let row = {
id: null,
uqId: this.queryId,
ucName: '',
ucCon: 'EQ',
ucDescribe: '',
ucKey: '',
ucMock: '',
ucType: 'input',
type: 1,
}
this.cloumns.push(row)
},
submitForm() {
this.$refs['elForm'].validate(valid => {
if (valid) {
let list = JSONString(this.cloumns)
let data = this.info
if (list.length > 0) {
data.uniCons = list
}
editQueryInfo(data).then(res => {
console.log(res)
this.cloumns = JSONparse(list)
Message({
message: res.msg,
type: 'success'
})
})
} else {
return
}
})
},
/** 导出按钮操作 */
handleExport() {
var that = this
let list = JSONString(that.cloumns)
let data = that.info
this.$confirm('是否确认导出查询数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
if (list.length > 0) {
if (that.changUniCon(list)) {
data.uniCons = list
} else {
return
}
}
return exportMock(data)
}).then(response => {
console.log(response)
that.cloumns = JSONparse(list)
this.download(response.msg);
})
}
}
}
</script>
<style>
.CodeMirror {
border: 1px solid #DCDFE6;
height: 150px;
}
.CodeMirror-line {
height: 20px;
line-height: 20px !important;
}
.CodeMirror-linenumber {
height: 20px;
line-height: 20px !important;
}
</style>
<style scoped>
.form-header {
margin: 18px 10px 0px 10px !important;
}
.el-table {
margin-bottom: 10px;
}
.pagination-container {
height: 50px !important;
}
</style>

109
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.css
View File

@ -1,109 +0,0 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1568972645985'); /* IE9 */
src: url('iconfont.eot?t=1568972645985#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1568972645985') format('woff'),
url('iconfont.ttf?t=1568972645985') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1568972645985#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-download:before {
content: "\e68d";
}
.icon-zoom-out:before {
content: "\e69c";
}
.icon-image:before {
content: "\e752";
}
.icon-iconedit:before {
content: "\e650";
}
.icon-actualsize:before {
content: "\e665";
}
.icon-copy:before {
content: "\e61c";
}
.icon-zoom-in:before {
content: "\e600";
}
.icon-clear:before {
content: "\e700";
}
.icon-flow-line:before {
content: "\e660";
}
.icon-redo:before {
content: "\e716";
}
.icon-undo:before {
content: "\e71a";
}
.icon-fit:before {
content: "\e7cb";
}
.icon-to-front:before {
content: "\e7cc";
}
.icon-to-back:before {
content: "\e7cd";
}
.icon-roi-select:before {
content: "\e7ce";
}
.icon-json:before {
content: "\e623";
}
.icon-fullscreen:before {
content: "\e648";
}
.icon-broken:before {
content: "\e9ad";
}
.icon-curve:before {
content: "\e9b0";
}
.icon-paste:before {
content: "\e963";
}
.icon-group:before {
content: "\e915";
}
.icon-ungroup:before {
content: "\e917";
}
.icon-arrow-dropdown:before {
content: "\e601";
}

BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.eot
View File

Binary file not shown.

1
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

95
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.svg
View File

@ -1,95 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="download" unicode="&#59021;" d="M135.377782 555.885765l277.111319 0L412.4891 830.342628l207.41905 0 0-274.457886 272.656867 0L513.970376 147.641851 135.377782 555.885765 135.377782 555.885765zM892.268258 145.226848l0-66.952878L136.666124 78.27397l0 66.952878L65.878918 145.226848l0-204.12912L136.666124-58.902272l755.603157 0 65.849754 0 0 204.12912L892.268258 145.226848 892.268258 145.226848zM892.268258 145.226848" horiz-adv-x="1024" />
<glyph glyph-name="zoom-out" unicode="&#59036;" d="M950.075-14.436l-225.921 221.773c123.199 146.698 115.857 366.528-22.075 504.482-145.758 145.751-382.898 145.751-528.647 0-145.752-145.745-145.752-382.87 0-528.615 135.794-135.787 350.91-145.037 497.546-27.789l227.045-222.879c13.304-13.055 34.675-12.864 47.736 0.447l4.758 4.84c13.057 13.306 12.86 34.681-0.442 47.741l0 0zM226.091 235.862c-116.713 116.708-116.713 306.595 0 423.301 116.712 116.713 306.604 116.713 423.323 0 116.68-116.706 116.68-306.593 0-423.289-116.72-116.72-306.611-116.72-423.323-0.012l0 0zM214.441 484.734l446.604 0 0-74.435-446.604 0 0 74.435zM214.441 484.734z" horiz-adv-x="1024" />
<glyph glyph-name="image" unicode="&#59218;" d="M896 704 128 704 128 64 896 64 896 704ZM1024 832 1024 832 1024-64 0-64 0 832 1024 832ZM832 128 192 128 192 256 384 576 647.008 256 832 384 832 320ZM640 544A3 3 2520 1 0 832 544 3 3 2520 1 0 640 544z" horiz-adv-x="1024" />
<glyph glyph-name="iconedit" unicode="&#58960;" d="M893.46655 451.99051l0-444.912046c0-35.100426-28.426423-63.558571-63.557548-63.558571L130.761648-56.480106c-35.068703 0-63.558571 28.459169-63.558571 63.558571L67.203076 706.225819c0 35.132148 28.489868 63.558571 63.558571 63.558571l444.911022 0 0-61.540611L128.77541 708.243779l0-701.165314 701.133591 0L829.909002 451.99051 893.46655 451.99051zM487.78397 229.659843l-201.912639-64.520479 64.490803 201.909569L487.78397 229.659843zM398.007271 412.085662l134.848221-134.808312 313.198212 313.199235L711.194226 725.274664 398.007271 412.085662zM935.921477 770.251018l-44.936445 44.938492c-24.827455 24.827455-65.049528 24.827455-89.876983 0l-43.530422-43.532469 134.808312-134.849244 43.535539 43.535539C960.752002 705.17079 960.752002 745.42254 935.921477 770.251018z" horiz-adv-x="1024" />
<glyph glyph-name="actualsize" unicode="&#58981;" d="M716.8 793.6L716.8 725.33333333 853.33333333 725.33333333 853.33333333 588.8 921.6 588.8 921.6 725.33333333 921.6 793.6ZM853.33333333 42.66666667000004L716.8 42.66666667000004 716.8-25.600000000000023 921.6-25.600000000000023 921.6 42.66666667000004 921.6 179.20000000000005 853.33333333 179.20000000000005ZM170.66666667 179.20000000000005L102.4 179.20000000000005 102.4 42.66666667000004 102.4-25.600000000000023 307.2-25.600000000000023 307.2 42.66666667000004 170.66666667 42.66666667000004ZM170.66666667 725.33333333L307.2 725.33333333 307.2 793.6 102.4 793.6 102.4 725.33333333 102.4 588.8 170.66666667 588.8ZM238.93333333 589.0047999999999l0-410.0096C238.93333333 141.85813333 269.38026667 110.93333332999998 306.9952 110.93333332999998l410.0096 0C754.14186667 110.93333332999998 785.06666667 141.38026666999997 785.06666667 178.99519999999995L785.06666667 589.0047999999999C785.06666667 626.14186667 754.61973333 657.06666667 717.0048 657.06666667L306.9952 657.06666667C269.85813333 657.06666667 238.93333333 626.6197333299999 238.93333333 589.0047999999999zM307.2 588.8l409.6 0 0-409.6L307.2 179.20000000000005 307.2 588.8z" horiz-adv-x="1024" />
<glyph glyph-name="copy" unicode="&#58908;" d="M704 256h256v-355.968c0-15.424-12.608-28.032-28.032-28.032h-455.936c-15.424 0-28.032 12.608-28.032 28.032v583.936c0 15.424 12.608 28.032 31.168 28.032h224.832v-256zM768 506.624v-186.624h192l-182.464 186.624h-9.536zM448 826.624v-122.624h128l-118.464 122.624h-9.536zM384 576h192v64h-192v192h-288.832c-18.56 0-31.168-12.608-31.168-28.032v-644.8c0-15.424 12.608-28.032 28.032-28.032h291.968v444.864z" horiz-adv-x="1024" />
<glyph glyph-name="zoom-in" unicode="&#58880;" d="M968.842667-12.501333L726.698667 229.642667A382.293333 382.293333 0 0 1 810.666667 469.333333C810.666667 681.408 638.752 853.333333 426.666667 853.333333 214.592 853.333333 42.666667 681.408 42.666667 469.333333s171.925333-384 384-384c90.666667 0 173.994667 31.413333 239.690666 83.978667l242.144-242.144a42.666667 42.666667 0 0 1 60.341334 60.330667zM426.666667 170.666667c-164.949333 0-298.666667 133.717333-298.666667 298.666666s133.717333 298.666667 298.666667 298.666667c164.96 0 298.666667-133.717333 298.666666-298.666667S591.626667 170.666667 426.666667 170.666667z m170.666666 298.666666a42.666667 42.666667 0 0 0-42.666666-42.666666h-85.333334v-85.333334a42.666667 42.666667 0 0 0-85.333333 0v85.333334h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h85.333333v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666667z" horiz-adv-x="1024" />
<glyph glyph-name="clear" unicode="&#59136;" d="M791.04 583.68H768V0h-76.8V583.68h-128V0h-76.8V583.68h-128V0h-76.8V583.68H128V-25.6c0-56.32 46.08-102.4 104.96-102.4h558.08c58.88 0 104.96 46.08 104.96 102.4V583.68c0 5.12-46.08 0-104.96 0M947.2 768h-230.4V829.44C716.8 867.84 652.8 896 614.4 896h-204.8c-38.4 0-102.4-28.16-102.4-66.56V768H76.8c-28.16 0-51.2-23.04-51.2-51.2s23.04-51.2 51.2-51.2h870.4c28.16 0 51.2 23.04 51.2 51.2s-23.04 51.2-51.2 51.2M614.4 768h-204.8V793.6h204.8v-25.6m0 0z" horiz-adv-x="1024" />
<glyph glyph-name="flow-line" unicode="&#58976;" d="M563.2 188.2112V579.7888A122.624 122.624 0 0 1 634.88 691.2a122.88 122.88 0 1 1-245.76 0c0-49.5104 29.4912-91.9552 71.68-111.4112v-391.6288A122.5216 122.5216 0 0 1 389.12 76.8a122.88 122.88 0 1 1 245.76 0c0 49.5104-29.44 91.9552-71.68 111.4112zM512 762.112a70.8608 70.8608 0 1 0 0-141.7216 70.8608 70.8608 0 0 0 0 141.7216z m0-756.224a70.912 70.912 0 1 0 0 141.824 70.912 70.912 0 0 0 0-141.824z" horiz-adv-x="1024" />
<glyph glyph-name="redo" unicode="&#59158;" d="M999.551 549.05c13.299 0 24-10.8 24.1-24v-358c0-17.7-14.301-32-32-32h-358.1c-6.4 0-12.5 2.5-17 7-9.4 9.3-9.4 24.5 0 33.9l127 127c-82.201 101.8-208 167-349.001 167-170.3 0-318.4-95-394.2-235 45.7 227 246.2 398 486.7 398 160.101 0 302.399-75.7 393.2-193.3l102.301 102.4c4.5 4.5 10.599 7 17 7z" horiz-adv-x="1024" />
<glyph glyph-name="undo" unicode="&#59162;" d="M41.353 542.029a23.998 23.998 0 0 1-16.97 7.029c-13.255 0-24-10.744-24-24V167c0-17.673 14.327-32 32-32h358.06a24 24 0 0 1 16.969 7.029c9.373 9.373 9.373 24.568 0 33.941L280.418 302.965C362.539 404.832 488.35 470 629.383 470c170.332 0 318.462-95.059 394.234-235.02C977.931 462.016 777.375 633 536.883 633c-160.045 0-302.403-75.725-393.2-193.3L41.353 542.029z" horiz-adv-x="1024" />
<glyph glyph-name="fit" unicode="&#59339;" d="M640 608V800c0 19.2 12.8 32 32 32s32-12.8 32-32v-160h160c19.2 0 32-12.8 32-32s-12.8-32-32-32h-192c-6.4 0-12.8 0-19.2 6.4h-6.4c0 12.8-6.4 19.2-6.4 25.6zM288 832c-19.2 0-32-12.8-32-32v-160H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h192c6.4 0 12.8 0 19.2 6.4h6.4c6.4 6.4 6.4 12.8 6.4 19.2v192C320 819.2 307.2 832 288 832z m576-576h-192c-6.4 0-12.8 0-19.2-6.4h-6.4c-6.4-6.4-6.4-12.8-6.4-19.2v-192c0-19.2 12.8-32 32-32s32 12.8 32 32V192h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-550.4-12.8c-6.4 6.4-6.4 6.4 0 0-12.8 6.4-19.2 12.8-25.6 12.8H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h160v-160c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 6.4-6.4 12.8-6.4 19.2zM480 544c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" horiz-adv-x="1024" />
<glyph glyph-name="to-front" unicode="&#59340;" d="M768 300.8c-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2L358.4 697.6c-6.4 0-19.2 0-25.6-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l390.4-96c6.4 0 19.2 0 25.6 6.4l307.2 268.8c25.6 6.4 25.6 19.2 25.6 25.6zM217.6 377.6l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224 96 300.8l121.6 76.8z m204.8-320l-320 76.8 108.8 76.8L416 160c6.4 0 19.2 0 25.6 6.4L576 288l83.2-12.8-236.8-217.6z m473.6 448l140.8-179.2h-96c-6.4-115.2-76.8-211.2-179.2-262.4 51.2 70.4 83.2 153.6 83.2 249.6v12.8h-96l147.2 179.2z" horiz-adv-x="1036" />
<glyph glyph-name="to-back" unicode="&#59341;" d="M729.6 320l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2L364.8 697.6c-6.4 0-12.8 0-19.2-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6s12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l384-89.6c6.4 0 19.2 0 25.6 6.4l300.8 268.8c6.4 6.4 12.8 19.2 6.4 25.6 12.8 6.4 6.4 12.8-6.4 12.8zM364.8 646.4l300.8-44.8L416 384l-313.6 76.8 262.4 185.6z m-147.2-268.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224l-313.6 76.8 115.2 76.8z m723.2-134.4h96L896 64l-140.8 179.2h96V256c0 96-32 179.2-83.2 249.6 102.4-51.2 172.8-153.6 172.8-262.4z" horiz-adv-x="1036" />
<glyph glyph-name="roi-select" unicode="&#59342;" d="M64 704h64v-64H64V704z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64zM64 768V832h64v-64H64z m128 0V832h64v-64H192z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 64h64v-64h-64V832z m0-128h64v-64h-64V704z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64zM64 0v64h64v-64H64z m128 0v64h64v-64H192z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m384 64v128h64v-128h128v-64h-128v-128h-64v128h-128v64h128z m-256-64v64h64v-64h-64z m-128 576v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM256 320v-64h256v64H256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64H256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z" horiz-adv-x="1024" />
<glyph glyph-name="json" unicode="&#58915;" d="M921.6 716.8L798.72 844.8c-30.72 30.72-76.8 51.2-117.76 51.2H256c-40.96 0-71.68-35.84-71.68-71.68v-353.28h56.32V824.32c0 10.24 5.12 15.36 15.36 15.36h435.2v-235.52h225.28v-660.48c0-10.24-5.12-15.36-15.36-15.36H256c-10.24 0-15.36 5.12-15.36 15.36v107.52H184.32v-102.4c0-40.96 30.72-76.8 71.68-76.8h645.12c40.96 0 71.68 35.84 71.68 71.68V568.32c-5.12 51.2-20.48 102.4-51.2 148.48z m-174.08-61.44V803.84c5.12 0 5.12-5.12 10.24-10.24l128-128 10.24-10.24h-148.48zM798.72 455.68H92.16c-20.48 0-35.84-20.48-35.84-40.96v-276.48c0-20.48 15.36-40.96 40.96-40.96h701.44c20.48 0 40.96 15.36 40.96 40.96V414.72c-5.12 20.48-20.48 40.96-40.96 40.96zM225.28 368.64v-133.12c0-15.36-5.12-30.72-15.36-40.96-10.24-10.24-25.6-15.36-40.96-15.36-10.24 0-20.48 0-30.72 5.12v35.84h20.48c5.12 0 10.24 0 15.36 5.12 5.12 0 5.12 5.12 5.12 5.12v143.36h46.08z m168.96-40.96l-35.84-10.24c-5.12 15.36-15.36 25.6-30.72 20.48-15.36 0-25.6-5.12-25.6-15.36 0-5.12 0-10.24 5.12-10.24 5.12-5.12 15.36-5.12 20.48-10.24 15.36 0 30.72-5.12 40.96-10.24 10.24-5.12 15.36-10.24 20.48-20.48 5.12-10.24 10.24-20.48 10.24-30.72 0-15.36-5.12-30.72-20.48-46.08-15.36-10.24-35.84-15.36-56.32-15.36-20.48 0-35.84 5.12-51.2 15.36-15.36 5.12-25.6 20.48-25.6 35.84l40.96 10.24c5.12-15.36 20.48-30.72 40.96-25.6 10.24 0 15.36 0 20.48 5.12 5.12 5.12 5.12 10.24 5.12 15.36 0 5.12 0 10.24-5.12 15.36-10.24 5.12-15.36 5.12-25.6 10.24-20.48 5.12-35.84 10.24-51.2 20.48-10.24 5.12-15.36 15.36-15.36 30.72s5.12 30.72 20.48 40.96c15.36 10.24 30.72 20.48 51.2 15.36 25.6 5.12 56.32-10.24 66.56-40.96z m102.4-148.48c-25.6 0-46.08 10.24-56.32 30.72-15.36 20.48-20.48 46.08-20.48 71.68 0 25.6 5.12 51.2 20.48 66.56 15.36 20.48 35.84 30.72 61.44 25.6 25.6 0 46.08-10.24 61.44-30.72 15.36-20.48 20.48-40.96 20.48-66.56s-5.12-51.2-20.48-71.68c-20.48-15.36-40.96-25.6-66.56-25.6z m0 158.72c-20.48 0-30.72-20.48-30.72-61.44s10.24-61.44 35.84-61.44c20.48 0 30.72 20.48 30.72 61.44s-10.24 61.44-35.84 61.44z m250.88 30.72V179.2h-35.84l-71.68 128V179.2h-30.72v189.44h46.08l66.56-112.64v107.52l25.6 5.12z" horiz-adv-x="1024" />
<glyph glyph-name="fullscreen" unicode="&#58952;" d="M704 480l188.2 184.4 99.8-99.8V864H704l88.4-96-180.4-192 92-96z m-96-288l184.4-188.2-100-99.8H992V192l-96-88.4-192 180.4-96-92z m-288 96l-188.2-184.4-99.8 100V-96h288l-88.4 96 180.4 192-92 96z m96 288l-184.4 188.2 100 99.8H32v-288l96 88.4 192-180.4 96 92z" horiz-adv-x="1024" />
<glyph glyph-name="broken" unicode="&#59821;" d="M880.71104 160a144.096 144.096 0 0 1-134.08-95.008L746.31104 64h-185.6V800H279.75104c-20.352 56.416-73.44 96-135.776 96A144 144 0 1 1 279.43104 703.008L279.75104 704h184.96v-732.8h279.68c19.424-58.08 73.344-99.2 136.864-99.2a144 144 0 0 1 0 288h-0.576 0.032zM144.71104 694.4a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z m736-736a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z" horiz-adv-x="1025" />
<glyph glyph-name="curve" unicode="&#59824;" d="M927.488273 152.021587V320.758959c0 264.73871-214.628824 479.367534-479.367534 479.367534H279.383367c-20.325183 56.341664-73.343233 95.873507-135.597097 95.873507A143.81026 143.81026 0 1 1 279.063788 703.262293L279.383367 704.252986H448.120739c211.784577 0 383.494028-171.709451 383.494027-383.494027v-169.376529c-56.341664-20.325183-95.873507-73.343233-95.873506-135.597097a143.81026 143.81026 0 1 1 192.737706 135.277518L927.488273 151.38243zM144.5213 694.665636a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z m735.03022-735.03022a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z" horiz-adv-x="1024" />
<glyph glyph-name="paste" unicode="&#59747;" d="M320 528c0 61.758 50.244 112 112 112h272V784c0 26.51-21.49 48-48 48h-161.22C472.612 870.22 431.274 896 384 896s-88.612-25.78-110.78-64H112C85.49 832 64 810.51 64 784v-672c0-26.51 21.49-48 48-48h208V528z m64 288c26.51 0 48-21.49 48-48s-21.49-48-48-48-48 21.49-48 48 21.49 48 48 48z m368-496h208v-400c0-26.51-21.49-48-48-48H432c-26.51 0-48 21.49-48 48V528c0 26.51 21.49 48 48 48h272v-208c0-26.4 21.6-48 48-48z m208 76.118V384h-192v192h12.118a48 48 0 0 0 33.94-14.058l131.882-131.882a48.004 48.004 0 0 0 14.06-33.942z" horiz-adv-x="1024" />
<glyph glyph-name="group" unicode="&#59669;" d="M912 75.9V692.1c28 9.9 48 36.6 48 67.9 0 39.8-32.2 72-72 72-31.3 0-58-20-67.9-48H203.9C194 812 167.3 832 136 832c-39.8 0-72-32.2-72-72 0-31.3 20-58 48-67.9v-616.2C84 66 64 39.3 64 8c0-39.8 32.2-72 72-72 31.3 0 58 20 67.9 48h616.2c9.9-28 36.6-48 67.9-48 39.8 0 72 32.2 72 72 0 31.3-20 58-48 67.9zM888 784c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136-16c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m0 752c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m704-680H184V712h656v-656z m48-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM288 422h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64zM288 138h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64z" horiz-adv-x="1024" />
<glyph glyph-name="ungroup" unicode="&#59671;" d="M736 346H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM736 630H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 688c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72z m0 96c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136 832c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM136 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-dropdown" unicode="&#58881;" d="M512 107.51958124999999l-377.06160075 377.06160074L222.88801761 572.5308003600001 512 283.41881802 801.11198239 572.5308003600001 889.06160075 484.58118199z" horiz-adv-x="1024" />
</font>
</defs></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

BIN
ebts-ui/src/views/tool/top/packages/assets/images/client.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
ebts-ui/src/views/tool/top/packages/assets/images/database.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
ebts-ui/src/views/tool/top/packages/assets/images/firewall.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
ebts-ui/src/views/tool/top/packages/assets/images/server.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
ebts-ui/src/views/tool/top/packages/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

93
ebts-ui/src/views/tool/top/packages/elements/button.vue
View File

@ -1,93 +0,0 @@
<template>
<button
class="cc-button"
@click="handleClick"
:disabled="buttonDisabled"
:class="[
type ? 'cc-button--' + type : '',
buttonSize ? 'cc-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-plain': plain
}
]"
>
<span><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'CcButton',
props: {
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plain: {
type: Boolean,
default: false
}
},
computed: {
buttonSize() {
return this.size
},
buttonDisabled() {
return this.disabled
}
},
methods: {
handleClick(evt) {
this.$emit('click', evt)
}
}
}
</script>
<style lang="scss" scoped>
.cc-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: .1s;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.cc-button:focus, .cc-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.cc-button--mini, .cc-button--mini.is-round {
padding: 7px 15px;
}
.cc-button--mini, .cc-button--small {
font-size: 12px;
border-radius: 3px;
}
</style>

79
ebts-ui/src/views/tool/top/packages/elements/checkbox.vue
View File

@ -1,79 +0,0 @@
<template>
<div class="cc-checkbox" :class="{ 'checkbox-checked': checkVal }">
<input
id="checkbox"
type="checkbox"
v-model="checkVal"
@change="handleChange"
/>
<label for="checkbox"></label>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'CcCheckbox',
data() {
return {
checkVal: false
}
},
methods: {
handleChange() {
this.$emit('change', this.checkVal)
}
}
}
</script>
<style lang="scss" scoped>
.cc-checkbox {
display: inline-block;
color: #606266;
font-size: 14px;
input[type='checkbox'] + label {
margin: 0 8px;
cursor: pointer;
}
input[type='checkbox'] + label::before {
content: '\a0';
display: inline-block;
position: relative;
border: 1px solid #dcdfe6;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
line-height: 0.9;
background-color: #fff;
z-index: 1;
-webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
}
input[type='checkbox']:checked + label::before {
content: '\2714';
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
input[type='checkbox'] {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
width: 0;
height: 0;
z-index: -1;
}
}
.checkbox-checked {
color: #409eff;
}
</style>

Some files were not shown because too many files have changed in this diff Show More