diff --git a/code/VideoAccess-VCMP/web/client/src/components/index.js b/code/VideoAccess-VCMP/web/client/src/components/index.js index 9f703c5..e2c0d8f 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/index.js +++ b/code/VideoAccess-VCMP/web/client/src/components/index.js @@ -5,6 +5,7 @@ import ReminderBox from './reminderBox' import VideoPlay from './videoPlayer/videoPlay' import VideoPlayModal from './videoPlayer/videoPlayModal' import Setup from './setup' +import {SkeletonScreen} from './skeletonScreen' export { SimpleFileDownButton, @@ -12,5 +13,6 @@ export { ReminderBox, VideoPlay, VideoPlayModal, - Setup + Setup, + SkeletonScreen, }; diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx b/code/VideoAccess-VCMP/web/client/src/components/skeletonScreen.jsx similarity index 96% rename from code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx rename to code/VideoAccess-VCMP/web/client/src/components/skeletonScreen.jsx index 8a10898..e096eec 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/skeletonScreen.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { Skeleton } from "@douyinfe/semi-ui"; -export function skeletonScreen() { +export function SkeletonScreen() { return <> diff --git a/code/VideoAccess-VCMP/web/client/src/sections/application/components/applyModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/application/components/applyModal.jsx new file mode 100644 index 0000000..f8dfe17 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/application/components/applyModal.jsx @@ -0,0 +1,80 @@ +import React, { useState, useEffect, useRef } from "react"; +import { connect } from "react-redux"; +import { Button, Form, Modal, } from "@douyinfe/semi-ui"; + +const ApplyModal = ({ close, modalName, visible }) => { + const form = useRef(); + + + const handleOk = () => { + form.current + .validate() + .then((values) => { + console.log(values); + // close() + }) + + } + + return close()} + onOk={handleOk} + > +
console.log(values)} + getFormApi={(formApi) => (form.current = formApi)} + > + + + {[{ name: 'web', id: 'web' }, { name: 'app', id: 'app' }, { name: '小程序', id: '小程序' }, { name: '其他', id: '其他' }].map((item, index) => ( + + {item.name} + + ))} + + +
+} + + +function mapStateToProps (state) { + const { auth, global, members } = state; + return { + loading: members.isRequesting, + user: auth.user, + actions: global.actions, + global: global, + members: members.data, + }; +} +export default connect(mapStateToProps)(ApplyModal); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx b/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx index 93acfc6..73bffbd 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx @@ -1,20 +1,370 @@ -import React, { useEffect } from 'react'; -import { connect } from 'react-redux'; -import { Coming } from '$components' +import React, { useState, useEffect, useRef } from "react"; +import { connect } from "react-redux"; +import moment from "moment"; +import qs from "qs"; +import { + Button, + Form, + Table, + Pagination, + Popover, + Tag, + Skeleton, + Popconfirm, + Row, +} from "@douyinfe/semi-ui"; +import { SimpleFileDownButton, VideoPlayModal, SkeletonScreen, Setup } from "$components"; +// import "../style.less"; +import ApplyModal from "../components/applyModal"; +// import RemarksModal from "../components/remarksModal"; +// import SideSheets from "../components/sideSheet"; +// import { accessType } from "./nvr"; import '../style.less' const ApplicationCenter = (props) => { + const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props; + // const { equipmentWarehouse } = actions; + const [cameraModal, setCameraModal] = useState(false); + const [remarksModal, setRemarksModal] = useState(false); + const [videoPlay, setVideoPlay] = useState(false); + const [modalName, setModalName] = useState(false); //创建或修改 + const [setup, setSetup] = useState(false); //表格设置是否显现 + const [applyModal, setApplyModal] = useState(false); + const [cameraSetup, setcameraSetup] = useState(false); + const [setupp, setSetupp] = useState([]); + const [venderList, setvenderList] = useState([]); //厂商信息 + const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 + const [search, setSearch] = useState({}); //搜索条件 + const [rowId, setRowId] = useState(); //表格数据id + const [cameraData, setCameraData] = useState({}); //表格传递数据 + const [modify, setModify] = useState(false); //修改 + const [parentCamera, setParentCamera] = useState(""); //级联摄像头父级设备 + const [addNvr, setAddNvr] = useState(false); //nvr页面传递参数打开NVR摄像头添加弹框 + const [nvrNumber, setNvrNumber] = useState(); + const [videoObj, setVideoObj] = useState(); //播放条件 + const [axyData, setAxyData] = useState(); + const [cameraRemarks, setCameraRemarks] = useState([]);//备注 + const api = useRef(); + const searchData = useRef({}) + const limits = useRef(); //每页实际条数 + const page = useRef(query.page); + const deviceClickb = useRef(true) + const APPLICATION = "application"; - return ( - - ) + + + const columns = [ + { + title: "序号", + dataIndex: "", + render: (text, r, index) => { + return index + 1; + }, + }, + { + title: "应用名称", + dataIndex: "name", + key: "name", + }, + { + title: "APPID", + dataIndex: "appId", + key: "appId", + + }, + { + title: "Secret Key", + dataIndex: "secretKey", + key: "secretKey", + + }, + { + title: "操作", + width: "20%", + dataIndex: "", + render: (_, row) => { + return ( +
+ + {row.forbidden ? ( + + ) : ( + { + + }} + > + + + )} + { + + }} + > + + + +
+ ); + }, + } + ]; + + //获取表格属性设置 + function attribute () { + const arr = localStorage.getItem(APPLICATION) + ? JSON.parse(localStorage.getItem(APPLICATION)) + : []; + + const column = [ + { + title: "创建时间", + dataIndex: "createTime", + key: "createTime", + }, + { + title: "创建账号", + dataIndex: "account", + key: "account", + + }, + { + title: "应用类型", + dataIndex: "applicationType", + key: "applicationType", + + }, + ]; + + for (let i = 0; i < arr.length; i++) { + let colum = column.filter((item) => { + return item.key === arr[i]; + }); + columns.splice(i + 4, 0, colum[0]); + } + setSetupp(columns); + } + const tableList = [//表格属性 + { + title: '详情信息', + list: [ + { name: "创建时间", value: "createTime" }, + { name: "创建账号", value: "account" }, + { name: "应用类型", value: "applicationType" }, + ] + }, + ]; + + useEffect(() => { + //初始化表格显示设置 + localStorage.getItem(APPLICATION) == null + ? localStorage.setItem( + APPLICATION, + JSON.stringify(["createTime",]) + ) + : ""; + attribute(); + }, []) + return ( + <> +
+
+
+
+
+ 应用列表 +
+
+ + {/* */} +
+
+ + s)} + dataSource={[{ name: 'csadca', }]} + bordered={false} + empty="暂无数据" + style={{ + padding: "0px 20px", + }} + pagination={false} + /> + +
+ + 共{100}个设备 + + { + setQuery({ limit: pageSize, page: currentPage - 1 }); + page.current = currentPage - 1 + }} + /> +
+ + + + {/*表格设置*/} + {setup ? ( + { + setSetup(false); + attribute(); + }} + /> + ) : ( + "" + )} + + {applyModal ? ( + { + setApplyModal(false) + setModalName(false) + }} + /> + ) : ( + "" + )} + + + ) } function mapStateToProps (state) { - const { auth } = state; - return { - user: auth.user, - }; + const { auth } = state; + return { + user: auth.user, + }; } export default connect(mapStateToProps)(ApplicationCenter); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx index 043fd55..b1e123c 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx @@ -13,13 +13,13 @@ import { Popconfirm, Row, } from "@douyinfe/semi-ui"; -import { SimpleFileDownButton, VideoPlayModal } from "$components"; +import { SimpleFileDownButton, VideoPlayModal,SkeletonScreen } from "$components"; import "../style.less"; import CameraModal from "../components/cameraModal"; import RemarksModal from "../components/remarksModal"; import {Setup} from "$components"; import SideSheets from "../components/sideSheet"; -import { skeletonScreen } from "../components/skeletonScreen"; +import { skeletonScreen } from "../../../components/skeletonScreen"; import { accessType } from "./nvr"; const CameraHeader = (props) => { @@ -756,7 +756,7 @@ const CameraHeader = (props) => {
s)} diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx index 285d400..e5c4a58 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx @@ -7,9 +7,8 @@ import { ApiTable } from "$utils"; import NvrModal from "../components/nvrModal"; import {Setup} from "$components"; import SideSheets from "../components/sideSheet"; -import { skeletonScreen } from "../components/skeletonScreen"; import { ReminderBox } from "../../../components/index"; -import { SimpleFileDownButton } from "$components"; +import { SimpleFileDownButton,SkeletonScreen } from "$components"; export const accessType = [ { name: "萤石云", key: "yingshi" }, @@ -556,7 +555,7 @@ const NvrHeader = (props) => {