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

components/CountTo/CountTo.vue

@@ -2,7 +2,7 @@
 	<view class="count-to" :style="{height: `${height}px`,}">
         <NormalTitle :elementInfo="elementInfo"></NormalTitle>
 		<!-- warning:count-to的font-size单位为rpx -->
-		<u-count-to :start-val="startVal" :end-val="endVal" separator="," :color="elementInfo.option.countTo.color" :font-size="getFontSize()"></u-count-to>	
+		<u-count-to :start-val="startVal" :end-val="endVal" :duration="duration" separator="," :color="elementInfo.option.countTo.color" :font-size="getFontSize()"></u-count-to>	
 	</view>
 </template>
 
@@ -15,7 +15,8 @@
 			return {
 				startVal: 0,
 				endVal: 0,
-				height: 0
+				height: 0,
+				duration: 2000
 			};
 		},
 	
@@ -28,6 +29,9 @@
 				this.$nextTick(() => {
 					this.startVal = this.endVal
 					this.endVal = this.elementData.dataList.endVal
+					if(this.elementInfo.option.countTo.duration) {
+						this.duration = this.elementInfo.option.countTo.duration * 1000
+					}
 				})
 			},
 			// 计算组件高度

components/NumberScroll/NumberScroll.vue

 <template>
-	<view class="chart-num" :style="{height: `${height}px`,}">
+	<view class="chart-num" :style="{height: `${height}px`,'margin-top': `${elementInfo.option.title.titleMarginTop}px`}">
 		<!-- <BasicText :elementInfo="elementInfo"></BasicText> -->
         <NormalTitle :elementInfo="elementInfo"></NormalTitle>
 		<ul class="box-item marginTop20">

pages.json

@@ -57,14 +57,16 @@
 				"onReachBottomDistance": 50
 			}
 
-		}, {
-			"path": "pages/detail/detail",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": true
-			}
-		}
-	],
+		},{
+            "path" : "pages/details/details",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": true
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uView",

pages/details/details.vue

+<template>
+	<view
+		class="canvas"
+		:style="[styleObject]"
+	>
+		<view class="viewport-wrapper" :style="{
+			width: `${reportInfo.width * scale}px`,
+			height: `${reportInfo.height * scale}px`
+		}">
+			<template v-for="(element, index) in reportData">
+				<view
+					class="view-element"
+					v-if="!element.hide"
+					:key="element.id"
+					:style="{
+						width: `${element.width * scale}px`,
+						height: `${element.height * scale}px`,
+						transform: `translate(${element.left * scale}px, ${element.top * scale}px)`,
+						zIndex: index + 1
+					}"
+				>
+					<!-- 普通柱状图 -->
+					<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
+					<!-- 普通折线图 -->
+					<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
+					<!-- 横向柱状图 -->
+					<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
+					<!-- 折柱图 -->
+					<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
+					<!-- 仪表盘 -->
+					<NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge>
+					<!-- 饼图 -->
+					<NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie>
+					<!-- 中国地图 -->
+					<ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap>
+					<!-- 柱状图混合地图 -->
+					<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>
+					<!-- 普通进度条 -->
+					<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
+					<!-- 普通图片 -->
+					<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
+					<!-- 远程图片 -->
+					<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
+					<!-- 普通表格 -->
+					<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
+				</view>
+			</template>
+		</view>
+  </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				reportInfo: {},
+				reportData: [],
+				timename: null,
+				detailId: ""
+			}
+		},
+		computed: {
+			styleObject() {
+				let params = {}
+				const { backgroundColor, backgroundImage } = this.reportInfo
+				if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` }
+				return {
+					'background-color': backgroundColor,
+					...params
+				}
+			},
+			scale() {
+				const { windowWidth } = uni.getSystemInfoSync()
+				const { width, height } = this.reportInfo
+				return windowWidth / width
+			}
+		}, 
+		onLoad(option) {
+			this.detailId = option.id
+			this.userAuthCheck()
+			this.getReportCharts()
+			/**
+			 * 组件交互 - 参数
+			 */
+			uni.$on('handleLinkParams', ({index, paramName, value}) => {
+				this.handleValueChange(index, paramName, value)
+			})
+			/**
+			 * 组件交互 - 组件
+			 */
+			uni.$on('handleLinkComp', ({ showData, hideData }) => {
+				this.reportData.map(item => {
+					if(showData.includes(item.id)) item.hide = false
+					if(hideData.includes(item.id)) item.hide = true
+					return item
+				})
+			})
+		},  
+		onUnload() {
+			// 移除监听事件
+			uni.$off('handleLinkParams')
+			clearInterval(this.timename)
+		},
+		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)
+					}
+				})
+			},
+			/**
+			 * 获取页面报表配置
+			 */
+			async getReportCharts() {
+				clearInterval(this.timename)
+				let res = await this.$u.api.getReportCharts({id: this.detailId})
+				const { Status, Result: { info, list } } = res.data
+				if (Status === 'true') {
+					if(info.dataUrl) {
+						this.getGlobalData(info)
+						if(info.dataPollingInterval) {
+							this.timename = setInterval(() => {
+								this.getGlobalData(info)
+							}, parseInt(info.dataPollingInterval) * 1000)
+						}
+					}
+					this.reportInfo = info
+					this.reportData = list
+				}
+			},
+			/**
+			 * 获取全局接口数据
+			 */
+			async getGlobalData(info) {
+				const dataUrl = info.dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
+				let res = await this.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
+					custom: { loading: false }
+				})
+				this.$u.vuex('vuex_globalData', JSON.stringify(res.data))
+			},
+			/**
+			 * 组件之间关联
+			 */
+			handleValueChange(index, paramName, value) {
+				if(index.length && paramName && value) {
+					this.reportData.map(item => {
+						const flag = index.includes(item.id)
+						if(flag && item.type === 'BasicText' && item.data.dataType === 'static') {
+							this.$set(item.data.dataList, 'text', value)
+						}
+						if(flag && item.data.dataType === 'dynamic') {
+							if(!item.data.dataFormatter) item.data.dataFormatter = {}
+							this.$set(item.data.dataFormatter, paramName, value)
+						}
+						if(flag && item.data.dataType === 'dataSet') {
+							if(!item.data.dataSetInfo.queryFormatter) item.data.dataSetInfo.queryFormatter = {}
+							this.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
+						}
+						return item
+					})
+				}
+			}
+		},
+		onReachBottom() {
+			
+		},
+		onPullDownRefresh() {
+			this.getReportCharts()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.canvas {
+	position: relative;
+	height: 100%;
+	user-select: none;
+	overflow: auto;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+.viewport-wrapper {
+	position: relative;
+}
+.view-element {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	will-change: transform;
+	user-select: none;
+	cursor: move;
+}
+</style>

pages/reports/reports.vue

@@ -65,7 +65,7 @@
 			
 			// 点击查看
 			onClick(item) {
-				const url = "/pages/detail/detail?id=" + item.id
+				const url = "/pages/details/details?id=" + item.id
 				uni.navigateTo({
 				    url: url
 				})