Merge branch 'develop_20200601' into 'develop'

amos.config.js

@@ -25,7 +25,7 @@
       //picURI为地图瓦片服务器地址
       picURI: 'http://172.16.3.121:8001/',
       loginURI: 'http://172.16.10.72',//基础平台
-	  //巡检图片
+      //巡检图片
       patrolURI: 'http://172.16.11.20:9999/',
 
       // 斜影路径
@@ -39,7 +39,7 @@
     // websocket 地址
     wsURI: {
       baseURI: 'ws://172.16.11.20:10600/',
-	  rulesConfigURI: 'ws://172.16.11.20:8080/',
+      rulesConfigURI: 'ws://172.16.11.20:8080/',
       securityBaseURI: 'ws://172.16.11.20:10600/',
       viewTileURI: '',//卫星图消息 //mqtt消息接受地址
       mqttURI: 'ws://172.16.11.20:8083/mqtt'
@@ -61,11 +61,11 @@
       isAutoOpenBussiness: true,
       //内外部地图加载，outMap是true 使用离线地图， false使用在线地图
       outMap: true,
-	  evaluateModelId: 11
+      evaluateModelId: 11 //配置评价方法ID
     },
-	  //添加关联设备弹出框标识  'bank'代表银行   'fireAutoSys'代表换流站
-     equipmentIdentification:'bank',
-	
+    //添加关联设备弹出框标识  'bank'代表银行   'fireAutoSys'代表换流站
+    equipmentIdentification: 'bank',
+
     // 屏保配置信息
     screenSaverConf: {
       enable: false,  // 是否启用屏保
@@ -96,9 +96,9 @@
       'mapItem-19': -1
     },
     //地图中心点
-    mapCenter: [108.95141,36.79997],
+    mapCenter: [108.90771484,35.93184115],
     //地图zoom显示级别
-    showZoom: [6,13,18]
+    showZoom: [7,13,18]
   };
 
   // 配置日志系统
@@ -124,4 +124,7 @@
   window.demo = true;
   window.BizPermissionType = 25; //业务屏菜单权限类型  可删除
   window.V3DpermissionType = 26; //3D屏菜单权限类型  可删除
+  window.appKey = 'AMOS_BANK';
+  window.product = 'AMOS_BANK_WEB';
+  window.dutyType = 'bank'; //normal/bank
 })();

package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "amos-3d": "^2.1.5",
     "amos-amap": "^1.0.8",
-    "amos-antd": "^2.0.22",
+    "amos-antd": "^2.1.4",
     "amos-core": "^2.0.27",
     "amos-devgrid": "^1.0.10",
     "amos-dll": "^2.0.1",

src/consts/imgStatic.js

@@ -71,6 +71,7 @@ export default {
     impEquipment_01: require('./../assets/3dview/markers/impEquip1.png'),
     impEquipment_02: require('./../assets/3dview/markers/impEquip2.png'),
     impEquipment_03: require('./../assets/3dview/markers/impEquip3.png'),
+    impEquipment_04: require('./../assets/3dview/markers/impEquip1.png'),
     dynamicRingData_01: require('./../assets/3dview/markers/dynamicRingData2.png'),
     dynamicRingData_02: require('./../assets/3dview/markers/fireDetect.png'),
 

src/consts/urlConsts.js

@@ -143,14 +143,18 @@ export const FscSerUrl = {
 
   getxuncountActionUrl: completePrefix(baseURI, 'bank/alarm/mobile/getxuncount'),
   rightTopChartDataUrl: completePrefix(baseURI, 'bank/inspection/rightTopChart?companyId={companyId}'),
-  middleHeaderDataUrl: completePrefix(baseURI, 'bank/duty/middleHeader'),
-  middleTableListUrl: completePrefix(baseURI, 'bank/duty/middleTableList?pageNumber={page}&pageSize={size}'),
   bottomTableDataUrl: completePrefix(baseURI, 'bank/inspection/bottomTable'),
 
+  //值班信息模块
+  middleHeaderDataUrl: completePrefix(baseURI, 'duty/middleHeader?orgCode={orgCode}'),
+  middleTableListUrl: completePrefix(baseURI, 'duty/middleTableList?orgCode={orgCode}&id={id}'),
+
   middleHeaderAction1:completePrefix(baseURI, 'bank/inspection/patrolPlanList?start={start}&end={end}&deptId={depId}&deptName={deptName}'),
   getporintAction:completePrefix(baseURI, 'bank/inspection/getporint?pointid={pointid}'),
   // 告警数据
   alarmDataUrl: completePrefix(baseURI, 'bank/alarm/list'),
+  sevenDaysalarmDataUrl: completePrefix(baseURI, 'bank/alarm/statistics'),
+  getMobileShowDateUrl: completePrefix(baseURI, 'bank/alarm/mobile/show'),
   // impEquAlarmUrl: completePrefix(deviceURI, 'alarm/equipAttr'),
   // metricDataUrl: completePrefix(deviceURI, 'metricdata/listMongoData'),
   //*******************************************************************************
@@ -387,7 +391,11 @@ export const SpcSerUrl = {
   getSelfTopoTreeUrl: completePrefix(baseURI, 'bank/topography/selftree'), //自建系统树
   getSelfTopographyUrl: completePrefix(baseURI, 'bank/topography/selfnodes'), //自建系统树节点
   updateSelfUrl: completePrefix(baseURI, 'bank/topography/selfnodes'), //更新自建系统节点
-  listSelfDevice: completePrefix(baseURI, 'bank/equipment/selfDevice?fname={fname}&pageNumber={page}&pageSize={size}') 
+  listSelfDevice: completePrefix(baseURI, 'bank/equipment/selfDevice?fname={fname}&pageNumber={page}&pageSize={size}'),
+
+  getTopoTreeByTypeUrl: completePrefix(baseURI, 'bank/topography/treeByType/{type}'), //监控系统树
+  getNodesByTypeAndTreeIdUrl: completePrefix(baseURI, 'bank/topography/getNodesByTypeAndTreeId/{type}/{treeId}'), //根据类型查询拓扑图列表
+  saveNodesByTypeUrl: completePrefix(baseURI, 'bank/topography/saveNodesByType/{type}'), //保存拓扑图数据
 };
 
 export const patrolUrls = {
@@ -509,7 +517,8 @@ export const MonitorUrl = {
   getMonitorsByPageDataUrl: completePrefix(baseURI, 'rtsp/listVideoByPage'), //监控视频分页查询
   getMonitorsTreeUrl: completePrefix(baseURI, 'rtsp/monitorVideoTree'), //视频监控左侧树列表
   getMonitorsByFloor3dUrl: completePrefix(baseURI, 'rtsp/list?floor3d={floor}&orgCode={orgCode}'), //根据行政编码和楼层查询监控信息
-  updateMonitorPosition3dUrl: completePrefix(baseURI, 'video/updateDevice') //更新监控点三维坐标
+  updateMonitorPosition3dUrl: completePrefix(baseURI, 'video/updateDevice'), //更新监控点三维坐标
+  updateDynamicRingPosition3dUrl: completePrefix(baseURI, '/bank/dynamicRingData/update') //更新监控点三维坐标
 };
 
 // export const DeviceURI = { 废弃

src/consts/wsUrlConsts.js

@@ -28,7 +28,8 @@ export default {
   sbTopoURI: completePrefix(baseURI, 'shebei'),//设备监控拓扑图消息
   towMapURI: completePrefix(baseURI, 'gj'),//GPS轨迹坐标消息
   aisleURI: completePrefix(baseURI, 'aisleAlarm'), //首页地图通道消息
-  planTaskURI: completePrefix(baseURI, 'plantask') //巡检推送消息（刷新支付业务和巡检计划执行情况）
+  planTaskURI: completePrefix(baseURI, 'plantask') ,//巡检推送消息（刷新支付业务和巡检计划执行情况）
+  technologyIpURI: completePrefix(baseURI, 'technologyIp'), //科技处设备ping IP
 };
 
 export const completeToken = (url) => {

src/routes/asyncView.js

@@ -94,6 +94,9 @@ const AsyncDynamicRing = props => <AsyncLoader load={import('./../view/bank/dyna
 const AsyncEqpAndMovingRing = props => <AsyncLoader load={import('./../view/bank/eqpAndMovingRing/index')} componentProps={props} />;
 const AsyncEquipMonitor = props => <AsyncLoader load={import('./../view/bank/equipMonitor')} componentProps={props} />;
 const AsyncSelfSupport = props => <AsyncLoader load={import('./../view/bizview/selfSupport/index')} componentProps={props} />;
+const AsyncVirtualCloudPlatformSupport = props => <AsyncLoader load={import('./../view/bank/virtualCloudPlatform/index')} componentProps={props} />;
+const AsyncFinancialCityLanSupport = props => <AsyncLoader load={import('./../view/bank/financialCityLan/index')} componentProps={props} />;
+
 
 const Routes = {
   // 添加 rules 路由
@@ -175,7 +178,9 @@ const Routes = {
   donghuan: AsyncDynamicRing,
   deviceMonitor: AsyncEquipMonitor,
   eqpAndMovingRing: AsyncEqpAndMovingRing,
-  selfSupport:AsyncSelfSupport
+  selfSupport: AsyncSelfSupport,
+  financialCityLan: AsyncFinancialCityLanSupport,
+  virtualCloudPlatform: AsyncVirtualCloudPlatformSupport
 
 };
 

src/routes/view.js

@@ -19,7 +19,7 @@ import RegionList from './../view/region';
 
 import BusinessView from './../view/bizview/point/PointView';
 import RiskPoint from './../view/bizview/riskPoint/index';
-import Dutyinfo from './../view/bizview/dutyInfo/index';
+import DutyInfo from './../view/bizview/dutyInfo/index';
 import Fireequip from './../view/bizview/fireEquipment/index';
 import Personnel from './../view/bizview/personnelInfo/index';
 // import CheckDetail from './../view/bizview/checkManage/checkDetail';
@@ -87,6 +87,8 @@ import PamsTable from './../view/pamsTable';
 import DynamicRing from './../view/bank/dynamicRing';
 import EquipMonitor from './../view/bank/equipMonitor';
 import EqpAndMovingRing from './../view/bank/eqpAndMovingRing/index';
+import VirtualCloudPlatform from './../view/bank/virtualCloudPlatform/index';
+import FinancialCityLan from './../view/bank/financialCityLan/index';
 
 
 const Routes = {
@@ -106,7 +108,7 @@ const Routes = {
   twoDimensionalMap: TwoDimensionalMap,
   bizview: BusinessView,
   riskpoint: RiskPoint,
-  dutyinfo: Dutyinfo,
+  dutyinfo: DutyInfo,
   fireequip: Fireequip,
   personnel: Personnel,
   patrolpoint: Patrol,
@@ -171,7 +173,11 @@ const Routes = {
   deviceMonitor: EquipMonitor,
   eqpAndMovingRing: EqpAndMovingRing,
   //自建系统
-  selfSupport: SelfSupport
+  selfSupport: SelfSupport,
+  //虚拟云平台监控
+  virtualCloudPlatform: VirtualCloudPlatform,
+  //金融城域网
+  financialCityLan: FinancialCityLan
 };
 
 const pageCompontent = key => {

src/services/3dService.js

@@ -2,7 +2,7 @@ import formatUrl from 'amos-processor/lib/utils/urlFormat';
 import * as helper from 'base-r3d/lib/utils/helper';
 // import { helper } from 'amos-3d/lib/threeTools';
 import { FscSerUrl, FasSerUrl } from './../consts/urlConsts';
-import { commonGet, commonPost, singleFetch } from './../utils/request';
+import { commonGet, commonPost, singleFetch, getOrgCode} from './../utils/request';
 import { baseURI } from 'amos-processor/lib/config/endconf';
 
 //---------------- 加载模型、解析模型json -----------
@@ -273,15 +273,17 @@ export const rightTopChartAction = (companyId) => {
  * 查询主页一级值班信息
  * @param {*} id
  */
-export const middleTabletAction = ( page, size ) => {
-  return commonGet(formatUrl(FscSerUrl.middleTableListUrl,{ page, size }));
+export const middleTabletAction = (id) => {
+  let orgCode = getOrgCode();
+  return commonGet(formatUrl(FscSerUrl.middleTableListUrl, { orgCode,id }));
 };
 /**
  * 查询主页二级值班信息
  * @param {*} id
  */
-export const middleHeaderAction = ( page, size ) => {
-  return commonGet(formatUrl(FscSerUrl.middleHeaderDataUrl));
+export const middleHeaderAction = () => {
+  let orgCode = getOrgCode();
+  return commonGet(formatUrl(FscSerUrl.middleHeaderDataUrl,  { orgCode }));
 };
 /**
  * 查询主页支付累计数据

src/services/alarmService.js

@@ -6,3 +6,17 @@ import { FscSerUrl } from './../consts/urlConsts';
 export const getAlarms = function() {
   return commonGet(FscSerUrl.alarmDataUrl);
 };
+
+/**
+ * 获取七天告警统计数据
+ */
+export const getSevenDaysAlarms = function() {
+  return commonGet(FscSerUrl.sevenDaysalarmDataUrl);
+};
+
+/**
+ * 首页动环信息展示
+ */
+export const getMobileShowDate = function() {
+  return commonGet(FscSerUrl.getMobileShowDateUrl);
+};

src/services/monitorService.js

+import { SpcSerUrl } from './../consts/urlConsts';
+import { commonPost, commonGet, formatUrl } from './../utils/request';
+
+
+// 监控系统树查询
+export const getTopoTreeByTypeAction = (type) => {
+  return commonGet(formatUrl(SpcSerUrl.getTopoTreeByTypeUrl, { type }));
+};
+
+// 拓扑图查询
+export const getNodesByTypeAndTreeIdAction = (type, treeId) => {
+  return commonGet(formatUrl(SpcSerUrl.getNodesByTypeAndTreeIdUrl, { type, treeId }));
+};
+
+//  拓扑图更新数据
+export const saveNodesByTypeUrlAction = (type, params) => {
+  return commonPost(formatUrl(SpcSerUrl.saveNodesByTypeUrl, { type }), params);
+};
+
+

src/services/pickService.js

@@ -52,3 +52,12 @@ export const updateMonitorPosition3d = (data) => {
   let url = MonitorUrl.updateMonitorPosition3dUrl;
   return commonPut(url, data);
 };
+
+/**
+ * 更新动环点三维坐标
+ * @param {*} data
+ */
+export const updateDynamicRingPosition = (data) => {
+  let url = MonitorUrl.updateDynamicRingPosition3dUrl;
+  return commonPut(url, data);
+};

src/styles/base.scss

@@ -72,3 +72,7 @@ body {
   line-height: 36px;
   border: 0;
 }
+.amos-toast-inner.amos-toast-inner-closable {
+  top: 150px;
+  background:#49a9ee;
+}

src/styles/view/3dview/points.scss

@@ -28,6 +28,7 @@
   @include create-point-level('impEqu_01', $equ-color-type-1);
   @include create-point-level('impEqu_02', $equ-color-type-2);
   @include create-point-level('impEqu_03', $equ-color-type-3);
+  @include create-point-level('impEqu_04', $equ-color-type-4);
   @include create-point-level('dynamicRingData_01', $dynamic-color-type-1);
   @include create-point-level('dynamicRingData_02', $dynamic-color-type-2);
 }

src/styles/view/biz/dynamicRing/index.scss

@@ -2,6 +2,69 @@
   height: 100%;
   display: flex;
 
+  .view-header {
+    height: 42px;
+    line-height: 42px;
+    background: rgba(243, 243, 243, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    z-index: 1;
+    position: absolute;
+    width: 108%;
+  }
+
+  .view-header-close {
+    height: 42px;
+    line-height: 42px;
+    background: #f3f3f3;
+    /* border: 1px solid #eaeaea; */
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    position: relative;
+    z-index: 5;
+    width: 270%;
+    /* left: 30%; */
+    /* margin-left: 10px; */
+    /* float: left; */
+    top: 2px;
+  }
+
+  .image-sytle {
+    height: 20px;
+  }
+
+  .left-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
+
+  .right-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
   .left-content {
     width: 300px;
     position: relative;
@@ -15,7 +78,7 @@
         height: 42px;
         line-height: 42px;
         background: #f3f3f3;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-right: none;
         display: flex;
         align-items: center;
@@ -40,16 +103,19 @@
       .ant-tree {
         height: calc(100% - 42px);
         padding-left: 24px;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-top: none;
         padding-top: 7px;
+
         .ant-tree-title {
           font-size: 16px;
           font-weight: bold;
         }
+
         li .ant-tree-node-content-wrapper.ant-tree-node-selected {
           background-color: rgba(230, 247, 255, 1);
         }
+
         li span.ant-tree-switcher.ant-tree-switcher_open:after {
           display: inline-block;
           width: 17px;
@@ -73,6 +139,7 @@
           background-size: cover;
           vertical-align: sub;
         }
+
         .ant-tree-child-tree {
           .ant-tree-switcher:before {
             display: inline-block;
@@ -93,6 +160,7 @@
       }
 
       .tree-right {
+
         .ant-menu-item:hover,
         .ant-menu-item-active,
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
@@ -106,6 +174,7 @@
           font-size: 14px;
           height: 36px;
           line-height: 36px;
+
           .tree-add-img {
             width: 16px;
             height: 16px;
@@ -124,14 +193,22 @@
     }
   }
 
+  .left-content-close {
+    position: relative;
+
+    .tree-wrapper {
+      display: none;
+    }
+  }
+
   .right-content {
     flex: 1;
 
     .net-topo-header {
       height: 42px;
       line-height: 42px;
-      background:rgba(243,243,243,1);
-      border:1px solid rgba(234,234,234,1);
+      background: rgba(243, 243, 243, 1);
+      border: 1px solid rgba(234, 234, 234, 1);
       border-left: none;
       padding-right: 42px;
       text-align: right;
@@ -179,7 +256,7 @@
         .tooltip-content {
           width: 251px;
           background: #345fa6;
-          box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+          box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
           opacity: 1;
           border-radius: 7px;
           padding: 22px 24px;

src/styles/view/biz/financialCityLan/index.scss

+.financialCityLan-wrapper {
+  height: 100%;
+
+  .financialCityLan-header {
+    height: 42px;
+    display: flex;
+    background: rgba(243, 243, 243, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+
+    .financialCityLan-view {
+      width: 300px;
+      padding-right: 42px;
+      text-align: right;
+      padding-top: 2px;
+
+      img {
+        height: 20px;
+      }
+
+      .left-view {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 4px 0px 0px 4px;
+        cursor: pointer;
+        padding: 8px;
+      }
+
+      .detail-view {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 0px 4px 4px 0px;
+        padding: 8px;
+        cursor: pointer;
+      }
+
+      .left-active-view {
+        background: rgba(227, 227, 227, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+      }
+
+      .detail-active-view {
+        background: rgba(227, 227, 227, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+      }
+    }
+
+    .financialCityLan-data {
+      flex: 1;
+      padding-right: 42px;
+      text-align: right;
+      padding-top: 2px;
+
+      img {
+        height: 20px;
+      }
+
+      .financialCityLan-topo-save {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 4px 0px 0px 4px;
+        cursor: pointer;
+        padding: 8px;
+      }
+
+      .financialCityLan-topo-refresh {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 0px 4px 4px 0px;
+        padding: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .financialCityLan-content {
+    height: calc(100% - 42px);
+    display: flex;
+  }
+
+  .left-content {
+    width: 300px;
+    position: relative;
+    border-right: 1px solid rgba(234, 234, 234, 1);
+
+    .tree-wrapper {
+      height: 100%;
+      padding-top: 26px;
+
+      .ant-tree {
+        height: 100%;
+        padding-left: 24px;
+        .ant-tree-title {
+          font-size: 16px;
+          font-weight: bold;
+        }
+        li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+          background-color: rgba(230, 247, 255, 1);
+        }
+        li span.ant-tree-switcher.ant-tree-switcher_open:after {
+          display: inline-block;
+          width: 17px;
+          height: 17px;
+          content: '';
+          transform: unset;
+          transition: unset;
+          background: url('/src/assets/bizView/netTopology/tree-folder.png');
+          background-size: cover;
+          vertical-align: sub;
+        }
+
+        li span.ant-tree-switcher.ant-tree-switcher_close:after {
+          display: inline-block;
+          width: 17px;
+          height: 17px;
+          content: '';
+          transform: unset;
+          transition: unset;
+          background: url('/src/assets/bizView/netTopology/tree-folder.png');
+          background-size: cover;
+          vertical-align: sub;
+        }
+        .ant-tree-child-tree {
+          .ant-tree-switcher:before {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            content: '';
+            transform: unset;
+            transition: unset;
+            background: url('/src/assets/bizView/netTopology/tree-floor.png');
+            background-size: cover;
+            vertical-align: sub;
+          }
+
+          .ant-tree-title {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .left-content-close {
+    position: relative;
+
+    .tree-wrapper {
+      display: none;
+    }
+  }
+  .only-middle {
+    width: 100%!important;
+  }
+  .middle-content {
+    // flex: 1;
+    width: calc(100% - 300px);
+    height: 100%;
+
+
+
+    .paslogy-content {
+      // display: flex;
+      height: 100%;
+
+      .middle-content-div {
+        display: flex;
+
+       .box {
+          font-family: Microsoft YaHei UI;
+          font-size: 18px;
+          font-weight: bold;
+          line-height: 19px;
+           color: rgba(255,255,255,1);
+       }
+
+       .content-left{
+        margin-top: 18px;
+        margin-left: 54px;
+        width: 724px;
+        height: 24px;
+        background:rgba(91,227,255,1);
+        text-align: left;
+        padding-left: 10px;
+        padding-top: 3px;
+      }
+
+      .content-right{
+        margin-top: 18px;
+        margin-left: 30px;
+        width: 350px;
+        height: 24px;
+        background: #5be3ff;
+        text-align: left;
+        padding-left: 10px;
+        padding-top: 3px;
+        opacity: 1;
+        margin-right: 42px;
+        opacity:1;
+
+      }
+  }
+
+
+      .net-topo-content {
+        height: calc(100% - 42px);
+
+        .topology-net {
+          canvas {
+            outline: none;
+          }
+
+          .tooltip-content {
+            width: 200px;
+            background: #345fa6;
+            box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+            opacity: 1;
+            border-radius: 7px;
+            padding: 22px 24px;
+
+            .tooltip-item {
+              height: 24px;
+              line-height: 24px;
+              font-size: 13px;
+              font-weight: bold;
+              color: white;
+
+              .item-name {
+                display: inline-block;
+              }
+
+              .item-value {
+                display: inline-block;
+                padding-left: 10px;
+              }
+
+              .item-value-alarm {
+                display: inline-block;
+                padding-left: 10px;
+                text-decoration: underline;
+                color: #ff0000;
+              }
+            }
+          }
+        }
+      }
+
+      .chart-content {
+
+        // flex: 1
+      }
+
+      .topology-pas {
+        flex: 1;
+        canvas {
+          outline: none;
+        }
+      }
+    }
+
+    .net-topo-content {
+      height: calc(100% - 42px);
+
+      .topology-net {
+        canvas {
+          outline: none;
+        }
+
+        .tooltip-content {
+          width: 251px;
+          background: #345fa6;
+          box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+          opacity: 1;
+          border-radius: 7px;
+          padding: 22px 24px;
+
+          .tooltip-item {
+            height: 24px;
+            line-height: 24px;
+            font-size: 13px;
+            font-weight: bold;
+            color: white;
+
+            .item-name {
+              display: inline-block;
+            }
+
+            .item-value {
+              display: inline-block;
+              padding-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+
+
+
+
+}

src/styles/view/biz/header.scss

@@ -2,8 +2,8 @@
 
 #app {
   .header {
-    background: $core-color;
     z-index: 111;
+    background: $core-color;
 
     .sys-tools {
       display: none;
@@ -26,31 +26,30 @@
       .logo-wrapper {
         // display: none;
         width: 240px;
-        font-size: 18px;
         padding-left: 15px;
+        font-size: 18px;
         // background: #345fa6;
         color: #fff;
 
         .header-logo {
+          width: 100%;
           background: #345fa6;
           border: none;
           border-right: 1px solid #2d5291;
-          width: 100%;
         }
+
         .logo-text {
           display: inline-block;
         }
       }
 
       .nav-menu-wrapper {
-
-        .menu-expanded{
+        .menu-expanded {
           position: relative;
           z-index: 90000;
         }
 
         .nav-menu-box {
-
           .nav-menu-list {
             color: white;
 
@@ -65,7 +64,8 @@
               }
 
               .nav-menu-item-label {
-                font-size: 15px;
+                font-size: 18px;
+                font-weight: 500;
                 color: white;
               }
 
@@ -88,56 +88,68 @@
       }
     }
   }
+
   .header.headerIndex {
-    background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
-    background-size: 100% 100%;
-    height: 7rem;
     // line-height: 7rem;
     z-index: 11111;
     display: flex;
+    height: 7rem;
+    background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
+    background-size: 100% 100%;
     box-shadow: none;
+
     .header-navs {
       width: 38%;
+
       .nav-menu-wrapper {
         top: 3rem;
         width: 100%;
+
         .nav-menu-item {
           width: 24% !important;
           border: none !important;
+
           .menusub-wrapper {
             width: 100% !important;
           }
         }
+
         .nav-menu-bg {
           display: none;
         }
       }
     }
+
     .leftNavs {
       .nav-menu-wrapper {
-        padding-left: 25.5%;
-        padding-right: 15%;
+        padding-right: 10%;
+        padding-left: 28.5%;
+
         .nav-menu-item {
           width: 33.3% !important;
         }
       }
     }
+
     .rightNavs {
       .nav-menu-wrapper {
-        padding-left: 15%;
+        padding-left: 9%;
       }
     }
+
     .projectName {
       width: 24%;
       height: 7rem;
       line-height: 7rem;
       text-align: center;
+
       img {
+        width: 100%;
         vertical-align: middle;
-        width: 65%;
       }
     }
   }
+
   .content-body.indexContent {
     top: 0;
     height: 100%;

src/styles/view/biz/index.scss

@@ -22,6 +22,8 @@
 @import './dynamicRing/index.scss';
 @import './equipMonitor/index.scss';
 @import './selfsupport/index.scss';
+@import './financialCityLan/index.scss';
+@import './virtualCloudPlatform/index.scss';
 
 .ant-calendar-picker-container {
   &.ant-calendar-picker-container-placement-bottomRight {

src/styles/view/biz/netTopology/index.scss

@@ -2,6 +2,69 @@
   height: 100%;
   display: flex;
 
+  .view-header {
+    height: 42px;
+    line-height: 42px;
+    background: rgba(243, 243, 243, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    z-index: 1;
+    position: absolute;
+    width: 108%;
+  }
+
+  .view-header-close {
+    height: 42px;
+    line-height: 42px;
+    background: #f3f3f3;
+    /* border: 1px solid #eaeaea; */
+    border-left: none;
+    padding-right: 42px;
+    text-align: right;
+    padding-top: 2px;
+    position: relative;
+    z-index: 5;
+    width: 270%;
+    /* left: 30%; */
+    /* margin-left: 10px; */
+    /* float: left; */
+    top: 2px;
+  }
+
+  .image-sytle {
+    height: 20px;
+  }
+
+  .left-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
+  .right-view {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+    opacity: 1;
+    border-radius: 4px 0px 0px 4px;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+  }
+
+
   .left-content {
     width: 300px;
     position: relative;
@@ -15,7 +78,7 @@
         height: 42px;
         line-height: 42px;
         background: #f3f3f3;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-right: none;
         display: flex;
         align-items: center;
@@ -40,16 +103,17 @@
       .ant-tree {
         height: calc(100% - 42px);
         padding-left: 24px;
-        border:1px solid rgba(234,234,234,1);
+        border: 1px solid rgba(234, 234, 234, 1);
         border-top: none;
         padding-top: 7px;
+
         //overflow-x: scroll;
         .ant-tree-title {
           font-size: 16px;
           font-weight: bold;
         }
 
-        li .ant-tree-node-content-wrapper{
+        li .ant-tree-node-content-wrapper {
           width: 82%;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -58,6 +122,7 @@
         li .ant-tree-node-content-wrapper.ant-tree-node-selected {
           background-color: rgba(230, 247, 255, 1);
         }
+
         li span.ant-tree-switcher.ant-tree-switcher_open:after {
           display: inline-block;
           width: 17px;
@@ -81,6 +146,7 @@
           background-size: cover;
           vertical-align: sub;
         }
+
         .ant-tree-child-tree {
           .ant-tree-switcher:before {
             display: inline-block;
@@ -101,6 +167,7 @@
       }
 
       .tree-right {
+
         .ant-menu-item:hover,
         .ant-menu-item-active,
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
@@ -116,6 +183,7 @@
           line-height: 36px;
           margin-left: -70px;
           background-color: white;
+
           .tree-add-img {
             width: 16px;
             height: 16px;
@@ -134,14 +202,22 @@
     }
   }
 
+  .left-content-close {
+    position: relative;
+
+    .tree-wrapper {
+      display: none;
+    }
+  }
+
   .right-content {
     flex: 1;
 
     .net-topo-header {
       height: 42px;
       line-height: 42px;
-      background:rgba(243,243,243,1);
-      border:1px solid rgba(234,234,234,1);
+      background: rgba(243, 243, 243, 1);
+      border: 1px solid rgba(234, 234, 234, 1);
       border-left: none;
       padding-right: 42px;
       text-align: right;
@@ -189,7 +265,7 @@
         .tooltip-content {
           width: 251px;
           background: #345fa6;
-          box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+          box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
           opacity: 1;
           border-radius: 7px;
           padding: 22px 24px;
@@ -235,21 +311,25 @@
     -webkit-transform: scale(0.3);
     transform: scale(0.3);
   }
+
   25% {
     opacity: 0.5;
     -webkit-transform: scale(0.3);
     transform: scale(0.3);
   }
+
   50% {
     opacity: 1;
     -webkit-transform: scale(0.3);
     transform: scale(0.3);
   }
+
   75% {
     opacity: 0.5;
     -webkit-transform: scale(0.5);
     transform: scale(0.5);
   }
+
   100% {
     opacity: 0.3;
     -webkit-transform: scale(0.8);

src/styles/view/biz/selfsupport/index.scss

@@ -171,7 +171,7 @@
     width: calc(100% - 800px);
     height: 100%;
 
-    
+
 
     .paslogy-content {
       // display: flex;
@@ -211,20 +211,20 @@
         opacity: 1;
         margin-right: 42px;
         opacity:1;
-          
+
       }
   }
 
-      
+
 
       .net-topo-content {
         height: calc(100% - 42px);
-  
+
         .topology-net {
           canvas {
             outline: none;
           }
-  
+
           .tooltip-content {
             width: 200px;
             background: #345fa6;
@@ -232,18 +232,18 @@
             opacity: 1;
             border-radius: 7px;
             padding: 22px 24px;
-  
+
             .tooltip-item {
               height: 24px;
               line-height: 24px;
               font-size: 13px;
               font-weight: bold;
               color: white;
-  
+
               .item-name {
                 display: inline-block;
               }
-  
+
               .item-value {
                 display: inline-block;
                 padding-left: 10px;
@@ -305,7 +305,7 @@
 
   .right-content {
     height: 100%;
-  
+
 
     .devive-title {
       height: 40px;
@@ -325,45 +325,46 @@
       .ant-table-wrapper {
         padding: 10px;
         width: 500px;
-  
+
         .ant-spin-nested-loading {
           border: 1px solid $core-border-color;
           border-bottom: 0;
         }
       }
-  
+
       .ant-table {
         border-radius: 0;
       }
-  
+
       .table-bar {
         .ant-table-pagination {
           float: right;
           display: inline;
+          width: 98%;
         }
       }
       .ant-table-title {
         display: none;
       }
-  
+
       .ant-table-content {
         border-color: $core-border-color;
-  
+
         .ant-table-header {
           & table {
             // margin-right: -17px;
             border: $core-border-color;
           }
         }
-  
+
         .ant-table-body {
           & table {
             border: $core-border-color;
           }
         }
       }
-  
-  
+
+
       .ant-table-thead {
         tr {
           th {
@@ -373,7 +374,7 @@
           }
         }
       }
-  
+
       .ant-table-body {
         tr {
           td {
@@ -383,16 +384,19 @@
           }
         }
       }
-  
+
       .ant-table-placeholder {
         color: $biz-table-font-color;
         background: $content-color;//rgba(40, 40, 40, 1);
       }
-  
+
       .highlight-row {
         background: #ecf6fd;
       }
-  
+
+
+
+
       .ant-pagination-item {
         height: 25px;
         min-width: 25px;
@@ -400,16 +404,16 @@
         line-height: 25px;
         background: $core-border-color;//#333;
         border-radius: 6px;
-  
+
         a {
           color: $biz-table-font-color;
         }
       }
-  
+
       .ant-pagination-total-text {
         color: $biz-table-font-color;
       }
-  
+
       .ant-pagination-prev {
         height: 25px;
         min-width: 25px;
@@ -417,14 +421,14 @@
         line-height: 25px;
         background: $core-border-color;//#333;
         border-radius: 6px;
-  
+
         ::after {
           height: 25px;
           line-height: 25px;
           color: $biz-table-font-color;
         }
       }
-  
+
       .ant-pagination-item-active {
         height: 25px;
         min-width: 25px;
@@ -432,12 +436,12 @@
         line-height: 25px;
         background: $core-color;//#151515;
         border-radius: 6px;
-  
+
         a {
           color: white;
         }
       }
-  
+
       .ant-pagination-next {
         height: 25px;
         min-width: 25px;
@@ -445,23 +449,25 @@
         line-height: 25px;
         background: $core-border-color;//#333;
         border-radius: 6px;
-  
+
         ::after {
           height: 25px;
           line-height: 25px;
           color: $biz-table-font-color;
         }
       }
-  
+
       .ant-pagination-options {
-        margin-top: 5px;
-  
+        margin-top: -12%;
+        margin-left: 88%;
+
         .ant-select-selection {
           height: 25px;
           color: $biz-table-font-color;
           background: $biz-title-color;
           border-color: $core-border-color;
-  
+
+
           .ant-select-arrow {
             color: $biz-table-font-color;
           }
@@ -474,5 +480,5 @@
     display: none;
   }
 
-  
+
 }

src/styles/view/biz/virtualCloudPlatform/index.scss

+.virtualCloudPlatform-wrapper {
+  height: 100%;
+
+  .virtualCloudPlatform-header {
+    height: 42px;
+    display: flex;
+    background: rgba(243, 243, 243, 1);
+    border: 1px solid rgba(234, 234, 234, 1);
+
+    .virtualCloudPlatform-view {
+      width: 300px;
+      padding-right: 42px;
+      text-align: right;
+      padding-top: 2px;
+
+      img {
+        height: 20px;
+      }
+
+      .left-view {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 4px 0px 0px 4px;
+        cursor: pointer;
+        padding: 8px;
+      }
+
+      .detail-view {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 0px 4px 4px 0px;
+        padding: 8px;
+        cursor: pointer;
+      }
+
+      .left-active-view {
+        background: rgba(227, 227, 227, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+      }
+
+      .detail-active-view {
+        background: rgba(227, 227, 227, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+      }
+    }
+
+    .virtualCloudPlatform-data {
+      flex: 1;
+      padding-right: 42px;
+      text-align: right;
+      padding-top: 2px;
+
+      img {
+        height: 20px;
+      }
+
+      .virtualCloudPlatform-topo-save {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 4px 0px 0px 4px;
+        cursor: pointer;
+        padding: 8px;
+      }
+
+      .virtualCloudPlatform-topo-refresh {
+        display: inline-block;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        opacity: 1;
+        border-radius: 0px 4px 4px 0px;
+        padding: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .virtualCloudPlatform-content {
+    height: calc(100% - 42px);
+    display: flex;
+  }
+
+  .left-content {
+    width: 300px;
+    position: relative;
+    border-right: 1px solid rgba(234, 234, 234, 1);
+
+    .tree-wrapper {
+      height: 100%;
+      padding-top: 26px;
+
+      .ant-tree {
+        height: 100%;
+        padding-left: 24px;
+        .ant-tree-title {
+          font-size: 16px;
+          font-weight: bold;
+        }
+        li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+          background-color: rgba(230, 247, 255, 1);
+        }
+        li span.ant-tree-switcher.ant-tree-switcher_open:after {
+          display: inline-block;
+          width: 17px;
+          height: 17px;
+          content: '';
+          transform: unset;
+          transition: unset;
+          background: url('/src/assets/bizView/netTopology/tree-folder.png');
+          background-size: cover;
+          vertical-align: sub;
+        }
+
+        li span.ant-tree-switcher.ant-tree-switcher_close:after {
+          display: inline-block;
+          width: 17px;
+          height: 17px;
+          content: '';
+          transform: unset;
+          transition: unset;
+          background: url('/src/assets/bizView/netTopology/tree-folder.png');
+          background-size: cover;
+          vertical-align: sub;
+        }
+        .ant-tree-child-tree {
+          .ant-tree-switcher:before {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            content: '';
+            transform: unset;
+            transition: unset;
+            background: url('/src/assets/bizView/netTopology/tree-floor.png');
+            background-size: cover;
+            vertical-align: sub;
+          }
+
+          .ant-tree-title {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .left-content-close {
+    position: relative;
+
+    .tree-wrapper {
+      display: none;
+    }
+  }
+  .only-middle {
+    width: 100%!important;
+  }
+  .middle-content {
+    // flex: 1;
+    width: calc(100% - 300px);
+    height: 100%;
+
+    
+
+    .paslogy-content {
+      // display: flex;
+      height: 100%;
+
+      .middle-content-div {
+        display: flex;
+
+       .box {
+          font-family: Microsoft YaHei UI;
+          font-size: 18px;
+          font-weight: bold;
+          line-height: 19px;
+           color: rgba(255,255,255,1);
+       }
+
+       .content-left{
+        margin-top: 18px;
+        margin-left: 54px;
+        width: 724px;
+        height: 24px;
+        background:rgba(91,227,255,1);
+        text-align: left;
+        padding-left: 10px;
+        padding-top: 3px;
+      }
+
+      .content-right{
+        margin-top: 18px;
+        margin-left: 30px;
+        width: 350px;
+        height: 24px;
+        background: #5be3ff;
+        text-align: left;
+        padding-left: 10px;
+        padding-top: 3px;
+        opacity: 1;
+        margin-right: 42px;
+        opacity:1;
+          
+      }
+  }
+
+      
+
+      .net-topo-content {
+        height: calc(100% - 42px);
+  
+        .topology-net {
+          canvas {
+            outline: none;
+          }
+  
+          .tooltip-content {
+            width: 200px;
+            background: #345fa6;
+            box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+            opacity: 1;
+            border-radius: 7px;
+            padding: 22px 24px;
+  
+            .tooltip-item {
+              height: 24px;
+              line-height: 24px;
+              font-size: 13px;
+              font-weight: bold;
+              color: white;
+  
+              .item-name {
+                display: inline-block;
+              }
+  
+              .item-value {
+                display: inline-block;
+                padding-left: 10px;
+              }
+            }
+          }
+        }
+      }
+
+      .chart-content {
+
+        // flex: 1
+      }
+
+      .topology-pas {
+        flex: 1;
+        canvas {
+          outline: none;
+        }
+      }
+    }
+
+    .net-topo-content {
+      height: calc(100% - 42px);
+
+      .topology-net {
+        canvas {
+          outline: none;
+        }
+
+        .tooltip-content {
+          width: 251px;
+          background: #345fa6;
+          box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+          opacity: 1;
+          border-radius: 7px;
+          padding: 22px 24px;
+
+          .tooltip-item {
+            height: 24px;
+            line-height: 24px;
+            font-size: 13px;
+            font-weight: bold;
+            color: white;
+
+            .item-name {
+              display: inline-block;
+            }
+
+            .item-value {
+              display: inline-block;
+              padding-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+ 
+
+  
+
+  
+}

src/styles/view/region/index.scss

@@ -4,6 +4,7 @@
   height: 100%;
   text-align: center;
   background: url('../../assets/region/region-bg.png') no-repeat $core-border-color;
+  background-size: 100%;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;

src/styles/view/var.scss

@@ -31,6 +31,7 @@ $point-color-level-0: rgb(141, 8, 25);
 $equ-color-type-1: rgb(19, 213, 184);
 $equ-color-type-2: rgb(1, 126, 211);
 $equ-color-type-3: rgb(7, 24, 212);
+$equ-color-type-4: rgb(7, 24, 212);
 
 $dynamic-color-type-1:rgb(1, 126, 211);
 $dynamic-color-type-2:rgb(230, 84, 4);

src/utils/CalcCoorArrUtil.js

@@ -51,3 +51,24 @@ export const calcCoorArrUtil = (point_start, point_end, num, key) => {
   return paths;
 };
 
+/**
+ * 语言播放
+ */
+export function text2Speech(content){
+  if ('speechSynthesis' in window) {
+    let sentence = new SpeechSynthesisUtterance(content);
+    let voices = window.speechSynthesis.getVoices();
+    for (let i = 0; i < voices.length; i++) {
+      if (voices[i]['name'] === 'Alex') {
+        sentence.voice = voices[i];
+      }
+    }
+    sentence.pitch = 1;
+    sentence.rate = 1.5;//速度
+    sentence.text = content;
+    window.speechSynthesis.speak(sentence);
+  } else {
+    console.log('当前浏览器不支持语音朗读.');
+  }
+}
+

src/utils/payload.js

+// export default function(data, delRequest){
+//   window.setLoading && window.setLoading(false);
+//   return new Promise((resolve, reject) => {
+//     if (data) {
+//       if (data.dataList || data.dataList === null){
+//         resolve(data.dataList);
+//       } else if (data.result || data.result === null){
+//         resolve(data.result);
+//       } else if (data === 'TypeError: Failed to fetch'){
+//         reject(data);
+//       } else {
+//         resolve(data);
+//       }
+//     } else {
+//       reject(data);
+//     }
+//   });
+// }
 export default function(data, delRequest){
   window.setLoading && window.setLoading(false);
   return new Promise((resolve, reject) => {
     if (data) {
-      if (data.dataList || data.dataList === null){
-        resolve(data.dataList);
-      } else if (data.result || data.result === null){
-        resolve(data.result);
-      }else if (data == 'TypeError: Failed to fetch'){
-        reject(data);
-      }else{
+      if (data.result === 'SUCCESS') {
+        if (data.dataList || data.dataList === null){
+          resolve(data.dataList);
+        } else {
+          resolve(data);
+        }
+      } else if (data.status === 200){
+        if (data.result || data.result !== ''){
+          resolve(data.result);
+        } else {
+          resolve(data);
+        }
+      } else {
         resolve(data);
       }
-      
     } else {
-        reject(data);
+      reject(data);
     }
   });
 }

src/utils/request.js

 import amosRequest, { singleFetch } from 'amos-processor/lib/fetch/amosRequest';
 import { utils } from 'amos-tool';
 import formatUrl from 'amos-processor/lib/utils/urlFormat';
+import SysConsts from 'amos-processor/lib/config/consts';
 import { Store } from 'amos-tool';
 import { message } from 'amos-framework';
 import sysConsts from 'amos-processor/lib/config';
 import payload from './payload';
 
 const lsTool = Store.lsTool;
+const ORGCODE = 'orgCode';
 
 const defaultPageable = {
   page: 0,
@@ -20,8 +22,8 @@ const defaultHeaders = {
 
 /**
  * 删除全局变量requests中的地址
- * @param {*} url 
- * @param {*} method 
+ * @param {*} url
+ * @param {*} method
  */
 const delRequest = (url, method) => {
   if (window.requests && window.requests.length > 0) {
@@ -60,7 +62,7 @@ const getWithCookie = (url) => {
 
 const commonGet = (url) => {
   window.setLoading && window.setLoading(true);
-  return amosRequest(url, { 
+  return amosRequest(url, {
     timeout: 10000000 , method: 'GET',
     headers: compleHeaders(),
     reject(error){
@@ -115,7 +117,35 @@ const commonDelete = (url, data, params) => {
       //message.danger(error.message || '请求失败，服务器错误！');
     }
   }).then(data => payload(data));
-}
+};
+
+const token = SysConsts.token;
+
+const exportExcel = ({ url, method }, fileName) => {
+  window.fetch(url, {
+    method,
+    headers: {
+      'Accept': 'application/vnd.ms-excel',
+      'Content-Type': 'application/json; charset=utf-8',
+      'X-Access-Token': window.localStorage.getItem(token),
+      'token': window.localStorage.getItem(token),
+      'appKey': 'AMOS_BANK',
+      'product': 'AMOS_BANK_WEB'
+    }
+    // body: body ? JSON.stringify(body) : undefined
+  }).then((e) => {
+    e.blob().then((blob) => {
+      const a = window.document.createElement('a');
+      const downUrl = window.URL.createObjectURL(blob);
+      a.href = downUrl;
+      a.download = `${fileName}.xls`;
+      a.click();
+      window.URL.revokeObjectURL(downUrl);
+    });
+  }).catch((e) => {
+
+  });
+};
 
 const compleHeaders = () => {
   return {
@@ -140,4 +170,12 @@ export function setUserId(userId){
   return lsTool.write(sysConsts.userId, userId);
 }
 
-export { amosRequest, commonGet, getWithCookie, singleFetch, commonPost, commonPut, commonDelete, convertDatalist, buildPageable, formatUrl };
+export function setOrgCode(orgCode){
+  return lsTool.write(ORGCODE, orgCode);
+}
+
+export function getOrgCode(){
+  return lsTool.read(ORGCODE);
+}
+
+export { amosRequest, commonGet, getWithCookie, singleFetch, commonPost, commonPut, commonDelete, convertDatalist, buildPageable, formatUrl,exportExcel };

src/view/3dview/points/dialogModel/RiskContentTable.js

@@ -76,19 +76,19 @@ class RiskContentTable extends Component {
   onCheckStatusClick =(record)=>{
     this.props.onCheckStatusClick(record);
   }
- 
+
   render() {
     const { dataList,fetchData } = this.props;
     return (
       <div>
         <AmosGridTable
         columns={checkListColumns(this)}
-        getTableDataAction={()=>{}} 
-        callBack={this.reload}  
+        getTableDataAction={()=>{}}
+        callBack={this.reload}
         isPageable = {false}
         isChecked = {false}
         dataList={dataList}
-        /> 
+        />
       </div>
     );
   }

src/view/3dview/points/dialogModel/RiskSourceDetailModal.js

@@ -18,11 +18,9 @@ const checkListColumns = (self) => {
       key: 'type',
       width: '20%',
       render: (text, record) => {
-        debugger
         if (record && record !== null) {
           record.map((item, index) => {
             //根据换行符分隔
-            debugger
             let arr = item.type.split(",");
             let p = document.createElement('span');
 
@@ -36,7 +34,7 @@ const checkListColumns = (self) => {
                   grandChildItem.append(font);
                   p.append(grandChildItem);
                 }
-               
+
 
               });
               return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div>
@@ -45,7 +43,7 @@ const checkListColumns = (self) => {
 
         }
 
-      
+
     }
     },{
       title: '风险等级',
@@ -62,7 +60,7 @@ const checkListColumns = (self) => {
 };
 
 
-export const data = 
+export const data =
 
   [
     {
@@ -135,7 +133,6 @@ class RiskSourceDetailModal extends Component {
   }
 
   render() {
-    debugger
     //const { data = {} } = this.state;
     return (
       <div className="risk-warn">

src/view/bank/3dview/alarmMarquee.js

@@ -74,16 +74,16 @@ class AlarmMarquee extends Component {
     const { pmdList } = this.props;
     return (
       <div className="AlarmMarquee-top-news">
-        <div className="news-marquee" >
+        <div className="news-marquee">
           <marquee
             id="marquee"
             direction="left"
             behavior="scroll"
             scrollamount="10px"
-            scrolldelay="0"
+            scrolldelay="120"
             loop="-1"
             width="auto"
-            height="42"
+            height="100"
             bgcolor="transparent"
             hspace="0"
             vspace="0"

src/view/bank/3dview/common/biz/FilterPane.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button ,Icon } from 'amos-framework';
+import classnames from 'classnames';
+import './FilterPane.scss';
+/**
+ * 公共列表页面-筛选面板容器
+ *
+ * @class FilterPane
+ * @extends {Component}
+ */
+function FilterPane(props) {
+  const { children, onSearch, show, className, style ,onReset } = props || {};
+  return (
+    <div className={classnames('eb-com-filter-pane', className)} style={{ display: show ? 'block' : 'none', ...style || {} }}>
+      <div className='eb-com-filter-pane-title'>
+        <span>筛选</span>
+        <a className="qq-client-open" onClick={onReset} >
+              <Icon size="1x"  prefix="amosicon" icon="gengduo2" />
+        </a>
+      </div>
+      <div className='eb-com-filter-pane-content'>
+        {children}
+      </div>
+      <div className='eb-com-filter-pane-footer'>
+        {/* <Button className={classnames('eb-com-filter-pane-btn', 'eb-com-filter-pane-reset-btn')} onClick={onReset}>重置</Button> */}
+        <Button className={classnames('eb-com-filter-pane-btn', 'eb-com-filter-pane-search-btn')} onClick={onSearch}>查询</Button>
+      </div>
+    </div>
+  );
+}
+
+
+FilterPane.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.any,
+  children: PropTypes.any,
+  show: PropTypes.bool,
+  onReset: PropTypes.func,
+  onSearch: PropTypes.func,
+  onHide: PropTypes.func,
+  handleFilterShow: PropTypes.func
+};
+
+FilterPane.defaultProps = {
+  onReset(){
+    this.props.onSearch();
+  },
+  onSearch(){
+    this.props.onSearch();
+  }
+};
+
+export default FilterPane;

src/view/bank/3dview/common/biz/FilterPane.scss

+@import './../index.scss';
+
+.eb-com-filter-pane {
+  position: absolute;
+  right: 0%;
+  width: 300px;
+  height: 100%;
+  min-width: 200px;
+  overflow: auto;
+  top: 0px;
+  background: #ffffff;
+
+  .eb-com-filter-pane-title {
+    display: flex;
+    width: 100%;
+    padding: 8px 13px 3px 29px;
+    font-size: $frame-second-fontsize;
+    font-weight: normal;
+    letter-spacing: 1px;
+    color: $frame-fourth-color;
+    align-items: center;
+    font-stretch: normal;
+
+    span {
+      flex: 1;
+    }
+
+    img {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+  }
+
+  .eb-com-filter-pane-footer {
+    display: flex;
+    width: 100%;
+    padding-top: 24px;
+    border-top: solid 1px $frame-main-bordercolor;
+    justify-content: center;
+    align-items: center;
+
+    .eb-com-filter-pane-btn {
+      height: auto;
+      padding: 6px 21px;
+      font-size: $frame-third-fontsize;
+      border-radius: 6px;
+
+      &.eb-com-filter-pane-reset-btn {
+        color: $frame-first-color;
+        background-color: white;
+        border: solid 1px $frame-main-bordercolor;
+      }
+
+      &.eb-com-filter-pane-search-btn {
+        margin-left: 16px;
+        color: white;
+        background-color: $frame-main-color;
+        border: solid 1px $frame-second-bordercolor;
+      }
+    }
+  }
+}

src/view/bank/3dview/common/form/FormUtils.js

+/* eslint-disable no-magic-numbers */
+import classnames from 'classnames';
+import {
+  // utils,
+  trim
+} from 'amos-tool';
+
+/**
+ * form表单布局样式设置方法
+ * @param {number} width 单项form（文本和控件）所占百分比1-100
+ * @param {number} label 单项form文本宽度（宽度设置的单位为rem）
+ * @param {*} other  单项form其他样式名称
+ * @example
+ * <FormItem className={itemLayout('100', '7')} label={<span>调度名称</span>} field="jobname">
+ *   <Input value={form.jobname} />
+ * </FormItem>
+ */
+export const formLayout = (width, label, other) => {
+  return classnames(
+    `eb-com-form-item-${width}`,
+    `eb-com-form-item-label-${label}`,
+    other
+  );
+};
+
+export const formRules = {
+  longTextLength: 1000,
+  textLength: 255,
+  hundredLength: 100,
+  required: (msg) => ({ required: true, message: msg || '必填项' }),
+  name: (length = 32) => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        if (trim(value).length > length) {
+          callback(new Error(`字符长度不能大于${length}`));
+        }
+      }
+      callback();
+    } };
+  },
+  phone: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正确的手机号`));
+        }
+      }
+      callback();
+    } };
+  },
+  tel: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^((0\d{2,3})-)(\d{7,8})((\d{3,}))?$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正确的固定电话`));
+        }
+      }
+      callback();
+    } };
+  },
+  serviceTel: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /(^(400)-(\d{3})-(\d{4})(.)(\d{1,4})$)|(^(400)-(\d{3})-(\d{4}$))/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正确的客服电话`));
+        }
+      }
+      callback();
+    } };
+  },
+  email: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正确格式的邮箱地址`));
+        }
+      }
+      callback();
+    } };
+  },
+  website: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^((https|http|ftp|rtsp|mms){0,1}(:\/\/){0,1})www\.(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正确格式的网址`));
+        }
+      }
+      callback();
+    } };
+  },
+  longitude: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正确格式精度`));
+        }
+      }
+      callback();
+    } };
+  },
+  latitude: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正确格式精度`));
+        }
+      }
+      callback();
+    } };
+  },
+  clockScope: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入大于0的数`));
+        }
+      }
+      callback();
+    } };
+  },
+  positiveInteger: () => {
+    return { validator: (rules, value, callback) => {
+      if (value && trim(value)) {
+        const reg = /^[1-9]\d*$/;
+        if (!reg.test(trim(value))) {
+          callback(new Error(`请输入正整数`));
+        }
+      }
+      callback();
+    } };
+  }
+};
+
+/**
+ * 过滤对象中字符串的前后空格
+ * @param {*} form
+ */
+export const trimFormData = (form) => {
+  for (let key in form) {
+    if ((typeof form[key] === 'string') && form[key].constructor === String) {
+      form[key] = trim(form[key]);
+    }
+  }
+  return form;
+};

src/view/bank/3dview/common/form/form.scss

+@import './../index.scss';
+
+@mixin eb-form-modal {
+  .eb-form-modal-content {
+    @content;
+
+    padding: 20px 0 12px;
+  }
+
+  .eb-form-content {
+    @content;
+  }
+
+  .eb-form-tablelist-filter-content {
+    @content;
+
+    padding: 11px 40px 11px 38px;
+  }
+}
+
+.amos-row {
+  @for $i from 1 through 100 {
+    &.eb-com-form-item-#{$i} {
+      display: inline-block;
+      width: 1% * $i;
+      vertical-align: top;// !important;
+
+
+      &.error {
+        margin-bottom: 0.5em;// !important;
+      }
+
+      &.required .amos-form-item-label {
+        position: relative;
+
+        &::before {
+          position: absolute;
+          left: 0;
+          display: inline-block;
+          font-size: 20px;
+          line-height: 1.3;
+          color: red;
+          content: '*';// !important;
+        }
+
+        label {
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      &.amos-form-item {
+        // margin-bottom: 21px;
+        font-size: $frame-second-fontsize;
+      }
+    }
+
+    &.eb-com-form-item-label-#{$i} {
+      .amos-form-item-label {
+        @if ($i==100) {
+          width: 100%;
+          margin-bottom: 10px;
+        }
+
+        @else {
+          width: 1em * $i;
+          margin-bottom: 0;
+        }
+
+        padding-left: 0.6em;
+        line-height: inherit;
+        color: $frame-fourth-color;
+        text-align: left;
+
+        .amos-form-item-field {
+          font-size: inherit;// !important;
+
+          &::after {
+            margin: 0 0.5em 0 0.1em;
+          }
+        }
+      }
+
+      .amos-form-item-control {
+        @if ($i==100) {
+          width: 100%;
+        }
+
+        @else {
+          width: calc(100% - #{1em * $i});
+        }
+
+        display: inline-block;
+        vertical-align: top;
+      }
+    }
+
+    &.eb-com-form-item-label-0 {
+      .amos-form-item-label {
+        display: none;// !important;
+      }
+    }
+  }
+}
+
+@include eb-form-modal {
+  input {
+    width: 100%;
+    height: 30px;
+    padding: 0 0.6em;
+    font-size: $frame-second-fontsize;
+    background: $frame-third-color;
+    border: 1px solid $frame-main-bordercolor;
+    border-radius: 6px;
+    outline: none;
+    opacity: 1;
+
+    &:not([disabled]):hover {
+      border-color: #27b3fe;
+    }
+  }
+
+  .amos-textarea {
+    width: 100%;
+    padding: 0.6em;
+    font-size: $frame-second-fontsize;
+    line-height: 1.5;
+    background: $frame-third-color;
+    border: 1px solid $frame-main-bordercolor;
+    border-radius: 6px;
+  }
+
+  .amos-select {
+    width: 100%;
+    height: 30px;
+    min-width: 5em;
+    font-size: $frame-second-fontsize;
+    line-height: 30px;
+    background: $frame-third-color;
+    border: 1px solid $frame-main-bordercolor;
+    border-radius: 6px;// !important;
+
+    .amos-select-dropdown-icon {
+      margin-top: -14px;
+    }
+  }
+
+  .amos-switch {
+    height: 20px;
+    margin: 0;
+
+    &::after {
+      top: 0;
+    }
+  }
+
+  .select-scroll-wrapper {
+    width: 100%;
+
+    .ant-select {
+      .ant-select-selection {
+        width: 100%;
+        height: 30px;
+        font-size: $frame-second-fontsize;
+        line-height: 30px;
+        background: $frame-third-color;
+        border: 1px solid $frame-main-bordercolor;
+        border-radius: 6px;
+
+        .ant-select-selection__rendered {
+          padding-right: 0;
+          padding-left: 0;
+          line-height: 28px;
+        }
+
+        .ant-select-arrow {
+          right: 0.5em;
+          margin-top: 18px;
+          font-size: 16px;
+          color: $frame-main-color;
+        }
+      }
+    }
+  }
+
+  .amos-cascader-dropdown {
+    width: 100%;
+    min-height: 30px;
+    font-size: $frame-second-fontsize;
+    line-height: 30px;
+    background: $frame-third-color;
+    border: 1px solid $frame-main-bordercolor;
+    border-radius: 6px;
+  }
+
+  .amos-multi-select {
+    width: 100%;
+    min-height: 30px;
+    font-size: $frame-second-fontsize;
+    line-height: 30px;
+    background: $frame-third-color;
+    border: 1px solid $frame-main-bordercolor;
+    border-radius: 6px;
+  }
+
+  .eb-form-number-range {
+    display: flex;
+    width: 100%;
+
+    > span {
+      padding: 0 5px;
+    }
+
+    input {
+      flex: 1;
+    }
+
+    .amos-select {
+      width: 4.9em;
+      min-width: 0;
+      margin-left: 3px;// !important;
+
+      .amos-select-title {
+        padding-left: 7px;
+      }
+
+      .amos-select-dropdown-icon {
+        right: 4px;
+      }
+    }
+  }
+
+  .tree-select-scroll-wrapper {
+    width: 100%;
+
+    .ant-select {
+      .ant-select-selection {
+        width: 100%;
+        height: 30px;
+        font-size: $frame-second-fontsize;
+        line-height: 30px;
+        background: $frame-third-color;
+        border: 1px solid $frame-main-bordercolor;
+        border-radius: 6px;
+
+        &:active {
+          border-color: #27b3fe;
+          outline: none;
+          box-shadow: 0 0 0 1px rgba(39, 179, 254, 0.15);
+        }
+
+        .ant-select-selection__rendered {
+          padding: 0;
+
+          .ant-select-selection__placeholder {
+            top: 0;
+            width: 100%;
+            height: 28px;
+            margin: 0;
+            font-size: $frame-second-fontsize;
+            line-height: 28px;
+          }
+        }
+
+        .ant-select-arrow {
+          top: 50%;
+          right: 7px;
+          margin-top: -7px;
+          font-size: $frame-second-fontsize;
+          color: $frame-main-color;
+        }
+      }
+
+      &.ant-select-open {
+        .ant-select-selection {
+          box-shadow: none;
+        }
+      }
+
+      .ant-select-selection--multiple {
+        height: auto;
+        min-height: 30px;
+      }
+    }
+
+    .ant-select-dropdown {
+      overflow: auto;
+    }
+  }
+
+  .ant-calendar-picker {
+    width: 100%;
+  }
+
+  .com-corn-generator {
+    width: 100%;
+  }
+
+  .amos-divider-horizontal {
+    margin: 4px 0 15px;
+  }
+
+  .eb-form-input-button {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+
+    input {
+      width: calc(100% - 35px);
+      margin-right: 5px;
+      vertical-align: top;
+    }
+
+    .eb-com-btn {
+      width: 30px;
+      height: 30px;
+
+      .eb-btn-conent {
+        width: 30px;
+      }
+    }
+  }
+}
+
+.amos-select-dropdown-popover {
+  .amos-popover-content {
+    border: 0;
+    border-radius: 6px;
+    opacity: 1;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+
+    .amos-select-options {
+      .amos-select-option {
+        &:hover {
+          background: $frame-select-color;
+        }
+      }
+    }
+  }
+}
+
+.amos-taglist li input {
+  padding: 0 4px;
+
+  &::-webkit-input-placeholder {
+    color: #bbb;
+  }
+}
+
+.eb-form-file-label {
+  .eb-form-file-label-title {
+    font-size: 14px;
+  }
+
+  .eb-form-file-label-tip {
+    font-size: 12px;
+    color: #999;
+  }
+}

src/view/bank/3dview/common/form/widthFormModal.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { deepCopy } from 'amos-tool';
+import ModalDialog from './../modal';
+import { trimFormData } from './FormUtils';
+import Tip from './../tip';
+import './form.scss';
+
+class Container extends Component {
+  static propTypes = {
+    onStart: PropTypes.func,
+    children: PropTypes.node
+  };
+
+  componentDidMount() {
+    this.props.onStart && this.props.onStart();
+  }
+
+  render() {
+    return (
+      <div className="eb-form-modal-content">
+        { this.props.children }
+      </div>
+    );
+  }
+}
+/**
+ * 弹出框表单修饰器
+ * @class widthFormModal
+ * @extends {Component}
+ */
+const widthFormModal = function({ width, name, title, modalClass, noOverflow = false }){
+  return function(Target) {
+
+
+    // eslint-disable-next-line react/no-multi-comp
+    class FormMoal extends Component {
+
+      constructor(props) {
+        super(props);
+        this.state = {
+          visible: false,
+          type: 'add',
+          data: null,
+          loading: false
+        };
+      }
+
+      componentDidMount() {
+        const props = {
+          ...this.props
+        };
+        const { formRef } = props;
+        //使用修饰器后组件ref不能用了替换成formRef
+        formRef && formRef(this.instance);
+      }
+
+      onOpen = (data, type) => {
+        if (data) {
+          this.setState({ visible: true, type: type || 'edit', data });
+        } else {
+          this.setState({ visible: true, type: type || 'add' });
+        }
+      }
+
+      onInit = () => {
+        const { data } = this.state;
+        this.targetInstance && this.targetInstance.onInit && this.targetInstance.onInit(data, this.state.type);
+      }
+      /**
+       * 获取表单form对象（目前只用于提交验证）
+       *
+       * @memberof Wrapper
+       */
+      onFormInstance = (component) => {
+        //解决form表单中只有一个input项时，回车页面刷新问题
+        //在form节点上添加 onsubmit = 'return false;' 属性
+        if (component && component._reactInternalFiber && component._reactInternalFiber.child && component._reactInternalFiber.child.stateNode) {
+          component._reactInternalFiber.child.stateNode.setAttribute('onsubmit','return false;');
+        }
+        this.form = component;
+      }
+
+      onTargetInstance = (node) => {
+        if (node) {
+          this.targetInstance = node;
+          this.targetInstance.form = this.form;
+        }
+      }
+      /**
+       * 保存按钮事件
+       */
+      onSave = (e) => {
+        this.targetInstance.onSubmit && this.targetInstance.onSubmit(this.onCancel);
+      }
+      /**
+       * 表单提交
+       *
+       * @memberof Wrapper
+       */
+      onSubmit = ({ action, changeValues, form, onSuccess, onError, tip = '保存', showTip = true, showError = true, isClose = true }) => {
+        if (!form && !this.form) {
+          throw new Error('formSubmit方法form不能为空');
+        }
+        if (this.state.loading) {
+          return;
+        }
+        this.setState({ loading: true });
+        (form || this.form).validate((valid,dataValues) => {
+          let values = deepCopy(dataValues);
+          if (valid) {
+            let obj = null;
+            if (changeValues) {
+              obj = changeValues(values);
+            }
+            if (obj) {
+              values = obj;
+            }
+            if (action) {
+              action(trimFormData(values)).then(d => {
+                showTip && Tip.success(`${tip}成功`);
+                onSuccess && onSuccess(d, values);
+                this.props.reload && this.props.reload();
+                isClose && this.onCancel();
+              }).catch(msg => {
+                (showTip || showError) && Tip.error(msg || `${tip}失败`);
+                onError && onError(msg, values);
+              }).finally(() => {
+                this.setState({ loading: false });
+              });
+            } else {
+              onSuccess && onSuccess(values);
+              isClose && this.onCancel();
+              this.setState({ loading: false });
+            }
+          } else {
+            this.setState({ loading: false });
+            return false;
+          }
+        });
+      }
+      /**
+       * 关闭对话框
+       */
+      onCancel = () => {
+        this.targetInstance.onDestroy && this.setState({
+          visible: false,
+          type: 'add',
+          data: null,
+          loading: false
+        }, this.targetInstance.onDestroy());
+      }
+
+      render() {
+        const { visible, type, data } = this.state;
+        const props = { ...this.props };
+        delete props.formRef;
+        if ('formInstance' in props) {
+          throw new Error('widthFormModal修饰器下的组件不能传入formInstance属性');
+        }
+        if ('formSubmit' in props) {
+          throw new Error('widthFormModal修饰器下的组件不能传入formSubmit属性');
+        }
+        if (this.props.title) {
+          title = this.props.title;
+        }
+        if (this.props.name) {
+          name = this.props.name;
+        }
+        return (
+          <ModalDialog
+            visible={visible}
+            width={width}
+            onCancel={this.onCancel}
+            noOverflow={noOverflow}
+            modalClass={`yeebt-form-modal ${modalClass || ''}`}
+            onOk={this.onSave}
+            title={title ? title : `${type === 'add' ? '添加' : '编辑'}${name}`}
+            floorNode={this.props.floorNode}
+            okText={this.props.okText}
+            cancelText={this.props.cancelText}
+          >
+            <Container onStart={this.onInit}>
+              <Target
+                {...this.props}
+                onCancel={this.onCancel}
+                ref={this.onTargetInstance}
+                editData={data}
+                pageType={type}
+                formInstance={this.onFormInstance}
+                formSubmit={this.onSubmit}
+              />
+            </Container>
+          </ModalDialog>
+        );
+      }
+    }
+
+    FormMoal.propTypes = {
+      reload: PropTypes.func,
+      floorNode: PropTypes.any,
+      okText: PropTypes.string,
+      title: PropTypes.string,
+      name: PropTypes.string,
+      cancelText: PropTypes.string
+    };
+
+    return FormMoal;
+  };
+};
+
+export default widthFormModal;

src/view/bank/3dview/common/index.scss

+//系统前缀名
+$frame-main-bg: white; //系统主背景色
+$frame-slave-bg: rgba(243, 243, 243, 1); //系统次级背景色
+$frame-main-bordercolor:rgba(228, 228, 228, 1); //系统次级背景色
+$frame-second-bordercolor: rgba(46, 83, 146, 1); //系统次级背景色
+$frame-third-bordercolor: rgba(201, 201, 201, 1); //系统次级背景色
+$frame-first-fontsize: 20px; //系统一级文本大小
+$frame-second-fontsize: 15px; //系统二级文本大小
+$frame-third-fontsize: 13px; //系统三级文本大小
+$frame-fourth-fontsize: 12px; //系统四级文本大小
+$frame-first-color: rgba(63, 63, 63, 1);//系统一级文本颜色
+$frame-second-color: rgba(206, 206, 206, 1);//系统二级文本颜色
+$frame-third-color: white;//系统三级文本颜色
+$frame-fourth-color: rgba(51, 51, 51, 1);//系统四级文本颜色
+
+$frame-main-color: rgba(52, 95, 166, 1);//系统主色
+$frame-select-color: rgba(230, 247, 255, 1);//系统选中色
+$frame-select-first-color: rgba(21, 146, 230, 1);//系统选中色
+$frame-disabled-color: rgba(227, 227, 227, 1);//系统中禁用色
+$from-disabled-color: #f4f4f4;//系统中rom表单控件禁用色
+
+//系统特殊演示变量
+
+//状态色
+$special-state-color-error: red; //错误
+$special-state-color-pass: rgba(13, 204, 57, 1); //通过
+$special-state-color-unknown: rgba(255, 153, 0, 1); //未知
+//对话框
+$modal-header-bg: linear-gradient(360deg, rgba(246, 246, 246, 1) 0%, rgba(238, 238, 238, 1) 100%); //对话框顶部标题栏背景色
+$modal-footer-bg: rgba(242, 242, 242, 1); //对话框底部背景色
+$modal-colse-bg: linear-gradient(360deg, rgba(235, 4, 4, 1) 0%, rgba(255, 0, 87, 1) 100%); //对话框删除按钮色
+
+//流程
+$flow-bg: rgba(223, 223, 223, 1); //流程底色

src/view/bank/3dview/conf.js

@@ -83,16 +83,14 @@ export const bizControls = [
     { key: 'level_1', label: '合格' },
     { key: 'level_0', label: '未计划' }
   ] },
-  { key: 'impEquipment-point', icon: 'zhongdianshebeixiangqing', type: 'impEquipment', label: '网络设备', subs: [
+  { key: 'impEquipment-point', icon: 'zhongdianshebeixiangqing', type: 'impEquipment', label: '设备点', subs: [
     { key: 'impEqu_01', label: '网络设备' },
     { key: 'impEqu_02', label: '服务器' },
-    { key: 'impEqu_03', label: '虚拟设备' }
+    { key: 'impEqu_03', label: '虚拟设备' },
+    { key: 'impEqu_04', label: 'IP设备' }
   ] },
   // { key: 'monitorEquipment-point', icon: 'shujudian', type: 'monitorEquipment', label: '动环数据' },
-  { key: 'dynamicRingData-point', icon: 'shujudian', type: 'dynamicRingData', label: '动环数据', subs: [
-    { key: 'dynamicRingData_01', label: '动环数据' },
-    { key: 'dynamicRingData_02', label: '火探' }
-  ] },
+  { key: 'dynamicRingData-point', icon: 'shujudian', type: 'dynamicRingData', label: '动环数据' },
   { key: 'monitor-point', icon: 'xunjiandian', type: 'video', label: '视频监控' }
 ];
 

src/view/bank/3dview/consts.js

@@ -63,6 +63,7 @@ export const eventTopics = {
 
   innate_layer: 'base3d.view.controller_layer', // 楼层操作
   innate_operater: 'base3d.view.controller_operater', // 三维内置操作
+  innate_operater_back: 'base3d.view.controller_operater_back', // 三维内置操作返回--关闭首页弹框
   broadcast_fresh: 'base3d.view.broadcast_fresh',//执行步骤数据刷新
   view_fresh: 'base3d.view.view_fresh',//视图刷新
   fromws: 'base3d.fromws',

src/view/bank/3dview/datapane/common/ListPaginate.js

@@ -46,7 +46,7 @@ class ListPaginate extends Component {
     if (number === 0) {
       data = content;
     } else {
-      if (content.length > 0) {
+      if (content && content.length > 0) {
         data.push(...content);
       }
     }
@@ -56,7 +56,7 @@ class ListPaginate extends Component {
       tip = undefined;
     }
     if (number === 0) {
-      this.scroll.scrollToTop();
+      this.scroll && this.scroll.scrollToTop();
     }
     this.setState({ tip, page: number });
     parent.setState({ data });

src/view/bank/3dview/datapane/index.js

@@ -5,9 +5,9 @@ import Drawer from './Drawer';
 
 const dataPanes = [
   // { key: 'search', icon: 'sousuo', label: '检索', title: '信息检索' },
-  { key: 'msg', icon: 'xiaoxi', label: '消息', title: '消息提醒' },
+  { key: 'record', icon: 'xiaoxi', label: '消息', title: '消息提醒' },
   // { key: 'trajectory', icon: 'trajectory', label: '轨迹', title: '巡检轨迹' },
-  { key: 'record', icon: 'yuan1', label: '预案', title: '预案' },
+  { key: 'msg', icon: 'yuan1', label: '预案', title: '预案' },
   // { key: 'job', icon: 'job', label: '工单', title: '工单查看' },
   // { key: 'broadcast', icon: 'buzhou7', label: '步骤', title: '步骤' },
   // { key: 'statistics', icon: 'statistics', label: '统计', title: '统计信息' },

src/view/bank/3dview/indexChart.js

@@ -35,7 +35,7 @@ class IndexChart extends Component {
         if(pointData && pointData.name && pointData.name === '西安'){
 					this.props.indexViewChange(true);
 
-        }else if (seriesType === 'lines') {
+        } else if (seriesType === 'lines') {
           // window.localStorage.setItem('cityLine',JSON.stringify(pointData))
           browserHistory.push({pathname: '/biz/defaultRoute',state: { cityLine: JSON.stringify(pointData) }});
 

src/view/bank/3dview/indexCharts/rightChartChild/businessTable.js

@@ -21,9 +21,9 @@ class BusinessTable extends Component {
 
   render() {
     const { data = [], title = '' } = this.props;
-    let de = data.find(e=>{ return e.payName.indexOf('大') >= 0}) || {};
-    let xe = data.find(e=>{ return e.payName.indexOf('小') >= 0}) || {};
-    let wy = data.find(e=>{ return e.payName.indexOf('网') >= 0}) || {};
+    let de = data.find(e=>{ return e.payName && e.payName.indexOf('大') >= 0}) || {};
+    let xe = data.find(e=>{ return e.payName && e.payName.indexOf('小') >= 0}) || {};
+    let wy = data.find(e=>{ return e.payName && e.payName.indexOf('网') >= 0}) || {};
     // let de = data.find(e=>{ return e.payName === '大额系统'}) || {};
     // let xe = data.find(e=>{ return e.payName === '小额系统'}) || {};
     // let wy = data.find(e=>{ return e.payName === '网银系统'}) || {};

src/view/bank/3dview/indexCharts/rightChartChild/middleTable.js

@@ -8,8 +8,11 @@ import { middleTabletAction, middleHeaderAction } from '../../../../../services/
 const eventConnect = Connect.eventConnect;
 const AmosConfig = endConf.AmosConfig;
 
-const imgs = {"技术岗":"/src/assets/indexChart/work.png",
-              "业务岗":"/src/assets/indexChart/service.png"}
+const imgs = {"二线技术":"/src/assets/indexChart/work.png",
+              "二线业务":"/src/assets/indexChart/service.png"}
+
+// const time = {'早班': '08:30-20:30',
+//               '晚班': '20:30-次日08:30'}
 
 @eventConnect
 class MiddleTable extends Component {
@@ -22,9 +25,10 @@ class MiddleTable extends Component {
     this.state = {
       headerData: {},
       dataList: [],
-      total: 0,//总页数
-      time: ['08:30-20:30','20:30-次日08:30'],
-      selectTime: '08:30-20:30',
+      arrangeList: [],
+      arrangeName: null,
+      arrangeNo: '',
+      id: ''
     };
   }
 
@@ -32,6 +36,17 @@ class MiddleTable extends Component {
     this.refreshDataList();
     this.getHeaderData();
   }
+  getarrangeIdex = () =>{
+    const { arrangeList, arrangeNo } = this.state;
+    let count = 0;
+    for (let i = 0; i < arrangeList.length; i++){
+      if (arrangeList[i].id === arrangeNo){
+        return count;
+      } else {
+        count = count + 1;
+      }
+    }
+  }
   getHeaderData = () => {
     middleHeaderAction().then(data => {
       if(data!=null){
@@ -40,94 +55,82 @@ class MiddleTable extends Component {
     });
   }
 
-  refreshDataList = () => {
-    middleTabletAction(this.pageConfig.current,this.pageConfig.pageSize).then(data => {
-      this.setState({ dataList: data.content, total:data.total })
-    });
-  }
-
-
-  leftClick = () => {
-    if( this.pageConfig.current != 1 ){
-      this.pageConfig.current = this.pageConfig.current == 1 ? 1 : this.pageConfig.current - 1;
-      this.refreshDataList();
-      this.changeTime();
+  leftClick = () =>{
+    const { arrangeList } = this.state;
+    let count = this.getarrangeIdex();
+    if (count - 1 < 0 ){
+      return;
+    } else {
+      count =  count - 1;
     }
+    middleTabletAction(arrangeList[count].id).then(data => {
+      this.setState({ dataList: data.content, arrangeName: data.arrangeName,arrangeList: data.arrangeList,arrangeNo: data.arrangeNo });
+    });
   }
 
-  rightClick = () => {
-    const { total } = this.state;
-    let maxNum = Math.ceil( total/this.pageConfig.pageSize );
-    if( this.pageConfig.current < maxNum){
-      this.pageConfig.current = this.pageConfig.current + 1;
-      this.refreshDataList();
-      this.changeTime();
+  rightClick= ()=>{
+    const { arrangeList } = this.state;
+    let count = this.getarrangeIdex();
+    if (count + 1 > arrangeList.length - 1){
+      return;
+    } else {
+      count =  count + 1;
     }
+    middleTabletAction(arrangeList[count].id).then(data => {
+      this.setState({dataList: data.content, arrangeName: data.arrangeName,arrangeList: data.arrangeList,arrangeNo: data.arrangeNo  });
+    });
   }
 
-  changeTime = () => {
-    const { selectTime, time } = this.state;
-    let newTime = time.filter( e => {
-      return e!=selectTime
-    })
-    this.setState({ selectTime:newTime[0] })
+  refreshDataList = () => {
+    middleTabletAction(this.state.id).then(data => {
+      console.log(data);
+      this.setState({ dataList: data.content, arrangeName: data.arrangeName,arrangeList: data.arrangeList,arrangeNo: data.arrangeNo });
+    });
   }
-
   render() {
-    const { headerData, dataList, time, selectTime } = this.state;
-    let leader = headerData.leader || {};
-    let second = headerData.second || [];
+    const { headerData, dataList,arrangeList, arrangeNo } = this.state;
+    let leader = (headerData.leader && headerData.leader[0]) || {};
+    let secondTier = headerData.secondTier || [];
+    let arrange = (arrangeList && arrangeList.find(item => item.id === arrangeNo)) || {};
     return (
         <div className='table-middle'>
           <div className='leaderBox'>
             <div className='leader'>
               <span className='itemLabel'>带班领导</span>
-              <span className='itemValue'>{leader.name || ''}{ leader.phone || ''}</span>
+              <span className='itemValue'>{leader.dutyName || ''}</span>
+              <span className='itemValue'>{ leader.mobile || ''}</span>
             </div>
             <div className='secondLine'>
               <span className='itemLabel'>二线人员</span>
               <div className='itemList'>
-                { second && second.map(e => {
-                  return (<div key={e.name + e.phone}>
-                    <img src={ imgs[e.post] }/><span style={{color:'#05ddf9'}}>{e.post}</span>&emsp;&emsp;
-                    {e.name} &emsp; { e.phone }
-                  </div>)
+                { secondTier && secondTier.map(e => {
+                  let postName = e.postName.replace('二线', '') + '岗';
+                  return (
+                    <div>
+                      <img className='itemIcon' src={imgs[e.postName]} /> <div  className='itemContent' style={{color:'#05ddf9'}}>{postName}</div>
+                      <div className='itemContent' >{e.dutyName}</div>
+                      <div className='itemContent'> { e.mobile }</div>
+                    </div>);
                 }) }
               </div>
             </div>
           </div>
-          {/**<Row className='table-header'>
-            <Col className='table-header-left'>
-              <Row className='table-header-row'>带班领导</Row>
-              <Row className='table-header-row'>{ leader.name || '' }</Row>
-              <Row className='table-header-row'>{ leader.phone || ''}</Row>
-            </Col>
-            <Col className='table-header-right'>
-              <Row className='table-header-row'>二线人员</Row>
-              { second && second.map(e => {
-                return (<Row className='table-header-row' key={e}>
-                          <img src={ imgs[e.post] }/><span style={{color:'#05ddf9'}}>{e.post}</span>&emsp;&emsp;
-                          {e.name} &emsp;&emsp;&emsp; { e.phone }
-                        </Row>)
-              }) }
-            </Col>
-          </Row>*/}
           <Row className='table-header-split'>一线人员</Row>
           <Row className='table-body-cotent firstPeople'>
             <Col className=''>
-              <Row className='table-header-row title'>
+              <Row className='table-header-row duty-title'>
                 <Col className='leftBtn' span={1}><img className='table-page-img' src="/src/assets/3dview/left.png" onClick={ () => this.leftClick() }/></Col>
-                <Col span={7}>岗位</Col>
-                <Col span={8}>{ selectTime }</Col>
-                <Col span={7}>电话</Col>
+                <Col span={5}>岗位</Col>
+                <Col span={11}>{arrange.startTime} - {arrange.endTime} </Col>
+                <Col span={6}>电话</Col>
                 <Col className='rightBtn' span={1}><img className='table-page-img' src="/src/assets/3dview/right.png" onClick={ () => this.rightClick() }/></Col>
               </Row>
               { dataList && dataList.map((d,index) => {
                 return (
                   <Row className='table-header-row content' key={index}>
-                    <Col span={8}>{ d.post }</Col>
-                    <Col span={8}>{ d.name }</Col>
-                    <Col span={8}>{ d.phone }</Col>
+                    <Col span={6}>{ d.postName }</Col>
+                    <Col span={8}>{ d.dutyName }</Col>
+                    <Col span={10}>{ d.mobile }</Col>
                   </Row>
                 )
               }) }

src/view/bank/3dview/indexCharts/rightCharts.js

@@ -20,7 +20,7 @@ class RightCharts extends Component {
     };
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
   componentWillUnmount() {
   }
@@ -34,13 +34,13 @@ class RightCharts extends Component {
     return (
       <div className="chart-content">
         {
-          chartsViewFlag === 'patrolMsg'?<div className='patrolMsg'>
+          chartsViewFlag === 'patrolMsg' ? <div className='patrolMsg'>
             <div className='point'>
               <div className='title'>
                 <span className='titleLeft'>
-                <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
+                  <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
                   今日巡检计划执行情况</span>
-                  <span className='titleRight'>{ now }</span>
+                <span className='titleRight'>{now}</span>
               </div>
               <div className='chartBody'>
                 <TopChart curCompanyId={this.props.currentCode} currentCode={this.props.currentCode} patrolDetailView={this.props.patrolDetailView} />
@@ -49,31 +49,31 @@ class RightCharts extends Component {
             <div className='technology'>
               <div className='title'>
                 <span className='titleLeft'>
-                <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
+                  <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
                   值班信息</span>
-                <span className='titleRight'>{ now }</span>
+                <span className='titleRight'>{now}</span>
               </div>
               <div className='chartBody'>
-                  <MiddleTable/>
+                <MiddleTable />
               </div>
             </div>
-          </div>:''
+          </div> : ''
         }
 
         {
-          chartsViewFlag === 'applyMsg'?<div className='business'>
+          chartsViewFlag === 'applyMsg' ? <div className='business'>
             <div className='title'>
               <span className='titleLeft'>
-              <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
+                <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
                 支付业务累计数据</span>
-              <span className='titleRight'>{ now }</span>
+              <span className='titleRight'>{now}</span>
             </div>
             <div className='chartBody'>
-              <BottomTable orgCode={this.props.currentCode}/>
+              <BottomTable orgCode={this.props.currentCode} />
             </div>
-          </div>:''
+          </div> : ''
         }
-        </div>
+      </div>
     );
   }
 }

src/view/bank/3dview/indexCharts/rightPane/alarmLineChart.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AmosEcharts from 'amos-viz/lib/echarts';
+
+/**
+ * 巡检首页-图表
+ *
+ * @class PatrolChart
+ * @extends {Component}
+ */
+class AlarmLineChart extends Component {
+  constructor(props) {
+    super(props);
+
+  }
+
+  getOption = () => {
+    const { data } = this.props;
+    const { xAxis, urgent, important, secondary, warning } = data || {};
+    return {
+      grid: {
+        top: '40px',
+        bottom: '10px',
+        containLabel: true
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {
+        icon: 'circle',
+        // itemWidth: 14,
+        // itemHeight: 5,
+        // itemGap: 13,
+        textStyle: {
+          color: 'white',
+          fontSize: 14
+        },
+        data: ['紧急', '重要', '次要','警告']
+
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxis,
+        axisLabel: {
+          interval: 0,
+          show: true,
+          textStyle: {
+            color: 'white',
+            fontSize: 13
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            show: false,
+            color: '#494d54',
+            width: 1
+          }
+        }
+      },
+      yAxis: [{
+        nameLocation: 'middle',
+        nameTextStyle: {
+          'color': '#AEA4A8'
+        },
+        axisLabel: {
+          interval: 0,
+          show: true,
+          textStyle: {
+            color: 'white',
+            fontSize: 13
+          }
+        },
+        axisLine: {
+          show: false,
+          textStyle: {
+            color: 'white',
+            fontSize: 13
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#e6e6e6',
+            width: 1
+          }
+        }
+      }
+      ],
+      series: [{
+        name: '紧急',
+        type: 'line',
+        smooth: true,
+        barGap: 0,
+        barWidth: '30%',
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            color: '#dc143c',
+            align: 'center'
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#dc143c',
+            barBorderRadius: 11
+          }
+        },
+        data: urgent
+      },
+      {
+        name: '重要',
+        type: 'line',
+        smooth: true,
+        barGap: 0,
+        barWidth: '30%',
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            color: '#ff7f50',
+            align: 'center'
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#ff7f50',
+            barBorderRadius: 11
+          }
+        },
+        data: important
+      },{
+        name: '次要',
+        type: 'line',
+        smooth: true,
+        barGap: 0,
+        barWidth: '30%',
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            color: '#ffd700',
+            align: 'center'
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#ffd700',
+            barBorderRadius: 11
+          }
+        },
+        data: secondary
+      },{
+        name: '警告',
+        type: 'line',
+        smooth: true,
+        barGap: 0,
+        barWidth: '30%',
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            color: '#00ced1',
+            align: 'center'
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#00ced1',
+            barBorderRadius: 11
+          }
+        },
+        data: warning
+      }]
+    };
+  }
+
+  render() {
+    console.log(this.getOption());
+    return (
+      <div className="alarmLineChart">
+        <AmosEcharts option={this.getOption()} />
+      </div>
+    );
+  }
+}
+AlarmLineChart.propTypes = {
+  data: PropTypes.object
+};
+
+
+AlarmLineChart.defaultProps = {
+  data: []
+};
+
+
+export default AlarmLineChart;

src/view/bank/3dview/indexMaps/leftDown.js

 import React, { Component } from 'react';
 
-
 class LeftDown extends Component {
-
   constructor(props) {
     super(props);
   }
@@ -13,49 +11,20 @@ class LeftDown extends Component {
         <div style={{ width: '100px', height: '20px', float: 'left' }}>
           <div className="indexMap-bottom-one" style={{ backgroundColor: '#00A2FF' }}></div>
           <div className="indexMap-bottom-two">
-            <span>其它</span>
-          </div>
-        </div>
-        <div style={{ width: '100px', height: '20px', float: 'left' }}>
-          <div className="indexMap-bottom-one" style={{ backgroundColor: '#19FF00' }}></div>
-          <div className="indexMap-bottom-two">
-            <span>正常</span>
-          </div>
-        </div>
-        <div style={{ width: '100px', height: '20px', float: 'left' }}>
-          <div className="indexMap-bottom-one" style={{ backgroundColor: '#959595' }}></div>
-          <div className="indexMap-bottom-two">
-            <span>未运行</span>
+            <span>人行西安分行正常</span>
           </div>
         </div>
+
         <div style={{ width: '100px', height: '20px', float: 'left' }}>
           <div className="indexMap-bottom-one" style={{ backgroundColor: '#FF8800' }}></div>
           <div className="indexMap-bottom-two">
-            <span>警告</span>
+            <span>商业银行正常</span>
           </div>
         </div>
         <div style={{ width: '100px', height: '20px', float: 'left' }}>
           <div className="indexMap-bottom-one" style={{ backgroundColor: '#FF0000' }}></div>
           <div className="indexMap-bottom-two">
-            <span>故障</span>
-          </div>
-        </div>
-        <div style={{ width: '100px', height: '20px', float: 'left' }}>
-          <div className="indexMap-bottom-one" style={{ backgroundColor: '#02E3FC' }}></div>
-          <div className="indexMap-bottom-two">
-            <span>MBFE正常</span>
-          </div>
-        </div>
-        <div style={{ width: '100px', height: '20px', float: 'left' }}>
-          <div className="indexMap-bottom-one" style={{ backgroundColor: '#FFF948' }}></div>
-          <div className="indexMap-bottom-two">
-            <span>MBFE告警</span>
-          </div>
-        </div>
-        <div style={{ width: '100px', height: '20px', float: 'left' }}>
-          <div className="indexMap-bottom-one" style={{ backgroundColor: '#FFAA00' }}></div>
-          <div className="indexMap-bottom-two">
-            <span>MBFE故障</span>
+            <span>异常</span>
           </div>
         </div>
       </div>

src/view/bank/3dview/map/TwinkleDiv.js

@@ -13,7 +13,7 @@ class TwinkleDiv extends Component {
   }
 
   render() {
-    const { eName, aName, status, isCenter } = this.props.info;
+    const { eName, aName, status, isCenter, sourceIdStr } = this.props.info;
     const { markerOnClick, styleCss } = this.props;
     let color;
     let visable = false;
@@ -27,13 +27,12 @@ class TwinkleDiv extends Component {
       backgroundColor: color
     };
 
-
     return (
       <div className={eName} style={style} >
-        <span onClick={() => markerOnClick(eName)}>{aName}</span>
+        <span onClick={() => markerOnClick(eName, sourceIdStr)}>{aName}</span>
         <div className={`${eName}-line`} style={style} />
         { visable && (eName === 'xian' || eName === 'xianyang') && <div className={`${eName} pulse-spread-circular`} /> }
-        { visable && <div className={`${eName} pulse-spread-div`} onClick={() => markerOnClick(eName)} /> }
+        { visable && <div className={`${eName} pulse-spread-div`} onClick={() => markerOnClick(eName, sourceIdStr)} /> }
       </div>
     );
   }

src/view/bank/3dview/pickDialog/PickModal.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Form, Input, Radio, Select, Button, Toast, CopyToClipboard } from 'amos-framework';
 // eslint-disable-next-line max-len
-import { getRiskSoureData, updateRiskSourePosition3d, getPointData, updatePointPosition3d, getMonitorsByFloor3d, updateMonitorPosition3d } from 'SERVICES/pickService';
+import { getRiskSoureData, updateRiskSourePosition3d, getPointData, updatePointPosition3d, getMonitorsByFloor3d, updateMonitorPosition3d, updateDynamicRingPosition } from 'SERVICES/pickService';
+import { initView3DFromBizAction } from './../../../../../src/services/bizService';
 
 const FormItem = Form.Item;
 const Option = Select.Option;
@@ -53,12 +54,15 @@ class PickModal extends Component {
       case 'impEquipment':
         this.setState({ datas: [] });
         break;
-      case 'dynamicRingData':
-        this.setState({ datas: [] });
-        break;
+      // case 'dynamicRingData':
+      //   this.setState({ datas: [] });
+      //   break;
       case 'video':
         this.getMonitorData();
         break;
+      case 'dynamicRingData':
+        this.getDynamicRingData();
+        break;
       default:
         console.log('不支持的类型');
     }
@@ -142,6 +146,28 @@ class PickModal extends Component {
     });
   }
 
+   /**
+   * 获取动环监测点
+   *
+   * @memberof PickModal
+   */
+  getDynamicRingData = () => {
+    const { orgCode } = this.props;
+    const { form } = this.state;
+
+    initView3DFromBizAction('dynamicRingData',orgCode).then(data => {
+      var filteredProducts = [];
+      for ( let i = 0;i < data.length; i++){
+        console.log( data[i].objKey.charAt(data[i].objKey.length - 1));
+        if (Number(data[i].objKey.charAt(data[i].objKey.length - 1)) === Number(form.floor) ){
+          filteredProducts.push(data[i]);
+        }
+      }
+      this.setState({ datas: data });
+      console.log(this.state.datas);
+    });
+  }
+
   /**
    * 更新监控点坐标
    *
@@ -155,6 +181,20 @@ class PickModal extends Component {
       this.props.onCancel();
     });
   }
+/**
+   * 更新动环点坐标
+   *
+   * @memberof PickModal
+   */
+  updateDynamicRingPosition3d = (pickedPosition) => {
+    const { form } = this.state;
+    const param = Object.assign({}, form, { position3d: pickedPosition.join(',') });
+    updateDynamicRingPosition(param).then(res => {
+      Toast.success({ title: `${form.desc}三维坐标更新成功！` });
+      this.props.onCancel();
+    });
+  }
+
 
   handleSubmit = e => {
     this.form.validate((valid, dataValues) => {
@@ -171,6 +211,7 @@ class PickModal extends Component {
           case 'impEquipment':
             break;
           case 'dynamicRingData':
+            this.updateDynamicRingPosition3d(pickedPosition);
             break;
           case 'video':
             this.updateMonitorPosition3d(pickedPosition);
@@ -220,13 +261,14 @@ class PickModal extends Component {
             {/* <Option value="impEquipment">网络设备</Option> */}
             {/* {<Option value="dynamicRingData">动环数据</Option>} */}
             {<Option value="video">视频监控</Option>}
+            {/* {<Option value="dynamicRingData">动环监测</Option>} */}
           </Select>
         </FormItem>
         <FormItem label={form.desc} field="data" {...formItemLayout}>
           <RadioGroup onChange={this.onRadioChange}>
             { datas.map(item => {
               return (
-                <Radio key={item.token} value={item.id}>{item.name}</Radio>
+                <Radio key={item.token} value={item.id}>{item.label || item.name }</Radio>
               );
             })}
           </RadioGroup>

src/view/bank/3dview/points/PointDialog.js

 /* eslint-disable react/sort-comp */
 /* eslint-disable react/jsx-no-undef */
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { pointInfoAction } from 'SERVICES/3dService';
 import { CONSTS } from 'CONSTS/storageConsts';
 import { queryRoutePlanPointAction } from 'SERVICES/checkInfoService';
@@ -14,7 +15,9 @@ import MonitorEquipmentModal from './dialogModel/MonitorEquipmentModal';
 import EquipmentModal from './dialogModel/EquipmentModal';
 import DynamicRingDateModalTable from './dialogModel/DynamicRingDateModalTable';
 import RiskSourceDetailModal from './dialogModel/RiskSourceDetailModal';
- import CheckDetail from './../../../bizview/check/checkDetail/index';
+import CheckDetail from './../../../bizview/check/checkDetail/index';
+import { eventTopics } from '../consts';
+import { PubSub } from 'ray-eventpool';
 
 const headers = [{ key: 'details', icon: 'number-more', text: '详情' }, { key: 'danger', icon: 'danger', text: '隐患' }];
 
@@ -46,11 +49,17 @@ class PointDialog extends Component {
       dialog: false,
       isFullScreen: false,
       fireDetectVisible: false,
-      xun:false,
-      checkId:''
+      xun: false,
+      checkId: ''
     };
   }
 
+  componentDidMount() {
+    PubSub.subscribe(eventTopics.innate_operater_back, (topic, data) => {
+      this.onDialogClose();
+    });
+  }
+
   /**
    * 打开模态框
    *
@@ -78,7 +87,7 @@ class PointDialog extends Component {
       markerData.markerExtData = { dialogId: id, type, objType, sourceId };
       if (type === 'riskSource') {
         this.setState({ markerData, modal: true });
-      } else if (type === 'impEquipment' && objType !== '03'){//虚拟设备不需要打开Model框
+      } else if (type === 'impEquipment' && objType !== '03') {//虚拟设备不需要打开Model框
         this.setState({ markerData, modal: true });
       } else if (type === 'dynamicRingData') {//
         this.setState({ markerData, modal: true });
@@ -116,7 +125,7 @@ class PointDialog extends Component {
    * @memberof PointDialog
    */
   onCheckStatusClick = record => {
-    this.setState({ xun: true,checkId: record.id });
+    this.setState({ xun: true, checkId: record.id });
     // const detailParams = {
     //   ...markerData.markerExtData,
     //   detailForw: 'record',
@@ -184,23 +193,12 @@ class PointDialog extends Component {
     this.setState({ modal: false });
   };
 
-/****
- *
- *
- * 巡检详情
- *
- */
-
-cancelxun = () => {
-  this.setState({ xun: false });
-};
-
-
-
-
-
-
-
+  /**
+   * 巡检详情
+   */
+  cancelxun = () => {
+    this.setState({ xun: false });
+  };
 
   /**
    * 全屏切换
@@ -247,8 +245,8 @@ cancelxun = () => {
   };
 
   render() {
-    const { open,checkId, xun,showRight, rightContent, markerData, modal, dataList, dialog, isFullScreen, fireDetectVisible} = this.state;
-    const { type, dialogId,objType } = markerData.markerExtData || {};
+    const { open, checkId, xun, showRight, rightContent, markerData, modal, dataList, dialog, isFullScreen, fireDetectVisible } = this.state;
+    const { type, dialogId, objType } = markerData.markerExtData || {};
     let minInfo = {
       headers,
       title: dialogEum[type],
@@ -256,27 +254,27 @@ cancelxun = () => {
       table: <RiskContentTable pointId={dialogId} dataList={dataList} onCheckStatusClick={this.onCheckStatusClick} fetchData={this.getTableData} />
     };
     let modelClass = 'point-dialog-modal';
-    if (type === 'riskSource' || type === 'patrol'){
+    if (type === 'riskSource' || type === 'patrol') {
       modelClass = 'risk-warn-modal';
-    } else if (type === 'impEquipment'){
+    } else if (type === 'impEquipment') {
       modelClass = 'impEqu-info-modal';
-    } else if ( type === 'dynamicRingData' && objType === '01'){
+    } else if (type === 'dynamicRingData' && objType === '01') {
       modelClass = 'dynamicRingData-info-modal';
-    } else if ( type === 'dynamicRingData' && objType === '02'){
+    } else if (type === 'dynamicRingData' && objType === '02') {
       modelClass = 'dynamicRingData-fire-info-modal';
     }
 
     let header = '';
-    if (type === 'dynamicRingData'  && objType === '01'){
+    if (type === 'dynamicRingData' && objType === '01') {
       header = dialogEum['dynamicRingData'];
-    } else if (type === 'dynamicRingData'  && objType === '02'){
+    } else if (type === 'dynamicRingData' && objType === '02') {
       header = dialogEum['huotan'];
     } else {
       header = dialogEum[type];
     }
     //console.log(type,fireDetectVisible);
 
-    let ff=true;
+    let ff = true;
     return (
       <div>
         {
@@ -289,9 +287,8 @@ cancelxun = () => {
             clickHeaderItem={this.clickHeaderItem}
           />
         }
-
-       {<Modal
-           className='xun'
+        {<Modal
+          className='xun'
           header="巡检详情"
           visible={xun}
           noDefaultFooter
@@ -300,16 +297,7 @@ cancelxun = () => {
           onCancel={this.cancelxun}
           content={<CheckDetail pointId={dialogId} checkID={checkId} />}
         />
-       } }
-
-
-
-
-
-
-
-
-
+        }
         {type && type !== 'video' && (
           <Modal
             header={header}
@@ -336,4 +324,8 @@ cancelxun = () => {
   }
 }
 
+PointDialog.propTypes = {
+  subscribe: PropTypes.func
+};
+
 export default PointDialog;

src/view/bank/3dview/points/dialogModel/DynamicRingDataModal.js

@@ -53,50 +53,54 @@ class DynamicRingDataModal extends Component {
 
   queryDynamicRingData =(dialogId)=>{
     dynamicRingData3dAction(dialogId).then(data =>{
-      let monitorElectricityJson = data.find(e => { return e.equipTempCapabName === '运行参数'}) == undefined ? [] : data.find(e => { return e.equipTempCapabName === '运行参数'}).metricList;
-      let alarmMessageJson = data.find(e => { return e.equipTempCapabName === '监测报警'}) == undefined ? [] : data.find(e => { return e.equipTempCapabName === '监测报警'}).metricList;
-      let otherInfoJson = data.find(e => { return e.equipTempCapabName === '运行状态'}) == undefined ? [] : data.find(e => { return e.equipTempCapabName === '运行状态'}).metricList;
-      this.setState({ 
-          // monitorElectricity: monitorElectricityJson != 'null' ? JSON.parse(monitorElectricityJson) : {},
-          // alarmMessage: alarmMessageJson != 'null' ? JSON.parse(alarmMessageJson) : {},
-          // otherInfo: otherInfoJson != 'null' ? JSON.parse(otherInfoJson) : {},
-          monitorElectricity: monitorElectricityJson != 'null' ? monitorElectricityJson : [],
-          alarmMessage: alarmMessageJson != 'null' ? alarmMessageJson : [],
-          otherInfo: otherInfoJson != 'null' ? otherInfoJson : [],
-       });
+      let monitorElectricityJson = data.find(e => { return e.equipTempCapabName === '运行参数' || e.equipTempCapabName === '市电监测'
+          || e.equipTempCapabName === '常电监测' || e.equipTempCapabName === '进线参数' ;}) === undefined ? [] : data.find(e => { return e.equipTempCapabName === '运行参数' ||
+          e.equipTempCapabName === '市电监测' || e.equipTempCapabName === '常电监测' || e.equipTempCapabName === '进线参数';}).metricList;
+      let alarmMessageJson = data.find(e => { return e.equipTempCapabName === '监测报警' || e.equipTempCapabName === '监控告警';
+      }) === undefined ? [] : data.find(e => { return e.equipTempCapabName === '监测报警' || e.equipTempCapabName === '监控告警'; }).metricList;
+      let otherInfoJson = data.find(e => { return e.equipTempCapabName === '运行状态' || e.equipTempCapabName === '状态' || e.equipTempCapabName === '通信状态'
+      ; }) === undefined ?
+       [] : data.find(e => { return e.equipTempCapabName === '运行状态' || e.equipTempCapabName === '状态' || e.equipTempCapabName === '通信状态';}).metricList;
+      this.setState({
+        monitorElectricity: monitorElectricityJson != 'null' ? monitorElectricityJson : [],
+        alarmMessage: alarmMessageJson != 'null' ? alarmMessageJson : [],
+        otherInfo: otherInfoJson != 'null' ? otherInfoJson : [],
+      });
     });
   }
 
-  onTabClick = (value) => {
-    this.setState({ activeKey: value });
-  };
+  // onTabClick = (value) => {
+  //   this.setState({ activeKey: value });
+  // };
 
 
   render() {
-    const { data, monitorElectricity, alarmMessage, otherInfo, activeKey } = this.state;
+    const { monitorElectricity, alarmMessage, otherInfo } = this.state;
     return (
-    <div className="dynamicRingData-info">
-        <Tabs className='dynamicRingData-info-body' activeKey={activeKey} onChange={(index, key) => this.onTabClick(key)} destroyContent closeAnimate cardMode>
-        <TabList>
-          {serverTabs.map((item, i) => (
-            <Tab key={item.id} activeKey={item.id} closable={item.closable}>
-              {item.title}
-            </Tab>
-          ))}
-        </TabList>
-        <TabPanel activeKey="1">
-          <MonitorElectricity data = {monitorElectricity}/>
-        </TabPanel>
-        <TabPanel activeKey="2">
-          <AlarmMessage data = {alarmMessage}/>
-        </TabPanel>
-        <TabPanel activeKey="3">
-          <OtherInfo data = {otherInfo}/>
-        </TabPanel>
-      </Tabs>
-    </div>
+      <div>
+        <div className="dynamicRingData-info">
+          {/* <TabList>
+            {serverTabs.map((item, i) => (
+              <Tab key={item.id} activeKey={item.id} closable={item.closable}>
+                {item.title}
+              </Tab>
+            ))}
+          </TabList> */}
+          <div className="dynamicRingData-info-body">
+            <div>
+              <MonitorElectricity data={monitorElectricity} />
+            </div>
+            <div >
+              <AlarmMessage data={alarmMessage} />
+            </div>
+            <div>
+              <OtherInfo data={otherInfo} />
+            </div>
+          </div>
+        </div>
+      </div>
     );
-    
+
   }
 }
 

src/view/bank/3dview/points/markerFactory.js

@@ -7,7 +7,7 @@ import MarkerIcon from './MarkerIcon';
 import StatisticsMarkerIcon from './markers/StatisticsMarkerIcon';
 import { tirggerTransTopic, tirggerPlanTopic } from '../dataProcessor';
 
-export default function markerFactory(WrappedComponent = 'div', options){
+export default function markerFactory(WrappedComponent = 'div', options) {
   const { markerType } = options;
   class MarkerPoints extends Component {
     static propTypes = {
@@ -54,6 +54,9 @@ export default function markerFactory(WrappedComponent = 'div', options){
      * @memberof MarkerPoints
      */
     onMarkerDblClick = (marker, e) => {
+      if (marker.extData.levelStr === 'impEqu_04') {
+        return;
+      }
       clearTimeout(this.time);
       tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
       // if (marker.extData.markerType === 'impEquipment' && void 0 !== marker.extData.show) {

src/view/bank/3dview/sideControl/ControlItem.js

@@ -37,9 +37,11 @@ class ControlItem extends Component {
 
   componentWillReceiveProps(nextProps) {
     const { active } = nextProps;
-    this.setState({
-      open: active
-    });
+    if (nextProps.active !== this.state.open ){
+      this.setState({
+        open: active
+      });
+    }
   }
 
   /**
@@ -152,7 +154,7 @@ class ControlItem extends Component {
         </ul>
       );
     }
-    
+
     return (
       <ul>
         {

src/view/bank/3dview/sideControl/InnateControlPane.js

@@ -38,6 +38,12 @@ class InnateControlPane extends Component {
       key: item.type,
       value: !alreadyActive
     });
+    if (item.type === 'back'){//点击返回按钮，关闭页面所有弹窗
+      this.props.trigger(eventTopics.innate_operater_back, {
+        key: item.type,
+        value: !alreadyActive
+      });
+    }
   };
 
   onMulitLayerItemClick = (item, toggle) => {

src/view/bank/3dview/sideControl/index.js

@@ -5,6 +5,8 @@ import { Store } from 'amos-tool';
 import BizControlPane from './BizControlPane';
 import InnateControlPane from './InnateControlPane';
 import { viewController, bizControls } from '../conf';
+import { PubSub } from 'ray-eventpool';
+import { eventTopics } from '../consts';
 
 const loginUserName = Store.lsTool.read('userName');
 const filterUser = ['tianbo', 'opera1', 'opera2'];
@@ -19,10 +21,19 @@ class SideControl extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeControl: []
+      activeControl: [],
+      open: true
     };
   }
 
+  componentDidMount() {
+    PubSub.subscribe(eventTopics.innate_operater_back, (topic, data) => {//监听三维返回按钮
+      this.setState({
+        open: false
+      });
+    });
+  }
+
   /**
    * control 点击，第二次点击则取消
    */
@@ -58,8 +69,16 @@ class SideControl extends Component {
    * @memberof SideControl
    */
   isActive = key => {
-    const { activeControl } = this.state;
-    return activeControl && activeControl.includes(key);
+    const { activeControl, open } = this.state;
+    if (!open){//2秒后初始activeControl和open
+      setTimeout(()=>{
+        this.setState({
+          activeControl: [],
+          open: true
+        });
+      }, 2000);
+    }
+    return open && activeControl && activeControl.includes(key);
   };
 
   render() {

src/view/bank/dynamicRing/TopologyComponent.js

@@ -67,6 +67,12 @@ class TopologyComponent extends Component {
     }
   }
 
+
+  //设置文字
+  setFontText = (v) => {
+    return v.text;
+  }
+
   // 告警高亮
   warnHighlights = (d,v) => {
     if (d.warnState) {
@@ -121,6 +127,9 @@ class TopologyComponent extends Component {
   }
 
   getNodeDetail = (id) => {
+    this.setState({
+      detailData: []
+    });
     nodeDetailTopoAction(id).then(data => {
       this.setState({
         detailData: data
@@ -277,7 +286,9 @@ class TopologyComponent extends Component {
       )
     );
 
-    this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
+    this.diagram.groupTemplate = goObj(
+      go.Group,
+      'Vertical',
       {
         resizable: true,
         locationObjectName: 'SHAPE',
@@ -287,27 +298,46 @@ class TopologyComponent extends Component {
         // selectionChanged: this.nodeSelectionChanged
       },
       new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
-      goObj(go.TextBlock,         // group title
-        {
-          width: 100,
-          height: 24,
-          font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
-        },
-      new go.Binding('text')),
-      goObj(go.Shape, 'Rectangle',
+
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        goObj(
+          go.TextBlock, // group title
+          {
+            height: 24,
+            font: 'Bold 14px Sans-Serif',
+            textAlign: 'left',
+            margin: new go.Margin(0, 0, 0, 12),
+            verticalAlignment: go.Spot.Center,
+            alignment: go.Spot.TopLeft
+          },
+         // new go.Binding('text')
+         new go.Binding('text', (v) => this.setFontText(v))
+        )
+      ),
+
+      goObj(
+        go.Shape,
+        'Rectangle',
         {
           name: 'SHAPE',
           parameter1: 14,
-          fill: 'rgba(185,185,185,0.2)',
+          fill: 'rgba(255,255,255,0.2)',
           stroke: 'rgba(28,154,210,1)',
           strokeWidth: 1
         },
-        new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
+        new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify)
       )
     );
 

src/view/bank/dynamicRing/TreeComponent.js

@@ -243,6 +243,25 @@ class TreeComponent extends Component {
     });
   }
 
+  // 视图切换
+  toggleView = (value) => {
+    if (value === 'left') {
+      this.setState({
+        isTreeDisplay: true,
+        activeView: 'left'
+      });
+    } else {
+      this.setState({
+        isTreeDisplay: false,
+        activeView: 'detail'
+      });
+    }
+   //拓扑图刷新
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+
+  }
+
   renderTreeNodes = (data) => {
     let operableTreeData = deepCopy(data);
     return operableTreeData.map((item) => {

src/view/bank/dynamicRing/index.js

 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { message } from 'amos-framework';
 import AmosWebSocket from 'amos-websocket';
 import TopologyComponent from './TopologyComponent';
 import TreeComponent from './TreeComponent';
-import { getDyTopoAction,updateDyTopoAction } from './../../../services/dynamicRingService';
+import { getDyTopoAction, updateDyTopoAction } from './../../../services/dynamicRingService';
 import SysWsURL from './../../../consts/wsUrlConsts';
 
-
 class DynamicRing extends Component {
   constructor(props) {
     super(props);
     this.state = {
       selectedKeys: [],
       wSelectedKeys: '',
+      isTreeDisplay: true,
       topologyData: {} //拓扑图数据
     };
   }
 
   // 拓扑图数据初始化
-  initTopologyData = (id,value = '') => {
+  initTopologyData = (id, value = '') => {
     getDyTopoAction(id).then(data => {
       if (value === 'refresh') {
         message.success('拓扑图刷新成功!');
@@ -28,27 +28,27 @@ class DynamicRing extends Component {
         topologyData: data
       });
     });
-  }
+  };
 
   // 树选择
-  onSelect = (selectedKeys) => {
+  onSelect = selectedKeys => {
     this.initTopologyData(selectedKeys);
     this.setState({
       selectedKeys,
       wSelectedKeys: ''
     });
-  }
+  };
 
   // 节点数据改变
-  nodeChange = (e) => {
+  nodeChange = e => {
     // console.log(e.model.toJson());
     this.updateTopologyData = JSON.parse(e.model.toJson());
-  }
+  };
 
   // 保存节点数据
   saveTopologyData = () => {
     const { selectedKeys } = this.state;
-    const { nodeDataArray,linkDataArray } = this.updateTopologyData;
+    const { nodeDataArray, linkDataArray } = this.updateTopologyData;
     const params = {
       treeid: selectedKeys,
       nodeData: nodeDataArray,
@@ -57,60 +57,74 @@ class DynamicRing extends Component {
     updateDyTopoAction(params).then(data => {
       message.success('拓扑图保存成功!');
     });
-  }
+  };
 
   // 刷新节点
   refreshTopologyData = () => {
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys, 'refresh');
-  }
+  };
 
   // 选择节点
-  nodeSelectionChanged = (e) => {
+  nodeSelectionChanged = e => {
     // console.log('e',e);
-    if (e.isSelected) { }
-  }
+    if (e.isSelected) {
+    }
+  };
 
   // // webSocket 接收消息
-  handleData = (data) => {
+  handleData = data => {
     this.onSelect(data);
     this.setState({
       wSelectedKeys: data
     });
-  }
+  };
+
+  // 视图切换
+  toggleView = value => {
+    if (value === 'left') {
+      this.setState({
+        isTreeDisplay: true,
+        activeView: 'left'
+      });
+    } else {
+      this.setState({
+        isTreeDisplay: false,
+        activeView: 'detail'
+      });
+    }
+    //拓扑图刷新
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+  };
 
   render() {
-    const { topologyData,wSelectedKeys } = this.state;
+    const { topologyData, wSelectedKeys, isTreeDisplay } = this.state;
     return (
       <div className="dy-wrapper">
-        <AmosWebSocket
-          ref={node => this.aws = node}
-          url={SysWsURL.dyTopoURI}
-          onMessage={this.handleData}
-          reconnect
-          debug
-        />
-        <div className="left-content">
-          <TreeComponent
-            onSelect={this.onSelect}
-            wSelectedKeys={wSelectedKeys}
-          />
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.dyTopoURI} onMessage={this.handleData} reconnect debug />
+        <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
+          <div className={classnames({ 'view-header': isTreeDisplay, 'view-header-close': !isTreeDisplay })}>
+            <div className="left-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('left')} />
+            </div>
+            <div className="right-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
+            </div>
+          </div>
+          <TreeComponent onSelect={this.onSelect} wSelectedKeys={wSelectedKeys} />
         </div>
         <div className="right-content">
           <div className="net-topo-header">
             <div className="net-topo-save">
-              <img src="/src/assets/bizView/netTopology/save.png" alt="保存"  onClick={this.saveTopologyData} />
+              <img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
             </div>
             <div className="net-topo-refresh">
-              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新"  onClick={this.refreshTopologyData} />
+              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
             </div>
           </div>
           <div className="net-topo-content">
-            <TopologyComponent
-              topologyData={topologyData}
-              nodeChange={this.nodeChange}
-              nodeSelectionChanged={this.nodeSelectionChanged}
-            />
+            <TopologyComponent topologyData={topologyData} nodeChange={this.nodeChange} nodeSelectionChanged={this.nodeSelectionChanged} />
           </div>
         </div>
       </div>
@@ -118,8 +132,6 @@ class DynamicRing extends Component {
   }
 }
 
-DynamicRing.propTypes = {
-
-};
+DynamicRing.propTypes = {};
 
 export default DynamicRing;

src/view/bank/equipMonitor/TopologyComponent.js

@@ -533,23 +533,38 @@ class TopologyComponent extends Component {
         // selectionChanged: this.nodeSelectionChanged
       },
       new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
-      goObj(go.TextBlock,         // group title
-        {
-          width: 100,
-          height: 24,
-          font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
-        },
-      new go.Binding('text')),
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        goObj(
+          go.TextBlock, // group title
+          {
+            height: 24,
+            font: 'Bold 14px Sans-Serif',
+            textAlign: 'left',
+            margin: new go.Margin(0, 0, 0, 12),
+            verticalAlignment: go.Spot.Center,
+            alignment: go.Spot.TopLeft
+          },
+         new go.Binding('text')
+         //new go.Binding('text', (v) => this.setFontText(v))
+        )
+      ),
       goObj(go.Shape, 'Rectangle',
         {
           name: 'SHAPE',
           parameter1: 14,
-          fill: 'rgba(185,185,185,0.2)',
+          fill: 'rgba(255,255,255,0.2)',
           stroke: 'rgba(28,154,210,1)',
           strokeWidth: 1
         },

src/view/bank/financialCityLan/TreeComponent.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Tree } from 'amos-antd';
+
+const TreeNode = Tree.TreeNode;
+
+class TreeComponent extends Component {
+
+  renderTreeNodes = (data) => {
+    return data.map((item) => {
+      if (item.children && item.children.length) {
+        return (
+          <TreeNode title={item.name} key={item.id} parent={item.parent} >
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return (<TreeNode title={item.name} key={item.id} parent={item.parent} />);
+    });
+  }
+
+  render() {
+    const { className,treeData,expandedKeys,selectedKeys,autoExpandParent,onSelect,onExpand } = this.props;
+    return (
+      <div className={classnames('tree-wrapper', className)}>
+        <Tree
+          selectedKeys={selectedKeys}
+          expandedKeys={expandedKeys}
+          onSelect={onSelect}
+          onExpand={onExpand}
+          autoExpandParent={autoExpandParent}
+        >
+          {this.renderTreeNodes(treeData)}
+        </Tree>
+      </div>
+    );
+  }
+}
+
+TreeComponent.propTypes = {
+  className: PropTypes.string,
+  treeData: PropTypes.object,
+  selectedKeys: PropTypes.array,
+  expandedKeys: PropTypes.array,
+  autoExpandParent: PropTypes.bool,
+  onSelect: PropTypes.func,
+  onExpand: PropTypes.func
+};
+
+export default TreeComponent;

src/view/bank/financialCityLan/conf.js

+  // 获取类型
+  export const  getTypeBySystem = (name) => {
+    const typeParams = {
+      PAMS: 1,
+      SelfSupport: 5,
+      CityLan: 6,
+      CloudPlatform: 7
+    };
+    return typeParams[name];
+  };

src/view/bank/financialCityLan/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { message } from 'amos-framework';
+import dt2react from 'dt2react';
+import AmosWebSocket from 'amos-websocket';
+import TopologyComponent from './TopologyComponent';
+import TreeComponent from './TreeComponent';
+import { getTypeBySystem } from './conf';
+import { getTopoTreeByTypeAction, getNodesByTypeAndTreeIdAction, saveNodesByTypeUrlAction } from 'SERVICES/monitorService';
+import SysWsURL from './../../../consts/wsUrlConsts';
+
+
+const type = getTypeBySystem('CityLan');
+
+//偏移
+const offsetHeight = 110;
+const defaultHeight = 450;
+
+class FinancialCityLan extends Component {
+
+  constructor(props) {
+    super(props);
+    this.pageConfig = {
+      current: 1,
+      pageSize: 10,
+      pageNumber: 1
+    };
+    this.state = {
+      treeData: [
+        {
+          name: '',
+          id: '1',
+          children: []
+        }
+      ], //树数据
+
+      autoExpandParent: true,
+      selectedKeys: [],
+      expandedKeys: [],
+      topologyData: {}, //拓扑图数据
+      tableData: [],
+      isTreeDisplay: true,
+      isTableDisplay: true,
+      activeView: 'left',
+      pHeight: 0,
+      cityLine: '',
+      totalCount: 0,
+      searchParam: [],
+      selectedRows: [],
+      selectedRowKeys: [],
+      pagination: true,
+      isChecked: false
+    };
+    this.updateTopologyData = {};
+    this.mapView = true;
+  }
+  componentWillMount() {
+
+  }
+
+  componentDidMount() {
+    this.initData();
+    if (this.props.location.state) {
+      this.state.cityLine = JSON.parse(this.props.location.state.cityLine);
+      this.viewlineItem();
+    }
+    // this.receivcemqtt();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.location.state) {
+      this.state.cityLine = JSON.parse(nextProps.location.state.cityLine);
+      this.viewlineItem();
+    }
+
+  }
+
+  //点击地图线操作
+  viewlineItem = () => {
+    let { treeData, selectedKeys, cityLine } = this.state;
+    if (cityLine) {
+      let currentLine = `${cityLine.citys[0]}-${cityLine.citys[1]}`;
+      for (let i = 0; i < treeData.length; i++) {
+        let dataItem = treeData[i].children;
+        for (let j = 0; j < dataItem.length; j++) {
+          if (dataItem[j].name === currentLine) {
+            // selectedKeys.push(dataItem[j].id)
+            selectedKeys = [dataItem[j].id];
+            console.log(selectedKeys);
+            if (selectedKeys[0]) {
+              this.initTopologyData(selectedKeys[0]);
+            }
+            this.setState({
+              selectedKeys
+            });
+          }
+        }
+      }
+    }
+  }
+  componentWillUnmount() {
+    window.localStorage.removeItem('cityLine');
+  }
+  getPanelHeight = () => {
+    let tableNode = this.tableNode;
+    let tableLocation = dt2react.getOffset(tableNode) || {};
+    return (tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight) - 30;
+  };
+
+  // 数据初始化
+  initData = () => {
+    let expandedKeysData = [];
+    getTopoTreeByTypeAction(type).then(data => {
+      if (data.length > 0) {
+        data.map(item => {
+          expandedKeysData.push(item.id);
+        });
+        this.initTopologyData(data[0].id);
+        //this.initTopologyEventData();
+        this.setState({
+          treeData: data,
+          selectedKeys: [data[0].id],
+          expandedKeys: expandedKeysData,
+          pHeight: this.getPanelHeight()
+        }, () => {
+          this.viewlineItem();
+        });
+      } else {
+        this.setState({
+          treeData: [],
+          selectedKeys: [''],
+          expandedKeys: expandedKeysData,
+          pHeight: this.getPanelHeight()
+        });
+      }
+
+
+    });
+  }
+
+  // 拓扑图数据初始化
+  initTopologyData = (id, value = '') => {
+    getNodesByTypeAndTreeIdAction(type, id).then(data => {
+      if (value === 'refresh') {
+        message.success('拓扑图刷新成功!');
+      }
+
+      //console.log('视图刷新成功!');
+      this.setState({
+        topologyData: data
+      });
+    });
+  }
+
+  // 树选择
+  onSelect = (selectedKeys, e) => {
+    if (selectedKeys.length && !e.node.props.parent) {
+      window.localStorage.removeItem('cityLine');
+      this.initTopologyData(selectedKeys[0]);
+      this.setState({
+        selectedKeys
+      });
+    }
+  }
+
+  // 树展开
+  onExpand = (expandedKeys) => {
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false
+    });
+  };
+
+  // // 选择节点连线
+  // nodeSelectionLinkChanged = (node) => {
+  //   if (node.isSelected) {
+  //     // 点击选择节点
+  //     if (node.data.clickable) {
+  //       this.initTopologyData(node.data.treeNodeId);
+  //       this.setState({
+  //         selectedKeys: [node.data.treeNodeId]
+  //       });
+  //     }
+  //     // console.log(node.data);
+  //   }
+  // }
+
+  // 选择节点
+  nodeSelectionChanged = (e) => {
+    // console.log('e',e);
+    if (e.isSelected) { }
+  }
+
+  // 节点数据改变
+  nodeChange = (e) => {
+    // console.log(e.model.toJson());
+    this.updateTopologyData = JSON.parse(e.model.toJson());
+  }
+
+  // 保存节点数据
+  saveTopologyData = () => {
+    const { selectedKeys } = this.state;
+    const { nodeDataArray, linkDataArray } = this.updateTopologyData;
+    const params = {
+      treeid: selectedKeys[0],
+      nodeData: nodeDataArray,
+      linkData: linkDataArray
+    };
+    saveNodesByTypeUrlAction(type, params).then(data => {
+      message.success('拓扑图保存成功!');
+    });
+  }
+
+  // 刷新节点
+  refreshTopologyData = () => {
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], 'refresh');
+  }
+
+  // 视图切换
+  toggleView = (value) => {
+    if (value === 'left') {
+      this.setState({
+        isTreeDisplay: true,
+        isTableDisplay: true,
+        activeView: 'left'
+      });
+    } else {
+      this.setState({
+        isTreeDisplay: false,
+        isTableDisplay: false,
+        activeView: 'detail'
+      });
+    }
+   //拓扑图刷新
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+
+  }
+
+  //webSocket 接收消息
+  handleData = (data) => {
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+  }
+
+
+  render() {
+    const { treeData, selectedKeys, expandedKeys, isTreeDisplay } = this.state;
+    if (treeData[0] && treeData[0].children.length < 1) {
+      return null;
+    }
+    if (treeData && treeData.length > 0 && selectedKeys && selectedKeys.length > 0) {
+      if (treeData[0].id != selectedKeys[0]) {
+        this.mapView = false;
+      } else {
+        this.mapView = true;
+      }
+    }
+    const { topologyData } = this.state;
+    const { isTableDisplay, activeView } = this.state;
+    console.log(topologyData);
+    return (
+      <div className="financialCityLan-wrapper">
+        <AmosWebSocket
+          ref={node => this.aws = node}
+          url={SysWsURL.technologyIpURI}
+          onMessage={this.handleData}
+          reconnect
+          debug
+        />
+        <div className="financialCityLan-header">
+          <div className="financialCityLan-view">
+            <div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
+              <img src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('left')} />
+            </div>
+            <div className={classnames('detail-view', { 'detail-active-view': activeView === 'detail' })}>
+              <img src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
+            </div>
+          </div>
+          <div className="financialCityLan-data">
+            <div className="financialCityLan-topo-save">
+              <img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
+            </div>
+            <div className="financialCityLan-topo-refresh">
+              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
+            </div>
+          </div>
+        </div>
+        <div className="financialCityLan-content">
+          {<div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })} >
+
+            <TreeComponent
+              treeData={treeData}
+              //treeData={moniTreeData}
+              selectedKeys={selectedKeys}
+              expandedKeys={expandedKeys}
+              // onSelect={this.onSelect}
+              onExpand={this.onExpand}
+            />
+          </div>}
+          <div className={`middle-content ${isTreeDisplay && isTableDisplay ? '' : 'only-middle'}`}>
+            <div className="paslogy-content">
+              <div className="middle-content-div">
+              </div>
+              <div className="net-topo-content">
+                <TopologyComponent
+                  topologyData={topologyData}
+                  //nodeSelectionLinkChanged={this.nodeSelectionLinkChanged}
+                  nodeSelectionChanged={this.nodeSelectionChanged}
+                  nodeChange={this.nodeChange}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+FinancialCityLan.propTypes = {
+
+};
+
+export default FinancialCityLan;

src/view/bank/netTopology/TopologyComponent.js

@@ -35,6 +35,19 @@ class TopologyComponent extends Component {
     }
   }
 
+    //设置高度
+    setEllipseWidth = v => {
+      let width = v === 'CCPC' ? 780 : 720;
+      return width;
+    };
+
+
+     setMargin = v => {
+      let width = v === 'CCPC' ? new go.Margin(-25,680, 0, 0) : new go.Margin(-25,610, 0, 0);
+      return width;
+    };
+
+
   // this function is the Node.dragComputation, to limit the movement of the parts
   stayInFixedArea = (part, pt, gridpt) => {
     let diagram = part.diagram;
@@ -145,7 +158,7 @@ class TopologyComponent extends Component {
   showToolTip = (obj, diagram, tool) => {
     let toolTipDIV = document.getElementById('toolTipDIV');
     let pt = diagram.lastInput.viewPoint;
-    toolTipDIV.style.left = `${pt.x + 12}px`;
+    toolTipDIV.style.left = `${pt.x - 300}px`;
     toolTipDIV.style.top = `${pt.y}px`;
     toolTipDIV.style.display = 'block';
     this.getNodeDetail(obj.data.id);
@@ -221,6 +234,32 @@ class TopologyComponent extends Component {
         },
     ));
 
+    this.diagram.nodeTemplateMap.add(
+      'Shape',
+      goObj(
+        go.Node,
+        'Vertical',
+        new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        goObj(
+          go.Shape,
+          'Rectangle',
+          {
+            name: 'SHAPE',
+            fill: '#5BE3FF',
+            stroke: '#5BE3FF',
+            strokeWidth: 1,
+            width: 500,
+            height: 24
+          },
+          new go.Binding('width', 'text', v => this.setEllipseWidth(v))
+        ),
+        goObj(go.TextBlock, '无', { stroke: '#fff', font: 'bold 18px Microsoft YaHei UI' },
+        new go.Binding('text'),
+        new go.Binding('margin','text', v => this.setMargin(v),
+       ))
+      )
+    );
+
     this.diagram.nodeTemplateMap.add('Picture',
       goObj(go.Node, 'Vertical',
         {
@@ -288,23 +327,38 @@ class TopologyComponent extends Component {
         // selectionChanged: this.nodeSelectionChanged
       },
       new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
-      goObj(go.TextBlock,         // group title
-        {
-          width: 100,
-          height: 24,
-          font: 'Bold 14px Sans-Serif',
-          stroke: 'white',
-          background: '#1c9ad2',
-          margin: 5,
-          textAlign: 'center',
-          verticalAlignment: go.Spot.Center
-        },
-      new go.Binding('text')),
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        goObj(
+          go.TextBlock, // group title
+          {
+            height: 24,
+            font: 'Bold 14px Sans-Serif',
+            textAlign: 'left',
+            margin: new go.Margin(0, 0, 0, 12),
+            verticalAlignment: go.Spot.Center,
+            alignment: go.Spot.TopLeft
+          },
+         new go.Binding('text')
+         //new go.Binding('text', (v) => this.setFontText(v))
+        )
+      ),
       goObj(go.Shape, 'Rectangle',
         {
           name: 'SHAPE',
           parameter1: 14,
-          fill: 'rgba(185,185,185,0.2)',
+          fill: 'rgba(255,255,255,0.2)',
           stroke: 'rgba(28,154,210,1)',
           strokeWidth: 1
         },
@@ -321,6 +375,8 @@ class TopologyComponent extends Component {
     this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
   }
 
+
+
   render() {
     const { className,style, topologyData } = this.props;
     const { nodeData = [] } = topologyData || {};

src/view/bank/netTopology/TreeComponent.js

@@ -244,6 +244,7 @@ class TreeComponent extends Component {
   }
 
   renderTreeNodes = (data) => {
+
     let operableTreeData = deepCopy(data);
     return operableTreeData.map((item) => {
       if (item.isAdd) {
@@ -287,9 +288,9 @@ class TreeComponent extends Component {
     return (
       <div className={classnames('tree-wrapper', className)}>
         <div className="tree-btn">
-          <div className="add-topo" onClick={this.addTopology}>
+          {/**<div className="add-topo" onClick={this.addTopology}>
             <img src="/src/assets/bizView/netTopology/add-topo.png" alt="添加拓扑图" />
-          </div>
+          </div>*/}
         </div>
         <Tree
           selectedKeys={selectedKeys}
@@ -297,7 +298,7 @@ class TreeComponent extends Component {
           onSelect={this.onSelect}
           onExpand={this.onExpand}
           autoExpandParent={autoExpandParent}
-          onRightClick={this.treeNodeonRightClick}
+         // onRightClick={this.treeNodeonRightClick}
         >
           {this.renderTreeNodes(treeData)}
         </Tree>

src/view/bank/netTopology/index.js

@@ -4,11 +4,11 @@ import { message } from 'amos-framework';
 import AmosWebSocket from 'amos-websocket';
 import TopologyComponent from './TopologyComponent';
 import TreeComponent from './TreeComponent';
-import { getNetTopoAction,updateNetTopoAction } from './../../../services/netTopologyService';
+import { getNetTopoAction, updateNetTopoAction } from './../../../services/netTopologyService';
 import SysWsURL from './../../../consts/wsUrlConsts';
 import PamsTable from './pamsTable/index';
 import { UUID } from 'amos-tool';
-
+import classnames from 'classnames';
 
 class NetTopology extends Component {
   constructor(props) {
@@ -18,12 +18,13 @@ class NetTopology extends Component {
       wSelectedKeys: '',
       topologyData: {}, //拓扑图数据
       pamsDisplay: false,
-      pamsTableContent: []
+      pamsTableContent: [],
+      isTreeDisplay: true
     };
   }
 
   // 拓扑图数据初始化
-  initTopologyData = (id,value = '') => {
+  initTopologyData = (id, value = '') => {
     getNetTopoAction(id).then(data => {
       if (value === 'refresh') {
         message.success('拓扑图刷新成功!');
@@ -32,27 +33,27 @@ class NetTopology extends Component {
         topologyData: data
       });
     });
-  }
+  };
 
   // 树选择
-  onSelect = (selectedKeys) => {
+  onSelect = selectedKeys => {
     this.initTopologyData(selectedKeys);
     this.setState({
       selectedKeys,
       wSelectedKeys: ''
     });
-  }
+  };
 
   // 节点数据改变
-  nodeChange = (e) => {
+  nodeChange = e => {
     // console.log(e.model.toJson());
     this.updateTopologyData = JSON.parse(e.model.toJson());
-  }
+  };
 
   // 保存节点数据
   saveTopologyData = () => {
     const { selectedKeys } = this.state;
-    const { nodeDataArray,linkDataArray } = this.updateTopologyData;
+    const { nodeDataArray, linkDataArray } = this.updateTopologyData;
     const params = {
       treeid: selectedKeys,
       nodeData: nodeDataArray,
@@ -61,86 +62,95 @@ class NetTopology extends Component {
     updateNetTopoAction(params).then(data => {
       message.success('拓扑图保存成功!');
     });
-  }
+  };
 
   // 刷新节点
   refreshTopologyData = () => {
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys, 'refresh');
-  }
+  };
 
   // 选择节点
-  nodeSelectionChanged = (e) => {
-    console.log('e',e);
+  nodeSelectionChanged = e => {
+    console.log('e', e);
     if (e.isSelected) {
-      this.setState({pamsDisplay: true });
-      console.log(e.data,"device");
+      this.setState({ pamsDisplay: true });
+      console.log(e.data, 'device');
       const pamsTableContent = [<PamsTable data={e.data} key={UUID.uuid('16')}></PamsTable>];
-      this.setState({pamsTableContent });
+      this.setState({ pamsTableContent });
     } else {
       console.log('没进来');
-      this.setState({pamsDisplay: false });
+      this.setState({ pamsDisplay: false });
     }
-  }
+  };
 
   //pams底部表
-  renderPamsTable=()=>{
-    const {pamsTableContent } = this.state;
+  renderPamsTable = () => {
+    const { pamsTableContent } = this.state;
     return pamsTableContent;
-  }
+  };
 
   // // webSocket 接收消息
-  handleData = (data) => {
+  handleData = data => {
     this.onSelect(data);
     this.setState({
       wSelectedKeys: data
     });
-  }
+  };
+
+  // 视图切换
+  toggleView = value => {
+    if (value === 'left') {
+      this.setState({
+        isTreeDisplay: true,
+        activeView: 'left'
+      });
+    } else {
+      this.setState({
+        isTreeDisplay: false,
+        activeView: 'detail'
+      });
+    }
+    //拓扑图刷新
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
+  };
 
   render() {
-    const { topologyData,wSelectedKeys,selectedKeys, pamsDisplay } = this.state;
+    const { topologyData, wSelectedKeys, selectedKeys, pamsDisplay, isTreeDisplay } = this.state;
     return (
       <div className="net-wrapper">
-        <AmosWebSocket
-          ref={node => this.aws = node}
-          url={SysWsURL.netTopoURI}
-          onMessage={this.handleData}
-          reconnect
-          debug
-        />
-        <div className="left-content">
-          <TreeComponent
-            onSelect={this.onSelect}
-            wSelectedKeys={wSelectedKeys}
-          />
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.netTopoURI} onMessage={this.handleData} reconnect debug />
+        <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
+          <div className={classnames({ 'view-header': isTreeDisplay, 'view-header-close': !isTreeDisplay })}>
+            <div className="left-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('right')} />
+            </div>
+            <div className="right-view">
+              <img className="image-sytle" src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
+            </div>
+          </div>
+          <TreeComponent onSelect={this.onSelect} wSelectedKeys={wSelectedKeys} />
         </div>
         <div className="right-content">
           <div className="net-topo-header">
             <div className="net-topo-save">
-              <img src="/src/assets/bizView/netTopology/save.png" alt="保存"  onClick={this.saveTopologyData} />
+              <img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
             </div>
             <div className="net-topo-refresh">
-              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新"  onClick={this.refreshTopologyData} />
+              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
             </div>
           </div>
-          <div className="net-topo-content" style={{height: pamsDisplay ? 'calc(100% - 342px)' : 'calc(100% - 42px) ',overflow: 'auto'}}>
-            <TopologyComponent
-              topologyData={topologyData}
-              nodeChange={this.nodeChange}
-              nodeSelectionChanged={this.nodeSelectionChanged}
-            />
+          <div className="net-topo-content" style={{ height: pamsDisplay ? 'calc(100% - 342px)' : 'calc(100% - 42px) ' }}>
+            <TopologyComponent topologyData={topologyData} nodeChange={this.nodeChange} nodeSelectionChanged={this.nodeSelectionChanged} />
           </div>
-          {
-            pamsDisplay ? this.renderPamsTable() : null
-          }
+          {pamsDisplay ? this.renderPamsTable() : null}
         </div>
       </div>
     );
   }
 }
 
-NetTopology.propTypes = {
-
-};
+NetTopology.propTypes = {};
 
 export default NetTopology;