ocpview-plus 0.0.1

package/src/components/mychart/radar/radar.vue

@@ -0,0 +1,122 @@
+<template>
+  <div  :style="currentStyle" ref="mychart">
+  </div>
+</template>
+
+<script>
+import Base from '@/components/mychart/basechart.vue';
+// 引入雷达组件
+require('echarts/lib/chart/radar');
+export default {
+    name: 'radar',
+    extends: Base,
+    data () {
+        return {
+            mychartconfig: {
+                tooltip: {},
+                legend: {
+                    orient: 'vertical',
+                    left: 'left',
+                    data: []
+                },
+                radar:{
+                    // shape: 'circle',
+                    name: {
+                        textStyle: {
+                            color: '#fff',
+                            backgroundColor: '#999',
+                            borderRadius: 3,
+                            padding: [3, 5]
+                        }
+                    },
+                    center: ['50%', '53%'],
+                    indicator: []
+                },
+                series: []
+            },
+            myConfig:{
+                cfieldname: '', // 类型字段名
+                xfieldname: '', // 标题字段名
+                yfieldname: '', // 值类型字段
+                mychartconfig:{}
+            }
+        };
+    },
+    methods: {
+        customInitMychartConfig () {
+            let curlConfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig); 
+            let tempData = {};
+            let xtempData = {};
+            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);
+                    }
+                    if (self.myConfig.xfieldname && self.myConfig.yfieldname) {
+                        let name = el[self.myConfig.xfieldname];
+                        if (!xtempData[name])  {
+                            xtempData[name] = {};
+                            xtempData[name].value = Number(el[self.myConfig.yfieldname]);
+                        } else {
+                            if (Number(el[self.myConfig.yfieldname]) > xtempData[name].value) {
+                                xtempData[name].value = Number(el[self.myConfig.yfieldname]);
+                            }
+                        }
+                    }
+                });
+                for (let t in xtempData) {
+                    let xObj = {};
+                    xObj.name = t;
+                    xObj.max = xtempData[t].value;
+                    curlConfig.radar.indicator.push(xObj)
+                }
+                
+                // 处理值
+                let temp = {
+                    type: 'radar'
+                };
+                temp.data = [];
+                if (this.myConfig.cfieldname  && legendData.length > 0) {
+                    legendData.forEach(c => {
+                        let radarObj = {};
+                        radarObj.name = c;
+                        radarObj.value = [];
+                        let xflag = false;
+                        for (let t in xtempData) {
+                            xflag = false;
+                            self.currentData.some(el => {
+                                if (el[self.myConfig.cfieldname] === c && el[self.myConfig.xfieldname] === t) {
+                                    radarObj.value.push(Number(el[self.myConfig.yfieldname])); 
+                                    xflag = true;
+                                    return true;
+                                }
+                            })
+                            if (!xflag) {
+                                radarObj.value.push(0);
+                            }
+                        }
+                        temp.data.push(radarObj);
+                    });
+                }
+                series.push(temp);
+            }
+            // 处理分类
+            curlConfig.legend.data = legendData;
+           
+            // 处理数据
+            curlConfig.series = series;
+
+            return curlConfig;
+        }
+       
+    }
+};
+</script>

package/src/components/mychart/scatter/scatter.vue

@@ -0,0 +1,76 @@
+<template>
+  <div  :style="currentStyle" ref="mychart">
+  </div>
+</template>
+
+<script>
+import Base from '@/components/mychart/basechart.vue';
+// 引入柱状图组件
+require('echarts/lib/chart/scatter');
+export default {
+    name: 'scatter',
+    extends: Base,
+    data () {
+        return {
+            mychartconfig: {
+                legend: {
+                    data: []
+                },
+                grid: {
+                    left: '2%',
+                    right: '2%',
+                    bottom: '2%',
+                    containLabel: true
+                },
+                xAxis: {},
+                yAxis: {},
+                series: []
+            },
+            myConfig:{
+                xfieldname:'', // x轴字段
+                yfieldname:'',   //值字段名
+                mychartconfig:{},
+               
+            }
+        };
+    },
+    methods: {
+        customInitMychartConfig () {
+            let curlConfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig); 
+            let data = [];
+            let self = this;
+            let series = [];
+            if (this.currentData && this.currentData.length > 0) {
+                this.currentData.forEach(el => {
+                    let obj = [];
+                    if (el[self.myConfig.xfieldname]) {
+                        obj.push(Number(el[self.myConfig.xfieldname]));
+                    } else {
+                        obj.push(0);
+                    }
+                    if (el[self.myConfig.yfieldname]) {
+                        obj.push(Number(el[self.myConfig.yfieldname]));
+                    } else {
+                        obj.push(0);
+                    }
+                    data.push(obj);
+                });
+                let temp = {
+                    symbolSize:20,
+                    type: 'scatter',
+                    data: data
+                };
+                if (this.myConfig.OnUpdataSeries) {
+                    let that = this;
+                    this.myConfig.OnUpdataSeries(temp,that);
+                }
+                series.push(temp);
+            }
+            // 处理数据
+            curlConfig.series = series;
+            return curlConfig;
+        }
+       
+    }
+};
+</script>

package/src/components/numberbox/append.js

@@ -0,0 +1,11 @@
+import { h } from 'vue';
+
+export default {
+    name: 'NumberRangeAppend',
+    props: {
+        render: Function
+    },
+    render () {
+        return this.render(h);
+    }
+};

package/src/components/numberbox/index.js

@@ -0,0 +1,3 @@
+import NumberBox from './numberbox.vue';
+import NumberRangeBox from './numberrangebox.vue';
+export {NumberBox,NumberRangeBox};

package/src/components/numberbox/numberbox.vue

@@ -0,0 +1,303 @@
+<template>
+    <div v-show="myConfig.visible">
+        <Input
+            ref="myControl"
+            v-model="label"
+            :size="myConfig.size"
+            :placeholder="myConfig.placeholder"
+            :readonly="!myConfig.allowInput"
+            :disabled="myConfig.readOnly"
+            @on-focus="parser($event)"
+            @on-blur="_setFatherValue"
+            @keydown.enter.stop="_enterSetFatherValue"
+            style="width:100%"
+        >
+            <template v-if="showPrefix" #prepend>
+            <span>
+                <CommonIcon :type="myConfig.prefix" size="20" />
+            </span>
+            </template>
+             <template  v-if="showUnit" #append>
+            <span v-if="showUnit" >{{myConfig.unit}}</span>
+            <div v-if="myConfig.unitCustom" :style="'min-width:' + myConfig.unitWidth + 'px'">
+                <NumberRangeExpand  :render="myConfig.unitRender"  />
+            </div>
+             </template>
+        </Input>
+    </div>
+</template>
+<script>
+import Base from '@/components/base/controlbase.vue';
+import NumberRangeExpand from './append.js';
+export default {
+    name: 'numberbox',
+    extends: Base,
+    data() {
+        return {
+            myConfig: {
+                max: Infinity,
+                min: -Infinity,
+                precision: 0,
+                format: 'n0',
+                defaultValue: 0,
+                allowInput: true,
+                unit: '',
+                prefix: '',
+                showPrefix: false,
+                boundaryValue: true,
+                unitCustom:false,
+                unitWidth: 80
+            },
+            showUnit: false,
+            showPrefix: false,
+            label: '',
+            value: '',
+            oldValue: ''
+        };
+    },
+    props: {
+        fatherValue: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    components:{
+        NumberRangeExpand
+    },
+    mounted() {
+        if (this.$refs.myControl && this.$refs.myControl.$el) {
+            if (this.myConfig.place === 'grid') {
+                this.$refs.myControl.$el.onmouseleave = () => {
+                    this._setFatherValue();
+                };
+            }
+        }
+    },
+    methods: {
+        fatherValueToValue(value) {
+            let obj = this.myConfig.defaultValue;
+            if (this.config.defaultValue != undefined) {
+                obj = this.config.defaultValue;
+            }
+            if (Number(value) || Number(value) === 0) {
+                obj = Number(value);
+            }
+            if (value === '' && this.config.defaultValue === '') {
+                obj = value;
+            }
+            return obj;
+        },
+        valueToFatherValue() {
+            let para = {};
+            para.value = this.value + '';
+            return para;
+        },
+        _enterSetFatherValue() {
+            this.isEnter = true;
+            if (this.label === this.getLabel()) {
+                if (this.$parent.enterKeyDown) {
+                    this.$parent.enterKeyDown(); 
+                    this.isEnter = false;
+                }
+                return;
+            } else {
+                this._setFatherValue();  
+            }
+        },
+        _setFatherValue(e) {
+            if (this.label === this.getLabel()) {
+                return;
+            }
+            if (this.label === '' && this.myConfig.defaultValue === '') {
+                this.value = '';
+            } else {
+                if (!Number(this.label) && Number(this.label) !== 0) {
+                    this.label = this.myConfig.defaultValue;
+                }
+                if (this.myConfig.boundaryValue) {
+                    if (Number(this.label) < this.myConfig.min) {
+                        this.alert('输入值不能小于' + this.myConfig.min);
+                        this.label = this.myConfig.min;
+                    }
+                    if (Number(this.label) > this.myConfig.max) {
+                        this.alert('输入值不能大于' + this.myConfig.max);
+                        this.label = this.myConfig.max;
+                    }
+                } else {
+                    if (Number(this.label) <= this.myConfig.min) {
+                        this.alert('输入值不能小于等于' + this.myConfig.min);
+                        this.setFatherValueFail();
+                        return false;
+                    }
+                    if (Number(this.label) >= this.myConfig.max) {
+                        this.alert('输入值不能大于等于' + this.myConfig.max);
+                        this.setFatherValueFail();
+                        return false;
+                    }
+                }
+                this.value = this.$Method.precisionNumber(this.label,this.myConfig.format);
+                if (this.myConfig.proportional) {
+                    if (Number(this.label) < 1) {
+                        this.value = this.$Method.precisionNumber(
+                            this.label,
+                            'p2',
+                        );
+                    }
+                }
+                if (this.label === '' && this.myConfig.defaultValue === '') {
+                    this.value = this.label;
+                }
+            }
+            this.setFatherValue();
+        },
+       
+        setFatherValueSuccess(para) {
+            this.label = this.$Method.formatNumber(
+                this.value,
+                this.myConfig.format,
+                this.myConfig.notzero
+            );
+            if (this.myConfig.proportional) {
+                if (Number(this.value) < 1) {
+                    this.label = this.$Method.formatNumber(this.label, 'p2', this.myConfig.notzero);
+                }
+            }
+            if (this.value === '' && this.myConfig.defaultValue === '') {
+                this.label = this.value;
+            }
+            this.$emit('inputValue', para);
+        },
+        setFatherValueFail() {
+            this.label = this.$Method.formatNumber(
+                this.oldValue,
+                this.myConfig.format,
+                this.myConfig.notzero
+            );
+            this.value = this.oldValue;
+            if (this.myConfig.proportional) {
+                if (Number(this.oldValue) < 1) {
+                    this.label = this.$Method.formatNumber(this.oldValue, 'p2', this.myConfig.notzero);
+                }
+            }
+            if (this.oldValue === '' && this.myConfig.defaultValue === '') {
+                this.label = this.oldValue;
+            }
+        },
+        customInit() {
+            if (this.config.min !== undefined) {
+                if (this.myConfig.boundaryValue) {
+                    this.myConfig.defaultValue = this.config.min;
+                } else {
+                    this.myConfig.defaultValue = '';
+                }
+            }
+            if (this.myConfig.unitRender) { 
+                this.myConfig.unitCustom = true;
+            } else {
+                this.myConfig.unitCustom = false; 
+            }
+            if (this.myConfig.format && this.myConfig.format.length > 1) {
+                this.myConfig.precision = Number(this.myConfig.format[1]);
+                if (this.myConfig.showPrefix) {
+                    if (!this.myConfig.prefix) {
+                        if (this.myConfig.format.startsWith('c')) {
+                            this.showPrefix = true;
+                            this.myConfig.prefix = 'logo-yen';
+                        }
+                    } else {
+                        this.showPrefix = false;
+                    }
+                } else {
+                    this.showPrefix = false;
+                }
+
+                if (this.myConfig.unit) {
+                    this.showUnit = true;
+                }
+
+                this.label = this.$Method.formatNumber(
+                    this.value,
+                    this.myConfig.format,
+                    this.myConfig.notzero
+                );
+                if (this.myConfig.proportional) {
+                    if (Number(this.value) < 1) {
+                        this.label = this.$Method.formatNumber(
+                            this.value,
+                            'p2',
+                             this.myConfig.notzero
+                        );
+                    }
+                }
+                if (this.value === '' && this.myConfig.defaultValue === '') {
+                    this.label = this.value;
+                }
+                this.oldLabel = this.label;
+            }
+        },
+
+        formatter(value) {
+            if (this.myConfig.format) {
+                if (Number(value) || value === 0) {
+                    return this.$Method.formatNumber(
+                        value,
+                        this.myConfig.format,
+                        this.myConfig.notzero
+                    );
+                } else {
+                    return value;
+                }
+            }
+        },
+        parser(event) {
+            this.label = this.getValueNumber(this.value)
+            if (event) {
+                event.currentTarget.select();
+            }
+        },
+        getValueNumber(curlvalue) {
+            if (curlvalue) {
+                let value = Number(curlvalue)
+                let float = 0;
+                if (this.myConfig.format) {
+                    if (this.myConfig.format.length > 1) {
+                        float = Number(this.myConfig.format[1]);
+                        if ('p' === this.myConfig.format[0]) {
+                            float = float + 2;
+                        }
+                    }
+                }
+                return Number(value.toFixed(float));
+            } else {
+                return curlvalue;
+            }
+        }, 
+        watchCustomFatherValue() {
+            this.label = this.getLabel();
+        },
+        getLabel() {
+            let label = this.$Method.formatNumber(
+                this.value,
+                this.myConfig.format,
+                this.myConfig.notzero
+            );
+            if (this.myConfig.proportional) {
+                if (Number(this.value) < 1) {
+                    label = this.$Method.formatNumber(this.value, 'p2', this.myConfig.notzero);
+                }
+            }
+            if (this.value === '' && this.myConfig.defaultValue === '') {
+                label = this.value;
+            }
+            return label;
+        },
+        setFocus(value) {
+            if (value) {
+                this.$refs.myControl.focus();
+            } else {
+                this.$refs.myControl.blur();
+            }
+        }
+    }
+};
+</script>