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

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

@ -10,6 +10,7 @@ import {
Pagination,
Popover,
Tag,
Skeleton,
} from "@douyinfe/semi-ui";
import "../style.less";
import CameraModal from "../components/cameraModal";
@ -100,7 +101,7 @@ const CameraHeader = (props) => {
modalName="revise"
venderList={venderList}
close={() => {
equipmentGetNvr();
equipmentGetCamera();
}}
/>
</Button>
@ -119,13 +120,13 @@ const CameraHeader = (props) => {
<Button
theme="borderless"
onClick={() => {
console.log(row.id, !row.forbidden);
dispatch(
equipmentWarehouse.putForbidden({
cameraId: row.id,
forbidden: !row.forbidden,
})
);
equipmentGetCamera();
}}
>
{row.forbidden ? "启用" : "禁用"}
@ -134,7 +135,7 @@ const CameraHeader = (props) => {
theme="borderless"
onClick={() => {
dispatch(equipmentWarehouse.delNvr(row.id));
equipmentGetNvr();
equipmentGetCamera();
}}
>
删除
@ -495,6 +496,11 @@ const CameraHeader = (props) => {
border: "1px solid #D9D9D9",
marginBottom: 20,
}}
onClick={() => {
api.current.reset();
setearch({});
equipmentGetCamera();
}}
>
重置
</Button>
@ -558,8 +564,20 @@ const CameraHeader = (props) => {
</Button>
</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
columns={setupp.filter(s => s)}
columns={setupp.filter((s) => s)}
dataSource={equipmentWarehouseCamera.data}
bordered={false}
empty="暂无数据"
@ -568,6 +586,7 @@ const CameraHeader = (props) => {
}}
pagination={false}
/>
</Skeleton>
<div
style={{
display: "flex",
@ -641,7 +660,7 @@ const CameraHeader = (props) => {
function mapStateToProps(state) {
const { auth, global, members, equipmentWarehouseCamera } = state;
return {
loading: members.isRequesting,
loading: equipmentWarehouseCamera.isRequesting,
user: auth.user,
actions: global.actions,
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 { connect } from "react-redux";
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 NvrModal from "../components/nvrModal";
import Setup from "../components/setup";
@ -17,6 +25,7 @@ export const accessType = [
const NvrHeader = (props) => {
const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
const { equipmentWarehouse } = actions;
// const [loading, setLoading] = useState(false);
const [setup, setSetup] = useState(false);
const [sideSheet, setSideSheet] = useState(false);
const [setupp, setSetupp] = useState([]);
@ -110,8 +119,9 @@ const NvrHeader = (props) => {
<Button
theme="borderless"
onClick={() => {
dispatch(equipmentWarehouse.delNvr(row.id));
dispatch(equipmentWarehouse.delNvr(row.id)).then(() => {
equipmentGetNvr();
});
}}
>
删除
@ -372,6 +382,11 @@ const NvrHeader = (props) => {
border: "1px solid #D9D9D9",
marginBottom: 20,
}}
onClick={() => {
api.current.reset();
setearch({});
equipmentGetNvr();
}}
>
重置
</Button>
@ -434,8 +449,20 @@ const NvrHeader = (props) => {
</Button>
</div>
</div>
<Skeleton
loading={loading}
placeholder={
<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}
bordered={false}
empty="暂无数据"
@ -444,6 +471,8 @@ const NvrHeader = (props) => {
}}
pagination={false}
/>
</Skeleton>
<div
style={{
display: "flex",
@ -496,11 +525,10 @@ const NvrHeader = (props) => {
);
};
function mapStateToProps(state) {
const { auth, global, members, equipmentWarehouseNvr } = state;
return {
loading: members.isRequesting,
loading: equipmentWarehouseNvr.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,

Loading…
Cancel
Save