Compare commits
No commits in common. "master" and "17358bf2cd23909cf2cfc205cca33c028f5fb516" have entirely different histories.
master
...
17358bf2cd
|
|
@ -1,2 +1 @@
|
|||
# HcyBase
|
||||
代码下载优化,做成两个接口,现有的下载接口改为生成到本地,然后再使用通用下载接口下载zip,做到能够有消息提醒,提高用户体验
|
||||
# HcyBase
|
||||
|
|
@ -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'
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
@ -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',
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
|
|
@ -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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,d09GMgABAAAAAA1MAAsAAAAAGkgAAAz/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCGNAqiNJtOATYCJANgCzIABCAFhG0Hgggb6BVRlHJWSbKvBuyGeKPMp/UYzGar17rEgTXbq2lrenLOOiJE8OITJy7o6fe+23NLTyvVJoAwKGwrQsbFosAJPEZ3+Ytm/BseN+3fS0glCVCTCasY3VadGPyVrtxu0utIModSm3RSUfZHsjncObIyr8P0tHWYOJ0iZ73RM+2Zsj9df+4zw/JNJ9NJdwqhRklfCGc8j+3e58ZmgnVRSEKWoklKoPcrmZk0P0/vAQIBvH8/VamVDeUAJF3vd7MA0gtNCSshGl4/et+X5y2na8nOGlLHnKxoLUA8VuZibvEGsDHrBry0BQQUMFyDQ83xaxAyVtWrb5F0j+khUKzKBLeXr99Kh8NzCehMY1nptPycxS7JGwzDFukbmNR8MRW+5qXXb00Cw7fwgs+PZ125e8B32V4da2Ma5KA/HXgZDiw4BnAwk3GbBmxJj3OtmP7ceP4B7BPhSU/MEskVU6nwQu9EH7xRxVXS/eHM0Zd9YXi589MDTvXcO37+eLIvQ1Rn/RceIJoTYFwonswTIykqqxkxasyMKBHChAPqQO8G0MJa5oAekKsR0YOqCaYACYBEIOMAOZAJQDEQB1AByYAKIB7wAhABTmA1DPpgNRL6UUgBxAGpgBIgFnAPSAM4gYwAxoCMAu5jNcYwjGwkh2ggs4AyINOAC0AmAZexF1MAMJ8Ocw7woOJvQKg4+840uwPrToBSd7dEvK4t7vqaNfFFG7BPmh1xcj7mKetK4OMad2POjc62lYVVQ4stLy8tV6JEg9uc643L1cHTEs84tW63xsev5q0SacLNnHdans+TeT+TrS6PO/hylgoKhZfDejUj72RllMIEPrGHm0p736c9zytc+yj3BEMZ9dHRZi5qp4djvHrKzSpcOprmAxJqQnihShgQFtgigBsqGECffqJ/xD7UPdYg7DAu0I3GYcftqU4L4glRlYKRUFU0s8SmS1tESc5xGkAAAm7ElR8XPFOMjRcQBNI2kszvscejltEUsnOY4iPkLjIwa8BJnQliXA9BFAKCriRUMfJCIKnrBDzWSPBb6Gte6PHQLpfC7aa83tWd1s9xOzW718uYXK4NbC+OAyXobBDiAneOIKCgtwJQ79PgPByT4zv5KF/Y92Q6ZrrO4NDiScE7XTEARi9rJUIn+WZtahwSYBfad216u2fZdZfo5JVk5C3HlLPuwlvexFNXN+sHLrDn+5O6Rzn7JqTSj7DDGr0xEjH0TsV6Lprpps/7Sb+SM2alSWeIQIxWgq9fzM7u+jwf/31KUweVzqfWmaJwzqTW9QJQdH1JTujN0YTZDCFna8A9pMQNBgAerfpzEBLd7FVtijSZcDfnUJ0zbeiwo6d6u6fOdj/NmM1ROVV74VQPMRoJSgFaGsyo6jHvpNCToRTqUjXzLgmK97XbNS8D8TofjPO1BlfB3s4aI5/kEfqaTZWlCjXlMX0LoaAJyHmWut1K4mB9uFwXBglAnG2NW33VZWW7AQ5wKKiiTrIZ8CHN148AsMnayEdByNnX6oaGtt3FN8dkMQiBcgQfEDx2Hd8CIQ42V07YBTvlUUD9dA0sMPRGIKw1Wag/F4+abNVguU3AEAUJY7Q5GkKCyjOZInQRc8IwGiP1XUoSydvSOnFdiskC5xq7oueAvDDkpSAltu7iQO54T09kzwClyzCd4k5Hn8vXpxvb2BMRhk5a5yL0XgbgNJF9mmEdQ6EkpVgLgY8qaLWA8Glmw0AkwlCat1xTInCMPOWZs+JtZ9Lc8OZGEzz+SXf+JtB1GWzsvshd2ky9DcULNNDzOY07IyTWyxh4ywXONieV2OFZjrfqbKdOn+t72wqOnW/QXdxUB2bPbz/9ZC4fWmwpuO2+zpm25ewZw2uzJhPKLuvul4w7V0Egx3qTyG7bIYI7F22zMv236iMpowbruQS3/s66/hiBZRCf313YC8m8zvNzubN+KF7YNkDM687cxc16I2vYlnzmZqU0vJuLtgYBJtwEWrtNKRu8vBJLZADg0cjwAblWZ3U1I8xjKEjIpzqH2RG9nRtV+D+aAzI9Vqpz8jLdOfPOcc68UStaWSVTUUUdEkeGPQwLbTW3IAU/FxQ59ziXgoUqwcSHG2vx2KrttdXihK+uFY9rW0U4v5b5eNwaZ5Udjbc8+ZPe8APhNzA/eJiygtlM/GF/VljBPMQBWKD1qymweYiDZe2SAEm/Vmp/GkSVwAzmPro+Ep8bPyTN+BCee2ZkiX2EJ6LG70gld/45dGjePGz2ZTpzMLDt4KHBxFyQ+SSu8MiRwjHZ96p2rNDmP2Kr95dZSMphcVBkHlk6xcKswO6nSX+7LRciJ4WCiV+GHG8PPiPRsA2tz/zlkDocMwRC8qClYBJY9DL/x5/2ZbT+D+1419uu7KjXy7d73x1HAWgRB/z0470ZbTPSr+9FensQYt/b2xtFenprc09PRkpYUxhNoynpcLY8FXY46UgYxR9Jak5LhzWD7Fp5tHylnJXjXiG3qHGrY5bDiquR9p19ny+eWZA46ZykSWYu/rzYKXZGVUY9b1YDZ5xICHKGjgg2oGhhYVYWuwfK2/Zfc7CSFeGIKHkGFD1sWtQ09SemsL9wsGRfMj4WXMkP5Vfi4xGVe/cuWfHm2q2Ag2P/X7At+ULQB31oM7hbKVtbWVEJ0qZWRoyYDmiVDiGYBoRnzmSL4MC4gkB8vfJT4eBBebGYIxzJkjSoYLhfYLG+XB7Z1mbowXyY1nZlF8vlGCZZcT4s8GfKrXgFWVshU+bJB4LLGtm8L1s3H5uQST6TabGgO1htbPNa8nYPKbGJghwySZvy3L3cgAnZweY1xJ/vSVYU/iR5tnqFMwebWHOwpYT89vPn31RhtPLwihSFeA8oIlXgPYkyxC3BX+GIV8/HXskLtlzwe1h1bEv7LtxZvP3pF2vXYT/KMknZqrwDRY2FmeI/35u/oq4krNTskLd7ger5N8RXUPHl4j3lK1M36YHELuVrwUrP6teP+NwmkbBSNkGtBB67sgKpXwKmJkyVSmd+9nbDOMH89rFWbeM3062+VqJ0fmmI8M1vJwxpkoPCkO3zK4Ua38Hvf+nuOTHLr8UZ0eTcozrVzWuTqcLIEEY0GtKAREqYFdTBWP+879ekSFVDFkRentU7c4H47/ZYAS8KzbmaS1BfHJn7oiCK1oqmKTueELpFq38KZHOroqOq1B3qn5v7Po8mD+xq/SlHsfNcmuDigdR953ZVpOwcfSn1wOg3/4admg5ak6fBVve00aQiLTt9dNbS3dXA/nSor0wtFjHKN+2otm+orCxTpGTsb2pRItdHRPHA3JAzD4ty/gIDvti/5Lm+3auWNRYtojdt35iTCwbGo/+W509eea6YJOUoV8DTSHbyeDIbZIXc9pVfAMyfPGbl3eUL7vGsf73++zVDazv6rhdtt13KK5odWLiqqZ5e5O7O3lgAsz4WhV11FB8L4IvDAidvfhQ7me0XE50EEqHw+8mQl1Fb1lnyVfmr5NksG3qm1e2h5IcsWxqi+79/aKM+I6dqCnmofkefLCcdDjJifP/+cTAfrNhS1BEjaPLFLKjfUr8gxtckiOko0jHz3ratio2zykRVKPiHp8jbPS/z0Gxvs3Pp247AI4GXpTN/1SWHi6XFc8sMdwVP1z3HH1zxNS0RoWmbJ9ng2YNXecA5XeWz2XoDwS+ZgX/7mxlGNINJqR/suoLv1N1gRyW5+IYr6BzxliF0qfg5CxonajlQqWjjQWmR9QXKft6jadDZAIADSAsxLItK/XxbfGTQpNJtHRvw0cwaG7fzGT5U5f+b6QjKsmZNQaBsLIUyR0wneoFtRRY/bMkE/v9em6kULvo1iLgrs/OnzSGACqr6KRvGSAzeqB4pD1KwDCy2P9zfLh6YL58nUNJxBs/U9Fi6v0OPYFKjLZnXKc4woIhL4CHKpkkf9YnNODseKbGZmhjRCrGSbc5VHhOvuiZBckeKI0UjV1Nq1alk4NBBQmTcJWKM+kGscWMSJFSOE2/WdyQYjyXFi8zHWe3mc++RQDJoEe1EqtCZJMS9ou83xMFKarpy4R/IpzvFyeHxYNsrOCAfA/h1fMpshCEsxAuZGViLoiTMQPFhwlzeHh0Z04CHCotKzzMESJyuqAlqu7pbKcgxd2Y9bfG/gVhgSWQ54lfdf4B46csL2WbJcuBeNed0xL5Y66zFTtVT3RByf4IKwjKqAyviSNhtTpcBCju0ZQyjdGs2PVOlq3YYnxXbhMbad1Re/PkYWTl5BUUlZRVVNY1oVGMa14QmNaVpzWhWc5rXAia948ZZlLqzRywOMHAzLWQMndU2NdAp96TiIK1P99BQWO7aLglS11QWJHUNCmwObOqgQaCxEZyy1E3KHcaDpas7bhdJI6nyHmF64MH+TrCReXQ9E6z1igBcKyLMYWLmQGtoltJzuldMGMp2cPmWkSSKsFUTlj31VSo=') 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";
|
||||
}
|
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
|
||||
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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)"> {{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>
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -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 **************
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/16
|
||||
* @description: 线条的后期设置
|
||||
*/
|
||||
|
||||
export default {
|
||||
type: 'cc-line',
|
||||
style: {
|
||||
startArrow: false,
|
||||
endArrow: false
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/16
|
||||
* @description: 配置
|
||||
*/
|
||||
|
||||
import edge from './edge'
|
||||
|
||||
export default {
|
||||
edge
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
|
@ -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 []
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/18
|
||||
* @description: 曲线
|
||||
*/
|
||||
|
||||
import base from './base'
|
||||
|
||||
export default {
|
||||
name: 'top-cubic',
|
||||
extendName: 'cubic',
|
||||
options: {
|
||||
...base
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/18
|
||||
* @description: 直线
|
||||
*/
|
||||
|
||||
import base from './base'
|
||||
|
||||
export default {
|
||||
name: 'top-line',
|
||||
extendName: 'line',
|
||||
options: {
|
||||
...base
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
@ -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],
|
||||
];
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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 }
|
||||
}
|
||||
|
|
@ -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 }
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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 }
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: edge
|
||||
*/
|
||||
|
||||
import setState from './set-state'
|
||||
|
||||
export default {
|
||||
setState
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: node
|
||||
*/
|
||||
|
||||
import setState from './set-state'
|
||||
|
||||
export default {
|
||||
setState
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,d09GMgABAAAAAA1MAAsAAAAAGkgAAAz/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCGNAqiNJtOATYCJANgCzIABCAFhG0Hgggb6BVRlHJWSbKvBuyGeKPMp/UYzGar17rEgTXbq2lrenLOOiJE8OITJy7o6fe+23NLTyvVJoAwKGwrQsbFosAJPEZ3+Ytm/BseN+3fS0glCVCTCasY3VadGPyVrtxu0utIModSm3RSUfZHsjncObIyr8P0tHWYOJ0iZ73RM+2Zsj9df+4zw/JNJ9NJdwqhRklfCGc8j+3e58ZmgnVRSEKWoklKoPcrmZk0P0/vAQIBvH8/VamVDeUAJF3vd7MA0gtNCSshGl4/et+X5y2na8nOGlLHnKxoLUA8VuZibvEGsDHrBry0BQQUMFyDQ83xaxAyVtWrb5F0j+khUKzKBLeXr99Kh8NzCehMY1nptPycxS7JGwzDFukbmNR8MRW+5qXXb00Cw7fwgs+PZ125e8B32V4da2Ma5KA/HXgZDiw4BnAwk3GbBmxJj3OtmP7ceP4B7BPhSU/MEskVU6nwQu9EH7xRxVXS/eHM0Zd9YXi589MDTvXcO37+eLIvQ1Rn/RceIJoTYFwonswTIykqqxkxasyMKBHChAPqQO8G0MJa5oAekKsR0YOqCaYACYBEIOMAOZAJQDEQB1AByYAKIB7wAhABTmA1DPpgNRL6UUgBxAGpgBIgFnAPSAM4gYwAxoCMAu5jNcYwjGwkh2ggs4AyINOAC0AmAZexF1MAMJ8Ocw7woOJvQKg4+840uwPrToBSd7dEvK4t7vqaNfFFG7BPmh1xcj7mKetK4OMad2POjc62lYVVQ4stLy8tV6JEg9uc643L1cHTEs84tW63xsev5q0SacLNnHdans+TeT+TrS6PO/hylgoKhZfDejUj72RllMIEPrGHm0p736c9zytc+yj3BEMZ9dHRZi5qp4djvHrKzSpcOprmAxJqQnihShgQFtgigBsqGECffqJ/xD7UPdYg7DAu0I3GYcftqU4L4glRlYKRUFU0s8SmS1tESc5xGkAAAm7ElR8XPFOMjRcQBNI2kszvscejltEUsnOY4iPkLjIwa8BJnQliXA9BFAKCriRUMfJCIKnrBDzWSPBb6Gte6PHQLpfC7aa83tWd1s9xOzW718uYXK4NbC+OAyXobBDiAneOIKCgtwJQ79PgPByT4zv5KF/Y92Q6ZrrO4NDiScE7XTEARi9rJUIn+WZtahwSYBfad216u2fZdZfo5JVk5C3HlLPuwlvexFNXN+sHLrDn+5O6Rzn7JqTSj7DDGr0xEjH0TsV6Lprpps/7Sb+SM2alSWeIQIxWgq9fzM7u+jwf/31KUweVzqfWmaJwzqTW9QJQdH1JTujN0YTZDCFna8A9pMQNBgAerfpzEBLd7FVtijSZcDfnUJ0zbeiwo6d6u6fOdj/NmM1ROVV74VQPMRoJSgFaGsyo6jHvpNCToRTqUjXzLgmK97XbNS8D8TofjPO1BlfB3s4aI5/kEfqaTZWlCjXlMX0LoaAJyHmWut1K4mB9uFwXBglAnG2NW33VZWW7AQ5wKKiiTrIZ8CHN148AsMnayEdByNnX6oaGtt3FN8dkMQiBcgQfEDx2Hd8CIQ42V07YBTvlUUD9dA0sMPRGIKw1Wag/F4+abNVguU3AEAUJY7Q5GkKCyjOZInQRc8IwGiP1XUoSydvSOnFdiskC5xq7oueAvDDkpSAltu7iQO54T09kzwClyzCd4k5Hn8vXpxvb2BMRhk5a5yL0XgbgNJF9mmEdQ6EkpVgLgY8qaLWA8Glmw0AkwlCat1xTInCMPOWZs+JtZ9Lc8OZGEzz+SXf+JtB1GWzsvshd2ky9DcULNNDzOY07IyTWyxh4ywXONieV2OFZjrfqbKdOn+t72wqOnW/QXdxUB2bPbz/9ZC4fWmwpuO2+zpm25ewZw2uzJhPKLuvul4w7V0Egx3qTyG7bIYI7F22zMv236iMpowbruQS3/s66/hiBZRCf313YC8m8zvNzubN+KF7YNkDM687cxc16I2vYlnzmZqU0vJuLtgYBJtwEWrtNKRu8vBJLZADg0cjwAblWZ3U1I8xjKEjIpzqH2RG9nRtV+D+aAzI9Vqpz8jLdOfPOcc68UStaWSVTUUUdEkeGPQwLbTW3IAU/FxQ59ziXgoUqwcSHG2vx2KrttdXihK+uFY9rW0U4v5b5eNwaZ5Udjbc8+ZPe8APhNzA/eJiygtlM/GF/VljBPMQBWKD1qymweYiDZe2SAEm/Vmp/GkSVwAzmPro+Ep8bPyTN+BCee2ZkiX2EJ6LG70gld/45dGjePGz2ZTpzMLDt4KHBxFyQ+SSu8MiRwjHZ96p2rNDmP2Kr95dZSMphcVBkHlk6xcKswO6nSX+7LRciJ4WCiV+GHG8PPiPRsA2tz/zlkDocMwRC8qClYBJY9DL/x5/2ZbT+D+1419uu7KjXy7d73x1HAWgRB/z0470ZbTPSr+9FensQYt/b2xtFenprc09PRkpYUxhNoynpcLY8FXY46UgYxR9Jak5LhzWD7Fp5tHylnJXjXiG3qHGrY5bDiquR9p19ny+eWZA46ZykSWYu/rzYKXZGVUY9b1YDZ5xICHKGjgg2oGhhYVYWuwfK2/Zfc7CSFeGIKHkGFD1sWtQ09SemsL9wsGRfMj4WXMkP5Vfi4xGVe/cuWfHm2q2Ag2P/X7At+ULQB31oM7hbKVtbWVEJ0qZWRoyYDmiVDiGYBoRnzmSL4MC4gkB8vfJT4eBBebGYIxzJkjSoYLhfYLG+XB7Z1mbowXyY1nZlF8vlGCZZcT4s8GfKrXgFWVshU+bJB4LLGtm8L1s3H5uQST6TabGgO1htbPNa8nYPKbGJghwySZvy3L3cgAnZweY1xJ/vSVYU/iR5tnqFMwebWHOwpYT89vPn31RhtPLwihSFeA8oIlXgPYkyxC3BX+GIV8/HXskLtlzwe1h1bEv7LtxZvP3pF2vXYT/KMknZqrwDRY2FmeI/35u/oq4krNTskLd7ger5N8RXUPHl4j3lK1M36YHELuVrwUrP6teP+NwmkbBSNkGtBB67sgKpXwKmJkyVSmd+9nbDOMH89rFWbeM3062+VqJ0fmmI8M1vJwxpkoPCkO3zK4Ua38Hvf+nuOTHLr8UZ0eTcozrVzWuTqcLIEEY0GtKAREqYFdTBWP+879ekSFVDFkRentU7c4H47/ZYAS8KzbmaS1BfHJn7oiCK1oqmKTueELpFq38KZHOroqOq1B3qn5v7Po8mD+xq/SlHsfNcmuDigdR953ZVpOwcfSn1wOg3/4admg5ak6fBVve00aQiLTt9dNbS3dXA/nSor0wtFjHKN+2otm+orCxTpGTsb2pRItdHRPHA3JAzD4ty/gIDvti/5Lm+3auWNRYtojdt35iTCwbGo/+W509eea6YJOUoV8DTSHbyeDIbZIXc9pVfAMyfPGbl3eUL7vGsf73++zVDazv6rhdtt13KK5odWLiqqZ5e5O7O3lgAsz4WhV11FB8L4IvDAidvfhQ7me0XE50EEqHw+8mQl1Fb1lnyVfmr5NksG3qm1e2h5IcsWxqi+79/aKM+I6dqCnmofkefLCcdDjJifP/+cTAfrNhS1BEjaPLFLKjfUr8gxtckiOko0jHz3ratio2zykRVKPiHp8jbPS/z0Gxvs3Pp247AI4GXpTN/1SWHi6XFc8sMdwVP1z3HH1zxNS0RoWmbJ9ng2YNXecA5XeWz2XoDwS+ZgX/7mxlGNINJqR/suoLv1N1gRyW5+IYr6BzxliF0qfg5CxonajlQqWjjQWmR9QXKft6jadDZAIADSAsxLItK/XxbfGTQpNJtHRvw0cwaG7fzGT5U5f+b6QjKsmZNQaBsLIUyR0wneoFtRRY/bMkE/v9em6kULvo1iLgrs/OnzSGACqr6KRvGSAzeqB4pD1KwDCy2P9zfLh6YL58nUNJxBs/U9Fi6v0OPYFKjLZnXKc4woIhL4CHKpkkf9YnNODseKbGZmhjRCrGSbc5VHhOvuiZBckeKI0UjV1Nq1alk4NBBQmTcJWKM+kGscWMSJFSOE2/WdyQYjyXFi8zHWe3mc++RQDJoEe1EqtCZJMS9ou83xMFKarpy4R/IpzvFyeHxYNsrOCAfA/h1fMpshCEsxAuZGViLoiTMQPFhwlzeHh0Z04CHCotKzzMESJyuqAlqu7pbKcgxd2Y9bfG/gVhgSWQ54lfdf4B46csL2WbJcuBeNed0xL5Y66zFTtVT3RByf4IKwjKqAyviSNhtTpcBCju0ZQyjdGs2PVOlq3YYnxXbhMbad1Re/PkYWTl5BUUlZRVVNY1oVGMa14QmNaVpzWhWc5rXAia948ZZlLqzRywOMHAzLWQMndU2NdAp96TiIK1P99BQWO7aLglS11QWJHUNCmwObOqgQaCxEZyy1E3KHcaDpas7bhdJI6nyHmF64MH+TrCReXQ9E6z1igBcKyLMYWLmQGtoltJzuldMGMp2cPmWkSSKsFUTlj31VSo=') 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";
|
||||
}
|
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
|
||||
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
|
|
@ -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>
|
||||
|
|
@ -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
Loading…
Reference in New Issue