diff --git a/public/assets/centerZm.png b/public/assets/centerZm.png new file mode 100644 index 0000000..a0948bb Binary files /dev/null and b/public/assets/centerZm.png differ diff --git a/src/assets/ykzImg/ykbg.png b/src/assets/ykzImg/ykbg.png new file mode 100644 index 0000000..a0948bb Binary files /dev/null and b/src/assets/ykzImg/ykbg.png differ diff --git a/src/assets/ykzImg/zmCard.png b/src/assets/ykzImg/zmCard.png new file mode 100644 index 0000000..6d6a437 Binary files /dev/null and b/src/assets/ykzImg/zmCard.png differ diff --git a/src/views/Home/GATE_MARKERS_README.md b/src/views/Home/GATE_MARKERS_README.md new file mode 100644 index 0000000..fe19060 --- /dev/null +++ b/src/views/Home/GATE_MARKERS_README.md @@ -0,0 +1,152 @@ +# 闸门标注功能使用说明 + +## 功能概述 +本功能在水闸大屏上实现了五个闸门的标注显示，每个标注包含工作闸和检修闸的开关状态。标注使用百分比定位，确保在不同屏幕分辨率下位置保持不变。 + +## 文件结构 +``` +src/views/Home/ +├── index.js # 主组件文件 +├── index.less # 样式文件 +└── gateMarkersConfig.js # 闸门标注配置文件 +``` + +## 如何调整闸门位置 + +### 1. 打开配置文件 +编辑 `src/views/Home/gateMarkersConfig.js` 文件 + +### 2. 修改位置参数 +每个闸门对象都有一个 `position` 属性，包含两个百分比值： +- `left`: 从左到右的百分比位置 (0-100) +- `top`: 从上到下的百分比位置 (0-100) + +```javascript +{ + id: 1, + name: '1号闸门', + workGate: '开启', + repairGate: '关闭', + position: { left: 15, top: 45 } // 调整这两个值 +} +``` + +### 3. 调整建议 +- **left值**: 从左到右依次增加，建议间隔 15% 左右 + - 1号闸门: left: 15 + - 2号闸门: left: 30 + - 3号闸门: left: 45 + - 4号闸门: left: 60 + - 5号闸门: left: 75 + +- **top值**: 根据实际图片中闸门的位置调整 + - 如果闸门在图片上方，使用较小的值（如 35-40） + - 如果闸门在图片中间，使用中等值（如 45-55） + - 如果闸门在图片下方，使用较大的值（如 60-70） + +### 4. 精确定位方法 +1. 打开浏览器开发者工具 (F12) +2. 选择元素选择工具 +3. 点击大屏区域，查看容器的实际尺寸 +4. 计算闸门在图片中的相对位置： + ``` + left百分比 = (闸门X坐标 / 容器宽度) × 100 + top百分比 = (闸门Y坐标 / 容器高度) × 100 + ``` + +## 如何修改闸门状态 + +在 `gateMarkersConfig.js` 中修改每个闸门的 `workGate` 和 `repairGate` 属性： +- `'开启'`: 显示为绿色 +- `'关闭'`: 显示为红色 + +```javascript +{ + id: 1, + name: '1号闸门', + workGate: '开启', // 修改为 '开启' 或 '关闭' + repairGate: '关闭', // 修改为 '开启' 或 '关闭' + position: { left: 15, top: 45 } +} +``` + +## 样式自定义 + +如需修改标注样式，编辑 `src/views/Home/index.less` 文件中的以下部分： + +### 标注点样式 +```less +.marker-dot { + width: 12px; // 点的大小 + height: 12px; + background: #ff4d4f; // 点的颜色 + // ... +} +``` + +### 信息框样式 +```less +.marker-info { + background: rgba(0, 0, 0, 0.75); // 背景颜色和透明度 + border: 1px solid #ff4d4f; // 边框颜色 + min-width: 120px; // 最小宽度 + // ... +} +``` + +### 动画效果 +```less +@keyframes pulse { + // 修改脉冲动画效果 +} +``` + +## 响应式特性 + +- 标注使用百分比定位，自动适应不同屏幕尺寸 +- 配合 `autofit.js` 实现整体大屏的缩放适配 +- 标注信息框会自动调整位置，避免超出屏幕边界 + +## 交互功能 + +- **悬停效果**: 鼠标悬停时标注会放大 1.05 倍 +- **点击事件**: 点击标注会触发 `handleGateClick` 函数，可在控制台查看点击的闸门信息 +- **脉冲动画**: 标注点有持续的脉冲动画效果，吸引注意力 + +## 注意事项 + +1. 修改配置文件后需要刷新页面才能看到效果 +2. 确保百分比值的总和不超过 100% +3. 如果标注信息框超出屏幕边界，可以调整 `left` 值或修改样式中的 `left` 偏移量 +4. 在生产环境中，建议将闸门状态改为从后端 API 获取 + +## 示例：从API获取闸门状态 + +```javascript +// 在 index.js 中添加获取闸门数据的函数 +const getGateData = async () => { + try { + const res = await httppost2(apiurl.gate.getGateStatus) + if (res.code == 200) { + // 更新闸门状态 + const updatedGateData = gateMarkersConfig.map(gate => { + const apiData = res.data.find(item => item.id === gate.id) + return { + ...gate, + workGate: apiData?.workGate || '关闭', + repairGate: apiData?.repairGate || '关闭' + } + }) + setGateData(updatedGateData) + } + } catch (error) { + console.log(error) + } +} + +// 在 useEffect 中调用 +useEffect(() => { + // ... 其他初始化代码 + getGateData() +}, []) +``` diff --git a/src/views/Home/gateMarkersConfig.js b/src/views/Home/gateMarkersConfig.js new file mode 100644 index 0000000..597d9d2 --- /dev/null +++ b/src/views/Home/gateMarkersConfig.js @@ -0,0 +1,64 @@ +// 闸门标注配置文件 +// 使用百分比定位，确保在不同分辨率下标注位置保持不变 +// left: 从左到右的百分比位置 (0-100) +// top: 从上到下的百分比位置 (0-100) + +export const gateMarkersConfig = [ + { + id: 1, + name: '1号闸门', + workGate: '-', + repairGate: '-', + position: { left: 33, top: 45 } // 根据实际图片调整这些值 + }, + { + id: 2, + name: '2号闸门', + workGate: '-', + repairGate: '-', + position: { left: 40, top: 45 } // 根据实际图片调整这些值 + }, + { + id: 3, + name: '3号闸门', + workGate: '-', + repairGate: '-', + position: { left: 47, top: 45 } // 根据实际图片调整这些值 + }, + { + id: 4, + name: '4号闸门', + workGate: '-', + repairGate: '-', + position: { left: 54, top: 45 } // 根据实际图片调整这些值 + }, + { + id: 5, + name: '5号闸门', + workGate: '-', + repairGate: '-', + position: { left: 61, top: 45 } // 根据实际图片调整这些值 + } +] + +// 标注样式配置 +export const markerStyleConfig = { + // 标注点大小 + dotSize: 12, + // 标注线高度 + lineHeight: 30, + // 信息框最小宽度 + infoBoxMinWidth: 120, + // 信息框内边距 + infoBoxPadding: '8px 12px', + // 开启状态颜色 + openColor: '#52c41a', + // 关闭状态颜色 + closedColor: '#ff4d4f', + // 标注点颜色 + dotColor: '#ff4d4f', + // 边框颜色 + borderColor: '#ff4d4f', + // 背景透明度 + backgroundOpacity: 0.75 +} diff --git a/src/views/Home/index.js b/src/views/Home/index.js index f910ee9..f8172fa 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -16,6 +16,43 @@ import { useDispatch, useSelector } from 'react-redux'; import HFivePlayer from '../../components/video1Plary'; import moment from 'moment'; import { loadMenu, loadRole } from '../../models/auth/_' +import { gateMarkersConfig } from './gateMarkersConfig' + +// 闸门标注组件 +const GateMarker = ({ gateInfo, position, onClick }) => { + const getStatusColor = (status) => { + return status === '开启' ? '#52c41a' : '#ff4d4f' + } + + return ( +
onClick && onClick(gateInfo)} + > + {/*
+
*/} +
+
{gateInfo.name}
+
+ 工作闸开度: + + {gateInfo.workGate} + +
+
+ 检修闸开度: + + {gateInfo.repairGate} + +
+
+
+ ) +} const MenuTitleCard = ({ key, title }) => { return (
@@ -223,12 +260,12 @@ export default function Home() { const delClick = () => { let idx = index - 1 setIndex(idx) - getVideoSrc(videoList[idx].indexCode) + getVideoSrc(videoList[idx]?.indexCode) } const addClick = () => { let idx = index + 1 setIndex(idx) - getVideoSrc(videoList[idx].indexCode) + getVideoSrc(videoList[idx]?.indexCode) } @@ -242,6 +279,15 @@ export default function Home() { } } const [activeOne, setActiveOne] = useState(0) + + // 闸门数据 - 使用配置文件 + const [gateData, setGateData] = useState(gateMarkersConfig) + + // 处理闸门标注点击 + const handleGateClick = (gateInfo) => { + console.log('点击闸门:', gateInfo) + // 这里可以添加点击后的逻辑，比如显示详细信息等 + } useEffect(() => { autofit.init({ dh: 1080, @@ -261,7 +307,7 @@ export default function Home() {
-
+ {/*
*/} {title.map((item, i) => (
jumpMenu(item)} style={{ cursor: 'pointer' }}> @@ -269,7 +315,21 @@ export default function Home() { ))}
- item?.type == 2)} /> + {/* item?.type == 2)} /> */} +
+ {/* */} + {/* 闸门标注 */} +
+ {gateData.map((gate) => ( + + ))} +
+
{showTabLeft &&