diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx new file mode 100644 index 0000000..eb720fa --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx @@ -0,0 +1,115 @@ +import { Table } from "@douyinfe/semi-ui"; + +export function skeletonScreen(line, columns) { + // function TableHead() { + // let str = []; + // for (let i = 0; i <= column; i++) { + // if(i==column-2){ + + // }else{ + // str.push(
ngfbn
) + // } + // } + // return str; + // } + const data = () => { + let str = []; + for (let i = 0; i < line; i++) { + if (i == line - 1) { + str.push({ + createUserId: ( +
+ ), + operation: ( +
+ ), + }); + } else { + str.push({ + createUserId: ( +
+ ), + operation: ( +
+ ), + }); + } + } + return str; + }; + const column = () => { + let str = []; + for (let i = 0; i < columns; i++) { + if (i == columns - 1) { + str.push({ + title: ( +
+ ), + dataIndex: "operation", + key: i, + width: "20%", + }); + } else { + str.push({ + title: ( +
+ ), + dataIndex: "createUserId", + key: i, + }); + } + } + return str; + }; + + return ( + <> + + + ); +} 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 4fab222..1127dae 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 @@ -18,6 +18,7 @@ import CameraModal from "../components/cameraModal"; import NvrModal from "../components/nvrModal"; import Setup from "../components/setup"; import SideSheets from "../components/sideSheet"; +import { skeletonScreen } from "../components/skeletonScreen"; import { accessType } from "./nvr"; const CameraHeader = (props) => { @@ -32,12 +33,14 @@ const CameraHeader = (props) => { const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [search, setearch] = useState({}); //搜索条件 const [rowId, setRowId] = useState(); //表格数据id + const [load, setLoad] = useState(); //骨架屏是否显现 const { equipmentWarehouse } = actions; const api = useRef(); const CAMERAS = "cameras"; useEffect(() => { + setLoad(loading); dispatch(actions.equipmentWarehouse.getVender()).then((res) => { setvenderList(res.payload.data); attribute(res.payload.data); @@ -270,7 +273,7 @@ const CameraHeader = (props) => { }, { title: "结构物", - dataIndex: "updateTime", + dataIndex: "", key: "structure", render: (_, r, index) => { return r.station.length == 0 @@ -608,24 +611,9 @@ const CameraHeader = (props) => { s)} - // dataSource={[ - // { name: "" }, - // { key: "" }, - // { name: "" }, - // { name: "" }, - // { name: "" }, - // { name: "" }, - // { name: "" }, - // ]} - pagination={false} - style={{ background: "rgba(217, 216, 216, 1)" }} - empty=" " - /> - } + loading={loading} + active={true} + placeholder={skeletonScreen(8, setupp.length)} >
s)} @@ -711,7 +699,8 @@ const CameraHeader = (props) => { function mapStateToProps(state) { const { auth, global, members, equipmentWarehouseCamera } = state; return { - loading: equipmentWarehouseCamera.isRequesting, + loading: + equipmentWarehouseCamera.isRequesting && !equipmentWarehouseCamera.data, user: auth.user, actions: global.actions, members: members.data, diff --git a/code/VideoAccess-VCMP/web/package.json b/code/VideoAccess-VCMP/web/package.json index 7f987c8..18cfb06 100644 --- a/code/VideoAccess-VCMP/web/package.json +++ b/code/VideoAccess-VCMP/web/package.json @@ -74,4 +74,4 @@ "webpack-dev-server": "^3.11.2", "webpack-hot-middleware": "^2.25.0" } -} \ No newline at end of file +}