ETA1.0.5 - 暂存

src/views/dataEntry_manage/addChart.vue

@@ -104,18 +104,29 @@
 
 				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2 && tableData && tableData.length>0">
 					<!-- 仅用于季节性图配置 -->
-					<div style="margin-bottom: 12px;">
-						横坐标显示范围
+					<div style="margin-bottom: 12px;" class="xaxis-range-tip">
+						横坐标显示范围 
+						<el-tooltip>
+							<div slot="content">
+								<p class="hint-message">该配置项用于横坐标显示时间刻度</p>
+								<p class="hint-message">1、若开始日期＜结束日期，则默认不跨年，允许勾选跨年</p>
+								<p class="hint-message">2、若开始日期 ≥ 结束日期，则跨年，不允许取消勾选</p>
+							</div>
+							<img src="~@/assets/img/icons/question_mark_black.png" style="height: 16px;cursor: pointer;margin-left: 6px;" />
+						</el-tooltip>
 					</div>
 					<el-date-picker
 						style="width: 90%;"
 						v-model="xAxisRange"
 						type="daterange"
-						value-format="yyyy-MM-dd"
+						value-format="MM-dd"
+						format="MM-dd"
 						start-placeholder="开始日期"
 						end-placeholder="结束日期"
 						@change="xAxisRangeChange"
 						></el-date-picker>
+					<el-checkbox label="跨年" v-model="isSpanYear" :disabled="isSpanYearDisable"
+					style="margin-top: 12px;"></el-checkbox>
 					<div class="legend-set-text" @click="openLegendEditDia">
 						<span>图例名称设置</span>
 						<img src="~@/assets/img/icons/edit-blue.png" />
@@ -510,6 +521,7 @@
       :isEditLegend="legendEditDiaShow"
 			:legendList="legendList"
       @cancel="legendEditDiaShow = false"
+      @saveLegend="saveLegend"
     />
   </div>
 </template>
@@ -604,23 +616,7 @@ export default {
 			this.$refs.diaForm.validate((valid) => {
 				if(valid) {
 					// 季节图只允许添加一个指标
-					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 === 2 && this.tableData.length > 1) return this.$message.warning('您选择的图表样式为季节性图表，只支持单指标画图');
 
 					if(this.chartInfo.ChartType === 7 && !this.$refs.BarOptRef.dateList.length)  return this.$message.warning('请添加日期');
 
@@ -790,13 +786,22 @@ export default {
 			.xaxis-range-cont{
 				color: #606266;
 				margin-top: 20px;
+				.xaxis-range-tip{
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					.hint-message{
+						font-size: 15px;
+						line-height: 22px;
+					}
+				}
 				.legend-set-text{
 					font-size: 15px;
 					color: #1B7BDE;
 					display: flex;
 					align-items: center;
 					justify-content: flex-start;
-					margin-top: 10px;
+					margin-top: 20px;
 					cursor: pointer;
 					img{
 						height: 16px;

src/views/dataEntry_manage/components/LegendEditDia.vue

@@ -9,7 +9,7 @@
   v-dialogDrag 
   width="600px">
     <div class="dialog-legend">
-      <div v-for="(item,index) in legendList" key="index" class="legend-item">
+      <div v-for="(item,index) in legendListCopy" 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>
@@ -24,7 +24,7 @@
 
 <script>
 import {seasonOptions} from "@/utils/defaultOptions.js" 
-
+import _ from 'lodash';
 export default {
 name:'',
 props: {
@@ -38,28 +38,25 @@ props: {
   }
 },
 computed:{
-  legendListCopy(){
-
-  },
   seasonColor(){
     return seasonOptions.colors.slice(-this.legendList.length)
   }
 },
+data () {
+  return {
+    legendListCopy:[]
+  };
+},
 watch: {
   isEditLegend(val) {
     if(val) {
-      console.log(seasonOptions);
+      this.legendListCopy = _.cloneDeep(this.legendList)
     }
   }
 },
-data () {
-  return {
-
-  };
-},
 methods: {
   saveHandle() {
-    this.$emit('cancel')
+    this.$emit('saveLegend',this.legendListCopy)
   },
   cancelHandle() {
     this.$emit('cancel')

src/views/dataEntry_manage/editChart.vue

@@ -113,19 +113,33 @@
 
 				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2">
 					<!-- 仅用于季节性图配置 -->
-					<div style="margin-bottom: 12px;">
-						横轴显示范围
+					<div style="margin-bottom: 12px;" class="xaxis-range-tip">
+						横坐标显示范围 
+						<el-tooltip>
+							<div slot="content">
+								<p class="hint-message">该配置项用于横坐标显示时间刻度</p>
+								<p class="hint-message">1、若开始日期＜结束日期，则默认不跨年，允许勾选跨年</p>
+								<p class="hint-message">2、若开始日期 ≥ 结束日期，则跨年，不允许取消勾选</p>
+							</div>
+							<img src="~@/assets/img/icons/question_mark_black.png" style="height: 16px;cursor: pointer;margin-left: 6px;" />
+						</el-tooltip>
 					</div>
 					<el-date-picker
 						style="width: 90%;"
 						v-model="xAxisRange"
 						type="daterange"
-						:clearable="false"
-						value-format="yyyy-MM-dd"
+						value-format="MM-dd"
+						format="MM-dd"
 						start-placeholder="开始日期"
 						end-placeholder="结束日期"
 						@change="xAxisRangeChange"
-						></el-date-picker>
+					></el-date-picker>
+					<el-checkbox label="跨年" v-model="isSpanYear" :disabled="isSpanYearDisable"
+					style="margin-top: 12px;"></el-checkbox>
+					<div class="legend-set-text" @click="openLegendEditDia">
+						<span>图例名称设置</span>
+						<img src="~@/assets/img/icons/edit-blue.png" />
+					</div>
 				</div>
 
 				<div class="targetset-cont">
@@ -795,6 +809,28 @@ export default {
 			.xaxis-range-cont{
 				color: #606266;
 				margin-top: 20px;
+				.xaxis-range-tip{
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					.hint-message{
+						font-size: 15px;
+						line-height: 22px;
+					}
+				}
+				.legend-set-text{
+					font-size: 15px;
+					color: #1B7BDE;
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					margin-top: 20px;
+					cursor: pointer;
+					img{
+						height: 16px;
+						margin-left: 5px;
+					}
+				}
 			}
 			.targetset-cont {
 				padding: 30px 0 20px;

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -54,6 +54,9 @@ export default {
 			current_search:'',
 			// 横坐标显示范围 - 季节性图
 			xAxisRange:[],
+			// 是否跨过一年
+			isSpanYear:false,
+			isSpanYearDisable:false,
 			legendEditDiaShow:false,
 			legendList:[],
 			// 用于还原
@@ -312,21 +315,20 @@ export default {
 					根据选择的时间长度和指标数据区间交集，取最新数据所在年份，修改横坐标显示范围的年份
 				*/
 				// 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
+				// 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]
+				// }
 			}else{
 				this.select_date = [data.start_date, data.end_date];
 				if(data.dateType==100){
@@ -342,9 +344,9 @@ export default {
 		},
 
 			/* 季节图切换年份  保持当前配置 */
-		seasonYearChange() {
-			this.getPreviewSplineInfo();
-		},
+		// seasonYearChange() {
+		// 	this.getPreviewSplineInfo();
+		// },
 
 		/* 切换图重置状态 */
 		initStatus() {
@@ -604,29 +606,27 @@ export default {
 				// 获取最近日期的年
 				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`]
+				this.xAxisRange = ['01-01','12-31']
+				this.isSpanYear=false
+				this.isSpanYearDisable=false
 			}
 		},
 		// 横轴显示范围改变
 		xAxisRangeChange(date){
-			console.log(date);
 			if(date && date.length>0){
+				// console.log(date[0],date[1]);
 				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 
+				if(new Date(`2013-${xStartDate}`) > new Date(`2013-${xEndDate}`) || 
+				new Date(`2013-${xStartDate}`) == new Date(`2013-${xEndDate}`)){
+					// 开始日期 >= 结束日期 跨年
+					this.isSpanYear=true
+					this.isSpanYearDisable=true
+				}else{
+					this.isSpanYearDisable=false
 				}
+			}else{
+				this.isSpanYearDisable=false
 			}
 		},
 		// 打开图例编辑窗口
@@ -645,6 +645,13 @@ export default {
 
 			}
 			console.log(this.legendList,'legendList');
+		},
+		// 图例编辑接口保存
+		saveLegend(copyList){
+			if(copyList && copyList.length>0){
+				this.legendList = copyList
+				this.legendEditDiaShow=false
+			}
 		}
 	}
 }