横屏适配

pages/deepExploration/MainForceActions.vue

@@ -41,7 +41,30 @@
 							<qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true"
 								:ontouch="true" :onzoom="true" :key="chartKey" />
 						</view>
-						<image  src="/static/deepExploration-images/kLineAll.png" mode="aspectFill"></image>
+						<image @click.stop="showFullscreenKline" src="/static/deepExploration-images/kLineAll.png"
+							mode="aspectFill"></image>
+					</view>
+				</view>
+
+
+				<!-- 全屏横屏弹窗 -->
+				<view class="fullscreen-mask" v-if="isFullscreen" @click="closeFullscreen">
+					<view class="fullscreen-container" :style="{ transform: isLandscape ? 'rotate(90deg)' : '' }">
+						<!-- 关闭按钮 -->
+						<view class="fullscreen-close" @click.stop="closeFullscreen">
+							<image src="/static/icons/close.png" mode="widthFix"></image>
+						</view>
+
+						<!-- 横屏切换按钮 -->
+						<view class="fullscreen-rotate" @click.stop="toggleOrientation">
+							<image src="/static/icons/rotate.png" mode="widthFix"></image>
+						</view>
+
+						<!-- 全屏K线图 -->
+						<view class="fullscreen-chart">
+							<qiun-data-charts type="candle" :opts="fullscreenOpts" :chartData="chartData"
+								:key="fullscreenChartKey" />
+						</view>
 					</view>
 				</view>
 				<view class="txt">
@@ -107,6 +130,37 @@
 	//登录弹窗提示ref
 	const loginPrompt = ref(null)
 
+	// 全屏相关状态
+	const isFullscreen = ref(false); // 是否显示全屏弹窗
+	const isLandscape = ref(true); // 是否横屏模式
+	const fullscreenChartKey = ref(0); // 全屏图表重绘标识
+
+
+
+	// 显示全屏K线
+	const showFullscreenKline = () => {
+		isFullscreen.value = true;
+		isLandscape.value = true; // 默认横屏
+		// 强制重绘图表
+		setTimeout(() => {
+			fullscreenChartKey.value++;
+		}, 100);
+	};
+
+	// 关闭全屏
+	const closeFullscreen = () => {
+		isFullscreen.value = false;
+	};
+
+	// 切换横竖屏
+	const toggleOrientation = () => {
+		isLandscape.value = !isLandscape.value;
+		// 旋转后重绘图表
+		setTimeout(() => {
+			fullscreenChartKey.value++;
+		}, 300);
+	};
+
 	// 响应式变量定义
 	const type = ref('deepExploration')
 	const iSMT = ref(0)
@@ -495,6 +549,28 @@
 		}
 	})
 	
+	// 全屏图表配置（继承原有配置并优化）
+	const fullscreenOpts = ref({
+		...opts.value, // 复用原有配置
+		padding: [30, 30, 30, 30],
+		xAxis: {
+			...opts.value.xAxis,
+			labelCount: 8, // 横屏显示更多标签
+			fontSize: 12
+		},
+		yAxis: {
+			...opts.value.yAxis,
+			fontSize: 12
+		},
+		extra: {
+			...opts.value.extra,
+			candle: {
+				...opts.value.extra.candle,
+				width: 12 // 横屏时K线宽度增加
+			}
+		}
+	});
+
 	// 2. K线图数据（响应式定义）
 	const chartData = ref({
 		categories: [],
@@ -548,6 +624,7 @@
 	let unwatch = null;
 	// 生命周期钩子：组件挂载后执行（替代onReady）
 	onMounted(async () => {
+
 		iSMT.value = uni.getSystemInfoSync().statusBarHeight
 		getUserInfo()
 		await handleModels()
@@ -571,7 +648,8 @@
 
 				//k线
 				if (historyData.value.stockData.chartData.categories.length > 1) { // 确保至少保留一个日期
-					historyData.value.stockData.chartData.categories[historyData.value.stockData.chartData.categories.length - 1] = ''; // 删除最后一个日期
+					historyData.value.stockData.chartData.categories[historyData.value.stockData.chartData
+						.categories.length - 1] = ''; // 删除最后一个日期
 				}
 				chartData.value = {
 					...JSON.parse(JSON.stringify(historyData.value.stockData.chartData))
@@ -787,6 +865,79 @@
 					}
 				}
 				
+				/* 横屏按钮样式 */
+				.rotate-btn {
+					background: transparent;
+					padding: 0 10rpx;
+					margin-left: 15rpx;
+					
+					.btn-icon {
+						width: 36rpx;
+						height: 36rpx;
+						vertical-align: middle;
+					}
+				}
+				
+				/* 全屏遮罩 */
+				.fullscreen-mask {
+					position: fixed;
+					top: 0;
+					left: 0;
+					width: 100vw;
+					height: 100vh;
+					background-color: #000;
+					z-index: 9999;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+				
+				/* 全屏容器 */
+				.fullscreen-container {
+					width: 100vh;  /* 横屏时宽度等于屏幕高度 */
+					height: 100vw; /* 横屏时高度等于屏幕宽度 */
+					transition: transform 0.3s ease;
+					position: relative;
+				}
+				
+				/* 关闭按钮 */
+				.fullscreen-close {
+					position: absolute;
+					top: 20rpx;
+					right: 20rpx;
+					z-index: 10;
+					
+					image {
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+				
+				/* 旋转按钮 */
+				.fullscreen-rotate {
+					position: absolute;
+					top: 20rpx;
+					left: 20rpx;
+					z-index: 10;
+					
+					image {
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+				
+				/* 全屏图表容器 */
+				.fullscreen-chart {
+					width: 100%;
+					height: 100%;
+				}
+				
+				/* 竖屏模式适配 */
+				:deep(.fullscreen-container:not([style*="rotate(90deg)"])) {
+					width: 100vw;
+					height: 100vh;
+				}
+
 				.txt {
 					background-color: #F3F3F3;
 					margin-top: 48rpx;