Merge branch 'ETA_1.0.5'

src/views/hzyb/chart/Detail.vue

@@ -3,7 +3,7 @@ import chartBox from './component/chartBox.vue'
 import noAuth from './component/noAuth.vue'
 import sharePoster from '../components/SharePoster.vue'
 import collectBox from './component/collectBox.vue'
-import { Popup, Toast,Picker,Icon,Tab,Tabs,ActionSheet} from 'vant';
+import { Popup, Toast,Picker,Icon,Tab,Tabs,ActionSheet,DatetimePicker} from 'vant';
 import {ref,onMounted, reactive, watch,computed,nextTick} from 'vue'
 import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
 import moment from 'moment'
@@ -96,60 +96,74 @@ const pickerInfo=reactive({
 })
 // picker使用数据
 const dateRange=[]
-const DateConfirm=(data,dateType)=>{
+const dateRangeStart=ref(null)
+const dateRangeEnd=ref(null)
+
+const DateConfirm=(date,dateType)=>{
+    // console.log(date);
     if(dateType=='start'){
-        if(resData.value.ChartInfo.ChartType===2){
-            dateRange[0]=data[0]
-        }else{
-            dateRange[0]=data[0]+'-'+data[1]
-        }
+        dateRange[0]=moment(date).format('YYYY-MM-DD')
     }else{
-        if(resData.value.ChartInfo.ChartType===2){
-            dateRange[1]=data[0]
-        }else{
-            dateRange[1]=data[0]+'-'+data[1]
-        }
+        dateRange[1]=moment(date).format('YYYY-MM-DD')
     }
 }
 
-let columnsStart=ref([])
-let columnsEnd=ref([])
+// let columnsStart=ref([])
+// let columnsEnd=ref([])
 // type 1:年-月 2:年
-const makeTimeData=(type,dateType)=>{
-    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())
-    }
-    const date = dateType=='start'?startDate:endDate
-    if(type==1){
-        let index1=yearArr.indexOf(date.value.split('-')[0])
-        let index2=monthArr.indexOf(date.value.split('-')[1])
-        return [
-            {values:yearArr,defaultIndex: index1>-1?index1:yearArr.length-1},
-            {values:monthArr,defaultIndex: index2>-1?index2:monthArr.length-1}
-        ]
-    }else{
-        let index1=yearArr.indexOf(date)
-        return [
-            {values:yearArr,defaultIndex: index1>-1?index1:yearArr.length-1}
-        ]
-    }
-}
+// const makeTimeData=(type,dateType)=>{
+//     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())
+//     }
+//     const date = dateType=='start'?startDate:endDate
+//     if(type==1){
+//         let index1=yearArr.indexOf(date.value.split('-')[0])
+//         let index2=monthArr.indexOf(date.value.split('-')[1])
+//         return [
+//             {values:yearArr,defaultIndex: index1>-1?index1:yearArr.length-1},
+//             {values:monthArr,defaultIndex: index2>-1?index2:monthArr.length-1}
+//         ]
+//     }else{
+//         let index1=yearArr.indexOf(date)
+//         return [
+//             {values:yearArr,defaultIndex: index1>-1?index1:yearArr.length-1}
+//         ]
+//     }
+// }
 const handleShowDate=()=>{
-    // if(columns.value.length===0){
-        if( sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
-            columnsStart.value=makeTimeData(1,'start')
-            columnsEnd.value=makeTimeData(1,'end')
-        }else if(resData.value.ChartInfo.ChartType===2){//季节性图表
-            columnsStart.value=makeTimeData(2,'start')
-            columnsEnd.value=makeTimeData(2,'end')
-        }
-    // }
+    // 回显
+    switch (dateType.value) {
+        case 3:
+            dateRangeStart.value = new Date('2015-01-01')
+            dateRangeEnd.value = new Date(latestDate.value)
+            break;
+        case 9:
+            dateRangeStart.value = new Date('2020-01-01')
+            dateRangeEnd.value = new Date(latestDate.value)
+            break;
+        case 4:
+            dateRangeStart.value = new Date('2021-01-01')
+            dateRangeEnd.value = new Date(latestDate.value)
+            break;
+        case 11:
+            dateRangeStart.value = new Date('2022-01-01')
+            dateRangeEnd.value = new Date(latestDate.value)
+            break;
+        case 0:
+            dateRangeStart.value = new Date(earliestDate)
+            dateRangeEnd.value = new Date(latestDate.value)
+            break;  
+        default:
+            dateRangeStart.value = new Date(startDate.value)
+            dateRangeEnd.value = new Date(endDate.value)
+            break;
+    }
     showDate.value=true
 }
 const startPicker=ref(null)
@@ -157,8 +171,8 @@ const endPicker=ref(null)
 
 // 确定选择时间
 const handleConfirmDate=()=>{
-    startPicker.value.confirm()
-    endPicker.value.confirm()
+    startPicker.value.getPicker().confirm()
+    endPicker.value.getPicker().confirm()
     
     let start='',end=''
     if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)
@@ -223,6 +237,8 @@ let dateTypeList=ref([
 	},
 ])
 let dateType=ref(null)
+let startYear=ref(null)
+
 const dateTypeClick=(item)=>{
     startDate.value=''
     endDate.value=''
@@ -262,6 +278,42 @@ const chartItemStyleArr = ref([
 let nodata=ref(false)
 let noauth=ref(false)
 let noAuthData=ref(null)
+
+const minDate=ref(null)
+const earliestDate=ref(null)
+const latestDate=ref(null)
+
+// 设置 起始日期 和 最新日期
+const setExtremumDate=(list)=>{
+    //过滤、排序 拿到起始日期
+    let startDateList = list.map(it => it.StartDate)
+                                    .filter(Boolean)
+                                    .sort((a,b)=> new Date(a).getTime() - new Date(b).getTime())
+    earliestDate.value = moment(startDateList[0]).format('YYYY-MM-DD')
+    //过滤、排序 拿到最新日期
+    let endDateList = list.map(it => it.LatestDate)
+                                    .filter(Boolean)
+                                    .sort((a,b)=> new Date(b).getTime() - new Date(a).getTime())
+    latestDate.value = moment(endDateList[0]).format('YYYY-MM-DD')
+    minDate.value = new Date(earliestDate.value)
+    // console.log(earliestDate.value,latestDate.value,'this.latestDate');
+    setTypeDate()
+}
+// dateType为6和20需要 设置时间
+const setTypeDate=()=>{
+    // 6代表 至今  20代表最近几年
+    if(dateType.value==6){
+        endDate.value=latestDate.value || ''
+    }else if(dateType.value==20){
+        let latestYear = parseInt(latestDate.value.substring(0,4))
+        startDate.value = `${latestYear-startYear.value+1}-01-01`
+        endDate.value=`${latestYear}-12-31`
+    }
+    // 设置选择器回显
+    dateRangeStart.value = new Date(startDate.value)
+    dateRangeEnd.value = new Date(endDate.value)
+}
+
 // 如果type：init 则是初始化获取数据 
 const getChartInfo=async (type)=>{
     // resData.value=null
@@ -282,10 +334,9 @@ const getChartInfo=async (type)=>{
         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:'',
+            // 季节性图也改成了 StartDate和EndDate
+            StartDate:startDate.value&&[...sameOptionType.value,2].includes(resData.value.ChartInfo.ChartType)?startDate.value:'',
+            EndDate:endDate.value&&[...sameOptionType.value,2].includes(resData.value.ChartInfo.ChartType)?endDate.value:'',
             Calendar:calendarType.value,
             Authorization:route.query.token,
             MyChartClassifyId:Number(route.query.MyChartClassifyId)
@@ -301,9 +352,12 @@ const getChartInfo=async (type)=>{
         if(![2,7,10].includes(res.data.ChartInfo.ChartType)){
             if(type=='init'){
                 dateType.value=res.data.ChartInfo.DateType
+                startYear.value=res.data.ChartInfo.StartYear
                 startDate.value=res.data.ChartInfo.StartDate||''
                 endDate.value=res.data.ChartInfo.EndDate||''
                 calendarType.value=res.data.ChartInfo.Calendar||'公历' 
+
+                setExtremumDate(resData.value.EdbInfoList||[])
             }
             const chartSetMap = {
                 1: setSplineOpt,
@@ -317,12 +371,13 @@ const getChartInfo=async (type)=>{
         }else if(res.data.ChartInfo.ChartType ===2 ) {
             if(type=='init'){
                 dateType.value=res.data.ChartInfo.DateType
+                startYear.value=res.data.ChartInfo.StartYear
                 startDate.value=res.data.ChartInfo.SeasonStartDate||''
                 endDate.value=res.data.ChartInfo.SeasonEndDate||''
                 calendarType.value=res.data.ChartInfo.Calendar||'公历'
+                setExtremumDate(resData.value.EdbInfoList||[])
             }
-            
-            setSeasonOpt(res.data.EdbInfoList[0])
+            setSeasonOpt(res.data.EdbInfoList[0])    
         }
         
         //奇怪柱形图依赖数据
@@ -1460,11 +1515,16 @@ const setSeasonOpt=(data)=>{
     const colorsArr=['#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA','#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF']
     let series=[],yAxis=[]
     //农历默认选中一年数据并隐藏按钮  公历显示全部数据
-    let rangeSelector={}
+    // let rangeSelector={}
 
     // 公历
-    if(calendarType.value==='公历'){
-        data.DataList.forEach((item,index)=>{
+    // if(calendarType.value==='公历'){
+    // ETA1.0.5 农历数据需要去除第一项 除此之外 农历和公历处理逻辑一样
+    const chartDataHandle = calendarType.value === '农历'?
+                            data.DataList.slice(1,data.DataList.length)||[]:
+                            data.DataList
+
+        chartDataHandle.forEach((item,index)=>{
              //预测指标配置
             let predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
 
@@ -1475,8 +1535,8 @@ const setSeasonOpt=(data)=>{
                 },
                 type:data.ChartStyle,
                 yAxis:index,
-                name:item.Year,
-                color:colorsArr.slice(-data.DataList.length)[index],                
+                name:item.ChartLegend,
+                color:colorsArr.slice(-chartDataHandle.length)[index],                
                 visible:true,
                 ...predict_params
             }
@@ -1524,110 +1584,110 @@ const setSeasonOpt=(data)=>{
             yAxis.push(yAxisItem)
         })
 
-        rangeSelector={ enabled: false}
-    }
+        // 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 predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
-
-            let seriesItem={
-                data:[],
-                dataGrouping:{
-                    enabled:false
-                },
-                type:data.ChartStyle,
-                yAxis:index,
-                name:item.Year,
-                color:colorsArr.slice(-filterArr.length)[index],         
-                visible:true,
-                ...predict_params
-            }
-            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: -(10 * data.Unit.length),
-                },
-                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: '全部',
-                }
-            ]
-        }
-    }
+    // 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 predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
+
+        //     let seriesItem={
+        //         data:[],
+        //         dataGrouping:{
+        //             enabled:false
+        //         },
+        //         type:data.ChartStyle,
+        //         yAxis:index,
+        //         name:item.Year,
+        //         color:colorsArr.slice(-filterArr.length)[index],         
+        //         visible:true,
+        //         ...predict_params
+        //     }
+        //     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: -(10 * data.Unit.length),
+        //         },
+        //         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
+    // chartData.value.rangeSelector=rangeSelector
     // 设置坐标轴极值
     hasLeftAxis.value=true
     axisLimitData.leftMin=Number(data.MinData)
@@ -2077,9 +2137,10 @@ const setChartParams = () => {
             params={
                 ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
                 ChartEdbInfoList: arr,
+                DateType: dateType.value,
                 Calendar: calendarType.value,
-                SeasonStartDate:startDate.value,
-                SeasonEndDate: endDate.value,
+                StartDate:startDate.value,
+                EndDate: endDate.value,
             }
             break;
         case 7: 
@@ -2327,7 +2388,7 @@ const myChartPageChange=(type)=>{
             <!-- 季节图 -->
             <ul class="list" v-else-if="resData.ChartInfo.ChartType===2">
                 <li>
-                    <p style="color:#333">{{moment(resData.EdbInfoList[0].LatestDate).format('YYYY-MM-DD')}}</p>
+                    <p style="color:#333">{{latestDate}}</p>
                     <p :style="{color:resData.EdbInfoList[0].ChartColor,flex:1}">{{resData.ChartInfo.ChartName}}</p>
                     <p style="color:#1F243A">{{resData.EdbInfoList[0].LatestValue}}</p>
                 </li>
@@ -2391,12 +2452,28 @@ const myChartPageChange=(type)=>{
             line-width="16px" border swipeable title-active-color="#E3B377"
             title-inactive-color="#333333">
                 <Tab title="开始时间" name="1">
-                    <Picker ref="startPicker" @confirm="e=> DateConfirm(e,'start')" 
-                        :columns="columnsStart" :show-toolbar="false"/>
+                    <!-- <Picker ref="startPicker" @confirm="e=> DateConfirm(e,'start')" 
+                        :columns="columnsStart" :show-toolbar="false"/> -->
+                    <DatetimePicker
+                        v-model="dateRangeStart"
+                        :min-date="minDate"
+                        type="date"
+                        :show-toolbar="false"
+                        ref="startPicker" 
+                        @confirm="e=> DateConfirm(e,'start')" 
+                    ></DatetimePicker>
                 </Tab>
                 <Tab title="结束时间" name="2">
-                    <Picker ref="endPicker" @confirm="e=> DateConfirm(e,'end')" 
-                        :columns="columnsEnd" :show-toolbar="false"/>
+                    <!-- <Picker ref="endPicker" @confirm="e=> DateConfirm(e,'end')" 
+                        :columns="columnsEnd" :show-toolbar="false"/> -->
+                    <DatetimePicker
+                        v-model="dateRangeEnd"
+                        type="date"
+                        :min-date="minDate"
+                        :show-toolbar="false"
+                        ref="endPicker" 
+                        @confirm="e=> DateConfirm(e,'end')" 
+                    ></DatetimePicker>
                 </Tab>
             </Tabs>
         </Popup>
@@ -2528,7 +2605,7 @@ const myChartPageChange=(type)=>{
                 margin-right: 18px;
             }
             .date{
-                width: 128px;
+                width: 150px;
                 height: 40px;
                 // background: #F6F6F6;
                 // border: 1px solid #E5E5E5;