فهرست منبع

添加图表上下限功能调整

cxmo 1 سال پیش
والد
کامیت
e63da0e32f

+ 9 - 8
src/views/dataEntry_manage/addChart.vue

@@ -209,7 +209,7 @@
 										<el-checkbox v-model="item.IsOrder">逆序</el-checkbox>
 									</li>
 									<li>
-										<el-radio-group v-model="item.IsAxis" size="mini">
+										<el-radio-group v-model="item.IsAxis" size="mini" @change="EdbAxisChange">
 											<el-radio-button :label="1">左轴</el-radio-button>
 											<el-radio-button :label="0">右轴</el-radio-button>
 
@@ -422,14 +422,15 @@
 									size="mini"
 									type="number"
 									placeholder="上限"
-									v-model="tableData[leftIndex].MaxData"
+									v-model="leftLimitData[0]"
+									@change="changeAxisLimit"
 								/>
 								<el-input
 									class="min-data-input"
 									size="mini"
 									type="number"
 									placeholder="下限"
-									v-model="tableData[leftIndex].MinData"
+									v-model="leftLimitData[1]"
 								/>
 							</div>
 							<div class="range-cont right" v-if="rightIndex != -1">
@@ -438,14 +439,14 @@
 									size="mini"
 									type="number"
 									placeholder="上限"
-									v-model="tableData[rightIndex].MaxData"
+									v-model="rightLimitData[0]"
 								/>
 								<el-input
 									class="min-data-input"
 									size="mini"
 									type="number"
 									placeholder="下限"
-									v-model="tableData[rightIndex].MinData"
+									v-model="rightLimitData[1]"
 								/>
 							</div>
 							<!-- 右2上下限设置 -->
@@ -455,14 +456,14 @@
 									size="mini"
 									type="number"
 									placeholder="上限"
-									v-model="tableData[rightTwoIndex].MaxData"
+									v-model="rightTwoLimitData[0]"
 								/>
 								<el-input
 									class="min-data-input"
 									size="mini"
 									type="number"
 									placeholder="下限"
-									v-model="tableData[rightTwoIndex].MinData"
+									v-model="rightTwoLimitData[1]"
 								/>
 							</div>
 
@@ -692,7 +693,7 @@ export default {
 					}else {
 						//拼接标题
 						this.chartInfo.ChartName =  this.sameOptionType.includes(this.chartInfo.ChartType) ? newval.map((item,index) => index === newval.length-1 ? item.EdbName : `${item.EdbName}和`).join('') : `${newval[0].EdbName}季节性`;
-	
+						this.calcYAxislimit()
 						this.setAddChartDefault();
 						this.setChartOptionHandle(newval);
 					}

+ 55 - 2
src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -80,7 +80,12 @@ export default {
 			isShowSourceDialog: false,
 			sourceEditForm: {
 
-			}
+			},
+
+			leftLimitData:[0,0],
+			rightLimitData:[0,0],
+			rightTwoLimitData:[0,0]
+
 		}
 	},
 	computed: {
@@ -242,6 +247,7 @@ export default {
 									text: sourceStr
 								});
 							}
+							this.EdbAxisChange()
 
 							this.$nextTick(()=>{
 								// 等待 tableData的 监听里面的获取到 起始时间和最近日期
@@ -522,7 +528,7 @@ export default {
 			let index = this.tableData.findIndex(obj => obj.EdbInfoId === item.EdbInfoId);
 			this.tableData.splice(index, 1);
 			this.$message.success('删除成功')
-
+			this.EdbAxisChange()
 			//添加图表时重置默认样式
 			this.$route.path==='/addchart' && this.resetChartEdbDefault();
 			
@@ -875,6 +881,53 @@ export default {
 				...JSON.parse(this.chartInfo.SourcesFrom),
 				isShow:this.chartInfo.SourcesFromVisable
 			})
+		},
+		/* 指标切换左右轴*/
+		EdbAxisChange(){
+			this.calcYAxislimit()
+		},
+		/* 计算y轴上下限 */
+		calcYAxislimit(){
+			//分组
+			const leftData = this.tableData.filter(i=>i.IsAxis===1).map(i=>[Number(i.MinData),Number(i.MaxData)])
+			const rightData = this.tableData.filter(i=>!i.IsAxis).map(i=>[Number(i.MinData),Number(i.MaxData)])
+			const rightTwoData = this.tableData.filter(i=>i.IsAxis===2).map(i=>[Number(i.MinData),Number(i.MaxData)])
+			//计算最大最小值
+			if(leftData.length){
+				const {Max,Min} = this.calcLimit(leftData.flat())
+				this.leftLimitData = [Max,Min]
+			}else{
+				this.leftLimitData = [0,0]
+			}
+			if(rightData.length){
+				const {Max,Min} = this.calcLimit(rightData.flat())
+				this.rightLimitData = [Max,Min]
+			}else{
+				this.rightLimitData = [0,0]
+			}
+			if(rightTwoData.length){
+				const {Max,Min} = this.calcLimit(rightTwoData.flat())
+				this.rightTwoLimitData = [Max,Min]
+			}else{
+				this.rightTwoLimitData = [0,0]
+			}
+			console.table([
+				{'y轴':'左轴','最大值':this.leftLimitData[0],'最小值':this.leftLimitData[1]},
+				{'y轴':'右轴','最大值':this.rightLimitData[0],'最小值':this.rightLimitData[1]},
+				{'y轴':'右二轴','最大值':this.rightTwoLimitData[0],'最小值':this.rightTwoLimitData[1]}
+			])
+		},
+		calcLimit(arr){
+			return {
+				Max:Math.max(...arr),
+				Min:Math.min(...arr)
+			}
+		},
+		changeAxisLimit(){
+			if(this.chartInfo.Source === 1&&this.chartInfo.chartType===1){
+				console.log("重绘 by addChart")
+				this.$refs.chartRef.init()
+			}
 		}
 	}
 }

+ 15 - 2
src/views/dataEntry_manage/mixins/chartPublic.js

@@ -585,6 +585,19 @@ export const chartSetMixin = {
         let sameSideIndex = chartData.findIndex(
           (i) => i.IsAxis === item.IsAxis
         );
+        
+        //在添加编辑页,min max为重新计算过的min max 其他页面不管
+        const isCalcLimit = ['/addchart','/editchart'].includes(this.$route.path)
+        let minLimit = 0,maxLimit = 0
+        if(isCalcLimit){
+            const limitMap = {
+                0:this.rightLimitData||[],
+                1:this.leftLimitData||[],
+                2:this.rightTwoLimitData||[]
+            }
+            minLimit = limitMap[item.IsAxis][1]||0
+            maxLimit = limitMap[item.IsAxis][0]||0
+        }
 
         //y轴
         let yItem = {
@@ -616,8 +629,8 @@ export const chartSetMixin = {
           },
           opposite: [0,2].includes(item.IsAxis),
           reversed: item.IsOrder,
-          min: Number(item.MinData),
-          max: Number(item.MaxData),
+          min: isCalcLimit?Number(minLimit):Number(item.MinData),
+          max: isCalcLimit?Number(maxLimit):Number(item.MaxData),
           tickWidth: 1,
           visible: sameSideIndex === index,
           plotBands: this.setAxisPlotAreas(item.IsAxis),