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

components/LineMixBar/LineMixBar.vue

@@ -78,8 +78,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/NormalBar/NormalBar.vue

@@ -64,8 +64,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
 									})

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>
+		<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>
 			<!-- 普通折线图 -->
@@ -11,6 +12,8 @@
 			<!-- 折柱图 -->
 			<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
 		</view>
+		
+	</view>
 </template>
 
 <script>
@@ -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;
@@ -80,12 +89,4 @@
 	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() {