ocpview-plus 0.0.1

package/src/static/iview/coustom.js

@@ -0,0 +1,463 @@
+import { scrollTop } from '../../utils/assist';
+import {deepCopy} from '../../utils/assist';
+let common = {};
+function Table_getSelection () {
+     // 分别拿根数据和子数据的已选项
+     let selectionIndexes = [];
+     let selectionRowKeys = [];
+     for (let i in this.objData) {
+         const objData = this.objData[i];
+         if (objData._isChecked) selectionIndexes.push(parseInt(i));
+         if (objData.children && objData.children.length) {
+             selectionRowKeys = selectionRowKeys.concat(this.getSelectionChildrenRowKeys(objData, selectionRowKeys));
+         }
+     }
+
+     // 去重的 RowKeys
+     selectionRowKeys = [...new Set(selectionRowKeys)];
+
+     let selection = [];
+
+     this.data.forEach((item, index) => {
+         if (selectionIndexes.indexOf(index) > -1) {
+             // 自定义:加行号索引 便于批量删除
+             item._customIndex = index;
+             
+             selection = selection.concat(item);
+         }
+         if (item.children && item.children.length && selectionRowKeys.length) {
+             selection = selection.concat(this.getSelectionChildren(item, selection, selectionRowKeys));
+         }
+     });
+
+     selection = [...new Set(selection)];
+     return JSON.parse(JSON.stringify(selection));
+}
+
+function Table_handleResize () {
+    //let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
+// 原代码当列宽不设置的时 会出现缩进的现象
+//let tableWidth = this.$el.offsetWidth - 1;
+//自定义
+let tableWidth = this.$el.parentNode.offsetWidth;
+let columnsWidth = {};
+let sumMinWidth = 0;
+let hasWidthColumns = [];
+let noWidthColumns = [];
+let maxWidthColumns = [];
+let noMaxWidthColumns = [];
+this.cloneColumns.forEach((col) => {
+    if (col.width) {
+        hasWidthColumns.push(col);
+    }
+    else{
+        noWidthColumns.push(col);
+        if (col.minWidth) {
+            sumMinWidth += col.minWidth;
+        }
+        if (col.maxWidth) {
+            maxWidthColumns.push(col);
+        }
+        else {
+            noMaxWidthColumns.push(col);
+        }
+    }
+    col._width = null;
+});
+
+let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
+let usableWidth = tableWidth - unUsableWidth - sumMinWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0) - 1;
+let usableLength = noWidthColumns.length;
+let columnWidth = 0;
+if(usableWidth > 0 && usableLength > 0){
+    columnWidth = parseInt(usableWidth / usableLength);
+}
+
+for (let i = 0; i < this.cloneColumns.length; i++) {
+    const column = this.cloneColumns[i];
+    let width = columnWidth + (column.minWidth?column.minWidth:0);
+    if(column.width){
+        width = column.width;
+    }
+    else{
+        if (column._width) {
+            width = column._width;
+        }
+        else {
+            if (column.minWidth > width){
+                width = column.minWidth;
+            }
+            else if (column.maxWidth < width){
+                width = column.maxWidth;
+            }
+
+            if (usableWidth>0) {
+                usableWidth -= width - (column.minWidth?column.minWidth:0);
+                usableLength--;
+                if (usableLength > 0) {
+                    columnWidth = parseInt(usableWidth / usableLength);
+                }
+                else {
+                    columnWidth = 0;
+                }
+            }
+            else{
+                columnWidth = 0;
+            }
+        }
+    }
+
+    column._width = width;
+
+    columnsWidth[column._index] = {
+        width: width
+    };
+
+}
+if(usableWidth>0) {
+    usableLength = noMaxWidthColumns.length;
+    columnWidth = parseInt(usableWidth / usableLength);
+    for (let i = 0; i < noMaxWidthColumns.length; i++) {
+        const column = noMaxWidthColumns[i];
+        let width = column._width + columnWidth;
+        if (usableLength > 1) {
+            usableLength--;
+            usableWidth -= columnWidth;
+            columnWidth = parseInt(usableWidth / usableLength);
+        }
+        else {
+            columnWidth = 0;
+        }
+
+        column._width = width;
+
+        columnsWidth[column._index] = {
+            width: width
+        };
+
+    }
+}
+
+this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0) + 1;
+this.columnsWidth = columnsWidth;
+this.fixedHeader();
+}
+
+function Table_highlightCurrentRow (_index, rowKey) {
+    const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
+    if (!objData) return;
+    if (!this.highlightRow || objData._isHighlight) return;
+    this.handleCurrentRow('highlight', _index, rowKey);
+}
+
+function getRandomStr (len = 32) {
+    const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+    const maxPos = $chars.length;
+    let str = '';
+    for (let i = 0; i < len; i++) {
+        str += $chars.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return str;
+};
+
+function Table_makeColumnsId (columns) {
+    const cloneColumns = deepCopy(columns);
+    return cloneColumns.map(item => {
+        if ('children' in item) item.children = this.makeColumnsId(item.children);
+        item.__id = getRandomStr(6);
+        return item;
+    });
+};
+
+function TableHead_scrollBarCellClass(){
+    let hasRightFixed = false;
+    for(let i in this.headRows){
+        for(let j in this.headRows[i]){
+            if(this.headRows[i][j].fixed === 'right') {
+                hasRightFixed=true;
+                break;
+            }
+            if(hasRightFixed) break;
+        }
+    }
+    return [
+        {
+            [`${this.prefixCls}-hidden`]: hasRightFixed,
+            'efuture-table-scroll-th':true
+        }
+    ];
+}
+
+function handleCheckClick (event, new_window = false) {
+    if (this.to) {
+        if (this.target === '_blank') {
+            return false;
+        } else {
+            event.preventDefault();
+            if (this.to === 'click') {
+                this.$emit('click', event);
+            } else {
+                this.handleClick(new_window);
+            }
+        }
+    }
+}
+function Upload_handleClick () {
+    if (this.itemDisabled) return;
+      // 自定义：弹框之前check
+      if (this.$parent && this.$parent.onClick) {
+        this.$parent.onClick()
+      } else {
+        if (this.$refs.input) {
+            this.$refs.input.click();
+        }
+      }
+}
+
+function DatePicker_reset() {
+    if (this.$refs.pickerPanel && this.$refs.pickerPanel.reset) {
+        this.$refs.pickerPanel.reset();
+    }
+}
+
+function DatePicker_handleKeydown (e) {
+    const pickerPrefixCls = 'ivu-picker';
+    const keyCode = e.keyCode;
+
+    // handle "tab" key
+    if (keyCode === 9) {
+        if (this.visible) {
+            e.stopPropagation();
+            e.preventDefault();
+
+            if (this.isConfirm) {
+                const selector = `.${pickerPrefixCls}-confirm > *`;
+                const tabbable = this.$refs.drop.$el.querySelectorAll(selector);
+                this.internalFocus = true;
+                const element = [...tabbable][e.shiftKey ? 'pop' : 'shift']();
+                element.focus();
+            } else {
+                this.handleClose();
+            }
+        } else {
+            this.focused = false;
+        }
+    }
+
+    // open the panel
+    const arrows = [37, 38, 39, 40];
+    if (!this.visible && arrows.includes(keyCode)) {
+        this.visible = true;
+        return;
+    }
+
+    // close on "esc" key
+    if (keyCode === 27) {
+        if (this.visible) {
+            e.stopPropagation();
+            this.handleClose();
+        }
+    }
+
+    // select date, "Enter" key
+    if (keyCode === 13) {
+        const timePickers = this.timeSpinnerList.map(item => item.timeSpinner);
+        if (timePickers.length > 0) {
+            const columnsPerPicker = timePickers[0].showSeconds ? 3 : 2;
+            const pickerIndex = Math.floor(this.focusedTime.column / columnsPerPicker);
+            const value = this.focusedTime.time[pickerIndex];
+
+            timePickers[pickerIndex].chooseValue(value);
+            return;
+        }
+
+        if (this.type.match(/range/)) {
+            this.$refs.pickerPanel.handleRangePick(this.focusedDate, 'date');
+        } else {
+            const panels = this.panelTableList.map(item => item.panelTable);
+            const compareDate = (d) => {
+                const sliceIndex = ['year', 'month', 'date'].indexOf((this.type)) + 1;
+                return [d.getFullYear(), d.getMonth(), d.getDate()].slice(0, sliceIndex).join('-');
+            };
+           
+            const dateIsValid = panels.find(({ cells }) => {
+                return cells.find(({ date, disabled }) => compareDate(date) === compareDate(this.focusedDate) && !disabled);
+            });
+            if (dateIsValid) {
+                if (this.modelValue === null) {
+                    this.onPick(null, false, 'date');
+                } else {
+                    this.onPick(this.focusedDate, false, 'date');
+                }
+            }
+        }
+    }
+
+    if (!arrows.includes(keyCode)) return; // ignore rest of keys
+
+    // navigate times and dates
+    if (this.focusedTime.active) e.preventDefault(); // to prevent cursor from moving
+    this.navigateDatePanel(keyValueMapper[keyCode], e.shiftKey);
+}
+
+function DatePicker_handleBlur(e) {
+    if (this.internalFocus) {
+        this.internalFocus = false;
+        return;
+    }
+    if (this.visible) {
+        e.preventDefault();
+        return;
+    }
+
+    this.isFocused = false;
+    this.onSelectionModeChange(this.type);
+    this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
+    this.reset();
+    if (this.$refs.pickerPanel) {
+        this.$refs.pickerPanel.onToggleVisibility(false);
+    }
+}
+export const isClient = typeof window !== 'undefined';
+
+function getScroll(target, top) {
+    const prop = top ? 'pageYOffset' : 'pageXOffset';
+    const method = top ? 'scrollTop' : 'scrollLeft';
+
+    let ret = target[prop];
+
+    if (isClient && typeof ret !== 'number') {
+        ret = window.document.documentElement[method];
+    }
+
+    return ret;
+}
+
+function getOffset(element) {
+    if (!isClient) return;
+    const rect = element.getBoundingClientRect();
+
+    const scrollTop = getScroll(window, true);
+    const scrollLeft = getScroll(window);
+
+    const docEl = window.document.body;
+    const clientTop = docEl.clientTop || 0;
+    const clientLeft = docEl.clientLeft || 0;
+
+    return {
+        top: rect.top + scrollTop - clientTop,
+        left: rect.left + scrollLeft - clientLeft
+    };
+}
+
+function Anchor_handleScroll (e) {
+    this.upperFirstTitle = !!this.titlesOffsetArr[0] && e.target.scrollTop < this.titlesOffsetArr[0].offset;
+    if (this.animating) return;
+    // this.updateTitleOffset();
+    const scrollTop = this.scrollContainer.scrollTop;
+    this.getCurrentScrollAtTitleId(scrollTop);
+}
+
+function Affix_handleScroll () {
+    if (!isClient) return;
+    const affix = this.affix;
+    const scrollTop = getScroll(window, true);
+    const elOffset = getOffset(this.$el);
+    const windowHeight = window.innerHeight;
+    const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;
+
+    // Fixed Top
+    if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
+        this.affix = true;
+        this.slotStyle = {
+            width: this.$refs.point.clientWidth + 'px',
+            height: this.$refs.point.clientHeight + 'px'
+        };
+        this.slot = true;
+        this.styles = {
+            top: `${this.offsetTop}px`,
+        };
+        if (elOffset.left) {
+            this.styles.left =  `${elOffset.left}px`;
+        }
+        if (this.$el.offsetWidth) {
+            this.styles.width =  `${this.$el.offsetWidth}px`;
+        }
+        this.$emit('on-change', true);
+    } else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
+        this.slot = false;
+        this.slotStyle = {};
+        this.affix = false;
+        this.styles = null;
+
+        this.$emit('on-change', false);
+    }
+
+    // Fixed Bottom
+    if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType == 'bottom' && !affix) {
+        this.affix = true;
+        this.styles = {
+            bottom: `${this.offsetBottom}px`,
+            left: `${elOffset.left}px`,
+            width: `${this.$el.offsetWidth}px`
+        };
+
+        this.$emit('on-change', true);
+    } else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType == 'bottom' && affix) {
+        this.affix = false;
+        this.styles = null;
+
+        this.$emit('on-change', false);
+    }
+}
+common.initTable = function (obj) {
+    obj.methods.getSelection  = Table_getSelection;
+    obj.methods.handleResize  = Table_handleResize;
+    obj.methods.highlightCurrentRow = Table_highlightCurrentRow;
+    obj.methods.makeColumnsId = Table_makeColumnsId;
+    obj.components.tableHead.methods.scrollBarCellClass = TableHead_scrollBarCellClass;
+}
+
+common.initBreadcrumbItem = function (obj) {
+    obj.mixins[0].methods.handleCheckClick  = handleCheckClick;
+}
+common.initButton = function (obj) {
+    obj.mixins[0].methods.handleCheckClick  = handleCheckClick;
+}
+common.initCard = function (obj) {
+    obj.mixins[0].methods.handleCheckClick  = handleCheckClick;
+}
+common.initCell = function (obj) {
+    obj.mixins[0].methods.handleCheckClick  = handleCheckClick;
+}
+common.initMenuItem = function (obj) {
+    obj.mixins[1].methods.handleCheckClick  = handleCheckClick;
+}
+common.initUpload = function (obj) {
+    obj.methods.handleClick  = Upload_handleClick;
+}
+common.initDatePicker = function (obj) {
+    obj.mixins[0].methods.reset  = DatePicker_reset;
+    obj.mixins[0].methods.handleBlur  = DatePicker_handleBlur;
+    obj.mixins[0].methods.handleKeydown  = DatePicker_handleKeydown;
+}
+
+common.initAffix = function (obj) {
+    obj.methods.handleScroll  = Affix_handleScroll;
+}
+common.initAnchor = function (obj) {
+    obj.methods.handleScroll  = Anchor_handleScroll;
+}
+common.initEview = function (ViewUI) {
+    common.initTable(ViewUI.Table);
+    common.initBreadcrumbItem(ViewUI.BreadcrumbItem);
+    common.initButton(ViewUI.Button);
+    common.initCard(ViewUI.Card);
+    common.initCell(ViewUI.Cell);
+    common.initMenuItem(ViewUI.MenuItem);
+    common.initUpload(ViewUI.Upload);
+    common.initDatePicker(ViewUI.DatePicker);
+    common.initAffix(ViewUI.Affix);
+    common.initAnchor(ViewUI.Anchor);
+}
+export default common;

package/src/store/index.js

@@ -0,0 +1,19 @@
+import { createStore } from 'vuex'
+// 类似 Redux 中的建立状态树
+import app from './modules/app';
+
+export default createStore({
+  
+    state: {
+        //
+    },
+    mutations: {
+        //
+    },
+    actions: {
+
+    },
+    modules: {
+        app
+    }
+});

package/src/store/modules/app.js

@@ -0,0 +1,53 @@
+const app = {
+    state: {
+        clientHeight: window.innerHeight? window.innerHeight: document.documentElement.clientHeight? document.documentElement.clientHeight: screen.height,
+        clientWidth: window.innerWidth? window.innerWidth: document.documentElement.clientWidth? document.documentElement.clientWidth: screen.width,
+        mychartColor:{
+            pie:['#FF8636','#028154','#FC635B','#FDBA4F','#436EFD','#7ACBBD','#6882FF','#819DE4'],
+            bar:['#627AE1','#8CBBFF','#8CE8BB'],
+            line:['#01332F','#627AE1','#ED6A4C']
+        },
+        floorMap:{}
+    },
+    mutations: {
+        /**
+         * 修改主窗体高度方法
+         *
+         * @param {any} obj
+         */
+        setClientHeight (state) {
+            //console.log('变更之前:'+ state.clientHeight);
+            state.clientHeight =window.innerHeight? window.innerHeight: document.documentElement.clientHeight? document.documentElement.clientHeight: screen.height;
+            //console.log('变更之后:'+ state.clientHeight);
+        },
+        /**
+         * 修改主窗体宽度方法
+         *
+         * @param {any} obj
+         */
+        setClientWidth (state) {
+            state.clientWidth = window.innerWidth? window.innerWidth: document.documentElement.clientWidth? document.documentElement.clientWidth: screen.width;
+        },
+        /**
+         * 颜色组
+         *
+         * @param {any} obj
+         */
+        setMychartColor(state,proName,color) {
+            let tempColor = [];
+            if (color) {
+                color.forEach(element => {
+                    if (element) {
+                        tempColor.push(element);
+                    }
+                });
+            } 
+            state.mychartColor[proName] = tempColor;
+        },
+        setFloorMap (state,obj) {
+            Object.assign(state.floorMap,obj);
+        }
+    }
+};
+
+export default app;

package/src/styles/README.md

@@ -0,0 +1,3 @@
+# 样式库说明
+
+## 目录

package/src/styles/common.less

@@ -0,0 +1,75 @@
+
+@primary-color          : #AF292E;
+@info-color             : #4D4E53;
+@warning-color          : #F3B352;
+@success-color          : #9DC56A;
+@text-color             : #303133;
+@asterisk-color         : #EE1616;
+@main-btn-disabled-color: #FFB5B8;
+@table-th-font-size:13px;
+@table-td-font-size:13px;
+
+@form-item-margin-bottom:7px;
+@form-item-margin-top:7px;
+@font-size-small:13px;
+@font-size-base:13px;
+@table-th-default-height:36px;
+@table-footer-default-height: 36px;
+@table-td-default-height:36px;
+@table-td-highlight-bg:#FFF3F3;
+@table-td-hover-bg:#FBF4F4;
+@input-disabled-bg: #F5F7FA;
+@modal-header-padding:16px 14px;
+@modal-body-padding:16px 14px;
+@table-td-stripe-bg:#FAFCFF;
+@border-color-base:#DCDFE6;
+@table-thead-bg:#F5F7FA;
+@text-grey:#636569;
+@boder-color:#DCDFE6;
+@btn-icon-size:12px;
+@btn-font-size:13px;
+@btn-padding-base:0px 12px;
+@btn-disable-color      : #A8ABB2 ;
+@btn-disable-bg         : #F5F7FA;
+@btn-default-color      : #606266;
+@btn-ghost-color        : #606266;
+@input-disabled-font-color:#A8ABB2;
+@efuture-checkbox-padding:8px;
+@efuture-radiogroupbox-padding:8px;
+@btn-border-radius:2px;
+@body-background: none;
+.gridcelrow:hover {
+    background-color:#FBF4F4;
+}
+.ivu-anchor-link {
+    border-left: 4px solid #fff
+ }
+.ivu-anchor-link.ivu-anchor-link-active {
+   border-left: 4px solid #AF292E
+}
+
+.ivu-badge-count.badgeclass {
+    background:#fff !important;
+    border:1px solid #ed4014 !important;
+    color:#ed4014 !important;
+}
+
+::-webkit-scrollbar{
+    height: 10px;
+    width: 10px;
+}
+ 
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    border-style: dashed;
+    border-color: transparent;
+    border-width: 2px;
+    background-color: #ccc;
+    background-clip: padding-box;
+}
+ 
+::-webkit-scrollbar-thumb:hover {
+    background:  #ccc;
+}
+
+

package/src/styles/components/anchor.less

@@ -0,0 +1,74 @@
+@anchor-prefix: ~"@{css-prefix}anchor";
+
+.@{anchor-prefix}{
+    &-wrapper{
+        overflow: auto;
+        padding-left: 4px;
+        margin-left: -4px;
+    }
+
+    &{
+        position: relative;
+        padding-left: @anchor-border-width;
+
+        &-ink {
+            position: absolute;
+            height: 100%;
+            left: 0;
+            top: 0;
+            &:before {
+                content: ' ';
+                position: relative;
+                width: @anchor-border-width;
+                height: 100%;
+                display: block;
+                background-color: @border-color-split;
+                margin: 0 auto;
+            }
+            &-ball {
+                display: inline-block;
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                border: 2px solid @primary-color;
+                background-color: @body-background;
+                left: 50%;
+                transition: top @transition-time @ease-in-out;
+                transform: translate(-50%, 2px);
+            }
+        }
+
+        &.fixed &-ink &-ink-ball {
+            display: none;
+        }
+    }
+
+    &-link {
+        padding: 8px 0 8px 16px;
+        line-height: 1.2;
+
+        &-title {  
+            display: block;
+            position: relative;
+            transition: all .3s;
+            color: @text-color;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 8px;
+            &:only-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &-active > &-title {
+            color: @primary-color;
+        }
+    }
+
+    &-link &-link {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+}