ETA1.0.5 指标图表逻辑修改

src/views/dataEntry_manage/databaseComponents/chartTrendRender.vue

@@ -21,7 +21,7 @@
 				</el-button>
 			</template>
 			<!-- 季节图时间选择 -->
-			<template v-else-if="chart_type===2">
+			<!-- <template v-else-if="chart_type===2">
 				<date-picker
 						v-model="season_year"
 						type="month"
@@ -30,7 +30,10 @@
 						placeholder="年份日期选择"
 						@change="getDataByPath"
 				/>
-			</template>
+			</template> -->
+			<div v-else-if="chart_type === 2" @click="openDateDia" class="date-setting">
+				{{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
+			</div>
 			<el-button type="primary" plain size="mini" class="btn-sty" style="margin-left:auto;"
 				@click="chartTypeChange" v-if="!isOnlyShowBaseChart">
 				<i class="el-icon-sort" style="transform: rotate(90deg);"></i>
@@ -179,6 +182,8 @@ export default {
 				MinValue: 0,
 				MaxValue: 0
 			},
+			// 最近几年
+			count_year:'',
 		};
 	},
 	methods: {
@@ -197,6 +202,7 @@ export default {
 			let params = {
 				EdbInfoId: this.edbid,
 				DateType: this.year_select,
+				StartYear:this.count_year || 0,
 				StartDate: this.select_date[0] || '',
 				EndDate: this.select_date[1] || ''
 			}
@@ -205,7 +211,9 @@ export default {
 				? await dataBaseInterface.ebd_data(params)
 				: await dataBaseInterface.ebdSeasonData({
 						EdbInfoId: this.edbid,
+						DateType: this.year_select,
 						Calendar: this.calendar_type,
+						StartYear:this.count_year || 0,
 						StartDate: this.season_year[0] || '',
 						EndDate: this.season_year[1] || '',
 					})
@@ -219,6 +227,12 @@ export default {
 					} : EdbInfo;
 					this.tableData = DataList || [];
 
+
+					if(this.chart_type==2){
+						let latestYear = parseInt(this.chartInfo.LatestDate.substring(0,4))
+						this.season_year = [`${latestYear-this.count_year+1}-01-01`,`${latestYear}-12-31`];
+					}
+
 					this.chart_type === 1 ? this.setOptions() : this.setSeasonOptions();
 					this.showChart = true;
 					this.$nextTick(()=>{
@@ -250,6 +264,7 @@ export default {
 			let params = {
 				VarietyEdbId: this.edbid,
 				DateType: this.year_select,
+				StartYear:this.count_year || 0,
 				StartDate: this.select_date[0] || '',
 				EndDate: this.select_date[1] || ''
 			}
@@ -258,7 +273,9 @@ export default {
 				? await supplyApi.getEdbDetailData(params)
 				: await supplyApi.getEdbSeasonData({
 						VarietyEdbId: this.edbid,
+						DateType: this.year_select,
 						Calendar: this.calendar_type,
+						StartYear:this.count_year || 0,
 						StartDate: this.season_year[0] || '',
 						EndDate: this.season_year[1] || '',
 					})
@@ -271,7 +288,10 @@ export default {
 						...this.oldOptions
 					} : EdbInfo;
 					this.tableData = DataList || [];
-
+					if(this.chart_type==2){
+						let latestYear = parseInt(this.chartInfo.LatestDate.substring(0,4))
+						this.season_year = [`${latestYear-this.count_year+1}-01-01`,`${latestYear}-12-31`];
+					}
 					this.chart_type === 1 ? this.setOptions() : this.setSeasonOptions();
 					this.showChart = true;
 		},
@@ -293,13 +313,17 @@ export default {
 		/* 打开时间段弹窗 */
     openDateDia() {
       // 自定义时间段回显
+
+			let selectDateStart = this.chart_type === 2?this.season_year[0]:this.select_date[0]
+			let selectDateEnd = this.chart_type === 2?this.season_year[1]:this.select_date[1]
       this.dateForm = {
         date_type: this.year_select,
         start_date:
           this.year_select === 5 || this.year_select === 6
-            ? this.select_date[0]
+            ? selectDateStart
             : '',
-        end_date: this.year_select === 5 ? this.select_date[1] : '',
+        end_date: this.year_select === 5 ? selectDateEnd : '',
+        count_year: this.year_select === 20 ? this.count_year : ''
       };
       this.isDateDia = true;
     },
@@ -309,12 +333,26 @@ export default {
       this.year_select = data.dateType;
       this.isDateDia = false;
       this.select_date = [data.start_date, data.end_date];
+      this.count_year = data.count_year
 
       this.dateTip =
         data.dateType === 5
           ? `${data.start_date}~${data.end_date}`
-          : `${data.start_date}~至今`;
-
+          : data.dateType === 6
+					?`${data.start_date}~至今`
+					:`最近${this.count_year}年`
+			if(this.chart_type === 2){
+				let latestYear = parseInt(this.chartInfo.LatestDate.substring(0,4))
+				let dateStart = data.start_date
+				let dateEnd = data.end_date
+				if(data.dateType==20){
+					dateStart = `${latestYear-this.count_year+1}-01-01`
+					dateEnd = `${latestYear}-12-31`
+				}else if(data.dateType==6){
+					dateEnd = this.chartInfo.LatestDate
+				}
+				this.season_year = [dateStart, dateEnd];
+			}
 			const { MinValue,MaxValue } = this.chartInfo;
 			this.oldOptions = {
 				MinValue,
@@ -499,12 +537,17 @@ export default {
 		setSeasonOptions() {
 			console.log(this.tableData)
       const chartData = _.cloneDeep(this.tableData);
+
+			// 农历数据需要去除第一项 在ETA1.0.5之后，除了这里 农历和公历处理逻辑一样
+			const chartDataHandle=this.calendar_type === '农历'?
+												chartData.List.filter((item, index) => index > 0):
+												chartData
       let seasonYdata = [],
         seasonData = [];
 
         /* 公历数据处理 处理数据列 y轴 */
-        if (this.calendar_type === '公历')
-        for (let j of chartData) {
+        // if (this.calendar_type === '公历')
+        for (let j of chartDataHandle) {
           
           let serie_item = {
             data: [],
@@ -517,7 +560,7 @@ export default {
             data_array.forEach((item) => {
               serie_item.data.push([item.DataTimestamp, item.Value]);
             });
-          const index = chartData.findIndex(
+          const index = chartDataHandle.findIndex(
             (item) => item.Year === j.Year
           );
           const s_yItem = {
@@ -545,48 +588,48 @@ export default {
         }
 
       /* 农历数据处理  */
-      let filterArr =
-        this.calendar_type === '农历'
-          ? chartData.List.filter((item, index) => index > 0)
-          : [];
-      if (this.calendar_type === '农历')
-        for (let j of filterArr) {
-
-          let serie_item = {
-            data: [],
-            type: 'spline',
-            yAxis: 0,
-            name: j.Year
-          };
-          const data_array = _.cloneDeep(j.Items);
-          data_array &&
-            data_array.forEach((item) => {
-              serie_item.data.push([item.DataTimestamp, item.Value]);
-            });
-          const index = filterArr.findIndex((item) => item.Year === j.Year);
-          const s_yItem = {
-            labels: {
-              formatter: function () {
-                let val = this.value;
-                return index !== 0 ? '' : val;
-              },
-              align: 'center',
-            },
-            title: {
-              text:  this.chartLang=='ch'?this.chartInfo.Unit:
-							!this.chartInfo.UnitEn && this.chartInfo.Unit && this.chartInfo.Unit!='无' ? '英文单位':this.chartInfo.UnitEn,
-              align: 'high',
-              rotation: 0,
-              y: -15,
-              offset: -(12 * this.chartInfo.Unit.length),
-            },
-            max: Number(this.chartInfo.MaxValue),
-            min: Number(this.chartInfo.MinValue),
-            ...seasonOptions.yAxis,
-          };
-          seasonData.push(serie_item);
-          seasonYdata.push(s_yItem);
-        }
+      // let filterArr =
+      //   this.calendar_type === '农历'
+      //     ? chartData.List.filter((item, index) => index > 0)
+      //     : [];
+      // if (this.calendar_type === '农历')
+      //   for (let j of filterArr) {
+
+      //     let serie_item = {
+      //       data: [],
+      //       type: 'spline',
+      //       yAxis: 0,
+      //       name: j.Year
+      //     };
+      //     const data_array = _.cloneDeep(j.Items);
+      //     data_array &&
+      //       data_array.forEach((item) => {
+      //         serie_item.data.push([item.DataTimestamp, item.Value]);
+      //       });
+      //     const index = filterArr.findIndex((item) => item.Year === j.Year);
+      //     const s_yItem = {
+      //       labels: {
+      //         formatter: function () {
+      //           let val = this.value;
+      //           return index !== 0 ? '' : val;
+      //         },
+      //         align: 'center',
+      //       },
+      //       title: {
+      //         text:  this.chartLang=='ch'?this.chartInfo.Unit:
+			// 				!this.chartInfo.UnitEn && this.chartInfo.Unit && this.chartInfo.Unit!='无' ? '英文单位':this.chartInfo.UnitEn,
+      //         align: 'high',
+      //         rotation: 0,
+      //         y: -15,
+      //         offset: -(12 * this.chartInfo.Unit.length),
+      //       },
+      //       max: Number(this.chartInfo.MaxValue),
+      //       min: Number(this.chartInfo.MinValue),
+      //       ...seasonOptions.yAxis,
+      //     };
+      //     seasonData.push(serie_item);
+      //     seasonYdata.push(s_yItem);
+      //   }
 
       /* x轴显示月日  提示框显示月日*/
       defaultOpts.xAxis.labels = {
@@ -606,52 +649,49 @@ export default {
         },
         xDateFormat: '%m/%d',
       }
-      let rangeSelector =
-        this.calendar_type === '农历'
-          ? {
-              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: '全部',
-                  type: 'all',
-                },
-              ],
-            }
-          : {
-              enabled: false,
-            };
+      // let rangeSelector =
+      //   this.calendar_type === '农历'
+      //     ? {
+      //         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: '全部',
+      //             type: 'all',
+      //           },
+      //         ],
+      //       }
+      //     : {
+      //         enabled: false,
+      //       };
 
       this.options = {
-        colors:
-          this.calendar_type === '公历'
-            ? seasonOptions.colors.slice(-chartData.length)
-            : seasonOptions.colors.slice(-filterArr.length),
+				colors:seasonOptions.colors.slice(-chartDataHandle.length),
         series: seasonData,
         yAxis: seasonYdata,
-        rangeSelector,
+        // rangeSelector,
         tooltip
       };
 			console.log(this.options)
@@ -682,7 +722,9 @@ export default {
 		init(type='') {
 			if(type!=='no_reset') this.chart_type = 1;
 			this.isShowOnyearData = false;
-			this.year_select = 10;
+			this.year_select = this.chart_type==1 ? 10 : 20;
+			// 季节性图默认展示最近5年数据
+			this.count_year=5
 			this.select_date = [];
 			this.options = {};
 			this.dateTip = '请选择时间段';
@@ -733,6 +775,17 @@ export default {
 			background-color: #fff;
 			color: #0052D9;
 		}
+		.date-setting{
+			width: 210px;
+			// height: 40px;
+			padding: 10px;
+			border: 1px solid #DCDFE6;
+			border-radius: 4px;
+			cursor: pointer;
+			font-size: 14px;
+			color: #333333;
+			box-sizing: border-box;
+		}
 		.change-chart-btn{
 				float: right;
 				color: #409eff;

src/views/dataEntry_manage/editChart.vue

@@ -629,10 +629,10 @@ export default {
           this.tableData = EdbInfoList;
 
 					this.calendar_type = this.chartInfo.Calendar; //日历类型
+					this.setDefaultPreviewOption() // 设置配置项
 
 					this.$nextTick(()=>{
 						this.setDefaultDateSelect(); //设置默认的日期选中
-						this.setDefaultPreviewOption() // 设置配置项
 					})
 
 
@@ -680,11 +680,11 @@ export default {
     setDefaultPreviewOption(){
       if(this.chartInfo.ChartType==2){
 				this.count_year = this.chartInfo.StartYear
-				if(!(this.chartInfo.SeasonEndDate && this.chartInfo.SeasonStartDate)){
-					// 获取最近日期的年
-					let latestYear = parseInt(this.latestDate.substring(0,4))
-					this.season_year=[`${latestYear-this.count_year+1}-01-01`,`${latestYear}-12-31`]
-				}
+				// if(!(this.chartInfo.SeasonEndDate && this.chartInfo.SeasonStartDate)){
+				// 	// 获取最近日期的年
+				// 	let latestYear = parseInt(this.latestDate.substring(0,4))
+				// 	this.season_year=[`${latestYear-this.count_year+1}-01-01`,`${latestYear}-12-31`]
+				// }
         if(this.chartInfo.SeasonExtraConfig){
           this.SeasonExtraConfig = JSON.parse(this.chartInfo.SeasonExtraConfig)
 					// console.log(this.SeasonExtraConfig);
@@ -694,6 +694,15 @@ export default {
 					!!(new Date(`2023-${this.SeasonExtraConfig.XStartDate}`) > new Date(`2023-${this.SeasonExtraConfig.XEndDate}`) || 
 					new Date(`2023-${this.SeasonExtraConfig.XStartDate}`) == new Date(`2023-${this.SeasonExtraConfig.XEndDate}`))
         }
+				// 图例名称 需要在DataList中取，SeasonExtraConfig里面的可能是旧的
+				this.SeasonExtraConfig.ChartLegend=[]
+				const chartDataHandle = this.calendar_type === "农历"?
+														this.tableData[0].DataList.filter((item, index) => index > 0):
+														this.tableData[0].DataList
+
+				chartDataHandle.map(item =>{
+					this.SeasonExtraConfig.ChartLegend.push({Name:item.Years,Value:item.ChartLegend})
+				})
       }
     },
 		 /* 保存 */