初始化项目

1 year ago · 7227bb8495
22 changed files with 15526 additions and 0 deletions
--- a/kcui/README.md
+++ b/kcui/README.md
@ -0,0 +1,24 @@
+# testvue
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/kcui/babel.config.js
+++ b/kcui/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/kcui/jsconfig.json
+++ b/kcui/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/kcui/package.json
+++ b/kcui/package.json
@ -0,0 +1,47 @@
+{
+  "name": "testvue",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "js-cookie": "^3.0.5",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/kcui/public/favicon.ico
+++ b/kcui/public/favicon.ico
--- a/kcui/public/index.html
+++ b/kcui/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/kcui/src/App.vue
+++ b/kcui/src/App.vue
@ -0,0 +1,21 @@
+<template>
+  <router-view ></router-view>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
--- a/kcui/src/api/login.js
+++ b/kcui/src/api/login.js
@ -0,0 +1,34 @@
+import request  from "@/utils/request";
+
+// 登录方法
+export function userLogin() {
+    return request({
+        url: '/user/doLogin',
+        method: 'get',
+    })
+}
+
+
+export function test() {
+    return request({
+        url: '/user/test',
+        method: 'get',
+    })
+}
+
+
+//获取图谱数据
+// export function getgraphInfo(data) {
+//     return request({
+//         url: '/user/getDomainGraphTest',
+//         method: 'post',
+//         data: data
+//     })
+// }
+export function getgraphInfo(data) {
+    return request({
+        url: '/graph/getDomainGraphTest',
+        method: 'post',
+        data: data
+    })
+}
--- a/kcui/src/api/upload.js
+++ b/kcui/src/api/upload.js
@ -0,0 +1,10 @@
+//import axios from '../axios'
+import request from '@/utils/request';
+
+export const uploadInfo = (params) => {
+  return request({
+    url: '/api/updateload/upload',
+    method: 'post',
+    data: params,
+  });
+};
--- a/kcui/src/assets/defaultConfig.js
+++ b/kcui/src/assets/defaultConfig.js
@ -0,0 +1,30 @@
+export const config = {
+  background:'40,47,183',
+  node: { //节点的默认配置
+    label: { //标签配置
+      show: false, //是否显示
+      color: '20,20,20', //字体颜色
+      font: 'normal 30px Arial', //字体大小及类型
+      textPosition: 'Bottom_Center' //文字位置 Top_Center,Bottom_Center,Middle_Right,Middle_Center
+    },
+    shape: 'circle',
+    showLabel:false,
+  },
+  link: { //连线的默认配置
+    label: { //连线标签
+      show: true, //是否显示
+      color: '255,255,255', //字体颜色
+      font: 'normal 13px Arial', //字体大小及类型
+      //background:'220,220,220' //标签背景色
+    },
+    lineType: 'direct', //连线类型,direct,curver,vlink,hlink,vbezier,hbezier,bezier
+    colorType: 'defined', //连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色，defined:自定义
+    alpha: 1, // 连线透明度
+    showArrow: true, //显示连线箭头
+  },
+  lineColor:'202,202,202',
+  layerName:'frDirect',
+
+  wheelZoom: 0.8, //开启鼠标滚轮缩放
+  highLightNeiber: false //相邻节点高亮开关
+}
--- a/kcui/src/assets/js/graphvis.layout.min.js
+++ b/kcui/src/assets/js/graphvis.layout.min.js
--- a/kcui/src/assets/js/graphvis.min.20241008.js
+++ b/kcui/src/assets/js/graphvis.min.20241008.js
--- a/kcui/src/assets/logo.png
+++ b/kcui/src/assets/logo.png
--- a/kcui/src/components/HelloWorld.vue
+++ b/kcui/src/components/HelloWorld.vue
@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/kcui/src/main.js
+++ b/kcui/src/main.js
@ -0,0 +1,16 @@
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router';
+
+import router from '../src/router/router.js'
+
+
+Vue.config.productionTip = false
+
+
+// 安装 Vue Router 插件
+Vue.use(VueRouter);
+new Vue({
+  router, // 将路由器传递给 Vue 实例
+  render: h => h(App),
+}).$mount('#app')
--- a/kcui/src/router/router.js
+++ b/kcui/src/router/router.js
@ -0,0 +1,25 @@
+//1.导入vue 和 vuerouter 的包
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '@/view/Home.vue'
+import Book from '@/view/Book.vue'
+
+//2.调用vue.use() 函数，把 VueRouter 安装为 Vue 的插件
+//vue.use()函数的作用，就是来安装插件的
+Vue.use(VueRouter)
+
+
+export default new VueRouter({
+    routes: [              //配置路由，这里是个数组
+        {                    //每一个链接都是一个对象
+            path: '/',         //链接路径
+            name: 'Home',     //路由名称，
+            component: Home   //对应的组件模板
+        },
+        {                    //每一个链接都是一个对象
+            path: '/Book',         //链接路径
+            name: 'Book',     //路由名称，
+            component: Book   //对应的组件模板
+        },
+]
+})
--- a/kcui/src/utils/auth.js
+++ b/kcui/src/utils/auth.js
@ -0,0 +1,14 @@
+// utils/auth.js
+import Cookies from 'js-cookie';
+
+export const setToken = (token) => {
+    Cookies.set('satoken', token, { expires: 7, secure: true, sameSite: 'strict' }); // Token有效期为7天
+};
+
+export const getToken = () => {
+    return Cookies.get('satoken');
+};
+
+export const removeToken = () => {
+    Cookies.remove('satoken');
+};
--- a/kcui/src/utils/request.js
+++ b/kcui/src/utils/request.js
@ -0,0 +1,137 @@
+import axios from 'axios';
+
+// import { ElMessage } from "element-ui";
+// import router from '../router/router';
+
+// create an axios instance
+const service = axios.create({
+  // baseURL: "http://127.0.0.1:10031/", // api 的 base_url
+  baseURL: "http://127.0.0.1:10031/", // api 的 base_urls
+  withCredentials: true,
+  timeout: 300000, // request timeout
+});
+
+// request interceptor
+service.interceptors.request.use(
+  (config) => {
+    //config.headers['token'] = Auth.getToken()
+    return config;
+  },
+  (error) => {
+    // Do something with request error
+    // console.log(error) // for debug
+    Promise.reject(error);
+  }
+);
+
+// response interceptor
+service.interceptors.response.use(
+  //response => response,
+  /**
+   * 下面的注释为通过在response里，自定义code来标示请求状态
+   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
+   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
+   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
+   */
+  // response => {
+  //   const res = response.data
+  //   if (res.code !== 20000) {
+  //     Message({
+  //       message: res.message,
+  //       type: 'error',
+  //       duration: 5 * 1000
+  //     })
+  //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+  //       // 请自行在引入 MessageBox
+  //       // import { Message, MessageBox } from 'element-ui'
+  //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+  //         confirmButtonText: '重新登录',
+  //         cancelButtonText: '取消',
+  //         type: 'warning'
+  //       }).then(() => {
+  //         store.dispatch('FedLogOut').then(() => {
+  //           location.reload() // 为了重新实例化vue-router对象 避免bug
+  //         })
+  //       })
+  //     }
+  //     return Promise.reject('error')
+  //   } else {
+  //     return response.data
+  //   }
+  // },
+  (response) => {
+    let data;
+    // IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
+    if (response.data == undefined) {
+      data = JSON.parse(response.request.responseText);
+    } else {
+      data = response.data;
+      // const code  = response.data.code
+      // if(code == '0') {
+      //     data = response.data.data
+      // }else {
+      //     Message({
+      //         message: response.data.msg,
+      //         type: 'error',
+      //         duration: 5 * 1000
+      //     })
+      //     return Promise.reject('error')
+      // }
+    }
+    return data;
+  },
+  (error) => {
+    if (error && error.response) {
+      switch (error.response.status) {
+        case 400:
+          error.message = '数据请求错误';
+          break;
+        case 401:
+          error.message = '未授权，请登录';
+          break;
+        case 403:
+          error.message = '拒绝访问';
+          break;
+        case 404:
+          error.message = '请求地址出错';
+          break;
+        case 408:
+          error.message = '请求超时';
+          break;
+        case 500:
+          error.message = '服务器内部错误';
+          break;
+        case 501:
+          error.message = '服务未实现';
+          break;
+        case 502:
+          error.message = '网关错误';
+          break;
+        case 503:
+          error.message = '服务不可用';
+          break;
+        case 504:
+          error.message = '网关超时';
+          break;
+        case 505:
+          error.message = 'HTTP版本不受支持';
+          break;
+        default:
+      }
+    }
+    // ElMessage({
+    //   message: error.message || '系统错误！',
+    //   type: 'error',
+    //   duration: 3 * 1000,
+    // });
+    // if (error.response.status == 403) {
+    //   // eslint-disable-next-line no-undef
+    //   clearAllSession();
+    //   router.push('/');
+    // }
+    // return Promise.reject(error);
+  }
+);
+
+export default service;
--- a/kcui/src/utils/util.js
+++ b/kcui/src/utils/util.js
@ -0,0 +1,228 @@
+import Vue from "vue";
+let getevent = () => {
+  var Event = new Vue();
+  return Event;
+};
+const vueEvent = getevent();
+export { vueEvent };
+// 获取UUID
+export function getUUID() {
+  var s = [];
+  var hexDigits = '0123456789abcdef';
+  for (var i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+  s[8] = s[13] = s[18] = s[23] = '-';
+
+  var uuid = s.join('');
+  return uuid;
+}
+//本地存储
+export function getlocal(name) {
+  let data = localStorage.getItem(name);
+  if (data != null && data != '') {
+    try {
+      let obj = eval('(' + data + ')');
+      return obj;
+    } catch (e) {
+      return '';
+    }
+  } else {
+    return '';
+  }
+}
+export function getSession(name) {
+  let data = sessionStorage.getItem(name);
+  if (data != null && data != '') {
+    try {
+      let obj = eval('(' + data + ')');
+      return obj;
+    } catch (e) {
+      return '';
+    }
+  } else {
+    return '';
+  }
+}
+export function setLocal(key, value) {
+  window.localStorage.setItem(key, JSON.stringify(value));
+}
+export function setSession(key, value) {
+  window.sessionStorage.setItem(key, JSON.stringify(value));
+}
+export function clearOneLocal(key) {
+  window.localStorage.removeItem(key);
+}
+export function clearOneSession(key) {
+  window.sessionStorage.removeItem(key);
+}
+export function clearAllLocal() {
+  window.localStorage.clear();
+}
+export function clearAllSession() {
+  window.sessionStorage.clear();
+}
+// 时间格式化
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null;
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
+  let date;
+  if (typeof time === 'object') {
+    date = time;
+  } else {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+      time = parseInt(time);
+    }
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000;
+    }
+    date = new Date(time);
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay(),
+  };
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key];
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value];
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value;
+    }
+    return value || 0;
+  });
+  return time_str;
+}
+export function formatTime(time, option) {
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000;
+  } else {
+    time = +time;
+  }
+  const d = new Date(time);
+  const now = Date.now();
+
+  const diff = (now - d) / 1000;
+
+  if (diff < 30) {
+    return '刚刚';
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前';
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前';
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前';
+  }
+  if (option) {
+    return parseTime(time, option);
+  } else {
+    return (
+      d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+    );
+  }
+}
+//登录错误提示
+export function errortip(info) {
+  vueEvent.$message({
+    message: info,
+    type: 'error',
+    duration: '2000',
+  });
+}
+//成功提示
+export function successtip(info) {
+  vueEvent.$message({
+    message: info,
+    type: 'success',
+    duration: '2000',
+  });
+}
+//警告提示
+export function warningtip(info) {
+  vueEvent.$message({
+    message: info,
+    type: 'warning',
+    duration: '2000',
+  });
+}
+// 单位格式化
+export function numberFormat(value) {
+  var param = '';
+  var k = 10000,
+    sizes = ['', '万', '亿', '万亿'],
+    i;
+  if (value < k) {
+    param = value;
+  } else {
+    i = Math.floor(Math.log(value) / Math.log(k));
+    param = (value / Math.pow(k, i)).toFixed(1) + sizes[i];
+  }
+  return param;
+}
+// 数据格式化
+export function converdata(limit) {
+  limit = limit * 1;
+  var size = '';
+  if (limit < 1024) {
+    size = limit + 'KB';
+  } else if (limit < 1024 * 1024) {
+    size = (limit / 1024).toFixed(1) + 'MB';
+  } else if (limit < 1024 * 1024 * 1024) {
+    size = (limit / (1024 * 1024)).toFixed(1) + 'GB';
+  } else {
+    size = (limit / (1024 * 1024 * 1024)).toFixed(1) + 'TB';
+  }
+  return size;
+  // var sizestr = size + "";
+  // var len = sizestr.indexOf("\.");
+  // var dec = sizestr.substr(len + 1, 2);
+  // if(dec == "0"){//当小数点后为00时 去掉小数部分
+  //     return sizestr.substring(0,len) + sizestr.substr(len + 3,2);
+  // }
+  // return sizestr;
+}
+// 单位格式化
+export function converunit(limit) {
+  limit = limit * 1;
+  var size = '';
+  if (limit < 1024) {
+    size = 'KB';
+  } else if (limit < 1024 * 1024) {
+    size = 'MB';
+  } else if (limit < 1024 * 1024 * 1024) {
+    size = 'GB';
+  } else {
+    size = 'TB';
+  }
+  return size;
+}
+// 颜色转换
+// export function colorRgb(color) {
+//   var color = color.toLowerCase();
+//   var pattern = /^#([0-9|a-f]{3}|[0-9|a-f]{6})$/;
+//   if (color && pattern.test(color)) {
+//     if (color.length == 4) {
+//       // 将三位转换为六位
+//       color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+//     }
+//     //处理六位的颜色值
+//     var colorNew = [];
+//     for (var i = 1; i < 7; i += 2) {
+//       colorNew.push(parseInt('0x' + color.slice(i, i + 2)));
+//     }
+//     return colorNew.join(',');
+//   }
+//   return color;
+// }
--- a/kcui/src/view/Book.vue
+++ b/kcui/src/view/Book.vue
@ -0,0 +1,274 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="width: 100%;height: 4vw;background-color: #42b983;">
+      <div style="background-color: silver;width: 3vw;height: 2vw;line-height: 2vw;text-align: center;" @click="goHome">跳转回去</div>
+    </div>
+    <div>
+
+
+      aaaaaaaaaaaaaaaaaaa{{num}}
+
+    </div>
+<!--    <div style="width: 100%;height: 100%;">-->
+<!--      <div class="gContainer">-->
+<!--        <div id="graph-panel" style="width: 100%;height: 100%;"></div>-->
+<!--      </div>-->
+<!--    </div>-->
+  </div>
+
+</template>
+<script>
+import {getgraphInfo} from "@/api/login";
+import VisGraph from '@/assets/js/graphvis.min.20241008.js'
+import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
+import {config} from '@/assets/defaultConfig.js'
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Home',
+  data() {
+    return{
+      num:undefined,
+      infos:[],
+      demoData:{},
+      graphData: {
+        nodes: [],
+        links: []
+      },
+      config,
+    }
+  },
+  methods:{
+    goHome(){
+      this.$router.push('/')
+    },
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+    getInfo(){
+      var data = {}
+      getgraphInfo(data).then((res)=>{
+        console.log(res);
+        this.infos = res;
+        var data1 = {};
+        data1.nodes = this.infos.docList;
+        data1.links = this.infos.relaList;
+        this.zhengl(data1)
+
+      })
+    },
+    async drawGraphData() {
+      this.graphData = this.demoData;
+      if (this.visGraph === null) {
+        this.createGraph();
+        // this.genrateGraphData();
+        this.visGraph.drawData(this.graphData);
+        // this.refreshGraphData();
+        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
+        this.reLayout();
+        // this.goCenter();
+      } else {
+        this.createGraph();
+
+        this.visGraph.drawData(this.graphData);
+        // this.refreshGraphData();
+        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
+        this.reLayout();
+        // this.goCenter();
+      }
+      this.loading = false;
+    },
+    // 创建全局绘图客户端对象
+    createGraph() {
+      this.visGraph = new VisGraph(document.getElementById('graph-panel'), this.config)
+    },
+    // 执行布局算法
+    reLayout(alpha) {
+      var that = this;
+      if (alpha == null) {
+        that.visLayout = null;
+        that.visLayout = new LayoutFactory(this.visGraph.getGraphData()).createLayout('fastFR');
+        that.visLayout.resetConfig({
+          label: {
+            show: true
+          },
+          friction: 0.8,
+          linkDistance: 400,
+          linkStrength: 0.2,
+          charge: -1000,
+          gravity: 0.01,
+          noverlap: true,
+          size: [that.visGraph.stage.width, that.visGraph.stage.height]
+        });
+      } else {
+        that.visLayout.alpha += (alpha > 1 ? 0.2 : alpha); //继续运动
+      }
+
+      runLayout();//开始继续动画执行
+
+      //通过动画帧控制控制布局算法的执行，有动画效果
+      function runLayout() {
+        cancelAnimationFrame(that.layoutLoopName);//停止动画控制
+        that.visLayout.runLayout();  //运行布局算法
+        that.visGraph.refresh();
+        if (that.visLayout.alpha > 0.05) {
+          that.layoutLoopName = requestAnimationFrame(runLayout);
+        } else {
+          if (that.visGraph.currentNode && that.visGraph.currentNode.isDragging) {
+            that.visLayout.alpha = 0.1; //继续运动
+            that.layoutLoopName = requestAnimationFrame(runLayout);
+          } else {
+            that.visLayout.alpha = 0; //停止运动
+            cancelAnimationFrame(that.layoutLoopName);
+          }
+        }
+      }
+
+      // this.autoLayout();
+    },
+    zhengl(data) {
+      const nodes = []
+      const links = [] // 存放节点和关系
+      // const nodeSet = [] // 存放去重后nodes的id
+      var nodeList = data.nodes;
+      var lineList = data.links;
+      console.log(nodeList);
+      console.log(lineList);
+      for (let a = 0; a < nodeList.length; a++) {
+        if (nodeList[a].group == '0') {
+          const aaa = {name: nodeList[a].docTitle, docId: nodeList[a].docId,docLevel: nodeList[a].group}
+          nodes.push({
+            id: nodeList[a].Id,
+            label: nodeList[a].docTitle,
+            properties: aaa,
+            size: 450,
+            color: '227,203,0',
+            font: 'normal 70px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '1') {
+          const aaa = {name: nodeList[a].docTitle, docId: nodeList[a].docId,docLevel: nodeList[a].group}
+          nodes.push({
+            id: nodeList[a].Id,
+            label: nodeList[a].docTitle,
+            properties: aaa,
+            size: 350,
+            width:350,
+            height:300,
+            color: '47,47,230',
+            font: 'normal 68px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '2') {
+          const aaa = {name: nodeList[a].docTitle, docId: nodeList[a].docId,docLevel: nodeList[a].group}
+          nodes.push({
+            id: nodeList[a].Id,
+            label: nodeList[a].docTitle,
+            properties: aaa,
+            size: 300,
+            width:300,
+            height:250,
+            color: '255,138,0',
+            font: 'normal 50px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '3') {
+          const aaa = {name: nodeList[a].docTitle, docId: nodeList[a].docId,docLevel: nodeList[a].group}
+          nodes.push({
+            id: nodeList[a].Id,
+            label: nodeList[a].docTitle,
+            properties: aaa,
+            size: 250,
+            width:250,
+            height:250,
+            color: '30,255,0',
+            font: 'normal 40px Arial',
+            fontColor: '0,0,0'
+          })
+        }
+        if (nodeList[a].group == '4') {
+          const aaa = {name: nodeList[a].docTitle, docId: nodeList[a].docId,docLevel: nodeList[a].group}
+          nodes.push({
+            id: nodeList[a].Id,
+            label: nodeList[a].docTitle,
+            properties: aaa,
+            size: 200,
+            width:200,
+            height:200,
+            color: '248,143,248',
+            font: 'normal 32px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '5') {
+          const aaa = {name: nodeList[a].docTitle, docId: nodeList[a].docId,docLevel: nodeList[a].group}
+          nodes.push({
+            id: nodeList[a].Id,
+            label: nodeList[a].docTitle,
+            properties: aaa,
+            size: 150,
+            width:150,
+            height:150,
+            color: '65,154,255',
+            font: 'normal 30px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '6') {
+          const aaa = {name: nodeList[a].docTitle, docId: nodeList[a].docId,docLevel: nodeList[a].group}
+          nodes.push({
+            id: nodeList[a].Id,
+            label: nodeList[a].docTitle,
+            properties: aaa,
+            size: 100,
+            width:100,
+            height:100,
+            color: '0,228,255',
+            font: 'normal 28px Arial',
+            fontColor: '0,0,0'
+          })
+        }
+
+      }
+
+
+      for (let b = 0; b < lineList.length; b++) {
+
+        var bbb = {name: lineList[b].relate}
+        links.push({
+          source: lineList[b].source,
+          target: lineList[b].target,
+          type: lineList[b].relate,
+          properties: bbb,
+          color: '202,202,202',
+          lineWidth: 3,
+        })
+      }
+
+      this.demoData = {
+        "nodes": nodes,
+        "links": links
+      }
+      this.drawGraphData();
+    }
+  },
+  mounted() {
+    // this.getInfo();
+    this.num = this.$route.query.id;
+  }
+}
+</script>
+<style scoped>
+.gContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+  height: 45vw;
+}
+</style>
--- a/kcui/src/view/Home.vue
+++ b/kcui/src/view/Home.vue
@ -0,0 +1,276 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="width: 100%;height: 4vw;background-color: #42b983;">
+      <div style="background-color: silver;width: 3vw;height: 2vw;line-height: 2vw;text-align: center;" @click="goBook">跳转1</div>
+    </div>
+    <div style="width: 100%;height: 100%;">
+      <div class="gContainer">
+        <div id="graph-panel" style="width: 100%;height: 100%;"></div>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+import {getgraphInfo, test, userLogin} from "@/api/login";
+import VisGraph from '@/assets/js/graphvis.min.20241008.js'
+import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
+import {config} from '@/assets/defaultConfig.js'
+
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Home',
+  data() {
+    return{
+       infos:[],
+      demoData:{},
+      graphData: {
+        nodes: [],
+        links: []
+      },
+      config,
+    }
+  },
+  methods:{
+    goBook(){
+      this.$router.push({name:'Book',query: {id:'1'}})
+    },
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+    getInfo(){
+      var data = {}
+      getgraphInfo(data).then((res)=>{
+        this.zhengl(res.data);
+
+      })
+    },
+    async drawGraphData() {
+      this.graphData = this.demoData;
+      if (this.visGraph === null) {
+        this.createGraph();
+        // this.genrateGraphData();
+        this.visGraph.drawData(this.graphData);
+        // this.refreshGraphData();
+        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
+        this.reLayout();
+        // this.goCenter();
+      } else {
+        this.createGraph();
+
+        this.visGraph.drawData(this.graphData);
+        // this.refreshGraphData();
+        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
+        this.reLayout();
+        // this.goCenter();
+      }
+      this.loading = false;
+    },
+    // 创建全局绘图客户端对象
+    createGraph() {
+      this.visGraph = new VisGraph(document.getElementById('graph-panel'), this.config)
+    },
+    // 执行布局算法
+    reLayout(alpha) {
+      var that = this;
+      if (alpha == null) {
+        that.visLayout = null;
+        that.visLayout = new LayoutFactory(this.visGraph.getGraphData()).createLayout('fastFR');
+        that.visLayout.resetConfig({
+          label: {
+            show: true
+          },
+          friction: 0.8,
+          linkDistance: 400,
+          linkStrength: 0.2,
+          charge: -1000,
+          gravity: 0.01,
+          noverlap: true,
+          size: [that.visGraph.stage.width, that.visGraph.stage.height]
+        });
+      } else {
+        that.visLayout.alpha += (alpha > 1 ? 0.2 : alpha); //继续运动
+      }
+
+      runLayout();//开始继续动画执行
+
+      //通过动画帧控制控制布局算法的执行，有动画效果
+      function runLayout() {
+        cancelAnimationFrame(that.layoutLoopName);//停止动画控制
+        that.visLayout.runLayout();  //运行布局算法
+        that.visGraph.refresh();
+        if (that.visLayout.alpha > 0.05) {
+          that.layoutLoopName = requestAnimationFrame(runLayout);
+        } else {
+          if (that.visGraph.currentNode && that.visGraph.currentNode.isDragging) {
+            that.visLayout.alpha = 0.1; //继续运动
+            that.layoutLoopName = requestAnimationFrame(runLayout);
+          } else {
+            that.visLayout.alpha = 0; //停止运动
+            cancelAnimationFrame(that.layoutLoopName);
+          }
+        }
+      }
+
+      // this.autoLayout();
+    },
+    zhengl(data) {
+      const nodes = []
+      const links = [] // 存放节点和关系
+
+      var nodeList = data.nodes;
+      var lineList = data.links;
+
+      var allOne = nodeList[0].docId
+      for (let a = 0; a < nodeList.length; a++) {
+        if (nodeList[a].group == '0') {
+          const aaa = {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne}
+          nodes.push({
+            id: nodeList[a].id,
+            label: nodeList[a].name,
+            properties: aaa,
+            size: 450,
+            color: '227,203,0',
+            font: 'normal 70px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '1') {
+          const aaa = {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne}
+          nodes.push({
+            id: nodeList[a].id,
+            label: nodeList[a].name,
+            properties: aaa,
+            size: 350,
+            width:350,
+            height:300,
+            color: '47,47,230',
+            font: 'normal 68px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '2') {
+          const aaa = {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne}
+          nodes.push({
+            id: nodeList[a].id,
+            label: nodeList[a].name,
+            properties: aaa,
+            size: 300,
+            width:300,
+            height:250,
+            color: '255,138,0',
+            font: 'normal 50px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '3') {
+          const aaa = {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne}
+          nodes.push({
+            id: nodeList[a].id,
+            label: nodeList[a].name,
+            properties: aaa,
+            size: 250,
+            width:250,
+            height:250,
+            color: '30,255,0',
+            font: 'normal 40px Arial',
+            fontColor: '0,0,0'
+          })
+        }
+        if (nodeList[a].group == '4') {
+          const aaa = {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne}
+          nodes.push({
+            id: nodeList[a].id,
+            label: nodeList[a].name,
+            properties: aaa,
+            size: 200,
+            width:200,
+            height:200,
+            color: '248,143,248',
+            font: 'normal 32px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '5') {
+          const aaa = {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne}
+          nodes.push({
+            id: nodeList[a].id,
+            label: nodeList[a].name,
+            properties: aaa,
+            size: 150,
+            width:150,
+            height:150,
+            color: '65,154,255',
+            font: 'normal 30px Arial',
+            fontColor: '255,255,255'
+          })
+        }
+        if (nodeList[a].group == '6') {
+          const aaa = {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne}
+          nodes.push({
+            id: nodeList[a].id,
+            label: nodeList[a].name,
+            properties: aaa,
+            size: 100,
+            width:100,
+            height:100,
+            color: '0,228,255',
+            font: 'normal 28px Arial',
+            fontColor: '0,0,0'
+          })
+        }
+
+      }
+
+
+      for (let b = 0; b < lineList.length; b++) {
+
+        var bbb = {name: lineList[b].relate}
+        links.push({
+          source: lineList[b].source,
+          target: lineList[b].target,
+          type: lineList[b].relate,
+          properties: bbb,
+          color: '202,202,202',
+          lineWidth: 3,
+        })
+      }
+
+      this.demoData = {
+        "nodes": nodes,
+        "links": links
+      }
+      this.drawGraphData();
+    },
+
+    doLogin(){
+      userLogin().then((res)=>{
+        console.log(res);
+        this.testInfo();
+        this.getInfo();
+      })
+    },
+    testInfo(){
+      test().then((res)=>{
+        console.log(res);
+      })
+    }
+  },
+  mounted() {
+    this.doLogin();
+
+  }
+}
+</script>
+<style scoped>
+.gContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+  height: 45vw;
+}
+</style>
--- a/kcui/vue.config.js
+++ b/kcui/vue.config.js
@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})