摄像头列表设置完成

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

@@ -6,7 +6,7 @@ function nvrModal(props){
   const {modalName}=props
   const { dispatch, actions, user, loading,vender,close } = props;
   const nvrData = props.nvrData||{}//修改时传来的值
-  console.log('nvrDatanvrDatanvrData',nvrData);
+  // console.log('nvrDatanvrDatanvrData',nvrData);
   const form = useRef();
   const [visible, setVisible] = useState(false);//是否显示弹框
   const [isloading,setloading] = useState(false);//是否显示loading

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

@@ -8,28 +8,71 @@ import {
 } from "@douyinfe/semi-ui";
 
 function Setup(props) {
-  const { dispatch, actions, user, loading, visible, close, SETUPS } = props;
+  const {
+    dispatch,
+    actions,
+    user,
+    loading,
+    visible,
+    close,
+    SETUPS,
+    CAMERAS,
+    cameraSetup,
+  } = props;
   const [checkeds, setCheckeds] = useState([]);
   const [check, setCheck] = useState([]);
-
+  const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
-  
-  
-
-  const checkboxcss = { width: "21%", height: 16, marginBottom: "20px" };
 
   useEffect(() => {
     //获取是否勾选信息
-    const ISgetItem = localStorage.getItem(SETUPS);
+    const ISgetItem1 = localStorage.getItem(SETUPS);
-    setCheck(ISgetItem ? JSON.parse(ISgetItem):[]);
+    const ISgetItem2 = localStorage.getItem(CAMERAS);
+    if (cameraSetup) {
+      setCheck(ISgetItem2 ? JSON.parse(ISgetItem2) : []);
+    } else {
+      setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []);
+    }
   }, []);
 
+  const equipmentNVR = [
+    { name: "设备厂家", value: "a" },
+    { name: "添加账号", value: "b" },
+    { name: "通道数", value: "c" },
+    { name: "端口", value: "d" },
+    { name: "设备状态", value: "e" },
+    { name: "创建时间", value: "f" },
+  ];
+  const projectNVR = [
+    { name: "项目名称", value: "g" },
+    { name: "things名称", value: "h" },
+    { name: "things数量", value: "i" },
+  ];
+  const equipmentCamera = [
+    { name: "设备厂家", value: "manufactor" },
+    { name: "接入类型", value: "type" },
+    { name: "设备状态", value: "state" },
+    { name: "云台支持", value: "support" },
+    { name: "内存卡信息", value: "memoryCard" },
+    { name: "设备创建时间", value: "time" },
+    { name: "设备添加账号", value: "account" },
+  ];
+  const projectCamera = [
+    { name: "项目名称", value: "name" },
+    { name: "pcode", value: "pcode" },
+    { name: "结构物", value: "structure" },
+    { name: "测点", value: "measuringPoint" },
+    { name: "监测因素", value: "factor" },
+  ];
+
   return (
     <Modal
       title="表格属性设置"
       visible={visible}
-      style={{ width: 580 }}
+      style={{ width: 600 }}
       onOk={() => {
-        localStorage.setItem(SETUPS, JSON.stringify(checkeds));
+        cameraSetup
+          ? localStorage.setItem(CAMERAS, JSON.stringify(checkeds))
+          : localStorage.setItem(SETUPS, JSON.stringify(checkeds));
         close();
       }}
       onCancel={() => {
@@ -42,14 +85,14 @@ function Setup(props) {
         direction="horizontal"
         defaultValue={check}
         aria-label="表格属性设置"
+        // disabled={true}
         onChange={(checked) => {
           setCheckeds(checked);
         }}
       >
         <div
           style={{
-            width: 529,
+            width: 550,
-            height: 121,
             border: "1px solid #EAEAEA",
             padding: "0px 5px",
             borderRadius: 4,
@@ -65,32 +108,24 @@ function Setup(props) {
           >
             设备信息
           </div>
-          <div style={{ padding: "15px 30px" }}>
+          <div style={{ padding: "15px 12px", width: 530 }}>
-            <Checkbox value="a" style={checkboxcss}>
+            {(cameraSetup ? equipmentCamera : equipmentNVR).map((item) => {
-              设备厂家
+              return (
-            </Checkbox>
+                <Checkbox
-            <Checkbox value="b" style={checkboxcss}>
+                  key={item.value}
-              添加账号
+                  value={item.value}
-            </Checkbox>
+                  style={checkboxcss}
-            <Checkbox value="c" style={checkboxcss}>
+                >
-              通道数
+                  {item.name}
-            </Checkbox>
-            <Checkbox value="d" style={checkboxcss}>
-              端口
-            </Checkbox>
-            <Checkbox value="e" style={checkboxcss}>
-              设备状态
-            </Checkbox>
-            <Checkbox value="f" style={checkboxcss}>
-              创建时间
                 </Checkbox>
+              );
+            })}
           </div>
         </div>
 
         <div
           style={{
-            width: 529,
+            width: 550,
-            height: 92,
             border: "1px solid #EAEAEA",
             padding: "0px 5px",
             borderRadius: 4,
@@ -106,16 +141,18 @@ function Setup(props) {
           >
             项目信息
           </div>
-          <div style={{ padding: "15px 30px" }}>
+          <div style={{  padding: "15px 12px", width: 530 }}>
-            <Checkbox value="g" style={checkboxcss}>
+            {(cameraSetup ? projectCamera : projectNVR).map((item) => {
-              项目名称
+              return (
-            </Checkbox>
+                <Checkbox
-            <Checkbox value="h" style={checkboxcss}>
+                  key={item.value}
-              things名称
+                  value={item.value}
-            </Checkbox>
+                  style={checkboxcss}
-            <Checkbox value="i" style={checkboxcss}>
+                >
-              things数量
+                  {item.name}
                 </Checkbox>
+              );
+            })}
           </div>
         </div>
       </CheckboxGroup>

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

@@ -1,12 +1,202 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
+import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
 import "../style.less";
 import CameraModal from "../components/cameraModal";
+import NvrModal from "../components/nvrModal";
+import Setup from "../components/setup";
+import SideSheets from "../components/sideSheet";
 
 const CameraHeader = (props) => {
-  const [cameraModal,setCameraModal] = useState(false)
+  const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
-  const [modalName,setModalName] = useState('')
+  const [cameraModal, setCameraModal] = useState(false);
+  const [modalName, setModalName] = useState("");
+  const [setup, setSetup] = useState(false);
+  const [sideSheet, setSideSheet] = useState(false);
+  const [cameraSetup, setcameraSetup] = useState(false);
+  const [setupp, setSetupp] = useState([]);
+  const [venderList, setvenderList] = useState([]); //厂商信息
+  const [query, setQuery] = useState({ limit: 10, page: 0 });
+  const { equipmentWarehouse } = actions;
+  const api = useRef();
+  const CAMERAS = "cameras";
+
+  useEffect(() => {
+    dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
+      setvenderList(res.payload.data);
+    });
+    //初始化表格显示设置
+    localStorage.setItem(
+      CAMERAS,
+      JSON.stringify(["state", "type", "manufactor"])
+    );
+    attribute();
+  }, []);
+
+  useEffect(() => {
+    equipmentGetNvr();
+  }, [query]);
+
+  function equipmentGetNvr() {
+    dispatch(equipmentWarehouse.getNvr(query));
+  }
+  const columns = [
+    {
+      title: "序号",
+      render: (text, record, index) => {
+        return index + 1;
+      },
+    },
+    {
+      title: "设备名称",
+      dataIndex: "name",
+      render: (text, record, index) => {
+        return (
+          <div>
+            <span
+              style={{
+                backgroundColor: record.avatarBg,
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                display: "inline-block",
+                marginRight: "10px",
+              }}
+            />
+            {record.name}
+          </div>
+        );
+      },
+    },
+
+    {
+      title: "操作",
+      width: "20%",
+      dataIndex: "",
+      render: (_, row) => {
+        //   console.log(row);
+        return (
+          <>
+            <Button theme="borderless">
+              <NvrModal
+                nvrData={row}
+                modalName="revise"
+                venderList={venderList}
+                close={() => {
+                  equipmentGetNvr();
+                }}
+              />
+            </Button>
+            <Button
+              theme="borderless"
+              onClick={() => {
+                setSideSheet(true);
+              }}
+            >
+              查看
+            </Button>
+            <Button theme="borderless" size="large">播放</Button>
+            <Button theme="borderless">禁用</Button>
+            <Button
+              theme="borderless"
+              onClick={() => {
+                dispatch(equipmentWarehouse.delNvr(row.id));
+                equipmentGetNvr();
+              }}
+            >
+              删除
+            </Button>
+          </>
+        );
+      },
+    },
+  ];
+
+  //获取表格属性设置
+  function attribute() {
+    const arr = localStorage.getItem(CAMERAS)
+      ? JSON.parse(localStorage.getItem(CAMERAS))
+      : [];
+
+    const column = [
+      {
+        title: "设备厂家",
+        dataIndex: "venderId",
+        key: "manufactor",
+      },
+      {
+        title: "接入类型",
+        dataIndex: "createUserId",
+        key: "type",
+      },
+      {
+        title: "设备状态",
+        dataIndex: "channelCount",
+        key: "state",
+      },
+      {
+        title: "云台支持",
+        dataIndex: "port",
+        key: "support",
+      },
+      {
+        title: "内存卡信息",
+        dataIndex: "size",
+        key: "memoryCard",
+      },
+      {
+        title: "设备创建时间",
+        dataIndex: "createTime",
+        key: "time",
+      },
+      {
+        title: "设备添加账号",
+        dataIndex: "size",
+        key: "account",
+      },
+      {
+        title: "项目名称",
+        dataIndex: "updateTime",
+        key: "name",
+      },
+      {
+        title: "pcode",
+        dataIndex: "updateTime",
+        key: "pcode",
+      },
+      {
+        title: "结构物",
+        dataIndex: "updateTime",
+        key: "structure",
+      },
+      {
+        title: "测点",
+        dataIndex: "updateTime",
+        key: "measuringPoint",
+      },
+      {
+        title: "监测因素",
+        dataIndex: "updateTime",
+        key: "factor",
+      },
+    ];
+    for (let i = 0; i < arr.length; i++) {
+      let colum = column.filter((item) => {
+        return item.key === arr[i];
+      });
+      columns.splice(i + 2, 0, colum[0]);
+    }
+    setSetupp(columns);
+  }
+
+  //条件赛选样式
+  const screen = {
+    width: 193,
+    marginRight: 20,
+    marginBottom: 16,
+    color: "rgba(0, 0, 0, 0.65)",
+  };
+
   return (
     <>
       <div style={{ position: "" }}>
@@ -52,7 +242,7 @@ const CameraHeader = (props) => {
               cursor: "pointer",
             }}
             onClick={() => {
-              setModalName('add')
+              setModalName("add");
               setCameraModal(true);
             }}
           >
@@ -60,25 +250,287 @@ const CameraHeader = (props) => {
           </div>
         </div>
       </div>
-      {cameraModal?
+
+      <div
+        style={{
+          width: "100%",
+          background: "#FFFFFF",
+          borderRadius: 3,
+          padding: "8px 20px",
+          marginTop: 20,
+        }}
+      >
+        <div
+          style={{
+            height: 22,
+            fontSize: 16,
+            fontFamily: "PingFangSC-Medium, PingFang SC",
+            fontWeight: "bold",
+            color: " rgba(0, 0, 0, 0.85)",
+            lineHeight: "22px",
+            marginBottom: 16,
+          }}
+        >
+          筛选条件
+        </div>
+        <div style={{ display: "flex" }}>
+          <Form
+            onSubmit={(values) => console.log(values)}
+            // onValueChange={values=>console.log(values)}
+            getFormApi={(formApi) => (api.current = formApi)}
+            layout="horizontal"
+            style={{ position: "relative", width: "100%", flex: 1 }}
+          >
+            <Form.Input
+              label="设备搜索："
+              field="name"
+              placeholder="请输入设备名称"
+              labelPosition="left"
+              style={screen}
+            />
+            <Form.Select
+              label="接入类型："
+              labelPosition="left"
+              field="type1"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="12">111</Form.Select.Option>
+              <Form.Select.Option value="11">111111</Form.Select.Option>
+            </Form.Select>
+            <Form.Select
+              label="厂家筛选："
+              labelPosition="left"
+              style={screen}
+              field="venderId"
+              placeholder="全部"
+            >
+              {venderList.map((item) => {
+                return (
+                  <Form.Select.Option key={item.id} value={item.id}>
+                    {item.name}
+                  </Form.Select.Option>
+                );
+              })}
+            </Form.Select>
+            <Form.Select
+              label="状态查询："
+              labelPosition="left"
+              field="type2"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="yes">在线</Form.Select.Option>
+              <Form.Select.Option value="no">离线</Form.Select.Option>
+            </Form.Select>
+            <Form.Select
+              label="关联项目："
+              labelPosition="left"
+              field="type3"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="智慧环保">
+                飞尚科技1
+              </Form.Select.Option>
+              <Form.Select.Option value="智慧水务">
+                飞尚科技2
+              </Form.Select.Option>
+            </Form.Select>
+          </Form>
+          <div
+            style={{
+              width: 150,
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "flex-end",
+            }}
+          >
+            <Button
+              theme="solid"
+              type="primary"
+              style={{
+                width: 65,
+                height: 30,
+                borderRadius: 3,
+                marginBottom: 20,
+                marginRight: 20,
+              }}
+              onClick={() => {
+                api.current.validate().then((values) => {
+                  console.log(values);
+                  console.log(
+                    equipmentWarehouseNvr.data.filter((item) => {
+                      return (
+                        item.name.indexOf(values.name) > -1 &&
+                        item.venderId === values.venderId
+                      );
+                      // return item.venderId === values.venderId;
+                    })
+                  );
+                });
+                console.log(equipmentWarehouseNvr.data);
+              }}
+            >
+              搜素
+            </Button>
+            <Button
+              theme="light"
+              type="primary"
+              style={{
+                width: 65,
+                height: 30,
+                backGround: "#FFFFFF",
+                borderRadius: 3,
+                border: "1px solid #D9D9D9",
+                marginBottom: 20,
+              }}
+            >
+              重置
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div style={{ background: "#FFFFFF", marginTop: 5 }}>
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "13px 20px",
+          }}
+        >
+          <div
+            style={{
+              width: 64,
+              height: 22,
+              fontSize: 16,
+              fontfAmily: "PingFangSC-Medium, PingFang SC",
+              fontWeight: "bold",
+              color: "rgba(0, 0, 0, 0.85)",
+              lineHeight: "22px",
+            }}
+          >
+            设备列表
+          </div>
+          <div>
+            <Button
+              style={{
+                width: 32,
+                height: 32,
+                background: "#D9D9D9",
+                borderadius: 3,
+                marginRight: 20,
+              }}
+              type="primary"
+              key="primary"
+              onClick={() => {
+                setSetup(true);
+                setcameraSetup(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={setupp}
+          dataSource={equipmentWarehouseNvr.data}
+          bordered={false}
+          empty="暂无数据"
+          style={{
+            padding: "0px 20px",
+          }}
+          pagination={false}
+        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            padding: "20px 20px",
+          }}
+        >
+          <span style={{ lineHeight: "30px" }}>
+            共{equipmentWarehouseNvr.total}个设备
+          </span>
+          <Pagination
+            className="22"
+            total={equipmentWarehouseNvr.total}
+            showSizeChanger
+            currentPage={query.page + 1}
+            pageSizeOpts={[10, 20, 30, 40]}
+            onChange={(currentPage, pageSize) => {
+              setQuery({ limit: pageSize, page: currentPage - 1 });
+            }}
+          />
+        </div>
+
+        {setup ? (
+          <Setup
+            visible={true}
+            CAMERAS={CAMERAS}
+            cameraSetup={cameraSetup}
+            close={() => {
+              setSetup(false);
+              attribute();
+              setcameraSetup(false);
+            }}
+          />
+        ) : (
+          ""
+        )}
+
+        {sideSheet ? (
+          <SideSheets
+            visible={true}
+            close={() => {
+              setSideSheet(false);
+            }}
+          />
+        ) : (
+          []
+        )}
+      </div>
+
+      {cameraModal ? (
         <CameraModal
           visible={true}
           close={() => {
             setCameraModal(false);
             // setEditData(null)
           }}
-      modalName={modalName} />:''}
+          modalName={modalName}
+        />
+      ) : (
+        ""
+      )}
     </>
   );
 };
 
 function mapStateToProps(state) {
-  const { auth, global, members } = state;
+  const { auth, global, members, equipmentWarehouseNvr } = state;
   return {
     loading: members.isRequesting,
     user: auth.user,
     actions: global.actions,
     members: members.data,
+    equipmentWarehouseNvr: equipmentWarehouseNvr.data || [],
   };
 }
 

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
 import "../style.less";
@@ -14,6 +14,7 @@ const NvrHeader = (props) => {
   const [setupp, setSetupp] = useState([]);
   const [venderList, setvenderList] = useState([]); //厂商信息
   const [query, setQuery] = useState({ limit: 10, page: 0 });
+  const api = useRef();
   const SETUPS = "setups";
 
   useEffect(() => {
@@ -90,10 +91,15 @@ const NvrHeader = (props) => {
             >
               查看
             </Button>
-            <Button theme="borderless" onClick={()=>{
+            <Button
+              theme="borderless"
+              onClick={() => {
                 dispatch(equipmentWarehouse.delNvr(row.id));
                 equipmentGetNvr();
-            }}>删除</Button>
+              }}
+            >
+              删除
+            </Button>
           </>
         );
       },
@@ -250,11 +256,14 @@ const NvrHeader = (props) => {
         <div style={{ display: "flex" }}>
           <Form
             onSubmit={(values) => console.log(values)}
+            // onValueChange={values=>console.log(values)}
+            getFormApi={(formApi) => (api.current = formApi)}
             layout="horizontal"
             style={{ position: "relative", width: "100%", flex: 1 }}
           >
             <Form.Input
-              field="设备搜索："
+              label="设备搜索："
+              field="name"
               placeholder="请输入设备名称"
               labelPosition="left"
               style={screen}
@@ -263,7 +272,7 @@ const NvrHeader = (props) => {
               label="厂家筛选："
               labelPosition="left"
               style={screen}
-              field="type1"
+              field="venderId"
               placeholder="全部"
             >
               {venderList.map((item) => {
@@ -291,8 +300,12 @@ const NvrHeader = (props) => {
               style={screen}
               placeholder="全部"
             >
-              <Form.Select.Option value="oper ">飞尚科技1</Form.Select.Option>
+              <Form.Select.Option value="智慧环保">
-              <Form.Select.Option value="r">飞尚科技2</Form.Select.Option>
+                飞尚科技1
+              </Form.Select.Option>
+              <Form.Select.Option value="智慧水务">
+                飞尚科技2
+              </Form.Select.Option>
             </Form.Select>
           </Form>
           <div
@@ -313,7 +326,21 @@ const NvrHeader = (props) => {
                 marginBottom: 20,
                 marginRight: 20,
               }}
-              onClick={() => {}}
+              onClick={() => {
+                api.current.validate().then((values) => {
+                  console.log(values);
+                  console.log(
+                    equipmentWarehouseNvr.data.filter((item) => {
+                      return (
+                        item.name.indexOf(values.name) > -1 &&
+                        item.venderId === values.venderId
+                      );
+                       
+                    })
+                  );
+                });
+                console.log(equipmentWarehouseNvr.data);
+              }}
             >
               搜素
             </Button>
@@ -414,10 +441,10 @@ const NvrHeader = (props) => {
             className="22"
             total={equipmentWarehouseNvr.total}
             showSizeChanger
+            currentPage={query.page + 1}
             pageSizeOpts={[10, 20, 30, 40]}
             onChange={(currentPage, pageSize) => {
               setQuery({ limit: pageSize, page: currentPage - 1 });
-              console.log(currentPage, pageSize);
             }}
           />
         </div>