构建冲突

将天气小部件从独立位置移动到右菜单内，以提高可读性和美观性。此更改通过整合天气小部件与用户界面的其余部分，创造了更和谐的视觉体验。

package.json

@@ -36,28 +36,43 @@
     "url": "https://gitee.com/y_project/MuYu-Cloud.git"
   },
   "dependencies": {
+    "@antv/x6": "^2.18.1",
+    "@antv/x6-plugin-clipboard": "^2.1.6",
+    "@antv/x6-plugin-history": "^2.2.4",
+    "@antv/x6-plugin-keyboard": "^2.2.3",
+    "@antv/x6-plugin-selection": "^2.2.2",
+    "@antv/x6-plugin-snapline": "^2.1.7",
+    "@antv/x6-plugin-stencil": "^2.1.5",
+    "@antv/x6-plugin-transform": "^2.1.8",
+    "@antv/x6-vue-shape": "^2.1.2",
     "@riophae/vue-treeselect": "0.4.0",
+    "@vue/composition-api": "^1.7.2",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
+    "codemirror": "^5.65.12",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
-    "element-ui": "2.15.14",
+    "element-ui": "^2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "insert-css": "^2.0.0",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "lodash": "4.17.15",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-click-outside": "^1.1.0",
+    "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "2.23.0",
     "vuex": "3.6.0"
   },
   "devDependencies": {
@@ -71,6 +86,8 @@
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "lint-staged": "10.5.3",
     "runjs": "4.4.2",
     "sass": "1.32.13",

src/App.vue

@@ -10,7 +10,7 @@ import ThemePicker from "@/components/ThemePicker";
 
 export default {
   name: "App",
-  components: {ThemePicker},
+  components: { ThemePicker },
   metaInfo() {
     return {
       title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
@@ -25,4 +25,13 @@ export default {
 #app .theme-picker {
   display: none;
 }
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  width: 100%;
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
 </style>

src/api/engine/engine.js

@@ -0,0 +1,262 @@
+import request from '@/utils/request'
+
+//查询规则引擎列表
+
+export function selectEngineList(data) {
+
+  return request({
+
+    url: "/engine/engine/getMaintenanceList",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+//添加规则数据
+
+export function insert(data) {
+
+  return request({
+
+    url: "/engine/engine/insert",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+//修改规则数据
+
+export function update(data) {
+
+  return request({
+
+    url: "/engine/engine/update",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+//通过id删除数据
+
+export function del(id) {
+
+  return request({
+
+    url: "/engine/engine/delete/" + id,
+
+    method: "post",
+
+    data: id
+
+  })
+
+}
+
+//开启
+
+export function onEngine(id) {
+
+  return request({
+
+    url: "/engine/version/open/" + id,
+
+    method: "post"
+
+  })
+
+}
+
+//禁用
+
+export function forbiddenEngine(id) {
+
+  return request({
+
+    url: "/engine/version/close/" + id,
+
+    method: "post"
+
+  })
+
+}
+
+//查看等级列表信息
+
+export function selectLevel() {
+
+  return request({
+
+    url: "/engine/level/selectLevelList",
+
+    method: "post"
+
+  })
+
+}
+
+// 查询规则引擎版本列表
+
+// 通过id查询
+export function findById(id) {
+  return request({
+
+    url: '/engine/engine/findByIdsfindByIds/' + id,
+
+    method: 'get'
+
+  })
+
+}
+
+//通过id删除数据
+
+export function dels(id) {
+
+  return request({
+
+    url: '/engine/version/delete/' + id,
+
+    method: 'post',
+
+    data: id
+
+  })
+
+}
+
+
+//添加规则数据
+
+export function add(data) {
+
+  return request({
+
+    url: "/engine/version/insertVersion",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+
+export function selectEngineById(id) {
+
+  return request({
+
+    url: "/engine/engine/selectEngineById/" + id,
+
+    method: "post",
+
+    data: id
+
+  })
+
+}
+
+//根据版本id查询版本信息
+
+export function sel(id) {
+
+  return request({
+
+    url: "/engine/version/selectListById/" + id,
+
+    method: "post"
+
+  })
+
+}
+
+//根据版本id查询版本信息
+
+export function generate(data) {
+
+  return request({
+
+    url: "/engine/engine/generate",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+export function getVersionData(id) {
+
+  return request({
+
+    url: "/engine/version/getVersionById/" + id,
+
+    method: "get",
+
+    data: id
+
+  })
+
+}
+
+//数据库查询
+
+export function selectDataBase() {
+
+  return request({
+
+    url: "/engine/version/selectDataBase",
+
+    method: "post",
+
+  })
+
+}
+
+//数据字段查询
+
+export function selectData() {
+
+  return request({
+
+    url: "/engine/version/selectData",
+
+    method: "post",
+
+  })
+
+}
+
+//测试
+
+export function testData(data) {
+
+  return request({
+
+    url: "/engine/engine/testData",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+
+
+
+

src/api/engine/getRuleEngineInfo.js

@@ -0,0 +1,13 @@
+import request from "@/utils/request";
+
+export function getRuleEngineInfo(master) {
+
+  return request({
+
+    url: '/engine/engine/getRuleEngineInfo/' + master,
+
+    method: 'put'
+
+  })
+
+}

src/api/etl/switch.js

@@ -0,0 +1,158 @@
+import request from '@/utils/request'
+
+//查询数据源列表
+export function selectSourceList(data){
+  return request({
+    url: "/source/source/list",
+    method: "POST",
+    data:data
+  })
+}
+
+// //导出
+// export function selectSourceExport(data){
+//   return request({
+//     url: "/source/source/export",
+//     method: "POST",
+//     data:data
+//   })
+// }
+
+//新增
+export function insertAdd(data){
+  return request({
+    url: "/source/source/insert",
+    method: "post",
+    data:data
+  })
+}
+
+
+//获取基本信息
+export function getInfo(id){
+  return request({
+    url: "/source/source/"+id,
+    method: "get",
+  })
+}
+
+
+//测试连接
+export function structure(data){
+  return request({
+    url: "/source/source/structure",
+    method: "post",
+    data:data
+  })
+}
+
+//同步资产结构
+export function connectionTest(data){
+  return request({
+    url: "/source/source/connectionTest",
+    method: "post",
+    data:data
+  })
+}
+
+
+//删除
+export function deleteSource(ids){
+  return request({
+    url: "/source/source/"+ids,
+    method: "delete",
+  })
+}
+
+
+//修改
+export function update(data){
+  return request({
+    url: "/source/source/update",
+    method: "post",
+    data:data
+  })
+}
+
+
+//查询数据库名称 表名称  字段名称 类型等
+
+export function findTableInfo(){
+  return request({
+    url: "/source/tableInfo/findTableInfo",
+    method: "get",
+  })
+}
+
+export function findTableInfoList(){
+  return request({
+    url: "/source/tableInfo/findTableInfoList",
+    method: "get",
+  })
+}
+
+
+export function findTableInfoListAccredit(){
+  return request({
+    url: "/source/tableInfo/findTableInfoListAccredit",
+    method: "get",
+  })
+}
+
+
+export function findStructureByTableId(id){
+  return request({
+    url: "/source/tableInfo/findStruceure/"+id,
+    method: "get",
+  })
+}
+
+
+
+export function findTableValueList(basicId,tableName){
+  return request({
+    url: "/source/DataValue/findTableValueList?basicId="+basicId+"&tableName="+tableName,
+    method: "post",
+  })
+}
+
+
+export function findAccredit(id){
+  return request({
+    url: "/source/accredit/findAccredit?tableId="+id,
+    method: "get",
+  })
+}
+
+
+export function findDeptListStatus(tableId,basicId){
+  return request({
+    url: "/source/accredit/findDeptListStatus?tableId="+tableId+"&basicId="+basicId,
+    method: "get",
+  })
+}
+
+export function findUserListStatus(tableId,basicId){
+  return request({
+    url: "/source/accredit/findUserListStatus?tableId="+tableId+"&basicId="+basicId,
+    method: "get",
+  })
+}
+export function addMiddle(data){
+  return request({
+    url: "/source/accredit/addMiddle",
+    method: "post",
+    data :data
+  })
+}
+
+export function remove(data){
+  return request({
+    url: "/source/accredit/remove",
+    method: "post",
+    data :data
+  })
+}
+
+
+

src/api/port/port/index.js

@@ -0,0 +1,120 @@
+import request from '@/utils/request'
+
+export function findConnectorList(data) {
+  return request({
+    url: '/mart/connector/findConnectorList',
+    method: 'post',
+    data:data
+  })
+}
+export function findApiList(data) {
+  return request({
+    url: '/mart/connector/findApiList',
+    method: 'post',
+    data:data
+  })
+}
+
+
+//TODO 根据ID查
+export function findApiById(id) {
+  return request({
+    url: '/mart/connector/findApiById/' + id,
+    method: 'get',
+  })
+}
+
+export function addConnector(data) {
+  return request({
+    url: '/mart/connector/addConnector',
+    method: 'post',
+    data:data
+  })
+}
+
+export function getDeleteConnector(connectorId) {
+  return request({
+    url: '/mart/connector/getDeleteConnector?connectorId='+connectorId,
+    method: 'get'
+  })
+}
+
+
+export function updateConnector(data) {
+  return request({
+    url: '/mart/connector/updateConnector',
+    method: 'post',
+    data:data
+  })
+};
+
+export function phonePlace(tel) {
+  return request({
+    url: '/port/list/phonePlace?tel='+tel,
+    method: 'GET'
+  })
+}
+
+export function getIpPlace(ip) {
+  return request({
+    url: '/port/list/getIpPlace?ip='+ip,
+    method: 'GET'
+  })
+}
+export function getHeadlines() {
+  return request({
+    url: '/port/list/getHeadlines',
+    method: 'GET'
+  })
+}
+export function getBirthday(data) {
+  return request({
+    url: '/port/list/getBirthday',
+    method: 'post',
+    data:data
+  })
+}
+
+export function getPostcode(code) {
+  return request({
+    url: '/port/list/getPostcode?code='+code,
+    method: 'GET'
+  })
+}
+export function getWeather() {
+  return request({
+    url: '/port/list/getWeather',
+    method: 'GET'
+  })
+}
+//天气预报
+export function getWeatherForecast(cityName) {
+  return request({
+    url: '/port/list/getWeatherForecast?cityName='+cityName,
+    method: 'GET'
+  })
+}
+
+//购买
+export function doBuyInterface(data) {
+  return request({
+    url: '/system/buy/doBuyInterface',
+    method: 'post',
+    data:data
+  })
+}
+//资产列表
+export function findConnectorUserList(data) {
+  return request({
+    url: '/mart/connector/findConnectorUserList',
+    method: 'post',
+    data:data
+  })
+}
+//API页面类型分类
+export function findConnectSort() {
+  return request({
+    url: '/mart/connector/findConnectSort',
+    method: 'get'
+  })
+}

src/api/system/user.js

@@ -10,6 +10,88 @@ export function listUser(query) {
   })
 }
 
+
+
+//购买用户记录
+export function userloginfo(query) {
+  return request({
+    url: '/system/user/purchaseRecord',
+    method: 'get',
+    params: query
+  })
+}
+
+//查询12个月的总消费
+export function months() {
+  return request({
+    url: '/system/user/months',
+    method: 'get',
+  })
+}
+
+
+//充值用户记录
+export function userPayinfo(query) {
+  return request({
+    url: '/system/user/userPayinfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 充值用户余额
+export function userRecharge(data) {
+  return request({
+    url: '/system/aliyun/pay/payZFB',
+    method: 'post',
+    data: data
+  })
+}
+
+
+
+// 调用第三方实名认证
+export function checkRealNameAuth(data) {
+  return request({
+    url: '/system/aliyun/pay/doPost',
+    method: 'post',
+    data: data
+  })
+}
+
+// 发送验证码
+export function sendCode(phonenumber) {
+  return request({
+    url: '/system/aliyun/pay/sendCode/' + phonenumber,
+    method: 'post',
+  })
+}
+
+//检查验证码
+export function checkCode(phonenumber,code) {
+  return request({
+    url: '/system/aliyun/pay/checkCode/'+ phonenumber +"/" + code,
+    method: 'post',
+  })
+}
+
+// 充值用户余额记录
+export function createRechargeRecord(data) {
+  return request({
+    url: '/system/aliyun/pay/records',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询用户余额
+export function userBalance(userId) {
+  return request({
+    url: '/system/user/balance/' + userId,
+    method: 'get',
+  })
+}
+
 // 查询用户详细
 export function getUser(userId) {
   return request({
@@ -44,6 +126,15 @@ export function delUser(userId) {
   })
 }
 
+
+//修改手机号
+export function updatePhone(data) {
+  return request({
+    url: '/system/user/profile/updatePhonenumber/'+data,
+    method: 'POST'
+  })
+}
+
 // 用户密码重置
 export function resetUserPwd(userId, password) {
   const data = {
@@ -70,6 +161,15 @@ export function changeUserStatus(userId, status) {
   })
 }
 
+//对用户余额进行添加
+export function addUserMoney(data) {
+  return request({
+    url: '/system/user/addUserMoney',
+    method: 'post',
+    data:data
+  })
+}
+
 // 查询用户个人信息
 export function getUserProfile() {
   return request({

src/api/task/task.js

@@ -0,0 +1,119 @@
+import request from '@/utils/request'
+
+//查询任务列表
+export function selectTaskList(data){
+  return request({
+    url: "/task/task/list",
+    method: "post",
+    data:data
+  })
+}
+
+//添加
+export function addTask(data){
+  return request({
+    url: "/task/task/addTask",
+    method: "POST",
+    data:data
+  })
+}
+
+//修改
+export function updateById(data) {
+  return request({
+    url: "/task/task/updateById",
+    method: "POST",
+    data: data
+  })
+}
+
+//删除
+export function deleteByTaskId(id) {
+  return request({
+    url: "/task/task/deleteById/" + id,
+    method: "POST"
+  })
+}
+
+//获得所有数据结构信息
+// export function tableInfoList() {
+//   return request({
+//     url: "/task/tableInfo/list",
+//     method: "GET",
+//   })
+// }
+
+//获得所有数据结构信息
+export function findByTableId(id) {
+  return request({
+    url: "/task/tableInfo/findByTableId?id="+id,
+    method: "POST",
+    params:id
+  })
+}
+
+//获得所有数据结构信息
+export function findStructureList(tableId) {
+  return request({
+    url: "/task/structure/findStructureList?tableId="+tableId,
+    method: "GET"
+  })
+}
+
+//添加节点任务记录
+export function addTaskInput(data) {
+  return request({
+    url: "/task/taskInput/addTaskInput",
+    method: "POST",
+    data:data
+  })
+}
+
+//根据节点id查询信息
+export function findByNodeId(nodeId) {
+  return request({
+    url: "/task/taskInput/findByNodeId/"+nodeId,
+    method: "get",
+  })
+}
+
+//联查记录添加
+export function addTaskJoin(data) {
+  return request({
+    url: "/task/taskJoin/addTaskJoin",
+    method: "POST",
+    data:data
+  })
+}
+
+//添加数据输出节点
+export function addTaskOutPut(data) {
+  return request({
+    url: "/task/taskOutPut/addTaskOutput",
+    method: "POST",
+    data:data
+  })
+}
+
+//执行任务
+export function executeTask(id) {
+  return request({
+    url: "/task/task/executeTask/"+id,
+    method: "POST"
+  })
+}
+
+
+export function addNodeRule(data) {
+  return request({
+    url: "/task/nodeRule/addNodeRule/",
+    method: "POST",
+    data:data
+  })
+}
+
+
+
+
+
+

src/api/type/type.js

@@ -0,0 +1,81 @@
+import request from '@/utils/request'
+
+//查询规则引擎列表
+
+export function list() {
+
+  return request({
+
+    url: "/engine/type/list",
+
+    method: "post"
+
+  })
+
+}
+
+//添加类型数据
+
+export function insert(data) {
+
+  return request({
+
+    url: "/engine/type/add",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+//修改类型数据
+
+export function update(data) {
+
+  return request({
+
+    url: "/engine/type/update",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+
+
+//删除类型数据
+
+export function del(id) {
+
+  return request({
+
+    url: "/engine/type/delete/" + id,
+
+    method: "post",
+
+    data: id
+
+  })
+
+}
+
+//导出类型数据
+
+export function exports(data) {
+
+  return request({
+
+    url: "/engine/type/export",
+
+    method: "post",
+
+    data: data
+
+  })
+
+}
+

src/api/version/version.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+//查询规则引擎列表
+export function list(data){
+  return request({
+    url: "/engine/version/list",
+    method: "get",
+    data:data
+  })
+}
+
+//添加规则引擎版本数据
+export  function insert(data){
+  return request({
+    url: "/engine/version/insert",
+    method: "post",
+    data:data
+  })
+}
+
+//删除规则引擎版本信息
+export  function del(id){
+  return request({
+    url: "/engine/version/delete/" + id,
+    method: "post",
+    data:id
+  })
+}
+
+//查看等级列表
+export  function selectLevel(){
+  return request({
+    url: "/engine/level/selectLevelList",
+    method: "post"
+  })
+}
+
+// 查询规则引擎版本列表
+export function getRuleEngineInfo(id) {
+  return request({
+    url: '/engine/engine/getRuleEngineInfo/' + id,
+    method: 'put'
+  })
+}
+
+

src/assets/svg/10大数据服务.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>10大数据服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M149.93,44.94H67.61a4.41,4.41,0,0,0,0,8.81h78v78.78a4.36,4.36,0,1,0,8.72,0V49.34A4.34,4.34,0,0,0,149.93,44.94Z"/><path class="cls-5" d="M133.57,64.06H51.07a4.34,4.34,0,0,0-4.36,4.41v83.19a4.34,4.34,0,0,0,4.36,4.41h82.32a4.34,4.34,0,0,0,4.36-4.41V68.47A4.1,4.1,0,0,0,133.57,64.06Z"/></g></g></svg>

src/assets/svg/11个人源服务.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#a375e9;}.cls-5{fill:#c5a9f1;}</style></defs><title>11个人源服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="45.47" y="54.12" width="43.86" height="44.33"/><rect class="cls-4" x="45.47" y="111.74" width="43.86" height="44.33"/><polygon class="cls-5" points="124.52 44.94 93.5 76.28 124.52 107.62 155.53 76.28 124.52 44.94"/><rect class="cls-4" x="102.59" y="111.74" width="43.86" height="44.33"/></g></g></svg>

src/assets/svg/12Python.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#dce6fe;}.cls-5{fill:#4f80f9;}</style></defs><title>12Python</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="0.87" ry="0.87"/><path class="cls-5" d="M121,81.2l6,.73c0,.52.1,1,.1,1.44q0,11.59,0,23.18c0,4.07-.91,7.82-3.81,10.86a16.52,16.52,0,0,1-12.59,4.65l-1.94-5.83c9.78-1.48,13.11-4,12.39-9.38-2.53.57-5,1.27-7.59,1.68-4.42.7-8.28-.88-10-4.1a8.84,8.84,0,0,1-1-3.78c-.11-5.33,0-10.66-.07-16a2.14,2.14,0,0,1,1.06-2.11c1.63-1,3.19-2.12,5-3.31,0,.52.08.9.08,1.28,0,5.49-.14,11,.12,16.45.21,4.58,2.73,6.14,7.16,4.94l.3-.11c4.79-1.54,4.79-1.54,4.78-6.56C121,90.64,121,86,121,81.2Z"/><path class="cls-5" d="M80.09,122.26c-2.14-1.41-4-2.57-5.74-3.83a1.71,1.71,0,0,1-.45-1.24q0-16.46,0-32.93a1.8,1.8,0,0,1,.57-1.33,23.79,23.79,0,0,1,9.46-4c4.73-.69,8.53.93,10.93,4.94,3.81,6.38,5.41,13.11,1.51,20.11-1.91,3.42-4.68,5.87-8.77,6.12a15.06,15.06,0,0,1-4.51-.66,18,18,0,0,1-3-1.39Zm-.34-27.38q0,1.6,0,3.19c0,4.54.56,5.24,5.07,6.36,3.57.89,6.14-.45,7.16-4a18.72,18.72,0,0,0-.36-11.91c-1-2.78-2.94-4-5.84-3.46a22.12,22.12,0,0,0-5.46,2.39c-.36.18-.53,1-.55,1.51C79.71,90.94,79.75,92.91,79.75,94.88Z"/></g></g></svg>

src/assets/svg/13测试报告.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#dce6fe;}.cls-5{fill:#4f80f9;}</style></defs><title>13测试报告</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="2" ry="2"/><path class="cls-5" d="M82.54,115.79,69.84,100.5a2,2,0,0,1,0-2.56L82.52,82.68a2,2,0,0,0-.25-2.81L81.22,79a2,2,0,0,0-2.83.25l-16.6,20,0,0,16.6,20a2,2,0,0,0,2.83.25l1-.89A2,2,0,0,0,82.54,115.79Z"/><path class="cls-5" d="M122.61,79.24a2,2,0,0,0-2.83-.25l-1,.89a2,2,0,0,0-.25,2.8l12.68,15.26a2,2,0,0,1,0,2.56l-12.7,15.29a2,2,0,0,0,.25,2.8l1,.89a2,2,0,0,0,2.83-.25l16.6-20,0,0Z"/><path class="cls-5" d="M109.12,79l-1.27-.47a2,2,0,0,0-2.58,1.19L90.69,119.58a2,2,0,0,0,1.18,2.56l1.27.47a2,2,0,0,0,2.58-1.19L110.3,81.55A2,2,0,0,0,109.12,79Z"/></g></g></svg>

src/assets/svg/14描述统计.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#dce6fe;}.cls-5{fill:#4f80f9;}</style></defs><title>14描述统计</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="0.87" ry="0.87"/><rect class="cls-5" x="74.4" y="82.72" width="5.65" height="41.01" rx="2" ry="2"/><rect class="cls-5" x="121.45" y="86.31" width="5.15" height="37.42" rx="2" ry="2"/><rect class="cls-5" x="97.8" y="77.27" width="5.65" height="46.47" rx="2" ry="2"/></g></g></svg>

src/assets/svg/15清洗.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#facd51;}</style></defs><title>15清洗</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M112.41,81.61V48a3,3,0,0,0-3-3H91.61a3,3,0,0,0-3,3V81.61a3,3,0,0,1-3,3H51.92a3,3,0,0,0-3,3v9.84a3,3,0,0,0,3,3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3H69.7a3,3,0,0,0,3-3V127.33a3,3,0,0,1,3-3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3h9.84a3,3,0,0,0,3-3V127.33a3,3,0,0,1,3-3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3h9.84a3,3,0,0,0,3-3V127.33a3,3,0,0,1,3-3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3h9.84a3,3,0,0,0,3-3V103.52a3,3,0,0,1,3-3h1.91a3,3,0,0,0,3-3V87.64a3,3,0,0,0-3-3H115.42A3,3,0,0,1,112.41,81.61Z"/></g></g></svg>

src/assets/svg/16连接.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3,.cls-6{fill:none;}.cls-2,.cls-3{stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#facd51;}.cls-5{fill:#fce5a7;}.cls-6{stroke:#facd51;stroke-linecap:round;stroke-linejoin:round;stroke-width:10.96px;}</style></defs><title>16连接</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><circle class="cls-4" cx="102.42" cy="61.04" r="15.33"/><circle class="cls-5" cx="60.26" cy="130.01" r="15.33"/><circle class="cls-5" cx="140.74" cy="130.01" r="15.33"/><path class="cls-6" d="M51.91,103.62A48.44,48.44,0,0,1,74.41,65.84"/><path class="cls-6" d="M126,147.92a48.51,48.51,0,0,1-50.56.53"/><path class="cls-6" d="M130,68.61a48.38,48.38,0,0,1,18.61,35.83"/></g></g></svg>

src/assets/svg/17工作包.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#fce5a7;}.cls-5{fill:#facd51;}</style></defs><title>17工作包</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M156.07,73.41c0-10.19-4.54-17.36-13.43-17.36H59.75c-8.88,0-14.82,7.18-14.82,17.36v16H156.07Z"/><path class="cls-5" d="M44.94,89.39v41.52c0,10.19,5,14,13.89,14h82.88c8.88,0,14.35-3.86,14.35-14V89.39Z"/></g></g></svg>

src/assets/svg/18存储.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>18存储</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M119.72,76.67a3.48,3.48,0,0,0,3.47-3.47v-7a3.47,3.47,0,1,0-6.95,0v7A3.48,3.48,0,0,0,119.72,76.67Z"/><path class="cls-4" d="M140.61,44.94H60.39A15.47,15.47,0,0,0,44.94,60.39v80.23a15.47,15.47,0,0,0,15.45,15.45h80.23a15.47,15.47,0,0,0,15.45-15.45V60.39A15.47,15.47,0,0,0,140.61,44.94Zm-11.9,7.75V80a3.32,3.32,0,0,1-3.31,3.31H75.6A3.32,3.32,0,0,1,72.29,80V52.69Zm19.6,87.92a7.71,7.71,0,0,1-7.7,7.7H60.39a7.71,7.71,0,0,1-7.7-7.7V60.39a7.71,7.71,0,0,1,7.7-7.7h4.15V80A11.08,11.08,0,0,0,75.6,91H125.4A11.08,11.08,0,0,0,136.47,80V52.69h4.15a7.71,7.71,0,0,1,7.7,7.7Z"/></g></g></svg>

src/assets/svg/19导出.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>19导出</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M138.79,69.74c-.11-7-4.94-10.87-12.88-11-2.6,0-5.21,0-8,0,0-1.41.06-2.27,0-3.14-.54-6.67-5-10.5-12.45-10.53q-24.13-.1-48.26,0C49.71,45.1,45,49.17,45,55.72q-.12,35.46,0,70.92c0,6.28,4.67,10.47,11.68,11,1.22.08,2.44.15,4.13.25,0,2.9-.13,5.62,0,8.32a10.09,10.09,0,0,0,9.85,9.56c8.58.25,17.16.3,25.75.25h13.35a3.62,3.62,0,0,0,3.8-3.38v-.19a3.62,3.62,0,0,0-3.8-3.38H96.48q-10.74,0-21.47,0c-5.66,0-6.53-.81-6.53-5.87q0-35.83,0-71.66c0-5.15.74-5.82,6.51-5.83q24.54,0,49.09,0c6.25,0,6.89.58,6.9,6.26q0,17.92,0,35.83c0,2.38.92,4.43,3.88,4.4s4-1.94,4-4.37C138.85,95.12,139,82.43,138.79,69.74Zm-29-11h-4.37c-10.49,0-21,0-31.48,0q-13.11.08-13.13,11.8c0,18.54,0,37.08,0,55.62v3.94c-6.23,1.07-8-.14-8-5.17q0-33.78,0-67.57c0-4.58,1-5.48,6.09-5.48q22.46,0,44.91,0C109.37,51.88,110.4,52.95,109.75,58.72Z"/><path class="cls-4" d="M118.33,100.39c-6.14.05-12.28,0-18.41,0s-12.56,0-18.83,0c-2.65,0-4.52.91-4.71,3.23-.2,2.59,1.82,3.82,4.54,3.83q18.83.08,37.66,0c2.66,0,4.68-1.15,4.45-3.87C122.82,101.1,120.91,100.37,118.33,100.39Z"/><path class="cls-4" d="M91.4,121c-4,0-8,0-12,0-1.69,0-2.89.91-3,3.23-.13,2.59,1.16,3.82,2.9,3.83,8,.06,16,.07,24,0,1.7,0,3-1.15,2.84-3.87-.14-2.47-1.35-3.21-3-3.18C99.24,121.05,95.32,121,91.4,121Z"/><path class="cls-4" d="M81.36,86.57q18.41,0,36.83,0c2.59,0,4.89-.81,4.82-3.55s-2.24-3.41-4.93-3.4c-6.14,0-12.28,0-18.41,0s-12,0-18,0c-2.86,0-5.25.66-5.27,3.49C76.39,85.72,78.73,86.57,81.36,86.57Z"/><path class="cls-4" d="M137.31,128.39v3.7c-5.05,0-9.56,0-14.31,0-2.78,0-5.5.37-5.53,3.82s2.74,3.82,5.5,3.8c5.23,0,10.46,0,14.3,0l0,.15v4.39c0,2.64,2.44,4.3,4.39,3l13.4-9.09a2.19,2.19,0,0,0,0-3.62l-13.4-9.09C139.75,124.09,137.31,125.74,137.31,128.39Z"/></g></g></svg>

src/assets/svg/20执行.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>20执行</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M49.12,97.56q0-19.34,0-38.69C49.13,50.62,54.65,45,62.89,45Q91.45,44.9,120,45c8.07,0,13.73,5.57,13.83,13.64.12,9.07,0,18.13,0,27.2,0,3.1-1.42,4.78-3.83,4.76s-3.72-1.67-3.73-4.86c0-8.46,0-16.93,0-25.39,0-6.07-1.72-7.8-7.69-7.8H64.19c-5.75,0-7.6,1.85-7.6,7.61q0,37.78,0,75.56c0,5.81,1.74,7.53,7.57,7.53H83.5c.71,0,1.41,0,2.11,0,2.39.15,3.8,1.47,3.8,3.83a3.37,3.37,0,0,1-3.65,3.61c-8.56,0-17.14.28-25.68-.15-6.21-.31-10.88-6.09-10.92-12.77-.09-13.4,0-26.8,0-40.2Z"/><path class="cls-4" d="M151.88,129.77a26.42,26.42,0,1,1-26.34-26.61A26.44,26.44,0,0,1,151.88,129.77Zm-26.56,18.74a18.89,18.89,0,1,0,.13-37.78,18.89,18.89,0,0,0-.13,37.78Z"/><path class="cls-4" d="M91.26,63.9c6.84,0,13.68,0,20.53,0,3.23,0,4.78,1.24,4.75,3.7s-1.63,3.73-4.8,3.74q-20.22,0-40.45,0c-3.18,0-5.11-1.6-5-3.95s1.82-3.48,5-3.49Q81.3,63.89,91.26,63.9Z"/><path class="cls-4" d="M85.51,92.32c-4.84,0-9.67,0-14.51,0-2.57,0-4.35-1-4.66-3.68-.27-2.25,1.74-4,4.67-4q14.66-.07,29.32,0c2.47,0,4.41.86,4.6,3.69.16,2.46-1.52,3.91-4.61,3.94C95.38,92.36,90.44,92.32,85.51,92.32Z"/><path class="cls-4" d="M75.31,113.37c-1.91-.09-3.83-.09-5.72-.29a3.4,3.4,0,0,1-3.24-3.7A3.46,3.46,0,0,1,70,105.75c3.62-.08,7.24-.07,10.86,0a3.4,3.4,0,0,1,3.64,3.6,3.32,3.32,0,0,1-3.17,3.72C79.34,113.28,77.32,113.28,75.31,113.37Z"/><path class="cls-4" d="M121.35,129.65c0-1.91-.09-3.82,0-5.72.16-2.67,1.88-3.58,4.06-2.08,2.56,1.76,5,3.68,7.47,5.57,1.85,1.42,1.94,3,.05,4.44-2.46,1.9-4.94,3.79-7.51,5.54-2.22,1.52-3.84.65-4.1-2,0-.2,0-.4,0-.6q0-2.56,0-5.12Z"/></g></g></svg>

src/assets/svg/21封装包.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>21封装包</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M140.61,65H127.67c-1.18-11.15-10.37-19.86-21.51-19.86H95.7c-11.13,0-20.32,8.71-21.51,19.86H60.39A15.71,15.71,0,0,0,44.94,80.89V140a15.71,15.71,0,0,0,15.45,15.92h80.23A15.71,15.71,0,0,0,156.07,140V80.89A15.71,15.71,0,0,0,140.61,65ZM95.7,53.1h10.46A14,14,0,0,1,119.81,65H82A14,14,0,0,1,95.7,53.1ZM72.29,73h56.43V90.4a3.37,3.37,0,0,1-3.31,3.41H75.6a3.37,3.37,0,0,1-3.31-3.41Zm76,67a7.83,7.83,0,0,1-7.7,7.93H60.39a7.83,7.83,0,0,1-7.7-7.93V80.89A7.83,7.83,0,0,1,60.39,73h4.15V90.4A11.25,11.25,0,0,0,75.6,101.8H125.4a11.25,11.25,0,0,0,11.06-11.4V73h4.15a7.83,7.83,0,0,1,7.7,7.93Z"/></g></g></svg>

src/assets/svg/2结束.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#ffdce0;}.cls-5{fill:#ff4f63;}</style></defs><title>2.结束</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="0.87" ry="0.87"/><ellipse class="cls-5" cx="100.5" cy="100.5" rx="23.15" ry="23.4"/></g></g></svg>

src/assets/svg/3横向分割.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#4f80f9;}.cls-5{fill:#95b3fb;}</style></defs><title>3.横向分割</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M44.93,54.2h65c.09,1.11.23,2,.23,2.91,0,28.84,0,57.68.06,86.53,0,2.2-.57,3-3.42,3-12.91,0-25.82.13-38.74.19-7.6,0-15.2,0-23.09,0Zm25.79,5.24v81.78H83.9V59.44ZM51,59.45v81.78H64V59.45Zm39.4,81.76h13.19V59.55H90.38Z"/><path class="cls-5" d="M117.34,72.61h29l.46-.67-9.16-9.34,4.65-3.87c4,4,8.8,8,12.58,12.8,1.38,1.75,1.63,6.27.34,7.91-3.89,4.94-8.79,9.08-13.33,13.57l-5-4.69,10.2-8.5-.63-1H117.34Z"/><path class="cls-5" d="M146.35,128.81h-29v-6h29l.5-.78-9.16-9.4,4.22-4.43c4.56,4.56,9.36,8.66,13.16,13.54,1.34,1.72,1.37,6.22,0,7.93-3.81,4.88-8.63,9-13.28,13.61L138,139.06l-.84-.78,10.22-8Z"/><rect class="cls-4" x="47.82" y="58.72" width="60.6" height="82.49"/></g></g></svg>

src/assets/svg/4纵向分割.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#4f80f9;}.cls-5{fill:#95b3fb;}</style></defs><title>4.纵向分割</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M146.8,44.94v65c-1.11.09-2,.23-2.91.23-28.84,0-57.68,0-86.53.06-2.2,0-3-.57-3-3.42,0-12.91-.13-25.82-.19-38.74,0-7.6,0-15.2,0-23.09Zm-5.24,25.79H59.78V83.91h81.78Zm0-19.74H59.77V64.05h81.78ZM59.79,90.38v13.19h81.66V90.38Z"/><path class="cls-5" d="M128.39,117.34v29l.67.46,9.34-9.16,3.87,4.65c-4,4-8,8.8-12.8,12.58-1.75,1.38-6.27,1.63-7.91.34-4.94-3.89-9.08-8.79-13.57-13.33l4.69-5,8.5,10.2,1-.63V117.34Z"/><path class="cls-5" d="M72.19,146.35v-29h6v29l.78.5,9.4-9.16,4.43,4.22c-4.56,4.56-8.66,9.36-13.54,13.16-1.72,1.34-6.22,1.37-7.93,0-4.88-3.81-9-8.63-13.61-13.28L61.94,138l.78-.84,8,10.22Z"/><rect class="cls-4" x="70.53" y="33.32" width="60.6" height="86.49" transform="translate(177.4 -24.26) rotate(90)"/></g></g></svg>

src/assets/svg/5文件数据.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>5文件数据</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><polygon class="cls-4" points="109.15 44.94 50.33 44.94 50.33 117.63 88.76 117.63 88.76 82.77 109.16 82.77 109.16 44.94 109.15 44.94"/><polygon class="cls-5" points="150.66 88.1 115.07 88.1 94.69 88.1 94.67 122.95 94.67 156.06 150.67 156.06 150.67 88.1 150.66 88.1"/></g></g></svg>

src/assets/svg/6数据校验.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#a375e9;}.cls-5{fill:#fff;}</style></defs><title>6数据校验</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M150.42,44.93H50.77a5.24,5.24,0,0,0-5.27,5.32V150.74a5.24,5.24,0,0,0,5.27,5.32h99.44a5.24,5.24,0,0,0,5.27-5.32V50.26A5,5,0,0,0,150.42,44.93Z"/><path class="cls-5" d="M136.29,77.79a5.36,5.36,0,0,0-7.54.44L99,111.73l-16.9-15a5.36,5.36,0,0,0-7.54.44h0a5.36,5.36,0,0,0,.44,7.54l20.83,18.53a5.36,5.36,0,0,0,6.75.28,5.29,5.29,0,0,0,1.05-.9l33.13-37.25A5.36,5.36,0,0,0,136.29,77.79Z"/></g></g></svg>

src/assets/svg/7单键查询.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#a375e9;}.cls-5{fill:#c5a9f1;}</style></defs><title>7单键查询</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M105.32,125.61,85.67,145.47,56,115.49,75.66,95.63a5.34,5.34,0,0,0,0-7.49,5.21,5.21,0,0,0-7.42,0L48.59,108a10.68,10.68,0,0,0,0,15l29.66,30a10.41,10.41,0,0,0,14.83,0l19.65-19.86a5.34,5.34,0,0,0,0-7.49A5.21,5.21,0,0,0,105.32,125.61ZM152.41,78,122.75,48a10.41,10.41,0,0,0-14.83,0L88.26,67.9A5.34,5.34,0,0,0,86.91,73a5.27,5.27,0,0,0,3.71,3.75,5.21,5.21,0,0,0,5.07-1.37l19.65-19.86,29.66,30-19.65,19.86a5.34,5.34,0,0,0,0,7.49,5.21,5.21,0,0,0,7.42,0L152.41,93a10.68,10.68,0,0,0,0-15Z"/><path class="cls-5" d="M111.62,89.26a5.2,5.2,0,0,0-7.42,0l-14.83,15a5.34,5.34,0,0,0,0,7.49,5.21,5.21,0,0,0,7.42,0l14.83-15A5.34,5.34,0,0,0,111.62,89.26Z"/></g></g></svg>

src/assets/svg/8个人服务.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>8个人服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><circle class="cls-4" cx="100.5" cy="78.54" r="28.71"/><path class="cls-5" d="M100.5,106.1c-27.34,0-50.16,13.23-55.56,45.06H156.07C150.66,119.33,127.84,106.1,100.5,106.1Z"/></g></g></svg>

src/assets/svg/9外部服务.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>9外部服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M100.5,61C78.76,45.72,58.13,40.34,49.23,49.24S45.72,78.77,61,100.5A168.25,168.25,0,0,1,100.5,61Z"/><path class="cls-4" d="M121.9,121.9A163.41,163.41,0,0,1,100.5,140c21.74,15.28,42.37,20.66,51.27,11.76s3.51-29.53-11.77-51.26A163.45,163.45,0,0,1,121.9,121.9Z"/><path class="cls-5" d="M140,100.5c15.28-21.73,20.66-42.37,11.77-51.27S122.24,45.72,100.5,61a163.41,163.41,0,0,1,21.4,18.1A163.45,163.45,0,0,1,140,100.5Z"/><path class="cls-5" d="M61,100.5c-15.28,21.73-20.66,42.37-11.77,51.26S78.76,155.28,100.5,140a163.49,163.49,0,0,1-21.4-18.1A163.45,163.45,0,0,1,61,100.5Z"/><path class="cls-5" d="M140,100.5a163.45,163.45,0,0,0-18.1-21.4A163.41,163.41,0,0,0,100.5,61,168.25,168.25,0,0,0,61,100.5a163.45,163.45,0,0,0,18.1,21.4A163.49,163.49,0,0,0,100.5,140a163.41,163.41,0,0,0,21.4-18.1A163.45,163.45,0,0,0,140,100.5Zm-40.28,8a8,8,0,1,1,8-8A8,8,0,0,1,99.72,108.46Z"/></g></g></svg>

src/components/ImageUpload/index.vue

@@ -1,38 +1,38 @@
 <template>
   <div class="component-upload-image">
     <el-upload
-      ref="imageUpload"
+      multiple
       :action="uploadImgUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
       :before-upload="handleBeforeUpload"
-      :class="{hide: this.fileList.length >= this.limit}"
-      :file-list="fileList"
-      :headers="headers"
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
-      :on-preview="handlePictureCardPreview"
+      ref="imageUpload"
       :on-remove="handleDelete"
-      :on-success="handleUploadSuccess"
       :show-file-list="true"
-      list-type="picture-card"
-      multiple
+      :headers="headers"
+      :file-list="fileList"
+      :on-preview="handlePictureCardPreview"
+      :class="{hide: this.fileList.length >= this.limit}"
     >
       <i class="el-icon-plus"></i>
     </el-upload>
 
     <!-- 上传提示 -->
-    <div v-if="showTip" slot="tip" class="el-upload__tip">
+    <div class="el-upload__tip" slot="tip" v-if="showTip">
       请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
       的文件
     </div>
 
     <el-dialog
       :visible.sync="dialogVisible"
-      append-to-body
       title="预览"
       width="800"
+      append-to-body
     >
       <img
         :src="dialogImageUrl"
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
 
 export default {
   props: {
@@ -149,13 +149,13 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res, file) {
-      if (res.data.code === 200) {
+      if (res.code === 200) {
         this.uploadList.push({name: res.data.url, url: res.data.url});
         this.uploadedSuccessfully();
       } else {
         this.number--;
         this.$modal.closeLoading();
-        this.$modal.msgError(res.data.msg);
+        this.$modal.msgError(res.msg);
         this.$refs.imageUpload.handleRemove(file);
         this.uploadedSuccessfully();
       }
@@ -202,7 +202,7 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style scoped lang="scss">  //123
 // .el-upload--picture-card 控制加号部分
 ::v-deep.hide .el-upload--picture-card {
   display: none;

src/components/JavaIDE.vue/java.vue

@@ -0,0 +1,57 @@
+<template>
+  <codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code" v-show="aaa">
+  </codemirror>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
+require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
+
+
+export default {
+  name: 'ExecuteAction',
+  data() {
+    return {
+      curCode: '测试',
+      cmOptions: {
+        // autorefresh: true,
+        // tabSize: 4,
+        // mode: 'text/x-properties',
+        // theme: 'ayu-mirage',
+        // line: true,
+        // viewportMargin: Infinity, //处理高度自适应时搭配使用
+        // highlightDifferences: true,
+        // autofocus: false,
+        // indentUnit: 2,
+        // smartIndent: true,
+        // readOnly: true, // 只读
+        // showCursorWhenSelecting: true,
+        // firstLineNumber: 1
+        lineNumbers: true, // 显示行号
+        mode: 'text/x-yaml', // 语法model
+        gutters: ['CodeMirror-lint-markers'], // 语法检查器
+        theme: "ambiance",
+        lint: true, // 开启语法检查
+      }
+
+    }
+
+  },
+  components: {
+    codemirror
+  },
+
+
+}
+
+</script>
+
+
+<style scoped>
+.information-box>>>.CodeMirror {
+  font-family: monospace;
+  height: 71vh;
+  direction: ltr;
+}
+</style>

src/components/ef/data_A.js

@@ -0,0 +1,40 @@
+let dataA = {
+    name: '流程A',
+    nodeList: [
+        {
+            id: 'nodeA',
+            name: '流程A-节点A',
+            type: 'task',
+            left: '26px',
+            top: '161px',
+            ico: 'el-icon-user-solid'
+        },
+        {
+            id: 'nodeB',
+            name: '流程A-节点B',
+            type: 'task',
+            left: '340px',
+            top: '161px',
+            ico: 'el-icon-goods'
+        },
+        {
+            id: 'nodeC',
+            name: '流程A-节点C',
+            type: 'task',
+            left: '739px',
+            top: '161px',
+            ico: 'el-icon-present'
+        }
+    ],
+    lineList: [{
+        from: 'nodeA',
+        to: 'nodeB'
+    }, {
+        from: 'nodeB',
+        to: 'nodeC'
+    }]
+}
+
+export function getDataA () {
+    return dataA
+}

src/components/ef/data_B.js

@@ -0,0 +1,61 @@
+let dataB = {
+    name: '流程B',
+    nodeList: [
+        {
+            id: 'nodeA',
+            name: '节点A-不可拖拽',
+            type: 'task',
+            left: '18px',
+            top: '223px',
+            ico: 'el-icon-user-solid',
+            state: 'success',
+            viewOnly: true
+        },
+        {
+            id: 'nodeB',
+            type: 'task',
+            name: '流程B-节点B',
+            left: '351px',
+            top: '96px',
+            ico: 'el-icon-goods',
+            state: 'error'
+        },
+        {
+            id: 'nodeC',
+            name: '流程B-节点C',
+            type: 'task',
+            left: '354px',
+            top: '351px',
+            ico: 'el-icon-present',
+            state: 'warning'
+        }, {
+            id: 'nodeD',
+            name: '流程B-节点D',
+            type: 'task',
+            left: '723px',
+            top: '215px',
+            ico: 'el-icon-present',
+            state: 'running'
+        }
+    ],
+    lineList: [{
+        from: 'nodeA',
+        to: 'nodeB',
+        label: '条件A'
+    }, {
+        from: 'nodeA',
+        to: 'nodeC',
+        label: '条件B'
+    }, {
+        from: 'nodeB',
+        to: 'nodeD'
+    }, {
+        from: 'nodeC',
+        to: 'nodeD'
+    }
+    ]
+}
+
+export function getDataB () {
+    return dataB
+}

src/components/ef/data_C.js

@@ -0,0 +1,42 @@
+let dataC = {
+    name: '流程C',
+    nodeList: [
+        {
+            id: 'nodeA',
+            name: '流程C-节点A',
+            type: 'task',
+            left: '400px',
+            top: '15px',
+            ico: 'el-icon-user-solid'
+        },
+        {
+            id: 'nodeB',
+            name: '流程C-节点B',
+            type: 'task',
+            left: '400px',
+            top: '200px',
+            ico: 'el-icon-goods'
+        },
+        {
+            id: 'nodeC',
+            name: '流程C-节点C',
+            type: 'task',
+            left: '400px',
+            top: '378px',
+            ico: 'el-icon-present'
+        }
+    ],
+    lineList: [
+        {
+            from: 'nodeA',
+            to: 'nodeB'
+        }, {
+            from: 'nodeB',
+            to: 'nodeC'
+        }
+    ]
+}
+
+export function getDataC () {
+    return dataC
+}

src/components/ef/data_D.js

@@ -0,0 +1,71 @@
+var dataD = {
+    name: '流程D',
+    nodeList: [
+        {
+            id: 'nodeA',
+            name: '流程D-节点A',
+            type: 'task',
+            left: '18px',
+            top: '223px',
+            ico: 'el-icon-user-solid',
+            state: 'success'
+        },
+        {
+            id: 'nodeB',
+            type: 'task',
+            name: '流程D-节点B',
+            left: '351px',
+            top: '96px',
+            ico: 'el-icon-goods',
+            state: 'error'
+        },
+        {
+            id: 'nodeC',
+            name: '流程D-节点C',
+            type: 'task',
+            left: '354px',
+            top: '351px',
+            ico: 'el-icon-present',
+            state: 'warning'
+        }, {
+            id: 'nodeD',
+            name: '流程D-节点D',
+            type: 'task',
+            left: '723px',
+            top: '215px',
+            ico: 'el-icon-present',
+            state: 'running'
+        }
+    ],
+    lineList: [{
+        from: 'nodeA',
+        to: 'nodeB',
+        label: '直线,自定义线样式,固定锚点',
+        connector: 'Straight',
+        anchors: ['Top', 'Bottom'],
+        paintStyle: {strokeWidth: 2, stroke: '#1879FF'}
+    }, {
+        from: 'nodeA',
+        to: 'nodeC',
+        label: '贝塞尔曲线,固定锚点',
+        connector: 'Bezier',
+        anchors: ['Bottom', 'Left']
+    }, {
+        from: 'nodeB',
+        to: 'nodeD',
+        label: '默认连线样式,动态锚点'
+    }, {
+        from: 'nodeC',
+        to: 'nodeD',
+        label: '默认连线样式,动态锚点'
+    }, {
+        from: 'nodeC',
+        to: 'nodeC',
+        label: '自连接'
+    }
+    ]
+}
+
+export function getDataD() {
+    return dataD
+}

src/components/ef/data_E.js

@@ -0,0 +1,54 @@
+var dataE = {
+    name: '流程E，力导图',
+    nodeList: [
+        {
+            id: 'nodeA',
+            name: '流程D-节点A',
+            type: 'task',
+            ico: 'el-icon-user-solid',
+            state: 'success'
+        },
+        {
+            id: 'nodeB',
+            type: 'task',
+            name: '流程D-节点B',
+            ico: 'el-icon-goods',
+            state: 'error'
+        },
+        {
+            id: 'nodeC',
+            name: '流程D-节点C',
+            type: 'task',
+            ico: 'el-icon-present',
+            state: 'warning'
+        }, {
+            id: 'nodeD',
+            name: '流程D-节点D',
+            type: 'task',
+            ico: 'el-icon-present',
+            state: 'running'
+        }
+    ],
+    lineList: [{
+        from: 'nodeA',
+        to: 'nodeB'
+    }, {
+        from: 'nodeA',
+        to: 'nodeC',
+        label: 'hello'
+    }, {
+        from: 'nodeB',
+        to: 'nodeD'
+    }, {
+        from: 'nodeC',
+        to: 'nodeD'
+    }, {
+        from: 'nodeC',
+        to: 'nodeC'
+    }
+    ]
+}
+
+export function getDataE() {
+    return dataE
+}

src/components/ef/force-directed.js

@@ -0,0 +1,182 @@
+/**
+ * 感谢 https://github.com/chaangliu/ForceDirectedLayout/blob/master/javascript/force-directed.js
+ * A force directed graph layout implementation by liuchang on 2018/05/10.
+ */
+const CANVAS_WIDTH = 1000
+const CANVAS_HEIGHT = 1000
+let k
+let mNodeList = []
+let mEdgeList = []
+let mDxMap = {}
+let mDyMap = {}
+let mNodeMap = {}
+
+export function ForceDirected(data = {}) {
+    // generate nodes and edges
+    // for (let i = 0; i < 20; i++) {
+    //     mNodeList.push(new Node(i))
+    // }
+    k = 0
+    mNodeList = []
+    mEdgeList = []
+    mDxMap = {}
+    mDyMap = {}
+    mNodeMap = {}
+
+    let nodeList = data.nodeList
+    for (let i = 0; i < nodeList.length; i++) {
+        let node = nodeList[i]
+        mNodeList.push(node)
+    }
+
+    // for (let i = 0; i < 20; i++) {
+    //     let edgeCount = Math.random() * 8 + 1
+    //     for (let j = 0; j < edgeCount; j++) {
+    //         let targetId = Math.floor(Math.random() * 20)
+    //         let edge = new Edge(i, targetId)
+    //         mEdgeList.push(edge)
+    //     }
+    // }
+    // line 转 edge
+    let lineList = data.lineList
+    for (let i = 0; i < lineList.length; i++) {
+        let line = lineList[i]
+        let edge = new Edge(line.from, line.to)
+        mEdgeList.push(edge)
+    }
+
+    if (mNodeList && mEdgeList) {
+        k = Math.sqrt(CANVAS_WIDTH * CANVAS_HEIGHT / mNodeList.length)
+    }
+    for (let i = 0; i < mNodeList.length; i++) {
+        let node = mNodeList[i]
+        if (node) {
+            mNodeMap[node.id] = node
+        }
+    }
+
+    // 随机生成坐标. Generate coordinates randomly.
+    let initialX, initialY, initialSize = 40.0
+    for (let i in mNodeList) {
+        initialX = CANVAS_WIDTH * 0.5
+        initialY = CANVAS_HEIGHT * 0.5
+        mNodeList[i].x = initialX + initialSize * (Math.random() - 0.5)
+        mNodeList[i].y = initialY + initialSize * (Math.random() - 0.5)
+    }
+
+    // 迭代200次. Iterate 200 times.
+    for (let i = 0; i < 200; i++) {
+        calculateRepulsive()
+        calculateTraction()
+        updateCoordinates()
+    }
+    // console.log(JSON.stringify(new Result(mNodeList, mEdgeList)))
+    // 坐标添加px
+    for (let i = 0; i < mNodeList.length; i++) {
+        let node = mNodeList[i]
+        node.left = node.x + 'px'
+        node.top = node.y + 'px'
+        node.x = undefined
+        node.y = undefined
+    }
+
+    data.nodeList = mNodeList
+
+    // console.log(data)
+    return data
+}
+
+function Node(id = null) {
+    this.id = id
+    this.x = 22
+    this.y = null
+}
+
+function Edge(source = null, target = null) {
+    this.source = source
+    this.target = target
+}
+
+/**
+ * 计算两个Node的斥力产生的单位位移。
+ * Calculate the displacement generated by the repulsive force between two nodes.*
+ */
+function calculateRepulsive() {
+    let ejectFactor = 6
+    let distX, distY, dist
+    for (let i = 0; i < mNodeList.length; i++) {
+        mDxMap[mNodeList[i].id] = 0.0
+        mDyMap[mNodeList[i].id] = 0.0
+        for (let j = 0; j < mNodeList.length; j++) {
+            if (i !== j) {
+                distX = mNodeList[i].x - mNodeList[j].x
+                distY = mNodeList[i].y - mNodeList[j].y
+                dist = Math.sqrt(distX * distX + distY * distY)
+            }
+            if (dist < 30) {
+                ejectFactor = 5
+            }
+            if (dist > 0 && dist < 250) {
+                let id = mNodeList[i].id
+                mDxMap[id] = mDxMap[id] + distX / dist * k * k / dist * ejectFactor
+                mDyMap[id] = mDyMap[id] + distY / dist * k * k / dist * ejectFactor
+            }
+        }
+    }
+}
+
+/**
+ * 计算Edge的引力对两端Node产生的引力。
+ * Calculate the traction force generated by the edge acted on the two nodes of its two ends.
+ */
+function calculateTraction() {
+    let condenseFactor = 3
+    let startNode, endNode
+    for (let e = 0; e < mEdgeList.length; e++) {
+        let eStartID = mEdgeList[e].source
+        let eEndID = mEdgeList[e].target
+        startNode = mNodeMap[eStartID]
+        endNode = mNodeMap[eEndID]
+        if (!startNode) {
+            console.log('Cannot find start node id: ' + eStartID + ', please check it out.')
+            return
+        }
+        if (!endNode) {
+            console.log('Cannot find end node id: ' + eEndID + ', please check it out.')
+            return
+        }
+        let distX, distY, dist
+        distX = startNode.x - endNode.x
+        distY = startNode.y - endNode.y
+        dist = Math.sqrt(distX * distX + distY * distY)
+        mDxMap[eStartID] = mDxMap[eStartID] - distX * dist / k * condenseFactor
+        mDyMap[eStartID] = mDyMap[eStartID] - distY * dist / k * condenseFactor
+        mDxMap[eEndID] = mDxMap[eEndID] + distX * dist / k * condenseFactor
+        mDyMap[eEndID] = mDyMap[eEndID] + distY * dist / k * condenseFactor
+    }
+}
+
+/**
+ * 更新坐标。
+ * update the coordinates.
+ */
+function updateCoordinates() {
+    let maxt = 4, maxty = 3 // Additional coefficients.
+    for (let v = 0; v < mNodeList.length; v++) {
+        let node = mNodeList[v]
+        let dx = Math.floor(mDxMap[node.id])
+        let dy = Math.floor(mDyMap[node.id])
+
+        if (dx < -maxt) dx = -maxt
+        if (dx > maxt) dx = maxt
+        if (dy < -maxty) dy = -maxty
+        if (dy > maxty) dy = maxty
+        node.x = node.x + dx >= CANVAS_WIDTH || node.x + dx <= 0 ? node.x - dx : node.x + dx
+        node.y = node.y + dy >= CANVAS_HEIGHT || node.y + dy <= 0 ? node.y - dy : node.y + dy
+    }
+}
+
+function Result(nodes = null, links = null) {
+    this.nodes = nodes
+    this.links = links
+}

src/components/ef/help.vue

@@ -0,0 +1,61 @@
+<template>
+    <el-dialog
+            title="帮助"
+            :visible.sync="dialogVisible"
+            width="70%"
+            customClass="flowHelp"
+    >
+        <el-tabs tab-position="left">
+            <el-tab-pane label="如何新增">
+                <el-divider content-position="left">如何新增</el-divider>
+                <div>按住鼠标拖拽左侧组件到中间画布中松开鼠标即可</div>
+            </el-tab-pane>
+            <el-tab-pane label="如何删除">
+                <el-divider content-position="left">页面删除</el-divider>
+                <div>
+                    鼠标点中需要删除的节点，点击左上角的删除图标
+                </div>
+                <el-divider content-position="left">通过代码删除</el-divider>
+                <pre>this.deleteNode(nodeId)</pre>
+            </el-tab-pane>
+            <el-tab-pane label="如何移动">
+                <el-divider content-position="left">如何移动</el-divider>
+                <div>鼠标移动到节点中，当鼠标变为可拖拽的图标时按下鼠标移动到新的位置松开鼠标</div>
+            </el-tab-pane>
+            <el-tab-pane label="如何连线">
+                <el-divider content-position="left">如何连线</el-divider>
+                <div>鼠标移动到节点中左侧的图标上，当鼠标变为+时按下鼠标移动到另一个节点中松开鼠标</div>
+            </el-tab-pane>
+            <el-tab-pane label="如何添加条件">
+                <el-divider content-position="left">如何添加条件</el-divider>
+                <div>点击画布中的连线，在页面右侧会出现一个表单，输入新的条件，点击【保存】</div>
+            </el-tab-pane>
+            <el-tab-pane label="如何进行后端交互存储">
+                <el-divider content-position="left">如何进行后端交互存储</el-divider>
+                <div>参考: https://gitee.com/xiaoka2017/easy-flow-sdk</div>
+            </el-tab-pane>
+        </el-tabs>
+    </el-dialog>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                dialogVisible: false
+            }
+        },
+        components: {},
+        methods: {
+            init() {
+                this.dialogVisible = true
+            }
+        }
+    }
+</script>
+
+<style>
+    .flowHelp {
+        height: 80%;
+    }
+</style>

src/components/ef/index.css

@@ -0,0 +1,225 @@
+/*画布容器*/
+#efContainer {
+    position: relative;
+    overflow: scroll;
+    flex: 1;
+}
+
+/*顶部工具栏*/
+.ef-tooltar {
+    padding-left: 10px;
+    box-sizing: border-box;
+    height: 42px;
+    line-height: 42px;
+    z-index: 3;
+    border-bottom: 1px solid #DADCE0;
+}
+
+.jtk-overlay {
+    cursor: pointer;
+    color: #4A4A4A;
+}
+
+
+/*节点菜单*/
+.ef-node-pmenu {
+    cursor: pointer;
+    height: 32px;
+    line-height: 32px;
+    width: 225px;
+    display: block;
+    font-weight: bold;
+    color: #4A4A4A;
+    padding-left: 5px;
+}
+
+.ef-node-pmenu:hover {
+    background-color: #E0E0E0;
+}
+
+.ef-node-menu-li {
+    color: #565758;
+    width: 150px;
+    border: 1px dashed #E0E3E7;
+    margin: 5px 0 5px 0;
+    padding: 5px;
+    border-radius: 5px;
+    padding-left: 8px;
+}
+
+.ef-node-menu-li:hover {
+    /* 设置移动样式*/
+    cursor: move;
+    background-color: #F0F7FF;
+    border: 1px dashed #1879FF;
+    border-left: 4px solid #1879FF;
+    padding-left: 5px;
+}
+
+.ef-node-menu-ul {
+    list-style: none;
+    padding-left: 20px
+}
+
+/*节点的最外层容器*/
+.ef-node-container {
+    position: absolute;
+    display: flex;
+    width: 170px;
+    height: 32px;
+    border: 1px solid #E0E3E7;
+    border-radius: 5px;
+    background-color: #fff;
+}
+
+.ef-node-container:hover {
+    /* 设置移动样式*/
+    cursor: move;
+    background-color: #F0F7FF;
+    /*box-shadow: #1879FF 0px 0px 12px 0px;*/
+    background-color: #F0F7FF;
+    border: 1px dashed #1879FF;
+}
+
+/*节点激活样式*/
+.ef-node-active {
+    background-color: #F0F7FF;
+    /*box-shadow: #1879FF 0px 0px 12px 0px;*/
+    background-color: #F0F7FF;
+    border: 1px solid #1879FF;
+}
+
+/*节点左侧的竖线*/
+.ef-node-left {
+    width: 4px;
+    background-color: #1879FF;
+    border-radius: 4px 0 0 4px;
+}
+
+/*节点左侧的图标*/
+.ef-node-left-ico {
+    line-height: 32px;
+    margin-left: 8px;
+}
+
+.ef-node-left-ico:hover {
+    /* 设置拖拽的样式 */
+    cursor: crosshair;
+}
+
+/*节点显示的文字*/
+.ef-node-text {
+    color: #565758;
+    font-size: 12px;
+    line-height: 32px;
+    margin-left: 8px;
+    width: 100px;
+    /* 设置超出宽度文本显示方式*/
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
+/*节点右侧的图标*/
+.ef-node-right-ico {
+    line-height: 32px;
+    position: absolute;
+    right: 5px;
+    color: #84CF65;
+    cursor: default;
+}
+
+/*节点的几种状态样式*/
+.el-node-state-success {
+    line-height: 32px;
+    position: absolute;
+    right: 5px;
+    color: #84CF65;
+    cursor: default;
+}
+
+.el-node-state-error {
+    line-height: 32px;
+    position: absolute;
+    right: 5px;
+    color: #F56C6C;
+    cursor: default;
+}
+
+.el-node-state-warning {
+    line-height: 32px;
+    position: absolute;
+    right: 5px;
+    color: #E6A23C;
+    cursor: default;
+}
+
+.el-node-state-running {
+    line-height: 32px;
+    position: absolute;
+    right: 5px;
+    color: #84CF65;
+    cursor: default;
+}
+
+
+/*node-form*/
+.ef-node-form-header {
+    height: 32px;
+    border-top: 1px solid #dce3e8;
+    border-bottom: 1px solid #dce3e8;
+    background: #F1F3F4;
+    color: #000;
+    line-height: 32px;
+    padding-left: 12px;
+    font-size: 14px;
+}
+
+.ef-node-form-body {
+    margin-top: 10px;
+    padding-right: 10px;
+    padding-bottom: 20px;
+}
+
+/* 连线中的label 样式*/
+.jtk-overlay.flowLabel:not(.aLabel) {
+    padding: 4px 10px;
+    background-color: white;
+    color: #565758 !important;
+    border: 1px solid #E0E3E7;
+    border-radius: 5px;
+}
+
+/* label 为空的样式 */
+.emptyFlowLabel {
+}
+
+
+.ef-dot {
+    background-color: #1879FF;
+    border-radius: 10px;
+}
+
+.ef-dot-hover {
+    background-color: red;
+}
+
+.ef-rectangle {
+    background-color: #1879FF;
+}
+
+.ef-rectangle-hover {
+    background-color: red;
+}
+
+.ef-img {
+}
+
+.ef-img-hover {
+}
+
+
+.ef-drop-hover{
+    border: 1px dashed #1879FF;
+}

src/components/ef/info.vue

@@ -0,0 +1,55 @@
+<template>
+    <el-dialog
+            title="流程数据信息"
+            :visible.sync="dialogVisible"
+            width="70%"
+    >
+        <el-alert
+                title="使用说明"
+                type="warning"
+                description="以下流程信息可以被存储起来，方便下一次流程加载"
+                show-icon
+                close-text="知道了"
+        >
+        </el-alert>
+        <br/>
+        <!--一个高亮显示的插件-->
+        <codemirror
+                :value="flowJsonData"
+                :options="options"
+                class="code"
+        ></codemirror>
+    </el-dialog>
+</template>
+
+<script>
+    import 'codemirror/lib/codemirror.css';
+    import { codemirror } from 'vue-codemirror';
+    //codemirror/mode/javascript/javascript.js
+    require("codemirror/mode/javascript/javascript.js")
+
+    export default {
+        props: {
+            data: Object,
+        },
+        data() {
+            return {
+                dialogVisible: false,
+                flowJsonData: {},
+                options: {
+                    mode: {name: "javascript", json: true},
+                    lineNumbers: true
+                }
+            }
+        },
+        components: {
+            codemirror
+        },
+        methods: {
+            init() {
+                this.dialogVisible = true
+                this.flowJsonData = JSON.stringify(this.data, null, 4).toString()
+            }
+        }
+    }
+</script>

src/components/ef/mixins.js

@@ -0,0 +1,157 @@
+export const easyFlowMixin = {
+    data() {
+        return {
+            jsplumbSetting: {
+                // 动态锚点、位置自适应
+                Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
+                // 容器ID
+                Container: 'efContainer',
+                // 连线的样式，直线或者曲线等，可选值:  StateMachine、Flowchart，Bezier、Straight
+                Connector: ['Bezier', {curviness: 100}],
+                // Connector: ['Straight', {stub: 20, gap: 1}],
+                // Connector: ['Flowchart', {stub: 30, gap: 1, alwaysRespectStubs: false, midpoint: 0.5, cornerRadius: 10}],
+                // Connector: ['StateMachine', {margin: 5, curviness: 10, proximityLimit: 80}],
+                // 鼠标不能拖动删除线
+                ConnectionsDetachable: false,
+                // 删除线的时候节点不删除
+                DeleteEndpointsOnDetach: false,
+                /**
+                 * 连线的两端端点类型：圆形
+                 * radius: 圆的半径，越大圆越大
+                 */
+                // Endpoint: ['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}],
+                /**
+                 * 连线的两端端点类型：矩形
+                 * height: 矩形的高
+                 * width: 矩形的宽
+                 */
+                // Endpoint: ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}],
+                /**
+                 * 图像端点
+                 */
+                // Endpoint: ['Image', {src: 'https://www.easyicon.net/api/resizeApi.php?id=1181776&size=32', cssClass: 'ef-img', hoverClass: 'ef-img-hover'}],
+                /**
+                 * 空白端点
+                 */
+                Endpoint: ['Blank', {Overlays: ''}],
+                // Endpoints: [['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}], ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}]],
+                /**
+                 * 连线的两端端点样式
+                 * fill: 颜色值，如：#12aabb，为空不显示
+                 * outlineWidth: 外边线宽度
+                 */
+                EndpointStyle: {fill: '#1879ffa1', outlineWidth: 1},
+                // 是否打开jsPlumb的内部日志记录
+                LogEnabled: true,
+                /**
+                 * 连线的样式
+                 */
+                PaintStyle: {
+                    // 线的颜色
+                    stroke: '#E0E3E7',
+                    // 线的粗细，值越大线越粗
+                    strokeWidth: 1,
+                    // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
+                    outlineStroke: 'transparent',
+                    // 线外边的宽，值越大，线的点击范围越大
+                    outlineWidth: 10
+                },
+                DragOptions: {cursor: 'pointer', zIndex: 2000},
+                /**
+                 *  叠加 参考： https://www.jianshu.com/p/d9e9918fd928
+                 */
+                Overlays: [
+                    // 箭头叠加
+                    ['Arrow', {
+                        width: 10, // 箭头尾部的宽度
+                        length: 8, // 从箭头的尾部到头部的距离
+                        location: 1, // 位置，建议使用0～1之间
+                        direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
+                        foldback: 0.623 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
+                    }],
+                    // ['Diamond', {
+                    //     events: {
+                    //         dblclick: function (diamondOverlay, originalEvent) {
+                    //             console.log('double click on diamond overlay for : ' + diamondOverlay.component)
+                    //         }
+                    //     }
+                    // }],
+                    ['Label', {
+                        label: '',
+                        location: 0.1,
+                        cssClass: 'aLabel'
+                    }]
+                ],
+                // 绘制图的模式 svg、canvas
+                RenderMode: 'svg',
+                // 鼠标滑过线的样式
+                HoverPaintStyle: {stroke: '#b0b2b5', strokeWidth: 1},
+                // 滑过锚点效果
+                // EndpointHoverStyle: {fill: 'red'}
+                Scope: 'jsPlumb_DefaultScope' // 范围，具有相同scope的点才可连接
+            },
+            /**
+             * 连线参数
+             */
+            jsplumbConnectOptions: {
+                isSource: true,
+                isTarget: true,
+                // 动态锚点、提供了4个方向 Continuous、AutoDefault
+                anchor: 'Continuous',
+                // 设置连线上面的label样式
+                labelStyle: {
+                    cssClass: 'flowLabel'
+                },
+                // 修改了jsplumb 源码，支持label 为空传入自定义style
+                emptyLabelStyle: {
+                    cssClass: 'emptyFlowLabel'
+                }
+            },
+            /**
+             * 源点配置参数
+             */
+            jsplumbSourceOptions: {
+                // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
+                filter: '.flow-node-drag',
+                filterExclude: false,
+                anchor: 'Continuous',
+                // 是否允许自己连接自己
+                allowLoopback: true,
+                maxConnections: -1,
+                onMaxConnections: function (info, e) {
+                    console.log(`超过了最大值连线: ${info.maxConnections}`)
+                }
+            },
+            // 参考 https://www.cnblogs.com/mq0036/p/7942139.html
+            jsplumbSourceOptions2: {
+                // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
+                filter: '.flow-node-drag',
+                filterExclude: false,
+                // anchor: 'Continuous',
+                // 是否允许自己连接自己
+                allowLoopback: true,
+                connector: ['Flowchart', {curviness: 50}],
+                connectorStyle: {
+                    // 线的颜色
+                    stroke: 'red',
+                    // 线的粗细，值越大线越粗
+                    strokeWidth: 1,
+                    // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
+                    outlineStroke: 'transparent',
+                    // 线外边的宽，值越大，线的点击范围越大
+                    outlineWidth: 10
+                },
+                connectorHoverStyle: {stroke: 'red', strokeWidth: 2}
+            },
+            jsplumbTargetOptions: {
+                // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
+                filter: '.flow-node-drag',
+                filterExclude: false,
+                // 是否允许自己连接自己
+                anchor: 'Continuous',
+                allowLoopback: true,
+                dropOptions: {hoverClass: 'ef-drop-hover'}
+            }
+        }
+    }
+}

src/components/ef/node.vue

@@ -0,0 +1,79 @@
+<template>
+    <div
+            ref="node"
+            :style="nodeContainerStyle"
+            @click="clickNode"
+            @mouseup="changeNodeSite"
+            :class="nodeContainerClass"
+    >
+        <!-- 最左侧的那条竖线 -->
+        <div class="ef-node-left"></div>
+        <!-- 节点类型的图标 -->
+        <div class="ef-node-left-ico flow-node-drag">
+            <i :class="nodeIcoClass"></i>
+        </div>
+        <!-- 节点名称 -->
+        <div class="ef-node-text" :show-overflow-tooltip="true">
+            {{node.name}}
+        </div>
+        <!-- 节点状态图标 -->
+        <div class="ef-node-right-ico">
+            <i class="el-icon-circle-check el-node-state-success" v-show="node.state === 'success'"></i>
+            <i class="el-icon-circle-close el-node-state-error" v-show="node.state === 'error'"></i>
+            <i class="el-icon-warning-outline el-node-state-warning" v-show="node.state === 'warning'"></i>
+            <i class="el-icon-loading el-node-state-running" v-show="node.state === 'running'"></i>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            node: Object,
+            activeElement: Object
+        },
+        data() {
+            return {}
+        },
+        computed: {
+            nodeContainerClass() {
+                return {
+                    'ef-node-container': true,
+                    'ef-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.id : false
+                }
+            },
+            // 节点容器样式
+            nodeContainerStyle() {
+                return {
+                    top: this.node.top,
+                    left: this.node.left
+                }
+            },
+            nodeIcoClass() {
+                var nodeIcoClass = {}
+                nodeIcoClass[this.node.ico] = true
+                // 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
+                nodeIcoClass['flow-node-drag'] = this.node.viewOnly ? false : true
+                return nodeIcoClass
+            }
+        },
+        methods: {
+            // 点击节点
+            clickNode() {
+                this.$emit('clickNode', this.node.id)
+            },
+            // 鼠标移动后抬起
+            changeNodeSite() {
+                // 避免抖动
+                if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
+                    return;
+                }
+                this.$emit('changeNodeSite', {
+                    nodeId: this.node.id,
+                    left: this.$refs.node.style.left,
+                    top: this.$refs.node.style.top,
+                })
+            }
+        }
+    }
+</script>

src/components/ef/node_form.vue

@@ -0,0 +1,134 @@
+<template>
+    <div>
+        <div class="ef-node-form">
+            <div class="ef-node-form-header">
+                编辑
+            </div>
+            <div class="ef-node-form-body">
+                <el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'">
+                    <el-form-item label="类型">
+                        <el-input v-model="node.type" :disabled="true"></el-input>
+                    </el-form-item>
+                    <el-form-item label="名称">
+                        <el-input v-model="node.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="left坐标">
+                        <el-input v-model="node.left" :disabled="true"></el-input>
+                    </el-form-item>
+                    <el-form-item label="top坐标">
+                        <el-input v-model="node.top" :disabled="true"></el-input>
+                    </el-form-item>
+                    <el-form-item label="ico图标">
+                        <el-input v-model="node.ico"></el-input>
+                    </el-form-item>
+                    <el-form-item label="状态">
+                        <el-select v-model="node.state" placeholder="请选择">
+                            <el-option
+                                    v-for="item in stateList"
+                                    :key="item.state"
+                                    :label="item.label"
+                                    :value="item.state">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="el-icon-close">重置</el-button>
+                        <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
+                    </el-form-item>
+                </el-form>
+
+                <el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
+                    <el-form-item label="条件">
+                        <el-input v-model="line.label"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="el-icon-close">重置</el-button>
+                        <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <!--            <div class="el-node-form-tag"></div>-->
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import { cloneDeep } from 'lodash'
+
+    export default {
+        data() {
+            return {
+                visible: true,
+                // node 或 line
+                type: 'node',
+                node: {},
+                line: {},
+                data: {},
+                stateList: [{
+                    state: 'success',
+                    label: '成功'
+                }, {
+                    state: 'warning',
+                    label: '警告'
+                }, {
+                    state: 'error',
+                    label: '错误'
+                }, {
+                    state: 'running',
+                    label: '运行中'
+                }]
+            }
+        },
+        methods: {
+            /**
+             * 表单修改，这里可以根据传入的ID进行业务信息获取
+             * @param data
+             * @param id
+             */
+            nodeInit(data, id) {
+                this.type = 'node'
+                this.data = data
+                data.nodeList.filter((node) => {
+                    if (node.id === id) {
+                        this.node = cloneDeep(node)
+                    }
+                })
+            },
+            lineInit(line) {
+                this.type = 'line'
+                this.line = line
+            },
+            // 修改连线
+            saveLine() {
+                this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
+            },
+            save() {
+                this.data.nodeList.filter((node) => {
+                    if (node.id === this.node.id) {
+                        node.name = this.node.name
+                        node.left = this.node.left
+                        node.top = this.node.top
+                        node.ico = this.node.ico
+                        node.state = this.node.state
+                        this.$emit('repaintEverything')
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+    .el-node-form-tag {
+        position: absolute;
+        top: 50%;
+        margin-left: -15px;
+        height: 40px;
+        width: 15px;
+        background-color: #fbfbfb;
+        border: 1px solid rgb(220, 227, 232);
+        border-right: none;
+        z-index: 0;
+    }
+</style>

src/components/ef/node_menu.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="flow-menu" ref="tool">
+        <div v-for="menu  in  menuList" :key="menu.id">
+            <span class="ef-node-pmenu" @click="menu.open = !menu.open"><i :class="{'el-icon-caret-bottom': menu.open,'el-icon-caret-right': !menu.open}"></i>&nbsp;{{menu.name}}</span>
+            <ul v-show="menu.open" class="ef-node-menu-ul">
+                <draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
+                    <li v-for="subMenu in menu.children" class="ef-node-menu-li" :key="subMenu.id" :type="subMenu.type">
+                        <i :class="subMenu.ico"></i> {{subMenu.name}}
+                    </li>
+                </draggable>
+            </ul>
+        </div>
+    </div>
+</template>
+<script>
+    import draggable from 'vuedraggable'
+
+    var mousePosition = {
+        left: -1,
+        top: -1
+    }
+
+    export default {
+        data() {
+            return {
+                activeNames: '1',
+                // draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
+                draggableOptions: {
+                    preventOnFilter: false,
+                    sort: false,
+                    disabled: false,
+                    ghostClass: 'tt',
+                    // 不使用H5原生的配置
+                    forceFallback: true,
+                    // 拖拽的时候样式
+                    // fallbackClass: 'flow-node-draggable'
+                },
+                // 默认打开的左侧菜单的id
+                defaultOpeneds: ['1', '2'],
+                menuList: [
+                    {
+                        id: '1',
+                        type: 'group',
+                        name: '开始节点',
+                        ico: 'el-icon-video-play',
+                        open: true,
+                        children: [
+                            {
+                                id: '11',
+                                type: 'timer',
+                                name: '数据接入',
+                                ico: 'el-icon-time',
+                                // 自定义覆盖样式
+                                style: {}
+                            }, {
+                                id: '12',
+                                type: 'task',
+                                name: '接口调用',
+                                ico: 'el-icon-odometer',
+                                // 自定义覆盖样式
+                                style: {}
+                            }
+                        ]
+                    },
+                    {
+                        id: '2',
+                        type: 'group',
+                        name: '结束节点',
+                        ico: 'el-icon-video-pause',
+                        open: true,
+                        children: [
+                            {
+                                id: '21',
+                                type: 'end',
+                                name: '流程结束',
+                                ico: 'el-icon-caret-right',
+                                // 自定义覆盖样式
+                                style: {}
+                            }, {
+                                id: '22',
+                                type: 'over',
+                                name: '数据清理',
+                                ico: 'el-icon-shopping-cart-full',
+                                // 自定义覆盖样式
+                                style: {}
+                            }
+                        ]
+                    }
+                ],
+                nodeMenu: {}
+            }
+        },
+        components: {
+            draggable
+        },
+        created() {
+            /**
+             * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
+             * @param event
+             */
+            if (this.isFirefox()) {
+                document.body.ondrop = function (event) {
+                    // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
+                    mousePosition.left = event.layerX
+                    mousePosition.top = event.clientY - 50
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }
+        },
+        methods: {
+            // 根据类型获取左侧菜单对象
+            getMenuByType(type) {
+                for (let i = 0; i < this.menuList.length; i++) {
+                    let children = this.menuList[i].children;
+                    for (let j = 0; j < children.length; j++) {
+                        if (children[j].type === type) {
+                            return children[j]
+                        }
+                    }
+                }
+            },
+            // 拖拽开始时触发
+            move(evt, a, b, c) {
+                var type = evt.item.attributes.type.nodeValue
+                this.nodeMenu = this.getMenuByType(type)
+            },
+            // 拖拽结束时触发
+            end(evt, e) {
+                this.$emit('addNode', evt, this.nodeMenu, mousePosition)
+            },
+            // 是否是火狐浏览器
+            isFirefox() {
+                var userAgent = navigator.userAgent
+                if (userAgent.indexOf("Firefox") > -1) {
+                    return true
+                }
+                return false
+            }
+        }
+    }
+</script>

src/components/ef/panel.vue

@@ -0,0 +1,546 @@
+<template>
+    <div v-if="easyFlowVisible" style="height: calc(100vh);">
+        <el-row>
+            <!--顶部工具菜单-->
+            <el-col :span="24">
+                <div class="ef-tooltar">
+                    <el-link type="primary" :underline="false">{{data.name}}</el-link>
+                    <el-divider direction="vertical"></el-divider>
+                    <el-button type="text" icon="el-icon-delete" size="large" @click="deleteElement" :disabled="!this.activeElement.type"></el-button>
+                    <el-divider direction="vertical"></el-divider>
+                    <el-button type="text" icon="el-icon-download" size="large" @click="downloadData"></el-button>
+                    <el-divider direction="vertical"></el-divider>
+                    <el-button type="text" icon="el-icon-plus" size="large" @click="zoomAdd"></el-button>
+                    <el-divider direction="vertical"></el-divider>
+                    <el-button type="text" icon="el-icon-minus" size="large" @click="zoomSub"></el-button>
+                    <div style="float: right;margin-right: 5px">
+                        <el-button type="info" plain round icon="el-icon-document" @click="dataInfo" size="mini">流程信息</el-button>
+                        <el-button type="primary" plain round @click="dataReloadA" icon="el-icon-refresh" size="mini">切换流程A</el-button>
+                        <el-button type="primary" plain round @click="dataReloadB" icon="el-icon-refresh" size="mini">切换流程B</el-button>
+                        <el-button type="primary" plain round @click="dataReloadC" icon="el-icon-refresh" size="mini">切换流程C</el-button>
+                        <el-button type="primary" plain round @click="dataReloadD" icon="el-icon-refresh" size="mini">自定义样式</el-button>
+                        <el-button type="primary" plain round @click="dataReloadE" icon="el-icon-refresh" size="mini">力导图</el-button>
+                        <el-button type="info" plain round icon="el-icon-document" @click="openHelp" size="mini">帮助</el-button>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <div style="display: flex;height: calc(100% - 47px);">
+            <div style="width: 230px;border-right: 1px solid #dce3e8;">
+                <node-menu @addNode="addNode" ref="nodeMenu"></node-menu>
+            </div>
+            <div id="efContainer" ref="efContainer" class="container" v-flowDrag>
+                <template v-for="node in data.nodeList">
+                    <flow-node
+                            :id="node.id"
+                            :key="node.id"
+                            :node="node"
+                            :activeElement="activeElement"
+                            @changeNodeSite="changeNodeSite"
+                            @nodeRightMenu="nodeRightMenu"
+                            @clickNode="clickNode"
+                    >
+                    </flow-node>
+                </template>
+                <!-- 给画布一个默认的宽度和高度 -->
+                <div style="position:absolute;top: 2000px;left: 2000px;">&nbsp;</div>
+            </div>
+            <!-- 右侧表单 -->
+            <div style="width: 300px;border-left: 1px solid #dce3e8;background-color: #FBFBFB">
+                <flow-node-form ref="nodeForm" @setLineLabel="setLineLabel" @repaintEverything="repaintEverything"></flow-node-form>
+            </div>
+        </div>
+        <!-- 流程数据详情 -->
+        <flow-info v-if="flowInfoVisible" ref="flowInfo" :data="data"></flow-info>
+        <flow-help v-if="flowHelpVisible" ref="flowHelp"></flow-help>
+    </div>
+
+</template>
+
+<script>
+    import draggable from 'vuedraggable'
+    // import { jsPlumb } from 'jsplumb'
+    // 使用修改后的jsplumb
+    import './jsplumb'
+    import { easyFlowMixin } from '@/components/ef/mixins'
+    import flowNode from '@/components/ef/node'
+    import nodeMenu from '@/components/ef/node_menu'
+    import FlowInfo from '@/components/ef/info'
+    import FlowHelp from '@/components/ef/help'
+    import FlowNodeForm from '@/components/ef/node_form'
+    import lodash from 'lodash'
+    import { getDataA } from './data_A'
+    import { getDataB } from './data_B'
+    import { getDataC } from './data_C'
+    import { getDataD } from './data_D'
+    import { getDataE } from './data_E'
+    import { ForceDirected } from './force-directed'
+
+    export default {
+        data() {
+            return {
+                // jsPlumb 实例
+                jsPlumb: null,
+                // 控制画布销毁
+                easyFlowVisible: true,
+                // 控制流程数据显示与隐藏
+                flowInfoVisible: false,
+                // 是否加载完毕标志位
+                loadEasyFlowFinish: false,
+                flowHelpVisible: false,
+                // 数据
+                data: {},
+                // 激活的元素、可能是节点、可能是连线
+                activeElement: {
+                    // 可选值 node 、line
+                    type: undefined,
+                    // 节点ID
+                    nodeId: undefined,
+                    // 连线ID
+                    sourceId: undefined,
+                    targetId: undefined
+                },
+                zoom: 0.5
+            }
+        },
+        // 一些基础配置移动该文件中
+        mixins: [easyFlowMixin],
+        components: {
+            draggable, flowNode, nodeMenu, FlowInfo, FlowNodeForm, FlowHelp
+        },
+        directives: {
+            'flowDrag': {
+                bind(el, binding, vnode, oldNode) {
+                    if (!binding) {
+                        return
+                    }
+                    el.onmousedown = (e) => {
+                        if (e.button == 2) {
+                            // 右键不管
+                            return
+                        }
+                        //  鼠标按下，计算当前原始距离可视区的高度
+                        let disX = e.clientX
+                        let disY = e.clientY
+                        el.style.cursor = 'move'
+
+                        document.onmousemove = function (e) {
+                            // 移动时禁止默认事件
+                            e.preventDefault()
+                            const left = e.clientX - disX
+                            disX = e.clientX
+                            el.scrollLeft += -left
+
+                            const top = e.clientY - disY
+                            disY = e.clientY
+                            el.scrollTop += -top
+                        }
+
+                        document.onmouseup = function (e) {
+                            el.style.cursor = 'auto'
+                            document.onmousemove = null
+                            document.onmouseup = null
+                        }
+                    }
+                }
+            }
+        },
+        mounted() {
+            this.jsPlumb = jsPlumb.getInstance()
+            this.$nextTick(() => {
+                // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
+                this.dataReload(getDataB())
+            })
+        },
+        methods: {
+            // 返回唯一标识
+            getUUID() {
+                return Math.random().toString(36).substr(3, 10)
+            },
+            jsPlumbInit() {
+                this.jsPlumb.ready(() => {
+                    // 导入默认配置
+                    this.jsPlumb.importDefaults(this.jsplumbSetting)
+                    // 会使整个jsPlumb立即重绘。
+                    this.jsPlumb.setSuspendDrawing(false, true);
+                    // 初始化节点
+                    this.loadEasyFlow()
+                    // 单点击了连接线, https://www.cnblogs.com/ysx215/p/7615677.html
+                    this.jsPlumb.bind('click', (conn, originalEvent) => {
+                        this.activeElement.type = 'line'
+                        this.activeElement.sourceId = conn.sourceId
+                        this.activeElement.targetId = conn.targetId
+                        this.$refs.nodeForm.lineInit({
+                            from: conn.sourceId,
+                            to: conn.targetId,
+                            label: conn.getLabel()
+                        })
+                    })
+                    // 连线
+                    this.jsPlumb.bind("connection", (evt) => {
+                        let from = evt.source.id
+                        let to = evt.target.id
+                        if (this.loadEasyFlowFinish) {
+                            this.data.lineList.push({from: from, to: to})
+                        }
+                    })
+
+                    // 删除连线回调
+                    this.jsPlumb.bind("connectionDetached", (evt) => {
+                        this.deleteLine(evt.sourceId, evt.targetId)
+                    })
+
+                    // 改变线的连接节点
+                    this.jsPlumb.bind("connectionMoved", (evt) => {
+                        this.changeLine(evt.originalSourceId, evt.originalTargetId)
+                    })
+
+                    // 连线右击
+                    this.jsPlumb.bind("contextmenu", (evt) => {
+                        console.log('contextmenu', evt)
+                    })
+
+                    // 连线
+                    this.jsPlumb.bind("beforeDrop", (evt) => {
+                        let from = evt.sourceId
+                        let to = evt.targetId
+                        if (from === to) {
+                            this.$message.error('节点不支持连接自己')
+                            return false
+                        }
+                        if (this.hasLine(from, to)) {
+                            this.$message.error('该关系已存在,不允许重复创建')
+                            return false
+                        }
+                        if (this.hashOppositeLine(from, to)) {
+                            this.$message.error('不支持两个节点之间连线回环');
+                            return false
+                        }
+                        this.$message.success('连接成功')
+                        return true
+                    })
+
+                    // beforeDetach
+                    this.jsPlumb.bind("beforeDetach", (evt) => {
+                        console.log('beforeDetach', evt)
+                    })
+                    this.jsPlumb.setContainer(this.$refs.efContainer)
+                })
+            },
+            // 加载流程图
+            loadEasyFlow() {
+                // 初始化节点
+                for (var i = 0; i < this.data.nodeList.length; i++) {
+                    let node = this.data.nodeList[i]
+                    // 设置源点，可以拖出线连接其他节点
+                    this.jsPlumb.makeSource(node.id, lodash.merge(this.jsplumbSourceOptions, {}))
+                    // // 设置目标点，其他源点拖出的线可以连接该节点
+                    this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
+                    if (!node.viewOnly) {
+                        this.jsPlumb.draggable(node.id, {
+                            containment: 'parent',
+                            stop: function (el) {
+                                // 拖拽节点结束后的对调
+                                console.log('拖拽结束: ', el)
+                            }
+                        })
+                    }
+                }
+                // 初始化连线
+                for (var i = 0; i < this.data.lineList.length; i++) {
+                    let line = this.data.lineList[i]
+                    var connParam = {
+                        source: line.from,
+                        target: line.to,
+                        label: line.label ? line.label : '',
+                        connector: line.connector ? line.connector : '',
+                        anchors: line.anchors ? line.anchors : undefined,
+                        paintStyle: line.paintStyle ? line.paintStyle : undefined,
+                    }
+                    this.jsPlumb.connect(connParam, this.jsplumbConnectOptions)
+                }
+                this.$nextTick(function () {
+                    this.loadEasyFlowFinish = true
+                })
+            },
+            // 设置连线条件
+            setLineLabel(from, to, label) {
+                var conn = this.jsPlumb.getConnections({
+                    source: from,
+                    target: to
+                })[0]
+                if (!label || label === '') {
+                    conn.removeClass('flowLabel')
+                    conn.addClass('emptyFlowLabel')
+                } else {
+                    conn.addClass('flowLabel')
+                }
+                conn.setLabel({
+                    label: label,
+                })
+                this.data.lineList.forEach(function (line) {
+                    if (line.from == from && line.to == to) {
+                        line.label = label
+                    }
+                })
+
+            },
+            // 删除激活的元素
+            deleteElement() {
+                if (this.activeElement.type === 'node') {
+                    this.deleteNode(this.activeElement.nodeId)
+                } else if (this.activeElement.type === 'line') {
+                    this.$confirm('确定删除所点击的线吗?', '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning'
+                    }).then(() => {
+                        var conn = this.jsPlumb.getConnections({
+                            source: this.activeElement.sourceId,
+                            target: this.activeElement.targetId
+                        })[0]
+                        this.jsPlumb.deleteConnection(conn)
+                    }).catch(() => {
+                    })
+                }
+            },
+            // 删除线
+            deleteLine(from, to) {
+                this.data.lineList = this.data.lineList.filter(function (line) {
+                    if (line.from == from && line.to == to) {
+                        return false
+                    }
+                    return true
+                })
+            },
+            // 改变连线
+            changeLine(oldFrom, oldTo) {
+                this.deleteLine(oldFrom, oldTo)
+            },
+            // 改变节点的位置
+            changeNodeSite(data) {
+                for (var i = 0; i < this.data.nodeList.length; i++) {
+                    let node = this.data.nodeList[i]
+                    if (node.id === data.nodeId) {
+                        node.left = data.left
+                        node.top = data.top
+                    }
+                }
+            },
+            /**
+             * 拖拽结束后添加新的节点
+             * @param evt
+             * @param nodeMenu 被添加的节点对象
+             * @param mousePosition 鼠标拖拽结束的坐标
+             */
+            addNode(evt, nodeMenu, mousePosition) {
+                var screenX = evt.originalEvent.clientX, screenY = evt.originalEvent.clientY
+                let efContainer = this.$refs.efContainer
+                var containerRect = efContainer.getBoundingClientRect()
+                var left = screenX, top = screenY
+                // 计算是否拖入到容器中
+                if (left < containerRect.x || left > containerRect.width + containerRect.x || top < containerRect.y || containerRect.y > containerRect.y + containerRect.height) {
+                    this.$message.error("请把节点拖入到画布中")
+                    return
+                }
+                left = left - containerRect.x + efContainer.scrollLeft
+                top = top - containerRect.y + efContainer.scrollTop
+                // 居中
+                left -= 85
+                top -= 16
+                var nodeId = this.getUUID()
+                // 动态生成名字
+                var origName = nodeMenu.name
+                var nodeName = origName
+                var index = 1
+                while (index < 10000) {
+                    var repeat = false
+                    for (var i = 0; i < this.data.nodeList.length; i++) {
+                        let node = this.data.nodeList[i]
+                        if (node.name === nodeName) {
+                            nodeName = origName + index
+                            repeat = true
+                        }
+                    }
+                    if (repeat) {
+                        index++
+                        continue
+                    }
+                    break
+                }
+                var node = {
+                    id: nodeId,
+                    name: nodeName,
+                    type: nodeMenu.type,
+                    left: left + 'px',
+                    top: top + 'px',
+                    ico: nodeMenu.ico,
+                    state: 'success'
+                }
+                /**
+                 * 这里可以进行业务判断、是否能够添加该节点
+                 */
+                this.data.nodeList.push(node)
+                this.$nextTick(function () {
+                    this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions)
+                    this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions)
+                    this.jsPlumb.draggable(nodeId, {
+                        containment: 'parent',
+                        stop: function (el) {
+                            // 拖拽节点结束后的对调
+                            console.log('拖拽结束: ', el)
+                        }
+                    })
+                })
+            },
+            /**
+             * 删除节点
+             * @param nodeId 被删除节点的ID
+             */
+            deleteNode(nodeId) {
+                this.$confirm('确定要删除节点' + nodeId + '?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    closeOnClickModal: false
+                }).then(() => {
+                    /**
+                     * 这里需要进行业务判断，是否可以删除
+                     */
+                    this.data.nodeList = this.data.nodeList.filter(function (node) {
+                        if (node.id === nodeId) {
+                            // 伪删除，将节点隐藏，否则会导致位置错位
+                            // node.show = false
+                            return false
+                        }
+                        return true
+                    })
+                    this.$nextTick(function () {
+                        this.jsPlumb.removeAllEndpoints(nodeId);
+                    })
+                }).catch(() => {
+                })
+                return true
+            },
+            clickNode(nodeId) {
+                this.activeElement.type = 'node'
+                this.activeElement.nodeId = nodeId
+                this.$refs.nodeForm.nodeInit(this.data, nodeId)
+            },
+            // 是否具有该线
+            hasLine(from, to) {
+                for (var i = 0; i < this.data.lineList.length; i++) {
+                    var line = this.data.lineList[i]
+                    if (line.from === from && line.to === to) {
+                        return true
+                    }
+                }
+                return false
+            },
+            // 是否含有相反的线
+            hashOppositeLine(from, to) {
+                return this.hasLine(to, from)
+            },
+            nodeRightMenu(nodeId, evt) {
+                this.menu.show = true
+                this.menu.curNodeId = nodeId
+                this.menu.left = evt.x + 'px'
+                this.menu.top = evt.y + 'px'
+            },
+            repaintEverything() {
+                this.jsPlumb.repaint()
+            },
+            // 流程数据信息
+            dataInfo() {
+                this.flowInfoVisible = true
+                this.$nextTick(function () {
+                    this.$refs.flowInfo.init()
+                })
+            },
+            // 加载流程图
+            dataReload(data) {
+                this.easyFlowVisible = false
+                this.data.nodeList = []
+                this.data.lineList = []
+                this.$nextTick(() => {
+                    data = lodash.cloneDeep(data)
+                    this.easyFlowVisible = true
+                    this.data = data
+                    this.$nextTick(() => {
+                        this.jsPlumb = jsPlumb.getInstance()
+                        this.$nextTick(() => {
+                            this.jsPlumbInit()
+                        })
+                    })
+                })
+            },
+            // 模拟载入数据dataA
+            dataReloadA() {
+                this.dataReload(getDataA())
+            },
+            // 模拟载入数据dataB
+            dataReloadB() {
+                this.dataReload(getDataB())
+            },
+            // 模拟载入数据dataC
+            dataReloadC() {
+                this.dataReload(getDataC())
+            },
+            // 模拟载入数据dataD
+            dataReloadD() {
+                this.dataReload(getDataD())
+            },
+            // 模拟加载数据dataE，自适应创建坐标
+            dataReloadE() {
+                let dataE = getDataE()
+                let tempData = lodash.cloneDeep(dataE)
+                let data = ForceDirected(tempData)
+                this.dataReload(data)
+                this.$message({
+                    message: '力导图每次产生的布局是不一样的',
+                    type: 'warning'
+                });
+            },
+            zoomAdd() {
+                if (this.zoom >= 1) {
+                    return
+                }
+                this.zoom = this.zoom + 0.1
+                this.$refs.efContainer.style.transform = `scale(${this.zoom})`
+                this.jsPlumb.setZoom(this.zoom)
+            },
+            zoomSub() {
+                if (this.zoom <= 0) {
+                    return
+                }
+                this.zoom = this.zoom - 0.1
+                this.$refs.efContainer.style.transform = `scale(${this.zoom})`
+                this.jsPlumb.setZoom(this.zoom)
+            },
+            // 下载数据
+            downloadData() {
+                this.$confirm('确定要下载该流程数据吗？', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    closeOnClickModal: false
+                }).then(() => {
+                    var datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.data, null, '\t'));
+                    var downloadAnchorNode = document.createElement('a')
+                    downloadAnchorNode.setAttribute("href", datastr);
+                    downloadAnchorNode.setAttribute("download", 'data.json')
+                    downloadAnchorNode.click();
+                    downloadAnchorNode.remove();
+                    this.$message.success("正在下载中,请稍后...")
+                }).catch(() => {
+                })
+            },
+            openHelp() {
+                this.flowHelpVisible = true
+                this.$nextTick(function () {
+                    this.$refs.flowHelp.init()
+                })
+            }
+        }
+    }
+</script>

src/components/ef/utils.js

@@ -0,0 +1,29 @@
+// 是否具有该线
+export function hasLine(data, from, to) {
+    for (let i = 0; i < data.lineList.length; i++) {
+        let line = data.lineList[i]
+        if (line.from === from && line.to === to) {
+            return true
+        }
+    }
+    return false
+}
+
+// 是否含有相反的线
+export function hashOppositeLine(data, from, to) {
+    return hasLine(data, to, from)
+}
+
+// 获取连线
+export function getConnector(jsp, from, to) {
+    let connection = jsp.getConnections({
+        source: from,
+        target: to
+    })[0]
+    return connection
+}
+
+// 获取唯一标识
+export function uuid() {
+    return Math.random().toString(36).substr(3, 10)
+}

src/layout/components/Navbar.vue

@@ -6,7 +6,14 @@
     <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container"/>
     <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container"/>
 
+
+
     <div class="right-menu">
+      <iframe width="500" height="40" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=40&icon=1"></iframe>
+
+      <el-button  @click="drawerTru"  type="primary" style="margin: 10px 0;">
+        <i class="el-icon-s-comment"></i>
+      </el-button>
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item"/>
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
@@ -34,7 +41,119 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
+
     </div>
+    <div>
+
+      <!--      <el-drawer-->
+      <!--        title="我是标题"-->
+      <!--        :visible.sync="drawer"-->
+      <!--        size="50%"-->
+      <!--        :with-header="false">-->
+
+      <!--        <el-radio-group v-model="type" @change="selectNotice">-->
+      <!--          <el-radio-button label="0" >全部</el-radio-button>-->
+      <!--          <el-radio-button label="1" >通知</el-radio-button>-->
+      <!--          <el-radio-button label="2" >公告</el-radio-button>-->
+      <!--        </el-radio-group>-->
+      <!--        <br>-->
+      <!--        <el-radio-group v-model="state"  @change="selectNotice">-->
+      <!--          <el-radio-button label="0" >全部</el-radio-button>-->
+      <!--          <el-radio-button label="2">已读</el-radio-button>-->
+      <!--          <el-radio-button label="1">未读</el-radio-button>-->
+      <!--        </el-radio-group>-->
+
+
+
+
+      <!--        <el-descriptions class="margin-top"  v-for="notice in notices" :column="2" border>-->
+      <!--          <template slot="extra">-->
+      <!--            <el-button type="primary" size="small" @click="lookNotice(notice)">阅读信息</el-button>-->
+      <!--          </template>-->
+      <!--          <el-descriptions-item>-->
+      <!--            <template slot="label">-->
+      <!--              <i class="el-icon-user"></i>-->
+      <!--              消息发布时间-->
+      <!--            </template>-->
+      <!--            {{ notice.noticeTitle }}-->
+      <!--          </el-descriptions-item>-->
+      <!--          <el-descriptions-item>-->
+      <!--            <template slot="label">-->
+      <!--              <i class="el-icon-mobile-phone"></i>-->
+      <!--              消息发布人-->
+      <!--            </template>-->
+      <!--            {{notice.createBy}}-->
+      <!--          </el-descriptions-item>-->
+      <!--          <el-descriptions-item>-->
+      <!--            <template slot="label">-->
+      <!--              <i class="el-icon-location-outline"></i>-->
+      <!--              消息类型-->
+      <!--            </template>-->
+      <!--            <el-tag size="small" v-if=" notice.noticeType == 1">通知</el-tag>-->
+      <!--            <el-tag size="warning" v-if=" notice.noticeType == 2">公告</el-tag>-->
+      <!--          </el-descriptions-item>-->
+      <!--          <el-descriptions-item>-->
+      <!--            <template slot="label">-->
+      <!--              <i class="el-icon-tickets"></i>-->
+      <!--              当前状态-->
+      <!--            </template>-->
+      <!--            <el-tag size="small" v-if=" notice.state == 1">未读</el-tag>-->
+      <!--            <el-tag size="success" v-if=" notice.state == 2">已读</el-tag>-->
+      <!--          </el-descriptions-item>-->
+      <!--        </el-descriptions>-->
+      <!--      </el-drawer>-->
+
+      <el-dialog
+        :visible.sync="dialogVisible"
+        width="30%">
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              消息发布时间
+            </template>
+            {{ notice.noticeTitle }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-mobile-phone"></i>
+              消息发布人
+            </template>
+            {{notice.createBy}}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-location-outline"></i>
+              消息类型
+            </template>
+            <el-tag size="small" v-if=" notice.noticeType == 1">通知</el-tag>
+            <el-tag size="warning" v-if=" notice.noticeType == 2">公告</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-tickets"></i>
+              当前状态
+            </template>
+            <el-tag size="small" v-if=" notice.state == 1">未读</el-tag>
+            <el-tag size="success" v-if=" notice.state == 2">已读</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-tickets"></i>
+              内容
+            </template>
+            <span v-html="notice.noticeContent"></span>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-dialog>
+
+
+
+
+    </div>
+
+
+
   </div>
 </template>
 
@@ -46,8 +165,19 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
+import {findList, lookNotice} from "@/api/system/notice";
 
 export default {
+  data(){
+    return{
+      drawer:false,
+      type:0,
+      state:0,
+      notices:[],
+      dialogVisible:false,
+      notice:{}
+    }
+  },
   components: {
     Breadcrumb,
     TopNav,
@@ -63,6 +193,7 @@ export default {
       'device'
     ]),
     setting: {
+
       get() {
         return this.$store.state.settings.showSettings
       },
@@ -79,7 +210,28 @@ export default {
       }
     }
   },
+  created() {
+  },
   methods: {
+    lookNotice(notice) {
+      this.dialogVisible = true
+      lookNotice(notice.id, notice.state).then(res => {
+        this.notice = res.data
+      })
+      this.findAll();
+    },
+    drawerTru() {
+      this.drawer = true
+      this.findAll()
+    },
+    findAll() {
+      findList({ state: this.state, noticeType: this.type }).then(res => {
+        this.notices = res.data;
+      })
+    },
+    selectNotice() {
+      this.findAll();
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -136,7 +288,7 @@ export default {
 
   .right-menu {
     float: right;
-    height: 100%;
+    height: 70%;
     line-height: 50px;
 
     &:focus {

src/main.js

@@ -1,6 +1,23 @@
 import Vue from 'vue'
 
 import Cookies from 'js-cookie'
+//引入文件、、
+import VueCodeMirror from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+Vue.use(VueCodeMirror)
+//
+
+
+//codemirror
+import VueCodemirror from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+Vue.use(VueCodemirror)
+
+import 'codemirror/lib/codemirror.css'
+
+
+
+
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
@@ -37,6 +54,9 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+import 'element-ui/lib/theme-chalk/index.css'
+import '@/components/ef/index.css'
+
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -57,7 +77,6 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
-
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

src/router/index.js

@@ -40,6 +40,19 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/easyFlow',// 这里的/serviceUse就是父级路由
+    component: Layout,
+    hidden: true,
+    children: [// 父级路由下面还有子路由
+      {
+        path: 'index/:id',// 这个index可以自己定义
+        component: () => import('@/views/task/task/antvX6.vue'),
+        name: "easyFlow",
+        meta: { title: '设计', icon: 'dashboard', activeMenu: '/task/task' }
+      }
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/login'),
@@ -86,7 +99,7 @@ export const constantRoutes = [
         meta: {title: '个人中心', icon: 'user'}
       }
     ]
-  }
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

src/settings.js

@@ -7,12 +7,12 @@ module.exports = {
   /**
    * 是否系统布局配置
    */
-  showSettings: false,
+  showSettings: true,
 
   /**
    * 是否显示顶部导航
    */
-  topNav: false,
+  topNav: true,
 
   /**
    * 是否显示 tagsView
@@ -22,7 +22,7 @@ module.exports = {
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo
@@ -32,7 +32,7 @@ module.exports = {
   /**
    * 是否显示动态标题
    */
-  dynamicTitle: false,
+  dynamicTitle: true,
 
   /**
    * @type {string | array} 'production' | ['production', 'development']

src/store/modules/user.js

@@ -69,6 +69,7 @@ const user = {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
           commit('SET_ID', user.userId)
+          localStorage.setItem('userId', user.userId)
           commit('SET_NAME', user.userName)
           commit('SET_AVATAR', avatar)
           resolve(res)

src/views/components/task/formData.vue

@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <!--    添加任务详情设计-->
+    <span v-if="taskInputForm">
+      <el-form  label-width="80px" :model="tableInfo" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
+        <el-form-item label="任务id">
+          <el-input v-model="tableInfo.taskId" readonly></el-input>
+        </el-form-item>
+
+        <el-form-item label="数据库id">
+          <el-input v-model="tableInfo.databaseId" readonly></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select  v-model="tableInfo.tableName" placeholder="请选择数据库">
+            <el-option style="height: 100%" :value="tableInfo.tableName">
+              <el-aside width="100%">
+                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+              </el-aside>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="表别名">
+          <el-input v-model="tableInfo.tableAsName"></el-input>
+        </el-form-item>
+
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="taskInputAdd = false">取 消</el-button>
+        <el-button type="primary" @click="addTaskInput()">下一步</el-button>
+        <el-button @click="nb()">测试</el-button>
+      </div>
+    </span>
+
+<!--    所选表内的字段信息-->
+    <span v-if="taskInputTable">
+      <el-table
+        ref="multipleTable"
+        :data="tableInfo.structureList"
+        style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="100%"></el-table-column>
+
+
+        <el-table-column label="字段" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="注释" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="是否主键" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="字段类型" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnType }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="字段长度" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="小数" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="非空" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.isNull }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="默认值" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="是否字典" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="处理规则" width="200">
+          <template slot-scope="scope">
+            <el-select v-model="taskInputReq.fieldAsEngineId" multiple placeholder="请选择">
+              <el-option value="">请选择</el-option>
+              <el-option
+                v-for="engine in engineList"
+                :key="engine.id"
+                :label="engine.name"
+                :value="engine.id">
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="字段别名"
+          width="200">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.tableAsField = tableInfo.tableAsName+'_'+scope.row.columnName"></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelColumn()">上一步</el-button>
+        <el-button type="primary" @click="columnAddGood()">确 定</el-button>
+        <el-button @click="nb()">测试</el-button>
+      </div>
+    </span>
+  </div>
+</template>
+
+<script>
+import { addTaskInput} from '@/api/task/task'
+import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
+import { selectEngineList } from '@/api/engine/engine'
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props:['graph','nodeId','taskInputForm','tableInfo','nodeName','columnList'],
+  data() {
+    //这里存放数据"
+
+    return {
+
+      taskInputJoin:false,
+      dialogFormVisible:true,
+      //任务设计添加表弹窗
+      taskInputAdd:false,
+      //选择字段弹窗
+      taskInputFieldAdd:false,
+      taskInputTable:false,
+      taskReq:{
+
+      },
+      joinSelect:{},
+      taskAddReq:{},
+      taskInputReq:{},
+      nbList:[],
+      engineReq:{
+        pageNum: 1,
+        pageSize: 100
+      },
+      taskList:[],
+      //级联选择器
+      value:[],
+
+      engineList:[],
+      columnList:[],
+
+      //树状图
+      data:[],
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+
+      tableList:[],
+      itemId:0,
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //规则引擎下拉框
+    selectEngineList(){
+      selectEngineList(this.engineReq).then(res=>{
+        this.engineList = res.data.list;
+        console.log(this.engineList);
+      })
+    },
+
+    //关闭字段信息
+    cancelColumn(){
+      this.taskInputTable = false;
+      this.taskInputForm = true;
+
+    },
+
+    //确定选择的字段
+    columnAddGood(){
+      this.taskInputTable = false;
+      this.tableInfo.fieldAsEngineId = "[{1,3,4},{1,2,3}]";
+      this.$emit('taskInputForm', false);
+      addTaskInput({
+          "nodeId":this.nodeId,
+          "nodeName":this.nodeName,
+          "taskId":this.tableInfo.taskId,
+          "databaseId":this.tableInfo.basicId,
+          "tableName":this.tableInfo.tableName,
+          "tableAsName":this.tableInfo.tableAsName,
+          "tableField": this.tableInfo.tableField.substring(1),
+          "tableAsField":this.tableInfo.tableAsField.substring(1),
+          "fieldAsEngineId":this.tableInfo.fieldAsEngineId
+        }).then(res=>{
+          alert(res.msg);
+      })
+      //添加记录
+    },
+
+    //选择完下拉框的表后点击下一步
+    addTaskInput(){
+      this.taskInputForm = false;
+      this.selectEngineList();
+      this.taskInputTable = true;
+    },
+
+    //选中需要的字段后将需要的值赋在tableInfo中
+    handleSelectionChange(val) {
+      if(val.length<=0){
+        val = this.tableInfo.columnList;
+        return;
+      }
+      this.columnList = val;
+      this.tableInfo.tableField = "";
+      this.tableInfo.tableAsField = "";
+
+      val.forEach(item=>{
+        this.tableInfo.tableField +=','+ item.columnName;
+        this.tableInfo.tableAsField +=','+ item.tableAsField;
+      })
+
+      console.log(this.tableInfo.tableField);
+    },
+
+    //根据树状下拉的选择赋值字段信息
+    handleNodeClick(data) {
+      this.tableInfo = data;
+      console.log(data)
+      this.tableInfo.structureList = [];
+      findStructureByTableId(data.id).then(res=>{
+        this.tableInfo.structureList=res.data;
+      })
+      this.tableInfo.taskId = this.$route.params.id;
+    },
+
+    nb(){
+      console.log(this.tableInfo.structureList)
+    },
+
+    //弹出选择表界面给树状下拉框赋值
+    findTAbleInfoList(){
+      findTableInfoList().then(res=>{
+        this.data=res.data;
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findTAbleInfoList();
+    this.tableInfo.taskId = this.$route.params.id;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/components/task/formDataOut.vue

@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <!--    数据输出表单-->
+    <span v-if="taskDataOutPut">
+      <el-button @click="nb"></el-button><br>
+
+      <span v-for="(outPut,index) in dataOutPut.tableAsField.split(',')">
+         <el-checkbox :label=outPut :value=outPut v-model="twoInputList">字段名： {{ outPut }} 字段别名：{{dataOutPut.tableField.split(',')[index]}}</el-checkbox><br>
+      </span>
+
+      <el-select  v-model="dataOutPut.tableName" placeholder="请选择数据库">
+          <el-aside width="100%">
+            <el-option style="height: 100%" :value="dataOutPut.tableName">
+              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+            </el-option>
+          </el-aside>
+      </el-select>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="taskDataOutPut = false">取消</el-button>
+        <el-button type="primary" @click="toSelectField()">确 定</el-button>
+      </div>
+    </span>
+
+<!--    选择目标字段-->
+    <span v-if="selectField">
+
+
+      <span v-for="(two,index) in twoInputList">
+        {{two}}
+        <el-select v-model="target[index]" placeholder="请选择">
+          <el-option v-for="item in columnList" :label="item.columnName" :value="item.columnName"></el-option>
+        </el-select>
+        <br>
+      </span>
+<!--        <el-table-->
+<!--          :data="twoInputList" style="width: 100%" max-height="250">-->
+<!--            <el-table-column label="输入字段" width="100">-->
+
+<!--              <template slot-scope="scope">-->
+<!--                <span style="margin-left: 10px">{{ scope.row}}</span>-->
+<!--              </template>-->
+<!--            </el-table-column>-->
+
+<!--            <el-table-column label="目标字段" width="100">-->
+
+
+<!--            </el-table-column>-->
+
+
+<!--        </el-table>-->
+
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="back()">上一步</el-button>
+        <el-button type="primary" @click="addOutput()">确 定</el-button>
+      </div>
+
+    </span>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
+import { addTaskOutPut, findByNodeId } from '@/api/task/task'
+import item from '@/layout/components/Sidebar/Item.vue'
+import fa from 'element-ui/src/locale/lang/fa'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props:['graph','nodeId','nodeName','taskId','taskDataOutPut','columnList','neighbors'],
+  data() {
+    //这里存放数据"
+
+    return {
+
+      //树状图
+      data:[],
+      selectField:false,
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+
+      dataOutPut:{},
+
+      oneInputList:{},
+      tableAsField:'',
+      tableField:'',
+      basicId:'',
+      tableId:'',
+      twoInputList:[],
+      target:[],
+      columnList:[],
+      oneNode:{},
+      twoNode:{},
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {
+    fa() {
+      return fa
+    }
+  },
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //
+    addOutput(){
+      addTaskOutPut({
+        "taskId":this.taskId,
+        "newFileName":this.target.toString(),
+        "lastFileName":this.twoInputList.toString(),
+        "tableId":this.tableId,
+        "basicId":this.basicId,
+      }).then(res=>{
+        alert(res.msg)
+      });
+    },
+
+    //选择需要的字段后去选择对应数据库的表
+    toSelectField(){
+      this.taskDataOutPut = false;
+      this.selectField = true;
+
+    },
+
+    nb(){
+      this.findTAbleInfoList();
+    },
+
+    //弹出选择表界面给树状下拉框赋值
+    findTAbleInfoList(){
+      findTableInfoList().then(res=>{
+        this.data=res.data;
+      })
+
+      this.tableAsField="";
+      findByNodeId(this.neighbors[0]).then(res=>{
+        this.oneNode = res.data;
+
+        console.log(this.oneNode)
+      })
+      if(this.neighbors[0] !=null){
+
+      }
+      findByNodeId(this.neighbors[1]).then(res=>{
+        if(res.data == null){
+          this.dataOutPut.tableField = this.oneNode.tableField
+          return;
+        }
+        this.twoNode = res.data;
+      })
+
+      this.dataOutPut.tableField = this.oneNode.tableField + ',' + this.twoNode.tableField
+      this.dataOutPut.tableAsField = this.oneNode.tableAsField + ',' + this.twoNode.tableAsField
+    },
+
+    //返回上一步
+    back(){
+      this.taskDataOutPut = true;
+      this.selectField = false;
+    },
+
+
+    //选择要将数据存入的表中
+    handleNodeClick(data) {
+      console.log('amanaman')
+      console.log(data)
+      this.tableId = data.id
+      this.basicId = data.basicId
+      findStructureByTableId(data.id).then((res)=>{
+        this.columnList=res.data;
+      })
+    },
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findTAbleInfoList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/components/task/formJoin.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <!--    联查模块表单-->
+    <span v-if="taskInputJoin">
+      <el-form  label-width="80px" :model="formJoin" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
+        <el-form-item label="联查方式">
+           <el-select  v-model="formJoin.joinType" placeholder="请选择">
+              <el-option style="height: 100%" label="左联查" value="left join"/>
+              <el-option style="height: 100%" label="右联查" value="right join"/>
+              <el-option style="height: 100%" label="内联查" value="inner join"/>
+           </el-select>
+        </el-form-item>
+        <br>
+
+        <el-form-item label="关联字段">
+           <el-select  v-model="formJoin.leftJoinField" placeholder="请选择">
+             <span v-for="item in oneFieldList.split(',')">
+               <el-option style="height: 100%"
+                          :label="item"
+                          :value="item"
+                          :key="item"/>
+             </span>
+
+           </el-select>
+
+          <el-select  v-model="formJoin.rightJoinField" placeholder="请选择">
+             <span v-for="item in twoFieldList.split(',')">
+               <el-option style="height: 100%"
+                          :label="item"
+                          :value="item"
+                          :key="item"/>
+             </span>
+
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="taskInputJoin  == false">取消</el-button>
+        <el-button type="primary" @click="saveTaskJoin()">确 定</el-button>
+      </div>
+
+
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="taskInputAdd = false">取 消</el-button>-->
+<!--        <el-button type="primary" @click="addTaskInput()">下一步</el-button>-->
+<!--      </div>-->
+    </span>
+  </div>
+</template>
+
+<script>
+import { addTaskJoin, findByNodeId } from '@/api/task/task'
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props:['graph','nodeId','nodeName','taskId','taskInputJoin','neighbors'],
+  data() {
+    //这里存放数据"
+
+    return {
+      taskInputJoin: true,
+      formJoin: {},
+      leftId:null,
+      rightId:null,
+      oneFieldList:'',
+      twoFieldList:'',
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //添加任务联查方式
+    saveTaskJoin(){
+      this.taskInputJoin = false;
+      this.$emit('saveTaskJoin', false);
+      addTaskJoin(
+        {
+          "nodeId":this.nodeId,
+          "nodeName":this.nodeName,
+          "taskId":this.taskId,
+          "leftId":this.leftId,
+          "joinType":this.formJoin.joinType,
+          "rightId":this.rightId,
+          "leftJoinField":this.formJoin.leftJoinField,
+          "rightJoinField":this.formJoin.rightJoinField
+        }
+      ).then(res=>{
+        alert(res.msg);
+      })
+    },
+
+    //拿到连线节点的数据
+    findAllTable(){
+      findByNodeId(this.neighbors[0]).then(res=>{
+        this.oneFieldList = res.data.tableAsField;
+        this.leftId = res.data.nodeId;
+        console.log(this.oneFieldList)
+      })
+      findByNodeId(this.neighbors[1]).then(res=>{
+        this.twoFieldList = res.data.tableAsField;
+        this.rightId = res.data.nodeId;
+        console.log(this.twoFieldList)
+      })
+    },
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findAllTable();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/components/task/rule/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-form ref="form" label-width="80px">
+      <el-form-item label="选择规则级别">
+        <el-select v-model="ruleRank" @change="selectVersionById" placeholder="请选择规则级别">
+          <el-option label="数据集" value="3"></el-option>
+          <el-option label="行" value="2"></el-option>
+          <el-option label="字段" value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择规则级别">
+        <el-select v-model="ruleId" placeholder="请选择规则级别">
+          <el-option
+            v-for="item in ruleList"
+            :key="item.id"
+            :label="item.versionName"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="findByTableId">确定</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-dialog
+      title="选择字段"
+      :visible.sync="ruleOpen"
+      width="70%">
+      <el-select v-model="tableFieAsId" @change="configAdd" placeholder="请选择规则级别">
+        <el-option
+          v-for="item in fieList"
+          :key="item.tableFieId"
+          :label="item.tableFieAsId"
+          :value="item.tableFieId">
+        </el-option>
+      </el-select>
+      <el-button @click="addNodeRule">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+
+
+import { addNodeRule } from '@/api/task/task'
+import { selectEngineList } from '@/api/engine/engine'
+import { getVersionById } from '@/api/version/version'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: ["nodeId"],
+  data() {
+    //这里存放数据"
+
+    return {
+      ruleOpen: false,
+      fieList: [],
+      ruleList: [],
+      ruleRank: null,
+      ruleId: null,
+      tableFieAsId: null,
+      config: null,
+      tableFieId : null,
+      taskId:this.$route.params.id,
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    configAdd(val){
+      let obj ={"key":this.tableFieAsId};
+      this.config = JSON.stringify(obj);
+    },
+    addNodeRule(){
+      addNodeRule({"nodeId":this.nodeId,"taskId":this.taskId,"ruleId":this.ruleId,"config":this.config}).then(res => {
+
+        this.$emit('ruleDestroy', false)
+      })
+    },
+    cancel() {
+      this.$emit('ruleDestroy', false)
+    },
+    findByTableId() {
+      console.log(this.taskId)
+      // findByTableFieName(this.taskId).then(res => {
+      //
+      //   let list = res.data;
+      //   console.log(list)
+      //   let newList = [];
+      //
+      //   list.forEach(item => {
+      //     let tableFieIdList = item.tableFieId.split(',');
+      //     let tableAsFieIdList = item.tableAsFieId.split(',');
+      //
+      //     tableFieIdList.forEach((tableFieId, index) => {
+      //       newList.push({
+      //         tableFieId: tableFieId,
+      //         tableAsFieId: tableAsFieIdList[index]
+      //       });
+      //     });
+      //   });
+      //
+      //   //console.log(newList);
+      //   this.fieList = newList;
+      //   this.ruleOpen = true;
+      // })
+    },
+    selectVersionById(id){
+      console.log(id)
+      getVersionById(id).then(res => {
+        //.log(res.data)
+        this.ruleList = res.data;
+        console.log(this.ruleList)
+        console.log('aa')
+      })
+    }
+
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/engine/engine/index.vue

@@ -0,0 +1,704 @@
+<template>
+
+  <div>
+
+    <el-form label-width="80px" :model="engineReq" :inline="true" class="demo-form-inline" size="small">
+
+      <el-form-item label="规则名称">
+
+        <el-input v-model="engineReq.name"></el-input>
+
+      </el-form-item>
+
+      <el-form-item label="规则类型">
+
+        <el-select v-model="engineReq.type" placeholder="请选择类型">
+
+          <el-option label="字段类型" value="1"></el-option>
+
+          <el-option label="基本类型" value="2"></el-option>
+
+          <el-option label="引用类型" value="3"></el-option>
+
+          <el-option label="时间类型" value="4"></el-option>
+
+          <el-option label="转换类型" value="5"></el-option>
+
+        </el-select>
+
+      </el-form-item>
+
+      <el-form-item label="是否激活">
+
+        <el-select v-model="engineReq.isActivate" placeholder="是否激活">
+
+          <el-option label="已激活" value="1"></el-option>
+
+          <el-option label="未激活" value="2"></el-option>
+
+        </el-select>
+
+      </el-form-item>
+
+      <el-form-item label="规则状态">
+
+        <el-select v-model="engineReq.status" placeholder="规则状态">
+
+          <el-option label="开启" value="1"></el-option>
+
+          <el-option label="关闭" value="2"></el-option>
+
+        </el-select>
+
+      </el-form-item>
+
+      <el-button @click="select()">
+
+        查询
+      </el-button>
+
+      <el-button @click="clears()">
+
+        重置
+
+      </el-button>
+
+    </el-form>
+
+    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="findSelectSourceExport"
+
+               v-hasPermi="['source:data:export']">导出
+
+    </el-button>
+
+    <!--  添加按钮  /-->
+
+    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['source:data:add']">
+
+      新增
+
+    </el-button>
+
+    <!-- 添加或修改规则引擎对话框 -->
+
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
+
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+
+        <el-row>
+
+          <el-col :span="12">
+
+            <el-form-item label="规则名称" prop="name">
+
+              <el-input v-model="form.name" placeholder="请输入规则名称"/>
+
+            </el-form-item>
+
+          </el-col>
+
+          <el-col :span="12">
+
+            <el-form-item label="规则编码" prop="engineCode">
+
+              <el-input v-model="form.engineCode" placeholder="请输入规则编码"/>
+
+            </el-form-item>
+
+          </el-col>
+
+        </el-row>
+
+        <el-row>
+
+          <el-col :span="12">
+
+            <el-form-item label="规则类型" prop="type">
+
+              <el-select v-model="form.type" placeholder="请选择规则类型" style="width: 100%">
+
+                <el-option
+
+                  v-for="dict in dict.type.rule_engine_type"
+
+                  :key="dict.value"
+
+                  :label="dict.label"
+
+                  :value="Number(dict.value)"
+
+                ></el-option>
+
+              </el-select>
+
+            </el-form-item>
+
+          </el-col>
+
+          <el-col :span="12">
+
+            <el-form-item label="规则级别" prop="scope">
+
+              <el-select v-model="form.scope" placeholder="请选择规则级别" style="width: 100%">
+
+                <el-option
+
+                  v-for="dict in dict.type.rule_engine_level"
+
+                  :key="dict.value"
+
+                  :label="dict.label"
+
+                  :value="Number(dict.value)"
+
+                ></el-option>
+
+              </el-select>
+
+            </el-form-item>
+
+          </el-col>
+
+        </el-row>
+
+        <el-row>
+
+          <el-col :span="12">
+
+            <el-form-item label="是否激活" prop="isActivate">
+
+              <el-radio-group v-model="form.isActivate">
+
+                <el-radio
+
+                  v-for="dict in dict.type.rule_engine_activate_status"
+
+                  :key="dict.value"
+
+                  :label="dict.value"
+
+                >{{ dict.label }}
+
+                </el-radio>
+
+              </el-radio-group>
+
+            </el-form-item>
+
+          </el-col>
+
+          <el-col :span="12">
+
+            <el-form-item label="规则状态" prop="status">
+
+              <el-radio-group v-model="form.status">
+
+                <el-radio
+
+                  v-for="dict in dict.type.sys_normal_disable"
+
+                  :key="dict.value"
+
+                  :label="dict.value"
+
+                >{{ dict.label }}
+
+                </el-radio>
+
+              </el-radio-group>
+
+            </el-form-item>
+
+          </el-col>
+
+        </el-row>
+
+        <el-row>
+
+          <el-col :span="24">
+
+            <el-form-item label="规则描述">
+
+              <editor v-model="form.description" :min-height="192"/>
+
+            </el-form-item>
+
+          </el-col>
+
+          <el-col :span="24">
+
+            <el-form-item label="备注" prop="remark">
+
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
+
+            </el-form-item>
+
+          </el-col>
+
+        </el-row>
+
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+
+      </div>
+
+    </el-dialog>
+
+    <el-table :data="arr" style="width: 100%">
+
+      <el-table-column label="编号" prop="id"></el-table-column>
+
+      <el-table-column label="名称" prop="name"></el-table-column>
+
+      <el-table-column label="类型" style="color: #13ce66" prop="type">
+
+        <template v-slot="scope">
+
+          <span v-if="scope.row.type==1">数据字段</span>
+
+          <span v-if="scope.row.type==2">基本类型</span>
+
+          <span v-if="scope.row.type==3">时间类型</span>
+
+          <span v-if="scope.row.type==4">普通类型</span>
+
+          <span v-if="scope.row.type==4">介入类型</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="作用域" style="color: blue" prop="scope">
+
+        <template v-slot="scope">
+
+          <span v-if="scope.row.scope==1">数据字段</span>
+
+          <span v-if="scope.row.scope==2">记录</span>
+
+          <span v-if="scope.row.scope==3">数据集</span>
+
+          <span v-if="scope.row.scope==4">数据类型</span>
+
+          <span v-if="scope.row.scope==5">日志</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="引擎编码" prop="engineCode"></el-table-column>
+
+      <el-table-column label="是否激活" style="color: red" prop="isActivate">
+
+        <template v-slot="scope">
+
+          <span v-if="scope.row.isActivate==1">已激活</span>
+
+          <span v-if="scope.row.isActivate==2">未激活</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="状态" style="color: #787be8" prop="status">
+
+        <template v-slot="scope">
+
+          <span v-if="scope.row.status==1">开启</span>
+
+          <span v-if="scope.row.status==2">关闭</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="描述" prop="description"></el-table-column>
+
+      <el-table-column align="right">
+
+        <template slot-scope="scope">
+
+          <el-button
+
+            icon="el-icon-delete"
+
+            size="mini"
+
+            type="text"
+
+            @click="handleDelete(scope.row.id)">删除
+          </el-button>
+
+          <el-button
+
+            icon="el-icon-service"
+
+            size="mini"
+
+            type="text"
+
+            @click="handleUpdate(scope.row)">修改规则配置
+          </el-button>
+
+          <el-button
+
+            icon="el-icon-service"
+
+            size="mini"
+
+            type="text"
+
+            @click="engineRuleMaintenance(scope.row)">规则维护
+
+          </el-button>
+
+        </template>
+
+      </el-table-column>
+
+    </el-table>
+
+    <!--    分页-->
+
+    <el-pagination
+
+      @size-change="handleSizeChange"
+
+      @current-change="handleCurrentChange"
+
+      :current-page="engineReq.pageNum"
+
+      :page-sizes="[1, 2, 3, 4, 5]"
+
+      :page-size="engineReq.pageSize"
+
+      layout="total, sizes, prev, pager, next, jumper"
+
+      :total="total">
+
+    </el-pagination>
+
+  </div>
+
+</template>
+
+<script>
+
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+
+import {del, insert, selectEngineList, update} from "@/api/engine/engine";
+
+
+export default {
+
+  name: "maintenance",
+
+  dicts: ['rule_engine_activate_status', 'rule_engine_type', 'sys_normal_disable', 'rule_engine_level'],
+
+  //import引入的组件需要注入到对象中才能使用"
+
+  components: {},
+
+  props: {},
+
+  data() {
+
+    //这里存放数据"
+
+    return {
+
+      engineReq: {
+
+        pageNum: 1,
+
+        pageSize: 5
+
+      },
+      engine: {},
+
+      title: "",
+
+      arr: [],
+
+      dialogFormVisible: false,
+
+      total: 0,
+
+      form: {},
+
+      open: false,
+
+      // 表单校验
+
+      rules: {
+
+        name: [
+
+          {required: true, message: "规则名称不能为空", trigger: "blur"}
+
+        ],
+
+        type: [
+
+          {required: true, message: "规则类型不能为空", trigger: "change"}
+
+        ],
+
+        engineCode: [
+
+          {required: true, message: "规则编码不能为空", trigger: "blur"}
+
+        ],
+
+        isActivate: [
+
+          {required: true, message: "是否激活不能为空", trigger: "change"}
+
+        ],
+
+        status: [
+
+          {required: true, message: "规则状态不能为空", trigger: "change"}
+
+        ],
+
+        createBy: [
+
+          {required: true, message: "创建者不能为空", trigger: "blur"}
+
+        ],
+
+        createTime: [
+
+          {required: true, message: "创建时间不能为空", trigger: "blur"}
+
+        ],
+
+      }
+
+    };
+
+  },
+
+  //计算属性 类似于data概念",
+
+  computed: {},
+
+  //监控data中的数据变化",
+
+  watch: {},
+
+  //方法集合",
+
+  methods: {
+
+    handleSizeChange(val) {
+
+      console.log(`每页 ${val} 条`);
+
+      this.engineReq.pageSize = val;
+
+      this.findSelectSourceList();
+
+    },
+
+    handleCurrentChange(val) {
+
+      console.log(`当前页: ${val}`);
+
+      this.engineReq.pageNum = val;
+
+      this.findSelectSourceList();
+
+    },
+
+    findSelectSourceList() {
+
+      selectEngineList(this.engineReq).then(res => {
+
+        this.arr = res.data.list;
+
+        this.total = res.data.total;
+
+      })
+
+    },
+
+    handleDelete(id) {
+
+      if (confirm("是否删除这条数据？")) {
+
+        del(id).then(res => {
+
+          //判断删除是否成功
+
+          this.$message.success(res.msg || "删除成功")
+
+        })
+
+      }
+
+    },
+
+    findSelectSourceExport() {
+
+      this.download('engine/engine/export', {
+
+          ...this.engineReq
+
+        },
+
+        `source_${new Date().getTime()}.xlsx`)
+
+    },
+
+    select() {
+
+      this.findSelectSourceList();
+
+    },
+
+    /** 新增按钮操作 */
+
+    handleAdd() {
+
+      this.open = true;
+
+      this.title = "添加规则引擎";
+
+    },
+
+    /** 修改按钮操作 */
+
+    handleUpdate(row) {
+
+      this.form = row;
+
+      this.open = true;
+
+      this.title = "修改规则引擎";
+
+    },
+
+    /** 提交按钮 */
+
+    submitForm() {
+
+      this.$refs["form"].validate(valid => {
+
+        if (valid) {
+
+          if (this.form.id != null) {
+
+            update(this.form).then(response => {
+
+              this.$modal.msgSuccess("修改成功");
+
+              this.findSelectSourceList();
+
+              this.open = false;
+
+            })
+
+          } else {
+
+            insert(this.form).then(response => {
+
+              this.$modal.msgSuccess("新增成功");
+
+              this.findSelectSourceList();
+
+              this.open = false;
+
+            })
+
+          }
+
+        }
+
+      });
+
+    },
+
+    engineRuleMaintenance(row) {
+
+      this.$router.push({
+
+        path: 'list',
+
+        query: {"id": row.id}
+
+      })
+
+    },
+
+    clears() {
+
+      this.engineReq = {
+
+        name: '',
+
+        type: '',
+
+        isActivate: '',
+
+        status: ''
+
+      };
+
+    }
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+
+  created() {
+
+    this.findSelectSourceList();
+
+  },
+
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+
+  mounted() {
+
+  },
+
+  beforeCreate() {
+
+  }, //生命周期 - 创建之前",
+
+  beforeMount() {
+
+  }, //生命周期 - 挂载之前",
+
+  beforeUpdate() {
+
+  }, //生命周期 - 更新之前",
+
+  updated() {
+
+  }, //生命周期 - 更新之后",
+
+  beforeDestroy() {
+
+  }, //生命周期 - 销毁之前",
+
+  destroyed() {
+
+  }, //生命周期 - 销毁完成",
+
+  activated() {
+
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+
+};
+
+</script>
+
+<style scoped>
+
+</style>

src/views/engine/engine/list.vue

@@ -0,0 +1,556 @@
+<template>
+
+  <div>
+
+    <el-button type="text" @click="addVersion()">新增</el-button>
+
+    <el-dialog title="添加版本信息" :visible.sync="dialogFormVisible">
+
+      <el-form :model="versions">
+
+        <el-form-item label="版本类名" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.versionClass" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本名称" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.name" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本编码" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.versionCode" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="是否激活" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.isActivate" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本状态" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.status" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="是否测试" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.testStatus" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本描述" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.description" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <div v-show="opens">
+
+          <codemirror v-model="versions.ruleContent" :value="this.versions.ruleContent" :options="cmOptions">
+
+          </codemirror>
+
+        </div>
+
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+
+        <el-button @click=closes()>取 消</el-button>
+
+        <el-button type="primary" @click=handleInsert()>确 定</el-button>
+
+        <el-button type="primary" @click=showCode(versions)>生成引擎类</el-button>
+
+      </div>
+
+    </el-dialog>
+
+    <el-table :data="maintenance.engineMaintenanceList" style="width: 100%">
+
+      <el-table-column prop="versionClass" label="版本类名"></el-table-column>
+
+      <el-table-column prop="name" label="版本名称"></el-table-column>
+
+      <el-table-column prop="versionCode" label="版本编码"></el-table-column>
+
+      <el-table-column prop="isActivate" label="是否激活">
+
+        <template v-slot="scope">
+
+          <span v-if="scope.row.isActivate==1">正常</span>
+
+          <span v-if="scope.row.isActivate==2">停用</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column prop="status" label="版本状态">
+
+        <template v-slot="scope">
+
+          <span v-if="scope.row.status===1">正常</span>
+
+          <span v-if="scope.row.status===2">异常</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column prop="testStatus" label="版本测试状态">
+
+        <template v-slot="scope">
+
+          <span v-if="scope.row.testStatus===1">数据字段</span>
+
+          <span v-if="scope.row.testStatus===2">数据类型</span>
+
+          <span v-if="scope.row.testStatus===3">数据格式</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column fixed="right" label="操作" width="120">
+
+        <template slot-scope="scope">
+
+          <el-button v-show="scope.row.isActivate==1" @click="forbiddenEngines(scope.row.id)" type="text" size="small">
+
+            关闭引擎
+
+          </el-button>
+
+          <el-button v-show="scope.row.isActivate==2" @click="onEngines(scope.row.id)" type="text" size="small">
+
+            开启引擎
+
+          </el-button>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column fixed="right" label="操作" width="120">
+
+        <template slot-scope="scope">
+
+          <el-button @click.native.prevent="selectEngineById(scope.row.id)" type="text" size="small">
+
+            规则详情
+
+          </el-button>
+
+        </template>
+
+      </el-table-column>
+
+    </el-table>
+
+    <!--回显-->
+
+    <el-dialog title="测试" :visible.sync="versionFormVisible">
+
+      <el-form :model="versions">
+
+        <el-form-item label="版本类名" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.versionClass" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本名称" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.name" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本编码" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.versionCode" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="是否激活" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.isActivate" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本状态" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.status" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本测试" :label-width="formLabelWidth">
+
+          <el-input v-model="versions.testStatus" disabled autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <div v-show="opens">
+
+          <codemirror v-model="versions.ruleContent" :value="this.versions.ruleContent" :options="cmOptions">
+
+          </codemirror>
+
+        </div>
+
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+
+        <el-button type="primary" @click="back()">确 定</el-button>
+
+        <el-button type="primary" @click="testEngine()">测试</el-button>
+
+      </div>
+
+    </el-dialog>
+
+  </div>
+
+</template>
+
+<script>
+
+import {
+
+  add,
+
+  dels,
+
+  findById,
+
+  forbiddenEngine,
+
+  generate,
+
+  onEngine,
+
+  sel,
+
+  selectEngineById,
+
+  testData
+
+} from "@/api/engine/engine";
+
+import Java from "@/components/JavaIDE.vue/java.vue";
+
+import {codemirror} from 'vue-codemirror'
+
+import "codemirror/theme/ambiance.css";
+
+import source from "@/views/assets/source/index.vue";
+
+import {selectSourceList} from "@/api/etl/switch"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
+
+require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
+
+export default {
+
+  computed: {
+
+    source() {
+
+      return source
+
+    }
+
+  },
+
+  dicts: ['rule_engine_activate_status', 'rule_engine_type', 'sys_normal_disable', 'rule_engine_level'],
+
+  //import引入的组件需要注入到对象中才能使用"
+
+  components: {
+
+    codemirror,
+
+    Java
+
+  },
+
+  props: {},
+
+  data() {
+
+    //这里存放数据"
+
+    return {
+
+      engines: [],
+
+      versionFormVisibles: false,
+
+      datas: {
+
+        source: []
+
+      },
+
+      dialogTableVisible: false,
+
+      direction: 'rtl',
+
+      versionFormVisible: false,
+
+      maintenance: {
+
+        engineMaintenanceList: [],
+
+      },
+
+      opens: false,
+
+      title: "",
+
+      open: false,
+
+      handleClose: false,
+
+      versions: {
+
+        isActivate: '未激活',
+
+        testStatus: '未测试',
+
+        status: '初始化',
+
+        ruleContent: ''
+
+      },
+
+      cmOptions: {
+
+        lineNumbers: true, // 显示行号
+
+        mode: 'text/x-yaml', // 语法model
+
+        gutters: ['CodeMirror-lint-markers'], // 语法检查器
+
+        theme: "ambiance",
+
+        lint: true, // 开启语法检查
+
+      },
+
+      size: '',
+
+      dialogFormVisible: false,
+
+      formLabelWidth: '120px',
+
+      arr: []
+
+    }
+
+  },
+
+  methods: {
+
+    testEngine() {
+
+      testData(this.versions).then(res => {
+
+        this.$message.success(res.msg || "成功")
+
+      })
+
+    },
+
+    closes() {
+
+      this.dialogFormVisible = false;
+
+    },
+
+    showCode() {
+
+      this.opens = true
+
+      this.versions.isActivate = 1
+
+      this.versions.testStatus = 1
+
+      this.versions.status = 1
+
+      this.versions.id = this.$route.query.id
+
+      generate(this.versions).then(res => {
+
+        this.versions.ruleContent = res.ruleContent;
+
+        this.$message.success(res.msg || "成功");
+
+      })
+
+    },
+
+    //添加弹窗
+
+    addVersion() {
+
+      this.versions = {},
+
+        this.versions.isActivate = '未激活',
+
+        this.versions.testStatus = '未测试',
+
+        this.versions.status = '初始化';
+
+      this.dialogFormVisible = true
+
+    },
+
+    back() {
+
+      this.versionFormVisible = false;
+
+    },
+
+    //根据id查询回显
+
+    selectEngineById(id) {
+
+      this.versionFormVisible = true;
+
+      sel(id).then(res => {
+
+        this.versions = res.data;
+
+      })
+
+    },
+
+    handleInsert() {
+
+      this.dialogFormVisible = false;
+
+      this.versions.isActivate = 1
+
+      this.versions.testStatus = 1
+
+      this.versions.status = 1
+
+      add(this.versions).then(res => {
+
+        this.$message.success(res.msg || "新增成功")
+
+      })
+
+      this.List();
+
+    },
+
+    onEngines(id) {
+
+      onEngine(id).then(res => {
+
+        this.$message.success(res.msg || "开启成功")
+
+      })
+
+      this.List();
+
+    },
+
+    forbiddenEngines(id) {
+
+      forbiddenEngine(id).then(res => {
+
+        this.$message.success(res.msg || "关闭成功")
+
+      })
+
+      this.List();
+
+    },
+
+    selectSourceList() {
+
+      selectSourceList({}).then(res => {
+
+        this.engines = res.data;
+
+      })
+
+    },
+
+    List() {
+
+      findById(this.maintenance.id).then(res => {
+
+        this.maintenance.engineMaintenanceList = res.data
+
+      })
+
+    },
+
+    selectEngine() {
+
+      selectEngineById(this.maintenance.id).then(res => {
+
+        this.arr = res.data
+
+      })
+
+    },
+
+    del(id) {
+
+      if (confirm("你确定删除吗?")) {
+
+        dels(id).then(res => {
+
+          this.$message.success(res.msg || "删除成功");
+
+        })
+
+      }
+
+    }
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+
+  created() {
+
+    this.maintenance.id = this.$route.query.id
+
+    this.List();
+
+    this.selectEngine();
+
+    this.selectSourceList();
+
+  }
+
+}
+</script>
+
+<style scoped>
+
+.information-box >>> .CodeMirror {
+
+  font-family: monospace;
+
+  height: 71vh;
+
+  direction: ltr;
+
+}
+
+</style>
+
+

src/views/etl/accredit/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <el-container>
+      <el-aside width="30%">
+        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+      </el-aside>
+
+
+
+
+      <el-main>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>资产详情</span>
+          </div>
+
+          <table>
+            <tr><td>表名称:</td><td>{{ tableBasic.tableName }}</td></tr>
+            <tr><td>表备注:</td><td>{{ tableBasic.tableRemark }}</td></tr>
+            <tr><td>数据量:</td><td>{{ tableBasic.dataNum }}</td></tr>
+            <tr><td>是否核心:</td><td><dict-tag :options="dict.type.yes_no" :value="tableBasic.isCenter"/></td></tr>
+          </table>
+
+
+
+
+
+
+
+
+<!--          <el-descriptions class="margin-top" title="带边框列表" :column="2"  border>-->
+<!--            <el-descriptions-item>-->
+<!--              <template slot="label">表名称</template>-->
+<!--              {{ tableBasic.tableName }}-->
+<!--            </el-descriptions-item>-->
+<!--            <el-descriptions-item>-->
+<!--              <template slot="label">表备注</template>-->
+<!--              {{ tableBasic.tableRemark }}-->
+<!--            </el-descriptions-item>-->
+<!--            <el-descriptions-item>-->
+<!--              <template slot="label">数据量</template>-->
+<!--              {{ tableBasic.dataNum }}-->
+<!--            </el-descriptions-item>-->
+<!--            <el-descriptions-item>-->
+<!--              <template slot="label">是否核心</template>-->
+<!--              <dict-tag :options="dict.type.yes_no" :value="tableBasic.isCenter"/>-->
+<!--            </el-descriptions-item>-->
+
+<!--          </el-descriptions>-->
+
+        </el-card>
+
+
+        <el-card>
+          <el-table
+            :data="DataValue"
+            style="width: 100%">
+            <el-table-column
+              prop="key"
+              label="key"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="label"
+              label="label"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="type"
+              label="type">
+            </el-table-column>
+            <el-table-column
+              prop="value"
+              label="value">
+            </el-table-column>
+          </el-table>
+<!--          <div v-for="data in DataValue">-->
+<!--            {{data.key}}-->
+<!--            <el-descriptions title="数据" direction="vertical" :column="4" border>-->
+<!--              <el-descriptions-item label="用户名">{{data.type}}</el-descriptions-item>-->
+<!--              <el-descriptions-item label="手机号">{{data.value}}</el-descriptions-item>-->
+<!--            </el-descriptions>-->
+<!--          </div>-->
+        </el-card>
+
+      </el-main>
+      </el-container>
+
+
+
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {findTableValueList} from "@/api/etl/switch";
+import {findTableInfoListAccredit} from "@/api/etl/switch";
+import {findStructureByTableId} from "@/api/etl/switch";
+export default {
+  dicts: ['yes_no'],
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      DataValue:[],
+
+      data:{
+
+      },
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+      tableBasic:{
+
+      },
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    findTAbleInfoList(){
+      findTableInfoListAccredit().then(res=>{
+        this.data=res.data;
+      })
+    },
+    handleNodeClick(data) {
+      this.tableBasic=data
+      if (data.children==null){
+        findTableValueList(data.basicId,data.tableName).then(res=>{
+          this.DataValue=res.data;
+        })
+      }
+      console.log(data);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findTAbleInfoList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+

src/views/etl/assets/index.vue

@@ -0,0 +1,157 @@
+<template>
+
+  <div>
+
+
+
+    <el-container>
+      <el-aside width="30%">
+        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+      </el-aside>
+
+        <el-main>
+          <el-card class="box-card">
+
+            <div slot="header" class="clearfix">
+              <span>资产模型基本信息</span>
+            </div>
+
+            <table>
+              <tr><td>表名称:</td><td>{{ tableBasic.tableName }}</td></tr>
+              <tr><td>表备注:</td><td>{{ tableBasic.tableRemark }}</td></tr>
+              <tr><td>数据量:</td><td>{{ tableBasic.dataNum }}</td></tr>
+              <tr><td>是否核心:</td><td><dict-tag :options="dict.type.yes_no" :value="tableBasic.isCenter"/></td></tr>
+            </table>
+
+<!--            <el-descriptions class="margin-top" title="带边框列表" :column="2"  border>-->
+<!--              <el-descriptions-item>-->
+<!--                <template slot="label">表名称</template>-->
+<!--                {{ tableBasic.tableName }}-->
+<!--              </el-descriptions-item>-->
+<!--              <el-descriptions-item>-->
+<!--                <template slot="label">表备注</template>-->
+<!--                {{ tableBasic.tableRemark }}-->
+<!--              </el-descriptions-item>-->
+<!--              <el-descriptions-item>-->
+<!--                <template slot="label">数据量</template>-->
+<!--                {{ tableBasic.dataNum }}-->
+<!--              </el-descriptions-item>-->
+<!--              <el-descriptions-item>-->
+<!--                <template slot="label">是否核心</template>-->
+<!--                <dict-tag :options="dict.type.yes_no" :value="tableBasic.isCenter"/>-->
+<!--              </el-descriptions-item>-->
+
+<!--            </el-descriptions>-->
+
+          </el-card>
+
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>资产模型详细信息</span>
+            </div>
+            <el-table
+              :data="tableData" style="width: 100%">
+              <el-table-column label="名称" prop="columnName"></el-table-column>
+              <el-table-column label="注释" prop="columnRemark"></el-table-column>
+              <el-table-column label="是否主键" prop="isPrimary">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.yes_no" :value="scope.row.isPrimary"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="类型" prop="columnType"></el-table-column>
+              <el-table-column label="映射类型" prop="javaType"></el-table-column>
+              <el-table-column label="长度" prop="columnLength"></el-table-column>
+              <el-table-column label="小数位" prop="columnDecimals"></el-table-column>
+              <el-table-column label="是否为空" prop="isNull">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.yes_no" :value="scope.row.isNull"/>
+                </template>
+              </el-table-column>
+            </el-table>
+
+          </el-card>
+
+          </el-main>
+
+
+
+    </el-container>
+
+
+
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {findTableInfoList} from "@/api/etl/switch";
+import {findStructureByTableId} from "@/api/etl/switch";
+export default {
+  dicts: ['yes_no'],
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      tableData:[],
+      tableBasic:{
+
+      },
+      form:{
+
+      },
+      data:[],
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    findTAbleInfoList(){
+      findTableInfoList().then(res=>{
+          this.data=res.data;
+      })
+    },
+    handleNodeClick(data) {
+      this.tableBasic=data
+      findStructureByTableId(data.id).then((res)=>{
+          this.tableData=res.data;
+      })
+      console.log(data);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findTAbleInfoList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+

src/views/etl/limits/index.vue

@@ -0,0 +1,306 @@
+<template>
+  <div>
+    <el-container>
+      <el-aside width="30%">
+        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+      </el-aside>
+
+<!--      {-->
+<!--      "dataResourceName": "黑鬼",-->
+<!--      "dataBaseName": "text",-->
+<!--      "tableNameB": "engine_version",-->
+<!--      "dataNum": 4,-->
+<!--      "tableRemark": "",-->
+<!--      "dataSourceSystemName": null-->
+<!--      }-->
+
+      <el-main>
+
+        <el-card class="box-card">
+
+          <el-descriptions title="基本信息">
+            <el-descriptions-item label="数据接入名称">{{tableBasic.dataResourceName}}</el-descriptions-item>
+            <el-descriptions-item label="系统名称">{{tableBasic.dataSourceSystemName}}</el-descriptions-item>
+            <el-descriptions-item label="数据库名称">{{tableBasic.dataBaseName}}</el-descriptions-item>
+            <el-descriptions-item label="表名称">{{tableBasic.tableNameB}}</el-descriptions-item>
+            <el-descriptions-item label="表中文名称">{{tableBasic.tableRemark}}</el-descriptions-item>
+            <el-descriptions-item label="数据量">{{tableBasic.dataNum}}</el-descriptions-item>
+          </el-descriptions>
+
+        </el-card>
+
+        <el-card>
+
+
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="部门授权" name="first">
+
+              <el-table
+                v-if="refreshTable"
+                v-loading="loading"
+                :data="deptList"
+                :default-expand-all="isExpandAll"
+                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+                row-key="deptId"
+              >
+                <el-table-column label="部门名称" prop="deptName" width="260"></el-table-column>
+                <el-table-column label="部门负责人" prop="leader" width="200"></el-table-column>
+                <el-table-column label="邮箱" prop="email" width="200"></el-table-column>
+                <el-table-column align="center" label="创建时间" prop="createTime" width="200">
+                  <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="状态" prop="status" width="200"></el-table-column>
+
+                <el-table-column label="状态" width="200">
+                  <template slot-scope="scope">
+                    <el-switch
+                      v-model="scope.row.status"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      :active-value='0'
+                      :inactive-value='1'
+                      active-text="已授权"
+                      inactive-text="未授权"
+                      @change="updateDeptStatus(scope.row)"
+                    >
+                    </el-switch>
+                  </template>
+                </el-table-column>-->
+
+
+              </el-table>
+
+
+            </el-tab-pane>
+
+
+            <el-tab-pane label="用户授权" name="second">
+
+              <el-table
+                :data="userList"
+              >
+                <el-table-column label="用户名称" prop="userName" width="260"></el-table-column>
+                <el-table-column label="用户昵称" prop="nickName" width="200"></el-table-column>
+                <el-table-column label="用户部门" prop="deptName" width="200"></el-table-column>
+                <el-table-column label="用户邮箱" prop="email" width="200"></el-table-column>
+                <el-table-column label="用户手机号" prop="phoneNumber" width="200"></el-table-column>
+                <el-table-column align="center" label="创建时间" prop="createTime" width="200">
+                  <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="状态" width="200">
+                  <template slot-scope="scope">
+                    <el-switch
+                      v-model="scope.row.status"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      :active-value='0'
+                      :inactive-value='1'
+                      @change="updateDeptStatus(scope.row)"
+                    >
+                    </el-switch>
+                  </template>
+                </el-table-column>-->
+
+
+              </el-table>
+
+
+            </el-tab-pane>
+
+
+
+
+
+
+            <!--            <el-tab-pane label="用户授权" name="second">-->
+<!--                <el-table-->
+<!--                  v-if="refreshTable"-->
+<!--                  v-loading="loading"-->
+<!--                  :data="deptList"-->
+<!--                  :default-expand-all="isExpandAll"-->
+<!--                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"-->
+<!--                  row-key="deptId"-->
+<!--                >-->
+<!--                  <el-table-column label="用户名称" prop="deptName" width="260"></el-table-column>-->
+<!--                  <el-table-column label="用户昵称" prop="orderNum" width="200"></el-table-column>-->
+<!--                  <el-table-column label="用户名称" prop="orderNum" width="200"></el-table-column>-->
+<!--                  <el-table-column label="用户部门" prop="orderNum" width="200"></el-table-column>-->
+<!--                  <el-table-column label="用户邮箱" prop="orderNum" width="200"></el-table-column>-->
+<!--                  <el-table-column label="用户手机号" prop="orderNum" width="200"></el-table-column>-->
+<!--                  <el-table-column label="创建时间" prop="orderNum" width="200"></el-table-column>-->
+<!--                  <template slot-scope="scope">-->
+<!--                    <el-switch-->
+<!--                      v-model="scope.row.status"-->
+<!--                      active-color="#13ce66"-->
+<!--                      inactive-color="#ff4949"-->
+<!--                      active-value="0"-->
+<!--                      inactive-value="1">-->
+<!--                    </el-switch>-->
+<!--                  </template>-->
+
+<!--                </el-table>-->
+<!--              </el-tab-pane>-->
+
+
+          </el-tabs>
+
+
+        </el-card>
+
+      </el-main>
+    </el-container>
+
+
+
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+
+import {findDeptListStatus, findTableValueList, findUserListStatus} from "@/api/etl/switch";
+import {findTableInfoList} from "@/api/etl/switch";
+import {findAccredit} from "@/api/etl/switch";
+import {addMiddle} from "@/api/etl/switch";
+import {remove} from "@/api/etl/switch";
+import {shouldAdd} from "script-ext-html-webpack-plugin/lib/custom-attributes";
+
+
+// import {findStructureByTableId} from "@/api/etl/switch";
+export default {
+  dicts: ['yes_no'],
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+    return {
+      accredit:{
+        deptId:'',
+        basicId:'',
+        tableId:'',
+        userId:'',
+      },
+
+      userList:[
+
+      ],
+      activeName: 'first',
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 遮罩层
+      loading: true,
+      //表单树数据
+      deptList:[
+
+      ],
+      DataValue:[],
+
+      data:{
+
+      },
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+      tableBasic:{
+
+      },
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    updateDeptStatus(row){
+
+        this.accredit.deptId=row.deptId
+        this.accredit.userId=row.userId
+
+        if (row.status===0){
+          addMiddle(this.accredit).then(res=>{
+            if (res.code===200){
+              alert("授权成功")
+            }
+          })
+        }
+
+        if (row.status===1){
+          remove(this.accredit).then(res=>{
+            if (res.code===200){
+              alert("取消授权成功")
+            }
+          })
+        }
+
+      console.log(row);
+    },
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    findTAbleInfoList(){
+      findTableInfoList().then(res=>{
+        this.data=res.data;
+      })
+    },
+    handleNodeClick(data) {
+      this.accredit.tableId = data.id;
+      this.accredit.basicId = data.basicId;
+      this.loading = true;
+      // if (data.children==null){
+      findDeptListStatus(data.id, data.basicId).then(res => {
+        this.deptList = this.handleTree(res.data, "deptId");
+        this.loading = false;
+      })
+      findUserListStatus(data.id, data.basicId).then(res => {
+        this.userList = res.data;
+      })
+      findAccredit(data.id).then(res => {
+        this.tableBasic = res;
+      })
+    // }
+
+      console.log(data);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findTAbleInfoList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+

src/views/etl/switch/index.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="app-container">
+    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
+      <el-form-item label="数据来源名称" prop="name">
+        <el-input
+          v-model="queryParams.dataSourcesSystemName"
+          clearable
+          placeholder="请输入数据来源名称"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="存放数据库名称" prop="databaseName">
+        <el-input
+          v-model="queryParams.databaseName"
+          clearable
+          placeholder="请输入存放数据库名称"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" size="mini" type="primary" @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
+          v-hasPermi="['system:post:add']"
+          icon="el-icon-plus"
+          plain
+          size="mini"
+          type="primary"
+          @click="handleAdd"
+        >新增
+        </el-button>
+      </el-col>
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          v-hasPermi="['system:post:remove']"-->
+      <!--          :disabled="multiple"-->
+      <!--          icon="el-icon-delete"-->
+      <!--          plain-->
+      <!--          size="mini"-->
+      <!--          type="danger"-->
+      <!--          @click="handleDelete"-->
+      <!--        >删除-->
+      <!--        </el-button>-->
+      <!--      </el-col>-->
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['system:post:export']"
+          icon="el-icon-download"
+          plain
+          size="mini"
+          type="warning"
+          @click="handleExport"
+        >导出
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+      <el-table-column align="center" type="selection" width="55"/>
+      <el-table-column align="name" label="数据来源名称" prop="dataSourcesSystemName"/>
+      <el-table-column align="ip" label="数据来源地址" prop="host"/>
+      <el-table-column align="port" label="来源地址端口号" prop="port"/>
+      <el-table-column align="type" label="数据接入类型" prop="databaseType"/>
+      <el-table-column align="databaseName" label="存放数据库名称" prop="databaseName"/>
+      <el-table-column align="center" label="是否初始化" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.yes_no" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
+        <template slot-scope="scope">
+          <el-button
+            v-hasPermi="['system:post:remove']"
+            icon="el-icon-delete"
+            size="mini"
+            type="text"
+            @click="handleDelete(scope.row)"
+          >删除
+          </el-button>
+
+          <el-button
+            icon="el-icon-caret-right"
+            size="mini"
+            type="text"
+            @click="connectDataSources(scope.row)"
+          >测试
+          </el-button>
+
+          <el-button
+            v-hasPermi="['system:post:remove']"
+            icon="el-icon-edit"
+            size="mini"
+            type="text"
+            @click="handleUpdate(scope.row)"
+          >修改
+          </el-button>
+
+          <el-button
+            v-hasPermi="['system:post:remove']"
+            icon="el-icon-paperclip"
+            size="mini"
+            type="text"
+            @click="syncAssetStructure(scope.row)"
+          >同步资产结构
+          </el-button>
+
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="60%">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="true" class="demo-form-inline">
+        <el-form-item label="接入来源系统名称" prop="dataSourcesSystemName">
+          <el-input v-model="form.dataSourcesSystemName" placeholder="请输入数据来源系统名称"/>
+        </el-form-item>
+        <el-form-item label="ip" prop="host">
+          <el-input v-model="form.host" placeholder="请输入ip"/>
+        </el-form-item>
+        <el-form-item label="port" prop="port">
+          <el-input v-model="form.port" placeholder="请输入port"/>
+        </el-form-item>
+        <el-form-item label="type" prop="databaseType">
+          <el-select v-model="form.databaseType" placeholder="请选择类型">
+            <el-option label="mysql" value="mysql"></el-option>
+            <el-option label="redis" value="redis"></el-option>
+            <el-option label="oracle" value="oracle"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据库名称" prop="databaseName">
+          <el-input v-model="form.databaseName" placeholder="请输入数据库名称"/>
+        </el-form-item>
+        <el-form-item label="userName" prop="username">
+          <el-input v-model="form.username" placeholder="请输入数据库用户"/>
+        </el-form-item>
+        <el-form-item label="userPwd" prop="password">
+          <el-input v-model="form.password" placeholder="请输入数据库密码"/>
+        </el-form-item>
+      </el-form>
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>数据连接参数</span>
+        </div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
+          <el-form-item label="数据连接参数" prop="name">
+            <el-input v-model="form.connectionParams" placeholder="请输入数据连接参数"/>
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>连接池配置</span>
+        </div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="true" class="demo-form-inline">
+          <el-form-item label="初始连接数量" prop="initCount">
+            <el-input v-model="form.initLinkNum" placeholder="初始连接数量"/>
+          </el-form-item>
+          <el-form-item label="最大连接数量" prop="maxCount">
+            <el-input v-model="form.maxLinkNum" placeholder="最大连接数量"/>
+          </el-form-item>
+          <el-form-item label="最大等待时间" prop="maxTime">
+            <el-input v-model="form.maxWaitTime" placeholder="最大等待时间"/>
+          </el-form-item>
+          <el-form-item label="最大等待次数" prop="initCount">
+            <el-input v-model="form.maxWaitTimes" placeholder="最大等待次数"/>
+          </el-form-item>
+
+
+        </el-form>
+      </el-card>
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>其他信息</span>
+        </div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="true" class="demo-form-inline">
+          <el-form-item label="是否初始化" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio
+                v-for="dict in dict.type.yes_no"
+                :key="dict.value"
+                :label="dict.value"
+              >{{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input type="textarea" v-model="form.remark"></el-input>
+          </el-form-item>
+
+        </el-form>
+      </el-card>
+
+      <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 {
+  selectSourceList,
+  insertAdd,
+  connectDataSources,
+  deleteDataSourcesById,
+  syncAssetStructure, update, getInfo, connectionTest, structure, deleteSource
+} from "@/api/etl/switch";
+
+export default {
+  name: "switch",
+  dicts: ['sys_normal_disable','yes_no'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      dataList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined,
+        databaseName: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dataSourcesSystemName: [{required: true, message: "数据来源名称不能为空", trigger: "blur"}],
+        host: [{required: true, message: "数据来源ip不能为空", trigger: "blur"}],
+        port: [{required: true, message: "来源地址端口号不能为空", trigger: "blur"}],
+        databaseType: [{required: true, message: "类型不能为空", trigger: "change"}],
+        initLinkNum: [{required: true, message: "初始连接数量不能为空", trigger: "blur"}],
+        maxLinkNum: [{required: true, message: "最大连接数量不能为空", trigger: "blur"}],
+        maxWaitTime: [{required: true, message: "最大等待时间不能为空", trigger: "blur"}],
+        maxWaitTimes: [{required: true, message: "最大等待次数不能为空", trigger: "blur"}],
+        status: [{required: true, message: "是否初始化不能为空", trigger: "change"}],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    syncAssetStructure(row){
+      connectionTest(row).then((res)=>{
+        console.log(res)
+        if (res.code===200){
+          this.$modal.msgSuccess("同步成功");
+        }else {
+          this.$modal.msgError("同步失败");
+        }
+      })
+    },
+
+    /** 连接数据源 */
+    connectDataSources(row){
+      structure(row).then(res=>{
+        if (res.code===200){
+          this.$modal.msgSuccess("连接成功");
+        }else {
+          this.$modal.msgError("连接失败");
+        }
+      })
+    },
+
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      selectSourceList(this.queryParams).then(response => {
+        this.dataList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+        console.log(response)
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      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
+      getInfo(id).then(response => {
+        this.form = response.data;
+
+        this.open = true;
+        this.title = "修改岗位";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          alert(this.form.id)
+          if (this.form.id != undefined) {
+            update(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            insertAdd(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id || this.ids;
+      this.$modal.confirm('是否确认删除该数据项？').then(function () {
+        return deleteSource(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('source/source/export', {
+        ...this.queryParams
+      }, `post_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/login.vue

@@ -49,9 +49,7 @@
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div v-if="register" style="float: right;">
           <router-link :to="'/register'" class="link-type">立即注册</router-link>
-        </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
@@ -73,7 +71,7 @@ export default {
       codeUrl: "",
       loginForm: {
         username: "admin",
-        password: "admin123",
+        password: "123456",
         rememberMe: false,
         code: "",
         uuid: ""
@@ -89,14 +87,12 @@ export default {
       },
       loading: false,
       // 验证码开关
-      captchaEnabled: true,
+      captchaEnabled: false,
       // 注册开关
       register: true,
       redirect: undefined
     };
   },
-
-
   watch: {
     $route: {
       handler: function (route) {

src/views/management/secure/index.vue

@@ -0,0 +1,385 @@
+<template>
+  <div>
+    <h1 style="text-align: center; margin-bottom: 30px;">安全设置</h1>
+    <el-divider></el-divider>
+
+    <div class="container">
+      <div class="card left-card">
+        <el-card style="margin-top: 50px;">
+          <h2>登录密码</h2>
+          <div class="container">
+            <label>安全性高的密码可以使帐号更安全.建议你定期更换密码,设置6-20位登录密码</label>
+            <div class="button-wrapper">
+              <button @click="openModal">修改密码</button>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <div class="card right-card">
+        <el-card style="margin-top: 50px;">
+          <h2>手机号码</h2>
+          <label>安全手机可以用于登录帐号，重置密码或其他安全验证</label>
+          <button @click="openCurrentPhoneModal">修改手机号</button>
+
+          <!-- 输入当前手机号的弹出框 -->
+          <div v-if="isCurrentPhoneModalVisible" class="modal-overlay">
+            <div class="modal-content">
+              <h3>当前手机号</h3>
+              <div>旧手机号({{ user.phonenumber }})</div>
+              <button @click="sendVerificationCode">发送验证码</button>
+              <button @click="closeCurrentPhoneModal">取消</button>
+            </div>
+          </div>
+
+          <!-- 输入验证码的弹出框 -->
+          <div v-if="isVerificationModalVisible" class="modal-overlay">
+            <div class="modal-content">
+              <h3>输入验证码</h3>
+              <input v-model="code" placeholder="验证码" />
+              <button @click="verCode">验证并输入新手机号</button>
+              <button @click="closeVerificationModal">取消</button>
+            </div>
+          </div>
+
+
+          <!-- 输入新手机号的弹出框 -->
+          <div v-if="isNewPhoneModalVisible" class="modal-overlay">
+            <div class="modal-content">
+              <h3>输入新手机号</h3>
+              <input v-model="newPhone" placeholder="新手机号" @input="validatePhone" />
+              <p v-if="phoneError" style="color: red" class="error">{{ phoneError }}</p>
+              <button @click="updatePhoneNumber">提交修改</button>
+              <button @click="closeNewPhoneModal">取消</button>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <div>
+      <el-card>
+        <img src="/123456789.jpg" style="width: 40%; height: auto;" alt="Big Image">
+      </el-card>
+    </div>
+
+    <!-- 弹出框 -->
+    <div v-if="showModal" class="modal">
+      <div class="modal-content">
+        <h2>身份验证</h2>
+        <el-divider></el-divider>
+
+        <!-- 手机号和验证码 -->
+        <div v-if="!verificationSent">
+          <label for="phonenumber">身份验证方式:</label>
+          <div><h3>通过手机({{ user.phonenumber }})获取验证</h3></div>
+          <button @click="sendCode">发送验证码</button>
+        </div>
+
+        <div v-if="verificationSent && !codeVerified">
+          <label for="code">验证码:</label>
+          <input v-model="code" id="code" type="text" placeholder="请输入验证码" />
+          <button @click="verifyCode">验证验证码</button>
+        </div>
+
+        <div v-if="codeVerified">
+          <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+            <el-form-item label="旧密码" prop="oldPassword">
+              <el-input v-model="user.oldPassword" placeholder="请输入旧密码" show-password type="password"/>
+            </el-form-item>
+            <el-form-item label="新密码" prop="newPassword">
+              <el-input v-model="user.newPassword" placeholder="请输入新密码" show-password type="password"/>
+            </el-form-item>
+            <el-form-item label="确认密码" prop="confirmPassword">
+              <el-input v-model="user.confirmPassword" placeholder="请确认新密码" show-password type="password"/>
+            </el-form-item>
+          </el-form>
+          <button @click="submit" :disabled="!user.newPassword">提交修改</button>
+        </div>
+        <button @click="closeModal" class="close-button">关闭</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import {getUserProfile,sendCode,checkCode,updatePhone} from "@/api/system/user";
+import {updateUserPwd} from "@/api/system/user";
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      isVisible: false,
+      currentPhone: '',
+      newPhone: '',
+      phoneError: '',
+      verificationCode: '',
+      isCurrentPhoneModalVisible: false,
+      isVerificationModalVisible: false,
+      isNewPhoneModalVisible: false,
+      // 表单校验
+      rules: {
+        oldPassword: [
+          {required: true, message: "旧密码不能为空", trigger: "blur"}
+        ],
+        newPassword: [
+          {required: true, message: "新密码不能为空", trigger: "blur"},
+          {min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"}
+        ],
+        confirmPassword: [
+          {required: true, message: "确认密码不能为空", trigger: "blur"},
+          {required: true, validator: equalToPassword, trigger: "blur"}
+        ]
+      },
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      showModal: false,
+      aModel: false,
+      phonenumber: '',
+      code: '',
+      oldPassword: '',
+      newPassword: '',
+      verificationSent: false,
+      codeVerified: false,
+    };
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    validatePhone() {
+      const phonePattern = /^[0-9]{11}$/; // 只允许11位数字
+      if (!this.newPhone) {
+        this.phoneError = '手机号不能为空';
+      } else if (!phonePattern.test(this.newPhone)) {
+        this.phoneError = '请输入有效的11位手机号';
+      } else {
+        this.phoneError = '';
+      }
+    },
+    updatePhoneNumber() {
+      updatePhone(this.newPhone).then(response => {
+        this.closeNewPhoneModal();
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        });
+      });
+    },
+    closeNewPhoneModal() {
+      this.isNewPhoneModalVisible = false;
+    },
+    closeVerificationModal() {
+      this.isVerificationModalVisible = false;
+    },
+    sendVerificationCode() {
+      try {
+        sendCode(this.user.phonenumber)
+        this.closeCurrentPhoneModal();
+        this.isVerificationModalVisible = true;
+        alert('验证码已发送');
+      } catch (error) {
+        console.error('发送验证码失败', error);
+        alert('发送验证码失败');
+      }
+    },
+    openCurrentPhoneModal() {
+      this.isCurrentPhoneModalVisible = true;
+    },
+    closeCurrentPhoneModal() {
+      this.isCurrentPhoneModalVisible = false;
+    },
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data.sysUser;
+      });
+    },
+    openModal() {
+      this.showModal = true;
+    },
+    closeModal() {
+      this.showModal = false;
+      this.resetForm();
+    },
+    async sendCode() {
+      try {
+        sendCode(this.user.phonenumber)
+        this.verificationSent = true;
+        alert('验证码已发送');
+      } catch (error) {
+        console.error('发送验证码失败', error);
+        alert('发送验证码失败');
+      }
+    },
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
+            this.$modal.msgSuccess("修改成功");
+          });
+        }
+      });
+    },
+    async verCode() {
+      checkCode(this.user.phonenumber, this.code).then(response => {
+        if (response.code === 200) {
+          this.closeVerificationModal();
+          this.isNewPhoneModalVisible = true; // 验证成功后弹出新手机号输入框
+          alert('验证码验证成功');
+        } else {
+          alert('验证码验证失败');
+        }
+      })
+    },
+    async verifyCode() {
+      checkCode(this.user.phonenumber, this.code).then(response => {
+        if (response.code === 200) {
+          this.codeVerified = true;
+          alert('验证码验证成功');
+        } else {
+          alert('验证码验证失败');
+        }
+      })
+    }
+  },
+
+
+  resetForm() {
+    this.phonenumber = '';
+    this.code = '';
+    this.oldPassword = '';
+    this.newPassword = '';
+    this.verificationSent = false;
+    this.codeVerified = false;
+  }
+};
+</script>
+
+<style>
+/* 简单样式，仅供参考 */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button-wrapper {
+  margin-left: auto; /* 将按钮移动到右侧 */
+}
+
+
+.modal-content {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  width: 400px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+h2 {
+  margin-top: 0;
+}
+
+label {
+  display: block;
+  margin-top: 10px;
+  font-weight: bold;
+}
+
+input {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+
+.card {
+  width: 50%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.modal {
+  /* 样式设置 */
+}
+
+.modal-content {
+  /* 样式设置 */
+}
+
+.left-card {
+  background-color: #f1f1f1;
+}
+
+.right-card {
+  background-color: #e1e1e1;
+}
+
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+
+button {
+  margin-top: 20px;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+}
+
+.close-button {
+  background-color: #dc3545;
+}
+
+.close-button:hover {
+  background-color: #c82333;
+}
+</style>

src/views/management/user/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="app-container">
+    <el-row class="center-row" :gutter="20">
+      <el-col :span="12" :xs="24">
+        <el-card style="margin-top: 50px;">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar/>
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user"/>
+                用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone"/>
+                手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email"/>
+                用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree"/>
+                所属部门
+                <div v-if="user.dept" class="pull-right">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples"/>
+                职位
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date"/>
+                创建日期
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import {getUserProfile} from "@/api/system/user";
+import userAvatar from "/src/views/system/user/profile/userAvatar";
+import userInfo from "/src/views/system/user/profile/userInfo";
+import resetPwd from "/src/views/system/user/profile/resetPwd";
+
+export default {
+  name: "Profile",
+  components: {userAvatar, userInfo, resetPwd},
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: "userinfo"
+    };
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data.sysUser;
+        this.roleGroup = response.data.roleGroup;
+        this.postGroup = response.data.postGroup;
+      });
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+.app-container {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.center-row {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.box-card {
+  border: 1px solid #dcdfe6;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.list-group-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/views/money/buy/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div style="padding: 20px;">
+    <h1 style="text-align: center; margin-bottom: 30px;">消費明細</h1>
+    <el-divider></el-divider>
+    <el-form  ref="queryForm" :inline="true" :model="queryParams" size="small">
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          end-placeholder="结束日期"
+          range-separator="-"
+          start-placeholder="开始日期"
+          style="width: 240px"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-button
+        v-hasPermi="['system:purchaseRecord:export']"
+        icon="el-icon-download"
+        plain
+        size="mini"
+        type="warning"
+        @click="handleExport"
+      >导出
+      </el-button>
+    </el-row>
+
+    <el-table
+      :data="listDate"
+      style="width: 100%; border-collapse: collapse;">
+      <el-table-column
+        label="序号"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="數據名稱"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.dataName }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="消費金额"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.amount }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="消費時間"
+        width="300"
+        style="border: 1px solid #ca8a8a; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.createTime }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <el-card style="margin-top: 50px">
+      <div>
+        <!-- 装ECharts的容器 -->
+        <div id="main" style="width: 100%; height: 520px; background: #fff">
+        </div>
+      </div>
+    </el-card>
+  </div>
+
+
+</template>
+
+
+<script>
+import * as echarts from 'echarts' //引用echarts
+import { userloginfo } from "@/api/system/user";
+import PanelGroup from "@/views/dashboard/PanelGroup.vue";
+export default {
+  components: {PanelGroup},
+  data() {
+    return {
+      charts: "",
+      opinionData: [], // 数据
+      b: [],
+      dateRange: [],
+      listDate: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      }
+    }
+  },
+  created() {
+    this.getList();
+  },
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/user/purchaseRecord/export', {
+        ...this.queryParams
+      }, `pay_${new Date().getTime()}.xlsx`)
+    },
+    getList() {
+      userloginfo(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
+          this.listDate = response.data.rows;
+          this.total = response.data.total;
+          this.drawLine();
+        }
+      );},
+    drawLine() {
+      // 初始化折线图
+      this.charts = echarts.init(document.getElementById('main'));
+
+      this.b = this.listDate.map(item => item.dataName);
+      this.opinionData = this.listDate.map(item => item.amount);
+
+      // 设置折线图数据和样式
+      this.charts.setOption({
+        title: {
+          left: "3%",
+          top: "5%",
+          text: "消费趋势", // 自定义
+        },
+
+        tooltip: {
+          trigger: "axis",
+        },
+
+        legend: {
+          align: "right",
+          left: "3%",
+          top: "15%",
+          data: ["消费金额"], // 自定义
+        },
+
+        grid: {
+          top: "30%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+
+        // 自定义：设置x轴刻度
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          axisTick: {
+            alignWithLabel: true,
+          },
+          // 自定义标签
+          data:this.b
+          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+        },
+
+        // 自定义：设置y轴刻度
+        yAxis: {
+          type: "value",
+          boundaryGap: true,
+          splitNumber: 4,
+          interval: 250,
+        },
+
+        // 设置数据
+        series: [
+          {
+            name: "消费金额", // 自定义
+            type: "line",
+            stack: "总量", // 自定义
+            data: this.opinionData, // 自定义
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgb(255,200,213)",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ],
+                global: false,
+              },
+            },
+            itemStyle: {
+              color: "rgb(255,96,64)",
+              lineStyle: {
+                color: "rgb(255,96,64)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+}
+</script>

src/views/money/detail/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div style="padding: 20px;">
+    <h1 style="text-align: center; margin-bottom: 30px;">充值明细</h1>
+    <el-divider></el-divider>
+    <el-form  ref="queryForm" :inline="true" :model="queryParams" size="small">
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          end-placeholder="结束日期"
+          range-separator="-"
+          start-placeholder="开始日期"
+          style="width: 240px"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-button
+        v-hasPermi="['system:pay:export']"
+        icon="el-icon-download"
+        plain
+        size="mini"
+        type="warning"
+        @click="handleExport"
+      >导出
+      </el-button>
+    </el-row>
+
+    <el-table
+      :data="listDate"
+      style="width: 100%; border-collapse: collapse;">
+      <el-table-column
+        label="序号"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="充值编号"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.outTradeNo }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="充值金额"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.totalAmount }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="充值类型"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.productCode }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="充值时间"
+        width="300"
+        style="border: 1px solid #ca8a8a; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.createTime }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+
+<script>
+import { userPayinfo } from "@/api/system/user";
+import PanelGroup from "@/views/dashboard/PanelGroup.vue";
+export default {
+  components: {PanelGroup},
+  data() {
+    return {
+      dateRange: [],
+      listDate: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      }
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/user/export', {
+        ...this.queryParams
+      }, `pay_${new Date().getTime()}.xlsx`)
+    },
+    getList() {
+      userPayinfo(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.listDate = response.data.rows;
+          this.total = response.data.total;
+        }
+      );
+    }
+  }
+}
+</script>

src/views/money/pay/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-card class="box-card">
+    <ul class="msg-box">
+      <li>
+        <h1 style="margin-bottom: 15px;">充值说明</h1>
+        <h4>请输入支付宝沙箱账号</h4>
+        <h4>西伯利亚龙</h4>
+      </li>
+      <li>
+        <h4 style="margin-bottom: 15px;">支付金额</h4>
+        <el-radio-group v-model="amountVal" @change="amountChange">
+          <el-radio border :label="''+ 100">充值100</el-radio>
+          <el-radio border :label="''+ 500">充值500</el-radio>
+          <el-radio border :label="''+ 1000">充值1000</el-radio>
+          <el-radio border :label="''+ 2000">充值2000</el-radio>
+          <el-radio border :label="''+ 5000">充值5000</el-radio>
+          <el-radio border :label="''">自定义</el-radio>
+        </el-radio-group>
+      </li>
+      <li>
+        <h4 style="margin-bottom: 15px;">支付方式</h4>
+        <el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">
+          <el-radio border :label="''+ 1">支付宝</el-radio>
+          <el-radio border :label="''+ 0">微信</el-radio>
+        </el-radio-group>
+      </li>
+      <li>
+        <h4 style="margin-bottom: 15px;">支付金额</h4>
+        <el-input :disabled="disabled" clearable v-model="rechargeParams.totalAmt" placeholder="请输入金额" style="width: 150px;"></el-input>
+      </li>
+    </ul>
+    <div style="text-align: center; margin-top: 30px;">
+      <el-button type="primary" @click="surePay">确认支付</el-button>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { addUserMoney, userRecharge ,createRechargeRecord} from "@/api/system/user";
+export default {
+  data() {
+    return {
+      amountVal: '',
+      addSysUser: {},
+      disabled: false,
+      // 同步跳转页面地址
+      returnUrl:'http://172.13.1.1/money/money',
+      //充值参数
+      rechargeParams: {
+        "totalAmt": '', //金额
+        "paymentType": "0", //支付方式[0:微信,1:支付宝,2:余额,3:活动]
+        "transType": "0" //交易类型[0:充值,1:消费]
+      }
+    }
+  },
+  methods: {
+    //充值金额
+    amountChange(val) {
+      this.rechargeParams.totalAmt = val;
+      if (val === '') {
+        this.disabled = false
+      } else {
+        this.disabled = true
+      }
+    },
+    //支付方式
+    paymentTypeChange(val) {
+      this.rechargeParams.paymentType = val
+    },
+    //确认支付
+    async surePay() {
+      if (this.rechargeParams.totalAmt === '') {
+        this.$message.warning('请输入金额');
+        return;
+      }
+      if (this.rechargeParams.paymentType === '0') {
+
+      } else if (this.rechargeParams.paymentType === '1') {
+        let praem = {
+          // 生成一个随的订单号 方便测试
+          outTradeNo: this.getProjectNum() + Math.floor(Math.random() * 10000),
+          // 传递支付金额
+          totalAmount: this.rechargeParams.totalAmt,
+          // 传递同步跳转地址
+          returnUrl: this.returnUrl,
+          // 商品名称
+          subject: '支付金额',
+          // 支付类型
+          productCode: 'FAST_INSTANT_TRADE_PAY'
+        }
+        userRecharge(praem).then(code => {
+          if (code.code === 200) {
+            // 支付方式跳转
+            this.$message.success('支付宝支付跳转')
+            const payDiv = document.getElementById('payDiv');
+            if (payDiv) {
+              document.body.removeChild(payDiv);
+            }
+            const div = document.createElement('div');
+            div.id = 'payDiv';
+            div.innerHTML = code.data;
+            document.body.appendChild(div);
+            document.getElementById('payDiv').getElementsByTagName('form')[0].submit();
+          }
+        })
+        this.addSysUser.userBalance = this.rechargeParams.totalAmt;
+        let userId = localStorage.getItem('userId');
+        this.addSysUser.userId = userId;
+        addUserMoney(this.addSysUser).then(res => {
+          createRechargeRecord(praem);
+        }).catch(error => {
+          console.error('Error updating user balance:', error);
+        });
+      }
+    },
+    // 获取当前日期的方法
+    getProjectNum() {
+      const projectTime = new Date() // 当前中国标准时间
+      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
+      const Month = projectTime.getMonth() + 1 // 获取中国区月份
+      const Day = projectTime.getDate() // 获取几号
+      var CurrentDate = Year
+      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
+        CurrentDate += Month
+      } else {
+        CurrentDate += '0' + Month
+      }
+      if (Day >= 10) {
+        CurrentDate += Day
+      } else {
+        CurrentDate += '0' + Day
+      }
+      return CurrentDate
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 信息列表样式 */
+.msg-box > li {
+  list-style: none;
+  border-bottom: 1px solid #c5c5c5;
+  padding: 20px 10px;
+}
+</style>

src/views/money/user/index.vue

@@ -0,0 +1,288 @@
+<template>
+  <div>
+    <el-card style="margin-top: 50px;">
+      <h1>用户余额</h1>
+      <p>余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
+      <el-button type="primary" @click="navigateToRecharge">充值</el-button>
+      <el-dialog
+        title="实名认证"
+        :visible.sync="dialogVisible"
+        width="30%"
+        @close="handleDialogClose"
+      >
+        <el-form :model="authForm" :rules="rules" ref="authFormRef">
+          <el-form-item label="姓名" :label-width="formLabelWidth">
+            <el-input v-model="authForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="身份证号" :label-width="formLabelWidth">
+            <el-input v-model="authForm.idCard"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleCancel">取消</el-button>
+          <el-button type="primary" @click="handleConfirm">确认</el-button>
+        </div>
+      </el-dialog>
+    </el-card>
+
+
+    <el-card style="margin-top: 50px">
+      <!-- Form -->
+      <h1>余额预警</h1>
+      <el-button type="text" @click="dialogFormVisible = true">开启</el-button>
+      <el-dialog title="添加预警号码" :visible.sync="dialogFormVisible">
+        <el-divider style="border-color: #00afff;">
+          <el-tag content-position="right" type="warning">
+            账户可用余额小于该值时,每天短信通知一次(最多连续提醒5天)
+          </el-tag>
+        </el-divider>
+        <el-form :model="form">
+          <el-form-item label="预警阈值：" :label-width="formLabelWidth">
+            <el-input v-model="form.userBalance" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="预警号码：" :label-width="formLabelWidth">
+            <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-card>
+
+
+    <el-card style="margin-top: 50px">
+      <div>
+        <!-- 装ECharts的容器 -->
+        <div id="main" style="width: 100%; height: 520px; background: #fff">
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {userBalance,months} from "@/api/system/user"; //
+import * as echarts from 'echarts' //引用echarts
+import {checkRealNameAuth} from "@/api/system/user";
+import item from "@/layout/components/Sidebar/Item.vue";
+
+export default {
+  data() {
+    return {
+      charts: "",
+      dialogVisible: false,
+      listDate:[],
+      a:[],
+      b:[],
+      dialogFormVisible: false,
+      formLabelWidth: '120px',
+      opinionData: [],
+      userBalanceData: {
+        userBalance: '加载中...'
+      },
+      authForm: {
+        name: '',
+        idCard: ''
+      },
+      rules: {
+        name: [
+          {required: true, message: '请输入姓名', trigger: 'blur'},
+          {min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur'}
+        ],
+        idCard: [
+          {required: true, message: '请输入身份证号', trigger: 'blur'},
+          {pattern: /^\d{17}[\dXx]$/, message: '身份证号格式不正确', trigger: 'blur'}
+        ],
+      },
+      form: {}
+    };
+  },
+  created() {
+    this.fetchUserBalance();
+    this.getList()
+  },
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    getList(){
+      months().then(response => {
+        const responseDate = response;
+         responseDate.forEach(item => {
+            console.log('月',item.month, '总金额:', item.totalAmount)
+         });
+         this.listDate = responseDate;
+         this.drawLine();
+         this.$nextTick( () => {
+           console.log(JSON.stringify(this.listDate))
+         });
+      });
+    },
+    handleCancel() {
+      this.dialogVisible = false;
+    },
+    handleDialogClose() {
+      this.authForm.name = '';
+      this.authForm.idCard = '';
+    },
+    async navigateToRecharge() {
+      try {
+        const response = await checkRealNameAuth(this.authForm);
+        if (response.data && response.data.desc) {
+          // 如果已实名认证，直接跳转页面
+          this.$router.push('/money/zfb');
+        } else {
+          // 如果未实名认证，显示对话框
+          this.dialogVisible = true;
+        }
+      } catch (error) {
+        this.$message.error('实名认证检查失败，请稍后再试');
+        console.error('实名认证检查失败:', error);
+      }
+    },
+    async handleConfirm() {
+      this.$refs.authFormRef.validate(async (valid) => {
+        if (valid) {
+          try {
+            const {name, idCard} = this.authForm;
+            const authResponse = await checkRealNameAuth(this.authForm);
+            if (authResponse.data && authResponse.data.desc) {
+              this.$message.success('实名认证成功');
+              this.dialogVisible = false;
+              this.$router.push('/money/zfb');
+            } else {
+              this.$message.error('实名认证失败，请检查您的信息');
+            }
+          } catch (error) {
+            this.$message.error('实名认证验证失败，请稍后再试');
+            console.error('实名认证验证失败:', error);
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+
+    },
+    async fetchUserBalance() {
+      try {
+        const userId = localStorage.getItem('userId');
+        console.log(userId)// 登录后把userId存到了localStorage
+        if (!userId) {
+          this.userBalanceData = {userBalance: '未登录'};
+          return;
+        }
+        const response = await userBalance(userId);
+        if (response.data) {
+          console.log(response.data)
+          this.userBalanceData.userBalance = response.data;
+        } else {
+          this.userBalanceData.userBalance = {userBalance: '获取失败'};
+        }
+      } catch (error) {
+        this.userBalanceData = {userBalance: '获取失败'};
+        console.error('Error fetching user balance:', error);
+      }
+    },
+    drawLine() {
+      // 初始化折线图
+      this.charts = echarts.init(document.getElementById('main'));
+
+
+      this.a = this.listDate.map(item => item.month)
+      this.b = this.listDate.map(item => item.totalAmount)
+
+      // 设置折线图数据和样式
+      this.charts.setOption({
+        title: {
+          left: "3%",
+          top: "5%",
+          text: "近12月消费趋势", // 自定义
+        },
+
+        tooltip: {
+          trigger: "axis",
+        },
+
+        legend: {
+          align: "right",
+          left: "3%",
+          top: "15%",
+          data: ["消费金额"], // 自定义
+        },
+
+        grid: {
+          top: "30%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+
+        // 自定义：设置x轴刻度
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          axisTick: {
+            alignWithLabel: true,
+          },
+          // 自定义标签
+          data: this.a,
+        },
+
+        // 自定义：设置y轴刻度
+        yAxis: {
+          type: "value",
+          boundaryGap: true,
+          splitNumber: 4,
+          interval: 250,
+        },
+
+        // 设置数据
+        series: [
+          {
+            name: "消费金额", // 自定义
+            type: "line",
+            stack: "总量", // 自定义
+            data: this.b,
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgb(255,200,213)",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ],
+                global: false,
+              },
+            },
+            itemStyle: {
+              color: "rgb(255,96,64)",
+              lineStyle: {
+                color: "rgb(255,96,64)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

src/views/port/port/assets.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <el-form :model="form" label-width="80px">
+      <el-form-item>
+        <input v-model="form.userName" style="padding: 10px 10px;float: initial;" placeholder=请输入要查询的用户名>
+        <input v-model="form.connectorName" style="padding: 10px 10px;float: initial;margin-left: 20px" placeholder=请输入要查询的接口名称>
+        <el-button @click="findConnectorUserList()" style="padding: 10px 20px;margin-left: 40px">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <p style="font-weight: bold;font-size: 20px">余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        label="编号"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorUserId }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="用户"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="接口"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="剩余次数"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorResidueDegree }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="购买次数"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorFrequency }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="测试次数"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.textNumber }}</span>
+        </template>
+      </el-table-column>
+
+<!--      <el-table-column label="操作">-->
+<!--        <template slot-scope="scope">-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="danger"-->
+<!--            @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+    </el-table>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {findConnectorUserList} from "@/api/port/port";
+import {userBalance} from "@/api/system/user";
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      userBalanceData: {
+        userBalance: '加载中...'
+      },
+      tableData:[],
+      form:{},
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    findConnectorUserList(){
+      findConnectorUserList(this.form).then((res)=>{
+        console.log(res.data);
+        this.tableData=res.data;
+      })
+    },
+    async fetchUserBalance() {
+      try {
+        const userId = localStorage.getItem('userId');
+        console.log(userId)// 登录后把userId存到了localStorage
+        if (!userId) {
+          this.userBalanceData = {userBalance: '未登录'};
+          return;
+        }
+        const response = await userBalance(userId);
+        if (response.data) {
+          console.log(response.data)
+          this.userBalanceData.userBalance = response.data;
+        } else {
+          this.userBalanceData.userBalance = {userBalance: '获取失败'};
+        }
+      } catch (error) {
+        this.userBalanceData = {userBalance: '获取失败'};
+        console.error('Error fetching user balance:', error);
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.fetchUserBalance();
+    this.findConnectorUserList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/port/port/employee.vue

@@ -0,0 +1,597 @@
+<template>
+  <div>
+    <el-container style="height: 1000px; border: 1px solid #eee">
+      <el-aside width="180px">
+        <el-menu :default-openeds="['1', '3']">
+          <el-menu-item-group>
+            <span style="font-weight: bold;font-size: 25px;">全部类型：</span>
+          </el-menu-item-group>
+          <el-menu-item-group >
+            <el-link type="primary" style="font-weight: bold;font-size: 20px;"  v-for="(connectSort, index) in connectSort"
+                     :key="index"
+            @click="findApiList(connectSort.connectorSort)">
+              {{ connectSort.connectorSort }}
+            </el-link>
+          </el-menu-item-group>
+        </el-menu>
+      </el-aside>
+
+      <el-container>
+        <el-main>
+          <el-form label-width="40px" :model="form">
+            <el-form-item>
+              <input v-model="form.connectorName" style="padding: 10px 10px;float: initial;" placeholder=请输入关键字>
+              <el-button @click="findApiList()" style="padding: 10px 20px;margin-left: 40px">查询</el-button>
+
+            </el-form-item>
+          </el-form>
+          <el-row :gutter="50">
+            <el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
+              <el-card class="box-card" style="margin-top: 15px;width: 400px; height: 600px;" shadow="hover">
+                <div slot="header" class="clearfix">
+                  <span style="font-weight: bold;font-size: 30px">{{connector.connectorName}}</span>
+                  <el-button type="primary" style="float: right; padding: 10px 10px" @click="buy(connector)">购买</el-button>
+                </div>
+                <span style="font-weight: bold;font-size: 20px">产品图片:</span><br>
+                <el-image style="width: 300px; height: 300px" :src="connector.connectorPicture" :fit="fit"></el-image><br>
+                <span style="font-weight: bold;font-size: 20px">产品介绍：</span>
+                {{connector.connectorDescribe}}<br>
+                <span style="font-weight: bold;font-size: 20px">价格：</span>
+                {{connector.connectorPrice}}/次<br>
+
+<!--                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">测试API</el-button>-->
+<!--                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">测试API</el-button>-->
+<!--                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">测试API</el-button>-->
+<!--                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">测试API</el-button>-->
+<!--                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>-->
+<!--                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>-->
+<!--                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeatherForecast()" v-if="connector.connectorName=='天气预报'">测试API</el-button>-->
+
+
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="navigateToDocumentation(connector.connectorId)">点击申请</el-button>
+
+
+<!--                <el-button-->
+<!--                  type="primary"-->
+<!--                  style="float: right; padding: 10px 10px"-->
+<!--                  @click="navigateToDocumentation(connector)"-->
+<!--                >-->
+<!--                  接口文档-->
+<!--                </el-button>-->
+
+              </el-card>
+            </el-col>
+          </el-row>
+          <!--    手机号查询归属地-->
+          <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
+            <el-form :model="formInline">
+              <el-form-item label="手机号" :label-width="formLabelWidth">
+                <el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
+              </el-form-item>
+              <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
+        省份：{{this.formInline.province}}<br>
+        城市：{{this.formInline.city}}<br>
+        区号：{{this.formInline.areacode}}<br>
+        邮编：{{this.formInline.zip}}<br>
+        运营商：{{this.formInline.company}}<br>
+        </span>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="phonePlace()">发起请求</el-button>
+            </div>
+          </el-dialog>
+
+          <!--IP查询归属地-->
+          <el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
+            <el-form :model="formIp">
+              <el-form-item label="IP" >
+                <el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
+              </el-form-item>
+              <span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
+        国家：{{this.formIp.country}}<br>
+        省份：{{this.formIp.province}}<br>
+        城市：{{this.formIp.city}}<br>
+        运营商：{{this.formIp.isp}}<br>
+        </span>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="getIpPlace()">发起请求</el-button>
+            </div>
+          </el-dialog>
+          <!--    新闻头条-->
+          <el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
+            <el-table :data="gridData">
+              <el-table-column property="title" label="新闻标题" width="150"></el-table-column>
+              <el-table-column property="date" label="新闻时间" width="200"></el-table-column>
+              <el-table-column property="category" label="新闻分类"></el-table-column>
+              <el-table-column property="authorName" label="新闻来源"></el-table-column>
+            </el-table>
+          </el-dialog>
+
+          <!--生辰助手-->
+          <el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
+            <el-form :model="formBirthday">
+              <el-form-item label="年" >
+                <el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
+              </el-form-item>
+
+              <el-form-item label="月" >
+                <el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
+              </el-form-item>
+
+              <el-form-item label="日" >
+                <el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
+              </el-form-item>
+
+              <el-form-item label="时" >
+                <el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
+              </el-form-item>
+              <span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
+                   years： {{this.formBirthday.years}}<br>
+                   months： {{this.formBirthday.months}}<br>
+                   days： {{this.formBirthday.days}}<br>
+                   animal： {{this.formBirthday.animal}}<br>
+                   imonthcn： {{this.formBirthday.imonthcn}}<br>
+                   idaycn： {{this.formBirthday.idaycn}}<br>
+                   cyear： {{this.formBirthday.cyear}}<br>
+                   cmonth： {{this.formBirthday.cmonth}}<br>
+                   cday： {{this.formBirthday.cday}}<br>
+                   gzyear： {{this.formBirthday.gzyear}}<br>
+                   gzmonth： {{this.formBirthday.gzmonth}}<br>
+                   gzday： {{this.formBirthday.gzday}}<br>
+                   isleap： {{this.formBirthday.isleap}}<br>
+                   ncweek： {{this.formBirthday.ncweek}}<br>
+                   isterm： {{this.formBirthday.isterm}}<br>
+                   term： {{this.formBirthday.term}}<br>
+                   astro： {{this.formBirthday.astro}}<br>
+                   eightall： {{this.formBirthday.eightall}}<br>
+                   fiveall： {{this.formBirthday.fiveall}}
+              </span>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="getBirthday()">发起请求</el-button>
+            </div>
+          </el-dialog>
+
+          <!--邮编查询-->
+          <el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
+            <el-form :model="formPostCode">
+              <el-form-item label="邮编" >
+                <el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
+              </el-form-item>
+              <el-table :data="gridData2" v-if="formPostCode.reason==true">
+                <el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
+                <el-table-column property="province" label="省" width="200"></el-table-column>
+                <el-table-column property="city" label="市"></el-table-column>
+                <el-table-column property="district" label="区"></el-table-column>
+                <el-table-column property="address" label="县"></el-table-column>
+              </el-table>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="getPostcode()">发起请求</el-button>
+            </div>
+          </el-dialog>
+
+          <!--    气象预警-->
+          <el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
+            <el-aside width="100%">
+              <el-tree :data="data" :props="defaultProps">
+                <template slot-scope="{data,node}">
+                  <span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
+                </template>
+              </el-tree>
+            </el-aside>
+          </el-dialog>
+          <!--天气预报-->
+          <el-dialog title="天气预报" :visible.sync="dialogFormVisible6">
+            <el-form :model="formWeatherForecast">
+              <el-form-item label="城市名" >
+                <el-input v-model="formWeatherForecast.cityName" autocomplete="off" placeholder="请输入城市名"></el-input>
+              </el-form-item>
+              <span style="font-weight: bold;font-size: 20px" v-if="formWeatherForecast.reason==true">
+                城市：{{this.formWeatherForecast.city}}<br>
+                天气：{{this.formWeatherForecast.info}}<br>
+                温度：{{this.formWeatherForecast.temperature}}<br>
+                湿度：{{this.formWeatherForecast.humidity}}<br>
+                风向：{{this.formWeatherForecast.direct}}<br>
+                风力：{{this.formWeatherForecast.power}}<br>
+                空气质量：{{this.formWeatherForecast.aqi}}<br>
+              </span>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="getWeatherForecast(cityName)">发起请求</el-button>
+            </div>
+          </el-dialog>
+          <!--  购买-->
+          <el-dialog title="购买API" :visible.sync="dialogFormVisible5">
+            <el-form :model="buyForm">
+              <el-form-item label="产品编号" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="产品名称" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="产品介绍" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="产品价格" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="产品公司" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="API_URL" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="API_EYE" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="请求方式" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
+
+              <el-form-item label="购买次数" :label-width="formLabelWidth">
+                <el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
+              </el-form-item>
+              <p style="font-weight: bold;font-size: 20px">余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
+              <span style="font-weight: bold;font-size: 20px">共计：{{buyForm.connectorPrice*buyForm.connectorFrequency}}元</span>
+
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="buyInterface()">购 买</el-button>
+            </div>
+          </el-dialog>
+        </el-main>
+      </el-container>
+    </el-container>
+<!--    <el-button type="primary">+申请新数据</el-button>-->
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {findApiList} from "@/api/port/port";
+import index from "vuex";
+import {phonePlace} from "@/api/port/port";
+import {getIpPlace} from "@/api/port/port";
+import {getHeadlines} from "@/api/port/port";
+import {getBirthday} from "@/api/port/port";
+import {getPostcode} from "@/api/port/port";
+import {getWeather} from "@/api/port/port";
+import {doBuyInterface} from "@/api/port/port";
+import {userBalance} from "@/api/system/user";
+import {findConnectSort} from "@/api/port/port";
+import {getWeatherForecast} from "@/api/port/port";
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      userBalanceData: {
+        userBalance: '加载中...'
+      },
+      formWeatherForecast:{
+        cityName:"",
+        city:"",
+        info:"",
+        temperature:"",
+        humidity:"",
+        direct:"",
+        power:"",
+        aqi:"",
+        reason:"",
+      },
+      formWeather:{},
+      data:[],
+      defaultProps: {
+        children:"citys",
+        label:'provinceName',
+      },
+      connectSort:[],
+      connectorList:[],
+      gridData:[],
+      gridData2:[],
+      form:{
+        connectorSort:"",
+      },
+      // 邮编查询
+      formPostCode:{
+        code:"",
+        // postNumber:"",
+        // province:"",
+        // city:"",
+        // district:"",
+        // address:"",
+        reason:"",
+      },
+      // 手机号查询归属地formInline
+      formInline:{
+        tel:"",
+        province:"",
+        city:"",
+        areacode:"",
+        zip:"",
+        company:"",
+        reason:"",
+      },
+
+      formIp:{
+        ip:"",
+        country:"",
+        province:"",
+        city:"",
+        isp:"",
+        reason:"",
+      },
+      formBirthday:{
+        year:"",
+        month:"",
+        day:"",
+        hour:"",
+        years:"",
+        months:"",
+        days:"",
+        animal:"",
+        imonthcn:"",
+        idaycn:"",
+        cyear:"",
+        cmonth:"",
+        cday:"",
+        gzyear:"",
+        gzmonth:"",
+        gzday:"",
+        isleap:"",
+        ncweek:"",
+        isterm:"",
+        term:"",
+        astro:"",
+        eightall:"",
+        fiveall:"",
+        reason:"",
+      },
+      formNews:{
+        news:"",
+        reason:"",
+      },
+      buyForm:{},
+      // IP查询归属地
+      dialogFormVisible:false,
+      dialogFormVisible1:false,
+      dialogFormVisible2:false,
+      dialogFormVisible3:false,
+      dialogFormVisible4:false,
+      dialogFormVisible5:false,
+      dialogFormVisible6:false,
+      dialogTableVisible:false,
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {
+    index() {
+      return index
+    },
+    node() {
+      return node
+    }
+  },
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+
+    navigateToDocumentation(id) {
+      this.$router.push({
+        path: `/port/sys`,
+        query: { id }
+      });
+    },
+
+
+
+    async fetchUserBalance() {
+      try {
+        const userId = localStorage.getItem('userId');
+        console.log(userId)// 登录后把userId存到了localStorage
+        if (!userId) {
+          this.userBalanceData = {userBalance: '未登录'};
+          return;
+        }
+        const response = await userBalance(userId);
+        if (response.data) {
+          console.log(response.data)
+          this.userBalanceData.userBalance = response.data;
+        } else {
+          this.userBalanceData.userBalance = {userBalance: '获取失败'};
+        }
+      } catch (error) {
+        this.userBalanceData = {userBalance: '获取失败'};
+        console.error('Error fetching user balance:', error);
+      }
+    },
+    buyInterface(){
+      this.$prompt('请输入支付密码', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /\d{6}?/,
+        inputErrorMessage: '密码格式不正确'
+      }).then(({ value }) => {
+        this.$message({
+          type: 'success',
+          message: '你的密码是: ' + value
+        });
+        doBuyInterface(this.buyForm).then((res)=>{
+          console.log(res);
+          alert(res.msg);
+          this.dialogFormVisible5=false;
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '取消输入'
+        });
+      });
+
+    },
+    //购买
+    buy(connector){
+      this.buyForm=connector;
+      this.dialogFormVisible5=true;
+    },
+    // 气象预警
+    testWeather(){
+
+      getWeather().then((res)=>{
+        this.data=res.data;
+
+        this.dialogFormVisible4=true;
+      })
+    },
+    // 邮编查询
+    getPostcode(){
+      getPostcode(this.formPostCode.code).then((res)=>{
+        console.log(res.data);
+        this.gridData2=res.data;
+        this.formPostCode.reason=true;
+      })
+    },
+    //天气预报
+    getWeatherForecast(){
+      getWeatherForecast(this.formWeatherForecast.cityName).then((res)=>{
+        console.log(res.data);
+        this.formWeatherForecast.city=res.data.city;
+        this.formWeatherForecast.info=res.data.info;
+        this.formWeatherForecast.temperature=res.data.temperature;
+        this.formWeatherForecast.humidity=res.data.humidity;
+        this.formWeatherForecast.direct=res.data.direct;
+        this.formWeatherForecast.power=res.data.power;
+        this.formWeatherForecast.aqi=res.data.aqi;
+        this.formWeatherForecast.reason=true;
+      })
+    },
+    //天气预报
+    testWeatherForecast(){
+      this.dialogFormVisible6=true;
+    },
+    testMailbox(){
+      this.dialogFormVisible3=true;
+    },
+    getBirthday(){
+      getBirthday(this.formBirthday).then((res)=>{
+        console.log(res.data);
+        this.formBirthday.reason=true;
+        this.formBirthday.years=res.data.years;
+        this.formBirthday.months=res.data.months;
+        this.formBirthday.days=res.data.days;
+        this.formBirthday.animal=res.data.animal;
+        this.formBirthday.imonthcn=res.data.imonthcn;
+        this.formBirthday.idaycn=res.data.idaycn;
+        this.formBirthday.cyear=res.data.cyear;
+        this.formBirthday.cmonth=res.data.cmonth;
+        this.formBirthday.cday=res.data.cday;
+        this.formBirthday.gzyear=res.data.gzyear;
+        this.formBirthday.gzmonth=res.data.gzmonth;
+        this.formBirthday.gzday=res.data.gzday;
+        this.formBirthday.isleap=res.data.isleap;
+        this.formBirthday.ncweek=res.data.ncweek;
+        this.formBirthday.isterm=res.data.isterm;
+        this.formBirthday.term=res.data.term;
+        this.formBirthday.astro=res.data.astro;
+        this.formBirthday.eightall=res.data.eightall;
+        this.formBirthday.fiveall=res.data.fiveall;
+
+      })
+    },
+    testBirthdate(){
+      this.dialogFormVisible2=true;
+    },
+    testNews(){
+      getHeadlines().then((res)=>{
+        this.gridData=res.data;
+        this.dialogTableVisible=true;
+      })
+    },
+    getIpPlace(){
+      getIpPlace(this.formIp.ip).then((res)=>{
+        console.log(res.data);
+        if (200==res.code){
+          this.formIp.country=res.data.country;
+          this.formIp.province=res.data.province;
+          this.formIp.city=res.data.city;
+          this.formIp.isp=res.data.isp;
+          this.formIp.reason=true;
+        }
+      })
+    },
+    testIP(){
+      this.dialogFormVisible1=true;
+    },
+    testPhone(){
+      this.dialogFormVisible=true;
+    },
+    phonePlace(){
+      phonePlace(this.formInline.tel).then((res)=>{
+        console.log(res.data);
+        if (200==res.code){
+          this.formInline.province=res.data.province;
+          this.formInline.city=res.data.city;
+          this.formInline.areacode=res.data.areacode;
+          this.formInline.zip=res.data.zip;
+          this.formInline.company=res.data.company;
+          this.formInline.reason=true;
+        }
+      })
+    },
+    findApiList(connectorSort){
+      this.form.connectorSort=connectorSort;
+      findApiList(this.form).then((res)=>{
+        this.connectorList=res.data;
+        console.log(res.data);
+      })
+    },
+    findConnectSort(){
+      findConnectSort().then((res)=>{
+        this.connectSort=res.data;
+        console.log(this.connectSort);
+      })
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.fetchUserBalance();
+    this.findApiList();
+    this.findConnectSort()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/port/port/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <div>
+    <el-button icon="el-icon-plus" type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+
+      <el-table-column
+        label="id"
+        width="100">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorId }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="接口名称"
+        width="150">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="接口分类"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorSort }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="接口描述"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorDescribe }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="接口图片"
+        width="180">
+        <template slot-scope="scope">
+          <!--          <image-preview :src="scope.row.connectorPicture" width="50" height="50"/>-->
+          <el-image style="width: 100px; height: 100px" :src="scope.row.connectorPicture"></el-image>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="公司"
+        width="150">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorCompany }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="更新时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.connectorTime }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="状态"
+        width="150">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==0">审核中</span>
+          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==1">审核通过</span>
+          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==2">审核失败</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            icon="el-icon-pear"
+            size="mini"
+            @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button
+            icon="el-icon-delete"
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--  新增接口-->
+    <el-dialog title="新增接口" :visible.sync="dialogFormVisible">
+      <el-form  ref="form" :model="form">
+        <el-form-item label="接口名称" :label-width="formLabelWidth">
+          <el-input v-model="form.connectorName" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="接口分类">
+          <el-select v-model="form.connectorSort" placeholder="请选择活动区域">
+            <el-option label="生活服务" value="生活服务">生活服务</el-option>
+            <el-option label="金融科技" value="金融科技">金融科技</el-option>
+            <el-option label="数据智能" value="数据智能">数据智能</el-option>
+            <el-option label="企业工商" value="企业工商">企业工商</el-option>
+            <el-option label="交通地理" value="交通地理">交通地理</el-option>
+            <el-option label="应用开发" value="应用开发">应用开发</el-option>
+            <el-option label="电子商务" value="电子商务">电子商务</el-option>
+            <el-option label="充值缴费" value="充值缴费">充值缴费</el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="接口描述" :label-width="formLabelWidth">
+          <el-input v-model="form.connectorDescribe" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="接口图片" :label-width="formLabelWidth">
+          <image-upload v-model="form.connectorPicture" autocomplete="off"/>
+        </el-form-item>
+
+
+
+
+        <!--        <el-form-item label="接口图片" :label-width="formLabelWidth">-->
+        <!--          <el-upload-->
+        <!--            action="https://jsonplaceholder.typicode.com/posts/"-->
+        <!--            list-type="picture-card"-->
+        <!--            :on-preview="handlePictureCardPreview"-->
+        <!--            :on-remove="handleRemove">-->
+        <!--            <i class="el-icon-plus"></i>-->
+        <!--          </el-upload>-->
+        <!--        </el-form-item>-->
+
+        <el-form-item label="公司" :label-width="formLabelWidth">
+          <el-input v-model="form.connectorCompany" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="价格" :label-width="formLabelWidth">
+          <el-input v-model="form.connectorPrice" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="API_URL" :label-width="formLabelWidth">
+          <el-input v-model="form.connectorApiurl" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="API_EYE" :label-width="formLabelWidth">
+          <el-input v-model="form.connectorApikey" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="请求方式" :label-width="formLabelWidth">
+          <el-input v-model="form.connectorRequest" autocomplete="off"></el-input>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addConnector">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!--  编辑接口-->
+    <el-dialog title="编辑接口" :visible.sync="dialogFormVisible1">
+      <el-form :model="formInline">
+        <el-form-item label="id" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorId" autocomplete="off" readonly></el-input>
+        </el-form-item>
+
+        <el-form-item label="接口名称" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorName" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="接口分类" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorSort" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="接口描述" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorDescribe" autocomplete="off"></el-input>
+        </el-form-item>
+
+
+        <el-form-item label="接口图片" :label-width="formLabelWidth">
+          <image-upload v-model="formInline.connectorPicture" autocomplete="off"></image-upload>
+        </el-form-item>
+
+        <el-form-item label="公司" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorCompany" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <!--        <el-form-item label="剩余次数" :label-width="formLabelWidth">-->
+        <!--          <el-input v-model="formInline.connectorResidueDegree" autocomplete="off"></el-input>-->
+        <!--        </el-form-item>-->
+
+        <!--        <el-form-item label="购买次数" :label-width="formLabelWidth">-->
+        <!--          <el-input v-model="formInline.connectorFrequency" autocomplete="off"></el-input>-->
+        <!--        </el-form-item>-->
+
+        <el-form-item label="API_URL" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorApiurl" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="API_EYE" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorApikey" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="请求方式" :label-width="formLabelWidth">
+          <el-input v-model="formInline.connectorRequest" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="状态" :label-width="formLabelWidth">
+          <el-select v-model="formInline.connectorStatus" placeholder="请审核">
+            <el-option label="审核中" value="0">审核中</el-option>
+            <el-option label="审核成功" value="1">审核成功</el-option>
+            <el-option label="审核失败" value="2">审核失败</el-option>
+          </el-select>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="updateConnector">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {findConnectorList} from "@/api/port/port";
+import {addConnector} from "@/api/port/port";
+import {getDeleteConnector} from "@/api/port/port";
+import {updateConnector} from "@/api/port/port";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+    return {
+      formInline: {},
+      form: {},
+      tableData: [],
+      formLabelAlign: {},
+      formLabelWidth: "120px",
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    updateConnector() {
+      updateConnector(this.formInline).then((res) => {
+        alert(res.msg);
+        if (200 == res.code) {
+          this.findConnectorList();
+          this.dialogFormVisible1 = false;
+        }
+      })
+    },
+    handleEdit(row) {
+      this.formInline = row;
+      this.dialogFormVisible1 = true;
+    },
+    handleDelete(row) {
+      getDeleteConnector(row.connectorId).then((res) => {
+        alert(res.msg);
+        if (200 == res.code) {
+          this.findConnectorList();
+        }
+      })
+    },
+    addConnector() {
+      addConnector(this.form).then((res) => {
+        alert(res.msg);
+        if (200 == res.code) {
+          this.findConnectorList();
+          this.dialogFormVisible = false;
+        }
+      })
+    },
+    findConnectorList() {
+      findConnectorList(this.form).then((res) => {
+        this.tableData = res.data;
+      })
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findConnectorList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/port/sys/index.vue

@@ -0,0 +1,544 @@
+<!-- src/views/Documentation.vue -->
+<template>
+  <el-container>
+    <el-aside width="400px" style="background-color: #f5f5f5; padding: 20px;">
+      <div>
+        <image-preview :src="picture" style="width: 80%; max-width: 300px; height: auto;" fit="contain"></image-preview>
+        <h2>{{ name }}</h2>
+        <p>{{remark}}</p>
+        <p><strong></strong> <span class="price">{{ price }}/次</span></p>
+
+
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="this.name ==='手机号查询归属地'">测试API</el-button>
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="this.name==='IP查询归属地'">测试API</el-button>
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="this.name==='新闻头条'">测试API</el-button>
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="this.name==='气象预警'">测试API</el-button>
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="this.name==='生辰助手'">测试API</el-button>
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="this.name==='邮编查询'">测试API</el-button>
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeatherForecast()" v-if="this.name==='天气预报'">测试API</el-button>
+
+
+        <!--    手机号查询归属地-->
+        <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
+          <el-form :model="formInline">
+            <el-form-item label="手机号" :label-width="formLabelWidth">
+              <el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
+            </el-form-item>
+            <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
+        省份：{{this.formInline.province}}<br>
+        城市：{{this.formInline.city}}<br>
+        区号：{{this.formInline.areacode}}<br>
+        邮编：{{this.formInline.zip}}<br>
+        运营商：{{this.formInline.company}}<br>
+        </span>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="phonePlace()">发起请求</el-button>
+          </div>
+        </el-dialog>
+
+        <!--IP查询归属地-->
+        <el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
+          <el-form :model="formIp">
+            <el-form-item label="IP" >
+              <el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
+            </el-form-item>
+            <span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
+        国家：{{this.formIp.country}}<br>
+        省份：{{this.formIp.province}}<br>
+        城市：{{this.formIp.city}}<br>
+        运营商：{{this.formIp.isp}}<br>
+        </span>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="getIpPlace()">发起请求</el-button>
+          </div>
+        </el-dialog>
+
+        <!--天气预报-->
+        <el-dialog title="天气预报" :visible.sync="dialogFormVisible6">
+          <el-form :model="formWeatherForecast">
+            <el-form-item label="城市名" >
+              <el-input v-model="formWeatherForecast.cityName" autocomplete="off" placeholder="请输入城市名"></el-input>
+            </el-form-item>
+            <span style="font-weight: bold;font-size: 20px" v-if="formWeatherForecast.reason==true">
+                城市：{{this.formWeatherForecast.city}}<br>
+                天气：{{this.formWeatherForecast.info}}<br>
+                温度：{{this.formWeatherForecast.temperature}}<br>
+                湿度：{{this.formWeatherForecast.humidity}}<br>
+                风向：{{this.formWeatherForecast.direct}}<br>
+                风力：{{this.formWeatherForecast.power}}<br>
+                空气质量：{{this.formWeatherForecast.aqi}}<br>
+              </span>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="getWeatherForecast(cityName)">发起请求</el-button>
+          </div>
+        </el-dialog>
+
+        <!--    新闻头条-->
+        <el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
+          <el-table :data="gridData">
+            <el-table-column property="title" label="新闻标题" width="150"></el-table-column>
+            <el-table-column property="date" label="新闻时间" width="200"></el-table-column>
+            <el-table-column property="category" label="新闻分类"></el-table-column>
+            <el-table-column property="authorName" label="新闻来源"></el-table-column>
+          </el-table>
+        </el-dialog>
+
+
+        <!--    气象预警-->
+        <el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
+          <el-aside width="100%">
+            <el-tree :data="data" :props="defaultProps">
+              <template slot-scope="{data,node}">
+                <span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
+              </template>
+            </el-tree>
+          </el-aside>
+        </el-dialog>
+
+        <!--生辰助手-->
+        <el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
+          <el-form :model="formBirthday">
+            <el-form-item label="年" >
+              <el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
+            </el-form-item>
+
+            <el-form-item label="月" >
+              <el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
+            </el-form-item>
+
+            <el-form-item label="日" >
+              <el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
+            </el-form-item>
+
+            <el-form-item label="时" >
+              <el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
+            </el-form-item>
+            <span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason===true">
+                   years： {{this.formBirthday.years}}<br>
+                   months： {{this.formBirthday.months}}<br>
+                   days： {{this.formBirthday.days}}<br>
+                   animal： {{this.formBirthday.animal}}<br>
+                   imonthcn： {{this.formBirthday.imonthcn}}<br>
+                   idaycn： {{this.formBirthday.idaycn}}<br>
+                   cyear： {{this.formBirthday.cyear}}<br>
+                   cmonth： {{this.formBirthday.cmonth}}<br>
+                   cday： {{this.formBirthday.cday}}<br>
+                   gzyear： {{this.formBirthday.gzyear}}<br>
+                   gzmonth： {{this.formBirthday.gzmonth}}<br>
+                   gzday： {{this.formBirthday.gzday}}<br>
+                   isleap： {{this.formBirthday.isleap}}<br>
+                   ncweek： {{this.formBirthday.ncweek}}<br>
+                   isterm： {{this.formBirthday.isterm}}<br>
+                   term： {{this.formBirthday.term}}<br>
+                   astro： {{this.formBirthday.astro}}<br>
+                   eightall： {{this.formBirthday.eightall}}<br>
+                   fiveall： {{this.formBirthday.fiveall}}
+              </span>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="getBirthday()">发起请求</el-button>
+          </div>
+        </el-dialog>
+
+        <!--邮编查询-->
+        <el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
+          <el-form :model="formPostCode">
+            <el-form-item label="邮编" >
+              <el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
+            </el-form-item>
+            <el-table :data="gridData2" v-if="formPostCode.reason===true">
+              <el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
+              <el-table-column property="province" label="省" width="200"></el-table-column>
+              <el-table-column property="city" label="市"></el-table-column>
+              <el-table-column property="district" label="区"></el-table-column>
+              <el-table-column property="address" label="县"></el-table-column>
+            </el-table>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="getPostcode()">发起请求</el-button>
+          </div>
+        </el-dialog>
+
+      </div>
+    </el-aside>
+    <div>
+      <el-tabs v-model="activeTab" @click="handleTabClick">
+        <el-tab-pane label="api 文档" name="api-docs"></el-tab-pane>
+        <el-tab-pane label="错误码参照" name="error-codes"></el-tab-pane>
+        <el-tab-pane label="数据统计" name="data-stats"></el-tab-pane>
+      </el-tabs>
+
+      <div v-if="activeTab === 'api-docs'">
+        <el-main style="padding: 20px;">
+          <div class="api-docs" style="margin-top: 20px;">
+            <el-card>
+              <div slot="header" class="clearfix">
+                <p>接口地址: {{apiEndpoint}}</p>
+                <p>返回格式: json</p>
+                <p>请求方式: {{connectorRequest}}</p>
+                <p>请求示例: {{apiEndpoint}}?=你申请的KEY&{{apiKey}}</p>
+                <p>简介: {{describe}}</p>
+                <h2>json返回示例:</h2>
+                <el-card class="return-example-card">
+                  <pre>{{ returnExample }}</pre>
+                </el-card>
+                <h2>xml返回示例:</h2>
+                <el-card class="return-example-card">
+                  <pre>{{ returnXml }}</pre>
+                </el-card>
+              </div>
+            </el-card>
+          </div>
+        </el-main>
+      </div>
+
+
+      <div v-if="activeTab === 'error-codes'">
+        <el-card style="width: 80%; margin: 20px auto; box-shadow: 0 2px 12px rgba(0,0,0,0.1);">
+          <h3 style="text-align: center; margin-bottom: 20px;">服务级错误码参照(error_code)</h3>
+          <table border="1" style="width: 100%; margin-bottom: 20px;">
+            <tr>
+              <td>错误码</td>
+              <td>说明</td>
+            </tr>
+            <tr v-for="errorCode in errorCodes" :key="errorCode.code">
+              <td>{{ errorCode.code }}</td>
+              <td>{{ errorCode.description }}</td>
+            </tr>
+          </table>
+
+          <h3 style="text-align: center; margin-bottom: 20px;">系统级错误码参照</h3>
+          <table border="1" style="width: 100%;">
+            <tr>
+              <td>错误码</td>
+              <td>说明</td>
+            </tr>
+            <tr v-for="errorCode in Codes" :key="errorCode.code">
+              <td>{{ errorCode.code }}</td>
+              <td>{{ errorCode.description }}</td>
+            </tr>
+          </table>
+
+          <h3 style="text-align: center; margin-bottom: 20px;">错误格式说明（示例200201）：</h3>
+          <table border="1" style="width: 100%;">
+            <tr>
+              <td>2</td>
+              <td>002</td>
+            </tr>
+            <tr v-for="errorCode in Cods" :key="errorCode.code">
+              <td>{{ errorCode.code }}</td>
+              <td>{{ errorCode.description }}</td>
+            </tr>
+          </table>
+        </el-card>
+      </div>
+
+      <div v-if="activeTab === 'data-stats'">
+        <el-card class="return-example-card" style="width: 80%; margin: 20px auto; box-shadow: 0 2px 12px rgba(0,0,0,0.1);">
+          <div slot="header" class="clearfix" style="padding: 20px;">
+            <pre>什么也没有</pre>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </el-container>
+</template>
+
+<script>
+
+import { findApiById } from "@/api/port/port";
+import {phonePlace ,getIpPlace,getWeatherForecast,getHeadlines,getWeather,getBirthday,getPostcode} from "@/api/port/port";
+
+export default {
+  data() {
+    return {
+      Cods: [
+        { code: '服务级错误（1为系统级错误）', description: '服务模块代码(即数据ID)' },
+      ],
+      Codes: [
+        { code: '10001', description: '错误的请求KEY' },
+        { code: '10002', description: '该KEY无请求权限' },
+        { code: '10003', description: 'KEY过期' },
+        { code: '10004', description: '系统内部异常' },
+      ],
+      errorCodes: [
+        { code: '203201', description: '错误的经纬度' },
+      ],
+      // 邮编查询
+      formPostCode:{
+        code:"",
+        // postNumber:"",
+        // province:"",
+        // city:"",
+        // district:"",
+        // address:"",
+        reason:"",
+      },
+      formBirthday:{
+        year:"",
+        month:"",
+        day:"",
+        hour:"",
+        years:"",
+        months:"",
+        days:"",
+        animal:"",
+        imonthcn:"",
+        idaycn:"",
+        cyear:"",
+        cmonth:"",
+        cday:"",
+        gzyear:"",
+        gzmonth:"",
+        gzday:"",
+        isleap:"",
+        ncweek:"",
+        isterm:"",
+        term:"",
+        astro:"",
+        eightall:"",
+        fiveall:"",
+        reason:"",
+      },
+      data:[],
+      defaultProps: {
+        children:"citys",
+        label:'provinceName',
+      },
+      gridData:[],
+      gridData2:[],
+      formWeatherForecast:{
+        cityName:"",
+        city:"",
+        info:"",
+        temperature:"",
+        humidity:"",
+        direct:"",
+        power:"",
+        aqi:"",
+        reason:"",
+      },
+      // 手机号查询归属地formInline
+      formInline:{
+        tel:"",
+        province:"",
+        city:"",
+        areacode:"",
+        zip:"",
+        company:"",
+        reason:"",
+      },
+      formLabelWidth: '80px',
+      formIp:{
+        ip:"",
+        country:"",
+        province:"",
+        city:"",
+        isp:"",
+        reason:"",
+      },
+
+      activeTab: 'api-docs',
+      name: '',
+      describe: '',
+      price: '',
+      picture: '',
+      returnExample:'',
+      remark: '',
+      returnXml: '',
+      apiKey:'N/A',
+      apiEndpoint: 'N/A',
+      connectorRequest: 'N/A',
+      responseFormat: 'N/A',
+      requestMethod: 'N/A',
+      requestExample: 'N/A',
+      apiDescription: 'N/A',
+      dialogFormVisible:false,
+      dialogFormVisible1:false,
+      dialogFormVisible2:false,
+      dialogFormVisible3:false,
+      dialogFormVisible4:false,
+      dialogFormVisible5:false,
+      dialogFormVisible6:false,
+      dialogTableVisible:false,
+    };
+
+
+
+  },
+  methods: {
+    // 邮编查询
+    getPostcode(){
+      getPostcode(this.formPostCode.code).then((res)=>{
+        console.log(res.data);
+        this.gridData2=res.data;
+        this.formPostCode.reason=true;
+      })
+    },
+    getBirthday(){
+      getBirthday(this.formBirthday).then((res)=>{
+        console.log(res.data);
+        this.formBirthday.reason=true;
+        this.formBirthday.years=res.data.years;
+        this.formBirthday.months=res.data.months;
+        this.formBirthday.days=res.data.days;
+        this.formBirthday.animal=res.data.animal;
+        this.formBirthday.imonthcn=res.data.imonthcn;
+        this.formBirthday.idaycn=res.data.idaycn;
+        this.formBirthday.cyear=res.data.cyear;
+        this.formBirthday.cmonth=res.data.cmonth;
+        this.formBirthday.cday=res.data.cday;
+        this.formBirthday.gzyear=res.data.gzyear;
+        this.formBirthday.gzmonth=res.data.gzmonth;
+        this.formBirthday.gzday=res.data.gzday;
+        this.formBirthday.isleap=res.data.isleap;
+        this.formBirthday.ncweek=res.data.ncweek;
+        this.formBirthday.isterm=res.data.isterm;
+        this.formBirthday.term=res.data.term;
+        this.formBirthday.astro=res.data.astro;
+        this.formBirthday.eightall=res.data.eightall;
+        this.formBirthday.fiveall=res.data.fiveall;
+
+      })
+    },
+    // 气象预警
+    testWeather(){
+
+      getWeather().then((res)=>{
+        this.data=res.data;
+
+        this.dialogFormVisible4=true;
+      })
+    },
+
+    testNews(){
+      getHeadlines().then((res)=>{
+        this.gridData=res.data;
+        this.dialogTableVisible=true;
+      })
+    },
+
+    getWeatherForecast(){
+      getWeatherForecast(this.formWeatherForecast.cityName).then((res)=>{
+        console.log(res.data);
+        this.formWeatherForecast.city=res.data.city;
+        this.formWeatherForecast.info=res.data.info;
+        this.formWeatherForecast.temperature=res.data.temperature;
+        this.formWeatherForecast.humidity=res.data.humidity;
+        this.formWeatherForecast.direct=res.data.direct;
+        this.formWeatherForecast.power=res.data.power;
+        this.formWeatherForecast.aqi=res.data.aqi;
+        this.formWeatherForecast.reason=true;
+      })
+    },
+
+    getIpPlace(){
+      getIpPlace(this.formIp.ip).then((res)=>{
+        console.log(res.data);
+        if (200==res.code){
+          this.formIp.country=res.data.country;
+          this.formIp.province=res.data.province;
+          this.formIp.city=res.data.city;
+          this.formIp.isp=res.data.isp;
+          this.formIp.reason=true;
+        }
+      })
+    },
+
+    phonePlace(){
+      phonePlace(this.formInline.tel).then((res)=>{
+        console.log(res.data);
+        if (200==res.code){
+          this.formInline.province=res.data.province;
+          this.formInline.city=res.data.city;
+          this.formInline.areacode=res.data.areacode;
+          this.formInline.zip=res.data.zip;
+          this.formInline.company=res.data.company;
+          this.formInline.reason=true;
+        }
+      })
+    },
+    testWeatherForecast(){
+      this.dialogFormVisible6=true;
+    },
+    testMailbox(){
+      this.dialogFormVisible3=true;
+    },
+    testBirthdate(){
+      this.dialogFormVisible2=true;
+    },
+    testIP(){
+      this.dialogFormVisible1=true;
+    },
+    testPhone(){
+      this.dialogFormVisible=true;
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab.name;
+    },
+    async loadData(id) {
+      try {
+        const response = await findApiById(id);
+        const data = response.data;
+        this.name = data.connectorName;
+        this.describe = data.connectorDescribe;
+        this.price = data.connectorPrice;
+        this.picture = data.connectorPicture;
+        this.apiEndpoint = data.connectorApiurl;
+        this.apiKey = data.connectorApikey;
+        this.remark = data.remark
+        this.connectorRequest = data.connectorRequest;
+        this.returnExample = data.returnExample;
+        this.returnXml = data.returnXml;
+      } catch (error) {
+        console.error("Failed to fetch API data:", error);
+      }
+    }
+  },
+  created() {
+    const id = this.$route.query.id;
+    if (id) {
+      this.loadData(id);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.price {
+  font-size: 24px; /* 调整字体大小 */
+  color: red;
+}
+.api-docs {
+  margin-top: 20px;
+}
+.return-example-card {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border: 1px solid #dcdfe6;
+}
+.return-example-card pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+
+table {
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid black;
+  padding: 10px;
+  text-align: left;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+</style>

src/views/system/logininfor/index.vue

@@ -10,7 +10,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="用户名称" prop="userName">
+      <el-form-item label="" prop="userName">
         <el-input
           v-model="queryParams.userName"
           clearable

src/views/system/menu/index.vue

@@ -429,6 +429,7 @@ export default {
     /** 提交按钮 */
     submitForm: function () {
       this.$refs["form"].validate(valid => {
+
         if (valid) {
           if (this.form.menuId != undefined) {
             updateMenu(this.form).then(response => {
@@ -444,6 +445,7 @@ export default {
             });
           }
         }
+
       });
     },
     /** 删除按钮操作 */

src/views/task/task/antvX6.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="dashboard-container">
+    <p>选择节点</p>
+    <div class="antvBox">
+      <div class="menu-list">
+        <div v-for="item in moduleList"
+             :key="item.id"
+             draggable="true"
+             @dragend="handleDragEnd($event, item)">
+          <img :src="item.image" alt="" />
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
+      <div class="canvas-card">
+        <div id="container" />
+      </div>
+    </div>
+    <el-button @click="save()">提交</el-button>
+
+
+    <!--    添加任务详情设计-->
+    <el-dialog title="添加表" :visible.sync="taskInputForm" width="70%">
+        <formData v-if="formData" :group="graph" :node-id="nodeId" :taskInputForm="taskInputForm"
+                  :nodeName="nodeName" :tableInfo="tableInfo" @taskInputForm="findFormValue"></formData>
+    </el-dialog>
+
+    <!--    联查弹窗-->
+    <el-dialog title="联查" :visible.sync="taskInputJoin" width="70%">
+      <formJoin v-if="formJoin" :group="graph" :node-id="nodeId"
+                :nodeName="nodeName" :neighbors="neighbors"
+                :taskId="taskId" :taskInputJoin="taskInputJoin" @saveTaskJoin="findFormValue"></formJoin>
+    </el-dialog>
+
+    <!--    数据输出弹窗-->
+    <el-dialog title="数据输出" :visible.sync="taskDataOutPut" width="70%">
+      <dataOutInput v-if="formOut" :taskDataOutPut="taskDataOutPut" :neighbors="neighbors"
+                    :taskId="taskId"></dataOutInput>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="ruleOpen"
+      width="70%">
+      <ruleForm v-if="this.ruleDestroy" :node-id="nodeId" @ruleDestroy="ruleDestroyValue"/>
+      <!--      <ruleForm ></ruleForm>-->
+    </el-dialog>
+
+
+  </div>
+</template>
+
+<script>
+
+import { Graph } from "@antv/x6";
+import { findByNodeId } from '@/api/task/task'
+import  formData from '/src/views/components/task/formData.vue'
+import  formJoin from '/src/views/components/task/formJoin.vue'
+import  dataOutInput from '/src/views/components/task/formDataOut.vue'
+import ruleForm from "@/views/components/task/rule/index";
+
+export default {
+  name: "antvX6",
+  components:{
+    formData,
+    formJoin,
+    dataOutInput,
+    ruleForm,
+  },
+  data() {
+    return {
+      //数据输出弹窗界面
+      taskDataOutPut:false,
+      ruleOpen: false,
+      //任务设计添加表弹窗
+      taskInputAdd:false,
+      //联查界面
+      taskInputJoin:false,
+      //选择字段弹窗
+      taskInputFieldAdd:false,
+      //连再联查的节点id
+      neighbors:[],
+      columnList:[],
+      //记录表信息
+      tableInfo:{},
+      //画布节点选项
+      moduleList: [
+        {
+          id: 1,
+          name: "开始",
+          image: require("@/assets/img/1.png"),
+          data:{}
+        },
+        {
+          id: 2,
+          name: "表",
+          image: require("@/assets/img/2.png"),
+          data:{
+            databaseId:null,
+            tableName:null,
+            zd:null,
+          }
+        },
+        {
+          id: 3,
+          name: "联查",
+          image: require("@/assets/img/3.png"),
+          data:{}
+        },
+        {
+          id: 4,
+          name: "数据输出",
+          image: require("@/assets/img/4.png"),
+          data:{}
+        },
+        {
+          id: 5,
+          name: "规则",
+          image: require("@/assets/img/5.png"),
+          data:{}
+        },
+      ],
+      //画布
+      graph:null,
+      //节点id
+      nodeId:null,
+      nodeName:null,
+
+      //添加表弹窗
+      taskInputForm:false,
+      formData:false,
+      formJoin:false,
+      ruleDestroy:false,
+      formOut:false,
+      taskId:this.$route.params.id,
+    };
+  },
+  //初始化
+  mounted() {
+    this.initGraph();
+  },
+  methods: {
+
+    ruleDestroyValue(data) {
+      this.ruleDestroy = data;
+      this.ruleOpen = data;
+    },
+
+    findFormValue(){
+      this.formData=false;
+      this.taskInputForm=false;
+      this.taskInputJoin=false;
+    },
+
+    //保存画布，并提交
+    save() {
+      console.log(this.graph.toJSON(), "graph");
+      console.log(this.graph.getNodes(), "node");
+    },
+
+
+    nodeAddEvent() {
+      const { graph } = this;
+      const container = document.getElementById("container");
+      const changePortsVisible = (visible) => {
+        const ports = container.querySelectorAll(".x6-port-body");
+        for (let i = 0, len = ports.length; i < len; i = i + 1) {
+          ports[i].style.visibility = visible ? "visible" : "hidden";
+        }
+      };
+
+
+      //左键单击事件
+      this.graph.on("node:click",(evt)=>{
+        const data = evt.node.store.data;
+        const thisData = data.attrs.label.textWrap.text;
+        this.nodeId = data.id;
+        this.nodeName = thisData;
+        if(thisData == "表"){
+          findByNodeId(this.nodeId).then(res=>{
+            this.tableInfo={};
+            this.tableInfo.taskId = this.taskId;
+            if(res.code == 200 && res.data!=null){
+              this.tableInfo = res.data;
+            }
+          })
+          //TODO man
+          this.taskInputForm = true;
+          this.formData = true;
+        }
+
+        if(thisData == "联查"){
+            // 获取与当前节点相连的所有边
+            const edges = this.graph.getEdges().filter(edge => {
+              return edge.getSourceNode().id === data.id || edge.getTargetNode().id === data.id;
+            });
+            // 遍历边，找到相连的节点（注意排除当前节点本身）
+            const neighbors = [];
+            edges.forEach(edge => {
+              const otherNodeId = edge.getSourceNode().id === data.id ? edge.getTargetNode().id : edge.getSourceNode().id;
+              if (!neighbors.includes(otherNodeId)) {
+                neighbors.push(otherNodeId); // 或者你可以推送整个节点对象，而不是仅ID
+              }
+            });
+            // 现在neighbors数组包含了所有与当前节点相连的节点的ID
+            console.log('相连节点的ID:', neighbors);
+            this.neighbors = neighbors;
+            this.taskInputJoin = true;
+            this.formJoin = true;
+        }
+
+        if(thisData == "数据输出"){
+          this.taskDataOutPut = true;
+          this.formOut = true;
+        }
+        if (thisData == "规则") {
+          this.ruleOpen = true;
+          this.ruleDestroy = true;
+        }
+      });
+
+
+      this.graph.on("node:mouseenter", () => {
+        changePortsVisible(true);
+      });
+      this.graph.on("node:mouseleave", () => {
+        changePortsVisible(false);
+      });
+
+      // 节点绑定右键点击事件
+      this.graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
+        console.log("点击！！！", node);
+        // 判断是否有选中过节点
+        if (this.curSelectNode) {
+          // 移除选中状态
+          this.curSelectNode.removeTools();
+          // 判断两次选中节点是否相同
+          if (this.curSelectNode !== node) {
+            node.addTools([
+              {
+                name: "boundary",
+                args: {
+                  attrs: {
+                    fill: "#16B8AA",
+                    stroke: "#2F80EB",
+                    strokeWidth: 1,
+                    fillOpacity: 0.1,
+                  },
+                },
+              },
+              {
+                name: "button-remove",
+                args: {
+                  x: "100%",
+                  y: 0,
+                  offset: {
+                    x: 0,
+                    y: 0,
+                  },
+                },
+              },
+            ]);
+            this.curSelectNode = node;
+          } else {
+            this.curSelectNode = null;
+          }
+        } else {
+          this.curSelectNode = node;
+          node.addTools([
+            {
+              name: "boundary",
+              args: {
+                attrs: {
+                  fill: "#16B8AA",
+                  stroke: "#2F80EB",
+                  strokeWidth: 1,
+                  fillOpacity: 0.1,
+                },
+              },
+            },
+            {
+              name: "button-remove",
+              args: {
+                x: "100%",
+                y: 0,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+            },
+          ]);
+        }
+      });
+
+      //双击事件
+      this.graph.on('node:dblclick', (evt) => {
+        const data = evt.node.store.data;
+        console.log(data);
+        // this.showNodeForm(data);
+      });
+
+      // 连线绑定悬浮事件
+      this.graph.on("cell:mouseenter", ({ cell }) => {
+        if (cell.shape == "edge") {
+          cell.addTools([
+            {
+              name: "button-remove",
+              args: {
+                x: "100%",
+                y: 0,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+            },
+          ]);
+          cell.setAttrs({
+            line: {
+              stroke: "#409EFF",
+            },
+          });
+          cell.zIndex = 99; // 保证当前悬停的线在最上层，不会被遮挡
+        }
+      });
+      this.graph.on("cell:mouseleave", ({ cell }) => {
+        if (cell.shape === "edge") {
+          cell.removeTools();
+          cell.setAttrs({
+            line: {
+              stroke: "black",
+            },
+          });
+          cell.zIndex = 1; // 保证未悬停的线在下层，不会遮挡悬停的线
+        }
+      });
+    },
+
+
+    // 拖动后松开鼠标触发事件
+    handleDragEnd(e, item) {
+      // console.log(e); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
+      this.addHandleNode(
+        e.pageX - 500,
+        e.pageY - 200,
+        new Date().getTime(),
+        item.image,
+        item.name,
+        item.data
+      );
+    },
+
+    //添加节点到画布
+    addHandleNode(x, y, id, image, name ,data) {
+      this.graph.addNode({
+        id: id,
+        shape: "image", // 指定使用何种图形，默认值为 'rect'
+        x: x,
+        y: y,
+        width: 60,
+        height: 60,
+        imageUrl: image,
+        attrs: {
+          body: {
+            stroke: "#ffa940",
+            fill: "#ffd591",
+          },
+          label: {
+            textWrap: {
+              width: 90,
+              text: name,
+            },
+            fill: "black",
+            fontSize: 12,
+            refX: 0.5,
+            refY: "100%",
+            refY2: 4,
+            textAnchor: "middle",
+            textVerticalAnchor: "top",
+          },
+        },
+        ports: {
+          groups: {
+            group1: {
+              position: [30, 30],
+            },
+          },
+          items: [
+            {
+              group: "group1",
+              id: "port1",
+              attrs: {
+                circle: {
+                  r: 6,
+                  magnet: true,
+                  stroke: "#ffffff",
+                  strokeWidth: 2,
+                  fill: "#5F95FF",
+                },
+              },
+            },
+          ],
+        },
+        zIndex: 10,
+        data:data,
+      });
+    },
+
+    //初始化
+    initGraph() {
+      const container = document.getElementById("container");
+      this.graph = new Graph({
+        container: container, // 画布容器
+        width: container.offsetWidth, // 画布宽
+        height: container.offsetHeight, // 画布高
+        background: false, // 背景（透明）
+        snapline: true, // 对齐线
+        // 配置连线规则
+        connecting: {
+          snap: true, // 自动吸附
+          allowBlank: false, // 是否允许连接到画布空白位置的点
+          allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
+          allowLoop: true, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
+          highlight: true, // 拖动边时，是否高亮显示所有可用的节点
+          highlighting: {
+            magnetAdsorbed: {
+              name: "stroke",
+              args: {
+                attrs: {
+                  fill: "#5F95FF",
+                  stroke: "#5F95FF",
+                },
+              },
+            },
+          },
+          router: {
+            // 对路径添加额外的点
+            name: "orth",
+          },
+          connector: {
+            // 边渲染到画布后的样式
+            name: "rounded",
+            args: {
+              radius: 8,
+            },
+          },
+        },
+        panning: {
+          enabled: false,
+        },
+        mousewheel: {
+          enabled: true, // 支持滚动放大缩小
+          zoomAtMousePosition: true,
+          modifiers: "ctrl",
+          minScale: 0.5,
+          maxScale: 3,
+        },
+        grid: {
+          type: "dot",
+          size: 20, // 网格大小 10px
+          visible: true, // 渲染网格背景
+          args: {
+            color: "#a0a0a0", // 网格线/点颜色
+            thickness: 2, // 网格线宽度/网格点大小
+          },
+        },
+      });
+      this.nodeAddEvent();
+    },
+  },
+
+};
+</script>
+<style lang="scss" scoped>
+.dashboard-container {
+  .antvBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: black;
+    padding-top: 20px;
+    .menu-list {
+      height: 100%;
+      width: 300px;
+      padding: 0 10px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-content: flex-start;
+      flex-wrap: wrap;
+      > div {
+        margin-bottom: 10px;
+        border-radius: 5px;
+        padding: 0 10px;
+        box-sizing: border-box;
+        cursor: pointer;
+        color: black;
+        width: 105px;
+        display: flex;
+        flex-wrap: wrap;
+
+        justify-content: center;
+        img {
+          height: 50px;
+          width: 50px;
+        }
+        P {
+          width: 90px;
+          text-align: center;
+        }
+      }
+    }
+    .canvas-card {
+      width: 1700px;
+      height: 750px;
+      box-sizing: border-box;
+      > div {
+        width: 1400px;
+        height: 750px;
+        border: 2px dashed #2149ce;
+      }
+    }
+  }
+}
+</style>

src/views/task/task/antvX6FU.vue

@@ -0,0 +1,733 @@
+<template>
+  <div class="dashboard-container">
+    <p>选择节点</p>
+    <div class="antvBox">
+      <div class="menu-list">
+        <div v-for="item in moduleList"
+             :key="item.id"
+             draggable="true"
+             @dragend="handleDragEnd($event, item)">
+          <img :src="item.image" alt="" />
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
+      <div class="canvas-card">
+        <div id="container" />
+      </div>
+    </div>
+    <el-button @click="save()">提交</el-button>
+
+
+
+
+
+
+
+    <!--    添加任务详情设计-->
+    <el-dialog title="添加表" :visible.sync="taskInputForm" width="70%">
+        <formData v-if="this.formData" :group="graph" :node-id="nodeId" :formData="taskInputForm" @taskInputAdd="taskInputAdd"></formData>
+    </el-dialog>
+
+<!--      <el-form  label-width="80px" :model="tableInfo" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">-->
+<!--        <el-form-item label="任务id">-->
+<!--          <el-input v-model="tableInfo.taskId"></el-input>-->
+<!--        </el-form-item>-->
+
+<!--                <el-form-item label="数据库id">-->
+<!--                  <el-input v-model="tableInfo.basicId"></el-input>-->
+<!--                </el-form-item>-->
+<!--&lt;!&ndash;        <el-form-item label="数据表">&ndash;&gt;-->
+
+<!--&lt;!&ndash;          <div class="block">&ndash;&gt;-->
+<!--&lt;!&ndash;            <span class="demonstration">选择数据表</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <el-cascader&ndash;&gt;-->
+<!--&lt;!&ndash;              v-model="value"&ndash;&gt;-->
+<!--&lt;!&ndash;              :options="tableList"&ndash;&gt;-->
+<!--&lt;!&ndash;              @change="handleChange(value)"></el-cascader>&ndash;&gt;-->
+<!--&lt;!&ndash;          </div>&ndash;&gt;-->
+
+<!--&lt;!&ndash;    <el-aside width="30%">-->
+<!--        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
+<!--      </el-aside>&ndash;&gt;-->
+<!--        <el-form-item>-->
+<!--          <el-select  v-model="tableInfo.tableName" placeholder="请选择等级">-->
+<!--            <el-option style="height: 100%" :value="tableInfo.tableName">-->
+<!--              <el-aside width="100%">-->
+<!--                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
+<!--              </el-aside>-->
+<!--            </el-option>-->
+
+<!--&lt;!&ndash;            <el-option label="请选择" value="0"></el-option>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span v-for="table in tableList">&ndash;&gt;-->
+<!--&lt;!&ndash;              <el-option  :label=table.tableName :value=table.id :key=table.id></el-option>&ndash;&gt;-->
+<!--&lt;!&ndash;            </span>&ndash;&gt;-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="表别名">-->
+<!--          <el-input v-model="tableInfo.tableAsName"></el-input>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="taskInputAdd = false">取 消</el-button>-->
+<!--        <el-button type="primary" @click="addTaskInput()">下一步</el-button>-->
+<!--      </div>-->
+
+<!--    </el-dialog>-->
+
+
+<!--    &lt;!&ndash;    字段选择列表&ndash;&gt;-->
+<!--    <el-dialog title="添加表" :visible.sync="taskInputFieldAdd">-->
+
+<!--      <el-table-->
+<!--        :data="tableInfo.structureList"-->
+<!--        style="width: 100%"-->
+
+<!--        @selection-change="handleSelectionChange">-->
+
+
+<!--        <el-table-column-->
+<!--          type="selection"-->
+<!--          width="100%">-->
+<!--        </el-table-column>-->
+
+
+<!--        <el-table-column-->
+<!--          label="字段"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.columnName }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="注释"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="是否主键"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="字段类型"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.columnType }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="字段长度"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="小数"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="非空"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.isNull }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="默认值"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="是否字典"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+<!--            <i class="el-icon-time"></i>-->
+<!--            <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+
+
+<!--        <el-table-column-->
+<!--          label="处理规则"-->
+<!--          width="100">-->
+<!--          <template slot-scope="scope">-->
+
+<!--            <el-select v-model="tableInfo.fieldAsEngineId" multiple placeholder="请选择">-->
+<!--              <el-option value="">请选择</el-option>-->
+<!--              <el-option-->
+<!--                v-for="engine in engineList"-->
+<!--                :key="engine.id"-->
+<!--                :label="engine.name"-->
+<!--                :value="engine.id">-->
+<!--              </el-option>-->
+<!--            </el-select>-->
+
+
+
+
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>&ndash;&gt;-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--                <el-table-column-->
+<!--                  label="表别名"-->
+<!--                  width="100">-->
+<!--                  <template slot-scope="scope">-->
+<!--                    <el-input v-model="scope.row.fieldAsEngineId"></el-input>-->
+<!--                  </template>-->
+<!--                </el-table-column>-->
+<!--      </el-table>-->
+
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="cancelColumn()">取 消</el-button>-->
+<!--        <el-button type="primary" @click="columnAddGood()">确 定</el-button>-->
+<!--      </div>-->
+<!--    </el-dialog>-->
+<!--    <formData>-->
+
+<!--    </formData>-->
+
+
+  </div>
+</template>
+
+<script>
+
+import { Graph } from "@antv/x6";
+import { addTaskInput, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
+import { selectEngineList } from '@/api/engine/engine'
+import  formData from '/src/views/components/task/formData.vue'
+
+export default {
+  name: "antvX6",
+  components:{
+    formData
+  },
+  data() {
+    return {
+      dialogFormVisible:false,
+      //任务设计添加表弹窗
+      taskInputAdd:false,
+      formData:null,
+      //选择字段弹窗
+      taskInputFieldAdd:false,
+      taskReq:{
+
+      },
+      taskAddReq:{},
+      taskInputReq:{},
+      engineReq:{
+        pageNum: 1,
+        pageSize: 100
+    },
+      taskList:[],
+      //级联选择器
+      value:[],
+
+      engineList:[],
+
+      //树状图
+      data:[],
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+
+      tableList:[],
+      columnList:[],
+      structureList:[],
+      tableInfo:{
+        taskId:this.$route.params.taskId,
+      },
+      itemId:0,
+      moduleList: [
+        {
+          id: 1,
+          name: "开始",
+          image: require("@/assets/img/1.png"),
+          data:{}
+        },
+        {
+          id: 2,
+          name: "表",
+          image: require("@/assets/img/2.png"),
+          data:{
+            databaseId:null,
+            tableName:null,
+            zd:null,
+          }
+        },
+        {
+          id: 3,
+          name: "联查",
+          image: require("@/assets/img/3.png"),
+          data:{}
+        },
+        {
+          id: 4,
+          name: "结束",
+          image: require("@/assets/img/4.png"),
+          data:{}
+        },
+      ],
+      graph:null,
+      nodeId:null,
+      nodeName:null,
+      taskInputForm:false,
+    };
+  },
+  //初始化
+  created() {
+    alert(this.$route.params.taskId);
+  },
+  mounted() {
+    this.initGraph();
+  },
+  methods: {
+    taskInputForm(data){
+      this.formData=data;
+      this.taskInputForm=data;
+    },
+
+
+    // //规则引擎下拉框
+    // selectEngineList(){
+    //   selectEngineList(this.engineReq).then(res=>{
+    //     this.engineList = res.data.list;
+    //     console.log(this.engineList);
+    //   })
+    // },
+    //
+    // //根据树状下拉的选择赋值字段信息
+    // handleNodeClick(data) {
+    //   this.tableInfo = data;
+    //   findStructureByTableId(data.id).then((res)=>{
+    //     this.tableInfo.structureList=res.data;
+    //   })
+    //   const cellById = this.graph.getCellById(this.nodeId)
+    //   cellById.setData(this.tableInfo);
+    // },
+    //
+    // //弹出选择表界面给树状下拉框赋值
+    // findTAbleInfoList(){
+    //   findTableInfoList().then(res=>{
+    //     this.data=res.data;
+    //   })
+    // },
+    //
+    // //确定选择的字段
+    // columnAddGood(){
+    //   this.taskInputFieldAdd = false;
+    //   const cellById = this.graph.getCellById(this.nodeId);
+    //   this.tableInfo.tableField = JSON.stringify(this.tableInfo.columnList);
+    //   console.log(this.tableInfo.tableField);
+    //   this.tableInfo.fieldAsEngineId = "1,2,3";
+    //   this.tableInfo.nodeId = this.nodeId;
+    //   cellById.setData(this.tableInfo);
+    //   addTaskInput(this.tableInfo).then(res=>{
+    //     alert("11")
+    //     alert(res.msg);
+    //     // console.log(this.tableInfo.fieldAsEngineId)
+    //   });
+    // },
+    //
+    // //关闭字段信息
+    // cancelColumn(){
+    //   this.taskInputFieldAdd = false;
+    // },
+    //
+    // //选中字段
+    // handleSelectionChange(val) {
+    //   if(val.length<=0){
+    //     val = this.tableInfo.columnList;
+    //     return;
+    //   }
+    //   this.tableInfo.columnList = val;
+    //   console.log(this.tableInfo.columnList );
+    // },
+    //
+    // //跳转到任务设计界面
+    // toDesign(row){
+    //   this.$router.push({path:'/easyFlow'});
+    // },
+    //
+    //
+    // //打开选择数据表弹窗
+    // executeTask(){
+    //   this.findTAbleInfoList();
+    //   this.taskInputAdd = true;
+    // },
+    //
+    // //选择完下拉框的表后的下一步
+    // addTaskInput(){
+    //   this.taskInputAdd = false;
+    //   this.selectEngineList();
+    //   this.taskInputFieldAdd = true;
+    // },
+
+    //保存画布，并提交
+    save() {
+      console.log(this.graph.toJSON(), "graph");
+      console.log(this.graph.getNodes(), "node");
+    },
+
+
+    // 拖动后松开鼠标触发事件
+    handleDragEnd(e, item) {
+      // console.log(e); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
+      this.addHandleNode(
+        e.pageX - 500,
+        e.pageY - 200,
+        new Date().getTime(),
+        item.image,
+        item.name,
+        item.data
+      );
+    },
+
+    nodeAddEvent() {
+      const { graph } = this;
+      const container = document.getElementById("container");
+      const changePortsVisible = (visible) => {
+        const ports = container.querySelectorAll(".x6-port-body");
+        for (let i = 0, len = ports.length; i < len; i = i + 1) {
+          ports[i].style.visibility = visible ? "visible" : "hidden";
+        }
+      };
+      this.graph.on("node:mouseenter", () => {
+        changePortsVisible(true);
+      });
+      this.graph.on("node:mouseleave", () => {
+        changePortsVisible(false);
+      });
+
+      // 节点绑定右键点击事件
+      this.graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
+        console.log("点击！！！", node);
+        // 判断是否有选中过节点
+        if (this.curSelectNode) {
+          // 移除选中状态
+          this.curSelectNode.removeTools();
+          // 判断两次选中节点是否相同
+          if (this.curSelectNode !== node) {
+            node.addTools([
+              {
+                name: "boundary",
+                args: {
+                  attrs: {
+                    fill: "#16B8AA",
+                    stroke: "#2F80EB",
+                    strokeWidth: 1,
+                    fillOpacity: 0.1,
+                  },
+                },
+              },
+              {
+                name: "button-remove",
+                args: {
+                  x: "100%",
+                  y: 0,
+                  offset: {
+                    x: 0,
+                    y: 0,
+                  },
+                },
+              },
+            ]);
+            this.curSelectNode = node;
+          } else {
+            this.curSelectNode = null;
+          }
+        } else {
+          this.curSelectNode = node;
+          node.addTools([
+            {
+              name: "boundary",
+              args: {
+                attrs: {
+                  fill: "#16B8AA",
+                  stroke: "#2F80EB",
+                  strokeWidth: 1,
+                  fillOpacity: 0.1,
+                },
+              },
+            },
+            {
+              name: "button-remove",
+              args: {
+                x: "100%",
+                y: 0,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+            },
+          ]);
+        }
+      });
+
+      //左键单击事件
+      this.graph.on("node:click",(evt)=>{
+        const data = evt.node.store.data;
+        const thisData = data.attrs.label.textWrap.text;
+        if(thisData == "表"){
+          this.nodeId = data.id;
+          const node = this.graph.getCellById(this.nodeId);
+          var data1 = node.getData();
+          this.tableInfo = data1;
+          console.log(this.tableInfo);
+          this.taskInputForm = true;
+          this.executeTask();
+        }
+      });
+
+      //双击事件
+      this.graph.on('node:dblclick', (evt) => {
+        const data = evt.node.store.data;
+        console.log(data);
+        // this.showNodeForm(data);
+      });
+
+      // 连线绑定悬浮事件
+      this.graph.on("cell:mouseenter", ({ cell }) => {
+        if (cell.shape == "edge") {
+          cell.addTools([
+            {
+              name: "button-remove",
+              args: {
+                x: "100%",
+                y: 0,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+            },
+          ]);
+          cell.setAttrs({
+            line: {
+              stroke: "#409EFF",
+            },
+          });
+          cell.zIndex = 99; // 保证当前悬停的线在最上层，不会被遮挡
+        }
+      });
+      this.graph.on("cell:mouseleave", ({ cell }) => {
+        if (cell.shape === "edge") {
+          cell.removeTools();
+          cell.setAttrs({
+            line: {
+              stroke: "black",
+            },
+          });
+          cell.zIndex = 1; // 保证未悬停的线在下层，不会遮挡悬停的线
+        }
+      });
+    },
+
+    //添加节点到画布
+    addHandleNode(x, y, id, image, name ,data) {
+      this.graph.addNode({
+        id: id,
+        shape: "image", // 指定使用何种图形，默认值为 'rect'
+        x: x,
+        y: y,
+        width: 60,
+        height: 60,
+        imageUrl: image,
+        attrs: {
+          body: {
+            stroke: "#ffa940",
+            fill: "#ffd591",
+          },
+          label: {
+            textWrap: {
+              width: 90,
+              text: name,
+            },
+            fill: "black",
+            fontSize: 12,
+            refX: 0.5,
+            refY: "100%",
+            refY2: 4,
+            textAnchor: "middle",
+            textVerticalAnchor: "top",
+          },
+        },
+        ports: {
+          groups: {
+            group1: {
+              position: [30, 30],
+            },
+          },
+          items: [
+            {
+              group: "group1",
+              id: "port1",
+              attrs: {
+                circle: {
+                  r: 6,
+                  magnet: true,
+                  stroke: "#ffffff",
+                  strokeWidth: 2,
+                  fill: "#5F95FF",
+                },
+              },
+            },
+          ],
+        },
+        zIndex: 10,
+        data:data,
+      });
+    },
+
+    //初始化
+    initGraph() {
+      const container = document.getElementById("container");
+      this.graph = new Graph({
+        container: container, // 画布容器
+        width: container.offsetWidth, // 画布宽
+        height: container.offsetHeight, // 画布高
+        background: false, // 背景（透明）
+        snapline: true, // 对齐线
+        // 配置连线规则
+        connecting: {
+          snap: true, // 自动吸附
+          allowBlank: false, // 是否允许连接到画布空白位置的点
+          allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
+          allowLoop: true, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
+          highlight: true, // 拖动边时，是否高亮显示所有可用的节点
+          highlighting: {
+            magnetAdsorbed: {
+              name: "stroke",
+              args: {
+                attrs: {
+                  fill: "#5F95FF",
+                  stroke: "#5F95FF",
+                },
+              },
+            },
+          },
+          router: {
+            // 对路径添加额外的点
+            name: "orth",
+          },
+          connector: {
+            // 边渲染到画布后的样式
+            name: "rounded",
+            args: {
+              radius: 8,
+            },
+          },
+        },
+        panning: {
+          enabled: false,
+        },
+        mousewheel: {
+          enabled: true, // 支持滚动放大缩小
+          zoomAtMousePosition: true,
+          modifiers: "ctrl",
+          minScale: 0.5,
+          maxScale: 3,
+        },
+        grid: {
+          type: "dot",
+          size: 20, // 网格大小 10px
+          visible: true, // 渲染网格背景
+          args: {
+            color: "#a0a0a0", // 网格线/点颜色
+            thickness: 2, // 网格线宽度/网格点大小
+          },
+        },
+      });
+      this.nodeAddEvent();
+    },
+  },
+
+};
+</script>
+<style lang="scss" scoped>
+.dashboard-container {
+  .antvBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: black;
+    padding-top: 20px;
+    .menu-list {
+      height: 100%;
+      width: 300px;
+      padding: 0 10px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-content: flex-start;
+      flex-wrap: wrap;
+      > div {
+        margin-bottom: 10px;
+        border-radius: 5px;
+        padding: 0 10px;
+        box-sizing: border-box;
+        cursor: pointer;
+        color: black;
+        width: 105px;
+        display: flex;
+        flex-wrap: wrap;
+
+        justify-content: center;
+        img {
+          height: 50px;
+          width: 50px;
+        }
+        P {
+          width: 90px;
+          text-align: center;
+        }
+      }
+    }
+    .canvas-card {
+      width: 1700px;
+      height: 750px;
+      box-sizing: border-box;
+      > div {
+        width: 1400px;
+        height: 750px;
+        border: 2px dashed #2149ce;
+      }
+    }
+  }
+}
+</style>

src/views/task/task/easyFlow.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <ef>
+
+    </ef>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import ef from "@/components/ef/panel.vue"
+export default {
+  name: "easyFlow",
+  //import引入的组件需要注入到对象中才能使用"
+  components: {
+    ef
+  },
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/task/task/index.vue

@@ -0,0 +1,469 @@
+<template>
+  <div>
+
+    <el-form  label-width="80px" :model="taskReq" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
+      <el-form-item label="任务包含名称">
+        <el-input v-model="taskReq.name"></el-input>
+      </el-form-item>
+      <el-form-item label="优先级选择">
+        <el-select v-model="taskReq.weigh" placeholder="请选择等级">
+          <el-option label="请选择" value=""></el-option>
+          <el-option label="紧急" value="1"></el-option>
+          <el-option label="低" value="2"></el-option>
+          <el-option label="中" value="3"></el-option>
+          <el-option label="高" value="4"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="任务执行状态">
+        <el-select v-model="taskReq.status" placeholder="请选择等级">
+          <el-option label="请选择" value=""></el-option>
+          <el-option label="待执行" value="0"></el-option>
+          <el-option label="正在执行" value="1"></el-option>
+          <el-option label="执行完毕" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-button @click="findSelectTaskList()">
+        查询
+      </el-button>
+    </el-form>
+
+
+
+    <el-col :span="1.5">
+      <el-button
+        v-hasPermi="['system:config:add']"
+        icon="el-icon-plus"
+        plain
+        size="mini"
+        type="primary"
+        @click="handleAdd"
+      >新增
+      </el-button>
+    </el-col>
+
+    <el-table
+      :data="taskList"
+      style="width: 100%"
+
+      @selection-change="handleSelectionChange">
+
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+
+
+      <el-table-column
+        label="id"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="任务名称"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="任务权重级别"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">紧急</span>
+          <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">底</span>
+          <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">中</span>
+          <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">高</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="任务执行状态"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" v-if="scope.row.status ==0 ">待执行</span>
+          <span style="margin-left: 10px" v-if="scope.row.status ==1 ">正在执行</span>
+          <span style="margin-left: 10px" v-if="scope.row.status ==2 ">执行完毕</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="任务完成度"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" v-if="scope.row.status ==0 ">待执行</span>
+          <span style="margin-left: 10px" v-if="scope.row.status ==1 ">正在执行</span>
+          <span style="margin-left: 10px" v-if="scope.row.status ==2 ">执行完毕</span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column
+        align="right">
+        <template slot-scope="scope">
+          <el-button
+            icon="el-icon-pear"
+            size="mini"
+            type="text"
+            @click="executeTask(scope.row)">执行</el-button>
+
+          <el-button
+            icon="el-icon-pear"
+            size="mini"
+            type="text"
+            @click="toDesign(scope.row)">任务设计</el-button>
+
+          <el-button
+            icon="el-icon-delete"
+            size="mini"
+            type="text"
+            @click="handleDelete(scope.row)">删除</el-button>
+
+          <el-button
+            icon="el-icon-update"
+            size="mini"
+            type="text"
+            @click="updateById(scope.row)">修改</el-button>
+        </template>
+
+      </el-table-column>
+    </el-table>
+<!--      添加界面-->
+
+    <el-dialog title="添加任务信息" :visible.sync="dialogFormVisible">
+
+      <el-form :model="taskAddReq">
+        <el-form-item label="任务名称">
+          <el-input v-model="taskAddReq.name"></el-input>
+        </el-form-item>
+
+
+        <el-form-item label="优先级选择">
+          <el-select v-model="taskReq.weigh" placeholder="请选择等级">
+            <el-option label="请选择" value=""></el-option>
+            <el-option label="低" value="1"></el-option>
+            <el-option label="中" value="2"></el-option>
+            <el-option label="高" value="3"></el-option>
+            <el-option label="紧急" value="4"></el-option>
+          </el-select>
+        </el-form-item>
+
+      </el-form>
+
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addTask()">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+<!--    添加任务详情设计-->
+    <el-dialog title="添加表" :visible.sync="taskInputAdd">
+
+      <el-form  label-width="80px" :model="tableInfo" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
+        <el-form-item label="任务id">
+          <el-input v-model="tableInfo.id"></el-input>
+        </el-form-item>
+
+<!--        <el-form-item label="数据库id">-->
+<!--          <el-input v-model="tableInfo.databaseId"></el-input>-->
+<!--        </el-form-item>-->
+        <el-form-item label="数据表">
+          <el-select @change="changeTableName(tableInfo.tableName)" v-model="tableInfo.tableName" placeholder="请选择等级">
+            <el-option label="请选择" value="0"></el-option>
+            <span v-for="table in tableList">
+              <el-option  :label=table.tableName :value=table.id :key=table.id></el-option>
+            </span>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="表别名">
+          <el-input v-model="tableInfo.tableRemark"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="taskInputAdd = false">取 消</el-button>
+        <el-button type="primary" @click="addTaskInput(tableInfo.id)">下一步</el-button>
+      </div>
+
+
+    </el-dialog>
+
+<!--    字段选择列表-->
+    <el-dialog title="添加表" :visible.sync="taskInputFieldAdd">
+
+      <el-table
+        :data="structureList"
+        style="width: 100%"
+
+        @selection-change="handleSelectionChange">
+
+
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+
+
+        <el-table-column
+          label="字段"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="注释"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="是否主键"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="字段类型"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnType }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="字段长度"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="小数"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="非空"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.isNull }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="默认值"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="是否字典"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
+          </template>
+        </el-table-column>
+
+<!--        <el-table-column-->
+<!--          label="处理规则"-->
+<!--          width="180">-->
+<!--          <template slot-scope="scope">-->
+<!--            <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>-->
+<!--            <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>-->
+<!--            <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>-->
+<!--            <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--        <el-table-column-->
+<!--          label="表别名"-->
+<!--          width="180">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-input v-model="scope.row.fieldAsEngineId"></el-input>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
+
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addTask()">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+
+
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {
+  addTask,
+  deleteByTaskId, executeTask, findByTableId, findStructureList,
+  selectTaskList
+} from '@/api/task/task'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      dialogFormVisible:false,
+      //任务设计添加表弹窗
+      taskInputAdd:false,
+      //选择字段弹窗
+      taskInputFieldAdd:false,
+      taskReq:{
+
+      },
+      taskAddReq:{},
+      taskInputReq:{},
+      taskList:[],
+      tableList:[],
+      tableInfo:{},
+      structureList:[],
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //跳转到任务设计界面
+    toDesign(row){
+      this.$router.push({path:'/easyFlow/index/'+row.id, query:{name:row.name}});
+    },
+
+    //选择数据表改变数据
+    changeTableName(row){
+      findByTableId(row).then(res=>{
+        this.tableInfo = res.data;
+      })
+    },
+
+    //查询字段
+    findStructureList(tableId){
+      findStructureList(tableId).then(res=>{
+        this.structureList = res.data;
+      })
+
+    },
+
+
+    executeTask(row){
+      executeTask(row.id).then(res=>{
+        alert(res.msg);
+      });
+    },
+
+
+    addTaskInput(taskInfo){
+      this.taskInputAdd = false;
+      this.findStructureList(taskInfo);
+      this.taskInputFieldAdd = true;
+    },
+
+    //添加页面展示
+    handleAdd(){
+      this.dialogFormVisible = true;
+    },
+
+
+    //添加任务
+    addTask(){
+      addTask(this.taskAddReq).then(res=>{
+        alert(res.msg)
+        if(res.code == 200){
+          location.reload();
+        }
+      });
+    },
+
+    //根据条件查询列表
+    findSelectTaskList(){
+      selectTaskList(this.taskReq).then(res=>{
+        console.log(res.data);
+        this.taskList=res.data;
+        console.log(this.taskList);
+      })
+    },
+
+    updateById(){
+
+    },
+
+    handleDelete(row){
+      deleteByTaskId(row.id).then(res=>{
+        alert(res.msg);
+        if(res.code == 200){
+          location.reload();
+        }
+      })
+    },
+
+    handleSelectionChange(row){
+
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findSelectTaskList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>

src/views/version/version/version.vue

@@ -0,0 +1,329 @@
+<template>
+
+  <div>
+
+    <!--条件查询-->
+
+    <el-form :model="version">
+
+      <el-form-item label="版本编码" prop="pass">
+
+        <el-input type="text" v-model="version.versionCode" autocomplete="off"></el-input>
+
+      </el-form-item>
+
+      <el-form-item label="规则内容" prop="checkPass">
+
+        <el-input type="text" v-model="version.ruleContent" autocomplete="off"></el-input>
+
+      </el-form-item>
+
+      <el-form-item label="引擎维护编号" prop="checkPass">
+
+        <el-input type="text" v-model="version.engineMaintenanceId" autocomplete="off"></el-input>
+
+      </el-form-item>
+
+      <el-form-item>
+
+        <el-button type="primary" @click="submitForm">查询</el-button>
+
+      </el-form-item>
+
+    </el-form>
+
+
+    <!--    添加版本信息-->
+    <el-button type="text" @click="dialogFormVisible = true">添加版本信息</el-button>
+
+    <el-dialog title="添加信息" :visible.sync="dialogFormVisible">
+
+      <el-form :model="version">
+
+        <el-form-item label="版本类名" :label-width="formLabelWidth">
+
+          <el-input v-model="version.versionClass" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+        <el-form-item label="版本名称" :label-width="formLabelWidth">
+
+          <el-input v-model="version.name" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+
+        <el-form-item label="版本编码" :label-width="formLabelWidth">
+
+          <el-input v-model="version.versionCode" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+
+        <el-form-item label="是否激活" :label-width="formLabelWidth">
+
+          <el-input v-model="version.isActivate" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+
+        <el-form-item label="版本状态" :label-width="formLabelWidth">
+
+          <el-input v-model="version.status" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+
+        <el-form-item label="版本测试状态" :label-width="formLabelWidth">
+
+          <el-input v-model="version.testStatus" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+
+        <el-form-item label="规则内容" :label-width="formLabelWidth">
+
+          <el-input v-model="version.ruleContent" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+
+        <el-form-item label="引擎维护编号" :label-width="formLabelWidth">
+
+          <el-input v-model="version.engineMaintenanceId" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+
+        <el-form-item label="描述" :label-width="formLabelWidth">
+
+          <el-input v-model="version.description" autocomplete="off"></el-input>
+
+        </el-form-item>
+
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+        <el-button type="primary" @click="insert">确 定</el-button>
+
+      </div>
+
+    </el-dialog>
+
+    <!--    列表-->
+    <el-table :data="arr" style="width: 100%">
+
+      <el-table-column label="编号" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="版本类名" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.versionClass }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="版本名称" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.name }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="版本编码" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.versionCode }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="是否激活" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.isActivate }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="版本状态" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.status }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="版本测试状态" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.testStatus }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="规则内容" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.ruleContent }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="引擎维护编号" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.engineMaintenanceId }}</span>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column label="描述" width="180">
+
+        <template slot-scope="scope">
+
+          <span style="margin-left: 10px">{{ scope.row.description }}</span>
+
+        </template>
+
+      </el-table-column>
+
+
+      <el-table-column label="操作">
+
+        <template slot-scope="scope">
+
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除
+
+          </el-button>
+
+        </template>
+
+      </el-table-column>
+
+    </el-table>
+
+  </div>
+
+</template>
+
+<script>
+
+import {list} from "@/api/version/version";
+
+import {del, insert} from "@/api/version/version";
+
+export default {
+
+  //import引入的组件需要注入到对象中才能使用"
+
+  components: {},
+
+  props: {},
+
+  data() {
+
+    //这里存放数据"
+
+    return {
+
+      arr: [],
+
+      version: {},
+
+      dialogFormVisible: false,
+
+      formLabelWidth: '120px'
+
+    };
+
+  },
+
+  methods: {
+
+    List() {
+
+      list(this.version).then(res => {
+
+        this.arr = res.data;
+
+      })
+
+    },
+
+    submitForm() {
+
+      this.List();
+
+    },
+
+    insert() {
+
+      insert(this.version).then(res => {
+
+        this.$message.success("添加成功");
+
+      })
+
+      this.dialogFormVisible = false;
+
+    },
+
+    handleDelete(id) {
+
+      if (confirm("你确定删除吗?")) {
+
+        del(id).then(res => {
+
+          this.$message.success(res.msg || "删除成功")
+
+        })
+
+      }
+
+    }
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+
+  created() {
+
+    this.List();
+
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/workbench/rate/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+  <div class="container">
+    <div class="card left-card">
+      <el-card style="margin-top: 50px;">
+
+      </el-card>
+    </div>
+    <div class="card right-card">
+      <el-card style="margin-top: 50px;">
+        <h3>账户余额</h3>
+        <h1>￥:{{ userBalanceData.userBalance || '加载中...' }}</h1>
+      </el-card>
+    </div>
+  </div>
+    <el-card style="margin-top: 50px;">
+      <h3>接口列表</h3>
+      <el-divider></el-divider>
+<!--      <el-table  :data="tableData">-->
+<!--        <el-table-column label="">-->
+<!--          <template slot-scope="scope">-->
+<!--            <span style="margin-left: 10px">{{ scope.row.connectorName }}</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--      </el-table>-->
+    </el-card>
+  </div>
+
+</template>
+
+<script>
+import {userBalance} from "@/api/system/user";
+import {getInfo} from '@/api/login'
+import {findConnectorList} from "@/api/port/port";
+export default {
+  name: 'Cards',
+  data() {
+    return {
+      form:{},
+      tableData:[],
+      userBalanceData: {
+        userBalance: '加载中...',
+      },
+    }
+  },
+  created() {
+    this.fetchUserBalance();
+    this.findConnectorList();
+  },
+  methods: {
+    findConnectorList(){
+      findConnectorList(this.form).then((res)=>{
+        this.tableData=res.data;
+      })
+    },
+     async fetchUserBalance() {
+       try {
+         const userId = localStorage.getItem('userId');
+         console.log(userId)// 登录后把userId存到了localStorage
+         if (!userId) {
+           this.userBalanceData = { userBalance: '未登录' };
+           return;
+         }
+         const response = await userBalance(userId);
+         if (response.data ) {
+           console.log(response.data)
+           this.userBalanceData.userBalance = response.data;
+         } else {
+           this.userBalanceData.userBalance = { userBalance: '获取失败' };
+         }
+       } catch (error) {
+         this.userBalanceData = { userBalance: '获取失败' };
+         console.error('Error fetching user balance:', error);
+       }
+     },
+ }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+}
+
+.card {
+  width: 50%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.left-card {
+  background-color: #f1f1f1;
+}
+
+.right-card {
+  background-color: #e1e1e1;
+}
+</style>

vue.config.js

@@ -23,6 +23,8 @@ module.exports = {
   outputDir: 'dist',
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
   assetsDir: 'static',
+
+
   // 是否开启eslint保存检测，有效值：ture | false | 'error'
   lintOnSave: process.env.NODE_ENV === 'development',
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
@@ -35,7 +37,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://172.13.1.1/prod-api`,
+        target: `http://172.13.1.1/prod-api/`,
+        // target: `http://127.0.0.1/8080`, `http://172.13.1.1/prod-api`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''