Browse Source

Merge branch 'refs/heads/milestone-20251031-简版功能开发' into lihuilin/feature-20251024095243-我的

lihuilin/feature-20251024095243-我的
lihui 3 weeks ago
parent
commit
e1c0f1f8e6
  1. 163
      pages/deepExploration/MainForceActions.vue

163
pages/deepExploration/MainForceActions.vue

@ -41,7 +41,30 @@
<qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true" <qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true"
:ontouch="true" :onzoom="true" :key="chartKey" /> :ontouch="true" :onzoom="true" :key="chartKey" />
</view> </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> </view>
<view class="txt"> <view class="txt">
@ -107,6 +130,37 @@
//ref //ref
const loginPrompt = ref(null) 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 type = ref('deepExploration')
const iSMT = ref(0) const iSMT = ref(0)
@ -494,6 +548,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线 // 2. K线
const chartData = ref({ const chartData = ref({
@ -548,6 +624,7 @@
let unwatch = null; let unwatch = null;
// onReady // onReady
onMounted(async () => { onMounted(async () => {
iSMT.value = uni.getSystemInfoSync().statusBarHeight iSMT.value = uni.getSystemInfoSync().statusBarHeight
getUserInfo() getUserInfo()
await handleModels() await handleModels()
@ -571,7 +648,8 @@
//k线 //k线
if (historyData.value.stockData.chartData.categories.length > 1) { // 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 = { chartData.value = {
...JSON.parse(JSON.stringify(historyData.value.stockData.chartData)) ...JSON.parse(JSON.stringify(historyData.value.stockData.chartData))
@ -585,7 +663,7 @@
stockChange.value = historyData.value.stockData.StockInformation.Zhang || '5.120%' stockChange.value = historyData.value.stockData.StockInformation.Zhang || '5.120%'
stockAdd.value = historyData.value.stockData.StockInformation.ZhangFu || '22.410' stockAdd.value = historyData.value.stockData.StockInformation.ZhangFu || '22.410'
stockPrice.value = historyData.value.stockData.StockInformation.Price || '435.900' stockPrice.value = historyData.value.stockData.StockInformation.Price || '435.900'
currentIndex.value = historyData.value.model-1
currentIndex.value = historyData.value.model - 1
}, { }, {
deep: true, deep: true,
immediate: true immediate: true
@ -597,7 +675,7 @@
// //
onLoad((e) => { onLoad((e) => {
if (e.index) { if (e.index) {
// currentIndex.value = e.index - 1
currentIndex.value = e.index - 1
console.log('模块:', currentIndex.value) console.log('模块:', currentIndex.value)
} }
if (e.stockName) { if (e.stockName) {
@ -770,8 +848,8 @@
.graph_content { .graph_content {
position: relative; position: relative;
min-height: 500rpx; min-height: 500rpx;
image{
image {
position: absolute; position: absolute;
bottom: 20rpx; bottom: 20rpx;
right: 30rpx; right: 30rpx;
@ -786,6 +864,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 { .txt {
background-color: #F3F3F3; background-color: #F3F3F3;

Loading…
Cancel
Save