lishenfeng
/
ykzz-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 闸门控制优化

master
李神峰 2025-01-02 17:54:12 +08:00
parent 23c32c40fb
commit 4aadbd3bf9
10 changed files with 137 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/them.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

2
src/views/Home/index.js
View File

@ -251,7 +251,7 @@ export default function Home() {
<div className='project-introduce'>
<div className='project-title'>工程简介</div>
<div className='project-content'>
<img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shuizhi2.png`}></img>
<img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/them.jpg`}></img>
盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
</div>

6
src/views/Home/index.less
View File

@ -23,7 +23,7 @@
}
.title_name{
position: absolute;
top: 230px;
top: 16rem;
// left: 41%;
width: 350px;
height: 70px;
@ -76,7 +76,7 @@
}
.content-left{
position: absolute;
top: 120px;
top: 8rem;
left:20px;
.project-introduce,.runWatch,.safeWatch{
width: 380px;
@ -131,7 +131,7 @@
}
.content-right{
position: absolute;
top: 120px;
top: 8rem;
right:20px;
.operate-log{
width: 380px;

4
src/views/Home/zmjk/Sider.tsx
View File

@ -13,10 +13,10 @@ const Sider: React.FC<{
return (
<Layer
x={side === 'left' ? 0 : CanvasW}
scaleX={side === 'left' ? 1 : -1}
scaleX={side === 'left' ? 0.8 : -0.8}
width={CanvasW * 0.5}
>
<ColorPolygon desc='水' fill="#458eab" pts={[[0, Horizontal], [0, CanvasH], [CanvasW * 0.5, CanvasH], [CanvasW * 0.5, Horizontal]]} />
<ColorPolygon desc='水' fill="#458eab" pts={[[0, Horizontal], [0, CanvasH], [CanvasW * 0.7, CanvasH], [CanvasW * 0.7, Horizontal]]} />
<ColorPolygon desc='远处的墙' fill="#8fa7a7" pts={[[0, FarBuildingTop], pts.C2, pts.C1, [pts.C1.x, FarBuildingTop]]} />

11
src/views/Home/zmjk/Topper1.tsx
View File

@ -85,12 +85,17 @@ const Topper1: React.FC<{
return (
<Layer>
<Rect fill='#738b8b' x={pts.TopRectLB.x} y={pts.TopRectLB.y - TopRoomHeight} width={pts.TopRectRB.x - pts.TopRectLB.x} height={TopRoomHeight} />
<Rect fill='#738b8b' x={pts.TopRectLB.x - 32 } y={pts.TopRectLB.y - TopRoomHeight} width={pts.TopRectRB.x - pts.TopRectLB.x + 63} height={TopRoomHeight} />
<ColorPolygon fill='#4a5c5e' pts={[pts.TopRectLB, pts.RoomRBFar, mirror(pts.RoomRBFar), pts.TopRectRB]} />
{
pts.SepsLTLBRBRT.map((s, index) => (
pts.SepsLTLBRBRT.map((s, index) => {
if (index == 0 || index == 1 || index == 7 || index == 8) {
return (
<ColorPolygon key={'a' + index} fill='#334648' pts={s} />
))
)
}
}
)
}
{
windows.w.map((o, index) => <Window1 rect={o} key={'w' + index} />)

94
src/views/Home/zmjk/ZmColumn.tsx
View File

@ -16,8 +16,15 @@ const ZmColumn: React.FC<{
list: any;
}> = ({ kdMax, gtophgt, idx, pts, waterRatio, selected, list }) => {
const renKd = gtophgt; //useLinearAnim(gtophgt);
let a;
if (idx == 0) {
a = pts.ZmArea[idx];
} else {
a = pts.ZmArea[idx];
}
console.log("a", a);
const a = pts.ZmArea[idx];
if (!a || typeof renKd !== 'number') {
return null;
}
@ -54,9 +61,23 @@ const ZmColumn: React.FC<{
//
const b1 = { x: a.lb0.x, y: a.lb0.y - 32 };
const b11 = { x: a.lb0.x -22, y: a.lb0.y - 32 };
const b6 = { x: a.rb0.x , y: a.rb0.y - 32 };
const b2 = interpolate(b1, b6, 0.4);
const b5 = interpolate(b1, b6, 0.6);
const b61 = { x: a.rb0.x + 20 , y: a.rb0.y - 32 };
const b2 = idx == 0 ? interpolate(b1, b6, 0.5) :
idx == 1 ? interpolate(b1, b6, 0.55) :
idx == 2 ? interpolate(b1, b6, 0.55) :
idx == 7 ? interpolate(b1, b6, 0.3) :
idx == 8 ? interpolate(b1, b6, 0.3) :
idx == 9 ? interpolate(b1, b6, 0.3) :
interpolate(b1, b6, 0.4);
const b5 = idx == 0 ? interpolate(b1, b6, 0.7) :
idx == 1 ? interpolate(b1, b6, 0.75) :
idx == 2 ? interpolate(b1, b6, 0.75) :
idx == 7 ? interpolate(b1, b6, 0.5) :
idx == 8 ?interpolate(b1, b6, 0.5) :
idx == 9 ?interpolate(b1, b6, 0.5) :
interpolate(b1, b6, 0.6);
const b3 = { x: b2.x, y: b2.y + 12 };
const b4 = { x: b5.x, y: b5.y + 12 };
@ -67,6 +88,7 @@ const ZmColumn: React.FC<{
const b1_3 = intersection(b3, ViewCenter, { x: b1_2.x, y: undefined });
const b1_4 = intersection(b4, ViewCenter, { x: b1_5.x, y: undefined });
return (
<>
{
@ -75,7 +97,7 @@ const ZmColumn: React.FC<{
<ColorPolygon fill='#539cb9' pts={[waterP2, waterP2R, waterP3R, waterP3]} opacity={0.8} />
) : null : null
}
{/* <ColorPolygon
<ColorPolygon
desc="闸门上测"
fill='#afb5b5'
pts={[
@ -84,32 +106,76 @@ const ZmColumn: React.FC<{
[a.rt2.x, ty2],
[a.lt2.x, ty2],
]}
/> */}
{idx != 0 ? <Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} /> : null}
{idx!= list.length - 1 ? <Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x, line1.y, line1.x, joiny]} /> : null}
{/* <Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x, line1.y, line1.x, joiny]} />
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} /> */}
/>
{idx != list.length - 1 ? <Circle fill='#afb5b5' x={line1.x} y={joiny} radius={9} /> : ''}
{idx!= 0 ? <Circle fill='#afb5b5' x={line2.x} y={joiny} radius={9} /> :'' }
{
idx == 0 || idx == 1 || idx == 2 || idx == 3 ?
<>
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x - 12, line2.y, line2.x - 12, joiny]} />
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x - 12, line1.y, line1.x - 12, joiny]} />
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x - 12, line2.y, line2.x - 12, joiny]} />
<Circle fill='#afb5b5' x={line1.x - 12} y={joiny} radius={9} />
<Circle fill='#afb5b5' x={line2.x - 12} y={joiny} radius={9} />
<Line stroke='#222' strokeWidth={12} points={[line1.x - 12, joiny - 8, line1.x - 12, joiny - 10]} />
<Line stroke='#222' strokeWidth={12} points={[line2.x - 12, joiny - 8, line2.x - 12, joiny - 10]} />
</> :
idx == 7 || idx == 8 || idx == 9 ?
<>
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x + 12, line2.y, line2.x + 12, joiny]} />
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x + 12, line1.y, line1.x + 12, joiny]} />
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x + 12, line2.y, line2.x + 12, joiny]} />
<Circle fill='#afb5b5' x={line1.x + 12} y={joiny} radius={9} />
<Circle fill='#afb5b5' x={line2.x + 12} y={joiny} radius={9} />
<Line stroke='#222' strokeWidth={12} points={[line1.x + 12, joiny - 8, line1.x + 12, joiny - 10]} />
<Line stroke='#222' strokeWidth={12} points={[line2.x + 12, joiny - 8, line2.x + 12, joiny - 10]} />
</> :
<>
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} />
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x, line1.y, line1.x, joiny]} />
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} />
<Circle fill='#afb5b5' x={line1.x} y={joiny} radius={9} />
<Circle fill='#afb5b5' x={line2.x} y={joiny} radius={9} />
<Line stroke='#222' strokeWidth={12} points={[line1.x, joiny - 8, line1.x, joiny - 10]} />
<Line stroke='#222' strokeWidth={12} points={[line2.x, joiny - 8, line2.x, joiny - 10]} />
</>
}
<Rect
desc='闸门正面'
fill={selected ? '#95927a' : '#5f6969'}
stroke={selected ? 'orange' : "#222"}
strokeWidth={1} x={a.lt1.x} y={ty1} width={a.rt1.x - a.lt1.x} height={hh1} />
<ZmDec tl={{ x: a.lt1.x, y: ty1 }} rb={{ x: a.rt1.x, y: ty1 + hh1 }} />
{
idx == 9 || idx == 8 || idx == 7 ?
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_1, b1_2, b2, b11]} />
:
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_1, b1_2, b2, b1]} />
}
{
idx == 0 || idx == 1 || idx == 2 ?
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_5, b1_6, b61, b5]} /> :
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_5, b1_6, b6, b5]} />
}
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_2, b1_3, b3, b2]} />
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_3, b1_4, b4, b3]} />
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_4, b1_5, b5, b4]} />
<ColorPolygon desc="出水口" fill='#728381' pts={[b1, b2, b3, b4, b5, b6, a.rb0, a.lb0]} />
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_4, b1_5, b5, b4]} />
<ColorPolygon desc="出水口" fill='#728381' pts={[b1, b2, b3, b4, b5, b6, { x: a.rb0.x, y: a.rb0.y }, { x: a.lb0.x, y: a.lb0.y }]} />
{
pts.SepsFront1.map((s, index) => (
<Rect key={index} fill='#728381' x={s.x} y={s.y + 250} width={s.w + 3} height={s.h -250} />
))
}
{
waterP1.y < b1.y ? (
<ColorPolygon fill='#539cb9' pts={[waterP1, waterP1R, waterP2R, waterP2]} opacity={0.8} />

2
src/views/Home/zmjk/consts.ts
View File

@ -1,5 +1,5 @@
export const CanvasW = 1080;
export const CanvasH = 470;
export const CanvasH = 500;
export const Horizontal = CanvasH * 1.4 / 3;
export const ViewCenter = { x: CanvasW * 0.5, y: Horizontal };

21
src/views/Home/zmjk/coordinates.ts
View File

@ -76,6 +76,7 @@ export type ControlPts = {
TopRectRB: XY;
SepsLTLBRBRT: XY[][];
SepsFront: XYWH[];
SepsFront1: XYWH[];
ZmArea: {
lt0: XY; lt1: XY; lt2: XY; lt3: XY;
lb0: XY; lb1: XY; lb2: XY; lb3: XY;
@ -90,7 +91,7 @@ export type ControlPts = {
export function contextCoordinates(unitWidth: number, hole: number): ControlPts {
const C1 = { x: unitWidth * 0.6, y: GroundBase };
const L1 = { x: unitWidth, y: GroundBase };
const L1 = { x: unitWidth* 1, y: GroundBase };
const B1 = { x: unitWidth, y: BottomBase }
const C2 = intersection(ViewCenter, C1, { x: 0, y: undefined });
@ -122,14 +123,28 @@ export function contextCoordinates(unitWidth: number, hole: number): ControlPts
const SepsLTLBRBRT: XY[][] = [];
const SepsFront: XYWH[] = [];
const SepsFront1: XYWH[] = [];
const ZmArea = [];
for (let i = 0; i < hole; i++) {
const TopBase = TopHoleLT.y;
// 隔断
if (i > 0) {
const frontRight = TopHoleLT.x + (PillarWidth + HoleWidth) * i;
const frontRight1 = TopHoleLT.x + (PillarWidth + HoleWidth) * i;
const frontRight = i == 1 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i + 21 :
i == 2 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i + 18 :
i == 3 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i + 12 :
i == 4 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i + 6 :
i == 5 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i + 1 :
i == 6 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i - 5:
i == 7 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i - 12 :
i == 9 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i - 22 :
i == 8 ? TopHoleLT.x + (PillarWidth + HoleWidth) * i - 15 :
TopHoleLT.x + (PillarWidth + HoleWidth) * i
const frontLeft = frontRight - PillarWidth;
const frontLeft1 = frontRight1 - PillarWidth;
SepsFront.push({ x: frontLeft, y: TopBase, w: PillarWidth, h: BottomBase - TopBase });
SepsFront1.push({ x: frontLeft1, y: TopBase, w: PillarWidth, h: BottomBase - TopBase });
if (i < hole / 2) {
// 右侧面
const p1 = { x: frontRight, y: TopBase };
@ -175,6 +190,6 @@ export function contextCoordinates(unitWidth: number, hole: number): ControlPts
C1, L1, B1, C2, L2, B2, A1, A2, B3,
RoomLT, RoomRT, RoomRB, RoomLB, RoomRTFar, RoomRBFar, RoomLBFar,
TopRectLB, TopRectRB,
SepsLTLBRBRT, SepsFront, ZmArea,
SepsLTLBRBRT, SepsFront,SepsFront1, ZmArea,
}
}

20
src/views/Home/zmjk/index.js
View File

@ -123,7 +123,7 @@ const Page = () => {
const [list, setList ] = useState([])
const hole = 10;//zmobj.gaorNum;
const xunit = CanvasW / (hole - 5);
const xunit = CanvasW / (hole +2);
const pts = contextCoordinates(xunit, hole);
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
@ -186,33 +186,33 @@ const Page = () => {
<Topper2 pts={pts} waterRatio={waterRatio} />
</Stage>
<div style={{ position: 'absolute', left: 0, top: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 135 }}></div>
<div key="sider1" style={{ flexGrow: 1, width: 53 }}></div>
{
eqpnoList.map(o => (
<div key={o}
onClick={() => {}}
className='o' style={{ flexGrow: 1, width: 0, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
<div style={{ width: 60, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
className='o' style={{ flexGrow: 1, width: 40, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
<div style={{ width: 80, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 135 }}></div>
<div key="sider2" style={{ flexGrow: 1, width: 53 }}></div>
</div>
<div style={{ position: 'absolute', left: 0, bottom: 155, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 280 }}></div>
<div style={{ position: 'absolute', left: 0, bottom: 130, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 230 }}></div>
{
eqpnoList.map(o => (
<div key={o} className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center' }}>
<div key={o} className='o' style={{ flexGrow: 1, width: 190, display: 'flex', justifyContent: 'center' }}>
<div
onClick={() => {}}
style={{ width: 60, height: 32, border: '1px solid #4c5dce', backgroundColor: '#315da2', borderRadius: 4, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
style={{ width: 70, height: 32, border: '1px solid #4c5dce', backgroundColor: '#315da2', borderRadius: 4, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
>
{renAperture(damList[o]?.realAperture)}
</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 280 }}></div>
<div key="sider2" style={{ flexGrow: 1, width: 230 }}></div>
</div>
</dvi>
</div>

2
src/views/Home/zmjk/index.less
View File

@ -3,7 +3,7 @@
display: flex;
height: 100%;
.sg_zmjk_left{
top: 250px;
top: 16rem;
position: relative;
width: 1080px;
height: 640px;