初始提交
commit
aa6a44789d
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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`。
|
||||||
|
|
@ -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");
|
||||||
|
|
@ -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"],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -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",
|
||||||
|
}],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "src",
|
||||||
|
"paths": {
|
||||||
|
"~/*": ["*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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}",
|
||||||
|
// );
|
||||||
|
|
@ -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');
|
||||||
|
|
@ -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}');
|
||||||
|
|
||||||
|
|
@ -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}');
|
||||||
|
|
||||||
|
|
@ -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}');
|
||||||
|
|
||||||
|
|
@ -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');
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export {};
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
/**
|
||||||
|
* 全局常量定义
|
||||||
|
*/
|
||||||
|
|
||||||
|
export {};
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
/**
|
||||||
|
* 全局上下文定义
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
// 获取antd全局静态方法
|
||||||
|
export const InjectContext = React.createContext({});
|
||||||
|
|
@ -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");
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
function StatisticsContainer(props) {
|
||||||
|
return props.children;
|
||||||
|
}
|
||||||
|
export default StatisticsContainer;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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/"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue