From 1fd486536b2deafaf68ffa3cb2f492be789b462d Mon Sep 17 00:00:00 2001 From: wenlele Date: Mon, 30 May 2022 18:32:38 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=BA=86=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=B1=95=E7=8E=B0=E7=9A=84BUG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/skeletonScreen.jsx | 115 ++++++++++++++++++ .../equipmentWarehouse/containers/camera.jsx | 29 ++--- .../equipmentWarehouse/containers/nvr.jsx | 111 +++++++++++------ code/VideoAccess-VCMP/web/package.json | 2 +- 4 files changed, 202 insertions(+), 55 deletions(-) create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx 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/client/src/sections/equipmentWarehouse/containers/nvr.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx index 897d61e..67e210d 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 @@ -10,11 +10,15 @@ import { Pagination, Skeleton, Popconfirm, + Popover, + Tag, } from "@douyinfe/semi-ui"; import "../style.less"; import NvrModal from "../components/nvrModal"; import Setup from "../components/setup"; import SideSheets from "../components/sideSheet"; +import {skeletonScreen} from "../components/skeletonScreen"; + export const accessType = [ { name: "萤石云平台摄像头", key: "yingshi" }, @@ -34,11 +38,14 @@ const NvrHeader = (props) => { const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [search, setearch] = useState({}); //搜索条件 const [rowId, setRowId] = useState(); //表格数据id + const [load, setLoad] = useState(); //骨架屏是否显现 + const api = useRef(); const SETUPS = "setups"; useEffect(() => { + setLoad(loading); dispatch(actions.equipmentWarehouse.getVender()).then((res) => { setvenderList(res.payload.data); attribute(res.payload.data); @@ -184,30 +191,47 @@ const NvrHeader = (props) => { title: "项目名称", dataIndex: "", key: "name", - // render: (_, r, index) => { - // console.log(r); - // return r.station.length == 0 - // ? "" - // : r.station.map((item, index) => { - // return item.structure.projects.length == 0 - // ? "" - // : station( - // r.station[0].structure.projects[0].name, - // item.structure.projects, - // "name" - // ); - // }); - // }, + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : r.station.map((item, index) => { + return item.structure.projects.length == 0 + ? "" + : station( + r.station[0].structure.projects[0].name, + item.structure.projects, + "name" + ); + }); + }, }, { title: "pcode", dataIndex: "", key: "pcode", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : r.station.map((item, index) => { + return item.structure.projects.length == 0 + ? "" + : station( + r.station[0].structure.projects[0].url, + item.structure.projects, + "url" + ); + }); + }, }, { title: "结构物", dataIndex: "", key: "structure", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r.station[0].structure.name, r.station, "structure.name"); + }, }, ]; for (let i = 0; i < arr.length; i++) { @@ -219,6 +243,42 @@ const NvrHeader = (props) => { setSetupp(columns); } + //表格请求数据中station属性数据的展示 + function station(first, whole, name) { + return ( + + {whole.map((v, index) => { + let names = ""; + switch (name) { + case "name": + names = v[name]; + break; + case "url": + names = v[name]; + break; + case "structure.name": + names = v.structure.name; + break; + case "factor.name": + names = v.factor.name; + break; + default: + break; + } + return
{names}
; + })} + + } + > + {first}... + + ); + } + //条件赛选样式 const screen = { width: 193, @@ -229,7 +289,7 @@ const NvrHeader = (props) => { return ( <> -
+
s)} - // dataSource={[ - // { name: "" }, - // { key: "" }, - // { name: "" }, - // { name: "" }, - // { name: "" }, - // { name: "" }, - // { name: "" }, - // ]} - // pagination={false} - // style={{ background: "rgba(217, 216, 216, 1)" }} - // empty="" - // /> - <>
- } + loading={load} + placeholder={skeletonScreen(8, setupp.length)} >
s)} 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 +}