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/videoScreen.jsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui';
+import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox, InputNumber } from '@douyinfe/semi-ui';
 import './videoScreen.less'
 import VideoCard from './videoCard'
 import { version } from 'less';
 
-
+let timing
 const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
-   console.log({ 视频: treeData });
-   console.log(filterGroup);
-   console.log(headerName);
-   console.log(videoPlay);
-   console.log(template);
-   console.log(showHeader);
+   // console.log({ 视频: treeData });
+   // console.log(filterGroup);
+   // console.log(headerName);
+   // console.log(videoPlay);
+   // console.log(template);
+   // console.log(showHeader);
 
    // const treeData = [
    //    {
@@ -102,14 +102,19 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
    //    }]
 
    const [pageSize, setPageSize] = useState(4) //每页视频数量
+   const [page, setPage] = useState(1) //页码
    const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //查询树状数据
    const [leftTree, setLefTtree] = useState(treeData) //左侧树状数据
    const [playData, setPlayData] = useState([]) //视频数据
    const [queryValue, setQueryValue] = useState(['全部']) //查询条件
    const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) //树状被选中的视频
    const [selectAll, setSelectAll] = useState(true) //全选
+   const [searchs, setSearchs] = useState({}) //搜索
+   const [polling, setPolling] = useState(false) //轮询
+   const [pollingTime, setPollingTime] = useState(1) //轮询时间
 
    const api = useRef();
+   const pageRef = useRef(page);
    const chooseAll = useRef(true);
 
 
@@ -124,7 +129,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       videoData(treeData, values)
       setLefTtree(treeData)
       setLeftValue(treeData.map(v => v.value))
-   }, [treeData])
+   }, [treeData, filterGroup])
 
    useEffect(() => {
       console.log(queryValue);
@@ -184,8 +189,70 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
          }
       }
 
-   }, [leftValue])
+   }, [leftValue])  //树状勾选结果
+
+   useEffect(() => {
+      console.log(searchs);
+      let videoData = []
+      let wholeVideo = treeData?.map(v => {
+         if (v.children) {
+            v.children.map(vv => {
+               if (vv.camera) videoData.push(vv)
+               if (vv.children) {
+                  vv.children.map(c => {
+                     if (c.camera) videoData.push(c)
+                     if (c.children) {
+                        c.children.map(cc => {
+                           if (cc.camera) videoData.push(cc)
+                        })
+                     }
+                  })
+               }
+            })
+         }
+      })
+      console.log(videoData);
+
+      let nameData = videoData?.find(v => v?.label.includes(searchs.name))
+      console.log(nameData);
+
+      filterGroup
+
+      if (searchs?.field0) {
+         let videoId = [] //视频id
+         for (let i in searchs) {
+            console.log(i, searchs[i]);
+
+         }
+
+      }
+
+   }, [searchs])
+
+
+
+
+   useEffect(() => {
+      let pollingTimes = pollingTime || 1
+      if (timing) clearInterval(timing)
+      if (polling) {
+         timing = setInterval(() => {
+            let pages =  pageRef.current + 1
+            if (pages > Math.ceil(playData?.length / pageSize)) {
+               setPage(1)
+               pageRef.current=1
+            } else {
+               setPage(pages)
+               pageRef.current=pages
+            }
+         }, pollingTimes * 1000 * 5)
+      }
+   }, [polling, playData,pollingTime])
 
+   useEffect(() => {
+      setPage(1)
+      pageRef.current=1
+   }, [pageSize])
 
    //确定查询条件下视频总数
    const videoData = (d, v) => {
@@ -200,6 +267,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       }
       playVideoData(videos)
       setPlayData(playVideo)
+      playVideoData.current = playVideo
+      return playVideo
    }
 
 
@@ -224,7 +293,8 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       }
    }
 
-   console.log(queryValue);
+   // console.log(playData);
+
    return (
       <>
          <div
@@ -281,6 +351,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                      treeData={leftTree}
                      value={leftValue}
                      blockNode={false}
+                     defaultExpandAll
                      onChange={(e) => {
                         // console.log(e);
                         setLeftValue(e)
@@ -288,7 +359,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                      onSelect={(e) => {
                         // console.log(e);
                      }}
-                     style={{ width: 150, color: '#FFFFFF' }}
+                     style={{ color: '#FFFFFF' }}
                   />
                   <Checkbox
                      checked={selectAll}
@@ -313,7 +384,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                            layout="horizontal"
                            style={{ position: "relative", width: "100%", flex: 1 }}
                         >
-                           <Form.Input label={<span style={{ marginRight: -14, display: 'inline-block' }}>设备搜索:</span>} field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} />
+                           <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}>我的...:</span>}
@@ -323,32 +394,14 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                                  placeholder="全部"
                                  showClear
                               >
-                                 {v.filters.map(vv => <Form.Select.Option value={vv.num}>{vv.name}</Form.Select.Option>)}
+                                 {v.filters.map(vv => <Form.Select.Option value={vv.cameraIds} key={vv.num}>{vv.name}</Form.Select.Option>)}
                               </Form.Select>
                            })}
-                           {/* <Form.Select
-                            label="状态查询："
-                            labelPosition="left"
-                            field="state"
-                            style={screen}
-                            placeholder="全部"
-                            showClear
-                        >
-                            <Form.Select.Option value="ON">在线</Form.Select.Option>
-                            <Form.Select.Option value="OFF">离线</Form.Select.Option>
-                            <Form.Select.Option value="UNKONW">未知</Form.Select.Option>
-                            <Form.Select.Option value="DISABLED">禁用</Form.Select.Option>
-                        </Form.Select>
-                       */}
                         </Form>
                      </div>
                      <div
                         style={{
                            marginTop: '10px',
-                           // width: 150,
-                           // display: "flex",
-                           // justifyContent: "flex-end",
-                           // alignItems: "flex-end",
                         }}
                      >
                         <Button
@@ -356,10 +409,11 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                            type="primary"
                            style={{ width: 48, height: 30, borderRadius: 3, marginRight: 8, }}
                            onClick={() => {
-                              // api.current.validate().then((v) => {
-                              //    setSearch(v);
+                              api.current.validate().then((v) => {
+                                 let aa = JSON.stringify(v);
+                                 setSearchs(JSON.parse(aa))
                                  // setQuery({ limit: 10, page: 0 })
-                              // });
+                              });
                            }}
                         >
                            搜索
@@ -389,7 +443,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                      {/* 视频 */}
                      <div style={{ flex: 1, height: '100%' }}>
                         <Row style={{ height: `calc( 100% - 160px )` }}>
-                           {playData?.map(v => {
+                           {playData?.slice((page - 1) * pageSize, page * pageSize)?.map(v => {
                               return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} />
                            })}
                         </Row>
@@ -405,12 +459,12 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                            </span>
                            {playData.length > 0 ? <Pagination
                               total={playData.length}
-
-                              // currentPage={1}
+                              currentPage={page}
+                              pageSize={pageSize}
                               style={{ color: 'white' }}
                               onChange={(currentPage, pageSize) => {
-                                 // setQuery({ limit: pageSize, page: currentPage - 1 });
-                                 // page.current = currentPage - 1
+                                 setPage(currentPage)
+                                 pageRef.current= currentPage
                               }}
                            /> : ""}
                         </div>
@@ -421,11 +475,12 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                      }}>
                         {[{ img: 'gongge', value: '宫格设置', screen: [{ img: 'screen1', value: '单屏' }, { img: 'screen4', value: '4分屏' }, { img: 'screen6', value: '6分屏' }, { img: 'screen12', value: '12分屏' },] },
                         { img: 'polling', value: '轮询设置' },
-                        { img: 'back', value: '背投' },
+                        { img: 'back', value: '背投', },
                         { img: 'monitor', value: '监控地图' },].map((v, index) => {
-                           return <div key={index}>
+                           return <div key={v.value + index}>
                               <Popover
                                  position='left'
+                                 trigger="click"  //气泡点击出效果，方便调试
                                  content={() => {
                                     switch (v.value) {
                                        case '宫格设置':
@@ -439,9 +494,15 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                                           </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' }}>
-                                             <Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} />
+                                             <Switch onChange={(v, e) => {
+                                                console.log(v);
+                                                setPolling(v)
+                                             }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} checked={polling} />
                                              轮询间隔
-                                             <Input style={{ width: 80, color: ' #D9D9D9', border: ' 1px solid #D9D9D9', }} defaultValue='1' />
+                                             <Input value={pollingTime} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', }}
+                                                onChange={(value) => {
+                                                   setPollingTime(Number(value.replace(/[^0-9]/ig, '')))
+                                                }} />
                                              分钟
                                           </div>
                                        default:

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

@@ -1,6 +1,3 @@
-
-
-
 .KJBlue {
   .semi-tree-option,
   .semi-icon,
@@ -14,14 +11,20 @@
     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 {
+  input::placeholder,
+  .semi-input-wrapper::-ms-value{
     color: #fff;
   }
 
-  .semi-form-field{
+  .semi-form-field {
     padding-right: 6px;
-}
+  }
+  .semi-input-wrapper,.semi-input-wrapper-default  //轮询输入框文字
+   {
+    color: #fff;
+  }
 }

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import '../style.less'
-import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select } from "@douyinfe/semi-ui"
+import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select, Toast,Button } from "@douyinfe/semi-ui"
 import VideoScreen from '../components/videoScreen';
+import { set } from 'nprogress';
 
 
 const MirroringDetail = (props) => {
@@ -183,6 +184,38 @@ const MirroringDetail = (props) => {
         setCheckall(checkedList.length === showCameraList.length);
     }
     function topublish (publish) {//编辑镜像信息
+        let filterGroupnum=0
+        let cantopublish=true
+        for (let i = 0; i < filterGroup.length; i++) {
+            for (let j = 0; j < filterGroup.length; j++) {
+                if(filterGroup[i].name==filterGroup[j].name){
+                    filterGroupnum++
+                }
+            }
+        }
+        if(filterGroupnum>filterGroup.length){
+            cantopublish=false
+            let opts = {
+                content: '筛选项名称不能重复，请修改',
+                duration: 3,
+            };
+            Toast.error(opts)
+        }else{
+            for (let k = 0; k < filterGroup.length; k++) {
+                let filtersarr=[]
+                for (let l = 0; l < filterGroup[k].filters.length; l++) {
+                    filtersarr.push(filterGroup[k].filters[l].name)
+                }
+                if(Array.from(new Set(filtersarr)).length<filterGroup[k].filters.length){
+                    cantopublish=false
+                    Toast.error({
+                        content: '标签组名称不能重复，请修改',
+                        duration: 3,
+                    })
+                }
+            }
+        }
+        if(cantopublish){
             let mirrordata = {
                 mirrorId: mirrorId,
                 template: template,
@@ -196,6 +229,7 @@ const MirroringDetail = (props) => {
                 history.goBack()
             })
         }
+    }
     function nodeDelete (item) {//删除树状子节点
         let mainData = JSON.parse(JSON.stringify(treeData))
         let nodeKeyArr = item.key.split('-')
@@ -723,6 +757,44 @@ const MirroringDetail = (props) => {
         sethasModify(true)
         setFilterGroup(filterGroupList)
     }
+    function toChangeScreen (num, name) {//筛选项去重
+        let samenum = 0
+        for (let i = 0; i < filterGroup.length; i++) {
+            if (filterGroup[i].name == name) {
+                samenum++
+            }
+        }
+        if (samenum > 1) {
+            let opts = {
+                content: '筛选项名称不能重复，请修改',
+                duration: 3,
+            };
+            Toast.error(opts)
+            setEditNum(num)
+        }
+        else {
+            setEditNum(1000)
+        }
+    }
+    function toChangeLabel (num, name, index) {//标签组去重
+        let samenum = 0
+        for (let i = 0; i < filterGroup[index].filters.length; i++) {
+            if (filterGroup[index].filters[i].name == name) {
+                samenum++
+            }
+        }
+        if (samenum > 1) {
+            let opts = {
+                content: '标签组名称不能重复，请修改',
+                duration: 3,
+            };
+            Toast.error(opts)
+            setLabelEditNum(num)
+        }
+        else {
+            setLabelEditNum(1000)
+        }
+    }
     function switchOnChange (val, index) {//筛选项是否禁用
         let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
         filterGroupList[index].forbidden = val
@@ -1000,7 +1072,7 @@ const MirroringDetail = (props) => {
                                                     <div style={{ marginLeft: 20, color: 'rgba(0,0,0,0.65)' }}>
                                                         {
                                                             editNum == item.num ? (
-                                                                <Input value={item.name} onBlur={() => { setEditNum(1000) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input>
+                                                                <Input value={item.name} onBlur={() => { toChangeScreen(item.num, item.name) }} onChange={(value) => toEditscreen(value, index)} style={{ width: 120 }} maxLength={8} className='inputpadding' size='small'></Input>
                                                             ) : (item.name)
                                                         }
                                                     </div>
@@ -1038,7 +1110,7 @@ const MirroringDetail = (props) => {
                     {addLabel ? (
                         <div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 464, background: '#FFFFFF', zIndex: 120 }}>
                             <div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}>
-                                <div style={{ fontSize: 14, color: '#F9F9F9' }}>筛选项组设置</div>
+                                <div style={{ fontSize: 14, color: '#F9F9F9' }}>标签组设置</div>
                                 <div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddLabel(false); }}>
                                     <img
                                         src="/assets/images/imageImg/close.png"
@@ -1068,7 +1140,7 @@ const MirroringDetail = (props) => {
                                                     <div style={{ color: 'rgba(0,0,0,0.65)' }}>
                                                         {
                                                             labelEditNum == item.num ? (
-                                                                <Input value={item.name} onBlur={() => { setLabelEditNum(1000) }} 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={8} className='inputpadding' size='small'></Input>
                                                             ) : (item.name)
                                                         }
                                                     </div>
@@ -1121,6 +1193,7 @@ const MirroringDetail = (props) => {
                 width={610}
                 onCancel={() => {
                     setComingVisible(false)
+                    history.goBack()
                 }}
                 okText="确定"
                 cancelText="取消"
@@ -1131,17 +1204,28 @@ const MirroringDetail = (props) => {
             <Modal
                 title="提醒"
                 visible={backVisible}
-                onOk={() => {
-                    topublish(false)
-                    setBackVisible(false)
-                }}
                 width={610}
                 onCancel={() => {
                     setBackVisible(false)
                 }}
-                okText="确定"
-                cancelText="取消"
+                // okText="确定"
+                // cancelText="取消"
                 closeOnEsc={true}
+                footer={
+                    <div>
+                        <Button type="primary" onClick={() => {
+                            history.goBack()
+                        }}>
+                            取消
+                        </Button>
+                        <Button theme='solid' type="primary" onClick={() => {
+                            topublish(false)
+                            setBackVisible(false)
+                        }}>
+                            确定
+                        </Button>
+                    </div>
+                }
             >
                 是否保存修改？~
             </Modal>