|
|
@ -3,15 +3,15 @@ import { connect } from "react-redux"; |
|
|
import moment from "moment"; |
|
|
import moment from "moment"; |
|
|
import qs from "qs"; |
|
|
import qs from "qs"; |
|
|
import { |
|
|
import { |
|
|
Button, |
|
|
Button, |
|
|
Form, |
|
|
Form, |
|
|
Table, |
|
|
Table, |
|
|
Pagination, |
|
|
Pagination, |
|
|
Popover, |
|
|
Popover, |
|
|
Tag, |
|
|
Tag, |
|
|
Skeleton, |
|
|
Skeleton, |
|
|
Popconfirm, |
|
|
Popconfirm, |
|
|
Row, |
|
|
Row, |
|
|
} from "@douyinfe/semi-ui"; |
|
|
} from "@douyinfe/semi-ui"; |
|
|
import { SimpleFileDownButton, VideoPlayModal, SkeletonScreen, Setup } from "$components"; |
|
|
import { SimpleFileDownButton, VideoPlayModal, SkeletonScreen, Setup } from "$components"; |
|
|
// import "../style.less"; |
|
|
// import "../style.less"; |
|
|
@ -22,349 +22,368 @@ import ApplyModal from "../components/applyModal"; |
|
|
import '../style.less' |
|
|
import '../style.less' |
|
|
|
|
|
|
|
|
const ApplicationCenter = (props) => { |
|
|
const ApplicationCenter = (props) => { |
|
|
const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props; |
|
|
const { dispatch, actions, user, loading, applicationData } = props; |
|
|
// const { equipmentWarehouse } = actions; |
|
|
const { applicationCenter } = actions; |
|
|
const [cameraModal, setCameraModal] = useState(false); |
|
|
const [modalName, setModalName] = useState(false); //创建或修改 |
|
|
const [remarksModal, setRemarksModal] = useState(false); |
|
|
const [setup, setSetup] = useState(false); //表格设置是否显现 |
|
|
const [videoPlay, setVideoPlay] = useState(false); |
|
|
const [applyModal, setApplyModal] = useState(false); |
|
|
const [modalName, setModalName] = useState(false); //创建或修改 |
|
|
const [setupp, setSetupp] = useState([]); |
|
|
const [setup, setSetup] = useState(false); //表格设置是否显现 |
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
const [applyModal, setApplyModal] = useState(false); |
|
|
const [appData, setAppData] = useState(null); //应用id |
|
|
const [cameraSetup, setcameraSetup] = useState(false); |
|
|
const APPLICATION = 'application' |
|
|
const [setupp, setSetupp] = useState([]); |
|
|
const pageLimit = useRef({ limit: 10, page: 0 }); |
|
|
const [venderList, setvenderList] = useState([]); //厂商信息 |
|
|
const limits = useRef(); //每页实际条数 |
|
|
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"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const columns = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: "序号", |
|
|
|
|
|
dataIndex: "", |
|
|
|
|
|
render: (text, r, index) => { |
|
|
|
|
|
return index + 1; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "应用名称", |
|
|
|
|
|
dataIndex: "name", |
|
|
|
|
|
key: "name", |
|
|
|
|
|
render: (text, r, index) => { |
|
|
|
|
|
return r?.name.length > 8 ? `${r?.name.substr(0, 8)}...` : r?.name |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
const columns = [ |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "序号", |
|
|
title: "APPID", |
|
|
dataIndex: "", |
|
|
dataIndex: "appKey", |
|
|
render: (text, r, index) => { |
|
|
key: "appId", |
|
|
return index + 1; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "应用名称", |
|
|
|
|
|
dataIndex: "name", |
|
|
|
|
|
key: "name", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "APPID", |
|
|
|
|
|
dataIndex: "appId", |
|
|
|
|
|
key: "appId", |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "Secret Key", |
|
|
|
|
|
dataIndex: "secretKey", |
|
|
|
|
|
key: "secretKey", |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "操作", |
|
|
title: "Secret Key", |
|
|
width: "20%", |
|
|
dataIndex: "appSecret", |
|
|
dataIndex: "", |
|
|
key: "secretKey", |
|
|
render: (_, row) => { |
|
|
|
|
|
return ( |
|
|
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
|
|
<Button |
|
|
|
|
|
theme="borderless" |
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
setApplyModal(true) |
|
|
|
|
|
setModalName(true) |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
修改 |
|
|
|
|
|
</Button> |
|
|
|
|
|
{row.forbidden ? ( |
|
|
|
|
|
<Button |
|
|
|
|
|
theme="borderless" |
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
|
|
|
|
|
|
}} |
|
|
}, |
|
|
> |
|
|
{ |
|
|
启用 |
|
|
title: "操作", |
|
|
</Button> |
|
|
width: "20%", |
|
|
) : ( |
|
|
dataIndex: "", |
|
|
<Popconfirm |
|
|
render: (_, row) => { |
|
|
title="禁用后，应用系统引入的页面及能力将会暂时失效，请谨慎操作。" |
|
|
return ( |
|
|
arrowPointAtCenter={false} |
|
|
<div style={{ display: "flex" }}> |
|
|
showArrow={true} |
|
|
<Button |
|
|
position="topRight" |
|
|
theme="borderless" |
|
|
onConfirm={() => { |
|
|
onClick={() => { |
|
|
|
|
|
setApplyModal(true) |
|
|
|
|
|
setModalName(true) |
|
|
|
|
|
setAppData(row) |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
修改 |
|
|
|
|
|
</Button> |
|
|
|
|
|
{row?.forbidden ? ( |
|
|
|
|
|
<Button |
|
|
|
|
|
theme="borderless" |
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
dispatch(applicationCenter.putApplication({ appId: row?.id, forbidden: !row?.forbidden })).then(() => details()) |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
启用 |
|
|
|
|
|
</Button> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<Popconfirm |
|
|
|
|
|
title={<div style={{ width: 200 }}>禁用后，应用系统引入的页面及能力将会暂时失效，请谨慎操作。</div>} |
|
|
|
|
|
arrowPointAtCenter={false} |
|
|
|
|
|
showArrow={true} |
|
|
|
|
|
position="topRight" |
|
|
|
|
|
onConfirm={() => { |
|
|
|
|
|
dispatch(applicationCenter.putApplication({ appId: row?.id, forbidden: !row?.forbidden })).then(() => { |
|
|
|
|
|
setQuery({ limit: pageLimit.current.limit, page: pageLimit.current.page }) |
|
|
|
|
|
}) |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<Button theme="borderless">禁用</Button> |
|
|
|
|
|
</Popconfirm> |
|
|
|
|
|
)} |
|
|
|
|
|
<Popconfirm |
|
|
|
|
|
title={<div style={{ width: 200 }}>删除后，应用系统引入的页面及能力将会永久失效，请谨慎操作。</div>} |
|
|
|
|
|
arrowPointAtCenter={false} |
|
|
|
|
|
width={300} |
|
|
|
|
|
showArrow={true} |
|
|
|
|
|
position="topRight" |
|
|
|
|
|
onConfirm={() => { |
|
|
|
|
|
dispatch(applicationCenter.delApplication(row?.id)).then(() => { |
|
|
|
|
|
if (pageLimit.current.page > 0 && limits.current < 2) { |
|
|
|
|
|
setQuery({ limit: pageLimit.current.limit, page: pageLimit.current.page - 1 }) |
|
|
|
|
|
} else { |
|
|
|
|
|
setQuery({ limit: pageLimit.current.limit, page: pageLimit.current.page }) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<Button theme="borderless">删除</Button> |
|
|
|
|
|
</Popconfirm> |
|
|
|
|
|
|
|
|
}} |
|
|
</div > |
|
|
> |
|
|
); |
|
|
<Button theme="borderless">禁用</Button> |
|
|
}, |
|
|
</Popconfirm> |
|
|
} |
|
|
)} |
|
|
]; |
|
|
<Popconfirm |
|
|
|
|
|
title="删除后，应用系统引入的页面及能力将会永久失效，请谨慎操作。" |
|
|
|
|
|
arrowPointAtCenter={false} |
|
|
|
|
|
showArrow={true} |
|
|
|
|
|
position="topRight" |
|
|
|
|
|
onConfirm={() => { |
|
|
|
|
|
|
|
|
|
|
|
}} |
|
|
//获取表格属性设置 |
|
|
> |
|
|
function attribute () { |
|
|
<Button theme="borderless">删除</Button> |
|
|
const arr = localStorage.getItem(APPLICATION) |
|
|
</Popconfirm> |
|
|
? JSON.parse(localStorage.getItem(APPLICATION)) |
|
|
|
|
|
: []; |
|
|
|
|
|
|
|
|
</div> |
|
|
const column = [ |
|
|
); |
|
|
{ |
|
|
|
|
|
title: "创建时间", |
|
|
|
|
|
dataIndex: "createTime", |
|
|
|
|
|
key: "createTime", |
|
|
|
|
|
render: (_, r, index) => { |
|
|
|
|
|
return r?.createUser?.name |
|
|
}, |
|
|
}, |
|
|
} |
|
|
}, |
|
|
]; |
|
|
{ |
|
|
|
|
|
title: "创建账号", |
|
|
//获取表格属性设置 |
|
|
dataIndex: "createUserId", |
|
|
function attribute () { |
|
|
key: "account", |
|
|
const arr = localStorage.getItem(APPLICATION) |
|
|
render: (_, r, index) => { |
|
|
? JSON.parse(localStorage.getItem(APPLICATION)) |
|
|
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); |
|
|
: []; |
|
|
|
|
|
|
|
|
|
|
|
const column = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: "创建时间", |
|
|
|
|
|
dataIndex: "createTime", |
|
|
|
|
|
key: "createTime", |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
}, |
|
|
title: "创建账号", |
|
|
{ |
|
|
dataIndex: "account", |
|
|
title: "应用类型", |
|
|
key: "account", |
|
|
dataIndex: "type", |
|
|
|
|
|
key: "applicationType", |
|
|
|
|
|
render: (_, r, index) => { |
|
|
|
|
|
const type = r?.type?.map((item, index) => item + ';') |
|
|
|
|
|
return type |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
}, |
|
|
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" }, |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
for (let i = 0; i < arr.length; i++) { |
|
|
//获取应用信息 |
|
|
let colum = column.filter((item) => { |
|
|
const details = (data) => { |
|
|
return item.key === arr[i]; |
|
|
pageLimit.current = query |
|
|
}); |
|
|
dispatch(applicationCenter.getApplication(pageLimit.current)).then((res) => { |
|
|
columns.splice(i + 4, 0, colum[0]); |
|
|
limits.current = res.payload.data.data.length |
|
|
} |
|
|
}); |
|
|
setSetupp(columns); |
|
|
} |
|
|
} |
|
|
useEffect(() => { |
|
|
const tableList = [//表格属性 |
|
|
details() |
|
|
{ |
|
|
}, [query]) |
|
|
title: '详情信息', |
|
|
|
|
|
list: [ |
|
|
|
|
|
{ name: "创建时间", value: "createTime" }, |
|
|
|
|
|
{ name: "创建账号", value: "account" }, |
|
|
|
|
|
{ name: "应用类型", value: "applicationType" }, |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
//初始化表格显示设置 |
|
|
//初始化表格显示设置 |
|
|
localStorage.getItem(APPLICATION) == null |
|
|
localStorage.getItem(APPLICATION) == null |
|
|
? localStorage.setItem( |
|
|
? localStorage.setItem( |
|
|
APPLICATION, |
|
|
APPLICATION, |
|
|
JSON.stringify(["createTime",]) |
|
|
JSON.stringify(["createTime",]) |
|
|
) |
|
|
) |
|
|
: ""; |
|
|
: ""; |
|
|
attribute(); |
|
|
attribute(); |
|
|
}, []) |
|
|
}, []) |
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<div style={{ position: "" }}> |
|
|
<div style={{ position: "" }}> |
|
|
<video |
|
|
<video |
|
|
id="cameraBanner" |
|
|
id="cameraBanner" |
|
|
autoPlay |
|
|
autoPlay |
|
|
loop |
|
|
loop |
|
|
muted |
|
|
muted |
|
|
style={{ width: "100%", objectFit: "cover", height: 171 }} |
|
|
style={{ width: "100%", objectFit: "cover", height: 171 }} |
|
|
src="/assets/video/camera_banner.mp4" |
|
|
src="/assets/video/camera_banner.mp4" |
|
|
type="video/mp4" |
|
|
type="video/mp4" |
|
|
/> |
|
|
/> |
|
|
<div style={{ position: "absolute", top: 12 }}> |
|
|
<div style={{ position: "absolute", top: 12 }}> |
|
|
<div |
|
|
<div |
|
|
style={{ |
|
|
style={{ |
|
|
fontSize: 22, |
|
|
fontSize: 22, |
|
|
paddingTop: 15, |
|
|
paddingTop: 15, |
|
|
marginLeft: 21, |
|
|
marginLeft: 21, |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
应用管理 |
|
|
应用管理 |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
style={{ |
|
|
style={{ |
|
|
fontSize: 14, |
|
|
fontSize: 14, |
|
|
paddingTop: 18, |
|
|
paddingTop: 18, |
|
|
marginLeft: 20, |
|
|
marginLeft: 20, |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
创建接口对应子系统的APPID及能力调用时所需的秘钥。 |
|
|
创建接口对应子系统的APPID及能力调用时所需的秘钥。 |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
style={{ |
|
|
style={{ |
|
|
fontSize: 14, |
|
|
fontSize: 14, |
|
|
marginTop: 28, |
|
|
marginTop: 28, |
|
|
marginLeft: 21, |
|
|
marginLeft: 21, |
|
|
width: 89, |
|
|
width: 89, |
|
|
height: 32, |
|
|
height: 32, |
|
|
lineHeight: 32 + "px", |
|
|
lineHeight: 32 + "px", |
|
|
textAlign: "center", |
|
|
textAlign: "center", |
|
|
backgroundColor: "#D9EAFF", |
|
|
backgroundColor: "#D9EAFF", |
|
|
color: "#1859C1", |
|
|
color: "#1859C1", |
|
|
cursor: "pointer", |
|
|
cursor: "pointer", |
|
|
}} |
|
|
}} |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
setApplyModal(true) |
|
|
setApplyModal(true) |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
创建应用 |
|
|
创建应用 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div style={{ background: "#FFFFFF", marginTop: 5 }}> |
|
|
</div> |
|
|
<div |
|
|
<div style={{ background: "#FFFFFF", marginTop: 5 }}> |
|
|
style={{ |
|
|
<div |
|
|
width: "100%", |
|
|
style={{ |
|
|
display: "flex", |
|
|
width: "100%", |
|
|
justifyContent: "space-between", |
|
|
display: "flex", |
|
|
padding: "13px 20px", |
|
|
justifyContent: "space-between", |
|
|
}} |
|
|
padding: "13px 20px", |
|
|
> |
|
|
}} |
|
|
<div |
|
|
> |
|
|
style={{ |
|
|
<div |
|
|
width: 64, |
|
|
style={{ |
|
|
height: 22, |
|
|
width: 64, |
|
|
fontSize: 16, |
|
|
height: 22, |
|
|
fontfAmily: "PingFangSC-Medium, PingFang SC", |
|
|
fontSize: 16, |
|
|
fontWeight: "bold", |
|
|
fontfAmily: "PingFangSC-Medium, PingFang SC", |
|
|
color: "rgba(0, 0, 0, 0.85)", |
|
|
fontWeight: "bold", |
|
|
lineHeight: "22px", |
|
|
color: "rgba(0, 0, 0, 0.85)", |
|
|
}} |
|
|
lineHeight: "22px", |
|
|
> |
|
|
}} |
|
|
应用列表 |
|
|
> |
|
|
</div> |
|
|
应用列表 |
|
|
<div> |
|
|
</div> |
|
|
<Button |
|
|
<div> |
|
|
style={{ |
|
|
<Button |
|
|
width: 32, |
|
|
style={{ |
|
|
height: 32, |
|
|
width: 32, |
|
|
background: "#D9D9D9", |
|
|
height: 32, |
|
|
borderadius: 3, |
|
|
background: "#D9D9D9", |
|
|
marginRight: 20, |
|
|
borderadius: 3, |
|
|
}} |
|
|
marginRight: 20, |
|
|
type="primary" |
|
|
}} |
|
|
key="primary" |
|
|
type="primary" |
|
|
onClick={() => { |
|
|
key="primary" |
|
|
setSetup(true); |
|
|
onClick={() => { |
|
|
// setcameraSetup(true); |
|
|
setSetup(true); |
|
|
}} |
|
|
// setcameraSetup(true); |
|
|
> |
|
|
}} |
|
|
<img |
|
|
> |
|
|
src="/assets/images/background/setup.png" |
|
|
<img |
|
|
alt="设置" |
|
|
src="/assets/images/background/setup.png" |
|
|
style={{ width: 18, height: 18 }} |
|
|
alt="设置" |
|
|
/> |
|
|
style={{ width: 18, height: 18 }} |
|
|
</Button> |
|
|
/> |
|
|
{/* <SimpleFileDownButton src="camera/export" /> */} |
|
|
</Button> |
|
|
</div> |
|
|
{/* <SimpleFileDownButton src="camera/export" /> */} |
|
|
</div> |
|
|
</div> |
|
|
<Skeleton |
|
|
|
|
|
loading={false} |
|
|
|
|
|
active={true} |
|
|
|
|
|
placeholder={SkeletonScreen()} |
|
|
|
|
|
> |
|
|
|
|
|
<Table |
|
|
|
|
|
columns={setupp.filter((s) => s)} |
|
|
|
|
|
dataSource={[{ name: 'csadca', }]} |
|
|
|
|
|
bordered={false} |
|
|
|
|
|
empty="暂无数据" |
|
|
|
|
|
style={{ |
|
|
|
|
|
padding: "0px 20px", |
|
|
|
|
|
}} |
|
|
|
|
|
pagination={false} |
|
|
|
|
|
/> |
|
|
|
|
|
</Skeleton> |
|
|
|
|
|
<div |
|
|
|
|
|
style={{ |
|
|
|
|
|
display: "flex", |
|
|
|
|
|
justifyContent: "flex-end", |
|
|
|
|
|
padding: "20px 20px", |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<span style={{ lineHeight: "30px" }}> |
|
|
|
|
|
共{100}个设备 |
|
|
|
|
|
</span> |
|
|
|
|
|
<Pagination |
|
|
|
|
|
className="22" |
|
|
|
|
|
total={100} |
|
|
|
|
|
showSizeChanger |
|
|
|
|
|
currentPage={query.page + 1} |
|
|
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
|
|
page.current = currentPage - 1 |
|
|
|
|
|
}} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<Skeleton |
|
|
|
|
|
loading={false} |
|
|
|
|
|
active={true} |
|
|
|
|
|
placeholder={SkeletonScreen()} |
|
|
|
|
|
> |
|
|
|
|
|
<Table |
|
|
|
|
|
columns={setupp.filter((s) => s)} |
|
|
|
|
|
dataSource={applicationData.data} |
|
|
|
|
|
bordered={false} |
|
|
|
|
|
empty="暂无数据" |
|
|
|
|
|
style={{ |
|
|
|
|
|
padding: "0px 20px", |
|
|
|
|
|
}} |
|
|
|
|
|
pagination={false} |
|
|
|
|
|
/> |
|
|
|
|
|
</Skeleton> |
|
|
|
|
|
<div |
|
|
|
|
|
style={{ |
|
|
|
|
|
display: "flex", |
|
|
|
|
|
justifyContent: "flex-end", |
|
|
|
|
|
padding: "20px 20px", |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<span style={{ lineHeight: "30px" }}> |
|
|
|
|
|
共{applicationData.total}个设备 |
|
|
|
|
|
</span> |
|
|
|
|
|
<Pagination |
|
|
|
|
|
className="22" |
|
|
|
|
|
total={applicationData.total} |
|
|
|
|
|
showSizeChanger |
|
|
|
|
|
currentPage={query.page + 1} |
|
|
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
|
|
pageLimit.current = { limit: pageSize, page: currentPage - 1 } |
|
|
|
|
|
}} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
{/*表格设置*/} |
|
|
{/*表格设置*/} |
|
|
{setup ? ( |
|
|
{setup ? ( |
|
|
<Setup |
|
|
<Setup |
|
|
tableType={APPLICATION} |
|
|
tableType={APPLICATION} |
|
|
tableList={tableList} |
|
|
tableList={tableList} |
|
|
close={() => { |
|
|
close={() => { |
|
|
setSetup(false); |
|
|
setSetup(false); |
|
|
attribute(); |
|
|
attribute(); |
|
|
}} |
|
|
}} |
|
|
/> |
|
|
/> |
|
|
) : ( |
|
|
) : ( |
|
|
"" |
|
|
"" |
|
|
)} |
|
|
)} |
|
|
|
|
|
|
|
|
{applyModal ? ( |
|
|
{applyModal ? ( |
|
|
<ApplyModal |
|
|
<ApplyModal |
|
|
visible={true} |
|
|
visible={true} |
|
|
modalName={modalName} |
|
|
modalName={modalName} |
|
|
close={() => { |
|
|
appData={appData} |
|
|
setApplyModal(false) |
|
|
close={() => { |
|
|
setModalName(false) |
|
|
setApplyModal(false) |
|
|
}} |
|
|
setModalName(false) |
|
|
/> |
|
|
setAppData(null) |
|
|
) : ( |
|
|
details() |
|
|
"" |
|
|
}} |
|
|
)} |
|
|
/> |
|
|
|
|
|
) : ( |
|
|
|
|
|
"" |
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
</> |
|
|
</> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
function mapStateToProps (state) { |
|
|
const { auth } = state; |
|
|
const { global, applicationData } = state; |
|
|
return { |
|
|
return { |
|
|
user: auth.user, |
|
|
actions: global.actions, |
|
|
}; |
|
|
applicationData: applicationData.data || {} |
|
|
|
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(ApplicationCenter); |
|
|
export default connect(mapStateToProps)(ApplicationCenter); |
|
|
|
