35 | * ```
36 | */
37 | export default {
38 | bind(el, binding, vnode) {
39 | nodeList.push(el)
40 | const id = seed++
41 | el[ctx] = {
42 | id,
43 | documentHandler: createDocumentHandler(el, binding, vnode),
44 | methodName: binding.expression,
45 | bindingFn: binding.value,
46 | }
47 | },
48 |
49 | update(el, binding, vnode) {
50 | el[ctx].documentHandler = createDocumentHandler(el, binding, vnode)
51 | el[ctx].methodName = binding.expression
52 | el[ctx].bindingFn = binding.value
53 | },
54 |
55 | unbind(el) {
56 | const len = nodeList.length
57 |
58 | for (let i = 0; i < len; i++) {
59 | if (nodeList[i][ctx].id === el[ctx].id) {
60 | nodeList.splice(i, 1)
61 | break
62 | }
63 | }
64 | delete el[ctx]
65 | },
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/PopperContainer/dropdown.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
62 |
63 |
79 |
--------------------------------------------------------------------------------
/src/components/PopperContainer/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
21 |
22 |
90 |
91 |
100 |
--------------------------------------------------------------------------------
/src/components/RightToolbar/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 确定
31 | 取消
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
45 |
46 |
151 |
152 |
157 |
--------------------------------------------------------------------------------
/src/components/SvgIcon/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
12 |
13 |
14 |
34 |
35 |
52 |
--------------------------------------------------------------------------------
/src/components/Timeline/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
31 |
32 |
42 |
43 |
201 |
--------------------------------------------------------------------------------
/src/components/Waterfall/WaterfallItem.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
81 |
82 |
90 |
--------------------------------------------------------------------------------
/src/components/Waterfall/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
74 |
75 |
80 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table-column/index.vue:
--------------------------------------------------------------------------------
1 |
303 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table/affix.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
14 |
15 |
16 |
274 |
275 |
281 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table/affix2.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
14 |
15 |
16 |
181 |
182 |
187 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table/config.jsx:
--------------------------------------------------------------------------------
1 | import { getPropByPath } from 'element-ui/src/utils/util'
2 |
3 | export const cellStarts = {
4 | default: {
5 | order: '',
6 | },
7 | selection: {
8 | width: 48,
9 | minWidth: 48,
10 | realWidth: 48,
11 | order: '',
12 | className: 'el-table-column--selection',
13 | },
14 | expand: {
15 | width: 48,
16 | minWidth: 48,
17 | realWidth: 48,
18 | order: '',
19 | },
20 | index: {
21 | width: 48,
22 | minWidth: 48,
23 | realWidth: 48,
24 | order: '',
25 | },
26 | }
27 |
28 | // 这些选项不应该被覆盖
29 | export const cellForced = {
30 | selection: {
31 | renderHeader: function (h, { store }) {
32 | return
0 && !this.isAllSelected} on-input={this.toggleAllSelection} value={this.isAllSelected} />
33 | },
34 | renderCell: function (h, { row, column, isSelected, store, $index }) {
35 | return (
36 | event.stopPropagation()}
38 | value={isSelected}
39 | disabled={column.selectable ? !column.selectable.call(null, row, $index) : false}
40 | on-input={() => {
41 | store.commit('rowSelectedChanged', row)
42 | }}
43 | />
44 | )
45 | },
46 | sortable: false,
47 | resizable: false,
48 | },
49 | index: {
50 | renderHeader: function (h, { column }) {
51 | return column.label || '#'
52 | },
53 | renderCell: function (h, { $index, column }) {
54 | let i = $index + 1
55 | const index = column.index
56 |
57 | if (typeof index === 'number') {
58 | i = $index + index
59 | } else if (typeof index === 'function') {
60 | i = index($index)
61 | }
62 |
63 | return {i}
64 | },
65 | sortable: false,
66 | },
67 | expand: {
68 | renderHeader: function (h, { column }) {
69 | return column.label || ''
70 | },
71 | renderCell: function (h, { row, store, isExpanded }) {
72 | const classes = ['el-table__expand-icon']
73 | if (isExpanded) {
74 | classes.push('el-table__expand-icon--expanded')
75 | }
76 | const callback = function (e) {
77 | e.stopPropagation()
78 | store.toggleRowExpansion(row)
79 | }
80 | return (
81 |
82 |
83 |
84 | )
85 | },
86 | sortable: false,
87 | resizable: false,
88 | className: 'el-table__expand-column',
89 | },
90 | }
91 |
92 | export function defaultRenderCell(h, { row, column, $index }) {
93 | const property = column.property
94 | const value = property && getPropByPath(row, property).v
95 | if (column && column.formatter) {
96 | return column.formatter(row, column, value, $index)
97 | }
98 | return value
99 | }
100 |
101 | export function treeCellPrefix(h, { row, treeNode, store }) {
102 | if (!treeNode) return null
103 | const ele = []
104 | const callback = function (e) {
105 | e.stopPropagation()
106 | store.loadOrToggle(row)
107 | }
108 | if (treeNode.indent) {
109 | ele.push()
110 | }
111 | if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
112 | const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : '']
113 | let iconClasses = ['el-icon-arrow-right']
114 | if (treeNode.loading) {
115 | iconClasses = ['el-icon-loading']
116 | }
117 | ele.push(
118 |
119 |
120 |
,
121 | )
122 | } else {
123 | ele.push()
124 | }
125 | return ele
126 | }
127 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table/directive/index.js:
--------------------------------------------------------------------------------
1 | export { default as Ripple } from './ripple'
2 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table/dropdown.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | var dropdowns = []
3 |
4 | !Vue.prototype.$isServer &&
5 | document.addEventListener('click', function (event) {
6 | dropdowns.forEach(function (dropdown) {
7 | var target = event.target
8 | if (!dropdown || !dropdown.$el) return
9 | if (target === dropdown.$el || dropdown.$el.contains(target)) {
10 | return
11 | }
12 | dropdown.handleOutsideClick && dropdown.handleOutsideClick(event)
13 | })
14 | })
15 |
16 | export default {
17 | open(instance) {
18 | if (instance) {
19 | dropdowns.push(instance)
20 | }
21 | },
22 |
23 | close(instance) {
24 | var index = dropdowns.indexOf(instance)
25 | if (index !== -1) {
26 | dropdowns.splice(instance, 1)
27 | }
28 | },
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table/filter-panel.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | {{ filter.text }}
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
19 |
20 | -
27 | {{ t('el.table.clearFilter') }}
28 |
29 | -
30 | {{ filter.text }}
31 |
32 |
33 |
14 | {columns.map((column, cellIndex) => {
15 | const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex)
16 | if (!rowspan || !colspan) {
17 | return null
18 | }
19 | const columnData = { ...column }
20 | columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex)
21 | const data = {
22 | store,
23 | isSelected,
24 | isExpanded,
25 | _self: context,
26 | column: columnData,
27 | row,
28 | $index,
29 | }
30 | if (cellIndex === firstDefaultColumnIndex && treeRowData) {
31 | data.treeNode = {
32 | indent: treeRowData.level * treeIndent,
33 | level: treeRowData.level,
34 | }
35 | if (typeof treeRowData.expanded === 'boolean') {
36 | data.treeNode.expanded = treeRowData.expanded
37 | // 表明是懒加载
38 | if ('loading' in treeRowData) {
39 | data.treeNode.loading = treeRowData.loading
40 | }
41 | if ('noLazyChildren' in treeRowData) {
42 | data.treeNode.noLazyChildren = treeRowData.noLazyChildren
43 | }
44 | }
45 | }
46 | return (
47 | | this.handleCellMouseEnter($event, row)} on-mouseleave={this.handleCellMouseLeave}>
48 | {column.renderCell.call(this._renderProxy, this.$createElement, data, columnsHidden[cellIndex])}
49 | |
50 | )
51 | })}
52 |
53 | )
54 | },
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-table/util.js:
--------------------------------------------------------------------------------
1 | import { getValueByPath } from 'element-ui/src/utils/util'
2 |
3 | export const getCell = function (event) {
4 | let cell = event.target
5 |
6 | while (cell && cell.tagName.toUpperCase() !== 'HTML') {
7 | if (cell.tagName.toUpperCase() === 'TD') {
8 | return cell
9 | }
10 | cell = cell.parentNode
11 | }
12 |
13 | return null
14 | }
15 |
16 | const isObject = function (obj) {
17 | return obj !== null && typeof obj === 'object'
18 | }
19 |
20 | export const orderBy = function (array, sortKey, reverse, sortMethod, sortBy) {
21 | if (!sortKey && !sortMethod && (!sortBy || (Array.isArray(sortBy) && !sortBy.length))) {
22 | return array
23 | }
24 | if (typeof reverse === 'string') {
25 | reverse = reverse === 'descending' ? -1 : 1
26 | } else {
27 | reverse = reverse && reverse < 0 ? -1 : 1
28 | }
29 | const getKey = sortMethod
30 | ? null
31 | : function (value, index) {
32 | if (sortBy) {
33 | if (!Array.isArray(sortBy)) {
34 | sortBy = [sortBy]
35 | }
36 | return sortBy.map(function (by) {
37 | if (typeof by === 'string') {
38 | return getValueByPath(value, by)
39 | } else {
40 | return by(value, index, array)
41 | }
42 | })
43 | }
44 | if (sortKey !== '$key') {
45 | if (isObject(value) && '$value' in value) value = value.$value
46 | }
47 | return [isObject(value) ? getValueByPath(value, sortKey) : value]
48 | }
49 | const compare = function (a, b) {
50 | if (sortMethod) {
51 | return sortMethod(a.value, b.value)
52 | }
53 | for (let i = 0, len = a.key.length; i < len; i++) {
54 | if (a.key[i] < b.key[i]) {
55 | return -1
56 | }
57 | if (a.key[i] > b.key[i]) {
58 | return 1
59 | }
60 | }
61 | return 0
62 | }
63 | return array
64 | .map(function (value, index) {
65 | return {
66 | value: value,
67 | index: index,
68 | key: getKey ? getKey(value, index) : null,
69 | }
70 | })
71 | .sort(function (a, b) {
72 | let order = compare(a, b)
73 | if (!order) {
74 | // make stable https://en.wikipedia.org/wiki/Sorting_algorithm#Stability
75 | order = a.index - b.index
76 | }
77 | return order * reverse
78 | })
79 | .map(item => item.value)
80 | }
81 |
82 | export const getColumnById = function (table, columnId) {
83 | let column = null
84 | table.columns.forEach(function (item) {
85 | if (item.id === columnId) {
86 | column = item
87 | }
88 | })
89 | return column
90 | }
91 |
92 | export const getColumnByKey = function (table, columnKey) {
93 | let column = null
94 | for (let i = 0; i < table.columns.length; i++) {
95 | const item = table.columns[i]
96 | if (item.columnKey === columnKey) {
97 | column = item
98 | break
99 | }
100 | }
101 | return column
102 | }
103 |
104 | export const getColumnByCell = function (table, cell) {
105 | const matches = (cell.className || '').match(/el-table_[^\s]+/gm)
106 | if (matches) {
107 | return getColumnById(table, matches[0])
108 | }
109 | return null
110 | }
111 |
112 | export const getRowIdentity = (row, rowKey) => {
113 | if (!row) throw new Error('row is required when get row identity')
114 | if (typeof rowKey === 'string') {
115 | if (rowKey.indexOf('.') < 0) {
116 | return row[rowKey]
117 | }
118 | const key = rowKey.split('.')
119 | let current = row
120 | for (let i = 0; i < key.length; i++) {
121 | current = current[key[i]]
122 | }
123 | return current
124 | } else if (typeof rowKey === 'function') {
125 | return rowKey.call(null, row)
126 | }
127 | }
128 |
129 | export const getKeysMap = function (array, rowKey) {
130 | const arrayMap = {}
131 | ;(array || []).forEach((row, index) => {
132 | arrayMap[getRowIdentity(row, rowKey)] = { row, index }
133 | })
134 | return arrayMap
135 | }
136 |
137 | function hasOwn(obj, key) {
138 | return Object.prototype.hasOwnProperty.call(obj, key)
139 | }
140 |
141 | export function mergeOptions(defaults, config) {
142 | const options = {}
143 | let key
144 | for (key in defaults) {
145 | options[key] = defaults[key]
146 | }
147 | for (key in config) {
148 | if (hasOwn(config, key)) {
149 | const value = config[key]
150 | if (typeof value !== 'undefined') {
151 | options[key] = value
152 | }
153 | }
154 | }
155 | return options
156 | }
157 |
158 | export function parseWidth(width) {
159 | if (width !== undefined) {
160 | width = parseInt(width, 10)
161 | if (isNaN(width)) {
162 | width = null
163 | }
164 | }
165 | return width
166 | }
167 |
168 | export function parseMinWidth(minWidth) {
169 | if (typeof minWidth !== 'undefined') {
170 | minWidth = parseWidth(minWidth)
171 | if (isNaN(minWidth)) {
172 | minWidth = 80
173 | }
174 | }
175 | return minWidth
176 | }
177 |
178 | export function parseHeight(height) {
179 | if (typeof height === 'number') {
180 | return height
181 | }
182 | if (typeof height === 'string') {
183 | if (/^\d+(?:px)?$/.test(height)) {
184 | return parseInt(height, 10)
185 | } else {
186 | return height
187 | }
188 | }
189 | return null
190 | }
191 |
192 | // https://github.com/reduxjs/redux/blob/master/src/compose.js
193 | export function compose(...funcs) {
194 | if (funcs.length === 0) {
195 | return arg => arg
196 | }
197 | if (funcs.length === 1) {
198 | return funcs[0]
199 | }
200 | return funcs.reduce(
201 | (a, b) =>
202 | (...args) =>
203 | a(b(...args)),
204 | )
205 | }
206 |
207 | export function toggleRowStatus(statusArr, row, newVal) {
208 | let changed = false
209 | const index = statusArr.indexOf(row)
210 | const included = index !== -1
211 |
212 | const addRow = () => {
213 | statusArr.push(row)
214 | changed = true
215 | }
216 | const removeRow = () => {
217 | statusArr.splice(index, 1)
218 | changed = true
219 | }
220 |
221 | if (typeof newVal === 'boolean') {
222 | if (newVal && !included) {
223 | addRow()
224 | } else if (!newVal && included) {
225 | removeRow()
226 | }
227 | } else {
228 | if (included) {
229 | removeRow()
230 | } else {
231 | addRow()
232 | }
233 | }
234 | return changed
235 | }
236 |
237 | export function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {
238 | const isNil = array => !(Array.isArray(array) && array.length)
239 |
240 | function _walker(parent, children, level) {
241 | cb(parent, children, level)
242 | children.forEach(item => {
243 | if (item[lazyKey]) {
244 | cb(item, null, level + 1)
245 | return
246 | }
247 | const children = item[childrenKey]
248 | if (!isNil(children)) {
249 | _walker(item, children, level + 1)
250 | }
251 | })
252 | }
253 |
254 | root.forEach(item => {
255 | if (item[lazyKey]) {
256 | cb(item, null, 0)
257 | return
258 | }
259 | const children = item[childrenKey]
260 | if (!isNil(children)) {
261 | _walker(item, children, 0)
262 | }
263 | })
264 | }
265 |
266 | export function deepClone(source) {
267 | if (!source && typeof source !== 'object') {
268 | throw new Error('error arguments', 'deepClone')
269 | }
270 | const targetObj = source.constructor === Array ? [] : {}
271 | Object.keys(source).forEach(keys => {
272 | if (source[keys] && typeof source[keys] === 'object') {
273 | targetObj[keys] = deepClone(source[keys])
274 | } else {
275 | targetObj[keys] = source[keys]
276 | }
277 | })
278 | return targetObj
279 | }
280 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-volume/el-volume-item.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | {{ text }}
17 |
18 |
19 |
20 |
21 |
22 |
37 |
38 |
53 |
--------------------------------------------------------------------------------
/src/components/element-ui/el-volume/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
20 |
50 |
--------------------------------------------------------------------------------
/src/components/element-ui/index.js:
--------------------------------------------------------------------------------
1 | import ElTable from './el-table/index.vue'
2 | import ElTableColumn from './el-table-column'
3 | import ElVolume from './el-volume'
4 | import ElVolumeItem from './el-volume/el-volume-item'
5 |
6 | export default Vue => {
7 | Vue.component(ElTable.name, ElTable)
8 | Vue.component(ElTableColumn.name, ElTableColumn)
9 | Vue.component(ElVolume.name, ElVolume)
10 | Vue.component(ElVolumeItem.name, ElVolumeItem)
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/element-ui/popper.js:
--------------------------------------------------------------------------------
1 | import { PopupManager } from 'element-ui/src/utils/popup'
2 | import PopperJS from './PopperJS'
3 | const stop = e => e.stopPropagation()
4 |
5 | /**
6 | * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
7 | * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
8 | * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
9 | * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
10 | * @param {Boolean} [visible=false] Visibility of the popup element.
11 | * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
12 | */
13 | export default {
14 | props: {
15 | transformOrigin: {
16 | type: [Boolean, String],
17 | default: true,
18 | },
19 | placement: {
20 | type: String,
21 | default: 'bottom',
22 | },
23 | boundariesPadding: {
24 | type: Number,
25 | default: 5,
26 | },
27 | reference: {},
28 | popper: {},
29 | offset: {
30 | default: 0,
31 | },
32 | value: Boolean,
33 | visibleArrow: Boolean,
34 | arrowOffset: {
35 | type: Number,
36 | default: 35,
37 | },
38 | appendToBody: {
39 | type: Boolean,
40 | default: true,
41 | },
42 | popperOptions: {
43 | type: Object,
44 | default() {
45 | return {
46 | gpuAcceleration: false,
47 | }
48 | },
49 | },
50 | },
51 |
52 | data() {
53 | return {
54 | showPopper: false,
55 | currentPlacement: '',
56 | }
57 | },
58 |
59 | watch: {
60 | value: {
61 | immediate: true,
62 | handler(val) {
63 | this.showPopper = val
64 | this.$emit('input', val)
65 | },
66 | },
67 |
68 | showPopper(val) {
69 | if (this.disabled) return
70 | val ? this.updatePopper() : this.destroyPopper()
71 | this.$emit('input', val)
72 | },
73 | },
74 |
75 | methods: {
76 | createPopper() {
77 | if (this.$isServer) return
78 | this.currentPlacement = this.currentPlacement || this.placement
79 | if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
80 | return
81 | }
82 |
83 | const options = this.popperOptions
84 |
85 | const popper = (this.popperElm = this.popperElm || this.popper || this.$refs.popper)
86 |
87 | let reference = (this.referenceElm = this.referenceElm || this.reference || this.$refs.reference)
88 | console.log(reference)
89 |
90 | if (!reference && this.$slots.reference && this.$slots.reference[0]) {
91 | reference = this.referenceElm = this.$slots.reference[0].elm
92 | }
93 |
94 | if (!popper || !reference) return
95 | if (this.visibleArrow) this.appendArrow(popper)
96 | if (this.appendToBody) document.body.appendChild(this.popperElm)
97 | if (this.popperJS && this.popperJS.destroy) {
98 | this.popperJS.destroy()
99 | }
100 |
101 | options.placement = this.currentPlacement
102 | options.offset = this.offset
103 | options.arrowOffset = this.arrowOffset
104 | this.popperJS = new PopperJS(reference, popper, options)
105 |
106 | this.popperJS.onCreate(_ => {
107 | this.$emit('created', this)
108 | this.resetTransformOrigin()
109 | this.$nextTick(this.updatePopper)
110 | })
111 | if (typeof options.onUpdate === 'function') {
112 | this.popperJS.onUpdate(options.onUpdate)
113 | }
114 | this.popperJS._popper.style.zIndex = PopupManager.nextZIndex()
115 | this.popperElm.addEventListener('click', stop)
116 | },
117 |
118 | updatePopper() {
119 | const popperJS = this.popperJS
120 | if (popperJS) {
121 | popperJS.update()
122 | if (popperJS._popper) {
123 | popperJS._popper.style.zIndex = PopupManager.nextZIndex()
124 | }
125 | } else {
126 | this.createPopper()
127 | }
128 | },
129 |
130 | doDestroy(forceDestroy) {
131 | /* istanbul ignore if */
132 | if (!this.popperJS || (this.showPopper && !forceDestroy)) return
133 | this.popperJS.destroy()
134 | this.popperJS = null
135 | },
136 |
137 | destroyPopper() {
138 | if (this.popperJS) {
139 | this.resetTransformOrigin()
140 | }
141 | },
142 |
143 | resetTransformOrigin() {
144 | if (!this.transformOrigin) return
145 | const placementMap = {
146 | top: 'bottom',
147 | bottom: 'top',
148 | left: 'right',
149 | right: 'left',
150 | }
151 | const placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0]
152 | const origin = placementMap[placement]
153 | this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? `center ${origin}` : `${origin} center`
154 | },
155 |
156 | appendArrow(element) {
157 | let hash
158 | if (this.appended) {
159 | return
160 | }
161 |
162 | this.appended = true
163 |
164 | for (const item in element.attributes) {
165 | if (/^_v-/.test(element.attributes[item].name)) {
166 | hash = element.attributes[item].name
167 | break
168 | }
169 | }
170 |
171 | const arrow = document.createElement('div')
172 |
173 | if (hash) {
174 | arrow.setAttribute(hash, '')
175 | }
176 | arrow.setAttribute('x-arrow', '')
177 | arrow.className = 'popper__arrow'
178 | element.appendChild(arrow)
179 | },
180 | },
181 |
182 | beforeDestroy() {
183 | this.doDestroy(true)
184 | if (this.popperElm && this.popperElm.parentNode === document.body) {
185 | this.popperElm.removeEventListener('click', stop)
186 | document.body.removeChild(this.popperElm)
187 | }
188 | },
189 |
190 | // call destroy in keep-alive mode
191 | deactivated() {
192 | this.$options.beforeDestroy[0].call(this)
193 | },
194 | }
195 |
--------------------------------------------------------------------------------
/src/directives/attr.js:
--------------------------------------------------------------------------------
1 | export default {
2 | bind(el) {
3 | for (const attr of 'width,height,background,font-size,color'.split(',')) {
4 | if (attr in el.attributes) {
5 | const property = el.getAttribute(attr)
6 | el.style[attr] = property
7 |
8 | el.removeAttribute(attr)
9 | }
10 | }
11 | },
12 | }
13 |
--------------------------------------------------------------------------------
/src/layout/components/asider.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
23 |
24 |
31 |
--------------------------------------------------------------------------------
/src/layout/components/header.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
20 |
26 |
--------------------------------------------------------------------------------
/src/layout/components/main.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
20 |
28 |
--------------------------------------------------------------------------------
/src/layout/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
29 |
30 |
39 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import router from '@/router'
3 | import store from '@/store'
4 | import App from './App.vue'
5 |
6 | import '@/assets/styles/tailwind.css'
7 |
8 | import ElementUI from 'element-ui'
9 | import 'element-ui/lib/theme-chalk/index.css'
10 | Vue.use(ElementUI)
11 |
12 | import customElementUi from '@/components/element-ui'
13 | Vue.use(customElementUi)
14 |
15 | import '@/assets/styles/index.scss'
16 | import 'virtual:svg-icons-register'
17 |
18 | import SvgIcon from '@/components/SvgIcon'
19 | import RightToolbar from '@/components/RightToolbar'
20 | import ScrollPanel from '@/components/scrollPanel'
21 | import CustomTitle from '@/components/CustomTitle'
22 | import Layout from '@/layout'
23 |
24 | Vue.component('SvgIcon', SvgIcon)
25 | Vue.component('RightToolbar', RightToolbar)
26 | Vue.component('ScrollPanel', ScrollPanel)
27 | Vue.component('CustomTitle', CustomTitle)
28 | Vue.component('Layout', Layout)
29 |
30 | Vue.config.productionTip = false
31 | new Vue({
32 | el: '#app',
33 | router,
34 | store,
35 | render: h => h(App),
36 | })
37 |
--------------------------------------------------------------------------------
/src/mixins/table-header-drag.js:
--------------------------------------------------------------------------------
1 | import { localstorageGet, localstorageSet } from '@/utils'
2 | import { Key } from '@/components/RightToolbar'
3 |
4 | export default {
5 | activated() {
6 | this.$refs.table?.doLayout()
7 | },
8 | methods: {
9 | headerCellDragend(columns) {
10 | const optionName = this.$options.name
11 | const tableMap = localstorageGet(Key)
12 | if (!tableMap.dragger) tableMap.dragger = {}
13 | tableMap.dragger[optionName] = columns
14 | localstorageSet(Key, tableMap)
15 | },
16 | headerDragend(newWidth, _oldWidth, column, _event, columns) {
17 | const optionName = this.$options.name
18 | const tableMap = localstorageGet(Key)
19 | if (!tableMap.dragger) tableMap.dragger = {}
20 | tableMap.dragger[optionName] = columns
21 |
22 | tableMap.dragger[optionName].forEach(item => {
23 | if (item.label === column.label) item.width = newWidth
24 | })
25 | localstorageSet(Key, tableMap)
26 | },
27 | tableReady(table) {
28 | const optionName = this.$options.name
29 | const tableMap = localstorageGet(Key)
30 | if (!tableMap.dragger) tableMap.dragger = {}
31 | table && (this.__cacheTable__ = table)
32 | ;(table || this.__cacheTable__).changeExistingSort(tableMap.dragger[optionName])
33 | },
34 | },
35 | }
36 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 |
4 | Vue.use(Router)
5 |
6 | export const constantRoutes = [
7 | {
8 | path: '',
9 | component: () => import('@/views/dashboard'),
10 | },
11 | {
12 | path: '/user',
13 | component: () => import('@/views/user'),
14 | },
15 | {
16 | path: '/client',
17 | component: () => import('@/views/client'),
18 | },
19 | {
20 | path: '/camera',
21 | component: () => import('@/views/camera'),
22 | },
23 | {
24 | path: '/operate',
25 | component: () => import('@/views/operate'),
26 | },
27 |
28 | {
29 | path: '/test',
30 | component: () => import('@/views/test'),
31 | },
32 | {
33 | path: '/test2',
34 | component: () => import('@/views/test2'),
35 | },
36 | {
37 | path: '/other',
38 | component: () => import('@/views/other'),
39 | },
40 | {
41 | path: '/waterfall',
42 | component: () => import('@/views/waterfall'),
43 | },
44 | {
45 | path: '/color',
46 | component: () => import('@/views/color'),
47 | },
48 | {
49 | path: '/calendar',
50 | component: () => import('@/views/calendar'),
51 | },
52 | {
53 | path: '/chart',
54 | component: () => import('@/views/chart'),
55 | },
56 | ]
57 |
58 | const router = new Router({
59 | mode: 'history',
60 | scrollBehavior: () => ({ y: 0 }),
61 | routes: constantRoutes,
62 | })
63 |
64 | export default router
65 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import app from './modules/app'
4 |
5 | Vue.use(Vuex)
6 |
7 | const store = new Vuex.Store({
8 | modules: {
9 | app,
10 | },
11 | })
12 |
13 | export default store
14 |
--------------------------------------------------------------------------------
/src/store/modules/app.js:
--------------------------------------------------------------------------------
1 | // import Cookies from 'js-cookie'
2 |
3 | const state = {}
4 |
5 | const mutations = {}
6 |
7 | const actions = {}
8 |
9 | export default {
10 | namespaced: true,
11 | state,
12 | mutations,
13 | actions,
14 | }
15 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export function localstorageSet(key, obj = {}) {
2 | if (!key) return
3 | localStorage.setItem(key, JSON.stringify(obj))
4 | }
5 |
6 | export function localstorageGet(key) {
7 | if (!key) return {}
8 |
9 | try {
10 | return JSON.parse(localStorage.getItem(key) || '{}')
11 | } catch (error) {
12 | return {}
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/views/calendar/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/src/views/chart/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 查询
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
265 |
266 |
267 |
--------------------------------------------------------------------------------
/src/views/client/index.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | 新增终端环比上月{{ ratioPerMonth(currMonth.newUser, prevMonth.newUser) >= 0 ? '增长' : '减少' }} ：{{ Math.abs(ratioPerMonth(currMonth.newUser, prevMonth.newUser)) }}%
15 |
16 |
17 |
18 |
19 | 上月：{{ ratioPerUser(prevMonth.newUser, currMonth.newUser).toFixed(2) }}
20 |
21 |
22 |
23 | 当月：{{ ratioPerUser(currMonth.newUser, prevMonth.newUser).toFixed(2) }}
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 活跃终端环比上月{{ ratioPerMonth(currMonth.activeUser, prevMonth.activeUser) >= 0 ? '增长' : '减少' }} ： {{ Math.abs(ratioPerMonth(currMonth.activeUser, prevMonth.activeUser)) }}%
33 |
34 |
35 |
36 |
37 | 上月：{{ ratioPerUser(prevMonth.activeUser, currMonth.activeUser).toFixed(2) }}%
38 |
39 |
40 |
41 | 当月：{{ ratioPerUser(currMonth.activeUser, prevMonth.activeUser).toFixed(2) }}%
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 僵尸终端环比上月{{ ratioPerMonth(currMonth.zombieUser, prevMonth.zombieUser) >= 0 ? '增长' : '减少' }} ： {{ Math.abs(ratioPerMonth(currMonth.zombieUser, prevMonth.zombieUser)) }}%
51 |
52 |
53 |
54 |
55 | 上月：{{ ratioPerUser(prevMonth.zombieUser, currMonth.zombieUser).toFixed(2) }}
56 |
57 |
58 |
59 | 当月：{{ ratioPerUser(currMonth.zombieUser, prevMonth.zombieUser).toFixed(2) }}
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | 活跃终端多用户数据
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 所属单位操作终端数
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
169 |
170 |
171 |
--------------------------------------------------------------------------------
/src/views/color/ColorBlock.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
{{ hex }}
21 |
14 | #
15 |
16 |
17 |
18 | 生成
19 |
20 |
21 |
22 |
23 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/src/views/color/ColorPanel.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
{{ leval }}
21 |
{{ hex }}
22 |
23 |
26 |
27 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 查询
21 | 重置
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {{ tag }}
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 删除
46 |
47 |
48 |
49 |
50 |
51 |
52 |