tsg-app/pages/aqjc/jrxOptions.js

import { imageUrl060,imageUrl090,rule } from './dataUrl'
import imageUrl130 from './dataUrl1/zb130';
import imageUrl250 from './dataUrl1/zb250';
import imageUrl370 from './dataUrl1/zb370';
import imageUrl010 from './dataUrl1/fb010';
import pieMonth from "./pieMonth";


export default function jrxOptions(data = {}, type = "1", typeName = '1') {
   
    const yMin = type == "3" ? 70 : type == "2" ? 67 : 
                  type == '1' ? 58 : 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 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 - 87) + 0.67 * 10) / 0.67) :
            (((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], [4, 86], [xValue, data?.rz]] :
         type == "2" ?
            [[0, 87], [6, 87], [xValue, data?.rz]]
            :
            type == "1" ?
            [[0, 87], [8, 87], [xValue, data?.rz]]
            :
           [[0, 102], [4, 102], [xValue, data?.rz]]
      :
      []
   // gz1、gz2、gz3、gz4分别为渗压管
   // const gz1 = data[alltype[0]] ?
   //    type == "3" ? [[typeName =='5' ?52:57, typeName =='5' ?90.50:81.85], [typeName =='5' ?52:57, data[alltype[0]]]] :
   //       type == "2" ? [[typeName =='3' ?50:55, typeName =='3' ?84.41:83.78], [typeName =='3' ?50:55, data[alltype[0]]]] :
   //       type == "1" ? [[typeName =='1' ?49:57, typeName =='1' ?80.11:78.64], [typeName =='1' ?49:57, data[alltype[0]]]] :
   //          [[62, typeName =='7'?109.08:108.77], [62, data[alltype[0]]]]
   //    : [];
   
   // const gz2 = data[alltype[1]] ?
   //    type == "3" ? [[typeName =='5' ?57:71, typeName =='5' ?90.94:84.85], [typeName =='5' ?57:71, data[alltype[1]]]] :
   //       type == "2" ? [[typeName =='3' ?55:68, typeName =='3' ?84.04:81.05], [typeName =='3' ?55:68, data[alltype[1]]]] :
   //       type == "1" ? [[typeName =='1' ?57:67, typeName =='1' ?78.61:82.75], [typeName =='1' ?57:67, data[alltype[1]]]] :
   //          [[72, typeName =='7'?109.32:109.36], [72, data[alltype[1]]]] :
   //    [];

   // const gz3 = data[alltype[2]] ?
   //    type == "3" ? [[71, 92.65], [71, data[alltype[2]]]] :
   //       type == "2" ? [[68, 83.93], [68, data[alltype[2]]]] :
   //       type == "1" ? [[67, 81.38], [67, data[alltype[2]]]] :
   //          [[87, typeName =='7'?109.01:108.87], [87, data[alltype[2]]]] : [];
   
   
   // const gz4 = data[alltype[3]] ?
   //    type == "3" ? [] :
   //       type == "2" ? [[91,79.57], [91, data[alltype[3]]]] :
   //       type == "1" ? [[89, 79.09], [89, data[alltype[3]]]] :
   //             [[85, 166], [85, data[alltype[3]]]] : [];
   
    // 心墙中心两点（插入到连线中）
   const xCenter = type === "3" ? 54 : (type === "2" ? 52.5: (type === "1" ? 53 : 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' ?52:57)
             : type == "2" ? (typeName =='3' ? 50:55)
             : type == "1" ? (typeName =='1' ?49:57)
             : 60;

    const x2 = type == "3" ? (typeName =='5' ?57:71)
             : type == "2" ? (typeName =='3' ?55:68)
             : type == "1" ? (typeName =='1' ?57:69)
             : 74;

    const x3 = type == "3" ? 71
             : type == "2" ? 68
             : type == "1" ? 69
             : 87;

    const x4 = type == "3" ? null
             : type == "2" ? 91
             : type == "1" ? 92
            : 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]] : [];

   
   // 将渗压管连起来的线
   const line = data?.rz ?
      type == "3" ?
         [
            [xValue, data?.rz],
            ...(rightSideOnly ? midPts : []),
            [typeName == '6' ? 57 : 52, data[alltype[0]]],
            ...(!rightSideOnly ? midPts : []),
            [typeName =='6' ?71:57, data[alltype[1]]],
            [71, data[alltype[2]]],
           
         ] :
         type == "2" ?
            [
               [xValue, data?.rz],
               ...(rightSideOnly ? midPts : []),
               [typeName == '3' ? 50 : 55, data[alltype[0]]],
               ...(!rightSideOnly ? midPts : []),
               [typeName =='3' ?55:69, data[alltype[1]]],
               [68, data[alltype[2]]],
               [91, data[alltype[3]]]
            ] :
            type == "1" ?
               [
                  [xValue, data?.rz],
                   ...(rightSideOnly ? midPts : []),
                  [typeName == '1' ? 49 : 57, data[alltype[0]]],
                   ...(!rightSideOnly ? midPts : []),
                  [typeName =='1' ?57:69, data[alltype[1]]],
                  [68, data[alltype[2]]],
                  [92, data[alltype[3]]]
               ] :
               [
                  [xValue, data?.rz],
                   ...(rightSideOnly ? midPts : []),
                  [60, data[alltype[0]]],
                     ...(!rightSideOnly ? midPts : []),
                  [74, data[alltype[1]]],
                  [87, data[alltype[2]]],
                  [85, data[alltype[3]]]
               ]
      : [];
   const filteredArray = line.filter(subArray => {
    return subArray.every(item => item !== null && item !== undefined);
   });
   let eopts = {
      toolbox: {
         show: true,
         feature: {
           saveAsImage: {
             show: true,
             excludeComponents: ['toolbox'],
             pixelRatio: 2,
             name:"测值图"
           },
         },
         right: "10%",
         top:"4%"
       },
     graphic: [
         {
           type: 'image',
           left: '5%',
           top: 0,
           bottom:0,
           z: 1,
           bounding: 'raw',
           style: {
             image: imageUrl,
             width: 1310,
             height: 380
           }
         },
         {
             type: 'image',
           //   id: 'background',
             left: '5%',
             bottom:"5%",
             z: 1,
             bounding: 'all',
             style: {
               image: rule,
               width: 10,
               height: 450
             }
           }
       ],
    grid: {
        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,
          showMinLabel: false,
          showMaxLabel: false
       },
       axisLine: {
          show: false
       },
       axisTick: {
          // y轴刻度线
          show: false
       },
       splitLine: {
          // 网格
          show: false,
          lineStyle: {
             color: '#CCCCCC',
             type: 'dashed'
          }
       }
    },
   }
   let chartData = {
      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: true, // 是否显示标签
                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
          },
     ]
   }
   return {
      eopts,
      chartData
    }
}