tsg-web/src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js

import pieMonth from "./pieMonth";
export default function jrxOptions(data = {}, type = "1", typeName = '1') {
   // debugger
   console.log("data", data);
   // data.rz = 112
   // 根据断面类型确定y轴刻度以及最大和最小
   const yMin = type == "3" ? 70 : type == "2" ? 67 :
      type == '1' ? 59 : 99;
   const yMax = type == "3" ? 129 : type == "2" ? 117
      : type == "1" ? 118 : 116;

   // 断面上的渗压管
   const type1 = ["UPD1", "UPD4", "UPD7", "UPD16"];
   const type2 = ["UPD10", "UPD13"];
   const type3 = ["UPD2", "UPD5", "UPD8", "UPD17"];
   const type4 = ["UPD11", "UPD14"];
   const type5 = ["UPD3", "UPD6", "UPD12"];
   const type6 = ["UPD9", "UPD15"];
   const type7 = ["UPD24", "UPD26", "UPD28"];  //UPD24:109.87,UPD26:109.75,UPD28:109.43
   const type8 = ["UPD25", "UPD27", "UPD29"];  //UPD25:109.87,UPD27:109.75,UPD29:109.43

   // 管底高程
   const alltype = typeName == "1" ? type1 :
      typeName == "2" ? type2 :
         typeName == "3" ? type3 :
            typeName == "4" ? type4 :
               typeName == "5" ? type5 :
                  typeName == "6" ? type6 :
                     typeName == "7" ? type7 :
                        typeName == "8" ? type8 :
                           [];
   // 字体颜色
   const textColor = '#666'
   const imageUrl370 = `${process.env.PUBLIC_URL}/assets/images/zb370.png `
   const imageUrl250 = `${process.env.PUBLIC_URL}/assets/images/zb250.png `
   const imageUrl130 = `${process.env.PUBLIC_URL}/assets/images/zb130.png `
   const imageUrl010 = `${process.env.PUBLIC_URL}/assets/images/fb010.png `
   const imageUrl = type == "1" ? imageUrl130 :
      type == "2" ? imageUrl250 :
         type == "3" ? imageUrl370 : imageUrl010
      ;
   const rule = `${process.env.PUBLIC_URL}/assets/images/ruler.png `

   // rz 是最上面那条线  rz1是那条贴近坝面的线 xValue求解的是最上面那条线的末尾横坐标
   const xValue = type == "3" ? (((data?.rz - 86) + 0.6 * 5) / 0.6) :
      type == "2" ? (((data?.rz - 87) + 0.63 * 7) / 0.63) :
         type == "1" ? (((data?.rz - 88) + 0.7 * 10) / 0.7) :
            (((data?.rz - 102) + 0.25 * 4) / 0.25)
   const rz = data?.rz ?
      [[xValue, data?.rz], [0, data?.rz]] :
      []
   const rz1 = data?.rz ?
      type == "3" ?
         [[0, 86], [5, 86], [xValue, data?.rz]] :
         type == "2" ?
            [[0, 87], [7, 87], [xValue, data?.rz]]
            :
            type == "1" ?
               [[0, 88], [10, 88], [xValue, data?.rz]]
               :
               [[0, 102], [4, 102], [xValue, data?.rz]]
      : [];
   // gz1、gz2、gz3、gz4分别为渗压管

   // const gz1 = data[alltype[0]] ?
   //    type == "3" ? [[typeName == '5' ? 47 : 51, typeName == '5' ? 90.50 : 81.85], [typeName == '5' ? 47 : 51, data[alltype[0]]]] :
   //       type == "2" ? [[typeName == '3' ? 45.5 : 50, typeName == '3' ? 84.41 : 83.78], [typeName == '3' ? 45.5 : 50, data[alltype[0]]]] :
   //          type == "1" ? [[typeName == '1' ? 44 : 51.5, typeName == '1' ? 80.11 : 78.64], [typeName == '1' ? 44 : 51.5, data[alltype[0]]]] :
   //             [[55, typeName == '7' ? 109.08 : 108.77], [55, data[alltype[0]]]]
   //    : [];


   // const gz2 = data[alltype[1]] ?
   //    type == "3" ? [[typeName == '5' ? 51 : 62, typeName == '5' ? 90.94 : 84.85], [typeName == '5' ? 51 : 62, data[alltype[1]]]] :
   //       type == "2" ? [[typeName == '3' ? 50 : 61, typeName == '3' ? 84.04 : 81.05], [typeName == '3' ? 50 : 61, data[alltype[1]]]] :
   //          type == "1" ? [[typeName == '1' ? 51.5 : 58, typeName == '1' ? 78.61 : 82.75], [typeName == '1' ? 51.5 : 58, data[alltype[1]]]] :
   //             [[65, typeName == '7' ? 109.32 : 109.36], [65, data[alltype[1]]]] :
   //    [];

   // const gz3 = data[alltype[2]] ?
   //    type == "3" ? [[62, 92.65], [62, data[alltype[2]]]] :
   //       type == "2" ? [[61, 83.93], [61, data[alltype[2]]]] :
   //          type == "1" ? [[58, 81.38], [58, data[alltype[2]]]] :
   //             [[77, typeName == '7' ? 109.01 : 108.87], [77, data[alltype[2]]]] : [];


   // const gz4 = data[alltype[3]] ?
   //    type == "3" ? [] :
   //       type == "2" ? [[79, 79.57], [79, data[alltype[3]]]] :
   //          type == "1" ? [[79, 79.09], [79, data[alltype[3]]]] :
   //             [[85, 166], [85, data[alltype[3]]]] : [];

   // 心墙中心两点（插入到连线中）
   const xCenter = type === "3" ? 49 : (type === "2" ? 47.5 : (type === "1" ? 47.5 : 60));
   // 简化规则：typeName 为 2/4/6 → 渗压管都在右侧；FB0+010/FB0+030（typeName 为 7/8）不绘制心墙连线
   const rightSideOnly = ['2', '4', '6'].includes(typeName);
   const skipCenterLine = ['7', '8'].includes(typeName);

   // 左/右管取值（右侧优先 alltype[0]，无则 alltype[1]）
   const leftSyg = rightSideOnly ? undefined : data[alltype[0]];
   const rightSyg = rightSideOnly ? (data[alltype[0]] ?? data[alltype[1]]) : data[alltype[1]];

   let midPts = [];
   if (!skipCenterLine && data?.rz) {
      if (leftSyg !== undefined && leftSyg !== null) {
         const A = leftSyg - 1;
         const B = (rightSyg !== undefined && rightSyg !== null) ? (rightSyg + 0.5) : undefined;
         if (B !== undefined) {
            if (A > B) {
               midPts = [[xCenter, A], [xCenter, B]];
            } else {
               midPts = [[xCenter, leftSyg], [xCenter, rightSyg]];
            }
         }
      } else if (rightSyg !== undefined && rightSyg !== null) {
         // 左边无渗压管：第一个点为（X, 水位-1），第二个点为（X, 右管+0.5）
         midPts = [[xCenter, data.rz - 1], [xCenter, rightSyg + 0.5]];
      }
   }
   

    const baseY1 = type == "3" ? (typeName =='5' ?90.50:81.85)
                  : type == "2" ? (typeName =='3' ?84.41:83.78)
                  : type == "1" ? (typeName =='1' ?80.11:78.64)
                  : (typeName =='7'?109.08:108.77);

    const baseY2 = type == "3" ? (typeName =='5' ?90.94:84.85)
                  : type == "2" ? (typeName =='3' ?84.04:81.05)
                  : type == "1" ? (typeName =='1' ?78.61:82.75)
                  : (typeName =='7'?109.32:109.36);

    const baseY3 = type == "3" ? 92.65
                  : type == "2" ? 83.93
                  : type == "1" ? 81.38
                  : (typeName =='7'?109.01:108.87);

    const baseY4 = type == "3" ? null
                  : type == "2" ? 79.57
                  : type == "1" ? 79.09
                  : 166;

    // 各管的 X（取你原来的 X）
    const x1 = type == "3" ? (typeName =='5' ?47:51)
             : type == "2" ? (typeName =='3' ? 45.5:50)
             : type == "1" ? (typeName =='1' ?44:51.5)
             : 53.5;

    const x2 = type == "3" ? (typeName =='5' ?51:63)
             : type == "2" ? (typeName =='3' ?50:61)
             : type == "1" ? (typeName =='1' ?51.5:61)
             : 66;

    const x3 = type == "3" ? 63
             : type == "2" ? 61
             : type == "1" ? 61
             : 77;

    const x4 = type == "3" ? null
             : type == "2" ? 79
             : type == "1" ? 81
            : 85;
   
   
    // 管口高程（可能为空）
    const mouth1 = pieMonth[alltype[0]];
    const mouth2 = pieMonth[alltype[1]];
    const mouth3 = pieMonth[alltype[2]];
    const mouth4 = pieMonth[alltype[3]];

    // 蓝色段：从“管口（若有）/管底”到 UPD 值
    const gz1 = data[alltype[0]] ? [[x1, baseY1], [x1, data[alltype[0]]]] : [];
    const gz2 = data[alltype[1]] ? [[x2, baseY2], [x2, data[alltype[1]]]] : [];
    const gz3 = data[alltype[2]] ? [[x3, baseY3], [x3, data[alltype[2]]]] : [];
    const gz4 = data[alltype[3]] && x4 !== null ? [[x4, baseY4], [x4, data[alltype[3]]]] : [];

    // 灰色段：从“管底”到“管口”（仅当 mouth 存在）
    const gk1 = (mouth1 !== null && mouth1 !== undefined) ? [[x1, baseY1], [x1, mouth1]] : [];
    const gk2 = (mouth2 !== null && mouth2 !== undefined) ? [[x2, baseY2], [x2, mouth2]] : [];
    const gk3 = (mouth3 !== null && mouth3 !== undefined) ? [[x3, baseY3], [x3, mouth3]] : [];
    const gk4 = (mouth4 !== null && mouth4 !== undefined && x4 !== null) ? [[x4, baseY4], [x4, mouth4]] : [];
    
   // 将渗压管连起来的线（插入 midPts）
   const line = data?.rz ?
      type == "3" ?
         [
            [xValue, data?.rz],
            ...(rightSideOnly ? midPts : []),
            [typeName == '5' ? 47 : 51, data[alltype[0]]],
            ...(!rightSideOnly ? midPts : []),
            [typeName == '5' ? 51 : 63, data[alltype[1]]],
            [63, data[alltype[2]]],
         ] :
         type == "2" ?
            [
               [xValue, data?.rz],
               ...(rightSideOnly ? midPts : []),
               [typeName == '3' ? 45.5 : 50, data[alltype[0]]],
               ...(!rightSideOnly ? midPts : []),
               [typeName == '3' ? 50 : 61, data[alltype[1]]],
               [61, data[alltype[2]]],
               [79, data[alltype[3]]]
            ] :
            type == "1" ?
               [
                  [xValue, data?.rz],
                  ...(rightSideOnly ? midPts : []),
                  [typeName == '1' ? 44 : 51.5, data[alltype[0]]],
                  ...(!rightSideOnly ? midPts : []),
                  [typeName == '1' ? 51.5 : 61, data[alltype[1]]],
                  [61, data[alltype[2]]],
                  [81, data[alltype[3]]]
               ] :
               [
                  [xValue, data?.rz],
                  ...(rightSideOnly ? midPts : []),
                  [53.5, data[alltype[0]]],
                  ...(!rightSideOnly ? midPts : []),
                  [66, data[alltype[1]]],
                  [77, data[alltype[2]]],
                  [85, data[alltype[3]]]
               ]
      : []
   const filteredArray = line.filter(subArray => {
      return subArray.every(item => item !== null && item !== undefined);
   });


   return {
      toolbox: {
         show: true,
         feature: {
            saveAsImage: {
               show: true,
               excludeComponents: ['toolbox'],
               pixelRatio: 2,
               name: "测值图"
            },
         },
         right: "10%",
         top: "4%"
      },
      // title: {
      //    show: true,
      //    text: "断面名称",
      //    left: 'center',
      //    bottom: '-5%',
      //    // textStyle: {
      //  },
      graphic: [
         {
            type: 'image',
            //   id: 'background',
            left: 'center',
            // top: '11%',
            top: 0,
            bottom: 0,
            z: 1,
            bounding: 'all',
            style: {
               image: imageUrl,
               width: 1100,
               height: 380
            }
         },
         {
            type: 'image',
            //   id: 'background',
            left: '7%',
            bottom: "5%",
            z: 1,
            bounding: 'all',
            style: {
               image: rule,
               width: 10,
               height: 450
            }
         }
      ],
      grid: {
         //   top: '10%',
         //   left: '2%',
         //   right: '5%',
         //   bottom: '10%',
         //    containLabel: true
         top: '0%',
         left: '2%',
         right: '5%',
         bottom: '0%',
         containLabel: true
      },
      xAxis: {
         min: 0,
         max: 100,
         axisLabel: {
            show: false,
            // 坐标轴字体颜色
            color: textColor,
            fontSize: 18
         },
         axisLine: {
            show: false,
            lineStyle: {
               color: textColor
            }
         },
         axisTick: {
            // y轴刻度线
            show: false
         },
         splitLine: {
            // 网格
            show: false
         },
         boundaryGap: false
      },
      yAxis: {
         type: 'value',
         min: yMin,
         max: yMax,
         interval: 5,
         //   data:[155,160,180,190,210],
         nameTextStyle: {
            color: '#333',
            fontSize: 18,
            padding: [0, 0, 0, 80]
         },
         axisLabel: {
            // 坐标轴字体颜色
            color: textColor,
            fontSize: 18,
            formatter: function (value, index, i) {
               if (index === 0 || value === yMax) {
                  return ''; // 隐藏第一个刻度和最后一个刻度
               } else {
                  return value; // 显示其他刻度
               }
            }
         },
         axisLine: {
            show: false
         },
         axisTick: {
            // y轴刻度线
            show: false
         },
         splitLine: {
            // 网格
            show: false,
            lineStyle: {
               color: '#CCCCCC',
               type: 'dashed'
            }
         }
      },

      series: [
         //  和大坝坡面重合的线 斜率为0.75 
         {

            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: {
               color: '#fff'
            },
            lineStyle: {
               color: '#fff'
            },
            areaStyle: {
               origin: "end",
               color: 'rgba(0, 128, 255, 0.3)' // 设置区域填充颜色
            },
            data: [...rz, ...rz1]

         },
         {

            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: {
               color: '#5487FF'
            },
            lineStyle: {
               color: '#5487FF'
            },
            markPoint: {
               data: [{ type: 'max', x: "20%", coord: [xValue, data?.rz] }],
               symbol: 'pin',
               symbolSize: [30, 10],
               itemStyle: {
                  color: '#fff', // 标注点颜色
                  borderColor: '#ffa500', // 标注点边框颜色
                  borderWidth: 0 // 标注点边框宽度
               },
               label: {
                  show: data?.rz ? true : false, // 是否显示标签
                  formatter: "库水位" + data?.rz + "m", // 标签格式
                  color: '#5487FF', // 标签文字颜色
                  fontSize: 12, // 标签文字大小
               }
            },
            data: rz
         },
         {

            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: {
               color: '#5487FF'
            },
            lineStyle: {
               color: '#5487FF'
            },
            data: rz1
         },
         {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: { color: 'rgba(154, 160, 166,.4)' },
            lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
            data: gk1
        },
        {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: { color: 'rgba(154, 160, 166,.4)' },
            lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
            data: gk2
        },
        {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: { color: 'rgba(154, 160, 166,.4)' },
            lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
            data: gk3
        },
        {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: { color: 'rgba(154, 160, 166,.4)' },
            lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
            data: gk4
        },
         // 管位
         {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: {
               color: '#5487FF'
            },
            lineStyle: {
               color: '#5487FF',
               width: 6
            },
            data: gz1
         },
         {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: {
               color: '#5487FF'
            },
            lineStyle: {
               color: '#5487FF',
               width: 6
            },
            data: gz2
         },
         {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: {
               color: '#5487FF'
            },
            lineStyle: {
               color: '#5487FF',
               width: 6
            },
            data: gz3
         },
         {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            itemStyle: {
               color: '#5487FF'
            },
            lineStyle: {
               color: '#5487FF',
               width: 6
            },
            data: gz4
         },
         // 管位连接线
         {
            type: 'line',
            symbol: 'none',
            symbolSize: 10,
            z: 1,
            //  smooth: 0.6, // 设置平滑度
            // smoothMonotone: 'x', // 保持 x 方向的单调性
            itemStyle: {
               color: '#5487FF'
            },
            lineStyle: {
               color: '#5487FF',
               width: 2,
               //  curveness: 0.5 // 增加曲线程度
            },
            data: filteredArray
         },
      ]
   };

}