eta_mobile_front/src/views/myETA/ChartDetail.vue

<script setup>
import {ref,nextTick, reactive,computed} from 'vue'
import apiETAChart from '@/api/chart'
import apiFutureChart from '@/api/futureChart'
import apiCorrelationChart from '@/api/correlationChart'
import apiLineEquationChart from '@/api/lineEquationChart'
import apiStatisticFeatureChart from '@/api/statisticFeatureChart'
import apiCrossVarietyChart from '@/api/crossVarietyChart'
import apiMyETAChart from '@/api/myETA'
import apiDataEDB from '@/api/dataEDB'
import { useRoute, useRouter } from 'vue-router'
import {useChartRender} from '@/hooks/chart/render'
import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
import EDBInfo from './components/EDBInfo.vue'
import moment from 'moment'
import { showToast,showDialog} from 'vant'
import ChartSaveOther from './components/ChartSaveOther.vue'
import _ from 'lodash';
import { useWindowSize } from '@vueuse/core'
import {setClipboardData} from '@/hooks/common'
import SetChartEnName from '@/components/SetChartEnName.vue'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
import AddChartToMyETA from '@/views/chartETA/components/AddChartToMyETA.vue'
import { setExtremumDate } from '@/hooks/chart/commonFun.js'
import {myETABtn,useAuthBtn} from '@/hooks/useAuthBtn'
const {checkAuthBtn} = useAuthBtn()

const isMoreActionShow = computed(()=>{
    return checkAuthBtn(myETABtn.myChart_refresh)
        || checkAuthBtn(myETABtn.myChart_share)
        || checkAuthBtn(myETABtn.myChart_move)
        || checkAuthBtn(myETABtn.myChart_copyTo)
        || checkAuthBtn(myETABtn.myChart_otherSave)
        || (checkAuthBtn(myETABtn.myChart_copyWechat)&&checkAuthBtn(myETABtn.myChart_copyOffice))
        || checkAuthBtn(myETABtn.myChart_enNameSetting)
        || checkAuthBtn(myETABtn.myChart_del)
}) 
const { width, height } = useWindowSize()
const cachedViewsStore=useCachedViewsStore()
const {options,axisLimitState,chartRender}=useChartRender()


const route=useRoute()
const router=useRouter()
let chartCode=route.query.code
let CHARTINS=null//图表实例

// 获取当前图表所在分类下的所有图表数据 用于上一张下一张切换
let allChartList=ref([])
async function getAllChartList(){
    // 如果是从ETA指标库的指标关联的图列表跳转来的
    if(route.query.from==='edbRelationChart'){
        const res=await apiDataEDB.edbRelationChartList({
            PageSize:1000000,
            CurrentIndex:1,
            EdbInfoId:route.query.edbInfoId
        })
        if(res.Ret===200){
            allChartList.value=res.Data.List||[]
        }
        return
    }
    // 我的图库列表跳转来的
    if(!route.query.cid) return
    const res=await apiMyETAChart.myChartList({
        CurrentIndex:1,
        PageSize:1000000,
        MyChartClassifyId:Number(route.query.cid)
    })
    if(res.Ret===200){
        allChartList.value=res.Data.List||[]
    }
}
getAllChartList()
// 切换图上一张下一张
function handleSwitchChart(type){
    const index=allChartList.value.findIndex((item)=>item.UniqueCode==chartCode)
    let item=null
    if(type==='prev'){
        item=index===0?allChartList.value[allChartList.value.length-1]:allChartList.value[index-1]
    }else{
        item=index===allChartList.value.length-1?allChartList.value[0]:allChartList.value[index+1]
    }
    chartCode=item.UniqueCode
    getChartInfo()
}

// 获取图详情
let chartInfoData=null
let chartInfo=ref(null)
let edbList=ref([])//指标数据
async function getChartInfo(){
    const res=await apiETAChart.chartInfoByCode({UniqueCode:chartCode})
    if(res.Ret!==200) return
    chartInfoData=res.Data

    chartInfo.value=res.Data.ChartInfo
    if([2,5].includes(res.Data.ChartInfo.Source)){
        edbList.value=[res.Data.EdbInfoList[0]]
    }else{
        edbList.value=res.Data.EdbInfoList
    }
    // 设置 起始日期 和 最新日期
    const extremumDate= setExtremumDate(edbList.value)

    minDate = new Date(extremumDate.earliestDate)

    earliestDate.value = extremumDate.earliestDate
    latestDate.value = extremumDate.latestDate

    chartState.yearVal=res.Data.ChartInfo.DateType
    if(res.Data.ChartInfo.DateType===5){
        chartState.startTime=res.Data.ChartInfo.StartDate
        chartState.endTime=res.Data.ChartInfo.EndDate
        temStartTime.value=res.Data.ChartInfo.StartDate.split('-')
        temEndTime.value=res.Data.ChartInfo.EndDate.split('-')
    }
    if(res.Data.ChartInfo.DateType===6){
        chartState.startTime=res.Data.ChartInfo.StartDate
        temStartTime.value=res.Data.ChartInfo.StartDate.split('-')
    }

    if(res.Data.ChartInfo.DateType===20){
        // 最近几年
        let latestYear = parseInt(latestDate.value.substring(0,4))
        chartState.startTime =  `${latestYear-chartState.startYear+1}-01-01`
        chartState.endTime = `${latestYear}-12-31`   

        chartState.startTime=res.Data.ChartInfo.StartDate
        chartState.endTime=res.Data.ChartInfo.EndDate
        temStartTime.value=chartState.startTime.split('-')
        temEndTime.value=chartState.endTime.split('-')
    }

    nextTick(()=>{
        CHARTINS=chartRender({
            data:res.Data,
            renderId:'chart-box',
            lang:'zh',
            changeLangIsCheck:false,
            showChartTitle:false
        })
    })
}


function openDateSelect(){
    // 回显

    switch (chartState.yearVal) {
        case 3:
            temStartTime.value = [2015,1,1]
            temEndTime.value = latestDate.value.split('-')
            break;
        case 9:
            temStartTime.value = [2020,1,1]
            temEndTime.value = latestDate.value.split('-')
            break;
        case 4:
            temStartTime.value = [2021,1,1]
            temEndTime.value = latestDate.value.split('-')
            break;
        case 11:
            temStartTime.value = [2022,1,1]
            temEndTime.value = latestDate.value.split('-')
            break;
        case '':
            temStartTime.value = earliestDate.value.split('-')
            temEndTime.value = latestDate.value.split('-')
            break;  
        default:
            temStartTime.value = chartState.startTime.split('-')
            temEndTime.value = chartState.endTime.split('-')
            break;
    }

    chartState.showTimePop=true
}

getChartInfo()

// 选择项发生变化时 非配置项 获取新的图表数据
async function reloadChartInfo(){
    const params=sameOptionType.includes(chartInfo.value.ChartType)?{
        ChartInfoId: chartInfo.value.ChartInfoId,
        DateType: chartState.yearVal,
        StartDate: chartState.startTime,
        EndDate: chartState.endTime,
    }:{
        ChartInfoId: chartInfo.value.ChartInfoId,
        DateType: chartState.yearVal,
        Calendar: chartState.calendarType,//this.calendar_type
        StartDate: chartState.startTime,
        EndDate:chartState.endTime ,
    }
    const res=await apiETAChart.chartInfoById(params)
    if(res.Ret!==200) return
    chartInfo.value=res.Data.ChartInfo

    CHARTINS=chartRender({
        data:{
            ...res.Data,
            ChartInfo:{
                ...res.Data.ChartInfo,
                Calendar:chartState.calendarType||'公历'
            }
        },
        renderId:'chart-box',
        lang:'zh',
        changeLangIsCheck:false,
        showChartTitle:false
    })
}

let minDate=new Date(1970, 0, 1)
const maxDate=new Date(2050, 11, 31)
const cYear=moment().format('YYYY')
const cMonth=moment().format('MM')
const cDay=moment().format('dd')

let temStartTime=ref([cYear,cMonth,cDay])
let temEndTime=ref([cYear,cMonth,cDay])
const earliestDate=ref('')
const latestDate=ref('')

let chartState=reactive({
    showTimePop:false,
    startTime:'',
    endTime:'',
    yearVal:'',
    calendarType:'公历',
    startYear:5
})

// 切换年份选项
function handleYearChange(item){
    chartState.yearVal=item.value
    chartState.startTime=''
    chartState.endTime=''
    reloadChartInfo()
}

// 确定日期筛选
function handleTimeChange(){
    chartState.startTime=temStartTime.value.join('-')
    chartState.endTime=temEndTime.value.join('-')
    chartState.yearVal=5
    reloadChartInfo()
    chartState.showTimePop=false
}

// 季节图公历\农历切换
function handleSeasonTypeChange(type){
    chartState.calendarType=type
    reloadChartInfo()
}

// 上下限调整
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
        }
    }

    CHARTINS=chartRender({
        data:data,
        renderId:'chart-box',
        lang:'zh',
        changeLangIsCheck:false,
        showChartTitle:false
    })

    showLimitPop.value=false
}

// 显示指标详情
let showEDB=ref(false)
let showEDBData=ref({})
function handleShowEDBInfo(item){
    showEDBData.value=item
    showEDB.value=true
}

// 获取指标数据
async function getItemEDBInfo(item){
    const params={
        EdbInfoId: item.EdbInfoId,
        DateType: chartState.yearVal,
        StartDate: chartState.startTime,
        EndDate: chartState.endTime,
        EdbInfoType: item.EdbInfoType,
        LeadValue: item.EdbInfoType ? 0 : item.LeadValue,
        LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
    }
    return apiETAChart.EDBInfo(params)
}

// 指标配置项修改更新图
async function handleUpdateRender(val,isEdit){
    
    const index=edbList.value.findIndex(_=>_.EdbInfoId==val.EdbInfoId)
    
    // 如果修改过 领先指标\标准指标则重新获取指标数据
    if(isEdit){
        edbList.value[index]=val
        const asyncTasks=edbList.value.map(_item=> getItemEDBInfo(_item))
        const results=await Promise.all(asyncTasks)
        console.log(results);
        results.forEach((item,index)=>{
            if(item.Ret==200){
                edbList.value[index].DataList=item.Data.EdbInfo.DataList
                if(item.Data.EdbInfo.EdbInfoCategoryType===1){
                    edbList.value[index].LatestDate=item.Data.EdbInfo.LatestDate
                }
            }
        })
    }else{
        edbList.value[index]=val
    }

    CHARTINS=chartRender({
        data:{
            ...chartInfoData,
            EdbInfoList:edbList.value
        },
        renderId:'chart-box',
        lang:'zh',
        changeLangIsCheck:false,
        showChartTitle:false
    })
    showEDB.value=false
    showEDBData.value={}
}


// 更多操作弹窗
let showMoreAction=ref(false)

// 复制到
let myChartClassifyList=[]//我的图库中的所有分类
async function getMyChartClassifyList(){
    const res=await apiMyETAChart.myClassifyList()
    if(res.Ret===200){
        myChartClassifyList=res.Data.List||[]
    }
}
getMyChartClassifyList()
let showCopyTo=ref(false)
let copyToOpt=ref([])
async function handleShowCopyTo(){
    const res=await apiMyETAChart.chartInMyClassifyList({ChartInfoId:chartInfo.value.ChartInfoId})
    if(res.Ret===200){
        const arr=res.Data||[]
        copyToOpt.value=myChartClassifyList.map(e=>{
            return {
                ...e,
                select:false
            }
        }).filter((x) => !arr.includes(x.MyChartClassifyId))
        showCopyTo.value=true
    }
}
async function handleConfirmCopy(){
    const arr=[]
    copyToOpt.value.map(item=>{
        if(item.select){
            arr.push(item.MyChartClassifyId)
        }
    })
    if(arr.length===0){
        showToast('请选择分类')
        return
    }
    const res=await apiMyETAChart.chartAddToClassify({
        ChartInfoId:chartInfo.value.ChartInfoId,
        MyChartClassifyId:arr
    })
    if(res.Ret===200){
        showToast('复制成功')
        showCopyTo.value=false
    }
}

// 移除图表
function handleRemoveChart(){
    if(!route.query.cid){
        showToast('当前图表所属多个分类，请选中具体分类移出')
        return
    }
    showDialog({
        title: '提示',
        message: '是否确认移出？',
        showCancelButton:true
    }).then(() => {
        // on close
        apiMyETAChart.myChartRemove({
            MyChartClassifyId:Number(route.query.cid),
            MyChartId:chartInfo.value.MyChartId
        }).then(res=>{
            if(res.Ret===200){
                showToast('移出成功')
                cachedViewsStore.removeCaches('MyETAIndex')
                cachedViewsStore.removeCaches('MyETASearchList')
                setTimeout(() => {
                    router.back()
                }, 1500)
            }
        })
    }).catch(()=>{})
}

//删除图表
function handleDeleteChart(){
    showDialog({
        title: '提示',
        message: '删除后该图表将不能再引用，确认删除吗？',
        showCancelButton:true
    }).then(() => {
        // on close
        apiMyETAChart.chartDel({
            ChartInfoId:chartInfo.value.ChartInfoId
        }).then(res=>{
            if(res.Ret===200){
                showToast('删除成功')
                cachedViewsStore.removeCaches('MyETAIndex')
                cachedViewsStore.removeCaches('MyETASearchList')
                setTimeout(() => {
                    router.back()
                }, 1500)
            }
        })
    }).catch(()=>{})
}

// 另存为
let showSaveChartOther=ref(false)

// 刷新
async function handleChartRefresh(){
    const { Source,ChartInfoId,UniqueCode } = chartInfo.value
    let res=null
    if(Source===1){
        res= await apiETAChart.chartRefresh({ ChartInfoId })
    }else if([2,5].includes(Source)){
        res=await apiFutureChart.refreshChart({ ChartInfoId })
    }else if([3,4].includes(Source)){
        res=await apiCorrelationChart.refreshChart({ ChartInfoId })
    }else if(Source===6){
        res=await apiLineEquationChart.refreshChart({ ChartInfoId })
    }else if([7,8,9].includes(Source)) {
        res=await apiStatisticFeatureChart.refreshChart({ ChartInfoId })
    }else if(Source===10) {
        res=await apiCrossVarietyChart.refreshChart({ ChartInfoId })
    }
    if(res.Ret!==200)return
    showToast('刷新成功')
    showMoreAction.value=false
    Source===1?reloadChartInfo():getChartInfo()
}

//分享
function handleChartShare(){
    const url=import.meta.env.VITE_CHART_LINK+`?code=${chartInfo.value.UniqueCode}&fromType=share&lang=ch`
    setClipboardData(url)
}
//保存图表：目前myETA里能保存的只有ETA图库的图和商品价格曲线图
function handleChartSave(){
    const sourceMap = {
        1: saveChartHandle,
        2: saveCommodityChart,//商品价格曲线
        5: saveCommodityChart,//利润曲线
      }
      sourceMap[chartInfo.value.Source]&&sourceMap[chartInfo.value.Source]();
}
function saveChartHandle(){
    //获取每条线的指标配置
    let arr = edbList.value.map((item)=>{
        return {
            ChartColor: item.ChartColor,
            PredictChartColor: item.PredictChartColor,
            ChartStyle: item.ChartStyle,
            ChartWidth: Number(item.ChartWidth),
            EdbInfoId: item.EdbInfoId,
            EdbInfoType: item.EdbInfoType,
            IsAxis: item.IsAxis,
            IsOrder: item.IsOrder,
            LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
            LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
            MaxData: Number(item.MaxData),
            MinData: Number(item.MinData),
        }
    })
    //所有图表的公共参数
    let public_param = {
        ChartClassifyId: chartInfo.value.ChartClassifyId,
        ChartInfoId: chartInfo.value.ChartInfoId,
        ChartEdbInfoList: arr,
    }
    //根据ChartType决定剩余参数
    let type_param = {}
    switch(chartInfo.value.ChartType){
        case 2:
            type_param = {
              DateType: chartState.yearVal,
              StartYear:chartState.startYear || 0,
              Calendar: chartState.calendarType,
              StartDate: chartState.startTime||'',
              EndDate: chartState.endTime||'',
            }
            break
        case 7:
            type_param = {
              DateType: 6,
              LeftMin: String(axisLimitState.leftMin),
              LeftMax: String(axisLimitState.leftMax),
            }
            break
        case 10:
            type_param = {
              DateType: 6,
              Calendar: "公历",
              ExtraConfig: JSON.stringify({
                ...JSON.parse(chartInfo.value.ExtraConfig),
                XMinValue: String(axisLimitState.xMin),
                XMaxValue: String(axisLimitState.xMax),
                YMinValue: String(axisLimitState.leftMin),
                YMaxValue: String(axisLimitState.leftMax),
              })
            }
            break
    }
    if(sameOptionType.includes(chartInfo.value.ChartType)){
        type_param = {
            DateType: chartState.yearVal,
            StartYear:chartState.startYear || 0,
            StartDate:chartState.yearVal === 5 || chartState.yearVal === 6
                ? chartState.startTime
                : '',
            EndDate: chartState.yearVal === 5 ? chartState.endTime : '',
        }
    }
    let params = {...public_param,...type_param}
    //保存
    apiChart.chartSave(params).then(async res=>{
        if(res.Ret!==200) return
        showToast("保存成功")
        setChartImage()
    })
}
function saveCommodityChart(){
    apiMyETAChart.myETASaveChart({
        ChartInfoId:chartInfo.value.ChartInfoId,
        LeftMin:String(axisLimitState.leftMin),
        LeftMax:String(axisLimitState.leftMax),
    }).then(res=>{
        if(res.Ret!==200) return 
        showToast("保存成功")
        setChartImage()
    })
}

//更新缩略图
async function setChartImage(){
    //打开保存图片弹窗
    const svgData = CHARTINS.getSVG({
        chart: {
            width: 340,
            height: 230,
        }
    })
    let form = new FormData();
    form.append('Img', svgData);
    let {Data,Ret} = await apiETAChart.uploadChartImg(form)
    if(Ret!==200||!Data) return
    await apiETAChart.setChartImg({
        ChartInfoId:Number(chartInfo.value.ChartInfoId),
        ImageUrl:Data.ResourceUrl
    })
}

//保存图片
let savePicDialogShow = ref(false)
let savePicSrc = ref('')
function handleChartSavePicture(){
    const {chartWidth,chartHeight} = CHARTINS
    const svgData = CHARTINS.getSVG({
        chart: {
            width: chartWidth,
            height: chartHeight,
        }
    })
    console.log(chartWidth,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 showEidtEnName=ref(false)
function handleShowEditEnName(){
    showEidtEnName.value=true
}
function handleEditEnNameSuccess(){
    chartInfo.value.Source===1?reloadChartInfo():getChartInfo()
}

// 加入我的图库
const isShowAddToMyETADialog=ref(false)

</script>

<template>
    <div class="chart-detail-page" v-if="chartInfo">
        <div class="chart-title">{{chartInfo.ChartName}}</div>
        <!-- 一般曲线图选择时间区间或者季节图选择日期 -->
        <div 
            class="select-time-box" 
            v-if="(sameOptionType.includes(chartInfo.ChartType)&& chartInfo.Source===1)||chartInfo.ChartType===2" 
            @click="openDateSelect"
        >
            <img class="left-icon" src="@/assets/imgs/icon_calendar.png" alt="">
            <span :class="['val-box',!chartState.startTime?'val-box_grey':'']">{{chartState.startTime||'开始日期'}} ~ {{chartState.startTime&&!chartState.endTime?'至今':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)&& chartInfo.Source===1">
                    <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.Source===1)||chartInfo.ChartType===2"
                    @click="openDateSelect"
                >{{chartState.startTime?chartState.startTime+'~'+(chartState.endTime?chartState.endTime:'至今'):'请选择时间段'}}</span>
            </div>
            <div class="right-action-box">
                <div class="item" @click="handleShowAxisLimitOpt" v-if="[1,2,5].includes(chartInfo.Source)&&checkAuthBtn(myETABtn.myChart_editLimit)">
                    <img src="@/assets/imgs/myETA/icon_limit2.png" alt="">
                    <span>上下限设置</span>
                </div>
                <div class="item" @click="showMoreAction=true" v-if="isMoreActionShow||$route.query.from==='edbRelationChart'">
                    <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="allChartList.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="allChartList.length>0">
            <div class="chart-box" id="chart-box"></div>
        </div>

        <!-- 一般曲线图选择时间区间 -->
        <div class="select-year-box" v-if="sameOptionType.includes(chartInfo.ChartType)&& chartInfo.Source===1">
            <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">
           <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="allChartList.length>0">
                <img class="icon" src="@/assets/imgs/icon_arrow.png" alt="">
                <div>上一张</div>
            </div>
            <div class="item" @click="handleSwitchChart('next')" v-if="allChartList.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="[1,2,5].includes(chartInfo.Source)&&checkAuthBtn(myETABtn.myChart_editLimit)">
                <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
                <div>上下限</div>
            </div>
            <div class="item" @click="showMoreAction=true" v-if="isMoreActionShow||$route.query.from==='edbRelationChart'">
                <img class="icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
                <div>更多</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="['year','month','day']"
                />
                <van-date-picker 
                    v-model="temEndTime" 
                    :min-date="minDate" 
                    :max-date="maxDate"
                    :columns-type="['year','month','day']"
                />
            </van-picker-group>
        </div>
    </van-popup>

    <!-- 指标信息弹窗 -->
    <van-popup 
        v-model:show="showEDB"
        :position="width>650?'right':'bottom'"
        :round="width>650?false:true"
        closeable
        :style="width>650?{ width: '400px', height: '100%' }:''"
    >
        <EDBInfo
            :show="showEDB"
            :data="showEDBData"
            :tableData="edbList"
            :chartInfo="chartInfo"
            @change="handleUpdateRender"
        />
    </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'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <div class="more-action-wrap">
            <div class="van-ellipsis title-box">{{chartInfo.ChartName}}</div>
            <div class="item" @click.stop="handleChartRefresh" v-permission="myETABtn.myChart_refresh">
                刷新
            </div>
            <div class="item" @click.stop="handleChartShare" v-if="!chartInfo.Disabled&&checkAuthBtn(myETABtn.myChart_share)">
                分享
            </div>
            <div class="item" @click.stop="handleChartSave" v-if="[1,2,5].includes(chartInfo.Source)&&checkAuthBtn(myETABtn.myChart_save)">
                保存
            </div>
            <div class="item" @click.stop="handleRemoveChart" v-if="$route.query.iscommon!='true'&&checkAuthBtn(myETABtn.myChart_move)">
                移出
            </div>
            <div class="item" @click.stop="handleShowCopyTo" v-if="$route.query.iscommon!='true'&&checkAuthBtn(myETABtn.myChart_copyTo)">
                复制到
            </div>
            <div class="item" @click.stop="isShowAddToMyETADialog=true" v-if="$route.query.from==='edbRelationChart'">
                加入我的图库
            </div>
            <div class="item" @click.stop="showSaveChartOther=true" v-if="chartInfo.Button.IsCopy&&checkAuthBtn(myETABtn.myChart_otherSave)">
                另存为
            </div>
            <div class="item" @click.stop="handleChartSavePicture" v-if="!chartInfo.Disabled&&checkAuthBtn(myETABtn.myChart_copyWechat)&&checkAuthBtn(myETABtn.myChart_copyOffice)">
                保存图片
            </div>
            <div class="item" @click.stop="handleShowEditEnName" v-permission="myETABtn.myChart_enNameSetting">
                设置英文名称
            </div>
            <div class="item" @click.stop="handleDeleteChart" v-if="chartInfo.IsEdit&&checkAuthBtn(myETABtn.myChart_del)">
                删除
            </div>
        </div>
    </van-popup>

    <!-- 复制到 -->
    <van-popup 
        v-model:show="showCopyTo"
        :position="width>650?'center':'bottom'"
        :round="width>650?true:false"
        closeable
    >
        <div class="global-pop-wrap_mobile chart-copyto-wrap">
            <div class="head-box">
                <div class="title">复制到</div>
            </div>
            <div class="content">
                <ul>
                    <li 
                        :class="['item',item.select?'active':'']"
                        v-for="item in copyToOpt" 
                        :key="item.MyChartClassifyId"
                        @click="item.select=!item.select"
                    >{{item.MyChartClassifyName}}</li>
                </ul>
                <div v-if="copyToOpt.length===0" style="padding:50px 0;text-align:center">暂无分类，快去创建我的分类吧~</div>
            </div>
            <div class="bot-btn-box" @click="handleConfirmCopy" v-if="copyToOpt.length>0">确定</div>
        </div>
    </van-popup>

    <!-- 另存为 -->
    <ChartSaveOther
        :source="chartInfo?.Source"
        :chartInfo="chartInfo"
        :show="showSaveChartOther"
        @close="showSaveChartOther=false"
    />

    <!--保存图片弹窗 -->
    <van-popup 
        v-model:show="savePicDialogShow"
        position="center"
        round
    >
        <div class="chart-picture-box">
            <img :src="savePicSrc" alt="">
            <p style="text-align: center;color:#999;margin-top: 10px;">长按保存图片</p>
        </div>
    </van-popup>

    <!-- 修改英文名称 -->
    <van-popup 
        v-model:show="showEidtEnName"
        position="bottom"
        :style="{height:'100%'}"
    >
        <set-chart-en-name
            :isShow="showEidtEnName"
            :chartInfo="chartInfoData"
            @cancel="showEidtEnName=false"
            @success="handleEditEnNameSuccess"
        />
    </van-popup>

    <!-- 加入我的图库 -->
    <AddChartToMyETA 
        :isShowDialog="isShowAddToMyETADialog"
        :dialogPosition="width>650?'center':'bottom'"
        :chartInfo="chartInfo"
        @close="isShowAddToMyETADialog=false"
    />
</template>

<style lang="scss" scoped>
.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;
    }

    .pad-time-action-wrap{
        display: none;
    }

    .select-time-box{
        display: flex;
        align-items: center;
        .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;
            }
        }
    }

    .edb-list-box{
        margin-top: 20px;
        .list-item{
            padding:18px;
            display: flex;
            gap:0 20px;
            border-bottom: 1px solid #DCDFE6;
            &:last-child{
                border-bottom: none;
            }
            .edb-name{
                flex: 1;
            }
        }
    }

    .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;
                        }
                    }
                }
            }
        }
    }
    
}
.more-action-wrap{
    .title-box{
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        padding: $page-padding;
    }
    .item{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 34px;
        border-top: 1px solid $border-color;
        font-size: 32px;
    }
}

.chart-copyto-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{
        .item{
            padding: 32px $page-padding;
            font-size: 32px;
            border-bottom: 1px solid $border-color;
            position: relative;
            &.active{
                color: $theme-color;
                &::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%;
                    right: $page-padding;
                    transform: translateY(-50%);
                }
            }
        }
    }
}

.chart-picture-box{
    width: 300PX;
    border-radius: 6PX;
    padding: 10PX;
    background-color: #fff;
    img{
        width: 100%;
        display: block;
    }
}

@media screen and (min-width:$media-width){
    .chart-detail-page{
        padding: 30px;
        .chart-title{
            font-size: 16px;
            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{
            display: none;
        }
        .select-year-box{
            display: none;
        }
        .calendar-type-box{
            width: 224px;
            margin: 20px auto;
            border-radius: 4px;
            span{
                width: 111px;
                height: 38px;
                line-height: 38px;
            }
        }

        .edb-list-box{
            margin-top: 30px;
            .list-item{
                padding: 10px 0;
            }
        }
        .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;
                    color: $theme-color;
                    &.active{
                        color: #fff;
                        background-color: $theme-color;
                    }
                }
                .time-box{
                    display: inline-block;
                    padding: 0 15px;
                    height: 36px;
                    line-height: 36px;
                    border: 1px solid $theme-color;
                    border-radius: 3px;
                    background-color: #F2F3FF;
                    color: $theme-color;
                }
            }
            .right-action-box{
                display: flex;
                margin-bottom: 20px;
                .item{
                    display: flex;
                    color: $theme-color;
                    margin-left: 20px;
                    img{
                        width: 18px;
                        height: 18px;
                        margin-right: 4px;
                    }
                }
                .red{
                    color: $theme-red;
                }
            }
        }
    }
    .chart-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;
                        }
                    }
                }
            }
        }
    }
    .more-action-wrap{
        .title-box{
            font-size: 18px;
            padding: 20px $page-padding;
        }
        .item{
            padding: 20px $page-padding;
            font-size: 16px;
        }
    }

    .chart-copyto-wrap{
        width: 375px;
        .head-box{
            .title{
                font-size: 18px;
                line-height: 50px;
                padding-left: 16px;
            }
        }
        .bot-btn-box{
            font-size: 16px;
            line-height: 56px;
            border-top-width: 8px;
        }
        .content{
            max-height: 500px;
            overflow-y: auto;
            .item{
                padding: 16px;
                font-size: 16px;
                &.active{
                    &::after{
                        width: 18px;
                        height: 18px;
                        right: 16px;
                    }
                }
            }
        }
    }

    .chart-picture-box{
        width: 500PX;
    }
}
</style>