cmoit

.env.development

@@ -1,5 +1,5 @@
-# 接口地址
-VITE_APP_API_URL="http://8.136.199.33:8610/v1"
+# 接口地址http://8.136.199.33:8610/v1
+VITE_APP_API_URL="https://rddptest.hzinsights.com/adminapi"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名

src/api/chart.js

@@ -6,4 +6,16 @@ import { get,post } from "./index";
  */
 export function apiChartInfoByCode(params){
     return get('/datamanage/chart_info/common/detail/from_unique_code',params)
+}
+
+/**
+ * ETA图库列表（公用图库列表）
+ * @param PageSize
+ * @param CurrentIndex
+ * @param ChartClassifyId
+ * @param KeyWord
+ * @param IsShowMe
+ */
+export function apiPubChartList(params){
+    return get('/my_chart/chart/list',params)
 }

src/api/correlationChart.js

@@ -0,0 +1,13 @@
+//相关性图表模块
+import { get,post } from "./index";
+
+/**
+ * 相关性图表列表
+ * @param PageSize
+ * @param CurrentIndex
+ * @param KeyWord
+ * @param IsShowMe
+ */
+export function apiCorrelationChartList(params){
+    return get('/correlation/chart_info/list',params)
+}

src/api/futureChart.js

@@ -0,0 +1,13 @@
+// 商品价格曲线模块
+import { get,post } from "./index";
+
+/**
+ * 搜索图表
+ * @param PageSize
+ * @param CurrentIndex
+ * @param KeyWord
+ * @param IsShowMe
+ */
+export function apiFutureSearchChartList(params){
+    return get('/future_good/chart_info/search_by_es',params)
+}

src/api/myETA.js

@@ -0,0 +1,69 @@
+import { get,post } from "./index";
+
+/**
+ * 获取我的图库分类
+ */
+export function apiMyClassifyList(){
+    return get('/my_chart/classify/list',{})
+}
+
+/**
+ * 获取公共图库分类
+ */
+export function apiPublicClassifyList(){
+    return get('/my_chart/classify/public_list',{})
+}
+
+/**
+ * 新增我的分类
+ * @param MyChartClassifyName
+ */
+export function apiAddClassify(params){
+    return post('/my_chart/classify/add',params)
+}
+
+/**
+ * 编辑我的分类
+ * @param MyChartClassifyName
+ * @param MyChartClassifyId
+ */
+export function apiEidtClassify(params){
+    return post('/my_chart/classify/edit',params)
+}
+
+/**
+ * 删除我的分类
+ * @param MyChartClassifyId
+ */
+export function apiDeleteClassify(params){
+    return post('/my_chart/classify/delete',params)
+}
+
+
+/**
+ * 获取图库分类下的图列表
+ * @param PageSize
+ * @param CurrentIndex
+ * @param MyChartClassifyId
+ */
+export function apiMyChartList(params){
+    return get('/my_chart/list',params)
+}
+
+/**
+ * 将图表从我的图库中移除
+ * @param MyChartClassifyId
+ * @param MyChartId
+ */
+export function apiMyChartRemove(params){
+    return post('/my_chart/delete',params)
+}
+
+/**
+ * 将图表加入我的图库分类中
+ * @param ChartInfoId
+ * @param {Array} MyChartClassifyId eg:[462,456]
+ */
+export function apiMyChartAdd(params){
+    return post('/my_chart/add',params)
+}

src/assets/styles/var.scss

@@ -4,4 +4,5 @@ $font-grey:#666666;
 $font-grey_999:#999;
 $border-color:#DCDFE6;
 $theme-red:#C54322;
-$media-width:650px;
+$media-width:650px;
+$page-padding:34px;//页面边距

src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router";
-import './plugin/vant'
+import {registerVant} from './plugin/vant'
 import 'normalize.css'
 import './assets/styles/common.scss'
 import reportErr from '@/utils/reportErr'
@@ -11,5 +11,6 @@ const app= createApp(App)
 
 reportErr(app)//设置全局错误上报
 
+registerVant(app)
 app.use(router)
 app.mount('#app')

src/plugin/vant.js

@@ -1,21 +1,23 @@
 /* vant 公共配置模块 */
 
 // Toast
-import { Toast } from 'vant';
+// import { showToast } from 'vant';
 import 'vant/es/toast/style';
 
 // Dialog
-import { showDialog } from 'vant';
+// import { showDialog } from 'vant';
 import 'vant/es/dialog/style';
 
 // Notify
-import { showNotify } from 'vant';
+// import { showNotify } from 'vant';
 import 'vant/es/notify/style';
 
 // ImagePreview
-import { showImagePreview } from 'vant';
+// import { showImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 
-// export const registerVant=(app)=>{
-//     app.use(Toast)
-// }
+import { Lazyload } from 'vant';
+
+export const registerVant=(app)=>{
+    app.use(Lazyload)
+}

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { pptRoutes } from "./ppt";
 import {pptENRoutes} from './pptEn'
+import {myETARoutes} from './myETA'
 /**
  * 说明
  * 此文件为路由配置入口文件
@@ -49,6 +50,8 @@ const routes = [
 			...pptRoutes,
 			//英文ppt模块
 			...pptENRoutes,
+			//myETA模块
+			...myETARoutes,
 		]
 	},
 	

src/router/myETA.js

@@ -0,0 +1,59 @@
+// myETA路由模块
+/**
+ * meta:{
+ * noHead:pad端不需要顶部
+ * hasBackHome:pad端顶部有返回首页
+ * }
+ */
+ export const myETARoutes=[
+    {
+        path:"/myETA/index",
+        name:"MyETAIndex",
+        component: () => import("@/views/myETA/Index.vue"),
+        meta: { 
+            title: "My ETA",
+            hasBackHome:true,
+            keepAlive:true
+        },
+    },
+    {
+        path:"/myETA/chartlist",
+        name:"MyETAChartList",
+        component: () => import("@/views/myETA/ChartList.vue"),
+        meta: { 
+            title: "My ETA",
+            hasBackHome:true,
+            keepAlive:false
+        },
+    },
+    {
+        path:"/myETA/searchlist",
+        name:"MyETASearchList",
+        component: () => import("@/views/myETA/SearchList.vue"),
+        meta: { 
+            title: "My ETA",
+            hasBackHome:true,
+            keepAlive:false
+        },
+    },
+    {
+        path:"/myETA/choosechart",
+        name:"MyETAChooseChart",
+        component: () => import("@/views/myETA/ChooseChart.vue"),
+        meta: { 
+            title: "选择图表",
+            hasBackHome:true,
+            keepAlive:false
+        },
+    },
+    {
+        path:"/myETA/chartdetail",
+        name:"MyETAChartDetail",
+        component: () => import("@/views/myETA/ChartDetail.vue"),
+        meta: { 
+            title: "图表详情",
+            hasBackHome:true,
+            keepAlive:false
+        },
+    }
+]

src/views/myETA/ChartDetail.vue

@@ -0,0 +1,50 @@
+<script setup>
+import {ref,nextTick} from 'vue'
+import {apiChartInfoByCode} from '@/api/chart'
+import { useRoute } from 'vue-router'
+import {chartRender} from '@/hooks/chart/render'
+
+const route=useRoute()
+const chartCode=route.query.code
+
+// 获取图详情
+let chartInfo=ref(null)
+async function getChartInfo(){
+    const res=await apiChartInfoByCode({UniqueCode:chartCode})
+    if(res.Ret!==200) return
+    chartInfo.value=res.Data.ChartInfo
+    nextTick(()=>{
+        chartRender({
+            data:res.Data,
+            renderId:'chart-box',
+            lang:'zh',
+            changeLangIsCheck:false,
+            showChartTitle:false
+        })
+    })
+}
+getChartInfo()
+
+</script>
+
+<template>
+    <div class="chart-detail-page" v-if="chartInfo">
+        <div class="chart-title">{{chartInfo.ChartName}}</div>
+        <div class="select-time-box">
+            <span>开始日期</span>
+            <span>至</span>
+            <span>结束日期</span>
+        </div>
+        <div class="chart-box" id="chart-box"></div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-detail-page{
+    padding: $page-padding;
+    .chart-box{
+        width: 100%;
+        height: 700px;
+    }
+}
+</style>

src/views/myETA/ChartList.vue

@@ -0,0 +1,118 @@
+<script setup>
+import {ref,reactive} from 'vue'
+import {apiMyChartList,apiMyChartRemove} from '@/api/myETA'
+import { useRoute, useRouter } from "vue-router";
+import { showConfirmDialog } from 'vant';
+
+
+const router=useRouter()
+const route=useRoute()
+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,
+    pageSize:20,
+    finished:false,
+    loading:false
+})
+async function getList(){
+    const res=await apiMyChartList({
+        CurrentIndex:listState.page,
+        PageSize:listState.pageSize,
+        MyChartClassifyId:Number(cid.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 handleRemove(item){
+    showConfirmDialog({
+        title: '提示',
+        message:'是否确认移出？',
+    }).then(()=>{
+
+    }).catch(()=>{})
+}
+
+// 跳转图详情
+function goChartDetail(item){
+    router.push({
+        path:"/myETA/chartdetail",
+        query:{
+            code:item.UniqueCode
+        }
+    })
+}
+
+</script>
+
+<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"
+            finished-text="没有更多了"
+            @load="onLoad"
+        >
+            <template v-for="item in listState.list" :key="item.ChartInfoId">
+                <van-swipe-cell :disabled="isCommon">
+                    <div class="list-item" @click="goChartDetail(item)">
+                        <img class="img" :src="item.ChartImage" alt="">
+                        <div class="con-box">
+                            <div class="name">{{item.ChartName}}</div>
+                            <div class="time">创建时间：{{item.CreateTime.slice(0,10)}}</div>
+                        </div>
+                    </div>
+                    <template #right>
+                        <van-button square text="移除" type="danger" @click="handleRemove(item)"/>
+                    </template>
+                </van-swipe-cell>
+            </template>
+        </van-list>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.search-box{
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    z-index: 99;
+}
+.list-item{
+    display: flex;
+    .img{
+        width: 100px;
+        height: 100px;
+        object-fit: contain;
+    }
+    .con-box{
+        flex: 1;
+    }
+}
+</style>

src/views/myETA/ChooseChart.vue

@@ -0,0 +1,265 @@
+<script setup>
+import {reactive, ref} from 'vue'
+import {apiPubChartList} from '@/api/chart'
+import {apiFutureSearchChartList} from '@/api/futureChart'
+import {apiCorrelationChartList} from '@/api/correlationChart'
+import {apiMyClassifyList,apiMyChartAdd,apiAddClassify} from '@/api/myETA'
+import { showToast } from 'vant';
+
+const keyword=ref('')
+
+const typeOpt=[
+    {
+        name:"ETA图库",
+        type:1,
+    },
+    {
+        name:"商品价格曲线",
+        type:2,
+    },
+    {
+        name:"相关性图表",
+        type:3,
+    }
+]
+let type=ref(1)
+const isShowMe=ref(false)
+
+const listState=reactive({
+    list:[],
+    page:0,
+    pageSize:20,
+    loading:false,
+    finished:false,
+})
+
+async function getChartList(){
+    const params={
+        PageSize: listState.pageSize,
+        CurrentIndex: listState.page,
+        ChartClassifyId: 0,
+        KeyWord: keyword.value,
+        IsShowMe:isShowMe.value
+    }
+    let res
+    if(type.value==1){
+        res=await apiPubChartList(params)
+    }else if(type.value==2){
+        res=await apiFutureSearchChartList(params)
+    }else if(type.value==3){
+        res=await apiCorrelationChartList(params)
+    }
+    
+    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++
+    getChartList()
+}
+
+function refreshList(){
+    listState.list=[]
+    listState.page=1
+    listState.finished=false
+    getChartList()
+}
+
+// 切换图类型
+function handleTypeChange(item){
+    type.value=item.type
+    isShowMe.value=false
+    refreshList()
+}
+
+// 搜索
+function onSearch(){
+    refreshList()
+}
+// 清除搜索关键词
+function onClearSearch(){
+    console.log('aaa');
+    keyword.value=''
+    refreshList()
+}
+
+
+// 获取我的分类数据
+let classifyList=ref([])
+async function getMyClassifyList(){
+    const res=await apiMyClassifyList()
+    if(res.Ret===200){
+        const arr=res.Data.List||[]
+        classifyList.value=arr.map(item=>{
+            return {
+                ...item,
+                isSelect:false//用于选择的时候
+            }
+        })
+    }
+}
+getMyClassifyList()
+// 显示选择分类弹窗
+let showSelect=ref(false)
+let selectChartId=ref(0)
+
+// 确认将图加入选择的分类
+function handleConfirmAddChart(){
+    let arr=[]
+    classifyList.value.forEach(item=>{
+        if(item.isSelect){
+            arr.push(item.MyChartClassifyId)
+        }
+    })
+    if(arr.length===0){
+        showToast('请选择分类')
+        return
+    }
+    apiMyChartAdd({
+        ChartInfoId:selectChartId.value,
+        MyChartClassifyId:arr
+    }).then(res=>{
+        if(res.Ret===200){
+            showToast('添加成功！')
+        }
+    })
+}
+
+
+
+</script>
+
+<template>
+    <div class="choose-chart-list-page">
+        <div class="search-box">
+            <van-search
+                shape="round"
+                placeholder="请输入图表名称"
+                v-model="keyword"
+                @search="onSearch"
+                @clear="onClearSearch"
+            />
+        </div>
+        <div class="type-box">
+            <span 
+                class="opt" 
+                v-for="item in typeOpt" 
+                :key="item.type"
+                @click="handleTypeChange(item)"
+            >{{item.name}}</span>
+        </div>
+
+        <van-list
+            v-model:loading="listState.loading"
+            :finished="listState.finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+        >
+        <ul class="list-wrap">
+            <li class="item" v-for="item in listState.list" :key="item.ChartInfoId">
+                <div class="van-multi-ellipsis--l2 name">{{item.ChartName}}</div>
+                <van-image
+                    fit="contain"
+                    lazy-load
+                    class="img"
+                    :src="item.ChartImage"
+                />
+                <div>
+                    <span class="time">最新更新:{{item.ModifyTime.substr(0,10)}}</span>
+                </div>
+            </li>
+        </ul>
+        </van-list>
+    </div>
+    <!-- 选择分类弹窗 -->
+    <van-popup 
+        v-model:show="showSelect" 
+        position="bottom"
+        round
+    >
+        <div class="select-classify-wrap">
+            <div class="top-box">
+                <span class="title">选择分类</span>
+                <span class="confirm-btn" @click="handleConfirmAddChart">确定</span>
+            </div>
+            <ul class="classify-list">
+                <li 
+                    :class="['item',item.isSelect?'active':'']" 
+                    v-for="item in classifyList" 
+                    :key="item.MyChartClassifyId"
+                    @click="item.isSelect=!item.isSelect"
+                >{{item.MyChartClassifyName}}</li>
+            </ul>
+        </div>
+    </van-popup>
+</template>
+
+<style lang="scss" scoped>
+.type-box{
+    .opt{
+        display: inline-block;
+        margin-right: 20px;
+    }
+}
+.list-wrap{
+    padding: $page-padding;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .item{
+        box-sizing: border-box;
+        border: 1px solid $border-color;
+        padding: 20px;
+        width: 48%;
+        margin-bottom: 30px;
+        .name{
+            min-height: 60px;
+        }
+        .img{
+            width: 100%;
+            height: 200px;
+            margin: 20px 0;
+        }
+        .time{
+            font-size: 12px;
+            color: $font-grey;
+        }
+    }
+}
+.select-classify-wrap{
+    .top-box{
+        padding: 20px 0;
+        text-align: center;
+        border-bottom: 1px solid $border-color;
+        position: relative;
+        .confirm-btn{
+            position: absolute;
+            right: 34px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: $theme-color;
+        }
+    }
+    .classify-list{
+        height: 40vh;
+        overflow-y: auto;
+        .item{
+            padding: 20px 24px;
+            border-bottom: 1px solid $border-color;
+        }
+        .active{
+            color: $theme-color;
+        }
+    }
+}
+</style>

src/views/myETA/Index.vue

@@ -0,0 +1,29 @@
+<script setup>
+import MobileClassifyWrap from './components/MobileClassifyWrap.vue'
+
+</script>
+
+<template>
+    <div class="myETA-index-page">
+        <div class="myETA-index-page_mobile">
+            <MobileClassifyWrap />
+        </div>
+        <!-- <div class="myETA-index-page_pad">
+            <PadPPTIndexWrap/>
+        </div> -->
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.myETA-index-page_pad{
+    display: none;
+}
+@media screen and (min-width:$media-width){
+    .myETA-index-page_mobile{
+        display: none;
+    }
+    .myETA-index-page_pad{
+        display: block;
+    }
+}
+</style>

src/views/myETA/SearchList.vue

@@ -0,0 +1,21 @@
+<script setup>
+import {ref} from 'vue'
+
+const keyword=ref('')
+</script>
+
+<template>
+    <div class="chart-search-list-page">
+        <div class="search-box">
+            <van-search 
+                shape="round"
+                placeholder="请输入图表名称"
+                v-model="keyword"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/views/myETA/components/MobileClassifyWrap.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import {useClassify} from '../hooks/useClassify'
+
+const router=useRouter()
+
+const {
+    classifyTypeOpt,
+    classifyState,
+    getMyClassify,
+    getPubClassify,
+    classifyTypeChange,
+    handleAddClassify,
+    handleConfirmEditClassify
+}=useClassify()
+
+getMyClassify()
+getPubClassify()
+
+function goMobileSearch() {
+    router.push({
+        path:'/myETA/searchlist'
+    })
+}
+
+
+function goChartList(item){
+    router.push({
+        path:"/myETA/chartlist",
+        query:{
+            cid:item.MyChartClassifyId,
+            cname:item.MyChartClassifyName,
+            iscommon:classifyState.classifyTypeAct==1?false:true
+        }
+    })
+}
+
+function goChooseChart(){
+    router.push({
+        path:'/myETA/choosechart'
+    })
+}
+</script>
+
+<template>
+    <div class="myETA-mobile-classify-wrap">
+        <div class="search-box">
+            <van-search 
+                shape="round" 
+                readonly 
+                placeholder="请输入图表名称" 
+                @click="goMobileSearch"
+            />
+        </div>
+        <div class="classify-type-box">
+            <span
+                class="item"
+                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)"
+            >
+                <span class="van-ellipsis name">{{item.MyChartClassifyName}}</span>
+            </li>
+        </ul>
+        <!-- 底部操作栏 -->
+        <div class="fix-bot-box">
+            <span @click="handleAddClassify">添加我的分类</span>
+            <span @click="goChooseChart">选择图表</span>
+        </div>
+    </div>
+    <!-- 添加我的分类弹窗 -->
+    <van-dialog 
+        v-model:show="classifyState.showEidtClassifyName" 
+        :title="classifyState.isAddClassifyName?'添加我的分类':'重命名'" 
+        show-cancel-button
+        confirmButtonText="确定"
+        @confirm="handleConfirmEditClassify"
+    >
+        <div class="rename-wrap">
+            <span>分类名称</span>
+            <input type="text" placeholder="请输入分类名称！" v-model="classifyState.classifyNameVal">
+        </div>
+    </van-dialog>
+</template>
+
+<style lang="scss" scoped>
+.classify-type-box{
+    padding: $page-padding;
+    .item{
+        display: inline-block;
+        margin-right: 20px;
+    }
+}
+.list-box{
+    padding: $page-padding;
+    .item{
+        border-bottom: 1px solid $border-color;
+        padding: 20px 0;
+        display: flex;
+        .name{
+            flex: 1;
+        }
+    }
+}
+.fix-bot-box{
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 80px;
+    background-color: #fff;
+    border-top: 1px solid $border-color;
+    display: flex;
+
+}
+.rename-wrap{
+    display: flex;
+    align-items: center;
+    padding: 50px 30px;
+    span{
+        flex-shrink: 0;
+        margin-right: 20px;
+    }
+    input{
+        flex: 1;
+        line-height: 70px;
+        padding: 0 30px;
+        border-radius: 70px;
+        border: 1px solid $border-color;
+        width: 150px;
+    }
+}
+</style>

src/views/myETA/hooks/useClassify.js

@@ -0,0 +1,90 @@
+import {
+    apiMyClassifyList,
+    apiPublicClassifyList,
+    apiAddClassify,
+    apiEidtClassify,
+    apiDeleteClassify
+} from '@/api/myETA.js'
+import {reactive} from 'vue'
+import { showToast,showDialog,Dialog } from 'vant';
+
+export function useClassify(){
+
+    const classifyTypeOpt=[
+        {
+            name:"我的图库",
+            type:1
+        },
+        {
+            name:"公共图库",
+            type:2
+        }
+    ]
+
+    const classifyState=reactive({
+        classifyTypeAct:1,//当前选中的类型
+        myClassifyList:[],//我的图库分类
+        pubClassifyList:[],//公共图库分类
+        classifyAct:0,//当前选中的分类id
+
+        showEidtClassifyName:false,//显示新增/编辑分类弹窗
+        isAddClassifyName:false,//是否为新增分类 false为编辑分类
+        classifyNameVal:'',
+        editClassifyId:0,//编辑分类的id
+    })
+
+    // 获取我的图库分类
+    const getMyClassify=async()=>{
+        const res=await apiMyClassifyList()
+        if(res.Ret===200){
+            classifyState.myClassifyList=res.Data.List||[]
+        }
+    }
+
+    // 获取公共图库分类
+    const getPubClassify=async()=>{
+        const res=await apiPublicClassifyList()
+        if(res.Ret===200){
+            classifyState.pubClassifyList=res.Data.List||[]
+        }
+    }
+
+    // 切换图库分类类型
+    const classifyTypeChange=(e)=>{
+        classifyState.classifyTypeAct=e.type
+    }
+
+    // 显示新增分类弹窗
+    const handleAddClassify=()=>{
+        classifyState.isAddClassifyName=true
+        classifyState.classifyNameVal=''
+        classifyState.showEidtClassifyName=true
+    }
+    // 确认编辑分类
+    const handleConfirmEditClassify=async ()=>{
+        if(!classifyState.classifyNameVal){
+            showToast('请填写分类名称！')
+            return
+        }
+        // 新增
+        if(classifyState.isAddClassifyName){
+            const res=await apiAddClassify({MyChartClassifyName:classifyState.classifyNameVal})
+        }else{
+            const res=await apiEidtClassify({
+                MyChartClassifyName:classifyState.classifyNameVal,
+                MyChartClassifyId:classifyState.editClassifyId
+            })
+        }
+        getMyClassify()
+    }
+
+    return {
+        classifyTypeOpt,
+        classifyState,
+        getMyClassify,
+        getPubClassify,
+        classifyTypeChange,
+        handleAddClassify,
+        handleConfirmEditClassify
+    }
+}

src/views/tabbar/Home.vue

@@ -24,6 +24,10 @@ if(!localStorage.getItem('token')){
                 <img src="@/assets/imgs/ppt/ppt_icon_en.png" alt="">
                 <div>英文PPT</div>
             </div>
+            <div class="item-box" @click="goNext('/myETA/index')">
+                <img src="@/assets/imgs/ppt/ppt_icon_en.png" alt="">
+                <div>My ETA</div>
+            </div>
         </div>
         
     </div>
@@ -35,9 +39,11 @@ if(!localStorage.getItem('token')){
     .list{
         display: flex;
         justify-content: space-between;
+        flex-wrap: wrap;
         .item-box{
             width: 326px;
             height: 326px;
+            margin-bottom: 20px;
             display: flex;
             flex-direction: column;
             justify-content: center;