(*)报表中心框架

2 years ago · 362693b63a
167 changed files with 12237 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,141 @@
+# ---> Go
+# Binaries for programs and plugins
+*.exe
+*.exe~
+*.dll
+*.so
+*.dylib
+
+# Test binary, built with `go test -c`
+*.test
+
+# Output of the go coverage tool, specifically when used with LiteIDE
+*.out
+
+# Dependency directories (remove the comment below to include it)
+# vendor/
+
+# ---> Node
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.production
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+*yarn.lock
+*package-lock.json
+*log/
+*downloadFiles/
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,65 @@
+{
+   // 使用 IntelliSense 了解相关属性。 
+   // 悬停以查看现有属性的描述。
+   // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+   "version": "0.2.0",
+   "configurations": [
+      {
+         "type": "node",
+         "request": "launch",
+         "name": "启动 API",
+         "program": "${workspaceRoot}/api/server.js",
+         "env": {
+            "NODE_ENV": "development"
+         },
+         "args": [
+            "-p 4700",
+            // "-f http://localhost:4700",
+            // 研发
+            "-g postgres://postgres:123@10.8.30.166:5432/hr-dev",
+            "--redisHost localhost",
+            "--redisPort 6379",
+            // "--apiEmisUrl http://10.8.30.112:14000",
+            // 测试
+            "--apiEmisUrl http://10.8.30.161:1111",
+            "--qnak XuDgkao6cL0HidoMAPnA5OB10Mc_Ew08mpIfRJK5",
+            "--qnsk yewcieZLzKZuDfig0wLZ9if9jKp2P_1jd3CMJPSa",
+            "--qnbkt dev-hr",
+            // "--qndmn http://resources.anxinyun.cn",
+            "--qndmn http://rjkwed13l.hn-bkt.clouddn.com",
+            
+            // 似乎不能传空 先注释 * 2
+            // "--clickHouseUser ",
+            // "--clickHousePassword ",
+
+            "--clickHousePort 30123",
+
+            // 开发
+            // "--clickHouseUrl http://10.8.30.71",
+            // "--clickHousePepEmis pepca_dev",
+            // "--clickHouseCamworkflow camworkflow",
+            // "--clickHouseHr hr_dev",
+
+            // 测试
+            "--clickHouseUrl http://10.8.30.161",
+            "--clickHousePepEmis pg_pepca",
+         ]
+      },
+      {
+         "type": "node",
+         "request": "launch",
+         "name": "run mocha",
+         "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
+         "stopOnEntry": false,
+         "args": [
+            "app/test/*.test.js",
+            "--no-timeouts"
+         ],
+         "cwd": "${workspaceRoot}",
+         "runtimeExecutable": null,
+         "env": {
+            "NODE_ENV": "development"
+         }
+      }
+   ]
+}
--- a/api/Dockerfile
+++ b/api/Dockerfile
@ -0,0 +1,36 @@
+# FROM repository.anxinyun.cn/devops/node:12-dev as builder
+
+# COPY . /var/app
+
+# WORKDIR /var/app
+
+# EXPOSE 8080
+
+# RUN npm config set registry=http://10.8.30.22:7000
+# RUN echo "{\"time\":\"$BUILD_TIMESTAMP\",\"build\": \"$BUILD_NUMBER\",\"revision\": \"$SVN_REVISION_1\",\"URL\":\"$SVN_URL_1\"}" > version.json
+# RUN npm cache clean -f
+# RUN rm -rf package-lock.json
+# RUN npm install --registry http://10.8.30.22:7000
+
+# FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node:12
+
+# COPY --from=builder --chown=node /var/app  /home/node/app
+
+# WORKDIR /home/node/app
+
+# CMD ["node", "server.js"]
+
+
+# 旧版本构建方式
+
+FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2
+
+COPY . /var/app
+
+WORKDIR /var/app
+
+EXPOSE 8080
+
+CMD ["-u", "http://localhost:8088"]
+
+ENTRYPOINT [ "node", "server.js" ]
--- a/api/app/index.js
+++ b/api/app/index.js
@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./lib');
--- a/api/app/lib/controllers/auth/index.js
+++ b/api/app/lib/controllers/auth/index.js
@ -0,0 +1,72 @@
+'use strict';
+const Hex = require('crypto-js/enc-hex');
+const MD5 = require('crypto-js/md5');
+const moment = require('moment');
+const uuid = require('uuid');
+
+async function login (ctx, next) {
+   // const transaction = await ctx.fs.dc.orm.transaction();
+   try {
+      const params = ctx.request.body;
+
+      const emisLoginRes = await ctx.app.fs.emisRequest.post('login', {
+         data: params
+      })
+
+      if (!emisLoginRes) {
+         throw "无此用户，请使用正确的登录信息"
+      } else {
+
+         emisLoginRes.authorized = true
+         emisLoginRes.expired = moment().add(1, 'day')
+         emisLoginRes.hrUserInfo = undefined
+
+         await ctx.redis.hmset(emisLoginRes.token, {
+            expired: moment().add(1, 'day'),
+            userInfo: JSON.stringify(emisLoginRes)
+         });
+
+         ctx.status = 200;
+         ctx.body = emisLoginRes;
+      }
+      // await transaction.commit();
+   } catch (error) {
+      // await transaction.rollback();
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+      ctx.status = 400;
+      let message = typeof error == 'string' ? error
+         : error.response.body.message || "登录失败"
+      if (message == '账号或密码错误') {
+         message = '无此用户，请使用正确的登录信息'
+      }
+
+      ctx.body = {
+         message: message
+      }
+   }
+}
+
+async function logout (ctx) {
+   try {
+      const models = ctx.fs.dc.models;
+      const params = ctx.request.body;
+
+      await ctx.app.fs.emisRequest.put('logout', {
+         data: params
+      })
+      await ctx.redisTools.hdelall(token);
+
+      ctx.status = 204;
+   } catch (error) {
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+      ctx.status = 400;
+      ctx.body = {
+
+      }
+   }
+}
+
+module.exports = {
+   login,
+   logout,
+};
--- a/api/app/lib/index.js
+++ b/api/app/lib/index.js
@ -0,0 +1,56 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const utils = require('./utils')
+const routes = require('./routes');
+const redisConnect = require('./service/redis')
+const socketConect = require('./service/socket')
+const paasRequest = require('./service/paasRequest');
+const authenticator = require('./middlewares/authenticator');
+const clickHouseClient = require('./service/clickHouseClient')
+// const schedule = require('./schedule')
+// const apiLog = require('./middlewares/api-log');
+
+module.exports.entry = function (app, router, opts) {
+   app.fs.logger.log('info', '[FS-AUTH]', 'Inject auth and api mv into router.');
+
+   app.fs.api = app.fs.api || {};
+   app.fs.opts = opts || {};
+   app.fs.utils = app.fs.utils || {};
+   app.fs.api.authAttr = app.fs.api.authAttr || {};
+   app.fs.api.logAttr = app.fs.api.logAttr || {};
+
+   // 顺序固定 ↓ 
+   redisConnect(app, opts)
+   socketConect(app, opts)
+
+   // 实例其他平台请求方法
+   paasRequest(app, opts)
+
+   // clickHouse 数据库 client 
+   clickHouseClient(app, opts)
+
+   // 工具类函数
+   utils(app, opts)
+
+   // // 定时任务
+   // schedule(app, opts)
+
+   // 鉴权中间件
+   router.use(authenticator(app, opts));
+
+   // 日志记录
+   // router.use(apiLog(app, opts));
+
+   router = routes(app, router, opts);
+};
+
+module.exports.models = function (dc) { // dc = { orm: Sequelize对象, ORM: Sequelize, models: {} }
+
+   // 模型关系摘出来 初始化之后再定义关系才行
+   fs.readdirSync(path.join(__dirname, '/models')).forEach((filename) => {
+      require(`./models/${filename}`)(dc)
+   });
+
+};
--- a/api/app/lib/middlewares/api-log.js
+++ b/api/app/lib/middlewares/api-log.js
@ -0,0 +1,83 @@
+/**
+ * Created by PengPeng on 2017/4/26.
+ */
+'use strict';
+
+const moment = require('moment');
+const pathToRegexp = require('path-to-regexp');
+
+function factory(app, opts) {
+    async function sendToEsAsync(producer, payloads) {
+        return new Promise((resolve, reject) => {
+            producer.send(payloads, function (err) {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve();
+                }
+            });
+        })
+    }
+
+    async function logger(ctx, next) {
+        const { path, method } = ctx;
+        const start = Date.now();
+
+        // 等待路由处理
+        await next();
+
+        try {
+            let logAttr = null;
+            for (let prop in app.fs.api.logAttr) {
+                let keys = [];
+                let re = pathToRegexp(prop.replace(/\:[A-Za-z_\-]+\b/g, '(\\d+)'), keys);
+                if (re.test(`${method}${path}`)) {
+                    logAttr = app.fs.api.logAttr[prop];
+                    break;
+                }
+            }
+            let parameter = null, parameterShow = null, user_id, _token, app_key;
+            if (ctx.fs.api) {
+                const { actionParameter, actionParameterShow, userId, token, appKey } = ctx.fs.api;
+                parameter = actionParameter;
+                parameterShow = actionParameterShow;
+                user_id = userId;
+                _token = token;
+                app_key = appKey;
+            }
+            const producer = ctx.fs.kafka.producer;
+
+            const message = {
+                log_time: moment().toISOString(),
+                method: method,
+                content: logAttr ? logAttr.content : '',
+                parameter: JSON.stringify(parameter) || JSON.stringify(ctx.request.body),
+                parameter_show: parameterShow,
+                visible: logAttr ? logAttr.visible : true,
+                cost: Date.now() - start,
+                status_code: ctx.status,
+                url: ctx.request.url,
+                user_agent: ctx.request.headers["user-agent"],
+                user_id: user_id,
+                session: _token,
+                app_key: app_key,
+                header: JSON.stringify(ctx.request.headers),
+                ip: ctx.request.headers["x-real-ip"] || ctx.ip
+            };
+
+            const payloads = [{
+                topic: `${opts.kafka.topicPrefix}`,
+                messages: [JSON.stringify(message)],
+                partition: 0
+            }];
+
+            // await sendToEsAsync(producer, payloads);
+
+        } catch (e) {
+            ctx.fs.logger.error(`日志记录失败: ${e}`);
+        }
+    }
+    return logger;
+}
+
+module.exports = factory;
--- a/api/app/lib/middlewares/authenticator.js
+++ b/api/app/lib/middlewares/authenticator.js
@ -0,0 +1,162 @@
+/**
+ * Created by PengLing on 2017/3/27.
+ */
+'use strict';
+
+const pathToRegexp = require('path-to-regexp');
+const util = require('util');
+const moment = require('moment');
+
+class ExcludesUrls {
+   constructor(opts) {
+      this.allUrls = undefined;
+      this.reload(opts);
+   }
+
+   sanitizePath (path) {
+      if (!path) return '/';
+      const p = '/' + path.replace(/^\/+/i, '').replace(/\/+$/, '').replace(/\/{2,}/, '/');
+      return p;
+   }
+
+   reload (opts) {
+      // load all url
+      if (!this.allUrls) {
+         this.allUrls = opts;
+         let that = this;
+         this.allUrls.forEach(function (url, i, arr) {
+            if (typeof url === "string") {
+               url = { p: url, o: '*' };
+               arr[i] = url;
+            }
+            const keys = [];
+            let eachPath = url.p;
+            url.p = (!eachPath || eachPath === '(.*)' || util.isRegExp(eachPath)) ? eachPath : that.sanitizePath(eachPath);
+            url.pregexp = pathToRegexp(eachPath, keys);
+         });
+      }
+   }
+
+   isExcluded (path, method) {
+      return this.allUrls.some(function (url) {
+         return !url.auth
+            && url.pregexp.test(path)
+            && (url.o === '*' || url.o.indexOf(method) !== -1);
+      });
+   }
+}
+
+/**
+ * 判断Url是否不鉴权
+ * @param {*} opts {exclude: [*] or []}，'*'或['*']:跳过所有路由; []:所有路由都要验证
+ * @param {*} path 当前request的path
+ * @param {*} method 当前request的method
+ */
+let isPathExcluded = function (opts, path, method) {
+   let excludeAll = Boolean(opts.exclude && opts.exclude.length && opts.exclude[0] == '*');
+   let excludes = null;
+   if (!excludeAll) {
+      let excludeOpts = opts.exclude || [];
+      excludeOpts.push({ p: '/login', o: 'POST' });
+      excludeOpts.push({ p: '/logout', o: 'PUT' });
+      excludes = new ExcludesUrls(excludeOpts);
+   }
+   let excluded = excludeAll || excludes.isExcluded(path, method);
+   return excluded;
+};
+
+let authorizeToken = async function (ctx, token) {
+   let startTime = moment()
+   let rslt = null;
+   const tokenFormatRegexp = /^(\{{0,1}([0-9a-fA-F]){8}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){12}\}{0,1})$/g;
+   if (token && tokenFormatRegexp.test(token)) {
+      try {
+         const expired = await ctx.redis.hget(token, 'expired');
+
+         // const authorizeRes = await ctx.app.fs.emisRequest.get('authorize', {
+         //    query: { token }
+         // })
+         // const { userInfo, expired } = authorizeRes;
+
+
+         // TODO 从项企 clickhouse 数据库中查 token 并更新
+         if (expired && moment().valueOf() <= moment(expired).valueOf()) {
+            const userInfo = JSON.parse(await ctx.redis.hmget(token, 'userInfo'));
+            const { pomsUserInfo: pomsUser } = userInfo
+
+            // const pomsUser = await ctx.app.fs.dc.models.User.findOne({
+            //    where: {
+            //       pepUserId: userInfo.id
+            //    }
+            // }) || {}
+            
+            rslt = {
+               'authorized': userInfo.authorized,
+               'resources': (userInfo || {}).resources || [],
+            };
+            ctx.fs.api.userId = pomsUser.id;
+            ctx.fs.api.userInfo = pomsUser;
+            ctx.fs.api.pepUserId = userInfo.id;
+            ctx.fs.api.pepUserInfo = userInfo;
+            ctx.fs.api.token = token;
+         }
+      } catch (err) {
+         const { error } = err.response || {};
+         ctx.fs.logger.log('[anxinyun]', '[AUTH] failed', (error || {}).message || `cannot GET /users/${token}`);
+      }
+   }
+   return rslt;
+};
+
+let isResourceAvailable = function (resources, options) {
+   let authCode = null;
+   // authorize user by authorization attribute
+   const { authAttr, method, path } = options;
+   for (let prop in authAttr) {
+      let keys = [];
+      let re = pathToRegexp(prop.replace(/\:[A-Za-z_\-]+\b/g, '(\\d+)'), keys);
+      if (re.test(`${method}${path}`)) {
+         authCode = authAttr[prop];
+         break;
+      }
+   }
+   return !authCode || (resources || []).some(code => code === authCode);
+};
+
+function factory (app, opts) {
+   return async function auth (ctx, next) {
+      const { path, method, header, query } = ctx;
+      ctx.fs.logger.log('[AUTH] start', path, method);
+      ctx.fs.api = ctx.fs.api || {};
+      ctx.fs.port = opts.port;
+      ctx.redis = app.redis;
+      ctx.redisTools = app.redisTools;
+      let error = null;
+      if (path) {
+         if (!isPathExcluded(opts, path, method)) {
+            const user = await authorizeToken(ctx, header.token || query.token);
+            if (user && user.authorized) {
+               // if (!isResourceAvailable(user.resources, { authAttr: app.fs.auth.authAttr, path, method })) {
+               //     error = { status: 403, name: 'Forbidden' }
+               // } else {
+               //     error = { status: 401, name: 'Unauthorized' }
+               // }
+            } else {
+               error = { status: 401, name: 'Unauthorized' }
+            }
+         }
+      } else {
+         error = { status: 401, name: 'Unauthorized' };
+      }
+      if (error) {
+         ctx.fs.logger.log('[AUTH] failed', path, method);
+         ctx.status = error.status;
+         ctx.body = error.name;
+      } else {
+         ctx.fs.logger.log('[AUTH] passed', path, method);
+         await next();
+      }
+   }
+}
+
+module.exports = factory;
--- a/api/app/lib/models/holiday.js
+++ b/api/app/lib/models/holiday.js
@ -0,0 +1,43 @@
+/* eslint-disable*/
+'use strict';
+
+module.exports = dc => {
+  const DataTypes = dc.ORM;
+  const sequelize = dc.orm;
+  const Holiday = sequelize.define("holiday", {
+    day: {
+      type: DataTypes.DATEONLY,
+      allowNull: false,
+      defaultValue: null,
+      comment: null,
+      primaryKey: true,
+      field: "day",
+      autoIncrement: false,
+      unique: "holiday_day_uindex"
+    },
+    holiday: {
+      type: DataTypes.JSONB,
+      allowNull: true,
+      defaultValue: null,
+      comment: null,
+      primaryKey: false,
+      field: "holiday",
+      autoIncrement: false
+    },
+    type: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "workday 工作日 / dayoff 休息日 / festivals 节假日",
+      primaryKey: false,
+      field: "type",
+      autoIncrement: false
+    }
+  }, {
+    tableName: "holiday",
+    comment: "",
+    indexes: []
+  });
+  dc.models.Holiday = Holiday;
+  return Holiday;
+};
--- a/api/app/lib/routes/auth/index.js
+++ b/api/app/lib/routes/auth/index.js
@ -0,0 +1,11 @@
+'use strict';
+
+const auth = require('../../controllers/auth');
+
+module.exports = function (app, router, opts) {
+   app.fs.api.logAttr['POST/login'] = { content: '登录', visible: true };
+   router.post('/login', auth.login);
+
+   app.fs.api.logAttr['PUT/logout'] = { content: '登出', visible: false };
+   router.put('/logout', auth.logout);
+};
--- a/api/app/lib/routes/index.js
+++ b/api/app/lib/routes/index.js
@ -0,0 +1,17 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+module.exports = function (app, router, opts) {
+   fs.readdirSync(__dirname).forEach((filename) => {
+      if (filename.indexOf('.') !== 0 && fs.lstatSync(path.join(__dirname, filename)).isDirectory()) {
+         fs.readdirSync(path.join(__dirname, filename)).forEach((api) => {
+            if (api.indexOf('.') == 0 || api.indexOf('.js') == -1) return;
+            require(`./${filename}/${api}`)(app, router, opts);
+         });
+      }
+   });
+
+   return router;
+};
--- a/api/app/lib/service/clickHouseClient.js
+++ b/api/app/lib/service/clickHouseClient.js
@ -0,0 +1,36 @@
+'use strict';
+const { ClickHouse } = require('clickhouse');
+
+function factory (app, opts) {
+   if (opts.clickHouse) {
+      try {
+         app.fs.clickHouse = {}
+         const { url, port, user, password, db = [] } = opts.clickHouse
+         for (let d of db) {
+            if (d.name && d.db) {
+               app.fs.clickHouse[d.name] = new ClickHouse({
+                  url: url,
+                  port: port,
+                  debug: opts.dev,
+                  format: "json",
+                  basicAuth: user && password ? {
+                     username: user,
+                     password: password,
+                  } : null,
+                  config: {
+                     database: d.db,
+                  },
+               })
+               console.info(`ClickHouse ${d.name} 初始化完成`);
+            } else {
+               throw 'opts.clickHouse 参数错误！'
+            }
+         }
+      } catch (error) {
+         console.error(error)
+         process.exit(-1);
+      }
+   }
+}
+
+module.exports = factory;
--- a/api/app/lib/service/paasRequest.js
+++ b/api/app/lib/service/paasRequest.js
@ -0,0 +1,67 @@
+'use strict';
+const request = require('superagent')
+
+class paasRequest {
+   constructor(root, { query = {} } = {}, option) {
+      this.root = root;
+      this.query = query
+      this.option = option
+   }
+
+   #buildUrl = (url) => {
+      return `${this.root}/${url}`;
+   }
+
+   #resultHandler = (resolve, reject) => {
+      return (err, res) => {
+         if (err) {
+            reject(err);
+         } else {
+            resolve(res[this.option.dataWord]);
+         }
+      };
+   }
+
+   get = (url, { query = {}, header = {} } = {}) => {
+      return new Promise((resolve, reject) => {
+         request.get(this.#buildUrl(url)).set(header).query(Object.assign(query, this.query)).end(this.#resultHandler(resolve, reject));
+      })
+   }
+
+   post = (url, { data = {}, query = {}, header = {} } = {}) => {
+      return new Promise((resolve, reject) => {
+         request.post(this.#buildUrl(url)).set(header).query(Object.assign(query, this.query)).send(data).end(this.#resultHandler(resolve, reject));
+      })
+   }
+
+   put = (url, { data = {}, header = {}, query = {}, } = {}) => {
+      return new Promise((resolve, reject) => {
+         request.put(this.#buildUrl(url)).set(header).query(Object.assign(query, this.query)).send(data).end(this.#resultHandler(resolve, reject));
+      })
+   }
+
+   delete = (url, { header = {}, query = {} } = {}) => {
+      return new Promise((resolve, reject) => {
+         request.delete(this.#buildUrl(url)).set(header).query(Object.assign(query, this.query)).end(this.#resultHandler(resolve, reject));
+      })
+   }
+}
+
+function factory (app, opts) {
+   if (opts.pssaRequest) {
+      try {
+         for (let r of opts.pssaRequest) {
+            if (r.name && r.root) {
+               app.fs[r.name] = new paasRequest(r.root, { ...(r.params || {}) }, { dataWord: r.dataWord || 'body' })
+            } else {
+               throw 'opts.pssaRequest 参数错误！'
+            }
+         }
+      } catch (error) {
+         console.error(error)
+         process.exit(-1);
+      }
+   }
+}
+
+module.exports = factory;
--- a/api/app/lib/service/redis.js
+++ b/api/app/lib/service/redis.js
@ -0,0 +1,41 @@
+'use strict';
+// https://github.com/luin/ioredis
+const redis = require("ioredis")
+
+module.exports = async function factory (app, opts) {
+   let client = opts.redis.pwd ?
+      new redis.Cluster([
+         {
+            host: opts.redis.host,
+            port: opts.redis.port
+         }
+      ], {
+         redisOptions: {
+            password: opts.redis.pwd,
+         },
+      })
+      : new redis(opts.redis.port, opts.redis.host, {
+         password: opts.redis.pwd,
+      });
+
+   client.on("error", function (err) {
+      app.fs.logger.error('info', '[FS-AUTH-REDIS]', `redis connect error. ${opts.redis.host + ':' + opts.redis.port}`);
+      // console.error("Error :", err);
+      // process.exit(-1);
+   });
+
+   client.on('connect', function () {
+      console.info(`redis connect success ${opts.redis.host + ':' + opts.redis.port}`);
+   })
+
+   // 自定义方法
+   async function hdelall (key) {
+      const obj = await client.hgetall(key);
+      await client.hdel(key, Object.keys(obj))
+   }
+
+   app.redis = client
+   app.redisTools = {
+      hdelall,
+   }
+}
--- a/api/app/lib/service/socket.js
+++ b/api/app/lib/service/socket.js
@ -0,0 +1,15 @@
+'use strict';
+const moment = require('moment')
+
+module.exports = async function factory (app, opts) {
+
+   app.socket.on('connection', async (socket) => {
+      console.info('WEB_SOCKET token：' + socket.handshake.query.token + ' 已连接：id ' + socket.id + ' 时间：' + moment(socket.handshake.time).format());
+
+      socket.on('disconnecting', async (reason) => {
+         const connectSeconds = moment().diff(moment(socket.handshake.time), 'seconds')
+
+         console.info('WEB_SOCKET token：' + socket.handshake.query.token + ' 已断开连接：' + reason + ' 连接时长：' + connectSeconds + 's');
+      })
+   })
+}
--- a/api/app/lib/utils/constant.js
+++ b/api/app/lib/utils/constant.js
@ -0,0 +1,20 @@
+'use strict';
+
+module.exports = function (app, opts) {
+
+   const dayType = {
+      dayoff: '普假',
+      workday: '工作日',
+      festivals: '法定假',
+   }
+
+   const overtimeType = {
+      '发放加班补偿': '折算',
+      '调休': '调休'
+   }
+
+   return {
+      dayType,
+      overtimeType,
+   }
+}
--- a/api/app/lib/utils/index.js
+++ b/api/app/lib/utils/index.js
@ -0,0 +1,17 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+module.exports = async function (app, opts) {
+   fs.readdirSync(__dirname).forEach((filename) => {
+      if (!['index.js'].some(f => filename == f)) {
+         const utils = require(`./${filename}`)(app, opts)
+         console.log(`载入 ${filename} 工具集成功`);
+         app.fs.utils = {
+            ...app.fs.utils,
+            ...utils,
+         }
+      }
+   });
+};
--- a/api/app/lib/utils/xlsxDownload.js
+++ b/api/app/lib/utils/xlsxDownload.js
@ -0,0 +1,82 @@
+'use strict';
+const fs = require('fs');
+const xlsx = require('better-xlsx');
+const path = require('path')
+const moment = require('moment')
+
+
+module.exports = function (app, opts) {
+
+   //递归创建目录 同步方法  
+   async function makeDir (dir) {
+      if (!fs.existsSync(dir)) {
+         makeDir(path.dirname(dir))
+         fs.mkdirSync(dir, function (err) {
+            if (err) {
+               throw err
+            }
+         });
+      }
+   }
+
+   async function simpleExcelDown ({ data = [], header = [], fileName = moment().format('YYYY-MM-DD HH:mm:ss') } = {}) {
+      const fileDirPath = path.join(__dirname, `../../downloadFiles`)
+      makeDir(fileDirPath)
+      const file = new xlsx.File();
+      const sheet_1 = file.addSheet('sheet_1');
+
+      // header
+      const headerStyle = new xlsx.Style();
+      headerStyle.align.h = 'center';
+      headerStyle.align.v = 'center';
+      headerStyle.border.right = 'thin';
+      headerStyle.border.rightColor = '#000000';
+      headerStyle.border.bottom = 'thin';
+      headerStyle.border.bottomColor = '#000000';
+
+      const headerRow = sheet_1.addRow();
+      const indexCell = headerRow.addCell();
+      indexCell.value = '序号'
+      indexCell.style = headerStyle
+      for (let h of header) {
+         const cell = headerRow.addCell();
+         cell.value = h.title;
+         cell.style = headerStyle
+      }
+
+      // data
+      const style = new xlsx.Style();
+      style.align.h = 'left';
+      style.align.v = 'center';
+      style.border.right = 'thin';
+      style.border.rightColor = '#000000';
+      style.border.bottom = 'thin';
+      style.border.bottomColor = '#000000';
+      for (let i = 0; i < data.length; i++) {
+         const row = sheet_1.addRow();
+         const indexCell = row.addCell();
+         indexCell.value = i + 1
+         indexCell.style = headerStyle
+         for (let h of header) {
+            const cell = row.addCell();
+            cell.value = data[i][h.key] || h.defaultValue || '';
+            cell.style = style
+         }
+      }
+
+      const savePath = path.join(fileDirPath, fileName)
+      await new Promise(function (resolve, reject) {
+         file.saveAs()
+            .pipe(fs.createWriteStream(savePath))
+            .on('finish', () => {
+               resolve()
+            });
+      })
+      return savePath
+   }
+
+   return {
+      simpleExcelDown,
+      makeDir
+   }
+}
--- a/api/config.js
+++ b/api/config.js
@ -0,0 +1,182 @@
+'use strict';
+/*jslint node:true*/
+const path = require('path');
+const os = require('os');
+const moment = require('moment');
+const args = require('args');
+
+const dev = process.env.NODE_ENV == 'development';
+
+// 启动参数
+args.option(['p', 'port'], '启动端口');
+args.option(['g', 'pg'], 'postgre 服务 URL');
+
+args.option('redisHost', 'redisHost');
+args.option('redisPort', 'redisPort');
+// args.option('redisPswd', 'redisPassword');
+
+args.option('apiEmisUrl', '企业管理 api');
+
+// 七牛云存储参数
+args.option('qnak', 'qiniuAccessKey');
+args.option('qnsk', 'qiniuSecretKey');
+args.option('qnbkt', 'qiniuBucket');
+args.option('qndmn', 'qiniuDomain');
+
+// clickHouse
+args.option('clickHouseUrl', 'clickHouse Url');
+args.option('clickHousePort', 'clickHouse Port');
+args.option('clickHousePepEmis', 'clickHouse 项企数据库名称');
+
+const flags = args.parse(process.argv);
+
+const RC_DB = process.env.RC_DB || flags.pg;
+
+// Redis 参数
+const IOTA_REDIS_SERVER_HOST = process.env.IOTA_REDIS_SERVER_HOST || flags.redisHost || "localhost";//redis IP
+const IOTA_REDIS_SERVER_PORT = process.env.IOTA_REDIS_SERVER_PORT || flags.redisPort || "6379";//redis 端口
+const IOTA_REDIS_SERVER_PWD = process.env.IOTA_REDIS_SERVER_PWD || flags.redisPswd || "";//redis 密码
+
+// 企业管理 api
+const API_EMIS_URL = process.env.API_EMIS_URL || flags.apiEmisUrl;
+
+// 七牛云存储参数
+const QINIU_DOMAIN_QNDMN_RESOURCE = process.env.ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE || flags.qndmn;
+const QINIU_BUCKET_RESOURCE = process.env.ANXINCLOUD_QINIU_BUCKET_RESOURCE || flags.qnbkt;
+const QINIU_AK = process.env.ANXINCLOUD_QINIU_ACCESSKEY || flags.qnak;
+const QINIU_SK = process.env.ANXINCLOUD_QINIU_SECRETKEY || flags.qnsk;
+
+// clickHouse
+const CLICKHOUST_URL = process.env.CLICKHOUST_URL || flags.clickHouseUrl
+const CLICKHOUST_PORT = process.env.CLICKHOUST_PORT || flags.clickHousePort
+const CLICKHOUST_USER = process.env.CLICKHOUST_USER || flags.clickHouseUser
+const CLICKHOUST_PASSWORD = process.env.CLICKHOUST_PASSWORD || flags.clickHousePassword
+const CLICKHOUST_PEP_EMIS = process.env.CLICKHOUST_PEP_EMIS || flags.clickHousePepEmis
+
+if (
+   !RC_DB
+   || !IOTA_REDIS_SERVER_HOST || !IOTA_REDIS_SERVER_PORT
+   || !API_EMIS_URL
+   || !QINIU_DOMAIN_QNDMN_RESOURCE || !QINIU_BUCKET_RESOURCE || !QINIU_AK || !QINIU_SK
+   || !CLICKHOUST_URL || !CLICKHOUST_PORT
+   || !CLICKHOUST_PEP_EMIS
+) {
+   console.log('缺少启动参数，异常退出');
+   args.showHelp();
+   process.exit(-1);
+}
+
+const product = {
+   port: flags.port || 8080,
+   staticDirs: ['static'],
+   mws: [
+      {
+         entry: require('@fs/attachment').entry,
+         opts: {
+            qiniu: {
+               domain: QINIU_DOMAIN_QNDMN_RESOURCE,
+               bucket: QINIU_BUCKET_RESOURCE,
+               accessKey: QINIU_AK,
+               secretKey: QINIU_SK
+            },
+            maxSize: 104857600, // 100M
+         }
+      }, {
+         entry: require('./app').entry,
+         opts: {
+            dev,
+            exclude: [
+
+            ], // 不做认证的路由，也可以使用 exclude: ["*"]  跳过所有路由
+            qiniu: {
+               domain: QINIU_DOMAIN_QNDMN_RESOURCE,
+               bucket: QINIU_BUCKET_RESOURCE,
+               accessKey: QINIU_AK,
+               secretKey: QINIU_SK
+            },
+            redis: {
+               host: IOTA_REDIS_SERVER_HOST,
+               port: IOTA_REDIS_SERVER_PORT,
+               pwd: IOTA_REDIS_SERVER_PWD
+            },
+            sms: {
+               ///阿里云-安心云
+               accessKey: 'LTAI5tAFdjz7j38aNF2C9Qe8',
+               accessSecret: '1trYkmiqfBtvZL6BxkNH2uQcQQPs0S'
+            },
+            pssaRequest: [{
+               name: 'emisRequest',
+               root: API_EMIS_URL
+            },],
+            clickHouse: {
+               url: CLICKHOUST_URL,
+               port: CLICKHOUST_PORT,
+               user: CLICKHOUST_USER,
+               password: CLICKHOUST_PASSWORD,
+               db: [
+                  {
+                     name: 'pepEmis',
+                     db: CLICKHOUST_PEP_EMIS
+                  }
+               ]
+            }
+         }
+      }
+   ],
+   dc: {
+      url: RC_DB,
+      opts: {
+         pool: {
+            max: 80,
+            min: 10,
+            idle: 10000
+         },
+         define: {
+            freezeTableName: true, // 固定表名
+            timestamps: false // 不含列 "createAt"/"updateAt"/"DeleteAt"
+         },
+         timezone: '+08:00',
+         logging: false
+      },
+      models: [require('./app').models]
+   },
+   logger: {
+      level: 'info',
+      json: false,
+      filename: path.join(__dirname, 'log', 'runtime.log'),
+      colorize: false,
+      maxsize: 1024 * 1024 * 5,
+      rotationFormat: false,
+      zippedArchive: true,
+      maxFiles: 10,
+      prettyPrint: true,
+      label: '',
+      timestamp: () => moment().format('YYYY-MM-DD HH:mm:ss.SSS'),
+      eol: os.EOL,
+      tailable: true,
+      depth: null,
+      showLevel: true,
+      maxRetries: 1
+   }
+};
+
+const development = {
+   port: product.port,
+   staticDirs: product.staticDirs,
+   mws: product.mws,
+   dc: product.dc,
+   logger: product.logger
+};
+
+if (dev) {
+   // mws
+   for (let mw of development.mws) {
+      // if (mw.opts.exclude) mw.opts.exclude = ['*']; // 使用 ['*'] 跳过所有路由
+   }
+   // logger
+   development.logger.filename = path.join(__dirname, 'log', 'development.log');
+   development.logger.level = 'debug';
+   development.dc.opts.logging = console.log;
+}
+
+module.exports = dev ? development : product;
--- a/api/package.json
+++ b/api/package.json
@ -0,0 +1,42 @@
+{
+    "name": "smart-emergency",
+    "version": "1.0.0",
+    "description": "fs smart emergency api",
+    "main": "server.js",
+    "scripts": {
+        "test": "set DEBUG=true&&\"node_modules/.bin/mocha\" --harmony --reporter spec app/test/*.test.js",
+        "start": "set NODE_ENV=development&&node server -p 4000 -g postgres://postgres:123@10.8.30.32:5432/video_access -f http://localhost:4000",
+        "start:linux": "export NODE_ENV=development&&node server -p 4000 -g postgres://FashionAdmin:123456@10.8.30.39:5432/pm1",
+        "automate": "sequelize-automate -c sequelize-automate.config.js"
+    },
+    "author": "",
+    "license": "MIT",
+    "repository": {},
+    "dependencies": {
+        "@fs/attachment": "^1.0.0",
+        "args": "^3.0.7",
+        "better-xlsx": "^0.7.6",
+        "clickhouse": "^2.6.0",
+        "crypto-js": "^4.0.0",
+        "file-saver": "^2.0.2",
+        "fs-web-server-scaffold": "^2.0.2",
+        "ioredis": "^5.0.4",
+        "kafka-node": "^2.2.3",
+        "koa-convert": "^1.2.0",
+        "koa-proxy": "^0.9.0",
+        "moment": "^2.24.0",
+        "mqtt": "^4.3.7",
+        "node-schedule": "^2.1.0",
+        "nodemailer": "^6.7.7",
+        "path": "^0.12.7",
+        "path-to-regexp": "^3.0.0",
+        "pg": "^7.9.0",
+        "redis": "^3.1.2",
+        "request": "^2.88.2",
+        "superagent": "^3.5.2",
+        "uuid": "^3.3.2"
+    },
+    "devDependencies": {
+        "mocha": "^6.0.2"
+    }
+}
--- a/api/sequelize-automate.config.js
+++ b/api/sequelize-automate.config.js
@ -0,0 +1,35 @@
+module.exports = {
+   // 数据库配置 与 sequelize 相同
+   dbOptions: {
+      database: 'hr-dev',
+      username: 'postgres',
+      password: '123',
+      dialect: 'postgres',
+      host: '10.8.30.166',
+      port: 5432,
+      define: {
+         underscored: false,
+         freezeTableName: false,
+         charset: 'utf8mb4',
+         timezone: '+00: 00',
+         dialectOptions: {
+            collate: 'utf8_general_ci',
+         },
+         timestamps: false,
+      },
+   },
+   options: {
+      type: 'freesun', // 指定 models 代码风格
+      camelCase: true, // Models 文件中代码是否使用驼峰命名
+      modalNameSuffix: false, // 模型名称是否带 ‘Model’ 后缀
+      fileNameCamelCase: false, // Model 文件名是否使用驼峰法命名，默认文件名会使用表名，如 `user_post.js`；如果为 true，则文件名为 `userPost.js`
+      dir: './app/lib/models', // 指定输出 models 文件的目录
+      typesDir: 'models', // 指定输出 TypeScript 类型定义的文件目录，只有 TypeScript / Midway 等会有类型定义
+      emptyDir: false, // ！！！ 谨慎操作 生成 models 之前是否清空 `dir` 以及 `typesDir`
+      tables: ['overtime_day','vacate_day'], // 指定生成哪些表的 models，如 ['user', 'user_post']；如果为 null，则忽略改属性
+      skipTables: [], // 指定跳过哪些表的 models，如 ['user']；如果为 null，则忽略改属性
+      tsNoCheck: false, // 是否添加 `@ts-nocheck` 注释到 models 文件中
+      ignorePrefix: [], // 生成的模型名称忽略的前缀，因为 项目中有以下表名是以 t_ 开头的，在实际模型中不需要， 可以添加多个 [ 't_data_', 't_',] ,长度较长的 前缀放前面
+      attrLength: false, // 在生成模型的字段中 是否生成 如 var（128）这种格式，公司一般使用 String ，则配置为 false
+   },
+}
--- a/api/server.js
+++ b/api/server.js
@ -0,0 +1,12 @@
+/**
+ * Created by rain on 2016/1/25.
+ */
+
+'use strict';
+/*jslint node:true*/
+//from koa
+
+const scaffold = require('fs-web-server-scaffold');
+const config = require('./config');
+
+module.exports = scaffold(config);
--- a/19
+++ b/19
@ -0,0 +1,19 @@
+pipeline {
+    agent {
+        node{
+            label 'jnlp-slave'
+        }
+    }
+    
+    stages {
+        stage('Testing pep-report-api ......') {
+            steps {
+                sh 'switch-auth.sh  anxinyun' 
+                buildName "#${BUILD_NUMBER}  ~/fs-cloud/${JOB_NAME}:${IMAGE_VERSION}"
+                buildDescription "registry.cn-hangzhou.aliyuncs.com/${CLOUD}/${JOB_NAME}:${IMAGE_VERSION}"
+                sh 'docker build -t registry.cn-hangzhou.aliyuncs.com/${CLOUD}/${JOB_NAME}:${IMAGE_VERSION} ./api' 
+                sh 'docker push registry.cn-hangzhou.aliyuncs.com/${CLOUD}/${JOB_NAME}:${IMAGE_VERSION}' 
+            }
+        }
+    }
+}
--- a/19
+++ b/19
@ -0,0 +1,19 @@
+pipeline {
+    agent {
+        node{
+            label 'jnlp-slave'
+        }
+    }
+    
+    stages {
+        stage('Testing pep-report-web ......') {
+            steps {
+                sh 'switch-auth.sh  anxinyun' 
+                buildName "#${BUILD_NUMBER}  ~/fs-cloud/${JOB_NAME}:${IMAGE_VERSION}"
+                buildDescription "registry.cn-hangzhou.aliyuncs.com/${CLOUD}/${JOB_NAME}:${IMAGE_VERSION}"
+                sh 'docker build -t registry.cn-hangzhou.aliyuncs.com/${CLOUD}/${JOB_NAME}:${IMAGE_VERSION} ./web' 
+                sh 'docker push registry.cn-hangzhou.aliyuncs.com/${CLOUD}/${JOB_NAME}:${IMAGE_VERSION}' 
+            }
+        }
+    }
+}
--- a/web/.babelrc
+++ b/web/.babelrc
@ -0,0 +1,17 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    // ["import", {
+    // //   "libraryName": "antd",
+    //   "libraryDirectory": "es"
+    // }]
+  ],
+  "env": {
+    "development": {}
+  }
+}
--- a/web/.vscode/extensions.json
+++ b/web/.vscode/extensions.json
@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "formulahendry.code-runner"
+    ]
+}
--- a/web/.vscode/launch.json
+++ b/web/.vscode/launch.json
@ -0,0 +1,26 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Server",
+            "type": "node",
+            "request": "launch",
+            "program": "${workspaceRoot}/server.js",
+            "args": [
+                "-p 5700",
+                "-u http://127.0.0.1:4000",
+                "--apiHrUrl http://localhost:4700",
+                "--qnak XuDgkao6cL0HidoMAPnA5OB10Mc_Ew08mpIfRJK5",
+                "--qnsk yewcieZLzKZuDfig0wLZ9if9jKp2P_1jd3CMJPSa",
+                "--qnbkt dev-hr",
+                "--qndmn http://rjkwed13l.hn-bkt.clouddn.com",
+                // "-v 0.2.0",
+                // "-h 22"
+            ],
+            "outputCapture": "std",
+            "env": {
+                "NODE_ENV": "development"
+            }
+        }
+    ]
+}
--- a/web/.vscode/settings.json
+++ b/web/.vscode/settings.json
@ -0,0 +1,4 @@
+// 将设置放入此文件中以覆盖默认值和用户设置。
+{
+    "editor.fontSize": 16,
+}
--- a/web/Dockerfile
+++ b/web/Dockerfile
@ -0,0 +1,40 @@
+# FROM repository.anxinyun.cn/devops/node:12-dev as builder
+
+# COPY . /var/app
+
+# WORKDIR /var/app
+
+# EXPOSE 8080
+
+# RUN npm config set registry=http://10.8.30.22:7000
+# RUN echo "{\"time\":\"$BUILD_TIMESTAMP\",\"build\": \"$BUILD_NUMBER\",\"revision\": \"$SVN_REVISION_1\",\"URL\":\"$SVN_URL_1\"}" > version.json
+# RUN npm cache clean -f
+# RUN npm install --registry http://10.8.30.22:7000
+# RUN npm run build
+# RUN rm  -rf client/src
+# RUN rm  -rf node_modules
+# RUN npm install --production --registry http://10.8.30.22:7000
+
+# FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node-16:7.22-06-20
+
+# COPY --from=builder --chown=node /var/app  /home/node/app
+
+# WORKDIR /home/node/app
+
+# CMD ["node", "server.js"]
+
+
+# 旧版本构建方式
+
+
+FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2
+
+COPY . /var/app
+
+WORKDIR /var/app
+
+EXPOSE 8080
+
+CMD ["-u", "http://localhost:8088"]
+
+ENTRYPOINT [ "node", "server.js" ]
--- a/web/client/assets/fonts/DINExp.ttf
+++ b/web/client/assets/fonts/DINExp.ttf
--- a/web/client/assets/fonts/YouSheBiaoTiHei-2.ttf
+++ b/web/client/assets/fonts/YouSheBiaoTiHei-2.ttf
--- a/web/client/assets/images/background/console.png
+++ b/web/client/assets/images/background/console.png
--- a/web/client/assets/images/background/header.png
+++ b/web/client/assets/images/background/header.png
--- a/web/client/assets/images/background/loginBackground.gif
+++ b/web/client/assets/images/background/loginBackground.gif
--- a/web/client/assets/images/background/loginBackgroundimg.png
+++ b/web/client/assets/images/background/loginBackgroundimg.png
--- a/web/client/assets/images/background/loginText.png
+++ b/web/client/assets/images/background/loginText.png
--- a/web/client/assets/images/background/loginbg.png
+++ b/web/client/assets/images/background/loginbg.png
--- a/web/client/assets/images/background/logo.png
+++ b/web/client/assets/images/background/logo.png
--- a/web/client/assets/images/background/notice.png
+++ b/web/client/assets/images/background/notice.png
--- a/web/client/assets/images/background/topchoose.png
+++ b/web/client/assets/images/background/topchoose.png
--- a/web/client/assets/images/background/user_login.png
+++ b/web/client/assets/images/background/user_login.png
--- a/web/client/assets/images/background/username.png
+++ b/web/client/assets/images/background/username.png
--- a/web/client/assets/images/background/videoPlayBg.png
+++ b/web/client/assets/images/background/videoPlayBg.png
--- a/web/client/assets/images/background/xiangqi.png
+++ b/web/client/assets/images/background/xiangqi.png
--- a/web/client/assets/images/console/suo.png
+++ b/web/client/assets/images/console/suo.png
--- a/web/client/assets/images/console/yonghu.png
+++ b/web/client/assets/images/console/yonghu.png
--- a/web/client/assets/images/hrImg/!.png
+++ b/web/client/assets/images/hrImg/!.png
--- a/web/client/assets/images/hrImg/V.png
+++ b/web/client/assets/images/hrImg/V.png
--- a/web/client/assets/images/hrImg/back.png
+++ b/web/client/assets/images/hrImg/back.png
--- a/web/client/assets/images/hrImg/defaultAvatar.png
+++ b/web/client/assets/images/hrImg/defaultAvatar.png
--- a/web/client/assets/images/hrImg/department.png
+++ b/web/client/assets/images/hrImg/department.png
--- a/web/client/assets/images/hrImg/detailBgc.png
+++ b/web/client/assets/images/hrImg/detailBgc.png
--- a/web/client/assets/images/hrImg/export.png
+++ b/web/client/assets/images/hrImg/export.png
--- a/web/client/assets/images/hrImg/information.png
+++ b/web/client/assets/images/hrImg/information.png
--- a/web/client/assets/images/hrImg/man.png
+++ b/web/client/assets/images/hrImg/man.png
--- a/web/client/assets/images/hrImg/mc.png
+++ b/web/client/assets/images/hrImg/mc.png
--- a/web/client/assets/images/hrImg/name.png
+++ b/web/client/assets/images/hrImg/name.png
--- a/web/client/assets/images/hrImg/newsetup.png
+++ b/web/client/assets/images/hrImg/newsetup.png
--- a/web/client/assets/images/hrImg/number.png
+++ b/web/client/assets/images/hrImg/number.png
--- a/web/client/assets/images/hrImg/position.png
+++ b/web/client/assets/images/hrImg/position.png
--- a/web/client/assets/images/hrImg/post.png
+++ b/web/client/assets/images/hrImg/post.png
--- a/web/client/assets/images/hrImg/resume.png
+++ b/web/client/assets/images/hrImg/resume.png
--- a/web/client/assets/images/hrImg/upload.png
+++ b/web/client/assets/images/hrImg/upload.png
--- a/web/client/assets/images/hrImg/woman.png
+++ b/web/client/assets/images/hrImg/woman.png
--- a/web/client/assets/images/hrImg/year.png
+++ b/web/client/assets/images/hrImg/year.png
--- a/web/client/assets/js/jessibuca/decoder.js
+++ b/web/client/assets/js/jessibuca/decoder.js
--- a/web/client/assets/js/jessibuca/decoder.wasm
+++ b/web/client/assets/js/jessibuca/decoder.wasm
--- a/web/client/assets/js/jessibuca/jessibuca.js
+++ b/web/client/assets/js/jessibuca/jessibuca.js
--- a/web/client/assets/video/cross_loading.mp4
+++ b/web/client/assets/video/cross_loading.mp4
--- a/web/client/assets/video/login_bg.mp4
+++ b/web/client/assets/video/login_bg.mp4
--- a/web/client/index.ejs
+++ b/web/client/index.ejs
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+
+   <!-- <meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy"> -->
+   
+   <!-- <link rel="shortcut icon" href="/assets/images/favicon.ico"> -->
+
+   <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_20231_12.7f8fd1546294d369f0a85f7d68afb538.es5.js"></script> 
+
+</head>
+
+<body>
+   <div id='HrApp' style="height: 100%;"></div>
+</body>
+
+</html>
--- a/web/client/index.html
+++ b/web/client/index.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+
+    <!-- <link rel="shortcut icon" href="/assets/images/favicon.ico"> -->
+
+    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_20231_12.7f8fd1546294d369f0a85f7d68afb538.es5.js"></script> 
+</head>
+
+<body>
+    <div id='HrApp' style="height: 100%;"></div>
+
+    <!-- Webpack -->
+    <script type="text/javascript" src="http://localhost:5701/client/build/app.js"></script>
+
+    <!-- Vite -->
+    <!-- <script type="module">
+        import RefreshRuntime from "http://localhost:5702/@react-refresh"
+        RefreshRuntime.injectIntoGlobalHook(window)
+        window.$RefreshReg$ = () => { }
+        window.$RefreshSig$ = () => (type) => type  
+        window.__vite_plugin_react_preamble_installed__ = true
+        const global = window
+    </script>
+    <script type="module" src="http://localhost:5002/src/index.jsx"></script> -->
+    <!-- Vite End -->
+
+    <script>
+        //过滤掉一些无用的警告、没有价值的报错
+        //代理console.warn方法
+
+        // const _consoleWarn = (...rest) => {
+        //     console.error(...rest)
+        // };
+        // console.error = (...rest) => {
+        //     if (
+        //         ![
+        //             'Each child in a list should have a unique "key" prop',
+        //         ].some((item) => rest[0].indexOf(item) !== -1)
+        //     ) {
+        //         _consoleWarn(...rest);
+        //     }
+        // };
+    </script>
+</body>
+
+</html>
--- a/web/client/index.js
+++ b/web/client/index.js
@ -0,0 +1,20 @@
+/**
+ * User: liuxinyi/liu.xinyi@free-sun.com.cn
+ * Date: 2016/2/22
+ * Time: 15:29
+ *
+ */
+'use strict';
+
+const views = require('koa-view');
+const path = require('path');
+
+module.exports = {
+    entry: function (app, router, opt) {
+        app.use(views(__dirname));
+
+        router.get('(.*)', async function (ctx) {
+            await ctx.render(path.join(__dirname, './index'));
+        });
+    }
+};
--- a/web/client/src/app.jsx
+++ b/web/client/src/app.jsx
@ -0,0 +1,41 @@
+'use strict';
+
+import React, { useEffect } from 'react';
+import Layout from './layout';
+import Auth from './sections/auth';
+import Example from './sections/example';
+import NoMatch from './sections/noMatch';
+import Business from './sections/business';
+
+const App = props => {
+    const { projectName } = props
+
+    useEffect(() => {
+        document.title = projectName;
+
+        console.log(`
+                     _ _------
+      　　　 　　 ／＞　　フ
+      　　　 　　| 　_　 _ l
+      　 　　 　／\` ミ＿xノ
+      　　 　 /　　　 　 |
+      　　　 /　 ヽ　　 ﾉ
+      　 　 │　　|　|　|
+      　／￣|　　 |　|　|
+      　| (￣ヽ＿_ヽ_)__)
+      　＼二つ 
+      `);
+    }, [])
+
+    return (
+        <Layout
+            title={projectName}
+            sections={[//Example
+            Auth, NoMatch,
+            Business,
+            ]}
+        />
+    )
+}
+
+export default App;
--- a/web/client/src/components/index.js
+++ b/web/client/src/components/index.js
@ -0,0 +1,14 @@
+'use strict';
+import SimpleFileDownButton from './simpleFileDownButton'
+import ReminderBox from './reminderBox'
+import Setup from './setup'
+import { SkeletonScreen } from './skeletonScreen'
+import OutHidden from './outHidden'
+
+export {
+   SimpleFileDownButton,
+   ReminderBox,
+   Setup,
+   SkeletonScreen,
+   OutHidden,
+};
--- a/web/client/src/components/outHidden.jsx
+++ b/web/client/src/components/outHidden.jsx
@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import { Tooltip } from "@douyinfe/semi-ui";
+
+function OutHidden ({ name, width, height, color, background, number }) {
+
+   return <>
+      {number ?
+         <div style={{ display: 'inline-block' }}>
+            <Tooltip content={name}>
+               <div style={{
+                  width: width,
+                  height: height,
+                  color: color,
+                  background: background,
+               }}>
+                  {name.length > number ? `${name.substr(0, number)}...` : name}
+               </div>
+            </Tooltip>
+         </div>
+
+         : <div style={{ display: 'inline-block' }}>
+            <Tooltip content={name}>
+               <div style={{
+                  width: width,
+                  height: height,
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  color: color,
+                  background: background,
+
+               }}>
+                  {name}
+               </div>
+            </Tooltip>
+         </div>}
+   </>
+}
+
+export default OutHidden;
--- a/web/client/src/components/reminderBox.jsx
+++ b/web/client/src/components/reminderBox.jsx
@ -0,0 +1,50 @@
+import { Button, Checkbox, Modal } from "@douyinfe/semi-ui";
+import React from "react";
+
+const ReminderBox = ({ title, wait, toadd, visible, onOk, close, USER}) => {
+    return (
+        <Modal
+            title={
+                <div style={{ fontSize: 14, lineHeight: "35px", marginLeft: 16 }}>
+                    {title}
+                </div>
+            }
+            onCancel={() => {
+                close()
+            }}
+            icon={
+                <img
+                    src="../../assets/images/logo/figure.png"
+                    style={{ width: 40, height: 40 }}
+                />
+            }
+            footer={
+                <div
+                    style={{
+                        width: "100%",
+                        display: "flex",
+                        justifyContent: "space-between",
+                    }}
+                >
+                    <Checkbox
+                        onChange={(checked) =>{
+                             localStorage.setItem( USER, JSON.stringify(checked.target.checked)
+                            )
+                            }}
+                        aria-label="Checkbox 示例"
+                        style={{ width: 100 }}
+                    >
+                        不再提醒
+                    </Checkbox>
+                    <div>
+                        <Button onClick={() => close()}>{wait}</Button>
+                        <Button theme="solid" onClick={() => onOk()}>{toadd}</Button>
+                    </div>
+                </div>
+            }
+            visible={visible}
+        ></Modal>
+    );
+};
+
+export default ReminderBox;
--- a/web/client/src/components/setup.jsx
+++ b/web/client/src/components/setup.jsx
@ -0,0 +1,123 @@
+import React, { useState, useEffect } from "react";
+import {
+    Modal,
+    CheckboxGroup,
+    Checkbox,
+} from "@douyinfe/semi-ui";
+
+function Setup (props) {
+    const {
+        close,
+        tableType,
+        tableList,
+        length
+    } = props;
+    const [check, setCheck] = useState([]);
+
+    const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
+
+    useEffect(() => {
+        //获取是否勾选信息
+        const checkItem = localStorage.getItem(tableType);
+        setCheck(checkItem ? JSON.parse(checkItem) : [])
+        ischeck();
+    }, []);
+    function ischeck (value) {
+        if (check.length >= length) {
+            if (check.includes(value)) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+    }
+
+    return (
+        <Modal
+            title={
+                <div>
+                    表格属性设置
+                    <span
+                        style={{
+                            width: 50,
+                            lineHeight: "19px",
+                            display: "inline-block",
+
+                            color: "white",
+                            textAlign: "center",
+                            marginLeft: 6,
+                            background:
+                                check.length == length
+                                    ? "rgba(40, 123, 255, 1)"
+                                    : "rgba(176, 176, 176, 1)",
+                        }}
+                    >
+                        {check.length}/{length}
+                    </span>
+                </div>
+            }
+            visible={true}
+            style={{ width: 600 }}
+            onOk={() => {
+                localStorage.setItem(tableType, JSON.stringify(check));
+                close();
+            }}
+            onCancel={() => {
+                close();
+            }}
+        >
+            <CheckboxGroup
+                style={{ width: "100%", fontSize: 14 }}
+                key="primary1"
+                direction="horizontal"
+                defaultValue={check}
+                aria-label="表格属性设置"
+                onChange={(check) => {
+                    setCheck(check);
+                    ischeck();
+                }}
+            >
+                {tableList.map((item, index) => {
+                    return (
+                        <div
+                            key={index}
+                            style={{
+                                width: 550,
+                                border: "1px solid #EAEAEA",
+                                padding: "0px 5px",
+                                borderRadius: 4,
+                                marginBottom: "20px",
+                            }}
+                        >
+                            <div
+                                style={{
+                                    borderBottom: "1px solid #EAEAEA",
+                                    marginLeft: "10px",
+                                    padding: "8px 0px",
+                                }}
+                            >
+                                {item.title}
+                            </div>
+                            <div style={{ padding: "15px 12px", width: 530 }}>
+                                {item.list?.map((itm) => {
+                                    return (
+                                        <Checkbox
+                                            key={itm.value}
+                                            value={itm.value}
+                                            style={checkboxcss}
+                                            disabled={ischeck(itm.value)}
+                                        >
+                                            {itm.name}
+                                        </Checkbox>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )
+                })}
+            </CheckboxGroup>
+        </Modal>
+    );
+}
+
+export default Setup;
--- a/web/client/src/components/simpleFileDownButton.jsx
+++ b/web/client/src/components/simpleFileDownButton.jsx
@ -0,0 +1,40 @@
+import React, { useState, useEffect, useRef } from "react";
+import { connect } from "react-redux";
+import moment from 'moment'
+import { Button, } from "@douyinfe/semi-ui";
+
+const SimpleFileDownButton = (props) => {
+   const { src, user } = props
+   const [downloadUrl, setDownloadUrl] = useState('')
+
+   return (
+      <>
+         <Button
+            style={{
+               width: 65,
+               height: 32,
+               background: "#FFFFFF",
+               borderRadius: 3,
+               border: "1px solid #1859C1",
+            }}
+            onClick={() => {
+               setDownloadUrl(`${src}?token=${user.token}&timestamp=${moment().valueOf()}`)
+            }}
+         >
+            导出
+         </Button>
+         {
+            downloadUrl ? <iframe src={`/_api/${downloadUrl}`} style={{ display: 'none' }} /> : ''
+         }
+      </>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth } = state;
+   return {
+      user: auth.user,
+   };
+}
+
+export default connect(mapStateToProps)(SimpleFileDownButton);
--- a/web/client/src/components/skeletonScreen.jsx
+++ b/web/client/src/components/skeletonScreen.jsx
@ -0,0 +1,18 @@
+import React, { useState, useEffect } from "react";
+import { Skeleton } from "@douyinfe/semi-ui";
+
+
+export function SkeletonScreen () {
+   return <>
+      <Skeleton.Title style={{ width: "95%", height: 24, margin: "8px 20px" }} />
+      <Skeleton.Title style={{ width: "80%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "50%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "60%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "90%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "70%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "50%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "40%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "60%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "40%", height: 28, margin: "16px 20px" }} />
+   </>
+}
--- a/web/client/src/components/textScroll.jsx
+++ b/web/client/src/components/textScroll.jsx
@ -0,0 +1,80 @@
+import React, { useRef, useEffect, useState } from 'react'
+import moment from 'moment'
+import './textScroll.less'
+
+function TextScroll (props) {
+   const { content, duration, roll, videoObj = {} } = props
+   const [showContent, setShowContent] = useState('')
+   const showIndex = useRef(0)
+   const initialization = useRef(false)
+   const cancel = useRef(false)
+   let videoObjId = videoObj.id || 0
+   useEffect(() => {
+      if (content.length) {
+         if (roll) {
+            let contentParent = document.getElementById("marquee_box" + videoObjId)
+            document.getElementById('contentPMakeUp' + videoObjId).style.width = contentParent.clientWidth + 'px'
+            const contentP = document.getElementById('contentP' + videoObjId)
+            contentP.style.visibility = 'visible'
+            setShowContent(content[0])
+            window.cancelAnimationFrame(cancel.current)
+            contentParent.scrollLeft = 0
+            initialization.current = false
+            showIndex.current = 0
+         }
+         else {
+            let repeatTime = moment()
+            let refreshTime = moment()
+            const scroll = () => {
+               let contentParent = document.getElementById("marquee_box" + videoObjId)
+               document.getElementById('contentPMakeUp' + videoObjId).style.width = contentParent.clientWidth + 'px'
+               //初始化
+               // if(!showContent&&!initialization.current){
+               if (!initialization.current) {
+                  const contentP = document.getElementById('contentP' + videoObjId)
+                  contentParent.scrollLeft = 0
+                  setShowContent(content[showIndex.current])
+                  showIndex.current = (showIndex.current + 1) % content.length
+                  contentP.style.visibility = 'visible'
+                  initialization.current = true
+               }
+               // 控制频率
+               if (moment().diff(refreshTime) > 1000 / 60) {
+                  const contentP = document.getElementById('contentP' + videoObjId)
+                  // 静态等待时间
+                  if (moment().diff(repeatTime) > 1000 * 1.5) {
+                     contentP.style.visibility = 'visible'
+                  }
+                  // 滚动
+                  if (moment().diff(repeatTime) > 1000 * 3) {
+                     contentParent.scrollLeft = contentParent.scrollLeft + 1
+                  }
+                  // 滚完 重置
+                  if (contentParent.scrollLeft >= contentP.clientWidth + 24) {
+                     contentParent.scrollLeft = 0
+                     repeatTime = moment()
+                     setShowContent(content[showIndex.current])
+                     showIndex.current = (showIndex.current + 1) % content.length
+                     contentP.style.visibility = 'hidden'
+                  }
+                  refreshTime = moment()
+               }
+               let text = null
+               text = window.requestAnimationFrame(scroll)
+               cancel.current = text
+            }
+            window.requestAnimationFrame(scroll)
+         }
+      }
+   }, [content, roll])
+   return (
+      <div className="marquee_box" id={"marquee_box" + videoObjId} style={{ overflow: 'hidden', color: '#F9F9F9' }} >
+         <div style={{ position: 'relative', left: 24 }}>
+            <div id={'contentP' + videoObjId} style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</div>
+            <div id={'contentPMakeUp' + videoObjId} style={{ width: 0, display: 'inline-block' }}></div>
+         </div>
+      </div>
+   )
+}
+
+export default React.memo(TextScroll)
--- a/web/client/src/components/textScroll.less
+++ b/web/client/src/components/textScroll.less
@ -0,0 +1,19 @@
+.marquee_box {
+   width: 100%;
+   height: 100%;
+   word-break: keep-all;
+   white-space: nowrap;
+   // display: flex;
+   // align-items: center;
+}
+
+.marquee_box p {
+   // display: inline-block;
+   padding: 0;
+   margin: 0;
+}
+
+.marquee_box:hover p {
+   animation-play-state: paused;
+   cursor: default;
+}
--- a/web/client/src/index.jsx
+++ b/web/client/src/index.jsx
@ -0,0 +1,9 @@
+'use strict';
+
+import './public-path'
+import React from 'react';
+import { render } from 'react-dom';
+import App from './app';
+import './index.less';
+
+render((<App projectName="FS-DC数据中心" />), document.getElementById('HrApp'));
--- a/web/client/src/index.less
+++ b/web/client/src/index.less
@ -0,0 +1,74 @@
+// webpack （vite 用 alias 兼容了）
+// @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+@import '~nprogress/nprogress.css';
+
+
+*,
+*::before,
+*::after {
+   box-sizing: border-box;
+}
+
+html,
+body {
+   margin: 0;
+   height: 100%;
+   width: 100%;
+   overflow: hidden;
+
+   #App {
+      height: 100%;
+   }
+
+   .semi-timepicker-panel {
+
+      //时间选择器不显示滚动栏
+      ::-webkit-scrollbar {
+         display: none;
+         /* Chrome Safari */
+
+      }
+
+      scrollbar-width: none;
+      /* firefox */
+      -ms-overflow-style: none;
+      /* IE 10+ */
+      overflow-x: hidden;
+      overflow-y: auto;
+   }
+
+   a:link {
+      text-decoration: none;
+      color: unset
+   }
+
+   a:visited {
+      text-decoration: none;
+      color: unset
+   }
+
+   a:hover {
+      text-decoration: none;
+      color: unset
+   }
+
+   a:active {
+      text-decoration: none;
+      color: unset
+   }
+}
+
+
+.semi-portal-inner {
+   position: fixed;
+}
+
+@font-face {
+   font-family: 'YouSheBiaoTiHei'; //这个可以任意取，但是应与后面相对应eg：yxingguang
+   src: url('/assets/fonts/YouSheBiaoTiHei-2.ttf');
+}
+@font-face {
+    font-family: 'DINExp'; //这个可以任意取，但是应与后面相对应eg：yxingguang
+    src: url('/assets/fonts/DINExp.ttf');
+ }
--- a/web/client/src/layout/actions/global.js
+++ b/web/client/src/layout/actions/global.js
@ -0,0 +1,45 @@
+'use strict';
+// import { RouteRequest } from '@peace/utils';
+
+import { RouteTable, RouteRequest } from '$utils'
+
+export const INIT_LAYOUT = 'INIT_LAYOUT';
+export function initLayout (title, copyright, sections, actions) {
+   return {
+      type: INIT_LAYOUT,
+      payload: {
+         title,
+         copyright,
+         sections,
+         actions
+      }
+   };
+}
+
+export const RESIZE = 'RESIZE';
+export function resize (clientHeight, clientWidth) {
+   const headerHeight = 50
+   const footerHeight = 0
+   return {
+      type: RESIZE,
+      payload: {
+         clientHeight: clientHeight - headerHeight - footerHeight,
+         clientWidth: clientWidth
+      }
+   }
+}
+
+export const INIT_API_ROOT = 'INIT_API_ROOT';
+export function initApiRoot () {
+   return dispatch => {
+      return RouteRequest.get(RouteTable.apiRoot).then(res => {
+         localStorage.setItem('apiRoot', JSON.stringify(res));
+         return dispatch({
+            type: INIT_API_ROOT,
+            payload: {
+               apiRoot: res.root,
+            }
+         })
+      });
+   }
+}
--- a/web/client/src/layout/actions/index.js
+++ b/web/client/src/layout/actions/index.js
@ -0,0 +1,9 @@
+'use strict';
+
+import * as global from './global'
+import * as socket from './webSocket';
+
+export default {
+    ...global,
+    ...socket,
+};
--- a/web/client/src/layout/actions/webSocket.js
+++ b/web/client/src/layout/actions/webSocket.js
@ -0,0 +1,39 @@
+'use strict';
+import io from 'socket.io-client';
+
+export const INIT_WEB_SOCKET = 'INIT_WEB_SOCKET'
+export function initWebSocket ({ ioUrl, token, hrUserId }) {
+   if (!ioUrl) {
+      ioUrl = localStorage.getItem('apiRoot')
+      ioUrl = JSON.parse(ioUrl).root
+   }
+   if (!token) {
+      let user = sessionStorage.getItem('hrUser')
+      if (user) {
+         user = JSON.parse(user)
+         token = user.token
+      }
+   }
+   if (!ioUrl || !token || !hrUserId) {
+      return {
+         type: '',
+      }
+   }
+
+   return dispatch => {
+      const socket = io(
+         ioUrl
+         // 'http://10.8.30.7:4000'
+         , {
+            query: {
+               token: token,
+            },
+         });
+      dispatch({
+         type: INIT_WEB_SOCKET,
+         payload: {
+            socket: socket
+         }
+      })
+   }
+}
--- a/web/client/src/layout/components/footer/index.jsx
+++ b/web/client/src/layout/components/footer/index.jsx
@ -0,0 +1,15 @@
+'use strict';
+import React from 'react';
+import moment from 'moment'
+
+export default class Footer extends React.Component {
+    render () {
+        // const { } = this.props;
+
+        return (
+            <div style={{ textAlign: 'center', lineHeight: '32px',fontSize:13,color:'rgb(139, 139, 139)' }}>
+                Copyright © {moment().year()} All Rights Reserved　版权所有· 江西飞尚科技有限公司
+            </div>
+        );
+    }
+};
--- a/web/client/src/layout/components/header/contant.js
+++ b/web/client/src/layout/components/header/contant.js
@ -0,0 +1,15 @@
+const headerItems = [{
+    itemKey: "businessManagement",
+    text: "业务管理",
+    items: [{
+        fatherKey: "authCenter",
+        openKey: "pmReport",
+        itemKey: "pmReport",
+        text: "项目报表",
+        to: "/businessManagement/pmReport/reserveItemsReporting"
+    }]
+}]
+
+export {
+    headerItems
+}
--- a/web/client/src/layout/components/header/index.jsx
+++ b/web/client/src/layout/components/header/index.jsx
@ -0,0 +1,165 @@
+"use strict";
+import React from "react";
+import { connect } from "react-redux";
+import { SplitButtonGroup, Dropdown, Button, Nav, Avatar } from '@douyinfe/semi-ui';
+import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
+import { headerItems } from './contant';
+import "./index.less";
+
+const Header = (props) => {
+    const { dispatch, history, user, actions, socket, tochange } = props;
+
+    return (
+        <>
+            <div id="top-slider">
+                <Nav
+                    mode={"horizontal"}
+                    onClick={({ itemKey }) => {
+                        if (itemKey == "logout") {
+                            dispatch(actions.auth.logout(user));
+                            if (socket) {
+                                socket.disconnect();
+                            }
+                            history.push(`/signin`);
+                        }
+                    }}
+                    style={{
+                        height: 48,
+                        minWidth: 520,
+                        background: '#1D2343',
+                        backgroundSize: "100% 100%",
+                        color: "white",
+                    }}
+                    header={{
+                        logo: (
+                            <div style={{ display: 'flex' }}>
+                                <div style={{ marginLeft: 16, width: 24, height: 24 }}>
+                                    <img src="/assets/images/background/username.png" alt="" style={{ width: 24, marginRight: -10 }} />
+                                </div>
+                                <div style={{ fontFamily: 'YouSheBiaoTiHei', fontSize: 18, marginLeft: 12 }}>
+                                    数据中心
+                                </div>
+                            </div>
+                            // <img
+                            //     src="/assets/images/install/long_logo.png"
+                            //     style={{ display: "inline-block", width: 200, height: 40, marginLeft: -24 }}
+                            // />
+                        ),
+                        // text: (
+                        //     <>
+
+                        //         {/* <SplitButtonGroup style={{ marginLeft: 10 }} aria-label="项目操作按钮组"> */}
+                        //         <Button theme="solid" type="primary" style={{ width: 52, height: 24, background: '#005ABD' }}>全局</Button>
+                        //         {/* <Dropdown onVisibleChange={(v) => { }} menu={{}} trigger="click" position="bottomRight"> */}
+                        //         <Button style={{ width: 16, height: 24, background: '#005ABD' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                        //         {/* </Dropdown> */}
+                        //         {/* </SplitButtonGroup> */}
+                        //     </>
+                        // ),
+                    }}
+                    footer={
+                        <>
+                            {headerItems.map((item, index) => {
+                                if (item.hasOwnProperty('items')) {
+                                    return (
+                                        <Nav.Sub
+                                            key={index + 'a'}
+                                            itemKey={item.itemKey}
+                                            text={item.text}
+                                            dropdownStyle={{ color: '#F2F3F5' }}
+                                        >
+                                            {item.hasOwnProperty('items') && item.items.map((ite, idx) => (
+                                                <Nav.Item key={idx + 'd'} itemKey={ite.itemKey} text={ite.text} onClick={() => { tochange(ite); }} />
+                                            ))}
+                                        </Nav.Sub>
+                                    )
+                                }
+                                else {
+                                    return (
+                                        <div key='console' style={{ display: 'inline-flex' }}>
+                                            <img src="/assets/images/background/console.png" style={{ width: 24, marginRight: -10 }} />
+                                            <Nav.Item key={index + 'a'} itemKey={item.itemKey} text={item.text} onClick={() => { tochange(item) }} />
+                                        </div>
+
+                                    )
+                                }
+                            })}
+                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                                <div style={{ marginLeft: 16, width: 24, height: 24 }}>
+                                    <img src="/assets/images/background/username.png" alt="" style={{ width: '100%', height: '100%' }} />
+                                </div>
+                                <div style={{ color: '#92CBFF', fontSize: 12, marginLeft: 10, cursor: "pointer" }} onClick={() => {
+                                    dispatch(actions.auth.logout(user));
+                                    if (socket) {
+                                        socket.disconnect();
+                                    }
+                                    history.push(`/signin`);
+                                }}>
+                                    退出
+                                </div>
+                            </div>
+
+                            {/* <Nav.Sub
+                                itemKey={"user"}
+                                text={
+                                    <div
+                                        style={{
+                                            marginLeft: -8,
+                                            display: "inline-block",
+                                            color: "white",
+                                        }}
+                                    >
+                                        <Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
+                                            {user?.name?.substr(0, 1)}
+                                        </Avatar>
+                                        <div style={{
+                                            display: "inline-block", position: "relative",
+                                            top: 10,
+                                            left: 4,
+                                            marginRight: 4,
+                                        }}
+                                        >
+                                        </div>
+                                    </div>
+                                }
+                            >
+                                <div style={{ width: 133, }}>
+                                    <div style={{ display: "flex", alignItems: 'center', background: '#F0F5FF', padding: '8px 0px 8px 12px' }}>
+                                        <Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
+                                            {user?.name?.substr(0, 1)}
+                                        </Avatar>
+                                        <div style={{ fontSize: 12, color: '#4A4A4A' }}>
+                                            {user.name}
+                                            <div title={user?.department?.map(v => v.name + '、')} style={{ width: 60, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', color: '#969799', fontSize: 12 }}>{user?.department?.map(v => v.name + '、')}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 27, color: '#646566', fontSize: 12, cursor: "pointer" }}
+                                    onClick={() => {
+                                        dispatch(actions.auth.logout(user));
+                                        if (socket) {
+                                            socket.disconnect();
+                                        }
+                                        history.push(`/signin`);
+                                    }}>
+                                    退出
+                                </div>
+                            </Nav.Sub> */}
+                        </>
+                    }
+                />
+            </div>
+        </>
+    );
+};
+
+function mapStateToProps(state) {
+    const { global, auth, webSocket } = state;
+    return {
+        actions: global.actions,
+        user: auth.user,
+        socket: webSocket.socket,
+    };
+}
+
+export default connect(mapStateToProps)(Header);
--- a/web/client/src/layout/components/header/index.less
+++ b/web/client/src/layout/components/header/index.less
@ -0,0 +1,18 @@
+#top-slider{
+    .semi-navigation-item-text{
+        font-size: 13px;
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-icon{
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-selected{
+        background: none;
+    }
+    .semi-navigation-item{
+        margin: 0px;
+    }
+    .semi-navigation-item-text{
+        overflow: inherit;
+    }
+}
--- a/web/client/src/layout/components/sider/index.jsx
+++ b/web/client/src/layout/components/sider/index.jsx
@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import PerfectScrollbar from 'perfect-scrollbar';
+import { connect } from 'react-redux';
+import { Nav } from '@douyinfe/semi-ui';
+import { push } from 'react-router-redux';
+import { useLocation } from 'react-router';
+import "./index.less";
+
+let scrollbar = null
+const homePath = '/example/e1/c1'
+const Sider = (props) => {
+    const { collapsed, clientHeight, dispatch, pathname, leftItems, leftChange } = props
+    const [items, setItems] = useState([])
+    const [selectedKeys, setSelectedKeys] = useState([])
+    const [openKeys, setOpenKeys] = useState([])
+    useEffect(() => {
+        const { sections, dispatch, user } = props;
+        let nextItems = leftItems
+        setItems(nextItems)
+        scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true });
+        if (pathname == '/') {
+            dispatch(push(homePath))
+        }
+    }, [leftItems])
+    let routeSelectedKey = useLocation().pathname.split('/');
+    // let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的
+    // let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的
+    // let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]//有子目录的
+    useEffect(() => {
+        if (routeSelectedKey.length) {
+            setSelectedKeys([routeSelectedKey[routeSelectedKey.length - 1]])
+        }
+        const lastOpenKeys = localStorage.getItem('poms_open_sider')
+        if (lastOpenKeys) {
+            setOpenKeys(JSON.parse(lastOpenKeys))
+        }
+    }, [window.localStorage.poms_open_sider, window.localStorage.poms_selected_sider, leftChange])
+
+    useEffect(() => {
+        if (scrollbar) {
+            scrollbar.update();
+        }
+    })
+    return (
+        <div id={'page-slider'} style={{ height: clientHeight, position: 'relative', background: '#101531' }}>
+            <Nav
+                style={{ background: '#101531', padding: 0 }}
+                selectedKeys={selectedKeys}
+                bodyStyle={{ height: clientHeight - 64 }}
+                mode="vertical"
+                footer={{
+                    collapseButton: true,
+                }}
+                openKeys={openKeys}
+                onSelect={({ selectedItems, selectedKeys, }) => {
+                    const selectItem = selectedItems[0]
+                    if (selectItem.to) {
+                        dispatch(push(selectItem.to))
+                    }
+                    let myfatherKey = selectItem.to
+                    localStorage.setItem('poms_selected_sider', JSON.stringify([myfatherKey.split('/')[1]]))
+                    setSelectedKeys(selectedKeys)
+                }}
+                onOpenChange={({ openKeys }) => {
+                    setOpenKeys(openKeys)
+                    localStorage.setItem('poms_open_sider', JSON.stringify(openKeys))
+                }}
+                items={items}
+            />
+        </div>
+    )
+}
+
+function mapStateToProps(state) {
+    const { global } = state;
+    return {
+        clientHeight: global.clientHeight,
+    };
+}
+
+export default connect(mapStateToProps)(Sider);
--- a/web/client/src/layout/components/sider/index.less
+++ b/web/client/src/layout/components/sider/index.less
@ -0,0 +1,40 @@
+#page-slider{
+    .semi-navigation-sub .semi-navigation-item-selected{
+        background: rgba(0, 90, 189, 0.5);
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-text{
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-icon{
+        color:#F2F3F5
+    }
+    .semi-navigation-item-selected{
+        background: rgba(0, 90, 189, 0.5);
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-inner{
+        font-family: YouSheBiaoTiHei;
+        font-size: 16px;
+        letter-spacing:2px;
+        font-weight: 400;
+    }
+    .semi-navigation-sub-title-selected{
+        background: #1D2343;
+        .semi-navigation-item-icon{
+            color: #0F7EFB !important;
+        }
+        .semi-icon-code{
+            color: #0F7EFB !important;
+        }
+    }
+    .semi-navigation{
+        width: 180px;
+    }
+    .semi-navigation-collapsed{
+        width: 48px !important;
+    }
+    .semi-button-with-icon{
+        color:#F2F3F5
+    }
+}
--- a/web/client/src/layout/containers/index.js
+++ b/web/client/src/layout/containers/index.js
@ -0,0 +1,6 @@
+'use strict';
+import Layout from './layout';
+import NoMatch from './no-match';
+
+export { Layout };
+export { NoMatch };
--- a/web/client/src/layout/containers/layout/index.jsx
+++ b/web/client/src/layout/containers/layout/index.jsx
@ -0,0 +1,325 @@
+'use strict';
+
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Layout, Notification } from '@douyinfe/semi-ui';
+import Sider from '../../components/sider';
+import Header from '../../components/header';
+import Footer from '../../components/footer';
+import { resize } from '../../actions/global';
+import * as NProgress from 'nprogress';
+import PerfectScrollbar from 'perfect-scrollbar';
+import { useLocation } from "react-router";
+
+NProgress.configure({
+    template: `
+    <div class="bar" style="height:2px" role="bar">
+        <div class="peg"></div>
+    </div>
+    <div class="spinner" role="spinner">
+        <div class="spinner-icon"></div>
+    </div>
+    `
+});
+
+let scrollbar
+// const location111 = useLocation();
+const LayoutContainer = props => {
+    const {
+        dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
+        location, match, routes, history, socket,
+    } = props
+    const [collapsed, setCollapsed] = useState(false)
+
+    NProgress.start();
+
+    const resize_ = () => {
+        dispatch(resize(
+            document.getElementById('HrApp').clientHeight,
+            document.getElementById('HrApp').clientWidth - (collapsed ? 120 : 240)
+        ));
+    }
+    function deepCopy(data) {//深拷贝
+        //string,number,bool,null,undefined,symbol
+        //object,array,date
+        if (data && typeof data === "object") {
+            //针对函数的拷贝
+            if (typeof data === "function") {
+                let tempFunc = data.bind(null);
+                tempFunc.prototype = deepCopy(data.prototype);
+                return tempFunc;
+            }
+
+            switch (Object.prototype.toString.call(data)) {
+                case "[object String]":
+                    return data.toString();
+                case "[object Number]":
+                    return Number(data.toString());
+                case "[object Boolean]":
+                    return new Boolean(data.toString());
+                case "[object Date]":
+                    return new Date(data.getTime());
+                case "[object Array]":
+                    var arr = [];
+                    for (let i = 0; i < data.length; i++) {
+                        arr[i] = deepCopy(data[i]);
+                    }
+                    return arr;
+
+                //js自带对象或用户自定义类实例
+                case "[object Object]":
+                    var obj = {};
+                    for (let key in data) {
+                        //会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop)
+                        obj[key] = deepCopy(data[key]);
+                    }
+                    return obj;
+            }
+        } else {
+            //string,number,bool,null,undefined,symbol
+            return data;
+        }
+    }
+    const [allItems, setAllItems] = useState([])
+    // const [headerItems, setHeaderItems] = useState([])
+    const [leftItems, setLeftItems] = useState([])
+    const [leftChange, setLeftChange] = useState(true)
+    const [leftShow, setLeftShow] = useState(false)
+    useEffect(() => {
+        let topItems = []//头部导航
+        const lastSelectedKeys = localStorage.getItem('poms_selected_sider')
+        let nextItems = []//所有导航
+        for (let c of sections) {
+            if (typeof c.getNavItem == 'function') {
+                let item = c.getNavItem(user, dispatch);
+                if (item) {
+                    nextItems.push.apply(nextItems, item)
+                    if (item.length > 0) {
+                        for (let j = 0; j < item.length; j++) {
+                            let itm = deepCopy(item[j]);
+                            if (itm.hasOwnProperty('items')) {
+                                for (let i = 0; i < itm.items.length; i++) {
+                                    itm.items[i].fatherKey = itm.itemKey
+                                    delete itm.items[i].items
+                                }
+                                //     topItems.push(itm)
+                                // }
+                                // else {
+                                //     topItems.push.apply(topItems, item)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        setAllItems(nextItems)
+        // setHeaderItems(topItems)
+        if (lastSelectedKeys) {//如果有缓存
+            for (let i = 0; i < nextItems.length; i++) {
+                if (JSON.parse(lastSelectedKeys)[0] == nextItems[i].itemKey) {
+
+                    // let openArr = []
+                    // for (let j = 0; j < nextItems[i].items.length; j++) {
+                    //     openArr.push(nextItems[i].items[j].itemKey)
+                    // }
+                    // localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
+                    setLeftItems(nextItems[i].items)
+                }
+            }
+            setLeftShow(true)
+        }
+        else {
+            setLeftShow(false)
+        }
+
+        window.addEventListener('resize', resize_);
+        return () => {
+            window.removeEventListener('resize', resize_);
+        }
+    }, [])
+
+    useEffect(() => {
+        let pathnameArr = location.pathname.split('/')
+        let openArr = []
+        for (let i = 0; i < allItems.length; i++) {
+            if (allItems[i].items) {
+                for (let j = 0; j < allItems[i].items.length; j++) {
+                    if (allItems[i].items[j].items) {
+                        for (let k = 0; k < allItems[i].items[j].items.length; k++) {
+                            if (allItems[i].items[j].items[k].to == location.pathname) {
+                                for (let o = 0; o < allItems[i].items.length; o++) {
+                                    openArr.push(allItems[i].items[o].itemKey)
+                                }
+                                localStorage.setItem('poms_selected_sider', JSON.stringify([pathnameArr[1]]))
+                                // localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
+                                setLeftItems(allItems[i].items)
+                                setLeftShow(true)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }, [location])
+
+    useEffect(() => {
+        NProgress.done();
+        if ((!user || !user.authorized)) {
+            history.push('/signin');
+        }
+        if (msg) {
+            if (msg.done) {
+                Notification.success({
+                    // title: msg.done,
+                    content: msg.done,
+                    duration: 2,
+                })
+            }
+            if (msg.error) {
+                Notification.error({
+                    // title: msg.error,
+                    content: msg.error,
+                    duration: 2,
+                })
+            }
+        }
+        const dom = document.getElementById('page-content');
+        if (dom) {
+            if (!scrollbar) {
+                scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true });
+                scrollbar.update();
+            } else {
+                scrollbar.update();
+                dom.scrollTop = 0;
+            }
+        }
+    })
+
+
+    // websocket 使用测试
+    useEffect(() => {
+        //   console.log(socket)
+        if (socket) {
+            socket.on('CAMERA_ONLINE', function (msg) {
+                console.info(msg);
+                if (msg.online == 'ON') {
+                    Notification.success({
+                        title: 'Hi',
+                        content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>已上线。</div></div>),
+                        duration: 2,
+                    })
+                }
+                if (msg.online == 'OFF') {
+                    Notification.error({
+                        title: 'Hi',
+                        content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>),
+                        duration: 2,
+                    })
+                }
+            });
+            return () => {
+                socket.off("CAMERA_ONLINE");
+            }
+        }
+    }, [socket])
+
+    return (
+        <Layout id="layout" style={{ height: '100%' }}>
+            {
+                <>
+                    <Layout.Header>
+                        <Header
+                            // headerItems={headerItems} //菜单重新分类规整
+                            user={user}
+                            pathname={location.pathname}
+                            toggleCollapsed={() => {
+                                setCollapsed(!collapsed);
+                            }}
+                            collapsed={collapsed}
+                            history={history}
+                            tochange={(val) => {
+                                // setLeftChange(!leftChange)  //会导致顶部右上角转小圈
+                                if (val.fatherKey) {
+                                    localStorage.setItem('poms_selected_sider', JSON.stringify([val.itemKey]));
+                                    const historyOpenKeys = localStorage.getItem('poms_open_sider');
+                                    const openKeys = historyOpenKeys && JSON.parse(historyOpenKeys).concat(val.openKey || val.itemKey) || [val.openKey || val.itemKey]
+                                    localStorage.setItem('poms_open_sider', JSON.stringify(openKeys));
+                                    // for (let i = 0; i < allItems.length; i++) {
+                                    //     if (val.fatherKey == allItems[i].itemKey) {
+                                    //         let openArr = []
+                                    //         for (let j = 0; j < allItems[i].items.length; j++) {
+                                    //             openArr.push(allItems[i].items[j].itemKey)
+                                    //         }
+                                    //         localStorage.setItem('poms_selected_sider', JSON.stringify([val.fatherKey]))
+                                    //         localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
+                                    //         setLeftItems(allItems[i].items)
+                                    //     }
+                                    // }
+                                    // setLeftShow(true)
+                                }
+                                else {
+                                    localStorage.setItem('poms_open_sider', JSON.stringify([]))
+                                    localStorage.removeItem('poms_selected_sider')
+                                    // setLeftShow(false)
+                                }
+                                history.push(val.to);
+                            }}
+                        />
+                    </Layout.Header>
+                    <Layout style={{ height: 'calc(100% - 50px)' }}>
+                        {leftShow ? (<Layout.Sider>
+                            <Sider
+                                sections={sections}
+                                leftItems={leftItems}
+                                dispatch={dispatch}
+                                user={user}
+                                leftChange={leftChange}
+                                pathname={location.pathname}
+                                collapsed={collapsed}
+                            />
+                        </Layout.Sider>) : ('')}
+                        <Layout.Content>
+                            <div style={{
+                                background: "#F2F3F5",
+                            }}>
+                                <div id="page-content" style={{
+                                    height: clientHeight - 12,
+                                    minWidth: 520,
+                                    position: 'relative',
+                                }}>
+                                    <div style={{
+                                        minHeight: clientHeight - 32 - 12,
+                                        position: 'relative',
+                                        padding: '12px 8px',
+                                    }}>
+                                        {children}
+                                    </div>
+                                    <Layout.Footer>
+                                        <Footer />
+                                    </Layout.Footer>
+                                </div>
+                            </div>
+                        </Layout.Content>
+                    </Layout>
+                </>
+            }
+        </Layout >
+    )
+}
+
+function mapStateToProps(state) {
+    const { global, auth, ajaxResponse, webSocket } = state;
+    return {
+        title: global.title,
+        copyright: global.copyright,
+        sections: global.sections,
+        actions: global.actions,
+        clientWidth: global.clientWidth,
+        clientHeight: global.clientHeight,
+        msg: ajaxResponse.msg,
+        user: auth.user,
+        socket: webSocket.socket
+    };
+}
+
+export default connect(mapStateToProps)(LayoutContainer);
--- a/web/client/src/layout/containers/no-match/index.jsx
+++ b/web/client/src/layout/containers/no-match/index.jsx
@ -0,0 +1,18 @@
+'use strict';
+
+import React from 'react';
+import moment from 'moment'
+
+const NoMatch = props => {
+    return (
+        <div style={{ textAlign: 'center', padding: 120 }}>
+            <p style={{ fontSize: 80, lineHeight: 1.5 }}>404</p>
+            <p style={{ fontSize: 32, lineHeight: 2 }}>PAGE NOT FOUND</p>
+            <p>很遗憾，您暂时无法访问该页面。</p>
+            <p>请检查您访问的链接地址是否正确。</p>
+            <p style={{ marginTop: 80 }}>Copyright © {moment().year()} 飞尚</p>
+        </div>
+    )
+}
+
+export default NoMatch;
--- a/web/client/src/layout/index.jsx
+++ b/web/client/src/layout/index.jsx
@ -0,0 +1,188 @@
+'use strict';
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import configStore from './store';
+import { Provider } from 'react-redux';
+import { createBrowserHistory } from 'history';
+import { ConnectedRouter } from 'connected-react-router'
+import { Layout, NoMatch } from './containers';
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import { ConfigProvider } from '@douyinfe/semi-ui';
+import layoutActions from './actions';
+import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
+import { basicReducer } from '@peace/utils';
+import { push } from 'react-router-redux';
+import 'moment/locale/zh-cn';
+
+moment.locale('zh-cn');
+
+const { initLayout, initApiRoot, resize, initWebSocket } = layoutActions;
+
+const Root = props => {
+   const { sections, title, copyright } = props;
+   const [history, setHistory] = useState(null)
+   const [store, setStore] = useState(null)
+   const [outerRoutes, setOuterRoutes] = useState([])
+   const [combineRoutes, setCombineRoutes] = useState([])
+   const [innnerRoutes, setInnerRoutes] = useState([])
+
+   const flatRoutes = (routes) => {
+      const combineRoutes = [];
+
+      function flat (routes, parentRoute) {
+         routes.forEach((route, i) => {
+            let obj = {
+               path: route.path,
+               breadcrumb: route.breadcrumb,
+               component: route.component || null,
+               authCode: route.authCode || '',
+               key: route.key
+            }
+            if (!route.path.startsWith("/")) {
+               console.error('路由配置需以 "/" 开始：' + route.path);
+            }
+            if (route.path.length > 1 && route.path[route.path.length] == '/') {
+               console.error('除根路由路由配置不可以以 "/" 结束：' + route.path);
+            }
+            if (parentRoute && parentRoute != '/') {
+               obj.path = parentRoute + route.path;
+            }
+            if (route.exact) {
+               obj.exact = true
+            }
+            if (route.hasOwnProperty('childRoutes')) {
+               combineRoutes.push(obj);
+               flat(route.childRoutes, obj.path)
+            } else {
+               combineRoutes.push(obj)
+            }
+         })
+      }
+
+      flat(routes);
+      return combineRoutes;
+   }
+
+   const initReducer = (reducers, reducerName, action) => {
+      let reducerParams = {}
+      const { actionType, initReducer, reducer } = action()()
+      if (initReducer || reducer) {
+         if (reducer) {
+            if (reducer.name) {
+               reducerName = reducer.name
+            }
+            if (reducer.params) {
+               reducerParams = reducer.params
+            }
+         } else {
+            reducerName = `${reducerName}Rslt`
+         }
+         reducers[reducerName] = function (state, action) {
+            return basicReducer(state, action, Object.assign({ actionType: actionType }, reducerParams));
+         }
+      }
+   }
+
+   useEffect(async () => {
+      let innerRoutes = []
+      let outerRoutes = []
+      let reducers = {}
+      let actions = {
+         layout: layoutActions
+      }
+
+      for (let s of sections) {
+         if (!s.key) console.warn('请给你的section添加一个key值，section name:' + s.name);
+         for (let r of s.routes) {
+            if (r.type == 'inner' || r.type == 'home') {
+               innerRoutes.push(r.route)
+            } else if (r.type == 'outer') {
+               outerRoutes.push(r.route)
+            }
+         }
+         if (s.reducers) {
+            reducers = { ...reducers, ...s.reducers }
+         }
+         if (s.actions) {
+            actions = { ...actions, [s.key]: s.actions }
+            if (s.key != 'auth') {
+               for (let ak in s.actions) {
+                  let actions = s.actions[ak]
+                  if (actions && typeof actions == 'object') {
+                     for (let actionName in actions) {
+                        initReducer(reducers, actionName, actions[actionName])
+                     }
+                  } else if (typeof actions == 'function') {
+                     initReducer(reducers, ak, actions)
+                  }
+               }
+            }
+         }
+      }
+
+      let history = createBrowserHistory();
+      let store = configStore(reducers, history);
+      store.dispatch(initLayout(title, copyright, sections, actions));
+      // store.dispatch(resize(document.body.clientHeight, document.body.clientWidth));
+      store.dispatch(resize(document.getElementById('HrApp').clientHeight, document.getElementById('HrApp').clientWidth));
+      store.dispatch(actions.auth.initAuth());
+      const resourceRoot = await store.dispatch(initApiRoot())
+      store.dispatch(initWebSocket({}))
+      const combineRoutes = flatRoutes(innerRoutes);
+
+      setInnerRoutes(combineRoutes)
+      setHistory(history)
+      setStore(store)
+      setOuterRoutes(outerRoutes.map(route => (
+         <Route
+            key={route.key}
+            exact
+            path={route.path}
+            component={route.component}
+         />
+      )))
+      setCombineRoutes(combineRoutes.map(route => (
+         <Route
+            key={route.key}
+            exact={route.hasOwnProperty('exact') ? route.exact : true}
+            path={route.path}
+            component={route.component}
+         />
+      )))
+   }, [])
+
+   return (
+      <>
+         {
+            store ?
+               <ConfigProvider locale={zhCN}>
+                  <Provider store={store}>
+                     <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
+                        <ConnectedRouter history={history}>
+
+                           <Switch>
+                              {outerRoutes}
+                              <Layout
+                                 history={history}
+                                 routes={innnerRoutes}
+                              >
+                                 {combineRoutes}
+                              </Layout>
+                              <Route
+                                 path={'*'}
+                                 component={NoMatch}
+                              />
+                           </Switch>
+
+                        </ConnectedRouter>
+                     </BrowserRouter>
+                  </Provider>
+               </ConfigProvider>
+               : ''
+         }
+      </>
+
+   )
+}
+
+export default Root;
--- a/web/client/src/layout/reducers/ajaxResponse.js
+++ b/web/client/src/layout/reducers/ajaxResponse.js
@ -0,0 +1,28 @@
+/**
+ * Created by liu.xinyi
+ * on 2016/4/1.
+ */
+'use strict';
+const initState = {
+    msg: null
+};
+
+import Immutable from 'immutable';
+
+/**
+ * 全局ajax响应处理：
+ * 判断action中是否有done字段，如果有，则修改store中的msg.done
+ * 判断action中是否有error字段，如果有，则修改store中msg.error
+ * 在layout中根据msg的值，呈现提示信息。
+*/
+export default function ajaxResponse (state = initState, action) {
+    if (action.done) {
+        return Immutable.fromJS(state).set('msg', { done: action.done }).toJS();
+    }
+
+    if (action.error) {
+        return Immutable.fromJS(state).set('msg', { error: action.error }).toJS();
+    }
+
+    return { msg: null };
+};
--- a/web/client/src/layout/reducers/global.js
+++ b/web/client/src/layout/reducers/global.js
@ -0,0 +1,39 @@
+'use strict';
+import Immutable from 'immutable';
+import { INIT_LAYOUT, RESIZE, INIT_API_ROOT } from '../actions/global';
+
+function global (state = {
+   title: '',
+   copyright: '',
+   sections: [],
+   actions: {},
+   plugins: {},
+   clientHeight: 768,
+   clientWidth: 1024,
+   apiRoot: '',
+}, action) {
+   const payload = action.payload;
+   switch (action.type) {
+      case RESIZE:
+         return Immutable.fromJS(state).merge({
+            clientHeight: payload.clientHeight,
+            clientWidth: payload.clientWidth
+         }).toJS();
+      case INIT_LAYOUT:
+         return Immutable.fromJS(state).merge({
+            title: payload.title,
+            copyright: payload.copyright,
+            sections: payload.sections,
+            actions: payload.actions,
+            plugins: payload.plugins,
+         }).toJS();
+      case INIT_API_ROOT:
+         return Immutable.fromJS(state).merge({
+            apiRoot: payload.apiRoot,
+         }).toJS();
+      default:
+         return state;
+   }
+}
+
+export default global;
--- a/web/client/src/layout/reducers/index.js
+++ b/web/client/src/layout/reducers/index.js
@ -0,0 +1,17 @@
+/**
+ * User: liuxinyi/liu.xinyi@free-sun.com.cn
+ * Date: 2016/1/13
+ * Time: 17:52
+ *
+ */
+'use strict';
+
+import global from './global';
+import webSocket from './webSocket'
+import ajaxResponse from './ajaxResponse';
+
+export default {
+    global,
+    webSocket,
+    ajaxResponse,
+};