出版完成

src/api/myETA.js

@@ -108,4 +108,14 @@ export function apiChartAddToClassify(params){
  */
 export function apiChartDel(params){
     return post('/datamanage/chart_classify/delete',params)
+}
+
+/**
+ * myETA搜索我的图库数据
+ * @param Keyword
+ * @param CurrentIndex
+ * @param PageSize
+ */
+export function apiMyETAChartSearch(params){
+    return get('/my_chart/search_by_es',params)
 }

src/assets/styles/common.scss

@@ -60,6 +60,11 @@ img {
     display: block;
     margin: 0 auto;
 }
+@media screen and (min-width:650px){
+    .list-empty-img{
+        width: 300px;
+    }
+}
 
 // 全局公共弹窗
 .global-pop-wrap_mobile{

src/layouts/Index.vue

@@ -90,6 +90,9 @@ function handleLoginOut(){
 </style>
 
 <style lang="scss" scoped>
+.layout-wrap{
+    overflow:visible;
+}
 .pad-header-box{
     display: none;
 }

src/views/myETA/ChartDetail.vue

@@ -17,6 +17,9 @@ import moment from 'moment'
 import { showToast,showDialog} from 'vant'
 import ChartSaveOther from './components/ChartSaveOther.vue'
 import _ from 'lodash';
+import { useWindowSize } from '@vueuse/core'
+
+const { width, height } = useWindowSize()
 
 const {options,axisLimitState,chartRender}=useChartRender()
 
@@ -374,6 +377,10 @@ async function handleConfirmCopy(){
 
 // 移除图表
 function handleRemoveChart(){
+    if(!route.query.cid){
+        showToast('当前图表所属多个分类，请选中具体分类移出')
+        return
+    }
     showDialog({
         title: '提示',
         message: '是否确认移出？',
@@ -434,6 +441,44 @@ let showSaveChartOther=ref(false)
             <van-icon class="right-icon" name="arrow" />
         </div>
 
+        <!-- pad端时间和操作按钮模块 -->
+        <div class="pad-time-action-wrap">
+            <div class="left-time-box">
+                <template v-if="sameOptionType.includes(chartInfo.ChartType)">
+                    <span :class="['item',chartState.yearVal==''?'active':'']" @click="handleYearChange({value:''})">全部</span>
+                    <span 
+                        :class="['item',chartState.yearVal==item.value?'active':'']"
+                        v-for="item in yearSelectOpt" 
+                        :key="item.value"
+                        @click="handleYearChange(item)"
+                    >{{item.name}}</span>
+                </template>
+                <span 
+                    class="time-box" 
+                    v-if="sameOptionType.includes(chartInfo.ChartType)||chartInfo.ChartType===2"
+                    @click="chartState.showTimePop=true"
+                >请选择时间段</span>
+            </div>
+            <div class="right-action-box">
+                <div class="item red" @click.stop="handleRemoveChart" v-if="$route.query.iscommon!='true'">
+                    <img src="@/assets/imgs/myETA/icon_remove2.png" alt="">
+                    <span>移出</span>
+                </div>
+                <div class="item" @click.stop="handleShowCopyTo" v-if="$route.query.iscommon!='true'">
+                    <img src="@/assets/imgs/myETA/icon_copy2.png" alt="">
+                    <span>复制到</span>
+                </div>
+                <div class="item" @click.stop="showSaveChartOther=true">
+                    <img src="@/assets/imgs/myETA/icon_save2.png" alt="">
+                    <span>另存为</span>
+                </div>
+                <div class="item red" @click.stop="handleDeleteChart">
+                    <img src="@/assets/imgs/icon_del.png" alt="">
+                    <span>删除</span>
+                </div>
+            </div>
+        </div>
+
         <div class="chart-box" id="chart-box"></div>
 
         <!-- 一般曲线图选择时间区间 -->
@@ -461,13 +506,16 @@ let showSaveChartOther=ref(false)
         <!-- 指标模块 -->
         <div class="edb-list-box">
             <div class="list-lable">指标信息</div>
-            <van-cell 
-                :title="item.EdbName" 
-                :is-link="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5"
-                v-for="item in edbList" 
-                :key="item.EdbInfoId" 
-                @click="handleShowEDBInfo(item)"
-            />
+            <div class="list-box">
+                <van-cell 
+                    :title="item.EdbName" 
+                    :is-link="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5"
+                    v-for="item in edbList" 
+                    :key="item.EdbInfoId" 
+                    @click="handleShowEDBInfo(item)"
+                />
+            </div>
+            
         </div>
 
         <!-- 底部悬浮操作模块 -->
@@ -494,7 +542,7 @@ let showSaveChartOther=ref(false)
     <!-- 选择日期弹窗 -->
     <van-popup 
         v-model:show="chartState.showTimePop"
-        position="bottom"
+        :position="width>650?'center':'bottom'"
     >
         <div class="time-picker-wrap">
             <van-picker-group
@@ -522,9 +570,10 @@ let showSaveChartOther=ref(false)
     <!-- 指标信息弹窗 -->
     <van-popup 
         v-model:show="showEDB"
-        position="bottom"
+        :position="width>650?'right':'bottom'"
         round
         closeable
+        :style="width>650?{ width: '400px', height: '100%' }:''"
     >
         <EDBInfo
             :show="showEDB"
@@ -631,7 +680,7 @@ let showSaveChartOther=ref(false)
         round
     >
         <div class="more-action-wrap">
-            <div class="item" @click.stop="handleShowCopyTo">
+            <div class="item" @click.stop="handleShowCopyTo" v-if="$route.query.iscommon!='true'">
                 <img src="@/assets/imgs/myETA/icon_copy.png" alt="">
                 <span>复制到</span>
             </div>
@@ -639,7 +688,7 @@ let showSaveChartOther=ref(false)
                 <img src="@/assets/imgs/myETA/icon_save.png" alt="">
                 <span>另存为</span>
             </div>
-            <div class="item" @click.stop="handleRemoveChart">
+            <div class="item" @click.stop="handleRemoveChart" v-if="$route.query.iscommon!='true'">
                 <img src="@/assets/imgs/myETA/icon_remove.png" alt="">
                 <span>移出</span>
             </div>
@@ -653,7 +702,7 @@ let showSaveChartOther=ref(false)
     <!-- 复制到 -->
     <van-popup 
         v-model:show="showCopyTo"
-        position="bottom"
+        :position="width>650?'center':'bottom'"
         round
         closeable
     >
@@ -698,6 +747,10 @@ let showSaveChartOther=ref(false)
         height: 700px;
     }
 
+    .pad-time-action-wrap{
+        display: none;
+    }
+
     .select-time-box{
         display: flex;
         align-items: center;
@@ -924,4 +977,128 @@ let showSaveChartOther=ref(false)
         }
     }
 }
+
+@media screen and (min-width:$media-width){
+    .chart-detail-page{
+        padding: 30px;
+        .chart-title{
+            font-size: 16px;
+            margin-bottom: 30px;
+        }
+        .chart-box{
+            height: 370px;
+        }
+        .select-time-box{
+            display: none;
+        }
+        .select-year-box{
+            display: none;
+        }
+
+        .edb-list-box{
+            position: relative;
+            left: -30px;
+            border-top: 1px solid $border-color;
+            width: 100vw;
+            padding: 0 30px;
+            .list-lable{
+                margin-top: 20px;
+                font-size: 16px;
+                margin-bottom: 14px;
+            }
+            :deep(.van-cell){
+                font-size: 14px;
+                padding: 10px 20px;
+            }
+            .list-box{
+                border: 1px solid $border-color;
+            }
+        }
+        .fix-bot-action-box{
+            display: none;
+        }
+
+        .pad-time-action-wrap{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+            .left-time-box{
+                flex-shrink: 0;
+                margin-bottom: 20px;
+                .item{
+                    display: inline-block;
+                    width: 80px;
+                    height: 36px;
+                    text-align: center;
+                    line-height: 36px;
+                    border: 1px solid $theme-color;
+                    margin-right: 10px;
+                    border-radius: 3px;
+                    &.active{
+                        color: #fff;
+                        background-color: $theme-color;
+                    }
+                }
+                .time-box{
+                    display: inline-block;
+                    padding: 0 15px;
+                    height: 36px;
+                    line-height: 36px;
+                    border: 1px solid $theme-color;
+                    border-radius: 3px;
+                    background-color: #F2F3FF;
+                    color: $theme-color;
+                }
+            }
+            .right-action-box{
+                display: flex;
+                margin-bottom: 20px;
+                .item{
+                    display: flex;
+                    color: $theme-color;
+                    margin-left: 20px;
+                    img{
+                        width: 18px;
+                        height: 18px;
+                        margin-right: 4px;
+                    }
+                }
+                .red{
+                    color: $theme-red;
+                }
+            }
+        }
+    }
+    .chart-copyto-wrap{
+        width: 375px;
+        .head-box{
+            .title{
+                font-size: 18px;
+                line-height: 50px;
+                padding-left: 16px;
+            }
+        }
+        .bot-btn-box{
+            font-size: 16px;
+            line-height: 56px;
+            border-top-width: 8px;
+        }
+        .content{
+            max-height: 500px;
+            overflow-y: auto;
+            .item{
+                padding: 16px;
+                font-size: 16px;
+                &.active{
+                    &::after{
+                        width: 18px;
+                        height: 18px;
+                        right: 16px;
+                    }
+                }
+            }
+        }
+    }
+}
 </style>

src/views/myETA/ChartList.vue

@@ -11,7 +11,6 @@ document.title=route.query.cname
 
 const isCommon=ref(route.query.iscommon=='true'?true:false)
 const cid=ref(route.query.cid||0)
-const keyword=ref('')
 const listState = reactive({
     list:[],
     page:0,
@@ -68,7 +67,8 @@ function goChartDetail(item){
         path:"/myETA/chartdetail",
         query:{
             code:item.UniqueCode,
-            cid:cid.value
+            cid:cid.value,
+            iscommon:isCommon.value
         }
     })
 }
@@ -77,13 +77,6 @@ function goChartDetail(item){
 
 <template>
     <div class="chart-list-page">
-        <div class="search-box">
-            <van-search 
-                shape="round"
-                placeholder="请输入图表名称"
-                v-model="keyword"
-            />
-        </div>
         <van-list
             v-model:loading="listState.loading"
             :finished="listState.finished"

src/views/myETA/ChooseChart.vue

@@ -5,6 +5,8 @@ import {apiFutureSearchChartList} from '@/api/futureChart'
 import {apiCorrelationChartList} from '@/api/correlationChart'
 import {apiMyClassifyList,apiMyChartAdd,apiAddClassify} from '@/api/myETA'
 import { showToast } from 'vant';
+import { useWindowSize } from '@vueuse/core'
+const { width, height } = useWindowSize()
 
 const keyword=ref('')
 
@@ -214,6 +216,10 @@ async function handleConfirmEditClassify(){
                 <div>
                     <span class="time">{{item.ModifyTime.substr(0,10)}}</span>
                     <img class="add-icon" src="@/assets/imgs/icon01.png" alt="" @click="handleAdd(item)">
+                    <div class="pad-add-box" @click="handleAdd(item)">
+                        <img src="@/assets/imgs/myETA/icon_add.png" alt="">
+                        <span>加入我的图库</span>
+                    </div>
                 </div>
             </li>
         </ul>
@@ -224,7 +230,7 @@ async function handleConfirmEditClassify(){
     <!-- 选择分类弹窗 -->
     <van-popup 
         v-model:show="showSelect" 
-        position="bottom"
+        :position="width>650?'center':'bottom'"
         round
         closeable
     >
@@ -332,6 +338,9 @@ async function handleConfirmEditClassify(){
             width: 36px;
             height: 36px;
         }
+        .pad-add-box{
+            display: none;
+        }
     }
 }
 .select-classify-wrap{
@@ -397,4 +406,125 @@ async function handleConfirmEditClassify(){
         width: 150px;
     }
 }
+
+@media screen and (min-width:$media-width){
+    .sticky-box{
+        padding: 30px;
+        top: 60px;
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        justify-content: space-between;
+    }
+    .type-box{
+        flex-shrink: 0;
+        box-shadow: none;
+        padding: 0;
+        .opt{
+            margin-right: 20px;
+            padding: 8px 24px;
+            color: $theme-color;
+            border: 1px solid $theme-color;
+            border-radius: 3px;
+            &.active{
+                color: #fff;
+                background-color: $theme-color;
+                &::after{
+                    display: none;
+                }
+            }
+        }
+    }
+    .search-box{
+        flex: 1;
+        max-width: 500px;
+    }
+    .only-me-box{
+        padding: 10px 30px;
+        margin-top: -30px;
+        position: sticky;
+        top: 146px;
+        z-index: 100;
+        background-color: #fff;
+    }
+    .list-wrap{
+        padding: 10px 30px;
+        justify-content: flex-start;
+        .item{
+            padding: 15px;
+            width: 260px;
+            margin: 10px;
+            .name{
+                min-height: 36px;
+            }
+            .img{
+                height: 158px;
+                margin: 10px 0;
+            }
+            .time{
+                font-size: 14px;
+            }
+            .add-icon{
+                display: none;
+            }
+            .pad-add-box{
+                display: flex;
+                align-items: center;
+                position: absolute;
+                bottom: 15px;
+                right: 15px;
+                font-size: 14px;
+                color: $theme-color;
+                img{
+                    width: 18px;
+                    height: 18px;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+    .select-classify-wrap{
+        width: 375px;
+        max-width: 500px;
+        .top-box{
+            padding: 20px 0;
+            border-bottom: 1px solid $border-color;
+            .title{
+                font-size: 18px;
+            }
+            .add-btn{
+                left: 16px;
+            }
+        }
+        .classify-list{
+            &::-webkit-scrollbar{
+                display: none;
+            }
+            .item{
+                padding: 16px;
+                border-bottom: 1px solid $border-color;
+            }
+            .active{
+                &::after{
+                    width: 18px;
+                    height: 18px;
+                    right: 16px;
+                }
+            }
+        }
+        .confirm-btn{
+            width: calc(100% - 2*$page-padding);
+            margin: 20px auto;
+        }
+    }
+    .rename-wrap{
+        padding: 50px 30px;
+        input{
+            line-height: 35px;
+            padding: 0 30px;
+            border-radius: 35px;
+            width: 150px;
+        }
+    }
+}
 </style>

src/views/myETA/Index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import MobileClassifyWrap from './components/MobileClassifyWrap.vue'
+import PadClasssifyWrap from './components/PadClasssifyWrap.vue'
 
 </script>
 
@@ -8,9 +9,9 @@ import MobileClassifyWrap from './components/MobileClassifyWrap.vue'
         <div class="myETA-index-page_mobile">
             <MobileClassifyWrap />
         </div>
-        <!-- <div class="myETA-index-page_pad">
-            <PadPPTIndexWrap/>
-        </div> -->
+        <div class="myETA-index-page_pad">
+            <PadClasssifyWrap/>
+        </div>
     </div>
 </template>
 

src/views/myETA/SearchList.vue

@@ -1,7 +1,64 @@
 <script setup>
-import {ref} from 'vue'
+import {ref,reactive} from 'vue'
+import {apiMyETAChartSearch} from '@/api/myETA'
+import { showToast } from 'vant'
+import moment from 'moment'
+import { useRouter } from 'vue-router'
+
+const router=useRouter()
 
 const keyword=ref('')
+const listState = reactive({
+    list:[],
+    page:1,
+    pageSize:20,
+    finished:false,
+    loading:false
+})
+async function getList(){
+    const res=await apiMyETAChartSearch({
+        CurrentIndex:listState.page,
+        PageSize:listState.pageSize,
+        Keyword:keyword.value
+    })
+    if(res.Ret===200){
+        listState.loading=false
+        if(!res.Data){
+            listState.finished=true
+            return
+        }
+        
+        listState.finished=res.Data.Paging.IsEnd
+        const arr=res.Data.List||[]
+        listState.list=[...listState.list,...arr]
+    }
+}
+function onLoad(){
+    listState.page++
+    getList()
+}
+
+function handleSearch(){
+    if(!keyword.value){
+        showToast('请输入关键词')
+        return
+    }
+    listState.page=1
+    listState.list=[]
+    listState.finished=false
+    getList()
+}
+
+function goDetail(item){
+    router.push({
+        path:"/myETA/chartdetail",
+        query:{
+            code:item.UniqueCode,
+            iscommon:true
+        }
+    })
+}
+
 </script>
 
 <template>
@@ -11,11 +68,69 @@ const keyword=ref('')
                 shape="round"
                 placeholder="请输入图表名称"
                 v-model="keyword"
+                @search="handleSearch"
             />
         </div>
+        <img v-if="listState.list.length==0&&listState.finished&&keyword" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
+        <van-list
+            v-model:loading="listState.loading"
+            :finished="listState.finished"
+            :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
+            :immediate-check="false"
+            @load="onLoad"
+        >
+            <ul class="list-wrap">
+                <li class="item" v-for="item in listState.list" :key="item.ChartInfoId" @click="goDetail(item)">
+                    <div class="van-ellipsis name">{{item.ChartName}}</div>
+                    <div class="time">
+                        <span>创建人：{{item.SysUserRealName}}</span>
+                        <span>创建时间：{{moment(item.CreateTime).format('YYYY-MM-DD')}}</span>
+                    </div>
+                </li>
+            </ul>
+        </van-list>
     </div>
 </template>
 
 <style lang="scss" scoped>
-
+.list-wrap{
+    padding: $page-padding;
+    .item{
+        padding: 30px 0;
+        border-bottom: 1px solid $border-color;
+        .name{
+            margin-bottom: 20px;
+        }
+        .time{
+            display: flex;
+            justify-content: space-between;
+            color: $font-grey_999;
+            font-size: 28px;
+        }
+    }
+}
+@media screen and (min-width:$media-width){
+    .chart-search-list-page{
+        max-width: 820px;
+        margin: 0 auto;
+        padding-top: 10px;
+    }
+    .list-wrap{
+        padding: 10px 30px;
+        .item{
+            padding: 10px 0;
+            .name{
+                margin-bottom: 10px;
+            }
+            .time{
+                font-size: 14px;
+                justify-content: flex-start;
+                span{
+                    margin-right: 20px;
+                }
+            }
+        }
+        
+    }
+}
 </style>

src/views/myETA/components/ChartSaveOther.vue

@@ -4,6 +4,10 @@ import {apiETAChartClassifyList,apiETAChartSaveOther} from '@/api/chart'
 import {apiCorrelationChartClassifyList,apiCorrelationChartSaveOther} from '@/api/correlationChart'
 import {apiFutureChartClassifyList,apiFutureChartSaveOther} from '@/api/futureChart'
 import { showToast } from 'vant'
+import { useWindowSize } from '@vueuse/core'
+
+const { width, height } = useWindowSize()
+
 
 const props=defineProps({
     show:{
@@ -97,7 +101,7 @@ async function handleConfirmSave(){
 <template>
     <van-popup 
         v-model:show="showPop"
-        position="bottom"
+        :position="width>650?'center':'bottom'"
         round
         closeable
     >
@@ -182,4 +186,38 @@ async function handleConfirmSave(){
         }
     }
 }
+
+@media screen and (min-width:$media-width){
+    .chart-save-other-wrap{
+        width: 375px;
+        .head-box{
+            .title{
+                font-size: 18px;
+                line-height: 50px;
+                padding-left: 16px;
+            }
+        }
+        .bot-btn-box{
+            font-size: 16px;
+            line-height: 56px;
+            border-top-width: 8px;
+        }
+        .content{
+            .list-box{
+                max-height: 500px;
+            }
+            .item{
+                padding: 16px;
+                font-size: 16px;
+                &.active{
+                    &::after{
+                        width: 18px;
+                        height: 18px;
+                        right: 16px;
+                    }
+                }
+            }
+        }
+    }
+}
 </style>

src/views/myETA/components/EDBInfo.vue

@@ -376,4 +376,81 @@ function handleLeadUnitChange(e){
     }
 
 }
+@media screen and (min-width:$media-width){
+    .edb-info-wrap{
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        .top-box{
+            padding: 16px;
+            .title{
+                font-size: 18px;
+            }
+        }
+        .con-box{
+            flex: 1;
+            max-height: 100%;
+        }
+        .info-list{
+            padding: 16px;
+            padding-bottom: 20px;
+            .item{
+                padding: 16px 0;
+            }
+        }
+        .opt-box{
+            .lable{
+                padding-left: 16px;
+                padding-bottom: 16px;
+                font-size: 18px;
+            }
+            .con{
+                padding: 0 16px;
+                .radio-box{
+                    &.active{
+                        .radius-box::after{
+                            width: 8px;
+                            height: 8px;
+                        }
+                    }
+                    .radius-box{
+                        width: 16px;
+                        height: 16px;
+                        margin-right: 7px;
+                    }
+                    .text{
+                        font-size: 16px;
+                    }
+                }
+                .btn-box{
+                    .btn{
+                        min-width: 40px;
+                        line-height: 28px;
+                        font-size: 14px;
+                        padding: 0 10px;
+                    }
+                }
+                .item-box{
+                    padding: 20px 0;
+                }
+            }
+            #select-color-box{
+                width: 25px;
+                height: 25px;
+                position: relative;
+                :deep(.color-picker){
+                    left: 100px !important;
+                }
+            }
+
+        }
+
+
+        .confirm-btn{
+            border-top-width: 8px;
+            line-height: 56px;
+            font-size: 16px;
+        }
+    }
+}
 </style>

src/views/myETA/components/MobileClassifyWrap.vue

@@ -84,7 +84,7 @@ function goChooseChart(){
         </ul>
         <!-- 底部操作栏 -->
         <div class="fix-bot-box">
-            <div class="item" @click="handleAddClassify">
+            <div class="item" @click="handleAddClassify('')">
                 <img class="icon" src="@/assets/imgs/icon_file.png" alt="">
                 <span>添加分类</span>
             </div>

src/views/myETA/components/PadClasssifyWrap.vue

@@ -0,0 +1,426 @@
+<script setup>
+import {ref,reactive} from 'vue'
+import { useRouter } from 'vue-router'
+import {useClassify} from '../hooks/useClassify'
+import openShareIcon from '@/assets/imgs/ppt/ppt_icon_user1.png'
+import closeShareIcon from '@/assets/imgs/ppt/ppt_icon_user2.png'
+import {apiMyChartList,apiMyChartRemove} from '@/api/myETA'
+import { showConfirmDialog, showToast } from 'vant';
+
+const router=useRouter()
+
+const {
+    classifyTypeOpt,
+    classifyState,
+    getMyClassify,
+    getPubClassify,
+    classifyTypeChange,
+    handleAddClassify,
+    handleConfirmEditClassify,
+
+    handleShowOpt,
+    handleClassifyShare,
+    handleCopyClassify,
+    handleClassifyDel
+}=useClassify()
+
+
+async function initPage(){
+    getPubClassify()
+    await getMyClassify()
+    listState.cid=classifyState.myClassifyList[0]?.MyChartClassifyId
+    if(!listState.cid){
+        listState.finished=true
+        return
+    }
+    getList()
+}
+initPage()
+
+const activeType=ref('my')//my 我的 pub公共的
+
+// 设置共享
+function handleChangeShareStatus(type,item){
+    if(type==1&&!item.IsPublic) return
+    if(type==2&&item.IsPublic) return
+    handleClassifyShare()
+}
+
+function goMobileSearch() {
+    router.push({
+        path:'/myETA/searchlist'
+    })
+}
+
+const listState = reactive({
+    cid:0,
+    list:[],
+    page:1,
+    pageSize:20,
+    finished:false,
+    loading:false
+})
+async function getList(){
+    const res=await apiMyChartList({
+        CurrentIndex:listState.page,
+        PageSize:listState.pageSize,
+        MyChartClassifyId:listState.cid
+    })
+    if(res.Ret===200){
+        listState.loading=false
+        if(!res.Data){
+            listState.finished=true
+            return
+        }
+        
+        listState.finished=res.Data.Paging.IsEnd
+        const arr=res.Data.List||[]
+        listState.list=[...listState.list,...arr]
+    }
+}
+function onLoad(){
+    listState.page++
+    getList()
+}
+
+// 点击分类获取列表
+function goChartList(item){
+    listState.cid=item.MyChartClassifyId
+    listState.page=1
+    listState.list=[]
+    listState.finished=false
+    getList()
+}
+
+//移除图表
+function handleRemoveChart(item,index){
+    showConfirmDialog({
+        title: '提示',
+        message:'是否确认移出？',
+    }).then(()=>{
+        apiMyChartRemove({
+            MyChartClassifyId:Number(listState.cid),
+            MyChartId:item.MyChartId
+        }).then(res=>{
+            if(res.Ret===200){
+                setTimeout(() => {
+                    showToast('移出成功')
+                }, 100);
+                listState.list.splice(index,1)
+            }
+        })
+    }).catch(()=>{})
+}
+
+// 跳转详情
+function goDetail(item){
+    router.push({
+        path:"/myETA/chartdetail",
+        query:{
+            code:item.UniqueCode,
+            cid:listState.cid,
+            iscommon:classifyState.classifyTypeAct==1?false:true
+        }
+    })
+}
+
+function goChooseChart(){
+    router.push({
+        path:'/myETA/choosechart'
+    })
+}
+
+</script>
+
+<template>
+    <div class="pad-myETA-classify-wrap">
+        <div class="left-classify-wrap">
+            <div class="sticky-box">
+                <div class="classify-type-box">
+                    <span
+                        :class="['item',item.type===classifyState.classifyTypeAct?'active':'']"
+                        v-for="item in classifyTypeOpt" 
+                        :key="item.id"
+                        @click="classifyTypeChange(item)"
+                    >{{item.name}}</span>
+                </div>
+                <ul class="list-box">
+                    <li 
+                        class="item"
+                        v-for="item in classifyState.classifyTypeAct==1?classifyState.myClassifyList:classifyState.pubClassifyList"
+                        :key="item.MyChartClassifyId"
+                        @click="goChartList(item)"
+                    >
+                        <img class="left-icon" src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
+                        <div style="flex:1">
+                            <div class="van-ellipsis name">{{item.MyChartClassifyName}}</div>
+                            <div class="share-user" v-if="classifyState.classifyTypeAct==2">分享人： {{item.RealName}}</div>
+                        </div>
+                        <div @click.stop="handleShowOpt(item)" v-if="classifyState.classifyTypeAct!=2">
+                            <van-popover position="bottom-start">
+                                <template #reference>
+                                    <img 
+                                        class="share-icon" 
+                                        :src="item.IsPublic?openShareIcon:closeShareIcon" alt=""
+                                    >
+                                </template>
+                                <div class="pad-classify-file-opt-box">
+                                    <div class="item" @click="handleChangeShareStatus(1,item)">
+                                        <img :src="closeShareIcon" alt="">
+                                        <span>仅自己可见</span>
+                                    </div>
+                                    <div class="item" @click="handleChangeShareStatus(2,item)">
+                                        <img :src="openShareIcon" alt="">
+                                        <span>所有人可见</span>
+                                    </div>
+                                </div>
+                            </van-popover>
+                        </div>
+                        <div @click.stop="handleShowOpt(item)">
+                            <van-popover position="bottom-start">
+                                <template #reference>
+                                    <div class="menu-icon">
+                                        <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
+                                    </div>
+                                </template>
+                                <div class="pad-classify-file-opt-box">
+                                    <div class="item" v-if="classifyState.classifyTypeAct!=2" @click="handleAddClassify(item)">
+                                        <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+                                        <span>重命名</span>
+                                    </div>
+                                    <div class="item del" v-if="classifyState.classifyTypeAct!=2" @click="handleClassifyDel(item)">
+                                        <img src="@/assets/imgs/icon_del.png" alt="">
+                                        <span>删除</span>
+                                    </div>
+                                    <div class="item" v-if="classifyState.classifyTypeAct==2" @click="handleCopyClassify(classifyState.activeClassifyVal)">
+                                        <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
+                                        <span>复制</span>
+                                    </div>
+                                </div>
+                            </van-popover>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="right-list-wrap">
+            <div class="top-search-box">
+                <van-search 
+                    shape="round" 
+                    readonly 
+                    placeholder="请输入图表名称"
+                    style="flex:1"
+                    @click="goMobileSearch"
+                />
+                <div class="btn" @click="goChooseChart">选择图表</div>
+                <div class="btn" @click="handleAddClassify('')">添加分类</div>
+            </div>
+            <van-list
+                v-model:loading="listState.loading"
+                :finished="listState.finished"
+                :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
+                :immediate-check="false"
+                @load="onLoad"
+            >
+                <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
+                <ul class="chart-list">
+                    <li 
+                        class="chart-list-item" 
+                        v-for="item,index in listState.list" 
+                        :key="item.ChartInfoId"
+                        @click="goDetail(item)"
+                    >
+                        <div class="van-ellipsis name">{{item.ChartName}}</div>
+                        <img class="img" :src="item.ChartImage" alt="">   
+                        <div class="time">
+                            <span>{{item.CreateTime.slice(0,10)}}</span>
+                            <div class="remove-box" @click.stop="handleRemoveChart(item,index)" v-if="classifyState.classifyTypeAct==1">
+                                <img src="@/assets/imgs/myETA/icon_remove2.png" alt="">
+                                <span>移出</span>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </van-list>
+        </div>
+    </div>
+
+    <!-- 添加我的分类弹窗 -->
+    <van-dialog 
+        v-model:show="classifyState.showEidtClassifyName" 
+        :title="classifyState.isAddClassifyName?'添加分类':'重命名'" 
+        show-cancel-button
+        confirmButtonText="确定"
+        @confirm="handleConfirmEditClassify"
+    >
+        <div class="rename-wrap">
+            <input type="text" placeholder="请输入分类名称！" v-model="classifyState.classifyNameVal">
+        </div>
+    </van-dialog>
+</template>
+
+<style lang="scss">
+@media screen and (min-width:$media-width){
+    .pad-classify-file-opt-box{
+        border: 1px solid $border-color;
+        padding: 10px 0;
+        .item{
+            padding: 10px 20px;
+            display: flex;
+            align-items: center;
+            img{
+                width: 20px;
+                margin-right: 8px;
+            }
+        }
+        .del{
+            color: $theme-red;
+        }
+    }
+            
+}
+</style>
+
+<style lang="scss" scoped>
+@media screen and (min-width:$media-width){
+    .pad-myETA-classify-wrap{
+        display: flex;
+        .left-classify-wrap{
+            width: 300px;
+            min-height: 100vh;
+            border-right: 1px solid $border-color;
+            padding: 30px;
+            .sticky-box{
+                position: sticky;
+                top: 90px;
+            }
+            .classify-type-box{
+                span{
+                    display: inline-block;
+                    padding-bottom: 5px;
+                    margin-right: 30px;
+                    color: $font-grey_999;
+                }
+                .active{
+                    color: $theme-color;
+                    font-weight: bold;
+                    border-bottom: 2px solid $theme-color;
+                }
+            }
+            .list-box{
+                padding-top: 30px;
+                .item{
+                    padding: 10px 0;
+                    display: flex;
+                    position: relative;
+                    .left-icon{
+                        width: 20px;
+                        height: 20px;
+                        margin-right: 8px;
+                        flex-shrink: 0;
+                        position: relative;
+                        top: -2px;
+                    }
+                    .name{
+                        flex: 1;
+                    }
+                    .share-user{
+                        font-size: 12px;
+                        color: $font-grey_999;
+                        margin-top: 10px;
+                    }
+                    .menu-icon{
+                        margin-left: 20px;
+                        width: 15px;
+                        text-align: center;
+                        .icon{
+                            width: 3px;
+                        }
+                    }
+                    .share-icon{
+                        width: 16px;
+                        height: 16px;
+                    }
+                }
+            }
+        }
+        .right-list-wrap{
+            flex: 1;
+            .top-search-box{
+                display: flex;
+                align-items: center;
+                position: sticky;
+                top: 60px;
+                background-color: #fff;
+                padding: 30px;
+                .btn{
+                    width: 112px;
+                    height: 40px;
+                    background-color: $theme-color;
+                    color: #fff;
+                    text-align: center;
+                    line-height: 40px;
+                    border-radius: 3px;
+                    margin-left: 20px;
+                }
+            }
+            .chart-list{
+                padding: 0 30px;
+                display: flex;
+                flex-wrap: wrap;
+                box-sizing: border-box;
+                .chart-list-item{
+                    box-sizing: border-box;
+                    width: 250px;
+                    padding: 10px 14px;
+                    border: 1px solid $border-color;
+                    margin-bottom: 20px;
+                    margin-left: 10px;
+                    margin-right: 10px;
+                    .img{
+                        width: 100%;
+                        height: 150px;
+                        display: block;
+                        margin: 10px 0;
+                    }
+                    .time{
+                        font-size: 14px;
+                        color: $font-grey_999;
+                        position: relative;
+                        .remove-box{
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            color: $theme-red;
+                            display: flex;
+                            align-items: center;
+                            img{
+                                width: 18px;
+                                height: 18px;
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .rename-wrap{
+        display: flex;
+        align-items: center;
+        padding: 50px 30px;
+        span{
+            flex-shrink: 0;
+            margin-right: 20px;
+        }
+        input{
+            flex: 1;
+            line-height: 35px;
+            padding: 0 30px;
+            border-radius: 35px;
+            border: 1px solid $border-color;
+            width: 150px;
+        }
+    }
+}
+</style>

src/views/myETA/hooks/useClassify.js

@@ -59,6 +59,7 @@ export function useClassify(){
 
     // 显示新增分类弹窗
     const handleAddClassify=(item)=>{
+        console.log('item',item);
         classifyState.isAddClassifyName=item?false:true
         classifyState.classifyNameVal=item.MyChartClassifyName||''
         classifyState.showEidtClassifyName=true

src/views/tabbar/Home.vue

@@ -68,15 +68,15 @@ if(!localStorage.getItem('token')){
         .list{
             justify-content: center;
             .item-box{
-                width: 326px;
-                height: 326px;
+                width: 240px;
+                height: 240px;
                 margin: 0 20px;
                 font-size: 20px;
                 border-radius: 32px;
                 img{
-                    width: 120px;
-                    height: 120px;
-                    margin-bottom: 40px;
+                    width: 80px;
+                    height: 80px;
+                    margin-bottom: 30px;
                 }
             }
         }