Merge branch 'develop_20200601' into 'master'

amos.config.js

@@ -8,18 +8,25 @@
     // 普通http
     httpURI: {
       // 根url
-      baseURI: 'http://172.16.10.101:10005/',
+      baseURI: 'http://172.16.11.20:10005/',
+      // patrolURI: 'http://172.16.10.91:8082/',
+      //巡检服务
+      //patrolURI: 'http://172.16.11.20:9000/',
 
-      liveVideoHost: '172.16.10.101:8088',
+      //视频h5s地址
+      liveVideoHost: '172.16.11.20:8201',
+
+      //报警监控
+      //monitorURI: 'http://172.16.11.20:9007/',
 
       // 安全模块api地址
-      securityBaseURI: 'http://172.16.10.175:10005/',
+      securityBaseURI: 'http://172.16.10.72:10005/',
 
       //picURI为地图瓦片服务器地址
       picURI: 'http://172.16.3.121:8001/',
-      loginURI: 'http://172.16.10.175/',//基础平台
+      loginURI: 'http://172.16.10.72',//基础平台
       //巡检图片
-      patrolURI: 'http://172.16.10.101:9999/',
+      patrolURI: 'http://172.16.11.20:9999/',
 
       // 斜影路径
       tileURI: '',
@@ -31,19 +38,18 @@
     },
     // websocket 地址
     wsURI: {
-      baseURI: 'ws://172.16.10.101:10600/',
-      rulesConfigURI: 'ws://172.16.10.101:8080/',
-      securityBaseURI: 'ws://172.16.10.101:10600/',
-      viewTileURI: '',//卫星图消息
-      //mqtt消息接受地址
-      mqttURI: 'ws://172.16.10.101:8083/mqtt'
+      baseURI: 'ws://172.16.11.20:10600/',
+      rulesConfigURI: 'ws://172.16.11.20:8080/',
+      securityBaseURI: 'ws://172.16.11.20:10600/',
+      viewTileURI: '',//卫星图消息 //mqtt消息接受地址
+      mqttURI: 'ws://172.16.11.20:8083/mqtt'
     },
     // 外部链接地址
     outterURI: {
       xunjian: '',
       // xunjian: 'http://172.16.10.74:3003/outter?user={userId}&token={token}'
       // 管控模型
-      mgtCtrlModel: 'http://172.16.10.101:8080',//规则配置
+      mgtCtrlModel: 'http://172.16.11.20:8080',//规则配置
       activitiURI: '',//工作流
       // activitiURI: 'http://172.16.3.79:8090'
       videoUrl: ''//视频
@@ -55,7 +61,7 @@
       isAutoOpenBussiness: true,
       //内外部地图加载，outMap是true 使用离线地图， false使用在线地图
       outMap: true,
-      evaluateModelId: 11
+      evaluateModelId: 11 //配置评价方法ID
     },
     //添加关联设备弹出框标识  'bank'代表银行   'fireAutoSys'代表换流站
     equipmentIdentification: 'bank',
@@ -90,10 +96,9 @@
       'mapItem-19': -1
     },
     //地图中心点
-    //mapCenter: [110.81359,35.41143],
-    mapCenter: [108.95141,35.91909],
+    mapCenter: [108.90771484,35.93184115],
     //地图zoom显示级别
-    showZoom: [6,13,18]
+    showZoom: [7,13,18]
   };
 
   // 配置日志系统
@@ -119,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

@@ -137,17 +137,24 @@ export const FscSerUrl = {
   impEquWarnListUrl: completePrefix(baseURI, 'bank/equipment/warnList?sourceId={sourceId}&pageNumber={pageNumber}&pageSize={pageSize}'),//查询装备告警列表
   impEquInterfaceUrl: completePrefix(baseURI, 'bank/equipment/netwoerkInterface?id={id}'),//查询网络接口
   dynamicRingDataUrl: completePrefix(baseURI, 'bank/dynamicRingData/{id}'),//查询动环接口
+  pointItemPatroltaUrl: completePrefix(baseURI, 'bank/equipment/pointItemPatrol?factorId={factorId}'),
+  pointItemDevicetaUrl: completePrefix(baseURI, 'bank/equipment/pointItemEquipment?factorId={factorId}'),
+  pointItemAllUrl: completePrefix(baseURI, 'bank/equipment/getPointItemDatas?factorId={factorId}'),
 
   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'),
 
-  middleHeaderAction1:completePrefix(baseURI, 'bank/inspection/patrolPlanList?start={start}&end={end}&deptId={depId}&deptName={deptName}'),
+  //值班信息模块
+  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'),
   //*******************************************************************************
@@ -384,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 = {
@@ -506,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 }));
 };
 /**
  * 查询主页支付累计数据
@@ -294,3 +296,25 @@ export const BottomTableAction = ( ) => {
 export const middleHeaderAction1 = (start, end,depId,deptName ) => {
   return commonGet(formatUrl(FscSerUrl.middleHeaderAction1,{ start, end , depId, deptName }));
 };
+
+
+export const getporintAction = (pointid ) => {
+  return commonGet(formatUrl(FscSerUrl.getporintAction,{ pointid }));
+};
+
+
+export const queryPatrolPointDatas = (factorId) => {
+  // return commonGet(formatUrl(DeviceURI.dynamicRingDataUrl, { id }));
+  return commonGet(formatUrl(FscSerUrl.pointItemPatroltaUrl, { factorId }));
+};
+
+export const queryDevicePointDatas = (factorId) => {
+  // return commonGet(formatUrl(DeviceURI.dynamicRingDataUrl, { id }));
+  return commonGet(formatUrl(FscSerUrl.pointItemDevicetaUrl, { factorId }));
+};
+
+
+export const queryPointItemAllDatas = (factorId) => {
+  // return commonGet(formatUrl(DeviceURI.dynamicRingDataUrl, { id }));
+  return commonGet(formatUrl(FscSerUrl.pointItemAllUrl, { factorId }));
+};

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/indexCharts.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+
 .content-body-2d {
+  display: flex;
+  display: -webkit-flex;
   width: 100%;
   height: 100%;
   background: #d7e7fb !important;
@@ -7,28 +18,38 @@
     .AlarmMarquee-top-news {
       top: 7rem;
     }
+
     .body-left {
       top: 7rem;
+      font-size: 16px;
     }
+
     .body-second {
       top: 7rem;
     }
+
     .body-right {
       top: 7rem;
+      font-size: 16px;
     }
   }
+
   .content {
     width: 100%;
     height: 100%;
     color: #fff;
+
     .body-left {
       position: absolute;
+      // @media screen and (min-width: 1280px) and (max-width: 1366px) {
+      //   position: fixed;
+      // }
       top: 0;
       //right: 47px;
       left: 10px;
       z-index: 200;
-      padding: 5px 0;
       width: 22%;
+      padding: 5px 0;
       // height: 100%;
       > div {
         width: 100%;
@@ -36,170 +57,310 @@
         text-align: right;
         // background: url('/src/assets/bg/indexRight.png') no-repeat center center/100% 100%;
         img {
-          height: 100%;
           width: 100%;
+          height: 100%;
         }
       }
+
+      .point {
+        padding-top:130px;
+      }
+
       .dangerNums {
-        margin-bottom: 5px;
+        margin-bottom: -12px;
         // height: 15%;
 
         .item {
-          width: 25%;
           // border-left: 1px solid #fff;
           float: left;
+          width: 25%;
+          height: 90%;
+          padding: 8px 0;
           // background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
           background: rgba(23, 90, 201, 0.9);
           box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
-          height: 100%;
-          padding: 8px 0;
+
           .itemValue {
-            font-size: 17px;
-            color: #f70500;
             height: 45%;
             margin-bottom: 10px;
+            font-size: 17px;
+            color: #f70500;
           }
+
           &:nth-child(1) {
             .itemContent {
               border-left: none;
             }
           }
+
           &:nth-child(1) {
             .itemValue {
               color: #f70500;
             }
           }
+
           &:nth-child(2) {
             .itemValue {
               color: #ff8000;
             }
           }
+
           &:nth-child(3) {
             .itemValue {
               color: #f1f10c;
             }
           }
+
           &:nth-child(4) {
             .itemValue {
               color: #06c3ff;
             }
           }
+
           .itemContent {
-            border-left: 1px solid rgba(151, 180, 226, 0.5);
+            display: flex;
             width: 100%;
             height: 100%;
-            display: flex;
+            border-left: 1px solid rgba(151, 180, 226, 0.5);
             justify-content: center;
             flex-direction: column;
             align-items: center;
           }
         }
       }
+
       .alarmNums {
         height: 15%;
+        padding-top: 2px;
+        margin-bottom: -8px;
 
         .item {
-          width: 25%;
           // border-left: 1px solid #fff;
           float: left;
+          width: 25%;
+          height: 90%;
+          padding: 8px 0;
           // background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
           background: rgba(23, 90, 201, 0.9);
           box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
-          height: 100%;
-          padding: 8px 0;
+
           .itemValue {
-            font-size: 17px;
-            color: #f70500;
             height: 45%;
             margin-bottom: 10px;
+            font-size: 17px;
+            color: #f70500;
           }
+
           &:nth-child(1) {
             .itemContent {
               border-left: none;
             }
           }
+
           &:nth-child(1) {
             .itemValue {
               color: #f70500;
             }
           }
+
           &:nth-child(2) {
             .itemValue {
               color: #ff8000;
             }
           }
+
           &:nth-child(3) {
             .itemValue {
               color: #f1f10c;
             }
           }
+
           &:nth-child(4) {
             .itemValue {
               color: #06c3ff;
             }
           }
+
           .itemContent {
-            border-left: 1px solid rgba(151, 180, 226, 0.5);
+            display: flex;
             width: 100%;
             height: 100%;
-            display: flex;
+            border-left: 1px solid rgba(151, 180, 226, 0.5);
             justify-content: center;
             flex-direction: column;
             align-items: center;
           }
         }
       }
+
+      .alarmLineChart {
+        height: 23rem;
+        background: transparent;
+        background-color: #2965ca;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+      }
+
       .equipmentdata {
-        height: 22%;
+        height: 161px;
+
+        .equipmentdiv {
+          font-size: 13px;
+
+          .quarter-div {
+            float: left;
+            width: 50%;
+            height: 10em;
+            padding-top: 7px;
+            background-color: rgba(23, 90, 201, 0.9);
+          }
+
+          .top-left {
+            border-right: 1px solid white;
+            border-bottom: 1px solid white;
+          }
+
+          .top-right {
+            border-bottom: 1px solid white;
+          }
+
+          .down-left {
+            border-right: 1px solid white;
+          }
+
+          .dh-title {
+            padding: 0.2em 0.8em;
+            font-size: 15px;
+            text-align: left;
+          }
+
+          .xf-title {
+            padding: 0.2em 0.8em;
+            font-size: 15px;
+            text-align: left;
+          }
+
+          .dh-content {
+            width: 100%;
+            height: calc(100% - 1.8em);
+          }
+
+          .dh-icon {
+            display: inline-block;
+            width: 30px;
+            height: 70%;
+            text-align: center;
+            vertical-align: top;
+          }
+
+          .dh-values {
+            display: inline-block;
+            width: calc(100% - 70px);
+            height: 100%;
+            padding-left: 15px;
+            text-align: left;
+
+            .dh-values-item {
+              display: inline-block;
+              padding: 4px;
+              font-size: 14px;
+            }
+          }
+
+          .xf-values {
+            // text-align: center;
+          }
+
+          .xf-citys {
+            // margin-right: 0.5em;
+          }
+
+          .xf-city-values {
+            margin-right: 2em;
+            font-size: 14px;
+          }
+
+          .xf-yc-values {
+            margin-right: 2em;
+            font-size: 14px;
+            color: red;
+          }
+
+          .dh-img {
+            width: 25px;
+            object-fit: contain;
+          }
+          // .blue{
+          //    text-align: left;
+          //    .temperature {
+          //     display: inline-block;
+          //     height: 30px;
+          //     width: 30px;
+          //     vertical-align: middle;
+          //     margin-left: 20%;
+          //    }
+
+          // }
+        }
+
         .item {
-          width: 33.333%;
-          border-left: 1px solid #fff;
           float: left;
+          width: 33.333%;
+          height: 100%;
           // background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
           background: rgba(23, 90, 201, 0.9);
+          border-left: 1px solid #fff;
           box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
-          height: 100%;
+
           .chartBox {
             height: 60%;
           }
+
           .chartDesc {
-            height: 40%;
             display: flex;
+            height: 40%;
+            color: #fff;
             justify-content: center;
             flex-direction: column;
             align-items: center;
-            color: #fff;
+
             span {
               line-height: 20px;
             }
+
             .itemIcon {
               display: inline-block;
-              height: 20px;
               width: 20px;
+              height: 20px;
               vertical-align: top;
             }
           }
         }
       }
+
       .rangeData {
         height: 47%;
+
         .item {
           width: 100%;
+          height: 50%;
           margin-bottom: 1px;
           // border-bottom: 1px solid #fff;
           // float: left;
           // background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
           background: rgba(23, 90, 201, 0.9);
           box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
-          height: 50%;
+
           .chartBox {
             height: 85%;
           }
+
           .chartDesc {
             height: 15%;
             min-height: 25px;
-            text-align: center;
             color: #fff;
+            text-align: center;
+
             span {
               line-height: 24px;
             }
@@ -256,33 +417,52 @@
       //     }
       // }
       .business {
-        padding-top: 5px;
         height: 44%;
+        padding-top: 5px;
+
         .chartBody {
           // height: 300px;
         }
+
         .table-bottom {
-          // height: 100%;
-          width: 100%;
           // margin-top: 2px;
           // padding: 10px 20px;
           float: left;
+          // height: 100%;
+          width: 100%;
 
           .business-table {
             // height: 25%;
             //padding: 15px 10px;
             padding: 0 10px;
+            //padding-bottom: 25px;
+            padding-bottom: 10px;
+            margin-bottom: 1px;
             color: #fff;
             text-align: initial;
-            margin-bottom: 1px;
             background: rgba(23, 90, 201, 0.9);
-            //padding-bottom: 25px;
-            padding-bottom: 10px;
+
             > div {
-              height: 30px;
+              @media screen and (min-width: 1280px) and (max-width: 1366px) {
+                height: 15px;
+              }
+
+              @media screen and (min-width: 1367px) and (max-width: 1680px) {
                 line-height: 30px;
-              text-align: center;
+              }
+
+              @media screen and (min-width: 1681px) and (max-width: 1980px) {
+                height: 50px;
+                line-height: 60px;
+              }
+
+              @media screen and (min-width: 1981px) {
+                height: 80px;
+                line-height: 70px;
+              }
+
               margin-bottom: 2px;
+              text-align: center;
             }
 
             .business-table-header {
@@ -293,20 +473,20 @@
             > table {
               width: 100%;
               text-align: center;
-              border-collapse: collapse;
               border: 1px solid #42bee1;
+              border-collapse: collapse;
               table-layout: fixed;
-              > tbody{
 
+              > tbody {
                 > tr {
                   > td {
-                    border-collapse: collapse;
-                    border: 1px solid #42bee1;
                     height: 29px;
+                    overflow: hidden;
                     line-height: 29px;
-                    white-space: nowrap;
                     text-overflow: ellipsis;
-                    overflow: hidden;
+                    white-space: nowrap;
+                    border: 1px solid #42bee1;
+                    border-collapse: collapse;
                   }
                 }
               }
@@ -328,45 +508,45 @@
       .top {
         width: 135px;
         height: 40px;
+        font-size: 14;
+        text-align: center;
         background: rgba(255, 255, 255, 1);
         border: 1px solid rgba(234, 234, 234, 1);
-        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-        opacity: 1;
         border-radius: 20px;
-        text-align: center;
-        font-size: 14;
+        opacity: 1;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
 
         .small-card-wrapper {
           height: 100%;
-          text-align: center;
           font-size: 14px;
+          text-align: center;
 
           .small-card-css {
-            height: 100%;
-            background: linear-gradient(#dfdfdfff, #ffffffff);
             width: 55px;
+            height: 100%;
             height: 28px;
-            text-align: center;
-            border-radius: 20px;
+            padding-top: 3px;
             margin-top: 5px;
             margin-left: 6px;
             color: #1f72f9;
-            padding-top: 3px;
+            text-align: center;
             cursor: pointer;
+            background: linear-gradient(#dfdfdfff, #ffff);
+            border-radius: 20px;
           }
 
           .small-card-css-selected {
-            height: 100%;
-            background: linear-gradient(#9ee4ffff, #389ec5ff);
             width: 55px;
+            height: 100%;
             height: 28px;
-            text-align: center;
-            border-radius: 20px;
+            padding-top: 3px;
             margin-top: 5px;
-            color: white;
             margin-left: 6px;
-            padding-top: 3px;
+            color: white;
+            text-align: center;
             cursor: pointer;
+            background: linear-gradient(#9ee4ffff, #389ec5ff);
+            border-radius: 20px;
           }
 
           // .small-card-css {
@@ -402,61 +582,63 @@
       }
 
       .middle {
-        margin-top: 10px;
         width: 100%;
         height: 45px;
+        margin-top: 10px;
 
         //复位样式
         .fw-css {
           display: inline-block;
           width: 40px;
           height: 40px;
-          background: rgba(255, 255, 255, 1);
-          border: 1px solid rgba(234, 234, 234, 1);
-          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-          border-radius: 9px 0px 0px 9px;
           text-align: center;
           cursor: pointer;
+          background: rgba(255, 255, 255, 1);
+          border: 1px solid rgba(234, 234, 234, 1);
+          border-radius: 9px 0 0 9px;
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
         }
+
         .bottom {
           position: relative;
-          height: 30px;
           width: 120px;
+          height: 30px;
         }
+
         .fw-css-selected {
           display: inline-block;
           width: 40px;
           height: 40px;
-          background: rgba(52, 95, 166, 1);
-          border: 1px solid rgba(234, 234, 234, 1);
-          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-          border-radius: 9px 0px 0px 9px;
           text-align: center;
           cursor: pointer;
+          background: rgba(52, 95, 166, 1);
+          border: 1px solid rgba(234, 234, 234, 1);
+          border-radius: 9px 0 0 9px;
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
         }
 
         .track-css {
           display: inline-block;
           width: 40px;
           height: 40px;
-          background: rgba(255, 255, 255, 1);
-          border: 1px solid rgba(234, 234, 234, 1);
-          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-          border-radius: 0px 9px 9px 0px;
           text-align: center;
           cursor: pointer;
+          background: rgba(255, 255, 255, 1);
+          border: 1px solid rgba(234, 234, 234, 1);
+          border-radius: 0 9px 9px 0;
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
         }
 
         .track-css-selected {
           display: inline-block;
           width: 40px;
           height: 40px;
-          background: rgba(52, 95, 166, 1);
-          border: 1px solid rgba(234, 234, 234, 1);
-          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-          border-radius: 0px 9px 9px 0px;
           text-align: center;
           cursor: pointer;
+          background: rgba(52, 95, 166, 1);
+          border: 1px solid rgba(234, 234, 234, 1);
+          border-radius: 0 9px 9px 0;
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
         }
 
         img {
@@ -470,13 +652,13 @@
       bottom: 20px;
       left: 24%;
       z-index: 1;
-      width: 120px;
-      height: 180px;
+      width: 150px;
+      height: 90px;
       padding-top: 10px;
       padding-left: 10px;
+      background: white;
       border: 1px solid #eaeaea;
       border-radius: 5px;
-      background: white;
 
       .indexMap-bottom-one {
         float: left;
@@ -486,10 +668,10 @@
       }
 
       .indexMap-bottom-two {
-        width: 80px;
+        width: 97px;
         height: 20px;
         margin-top: 3px;
-        margin-left: 40px;
+        margin-left: 31px;
         color: black;
       }
     }
@@ -499,6 +681,7 @@
       float: left;
       width: 100%;
       height: 100%;
+      font-size: 15px;
 
       .after_line_small {
         margin-top: 25px;
@@ -510,10 +693,12 @@
         .line1 {
           margin-top: 15px;
         }
+
         .line4 {
-          margin-left: -3px;
           margin-top: 15px;
+          margin-left: -3px;
         }
+
         .line6 {
           margin-top: 15px;
         }
@@ -527,12 +712,12 @@
         //color: white;
         color: white;
 
-        .xian{
-          width: 100px;
-          height: 50px;
+        .xian {
+          width: 150px;
+          height: 100px;
           background-color: #f50000;
 
-          .xian-line{
+          .xian-line {
             width: 1px;
             height: 50px;
             background-color: #f50000;
@@ -541,41 +726,42 @@
           }
         }
 
-        .xianyang{
+        .xianyang {
+          bottom: 70px;
+          left: -160px;
           width: 100px;
           height: 22px;
-          left: -160px;
-          bottom: 70px;
 
-          .xianyang-line{
+          .xianyang-line {
+            position: absolute;
             width: 1px;
-            height: 130px;
-            margin-left: 142px;
-            -webkit-transform: rotate(135deg);
-            -moz-transform: rotate(-45deg);
+            height: 150px;
+            margin-top: 1px;
+            margin-left: 138px;
+            -webkit-transform: rotate(145deg);
           }
 
           span {
             position: absolute;
-            margin-left: -50px;
             margin-top: 2px;
+            margin-left: -50px;
           }
         }
       }
 
       .after_circle_title {
         width: 80px;
-        background-color: rgba(23,90,201,0.9);
-        color: white;
         margin-top: -45px;
         margin-left: -30px;
-        border-radius: 7px;
+        color: white;
         text-align: center;
+        background-color: rgba(23, 90, 201, 0.9);
+        border-radius: 7px;
 
-        .pulse-spread-circle{
+        .pulse-spread-circle {
           position: absolute;
-          right: 17px;
           top: -9px;
+          right: 17px;
           width: 40px;
           height: 40px;
           border: 3px solid red;
@@ -587,18 +773,18 @@
         }
       }
 
-      .after_circle_title_center{
+      .after_circle_title_center {
         width: 80px;
-        background-color: rgba(23,90,201,0.9);
-        color: white;
         margin-left: -30px;
-        border-radius: 7px;
+        color: white;
         text-align: center;
+        background-color: rgba(23, 90, 201, 0.9);
+        border-radius: 7px;
 
         .pulse-spread-xian {
           position: absolute;
-          right: 22px;
           top: 12px;
+          right: 22px;
           width: 40px;
           height: 40px;
           border: 3px solid red;
@@ -611,8 +797,8 @@
 
         .pulse-spread-xianyang {
           position: absolute;
-          left: -12px;
           top: 10px;
+          left: -12px;
           width: 40px;
           height: 40px;
           border: 3px solid red;
@@ -624,87 +810,90 @@
         }
       }
 
-      .xian{
+      .xian {
         position: absolute;
-        width: 100px;
-        height: 22px;
-        top: -68px;
-        left: 28px;
-
-        .xian-line{
+        top: -199px;
+        left: 274px;
+        width: 122px;
+        height: 36px;
+        font-size: 21px;
+        .xian-line {
           position: absolute;
           width: 1px;
-          height: 90px;
-          margin-top: 15px;
-          margin-left: -10px;
-          -webkit-transform: rotate(195deg);
+          height: 342px;
+          margin-top: -41px;
+          margin-left: -130px;
+          -webkit-transform: rotate(234deg);
         }
 
         span {
           position: absolute;
-          margin-top: 1px;
-          margin-left: 30px;
+          margin-left: 22px;
           cursor: pointer;
         }
 
         .pulse-spread-circular {
           position: absolute;
-          top: 78px;
-          left: -40px;
-          width: 40px;
-          height: 40px;
+          top: -8px;
+          left: -11px;
+          z-index: 1;
+          width: 140px;
+          height: 50px;
+          cursor: pointer;
           border: 3px solid red;
-          border-radius: 50%;
+          border-width: 15px;
           opacity: 0;
-          box-shadow: 1px 1px 20px 5px red;
+          box-shadow: 1px 1px 30px 8px red;
+          -webkit-animation: pulseAnim 1.5s ease-out;
           animation: pulseAnim 1.5s ease-out;
+          -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
+          top: -7px;
           left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          z-index: 1;
+          width: 122px;
+          height: 50px;
+          cursor: pointer;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
-          cursor: pointer;
         }
       }
 
-      .xianyang{
+      .xianyang {
         position: absolute;
-        width: 100px;
-        height: 22px;
-        top: -70px;
-        left: -135px;
+        top: -189px;
+        left: -331px;
+        width: 122px;
+        height: 35px;
+        font-size: 21px;
 
-        .xianyang-line{
+        .xianyang-line {
           position: absolute;
           width: 1px;
-          height: 90px;
-          margin-top: 12px;
-          margin-left: 122px;
-          -webkit-transform: rotate(150deg);
+          height: 300px;
+          margin-top: -26px;
+          margin-left: 228px;
+          -webkit-transform: rotate(130deg);
         }
 
         span {
           position: absolute;
-          margin-top: 1px;
-          margin-left: 30px;
+          margin-left: 22px;
           cursor: pointer;
         }
 
         .pulse-spread-circular {
           position: absolute;
-          top: 80px;
-          left: 122px;
+          top: 200px;
+          left: 337px;
           width: 40px;
           height: 40px;
           border: 3px solid red;
@@ -715,461 +904,404 @@
           animation-iteration-count: infinite;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
+          top: -7px;
           left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          z-index: 1;
+          width: 122px;
+          height: 50px;
+          cursor: pointer;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
-          cursor: pointer;
         }
       }
 
-      .xidajie{
+      .xidajie {
         position: absolute;
-        width: 100px;
-        height: 22px;
-        top: -11px;
-        left: 90px;
+        top: -31px;
+        left: 316px;
+        width: 153px;
+        height: 35px;
+        font-size: 21px;
 
-        .xidajie-line{
+        .xidajie-line {
           position: absolute;
           width: 1px;
-          height: 90px;
-          margin-top: -14px;
-          margin-left: -40px;
-          -webkit-transform: rotate(75deg);
+          height: 320px;
+          margin-top: -113px;
+          margin-left: -146px;
+          -webkit-transform: rotate(85deg);
         }
 
         span {
           position: absolute;
-          margin-top: 1px;
-          margin-left: 16px;
+          margin-left: 14px;
           cursor: pointer;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
-          left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          top: -17px;
+          left: -32px;
+          z-index: 1;
+          width: 214px;
+          height: 65px;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
         }
       }
 
-      .xian-bank{
+      .xian-bank {
         position: absolute;
-        width: 100px;
-        height: 22px;
-        left: 40px;
-        top: 95px;
+        top: 263px;
+        left: 136px;
+        width: 122px;
+        height: 35px;
+        font-size: 21px;
 
-        .xian-bank-line{
+        .xian-bank-line {
           position: absolute;
           width: 1px;
-          height: 90px;
-          margin-top: -70px;
-          margin-left: -15px;
-          -webkit-transform: rotate(160deg);
+          height: 300px;
+          margin-top: -263px;
+          margin-left: -60px;
+          -webkit-transform: rotate(152deg);
         }
 
         span {
           position: absolute;
-          margin-top: 1px;
-          margin-left: 30px;
+          margin-left: 22px;
+          cursor: pointer;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
+          top: -7px;
           left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          z-index: 1;
+          width: 122px;
+          height: 50px;
+          cursor: pointer;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
         }
       }
 
-      .snxs-bank{
+      .snxs-bank {
         position: absolute;
-        width: 100px;
-        height: 22px;
-        top: 55px;
-        left: 85px;
-
-        .snxs-bank-line{
+        top: 124px;
+        left: 250px;
+        width: 122px;
+        height: 35px;
+        font-size: 21px;
+        .snxs-bank-line {
           position: absolute;
           width: 1px;
-          height: 90px;
-          margin-top: -45px;
-          margin-left: -35px;
-          -webkit-transform: rotate(120deg);
+          height: 260px;
+          margin-top: -177px;
+          margin-left: -121px;
+          -webkit-transform: rotate(112deg);
         }
 
         span {
           position: absolute;
-          margin-left: 30px;
-          margin-top: 1px;
+          margin-left: 22px;
+          cursor: pointer;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
+          top: -7px;
           left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          z-index: 1;
+          width: 122px;
+          height: 50px;
+          cursor: pointer;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
         }
       }
 
-      .jszx-bank{
+      .jszx-bank {
         position: absolute;
-        width: 100px;
-        height: 22px;
         top: -25px;
-        left: -175px;
-        // top: 87px;
-        // left: -135px;
+        left: -440px;
+        width: 140px;
+        height: 35px;
+        font-size: 21px;
 
-        .jszx-bank-line{
+        .jszx-bank-line {
           position: absolute;
           width: 1px;
-          // height: 90px;
-          // margin-top: -62px;
-          // margin-left: 120px;
-          // -webkit-transform: rotate(30deg);
-          height: 100px;
-          margin-top: -12px;
-          margin-left: 145px;
-          -webkit-transform: rotate(110deg);
+          height: 320px;
+          margin-top: -112px;
+          margin-left: 283px;
+          -webkit-transform: rotate(95deg);
         }
 
         span {
           position: absolute;
-          margin-top: 1px;
-          margin-left: 16px;
+          margin-left: 7px;
+          cursor: pointer;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
+          top: -7px;
           left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          z-index: 1;
+          width: 122px;
+          height: 50px;
+          cursor: pointer;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
         }
       }
 
-      .ch-an-bank{
+      .ch-an-bank {
         position: absolute;
-        width: 100px;
-        height: 22px;
-        top: 80px;
-        left: -150px;
-        // top: 40px;
-        // left: -175px;
+        top: 263px;
+        left: -201px;
+        width: 122px;
+        height: 35px;
+        font-size: 21px;
 
-        .ch-an-bank-line{
+        .ch-an-bank-line {
           position: absolute;
           width: 1px;
-          // height: 90px;
-          // margin-top: -40px;
-          // margin-left: 140px;
-          // -webkit-transform: rotate(70deg);
-          height: 100px;
-          margin-top: -67px;
-          margin-left: 131px;
-          -webkit-transform: rotate(40deg);
+          height: 280px;
+          margin-top: -254px;
+          margin-left: 163px;
+          -webkit-transform: rotate(20deg);
         }
 
         span {
           position: absolute;
-          margin-top: 1px;
-          margin-left: 30px;
+          margin-left: 22px;
+          cursor: pointer;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
+          top: -7px;
           left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          z-index: 1;
+          width: 122px;
+          height: 50px;
+          cursor: pointer;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
         }
       }
 
-      .qn-bank{
+      .qn-bank {
         position: absolute;
-        width: 100px;
-        height: 22px;
-        top: 35px;
-        left: -180px;
-        // top: -17px;
-        // left: -190px;
+        top: 124px;
+        left: -426px;
+        width: 122px;
+        height: 35px;
+        font-size: 21px;
 
-        .qn-bank-line{
+        .qn-bank-line {
           position: absolute;
           width: 1px;
-          height: 100px;
-          margin-top: -42px;
-          margin-left: 146px;
-          -webkit-transform: rotate(75deg);
-          // height: 110px;
-          // margin-top: -20px;
-          // margin-left: 150px;
-          // -webkit-transform: rotate(105deg);
+          height: 350px;
+          margin-top: -218px;
+          margin-left: 275px;
+          -webkit-transform: rotate(74deg);
         }
 
         span {
           position: absolute;
-          margin-top: 1px;
-          margin-left: 30px;
+          margin-left: 22px;
+          cursor: pointer;
         }
 
-        .pulse-spread-div{
+        .pulse-spread-div {
           position: absolute;
+          top: -7px;
           left: -5px;
-          top: -3px;
-          width: 110px;
-          height: 30px;
+          z-index: 1;
+          width: 122px;
+          height: 50px;
+
+
+
+          cursor: pointer;
           border: 3px solid red;
-          opacity: 0;
           border-width: 15px;
+          opacity: 0;
           box-shadow: 1px 1px 30px 8px red;
           animation: pulseAnim 1.5s ease-out;
           animation-iteration-count: infinite;
-          z-index: 1;
         }
       }
 
       .title1 {
         position: absolute;
-        width: 150px;
         bottom: 10px;
         left: 10px;
+        width: 150px;
+
         span {
           position: absolute;
           width: 50px;
-          margin-left: -80px;
           margin-top: 8px;
+          margin-left: -80px;
         }
       }
+
       .title2 {
         position: absolute;
-        width: 150px;
         bottom: 10px;
         left: 10px;
+        width: 150px;
+
         span {
           position: absolute;
           width: 50px;
-          margin-left: -80px;
           margin-top: 8px;
+          margin-left: -80px;
         }
       }
+
       .title3 {
         position: absolute;
-        width: 150px;
         bottom: 10px;
         left: 10px;
+        width: 150px;
+
         span {
           position: absolute;
           width: 50px;
-          margin-left: -80px;
           margin-top: 8px;
+          margin-left: -80px;
         }
       }
+
       .title4 {
         position: absolute;
-        width: 270px;
+        right: 0;
         bottom: 15px;
-        right: 0px;
+        width: 270px;
+
         span {
           position: absolute;
-          margin-left: -225px;
           margin-top: 8px;
+          margin-left: -225px;
         }
       }
+
       .title5 {
         position: absolute;
-        width: 160px;
         top: 10px;
         right: 7px;
+        width: 160px;
+
         span {
           position: absolute;
-          margin-left: -120px;
           margin-top: 47px;
+          margin-left: -120px;
         }
       }
+
       .title6 {
         position: absolute;
-        width: 249px;
         bottom: 15px;
         left: 13px;
+        width: 249px;
+
         span {
           position: absolute;
-          margin-left: -93px;
           margin-top: 8px;
+          margin-left: -93px;
         }
       }
-      // .xian {
-      //   position: absolute;
-      //   width: 270px;
-      //   top: 30px;
-      //   left: 5px;
-      //   span {
-      //     position: absolute;
-      //     width: 100px;
-      //     margin-top: 40px;
-      //     margin-left: -85px;
-      //     cursor: pointer;
-      //   }
-      //   .pulse-spread-xian {
-      //     position: absolute;
-      //     top: -25px;
-      //     left: -20px;
-      //     width: 50px;
-      //     height: 50px;
-      //     border: 3px solid red;
-      //     border-radius: 50%;
-      //     opacity: 0;
-      //     box-shadow: 1px 1px 20px 5px red;
-      //     animation: pulseAnim 1.5s ease-out;
-      //     animation-iteration-count: infinite;
-      //   }
-      // }
       .title8 {
         position: absolute;
-        width: 300px;
-        bottom: 10px;
         right: -5px;
+        bottom: 10px;
+        width: 300px;
+
         span {
           position: absolute;
-          margin-left: -252px;
           margin-top: 8px;
+          margin-left: -252px;
         }
       }
+
       .title9 {
         position: absolute;
-        width: 160px;
+        right: 0;
         bottom: 15px;
-        right: 0px;
+        width: 160px;
+
         span {
           position: absolute;
-          margin-left: -115px;
           margin-top: 8px;
+          margin-left: -115px;
         }
       }
-      // .xianyang {
-      //   position: absolute;
-      //   width: 175px;
-      //   right: -8px;
-      //   bottom: -27px;
-      //   span {
-      //     position: absolute;
-      //     width: 70px;
-      //     margin-top: 8px;
-      //     margin-left: -145px;
-      //     cursor: pointer;
-      //   }
-      //   .pulse-spread-xianyang {
-      //     position: absolute;
-      //     right: -20px;
-      //     top: 93px;
-      //     width: 40px;
-      //     height: 40px;
-      //     border: 3px solid red;
-      //     border-radius: 50%;
-      //     opacity: 0;
-      //     box-shadow: 1px 1px 20px 5px red;
-      //     animation: pulseAnim 1.5s ease-out;
-      //     animation-iteration-count: infinite;
-      //   }
-      // }
 
       .pulse-spread-name-xian {
         position: absolute;
+        top: -70px;
         //left: 152px;
         //top: 62px;
         left: 20px;
-        top: -70px;
+        z-index: 1;
         width: 110px;
         height: 30px;
+        cursor: pointer;
         border: 3px solid #5c04fc;
-        opacity: 0;
         border-width: 15px;
+        opacity: 0;
         box-shadow: 1px 1px 30px 8px red;
         animation: pulseAnim 1.5s ease-out;
         animation-iteration-count: infinite;
-        z-index: 1;
-        cursor: pointer;
       }
 
       .pulse-spread-name-xianyang {
         position: absolute;
         right: 75px;
         bottom: 72px;
+        z-index: 1;
         width: 110px;
         height: 30px;
+        cursor: pointer;
         border: 3px solid #5c04fc;
-        opacity: 0;
         border-width: 15px;
+        opacity: 0;
         box-shadow: 1px 1px 30px 8px red;
         animation: pulseAnim 1.5s ease-out;
         animation-iteration-count: infinite;
-        z-index: 1;
-        cursor: pointer;
       }
 
-      // .xidajie {
-      //   position: absolute;
-      //   width: 270px;
-      //   top: 18px;
-      //   left: 10px;
-      //   span {
-      //     position: absolute;
-      //     margin-top: 7px;
-      //     margin-left: -95px;
-      //     cursor: pointer;
-      //   }
-      // }
-
       .after_circle_center {
         position: absolute;
         width: 20px;
@@ -1218,16 +1350,28 @@
     .amap-container {
       //background: url('/src/assets/bg/indexBG.png') !important;
       background: #d7e7fb !important;
+
+      .amap-logo {
+        display: none;
+      }
+
+      .amap-controls {
+        display: none;
+      }
+
+      .amap-copyright {
+        opacity: 0;
+      }
     }
 
     .body-right {
-      z-index: 200;
       position: absolute;
       top: 0;
       //right: 47px;
       right: 10px;
-      padding: 5px 0;
+      z-index: 200;
       width: 22%;
+      padding: 5px 0;
       // height: 100%;
       > div {
         width: 100%;
@@ -1239,91 +1383,136 @@
           vertical-align: middle;
         }
       }
+
       .patrolMsg {
         height: 100%;
       }
 
       .point {
-        // height: 50%;
-        margin-bottom: 5px;
+        height: 50%;
+        font-size: 16px;
+
         .chartBody {
-          //height: 420px;
-          height: 390px;
+          height: 460px;
+
+          @media screen and (min-width: 1280px) and (max-width: 1366px) {
+            height: 300px;
+          }
         }
 
         .left-chart-top {
           width: 100%;
-          height: 99%;
+          height:110%;
 
-          .left-chart-child {
+          .left-chart-child-patrol {
+            float: left;
             width: 100%;
+            height: 55%;
+            margin-bottom: 2px;
+            background: rgba(23, 90, 201, 0.9);
+          }
+
+          .left-chart-child {
             float: left;
-            height: 50%;
-            // margin-right: 2px;
-            // margin-top: 2px;
-            margin-bottom: 4px;
+            width: 100%;
+            height: 56%;
+            margin-top: 3px;
+            margin-bottom: 2px;
             background: rgba(23, 90, 201, 0.9);
+
             .child-pie {
-              height: 160px !important;
               top: -15px;
+              height: 160px !important;
+            }
+
+            .left-chart-echars {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              height: calc(100% - 28px);
             }
             .child-title {
               height: 50px !important;
-              text-align: center;
-              color: #fff;
-              padding: 0px 0px 5px 10px;
+              padding: 0 0 5px 10px;
               margin-top: -15px;
+              color: #fff;
+              text-align: center;
               cursor: pointer;
             }
           }
         }
       }
+
       .technology {
-        // height: 40%;
+        margin-top: 113px;
+        font-size: 14px;
         .chartBody {
           height: 220px;
+
           .leaderBox {
+            display: flex;
+            width: 100%;
             .leader {
-              // height: 40px;
-              // line-height: 40px;
-              height: 38px;
-              line-height: 38px;
+              width: 30%;
+              height: 100px;
               margin-bottom: 1px;
+              line-height: 38px;
+              text-align: center;
               background: rgba(23, 90, 201, 0.9);
+
               .itemLabel {
                 display: inline-block;
                 width: 100px;
                 text-align: center;
               }
+
               .itemValue {
-                text-align: left;
+                display: block;
+                text-align: center;
+                height: 30px;
               }
             }
+
             .secondLine {
-              height: 60px;
-              //line-height: 35px;
+              width: 70%;
+              border-left: 1px solid white;
               margin-bottom: 1px;
-              background: rgba(23, 90, 201, 0.9);
+              background: rgba(23,90,201,0.9);
               .itemLabel {
-                display: inline-block;
-                width: 100px;
-                line-height: 60px;
+                // display: inline-block;
+                // float: left;
+                display: block;
+                overflow: auto;
+                line-height: 40px;
                 text-align: center;
-                float: left;
               }
+
               .itemList {
-                height: 60px;
-                width: calc(100% - 100px);
                 float: left;
+                width: calc(100% - 1px);
+                height: 40px;
+                margin-left: 15px;
                 //padding: 5px 0;
                 > div {
-                  height: 30px;
+                  display: flex;
+                  .itemIcon {
+                    height: 73%;
+                    margin-top: 5px;
+                    vertical-align: middle;
+                  }
+                  .itemContent{
+                    width: 22%;
+                    height: 72%;
                     line-height: 30px;
+                    text-align: center;
+                    vertical-align: middle;
                   }
                 }
               }
             }
           }
+        }
+
         .table-middle {
           height: calc(100% - 4px);
           .table-header-row,
@@ -1331,23 +1520,26 @@
             height: 31px;
             line-height: 30px;
           }
+
           .table-header {
             width: 100%;
             height: 40%;
             // margin-top: 2px;
             color: #fff;
             text-align: left;
+
             .table-header-row {
-              margin: 3px 0px 1px 20px;
+              margin: 3px 0 1px 20px;
             }
 
             .table-header-left {
+              float: left;
               width: calc(40% - 2px);
               height: 100%;
               margin-right: 2px;
-              float: left;
               background: rgba(23, 90, 201, 0.9);
             }
+
             .table-header-right {
               float: left;
               width: 60%;
@@ -1355,8 +1547,14 @@
               background: rgba(23, 90, 201, 0.9);
             }
           }
+
           .firstPeople {
             position: relative;
+
+            .duty-title {
+              font-size: 15px;
+            }
+
             .leftBtn {
               position: absolute;
               top: -31px;
@@ -1365,11 +1563,13 @@
               height: 30px !important;
               overflow: hidden;
               cursor: pointer;
+
               img {
                 width: 100%;
                 height: 130% !important;
               }
             }
+
             .rightBtn {
               position: absolute;
               top: -31px;
@@ -1378,6 +1578,7 @@
               height: 30px !important;
               overflow: hidden;
               cursor: pointer;
+
               img {
                 width: 100%;
                 height: 130% !important;
@@ -1386,13 +1587,14 @@
           }
 
           .table-header-split {
-            height: 30px;
-            text-align: center;
+            height: 40px;
             padding: 3px 10px;
+            margin-top: 1px;
             color: #fff;
+            text-align: center;
             background: rgba(23, 90, 201, 0.9);
-            margin-top: 1px;
           }
+
           .table-body-cotent {
             // height: calc(45% + 28px);
             // margin-top: 2px;
@@ -1400,17 +1602,19 @@
 
             .amos-row {
               margin-top: 1px;
-              background: rgba(23, 90, 201, 0.9);
               color: rgb(5, 221, 249);
+              background: rgba(23, 90, 201, 0.9);
               // height: 28px;
               .amos-col-1 {
                 height: 100%;
               }
+
               .table-page-img {
                 height: 100%;
                 background: rgba(28, 125, 213, 0.9);
               }
             }
+
             .content {
               color: #fff;
             }
@@ -1423,36 +1627,47 @@
       .tieleBox {
         background-color: rgba(0, 66, 174, 0.9);
       }
+
       .title {
-        color: #fff;
         height: 28px;
+        padding-right: 10px;
+        font-size: 16px;
         line-height: 28px;
+        color: #fff;
         // border-bottom: 1px solid #fff;
         // margin-bottom: 1px;
         background: url('/src/assets/indexChart/title.png') no-repeat center center/100% 100%;
-        padding-right: 10px;
         background: rgba(0, 66, 174, 0.9);
+
         span {
           height: 28px;
           line-height: 28px;
         }
+
         .titleRight {
           float: right;
           // padding: 3px 10px;
         }
+
         .titleLeft {
           float: left;
           // padding: 3px 10px;
         }
+
         .titleIcon {
           display: inline-block;
-          height: 20px;
           width: 20px;
+          height: 20px;
           vertical-align: middle;
         }
       }
+
       .chartBody {
-        height: 100px;
+        height: 136px;
+
+        @media screen and (min-width: 1280px) and (max-width: 1366px) {
+          height: 40px;
+        }
       }
     }
   }
@@ -1463,46 +1678,33 @@
   position: absolute;
   top: 140px;
   left: 410px;
+  z-index: 10;
   width: 80px;
   height: 30px;
-  z-index: 10;
 }
 
 
 
-.list09::-webkit-scrollbar {/*滚动条整体样式*/
-
-  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-
+.list09::-webkit-scrollbar {/* 滚动条整体样式 */
+  width: 6px;     /* 高宽分别对应横竖滚动条的尺寸 */
   height: 1px;
-
-
 }
 
-.list09::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-
-  border-radius: 10px;
-
-   -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
-
+.list09::-webkit-scrollbar-thumb {/* 滚动条里面小方块 */
   background: #535353;
-
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2);
 }
 
-.list09::-webkit-scrollbar-track {/*滚动条里面轨道*/
-
-  -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
-
+.list09::-webkit-scrollbar-track {/* 滚动条里面轨道 */
+  background: #ededed;
   border-radius: 10px;
-
-  background: #EDEDED;
-
+  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2);
 }
 
-.list09{
+.list09 {
+  height: 630px;
   overflow-y: auto;
-  height:630px ;
-
 }
 
 .patrolDetailContent .contentBox .patrolItem {
@@ -1510,68 +1712,79 @@
 }
 
 .amos-list-split .amos-list-item {
-  border-bottom: 0px solid #e8e8e8;
+  border-bottom: 0 solid #e8e8e8;
 }
- .amos-spin-container{
+
+.amos-spin-container {
+  height: 630px;
   overflow-y: auto;
-  height:630px ;
 }
+
 .amos-list-lg .amos-list-item {
   padding-top: 5px;
   padding-bottom: 5px;
 }
+
 .amos-list-item {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding-top: 5px;
   padding-bottom: 5px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
+
 .amos-list-pagination {
   margin-top: 15px;
   text-align: center;
 }
+
 .amos-list-something-after-last-item .amos-list-item:last-child {
-  border-bottom: 0px solid #e8e8e8;
+  border-bottom: 0 solid #e8e8e8;
 }
+
 .amos-pagination-layout-right {
+  display: inline-block;
+  padding-right: 0;
   font-family: 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;
   font-size: 12px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  display: inline-block;
-  padding-right: 0px;
 }
+
 .amos-list-vertical .amos-list-item-content {
   display: block;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   font-size: 12px;
   color: black;
 }
+
 .patrolDetailContent {
-  width: 22%;
-  height: 100%;
   position: absolute;
   top: 7rem;
   //right: calc(22% + 53px);
   right: calc(22% + 15px);
-  padding: 5px 0;
   z-index: 200;
+  width: 22%;
+  height: 100%;
+  padding: 5px 0;
+
   .title {
     padding-right: 0 !important;
+
     .titleRight {
       display: inline-block;
       width: 35px;
       height: 27px !important;
-      cursor: pointer;
-      text-align: center;
       font-size: 16px;
+      text-align: center;
+      cursor: pointer;
       background: linear-gradient(180deg, rgba(253, 53, 17, 1) 0%, rgba(252, 4, 145, 1) 100%);
     }
   }
+
   .contentBox {
     height: 100%;
 
@@ -1579,81 +1792,93 @@
       // border-bottom: 1px solid #fff;
       margin-bottom: 1px;
     }
-    .technology {
-    }
+
     .patrolItem {
       height: 724px;
       padding: 15px;
       background-color: #175ac9;
+
       .itemTop {
         height: calc(45% - 15px);
+
         .itemMsg {
+          float: left;
           width: 50%;
           height: 100%;
-          float: left;
+
           .itemName {
+            display: inline-block;
             height: 30px;
-            line-height: 30px;
             padding: 0 15px;
-            display: inline-block;
+            margin: 8px;
             font-size: 13px;
-            background: rgba(0, 66, 174, 0.9);
+            line-height: 30px;
             color: #5ffffd;
-            margin: 8px;
+            background: rgba(0, 66, 174, 0.9);
+
             .itemIcon {
               display: inline-block;
-              height: 20px;
               width: 20px;
+              height: 20px;
               vertical-align: middle;
             }
           }
+
           .itemDesc {
             font-size: 15px;
           }
         }
+
         .rightChart {
+          float: left;
           width: 50%;
           height: 100%;
-          float: left;
         }
       }
+
       .itemMiddle {
         height: calc(55% - 15px);
         padding: 5px 0;
         text-align: center;
+
         img {
           max-width: 100%;
           max-height: 100%;
         }
       }
+
       .itemBottom {
         height: 30px;
-        text-align: center;
         padding-top: 8px;
+        text-align: center;
+
         span {
           display: inline-block;
+          height: 15px;
           padding: 0 10px;
           padding-right: 0;
-          border-left: 2px solid #92baf4;
+          margin: 5px;
           font-size: 15px;
-          height: 15px;
           line-height: 15px;
-          margin: 5px;
+          border-left: 2px solid #92baf4;
+
           &:nth-child(1) {
             color: #58f2f4;
             border: none;
           }
+
           &:nth-child(2) {
             color: #ff8000;
           }
+
           &:nth-child(3) {
-            color: #ff0000;
+            color: #f00;
           }
         }
       }
     }
 
-    .pagination{
+    .pagination {
       .amos-pagination-paging li a {
         color: white;
       }
@@ -1662,52 +1887,47 @@
 }
 
 .list3 {
-  float:left ;
+  float: left;
   width: 33%;
   height: 100%;
 }
+
 .list5 {
-  float:left ;
+  float: left;
   width: 33%;
   height: 100%;
-  border-left: 1px solid #fff;
   border-right: 1px solid #fff;
+  border-left: 1px solid #fff;
 }
-.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}　
- .clearfloat{zoom:1}
+.clearfloat::after { display: block; height: 0; clear: both; content: ''; visibility: hidden; }
+.clearfloat { zoom: 1; }
+
 .list4 {
   width: 100%;
   height: 35px;
-  border-bottom: 1px solid #fff;
-  border-top: 1px solid #fff;
-  text-align: left;
   padding: 0 10px;
+  text-align: left;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
 }
+
 .list1 {
   width: 99%;
-  border: 1px solid #fff;
   margin-top: 5px;
+  font-size: 12px;
   line-height: 35px;
-  text-align: center;
   color: #fff;
-  font-size: 12px;
+  text-align: center;
+  border: 1px solid #fff;
 }
+
 .list2 {
   width: 100%;
   height: 35px;
-
 }
+
 .AlarmMarquee-top-news {
-  display: flex;
   position: absolute !important;
-  width: 50%;
-  height: 52px;
-  overflow: hidden;
-  //color: #ff524a;
-  color: white;
-  //border: solid;
-  //border-color: red;
-  margin-left: 24%;
   //background: url('/src/assets/3dview/marquee.png') no-repeat;
   //background-size: 100% 100%;
   //background-color:#ff524a;
@@ -1717,30 +1937,39 @@
   //background:rgba(0,0,0,1);
   //width: calc(100% - 3.6rem);
   position: relative;
+  z-index: 10;
+  display: flex;
+  width: 50%;
+  height: 52px;
+  //border: solid;
+  //border-color: red;
+  margin-left: 24%;
+  overflow: hidden;
   //left: 3.6rem;
   letter-spacing: 0.6px;
-  z-index: 10;
+  //color: #ff524a;
+  color: white;
 
   .amosicon-shengyin {
     width: 42px;
     height: 52px;
     text-align: center;
+    background: rgba(0, 0, 0, 0.1);
     //background:rgba(41,152,225,0.2);
     background-color: #345fa6;
-    box-shadow: 0px 0px 16px 4px rgba(77, 170, 224, 0.2);
-    background: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 16px 4px rgba(77, 170, 224, 0.2);
   }
 
   .amosicon-shengyin::before {
     display: inline-block;
-    content: '' !important;
-    line-height: 47px;
     width: 37px;
     height: 37px;
     margin: 2.5px 0 0 2.5px;
+    line-height: 47px;
     //background: url('/src/assets/3dview/marquee-light.png') no-repeat;
 
     background-size: 100% 100%;
+    content: '' !important;
   }
 
 
@@ -1750,29 +1979,31 @@
     margin-left: 24px;
     font-size: 0.156rem;
     line-height: 32px;
-    font-size: 10px !important;
   }
 
-  .tops-news-item:before {
+  .tops-news-item::before {
     //content: '\e600';
   }
 
   .news-marquee {
-    //margin-left: 10px;
-    background: url('/src/assets/3dview/maquee.png') no-repeat;
-    background-size: 100% 100%;
     overflow: hidden;
     clear: 'both';
+    cursor: pointer;
+    //margin-left: 10px;
+    background: url('/src/assets/3dview/maquee.png') no-repeat;
+    background-size: 100% 110%;
     flex: 1;
+    opacity: 0.8;
     .tops-news-item {
       height: 52px;
+      font-size: 15px;
       line-height: 48px;
+
       span {
         font-family: 'microsoft YaHei';
         font-weight: bold;
       }
     }
-    cursor: pointer;
   }
 }
 
@@ -1783,38 +2014,44 @@
     right: 0 !important;
     left: inherit !important;
     z-index: 200;
+
     .control-pane-biz {
-      background: rgba(0, 0, 0, 0);
       padding: 0;
+      background: rgba(0, 0, 0, 0);
       border-radius: 0;
+
       .control-item {
+        position: relative;
         width: 42px;
         height: 42px;
-        border: none;
-        background: #1853b6;
         margin-bottom: 1px;
+        background: #1853b6;
+        border: none;
         border-radius: 2px;
-        position: relative;
+
         &:hover {
           background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%);
         }
+
         .dotTip {
           position: absolute;
           top: 8px;
           right: 8px;
-          border-radius: 50%;
           width: 8px;
           height: 8px;
           background-color: red;
+          border-radius: 50%;
         }
       }
+
       .control-active {
         background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%) !important;
       }
     }
+
     .marker-icon-title {
-      left: inherit !important;
       right: 55px !important;
+      left: inherit !important;
       z-index: 300;
     }
   }

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

@@ -13,6 +13,7 @@
 
   .control-pane-biz {
     padding: 1rem 0;
+    margin-top: 30px;
     background: $pane-bg;
     border-radius: 6px;
 
@@ -179,6 +180,7 @@
 // 右侧数据区
 .datapane-drawer {
   display: flex;
+  padding-top: 40px;
   // background: $datapane-drawer;
 
   .drawer-bar {

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/3dview/pointsDetails.scss

@@ -272,7 +272,7 @@
             display: none;
           }
           .ant-table-body{
-            max-height: 35rem !important;
+            max-height: 1000rem !important;
           }
         }
         .risk-warn-content{

src/styles/view/biz/checkDetail/checkDetail.scss

@@ -366,7 +366,7 @@
 .xun{
   .amos-modal-container{
 
-    top: 6%;
+    top: 13%;
   }
 
   .amos-modal-content {

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

@@ -340,6 +340,7 @@
         .ant-table-pagination {
           float: right;
           display: inline;
+          width: 98%;
         }
       }
       .ant-table-title {
@@ -393,6 +394,9 @@
         background: #ecf6fd;
       }
 
+
+
+
       .ant-pagination-item {
         height: 25px;
         min-width: 25px;
@@ -454,7 +458,8 @@
       }
 
       .ant-pagination-options {
-        margin-top: 5px;
+        margin-top: -12%;
+        margin-left: 88%;
 
         .ant-select-selection {
           height: 25px;
@@ -462,6 +467,7 @@
           background: $biz-title-color;
           border-color: $core-border-color;
 
+
           .ant-select-arrow {
             color: $biz-table-font-color;
           }

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.result === 'SUCCESS') {
         if (data.dataList || data.dataList === null){
           resolve(data.dataList);
-      } else if (data.result || data.result === null){
+        } else {
+          resolve(data);
+        }
+      } else if (data.status === 200){
+        if (data.result || data.result !== ''){
           resolve(data.result);
-      }else if (data == 'TypeError: Failed to fetch'){
-        reject(data);
-      }else{
+        } else {
+          resolve(data);
+        }
+      } else {
         resolve(data);
       }
-      
     } else {
       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,
@@ -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/RiskContent.js

@@ -20,6 +20,15 @@ class RiskContent extends Component {
   render() {
     const { markerData } = this.props;
     // const { info = [] } = markerData || {};
+
+  var text=markerData.realTimeStatus;
+
+    if(text==='合格'){
+      text='正常';
+     }else if(text==='不合格'){
+      text='异常';
+     }
+
     return (
       <Row className="point-detail-table ">
         <Row className="point-detail-table-row1">
@@ -28,7 +37,7 @@ class RiskContent extends Component {
           <Col className="colTitle">名称</Col>
           <Col className="colValue">{markerData.name}</Col>
           <Col className="colTitle">状态</Col>
-          <Col className="colValue">{markerData.realTimeStatus}</Col>
+          <Col className="colValue">{text}</Col>
         </Row>
         <Row className="point-detail-table-row2">
           <Col className="colTitle">责任部门</Col>

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');
 
@@ -135,7 +133,6 @@ class RiskSourceDetailModal extends Component {
   }
 
   render() {
-    debugger
     //const { data = {} } = this.state;
     return (
       <div className="risk-warn">

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

@@ -5,7 +5,7 @@
 /* eslint-disable react/sort-comp */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Store,utils } from 'amos-tool';
+import { Store, utils } from 'amos-tool';
 import { Connect as UIConnect, Toast } from 'amos-framework';
 import A3DDesigner, { Connect } from 'amos-3d/lib/designer';
 import WorkerObjContent from 'amos-3d/lib/worker/WorkerObjContent';
@@ -22,7 +22,7 @@ import LoadingComs from './LoadingComs';
 import PointsPool from './PointsPool';
 import PointsAlarm from './PointsAlarm';
 import CoordinatePickup from './CoordinatePickup';
-import { eventTopics, isPointEvent ,isControllerEvent, isManualOperate } from './consts';
+import { eventTopics, isPointEvent, isControllerEvent, isManualOperate } from './consts';
 import { executeView3dCMD, parseManual } from './dataProcessor';
 //import { xianCode, xianyangCode } from '../../../_mock/code';
 
@@ -42,7 +42,7 @@ const FLOOR = {
   FLOOR_3: 'floor_3',
   XY_FLOOR_3: 'xy_floor_3',
   FLOOR_6: 'floor_6',
-  FLOOR_XY:'floor_xy'
+  FLOOR_XY: 'floor_xy'
 
 };
 
@@ -59,6 +59,33 @@ const createPanel = (text) => {
   return div;
 };
 
+const moniData = [
+  {
+    authOrg: null,
+    code: "1*13",
+    content: "-11.45.0.18-423-通讯状态",
+    id: 176,
+    isAlarm: 1,
+    pointId: 221,
+    pointName: "",
+    pointType: "1",
+    sourceId: null,
+    updateDate: "2020-06-09 09:48:15"
+  },
+  {
+    authOrg: null,
+    code: "1*13",
+    content: "-11.44.12.83-424-通讯状态",
+    id: 175,
+    isAlarm: 1,
+    pointId: 222,
+    pointName: "",
+    pointType: "1",
+    sourceId: null,
+    updateDate: "2020-06-09 09:48:12"
+  }
+]
+
 /**
  * 展示三维模型
  *
@@ -147,7 +174,9 @@ class View3D extends Component {
       onProgress: (item, loaded, total) => {
         this.setState({
           loadingResInfo: {
-            total, current: loaded, url: item
+            total,
+            current: loaded,
+            url: item
           }
         });
       }
@@ -159,25 +188,18 @@ class View3D extends Component {
   componentDidMount() {
     this._registerEvents(); // 注册事件
     this._bindPubSubEvents(); // 绑定事件
-    this._bindRulesPubSubEvents();//获取风险点告警
-    this.loadAlarmData();//获取告警数据
+    this._bindRulesPubSubEvents(); //获取风险点告警
+    this.loadAlarmData(); //获取告警数据
     // this.props.onRef(this);//传输子组件对象
-
   }
 
-
   componentWillUnmount() {
-
     this.objAnchorHelper && this.objAnchorHelper.destroy();
     this.infoHelper && this.infoHelper.destroy();
 
     //  定时器销毁
     this.interval && clearInterval(this.interval);
     this.timer && clearTimeout(this.timer);
-
-
-
-
   }
 
   /**
@@ -190,7 +212,7 @@ class View3D extends Component {
     });
 
     // 相机视角改变
-    this.r3d.on('camera_change', (evt) => {
+    this.r3d.on('camera_change', evt => {
       // console.log('main camera_change', evt);
     });
 
@@ -223,7 +245,7 @@ class View3D extends Component {
         return;
       }
 
-      if (evt.object && evt.object.type === 'Mesh'){
+      if (evt.object && evt.object.type === 'Mesh') {
         const parentObj = evt.object.parent;
         const userData = parentObj.userData;
         if (userData && this.lensLevel !== LENS_LEVEL.ROOT && userData.type === 'cabinet') {
@@ -290,13 +312,12 @@ class View3D extends Component {
           // 清除选中
           // _this.outlineFactory.toggleOutline([]);
           // info信息框不显示
-          if (_this.lensLevel !== LENS_LEVEL.SUN){
+          if (_this.lensLevel !== LENS_LEVEL.SUN) {
             _this.infoHelper.toggleVisible(false);
           }
         }
       }
     });
-
   };
 
   /**
@@ -318,24 +339,23 @@ class View3D extends Component {
     });
   };
 
-
   _bindRulesPubSubEvents = () => {
     this.props.subscribe(eventTopics.fromws, (topic, content) => {
       let data = content.data;
       console.log('消息类型--->' + topic);
       console.log('data==' + JSON.stringify(data));
       //this.riskAlarmDataTwinkle(data);
-      switch (topic){
+      switch (topic) {
         case 'base3d.fromws.riskSituation_flicker':
           console.log('风险触发风险点闪烁~~~~~~~~~~~~~~~~~~~~');
-          this.flickerTroubleMarkers(this, data);//风险触发风险点闪烁
+          this.flickerTroubleMarkers(this, data); //风险触发风险点闪烁
           break;
         case 'base3d.fromws.riskSituation_colour':
           console.log('风险触发风险点颜色改变~~~~~~~~~~~~~~~~~~~~');
-          this.flickerTroubleMarkers(this, data);//风险触发风险点闪烁
+          this.flickerTroubleMarkers(this, data); //风险触发风险点闪烁
           break;
         default:
-          console.log(topic,'：类型不支持');
+          console.log(topic, '：类型不支持');
       }
     });
   };
@@ -396,7 +416,11 @@ class View3D extends Component {
       r3d,
       cameraFactory,
       sceneFactory,
-      cameraEffect: this.city.isXian ? desigerHelperConfig.cameraEffect : this.city.isXianyang ? desigerHelperConfig.xyCameraEffect : desigerHelperConfig.xdjCameraEffect
+      cameraEffect: this.city.isXian
+        ? desigerHelperConfig.cameraEffect
+        : this.city.isXianyang
+        ? desigerHelperConfig.xyCameraEffect
+        : desigerHelperConfig.xdjCameraEffect
     });
   };
 
@@ -405,13 +429,13 @@ class View3D extends Component {
    *
    * @memberof View3D
    */
-  createInfowindow = (text) => {
+  createInfowindow = text => {
     const div = document.createElement('div');
     div.style.position = 'absolute';
     div.className = 'three-ui-infowindow';
     div.innerText = text;
     return div;
-  }
+  };
 
   /**
    * 创建信息面板
@@ -425,7 +449,7 @@ class View3D extends Component {
       element: createPanel(name),
       position: [3.5, 4, 0]
     });
-  }
+  };
 
   /**
    * 加载完成
@@ -434,7 +458,7 @@ class View3D extends Component {
    */
   onComplete = obj => {
     const _this = this;
-    if (!obj.isForceParent ) {
+    if (!obj.isForceParent) {
       obj.on('click', evt => {
         // console.log('obj click', evt);
 
@@ -459,7 +483,7 @@ class View3D extends Component {
    *
    * @memberof View3D
    */
-  onAllDone = (objGroup) => {
+  onAllDone = objGroup => {
     this.sceneFactory.level.change(objGroup);
     // this.cameraFactory.fitView(this.city.isXian ? desigerHelperConfig.cameraEffect : this.city.isXianyang ? desigerHelperConfig.xyCameraEffect : desigerHelperConfig.xdjCameraEffect);
     this.setRootFitView();
@@ -469,35 +493,49 @@ class View3D extends Component {
     // 加载告警数据
     this.timer = setTimeout(() => {
       this.transferAlarmData();
-      let flag= this.props.flag;
-
-      if(flag&&flag===1){
-        let pointName= this.props.pointName;
-        let pointAttrs= this.props.pointAttrs;
-        let pid= this.props.pid;
-        this.onAlarmClick1('floor_3',{
-
-          'authOrg': null,
-          'code': "",
-          'content': "",
-          'id': 0,
-          'isAlarm': 0,
-          'pointAttrs': `{"position":"`+pointAttrs+`","storey":"3"}`,
-          'pointId': pid,
-          'pointName': pointName,
-          'pointType': "3",
-          'sourceId': null,
-          'updateDate': "",
-
+      let flag = this.props.flag;
+      if (flag && flag === 1) {
+        let pointName = this.props.pointName;
+        let pointAttrs = this.props.pointAttrs;
+        let pid = this.props.pid;
+        //楼层
+        let floor = this.props.floor;
+        let pointtype = this.props.pointtype;
+
+        if (this.props.city === 'xian') {
+          this.onAlarmClick1(pointtype, 'floor_' + floor, {
+            authOrg: null,
+            code: '',
+            content: '',
+            id: 0,
+            isAlarm: 0,
+            pointAttrs: `{"position":"` + pointAttrs + `","storey":"` + floor + `"}`,
+            pointId: pid,
+            pointName: pointName,
+            pointType: '3',
+            sourceId: null,
+            updateDate: ''
           });
+        } else {
+          this.onAlarmClick1(pointtype, 'xy_floor_' + floor, {
+            authOrg: null,
+            code: '',
+            content: '',
+            id: 0,
+            isAlarm: 0,
+            pointAttrs: `{"position":"` + pointAttrs + `","storey":"` + floor + `"}`,
+            pointId: pid,
+            pointName: pointName,
+            pointType: '3',
+            sourceId: null,
+            updateDate: ''
+          });
+        }
       }
     }, 1500);
 
     // 设置楼层勾边标记
     this.setToggleOutline();
-
-
-
   };
 
   /**
@@ -509,7 +547,7 @@ class View3D extends Component {
     getAlarms().then(data => {
       this.setState({ alarmData: data });
     });
-  }
+  };
 
   /**
    * Worker加载中
@@ -524,14 +562,14 @@ class View3D extends Component {
   } = {}) => {
     this.setState({ percent });
     console.log('from worker:', loading, percent, rendering);
-  }
+  };
 
   /**
    * Worker初始化完成
    *
    * @memberof View3D
    */
-  onAfterWorkerInit = (workerObjGroup) => {
+  onAfterWorkerInit = workerObjGroup => {
     this.setState({ isAllDone: true });
     // 处理跳跃
     this.lensJumpFactory.process(workerObjGroup);
@@ -542,18 +580,18 @@ class View3D extends Component {
    *
    * @memberof View3D
    */
-  onLoadProgress = (xhr) => {
+  onLoadProgress = xhr => {
     if (xhr.lengthComputable) {
       var percentComplete = (xhr.loaded / xhr.total) * 100;
       const percent = Math.round(percentComplete, 2);
       console.log(`model ${percent}% downloaded`);
-      if (percent === 100){
+      if (percent === 100) {
         this.setState({ percent: 10 });
       } else {
         this.setState({ percent });
       }
     }
-  }
+  };
 
   /**
    * 焦点位置设置
@@ -580,7 +618,7 @@ class View3D extends Component {
     this.clearAlarms();
     if (object && object.foreignKey) {
       this.cameraFactory.flyTo({
-        position: [269.11, 83.06, 103.80],
+        position: [269.11, 83.06, 103.8],
         target: object,
         duration: 1000,
         // 飞行到具体的 obj 之后，执行进入层级操作
@@ -607,7 +645,6 @@ class View3D extends Component {
             if (isFlyToSun !== undefined && isFlyToSun === true) {
               _this.flyToCabinet(object);
             }
-
           }
         }
       });
@@ -664,7 +701,7 @@ class View3D extends Component {
     }
 
     this.setCabinetFitView(userData);
-  }
+  };
 
   /**
    * 设置楼层勾边标记
@@ -673,14 +710,14 @@ class View3D extends Component {
    */
   setToggleOutline = () => {
     let _objs = [];
-    this.objs.map(_obj=>{
+    this.objs.map(_obj => {
       const userData = _obj.userData;
       if (userData && (userData.key === FLOOR.FLOOR_3 || userData.key === FLOOR.FLOOR_6 || userData.key === FLOOR.XY_FLOOR_3)) {
         _objs.push(_obj);
       }
     });
     this.outlineFactory.toggleOutline(_objs);
-  }
+  };
 
   /**
    * 设置楼层勾边标记为默认颜色
@@ -692,7 +729,7 @@ class View3D extends Component {
       visibleEdgeColor: '#ffe2ad',
       hiddenEdgeColor: '#ffe2ad'
     };
-  }
+  };
 
   /**
    * 设置楼层勾边标记为选中的颜色
@@ -704,23 +741,24 @@ class View3D extends Component {
       visibleEdgeColor: '#f8a303',
       hiddenEdgeColor: '#ffe2ad'
     };
-  }
+  };
 
   /**
    * 设置楼层类型
    *
    * @memberof View3D
    */
-  setFloorType = (key) => {
+  setFloorType = key => {
     // 设置初始视角
     if (key === FLOOR.FLOOR_3) {
       this.setFloorThreeFitView();
     } else if (key === FLOOR.FLOOR_6) {
       this.setFloorSixFitView();
-    } else { // 咸阳
+    } else {
+      // 咸阳
       this.setXYFloorThreeFitView();
     }
-  }
+  };
 
   /**
    * 淡出
@@ -764,7 +802,7 @@ class View3D extends Component {
     const { orgCode } = this.state;
     this.clearMarkers();
     //风险点访问风险模块
-    if (markerType === 'riskSource'){
+    if (markerType === 'riskSource') {
       initView3DRiskFromBizAction(markerType, orgCode).then(data => {
         this.initView3DData(markerType, data);
       });
@@ -773,19 +811,20 @@ class View3D extends Component {
         this.initView3DData(markerType, data);
       });
     }
-  }
+  };
 
   /**
    * 重构数据
    *
    * @memberof View3D
    */
-  initView3DData = (markerType, data) =>{
+  initView3DData = (markerType, data) => {
     const { markers, floorType, alarmData } = this.state;
     let markerData = [];
-    if (data) {// 点数据按楼层显示
+    if (data) {
+      // 点数据按楼层显示
       if (LENS_LEVEL.SUB === this.lensLevel || LENS_LEVEL.SUN === this.lensLevel) {
-        data.forEach(item=> {
+        data.forEach(item => {
           if (floorType === item.objKey) {
             markerData.push(item);
           }
@@ -811,14 +850,14 @@ class View3D extends Component {
       markers[markerType] = markerData;
       this.setState({ markers, markerData });
     }
-  }
+  };
 
   /**
    * 风险点闪烁
    *
    * @memberof View3D
    */
-  riskAlarmDataTwinkle = (alarmData) =>{
+  riskAlarmDataTwinkle = alarmData => {
     const { markers, markerData, markerType } = this.state;
     if (alarmData.bizobj) {
       markerData.forEach(marker => {
@@ -833,7 +872,7 @@ class View3D extends Component {
     // 点数据分类
     markers[markerType] = markerData;
     this.setState({ markers });
-  }
+  };
 
   /**
    * 设置初始视角
@@ -841,9 +880,10 @@ class View3D extends Component {
    * @memberof View3D
    */
   setRootFitView = () => {
-    this.cameraFactory.fitView(this.city.isXian ? desigerHelperConfig.cameraEffect :
-      this.city.isXianyang ? desigerHelperConfig.xyCameraEffect : desigerHelperConfig.xdjCameraEffect);
-  }
+    this.cameraFactory.fitView(
+      this.city.isXian ? desigerHelperConfig.cameraEffect : this.city.isXianyang ? desigerHelperConfig.xyCameraEffect : desigerHelperConfig.xdjCameraEffect
+    );
+  };
 
   /**
    * 设置西大街初始视角
@@ -852,7 +892,7 @@ class View3D extends Component {
    */
   setXidajieFitView = () => {
     this.cameraFactory.fitView(desigerHelperConfig.xdjCameraEffect);
-  }
+  };
 
   /**
    * 设置三楼初始视角
@@ -862,7 +902,7 @@ class View3D extends Component {
   setFloorThreeFitView = () => {
     this.cameraFactory.fitView(desigerHelperConfig.thirdFloorCameraEffect);
     this.setState({ floorType: FLOOR.FLOOR_3 });
-  }
+  };
 
   /**
    * 设置三楼初始视角 - 咸阳
@@ -872,7 +912,7 @@ class View3D extends Component {
   setXYFloorThreeFitView = () => {
     this.cameraFactory.fitView(desigerHelperConfig.xyThirdFloorCameraEffect);
     this.setState({ floorType: FLOOR.FLOOR_3 });
-  }
+  };
 
   /**
    * 设置六楼初始视角
@@ -882,21 +922,21 @@ class View3D extends Component {
   setFloorSixFitView = () => {
     this.cameraFactory.fitView(desigerHelperConfig.thirdFloorCameraEffect);
     this.setState({ floorType: FLOOR.FLOOR_6 });
-  }
+  };
 
   /**
    * 设置机柜初始视角
    *
    * @memberof View3D
    */
-  setCabinetFitView = (userData) => {
+  setCabinetFitView = userData => {
     this.cameraFactory.fitView({
       position: userData.position ? userData.position : desigerHelperConfig.cabinetCameraEffect.position,
       target: userData.target ? userData.target : desigerHelperConfig.cabinetCameraEffect.target,
       duration: desigerHelperConfig.cabinetCameraEffect.duration
     });
     this.setState({ floorType: FLOOR.FLOOR_0 });
-  }
+  };
 
   /**
    * 设置玻璃透明度
@@ -938,7 +978,7 @@ class View3D extends Component {
    * @memberof View3D
    */
   clearFloorViewEffect() {
-    this.objs.forEach(obj=>{
+    this.objs.forEach(obj => {
       if (obj.userData.type === 'floor') {
         obj.baseObjHelper.style.color = '';
       }
@@ -968,7 +1008,7 @@ class View3D extends Component {
 
     // 设置楼层标记
     this.setToggleOutline();
-  }
+  };
 
   /**
    * 返回三维第二层
@@ -984,7 +1024,7 @@ class View3D extends Component {
     // 设置层级
     this.lensLevel = LENS_LEVEL.SUB;
     // this.clearMarkers();
-  }
+  };
 
   /**
    * 返回上级
@@ -992,10 +1032,13 @@ class View3D extends Component {
    * @memberof View3D
    */
   backPreviousLevelView = () => {
+    this.props.trigger(eventTopics.innate_operater_back, { value: true });
     if (this.lensLevel === LENS_LEVEL.SUN) {
       this.backSubView();
       this.lensLevel = LENS_LEVEL.SUB;
-      if (this.state.floorType === FLOOR.FLOOR_0) {this.setState({ floorType: FLOOR.FLOOR_3 });}
+      if (this.state.floorType === FLOOR.FLOOR_0) {
+        this.setState({ floorType: FLOOR.FLOOR_3 });
+      }
     } else if (this.lensLevel === LENS_LEVEL.SUB && !this.city.isXidajie) {
       this.backRootView();
       this.lensLevel = LENS_LEVEL.ROOT;
@@ -1017,7 +1060,7 @@ class View3D extends Component {
       pickVisable: false,
       pickDialog: false
     });
-  }
+  };
 
   /**
    * 执行操作
@@ -1107,7 +1150,10 @@ class View3D extends Component {
    */
   updateMarker = data => {
     //console.log(data, 'updateMarker');
+    if(data !=undefined && data != null){
       const { type, id } = data;
+      if (type !=undefined && type != null) {
+        if (type && null !== type) {
           const { markers } = this.state;
           const markersArr = markers[type] || [];
           if (markersArr.length > 0) {
@@ -1129,6 +1175,12 @@ class View3D extends Component {
               });
             }
           }
+        }
+      }
+    }
+
+
+
   };
 
   /**
@@ -1151,14 +1203,45 @@ class View3D extends Component {
     });
   };
 
+  existData = (code, orgCode) => {
+    let xianshi = false;
+    if (code) {
+      if (code.indexOf('#') !== -1) {
+        let split = code.split('#') || [];
+        split.map(item => {
+          if (item.indexOf('-') !== -1) {
+            let array = item.split('-') || [];
+            if (array.length > 0 && array[0] === orgCode) {
+              xianshi = true;
+            }
+          } else {
+            if (item === orgCode) {
+              xianshi = true;
+            }
+          }
+        });
+      } else {
+        let arr = code.split('-') || [];
+        if (arr.length > 0 && arr[0] === orgCode) {
+          xianshi = true;
+        }
+      }
+    }
+
+    return xianshi;
+  };
+
   /**
    * 加载告警数据
    *
    * @memberof View3D
    */
   transferAlarmData = () => {
-
     let { alarmData, orgCode } = this.state;
+
+    //登录人的orgCode
+    let userOrgCode = lsTool.read('selectedCompanyOrg');
+    // alarmData = moniData;
     const { isAllDone, alarms, markerType } = this.state;
     if (!isAllDone || this.city.isXidajie) {
       return;
@@ -1166,8 +1249,9 @@ class View3D extends Component {
     this.clearMarkers();
     this.clearAlarms();
 
-    if (!utils.isEmpty(alarmData) && utils.isArray(alarmData)){
-      alarmData = alarmData.filter(e=>{ //过滤通道信息
+    if (!utils.isEmpty(alarmData) && utils.isArray(alarmData)) {
+      alarmData = alarmData.filter(e => {
+        //过滤通道信息
         return e.pointType !== '4';
       });
     }
@@ -1180,23 +1264,78 @@ class View3D extends Component {
 
     let dictionaryList = lsTool.read('dictionaryList');
     let dicCodeList = JSON.parse(dictionaryList);
-    let city = this.getSelectCityByOrgCode(orgCode,dicCodeList);
-
+    let city = this.getSelectCityByOrgCode(orgCode, dicCodeList);
+
+    // if( city === '科技处' || city === '商业银行'){
+    //   //暂时全部归属西安中心
+    //   if (alarmData && !utils.isEmpty(alarmData) && utils.isArray(alarmData)) {
+    //     alarmData.forEach(item => {
+    //       const pointAttrs = JSON.parse(item.pointAttrs);
+    //       if ((item.code.startsWith(orgCode) || item.authOrg && item.authOrg.indexOf(orgCode)!==-1) && pointAttrs && pointAttrs !== '' && pointAttrs !== undefined) {
+    //         if (pointAttrs.storey === '3' || pointAttrs.storey === 'floor_3') {// 三楼数据
+    //           thirdFloorAlarmData.push(item);
+    //         } else if (pointAttrs.storey === '6' || pointAttrs.storey === 'floor_6') {// 六楼数据
+    //           sixthFloorAlarmData.push(item);
+    //         }
+    //       }
+    //     });
+    //   }
+    // }
+
+    if (city === 'xian' || city === 'xianyang' || city === '科技处西安' || city === '科技处咸阳') {
       if (alarmData && !utils.isEmpty(alarmData) && utils.isArray(alarmData)) {
-      alarmData.forEach(item => {
+        //过滤该公司没有权限的设备（有则跑马灯显示，否则不显示）
+        let newData = [];
+        alarmData.map(e => {
+          let xianshi = this.existData(e.code, userOrgCode);
+          let authOrgXianshi = this.existData(e.authOrg, userOrgCode);
+          if (xianshi || authOrgXianshi) {
+            newData.push(e);
+          }
+        });
+        newData.forEach(item => {
           const pointAttrs = JSON.parse(item.pointAttrs);
-        if (city === 'xian' && (item.code.startsWith(orgCode) || item.authOrg && item.authOrg.indexOf(orgCode)!==-1) && pointAttrs && pointAttrs !== '' && pointAttrs !== undefined) {
-          if (pointAttrs.storey === '3' || pointAttrs.storey === 'floor_3') {// 三楼数据
+          if (
+            (city === 'xian' || city === '科技处西安') &&
+            (item.code.startsWith(orgCode) || (item.authOrg && item.authOrg.indexOf(orgCode) !== -1)) &&
+            pointAttrs &&
+            pointAttrs !== '' &&
+            pointAttrs !== undefined
+          ) {
+            if (pointAttrs.storey === '3' || pointAttrs.storey === 'floor_3') {
+              // 三楼数据
               thirdFloorAlarmData.push(item);
-          } else if (pointAttrs.storey === '6' || pointAttrs.storey === 'floor_6') {// 六楼数据
+            } else if (pointAttrs.storey === '6' || pointAttrs.storey === 'floor_6') {
+              // 六楼数据
               sixthFloorAlarmData.push(item);
             }
-        } else if (city === 'xianyang' && (item.code.startsWith(orgCode)|| item.authOrg &&item.authOrg.indexOf(orgCode)!==-1)) {// 咸阳数据
+          } else if (
+            (city === 'xianyang' || city === '科技处咸阳') &&
+            (item.code.startsWith(orgCode) || (item.authOrg && item.authOrg.indexOf(orgCode) !== -1))
+          ) {
+            // 咸阳数据
             xyFloorAlarmData.push(item);
           }
         });
       }
+    }
 
+    // if(city === '科技处西安' || city === '科技处咸阳' ){
+    //   if (alarmData && !utils.isEmpty(alarmData) && utils.isArray(alarmData)) {
+    //     alarmData.forEach(item => {
+    //       const pointAttrs = JSON.parse(item.pointAttrs);
+    //       if ( && (item.authOrg && item.authOrg.indexOf(orgCode)!==-1) && pointAttrs && pointAttrs !== '' && pointAttrs !== undefined) {
+    //         if (pointAttrs.storey === '3' || pointAttrs.storey === 'floor_3') {// 三楼数据
+    //           thirdFloorAlarmData.push(item);
+    //         } else if (pointAttrs.storey === '6' || pointAttrs.storey === 'floor_6') {// 六楼数据
+    //           sixthFloorAlarmData.push(item);
+    //         }
+    //       } else if (city === '科技处咸阳' && (item.authOrg && item.authOrg.indexOf(orgCode) !==-1)) {// 咸阳数据
+    //         xyFloorAlarmData.push(item);
+    //       }
+    //     });
+    //   }
+    // }
 
     if (this.lensLevel === LENS_LEVEL.ROOT) {
       // 三楼告警
@@ -1247,30 +1386,40 @@ class View3D extends Component {
           this.setFloorViewEffect(obj, xyFloorAlarmStatus);
         }
       });
-
     } else if (this.lensLevel === LENS_LEVEL.SUB) {
-      let item = { 'type': markerType };
+      let item = { type: markerType };
       this.changeMarkerType(item, false);
     } else if (this.lensLevel === LENS_LEVEL.SUN && markerType === 'impEquipment') {
-      let item = { 'type': 'impEquipment' };
+      let item = { type: 'impEquipment' };
       this.changeMarkerType(item, false);
     }
-  }
-
+  };
 
   /**
    * 根据城市的orgCode，返回城市名称
    */
-  getSelectCityByOrgCode = (orgCode,dictionaryList) => {
+  getSelectCityByOrgCode = (orgCode, dictionaryList) => {
     let city = null;
-    dictionaryList.map(item =>{
-    if(item.dictDataValue === orgCode){
-        city=item.dictDataKey;
+    dictionaryList.map(item => {
+      if (item.dictDataValue === orgCode) {
+        city = item.dictDataKey;
       }
-    })
+    });
     return city;
- }
+  };
 
+  /**
+   * 根据城市返回字典中配置的组织orgCode
+   */
+  getSelectOrgCode = (city, dictionaryList) => {
+    let orgCode = null;
+    dictionaryList.map(item => {
+      if (item.dictDataKey === city) {
+        orgCode = item.dictDataValue;
+      }
+    });
+    return orgCode;
+  };
 
   /**
    * 告警信息点击事件
@@ -1283,96 +1432,118 @@ class View3D extends Component {
     this.clearMarkers();
     const _this = this;
     const pointType = parseInt(item.pointType);
-    if (type === FLOOR.FLOOR_3) {
-      _this.objs.forEach( obj => {
-        if (obj.userData && obj.userData.key === FLOOR.FLOOR_3) {
-          if (!obj.isForceParent ) {
+    if (type === FLOOR.FLOOR_3 || type === FLOOR.FLOOR_6) {
+      _this.objs.forEach(obj => {
+        if (obj.userData && obj.userData.key === type) {
+          if (!obj.isForceParent) {
             _this.outlineFactory.toggleOutline(obj);
-            if (pointType === 1) {
-              _this.focusObject(obj, true);
-              setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200);
-            } else {
+            // if (pointType === 1) {
+            //   _this.focusObject(obj, true);
+            //   setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200);
+            // } else {
+            //   _this.focusObject(obj);
+            // }
             _this.focusObject(obj);
-            }
-
             // 延迟显示告警点
-            setTimeout(() => {_this.renderAlarmMarker(type, item);}, 1100);
+            setTimeout(() => {
+              _this.renderAlarmMarker(type, item);
+            }, 1100);
           }
         }
       });
     }
 
     if (type === FLOOR.FLOOR_XY) {
-      _this.objs.forEach( obj => {
+      _this.objs.forEach(obj => {
         if (obj.userData && obj.userData.key === FLOOR.XY_FLOOR_3) {
-          if (!obj.isForceParent ) {
+          if (!obj.isForceParent) {
             _this.outlineFactory.toggleOutline(obj);
-            if (pointType === 1) {
-              _this.focusObject(obj, true);
-              setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200);
-            } else {
+            // if (pointType === 1) {
+            //   _this.focusObject(obj, true);
+            //   setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200);
+            // } else {
+            //   _this.focusObject(obj);
+            // }
             _this.focusObject(obj);
-            }
-
             // 延迟显示告警点
-            setTimeout(() => {_this.renderAlarmMarker(type, item);}, 1100);
+            setTimeout(() => {
+              _this.renderAlarmMarker(type, item);
+            }, 1100);
           }
         }
       });
     }
-  }
-
+  };
 
-  onAlarmClick1 = (type, item) => {
+  onAlarmClick1 = (pointtype, type, item) => {
     this.clearAlarms();
     this.clearMarkers();
     const _this = this;
     const pointType = parseInt(item.pointType);
     if (type === FLOOR.FLOOR_3) {
-      _this.objs.forEach( obj => {
+      _this.objs.forEach(obj => {
         if (obj.userData && obj.userData.key === FLOOR.FLOOR_3) {
-          if (!obj.isForceParent ) {
+          if (!obj.isForceParent) {
             _this.outlineFactory.toggleOutline(obj);
 
             _this.focusObject(obj);
 
+            // 延迟显示告警点
+            setTimeout(() => {
+              _this.renderAlarmMarker1(pointtype, type, item);
+            }, 1100);
+          }
+        }
+      });
+    }
+
+    if (type === FLOOR.FLOOR_6) {
+      _this.objs.forEach(obj => {
+        if (obj.userData && obj.userData.key === FLOOR.FLOOR_6) {
+          if (!obj.isForceParent) {
+            _this.outlineFactory.toggleOutline(obj);
+
+            _this.focusObject(obj);
 
             // 延迟显示告警点
-            setTimeout(() => {_this.renderAlarmMarker1(type, item);}, 1100);
+            setTimeout(() => {
+              _this.renderAlarmMarker1(pointtype, type, item);
+            }, 1100);
           }
         }
       });
     }
 
-    if (type === FLOOR.FLOOR_XY) {
-      _this.objs.forEach( obj => {
+    if (type === FLOOR.XY_FLOOR_3) {
+      _this.objs.forEach(obj => {
         if (obj.userData && obj.userData.key === FLOOR.XY_FLOOR_3) {
-          if (!obj.isForceParent ) {
+          if (!obj.isForceParent) {
             _this.outlineFactory.toggleOutline(obj);
 
             _this.focusObject(obj);
 
             // 延迟显示告警点
-            setTimeout(() => {_this.renderAlarmMarker1(type, item);}, 1100);
+            setTimeout(() => {
+              _this.renderAlarmMarker1(pointtype, type, item);
+            }, 1100);
           }
         }
       });
     }
-  }
-
+  };
 
   /**
    * 进入机柜
    *
    * @memberof View3D
    */
-  flyToCabinet = (object) => {
+  flyToCabinet = object => {
     const _this = this;
     _this.lensLevel = LENS_LEVEL.SUN;
     object.parent.children.forEach(childrenObj => {
       if (childrenObj.primaryKey === object.foreignKey) {
         childrenObj.children.forEach(obj => {
-          if (obj){
+          if (obj) {
             const userData = obj.userData;
             if (userData && userData.type === 'cabinet') {
               _this.onCabinetClick(obj, userData);
@@ -1381,12 +1552,9 @@ class View3D extends Component {
         });
       }
     });
-  }
-
-
-
+  };
 
-  renderAlarmMarker1 = (type, item) => {
+  renderAlarmMarker1 = (pointtype, type, item) => {
     const { markers } = this.state;
     const pointAttrs = JSON.parse(item.pointAttrs);
     if (pointAttrs.position) {
@@ -1401,15 +1569,20 @@ class View3D extends Component {
 
       alarmPoint.id = item.pointId;
       let levelType = '';
-      if (pointType === 3){//巡检
+      if (pointType === 3) {
+        //巡检
         levelType = '3';
-      } else if (pointType === 2){//动环
+      } else if (pointType === 2) {
+        //动环
         levelType = '01';
-      } else if (pointType === 6){ //火探
+      } else if (pointType === 6) {
+        //火探
         levelType = '02';
-      } else if (pointType === 1){//网络设备
+      } else if (pointType === 1) {
+        //网络设备
         levelType = '01';
-      } else if (pointType === 5){//虚拟设备（自动巡检设备）
+      } else if (pointType === 5) {
+        //虚拟设备（自动巡检设备）
         levelType = '03';
       }
       alarmPoint.level = levelType;
@@ -1418,8 +1591,8 @@ class View3D extends Component {
       alarmPoint.position = pointPosition;
       alarmPoint.title = item.pointName;
       alarmPoint.sourceId = item.sourceId;
-      alarmPoint.twinkle = false;
-      alarmPoint.type = pointType === 3 ? 'patrol' : ((pointType === 2)||(pointType === 6)) ? 'dynamicRingData' : 'impEquipment';
+      alarmPoint.twinkle = pointtype;
+      alarmPoint.type = pointType === 3 ? 'patrol' : pointType === 2 || pointType === 6 ? 'dynamicRingData' : 'impEquipment';
       let points = [];
       points.push(alarmPoint);
       markers[alarmPoint.type] = points;
@@ -1432,7 +1605,7 @@ class View3D extends Component {
         });
       }
     }
-  }
+  };
 
   /**
    * 生成告警点
@@ -1454,16 +1627,20 @@ class View3D extends Component {
 
       alarmPoint.id = item.pointId;
       let levelType = '';
-      if (pointType === 3){//巡检
+      if (pointType === 3) {
+        //巡检
         levelType = '3';
-      } else if (pointType === 2){//动环
+      } else if (pointType === 2) {
+        //动环
         levelType = '01';
-      }else if(pointType === 6){ //火探
+      } else if (pointType === 6) {
+        //火探
         levelType = '02';
-      }
-       else if (pointType === 1){//网络设备
+      } else if (pointType === 1) {
+        //网络设备
         levelType = '01';
-      } else if (pointType === 5){//虚拟设备（自动巡检设备）
+      } else if (pointType === 5) {
+        //虚拟设备（自动巡检设备）
         levelType = '03';
       }
       alarmPoint.level = levelType;
@@ -1472,10 +1649,14 @@ class View3D extends Component {
       alarmPoint.position = pointPosition;
       alarmPoint.title = item.pointName;
       alarmPoint.sourceId = item.sourceId;
+      if (pointAttrs.levelStr === 'impEqu_04') {
+        alarmPoint.levelStr = 'impEqu_04';
+      }
       alarmPoint.twinkle = true;
-      alarmPoint.type = pointType === 3 ? 'patrol' : ((pointType === 2)||(pointType === 6)) ? 'dynamicRingData' : 'impEquipment';
+      alarmPoint.type = pointType === 3 ? 'patrol' : pointType === 2 || pointType === 6 ? 'dynamicRingData' : 'impEquipment';
       let points = [];
       points.push(alarmPoint);
+
       markers[alarmPoint.type] = points;
 
       //console.log(markers);
@@ -1486,7 +1667,7 @@ class View3D extends Component {
         });
       }
     }
-  }
+  };
 
   /**
    * 弹出框关闭事件
@@ -1498,7 +1679,7 @@ class View3D extends Component {
       pickDialog: false,
       pickData: {}
     });
-  }
+  };
 
   /**
    * 渲染控制区
@@ -1508,19 +1689,21 @@ class View3D extends Component {
   renderMaskContent = () => {
     const { showExplain } = this.state;
     const { hiddenScreenSaver } = this.props;
-    return (<MaskContent
+    return (
+      <MaskContent
         onItemClick={this.changeMarkerType}
         layerConfig={layerConfig}
         showExplain={showExplain}
         onExplainClose={this.handleExplainClose}
         hiddenScreenSaver={hiddenScreenSaver}
-    />);
-  }
+      />
+    );
+  };
 
   afterRender = () => {
     this.objAnchorHelper && this.objAnchorHelper.update();
     this.infoHelper && this.infoHelper.update();
-  }
+  };
 
   render() {
     const {
@@ -1562,7 +1745,7 @@ class View3D extends Component {
         enableModelParser
         disabledEdit
         defaultLoading={false}
-        ref={node => this.a3dRef = node}
+        ref={node => (this.a3dRef = node)}
         baseObjs={objs}
         options={desigerConf.options}
         maskContent={isAllDone && this.renderMaskContent()}
@@ -1573,7 +1756,9 @@ class View3D extends Component {
         loadingManager={this.loadingManager}
         customLoading={<LoadingComs percent={percent} tip="正在搭载模型..." />}
       >
-        {startAsyncLoad && <WorkerObjContent objs={asyncModels} onWorkerMessage={this.onWorkerLoading} enableLoading={false} afterInit={this.onAfterWorkerInit} />}
+        {startAsyncLoad && (
+          <WorkerObjContent objs={asyncModels} onWorkerMessage={this.onWorkerLoading} enableLoading={false} afterInit={this.onAfterWorkerInit} />
+        )}
         <PointsPool markers={markers} orgCode={orgCode} updateMarker={this.updateMarker} />
 
         {isAllDone && <PointsAlarm alarms={alarms} onAlarmClick={this.onAlarmClick} visible />}

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/datapane/setting/index.js

@@ -31,8 +31,8 @@ class Setting extends Component {
         <Scrollbars>
           <div className="datapane-setting-content">
             <Collapse className="datapane-setting-collapse" activeKey={['1', '2', '3']} onChange={key=>console.log(key)}>
-              <Panel header="厂区选择" key="1">
-                <Button className="region-select" onClick={this.changeRegion}>切换厂区</Button>
+              <Panel header="部门选择" key="1">
+                <Button className="region-select" onClick={this.changeRegion}>切换部门</Button>
               </Panel>
               <Panel header="账户设置" key="2">
                 <UserSetting />

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

@@ -34,6 +34,8 @@ class View3DRoot extends Component {
       pid:null,
       pointName:"",
       pointAttrs:"",
+      floor:"",
+      pointtype:false,
     };
     this.pushTimeOutId = null;
   }
@@ -144,6 +146,10 @@ class View3DRoot extends Component {
         pid:status.pid,
         pointName:status.pointName,
         pointAttrs:status.pointAttrs,
+        floor:status.floor,
+        pointtype:status.pointtype,
+
+
       });
     }else{
       this.setState({
@@ -167,7 +173,7 @@ class View3DRoot extends Component {
       return (
         <div className="sys-view-3d">
           <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-          <Three3dView onLoadCompleted={this.onLoadCompleted} hiddenScreenSaver={this.hiddenScreenSaver} indexViewChange={this.indexViewChange} city={this.state.city} orgCode={this.state.orgCode} pointName={this.state.pointName} pointAttrs={this.state.pointAttrs} flag={this.state.flag} pid={this.state.pid} />
+          <Three3dView onLoadCompleted={this.onLoadCompleted} hiddenScreenSaver={this.hiddenScreenSaver} indexViewChange={this.indexViewChange} city={this.state.city} orgCode={this.state.orgCode} pointName={this.state.pointName} pointAttrs={this.state.pointAttrs} flag={this.state.flag} pid={this.state.pid}   floor={this.state.floor} pointtype={this.state.pointtype}/>
           {this.getScreenSaver()}
         </div>
       );

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/leftCharts.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Connect, Modal } from 'amos-framework';
+import { Connect, Modal, AmosAlert } from 'amos-framework';
 import AmosWebSocket from 'amos-websocket';
 import * as endConf from 'amos-processor/lib/config/endconf';
 import PilotController from 'amos-viz/lib/board/PilotController';
 import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts';
 // import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
 import { Table } from 'amos-antd';
-import BottomTable from './rightChartChild/bottomTable';
+import AlarmLineChart from './rightPane/alarmLineChart';
 import moment from 'moment';
 import { BarCharts } from 'amos-core';
-import { setPieOption,setLineOption } from './chartData';
+import { setPieOption, setLineOption } from './chartData';
 import ReactEcharts from 'amos-viz/lib/echarts';
 import { getLeftMetricDataAction, getLeftDangerDataAction } from './../../../../services/2dService';
+import { getSevenDaysAlarms, getMobileShowDate } from './../../../../services/alarmService';
 import { browserHistory } from 'amos-react-router';
 import { utils } from 'amos-tool';
 
@@ -24,56 +25,63 @@ const chartStyle = {
   width: '100%', height: '100%'
 };
 const chartDatas = {
-  dangerNums:{
+  dangerNums: {
     total: 0,
+    sevenAlarm: {
+      xAxis: [],
+      urgent: [],
+      important: [],
+      secondary: [],
+      warning: []
+    },
     data: [
       {
-        name:'一级风险',
-        value:'0/0'
-      },{
-        name:'二级风险',
-        value:'0/0'
-      },{
-        name:'三级风险',
-        value:'0/0'
-      },{
-        name:'四级风险',
-        value:'0/0'
+        name: '一级风险',
+        value: '0/0'
+      }, {
+        name: '二级风险',
+        value: '0/0'
+      }, {
+        name: '三级风险',
+        value: '0/0'
+      }, {
+        name: '四级风险',
+        value: '0/0'
       }
     ]
   },
-  alarmNums:{
+  alarmNums: {
     total: 223,
     data: [
       {
-        name:'紧急',
-        value:'0/0'
-      },{
-        name:'重要',
-        value:'0/0'
-      },{
-        name:'次要',
-        value:'0/0'
-      },{
-        name:'警告',
-        value:'0/0'
+        name: '紧急',
+        value: '0/0'
+      }, {
+        name: '重要',
+        value: '0/0'
+      }, {
+        name: '次要',
+        value: '0/0'
+      }, {
+        name: '警告',
+        value: '0/0'
       }
     ]
   },
-  equipmentData:[
+  equipmentData: [
     {
       name: '网络设备',
       num: 0,
       unit: '个',
       damageNum: 0,
       damageRate: '0%'
-    },{
+    }, {
       name: '服务器',
       num: 0,
       unit: '个',
       damageNum: 0,
       damageRate: '0%'
-    },{
+    }, {
       name: 'NPC节点',
       num: 0,
       unit: '个',
@@ -81,10 +89,10 @@ const chartDatas = {
       damageRate: '0%'
     }
   ],
-  rangeData:[
+  rangeData: [
     {
-      name:'中心机房',
-      data:[
+      name: '中心机房',
+      data: [
         {
           name: '供配电',
           normalNum: 11,
@@ -94,19 +102,19 @@ const chartDatas = {
           name: 'UPS',
           normalNum: 15,
           damageNum: 6
-        },{
+        }, {
           name: '精密空调',
           normalNum: 21,
           damageNum: 5
-        },{
+        }, {
           name: '其他',
           normalNum: 19,
           damageNum: 8
         }
       ]
-    },{
-      name:'通信转接机房',
-      data:[
+    }, {
+      name: '通信转接机房',
+      data: [
         {
           name: '供配电',
           normalNum: 13,
@@ -116,11 +124,11 @@ const chartDatas = {
           name: 'UPS',
           normalNum: 17,
           damageNum: 5
-        },{
+        }, {
           name: '精密空调',
           normalNum: 15,
           damageNum: 7
-        },{
+        }, {
           name: '其他',
           normalNum: 19,
           damageNum: 8
@@ -143,31 +151,31 @@ class LeftCharts extends Component {
     this.state = {
       currentCode: this.props.currentCode || '1*2',
       dangerNumData: [],
-      gjdate:[],
-      gjznum:0,
+      gjdate: [],
+      gjznum: 0,
       equipmentData: [],
-      dangerAllNum: [0,0]
+      dangerAllNum: [0, 0],
+      mobileDate: {
+        QSZX: [],
+        SBJ: [],
+        HB: [],
+        XFJC: [],
+        LSJC: []
+      }
     };
 
   }
 
   componentDidMount() {
-    // getLeftMetricDataAction({code:this.state.currentCode}).then(data => {
-    //   console.log('hhhhh',data);
-    //   this.setState({
-    //     dangerNumData: data
-    //   });
-    // });
     this.initData();
   }
 
-
-
   handleData = (data) => {
-    console.log(data);
-
+    console.log('WS风险总数刷新...');
+    setTimeout(() => {
       this.initData();
-}
+    }, 2000);
+  };
 
   componentWillReceiveProps = nextProps => {
     if (nextProps.currentCode && this.state.currentCode !== nextProps.currentCode) {
@@ -178,21 +186,20 @@ class LeftCharts extends Component {
     }
   };
   initData = () => {
-
     getLeftMetricDataAction({ code: this.state.currentCode }).then(data => {
-      // console.log('hhhhh',data);
 
       let dataList = data.data || [];
-      let num=0;
-      dataList.forEach(v=>{
-        num=num+Number(v.value.split('/')[1]);
+      let num = 0;
+      dataList.forEach(v => {
+        num = num + Number(v.value.split('/')[1]);
       });
       this.state.dangerAllNum[0] = num || 0;
-      this.props.dotTipNumChange(this.state.dangerAllNum[0]+this.state.dangerAllNum[1]);
+      this.props.dotTipNumChange(this.state.dangerAllNum[0] + this.state.dangerAllNum[1]);
       this.setState({
         dangerNumData: data,
         dangerAllNum: this.state.dangerAllNum
       });
+      if (data.result === 'FAILURE' && data.message) { AmosAlert.error('警告', data.message); }
     });
 
     let dates = {
@@ -211,13 +218,13 @@ class LeftCharts extends Component {
     getLeftDangerDataAction({ code: this.state.currentCode }).then(data => {
 
 
-      if (data&&data.length>0){
-        let num=0;
-        data.forEach(v=>{
-          num=num+v.value;
+      if (data && data.length > 0) {
+        let num = 0;
+        data.forEach(v => {
+          num = num + v.value;
         });
         this.state.dangerAllNum[1] = num || 0;
-        this.props.dotTipNumChange(this.state.dangerAllNum[0]+this.state.dangerAllNum[1]);
+        this.props.dotTipNumChange(this.state.dangerAllNum[0] + this.state.dangerAllNum[1]);
         this.setState({
           gjznum: num,
           dangerAllNum: this.state.dangerAllNum
@@ -235,28 +242,28 @@ class LeftCharts extends Component {
     //     equipmentData: data
     //   });
     // });
-  }
 
+    getSevenDaysAlarms().then(d => {
+      this.setState({ sevenAlarm: d });
+    });
+    getMobileShowDate().then(d => {
+      this.setState({ mobileDate: d });
+    });
+  }
 
-  gofx(){
 
+  gofx() {
     browserHistory.push('/biz/riskModel');
   }
 
-
-
-
-
-
-
   componentWillUnmount() {
 
   }
   renderDangerNum = () => {
     let { dangerNumData } = this.state;
-     return (dangerNumData.data || chartDatas.dangerNums.data || []).map((item,index) => {
+    return (dangerNumData.data || chartDatas.dangerNums.data || []).map((item, index) => {
       return (
-        <div className='item' key={index} onClick={ () => {this.gofx()} }>
+        <div className='item' key={index} onClick={() => { this.gofx() }}>
           <div className='itemContent'   >
             <span className='itemValue'>{item.value}</span>
             <span className='itemLable'>{item.name}</span>
@@ -279,8 +286,8 @@ class LeftCharts extends Component {
     let { gjdate } = this.state;
     // gjdate = gjdate.filter( e => { return e._id != null })
 
-    if(!utils.isEmpty(gjdate) && utils.isArray(gjdate)){
-      return (gjdate||[]).map((item, index) => {
+    if (!utils.isEmpty(gjdate) && utils.isArray(gjdate)) {
+      return (gjdate || []).map((item, index) => {
         return (
           <div className='item' key={index}>
             <div className='itemContent'>
@@ -291,9 +298,9 @@ class LeftCharts extends Component {
           </div>
         )
       })
-    }else{
+    } else {
       let alarmNumData = chartDatas.alarmNums.data || [];
-      return alarmNumData.map((item,index) => {
+      return alarmNumData.map((item, index) => {
         return (
           <div className='item' key={index}>
             <div className='itemContent'>
@@ -307,57 +314,90 @@ class LeftCharts extends Component {
     }
   }
   renderEquipmentData = () => {
-    let { equipmentData } = this.state;
-    if (equipmentData.length < 3) {
-      equipmentData = chartDatas.equipmentData;
-    }
-    // let equipmentData = chartDatas.equipmentData || [];
-    return (equipmentData || []).map((item, index) => {
+    let { mobileDate } = this.state;
+    console.log('mobileDate' + mobileDate.QSZX);
+    let wd1 = mobileDate.QSZX.find(item => item.text === '1#温湿度') || {};
+    let wd2 = mobileDate.QSZX.find(item => item.text === '2#温湿度') || {};
+    let wd3 = mobileDate.SBJ.find(item => item.text === '3#温湿度') || {};
+    let wd4 = mobileDate.SBJ.find(item => item.text === '4#温湿度') || {};
+    let wd5 = mobileDate.HB.find(item => item.text === '1温湿度') || {};
+    let wd6 = mobileDate.HB.find(item => item.text === '5温湿度') || {};
+    let xaxf = mobileDate.XFJC.find(item => item.area === '西安') || {};
+    let xyxf = mobileDate.XFJC.find(item => item.area === '咸阳') || {};
+    let xals = mobileDate.LSJC.find(item => item.area === '西安') || {};
+    let xyls = mobileDate.LSJC.find(item => item.area === '咸阳') || {};
     return (
-        <div className='item' key={index}>
-          <div className='chartBox'>
-            <BarCharts barOps={setPieOption(item)} />
+      <div className="equipmentdiv">
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.dyTopoURI} onMessage={this.handleData} reconnect debug />
+        <div className="quarter-div top-left">
+          <div className="dh-title">清算中心机房</div>
+          <div className='dh-content'>
+            <div className="dh-icon">
+              <img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
             </div>
-          <div className='chartDesc'>
-
-            <span className='itemName'>
-              {
-                item.name === '网络设备'?
-                  <span className='itemIcon' style={{ background: 'url("/src/assets/indexChart/net.png") no-repeat center center/100% 100%' }}></span>:
-                  item.name === '服务器'?
-                  <span className='itemIcon' style={{ background: 'url("/src/assets/indexChart/service.png") no-repeat center center/100% 100%' }}></span>:
-                  item.name === 'NPC节点'?
-                  <span className='itemIcon' style={{ background: 'url("/src/assets/indexChart/NPC.png") no-repeat center center/100% 100%' }}></span>:''
-              }
-              {item.templateAlias || item.name}
-            </span>
-            {
-              item.alarmTotal&&item.alarmTotal!=0?<span className='itemValue'>{`${Math.round(((item.alarmTotal / item.total)*100))}%   ${item.alarmTotal || 0}个`}</span>:
-              <span className='itemValue'>{`0%   0个`}</span>
-            }
-
+            <div className="dh-values" >
+              <div className="dh-values-item">3#温度：{wd3.value === undefined ? '0°C' : wd3.value } </div>
+              <div className="dh-values-item">4#温度：{wd4.value === undefined ? '0°C' : wd4.value }</div>
             </div>
           </div>
-      )
-    })
-  }
-  renderRangeData = () => {
-    let rangeData = chartDatas.rangeData || [];
-
-    return rangeData.map((item, index) => {
-      return (
-        <div className='item' key={index}>
-          <div className='chartDesc'>
-            <span className='itemName'>{item.name}</span>
         </div>
-          <div className='chartBox'>
-            {/*<LineCharts barOps={setLineOption(item)} chartStyle={chartStyle} />*/}
-            <ReactEcharts  option={setLineOption(item)} style={chartStyle} className="react_for_echarts" />
+        <div className="quarter-div top-right">
+          <div className="dh-title">设备间</div>
+          <div className='dh-content'>
+            <div className="dh-icon">
+              <img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
             </div>
+            <div className="dh-values" >
+              <div className="dh-values-item">1#温度：{wd1.value === undefined ? '0°C' : wd1.value } </div>
+              <div className="dh-values-item">2#温度：{wd1.value === undefined ? '0°C' : wd2.value }  </div>
             </div>
-      )
-    })
-  }
+          </div>
+        </div>
+        <div className="quarter-div down-left">
+          <div className="dh-title">货币发行机房</div>
+          <div className='dh-content'>
+            <div className="dh-icon">
+              <img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
+            </div>
+            <div className="dh-values" >
+              <div className="dh-values-item">1温度：{wd5.value === undefined ? '0°C' : wd5.value }  </div>
+              <div className="dh-values-item">5温度：{wd6.value === undefined ? '0°C' : wd6.value }  </div>
+            </div>
+          </div>
+        </div>
+        <div className="quarter-div">
+          <div className="xf-title">消防监测</div>
+          <div className="xf-values" >
+            <span className="xf-citys">西安：</span><span className={xaxf.value === '正常' ? 'xf-city-values' : 'xf-yc-values'}>{xaxf.value}</span>
+            <span className="xf-citys">咸阳：</span><span className={xyxf.value === '正常' ? 'xf-city-values' : 'xf-yc-values'}>{xyxf.value}</span>
+          </div>
+          <div className="xf-title">漏水监测</div>
+          <div className="xf-values" >
+            <span className="xf-citys">西安：</span><span className={xals.value === '正常' ? 'xf-city-values' : 'xf-yc-values'}>{xals.value}</span>
+            <span className="xf-citys">咸阳：</span><span className={xyls.value === '正常' ? 'xf-city-values' : 'xf-yc-values'}>{xyls.value}</span>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+
+  // renderRangeData = () => {
+  //   let rangeData = chartDatas.rangeData || [];
+
+  //   return rangeData.map((item, index) => {
+  //     return (
+  //       <div className='item' key={index}>
+  //         <div className='chartDesc'>
+  //           <span className='itemName'>{item.name}</span>
+  //         </div>
+  //         <div className='chartBox'>
+  //           <ReactEcharts option={setLineOption(item)} style={chartStyle} className="react_for_echarts" />
+  //         </div>
+  //       </div>
+  //     );
+  //   });
+  // }
   renderWorkList = () => {
     // let workMsg = chartDatas.workMsg || [];
 
@@ -377,7 +417,7 @@ class LeftCharts extends Component {
 
   render() {
     let now = moment().locale('zh-cn').format('YYYY-MM-DD');
-    const { dangerNumData,gjdate,gjznum } = this.state;
+    const { dangerNumData, gjdate, gjznum, sevenAlarm } = this.state;
     const wsURL = completeToken(SysWsURL.view3dws);
     return (
       <div className="chart-content">
@@ -402,46 +442,45 @@ class LeftCharts extends Component {
               <span className='titleLeft'>
                 <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
               告警统计</span>
-              <span className='titleRight'>{gjznum|| 0}</span>
+              <span className='titleRight'>{gjznum || 0}</span>
             </div>
           </div>
           <div className='chartBody'>
             {this.renderAlarmNum()}
           </div>
         </div>
-        {/**<div className='equipmentdata'>
+        <div className='equipmentdata'>
           <div className='tieleBox'>
             <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>
+                动环监控</span>
             </div>
           </div>
           <div className='chartBody'>
             {this.renderEquipmentData()}
           </div>
         </div>
-        <div className='rangeData'>
+        {/* <div className='rangeData'>
           <div className='tieleBox'>
             <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>
+              动环监控</span>
             </div>
           </div>
           <div className='chartBody'>
             {this.renderRangeData()}
           </div>
-    </div>*/}
-          <div className='business'>
+        </div> */}
+        <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>
-              <span className='titleRight'>{ now }</span>
+              <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }} />
+                告警趋势统计</span>
           </div>
           <div className='chartBody'>
-              <BottomTable />
+            <AlarmLineChart data={sevenAlarm} />
           </div>
         </div>
       </div>

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

@@ -21,10 +21,13 @@ class BusinessTable extends Component {
 
   render() {
     const { data = [], title = '' } = this.props;
-    let de = data.find(e=>{ return e.payName === '大额系统'}) || {};
-    let xe = data.find(e=>{ return e.payName === '小额系统'}) || {};
-    let wy = data.find(e=>{ return e.payName === '网银系统'}) || {};
-    //let jr = data.find(e=>{ return e.payName ==="境外系统"}) || {};
+    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 === '网银系统'}) || {};
+    // let jr = data.find(e=>{ return e.payName ==="境外系统"}) || {};
     return (
         <div className='business-table' key={this.props.key}>
           <div>{ title }</div>

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/rightChartChild/patrolDetail.js

@@ -7,7 +7,7 @@ import PilotController from 'amos-viz/lib/board/PilotController';
 import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts';
 // import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
 import { Table } from 'amos-antd';
-import { BarCharts,LineCharts } from 'amos-core';
+import { BarCharts, LineCharts } from 'amos-core';
 // import { setPieOption,setLineOption } from './chartData';
 import ReactEcharts from 'amos-viz/lib/echarts';
 import moment from 'moment';
@@ -15,7 +15,8 @@ import { List } from 'amos-framework';
 // import Three3dView from './View3D';
 // import { eventTopics } from './consts';
 // import IndexChart from './indexChart';
-import {  middleHeaderAction1 } from '../../../../../services/3dService';
+import { middleHeaderAction1, getporintAction } from '../../../../../services/3dService';
+import { OverFlowText, Tooltip, Pagination } from 'amos-framework';
 const chartStyle = {
   width: '100%', height: '100%'
 };
@@ -25,28 +26,23 @@ const AmosConfig = endConf.AmosConfig;
 const enableScreenSaver = AmosConfig.screenSaverConf.enable;
 const delayTime = AmosConfig.screenSaverConf.delayTime;
 //const totalDatas = [1,2,3,4,5,6];
-import { OverFlowText,Tooltip,Pagination } from 'amos-framework';
-
-
 
 @eventConnect
 class PatrolDetail extends Component {
 
   constructor(props) {
-    debugger
     super(props);
 
     this.state = {
       pageData: [],
       total: 0,//总页数
-      currentPage:1,
-      dataList1:[],
+      currentPage: 1,
+      dataList1: [],
     };
   }
 
-  calcPageData = (page,dataList) => {
-    debugger
-    if(dataList){
+  calcPageData = (page, dataList) => {
+    if (dataList) {
       const [currentPage, pageSize] = page.split('&'); // 当前页、每页大小
       const cp = currentPage.split('=')[1];
       const size = pageSize.split('=')[1];
@@ -54,13 +50,13 @@ class PatrolDetail extends Component {
       // const {dataList1} = this.state;
       const start = (parseInt(cp) - 1) * parseInt(size);
       const end = start + parseInt(size);
-      this.setState({ currentPage: cp});
+      this.setState({ currentPage: cp });
       // const { dataList } = this.props;
       // this.setState({ dataList1:dataList});
 
-      middleHeaderAction1(start,size,dataList[1],dataList[0]).then(data => {
-        if(data!=null){
-          this.setState({ pageData: data.date, total: data.num})
+      middleHeaderAction1(start, size, dataList[1], dataList[0]).then(data => {
+        if (data != null) {
+          this.setState({ pageData: data.date, total: data.num })
         }
       });
     }
@@ -68,24 +64,24 @@ class PatrolDetail extends Component {
 
   handlePageChange = (page) => {
     const { dataList } = this.props;
-    this.calcPageData(page,dataList);
+    this.calcPageData(page, dataList);
   }
 
   componentDidMount() {
     const { dataList } = this.props;
-    this.calcPageData('currentPage=1&pageSize=5',dataList);
+    this.calcPageData('currentPage=1&pageSize=5', dataList);
   }
 
-  componentWillReceiveProps(nextProps){
+  componentWillReceiveProps(nextProps) {
     const { dataList } = nextProps;
-    this.calcPageData('currentPage=1&pageSize=5',dataList);
+    this.calcPageData('currentPage=1&pageSize=5', dataList);
   }
 
   getOptions = (data) => {
     let seriesData = [
-      { value: data.passNum || 0, name:'正常' },
-      { value: data.nopassNum || 0, name:'异常' },
-      { value: data.overTime || 0, name:'漏检'}
+      { value: data.passNum || 0, name: '正常' },
+      { value: data.nopassNum || 0, name: '异常' },
+      { value: data.overTime || 0, name: '漏检' }
     ];
     return {
       // title : {
@@ -101,19 +97,19 @@ class PatrolDetail extends Component {
         formatter: "{b}: {c} ({d}%)"
       },
 
-      color:['#58f2f4','#ff8000','#ff0000'],
+      color: ['#58f2f4', '#ff8000', '#ff0000'],
       series: [
         {
-          name:'检查点',
-          type:'pie',
-          center:['50%','50%'],//饼图位置
+          name: '检查点',
+          type: 'pie',
+          center: ['50%', '50%'],//饼图位置
           radius: ['50%', '70%'],//外半径，内半径
           avoidLabelOverlap: false,
           label: {
             normal: {
               show: true,
               position: 'center',
-              formatter: function(param) {
+              formatter: function (param) {
                 let total = 0;
                 seriesData.forEach(e => {
                   total += e.value;
@@ -132,21 +128,21 @@ class PatrolDetail extends Component {
               show: false
             }
           },
-          data:seriesData
+          data: seriesData
         }
       ]
     };
   }
 
 
-go3xq = (id,name,coordinates) => {
-  debugger
-  this.props.markerOnClick1("xian",1,id,name,coordinates);
-
-} 
-
-
+  go3xq = (id, name, coordinates, floor) => {
+    getporintAction(id).then(data => {
+      if (data != null) {
 
+        this.props.markerOnClick1(data.cstype, 1, id, name, coordinates, floor, data.pointtype);
+      }
+    });
+  }
 
   getDate = () => {
     let currentDate = new Date();
@@ -157,9 +153,7 @@ go3xq = (id,name,coordinates) => {
   }
 
   render() {
-    const { total ,pageData,currentPage} = this.state;
-
-
+    const { total, pageData, currentPage } = this.state;
     return (
       <div className="patrolDetailContent chart-content">
         <div className='tieleBox'>
@@ -173,7 +167,7 @@ go3xq = (id,name,coordinates) => {
         <div className='contentBox'>
           <div className='business patrolItem'>
             <div className='list09'>
-            { pageData.map(item => {
+              {pageData.map(item => {
                 return (
                   <div className="list1">
                     <div className="list2">
@@ -188,27 +182,27 @@ go3xq = (id,name,coordinates) => {
                     <div className="list4"> 未开始：{item.noStartNum}&#12288; 异常：{item.noPassNum} &#12288;正常：{item.passNum} &#12288;漏点：{item.overTimeNum}</div>
                     <div className='clearfloat'  >
                       {item.pointReturn.map(f => {
-                    if (f.isFinish==='0'){
+                        if (f.isFinish === '0') {
                           return (
-                        <Tooltip className="item" title={ f.name } direction="up" align="middle">
-                          <div   onClick={ () => {this.go3xq(f.id,f.name,f.coordinates)} }  style={{ width: '17px' ,height: '17px' ,border: '1px solid #fff',margin:'3px' ,float:'left',background:'#CCCCCC' }} ></div>
+                            <Tooltip className="item" title={f.name} direction="up" align="middle">
+                              <div onClick={() => { this.go3xq(f.id, f.name, f.coordinates, f.floor) }} style={{ width: '17px', height: '17px', border: '1px solid #fff', margin: '3px', float: 'left', background: '#CCCCCC' }} ></div>
                             </Tooltip>
                           );
-                    } else if(f.isFinish==='1'){
+                        } else if (f.isFinish === '1') {
                           return (
-                        <Tooltip className="item" title={ f.name } direction="up" align="middle">
-                          <div   onClick={ () => {this.go3xq(f.id,f.name,f.coordinates)} }  style={{ width: '17px' ,height: '17px' ,border: '1px solid #fff',margin:'3px' ,float:'left',background:'#00FF00' }} ></div>
+                            <Tooltip className="item" title={f.name} direction="up" align="middle">
+                              <div onClick={() => { this.go3xq(f.id, f.name, f.coordinates, f.floor) }} style={{ width: '17px', height: '17px', border: '1px solid #fff', margin: '3px', float: 'left', background: '#00FF00' }} ></div>
                             </Tooltip>
                           );
-                    } else if(f.isFinish==='2'){
+                        } else if (f.isFinish === '2') {
                           return (
-                        <Tooltip className="item" title={ f.name } direction="up" align="middle">
-                          <div   onClick={ () => {this.go3xq(f.id,f.name,f.coordinates)} }  style={{ width: '17px' ,height: '17px' ,border: '1px solid #fff',margin:'3px' ,float:'left',background:'#FFFF33' }} ></div>
+                            <Tooltip className="item" title={f.name} direction="up" align="middle">
+                              <div onClick={() => { this.go3xq(f.id, f.name, f.coordinates, f.floor) }} style={{ width: '17px', height: '17px', border: '1px solid #fff', margin: '3px', float: 'left', background: '#FFFF33' }} ></div>
                             </Tooltip>
                           );
-                    } else{
-                      return <Tooltip className="item" title={ f.name } direction="up" align="middle">
-                          <div   onClick={ () => {this.go3xq(f.id,f.name,f.coordinates)} }  style={{ width: '17px' ,height: '17px' ,border: '1px solid #fff',margin:'3px' ,float:'left',background:'#FF0000' }} ></div>
+                        } else {
+                          return <Tooltip className="item" title={f.name} direction="up" align="middle">
+                            <div onClick={() => { this.go3xq(f.id, f.name, f.coordinates, f.floor) }} style={{ width: '17px', height: '17px', border: '1px solid #fff', margin: '3px', float: 'left', background: '#FF0000' }} ></div>
                           </Tooltip>
                         }
                       })
@@ -219,7 +213,7 @@ go3xq = (id,name,coordinates) => {
               })
               }
             </div>
-              <div className='pagination' style={{marginTop:'15px',marginLeft:'20px'}} >
+            <div className='pagination' style={{ marginTop: '15px', marginLeft: '20px' }} >
               <Pagination
                 currentPage={1}
                 totalPageNum={total}

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Connect, Modal } from 'amos-framework';
 import * as endConf from 'amos-processor/lib/config/endconf';
 import ReactEcharts from 'amos-viz/lib/echarts';
-import { rightTopChartAction ,getxuncountAction} from '../../../../../services/3dService';
+import { rightTopChartAction, getxuncountAction } from '../../../../../services/3dService';
 import SysWsURL, { completeToken } from './../../../../../consts/wsUrlConsts';
 import AmosWebSocket from 'amos-websocket';
 import moment from 'moment';
@@ -21,14 +21,14 @@ class TopCharts extends Component {
     super(props);
 
     this.state = {
-      data:{},
+      data: {},
       currentCode: '',
       technologyDataname: '',
       serviceDataname: '',
       technologyData: {},
       serviceData: {},
       dataList: [],
-      xun:{}
+      xun: {}
     };
   }
 
@@ -39,7 +39,7 @@ class TopCharts extends Component {
 
   componentWillReceiveProps = nextProps => {
     if (this.props.currentCode !== nextProps.currentCode) {
-      console.log(nextProps.currentCode,'nextProps.currentCode')
+      console.log(nextProps.currentCode, 'nextProps.currentCode')
       const { currentCode, curCompanyId } = nextProps || {};
       this.state.currentCode = currentCode;
       this.freshDataList(nextProps.curCompanyId);
@@ -48,9 +48,8 @@ class TopCharts extends Component {
     }
   };
 
-
   //巡检点统计
-  getxuncount(){
+  getxuncount() {
     getxuncountAction().then(data => {
       this.setState({
         xun: data
@@ -58,9 +57,7 @@ class TopCharts extends Component {
     });
   }
 
-
-
-  freshDataList(companyId){
+  freshDataList(companyId) {
     rightTopChartAction(companyId).then(data => {
       this.setState({
         dataList: data
@@ -68,13 +65,13 @@ class TopCharts extends Component {
     });
   }
 
-  getOptions = (data,title) => {
+  getOptions = (data, title) => {
     let seriesData = [
 
-      { value: data.normal || 0, name:'正常' },
-      { value: data.abnormal || 0, name:'异常'},
-      { value: data.missedDetection || 0, name:'漏点' },
-      { value: data.notIncluded || 0, name:'未计划' },
+      { value: data.normal || 0, name: '正常' },
+      { value: data.abnormal || 0, name: '异常' },
+      { value: data.missedDetection || 0, name: '漏点' },
+      { value: data.notIncluded || 0, name: '未计划' },
     ];
     return {
 
@@ -85,37 +82,37 @@ class TopCharts extends Component {
       legend: {
         orient: 'vertical',
         x: 'left',
-          top:'35%',
-          left:'10%',
-          itemWidth: 15,
-          itemHeight: 10,
+        top: '35%',
+        left: '10%',
+        itemWidth: 17,
+        itemHeight: 12,
         itemGap: 10,
-          data:['正常','异常','漏点','未计划'],
-          formatter: function(name) {
-            let curItem = seriesData.find( e => {
+        data: ['正常', '异常', '漏点', '未计划'],
+        formatter: function (name) {
+          let curItem = seriesData.find(e => {
             return e.name === name;
           })
-            var content = name +'：' + curItem.value;
+          var content = name + '：' + curItem.value;
           return content;
         },
         textStyle: {
           color: '#ffffff',//字体颜色
-            fontSize: 10
+          fontSize: 16
         }
       },
-      color:['#88FF00','#FF9100','#FF0000','#D8D8D8'],
+      color: ['#88FF00', '#FF9100', '#FF0000', '#D8D8D8'],
       series: [
         {
-              name:'检查点',
-              type:'pie',
-              center:['70%','60%'],//饼图位置
+          name: '检查点',
+          type: 'pie',
+          center: ['70%', '60%'],//饼图位置
           radius: ['50%', '70%'],//外半径，内半径
           avoidLabelOverlap: false,
           label: {
             normal: {
               show: true,
               position: 'center',
-                      formatter: function(param) {
+              formatter: function (param) {
                 let total = 0;
                 seriesData.forEach(e => {
                   total += e.value;
@@ -124,7 +121,7 @@ class TopCharts extends Component {
                 return view;
               },
               textStyle: {
-                        fontSize: 14,
+                fontSize: 16,
                 color: '#D8D8D8'
               },
             },
@@ -134,18 +131,18 @@ class TopCharts extends Component {
               show: false
             }
           },
-              data:seriesData
+          data: seriesData
         }
       ]
     };
   }
 
 
-  getOptionsx = (data,title) => {
+  getOptionsx = (data, title) => {
 
 
     return {
-      backgroundColor:'rgba(23,90,201,0.9)',
+      backgroundColor: 'rgba(23,90,201,0.9)',
       tooltip: {
         trigger: 'axis',
         axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -156,15 +153,16 @@ class TopCharts extends Component {
         left: '2%',
         right: '4%',
         bottom: '14%',
-           top:'16%',
+        top: '16%',
         containLabel: true
       },
       legend: {
-         data: ['未开始', '进行中', '已结束','已超时'],
+        data: ['未开始', '进行中', '已结束', '已超时'],
         right: 10,
-         top:12,
+        top: 12,
         textStyle: {
-             color: "#fff"
+          color: "#fff",
+          fontSize: 16
         },
         itemWidth: 12,
         itemHeight: 10,
@@ -172,21 +170,21 @@ class TopCharts extends Component {
       },
       xAxis: {
         type: 'category',
-           triggerEvent :true,
+        triggerEvent: true,
         data: data.x,
         axisLine: {
           lineStyle: {
             color: 'white'
-
           }
         },
         axisLabel: {
           // interval: 0,
           // rotate: 40,
           textStyle: {
-               fontFamily: 'Microsoft YaHei'
+            fontFamily: 'Microsoft YaHei',
+            fontSize: 14
+          }
         }
-           },
       },
 
       yAxis: {
@@ -212,11 +210,11 @@ class TopCharts extends Component {
         barWidth: '15%',
         itemStyle: {
           normal: {
-                color:'#02E3FC',
-                barBorderRadius: 11,
-            },
+            color: '#02E3FC',
+            barBorderRadius: 11
+          }
         },
-           data:data.wks
+        data: data.wks
       },
       {
         name: '进行中',
@@ -224,11 +222,11 @@ class TopCharts extends Component {
         barWidth: '15%',
         itemStyle: {
           normal: {
-                color:'#00FF55',
-                barBorderRadius: 11,
-            },
+            color: '#00FF55',
+            barBorderRadius: 11
+          }
         },
-        data:data.yxz
+        data: data.yxz
       },
       {
         name: '已结束',
@@ -236,12 +234,11 @@ class TopCharts extends Component {
         barWidth: '15%',
         itemStyle: {
           normal: {
-                color:'#FF8000',
-                barBorderRadius: 11,
-
-            },
+            color: '#FF8000',
+            barBorderRadius: 11
+          }
         },
-        data:data.yjs
+        data: data.yjs
       },
       {
         name: '已超时',
@@ -249,59 +246,43 @@ class TopCharts extends Component {
         barWidth: '15%',
         itemStyle: {
           normal: {
-                color:'#FF0000',
-                barBorderRadius: 11,
-
-            },
+            color: '#FF0000',
+            barBorderRadius: 11
+          }
         },
-        data:data.ycs
+        data: data.ycs
       }]
     };
   }
 
   onclick = {
     'click': this.clickEchartsPie.bind(this)
-}
-clickEchartsPie(e) {
+  }
+  clickEchartsPie(e) {
     const { dataList } = this.state;
-  let ff={}
+    let ff = {}
     isArray(dataList) && dataList.forEach(e => {
-
       ff = e;
     });
-  if(e.hasOwnProperty("name")){
-    if(ff[ff[e.name]]>0){
-
-      this.props.patrolDetailView(e.name,ff[e.name]);
-    }else{
+    if (e.hasOwnProperty("name")) {
+      if (ff[ff[e.name]] > 0) {
+        this.props.patrolDetailView(e.name, ff[e.name]);
+      } else {
         message.danger('当前没有巡检计划');
       }
-
-
-  }else{
-    if(ff[ff[e.value]]>0){
-
-      this.props.patrolDetailView(e.value,ff[e.value]);
-    }else{
+    } else {
+      if (ff[ff[e.value]] > 0) {
+        this.props.patrolDetailView(e.value, ff[e.value]);
+      } else {
         message.danger('当前没有巡检计划');
       }
 
     }
-
-
-
-
-
-}
-
-
-
-
-
+  }
 
   handleData = (data = {}) => {
     //console.log('topChart ws data:', data);
-    if (data === 'planTaskRefresh'){
+    if (data === 'planTaskRefresh') {
       this.getxuncount();
       this.freshDataList(this.props.curCompanyId);
     } else {
@@ -314,21 +295,16 @@ clickEchartsPie(e) {
     const { data, dataList } = this.state;
     const wsURL = completeToken(SysWsURL.topChartws);
     const planTaskWsURL = completeToken(SysWsURL.planTaskURI);
-    let { technologyData,xun, serviceData ,technologyDataname,serviceDataname} = this.state;
+    let { technologyData, xun, serviceData, technologyDataname, serviceDataname } = this.state;
     //console.log(dataList,'topchartDataList');
     isArray(dataList) && dataList.forEach(e => {
       technologyData = e;
     });
 
-
-
     return (
       <div className='left-chart-top'>
-
-
-           <div className='left-chart-child'>
-             <ReactEcharts option = { this.getOptionsx(technologyData, null) }  eventpool={this.onclick}/>
-
+        <div className='left-chart-child-patrol'>
+          <ReactEcharts option={this.getOptionsx(technologyData, null)} eventpool={this.onclick} />
         </div>
         <div className='left-chart-child'>
           <div className='title'>
@@ -336,8 +312,9 @@ clickEchartsPie(e) {
             <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
                   巡检点状态统计</span>
           </div>
-            <ReactEcharts option = { this.getOptions(xun,"") } className='child-pie'/>
-
+          <div className='left-chart-echars'>
+            <ReactEcharts option={this.getOptions(xun, "")} className='child-pie' />
+          </div>
         </div>
         <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
         <AmosWebSocket ref={node => this.aws = node} url={planTaskWsURL} onMessage={this.handleData} reconnect debug />

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>
-                  <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} />
@@ -51,27 +51,27 @@ class RightCharts extends Component {
                 <span className='titleLeft'>
                   <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>
-              <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>
     );

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/indexMap.js

@@ -25,10 +25,11 @@ import { getAlarms } from 'SERVICES/alarmService';
 import { Store, utils } from 'amos-tool';
 import * as endConf from 'amos-processor/lib/config/endconf';
 import { isArray } from 'amos-pluggable/lib/_utils';
-import { calcCoorArrUtil } from 'UTILS/CalcCoorArrUtil';
+import { calcCoorArrUtil, text2Speech } from 'UTILS/CalcCoorArrUtil';
 import { insertDistrict } from './common/mapUtils';
 import { getDictionaryList } from './../../../services/securityService';
 import { fetchJsonAction } from './../../../services/3dService';
+import { setOrgCode } from './../../../utils/request';
 import TwinkleDiv from './map/TwinkleDiv';
 import mqtt from 'mqtt';
 const AmosConfig = endConf.AmosConfig;
@@ -49,18 +50,20 @@ const mapConfig = {
   features: ['bg', 'road', 'point'] //隐藏默认楼块
 };
 
-
 const options = {
   //默认 30 * 1000毫秒，收到 CONNACK 之前等待的时间，即连接超时时间。
   connectTimeout: 40000,
   // 客户端 ID,随机生成
-  clientId: 'bank_mqtt' + Math.random().toString(16).substr(2, 8),
+  clientId:
+    'bank_mqtt' +
+    Math.random()
+      .toString(16)
+      .substr(2, 8),
   clean: true,
   //默认 1000 毫秒，两次重新连接之间的间隔，客户端 ID 重复、认证失败等客户端会重新连接；
   reconnectPeriod: 1000 * 50
-}
-let client = mqtt.connect(mqttURI, options)
-
+};
+let client = mqtt.connect(mqttURI, options);
 
 const layers = [
   new AMap.TileLayer({
@@ -69,7 +72,7 @@ const layers = [
     },
     zIndex: 0
   })
-]
+];
 
 const twoDimensionalMapConfig = {
   zooms: [_showZoom[0], _showZoom[2]],
@@ -108,8 +111,9 @@ class IndexMap extends Component {
       currentCard: 1,
       currentCss: 1,
       chartsViewFlag: [],
-      type: 'small',//当前图层展示的末端marker标识
-      styleCss: {//末端marker样式
+      type: 'small', //当前图层展示的末端marker标识
+      styleCss: {
+        //末端marker样式
         background: `url('/src/assets/sy/afterbody.png')`,
         backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
@@ -121,15 +125,17 @@ class IndexMap extends Component {
         lineHeight: '40px'
       },
       dotTipNum: 0,
-      pmdList: [],//跑马灯集合
+      pmdList: [], //跑马灯集合
+      isVoice: false, //控制语音播报渲染刷新页面不触发，仅接收消息触发
+      voiceList: [], //语音播报集合
       xianVisible: false,
       xianyangVisible: false,
-      xianAisleList: [],//西安通道集合
-      xianyangAisleList: [],//咸阳通道集合
-      centerList: [],//中心点集合
+      xianAisleList: [], //西安通道集合
+      xianyangAisleList: [], //咸阳通道集合
+      centerList: [], //中心点集合
       bankInfoList: [],
-      isEncircleShow: false,//是否环绕显示
-      isOnClickCity: false//是否点击的城市
+      isEncircleShow: false, //是否环绕显示
+      isOnClickCity: false //是否点击的城市
     };
   }
 
@@ -142,16 +148,17 @@ class IndexMap extends Component {
     this.receivcemqtt();
   }
 
+  //mqtt接收可删除
   receivcemqtt = () => {
-    client.on('connect', (e) => {
-      console.log("连接成功！！！")
+    client.on('connect', e => {
+      console.log('连接成功！！！');
       //QoS0，最多一次送达。也就是发出去就fire掉，没有后面的事情了。
       // QoS1，至少一次送达。发出去之后必须等待ack，没有ack，就要找时机重发
       // QoS2，准确一次送达。消息id将拥有一个简单的生命周期。
       // client.subscribe('bank/equipment/ping', { qos: 1 }, (res) => {
-      client.subscribe('bank/aisle/alarm', { qos: 1 }, (res) => {
+      client.subscribe('bank/aisle/alarm', { qos: 1 }, res => {
         if (!res) {
-          // console.log('订阅成功');
+          console.log('订阅成功');
           // fetchJsonAction('/src/_mock/map/eqp.json', (data) => {
           //   let metricJson = JSON.parse(data.metricDatas[0].metricJson);
           //   let eqpId = data.metricDatas[0].eqpId;
@@ -159,7 +166,7 @@ class IndexMap extends Component {
           //   this.initBankInfoList(null, eqpId, status);
           // });
         } else {
-          console.log('订阅失败')
+          console.log('订阅失败');
         }
       });
 
@@ -171,130 +178,45 @@ class IndexMap extends Component {
         let metricJson = JSON.parse(data.metricDatas[0].metricJson);
         let eqpId = data.metricDatas[0].eqpId;
         let status = metricJson.communication === '正常' ? 0 : 1;
-        this.initBankInfoList(null, eqpId, status);
+        //this.initBankInfoList(null, eqpId, status);
       });
 
       // 断开发起重连
-      client.on('reconnect', (error) => {
-        console.log('正在重连:', error)
+      client.on('reconnect', error => {
+        console.log('正在重连:', error);
       });
       // 链接异常处理
-      client.on('error', (error) => {
-        console.log('连接失败:', error)
+      client.on('error', error => {
+        console.log('连接失败:', error);
       });
     });
-  }
+  };
   /**
    * 初始化登录用户权限
    */
   getPermissionsCompany = () => {
-    //let selectedCompany = lsTool.read('selectedCompany');
-    let depName = null;
-    let sequenceNbr = null;
-    let city = null;
-    let userCity = null;
-    let department = lsTool.read('department');
-    if (department !== "undefined" && department !== null) {
-      let jsonObjDep = JSON.parse(department);
-      depName = jsonObjDep.departmentName;
-      sequenceNbr = this.getCompanyId(jsonObjDep);
-    }
-
-    if (depName !== null) {
-      city = depName && depName.indexOf('西安') === 0 ? 'xian' : 'xianyang';
-      userCity = city;
-    } else {
-      //如没有部门，则西安和咸阳查看的权限都有（带班领导、二线业务员、二线技术）
-      city = 'xian-xianyang';
-      userCity = 'xian-xianyang';
-    }
-
-
-    if (sequenceNbr === null) {
-      sequenceNbr = lsTool.read('companySequenceNbr');
-    }
-
+    //公司orgCode  selectedCompanyOrg
+    let orgCode = lsTool.read('selectedCompanyOrg');
+    //公司uuid
+    let sequenceNbr = lsTool.read('companySequenceNbr');
     let reginCompany = JSON.parse(lsTool.read('company'));
-    let companys = this.initCompanysData(reginCompany || []);
-
-    //let { orgCode, sequenceNbr } = this.getOrgCode(city, companys);
-    //let { orgCode, sequenceNbr } = this.getOrgCode(jsonObjDep);
-    //let orgCode = this.getOrgCode(jsonObjDep);
-    let dictionaryList = lsTool.read('dictionaryList');
-    let dicCodeList = JSON.parse(dictionaryList);
-    let orgCode = this.getSelectOrgCode(city, dicCodeList);
-
-    // if (depName.indexOf('西安') === 0){
-    //   this.setState({
-    //     city,
-    //     orgCode,
-    //     sequenceNbr,
-    //     companys,
-    //     currentCard: 1,
-    //     depName,
-    //     userCity,
-    //     reginCompany
-    //   });
-    // } else if (depName.indexOf('咸阳') === 0) {
-    //   this.setState({
-    //     city,
-    //     orgCode,
-    //     sequenceNbr,
-    //     companys,
-    //     depName,
-    //     userCity,
-    //     reginCompany,
-    //     currentCard: 2
-    //   });
-    // }
-
-    if (userCity.indexOf('xian-xianyang') !== -1) {
-      this.setState({
-        city,
-        orgCode,
-        sequenceNbr,
-        companys,
-        currentCard: 1,
-        depName,
-        userCity,
-        reginCompany
-      });
-    } else if (userCity.indexOf('xianyang') !== -1) {
     this.setState({
-        city,
       orgCode,
       sequenceNbr,
-        companys,
-        currentCard: 2,
-        depName,
-        userCity,
-        reginCompany
-      });
-    }
-    else {
-      this.setState({
-        city,
-        orgCode,
-        sequenceNbr,
-        companys,
-        depName,
-        userCity,
+      //companys,
       reginCompany,
       currentCard: 1
     });
-    }
 
-    lsTool.write('orgCode', orgCode);
-
-    console.log('选择的公司： ' + department);
-  }
+    setOrgCode(orgCode);
+  };
 
   /**
    * 查询银行经纬度列表
    */
   getBankInfoList = () => {
     let { bankInfoList } = this.state;
-    getBankInfoListData().then((data) => {
+    getBankInfoListData().then(data => {
       if (data) {
         data.centerList.map(e => {
           bankInfoList.push(e);
@@ -308,44 +230,44 @@ class IndexMap extends Component {
         });
       }
     });
-  }
+  };
 
   /**
    * 初始化数据，判断权限
    */
-  initCompanysData = (companys) => {
-    if (companys.length === 2 && companys[0].companyName.indexOf('咸阳') === 0) {
-      companys = companys.reverse();
-    }
-    if (companys.length === 1) {
-      if (companys[0].companyName.indexOf('西安') === 0) {
-        let xianyangCompany = { "companyOrgCode": "3", "companyName": "咸阳备份中心", "level": "subsidiary", "orgCode": "1*3", "sequenceNbr": "1251083542213996546" }
-        companys.push(xianyangCompany);
-      }
-    }
-    return companys;
-  }
+  // initCompanysData = (companys) => {
+  //   if (companys.length === 2 && companys[0].companyName.indexOf('咸阳') === 0) {
+  //     companys = companys.reverse();
+  //   }
+  //   if (companys.length === 1) {
+  //     if (companys[0].companyName.indexOf('西安') === 0) {
+  //       let xianyangCompany = { "companyOrgCode": "3", "companyName": "咸阳备份中心", "level": "subsidiary", "orgCode": "1*3", "sequenceNbr": "1251083542213996546" }
+  //       companys.push(xianyangCompany);
+  //     }
+  //   }
+  //   return companys;
+  // }
 
   /**
    * 查询通道信息及状态
    */
-  queryAisleList = (city) => {
+  queryAisleList = city => {
     if (city === '西安') {
-      queryAisleDataByCity(city).then((data) => {
+      queryAisleDataByCity(city).then(data => {
         let temp = this.isExist(xaMapData, data);
         this.setState({
           xianAisleList: temp
         });
       });
     } else {
-      queryAisleDataByCity(city).then((data) => {
+      queryAisleDataByCity(city).then(data => {
         let temp = this.isExist(xyMapData, data);
         this.setState({
           xianyangAisleList: temp
         });
       });
     }
-  }
+  };
 
   /**
    * 重构数据，增加alarmState字段，渲染不同曲线颜色
@@ -368,7 +290,7 @@ class IndexMap extends Component {
       }
     });
     return mapData;
-  }
+  };
 
   /**
    * 经纬度获取坐标曲线
@@ -379,7 +301,7 @@ class IndexMap extends Component {
    */
   calcCoorArr = (point_start, point_end, num, key) => {
     return calcCoorArrUtil(point_start, point_end, num, key);
-  }
+  };
 
   /**
    * 监听图层
@@ -389,78 +311,28 @@ class IndexMap extends Component {
     window.map.on('zoomchange', () => {
       thisMap.setStyleC(window.map.getZoom());
     });
-    // window.AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
-    //   //启动页面
-    //   //创建一个实例
-    //   var districtExplorer = new DistrictExplorer({
-    //     map: map //关联的地图实例
-    //   });
-
-    //   let adcode = 610000; //陕西的区划编码
+  };
 
-    //   districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
-    //     if (error) {
-    //       console.error(error);
-    //       return;
+  /**
+   * 根据传入的名称查询匹配orgCode
+   */
+  // getOrgCode = (city, companys) => {
+  //   let company;
+  //   if (city === 'xian') {
+  //     companys.map(o => {
+  //       if (o.companyName.indexOf('西安') === 0) {
+  //         company = o;
   //       }
-    //     renderAreaNode(districtExplorer, areaNode);
-    //     window.map.on('zoomchange', () => {
-    //       thisMap.setStyleC(window.map.getZoom());
-    //       renderAreaNode(districtExplorer, areaNode);
   //     });
-    //     // if (!outMap) {
-    //     //   renderAreaNode(districtExplorer, areaNode);
-    //     //   window.map.on('zoomchange', () => {
-    //     //     thisMap.setStyleC(window.map.getZoom());
-    //     //   });
-    //     // } else {
-    //     //   window.map.on('zoomchange', () => {
-    //     //     thisMap.setStyleC(window.map.getZoom());
-    //     //     renderAreaNode(districtExplorer, areaNode);
-    //     //     if (window.map.getZoom() === 6) {
-    //     //       outMap && districtExplorer.clearFeaturePolygons();
-    //     //     } else {
-    //     //       renderAreaNode(districtExplorer, areaNode);
-    //     //     }
-    //     //   });
-    //     // }
-    //   });
-    // });
-
-    // function renderAreaNode(districtExplorer, areaNode) {
-    //   //清除已有的绘制内容
-    //   districtExplorer.clearFeaturePolygons();
-    //   districtExplorer.renderParentFeature(areaNode, {
-    //     cursor: 'default',
-    //     bubble: true,
-    //     strokeColor: '#152AE8', //线颜色
-    //     fillColor: '#B4B8F7',
-    //     strokeWeight: 2, //线宽
-    //     fillOpacity: 0.4, //填充透明度
+  //   } else {
+  //     companys.map(o => {
+  //       if (o.companyName.indexOf('咸阳') === 0) {
+  //         company = o;
+  //       }
   //     });
   //   }
-  }
-
-  /**
-   * 根据传入的名称查询匹配orgCode
-   */
-  getOrgCode = (city, companys) => {
-    let company;
-    if (city === 'xian') {
-      companys.map(o => {
-        if (o.companyName.indexOf('西安') === 0) {
-          company = o;
-        }
-      });
-    } else {
-      companys.map(o => {
-        if (o.companyName.indexOf('咸阳') === 0) {
-          company = o;
-        }
-      });
-    }
-    return company;
-  }
+  //   return company;
+  // }
 
   // getOrgCode = (jsonObjDep) => {
   //    if(jsonObjDep && jsonObjDep !==null ){
@@ -470,19 +342,19 @@ class IndexMap extends Component {
   //    }
   // }
 
-  getCompanyId = (jsonObjDep) => {
+  getCompanyId = jsonObjDep => {
     if (jsonObjDep && jsonObjDep !== null) {
       let companyId = jsonObjDep.companySeq;
       return companyId;
     }
-  }
+  };
 
   /**
    * 点
    */
   markerEvents = {
-    click: (e) => {
-      let map = { 'is3DPage': true, 'city': e.target.F.extData.city };
+    click: e => {
+      let map = { is3DPage: true, city: e.target.F.extData.city };
       //this.props.indexViewChange(map);
     }
   };
@@ -496,15 +368,16 @@ class IndexMap extends Component {
    * 线
    */
   lineEvents = {
-    click: (e) => {
+    click: e => {
       let line = e.target.F.extData;
       let pointData = { citys: line.name };
-      setTimeout(()=> {//设置延时判断点击的线还是点
+      setTimeout(() => {
+        //设置延时判断点击的线还是点
         let { isOnClickCity } = this.state;
         if (isOnClickCity === false && line.name[0] === '西安') {
           browserHistory.push({ pathname: '/biz/defaultRoute', state: { cityLine: JSON.stringify(pointData) } });
         }
-      },500);
+      }, 500);
     }
   };
 
@@ -517,9 +390,9 @@ class IndexMap extends Component {
       if (item.dictDataKey === city) {
         orgCode = item.dictDataValue;
       }
-    })
+    });
     return orgCode;
-  }
+  };
 
   /**
    * 根据城市的orgCode，返回城市名称
@@ -530,50 +403,48 @@ class IndexMap extends Component {
       if (item.dictDataValue === orgCode) {
         city = item.dictDataKey;
       }
-    })
+    });
     return city;
-  }
-
-
+  };
 
   /**
    * 切换城市
    */
-  showCityInfo = (city, currentCard) => {
-
-    // let { companys } = this.state;
-    let userCity = this.state.userCity;
-    let company = this.state.reginCompany;
-    let dictionaryList = lsTool.read('dictionaryList');
-    let dicCodeList = JSON.parse(dictionaryList);
-    let orgCode = this.getSelectOrgCode(city, dicCodeList);
-    // if((userCity ==="xian" && city ==="xian") ||(userCity ==="xianyang" && city ==="xianyang") ){
-    //   this.setState({
-    //     city,
-    //     orgCode: company.orgCode,
-    //     sequenceNbr: company.sequenceNbr,
-    //     currentCard
-    //   });
-    // }else if(userCity ==="xian-xianyang"){
+  // showCityInfo = (city, currentCard) => {
+
+  //   // let { companys } = this.state;
+  //   let userCity = this.state.userCity;
+  //   let company = this.state.reginCompany;
+  //   let dictionaryList = lsTool.read('dictionaryList');
+  //   let dicCodeList = JSON.parse(dictionaryList);
+  //   let orgCode = this.getSelectOrgCode(city, dicCodeList);
+  //   // if((userCity ==="xian" && city ==="xian") ||(userCity ==="xianyang" && city ==="xianyang") ){
+  //   //   this.setState({
+  //   //     city,
+  //   //     orgCode: company.orgCode,
+  //   //     sequenceNbr: company.sequenceNbr,
+  //   //     currentCard
+  //   //   });
+  //   // }else if(userCity ==="xian-xianyang"){
+  //   //   this.setState({
+  //   //     city,
+  //   //     orgCode: company.orgCode,
+  //   //     sequenceNbr: company.sequenceNbr,
+  //   //     currentCard
+  //   //   });
+  //   //   console.log("您是所属西安CCPC，西安和咸阳数据都可以查看")
+  //   // }else if(userCity ==="xian" && city ==="xianyang"){
+  //   //   message.danger('您没有咸阳的权限，请联系管理员');
+  //   // }else if(userCity ==="xianyang" && city ==="xian"){
+  //   //   message.danger('您没有西安的权限，请联系管理员');
+  //   // }
   //   this.setState({
   //     city,
-    //     orgCode: company.orgCode,
+  //     orgCode: orgCode,
   //     sequenceNbr: company.sequenceNbr,
   //     currentCard
   //   });
-    //   console.log("您是所属西安CCPC，西安和咸阳数据都可以查看")
-    // }else if(userCity ==="xian" && city ==="xianyang"){
-    //   message.danger('您没有咸阳的权限，请联系管理员');
-    // }else if(userCity ==="xianyang" && city ==="xian"){
-    //   message.danger('您没有西安的权限，请联系管理员');
   // }
-    this.setState({
-      city,
-      orgCode: orgCode,
-      sequenceNbr: company.sequenceNbr,
-      currentCard
-    });
-  }
 
   /**
    * 展示陕西省地图
@@ -613,14 +484,14 @@ class IndexMap extends Component {
     } else {
       message.danger('当前没有巡检计划');
     }
-  }
+  };
 
   closePatrol = () => {
     this.setState({
       patrolView: false
     });
-  }
-  chartsView = (itemKey) => {
+  };
+  chartsView = itemKey => {
     if (itemKey.length < 1 || itemKey[0] === 'dangerMsg' || itemKey[0] === 'applyMsg') {
       this.setState({
         chartsViewFlag: itemKey,
@@ -631,12 +502,12 @@ class IndexMap extends Component {
         chartsViewFlag: itemKey
       });
     }
-  }
+  };
 
   /**
    * 不同图层渲染图标大小
    */
-  setStyleC = (zoom) => {
+  setStyleC = zoom => {
     if (zoom >= 8) {
       this.setState({
         type: 'middle',
@@ -661,7 +532,7 @@ class IndexMap extends Component {
         }
       });
     }
-  }
+  };
 
   /**
    * 13层以上设置地名环绕
@@ -670,12 +541,12 @@ class IndexMap extends Component {
     this.setState({
       isEncircleShow: true
     });
-  }
+  };
 
   /**
    * 通道末端marker点
    */
-  setBodyMarker = (bankInfoList) => {
+  setBodyMarker = bankInfoList => {
     let { styleCss, type, isEncircleShow } = this.state;
     if (isEncircleShow) {
       // return xaMapData.map((item, index) => {
@@ -689,14 +560,23 @@ class IndexMap extends Component {
       //   }
       // });
       return bankInfoList.map((item, index) => {
-        if (item.eName !== 'xian' && item.eName !== 'xianyang' && item.eName !== 'xidajie' && item.eName !== 'bj-bank' && item.eName !== 'wx-bank' && item.eName !== 'sh-bank') {
-          return (<Marker zIndex={19} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents}>
-            <div className={`after_line_${type} line${item.id}`} style={styleCss} ></div>
+        if (
+          item.eName !== 'xian' &&
+          item.eName !== 'xianyang' &&
+          item.eName !== 'xidajie' &&
+          item.eName !== 'bj-bank' &&
+          item.eName !== 'wx-bank' &&
+          item.eName !== 'sh-bank'
+        ) {
+          return (
+            <Marker zIndex={19} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents}>
+              <div className={`after_line_${type} line${item.id}`} style={styleCss}></div>
               <div className={`after_circle_title`}>
                 <span>{item.aName}</span>
-              { item.status === 1 && <div className={`pulse-spread-circle`} /> }
+                {item.status === 1 && <div className={`pulse-spread-circle`} />}
               </div>
-          </Marker>)
+            </Marker>
+          );
         }
       });
     } else {
@@ -712,167 +592,355 @@ class IndexMap extends Component {
       //   }
       // });
       return bankInfoList.map((item, index) => {
-        if (item.eName !== 'xian' && item.eName !== 'xianyang' && item.eName !== 'xidajie' && item.eName !== 'bj-bank' && item.eName !== 'wx-bank' && item.eName !== 'sh-bank') {
-          return (<Marker zIndex={19} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents}>
-            <div className={`after_line_${type} line${item.id}`} style={styleCss} ></div>
+        if (
+          item.eName !== 'xian' &&
+          item.eName !== 'xianyang' &&
+          item.eName !== 'xidajie' &&
+          item.eName !== 'bj-bank' &&
+          item.eName !== 'wx-bank' &&
+          item.eName !== 'sh-bank'
+        ) {
+          return (
+            <Marker zIndex={19} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents}>
+              <div className={`after_line_${type} line${item.id}`} style={styleCss}></div>
               {/*<div className={`after_circle_${type} title${item.id}`}>
               <img src={item.imgSrc} ></img>
               <span>{item.alias}</span>
           </div>*/}
-          </Marker>);
+            </Marker>
+          );
         }
       });
     }
-  }
+  };
 
   /**
    *设置中心点的marker点
    *
    * @memberof IndexMap
    */
-  setCenterMarker = (centerList) => {
+  setCenterMarker = centerList => {
     let { isEncircleShow, xianVisible, xianyangVisible } = this.state;
     if (isEncircleShow) {
       return centerList.map((item, index) => {
         if (item) {
-          return (<Marker key={item} zIndex={20} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents} extData={{ 'city': item.eName }}>
+          return (
+            <Marker key={item} zIndex={20} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents} extData={{ city: item.eName }}>
               <div className={`after_circle_title_center`}>
-              <span onClick={() => { this.markerOnClick(item.eName) }}>{item.aName}</span>
-              {item.eName === 'xian' && xianVisible && <div className="pulse-spread-xian" /> }
-              {item.eName === 'xianyang' && xianyangVisible && <div className="pulse-spread-xianyang" /> }
+                <span
+                  onClick={() => {
+                    this.markerOnClick(item.eName);
+                  }}
+                >
+                  {item.aName}
+                </span>
+                {item.eName === 'xian' && xianVisible && <div className="pulse-spread-xian" />}
+                {item.eName === 'xianyang' && xianyangVisible && <div className="pulse-spread-xianyang" />}
               </div>
               <div className={`after_circle_center`}>
-              <img src="/src/assets/sy/center.png" onClick={() => { this.markerOnClick(item.eName) }}></img>
+                <img
+                  src="/src/assets/sy/center.png"
+                  onClick={() => {
+                    this.markerOnClick(item.eName);
+                  }}
+                ></img>
               </div>
-          </Marker>);
+            </Marker>
+          );
         }
       });
     } else {
       return centerList.map((item, index) => {
         if (item) {
-          return (<Marker key={item} zIndex={20} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents} extData={{ 'city': item.eName }}>
+          return (
+            <Marker key={item} zIndex={20} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents} extData={{ city: item.eName }}>
               <div className={`after_circle_small center`}>
-              <img src="/src/assets/sy/center.png" onClick={() => { this.markerOnClick(item.eName) }}></img>
+                <img
+                  src="/src/assets/sy/center.png"
+                  onClick={() => {
+                    this.markerOnClick(item.eName);
+                  }}
+                ></img>
               </div>
-          </Marker>);
+            </Marker>
+          );
         }
       });
     }
-  }
+  };
 
   /**
    * 根据状态匹配不同通道颜色
    * @param {} alarmState
    */
-  setSelectAisleStyle = (alarmState) => {
+  setSelectAisleStyle = alarmState => {
     switch (alarmState) {
       case '正常':
         return this.state.selectStyle;
       case '异常':
         return this.setSelectColor(4);
     }
-  }
+  };
 
-  setUnSelectAisleStyle = (alarmState) => {
+  setUnSelectAisleStyle = alarmState => {
     switch (alarmState) {
       case '正常':
         return this.state.unSelectStyle;
       case '异常':
         return this.setUnSelectColor(4);
     }
-  }
+  };
 
-  setSelectColor = (index) => {
+  setSelectColor = index => {
     let colorStyle = { strokeColor: LineColors[index], fillColor: LineColors[index], strokeWeight: '3' };
     return colorStyle;
-  }
+  };
 
-  setUnSelectColor = (index) => {
+  setUnSelectColor = index => {
     let colorStyle = { strokeColor: LineColors[index], fillColor: LineColors[index], strokeWeight: '1' };
     return colorStyle;
-  }
+  };
 
   /**
    * 点击名称切换三维
    */
-  markerOnClick = (city) => {
-    // let { orgCode } = this.getOrgCode(city, this.state.companys);
-    if (city === 'xian' || city === 'xianyang' || city === 'xidajie'){
-      this.state.isOnClickCity=true;
+  markerOnClick = (city, sourceIdStr) => {
+    //跳转告警页面
+    if (city !== 'xian' && city !== 'xianyang' && city !== 'xidajie') {
+      if (!sourceIdStr) {
+        message.danger('该银行未绑定设备');
+        return;
+      }
+      let path = {
+        pathname: '/main/warn',
+        state: { sourceId: sourceIdStr }
+      };
+      browserHistory.push(path);
+      return;
+    }
+
+    this.state.isOnClickCity = true;
+    let selectedCompanyOrg = lsTool.read('selectedCompanyOrg');
     let dictionaryList = lsTool.read('dictionaryList');
     let dicCodeList = JSON.parse(dictionaryList);
-      let orgCode = this.getSelectOrgCode(city, dicCodeList);
-      let selectedCompany = lsTool.read('selectedCompany');
+    let companyName = this.getSelectCityByOrgCode(selectedCompanyOrg, dicCodeList);
     let map = null;
-      if (selectedCompany.indexOf("西安CCPC") !== -1) {
-        map = { 'is3DPage': true, 'city': city, 'orgCode': orgCode };
+
+    if (companyName && companyName.indexOf('清算中心') !== -1) {
+      let orgCode = this.getSelectOrgCode(city, dicCodeList);
+      if (city === 'xian' || city === 'xianyang' || city === 'xidajie') {
+        map = { is3DPage: true, city: city, orgCode: orgCode };
       } else {
-        //如果不是西安CCPC，orgCode为空
-        map = { 'is3DPage': true, 'city': city, 'orgCode': '' };
+        map = { is3DPage: true, city: '', orgCode: '' };
+      }
+    } else if (companyName && companyName.indexOf('科技处') !== -1) {
+      // map = { 'is3DPage': true, 'city': '', 'orgCode': selectedCompanyOrg };
+      let newOrgCode = null;
+      if (city === 'xian') {
+        newOrgCode = this.getSelectOrgCode('科技处西安', dicCodeList);
       }
 
-      this.props.indexViewChange(map);
+      if (city === 'xianyang') {
+        newOrgCode = this.getSelectOrgCode('科技处咸阳', dicCodeList);
       }
+
+      if (city === 'xian' || city === 'xianyang' || city === 'xidajie') {
+        map = { is3DPage: true, city: city, orgCode: newOrgCode };
+      } else {
+        map = { is3DPage: true, city: '', orgCode: '' };
+      }
+    } else {
+      map = { is3DPage: true, city: '', orgCode: '' };
     }
 
-  markerOnClick1 = (city,flag,id,  pointName,pointAttrs) => {
-   // let { orgCode } = this.getOrgCode(city, this.state.companys);
+    this.props.indexViewChange(map);
+  };
+
+  markerOnClick1 = (city, flag, id, pointName, pointAttrs, floor, pointtype) => {
+    this.state.isOnClickCity = true;
+    let selectedCompanyOrg = lsTool.read('selectedCompanyOrg');
     let dictionaryList = lsTool.read('dictionaryList');
     let dicCodeList = JSON.parse(dictionaryList);
-    let orgCode = this.getSelectOrgCode(city,dicCodeList);
-    let selectedCompany = lsTool.read('selectedCompany');
+    let companyName = this.getSelectCityByOrgCode(selectedCompanyOrg, dicCodeList);
     let map = null;
-    if (selectedCompany.indexOf("西安CCPC")!==-1){
-      map = { 'is3DPage': true, 'city': city, 'orgCode': orgCode ,'flag':flag,'pid':id,'pointName':pointName,'pointAttrs':pointAttrs};
+
+    if (companyName && companyName.indexOf('清算中心') !== -1) {
+      let orgCode = this.getSelectOrgCode(city, dicCodeList);
+      if (city === 'xian' || city === 'xianyang' || city === 'xidajie') {
+        map = {
+          is3DPage: true,
+          city: city,
+          orgCode: orgCode,
+          flag: flag,
+          pid: id,
+          pointName: pointName,
+          pointAttrs: pointAttrs,
+          floor: floor,
+          pointtype: pointtype
+        };
       } else {
-      //如果不是西安CCPC，orgCode为空
-      map = { 'is3DPage': true, 'city': city, 'orgCode': '','flag':flag ,'pid':id,'pointName':pointName,'pointAttrs':pointAttrs};
+        map = { is3DPage: true, city: '', orgCode: '', flag: flag, pid: id, pointName: pointName, pointAttrs: pointAttrs, floor: floor, pointtype: pointtype };
+      }
+    } else if (companyName && companyName.indexOf('科技处') !== -1) {
+      // map = { 'is3DPage': true, 'city': '', 'orgCode': selectedCompanyOrg };
+      let newOrgCode = null;
+      if (city === 'xian') {
+        newOrgCode = this.getSelectOrgCode('科技处西安', dicCodeList);
       }
 
-    this.props.indexViewChange(map);
+      if (city === 'xianyang') {
+        newOrgCode = this.getSelectOrgCode('科技处咸阳', dicCodeList);
+      }
+
+      if (city === 'xian' || city === 'xianyang' || city === 'xidajie') {
+        map = {
+          is3DPage: true,
+          city: city,
+          orgCode: newOrgCode,
+          flag: flag,
+          pid: id,
+          pointName: pointName,
+          pointAttrs: pointAttrs,
+          floor: floor,
+          pointtype: pointtype
+        };
+      } else {
+        map = { is3DPage: true, city: '', orgCode: '', flag: flag, pid: id, pointName: pointName, pointAttrs: pointAttrs, floor: floor, pointtype: pointtype };
+      }
+    } else {
+      map = { is3DPage: true, city: '', orgCode: '', flag: flag, pid: id, pointName: pointName, pointAttrs: pointAttrs, floor: floor, pointtype: pointtype };
     }
 
-  dotTipNumChange = (num) => {
+    this.props.indexViewChange(map);
+  };
+
+  dotTipNumChange = num => {
     if (num !== this.state.dotTipNum) {
       this.setState({
         dotTipNum: num
       });
     }
+  };
+
+  existData = (code, orgCode) => {
+    let xianshi = false;
+    if (code) {
+      if (code.indexOf('#') !== -1) {
+        let split = code.split('#') || [];
+        split.map(item => {
+          if (item.indexOf('-') !== -1) {
+            let array = item.split('-') || [];
+            if (array.length > 0 && array[0] === orgCode) {
+              xianshi = true;
+            }
+          } else {
+            if (item === orgCode) {
+              xianshi = true;
+            }
           }
+        });
+      } else {
+        let arr = code.split('-') || [];
+        if (arr.length > 0 && arr[0] === orgCode) {
+          xianshi = true;
+        }
+      }
+    }
+    return xianshi;
+  };
 
-  /**
-   * 初始化告警数据
-   */
-  queeryAlarms = () => {
+
+  //处理告警数据
+  handleAlarmData = () => {
+    getAlarms().then(data => {
+      this.processingAlarmData(data);
+    });
+  }
+
+  //过滤告警列表
+  processingAlarmData = data => {
+    let { orgCode, pmdList } = this.state;
+    if (orgCode !== '') {
       let dictionaryList = lsTool.read('dictionaryList');
       let dicCodeList = JSON.parse(dictionaryList);
       let xianCode = this.getSelectOrgCode('xian', dicCodeList);
       let xianyangCode = this.getSelectOrgCode('xianyang', dicCodeList);
+      // let kejichuCode = this.getSelectOrgCode('科技处', dicCodeList);
+      //  let qingsuanzhongxin = this.getSelectOrgCode('清算中心', dicCodeList);
+      let kejichuxianCode = this.getSelectOrgCode('科技处西安', dicCodeList);
+      let kejichuxianyangCode = this.getSelectOrgCode('科技处咸阳', dicCodeList);
+      //过滤该公司没有权限的设备（有则跑马灯显示，否则不显示）
+      let newData = [];
+      data.map(e => {
+        let xianshi = this.existData(e.code, orgCode);
+        let authOrgXianshi = this.existData(e.authOrg, orgCode);
+        if (xianshi || authOrgXianshi) {
+          newData.push(e);
+        }
+      });
 
-    getAlarms().then(data => {
-      if (!utils.isEmpty(data) && utils.isArray(data)) {
-        const xianFlag = data.some(e => {
+      if (!utils.isEmpty(newData) && utils.isArray(newData)) {
+        const xianFlag = newData.some(e => {
           // if (e.code === xianCode) {
-          if (e.code.startsWith(xianCode) || e.authOrg && e.authOrg.indexOf(xianCode) !== -1) {
+          if (e.code.startsWith(xianCode) || e.code.startsWith(kejichuxianCode) || ((e.authOrg && e.authOrg.indexOf(xianCode) !== -1) || (e.authOrg && e.authOrg.indexOf(kejichuxianCode) !== -1))) {
             return true;
           }
         });
-        const xianyangFlag = data.some(e => {
-          if (e.code.startsWith(xianyangCode) || e.authOrg && e.authOrg.indexOf(xianyangCode) !== -1) {
+        const xianyangFlag = newData.some(e => {
+          if (
+            e.code.startsWith(xianyangCode) || e.code.startsWith(kejichuxianyangCode) ||
+            ((e.authOrg && e.authOrg.indexOf(xianyangCode) !== -1) || (e.authOrg && e.authOrg.indexOf(kejichuxianyangCode) !== -1))
+          ) {
             return true;
           }
         });
 
+        this.compareAlarms(pmdList, newData);
+
         this.setState({
-          pmdList: data,
+          pmdList: newData,
           xianVisible: xianFlag,
           xianyangVisible: xianyangFlag
         });
 
         this.initBankInfoList('xian', null, xianFlag);
         this.initBankInfoList('xianyang', null, xianyangFlag);
+      } else {
+        this.setState({
+          pmdList: newData,
+          xianVisible: false,
+          xianyangVisible: false
+        });
+        this.initBankInfoList('xian', null, false);
+        this.initBankInfoList('xianyang', null, false);
       }
+    }
+    this.setState({ isVoice: false });
+  };
+
+
+  /**
+   * 初始化告警数据
+   */
+  queeryAlarms = () => {
+    this.handleAlarmData();
+  };
+
+  /**
+   * 对比数据判断语音播报内容
+   */
+  compareAlarms = (pmdList, newPmdList) => {
+    const { isVoice } = this.state;
+    if (isVoice) {
+      let voiceList = newPmdList && newPmdList.filter(a => !pmdList.some(b => b.id === a.id));
+      this.setState({
+        voiceList
+      });
+      voiceList.forEach(e => {
+        text2Speech(e.content);
       });
+      console.log('新增告警', voiceList);
+    }
   }
 
   /**
@@ -883,7 +951,7 @@ class IndexMap extends Component {
   initBankInfoList = (city, eqpId, status) => {
     let { bankInfoList } = this.state;
     bankInfoList.forEach(bankInfo => {
-      if (eqpId && bankInfo.sourceId === eqpId) {
+      if (eqpId && bankInfo.sourceIdStr && bankInfo.sourceIdStr.indexOf(eqpId) >= 0) {
         bankInfo.status = status;
       } else if (city && bankInfo.eName === city) {
         status = status ? 1 : 0;
@@ -893,49 +961,24 @@ class IndexMap extends Component {
     this.setState({
       bankInfoList
     });
-  }
+  };
 
   /**
-   * webSocket接收轨迹数据
+   * webSocket接收数据
    */
-  handleData = (data) => {
-    let dictionaryList = lsTool.read('dictionaryList');
-    let dicCodeList = JSON.parse(dictionaryList);
-    let xianCode = this.getSelectOrgCode('xian', dicCodeList);
-    let xianyangCode = this.getSelectOrgCode('xianyang', dicCodeList);
-    console.log('alarmMarquee', data);
-    let handleXianFlag = false;
-    let handleXianyangFlag = false;
-    if (!utils.isEmpty(data) && utils.isArray(data)) {
-      const xianFlag = data.some(e => {
-        if (e.code.startsWith(xianCode)) {
-          return true;
-        }
-      });
-      const xianyangFlag = data.some(e => {
-        if (e.code.startsWith(xianyangCode)) {
-          return true;
-        }
-      });
-      handleXianFlag = xianFlag;
-      handleXianyangFlag = xianyangFlag;
-    }
-    this.initBankInfoList('xian', null, handleXianFlag);
-    this.initBankInfoList('xianyang', null, handleXianyangFlag);
-    this.setState({
-      pmdList: data,
-      xianVisible: handleXianFlag,
-      xianyangVisible: handleXianyangFlag
-    });
-  }
+  handleData = data => {
+    this.setState({ isVoice: true });
+    this.handleAlarmData();
+  };
 
   /**
    * webSocket接收通道状态数据
    */
-  aisleIndexHandleData = (data) => {
+  aisleIndexHandleData = data => {
     //data = data.index;
     console.log('aisleWS', data);
     if (data) {
+      this.initBankInfoList(null, data.eqpId, data.status);
       this.queryAisleList('西安');
       this.queryAisleList('咸阳');
       // const flag = data.some(e => {
@@ -955,14 +998,37 @@ class IndexMap extends Component {
       //   });
       // }
     }
-  }
+  };
 
   render() {
     const events = {
       created: this.setInstanceToGlobal
     };
-    let { mapCenter, isIndexMap, patrolView, patrolDescData, city, selectStyle, unSelectStyle, orgCode, sequenceNbr, companys, currentCard, currentCss,
-      chartsViewFlag, dotTipNum, pmdList, xianVisible, xianyangVisible, xianAisleList, xianyangAisleList, centerList, isEncircleShow, bankInfoList, styleCss } = this.state;
+    let {
+      mapCenter,
+      isIndexMap,
+      patrolView,
+      patrolDescData,
+      city,
+      selectStyle,
+      unSelectStyle,
+      orgCode,
+      sequenceNbr,
+      companys,
+      currentCard,
+      currentCss,
+      chartsViewFlag,
+      dotTipNum,
+      pmdList,
+      xianVisible,
+      xianyangVisible,
+      xianAisleList,
+      xianyangAisleList,
+      centerList,
+      isEncircleShow,
+      bankInfoList,
+      styleCss
+    } = this.state;
     let cardCss1 = 'small-card-css';
     let cardCss2 = 'small-card-css';
     // 旧版点击样式，正式上线前需删除
@@ -998,10 +1064,10 @@ class IndexMap extends Component {
 
     return (
       <div className="content indexPage">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-        <AmosWebSocket ref={node => this.aws = node} url={aisleURL} onMessage={this.aisleIndexHandleData} reconnect debug />
+        <AmosWebSocket ref={node => (this.aws = node)} url={wsURL} onMessage={this.handleData} reconnect debug />
+        <AmosWebSocket ref={node => (this.aws = node)} url={aisleURL} onMessage={this.aisleIndexHandleData} reconnect debug />
         <AlarmMarquee pmdList={pmdList} />
-        <div className='body-left'>
+        <div className="body-left">
           {/**<div className='body-left' style={{ display: chartsViewFlag[0] === 'dangerMsg' ? 'block' : 'none' }}>**/}
           {/**<div><img src='/src/assets/sy/indexLeft.png' /></div>*/}
           <LeftCharts currentCode={orgCode} dotTipNumChange={this.dotTipNumChange} />
@@ -1019,9 +1085,14 @@ class IndexMap extends Component {
               </div>
             </Col>
           </div>*/}
-          <div className="new_track" onClick={() => { currentCss === 1 ? this.show2dMap(2) : this.showIndexMap(1) }}>
+          {/* <div
+            className="new_track"
+            onClick={() => {
+              currentCss === 1 ? this.show2dMap(2) : this.showIndexMap(1);
+            }}
+          >
             <img src={currentCss === 1 ? newTrackUnSelect : newTrackSelect} />
-          </div>
+          </div> */}
           {/* <div className="middle">
                         <div className={`${fwCss}`} onClick={() => { this.showIndexMap(1) }}>
                             <img src={currentCss === 1 ? fwSelectImg : fwUnSelectImg} />
@@ -1033,7 +1104,7 @@ class IndexMap extends Component {
         </div>
         {currentCss === 1 && <LeftDown></LeftDown>}
         {isIndexMap ? (
-          <div className='body-center'>
+          <div className="body-center">
             <BaseMap events={events} center={mapCenter} {...mapConfig}>
               {/* 三个可点击的中心点（西安|咸阳|西大街） */}
               {/* {(centerList || []).map((item, index) => (
@@ -1086,16 +1157,23 @@ class IndexMap extends Component {
                   }
                 </Marker>
                 ))}*/}
-              {(bankInfoList || []).map((item) => (
-                <Marker key={item.id} zIndex={18} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents} extData={{ 'city': item.eName }}>
+              {(bankInfoList || []).map(item => (
+                <Marker
+                  key={item.id}
+                  zIndex={18}
+                  position={{ longitude: item.lng, latitude: item.lat }}
+                  events={this.markerEvents}
+                  extData={{ city: item.eName }}
+                >
                   {isEncircleShow === false && <TwinkleDiv info={item} markerOnClick={this.markerOnClick} styleCss={styleCss} />}
                 </Marker>
               ))}
             </BaseMap>
           </div>
-        ) : (<TwoDimensionalMap twoDimensionalMapConfig={twoDimensionalMapConfig}></TwoDimensionalMap>)
-        }
-        <div className='body-right' >
+        ) : (
+            <TwoDimensionalMap twoDimensionalMapConfig={twoDimensionalMapConfig}></TwoDimensionalMap>
+          )}
+        <div className="body-right">
           <RightCharts currentCode={orgCode} curCompanyId={sequenceNbr} patrolDetailView={this.patrolDetailView} chartsViewFlag={chartsViewFlag[0]} />
         </div>
         {/*{
@@ -1107,7 +1185,6 @@ class IndexMap extends Component {
         {patrolView ? <PatrolDetail closePatrol={this.closePatrol} dataList={patrolDescData} markerOnClick1={this.markerOnClick1} /> : ''}
         {/*{patrolView && chartsViewFlag.length > 0 ? <PatrolDetail closePatrol={this.closePatrol} dataList={patrolDescData} /> : ''}
         <IndexSidePane chartsView={this.chartsView} nowKey={chartsViewFlag} dotTipNum={dotTipNum} />*/}
-
       </div>
     );
   }

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('不支持的类型');
     }
@@ -143,6 +147,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);
+    });
+  }
+
+  /**
    * 更新监控点坐标
    *
    * @memberof PickModal
@@ -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 = () => {
+  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,7 +287,6 @@ cancelxun = () => {
             clickHeaderItem={this.clickHeaderItem}
           />
         }
-
         {<Modal
           className='xun'
           header="巡检详情"
@@ -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,13 +53,15 @@ 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;
+      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' ? 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 : [],
@@ -67,33 +69,35 @@ class DynamicRingDataModal extends Component {
     });
   }
 
-  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>
         <div className="dynamicRingData-info">
-        <Tabs className='dynamicRingData-info-body' activeKey={activeKey} onChange={(index, key) => this.onTabClick(key)} destroyContent closeAnimate cardMode>
-        <TabList>
+          {/* <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>
+          </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/dialogModel/RiskContentTable.js

@@ -21,13 +21,13 @@ const checkListColumns = (self) => {
       title: '执行部门',
       dataIndex: 'deptName',
       key: 'deptName',
-      width: '17%'
+      width: '14%'
     },
     {
       title: '执行人',
       dataIndex: 'userName',
       key: 'userName',
-      width: '10%'
+      width: '13%'
     },
     {
       title: '巡检时间',

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

@@ -3,76 +3,75 @@ import PropTypes from 'prop-types';
 import { CONSTS } from 'CONSTS/storageConsts';
 import AmosGridTable from '../../../../bizview/common/tableComponent/table/AmosGridTable';
 import { riskSoureDetail3dAction } from 'SERVICES/bizService';
+import { queryPointItemAllDatas } from '../../../../../services/3dService';
 
-const checkListColumns = (self) => {
+const checkListColumns = self => {
   return [
     {
       title: '危险因素名称',
       dataIndex: 'name',
       key: 'name',
       width: '40%'
-    }, {
+    },
+    {
       title: '责任人',
       dataIndex: 'type',
       key: 'type',
       width: '20%',
       render: (text, record) => {
         //根据换行符分隔
-        let arr = text.split(",");
+        let arr = text.split(',');
         let p = document.createElement('span');
 
         if (arr && arr !== null) {
           arr.map((e, index) => {
-            if(0==index){
+            if (0 == index) {
               let grandChildItem = document.createElement('p');
-              grandChildItem.innerText = "公司:";
+              grandChildItem.innerText = '公司:';
               let font = document.createElement('font');
               font.innerText = e;
               grandChildItem.append(font);
               p.append(grandChildItem);
             }
 
-            if(1==index){
+            if (1 == index) {
               let grandChildItem = document.createElement('p');
-              grandChildItem.innerText = "部门:";
+              grandChildItem.innerText = '部门:';
               let font = document.createElement('font');
               font.innerText = e;
               grandChildItem.append(font);
               p.append(grandChildItem);
             }
 
-            if(2==index){
+            if (2 == index) {
               let grandChildItem = document.createElement('p');
-              grandChildItem.innerText = "班组:";
+              grandChildItem.innerText = '班组:';
               let font = document.createElement('font');
               font.innerText = e;
               grandChildItem.append(font);
               p.append(grandChildItem);
             }
 
-            if(3==index){
+            if (3 == index) {
               let grandChildItem = document.createElement('p');
-              grandChildItem.innerText = "岗位:";
+              grandChildItem.innerText = '岗位:';
               let font = document.createElement('font');
               font.innerText = e;
               grandChildItem.append(font);
               p.append(grandChildItem);
             }
-
           });
-          return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div>
+          return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }}></div>;
         }
-
       }
-
-
-
-    }, {
+    },
+    {
       title: '风险等级',
       dataIndex: 'level',
       key: 'level',
       width: '20%'
-    }, {
+    },
+    {
       title: '安全管控状态',
       dataIndex: 'controlStatus',
       key: 'controlStatus',
@@ -81,18 +80,76 @@ const checkListColumns = (self) => {
   ];
 };
 
+export const datamoni = {
+  id: 349,
+  name: 'XAP-P-EXD-SW01',
+  code: '0010020003',
+  user: null,
+  identificationMethod: null,
+  riskLevel: '3级',
+  riskType: null,
+  riskFactors: [
+    {
+      id: 57,
+      name: '噪音',
+      type: ' , , , ',
+      level: '3级',
+      controlStatus: ''
+    },
+    {
+      id: 58,
+      name: '设备故障',
+      type: ' , , , ',
+      level: '4级',
+      controlStatus: null
+    }
+  ],
+  riskFactorsControlMeasures: [
+    {
+      id: 22,
+      label: '测试',
+      content: '正文'
+    },
+    {
+      id: 23,
+      label: '测试',
+      content: '正文'
+    },
+    {
+      id: 24,
+      label: '测试',
+      content: '正文'
+    }
+  ],
+  dangerDetails: null
+};
 
-// export const data =
+const deviceData = [
+  {
+    type: 'device',
+    name: '中心机房新风机',
+    value: '高湿报警',
+    identification: 'qualified',
+    factorId: 26
+  }
+];
 
-//   [
-//     {
-//       "id": 16,
-//       "name": "Y巡检点就是危险因素",
-//       "type": "公司22,部门,班组,岗位",
-//       "level": "4级",
-//       "controlStatus": null
-//     }
-//   ]
+const patrolData = [
+  {
+    type: 'patrol',
+    name: 'A02机柜',
+    value: '【（2U-14U）750服务器01】工作指示灯',
+    identification: 'qualified',
+    factorId: 31
+  },
+  {
+    type: 'patrol',
+    name: 'A02机柜',
+    value: '【（2U-14U）750服务器01】噪声',
+    identification: 'qualified',
+    factorId: 31
+  }
+];
 
 /**
  * 风险详情
@@ -106,7 +163,9 @@ class RiskSourceDetailModal extends Component {
     this.state = {
       selectedRows: [],
       selectedRowKeys: [],
-      data: {}
+      data: {},
+      patroList: [],
+      deviceList: []
     };
   }
 
@@ -120,13 +179,29 @@ class RiskSourceDetailModal extends Component {
     const { tirggerTransTopic } = this.props;
     const detailParams = { type: 'risk', detailForw: 'record', dialogId: pointId };
     pointId && tirggerTransTopic && tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() });
-  }
+  };
 
-  queryRiskSoureDetail = (riskSourceId) => {
+  queryRiskSoureDetail = riskSourceId => {
     riskSoureDetail3dAction(riskSourceId).then(data => {
       this.setState({ data });
+
+      data.riskFactors.map(e => {
+        let { patroList, deviceList } = this.state;
+        queryPointItemAllDatas(e.id).then(datas => {
+          datas.patrol &&
+            datas.patrol.map(item => {
+              patroList.push(item);
             });
-  }
+
+          datas.device &&
+            datas.device.map(item => {
+              deviceList.push(item);
+            });
+          this.setState({ patroList: patroList, deviceList: deviceList });
+        });
+      });
+    });
+  };
   /**
    * 获取表格刷新方法
    */
@@ -142,38 +217,110 @@ class RiskSourceDetailModal extends Component {
     );
   };
 
-  renderDanger = (danger) => {
+  // renderDanger = (danger) => {
+  //   return (danger || []).map(item => {
+  //     return (<p  >
+  //       <span>{item.label} &nbsp;</span>
+  //       <span>{item.content}：</span>
+  //       <span style={{ color: '#FF0000' }}>管控措施失效</span>
+  //     </p>);
+  //   });
+  // }
+
+  renderDangersPatrol = danger => {
     return (danger || []).map(item => {
-      return (<p key={item.id} >
-        <span>{item.label} &nbsp;</span>
-        <span>{item.content}：</span>
-        <span style={{ color: '#FF0000' }}>管控措施失效</span>
-      </p>);
+      if (item && item.identification === 'unqualified') {
+        return (
+          <p>
+            {' '}
+            <font style={{ color: '#FF0000' }}>巡检不合格：</font>
+            <span>{item.name} &nbsp;</span>
+            <span>{item.value} &nbsp;</span>
+          </p>
+        );
+      }
     });
+    // return (danger || []).map(item => {
+    //   return (<p > <font style={{ color: '#FF0000' }}>巡检不合格：</font>
+    //     <span>{item.name} &nbsp;</span>
+    //     <span>{item.value} &nbsp;</span>
+    //   </p>);
+    // });
+  };
+
+  renderDangersDevice = danger => {
+    // return (danger || []).map(item => {
+    //   return (<p > <font style={{ color: '#FF0000' }}>设备告警：</font>
+    //     <span>{item.name} &nbsp;</span>
+    //     <span>{item.value} &nbsp;</span>
+    //   </p>);
+    // });
+    return (danger || []).map(item => {
+      if (item && item.identification === 'unqualified') {
+        return (
+          <p>
+            {' '}
+            <font style={{ color: '#FF0000' }}>设备告警：</font>
+            <span>{item.name} &nbsp;</span>
+            <span>{item.value} &nbsp;</span>
+          </p>
+        );
       }
+    });
+  };
+
+  handledata = (data, patroList, deviceList) => {
+    if (data.riskFactors) {
+      data.riskFactors.map(e => {
+        e.controlStatus = '受控';
+      });
+
+      data.riskFactors.map(item => {
+        patroList.map(p => {
+          if ((item.id === p.factorId && p.identification === 'unqualified')) {
+            item.controlStatus = '失效';
+          }
+        });
+
+        deviceList.map(p => {
+          if ((item.id === p.factorId && p.identification === 'unqualified')) {
+            item.controlStatus = '失效';
+          }
+        });
+      });
+    }
+
+    return data;
+  };
 
   render() {
-   const { data = {} } = this.state;
+    let { data = {} } = this.state;
+    let { patroList, deviceList } = this.state;
+    let newData = this.handledata(data, patroList, deviceList);
     return (
       <div className="risk-warn">
         <div className="risk-source-header">
-          <span className="colName">风险编号：</span><span className="colValue">{data.code || ''}</span>
-          <span className="colName">风险名称：</span><span className="colValue">{data.name || ''}</span>
-          <span className="colName">级别：</span><span className="colValue">{data.riskLevel || ''}</span>
+          <span className="colName">风险编号：</span>
+          <span className="colValue">{data.code || ''}</span>
+          <span className="colName">风险名称：</span>
+          <span className="colValue">{data.name || ''}</span>
+          <span className="colName">级别：</span>
+          <span className="colValue">{data.riskLevel || ''}</span>
         </div>
         <div className="risk-warn-table">
           <AmosGridTable
             columns={checkListColumns(this)}
-            getTableDataAction={() => { }}
+            getTableDataAction={() => {}}
             callBack={this.reload}
             isPageable={false}
             isChecked={false}
-            dataList={data.riskFactors || []}
+            dataList={newData.riskFactors || []}
           />
         </div>
         <div className="risk-warn-content">
-          <div className="risk-warn-content-header">隐患：</div>
-          {data.riskFactorsControlMeasures && this.renderDanger(data.riskFactorsControlMeasures)}
+          <div className="risk-warn-content-header">风险触发原因：巡检不合格/设备告警</div>
+          {patroList && this.renderDangersPatrol(patroList)}
+          {deviceList && this.renderDangersDevice(deviceList)}
         </div>
       </div>
     );
@@ -185,5 +332,4 @@ RiskSourceDetailModal.propTypes = {
   tirggerTransTopic: PropTypes.func
 };
 
-
 export default RiskSourceDetailModal;

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,10 +37,12 @@ class ControlItem extends Component {
 
   componentWillReceiveProps(nextProps) {
     const { active } = nextProps;
+    if (nextProps.active !== this.state.open ){
       this.setState({
         open: active
       });
     }
+  }
 
   /**
    * 子项点击事件

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
+
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        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
+            textAlign: 'left',
+            margin: new go.Margin(0, 0, 0, 12),
+            verticalAlignment: go.Spot.Center,
+            alignment: go.Spot.TopLeft
           },
-      new go.Binding('text')),
-      goObj(go.Shape, 'Rectangle',
+         // 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,44 +57,62 @@ 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">
@@ -106,11 +124,7 @@ class DynamicRing extends Component {
             </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
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        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
+            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')
+         //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/TopologyComponent.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { deepEqual, pwdPolicy } from 'amos-tool';
+import go from 'amos-gojs';
+import classnames from 'classnames';
+import { nodeDetailTopoAction } from './../../../services/dynamicRingService';
+
+const goObj = go.GraphObject.make;
+const deviceSource = '/src/assets/bizView/netTopology';
+
+class TopologyComponent extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      detailData: []
+    };
+    this.diagram = null; //gojs图
+    this.customEditor = null;
+    this.updateTopologyData = {};
+  }
+
+  componentDidMount() {
+    this.renderCanvas();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { topologyData } = this.props;
+    const { nodeData, linkData } = topologyData;
+    if (!deepEqual(prevProps.topologyData,this.props.topologyData)) {
+      this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
+      this.initTop = 0;
+      this.initLeft = 0;
+    }
+  }
+
+  // this function is the Node.dragComputation, to limit the movement of the parts
+  stayInFixedArea = (part, pt, gridpt) => {
+    let diagram = part.diagram;
+    if (diagram === null) {return pt;}
+		// compute the document area without padding
+    let v = diagram.documentBounds.copy();
+    v.subtractMargin(diagram.padding);
+		// get the bounds of the part being dragged
+    let b = part.actualBounds;
+    let loc = part.location;
+		// now limit the location appropriately
+    let x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
+    let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
+    return new go.Point(x, y);
+  }
+
+  // 选择节点
+  nodeSelectionChanged = (node) => {
+    this.props.nodeSelectionChanged(node);
+  }
+
+  // 设备资源图片
+  getDeviceSource = (v) => {
+    return `${deviceSource}/${v}.png`;
+  }
+
+  // 告警图片
+  getWarnPic = (v) => {
+    if (v) {
+      return '/src/assets/bizView/netTopology/alarm.png';
+    }
+  }
+
+  // 告警高亮
+  warnHighlights = (d,v) => {
+    let text = this.getLine2Text(d.text);
+    if (d.warnState) {
+      this.showWarnHighlights(d, v);
+      return text;
+    }
+    return text;
+  }
+
+  // 获取第一行数据
+  getLine1Text = (v) => {
+    let str = [];
+    str = v.split('#');
+    if (str && str.length === 3){
+      return str[0];
+    }
+    return '';
+  }
+
+  // 获取第二行数据
+  getLine2Text = (v) => {
+    let str = [];
+    str = v.split('#');
+    if (str.length === 1){
+      return str[0];
+    } else if (str.length === 2){
+      return str[0];
+    } else if (str.length === 3){
+      return str[1];
+    }
+  }
+
+  // 获取第三行数据（IP）
+  getLine3Text = (v) => {
+    let str = [];
+    str = v.split('#');
+    if (str && str.length === 2){
+      return str[1];
+    } else if (str.length > 2){
+      return str[2];
+    }
+    return '';
+  }
+
+  //设置椭圆宽度
+  setEllipseWidth = (v) => {
+    let width = (v === '总中心') ? 1100 : 800;
+    return width;
+  }
+
+  //设置标题高度
+  setTitleHeight = (v) => {
+    let titleHeight = (v.indexOf('DMZ') !== -1) ? 40 : 25;
+    return titleHeight;
+  }
+
+  //设置第一行高度
+  setLine1Height = (v) => {
+    let str = this.getLine1Text(v);
+    if (str){
+      return;
+    }
+    return 0;
+  }
+
+  // 获取线颜色
+  getLinkColor = (v) => {
+    const dicParams = {
+      0: '#00FFFF', //正常
+      2: '#ea5514' //告警
+    };
+    return dicParams[v];
+  }
+
+  showWarnHighlights = (d, v) => {
+    const oldDom = this[d.key];
+    this.isDrag = true;
+    if (oldDom) {
+      let pos = this.diagram.transformDocToView(go.Point.parse(d.loc));
+      oldDom.style.width = '100px';
+      oldDom.style.height = '100px';
+      oldDom.style.left = `${pos.x + 18}px`;
+      oldDom.style.top  = `${pos.y + 20}px`;
+    } else {
+      let pos = this.diagram.transformDocToView(go.Point.parse(d.loc));
+      let customBox = document.createElement('div');
+      customBox.style.left = `${pos.x + 10}px`;
+      customBox.style.top  = `${pos.y + 26}px`;
+      customBox.style.position = 'absolute';
+      customBox.style.zIndex = 1;
+      customBox.style.width = '100px';
+      customBox.style.height = '100px';
+      customBox.style.backgroundPosition = 'center';
+      customBox.id = d.key;
+      customBox.setAttribute('class','amos-help-tip-pulse-second');
+      this.diagram.div.appendChild(customBox);
+    }
+  };
+
+  // 更新位置信息
+  updateTopo = () => {
+    const { nodeDataArray } = this.updateTopologyData;
+    let pos;
+    nodeDataArray.filter(item => item.warnState).map(item => {
+      pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
+      this[item.key].style.left = `${pos.x + 18}px`;
+      this[item.key].style.top  = `${pos.y + 20}px`;
+    });
+  }
+
+  getNodeDetail = (id) => {
+    nodeDetailTopoAction(id).then(data => {
+      this.setState({
+        detailData: data
+      });
+    });
+  }
+
+  renderDetail = () => {
+    const { detailData } = this.state;
+    return (<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
+      {detailData.map(item => {
+        if (item.name === '当前告警数'){
+          return (<div key={item.name} className="tooltip-item">
+            <div className="item-name">{item.name}: </div>
+            <div className="item-value-alarm">{item.value}</div>
+          </div>);
+        } else {
+          return (<div key={item.name} className="tooltip-item">
+            <div className="item-name">{item.name}: </div>
+            <div className="item-value">{item.value}</div>
+          </div>);
+        }
+      })}
+    </div>);
+  }
+
+  // 提示框
+  showToolTip = (obj, diagram, tool) => {
+    let toolTipDIV = document.getElementById('toolTipDIV');
+    let pt = diagram.lastInput.viewPoint;
+    toolTipDIV.style.width = '300px'
+    toolTipDIV.style.left = `${pt.x + 12}px`;
+    toolTipDIV.style.top = `${pt.y}px`;
+    toolTipDIV.style.display = 'block';
+    this.getNodeDetail(obj.data.id);
+  }
+
+  hideToolTip = (diagram, tool) => {
+    let toolTipDIV = document.getElementById('toolTipDIV');
+    toolTipDIV.style.display = 'none';
+  }
+
+  renderCanvas = () => {
+    const { topologyData } = this.props;
+    const { nodeData, linkData } = topologyData;
+    const myToolTip = goObj(go.HTMLInfo, {
+      show: this.showToolTip,
+      hide: this.hideToolTip
+    });
+    this.customEditor = goObj(go.HTMLInfo,{
+      show: this.showWarnHighlights
+    });
+    this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
+      // allowHorizontalScroll: false,  // disallow scrolling or panning
+      // allowVerticalScroll: false,
+      allowZoom: false,              // disallow zooming
+      initialContentAlignment: go.Spot.TopLeft,
+      initialPosition: new go.Point(0, 0),
+      'undoManager.isEnabled': true, //// enable undo & redo 是否可撤回
+      'animationManager.isEnabled': false, // 过渡动画
+      'textEditingTool.defaultTextEditor': this.customEditor,
+      // fixedBounds: new go.Rect(0, 0, this.refs.goJsDiv.clientWidth, this.refs.goJsDiv.clientHeight),
+      ModelChanged: (e) => {     // just for demonstration purposes,
+        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
+          // console.log(e.model.toJson(), 'model');
+          this.updateTopologyData = JSON.parse(e.model.toJson());
+          this.props.nodeChange(e);
+        }
+      },
+      SelectionMoved: (e) => {
+        setTimeout(()=> {
+          this.updateTopo();
+        },0);
+      },
+      ViewportBoundsChanged: () => {
+        setTimeout(()=> {
+          this.updateTopo();
+        },0);
+      }
+    });
+
+
+    this.diagram.nodeTemplateMap.add('Circle',
+      goObj(go.Node, 'Vertical',
+        {
+          selectionObjectName: 'ICON',
+          locationObjectName: 'ICON'
+        },
+        new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        goObj(go.Panel, 'Auto',
+          goObj(go.Shape, 'Circle', { name: 'ICON',portId: '',
+            width: 22, height: 22, strokeWidth: 0,fill: '#009dd9' },
+            ),
+        ),
+      goObj(go.TextBlock,
+        { margin: 15,cursor: 'pointer',font: '15px sans-serif' },
+        new go.Binding('text', 'text' )),
+        {
+          selectionAdornmentTemplate:
+              goObj(go.Adornment, 'Auto',
+                goObj(go.Shape, 'Circle',
+                { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+                goObj(go.Placeholder)
+              )  // end Adornment
+        },
+    ));
+
+    this.diagram.nodeTemplateMap.add('Shape',
+      goObj(go.Node, 'Vertical',
+      new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+      goObj(go.Shape, 'Ellipse',
+        { fill: '#ffffff',
+          stroke: '#58b3dc',
+          strokeWidth: 3 ,
+          height: 50
+        },
+        new go.Binding('width', 'text', (v) => this.setEllipseWidth(v))
+      ),
+      goObj(go.TextBlock, '无',
+        {  margin: new go.Margin(-40, 0,0, 0),
+          verticalAlignment: go.Spot.Center, stroke: '#1c9ad2', font: '20px sans-serif' },
+        new go.Binding('text'),
+      ),
+    ));
+
+    this.diagram.nodeTemplateMap.add('Picture',
+      goObj(go.Node, 'Vertical',
+        {
+          locationSpot: go.Spot.Center,
+          locationObjectName: 'ICON',
+          selectionObjectName: 'ICON',
+          // dragComputation: this.stayInFixedArea
+          selectionChanged: this.nodeSelectionChanged,
+          toolTip: myToolTip
+        },
+        new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        goObj(go.Panel,'Spot',
+          goObj(go.Shape, 'Rectangle',
+          { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+          goObj(go.Picture,
+            {
+              width: 65,
+              height: 45,
+              alignment: new go.Spot(1, 0, 100 ,0 )
+            },
+            new go.Binding('source','warnState',(v) => this.getWarnPic(v))
+          ),
+          goObj(go.TextBlock,
+            {
+              alignment: new go.Spot(1, 0, 100 ,-1),
+              stroke: 'white',
+              font: '15px sans-serif'
+            },
+            new go.Binding('text', 'warnMessage')
+          ),
+        ),
+        goObj(go.Picture,
+          {
+            margin: 0,
+            name: 'ICON',
+            width: 55,
+            height: 55,
+            cursor: 'pointer',
+            portId: ''
+          },
+          new go.Binding('source','source',(v) => this.getDeviceSource(v))
+        ),
+        //设备名称
+        goObj(go.TextBlock, '',
+          { margin: 1, stroke: '#999999', font: '13px sans-serif' },
+          new go.Binding('height','text', (v) => this.setLine1Height(v)),
+          new go.Binding('text','text', (v) => this.getLine1Text(v)),
+          ),
+        goObj(go.TextBlock, '无',
+          { margin: 1, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
+          new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
+          ),
+        //IP
+        goObj(go.TextBlock, '',
+          { margin: 1, stroke: '#3399FF', font: '12px sans-serif' },
+          new go.Binding('text','text', (v) => this.getLine3Text(v)),
+          ),
+        {
+          selectionAdornmentTemplate:
+              goObj(go.Adornment, 'Auto',
+                goObj(go.Shape,
+                { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+                goObj(go.Placeholder)
+              )  // end Adornment
+        }
+      )
+    );
+
+
+    this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
+      {
+        resizable: true,
+        locationObjectName: 'SHAPE',
+        resizeObjectName: 'SHAPE',
+        selectionObjectName: 'SHAPE'
+        // dragComputation: this.stayInFixedArea,
+        // selectionChanged: this.nodeSelectionChanged
+      },
+      new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        goObj(
+          go.TextBlock, // group title
+          {
+            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('height', 'text', (v) => this.setTitleHeight(v)),
+         new go.Binding('text')
+        )
+      ),
+
+
+      goObj(go.Shape, 'Rectangle',
+        {
+          name: 'SHAPE',
+          parameter1: 14,
+          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),
+      )
+    );
+
+    this.diagram.linkTemplate =
+      goObj(go.Link,
+        goObj(go.Shape, { strokeWidth: 3 },
+        new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
+        )
+      );
+    this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
+  }
+
+  render() {
+    const { className,style, topologyData } = this.props;
+    const { nodeData = [] } = topologyData || {};
+    return (
+      <div ref="goJsDiv" style={style} className={classnames('topology-net', className)}>
+        {
+          nodeData.filter(e => e.warnState).map(e => <div className="amos-help-tip-pulse-second warn-node" ref={node => this[e.key] = node} key={e.key} id={e.key} />)
+        }
+        {nodeData.length > 0 && this.renderDetail()}
+      </div>
+    );
+  }
+}
+
+TopologyComponent.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  topologyData: PropTypes.object,
+  nodeChange: PropTypes.func,
+  nodeSelectionChanged: PropTypes.func
+};
+
+TopologyComponent.defaultProps = {
+  style: { height: '100%' },
+  topologyData: {
+    nodeData: [],
+    linkData: []
+  }
+};
+
+export default TopologyComponent;

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
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        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
+            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')
+         //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,58 +62,75 @@ 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">
@@ -123,24 +141,16 @@ class NetTopology extends Component {
               <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;

src/view/bank/situation/warn/Warnings.js

 import React, { Component } from 'react';
-import { Table, Col, Row, Pagination } from 'amos-antd';
-import { Search, Icon } from 'amos-framework';
-import './../../../../styles/view/biz/situation/warn.scss';
+import { Table, Col, Row,Pagination } from 'amos-antd';
+import _amosTool from 'amos-tool';
+import BizIcon from './../../../common/icon/BizIcon';
+import { Icon,Button } from 'amos-framework';
 import { getWarningsData, getWarningsByPageData, getWarningsExcelData } from 'SERVICES/situationService';
+import AmosWebSocket from 'amos-websocket';
+import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts';
+import WarningsSearchFilter from './WarningsSearchFilter';
+import { exportExcel } from './../../../../utils/request';
+import  './../../../../view/bank/3dview/common/biz/FilterPane.scss';
+import './../../../../styles/view/biz/situation/warn.scss';
 
 //页面列表
 const columnss = () => [
@@ -109,16 +116,32 @@ class Warnings extends Component {
         pageSize: 10,
         total: 1
       },
-
+      showFilter: false, //是否显示筛选面板
       pageItem1: [
         {
-          // name: 'alarmLevel',
-          name: 'sourceId',
+          name: 'alarmSourceName',
+          type: 'LIKE',
+          value: ''
+        },
+        {
+          name: 'alarmLevel',
+          value: ''
+        },
+        {
+          name: 'currentState',
+          value: ''
+        },
+        {
+          name: 'alarmSourceType',
+          type: 'LIKE',
+          value: ''
+        },
+        {
+          name: 'alarmSourceIp',
           type: 'LIKE',
           value: ''
         }
       ],
-
       //搜索框查询参数
       queryParams: {
         searchValue: ''
@@ -129,41 +152,20 @@ class Warnings extends Component {
   }
 
   componentDidMount() {
-    //this.getWarnings();
-    this.getWarningsByPage();
+    this.initData();
   }
 
-  /**
-   * 获取告警信息列表
-   */
-  getWarnings = () => {
-    getWarningsData().then((data) => {
-      if (data.dataList.content > 0) {
-        this.setState({
-          warnings: data.dataList.content
-        })
-      }
-    });
+  initData = () =>{
+    if (this.props.location.state) {
+      let sourceId = this.props.location.state.sourceId;
+      this.onIconClick(null, sourceId.toString());
+    } else {
+      this.getWarningsByPage();
     }
-
-  getQueryParams = () => {
-    let { queryParams, pageItem } = this.state;
-    let params = Object.assign({}, queryParams);
-    params.pageNumber = pageItem.current;
-    params.pageSize = pageItem.pageSize;
-    return params;
   }
 
   getWarningsByPage = (arr) => {
-    // let { pageItem } = this.state;
-    // if (arr) {
-    //   pageItem.current = arr;
-    //   this.setState({ pageItem });
-    // }
-    // let params = this.getQueryParams();
-
-
-    let { queryParams, pageItem1, pageItem } = this.state;
+    let { pageItem1, pageItem } = this.state;
     let current = pageItem.current;
 
     if (arr) {
@@ -171,7 +173,6 @@ class Warnings extends Component {
     }
 
     getWarningsByPageData(pageItem1, current, pageItem.pageSize).then((data) => {
-      if (data.content.length > 0) {
       this.setState({
         warnings: data.content,
         pageItem: {
@@ -179,11 +180,9 @@ class Warnings extends Component {
           pageSize: data.size,
           total: data.totalElements
         }
-        })
+      });
 
-        let ddd = this.setState;
-      }
-    })
+    });
   }
 
   onSelectChange = (selectedRowKeys, selectionRows) => {
@@ -206,11 +205,10 @@ class Warnings extends Component {
    * 搜索
    */
   onIconClick = (e, value) => {
-    let { queryParams, pageItem1 } = this.state;
+    if (value === undefined){ value = ''; }
+    let { pageItem1 } = this.state;
     pageItem1[0].value = value;
-    // queryParams.searchValue = value;
     this.setState({
-      // queryParams
       pageItem1
     }, () => {
       this.getWarningsByPage(1);
@@ -222,28 +220,62 @@ class Warnings extends Component {
    */
   onClickExport = (data) => {
     let url = getWarningsExcelData();
-    window.open(url);
+    // window.open(url);
+    exportExcel({ url, method: 'get' }, '告警信息下载');
+  }
+
+    /**
+   * webSocket接收数据
+   */
+  handleData = data => {
+    if (data){
+      console.log('alarmMarqueeWS');
+      this.initData();
+    }
+  };
+  /**
+   * 点击过滤
+   */
+  handleFilterShow = () => {
+    this.setState({ showFilter: !this.state.showFilter });
+  }
+   /**
+   * 筛选条件发生化
+   */
+  handleFilterChange = (pageItem1) => {
+    this.setState({ pageItem1 });
   }
 
   render() {
     let columns = columnss();
-    let { selectedRowKeys, warnings, pageItem } = this.state;
+    let { selectedRowKeys,warnings, pageItem,pageItem1, showFilter } = this.state;
     const rowSelection = {
       selectedRowKeys,
       onChange: this.onSelectChange
     };
+    const filterProps = {
+      show: showFilter,
+      onFilterChange: this.handleFilterChange,
+      pageItem1,
+      onSearch: this.getWarningsByPage,
+      handleFilterShow: this.handleFilterShow
+    };
+    const wsURL = completeToken(SysWsURL.view3dws);
     return (
       <div className="amos-warn" style={{ overflow: 'auto', height: '100%' }}>
+        <AmosWebSocket ref={node => (this.aws = node)} url={wsURL} onMessage={this.handleData} reconnect debug />
         <div className="amos-warn-up">
           <Row >
             <Col span={24} className="amos-warn-top">
-              <Col span={17}></Col>
-              <Col span={5}>
-                <Search icon="search" style={{ color: '#345FA6' }} placeholder="请输入设备编号" onIconClick={this.onIconClick} />
+              <Col span={20} />
+              <Col span={1}>
+                <div className="amos-warn-top-btn"  title="筛选" >
+                  <Button title="筛选" icon={<BizIcon icon="shaixuan" />}  onClick={() => { this.handleFilterShow();}} />
+                </div>
               </Col>
               <Col span={1}>
                 <div className="amos-warn-top-btn"  title="导出" >
-                  <Icon icon="download" style={{ color: '#345FA6' }} onClick={() => { this.onClickExport() }} />
+                  <Icon icon="download" style={{ color: '#345FA6' }} onClick={() => { this.onClickExport();}} />
                 </div>
               </Col>
             </Col>
@@ -256,6 +288,9 @@ class Warnings extends Component {
               />
             </Col>
           </Row>
+          <div>
+            <WarningsSearchFilter {...filterProps} />
+          </div>
         </div>
         <div className="data-list-pagination">
           <Pagination

src/view/bank/situation/warn/WarningsSearchFilter.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Input,Select } from 'amos-framework';
+import FilterPane from './../../../bank/3dview/common/biz/FilterPane';
+import { formLayout } from './../../../bank/3dview/common/form/FormUtils';
+import './../../3dview/common/form/form.scss';
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+/**
+ * 生产厂家配置页面-筛选面板
+ *
+ * @class ManufacturerFilter
+ * @extends {Component}
+ */
+class WarningsSearchFilter extends Component {
+
+  static propTypes = {
+    pageItem1: PropTypes.object,
+    show: PropTypes.bool,
+    onFilterChange: PropTypes.func,
+    onSearch: PropTypes.func,
+    handleFilterShow: PropTypes.func
+  };
+
+  static defaultProps = {
+    regionList: [],
+    stateList: []
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      regionList: [],
+      stateList: [],
+      alarmLevelData: [
+        { name: '全部',value: null },
+        { name: '警告告警',value: '警告告警' },
+        { name: '次要告警',value: '次要告警' },
+        { name: '重要告警',value: '重要告警' },
+        { name: '紧急告警',value: '紧急告警' }
+      ],
+      // alarmSourceTypeData: [
+      //   { name: '全部',value: null },
+      //   { name: '警告告警',value: '警告告警' },
+      //   { name: '监测异常',value: '监测异常' },
+      //   { name: 'IP设备告警',value: 'IP设备告警' },
+      //   { name: '设备Ping不通',value: '设备Ping不通' },
+      //   { name: '监测设备告警',value: '监测设备告警' }
+      // ],
+      currentStateData: [
+        { name: '全部',value: null },
+        { name: '清除',value: '清除' },
+        { name: '告警',value: '告警' }
+      ]
+    };
+  }
+  onChange = (varName, value) => {
+
+    const { onFilterChange, pageItem1 } = this.props;
+    for (let i = 0; i < pageItem1.length; i++){
+      if (pageItem1[i].name === varName){
+        pageItem1[i].value = value;
+      }
+    }
+    onFilterChange(pageItem1);
+  }
+
+
+  render() {
+    const { pageItem1, show, onSearch,handleFilterShow } = this.props;
+    const { alarmLevelData,currentStateData } = this.state;
+    console.log(this.props);
+    return (
+      <FilterPane show={show} onReset={handleFilterShow} onSearch={onSearch}>
+        <Form className="eb-form-tablelist-filter-content"  ref={form => this.form = form} model={pageItem1}>
+          <FormItem className={formLayout('100', '100')}  label={<span>告警源IP</span>} field="alarmSourceIp">
+            <Input  onChange={(e) => this.onChange('alarmSourceIp', e.target.value)} />
+          </FormItem>
+          <FormItem className={formLayout('100', '100')}  label={<span>告警源名称</span>} field="alarmSourceName">
+            <Input  onChange={(e) => this.onChange('alarmSourceName', e.target.value)} />
+          </FormItem>
+          <FormItem className={formLayout('100', '100')}  label={<span>严重度</span>}>
+            <Select  onChange={(value)=> this.onChange('alarmLevel', value)}>
+              {alarmLevelData.map(item => {
+                return (
+                  <Option key={item.value} value={item.value}>{item.name}</Option>
+                );
+              })}
+            </Select>
+          </FormItem>
+          <FormItem className={formLayout('100', '100')}  label={<span>当前状态</span>} field="currentState">
+            <Select  onChange={(value)=> this.onChange('currentState', value)}>
+              {currentStateData.map(item => {
+                return (
+                  <Option key={item.value} value={item.value}>{item.name}</Option>
+                );
+              })}
+            </Select>
+          </FormItem>
+          <FormItem className={formLayout('100', '100')}  label={<span>告警类别</span>} field="alarmSourceType">
+            <Input  onChange={(e) => this.onChange('alarmSourceType', e.target.value)} />
+          </FormItem>
+        </Form>
+      </FilterPane>
+    );
+  }
+
+}
+
+export default WarningsSearchFilter;

src/view/bank/virtualCloudPlatform/TopologyComponent.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { deepEqual, pwdPolicy } from 'amos-tool';
+import go from 'amos-gojs';
+import classnames from 'classnames';
+import { nodeDetailTopoAction } from './../../../services/dynamicRingService';
+
+const goObj = go.GraphObject.make;
+const deviceSource = '/src/assets/bizView/virtualCloudPlatform';
+
+class TopologyComponent extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      detailData: []
+    };
+    this.diagram = null; //gojs图
+    this.customEditor = null;
+    this.updateTopologyData = {};
+  }
+
+  componentDidMount() {
+    this.renderCanvas();
+  }
+
+
+  componentDidUpdate(prevProps, prevState) {
+    const { topologyData } = this.props;
+    const { nodeData, linkData } = topologyData;
+    if (!deepEqual(prevProps.topologyData,this.props.topologyData)) {
+      this.diagram.model =  goObj(go.GraphLinksModel,
+        {
+          linkFromPortIdProperty: 'fromPort',  // required information:
+          linkToPortIdProperty: 'toPort',      // identifies data property names
+          nodeDataArray: nodeData || [],
+          linkDataArray: linkData || []
+        });
+    }
+  }
+
+  // this function is the Node.dragComputation, to limit the movement of the parts
+  stayInFixedArea = (part, pt, gridpt) => {
+    let diagram = part.diagram;
+    if (diagram === null) {return pt;}
+		// compute the document area without padding
+    let v = diagram.documentBounds.copy();
+    v.subtractMargin(diagram.padding);
+		// get the bounds of the part being dragged
+    let b = part.actualBounds;
+    let loc = part.location;
+		// now limit the location appropriately
+    let x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
+    let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
+    return new go.Point(x, y);
+  }
+
+  // 选择节点
+  nodeSelectionChanged = (node) => {
+    this.props.nodeSelectionChanged(node);
+  }
+
+  // 设备资源图片
+  getDeviceSource = (v) => {
+    return `${deviceSource}/${v}.png`;
+  }
+
+  // 告警图片
+  getWarnPic = (v) => {
+    if (v) {
+      return '/src/assets/bizView/netTopology/alarm.png';
+    }
+  }
+
+  // 告警高亮
+  warnHighlights = (d,v) => {
+
+    let str = [];
+    str = d.text.split("#");
+    if (d.warnState) {
+      this.showWarnHighlights(d, v);
+      return d.text.split("#")[0];
+    }
+
+    return d.text.split("#")[0];
+
+  }
+
+    // 获取ip
+   getIp = (d,v) => {
+      let str = [];
+      str = d.text.split("#");
+      if(str && str.length > 1){
+        return d.text.split("#")[1];
+      }else{
+        return "";
+      }
+
+    }
+
+    getIp2 = (d,v) => {
+      let str = [];
+      str = d.text.split("#");
+      if(str && str.length > 2){
+        return d.text.split("#")[2];
+      }else{
+        return "";
+      }
+
+    }
+
+  // 获取线颜色
+  getLinkColor = (v) => {
+    if (v) {
+      return '#FF0000';
+    }
+    return '#00FFFF';
+  }
+
+  showWarnHighlights = (d, v) => {
+    const oldDom = this[d.key];
+    this.isDrag = true;
+    if (oldDom) {
+      let pos = this.diagram.transformDocToView(go.Point.parse(d.loc));
+      oldDom.style.width = '100px';
+      oldDom.style.height = '100px';
+      oldDom.style.left = `${pos.x + 18}px`;
+      oldDom.style.top  = `${pos.y + 20}px`;
+    } else {
+      let pos = this.diagram.transformDocToView(go.Point.parse(d.loc));
+      let customBox = document.createElement('div');
+      customBox.style.left = `${pos.x + 10}px`;
+      customBox.style.top  = `${pos.y + 26}px`;
+      customBox.style.position = 'absolute';
+      customBox.style.zIndex = 1;
+      customBox.style.width = '100px';
+      customBox.style.height = '100px';
+      customBox.style.backgroundPosition = 'center';
+      customBox.id = d.key;
+      customBox.setAttribute('class','amos-help-tip-pulse-second');
+      this.diagram.div.appendChild(customBox);
+    }
+  };
+
+  // 更新位置信息
+  updateTopo = () => {
+    const { nodeDataArray } = this.updateTopologyData;
+    let pos;
+    nodeDataArray.filter(item => item.warnState).map(item => {
+      pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
+      this[item.key].style.left = `${pos.x + 18}px`;
+      this[item.key].style.top  = `${pos.y + 20}px`;
+    });
+  }
+
+  getNodeDetail = (id) => {
+    nodeDetailTopoAction(id).then(data => {
+      this.setState({
+        detailData: data
+      });
+    });
+  }
+
+  renderDetail = () => {
+    const { detailData } = this.state;
+    return (<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
+      {detailData.map(item => {
+        return (<div key={item.name} className="tooltip-item">
+          <div className="item-name">{item.name}: </div>
+          <div className="item-value">{item.value}</div>
+        </div>);
+      })}
+    </div>);
+  }
+
+  // 提示框
+  showToolTip = (obj, diagram, tool) => {
+    let toolTipDIV = document.getElementById('toolTipDIV');
+    let pt = diagram.lastInput.viewPoint;
+    toolTipDIV.style.left = `${pt.x + 12}px`;
+    toolTipDIV.style.top = `${pt.y}px`;
+    toolTipDIV.style.display = 'block';
+    this.getNodeDetail(obj.data.id);
+  }
+
+  hideToolTip = (diagram, tool) => {
+    let toolTipDIV = document.getElementById('toolTipDIV');
+    toolTipDIV.style.display = 'none';
+  }
+
+  renderCanvas = () => {
+    const { topologyData } = this.props;
+    const { nodeData, linkData } = topologyData;
+    const myToolTip = goObj(go.HTMLInfo, {
+      show: this.showToolTip,
+      hide: this.hideToolTip
+    });
+    this.customEditor = goObj(go.HTMLInfo,{
+      show: this.showWarnHighlights
+    });
+    this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
+      // allowHorizontalScroll: false,  // disallow scrolling or panning
+      // allowVerticalScroll: false,
+      allowZoom: false,              // disallow zooming
+      initialContentAlignment: go.Spot.TopLeft,
+      initialPosition: new go.Point(0, 0),
+      'undoManager.isEnabled': true, //// enable undo & redo 是否可撤回
+      'animationManager.isEnabled': false, // 过渡动画
+      'textEditingTool.defaultTextEditor': this.customEditor,
+      // fixedBounds: new go.Rect(0, 0, this.refs.goJsDiv.clientWidth, this.refs.goJsDiv.clientHeight),
+      ModelChanged: (e) => {     // just for demonstration purposes,
+        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
+          // console.log(e.model.toJson(), 'model');
+          this.updateTopologyData = JSON.parse(e.model.toJson());
+          this.props.nodeChange(e);
+        }
+      },
+      SelectionMoved: (e) => {
+        setTimeout(()=> {
+          this.updateTopo();
+        },0);
+      },
+      ViewportBoundsChanged: () => {
+        setTimeout(()=> {
+          this.updateTopo();
+        },0);
+      }
+    });
+
+
+    this.diagram.nodeTemplateMap.add('Circle',
+      goObj(go.Node, 'Vertical',
+        {
+          selectionObjectName: 'ICON',
+          locationObjectName: 'ICON'
+        },
+        new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        goObj(go.Panel, 'Auto',
+          goObj(go.Shape, 'Circle', { name: 'ICON',portId: '',
+            width: 22, height: 22, strokeWidth: 0,fill: '#009dd9' },
+            ),
+        ),
+      goObj(go.TextBlock,
+        { margin: 15,cursor: 'pointer',font: '15px sans-serif' },
+        new go.Binding('text', 'text' )),
+        {
+          selectionAdornmentTemplate:
+              goObj(go.Adornment, 'Auto',
+                goObj(go.Shape, 'Circle',
+                { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+                goObj(go.Placeholder)
+              )  // end Adornment
+        },
+    ));
+
+    this.diagram.nodeTemplateMap.add('Picture',
+      goObj(go.Node, 'Vertical',
+        {
+          locationSpot: go.Spot.Center,
+          locationObjectName: 'ICON',
+          selectionObjectName: 'ICON',
+          // dragComputation: this.stayInFixedArea
+          selectionChanged: this.nodeSelectionChanged,
+          toolTip: myToolTip
+        },
+        new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        goObj(go.Panel,'Spot',
+          goObj(go.Shape, 'Rectangle',
+          { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+          goObj(go.Picture,
+            {
+              width: 65,
+              height: 45,
+              alignment: new go.Spot(1, 0, 100 ,0 )
+            },
+            new go.Binding('source','warnState',(v) => this.getWarnPic(v))
+          ),
+
+          goObj(go.TextBlock,
+            {
+              alignment: new go.Spot(1, 0, 100 ,-1),
+              stroke: 'white',
+              font: '15px sans-serif'
+            },
+            new go.Binding('text', 'warnMessage')
+          )
+        ),
+        goObj(go.Picture,
+          {
+            margin: 0,
+            name: 'ICON',
+            width: 55,
+            height: 55,
+            cursor: 'pointer',
+            portId: ''
+          },
+          new go.Binding('source','source',(v) => this.getDeviceSource(v))
+        ),
+        //图标下面的字
+        goObj(go.TextBlock, '无',
+          { margin: 3, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
+          new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
+          ),
+
+          //ip1
+        goObj(go.TextBlock, '无',
+        { margin: 3, stroke: '#3399FF', font: '12px sans-serif' },
+        new go.Binding('text','', (v,d) => this.getIp(v,d)),
+        ),
+         //ip2
+        goObj(go.TextBlock, '无',
+        { margin: 3, stroke: '#3399FF', font: '12px sans-serif' },
+        new go.Binding('text','', (v,d) => this.getIp2(v,d)),
+        ),
+        {
+          selectionAdornmentTemplate:
+              goObj(go.Adornment, 'Auto',
+                goObj(go.Shape,
+                { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+                goObj(go.Placeholder)
+              )  // end Adornment
+        }
+      )
+    );
+
+    this.diagram.nodeTemplateMap.add('Physical',
+    goObj(go.Node, 'Vertical',
+      {
+        locationSpot: go.Spot.Center,
+        locationObjectName: 'ICON',
+        selectionObjectName: 'ICON',
+        // dragComputation: this.stayInFixedArea
+        selectionChanged: this.nodeSelectionChanged,
+        toolTip: myToolTip
+      },
+      new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+      // goObj(go.Panel,'Spot',
+      //   goObj(go.Shape, 'Rectangle',
+      //   { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+      //   goObj(go.Picture,
+      //     {
+      //       width: 65,
+      //       height: 45,
+      //       alignment: new go.Spot(1, 0, 100 ,0 )
+      //     },
+      //     new go.Binding('source','warnState',(v) => this.getWarnPic(v))
+      //   ),
+      //   goObj(go.TextBlock,
+      //     {
+      //       alignment: new go.Spot(1, 0, 100 ,-1),
+      //       stroke: 'white',
+      //       font: '15px sans-serif'
+      //     },
+      //     new go.Binding('text', 'warnMessage')
+      //   ),
+      // ),
+      goObj(go.Panel, 'Spot',
+        { fromSpot: go.Spot.RightSide,  // coming out from right side
+          toSpot: go.Spot.LeftSide },   // going into at left side
+        goObj(go.Shape, 'Rectangle',
+        { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+        goObj(go.Picture,
+          {
+            margin: 0,
+            name: 'ICON',
+            width: 150,
+            height: 150,
+            cursor: 'pointer'
+          },
+          new go.Binding('source','source',(v) => this.getDeviceSource(v))
+        ),
+            //绑定点开始
+            goObj(go.Shape,
+              {
+                fromSpot: new go.Spot(0, 0.5, -2, 0),
+                toSpot: new go.Spot(0, 0.5, -2, 0)
+              },
+            { width: 6, height: 6, portId: '', fill: null,stroke: null,toArrow: "standard",alignment: new go.Spot(1, 1, -53, -5) },
+              new go.Binding('portId', 'left_1')
+            ),
+            goObj(go.Shape,
+              {
+                fromSpot: new go.Spot(0, 0.5, -2, 0),
+                toSpot: new go.Spot(0, 0.5, -2, 0)
+              },
+              { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -59, 22) },
+                new go.Binding('portId', 'left_2')
+              ),
+              goObj(go.Shape,
+                {
+                  fromSpot: new go.Spot(0, 0.5, -2, 0),
+                  toSpot: new go.Spot(0, 0.5, -2, 0)
+                },
+                { width: 6, height: 6, portId: '', fill: null ,stroke: null,alignment: new go.Spot(1, 1, -43, 42) },
+                  new go.Binding('portId', 'left_3')
+                ),
+                goObj(go.Shape,
+                  {
+
+                    fromSpot: new go.Spot(0, 5, 2, -22),
+                    toSpot: new go.Spot(0, 5, 2, -22)
+                  },
+                  { width: 6, height: 6, portId: '',fill: null,stroke: null,alignment: new go.Spot(1, 1, -25, 49) },
+                    new go.Binding('portId', 'left_4')
+                ),
+
+                goObj(go.Shape,
+                  {
+                    fromSpot: new go.Spot(0, 5, 2, -22),
+                    toSpot: new go.Spot(0, 5, 2, -22)
+                  },
+                  { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -2, 49) },
+                    new go.Binding('portId', 'left_5')
+                  ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(0, 5, 2, -22),
+                    toSpot: new go.Spot(0, 5, 2, -22)
+                    },
+                    { width: 6, height: 6, portId: '', fill:null,stroke: null,alignment: new go.Spot(1, 1, 18, 49) },
+                      new go.Binding('portId', 'left_6')
+                    ),
+                 goObj(go.Shape,
+                   {
+                    fromSpot: new go.Spot(1, 0.5, 2, 0),
+                    toSpot: new go.Spot(1, 0.5, 2, 0)
+                   },
+                   { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, 46, 50) },
+                     new go.Binding('portId', 'right_1')
+                   ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(1, 0.5, 2, 0),
+                      toSpot: new go.Spot(1, 0.5, 2, 0)
+                    },
+                    { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, 60, 25) },
+                      new go.Binding('portId', 'right_2')
+                    ),
+              goObj(go.Shape,
+                {
+                  fromSpot: new go.Spot(1, 0.5, 2, 0),
+                  toSpot: new go.Spot(1, 0.5, 2, 0)
+                },
+                { width: 6, height: 6, portId: '', fill: null,toArrow: "BackwardTriangle",stroke: null,alignment: new go.Spot(1, 1, 63, 5) },
+                  new go.Binding('portId', 'right_3')
+                ),
+                goObj(go.Shape,
+                  {
+                    fromSpot: new go.Spot(1, 0.5, 2, 0),
+                      toSpot: new go.Spot(1, 0.5, 2, 0)
+                  },
+                  { width: 6, height: 6, portId: '', fill: null,toArrow: "standard",stroke: null,alignment: new go.Spot(1, 1, 45, -15) },
+                    new go.Binding('portId', 'right_4')
+                  ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(1, 0.5, 2, 0),
+                      toSpot: new go.Spot(1, 0.5, 2, 0)
+                    },
+                    { width: 6, height: 6, portId: '', fill: null,toArrow: "standard",stroke: null,alignment: new go.Spot(1, 1, 30, -40) },
+                      new go.Binding('portId', 'right_5')
+                    ),
+                    goObj(go.Shape,
+                {
+                  fromSpot: new go.Spot(1, 0.5, 2, 0),
+                  toSpot: new go.Spot(1, 0.5, 2, 0)
+                },
+                { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, 15, -53) },
+                  new go.Binding('portId', 'right_6')
+                ),
+                goObj(go.Shape,
+                  {
+                    fromSpot: new go.Spot(0, 0.5, -2, 0),
+                    fromSpot: new go.Spot(0, 0.5, -2, 0),
+                  },
+                  { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -1, -60) },
+                    new go.Binding('portId', 'right_7')
+                  ),
+                  goObj(go.Shape,
+                    {
+                      fromSpot: new go.Spot(0, 0.5, -2, 0),
+                      fromSpot: new go.Spot(0, 0.5, -2, 0),
+                    },
+                    { width: 6, height: 6, portId: '', fill: null,stroke: null,alignment: new go.Spot(1, 1, -35, -30) },
+                      new go.Binding('portId', 'right_8')
+                    ),
+              //绑定点结束
+      ),
+      goObj(go.TextBlock, '无',
+        { margin: 3, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
+        new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
+        ),
+      {
+        selectionAdornmentTemplate:
+            goObj(go.Adornment, 'Auto',
+              goObj(go.Shape,
+              { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+              goObj(go.Placeholder)
+            )  // end Adornment
+      }
+
+    )
+  );
+
+    this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
+      {
+        resizable: true,
+        locationObjectName: 'SHAPE',
+        resizeObjectName: 'SHAPE',
+        selectionObjectName: 'SHAPE'
+        // dragComputation: this.stayInFixedArea,
+        // selectionChanged: this.nodeSelectionChanged
+      },
+      new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+      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','', (v,d) => this.warnHighlights(v,d)),
+        )
+      ),
+      goObj(go.Shape, 'Rectangle',
+        {
+          name: 'SHAPE',
+          parameter1: 14,
+          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),
+      )
+
+    );
+
+    this.diagram.linkTemplate =
+      goObj(go.Link,
+        {
+          selectionAdorned: true,
+
+          routing: go.Link.AvoidsNodes,
+
+          corner: 2,
+          curve: go.Link.JumpOver,
+          fromEndSegmentLength: 60, //设置箭头后线长度
+          toEndSegmentLength: 60, //设置箭头后线长度
+
+        },
+
+        goObj(go.Shape, { strokeWidth: 2 },
+
+        new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
+        )
+      );
+      this.diagram.model =  goObj(go.GraphLinksModel,
+        {
+          linkFromPortIdProperty: 'fromPort',  // required information:
+          linkToPortIdProperty: 'toPort',      // identifies data property names
+          nodeDataArray: nodeData || [],
+          linkDataArray: linkData || []
+        });
+  }
+
+  render() {
+    const { className,style, topologyData } = this.props;
+    const { nodeData = [] } = topologyData || {};
+    return (
+      <div ref="goJsDiv" style={style} className={classnames('topology-net', className)}>
+        {
+          nodeData.filter(e => e.warnState).map(e => <div className="amos-help-tip-pulse-second warn-node" ref={node => this[e.key] = node} key={e.key} id={e.key} />)
+        }
+        {nodeData.length > 0 && this.renderDetail()}
+      </div>
+    );
+  }
+}
+
+TopologyComponent.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  topologyData: PropTypes.object,
+  nodeChange: PropTypes.func,
+  nodeSelectionChanged: PropTypes.func
+};
+
+TopologyComponent.defaultProps = {
+  style: { height: '100%' },
+  topologyData: {
+    nodeData: [],
+    linkData: []
+  }
+};
+
+export default TopologyComponent;

src/view/bank/virtualCloudPlatform/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/virtualCloudPlatform/index.js

+import React, { Component } from 'react';
+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 SysWsURL from './../../../consts/wsUrlConsts';
+
+
+import { getTypeBySystem } from './../financialCityLan/conf';
+import { getTopoTreeByTypeAction, getNodesByTypeAndTreeIdAction, saveNodesByTypeUrlAction } from './../../../services/monitorService';
+
+const type = getTypeBySystem('CloudPlatform');
+
+//偏移
+const offsetHeight = 110;
+const defaultHeight = 450;
+
+class VirtualCloudPlatform 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();
+  }
+
+  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()
+          }
+        );
+      }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
+      });
+    });
+  };
+
+  /**
+   * 获取表格所选则的行数据
+   */
+  getSelectedRows = (selectedRows, selectedRowKeys) => {
+    this.setState({ selectedRows, selectedRowKeys });
+  };
+
+  // 树选择
+  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
+    });
+  };
+
+  // 选择节点
+  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('拓扑图保存成功!');
+    });
+  };
+
+  /**
+   * 分页设置参数
+   */
+  setPageConfig = ({ pageSize, current }) => {
+    if (pageSize !== undefined) {
+      this.pageConfig.pageSize = pageSize;
+    }
+
+    this.pageConfig.pageNumber = current;
+  };
+
+  /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  // 刷新节点
+  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], '');
+  };
+
+  handetopologyData = topologyData => {
+    let pointdatas = topologyData.nodeData || [];
+    let newNodeData = [];
+    console.log(pointdatas);
+    pointdatas.map(e => {
+      if (e && e.ports && null !== e.ports) {
+        var jsonObj = JSON.parse(e.ports);
+        let item = { ...e, ...jsonObj };
+        newNodeData.push(item);
+      } else if (e) {
+        let item = e;
+        newNodeData.push(item);
+      }
+    });
+
+    topologyData.nodeData = newNodeData;
+
+    return topologyData;
+  };
+
+  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;
+      }
+    }
+
+    let { topologyData } = this.state;
+    let newtopologyData = this.handetopologyData(topologyData);
+    const { isTableDisplay, activeView } = this.state;
+    console.log(topologyData);
+    return (
+      <div className="virtualCloudPlatform-wrapper">
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.technologyIpURI} onMessage={this.handleData} reconnect debug />
+        <div className="virtualCloudPlatform-header">
+          <div className="virtualCloudPlatform-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="virtualCloudPlatform-data">
+            <div className="virtualCloudPlatform-topo-save">
+              <img src="/src/assets/bizView/netTopology/save.png" alt="保存" onClick={this.saveTopologyData} />
+            </div>
+            <div className="virtualCloudPlatform-topo-refresh">
+              <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
+            </div>
+          </div>
+        </div>
+        <div className="virtualCloudPlatform-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={newtopologyData}
+                  //nodeSelectionLinkChanged={this.nodeSelectionLinkChanged}
+                  nodeSelectionChanged={this.nodeSelectionChanged}
+                  nodeChange={this.nodeChange}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+VirtualCloudPlatform.propTypes = {};
+
+export default VirtualCloudPlatform;

src/view/bizview/dutyInfo/index.js

 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import DutyModellibView from 'amos-duty-model/lib/view/duty/index';
+import 'amos-duty-model/lib/styles';
 
 
 class DutyInfoView extends Component {
+  constructor(props){
+    super(props);
+  }
 
   render() {
     return (
-      <div className='parent-check-detail' style={{ background: '#33333', height: '100%' }}>
-          暂未开发
+      <div>
+        <DutyModellibView {...this.props} />
       </div>
     );
   }

src/view/bizview/execute/dangerList/DangerList.js

@@ -100,7 +100,6 @@ class DangerList extends Component {
 
   exportDangerList = (searchParam) => {
     let url = formatUrl(SpcSerUrl.exportDangerListUrl);
-    debugger
     fetch(url, {
       method: 'post',
       headers: {
@@ -111,7 +110,6 @@ class DangerList extends Component {
       },
       body: JSON.stringify(searchParam)
     }).then(e => {
-      debugger
       e.blob().then(blob => {
         const a = window.document.createElement('a');
         const downUrl = window.URL.createObjectURL(blob);

src/view/bizview/intelligentDifferentiate/DifferentiateView.js

@@ -209,7 +209,6 @@ class DifferentiateView extends Component {
       let startTime = new Date(searchParam.startTime).getTime();
       let endTime = new Date(searchParam.endTime).getTime();
       dataList = dataList.filter(item => {
-        debugger
         let _time = new Date(item.time).getTime();
         return _time >= startTime && _time <= endTime;
       });

src/view/bizview/pams/TopologyComponent.js

@@ -232,23 +232,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
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        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
+            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')
+
+        )
+      ),
       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/bizview/pams/index.js

@@ -69,8 +69,8 @@ class Pams extends Component {
       this.state.cityLine = JSON.parse(this.props.location.state.cityLine);
       this.viewlineItem();
     }
-
   }
+
   componentWillReceiveProps(nextProps) {
     if (nextProps.location.state) {
       this.state.cityLine = JSON.parse(nextProps.location.state.cityLine);
@@ -115,6 +115,7 @@ class Pams extends Component {
   initData = () => {
     let expandedKeysData = [];
     getTopoTreeAction().then(data => {
+      if (data.length > 0) {
         data.map(item => {
           expandedKeysData.push(item.id);
         });
@@ -128,6 +129,17 @@ class Pams extends Component {
         }, () => {
           this.viewlineItem();
         });
+      } else {
+        //无权限则不加载数据
+        //this.initTopologyData('');
+       // this.initTopologyEventData();
+        this.setState({
+          treeData: data,
+          selectedKeys: [''],
+          //expandedKeys: expandedKeysData,
+          pHeight: this.getPanelHeight()
+        });
+      }
     });
   }
 
@@ -233,6 +245,10 @@ class Pams extends Component {
         activeView: 'detail'
       });
     }
+
+    //刷新视图
+    const { selectedKeys } = this.state;
+    this.initTopologyData(selectedKeys[0], '');
   }
 
   //webSocket 接收消息

src/view/bizview/selfSupport/TopologyComponent.js

@@ -9,7 +9,6 @@ const goObj = go.GraphObject.make;
 const deviceSource = '/src/assets/bizView/selfsupport';
 
 class TopologyComponent extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -27,7 +26,7 @@ class TopologyComponent extends Component {
   componentDidUpdate(prevProps, prevState) {
     const { topologyData } = this.props;
     const { nodeData, linkData } = topologyData;
-    if (!deepEqual(prevProps.topologyData,this.props.topologyData)) {
+    if (!deepEqual(prevProps.topologyData, this.props.topologyData)) {
       this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
       this.initTop = 0;
       this.initLeft = 0;
@@ -37,7 +36,9 @@ class TopologyComponent extends Component {
   // this function is the Node.dragComputation, to limit the movement of the parts
   stayInFixedArea = (part, pt, gridpt) => {
     let diagram = part.diagram;
-    if (diagram === null) {return pt;}
+    if (diagram === null) {
+      return pt;
+    }
     // compute the document area without padding
     let v = diagram.documentBounds.copy();
     v.subtractMargin(diagram.padding);
@@ -48,41 +49,41 @@ class TopologyComponent extends Component {
     let x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
     let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
     return new go.Point(x, y);
-  }
+  };
 
   // 选择节点
-  nodeSelectionChanged = (node) => {
+  nodeSelectionChanged = node => {
     this.props.nodeSelectionChanged(node);
-  }
+  };
 
   // 设备资源图片
-  getDeviceSource = (v) => {
+  getDeviceSource = v => {
     return `${deviceSource}/${v}.png`;
-  }
+  };
 
   // 告警图片
-  getWarnPic = (v) => {
+  getWarnPic = v => {
     if (v) {
       return '/src/assets/bizView/netTopology/alarm.png';
     }
-  }
+  };
 
   // 告警高亮
-  warnHighlights = (d,v) => {
+  warnHighlights = (d, v) => {
     if (d.warnState) {
       this.showWarnHighlights(d, v);
       return d.text;
     }
     return d.text;
-  }
+  };
 
   // 获取线颜色
-  getLinkColor = (v) => {
+  getLinkColor = v => {
     if (v) {
       return '#FF0000';
     }
     return '#00FFFF';
-  }
+  };
 
   showWarnHighlights = (d, v) => {
     const oldDom = this[d.key];
@@ -104,7 +105,7 @@ class TopologyComponent extends Component {
       customBox.style.height = '100px';
       customBox.style.backgroundPosition = 'center';
       customBox.id = d.key;
-      customBox.setAttribute('class','amos-help-tip-pulse-second');
+      customBox.setAttribute('class', 'amos-help-tip-pulse-second');
       this.diagram.div.appendChild(customBox);
     }
   };
@@ -113,32 +114,38 @@ class TopologyComponent extends Component {
   updateTopo = () => {
     const { nodeDataArray } = this.updateTopologyData;
     let pos;
-    nodeDataArray.filter(item => item.warnState).map(item => {
+    nodeDataArray
+      .filter(item => item.warnState)
+      .map(item => {
         pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
         this[item.key].style.left = `${pos.x + 18}px`;
         this[item.key].style.top = `${pos.y + 20}px`;
       });
-  }
+  };
 
-  getNodeDetail = (id) => {
+  getNodeDetail = id => {
     nodeDetailTopoAction(id).then(data => {
       this.setState({
         detailData: data
       });
     });
-  }
+  };
 
   renderDetail = () => {
     const { detailData } = this.state;
-    return (<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
+    return (
+      <div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
         {detailData.map(item => {
-        return (<div key={item.name} className="tooltip-item">
+          return (
+            <div key={item.name} className="tooltip-item">
               <div className="item-name">{item.name}: </div>
               <div className="item-value">{item.value}</div>
-        </div>);
+            </div>
+          );
         })}
-    </div>);
-  }
+      </div>
+    );
+  };
 
   // 提示框
   showToolTip = (obj, diagram, tool) => {
@@ -148,12 +155,18 @@ class TopologyComponent extends Component {
     toolTipDIV.style.top = `${pt.y}px`;
     toolTipDIV.style.display = 'block';
     this.getNodeDetail(obj.data.id);
-  }
+  };
+
+  //设置椭圆宽度
+  setEllipseWidth = v => {
+    let width = v === '西安中心' ? 500 : 300;
+    return width;
+  };
 
   hideToolTip = (diagram, tool) => {
     let toolTipDIV = document.getElementById('toolTipDIV');
     toolTipDIV.style.display = 'none';
-  }
+  };
 
   renderCanvas = () => {
     const { topologyData } = this.props;
@@ -162,7 +175,7 @@ class TopologyComponent extends Component {
       show: this.showToolTip,
       hide: this.hideToolTip
     });
-    this.customEditor = goObj(go.HTMLInfo,{
+    this.customEditor = goObj(go.HTMLInfo, {
       show: this.showWarnHighlights
     });
     this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
@@ -175,53 +188,78 @@ class TopologyComponent extends Component {
       'animationManager.isEnabled': false, // 过渡动画
       'textEditingTool.defaultTextEditor': this.customEditor,
       // fixedBounds: new go.Rect(0, 0, this.refs.goJsDiv.clientWidth, this.refs.goJsDiv.clientHeight),
-      ModelChanged: (e) => {     // just for demonstration purposes,
-        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
+      ModelChanged: e => {
+        // just for demonstration purposes,
+        if (e.isTransactionFinished) {
+          // show the model data in the page's TextArea
           // console.log(e.model.toJson(), 'model');
           this.updateTopologyData = JSON.parse(e.model.toJson());
           this.props.nodeChange(e);
         }
       },
-      SelectionMoved: (e) => {
-        setTimeout(()=> {
+      SelectionMoved: e => {
+        setTimeout(() => {
           this.updateTopo();
-        },0);
+        }, 0);
       },
       ViewportBoundsChanged: () => {
-        setTimeout(()=> {
+        setTimeout(() => {
           this.updateTopo();
-        },0);
+        }, 0);
       }
     });
 
-
-    this.diagram.nodeTemplateMap.add('Circle',
-      goObj(go.Node, 'Vertical',
+    this.diagram.nodeTemplateMap.add(
+      'Circle',
+      goObj(
+        go.Node,
+        'Vertical',
         {
           selectionObjectName: 'ICON',
           locationObjectName: 'ICON'
         },
         new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
-        goObj(go.Panel, 'Auto',
-          goObj(go.Shape, 'Circle', { name: 'ICON',portId: '',
-            width: 22, height: 22, strokeWidth: 0,fill: '#009dd9' },
-            ),
-        ),
-      goObj(go.TextBlock,
-        { margin: 15,cursor: 'pointer',font: '15px sans-serif' },
-        new go.Binding('text', 'text' )),
+        goObj(go.Panel, 'Auto', goObj(go.Shape, 'Circle', { name: 'ICON', portId: '', width: 22, height: 22, strokeWidth: 0, fill: '#009dd9' })),
+        goObj(go.TextBlock, { margin: 15, cursor: 'pointer', font: '15px sans-serif' }, new go.Binding('text', 'text')),
         {
-          selectionAdornmentTemplate:
-              goObj(go.Adornment, 'Auto',
-                goObj(go.Shape, 'Circle',
-                { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
+          selectionAdornmentTemplate: goObj(
+            go.Adornment,
+            'Auto',
+            goObj(go.Shape, 'Circle', { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
             goObj(go.Placeholder)
           ) // end Adornment
+        }
+      )
+    );
+
+    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, '无', { textAlign: 'left', margin: -25, stroke: '#fff', font: 'bold 18px Microsoft YaHei UI' }, new go.Binding('text'))
+      )
+    );
 
-    this.diagram.nodeTemplateMap.add('Picture',
-      goObj(go.Node, 'Vertical',
+    this.diagram.nodeTemplateMap.add(
+      'Picture',
+      goObj(
+        go.Node,
+        'Vertical',
         {
           locationSpot: go.Spot.Center,
           locationObjectName: 'ICON',
@@ -231,27 +269,31 @@ class TopologyComponent extends Component {
           toolTip: myToolTip
         },
         new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
-        goObj(go.Panel,'Spot',
-          goObj(go.Shape, 'Rectangle',
-          { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
-          goObj(go.Picture,
+        goObj(
+          go.Panel,
+          'Spot',
+          goObj(go.Shape, 'Rectangle', { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
+          goObj(
+            go.Picture,
             {
               width: 65,
               height: 45,
-              alignment: new go.Spot(1, 0, 100 ,0 )
+              alignment: new go.Spot(1, 0, 100, 0)
             },
-            new go.Binding('source','warnState',(v) => this.getWarnPic(v))
+            new go.Binding('source', 'warnState', v => this.getWarnPic(v))
           ),
-          goObj(go.TextBlock,
+          goObj(
+            go.TextBlock,
             {
-              alignment: new go.Spot(1, 0, 100 ,-1),
+              alignment: new go.Spot(1, 0, 100, -1),
               stroke: 'white',
               font: '15px sans-serif'
             },
             new go.Binding('text', 'warnMessage')
+          )
         ),
-        ),
-        goObj(go.Picture,
+        goObj(
+          go.Picture,
           {
             margin: 0,
             name: 'ICON',
@@ -260,24 +302,23 @@ class TopologyComponent extends Component {
             cursor: 'pointer',
             portId: ''
           },
-          new go.Binding('source','source',(v) => this.getDeviceSource(v))
+          new go.Binding('source', 'source', v => this.getDeviceSource(v))
         ),
-        goObj(go.TextBlock, '无',
+        goObj(
+          go.TextBlock,
+          '无',
           { margin: 3, stroke: 'rgba(63,63,63,1)', font: '14px sans-serif' },
-          new go.Binding('text','', (v,d) => this.warnHighlights(v,d)),
+          new go.Binding('text', '', (v, d) => this.warnHighlights(v, d))
         ),
         {
-          selectionAdornmentTemplate:
-              goObj(go.Adornment, 'Auto',
-                goObj(go.Shape,
-                { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
-                goObj(go.Placeholder)
-              )  // end Adornment
+          selectionAdornmentTemplate: goObj(go.Adornment, 'Auto', goObj(go.Shape, { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }), goObj(go.Placeholder)) // end Adornment
         }
       )
     );
 
-    this.diagram.groupTemplate = goObj(go.Group, 'Vertical',
+    this.diagram.groupTemplate = goObj(
+      go.Group,
+      'Vertical',
       {
         resizable: true,
         locationObjectName: 'SHAPE',
@@ -287,47 +328,61 @@ class TopologyComponent extends Component {
         // selectionChanged: this.nodeSelectionChanged
       },
       new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
-      goObj(go.TextBlock,         // group title
+      goObj(
+        go.Panel,
+        'Auto',
+        { stretch: go.GraphObject.Horizontal },
+        // 定义画板的样式
+        goObj(go.Shape, 'Rectangle', {
+          fill: '#E5E5E5',
+          stroke: '#49ADDA', // node边框
+          strokeWidth: 1,
+
+        }),
+
+
+        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
+            textAlign: 'left',
+            margin: new go.Margin(0, 0, 0, 12),
+            verticalAlignment: go.Spot.Center,
+            alignment: go.Spot.TopLeft
           },
-      new go.Binding('text')),
-      goObj(go.Shape, 'Rectangle',
+          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)
       )
     );
 
-    this.diagram.linkTemplate =
-      goObj(go.Link,
-        goObj(go.Shape, { strokeWidth: 3 },
-        new go.Binding('stroke', 'warnState', (v) => this.getLinkColor(v))
-        )
-      );
+    this.diagram.linkTemplate = goObj(go.Link, goObj(go.Shape, { strokeWidth: 3 }, new go.Binding('stroke', 'warnState', v => this.getLinkColor(v))));
     this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
-  }
+  };
 
   render() {
-    const { className,style, topologyData } = this.props;
+    const { className, style, topologyData } = this.props;
     const { nodeData = [] } = topologyData || {};
     return (
       <div ref="goJsDiv" style={style} className={classnames('topology-net', className)}>
-        {
-          nodeData.filter(e => e.warnState).map(e => <div className="amos-help-tip-pulse-second warn-node" ref={node => this[e.key] = node} key={e.key} id={e.key} />)
-        }
+        {nodeData
+          .filter(e => e.warnState)
+          .map(e => (
+            <div className="amos-help-tip-pulse-second warn-node" ref={node => (this[e.key] = node)} key={e.key} id={e.key} />
+          ))}
         {nodeData.length > 0 && this.renderDetail()}
       </div>
     );

src/view/bizview/selfSupport/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 mqtt from 'mqtt';
-import * as endConf from 'amos-processor/lib/config/endconf';
-import { getSelfTopoTreeAction, getSelfTopographyAction, updateSelfTopographyAction, getTopographyEventsAction, getDeivceListAction } from './../../../services/selfServices';
-
-// import AmosGridTable from './../../bizview/common/tableComponent/table/AmosGridTable';
+import { getDeivceListAction } from './../../../services/selfServices';
+import { getTopoTreeByTypeAction, getNodesByTypeAndTreeIdAction, saveNodesByTypeUrlAction } from './../../../services/monitorService';
 import AmosGridTable from './../../component/table/table/AmosGridTable';
 import SysWsURL from './../../../consts/wsUrlConsts';
+import { getTypeBySystem } from './../../bank/financialCityLan/conf';
 
-const AmosConfig = endConf.AmosConfig;
-const mqttURI = AmosConfig.wsURI.mqttURI;
-const options = {
-  //默认 30 * 1000毫秒，收到 CONNACK 之前等待的时间，即连接超时时间。
-  connectTimeout: 40000,
-  // 客户端 ID,随机生成
-  clientId: 'bank_self_mqtt' + Math.random().toString(16).substr(2, 8),
-  clean: true,
-  //默认 1000 毫秒，两次重新连接之间的间隔，客户端 ID 重复、认证失败等客户端会重新连接；
-  reconnectPeriod: 1000 * 50
-}
-let client = mqtt.connect(mqttURI, options)
-
-const checkListColumns = (self) => {
+const checkListColumns = self => {
   return [
     {
       title: '时间',
@@ -42,9 +26,10 @@ const checkListColumns = (self) => {
         } else {
           font.innerText = text;
         }
-        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
+        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
       }
-    }, {
+    },
+    {
       title: '设备名称',
       dataIndex: 'name',
       key: 'name',
@@ -57,9 +42,10 @@ const checkListColumns = (self) => {
         } else {
           font.innerText = text;
         }
-        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div>
+        return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
       }
-    }, {
+    },
+    {
       title: 'ping结果',
       dataIndex: 'deviceStatus',
       key: 'deviceStatus',
@@ -77,19 +63,18 @@ const checkListColumns = (self) => {
           font.style.color = 'red';
           p.append(font);
         }
-        return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div>
+        return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }}></div>;
       }
     }
   ];
 };
 
-
 //偏移
 const offsetHeight = 110;
 const defaultHeight = 450;
+const type = getTypeBySystem('SelfSupport');
 
 class SelfSupport extends Component {
-
   constructor(props) {
     super(props);
     this.pageConfig = {
@@ -122,105 +107,19 @@ class SelfSupport extends Component {
       selectedRowKeys: [],
       pagination: true,
       isChecked: false,
+      tableDataXianshi: true
     };
     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();
-    }
-
-  }
-
-  receivcemqtt = () => {
-    client.on('connect', (e) => {
-      console.log("连接成功！！！")
-      //QoS0，最多一次送达。也就是发出去就fire掉，没有后面的事情了。
-      // QoS1，至少一次送达。发出去之后必须等待ack，没有ack，就要找时机重发
-      // QoS2，准确一次送达。消息id将拥有一个简单的生命周期。
-      // client.subscribe('bank/equipment/ping', { qos: 1 }, (res) => {
-      client.subscribe('bank/equipment/ping', { qos: 1 }, (res) => {
-        if (!res) {
-          console.log('订阅成功');
-
-        } else {
-          console.log('订阅失败')
-        }
-      });
-
-      // 接收消息处理
-      client.on('message', (topic, message) => {
-       // console.log('收到来自', topic, '的消息', message.toString());
-        const { selectedKeys } = this.state;
-        this.initTopologyData(selectedKeys[0], '');
-
-      });
-
-      // 断开发起重连
-      client.on('reconnect', (error) => {
-        console.log('正在重连:', error)
-      });
-      // 链接异常处理
-      client.on('error', (error) => {
-        console.log('连接失败:', error)
-      });
-    });
-  }
-
-  //点击地图线操作
-  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;
-  };
+  componentWillMount() {}
 
   // 数据初始化
+  // eslint-disable-next-line react/sort-comp
   initData = () => {
     let expandedKeysData = [];
-    getSelfTopoTreeAction().then(data => {
+    getTopoTreeByTypeAction(type).then(data => {
+      if (data.length > 0) {
         data.map(item => {
           expandedKeysData.push(item.id);
         });
@@ -231,15 +130,32 @@ class SelfSupport extends Component {
           selectedKeys: [data[0].id],
           expandedKeys: expandedKeysData,
           pHeight: this.getPanelHeight()
-      }, () => {
-        this.viewlineItem();
         });
+      } else {
+        this.setState({
+          treeData: [],
+          selectedKeys: [''],
+          tableDataXianshi: false,
+          expandedKeys: expandedKeysData,
+          pHeight: this.getPanelHeight()
         });
       }
+    });
+  };
+
+  componentDidMount() {
+    this.initData();
+  }
+
+  getPanelHeight = () => {
+    let tableNode = this.tableNode;
+    let tableLocation = dt2react.getOffset(tableNode) || {};
+    return (tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight) - 30;
+  };
 
   // 拓扑图数据初始化
   initTopologyData = (id, value = '') => {
-    getSelfTopographyAction(id).then(data => {
+    getNodesByTypeAndTreeIdAction(type, id).then(data => {
       if (value === 'refresh') {
         message.success('拓扑图刷新成功!');
       }
@@ -249,32 +165,23 @@ class SelfSupport extends Component {
         topologyData: data
       });
     });
+
+    let tatableDataXianshi = this.state.tableDataXianshi;
+    if (true === tatableDataXianshi) {
       getDeivceListAction(0, 10, null).then(data => {
         // console.log('表格刷新成功!');
         this.setState({ tableData: data.content, totalCount: data.totalElements });
       });
     }
-
-  // // 拓扑图事件数据初始化
-  // initTopologyEventData = () => {
-  //   debugger
-  //   getDeivceListAction().then(data => {
-  //     this.setState({
-  //       tableData: data
-  //     });
-  //   });
-  // }
+  };
 
   /**
-* 获取表格所选则的行数据
-*/
+   * 获取表格所选则的行数据
+   */
   getSelectedRows = (selectedRows, selectedRowKeys) => {
     this.setState({ selectedRows, selectedRowKeys });
-    let { riskSourceId, equipmentId, callBack } = this.props;
-    // callBack(selectedRowKeys,riskSourceId,equipmentId);
   };
 
-
   // 树选择
   onSelect = (selectedKeys, e) => {
     if (selectedKeys.length && !e.node.props.parent) {
@@ -284,61 +191,42 @@ class SelfSupport extends Component {
         selectedKeys
       });
     }
-  }
-
-
-  mapLineClick = (data) => {
-    window.localStorage.removeItem('cityLine');
-    this.state.cityLine = data;
-    this.viewlineItem();
-
-  }
+  };
 
   // 树展开
-  onExpand = (expandedKeys) => {
+  onExpand = expandedKeys => {
     this.setState({
       expandedKeys,
       autoExpandParent: false
     });
   };
 
-
   queryEquipPage = () => {
+    let tableDataXianshi = this.state.tableDataXianshi;
+    if (true === tableDataXianshi) {
       let pageConfig = this.pageConfig;
       let pageNumber = pageConfig.pageNumber - 1;
       let pageSize = pageConfig.pageSize;
       getDeivceListAction(pageNumber, pageSize, null).then(data => {
-
         this.setState({ tableData: data.content, totalCount: data.totalElements });
-
       });
+    } else {
+      this.setState({ tableData: [], totalCount: 0 });
     }
-
-  // // 选择节点连线
-  // 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) => {
+  nodeSelectionChanged = e => {
     // console.log('e',e);
-    if (e.isSelected) { }
+    if (e.isSelected) {
     }
+  };
 
   // 节点数据改变
-  nodeChange = (e) => {
+  nodeChange = e => {
     // console.log(e.model.toJson());
     this.updateTopologyData = JSON.parse(e.model.toJson());
-  }
+  };
 
   // 保存节点数据
   saveTopologyData = () => {
@@ -349,10 +237,10 @@ class SelfSupport extends Component {
       nodeData: nodeDataArray,
       linkData: linkDataArray
     };
-    updateSelfTopographyAction(params).then(data => {
+    saveNodesByTypeUrlAction(type, params).then(data => {
       message.success('拓扑图保存成功!');
     });
-  }
+  };
 
   /**
    * 分页设置参数
@@ -366,8 +254,8 @@ class SelfSupport extends Component {
   };
 
   /**
-* 获取表格刷新方法
-*/
+   * 获取表格刷新方法
+   */
   reload = r => {
     this.setState(
       {
@@ -384,10 +272,10 @@ class SelfSupport extends Component {
   refreshTopologyData = () => {
     const { selectedKeys } = this.state;
     this.initTopologyData(selectedKeys[0], 'refresh');
-  }
+  };
 
   // 视图切换
-  toggleView = (value) => {
+  toggleView = value => {
     if (value === 'left') {
       this.setState({
         isTreeDisplay: true,
@@ -401,14 +289,17 @@ class SelfSupport extends Component {
         activeView: 'detail'
       });
     }
-  }
 
-  //webSocket 接收消息
-  handleData = (data) => {
+    //拓扑图刷新
     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, totalCount, selectedRowKeys, pagination, isChecked } = this.state;
@@ -424,17 +315,11 @@ class SelfSupport extends Component {
       }
     }
     const { topologyData } = this.state;
-    const { tableData, isTableDisplay, pHeight, activeView } = this.state;
+    const { tableData, isTableDisplay, activeView } = this.state;
     console.log(topologyData);
     return (
       <div className="self-wrapper">
-        <AmosWebSocket
-          ref={node => this.aws = node}
-          url={SysWsURL.selfURI}
-          onMessage={this.handleData}
-          reconnect
-          debug
-        />
+        <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.selfURI} onMessage={this.handleData} reconnect debug />
         <div className="self-header">
           <div className="self-view">
             <div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
@@ -454,8 +339,8 @@ class SelfSupport extends Component {
           </div>
         </div>
         <div className="self-content">
-          {<div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })} >
-
+          {
+            <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
               <TreeComponent
                 treeData={treeData}
                 //treeData={moniTreeData}
@@ -464,17 +349,10 @@ class SelfSupport extends Component {
                 // onSelect={this.onSelect}
                 onExpand={this.onExpand}
               />
-          </div>}
+            </div>
+          }
           <div className={`middle-content ${isTreeDisplay && isTableDisplay ? '' : 'only-middle'}`}>
             <div className="paslogy-content">
-              <div className="middle-content-div">
-                <div className="content-left">
-                  <div className="box">西安中心</div>
-                </div>
-                <div className="content-right">
-                  <div className="box">咸阳中心</div>
-                </div>
-              </div>
               <div className="net-topo-content">
                 <TopologyComponent
                   topologyData={topologyData}
@@ -485,36 +363,10 @@ class SelfSupport extends Component {
               </div>
             </div>
           </div>
-          {/* <div className={`middle-content ${isTreeDisplay && isTableDisplay?'':'only-middle'}`}>
-            <div className="paslogy-content">
-              {
-          this.mapView ? <IndexChart mapLineClick={this.mapLineClick} /> :
-          <TopologyComponent
-            topologyData={topologyData}
-            nodeSelectionLinkChanged={this.nodeSelectionLinkChanged}
-            nodeChange={this.nodeChange}
-          />
-        }
-            </div>
-          </div> */}
 
           <div className={classnames({ 'right-content': isTableDisplay, 'right-content-close': !isTableDisplay })}>
-            <div className="devive-title">
-              日志
-            </div>
-            <div className="device-lists" ref={node => this.tableNode = node}>
-              {/* <AmosGridTable
-                columns={checkListColumns(this)}
-                getTableDataAction={()=>{}}
-                callBack={()=>{}}
-                isPageable={true}
-                isChecked={false}
-                dataList={tableData}
-                //dataList={data}
-                getPanelHeight={this.getPanelHeight}
-                pHeight={pHeight}
-              />
-            </div> */}
+            <div className="devive-title">日志</div>
+            <div className="device-lists" ref={node => (this.tableNode = node)}>
               <AmosGridTable
                 columns={checkListColumns(this)}
                 callBack={this.reload}
@@ -540,8 +392,6 @@ class SelfSupport extends Component {
   }
 }
 
-SelfSupport.propTypes = {
-
-};
+SelfSupport.propTypes = {};
 
 export default SelfSupport;

src/view/bizview/situation/alarm/AlarmSearch.js

@@ -64,7 +64,6 @@ class AlarmSearch extends Component {
   };
 
   searchData = () => {
-    debugger
     let { searchParam } = this.state;
     this.props.setSearchParam(searchParam);
   };

src/view/common/mainframe/Header.js

@@ -137,7 +137,7 @@ class Header extends Component {
 }
 
 Header.defaultProps = {
-  height: 250
+  height: 310
 };
 
 Header.propTypes = {

src/view/common/mainframe/MainFrameView.js

@@ -152,7 +152,7 @@ class MainFrame extends Component {
       <div className="view-port">
         <Header
           navs={extendSystem}
-          logoText={'运维安全预控执行系统'}
+          logoText={'西安CCPC运维安全预控执行系统'}
           onLogoClick={this.onLogoClick}
           onNavItemClick={this.handleMenuClick}
           renderSubmenu={renderSubmenu}

src/view/region/index.js

@@ -5,7 +5,7 @@ import { Select, Form, Button } from 'amos-framework';
 import * as endConf from 'amos-processor/lib/config/endconf';
 import { setRegion } from './../../utils/cacheUtils';
 import { tellRegionSelectAction } from './../../services/navApi';
-import { getCurrentUser,getDictionaryList } from './../../services/securityService';
+import { getCurrentUser, getDictionaryList } from './../../services/securityService';
 import { fetchRegionSelectAction } from './../../services/checkInfoService';
 import { tirggerTransTopic } from './../3dview/dataProcessor';
 import { regionSelectAction } from './../../services/bizService';
@@ -33,7 +33,7 @@ class RegionSelect extends Component {
     this.state = {
       userInfo: {},
       reginParams: {},
-      dictionaryList:[]
+      dictionaryList: []
     };
   }
 
@@ -47,27 +47,30 @@ class RegionSelect extends Component {
   * 查询组织机构字典
   */
   getDicCode = (dicCode) => {
-    getDictionaryList(dicCode).then(data =>{
+    getDictionaryList(dicCode).then(data => {
       this.setState({
-        dictionaryList:data
-       })
-    })
+        dictionaryList: data
+      });
+      lsTool.write('dictionaryList', JSON.stringify(data));
+    });
   }
 
   onClick = () => {
-    const { reginParams,dictionaryList } = this.state;
+    const { reginParams } = this.state;
     //获取当前登陆部门
-    lsTool.write('dictionaryList', JSON.stringify(dictionaryList));
-    lsTool.write("department", JSON.stringify(reginParams.department))
+    //lsTool.write('dictionaryList', JSON.stringify(dictionaryList));
+    lsTool.write("department", JSON.stringify(reginParams.department));
     lsTool.remove('selectedRole');
     regionSelectAction(reginParams).then(
       data => {
         const { state } = this.props.location;
         const { sequenceNbr } = reginParams.role || {};
         const { companyName } = reginParams.company || {};
+        const companyOrgCode = reginParams.company.orgCode || {};
         const companySequenceNbr = reginParams.sequenceNbr || {};
         lsTool.write('selectedRole', sequenceNbr);
         lsTool.write('selectedCompany', companyName);
+        lsTool.write('selectedCompanyOrg', companyOrgCode);
         lsTool.write('companySequenceNbr', companySequenceNbr);
         if (state) {
           browserHistory.push('/main/3dview');
@@ -116,7 +119,7 @@ class RegionSelect extends Component {
       roles = orgRoles[value];
     }
     if (key === 'department') {
-      reginParams.department = departments.find(item => item &&item.sequenceNbr === value);
+      reginParams.department = departments.find(item => item && item.sequenceNbr === value);
       roles = orgRoles[value];
     }
     if (key === 'role') {

tpl.html

@@ -7,10 +7,10 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="application/javascript" src="/amos.config.js"></script>
-  <script src="http://webapi.amap.com/maps?v=1.4.3&key=8afbcd8006fcd36a22136ef20a12456a"></script>
+  <!-- <script src="http://webapi.amap.com/maps?v=1.4.3&key=8afbcd8006fcd36a22136ef20a12456a"></script>
   <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=8afbcd8006fcd36a22136ef20a12456a&plugin=AMap.DistrictSearch"></script>
   <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
-  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
+  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
     <title>安全预控执行系统</title>
     <script>
       window.offlineMap = {