76 lines
2.6 KiB
JavaScript
76 lines
2.6 KiB
JavaScript
import { Image } from "antd"
|
|
import zd from '../../../../assets/img/u0.png'
|
|
import qys1 from '../../../../assets/img/qys1.png'
|
|
import qys2 from '../../../../assets/img/qys2.jpg'
|
|
import qys3 from '../../../../assets/img/qys3.jpg'
|
|
import qys4 from '../../../../assets/img/qys4.png'
|
|
import stylesCss from './index.module.less'
|
|
|
|
import { Rnd } from "react-rnd"
|
|
import { useState, useEffect } from "react"
|
|
const list = [
|
|
{ name: '水库地理位置图', key: 1, img: qys1 },
|
|
{ name: '水库平面布置图', key: 2, img: qys2 },
|
|
{ name: '主坝平面布置图', key: 3, img: qys3 },
|
|
{ name: '副坝平面布置图', key: 4, img: qys4 },
|
|
]
|
|
const Page = () => {
|
|
const [url, setUrl] = useState(qys1)
|
|
const tabClick = (item) => {
|
|
setUrl(item.img)
|
|
}
|
|
useEffect(() => {
|
|
let scale = 1
|
|
const img = document.getElementById("img");
|
|
const fun = (e) => {
|
|
console.log(1111)
|
|
// 大于0:滚轮向上滚动 小于0:滚轮向下滚动
|
|
if (e.wheelDelta > 0) {
|
|
scale += 0.05;
|
|
img.style.transform = `scale(${scale})`;
|
|
} else {
|
|
if (scale == 1) {
|
|
img.style.left = 0 + "px";
|
|
img.style.top = 0 + "px";
|
|
}
|
|
// 缩放值大于1时,可以缩小,反之亦然
|
|
if (scale > 1) {
|
|
scale -= 0.05;
|
|
img.style.transform = `scale(${scale})`;
|
|
}
|
|
}
|
|
}
|
|
img.addEventListener("wheel", fun)
|
|
|
|
// getSyData()
|
|
// getSlData()
|
|
// getWyData()
|
|
// getDmData()
|
|
return () => {
|
|
img.removeEventListener("wheel", fun)
|
|
}
|
|
|
|
}, [])
|
|
return (
|
|
<div style={{ backgroundColor: '#fff', height: '100%' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', }}>
|
|
{list.map(item => <div className={url == item.img ? stylesCss.active : stylesCss.tabCheck} onClick={() => tabClick(item)}>{item.name}</div>)}
|
|
</div>
|
|
<Rnd
|
|
default={{
|
|
x: 10,
|
|
y: 60,
|
|
width: '80%',
|
|
height: 'calc(100% - 100px)'
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width:'72%',height:'98%',}}>
|
|
|
|
<Image src={url} id="img" preview={false} />
|
|
|
|
</div>
|
|
</Rnd>
|
|
</div>
|
|
)
|
|
}
|
|
export default Page |