ocpview-plus 0.0.1

package/src/components/masterplate/simpleviewgrid.vue

@@ -0,0 +1,144 @@
+<template>
+<div>
+    <div ref="head">
+        <Row  v-if="showCondition">
+            <Col span='24'>
+                <ConditionBox  ref="condition" :config="myConfig"  @conditionAction="conditionAction"  :dictData="dictData" :isPop="isPop"></ConditionBox>
+            </Col>
+        </Row>
+    </div>
+    <template v-if="!myConfig.multiSelectGrid">
+        <Card :padding="0" :bordered="false"  dis-hover>
+        <Table ref="table"  :class="isFlag" :row-class-name="myConfig.rowClassName" :loading="loading"  :show-summary="myConfig.showSummary"  :summary-method="handleSummary"  :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns"  :data="tempData" @on-sort-change="sortChagne"  @on-current-change="onCurrentChange" :highlight-row="myConfig.highLightRow" @on-row-dblclick="dbclick"  @on-select="onSelect" @on-select-cancel="onSelectCancel" @on-selection-change="OnSelectionChange" @on-row-click="click"  @on-column-width-resize="onColumnWidthResize">
+         <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ row, index }" :key="'show_' + config.key">          
+               <ShowText :label="formatValue(index,config,row)" :contentAlign="config.contentAlign" :class="config.cellClassName" :config="config" :rowIndex="index"></ShowText>
+         </template>
+        </Table>
+        </Card>
+        <div ref="page" name="page">
+            <div  v-if="myConfig.showPage"  style="padding-top:10px;" >
+                <Card :bordered="false" :padding="0" :dis-hover="true" style="border-radius:0px">
+                    <Row  type="flex" justify="end" style="padding-right:10px">
+                        <PageCustom  v-model="culPage"  :total="myConfig.pageConfig.total_results"  :size="myConfig.pageSize"  :current="myConfig.pageConfig.page_no" :page-size="myConfig.pageConfig.page_size" :page-size-opts="myConfig.pageConfig.pageSizeList"  @on-page-size-change="changePageSize" @on-change="changePage"  :show-total="myConfig.pageShowTotal" :show-elevator="myConfig.pageShowElevator" :show-sizer="myConfig.pageShowSizer"></PageCustom>
+                    </Row>
+                </Card>
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <Row type="flex" justify="center" align="middle" >
+            <Col :span="gridCol">
+                <Card :padding="0"  bordered dis-hover>
+                    <template #title>
+                    <span v-text="myConfig.gridTitle"></span>
+                    </template>
+                    <Table ref="table"  :row-class-name="myConfig.rowClassName"  :show-summary="myConfig.showSummary" :summary-method="handleSummary"  :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns"  :data="tempData" @on-sort-change="sortChagne"  @on-current-change="onCurrentChange" :highlight-row="myConfig.highLightRow" @on-row-dblclick="dbclick"  @on-select="onSelect" @on-select-cancel="onSelectCancel" @on-selection-change="OnSelectionChange" @on-row-click="click" @on-column-width-resize="onColumnWidthResize">
+                         <template   v-for="config in soltTableColumns" v-slot:[config.key]="{ row, index }" :key="'show_' + config.key">
+                            <ShowText :label="formatValue(index,config,row)" :contentAlign="config.contentAlign" :class="config.cellClassName" :config="config" :rowIndex="index"></ShowText>
+                         </template>
+                    </Table>
+                </Card>
+                 <div ref="page" name="page">
+                        <div  v-if="myConfig.showPage" ref="page" style="padding-top:10px;">
+                            <Card :bordered="false" :padding="0" :dis-hover="true"  style="border-radius:0px">
+                                <Row  type="flex" justify="end" style="padding-right:10px" :gutter="0">
+                                    <PageCustom v-model="culPage"  :total="myConfig.pageConfig.total_results"  :size="myConfig.pageSize"  :current="myConfig.pageConfig.page_no" :page-size="myConfig.pageConfig.page_size" :page-size-opts="myConfig.pageConfig.pageSizeList"  @on-page-size-change="changePageSize" @on-change="changePage"  :show-total="myConfig.pageShowTotal" :show-elevator="myConfig.pageShowElevator" :show-sizer="myConfig.pageShowSizer"></PageCustom>
+                                </Row>
+                            </Card>
+                        </div>
+                    </div>
+            </Col>
+            <Col span= '2'>
+                  <Row  type="flex" justify="center" align="middle" style="padding:5px;" >
+                        <Tooltip content="删除" placement="left">
+                           <Button type="primary" size="small"  icon="ios-arrow-back" :disabled="!rightActive" @click="moveToLeft"></Button>
+                        </Tooltip>
+                  </Row>
+                  <Row  type="flex" justify="center" align="middle" style="padding:5px;" >
+                       <Tooltip content="添加" placement="right">
+                            <Button type="primary" size="small"  icon="ios-arrow-forward" :disabled="!leftActive" @click="moveToRight"></Button>
+                        </Tooltip>
+                  </Row>
+            </Col>
+            <Col :span="multiGridCol" style="padding-bottom: 40px;">
+                <Card :padding="0" bordered dis-hover>
+                     <template #title>
+                        <span  v-text="myConfig.multiGridTitle"></span>
+                     </template>
+                     <Table ref="multiSelectTable"  :row-class-name="myConfig.rowClassName"  :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="multiTableColumns"  :data="tempMultiSelectData" :highlight-row="myConfig.highLightRow" @on-selection-change="OnMultiSelectionChange">
+                         <template  v-for="config in multiSoltTableColumns" v-slot:[config.key]="{ row, index }" :key="'mshow_' + config.key">
+                            <ShowText  :label="formatMulValue(index,config,row)" :contentAlign="config.contentAlign" ></ShowText>
+                         </template>
+                     </Table>
+                </Card>
+            </Col>
+        </Row>
+    </template> 
+</div>
+</template>
+<script>
+import Base from '@/components/grid/viewgridbase.vue';
+export default {
+    name: 'mimpleviewgrid',
+    extends: Base,
+    methods: {
+        initCheckColumn(columns) {
+            if (this.myConfig.showCheckBox) {
+                let check = {};
+                check.type = 'selection';
+                check.align = 'center';
+                check.key ='selection';
+                check.width = 40;
+                check.multiSelect = this.myConfig.multiSelect;
+                columns.push(check);
+            }
+        },
+        initIndexColumn(columns) {
+            if (this.myConfig.showIndex) {
+                 if (this.myConfig.showSumGroup) {
+                    let indexConfig = {
+                            label: '行号',
+                            name: 'sumindex',
+                            type: 'TextBox',
+                            align: 'center',
+                            width: 45
+                    };
+                    if (this.myConfig.items[0].name !== 'sumindex') {
+                        this.myConfig.items.splice(0, 0, indexConfig);
+                    }
+                } else {
+                    let index = {};
+                    index.type = 'index';
+                    index.key = 'index';
+                    index.width = 45;
+                    index.title = '行号';
+                    index.align = 'center';
+                    if (this.myConfig.fixedIndex){
+                        index.fixed = 'left';
+                    }
+                    if (this.myConfig.headClassName !== undefined) {
+                        index.className  = this.myConfig.headClassName;
+                    }
+                    index.indexMethod = this.indexRender;
+                    if (this.myConfig.indexConfig !== undefined) {
+                        Object.assign(index, this.myConfig.indexConfig);
+                    }
+                    columns.push(index);
+                }
+            }
+        },
+    },
+     computed:{
+         isFlag () {
+             if (this.$refs.table) {
+                if (this.$refs.table.el.height > this.tableHeight) {
+                    return 'efuture-viewgrid'
+                }
+             }
+             return '';
+         }
+     },
+    mounted () {  
+    }
+};
+</script>

package/src/components/mychart/bar/bar.vue

@@ -0,0 +1,202 @@
+<template>
+  <div  :style="currentStyle" ref="mychart">
+  </div>
+</template>
+
+<script>
+import Base from '@/components/mychart/basechart.vue';
+// 引入柱状图组件
+require('echarts/lib/chart/bar');
+export default {
+    name: 'bar',
+    extends: Base,
+    data () {
+        return {
+            mychartconfig: {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: []
+                },
+                grid: {
+                    left: '2%',
+                    right: '2%',
+                    bottom: '2%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: []
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+                series: []
+            },
+            myConfig:{
+                xfieldname:'', // x轴字段名
+                xdata:'',      // x轴数据
+                cfieldname:'',  // 分类字段名
+                cdata:'',      // 分类数据
+                yfieldname:'',   //值字段名
+                ydata:'',
+                mychartconfig:{},
+                valueAxis:'y'
+               
+            }
+        };
+    },
+    methods: {
+        customInitMychartConfig () {
+            let curlConfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig); 
+            let tempData = {};
+            let xObj = {};
+            let xData = [];
+            let legendData = [];
+            let self = this;
+            let series = [];
+            if (this.currentData && this.currentData.length > 0) {
+                this.currentData.forEach(el => {
+                    if (self.myConfig.cfieldname) {
+                        let name = el[self.myConfig.cfieldname];
+                        if (!tempData[name])  {
+                            tempData[name] = [];
+                            legendData.push(name);
+                        }
+                        tempData[name].push(el);
+                    }
+                    let xname = null;
+                    if (self.myConfig.valueAxis === 'y') {
+                        xname = el[self.myConfig.xfieldname];
+                    }
+                    if (self.myConfig.valueAxis === 'x') {
+                        xname = el[self.myConfig.yfieldname];
+                    }
+                    if (xname !== null) {
+                        if (!xObj[xname]) {
+                            xObj[xname] = true;
+                            xData.push(xname);
+                        }
+                    }    
+                });
+                 // 处理分类
+                if (this.myConfig.cdata && this.myConfig.cdata.length > 0) {
+                    legendData = this.$Method.copy(this.myConfig.cdata);
+                } 
+                // 当y轴为值时处理x轴数据
+                if (this.myConfig.valueAxis === 'y') {
+                    if (this.myConfig.xdata && this.myConfig.xdata.length > 0) {
+                        xData = this.$Method.copy(this.myConfig.xdata);
+                    } 
+                }
+                // 当x轴为值时处理y轴数据
+                if (this.myConfig.valueAxis === 'x') {
+                    if (this.myConfig.ydata && this.myConfig.ydata.length > 0) {
+                        xData = this.$Method.copy(this.myConfig.ydata);
+                    } 
+                }
+               
+                // 处理值
+                if (this.myConfig.cfieldname  && legendData.length > 0) {
+                    legendData.forEach(c => {
+                        let temp = {
+                            name:c,
+                            type: 'bar'
+                        };
+                        temp.data = [];
+                        let xflag = false;
+                        xData.forEach(x => {
+                            let valueName = '';
+                            let categoryName = '';
+                            if (this.myConfig.valueAxis === 'y') {
+                                valueName = this.myConfig.yfieldname;
+                                categoryName = this.myConfig.xfieldname;
+                            }
+                            if (this.myConfig.valueAxis === 'x') {
+                                valueName = this.myConfig.xfieldname;
+                                categoryName = this.myConfig.yfieldname;
+                            }
+                            tempData[c].some(el =>{
+                                if (el[categoryName] === x) {
+                                    temp.data.push(el[valueName]);
+                                    xflag = true;
+                                    return true;
+                                }
+                            });
+                            if (!xflag) {
+                                temp.data.push('0');
+                            }
+                        });
+                        if (this.myConfig.OnUpdataSeries) {
+                            let that = this;
+                            this.myConfig.OnUpdataSeries(temp,that);
+                        }
+                        series.push(temp);
+                    });
+                } else {
+                    let temp = {
+                        type: 'bar'
+                    };
+                    temp.data = [];
+                    let xflag = false;
+                    xData.forEach(x => {
+                        xflag = false;
+                        let valueName = '';
+                        let categoryName = '';
+                        if (this.myConfig.valueAxis === 'y') {
+                            valueName = this.myConfig.yfieldname;
+                            categoryName = this.myConfig.xfieldname;
+                        }
+                        if (this.myConfig.valueAxis === 'x') {
+                            valueName = this.myConfig.xfieldname;
+                            categoryName = this.myConfig.yfieldname;
+                        }
+                        this.currentData.some(el => {
+                            if (el[categoryName] === x) {
+                                temp.data.push(el[valueName]);
+                                xflag = true;
+                                return true;
+                            }
+                        })
+                        if (!xflag) {
+                            temp.data.push('0');
+                        }
+                    })
+                    if (this.myConfig.OnUpdataSeries) {
+                        let that = this;
+                        this.myConfig.OnUpdataSeries(temp,that);
+                    }
+                    series.push(temp);
+                }    
+            }
+            // 处理分类
+            curlConfig.legend.data = legendData;
+            // 当y轴为值时处理x轴数据
+            if (this.myConfig.valueAxis === 'y') {
+                curlConfig.xAxis[0].data = xData;
+            }
+            // 当x轴为值时处理y轴数据
+            if (this.myConfig.valueAxis === 'x') {
+                curlConfig.yAxis[0].data = xData;
+            }
+            // 处理数据
+            curlConfig.series = series;
+            // 处理颜色
+            if (!this.mychartconfig.color) {
+                if (legendData.length > 0) {
+                    curlConfig.color  = this._getGlobalColor('bar', legendData.length);
+                }  else {
+                    curlConfig.color  = this._getGlobalColor('bar', 1);
+                }
+            } 
+            return curlConfig;
+        }
+       
+    }
+};
+</script>

package/src/components/mychart/basechart.vue

@@ -0,0 +1,190 @@
+
+<script>
+require('echarts/lib/component/tooltip');
+require('echarts/lib/component/title');
+require('echarts/lib/component/legend');
+require('echarts/lib/component/toolbox');
+import size from '@/components/base/size';
+export default {
+    mixins: [size],
+    name: 'mychart',
+    data () {
+        return {
+            globalConfig: {
+            },
+            myConfig:{
+                adjustHeight:0,
+                adjustWidth:0,
+                width:0.5,
+                height:0.4,
+                onChartClick:null,
+                OnUpdataSeries:null,
+                myChartStyle:{},
+                globalColorFlag:true
+            },
+            currentData:[],
+            mychartconfig:{},
+            echarts: require('echarts')
+        };
+    },
+    created () {
+        this.init();
+    },
+    props:{
+        config: {
+            type:Object,
+            default:() => {}
+        }
+    },
+    computed: {
+        currentStyle () {
+            let style = Object.assign({},this.myConfig.myChartStyle,{});
+            style.height = this.currentHeight+'px';
+            style.width = this.currentWidth+'px';
+            return  style;
+        },
+        currentMychartConfig () {
+            let curlConfig = this._initMychartConfig();
+            if(this.myConfig.overrideConfig) {
+                curlConfig = this.myConfig.overrideConfig(curlConfig);
+            }
+            return curlConfig;
+        } 
+    },
+    methods: {
+        init () {
+            this.myConfig =Object.assign({},this.globalConfig,this.myConfig); 
+            this.myConfig =Object.assign({},this.myConfig,this.config);  
+            if (this.config.eventObject) {
+                Object.assign(this,this.config.eventObject);
+                delete this.myConfig.eventObject;
+            }
+           
+            this.mychartconfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig);
+            this.setSizeConfig(this.myConfig);
+            if (this.customInit) {
+                this.customInit();
+            }
+        },
+        newMychart(mychartconfig) {
+            if (!this.mychart) {
+                let dom = this.$refs.mychart;
+                if (dom) {
+                    this.mychart = this.echarts.init(dom);
+                    let self = this;
+                    this.mychart.on('click', function (params) {
+                        if (params.componentType === 'markPoint') {
+                        // 点击到了 markPoint 上
+                            if (params.seriesIndex === 5) {
+                        // 点击到了 index 为 5 的 series 的 markPoint 上。
+                            }
+                        }
+                        else if (params.componentType === 'series') {
+                            if (params.seriesType === 'graph') {
+                                if (params.dataType === 'edge') {
+                             // 点击到了 graph 的 edge（边）上。
+                                }
+                                else {
+                                // 点击到了 graph 的 node（节点）上。
+                                }
+                            }
+                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
+                                if (self.myConfig.onChartClick) {
+                                    self.myConfig.onChartClick(params.name, params);
+                                }
+                            }
+                        }
+                    });
+                    this.mychart.on('dblclick', function (params) {
+                        if (params.componentType === 'markPoint') {
+                        // 点击到了 markPoint 上
+                            if (params.seriesIndex === 5) {
+                        // 点击到了 index 为 5 的 series 的 markPoint 上。
+                            }
+                        }
+                        else if (params.componentType === 'series') {
+                            if (params.seriesType === 'graph') {
+                                if (params.dataType === 'edge') {
+                             // 点击到了 graph 的 edge（边）上。
+                                }
+                                else {
+                                // 点击到了 graph 的 node（节点）上。
+                                }
+                            }
+                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
+                                if (self.myConfig.onDblChartClick) {
+                                    self.myConfig.onDblChartClick(params.name, params);
+                                }
+                            }
+                        }
+                    });
+                    if (mychartconfig.legend && mychartconfig.legend.type === 'scroll') {
+                        this.mychart.on('legendScroll',function (params) {
+                            if (self.myConfig.onLegendScroll) {  
+                                self.myConfig.onLegendScroll(params, self);
+                            }
+                        });
+                    }
+                    if (self.myConfig.customBinding) {
+                        self.myConfig.customBinding(self);
+                    }
+                    window.addEventListener('resize', function () {
+                        self.mychart.resize();
+                    });
+                }
+            }
+            if (this.mychart) {
+                this.mychart.clear();
+                if (mychartconfig) {
+                    this.mychart.setOption(mychartconfig);
+                } 
+               
+            }
+        },
+        _initMychartConfig() {
+            if (this.customInitMychartConfig) {
+                return this.customInitMychartConfig();
+            }
+        },
+        setData(data) {
+            this.currentData = this.$Method.copy(data);
+        },
+        clear() {
+            this.currentData = [];
+        },
+        _getGlobalColor (pro,num) {
+            if (this.getGlobalColor) {
+                return this.getGlobalColor(pro,num);
+            } else {
+                let globalColorFlag = true;
+                if (this.myConfig.globalColorFlag) {
+                    globalColorFlag = this.myConfig.globalColorFlag;
+                }
+                if (this.config && this.config.globalColorFlag !== undefined) {
+                    globalColorFlag = this.config.globalColorFlag;
+                }
+                if (globalColorFlag) {
+                    return this.$Method.getGlobalColor(num, false, pro, this);
+                } else {
+                    return this.$Method.getGlobalColor(num, true, pro, this);
+                }
+            }
+        },
+        setMyConfig(obj) {
+            this.myConfig = Object.assign({},this.myConfig,obj);
+        }
+    },
+    mounted () {
+    },
+    watch:{
+        currentMychartConfig: {
+            handler(newValue)  {
+                this.newMychart(newValue);
+            }//,
+            //immediate: true
+        },
+    }
+};
+</script>
+
+