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-introduce'>
<div className='project-title'>工程简介</div> <div className='project-title'>工程简介</div>
<div className='project-content'> <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 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农 盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。 业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
</div> </div>

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

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

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

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

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

@ -85,12 +85,17 @@ const Topper1: React.FC<{
return ( return (
<Layer> <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]} /> <ColorPolygon fill='#4a5c5e' pts={[pts.TopRectLB, pts.RoomRBFar, mirror(pts.RoomRBFar), pts.TopRectRB]} />
{ {
pts.SepsLTLBRBRT.map((s, index) => ( pts.SepsLTLBRBRT.map((s, index) => {
<ColorPolygon key={'a' + index} fill='#334648' pts={s} /> 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} />) windows.w.map((o, index) => <Window1 rect={o} key={'w' + index} />)

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

@ -13,11 +13,18 @@ const ZmColumn: React.FC<{
pts: ControlPts; pts: ControlPts;
waterRatio: number; waterRatio: number;
selected: boolean; selected: boolean;
list:any; list: any;
}> = ({ kdMax, gtophgt, idx, pts, waterRatio, selected,list }) => { }> = ({ kdMax, gtophgt, idx, pts, waterRatio, selected, list }) => {
const renKd = gtophgt; //useLinearAnim(gtophgt); 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') { if (!a || typeof renKd !== 'number') {
return null; return null;
} }
@ -54,9 +61,23 @@ const ZmColumn: React.FC<{
// //
const b1 = { x: a.lb0.x, y: a.lb0.y - 32 }; const b1 = { x: a.lb0.x, y: a.lb0.y - 32 };
const b6 = { x: a.rb0.x, y: a.rb0.y - 32 }; const b11 = { x: a.lb0.x -22, y: a.lb0.y - 32 };
const b2 = interpolate(b1, b6, 0.4); const b6 = { x: a.rb0.x , y: a.rb0.y - 32 };
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 b3 = { x: b2.x, y: b2.y + 12 };
const b4 = { x: b5.x, y: b5.y + 12 }; const b4 = { x: b5.x, y: b5.y + 12 };
@ -67,15 +88,16 @@ const ZmColumn: React.FC<{
const b1_3 = intersection(b3, ViewCenter, { x: b1_2.x, y: undefined }); const b1_3 = intersection(b3, ViewCenter, { x: b1_2.x, y: undefined });
const b1_4 = intersection(b4, ViewCenter, { x: b1_5.x, y: undefined }); const b1_4 = intersection(b4, ViewCenter, { x: b1_5.x, y: undefined });
return ( return (
<> <>
{ {
(idx != 0 && idx != list.length - 1) ? (idx != 0 && idx != list.length - 1) ?
waterP3 && waterP3R ? ( waterP3 && waterP3R ? (
<ColorPolygon fill='#539cb9' pts={[waterP2, waterP2R, waterP3R, waterP3]} opacity={0.8} /> <ColorPolygon fill='#539cb9' pts={[waterP2, waterP2R, waterP3R, waterP3]} opacity={0.8} />
) : null : null ) : null : null
} }
{/* <ColorPolygon <ColorPolygon
desc="闸门上测" desc="闸门上测"
fill='#afb5b5' fill='#afb5b5'
pts={[ pts={[
@ -84,32 +106,76 @@ const ZmColumn: React.FC<{
[a.rt2.x, ty2], [a.rt2.x, ty2],
[a.lt2.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]} /> idx == 0 || idx == 1 || idx == 2 || idx == 3 ?
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} /> */} <>
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x - 12, line2.y, line2.x - 12, joiny]} />
{idx != list.length - 1 ? <Circle fill='#afb5b5' x={line1.x} y={joiny} radius={9} /> : ''} <Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x - 12, line1.y, line1.x - 12, joiny]} />
{idx!= 0 ? <Circle fill='#afb5b5' x={line2.x} y={joiny} radius={9} /> :'' } <Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x - 12, line2.y, line2.x - 12, joiny]} />
<Line stroke='#222' strokeWidth={12} points={[line1.x, joiny - 8, line1.x, joiny - 10]} /> <Circle fill='#afb5b5' x={line1.x - 12} y={joiny} radius={9} />
<Line stroke='#222' strokeWidth={12} points={[line2.x, joiny - 8, line2.x, joiny - 10]} /> <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 <Rect
desc='闸门正面' desc='闸门正面'
fill={selected ? '#95927a' : '#5f6969'} fill={selected ? '#95927a' : '#5f6969'}
stroke={selected ? 'orange' : "#222"} stroke={selected ? 'orange' : "#222"}
strokeWidth={1} x={a.lt1.x} y={ty1} width={a.rt1.x - a.lt1.x} height={hh1} /> 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 }} /> <ZmDec tl={{ x: a.lt1.x, y: ty1 }} rb={{ x: a.rt1.x, y: ty1 + hh1 }} />
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_1, b1_2, b2, b1]} />
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_5, b1_6, b6, b5]} /> {
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_2, b1_3, b3, b2]} />
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_3, b1_4, b4, b3]} /> <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 ? ( waterP1.y < b1.y ? (
<ColorPolygon fill='#539cb9' pts={[waterP1, waterP1R, waterP2R, waterP2]} opacity={0.8} /> <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 CanvasW = 1080;
export const CanvasH = 470; export const CanvasH = 500;
export const Horizontal = CanvasH * 1.4 / 3; export const Horizontal = CanvasH * 1.4 / 3;
export const ViewCenter = { x: CanvasW * 0.5, y: Horizontal }; 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; TopRectRB: XY;
SepsLTLBRBRT: XY[][]; SepsLTLBRBRT: XY[][];
SepsFront: XYWH[]; SepsFront: XYWH[];
SepsFront1: XYWH[];
ZmArea: { ZmArea: {
lt0: XY; lt1: XY; lt2: XY; lt3: XY; lt0: XY; lt1: XY; lt2: XY; lt3: XY;
lb0: XY; lb1: XY; lb2: XY; lb3: XY; lb0: XY; lb1: XY; lb2: XY; lb3: XY;
@ -90,7 +91,7 @@ export type ControlPts = {
export function contextCoordinates(unitWidth: number, hole: number): ControlPts { export function contextCoordinates(unitWidth: number, hole: number): ControlPts {
const C1 = { x: unitWidth * 0.6, y: GroundBase }; 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 B1 = { x: unitWidth, y: BottomBase }
const C2 = intersection(ViewCenter, C1, { x: 0, y: undefined }); 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 SepsLTLBRBRT: XY[][] = [];
const SepsFront: XYWH[] = []; const SepsFront: XYWH[] = [];
const SepsFront1: XYWH[] = [];
const ZmArea = []; const ZmArea = [];
for (let i = 0; i < hole; i++) { for (let i = 0; i < hole; i++) {
const TopBase = TopHoleLT.y; const TopBase = TopHoleLT.y;
// 隔断 // 隔断
if (i > 0) { 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 frontLeft = frontRight - PillarWidth;
const frontLeft1 = frontRight1 - PillarWidth;
SepsFront.push({ x: frontLeft, y: TopBase, w: PillarWidth, h: BottomBase - TopBase }); 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) { if (i < hole / 2) {
// 右侧面 // 右侧面
const p1 = { x: frontRight, y: TopBase }; 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, C1, L1, B1, C2, L2, B2, A1, A2, B3,
RoomLT, RoomRT, RoomRB, RoomLB, RoomRTFar, RoomRBFar, RoomLBFar, RoomLT, RoomRT, RoomRB, RoomLB, RoomRTFar, RoomRBFar, RoomLBFar,
TopRectLB, TopRectRB, TopRectLB, TopRectRB,
SepsLTLBRBRT, SepsFront, ZmArea, SepsLTLBRBRT, SepsFront,SepsFront1, ZmArea,
} }
} }

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

@ -123,7 +123,7 @@ const Page = () => {
const [list, setList ] = useState([]) const [list, setList ] = useState([])
const hole = 10;//zmobj.gaorNum; const hole = 10;//zmobj.gaorNum;
const xunit = CanvasW / (hole - 5); const xunit = CanvasW / (hole +2);
const pts = contextCoordinates(xunit, hole); const pts = contextCoordinates(xunit, hole);
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]); const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
@ -182,37 +182,37 @@ const Page = () => {
<Sider pts={pts} side="left" /> <Sider pts={pts} side="left" />
<Sider pts={pts} side="right" /> <Sider pts={pts} side="right" />
<Topper1 pts={pts} type={hole} /> <Topper1 pts={pts} type={hole} />
<ZmColumns runtime={damList} zmobj={zmobj} pts={pts} waterRatio={waterRatio} /> <ZmColumns runtime ={damList} zmobj={zmobj} pts={pts} waterRatio={waterRatio} />
<Topper2 pts={pts} waterRatio={waterRatio} /> <Topper2 pts={pts} waterRatio={waterRatio} />
</Stage> </Stage>
<div style={{ position: 'absolute', left: 0, top: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}> <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 => ( eqpnoList.map(o => (
<div key={o} <div key={o}
onClick={() => {}} onClick={() => {}}
className='o' style={{ flexGrow: 1, width: 0, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}> className='o' style={{ flexGrow: 1, width: 40, 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> <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>
)) ))
} }
<div key="sider2" style={{ flexGrow: 1, width: 135 }}></div> <div key="sider2" style={{ flexGrow: 1, width: 53 }}></div>
</div> </div>
<div style={{ position: 'absolute', left: 0, bottom: 155, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}> <div style={{ position: 'absolute', left: 0, bottom: 130, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 280 }}></div> <div key="sider1" style={{ flexGrow: 1, width: 230 }}></div>
{ {
eqpnoList.map(o => ( 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 <div
onClick={() => {}} 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)} {renAperture(damList[o]?.realAperture)}
</div> </div>
</div> </div>
)) ))
} }
<div key="sider2" style={{ flexGrow: 1, width: 280 }}></div> <div key="sider2" style={{ flexGrow: 1, width: 230 }}></div>
</div> </div>
</dvi> </dvi>
</div> </div>

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

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