free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

应用管理页面数据接入完成

release_1.2.1
wenlele 3 years ago
parent
f0d3a1144d
commit
33d19ed200
6 changed files with 533 additions and 451 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      code/VideoAccess-VCMP/api/app/lib/controllers/application/index.js
  2. 30
      code/VideoAccess-VCMP/web/client/src/sections/application/actions/application.js
  3. 34
      code/VideoAccess-VCMP/web/client/src/sections/application/components/applyModal.jsx
  4. 103
      code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx
  5. 1
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  6. 29
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

55
code/VideoAccess-VCMP/api/app/lib/controllers/application/index.js
View File

@ -29,14 +29,24 @@ async function check (ctx) {
} }
async function edit (ctx, next) { async function edit (ctx, next) {
let errMsg = '创建应用失败'
const transaction = await ctx.fs.dc.orm.transaction(); const transaction = await ctx.fs.dc.orm.transaction();
try { try {
const { models } = ctx.fs.dc; const { models } = ctx.fs.dc;
const { userId } = ctx.fs.api const { userId } = ctx.fs.api
const data = ctx.request.body; const data = ctx.request.body;
if (data.id) { let findOption = { where: { name: data.name } }
if (data.appId) {
findOption.where.id = { $ne: data.appId }
}
const applicationRes = await models.Application.findOne(findOption)
if (applicationRes) {
throw '已有相同应用名称'
}
if (data.appId) {
// 修改 // 修改
const storageData = Object.assign({}, data,) const storageData = Object.assign({}, data,)
await models.Application.update(storageData, { await models.Application.update(storageData, {
@ -66,7 +76,7 @@ async function edit (ctx, next) {
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
ctx.status = 400; ctx.status = 400;
ctx.body = { ctx.body = {
message: errMsg message: typeof error == 'string' ? error : undefined
} }
} }
} }
@ -74,11 +84,11 @@ async function edit (ctx, next) {
async function get (ctx) { async function get (ctx) {
try { try {
const models = ctx.fs.dc.models; const models = ctx.fs.dc.models;
const { userId } = ctx.fs.api const { userId, token } = ctx.fs.api
const { limit, page, orderBy, orderDirection } = ctx.query const { limit, page, orderBy, orderDirection } = ctx.query
let findOption = { let findOption = {
where: { where: {
createUserId: userId, // createUserId: userId,
}, },
order: [ order: [
[orderBy || 'id', orderDirection || 'DESC'] //查询排序 [orderBy || 'id', orderDirection || 'DESC'] //查询排序
@ -91,12 +101,30 @@ async function get (ctx) {
if (page && limit) { if (page && limit) {
findOption.offset = page * limit findOption.offset = page * limit
} }
const nvrRes = await models.Application.findAndCountAll(findOption) const applicationRes = await models.Application.findAndCountAll(findOption)
let createUserIds = new Set()
let cameraIds = []
for (let c of applicationRes.rows) {
cameraIds.push(c.id)
createUserIds.add(c.createUserId)
}
// 查用户信息
const createUserRes = await ctx.app.fs.authRequest.get(`user/${[...createUserIds].join(',') || -1}/message`, { query: { token } })
for (let { dataValues: n } of applicationRes.rows) {
const corCreateUser = createUserRes.find(u => u.id == n.createUserId)
n.createUser = {
name: corCreateUser ? corCreateUser.username : ''
}
}
ctx.status = 200; ctx.status = 200;
ctx.body = { ctx.body = {
total: nvrRes.count, total: applicationRes.count,
data: nvrRes.rows data: applicationRes.rows
} }
} catch (error) { } catch (error) {
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
@ -133,8 +161,15 @@ async function del (ctx, next) {
const transaction = await ctx.fs.dc.orm.transaction(); const transaction = await ctx.fs.dc.orm.transaction();
try { try {
const models = ctx.fs.dc.models; const models = ctx.fs.dc.models;
const { token } = ctx.fs.api
const { appId } = ctx.params const { appId } = ctx.params
const { appKey } = await models.Application.findOne({
where: {
id: appId
},
}) || {}
await models.Application.destroy({ await models.Application.destroy({
where: { where: {
id: appId id: appId
@ -142,6 +177,10 @@ async function del (ctx, next) {
transaction transaction
}) })
await ctx.app.fs.authRequest.delete(`oauth2/token/invalidate_all`, {
query: { token, appKey }
})
await transaction.commit(); await transaction.commit();
ctx.status = 204; ctx.status = 204;
} catch (error) { } catch (error) {

30
code/VideoAccess-VCMP/web/client/src/sections/application/actions/application.js
View File

@ -3,40 +3,52 @@
import { basicAction } from "@peace/utils"; import { basicAction } from "@peace/utils";
import { ApiTable } from "$utils"; import { ApiTable } from "$utils";
export function getCamera(query) { export function getApplication (query) {
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "get", type: "get",
dispatch: dispatch, dispatch: dispatch,
actionType: "GET_APPLICATION", actionType: "GET_APPLICATION",
query: query, query: query,
url: `${ApiTable.getCamera}`, url: `${ApiTable.getApplication}`,
msg: { option: "获取摄像头列表信息" }, msg: { option: "获取应用信息" },
reducer: { name: "applicationData", params: { noClear: true } }, reducer: { name: "applicationData", params: { noClear: true } },
}); });
} }
export function putForbidden(data, forbidden) { export function putApplication (data) {
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "put", type: "put",
dispatch: dispatch, dispatch: dispatch,
actionType: "PUT_APPLICATION", actionType: "PUT_APPLICATION",
data, data,
url: `${ApiTable.putForbidden}`, url: `${ApiTable.putApplication}`,
msg: { option: forbidden ? "启用" : "禁用" }, //禁用摄像头 msg: { option: data?.forbidden ? "启用" : "禁用" }, //禁用摄像头
reducer: {}, reducer: {},
}); });
} }
export function delCamera(orgId) { export function delApplication (orgId) {
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "del", type: "del",
dispatch: dispatch, dispatch: dispatch,
actionType: "DEL_APPLICATION", actionType: "DEL_APPLICATION",
url: `${ApiTable.delCamera.replace("{cameraId}", orgId)}`, url: `${ApiTable.delApplication.replace("{appId}", orgId)}`,
msg: { option: "设备会被存放在“设备回收站”中，删除" }, //删除摄像头 msg: { option: "删除" }, //删除应用
reducer: {}, reducer: {},
}); });
} }
export function postApplication (data) {
return (dispatch) =>
basicAction({
type: "post",
dispatch: dispatch,
data,
actionType: "POST_CHANGE_NVR",
msg: { option: data?.appId ? "修改" : "添加" },
url: `${ApiTable.postApplication}`,
});
}

34
code/VideoAccess-VCMP/web/client/src/sections/application/components/applyModal.jsx
View File

@ -2,25 +2,33 @@ import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Button, Form, Modal, } from "@douyinfe/semi-ui"; import { Button, Form, Modal, } from "@douyinfe/semi-ui";
const ApplyModal = ({ close, modalName, visible }) => { const ApplyModal = ({ dispatch, actions, close, modalName, visible, appData }) => {
const { applicationCenter } = actions;
const appDatas = appData || {}
const form = useRef(); const form = useRef();
const handleOk = () => { const handleOk = () => {
form.current form.current
.validate() .validate()
.then((values) => { .then((values) => {
console.log(values); if (appDatas?.id) {
// close() values.appId = appDatas?.id
}
dispatch(applicationCenter.postApplication(values)).then((res) => {
console.log(res);
if (res.success) {
close()
form.current.reset()
}
})
}) })
} }
return <Modal return <Modal
title={modalName ? "修改应用" : "创建应用"} title={modalName ? "修改应用" : "创建应用"}
visible={visible} visible={visible}
width={494} width={494}
onCancel={() => close()} onCancel={() => { close(); form.current.reset() }}
onOk={handleOk} onOk={handleOk}
> >
<Form <Form
@ -28,16 +36,14 @@ const ApplyModal = ({ close, modalName, visible }) => {
labelPosition="left" labelPosition="left"
labelAlign="left" labelAlign="left"
labelWidth="90px" labelWidth="90px"
onValueChange={(values) => console.log(values)} initValues={{ name: appDatas?.name || '', type: appDatas?.type || '' }}
getFormApi={(formApi) => (form.current = formApi)} getFormApi={(formApi) => (form.current = formApi)}
> >
<Form.Input <Form.Input
maxLength="36" maxLength="15"
field="name" field="name"
label="应用名称:" label="应用名称:"
allowEmpty={false} allowEmpty={false}
initValue={'' || ""}
placeholder="建议命名方式: [应用名 + 应用场景] 不超过15个字符" placeholder="建议命名方式: [应用名 + 应用场景] 不超过15个字符"
style={{ width: 350 }} style={{ width: 350 }}
rules={[ rules={[
@ -49,15 +55,15 @@ const ApplyModal = ({ close, modalName, visible }) => {
/> />
<Form.Select <Form.Select
label="设备厂家:" label="设备厂家:"
field="venderId" field="type"
initValue={'' || null} multiple
placeholder="请选择应用类型" placeholder="请选择应用类型"
allowEmpty={false} allowEmpty={false}
style={{ width: 350 }} style={{ width: 350 }}
rules={[{ required: true, message: "请选择应用类型" }]} rules={[{ required: true, message: "请选择应用类型" }]}
> >
{[{ name: 'web', id: 'web' }, { name: 'app', id: 'app' }, { name: '小程序', id: '小程序' }, { name: '其他', id: '其他' }].map((item, index) => ( {[{ name: 'web', value: 'web' }, { name: 'app', value: 'app' }, { name: '小程序', value: 'wxapp' }, { name: '其他', value: 'other' }].map((item, index) => (
<Form.Select.Option key={index} value={item.id}> <Form.Select.Option key={index} value={item.value}>
{item.name} {item.name}
</Form.Select.Option> </Form.Select.Option>
))} ))}

103
code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx
View File

@ -22,35 +22,17 @@ 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 [remarksModal, setRemarksModal] = useState(false);
const [videoPlay, setVideoPlay] = useState(false);
const [modalName, setModalName] = useState(false); //创建或修改 const [modalName, setModalName] = useState(false); //创建或修改
const [setup, setSetup] = useState(false); //表格设置是否显现 const [setup, setSetup] = useState(false); //表格设置是否显现
const [applyModal, setApplyModal] = useState(false); const [applyModal, setApplyModal] = useState(false);
const [cameraSetup, setcameraSetup] = useState(false);
const [setupp, setSetupp] = useState([]); const [setupp, setSetupp] = useState([]);
const [venderList, setvenderList] = useState([]); //厂商信息
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const [search, setSearch] = useState({}); //搜索条件 const [appData, setAppData] = useState(null); //应用id
const [rowId, setRowId] = useState(); //表格数据id const APPLICATION = 'application'
const [cameraData, setCameraData] = useState({}); //表格传递数据 const pageLimit = useRef({ limit: 10, page: 0 });
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 limits = useRef(); //每页实际条数
const page = useRef(query.page);
const deviceClickb = useRef(true)
const APPLICATION = "application";
const columns = [ const columns = [
@ -65,16 +47,20 @@ const ApplicationCenter = (props) => {
title: "应用名称", title: "应用名称",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
render: (text, r, index) => {
return r?.name.length > 8 ? `${r?.name.substr(0, 8)}...` : r?.name
},
}, },
{ {
title: "APPID", title: "APPID",
dataIndex: "appId", dataIndex: "appKey",
key: "appId", key: "appId",
}, },
{ {
title: "Secret Key", title: "Secret Key",
dataIndex: "secretKey", dataIndex: "appSecret",
key: "secretKey", key: "secretKey",
}, },
@ -90,45 +76,55 @@ const ApplicationCenter = (props) => {
onClick={() => { onClick={() => {
setApplyModal(true) setApplyModal(true)
setModalName(true) setModalName(true)
setAppData(row)
}} }}
> >
修改 修改
</Button> </Button>
{row.forbidden ? ( {row?.forbidden ? (
<Button <Button
theme="borderless" theme="borderless"
onClick={() => { onClick={() => {
dispatch(applicationCenter.putApplication({ appId: row?.id, forbidden: !row?.forbidden })).then(() => details())
}} }}
> >
启用 启用
</Button> </Button>
) : ( ) : (
<Popconfirm <Popconfirm
title="禁用后，应用系统引入的页面及能力将会暂时失效，请谨慎操作。" title={<div style={{ width: 200 }}>禁用后，应用系统引入的页面及能力将会暂时失效，请谨慎操作。</div>}
arrowPointAtCenter={false} arrowPointAtCenter={false}
showArrow={true} showArrow={true}
position="topRight" position="topRight"
onConfirm={() => { onConfirm={() => {
dispatch(applicationCenter.putApplication({ appId: row?.id, forbidden: !row?.forbidden })).then(() => {
setQuery({ limit: pageLimit.current.limit, page: pageLimit.current.page })
})
}} }}
> >
<Button theme="borderless">禁用</Button> <Button theme="borderless">禁用</Button>
</Popconfirm> </Popconfirm>
)} )}
<Popconfirm <Popconfirm
title="删除后，应用系统引入的页面及能力将会永久失效，请谨慎操作。" title={<div style={{ width: 200 }}>删除后，应用系统引入的页面及能力将会永久失效，请谨慎操作。</div>}
arrowPointAtCenter={false} arrowPointAtCenter={false}
width={300}
showArrow={true} showArrow={true}
position="topRight" position="topRight"
onConfirm={() => { 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> <Button theme="borderless">删除</Button>
</Popconfirm> </Popconfirm>
</div> </div >
); );
}, },
} }
@ -145,18 +141,26 @@ const ApplicationCenter = (props) => {
title: "创建时间", title: "创建时间",
dataIndex: "createTime", dataIndex: "createTime",
key: "createTime", key: "createTime",
render: (_, r, index) => {
return r?.createUser?.name
},
}, },
{ {
title: "创建账号", title: "创建账号",
dataIndex: "account", dataIndex: "createUserId",
key: "account", key: "account",
render: (_, r, index) => {
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
},
}, },
{ {
title: "应用类型", title: "应用类型",
dataIndex: "applicationType", dataIndex: "type",
key: "applicationType", key: "applicationType",
render: (_, r, index) => {
const type = r?.type?.map((item, index) => item + ';')
return type
},
}, },
]; ];
@ -179,6 +183,17 @@ const ApplicationCenter = (props) => {
}, },
]; ];
//获取应用信息
const details = (data) => {
pageLimit.current = query
dispatch(applicationCenter.getApplication(pageLimit.current)).then((res) => {
limits.current = res.payload.data.data.length
});
}
useEffect(() => {
details()
}, [query])
useEffect(() => { useEffect(() => {
//初始化表格显示设置 //初始化表格显示设置
localStorage.getItem(APPLICATION) == null localStorage.getItem(APPLICATION) == null
@ -295,7 +310,7 @@ const ApplicationCenter = (props) => {
> >
<Table <Table
columns={setupp.filter((s) => s)} columns={setupp.filter((s) => s)}
dataSource={[{ name: 'csadca', }]} dataSource={applicationData.data}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
style={{ style={{
@ -312,17 +327,17 @@ const ApplicationCenter = (props) => {
}} }}
> >
<span style={{ lineHeight: "30px" }}> <span style={{ lineHeight: "30px" }}>
共{100}个设备 共{applicationData.total}个设备
</span> </span>
<Pagination <Pagination
className="22" className="22"
total={100} total={applicationData.total}
showSizeChanger showSizeChanger
currentPage={query.page + 1} currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]} pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 }); setQuery({ limit: pageSize, page: currentPage - 1 });
page.current = currentPage - 1 pageLimit.current = { limit: pageSize, page: currentPage - 1 }
}} }}
/> />
</div> </div>
@ -347,9 +362,12 @@ const ApplicationCenter = (props) => {
<ApplyModal <ApplyModal
visible={true} visible={true}
modalName={modalName} modalName={modalName}
appData={appData}
close={() => { close={() => {
setApplyModal(false) setApplyModal(false)
setModalName(false) setModalName(false)
setAppData(null)
details()
}} }}
/> />
) : ( ) : (
@ -361,9 +379,10 @@ const ApplicationCenter = (props) => {
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth } = state; const { global, applicationData } = state;
return { return {
user: auth.user, actions: global.actions,
applicationData: applicationData.data || {}
}; };
} }

1
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
View File

@ -43,7 +43,6 @@ function nvrModal(props) {
.validate() .validate()
.then((values) => { .then((values) => {
//表单校验 //表单校验
console.log(values)
let valuesObj = JSON.parse(JSON.stringify(values)); let valuesObj = JSON.parse(JSON.stringify(values));
valuesObj.longitude = values.position.split(",")[0]; valuesObj.longitude = values.position.split(",")[0];
valuesObj.latitude = values.position.split(",")[1]; valuesObj.latitude = values.position.split(",")[1];

29
code/VideoAccess-VCMP/web/client/src/utils/webapi.js
View File

@ -41,17 +41,24 @@ export const ApiTable = {
postCameraRemark: 'camera/remark',//编辑摄像头备注 postCameraRemark: 'camera/remark',//编辑摄像头备注
//获取状态码 //获取状态码
getStatus: 'status',//获取状态码 getStatus: 'status',//获取状态码
putStatueBanned:'status/banned',//禁用状态码自定义 putStatueBanned: 'status/banned',//禁用状态码自定义
postStatusResolve:'status/resolve',//编辑解决方案 postStatusResolve: 'status/resolve',//编辑解决方案
postStatusCustom:'status/custom',//自定义状态码释义 postStatusCustom: 'status/custom',//自定义状态码释义
getStatusSimpleAll:'status/simple_all',//获取全部状态码简略信息 getStatusSimpleAll: 'status/simple_all',//获取全部状态码简略信息
getCameraListAll:'camera/listAll',//获取所有摄像头信息 getCameraListAll: 'camera/listAll',//获取所有摄像头信息
getStatusPush:'status/push',//获取推送配置 getStatusPush: 'status/push',//获取推送配置
putSasdtatusPush:'status/push',//编辑推送配置 putSasdtatusPush: 'status/push',//编辑推送配置
delPush:'status/push/{configId}',//删除推送配置 delPush: 'status/push/{configId}',//删除推送配置
putPushBanned:'status/push/banned',//禁用推送配置 putPushBanned: 'status/push/banned',//禁用推送配置
getPushCopy:'status/push/{configId}/copy',//复制推送配置 getPushCopy: 'status/push/{configId}/copy',//复制推送配置
getPushLog:'/status/push/{configId}/log',//获取推送记录 getPushLog: '/status/push/{configId}/log',//获取推送记录
//应用管理
getApplication: '/application', //获取应用信息
putApplication: '/application', //禁用应用
delApplication: '/application/{appId}', //删除应用
postApplication: '/application', //创建/修改应用
}; };
export const VideoServeApi = { export const VideoServeApi = {

Write Preview
Loading…
Cancel
Save