feat():修改浸润线
parent
9198ccfa24
commit
d573f06534
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
|
|
@ -358,9 +358,9 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
|||
{
|
||||
id: id(), title: '维修养护', path: '/mgr/sg/wxyh',
|
||||
},
|
||||
{
|
||||
id: id(), title: '库容管理', path: '/mgr/sg/krgl',
|
||||
},
|
||||
// {
|
||||
// id: id(), title: '库容管理', path: '/mgr/sg/krgl',
|
||||
// },
|
||||
{
|
||||
id: id(), title: '值班管理', redirect: '/mgr/sg/zbgl/zbb',
|
||||
children: [
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ export default function Xmzlmb() {
|
|||
let name = dmList.find(s => s.id == code)?.projNm
|
||||
let type = name == "大坝B0+060" ? "1" :
|
||||
name == "大坝B0+090" ? "2" :
|
||||
name == "大坝B0+120" ? "2" : ''
|
||||
name == "大坝B0+120" ? "3" : ''
|
||||
setDbType(type)
|
||||
}
|
||||
}, [code])
|
||||
|
|
|
|||
|
|
@ -1,312 +1,258 @@
|
|||
|
||||
export default function jrxOptions(data = {}, type = "1") {
|
||||
// const yMin = type == "1" ? 147 : type == "2" ? 146 : 146;
|
||||
// const yMax = type == "1" ? 209 : type == "2" ? 210 : 210;
|
||||
const yMin = type == "1" ? 70 : type == "2" ? 70 : 70;
|
||||
const yMax = type == "1" ? 154 : type == "2" ? 150 : 150;
|
||||
const yMin = type == "3" ? 70 : type == "2" ? 67 :
|
||||
type == '1' ? 59 : 70;
|
||||
const yMax = type == "3" ? 129 : type == "2" ? 117
|
||||
: type == "1" ? 118 : 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 imageUrl060 = `${process.env.PUBLIC_URL}/assets/images/060.png `
|
||||
const imageUrl090 = `${process.env.PUBLIC_URL}/assets/images/090.png `
|
||||
const imageUrl = type == "1" ? imageUrl060 :
|
||||
type == "2" ? imageUrl090 : imageUrl090;
|
||||
const rule = `${process.env.PUBLIC_URL}/assets/images/ruler.png `
|
||||
// const xValue = type == "1" ? (((data?.rz - 169) + 0.75 * 14) / 0.75):
|
||||
// type == "2" ? (((data?.rz - 169) + 0.85 * 14) / 0.85) : (((data?.rz - 169) + 0.85 * 14) / 0.85)
|
||||
|
||||
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 type2 = ["SY09", "SY10", "SY11", "SY12"]
|
||||
const type3 = [ "SY11", "SY12","SY13"]
|
||||
const alltype = type == "1" ? type1 : type == "2" ? type2 : type3;
|
||||
|
||||
// 字体颜色
|
||||
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)
|
||||
const rz = data?.rz ?
|
||||
[[xValue, data?.rz], [0, data?.rz], ] :
|
||||
[[xValue, data?.rz], [0, data?.rz],] :
|
||||
[]
|
||||
const rz1 = data?.rz ?
|
||||
type == "1" ?
|
||||
[[0, 99], [13, 99], [xValue, data?.rz]]:
|
||||
type == "3" ?
|
||||
[[0, 86], [5, 86], [xValue, data?.rz]] :
|
||||
type == "2" ?
|
||||
[[0, 99], [14, 99], [xValue, data?.rz]]
|
||||
: [[0, 99], [14, 99], [xValue, data?.rz]]
|
||||
:
|
||||
[[0, 87], [7, 87], [xValue, data?.rz]]
|
||||
:
|
||||
type == "1" ?
|
||||
[[0, 88], [10, 88], [xValue, data?.rz]]
|
||||
:
|
||||
[[0, 99], [14, 99], [xValue, data?.rz]]
|
||||
:
|
||||
[]
|
||||
// gz1、gz2、gz3、gz4分别为渗压管
|
||||
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]]]] :
|
||||
type == "3" ? [[47, 101], [47, data[alltype[0]]]] :
|
||||
type == "2" ? [[45.5, 98], [45.5, data[alltype[0]]]] :
|
||||
type == "1" ? [[44, 83], [44, data[alltype[0]]]] :
|
||||
[[47.5, 158], [85, data[alltype[0]]]]
|
||||
: [];
|
||||
// const gz1 = [[51.6, 85],[51.6, 91]];
|
||||
// const gz2 = [[53.6, 85], [53.6, 94]];
|
||||
|
||||
// const gz3 = [[72.5, 90], [72.5, 95]];
|
||||
// const gz4 = [[84.5, 96], [84.5, 99]];
|
||||
|
||||
|
||||
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]]]] :
|
||||
type == "3" ? [[51, 101], [51, data[alltype[1]]]] :
|
||||
type == "2" ? [[50, 98], [50, data[alltype[1]]]] :
|
||||
type == "1" ? [[51.5, 82], [51.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]]]] :
|
||||
type == "3" ? [[58.5, 95], [58.5, data[alltype[2]]]] :
|
||||
type == "2" ? [[60, 97], [60, data[alltype[2]] || 105]] :
|
||||
type == "1" ? [[58, 81], [58, 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]]]] :
|
||||
type == "3" ? [] :
|
||||
type == "2" ? [[77, 96], [77, data[alltype[3]]]] :
|
||||
type == "1" ? [[79, 78], [79, 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 == "3" ?
|
||||
[
|
||||
[xValue, data?.rz],
|
||||
[47, data[alltype[0]]],
|
||||
[51, data[alltype[1]]],
|
||||
[58.5, data[alltype[2]]],
|
||||
|
||||
] :
|
||||
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],
|
||||
[45.5, data[alltype[0]]],
|
||||
[50, data[alltype[1]]],
|
||||
[55, data[alltype[2]] || 97],
|
||||
[77, data[alltype[3]]]
|
||||
] :
|
||||
type == "1"?
|
||||
[
|
||||
[xValue, data?.rz],
|
||||
[44, data[alltype[0]]],
|
||||
[51.5, data[alltype[1]]],
|
||||
[58, data[alltype[2]]],
|
||||
[79, data[alltype[3]]]
|
||||
]:
|
||||
[
|
||||
[xValue, data?.rz],
|
||||
[51.6, data[alltype[0]]],
|
||||
[53.6, data[alltype[1]]],
|
||||
[73, data[alltype[2]]],
|
||||
[85, data[alltype[3]]]
|
||||
]
|
||||
: []
|
||||
return {
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
excludeComponents: ['toolbox'],
|
||||
pixelRatio: 2,
|
||||
name:"测值图"
|
||||
},
|
||||
},
|
||||
right: "10%",
|
||||
top:"4%"
|
||||
]
|
||||
: []
|
||||
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',
|
||||
// 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%",
|
||||
bottom: 0,
|
||||
z: 1,
|
||||
bounding: 'all',
|
||||
style: {
|
||||
image: rule,
|
||||
width: 10,
|
||||
height: 450
|
||||
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
|
||||
grid: {
|
||||
// top: '10%',
|
||||
// left: '2%',
|
||||
// right: '5%',
|
||||
// bottom: '10%',
|
||||
// containLabel: true
|
||||
top: '0%',
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
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'
|
||||
xAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
// 坐标轴字体颜色
|
||||
color: textColor,
|
||||
fontSize: 18
|
||||
},
|
||||
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, // 标签文字大小
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: textColor
|
||||
}
|
||||
},
|
||||
data:rz
|
||||
},
|
||||
{
|
||||
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF'
|
||||
axisTick: {
|
||||
// y轴刻度线
|
||||
show: false
|
||||
},
|
||||
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
|
||||
},
|
||||
{
|
||||
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: true,
|
||||
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,
|
||||
|
|
@ -315,12 +261,84 @@ return {
|
|||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
width:6
|
||||
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: '#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,
|
||||
|
|
@ -329,13 +347,13 @@ return {
|
|||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
width:6
|
||||
color: '#5487FF',
|
||||
width: 6
|
||||
},
|
||||
data: gz4
|
||||
},
|
||||
// 管位连接线
|
||||
{
|
||||
},
|
||||
// 管位连接线
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
|
|
@ -344,11 +362,11 @@ return {
|
|||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
color: '#5487FF',
|
||||
},
|
||||
data: line
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,462 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { Row, Col, Form, Input, Divider, DatePicker, Button, Upload, message, Modal } from "antd"
|
||||
import { formItemLayout } from '../../../../../components/crud/FormLayoutProps'
|
||||
import './index.less'
|
||||
export default function BuildInfo() {
|
||||
const [form] = Form.useForm();
|
||||
const [skdisabled, setSkDisabled] = useState(true)
|
||||
const onFinish = async () => {
|
||||
|
||||
}
|
||||
return (
|
||||
<div className='basic-info-content'>
|
||||
<Form
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
>
|
||||
<div style={{ width: '100%', background: '#e7f4ff', padding: 8, marginBottom: 10, display: 'flex', alignItems: 'center' }}>
|
||||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 18 }} />
|
||||
<span style={{ fontWeight: 600 }}>主坝</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝型"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶高程(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶长度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶宽度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col><Col span={8}>
|
||||
<Form.Item
|
||||
label="最大坝高(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ width: '100%', background: '#e7f4ff', padding: 8, marginBottom: 10, display: 'flex', alignItems: 'center' }}>
|
||||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 18 }} />
|
||||
<span style={{ fontWeight: 600 }}>副坝</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝型"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶高程(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶长度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶宽度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col><Col span={8}>
|
||||
<Form.Item
|
||||
label="最大坝高(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ width: '100%', background: '#e7f4ff', padding: 8, marginBottom: 10, display: 'flex', alignItems: 'center' }}>
|
||||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 18 }} />
|
||||
<span style={{ fontWeight: 600 }}>溢洪道</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="堰顶型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="地基特性"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="溢流堰顶高程(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="溢流堰净宽(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="消能型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="校核洪水下泄流量(m3/s)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="设计洪水下泄流量(m3/s)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="消能防冲下泄流量(m3/s)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ width: '100%', background: '#e7f4ff', padding: 8, marginBottom: 10, display: 'flex', alignItems: 'center' }}>
|
||||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 18 }} />
|
||||
<span style={{ fontWeight: 600 }}>灌溉发电洞</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="衬砌型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="地基特性"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="进口底板高程(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="断面尺寸(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="洞长(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="设计流量(m3/s)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="进口闸门型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="进口启闭机型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ width: '100%', background: '#e7f4ff', padding: 8, marginBottom: 10, display: 'flex', alignItems: 'center' }}>
|
||||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 18 }} />
|
||||
<span style={{ fontWeight: 600 }}>放空洞</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="衬砌型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="地基特性"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="进口底板高程(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="断面尺寸(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="洞长(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="设计流量(m3/s)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="进口闸门型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col> <Col span={8}>
|
||||
<Form.Item
|
||||
label="进口启闭机型式"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ width: '100%', background: '#e7f4ff', padding: 8, marginBottom: 10, display: 'flex', alignItems: 'center' }}>
|
||||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 18 }} />
|
||||
<span style={{ fontWeight: 600 }}>拦洪坝</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝型"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶高程(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶长度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="坝顶宽度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col><Col span={8}>
|
||||
<Form.Item
|
||||
label="最大坝高(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ width: '100%', background: '#e7f4ff', padding: 8, marginBottom: 10, display: 'flex', alignItems: 'center' }}>
|
||||
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 18 }} />
|
||||
<span style={{ fontWeight: 600 }}>防汛道路</span>
|
||||
</div>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="防汛路长度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
label="路面宽度(m)"
|
||||
name="resName"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ marginTop: 80 }}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
wrapperCol={{ span: 14, offset: 10 }}
|
||||
>
|
||||
{
|
||||
skdisabled ? <Button type="primary" onClick={() => setSkDisabled(false)}>编辑</Button> :
|
||||
<div style={{ display: 'flex', columnGap: 20 }}>
|
||||
<Button onClick={() => setSkDisabled(true)}>取消</Button>
|
||||
<Button type="primary" onClick={() => { onFinish() }}>保存</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
.basic-info-container {
|
||||
background: #fff;
|
||||
.ant-descriptions {
|
||||
.ant-descriptions-header {
|
||||
margin-bottom: 16px;
|
||||
padding: 8px;
|
||||
border-left: 4px solid #1890ff;
|
||||
background-color: #e7f4ff;
|
||||
.ant-descriptions-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-descriptions-view {
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
.ant-descriptions-item {
|
||||
padding: 12px 24px;
|
||||
|
||||
.ant-descriptions-item-label {
|
||||
width: 160px;
|
||||
background: #fafafa;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-content {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-descriptions + .ant-descriptions {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
const descriptionsConfig = [
|
||||
{
|
||||
title: '主坝',
|
||||
column: 3,
|
||||
items: [
|
||||
{
|
||||
label: '坝型',
|
||||
key: 'bx'
|
||||
},
|
||||
{
|
||||
label: '坝顶高程',
|
||||
key: 'gc'
|
||||
},
|
||||
{
|
||||
label: '统一社会信用代码',
|
||||
key: 'creditCode2'
|
||||
}
|
||||
// ... 其他基础信息项
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '许可信息',
|
||||
column: 2,
|
||||
items: [
|
||||
{
|
||||
label: '取水证号',
|
||||
key: 'licenseNo'
|
||||
},
|
||||
{
|
||||
label: '取水项目名称',
|
||||
key: 'projectName'
|
||||
}
|
||||
// ... 其他许可信息项
|
||||
]
|
||||
}
|
||||
// ... 可以添加更多描述组
|
||||
];
|
||||
const dataconfig = {
|
||||
unitName: 'XX市老城区龙泉供水有限责任公司',
|
||||
creditCode: '915107242056002w',
|
||||
creditCode2: '91510724205600',
|
||||
licenseNo: 'B510705G2021-1061',
|
||||
projectName: 'XX市老城区龙泉供水有限责任公司',
|
||||
projectName2: 'XX市老城区龙泉供水',
|
||||
approvalOrg: 'XXXX省水利厅',
|
||||
waterType: '地下水',
|
||||
waterType2: '地下水',
|
||||
waterPurpose: '制水供水',
|
||||
yearAmount: '699',
|
||||
yearAmount2: '699'
|
||||
};
|
||||
export {descriptionsConfig,dataconfig} ;
|
||||
|
|
@ -7,6 +7,7 @@ import apiurl from '../../../../service/apiurl';
|
|||
import { httpget2, httppost2 } from '../../../../utils/request';
|
||||
import XlLine from './xlLine'
|
||||
import "./index.less"
|
||||
import BuildInfo from './buildInfo'
|
||||
export default function ShuikuBasicInfo() {
|
||||
const [tabVal, setTabVal] = useState('1')
|
||||
const [data,setData] =useState('')
|
||||
|
|
@ -36,6 +37,10 @@ export default function ShuikuBasicInfo() {
|
|||
className={tabVal === '2' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('2')}>主要特征参数
|
||||
</div>
|
||||
<div
|
||||
className={tabVal === '5' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('5')}>主要建筑物信息
|
||||
</div>
|
||||
<div
|
||||
className={tabVal === '3' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('3')}>水库库容曲线
|
||||
|
|
@ -44,10 +49,10 @@ export default function ShuikuBasicInfo() {
|
|||
className={tabVal === '4' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('4')}>水库泄流曲线
|
||||
</div>
|
||||
<div
|
||||
{/* <div
|
||||
className={tabVal === '5' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||||
onClick={() => setTabVal('5')}>月生态流量
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div
|
||||
className='shuiku-content'
|
||||
|
|
@ -57,8 +62,8 @@ export default function ShuikuBasicInfo() {
|
|||
{tabVal === "2" ? <TzParams /> : null}
|
||||
{tabVal === "3" ? <KrLine dataInfo={data}/> : null}
|
||||
{tabVal === "4" ? <XlLine /> : null}
|
||||
{tabVal === "5" ? <MonthLl dataInfo={data}/> : null}
|
||||
|
||||
{/* {tabVal === "5" ? <MonthLl dataInfo={data}/> : null} */}
|
||||
{tabVal === "5" ? <BuildInfo /> : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue