树状勾选修改

code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx

@@ -32,19 +32,16 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay }) => {
          {videoWidth && videoHeight ? videoPlay ?
             <VideoPlay sizeWh={{
                width: videoWidth - 10,
-               height: videoHeight - 40,
+               height: videoHeight - 30,
                parentWidth: videoWidth - 10,
-               parentHeight: videoHeight - 40,
+               parentHeight: videoHeight - 30,
             }}
                videoObj={videoObj.camera}
                videoStyle='true'
                containerId={videoObj.key}
                local={true} /> :
             <img src={`/assets/images/openness/${pageSize == 1 || pageSize == 4 ? 'blue2' : 'blue1.5'}.png`} style={{
-               display: 'inline-block', width: videoWidth - 10,
+               display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30,
-               height: videoHeight - 40,
-               parentWidth: videoWidth - 10,
-               parentHeight: videoHeight - 40,
             }} /> : ""}
          <div style={{ lineHeight: '30px', paddingLeft: 6 }}>{videoObj?.label}</div>
       </div>

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

@@ -9,10 +9,10 @@ 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(headerName);
-   console.log(videoPlay);
+   // console.log(videoPlay);
    // console.log(template);
    // console.log(showHeader);
 
@@ -164,6 +164,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       }
    }, [queryValue]) //查询参数改变时
 
+
    useEffect(() => {
       let playVideo = []
       const videoPlay = (data, values) => {
@@ -177,8 +178,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         vv.children.map(c => {
                            if (c.camera) playVideo.push(c)
                            if (c.children) {
-                              vv.children.map(cc => {
+                              c.children.map(cc => {
-                                 if (c.camera) playVideo.push(cc)
+                                 if (cc.camera) playVideo.push(cc)
                               })
                            }
                         })
@@ -191,6 +192,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
             }
          })
       }
+      console.log(leftTree, leftValue);
       videoPlay(leftTree, leftValue)
       console.log(playVideo);
       setPlayData(playVideo);
@@ -226,7 +228,7 @@ 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))
@@ -246,7 +248,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       if (searchs?.field4) {
          videoData = videoData?.filter(({ cameraId }) => searchs?.field4.some(v => v == cameraId))
       }
-      console.log(videoData);
+      // console.log(videoData);
       setPlayData(videoData)
 
    }, [searchs])
@@ -322,14 +324,26 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
 
    // console.log(playData);
 
+   const mould = (blue, white, black) => {
+      switch (template) {
+         case 'blue':
+            return blue
+         case 'white':
+            return white
+         case 'black':
+            return black
+         default:
+            break;
+      }
+   }
+
    return (
       <>
          <div
-            className='KJBlue'
+            className={template}
             style={{
                width: '100%', height: '100%',
-               background: 'url(/assets/images/application/background.png) 100% 100%',
+               background: `url(/assets/images/application/${mould('buleBackground', "whiteBackground", "blackBackground")}.png)`,
-               backgroundSize: '100% 100%',
                color: '#FFFFFF',
                //  minWidth: 1000,
             }}>
@@ -345,10 +359,10 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                   fontSize: '36px',
                   fontFamily: 'SourceHanSansCN - Heavy, SourceHanSansCN',
                   fontWeight: 800,
-                  color: '#FFFFFF',
+                  color: mould('#FFFFFF', 'rgba(0,0,0,0.65)', '#FFFFFF'),
                   lineHeight: '70px',
                   letterSpacing: '5px',
-                  background: 'url(/assets/images/application/titleBottom.png) 100% 100%',
+                  background: `url(/assets/images/application/${mould('buletitleBottom', "whitetitleBottom", "blacktitleBottom")}.png)`,
                   backgroundSize: '100% 100%',
                }} >{headerName}</div>
             </div> : ""}
@@ -357,11 +371,11 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
             <div style={{
                height: `calc(100% - ${showHeader ? 80 : 0}px)`, padding: '8px', display: 'flex',
             }}>
-               <div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative', padding: 5 }}>
+               <div style={{ width: 300, height: "100%", border: `1px solid ${mould('#003D9E', 'rgba(197,201,207,0.4', '')}`, position: 'relative', padding: 5 }}>
                   <div>查询：
                      <TreeSelect
-                        style={{ width: 230, border: '1px solid rgba(255, 255, 255, 0.488)' }}
+                        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: 300, overflow: 'auto', color: '#FFFFFF', }}
+                        dropdownStyle={{ maxHeight: 230, overflow: 'auto', color: '#FFFFFF', }}
                         treeData={queryData}
                         placeholder="请选择"
                         multiple={true}
@@ -379,7 +393,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         value={leftValue}
                         blockNode={false}
                         defaultExpandAll={true}
-                        expandedKeys={leftValue}
+                        expandAll={true}
                         onChange={(e) => {
                            // console.log(e);
                            setLeftValue(e)
@@ -407,7 +421,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                      全选</Checkbox>
                </div>
                <div style={{
-                  flex: 1, marginLeft: '4px', border: '2px solid #003D9E',
+                  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', }}>
@@ -421,10 +435,10 @@ 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
-                                 label={<span style={{ marginRight: -14, display: 'inline-block' }} title={v.name}>{`${v.name.substr(0,2)}...:`}</span>}
+                                 label={<span style={{ marginRight: -14, display: 'inline-block' }} title={v.name}>{`${v.name.substr(0, 2)}...:`}</span>}
                                  labelPosition="left"
                                  field={"field" + v.num}
-                                 style={{ width: 75, color: "#fff", background: "#01185f", boxShadow: " inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4)" }}
+                                 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)')} ` }}
                                  placeholder="全部"
                                  showClear
                               >
@@ -475,7 +489,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                   </div>
                   <div style={{ display: 'flex', height: '100%' }}>
                      {/* 视频 */}
-                     <div style={{ flex: 1, height: '100%' }}>
+                     <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} />
@@ -505,10 +519,10 @@ 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: '#01185F', boxShadow: 'inset 0px 0px 5px 1px rgba(28,96,254,0.4000)', borderRadius: ' 1px', textAlign: 'center',
                      }}>
                         {[{ img: 'gongge', value: '宫格设置', screen: [{ img: 'screen1', value: '单屏' }, { img: 'screen4', value: '4分屏' }, { img: 'screen6', value: '6分屏' }, { img: 'screen12', value: '12分屏' },] },
-                        { img: 'polling', value: '轮询设置' },
+                        { img: 'polling', value: '轮询设置', },
                         { img: 'back', value: '背投', },
                         { img: 'monitor', value: '监控地图' },].map((v, index) => {
                            return <div key={v.value + index}>
@@ -531,9 +545,9 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                                              <Switch onChange={(v, e) => {
                                                 console.log(v);
                                                 setPolling(v)
-                                             }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} checked={polling} />
+                                             }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', backgroundColor: polling ? '#2f53ea' : '' }} checked={polling} />
                                              轮询间隔
-                                             <Input value={pollingTime} disabled={polling ? false : true} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', }}
+                                             <Input value={pollingTime} disabled={polling ? false : true} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', backgroundColor: polling ? "" : 'rgb(217, 217, 217)' }}
                                                 onChange={(value) => {
                                                    setPollingTime(Number(value.replace(/[^0-9]/ig, '')))
                                                 }} />
@@ -544,7 +558,10 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                                     }
                                  }}
                               >
-                                 <img src={`/assets/images/application/${v.img}.png`} alt="" style={{ width: 54, height: 54, margin: '20px 0 0px 10px' }} />
+                                 <img src={`/assets/images/application/${v.img}.png`} alt="" style={{ width: 54, height: 54, margin: '20px 0 0px 10px' }}
+                                    onClick={() => {
+                                       if (v.value == '背投') document.getElementById('rearProjection').requestFullscreen()
+                                    }} />
                               </Popover>
                               <div style={{ width: 32, marginLeft: 16 }}>{v.value}</div>
                            </div>

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

@@ -1,4 +1,5 @@
-.KJBlue {
+.blue {
+  background-size: 100% 100% !important;
   .semi-tree-option,
   .semi-icon,
   .semi-checkbox-addon, //全选文字
@@ -7,28 +8,115 @@
   span {
     color: #fff;
   }
-  .semi-page-item-active{
+  .semi-page-item-active {
-   color: rgb(17, 17, 17);
+    color: rgb(17, 17, 17);
   }
   .semi-checkbox-inner-display {
     //树状多选框
     border: 1px solid rgba(255, 255, 255, 0.488);
   }
   input {
-   color:  #fff !important;
+    color: #fff !important;
     background: #01185f;
     box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4);
   }
-  input::placeholder,
+  input::placeholder{
-  .semi-input-wrapper::-ms-value{
+    color: #fff;
+  }
+//   .semi-input-wrapper-disabled {
+//     background-color: #fff;
+//   }
+  .semi-form-field {
+    padding-right: 6px;
+  }
+  .semi-input-wrapper,.semi-input-wrapper-default  //轮询输入框文字
+  {
     color: #fff;
   }
+}
+
+.white {
+  background-size: 100% 100% !important;
+  .semi-tree-option,
+   .semi-icon,
+   .semi-checkbox-addon, //全选文字
+   .semi-form-field-label-text,
+   .semi-page-item,
+   span {
+    color: rgba(0, 0, 0, 0.65);
+  }
+  .semi-page-item-active {
+    color: rgb(17, 17, 17);
+  }
+  .semi-icon-checkbox_tick,  //树状多选框勾选颜色
+  .semi-checkbox-inner-display {
+    background-color: rgba(255, 255, 255, 0.65);
+  }
+  .semi-checkbox-inner-display {
+    //树状多选框
+    border: 1px solid rgba(255, 255, 255, 0.488);
+  }
+  input {
+    color: rgba(0, 0, 0, 0.45) !important;
+    background: #ffffff;
+    box-shadow: 1px solid rgba(151, 151, 151, 0.5);
+  }
+  input::placeholder,
+  .semi-input-wrapper::-ms-value {
+    color: rgba(0, 0, 0, 0.65);
+  }
+  .semi-input-wrapper-disabled {
+    background-color: #fff;
+  }
+  .semi-form-field {
+    padding-right: 6px;
+  }
+  .semi-input-wrapper,.semi-input-wrapper-default  //轮询输入框文字
+  {
+    color: rgba(0, 0, 0, 0.65);
+  }
+}
 
+.black {
+  background-size: 100% 100% !important;
+  .semi-tree-option,
+   .semi-checkbox-addon, //全选文字
+   .semi-form-field-label-text,
+   .semi-page-item,
+   span {
+    color: #fff;
+  }
+  .semi-icon {
+    color: black;
+  }
+  .semi-page-item-active {
+    color: rgb(17, 17, 17);
+  }
+  .semi-icon-checkbox_tick,  //树状多选框勾选颜色
+  .semi-checkbox-inner-display {
+    background-color: #ffffff;
+  }
+  .semi-checkbox-inner-display {
+    //树状多选框
+    border: 1px solid rgba(255, 255, 255, 0.488);
+  }
+  input {
+    color: #fff !important;
+    background: #01185f;
+    box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4);
+  }
+  input::placeholder,
+  .semi-input-wrapper::-ms-value {
+    color: #fff;
+  }
+  .semi-input-wrapper-disabled {
+    background-color: #fff;
+  }
   .semi-form-field {
     padding-right: 6px;
   }
   .semi-input-wrapper,.semi-input-wrapper-default  //轮询输入框文字
-   {
+  {
     color: #fff;
   }
 }