├── Empty ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── README.md └── index.vue ├── SideBar ├── 效果图.gif ├── SidebarItem.vue ├── SideBar.vue └── README.md ├── Pagination ├── 效果图.gif ├── index.vue └── README.md ├── UploadFile ├── 效果图.gif ├── README.md └── index.vue ├── VueHoverMask ├── 效果图.gif ├── README.md └── index.vue ├── JTopoInVue ├── static │ └── bg.jpg ├── main.js ├── App.vue ├── index.html ├── components │ └── jTopo.vue ├── package.json ├── README.md ├── webpack.config.js └── lib │ └── jtopo-0.4.8-min.js ├── MergeTableCell ├── main.js ├── README.md ├── index.html ├── package.json ├── webpack.config.js ├── App.vue └── data.js ├── nprogresBar ├── router.js └── README.md ├── LICENSE ├── ExportExcel ├── index.vue ├── README.md └── Export2Excel.js ├── README.md └── BackToTop ├── README.md └── index.vue /Empty/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/Empty/1.png -------------------------------------------------------------------------------- /Empty/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/Empty/2.png -------------------------------------------------------------------------------- /Empty/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/Empty/3.png -------------------------------------------------------------------------------- /Empty/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/Empty/4.png -------------------------------------------------------------------------------- /SideBar/效果图.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/SideBar/效果图.gif -------------------------------------------------------------------------------- /Pagination/效果图.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/Pagination/效果图.gif -------------------------------------------------------------------------------- /UploadFile/效果图.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/UploadFile/效果图.gif -------------------------------------------------------------------------------- /VueHoverMask/效果图.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/VueHoverMask/效果图.gif -------------------------------------------------------------------------------- /JTopoInVue/static/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/HEAD/JTopoInVue/static/bg.jpg -------------------------------------------------------------------------------- /JTopoInVue/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App), 7 | }) 8 | -------------------------------------------------------------------------------- /MergeTableCell/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App), 7 | }) 8 | -------------------------------------------------------------------------------- /MergeTableCell/README.md: -------------------------------------------------------------------------------- 1 | # 1.运行demo 2 | 3 | ``` bash 4 | # install dependencies 5 | npm install 6 | 7 | # serve with hot reload at localhost:8080 8 | npm run dev 9 | 10 | # build for production with minification 11 | npm run build 12 | ``` 13 | 14 | -------------------------------------------------------------------------------- /JTopoInVue/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | -------------------------------------------------------------------------------- /MergeTableCell/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mergeTableCell 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /JTopoInVue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JTopoInVue 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JTopoInVue/components/jTopo.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | -------------------------------------------------------------------------------- /JTopoInVue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "JTopo in Vue", 3 | "description": "JTopo in Vue", 4 | "version": "1.0.0", 5 | "author": "NLRX", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.11" 14 | }, 15 | "browserslist": [ 16 | "> 1%", 17 | "last 2 versions", 18 | "not ie <= 8" 19 | ], 20 | "devDependencies": { 21 | "babel-core": "^6.26.0", 22 | "babel-loader": "^7.1.2", 23 | "babel-plugin-component": "^1.1.1", 24 | "babel-preset-env": "^1.6.0", 25 | "babel-preset-stage-3": "^6.24.1", 26 | "cross-env": "^5.0.5", 27 | "css-loader": "^0.28.7", 28 | "file-loader": "^1.1.4", 29 | "vue-loader": "^13.0.5", 30 | "vue-template-compiler": "^2.4.4", 31 | "webpack": "^3.6.0", 32 | "webpack-dev-server": "^2.9.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /UploadFile/README.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 这是一个是基于`element-UI`的文件上传组件基础上，进行了二次封装，该组件除了可以正常的进行文件上传，还增加了显示文件上传的进度条。 4 | 5 | # 使用方法 6 | 7 | 由于该组件是基于`element-UI`的分页组件进行二次封装，所以在使用该组件时请务必安装`element-UI`（[安装方式猛戳这里](http://element-cn.eleme.io/#/zh-CN/component/installation)），另外，该组件进行文件上传的操作采用了`axios`，所以也必须先安装好`axios`，安装好上述两个库后，只需将该组件文件夹`UploadFile`导入到现有项目中即可使用。 8 | 9 | # 使用示例 10 | 11 | ```html 12 | 17 | 18 | 30 | ``` 31 | 32 | # 选项 33 | 34 | | 属性 | 描述 | 类型 | 是否必须 | 35 | | :----------: | :--: | :--: | :----------: | 36 | | url | 件上传到的目的url | String | 是 | 37 | 38 | # 效果图 39 | ![](https://raw.githubusercontent.com/wangjiachen199366/Vue-Components-Library/master/UploadFile/%E6%95%88%E6%9E%9C%E5%9B%BE.gif) 40 | -------------------------------------------------------------------------------- /nprogresBar/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import NProgress from 'nprogress' // progress bar 4 | import 'nprogress/nprogress.css'// progress bar style 5 | 6 | Vue.use(Router) 7 | 8 | // 个性化配置进度条外观 9 | NProgress.configure({ 10 | easing: 'ease', // 动画方式 11 | speed: 500, // 递增进度条的速度 12 | showSpinner: false, // 是否显示加载ico 13 | trickleSpeed: 200, // 自动递增间隔 14 | minimum: 0.3 // 初始化时的最小百分比 15 | }) 16 | 17 | const router = new Router({ 18 | routes: [ 19 | { path: '/', redirect: '/index' }, 20 | { path: '/login', name: 'login', component: Login }, 21 | ] 22 | }) 23 | 24 | // 添加路由守卫 25 | router.beforeEach((to, from, next) => { 26 | NProgress.start() 27 | if (to.path == "/login") { 28 | next(); 29 | NProgress.done() 30 | } else { 31 | isLogin ? next() : next("/login"); 32 | NProgress.done() 33 | } 34 | }) 35 | router.afterEach(() => { 36 | NProgress.done() 37 | }) 38 | export default router; -------------------------------------------------------------------------------- /MergeTableCell/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mergeTableCell", 3 | "description": "mergeTableCell", 4 | "version": "1.0.0", 5 | "author": "NLRX", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.11" 14 | }, 15 | "browserslist": [ 16 | "> 1%", 17 | "last 2 versions", 18 | "not ie <= 8" 19 | ], 20 | "devDependencies": { 21 | "babel-core": "^6.26.0", 22 | "babel-loader": "^7.1.2", 23 | "babel-plugin-component": "^1.1.1", 24 | "babel-preset-env": "^1.6.0", 25 | "babel-preset-stage-3": "^6.24.1", 26 | "element-ui": "^2.4.10", 27 | "cross-env": "^5.0.5", 28 | "css-loader": "^0.28.7", 29 | "file-loader": "^1.1.4", 30 | "vue-loader": "^13.0.5", 31 | "vue-template-compiler": "^2.4.4", 32 | "webpack": "^3.6.0", 33 | "webpack-dev-server": "^2.9.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /SideBar/SidebarItem.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 NLRX-WJC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /VueHoverMask/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 介绍 4 | 5 | 当鼠标hover 上元素时,给元素加一层遮罩层。 6 | 7 | # 效果图 8 | 9 | ![效果图](./效果图.gif) 10 | 11 | # 使用 12 | 13 | ```js 14 | import VueHoverMask from 'vue-hover-mask' 15 | export default { 16 | components: { 17 | VueHoverMask 18 | } 19 | } 20 | ``` 21 | 22 | # 示例 23 | 24 | ```html 25 | 37 | 38 | 50 | 56 | ``` 57 | 58 | # 组件代码 59 | 60 | 完整代码请戳☞[Vue-Components-Library/VueHoverMask](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/VueHoverMask) -------------------------------------------------------------------------------- /VueHoverMask/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 23 | 24 | 62 | -------------------------------------------------------------------------------- /ExportExcel/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /JTopoInVue/README.md: -------------------------------------------------------------------------------- 1 | # 1.前言 2 | 3 | [jTopo（Javascript Topology library)]([http://www.jtopo.com](http://www.jtopo.com/)) 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。其体积小，性能优异，由一群开发爱好者来维护。唯一感觉不足的是它是一个纯`js`库，没有像使用`ES6`语法，不能像模块化开发那样使用`import`导入， 4 | 5 | 由于博主的项目是使用vue-cli搭建的模块化开发项目，想要使用第三方库最好的方式是通过`npm install xxx`安装，然后在项目里`import xxx`来使用。但是在`JTopo`官网上并没有发现有该库的`npm`包，在`www.npmjs.com`上搜索`JTopo`，虽然找到了该库的`npm`包，但是这些包都是由一些个人开发者通过修改源码上传的，并且年限过久，博主担心直接使用的话可能会有一些诡异的`bug`，所以博主研究了一下，如何在`vue-cli`项目中直接导入第三方`js`库，幸运的是，很快就找到了办法，并且很容易哈，现将方法记录下来，并提供demo，供大家参考。 6 | 7 | # 2.解决办法 8 | 9 | 我们知道，无论是什么项目，最终通过打包后跑在浏览器上的肯定是一个`html`文件，在`Vue`中就是根目录下的`index.html`,在该文件中会将`webpack`打包后的`build.js`文件通过` 21 | 22 | 23 | 24 | ``` 25 | 26 | 这样引入之后，我们就可以在项目中按照`jtopo`官方文档那样使用了该库啦。 27 | 28 | # 3.不足之处 29 | 30 | `jtopo`官网还提供了工具栏，该工具栏功能是在`toolbar.js`中实现的，而该`js`文件内部依赖了`jQuery`，所以要想在项目中使用该工具栏，必须安装`jQuery`，而博主在项目中没有使用工具栏，所以就没有在继续研究，如果有这方面需求的小伙伴可自行研究使用。 31 | 32 | # 4.运行demo 33 | 34 | ``` bash 35 | # install dependencies 36 | npm install 37 | 38 | # serve with hot reload at localhost:8080 39 | npm run dev 40 | 41 | # build for production with minification 42 | npm run build 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /nprogresBar/README.md: -------------------------------------------------------------------------------- 1 | # 1.前言 2 | 3 | 在平常浏览网页时，我们会注意到在有的网站中，当点击页面中的链接进行路由跳转时，页面顶部会有一个进度条，用来标示页面跳转的进度（如下图所示）。虽然实际用处不大，但是对用户来说，有个进度条会大大减轻用户的等待压力，提升用户体验。本篇文章就来教你如何在Vue项目中实现这样的进度条。 4 | 5 | ![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181223015601960-1288993685.gif) 6 | 7 | # 2.安装Nprogress 8 | 9 | 虽然我们也可以自己手动实现这样的功能，但是，`nprogress.js`已经帮我们把进度条的样式呀，功能呀都已经封装的很好了，既然有现成的轮子，我们就直接使用轮子就好啦！ 10 | 11 | ```shell 12 | npm install nprogress -S 13 | ``` 14 | 15 | # 3.在router.js中引入Nprogress 16 | 17 | 由于我们需要将`Nprogress`绑定在路由钩子上，所以我们直接在路由文件`router.js`中引入`Nprogress`。 18 | 19 | ```javascript 20 | import NProgress from 'nprogress' 21 | import 'nprogress/nprogress.css'// nprogress样式文件 22 | ``` 23 | 24 | # 4.绑定路由钩子 25 | 26 | 我们想要的效果是：当路由开始跳转时加载进度条，当路由跳转完毕时进度条加载完毕。幸运的是，在Vue中刚好为我们提供了路由开始跳转和结束跳转的钩子，我们只需在引入`Nprogress`之后，将其绑定在路由钩子上即可。代码如下： 27 | 28 | ```javascript 29 | //当路由开始跳转时 30 | router.beforeEach((to, from , next) => { 31 | // 开启进度条 32 | NProgress.start(); 33 | // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了 34 | next(); 35 | }); 36 | //当路由跳转结束后 37 | router.afterEach(() => { 38 | // 关闭进度条 39 | NProgress.done() 40 | }) 41 | ``` 42 | 43 | # 5.效果图 44 | 45 | ![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181223015548366-1236648717.gif) 46 | 47 | # 6.个性化配置 48 | 49 | 当然如果你对默认的进度条外观样式不满意，`Nprogress`还提供了个性化配置外观。 50 | 51 | ```javascript 52 | NProgress.configure({ 53 | easing: 'ease', // 动画方式 54 | speed: 500, // 递增进度条的速度 55 | showSpinner: false, // 是否显示加载ico 56 | trickleSpeed: 200, // 自动递增间隔 57 | minimum: 0.3 // 初始化时的最小百分比 58 | }) 59 | ``` 60 | 61 | -------------------------------------------------------------------------------- /SideBar/SideBar.vue: -------------------------------------------------------------------------------- 1 | 15 | 30 | 75 | -------------------------------------------------------------------------------- /Pagination/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 75 | 76 | 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-Components-Library 2 | 打造一个自己的Vue组件库。 3 | 4 | ##### [Vue+element UI实现分页组件](https://www.cnblogs.com/wangjiachen666/p/9545456.html)——[Pagination](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/Pagination) 5 | 6 | ##### [vue+element UI以组件递归方式实现多级导航菜单](https://www.cnblogs.com/wangjiachen666/p/9444488.html)——[SideBar](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/SideBar) 7 | 8 | ##### [vue+element UI + axios封装文件上传及进度条组件](https://www.cnblogs.com/wangjiachen666/p/9700730.html)——[UploadFile](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/UploadFile) 9 | 10 | ##### [Vue+element UI实现表格数据导出Excel组件](https://www.cnblogs.com/wangjiachen666/p/10140118.html)——[ExportExcel](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/ExportExcel) 11 | 12 | ##### [Vue+element UI实现“回到顶部”按钮组件](https://www.cnblogs.com/wangjiachen666/p/10142184.html)——[BackToTop](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/BackToTop) 13 | 14 | ##### [如何在Vue项目中给路由跳转加上进度条](https://www.cnblogs.com/wangjiachen666/p/10163164.html)——[nprogresBar](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/nprogresBar) 15 | 16 | ##### [如何在Vue-cli项目中使用JTopo](https://www.cnblogs.com/wangjiachen666/p/11022686.html)——[JTopoInVue](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/JTopoInVue) 17 | 18 | ##### [如何在Vue中，当鼠标hover上元素时,给元素加遮罩层](https://www.cnblogs.com/wangjiachen666/p/11090908.html)——[VueHoverMask](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/VueHoverMask) 19 | 20 | ##### [如何让elemengUI中的表格组件相同内容的单元格自动合并](https://www.cnblogs.com/wangjiachen666/p/11283499.html)——[MergeTableCell](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/MergeTableCell) 21 | 22 | ##### [Vue封装暂无数据占位图组件](https://www.cnblogs.com/wangjiachen666/p/11851699.html)——[Empty](https://github.com/NLRX-WJC/Vue-Components-Library/tree/master/Empty) 23 | -------------------------------------------------------------------------------- /Pagination/README.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 这是一个是基于`element-UI`的分页组件基础上，进行了二次封装的分页组件，在展示数据时，该分页组件采用了每显示一页数据，只请求当前页面的数据的请求策略，从而避免了一次性将数据全部请求所造成的资源浪费。 4 | 5 | # 使用方法 6 | 7 | 由于该组件是基于`element-UI`的分页组件进行二次封装，所以在使用该组件时请务必安装`element-UI`（[安装方式猛戳这里](http://element-cn.eleme.io/#/zh-CN/component/installation)），安装好`element-UI`后，只需将该组件文件夹`Pagination`导入到现有项目中即可使用。 8 | 9 | # 示例 10 | 11 | ```html 12 | 15 | 43 | ``` 44 | 45 | # 选项 46 | 47 | | 属性 | 描述 | 类型 | 默认值 | 是否必须 | 48 | | :----------: | :--: | :--: | :--: | :----------: | 49 | | total | 数据总数 | Number | 0 | 是 | 50 | | page | 当前页码 | Number | 1 | 是 | 51 | | limit | 每页显示数据条目个数 | Number | 10 | 是 | 52 | | pageSizes | 每页显示个数选择器的选项设置 | Array | [10,20,30] | 否 | 53 | | layout | 组件布局 | String | 'total, sizes, prev, pager, next, jumper' | 否 | 54 | | background | 是否为分页按钮添加背景色 | Boolean | true | 否 | 55 | 56 | # 效果图 57 | ![](https://raw.githubusercontent.com/wangjiachen199366/Vue-Components-Library/master/Pagination/%E6%95%88%E6%9E%9C%E5%9B%BE.gif) 58 | -------------------------------------------------------------------------------- /JTopoInVue/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | }, { 20 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | } 25 | // other vue-loader options go here 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 35 | loader: 'file-loader' 36 | }, 37 | { 38 | test: /\.(png|jpg|gif|svg)$/, 39 | loader: 'file-loader', 40 | options: { 41 | name: '[name].[ext]?[hash]' 42 | } 43 | } 44 | ] 45 | }, 46 | resolve: { 47 | alias: { 48 | 'vue$': 'vue/dist/vue.esm.js' 49 | }, 50 | extensions: ['*', '.js', '.vue', '.json'] 51 | }, 52 | devServer: { 53 | historyApiFallback: true, 54 | noInfo: true, 55 | overlay: true 56 | }, 57 | performance: { 58 | hints: false 59 | }, 60 | devtool: '#eval-source-map' 61 | } 62 | 63 | if (process.env.NODE_ENV === 'production') { 64 | module.exports.devtool = '#source-map' 65 | // http://vue-loader.vuejs.org/en/workflow/production.html 66 | module.exports.plugins = (module.exports.plugins || []).concat([ 67 | new webpack.DefinePlugin({ 68 | 'process.env': { 69 | NODE_ENV: '"production"' 70 | } 71 | }), 72 | new webpack.optimize.UglifyJsPlugin({ 73 | sourceMap: true, 74 | compress: { 75 | warnings: false 76 | } 77 | }), 78 | new webpack.LoaderOptionsPlugin({ 79 | minimize: true 80 | }) 81 | ]) 82 | } 83 | -------------------------------------------------------------------------------- /BackToTop/README.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 4 | 5 | # 使用方法 6 | 7 | 由于该组件是基于`element-UI`进行二次封装的，所以在使用该组件时请务必安装`element-UI`（[安装方式猛戳这里](http://element-cn.eleme.io/#/zh-CN/component/installation)），安装好`element-UI`后，只需将该组件文件夹`BackToTop`导入到现有项目中即可使用。 8 | 9 | # 使用示例 10 | 11 | ```html 12 | 22 | 23 | 43 | 44 | ``` 45 | 46 | # 选项 47 | 48 | | 属性 | 描述 | 类型 | 是否必须 | 默认值 | 49 | | :--------------: | :-----------------------------------------------: | :----: | :------: | :----: | 50 | | visibilityHeight | 当页面卷曲到多少高度时显示按钮 | Number | 否 | 400 | 51 | | backPosition | 点击按钮后回到页面顶部的高度 | Number | 否 | 0 | 52 | | customStyle | 自定义按钮样式 | Object | 否 | | 53 | | transitionName | 回到顶部时的动画效果，具体参考elementUI的动画效果 | String | 否 | fade | 54 | 55 | 56 | 57 | # 效果图 58 | 59 | ![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181219112930327-135484373.gif) 60 | 61 | 62 | # 组件代码 63 | 64 | 完整代码请戳☞[Vue-Components-Library/BackToTop](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/BackToTop) 65 | 66 | （完） -------------------------------------------------------------------------------- /MergeTableCell/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | }, { 20 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | } 25 | // other vue-loader options go here 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 35 | loader: 'file-loader' 36 | }, 37 | { 38 | test: /\.(png|jpg|gif|svg)$/, 39 | loader: 'file-loader', 40 | options: { 41 | name: '[name].[ext]?[hash]' 42 | } 43 | } 44 | ] 45 | }, 46 | resolve: { 47 | alias: { 48 | 'vue$': 'vue/dist/vue.esm.js' 49 | }, 50 | extensions: ['*', '.js', '.vue', '.json'] 51 | }, 52 | devServer: { 53 | historyApiFallback: true, 54 | noInfo: true, 55 | overlay: true 56 | }, 57 | performance: { 58 | hints: false 59 | }, 60 | devtool: '#eval-source-map' 61 | } 62 | 63 | if (process.env.NODE_ENV === 'production') { 64 | module.exports.devtool = '#source-map' 65 | // http://vue-loader.vuejs.org/en/workflow/production.html 66 | module.exports.plugins = (module.exports.plugins || []).concat([ 67 | new webpack.DefinePlugin({ 68 | 'process.env': { 69 | NODE_ENV: '"production"' 70 | } 71 | }), 72 | new webpack.optimize.UglifyJsPlugin({ 73 | sourceMap: true, 74 | compress: { 75 | warnings: false 76 | } 77 | }), 78 | new webpack.LoaderOptionsPlugin({ 79 | minimize: true 80 | }) 81 | ]) 82 | } 83 | -------------------------------------------------------------------------------- /Empty/README.md: -------------------------------------------------------------------------------- 1 | # 1. 前言 2 | 3 | 在日常开发中，页面上肯定有展示数据的需求，但是当某些时候该展示数据的地方此时数据为空时，就会留下一片空白，对用户体验不是很好，那么接下来我们就封装一个空数据时的占位展示图，告诉用户此时用户为空，并非数据没有加载出来，不用让用户盲目的等待。 4 | 5 | # 2. 使用示例 6 | 7 | 该组件可以直接引入到项目中使用，示例如下： 8 | 9 | ```vue 10 | 17 | 18 | 30 | ``` 31 | 32 | 在上面代码中，假设你需要展示的内容是`content`，那么你就可以判断当内容有值时展示内容，当内容为空时展示空数据时的占位展示图。效果如下： 33 | ![](./1.png) 34 | # 3. 组件可选属性 35 | 36 | 该组件除了可以直接使用外，还提供过了一些可选属性供个性化配置，提供可选属性如下： 37 | 38 | | 属性名称 | 描述 | 类型 | 是否必须 | 默认值 | 39 | | :---------: | :------------------: | :----: | :------: | :------: | 40 | | description | 自定义描述内容 | String | 否 | 暂无数据 | 41 | | image | 自定义显示图片的路径 | String | 否 | 默认图片 | 42 | | imageStyle | 自定义显示图片的样式 | Object | 否 | - | 43 | 44 | 组件提供了3个可选属性，你可以这样去使用它们： 45 | 46 | - 自定义描述内容 47 | 48 | ```html 49 | 50 | ``` 51 | ![](./2.png) 52 | - 显示自定义图片 53 | 54 | ```html 55 | 56 | ``` 57 | ![](./3.png) 58 | 59 | 60 | 61 | ```javascript 62 | 63 | ``` 64 | ![](./4.png) 65 | 66 | - 自定义显示图片样式 67 | 68 | ```html 69 | 76 | 84 | ``` 85 | 86 | # 4. 组件代码 87 | 88 | 完整代码请戳☞[Vue-Components-Library/Empty](https://github.com/NLRX/Vue-Components-Library/tree/master/Empty) 89 | 90 | （完） 91 | 92 | -------------------------------------------------------------------------------- /SideBar/README.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 这是一个是基于`element-UI`的导航菜单组件基础上，进行了二次封装的菜单组件，该组件以组件递归的方式，实现了可根据从后端接收到的`json`菜单数据，动态渲染多级菜单的功能。 4 | 5 | # 使用方法 6 | 7 | 由于该组件是基于`element-UI`进行二次封装的，所以在使用该组件时请务必安装`element-UI`（[安装方式猛戳这里](http://element-cn.eleme.io/#/zh-CN/component/installation)），安装好`element-UI`后，只需将该组件文件夹`SideBar`导入到现有项目中即可使用。 8 | 9 | # 工作流程 10 | 11 | 组件封装好之后，由父组件调用该组件，父组件先向后端发送请求获取菜单数据，然后将菜单数据传递给封装好的菜单组件，菜单组件通过解析数据，完成菜单渲染。 12 | 13 | # 使用示例 14 | 15 | 16 | 17 | ```html 18 | 23 | 24 | 36 | 37 | 40 | 41 | ``` 42 | 43 | # 选项 44 | 45 | | 属性 | 描述 | 类型 | 是否必须 | 46 | | :------: | :------------------: | :---: | :------: | 47 | | menuList | 由后端返回的菜单数据 | Array | 是 | 48 | 49 | # 菜单数据格式示例 50 | 51 | ```json 52 | { 53 | "menus" : [ 54 | { 55 | "path": "/func1", //菜单项所对应的路由路径 56 | "title": "功能1", //菜单项名称 57 | "children":[] //是否有子菜单，若没有，则为[] 58 | }, 59 | { 60 | "path": "/func2", 61 | "title": "功能2", 62 | "children":[] 63 | }, 64 | { 65 | "path": "/func3", 66 | "title": "功能3", 67 | "children": [ 68 | { 69 | "path": "/func31", 70 | "title": "功能3-1", 71 | "children":[] 72 | }, 73 | { 74 | "path": "/func32", 75 | "title": "功能3-2", 76 | "children":[] 77 | }, 78 | { 79 | "path": "/func33", 80 | "title": "功能3-3", 81 | "children":[] 82 | }, 83 | ] 84 | } 85 | ] 86 | } 87 | ``` 88 | 89 | 90 | 91 | # 效果图 92 | 93 | ![](https://raw.githubusercontent.com/wangjiachen199366/Vue-Components-Library/master/SideBar/%E6%95%88%E6%9E%9C%E5%9B%BE.gif) 94 | 95 | # 源代码 96 | 97 | 完整代码请戳☞[Vue-Components-Library/SideBar](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/SideBar) 98 | 99 | -------------------------------------------------------------------------------- /ExportExcel/README.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 这是一个可以将页面中的表格数据导出为`Excel`文件的功能组件，该组件一般与表格一起使用，将表格数据传给组件，然后通过点击组件按钮可将表格中的数据导出成`Excel`文件。 4 | 5 | # 使用方法 6 | 7 | 由于封装该组件内部引用了`xlsx.js`，`file-saver.js`和`elementUI`，因此在使用该组件时，请先安装如下依赖： 8 | 9 | ```shell 10 | npm install xlsx file-saver element-ui --save 11 | ``` 12 | 13 | 安装好依赖后，只需将该组件文件夹`ExportExcel`导入到现有项目中即可使用。 14 | 15 | 16 | # 使用示例 17 | 18 | ```html 19 | 24 | 25 | 39 | 40 | ``` 41 | 42 | # 选项 43 | 44 | | 属性 | 描述 | 类型 | 是否必须 | 45 | | :------: | :------------------: | :---: | :------: | 46 | | list | 由后端返回的表格数据 | Array | 是 | 47 | | tHeader | 导出的Excel文件表头标题 | Array | 是 | 48 | | tValue | 要将表格数据中的哪些字段作为数据导出至Excel，与表头一一对应 | Array | 是 | 49 | | filename | 导出的Excel文件名，默认为“导出数据.xlsx” | String | 否 | 50 | 51 | # 选项说明 52 | 53 | **关于选项中的`tHeader`和`tValue`说明如下：** 54 | 55 | 例如将如下表格数据导出成Exlcel： 56 | 57 | ![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181218212516268-1558904696.png) 58 | 59 | 其中表头数据为： 60 | 61 | ![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181218212526743-2067406424.png) 62 | 63 | 所以`tHeader`为： 64 | 65 | ```javascript 66 | tHeader:['Id', '告警类型', '告警内容', '告警时间（段）', '告警次数'] 67 | ``` 68 | 69 | 后端返回的表格数据`list`为： 70 | 71 | ```json 72 | [ 73 | { 74 | "id":1, 75 | "type":"", 76 | "content":"", 77 | "time":"", 78 | "count":"", 79 | }, 80 | { 81 | "id":2, 82 | "type":"", 83 | "content":"", 84 | "time":"", 85 | "count":"", 86 | }, 87 | //.... 88 | ] 89 | ``` 90 | 91 | 其中： 92 | 93 | - list中的id------->表头的ID 94 | 95 | - list中的type------->表头的'告警类型' 96 | 97 | - list中的content------->表头的'告警内容' 98 | 99 | - list中的time------->表头的'告警时间（段）' 100 | 101 | - list中的count------->表头的'告警次数' 102 | 103 | 所有`tValue`为： 104 | 105 | ```javascript 106 | tValue:['id', 'type', 'content', 'time', 'count'] 107 | ``` 108 | 109 | 110 | 111 | # 效果图 112 | 113 | ![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181218212547911-1667391952.gif) 114 | 115 | 116 | # 组件代码 117 | 118 | 完整代码请戳☞[Vue-Components-Library/ExportExcel](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/ExportExcel) 119 | 120 | （完） -------------------------------------------------------------------------------- /MergeTableCell/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 87 | 88 | -------------------------------------------------------------------------------- /BackToTop/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 89 | 90 | 117 | -------------------------------------------------------------------------------- /Empty/index.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 67 | 68 | -------------------------------------------------------------------------------- /MergeTableCell/data.js: -------------------------------------------------------------------------------- 1 | let data = [ 2 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100501101',checkItem:'检查网络安全协调领导机构运行情况', ruleId_4:'u30100501101101',checkPoint:'等级保护联络员是否参加公安网安部门组织召开的等级保护联络员会议？' }, 3 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100501101',checkItem:'检查网络安全协调领导机构运行情况', ruleId_4:'u30100501101102',checkPoint:'联络员是否以书面形式向主管领导汇报公安网安部门在联络员会议上通报的内容？' }, 4 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502102',checkItem:'检查网络安全责任部门运行情况', ruleId_4:'u30100501102101',checkPoint:'网络安全责任部门是否对本单位的网络安全工作下发文件或召开会议等方式进行业务指导？' }, 5 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502102',checkItem:'检查网络安全责任部门运行情况', ruleId_4:'u30100501102102',checkPoint:'网络安全责任部门是否对本单位的网络安全工作听取汇报或现场检查等方式进行监督检查？' }, 6 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502103',checkItem:'检查网络安全工作文件执行情况', ruleId_4:'u30100501103101',checkPoint:'网络安全责任部门是否对本单位的网络安全工作文件或方案明确网络安全工作所需要执行的内容？' }, 7 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502103',checkItem:'检查网络安全工作文件执行情况', ruleId_4:'u30100501103102',checkPoint:'是否有网络安全工作文件或方案的执行情况的总结或汇报？' }, 8 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502104',checkItem:'检查网络安全工作会议、业务培训情况', ruleId_4:'u30100501104101',checkPoint:'是否有组织人员培训的工作会议记录或文件？' }, 9 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502104',checkItem:'检查网络安全工作会议、业务培训情况', ruleId_4:'u30100501104102',checkPoint:'受训人员的业务水平是否明显提高？' }, 10 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100501',checkContent:'网络安全工作的组织部署',ruleId_3:'u30100502105',checkItem:'检查主要领导对网络安全工作的重视情况', ruleId_4:'u30100501105101',checkPoint:'是否将网络安全工作的执行情况纳入到年度考核指标？' }, 11 | { ruleId_1:'u301', checkRange: '网络安全工作基本情况', ruleId_2: 'u30100501', checkContent: '网络安全工作的组织部署', ruleId_3: 'u30100502105', checkItem: '检查主要领导对网络安全工作的重视情况', ruleId_4: 'u30100501105102', checkPoint: '开展网络安全工作的经费是否纳入年度预算？' }, 12 | 13 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502101',checkItem:'检查网络安全领导机构执行情况', ruleId_4:'u30100502101101',checkPoint:'是否有网络安全工作的领导责任制？' }, 14 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502101',checkItem:'检查网络安全领导机构执行情况', ruleId_4:'u30100502101102',checkPoint:'对于网络安全领导是否有网络安全工作的考核指标？' }, 15 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502102',checkItem:'检查网络安全职能部门的执行情况', ruleId_4:'u30100502102101',checkPoint:'是否对本单位的网络安全工作发布文件或召开会议等方式进行业务指导？' }, 16 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502102',checkItem:'检查网络安全职能部门的执行情况', ruleId_4:'u30100502102102',checkPoint:'是否对本单位的网络安全工作听取汇报或现场检查等方式进行监督？' }, 17 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502103',checkItem:'检查网络安全责任追究制度执行情况', ruleId_4:'u30100502103101',checkPoint:'是否对所有的网络安全事故/事件有详细记录？' }, 18 | { ruleId_1:'u301',checkRange:'网络安全工作基本情况',ruleId_2:'u30100502',checkContent:'网络安全责任制落实情况',ruleId_3:'u30100502103',checkItem:'检查网络安全责任追究制度执行情况', ruleId_4:'u30100502103102',checkPoint:'是否按照网络安全责任追究制度进行处理？' }, 19 | 20 | ] 21 | 22 | export default data -------------------------------------------------------------------------------- /UploadFile/index.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 89 | 90 | -------------------------------------------------------------------------------- /ExportExcel/Export2Excel.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('file-saver'); 3 | import XLSX from 'xlsx' 4 | 5 | function generateArray(table) { 6 | var out = []; 7 | var rows = table.querySelectorAll('tr'); 8 | var ranges = []; 9 | for (var R = 0; R < rows.length; ++R) { 10 | var outRow = []; 11 | var row = rows[R]; 12 | var columns = row.querySelectorAll('td'); 13 | for (var C = 0; C < columns.length; ++C) { 14 | var cell = columns[C]; 15 | var colspan = cell.getAttribute('colspan'); 16 | var rowspan = cell.getAttribute('rowspan'); 17 | var cellValue = cell.innerText; 18 | if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue; 19 | 20 | //Skip ranges 21 | ranges.forEach(function (range) { 22 | if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) { 23 | for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null); 24 | } 25 | }); 26 | 27 | //Handle Row Span 28 | if (rowspan || colspan) { 29 | rowspan = rowspan || 1; 30 | colspan = colspan || 1; 31 | ranges.push({ 32 | s: { 33 | r: R, 34 | c: outRow.length 35 | }, 36 | e: { 37 | r: R + rowspan - 1, 38 | c: outRow.length + colspan - 1 39 | } 40 | }); 41 | }; 42 | 43 | //Handle Value 44 | outRow.push(cellValue !== "" ? cellValue : null); 45 | 46 | //Handle Colspan 47 | if (colspan) 48 | for (var k = 0; k < colspan - 1; ++k) outRow.push(null); 49 | } 50 | out.push(outRow); 51 | } 52 | return [out, ranges]; 53 | }; 54 | 55 | function datenum(v, date1904) { 56 | if (date1904) v += 1462; 57 | var epoch = Date.parse(v); 58 | return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); 59 | } 60 | 61 | function sheet_from_array_of_arrays(data, opts) { 62 | var ws = {}; 63 | var range = { 64 | s: { 65 | c: 10000000, 66 | r: 10000000 67 | }, 68 | e: { 69 | c: 0, 70 | r: 0 71 | } 72 | }; 73 | for (var R = 0; R != data.length; ++R) { 74 | for (var C = 0; C != data[R].length; ++C) { 75 | if (range.s.r > R) range.s.r = R; 76 | if (range.s.c > C) range.s.c = C; 77 | if (range.e.r < R) range.e.r = R; 78 | if (range.e.c < C) range.e.c = C; 79 | var cell = { 80 | v: data[R][C] 81 | }; 82 | if (cell.v == null) continue; 83 | var cell_ref = XLSX.utils.encode_cell({ 84 | c: C, 85 | r: R 86 | }); 87 | 88 | if (typeof cell.v === 'number') cell.t = 'n'; 89 | else if (typeof cell.v === 'boolean') cell.t = 'b'; 90 | else if (cell.v instanceof Date) { 91 | cell.t = 'n'; 92 | cell.z = XLSX.SSF._table[14]; 93 | cell.v = datenum(cell.v); 94 | } else cell.t = 's'; 95 | 96 | ws[cell_ref] = cell; 97 | } 98 | } 99 | if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); 100 | return ws; 101 | } 102 | 103 | function Workbook() { 104 | if (!(this instanceof Workbook)) return new Workbook(); 105 | this.SheetNames = []; 106 | this.Sheets = {}; 107 | } 108 | 109 | function s2ab(s) { 110 | var buf = new ArrayBuffer(s.length); 111 | var view = new Uint8Array(buf); 112 | for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; 113 | return buf; 114 | } 115 | 116 | export function export_table_to_excel(id) { 117 | var theTable = document.getElementById(id); 118 | var oo = generateArray(theTable); 119 | var ranges = oo[1]; 120 | 121 | /* original data */ 122 | var data = oo[0]; 123 | var ws_name = "SheetJS"; 124 | 125 | var wb = new Workbook(), 126 | ws = sheet_from_array_of_arrays(data); 127 | 128 | /* add ranges to worksheet */ 129 | // ws['!cols'] = ['apple', 'banan']; 130 | ws['!merges'] = ranges; 131 | 132 | /* add worksheet to workbook */ 133 | wb.SheetNames.push(ws_name); 134 | wb.Sheets[ws_name] = ws; 135 | 136 | var wbout = XLSX.write(wb, { 137 | bookType: 'xlsx', 138 | bookSST: false, 139 | type: 'binary' 140 | }); 141 | 142 | saveAs(new Blob([s2ab(wbout)], { 143 | type: "application/octet-stream" 144 | }), "test.xlsx") 145 | } 146 | 147 | export function export_json_to_excel({ 148 | header, 149 | data, 150 | filename, 151 | autoWidth = true, 152 | bookType= 'xlsx' 153 | } = {}) { 154 | /* original data */ 155 | filename = filename || 'excel-list' 156 | data = [...data] 157 | data.unshift(header); 158 | var ws_name = "SheetJS"; 159 | var wb = new Workbook(), 160 | ws = sheet_from_array_of_arrays(data); 161 | 162 | if (autoWidth) { 163 | /*设置worksheet每列的最大宽度*/ 164 | const colWidth = data.map(row => row.map(val => { 165 | /*先判断是否为null/undefined*/ 166 | if (val == null) { 167 | return { 168 | 'wch': 10 169 | }; 170 | } 171 | /*再判断是否为中文*/ 172 | else if (val.toString().charCodeAt(0) > 255) { 173 | return { 174 | 'wch': val.toString().length * 2 175 | }; 176 | } else { 177 | return { 178 | 'wch': val.toString().length 179 | }; 180 | } 181 | })) 182 | /*以第一行为初始值*/ 183 | let result = colWidth[0]; 184 | for (let i = 1; i < colWidth.length; i++) { 185 | for (let j = 0; j < colWidth[i].length; j++) { 186 | if (result[j]['wch'] < colWidth[i][j]['wch']) { 187 | result[j]['wch'] = colWidth[i][j]['wch']; 188 | } 189 | } 190 | } 191 | ws['!cols'] = result; 192 | } 193 | 194 | /* add worksheet to workbook */ 195 | wb.SheetNames.push(ws_name); 196 | wb.Sheets[ws_name] = ws; 197 | 198 | var wbout = XLSX.write(wb, { 199 | bookType: bookType, 200 | bookSST: false, 201 | type: 'binary' 202 | }); 203 | saveAs(new Blob([s2ab(wbout)], { 204 | type: "application/octet-stream" 205 | }), `${filename}.${bookType}`); 206 | } 207 | -------------------------------------------------------------------------------- /JTopoInVue/lib/jtopo-0.4.8-min.js: -------------------------------------------------------------------------------- 1 | !function(window){function Element(){this.initialize=function(){this.elementType="element",this.serializedProperties=["elementType"],this.propertiesStack=[],this._id=""+(new Date).getTime()},this.distroy=function(){},this.removeHandler=function(){},this.attr=function(a,b){if(null!=a&&null!=b)this[a]=b;else if(null!=a)return this[a];return this},this.save=function(){var a=this,b={};this.serializedProperties.forEach(function(c){b[c]=a[c]}),this.propertiesStack.push(b)},this.restore=function(){if(null!=this.propertiesStack&&0!=this.propertiesStack.length){var a=this,b=this.propertiesStack.pop();this.serializedProperties.forEach(function(c){a[c]=b[c]})}},this.toJson=function(){var a=this,b="{",c=this.serializedProperties.length;return this.serializedProperties.forEach(function(d,e){var f=a[d];"string"==typeof f&&(f='"'+f+'"'),b+='"'+d+'":'+f,c>e+1&&(b+=",")}),b+="}"}}CanvasRenderingContext2D.prototype.JTopoRoundRect=function(a,b,c,d,e){"undefined"==typeof e&&(e=5),this.beginPath(),this.moveTo(a+e,b),this.lineTo(a+c-e,b),this.quadraticCurveTo(a+c,b,a+c,b+e),this.lineTo(a+c,b+d-e),this.quadraticCurveTo(a+c,b+d,a+c-e,b+d),this.lineTo(a+e,b+d),this.quadraticCurveTo(a,b+d,a,b+d-e),this.lineTo(a,b+e),this.quadraticCurveTo(a,b,a+e,b),this.closePath()},CanvasRenderingContext2D.prototype.JTopoDashedLineTo=function(a,b,c,d,e){"undefined"==typeof e&&(e=5);var f=c-a,g=d-b,h=Math.floor(Math.sqrt(f*f+g*g)),i=0>=e?h:h/e,j=g/h*e,k=f/h*e;this.beginPath();for(var l=0;i>l;l++)l%2?this.lineTo(a+l*k,b+l*j):this.moveTo(a+l*k,b+l*j);this.stroke()},JTopo={version:"0.4.8",zIndex_Container:1,zIndex_Link:2,zIndex_Node:3,SceneMode:{normal:"normal",drag:"drag",edit:"edit",select:"select"},MouseCursor:{normal:"default",pointer:"pointer",top_left:"nw-resize",top_center:"n-resize",top_right:"ne-resize",middle_left:"e-resize",middle_right:"e-resize",bottom_left:"ne-resize",bottom_center:"n-resize",bottom_right:"nw-resize",move:"move",open_hand:"url(./img/cur/openhand.cur) 8 8, default",closed_hand:"url(/src/assets/images/topo/closedhand.cur) 8 8, default"},createStageFromJson:function(jsonStr,canvas){eval("var jsonObj = "+jsonStr);var stage=new JTopo.Stage(canvas);for(var k in jsonObj)"childs"!=k&&(stage[k]=jsonObj[k]);var scenes=jsonObj.childs;return scenes.forEach(function(a){var b=new JTopo.Scene(stage);for(var c in a)"childs"!=c&&(b[c]=a[c]),"background"==c&&(b.background=a[c]);var d=a.childs;d.forEach(function(a){var c=null,d=a.elementType;"node"==d?c=new JTopo.Node:"CircleNode"==d&&(c=new JTopo.CircleNode);for(var e in a)c[e]=a[e];b.add(c)})}),stage}},JTopo.Element=Element,window.JTopo=JTopo}(window),function(JTopo){function MessageBus(a){var b=this;this.name=a,this.messageMap={},this.messageCount=0,this.subscribe=function(a,c){var d=b.messageMap[a];null==d&&(b.messageMap[a]=[]),b.messageMap[a].push(c),b.messageCount++},this.unsubscribe=function(a){var c=b.messageMap[a];null!=c&&(b.messageMap[a]=null,delete b.messageMap[a],b.messageCount--)},this.publish=function(a,c,d){var e=b.messageMap[a];if(null!=e)for(var f=0;fd.x&&(b.left=d.x,b.leftNode=d),b.rightd.y&&(b.top=d.y,b.topNode=d),b.bottomb)){var f=0;e(f)}}function cloneEvent(a){var b={};for(var c in a)"returnValue"!=c&&"keyLocation"!=c&&(b[c]=a[c]);return b}function clone(a){var b={};for(var c in a)b[c]=a[c];return b}function isPointInRect(a,b){var c=b.x,d=b.y,e=b.width,f=b.height;return a.x>c&&a.xd&&a.y0&&(c+=",");var e=a[b[d]];"string"==typeof e?e='"'+e+'"':void 0==e&&(e=null),c+=b[d]+":"+e}return c}function loadStageFromJson(json,canvas){var obj=eval(json),stage=new JTopo.Stage(canvas);for(var k in stageObj)if("scenes"!=k)stage[k]=obj[k];else for(var scenes=obj.scenes,i=0;i0&&(d+=","),d+="{",d+=getProperties(h,c),d+="}"}d+="]}"}return d+="]",d+="}"}function changeColor(a,b,c,d,e){var f=canvas.width=b.width,g=canvas.height=b.height;a.clearRect(0,0,canvas.width,canvas.height),a.drawImage(b,0,0);for(var h=a.getImageData(0,0,b.width,b.height),i=h.data,j=0;f>j;j++)for(var k=0;g>k;k++){var l=4*(j+k*f);0!=i[l+3]&&(null!=c&&(i[l+0]+=c),null!=d&&(i[l+1]+=d),null!=e&&(i[l+2]+=e))}a.putImageData(h,0,0,0,0,b.width,b.height);var m=canvas.toDataURL();return alarmImageCache[b.src]=m,m}function genImageAlarm(a,b){null==b&&(b=255);try{if(alarmImageCache[a.src])return alarmImageCache[a.src];var c=new Image;return c.src=changeColor(graphics,a,b),alarmImageCache[a.src]=c,c}catch(d){}return null}function getOffsetPosition(a){if(!a)return{left:0,top:0};var b=0,c=0;if("getBoundingClientRect"in document.documentElement)var d=a.getBoundingClientRect(),e=a.ownerDocument,f=e.body,g=e.documentElement,h=g.clientTop||f.clientTop||0,i=g.clientLeft||f.clientLeft||0,b=d.top+(self.pageYOffset||g&&g.scrollTop||f.scrollTop)-h,c=d.left+(self.pageXOffset||g&&g.scrollLeft||f.scrollLeft)-i;else do b+=a.offsetTop||0,c+=a.offsetLeft||0,a=a.offsetParent;while(a);return{left:c,top:b}}function lineF(a,b,c,d){function e(a){return a*f+g}var f=(d-b)/(c-a),g=b-a*f;return e.k=f,e.b=g,e.x1=a,e.x2=c,e.y1=b,e.y2=d,e}function inRange(a,b,c){var d=Math.abs(b-c),e=Math.abs(b-a),f=Math.abs(c-a),g=Math.abs(d-(e+f));return 1e-6>g?!0:!1}function isPointInLineSeg(a,b,c){return inRange(a,c.x1,c.x2)&&inRange(b,c.y1,c.y2)}function intersection(a,b){var c,d;return a.k==b.k?null:(1/0==a.k||a.k==-1/0?(c=a.x1,d=b(a.x1)):1/0==b.k||b.k==-1/0?(c=b.x1,d=a(b.x1)):(c=(b.b-a.b)/(a.k-b.k),d=a(c)),0==isPointInLineSeg(c,d,a)?null:0==isPointInLineSeg(c,d,b)?null:{x:c,y:d})}function intersectionLineBound(a,b){var c=JTopo.util.lineF(b.left,b.top,b.left,b.bottom),d=JTopo.util.intersection(a,c);return null==d&&(c=JTopo.util.lineF(b.left,b.top,b.right,b.top),d=JTopo.util.intersection(a,c),null==d&&(c=JTopo.util.lineF(b.right,b.top,b.right,b.bottom),d=JTopo.util.intersection(a,c),null==d&&(c=JTopo.util.lineF(b.left,b.bottom,b.right,b.bottom),d=JTopo.util.intersection(a,c)))),d}requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){setTimeout(a,1e3/24)},Array.prototype.del=function(a){if("number"!=typeof a){for(var b=0;ba?this:this.slice(0,a).concat(this.slice(a+1,this.length))},[].indexOf||(Array.prototype.indexOf=function(a){for(var b=0;b0,isIE:!(!window.attachEvent||-1!==navigator.userAgent.indexOf("Opera")),isChrome:null!=navigator.userAgent.toLowerCase().match(/chrome/),clone:clone,isPointInRect:isPointInRect,isPointInLine:isPointInLine,removeFromArray:removeFromArray,cloneEvent:cloneEvent,randomColor:randomColor,isIntsect:isIntsect,toJson:toJson,loadStageFromJson:loadStageFromJson,getElementsBound:getElementsBound,genImageAlarm:genImageAlarm,getOffsetPosition:getOffsetPosition,lineF:lineF,intersection:intersection,intersectionLineBound:intersectionLineBound},window.$for=$for,window.$foreach=$foreach}(JTopo),function(a){function b(a){return{hgap:16,visible:!1,exportCanvas:document.createElement("canvas"),getImage:function(b,c){var d=a.getBound(),e=1,f=1;this.exportCanvas.width=a.canvas.width,this.exportCanvas.height=a.canvas.height,null!=b&&null!=c?(this.exportCanvas.width=b,this.exportCanvas.height=c,e=b/d.width,f=c/d.height):(d.width>a.canvas.width&&(this.exportCanvas.width=d.width),d.height>a.canvas.height&&(this.exportCanvas.height=d.height));var g=this.exportCanvas.getContext("2d");return a.childs.length>0&&(g.save(),g.clearRect(0,0,this.exportCanvas.width,this.exportCanvas.height),a.childs.forEach(function(a){1==a.visible&&(a.save(),a.translateX=0,a.translateY=0,a.scaleX=1,a.scaleY=1,g.scale(e,f),d.left<0&&(a.translateX=Math.abs(d.left)),d.top<0&&(a.translateY=Math.abs(d.top)),a.paintAll=!0,a.repaint(g),a.paintAll=!1,a.restore())}),g.restore()),this.exportCanvas.toDataURL("image/png")},canvas:document.createElement("canvas"),update:function(){this.eagleImageDatas=this.getData(a)},setSize:function(a,b){this.width=this.canvas.width=a,this.height=this.canvas.height=b},getData:function(b,c){function d(a){var b=a.stage.canvas.width,c=a.stage.canvas.height,d=b/a.scaleX/2,e=c/a.scaleY/2;return{translateX:a.translateX+d-d*a.scaleX,translateY:a.translateY+e-e*a.scaleY}}null!=j&&null!=k?this.setSize(b,c):this.setSize(200,160);var e=this.canvas.getContext("2d");if(a.childs.length>0){e.save(),e.clearRect(0,0,this.canvas.width,this.canvas.height),a.childs.forEach(function(a){1==a.visible&&(a.save(),a.centerAndZoom(null,null,e),a.repaint(e),a.restore())});var f=d(a.childs[0]),g=f.translateX*(this.canvas.width/a.canvas.width)*a.childs[0].scaleX,h=f.translateY*(this.canvas.height/a.canvas.height)*a.childs[0].scaleY,i=a.getBound(),j=a.canvas.width/a.childs[0].scaleX/i.width,k=a.canvas.height/a.childs[0].scaleY/i.height;j>1&&(j=1),k>1&&(j=1),g*=j,h*=k,i.left<0&&(g-=Math.abs(i.left)*(this.width/i.width)),i.top<0&&(h-=Math.abs(i.top)*(this.height/i.height)),e.save(),e.lineWidth=1,e.strokeStyle="rgba(255,0,0,1)",e.strokeRect(-g,-h,e.canvas.width*j,e.canvas.height*k),e.restore();var l=null;try{l=e.getImageData(0,0,e.canvas.width,e.canvas.height)}catch(m){}return l}return null},paint:function(){if(null!=this.eagleImageDatas){var b=a.graphics;b.save(),b.fillStyle="rgba(211,211,211,0.3)",b.fillRect(a.canvas.width-this.canvas.width-2*this.hgap,a.canvas.height-this.canvas.height-1,a.canvas.width-this.canvas.width,this.canvas.height+1),b.fill(),b.save(),b.lineWidth=1,b.strokeStyle="rgba(0,0,0,1)",b.rect(a.canvas.width-this.canvas.width-2*this.hgap,a.canvas.height-this.canvas.height-1,a.canvas.width-this.canvas.width,this.canvas.height+1),b.stroke(),b.restore(),b.putImageData(this.eagleImageDatas,a.canvas.width-this.canvas.width-this.hgap,a.canvas.height-this.canvas.height),b.restore()}else this.eagleImageDatas=this.getData(a)},eventHandler:function(a,b,c){var d=b.x,e=b.y;if(d>c.canvas.width-this.canvas.width&&e>c.canvas.height-this.canvas.height){if(d=b.x-this.canvas.width,e=b.y-this.canvas.height,"mousedown"==a&&(this.lastTranslateX=c.childs[0].translateX,this.lastTranslateY=c.childs[0].translateY),"mousedrag"==a&&c.childs.length>0){var f=b.dx,g=b.dy,h=c.getBound(),i=this.canvas.width/c.childs[0].scaleX/h.width,j=this.canvas.height/c.childs[0].scaleY/h.height;c.childs[0].translateX=this.lastTranslateX-f/i,c.childs[0].translateY=this.lastTranslateY-g/j}}else;}}}function c(c){function d(b){var c=a.util.getEventPosition(b),d=a.util.getOffsetPosition(n.canvas);return c.offsetLeft=c.pageX-d.left,c.offsetTop=c.pageY-d.top,c.x=c.offsetLeft,c.y=c.offsetTop,c.target=null,c}function e(a){document.onselectstart=function(){return!1},this.mouseOver=!0;var b=d(a);n.dispatchEventToScenes("mouseover",b),n.dispatchEvent("mouseover",b)}function f(a){p=setTimeout(function(){o=!0},500),document.onselectstart=function(){return!0};var b=d(a);n.dispatchEventToScenes("mouseout",b),n.dispatchEvent("mouseout",b),n.needRepaint=0==n.animate?!1:!0}function g(a){var b=d(a);n.mouseDown=!0,n.mouseDownX=b.x,n.mouseDownY=b.y,n.dispatchEventToScenes("mousedown",b),n.dispatchEvent("mousedown",b)}function h(a){var b=d(a);n.dispatchEventToScenes("mouseup",b),n.dispatchEvent("mouseup",b),n.mouseDown=!1,n.needRepaint=0==n.animate?!1:!0}function i(a){p&&(window.clearTimeout(p),p=null),o=!1;var b=d(a);n.mouseDown?0==a.button&&(b.dx=b.x-n.mouseDownX,b.dy=b.y-n.mouseDownY,n.dispatchEventToScenes("mousedrag",b),n.dispatchEvent("mousedrag",b),1==n.eagleEye.visible&&n.eagleEye.update()):(n.dispatchEventToScenes("mousemove",b),n.dispatchEvent("mousemove",b))}function j(a){var b=d(a);n.dispatchEventToScenes("click",b),n.dispatchEvent("click",b)}function k(a){var b=d(a);n.dispatchEventToScenes("dbclick",b),n.dispatchEvent("dbclick",b)}function l(a){var b=d(a);n.dispatchEventToScenes("mousewheel",b),n.dispatchEvent("mousewheel",b),null!=n.wheelZoom&&(a.preventDefault?a.preventDefault():(a=a||window.event,a.returnValue=!1),1==n.eagleEye.visible&&n.eagleEye.update())}function m(b){a.util.isIE||!window.addEventListener?(b.onmouseout=f,b.onmouseover=e,b.onmousedown=g,b.onmouseup=h,b.onmousemove=i,b.onclick=j,b.ondblclick=k,b.onmousewheel=l,b.touchstart=g,b.touchmove=i,b.touchend=h):(b.addEventListener("mouseout",f),b.addEventListener("mouseover",e),b.addEventListener("mousedown",g),b.addEventListener("mouseup",h),b.addEventListener("mousemove",i),b.addEventListener("click",j),b.addEventListener("dblclick",k),a.util.isFirefox?b.addEventListener("DOMMouseScroll",l):b.addEventListener("mousewheel",l)),window.addEventListener&&(window.addEventListener("keydown",function(b){n.dispatchEventToScenes("keydown",a.util.cloneEvent(b));var c=b.keyCode;(37==c||38==c||39==c||40==c)&&(b.preventDefault?b.preventDefault():(b=b||window.event,b.returnValue=!1))},!0),window.addEventListener("keyup",function(b){n.dispatchEventToScenes("keyup",a.util.cloneEvent(b));var c=b.keyCode;(37==c||38==c||39==c||40==c)&&(b.preventDefault?b.preventDefault():(b=b||window.event,b.returnValue=!1))},!0))}a.stage=this;var n=this;this.initialize=function(c){m(c),this.canvas=c,this.graphics=c.getContext("2d"),this.childs=[],this.frames=24,this.messageBus=new a.util.MessageBus,this.eagleEye=b(this),this.wheelZoom=null,this.mouseDownX=0,this.mouseDownY=0,this.mouseDown=!1,this.mouseOver=!1,this.needRepaint=!0,this.serializedProperties=["frames","wheelZoom"]},null!=c&&this.initialize(c);var o=!0,p=null;document.oncontextmenu=function(){return o},this.dispatchEventToScenes=function(a,b){if(0!=this.frames&&(this.needRepaint=!0),1==this.eagleEye.visible&&-1!=a.indexOf("mouse")){var c=b.x,d=b.y;if(c>this.width-this.eagleEye.width&&d>this.height-this.eagleEye.height)return void this.eagleEye.eventHandler(a,b,this)}this.childs.forEach(function(c){if(1==c.visible){var d=c[a+"Handler"];if(null==d)throw new Error("Function not found:"+a+"Handler");d.call(c,b)}})},this.add=function(a){for(var b=0;b"),this},this.saveAsLocalImage=function(a,b){var c=this.eagleEye.getImage(a,b);return c.replace("image/png","image/octet-stream"),window.location.href=c,this},this.paint=function(){null!=this.canvas&&(this.graphics.save(),this.graphics.clearRect(0,0,this.width,this.height),this.childs.forEach(function(a){1==a.visible&&a.repaint(n.graphics)}),1==this.eagleEye.visible&&this.eagleEye.paint(this),this.graphics.restore())},this.repaint=function(){0!=this.frames&&(this.frames<0&&0==this.needRepaint||(this.paint(),this.frames<0&&(this.needRepaint=!1)))},this.zoom=function(a){this.childs.forEach(function(b){0!=b.visible&&b.zoom(a)})},this.zoomOut=function(a){this.childs.forEach(function(b){0!=b.visible&&b.zoomOut(a)})},this.zoomIn=function(a){this.childs.forEach(function(b){0!=b.visible&&b.zoomIn(a)})},this.centerAndZoom=function(){this.childs.forEach(function(a){0!=a.visible&&a.centerAndZoom()})},this.setCenter=function(a,b){var c=this;this.childs.forEach(function(d){var e=a-c.canvas.width/2,f=b-c.canvas.height/2;d.translateX=-e,d.translateY=-f})},this.getBound=function(){var a={left:Number.MAX_VALUE,right:Number.MIN_VALUE,top:Number.MAX_VALUE,bottom:Number.MIN_VALUE};return this.childs.forEach(function(b){var c=b.getElementsBound();c.lefta.right&&(a.right=c.right,a.rightNode=c.rightNode),c.bottom>a.bottom&&(a.bottom=c.bottom,a.bottomNode=c.bottomNode)}),a.width=a.right-a.left,a.height=a.bottom-a.top,a},this.toJson=function(){{var b=this,c='{"version":"'+a.version+'",';this.serializedProperties.length}return this.serializedProperties.forEach(function(a){var d=b[a];"string"==typeof d&&(d='"'+d+'"'),c+='"'+a+'":'+d+","}),c+='"childs":[',this.childs.forEach(function(a){c+=a.toJson()}),c+="]",c+="}"},function(){0==n.frames?setTimeout(arguments.callee,100):n.frames<0?(n.repaint(),setTimeout(arguments.callee,1e3/-n.frames)):(n.repaint(),setTimeout(arguments.callee,1e3/n.frames))}(),setTimeout(function(){n.mousewheel(function(a){var b=null==a.wheelDelta?a.detail:a.wheelDelta;null!=this.wheelZoom&&(b>0?this.zoomIn(this.wheelZoom):this.zoomOut(this.wheelZoom))}),n.paint()},300),setTimeout(function(){n.paint()},1e3),setTimeout(function(){n.paint()},3e3)}c.prototype={get width(){return this.canvas.width},get height(){return this.canvas.height},set cursor(a){this.canvas.style.cursor=a},get cursor(){return this.canvas.style.cursor},set mode(a){this.childs.forEach(function(b){b.mode=a})}},a.Stage=c}(JTopo),function(a){function b(c){function d(a,b,c,d){return function(e){e.beginPath(),e.strokeStyle="rgba(0,0,236,0.5)",e.fillStyle="rgba(0,0,236,0.1)",e.rect(a,b,c,d),e.fill(),e.stroke(),e.closePath()}}var e=this;this.initialize=function(){b.prototype.initialize.apply(this,arguments),this.messageBus=new a.util.MessageBus,this.elementType="scene",this.childs=[],this.zIndexMap={},this.zIndexArray=[],this.backgroundColor="255,255,255",this.visible=!0,this.alpha=0,this.scaleX=1,this.scaleY=1,this.mode=a.SceneMode.normal,this.translate=!0,this.translateX=0,this.translateY=0,this.lastTranslateX=0,this.lastTranslateY=0,this.mouseDown=!1,this.mouseDownX=null,this.mouseDownY=null,this.mouseDownEvent=null,this.areaSelect=!0,this.operations=[],this.selectedElements=[],this.paintAll=!1;var c="background,backgroundColor,mode,paintAll,areaSelect,translate,translateX,translateY,lastTranslatedX,lastTranslatedY,alpha,visible,scaleX,scaleY".split(",");this.serializedProperties=this.serializedProperties.concat(c)},this.initialize(),this.setBackground=function(a){this.background=a},this.addTo=function(a){this.stage!==a&&null!=a&&(this.stage=a)},null!=c&&(c.add(this),this.addTo(c)),this.show=function(){this.visible=!0},this.hide=function(){this.visible=!1},this.paint=function(a){if(0!=this.visible&&null!=this.stage){if(a.save(),this.paintBackgroud(a),a.restore(),a.save(),a.scale(this.scaleX,this.scaleY),1==this.translate){var b=this.getOffsetTranslate(a);a.translate(b.translateX,b.translateY)}this.paintChilds(a),a.restore(),a.save(),this.paintOperations(a,this.operations),a.restore()}},this.repaint=function(a){0!=this.visible&&this.paint(a)},this.paintBackgroud=function(a){null!=this.background?a.drawImage(this.background,0,0,a.canvas.width,a.canvas.height):(a.beginPath(),a.fillStyle="rgba("+this.backgroundColor+","+this.alpha+")",a.fillRect(0,0,a.canvas.width,a.canvas.height),a.closePath())},this.getDisplayedElements=function(){for(var a=[],b=0;bthis.stage.canvas.width||e>this.stage.canvas.height||0>f||0>g?!1:!0},this.paintOperations=function(a,b){for(var c=0;c=0;e--)for(var f=this.zIndexArray[e],g=this.zIndexMap[f],h=g.length-1;h>=0;h--){var i=g[h];if(i instanceof a.InteractiveElement&&this.isVisiable(i)&&i.isInBound(b,c))return d=i}return d},this.add=function(a){this.childs.push(a),null==this.zIndexMap[a.zIndex]&&(this.zIndexMap[a.zIndex]=[],this.zIndexArray.push(a.zIndex),this.zIndexArray.sort(function(a,b){return a-b})),this.zIndexMap[""+a.zIndex].push(a)},this.remove=function(b){this.childs=a.util.removeFromArray(this.childs,b);var c=this.zIndexMap[b.zIndex];c&&(this.zIndexMap[b.zIndex]=a.util.removeFromArray(c,b)),b.removeHandler(this)},this.clear=function(){var a=this;this.childs.forEach(function(b){b.removeHandler(a)}),this.childs=[],this.operations=[],this.zIndexArray=[],this.zIndexMap={}},this.addToSelected=function(a){this.selectedElements.push(a)},this.cancleAllSelected=function(a){for(var b=0;b=f?f:b,i=c>=g?g:c,j=Math.abs(a.dx)*this.scaleX,k=Math.abs(a.dy)*this.scaleY,l=new d(h,i,j,k);e.clearOperations().addOperation(l),b=a.x,c=a.y,f=this.mouseDownEvent.x,g=this.mouseDownEvent.y,h=b>=f?f:b,i=c>=g?g:c,j=Math.abs(a.dx),k=Math.abs(a.dy);for(var m=h+j,n=i+k,o=0;oh&&p.x+p.widthi&&p.y+p.height1)return;this.zoom(i,i)}this.zoom(a,b)},this.getCenterLocation=function(){return{x:e.stage.canvas.width/2,y:e.stage.canvas.height/2}},this.doLayout=function(a){a&&a(this,this.childs)},this.toJson=function(){{var a=this,b="{";this.serializedProperties.length}this.serializedProperties.forEach(function(c){var d=a[c];"background"==c&&(d=a._background.src),"string"==typeof d&&(d='"'+d+'"'),b+='"'+c+'":'+d+","}),b+='"childs":[';var c=this.childs.length;return this.childs.forEach(function(a,d){b+=a.toJson(),c>d+1&&(b+=",")}),b+="]",b+="}"},e}b.prototype=new a.Element;var c={};Object.defineProperties(b.prototype,{background:{get:function(){return this._background},set:function(a){if("string"==typeof a){var b=c[a];null==b&&(b=new Image,b.src=a,b.onload=function(){c[a]=b}),this._background=b}else this._background=a}}}),a.Scene=b}(JTopo),function(a){function b(){this.initialize=function(){b.prototype.initialize.apply(this,arguments),this.elementType="displayElement",this.x=0,this.y=0,this.width=32,this.height=32,this.visible=!0,this.alpha=1,this.rotate=0,this.scaleX=1,this.scaleY=1,this.strokeColor="22,124,255",this.borderColor="22,124,255",this.fillColor="22,124,255",this.shadow=!1,this.shadowBlur=5,this.shadowColor="rgba(0,0,0,0.5)",this.shadowOffsetX=3,this.shadowOffsetY=6,this.transformAble=!1,this.zIndex=0;var a="x,y,width,height,visible,alpha,rotate,scaleX,scaleY,strokeColor,fillColor,shadow,shadowColor,shadowOffsetX,shadowOffsetY,transformAble,zIndex".split(",");this.serializedProperties=this.serializedProperties.concat(a)},this.initialize(),this.paint=function(a){a.beginPath(),a.fillStyle="rgba("+this.fillColor+","+this.alpha+")",a.rect(-this.width/2,-this.height/2,this.width,this.height),a.fill(),a.stroke(),a.closePath()},this.getLocation=function(){return{x:this.x,y:this.y}},this.setLocation=function(a,b){return this.x=a,this.y=b,this},this.getCenterLocation=function(){return{x:this.x+this.width/2,y:this.y+this.height/2}},this.setCenterLocation=function(a,b){return this.x=a-this.width/2,this.y=b-this.height/2,this},this.getSize=function(){return{width:this.width,height:this.heith}},this.setSize=function(a,b){return this.width=a,this.height=b,this},this.getBound=function(){return{left:this.x,top:this.y,right:this.x+this.width,bottom:this.y+this.height,width:this.width,height:this.height}},this.setBound=function(a,b,c,d){return this.setLocation(a,b),this.setSize(c,d),this},this.getDisplayBound=function(){return{left:this.x,top:this.y,right:this.x+this.width*this.scaleX,bottom:this.y+this.height*this.scaleY}},this.getDisplaySize=function(){return{width:this.width*this.scaleX,height:this.height*this.scaleY}},this.getPosition=function(a){var b,c=this.getBound();return"Top_Left"==a?b={x:c.left,y:c.top}:"Top_Center"==a?b={x:this.cx,y:c.top}:"Top_Right"==a?b={x:c.right,y:c.top}:"Middle_Left"==a?b={x:c.left,y:this.cy}:"Middle_Center"==a?b={x:this.cx,y:this.cy}:"Middle_Right"==a?b={x:c.right,y:this.cy}:"Bottom_Left"==a?b={x:c.left,y:c.bottom}:"Bottom_Center"==a?b={x:this.cx,y:c.bottom}:"Bottom_Right"==a&&(b={x:c.right,y:c.bottom}),b}}function c(){this.initialize=function(){c.prototype.initialize.apply(this,arguments),this.elementType="interactiveElement",this.dragable=!1,this.selected=!1,this.showSelected=!0,this.selectedLocation=null,this.isMouseOver=!1;var a="dragable,selected,showSelected,isMouseOver".split(",");this.serializedProperties=this.serializedProperties.concat(a)},this.initialize(),this.paintSelected=function(a){0!=this.showSelected&&(a.save(),a.beginPath(),a.strokeStyle="rgba(168,202,255, 0.9)",a.fillStyle="rgba(168,202,236,0.7)",a.rect(-this.width/2-3,-this.height/2-3,this.width+6,this.height+6),a.fill(),a.stroke(),a.closePath(),a.restore())},this.paintMouseover=function(a){return this.paintSelected(a)},this.isInBound=function(a,b){return a>this.x&&athis.y&&bf.left&&af.top&&c1&&(this.width=d)}else if("Middle_Left"==this.selectedPoint){var d=this.selectedSize.width-a.dx,b=this.selectedLocation.x+a.dx;b1&&(this.width=d)}else if("Middle_Right"==this.selectedPoint){var d=this.selectedSize.width+a.dx;d>1&&(this.width=d)}else if("Bottom_Left"==this.selectedPoint){var d=this.selectedSize.width-a.dx,b=this.selectedLocation.x+a.dx;d>1&&(this.x=b,this.width=d);var e=this.selectedSize.height+a.dy;e>1&&(this.height=e)}else if("Bottom_Center"==this.selectedPoint){var e=this.selectedSize.height+a.dy;e>1&&(this.height=e)}else if("Bottom_Right"==this.selectedPoint){var d=this.selectedSize.width+a.dx;d>1&&(this.width=d);var e=this.selectedSize.height+a.dy;e>1&&(this.height=e)}this.dispatchEvent("resize",a)}}}b.prototype=new a.Element,Object.defineProperties(b.prototype,{cx:{get:function(){return this.x+this.width/2},set:function(a){this.x=a-this.width/2}},cy:{get:function(){return this.y+this.height/2},set:function(a){this.y=a-this.height/2}}}),c.prototype=new b,d.prototype=new c,a.DisplayElement=b,a.InteractiveElement=c,a.EditableElement=d}(JTopo),function(a){function b(c){this.initialize=function(c){b.prototype.initialize.apply(this,arguments),this.elementType="node",this.zIndex=a.zIndex_Node,this.text=c,this.font="12px Consolas",this.fontColor="255,255,255",this.borderWidth=0,this.borderColor="255,255,255",this.borderRadius=null,this.dragable=!0,this.textPosition="Bottom_Center",this.textOffsetX=0,this.textOffsetY=0,this.transformAble=!0,this.inLinks=null,this.outLinks=null;var d="text,font,fontColor,textPosition,textOffsetX,textOffsetY,borderRadius".split(",");this.serializedProperties=this.serializedProperties.concat(d)},this.initialize(c),this.paint=function(a){if(this.image){var b=a.globalAlpha;a.globalAlpha=this.alpha,null!=this.image.alarm&&null!=this.alarm?a.drawImage(this.image.alarm,-this.width/2,-this.height/2,this.width,this.height):a.drawImage(this.image,-this.width/2,-this.height/2,this.width,this.height),a.globalAlpha=b}else a.beginPath(),a.fillStyle="rgba("+this.fillColor+","+this.alpha+")",null==this.borderRadius||0==this.borderRadius?a.rect(-this.width/2,-this.height/2,this.width,this.height):a.JTopoRoundRect(-this.width/2,-this.height/2,this.width,this.height,this.borderRadius),a.fill(),a.closePath();this.paintText(a),this.paintBorder(a),this.paintCtrl(a),this.paintAlarmText(a)},this.paintAlarmText=function(a){if(null!=this.alarm&&""!=this.alarm){var b=this.alarmColor||"255,0,0",c=this.alarmAlpha||.5;a.beginPath(),a.font=this.alarmFont||"10px 寰蒋闆呴粦";var d=a.measureText(this.alarm).width+6,e=a.measureText("鐢�").width+6,f=this.width/2-d/2,g=-this.height/2-e-8;a.strokeStyle="rgba("+b+", "+c+")",a.fillStyle="rgba("+b+", "+c+")",a.lineCap="round",a.lineWidth=1,a.moveTo(f,g),a.lineTo(f+d,g),a.lineTo(f+d,g+e),a.lineTo(f+d/2+6,g+e),a.lineTo(f+d/2,g+e+8),a.lineTo(f+d/2-6,g+e),a.lineTo(f,g+e),a.lineTo(f,g),a.fill(),a.stroke(),a.closePath(),a.beginPath(),a.strokeStyle="rgba("+this.fontColor+", "+this.alpha+")",a.fillStyle="rgba("+this.fontColor+", "+this.alpha+")",a.fillText(this.alarm,f+2,g+e-4),a.closePath()}},this.paintText=function(a){var b=this.text;if(null!=b&&""!=b){a.beginPath(),a.font=this.font;var c=a.measureText(b).width,d=a.measureText("鐢�").width;a.fillStyle="rgba("+this.fontColor+", "+this.alpha+")";var e=this.getTextPostion(this.textPosition,c,d);a.fillText(b,e.x,e.y),a.closePath()}},this.paintBorder=function(a){if(0!=this.borderWidth){a.beginPath(),a.lineWidth=this.borderWidth,a.strokeStyle="rgba("+this.borderColor+","+this.alpha+")";var b=this.borderWidth/2;null==this.borderRadius||0==this.borderRadius?a.rect(-this.width/2-b,-this.height/2-b,this.width+this.borderWidth,this.height+this.borderWidth):a.JTopoRoundRect(-this.width/2-b,-this.height/2-b,this.width+this.borderWidth,this.height+this.borderWidth,this.borderRadius),a.stroke(),a.closePath()}},this.getTextPostion=function(a,b,c){var d=null;return null==a||"Bottom_Center"==a?d={x:-this.width/2+(this.width-b)/2,y:this.height/2+c}:"Top_Center"==a?d={x:-this.width/2+(this.width-b)/2,y:-this.height/2-c/2}:"Top_Right"==a?d={x:this.width/2,y:-this.height/2-c/2}:"Top_Left"==a?d={x:-this.width/2-b,y:-this.height/2-c/2}:"Bottom_Right"==a?d={x:this.width/2,y:this.height/2+c}:"Bottom_Left"==a?d={x:-this.width/2-b,y:this.height/2+c}:"Middle_Center"==a?d={x:-this.width/2+(this.width-b)/2,y:c/2}:"Middle_Right"==a?d={x:this.width/2,y:c/2}:"Middle_Left"==a&&(d={x:-this.width/2-b,y:c/2}),null!=this.textOffsetX&&(d.x+=this.textOffsetX),null!=this.textOffsetY&&(d.y+=this.textOffsetY),d},this.setImage=function(b,c){if(null==b)throw new Error("Node.setImage(): 鍙傛暟Image瀵硅薄涓虹┖!");var d=this;if("string"==typeof b){var e=j[b];null==e?(e=new Image,e.src=b,e.onload=function(){j[b]=e,1==c&&d.setSize(e.width,e.height);var f=a.util.genImageAlarm(e);f&&(e.alarm=f),d.image=e}):(c&&this.setSize(e.width,e.height),this.image=e)}else this.image=b,1==c&&this.setSize(b.width,b.height)},this.removeHandler=function(a){var b=this;this.outLinks&&(this.outLinks.forEach(function(c){c.nodeA===b&&a.remove(c)}),this.outLinks=null),this.inLinks&&(this.inLinks.forEach(function(c){c.nodeZ===b&&a.remove(c)}),this.inLinks=null)}}function c(){c.prototype.initialize.apply(this,arguments)}function d(a){this.initialize(),this.text=a,this.elementType="TextNode",this.paint=function(a){a.beginPath(),a.font=this.font,this.width=a.measureText(this.text).width,this.height=a.measureText("鐢�").width,a.strokeStyle="rgba("+this.fontColor+", "+this.alpha+")",a.fillStyle="rgba("+this.fontColor+", "+this.alpha+")",a.fillText(this.text,-this.width/2,this.height/2),a.closePath(),this.paintBorder(a),this.paintCtrl(a),this.paintAlarmText(a)}}function e(a,b,c){this.initialize(),this.text=a,this.href=b,this.target=c,this.elementType="LinkNode",this.isVisited=!1,this.visitedColor=null,this.paint=function(a){a.beginPath(),a.font=this.font,this.width=a.measureText(this.text).width,this.height=a.measureText("鐢�").width,this.isVisited&&null!=this.visitedColor?(a.strokeStyle="rgba("+this.visitedColor+", "+this.alpha+")",a.fillStyle="rgba("+this.visitedColor+", "+this.alpha+")"):(a.strokeStyle="rgba("+this.fontColor+", "+this.alpha+")",a.fillStyle="rgba("+this.fontColor+", "+this.alpha+")"),a.fillText(this.text,-this.width/2,this.height/2),this.isMouseOver&&(a.moveTo(-this.width/2,this.height),a.lineTo(this.width/2,this.height),a.stroke()),a.closePath(),this.paintBorder(a),this.paintCtrl(a),this.paintAlarmText(a)},this.mousemove(function(){var a=document.getElementsByTagName("canvas");if(a&&a.length>0)for(var b=0;b0)for(var b=0;b=this.frameImages.length){if(!this.repeatPlay)return;this.frameIndex=0}this.setImage(this.frameImages[this.frameIndex],c),setTimeout(function(){e.nextFrame()},d/a.length)}}}function h(a,b,c,d,e){this.initialize();var f=this;this.setImage(a),this.frameIndex=0,this.isPause=!0,this.repeatPlay=!1;var g=d||1e3;e=e||0,this.paint=function(a){if(this.image){var b=this.width,d=this.height;a.save(),a.beginPath(),a.fillStyle="rgba("+this.fillColor+","+this.alpha+")";var f=(Math.floor(this.frameIndex/c)+e)*d,g=Math.floor(this.frameIndex%c)*b;a.drawImage(this.image,g,f,b,d,-b/2,-d/2,b,d),a.fill(),a.closePath(),a.restore(),this.paintText(a),this.paintBorder(a),this.paintCtrl(a),this.paintAlarmText(a)}},this.nextFrame=function(){if(!this.isStop){if(this.frameIndex++,this.frameIndex>=b*c){if(!this.repeatPlay)return;this.frameIndex=0}setTimeout(function(){f.isStop||f.nextFrame()},g/(b*c))}}}function i(){var a=null;return a=arguments.length<=3?new g(arguments[0],arguments[1],arguments[2]):new h(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]),a.stop=function(){a.isStop=!0},a.play=function(){a.isStop=!1,a.frameIndex=0,a.nextFrame()},a}var j={};b.prototype=new a.EditableElement,c.prototype=new b,d.prototype=new c,e.prototype=new d,f.prototype=new c,Object.defineProperties(f.prototype,{radius:{get:function(){return this._radius},set:function(a){this._radius=a;var b=2*this.radius,c=2*this.radius;this.width=b,this.height=c}},width:{get:function(){return this._width},set:function(a){this._radius=a/2,this._width=a}},height:{get:function(){return this._height},set:function(a){this._radius=a/2,this._height=a}}}),g.prototype=new c,h.prototype=new c,i.prototype=new c,a.Node=c,a.TextNode=d,a.LinkNode=e,a.CircleNode=f,a.AnimateNode=i}(JTopo),function(a){function b(a,b){var c=[];if(null==a||null==b)return c;if(a&&b&&a.outLinks&&b.inLinks)for(var d=0;d0&&(this.nodeIndex=a-1)},this.initialize(b,c,g),this.removeHandler=function(){var a=this;this.nodeA&&this.nodeA.outLinks&&(this.nodeA.outLinks=this.nodeA.outLinks.filter(function(b){return b!==a})),this.nodeZ&&this.nodeZ.inLinks&&(this.nodeZ.inLinks=this.nodeZ.inLinks.filter(function(b){return b!==a}));var b=d(this);b.forEach(function(a,b){a.nodeIndex=b})},this.getStartPosition=function(){var a={x:this.nodeA.cx,y:this.nodeA.cy};return a},this.getEndPosition=function(){var a;return null!=this.arrowsRadius&&(a=h(this.nodeZ,this.nodeA)),null==a&&(a={x:this.nodeZ.cx,y:this.nodeZ.cy}),a},this.getPath=function(){var a=[],b=this.getStartPosition(),c=this.getEndPosition();if(this.nodeA===this.nodeZ)return[b,c];var d=e(this.nodeA,this.nodeZ);if(1==d)return[b,c];var f=Math.atan2(c.y-b.y,c.x-b.x),g={x:b.x+this.bundleOffset*Math.cos(f),y:b.y+this.bundleOffset*Math.sin(f)},h={x:c.x+this.bundleOffset*Math.cos(f-Math.PI),y:c.y+this.bundleOffset*Math.sin(f-Math.PI)},i=f-Math.PI/2,j=f-Math.PI/2,k=d*this.bundleGap/2-this.bundleGap/2,l=this.bundleGap*this.nodeIndex,m={x:g.x+l*Math.cos(i),y:g.y+l*Math.sin(i)},n={x:h.x+l*Math.cos(j),y:h.y+l*Math.sin(j)};return m={x:m.x+k*Math.cos(i-Math.PI),y:m.y+k*Math.sin(i-Math.PI)},n={x:n.x+k*Math.cos(j-Math.PI),y:n.y+k*Math.sin(j-Math.PI)},a.push({x:b.x,y:b.y}),a.push({x:m.x,y:m.y}),a.push({x:n.x,y:n.y}),a.push({x:c.x,y:c.y}),a},this.paintPath=function(a,b){if(this.nodeA===this.nodeZ)return void this.paintLoop(a);a.beginPath(),a.moveTo(b[0].x,b[0].y);for(var c=1;c0&&this.paintText(a,b)}};var i=-(Math.PI/2+Math.PI/4);this.paintText=function(a,b){var c=b[0],d=b[b.length-1];if(4==b.length&&(c=b[1],d=b[2]),this.text&&this.text.length>0){var e=(d.x+c.x)/2+this.textOffsetX,f=(d.y+c.y)/2+this.textOffsetY;a.save(),a.beginPath(),a.font=this.font;var g=a.measureText(this.text).width,h=a.measureText("鐢�").width;if(a.fillStyle="rgba("+this.fontColor+", "+this.alpha+")",this.nodeA===this.nodeZ){var j=this.bundleGap*(this.nodeIndex+1)/2,e=this.nodeA.x+j*Math.cos(i),f=this.nodeA.y+j*Math.sin(i);a.fillText(this.text,e,f)}else a.fillText(this.text,e-g/2,f-h/2);a.stroke(),a.closePath(),a.restore()}},this.paintSelected=function(a){a.shadowBlur=10,a.shadowColor="rgba(0,0,0,1)",a.shadowOffsetX=0,a.shadowOffsetY=0},this.isInBound=function(b,c){if(this.nodeA===this.nodeZ){var d=this.bundleGap*(this.nodeIndex+1)/2,e=a.util.getDistance(this.nodeA,{x:b,y:c})-d;return Math.abs(e)<=3}for(var f=!1,g=1;ga.x?a.x+=this.nodeA.width/2:a.x-=this.nodeA.width/2:this.nodeZ.cy>a.y?a.y+=this.nodeA.height/2:a.y-=this.nodeA.height/2,a},this.getEndPosition=function(){var a={x:this.nodeZ.cx,y:this.nodeZ.cy};return"horizontal"==this.direction?this.nodeA.cy0){var c=b[1],d=c.x+this.textOffsetX,e=c.y+this.textOffsetY;a.save(),a.beginPath(),a.font=this.font;var f=a.measureText(this.text).width,g=a.measureText("鐢�").width;a.fillStyle="rgba("+this.fontColor+", "+this.alpha+")",a.fillText(this.text,d-f/2,e-g/2),a.stroke(),a.closePath(),a.restore()}}}function h(a,b,c){this.initialize=function(){h.prototype.initialize.apply(this,arguments),this.direction="vertical",this.offsetGap=44},this.initialize(a,b,c),this.getStartPosition=function(){var a={x:this.nodeA.cx,y:this.nodeA.cy};return"horizontal"==this.direction?a.x=this.nodeZ.cxthis.nodeZ.cx&&(i=-i),d.push({x:b.x,y:b.y+h}),d.push({x:b.x+i,y:b.y+h}),d.push({x:c.x-i,y:c.y+h}),d.push({x:c.x,y:c.y+h})):(this.nodeA.cy>this.nodeZ.cy&&(i=-i),d.push({x:b.x+h,y:b.y}),d.push({x:b.x+h,y:b.y+i}),d.push({x:c.x+h,y:c.y-i}),d.push({x:c.x+h,y:c.y})),d}}function i(a,b,c){this.initialize=function(){i.prototype.initialize.apply(this,arguments)},this.initialize(a,b,c),this.paintPath=function(a,b){if(this.nodeA===this.nodeZ)return void this.paintLoop(a);a.beginPath(),a.moveTo(b[0].x,b[0].y);for(var c=1;cq&&(q=g);var r=q*i,s=q*j,t=d.animate;if(t){var u=t.time||1e3,v=0;c.forEach(function(b,c){v+=0==c?m[c]:m[c-1]+m[c];var d=e+Math.cos(v)*r,g=f+Math.sin(v)*s;a.Animate.stepByStep(b,{x:d-b.width/2,y:g-b.height/2},u).start()})}else{var v=0;c.forEach(function(a,b){v+=0==b?m[b]:m[b-1]+m[b];var c=e+Math.cos(v)*r,d=f+Math.sin(v)*s;a.cx=c,a.cy=d})}return{cx:e,cy:f,radius:r,radiusA:r,radiusB:s}}function d(a,b){return function(c){var d=c.childs;if(!(d.length<=0))for(var e=c.getBound(),f=d[0],g=(e.width-f.width)/b,h=(e.height-f.height)/a,i=(d.length,0),j=0;a>j;j++)for(var k=0;b>k;k++){var l=d[i++],m=e.left+g/2+k*g,n=e.top+h/2+j*h;if(l.setLocation(m,n),i>=d.length)return}}}function e(a,b){return null==a&&(a=0),null==b&&(b=0),function(c){var d=c.childs;if(!(d.length<=0))for(var e=c.getBound(),f=e.left,g=e.top,h=0;h=e.right&&(f=e.left,g+=b+i.height),i.setLocation(f,g),f+=a+i.width}}}function f(){return function(a,b){if(b.length>0){for(var c=1e7,d=-1e7,e=1e7,f=-1e7,g=d-c,h=f-e,i=0;i=d&&(d=j.x),j.y<=e&&(e=j.y),j.y>=f&&(f=j.y),g=d-c+j.width,h=f-e+j.height}a.x=c,a.y=e,a.width=g,a.height=h}}}function g(b){var c=[],d=b.filter(function(b){return b instanceof a.Link?!0:(c.push(b),!1)});return b=c.filter(function(a){for(var b=0;b=0;q--)for(var r=k[""+q].nodes,s=k[""+q].childs,m=0;m0?"down"==b||"up"==b?t.x=(u[0].x+u[u.length-1].x)/2:("left"==b||"right"==b)&&(t.y=(u[0].y+u[u.length-1].y)/2):m>0&&("down"==b||"up"==b?t.x=r[m-1].x+r[m-1].width+c:("left"==b||"right"==b)&&(t.y=r[m-1].y+r[m-1].height+c)),m>0)if("down"==b||"up"==b){if(t.x0){f(e.childs,k[0]);var l=a.util.getElementsBound(e.childs),m=e.getCenterLocation(),n=m.x-(l.left+l.right)/2,o=m.y-(l.top+l.bottom)/2;e.childs.forEach(function(b){b instanceof a.Node&&(b.x+=n,b.y+=o)})}}}function l(b){return function(c){function d(a,c,e){var f=q(a,c);if(0!=f.length){null==e&&(e=b);var g=2*Math.PI/f.length;f.forEach(function(b,f){var h=c.x+e*Math.cos(g*f),i=c.y+e*Math.sin(g*f);b.setLocation(h,i);var j=e/2;d(a,b,j)})}}var e=a.layout.getRootNodes(c.childs);if(e.length>0){d(c.childs,e[0]);var f=a.util.getElementsBound(c.childs),g=c.getCenterLocation(),h=g.x-(f.left+f.right)/2,i=g.y-(f.top+f.bottom)/2;c.childs.forEach(function(b){b instanceof a.Node&&(b.x+=h,b.y+=i)})}}}function m(a,b,c,d,e,f){for(var g=[],h=0;c>h;h++)for(var i=0;d>i;i++)g.push({x:a+i*e,y:b+h*f});return g}function n(a,b,c,d,e,f){var g=e?e:0,h=f?f:2*Math.PI,i=h-g,j=i/c,k=[];g+=j/2;for(var l=g;h>=l;l+=j){var m=a+Math.cos(l)*d,n=b+Math.sin(l)*d;k.push({x:m,y:n})}return k}function o(a,b,c,d,e,f){var g=f||"bottom",h=[];if("bottom"==g)for(var i=a-c/2*d+d/2,j=0;c>=j;j++)h.push({x:i+j*d,y:b+e});else if("top"==g)for(var i=a-c/2*d+d/2,j=0;c>=j;j++)h.push({x:i+j*d,y:b-e});else if("right"==g)for(var i=b-c/2*d+d/2,j=0;c>=j;j++)h.push({x:a+e,y:i+j*d});else if("left"==g)for(var i=b-c/2*d+d/2,j=0;c>=j;j++)h.push({x:a-e,y:i+j*d});return h}function m(a,b,c,d,e,f){for(var g=[],h=0;c>h;h++)for(var i=0;d>i;i++)g.push({x:a+i*e,y:b+h*f});return g}function p(a,b){if(a.layout){var c=a.layout,d=c.type,e=null;if("circle"==d){var f=c.radius||Math.max(a.width,a.height);e=n(a.cx,a.cy,b.length,f,a.layout.beginAngle,a.layout.endAngle)}else if("tree"==d){var g=c.width||50,h=c.height||50,i=c.direction;e=o(a.cx,a.cy,b.length,g,h,i)}else{if("grid"!=d)return;e=m(a.x,a.y,c.rows,c.cols,c.horizontal||0,c.vertical||0)}for(var j=0;j150)){for(var a=0;ad&&(d=e);for(var g=0;gMath.PI/2&&j<=Math.PI?k-=i:j>Math.PI&&j<2*Math.PI*3/4?k-=i:j>2*Math.PI*.75,a.fillStyle="#FFFFFF",a.fillText(h,k,l),a.moveTo(this.radius*Math.cos(j),this.radius*Math.sin(j)),j>Math.PI/2&&j<2*Math.PI*3/4&&(k-=i),j>Math.PI,a.fill(),a.stroke(),a.closePath(),e+=g}},b}function c(){var b=new a.Node;return b.showSelected=!1,b.width=250,b.height=180,b.colors=["#3666B0","#2CA8E0","#77D1F6"],b.datas=[.3,.3,.4],b.titles=["A","B","C"],b.paint=function(a){var c=3,d=(this.width-c)/this.datas.length;a.save(),a.beginPath(),a.fillStyle="#FFFFFF",a.strokeStyle="#FFFFFF",a.moveTo(-this.width/2-1,-this.height/2),a.lineTo(-this.width/2-1,this.height/2+3),a.lineTo(this.width/2+c+1,this.height/2+3),a.stroke(),a.closePath(),a.restore();for(var e=0;e0&&a[b]>=this.targetValue||this.step<0&&a[b]<=this.targetValue;return c}}}var l=new b(function(){var b=!0;for(var d in c)h[d].isDone(d)||(a[d]+=h[d].step,b=!1);if(b){if(!e)return this.stop();for(var d in c)if(f){var g=h[d].targetValue;h[d].targetValue=h[d].oldValue,h[d].oldValue=g,h[d].step=-h[d].step}else a[d]=h[d].oldValue}return this},g);return l}function e(a){null==a&&(a={});var b=a.spring||.1,c=a.friction||.8,d=a.grivity||0,e=(a.wind||0,a.minLength||0);return{items:[],timer:null,isPause:!1,addNode:function(a,b){var c={node:a,target:b,vx:0,vy:0};return this.items.push(c),this},play:function(a){this.stop(),a=null==a?1e3/24:a;var b=this;this.timer=setInterval(function(){b.nextFrame()},a)},stop:function(){null!=this.timer&&window.clearInterval(this.timer)},nextFrame:function(){for(var a=0;a2*Math.PI&&(a.rotate=0)))},100),f}function d(){return window.clearInterval(e),f.onStop&&f.onStop(a),f}var e=(b.context,null),f={},g=b.v;return f.run=c,f.stop=d,f.onStop=function(a){return f.onStop=a,f},f}function g(a,b){function c(){return window.clearInterval(g),h.onStop&&h.onStop(a),h}function d(){var d=b.dx||0,i=b.dy||2;return g=setInterval(function(){return o?void h.stop():(i+=f,void(a.y+a.heightg.stage.canvas.width||a.y>g.stage.canvas.height)&&(i.onStop&&i.onStop(a),c(a))))},50),i}function e(){window.clearInterval(h)}var f=.8,g=b.context,h=null,i={};return i.onStop=function(a){return i.onStop=a,i},i.run=d,i.stop=e,i}function j(){o=!0}function k(){o=!1}function l(b,c){function d(){return n=setInterval(function(){if(o)return void m.stop();var a=f.y+h+Math.sin(k)*j;b.setLocation(b.x,a),k+=l},100),m}function e(){window.clearInterval(n)}var f=c.p1,g=c.p2,h=(c.context,f.x+(g.x-f.x)/2),i=f.y+(g.y-f.y)/2,j=a.util.getDistance(f,g)/2,k=Math.atan2(i,h),l=c.speed||.2,m={},n=null;return m.run=d,m.stop=e,m}function m(a,b){function c(){return h=setInterval(function(){if(o)return void g.stop();var b=e.x-a.x,c=e.y-a.y,h=b*f,i=c*f;a.x+=h,a.y+=i,.01>h&&.1>i&&d()},100),g}function d(){window.clearInterval(h)}var e=b.position,f=(b.context,b.easing||.2),g={},h=null;return g.onStop=function(a){return g.onStop=a,g},g.run=c,g.stop=d,g}function n(a,b){function c(){return j=setInterval(function(){a.scaleX+=f,a.scaleY+=f,a.scaleX>=e&&d()},100),i}function d(){i.onStop&&i.onStop(a),a.scaleX=g,a.scaleY=h,window.clearInterval(j)}var e=(b.position,b.context,b.scale||1),f=.06,g=a.scaleX,h=a.scaleY,i={},j=null;return i.onStop=function(a){return i.onStop=a,i},i.run=c,i.stop=d,i}a.Animate={},a.Effect={};var o=!1;a.Effect.spring=e,a.Effect.gravity=c,a.Animate.stepByStep=d,a.Animate.rotate=f,a.Animate.scale=n,a.Animate.move=m,a.Animate.cycle=l,a.Animate.repeatThrow=i,a.Animate.dividedTwoPiece=h,a.Animate.gravity=g,a.Animate.startAll=k,a.Animate.stopAll=j}(JTopo),function(a){function b(a,b){var c=[];if(0==a.length)return c;var d=b.match(/^\s*(\w+)\s*$/);if(null!=d){var e=a.filter(function(a){return a.elementType==d[1]});null!=e&&e.length>0&&(c=c.concat(e))}else{var f=!1;if(d=b.match(/\s*(\w+)\s*\[\s*(\w+)\s*([>=<])\s*['"](\S+)['"]\s*\]\s*/),(null==d||d.length<5)&&(d=b.match(/\s*(\w+)\s*\[\s*(\w+)\s*([>=<])\s*(\d+(\.\d+)?)\s*\]\s*/),f=!0),null!=d&&d.length>=5){var g=d[1],h=d[2],i=d[3],j=d[4];e=a.filter(function(a){if(a.elementType!=g)return!1;var b=a[h];return 1==f&&(b=parseInt(b)),"="==i?b==j:">"==i?b>j:"<"==i?j>b:"<="==i?j>=b:">="==i?b>=j:"!="==i?b!=j:!1}),null!=e&&e.length>0&&(c=c.concat(e))}}return c}function c(a){if(a.find=function(a){return d.call(this,a)},e.forEach(function(b){a[b]=function(a){for(var c=0;c0){var b=a[0];for(var c in b){var f=b[c];"function"==typeof f&&!function(b){a[c]=function(){for(var c=[],d=0;de;e++)a(),c&&d.turn(c),d.move(3)}}function e(a,b){var c=2*Math.PI;return function(d){for(var e=0;b>e;e++)a(),d.turn(c/b)}}function f(a,b,c){return function(d){for(var e=0;b>e;e++)a(),d.resize(c)}}function g(a){var b=2*Math.PI;return function(c){for(var d=0;a>d;d++)c.forward(1),c.turn(b/a)}}function h(a){var b=4*Math.PI;return function(c){for(var d=0;a>d;d++)c.forward(1),c.turn(b/a)}}function i(a,b,c,d){return function(e){for(var f=0;b>f;f++)a(),e.forward(1),e.turn(c),e.resize(d)}}var j={};c.prototype.forward=function(a){var b=this.p,c=this.w;return b.x=b.x+a*c.x,b.y=b.y+a*c.y,this.paint&&this.paint(b.x,b.y),this},c.prototype.move=function(a){var b=this.p,c=this.w;return b.x=b.x+a*c.x,b.y=b.y+a*c.y,this},c.prototype.moveTo=function(a,b){return this.p.x=a,this.p.y=b,this},c.prototype.turn=function(a){var b=(this.p,this.w),c=Math.cos(a)*b.x-Math.sin(a)*b.y,d=Math.sin(a)*b.x+Math.cos(a)*b.y;return b.x=c,b.y=d,this},c.prototype.resize=function(a){var b=this.w;return b.x=b.x*a,b.y=b.y*a,this},c.prototype.save=function(){return null==this._stack&&(this._stack=[]),this._stack.push([this.p,this.w]),this},c.prototype.restore=function(){if(null!=this._stack&&this._stack.length>0){var a=this._stack.pop();this.p=a[0],this.w=a[1]}return this},j.Tortoise=c,j.shift=d,j.spin=e,j.polygon=g,j.spiral=i,j.star=h,j.scale=f,a.Logo=j}(window); --------------------------------------------------------------------------------