ETA1.0.5 暂存-1

src/views/dataEntry_manage/addChart.vue

@@ -102,10 +102,10 @@
 					</el-select>
 				</div>
 
-				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2">
+				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2 && tableData && tableData.length>0">
 					<!-- 仅用于季节性图配置 -->
 					<div style="margin-bottom: 12px;">
-						横轴显示范围
+						横坐标显示范围
 					</div>
 					<el-date-picker
 						style="width: 90%;"
@@ -116,6 +116,10 @@
 						end-placeholder="结束日期"
 						@change="xAxisRangeChange"
 						></el-date-picker>
+					<div class="legend-set-text" @click="openLegendEditDia">
+						<span>图例名称设置</span>
+						<img src="~@/assets/img/icons/edit-blue.png" />
+					</div>
 				</div>
 
 				<div class="targetset-cont">
@@ -499,6 +503,13 @@
 			:earliestDate="earliestDate"
       @cancel="isDateDia = false"
       @dateBack="dataChangeBack"
+    />
+
+		<!-- 季节性 图例设置 -->
+		<LegendEditDia
+      :isEditLegend="legendEditDiaShow"
+			:legendList="legendList"
+      @cancel="legendEditDiaShow = false"
     />
   </div>
 </template>
@@ -511,8 +522,9 @@ import Chart from './components/chart';
 import DateChooseDia from './components/DateChooseDia';
 import barOption from './components/barOptionSection.vue';
 import sectionalScatterOption from './components/sectionalScatterOption.vue';
+import LegendEditDia from './components/LegendEditDia.vue';
 export default {
-  components: { Chart,DateChooseDia,barOption,sectionalScatterOption },
+  components: { Chart,DateChooseDia,barOption,sectionalScatterOption,LegendEditDia},
 	directives: {
     drag(el, bindings) {
       el.onmousedown = function (e) {
@@ -555,8 +567,8 @@ export default {
 						this.setChartOptionHandle(newval);
 					}
 					
-					// 获取最早起始日期
-					this.setEarliestDate()
+					// 设置起始日期和最新日期
+					this.setExtremumDate()
 
 				}else {
 					this.chartInfo.ChartName = '';
@@ -592,7 +604,23 @@ export default {
 			this.$refs.diaForm.validate((valid) => {
 				if(valid) {
 					// 季节图只允许添加一个指标
-					if(this.chartInfo.ChartType === 2 && this.tableData.length > 1)  return this.$message.warning('您选择的图表样式为季节性图表，只支持单指标画图');
+					if(this.chartInfo.ChartType === 2) {
+						if(this.tableData.length > 1){
+							return this.$message.warning('您选择的图表样式为季节性图表，只支持单指标画图');
+						}
+						if(!(parseInt(this.xAxisRange[1].substring(0,4)) - parseInt(this.xAxisRange[0].substring(0,4))<2)){
+							this.$message.error("横坐标显示范围不得超过2年")
+							return
+						}
+						if(new Date(`${this.xAxisRange[1]}`) < new Date(this.latestDate)){
+							this.$message.warning("结束日期不得早于时间区间内指标的最新日期，请修改时间区间")
+							return 
+						}
+						if(new Date(`${this.xAxisRange[1]}`) > new Date(`${parseInt(this.latestDate.substring(0,4))+1}${this.latestDate.substring(4)}`)){
+							this.$message.warning("结束日期不得晚于时间区间内指标的最新日期往后推一年的日期，请修改时间区间")
+							return 
+						}
+					}
 
 					if(this.chartInfo.ChartType === 7 && !this.$refs.BarOptRef.dateList.length)  return this.$message.warning('请添加日期');
 
@@ -635,11 +663,11 @@ export default {
 								EndDate: this.year_select === 5 ? this.select_date[1] : '',
 							} 
 						: typePrams
-
-					dataBaseInterface.chartAdd(params).then(res => {
-						if(res.Ret !== 200) return;
-							this.setChartImage(res.Data);
-					})
+					console.log(params);
+					// dataBaseInterface.chartAdd(params).then(res => {
+					// 	if(res.Ret !== 200) return;
+					// 		this.setChartImage(res.Data);
+					// })
 				}
 			})
 		},
@@ -762,6 +790,19 @@ export default {
 			.xaxis-range-cont{
 				color: #606266;
 				margin-top: 20px;
+				.legend-set-text{
+					font-size: 15px;
+					color: #1B7BDE;
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					margin-top: 10px;
+					cursor: pointer;
+					img{
+						height: 16px;
+						margin-left: 5px;
+					}
+				}
 			}
 			.targetset-cont {
 				padding: 30px 0 20px;

src/views/dataEntry_manage/chartSetting.vue

@@ -1537,8 +1537,8 @@ export default {
       this.chartInfo = res.Data.ChartInfo;
   
       this.tableData = res.Data.EdbInfoList;
-      // 设置最早的起始日期
-      this.setEarliestDate()
+      // 设置起始日期和最新日期
+      this.setExtremumDate()
 
       this.setDefaultDateSelect(); //设置默认的日期选中
 
@@ -1997,13 +1997,19 @@ export default {
       this.isDateDia = false;
       this.select_date = [data.start_date, data.end_date];
       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}~至今`;
+      if(chartInfo.ChartType === 2){
+        // 季节性图
+        this.season_year[0]
+      }else{
+        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();
     },

src/views/dataEntry_manage/components/LegendEditDia.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog
+  :modal-append-to-body='false'
+  title="图例名称设置" 
+  :visible.sync="isEditLegend"
+  :close-on-click-modal="false"
+  @close="cancelHandle"
+  center
+  v-dialogDrag 
+  width="600px">
+    <div class="dialog-legend">
+      <div v-for="(item,index) in legendList" key="index" class="legend-item">
+        <div class="legend-item-color" :style="{backgroundColor:seasonColor[index]}"></div>
+        <el-input v-model="item.legendName" placeholder="请输入图例名称" style="width: 295px;"></el-input>
+      </div>
+      <div class="legend-box-hint">默认取该曲线第一个数据年份作为图例名称，手动编辑为其他格式，则不再自动更新</div>
+    </div>
+    <div class="dia-bot">
+      <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>
+
+<script>
+import {seasonOptions} from "@/utils/defaultOptions.js" 
+
+export default {
+name:'',
+props: {
+  isEditLegend: {
+    type: Boolean,
+    required:true
+  },
+  legendList:{
+    type: Array,
+    required:true
+  }
+},
+computed:{
+  legendListCopy(){
+
+  },
+  seasonColor(){
+    return seasonOptions.colors.slice(-this.legendList.length)
+  }
+},
+watch: {
+  isEditLegend(val) {
+    if(val) {
+      console.log(seasonOptions);
+    }
+  }
+},
+data () {
+  return {
+
+  };
+},
+methods: {
+  saveHandle() {
+    this.$emit('cancel')
+  },
+  cancelHandle() {
+    this.$emit('cancel')
+  }
+}
+}
+</script>
+<style lang='scss' scoped>
+.dialog-legend{
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .legend-item{
+    margin-bottom:8px ;
+    display: flex;
+    align-items: center;
+    .legend-item-color{
+      width: 30px;
+      height: 2px;
+      margin-right: 20px;
+    }
+  }
+  .legend-box-hint{
+    margin-top: 10px;
+    color: #C0C4CC;
+    font-size: 14px;
+  }
+}
+.dia-bot{
+  margin: 30px 0;
+}
+</style>

src/views/dataEntry_manage/editChart.vue

@@ -563,8 +563,8 @@ export default {
 						this.setAddChartDefault();
 						newval.length && !this.chartInfo.WarnMsg && this.setChartOptionHandle(newval);
 					}
-					// 获取最早起始日期
-					this.setEarliestDate()
+					// 设置起始日期和最新日期
+					this.setExtremumDate()
 				}
       },
       deep: true,

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -53,7 +53,11 @@ export default {
 			search_page: 1,
 			current_search:'',
 			// 横坐标显示范围 - 季节性图
-			xAxisRange:[]
+			xAxisRange:[],
+			legendEditDiaShow:false,
+			legendList:[],
+			// 用于还原
+			legendListResetUse:[]
 		}
 	},
 	computed: {
@@ -169,7 +173,13 @@ export default {
 							else if(this.chartInfo.ChartType === 5 && this.tableData.length >= 2) return this.$message.warning('您选择的图表样式为散点图，最多支持2个指标')
 							this.tableData.push(tableItem);
 							this.isSetExtremeValue = true;
-							console.log(this.tableData)
+							// console.log(this.tableData)
+
+							this.$nextTick(()=>{
+								// 等待 tableData的 监听里面的获取到 起始时间和最近日期
+								this.setChartDefault()
+							})
+
 						}else {
 							this.$message.warning('录入指标已存在');
 						}
@@ -276,13 +286,16 @@ export default {
 		/* 打开时间段弹窗 */
 		openDateDia() {
 			// 自定义时间段回显
+			let selectDateStart = this.chartInfo.ChartType === 2?this.season_year[0]:this.select_date[0]
+			let selectDateEnd = this.chartInfo.ChartType === 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 === 100 ? this.count_year : ''
 			};
 			this.isDateDia = true;
@@ -291,16 +304,40 @@ export default {
 		dataChangeBack(data) {
 			this.year_select = data.dateType;
 			this.isDateDia = false;
-			this.select_date = [data.start_date, data.end_date];
       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}~至今`;
+			if(this.chartInfo.ChartType === 2){
+				this.season_year = [data.start_date, data.end_date];
+				/*
+					根据区间更新 横坐标显示范围的值
+					根据选择的时间长度和指标数据区间交集，取最新数据所在年份，修改横坐标显示范围的年份
+				*/
+				// console.log(data.start_date,this.latestDate);
+				if(new Date(data.start_date) > new Date(this.latestDate)){
+					let latestYear = parseInt(this.latestDate.substring(0,4))
+					this.xAxisRange=[`${latestYear}-01-01`,`${latestYear}-12-31`]
+				}else if(new Date(data.end_date) > new Date(this.latestDate)){
+					let latestYear = parseInt(this.latestDate.substring(0,4))
+					let startMonthAndDate = this.xAxisRange[0].substring(4)
+					let endMonthAndDate = this.xAxisRange[1].substring(4)
+					this.xAxisRange=[latestYear+startMonthAndDate,latestYear+endMonthAndDate]
+				}else{
+					let latestYear = parseInt(data.end_date.substring(0,4))
+					let startMonthAndDate = this.xAxisRange[0].substring(4)
+					let endMonthAndDate = this.xAxisRange[1].substring(4)
+					this.xAxisRange=[latestYear+startMonthAndDate,latestYear+endMonthAndDate]
+				}
+				// data.end_date
+			}else{
+				this.select_date = [data.start_date, data.end_date];
+				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();
 		},
 
@@ -321,6 +358,11 @@ export default {
 			this.barDateList = [];
       this.chartLimit = {};
       this.sectionScatterData = {};
+
+			this.$nextTick(()=>{
+				// 等待 tableData的 监听里面的获取到 起始时间和最近日期
+				this.setChartDefault()
+			})
 		},
 
 		/* 添加指标时 配置默认颜色 线条等 */
@@ -471,6 +513,7 @@ export default {
 					return {
 						...public_param,
 						Calendar: this.calendar_type,
+						CountYear: this.count_year,
 						SeasonStartDate: this.season_year ? this.season_year[0] : '',
 						SeasonEndDate: this.season_year ? this.season_year[1] : '',
 					}
@@ -550,15 +593,58 @@ export default {
 
 			this.options.yAxis[0].title.text = val;
 		},
+		// 设置图表的默认值
+		setChartDefault(){
+			console.log(this.latestDate,this.earliestDate,'earliestDate');
+			if(!(this.tableData && this.tableData.length>0)) return 
+			if(this.chartInfo.ChartType === 2){
+				// 季节性图默认选择最近5年
+				this.year_select = 100
+				this.count_year = 5	
+				// 获取最近日期的年
+				let latestYear = parseInt(this.latestDate.substring(0,4))
+				this.season_year=[`${latestYear-4}-01-01`,`${latestYear}-12-31`]
+				this.xAxisRange = [`${latestYear}-01-01`,`${latestYear}-12-31`]
+			}
+		},
 		// 横轴显示范围改变
 		xAxisRangeChange(date){
 			console.log(date);
-			console.log(this.tableData);
 			if(date && date.length>0){
 				let xStartDate = date[0]
 				let xEndDate = date[1]
 
+				if(!(parseInt(xEndDate.substring(0,4)) - parseInt(xStartDate.substring(0,4))<2)){
+					this.$message.warning("横坐标显示范围不得超过2年")
+					return 
+				}
+
+				if(new Date(`${xEndDate}`) < new Date(this.latestDate)){
+					this.$message.warning("结束日期不得早于时间区间内指标的最新日期，请修改时间区间")
+					return 
+				}
+				if(new Date(`${xEndDate}`) > new Date(`${parseInt(this.latestDate.substring(0,4))+1}${this.latestDate.substring(4)}`)){
+					this.$message.warning("结束日期不得晚于时间区间内指标的最新日期往后推一年的日期，请修改时间区间")
+					return 
+				}
+			}
+		},
+		// 打开图例编辑窗口
+		openLegendEditDia(){
+			this.legendEditDiaShow=true
+			console.log(this.tableData);
+			if(!(this.legendListResetUse && this.legendListResetUse.length>0)){
+				// 由于季节性只有一个指标列
+				this.tableData[0].DataList.map((item,index) => {
+					this.legendListResetUse.push({legendId:index+1,legendName:item.Year+''})
+					this.legendList.push({legendId:index+1,legendName:item.Year+''})
+				})
+			}else{
+				let len = this.legendList.length
+				let resetUseLen = this.legendListResetUse.length
+
 			}
+			console.log(this.legendList,'legendList');
 		}
 	}
 }

src/views/dataEntry_manage/mixins/chartPublic.js

@@ -46,7 +46,8 @@ export const chartSetMixin = {
       select_date: '', //自定义时间段
       count_year: '', //最近年数
       isDateDia: false, // 时间段弹窗
-      earliestDate:'', // 最早的日期
+      earliestDate:'', // 最早的日期 - 起始日期
+      latestDate:'', //最晚日期 - 最新日期
       dateForm: {},
       dateTip: '请选择时间段',
       predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝，红 默认颜色
@@ -2042,13 +2043,18 @@ export const chartSetMixin = {
         sourceMap[this.chartInfo.Source]();
       }
     },
-    // 设置最早的起始日期
-    setEarliestDate(){
-      //过滤、排序 拿到最早的日期
+    // 设置 起始日期 和 最新日期
+    setExtremumDate(){
+      //过滤、排序 拿到起始日期
       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]
+      //过滤、排序 拿到最新日期
+      let endDateList = this.tableData.map(it => it.LatestDate)
+                                      .filter(Boolean)
+                                      .sort((a,b)=> new Date(b).getTime() - new Date(a).getTime())
+      this.latestDate = endDateList[0]
     }
 	}
 }