فهرست منبع

自定义上下限,兼容ETA图库,及其他Source

cxmo 1 سال پیش
والد
کامیت
6f88142a50
3فایلهای تغییر یافته به همراه117 افزوده شده و 29 حذف شده
  1. 67 26
      src/hooks/chart/render.js
  2. 45 2
      src/views/chartETA/ChartDetail.vue
  3. 5 1
      src/views/myETA/ChartDetail.vue

+ 67 - 26
src/hooks/chart/render.js

@@ -50,6 +50,8 @@ const axisLimitState = reactive({//极值数据
 let leftLimitData = ref([0,0]) //左轴上下限
 let rightLimitData = ref([0,0]) //右轴上下限
 let rightTwoLimitData = ref([0,0]) //右二轴上下限
+//仅ETA图库内图表需要使用自定义上下限
+const useSalfLimit = ['/myETA/chartdetail','/chartETA/chartdetail'].includes(window.location.pathname)
 
 export function useChartRender(){
     return {
@@ -592,6 +594,8 @@ function setStatisticFrequency(e){
 
 //曲线图
 function setSplineOpt(e){
+    //其他Source也会用到曲线图,这里需要兼容
+    const isETASource = e.ChartInfo.Source===1
     const data=[4,6,7,8].includes(e.ChartInfo.Source)?[e.DataResp]:e.EdbInfoList
     let series=[]
     let yAxis=[]
@@ -663,6 +667,21 @@ function setSplineOpt(e){
             temYRightArr.push(item)
         }
 
+        //获取上下限
+        let minLimit = 0,maxLimit = 0
+        if(!useSalfLimit||!isETASource){
+            minLimit = item.MinData
+            maxLimit = item.MaxData
+        }
+        if(useSalfLimit&&isETASource){
+            const limitMap = {
+                0:rightLimitData.value||[],
+                1:leftLimitData.value||[],
+                2:rightTwoLimitData.value||[]
+            }
+            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
         let yItem={
@@ -695,8 +714,8 @@ function setSplineOpt(e){
             },
             opposite: [0,2].includes(item.IsAxis),
             reversed: item.IsOrder,
-            min: item.MinData,
-            max: item.MaxData,
+            min: Number(minLimit),
+            max: Number(maxLimit),
             visible: sameSideIndex === index,
             chartEdbInfo:item,//指标数据用于在保存时读取指标数据
             plotBands: setAxisPlotAreas(item.IsAxis),
@@ -740,29 +759,31 @@ function setSplineOpt(e){
     yAxis.forEach(item=>{
         if(item.IsAxis===1){//左轴
             axisLimitState.hasLeftAxis=true
-            axisLimitState.leftMin=data[temYLeftIndex].MinData
-            axisLimitState.leftMax=data[temYLeftIndex].MaxData
+            if(!useSalfLimit||!isETASource){
+                axisLimitState.leftMin=data[temYLeftIndex].MinData
+                axisLimitState.leftMax=data[temYLeftIndex].MaxData
 
-            // item.min=getAxisMaxOrMin(temYLeftArr,'min')
-            // item.max=getAxisMaxOrMin(temYLeftArr,'max')
-            item.min=data[temYLeftIndex].MinData
-            item.max=data[temYLeftIndex].MaxData
+                item.min=data[temYLeftIndex].MinData
+                item.max=data[temYLeftIndex].MaxData
+            }
         }else if (item.IsAxis===2){ // 右2轴
             axisLimitState.hasRightTwoAxis=true
-            axisLimitState.rightTwoMin=data[temYRightTwoIndex].MinData
-            axisLimitState.rightTwoMax=data[temYRightTwoIndex].MaxData
+            if(!useSalfLimit||!isETASource){
+                axisLimitState.rightTwoMin=data[temYRightTwoIndex].MinData
+                axisLimitState.rightTwoMax=data[temYRightTwoIndex].MaxData
 
-            item.min=data[temYRightTwoIndex].MinData
-            item.max=data[temYRightTwoIndex].MaxData
+                item.min=data[temYRightTwoIndex].MinData
+                item.max=data[temYRightTwoIndex].MaxData
+            }
         }else{
             axisLimitState.hasRightAxis=true
-            axisLimitState.rightMin=data[temYRightIndex].MinData
-            axisLimitState.rightMax=data[temYRightIndex].MaxData
+            if(!useSalfLimit||!isETASource){
+                axisLimitState.rightMin=data[temYRightIndex].MinData
+                axisLimitState.rightMax=data[temYRightIndex].MaxData
 
-            // item.min=getAxisMaxOrMin(temYRightArr,'min')
-            // item.max=getAxisMaxOrMin(temYRightArr,'max')
-            item.min=data[temYRightIndex].MinData
-            item.max=data[temYRightIndex].MaxData
+                item.min=data[temYRightIndex].MinData
+                item.max=data[temYRightIndex].MaxData
+            }
         }
     })
 
@@ -821,6 +842,17 @@ function setSeasonOpt(e){
             }
             series.push(seriesItem)
         })
+    
+    //获取上下限
+    let minLimit = 0,maxLimit = 0
+    //非ETA图库不使用自定义上下限
+    if(!useSalfLimit){
+        minLimit = data.MinData
+        maxLimit = data.MaxData
+    }else{
+        minLimit = leftLimitData.value[1]||0
+        maxLimit = leftLimitData.value[0]||0
+    }
     const textZh = data.ConvertUnit||data.Unit
     const textEn = data.ConvertEnUnit||data.UnitEn||data.ConvertUnit||data.Unit
     yAxis=[{
@@ -847,8 +879,8 @@ function setSeasonOpt(e){
                 ...chartTheme&&chartTheme.yAxisOptions.style
             },
         },
-        max: Number(data.MaxData),
-        min: Number(data.MinData),
+        max: Number(maxLimit),
+        min: Number(minLimit),
         plotBands: setAxisPlotAreas(1),
         plotLines: setAxisPlotLines(1),
         lineWidth: 1,
@@ -967,7 +999,6 @@ function setStackOrCombinChart(e){
     let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
 
 
-    const useSalfLimit = ['/myETA/chartdetail','/chartThemeSet'].includes(window.location.pathname)
     newData.forEach((item,index)=>{
 
         //轴位置值相同的下标
@@ -1035,7 +1066,9 @@ function setStackOrCombinChart(e){
         }
         series.push(seriesItemObj)
         
+        //获取上下限
         let minLimit = 0,maxLimit = 0
+        //非ETA图库不使用自定义上下限
         if(!useSalfLimit){
             minLimit = chartData[sameSideIndex].MinData
             maxLimit = chartData[sameSideIndex].MaxData
@@ -1047,7 +1080,6 @@ function setStackOrCombinChart(e){
             }
             minLimit = limitMap[item.IsAxis][1]||0
             maxLimit = limitMap[item.IsAxis][0]||0
-            console.log('?min,max',minLimit,maxLimit)
         }
 
         // 设置y轴
@@ -1249,6 +1281,15 @@ function setScatterOptions(data){
 
     const { IsOrder,ChartColor } = dataList[0];
 
+    //获取上下限
+    let minLimit = 0,maxLimit = 0
+    if(!useSalfLimit){
+        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
+    }
     const textYZh = dataList[1].ConvertUnit||dataList[1].Unit
     const textYEn = dataList[1].ConvertEnUnit||dataList[1].UnitEn||dataList[1].ConvertUnit||dataList[1].Unit
     //y轴
@@ -1278,8 +1319,8 @@ function setScatterOptions(data){
         },
         opposite: false,
         reversed: IsOrder,
-        min: Number(dataList[1].MinData),
-        max: Number(dataList[1].MaxData),
+        min: Number(minLimit),
+        max: Number(maxLimit),
         tickWidth: 1,
         tickLength: 5,
         lineWidth: 1,
@@ -2256,14 +2297,14 @@ function calcYAxislimit(tableData=[],ChartInfo){
         const {
             Max,
             Min
-        } = this.calcLimit(rightData.flat())
+        } = calcLimit(rightData.flat())
         rightLimitData.value = [Max, Min]
     }
     if (rightTwoData.length) {
         const {
             Max,
             Min
-        } = this.calcLimit(rightTwoData.flat())
+        } = calcLimit(rightTwoData.flat())
         rightTwoLimitData.value = [Max, Min]
     }
 }

+ 45 - 2
src/views/chartETA/ChartDetail.vue

@@ -20,7 +20,10 @@ const {checkAuthBtn} = useAuthBtn()
 import _ from 'lodash';
 
 const publicSettingStore = usePublicSettingStore()
-const {options,axisLimitState,chartRender}=useChartRender()
+const {options,axisLimitState,chartRender,leftLimitData,
+        rightLimitData,
+        rightTwoLimitData,
+        setLimitData}=useChartRender()
 const { width } = useWindowSize()
 const cachedViewsStore=useCachedViewsStore()
 const route=useRoute()
@@ -78,7 +81,7 @@ async function getChartDetail(e){
     latestDate.value = extremumDate.latestDate
 
     setDateAppear()
-
+    setLimitData(res.Data)
     nextTick(()=>{
         highChart.value = chartRender({
             data:{
@@ -165,6 +168,22 @@ let axisLimitDataTem=reactive({//左右轴极值
     xMax:0,
 })
 function handleShowAxisLimitOpt(){
+    //7柱形图10截面散点11雷达图不使用自定义上下限
+    if(![7,10,11].includes(chartInfo.value.ChartType)){
+        console.log('触发')
+        axisLimitDataTem.leftMin=leftLimitData.value[1]
+        axisLimitDataTem.leftMax=leftLimitData.value[0]
+
+        axisLimitDataTem.rightMin=rightLimitData.value[1]
+        axisLimitDataTem.rightMax=rightLimitData.value[0]
+
+        axisLimitDataTem.rightTwoMin=rightTwoLimitData[1]
+        axisLimitDataTem.rightTwoMax=rightTwoLimitData[0]
+
+        showLimitPop.value=true
+        return 
+    }
+    //7柱形图10截面散点11雷达图不使用自定义上下限
     axisLimitDataTem.leftMin=axisLimitState.leftMin
     axisLimitDataTem.leftMax=axisLimitState.leftMax
 
@@ -182,6 +201,30 @@ function handleShowAxisLimitOpt(){
 // 极限修改确定
 function handleConfirmLimitChange(){
     const data=_.cloneDeep(chartInfoData)
+    //7柱形图10截面散点11雷达图不使用自定义上下限
+    if(![7,10,11].includes(chartInfo.value.ChartType)){
+        console.log("触发2")
+        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.rightMax),Number(axisLimitDataTem.rightMin)]
+        }
+        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){

+ 5 - 1
src/views/myETA/ChartDetail.vue

@@ -135,7 +135,10 @@ async function getChartInfo(){
         temStartTime.value=chartState.startTime.split('-')
         temEndTime.value=chartState.endTime.split('-')
     }
-    setLimitData(res.Data)
+    //仅ETA图库图表需要初始化上下限
+    if(res.Data.ChartInfo.Source===1){
+        setLimitData(res.Data)
+    }
     nextTick(()=>{
         CHARTINS=chartRender({
             data:res.Data,
@@ -288,6 +291,7 @@ function handleShowAxisLimitOpt(){
         showLimitPop.value=true
         return 
     }
+    //其他图表不变
     axisLimitDataTem.leftMin=axisLimitState.leftMin
     axisLimitDataTem.leftMax=axisLimitState.leftMax