镜像服务模块三套模板样式

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} /> :
-            <img src={`/assets/images/openness/${pageSize == 1 || pageSize == 4 ? 'blue2' : 'blue1.5'}.png`} style={{
+            <img src={`/assets/images/openness/${pageSize == 1 || pageSize == 4 ? mould('blue2','white2','black2') : mould('blue1.5','white1.5','black1.5')}.png`} style={{
                display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30,
             }} /> : ""}
          <div style={{ lineHeight: '30px', paddingLeft: 6 }}>{videoObj?.label}</div>

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}
             />
          </Col>
       </>

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({ 视频: treeData });
-   // console.log(filterGroup);
+   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) {
+      if (searchs.hasOwnProperty('field0')) {
-         videoData = videoData?.filter(({ cameraId }) => searchs?.field0.some(v => v == cameraId))
+         videoData = videoData?.filter(({ cameraId }) => filterGroup[0].filters.find(v => v.num == searchs?.field0).cameraIds.some(v => v == cameraId))
       }
-      if (searchs?.field1) {
+      if (searchs.hasOwnProperty('field1')) {
-         videoData = videoData?.filter(({ cameraId }) => searchs?.field1.some(v => v == cameraId))
+         videoData = videoData?.filter(({ cameraId }) => filterGroup[1].filters.find(v => v.num == searchs?.field1).cameraIds.some(v => v == cameraId))
       }
-      if (searchs?.field2) {
+      if (searchs.hasOwnProperty('field2')) {
-         videoData = videoData?.filter(({ cameraId }) => searchs?.field2.some(v => v == cameraId))
+         videoData = videoData?.filter(({ cameraId }) => filterGroup[2].filters.find(v => v.num == searchs?.field2).cameraIds.some(v => v == cameraId))
       }
-      if (searchs?.field3) {
+      if (searchs.hasOwnProperty('field3')) {
-         videoData = videoData?.filter(({ cameraId }) => searchs?.field3.some(v => v == cameraId))
+         videoData = videoData?.filter(({ cameraId }) => filterGroup[3].filters.find(v => v.num == searchs?.field3).cameraIds.some(v => v == cameraId))
       }
-      if (searchs?.field4) {
+      if (searchs.hasOwnProperty('field4')) {
-         videoData = videoData?.filter(({ cameraId }) => searchs?.field4.some(v => v == cameraId))
+         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
                <div style={{ width: 300, height: "100%", border: `1px solid ${mould('#003D9E', 'rgba(197,201,207,0.4', '')}`, position: 'relative', padding: 5 }}>
                   <div>查询：
                      <TreeSelect
+                        className={template + 1}
                         style={{ width: 230, border: `1px solid  ${mould('rgba(255, 255, 255, 0.488)', 'rgba(151,151,151,0.5)', '')}`, backgroundColor: `${mould('#01185F', '#FFFFFF', '#ECECEC')}` }}
-                        dropdownStyle={{ maxHeight: 230, overflow: 'auto', color: '#FFFFFF', }}
+                        dropdownStyle={{ maxHeight: `calc(100% - 62px)`, overflow: 'auto', color: '#FFFFFF', }}
                         treeData={queryData}
                         placeholder="请选择"
                         multiple={true}
@@ -394,6 +408,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         blockNode={false}
                         defaultExpandAll={true}
                         expandAll={true}
+                        // labelEllipsis={true}
                         onChange={(e) => {
                            // 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', '')}`,
                }}>
                   <div style={{ display: 'flex', }}>
-                     <div style={{ flex: 1, marginTop: '10px', }}>
+                     <div id='formSearch' style={{ flex: 1, marginTop: '10px', }}>
                         <Form
                            onSubmit={(values) => console.log(values)}
                            // onValueChange={values=>console.log(values)}
@@ -434,16 +449,61 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         >
                            <Form.Input label={<span style={{ marginRight: -14, display: 'inline-block' }}>设备搜索:</span>} field="name" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} />
                            {filterGroup?.map(v => {
-                              return <Form.Select
+                              let nameLength = 2
-                                 label={<span style={{ marginRight: -14, display: 'inline-block' }} title={v.name}>{`${v.name.substr(0, 2)}...:`}</span>}
+                              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 ? <Form.Select
+                                 label={<span style={{ marginRight: -14, display: 'inline-block' }} title={v.name}>{v.name.length > nameLength ? `${v.name.substr(0, nameLength)}...:` : v.name + ':'}</span>}
                                  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 => <Form.Select.Option value={vv.cameraIds} key={vv.num}>{vv.name}</Form.Select.Option>)}
+                                 {v.filters.map(vv => <Form.Select.Option value={vv.num} key={vv.num}>{vv.name}</Form.Select.Option>)}
-                              </Form.Select>
+                              </Form.Select> : ""
                            })}
                         </Form>
                      </div>
@@ -455,7 +515,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         <Button
                            theme="solid"
                            type="primary"
-                           style={{ width: 48, height: 30, borderRadius: 3, marginRight: 8, }}
+                           style={{ width: 48, height: 30, borderRadius: 3, marginRight: 8, backgroundColor: mould('#1859C1', '#525353', '#6C6C6C'), color: '#FFFFFF' }}
                            onClick={() => {
                               api.current.validate().then((v) => {
                                  let aa = JSON.stringify(v);
@@ -492,7 +552,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                      <div id='rearProjection' style={{ flex: 1, height: '100%' }}>
                         <Row style={{ height: `calc( 100% - 90px)` }}>
                            {playData?.slice((page - 1) * pageSize, page * pageSize)?.map(v => {
-                              return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} showHeader={showHeader} videoPlay={videoPlay} />
+                              return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} showHeader={showHeader} videoPlay={videoPlay} mould={mould} />
                            })}
                         </Row>
                         <div
@@ -519,12 +579,12 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                      </div>
                      {/* 视频设置 */}
                      <div style={{
-                        width: 64, height: 476, background: '#01185F', boxShadow: 'inset 0px 0px 5px 1px rgba(28,96,254,0.4000)', borderRadius: ' 1px', textAlign: 'center',
+                        width: 64, height: 476, background: mould('#01185F', ' linear-gradient(197deg, rgba(255,255,255,0.65) 0%, #E4E4E4 100%)', 'linear-gradient(197deg, rgba(38,38,38,0.65) 0%, #101010 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.4000)', 'rgba(97,94,94,0.5)', 'rgba(132,132,132,0.5)')}`, borderRadius: ' 1px', textAlign: 'center',
                      }}>
-                        {[{ img: 'gongge', value: '宫格设置', screen: [{ img: 'screen1', value: '单屏' }, { img: 'screen4', value: '4分屏' }, { img: 'screen6', value: '6分屏' }, { img: 'screen12', value: '12分屏' },] },
+                        {[{ img: mould('blueGongge', 'whiteGongge', 'blackGongge'), value: '宫格设置', screen: [{ img: mould('blueScreen1', 'whiteScreen1', 'blackScreen1'), value: '单屏' }, { img: mould('blueScreen4', 'whiteScreen4', 'blackScreen4'), value: '4分屏' }, { img: mould('blueScreen6', 'whiteScreen6', 'blackScreen6'), value: '6分屏' }, { img: mould('blueScreen12', 'whiteScreen12', 'blackScreen12'), value: '12分屏' },] },
-                        { img: 'polling', value: '轮询设置', },
+                        { img: mould('bluePolling', 'whitePolling', 'blackPolling'), value: '轮询设置', },
-                        { img: 'back', value: '背投', },
+                        { img: mould('blueBackr', 'whiteBack', 'blackBack'), value: '背投', },
-                        { img: 'monitor', value: '监控地图' },].map((v, index) => {
+                        { img: mould('blueMonitor', 'whiteMonitor', 'blackMonitor'), value: '监控地图' },].map((v, index) => {
                            return <div key={v.value + index}>
                               <Popover
                                  position='left'
@@ -532,20 +592,20 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                                  content={() => {
                                     switch (v.value) {
                                        case '宫格设置':
-                                          return <div style={{ height: 69, background: '#01185F', boxShadow: ' inset 0px 0px 5px 1px rgba(28,96,254,0.2500)', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
+                                          return <div style={{ height: 69, background: mould('#01185F', 'linear-gradient(245deg, #FFFFFF 0%, #EAEBEC 100%)', 'linear-gradient(197deg, rgba(38,38,38,0.65) 0%, #101010 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.2500)', 'rgba(97,94,94,0.39)', 'rgba(132,132,132,0.5)')}`, display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
                                              {v.screen.map((item) => {
                                                 return <div key={item.img} onClick={() => flipScreens(item.value)}>
                                                    <img src={`/assets/images/application/${item.img}.png`} alt="" style={{ width: 40, height: 40, }} />
-                                                   <div style={{ width: 40, fontWeight: 400, color: ' #D9D9D9', fontSize: 12, textAlign: 'center' }}>{item.value}</div>
+                                                   <div style={{ width: 40, fontWeight: 400, color: mould('#D9D9D9', '#615E5E', '#D9D9D9'), fontSize: 12, textAlign: 'center' }}>{item.value}</div>
                                                 </div>
                                              })}
                                           </div>
                                        case '轮询设置':
-                                          return <div style={{ height: 48, background: '#01185F', boxShadow: ' inset 0px 0px 5px 1px rgba(28,96,254,0.2500)', color: ' #D9D9D9', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
+                                          return <div style={{ height: 48, background: mould('#01185F', 'linear-gradient(245deg, #FFFFFF 0%, #EAEBEC 100%)', 'linear-gradient(197deg, rgba(38,38,38,0.65) 0%, #101010 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.2500)', 'rgba(97,94,94,0.39)', 'rgba(132,132,132,0.5)')}`, color: ' #D9D9D9', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
                                              <Switch onChange={(v, e) => {
                                                 console.log(v);
                                                 setPolling(v)
-                                             }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', backgroundColor: polling ? '#2f53ea' : '' }} checked={polling} />
+                                             }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', backgroundColor: polling ? mould('#2f53ea') : '' }} checked={polling} />
                                              轮询间隔
                                              <Input value={pollingTime} disabled={polling ? false : true} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', backgroundColor: polling ? "" : 'rgb(217, 217, 217)' }}
                                                 onChange={(value) => {

code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less

@@ -20,12 +20,12 @@
     background: #01185f;
     box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4);
   }
-  input::placeholder{
+  input::placeholder {
     color: #fff;
   }
-//   .semi-input-wrapper-disabled {
+  //   .semi-input-wrapper-disabled {
-//     background-color: #fff;
+  //     background-color: #fff;
-//   }
+  //   }
   .semi-form-field {
     padding-right: 6px;
   }
@@ -45,6 +45,9 @@
    span {
     color: rgba(0, 0, 0, 0.65);
   }
+  .semi-button-content {
+    color: #fff;
+  }
   .semi-page-item-active {
     color: rgb(17, 17, 17);
   }
@@ -86,9 +89,17 @@
    span {
     color: #fff;
   }
+  .semi-select-selection-text,
+  .semi-select-selection-placeholder {
+    color: black;
+  }
   .semi-icon {
     color: black;
   }
+  .semi-icon-chevron_left,
+  .semi-icon-chevron_right {
+    color: #fff;
+  }
   .semi-page-item-active {
     color: rgb(17, 17, 17);
   }
@@ -101,9 +112,9 @@
     border: 1px solid rgba(255, 255, 255, 0.488);
   }
   input {
-    color: #fff !important;
+    color: rgba(0, 0, 0, 0.45) !important;
-    background: #01185f;
+    background: #ececec;
-    box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4);
+    box-shadow: inset 0px 0px 5px 1px rgba(39, 39, 39, 0.2);
   }
   input::placeholder,
   .semi-input-wrapper::-ms-value {
@@ -119,4 +130,9 @@
   {
     color: #fff;
   }
+  //   .semi-popover {
+  //     .semi-tree-wrapper {
+  //       background-color: red;
+  //     }
+  //   }
 }