Browse Source

添加骨架屏

release_0.0.2
wenlele 2 years ago
parent
commit
6efe633899
  1. 2
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
  2. 2
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
  3. 13
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  4. 29
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  5. 38
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

2
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js

@ -12,7 +12,7 @@ export function getCamera(query) {
query: query, query: query,
url: `${ApiTable.getCamera}`, url: `${ApiTable.getCamera}`,
msg: { option: "获取摄像头列表信息" }, msg: { option: "获取摄像头列表信息" },
reducer: { name: "equipmentWarehouseCamera" }, reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } },
}); });
} }

2
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js

@ -24,7 +24,7 @@ export function getNvr(query) {
query: query, query: query,
url: `${ApiTable.getNvr}`, url: `${ApiTable.getNvr}`,
msg: { option: "获取nvr列表信息" }, msg: { option: "获取nvr列表信息" },
reducer: { name: "equipmentWarehouseNvr" }, reducer: { name: "equipmentWarehouseNvr", params: { noClear: true } },
}); });
} }

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

@ -33,7 +33,7 @@ function SideSheets(props) {
basics: [ basics: [
{ name: "设备名称:", key: "name" }, { name: "设备名称:", key: "name" },
{ name: "设备编号:", key: "serialNo" }, { name: "设备编号:", key: "serialNo" },
{ name: "接入方式:", key: "type" }, { name: "接入方式:", key: "accessWay" },
{ name: "厂商:", key: "venderId" }, { name: "厂商:", key: "venderId" },
{ name: "添加账号:", key: "createUser" }, { name: "添加账号:", key: "createUser" },
{ name: "添加时间:", key: "createTime" }, { name: "添加时间:", key: "createTime" },
@ -148,8 +148,8 @@ function SideSheets(props) {
equipmentScrollbar = new PerfectScrollbar("#equipment_information", { equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
suppressScrollX: true, suppressScrollX: true,
}); });
});
console.log(nvrDetails); console.log(nvrDetails);
});
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -340,13 +340,16 @@ function SideSheets(props) {
<span <span
style={{ fontWeight: "600", color: " #34383E" }} style={{ fontWeight: "600", color: " #34383E" }}
> >
{item.key == "typ" {item.key == "typ" ////////////////////////////////
? accessType.find((v) => v.key == nvrDetails.type) ? accessType.find(
.name (v) => v.key == nvrDetails.type
).name
: item.key == "venderId" : item.key == "venderId"
? nvrDetails.venderId
? venderList.find( ? venderList.find(
(v) => v.id == nvrDetails.venderId (v) => v.id == nvrDetails.venderId
).name ).name
: ""
: item.key == "createUser" : item.key == "createUser"
? nvrDetails.createUser.namePresent ? nvrDetails.createUser.namePresent
: item.key == "createTime" : item.key == "createTime"

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

@ -10,6 +10,7 @@ import {
Pagination, Pagination,
Popover, Popover,
Tag, Tag,
Skeleton,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import "../style.less"; import "../style.less";
import CameraModal from "../components/cameraModal"; import CameraModal from "../components/cameraModal";
@ -100,7 +101,7 @@ const CameraHeader = (props) => {
modalName="revise" modalName="revise"
venderList={venderList} venderList={venderList}
close={() => { close={() => {
equipmentGetNvr(); equipmentGetCamera();
}} }}
/> />
</Button> </Button>
@ -119,13 +120,13 @@ const CameraHeader = (props) => {
<Button <Button
theme="borderless" theme="borderless"
onClick={() => { onClick={() => {
console.log(row.id, !row.forbidden);
dispatch( dispatch(
equipmentWarehouse.putForbidden({ equipmentWarehouse.putForbidden({
cameraId: row.id, cameraId: row.id,
forbidden: !row.forbidden, forbidden: !row.forbidden,
}) })
); );
equipmentGetCamera();
}} }}
> >
{row.forbidden ? "启用" : "禁用"} {row.forbidden ? "启用" : "禁用"}
@ -134,7 +135,7 @@ const CameraHeader = (props) => {
theme="borderless" theme="borderless"
onClick={() => { onClick={() => {
dispatch(equipmentWarehouse.delNvr(row.id)); dispatch(equipmentWarehouse.delNvr(row.id));
equipmentGetNvr(); equipmentGetCamera();
}} }}
> >
删除 删除
@ -495,6 +496,11 @@ const CameraHeader = (props) => {
border: "1px solid #D9D9D9", border: "1px solid #D9D9D9",
marginBottom: 20, marginBottom: 20,
}} }}
onClick={() => {
api.current.reset();
setearch({});
equipmentGetCamera();
}}
> >
重置 重置
</Button> </Button>
@ -558,8 +564,20 @@ const CameraHeader = (props) => {
</Button> </Button>
</div> </div>
</div> </div>
<Skeleton
loading={loading}
placeholder={
<Table
columns={setupp.filter((s) => s)}
dataSource={[{ name: "" },{ key: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" }]}
pagination={false}
style={{ background: "rgba(217, 216, 216, 1)" }}
empty=""
/>
}
>
<Table <Table
columns={setupp.filter(s => s)} columns={setupp.filter((s) => s)}
dataSource={equipmentWarehouseCamera.data} dataSource={equipmentWarehouseCamera.data}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
@ -568,6 +586,7 @@ const CameraHeader = (props) => {
}} }}
pagination={false} pagination={false}
/> />
</Skeleton>
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -641,7 +660,7 @@ const CameraHeader = (props) => {
function mapStateToProps(state) { function mapStateToProps(state) {
const { auth, global, members, equipmentWarehouseCamera } = state; const { auth, global, members, equipmentWarehouseCamera } = state;
return { return {
loading: members.isRequesting, loading: equipmentWarehouseCamera.isRequesting,
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
members: members.data, members: members.data,

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

@ -1,7 +1,15 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import moment from "moment"; import moment from "moment";
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui"; import {
Button,
Form,
Input,
Row,
Table,
Pagination,
Skeleton,
} from "@douyinfe/semi-ui";
import "../style.less"; import "../style.less";
import NvrModal from "../components/nvrModal"; import NvrModal from "../components/nvrModal";
import Setup from "../components/setup"; import Setup from "../components/setup";
@ -17,6 +25,7 @@ export const accessType = [
const NvrHeader = (props) => { const NvrHeader = (props) => {
const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props; const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
// const [loading, setLoading] = useState(false);
const [setup, setSetup] = useState(false); const [setup, setSetup] = useState(false);
const [sideSheet, setSideSheet] = useState(false); const [sideSheet, setSideSheet] = useState(false);
const [setupp, setSetupp] = useState([]); const [setupp, setSetupp] = useState([]);
@ -110,8 +119,9 @@ const NvrHeader = (props) => {
<Button <Button
theme="borderless" theme="borderless"
onClick={() => { onClick={() => {
dispatch(equipmentWarehouse.delNvr(row.id)); dispatch(equipmentWarehouse.delNvr(row.id)).then(() => {
equipmentGetNvr(); equipmentGetNvr();
});
}} }}
> >
删除 删除
@ -372,6 +382,11 @@ const NvrHeader = (props) => {
border: "1px solid #D9D9D9", border: "1px solid #D9D9D9",
marginBottom: 20, marginBottom: 20,
}} }}
onClick={() => {
api.current.reset();
setearch({});
equipmentGetNvr();
}}
> >
重置 重置
</Button> </Button>
@ -434,8 +449,20 @@ const NvrHeader = (props) => {
</Button> </Button>
</div> </div>
</div> </div>
<Skeleton
loading={loading}
placeholder={
<Table <Table
columns={setupp.filter(s => s)} columns={setupp.filter((s) => s)}
dataSource={[{ name: "" },{ key: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" }]}
pagination={false}
style={{ background: "rgba(217, 216, 216, 1)" }}
empty=""
/>
}
>
<Table
columns={setupp.filter((s) => s)}
dataSource={equipmentWarehouseNvr.data} dataSource={equipmentWarehouseNvr.data}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
@ -444,6 +471,8 @@ const NvrHeader = (props) => {
}} }}
pagination={false} pagination={false}
/> />
</Skeleton>
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -496,11 +525,10 @@ const NvrHeader = (props) => {
); );
}; };
function mapStateToProps(state) { function mapStateToProps(state) {
const { auth, global, members, equipmentWarehouseNvr } = state; const { auth, global, members, equipmentWarehouseNvr } = state;
return { return {
loading: members.isRequesting, loading: equipmentWarehouseNvr.isRequesting,
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
members: members.data, members: members.data,

Loading…
Cancel
Save