535 lines
17 KiB
JavaScript
535 lines
17 KiB
JavaScript
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
|
||
},
|
||
]
|
||
};
|
||
|
||
} |