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

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

@@ -29,14 +29,24 @@ async function check (ctx) {
 }
 
 async function edit (ctx, next) {
-   let errMsg = '创建应用失败'
    const transaction = await ctx.fs.dc.orm.transaction();
    try {
       const { models } = ctx.fs.dc;
       const { userId } = ctx.fs.api
       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,)
          await models.Application.update(storageData, {
@@ -66,7 +76,7 @@ async function edit (ctx, next) {
       ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
-         message: errMsg
+         message:  typeof error == 'string' ? error : undefined
       }
    }
 }
@@ -74,11 +84,11 @@ async function edit (ctx, next) {
 async function get (ctx) {
    try {
       const models = ctx.fs.dc.models;
-      const { userId } = ctx.fs.api
+      const { userId, token } = ctx.fs.api
       const { limit, page, orderBy, orderDirection } = ctx.query
       let findOption = {
          where: {
-            createUserId: userId,
+            // createUserId: userId,
          },
          order: [
             [orderBy || 'id', orderDirection || 'DESC']  //查询排序
@@ -91,12 +101,30 @@ async function get (ctx) {
       if (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.body = {
-         total: nvrRes.count,
-         data: nvrRes.rows
+         total: applicationRes.count,
+         data: applicationRes.rows
       }
    } catch (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();
    try {
       const models = ctx.fs.dc.models;
+      const { token } = ctx.fs.api
       const { appId } = ctx.params
 
+      const { appKey } = await models.Application.findOne({
+         where: {
+            id: appId
+         },
+      }) || {}
+
       await models.Application.destroy({
          where: {
             id: appId
@@ -142,6 +177,10 @@ async function del (ctx, next) {
          transaction
       })
 
+      await ctx.app.fs.authRequest.delete(`oauth2/token/invalidate_all`, {
+         query: { token, appKey }
+      })
+
       await transaction.commit();
       ctx.status = 204;
    } catch (error) {

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

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

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

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

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

@@ -22,35 +22,17 @@ import ApplyModal from "../components/applyModal";
 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 { dispatch, actions, user, loading, applicationData } = props;
+   const { applicationCenter } = actions;
    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 [appData, setAppData] = useState(null); //应用id
+   const APPLICATION = 'application'
+   const pageLimit = useRef({ limit: 10, page: 0 });
    const limits = useRef(); //每页实际条数
-    const page = useRef(query.page);
-    const deviceClickb = useRef(true)
-    const APPLICATION = "application";
-
 
 
    const columns = [
@@ -65,16 +47,20 @@ const ApplicationCenter = (props) => {
          title: "应用名称",
          dataIndex: "name",
          key: "name",
+         render: (text, r, index) => {
+            return r?.name.length > 8 ? `${r?.name.substr(0, 8)}...` : r?.name
+         },
+
       },
       {
          title: "APPID",
-            dataIndex: "appId",
+         dataIndex: "appKey",
          key: "appId",
 
       },
       {
          title: "Secret Key",
-            dataIndex: "secretKey",
+         dataIndex: "appSecret",
          key: "secretKey",
 
       },
@@ -90,39 +76,49 @@ const ApplicationCenter = (props) => {
                      onClick={() => {
                         setApplyModal(true)
                         setModalName(true)
+                        setAppData(row)
                      }}
                   >
                      修改
                   </Button>
-                        {row.forbidden ? (
+                  {row?.forbidden ? (
                      <Button
                         theme="borderless"
                         onClick={() => {
-
+                           dispatch(applicationCenter.putApplication({ appId: row?.id, forbidden: !row?.forbidden })).then(() => details())
                         }}
                      >
                         启用
                      </Button>
                   ) : (
                      <Popconfirm
-                                title="禁用后，应用系统引入的页面及能力将会暂时失效，请谨慎操作。"
+                        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="删除后，应用系统引入的页面及能力将会永久失效，请谨慎操作。"
+                     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>
@@ -145,18 +141,26 @@ const ApplicationCenter = (props) => {
             title: "创建时间",
             dataIndex: "createTime",
             key: "createTime",
+            render: (_, r, index) => {
+               return r?.createUser?.name
+            },
          },
          {
             title: "创建账号",
-                dataIndex: "account",
+            dataIndex: "createUserId",
             key: "account",
-
+            render: (_, r, index) => {
+               return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
+            },
          },
          {
             title: "应用类型",
-                dataIndex: "applicationType",
+            dataIndex: "type",
             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(() => {
       //初始化表格显示设置
       localStorage.getItem(APPLICATION) == null
@@ -295,7 +310,7 @@ const ApplicationCenter = (props) => {
             >
                <Table
                   columns={setupp.filter((s) => s)}
-                        dataSource={[{ name: 'csadca', }]}
+                  dataSource={applicationData.data}
                   bordered={false}
                   empty="暂无数据"
                   style={{
@@ -312,17 +327,17 @@ const ApplicationCenter = (props) => {
                }}
             >
                <span style={{ lineHeight: "30px" }}>
-                        共{100}个设备
+                  共{applicationData.total}个设备
                </span>
                <Pagination
                   className="22"
-                        total={100}
+                  total={applicationData.total}
                   showSizeChanger
                   currentPage={query.page + 1}
                   pageSizeOpts={[10, 20, 30, 40]}
                   onChange={(currentPage, pageSize) => {
                      setQuery({ limit: pageSize, page: currentPage - 1 });
-                            page.current = currentPage - 1
+                     pageLimit.current = { limit: pageSize, page: currentPage - 1 }
                   }}
                />
             </div>
@@ -347,9 +362,12 @@ const ApplicationCenter = (props) => {
             <ApplyModal
                visible={true}
                modalName={modalName}
+               appData={appData}
                close={() => {
                   setApplyModal(false)
                   setModalName(false)
+                  setAppData(null)
+                  details()
                }}
             />
          ) : (
@@ -361,9 +379,10 @@ const ApplicationCenter = (props) => {
 }
 
 function mapStateToProps (state) {
-    const { auth } = state;
+   const { global, applicationData } = state;
    return {
-        user: auth.user,
+      actions: global.actions,
+      applicationData: applicationData.data || {}
    };
 }
 

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

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

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

@@ -52,6 +52,13 @@ export const ApiTable = {
    putPushBanned: 'status/push/banned',//禁用推送配置
    getPushCopy: 'status/push/{configId}/copy',//复制推送配置
    getPushLog: '/status/push/{configId}/log',//获取推送记录
+
+
+   //应用管理
+   getApplication: '/application',   //获取应用信息
+   putApplication: '/application',   //禁用应用
+   delApplication: '/application/{appId}',   //删除应用
+   postApplication: '/application',   //创建/修改应用
 };
 
 export const VideoServeApi = {