17 changed files with 661 additions and 79 deletions
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 561 B |
@ -0,0 +1,80 @@ |
|||
import React, { useState, useEffect, useRef } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import { Button, Form, Modal, } from "@douyinfe/semi-ui"; |
|||
|
|||
const ApplyModal = ({ close, modalName, visible }) => { |
|||
const form = useRef(); |
|||
|
|||
|
|||
const handleOk = () => { |
|||
form.current |
|||
.validate() |
|||
.then((values) => { |
|||
console.log(values); |
|||
// close() |
|||
}) |
|||
|
|||
} |
|||
|
|||
return <Modal |
|||
title={modalName ? "修改应用" : "创建应用"} |
|||
visible={visible} |
|||
width={610} |
|||
onCancel={() => close()} |
|||
onOk={handleOk} |
|||
> |
|||
<Form |
|||
allowEmpty |
|||
labelPosition="left" |
|||
labelAlign="left" |
|||
labelWidth="90px" |
|||
onValueChange={(values) => console.log(values)} |
|||
getFormApi={(formApi) => (form.current = formApi)} |
|||
> |
|||
<Form.Input |
|||
maxLength="36" |
|||
field="name" |
|||
label="应用名称:" |
|||
allowEmpty={false} |
|||
|
|||
initValue={'' || ""} |
|||
placeholder="建议命名方式: [应用名 + 应用场景] 如:智慧昌南-消防，不超过15个字符" |
|||
style={{ width: 466 }} |
|||
rules={[ |
|||
{ |
|||
required: true, |
|||
message: "建议命名方式: [应用名 + 应用场景] 如:智慧昌南-消防，不超过15个字符", |
|||
}, |
|||
]} |
|||
/> |
|||
<Form.Select |
|||
label="设备厂家:" |
|||
field="venderId" |
|||
initValue={'' || null} |
|||
placeholder="请选择应用类型" |
|||
allowEmpty={false} |
|||
style={{ width: 150 }} |
|||
rules={[{ required: true, message: "请选择应用类型" }]} |
|||
> |
|||
{[{ name: 'web', id: 'web' }, { name: 'app', id: 'app' }, { name: '小程序', id: '小程序' }, { name: '其他', id: '其他' }].map((item, index) => ( |
|||
<Form.Select.Option key={index} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
))} |
|||
</Form.Select> |
|||
</Form> |
|||
</Modal> |
|||
} |
|||
|
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members } = state; |
|||
return { |
|||
loading: members.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
global: global, |
|||
members: members.data, |
|||
}; |
|||
} |
|||
export default connect(mapStateToProps)(ApplyModal); |
|||
@ -1,20 +1,370 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Coming } from '$components' |
|||
import React, { useState, useEffect, useRef } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import moment from "moment"; |
|||
import qs from "qs"; |
|||
import { |
|||
Button, |
|||
Form, |
|||
Table, |
|||
Pagination, |
|||
Popover, |
|||
Tag, |
|||
Skeleton, |
|||
Popconfirm, |
|||
Row, |
|||
} from "@douyinfe/semi-ui"; |
|||
import { SimpleFileDownButton, VideoPlayModal, SkeletonScreen, Setup } from "$components"; |
|||
// import "../style.less"; |
|||
import ApplyModal from "../components/applyModal"; |
|||
// import RemarksModal from "../components/remarksModal"; |
|||
// import SideSheets from "../components/sideSheet"; |
|||
// import { accessType } from "./nvr"; |
|||
import '../style.less' |
|||
|
|||
const ApplicationCenter = (props) => { |
|||
const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props; |
|||
// const { equipmentWarehouse } = actions; |
|||
const [cameraModal, setCameraModal] = useState(false); |
|||
const [remarksModal, setRemarksModal] = useState(false); |
|||
const [videoPlay, setVideoPlay] = useState(false); |
|||
const [modalName, setModalName] = useState(false); //创建或修改 |
|||
const [setup, setSetup] = useState(false); //表格设置是否显现 |
|||
const [applyModal, setApplyModal] = useState(false); |
|||
const [cameraSetup, setcameraSetup] = useState(false); |
|||
const [setupp, setSetupp] = useState([]); |
|||
const [venderList, setvenderList] = useState([]); //厂商信息 |
|||
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"; |
|||
|
|||
return ( |
|||
<Coming /> |
|||
) |
|||
|
|||
|
|||
const columns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "", |
|||
render: (text, r, index) => { |
|||
return index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: "应用名称", |
|||
dataIndex: "name", |
|||
key: "name", |
|||
}, |
|||
{ |
|||
title: "APPID", |
|||
dataIndex: "appId", |
|||
key: "appId", |
|||
|
|||
}, |
|||
{ |
|||
title: "Secret Key", |
|||
dataIndex: "secretKey", |
|||
key: "secretKey", |
|||
|
|||
}, |
|||
{ |
|||
title: "操作", |
|||
width: "20%", |
|||
dataIndex: "", |
|||
render: (_, row) => { |
|||
return ( |
|||
<div style={{ display: "flex" }}> |
|||
<Button |
|||
theme="borderless" |
|||
onClick={() => { |
|||
setApplyModal(true) |
|||
setModalName(true) |
|||
}} |
|||
> |
|||
修改 |
|||
</Button> |
|||
{row.forbidden ? ( |
|||
<Button |
|||
theme="borderless" |
|||
onClick={() => { |
|||
|
|||
}} |
|||
> |
|||
启用 |
|||
</Button> |
|||
) : ( |
|||
<Popconfirm |
|||
title="禁用后，应用系统引入的页面及能力将会暂时失效，请谨慎操作。" |
|||
arrowPointAtCenter={false} |
|||
showArrow={true} |
|||
position="topRight" |
|||
onConfirm={() => { |
|||
|
|||
}} |
|||
> |
|||
<Button theme="borderless">禁用</Button> |
|||
</Popconfirm> |
|||
)} |
|||
<Popconfirm |
|||
title="删除后，应用系统引入的页面及能力将会永久失效，请谨慎操作。" |
|||
arrowPointAtCenter={false} |
|||
showArrow={true} |
|||
position="topRight" |
|||
onConfirm={() => { |
|||
|
|||
}} |
|||
> |
|||
<Button theme="borderless">删除</Button> |
|||
</Popconfirm> |
|||
|
|||
</div> |
|||
); |
|||
}, |
|||
} |
|||
]; |
|||
|
|||
//获取表格属性设置 |
|||
function attribute () { |
|||
const arr = localStorage.getItem(APPLICATION) |
|||
? JSON.parse(localStorage.getItem(APPLICATION)) |
|||
: []; |
|||
|
|||
const column = [ |
|||
{ |
|||
title: "创建时间", |
|||
dataIndex: "createTime", |
|||
key: "createTime", |
|||
}, |
|||
{ |
|||
title: "创建账号", |
|||
dataIndex: "account", |
|||
key: "account", |
|||
|
|||
}, |
|||
{ |
|||
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" }, |
|||
] |
|||
}, |
|||
]; |
|||
|
|||
useEffect(() => { |
|||
//初始化表格显示设置 |
|||
localStorage.getItem(APPLICATION) == null |
|||
? localStorage.setItem( |
|||
APPLICATION, |
|||
JSON.stringify(["createTime",]) |
|||
) |
|||
: ""; |
|||
attribute(); |
|||
}, []) |
|||
return ( |
|||
<> |
|||
<div style={{ position: "" }}> |
|||
<video |
|||
id="cameraBanner" |
|||
autoPlay |
|||
loop |
|||
muted |
|||
style={{ width: "100%", objectFit: "cover", height: 171 }} |
|||
src="/assets/video/camera_banner.mp4" |
|||
type="video/mp4" |
|||
/> |
|||
<div style={{ position: "absolute", top: 12 }}> |
|||
<div |
|||
style={{ |
|||
fontSize: 22, |
|||
paddingTop: 15, |
|||
marginLeft: 21, |
|||
}} |
|||
> |
|||
应用管理 |
|||
</div> |
|||
<div |
|||
style={{ |
|||
fontSize: 14, |
|||
paddingTop: 18, |
|||
marginLeft: 20, |
|||
}} |
|||
> |
|||
创建接口对应子系统的APPID及能力调用时所需的秘钥。 |
|||
</div> |
|||
<div |
|||
style={{ |
|||
fontSize: 14, |
|||
marginTop: 28, |
|||
marginLeft: 21, |
|||
width: 89, |
|||
height: 32, |
|||
lineHeight: 32 + "px", |
|||
textAlign: "center", |
|||
backgroundColor: "#D9EAFF", |
|||
color: "#1859C1", |
|||
cursor: "pointer", |
|||
}} |
|||
onClick={() => { |
|||
setApplyModal(true) |
|||
}} |
|||
> |
|||
创建应用 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div style={{ background: "#FFFFFF", marginTop: 5 }}> |
|||
<div |
|||
style={{ |
|||
width: "100%", |
|||
display: "flex", |
|||
justifyContent: "space-between", |
|||
padding: "13px 20px", |
|||
}} |
|||
> |
|||
<div |
|||
style={{ |
|||
width: 64, |
|||
height: 22, |
|||
fontSize: 16, |
|||
fontfAmily: "PingFangSC-Medium, PingFang SC", |
|||
fontWeight: "bold", |
|||
color: "rgba(0, 0, 0, 0.85)", |
|||
lineHeight: "22px", |
|||
}} |
|||
> |
|||
应用列表 |
|||
</div> |
|||
<div> |
|||
<Button |
|||
style={{ |
|||
width: 32, |
|||
height: 32, |
|||
background: "#D9D9D9", |
|||
borderadius: 3, |
|||
marginRight: 20, |
|||
}} |
|||
type="primary" |
|||
key="primary" |
|||
onClick={() => { |
|||
setSetup(true); |
|||
// setcameraSetup(true); |
|||
}} |
|||
> |
|||
<img |
|||
src="/assets/images/background/setup.png" |
|||
alt="设置" |
|||
style={{ width: 18, height: 18 }} |
|||
/> |
|||
</Button> |
|||
{/* <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> |
|||
|
|||
{/*表格设置*/} |
|||
{setup ? ( |
|||
<Setup |
|||
tableType={APPLICATION} |
|||
tableList={tableList} |
|||
close={() => { |
|||
setSetup(false); |
|||
attribute(); |
|||
}} |
|||
/> |
|||
) : ( |
|||
"" |
|||
)} |
|||
|
|||
{applyModal ? ( |
|||
<ApplyModal |
|||
visible={true} |
|||
modalName={modalName} |
|||
close={() => { |
|||
setApplyModal(false) |
|||
setModalName(false) |
|||
}} |
|||
/> |
|||
) : ( |
|||
"" |
|||
)} |
|||
|
|||
</> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(ApplicationCenter); |
|||
|
|||
Loading…
Reference in new issue