|
|
@@ -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');
|
|
|
}
|
|
|
}
|
|
|
}
|
hbchen