Merge branch 'develop' of http://106.15.103.105/lihuizhen/ec-report-refactor into develop

components/BasicText/BasicText.vue

 <template>
 	<view>
-		
+		<p 
+			:class="[elementInfo.marquee.isOpen ? 'merquee-txt' : '' ]"
+			:style="{
+		        'font-size':`${elementInfo.option.title.textStyle.fontSize}px`,
+		        'color': elementInfo.option.title.textStyle.color,
+		        'font-weight': elementInfo.option.title.textStyle.fontWeight,
+		        'text-align': elementInfo.option.title.left,
+		        'animation-duration':`${elementInfo.marquee.speed ? elementInfo.marquee.speed : defaultSpeed}s`
+		    }"
+		>
+			{{elementInfo.option.title.text}}
+		</p>
 	</view>
 </template>
 
 <script>
-	export default {
-		name:"BasicText",
-		data() {
-			return {
+import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
+import * as echarts from '@/components/uni-ec-canvas/echarts'
+import echartElementData from '@/mixins/echartElementData.js'
+let chart = null
+	
+export default {
+	name:"BasicText",
+	mixins: [echartElementData],
+	
+	data() {
+		return {
 				
-			};
-		}
+		};
+	},
+	
+	onReady () {
+	  
+	},
+	
+	components: {
+	  uniEcCanvas
+	},
+	
+	methods: {
+		
 	}
+}
 </script>
 
-<style>
+<style scoped lang="less">
+  /* 文字滚动 */
+.merquee {
+	word-break: break-all;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.merquee-txt {
+	display: inline-block;
+	padding-left: 100%;
+	animation-name:marqueeTransform;
+	animation-iteration-count:infinite;
+	animation-timing-function:linear;
+}
 
+@keyframes marqueeTransform {
+	0% {
+		transform: translate(0, 0);
+	}
+
+	100% {
+		transform: translate(-100%, 0);
+	}
+}
 </style>

components/CountTo/CountTo.vue

+<template>
+	<view class="count-to" :style="{height: `${height}px`,}">
+		<BasicText :elementInfo="elementInfo"></BasicText>
+		<!-- warning:count-to的font-size单位为rpx -->
+		<u-count-to :start-val="startVal" :end-val="endVal" :color="elementInfo.option.countTo.color" :font-size="elementInfo.option.countTo.fontSize"></u-count-to>	
+	</view>
+</template>
+
+<script>
+	import echartElementData from '@/mixins/echartElementData.js'
+	export default {
+		name:"CountTo",
+		mixins: [echartElementData],
+		data() {
+			return {
+				startVal: 0,
+				endVal: 0,
+				height: 0
+			};
+		},
+	
+		onReady() {
+			this.getComponentHeight()
+		},
+		
+		methods: {
+			initChart() {
+				this.$nextTick(() => {
+					this.startVal = this.endVal
+					this.endVal = this.elementData.dataList.endVal
+				})
+			},
+			// 计算组件高度
+			getComponentHeight() {
+				const {windowWidth} = uni.getSystemInfoSync()
+				this.height = this.elementInfo.height
+				if (this.elementInfo.width > windowWidth) {
+					this.height = this.elementInfo.height / this.elementInfo.width * windowWidth
+				}
+			},
+			
+		},
+		
+	}
+	
+</script>
+
+<style>
+.count-to {  
+  font-size: 30px;
+  color: #f9bb70;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+}
+
+</style>

components/NormalImage/NormalImage.vue

+<template>
+	<view class="normal-image">
+		<BasicText :elementInfo="elementInfo.option.title"></BasicText>
+		<u-empty 
+		 v-if="!elementInfo.option.images.list.length"></u-empty>
+		<u-image 
+		 v-if="elementInfo.option.images.list.length === 1" 
+		 width="100%"
+		 :height="imageHeight"
+		 :src="elementInfo.option.images.list[0].url">
+		</u-image>
+		<u-swiper 
+		 v-if="elementInfo.option.images.list.length > 1" 
+		  mode="dot"
+		  :autoplay="elementInfo.optison.images.autoplay" 
+		  :interval="elementInfo.option.images.autoplaySpeed * 1000"
+		  :indicator="elementInfo.option.images.dots" 
+		  :list="elementInfo.option.images.list" 
+		   width="100%"
+		  :height="imageHeight"
+		  name="url">
+		</u-swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "NormalImage",
+		props: {
+			elementInfo: {
+				type: Object,
+				required: true
+			}
+		},
+		data() {
+			return {
+                 windowWidth: 0, //屏幕宽度
+				 imageHeight:0 //图片高度
+			};
+		},
+		mounted() {
+			uni.getSystemInfo({
+			    success: res=> {
+					this.windowWidth = res.windowWidth;
+					this.imageHeight = (this.windowWidth*this.elementInfo.height)/this.elementInfo.width;
+			    }
+			});
+		},
+		onLoad() {
+		
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.normal-image {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+
+		image {
+			max-width: 100%;
+			max-height: 100%;
+			object-fit: contain;
+		}
+	}
+</style>

components/NumberScroll/NumberScroll.vue

+<template>
+	<view class="chart-num" :style="{height: `${height}px`,}">
+		<BasicText :elementInfo="elementInfo"></BasicText>
+		<ul class="box-item marginTop20">
+			<li v-for="(item, index) in orderNum" :key="index"
+				:class="{'number-item': !isNaN(item), 'mark-item': isNaN(item)}" :style="{
+		          width: `${elementInfo.option.title.numItemWidth}px`,
+		          height: `${elementInfo.option.title.numItemHeight}px`,
+		          fontSize: `${elementInfo.option.title.numItemFontSize}px`
+		        }">
+				<span v-if="!isNaN(item)"
+					:class="{'hasDividingLine': elementInfo.option.title.dividingLine && !isNaN(item)}"
+					:style="{'background': elementInfo.option.title.backgroundColor}">
+					<!-- 第一个数字为0，不显示 -->
+					<i v-if="item === '0' && index === 0" :class="[numberItemsClass()]" :id="index" :style="{transform:setTransformByIndex(index)}"/>
+					<i v-else :id="index" :class="[numberItemsClass()]" :style="{transform:setTransformByIndex(index)}">0123456789</i>
+				</span>
+				<span v-else class="comma">
+					<!-- 第一个数字为0，不显示逗号 -->
+					<i v-if="orderNum[index - 1] === '0' && index === 1" />
+					<i v-else>{{ item }}</i>
+				</span>
+			</li>
+		</ul>
+	</view>
+</template>
+
+<script>
+	import echartElementData from '@/mixins/echartElementData.js'
+
+	export default {
+		name: "NumberScroll",
+		mixins: [echartElementData],
+		data() {
+			return {
+				orderNum: [],
+				endVal: 100,
+				height: 0 
+			};
+		},
+
+		
+		onReady() {
+			this.getComponentHeight()
+		},
+		
+		methods: {
+			initChart() {
+				this.$nextTick(() => {
+				
+					this.endVal = this.elementData.dataList.endVal
+					this.toOrderNumber(this.endVal)
+				})
+			},
+			
+			// 计算组件高度
+			getComponentHeight() {
+				const {windowWidth} = uni.getSystemInfoSync()
+				this.height = this.elementInfo.height
+				if (this.elementInfo.width > windowWidth) {
+					this.height = this.elementInfo.height / this.elementInfo.width * windowWidth
+				}
+			},
+
+			toOrderNumber(num) {
+				if (!num) return
+				// numDigit代表前面预留几个空格
+				let len = num.toString().length
+				this.orderNum = this.$u.common.toThousands(num).split('')
+				// len < 8,超过8位，前面不预留空格
+				if (this.elementInfo.option.title.numDigit && len < 8) {
+					len = len + this.elementInfo.option.title.numDigit
+					// 手动往前面填充空格
+					let l = this.elementInfo.option.title.numDigit
+					for(let i = 0 ; i < l; i++) {
+						this.orderNum.unshift('0')
+					}
+				}
+			},
+
+			setTransformByIndex(index) {
+				return `translate(-50%, -${this.orderNum[index] * 10}%)`
+			},
+
+			numberItemsClass() {
+				return 'numberItems-' + this.elementInfo.id
+			}
+		},
+	}
+</script>
+
+<style scoped lang="less">
+	.chart-num {
+		width: 100%;
+		overflow-x: hidden;
+	}
+	.box-item {
+		font-family: '微软雅黑';
+		text-align: left;
+		white-space: nowrap;
+	}
+
+	.hasDividingLine {
+		&::before {
+			display: block;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			content: ' ';
+			width: 100%;
+			height: 4%;
+			background: #0c0062;
+		}
+	}
+
+	.number-item {
+		display: inline-block;
+		position: relative;
+		width: 11%;
+		list-style: none;
+		color: #f2a867;
+		margin-right: 6px;
+		border-radius: 4px;
+
+		&>span {
+			position: relative;
+			display: inline-block;
+			margin-right: 10px;
+			width: 100%;
+			height: 100%;
+			writing-mode: vertical-rl;
+			text-orientation: upright;
+			-webkit-text-orientation: upright;
+			overflow: hidden;
+
+			&>i {
+				font-style: normal;
+				position: absolute;
+				top: 5px;
+				left: 50%;
+				transform: translate(-50%, 0);
+				transition: transform 1s ease-in-out;
+				letter-spacing: 10px;
+			}
+		}
+	}
+
+	.number-item:last-child {
+		margin-right: 0;
+	}
+
+	.comma {
+		display: inline-block;
+		color: #fff;
+		font-size: 20px;
+	}
+
+	.mark-item {
+		display: inline-block;
+		margin-right: 6px;
+		width: 5px !important;
+	}
+</style>

pages/index/index.vue

@@ -22,12 +22,18 @@
 			<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
 			<!-- 雷达图 -->
 			<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
+			<!-- 普通数字滚动 -->
+			<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
+			<!-- 数字滚动 -->
+			<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
 			<!-- 普通选项卡 -->
 			<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs>
 			<!-- 文本框 -->
 			<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
 			<!-- 真实时间 -->
 			<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
+			<!-- 普通图片 -->
+			<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
 		</view>
   </view>
 </template>

utils/common.js

@@ -9,8 +9,32 @@ const install = (Vue, vm) => {
 	  return new Function('"use strict";return (' + func + ')')()(data);
 	}
 	
+	/**
+	   * 补足数字位数
+	   * @param digit 数字
+	   * @param len 位数
+	   */
+	const fillDigit = (digit, len) => {
+	  return padStart('' + digit, len, '0')
+	}
+	
+	const toThousands = (value) => {
+	  let result = ''
+	  let num = (parseInt(value) || 0).toString()
+	  while (num.length > 3) {
+	    result = ',' + num.slice(-3) + result
+	    num = num.slice(0, num.length - 3)
+	  }
+	  if (num) {
+	    result = num + result
+	  }
+	  return result
+	}
+	
 	vm.$u.common = {
-		converFunction
+		converFunction,
+		fillDigit,
+		toThousands
 	}
 }