Browse Source

处理完详情页缩放问题

jwyu 2 years ago
parent
commit
36badc7175
2 changed files with 25 additions and 19 deletions
  1. 10 10
      src/hooks/chart/render.js
  2. 15 9
      src/views/ppt/Detail.vue

+ 10 - 10
src/hooks/chart/render.js

@@ -38,7 +38,7 @@ export function chartRender(data,renderId){
     }
     obj={...obj,...chartOpt}
 
-    console.log(obj);
+    // console.log(obj);
 
     //stock不支持线形图只支持时间图 某些用chart
     let is_linear = chartOpt.series 
@@ -79,12 +79,12 @@ function getSeasonPredictParams (timestamp){
 function xTimeDiffer(minTime,maxTime){
     //年限差
     let year_differ=moment(maxTime).diff(moment(minTime),'years',true)
-    console.log('年限差',year_differ)
+    // console.log('年限差',year_differ)
     if (year_differ<=1) {
-        console.log('true');
+        // console.log('true');
         return true;
     } else {
-        console.log('false');
+        // console.log('false');
         return false;
     }
 }
@@ -364,7 +364,7 @@ function setSeasonOpt(e){
     // 农历
     if(calendarType.value==='农历'){
         let filterArr=data.DataList.List&&data.DataList.List.slice(1,data.DataList.List.length)||[]
-        console.log('aaa',filterArr);
+        // console.log('aaa',filterArr);
         filterArr.forEach((item,index)=>{
              //预测指标配置
             let predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
@@ -825,7 +825,7 @@ function setBarChart (){
     }
 
     const { leftMin,leftMax } = axisLimitData;
-    console.log(leftMin,leftMax)
+    // console.log(leftMin,leftMax)
     //y轴
     let yAxis = {
         ...basicYAxis,
@@ -882,7 +882,7 @@ function initBarData(data){
     const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
 
     let xData = XEdbIdValue.map(_ => EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName)
-    console.log(xData)
+    // console.log(xData)
 
     barDateList.value = YDataList;
     barXData.value = xData;
@@ -984,7 +984,7 @@ const setCommodityChart = (leftMin,leftMax) => {
         },
         shared: true
     }
-    console.log(seriesData);
+    // console.log(seriesData);
     return {
         title: {
             text:''
@@ -1001,8 +1001,8 @@ function filterInvalidData(item){
 
     let first_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[0]);
     let last_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[validateArr.length-1]);
-    console.log('first_index',first_index)
-    console.log('last_index',last_index)
+    // console.log('first_index',first_index)
+    // console.log('last_index',last_index)
 
     let arr = item.Value.map((item,index) => {
     if(index < first_index || index > last_index) {

+ 15 - 9
src/views/ppt/Detail.vue

@@ -1,31 +1,33 @@
 <script setup>
-import {computed, ref} from 'vue'
+import {computed, ref,nextTick} from 'vue'
 import { useRoute } from "vue-router";
 import { vElementSize } from '@vueuse/components'
-import { useThrottleFn } from '@vueuse/core'
 import {apiPPTDetail} from '@/api/ppt'
 import {createPPTContent,getTemplate} from './hooks/createPPTContent'
 
 const route=useRoute()
 
 const pptId=route.query.id
+
+let pptItemDom=null
+
 // 获取ppt详情
 let conArr=ref([])
 async function getPPTDetail(){
     const res=await apiPPTDetail({PptId:Number(pptId)})
     conArr.value=createPPTContent(res.Data)
+    nextTick(()=>{
+        onResize({width:document.getElementsByClassName('ppt-detail-page')[0].clientWidth})
+    })
 }
 getPPTDetail()
 
-// 监听页面尺寸变化 缩放每页ppt
+// 监听页面尺寸变化缩放页面
 function onResize({width}){
-    updatePPTSize(width)
+    const scale=width/1000
+    const el=document.getElementsByClassName('ppt-detail-page')[0]
+    el.style.transform=`scale(${scale})`
 }
-const updatePPTSize=useThrottleFn((width)=>{
-    console.log(width);
-    
-},1000)
-
 
 
 </script>
@@ -44,5 +46,9 @@ const updatePPTSize=useThrottleFn((width)=>{
 <style lang="scss" scoped>
 .ppt-detail-page{
     width: 100%;
+    position: absolute;
+    transform-origin: 0 0;
+    // overflow-x: auto;
+    // transform: scale();
 }
 </style>