初始提交

master
fangjiakai 2025-11-17 17:14:02 +08:00
commit aa6a44789d
33 changed files with 2329 additions and 0 deletions

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

14
.gitignore vendored Normal file
View File

@ -0,0 +1,14 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
# production
/dist
/demo
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.idea
yarn.lock

75
README.md Normal file
View File

@ -0,0 +1,75 @@
# 微应用模板说明文档
## 在线文档
https://www.yuque.com/buhangjiecheshen-ymbtb/qc0093/gxdun1dphetcurko
## 安装依赖
项目依赖可通过 **yarn****npm** 进行安装:
```bash
# 使用 yarn
yarn
# 或使用 npm
npm i
```
## 开发服务&打包应用
```bash
# 启动开发服务
yarn serve:<env>
# 或
npm run serve:<env>
# 开发环境打包
yarn build:<env>
# 或
npm run build:<env>
```
## 路由配置&路由访问&自动化路由
所有页面必须放在`src/pages/container`目录下,启动访问页面请在浏览器地址栏输入`/<appIdentifier>/container/<你的路由页面文件名称>`
解释:
1. 所有页面组件命名为`index.js`或`index.jsx`,必须放在一个首字母大写的文件中。
2. `container`为固定路径访问格式
3. `<appIdentifier>`为应用的唯一标识符,也是应用路由的`basename`,在底座中用于区分其他应用。可在根目录 `jjb.config.js` 文件的 `appIdentifier` 节点中进行修改。
4. 自动化路由将根据`pages/container`中的路由页面文件自动生成路由树。
5. `id`匹配路由,文件夹命名`_id`
## 应用接口环境配置
应用接口环境相关配置在根目录 `jjb.config.js` 文件的 `environment` 节点中进行定义。
## 应用开发服务配置
应用开发服务相关配置在根目录 `jjb.config.js` 文件的 `server` 节点中进行定义。
## Babel 配置
应用的 `Babel` 配置在根目录 `jjb.babel.js` 文件中进行管理。
## 目录说明
1. `src/api/` 配置各个 store 模块的接口数据。
2. `src/components/` 全局公共组件。
3. `src/enumerate/` 全局各种枚举配置。
4. `src/pages/` 页面文件目录。
5. `src/main.js` 应用的入口文件。
## 核心依赖
1. `@cqsjjb/jjb-common-decorator`
1. 公共装饰器库,内部包含:
1. 按钮权限处理
2. antd/Table 控制
3. 文本重命名处理
4. 具体使用方式可参考各个模块的 `d.ts`
2. `@cqsjjb/jjb-common-lib`
1. 公共工具库,具体 API 使用请查看 `d.ts`
3. `@cqsjjb/jjb-dva-runtime`
1. 核心运行时,基于 `dvajs` 实现。
1. 应用核心依赖模块
2. 应用的自动化路由
3. `store` 模块接口数据处理
4. 均基于此依赖实现,具体使用方式请查看 `d.ts`
4. `@cqsjjb/jjb-react-admin-component`
1. 公共组件库,具体组件使用方式请查看 `d.ts`

66
blessed_by_buddha.js Normal file
View File

@ -0,0 +1,66 @@
/*
_ooOoo_
o8888888o
88" . "88
(| -_- |)
O\ = /O
____/`---'\____
. ' \\| |// `.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| \_| ''\---/'' | |
\ .-\__ `-` ___/-. /
___`. .' /--.--\ `. . __
."" '< `.___\_<|>_/___.' >'"".
| | : `- \`.;`\ _ /`;.`/ - ` : | |
\ \ `-. \_ __\ /__ _/ .-` / /
======`-.____`-.___\_____/___.-`____.-'======
`=---='
.............................................
佛祖保佑 永无BUG
佛曰:
写字楼里写字间写字间里程序员
程序人员写程序又拿程序换酒钱
酒醒只在网上坐酒醉还来网下眠
酒醉酒醒日复日网上网下年复年
但愿老死电脑间不愿鞠躬老板前
奔驰宝马贵者趣公交自行程序员
别人笑我忒疯癫我笑自己命太贱
不见满街漂亮妹哪个归得程序员
*/
const blessedByBuddha
= "%c _ooOoo_\n"
+ " o8888888o\n"
+ " 88\" . \"88\n"
+ " (| -_- |)\n"
+ " O\\ = /O\n"
+ " ____/`---'\\____\n"
+ " . ' \\\\| |// `.\n"
+ " / \\\\||| : |||// \\\n"
+ " / _||||| -:- |||||- \\\n"
+ " | | \\\\\\ - /// | |\n"
+ " | \\_| ''\\---/'' | |\n"
+ " \\ .-\\__ `-` ___/-. /\n"
+ " ___`. .' /--.--\\ `. . __\n"
+ " .\"\" '< `.___\\_<|>_/___.' >'\"\".\n"
+ " | | : `- \\`.;`\\ _ /`;.`/ - ` : | |\n"
+ " \\ \\ `-. \\_ __\\ /__ _/ .-` / /\n"
+ " ======`-.____`-.___\\_____/___.-`____.-'======\n"
+ " `=---='\n"
+ "\n"
+ "%c .............................................\n"
+ " 佛祖保佑 永无BUG\n"
+ "\n"
+ "%c 佛曰:\n"
+ " 写字楼里写字间,写字间里程序员;\n"
+ " 程序人员写程序,又拿程序换酒钱。\n"
+ " 酒醒只在网上坐,酒醉还来网下眠;\n"
+ " 酒醉酒醒日复日,网上网下年复年。\n"
+ " 但愿老死电脑间,不愿鞠躬老板前;\n"
+ " 奔驰宝马贵者趣,公交自行程序员。\n"
+ " 别人笑我忒疯癫,我笑自己命太贱;\n"
+ " 不见满街漂亮妹,哪个归得程序员?";
console.log(blessedByBuddha, "color:#ffd700", "color:red", "color:#1e80ff");

48
eslint.config.js Normal file
View File

@ -0,0 +1,48 @@
import antfu from "@antfu/eslint-config";
export default antfu({
formatters: {
html: false,
css: true,
},
test: false,
typescript: true,
react: true,
vue: false,
markdown: false,
stylistic: {
semi: true,
quotes: "double",
},
overrides: {
react: {
"react/no-comment-textnodes": "off",
"react-hooks-extra/no-unnecessary-use-prefix": "off",
"react-hooks-extra/prefer-use-state-lazy-initialization": "off",
"react-hooks/exhaustive-deps": "off",
},
javascript: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn",
"no-alert": process.env.NODE_ENV === "production" ? "error" : "warn",
"no-restricted-syntax": [
"error",
{
selector: "VariableDeclarator[id.name='pd']",
message: "不允许使用 pd请改用有语义化的变量名",
},
{
selector: "ObjectExpression > Property[key.name='pd']",
message: "不允许使用 pd请改用有语义化的变量名",
},
],
"no-unused-vars": ["error", { varsIgnorePattern: "^React$" }],
},
},
rules: {
"antfu/top-level-function": "off",
"node/prefer-global/process": "off",
"dot-notation": "off",
"linebreak-style": ["off", "windows"],
},
});

23
jjb.babel.js Normal file
View File

@ -0,0 +1,23 @@
module.exports = {
compact: false,
// 插件
plugins: [
[
"@babel/plugin-proposal-decorators",
{
legacy: true,
},
],
],
// 预设
presets: [
["@babel/preset-env", {
targets: {
browsers: ["ie >= 10"],
},
}],
["@babel/preset-react", {
runtime: "automatic",
}],
],
};

77
jjb.config.js Normal file
View File

@ -0,0 +1,77 @@
module.exports = {
// 应用后端git地址部署上线需要
javaGit: "<git-url>",
// 应用后端仓库名称,部署上线需要
javaGitName: "<git-name>",
// 环境配置
environment: {
development: {
// 应用后端分支名称,部署上线需要
javaGitBranch: "<branch-name>",
// 接口服务地址
API_HOST: "http://192.168.10.37:80",
},
production: {
// 应用后端分支名称,部署上线需要
javaGitBranch: "<branch-name>",
// 接口服务地址
API_HOST: "",
},
},
// 应用唯一标识符
appIdentifier: "primeport",
// 应用上下文注入全局变量
contextInject: {
// 应用Key
appKey: "",
fileUrl: "附件地址",
},
// public/index.html注入全局变量
windowInject: {
// 应用标题
title: "微应用模板",
// 注入css链接集合
links: [],
element: {
root: {
// 挂载DOM元素ID
id: "root",
},
},
// 注入js链接集合
scripts: [
"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr"
],
},
// 开发服务
server: {
// 监听端口号
port: "8080",
// 服务地址
host: "127.0.0.1",
// 是否自动打开浏览器
open: true,
},
// 框架
framework: {
// ant-design
antd: {
// 全局antd-class-name前缀
"ant-prefix": "micro-temp",
// 全局字体
"fontFamily": "PingFangSC-Regular",
// 全局主题色
"colorPrimary": "#1677ff",
// 全局圆角
"borderRadius": 2,
},
},
// webpack
webpackConfig: {
// 单页面插件
htmlWebpackPluginOption: {
// 自动注入编译后的文件到public/index.html中
inject: true,
},
},
};

9
jsconfig.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
}
},
"include": ["src"]
}

47
package.json Normal file
View File

@ -0,0 +1,47 @@
{
"name": "micro-app",
"version": "2.0.0",
"description": "建教帮微应用模板",
"author": "JJB",
"license": "MIT",
"main": "index.js",
"scripts": {
"serve": "node node_modules/@cqsjjb/scripts/webpack.dev.server.js",
"build": "node node_modules/@cqsjjb/scripts/webpack.build.js",
"push": "jjb-cmd push java production",
"clean-cache": "rimraf node_modules/.cache/webpack",
"serve:development": "cross-env NODE_ENV=development npm run serve",
"serve:production": "cross-env NODE_ENV=production npm run serve",
"build:development": "cross-env NODE_ENV=development npm run build",
"build:production": "cross-env NODE_ENV=production npm run build",
"code-optimization": "node node_modules/@cqsjjb/scripts/code-optimization.js",
"lint": "eslint --ext .js,.jsx,.tsx --fix src"
},
"dependencies": {
"@ant-design/icons": "latest",
"@ant-design/pro-components": "^2.8.10",
"@cqsjjb/jjb-common-decorator": "latest",
"@cqsjjb/jjb-common-lib": "latest",
"@cqsjjb/jjb-dva-runtime": "latest",
"@cqsjjb/jjb-react-admin-component": "latest",
"ahooks": "^3.9.5",
"antd": "latest",
"dayjs": "^1.11.7",
"lodash-es": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"zy-react-library": "^1.0.96"
},
"devDependencies": {
"@antfu/eslint-config": "^5.4.1",
"@babel/plugin-proposal-decorators": "^7.19.3",
"@cqsjjb/scripts": "latest",
"@eslint-react/eslint-plugin": "^2.2.2",
"cross-env": "^7.0.3",
"eslint": "^9.37.0",
"eslint-plugin-format": "^1.0.2",
"eslint-plugin-react-hooks": "^7.0.0",
"eslint-plugin-react-refresh": "^0.4.23",
"typescript": "^5.9.3"
}
}

54
public/index.html Normal file
View File

@ -0,0 +1,54 @@
<!--BEGIN-->
<!--<% var { env: $env, process: $process, mode: $mode, builtInfo: $builtInfo, links: $links, redirectLogin: $redirectLogin, framework: $framework, scripts: $scripts, element: $element } = htmlWebpackPlugin.options %>-->
<!--<% var { appKey: $appKey, antd: $antd, basename: $basename, API_HOST: $API_HOST } = $process %>-->
<!--<% var { ['ant-prefix']: $antPrefix, fontFamily: $fontFamily, colorPrimary: $colorPrimary, borderRadius: $borderRadius } = $antd %>-->
<!--NED-->
<!DOCTYPE html>
<html lang="zh">
<head data-built-info="<%= $builtInfo %>">
<meta charset="UTF-8"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<% for (const item of $links) { %>
<link type="text/css" rel="stylesheet" href="<%= item %>"></link>
<% } %>
<title>--</title>
<script>
(function () {
const APP_ENV = {
antd: {
'ant-prefix': '<%= $antPrefix %>',
fontFamily: '<%= $fontFamily %>',
colorPrimary: '<%= $colorPrimary %>',
borderRadius: parseInt('<%= $borderRadius %>')
},
appKey: '<%= $appKey %>',
basename: '<%= $basename %>',
API_HOST: '<%= $API_HOST %>'
};
APP_ENV.API_HOST = sessionStorage.API_HOST || APP_ENV.API_HOST || window.location.origin;
window.process = {
env: { app: APP_ENV },
NODE_ENV: '<%= $mode %>'
};
window.__JJB_ENVIRONMENT__ = {
API_HOST: APP_ENV.API_HOST,
redirect: '<%= $redirectLogin %>',
FRAMEWORK: APP_ENV.antd
};
})();
</script>
<!-- SCRIPTS -->
<% for (const item of $scripts) { %>
<script src="<%= item %>" type="text/javascript"></script>
<% } %>
</head>
<body>
<!-- NOSCRIPT -->
<noscript>此网页需要开启JavaScript功能。</noscript>
<!-- MAIN -->
<% const { root } = $element; %>
<div id="<%= root.id %>" style="width: 100%; height: 100%; position: relative"></div>
</body>
</html>

11
src/api/global/index.js Normal file
View File

@ -0,0 +1,11 @@
export {};
// export const riskList = declareRequest(
// "loading",
// "Post > @/xxx",
// "dataSource: [] | res.data || [] & total: 0 | res.totalCount || 0 & pageIndex: 1 | res.pageIndex || 1 & pageSize: 10 | res.pageSize || 10",
// );
// export const riskDelete = declareRequest(
// "loading",
// "Delete > @/xxx/{id}",
// );

25
src/api/mkmjArea/index.js Normal file
View File

@ -0,0 +1,25 @@
import {declareRequest} from '@cqsjjb/jjb-dva-runtime';
export const mkmjAreaList = declareRequest(
'mkmjAreaLoading',
'Post > @/primeport/mkmjArea/list',
);
export const mkmjAreaAdd = declareRequest(
'mkmjAreaLoading',
'Post > @/primeport/mkmjArea/save'
);
export const mkmjAreaEdit = declareRequest(
'mkmjAreaLoading',
'Put > @/primeport/mkmjArea/edit'
);
export const mkmjAreaDelete = declareRequest(
'mkmjAreaLoading',
'Delete > @/primeport/mkmjArea/{id}'
);
export const mkmjAreaBatchDelete = declareRequest(
'mkmjAreaLoading',
'Delete > @/primeport/mkmjArea/ids/{ids}'
);
export const mkmjAreaInfo = declareRequest('mkmjAreaLoading', 'Get > /primeport/mkmjArea/{id}');
export const getStatistics = declareRequest('mkmjAreaLoading', 'Post > @/primeport/mkmjArea/statistics');

View File

@ -0,0 +1,24 @@
import {declareRequest} from '@cqsjjb/jjb-dva-runtime';
export const mkmjAreaGateList = declareRequest(
'mkmjAreaGateLoading',
'Post > @/primeport/mkmjAreaGate/list',
);
export const mkmjAreaGateAdd = declareRequest(
'mkmjAreaGateLoading',
'Post > @/primeport/mkmjAreaGate/save'
);
export const mkmjAreaGateEdit = declareRequest(
'mkmjAreaGateLoading',
'Put > @/primeport/mkmjAreaGate/edit'
);
export const mkmjAreaGateDelete = declareRequest(
'mkmjAreaGateLoading',
'Delete > @/primeport/mkmjAreaGate/{id}'
);
export const mkmjAreaGateBatchDelete = declareRequest(
'mkmjAreaGateLoading',
'Delete > @/primeport/mkmjAreaGate/ids/{ids}'
);
export const mkmjAreaGateInfo = declareRequest('mkmjAreaGateLoading', 'Get > /primeport/mkmjAreaGate/{id}');

View File

@ -0,0 +1,24 @@
import {declareRequest} from '@cqsjjb/jjb-dva-runtime';
export const mkmjGateLogList = declareRequest(
'mkmjGateLogLoading',
'Post > @/primeport/mkmjGateLog/list',
);
export const mkmjGateLogAdd = declareRequest(
'mkmjGateLogLoading',
'Post > @/primeport/mkmjGateLog/save'
);
export const mkmjGateLogEdit = declareRequest(
'mkmjGateLogLoading',
'Put > @/primeport/mkmjGateLog/edit'
);
export const mkmjGateLogDelete = declareRequest(
'mkmjGateLogLoading',
'Delete > @/primeport/mkmjGateLog/{id}'
);
export const mkmjGateLogBatchDelete = declareRequest(
'mkmjGateLogLoading',
'Delete > @/primeport/mkmjGateLog/ids/{ids}'
);
export const mkmjGateLogInfo = declareRequest('mkmjGateLogLoading', 'Get > /primeport/mkmjGateLog/{id}');

View File

@ -0,0 +1,24 @@
import {declareRequest} from '@cqsjjb/jjb-dva-runtime';
export const mkmjGateVideoList = declareRequest(
'mkmjGateVideoLoading',
'Post > @/primeport/mkmjGateVideo/list',
);
export const mkmjGateVideoAdd = declareRequest(
'mkmjGateVideoLoading',
'Post > @/primeport/mkmjGateVideo/save'
);
export const mkmjGateVideoEdit = declareRequest(
'mkmjGateVideoLoading',
'Put > @/primeport/mkmjGateVideo/edit'
);
export const mkmjGateVideoDelete = declareRequest(
'mkmjGateVideoLoading',
'Delete > @/primeport/mkmjGateVideo/{id}'
);
export const mkmjGateVideoBatchDelete = declareRequest(
'mkmjGateVideoLoading',
'Delete > @/primeport/mkmjGateVideo/ids/{ids}'
);
export const mkmjGateVideoInfo = declareRequest('mkmjGateVideoLoading', 'Get > /primeport/mkmjGateVideo/{id}');

View File

@ -0,0 +1,25 @@
import {declareRequest} from '@cqsjjb/jjb-dva-runtime';
export const mkmjPassageList = declareRequest(
'mkmjPassageLoading',
'Post > @/primeport/mkmjPassage/list',
);
export const mkmjPassageAdd = declareRequest(
'mkmjPassageLoading',
'Post > @/primeport/mkmjPassage/save'
);
export const mkmjPassageEdit = declareRequest(
'mkmjPassageLoading',
'Put > @/primeport/mkmjPassage/edit'
);
export const mkmjPassageDelete = declareRequest(
'mkmjPassageLoading',
'Delete > @/primeport/mkmjPassage/{id}'
);
export const mkmjPassageBatchDelete = declareRequest(
'mkmjPassageLoading',
'Delete > @/primeport/mkmjPassage/ids/{ids}'
);
export const mkmjPassageInfo = declareRequest('mkmjPassageLoading', 'Get > /primeport/mkmjPassage/{id}');
export const getStatistics = declareRequest('mkmjPassageLoading', 'Post > @/primeport/mkmjPassage/statistics');

1
src/components/index.js Normal file
View File

@ -0,0 +1 @@
export {};

View File

@ -0,0 +1,5 @@
/**
* 全局常量定义
*/
export {};

View File

@ -0,0 +1,8 @@
/**
* 全局上下文定义
*/
import React from "react";
// 获取antd全局静态方法
export const InjectContext = React.createContext({});

View File

@ -0,0 +1,12 @@
/**
* 全局数据状态管理模块定义
*/
import { defineNamespace } from "@cqsjjb/jjb-dva-runtime";
export const NS_GLOBAL = defineNamespace("global");
export const NS_MKMJAREA = defineNamespace("mkmjArea");
export const NS_MKMJAREAGATE = defineNamespace("mkmjAreaGate");
export const NS_MKMJGATELOG = defineNamespace("mkmjGateLog");
export const NS_MKMJGATEVIDEO = defineNamespace("mkmjGateVideo");
export const NS_MKMJPASSAGE = defineNamespace("mkmjPassage");

47
src/main.js Normal file
View File

@ -0,0 +1,47 @@
import { setJJBCommonAntdMessage } from "@cqsjjb/jjb-common-lib";
import { setup } from "@cqsjjb/jjb-dva-runtime";
import { message } from "antd";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import "../blessed_by_buddha";
require("antd/dist/reset.css");
dayjs.locale("zh-cn");
setJJBCommonAntdMessage(message);
const app = setup();
// 非底座环境运行
if (!window.__POWERED_BY_QIANKUN__) {
// 云组件默认依赖
window.__coreLib = {};
window.__coreLib.React = require("react");
window.__coreLib.ReactDOM = require("react-dom");
window.__coreLib.jjbCommonLib = require("@cqsjjb/jjb-common-lib");
}
/**
* @description 挂载
* @param props {{ setGlobalState: ({ rendered: boolean }) => void }}
* @returns {Promise<*>} ''
*/
export const mount = async (props) => {
// 云组件默认依赖
window.__coreLib.React = require("react");
window.__coreLib.ReactDOM = require("react-dom");
window.__coreLib.jjbCommonLib = require("@cqsjjb/jjb-common-lib");
app.mount(props);
};
/**
* @description 卸载
* @param props {object}
* @returns {Promise<*>} ''
*/
export const unmount = async props => app.unmount(props);
/**
* @description 启动
* @param props
*/
export const bootstrap = async props => app.bootstrap(props);

View File

@ -0,0 +1,31 @@
import { ImportCore } from "@cqsjjb/jjb-common-decorator/module";
import React from "react";
export default class Entry extends React.Component {
state = {
Component: undefined,
};
componentDidMount() {
if (process.env.app.appKey) {
ImportCore({
name: "$",
from: "https://cdn.cqjjb.cn/jcloud/use/plugin/b31c9840a57f11ef91cf7f3cabbb7484/latest",
}).then((res) => {
if (res.status) {
this.setState({ Component: res.module?.default });
}
});
}
}
render() {
const { Component } = this.state;
return (Component && process.env.app.appKey) && (
<Component
detail={{ componentKey: process.env.app.appKey }}
appKey={process.env.app.appKey}
/>
);
}
}

View File

@ -0,0 +1,281 @@
import {Connect} from "@cqsjjb/jjb-dva-runtime";
import {Button, Form, message, Modal, Space, Descriptions} from "antd";
import {useEffect, useState} from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import {FORM_ITEM_RENDER_ENUM} from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import {NS_MKMJAREA} from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Map from "zy-react-library/components/Map";
import MapSelector from "zy-react-library/components/Map/MapSelector";
const AREA_TYPE = [
{name: "人行口门", bianma: "1"},
{name: "车行口门", bianma: "2"},
{name: "综合口门", bianma: "3"},
]
const AREA_STATUS = [
{name: "停用", bianma: "0"},
{name: "正常", bianma: "1"},
{name: "暂时关闭", bianma: "2"},
]
function MkmjArea(props) {
const [addModalVisible, setAddModalVisible] = useState(false);
const [infoModalVisible, setInfoModalVisible] = useState(false);
const [currentId, setCurrentId] = useState("");
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [form] = Form.useForm();
const {tableProps, getData} = useTable(props["mkmjAreaList"], {
form,
params: {
eqAreaLevel: 1,
}
});
return (
<div style={{padding: 10}}>
<Search
form={form}
onFinish={getData}
options={[
{name: "likeAreaName", label: "口门名称"},
{name: "eqAreaStatus", label: "口门状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_STATUS},
{name: "eqAreaType", label: "口门类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_TYPE},
{name: "eqAreaParentId", label: "所属区域",render: <DictionarySelect dictValue="primeport_area" />},
]}
/>
<Table
rowSelection={{
selectedRowKeys,
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
}}
toolBarRender={() => (
<Space>
<Button type="primary" icon={<AddIcon/>} onClick={() => setAddModalVisible(true)}>新增</Button>
<Button
icon={<DeleteIcon/>}
type="primary"
danger
onClick={() => {
if (!selectedRowKeys.length)
return message.warning("请选择要删除的行");
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjAreaBatchDelete"]({ids: selectedRowKeys});
message.success("删除成功");
getData();
},
});
}}
>
批量删除
</Button>
</Space>
)}
columns={[
{dataIndex: "areaParentName", title: "所属区域"},
{dataIndex: "areaName", title: "口门名称"},
{dataIndex: "areaType", title: "口门类型",render:(_,record)=>{
return record.areaType === 1 ? "人行口门" : record.areaType === 2 ? "车行口门" : "综合口门";
}},
{dataIndex: "location", title: "地理位置",render:(_,record)=>{
return `${record.latitude || ""}--${record.longitude || ""}`;
}},
{dataIndex: "videoNum", title: "视频个数",render:(_,record)=>{
return record.videoNum || 0;
}},
{
title: "操作",
align: "center",
width: 200,
render: (_, record) => (
<Space>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setInfoModalVisible(true);
}}
>
查看
</Button>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setAddModalVisible(true);
}}
>
编辑
</Button>
<Button
type="link"
danger
onClick={() => {
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjAreaDelete"]({id: record.id});
message.success("删除成功");
getData();
},
});
}}
>
删除
</Button>
<Button
type="link"
onClick={() => {
props.history.push(`./MkmjPassage?areaId=${record.areaId}`)
}}
>
添加通道
</Button>
<Button
type="link"
onClick={() => {
props.history.push(`./MkmjGateVideo?areaGateId=${record.areaId}&deviceType=1`)
}}
>
添加摄像头
</Button>
</Space>
),
},
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
currentId={currentId}
onCancel={() => {
setAddModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
<InfoModal
visible={infoModalVisible}
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
</div>
);
}
function AddModalComponent(props) {
const [form] = Form.useForm();
useEffect(() => {
if (props.currentId) {
props["mkmjAreaInfo"]({id: props.currentId}).then((res) => {
form.setFieldsValue({...res.data,
areaType: Number(res.data.areaType),
areaStatus: Number(res.data.areaStatus),
});
});
}
}, [props.currentId]);
const onCancel = () => {
form.resetFields();
props.onCancel();
};
const submit = async (values) => {
await props[!props.currentId ? "mkmjAreaAdd" : "mkmjAreaEdit"]({...values, areaLevel:1, id: props.currentId});
onCancel();
props.getData();
};
return (
<Modal
open={props.visible}
onCancel={onCancel}
onOk={form.submit}
title={props.currentId ? "编辑" : "新增"}
loading={props.mkmjArea.loading}
width={800}
>
<FormBuilder
labelCol={{ span: 6 }}
form={form}
span={24}
onFinish={submit}
showActionButtons={false}
options={[
{name: "areaName", label: "口门名称"},
{name: "areaType", label: "口门类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_TYPE},
{name: "areaParentId", label: "所属区域",render: <DictionarySelect dictValue="primeport_area" onGetLabel={(label) => form.setFieldValue("areaParentName",label)}/>},
{name: "areaParentName", label: "所属区域",onlyForLabel:true},
{name: "areaRange", label: "口门位置"},
{name: "areaStatus", label: "口门状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_STATUS},
{key:"map",customizeRender:true,render:<Map/>}
]}
/>
</Modal>
);
}
function InfoModalComponent(props) {
const [info, setInfo] = useState({});
const [mapVisible, setMapVisible] = useState(false);
useEffect(() => {
if (props.currentId) {
props["mkmjAreaInfo"]({id: props.currentId}).then((res) => {
setInfo(res.data);
});
}
}, [props.currentId]);
return (
<Modal
open={props.visible}
onCancel={props.onCancel}
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjArea.loading}
>
<Descriptions
labelStyle={{width: 200}}
column={1}
bordered
items={[
{children: info.areaParentName, label: "所属区域"},
{children: info.areaName, label: "口门名称"},
{children: info.areaRange, label: "口门位置"},
{children: info.areaLevel===1?"一级":info.areaLevel===2?"二级":"三级", label: "区域级别"},
{children: info.areaType===1?"人行口门":info.areaType===2?"车行口门":"综合口门", label: "口门类型"},
{children: info.areaStatus===0?"停用":info.areaStatus===1?"正常":"暂时关闭", label: "区域状态"},
{children: <LocationIcon onClick={() => {
setMapVisible(true);
}}/>, label: "位置"},
]}
/>
<MapSelector
visible={mapVisible}
onClose={() => setMapVisible(false)}
longitude={info.longitude}
latitude={info.latitude}
disable={true}
/>
</Modal>
);
}
const AddModal = Connect([NS_MKMJAREA], true)(AddModalComponent);
const InfoModal = Connect([NS_MKMJAREA], true)(InfoModalComponent);
export default Connect([NS_MKMJAREA], true)(MkmjArea);

View File

@ -0,0 +1,273 @@
import {Connect} from "@cqsjjb/jjb-dva-runtime";
import {Button, Form, message, Modal, Space, Descriptions} from "antd";
import {useEffect, useState} from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import {FORM_ITEM_RENDER_ENUM} from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import {NS_MKMJAREAGATE} from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
import MapSelector from "zy-react-library/components/Map/MapSelector";
import Map from "zy-react-library/components/Map";
import HeaderBack from "zy-react-library/components/HeaderBack";
const GATE_STATUS = [
{name: "停用", bianma: "0"},
{name: "正常", bianma: "1"},
{name: "暂时关闭", bianma: "2"},
]
const GATE_TYPE = [
{name: "入", bianma: "1"},
{name: "出", bianma: "2"},
]
const GATE_CATEGORY = [
{name: "人行口门", bianma: "0"},
{name: "车行口门", bianma: "1"},
{name: "综合口门", bianma: "2"},
]
function MkmjAreaGate(props) {
const {areaId, passageId} = useGetUrlQuery();
const [addModalVisible, setAddModalVisible] = useState(false);
const [infoModalVisible, setInfoModalVisible] = useState(false);
const [currentId, setCurrentId] = useState("");
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [form] = Form.useForm();
const {tableProps, getData} = useTable(props["mkmjAreaGateList"], {
form,
params: {
eqAreaId: areaId,
eqPassageId: passageId,
},
});
return (
<div style={{padding: 10}}>
<HeaderBack title={`通道管理`} />
<Search
form={form}
onFinish={getData}
options={[
{name: "likeGateName", label: "闸机名称"},
{name: "eqGateStatus", label: "闸机状态", render: FORM_ITEM_RENDER_ENUM.SELECT, items: GATE_STATUS},
{name: "eqGateType", label: "闸机类型", render: FORM_ITEM_RENDER_ENUM.SELECT, items: GATE_TYPE},
]}
/>
<Table
rowSelection={{
selectedRowKeys,
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
}}
toolBarRender={() => (
<Space>
<Button type="primary" icon={<AddIcon/>} onClick={() => setAddModalVisible(true)}>新增</Button>
<Button
icon={<DeleteIcon/>}
type="primary"
danger
onClick={() => {
if (!selectedRowKeys.length)
return message.warning("请选择要删除的行");
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjAreaGateBatchDelete"]({ids: selectedRowKeys});
message.success("删除成功");
getData();
},
});
}}
>
批量删除
</Button>
</Space>
)}
columns={[
{dataIndex: "gateName", title: "闸机名称"},
{dataIndex: "gateType", title: "闸机类型", render: (_, record) => {return record.gateType === 1 ? "入" : "出"}},
{dataIndex: "gateCategory", title: "闸机类别", render: (_, record) => {return record.gateCategory === 0 ? "人行口门" : record.gateCategory === 1 ? "车行口门" : "综合口门"}},
{
title: "操作",
align: "center",
width: 200,
render: (_, record) => (
<Space>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setInfoModalVisible(true);
}}
>
查看
</Button>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setAddModalVisible(true);
}}
>
编辑
</Button>
<Button
type="link"
danger
onClick={() => {
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjAreaGateDelete"]({id: record.id});
message.success("删除成功");
getData();
},
});
}}
>
删除
</Button>
<Button
type="link"
onClick={() => {
props.history.push(`./MkmjGateVideo?areaGateId=${record.areaGateId}&deviceType=2`)
}}
>
添加摄像头
</Button>
</Space>
),
},
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
currentId={currentId}
areaId={areaId}
passageId={passageId}
onCancel={() => {
setAddModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
<InfoModal
visible={infoModalVisible}
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
</div>
);
}
function AddModalComponent(props) {
const [form] = Form.useForm();
useEffect(() => {
if (props.currentId) {
props["mkmjAreaGateInfo"]({id: props.currentId}).then((res) => {
form.setFieldsValue({...res.data,
gateType: Number(res.data.gateType),
gateStatus: Number(res.data.gateStatus),
gateCategory: Number(res.data.gateCategory),
});
});
}
}, [props.currentId]);
const onCancel = () => {
form.resetFields();
props.onCancel();
};
const submit = async (values) => {
await props[!props.currentId ? "mkmjAreaGateAdd" : "mkmjAreaGateEdit"]({...values, areaId: props.areaId, passageId: props.passageId, id: props.currentId});
onCancel();
props.getData();
};
return (
<Modal
open={props.visible}
onCancel={onCancel}
onOk={form.submit}
title={props.currentId ? "编辑" : "新增"}
loading={props.mkmjAreaGate.loading}
width={800}
>
<FormBuilder
labelCol={{ span: 6 }}
form={form}
span={24}
onFinish={submit}
showActionButtons={false}
options={[
{name: "gateName", label: "闸机名称"},
{name: "gateType", label: "闸机类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: GATE_TYPE},
{name: "gateStatus", label: "闸机状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: GATE_STATUS},
{name: "gateCategory", label: "闸机类别",render: FORM_ITEM_RENDER_ENUM.SELECT, items: GATE_CATEGORY},
{name: "gateModel", label: "闸机型号"},
{name: "gatePosition", label: "闸机位置"},
{key:"map",customizeRender:true,render:<Map/>}
]}
/>
</Modal>
);
}
function InfoModalComponent(props) {
const [info, setInfo] = useState({});
const [mapVisible, setMapVisible] = useState(false);
useEffect(() => {
if (props.currentId) {
props["mkmjAreaGateInfo"]({id: props.currentId}).then((res) => {
setInfo(res.data);
});
}
}, [props.currentId]);
return (
<Modal
open={props.visible}
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjAreaGate.loading}
>
<Descriptions
labelStyle={{width: 200}}
column={1}
bordered
items={[
{children: info.gateName, label: "闸机名称"},
{children: info.gateType === "1" ? "入" : "出", label: "闸机类型"},
{children: info.gateStatus === "0" ? "停用" : info.gateStatus === "1" ? "正常" : "暂时关闭", label: "闸机状态"},
{children: info.gateCategory === "0" ? "人行口门" : info.gateCategory === "1" ? "车行口门" : "综合口门", label: "闸机类别"},
{children: info.gateModel, label: "闸机型号"},
{children: info.gatePosition, label: "闸机位置"},
{children: <LocationIcon onClick={() => {
setMapVisible(true);
}}/>, label: "位置"},
]}
/>
<MapSelector
visible={mapVisible}
onClose={() => setMapVisible(false)}
longitude={info.longitude}
latitude={info.latitude}
disable={true}
/>
</Modal>
);
}
const AddModal = Connect([NS_MKMJAREAGATE], true)(AddModalComponent);
const InfoModal = Connect([NS_MKMJAREAGATE], true)(InfoModalComponent);
export default Connect([NS_MKMJAREAGATE], true)(MkmjAreaGate);

View File

@ -0,0 +1,242 @@
import {Connect} from "@cqsjjb/jjb-dva-runtime";
import {Button, Form, message, Modal, Space, Descriptions} from "antd";
import {useEffect, useState} from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import {FORM_ITEM_RENDER_ENUM} from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import {NS_MKMJGATELOG} from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
function MkmjGateLog(props) {
const [addModalVisible, setAddModalVisible] = useState(false);
const [infoModalVisible, setInfoModalVisible] = useState(false);
const [currentId, setCurrentId] = useState("");
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [form] = Form.useForm();
const {tableProps, getData} = useTable(props["mkmjGateLogList"], {
form,
});
return (
<div style={{padding: 10}}>
<Search
form={form}
onFinish={getData}
options={[
{name: "areaGateId", label: "闸机id"},
{name: "state", label: "状态 0进 1出 2车辆进 3车辆出"},
{name: "logTime", label: "时间"},
{name: "userId", label: "人员id"},
{name: "userName", label: "人员姓名"},
{name: "gateType", label: "闸机类型 1-入 2出"},
{name: "ex1", label: "车牌号(车辆进出时使用)"},
{name: "ex2", label: "备用字段2"},
{name: "ex3", label: "备用字段3"},
{name: "ex4", label: "备用字段4"},
{name: "ex5", label: "备用字段5"},
]}
/>
<Table
rowSelection={{
selectedRowKeys,
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
}}
toolBarRender={() => (
<Space>
<Button type="primary" icon={<AddIcon/>} onClick={() => setAddModalVisible(true)}>新增</Button>
<Button
icon={<DeleteIcon/>}
type="primary"
danger
onClick={() => {
if (!selectedRowKeys.length)
return message.warning("请选择要删除的行");
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjGateLogBatchDelete"]({ids: selectedRowKeys});
message.success("删除成功");
getData();
},
});
}}
>
批量删除
</Button>
</Space>
)}
columns={[
{dataIndex: "areaGateId", title: "闸机id"},
{dataIndex: "state", title: "状态 0进 1出 2车辆进 3车辆出"},
{dataIndex: "logTime", title: "时间"},
{dataIndex: "userId", title: "人员id"},
{dataIndex: "userName", title: "人员姓名"},
{dataIndex: "gateType", title: "闸机类型 1-入 2出"},
{dataIndex: "ex1", title: "车牌号(车辆进出时使用)"},
{dataIndex: "ex2", title: "备用字段2"},
{dataIndex: "ex3", title: "备用字段3"},
{dataIndex: "ex4", title: "备用字段4"},
{dataIndex: "ex5", title: "备用字段5"},
{
title: "操作",
align: "center",
width: 200,
render: (_, record) => (
<Space>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setInfoModalVisible(true);
}}
>
查看
</Button>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setAddModalVisible(true);
}}
>
编辑
</Button>
<Button
type="link"
danger
onClick={() => {
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjGateLogDelete"]({id: record.id});
message.success("删除成功");
getData();
},
});
}}
>
删除
</Button>
</Space>
),
},
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
currentId={currentId}
onCancel={() => {
setAddModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
<InfoModal
visible={infoModalVisible}
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
</div>
);
}
function AddModalComponent(props) {
const [form] = Form.useForm();
useEffect(() => {
if (props.currentId) {
props["mkmjGateLogInfo"]({id: props.currentId}).then((res) => {
form.setFieldsValue(res.data);
});
}
}, [props.currentId]);
const onCancel = () => {
form.resetFields();
props.onCancel();
};
const submit = async (values) => {
await props[!props.currentId ? "mkmjGateLogAdd" : "mkmjGateLogEdit"]({...values, id: props.currentId});
onCancel();
props.getData();
};
return (
<Modal
open={props.visible}
onCancel={onCancel}
onOk={form.submit}
title="新增"
loading={props.mkmjGateLog.loading}
>
<FormBuilder
form={form}
span={24}
onFinish={submit}
showActionButtons={false}
options={[
{name: "areaGateId", label: "闸机id"},
{name: "state", label: "状态 0进 1出 2车辆进 3车辆出"},
{name: "logTime", label: "时间"},
{name: "userId", label: "人员id"},
{name: "userName", label: "人员姓名"},
{name: "gateType", label: "闸机类型 1-入 2出"},
{name: "ex1", label: "车牌号(车辆进出时使用)"},
{name: "ex2", label: "备用字段2"},
{name: "ex3", label: "备用字段3"},
{name: "ex4", label: "备用字段4"},
{name: "ex5", label: "备用字段5"},
]}
/>
</Modal>
);
}
function InfoModalComponent(props) {
const [info, setInfo] = useState({});
useEffect(() => {
if (props.currentId) {
props["mkmjGateLogInfo"]({id: props.currentId}).then((res) => {
setInfo(res.data);
});
}
}, [props.currentId]);
return (
<Modal
open={props.visible}
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjGateLog.loading}
>
<Descriptions
labelStyle={{width: 200}}
column={1}
bordered
items={[
{children: info.areaGateId, label: "闸机id"},
{children: info.state, label: "状态 0进 1出 2车辆进 3车辆出"},
{children: info.logTime, label: "时间"},
{children: info.userId, label: "人员id"},
{children: info.userName, label: "人员姓名"},
{children: info.gateType, label: "闸机类型 1-入 2出"},
{children: info.ex1, label: "车牌号(车辆进出时使用)"},
{children: info.ex2, label: "备用字段2"},
{children: info.ex3, label: "备用字段3"},
{children: info.ex4, label: "备用字段4"},
{children: info.ex5, label: "备用字段5"},
]}
/>
</Modal>
);
}
const AddModal = Connect([NS_MKMJGATELOG], true)(AddModalComponent);
const InfoModal = Connect([NS_MKMJGATELOG], true)(InfoModalComponent);
export default Connect([NS_MKMJGATELOG], true)(MkmjGateLog);

View File

@ -0,0 +1,234 @@
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Form, message, Modal, Space, Descriptions } from "antd";
import { useEffect, useState } from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import { NS_MKMJGATEVIDEO } from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import Map from "zy-react-library/components/Map";
import HeaderBack from "zy-react-library/components/HeaderBack";
const VIDEO_TYPE = [
{ name: "移动摄像头", bianma: "1" },
{ name: "固定摄像头", bianma: "2" },
]
function MkmjGateVideo(props) {
const { areaGateId, deviceType } = useGetUrlQuery();
const [addModalVisible, setAddModalVisible] = useState(false);
const [infoModalVisible, setInfoModalVisible] = useState(false);
const [currentId, setCurrentId] = useState("");
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [form] = Form.useForm();
const { tableProps, getData } = useTable(props["mkmjGateVideoList"], {
form,
params: {
eqAreaGateId: areaGateId,
},
});
return (
<div style={{ padding: 10 }}>
<HeaderBack title={`${deviceType === 1 ? "口门管理" : "设备管理"}`} />
<Search
form={form}
onFinish={getData}
options={[
{ name: "likeVideoResourceName", label: "摄像头名称" },
{ name: "eqVideoType", label: "摄像头类型", render: FORM_ITEM_RENDER_ENUM.SELECT, items: VIDEO_TYPE },
]}
/>
<Table
rowSelection={{
selectedRowKeys,
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
}}
toolBarRender={() => (
<Space>
<Button type="primary" icon={<AddIcon />} onClick={() => setAddModalVisible(true)}>新增</Button>
<Button
icon={<DeleteIcon />}
type="primary"
danger
onClick={() => {
if (!selectedRowKeys.length)
return message.warning("请选择要删除的行");
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjGateVideoBatchDelete"]({ ids: selectedRowKeys });
message.success("删除成功");
getData();
},
});
}}
>
批量删除
</Button>
</Space>
)}
columns={[
{ dataIndex: "videoResourceName", title: "摄像头名称" },
{ dataIndex: "videoType", title: "摄像头类型", render: (_, record) => record.videoType === 1 ? "移动摄像头" : "固定摄像头" },
{ dataIndex: "gateStatus", title: "状态", render: (_, record) => record.longitude ? "已定位" : "未定位" },
{ dataIndex: "isOnline", title: "是否在线", render: () => "是" },
{
title: "操作",
align: "center",
width: 200,
render: (_, record) => (
<Space>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setInfoModalVisible(true);
}}
>
查看
</Button>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setAddModalVisible(true);
}}
>
编辑
</Button>
<Button
type="link"
danger
onClick={() => {
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjGateVideoDelete"]({ id: record.id });
message.success("删除成功");
getData();
},
});
}}
>
删除
</Button>
</Space>
),
},
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
currentId={currentId}
onCancel={() => {
setAddModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
<InfoModal
visible={infoModalVisible}
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
</div>
);
}
function AddModalComponent(props) {
const [form] = Form.useForm();
useEffect(() => {
if (props.currentId) {
props["mkmjGateVideoInfo"]({ id: props.currentId }).then((res) => {
form.setFieldsValue(res.data);
});
}
}, [props.currentId]);
const onCancel = () => {
form.resetFields();
props.onCancel();
};
const submit = async (values) => {
await props[!props.currentId ? "mkmjGateVideoAdd" : "mkmjGateVideoEdit"]({ ...values, id: props.currentId });
onCancel();
props.getData();
};
return (
<Modal
open={props.visible}
onCancel={onCancel}
onOk={form.submit}
title="新增"
loading={props.mkmjGateVideo.loading}
>
<FormBuilder
form={form}
span={24}
onFinish={submit}
showActionButtons={false}
options={[
{ name: "gateVideoId", label: "闸机摄像头id" },
{ name: "areaGateId", label: "口门/闸机id" },
{ name: "deviceType", label: "设备类型1-口门 2-闸机)" },
{ name: "videoResourceId", label: "摄像头id" },
{ name: "videoType", label: "摄像头类型1-移动 2-平台)" },
{ name: "corpinfoId", label: "企业id" },
{ name: "longitude", label: "经度" },
{ name: "latitude", label: "纬度" },
]}
/>
</Modal>
);
}
function InfoModalComponent(props) {
const [info, setInfo] = useState({});
useEffect(() => {
if (props.currentId) {
props["mkmjGateVideoInfo"]({ id: props.currentId }).then((res) => {
setInfo(res.data);
});
}
}, [props.currentId]);
return (
<Modal
open={props.visible}
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjGateVideo.loading}
>
<Descriptions
labelStyle={{ width: 200 }}
column={1}
bordered
items={[
{ children: info.gateVideoId, label: "闸机摄像头id" },
{ children: info.areaGateId, label: "口门/闸机id" },
{ children: info.deviceType, label: "设备类型1-口门 2-闸机)" },
{ children: info.videoResourceId, label: "摄像头id" },
{ children: info.videoType, label: "摄像头类型1-移动 2-平台)" },
{ children: info.corpinfoId, label: "企业id" },
{ children: info.longitude, label: "经度" },
{ children: info.latitude, label: "纬度" },
]}
/>
</Modal>
);
}
const AddModal = Connect([NS_MKMJGATEVIDEO], true)(AddModalComponent);
const InfoModal = Connect([NS_MKMJGATEVIDEO], true)(InfoModalComponent);
export default Connect([NS_MKMJGATEVIDEO], true)(MkmjGateVideo);

View File

@ -0,0 +1,265 @@
import {Connect} from "@cqsjjb/jjb-dva-runtime";
import {Button, Form, message, Modal, Space, Descriptions} from "antd";
import {useEffect, useState} from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import {FORM_ITEM_RENDER_ENUM} from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import {NS_MKMJPASSAGE} from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Map from "zy-react-library/components/Map";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
import MapSelector from "zy-react-library/components/Map/MapSelector";
import HeaderBack from "zy-react-library/components/HeaderBack";
const PASSAGE_TYPE = [
{name: "人行通道", bianma: "1"},
{name: "车行通道", bianma: "2"},
{name: "综合通道", bianma: "3"},
]
const PASSAGE_STATUS = [
{name: "停用", bianma: "0"},
{name: "正常", bianma: "1"},
{name: "暂时关闭", bianma: "2"},
]
function MkmjPassage(props) {
const {areaId} = useGetUrlQuery();
const [addModalVisible, setAddModalVisible] = useState(false);
const [infoModalVisible, setInfoModalVisible] = useState(false);
const [currentId, setCurrentId] = useState("");
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [form] = Form.useForm();
const {tableProps, getData} = useTable(props["mkmjPassageList"], {
form,
params: {
eqAreaId: areaId,
},
});
return (
<div style={{padding: 10}}>
<HeaderBack title={`口门管理`} />
<Search
form={form}
onFinish={getData}
options={[
{name: "likePassageName", label: "通道名称"},
{name: "eqPassageStatus", label: "通道状态", render: FORM_ITEM_RENDER_ENUM.SELECT, items: PASSAGE_STATUS},
{name: "eqPassageType", label: "通道类型", render: FORM_ITEM_RENDER_ENUM.SELECT, items: PASSAGE_TYPE},
]}
/>
<Table
rowSelection={{
selectedRowKeys,
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
}}
toolBarRender={() => (
<Space>
<Button type="primary" icon={<AddIcon/>} onClick={() => setAddModalVisible(true)}>新增</Button>
<Button
icon={<DeleteIcon/>}
type="primary"
danger
onClick={() => {
if (!selectedRowKeys.length)
return message.warning("请选择要删除的行");
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjPassageBatchDelete"]({ids: selectedRowKeys});
message.success("删除成功");
getData();
},
});
}}
>
批量删除
</Button>
</Space>
)}
columns={[
{dataIndex: "passageName", title: "通道名称"},
{dataIndex: "passageType", title: "通道类型",render: (_, record) => record.passageType === 1 ? "人行通道" : record.passageType === 2 ? "车行通道" : "综合通道"},
{dataIndex: "passageStatus", title: "通道状态",render: (_, record) => record.passageStatus === 0 ? "停用" : record.passageStatus === 1 ? "正常" : "暂时关闭"},
{dataIndex: "gateNum", title: "视频个数",render:(_,record)=>{
return record.gateNum || 0;
}},
{
title: "操作",
align: "center",
width: 200,
render: (_, record) => (
<Space>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setInfoModalVisible(true);
}}
>
查看
</Button>
<Button
type="link"
onClick={() => {
setCurrentId(record.id);
setAddModalVisible(true);
}}
>
编辑
</Button>
<Button
type="link"
danger
onClick={() => {
Modal.confirm({
title: "确定删除吗?",
onOk: async () => {
await props["mkmjPassageDelete"]({id: record.id});
message.success("删除成功");
getData();
},
});
}}
>
删除
</Button>
<Button
type="link"
onClick={() => {
props.history.push(`./MkmjAreaGate?areaId=${record.areaId}&passageId=${record.passageId}`)
}}
>
添加设备
</Button>
</Space>
),
},
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
currentId={currentId}
areaId={areaId}
onCancel={() => {
setAddModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
<InfoModal
visible={infoModalVisible}
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
</div>
);
}
function AddModalComponent(props) {
const [form] = Form.useForm();
useEffect(() => {
if (props.currentId) {
props["mkmjPassageInfo"]({id: props.currentId}).then((res) => {
form.setFieldsValue({...res.data,
passageType: Number(res.data.passageType),
passageStatus: Number(res.data.passageStatus),
});
});
}
}, [props.currentId]);
const onCancel = () => {
form.resetFields();
props.onCancel();
};
const submit = async (values) => {
await props[!props.currentId ? "mkmjPassageAdd" : "mkmjPassageEdit"]({...values, areaId: props.areaId, id: props.currentId});
onCancel();
props.getData();
};
return (
<Modal
open={props.visible}
onCancel={onCancel}
onOk={form.submit}
title={props.currentId ? "编辑" : "新增"}
loading={props.mkmjPassage.loading}
width={800}
>
<FormBuilder
labelCol={{ span: 6 }}
form={form}
span={24}
onFinish={submit}
showActionButtons={false}
options={[
{name: "passageName", label: "通道名称"},
{name: "passageType", label: "通道类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: PASSAGE_TYPE},
{name: "passageStatus", label: "通道状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: PASSAGE_STATUS},
{key:"map",customizeRender:true,render:<Map/>}
]}
/>
</Modal>
);
}
function InfoModalComponent(props) {
const [info, setInfo] = useState({});
const [mapVisible, setMapVisible] = useState(false);
useEffect(() => {
if (props.currentId) {
props["mkmjPassageInfo"]({id: props.currentId}).then((res) => {
setInfo(res.data);
});
}
}, [props.currentId]);
return (
<Modal
open={props.visible}
onCancel={props.onCancel}
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjPassage.loading}
>
<Descriptions
labelStyle={{width: 200}}
column={1}
bordered
items={[
{children: info.passageName, label: "通道名称"},
{children: info.passageType===1?"人行通道":info.passageType===2?"车行通道":"综合通道", label: "通道类型"},
{children: info.passageStatus===0?"停用":info.passageStatus===1?"正常":"暂时关闭", label: "通道状态"},
{children: <LocationIcon onClick={() => {
setMapVisible(true);
}}/>, label: "位置"},
]}
/>
<MapSelector
visible={mapVisible}
onClose={() => setMapVisible(false)}
longitude={info.longitude}
latitude={info.latitude}
disable={true}
/>
</Modal>
);
}
const AddModal = Connect([NS_MKMJPASSAGE], true)(AddModalComponent);
const InfoModal = Connect([NS_MKMJPASSAGE], true)(InfoModalComponent);
export default Connect([NS_MKMJPASSAGE], true)(MkmjPassage);

View File

@ -0,0 +1,124 @@
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Form, message, Modal, Space, Descriptions } from "antd";
import { useEffect, useState } from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import { NS_MKMJAREA } from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Map from "zy-react-library/components/Map";
import MapSelector from "zy-react-library/components/Map/MapSelector";
const AREA_TYPE = [
{ name: "人行口门", bianma: "1" },
{ name: "车行口门", bianma: "2" },
{ name: "综合口门", bianma: "3" },
]
const AREA_STATUS = [
{ name: "停用", bianma: "0" },
{ name: "正常", bianma: "1" },
{ name: "暂时关闭", bianma: "2" },
]
function MkmjArea(props) {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [listData, setListData] = useState([]);
const [form] = Form.useForm();
const { tableProps, getData } = useTable(props["mkmjAreaList"], {
form,
params: {
eqAreaLevel: 1,
},
onSuccess: async(res) => {
const { data } = await props["getStatistics"]({ ids: res.data.map(item => item.areaId) })
setListData(res.data.map(item => {
const temp = data.find(stat => stat.id === item.areaId) || {}
item = {
...item,
...temp
}
return item;
}))
}
});
return (
<div style={{ padding: 10 }}>
<Search
form={form}
onFinish={getData}
options={[
{ name: "likeAreaName", label: "口门名称" },
{ name: "eqAreaStatus", label: "口门状态", render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_STATUS },
{ name: "eqAreaType", label: "口门类型", render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_TYPE },
{ name: "eqAreaParentId", label: "所属区域", render: <DictionarySelect dictValue="primeport_area" /> },
]}
/>
<Table
rowSelection={{
selectedRowKeys,
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
}}
columns={[
{ dataIndex: "areaName", title: "口门名称",render: (_, record) => (
<Space>
<Button
type="link"
onClick={() => {
props.history.push(`./PassageList?areaId=${record.areaId}&areaParentName=${record.areaParentName}`)
}}
>
{record.areaName}
</Button>
</Space>
),
},
{ dataIndex: "areaParentName", title: "所属区域" },
{
dataIndex: "areaType", title: "口门类型", render: (_, record) => {
return record.areaType === 1 ? "人行口门" : record.areaType === 2 ? "车行口门" : "综合口门";
}
},
{
dataIndex: "carInCount", title: "进入车辆", render: (_, record) => {
return record.carInCount || 0;
}
},
{
dataIndex: "carOutCount", title: "外出车辆", render: (_, record) => {
return record.carOutCount || 0;
}
},
{
dataIndex: "personInCount", title: "进入人员", render: (_, record) => {
return record.personInCount || 0;
}
},
{
dataIndex: "personOutCount", title: "外出人员", render: (_, record) => {
return record.personOutCount || 0;
}
},
{
dataIndex: "total", title: "总计", render: (_, record) => {
return (record.carInCount || 0) + (record.carOutCount || 0) + (record.personInCount || 0) + (record.personOutCount || 0);
}
},
]}
{...tableProps}
dataSource={listData}
/>
</div>
);
}
export default Connect([NS_MKMJAREA], true)(MkmjArea);

View File

@ -0,0 +1,118 @@
import {Connect} from "@cqsjjb/jjb-dva-runtime";
import {Button, Form, message, Modal, Space, Descriptions} from "antd";
import {useEffect, useState} from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import {FORM_ITEM_RENDER_ENUM} from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import {NS_MKMJPASSAGE} from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Map from "zy-react-library/components/Map";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
import MapSelector from "zy-react-library/components/Map/MapSelector";
import HeaderBack from "zy-react-library/components/HeaderBack";
const PASSAGE_TYPE = [
{name: "人行通道", bianma: "1"},
{name: "车行通道", bianma: "2"},
{name: "综合通道", bianma: "3"},
]
const PASSAGE_STATUS = [
{name: "停用", bianma: "0"},
{name: "正常", bianma: "1"},
{name: "暂时关闭", bianma: "2"},
]
function MkmjPassage(props) {
const {areaId, areaParentName} = useGetUrlQuery();
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [listData, setListData] = useState([]);
const getStatistics = async (ids) => {
const { data } = await props["getStatistics"]({ ids })
setStatistics(data)
}
const [form] = Form.useForm();
const {tableProps, getData} = useTable(props["mkmjPassageList"], {
form,
params: {
eqAreaId: areaId,
},
onSuccess: async(res) => {
const { data } = await props["getStatistics"]({ ids: res.data.map(item => item.passageId) })
setListData(res.data.map(item => {
const temp = data.find(stat => stat.id === item.passageId) || {}
item = {
...item,
...temp
}
return item;
}))
}
});
return (
<div style={{padding: 10}}>
<HeaderBack title={`口门管理`} />
<Search
form={form}
onFinish={getData}
options={[
{name: "likePassageName", label: "通道名称"},
{name: "eqPassageStatus", label: "通道状态", render: FORM_ITEM_RENDER_ENUM.SELECT, items: PASSAGE_STATUS},
{name: "eqPassageType", label: "通道类型", render: FORM_ITEM_RENDER_ENUM.SELECT, items: PASSAGE_TYPE},
]}
/>
<Table
rowSelection={{
selectedRowKeys,
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
}}
columns={[
{dataIndex: "passageName", title: "通道名称"},
{dataIndex: "areaParentName", title: "所属区域",render: (_, record) => areaParentName},
{dataIndex: "passageType", title: "通道类型",render: (_, record) => record.passageType === 1 ? "人行通道" : record.passageType === 2 ? "车行通道" : "综合通道"},
{dataIndex: "passageStatus", title: "通道状态",render: (_, record) => record.passageStatus === 0 ? "停用" : record.passageStatus === 1 ? "正常" : "暂时关闭"},
{
dataIndex: "carInCount", title: "进入车辆", render: (_, record) => {
return record.carInCount || 0;
}
},
{
dataIndex: "carOutCount", title: "外出车辆", render: (_, record) => {
return record.carOutCount || 0;
}
},
{
dataIndex: "personInCount", title: "进入人员", render: (_, record) => {
return record.personInCount || 0;
}
},
{
dataIndex: "personOutCount", title: "外出人员", render: (_, record) => {
return record.personOutCount || 0;
}
},
{
dataIndex: "total", title: "总计", render: (_, record) => {
return (record.carInCount || 0) + (record.carOutCount || 0) + (record.personInCount || 0) + (record.personOutCount || 0);
}
},
]}
{...tableProps}
dataSource={listData}
/>
</div>
);
}
export default Connect([NS_MKMJPASSAGE], true)(MkmjPassage);

View File

@ -0,0 +1,4 @@
function StatisticsContainer(props) {
return props.children;
}
export default StatisticsContainer;

View File

@ -0,0 +1,101 @@
import { ImportCore } from "@cqsjjb/jjb-common-decorator/module";
import { theme as antdTheme, App, ConfigProvider } from "antd";
import language from "antd/locale/zh_CN";
import React from "react";
import { InjectContext } from "~/enumerate/context";
export default class Container extends React.Component {
state = window?.base?.themeConfig || {
algorithm: window.process.env.app.antd.algorithm,
borderRadius: window.process.env.app.antd.borderRadius,
colorPrimary: window.process.env.app.antd.colorPrimary,
};
get token() {
const {
colorPrimary,
borderRadius,
} = this.state;
return {
fontFamily: window.process.env.app.antd.fontFamily,
colorPrimary,
borderRadius,
};
}
get algorithm() {
return antdTheme[this.state.algorithm];
}
componentDidMount() {
if (window.__IN_BASE__) {
// eslint-disable-next-line react-web-api/no-leaked-event-listener
window.base.addEventListener("EVENT_THEME_CONTROL", (e) => {
const config = e.data;
this.setState({ [config.field]: config.value });
});
}
}
render() {
return (
<ConfigProvider
theme={{
token: this.token,
algorithm: this.algorithm,
}}
locale={language}
prefixCls={window.process.env.app.antd["ant-prefix"]}
>
<App style={{ height: "100%" }}>
<AppMiddle {...this.props} />
</App>
</ConfigProvider>
);
}
}
function AppMiddle(props) {
return (
<InjectContext.Provider value={App.useApp()}>
{process.env.NODE_ENV === "development"
? props.children
: (
<Interceptor>
{props.children}
</Interceptor>
)}
</InjectContext.Provider>
);
}
class Interceptor extends React.Component {
state = {
Component: undefined,
};
componentDidMount() {
if (process.env.app.appKey) {
ImportCore({
name: "$",
from: "https://cdn.cqjjb.cn/jcloud/use/plugin/b31c9840a57f11ef91cf7f3cabbb7484/latest",
}).then(async (res) => {
if (res.status) {
this.setState({ Component: res.module?.PageCover });
}
});
}
}
render() {
const { Component } = this.state;
return (Component && process.env.app.appKey && process.env.NODE_ENV === "development")
? (
<Component appKey={process.env.app.appKey}>
{this.props.children}
</Component>
)
: this.props.children;
}
}

8
src/pages/index.js Normal file
View File

@ -0,0 +1,8 @@
export default function () {
return (
<h1>
底座微应用模板技术文档
<a rel="noreferrer noopener" target="_blank" href="https://www.yuque.com/buhangjiecheshen-ymbtb/qc0093/gxdun1dphetcurko">https://www.yuque.com/buhangjiecheshen-ymbtb/qc0093/gxdun1dphetcurko</a>
</h1>
);
}

16
webstorm.config.js Normal file
View File

@ -0,0 +1,16 @@
"use strict";
const path = require("node:path");
function resolve(dir) {
return path.join(__dirname, ".", dir);
}
module.exports = {
context: path.resolve(__dirname, "./"),
resolve: {
extensions: [".js"],
alias: {
"~": resolve("src/"),
},
},
};