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

382 lines
10 KiB
JavaScript
Raw Normal View History

2024-09-20 15:02:50 +08:00
2025-03-25 17:18:21 +08:00
export default function jrxOptions(data = {}, type = "1",typeName='1') {
// debugger
2025-03-20 17:54:34 +08:00
const yMin = type == "3" ? 70 : type == "2" ? 67 :
type == '1' ? 59 : 70;
const yMax = type == "3" ? 129 : type == "2" ? 117
: type == "1" ? 118 : 150;
2025-09-22 17:41:10 +08:00
const type1 = ["UPD1", "UPD4", "UPD10", "UPD16"];
const type2 = ["UPD7", "UPD13"];
const type3 = ["UPD2", "UPD5", "UPD8", "UPD17"];
const type4 = ["UPD11", "UPD14"];
const type5 = ["UPD3", "UPD6", "UPD9"];
const type6 = ["UPD12", "UPD15"];
2025-03-25 17:18:21 +08:00
const alltype = typeName == "1" ? type1 :
typeName == "2" ? type2 :
typeName == "3" ? type3 :
typeName == "4" ? type4 :
typeName == "5" ? type5 :
typeName == "6" ? type6 :[]
;
2025-03-20 17:54:34 +08:00
// 字体颜色
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 : imageUrl370
;
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 - 99) + 1 * 14) / 1)
2024-09-20 15:02:50 +08:00
const rz = data?.rz ?
2025-03-20 17:54:34 +08:00
[[xValue, data?.rz], [0, data?.rz],] :
2024-09-20 15:02:50 +08:00
[]
2024-10-21 11:13:02 +08:00
const rz1 = data?.rz ?
2025-03-20 17:54:34 +08:00
type == "3" ?
[[0, 86], [5, 86], [xValue, data?.rz]] :
2024-10-21 11:13:02 +08:00
type == "2" ?
2025-03-20 17:54:34 +08:00
[[0, 87], [7, 87], [xValue, data?.rz]]
:
type == "1" ?
[[0, 88], [10, 88], [xValue, data?.rz]]
:
[[0, 99], [14, 99], [xValue, data?.rz]]
:
2024-09-20 15:02:50 +08:00
[]
2025-03-20 17:54:34 +08:00
// gz1、gz2、gz3、gz4分别为渗压管
2024-10-21 11:13:02 +08:00
const gz1 = data[alltype[0]] ?
2025-09-24 16:28:43 +08:00
type == "3" ? [[47, 75], [47, data[alltype[0]]]] :
type == "2" ? [[45.5, 70], [45.5, data[alltype[0]]]] :
type == "1" ? [[44, 70], [44, data[alltype[0]]]] :
2024-10-21 11:13:02 +08:00
[[47.5, 158], [85, data[alltype[0]]]]
2024-09-20 15:02:50 +08:00
: [];
const gz2 = data[alltype[1]] ?
2025-09-24 16:28:43 +08:00
type == "3" ? [[51, 75], [51, data[alltype[1]]]] :
type == "2" ? [[50, 70], [50, data[alltype[1]]]] :
type == "1" ? [[51.5, 70], [51.5, data[alltype[1]]]] :
2025-03-20 17:54:34 +08:00
[[53.6, 158], [53.6, data[alltype[1]]]] :
2024-09-20 15:02:50 +08:00
[];
2025-03-20 17:54:34 +08:00
2024-09-20 15:02:50 +08:00
const gz3 = data[alltype[2]] ?
2025-09-24 16:28:43 +08:00
type == "3" ? [[58.5, 75], [58.5, data[alltype[2]]]] :
type == "2" ? [[58, 70], [58, data[alltype[2]]]] :
type == "1" ? [[58, 70], [58, data[alltype[2]]]] :
2024-09-20 15:02:50 +08:00
[[73, 161], [73, data[alltype[2]]]] : [];
2025-03-20 17:54:34 +08:00
2024-09-20 15:02:50 +08:00
const gz4 = data[alltype[3]] ?
2025-03-20 17:54:34 +08:00
type == "3" ? [] :
2025-09-24 16:28:43 +08:00
type == "2" ? [[77, 70], [77, data[alltype[3]]]] :
type == "1" ? [[79, 70], [79, data[alltype[3]]]] :
2024-09-20 15:02:50 +08:00
[[85, 166], [85, data[alltype[3]]]] : [];
2025-03-20 17:54:34 +08:00
// 将渗压管连起来的线
2024-09-20 15:02:50 +08:00
const line = data?.rz ?
2025-03-20 17:54:34 +08:00
type == "3" ?
[
[xValue, data?.rz],
[47, data[alltype[0]]],
[51, data[alltype[1]]],
[58.5, data[alltype[2]]],
2024-09-20 15:02:50 +08:00
] :
type == "2" ?
2025-03-20 17:54:34 +08:00
[
[xValue, data?.rz],
[45.5, data[alltype[0]]],
[50, data[alltype[1]]],
2025-03-25 17:18:21 +08:00
[58, data[alltype[2]]],
2025-03-20 17:54:34 +08:00
[77, data[alltype[3]]]
2024-09-20 15:02:50 +08:00
] :
2025-03-20 17:54:34 +08:00
type == "1"?
[
[xValue, data?.rz],
[44, data[alltype[0]]],
[51.5, data[alltype[1]]],
[58, data[alltype[2]]],
[79, data[alltype[3]]]
]:
2024-09-20 15:02:50 +08:00
[
[xValue, data?.rz],
[51.6, data[alltype[0]]],
[53.6, data[alltype[1]]],
[73, data[alltype[2]]],
[85, data[alltype[3]]]
2025-03-20 17:54:34 +08:00
]
: []
return {
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
excludeComponents: ['toolbox'],
pixelRatio: 2,
name: "测值图"
},
},
right: "10%",
top: "4%"
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
// title: {
// show: true,
// text: "断面名称",
// left: 'center',
// bottom: '-5%',
// // textStyle: {
// },
graphic: [
{
type: 'image',
// id: 'background',
left: 'center',
2024-09-20 15:02:50 +08:00
// top: '11%',
top: 0,
2025-03-20 17:54:34 +08:00
bottom: 0,
z: 1,
bounding: 'all',
style: {
image: imageUrl,
width: 1100,
height: 380
}
},
{
2024-09-20 15:02:50 +08:00
type: 'image',
2025-03-20 17:54:34 +08:00
// id: 'background',
2024-09-20 15:02:50 +08:00
left: '7%',
2025-03-20 17:54:34 +08:00
bottom: "5%",
2024-09-20 15:02:50 +08:00
z: 1,
bounding: 'all',
style: {
2025-03-20 17:54:34 +08:00
image: rule,
width: 10,
height: 450
2024-09-20 15:02:50 +08:00
}
}
2025-03-20 17:54:34 +08:00
],
grid: {
// top: '10%',
// left: '2%',
// right: '5%',
// bottom: '10%',
// containLabel: true
top: '0%',
left: '2%',
right: '5%',
bottom: '0%',
containLabel: true
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
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
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
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: {
// 网格
2025-03-28 17:33:56 +08:00
show: false,
2025-03-20 17:54:34 +08:00
lineStyle: {
color: '#CCCCCC',
type: 'dashed'
}
2024-09-20 15:02:50 +08:00
}
2025-03-20 17:54:34 +08:00
},
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]
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
{
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
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF'
},
data: rz1
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
// 管位
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
2024-09-20 15:02:50 +08:00
itemStyle: {
2025-03-20 17:54:34 +08:00
color: '#5487FF'
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
lineStyle: {
color: '#5487FF',
width: 6
},
data: gz1
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width: 6
},
data: gz2
2024-09-20 15:02:50 +08:00
},
2025-03-20 17:54:34 +08:00
{
2024-09-20 15:02:50 +08:00
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
2025-03-20 17:54:34 +08:00
color: '#5487FF',
width: 6
2024-09-20 15:02:50 +08:00
},
data: gz3
2025-03-20 17:54:34 +08:00
},
{
2024-09-20 15:02:50 +08:00
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
2025-03-20 17:54:34 +08:00
color: '#5487FF',
width: 6
2024-09-20 15:02:50 +08:00
},
data: gz4
2025-03-20 17:54:34 +08:00
},
// 管位连接线
{
2024-09-20 15:02:50 +08:00
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
2025-03-20 17:54:34 +08:00
color: '#5487FF',
2024-09-20 15:02:50 +08:00
},
data: line
2025-03-20 17:54:34 +08:00
},
]
};
2024-09-20 15:02:50 +08:00
}