Merge branch 'dev_trial' of https://gitea.anxinyun.cn/free-sun/FS-IOT into dev_trial

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);
@@ -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={{
+            <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,
+               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/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

@@ -10,9 +10,9 @@ let timing
 let projectScrollbar;
 const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
    // console.log({ 视频: treeData });
-   // console.log(filterGroup);
+   console.log(filterGroup);
    // console.log(headerName);
-   console.log(videoPlay);
+   // console.log(videoPlay);
    // console.log(template);
    // console.log(showHeader);
 
@@ -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(() => {
@@ -164,6 +177,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       }
    }, [queryValue]) //查询参数改变时
 
+
    useEffect(() => {
       let playVideo = []
       const videoPlay = (data, values) => {
@@ -177,8 +191,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 +205,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
             }
          })
       }
+      console.log(leftTree, leftValue);
       videoPlay(leftTree, leftValue)
       console.log(playVideo);
       setPlayData(playVideo);
@@ -231,20 +246,20 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       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);
       setPlayData(videoData)
@@ -267,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])
 
@@ -322,14 +337,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 +372,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 +384,12 @@ 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)' }}
+                        className={template + 1}
-                        dropdownStyle={{ maxHeight: 300, overflow: 'auto', color: '#FFFFFF', }}
+                        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: `calc(100% - 62px)`, overflow: 'auto', color: '#FFFFFF', }}
                         treeData={queryData}
                         placeholder="请选择"
                         multiple={true}
@@ -379,7 +407,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         value={leftValue}
                         blockNode={false}
                         defaultExpandAll={true}
-                        expandedKeys={leftValue}
+                        expandAll={true}
+                        // labelEllipsis={true}
                         onChange={(e) => {
                            // console.log(e);
                            setLeftValue(e)
@@ -407,10 +436,10 @@ 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', }}>
+                     <div id='formSearch' style={{ flex: 1, marginTop: '10px', }}>
                         <Form
                            onSubmit={(values) => console.log(values)}
                            // onValueChange={values=>console.log(values)}
@@ -420,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, color: "#fff", background: "#01185f", boxShadow: " inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4)" }}
+                                 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>
@@ -441,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);
@@ -475,10 +549,10 @@ 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} />
+                              return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} showHeader={showHeader} videoPlay={videoPlay} mould={mould} />
                            })}
                         </Row>
                         <div
@@ -505,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'
@@ -518,22 +592,22 @@ 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', }} 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', }}
+                                             <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 +618,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, //全选文字
@@ -19,11 +20,109 @@
     background: #01185f;
     box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4);
   }
+  input::placeholder {
+    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-button-content {
+    color: #fff;
+  }
+  .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: #fff;
+    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-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);
+  }
+  .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: rgba(0, 0, 0, 0.45) !important;
+    background: #ececec;
+    box-shadow: inset 0px 0px 5px 1px rgba(39, 39, 39, 0.2);
+  }
+  input::placeholder,
+  .semi-input-wrapper::-ms-value {
+    color: #fff;
+  }
+  .semi-input-wrapper-disabled {
+    background-color: #fff;
+  }
   .semi-form-field {
     padding-right: 6px;
   }
@@ -31,4 +130,9 @@
   {
     color: #fff;
   }
+  //   .semi-popover {
+  //     .semi-tree-wrapper {
+  //       background-color: red;
+  //     }
+  //   }
 }

code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

@@ -1156,7 +1156,7 @@ const MirroringDetail = (props) => {
                                                     <div style={{ color: 'rgba(0,0,0,0.65)' }}>
                                                         {
                                                             labelEditNum == item.num ? (
-                                                                <Input value={item.name} onBlur={() => { toChangeLabel(item.num, item.name, addLabelNum) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input>
+                                                                <Input value={item.name} onBlur={() => { toChangeLabel(item.num, item.name, addLabelNum) }} onChange={(value) => toEditLabel(value, index)} style={{ width: 120 }} maxLength={6} className='inputpadding' size='small'></Input>
                                                             ) : (item.name)
                                                         }
                                                     </div>