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

# Conflicts:
#	pages/index/index.vue

components/BasicText/BasicText.vue

 <template>
-	<view>
-		
+	<view class="merquee">
+		<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 {
-				
-			};
+export default {
+	name:"BasicText",
+	props: {
+		elementInfo: {
+			type: Object,
+			required: true
 		}
+	},
+	data() {
+		return {
+			defaultSpeed: 5
+		};
 	}
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+  /* 文字滚动 */
+.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="scss" 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="scss">
+	.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>

mixins/echartElementData.js

@@ -38,7 +38,14 @@ export default {
 		 * 全局数据
 		 */
 		handlePublicData (value) {
-			
+			if (!this.globalData) return
+			const { dataProcessing } = { ...value }
+			if (dataProcessing) {
+				this.elementData.dataList = this.$u.common.converFunction(dataProcessing, JSON.parse(this.globalData))
+			} else {
+				this.elementData.dataList = JSON.parse(this.globalData)
+			}
+			this.initChart()
 		},
 		/**
 		 * 配置数据 - 数据集
@@ -101,6 +108,12 @@ export default {
 			},
 			immediate: true,
 			deep: true
+		},
+		/**
+		 * 全局数据更新监测
+		 */
+		globalData () {
+			if (this.elementInfo.data.dataType === 'public') this.handlePublicData(this.elementInfo.data)
 		}
   }
 }

pages/index/index.vue

@@ -22,6 +22,10 @@
 			<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>
 			<!-- 文本框 -->
@@ -30,6 +34,8 @@
 			<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
             <!-- 普通进度条 -->
             <NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
+			<!-- 普通图片 -->
+			<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
 		</view>
   </view>
 </template>
@@ -39,7 +45,8 @@
 		data() {
 			return {
 				reportInfo: {},
-				reportData: []
+				reportData: [],
+				timer: null
 			}
 		},
 		computed: {
@@ -56,52 +63,68 @@
 		async onLoad() {
 			this.getReportList()
 		},
-        onShow() {
-            this.userAuthCheck()
-        },
+		onShow() {
+				this.userAuthCheck()
+		},
 		methods: {
-            
-            //检查是否登录
-            userAuthCheck() {
-                var userId = uni.getStorageSync('userId')
-                this.getNewestAuthFromServer()
-                var authorized = uni.getStorageSync('authorized')
-                if (userId) {
-                    if (authorized) {
-                        
-                    } else {
-                        uni.reLaunch({
-                            url:'../login/authorized'
-                        })
-                    }
-                } else {
-                    uni.reLaunch({
-                        url: '../login/login'
-                    })
-                }
-                
-            },
-            
-            //获取最新的授权信息
-            getNewestAuthFromServer() {
-                var param = {
-                    id: uni.getStorageSync('userId')
-                }
-                this.$u.api.getAuthorized(param).then(res=>{
-                    const { Status, Result } = res.data
-                    if (Status === 'true') {
-                    	uni.setStorageSync('authorized', Result.authorized)
-                    }
-                })
-            },
-            
+			//检查是否登录
+			userAuthCheck() {
+				var userId = uni.getStorageSync('userId')
+				this.getNewestAuthFromServer()
+				var authorized = uni.getStorageSync('authorized')
+				if (userId) {
+						if (authorized) {
+							
+						} else {
+							uni.reLaunch({
+								url:'../login/authorized'
+							})
+						}
+				} else {
+					uni.reLaunch({
+						url: '../login/login'
+					})
+				}
+			},
+			//获取最新的授权信息
+			getNewestAuthFromServer() {
+				var param = {
+					id: uni.getStorageSync('userId')
+				}
+				this.$u.api.getAuthorized(param).then(res=>{
+					const { Status, Result } = res.data
+					if (Status === 'true') {
+						uni.setStorageSync('authorized', Result.authorized)
+					}
+				})
+			},
+			/**
+			 * 获取页面报表配置
+			 */
 			async getReportList() {
-                let res = await this.$u.api.getReportList({id: '61c424a4c06bff0ce05d9a53'})
-				const { Status, Result } = res.data
+				clearInterval(this.timer)
+				let res = await this.$u.api.getReportList({id: '61c424a4c06bff0ce05d9a53'})
+				const { Status, Result: { info, list } } = res.data
 				if (Status === 'true') {
-					this.reportInfo = Result.info
-					this.reportData = Result.list
+					this.reportInfo = info
+					this.reportData = list
+					if(info.dataUrl) {
+						this.getGlobalData(info)
+						if(info.dataPollingInterval) {
+							this.timer = setInterval(() => {
+								this.getGlobalData(info)
+							}, parseInt(info.dataPollingInterval) * 1000)
+						}
+					}
 				}
+			},
+			/**
+			 * 获取全局接口数据
+			 */
+			async getGlobalData(info) {
+				const dataUrl = info.dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
+				let res = await this.$u[info.dataMethod.toLowerCase()](dataUrl, info.dataFormatter)
+				this.$u.vuex('globalData', JSON.stringify(res.data))
 			}
 		},
 		onReachBottom() {

store/index.js

@@ -12,7 +12,7 @@ try {
 }
 
 // 需要永久存储，且在下次 APP 启动需要取出的，在 state 中的变量名。
-let saveStateKeys = ['vuex_user', 'vuex_token']
+let saveStateKeys = ['vuex_token']
 
 // 保存变量到本地存储中
 const saveLifeData = function(key, value) {
@@ -30,8 +30,8 @@ const saveLifeData = function(key, value) {
 
 const store = new Vuex.Store({
 	state: {
-		vuex_user: lifeData.vuex_user || { name: 'test' },
 		vuex_token: lifeData.vuex_token || '',
+		globalData: ""
 	},
 	mutations: {
 		$uStore(state, payload) {

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
 	}
 }