fix: APPF-3855 小程序报表切横屏样式修改

components/LineMixBar/LineMixBar.vue

@@ -77,12 +77,13 @@
 							myFull: {
 								show: true,
 								icon: svg.enterFull,
-								onclick() {
-									const element = {...that.elementInfo}
-									const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))  
-									uni.navigateTo({
-										url: url
-									})
+								onclick() {
+									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/NormalBar/NormalBar.vue

@@ -63,12 +63,13 @@
 							myFull: {
 								show: true,
 								icon: svg.enterFull,
-								onclick() {
-									const element = {...that.elementInfo}
-									const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))  
-									uni.navigateTo({
-										url: url
-									})
+								onclick() {
+									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
+									})
 								}
 							}
 						}

pages/fullscreen/fullscreen.vue

 <template>
-	<view class="wrapper" :style="[theStyle]">
+	<view class="wrapper" :class="{'tabs-layout': showTabs}">
 		<!-- 普通选项卡 -->
-		<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>
+		<NormalTabs v-if="showTabs" :elementInfo="tabsElement" styleType="vertical" style="width: 15%;"></NormalTabs>
+		<view :style="{height: `${theStyle.height}px`, width: `${theStyle.width}px`}">
+			<!-- 普通柱状图 -->
+			<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>
+		
 	</view>
 </template>
 
@@ -23,11 +26,15 @@
 			}
 		},
 		computed: {
+			showTabs() {
+				return this.linkTabsId && Object.keys(this.tabsElement).length
+			},
 			theStyle() {
-				const { windowWidth, windowHeight } = uni.getSystemInfoSync()
+				const { windowWidth,  windowHeight, screenHeight, safeArea } = uni.getSystemInfoSync()
+				const reduceBottom = screenHeight - safeArea.bottom
 				return {
-					'height': `${windowHeight}px`,
-					'width': `${windowWidth}px`,
+					height: windowHeight - reduceBottom,
+					width: this.showTabs ? windowWidth * 0.85 : windowWidth
 				}
 			},
 		}, 
@@ -37,8 +44,7 @@
 			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.height = this.theStyle.height
 				data.option.tabs.defaultValue = data.child.data.find(item => item.comp === this.element.id).name
 				this.tabsElement = data
 			}
@@ -52,21 +58,24 @@
 			 */
 			uni.$on('handleLinkComp', ({ showData, hideData }) => {
 				let info = JSON.parse(uni.getStorageSync('reportInfo'))
-				this.element = info.list.find(item => showData[0] === item.id)
+				const data = info.list.find(item => showData[0] === item.id)
+				data.hide = false
 				// 去掉全屏的定制按钮
-				const toolbox = {show: false}
-				this.element.option.toolbox = toolbox
+				data.option.toolbox = { show: false }
+				this.element = data
 			})
 		}
 	}
 </script>
 
 <style>
+	page {
+		height: 100%;
+	}
 .wrapper {
 	position: relative;
 	width: 100%;
 	user-select: none;
-	// overflow: auto;
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
@@ -78,14 +87,6 @@
 	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

@@ -319,6 +319,7 @@
 						}
 						return item
 					})
+					uni.setStorageSync('reportInfo', JSON.stringify(that.reportInfo))
 				}
 			},
 			getStickyTables() {