444 lines
13 KiB
JavaScript
444 lines
13 KiB
JavaScript
|
|
import { imageUrl060,imageUrl090,rule } from './dataUrl'
|
|
import imageUrl130 from './dataUrl1/zb130';
|
|
import imageUrl250 from './dataUrl1/zb250';
|
|
import imageUrl370 from './dataUrl1/zb370';
|
|
|
|
|
|
export default function jrxOptions(data = {}, type = "1",typeName='1') {
|
|
// const yMin = type == "1" ? 70 : type == "2" ? 70 : 70;
|
|
// const yMax = type == "1" ? 154 : type == "2" ? 150 : 150;
|
|
// const type1 = ["SY05", "SY06", "SY07", "SY08"]
|
|
// const type2 = ["SY09","SY10","SY11","SY12"]
|
|
// const alltype = type == "1" ? type1 : type == "2" ? type2 : type2;
|
|
// // 字体颜色
|
|
// const textColor = '#666'
|
|
// const imageUrl = type == "1" ? imageUrl060:
|
|
// type == "2" ? imageUrl090 : imageUrl090;
|
|
// const xValue = type == "1" ? (((data?.rz - 99) + 1.1 * 13) / 1.1):
|
|
// type == "2" ? (((data?.rz - 99) + 1 * 14) / 1) : (((data?.rz - 99) + 1 * 14) / 1)
|
|
// const rz = data?.rz ?
|
|
// [[xValue, data?.rz], [0, data?.rz], ] :
|
|
// []
|
|
// const rz1 = data?.rz ?
|
|
// type == "1" ?
|
|
// [[0, 99], [13, 99], [xValue, data?.rz]]:
|
|
// type == "2" ?
|
|
// [[0, 99], [14, 99], [xValue, data?.rz]]
|
|
// : [[0, 99], [14, 99], [xValue, data?.rz]]
|
|
// :
|
|
// []
|
|
// const gz1 = data[alltype[0]] ?
|
|
// type == "1" ? [[51.6, 85], [51.6, data[alltype[0]]]] :
|
|
// type == "2" ? [[47.5, 85], [47.5, data[alltype[0]]]] :
|
|
// [[47.5, 158], [85, data[alltype[0]]]]
|
|
// : [];
|
|
// const gz2 = data[alltype[1]] ?
|
|
// type == "1" ? [[53.6, 85], [53.6, data[alltype[1]]]] :
|
|
// type == "2" ? [[49.5, 85], [49.5, data[alltype[1]]]] :
|
|
// [[53.6, 158], [53.6, data[alltype[1]]]] :
|
|
// [];
|
|
|
|
// const gz3 = data[alltype[2]] ?
|
|
// type == "1" ? [[72.5, 90], [72.5, data[alltype[2]]]] :
|
|
// type == "2" ? [[66.5, 90], [66.5, data[alltype[2]]]] :
|
|
// [[73, 161], [73, data[alltype[2]]]] : [];
|
|
|
|
// const gz4 = data[alltype[3]] ?
|
|
// type == "1" ? [[84.5, 96], [84.5, data[alltype[3]]]] :
|
|
// type == "2" ? [[77, 96], [77, data[alltype[3]]]] :
|
|
// [[85, 166], [85, data[alltype[3]]]] : [];
|
|
|
|
// const line = data?.rz ?
|
|
// type == "1" ?
|
|
// [
|
|
// [xValue, data?.rz],
|
|
// [51.6, data[alltype[0]]],
|
|
// [53.6, data[alltype[1]]],
|
|
// [72.5, data[alltype[2]]],
|
|
// [84.5, data[alltype[3]]]
|
|
// ] :
|
|
// type == "2" ?
|
|
// [
|
|
// [xValue, data?.rz],
|
|
// [47.5, data[alltype[0]]],
|
|
// [49.5, data[alltype[1]]],
|
|
// [66.5, data[alltype[2]]],
|
|
// [77, data[alltype[3]]]
|
|
// ] :
|
|
// [
|
|
// [xValue, data?.rz],
|
|
// [51.6, data[alltype[0]]],
|
|
// [53.6, data[alltype[1]]],
|
|
// [73, data[alltype[2]]],
|
|
// [85, data[alltype[3]]]
|
|
// ]
|
|
// : []
|
|
|
|
const yMin = type == "3" ? 70 : type == "2" ? 67 :
|
|
type == '1' ? 58 : 70;
|
|
const yMax = type == "3" ? 129 : type == "2" ? 117
|
|
: type == "1" ? 118 : 150;
|
|
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"];
|
|
const alltype = typeName == "1" ? type1 :
|
|
typeName == "2" ? type2 :
|
|
typeName == "3" ? type3 :
|
|
typeName == "4" ? type4 :
|
|
typeName == "5" ? type5 :
|
|
typeName == "6" ? type6 :[]
|
|
;
|
|
|
|
// 字体颜色
|
|
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 - 87) + 0.67 * 10) / 0.67) :
|
|
(((data?.rz - 99) + 1 * 14) / 1)
|
|
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, 99], [14, 99], [xValue, data?.rz]]
|
|
:
|
|
[]
|
|
// gz1、gz2、gz3、gz4分别为渗压管
|
|
const gz1 = data[alltype[0]] ?
|
|
type == "3" ? [[52, typeName =='5' ?76.56:92.18], [52, data[alltype[0]]]] :
|
|
type == "2" ? [[52, typeName =='3' ?76.16:77.18], [52, data[alltype[0]]]] :
|
|
type == "1" ? [[49, typeName =='1' ?79.16:77.18], [49, data[alltype[0]]]] :
|
|
[[47.5, 158], [85, data[alltype[0]]]]
|
|
: [];
|
|
|
|
const gz2 = data[alltype[1]] ?
|
|
type == "3" ? [[57, typeName =='5' ?77.18:83.50], [57, data[alltype[1]]]] :
|
|
type == "2" ? [[55, typeName =='3' ?77.18:77.50], [55, data[alltype[1]]]] :
|
|
type == "1" ? [[57, typeName =='1' ?77.18:74.5], [57, data[alltype[1]]]] :
|
|
[[53.6, 158], [53.6, data[alltype[1]]]] :
|
|
[];
|
|
|
|
const gz3 = data[alltype[2]] ?
|
|
type == "3" ? [[65, 81.50], [65, data[alltype[2]]]] :
|
|
type == "2" ? [[63, 80.50], [63, data[alltype[2]]]] :
|
|
type == "1" ? [[67, 66.50], [79, data[alltype[2]]]] :
|
|
[[73, 161], [73, data[alltype[2]]]] : [];
|
|
|
|
|
|
const gz4 = data[alltype[3]] ?
|
|
type == "3" ? [] :
|
|
type == "2" ? [[87, 73.50], [87, data[alltype[3]]]] :
|
|
type == "1" ? [[89, 72.50], [89, data[alltype[3]]]] :
|
|
[[85, 166], [85, data[alltype[3]]]] : [];
|
|
|
|
// 将渗压管连起来的线
|
|
const line = data?.rz ?
|
|
type == "3" ?
|
|
[
|
|
[xValue, data?.rz],
|
|
[52, data[alltype[0]]],
|
|
[57, data[alltype[1]]],
|
|
[65, data[alltype[2]]],
|
|
|
|
] :
|
|
type == "2" ?
|
|
[
|
|
[xValue, data?.rz],
|
|
[52, data[alltype[0]]],
|
|
[55, data[alltype[1]]],
|
|
[63, data[alltype[2]]],
|
|
[87, data[alltype[3]]]
|
|
] :
|
|
type == "1" ?
|
|
[
|
|
[xValue, data?.rz],
|
|
[49, data[alltype[0]]],
|
|
[57, data[alltype[1]]],
|
|
[67, data[alltype[2]]],
|
|
[89, data[alltype[3]]]
|
|
] :
|
|
[
|
|
[xValue, data?.rz],
|
|
[51.6, data[alltype[0]]],
|
|
[53.6, data[alltype[1]]],
|
|
[73, 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: '#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,
|
|
itemStyle: {
|
|
color: '#5487FF'
|
|
},
|
|
lineStyle: {
|
|
color: '#5487FF',
|
|
},
|
|
data: filteredArray
|
|
},
|
|
]
|
|
}
|
|
return {
|
|
eopts,
|
|
chartData
|
|
}
|
|
} |