Răsfoiți Sursa

Merge branch '9.1'

Karsa 2 ani în urmă
părinte
comite
fb6d748fc0
1 a modificat fișierele cu 98 adăugiri și 40 ștergeri
  1. 98 40
      src/views/hzyb/chart/Detail.vue

+ 98 - 40
src/views/hzyb/chart/Detail.vue

@@ -32,7 +32,7 @@ const basicYAxis = {
     lineWidth: 1,
     lineColor: '#bfbfbf',
     tickColor: '#bfbfbf',
-    offset: 0,
+    // offset: 0,
     visible: true,
     gridLineWidth: 0,
     tickPosition: 'inside',
@@ -293,11 +293,14 @@ onBeforeRouteUpdate((nval)=>{
 let showLimit=ref(false)
 let hasLeftAxis=ref(false)//是否有左轴
 let hasRightAxis=ref(false)//是否有右轴
+let hasRightTwoAxis=ref(false)//是否有右2轴
 let axisLimitData=reactive({//左右轴极值
     leftMin:0,
     leftMax:0,
     rightMin:0,
-    rightMax:0
+    rightMax:0,
+    rightTwoMin:0,
+    rightTwoMax:0,
 })
 const handleConfirmSetLimit=()=>{//确定修改极值(研究员会调用一次保存)
     if(canSave.value){
@@ -319,18 +322,23 @@ const setSplineOpt=(data)=>{
 
     let temYLeftArr=[]
     let temYRightArr=[]
-    let temYLeftIndex=data.findIndex((item) => item.IsAxis)
+    let temYRightTwoArr = []
+    let temYLeftIndex=data.findIndex((item) => item.IsAxis===1)
     let temYRightIndex=data.findIndex((item) => !item.IsAxis)
+    let temYRightTwoIndex = data.findIndex((item) => item.IsAxis===2)
 
     let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
 
-    data.forEach((item,index)=>{
+    //有右二轴时排个序 按照左 右 右2的顺序
+    let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
+
+    newData.forEach((item,index)=>{
 
          //轴位置值相同的下标
-        let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);
+        let sameSideIndex = newData.findIndex(i => i.IsAxis === item.IsAxis);
 
         let dynamic_title = item.EdbName;
-        let dynamic_arr = data.filter(
+        let dynamic_arr = newData.filter(
           (item) => dynamic_title === item.EdbName
         );
         //处理数据列name
@@ -372,6 +380,7 @@ const setSplineOpt=(data)=>{
                     return sameSideIndex !== index ? '' : ctx.value;
                 },
                 align: 'center',
+                x: [0,2].includes(item.IsAxis) ? 5 : -5,
                 y:5,
             },
             tickWidth: sameSideIndex !== index ? 0 : 1,
@@ -380,12 +389,13 @@ const setSplineOpt=(data)=>{
                 align: 'high',
                 rotation: 0,
                 y: -15,
-                offset: -(10 * item.Unit.length),
+                offset: 0,
             },
-            opposite: item.IsAxis === 0,
+            opposite: [0,2].includes(item.IsAxis),
             reversed: item.IsOrder,
             min: item.MinData,
             max: item.MaxData,
+            visible: sameSideIndex === index,
             chartEdbInfo:item//指标数据用于在保存时读取指标数据
         }
         yAxis.push(yItem)
@@ -431,7 +441,7 @@ const setSplineOpt=(data)=>{
     
 
     yAxis.forEach(item=>{
-        if(item.IsAxis){//左轴
+        if(item.IsAxis===1){//左轴
             hasLeftAxis.value=true
 
             // item.min=getAxisMaxOrMin(temYLeftArr,'min')
@@ -442,6 +452,12 @@ const setSplineOpt=(data)=>{
             item.max=data[temYLeftIndex].MaxData
             axisLimitData.leftMin=data[temYLeftIndex].MinData
             axisLimitData.leftMax=data[temYLeftIndex].MaxData
+        }else if (item.IsAxis===2){ // 右2轴
+            hasRightTwoAxis.value=true
+            item.min=data[temYRightTwoIndex].MinData
+            item.max=data[temYRightTwoIndex].MaxData
+            axisLimitData.rightTwoMin=data[temYRightTwoIndex].MinData
+            axisLimitData.rightTwoMax=data[temYRightTwoIndex].MaxData
         }else{
             hasRightAxis.value=true
 
@@ -478,15 +494,18 @@ const setStackOrCombinChart = data => {
 
     let temYLeftArr=[]
     let temYRightArr=[]
-    let temYLeftIndex,temYRightIndex;
+    let temYRightTwoArr = []
+    let temYLeftIndex,temYRightIndex,temYRightTwoIndex;
 
     let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
 
+    //有右二轴时排个序 按照左 右 右2的顺序
+    let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
 
-    data.forEach((item,index)=>{
+    newData.forEach((item,index)=>{
 
         //轴位置值相同的下标
-        let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);
+        let sameSideIndex = newData.findIndex(i => i.IsAxis === item.IsAxis);
 
         //堆叠图的yAxis必须一致 数据列所对应的y轴
         let serie_yIndex = index;
@@ -495,21 +514,24 @@ const setStackOrCombinChart = data => {
             serie_yIndex =  0;
         } else if(resData.value.ChartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
             // 组合图找第一个堆叠柱状或面积的作为公用
-            serie_yIndex = data.findIndex(i => i.ChartStyle === item.ChartStyle);
+            serie_yIndex = newData.findIndex(i => i.ChartStyle === item.ChartStyle);
         }
         //数据对应的y轴是公用轴则配置也共享
-        item.IsAxis = serie_yIndex === index ? item.IsAxis : data[serie_yIndex].IsAxis;
-        item.IsOrder = serie_yIndex === index ? item.IsOrder : data[serie_yIndex].IsOrder;
+        item.IsAxis = serie_yIndex === index ? item.IsAxis : newData[serie_yIndex].IsAxis;
+        item.IsOrder = serie_yIndex === index ? item.IsOrder : newData[serie_yIndex].IsOrder;
 
         temYLeftIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
-            ? (data[serie_yIndex].IsAxis ? serie_yIndex : -1)
-            : data.findIndex((item) => item.IsAxis);
+            ? (newData[serie_yIndex].IsAxis ? serie_yIndex : -1)
+            : data.findIndex((item) => item.IsAxis===1);
         temYRightIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
-            ? (data[serie_yIndex].IsAxis ? -1 : serie_yIndex)
+            ? (newData[serie_yIndex].IsAxis ? -1 : serie_yIndex)
             : data.findIndex((item) => !item.IsAxis);
+        temYRightTwoIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
+            ? -1
+            : data.findIndex((item) => item.IsAxis===2);
 
         let dynamic_title = item.EdbName;
-        let dynamic_arr = data.filter(
+        let dynamic_arr = newData.filter(
           (item) => dynamic_title === item.EdbName
         );
         //处理数据列name
@@ -552,6 +574,7 @@ const setStackOrCombinChart = data => {
                     return sameSideIndex !== index ? '' : ctx.value;
                 },
                 align: 'center',
+                x: [0,2].includes(item.IsAxis) ? 5 : -5,
                 y:5,
             },
             title: {
@@ -559,9 +582,9 @@ const setStackOrCombinChart = data => {
                 align: 'high',
                 rotation: 0,
                 y: -15,
-                offset: -(10 * item.Unit.length),
+                offset: 0,
             },
-            opposite: item.IsAxis === 0,
+            opposite: [0,2].includes(item.IsAxis),
             reversed: item.IsOrder,
             min: item.MinData,
             max: item.MaxData,
@@ -609,12 +632,18 @@ const setStackOrCombinChart = data => {
     
 
     yAxis.forEach(item=>{
-        if(item.IsAxis){//左轴
+        if(item.IsAxis === 1){//左轴
             hasLeftAxis.value=true
             item.min=data[temYLeftIndex].MinData
             item.max=data[temYLeftIndex].MaxData
             axisLimitData.leftMin=data[temYLeftIndex].MinData
             axisLimitData.leftMax=data[temYLeftIndex].MaxData
+        }else if (item.IsAxis===2){ // 右2轴
+            hasRightTwoAxis.value=true
+            item.min=data[temYRightTwoIndex].MinData
+            item.max=data[temYRightTwoIndex].MaxData
+            axisLimitData.rightTwoMin=data[temYRightTwoIndex].MinData
+            axisLimitData.rightTwoMax=data[temYRightTwoIndex].MaxData
         }else{
             hasRightAxis.value=true
             item.min=data[temYRightIndex].MinData
@@ -629,22 +658,29 @@ const setStackOrCombinChart = data => {
 
 /* 拼接数据列动态name */
 const setDyncmicSerieName = (item,dynamic_arr) => {
-    // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
-    let dynamic_tag =item.IsAxis && item.IsOrder && item.EdbInfoType
-        ? '(逆序)'
-        : !item.IsAxis && item.IsOrder && item.EdbInfoType
-        ? '(右轴,逆序)'
-        : !item.IsAxis && !item.IsOrder && item.EdbInfoType
-        ? '(右轴)'
-        : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
-        ? `(右轴,领先${item.LeadValue}${item.LeadUnit})`
-        : !item.IsAxis && item.IsOrder && !item.EdbInfoType
-        ? `(右轴,逆序,领先${item.LeadValue}${item.LeadUnit})`
-        : item.IsAxis && item.IsOrder && !item.EdbInfoType
-        ? `(逆序,领先${item.LeadValue}${item.LeadUnit})`
-        : item.IsAxis && !item.IsOrder && !item.EdbInfoType
-        ? `(领先${item.LeadValue}${item.LeadUnit})`
-        : '';
+    const { IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }  = item;
+    // IsAxis左轴1 右轴0 2右2轴 
+      //IsOrder正序false 逆序true 
+      //EdbInfoType是否是领先指标
+    const axisLabelMap = {
+        0: '右轴',
+        2: '右2轴'
+    }
+    const orderLabelMap = {
+        1: '逆序'
+    }
+    const edbInfoMap = {
+        0: '领先'
+    }
+
+    let axis_tag = axisLabelMap[IsAxis] || '';
+      //逆序拼接
+    let order_tag = orderLabelMap[Number(IsOrder)] ? `${axis_tag ? ',': ''}${orderLabelMap[Number(IsOrder)]}` : ''
+      //领先拼接
+    let edb_tag = edbInfoMap[EdbInfoType] ? `${(axis_tag||order_tag) ? ',' : '' }${edbInfoMap[EdbInfoType]}${LeadValue}${LeadUnit}` : '';
+
+    let dynamic_tag = (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : '';
+
     let temName = dynamic_arr.length > 1
                 ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
                 : `${item.EdbName}${dynamic_tag}`
@@ -660,6 +696,18 @@ const setDyncmicSerieName = (item,dynamic_arr) => {
     return temName
 }
 
+/* 指标顺序调整  IsAxis: 0右轴 1左轴 2右2*/
+const changeEdbOrder = (data) => {
+    // 左轴指标
+    let left_edbs = data.filter(_ => _.IsAxis===1);
+    //右轴指标
+    let right_edbs = data.filter(_ => !_.IsAxis);
+    // 右2轴指标
+    let right_two_edbs = data.filter(_ => _.IsAxis === 2);
+    // 按 左 右 右2顺序排列
+    return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
+}
+
 //设置季节图配置
 const setSeasonOpt=(data)=>{
     hasLeftAxis.value=true
@@ -1025,9 +1073,12 @@ watch(
         if(!showLimit.value) return
         console.log('极值改变');
         chartData.value.yAxis.forEach(item=>{
-            if(item.IsAxis){//左轴
+            if(item.IsAxis===1){//左轴
                 item.min=nval.leftMin
                 item.max=nval.leftMax
+            }else if(item.IsAxis===2){ //右2
+                item.min=nval.rightTwoMin
+                item.max=nval.rightTwoMax
             }else{
                 item.min=nval.rightMin
                 item.max=nval.rightMax
@@ -1399,12 +1450,19 @@ const posterParams=computed(()=>{
                         <span style="margin:0 10px">至</span>
                         <input type="number" v-model="axisLimitData.leftMin">
                     </p>
-                    <p v-if="hasRightAxis">
+                    <p v-if="hasRightAxis" style="margin-bottom:25px">
                         <span style="margin-right:35px">右轴</span>
                         <input type="number" v-model="axisLimitData.rightMax">
                         <span style="margin:0 10px">至</span>
                         <input type="number" v-model="axisLimitData.rightMin">
                     </p>
+                    <!-- 右2上下限 -->
+                    <p v-if="hasRightTwoAxis" style="margin-bottom:25px">
+                        <span style="margin-right:35px">右2轴</span>
+                        <input type="number" v-model="axisLimitData.rightTwoMax">
+                        <span style="margin:0 10px">至</span>
+                        <input type="number" v-model="axisLimitData.rightTwoMin">
+                    </p>
                 </div>
             </div>
         </Popup>