样式修改提交

amos.config.js

@@ -7,8 +7,8 @@
   Amos.config = {
     // 普通http
     httpURI: {
-      baseURI: 'http://172.16.10.72:10005/',
-      pluginURI: 'http://172.16.10.72:10005/',
+      baseURI: 'http://172.16.10.66:10005/',
+      pluginURI: 'http://172.16.10.66:10005/',
       fileServerURI: 'http://39.98.246.31:8888/' //图片服务器地址
       //设计器数据绑定
       // dataBindUrl: 'http://172.16.10.91:8083/api/visual/common/dataBind'
@@ -22,7 +22,7 @@
     // 外部链接地址
     outterURI: {
       //巡检子服务地址,
-      xunjian: 'http://172.16.11.36:3001/outter?isSub=true&token={token}&companyId={companyId}&deptId={deptId}&roleId={roleId}',
+      xunjian: 'http://172.16.3.49:3400/outter?isSub=true&token={token}&companyId={companyId}&deptId={deptId}&roleId={roleId}',
       //规则管控模型地址
       mgtCtrlModel: 'http://172.16.10.72:8080/login?token={token}',
       //预案业务屏前端接口地址
@@ -47,7 +47,7 @@
         },
         // 屏保配置信息
         screenSaverConf: {
-          enable: false,  // 是否启用屏保
+          enable: false, // 是否启用屏保
           deployDate: '2019-06-06', // 系统部署日期
           delayTime: 10 // 屏保出现时间(单位：秒) 10s
         },
@@ -74,13 +74,13 @@
 
     // 屏保配置信息
     screenSaverConf: {
-      enable: false,  // 是否启用屏保
+      enable: false, // 是否启用屏保
       deployDate: '2019-06-06', // 系统部署日期
       delayTime: 10 // 屏保出现时间(单位：秒) 10s
     },
     // 区域风险点ID与态势图位置对应关系配置
     riskDynamicChart: {
-      projectName: 'jinhua',  //yn 沂南站 shm 上海庙站  sn 苏南 hainan 海南站 lingzhou灵州 shaoxing韶兴 shaoshan韶山 tianshan天山 yibin宜宾 jinhua宜宾
+      projectName: 'jinhua', //yn 沂南站 shm 上海庙站  sn 苏南 hainan 海南站 lingzhou灵州 shaoxing韶兴 shaoshan韶山 tianshan天山 yibin宜宾 jinhua宜宾
       riskSourceIdMap: {
         'mapItem-1': 195,
         'mapItem-2': 95,
@@ -133,11 +133,12 @@
   window.LogConfig = LogConfig;
   window.innerConfig = innerConfig;
   window.demo = true;
+  window.CheckDefaultTheme = 'transparent'; // 'blue'
   // 采用本地模式启动插件
   window.useNative = true;
-  window.appKey = 'studio_normalapp_2668446';
-  window.product = 'STUDIO_APP_WEB';
+  window.appKey = 'CONVERTER_STATION';
+  window.product = 'CONVERTER_STATION_WEB';
   window.dutyType = 'normal'; //normal/bank
   // 是否采用hash路由
-  window.useHashHistory = true;
+  window.useHashHistory = false;
 })();

src/styles/view/biz/point/pointInfo.scss

@@ -106,6 +106,8 @@
     border-top: 1px solid $core-border-color;
     border-bottom: 1px solid $core-border-color;
     border-left: 1px solid $core-border-color;
+    background-color: '#f2f2f2';
+    padding: '0px';
   }
 
   .col_color {
@@ -120,9 +122,9 @@
     color: $biz-table-font-color;
     text-align: left;
     background: #efefef;
-    border-top: 1px solid $core-border-color;
+    border-top: 2px solid $core-border-color;
     border-bottom: 1px solid $core-border-color;
-    border-left: 1px solid $core-border-color;
+    border-left: 24px solid $core-border-color;
   }
 
   .col_groupcolor3 {
@@ -134,6 +136,19 @@
     background: #efefef;
     border: 1px solid $core-border-color;
   }
+  .col_groupcolor4 {
+    width: 8%;
+    padding: '0px';
+    line-height: 45px;
+    color: $biz-table-font-color;
+    text-align: center;
+    background: $biz-title-color;
+    border-top: 1px solid $core-border-color;
+    border-bottom: 1px solid $core-border-color;
+    border-left: 1px solid $core-border-color;
+    background-color: #ffffff;
+    padding: 0px;
+  }
 
   .pointinfo_title_background {
     background-color: '#333333';

src/view/bizview/pointInfo/PointInfoContent.js

@@ -11,9 +11,7 @@ import {
   batchSavePointMeasuresAction
 } from './../../../services/checkInfoService';
 
-import {
-  queryPointFMEAAction
-} from './../../../services/ledgerService';
+import { queryPointFMEAAction } from './../../../services/ledgerService';
 
 import pointInfocss from '../../../styles/view/biz/point/pointInfo.scss';
 import AmosGridTable from './../common/tableComponent/table/AmosGridTable';
@@ -24,14 +22,14 @@ const offsetHeight = 110;
 const defaultHeight = 390;
 
 const strUnique = str => {
-  if(str){
-    let arr = str.split(',')
-    let newarr=[...new Set(arr)]
-    return newarr.join(",")
-  }else{
+  if (str) {
+    let arr = str.split(',');
+    let newarr = [...new Set(arr)];
+    return newarr.join(',');
+  } else {
     return '';
   }
- }
+};
 
 const measuresColumns = self => {
   return [
@@ -193,19 +191,19 @@ class PointInfo extends Component {
     pointID && this.onInit(pointID);
   }
 
-  componentWillReceiveProps(nextProps){
+  componentWillReceiveProps(nextProps) {
     const { pointID } = this.props;
     if (nextProps.pointID && pointID !== nextProps.pointID) {
       this.onInit(nextProps.pointID);
     }
   }
 
-  onInit = (id) => {
+  onInit = id => {
     this.onInfoReload(id);
     this.onTableReload(id);
-  }
+  };
 
-  onTableReload = (id) => {
+  onTableReload = id => {
     queryPointFMEAAction(id).then(data => {
       let source = new Array();
       data.map(item => {
@@ -214,13 +212,13 @@ class PointInfo extends Component {
       });
       this.setState({ dataSource: source, selectedRows: [], selectedRowKeys: [] });
     });
-  }
+  };
 
-  onInfoReload = (id) => {
+  onInfoReload = id => {
     fetchPointDetailAction(id).then(data => {
       this.setState({ pointDetail: data });
     });
-  }
+  };
 
   onEditClick(record) {
     const { dataSource } = this.state;
@@ -292,15 +290,16 @@ class PointInfo extends Component {
     };
     let groups = strUnique(groupName);
     return (
-      <div className='pointinfo-content' style={{ height: '100%' }}>
-        <div className="dangerInfo"
+      <div className="pointinfo-content" style={{ height: '100%' }}>
+        <div
+          className="dangerInfo"
           //style={{ float: 'right', 'marginRight': '15px',  'marginTop': '10px', position: 'relative', 'zIndex': '33' }}
           // onClick={() => {
           //   goBackAction();
           // }}
         >
           {/*<img src={require('./../../../assets/fsc/check/back.png')} alt="" />*/}
-          <Button icon={<BizIcon icon="fanhui" />} transparent onClick={() => goBackAction()}  />
+          <Button icon={<BizIcon icon="fanhui" />} transparent onClick={() => goBackAction()} />
         </div>
         <CardPane
           title={reactNodespan}
@@ -311,24 +310,18 @@ class PointInfo extends Component {
           <div className="base point-view" style={{ padding: '0px' }}>
             <div>
               <Row id="fxdinfo" type="flex" justify="start" style={{ padding: '0px', height: '45px', marginBottom: '10px' }}>
-                <Col className="col_groupcolor" style={{ backgroundColor: '#f2f2f2', padding: '0px' }}>
+                <Col className="col_groupcolor">
                   <p>
                     <span>类型</span>
                   </p>
                 </Col>
-                <Col className="col_groupcolor" style={{ backgroundColor: '#ffffff', padding: '0px' }}>
-                  {checkType}
-                </Col>
-                <Col className="col_groupcolor" style={{ backgroundColor: '#f2f2f2', padding: '0px' }}>
-                  部门
-                </Col>
-                <Col className="col_groupcolor2" style={{ backgroundColor: '#ffffff', paddingLeft: '24px', paddingTop: '2px' }}>
+                <Col className="col_groupcolor4">{checkType}</Col>
+                <Col className="col_groupcolor">部门</Col>
+                <Col className="col_groupcolor2" style={{ paddingLeft: '24px', paddingTop: '2px' }}>
                   {groups}
                 </Col>
-                <Col className="col_groupcolor" style={{ backgroundColor: '#f2f2f2', padding: '0px' }}>
-                  责任人
-                </Col>
-                <Col className="col_groupcolor3" style={{ backgroundColor: '#ffffff', paddingLeft: '24px', paddingTop: '2px' }}>
+                <Col className="col_groupcolor">责任人</Col>
+                <Col className="col_groupcolor3" style={{ paddingLeft: '24px', paddingTop: '2px' }}>
                   {realName}
                 </Col>
               </Row>
@@ -342,9 +335,9 @@ class PointInfo extends Component {
                 <div className="device-list-content">
                   <AmosGridTable
                     columns={measuresColumns(this)}
-                    callBack={()=>{}}
+                    callBack={() => {}}
                     dataList={dataSource}
-                    getTableDataAction={()=>{}}
+                    getTableDataAction={() => {}}
                     getSelectedRows={this.getSelectedRows}
                     isPageable={false}
                   />

src/view/common/skin/SkinItem.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'amos-icon';
+import classnames from 'classnames';
+
+const footerSpans = [
+  { key: 'f1', style: { backgroundColor: '#00bbd3' } },
+  { key: 'f2', style: { backgroundColor: '#8ac249' } },
+  { key: 'f3', style: { backgroundColor: '#fc0' } },
+  { key: 'f4', style: { backgroundColor: '#e6564a' } }
+];
+
+const SkinItem = props => {
+
+  const { skinImg, name, bgColor = 'transparent', skinUse, onThemeChange } = props;
+
+  const cls = classnames('skin-item', {
+    'normal': !skinUse,
+    'used': skinUse
+  });
+
+  return (
+    <div className={cls} onClick={onThemeChange}>
+      <img src={skinImg} alt="" />
+      <div className="skin-name" style={{ backgroundColor: bgColor }}>{name}</div>
+      <div className="skin-footer">
+        {
+          (footerSpans || []).map(footer => <span key={footer.key} style={footer.style} />)
+        }
+      </div>
+      <div className="skin-check" style={{ backgroundColor: bgColor }}>选用皮肤</div>
+      <div className="skin-use" style={{ display: skinUse ? 'block' : 'none' }}>
+        <Icon icon="xuanzhong" />使用中
+      </div>
+    </div>
+  );
+};
+
+SkinItem.propTypes = {
+  skinImg: PropTypes.string,
+  name: PropTypes.string,
+  bgColor: PropTypes.string,
+  skinUse: PropTypes.bool,
+  onThemeChange: PropTypes.func
+};
+
+SkinItem.defaultProps = {
+  skinUse: false
+};
+
+export default SkinItem;

src/view/common/skin/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'amos-icon';
+
+import { Switch, Scrollbars } from 'amos-framework';
+
+import SkinItem from './SkinItem';
+
+class Skin extends Component {
+
+  static propTypes = {
+    skins: PropTypes.array,
+    onEyeModeChange: PropTypes.func,
+    changeTheme: PropTypes.func,
+    closed: PropTypes.func
+  };
+
+  static defaulProps = {
+    changeTheme(){}
+  };
+
+  onThemeChange = (skin) => {
+    this.props.changeTheme(skin);
+  }
+
+  closedSkin = () => {
+    this.props.closed();
+  }
+
+  renderSkinContent = () => {
+    const { skins = [] } = this.props;
+
+    return (skins || []).map(s =>(
+      <SkinItem
+        key={s.id}
+        skinImg={s.icon}
+        name={s.text}
+        bgColor={s.bgColor}
+        skinUse={s.skinUse}
+        onThemeChange={() => this.onThemeChange(s)}
+      />
+    ));
+  }
+
+  render() {
+    const { onEyeModeChange } = this.props;
+
+    const skinContent = this.renderSkinContent();
+
+    return (
+      <div className="skin-scroll-wrapper">
+        <Scrollbars>
+          <div className="skin-wrapper">
+            <div className="skin-header">
+              <h3>皮肤</h3>
+              <Icon icon="cross" onClick={this.closedSkin} />
+            </div>
+            <div className="skin-switch">
+              <label className="switch-tip">护眼模式:</label>
+              <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked onChange={onEyeModeChange} />
+            </div>
+            <div className="skin-content">
+              {skinContent}
+            </div>
+          </div>
+        </Scrollbars>
+      </div>
+    );
+  }
+}
+
+export default Skin;

src/view/common/skin/invokeSkin.js

+export default function(skin){
+  const rootDom = document.getElementById('app');
+  rootDom.className = skin;
+  const gbUrl = `./src/assets/skin/dark/bg-${skin}.jpg`;
+  rootDom.style.backgroundImage = `url(${gbUrl})`;
+  rootDom.style.backgroundRepeat = 'no-repeat';
+  rootDom.style.backgroundSize = 'cover';
+}
+
+export const updateLinkCss = function(href, id = 'theme'){
+  if (href && href.length >= 0){
+    let themeLink = document.getElementById(id);
+    if (themeLink){
+      themeLink.setAttribute('href', href);
+    } else {
+      let link = document.createElement('link');
+      link.setAttribute('rel', 'stylesheet');
+      link.setAttribute('type', 'text/css');
+      link.setAttribute('id', 'theme');
+      link.setAttribute('href', href);
+      let heads = document.getElementsByTagName('head');
+      if (heads.length)  {
+        heads[0].appendChild(link);
+      } else {
+        document.documentElement.appendChild(link);
+      }
+    }
+  }
+};
+
+
+export const downloadFile = (url, fileName) => {
+  let aLink = document.createElement('a');
+  var evt = document.createEvent('MouseEvent');
+  evt.initEvent('click', false, false);
+  aLink.download = fileName;
+  aLink.href = url;
+  aLink.dispatchEvent(evt);
+  if (navigator.userAgent.indexOf('Firefox') >= 0) {
+    aLink.click();//FF的支持,可能不需要
+  }
+};

src/view/mainframe/BizFrame.js

@@ -9,13 +9,12 @@ import PropTypes from 'prop-types';
 import storageConsts, { CONSTS } from './../../consts/storageConsts';
 import { secExtUrl, SecurityUrl, getOutterURL } from './../../consts/urlConsts';
 import { pathMapping } from './../../routes/customRoutes';
-import { getCurrentUser, currentUserBizPermissions, logoutAction } from './../../services/securityService'
+import { getCurrentUser, currentUserBizPermissions, logoutAction } from './../../services/securityService';
 import { getPathname } from 'amos-designer/lib/utils/history';
 import imgStatic from './../../consts/imgStatic';
-
+import { updateLinkCss } from './../common/skin/invokeSkin';
 import '../../styles/view/mainframe/mainframe.scss';
 
-
 const enhanceStorage = Connect.enhanceStorage;
 const lsTool = Store.lsTool;
 
@@ -46,9 +45,9 @@ class BizFrame extends Component {
 
     const changeRegionData = this.props.read(CONSTS.region_change);
     changeRegionData && this.handleChangeRegionData(JSON.parse(changeRegionData));
-  }
+  };
 
-  handleControlData = (controlData) => {
+  handleControlData = controlData => {
     //处理三维视图中设置菜单中的注销同时关闭业务视图
     if (controlData.control) {
       const { logOut } = controlData.control || {};
@@ -56,9 +55,10 @@ class BizFrame extends Component {
         window.close();
       }
     }
-  }
+  };
 
-  componentDidMount () {
+  componentDidMount() {
+    updateLinkCss(`/themes/${window.CheckDefaultTheme}.css`);
     const is = window.location.href.indexOf('isShow=');
     if (is !== -1) {
       const header = document.getElementsByClassName('header')[0];
@@ -73,18 +73,18 @@ class BizFrame extends Component {
   /**
    * 处理三维地图上各种点的跳转
    */
-  handleForwardData = (forwardData) => {
+  handleForwardData = forwardData => {
     //处理三维视图中设置菜单中的注销同时关闭业务视图
     if (forwardData.details) {
       const { dialogId, type, detailForw, checkId, show, editable } = forwardData.details || {};
       if (type === 'patrol') {
-        if (detailForw === 'details'){
+        if (detailForw === 'details') {
           browserHistory.push({ pathname: pathMapping.pointInfo, state: { pointDetail: { pointID: dialogId } } });
-        } else if (detailForw === 'danger'){
+        } else if (detailForw === 'danger') {
           const { name } = forwardData.details || {};
           browserHistory.push({ pathname: pathMapping.dangerList, state: { point: { id: dialogId, name, normalForward: false } } });
-        } else if (detailForw === 'record'){
-          browserHistory.push({ pathname: pathMapping.pointCheckDetail, state: { pointID: dialogId,checkID: checkId } });
+        } else if (detailForw === 'record') {
+          browserHistory.push({ pathname: pathMapping.pointCheckDetail, state: { pointID: dialogId, checkID: checkId } });
         }
       } else if (type === 'video') {
         return;
@@ -94,46 +94,54 @@ class BizFrame extends Component {
         return;
       } else if (type === 'croom') {
         return;
-      } else if (type === 'riskSource') {//风险模型
+      } else if (type === 'riskSource') {
+        //风险模型
         browserHistory.push({ pathname: pathMapping.riskModel, state: { riskSourceId: dialogId } });
-      } else if (type === 'impEquipment') {//重点装备
+      } else if (type === 'impEquipment') {
+        //重点装备
         browserHistory.push({ pathname: pathMapping.matchEquipment, state: { equipmentId: dialogId, show } });
-      } else if (type === 'fireResource') {//消防资源
-        if (detailForw === 'fireCar'){//消防车
+      } else if (type === 'fireResource') {
+        //消防资源
+        if (detailForw === 'fireCar') {
+          //消防车
           browserHistory.push({ pathname: pathMapping.firetruckinfo, state: { activeKey: '1', fireCarId: dialogId, editable } });
         } else {
           let stateObj = {};
-          if (detailForw === 'fireEquipment') {// 消防装备
+          if (detailForw === 'fireEquipment') {
+            // 消防装备
             stateObj.activeKey = '2';
-          } else if (detailForw === 'fireFoam') {// 消防泡沫间
+          } else if (detailForw === 'fireFoam') {
+            // 消防泡沫间
             stateObj.activeKey = '3';
-          } else if (detailForw === 'fireStation') {// 消防小室
+          } else if (detailForw === 'fireStation') {
+            // 消防小室
             stateObj.activeKey = '4';
-          } else if (detailForw === 'hydrant') {// 灭火栓
+          } else if (detailForw === 'hydrant') {
+            // 灭火栓
             stateObj.activeKey = '5';
-          } else if (detailForw === 'firePool') {// 消防水池
+          } else if (detailForw === 'firePool') {
+            // 消防水池
             stateObj.activeKey = '6';
-          } else if (detailForw === 'fireDetection') {// 火探
+          } else if (detailForw === 'fireDetection') {
+            // 火探
             stateObj.activeKey = '7';
           }
           stateObj.recordId = dialogId;
           browserHistory.push({ pathname: pathMapping.fireResource, state: stateObj });
         }
       } else if (type === 'prePlan') {
-        this.setState( { showPrePlan: show } , () => {
+        this.setState({ showPrePlan: show }, () => {
           browserHistory.push({ pathname: pathMapping.assessmentView });
         });
-      } else if (type === 'alarmVideoMonitor'){
+      } else if (type === 'alarmVideoMonitor') {
         browserHistory.push({ pathname: pathMapping.alarmVideoMonitor, state: {} });
       }
     }
-  }
-
-  handleSideControlData = (data) => {
+  };
 
-  }
+  handleSideControlData = data => {};
 
-  handleChangeRegionData = (changeRegionData) => {
+  handleChangeRegionData = changeRegionData => {
     if (changeRegionData.refresh) {
       const { refresh } = changeRegionData.refresh || {};
       if (refresh) {
@@ -143,7 +151,7 @@ class BizFrame extends Component {
         }
       }
     }
-  }
+  };
 
   openDefaultPage = menus => {
     // open first url
@@ -160,7 +168,6 @@ class BizFrame extends Component {
     }
   };
 
-
   // getFrameConfig = () => {
   //   return {
   //     opSearchMenusUrl: formatUrl(secExtUrl.opSearchMenusUrl, { nodeName: '', type: window.BizPermissionType }),
@@ -174,25 +181,28 @@ class BizFrame extends Component {
       userPic: require('./../../assets/user/normal.png'),
       // userExtra: true,
       loginLink: '/login',
-      currentUserAction:getCurrentUser,
+      currentUserAction: getCurrentUser,
       // 自行处理注销
       handleLogout: this.handleLogOut
     };
   };
 
   handleLogOut = () => {
-    logoutAction().then(d => {
-      browserHistory.push('/login');
-      Toast.success({
-        title: '注销成功'
-      });
-    }, err => {
-      Toast.error({
-        title: '错误',
-        cotnent: err || '注销错误！'
-      });
-      browserHistory.push('/login');
-    });
+    logoutAction().then(
+      d => {
+        browserHistory.push('/login');
+        Toast.success({
+          title: '注销成功'
+        });
+      },
+      err => {
+        Toast.error({
+          title: '错误',
+          cotnent: err || '注销错误！'
+        });
+        browserHistory.push('/login');
+      }
+    );
   };
 
   render() {
@@ -201,24 +211,9 @@ class BizFrame extends Component {
     const url = formatUrl(getOutterURL('prePlan'));
 
     if (showPrePlan) {
-      return (
-        <IFrame
-          url={url}
-          width="100%"
-          height="100%"
-          display="initial"
-          position="relative"
-          allowFullScreen
-          scrolling="auto"
-        />);
+      return <IFrame url={url} width="100%" height="100%" display="initial" position="relative" allowFullScreen scrolling="auto" />;
     } else {
-      return (
-      <MainFrame
-        {...this.props}
-        userMenusAction={currentUserBizPermissions}
-        sysToolPorps={sysToolPorps}
-      />
-      );
+      return <MainFrame {...this.props} userMenusAction={currentUserBizPermissions} sysToolPorps={sysToolPorps} />;
     }
   }
 }