Merge branch 'v1.5_chartETA'

.env.development

@@ -4,3 +4,5 @@ VITE_APP_API_URL="http://8.136.199.33:8610/v1"
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
 VITE_APP_OUTDIR="dist"
+#分享图表地址
+VITE_CHART_LINK="https://charttest.hzinsights.com/chartshow"

.env.production

@@ -3,4 +3,6 @@ VITE_APP_API_URL="https://mveta.hzinsights.com/v1"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
-VITE_APP_OUTDIR="hongze_ETA_mobile"
+VITE_APP_OUTDIR="hongze_ETA_mobile"
+#分享图表地址
+VITE_CHART_LINK="https://chartlib.hzinsights.com/chartshow"

.env.test

@@ -4,3 +4,5 @@ VITE_APP_API_URL="http://8.136.199.33:8610/v1"
 VITE_APP_BASE_URL="/"
 # 打包输入文件名
 VITE_APP_OUTDIR="hongze_ETA_mobile"
+#分享图表地址
+VITE_CHART_LINK="https://charttest.hzinsights.com/chartshow"

src/api/chart.js

@@ -140,6 +140,102 @@ export default{
      */
     refreshChartMultiple(params){
         return post('/datamanage/chart_info/batch_refresh',params)
+    },
+    /**
+     * 添加图表分类
+     * @param ChartClassifyName 
+     * @param ParentId 一级分类时传0
+     * @param Level 一级分类0 二级分类1
+     */
+    addNewClassify(params){
+        return post('/datamanage/chart_classify/add',params)
+    },
+    /**
+     * 编辑图表分类
+     * @param ChartClassifyName
+     * @param ChartClassifyId
+     */
+    editClassify(params){
+        return post('/datamanage/chart_classify/edit',params)
+    },
+    /**
+     * 删除图表分类/图表
+     * @param ChartClassifyId 
+     * @param ChartInfoId
+     */
+    deleteClassify(params){
+        return post('/datamanage/chart_classify/delete',params)
+    },
+    /**
+     * 删除图表分类/图表检测
+     * @param ChartClassifyId
+     * @param ChartInfoId
+        0 可删除
+        1 有关联图表,不可删除
+        2 有子目录无图表,可删除
+     */
+    deleteCheck(params){
+        return post('/datamanage/chart_classify/delete/check',params)
+    },
+    /**
+     * 移动分类
+     * @param ClassifyId
+     * @param ParentClassifyId
+     * @param PrevClassifyId 0
+     * @param NextClassifyId 0
+     */
+    moveClassify(params){
+        return post('/datamanage/chart_classify/move',params)
+    },
+    /**
+     * 移动图表
+     * @param ChartClassifyId
+     * @param ChartInfoId
+     * @param PrevChartInfoId
+     * @param NextChartInfoId
+     */
+    moveChart(params){
+        return post('/datamanage/chart_info/move',params)
+    },
+    /**
+     * 设置指标库中英文
+     * @param ConfigCode ETA图库 chart_language
+     * @param ConfigValue CN/EN
+     */
+    setUserLang(params){
+        return post('/system/sysuser/config/set',params)
+    },
+    /**
+     * 获取指标历史生成记录
+     * @param EdbInfoId
+     */
+    getEdbCreateHistory(params){
+        return get('/datamanage/edb_info/trace',params)
+    },
+    /**
+     * 刷新图表
+     * @param ChartInfoId 
+     */
+    chartRefresh(params){
+        return get('/datamanage/chart_info/refresh',params)
+    },
+    /**
+     * 编辑图表英文信息
+     * @param ChartInfoId
+     * @param ChartNameEn
+     * @param ChartEdbInfoList {EdbInfoId,EdbNameEn,UnitEn}
+     * @param ExtraConfig 如果是截面散点图(chartType===10)需要加这个 {}
+     */
+    chartInfoEditEn(params){
+        return post('/datamanage/chart_info/en/edit',params)
+    },
+    /*
+     * 图切换上一张下一张
+     * @param KeyWord
+     * @param ChartClassifyId
+     * @param IsShowMe
+     */
+    chartLocate(params){
+        return get('/my_chart/chart/locate',params)
     }
-
 } 

src/assets/styles/vant.scss

@@ -18,6 +18,12 @@
     color: $theme-color;
 }
 
+.van-dialog__footer{
+    .van-dialog__cancel{
+        color: #333;
+    }
+}
+
 .van-cell__title{
     font-size: 32px;
 }

src/hooks/chart/render.js

@@ -3,11 +3,13 @@
 import {onMounted,ref,nextTick,reactive} from 'vue'
 import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap} from './config'
 import Highcharts from 'highcharts/highstock';
+import HightchartsExport from 'highcharts/modules/exporting';
 import Boost from 'highcharts/modules/boost'
 import HighchartszhCN  from './highcahrts-zh_CN.js'
 import moment from 'moment'
 import _ from 'lodash';
 HighchartszhCN(Highcharts)
+HightchartsExport(Highcharts)
 Boost(Highcharts)
 
 
@@ -197,13 +199,18 @@ function concatDynamicTag(item,lang){
 /* 拼接数据列动态name */
 function setDyncmicSerieName (item,dynamic_arr,lang='zh') {
     let temName =''
-    if(lang=='zh'){
+    /* if(lang=='zh'){
         temName= dynamic_arr.length > 1
             ? `${item.EdbName}(${item.SourceName})${concatDynamicTag(item,'zh')}`
             : `${item.EdbName}${concatDynamicTag(item,'zh')}`
     }else{
         temName=item.EdbNameEn?`${item.EdbNameEn}${concatDynamicTag(item,'en')}`:''
-    }
+    } */
+    const temNameEn = item.EdbNameEn?`${item.EdbNameEn}${concatDynamicTag(item,'en')}`:''
+    const temNameZh = dynamic_arr.length > 1
+    ? `${item.EdbName}(${item.SourceName})${concatDynamicTag(item,'zh')}`
+    : `${item.EdbName}${concatDynamicTag(item,'zh')}`
+    temName = lang=='zh'?temNameZh:temNameEn?temNameEn:temNameZh
 
     if(temName.length>20){
         let temArr=[]
@@ -338,7 +345,7 @@ function setChartTitle(showChartTitle){
 
 //曲线图
 function setSplineOpt(e){
-    const data=e.EdbInfoList
+    const data=e.ChartInfo.Source===6?[e.DataResp]:e.EdbInfoList
     let series=[]
     let yAxis=[]
     let xAxis = {}
@@ -567,7 +574,8 @@ function setSeasonOpt(e){
                     styleEn:data.Unit && (!data.UnitEn)?{cursor:'pointer',color:"#999"}:{cursor:'pointer'}, // 英文样式
                     align: 'high',
                     rotation: 0,
-                    y: -15,
+                    y: -5,
+                    x:-(10 * data.Unit.length),
                     offset: -(10 * data.Unit.length),
                 },
                 max: Number(data.MaxData),
@@ -638,7 +646,8 @@ function setSeasonOpt(e){
                     styleEn:data.Unit && (!data.UnitEn)?{cursor:'pointer',color:"#999"}:{cursor:'pointer'}, // 英文样式
                     align: 'high',
                     rotation: 0,
-                    y: -15,
+                    y: -5,
+                    x:-(10 * data.Unit.length),
                     offset: -(10 * data.Unit.length),
                 },
                 max: Number(data.MaxData),
@@ -753,6 +762,12 @@ function setSeasonOpt(e){
         title: {
 		    enabled: true,
             text:e.ChartInfo.ChartName
+        },
+        legend:{
+            enabled:true,
+            verticalAlign: 'top',
+            y:-10,
+            x:(10 * data.Unit.length)/2
         }
     }
 }
@@ -1287,18 +1302,27 @@ const setCommodityChart = (leftMin,leftMax) => {
             const ctx = this;
             let str = '';
             ctx.points.forEach(item => {
-              let obj_item = data.find(_ => _.Name === item.series.name);
-              let index = commodityXData.value.findIndex(_ => _.Name === ctx.x);
-
-              str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName }</b>`
+                let obj_item = data.find(_ => _.Name === item.series.name);
+                let index = commodityXData.value.findIndex(_ => _.Name === ctx.x);
+                
+                // 合约显示
+                const haveContract=obj_item.XEdbInfoIdList[index]
+                if(haveContract){
+                    // 利润曲线指标名
+                    let edb_name = chartData.value.ChartInfo.Source === 5 
+                        ? (index === 0 ? obj_item.NameList[index] : `${chartData.value.DataResp.ProfitName}(${obj_item.NameList[index]})`)
+                        : commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
+                    str+=`<b>${ edb_name }</b>`
+
+                    if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
+                        str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
+                    }else {
+                        str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
+                    }
 
-              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
-                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
-              }else {
-                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
-              }
+                }
             })
-            return str
+            return str||'无合约'
         },
         formatterCh: function() {
             let str = ''; 

src/router/chartETA.js

@@ -0,0 +1,32 @@
+//ETA图库模块
+export const chartETARoutes=[
+    {
+        path:"/chartETA/list",
+        name:"ChartETAList",
+        component: () => import("@/views/chartETA/List.vue"),
+        meta: { 
+            title: "ETA图库",
+            keepAlive:true,
+            hasBackTop:true,
+        },
+    },
+    {
+        path:"/chartETA/search",
+        name:"ChartETASearch",
+        component: () => import("@/views/chartETA/Search.vue"),
+        meta: { 
+            title: "ETA图库",
+            keepAlive:true,
+            hasBackTop:true,
+        },
+    },
+    {
+        path:"/chartETA/chartdetail",
+        name:"ChartETAChartDetail",
+        component: () => import("@/views/chartETA/ChartDetail.vue"),
+        meta: { 
+            title: "ETA图库",
+            keepAlive:false,
+        },
+    }
+]

src/router/index.js

@@ -16,6 +16,7 @@ import {pptENRoutes} from './pptEn'
 import {myETARoutes} from './myETA'
 import {reportRoutes} from './report'
 import {reportEnRoutes} from './reportEn'
+import {chartETARoutes} from './chartETA'
 
 const routes = [
   	{
@@ -64,6 +65,8 @@ const routes = [
 			...reportRoutes,
 			// 英文研报模块
 			...reportEnRoutes,
+            //ETA图库模块
+            ...chartETARoutes,
 		]
 	},
 	

src/views/chartETA/ChartDetail.vue

@@ -0,0 +1,1207 @@
+<script setup name="ChartETAChartDetail">
+import {nextTick, onMounted,ref,reactive} from 'vue'
+import {showDialog, showToast} from 'vant'
+import apiChart from '@/api/chart'
+import { useRoute, useRouter } from 'vue-router'
+import { useWindowSize } from '@vueuse/core'
+import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
+import {useChartRender} from '@/hooks/chart/render'
+import moment from 'moment'
+import EdbInfo from './components/EdbInfo.vue'
+import SourceDetail from './components/SourceDetail.vue'
+import TreeSelectPop from './components/TreeSelectPop.vue'
+import AddChartToMyETA from './components/AddChartToMyETA.vue'
+import SetChartEnName from './components/SetChartEnName.vue'
+import {useCachedViewsStore} from '@/store/modules/cachedViews'
+import _ from 'lodash';
+
+
+const {options,axisLimitState,chartRender}=useChartRender()
+const { width } = useWindowSize()
+const cachedViewsStore=useCachedViewsStore()
+const route=useRoute()
+const router=useRouter()
+
+let routeQueryData=reactive({
+    chartType:route.query.chartType,
+    id:route.query.id,
+    chartClassifyId:route.query.chartClassifyId,
+})
+
+let currentLang = ref('')
+
+//获取图详情
+let chartInfoData=null
+let chartInfo=ref(null)
+//highchart图表
+let highChart = ref(null)
+let edbList=ref([])//指标数据
+async function getChartDetail(e){
+    const params=sameOptionType.includes(Number(routeQueryData.chartType))?{
+        ChartInfoId:Number(routeQueryData.id),
+        DateType: chartState.yearVal,
+        StartDate: chartState.startTime,
+        EndDate: chartState.endTime,
+    }:{
+        ChartInfoId:Number(routeQueryData.id),
+        Calendar: chartState.calendarType,//this.calendar_type
+        SeasonStartDate: chartState.startTime,
+        SeasonEndDate:chartState.endTime ,
+    }
+    const res=await apiChart.chartInfoById(params)
+    if(res.Ret!==200) return
+    chartInfoData=res.Data
+    chartInfo.value=res.Data.ChartInfo
+    chartActions.value = getChartActions(res.Data.ChartInfo)
+    if(res.Data.ChartInfo.Source===2){
+        edbList.value=[res.Data.EdbInfoList[0]]
+    }else{
+        edbList.value=res.Data.EdbInfoList
+    }
+    if(e==='init'){
+        chartState.yearVal=res.Data.ChartInfo.DateType
+    }
+
+    nextTick(()=>{
+        highChart.value = chartRender({
+            data:{
+                ...res.Data,
+                ChartInfo:{
+                    ...res.Data.ChartInfo,
+                    Calendar:chartState.calendarType||'公历'
+                },
+            },
+            renderId:'chart-box',
+            lang:currentLang.value,
+            changeLangIsCheck:false,
+            showChartTitle:false
+        })
+    })
+    
+}
+onMounted(() => {
+    currentLang.value = localStorage.getItem('chartETALange')==='EN'?'en':'zh'
+    initChartState(route.query)
+    getChartDetail('init')
+})
+
+const minDate=new Date(1970, 0, 1)
+const maxDate=new Date(2050, 11, 31)
+const cYear=moment().format('YYYY')
+const cMonth=moment().format('MM')
+let temStartTime=ref([cYear,cMonth])
+let temEndTime=ref([cYear,cMonth])
+let chartState=reactive({
+    showTimePop:false,
+    startTime:'',
+    endTime:'',
+    yearVal:'',
+    calendarType:'公历'
+})
+// 切换年份选项
+function handleYearChange(item){
+    chartState.yearVal=item.value
+    chartState.startTime=''
+    chartState.endTime=''
+    getChartDetail()
+}
+// 确定日期筛选
+function handleTimeChange(){
+    chartState.startTime=temStartTime.value.join('-')
+    chartState.endTime=temEndTime.value.join('-')
+    chartState.yearVal=6
+    getChartDetail()
+    chartState.showTimePop=false
+}
+
+// 季节图公历\农历切换
+function handleSeasonTypeChange(type){
+    chartState.calendarType=type
+    getChartDetail()
+}
+
+// 上下限调整
+let showLimitPop=ref(false)
+let axisLimitDataTem=reactive({//左右轴极值
+    min:'-99999999999999999',
+    leftMin:0,
+    leftMax:0,
+    rightMin:0,
+    rightMax:0,
+    rightTwoMin:0,
+    rightTwoMax:0,
+    xMin:0,
+    xMax:0,
+})
+function handleShowAxisLimitOpt(){
+    axisLimitDataTem.leftMin=axisLimitState.leftMin
+    axisLimitDataTem.leftMax=axisLimitState.leftMax
+
+    axisLimitDataTem.rightMin=axisLimitState.rightMin
+    axisLimitDataTem.rightMax=axisLimitState.rightMax
+
+    axisLimitDataTem.rightTwoMin=axisLimitState.rightTwoMin
+    axisLimitDataTem.rightTwoMax=axisLimitState.rightTwoMax
+
+    axisLimitDataTem.xMin=axisLimitState.xMin
+    axisLimitDataTem.xMax=axisLimitState.xMax
+
+    showLimitPop.value=true
+}
+// 极限修改确定
+function handleConfirmLimitChange(){
+    const data=_.cloneDeep(chartInfoData)
+
+    // 修改左轴极限
+    if(axisLimitState.hasLeftAxis){
+        if(axisLimitState.leftIndex!==-1){
+            data.EdbInfoList[axisLimitState.leftIndex].MinData=axisLimitDataTem.leftMin
+            data.EdbInfoList[axisLimitState.leftIndex].MaxData=axisLimitDataTem.leftMax
+        }else{
+            // 柱形图 取的ChartInfo中的极值
+            if(data.ChartInfo.ChartType ===7){
+                data.ChartInfo.LeftMin=axisLimitDataTem.leftMin
+                data.ChartInfo.LeftMax=axisLimitDataTem.leftMax
+            }
+            // 商品价格曲线
+            if(data.ChartInfo.ChartType ===8){
+                data.ChartInfo.LeftMin=axisLimitDataTem.leftMin
+                data.ChartInfo.LeftMax=axisLimitDataTem.leftMax
+            }
+
+
+            // 截面散点 取的DataResp
+            if(data.ChartInfo.ChartType ===10){
+                data.DataResp.YMinValue=axisLimitDataTem.leftMin
+                data.DataResp.YMaxValue=axisLimitDataTem.leftMax
+            }
+        }
+    }
+
+    // 修改右轴极限
+    if(axisLimitState.hasRightAxis){
+        if(axisLimitState.rightIndex!==-1){
+            data.EdbInfoList[axisLimitState.rightIndex].MinData=axisLimitDataTem.rightMin
+            data.EdbInfoList[axisLimitState.rightIndex].MaxData=axisLimitDataTem.rightMax
+        }
+    }
+
+    //修改右2轴极限
+    if(axisLimitState.hasRightTwoAxis){
+        if(axisLimitState.rightTwoIndex!==-1){
+            data.EdbInfoList[axisLimitState.rightTwoIndex].MinData=axisLimitDataTem.rightTwoMin
+            data.EdbInfoList[axisLimitState.rightTwoIndex].MaxData=axisLimitDataTem.rightTwoMax
+        }
+    }
+
+    // 修改X轴极限
+    if(axisLimitState.hasXAxis){
+        // 截面散点 取的DataResp
+        if(data.ChartInfo.ChartType ===10){
+            data.DataResp.XMinValue=axisLimitDataTem.xMin
+            data.DataResp.XMaxValue=axisLimitDataTem.xMax
+        }
+    }
+
+    highChart.value = chartRender({
+        data:data,
+        renderId:'chart-box',
+        lang:currentLang.value,
+        changeLangIsCheck:false,
+        showChartTitle:false
+    })
+
+    showLimitPop.value=false
+}
+
+
+// 显示指标详情
+let showEDB=ref(false)
+let showEDBData=ref({})
+function handleShowEDBInfo(item){
+    showEDBData.value=item
+    showEDB.value=true
+}
+//显示数据来源详情
+let showSourceDetail = ref(false)
+function handleShowSourceDetail(){
+    showSourceDetail.value = true
+}
+//显示更多操作栏
+let showMoreAction = ref(false)
+let chartActions = ref([])
+function getChartActions(chartInfo){
+    return [
+        {
+            type:'refresh',
+            label:'刷新',
+            show:true
+        },
+        {
+            type:'share',
+            label:'分享',
+            show:!Boolean(chartInfo.Disabled)
+        },
+        {
+            type:'saveOther',
+            label:'另存为',
+            show:true
+        },
+        {
+            type:'savePic',
+            label:'保存图片',
+            show:true
+        },
+        {
+            type:'setEnName',
+            label:'设置英文名称',
+            show:true
+        },
+        {
+            type:'addToMyETA',
+            label:'加入我的图库',
+            show:true
+        },
+        {
+            type:'delete',
+            label:'删除',
+            show:chartInfo.IsEdit
+        }
+    ]
+}
+
+function handleActionClick(action){
+    const eventMap = {
+        'refresh':refreshChart,
+        'share':getShareLink,
+        'saveOther':openSaveChartOtherDialog,
+        'savePic':saveChartPic,
+        'setEnName':openSetChartEnNameDialog,
+        'addToMyETA':openAddToMyETADialog,
+        'delete':deleteChart
+    }
+    eventMap[action.type]()
+    //showMoreAction.value = false
+}
+//刷新图表
+function refreshChart(){
+    apiChart.chartRefresh({
+        ChartInfoId:chartInfo.value.ChartInfoId
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        getChartDetail()
+        showToast({message:'刷新成功',type:'success'})
+    })
+}
+let confirmFlag = ref(true)
+//获取分享链接
+async function getShareLink(){
+    const currentLang = localStorage.getItem('chartETALange')==='EN'?'en':'ch'
+    //若当前语言设置为英文,则检测图表
+    if(currentLang==='en') {
+        !checkChartEnOption()&&(
+            await showDialog({
+                title: '提示',
+                message: '英文名称未输入完整，分享图表上可能出现空名称的情况，确定继续分享吗？',
+                showCancelButton:true
+            }).then(() => {
+                confirmFlag.value = true
+            }).catch(()=>{
+                confirmFlag.value = false
+            })
+        )
+    }
+    if(!confirmFlag.value) return 
+    const linkUrl = `${import.meta.env.VITE_CHART_LINK}?code=${chartInfo.value.UniqueCode}&fromType=share&lang=${currentLang}`
+    //console.log('url',linkUrl)
+    if(navigator.clipboard&&window.isSecureContext){
+         try{
+            await navigator.clipboard.writeText(linkUrl)
+            showToast({message:'复制链接成功',type:'success'})
+        }catch(err){
+            console.log(err);
+            showToast({message:'复制链接失败',type:'fail'})
+        }
+    }else{
+        const input = document.createElement('input')
+        input.setAttribute('readonly','readonly')
+        input.value = linkUrl
+        document.body.appendChild(input)
+        input.select();
+        document.execCommand('copy');
+        document.body.removeChild(input);
+        showToast({message:'复制链接成功',type:'success'})
+    }
+   
+}
+function checkChartEnOption(){
+    if(!chartInfo.value.ChartNameEn) return false
+    for(const data of chartInfoData.EdbInfoList){
+        if(data.EdbNameEn==""||(data.UnitEn==""&&data.Unit!="")){
+            return false
+        }
+    }
+    return true
+}
+
+let isShowSaveOtherDialog = ref(false)
+let catalogNodes = ref([])
+//另存为
+async function openSaveChartOtherDialog(){
+    const res = await apiChart.ETAChartClassifyList()
+    if(res.Ret!==200) return 
+    catalogNodes.value = res.Data?res.Data.AllNodes:[]||[]
+    isShowSaveOtherDialog.value = true
+}
+function saveOther(ClassifyId){
+    apiChart.ETAChartSaveOther({
+        ChartInfoId:chartInfo.value.ChartInfoId,
+        ChartName:chartInfo.value.ChartName+'(1)',
+        ChartClassifyId:ClassifyId
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        showToast({message:'另存为成功',type:'success'})
+        isShowSaveOtherDialog.value = false
+    })
+}
+let savePicDialogShow = ref(false)
+let savePicSrc = ref('')
+//保存图片
+function saveChartPic(){
+    const {chartWidth,chartHeight} = highChart.value
+    //打开保存图片弹窗
+    const svgData = highChart.value.getSVG({
+        chart: {
+            width: chartWidth,
+            height: chartHeight,
+        }
+    })
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    canvas.width = chartWidth*2
+    canvas.height = chartHeight*2
+    const image = new Image()
+    image.src = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgData)
+    image.onload = ()=>{
+        ctx.drawImage(image, 0, 0,chartWidth*2,chartHeight*2);
+        savePicSrc.value = canvas.toDataURL('image/png');
+        savePicDialogShow.value = true
+    }
+
+}
+let setChartEnDialogShow = ref(false)
+//设置英文名称
+function openSetChartEnNameDialog(){
+    setChartEnDialogShow.value = true
+}
+function closeSetNameDialog(type){
+    if(type==='save'){
+        getChartDetail()
+    }
+    setChartEnDialogShow.value = false
+}
+
+let isShowAddToMyETADialog = ref(false)
+//加入我的图库
+function openAddToMyETADialog(){
+    isShowAddToMyETADialog.value = true
+}
+//删除图表
+function deleteChart(){
+    showDialog({
+        title: '提示',
+        message: '删除后该图表将不能再引用，确认删除吗？',
+        showCancelButton:true
+    }).then(() => {
+        apiChart.deleteClassify({
+            ChartClassifyId:Number(routeQueryData.chartClassifyId),
+            ChartInfoId:Number(routeQueryData.id),
+        }).then(res=>{
+            if(res.Ret===200){
+                cachedViewsStore.removeCaches('ChartETAList')
+                cachedViewsStore.removeCaches('ChartETASearch')
+                showToast('删除成功')
+                setTimeout(() => {
+                    router.back()
+                }, 1000);
+            }
+        })
+    }).catch(()=>{
+        
+    })
+}
+
+//获取图排序列表数据
+const chartSortListData=ref([])
+async function getChartSortList(){
+    const res=await apiChart.chartLocate({
+        KeyWord:route.query.keyword||'',
+        ChartClassifyId:Number(route.query.chartClassifyId),
+        IsShowMe:route.query.IsShowMe=='true'?true:false
+    })
+    if(res.Ret===200){
+        chartSortListData.value=res.Data||[]
+    }
+}
+getChartSortList()
+
+// 切换图
+async function handleSwitchChart(type){
+    const index=chartSortListData.value.findIndex((item)=>item.ChartInfoId==routeQueryData.id)
+    let item=null
+    if(type==='prev'){
+        item=index===0?chartSortListData.value[chartSortListData.value.length-1]:chartSortListData.value[index-1]
+    }else{
+        item=index===chartSortListData.value.length-1?chartSortListData.value[0]:chartSortListData.value[index+1]
+    }
+    //切换前重置chartState
+    
+    routeQueryData.id=item.ChartInfoId
+    routeQueryData.chartType=item.ChartType
+    routeQueryData.chartClassifyId=item.ChartClassifyId
+    initChartState({...item,...routeQueryData})
+    getChartDetail('init')
+}
+function initChartState(data){
+    chartState.showTimePop=false
+    chartState.startTime=sameOptionType.includes(Number(data.chartType))?data.StartDate:data.SeasonStartDate
+    chartState.endTime=sameOptionType.includes(Number(data.chartType))?data.EndDate:data.SeasonEndDate
+    chartState.yearVal=data.DateType
+    chartState.calendarType=data.Calendar
+}
+
+
+</script>
+
+<template>
+    <div class="chart-detail-page" v-if="chartInfo">
+        <div class="chart-title">{{currentLang==='en'?(chartInfo.ChartNameEn||chartInfo.ChartName):chartInfo.ChartName}}</div>
+
+        <!-- 一般曲线图选择时间区间或者季节图选择日期 -->
+        <div 
+            class="select-time-box" 
+            v-if="sameOptionType.includes(chartInfo.ChartType)||chartInfo.ChartType===2" 
+            @click="chartState.showTimePop=true"
+        >
+            <img class="left-icon" src="@/assets/imgs/icon_calendar.png" alt="">
+            <span :class="['val-box',!chartState.startTime?'val-box_grey':'']">{{chartState.startTime||'开始日期'}} ~ {{chartState.endTime||'结束日期'}}</span>
+            <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"
+                >
+                    {{chartState.startTime?`${chartState.startTime} ~ ${chartState.endTime||'至今'}`:'请选择时间段'}}
+                </span>
+            </div>
+            <div class="right-action-box">
+                <div class="item" @click="showMoreAction=true" >
+                    <img src="@/assets/imgs/chartETA/more-icon.png" alt="">
+                    <span>更多设置</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 图渲染区域 -->
+        <div class="chart-render-wrap">
+            <!-- pad 切换上一张\下一张 -->
+            <img class="pad-change-chart-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('prev')" v-if="chartSortListData.length>0">
+            <img class="pad-change-chart-btn pad-change-chart-next-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('next')" v-if="chartSortListData.length>0">
+            <div class="chart-box" id="chart-box"></div>
+            <!-- 作者 -->
+            <div class="author-box" style="text-align:right">作者:{{chartInfo.SysUserRealName}}</div>
+        </div>
+        <!-- 手机端选择时间区间模块 -->
+        <div class="select-year-box" 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>
+        </div>
+        <!-- 季节图切换公/农历 -->
+        <div class="calendar-type-box" v-if="chartInfo.ChartType === 2">
+            <span 
+                :class="chartState.calendarType=='公历'?'active':''"
+                @click="handleSeasonTypeChange('公历')"
+            >公历</span>
+            <span 
+                :class="chartState.calendarType=='农历'?'active':''"
+                @click="handleSeasonTypeChange('农历')"
+            >农历</span>
+        </div>
+        <!-- 指标模块 -->
+        <div class="edb-list-box">
+            <!-- pad 设置上下限按钮 -->
+            <div class="pad-limit-set-btn" @click="handleShowAxisLimitOpt" v-if="chartInfo.Source!=3&&chartInfo.ChartType!=8">设置上下限</div>
+            <!-- <div class="list-lable">指标信息</div> -->
+            <div class="list-box">
+                <div class="list-item" v-for="item in edbList" :key="item.EdbInfoId" @click="handleShowEDBInfo(item)">
+                    <span class="date">{{item.LatestDate}}</span>
+                    <span class="edb-name van-ellipsis" :style="{color:item.ChartColor}">{{item.EdbName}}</span>
+                    <span class="value">{{item.LatestValue}}</span>
+                </div>
+            </div>
+        </div>
+        <!-- 底部悬浮操作模块 -->
+        <div class="fix-bot-action-box">
+            <div class="item" @click="handleSwitchChart('prev')" v-if="chartSortListData.length>0">
+                <img class="icon" src="@/assets/imgs/icon_arrow.png" alt="">
+                <div>上一张</div>
+            </div>
+            <div class="item" @click="handleSwitchChart('next')" v-if="chartSortListData.length>0">
+                <img class="icon" style="transform: rotate(180deg);" src="@/assets/imgs/icon_arrow.png" alt="">
+                <div>下一张</div>
+            </div>
+            <div class="item" @click="handleShowAxisLimitOpt" v-if="chartInfo.Source!=3&&chartInfo.ChartType!=8">
+                <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
+                <div>上下限</div>
+            </div>
+            <div class="item" @click="showMoreAction=true">
+                <img class="icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
+                <div>更多</div>
+            </div>
+        </div>
+        <!-- 选择日期弹窗 -->
+        <van-popup 
+            v-model:show="chartState.showTimePop"
+            :position="width>650?'center':'bottom'"
+            :style="width>650?{ width: '400px'}:''"
+        >
+            <div class="time-picker-wrap">
+                <van-picker-group
+                    title="选择起始时间"
+                    :tabs="['开始时间', '结束时间']"
+                    @cancel="chartState.showTimePop=false"
+                    @confirm="handleTimeChange"
+                >
+                    <van-date-picker
+                        v-model="temStartTime"
+                        :min-date="minDate"
+                        :max-date="maxDate"
+                        :columns-type="chartInfo.ChartType==2?['year']:['year','month']"
+                    />
+                    <van-date-picker 
+                        v-model="temEndTime" 
+                        :min-date="minDate" 
+                        :max-date="maxDate"
+                        :columns-type="chartInfo.ChartType==2?['year']:['year','month']"
+                    />
+                </van-picker-group>
+            </div>
+        </van-popup>
+        <!-- 指标详情弹窗 -->
+        <van-popup 
+            v-model:show="showEDB"
+            :position="width>650?'right':'bottom'"
+            round
+            closeable
+            :style="width>650?{ width: '400px', height: '100%' }:''"
+            >
+                <EdbInfo
+                    :show="showEDB"
+                    :data="showEDBData"
+                    :tableData="edbList"
+                    @showSourceDetail="handleShowSourceDetail"
+                />
+        </van-popup>
+        <!--  数据来源弹窗-->
+        <van-popup
+            v-model:show="showSourceDetail"
+            position="center"
+            round
+            closeable
+            :style="{ width: '400px'}"
+        >
+            <SourceDetail
+                :show="showSourceDetail"
+                :EdbInfoId="showEDBData.EdbInfoId"
+            />
+        </van-popup> 
+        <!-- 上下限调整弹窗 -->
+        <van-popup 
+            v-model:show="showLimitPop"
+            :position="width>650?'center':'bottom'"
+            round
+            closeable
+            :style="width>650?{ width: '400px'}:''"
+        >
+            <div class="global-pop-wrap_mobile chart-set-limit-wrap">
+                <div class="head-box">
+                    <div class="title">上下限设置</div>
+                </div>
+                <div class="content">
+                    <!-- 左轴 -->
+                    <div class="item-box" v-if="axisLimitState.hasLeftAxis">
+                        <span class="lable-text">左轴</span>
+                        <div class="input-box">
+                            <div class="item">
+                                <div class="type-text">上限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.leftMax" />
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="type-text">下限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.leftMin" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 右轴 -->
+                    <div class="item-box" v-if="axisLimitState.hasRightAxis">
+                        <span class="lable-text">右轴</span>
+                        <div class="input-box">
+                            <div class="item">
+                                <div class="type-text">上限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightMax" />
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="type-text">下限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightMin" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 右二轴 -->
+                    <div class="item-box" v-if="axisLimitState.hasRightTwoAxis">
+                        <span class="lable-text">右2轴</span>
+                        <div class="input-box">
+                            <div class="item">
+                                <div class="type-text">上限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightTwoMax" />
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="type-text">下限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightTwoMin" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- x轴 -->
+                    <div class="item-box" v-if="axisLimitState.hasXAxis">
+                        <span class="lable-text">X轴</span>
+                        <div class="input-box">
+                            <div class="item">
+                                <div class="type-text">上限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.xMax" />
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="type-text">下限</div>
+                                <div class="step-box">
+                                    <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.xMin" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bot-btn-box" @click="handleConfirmLimitChange">确定</div>
+            </div>
+        </van-popup>
+        <!-- 更多设置弹窗 -->
+        <van-popup
+            v-model:show="showMoreAction"
+            :position="width>650?'center':'bottom'"
+            round
+            closeable
+            :style="width>650?{ width: '400px'}:''"
+        >
+            <div class="global-pop-wrap_mobile chart-more-action-wrap">
+                    <div class="head-box">
+                        <div class="title van-ellipsis">{{chartInfo.ChartName}}</div>
+                    </div>
+                    <div class="action-box">
+                        <template v-for="item in chartActions" :key="item.types">
+                            <div class="action-item" v-if="item.show" @click="handleActionClick(item)">
+                                {{item.label}}
+                            </div>
+                        </template>
+                        
+                    </div>
+            </div>
+        </van-popup>
+        <!-- 另存为弹窗 -->
+        <TreeSelectPop 
+            :isShowDialog="isShowSaveOtherDialog"
+            :dialogPosition="width>650?'center':'bottom'"
+            :catalogNodes="catalogNodes"
+            :chartInfo="chartInfo"
+            popTitle="另存为"
+            @close="isShowSaveOtherDialog=false"
+            @confirmMove="saveOther"
+        />
+        <!-- 加入我的图库弹窗 -->
+        <AddChartToMyETA 
+            :isShowDialog="isShowAddToMyETADialog"
+            :dialogPosition="width>650?'center':'bottom'"
+            :chartInfo="chartInfo"
+            @close="isShowAddToMyETADialog=false"
+        />
+        <!--保存图片弹窗 -->
+        <van-popup 
+            v-model:show="savePicDialogShow"
+            position="center"
+            round
+            closeable
+            :style="{width:'80%',padding:'30px'}"
+        >
+            <img :src="savePicSrc" alt="" style="width:100%;box-sizing: border-box;">
+            <p style="text-align: center;color:#999;margin-top: 10px;">长按保存图片</p>
+        </van-popup>
+        <!-- 设置英文名称弹窗 -->
+        <van-popup
+            v-model:show="setChartEnDialogShow"
+            position="bottom"
+            :style="{width:'100%',height:'100%'}"
+        >
+            <SetChartEnName 
+                :isShow="setChartEnDialogShow"
+                :chartInfo="chartInfoData"
+                :chartType="Number(route.query.chartType)"
+                @close="closeSetNameDialog"
+            />
+        </van-popup>
+
+    </div>
+</template>
+
+<style lang="scss">
+.chart-detail-page{
+    .rename-wrap{
+        padding:48px;
+        input{
+            padding: 24px 32px;
+            border-radius: 12px;
+            background-color: #F6F6F6;
+            width: 100%;
+        }
+        .label{
+            color: #666666;
+            margin-bottom: 32px;
+            text-align: center;
+        }
+    }
+    @media screen and (min-width:$media-width){
+        .rename-wrap{
+            padding:24px;
+            input{
+                padding: 12px 16px;
+                border-radius: 6px;
+                background-color: #F6F6F6;
+                width: 100%;
+            }
+            .label{
+                margin-bottom: 16px;
+            }
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+.chart-detail-page{
+    padding: $page-padding;
+    padding-bottom: 120px;
+    .chart-title{
+        font-size: 36px;
+        margin-bottom: 56px;
+    }
+
+    .chart-render-wrap{
+        .pad-change-chart-btn{
+            display: none;
+        }
+    }
+
+    .chart-box{
+        width: 100%;
+        height: 700px;
+    }
+
+    .select-time-box{
+        display: flex;
+        align-items: center;
+        padding-bottom: 32px;
+        border-bottom: 1px solid $border-color;
+        .left-icon{
+            width: 48px;
+            height: 48px;
+        }
+        .right-icon{
+            margin-left: auto;
+        }
+        .val-box{
+            margin-left: 32px;
+            font-size: 32px;
+            &.val-box_grey{
+                color: $font-grey_999;
+            }
+        }
+    }
+    .select-year-box{
+        width: 100vw;
+        position: relative;
+        left: -$page-padding;
+        margin-top: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
+        height: 88px;
+        display: flex;
+        align-items: center;
+        overflow-y: auto;
+        padding: 0 $page-padding;
+        &::-webkit-scrollbar{
+            height: 0;
+        }
+        .item{
+            line-height: 88px;
+            position: relative;
+            height: 100%;
+            flex-shrink: 0;
+            display: inline-block;
+            margin-right: 40px;
+            font-size: 32px;
+            color: $font-grey_999;
+            &.active{
+                color: #333;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 50px;
+                    height: 6px;
+                    border-radius: 3px;
+                    background-color: $theme-color;
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+    }
+    .calendar-type-box{
+        width: 404px;
+        margin: 30px auto;
+        text-align: center;
+        border: 1px solid $theme-color;
+        border-radius: 12px;
+        overflow: hidden;
+        span{
+            display: inline-block;
+            width: 200px;
+            height: 80px;
+            line-height: 80px;
+            color: $theme-color;
+            font-weight: bold;
+            &.active{
+                background-color: $theme-color;
+                color: #fff;
+            }
+        }
+    }
+    .pad-time-action-wrap{
+        display: none;
+    }
+    .edb-list-box{
+        .pad-limit-set-btn{
+            display: none;
+        }
+        .list-lable{
+            font-size: 36px;
+            color: #000;
+            margin-bottom: 20px;
+            margin-top: 40px;
+        }
+        .list-item{
+            padding:18px;
+            display: flex;
+            gap:0 20px;
+            border-bottom: 1px solid #DCDFE6;
+            &:last-child{
+                border-bottom: none;
+            }
+            .edb-name{
+                flex: 1;
+                /* text-align: center; */
+            }
+        }
+    }
+
+    .fix-bot-action-box{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 99;
+        background-color: #fff;
+        border-top: 1px solid $border-color;
+        height: 112px;
+        display: flex;
+        align-items: center;
+        .item{
+            height: 100%;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+            .icon{
+                width: 40px;
+                height: 40px;
+                margin-bottom: 5px;
+            }
+        }
+    }
+    .chart-set-limit-wrap{
+        .head-box{
+            .title{
+                padding: 0 $page-padding;
+                font-size: 36px;
+                font-weight: 600;
+                line-height: 120px;
+            }
+        }
+        .bot-btn-box{
+            line-height: 112px;
+            text-align: center;
+            color: $theme-color;
+            font-size: 32px;
+        }
+        .content{
+            padding: $page-padding;
+            .item-box{
+                display: flex;
+                align-items: flex-end;
+                margin-bottom: 30px;
+                .lable-text{
+                    width: 100px;
+                }
+                .input-box{
+                    flex: 1;
+                    display: flex;
+                    .item{
+                        flex: 1;
+                        text-align: center;
+                        .type-text{
+                            margin-bottom: 40px;
+                        }
+                        .step-box{
+                            display: inline-block;
+                            :deep(.van-stepper){
+                                display: flex;
+                                justify-content: center;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    
+    }
+    .chart-more-action-wrap{
+        .head-box{
+            .title{
+                width: 100%;
+                padding:34px 100px;
+                box-sizing: border-box;
+                font-size: 36px;
+                font-weight: 600;
+                text-align: center;
+            }
+        }
+        .action-box{
+            .action-item{
+                text-align: center;
+                padding:32px 84px;
+                border-bottom: 1px solid #DCDFE6;
+                &:last-child{
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+    @media screen and (min-width:$media-width){
+        padding:30px;
+        .chart-title{
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 30px;
+        }
+        .chart-render-wrap{
+            position: relative;
+            .pad-change-chart-btn{
+                display: block;
+                width: 48px;
+                height: 48px;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                left: 0px;
+                &.pad-change-chart-next-btn{
+                    right: 0;
+                    left: auto;
+                    transform: translateY(-50%) rotate(180deg);
+                }
+            }
+        }
+        .chart-box{
+            width: 85%;
+            height: 370px;
+            margin: 0 auto;
+        }
+        .select-time-box,.select-year-box,.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: 15px;
+                        height: 15px;
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+        .calendar-type-box{
+            width: 224px;
+            margin: 20px auto;
+            border-radius: 4px;
+            span{
+                width: 111px;
+                height: 38px;
+                line-height: 38px;
+            }
+        }
+        .edb-list-box{
+            position: relative;
+            left: -30px;
+            border-top: 1px solid $border-color;
+            width: 100vw;
+            padding: 0 30px;
+            margin-top: 20px;
+            .pad-limit-set-btn{
+                display: block;
+                text-align: right;
+                margin: 20px 0;
+                color: $theme-color;
+            }
+            .list-lable{
+                margin-top: 20px;
+                font-size: 16px;
+                margin-bottom: 14px;
+            }
+            .list-box{
+                //border: 1px solid $border-color;
+                .list-item{
+                    padding: 18px;
+                }
+            }
+        }
+        .chart-set-limit-wrap{
+            .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;
+                padding: 30px;
+                .item-box{
+                    margin-bottom: 15px;
+                    .lable-text{
+                        width: 50px;
+                    }
+                    .input-box{
+                        .item{
+                            .type-text{
+                                margin-bottom: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .chart-more-action-wrap{
+        .head-box{
+            .title{
+                padding:17px 50px;
+                font-size: 18px;
+            }
+        }
+        .action-box{
+            .action-item{
+                padding:16px 42px;
+            }
+        }
+    }
+    }
+}
+</style>

src/views/chartETA/List.vue

@@ -0,0 +1,683 @@
+<script setup name="ChartETAList">
+//ETA图库页面
+import {ref,reactive,watch} from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast,showDialog} from "vant";
+import { useWindowSize } from '@vueuse/core'
+import CatalogTree from './components/CatalogTree.vue';
+import OptionPopup from './components/OptionPopup.vue';
+import AddChartToMyETA from './components/AddChartToMyETA.vue';
+import TreeSelectPop from './components/TreeSelectPop.vue';
+import apiChart from '@/api/chart'
+
+import {useCatalogList} from './hooks/useCatalogList';
+
+const { width } = useWindowSize()
+const router=useRouter()
+
+const {
+    optArrChart,//图表操作列表
+    currentLang,//中英文标识
+    catalogNodes,//目录列表
+    getCatalogList,//获取图库目录
+    UserInfo,//用户信息
+    authOptArr,
+} = useCatalogList()
+
+//跳转至图表详情页
+const goChartDetail = (item)=>{
+    router.push({
+        path:'/chartETA/chartdetail',
+        query:{
+            id:item.ChartInfoId,
+            chartType:item.ChartType,
+            chartClassifyId:listState.cid,
+            IsShowMe:listState.IsShowMe,
+            DateType:item.DateType,
+            StartDate:(item.DateType===5||item.DateType===6)?item.StartDate:'',
+            EndDate:(item.DateType===5||item.DateType===6)?item.EndDate:'',
+            Calendar:item.Calendar?item.Calendar:'公历',
+            SeasonStartDate:item.SeasonStartDate,
+            SeasonEndDate:item.SeasonEndDate,
+        }
+    })
+}
+
+
+//是否展示目录列表
+const IsShowCatalog = ref(false)
+
+//展示目录列表
+function showCatalog(){
+    IsShowCatalog.value = true
+}
+//切换中英文
+async function changeLang(){
+    const res = await apiChart.setUserLang({
+        ConfigCode:'chart_language',
+        ConfigValue:currentLang.value==='EN'?'CN':'EN'
+    })
+    if(res.Ret!==200) return 
+    showToast({message:`切换${currentLang.value==='EN'?'中文':'英文'}成功`,type:'success'})
+    currentLang.value = currentLang.value==='EN'?'CN':'EN'
+    localStorage.setItem('chartETALange',currentLang.value)
+}
+//激活的目录路径
+const catalogMenu = ref('')
+//目录被点击 type:['node'一级目录,'item'二级目录]
+function catalogItemClick({item,type='node',parent}){
+    catalogMenu.value = type==='node'?item.ChartClassifyName||'':parent.ChartClassifyName+'/'+item.ChartClassifyName
+    listState.cid = item.ChartClassifyId
+    listState.list=[]
+    listState.page=1
+    getChartList()
+}
+
+//是否展示操作栏
+const showOptPopup = ref(false)
+//操作项
+const currentOptArr = ref([])
+//操作的节点
+const currentNode = ref({})
+//展示操作栏
+function showFileOpt({node,optArr}){
+    currentNode.value = node
+    currentOptArr.value = authOptArr(node,optArr)
+    showOptPopup.value = true
+}
+
+//目录/图表操作栏被点击,处理事件(添加图表分类,添加子分类,重命名,删除分类,移动分类,加入我的图库,移动图表)
+function showFileOptClick({node,opt}){
+    const eventMap = {
+        'addNext':openEditNameDialog,
+        'reName':openEditNameDialog,
+        'delete':openDeleteDialog,
+        'moveTo':openMoveDialog,
+        'addChart':openAddChartDialog,
+        'moveChart':openMoveChartDialog,
+        'cancel':()=>{showOptPopup.value = false}
+    }
+    eventMap[opt.id](node,opt)
+}
+
+//编辑目录参数
+const editNameState = reactive({
+    isShowDialog:false,//是否展示编辑名称弹窗
+    ChartClassifyId:0,//目录id,为0表示新增
+    ChartClassifyName:'',
+    Level:1,//层级,大于1时parentName有值
+    parentName:'',//上级目录的名称
+    type:'addNew',//编辑类型
+    title:'添加图表分类',//弹窗标题 ['添加图表分类','添加子分类','重命名']
+})
+//编辑目录
+function openEditNameDialog(node,opt){
+    const {Level,ChartClassifyId,ChartClassifyName,parentName} = node
+    editNameState.Level = Level||1
+    editNameState.ChartClassifyId = opt.id==='addNext'?0:ChartClassifyId||0
+    editNameState.ChartClassifyName = opt.id==='addNext'?'':ChartClassifyName||''
+    editNameState.parentName = opt.id==='addNext'?ChartClassifyName:parentName||''
+    editNameState.ParentId=opt.id==='addNext'?node.ChartClassifyId:node.ParentId||0
+    editNameState.title = opt.label
+    editNameState.type = opt.id
+    editNameState.isShowDialog = true
+}
+//根据editNameState调用对应接口
+function handleConfirmEditClassify(){
+    //先判断输入框有无内容
+    if(!editNameState.ChartClassifyName.length){
+        showToast('请填写分类名称！')
+        return
+    }
+    if(editNameState.type==='reName'){
+        editClassify()
+    }else{
+        addNewClassify()
+    }
+}
+function handleAddClassifyBeforeClose(action){
+    return action==='cancel'
+}
+
+//添加图表分类,添加子分类
+async function addNewClassify(){
+    const {ChartClassifyName,type,ParentId} = editNameState
+    const res = await apiChart.addNewClassify({
+        ChartClassifyName:ChartClassifyName||'',
+        Level:type==='addNext'?1:0,
+        ParentId
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'添加成功',type:'success'})
+    getCatalogList()
+    editNameState.isShowDialog = false
+}
+//重命名
+async function editClassify(){
+    const {ChartClassifyId,ChartClassifyName} = editNameState
+    const res  = await apiChart.editClassify({
+        ChartClassifyId,ChartClassifyName
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'重命名成功',type:'success'})
+    getCatalogList()
+    editNameState.isShowDialog=false
+}
+
+//删除分类
+async function openDeleteDialog(node){
+    const res = await apiChart.deleteCheck({
+        ChartClassifyId:node.ChartClassifyId,
+        ChartInfoId:node.ChartInfoId
+    })
+    if(res.Ret!==200) return
+    //可删除包括删除图表和删除图表分类两种情况,但列表里只能删除分类
+    const hintTextMap = {
+        0:'确定删除当前分类吗？',
+        1:'该分类下关联图表不可删除!',
+        2:'确认删除当前分类及包含的子分类吗？'
+    }
+    showDialog({
+        title: '提示',
+        message: hintTextMap[res.Data.DeleteStatus||0],
+        showCancelButton:res.Data.DeleteStatus!==1
+    }).then(() => {
+        if(res.Data.DeleteStatus!==1){
+            apiChart.deleteClassify({
+                ChartClassifyId:node.ChartClassifyId,
+                ChartInfoId:node.ChartInfoId
+            }).then(res=>{
+                if(res.Ret!==200) return 
+                showToast({message:'删除成功',type:'success'})
+                getCatalogList()
+            })
+        }
+    }).catch(()=>{})
+}
+
+//移动分类参数
+const moveClassState = reactive({
+    isShowPopup:false,//是否显示移动分类弹窗
+    ClassifyId:0,//移动的分类id
+    ParentClassifyId:0,//移动至哪个分类下
+    PrevClassifyId:0,//移动后所处的位置,由于不能拖拽,一直为0
+    NextClassifyId:0
+})
+//移动分类
+function openMoveDialog(node){
+    const {ChartClassifyId} = node
+    moveClassState.ClassifyId = ChartClassifyId
+    moveClassState.isShowPopup = true
+}
+function handleMoveClassify({selectedValues}){
+    moveClassState.ParentClassifyId = selectedValues[0]||0
+    moveClassify()
+}
+function closeMoveDialog(){
+    moveClassState.isShowPopup = false
+    moveClassState.ClassifyId = 0
+    moveClassState.ParentClassifyId = 0
+    moveClassState.PrevClassifyId = 0
+    moveClassState.NextClassifyId = 0
+}
+async function moveClassify(){
+    const {ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId} = moveClassState
+    const res = await apiChart.moveClassify({
+        ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'移动成功',type:'success'})
+    await getCatalogList()
+    //点击移动后的上层目录
+    const parentNode = catalogNodes.value.find(node=>node.ChartClassifyId===ParentClassifyId)
+    const moveNode = parentNode?parentNode.Children.find(node=>node.ChartClassifyId===ClassifyId):null
+    moveNode&&catalogItemClick({item:moveNode,type:'item',parent:parentNode})
+    moveClassState.isShowPopup = false
+
+}
+
+//添加我的图库参数
+const addChartState = reactive({
+    isShowDialog:false,
+    chartInfo:{}
+})
+function openAddChartDialog(node){
+    addChartState.chartInfo = node
+    addChartState.isShowDialog = true
+}
+//移动图表参数
+const moveChartState = reactive({
+    isShowDialog:false,
+    popTitle:'移动至',
+    catalogNodes:catalogNodes,
+    chartInfo:{}
+})
+function openMoveChartDialog(node){
+    moveChartState.chartInfo = node
+    moveChartState.isShowDialog = true
+}
+
+async function MoveChart(moveId){
+    const res = await apiChart.moveChart({
+        ChartClassifyId:moveId,
+        ChartInfoId:moveChartState.chartInfo.ChartInfoId,
+        PrevChartInfoId:0,
+        NextChartInfoId:0
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'移动图表成功',type:'success'})
+    //如果分类id未0 手动修改移动的图表
+    if(listState.cid===0){
+        listState.list.find(item=>{
+            if(item.ChartInfoId===moveChartState.chartInfo.ChartInfoId){
+                item.ChartClassifyId = moveId
+            }
+        })
+    }else{//如果在分类下，重新获取chartList
+        window.scrollTo({top:0})
+        listState.list=[]
+        listState.page=1
+        //设置数据已加载完毕，因为当滚动条不在顶部时，清空列表内容会触发onLoad
+        listState.finished = true 
+        //这个函数调用完成后，会把finished重置成正确的值
+        getChartList()
+    }
+    
+    moveChartState.isShowDialog = false
+}
+
+//图表列表
+const listState = reactive({
+    cid:0,
+    list:[],
+    page:1,
+    pageSize:15,
+    finished:false,
+    loading:false,
+    total:0,
+    IsShowMe:false
+})
+//获取图表列表
+async function getChartList(){
+    const {pageSize,cid,page,IsShowMe} = listState
+    const res = await apiChart.pubChartList({
+        PageSize: pageSize,
+        CurrentIndex: page,
+        ChartClassifyId: cid,
+        IsShowMe,
+    })
+    if(res.Ret!==200) return 
+    const arr = res.Data?res.Data.List:[]
+    listState.list = [...listState.list,...arr]
+    listState.total = res.Data?res.Data.Paging.Totals:0
+    listState.finished = res.Data?res.Data.Paging.IsEnd:true
+    listState.loading=false
+}
+
+watch(()=>listState.IsShowMe,()=>{
+    window.scrollTo({top:0})
+    listState.list=[]
+    listState.page=1
+    //设置数据已加载完毕，因为当滚动条不在顶部时，清空列表内容会触发onLoad
+    listState.finished = true 
+    //这个函数调用完成后，会把finished重置成正确的值
+    getChartList()
+})
+
+//下拉加载
+function onLoad(){
+    if(IsShowCatalog.value) return
+    listState.page++
+    getChartList()
+}
+
+getCatalogList()
+getChartList()
+</script>
+
+<template>
+    <div class="chart-eta-list-wrap">
+        <div class="select-wrap">
+            <div class="search-box">
+                <van-search 
+                    shape="round" 
+                    readonly 
+                    placeholder="请输入图表名称"
+                    style="flex:1;padding-left:0"
+                    @click-input="$router.push('/chartETA/search')"
+                />
+                <div class="lang-icon icon" @click="changeLang">
+                    <img v-if="currentLang==='CN'" src="@/assets/imgs/chartETA/lang-icon.png" alt="">
+                    <img v-if="currentLang==='EN'" src="@/assets/imgs/chartETA/langEn-icon.png" alt="">
+                </div>
+                <div class="list-icon icon" @click="showCatalog">
+                    <img src="@/assets/imgs/chartETA/list-icon.png" alt="">
+                </div>
+            </div>
+            <p style="font-weight: bold;word-break: break-all;margin-bottom: 5px;">{{ catalogMenu }}</p>
+            <div class="select-box">
+                <span>共{{listState.total}}张图表</span>
+                <span> <van-checkbox v-model="listState.IsShowMe">只看我的</van-checkbox></span>
+            </div>
+        </div>
+        <div class="chart-list-wrap">
+            <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 in listState.list" 
+                        :key="item.ChartInfoId"
+                        @click="goChartDetail(item)"
+                    >
+                        <div class="title">{{currentLang==='EN'?(item.ChartNameEn||item.ChartName):item.ChartName}}</div>
+                        <img class="img" :src="item.ChartImage" alt="">   
+                        <div class="time">
+                            <span>{{item.CreateTime.slice(0,10)}}</span>
+                            <span class="tool-icon" @click.stop="showFileOpt({node:item,optArr:optArrChart})" v-if="authOptArr(item,optArrChart).length">
+                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </van-list>
+        </div>
+        <!-- 目录列表 -->
+        <van-popup v-model:show="IsShowCatalog" position="right" class="catalog-list-wrap" style="height:100%">
+            <div class="catalog-list">
+                <div class="top sticky-part">
+                    <h3>分类</h3>
+                    <van-icon name="cross" @click.stop="IsShowCatalog=false"/>
+                </div>
+                <div class="list-box">
+                    <CatalogTree 
+                        :catalog-nodes="catalogNodes"
+                        :showFileOpt="showFileOpt"
+                        :activeId="listState.cid"
+                        @handleCatalogItemClick="catalogItemClick"
+                    />
+                </div>
+                <div class="bottom sticky-part" v-if="['rai_admin', 'ficc_admin','admin'].includes(UserInfo.RoleTypeCode)">
+                    <span @click.stop="openEditNameDialog({},{id:'addNew',label:'添加图表分类'})">添加图表分类</span>
+                </div>
+            </div>
+        </van-popup>
+        <!-- 操作栏 -->
+        <OptionPopup 
+            :show-popup="showOptPopup"
+            :node="currentNode"
+            :optArr="currentOptArr"
+            :showFileOptClick="showFileOptClick"
+            @close="showOptPopup=false"
+        />
+        <!-- 添加/重命名一二级分类 弹窗 -->
+        <van-dialog 
+            v-model:show="editNameState.isShowDialog" 
+            :title="editNameState.title" 
+            show-cancel-button
+            confirmButtonText="确定"
+            @confirm="handleConfirmEditClassify"
+            :before-close="handleAddClassifyBeforeClose"
+        >
+            <div class="rename-wrap">
+                <div class="label" v-if="editNameState.Level>1||editNameState.type==='addNext'">一级目录：{{editNameState.parentName}}</div>
+                <input type="text" placeholder="请输入分类名称" v-model="editNameState.ChartClassifyName">
+            </div>
+        </van-dialog>
+        <!-- 移动分类 弹窗-->
+        <van-popup v-model:show="moveClassState.isShowPopup" round :position="width>650?'center':'bottom'" class="move-popup">
+            <van-picker
+                title="移动至"
+                :columns="catalogNodes"
+                :columns-field-names="{text:'ChartClassifyName',value:'ChartClassifyId'}"
+                @confirm="handleMoveClassify"
+                @cancel="closeMoveDialog"
+                />
+        </van-popup>
+        <!-- 加入我的图库 弹窗 -->
+        <AddChartToMyETA 
+            :isShowDialog="addChartState.isShowDialog"
+            :chartInfo="addChartState.chartInfo"
+            :dialogPosition="width>650?'center':'bottom'"
+            @close="addChartState.isShowDialog=false"
+        />
+        <!-- 移动/另存为图表 弹窗 -->
+        <TreeSelectPop 
+            :isShowDialog="moveChartState.isShowDialog"
+            :popTitle="moveChartState.popTitle"
+            :catalogNodes="moveChartState.catalogNodes"
+            :chartInfo="moveChartState.chartInfo"
+            :dialogPosition="width>650?'center':'bottom'"
+            @close="moveChartState.isShowDialog=false"
+            @confirmMove="MoveChart"
+        />
+    </div>
+</template>
+<style lang="scss">
+.chart-eta-list-wrap{
+    .catalog-list-wrap{
+        width: 65%;
+    }
+    .rename-wrap{
+        padding:48px;
+        input{
+            padding: 24px 32px;
+            border-radius: 12px;
+            background-color: #F6F6F6;
+            width: 100%;
+        }
+        .label{
+            color: #666666;
+            margin-bottom: 32px;
+            text-align: center;
+        }
+    }
+    @media screen and (min-width:$media-width){
+        .catalog-list-wrap{
+            width: 30%;
+        }
+        .move-popup{
+            width:375px;
+        }
+        .rename-wrap{
+            padding:24px;
+            input{
+                padding: 12px 16px;
+                border-radius: 6px;
+                background-color: #F6F6F6;
+                width: 100%;
+            }
+            .label{
+                margin-bottom: 16px;
+            }
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+.chart-eta-list-wrap{
+    .select-wrap{
+        padding: 30px;
+        position: sticky;
+        top:0;
+        background-color: #fff;
+        .search-box{
+            display: flex;
+            align-items: center;
+            .icon{
+                margin-left: 10px;
+                width: 70px;
+                height:70px;
+                background-color: #F2F3FF;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                img{
+                    width:45px;
+                    height:45px;
+                }
+            }
+        }
+        .select-box{
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+        }
+    }
+    .chart-list-wrap{
+        //margin-top:15px;
+        padding: 0 30px; 
+        padding-bottom: 30px;
+        .chart-list{
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 30px 0;
+            .chart-list-item{
+                box-sizing: border-box;
+                width: 330px;
+                padding: 10px 14px;
+                border: 1px solid $border-color;
+                border-radius: 12px;
+                .title{
+                    min-height: 70px;
+                    overflow: hidden;
+                    -webkit-line-clamp: 2;
+                    text-overflow: ellipsis;
+                    display:-webkit-box !important;
+                    -webkit-box-orient:vertical;
+                    word-break: break-word;
+                }
+                .img{
+                        width: 100%;
+                        height: 220px;
+                        display: block;
+                        margin: 10px 0;
+                    }
+                .time{
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 28px;
+                    color: $font-grey_999;
+                    .tool-icon{
+                        width:30px;
+                        text-align: right;
+                        img{
+                            width:5px;
+                        }
+                    }
+                }
+                
+            }
+        }
+    }
+    .catalog-list{
+        box-sizing: border-box;
+        height: 100%;
+        .sticky-part{
+            position:sticky;
+            background-color: white;
+            z-index: 99;
+            left:0;
+            right:0;
+        }
+        .top{
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid #DCDFE6;
+            padding: 0 15px;
+            align-items: center;
+            top:0;
+        }
+        .bottom{
+            display: flex;
+            padding:48px;
+            bottom:0;
+            span{
+                flex: 1;
+                background-color: #0052D9;
+                color: white;
+                text-align: center;
+                border-radius: 6px;
+                padding:16px;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+    @media screen and (min-width:$media-width){
+        .select-wrap{
+            top:60px;
+            padding:30px;
+            .search-box{
+                .icon{
+                    margin-left: 10px;
+                    width: 40px;
+                    height:40px;
+                    background-color: #F2F3FF;
+                    border-radius: 50%;
+                    img{
+                        width:25px;
+                        height:25px;
+                    }
+                }
+            }
+            .select-box{
+                margin-top:20px;
+            }
+        }
+        .chart-list-wrap{
+            padding:0 30px;
+            .chart-list{
+                gap: 20px 4%;
+                justify-content:flex-start;
+                .chart-list-item{
+                    box-sizing: border-box;
+                    width: 22%;
+                    padding: 10px 14px;
+                    border: 1px solid $border-color;
+                    border-radius: 6px;
+                    .title{
+                        min-height: 36px;
+                    }
+                    .img{
+                        width: 100%;
+                        height: auto;
+                        display: block;
+                        margin: 10px 0;
+                    }
+                    .time{
+                        font-size: 14px;
+                        .tool-icon>img{
+                            width:3px;
+                        }
+                    }
+                }
+            }
+        }
+        .catalog-list{
+            .bottom{
+                display: flex;
+                padding:24px;
+                bottom:0;
+                span{
+                    flex: 1;
+                    background-color: #0052D9;
+                    color: white;
+                    text-align: center;
+                    border-radius: 6px;
+                    padding:8px;
+                    box-sizing: border-box;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/chartETA/Search.vue

@@ -0,0 +1,168 @@
+<script setup name="ChartETASearch">
+import {ref,reactive} from 'vue'
+import apiChart from '@/api/chart'
+import { showToast } from 'vant'
+import moment from 'moment'
+import { useRouter } from 'vue-router'
+
+const router=useRouter()
+
+const currentLang = localStorage.getItem('chartETALange')||'CN'
+
+const keyword=ref('')
+const listState = reactive({
+    list:[],
+    page:1,
+    pageSize:20,
+    finished:false,
+    loading:false
+})
+async function getList(){
+    const res=await apiChart.ETAChartListByES({
+        CurrentIndex:listState.page,
+        PageSize:listState.pageSize,
+        Keyword:keyword.value,
+        IsShowMe:false
+    })
+    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:'/chartETA/chartdetail',
+        query:{
+            id:item.ChartInfoId,
+            chartType:item.ChartType,
+            chartClassifyId:0,
+            keyword:keyword.value
+        }
+    })
+}
+
+</script>
+
+<template>
+    <div class="chart-search-list-page">
+        <div class="search-box">
+            <van-search 
+                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">{{currentLang==='EN'?(item.ChartNameEn||item.ChartName):item.ChartName}}</div>
+                    <img class="img" :src="item.ChartImage" alt="">
+                    <div class="time">
+                        <span>{{moment(item.CreateTime).format('YYYY-MM-DD')}}</span>
+                        <span>{{item.SysUserRealName}}</span>
+                    </div>
+                </li>
+                <li class="item" style="height:0;padding:0;border:none"></li>
+                <li class="item" style="height:0;padding:0;border:none"></li>
+                <li class="item" style="height:0;padding:0;border:none"></li>
+            </ul>
+        </van-list>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.search-box{
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    z-index: 99;
+}
+.list-wrap{
+    padding: $page-padding;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .item{
+        width: 326px;
+        padding: 14px;
+        background: #FFFFFF;
+        border: 1px solid $border-color;
+        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.03);
+        border-radius: 12px;
+        box-sizing: border-box;
+        margin-bottom: 30px;
+        .img{
+            margin: 14px 0;
+            width: 100%;
+            height: 220px;
+        }
+        .time{
+            display: flex;
+            justify-content: space-between;
+            color: $font-grey_999;
+            font-size: 28px;
+        }
+    }
+}
+@media screen and (min-width:$media-width){
+    .search-box{
+        top: 60px;
+    }
+    .list-wrap{
+        padding: 20px 30px;
+        justify-content: center;
+        .item{
+            width: 260px;
+            padding: 14px;
+            border-radius: 6px;
+            margin-left: 8px;
+            margin-right: 8px;
+            margin-bottom: 15px;
+            .img{
+                margin: 14px 0;
+                width: 100%;
+                height: 200px;
+            }
+            .time{
+                font-size: 14px;
+                justify-content: flex-start;
+                span{
+                    margin-right: 20px;
+                }
+            }
+        }
+        
+    }
+}
+</style>

src/views/chartETA/SetChartENName.vue

@@ -0,0 +1,86 @@
+<script setup>
+//设置图表英文名称
+import {ref,onMounted, initCustomFormatter} from 'vue'
+import { useRoute } from 'vue-router'
+import {sameOptionType} from '@/hooks/chart/config'
+import apiChart from '@/api/chart'
+const route=useRoute()
+const chartInfo = ref(null)
+async function getChartDetail(){
+    const params=sameOptionType.includes(Number(route.query.chartType))?{
+        ChartInfoId:Number(route.query.id),
+        DateType: '',
+        StartDate: '',
+        EndDate: '',
+    }:{
+        ChartInfoId:Number(route.query.id),
+        Calendar: '公历',
+        SeasonStartDate: '',
+        SeasonEndDate:'' ,
+    }
+    const res=await apiChart.chartInfoById(params)
+    if(res.Ret!==200) return
+    chartInfo.value = res.Data
+    initForm()
+}
+//表格组,第一项固定为图表名称
+const formGroup = ref([
+    /* {
+        groupName:'图表名称',//分组名称
+        formList:[{
+            label:'图表名称',
+            cnValue:'测试截面散点图',//中文值
+            enValue:'',//英文值
+        }],//需要填写的项
+    } */
+])
+
+const ExtraConfig = ref({})
+function initForm(){
+    const {EdbInfoList} = chartInfo.value
+    const {ChartName,ChartNameEn,ExtraConfig} = chartInfo.value.ChartInfo
+    //第一项固定为图表名称
+    formGroup.value.push({
+        groupName:'图表名称',
+        formList:[{
+            label:'图表名称',
+            cnValue:ChartName,
+            enValue:ChartNameEn,
+        }]
+    })
+    //截面散点图 chartType===10 与其他图格式不一样 保存一下额外数据
+    if(Number(route.query.chartType)===10){
+        ExtraConfig.value = JSON.parse(ExtraConfig)
+        const {SeriesList} = ExtraConfig
+        const seriesEdbInfoList = SeriesList[0].EdbInfoList //每一项的EdbInfoList是一样的,取第一项就行
+        let formSeriesList = []
+        let formEdbInfoList = []
+        formGroup.value.push({
+            groupName:'标签，系列名称',
+
+        })
+    }
+
+    
+    for(const edb in EdbInfoList){
+
+    }
+    
+
+}
+onMounted(() => {
+    getChartDetail()
+})
+</script>
+
+<template>
+    <div class="set-name-pop-wrap">
+        
+    </div>
+</template>
+
+<style scoped lang="scss">
+.set-name-pop-wrap{
+
+}
+</style>

src/views/chartETA/components/AddChartToMyETA.vue

@@ -0,0 +1,213 @@
+<script setup>
+//加入我的图库
+import {ref,watch} from 'vue'
+import {showToast} from 'vant'
+import{apiMyClassifyList,apiMyChartAdd,apiAddClassify} from '@/api/myETA'
+
+const props = defineProps({
+    isShowDialog:{//是否展示弹窗
+        type:Boolean,
+        default:false
+    },
+    dialogPosition:{//弹窗显示的位置,根据屏幕大小决定
+        type:String,
+        default:'bottom'
+    },
+    chartInfo:{//图表信息
+        type:Object,
+        default:{}
+    }
+})
+
+//是否展示添加分类弹窗
+const showAddClassify = ref(false)
+//新添加的分类名称
+const addClassifyName = ref('')
+
+//我的图库分类列表
+const classifyList = ref([])
+//chartInfo中,已选择的分类ids
+const choosedIds = ref([])
+
+const showAddPop = ref(false)
+watch(()=>props.isShowDialog,()=>{
+    if(props.isShowDialog){
+        getMyClassifyList()
+    }
+    showAddPop.value = props.isShowDialog
+})
+const emits = defineEmits(['close'])
+watch(showAddPop,()=>{
+    if(!showAddPop.value){
+        emits('close')
+    }
+})
+//获取我的图库列表
+async function getMyClassifyList(){
+    const res = await apiMyClassifyList()
+    if(res.Ret!==200) return 
+    classifyList.value = res.Data.List||[]
+    choosedIds.value = props.chartInfo.MyChartClassifyId?props.chartInfo.MyChartClassifyId.split(',').map(e => Number(e)):[]
+
+}
+function closeDialog(){
+    emits('close')
+}
+//选择分类
+function handleChooseClassify(item){
+    if(choosedIds.value.includes(item.MyChartClassifyId)){
+        const index=choosedIds.value.indexOf(item.MyChartClassifyId)
+        choosedIds.value.splice(index,1)
+    }else{
+        choosedIds.value.push(item.MyChartClassifyId)
+    }
+    
+}
+//确认加入的分类
+function handleConfirmAddChart(){
+    if(choosedIds.value.length===0){
+        showToast('请选择分类')
+        return
+    }
+    apiMyChartAdd({
+        ChartInfoId:props.chartInfo.ChartInfoId,
+        MyChartClassifyId:choosedIds.value
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        showToast({message:'加入我的图库成功',type:'success'})
+        closeDialog()
+
+    })
+}
+//添加新的分类
+function handleConfirmEditClassify(){
+    if(!addClassifyName.value){
+        showToast('请填写分类名称！')
+        return
+    }
+    apiAddClassify({MyChartClassifyName:addClassifyName.value}).then(res=>{
+        if(res.Ret!==200) return
+        showAddClassify.value=false
+        getMyClassifyList()
+    })
+}
+</script>
+
+<template>
+    <van-popup 
+        v-model:show="showAddPop" 
+        :position="dialogPosition"
+        round
+    >
+        <div class="select-classify-wrap">
+            <div class="top-box">
+                <span class="close" @click="closeDialog">关闭</span>
+                <span class="title">加入我的图库</span>
+                <span class="add-btn" @click="showAddClassify=true,addClassifyName=''">添加分类</span>
+            </div>
+            <ul class="classify-list">
+                <li 
+                    :class="['item',choosedIds.includes(item.MyChartClassifyId)?'active':'']" 
+                    v-for="item in classifyList" 
+                    :key="item.MyChartClassifyId"
+                    @click="handleChooseClassify(item)"
+                >{{item.MyChartClassifyName}}</li>
+            </ul>
+            <div class="block"></div>
+            <div class="confirm-btn" @click="handleConfirmAddChart">
+                <span>确定</span>
+            </div>
+        </div>
+    </van-popup>
+    <van-dialog 
+        v-model:show="showAddClassify" 
+        title="添加分类" 
+        show-cancel-button
+        confirmButtonText="确定"
+        @confirm="handleConfirmEditClassify"
+    >
+        <div class="rename-wrap">
+            <input type="text" placeholder="请输入分类名称！" v-model="addClassifyName">
+        </div>
+    </van-dialog>
+</template>
+
+<style scoped lang="scss">
+.select-classify-wrap{
+    .top-box{
+        padding:32px;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #DCDFE6;
+        .close{
+            color:#666666;
+        }
+        .title{
+            font-size: 36px;
+        }
+        .add-btn{
+            color:$theme-color;
+        }
+    }
+    .classify-list{
+        .item{
+            padding:32px;
+            border-bottom: 1px solid #DCDFE6;
+            
+            &.active{
+                color:$theme-color;
+                position: relative;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 36px;
+                    height: 36px;
+                    background-image: url('@/assets/imgs/icon_select2.png');
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    right: $page-padding;
+                }
+            }
+        }
+    }
+    .confirm-btn{
+        padding:32px;
+        text-align: center;
+        color: $theme-color;
+    }
+    .block{
+        background-color: #F6F6F6;
+        height:16px;
+    }
+    
+    @media screen and (min-width:$media-width){
+        width: 375px;
+        .top-box{
+            padding:16px;
+            .title{
+                font-size: 18px;
+            }
+        }
+        .classify-list{
+            .item{
+                padding:16px;
+                &.active{
+                    &::after{
+                        width:18px;
+                        height:18px;
+                    }
+                }
+            }
+        }
+        .confirm-btn{
+            padding:16px;
+        }
+        .block{
+            height:8px;
+        }
+    }
+}
+</style>

src/views/chartETA/components/CatalogItem.vue

@@ -0,0 +1,99 @@
+<script setup>
+import {ref} from 'vue'
+const props = defineProps({
+    showFileImg:{
+        type:Boolean,
+        default:true
+    },
+    node:{
+        type:Object,
+        default:{}
+    },
+    optArr:{
+        type:Array,
+        default:[]
+    },
+    authOptArr:{
+        type:Function,
+    },
+    activeId:{
+        type:Number,
+        default:0
+    }
+})
+
+const emits=defineEmits(['showFileOptClick','showPopup'])
+function showPopup(){
+    emits('showPopup',{node:props.node,optArr:props.optArr})
+}
+</script>
+
+<template>
+    <div class="catalog-item" :class="{'leaf-padding':!showFileImg}">
+        <span class="van-ellipsis" :class="{'leaf-padding':!showFileImg,'choosed':activeId===node.ChartClassifyId}">{{node.ChartClassifyName||''}}</span>
+        <div @click.stop="showPopup" v-if="authOptArr(node,optArr).length">
+            <div class="menu-icon">
+                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.catalog-item{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    &.leaf-padding{
+        padding: var(--van-cell-vertical-padding) 0;
+    }
+    span{
+        flex: 1;
+        text-align: left;
+        box-sizing: border-box;
+        padding: 0 15px;
+        font-size: 30px;
+        &.leaf-padding{
+            padding:0 60px;
+            //color:#969799;
+            color: #323233;
+        }
+        &.choosed{
+            color:#969799;
+        }
+    }
+    img{
+        display: inline-block;
+        width: 48px;
+        height: auto;
+        &.icon{
+            width: 6px;
+            margin-right: 0;
+        }
+    }
+    .menu-icon{
+        width: 30px;
+        text-align: center;
+        img{
+            transform: rotate(90deg);
+            transform-origin: left;
+        }
+        
+    }
+    @media screen and (min-width:$media-width){
+        span{
+            font-size: 16px;
+            &.leaf-padding{
+                padding:0 60px;
+            }
+        }
+        img{
+            width: 32px;
+            &.icon{
+                width:4px;
+            }
+        }
+    }
+}
+</style>

src/views/chartETA/components/CatalogTree.vue

@@ -0,0 +1,82 @@
+<script setup>
+import {ref} from 'vue'
+import {useCatalogList} from '../hooks/useCatalogList'
+import CatalogItem from './CatalogItem.vue';
+const props = defineProps({
+    catalogNodes:{
+        type:Array,
+        default:[]
+    },
+    activeId:{
+        type:Number,
+        default:0
+    },
+    showFileOpt:Function
+})
+const emits=defineEmits(['handleCatalogItemClick'])
+//展开的目录
+const activeCatalogs = ref([])
+//目录操作栏
+const {optArrNode,optArrItem,authOptArr} = useCatalogList()
+//点击目录
+function handleCatalogItemClick(item,type,node){
+    emits('handleCatalogItemClick',{item,type,parent:node})
+}
+</script>
+
+<template>
+    <div class="catalog-tree-wrap">
+        <van-collapse v-model="activeCatalogs" :border="false">
+            <van-collapse-item 
+                v-for="node in catalogNodes"
+                :key="node.UniqueCode"
+                :name="node.UniqueCode"
+                :is-link="true"
+                @click.stop="handleCatalogItemClick(node)"
+            >
+            <template #title>
+                <CatalogItem 
+                    :node="node" 
+                    :optArr="optArrNode"
+                    :authOptArr="authOptArr"
+                    @showPopup="showFileOpt"/>
+            </template>
+            <div 
+                class="list-item"
+                v-for="item in node.Children" 
+                :key="item.UniqueCode"
+                @click.stop="handleCatalogItemClick(item,'item',node)"
+            >
+                <CatalogItem 
+                    :node="item" 
+                    :showFileImg="false" 
+                    :optArr="optArrItem"
+                    :activeId="activeId"
+                    :authOptArr="authOptArr"
+                    @showPopup="showFileOpt"/>
+            </div>
+            </van-collapse-item>
+        </van-collapse>
+    </div>
+</template>
+
+<style lang="scss">
+.catalog-tree-wrap{
+    .van-collapse{
+        .van-collapse-item{
+            >.van-cell{
+                flex-direction: row-reverse;
+                .van-cell__title{
+                    overflow: hidden;
+                }
+            }
+            .van-collapse-item__wrapper{
+                .van-collapse-item__content{
+                    padding-top: 0;
+                    padding-bottom: 0;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/chartETA/components/EdbInfo.vue

@@ -0,0 +1,167 @@
+<script setup>
+import {ref,watch} from 'vue'
+import _ from 'lodash'
+
+
+const props=defineProps({
+    show:{
+        type:Boolean,
+        default:false
+    },
+    data:{
+        type:Object,
+        default:{}
+    },
+    tableData:{
+        type:Array,
+        default:[]
+    },
+})
+
+const temData=ref(_.cloneDeep(props.data)||{})
+
+watch(
+    ()=>props.show,
+    (n)=>{
+        if(!n){
+            temData.value={}
+        }else{
+            temData.value=_.cloneDeep(props.data)
+        }
+    }
+)
+
+const list=[
+    {
+        name:"指标名称",
+        key:"EdbName"
+    },
+    {
+        name:"指标ID",
+        key:"EdbCode"
+    },
+    {
+        name:"更新频度",
+        key:"Frequency"
+    },
+    {
+        name:"单位",
+        key:"Unit"
+    },
+    {
+        name:"起始时间",
+        key:"StartDate"
+    },
+    {
+        name:"最新日期",
+        key:"LatestDate"
+    },
+    {
+        name:"最新值",
+        key:"LatestValue"
+    },
+    {
+        name:"最近更新",
+        key:"LatestDate"
+    },
+    /* {
+        name:"数据来源",
+        key:"SourceName"
+    } */
+]
+const emits = defineEmits(['showSourceDetail'])
+function showDetail(){
+    emits('showSourceDetail')
+}
+
+
+
+</script>
+
+<template>
+    <div class="edb-info-wrap">
+        <div class="top-box">
+            <span class="title">指标详情</span>
+        </div>
+        <div class="con-box">
+            <ul class="info-list">
+                <li class="item" v-for="item in list" :key="item.key">
+                    <span class="lable">{{item.name}}</span>
+                    <span class="text">{{data[item.key]}}</span>
+                </li>
+                <li class="item">
+                    <span class="label">数据来源</span>
+                    <span class="text">{{data['SourceName']}}</span>
+                    <van-icon 
+                        name="arrow" 
+                        color="#999" 
+                        v-if="data['EdbType']===2"
+                        @click="showDetail"/>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.edb-info-wrap{
+    .top-box{
+        padding: 32px $page-padding;
+        border-bottom: 1px solid $border-color;
+        .title{
+            font-size: 32px;
+            font-weight: 600;
+        }
+    }
+    .con-box{
+        max-height: 60vh;
+        overflow-y: auto;
+        &::-webkit-scrollbar{
+            display: none;
+        }
+    }
+    .info-list{
+        padding: $page-padding;
+        padding-bottom: 40px;
+        .item{
+            display: flex;
+            justify-content: space-between;
+            padding: 32px 0;
+            border-bottom: 1px solid $border-color;
+            .lable{
+                flex-shrink: 0;
+            }
+            .text{
+                width: 70%;
+                text-align: right;
+                color: $font-grey_999;
+            }
+        }
+    }
+
+}
+@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;
+            }
+        }
+    }
+}
+</style>

src/views/chartETA/components/OptionPopup.vue

@@ -0,0 +1,102 @@
+<script setup>
+//目录,图表操作栏
+import {ref,watch} from 'vue'
+import {useUserInfo} from '@/hooks/common'
+const props = defineProps({
+    showPopup:{//是否展示操作栏
+        type:Boolean,
+        default:false
+    },
+    optArr:{
+        type:Array,
+        default:[]
+    },
+    node:{
+        type:Object,
+        default:{}
+    },
+    showFileOptClick:Function
+})
+
+const showPop = ref(false)
+watch(()=>props.showPopup,()=>{
+    showPop.value = props.showPopup
+})
+const emits=defineEmits(['close'])
+watch(showPop,()=>{
+    if(!showPop.value){
+        emits('close')
+    }
+})
+function fileOptClick(opt){
+    showPop.value = false
+    props.showFileOptClick({node:props.node,opt})
+}
+//判断是否展示该项
+function showOpt(opt){
+    const {authRole} = opt
+    const UserInfo = useUserInfo()||{}
+    const {AdminId,RoleTypeCode} = UserInfo.value
+    const roleType = ['rai_admin', 'ficc_admin','admin'].includes(RoleTypeCode)?'admin':RoleTypeCode
+    if(opt.id==='moveTo'||opt.id==='moveChart'){
+        return props.node.SysUserId===AdminId||roleType==='admin'
+    }
+    if(authRole){
+        return authRole===roleType
+    }
+    return true
+}
+
+</script>
+
+<template>
+    <van-popup v-model:show="showPop" round position="bottom" >
+        <div class="catalog-file-opt-box">
+            <template v-for="opt in optArr" :key="opt.label">
+                <div class="opt-item" @click="fileOptClick(opt)" v-if="showOpt(opt)">
+                    <span>{{opt.label}}</span>
+                </div>
+            </template>
+            
+            <div class="opt-item last" @click="fileOptClick({id:'cancel'})">
+                <span>取消</span>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<style lang="scss">
+.catalog-file-opt-box{
+    background-color: #F6F6F6;
+    .opt-item{
+        display: flex;
+        padding:32px;
+        align-items: center;
+        justify-content: center;
+        border-bottom: 1px solid $border-color;
+        background-color: #FFFFFF;
+        img{
+            width:44px;
+        }
+        span{
+            white-space: nowrap;
+        }
+        &.last{
+            border-bottom: none;
+            margin-top:16px;
+        }
+        @media screen and (min-width:$media-width){
+            padding:16px;
+            img{
+                width:32px;
+            }
+            &.last{
+                margin-top: 8px;
+            }
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+
+</style>

src/views/chartETA/components/SetChartEnName.vue

@@ -0,0 +1,399 @@
+<script setup>
+//设置图表英文名称
+import {ref,watch} from 'vue'
+import apiChart from '@/api/chart'
+import { showToast } from 'vant';
+const props = defineProps({
+    isShow:{
+        type:Boolean,
+        default:false
+    },
+    chartInfo:{
+        type:Object,
+        default:{}
+    },
+    chartType:{
+        type:Number,
+        default:0
+    }
+})
+//折叠面板的展开项
+const activeGroup = ref([])
+//表格组
+const formGroup = ref([
+    /* {
+        groupName:'图表名称',//分组名称
+        formList:[{
+            label:'图表名称',
+            cnValue:'测试截面散点图',//中文值
+            enValue:'',//英文值
+            Value:'',//v-model的值,为cnValue/Value
+            noEdit:false,//是否允许编辑
+        }],//需要填写的项
+    } */
+])
+//截面图的其他参数
+const _ExtraConfig = ref({})
+watch(()=>props.isShow,()=>{
+    if(props.isShow){
+        initForm()
+    }else{
+        formGroup.value = []
+    }
+},{immediate:true})
+
+function initForm(){
+    const {EdbInfoList} = props.chartInfo
+    const {ChartName,ChartNameEn,ExtraConfig} = props.chartInfo.ChartInfo
+    //第一项固定为图表名称
+    formGroup.value.push({
+        groupName:'图表名称',
+        formList:[{
+            label:'图表中文名称',
+            cnValue:ChartName,
+            enValue:ChartNameEn,
+            Value:ChartName,
+            noEdit:true
+        },{
+            label:'英文图表名称',
+            cnValue:ChartName,
+            enValue:ChartNameEn,
+            Value:ChartNameEn,
+            placeholder:'请输入英文图表名称'
+        }]
+    })
+    //截面散点图 chartType===10 与其他图格式不一样
+    if(Number(props.chartType)===10){
+        _ExtraConfig.value = JSON.parse(ExtraConfig)
+        const {XName,XNameEn,XUnitName,XUnitNameEn} = JSON.parse(ExtraConfig)
+        const {YName,YNameEn,YUnitName,YUnitNameEn} = JSON.parse(ExtraConfig)
+        let suppleFormList = [{
+            label:`X轴名称：${XName}`,
+            cnValue:XName,
+            enValue:XNameEn,
+            Value:XNameEn,
+            key:'XNameEn',
+            placeholder:'请输入X轴英文名称'
+        },{
+            label:`X轴单位：${XUnitName}`,
+            cnValue:XUnitName,
+            enValue:XUnitNameEn,
+            Value:XUnitNameEn,
+            key:'XUnitNameEn',
+            placeholder:'请输入X轴英文单位'
+        },{
+            label:`Y轴名称：${YName}`,
+            cnValue:YName,
+            enValue:YNameEn,
+            Value:YNameEn,
+            key:'YNameEn',
+            placeholder:'请输入Y轴英文名称'
+        },{
+            label:`Y轴单位：${YUnitName}`,
+            cnValue:YUnitName,
+            enValue:YUnitNameEn,
+            Value:YUnitNameEn,
+            key:'YUnitNameEn',
+            placeholder:'请输入Y轴英文单位'
+        }]
+        //补充第一项
+        formGroup.value[0].formList = formGroup.value[0].formList.concat(suppleFormList)
+        const {SeriesList} = JSON.parse(ExtraConfig)
+        const seriesEdbInfoList = SeriesList[0].EdbInfoList //每一项的EdbInfoList是一样的,取第一项就行
+        
+        let formSeriesList = []
+        let formEdbInfoList = []
+        SeriesList.forEach((serise,index)=>{
+            formSeriesList.push({
+                label:`系列${index+1}：${serise.Name}`,
+                cnValue:serise.Name,
+                enValue:serise.NameEn,
+                Value:serise.NameEn,
+                placeholder:'请输入系列英文名称'
+            })
+        })
+        seriesEdbInfoList.forEach((edb,index)=>{
+            formEdbInfoList.push({
+                label:`标签${index+1}：${edb.Name}`,
+                cnValue:edb.Name,
+                enValue:edb.NameEn,
+                Value:edb.NameEn,
+                placeholder:'请输入标签英文名称'
+            })
+        })
+        //第二项
+        formGroup.value.push({
+            groupName:'标签，系列名称',
+            SeriesListLength:formSeriesList.length,
+            formList:[...formSeriesList,...formEdbInfoList]
+        })
+        let formEdbList = []
+        for(const edb of EdbInfoList){
+            formEdbList.push({
+                EdbInfoId:edb.EdbInfoId,
+                label:edb.EdbName,
+                cnValue:edb.EdbName,
+                enValue:edb.EdbNameEn,
+                Value:edb.EdbNameEn,
+                placeholder:'请输入英文指标名称'
+            })
+        }
+        //第三项
+        formGroup.value.push({
+            groupName:'指标名称',
+            formList:formEdbList
+        })
+        activeGroup.value = formGroup.value.map(i=>i.groupName)
+        return
+    }
+    //普通图
+    for(const edb of EdbInfoList){
+        formGroup.value.push({
+            groupName:`${edb.EdbName}`,
+            EdbInfoId:edb.EdbInfoId,
+            formList:[
+                {
+                    label:'指标名称',
+                    cnValue:edb.EdbName,
+                    enValue:edb.EdbNameEn,
+                    Value:edb.EdbName,
+                    noEdit:true,
+                },
+                {
+                    label:'单位',
+                    cnValue:edb.Unit,
+                    enValue:edb.UnitEn,
+                    Value:edb.Unit,
+                    noEdit:true
+                },
+                {
+                    label:'英文指标名称',
+                    cnValue:edb.EdbName,
+                    enValue:edb.EdbNameEn,
+                    Value:edb.EdbNameEn,
+                    placeholder:'请输入英文指标名称'
+                },
+                {
+                    label:'英文单位',
+                    cnValue:edb.Unit,
+                    enValue:edb.UnitEn,
+                    Value:edb.UnitEn,
+                    placeholder:'请输入英文单位'
+                }
+            ]
+        })
+    }
+    //默认全部展开
+    activeGroup.value = formGroup.value.map(i=>i.groupName)
+}
+
+const showCellEditDialog = ref(false)
+const currentCell = ref({})
+let tempValue=''
+function handleCellClick(cell){
+    if(cell.noEdit) return
+    currentCell.value = cell
+    tempValue = cell.Value
+    showCellEditDialog.value = true
+}
+function handleConfirmEditCell(){
+    //console.log('check',currentCell.value)
+}
+function handleCancelEditCell(){
+    currentCell.value.Value = tempValue
+}
+function handleSave(){
+    let params = {
+        ChartInfoId:props.chartInfo.ChartInfo.ChartInfoId,
+        ChartNameEn:formGroup.value[0].formList[1].Value,
+        ChartEdbInfoList:[],
+    }
+    if(Number(props.chartType)===10){
+        //指标数据
+        let ChartEdbInfoList = []
+        formGroup.value[2].formList.forEach(item=>{
+            ChartEdbInfoList.push({
+                EdbInfoId:item.EdbInfoId,
+                EdbNameEn:item.Value.trim(),
+                UnitEn:''
+            })
+        })
+        params.ChartEdbInfoList = ChartEdbInfoList
+        //额外数据
+        _ExtraConfig.value.SeriesList.forEach((item,index)=>{
+            const {SeriesListLength} = formGroup.value[1]
+            item.NameEn = formGroup.value[1].formList[index].Value.trim()
+            item.EdbInfoList.forEach((edb,edb_index) => {
+                edb.NameEn= formGroup.value[1].formList[edb_index+SeriesListLength].Value.trim();
+            })
+        })
+        let suppleConfig = {}
+        let suppleList = formGroup.value[0].formList
+        for(let suppleIndex = 2;suppleIndex<suppleList.length;suppleIndex++){
+            const key = suppleList[suppleIndex].key
+            suppleConfig[key] = suppleList[suppleIndex].Value.trim()
+        }
+        _ExtraConfig.value = {..._ExtraConfig.value,...suppleConfig}
+        params.ExtraConfig = JSON.stringify(_ExtraConfig.value)
+    }else{
+        let ChartEdbInfoList = []
+        for(let index = 1;index<formGroup.value.length;index++){
+            ChartEdbInfoList.push({
+                EdbInfoId:formGroup.value[index].EdbInfoId,
+                EdbNameEn:formGroup.value[index].formList[2].Value.trim(),
+                UnitEn:formGroup.value[index].formList[3].Value.trim()
+            })
+        }
+        params.ChartEdbInfoList = ChartEdbInfoList
+    }
+    saveChartEn(params)
+}
+const emits = defineEmits(['close',])
+async function saveChartEn(params){
+    const res  = await apiChart.chartInfoEditEn(params)
+    if(res.Ret!==200) return 
+    showToast({message:'设置英文名称成功',type:'success'})
+    emits('close','save')
+}
+</script>
+
+<template>
+    <div class="set-name-pop-wrap">
+        <van-collapse v-model="activeGroup">
+            <van-collapse-item
+                v-for="node in formGroup"
+                :key="node.groupName"
+                :name="node.groupName"
+                :title="node.groupName"
+                :is-link="true"
+            >
+                <van-cell
+                    v-for="cell in node.formList"
+                    :title="cell.label"
+                    :label="cell.Value.length?cell.Value:cell.placeholder"
+                    :is-link="!cell.noEdit"
+                    @click.stop="handleCellClick(cell,node)"
+                >
+                </van-cell>
+            </van-collapse-item>
+        </van-collapse>
+        <div class="tool-box">
+            <div class="btn cancel" @click="emits('close','cancel')">取消</div>
+            <div class="btn" @click="handleSave">保存</div>
+        </div>
+        <van-dialog 
+            v-model:show="showCellEditDialog" 
+            title="设置英文名称" 
+            show-cancel-button
+            confirmButtonText="确定"
+            @cancel="handleCancelEditCell"
+            @confirm="handleConfirmEditCell"
+        >
+            <div class="name">{{ currentCell.cnValue||'无'}}</div>
+            <div class="rename-wrap">
+                <input type="text" :placeholder="currentCell.placeholder" v-model="currentCell.Value">
+            </div>
+        </van-dialog>
+    </div>
+</template>
+
+<style lang="scss">
+.set-name-pop-wrap{
+    .van-collapse{
+        flex: 1;
+        background-color:#F6F6F6;
+    }
+    .van-collapse-item{
+        padding-bottom:20px;
+        &:last-child{
+            padding-bottom: 0;
+        }
+    }
+    .van-badge__wrapper{
+        align-self: center;
+    }
+    .van-collapse-item__content{
+        padding:0;
+    }
+    .name{
+        text-align: center;
+        margin-top:32px;
+        color: #666;
+    }
+    .rename-wrap{
+        padding:48px;
+        input{
+            padding: 24px 32px;
+            border-radius: 12px;
+            background-color: #F6F6F6;
+            width: 100%;
+        }
+        .label{
+            color: #666666;
+            margin-bottom: 32px;
+            text-align: center;
+        }
+    }
+    @media screen and (min-width:$media-width){
+        .van-collapse-item{
+            padding-bottom:10px;
+        }
+        .name{
+            margin-top:16px;
+        }
+        .rename-wrap{
+            padding:24px;
+            input{
+                padding: 12px 16px;
+                border-radius: 6px;
+                background-color: #F6F6F6;
+                width: 100%;
+            }
+            .label{
+                margin-bottom: 16px;
+            }
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+.set-name-pop-wrap{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .tool-box{
+        position:sticky;
+        z-index: 99;
+        bottom: 0;
+        left:0;
+        right:0;
+        background-color: #fff;
+        padding:48px;
+        display: flex;
+        gap: 24px;
+        .btn{
+            flex: 1;
+            border:1px solid $theme-color;
+            border-radius: 12px;
+            background-color: $theme-color;
+            color:#fff;
+            text-align: center;
+            padding:16px;
+            &.cancel{
+                background-color: #fff;
+                color: $theme-color;
+            }
+        }
+    }
+    @media screen and (min-width:$media-width){
+        .tool-box{
+            padding:24px;
+            gap:12px;
+            .btn{
+                border-radius: 6px;
+                padding:8px;
+            }
+        }
+    }
+}
+</style>

src/views/chartETA/components/SourceDetail.vue

@@ -0,0 +1,145 @@
+<script setup>
+//数据来源详情
+import {ref,watch} from 'vue'
+import apiChart from '@/api/chart'
+const props = defineProps({
+    show:{
+        type:Boolean,
+        default:false
+    },
+    EdbInfoId:{
+        type:Number,
+        default:0
+    }
+})
+
+watch(()=>props.show,()=>{
+    if(props.show){
+        getEdbInfo()
+    }
+},{immediate:true})
+
+const edbSourceData = ref([])
+async function getEdbInfo(){
+    const res = await apiChart.getEdbCreateHistory({
+        EdbInfoId:props.EdbInfoId
+    })
+    if(res.Ret!==200) return 
+    edbSourceData.value = flatTreeData([res.Data]||[]).reverse()
+}
+function flatTreeData(tree){
+    let arr = []
+    let concatData=[]
+    for(const item of tree){
+        const {EdbName,RuleTitle} = item
+        concatData.push({EdbName:EdbName||'',RuleTitle:RuleTitle||''})
+        if(item.Child&&item.Child.length){
+            arr = arr.concat(flatTreeData(item.Child))
+        }
+    }
+    arr.push(concatData)
+    return arr
+}
+</script>
+
+<template>
+    <div class="source-detail-wrap">
+        <div class="top-box">
+            <span class="title"> 数据来源</span>
+        </div>
+        <div class="source-arr-wrap">
+            <div class="source-item" v-for="(arr,index) in edbSourceData">
+                <template v-for="item in arr">
+                    <span class="title">{{item.EdbName}}</span>
+                    <span class="text">{{item.RuleTitle}}</span>
+                </template>
+                
+                <div class="line" v-if="index!==edbSourceData.length-1"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.source-detail-wrap{
+    .top-box{
+        padding: 32px $page-padding;
+        border-bottom: 1px solid $border-color;
+        .title{
+            font-size: 32px;
+            font-weight: 600;
+        }
+    }
+
+    .source-arr-wrap{
+        display: flex;
+        flex-direction: column;
+        padding:40px 80px;
+        gap:40px;
+        max-height: 600px;
+        overflow-y:scroll;
+        .source-item{
+            position: relative;
+            .text{
+                display: block;
+                margin: 8px 0;
+                font-size: 12px;
+                color: #00000066;;
+            }
+            .line{
+                position:absolute;
+                left:-33px;
+                top:36px;
+                width:1px;
+                height:100%;
+                background-color: $theme-color;
+            }
+            &::after{
+                content:'';
+                position:absolute;
+                top:0;
+                left:-40px;
+                background-color: $theme-color;
+                width:16px;
+                height:16px;
+                border-radius: 50%;
+                top:8px;
+            }
+        }
+    }
+    @media screen and (min-width:$media-width){
+        .top-box{
+            padding: 16px;
+            .title{
+                font-size: 18px;
+            }
+        }
+
+        .source-arr-wrap{
+            padding:20px 40px;
+            gap:20px;
+            max-height: 300px;
+            .source-item{
+                .text{
+                    margin: 8px 0;
+                    font-size: 12px;
+                }
+                .line{
+                    position:absolute;
+                    left:-17px;
+                    top:18px;
+                    width:1px;
+                    height:100%;
+                    background-color: $theme-color;
+                }
+                &::after{
+                    left: -20px;
+                    width: 8px;
+                    height: 8px;
+                    top:4px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/chartETA/components/TreeSelectPop.vue

@@ -0,0 +1,120 @@
+<script setup>
+//移动图表,另存为弹窗
+import {ref,watch} from 'vue'
+import { showToast } from 'vant';
+const props = defineProps({
+    isShowDialog:{
+        type:Boolean,
+        default:false
+    },
+    dialogPosition:{
+        type:String,
+        default:'bottom'
+    },
+    popTitle:{
+        type:String,
+        default:'移动至'
+    },
+    catalogNodes:{
+        type:Array,
+        default:[]
+    },
+    chartInfo:{
+        type:Object,
+        default:{}
+    }
+})
+
+const treeData = ref([])
+function getTreeData(){
+    treeData.value = props.catalogNodes.map(item=>{
+        const children=item.Children.map(e=>{
+                return {
+                    text:e.ChartClassifyName,
+                    id:e.ChartClassifyId
+                }
+            })
+            return {
+                text:item.ChartClassifyName,
+                children:children
+            }
+    })
+}
+watch(()=>props.catalogNodes,getTreeData,{immediate:true,deep:true})
+const showPop = ref(false)
+const activeId=ref(0)//选中的分类
+const activeIndex=ref(0)
+watch(()=>props.isShowDialog,()=>{
+    showPop.value = props.isShowDialog
+})
+watch(()=>props.chartInfo,()=>{
+    if(props.popTitle==='移动至'){
+        activeId.value = props.chartInfo.ChartClassifyId
+    }
+},{immediate:true,deep:true})
+const emits = defineEmits(['close','confirmMove'])
+watch(showPop,()=>{
+    if(!showPop.value){
+        emits('close')
+    }
+})
+
+
+function handleConfirmMove(){
+    if(!activeId.value){
+        showToast('请选择分类!')
+        return
+    }
+    emits('confirmMove',activeId.value)
+}
+</script>
+
+<template>
+    <van-popup 
+        v-model:show="showPop"
+        :position="dialogPosition"
+        round
+        closeable
+    >
+        <div class="global-pop-wrap_mobile tree-select-pop-wrap">
+            <div class="head-box">
+                <div class="title">{{popTitle}}</div>
+            </div>
+            <div class="content">
+                <van-tree-select
+                    v-model:active-id="activeId"
+                    v-model:main-active-index="activeIndex"
+                    :items="treeData"
+                />
+            </div>
+            <div class="bot-btn-box" @click="handleConfirmMove">确定</div>
+        </div>
+    </van-popup>
+</template>
+
+<style scoped lang="scss">
+.tree-select-pop-wrap{
+    .head-box,.bot-btn-box{
+        font-size: 36px;
+        padding:32px;
+        text-align: center;
+    }
+    .bot-btn-box{
+        color: $theme-color;
+    }
+    .content{
+        :deep(.van-tree-select__nav){
+            &::-webkit-scrollbar{
+                display: none;
+            }
+        }
+    }
+    @media screen and (min-width:$media-width){
+        width:375px;
+        .head-box,.bot-btn-box{
+            padding:16px;
+            font-size: 18px;
+        }
+    }
+}
+</style>

src/views/chartETA/hooks/useCatalogList.js

@@ -0,0 +1,127 @@
+import {getStaticImg,useUserInfo} from '@/hooks/common'
+import {ref} from 'vue'
+import apiChart from '@/api/chart'
+export function useCatalogList(){
+    //操作栏图标的地址
+    const iconSrc = {
+        'addNext':getStaticImg('ppt/icon_action_copy.png'),
+        'reName':getStaticImg('ppt/icon_action_copy.png'),
+        'delete':getStaticImg('ppt/icon_action_copy.png'),
+        'moveTo':getStaticImg('ppt/icon_action_copy.png'),
+        'addChart':getStaticImg('ppt/icon_action_copy.png')
+    }
+    //目录,图表的操作栏
+    const optArrNode=[
+        {
+            label:'添加子分类',
+            icon:iconSrc.addNext,//图标地址
+            id:'addNext',
+            authRole:'admin',
+        },
+        {
+            label:'重命名',
+            icon:iconSrc.reName,
+            id:'reName',
+            authRole:'admin',
+        },
+        {
+            label:'删除',
+            icon:iconSrc.delete,
+            id:'delete',
+            authRole:'admin',
+        },
+        /* {id:'addNew',label:'添加图表分类'} */
+    ]
+    const optArrItem=[
+        {
+            label:'移动至',
+            icon:iconSrc.moveTo,
+            id:'moveTo'
+        },
+        {
+            label:'重命名',
+            icon:iconSrc.reName,
+            id:'reName',
+            authRole:'admin',
+        },
+        {
+            label:'删除',
+            icon:iconSrc.delete,
+            id:'delete',
+            authRole:'admin',
+        }
+    ]
+    const optArrChart=[
+        {
+            label:'加入我的图库',
+            icon:iconSrc.addChart,
+            id:'addChart'
+        },
+        {
+            label:'移动至',
+            icon:iconSrc.moveTo,
+            id:'moveChart',
+        },
+    ]
+    //目录列表
+    const catalogNodes = ref([])
+    const currentLang = ref('')
+    //获取目录列表
+    async function getCatalogList(){
+        const res = await apiChart.ETAChartClassifyList()
+        if(res.Ret!==200) return 
+        currentLang.value = res.Data.Language
+        localStorage.setItem('chartETALange',currentLang.value)
+        catalogNodes.value = res.Data?res.Data.AllNodes:[]||[]
+        catalogNodes.value = catalogNodes.value.map(node=>{
+            if(node.Children){
+                node.Children = node.Children.map(child=>{
+                    child.parentName = node.ChartClassifyName //添加子分类时需要显示父级分类名称
+                    return child
+                })
+            }
+            return node
+        })
+    }
+
+    const UserInfo = useUserInfo()
+    //根据权限过滤操作栏
+    function authOptArr(node,optArr){
+        let currentArr = []
+        optArr.forEach(opt=>{
+            if(checkOpt(node,opt)){
+                currentArr.push(opt)
+            }
+        })
+        return currentArr
+    }
+    function checkOpt(node,opt){
+        const {authRole} = opt
+        const {AdminId,RoleTypeCode} = UserInfo.value
+        const roleType = ['rai_admin', 'ficc_admin','admin'].includes(RoleTypeCode)?'admin':RoleTypeCode
+        if(opt.id==='moveTo'||opt.id==='moveChart'){
+            return node.SysUserId===AdminId||roleType==='admin'
+        }
+        if(authRole){
+            return authRole===roleType
+        }
+        return true
+    }
+
+
+
+
+
+    return {
+        optArrNode,
+        optArrItem,
+        optArrChart,
+
+        catalogNodes,
+        currentLang,
+        getCatalogList,
+
+        UserInfo,
+        authOptArr
+    }
+}

src/views/myETA/components/EDBInfo.vue

@@ -137,7 +137,7 @@ function handleLeadUnitChange(e){
                     <span class="text">{{data[item.key]}}</span>
                 </li>
             </ul>
-            <div class="opt-box" v-if="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5">
+            <div class="opt-box" v-if="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5 && chartInfo.Source===1">
                 <div class="lable">指标操作</div>
                 <div class="con">
                     <div class="item-box" v-if="showYOptionsHandle">

src/views/tabbar/Home.vue

@@ -64,6 +64,14 @@ const menuConfig=[
         path:'/myETA/index',
         icon:getStaticImg('myETA/icon_myETA_logo.png'),
         show:false
+    },
+    {
+        name:'ETA图库',
+        key:'ETA图库',
+        level:1,
+        path:'/chartETA/list',
+        icon:getStaticImg('chartETA/icon_chartETA_logo.png'),
+        show:false
     }
 ]
 const menuOpts=ref([])