diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackBack.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackBack.png new file mode 100644 index 0000000..ad30218 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackBack.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackGongge.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackGongge.png new file mode 100644 index 0000000..0ea4b44 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackGongge.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackMonitor.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackMonitor.png new file mode 100644 index 0000000..142ddfb Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackMonitor.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackPolling.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackPolling.png new file mode 100644 index 0000000..dc4e87c Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackPolling.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen1.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen1.png new file mode 100644 index 0000000..6995026 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen1.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen12.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen12.png new file mode 100644 index 0000000..e2a0688 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen12.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen4.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen4.png new file mode 100644 index 0000000..a922fd1 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen4.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen6.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen6.png new file mode 100644 index 0000000..f2c6026 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/blackScreen6.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/back.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blueBackr.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/back.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/blueBackr.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/gongge.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blueGongge.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/gongge.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/blueGongge.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/monitor.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blueMonitor.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/monitor.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/blueMonitor.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/polling.png b/code/VideoAccess-VCMP/web/client/assets/images/application/bluePolling.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/polling.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/bluePolling.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen1.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen1.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/screen1.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen1.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen12.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen12.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/screen12.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen12.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen4.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen4.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/screen4.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen4.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen6.png b/code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen6.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/application/screen6.png rename to code/VideoAccess-VCMP/web/client/assets/images/application/blueScreen6.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whiteBack.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteBack.png new file mode 100644 index 0000000..ad30218 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteBack.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whiteGongge.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteGongge.png new file mode 100644 index 0000000..0ea4b44 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteGongge.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whiteMonitor.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteMonitor.png new file mode 100644 index 0000000..142ddfb Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteMonitor.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whitePolling.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whitePolling.png new file mode 100644 index 0000000..8d7f6f3 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whitePolling.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen1.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen1.png new file mode 100644 index 0000000..8610a57 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen1.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen12.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen12.png new file mode 100644 index 0000000..8669d0c Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen12.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen4.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen4.png new file mode 100644 index 0000000..8a9a05c Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen4.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen6.png b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen6.png new file mode 100644 index 0000000..0603347 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/whiteScreen6.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/openness/grey1.5.png b/code/VideoAccess-VCMP/web/client/assets/images/openness/white1.5.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/openness/grey1.5.png rename to code/VideoAccess-VCMP/web/client/assets/images/openness/white1.5.png diff --git a/code/VideoAccess-VCMP/web/client/assets/images/openness/grey2.png b/code/VideoAccess-VCMP/web/client/assets/images/openness/white2.png similarity index 100% rename from code/VideoAccess-VCMP/web/client/assets/images/openness/grey2.png rename to code/VideoAccess-VCMP/web/client/assets/images/openness/white2.png diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx index fe83e85..a19cdb4 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx @@ -5,7 +5,7 @@ import { VideoPlay } from "$components"; import { useState } from 'react'; -const Container = ({ videoObj, pageSize, showHeader, videoPlay }) => { +const Container = ({ videoObj, pageSize, showHeader, videoPlay ,mould}) => { const [videoWidth, setVideoWidth] = useState() const [videoHeight, setVideoHeight] = useState() // console.log(videoObj); @@ -40,7 +40,7 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay }) => { videoStyle='true' containerId={videoObj.key} local={true} /> : - : ""}
{videoObj?.label}
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx index 3f44c54..b69d499 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx @@ -4,7 +4,7 @@ import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } import Container from "./container"; -const VideoCard = ({ data, pageSize ,showHeader, key,videoPlay}) => { +const VideoCard = ({ data, pageSize ,showHeader, key,videoPlay,mould}) => { let span = 8 @@ -35,6 +35,7 @@ const VideoCard = ({ data, pageSize ,showHeader, key,videoPlay}) => { pageSize={pageSize} showHeader={showHeader} videoPlay={videoPlay} + mould={mould} /> diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx index 0aab5cd..c216ae5 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx @@ -9,8 +9,8 @@ import PerfectScrollbar from "perfect-scrollbar"; let timing let projectScrollbar; const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => { - console.log({ 视频: treeData }); - // console.log(filterGroup); + // console.log({ 视频: treeData }); + console.log(filterGroup); // console.log(headerName); // console.log(videoPlay); // console.log(template); @@ -115,17 +115,28 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s const [polling, setPolling] = useState(false) //轮询 const [pollingTime, setPollingTime] = useState(1) //轮询时间 const [reminder, setReminder] = useState(false); //提醒弹框 + const [formWidth, setFormWidth] = useState(840); const api = useRef(); const pageRef = useRef(page); const GONGGESCREEN = 'gonggeScreen' - const chooseAll = useRef(true); useEffect(() => { projectScrollbar = new PerfectScrollbar("#tree", { suppressScrollX: true, }); + + const resize_ = () => { + setFormWidth(document.getElementById('formSearch').scrollWidth) + console.log(document.getElementById('formSearch').scrollWidth) + } + resize_() + window.addEventListener('resize', resize_); + return () => { + window.removeEventListener('resize', resize_); + } + }, []) useEffect(() => { const domProject = document.getElementById("tree"); @@ -133,8 +144,9 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s projectScrollbar.update(); } }) + + useEffect(() => { - console.log(45464); let query = [] treeData?.map(v => [ query.push({ label: v.label, value: v.value, key: v.key }) @@ -144,6 +156,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s videoData(treeData, values) setLefTtree(treeData) setLeftValue(treeData.map(v => v.value)) + api.current?.reset() }, [treeData, filterGroup]) useEffect(() => { @@ -228,27 +241,27 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s }) } }) - // console.log(videoData); + console.log(videoData); if (searchs?.name) { videoData = videoData?.filter(v => v.label.includes(searchs.name)) } - if (searchs?.field0) { - videoData = videoData?.filter(({ cameraId }) => searchs?.field0.some(v => v == cameraId)) + if (searchs.hasOwnProperty('field0')) { + videoData = videoData?.filter(({ cameraId }) => filterGroup[0].filters.find(v => v.num == searchs?.field0).cameraIds.some(v => v == cameraId)) } - if (searchs?.field1) { - videoData = videoData?.filter(({ cameraId }) => searchs?.field1.some(v => v == cameraId)) + if (searchs.hasOwnProperty('field1')) { + videoData = videoData?.filter(({ cameraId }) => filterGroup[1].filters.find(v => v.num == searchs?.field1).cameraIds.some(v => v == cameraId)) } - if (searchs?.field2) { - videoData = videoData?.filter(({ cameraId }) => searchs?.field2.some(v => v == cameraId)) + if (searchs.hasOwnProperty('field2')) { + videoData = videoData?.filter(({ cameraId }) => filterGroup[2].filters.find(v => v.num == searchs?.field2).cameraIds.some(v => v == cameraId)) } - if (searchs?.field3) { - videoData = videoData?.filter(({ cameraId }) => searchs?.field3.some(v => v == cameraId)) + if (searchs.hasOwnProperty('field3')) { + videoData = videoData?.filter(({ cameraId }) => filterGroup[3].filters.find(v => v.num == searchs?.field3).cameraIds.some(v => v == cameraId)) } - if (searchs?.field4) { - videoData = videoData?.filter(({ cameraId }) => searchs?.field4.some(v => v == cameraId)) + if (searchs.hasOwnProperty('field4')) { + videoData = videoData?.filter(({ cameraId }) => filterGroup[4].filters.find(v => v.num == searchs?.field4).cameraIds.some(v => v == cameraId)) } - // console.log(videoData); + console.log(videoData); setPlayData(videoData) }, [searchs]) @@ -269,7 +282,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s setPage(pages) pageRef.current = pages } - }, pollingTimes * 1000 * 5) + }, pollingTimes * 1000 * 60) } }, [polling, playData, pollingTime]) @@ -374,8 +387,9 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
查询： { // console.log(e); setLeftValue(e) @@ -424,7 +439,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s flex: 1, marginLeft: '4px', border: `1px solid ${mould('#003D9E', 'rgba(197,201,207,0.4', '')}`, }}>
-
+
console.log(values)} // onValueChange={values=>console.log(values)} @@ -434,16 +449,61 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s > 设备搜索:} field="name" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} /> {filterGroup?.map(v => { - return {`${v.name.substr(0, 2)}...:`}} + let nameLength = 2 + let OptionWidth = 75 + console.log(formWidth); + console.log(filterGroup.filter(v => v.forbidden).length); + if (formWidth > 910) { + switch (filterGroup.filter(v => v.forbidden).length) { + case 1: + nameLength = 9 + OptionWidth = 130 + break; + case 2: + nameLength = 9 + OptionWidth = 130 + break; + case 3: + nameLength = 9 + OptionWidth = 130 + break; + case 4: + if (formWidth > 1145) { + nameLength = 9 + OptionWidth = 130 + + } else { + if (formWidth > 930) { + nameLength = 4 + OptionWidth = 100 + } + } + break; + case 5: + if (formWidth > 1380) { + nameLength = 9 + OptionWidth = 130 + } else { + if (formWidth > 1100) { + nameLength = 4 + OptionWidth = 100 + } + } + break; + default: + break; + } + } + return v.forbidden ? {v.name.length > nameLength ? `${v.name.substr(0, nameLength)}...:` : v.name + ':'}} labelPosition="left" field={"field" + v.num} - style={{ width: 75, background: mould('#01185f', ' #FFFFFF', '#ECECEC'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28, 96, 254, 0.4)', ' rgba(151,151,151,0.5)', 'rgba(39,39,39,0.2)')} ` }} + style={{ width: OptionWidth, background: mould('#01185f', ' #FFFFFF', '#ECECEC'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28, 96, 254, 0.4)', ' rgba(151,151,151,0.5)', 'rgba(39,39,39,0.2)')} ` }} placeholder="全部" showClear > - {v.filters.map(vv => {vv.name})} - + {v.filters.map(vv => {vv.name})} + : "" })}
@@ -455,7 +515,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s