udxcms 1.0.1

package/dist/components/basicComponents/Dashboard.vue

@@ -0,0 +1,263 @@
+<!--
+ * @Author:
+ * @Date: 2020-12-07 18:46:38
+ * @LastEditTime: 2021-08-02 11:50:25
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div class='dashboard' id='dashboard'>
+        <div class='dashNum'>
+            <span class='turnover'>{{turnover}}</span>
+            <span class='mark'>/</span>
+            <span class='proportion'>{{proportion}}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    import * as d3 from "d3";
+    export default {
+        name: 'dashboard',
+        props: {
+            list: {
+                type: Array,
+                default: []
+            },
+            turnover: {
+                type: Number,
+                default: 0
+            },
+            proportion: {
+                type: String,
+                default: ''
+            },
+            arcConfDeg: {
+                type: Number,
+                default: 0
+            },
+            arcConfDegScale: {
+                type: Number,
+                default: 2
+            }
+        },
+        watch: {
+            list(val, old) {
+                if (val.length) {
+                    this.init()
+                }
+            }
+        },
+        data() {
+            return {
+                conf: {
+                    width: 720,
+                    height: 200,
+                    innerRadius: 600,           // 内圈半径
+                    outerRadius: 601,           // 外圈半径
+                    lineBaseW: 12,              // 刻度线长度
+                    lineScaleW: 36,             // 大刻度线长度
+                    lineDistance: 10,           // 刻度距离表盘的边缘偏移量
+                    lineDistanceNum: 16,        // 数字偏移量
+                    lineStrokeW: 2,             // 刻度线厚度
+                    defaultColor: 'var(--text-color-placeholder)',    // 默认颜色
+                    activeColor: 'rgb(255, 135, 0)',     // 激活颜色
+                    arcDeg: 60,                 // 偏移角度范围,也直接影响刻度
+                    arcDegScale: 1              // 刻度数量放大倍数
+                },
+
+            }
+        },
+        mounted() {
+            this.init()
+        },
+        methods: {
+            init() {
+                let {width, height, innerRadius, outerRadius, lineBaseW, lineScaleW, lineDistance, lineDistanceNum, lineStrokeW, defaultColor, activeColor, arcDeg} = this.conf
+                let lines = [] // 刻度
+                let len = this.list.length
+                let arcAngle = arcDeg / 360 // 偏转角度范围
+                arcDeg = this.arcConfDeg || arcDeg
+                if (arcDeg % (len - 1)) {
+                    arcDeg = arcDeg + arcDeg % (len - 1)
+                }
+                arcDeg *= this.arcConfDegScale
+                for(var i = 0; i < arcDeg; i++) {
+                    lines.push(i)
+                }
+                let arcDegStep = arcDeg / (len - 1) // 步长
+                let lineA = []      // 大刻度
+                let lineActive = -1// 大刻度active
+                let lineAact = 0    // 刻度激活
+                let lineNum = []    // 数字
+                let lineDeg = []    // 百分比
+                let lineBl = this.list.map((v, i) => {
+                    let nextV = this.list[i + 1]
+                    if (nextV && nextV.turnover) {
+                        return nextV.turnover - v.turnover
+                    }
+                })    // 数字区段对比值
+                this.list.map((v, i) => {
+                    let lineAval = arcDeg / (len - 1) * i
+                    lineA.push(lineAval)
+                    let innerTurnover = v.turnover * 1
+
+                    // 计算大刻度
+                    if (this.turnover >= innerTurnover) {
+                        lineActive = lineAval
+                    }
+                    // 计算小刻度
+                    let nextInnerTurnover = this.list[i + 1] && this.list[i + 1].turnover * 1 || 0
+                    if (nextInnerTurnover && this.turnover >= innerTurnover && this.turnover <= nextInnerTurnover) {
+                        let dec = this.turnover - innerTurnover
+                        let arcDegDec = Math.floor(arcDegStep * (dec / lineBl[i]))
+                        lineAact += arcDegDec
+                    } else if (nextInnerTurnover && this.turnover >= innerTurnover && this.turnover > nextInnerTurnover) {
+                        lineAact += arcDegStep
+                    }
+                    lineNum.push(v.turnover * 1)
+                    lineDeg.push(v.proportion)
+                })
+
+                // 刻度偏移量起始点
+                let defaultLineS = innerRadius - lineDistance - lineBaseW
+                let defaultLineE = innerRadius - lineDistance
+
+
+                d3.select('#dashcontent').remove()
+                var svg = d3.select('#dashboard').append('svg').attr('id', 'dashcontent').attr('width', width).attr('height', height).style('background', '#ffffff')
+                const group = svg.append('g').attr('class', 'group').attr('transform', `translate(${width * 0.5}, ${defaultLineS + lineScaleW + lineDistanceNum + 10})`)
+                const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius)
+                const radiusScaleB = d3.scaleLinear().domain([0, arcDeg]).range([Math.PI * (-arcAngle), Math.PI * arcAngle])
+
+                this.drawArc(group, 'arc', arc, radiusScaleB, arcDeg, defaultColor, false)
+
+                if (this.turnover) {
+                    this.drawArc(group, 'arcActive', arc, radiusScaleB, lineAact, activeColor, true)
+                }
+
+                this.drawLine(group, lines, radiusScaleB, 'defaultLine', defaultLineE, defaultLineS, lineStrokeW, lineAact, false)
+                this.drawLine(group, lineA, radiusScaleB, 'markLine', defaultLineS + lineScaleW, defaultLineS, lineStrokeW, lineActive, true)
+
+                this.drawNum(group, lineNum, radiusScaleB, 'markVal', defaultLineS + lineScaleW + lineDistanceNum, lineActive, defaultColor, activeColor, arcDeg, this.arcConfDegScale)
+                this.drawNum(group, lineDeg, radiusScaleB, 'markDval', defaultLineS - lineDistanceNum, lineActive, defaultColor, activeColor, arcDeg, this.arcConfDegScale)
+            },
+            drawArc(group, className, arc, radiusScaleB, deg, color, flag) {
+                if (flag) {
+                    let r = this.conf.innerRadius
+                    var a = d3.rgb(255, 135, 0)
+                    var b = d3.rgb(255, 198, 38)
+                    var compute = d3.interpolate(a, b)
+                    const radiusScaleColor = d3.scaleLinear().domain([0, deg]).range([0, 1])
+                    group.append('g').attr('class', className)
+                    for(var i=0; i < 60; i++) {
+                        group.select(`.${className}`).append('path').attr('d', arc({
+                            startAngle: radiusScaleB(i * deg / 60),
+                            endAngle: radiusScaleB((i+1) * deg / 60)
+                        })).attr('fill', compute(radiusScaleColor(i * deg / 60)))
+                        .attr('stroke', compute(radiusScaleColor((i+1) * deg / 60)))
+                    }
+
+                    const arc1 = d3.arc().innerRadius(0).outerRadius(3)
+                    group.append('g').attr('class','end')
+                    group.select('.end').append('path').attr('class','endpath')
+                    .attr('d',
+                        arc1({
+                            startAngle: 0,
+                            endAngle: Math.PI*2
+                        })
+                    )
+                    .attr('fill', d3.rgb(255,198,38))
+                    .attr('stroke', 'white')
+                    .attr('stroke-width', 2)
+                    .attr('transform', d => {
+                        return `translate(${r * Math.sin(radiusScaleB(deg))}, ${r * Math.cos(radiusScaleB(deg)) * -1})`
+                    })
+
+                } else {
+                    group.append('g').attr('class', className)
+                    group.select(`.${className}`).append('path').attr('d', arc({startAngle: radiusScaleB(0), endAngle: radiusScaleB(deg)})).attr('fill', color).attr('stroke', color)
+                }
+
+            },
+            /**
+             * @name:
+             * @test:
+             * @msg:
+             * @param {*} group   上下文
+             * @param {*} data    刻度的数据大小
+             * @param {*} radiusScaleB  弧度方法
+             * @param {*} class   类名
+             * @param {*} x1      起点坐标
+             * @param {*} x2      中点坐标
+             * @param {*} lineActive   颜色
+             * @param {*} lineW  线宽
+             * @param {*} flag   渐变颜色
+             * @return {*}
+             */
+            drawLine(group, data=[], radiusScaleB, className, x1, x2, lineW, lineActive, flag) {
+                let { defaultColor, activeColor } = this.conf
+                var a = d3.rgb(255, 135, 0)
+                var b = d3.rgb(255, 198, 38)
+                var compute = d3.interpolate(a, b)
+                const radiusScaleColor = d3.scaleLinear().domain([0, lineActive]).range([0, 1])
+                group.append('g').attr('class', className)
+                group.select(`.${className}`).selectAll('line').data(data).enter().append('line')
+                .attr('x1', d => x1 * Math.sin(radiusScaleB(d)))
+                .attr('y1', d => x1 * Math.cos(radiusScaleB(d)) * -1)
+                .attr('x2', d => x2 * Math.sin(radiusScaleB(d)))
+                .attr('y2', d => x2 * Math.cos(radiusScaleB(d)) * -1)
+                .attr('stroke', d => (this.turnover && lineActive >= d ? compute(radiusScaleColor(d)) : defaultColor))
+                .attr('stroke-width', lineW)
+            },
+            drawNum(group, data = [], radiusScaleB, className, x1, lineActive, defaultColor, activeColor, arcDeg, arcConfDegScale) {
+                let len = data.length
+                let pdeg = arcDeg / (len - 1)
+                let innerArr = data.map((v,i) => {
+                    return pdeg * i
+                })
+                group.append('g').attr('class', className)
+                group.select(`.${className}`).selectAll('text').data(innerArr).enter().append('text')
+                .attr('transform', d => {
+                    let deg = Math.sin(radiusScaleB(d))
+                    return `translate(${x1 * Math.sin(radiusScaleB(d))}, ${x1 * Math.cos(radiusScaleB(d)) * -1}) rotate(${-arcDeg/2/arcConfDegScale + d/(arcDeg/(len - 1)*arcConfDegScale) * pdeg })`
+                }).attr('text-anchor', 'middle').attr('dy', '0.35em')
+                .attr('fill', d => (this.turnover && lineActive >= d ? activeColor : defaultColor)).text(d => data[d/(arcDeg/(len - 1))])
+            },
+
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .lines {
+        stroke-dasharray: 1 1;
+    }
+    .dashboard {
+        position: relative;
+        height: 200px;
+        .dashNum {
+            position: absolute;
+            display: inline-block;
+            padding:0 10px;
+            min-width: 240px;
+            height: 64px;
+            line-height: 64px;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 0;
+            font-size: 28px;
+            font-family: FontMedium;
+            text-align: center;
+            border: 1px solid var(--border-color-base);
+            border-radius: 6px;
+            box-shadow: 0px 4px 12px 0px rgba(17, 51, 83, 0.02);
+            .turnover {
+                color: rgb(255, 135, 0);
+            }
+            .mark {
+                margin: 0 .5em;
+            }
+        }
+    }
+</style>

package/dist/components/basicComponents/DialogBox.vue

@@ -0,0 +1,167 @@
+<!--
+ * @Author:
+ * @Date: 2020-11-21 10:20:40
+ * @LastEditTime: 2022-01-15 00:18:13
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+	<div :class="['toast', theme]" v-if="value">
+		<div class="mask" v-if="mask" @click="hide"></div>
+		<div
+			:class="['toast-content', modeClass]"
+			:style="{
+				borderRadius: borderRadius,
+				padding: padding,
+				background: bgColor,
+                transform: `scale(${scale})`
+			}"
+		>
+			<div class="title" v-if="title || close">
+				<span v-if="title.length">{{ title }}</span>
+				<div class="close" v-if="close" @click="hide">
+					<svg-icon
+						class="img"
+						icon-class="close"
+					></svg-icon>
+				</div>
+			</div>
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "toast",
+	props: {
+		value: {
+			type: Boolean,
+			default: false,
+		},
+		mask: {
+			type: Boolean,
+			default: false,
+		},
+		bgColor: {
+			type: String,
+			default: "var(--modal-bg-color)",
+		},
+		close: {
+			type: Boolean,
+			default: true,
+		},
+		modeClass: {
+			type: String,
+			default: "",
+		},
+		title: {
+			type: String,
+			default: "",
+		},
+		borderRadius: {
+			type: String,
+			default: "6px",
+		},
+		padding: {
+			type: String,
+			default: "30px",
+		},
+        theme: {
+            type: String,
+            default: 'theme-light'
+        },
+        scale: {
+            type: Number,
+            default: 1
+        }
+	},
+	methods: {
+		hide() {
+			// // 如果不设置close，默认不让点击蒙城关闭，需要自己手动控制
+			// if (this.close) {
+			// 	this.$emit("input", false);
+			// }
+            this.$emit("input", false);
+		},
+	},
+};
+</script>
+
+<style lang="less" scoped>
+.toast {
+	position: fixed;
+	z-index: 6000;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+    max-width: 100vw;
+	.mask {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		opacity: 0.55;
+		background: var(--text-color-secondary);
+	}
+	.toast-content {
+		// width: 80vw;
+		z-index: 6010;
+		background: var(--modal-bg-color);
+		border-radius: 6px;
+		font-size: 16px;
+		font-family: Arial, Font;
+		text-align: center;
+		box-shadow: 0px 4px 12px 0px rgba(17, 51, 83, 0.02);
+		padding: 10px;
+        width: 90%;
+		.title {
+			position: relative;
+			font-size: 24px;
+			height: 24px;
+			line-height: 24px;
+			font-size: 24px;
+			text-align: left;
+			color: var(--text-color-secondary);
+			word-wrap: nowrap;
+			padding-right: 30px;
+		}
+		.close {
+			position: absolute;
+			right: 0;
+			top: 2px;
+			text-align: right;
+			transition: transform 0.5s;
+			z-index: 9;
+            cursor: pointer;
+			.img {
+				display: inline-block;
+				width: 20px;
+				height: 20px;
+				cursor: pointer;
+				color: var(--text-color-placeholder);
+			}
+		}
+		.close:hover {
+			transform: rotate(180deg);
+		}
+	}
+}
+@media screen and (min-width: 768px) {
+	.toast {
+		.toast-content {
+            min-width: 360px;
+            padding: 30px;
+            width: fit-content;
+		}
+	}
+}
+@media screen and (min-width: 1200px) {
+}
+</style>

package/dist/components/basicComponents/ErrMsg.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="errMsg" :style="{color: msgColor}" :class="hasShow ? 'show' : ''">
+        <slot>error</slot>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ErrMsg',
+    props: {
+        hasShow: {
+            type: [Boolean, String],
+            default: false
+        },
+        errType: {
+            type: String,
+            default: 'error'
+        },
+        errColor: {
+            type: String
+        }
+    },
+    computed: {
+        msgColor () {
+            if (this.errColor) {
+                return this.msgColor;
+            }
+            if (this.errType === 'error') {
+                return '#ED5656';
+            } else if (this.errType === 'other') {
+                return '#999'
+            }
+            return '#ED5656'
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+    .errMsg {
+        font-size: 12px;
+        line-height: 17px;
+        font-family: Graphik, GraphikRegular;
+        color: #ED5656;
+        opacity: 0;
+        transition: opacity linear .2s;
+        &.show {
+            opacity: 1;
+        }
+    }
+</style>

package/dist/components/basicComponents/Fullpage.vue

@@ -0,0 +1,186 @@
+<!--
+ * @Author: 
+ * @Date: 2020-12-02 16:01:13
+ * @LastEditTime: 2021-08-02 11:49:26
+ * @LastEditors: Lewis
+ * @Description: @mousedown='mousedown' @mousemove='mousemove' @mouseup='mouseup'
+-->
+<template>
+    <div class="v-fullpage-container" ref='v-fullpage' @mousewheel='mouseWheelHandle' @DOMMouseScroll='mouseWheelHandle'>
+            <div class="v-slide-container" :class="direction" ref='v-slide-container' v-show='isShow' >
+                <slot name='section'></slot>  
+            </div>
+        </div>
+</template>
+<script>
+export default {
+    name:'v-fullpage',
+    data(){
+        return{
+            fullpage:{
+                current:1,
+                isScrolling: false,
+                deltaY:0,
+            },
+            isShow:false,
+            isAllowScroll:true,
+            mouseoption: false,
+            mouseMove: {
+              x: 0,
+              y: 0
+            },
+            api:{
+              setAllowScrolling:this.setAllowScrolling
+            }
+        }
+    },
+    props:{
+      direction:{
+        type: String,
+        default: 'vertical'//horizontal
+      },
+    },
+    mounted() {
+        this.initFullPage()
+        window.addEventListener('resize',this.resizeEventHandler)
+    },
+    beforeDestroy() {
+        window.removeEventListener("resize", this.resizeEventHandler, false);
+    },
+    methods:{
+        resizeEventHandler(){
+            throttle(this.initFullPage(),300)
+        },
+        initFullPage(){
+            this.isShow=false
+            let height = this.$refs['v-fullpage'].clientHeight;
+            let width=this.$refs['v-fullpage'].clientWidth;
+            this.direction=='horizontal'?this.$refs['v-slide-container'].style.width=`${width*this.$slots.section.length}px`:null;
+            this.$slots.section.forEach((item)=>{
+                item.elm.style.height=`${height}px`
+                item.elm.style.width=`${width}px`
+            })
+            this.isShow=true
+            this.directToMove(this.fullpage.current)
+        },
+        next() {
+            let len = this.$slots.section.length;
+            if((this.fullpage.current + 1) <= len) {
+                this.fullpage.current += 1;
+                this.move(this.fullpage.current);
+            }
+        },
+        pre() {
+            if(this.fullpage.current -1 > 0) {
+                this.fullpage.current -= 1;
+                this.move(this.fullpage.current);
+            }
+        },
+        move(index) {
+            this.fullpage.isScrolling = true;
+            this.directToMove(index)
+            this.$emit('leaveSlide',{currentIndex:this.fullpage.current})
+            setTimeout(()=>{
+                this.fullpage.isScrolling = false;
+                this.$emit('moveEnded', this.fullpage.current)
+            }, 1010);
+        },
+        directToMove(index){
+          let height = this.$refs['v-fullpage'].clientHeight;
+          let width=this.$refs['v-fullpage'].clientWidth;
+          let $scroll = this.$refs['v-slide-container'];
+          let displacement 
+          if(this.direction=='vertical'){
+            displacement = -(index-1)*height + 'px';
+            $scroll.style.transform=`translateY(${displacement})`
+          }else{
+            displacement = -(index-1)*width + 'px';
+            $scroll.style.transform=`translateX(${displacement})`
+          }
+          this.fullpage.current = index
+        },
+        mouseWheelHandle (event) {
+            let evt = event || window.event;
+            if( evt.stopPropagation ) {
+              evt.stopPropagation();
+            } else {
+              evt.returnValue = false;
+            }
+            if(!this.isAllowScroll){
+              return
+            }
+            if (this.fullpage.isScrolling) {
+                return false;
+            }
+			
+            let e = event.originalEvent || event;
+            this.fullpage.deltaY = e.deltaY|| e.detail; // Firefox使用detail
+            if (this.fullpage.deltaY > 0) {
+                this.next();
+            } else if (this.fullpage.deltaY < 0) {
+                this.pre();
+            }
+        },
+        mousedown(e) {
+          this.mouseoption = ture
+          this.mouseMove = {
+            x: e.x,
+            y: e.y
+          }
+        },
+        mousemove(e) {
+           if (this.mouseoption) {
+              this.mouseMove = {
+                x: e.x,
+                y: e.y
+              }
+              console.log(e.x, e.y)
+           }
+        },
+        mouseup(e){
+          console.log('mouseup', e)
+          if (this.mouseoption) {
+            this.mouseMove = {
+              x: e.x,
+              y: e.y
+            }
+            console.log('mouseup', e.x, e.y)
+          }
+          this.mouseoption = false
+        },
+        setAllowScrolling(isAllow){
+          this.isAllowScroll=isAllow
+        },
+    }
+}
+function throttle(fn, delay) {
+  var timer = null;
+  return function() {
+    var context = this,
+      args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function() {
+      fn.apply(context, args);
+    }, delay);
+  };
+}
+</script>
+<style  scoped>
+.v-fullpage-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+.v-slide-container {
+  transition: all ease 1s;
+}
+.vertical {
+  display: block;
+}
+.horizontal {
+  display: inline-block;
+}
+</style>