Browse Source

k线加载状态

milestone-20251031-简版功能开发
ZhangYong 3 weeks ago
parent
commit
c9bccbf1f3
  1. 49
      pages/deepExploration/MainForceActions.vue

49
pages/deepExploration/MainForceActions.vue

@ -36,13 +36,14 @@
<text>{{stockAdd}}</text> <text>{{stockAdd}}</text>
</view> </view>
<view class="graph_content"> <view class="graph_content">
<view class="charts-box">
<view class="loadingGraph" v-show="graphLoading">加载中...</view>
<view class="charts-box" v-show="!graphLoading">
<!-- uCharts 蜡烛图组件 --> <!-- uCharts 蜡烛图组件 -->
<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 @click.stop="showFullscreenKline" 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> </view>
@ -135,6 +136,8 @@
const isLandscape = ref(true); // const isLandscape = ref(true); //
const fullscreenChartKey = ref(0); // const fullscreenChartKey = ref(0); //
const graphLoading = ref(true)
// K线 // K线
@ -245,7 +248,7 @@
// //
const handleModels = async () => { const handleModels = async () => {
try { try {
graphLoading.value = true
if (userInfo.isVisitor) { if (userInfo.isVisitor) {
console.log('是游客'); console.log('是游客');
loginPrompt.value.show() loginPrompt.value.show()
@ -479,6 +482,7 @@
chartData.value = { chartData.value = {
...rawData ...rawData
} }
graphLoading.value = false
chartKey.value++; chartKey.value++;
console.log('chartData', chartData.value); console.log('chartData', chartData.value);
} }
@ -549,7 +553,7 @@
} }
} }
}) })
// //
const fullscreenOpts = ref({ const fullscreenOpts = ref({
...opts.value, // ...opts.value, //
@ -849,6 +853,15 @@
.graph_content { .graph_content {
position: relative; position: relative;
min-height: 500rpx; min-height: 500rpx;
display: flex;
justify-content: center;
align-items: center;
.loadingGraph {
font-size: 35rpx;
color: #6a6a6a;
}
image { image {
position: absolute; position: absolute;
@ -865,20 +878,20 @@
} }
} }
} }
/* 横屏按钮样式 */ /* 横屏按钮样式 */
.rotate-btn { .rotate-btn {
background: transparent; background: transparent;
padding: 0 10rpx; padding: 0 10rpx;
margin-left: 15rpx; margin-left: 15rpx;
.btn-icon { .btn-icon {
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
vertical-align: middle; vertical-align: middle;
} }
} }
/* 全屏遮罩 */ /* 全屏遮罩 */
.fullscreen-mask { .fullscreen-mask {
position: fixed; position: fixed;
@ -892,47 +905,49 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
/* 全屏容器 */ /* 全屏容器 */
.fullscreen-container { .fullscreen-container {
width: 100vh; /* 横屏时宽度等于屏幕高度 */
height: 100vw; /* 横屏时高度等于屏幕宽度 */
width: 100vh;
/* 横屏时宽度等于屏幕高度 */
height: 100vw;
/* 横屏时高度等于屏幕宽度 */
transition: transform 0.3s ease; transition: transform 0.3s ease;
position: relative; position: relative;
} }
/* 关闭按钮 */ /* 关闭按钮 */
.fullscreen-close { .fullscreen-close {
position: absolute; position: absolute;
top: 20rpx; top: 20rpx;
right: 20rpx; right: 20rpx;
z-index: 10; z-index: 10;
image { image {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
} }
/* 旋转按钮 */ /* 旋转按钮 */
.fullscreen-rotate { .fullscreen-rotate {
position: absolute; position: absolute;
top: 20rpx; top: 20rpx;
left: 20rpx; left: 20rpx;
z-index: 10; z-index: 10;
image { image {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
} }
/* 全屏图表容器 */ /* 全屏图表容器 */
.fullscreen-chart { .fullscreen-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* 竖屏模式适配 */ /* 竖屏模式适配 */
:deep(.fullscreen-container:not([style*="rotate(90deg)"])) { :deep(.fullscreen-container:not([style*="rotate(90deg)"])) {
width: 100vw; width: 100vw;

Loading…
Cancel
Save