├── BackToTop
    ├── README.md
    └── index.vue
├── Empty
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── README.md
    └── index.vue
├── ExportExcel
    ├── Export2Excel.js
    ├── README.md
    └── index.vue
├── JTopoInVue
    ├── App.vue
    ├── README.md
    ├── components
    │   └── jTopo.vue
    ├── index.html
    ├── lib
    │   └── jtopo-0.4.8-min.js
    ├── main.js
    ├── package.json
    ├── static
    │   └── bg.jpg
    └── webpack.config.js
├── LICENSE
├── MergeTableCell
    ├── App.vue
    ├── README.md
    ├── data.js
    ├── index.html
    ├── main.js
    ├── package.json
    └── webpack.config.js
├── Pagination
    ├── README.md
    ├── index.vue
    └── 效果图.gif
├── README.md
├── SideBar
    ├── README.md
    ├── SideBar.vue
    ├── SidebarItem.vue
    └── 效果图.gif
├── UploadFile
    ├── README.md
    ├── index.vue
    └── 效果图.gif
├── VueHoverMask
    ├── README.md
    ├── index.vue
    └── 效果图.gif
└── nprogresBar
    ├── README.md
    └── router.js


/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 | <template>
13 |   <div id="app">
14 |     <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
15 |     <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
16 |     <el-tooltip placement="top" content="回到顶部">
17 |       <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0" transition-name="fade"/>
18 |     </el-tooltip>
19 |   </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import  BackToTop from './BackToTop'
25 | export default {
26 |   name: 'app',
27 |   components: { BackToTop},
28 |   data() {
29 |     return {
30 |       myBackToTopStyle: {
31 |         right: '50px',
32 |         bottom: '50px',
33 |         width: '40px',
34 |         height: '40px',
35 |         borderRadius: '4px',
36 |         lineHeight: '45px', // 请保持与高度一致以垂直居中
37 |         background: '#e7eaf1'// 按钮的背景颜色
38 |       }
39 |     }
40 |   }
41 | }
42 | </script>
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 | （完）


--------------------------------------------------------------------------------
/BackToTop/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition :name="transitionName">
  3 |     <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
  4 |       <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
  5 |         <title>回到顶部</title>
  6 |         <g>
  7 |           <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"/>
  8 |         </g>
  9 |       </svg>
 10 |     </div>
 11 |   </transition>
 12 | </template>
 13 | 
 14 | <script>
 15 | export default {
 16 |   name: 'BackToTop',
 17 |   props: {
 18 |     visibilityHeight: {
 19 |       type: Number,
 20 |       default: 400
 21 |     },
 22 |     backPosition: {
 23 |       type: Number,
 24 |       default: 0
 25 |     },
 26 |     customStyle: {
 27 |       type: Object,
 28 |       default: function() {
 29 |         return {
 30 |           right: '50px',
 31 |           bottom: '50px',
 32 |           width: '40px',
 33 |           height: '40px',
 34 |           'border-radius': '4px',
 35 |           'line-height': '45px',
 36 |           background: '#e7eaf1'
 37 |         }
 38 |       }
 39 |     },
 40 |     transitionName: {
 41 |       type: String,
 42 |       default: 'fade'
 43 |     }
 44 |   },
 45 |   data() {
 46 |     return {
 47 |       visible: false,
 48 |       interval: null,
 49 |       isMoving: false
 50 |     }
 51 |   },
 52 |   mounted() {
 53 |     window.addEventListener('scroll', this.handleScroll)
 54 |   },
 55 |   beforeDestroy() {
 56 |     window.removeEventListener('scroll', this.handleScroll)
 57 |     if (this.interval) {
 58 |       clearInterval(this.interval)
 59 |     }
 60 |   },
 61 |   methods: {
 62 |     handleScroll() {
 63 |       this.visible = window.pageYOffset > this.visibilityHeight
 64 |     },
 65 |     backToTop() {
 66 |       if (this.isMoving) return
 67 |       const start = window.pageYOffset
 68 |       let i = 0
 69 |       this.isMoving = true
 70 |       this.interval = setInterval(() => {
 71 |         const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
 72 |         if (next <= this.backPosition) {
 73 |           window.scrollTo(0, this.backPosition)
 74 |           clearInterval(this.interval)
 75 |           this.isMoving = false
 76 |         } else {
 77 |           window.scrollTo(0, next)
 78 |         }
 79 |         i++
 80 |       }, 16.7)
 81 |     },
 82 |     easeInOutQuad(t, b, c, d) {
 83 |       if ((t /= d / 2) < 1) return c / 2 * t * t + b
 84 |       return -c / 2 * (--t * (t - 2) - 1) + b
 85 |     }
 86 |   }
 87 | }
 88 | </script>
 89 | 
 90 | <style scoped>
 91 |   .back-to-ceiling {
 92 |     position: fixed;
 93 |     display: inline-block;
 94 |     text-align: center;
 95 |     cursor: pointer;
 96 |   }
 97 | 
 98 |   .back-to-ceiling:hover {
 99 |     background: #d5dbe7;
100 |   }
101 | 
102 |   .fade-enter-active,
103 |   .fade-leave-active {
104 |     transition: opacity .5s;
105 |   }
106 | 
107 |   .fade-enter,
108 |   .fade-leave-to {
109 |     opacity: 0
110 |   }
111 | 
112 |   .back-to-ceiling .Icon {
113 |     fill: #9aaabf;
114 |     background: none;
115 |   }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/Empty/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/Empty/1.png


--------------------------------------------------------------------------------
/Empty/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/Empty/2.png


--------------------------------------------------------------------------------
/Empty/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/Empty/3.png


--------------------------------------------------------------------------------
/Empty/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/Empty/4.png


--------------------------------------------------------------------------------
/Empty/README.md:
--------------------------------------------------------------------------------
 1 | # 1. 前言
 2 | 
 3 | 在日常开发中，页面上肯定有展示数据的需求，但是当某些时候该展示数据的地方此时数据为空时，就会留下一片空白，对用户体验不是很好，那么接下来我们就封装一个空数据时的占位展示图，告诉用户此时用户为空，并非数据没有加载出来，不用让用户盲目的等待。
 4 | 
 5 | # 2. 使用示例
 6 | 
 7 | 该组件可以直接引入到项目中使用，示例如下：
 8 | 
 9 | ```vue
10 | <template>
11 |   <div id="app">
12 |     <div v-if="content.length"></div>  
13 |     <Empty v-else></Empty>
14 |   </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import Empty from './Empty'
20 | export default {
21 |   name: 'app',
22 |   components: { Empty},
23 |   data() {
24 |     return {
25 |       content:[]
26 |     }
27 |   }
28 | }
29 | </script>
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 |   <Empty description="我是自定义内容"></Empty>
50 |   ```
51 | ![](./2.png)
52 | - 显示自定义图片
53 | 
54 |   ```html
55 |   <Empty description="显示网络图片" image="https://www.baidu.com/img/bd_logo1.png"></Empty>
56 |   ```
57 |   ![](./3.png)
58 |   
59 |   
60 | 
61 |   ```javascript
62 |   <Empty description="显示项目资源图片" :image="require('@/assets/images/warn.png')"></Empty>
63 |   ```
64 |   ![](./4.png)
65 | 
66 | - 自定义显示图片样式
67 | 
68 |   ```html
69 |   <template>
70 |       <Empty 
71 |          description="显示网络图片" 
72 |          image="https://www.baidu.com/img/bd_logo1.png" 
73 |          :imageStyle="imageStyle">
74 |       </Empty>
75 |   </template>
76 |   <script>
77 |       data() {
78 |           return {
79 |             imageStyle:{
80 |               width:'10px'
81 |             }
82 |       }
83 |   </script>
84 |   ```
85 | 
86 | # 4. 组件代码
87 | 
88 | 完整代码请戳☞[Vue-Components-Library/Empty](https://github.com/NLRX/Vue-Components-Library/tree/master/Empty)
89 | 
90 | （完）
91 | 
92 | 


--------------------------------------------------------------------------------
/Empty/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="empty">
 3 |     <div class="image">
 4 |       <img :alt="description" :src="image" v-if="image" :style="imageStyle"/>
 5 |       <svg v-else width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
 6 |         <g fill="none" fillRule="evenodd">
 7 |           <g transform="translate(24 31.67)">
 8 |             <ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668" />
 9 |             <path
10 |               d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
11 |               fill="#AEB8C2"
12 |             />
13 |             <path
14 |               d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
15 |               fill="url(#linearGradient-1)"
16 |               transform="translate(13.56)"
17 |             />
18 |             <path
19 |               d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
20 |               fill="#F5F5F7"
21 |             />
22 |             <path
23 |               d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
24 |               fill="#DCE0E6"
25 |             />
26 |           </g>
27 |           <path
28 |             d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
29 |             fill="#DCE0E6"
30 |           />
31 |           <g transform="translate(149.65 15.383)" fill="#FFF">
32 |             <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
33 |             <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
34 |           </g>
35 |         </g>
36 |       </svg>
37 |     </div>
38 |     <p class="description">{{description}}</p>
39 |   </div>
40 | </template>
41 | 
42 | <script>
43 | export default {
44 |   name: 'Empty',
45 |   props:{
46 |     description:{
47 |       required: false,
48 |       type: String,
49 |       default:'暂无数据'
50 |     },
51 |     image:{
52 |       required: false,
53 |       type: String,
54 |     },
55 |     imageStyle: {
56 |       required: false,
57 |       type: Object
58 |     },
59 |   },
60 |   data() {
61 |     return {
62 | 
63 |     }
64 |   },
65 | }
66 | </script>
67 | 
68 | <style scoped>
69 |   .empty {
70 |     margin: 0 8px;
71 |     font-size: 14px;
72 |     line-height: 22px;
73 |     text-align: center;
74 |   }
75 |   .image {
76 |     height: 100px;
77 |     margin-bottom: 8px;
78 |   }
79 |   .image img{
80 |     height: 100%;
81 |   }
82 |   .image svg{
83 |     height: 100%;
84 |     margin: auto;
85 |   }
86 |   .description {
87 |     margin: 0;
88 |     color:rgba(0,0,0,0.5)
89 |   }
90 | </style>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | <template>
 20 |   <div id="app">
 21 |     <export-excel v-if="list !== null" :list="list" :tHeader="tHeader" :tValue="tValue"></export-excel>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import  ExportExcel from './ExportExcel'
 27 | export default {
 28 |   name: 'app',
 29 |   components: { ExportExcel},
 30 |   data() {
 31 |     return {
 32 |       list:null,
 33 |       tHeader:['Id', '告警类型', '告警内容', '告警时间（段）', '告警次数'],
 34 | 	  tValue:['id', 'type', 'content', 'time', 'count'],
 35 |     }
 36 |   }
 37 | }
 38 | </script>
 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 | （完）


--------------------------------------------------------------------------------
/ExportExcel/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <el-button :loading="downloadLoading" type="primary" @click="handleDownload">导出 Excel</el-button>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 |   name: 'ExportExcel',
 9 |   props: {
10 |     list: {
11 |       required: true,
12 |       type: Array
13 |     },
14 |     tHeader: {
15 |       required: true,
16 |       type: Array
17 |     },
18 |     tValue: {
19 |       required: true,
20 |       type: Array
21 |     },
22 |     filename: {
23 |       type: String,
24 |       default: '导出数据'
25 |     }
26 |   },
27 |   data() {
28 |     return {
29 |       downloadLoading: false,
30 |       autoWidth: true,
31 |       bookType: 'xlsx'
32 |     }
33 |   },
34 |   methods: {
35 |     handleDownload() {
36 |       this.downloadLoading = true
37 |       import('./Export2Excel').then(excel => {
38 |         const data = this.formatJson(this.tValue, this.list)
39 |         excel.export_json_to_excel({
40 |           header: this.tHeader,
41 |           data,
42 |           filename: this.filename,
43 |           autoWidth: this.autoWidth,
44 |           bookType: this.bookType
45 |         })
46 |         this.downloadLoading = false
47 |       })
48 |     },
49 |     formatJson(filterVal, jsonData) {
50 |       return jsonData.map(v => filterVal.map(j => {
51 |           return v[j]
52 |       }))
53 |     }
54 |   }
55 | }
56 | </script>
57 | 
58 | 
59 | 


--------------------------------------------------------------------------------
/JTopoInVue/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <jtopo/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import jtopo from './components/jTopo'
 9 | export default {
10 |   name: 'app',
11 |   components:{jtopo}
12 | }
13 | </script>
14 | 
15 | 


--------------------------------------------------------------------------------
/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`文件通过`<script>`标签方式引入，既然如此，我们可以大胆想象一下，我们可以认为`jtopo.js`就是`webpack`打包输出的文件，我们也将其手动在`index.html`文件中通过`<script>`标签方式引入是不是就可以使用了呢。通过实验，果真如此。
10 | 
11 | ```html
12 | <!DOCTYPE html>
13 | <html lang="en">
14 |   <head>
15 |     <meta charset="utf-8">
16 |     <title>JTopoInVue</title>
17 |   </head>
18 |   <body>
19 |     <div id="app"></div>
20 |     <script src="/lib/jtopo-0.4.8-min.js"></script>
21 |     <script src="/dist/build.js"></script>
22 |   </body>
23 | </html>
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 | 


--------------------------------------------------------------------------------
/JTopoInVue/components/jTopo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <canvas width="800" height="580" id="canvas"></canvas>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | export default {
10 |   name: "jtopo",
11 |   mounted() {
12 |     this.initTopo()
13 |   },
14 |   methods: {
15 |    initTopo() {
16 |       let canvas = document.getElementById("canvas");
17 | 
18 |       let stage = new JTopo.Stage(canvas);
19 | 
20 |       // stage.eagleEye.visible = true;
21 |       stage.wheelZoom = 1.2; //缩放比例
22 |       let scene = new JTopo.Scene(stage);
23 |       scene.background = '/static/bg.jpg';
24 | 
25 |       var node = new JTopo.Node("难凉热血");                            
26 |       node.setLocation(409, 269);
27 |       scene.add(node);
28 |      
29 |      
30 |       // 将画布居中
31 |       stage.centerAndZoom();
32 |     }
33 |   }
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/JTopoInVue/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>JTopoInVue</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <script src="/lib/jtopo-0.4.8-min.js"></script>
10 |     <script src="/dist/build.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/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;f<e.length;f++)d?!function(a,b){setTimeout(function(){a(b)},10)}(e[f],c):e[f](c)}}function getDistance(a,b,c,d){var e,f;return null==c&&null==d?(e=b.x-a.x,f=b.y-a.y):(e=c-a,f=d-b),Math.sqrt(e*e+f*f)}function getElementsBound(a){for(var b={left:Number.MAX_VALUE,right:Number.MIN_VALUE,top:Number.MAX_VALUE,bottom:Number.MIN_VALUE},c=0;c<a.length;c++){var d=a[c];d instanceof JTopo.Link||(b.left>d.x&&(b.left=d.x,b.leftNode=d),b.right<d.x+d.width&&(b.right=d.x+d.width,b.rightNode=d),b.top>d.y&&(b.top=d.y,b.topNode=d),b.bottom<d.y+d.height&&(b.bottom=d.y+d.height,b.bottomNode=d))}return b.width=b.right-b.left,b.height=b.bottom-b.top,b}function mouseCoords(a){return a=cloneEvent(a),a.pageX||(a.pageX=a.clientX+document.body.scrollLeft-document.body.clientLeft,a.pageY=a.clientY+document.body.scrollTop-document.body.clientTop),a}function getEventPosition(a){return a=mouseCoords(a)}function rotatePoint(a,b,c,d,e){var f=c-a,g=d-b,h=Math.sqrt(f*f+g*g),i=Math.atan2(g,f)+e;return{x:a+Math.cos(i)*h,y:b+Math.sin(i)*h}}function rotatePoints(a,b,c){for(var d=[],e=0;e<b.length;e++){var f=rotatePoint(a.x,a.y,b[e].x,b[e].y,c);d.push(f)}return d}function $foreach(a,b,c){function d(e){e!=a.length&&(b(a[e]),setTimeout(function(){d(++e)},c))}if(0!=a.length){var e=0;d(e)}}function $for(a,b,c,d){function e(a){a!=b&&(c(b),setTimeout(function(){e(++a)},d))}if(!(a>b)){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.x<c+e&&a.y>d&&a.y<d+f}function isPointInLine(a,b,c){var d=JTopo.util.getDistance(b,c),e=JTopo.util.getDistance(b,a),f=JTopo.util.getDistance(c,a),g=Math.abs(e+f-d)<=.5;return g}function removeFromArray(a,b){for(var c=0;c<a.length;c++){var d=a[c];if(d===b){a=a.del(c);break}}return a}function randomColor(){return Math.floor(255*Math.random())+","+Math.floor(255*Math.random())+","+Math.floor(255*Math.random())}function isIntsect(){}function getProperties(a,b){for(var c="",d=0;d<b.length;d++){d>0&&(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;i<scenes.length;i++){var sceneObj=scenes[i],scene=new JTopo.Scene(stage);for(var p in sceneObj)if("elements"!=p)scene[p]=sceneObj[p];else for(var nodeMap={},elements=sceneObj.elements,m=0;m<elements.length;m++){var elementObj=elements[m],type=elementObj.elementType,element;"Node"==type&&(element=new JTopo.Node);for(var mk in elementObj)element[mk]=elementObj[mk];nodeMap[element.text]=element,scene.add(element)}}return console.log(stage),stage}function toJson(a){var b="backgroundColor,visible,mode,rotate,alpha,scaleX,scaleY,shadow,translateX,translateY,areaSelect,paintAll".split(","),c="text,elementType,x,y,width,height,visible,alpha,rotate,scaleX,scaleY,fillColor,shadow,transformAble,zIndex,dragable,selected,showSelected,font,fontColor,textPosition,textOffsetX,textOffsetY".split(","),d="{";d+="frames:"+a.frames,d+=", scenes:[";for(var e=0;e<a.childs.length;e++){var f=a.childs[e];d+="{",d+=getProperties(f,b),d+=", elements:[";for(var g=0;g<f.childs.length;g++){var h=f.childs[g];g>0&&(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;b<this.length;b++)if(this[b]===a)return this.slice(0,b).concat(this.slice(b+1,this.length));return this}return 0>a?this:this.slice(0,a).concat(this.slice(a+1,this.length))},[].indexOf||(Array.prototype.indexOf=function(a){for(var b=0;b<this.length;b++)if(this[b]===a)return b;return-1}),window.console||(window.console={log:function(){},info:function(){},debug:function(){},warn:function(){},error:function(){}});var canvas=document.createElement("canvas"),graphics=canvas.getContext("2d"),alarmImageCache={};JTopo.util={rotatePoint:rotatePoint,rotatePoints:rotatePoints,getDistance:getDistance,getEventPosition:getEventPosition,mouseCoords:mouseCoords,MessageBus:MessageBus,isFirefox:navigator.userAgent.indexOf("Firefox")>0,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.childs.length;b++)if(this.childs[b]===a)return;a.addTo(this),this.childs.push(a)},this.remove=function(a){if(null==a)throw new Error("Stage.remove鍑洪敊: 鍙傛暟涓簄ull!");for(var b=0;b<this.childs.length;b++)if(this.childs[b]===a)return a.stage=null,this.childs=this.childs.del(b),this;return this},this.clear=function(){this.childs=[]},this.addEventListener=function(a,b){var c=this,d=function(a){b.call(c,a)};return this.messageBus.subscribe(a,d),this},this.removeEventListener=function(a){this.messageBus.unsubscribe(a)},this.removeAllEventListener=function(){this.messageBus=new a.util.MessageBus},this.dispatchEvent=function(a,b){return this.messageBus.publish(a,b),this};var q="click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag,mousewheel,touchstart,touchmove,touchend,keydown,keyup".split(","),r=this;q.forEach(function(a){r[a]=function(b){null!=b?this.addEventListener(a,b):this.dispatchEvent(a)}}),this.saveImageInfo=function(a,b){var c=this.eagleEye.getImage(a,b),d=window.open("about:blank");return d.document.write("<img src='"+c+"' alt='from canvas'/>"),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.left<a.left&&(a.left=c.left,a.leftNode=c.leftNode),c.top<a.top&&(a.top=c.top,a.topNode=c.topNode),c.right>a.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;b<this.zIndexArray.length;b++)for(var c=this.zIndexArray[b],d=this.zIndexMap[c],e=0;e<d.length;e++){var f=d[e];this.isVisiable(f)&&a.push(f)}return a},this.getDisplayedNodes=function(){for(var b=[],c=0;c<this.childs.length;c++){var d=this.childs[c];d instanceof a.Node&&this.isVisiable(d)&&b.push(d)}return b},this.paintChilds=function(b){for(var c=0;c<this.zIndexArray.length;c++)for(var d=this.zIndexArray[c],e=this.zIndexMap[d],f=0;f<e.length;f++){var g=e[f];if(1==this.paintAll||this.isVisiable(g)){if(b.save(),1==g.transformAble){var h=g.getCenterLocation();b.translate(h.x,h.y),g.rotate&&b.rotate(g.rotate),g.scaleX&&g.scaleY?b.scale(g.scaleX,g.scaleY):g.scaleX?b.scale(g.scaleX,1):g.scaleY&&b.scale(1,g.scaleY)}1==g.shadow&&(b.shadowBlur=g.shadowBlur,b.shadowColor=g.shadowColor,b.shadowOffsetX=g.shadowOffsetX,b.shadowOffsetY=g.shadowOffsetY),g instanceof a.InteractiveElement&&(g.selected&&1==g.showSelected&&g.paintSelected(b),1==g.isMouseOver&&g.paintMouseover(b)),g.paint(b),b.restore()}}},this.getOffsetTranslate=function(a){var b=this.stage.canvas.width,c=this.stage.canvas.height;null!=a&&"move"!=a&&(b=a.canvas.width,c=a.canvas.height);var d=b/this.scaleX/2,e=c/this.scaleY/2,f={translateX:this.translateX+(d-d*this.scaleX),translateY:this.translateY+(e-e*this.scaleY)};return f},this.isVisiable=function(b){if(1!=b.visible)return!1;if(b instanceof a.Link)return!0;var c=this.getOffsetTranslate(),d=b.x+c.translateX,e=b.y+c.translateY;d*=this.scaleX,e*=this.scaleY;var f=d+b.width*this.scaleX,g=e+b.height*this.scaleY;return d>this.stage.canvas.width||e>this.stage.canvas.height||0>f||0>g?!1:!0},this.paintOperations=function(a,b){for(var c=0;c<b.length;c++)b[c](a)},this.findElements=function(a){for(var b=[],c=0;c<this.childs.length;c++)1==a(this.childs[c])&&b.push(this.childs[c]);return b},this.getElementsByClass=function(a){return this.findElements(function(b){return b instanceof a})},this.addOperation=function(a){return this.operations.push(a),this},this.clearOperations=function(){return this.operations=[],this},this.getElementByXY=function(b,c){for(var d=null,e=this.zIndexArray.length-1;e>=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<this.selectedElements.length;b++)this.selectedElements[b].unselectedHandler(a);this.selectedElements=[]},this.notInSelectedNodes=function(a){for(var b=0;b<this.selectedElements.length;b++)if(a===this.selectedElements[b])return!1;return!0},this.removeFromSelected=function(a){for(var b=0;b<this.selectedElements.length;b++){var c=this.selectedElements[b];a===c&&(this.selectedElements=this.selectedElements.del(b))}},this.toSceneEvent=function(b){var c=a.util.clone(b);if(c.x/=this.scaleX,c.y/=this.scaleY,1==this.translate){var d=this.getOffsetTranslate();c.x-=d.translateX,c.y-=d.translateY}return null!=c.dx&&(c.dx/=this.scaleX,c.dy/=this.scaleY),null!=this.currentElement&&(c.target=this.currentElement),c.scene=this,c},this.selectElement=function(a){var b=e.getElementByXY(a.x,a.y);if(null!=b)if(a.target=b,b.mousedownHander(a),b.selectedHandler(a),e.notInSelectedNodes(b))a.ctrlKey||e.cancleAllSelected(),e.addToSelected(b);else{1==a.ctrlKey&&(b.unselectedHandler(),this.removeFromSelected(b));for(var c=0;c<this.selectedElements.length;c++){var d=this.selectedElements[c];d.selectedHandler(a)}}else a.ctrlKey||e.cancleAllSelected();this.currentElement=b},this.mousedownHandler=function(b){var c=this.toSceneEvent(b);if(this.mouseDown=!0,this.mouseDownX=c.x,this.mouseDownY=c.y,this.mouseDownEvent=c,this.mode==a.SceneMode.normal)this.selectElement(c),(null==this.currentElement||this.currentElement instanceof a.Link)&&1==this.translate&&(this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY);else{if(this.mode==a.SceneMode.drag&&1==this.translate)return this.lastTranslateX=this.translateX,void(this.lastTranslateY=this.translateY);this.mode==a.SceneMode.select?this.selectElement(c):this.mode==a.SceneMode.edit&&(this.selectElement(c),(null==this.currentElement||this.currentElement instanceof a.Link)&&1==this.translate&&(this.lastTranslateX=this.translateX,this.lastTranslateY=this.translateY))}e.dispatchEvent("mousedown",c)},this.mouseupHandler=function(b){this.stage.cursor!=a.MouseCursor.normal&&(this.stage.cursor=a.MouseCursor.normal),e.clearOperations();var c=this.toSceneEvent(b);null!=this.currentElement&&(c.target=e.currentElement,this.currentElement.mouseupHandler(c)),this.dispatchEvent("mouseup",c),this.mouseDown=!1},this.dragElements=function(b){if(null!=this.currentElement&&1==this.currentElement.dragable)for(var c=0;c<this.selectedElements.length;c++){var d=this.selectedElements[c];if(0!=d.dragable){var e=a.util.clone(b);e.target=d,d.mousedragHandler(e)}}},this.mousedragHandler=function(b){var c=this.toSceneEvent(b);this.mode==a.SceneMode.normal?null==this.currentElement||this.currentElement instanceof a.Link?1==this.translate&&(this.stage.cursor=a.MouseCursor.closed_hand,this.translateX=this.lastTranslateX+c.dx,this.translateY=this.lastTranslateY+c.dy):this.dragElements(c):this.mode==a.SceneMode.drag?1==this.translate&&(this.stage.cursor=a.MouseCursor.closed_hand,this.translateX=this.lastTranslateX+c.dx,this.translateY=this.lastTranslateY+c.dy):this.mode==a.SceneMode.select?null!=this.currentElement?1==this.currentElement.dragable&&this.dragElements(c):1==this.areaSelect&&this.areaSelectHandle(c):this.mode==a.SceneMode.edit&&(null==this.currentElement||this.currentElement instanceof a.Link?1==this.translate&&(this.stage.cursor=a.MouseCursor.closed_hand,this.translateX=this.lastTranslateX+c.dx,this.translateY=this.lastTranslateY+c.dy):this.dragElements(c)),this.dispatchEvent("mousedrag",c)},this.areaSelectHandle=function(a){var b=a.offsetLeft,c=a.offsetTop,f=this.mouseDownEvent.offsetLeft,g=this.mouseDownEvent.offsetTop,h=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;o<e.childs.length;o++){var p=e.childs[o];p.x>h&&p.x+p.width<m&&p.y>i&&p.y+p.height<n&&e.notInSelectedNodes(p)&&(p.selectedHandler(a),e.addToSelected(p))}},this.mousemoveHandler=function(b){this.mousecoord={x:b.x,y:b.y};var c=this.toSceneEvent(b);if(this.mode==a.SceneMode.drag)return void(this.stage.cursor=a.MouseCursor.open_hand);this.mode==a.SceneMode.normal?this.stage.cursor=a.MouseCursor.normal:this.mode==a.SceneMode.select&&(this.stage.cursor=a.MouseCursor.normal);var d=e.getElementByXY(c.x,c.y);null!=d?(e.mouseOverelement&&e.mouseOverelement!==d&&(c.target=d,e.mouseOverelement.mouseoutHandler(c)),e.mouseOverelement=d,0==d.isMouseOver?(c.target=d,d.mouseoverHandler(c),e.dispatchEvent("mouseover",c)):(c.target=d,d.mousemoveHandler(c),e.dispatchEvent("mousemove",c))):e.mouseOverelement?(c.target=d,e.mouseOverelement.mouseoutHandler(c),e.mouseOverelement=null,e.dispatchEvent("mouseout",c)):(c.target=null,e.dispatchEvent("mousemove",c))},this.mouseoverHandler=function(a){var b=this.toSceneEvent(a);this.dispatchEvent("mouseover",b)},this.mouseoutHandler=function(a){var b=this.toSceneEvent(a);this.dispatchEvent("mouseout",b)},this.clickHandler=function(a){var b=this.toSceneEvent(a);this.currentElement&&(b.target=this.currentElement,this.currentElement.clickHandler(b)),this.dispatchEvent("click",b)},this.dbclickHandler=function(a){var b=this.toSceneEvent(a);this.currentElement?(b.target=this.currentElement,this.currentElement.dbclickHandler(b)):e.cancleAllSelected(),this.dispatchEvent("dbclick",b)},this.mousewheelHandler=function(a){var b=this.toSceneEvent(a);this.dispatchEvent("mousewheel",b)},this.touchstart=this.mousedownHander,this.touchmove=this.mousedragHandler,this.touchend=this.mousedownHander,this.keydownHandler=function(a){this.dispatchEvent("keydown",a)},this.keyupHandler=function(a){this.dispatchEvent("keyup",a)},this.addEventListener=function(a,b){var c=this,d=function(a){b.call(c,a)};return this.messageBus.subscribe(a,d),this},this.removeEventListener=function(a){this.messageBus.unsubscribe(a)},this.removeAllEventListener=function(){this.messageBus=new a.util.MessageBus},this.dispatchEvent=function(a,b){return this.messageBus.publish(a,b),this};var f="click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag,mousewheel,touchstart,touchmove,touchend,keydown,keyup".split(","),g=this;return f.forEach(function(a){g[a]=function(b){null!=b?this.addEventListener(a,b):this.dispatchEvent(a)}}),this.zoom=function(a,b){null!=a&&0!=a&&(this.scaleX=a),null!=b&&0!=b&&(this.scaleY=b)
2 | },this.zoomOut=function(a){0!=a&&(null==a&&(a=.8),this.scaleX/=a,this.scaleY/=a)},this.zoomIn=function(a){0!=a&&(null==a&&(a=.8),this.scaleX*=a,this.scaleY*=a)},this.getBound=function(){return{left:0,top:0,right:this.stage.canvas.width,bottom:this.stage.canvas.height,width:this.stage.canvas.width,height:this.stage.canvas.height}},this.getElementsBound=function(){return a.util.getElementsBound(this.childs)},this.translateToCenter=function(a){var b=this.getElementsBound(),c=this.stage.canvas.width/2-(b.left+b.right)/2,d=this.stage.canvas.height/2-(b.top+b.bottom)/2;a&&(c=a.canvas.width/2-(b.left+b.right)/2,d=a.canvas.height/2-(b.top+b.bottom)/2),this.translateX=c,this.translateY=d},this.setCenter=function(a,b){var c=a-this.stage.canvas.width/2,d=b-this.stage.canvas.height/2;this.translateX=-c,this.translateY=-d},this.centerAndZoom=function(a,b,c){if(this.translateToCenter(c),null==a||null==b){var d=this.getElementsBound(),e=d.right-d.left,f=d.bottom-d.top,g=this.stage.canvas.width/e,h=this.stage.canvas.height/f;c&&(g=c.canvas.width/e,h=c.canvas.height/f);var i=Math.min(g,h);if(i>1)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&&a<this.x+this.width*Math.abs(this.scaleX)&&b>this.y&&b<this.y+this.height*Math.abs(this.scaleY)},this.selectedHandler=function(){this.selected=!0,this.selectedLocation={x:this.x,y:this.y}},this.unselectedHandler=function(){this.selected=!1,this.selectedLocation=null},this.dbclickHandler=function(a){this.dispatchEvent("dbclick",a)},this.clickHandler=function(a){this.dispatchEvent("click",a)},this.mousedownHander=function(a){this.dispatchEvent("mousedown",a)},this.mouseupHandler=function(a){this.dispatchEvent("mouseup",a)},this.mouseoverHandler=function(a){this.isMouseOver=!0,this.dispatchEvent("mouseover",a)},this.mousemoveHandler=function(a){this.dispatchEvent("mousemove",a)},this.mouseoutHandler=function(a){this.isMouseOver=!1,this.dispatchEvent("mouseout",a)},this.mousedragHandler=function(a){var b=this.selectedLocation.x+a.dx,c=this.selectedLocation.y+a.dy;this.setLocation(b,c),this.dispatchEvent("mousedrag",a)},this.addEventListener=function(b,c){var d=this,e=function(a){c.call(d,a)};return this.messageBus||(this.messageBus=new a.util.MessageBus),this.messageBus.subscribe(b,e),this},this.dispatchEvent=function(a,b){return this.messageBus?(this.messageBus.publish(a,b),this):null},this.removeEventListener=function(a){this.messageBus.unsubscribe(a)},this.removeAllEventListener=function(){this.messageBus=new a.util.MessageBus};var b="click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag,touchstart,touchmove,touchend".split(","),d=this;b.forEach(function(a){d[a]=function(b){null!=b?this.addEventListener(a,b):this.dispatchEvent(a)}})}function d(){this.initialize=function(){d.prototype.initialize.apply(this,arguments),this.editAble=!1,this.selectedPoint=null},this.getCtrlPosition=function(a){var b=5,c=5,d=this.getPosition(a);return{left:d.x-b,top:d.y-c,right:d.x+b,bottom:d.y+c}},this.selectedHandler=function(b){d.prototype.selectedHandler.apply(this,arguments),this.selectedSize={width:this.width,height:this.height},b.scene.mode==a.SceneMode.edit&&(this.editAble=!0)},this.unselectedHandler=function(){d.prototype.unselectedHandler.apply(this,arguments),this.selectedSize=null,this.editAble=!1};var b=["Top_Left","Top_Center","Top_Right","Middle_Left","Middle_Right","Bottom_Left","Bottom_Center","Bottom_Right"];this.paintCtrl=function(a){if(0!=this.editAble){a.save();for(var c=0;c<b.length;c++){var d=this.getCtrlPosition(b[c]);d.left-=this.cx,d.right-=this.cx,d.top-=this.cy,d.bottom-=this.cy;var e=d.right-d.left,f=d.bottom-d.top;a.beginPath(),a.strokeStyle="rgba(0,0,0,0.8)",a.rect(d.left,d.top,e,f),a.stroke(),a.closePath(),a.beginPath(),a.strokeStyle="rgba(255,255,255,0.3)",a.rect(d.left+1,d.top+1,e-2,f-2),a.stroke(),a.closePath()}a.restore()}},this.isInBound=function(a,c){if(this.selectedPoint=null,1==this.editAble)for(var e=0;e<b.length;e++){var f=this.getCtrlPosition(b[e]);if(a>f.left&&a<f.right&&c>f.top&&c<f.bottom)return this.selectedPoint=b[e],!0}return d.prototype.isInBound.apply(this,arguments)},this.mousedragHandler=function(a){if(null==this.selectedPoint){var b=this.selectedLocation.x+a.dx,c=this.selectedLocation.y+a.dy;this.setLocation(b,c),this.dispatchEvent("mousedrag",a)}else{if("Top_Left"==this.selectedPoint){var d=this.selectedSize.width-a.dx,e=this.selectedSize.height-a.dy,b=this.selectedLocation.x+a.dx,c=this.selectedLocation.y+a.dy;b<this.x+this.width&&(this.x=b,this.width=d),c<this.y+this.height&&(this.y=c,this.height=e)}else if("Top_Center"==this.selectedPoint){var e=this.selectedSize.height-a.dy,c=this.selectedLocation.y+a.dy;c<this.y+this.height&&(this.y=c,this.height=e)}else if("Top_Right"==this.selectedPoint){var d=this.selectedSize.width+a.dx,c=this.selectedLocation.y+a.dy;c<this.y+this.height&&(this.y=c,this.height=this.selectedSize.height-a.dy),d>1&&(this.width=d)}else if("Middle_Left"==this.selectedPoint){var d=this.selectedSize.width-a.dx,b=this.selectedLocation.x+a.dx;b<this.x+this.width&&(this.x=b),d>1&&(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;b<a.length;b++)a[b].style.cursor="pointer"}),this.mouseout(function(){var a=document.getElementsByTagName("canvas");if(a&&a.length>0)for(var b=0;b<a.length;b++)a[b].style.cursor="default"}),this.click(function(){"_blank"==this.target?window.open(this.href):location=this.href,this.isVisited=!0})}function f(a){this.initialize(arguments),this._radius=20,this.beginDegree=0,this.endDegree=2*Math.PI,this.text=a,this.paint=function(a){a.save(),a.beginPath(),a.fillStyle="rgba("+this.fillColor+","+this.alpha+")",a.arc(0,0,this.radius,this.beginDegree,this.endDegree,!0),a.fill(),a.closePath(),a.restore(),this.paintText(a),this.paintBorder(a),this.paintCtrl(a),this.paintAlarmText(a)},this.paintSelected=function(a){a.save(),a.beginPath(),a.strokeStyle="rgba(168,202,255, 0.9)",a.fillStyle="rgba(168,202,236,0.7)",a.arc(0,0,this.radius+3,this.beginDegree,this.endDegree,!0),a.fill(),a.stroke(),a.closePath(),a.restore()}}function g(a,b,c){this.initialize(),this.frameImages=a||[],this.frameIndex=0,this.isStop=!0;var d=b||1e3;this.repeatPlay=!1;var e=this;this.nextFrame=function(){if(!this.isStop&&null!=this.frameImages.length){if(this.frameIndex++,this.frameIndex>=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;d<a.outLinks.length;d++)for(var e=a.outLinks[d],f=0;f<b.inLinks.length;f++){var g=b.inLinks[f];e===g&&c.push(g)}return c}function c(a,c){var d=b(a,c),e=b(c,a),f=d.concat(e);return f}function d(a){var b=c(a.nodeA,a.nodeZ);return b=b.filter(function(b){return a!==b})}function e(a,b){return c(a,b).length}function f(b,c,g){function h(b,c){var d=a.util.lineF(b.cx,b.cy,c.cx,c.cy),e=b.getBound(),f=a.util.intersectionLineBound(d,e);return f}this.initialize=function(b,c,d){if(f.prototype.initialize.apply(this,arguments),this.elementType="link",this.zIndex=a.zIndex_Link,0!=arguments.length){this.text=d,this.nodeA=b,this.nodeZ=c,this.nodeA&&null==this.nodeA.outLinks&&(this.nodeA.outLinks=[]),this.nodeA&&null==this.nodeA.inLinks&&(this.nodeA.inLinks=[]),this.nodeZ&&null==this.nodeZ.inLinks&&(this.nodeZ.inLinks=[]),this.nodeZ&&null==this.nodeZ.outLinks&&(this.nodeZ.outLinks=[]),null!=this.nodeA&&this.nodeA.outLinks.push(this),null!=this.nodeZ&&this.nodeZ.inLinks.push(this),this.caculateIndex(),this.font="12px Consolas",this.fontColor="255,255,255",this.lineWidth=2,this.lineJoin="miter",this.transformAble=!1,this.bundleOffset=20,this.bundleGap=12,this.textOffsetX=0,this.textOffsetY=0,this.arrowsRadius=null,this.arrowsOffset=0,this.dashedPattern=null,this.path=[];var e="text,font,fontColor,lineWidth,lineJoin".split(",");this.serializedProperties=this.serializedProperties.concat(e)}},this.caculateIndex=function(){var a=e(this.nodeA,this.nodeZ);a>0&&(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;c<b.length;c++)null==this.dashedPattern?a.lineTo(b[c].x,b[c].y):a.JTopoDashedLineTo(b[c-1].x,b[c-1].y,b[c].x,b[c].y,this.dashedPattern);if(a.stroke(),a.closePath(),null!=this.arrowsRadius){var d=b[b.length-2],e=b[b.length-1];this.paintArrow(a,d,e)}},this.paintLoop=function(a){a.beginPath();{var b=this.bundleGap*(this.nodeIndex+1)/2;Math.PI+Math.PI/2}a.arc(this.nodeA.x,this.nodeA.y,b,Math.PI/2,2*Math.PI),a.stroke(),a.closePath()},this.paintArrow=function(b,c,d){var e=this.arrowsOffset,f=this.arrowsRadius/2,g=c,h=d,i=Math.atan2(h.y-g.y,h.x-g.x),j=a.util.getDistance(g,h)-this.arrowsRadius,k=g.x+(j+e)*Math.cos(i),l=g.y+(j+e)*Math.sin(i),m=h.x+e*Math.cos(i),n=h.y+e*Math.sin(i);i-=Math.PI/2;var o={x:k+f*Math.cos(i),y:l+f*Math.sin(i)},p={x:k+f*Math.cos(i-Math.PI),y:l+f*Math.sin(i-Math.PI)};b.beginPath(),b.fillStyle="rgba("+this.strokeColor+","+this.alpha+")",b.moveTo(o.x,o.y),b.lineTo(m,n),b.lineTo(p.x,p.y),b.stroke(),b.closePath()},this.paint=function(a){if(null!=this.nodeA&&null!=!this.nodeZ){var b=this.getPath(this.nodeIndex);this.path=b,a.strokeStyle="rgba("+this.strokeColor+","+this.alpha+")",a.lineWidth=this.lineWidth,this.paintPath(a,b),b&&b.length>0&&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;g<this.path.length;g++){var h=this.path[g-1],i=this.path[g];if(1==a.util.isPointInLine({x:b,y:c},h,i)){f=!0;break}}return f}}function g(a,b,c){this.initialize=function(){g.prototype.initialize.apply(this,arguments),this.direction="horizontal"},this.initialize(a,b,c),this.getStartPosition=function(){var a={x:this.nodeA.cx,y:this.nodeA.cy};return"horizontal"==this.direction?this.nodeZ.cx>a.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.cy<a.y?a.y-=this.nodeZ.height/2:a.y+=this.nodeZ.height/2:a.x=this.nodeA.cx<a.x?this.nodeZ.x:this.nodeZ.x+this.nodeZ.width,a},this.getPath=function(a){var b=[],c=this.getStartPosition(),d=this.getEndPosition();if(this.nodeA===this.nodeZ)return[c,d];var f,g,h=e(this.nodeA,this.nodeZ),i=(h-1)*this.bundleGap,j=this.bundleGap*a-i/2;return"horizontal"==this.direction?(f=d.x+j,g=c.y-j,b.push({x:c.x,y:g}),b.push({x:f,y:g}),b.push({x:f,y:d.y})):(f=c.x+j,g=d.y-j,b.push({x:f,y:c.y}),b.push({x:f,y:g}),b.push({x:d.x,y:g})),b},this.paintText=function(a,b){if(this.text&&this.text.length>0){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.cx<a.x?this.nodeA.x:this.nodeA.x+this.nodeA.width:a.y=this.nodeZ.cy<a.y?this.nodeA.y:this.nodeA.y+this.nodeA.height,a},this.getEndPosition=function(){var a={x:this.nodeZ.cx,y:this.nodeZ.cy};return"horizontal"==this.direction?a.x=this.nodeA.cx<a.x?this.nodeZ.x:this.nodeZ.x+this.nodeZ.width:a.y=this.nodeA.cy<a.y?this.nodeZ.y:this.nodeZ.y+this.nodeZ.height,a},this.getPath=function(a){var b=this.getStartPosition(),c=this.getEndPosition();if(this.nodeA===this.nodeZ)return[b,c];var d=[],f=e(this.nodeA,this.nodeZ),g=(f-1)*this.bundleGap,h=this.bundleGap*a-g/2,i=this.offsetGap;return"horizontal"==this.direction?(this.nodeA.cx>this.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;c<b.length;c++){var d=b[c-1],e=b[c],f=(d.x+e.x)/2,g=(d.y+e.y)/2;g+=(e.y-d.y)/2,a.strokeStyle="rgba("+this.strokeColor+","+this.alpha+")",a.lineWidth=this.lineWidth,a.moveTo(d.x,d.cy),a.quadraticCurveTo(f,g,e.x,e.y),a.stroke()}if(a.stroke(),a.closePath(),null!=this.arrowsRadius){var h=b[b.length-2],i=b[b.length-1];this.paintArrow(a,h,i)}}}f.prototype=new a.InteractiveElement,g.prototype=new f,h.prototype=new f,i.prototype=new f,a.Link=f,a.FoldLink=g,a.FlexionalLink=h,a.CurveLink=i}(JTopo),function(a){function b(c){this.initialize=function(c){b.prototype.initialize.apply(this,null),this.elementType="container",this.zIndex=a.zIndex_Container,this.width=100,this.height=100,this.childs=[],this.alpha=.5,this.dragable=!0,this.childDragble=!0,this.visible=!0,this.fillColor="10,100,80",this.borderWidth=0,this.borderColor="255,255,255",this.borderRadius=null,this.font="12px Consolas",this.fontColor="255,255,255",this.text=c,this.textPosition="Bottom_Center",this.textOffsetX=0,this.textOffsetY=0,this.layout=new a.layout.AutoBoundLayout},this.initialize(c),this.add=function(a){this.childs.push(a),a.dragable=this.childDragble},this.remove=function(a){for(var b=0;b<this.childs.length;b++)if(this.childs[b]===a){a.parentContainer=null,this.childs=this.childs.del(b),a.lastParentContainer=this;break}},this.removeAll=function(){this.childs=[]},this.setLocation=function(a,b){var c=a-this.x,d=b-this.y;this.x=a,this.y=b;for(var e=0;e<this.childs.length;e++){var f=this.childs[e];f.setLocation(f.x+c,f.y+d)}},this.doLayout=function(a){a&&a(this,this.childs)},this.paint=function(a){this.visible&&(this.layout&&this.layout(this,this.childs),a.beginPath(),a.fillStyle="rgba("+this.fillColor+","+this.alpha+")",null==this.borderRadius||0==this.borderRadius?a.rect(this.x,this.y,this.width,this.height):a.JTopoRoundRect(this.x,this.y,this.width,this.height,this.borderRadius),a.fill(),a.closePath(),this.paintText(a),this.paintBorder(a))},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.x-b,this.y-b,this.width+this.borderWidth,this.height+this.borderWidth):a.JTopoRoundRect(this.x-b,this.y-b,this.width+this.borderWidth,this.height+this.borderWidth,this.borderRadius),a.stroke(),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.getTextPostion=function(a,b,c){var d=null;return null==a||"Bottom_Center"==a?d={x:this.x+this.width/2-b/2,y:this.y+this.height+c}:"Top_Center"==a?d={x:this.x+this.width/2-b/2,y:this.y-c/2}:"Top_Right"==a?d={x:this.x+this.width-b,y:this.y-c/2}:"Top_Left"==a?d={x:this.x,y:this.y-c/2}:"Bottom_Right"==a?d={x:this.x+this.width-b,y:this.y+this.height+c}:"Bottom_Left"==a?d={x:this.x,y:this.y+this.height+c}:"Middle_Center"==a?d={x:this.x+this.width/2-b/2,y:this.y+this.height/2+c/2}:"Middle_Right"==a?d={x:this.x+this.width-b,y:this.y+this.height/2+c/2}:"Middle_Left"==a&&(d={x:this.x,y:this.y+this.height/2+c/2}),null!=this.textOffsetX&&(d.x+=this.textOffsetX),null!=this.textOffsetY&&(d.y+=this.textOffsetY),d},this.paintMouseover=function(){},this.paintSelected=function(a){a.shadowBlur=10,a.shadowColor="rgba(0,0,0,1)",a.shadowOffsetX=0,a.shadowOffsetY=0}}b.prototype=new a.InteractiveElement,a.Container=b}(JTopo),function(a){function b(a){var b=0,c=0;a.forEach(function(a){b+=a.cx,c+=a.cy});var d={x:b/a.length,y:c/a.length};return d}function c(c,d){null==d&&(d={});{var e=d.cx,f=d.cy,g=d.minRadius,h=d.nodeDiameter,i=d.hScale||1,j=d.vScale||1;d.beginAngle||0,d.endAngle||2*Math.PI}if(null==e||null==f){var k=b(c);e=k.x,f=k.y}var l=0,m=[],n=[];c.forEach(function(a){null==d.nodeDiameter?(a.diameter&&(h=a.diameter),h=a.radius?2*a.radius:Math.sqrt(2*a.width*a.height),n.push(h)):n.push(h),l+=h}),c.forEach(function(a,b){var c=n[b]/l;m.push(Math.PI*c)});var o=(c.length,m[0]+m[1]),p=n[0]/2+n[1]/2,q=p/2/Math.sin(o/2);null!=g&&g>q&&(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<d.length;h++){var i=d[h];f+i.width>=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<b.length;i++){var j=b[i];j.x<=c&&(c=j.x),j.x>=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<d.length;b++)if(d[b].nodeZ===a)return!1;return!0}),b=b.filter(function(a){for(var b=0;b<d.length;b++)if(d[b].nodeA===a)return!0;return!1})}function h(a){var b=0,c=0;return a.forEach(function(a){b+=a.width,c+=a.height}),{width:b/a.length,height:c/a.length}
3 | }function i(a,b,c,d){b.x+=c,b.y+=d;for(var e=q(a,b),f=0;f<e.length;f++)i(a,e[f],c,d)}function j(a,b){function c(b,e){var f=q(a,b);null==d[e]&&(d[e]={},d[e].nodes=[],d[e].childs=[]),d[e].nodes.push(b),d[e].childs.push(f);for(var g=0;g<f.length;g++)c(f[g],e+1),f[g].parent=b}var d=[];return c(b,0),d}function k(b,c,d){return function(e){function f(f,g){for(var h=a.layout.getTreeDeep(f,g),k=j(f,g),l=k[""+h].nodes,m=0;m<l.length;m++){var n=l[m],o=(m+1)*(c+10),p=h*d;"down"==b||("up"==b?p=-p:"left"==b?(o=-h*d,p=(m+1)*(c+10)):"right"==b&&(o=h*d,p=(m+1)*(c+10))),n.setLocation(o,p)}for(var q=h-1;q>=0;q--)for(var r=k[""+q].nodes,s=k[""+q].childs,m=0;m<r.length;m++){var t=r[m],u=s[m];if("down"==b?t.y=q*d:"up"==b?t.y=-q*d:"left"==b?t.x=-q*d:"right"==b&&(t.x=q*d),u.length>0?"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.x<r[m-1].x+r[m-1].width)for(var v=r[m-1].x+r[m-1].width+c,w=Math.abs(v-t.x),x=m;x<r.length;x++)i(e.childs,r[x],w,0)}else if(("left"==b||"right"==b)&&t.y<r[m-1].y+r[m-1].height)for(var y=r[m-1].y+r[m-1].height+c,z=Math.abs(y-t.y),x=m;x<r.length;x++)i(e.childs,r[x],0,z)}}var g=null;null==c&&(g=h(e.childs),c=g.width,("left"==b||"right"==b)&&(c=g.width+10)),null==d&&(null==g&&(g=h(e.childs)),d=2*g.height),null==b&&(b="down");var k=a.layout.getRootNodes(e.childs);if(k.length>0){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;j<b.length;j++)b[j].setCenterLocation(e[j].x,e[j].y)}}function q(b,c){for(var d=[],e=0;e<b.length;e++)b[e]instanceof a.Link&&b[e].nodeA===c&&d.push(b[e].nodeZ);return d}function r(a,b,c){var d=q(a.childs,b);if(0==d.length)return null;if(p(b,d),1==c)for(var e=0;e<d.length;e++)r(a,d[e],c);return null}function s(b,c){function d(a,b){var c=a.x-b.x,d=a.y-b.y;i+=c*f,j+=d*f,i*=g,j*=g,j+=h,b.x+=i,b.y+=j}function e(){if(!(++k>150)){for(var a=0;a<l.length;a++)l[a]!=b&&d(b,l[a],l);setTimeout(e,1e3/24)}}var f=.01,g=.95,h=-5,i=0,j=0,k=0,l=c.getElementsByClass(a.Node);e()}function t(a,b){function c(a,b,e){var f=q(a,b);e>d&&(d=e);for(var g=0;g<f.length;g++)c(a,f[g],e+1)}var d=0;return c(a,b,0),d}a.layout=a.Layout={layoutNode:r,getNodeChilds:q,adjustPosition:p,springLayout:s,getTreeDeep:t,getRootNodes:g,GridLayout:d,FlowLayout:e,AutoBoundLayout:f,CircleLayout:l,TreeLayout:k,getNodesCenter:b,circleLayoutNodes:c}}(JTopo),function(a){function b(){var b=new a.CircleNode;return b.radius=150,b.colors=["#3666B0","#2CA8E0","#77D1F6"],b.datas=[.3,.3,.4],b.titles=["A","B","C"],b.paint=function(a){var c=2*b.radius,d=2*b.radius;b.width=c,b.height=d;for(var e=0,f=0;f<this.datas.length;f++){var g=this.datas[f]*Math.PI*2;a.save(),a.beginPath(),a.fillStyle=b.colors[f],a.moveTo(0,0),a.arc(0,0,this.radius,e,e+g,!1),a.fill(),a.closePath(),a.restore(),a.beginPath(),a.font=this.font;var h=this.titles[f]+": "+(100*this.datas[f]).toFixed(2)+"%",i=a.measureText(h).width,j=(a.measureText("鐢�").width,(e+e+g)/2),k=this.radius*Math.cos(j),l=this.radius*Math.sin(j);j>Math.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;e<this.datas.length;e++){a.save(),a.beginPath(),a.fillStyle=b.colors[e];var f=this.datas[e],g=e*(d+c)-this.width/2,h=this.height-f-this.height/2;a.fillRect(g,h,d,f);var i=""+parseInt(this.datas[e]),j=a.measureText(i).width,k=a.measureText("鐢�").width;a.fillStyle="#FFFFFF",a.fillText(i,g+(d-j)/2,h-k),a.fillText(this.titles[e],g+(d-j)/2,this.height/2+k),a.fill(),a.closePath(),a.restore()}},b}a.BarChartNode=c,a.PieChartNode=b}(JTopo),function(a){function b(b,c){var d,e=null;return{stop:function(){return d?(window.clearInterval(d),e&&e.publish("stop"),this):this},start:function(){var a=this;return d=setInterval(function(){b.call(a)},c),this},onStop:function(b){return null==e&&(e=new a.util.MessageBus),e.subscribe("stop",b),this}}}function c(a,c){c=c||{};var d=c.gravity||.1,e=c.dx||0,f=c.dy||5,g=c.stop,h=c.interval||30,i=new b(function(){g&&g()?(f=.5,this.stop()):(f+=d,a.setLocation(a.x+e,a.y+f))},h);return i}function d(a,c,d,e,f){var g=1e3/24,h={};for(var i in c){var j=c[i],k=j-a[i];h[i]={oldValue:a[i],targetValue:j,step:k/d*g,isDone:function(b){var c=this.step>0&&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;a<this.items.length;a++){var f=this.items[a],g=f.node,h=f.target,i=f.vx,j=f.vy,k=h.x-g.x,l=h.y-g.y,m=Math.atan2(l,k);if(0!=e){var n=h.x-Math.cos(m)*e,o=h.y-Math.sin(m)*e;i+=(n-g.x)*b,j+=(o-g.y)*b}else i+=k*b,j+=l*b;i*=c,j*=c,j+=d,g.x+=i,g.y+=j,f.vx=i,f.vy=j}}}}function f(a,b){function c(){return e=setInterval(function(){return o?void f.stop():(a.rotate+=g||.2,void(a.rotate>2*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.height<e.stage.canvas.height?a.setLocation(a.x+d,a.y+i):(i=0,c())))},20),h}var e=b.context,f=b.gravity||.1,g=null,h={};return h.run=d,h.stop=c,h.onStop=function(a){return h.onStop=a,h},h}function h(b,c){function d(c,d,e,f,g){var h=new a.Node;return h.setImage(b.image),h.setSize(b.width,b.height),h.setLocation(c,d),h.showSelected=!1,h.dragable=!1,h.paint=function(a){a.save(),a.arc(0,0,e,f,g),a.clip(),a.beginPath(),null!=this.image?a.drawImage(this.image,-this.width/2,-this.height/2):(a.fillStyle="rgba("+this.style.fillStyle+","+this.alpha+")",a.rect(-this.width/2,-this.height/2,this.width/2,this.height/2),a.fill()),a.closePath(),a.restore()},h}function e(c,e){var f=c,g=c+Math.PI,h=d(b.x,b.y,b.width,f,g),j=d(b.x-2+4*Math.random(),b.y,b.width,f+Math.PI,f);b.visible=!1,e.add(h),e.add(j),a.Animate.gravity(h,{context:e,dx:.3}).run().onStop(function(){e.remove(h),e.remove(j),i.stop()}),a.Animate.gravity(j,{context:e,dx:-.2}).run()}function f(){return e(c.angle,h),i}function g(){return i.onStop&&i.onStop(b),i}var h=c.context,i=(b.style,{});return i.onStop=function(a){return i.onStop=a,i},i.run=f,i.stop=g,i}function i(a,b){function c(a){a.visible=!0,a.rotate=Math.random();var b=g.stage.canvas.width/2;a.x=b+Math.random()*(b-100)-Math.random()*(b-100),a.y=g.stage.canvas.height,a.vx=5*Math.random()-5*Math.random(),a.vy=-25}function d(){return c(a),h=setInterval(function(){return o?void i.stop():(a.vy+=f,a.x+=a.vx,a.y+=a.vy,void((a.x<0||a.x>g.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;c<this.length;c++)this[c][b](a);return this}}),a.length>0){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;d<a.length;d++)c.push(b.apply(a[d],arguments));return c}}(f)}}return a.attr=function(a,b){if(null!=a&&null!=b)for(var c=0;c<this.length;c++)this[c][a]=b;else{if(null!=a&&"string"==typeof a){for(var d=[],c=0;c<this.length;c++)d.push(this[c][a]);return d}if(null!=a)for(var c=0;c<this.length;c++)for(var e in a)this[c][e]=a[e]}return this},a}function d(d){var e=[],f=[];this instanceof a.Stage?(e=this.childs,f=f.concat(e)):this instanceof a.Scene?e=[this]:f=this,e.forEach(function(a){f=f.concat(a.childs)});var g=null;return g="function"==typeof d?f.filter(d):b(f,d),g=c(g)}var e="click,mousedown,mouseup,mouseover,mouseout,mousedrag,keydown,keyup".split(",");a.Stage.prototype.find=d,a.Scene.prototype.find=d}(JTopo),function(a){function b(a,b){this.x=a,this.y=b}function c(a){this.p=new b(0,0),this.w=new b(1,0),this.paint=a}function d(a,b,c){return function(d){for(var e=0;b>e;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);


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/JTopoInVue/static/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/JTopoInVue/static/bg.jpg


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/MergeTableCell/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <el-table
 4 |       :data="data"
 5 |       border 
 6 |       fit 
 7 |       stripe
 8 |       :span-method="cellMerge"
 9 |       highlight-current-row 
10 |       size="small"
11 |       style="width: 100%;">
12 |       <el-table-column prop="ruleId_1" label="指标编码" align="center" width="100"></el-table-column>
13 |       <el-table-column prop="checkRange" label="检查范围" align="center" width="100"></el-table-column>
14 |       <el-table-column prop="ruleId_2" label="指标编码" align="center" width="100"></el-table-column>
15 |       <el-table-column prop="checkContent" label="检查内容" align="center" width="100"></el-table-column>
16 |       <el-table-column prop="ruleId_3" label="指标编码" align="center" width="120"></el-table-column>
17 |       <el-table-column prop="checkItem" label="检查项" align="center" width="300"></el-table-column>
18 |       <el-table-column prop="ruleId_4" label="指标编码" align="center" width="200"></el-table-column>
19 |       <el-table-column prop="checkPoint" label="检查要点" align="left"  header-align="center"></el-table-column>
20 |     </el-table>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import Vue from 'vue'
26 | import Element from 'element-ui'
27 | import 'element-ui/lib/theme-chalk/index.css'
28 | 
29 | import data from './data'
30 | 
31 | Vue.use(Element)
32 | export default {
33 |   name: 'app',
34 |   data () {
35 |     return {
36 |       data:data,
37 |       spanArr: [],//二维数组，用于存放单元格合并规则
38 |       position: 0,//用于存储相同项的开始index
39 |     }
40 |   },
41 |   created() {
42 |     this.rowspan(0,'ruleId_1');
43 |     this.rowspan(1,'checkRange');
44 |     this.rowspan(2,'ruleId_2');
45 |     this.rowspan(3,'checkContent');
46 |     this.rowspan(4,'ruleId_3');
47 |     this.rowspan(5,'checkItem');
48 |     this.rowspan(6,'ruleId_4');
49 |     this.rowspan(7,'checkPoint');
50 |   },
51 |   methods:{
52 |     rowspan(idx, prop) {
53 |       this.spanArr[idx] = [];
54 |       this.position = 0; 
55 |       this.data.forEach((item,index) => {
56 |         if( index === 0){
57 |           this.spanArr[idx].push(1);
58 |           this.position = 0;
59 |         }else{
60 |           if(this.data[index][prop] === this.data[index-1][prop] ){
61 |             this.spanArr[idx][this.position] += 1;//有相同项
62 |             this.spanArr[idx].push(0); // 名称相同后往数组里面加一项0
63 |           }else{
64 |             this.spanArr[idx].push(1);//同列的前后两行单元格不相同
65 |             this.position = index;
66 |           }
67 |         }
68 |       })
69 |     },
70 |     //表格单元格合并
71 |     cellMerge({ row, column, rowIndex, columnIndex }) {
72 |       for(let i = 0; i<this.spanArr.length; i++) {
73 |         if(columnIndex === i){
74 |           const _row = this.spanArr[i][rowIndex];
75 |           const _col = _row>0 ? 1 : 0;
76 |           // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
77 |           return {
78 |             rowspan: _row,
79 |             colspan: _col
80 |           }
81 |         }
82 |       }
83 |     }
84 |   }
85 | }
86 | </script>
87 | 
88 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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


--------------------------------------------------------------------------------
/MergeTableCell/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>mergeTableCell</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <script src="/dist/build.js"></script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/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/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | <template>
13 |   <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />
14 | </template>
15 | <script>
16 |   import Pagination from '@/components/Pagination';
17 |   export default {
18 |     components: { Pagination },
19 |     data () {
20 |       return {
21 |         list:null,   //请求回来填充表格的数据   
22 |         total:0,     //数据总条数 
23 |         page: 1,    //默认显示第1页
24 |         limit: 10   //默认一次显示10条数据
25 |       }
26 |     }，
27 |     methods:{
28 |       getlist(){
29 |       var start = (this.page - 1) * this.limit;
30 |       var end   = this.page * this.limit;
31 |       this.$axios.get(url + '?start=' + start + '&end=' + end)
32 |         .then(response => {
33 |               this.list = response.data.items;
34 |               this.total = response.data.total;
35 |               resolve();
36 |         }).catch(err => {
37 |           reject(err);
38 |         })
39 |     }
40 |   	}
41 |   }
42 | </script>
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 | 


--------------------------------------------------------------------------------
/Pagination/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pagination-container">
 3 |     <el-pagination
 4 |       :background="background"
 5 |       :current-page.sync="currentPage"
 6 |       :page-size.sync="pageSize"
 7 |       :page-sizes.sync="pageSizes"
 8 |       :layout="layout"
 9 |       :total="total"
10 |       @size-change="handleSizeChange"
11 |       @current-change="handleCurrentChange"/>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | 
17 | export default {
18 |   name: 'Pagination',
19 |   props: {
20 |     total: {
21 |       required: true,
22 |       type: Number
23 |     },
24 |     page: {
25 |       type: Number,
26 |       default: 1
27 |     },
28 |     limit: {
29 |       type: Number,
30 |       default: 10
31 |     },
32 |     pageSizes: {
33 |       type: Array,
34 |       default() {
35 |         return [10,20,30]
36 |       }
37 |     },
38 |     layout: {
39 |       type: String,
40 |       default: 'total, sizes, prev, pager, next, jumper'
41 |     },
42 |     background: {
43 |       type: Boolean,
44 |       default: true
45 |     }
46 |   },
47 |   computed: {
48 |     currentPage: {
49 |       get() {
50 |         return this.page;
51 |       },
52 |       set(val) {
53 |         this.$emit('update:page', val);
54 |       }
55 |     },
56 |     pageSize: {
57 |       get() {
58 |         return this.limit;
59 |       },
60 |       set(val) {
61 |         this.$emit('update:limit', val);
62 |       }
63 |     }
64 |   },
65 |   methods: {
66 |     handleSizeChange(val) {
67 |       this.$emit('pagination', { page: this.currentPage, limit: val });
68 |     },
69 |     handleCurrentChange(val) {
70 |       this.$emit('pagination', { page: val, limit: this.pageSize });
71 |     }
72 |   }
73 | }
74 | </script>
75 | 
76 | <style scoped>
77 | .pagination-container {
78 |   background: #fff;
79 |   padding: 32px 16px;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/Pagination/效果图.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/Pagination/效果图.gif


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | <template>
19 |   <div id="app">
20 |     <Sidebar :menuList="menuList"/>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import  Sidebar from './SideBar/SideBar.vue'
26 | export default {
27 |   name: 'app',
28 |   components: { Sidebar},
29 |   data() {
30 |     return {
31 |       menuList,
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style>
38 | 
39 | </style>
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 | 


--------------------------------------------------------------------------------
/SideBar/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sidebar-container">
 3 |     <el-scrollbar wrap-class="scrollbar-wrapper">
 4 |       <el-menu
 5 |         router
 6 |         mode="vertical"
 7 |         background-color="#304156"
 8 |         text-color="#bfcbd9"
 9 |         active-text-color="#409EFF">
10 |       <sidebar-item v-for="menu in menuList" :key="menu.path" :item="menu" />
11 |     </el-menu>
12 |   </el-scrollbar>
13 |   </div>
14 | </template>
15 | <script>
16 | 
17 | import SidebarItem from './SidebarItem'
18 | 
19 | export default {
20 |   name:'Sidebar',
21 |   components: { SidebarItem },
22 |   props:{
23 |     menuList: {
24 |       type: Array,
25 |       required: true
26 |     }
27 |   }
28 | }
29 | </script>
30 | <style lang="scss">
31 |   .sidebar-container {
32 |     transition: width 0.28s;
33 |     width: 180px !important;
34 |     height: 100%;
35 |     position: fixed;
36 |     font-size: 0px;
37 |     bottom: 0;
38 |     left: 0;
39 |     z-index: 1001;
40 |     overflow: hidden;
41 |  
42 |     .horizontal-collapse-transition {
43 |       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
44 |     }
45 |     .el-scrollbar {
46 |       height: 100%;
47 |     }
48 |     .scrollbar-wrapper {
49 |       overflow-x: hidden!important;
50 |       .el-scrollbar__view {
51 |         height: 100%;
52 |       }
53 |     }
54 |     .el-scrollbar__bar.is-vertical{
55 |       right: 0px;
56 |     }
57 |     .is-horizontal {
58 |       display: none;
59 |     }
60 |     a {
61 |       display: inline-block;
62 |       width: 100%;
63 |       overflow: hidden;
64 |     }
65 |     .el-menu {
66 |       border: none;
67 |       height: 100%;
68 |       width: 100% !important;
69 |     }
70 |     .is-active > .el-submenu__title{
71 |         color: #f4f4f5!important;
72 |     }
73 |   }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/SideBar/SidebarItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="item.children">
 3 |     <template v-if="item.children.length == 0">
 4 |         <el-menu-item :index="item.path">
 5 |           <i class="el-icon-menu"></i>
 6 |           {{item.title}}
 7 |         </el-menu-item>
 8 |     </template>
 9 | 
10 |     <el-submenu v-else :index="item.path">
11 |       <template slot="title" >
12 |         <i class="el-icon-menu"></i>
13 |         {{item.title}}
14 |       </template>
15 | 
16 |       <template v-for="child in item.children">
17 |         <sidebar-item
18 |           v-if="child.children&&child.children.length>0"
19 |           :item="child"
20 |           :key="child.path"/>
21 |         <el-menu-item v-else :key="child.path" :index="child.path">
22 |           <i class="el-icon-location"></i>
23 |           {{child.title}}
24 |         </el-menu-item>
25 |       </template>
26 |     </el-submenu>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | 
32 | export default {
33 |   name: 'SidebarItem',
34 |   props: {
35 |     item: {
36 |       type: Object,
37 |       required: true
38 |     }
39 |   }
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/SideBar/效果图.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/SideBar/效果图.gif


--------------------------------------------------------------------------------
/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 | <template>
13 |   <div id="app">
14 |     <upload-file :url="/test/"/>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import  UploadFile from './UploadFile'
20 | export default {
21 |   name: 'app',
22 |   components: { Sidebar},
23 |   data() {
24 |     return {
25 |       url,     //文件上传到的目的url
26 |     }
27 |   }
28 | }
29 | </script>
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 | 


--------------------------------------------------------------------------------
/UploadFile/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!--文件上传入口-->
  4 |     <div class="uploadfile">
  5 |       <el-upload
  6 |         ref="upload"
  7 |         class="upload-demo"
  8 |         :before-upload="beforeUpload"
  9 |         drag
 10 |         :auto-upload="false"
 11 |       >
 12 |         <i class="el-icon-upload"></i>
 13 |         <div class="el-upload__text">将文件拖到此处，或<em>点击选择文件</em></div>
 14 |       </el-upload>
 15 |       <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
 16 |     </div>
 17 |     <!--遮罩层-->
 18 |     <div class="loading" v-if="loading" >
 19 |       <h4 class="tips">{{tips}}</h4>
 20 |       <!--进度条-->
 21 |       <el-progress type="line" :percentage="percentage" class="progress" :show-text="true"></el-progress>
 22 |     </div>
 23 |     <!--上传完成提示对话框-->
 24 |     <el-dialog
 25 |       title="提示"
 26 |       :visible="dialogVisible"
 27 |       width="30%"
 28 |       :modal-append-to-body='false'
 29 |     >
 30 |       <span>文件上传成功</span>
 31 |       <span slot="footer" class="dialog-footer">
 32 |         <el-button type="primary" @click="ensure">确 定</el-button>
 33 |       </span>
 34 |     </el-dialog>
 35 | 
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 |     export default {
 41 |         name: "UploadFile",
 42 |         data(){
 43 |           return {
 44 |             loading:false,
 45 |             percentage:0,
 46 |             tips:'',
 47 |             dialogVisible:false
 48 |           }
 49 |         },
 50 |         props:['url'],
 51 |         methods:{
 52 |           beforeUpload(file){
 53 |             let fd = new FormData();
 54 |             fd.append('file', file);
 55 |             let config = {
 56 |               onUploadProgress: progressEvent => {
 57 |                 //progressEvent.loaded:已上传文件大小
 58 |                 //progressEvent.total:被上传文件的总大小
 59 |                 let complete = (progressEvent.loaded / progressEvent.total ).toFixed(2) * 100 ;
 60 |                 this.percentage = complete;
 61 |                 if (this.percentage >= 100){
 62 |                   this.dialogVisible = true
 63 |                 }
 64 |               },
 65 |               headers: {
 66 |                 'Content-Type': 'multipart/form-data'
 67 |               }
 68 |             };
 69 |             this.$axios.post(this.url,fd,config)
 70 |               .then((res)=>{
 71 |                 //文件上传成功的回调
 72 |               })
 73 |               .catch((err)=>{
 74 |                 //异常捕获
 75 |               })
 76 |           },
 77 |           submitUpload(){
 78 |             this.loading = true;
 79 |             this.tips = '正在上传中。。。';
 80 |             this.$refs.upload.submit();
 81 |           },
 82 |           ensure(){
 83 |             this.dialogVisible = false;
 84 |             this.loading = false;
 85 |           }
 86 |         }
 87 |     }
 88 | </script>
 89 | 
 90 | <style scoped>
 91 |   .uploadfile{
 92 |     width: 200px;
 93 |     height: 200px;
 94 |     position: absolute;
 95 |     top: 50%;
 96 |     left: 50%;
 97 |     margin-left: -100px;
 98 |     margin-top: -100px;
 99 |   }
100 |    .loading{
101 |     position: absolute;
102 |     left: 0;
103 |     top: 0;
104 |     right: 0;
105 |     bottom: 0;
106 |     background: black;
107 |     opacity: 0.8;
108 |   }
109 |   .progress{
110 |     width: 200px;
111 |     height: 200px;
112 |     position: absolute;
113 |     top: 50%;
114 |     left: 50%;
115 |     margin-left: -100px;
116 |     margin-top: -100px;
117 |   }
118 |   .tips{
119 |     color: #409eff;
120 |     position: absolute;
121 |     top: 50%;
122 |     left: 50%;
123 |     margin-left: -100px;
124 |     margin-top: -150px;
125 |   }
126 | 
127 | </style>


--------------------------------------------------------------------------------
/UploadFile/效果图.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/UploadFile/效果图.gif


--------------------------------------------------------------------------------
/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 | <template>
26 |   <div id="app">
27 |     <vue-hover-mask @click="handleClick">
28 |       <!-- 默认插槽 -->
29 |       <img src="https://cn.vuejs.org/images/logo.png" alt="" srcset="">
30 |       <!-- action插槽 -->
31 |       <template v-slot:action>
32 |         <i class="iconfont icon-bianji-copy">编辑</i>
33 |       </template>
34 |     </vue-hover-mask>
35 |   </div>
36 | </template>
37 | 
38 | <script>
39 | import VueHoverMask from './components/VueHoverMask'
40 | export default {
41 |   name: 'app',
42 |   components:{ VueHoverMask },
43 |   methods: {
44 |     handleClick() {
45 |       console.log('click')
46 |     }
47 |   }
48 | }
49 | </script>
50 | <style>
51 | @import url("//at.alicdn.com/t/font_1262845_52b6h42svd7.css");
52 | .iconfont {
53 |   font-size: 25px;
54 | }
55 | </style>
56 | ```
57 | 
58 | # 组件代码
59 | 
60 | 完整代码请戳☞[Vue-Components-Library/VueHoverMask](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/VueHoverMask)


--------------------------------------------------------------------------------
/VueHoverMask/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vue-hover-mask">
 3 |     <slot></slot>
 4 |     <span
 5 |       @click="handleClick"
 6 |       class="vue-hover-mask_action"
 7 |     >
 8 |       <slot name="action"></slot>
 9 |     </span>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'VueHoverMask',
16 |   methods: {
17 |     handleClick () {
18 |       this.$emit('click')
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style>
25 | .vue-hover-mask {
26 |   overflow: hidden;
27 |   position: relative;
28 |   line-height: 1;
29 |   background-color: #fff;
30 |   border-radius: 6px;
31 |   box-sizing: border-box;
32 |   display: inline-block;
33 |   font-size: 0;
34 |   vertical-align: middle;
35 | }
36 | 
37 | .vue-hover-mask_action {
38 |   position: absolute;
39 |   width: 100%;
40 |   height: 100%;
41 |   left: 0;
42 |   top: 0;
43 |   cursor: pointer;
44 |   text-align: center;
45 |   color: #fff;
46 |   opacity: 0;
47 |   font-size: 20px;
48 |   z-index: 1;
49 |   background-color: rgba(0, 0, 0, 0.4);
50 |   transition: opacity 0.3s;
51 | }
52 | .vue-hover-mask_action::after {
53 |   display: inline-block;
54 |   content: "";
55 |   height: 100%;
56 |   vertical-align: middle;
57 | }
58 | .vue-hover-mask_action:hover {
59 |   opacity: 1;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/VueHoverMask/效果图.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NLRX-WJC/Vue-Components-Library/919340f6d8c3ccd1783ddd41435a0b34e317f796/VueHoverMask/效果图.gif


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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;


--------------------------------------------------------------------------------