完成预览

src/hooks/chart/render.js

@@ -26,7 +26,8 @@ export function chartRender(data,renderId){
         };
         chartOpt=chartSetMap[data.ChartInfo.ChartType](data)
     }else if(data.ChartInfo.ChartType ===2 ) {
-        chartOpt=setSeasonOpt(data.EdbInfoList[0])
+        chartOpt=setSeasonOpt(data)
+        console.log(chartOpt);
     }else if(data.ChartInfo.ChartType ===7){//奇怪柱形图依赖数据
         chartOpt=initBarData(data);
     }else if(data.ChartInfo.ChartType ===8){//商品价格曲线
@@ -38,8 +39,6 @@ export function chartRender(data,renderId){
     }
     obj={...obj,...chartOpt}
 
-    // console.log(obj);
-
     //stock不支持线形图只支持时间图 某些用chart
     let is_linear = chartOpt.series 
     ? chartOpt.series.every(_ => _.type === 'scatter') || chartOpt.series.some(_ => _.chartType === 'linear')
@@ -290,6 +289,7 @@ function setSplineOpt(e){
 function setSeasonOpt(e){
     let chartData={}
     const data=e.EdbInfoList[0]
+    const calendarType=e.ChartInfo.Calendar||'公历'
 
     const colorsArr=['#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA','#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF']
     let series=[],yAxis=[]
@@ -297,7 +297,7 @@ function setSeasonOpt(e){
     let rangeSelector={}
 
     // 公历
-    if(calendarType.value==='公历'){
+    if(calendarType==='公历'){
         data.DataList.forEach((item,index)=>{
              //预测指标配置
             let predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
@@ -362,7 +362,7 @@ function setSeasonOpt(e){
     }
 
     // 农历
-    if(calendarType.value==='农历'){
+    if(calendarType==='农历'){
         let filterArr=data.DataList.List&&data.DataList.List.slice(1,data.DataList.List.length)||[]
         // console.log('aaa',filterArr);
         filterArr.forEach((item,index)=>{
@@ -458,7 +458,7 @@ function setSeasonOpt(e){
         }
     }
 
-    chartData.chart={ spacing: [30, 8, 2, 8]}
+    chartData.chart={ ...chartDefaultOpts.chart,spacing: [30, 8, 2, 8]}
     chartData.series=series
     chartData.yAxis=yAxis
     chartData.rangeSelector=rangeSelector
@@ -506,7 +506,13 @@ function setSeasonOpt(e){
         xDateFormat: '%m/%d',
     }
 
-    return chartData
+    return {
+        ...chartData,
+        title: {
+		    enabled: true,
+            text:e.ChartInfo.ChartName
+        }
+    }
 }
 
 

src/hooks/common.js

@@ -1,5 +1,15 @@
+import {Base64} from 'js-base64'
+
 
 // 导出静态图片资源
 export function getStaticImg(path){
     return new URL(`../assets/imgs/${path}`, import.meta.url).href
+}
+
+// 获取个人信息
+export function useUserInfo(){
+    const userInfo=localStorage.getItem('userInfo')?JSON.parse(Base64.decode(localStorage.getItem('userInfo'))):null
+    return {
+        userInfo
+    }
 }

src/layouts/Index.vue

@@ -24,7 +24,7 @@ function handleLoginOut(){
 
 <template>
     <div class="layout-wrap">
-        <div class="pad-header-box">
+        <div class="pad-header-box" v-if="!$route.meta.noHead">
             <div></div>
             <van-popover v-model:show="showUserInfo" placement="bottom-end">
                 <div class="userinfo-box_pad" v-if="userInfo">

src/router/ppt.js

@@ -17,5 +17,11 @@ export const pptRoutes=[
         name:"PPTSearch",
         component: () => import("@/views/ppt/Search.vue"),
         meta: { title: "搜索PPT" },
-    }
+    },
+    {
+        path:"/ppt/preview",
+        name:"PPTPreview",
+        component: () => import("@/views/ppt/Preview.vue"),
+        meta: { title: "智能PPT",noHead:true },
+    },
 ]

src/views/Login.vue

@@ -30,7 +30,8 @@ const onSubmit = (values) => {
                 RealName:res.Data.RealName,
                 RoleName:res.Data.RoleName,
                 RoleTypeCode:res.Data.RoleTypeCode,
-                SysRoleTypeCode:res.Data.SysRoleTypeCode
+                SysRoleTypeCode:res.Data.SysRoleTypeCode,
+                AdminId:res.Data.AdminId
             }
             localStorage.setItem('userInfo',Base64.encode(JSON.stringify(userInfo)))
             router.replace('/')

src/views/ppt/Detail.vue

@@ -5,17 +5,24 @@ import { vElementSize } from '@vueuse/components'
 import {apiPPTDetail} from '@/api/ppt'
 import {createPPTContent,getTemplate} from './hooks/createPPTContent'
 import {usePPTPublish} from './hooks/usePPTPublish'
+import {useClassify} from './hooks/useClassify'
+import {useUserInfo} from '@/hooks/common'
+import moment from 'moment';
 
 const route=useRoute()
 
 const pptId=route.query.id
 
-let pptItemDom=null
+const {userInfo} =useUserInfo()
+
+// let pptItemDom=null
 
 // 获取ppt详情
+let PPTInfo=ref(null)
 let conArr=ref([])
 async function getPPTDetail(){
     const res=await apiPPTDetail({PptId:Number(pptId)})
+    PPTInfo.value=res.Data
     conArr.value=createPPTContent(res.Data)
     nextTick(()=>{
         onResize({width:document.getElementsByClassName('ppt-content-wrap')[0].clientWidth})
@@ -39,6 +46,36 @@ function handllePublishPPT(){
 }
 
 
+const {
+    getPPTClassifyData,
+    
+    PPTOptState,
+    handlePPTShare,
+    handleShowPPTCopy,
+    handlePPTDel,
+    handlePPTCopy,
+
+}=useClassify()
+
+getPPTClassifyData()
+
+// 显示更多操作
+function handleShowPPTOpt(){
+    PPTOptState.data={
+        AdminId: PPTInfo.value.AdminId,
+        AdminRealName: PPTInfo.value.AdminRealName,
+        IsSingleShare: PPTInfo.value.IsShare,
+        IsSingleShareBoolean:PPTInfo.value.IsShare?true:false,
+        PptCreateTime: moment(PPTInfo.value.CreateTime).format('YYYY-MM-DD HH:mm:ss'),
+        PptId: PPTInfo.value.PptId,
+        PptxUrl: PPTInfo.value.PptxUrl,
+        Title: PPTInfo.value.Title
+    }
+    PPTOptState.isCommon=userInfo.AdminId!=PPTInfo.value.AdminId?true:false
+    PPTOptState.show=true
+}
+
+
 </script>
 
 <template>
@@ -60,16 +97,72 @@ function handllePublishPPT(){
                 <img src="@/assets/imgs/ppt/icon_action_play.png" alt="">
                 <span>播放</span>
             </div>
-            <div class="item-box">
+            <div class="item-box" @click="handleShowPPTCopy($route.query.id)">
                 <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
                 <span>复制</span>
             </div>
-            <div class="item-box">
+            <div class="item-box" @click="handleShowPPTOpt">
                 <img src="@/assets/imgs/ppt/icon_action_more.png" alt="">
                 <span>更多</span>
             </div>
         </div>
     </div>
+    <!-- ppt编辑弹窗 -->
+    <van-popup 
+        v-model:show="PPTOptState.show" 
+        round
+        position="bottom"
+    >
+        <div class="file-opt-wrap ppt-opt-wrap">
+            <div class="item border top-box">
+                <div class="flex">
+                    <img class="ppt-icon" src="@/assets/imgs/ppt/icon01.png" alt="">
+                    <div >
+                        <div class="title">{{PPTOptState.data.Title}}</div>
+                        <div class="name">
+                            {{PPTOptState.data.AdminRealName}}
+                            {{PPTOptState.data.PptCreateTime.split(' ')[0]}}
+                            创建
+                        </div>
+                    </div>
+                </div>
+                <div class="flex" v-if="!PPTOptState.isCommon">
+                    <span style="margin-right:4px">公开</span>
+                    <van-switch 
+                        size="22px" 
+                        :model-value="PPTOptState.data.IsSingleShareBoolean"
+                        @update:model-value="handlePPTShare"
+                    />
+                </div>
+                
+            </div>
+            <div class="item border blue">
+                <img src="@/assets/imgs/ppt/icon_action_download.png" alt="">
+                <span>下载</span>
+            </div>
+            <div class="item border red" @click="handlePPTDel({back:true})" v-if="!PPTOptState.isCommon">
+                <img src="@/assets/imgs/icon_del.png" alt="">
+                <span>删除</span>
+            </div>
+        </div>
+    </van-popup>
+    <!-- ppt复制弹窗 -->
+    <van-dialog 
+        v-model:show="PPTOptState.showCopy" 
+        title="PPT目录" 
+        show-cancel-button
+        confirmButtonText="保存"
+        @confirm="handlePPTCopy"
+    >
+        <div class="ppt-copy-wrap">
+            <span>选择目录</span>
+            <van-popover :actions="PPTOptState.copyActions" @select="e=>PPTOptState.copySelectData=e">
+                <template #reference>
+                    <span class="select-value-box">{{PPTOptState.copySelectData.GroupName||'请选择目录'}}</span>
+                </template>
+            </van-popover>
+        </div>
+    </van-dialog>
 </template>
 
 <style lang="scss" scoped>
@@ -108,4 +201,63 @@ function handllePublishPPT(){
     }
 
 }
+.file-opt-wrap{
+    .item{
+        padding: 42px;
+        display: flex;
+        align-items: center;
+        img{
+            width: 32px;
+            margin-right: 20px;
+        }
+    }
+    .border{
+        border-bottom: 1px solid $border-color;
+    }
+    .blue{
+        color: $theme-color;
+    }
+    .red{
+        color: $theme-red;
+    }
+}
+.ppt-opt-wrap{
+    .top-box{
+        display: flex;
+        justify-content: space-between;
+        .ppt-icon{
+            width: 80px;
+        }
+        .flex{
+            display: flex;
+            align-items: center;
+            .name{
+                color: #999;
+                font-size: 24px;
+                margin-top: 5px;
+            }
+        }
+    }
+}
+.ppt-copy-wrap{
+    display: flex;
+    align-items: center;
+    padding: 50px 30px;
+    span{
+        flex-shrink: 0;
+        margin-right: 20px;
+    }
+    :deep(.van-popover__wrapper){
+        flex: 1;
+    }
+    .select-value-box{
+        display: block;
+        height: 70px;
+        line-height: 70px;
+        padding: 0 30px;
+        border-radius: 70px;
+        border: 1px solid $border-color;
+        min-width: 150px;
+    }
+}
 </style>

src/views/ppt/Preview.vue

@@ -0,0 +1,175 @@
+<script setup>
+import { ref,nextTick, computed} from 'vue'
+import { useRoute } from "vue-router";
+import {apiPPTDetail} from '@/api/ppt'
+import {createPPTContent,getTemplate} from './hooks/createPPTContent'
+import { useWindowSize } from '@vueuse/core'
+import { Swipe, SwipeItem } from 'vant';
+
+const { width, height } = useWindowSize()
+
+const route=useRoute()
+
+const pptId=route.query.id
+
+// 获取ppt详情
+let conArr=ref([])
+async function getPPTDetail(){
+    const res=await apiPPTDetail({PptId:Number(pptId)})
+    conArr.value=createPPTContent(res.Data)
+}
+getPPTDetail()
+
+// 计算缩放以及位置
+const scale=computed(()=>{
+    if(width.value>height.value){
+        const topNum=(630-height.value)/2
+        const leftNum=(900-width.value)/2
+        return `transform: scale(${height.value/630});top:-${topNum}px;left:-${leftNum}px`
+    }else{
+        const topNum=-(630-height.value)/2
+        const leftNum=(900-width.value)/2
+        return `transform: scale(${width.value/900});top:${topNum}px;left:-${leftNum}px`
+    }
+})
+
+const swipeIns=ref(null)
+let current=ref(0)
+function handleSwipeChange(index){
+    current.value=index
+}
+// 切换swipe到某个
+function handleSwipeTo(index){
+    swipeIns.value.swipeTo(index)
+}
+// 显示操作模块
+let showAction=ref(false)
+let timeIns=null
+function handleShowAction(){
+    if(showAction.value){
+        showAction.value=false
+    }else{
+        showAction.value=true
+        timeIns=setTimeout(() => {
+            showAction.value=false
+            clearTimeout(timeIns)
+        }, 3000);
+    }
+}
+
+</script>
+
+<template>
+    <div class="ppt-preview-page" @click="handleShowAction">
+        <Swipe 
+            ref="swipeIns"
+            class="swipe-wrap" 
+            :show-indicators="false"
+            :loop="false"
+            @change="handleSwipeChange"
+        >
+            <SwipeItem
+                v-for="(item,index) in conArr" 
+                :key="item.id"
+            >
+                <div class="content-item-box" :style="scale">
+                    <component 
+                        :is="getTemplate(item.modelId)" 
+                        :pageData="{...item,pptPageIndex:index}"
+                    />
+                </div>
+            </SwipeItem>
+        </Swipe>
+
+        <div :class="[showAction?'page-action-wrap page-action-wrap_show':'page-action-wrap']">
+            <div class="con-box">
+                <div 
+                    :class="['item',current==index?'active':'']" 
+                    v-for="(item,index) in conArr" 
+                    :key="item.id"
+                    @click="handleSwipeTo(index)"
+                >{{index+1}}</div>
+            </div>
+        </div>
+        <div 
+            :class="[showAction?'back-btn back-btn_show':'back-btn']"
+        >退出播放</div>
+    </div>
+    
+</template>
+
+<style lang="scss" scoped>
+.ppt-preview-page{
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba($color: #000000, $alpha: 1.0);
+    position: relative;
+    .swipe-wrap{
+        width: 100vw;
+        height: 100vh;
+        .content-item-box{
+            width: 900PX;
+            height: 630PX;
+            position: absolute;
+        }
+    }
+
+    .page-action-wrap{
+        width: 100%;
+        position: absolute;
+        z-index: 99;
+        bottom: -100PX;
+        height: 60PX;
+        transition: all .5s;
+        .con-box{
+            display: flex;
+            align-items: center;
+            width: 80%;
+            margin: 0 auto;
+            overflow-x: auto;
+            &::-webkit-scrollbar{
+                width: 0;
+                height: 0;
+            }
+        }
+        .item{
+            background-color: #F2F6FA;
+            color: $theme-color;
+            width: 28PX;
+            height: 28PX;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 25PX;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+        .active{
+            background-color: $theme-color;
+            color: #fff;
+        }
+    }
+    .page-action-wrap_show{
+        bottom: 0px;
+    }
+    .back-btn{
+        position: absolute;
+        right: 34PX;
+        width: 80PX;
+        height: 40PX;
+        line-height: 40PX;
+        text-align: center;
+        background-color: rgba($color: #ccc, $alpha: 0.4);
+        color: #fff;
+        z-index: 99;
+        border-radius: 4PX;
+        top: -80PX;
+        transition: all .5s;
+    }
+    .back-btn_show{
+        top: 20PX;
+    }
+}
+
+
+</style>

src/views/ppt/components/MobileClassifyWrap.vue

@@ -150,7 +150,7 @@ getPPTClassifyData()
                         </div>
                     </div>
                 </div>
-                <div class="flex">
+                <div class="flex" v-if="!PPTOptState.isCommon">
                     <span style="margin-right:4px">公开</span>
                     <van-switch 
                         size="22px" 

src/views/ppt/hooks/useClassify.js

@@ -3,6 +3,7 @@
 import {ref,reactive} from 'vue'
 import { useRouter } from 'vue-router';
 import { showToast,showDialog,Dialog  } from 'vant';
+import {useUserInfo} from '@/hooks/common'
 import {
     apiPPTClassify,
     apiPPTCatalogueCopy,
@@ -13,7 +14,7 @@ import {
     apiPPTCopy
 } from '@/api/ppt'
 
-
+const {userInfo} =useUserInfo()
 
 
 
@@ -113,14 +114,15 @@ export function useClassify(){
         copySelectData:{},//复制选择的目录
         
     })
-    // e ppt的数据   isCommon：true 是否为公共ppt下面的ppt
-    const handleShowPPTOpt=(e,isCommon)=>{
+    // e ppt的数据
+    const handleShowPPTOpt=(e)=>{
         PPTOptState.data=e
-        PPTOptState.isCommon=isCommon||false
+        PPTOptState.isCommon=userInfo.AdminId!=e.AdminId?true:false
         PPTOptState.show=true
     }
     // 删除ppt
-    const handlePPTDel=()=>{
+    // back 则返回上一级
+    const handlePPTDel=({back})=>{
         showDialog({
             title: '提示',
             message: '删除操作不可恢复，若该PPT被共享，则同步删除共享PPT，确认删除吗？',
@@ -129,6 +131,9 @@ export function useClassify(){
             // on close
             apiPPTDel({PptId:PPTOptState.data.PptId}).then(res=>{
                 if(res.Ret===200){
+                    if(back){
+                        router.back()
+                    }
                     getPPTClassifyData()
                     PPTOptState.show=false
                 }
@@ -146,13 +151,18 @@ export function useClassify(){
         }
     }
     // 显示复制ppt选择目录弹窗
-    const handleShowPPTCopy=()=>{
+    // 如果是详情页中调用则会传一个pptid
+    const handleShowPPTCopy=(pptid)=>{
         PPTOptState.copyActions=classifyState.privateList.map(item=>{
             return {
                 text:item.GroupName,
                 ...item
             }
         })
+        console.log(pptid);
+        if(pptid){
+            PPTOptState.data.PptId=Number(pptid)
+        }
         PPTOptState.showCopy=true
     }
     // 保存 复制ppt
@@ -167,6 +177,7 @@ export function useClassify(){
             GroupId:PPTOptState.copySelectData.GroupId
         }).then(res=>{
             if(res.Ret===200){
+                showToast('复制成功');
                 getPPTClassifyData()
                 PPTOptState.showCopy=false
             }