diff --git a/public/assets/them.jpg b/public/assets/them.jpg new file mode 100644 index 0000000..8c8f5f4 Binary files /dev/null and b/public/assets/them.jpg differ diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 78b92ec..e75d1df 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -251,7 +251,7 @@ export default function Home() {
工程简介
- + 盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农 业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
diff --git a/src/views/Home/index.less b/src/views/Home/index.less index b67cca4..c11a05d 100644 --- a/src/views/Home/index.less +++ b/src/views/Home/index.less @@ -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; diff --git a/src/views/Home/zmjk/Sider.tsx b/src/views/Home/zmjk/Sider.tsx index c443cbd..7c5ccb3 100644 --- a/src/views/Home/zmjk/Sider.tsx +++ b/src/views/Home/zmjk/Sider.tsx @@ -13,10 +13,10 @@ const Sider: React.FC<{ return ( - + diff --git a/src/views/Home/zmjk/Topper1.tsx b/src/views/Home/zmjk/Topper1.tsx index 4a4f291..b7b44ed 100644 --- a/src/views/Home/zmjk/Topper1.tsx +++ b/src/views/Home/zmjk/Topper1.tsx @@ -85,12 +85,17 @@ const Topper1: React.FC<{ return ( - + { - pts.SepsLTLBRBRT.map((s, index) => ( - - )) + pts.SepsLTLBRBRT.map((s, index) => { + if (index == 0 || index == 1 || index == 7 || index == 8) { + return ( + + ) + } + } + ) } { windows.w.map((o, index) => ) diff --git a/src/views/Home/zmjk/ZmColumn.tsx b/src/views/Home/zmjk/ZmColumn.tsx index 6fe46fc..12562d3 100644 --- a/src/views/Home/zmjk/ZmColumn.tsx +++ b/src/views/Home/zmjk/ZmColumn.tsx @@ -13,11 +13,18 @@ const ZmColumn: React.FC<{ pts: ControlPts; waterRatio: number; selected: boolean; - list:any; -}> = ({ kdMax, gtophgt, idx, pts, waterRatio, selected,list }) => { + 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 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 b11 = { x: a.lb0.x -22, y: a.lb0.y - 32 }; + const b6 = { x: a.rb0.x , y: a.rb0.y - 32 }; + 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,15 +88,16 @@ 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 ( <> { (idx != 0 && idx != list.length - 1) ? - waterP3 && waterP3R ? ( - - ) : null : null + waterP3 && waterP3R ? ( + + ) : null : null } - {/* */} - {idx != 0 ? : null} - {idx!= list.length - 1 ? : null} - {/* - */} - - {idx != list.length - 1 ? : ''} - {idx!= 0 ? :'' } - - + /> + + { + idx == 0 || idx == 1 || idx == 2 || idx == 3 ? + <> + + + + + + + + : + + idx == 7 || idx == 8 || idx == 9 ? + <> + + + + + + + + : + + <> + + + + + + + + + } + + + - - - + + { + idx == 9 || idx == 8 || idx == 7 ? + + : + + } + { + idx == 0 || idx == 1 || idx == 2 ? + : + + } - - + + + + { + pts.SepsFront1.map((s, index) => ( + + + )) + } { waterP1.y < b1.y ? ( diff --git a/src/views/Home/zmjk/consts.ts b/src/views/Home/zmjk/consts.ts index cd0ef86..d205c33 100644 --- a/src/views/Home/zmjk/consts.ts +++ b/src/views/Home/zmjk/consts.ts @@ -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 }; diff --git a/src/views/Home/zmjk/coordinates.ts b/src/views/Home/zmjk/coordinates.ts index 93bff7e..84bd584 100644 --- a/src/views/Home/zmjk/coordinates.ts +++ b/src/views/Home/zmjk/coordinates.ts @@ -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, } } \ No newline at end of file diff --git a/src/views/Home/zmjk/index.js b/src/views/Home/zmjk/index.js index 9a89f61..7f61a88 100644 --- a/src/views/Home/zmjk/index.js +++ b/src/views/Home/zmjk/index.js @@ -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]); @@ -182,37 +182,37 @@ const Page = () => { - +
-
+
{ eqpnoList.map(o => (
{}} - className='o' style={{ flexGrow: 1, width: 0, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}> -
#{o+1}
+ className='o' style={{ flexGrow: 1, width: 40, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}> +
#{o+1}
)) } -
+
-
-
+
+
{ eqpnoList.map(o => ( -
+
{}} - 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)}
)) } -
+
diff --git a/src/views/Home/zmjk/index.less b/src/views/Home/zmjk/index.less index 9985900..2b0860a 100644 --- a/src/views/Home/zmjk/index.less +++ b/src/views/Home/zmjk/index.less @@ -3,7 +3,7 @@ display: flex; height: 100%; .sg_zmjk_left{ - top: 250px; + top: 16rem; position: relative; width: 1080px; height: 640px;