raiwechat_link_h5/src/views/hzyb/chart/Detail.vue

<script setup>
import chartBox from './component/chartBox.vue'
import noAuth from './component/noAuth.vue'
import sharePoster from '../components/SharePoster.vue'
import { Popup, Toast,Picker } from 'vant';
import {ref,onMounted, reactive, watch,computed} from 'vue'
import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
import moment from 'moment'
import _ from 'lodash';
import Highcharts from 'highcharts/highstock';
import {apiChartInfo,apiChartList,apiChartSave,apiChartBeforeAndNext,apiChartRefresh} from '@/api/hzyb/chart.js'
const router=useRouter()
const route=useRoute()
document.title='图表详情'

localStorage.setItem('hzyb-token',route.query.token)

// 散点x轴
const scatterXAxis = {
    tickPosition: 'inside',
    lineColor: '#bfbfbf',
    tickColor: '#bfbfbf',
    tickLength:5,
    ordinal: false,
    type: 'linear',
}

// 基础y轴配置
const basicYAxis = {
    tickWidth: 1,
    tickLength: 5,
    lineWidth: 1,
    lineColor: '#bfbfbf',
    tickColor: '#bfbfbf',
    offset: 0,
    visible: true,
    gridLineWidth: 0,
    tickPosition: 'inside',
    endOnTick: false,
    startOnTick: false,
    showLastLabel: true,
    tickPixelInterval: 50,
}

//基础x轴配置
const basicXAxis={
    tickPosition: 'inside',
    lineColor: '#bfbfbf',
    tickColor: '#bfbfbf',
    tickLength:5,
    type: 'datetime',
    ordinal: false,
    dateTimeLabelFormats: {
        day: '%y/%m',
        week: '%y/%m',
        month: '%y/%m',
        year: '%y/%m',
    },
    xDateFormat:'%Y-%m-%d'
}


// 获取用户信息
import {apiUserInfo} from '@/api/hzyb/user'
let canSave=ref(false)//是否有保存功能
const getUserInfo=async ()=>{
    const res=await apiUserInfo({Authorization:route.query.token})
    if(res.code===200){
        if(res.data.is_inner){
            canSave.value=true
        }
    }
}
getUserInfo()


let showDate=ref(false)
let startDate=ref('')
let endDate=ref('')
let columns=ref([])
// type 1:年-月 2:年
const makeTimeData=(type)=>{
    let curYear=new Date().getFullYear()
    let yearArr=[]
    let monthArr=[]
    for (let i = 2010; i <= curYear; i++) {
        yearArr.push(i.toString())
    }
    for (let i = 1; i < 13; i++) {
        monthArr.push(i<10?'0'+i:i.toString())
    }
    if(type==1){
        let index1=yearArr.indexOf(startDate.value.split('-')[0])
        let index2=monthArr.indexOf(startDate.value.split('-')[1])
        let index3=yearArr.indexOf(endDate.value.split('-')[0])
        let index4=monthArr.indexOf(endDate.value.split('-')[1])
        return [
            {values:yearArr,defaultIndex: index1>-1?index1:yearArr.length-1},
            {values:monthArr,defaultIndex: index2>-1?index2:monthArr.length-1},
            {values:yearArr,defaultIndex: index3>-1?index3:yearArr.length-1},
            {values:monthArr,defaultIndex: index4>-1?index4:monthArr.length-1}
        ]
    }else{
        let index1=yearArr.indexOf(startDate.value)
        let index2=yearArr.indexOf(endDate.value)
        return [
            {values:yearArr,defaultIndex: index1>-1?index1:yearArr.length-1},
            {values:yearArr,defaultIndex: index2>-1?index2:yearArr.length-1}
        ]
    }
}
const handleShowDate=()=>{
    // if(columns.value.length===0){
        if( sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
            columns.value=makeTimeData(1)
        }else if(resData.value.ChartInfo.ChartType===2){//季节性图表
            columns.value=makeTimeData(2)
        }
    // }
    showDate.value=true
}
// 确定选择时间
const handleConfirmDate=(e)=>{
    let start='',end=''
    if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){
        start=e[0]+'-'+e[1]
        end=e[2]+'-'+e[3]
    }else if(resData.value.ChartInfo.ChartType===2){
        start=e[0]
        end=e[1]
    }
    if(new Date(end)>=new Date(start)){
        startDate.value=start
        endDate.value=end
        dateType.value=5
        getChartInfo()
        showDate.value=false
    }else{
        Toast('结束时间不能小于开始时间')
    }
}

// 选择年份时间段
let dateTypeList=ref([
    {
		name: '15年至今',
		value: 3,
	},
	// {
	// 	name: '18年至今',
	// 	value: 7,
	// },
	// {
	// 	name: '19年至今',
	// 	value: 8,
	// },
	{
		name: '20年至今',
		value: 9,
	},
	{
		name: '21年至今',
		value: 4,
	},
    {
		name: '22年至今',
		value: 11,
	},
    {
		name: '全部',
		value: 0,
	},
])
let dateType=ref(null)
const dateTypeClick=(item)=>{
    startDate.value=''
    endDate.value=''
    dateType.value=item.value
    getChartInfo()
} 

let calendarType=ref('')//季节图 公历/农历
// 公历/农历切换
const calendarTypeChange=(val)=>{
    calendarType.value=val
    // startDate.value=''
    // endDate.value=''
    getChartInfo()
}


// 获取详情
let ChartInfoId=route.query.ChartInfoId
let chartData=ref({
    series:[],
    xAxis:[],
    yAxis:[],

})// 图表配置数据
let resData=ref(null)//接口详情数据
let loading=ref(false)
const sameOptionType = ref([1,3,4,5,6]);//筛选框一样的图表类型 曲线/面积/柱状/散点/组合 常规图
const chartItemStyleArr = ref([
    { label: '曲线图', key: 1 ,value: 'spline'},
    { label: '面积图', key: 3 ,value: 'areaspline'},
    { label: '柱状图', key: 4 ,value: 'column'},
    { label: '散点图', key: 5 ,value: 'scatter'}
])//组合图配置时可选类型

let noauth=ref(false)
let noAuthData=ref(null)
// 如果type：init 则是初始化获取数据 
const getChartInfo=async (type)=>{
    // resData.value=null
    loading.value=true
    const res=await apiChartInfo({
        ChartInfoId:ChartInfoId,
        DateType:dateType.value,
        StartDate:startDate.value&&sameOptionType.value.includes(resData.value.ChartInfo.ChartType)?startDate.value:'',
        EndDate:endDate.value&&sameOptionType.value.includes(resData.value.ChartInfo.ChartType)?endDate.value:'',
        SeasonStartDate:startDate.value&&resData.value.ChartInfo.ChartType===2?startDate.value:'',
        SeasonEndDate:endDate.value&&resData.value.ChartInfo.ChartType===2?endDate.value:'',
        Calendar:calendarType.value,
        Authorization:route.query.token,
        MyChartClassifyId:Number(route.query.MyChartClassifyId)
    })
    loading.value=false
    if(res.code===200){
        resData.value=res.data
        // document.title=res.data.ChartInfo.ChartName
        
        // 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
        if( res.data.ChartInfo.ChartType !==2 ){
            if(type=='init'){
                dateType.value=res.data.ChartInfo.DateType
                startDate.value=res.data.ChartInfo.StartDate||''
                endDate.value=res.data.ChartInfo.EndDate||''
                calendarType.value=res.data.ChartInfo.Calendar||'公历' 
            }
            const chartSetMap = {
                1: setSplineOpt,
                3: setStackOrCombinChart,
                4: setStackOrCombinChart,
                5: setScatterOptions,
                6: setStackOrCombinChart
            };

            chartSetMap[res.data.ChartInfo.ChartType](res.data.EdbInfoList)
        }else{
            if(type=='init'){
                dateType.value=res.data.ChartInfo.DateType
                startDate.value=res.data.ChartInfo.SeasonStartDate||''
                endDate.value=res.data.ChartInfo.SeasonEndDate||''
                calendarType.value=res.data.ChartInfo.Calendar||'公历'
            }
            
            setSeasonOpt(res.data.EdbInfoList[0])
        }

        // 向小程序发送分享数据
        let postData = {
            params:{
                chartInfoId:ChartInfoId,
                searchVal:decodeURIComponent(route.query.searchVal)||'',
                MyChartId:route.query.MyChartId||'',
                MyChartClassifyId:route.query.MyChartClassifyId||'',
            },
            title: res.data.ChartInfo.ChartName,
            shareImg:res.data.ChartInfo.ChartImage
        };
        wx.miniProgram.postMessage({ data: postData });
        

    }else if(res.code==403){
        noauth.value=true
        noAuthData.value=res.data
    }
}
getChartInfo('init')

// 路由改变 解决从搜索页返回数据不刷新问题
onBeforeRouteUpdate((nval)=>{
    console.log('路由改变',nval);
    ChartInfoId=nval.query.ChartInfoId
    dateType.value=null
    startDate.value=''
    endDate.value=''

    getChartInfo('init')
})

// 上下线设置
let showLimit=ref(false)
let hasLeftAxis=ref(false)//是否有左轴
let hasRightAxis=ref(false)//是否有右轴
let axisLimitData=reactive({//左右轴极值
    leftMin:0,
    leftMax:0,
    rightMin:0,
    rightMax:0
})
const handleConfirmSetLimit=()=>{//确定修改极值（研究员会调用一次保存）
    if(canSave.value){
        handleSaveChart()
    }
    showLimit.value=false
}
const handleCloseLimit=()=>{//点击遮罩层关闭弹窗或者点击取消关闭
    getChartInfo()
    showLimit.value=false
}


// 设置常规图配置 曲线
const setSplineOpt=(data)=>{
    let series=[]
    let yAxis=[]
    let xAxis = {}

    let temYLeftArr=[]
    let temYRightArr=[]
    let temYLeftIndex=data.findIndex((item) => item.IsAxis)
    let temYRightIndex=data.findIndex((item) => !item.IsAxis)

    let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间

    data.forEach((item,index)=>{

         //轴位置值相同的下标
        let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);

        let dynamic_title = item.EdbName;
        let dynamic_arr = data.filter(
          (item) => dynamic_title === item.EdbName
        );
        //处理数据列name
        let temName= setDyncmicSerieName(item,dynamic_arr)  

        let seriesItemObj={
            data:[],
            dataGrouping:{
                enabled:false
            },
            type: 'spline',
            yAxis:index,
            name:temName,
            color: item.ChartColor,
            lineWidth: Number(item.ChartWidth),
            visible:true,
            LatestDate:item.LatestDate,
            LatestValue:item.LatestValue
        }
        item.DataList = item.DataList || [];
        for (let i of item.DataList) {
          seriesItemObj.data.push([i.DataTimestamp, i.Value]);
        }
        series.push(seriesItemObj)
        

        // 设置y轴
        if(item.IsAxis){
            temYLeftArr.push(item)
        }else{
            temYRightArr.push(item)
        }

        let yItem={
            ...basicYAxis,
            IsAxis:item.IsAxis,
            labels: {
                formatter: function (ctx) {
                    return sameSideIndex !== index ? '' : ctx.value;
                },
                align: 'center',
                y:5,
            },
            tickWidth: sameSideIndex !== index ? 0 : 1,
            title: {
                text:  sameSideIndex !== index ? '' : `单位:${item.Unit}`,
                align: 'high',
                rotation: 0,
                y: -15,
                offset: 0,
            },
            opposite: item.IsAxis === 0,
            reversed: item.IsOrder,
            min: item.MinData,
            max: item.MaxData,
            chartEdbInfo:item//指标数据用于在保存时读取指标数据
        }
        yAxis.push(yItem)
        
        if(item.DataList.length>0){
            minAndMaxTimeTemArr.push(item.DataList[0].DataTimestamp)
            minAndMaxTimeTemArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
        }
        
    })

    // 设置值
    chartData.value.series=series
    
    
    // 设置x轴
    // 找出所有指标的最大和最小时间 分成6段
    let minTime=Math.min.apply(null,minAndMaxTimeTemArr)
    let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)


    const bool_time = xTimeDiffer(minTime,maxTime)
    if(bool_time){
        xAxis={
            ...basicXAxis,
            labels: {
              formatter: (ctx)=> {
                return Highcharts.dateFormat('%m/%d', ctx.value)
              }
            }
        }
    }
    // console.log(((maxTime-minTime)/6)/(24*3600*1000),':天');
    // let maxYear=new Date(maxTime).getFullYear()
    // let minYear=new Date(minTime).getFullYear()

    xAxis={
        ...basicXAxis,
        tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
    }
    
    chartData.value.xAxis=[xAxis]
    

    yAxis.forEach(item=>{
        if(item.IsAxis){//左轴
            hasLeftAxis.value=true

            // item.min=getAxisMaxOrMin(temYLeftArr,'min')
            // item.max=getAxisMaxOrMin(temYLeftArr,'max')
            // axisLimitData.leftMin=getAxisMaxOrMin(temYLeftArr,'min')
            // axisLimitData.leftMax=getAxisMaxOrMin(temYLeftArr,'max')
            item.min=data[temYLeftIndex].MinData
            item.max=data[temYLeftIndex].MaxData
            axisLimitData.leftMin=data[temYLeftIndex].MinData
            axisLimitData.leftMax=data[temYLeftIndex].MaxData
        }else{
            hasRightAxis.value=true

            // item.min=getAxisMaxOrMin(temYRightArr,'min')
            // item.max=getAxisMaxOrMin(temYRightArr,'max')
            // axisLimitData.rightMin=getAxisMaxOrMin(temYRightArr,'min')
            // axisLimitData.rightMax=getAxisMaxOrMin(temYRightArr,'max')
            item.min=data[temYRightIndex].MinData
            item.max=data[temYRightIndex].MaxData
            axisLimitData.rightMin=data[temYRightIndex].MinData
            axisLimitData.rightMax=data[temYRightIndex].MaxData
        }
    })
    chartData.value.yAxis=yAxis
    chartData.value.rangeSelector={ enabled: false}

}

/* 堆叠图/组合图设置  
    本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
*/
const setStackOrCombinChart = data => {
    //图表类型
    const chartTypeMap = {
        3: 'areaspline',
        4: 'column',
        6: ''
    };
    let chartStyle = chartTypeMap[resData.value.ChartInfo.ChartType];

    let series=[]
    let yAxis=[]
    let xAxis = {}

    let temYLeftArr=[]
    let temYRightArr=[]
    let temYLeftIndex,temYRightIndex;

    let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间


    data.forEach((item,index)=>{

        //轴位置值相同的下标
        let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);

        //堆叠图的yAxis必须一致 数据列所对应的y轴
        let serie_yIndex = index;
        if([3,4].includes(resData.value.ChartInfo.ChartType)) {
            // 类型为堆叠图时公用第一个指标y轴 
            serie_yIndex =  0;
        } else if(resData.value.ChartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
            // 组合图找第一个堆叠柱状或面积的作为公用
            serie_yIndex = data.findIndex(i => i.ChartStyle === item.ChartStyle);
        }
        //数据对应的y轴是公用轴则配置也共享
        item.IsAxis = serie_yIndex === index ? item.IsAxis : data[serie_yIndex].IsAxis;
        item.IsOrder = serie_yIndex === index ? item.IsOrder : data[serie_yIndex].IsOrder;

        temYLeftIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
            ? (data[serie_yIndex].IsAxis ? serie_yIndex : -1)
            : data.findIndex((item) => item.IsAxis);
        temYRightIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
            ? (data[serie_yIndex].IsAxis ? -1 : serie_yIndex)
            : data.findIndex((item) => !item.IsAxis);

        let dynamic_title = item.EdbName;
        let dynamic_arr = data.filter(
          (item) => dynamic_title === item.EdbName
        );
        //处理数据列name
        let temName= setDyncmicSerieName(item,dynamic_arr)  

        let seriesItemObj={
            data:[],
            dataGrouping:{
                enabled:false
            },
            type: chartStyle || item.ChartStyle,
            yAxis:serie_yIndex,
            name:temName,
            color: item.ChartColor,
            lineWidth: (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
            fillColor: (resData.value.ChartInfo.ChartType === 3 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
            visible:true,
            LatestDate:item.LatestDate,
            LatestValue:item.LatestValue
        }
        item.DataList = item.DataList || [];
        for (let i of item.DataList) {
          seriesItemObj.data.push([i.DataTimestamp, i.Value]);
        }
        series.push(seriesItemObj)
        

        // 设置y轴
        if(item.IsAxis){
            temYLeftArr.push(item)
        }else{
            temYRightArr.push(item)
        }

        let yItem={
            ...basicYAxis,
            IsAxis:item.IsAxis,
            labels: {
                formatter: function (ctx) {
                    return sameSideIndex !== index ? '' : ctx.value;
                },
                align: 'center',
                y:5,
            },
            title: {
                text:  sameSideIndex !== index ? '' : `单位:${item.Unit}`,
                align: 'high',
                rotation: 0,
                y: -15,
                offset: 0,
            },
            opposite: item.IsAxis === 0,
            reversed: item.IsOrder,
            min: item.MinData,
            max: item.MaxData,
            tickWidth: sameSideIndex !== index ? 0 : 1,
            visible: serie_yIndex === index ? true : false,
            chartEdbInfo:item//指标数据用于在保存时读取指标数据
        }
        yAxis.push(yItem)
        
        if(item.DataList.length>0){
            minAndMaxTimeTemArr.push(item.DataList[0].DataTimestamp)
            minAndMaxTimeTemArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
        }
        
    })

    // 设置值
    chartData.value.series=series
    
    
    // 设置x轴
    // 找出所有指标的最大和最小时间 分成6段
    let minTime=Math.min.apply(null,minAndMaxTimeTemArr)
    let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)


    const bool_time = xTimeDiffer(minTime,maxTime)
    if(bool_time){
        xAxis={
            ...basicXAxis,
            labels: {
              formatter: (ctx)=> {
                return Highcharts.dateFormat('%m/%d', ctx.value)
              }
            }
        }
    }

    xAxis={
        ...basicXAxis,
        tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
    }
    
    chartData.value.xAxis=[xAxis]
    

    yAxis.forEach(item=>{
        if(item.IsAxis){//左轴
            hasLeftAxis.value=true
            item.min=data[temYLeftIndex].MinData
            item.max=data[temYLeftIndex].MaxData
            axisLimitData.leftMin=data[temYLeftIndex].MinData
            axisLimitData.leftMax=data[temYLeftIndex].MaxData
        }else{
            hasRightAxis.value=true
            item.min=data[temYRightIndex].MinData
            item.max=data[temYRightIndex].MaxData
            axisLimitData.rightMin=data[temYRightIndex].MinData
            axisLimitData.rightMax=data[temYRightIndex].MaxData
        }
    })
    chartData.value.yAxis=yAxis
    chartData.value.rangeSelector={ enabled: false}
}

/* 拼接数据列动态name */
const setDyncmicSerieName = (item,dynamic_arr) => {
    // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
    let dynamic_tag =item.IsAxis && item.IsOrder && item.EdbInfoType
        ? '(逆序)'
        : !item.IsAxis && item.IsOrder && item.EdbInfoType
        ? '(右轴，逆序)'
        : !item.IsAxis && !item.IsOrder && item.EdbInfoType
        ? '(右轴)'
        : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
        ? `(右轴，领先${item.LeadValue}${item.LeadUnit})`
        : !item.IsAxis && item.IsOrder && !item.EdbInfoType
        ? `(右轴，逆序，领先${item.LeadValue}${item.LeadUnit})`
        : item.IsAxis && item.IsOrder && !item.EdbInfoType
        ? `(逆序，领先${item.LeadValue}${item.LeadUnit})`
        : item.IsAxis && !item.IsOrder && !item.EdbInfoType
        ? `(领先${item.LeadValue}${item.LeadUnit})`
        : '';
    let temName = dynamic_arr.length > 1
                ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
                : `${item.EdbName}${dynamic_tag}`
    if(temName.length>20){
        let temArr=[]
        for(let i=0;i<temName.length/20;i++){
            temArr.push(temName.slice(i*20,i*20+20))
        }
        // console.log(temArr);
        temName=temArr.join('<br>')
    }

    return temName
}

//设置季节图配置
const setSeasonOpt=(data)=>{
    hasLeftAxis.value=true

    const colorsArr=['#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA','#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF']
    let series=[],yAxis=[]
    //农历默认选中一年数据并隐藏按钮  公历显示全部数据
    let rangeSelector={}

    // 公历
    if(calendarType.value==='公历'){
        data.DataList.forEach((item,index)=>{
            let seriesItem={
                data:[],
                dataGrouping:{
                    enabled:false
                },
                type:data.ChartStyle,
                yAxis:index,
                name:item.Year,
                color:colorsArr.slice(-data.DataList.length)[index],                
                visible:true
            }
            item.DataList=item.DataList||[]
            for(let i of item.DataList){
                seriesItem.data.push([i.DataTimestamp, i.Value])
            }
            series.push(seriesItem)

            let yAxisItem={
                IsAxis:data.IsAxis,
                labels: {
                    // formatter: function (ctx) {
                    //     return ctx.value;
                    // },
                    align: 'center',
                    y:5
                },
                title: {
                    text:  `单位:${data.Unit}`,
                    align: 'high',
                    rotation: 0,
                    y: -15,
                    offset: 0,
                },
                max: Number(data.MaxData),
                min: Number(data.MinData),
                lineWidth: 1,
                lineColor: '#bfbfbf',
                tickColor: '#bfbfbf',
                offset: 0,
                opposite: false,
                reversed: false,
                visible: true,
                gridLineWidth: 0,
                tickWidth: 1,
                tickLength:5,
                tickPosition: 'inside',
                endOnTick: false,
                startOnTick: false,
                showLastLabel: true, //显示最后刻度值
                tickPixelInterval: 50,
                // chartEdbInfo:item//指标数据
            }
            yAxis.push(yAxisItem)
        })

        rangeSelector={ enabled: false}
    }

    // 农历
    if(calendarType.value==='农历'){
        let filterArr=data.DataList.List&&data.DataList.List.slice(1,data.DataList.List.length)||[]
        console.log('aaa',filterArr);
        filterArr.forEach((item,index)=>{
            let seriesItem={
                data:[],
                dataGrouping:{
                    enabled:false
                },
                type:data.ChartStyle,
                yAxis:index,
                name:item.Year,
                color:colorsArr.slice(-filterArr.length)[index],         
                visible:true
            }
            let temarr=item.Items||[]
            for(let i of temarr){
                seriesItem.data.push([i.DataTimestamp, i.Value])
            }
            series.push(seriesItem)

            let yAxisItem={
                IsAxis:data.IsAxis,
                labels: {
                    formatter: function (ctx) {
                        return ctx.value;
                    },
                    align: 'center',
                    y:5
                },
                title: {
                    text:  `单位:${data.Unit}`,
                    align: 'high',
                    rotation: 0,
                    y: -15,
                    offset: 0,
                },
                max: Number(data.MaxData),
                min: Number(data.MinData),
                lineWidth: 1,
                lineColor: '#bfbfbf',
                tickColor: '#bfbfbf',
                offset: 0,
                opposite: false,
                reversed: false,
                visible: true,
                gridLineWidth: 0,
                tickWidth: 1,
                tickLength:5,
                tickPosition: 'inside',
                endOnTick: false,
                startOnTick: false,
                showLastLabel: true, //显示最后刻度值
                tickPixelInterval: 50,
                // chartEdbInfo:item//指标数据用于在保存时读取指标数据
            }
            yAxis.push(yAxisItem)
        })

        rangeSelector={ 
            enabled: true,
            selected: 0,
            inputStyle: {
                display: 'none',
            },
            labelStyle: {
                display: 'none',
            },
            buttonTheme: {
                style: {
                    display: 'none',
                },
            },
            buttons: [
                {
                  type: 'month',
                  count: 12,
                  text: '12月',
                },
                {
                  type: 'month',
                  count: 15,
                  text: '15月',
                },
                {
                  type: 'all',
                  text: '全部',
                }
            ]
        }
    }

    chartData.value.chart={ spacing: [30, 8, 2, 8]}
    chartData.value.series=series
    chartData.value.yAxis=yAxis
    chartData.value.rangeSelector=rangeSelector
    // 设置坐标轴极值
    hasLeftAxis.value=true
    axisLimitData.leftMin=Number(data.MinData)
    axisLimitData.leftMax=Number(data.MaxData)

    // 季节图x轴显示月/日
    let xAxis={
        tickPosition: 'inside',
		lineColor: '#bfbfbf',
    	tickColor: '#bfbfbf',
		tickLength:5,
		type: 'datetime',
		ordinal: false,
		dateTimeLabelFormats: {
			day: '%y/%m',
			week: '%y/%m',
			month: '%y/%m',
			year: '%y/%m',
		},
        labels: {
            formatter: (ctx)=> {
                return Highcharts.dateFormat('%m/%d', ctx.value)
            }
        }
    }

    xAxis={
        ...xAxis,
        tickInterval:24*3600*1000*60,//季节图
    }
    

    chartData.value.xAxis=[xAxis]

    // 季节图提示框显示 月/日
    chartData.value.tooltip={
        split: false,
        shared: true,
        dateTimeLabelFormats: {
          // 时间格式化字符
          day: '%m/%d',
          week: '%m/%d',
          month: '%m/%d',
          year: '%m/%d',
        },
        xDateFormat: '%m/%d',
    }

}

/* 散点图 第一个指标值为x轴 第二个指标为y轴*/
const setScatterOptions = (dataList) => {
    const { ChartInfo } = resData.value;

    // 取2个指标中日期相同的数据
    const real_data = [];
    let tmpData_date = {};//用来取点对应的日期
    let data1 =  _.cloneDeep(dataList)[0].DataList || [];
    let data2 =  _.cloneDeep(dataList)[1].DataList || [];
    data1.forEach((_item) => {
        data2.forEach((_item2) => {
            if(_item.DataTimestamp === _item2.DataTimestamp) {
                //日期
                let itemIndex =_item.Value + "_" +_item2.Value
                if(tmpData_date[itemIndex]) {
                    tmpData_date[itemIndex].push( moment(_item.DataTimestamp).format('YYYY/MM/DD'))
                } else {
                    tmpData_date[itemIndex] = [moment(_item.DataTimestamp).format('YYYY/MM/DD')]
                }
            
                //值
                real_data.push({
                    x: _item.Value,
                    y: _item2.Value
                })
            }
        })
    })
    real_data.sort((x,y) => x-y);

    //悬浮窗 拼接日期 原始指标名称
    let tooltip = {
        formatter: function() {
            return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
            ${dataList[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
            ${dataList[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
            `
        }
    }

    const { IsOrder,ChartColor } = dataList[0];
    //y轴
    let yAxis = {
        title: {
            text:  `单位:${dataList[1].Unit}`,
            align: 'high',
            rotation: 0,
            y: -15,
            offset: 0,
        },
        labels: {
            formatter: function (ctx) {
            return ctx.value;
            },
            align: 'center',
        },
        opposite: false,
        reversed: IsOrder,
        min: Number(dataList[0].MinData),
        max: Number(dataList[0].MaxData),
        tickWidth: 1,
        tickLength: 5,
        lineWidth: 1,
        lineColor: '#bfbfbf',
        tickColor: '#bfbfbf',
        offset: 0,
        visible: true,
        gridLineWidth: 0,
        tickPosition: 'inside',
        endOnTick: false,
        startOnTick: false,
        showLastLabel: true,
        tickPixelInterval: 50
    }

    //数据列
    let series = {
        data: [],
        type: 'scatter',
        name: `${ChartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
        color: ChartColor,
        visible:true,
        lineWidth: 0
    }
    real_data.forEach(_ => {
        series.data.push([_.x,_.y])
    })
    
    chartData.value = {
        title: {
            text:''
        },
        series: [ series ],
        yAxis,
        xAxis: {
            ...scatterXAxis,
            title: {
                text:  `单位:${dataList[0].Unit}`,
                align: 'high',
                rotation: 0,
                x: 0,
                offset: 20,
            },
        },
        tooltip
    }
}

// 查询范围为1年内 x轴显示为月/日 否则默认年/月
const xTimeDiffer=(minTime,maxTime)=>{
    //年限差
    let year_differ=moment(maxTime).diff(moment(minTime),'years',true)
    console.log('年限差',year_differ)
    if (year_differ<=1) {
        console.log('true');
        return true;
    } else {
        console.log('false');
        return false;
    }
}

// 找出最大最小值 arr 数据, type:min max
const getAxisMaxOrMin=(arr,type)=>{
    let minArr=[],maxArr=[],resNum=0

    arr.forEach(item=>{
        minArr.push(item.MinData)
        maxArr.push(item.MaxData)
    })

    if(type==='min'){
        resNum=Math.min.apply(null,minArr)
    }else{
        resNum=Math.max.apply(null,maxArr)
    }

    return resNum
}

// 监听极值变化
watch(
    ()=>axisLimitData,
    (nval)=>{
        // 只有当修改极值弹窗弹起时才去修改
        if(!showLimit.value) return
        console.log('极值改变');
        chartData.value.yAxis.forEach(item=>{
            if(item.IsAxis){//左轴
                item.min=nval.leftMin
                item.max=nval.leftMax
            }else{
                item.min=nval.rightMin
                item.max=nval.rightMax
            }
        })
    },
    {
        deep:true
    }
)

// 前去搜索
const handleGoSearch=()=>{
    router.push({
        path:'/hzyb/chart/search',
        query:{
            token:route.query.token
        }
    })
}

// 获取当前图表
let searchVal=decodeURIComponent(route.query.searchVal)
let searchListData=ref([])//搜索的数据
const getSearchListData=async ()=>{
    const res=await apiChartList({Keywords:searchVal,Page:1,Limit:10000,Authorization:route.query.token})
    if(res.code===200){
        searchListData.value=res.data
    }
}

let chartBeforeAndNextData=ref(null)

// 翻页
const pageChange=async (type)=>{
    // 搜索情况
    if(searchVal){
        if(type==='before'){
            let index=searchListData.value.findIndex(item=>item.ChartInfoId==resData.value.ChartInfo.ChartInfoId)
            if(!searchListData.value[index-1]){
                Toast('当前已是第一张图')
            }else{
                calendarType.value=''
                router.replace({
                    query:{
                        ...route.query,
                        ChartInfoId:searchListData.value[index-1].ChartInfoId,
                    }
                })
            }
        }
        if(type==='next'){
            let index=searchListData.value.findIndex(item=>item.ChartInfoId==resData.value.ChartInfo.ChartInfoId)
            if(!searchListData.value[index+1]){
                Toast('当前已是最后一张图')
            }else{
                calendarType.value=''
                router.replace({
                    query:{
                        ...route.query,
                        ChartInfoId:searchListData.value[index+1].ChartInfoId,
                    }
                })
            }
        }

        return
    }

    // 非搜索情况可切换分类
    const res=await apiChartBeforeAndNext({
        MyChartId:route.query.MyChartId,
        MyChartClassifyId:route.query.MyChartClassifyId,
        Authorization:route.query.token
    })
    if(res.code===200){
        chartBeforeAndNextData.value=res.data
        if(type==='before'){
            if(chartBeforeAndNextData.value.PrevChart.ChartInfoId===0){
                Toast('当前已是第一张图')
            }else{
                if(chartBeforeAndNextData.value.PrevChart.Switch){
                    let temStr=chartBeforeAndNextData.value.PrevChart.MyChartClassifyName
                    setTimeout(() => {
                        Toast({
                            message:`您正在浏览${temStr}中的图表`,
                            duration: 3000,
                        })
                    }, 500);
                }
                calendarType.value=''
                router.replace({
                    query:{
                        ...route.query,
                        ChartInfoId:chartBeforeAndNextData.value.PrevChart.ChartInfoId,
                        MyChartId:chartBeforeAndNextData.value.PrevChart.MyChartId,
                        MyChartClassifyId:chartBeforeAndNextData.value.PrevChart.MyChartClassifyId,
                        token:route.query.token
                    }
                })
            }
        }else if(type==='next'){
            if(chartBeforeAndNextData.value.NextChart.ChartInfoId===0){
                Toast('当前已是最后一张图')
            }else{
                if(chartBeforeAndNextData.value.NextChart.Switch){
                    let temStr=chartBeforeAndNextData.value.NextChart.MyChartClassifyName
                    setTimeout(() => {
                        Toast({
                            message:`您正在浏览${temStr}中的图表`,
                            duration: 3000,
                        })
                    }, 500);
                }
                calendarType.value=''
                router.replace({
                    query:{
                        ...route.query,
                        ChartInfoId:chartBeforeAndNextData.value.NextChart.ChartInfoId,
                        MyChartId:chartBeforeAndNextData.value.NextChart.MyChartId,
                        MyChartClassifyId:chartBeforeAndNextData.value.NextChart.MyChartClassifyId,
                        token:route.query.token
                    }
                })
                
            }
        }
    }
    
}

onMounted(()=>{
    if(searchVal){
        getSearchListData()
    }
})

// 保存
const handleSaveChart=async ()=>{
    let params={}
    if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
        let arr=chartData.value.yAxis.map(item=>{
            return {
                ChartColor: item.chartEdbInfo.ChartColor,
                ChartStyle: item.chartEdbInfo.ChartStyle,
                ChartWidth: Number(item.chartEdbInfo.ChartWidth),
                EdbInfoId: item.chartEdbInfo.EdbInfoId,
                EdbInfoType: item.chartEdbInfo.EdbInfoType,
                IsAxis: item.chartEdbInfo.IsAxis,
                IsOrder: item.chartEdbInfo.IsOrder,
                LeadUnit: item.chartEdbInfo.EdbInfoType ? '' : item.chartEdbInfo.LeadUnit,
                LeadValue: item.chartEdbInfo.EdbInfoType ? 0 : Number(item.chartEdbInfo.LeadValue),
                MaxData: Number(item.max),
                MinData: Number(item.min),
            }
        })
        params={
            ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
            ChartEdbInfoList: arr,
            DateType: dateType.value,
            StartDate:startDate.value,
            EndDate: endDate.value,
        }
    }else if(resData.value.ChartInfo.ChartType===2){//季节图
        let arr=resData.value.EdbInfoList.map(item=>{
            return {
                ChartColor: item.ChartColor,
                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(chartData.value.yAxis[0].max),
                MinData: Number(chartData.value.yAxis[0].min),
            }
        })
        params={
            ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
            ChartEdbInfoList: arr,
            Calendar: calendarType.value,
            SeasonStartDate:startDate.value,
            SeasonEndDate: endDate.value,
        }
    }
    const res=await apiChartSave(params)
    if(res.code===200){
        Toast.success('保存成功')
    }

}

// 刷新图表
const handleRefreshChart=async ()=>{
    const res=await apiChartRefresh({ChartInfoId:Number(ChartInfoId)})
    if(res.code===200){
        setTimeout(() => {
            Toast.success(res.msg)
        }, 200);
        getChartInfo()
    }
}

let pageBoxPosition=reactive({
    top:window.innerHeight-165,
    left:window.innerWidth-50,
    temTop:0,
    temLeft:0,
})

const pageTouchmove=(e)=>{
    const touchObj=e.touches[0]
    let top=touchObj.clientY-82
    let left=touchObj.clientX-25
    if(left<=0){
        left=0
    }
    if(left>window.innerWidth-50){
        left=window.innerWidth-50
    }
    if(top<=0){
        top=0
    }
    if(top>window.innerHeight-115){
        top=window.innerHeight-115
    }

    pageBoxPosition.top=top
    pageBoxPosition.left=left

    event.preventDefault();//阻止页面移动
}

// 生成海报所需跳转到小程序页面参数
const code_scene=computed(()=>{
    let obj= {
        chartInfoId:ChartInfoId,
        searchVal:decodeURIComponent(route.query.searchVal)||'',
        MyChartId:route.query.MyChartId||'',
        MyChartClassifyId:route.query.MyChartClassifyId||'',
        from:'share'
    }
    return JSON.stringify(obj)
})
// 生成海报图片所需要的数据
const posterParams=computed(()=>{
    return {
        chart_name:resData.value.ChartInfo.ChartName,
        chart_image:resData.value.ChartInfo.ChartImage
    }
})


</script>

<template>
    <div class="chart-detail" v-if="!loading&&!noauth">
        <div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
        <div class="top-box">
            <div class="flex calendar-box" style="float:left" @click="handleShowDate">
                <img src="../../../assets/hzyb/chart/calendar.png" alt="">
                <span class="date">{{startDate||'开始日期'}}</span>
                <span style="margin:0 5px">至</span>
                <span class="date">{{endDate||'结束日期'}}</span>
            </div>
            <img class="icon" src="../../../assets/hzyb/chart/search.png" alt="" @click="handleGoSearch">
            <share-poster 
                :shareData="{
                    type:'chart_detail',
                    code_scene:code_scene,
                    code_page:'pages-chart/chartDetail',
                    data:posterParams
                }"
            ></share-poster>
            <img class="icon" src="../../../assets/hzyb/chart/save.png" alt="" @click="handleSaveChart" v-if="canSave">
            <img class="icon" src="../../../assets/hzyb/chart/refresh.png" alt="" @click="handleRefreshChart">
        </div>

        <chartBox :options='chartData' v-if="!loading"></chartBox>
        
        <div class="flex source-box">
            <div :style="{flex:resData&&resData.ChartInfo.ChartType===2?1:2}"><span v-if="resData&&resData.ChartInfo.ChartType!==2">来源：{{resData&&resData.ChartInfo.ChartSource}}</span></div>
            <div class="season-change-box" style="flex:1" v-if="resData&&resData.ChartInfo.ChartType===2">
                <span :class="calendarType==='农历'&&'active'" @click="calendarTypeChange('农历')">农历</span>
                <span :class="calendarType==='公历'&&'active'" @click="calendarTypeChange('公历')">公历</span>
            </div>
            <span style="color:#E3B377;flex:1;text-align:right" @click="showLimit=true">上下限设置</span>
        </div>
        <div class="source-box" style="margin-top:5px" v-if="resData&&resData.ChartInfo.ChartType===2">来源：{{resData&&resData.ChartInfo.ChartSource}}</div>

        <!-- 日期类型 -->
        <div class="date-type-box" v-if="resData&&sameOptionType.includes(resData.ChartInfo.ChartType)">
            <div 
                :class="['item',item.value==dateType?'active':'']" 
                v-for="item in dateTypeList" 
                :key="item.value"
                @click="dateTypeClick(item)"
            >{{item.name}}</div>
        </div>

        <!-- 最新值 -->
        <div class="latest-value-wrap" v-if="resData">
            <p style="margin-bottom:10px">最新数值</p>
            <ul class="list" v-if="sameOptionType.includes(resData.ChartInfo.ChartType)">
                <li v-for="item in chartData.series" :key="item.name">
                    <p style="color:#333">{{moment(item.LatestDate).format('YYYY-MM-DD')}}</p>
                    <p :style="{color:item.color,flex:1}">{{item.name.length>20?item.name.replace(/<br>/g,''):item.name}}</p>
                    <p style="color:#1F243A">{{item.LatestValue}}</p>
                </li>
            </ul>
            <ul class="list" v-else>
                <li>
                    <p style="color:#333">{{moment(resData.EdbInfoList[0].LatestDate).format('YYYY-MM-DD')}}</p>
                    <p :style="{color:resData.EdbInfoList[0].ChartColor,flex:1}">{{resData.ChartInfo.ChartName}}</p>
                    <p style="color:#1F243A">{{resData.EdbInfoList[0].LatestValue}}</p>
                </li>
            </ul>   
        </div>

        <!-- 上一张下一张图切换 -->
        <div 
            v-if="$route.query.from!='share'"
            class="change-page-wrap" 
            :style="{left:pageBoxPosition.left+'px',top:pageBoxPosition.top+'px'}"
            @touchmove.stop="pageTouchmove"
            @touchstart.stop="pageTouchStart"
        >
            <div class="top" @click.stop="pageChange('before')"></div>
            <div class="bot" @click.stop="pageChange('next')"></div>
        </div>

        <!-- 日期选择 -->
        <Popup
            v-model:show="showDate"
            position="bottom"
            round
        >   
            <Picker 
                title="" 
                :columns="columns" 
                @cancel="showDate=false" 
                @confirm="handleConfirmDate" 
            />
        </Popup>

        <!-- 上下限设置 -->
        <Popup
            v-model:show="showLimit"
            position="bottom"
            :overlay-style="{background:'rgba(0,0,0,0)'}"
            @click-overlay="handleCloseLimit"
        >
            <div class="set-limit-box">
                <div class="flex limit-top">
                    <span style="color:#A7A7A7" @click="handleCloseLimit">取消</span>
                    <span>上下限设置</span>
                    <span style="color:#E3B377" @click="handleConfirmSetLimit">确定</span>
                </div>
                <div class="con">
                    <p style="margin:20px 0" class="top">
                        <span>上限</span>
                        <span>下限</span>
                    </p>
                    <p style="margin-bottom:25px" v-if="hasLeftAxis">
                        <span style="margin-right:35px">左轴</span>
                        <input type="number" v-model="axisLimitData.leftMax">
                        <span style="margin:0 10px">至</span>
                        <input type="number" v-model="axisLimitData.leftMin">
                    </p>
                    <p v-if="hasRightAxis">
                        <span style="margin-right:35px">右轴</span>
                        <input type="number" v-model="axisLimitData.rightMax">
                        <span style="margin:0 10px">至</span>
                        <input type="number" v-model="axisLimitData.rightMin">
                    </p>
                </div>
            </div>
        </Popup>
    </div>
    <!-- 无权限 -->
    <noAuth v-if="noauth" :data="noAuthData"></noAuth>

</template>

<style lang="scss" scoped>
::v-deep(.highcharts-axis-title) {
    font-size: 20px;
}
.chart-detail{
    .flex{
        display: flex;
    }
    .chart-title{
        padding: 40px 34px 20px 34px;
        font-size: 32px;
        font-weight: bold;
        color: #1F243A;
        letter-spacing: 2px;
    }
    .top-box{
        padding: 20px 34px 40px 34px;
        height: 40px;
        .calendar-box{
            align-items: center;
            img{
                width: 40px;
                height: 40px;
                margin-right: 18px;
            }
            .date{
                width: 128px;
                height: 40px;
                background: #F6F6F6;
                border: 1px solid #E5E5E5;
                border-radius: 4px;
                text-align: center;
                line-height: 44px;
                font-size: 24px;
                color: #1F243A;
            }
        }
        .icon{
            float: right;
            width: 40px;
            height: 40px;
            margin-left: 30px;
        }
    }
    .select-date-box-head{
        padding: 40px 34px;
        justify-content: space-between;
    }
    .select-date-box{
        // height:50vh;
        .left,.right{
            flex: 1;
        }
    }

    

    .source-box{
        padding: 0 34px;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        margin-bottom: 10px;
        width: 100vw;
        margin-top: 50px;
        .season-change-box{
            height: 50px;
            margin-bottom: 10px;
            padding-right: 34px;
            span{
                display: inline-block;
                width: 100px;
                line-height: 50px;
                text-align: center;
                border: 1px solid #ededed;
                float: right;
                border-radius: 4px;
                &:first-child{
                    border-left: none;
                }
                &:last-child{
                    border-right: none;
                }
            }

            .active{
                color: #fff;
                background-color: #E3B377;
            }
        }
    }

    .date-type-box{
        padding: 0 34px;
        margin-top: 38px;
        display: flex;
        overflow-x: auto;
        border-bottom: 1px solid #F6F6F6;
        .item{
            // flex: 1;
            width: 20vw;
            padding: 0 8px;
            text-align: center;
            font-size: 24px;
            padding-bottom: 14px;
            color: #1F243A;
        }
        .active{
            color: #E3B377;
            border-bottom: 6px solid #E3B377;
        }
    }

    .van-tabs{
        border-bottom: 1px solid #F6F6F6;
    }

    .latest-value-wrap{
        margin-top: 60px;
        padding: 0 34px;
        margin-bottom: 30px;
        .list{
            box-sizing: border-box;
            li{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 30px 0;
                width: 100%;
                box-sizing: border-box;
                border-top: 1px solid #F6F6F6;
                text-align: center;
                font-size:24px;
                box-sizing: border-box;
                // &:nth-child(odd){
                //     border-right: 1px solid #F6F6F6;
                // }
                p:nth-child(1){
                    width: 150px;
                    flex-shrink: 0;
                }
                p:nth-child(3){
                    flex-shrink: 0;
                    font-size: 28px;
                    width: 150px;
                    line-height: 1;
                    position: relative;
                    top: 3px;
                }
            }
            .one{
                flex: 1;
                border-right: none !important;
            }
        }
    }

    .set-limit-box{
        min-height: 450px;
        padding-top: 5px;
        .limit-top{
            padding: 30px 34px;
            background: #FFFFFF;
            box-shadow: 0px 0 12px rgba(206, 206, 206, 0.3);
            justify-content: space-between;
            font-size: 32px;
        }
        .con{
            font-size: 28px;
            padding-left: 34px;
            .top{
                span:first-child{
                    margin-left: 196px;
                }
                span:last-child{
                    margin-left: 188px;
                }
            }
            input{
                width: 181px;
                height: 50px;
                font-size: 24px;
                background: #F6F6F6;
                border: 1px solid #E5E5E5;
                border-radius: 4px;
                box-sizing: border-box;
                padding: 0 10px;
            }
        }
    }


    .change-page-wrap{
        position: fixed;
        right: 0;
        bottom: 50px;
        width: 50PX;
        height: 115PX;
        background-image: url('../../../assets/hzyb/chart/before-next.png');
        background-size: cover;
        z-index: 10;
        .top,.bot{
            height: 50%;
        }

    }


}
</style>