暂存

src/views/dataEntry_manage/addChart.vue

@@ -102,6 +102,22 @@
 					</el-select>
 				</div>
 
+				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2">
+					<!-- 仅用于季节性图配置 -->
+					<div style="margin-bottom: 12px;">
+						横轴显示范围
+					</div>
+					<el-date-picker
+						style="width: 90%;"
+						v-model="xAxisRange"
+						type="daterange"
+						value-format="yyyy-MM-dd"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						@change="xAxisRangeChange"
+						></el-date-picker>
+				</div>
+
 				<div class="targetset-cont">
 					<!-- 仅用于散点图配置 -->
 					<div class="scatter-setting" v-if="chartInfo.ChartType === 5 && tableData.length">
@@ -295,7 +311,7 @@
 							}}</el-button>
 						</template>
 						<!-- 季节性图选择年份区间 -->
-						<date-picker
+						<!-- <date-picker
 							v-else-if="chartInfo.ChartType === 2"
 							v-model="season_year"
 							type="month"
@@ -303,7 +319,10 @@
 							range
 							placeholder="年份日期选择"
 							@change="seasonYearChange"
-						/>
+						/> -->
+						<div v-else-if="chartInfo.ChartType === 2" @click="openDateDia" class="date-setting">
+							{{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
+						</div>
 					</div>
 				</div>
 				<div class="cont-bottom">
@@ -477,6 +496,7 @@
     <DateChooseDia
       :isDateDia="isDateDia"
       :dateForm="dateForm"
+			:earliestDate="earliestDate"
       @cancel="isDateDia = false"
       @dateBack="dataChangeBack"
     />
@@ -534,6 +554,9 @@ export default {
 						this.setAddChartDefault();
 						this.setChartOptionHandle(newval);
 					}
+					
+					// 获取最早起始日期
+					this.setEarliestDate()
 
 				}else {
 					this.chartInfo.ChartName = '';
@@ -736,6 +759,10 @@ export default {
 				color: #606266;
 				margin-top: 20px;
 			}
+			.xaxis-range-cont{
+				color: #606266;
+				margin-top: 20px;
+			}
 			.targetset-cont {
 				padding: 30px 0 20px;
 				.el-input__inner {
@@ -826,6 +853,13 @@ export default {
 					.btn-sty {
 						border: 1px solid #409eff;
 					}
+					.date-setting{
+						border: 1px solid #DCDFE6;
+						border-radius: 4px;
+						cursor: pointer;
+						color: #333333;
+						line-height: 16px;
+					}
 				}
 				.top-right {
 					font-size: 16px;
@@ -960,6 +994,12 @@ export default {
 			.year-btn,.btn-sty {
 				font-size: $font-normal;
 			}
+			.date-setting{
+				width: 210px;
+				height: 40px;
+				padding: 12px;
+				font-size: $font-normal;
+			}
 		}
 
 		@media screen and (max-width: 1710px){
@@ -979,6 +1019,12 @@ export default {
 				padding: 6px;
 				border: 1px solid #409eff;
 			}
+			.date-setting{
+				width: 180px;
+				height: 36px;
+				padding: 10px;
+				font-size: $font-small;
+			}
 		}
 	}
 }

src/views/dataEntry_manage/chartSetting.vue

@@ -340,7 +340,7 @@
                 }}</el-button>
               </template>
               <!-- 季节性图选择年份区间 -->
-              <date-picker
+              <!-- <date-picker
                 v-else-if="chartInfo.ChartType === 2"
                 v-model="season_year"
                 type="month"
@@ -348,7 +348,10 @@
                 range
                 placeholder="年份日期选择"
                 @change="seasonYearChange"
-              />
+              /> -->
+              <div v-else-if="chartInfo.ChartType === 2" @click="openDateDia" class="date-setting">
+                {{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
+              </div>
             </div>
           </div>
           <div class="cont-bottom">
@@ -673,6 +676,7 @@
     <DateChooseDia
       :isDateDia="isDateDia"
       :dateForm="dateForm"
+      :earliestDate="earliestDate"
       @cancel="isDateDia = false"
       @dateBack="dataChangeBack"
     />
@@ -1531,9 +1535,11 @@ export default {
         
       if (res.Ret !== 200) return;
       this.chartInfo = res.Data.ChartInfo;
-      
-
+  
       this.tableData = res.Data.EdbInfoList;
+      // 设置最早的起始日期
+      this.setEarliestDate()
+
       this.setDefaultDateSelect(); //设置默认的日期选中
 
       sessionStorage.setItem('defaultArr',JSON.stringify(res.Data.EdbInfoList));
@@ -1980,21 +1986,26 @@ export default {
             ? this.select_date[0]
             : '',
         end_date: this.year_select === 5 ? this.select_date[1] : '',
+        count_year: this.year_select === 100 ? this.count_year : ''
       };
       this.isDateDia = true;
     },
     /* 保存完自定义日期 刷新数据  保存当前的图表配置和上下限 只改变图表*/
     dataChangeBack(data) {
+      // console.log(data,'timeData');
       this.year_select = data.dateType;
       this.isDateDia = false;
       this.select_date = [data.start_date, data.end_date];
-      if (data.dateType === 5) {
+      this.count_year = data.count_year
+      if(data.dateType==100){
+        this.dateTip = `最近${data.count_year}年`
+      }else if (data.dateType === 5) {
         this.dateTip = `${data.start_date}~${data.end_date}`;
       } else {
         this.dateTip = `${data.start_date}~至今`;
       }
-      this.saveNowOptions();
-      this.getPreviewChartInfo();
+      // this.saveNowOptions();
+      // this.getPreviewChartInfo();
     },
 
     /* 编辑图表 跳转 */
@@ -2596,7 +2607,6 @@ export default {
     padding-left: 50px;
     padding-right: 10px;
   }
-
   @media screen and (min-width: 1711px) {
     .el-icon-refresh {
       font-size: 17px;
@@ -2780,6 +2790,16 @@ export default {
                 padding: 10px;
                 border: 1px solid #409eff;
               }
+              .date-setting{
+                width: 210px;
+                height: 40px;
+                padding: 12px;
+                border: 1px solid #DCDFE6;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 14px;
+                color: #333333;
+              }
             }
             .top-right {
               font-size: 16px;

src/views/dataEntry_manage/components/DateChooseDia.vue

@@ -10,41 +10,43 @@
 		custom-class="dateDialog"
 		width="650px">
 			<div class="dialog-min">
-				<el-radio-group v-model="dateType" @change="changeType">
-					<el-radio :label="1" border>起始时间设置</el-radio>
+				<el-radio-group v-model="radioType" @change="changeType">
+					<el-radio :label="1" border>最近N年</el-radio>
 					<el-radio :label="2" border>区间设置</el-radio>
 				</el-radio-group>
 				<div class="date-cont">
-					<template v-if="dateType===2">
-						<date-picker
-							v-model="start_date"
-							type="month"
-							value-type="format"
-							placeholder="起始时间"
-						></date-picker>
-						<span style="margin:0 20px">至</span>
-						<date-picker
-							v-model="end_date"
-							type="month"
-							value-type="format"
-							placeholder="结束时间"
-						></date-picker>
+					<template v-if="radioType===1">
+						<span style="margin:0 20px;color: #000000;">年数</span>
+						<el-input v-model.number="count_year" placeholder="请输入数字"></el-input>
 					</template>
 					<template v-else>
-						<date-picker
+						<el-date-picker
+							v-show="dateType==1"
 							v-model="start_date"
-							type="month"
+							type="date"
+							value-type="format"
+							value-format="yyyy-MM-dd"
+							placeholder="选择日期"
+							:picker-options="pickerOptions"
+						></el-date-picker>
+						<el-date-picker
+							v-show="dateType==2"
+							v-model="dates"
+							type="daterange"
 							value-type="format"
-							placeholder="起始时间"
-						></date-picker>
-						<span style="margin:0 20px">至</span>
-						<el-button type="text" style="font-size: 16px">至今</el-button>
+							value-format="yyyy-MM-dd"
+							start-placeholder="开始日期"
+							end-placeholder="结束日期"
+							:picker-options="pickerOptions"
+						></el-date-picker>
+						<el-checkbox label="至今" :checked="dateType == 1" @change="changeDateType"
+						style="margin-left: 18px;"></el-checkbox>
 					</template>
 				</div>
 			</div>
 			<div class="dia-bot">
-				<el-button type="primary" style="margin-right:20px" @click="saveHandle">保存</el-button>
-				<el-button type="primary" plain @click="cancelHandle">取消</el-button>
+				<el-button plain @click="cancelHandle" style="width: 120px;">取消</el-button>
+				<el-button type="primary" style="width: 120px;margin-left:30px" @click="saveHandle">保存</el-button>
 			</div>
 		</el-dialog>
 </template>
@@ -58,49 +60,90 @@ export default {
 		},
 		dialogTitle: {
 			type: String,
-			default:'设置默认时间'
+			default:'时间长度设置'
 		},
 		dateForm: {
 			type:Object
+		},
+		// 最早的日期，开始时间不得早于这个
+		earliestDate:{
+			type: String,
+			default:'0000-00-00'
 		}
 	},
 	watch: {
 		isDateDia(val) {
 			if(val) {
+				this.radioType = this.dateForm.date_type === 5 || this.dateForm.date_type === 6 ? 2 : 1;
 				this.dateType = this.dateForm.date_type === 5 ? 2 : 1;
 				this.start_date = this.dateForm.start_date;
 				this.end_date = this.dateForm.end_date;
+				this.dates = this.radioType == 2&&this.dateType==2?[this.start_date,this.end_date]:[]
+				this.count_year = this.dateForm.count_year
+			}
+		},
+		dates(value){
+			if(!value){
+				this.start_date = ''
+				this.end_date = ''
+				return 
+			}
+
+			if(value && value.length>0){
+				this.start_date = value[0]
+				this.end_date = value[1]
 			}
 		}
 	},
 	data () {
 		return {
-			dateType:1,
+			radioType:1,
+			dateType:2,
 			start_date: '',
 			end_date: '',
+			count_year:'',// 年数
+			dates:[],
+			pickerOptions:{
+				disabledDate:(date)=>{
+					return date < (new Date(`${this.earliestDate} 00:00:00`) || 0)
+				},
+			}
 		};
 	},
 	methods: {
 		/* 确认时间 返回回调 */
 		saveHandle() {
-			if(!this.start_date || (!this.end_date && this.dateType === 2)) {
+			if(this.radioType == 1 && (!parseInt(this.count_year))) {
+				this.$message.warning('请输入正确的数字')
+				return 
+			}
+			console.log(this.radioType,this.dateType,this.start_date,this.end_date,this.dates,this.count_year);
+
+			if(this.radioType == 2 && (!this.start_date || (!this.end_date && this.dateType === 2))) {
 				this.$message.warning('请选择正确的时间段')
 			}else {
 				this.$emit('dateBack',{
-					dateType: this.dateType === 1 ? 6 : 5,
+					dateType: this.radioType==1?100:this.dateType === 1 ? 6 : 5,
 					start_date: this.start_date,
-					end_date: this.dateType === 1 ? '' : this.end_date
+					end_date: this.dateType === 1 ? '' : this.end_date,
+					count_year:this.count_year
 				})
 			}
 		},
 		changeType() {
-			this.start_date = '';
-			this.end_date = '';
+			this.dateType=1
+			this.dates=null
+			this.count_year = ''
+		},
+		changeDateType(check){
+			this.dateType=check?1:2
+			this.dates=null
 		},
 		cancelHandle() {
+			this.radioType = 1
 			this.dateType = 1;
-			this.start_date = '';
-			this.end_date = '';
+			this.dates=null
+			this.count_year = ''
 			this.$emit('cancel')
 		}
 	},
@@ -124,13 +167,13 @@ export default {
 		width: 220px !important;
 	}
 	.dialog-min {
-		padding: 10px 20px;
+		padding: 0 35px 60px;
 		.date-cont {
-			margin-top: 30px;
+			margin-top: 50px;
 		}
 	}
 	.dia-bot {
-		margin: 52px 0 30px;
+		margin: 60px 0 30px;
 		display: flex;
 		justify-content: center;
 	}

src/views/dataEntry_manage/css/chartfit.scss

@@ -175,6 +175,16 @@ $font-normal:14px;
 							padding: 6px;
 							border: 1px solid #409eff;
 						}
+						.date-setting{
+							width: 180px;
+							height: 36px;
+							padding: 10px;
+							border: 1px solid #DCDFE6;
+							border-radius: 4px;
+							cursor: pointer;
+							font-size: 12px;
+							color: #333333;
+						}
 					}
 					.top-right {
 						.join_txt {

src/views/dataEntry_manage/editChart.vue

@@ -110,6 +110,24 @@
 						</el-option>
 					</el-select>
 				</div>
+
+				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2">
+					<!-- 仅用于季节性图配置 -->
+					<div style="margin-bottom: 12px;">
+						横轴显示范围
+					</div>
+					<el-date-picker
+						style="width: 90%;"
+						v-model="xAxisRange"
+						type="daterange"
+						:clearable="false"
+						value-format="yyyy-MM-dd"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						@change="xAxisRangeChange"
+						></el-date-picker>
+				</div>
+
 				<div class="targetset-cont">
 						<!-- 仅用于散点图配置提出 -->
 					<div class="scatter-setting" v-if="chartInfo.ChartType === 5 && tableData.length">
@@ -293,7 +311,7 @@
 							}}</el-button>
 						</template>
 						<!-- 季节性图选择年份区间 -->
-						<date-picker
+						<!-- <date-picker
 							v-else-if="chartInfo.ChartType === 2"
 							v-model="season_year"
 							type="month"
@@ -301,7 +319,11 @@
 							range
 							placeholder="年份日期选择"
 							@change="seasonYearChange"
-						/>
+						/> -->
+						<div v-else-if="chartInfo.ChartType === 2" style="padding: 10px 20px;border: 1px solid #eee;border-radius: 8px;cursor: pointer;"
+						@click="openDateDia">
+							{{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
+						</div>
 					</div>
 				</div>
 				<div class="cont-bottom">
@@ -479,6 +501,7 @@
     <DateChooseDia
       :isDateDia="isDateDia"
       :dateForm="dateForm"
+			:earliestDate="earliestDate"
       @cancel="isDateDia = false"
       @dateBack="dataChangeBack"
     />
@@ -540,6 +563,8 @@ export default {
 						this.setAddChartDefault();
 						newval.length && !this.chartInfo.WarnMsg && this.setChartOptionHandle(newval);
 					}
+					// 获取最早起始日期
+					this.setEarliestDate()
 				}
       },
       deep: true,
@@ -767,6 +792,10 @@ export default {
 				color: #606266;
 				margin-top: 10px;
 			}
+			.xaxis-range-cont{
+				color: #606266;
+				margin-top: 20px;
+			}
 			.targetset-cont {
 				padding: 30px 0 20px;
 				.el-input__inner {
@@ -856,6 +885,13 @@ export default {
 					.btn-sty {
 						border: 1px solid #409eff;
 					}
+					.date-setting{
+						border: 1px solid #DCDFE6;
+						border-radius: 4px;
+						cursor: pointer;
+						color: #333333;
+						line-height: 16px;
+					}
 				}
 				.top-right {
 					font-size: 16px;
@@ -990,6 +1026,12 @@ export default {
 			.year-btn,.btn-sty {
 				font-size: $font-normal;
 			}
+			.date-setting{
+				width: 210px;
+				height: 40px;
+				padding: 12px;
+				font-size: $font-normal;
+			}
 		}
 
 		@media screen and (max-width: 1710px){
@@ -1009,6 +1051,12 @@ export default {
 				padding: 6px;
 				border: 1px solid #409eff;
 			}
+			.date-setting{
+				width: 180px;
+				height: 36px;
+				padding: 10px;
+				font-size: $font-small;
+			}
 		}
 	}
 }

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -52,6 +52,8 @@ export default {
 			search_have_more: true,
 			search_page: 1,
 			current_search:'',
+			// 横坐标显示范围 - 季节性图
+			xAxisRange:[]
 		}
 	},
 	computed: {
@@ -281,6 +283,7 @@ export default {
 						? this.select_date[0]
 						: '',
 				end_date: this.year_select === 5 ? this.select_date[1] : '',
+				count_year: this.year_select === 100 ? this.count_year : ''
 			};
 			this.isDateDia = true;
 		},
@@ -289,12 +292,16 @@ export default {
 			this.year_select = data.dateType;
 			this.isDateDia = false;
 			this.select_date = [data.start_date, data.end_date];
-			if (data.dateType === 5) {
+      this.count_year = data.count_year
+
+			if(data.dateType==100){
+        this.dateTip = `最近${data.count_year}年`
+      }else if (data.dateType === 5) {
 				this.dateTip = `${data.start_date}~${data.end_date}`;
 			} else {
 				this.dateTip = `${data.start_date}~至今`;
 			}
-			this.getPreviewSplineInfo();
+			// this.getPreviewSplineInfo();
 		},
 
 			/* 季节图切换年份  保持当前配置 */
@@ -542,6 +549,16 @@ export default {
 			if(!this.options.series) return
 
 			this.options.yAxis[0].title.text = val;
+		},
+		// 横轴显示范围改变
+		xAxisRangeChange(date){
+			console.log(date);
+			console.log(this.tableData);
+			if(date && date.length>0){
+				let xStartDate = date[0]
+				let xEndDate = date[1]
+
+			}
 		}
 	}
 }

src/views/dataEntry_manage/mixins/chartPublic.js

@@ -40,11 +40,13 @@ const basicYAxis = {
 export const chartSetMixin = {
 	data() {
 		return {
-			year_select: yearSelector[0].value, //默认区间15年至今
+			year_select: yearSelector[0].value, //默认区间15年至今 值等于 5、6、100 是自定义时间段
       sameOptionType:[1,3,4,5,6],// 头部一样 配置一样的图表类型 曲线 散点 柱状 面积 组合
       yearSelector, //年份按钮组
       select_date: '', //自定义时间段
+      count_year: '', //最近年数
       isDateDia: false, // 时间段弹窗
+      earliestDate:'', // 最早的日期
       dateForm: {},
       dateTip: '请选择时间段',
       predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝，红 默认颜色
@@ -741,7 +743,6 @@ export const chartSetMixin = {
       const chartData = newval[0];
       let seasonYdata = [],
         seasonData = [];
-
         /* 公历数据处理 处理数据列 y轴 */
         if (this.calendar_type === '公历')
         for (let j of chartData.DataList) {
@@ -2040,6 +2041,14 @@ export const chartSetMixin = {
       }else {
         sourceMap[this.chartInfo.Source]();
       }
+    },
+    // 设置最早的起始日期
+    setEarliestDate(){
+      //过滤、排序 拿到最早的日期
+      let startDateList = this.tableData.map(it => it.StartDate)
+                                        .filter(Boolean)
+                                        .sort((a,b)=> new Date(a).getTime() - new Date(b).getTime())
+      this.earliestDate = startDateList[0]
     }
 	}
 }