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

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx

@@ -1,16 +1,27 @@
-import React, { useState } from 'react'
-import { Modal,Form,Row,Col,Spin } from '@douyinfe/semi-ui';
+import React, { useState ,useRef} from 'react'
+import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
 import { IconTickCircle } from '@douyinfe/semi-icons';
 function nvrModal(props){
+  const {modalName}=props
+  const form = useRef();
   const [visible, setVisible] = useState(false);//是否显示弹框
   const [isloading,setloading] = useState(false);//是否显示loading
   const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
-  const [step,setstep] = useState(0)
+  const [step,setstep] = useState(0)//第几步
+  const [okText,setokText] = useState('测试校验')//ok弹框text  右边
+  const [cancelText,setcancelText] = useState('取消')//取消弹框text  左边
+  const opts ={//添加完成确认后通知
+    title:'Hi',
+    content:'添加成功',
+    duration:3
+  }
   function showDialog() {//打开弹框
     setVisible(true);
   }
-  function handleOk() {//点击弹框确定
-    // setVisible(false);
+  function handleOk() {//点击弹框确定  右边按钮
+    if(step==0){
+      form.current.validate()
+      .then(values=>{//表单校验成功
         setloading(true);
         setTimeout(() => {
           setloadingTip('...接受成功')
@@ -18,38 +29,62 @@ function nvrModal(props){
             setloadingTip('已完成')
             setTimeout(() => {
               setstep(1);
+              setokText('确认');
+              setcancelText('上一步');
               setloading(false);
             }, 2000);
           },2000)
         }, 2000);
+      })
+      .catch(errors=>{//表单校验失败
+        console.log('errors',errors);
+      })
+      
+    }
+    else{
+      Notification.success(opts)
+      setVisible(false);
+    }
   }
   function handleAfterClose(){//在关闭之后
-    console.log('after');
+    setstep(0);
+    setokText('测试校验');
+    setcancelText('取消');
   }
-  function handleCancel() {//点击弹框取消
+  function handleCancel() {//点击弹框取消  左边按钮
+    if(step==0){
       setVisible(false);
     }
+    else{
+      setstep(0);
+      setokText('测试校验');
+      setcancelText('取消');
+    }
+  }
+  function handleLocation(){//高德经纬度
+    console.log('handleLocationhandleLocation');
+  }
   return (
     <>
-        <div onClick={showDialog}>{props.modalName}</div>
+      <div onClick={showDialog}>{modalName}</div>
       <Modal
           title="添加NVR"
-            okText="测试校验"
-            // cancelText 取消按钮
+          okText={okText}
+          cancelText={cancelText} //取消按钮
           visible={visible}
           onOk={handleOk}
-            height={386}
           width={607}
-            afterClose={handleAfterClose} //>=1.16.0
+          afterClose={handleAfterClose}
           onCancel={handleCancel}
       >
         <Spin tip={loadingTip} spinning={isloading}>
-            {step==0?<div style={{paddingLeft:16+'px'}}>
+          {step==0?<div style={{paddingLeft:16}}>
             <Form 
               labelPosition='left'
               labelAlign='left'
               labelWidth= '90px'
-                onValueChange={values=>console.log(values)}>
+              onValueChange={values=>console.log(values)}
+              getFormApi={formApi => form.current = formApi}>
               <Row>
                 <Col span={12}>
                   <Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
@@ -67,13 +102,13 @@ function nvrModal(props){
                   ]}/>
                 </Col>
                 <Col span={24}>
-                    <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}>
+                  <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421 }}>
                     <Form.Select.Option value="abc">Semi</Form.Select.Option>
                     <Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
                     <Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
                   </Form.Select>
                 </Col>
-                  <Col span={24} style={{display:'flex',alignItems:'center'}}>
+                <Col span={24} style={{display:'flex'}}>
                   <Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
                     rules={[
                     { required: true, message: '请输入或拾取高德经纬度坐标' }
@@ -82,20 +117,23 @@ function nvrModal(props){
                     width:32,
                     height:32,
                     background:"#1859C1",
-                      marginLeft:4+'px',
+                    marginLeft:4,
                     display:'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
                     cursor: "pointer",
-                      borderRadius: 3+'px'}}>
+                    marginTop:12,
+                    borderRadius: 3+'px'}}
+                    onClick={handleLocation}>
                     <img src="../../../assets/images/background/location.png" width={16} height={20}/>
                   </div>
                 </Col>
               </Row>
             </Form>
-            </div>:
-            <div >
-              <div style={{marginTop:50,display: 'flex', justifyContent: 'center'}}>
+          </div>
+          ://下一步
+          <div style={{height:224}}>
+            <div style={{paddingTop:50,display: 'flex', justifyContent: 'center'}}>
               <IconTickCircle style={{color:'#04B234',fontSize:60}}/>
             </div>
             <div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import { Modal, CheckboxGroup, Checkbox } from "@douyinfe/semi-ui";
+
+function Setup(props) {
+  const { dispatch, actions, user, loading, visible, close, editData } = props;
+  return (
+    <Modal
+      title="基本对话框"
+      visible={visible}
+      onOk={() => {
+        close();
+      }}
+      onCancel={() => {
+        close();
+      }}
+    >
+      <CheckboxGroup
+        options={[
+          { label: "抖音", value: "abc" },
+          { label: "火山", value: "hotsoon" },
+          { label: "皮皮虾", value: "pipixia" },
+          { label: "今日头条", value: "toutiao" },
+        ]}
+        style={{ width: "100%" }}
+        direction="horizontal"
+        defaultValue={["hotsoon"]}
+        onChange={()=>{}}
+      />
+    </Modal>
+  );
+}
+
+export default Setup;

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
 import "../style.less";
-import NvrModal from "../components/nvrModal"
+import NvrModal from "../components/nvrModal";
+import Setup from "../components/setup";
 
 const NvrHeader = (props) => {
   const { dispatch, actions, user, loading } = props;
+  const [setup, setSetup] = useState(false);
 
   const screen = {
     width: 193,
@@ -16,7 +18,6 @@ const NvrHeader = (props) => {
   const columns = [
     {
       title: "序号",
-      align: "center",
       render: (text, record, index) => {
         return index + 1;
       },
@@ -24,8 +25,8 @@ const NvrHeader = (props) => {
     {
       title: "设备名称",
       //   dataIndex: "name",///
-      align: "center",
       width: 200,
+      background: "red",
       render: (text, record, index) => {
         return (
           <div>
@@ -45,34 +46,30 @@ const NvrHeader = (props) => {
     },
     {
       title: "设备厂家",
-      align: "center",
       dataIndex: "size",
     },
     {
       title: "SIP地址",
-      align: "center",
       dataIndex: "owner",
     },
     {
       title: "端口号",
-      align: "center",
       dataIndex: "updateTime",
     },
     {
       title: "通道数",
-      align: "center",
       dataIndex: "nameIconSrc",
     },
     {
       title: "操作",
-      align: "center",
+      width: "20%",
       dataIndex: "",
       render: (y) => {
         return (
           <>
-            <Button>修改</Button>
-            <Button>查看</Button>
-            <Button>删除</Button>
+            <Button theme="borderless"><NvrModal modalName="修改" /></Button>
+            <Button theme="borderless">查看</Button>
+            <Button theme="borderless">删除</Button>
           </>
         );
       },
@@ -109,9 +106,17 @@ const NvrHeader = (props) => {
   ];
   return (
     <>
-      <div style={{position:''}}>
-                <video id='nvrBanner' autoPlay loop muted style={{ width: '100%', objectFit: 'cover', height: 171 }} src='/assets/video/nvr_banner.mp4' type='video/mp4' />
-                <div style={{position: 'absolute',top:12}}>
+      <div style={{ position: "" }}>
+        <video
+          id="nvrBanner"
+          autoPlay
+          loop
+          muted
+          style={{ width: "100%", objectFit: "cover", height: 171 }}
+          src="/assets/video/nvr_banner.mp4"
+          type="video/mp4"
+        />
+        <div style={{ position: "absolute", top: 12 }}>
           <div
             style={{
               fontSize: 22 + "px",
@@ -144,7 +149,7 @@ const NvrHeader = (props) => {
               cursor: "pointer",
             }}
           >
-                        <NvrModal modalName="添加NVR"/>
+            <NvrModal modalName="添加NVR" />
           </div>
         </div>
       </div>
@@ -215,7 +220,7 @@ const NvrHeader = (props) => {
           </Form>
           <div
             style={{
-              width: 0,
+              width: 150,
               display: "flex",
               justifyContent: "flex-end",
               alignItems: "flex-end",
@@ -228,8 +233,8 @@ const NvrHeader = (props) => {
                 width: 65,
                 height: 30,
                 borderRadius: 3,
-                marginBottom: "20px",
-                marginRight: "20px",
+                marginBottom: 20,
+                marginRight: 20,
               }}
             >
               搜素
@@ -243,7 +248,7 @@ const NvrHeader = (props) => {
                 backGround: "#FFFFFF",
                 borderRadius: 3,
                 border: "1px solid #D9D9D9",
-                marginBottom: "20px",
+                marginBottom: 20,
               }}
             >
               重置
@@ -251,8 +256,15 @@ const NvrHeader = (props) => {
           </div>
         </div>
       </div>
-      <Table
-        title={
+      <div style={{ background: "#FFFFFF", marginTop: 5 }}>
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "13px 20px",
+          }}
+        >
           <div
             style={{
               width: 64,
@@ -266,17 +278,67 @@ const NvrHeader = (props) => {
           >
             设备列表
           </div>
-        }
+          <div>
+            <Button
+              style={{
+                width: 32,
+                height: 32,
+                background: "#D9D9D9",
+                borderadius: 3,
+                marginRight: 20,
+              }}
+              type="primary"
+              key="primary"
+              onClick={() => {
+                setSetup(true);
+              }}
+            >
+              <img
+                src="../../../../assets/images/background/setup.png"
+                alt="设置"
+                style={{ width: 18, height: 18 }}
+              />
+            </Button>
+            <Button
+              style={{
+                width: 65,
+                height: 32,
+                background: "#FFFFFF",
+                borderRadius: 3,
+                border: "1px solid #1859C1",
+              }}
+            >
+              导出
+            </Button>
+          </div>
+        </div>
+        <Table
           columns={columns}
           dataSource={data}
           pagination={false}
           bordered={false}
+          empty="暂无数据"
+          style={{ padding: "0px 20px" }}
+        />
+        {setup ? (
+          <Setup
+            visible={true}
+            close={() => {
+              setSetup(false);
+              // setEditData(null)
+            }}
+            // reportType={reportType}
+            // editData={editData}
           />
+        ) : (
+          ""
+        )}
+      </div>
     </>
   );
 };
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   const { auth, global, members } = state;
   return {
     loading: members.isRequesting,