feat: add avatar upload

config/proxy.js

@@ -65,4 +65,70 @@ module.exports = {
       },
     },
   },
+  prod: {
+    '/CityInterface': {
+      // target: 'http://192.168.10.151:8055',
+      target: 'https://panda-water.cn',
+      // target: 'http://192.168.19.102:8055',
+
+      // target: 'https://panda-water.com',
+      // target: 'http://192.168.10.150:8050',
+      // target: 'http://192.168.19.103:8112',
+      // target: 'http://192.168.12.8:8098',
+      // target: 'http://192.168.10.20:8888',
+      changeOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      pathRewrite: {
+        '/CityInterface': '/CityInterface',
+      },
+    },
+    '/cityinterface': {
+      // target: 'http://192.168.10.151:8055',
+      // target: 'http://192.168.10.150:8050',
+      target: 'https://panda-water.cn',
+      // target: 'http://192.168.19.102:8055',
+      // target: 'https://panda-water.com',
+      // target: 'http://192.168.12.8:8098',
+      // target: 'http://192.168.10.20:8888',
+      changeOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      pathRewrite: {
+        '/cityinterface': '/cityinterface',
+      },
+    },
+    '/cityjson': {
+      target: 'https://pv.sohu.com',
+      // target: 'http://192.168.19.102:8055',
+      // target: 'https://panda-water.com',
+      // target: 'http://192.168.12.8:8098',
+      // target: 'http://192.168.10.20:8888',
+      changeOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      pathRewrite: {
+        '/cityjson': '/cityjson',
+      },
+    },
+    '/Publish': {
+      // target: 'http://192.168.12.8:8098',
+      // target: 'http://192.168.10.20:8888',
+      // target: 'http://192.168.10.151:8055',
+      target: 'https://panda-water.cn',
+      // target: 'http://192.168.19.102:8055',
+      // target: 'https://panda-water.com',
+      // target: 'http://192.168.10.150:8050',
+      changeOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      pathRewrite: {
+        '/Publish': '/Publish',
+      },
+    },
+  },
 };

package-lock.json

@@ -7171,9 +7171,9 @@
       }
     },
     "@wisdom-utils/utils": {
-      "version": "0.0.23",
-      "resolved": "https://g.civnet.cn:4873/@wisdom-utils%2futils/-/utils-0.0.23.tgz",
-      "integrity": "sha512-NhRZIySKvS8ooVuuFsPtYJi+hsmu3r5UAT1rFyPZYxjmegva/taSK4viRQs1BarUpBIMwF0vIZakkhoXRlbz/w==",
+      "version": "0.0.25",
+      "resolved": "https://g.civnet.cn:4873/@wisdom-utils%2futils/-/utils-0.0.25.tgz",
+      "integrity": "sha512-TIr8ik6laFs+L40vqKEEELj86l9qawiRjB3TNvdBNkez7geIp2LhIljo/uMJp7DegImxTZRSZJ3cULcLZtelBQ==",
       "requires": {
         "axios": "^0.21.1",
         "cookie": "^0.4.1",
@@ -18689,9 +18689,9 @@
       "dev": true
     },
     "kit_global_config": {
-      "version": "1.0.19",
-      "resolved": "https://g.civnet.cn:4873/kit_global_config/-/kit_global_config-1.0.19.tgz",
-      "integrity": "sha512-6BtvJHZV3B7DWPmiKkZXpvtel5BLgn8XC4ruBVTvZpHIUammkJLubYyNk7oA00TXZITJ1SD9AkuZNvNC2lOayg==",
+      "version": "1.0.20",
+      "resolved": "https://g.civnet.cn:4873/kit_global_config/-/kit_global_config-1.0.20.tgz",
+      "integrity": "sha512-A0WcLLgEPRsclPUj7iRE4ZVh5QhchZL7vioYaULagDDNfwZs/NVU5a58wOunO2mBGDpgvhjfyVkqWFuxyhPeYA==",
       "requires": {
         "@babel/runtime": "^7.10.5",
         "js-base64": "^3.5.2",

package.json

@@ -86,7 +86,7 @@
     "@babel/polyfill": "7.4.3",
     "@babel/runtime": "^7.10.5",
     "@wisdom-utils/components": "0.0.6",
-    "@wisdom-utils/utils": "0.0.23",
+    "@wisdom-utils/utils": "0.0.25",
     "animate.css": "^4.1.1",
     "chalk": "2.4.2",
     "compression": "1.7.4",
@@ -102,7 +102,7 @@
     "ip": "1.1.5",
     "js-base64": "^3.5.2",
     "js-cookie": "^2.2.1",
-    "kit_global_config": "^1.0.19",
+    "kit_global_config": "^1.0.20",
     "kit_logger": "^1.0.2",
     "kit_utils": "^1.3.6",
     "lodash": "4.17.11",

server/middlewares/frontendMiddleware.js

@@ -13,6 +13,9 @@ module.exports = (app, options) => {
 
   if (isProd) {
     const addProdMiddlewares = require('./addProdMiddlewares');
+    Object.keys(proxyConfig.dev).forEach(item => {
+      app.use(createProxyMiddleware(item, proxyConfig.prod[item]));
+    });
     addProdMiddlewares(app, options);
   } else {
     const webpackConfig = require('../../internals/webpack/webpack.dev.babel');

src/api/service/base.js

@@ -11,8 +11,10 @@ export const API = {
   GET_USER_INFO: '/CityInterface/rest/services.svc/getUserInfo',
   GET_OA: '/CityInterface/rest/services/OA.svc/getLoginInfo',
   GET_LOGS: '/CityInterface/rest/services/portal.svc/OMMonitor/SaveLoginInfo',
-  //https://pv.sohu.com
-  GET_CITY: '/cityjson?ie=utf-8',
+  GET_CITY:
+    process.env.NODE_ENV !== 'production'
+      ? '/cityjson?ie=utf-8'
+      : 'https://pv.sohu.com',
   GET_ALL_GROUPS_INFO_FORUSER:
     'CityInterface/rest/Services/Portal.svc/AuthorityManage/GetAllGroupsInfoForUser',
   GET_WEATHER: '/CityInterface/rest/services/CountyProduct.svc/GetWeather',
@@ -21,7 +23,9 @@ export const API = {
   CHANGE_PASSWORD: 'cityinterface/rest/services.svc/changepassword',
   IOT_CHANGE_PASSWORD:
     'CityInterface/rest/services/OMS.svc/U_UpdatePasswordQuickGCK',
-  FILE_DOWNLOAD: '"/cityinterface/rest/services/filedownload.svc/download',
+  FILE_DOWNLOAD: '/cityinterface/rest/services/filedownload.svc/download',
+  GET_VERSION: '/CityInterface/rest/services/OMs.svc/U_GetVersion',
+  UPDATE_AVATAR: '/CityInterface/rest/services/OMs.svc/U_EditUser',
 };
 
 const services = service({
@@ -115,6 +119,16 @@ const services = service({
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  getVersion: {
+    url: API.GET_VERSION,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
+  updateAvatar: {
+    url: API.UPDATE_AVATAR,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
 });
 
 export const searchAutoCity = keywords => {
@@ -137,4 +151,5 @@ export const searchAutoCity = keywords => {
   );
   return jsonp(url, params, options);
 };
+
 export default services;

src/app.js

@@ -80,32 +80,40 @@ const initGlobalConfig = () => {
           const data = res;
           store.dispatch(actionCreators.getConfig(Object.assign({}, data)));
           // eslint-disable-next-line no-shadow
-          services
-            .getWateWayConfig()
-            // eslint-disable-next-line no-shadow
-            .then(res => {
-              const hasGateWay =
-                res && res.data && isString(res.data)
-                  ? JSON.parse(res.data)
-                  : res.data;
-              // eslint-disable-next-line no-debugger
-              if (res.code === 0) {
+          try {
+            services
+              .getWateWayConfig()
+              // eslint-disable-next-line no-shadow
+              .then(res => {
+                const hasGateWay =
+                  res && res.data && isString(res.data)
+                    ? JSON.parse(res.data)
+                    : res.data;
+                // eslint-disable-next-line no-debugger
+                if (res.code === 0) {
+                  store.dispatch(
+                    actionCreators.getConfig(
+                      Object.assign({}, data, {
+                        hasGateWay,
+                        apiGatewayDomain: `${
+                          window.location.origin
+                        }/Publish/GateWay`,
+                      }),
+                    ),
+                  );
+                }
+              })
+              .catch(error => {
+                store.dispatch(actionCreators.getConfigError(error));
                 store.dispatch(
-                  actionCreators.getConfig(
-                    Object.assign({}, data, {
-                      hasGateWay,
-                      apiGatewayDomain: `${
-                        window.location.origin
-                      }/Publish/GateWay`,
-                    }),
-                  ),
+                  actionCreators.getConfig(Object.assign({}, data)),
                 );
-              }
-            })
-            .catch(error => {
-              store.dispatch(actionCreators.getConfigError(error));
-              store.dispatch(actionCreators.getConfig(Object.assign({}, data)));
-            });
+              });
+          } catch (e) {
+            console.log(e);
+            // eslint-disable-next-line no-empty
+          } finally {
+          }
         }
       })
       // eslint-disable-next-line no-shadow

src/components/GlobalHeader/AvatarDropdown.js

 import React from 'react';
-
-import { Avatar, Form, Input, message, Modal, Popover, Spin } from 'antd';
+import { request } from '@wisdom-utils/utils';
+import {
+  Avatar,
+  Form,
+  Input,
+  message,
+  Modal,
+  Popover,
+  Spin,
+  Upload,
+} from 'antd';
 import Cookies from 'js-cookie';
 import { withRouter } from 'react-router-dom';
 import styles from './index.less';
 import services from '../../api/service/base';
-
 const formItemLayout = {
   labelCol: {
     xs: { span: 4 },
     sm: { span: 4 },
   },
 };
+const UPLOAD_FILE_URL = "/cityinterface/rest/services/filedownload.svc/uploadfile/个人信息/{path}/{filename}";
 /* eslint-disable */
 const getIOT = () =>
   window.globalConfig.loginTemplate === 'Dark - IOTMultiLogin.html';
 class AvatarDropdown extends React.Component {
   /* eslint-disable no-unused-vars */
+
+  constructor(props) {
+    super(props);
+    let {
+      currentUser = {
+        avatar: this.transformAvatarImage(),
+        name:
+          (props.global &&
+            props.global.userInfo &&
+            props.global.userInfo.fullName) ||
+          'Serati Ma',
+      },
+    } = this.props;
+    this.state = {
+      currentUser: currentUser,
+      visible: false,
+      popVisible: false,
+      path: null,
+      version: null,
+      action: UPLOAD_FILE_URL
+    }
+  }
   loginout = event => {
     // eslint-disable-next-line no-undef
     createStoreage.remove('PANDA_STORE');
@@ -59,10 +90,6 @@ class AvatarDropdown extends React.Component {
     return ret.join(',');
   };
 
-  state = {
-    visible: false,
-    popVisible: false,
-  };
 
   showModal = event => {
     event.stopPropagation();
@@ -140,7 +167,81 @@ class AvatarDropdown extends React.Component {
     return image;
   }
 
+  beforeUpload(file) {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+      message.error('You can only upload JPG/PNG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('Image must smaller than 2MB!');
+    }
+    const path = (new Date()).getTime();
+    this.setState({
+      path: path,
+      action: this.state.action.replace('{path}', path).replace('{filename}', file.name)
+    })
+    return isJpgOrPng && isLt2M;
+  }
+
+  handleChange(data) {
+    console.log(data)
+  }
+
+  componentDidMount() {
+    services.getVersion().then(res => {
+      if(res.success) {
+        this.setState({
+          version: res.message
+        })
+      }
+    }).catch(error => {
+      message.error("获取版本号错误，请联系相关开发人员")
+    })
+  }
+
+  customRequest = ({
+    action,
+    data,
+    file,
+    filename,
+    headers,
+    onError,
+    onProgress,
+    onSuccess,
+    withCredentials,}) => {
+    const formData = new FormData();
+    if(data) {
+      Object.keys(data).forEach(key => {
+        formData.append(key, data[key]);
+      })
+    }
+    formData.append("filedata", file);
+    request.post(action, formData, {
+      withCredentials,
+      headers: {
+        ...headers,
+        Accept: '*/*',
+        'civ-site': ''
+      },
+      ignoreSite: true,
+      onUploadProgress: ({ total, loaded }) => {
+        onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file);
+      },
+    })
+      .then(res => {
+        onSuccess(res, file);
+      })
+      .catch(onError);
+    return {
+      abort() {
+        console.log('upload progress is aborted.');
+      }
+    }
+  }
+
   render() {
+    const self = this;
     const { props } = this;
     const { userInfo } = props.global;
     const site =
@@ -151,24 +252,67 @@ class AvatarDropdown extends React.Component {
       props.global.client !== 'oms'
         ? userInfo.site
         : '';
-    const {
-      currentUser = {
-        avatar: this.transformAvatarImage(),
-        name:
-          (props.global &&
-            props.global.userInfo &&
-            props.global.userInfo.fullName) ||
-          'Serati Ma',
+
+
+    const uploadProps = {
+      action: this.state.action,
+      onStart(file) {
+        console.log('onStart', file, file.name);
       },
-    } = this.props;
+      onSuccess(res, file) {
+        debugger
+        if(res.success) {
+          const avatarPath =  "/个人信息/" + self.state.path + '/' + file.name;
+          const params = {
+            userID: props.global.get("userInfo.OID"),
+            loginName: props.global.get("userInfo.loginName"),
+            userName: props.global.get("userInfo.fullName"),
+            _version: self.state.version,
+            mark: props.global.get("userInfo.Mark"),
+            phone: props.global.get("userInfo.Phone"),
+            email: props.global.get("userInfo.Email"),
+            userImage: decodeURIComponent(avatarPath),
+            WXid: props.global.get("userInfo.WXid")
+          }
 
+          services.updateAvatar(params).then(res => {
+            if(res.success) {
+              message.success("头像修改成功");
+              self.setState({
+                currentUser: {
+                  name: self.state.currentUser.name,
+                  avatar: `/cityinterface/rest/services/filedownload.svc/download${avatarPath}`,
+                  action: UPLOAD_FILE_URL
+                }
+              })
+            }
+          }).catch(e => {
+            message.error("头像修改失败")
+          })
+        } else {
+          message.error(res.message);
+        }
+      },
+      onError(err) {
+        console.log('onError', err);
+      },
+      onProgress({ percent }, file) {
+        console.log('onProgress', `${percent}%`, file.name);
+      },
+      customRequest: this.customRequest.bind(this),
+      beforeUpload: this.beforeUpload.bind(this),
+      onChange: this.handleChange.bind(this)
+    }
+    const currentUser = this.state.currentUser;
     const menuHeaderDropdown = (
       <div className={styles.userInfo}>
         <div className={styles.header}>
-          <div
-            className={styles.avatar}
-            style={{ backgroundImage: `url(${currentUser.avatar})` }}
-          />
+          <Upload className="avatar-uploader" {...uploadProps}>
+            <div
+              className={styles.avatar}
+              style={{ backgroundImage: `url(${currentUser.avatar})` }}
+            />
+          </Upload>
           <div className={styles.name}>{userInfo.fullName}</div>
         </div>
         <div className={styles.body}>

src/components/GlobalHeader/NoticeIconView.js

@@ -171,7 +171,8 @@ class NoticeIconView extends Component {
     });
   };
 
-  handlerMointer = (item, detail) => {
+  handlerMointer = (event, item, detail) => {
+    event.stopPropagation();
     this.notifier.confirmRead(false, [item.id]);
     if (detail) {
       const widgetID = 'widget_city_综合运营_管网监控_实时监控_报警监控';
@@ -237,8 +238,12 @@ class NoticeIconView extends Component {
               <div className={styles.content}>
                 <div className={styles['content-top']}>
                   <a
-                    onClick={() =>
-                      this.handlerMointer(this.state.alarmMessage.message, true)
+                    onClick={event =>
+                      this.handlerMointer(
+                        event,
+                        this.state.alarmMessage.message,
+                        true,
+                      )
                     }
                   >
                     {this.state.alarmMessage &&
@@ -247,8 +252,9 @@ class NoticeIconView extends Component {
                   </a>
                   <span
                     title="点击标为已读"
-                    onClick={() =>
+                    onClick={event =>
                       this.handlerMointer(
+                        event,
                         this.state.alarmMessage.message,
                         false,
                       )

src/components/GlobalHeader/RightContent.js

@@ -151,6 +151,7 @@ const GlobalHeaderRight = props => {
     ) : null;
   };
 
+
   const handleOrder = event => {
     event.stopPropagation();
     const widgetConfig = getConfig(

src/components/NoticeIcon/NoticeList.js

@@ -149,7 +149,7 @@ class NoticeList extends React.Component {
           ) : this.hasMore() ? (
             <span>下拉加载更多</span>
           ) : (
-            <span>已经没有更多消息了</span>
+            <span style={{fontSize: '12px', color: 'rgba(0, 0, 0, 0.6)'}}>已经没有更多消息了</span>
           )}
         </div>
       </div>

src/components/NoticeIcon/Templates/Alarm/index.js

@@ -28,6 +28,7 @@ export class AlarmContent {
 const Alarm = ({ message, confirmRead, config }) => {
   const alarmContent = (config.mqtt_mess.MessageLevel === "2.0" && isJSON(message.infoContent)) ? JSON.parse(message.infoContent): message.infoContent;
   const goPath = item => {
+    debugger
     confirmRead(false, [message.id]);
     const widgetID = 'widget_city_综合运营_管网监控_实时监控_报警监控';
     const webPath = 'product/scada/AlertMonitoring/AlertMonitoring';
@@ -77,7 +78,7 @@ const Alarm = ({ message, confirmRead, config }) => {
           {`${(alarmValue && Array.isArray(alarmValue) && alarmValue.length > 0 &&
             alarmValue[1] !== 'undefined' &&
             alarmValue[1]) ||
-            ''} / ${alarmContent.alarmThreshold.split(' ').join('')}`}
+            ''} / ${alarmContent && alarmContent.alarmThreshold && alarmContent.alarmThreshold.split(' ').join('')}`}
         </p>
         <p className={commonStyles.messageTime}>{message.time}</p>
       </div>

src/components/NoticeIcon/Templates/Case/index.js

@@ -63,7 +63,8 @@ const Case = ({ message, confirmRead }) => {
         <img
           className={commonStyles.confirm}
           title="点击标为已读"
-          onClick={() => {
+          onClick={e => {
+            e.stopPropagation();
             confirmRead(false, [message.id]);
           }}
           src="https://panda-water.cn/Web4/assets/images/message/%E5%8B%BE%E6%B5%85.png"

src/components/NoticeIcon/Templates/Notice/index.js

@@ -41,7 +41,8 @@ const Notice = ({ message, confirmRead, config, handlerSysDetail }) => {
         <img
           className={commonStyles.confirm}
           title="点击标为已读"
-          onClick={() => {
+          onClick={e => {
+            e.stopPropagation();
             confirmRead(false, [message.id]);
           }}
           src="https://panda-water.cn/Web4/assets/images/message/%E5%8B%BE%E6%B5%85.png"

src/components/NoticeIcon/Templates/Unknown/index.js

@@ -32,7 +32,8 @@ const Unknown = ({ message, confirmRead }) => {
         <img
           className={commonStyles.confirm}
           title="点击标为已读"
-          onClick={() => {
+          onClick={e => {
+            e.stopPropagation();
             confirmRead(false, [message.id]);
           }}
           src="https://panda-water.cn/Web4/assets/images/message/%E5%8B%BE%E6%B5%85.png"

src/components/NoticeIcon/index.js

@@ -73,6 +73,7 @@ const NoticeIcon = props => {
             onClick={() => {
               confirmRead(true);
             }}
+            style={{ color: panes.length === 0 && 'rgba(0, 0, 0, 0.5)' }}
           >
             全部标记已读
           </span>

src/components/NoticeIcon/index.less

@@ -50,6 +50,7 @@
   padding: 8px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   .title {
     font-size: 16px;
     font-weight: bold;

src/global.less

@@ -205,6 +205,13 @@ body {
       }
     }
   }
+
+  & /deep/ .@{ant-prefix}-message-notice-content {
+    .@{ant-prefix}-message-custom-content {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 
 .panda-pro-components-global-header-index-userWrapper {