7 | Account: admin/admin 8 | 9 | ## Screenshots 10 | 11 | * Login Page 12 | 13 |  14 | 15 | * List Page 16 | 17 |  18 | 19 | * Add Page 20 | 21 |  22 | 23 | * Add Popup 24 | 25 |  26 | 27 | ## Tech Stack 28 | 29 | ### Frontend 30 | 31 | - [ ] Typescript 32 | - [x] React 33 | - [x] React-Router 34 | - [ ] React-Redux 35 | - [x] Ant Design 36 | - [x] Axios 37 | - [ ] GraphQL 38 | - [x] AliOSS 39 | - [ ] i18n 40 | - [x] Sass 41 | - [x] ESLint 42 | - [x] Babel 43 | - [x] Webpack 44 | 45 | ### Backend (Node) 46 | 47 | - [x] Koa2 48 | - [ ] Express 49 | - [ ] Egg 50 | - [x] MongoDB 51 | 52 | ## Setup 53 | 54 | ### Backend 55 | 56 | * MongoDB 57 | 58 | Add your MongoDB path in *server/config/index.js*. 59 | 60 |  61 | 62 | * Other Config 63 | 64 | **JWT Secret**, **expire date**, **serve path** also can be modified in *server/config/index.js*. 65 | 66 | ### Frontend 67 | 68 | * Aliyun OSS 69 | 70 | Set **OSS_REGION**, **OSS_ACCESS_KEY_ID**, **OSS_ACCESS_KEY_SECRET**, **OSS_BUCKET** in *views/src/constants.js*. 71 | 72 | * Home URL 73 | 74 | Set **HOME_URL** in *views/src/constants.js*, system will redirect to this address when JWT expires. 75 | 76 | * API Base URL 77 | 78 | Set **SERVICE_URL** in *views/config/prod.env.js*. (Deploy Mode) 79 | 80 | ### Debug 81 | 82 | * build 83 | 84 | ```bash 85 | cd views/ 86 | npm run build 87 | ``` 88 | 89 | * serve page & start api server 90 | 91 | require [pm2](https://pm2.keymetrics.io/) 92 | 93 | ```bash 94 | cd server/ 95 | npm run dev 96 | ``` 97 | 98 | Then you can open http://127.0.0.1:3010 99 | 100 | ## Deployment 101 | 102 | Upload website dist & server code to your server, and run ```npm run start``` in server folder. 103 | (default webpage path is */var/www/pems*, you can config it in *server/config/index.js*) 104 | 105 | ## Wechat Official Account 106 | 107 |  108 | 109 | ## License 110 | 111 | MIT License 112 | 113 | Copyright (c) 2019 Hanran Liu 114 | -------------------------------------------------------------------------------- /views/src/pages/Login/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './login.scss'; 3 | import { Input, Icon, Button, Form, message } from 'antd'; 4 | import userService from '../../services/user'; 5 | 6 | const FormItem = Form.Item; 7 | 8 | class LoginForm extends React.Component { 9 | state = { 10 | isLoading: false, 11 | }; 12 | 13 | setLoadingState = isLoading => { 14 | this.setState({ 15 | isLoading, 16 | }); 17 | }; 18 | 19 | handleSubmit = e => { 20 | e.preventDefault(); 21 | this.props.form.validateFields((err, values) => { 22 | if (err) { 23 | return; 24 | } 25 | 26 | this.setLoadingState(true); 27 | const hide = message.loading('正在登录...', 0); 28 | userService.login(values).then( 29 | () => { 30 | this.setLoadingState(false); 31 | hide(); 32 | message.success('登录成功'); 33 | this.props.history.push('/'); 34 | }, 35 | error => { 36 | this.setLoadingState(false); 37 | hide(); 38 | message.error(error.data.message); 39 | }, 40 | ); 41 | }); 42 | }; 43 | 44 | render() { 45 | const { form } = this.props; 46 | const { getFieldDecorator } = form; 47 | const { isLoading } = this.state; 48 | return ( 49 | 76 | ); 77 | } 78 | } 79 | const PEMSLoginForm = Form.create({})(LoginForm); 80 | 81 | class Login extends React.Component { 82 | render() { 83 | return ( 84 |
85 |
93 | );
94 | }
95 | }
96 |
97 | export default Login;
98 |
--------------------------------------------------------------------------------
/views/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pems",
3 | "version": "1.0.0",
4 | "author": "Rann
86 |
92 | 电力设施管理系统
87 |
88 |
89 |
90 |
71 | {!collapsed && (
72 |
73 | 设备管理系统
74 |
75 | )}
76 |
77 |
96 | {name.charAt(0) || 'U'}
98 |
99 | {name}
97 |
21 |
101 | );
102 | }
103 | }
104 |
105 | export default TransboxDetail;
106 |
--------------------------------------------------------------------------------
/views/src/pages/Substation/detail.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Row, Col, Tabs } from 'antd';
3 | import Voltage from '../../components/Voltage';
4 | import Lowvol from '../../components/Lowvol';
5 | import Transformer from '../../components/Transformer';
6 | import Worklog from '../../components/Worklog';
7 | import './substation.scss';
8 |
9 | const { TabPane } = Tabs;
10 |
11 | class SubstationDetail extends React.Component {
12 | render() {
13 | const { location } = this.props;
14 | const substation = location.state;
15 |
16 | const appearStyle = substation.appear_pic ? { maxHeight: '320px' } : { display: 'none' };
17 | const locationStyle = substation.location_pic ? { maxHeight: '320px' } : { display: 'none' };
18 |
19 | return (
20 | {transbox.name}
22 |
23 |
24 |
25 |
86 |
87 |
89 |
90 |
92 |
93 |
95 |
96 |
98 |
99 |
100 |
26 |
85 |
27 |
28 |
41 |
42 | 箱变名称:
30 |
31 | {transbox.name}
33 |
34 | 上级电源:
36 |
37 | {transbox.superior}
39 |
40 |
43 |
44 |
57 |
58 | 用户:
46 |
47 | {transbox.user_comp || ''}
49 |
50 | 联系人:
52 |
53 | {transbox.contact_info || ''}
55 |
56 |
59 |
60 |
67 |
68 | 区域:
62 |
63 | {transbox.area}
65 |
66 |
69 |
70 |
83 |
84 |
72 | 
74 |
75 |
76 | 外观图：
73 |
78 | 
80 |
81 |
82 | 变电所地理位置：
79 |
21 |
107 | );
108 | }
109 | }
110 |
111 | export default SubstationDetail;
112 |
--------------------------------------------------------------------------------
/views/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | const merge = require('webpack-merge');
2 | const path = require('path');
3 | const baseConfig = require('./webpack.base.conf');
4 | const prodEnv = require('../config/prod.env');
5 | const webpack = require('webpack');
6 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
7 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
8 | const config = require('../config');
9 | const utils = require('./utils');
10 | const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
11 | const HtmlWebpackPlugin = require('html-webpack-plugin');
12 | const CopyWebpackPlugin = require('copy-webpack-plugin');
13 | const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
14 |
15 | const webpackConfig = merge(baseConfig, {
16 | mode: 'production',
17 | output: {
18 | path: config.assetsRoot,
19 | filename: utils.assetsPath('js/[name].[chunkhash].js'),
20 | chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
21 | },
22 | module: {
23 | rules: [
24 | // sass loader
25 | {
26 | test: /\.(scss|sass)$/,
27 | exclude: /node_modules/,
28 | use: utils.cssLoaders({
29 | isSass: true,
30 | importLoaders: 2,
31 | extract: true
32 | })
33 | },
34 | ]
35 | },
36 | optimization: {
37 | minimize: true,
38 | runtimeChunk: 'single',
39 | splitChunks: {
40 | chunks: 'async',
41 | minSize: 30000,
42 | maxSize: 0,
43 | minChunks: 1,
44 | maxAsyncRequests: 5,
45 | maxInitialRequests: 3,
46 | cacheGroups: {
47 | react: {
48 | name: 'react',
49 | test: (module) => {
50 | return /react|redux/.test(module.context);
51 | },
52 | chunks: 'initial',
53 | priority: 10,
54 | },
55 | vendor: {
56 | name: 'vendor',
57 | test: /[\\/]node_modules[\\/]/,
58 | chunks: 'initial',
59 | priority: 5,
60 | },
61 | common: {
62 | name: 'common',
63 | chunks: 'initial',
64 | priority: 2,
65 | minChunks: 2,
66 | },
67 | }
68 | }
69 | },
70 | plugins: [
71 | new UglifyJsPlugin({
72 | uglifyOptions: {
73 | compress: {
74 | warnings: false
75 | }
76 | },
77 | parallel: true
78 | }),
79 | new MiniCssExtractPlugin({
80 | filename: utils.assetsPath('css/[name].[contenthash].css'),
81 | chunkFilename: utils.assetsPath('css/[name].[contenthash].chunk.css')
82 | }),
83 | new OptimizeCssPlugin({
84 | cssProcessorOptions: {
85 | safe: true
86 | }
87 | }),
88 | new webpack.DefinePlugin({
89 | 'process.env': prodEnv
90 | }),
91 | new HtmlWebpackPlugin({
92 | template: 'public/index.html',
93 | filename: 'index.html',
94 | inject: true,
95 | minify: {
96 | removeComments: true,
97 | collapseWhitespace: true,
98 | removeRedundantAttributes: true,
99 | useShortDoctype: true,
100 | removeEmptyAttributes: true,
101 | removeStyleLinkTypeAttributes: true,
102 | keepClosingSlash: true,
103 | minifyJS: true,
104 | minifyCSS: true,
105 | minifyURLs: true,
106 | },
107 | chunksSortMode: 'dependency'
108 | }),
109 | new CopyWebpackPlugin([
110 | {
111 | from: path.resolve(__dirname, '../static'),
112 | to: config.assetsSubDirectory,
113 | ignore: ['.*']
114 | }
115 | ]),
116 | new webpack.HashedModuleIdsPlugin(),
117 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
118 | new FaviconsWebpackPlugin({
119 | logo: path.resolve(__dirname, '../static/logo.png'),
120 | icons: {
121 | android: false,
122 | appleIcon: false,
123 | appleStartup: false,
124 | coast: false,
125 | favicons: true,
126 | firefox: false,
127 | opengraph: false,
128 | twitter: false,
129 | yandex: false,
130 | windows: false
131 | }
132 | })
133 | ]
134 | });
135 |
136 | if (config.productionGzip) {
137 | const CompressionWebpackPlugin = require('compression-webpack-plugin');
138 |
139 | webpackConfig.plugins.push(
140 | new CompressionWebpackPlugin({
141 | filename: '[path].gz[query]',
142 | algorithm: 'gzip',
143 | test: new RegExp(
144 | '\\.(' +
145 | config.productionGzipExtensions.join('|') +
146 | ')$'
147 | ),
148 | threshold: 10240,
149 | minRatio: 0.8
150 | })
151 | );
152 | }
153 |
154 | if (config.bundleAnalyzerReport) {
155 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
156 | webpackConfig.plugins.push(new BundleAnalyzerPlugin());
157 | }
158 |
159 | module.exports = webpackConfig;
160 |
--------------------------------------------------------------------------------
/views/src/pages/Transbox/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Table, Button, Select, Divider, Modal, message } from 'antd';
3 | import * as api from '../../api';
4 | import './transbox.scss';
5 | import utils from '../../utils';
6 |
7 | const kPageSize = 8;
8 | const areaList = utils.getAreaList();
9 |
10 | const { Option } = Select;
11 |
12 | class Transbox extends React.Component {
13 | state = {
14 | data: [],
15 | pagination: {},
16 | loading: false,
17 | area: areaList[0],
18 | };
19 |
20 | componentDidMount() {
21 | this.fetchList({ page_size: kPageSize, page_index: 1 });
22 | }
23 |
24 | fetchList = (params = {}) => {
25 | this.setState({ loading: true });
26 | api.transbox
27 | .getList({
28 | params,
29 | })
30 | .then(res => {
31 | const data = res.data.data;
32 | const { pagination } = this.state;
33 | pagination.total = data.count;
34 | pagination.pageSize = kPageSize;
35 | const transboxs = data.transboxs;
36 | this.checkResolveAndNotify(transboxs);
37 | this.setState({
38 | loading: false,
39 | data: transboxs,
40 | pagination,
41 | });
42 | });
43 | };
44 |
45 | checkResolveAndNotify = transboxs => {
46 | transboxs.forEach(item => {
47 | let UnresolvedButNotify = false;
48 | let UnresolvedNotNotify = false;
49 | for (let i = 0; i < item.worklogs.length; i += 1) {
50 | const worklog = item.worklogs[i];
51 | if (!worklog.resolved) {
52 | if (worklog.notify_user) {
53 | UnresolvedButNotify = true;
54 | } else {
55 | UnresolvedNotNotify = true;
56 | }
57 | }
58 | }
59 | item.unresolvedButNotify = UnresolvedButNotify;
60 | item.unresolvedNotNotify = UnresolvedNotNotify;
61 | });
62 | };
63 |
64 | handleTableChange = pagination => {
65 | const pager = { ...this.state.pagination };
66 | const area = this.state.area;
67 | pager.current = pagination.current;
68 | this.setState({
69 | pagination: pager,
70 | });
71 |
72 | const params = { page_size: kPageSize, page_index: pager.current };
73 | if (area && area !== areaList[0]) {
74 | params.fil_area = area;
75 | }
76 | this.fetchList(params);
77 | };
78 |
79 | handleSelectChange = value => {
80 | this.setState({ area: value });
81 | };
82 |
83 | handleQueryClick = () => {
84 | const { pagination, area } = this.state;
85 | const page = pagination.current;
86 | const params = { page_size: kPageSize, page_index: page };
87 | if (area && area !== areaList[0]) {
88 | params.fil_area = area;
89 | }
90 | this.fetchList(params);
91 | };
92 |
93 | handleCreateClick = () => {
94 | const { history } = this.props;
95 | history.push('/transbox/edit');
96 | };
97 |
98 | handleSubstationClick = item => {
99 | const { history } = this.props;
100 | history.push({ pathname: '/transbox/detail', state: item });
101 | };
102 |
103 | handleEditClick = (record, event) => {
104 | event.stopPropagation();
105 | const { history } = this.props;
106 | history.push({ pathname: '/transbox/edit', state: record });
107 | };
108 |
109 | handleDeleteClick = (record, event) => {
110 | event.stopPropagation();
111 | Modal.confirm({
112 | title: '注意',
113 | content: `你确定要删除 ${record.name} 这个变电箱吗?`,
114 | okText: '删除',
115 | okType: 'danger',
116 | cancelText: '取消',
117 | onOk: () => {
118 | api.transbox.delete({ data: { id: record._id } }).then(
119 | () => {
120 | message.success('删除成功');
121 | const pager = { ...this.state.pagination };
122 | const area = this.state.area;
123 | pager.current = 1;
124 | this.setState({
125 | pagination: pager,
126 | });
127 |
128 | const params = { page_size: kPageSize, page_index: 1 };
129 | if (area && area !== areaList[0]) {
130 | params.fil_area = area;
131 | }
132 | this.fetchList(params);
133 | },
134 | err => {
135 | message.error(err.data.message);
136 | },
137 | );
138 | },
139 | });
140 | };
141 |
142 | render() {
143 | const { data, pagination, loading, area } = this.state;
144 | const columns = [
145 | {
146 | title: '箱变名称',
147 | dataIndex: 'name',
148 | width: '20%',
149 | render: (name, record) => {
150 | let appendStyle;
151 | if (record.unresolvedButNotify) {
152 | appendStyle = { color: '#fbc02d' };
153 | }
154 | if (record.unresolvedNotNotify) {
155 | appendStyle = { color: '#ef5350 ' };
156 | }
157 | return {substation.name}
22 |
23 |
24 |
25 |
92 |
93 |
95 |
96 |
98 |
99 |
101 |
102 |
104 |
105 |
106 |
26 |
91 |
27 |
28 |
41 |
42 | 变电所名称:
30 |
31 | {substation.name}
33 |
34 | 上级电源:
36 |
37 | {substation.superior}
39 |
40 |
43 |
44 |
57 |
58 | 用户:
46 |
47 | {substation.user_comp || ''}
49 |
50 | 联系人:
52 |
53 | {substation.contact_info || ''}
55 |
56 |
59 |
60 |
73 |
74 | 计量表号:
62 |
63 | {substation.number || ''}
65 |
66 | 区域:
68 |
69 | {substation.area}
71 |
72 |
75 |
76 |
89 |
90 |
78 | 
80 |
81 |
82 | 外观图：
79 |
84 | 
86 |
87 |
88 | 变电所地理位置：
85 | {name}
;
158 | },
159 | },
160 | {
161 | title: '上级电源',
162 | dataIndex: 'superior',
163 | width: '20%',
164 | },
165 | {
166 | title: '区域',
167 | dataIndex: 'area',
168 | width: '20%',
169 | },
170 | {
171 | title: '联系方式',
172 | dataIndex: 'contact_info',
173 | width: '20%',
174 | },
175 | {
176 | title: '操作',
177 | key: 'action',
178 | render: record => (
179 |
180 |
187 |
196 | ),
197 | },
198 | ];
199 |
200 | return (
201 |
202 | record._id}
224 | dataSource={data}
225 | pagination={pagination}
226 | loading={loading}
227 | onChange={this.handleTableChange}
228 | onRow={record => {
229 | return {
230 | onClick: this.handleSubstationClick.bind(this, record),
231 | };
232 | }}
233 | />
234 |
235 | );
236 | }
237 | }
238 |
239 | export default Transbox;
240 |
--------------------------------------------------------------------------------
/views/src/pages/Substation/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Table, Button, Select, Divider, Modal, message } from 'antd';
3 | import * as api from '../../api';
4 | import './substation.scss';
5 | import utils from '../../utils';
6 |
7 | const kPageSize = 8;
8 | const areaList = utils.getAreaList();
9 |
10 | const { Option } = Select;
11 |
12 | class Substation extends React.Component {
13 | state = {
14 | data: [],
15 | pagination: {},
16 | loading: false,
17 | area: areaList[0],
18 | };
19 |
20 | componentDidMount() {
21 | this.fetchList({ page_size: kPageSize, page_index: 1 });
22 | }
23 |
24 | fetchList = (params = {}) => {
25 | this.setState({ loading: true });
26 | api.substation
27 | .getList({
28 | params,
29 | })
30 | .then(res => {
31 | const data = res.data.data;
32 | const { pagination } = this.state;
33 | pagination.total = data.count;
34 | pagination.pageSize = kPageSize;
35 | const substations = data.substations;
36 | this.checkResolveAndNotify(substations);
37 | this.setState({
38 | loading: false,
39 | data: substations,
40 | pagination,
41 | });
42 | });
43 | };
44 |
45 | checkResolveAndNotify = substations => {
46 | substations.forEach(item => {
47 | let UnresolvedButNotify = false;
48 | let UnresolvedNotNotify = false;
49 | for (let i = 0; i < item.worklogs.length; i += 1) {
50 | const worklog = item.worklogs[i];
51 | if (!worklog.resolved) {
52 | if (worklog.notify_user) {
53 | UnresolvedButNotify = true;
54 | } else {
55 | UnresolvedNotNotify = true;
56 | }
57 | }
58 | }
59 | item.unresolvedButNotify = UnresolvedButNotify;
60 | item.unresolvedNotNotify = UnresolvedNotNotify;
61 | });
62 | };
63 |
64 | handleTableChange = pagination => {
65 | const pager = { ...this.state.pagination };
66 | const area = this.state.area;
67 | pager.current = pagination.current;
68 | this.setState({
69 | pagination: pager,
70 | });
71 |
72 | const params = { page_size: kPageSize, page_index: pager.current };
73 | if (area && area !== areaList[0]) {
74 | params.fil_area = area;
75 | }
76 | this.fetchList(params);
77 | };
78 |
79 | handleSelectChange = value => {
80 | this.setState({ area: value });
81 | };
82 |
83 | handleQueryClick = () => {
84 | const { pagination, area } = this.state;
85 | const page = pagination.current;
86 | const params = { page_size: kPageSize, page_index: page };
87 | if (area && area !== areaList[0]) {
88 | params.fil_area = area;
89 | }
90 | this.fetchList(params);
91 | };
92 |
93 | handleCreateClick = () => {
94 | const { history } = this.props;
95 | history.push('/substation/edit');
96 | };
97 |
98 | handleSubstationClick = item => {
99 | const { history } = this.props;
100 | history.push({ pathname: '/substation/detail', state: item });
101 | };
102 |
103 | handleEditClick = (record, event) => {
104 | event.stopPropagation();
105 | const { history } = this.props;
106 | history.push({ pathname: '/substation/edit', state: record });
107 | };
108 |
109 | handleDeleteClick = (record, event) => {
110 | event.stopPropagation();
111 | Modal.confirm({
112 | title: '注意',
113 | content: `你确定要删除 ${record.name} 这个变电站吗?`,
114 | okText: '删除',
115 | okType: 'danger',
116 | cancelText: '取消',
117 | onOk: () => {
118 | api.substation.delete({ data: { id: record._id } }).then(
119 | () => {
120 | message.success('删除成功');
121 | const pager = { ...this.state.pagination };
122 | const area = this.state.area;
123 | pager.current = 1;
124 | this.setState({
125 | pagination: pager,
126 | });
127 |
128 | const params = { page_size: kPageSize, page_index: 1 };
129 | if (area && area !== areaList[0]) {
130 | params.fil_area = area;
131 | }
132 | this.fetchList(params);
133 | },
134 | err => {
135 | message.error(err.data.message);
136 | },
137 | );
138 | },
139 | });
140 | };
141 |
142 | render() {
143 | const { data, pagination, loading, area } = this.state;
144 | const columns = [
145 | {
146 | title: '变电所名称',
147 | dataIndex: 'name',
148 | width: '20%',
149 | render: (name, record) => {
150 | let appendStyle;
151 | if (record.unresolvedButNotify) {
152 | appendStyle = { color: '#fbc02d' };
153 | }
154 | if (record.unresolvedNotNotify) {
155 | appendStyle = { color: '#ef5350 ' };
156 | }
157 | return
箱变列表
203 |
204 |
221 | 区域查询:
205 |
214 |
217 |
220 |