comit

src/views/myETA/ChartDetail.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router'
 import {chartRender} from '@/hooks/chart/render'
 import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
 import EDBInfo from './components/EDBInfo.vue'
+import moment from 'moment'
 
 const route=useRoute()
 const chartCode=route.query.code
@@ -42,30 +43,83 @@ async function reloadChartInfo(){
     const params=sameOptionType.includes(chartInfo.value.ChartType)?{
         ChartInfoId: chartInfo.value.ChartInfoId,
         DateType: chartState.yearVal,
-        StartDate:'' ,//[5, 6].includes(this.year_select)?this.select_date[0]: ''
-        EndDate: '',//this.year_select === 5 ? this.select_date[1] : ''
+        StartDate: chartState.startTime,
+        EndDate: chartState.endTime,
     }:{
         ChartInfoId: chartInfo.value.ChartInfoId,
-        Calendar: '',//this.calendar_type
-        SeasonStartDate: '',//this.season_year ? this.season_year[0] : ''
-        SeasonEndDate:'' ,//this.season_year ? this.season_year[1] : ''
+        Calendar: chartState.calendarType,//this.calendar_type
+        SeasonStartDate: chartState.startTime,
+        SeasonEndDate:chartState.endTime ,
     }
     const res=await apiChartInfoById(params)
     if(res.Ret!==200) return
+    chartInfo.value=res.Data.ChartInfo
+
+    const beforeOptions = sessionStorage.getItem('myChartbeforeOptions')
+          ? JSON.parse(sessionStorage.getItem('myChartbeforeOptions'))
+          : '';
+    //合并缓存配置和新的数据
+    const newarr = res.Data.EdbInfoList.map((item, index) => {
+        if (beforeOptions) {
+            const DataList = item.DataList;
+            return {
+              ...beforeOptions[index],
+              DataList,
+            };
+        } else {
+            return item;
+        }
+    })
+    chartRender({
+        data:{
+            ...res.Data,
+            ChartInfo:{
+                ...res.Data.ChartInfo,
+                Calendar:chartState.calendarType||'公历'
+            },
+            EdbInfoList:newarr
+        },
+        renderId:'chart-box',
+        lang:'zh',
+        changeLangIsCheck:false,
+        showChartTitle:false
+    })
 }
 
 const minDate=new Date(1970, 0, 1)
 const maxDate=new Date(2050, 11, 31)
+const cYear=moment().format('YYYY')
+const cMonth=moment().format('MM')
+let temStartTime=ref([cYear,cMonth])
+let temEndTime=ref([cYear,cMonth])
 let chartState=reactive({
     showTimePop:false,
-    startTime:['2022', '06', '01'],
-    endTime:['2023', '06', '01'],
-    yearVal:''
+    startTime:'',
+    endTime:'',
+    yearVal:'',
+    calendarType:'公历'
 })
 
 // 切换年份选项
 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=6
+    reloadChartInfo()
+    chartState.showTimePop=false
+}
+
+// 季节图公历\农历切换
+function handleSeasonTypeChange(type){
+    chartState.calendarType=type
     reloadChartInfo()
 }
 
@@ -79,6 +133,7 @@ let showEDBData=ref({})
 function handleUpdateRender(val){
 
 }
+
 </script>
 
 <template>
@@ -99,18 +154,24 @@ function handleUpdateRender(val){
 
         <!-- 一般曲线图选择时间区间 -->
         <div class="select-year-box" v-if="sameOptionType.includes(chartInfo.ChartType)">
+            <span :class="['item',chartState.yearVal==''?'active':'']" @click="handleYearChange({value:''})">全部</span>
             <span 
                 :class="['item',chartState.yearVal==item.value?'active':'']"
                 v-for="item in yearSelectOpt" 
                 :key="item.value"
                 @click="handleYearChange(item)"
             >{{item.name}}</span>
-            <span class="item">全部</span>
         </div>
         <!-- 季节图切换公/农历 -->
         <div class="calendar-type-box" v-if="chartInfo.ChartType === 2">
-            <span>公历</span>
-            <span>农历</span>
+            <span 
+                :class="chartState.calendarType=='公历'?'active':''"
+                @click="handleSeasonTypeChange('公历')"
+            >公历</span>
+            <span 
+                :class="chartState.calendarType=='农历'?'active':''"
+                @click="handleSeasonTypeChange('农历')"
+            >农历</span>
         </div>
 
         <!-- 指标模块 -->
@@ -130,15 +191,16 @@ function handleUpdateRender(val){
                 title="选择起始时间"
                 :tabs="['开始时间', '结束时间']"
                 @cancel="chartState.showTimePop=false"
+                @confirm="handleTimeChange"
             >
                 <van-date-picker
-                    v-model="chartState.startTime"
+                    v-model="temStartTime"
                     :min-date="minDate"
                     :max-date="maxDate"
                     :columns-type="chartInfo.ChartType==2?['year']:['year','month']"
                 />
                 <van-date-picker 
-                    v-model="chartState.endTime" 
+                    v-model="temEndTime" 
                     :min-date="minDate" 
                     :max-date="maxDate"
                     :columns-type="chartInfo.ChartType==2?['year']:['year','month']"
@@ -172,14 +234,67 @@ function handleUpdateRender(val){
         height: 700px;
     }
     .select-year-box{
-        margin: 20px 0;
+        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{
+            flex-shrink: 0;
+            display: inline-block;
+            margin-right: 40px;
+            font-size: 32px;
+            color: $font-grey_999;
+            &.active{
+                color: #333;
+            }
+        }
+    }
+    .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;
-            margin-right: 20px;
+            width: 200px;
+            height: 80px;
+            line-height: 80px;
+            color: $theme-color;
+            font-weight: bold;
             &.active{
-                color: $theme-color;
+                background-color: $theme-color;
+                color: #fff;
             }
         }
     }
+
+    .edb-list-box{
+        .list-lable{
+            font-size: 36px;
+            color: #000;
+            margin-bottom: 20px;
+            margin-top: 40px;
+        }
+        :deep(.van-cell){
+            padding-left: 0;
+            padding-right: 0;
+            font-size: 32px;
+        }
+        :deep(.van-cell:after){
+            right: 0;
+            left: 0;
+        }
+    }
 }
 </style>