Browse Source

将上下限统一到chartLimit内维护

cxmo 1 year ago
parent
commit
f50e8d2fc1
3 changed files with 89 additions and 149 deletions
  1. 69 54
      src/hooks/chart/render.js
  2. 9 49
      src/views/chartETA/ChartDetail.vue
  3. 11 46
      src/views/myETA/ChartDetail.vue

+ 69 - 54
src/hooks/chart/render.js

@@ -47,21 +47,17 @@ const axisLimitState = reactive({//极值数据
     xMin:0,
     xMax:0,
 })
-let leftLimitData = ref([0,0]) //左轴上下限
-let rightLimitData = ref([0,0]) //右轴上下限
-let rightTwoLimitData = ref([0,0]) //右二轴上下限
 //仅ETA图库内图表需要使用自定义上下限
 let useSalfLimit = false
+let isUseSelfLimit = ref(false)
 
 export function useChartRender(){
     return {
         options,
         axisLimitState,
         chartRender,
-        leftLimitData,
-        rightLimitData,
-        rightTwoLimitData,
-        setLimitData
+        setLimitData,
+        isUseSelfLimit
     }
 }
 
@@ -89,14 +85,18 @@ export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChart
     axisLimitState.hasRightTwoAxis=false
     axisLimitState.hasXAxis=false
 
-    axisLimitState.leftMin=0
-    axisLimitState.leftMax=0
-    axisLimitState.rightMin=0
-    axisLimitState.rightMax=0
-    axisLimitState.rightTwoMin=0
-    axisLimitState.rightTwoMax=0
-    axisLimitState.xMin=0
-    axisLimitState.xMax=0
+    //使用自定义上下限时,不需要初始化极值
+    if(!isUseSelfLimit.value){
+        axisLimitState.leftMin=0
+        axisLimitState.leftMax=0
+        axisLimitState.rightMin=0
+        axisLimitState.rightMax=0
+        axisLimitState.rightTwoMin=0
+        axisLimitState.rightTwoMax=0
+        axisLimitState.xMin=0
+        axisLimitState.xMax=0
+    }
+    
 
 
     let chartOpt={}
@@ -675,12 +675,14 @@ function setSplineOpt(e){
         }
         if(useSalfLimit&&isETASource){
             const limitMap = {
-                0:rightLimitData.value||[],
-                1:leftLimitData.value||[],
-                2:rightTwoLimitData.value||[]
+                0:['rightMin','rightMax'],
+                1:['leftMin','leftMax'],
+                2:['rightTwoMin','rightTwoMax']
+            }
+            if(limitMap[item.IsAxis]){
+                minLimit = axisLimitState[`${limitMap[item.IsAxis][0]}`]||0
+                maxLimit = axisLimitState[`${limitMap[item.IsAxis][1]}`]||0
             }
-            minLimit = limitMap[item.IsAxis][1]||0
-            maxLimit = limitMap[item.IsAxis][0]||0
         }
         const textZh = item.ConvertUnit||item.Unit
         const textEn = item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit
@@ -850,8 +852,8 @@ function setSeasonOpt(e){
         minLimit = data.MinData
         maxLimit = data.MaxData
     }else{
-        minLimit = leftLimitData.value[1]||0
-        maxLimit = leftLimitData.value[0]||0
+        minLimit = axisLimitState.leftMin||0
+        maxLimit = axisLimitState.leftMax||0
     }
     const textZh = data.ConvertUnit||data.Unit
     const textEn = data.ConvertEnUnit||data.UnitEn||data.ConvertUnit||data.Unit
@@ -906,8 +908,11 @@ function setSeasonOpt(e){
     // chartData.rangeSelector=rangeSelector
     // 设置坐标轴极值
     axisLimitState.hasLeftAxis=true
-    axisLimitState.leftMin=Number(data.MinData)
-    axisLimitState.leftMax=Number(data.MaxData)
+    if(!useSalfLimit){
+        axisLimitState.leftMin=Number(data.MinData)
+        axisLimitState.leftMax=Number(data.MaxData)
+    }
+    
 
     // 季节图x轴显示月/日
     let xAxis={
@@ -1074,12 +1079,16 @@ function setStackOrCombinChart(e){
             maxLimit = chartData[sameSideIndex].MaxData
         }else{
             const limitMap = {
-                0:rightLimitData.value||[],
-                1:leftLimitData.value||[],
-                2:rightTwoLimitData.value||[]
+                0:['rightMin','rightMax'],
+                1:['leftMin','leftMax'],
+                2:['rightTwoMin','rightTwoMax']
+            }
+            if(limitMap[item.IsAxis]){
+                minLimit = axisLimitState[`${limitMap[item.IsAxis][0]}`]||0
+                maxLimit = axisLimitState[`${limitMap[item.IsAxis][1]}`]||0
+                console.log('check,check,check',axisLimitState.leftMin,axisLimitState.leftMax)
+                console.log('test堆叠',minLimit,maxLimit)
             }
-            minLimit = limitMap[item.IsAxis][1]||0
-            maxLimit = limitMap[item.IsAxis][0]||0
         }
 
         // 设置y轴
@@ -1221,11 +1230,11 @@ function setScatterOptions(data){
 
     //上下限设置的是y轴,也就是第二个指标的值,改回来
     axisLimitState.hasLeftAxis=true
-    axisLimitState.leftMin=Number(dataList[1].MinData)
+    /* axisLimitState.leftMin=Number(dataList[1].MinData)
     axisLimitState.leftMax=Number(dataList[1].MaxData)
 
     axisLimitData.leftMin=Number(dataList[1].MinData)
-    axisLimitData.leftMax=Number(dataList[1].MaxData)
+    axisLimitData.leftMax=Number(dataList[1].MaxData) */
 
     // 取2个指标中日期相同的数据
     const real_data = [];
@@ -1287,8 +1296,8 @@ function setScatterOptions(data){
         minLimit = Math.min(...real_data.map(_ => _.y));
         maxLimit = Math.max(...real_data.map(_ => _.y));
     }else{
-        minLimit = leftLimitData.value[1]||0
-        maxLimit = leftLimitData.value[0]||0
+        minLimit = axisLimitState.leftMin||0
+        maxLimit = axisLimitState.leftMax||0
     }
     const textYZh = dataList[1].ConvertUnit||dataList[1].Unit
     const textYEn = dataList[1].ConvertEnUnit||dataList[1].UnitEn||dataList[1].ConvertUnit||dataList[1].Unit
@@ -2277,7 +2286,8 @@ function calcYAxislimit(tableData=[],ChartInfo){
     //散点图单独处理
     if(ChartInfo.ChartType===5){
         if(tableData[1]){
-            leftLimitData.value = [tableData[1].MaxData,tableData[1].MinData]
+            axisLimitState.leftMin = tableData[1].MinData
+            axisLimitState.leftMax = tableData[1].MaxData
         }
         return 
     }
@@ -2291,21 +2301,24 @@ function calcYAxislimit(tableData=[],ChartInfo){
             Max,
             Min
         } = calcLimit(leftData.flat())
-        leftLimitData.value = [Max, Min]
+        axisLimitState.leftMin = Min
+        axisLimitState.leftMax = Max
     } 
     if (rightData.length) {
         const {
             Max,
             Min
         } = calcLimit(rightData.flat())
-        rightLimitData.value = [Max, Min]
+        axisLimitState.rightMin = Min
+        axisLimitState.rightMax = Max
     }
     if (rightTwoData.length) {
         const {
             Max,
             Min
         } = calcLimit(rightTwoData.flat())
-        rightTwoLimitData.value = [Max, Min]
+        axisLimitState.rightTwoMin = Min
+        axisLimitState.rightTwoMax = Max
     }
 }
 function calcLimit(arr) {
@@ -2324,11 +2337,15 @@ function setLimitData({EdbInfoList,ChartInfo}){
         MinMaxSave
     } = ChartInfo
     if(MinMaxSave){
-        leftLimitData.value = [Number(LeftMax),Number(LeftMin)]
-        rightLimitData.value = [Number(RightMax),Number(RightMin)]
-        rightTwoLimitData.value = [Number(Right2Max),Number(Right2Min)]
+        axisLimitState.leftMin = Number(LeftMin)
+        axisLimitState.leftMax = Number(LeftMax)
+        axisLimitState.rightMin = Number(RightMin)
+        axisLimitState.rightMax = Number(RightMax)
+        axisLimitState.rightTwoMin = Number(Right2Min)
+        axisLimitState.rightTwoMax = Number(Right2Max)
         //若用户修改过,则检测轴的上下限是否为空,若为空,则需要计算对应轴的上下限
         checkLimit(EdbInfoList,ChartInfo)
+        console.log('check',axisLimitState.leftMin,axisLimitState.leftMax)
     }else{
         calcYAxislimit(EdbInfoList,ChartInfo)
     }
@@ -2337,38 +2354,36 @@ function checkLimit(tableData=[],ChartInfo){
     //散点图单独处理
     if(ChartInfo.ChartType===5){
         if(tableData[1]){
-            if(Number(leftLimitData.value[0])===0&&Number(leftLimitData.value[1])===0){
-                leftLimitData.value = [tableData[1].MaxData,tableData[1].MinData]
+            if(Number(axisLimitState.leftMin)===0&&Number(axisLimitState.leftMax)===0){
+                axisLimitState.leftMin = tableData[1].MinData
+                axisLimitState.leftMax = tableData[1].MaxData
             }
         }
         return 
     }
     //若轴的上下限均为0,则不管用户有没有修改过,都重新赋值
-    if(Number(leftLimitData.value[0])===0&&Number(leftLimitData.value[1])===0){
+    if(Number(axisLimitState.leftMin)===0&&Number(axisLimitState.leftMax)===0){
         const leftData = tableData.filter(i=>i.IsAxis===1).map(i=>[Number(i.MinData),Number(i.MaxData)])
         if(leftData.length){
             const {Max,Min} = this.calcLimit(leftData.flat())
-            leftLimitData.value = [Max,Min]
-        }else{
-            leftLimitData.value = [0,0]
+            axisLimitState.leftMin = Min
+            axisLimitState.leftMax = Max
         }
     }
-    if(Number(rightLimitData.value[0])===0&&Number(rightLimitData.value[1])===0){
+    if(Number(axisLimitState.rightMin)===0&&Number(axisLimitState.rightMax)===0){
         const rightData = tableData.filter(i => !i.IsAxis).map(i=>[Number(i.MinData),Number(i.MaxData)])
         if(rightData.length){
             const {Max,Min} = this.calcLimit(rightData.flat())
-            rightLimitData.value = [Max,Min]
-        }else{
-            rightLimitData.value = [0,0]
+            axisLimitState.rightMin = Min
+            axisLimitState.rightMax = Max
         }
     }
-    if(Number(rightTwoLimitData.value[0])===0&&Number(rightTwoLimitData.value[1])===0){
+    if(Number(axisLimitState.rightTwoMin)===0&&Number(axisLimitState.rightTwoMax)===0){
         const rightTwoData = tableData.filter(i=>i.IsAxis===2).map(i=>[Number(i.MinData),Number(i.MaxData)])
         if(rightTwoData.length){
             const {Max,Min} = this.calcLimit(rightTwoData.flat())
-            rightTwoLimitData.value = [Max,Min]
-        }else{
-            rightTwoLimitData.value = [0,0]
+            axisLimitState.rightTwoMin = Min
+            axisLimitState.rightTwoMax = Max
         }
     }
 }

+ 9 - 49
src/views/chartETA/ChartDetail.vue

@@ -20,10 +20,7 @@ const {checkAuthBtn} = useAuthBtn()
 import _ from 'lodash';
 
 const publicSettingStore = usePublicSettingStore()
-const {options,axisLimitState,chartRender,leftLimitData,
-        rightLimitData,
-        rightTwoLimitData,
-        setLimitData}=useChartRender()
+const {options,axisLimitState,chartRender,setLimitData,isUseSelfLimit}=useChartRender()
 const { width } = useWindowSize()
 const cachedViewsStore=useCachedViewsStore()
 const route=useRoute()
@@ -80,7 +77,9 @@ async function getChartDetail(e){
 
     latestDate.value = extremumDate.latestDate
 
+    //初始化上下限
     setDateAppear()
+    isUseSelfLimit.value = true
     setLimitData(res.Data)
     nextTick(()=>{
         highChart.value = chartRender({
@@ -168,21 +167,6 @@ let axisLimitDataTem=reactive({//左右轴极值
     xMax:0,
 })
 function handleShowAxisLimitOpt(){
-    //7柱形图10截面散点11雷达图不使用自定义上下限
-    if(![7,10,11].includes(chartInfo.value.ChartType)){
-        axisLimitDataTem.leftMin=leftLimitData.value[1]
-        axisLimitDataTem.leftMax=leftLimitData.value[0]
-
-        axisLimitDataTem.rightMin=rightLimitData.value[1]
-        axisLimitDataTem.rightMax=rightLimitData.value[0]
-
-        axisLimitDataTem.rightTwoMin=rightTwoLimitData.value[1]
-        axisLimitDataTem.rightTwoMax=rightTwoLimitData.value[0]
-
-        showLimitPop.value=true
-        return 
-    }
-    //7柱形图10截面散点11雷达图不使用自定义上下限
     axisLimitDataTem.leftMin=axisLimitState.leftMin
     axisLimitDataTem.leftMax=axisLimitState.leftMax
 
@@ -200,30 +184,6 @@ function handleShowAxisLimitOpt(){
 // 极限修改确定
 function handleConfirmLimitChange(){
     const data=_.cloneDeep(chartInfoData)
-    //7柱形图10截面散点11雷达图不使用自定义上下限
-    if(![7,10,11].includes(chartInfo.value.ChartType)){
-        if(axisLimitState.hasLeftAxis){
-            leftLimitData.value = [Number(axisLimitDataTem.leftMax),Number(axisLimitDataTem.leftMin)]
-        }
-        if(axisLimitState.hasRightAxis){
-            rightLimitData.value = [Number(axisLimitDataTem.rightMax),Number(axisLimitDataTem.rightMin)]
-        }
-        if(axisLimitState.hasRightTwoAxis){
-            rightTwoLimitData.value = [Number(axisLimitDataTem.rightTwoMin),Number(axisLimitDataTem.rightTwoMax)]
-        }
-        highChart.value = chartRender({
-            data:data,
-            renderId:'chart-box',
-            lang:currentLang.value,
-            changeLangIsCheck:false,
-            showChartTitle:false
-        })
-        showLimitPop.value=false
-        return 
-    }
-
-    //7柱形图10截面散点11雷达图不使用自定义上下限
-
     // 修改左轴极限
     if(axisLimitState.hasLeftAxis){
         if(axisLimitState.leftIndex!==-1){
@@ -515,12 +475,12 @@ function saveChart(){
     if(![7,10,11].includes(chartInfo.value.ChartType)){
         params = {
             ...params,
-            LeftMin:leftLimitData.value[1]+'',
-            LeftMax:leftLimitData.value[0]+'',
-            RightMin:rightLimitData.value[1]+'',
-            RightMax:rightLimitData.value[0]+'',
-            Right2Min:rightTwoLimitData.value[1]+'',
-            Right2Max:rightTwoLimitData.value[0]+'',
+            LeftMin:axisLimitState.leftMin+'',
+            LeftMax:axisLimitState.leftMax+'',
+            RightMin:axisLimitState.rightMin+'',
+            RightMax:axisLimitState.rightMax+'',
+            Right2Min:axisLimitState.rightTwoMin+'',
+            Right2Max:axisLimitState.rightTwoMax+'',
             //手动保存视为更改过上下限
             MinMaxSave:1
         }

+ 11 - 46
src/views/myETA/ChartDetail.vue

@@ -41,7 +41,7 @@ const isMoreActionShow = computed(()=>{
 }) 
 const { width, height } = useWindowSize()
 const cachedViewsStore=useCachedViewsStore()
-const {options,axisLimitState,chartRender,leftLimitData,rightLimitData,rightTwoLimitData,setLimitData}=useChartRender()
+const {options,axisLimitState,chartRender,setLimitData,isUseSelfLimit}=useChartRender()
 
 
 const route=useRoute()
@@ -136,8 +136,11 @@ async function getChartInfo(){
         temEndTime.value=chartState.endTime.split('-')
     }
     //仅ETA图库图表需要初始化上下限
-    if(res.Data.ChartInfo.Source===1){
+    if(res.Data.ChartInfo.Source===1&&![7,10,11].includes(res.Data.ChartInfo.ChartType)){
+        isUseSelfLimit.value = true
         setLimitData(res.Data)
+    }else{
+        isUseSelfLimit.value = false
     }
     nextTick(()=>{
         CHARTINS=chartRender({
@@ -276,21 +279,6 @@ let axisLimitDataTem=reactive({//左右轴极值
     xMax:0,
 })
 function handleShowAxisLimitOpt(){
-    //ETA图库的图表使用自定义上下限
-    if(chartInfo.value.Source===1&&![7,10,11].includes(chartInfo.value.ChartType)){
-        axisLimitDataTem.leftMin=leftLimitData.value[1]
-        axisLimitDataTem.leftMax=leftLimitData.value[0]
-
-        axisLimitDataTem.rightMin=rightLimitData.value[1]
-        axisLimitDataTem.rightMax=rightLimitData.value[0]
-
-        axisLimitDataTem.rightTwoMin=rightTwoLimitData.value[1]
-        axisLimitDataTem.rightTwoMax=rightTwoLimitData.value[0]
-
-        showLimitPop.value=true
-        return 
-    }
-    //其他图表不变
     axisLimitDataTem.leftMin=axisLimitState.leftMin
     axisLimitDataTem.leftMax=axisLimitState.leftMax
 
@@ -308,29 +296,6 @@ function handleShowAxisLimitOpt(){
 // 极限修改确定
 function handleConfirmLimitChange(){
     const data=_.cloneDeep(chartInfoData)
-    //ETA图库的图表使用自定义上下限
-    if(chartInfo.value.Source===1&&![7,10,11].includes(chartInfo.value.ChartType)){
-        if(axisLimitState.hasLeftAxis){
-            leftLimitData.value = [Number(axisLimitDataTem.leftMax),Number(axisLimitDataTem.leftMin)]
-        }
-        if(axisLimitState.hasRightAxis){
-            rightLimitData.value = [Number(axisLimitDataTem.rightMax),Number(axisLimitDataTem.rightMin)]
-        }
-        if(axisLimitState.hasRightTwoAxis){
-            rightTwoLimitData.value = [Number(axisLimitDataTem.rightTwoMin),Number(axisLimitDataTem.rightTwoMax)]
-        }
-        CHARTINS=chartRender({
-            data:data,
-            renderId:'chart-box',
-            lang:'zh',
-            changeLangIsCheck:false,
-            showChartTitle:false
-        })
-
-        showLimitPop.value=false
-        return 
-    }
-
     // 修改左轴极限
     if(axisLimitState.hasLeftAxis){
         if(axisLimitState.leftIndex!==-1){
@@ -665,12 +630,12 @@ function saveChartHandle(){
     if(![7,10,11].includes(chartInfo.value.ChartType)){
         params = {
             ...params,
-            LeftMin:leftLimitData.value[1]+'',
-            LeftMax:leftLimitData.value[0]+'',
-            RightMin:rightLimitData.value[1]+'',
-            RightMax:rightLimitData.value[0]+'',
-            Right2Min:rightTwoLimitData.value[1]+'',
-            Right2Max:rightTwoLimitData.value[0]+'',
+            LeftMin:axisLimitState.leftMin+'',
+            LeftMax:axisLimitState.leftMax+'',
+            RightMin:axisLimitState.rightMin+'',
+            RightMax:axisLimitState.rightMax+'',
+            Right2Min:axisLimitState.rightTwoMin+'',
+            Right2Max:axisLimitState.rightTwoMax+'',
             //手动保存视为更改过上下限
             MinMaxSave:1
         }