comit

src/views/hzyb/chart/positionAnalysis/Index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {reactive, ref,watch} from 'vue'
+import {reactive, ref,watch,nextTick} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChartBox from './components/ChartBox.vue'
 import moment from 'moment'
@@ -113,6 +113,7 @@ watch(
 
 
 // 获取详情
+let pageLoading=ref(false)
 const chartListState = reactive({
     buy_list:{
         name:'多单',
@@ -132,12 +133,14 @@ const chartListState = reactive({
     }
 })
 async function getInfo(){
+    pageLoading.value=true
     const res=await apiPositionAnalysisInfo({
         data_time:selectDate.value?moment(selectDate.value).format('YYYY-MM-DD'):'',
         classify_name:route.query.classify_name,
         classify_type:route.query.classify_type,
         exchange:route.query.exchange
     })
+    pageLoading.value=false
     if(res.code===200){
         const obj=res.data||{}
         for (let key in chartListState) {
@@ -154,6 +157,25 @@ async function getInfo(){
             chartListState[key].list=null
         }
     }
+    
+    nextTick(()=>{
+        // 获取页面实际高度 传给pc端
+        const pageEl=document.getElementsByClassName('chart-position-analysis-page')
+        window.parent.postMessage({
+            opt:'updateIframeHeight',
+            height:pageEl[0].offsetHeight
+        },"*")
+
+        // 传给pc当前的数据
+        window.parent.postMessage({
+            opt:'updateInfo',
+            data_time:selectDate.value?moment(selectDate.value).format('YYYY-MM-DD'):'',
+            classify_name:route.query.classify_name,
+            classify_type:route.query.classify_type,
+            exchange:route.query.exchange,
+            title:`${route.query.classify_type} ${moment(selectDate.value).format('YYYYMMDD')}持仓`
+        },"*")
+    })
 }
 getInfo()
 
@@ -174,11 +196,29 @@ function handleBackList(){
 }
 
 
+// 监听pc端传来的消息
+window.addEventListener('message',e=>{
+    // 监听选择的日期改变
+    if(e.data.opt=="date"){
+        selectDate.value=e.data.val 
+        getInfo()
+    }else if(e.data.opt==='beforeDate'){
+        handleDateChange('before')
+    }else if(e.data.opt==='nextDate'){
+        handleDateChange('next')
+    }else if(e.data.opt==='beforeClassifyType'){
+        handleClassifyTypeChange('before')
+    }else if(e.data.opt==='nextClassifyType'){
+        handleClassifyTypeChange('next')
+    }
+})
+
+
 </script>
 
 <template>
     <PullRefresh v-model="isRefresh" @refresh="onRefresh">
-    <div class="chart-position-analysis-page">
+    <div class="chart-position-analysis-page" v-if="!pageLoading">
         <div class="top-sticky-wrap">
             <div class="notice-box">如无法滑动，请在左侧空白处尝试</div>
             <div class="action-box">
@@ -321,4 +361,31 @@ function handleBackList(){
     text-align: center;
     padding-top: 300px;
 }
+
+@media (min-width: 400px){
+    .chart-position-analysis-page{
+        padding: 0;
+        .top-sticky-wrap{
+            display: none;
+        }
+        .bot-fixed-wrap{
+            display: none;
+        }
+        .empty-wrap{
+            font-size: 16px;
+        }
+        .chart-wrap{
+            margin-bottom: 60px;
+            .top-info-box{
+                padding: 0 20px 20px;
+                text-align: center;
+                font-size: 20px;
+                span{
+                    display: inline-block;
+                    margin-right: 30px;
+                }
+            }
+        }
+    }
+}
 </style>

src/views/hzyb/chart/positionAnalysis/components/ChartBox.vue

@@ -130,7 +130,7 @@ function chartRender(){
     options.yAxis=yAxis
     options.series=series
     options={...chartDefaultOpts,...options}
-    console.log('渲染',options);
+    // console.log('渲染',options);
     Highcharts.chart(`chart-box-${props.keyVal}`,options)
 }
 
@@ -299,4 +299,28 @@ onMounted(()=>{
         color: #E3B377;
     }
 }
+@media (min-width: 400px){
+    .chart-render-box{
+        .label-box{
+            display: flex;
+            justify-content: center;
+            font-size: 14px;
+            div{
+                margin-right: 20px;
+            }
+            .color-box{
+                display: inline-block;
+                width: 14px;
+                height: 14px;
+                margin-right: 8px;
+                border-radius: 4px;
+                position: relative;
+                top: 2px;
+            }
+        }
+        .chart-content{
+            height: 800px;
+        }
+    }
+}
 </style>