fix: APPF-3855 小程序报表切横屏优化

components/NormalLine/NormalLine.vue

@@ -63,8 +63,9 @@
 								show: true,
 								icon: svg.enterFull,
 								onclick() {
-									const element = {...that.elementInfo}
-									const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))  
+									const { linkTabsId } = that.elementInfo
+									let url = `/pages/fullscreen/fullscreen?element=${encodeURIComponent(JSON.stringify(that.elementInfo))}`
+									if(linkTabsId) url = `${url}&linkTabsId=${linkTabsId}`
 									uni.navigateTo({
 										url: url
 									})

components/NormalTabs/NormalTabs.vue

@@ -16,7 +16,7 @@
 		<swiper v-if="elementInfo.option.tabs.type === 'group'" class="tab-swiper"
 			:indicator-dots="tabsGroup.length > 1" :style="[tabsStyle]" :indicator-color="'#ccc'"
 			:indicator-active-color="elementInfo.option.tabs.backgroundColor">
-			<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index">
+			<swiper-item :class="[styleType === 'vertical' ? 'tab-vertical' : 'tab-group']" v-for="(item, index) in tabsGroup" :key="index">
 				<view class="tab-item" :class="[tabsValue == tab.value ? 'active' : '']" v-for="tab in item"
 					:key="tab.value" @click="handleChangeTabValue(tab.value)">
 					{{ tab.name }}
@@ -86,7 +86,7 @@
 				} = this.elementInfo.option.tabs
 				return {
 					height: `${this.elementInfo.height}px`,
-					'--width': `${100 / Number(count) - 2}%`,
+					'--width': this.styleType != 'vertical' ? `${100 / Number(count) - 2}%` : '95%',
 					'--font-size': `${fontSize}px`,
 					'--color': color,
 					'--active-color': activeColor,
@@ -222,6 +222,12 @@
 		flex-wrap: wrap;
 		width: 100%;
 	}
+	.tab-vertical {
+		display: flex !important;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
 
 	.tab-item {
 		width: var(--width);

mixins/echartElementData.js

@@ -9,9 +9,13 @@ export default {
   },
   props: {
     elementInfo: {
-			type: Object,
-			required: true
-		}
+      type: Object,
+      required: true
+    },
+    styleType: {
+      type: String,
+      default: ''
+    }
   },
   methods: {
 		setStorageData() {

pages/fullscreen/fullscreen.vue

 <template>
-	<view class="wrapper" :style="[theStyle]">
-		<template>
-			<!-- 普通柱状图 -->
-			<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>
-		</template>
+	<view class="wrapper" :style="[theStyle]">
+		<!-- 普通选项卡 -->
+		<NormalTabs v-if="linkTabsId && Object.keys(tabsElement).length" :elementInfo="tabsElement"  class="tabs-position"></NormalTabs>
+		<!-- 普通柱状图 -->
+		<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>
 	</view>
 </template>
 
@@ -17,7 +17,9 @@
 	export default {
 		data() {
 			return {
-				element: {}
+				element: {},
+				linkTabsId: '',
+				tabsElement: {}
 			}
 		},
 		computed: {
@@ -30,11 +32,32 @@
 			},
 		}, 
 		onLoad(option) {
-			this.element = JSON.parse(decodeURIComponent(option.element))
+			this.element = JSON.parse(decodeURIComponent(option.element))
+			this.linkTabsId = option.linkTabsId
+			if(this.linkTabsId && uni.getStorageSync('reportInfo')) {
+				let info = JSON.parse(uni.getStorageSync('reportInfo'))
+				const data = info.list.find(item => item.id === this.linkTabsId)
+				// data.option.tabs.type = 'vertical'
+				// data.height = uni.getSystemInfoSync().windowHeight
+				data.option.tabs.defaultValue = data.child.data.find(item => item.comp === this.element.id).name
+				this.tabsElement = data
+			}
 			// 去掉全屏的定制按钮
 			const toolbox = {show: false}
 			this.element.option.toolbox = toolbox
-		}, 
+		},
+		onShow() {
+			/**
+			 * 组件交互 - 组件
+			 */
+			uni.$on('handleLinkComp', ({ showData, hideData }) => {
+				let info = JSON.parse(uni.getStorageSync('reportInfo'))
+				this.element = info.list.find(item => showData[0] === item.id)
+				// 去掉全屏的定制按钮
+				const toolbox = {show: false}
+				this.element.option.toolbox = toolbox
+			})
+		}
 	}
 </script>
 
@@ -49,6 +72,20 @@
 	background-position: center;
 	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
 	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
-}
+}
+
+.tabs-layout {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+/* .tabs-position {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 12%;
+	z-index: 999;
+} */
 
 </style>

pages/index/index.vue

@@ -252,7 +252,7 @@
 							}, parseInt(info.dataPollingInterval) * 1000)
 						}
 					}
-					that.reportInfo = res.data.Result
+					that.reportInfo = this.handleTabsLink(res.data.Result)
 					// 清除数据
 					if(uni.getStorageSync('reportInfo')) {
 						let info = JSON.parse(uni.getStorageSync('reportInfo'))
@@ -268,6 +268,20 @@
 					that.getStickyTables()
 				}
 			},
+			/**
+			* tabs 组件处理关联关系
+			*/
+			handleTabsLink(data) {
+				data.list.forEach(item => {
+				  if(item.type === 'NormalTabs' && item.child.data.length) {
+					item.child.data.forEach(child => {
+					  const index = data.list.findIndex(i => i.id === child.comp )
+					  data.list[index].linkTabsId = item.id
+					})
+				  }
+				})
+				return data
+			},
 			/**
 			 * 获取全局接口数据
 			 */