Commit 8fed181d authored by 李成龙's avatar 李成龙

Merge branch 'develop_20200601' into 'develop'

Develop 20200601 See merge request !2
parents 05fc2e02 3568daf6
...@@ -61,10 +61,10 @@ ...@@ -61,10 +61,10 @@
isAutoOpenBussiness: true, isAutoOpenBussiness: true,
//内外部地图加载,outMap是true 使用离线地图, false使用在线地图 //内外部地图加载,outMap是true 使用离线地图, false使用在线地图
outMap: true, outMap: true,
evaluateModelId: 11 evaluateModelId: 11 //配置评价方法ID
}, },
//添加关联设备弹出框标识 'bank'代表银行 'fireAutoSys'代表换流站 //添加关联设备弹出框标识 'bank'代表银行 'fireAutoSys'代表换流站
equipmentIdentification:'bank', equipmentIdentification: 'bank',
// 屏保配置信息 // 屏保配置信息
screenSaverConf: { screenSaverConf: {
...@@ -96,9 +96,9 @@ ...@@ -96,9 +96,9 @@
'mapItem-19': -1 'mapItem-19': -1
}, },
//地图中心点 //地图中心点
mapCenter: [108.95141,36.79997], mapCenter: [108.90771484,35.93184115],
//地图zoom显示级别 //地图zoom显示级别
showZoom: [6,13,18] showZoom: [7,13,18]
}; };
// 配置日志系统 // 配置日志系统
...@@ -124,4 +124,7 @@ ...@@ -124,4 +124,7 @@
window.demo = true; window.demo = true;
window.BizPermissionType = 25; //业务屏菜单权限类型 可删除 window.BizPermissionType = 25; //业务屏菜单权限类型 可删除
window.V3DpermissionType = 26; //3D屏菜单权限类型 可删除 window.V3DpermissionType = 26; //3D屏菜单权限类型 可删除
window.appKey = 'AMOS_BANK';
window.product = 'AMOS_BANK_WEB';
window.dutyType = 'bank'; //normal/bank
})(); })();
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
"dependencies": { "dependencies": {
"amos-3d": "^2.1.5", "amos-3d": "^2.1.5",
"amos-amap": "^1.0.8", "amos-amap": "^1.0.8",
"amos-antd": "^2.0.22", "amos-antd": "^2.1.4",
"amos-core": "^2.0.27", "amos-core": "^2.0.27",
"amos-devgrid": "^1.0.10", "amos-devgrid": "^1.0.10",
"amos-dll": "^2.0.1", "amos-dll": "^2.0.1",
......
src/assets/3dview/header.png

43.7 KB | W: | H:

src/assets/3dview/header.png

42.9 KB | W: | H:

src/assets/3dview/header.png
src/assets/3dview/header.png
src/assets/3dview/header.png
src/assets/3dview/header.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/3dview/headerTitle.png

17.2 KB | W: | H:

src/assets/3dview/headerTitle.png

18.9 KB | W: | H:

src/assets/3dview/headerTitle.png
src/assets/3dview/headerTitle.png
src/assets/3dview/headerTitle.png
src/assets/3dview/headerTitle.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/3dview/loading.gif

1.84 MB | W: | H:

src/assets/3dview/loading.gif

3.11 MB | W: | H:

src/assets/3dview/loading.gif
src/assets/3dview/loading.gif
src/assets/3dview/loading.gif
src/assets/3dview/loading.gif
  • 2-up
  • Swipe
  • Onion skin
...@@ -71,6 +71,7 @@ export default { ...@@ -71,6 +71,7 @@ export default {
impEquipment_01: require('./../assets/3dview/markers/impEquip1.png'), impEquipment_01: require('./../assets/3dview/markers/impEquip1.png'),
impEquipment_02: require('./../assets/3dview/markers/impEquip2.png'), impEquipment_02: require('./../assets/3dview/markers/impEquip2.png'),
impEquipment_03: require('./../assets/3dview/markers/impEquip3.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_01: require('./../assets/3dview/markers/dynamicRingData2.png'),
dynamicRingData_02: require('./../assets/3dview/markers/fireDetect.png'), dynamicRingData_02: require('./../assets/3dview/markers/fireDetect.png'),
......
...@@ -143,14 +143,18 @@ export const FscSerUrl = { ...@@ -143,14 +143,18 @@ export const FscSerUrl = {
getxuncountActionUrl: completePrefix(baseURI, 'bank/alarm/mobile/getxuncount'), getxuncountActionUrl: completePrefix(baseURI, 'bank/alarm/mobile/getxuncount'),
rightTopChartDataUrl: completePrefix(baseURI, 'bank/inspection/rightTopChart?companyId={companyId}'), 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'), bottomTableDataUrl: completePrefix(baseURI, 'bank/inspection/bottomTable'),
//值班信息模块
middleHeaderDataUrl: completePrefix(baseURI, 'duty/middleHeader?orgCode={orgCode}'),
middleTableListUrl: completePrefix(baseURI, 'duty/middleTableList?orgCode={orgCode}&id={id}'),
middleHeaderAction1:completePrefix(baseURI, 'bank/inspection/patrolPlanList?start={start}&end={end}&deptId={depId}&deptName={deptName}'), middleHeaderAction1:completePrefix(baseURI, 'bank/inspection/patrolPlanList?start={start}&end={end}&deptId={depId}&deptName={deptName}'),
getporintAction:completePrefix(baseURI, 'bank/inspection/getporint?pointid={pointid}'), getporintAction:completePrefix(baseURI, 'bank/inspection/getporint?pointid={pointid}'),
// 告警数据 // 告警数据
alarmDataUrl: completePrefix(baseURI, 'bank/alarm/list'), alarmDataUrl: completePrefix(baseURI, 'bank/alarm/list'),
sevenDaysalarmDataUrl: completePrefix(baseURI, 'bank/alarm/statistics'),
getMobileShowDateUrl: completePrefix(baseURI, 'bank/alarm/mobile/show'),
// impEquAlarmUrl: completePrefix(deviceURI, 'alarm/equipAttr'), // impEquAlarmUrl: completePrefix(deviceURI, 'alarm/equipAttr'),
// metricDataUrl: completePrefix(deviceURI, 'metricdata/listMongoData'), // metricDataUrl: completePrefix(deviceURI, 'metricdata/listMongoData'),
//******************************************************************************* //*******************************************************************************
...@@ -387,7 +391,11 @@ export const SpcSerUrl = { ...@@ -387,7 +391,11 @@ export const SpcSerUrl = {
getSelfTopoTreeUrl: completePrefix(baseURI, 'bank/topography/selftree'), //自建系统树 getSelfTopoTreeUrl: completePrefix(baseURI, 'bank/topography/selftree'), //自建系统树
getSelfTopographyUrl: completePrefix(baseURI, 'bank/topography/selfnodes'), //自建系统树节点 getSelfTopographyUrl: completePrefix(baseURI, 'bank/topography/selfnodes'), //自建系统树节点
updateSelfUrl: 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 = { export const patrolUrls = {
...@@ -509,7 +517,8 @@ export const MonitorUrl = { ...@@ -509,7 +517,8 @@ export const MonitorUrl = {
getMonitorsByPageDataUrl: completePrefix(baseURI, 'rtsp/listVideoByPage'), //监控视频分页查询 getMonitorsByPageDataUrl: completePrefix(baseURI, 'rtsp/listVideoByPage'), //监控视频分页查询
getMonitorsTreeUrl: completePrefix(baseURI, 'rtsp/monitorVideoTree'), //视频监控左侧树列表 getMonitorsTreeUrl: completePrefix(baseURI, 'rtsp/monitorVideoTree'), //视频监控左侧树列表
getMonitorsByFloor3dUrl: completePrefix(baseURI, 'rtsp/list?floor3d={floor}&orgCode={orgCode}'), //根据行政编码和楼层查询监控信息 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 = { 废弃 // export const DeviceURI = { 废弃
......
...@@ -28,7 +28,8 @@ export default { ...@@ -28,7 +28,8 @@ export default {
sbTopoURI: completePrefix(baseURI, 'shebei'),//设备监控拓扑图消息 sbTopoURI: completePrefix(baseURI, 'shebei'),//设备监控拓扑图消息
towMapURI: completePrefix(baseURI, 'gj'),//GPS轨迹坐标消息 towMapURI: completePrefix(baseURI, 'gj'),//GPS轨迹坐标消息
aisleURI: completePrefix(baseURI, 'aisleAlarm'), //首页地图通道消息 aisleURI: completePrefix(baseURI, 'aisleAlarm'), //首页地图通道消息
planTaskURI: completePrefix(baseURI, 'plantask') //巡检推送消息(刷新支付业务和巡检计划执行情况) planTaskURI: completePrefix(baseURI, 'plantask') ,//巡检推送消息(刷新支付业务和巡检计划执行情况)
technologyIpURI: completePrefix(baseURI, 'technologyIp'), //科技处设备ping IP
}; };
export const completeToken = (url) => { export const completeToken = (url) => {
......
...@@ -94,6 +94,9 @@ const AsyncDynamicRing = props => <AsyncLoader load={import('./../view/bank/dyna ...@@ -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 AsyncEqpAndMovingRing = props => <AsyncLoader load={import('./../view/bank/eqpAndMovingRing/index')} componentProps={props} />;
const AsyncEquipMonitor = props => <AsyncLoader load={import('./../view/bank/equipMonitor')} 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 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 = { const Routes = {
// 添加 rules 路由 // 添加 rules 路由
...@@ -175,7 +178,9 @@ const Routes = { ...@@ -175,7 +178,9 @@ const Routes = {
donghuan: AsyncDynamicRing, donghuan: AsyncDynamicRing,
deviceMonitor: AsyncEquipMonitor, deviceMonitor: AsyncEquipMonitor,
eqpAndMovingRing: AsyncEqpAndMovingRing, eqpAndMovingRing: AsyncEqpAndMovingRing,
selfSupport:AsyncSelfSupport selfSupport: AsyncSelfSupport,
financialCityLan: AsyncFinancialCityLanSupport,
virtualCloudPlatform: AsyncVirtualCloudPlatformSupport
}; };
......
...@@ -19,7 +19,7 @@ import RegionList from './../view/region'; ...@@ -19,7 +19,7 @@ import RegionList from './../view/region';
import BusinessView from './../view/bizview/point/PointView'; import BusinessView from './../view/bizview/point/PointView';
import RiskPoint from './../view/bizview/riskPoint/index'; 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 Fireequip from './../view/bizview/fireEquipment/index';
import Personnel from './../view/bizview/personnelInfo/index'; import Personnel from './../view/bizview/personnelInfo/index';
// import CheckDetail from './../view/bizview/checkManage/checkDetail'; // import CheckDetail from './../view/bizview/checkManage/checkDetail';
...@@ -87,6 +87,8 @@ import PamsTable from './../view/pamsTable'; ...@@ -87,6 +87,8 @@ import PamsTable from './../view/pamsTable';
import DynamicRing from './../view/bank/dynamicRing'; import DynamicRing from './../view/bank/dynamicRing';
import EquipMonitor from './../view/bank/equipMonitor'; import EquipMonitor from './../view/bank/equipMonitor';
import EqpAndMovingRing from './../view/bank/eqpAndMovingRing/index'; import EqpAndMovingRing from './../view/bank/eqpAndMovingRing/index';
import VirtualCloudPlatform from './../view/bank/virtualCloudPlatform/index';
import FinancialCityLan from './../view/bank/financialCityLan/index';
const Routes = { const Routes = {
...@@ -106,7 +108,7 @@ const Routes = { ...@@ -106,7 +108,7 @@ const Routes = {
twoDimensionalMap: TwoDimensionalMap, twoDimensionalMap: TwoDimensionalMap,
bizview: BusinessView, bizview: BusinessView,
riskpoint: RiskPoint, riskpoint: RiskPoint,
dutyinfo: Dutyinfo, dutyinfo: DutyInfo,
fireequip: Fireequip, fireequip: Fireequip,
personnel: Personnel, personnel: Personnel,
patrolpoint: Patrol, patrolpoint: Patrol,
...@@ -171,7 +173,11 @@ const Routes = { ...@@ -171,7 +173,11 @@ const Routes = {
deviceMonitor: EquipMonitor, deviceMonitor: EquipMonitor,
eqpAndMovingRing: EqpAndMovingRing, eqpAndMovingRing: EqpAndMovingRing,
//自建系统 //自建系统
selfSupport: SelfSupport selfSupport: SelfSupport,
//虚拟云平台监控
virtualCloudPlatform: VirtualCloudPlatform,
//金融城域网
financialCityLan: FinancialCityLan
}; };
const pageCompontent = key => { const pageCompontent = key => {
......
...@@ -2,7 +2,7 @@ import formatUrl from 'amos-processor/lib/utils/urlFormat'; ...@@ -2,7 +2,7 @@ import formatUrl from 'amos-processor/lib/utils/urlFormat';
import * as helper from 'base-r3d/lib/utils/helper'; import * as helper from 'base-r3d/lib/utils/helper';
// import { helper } from 'amos-3d/lib/threeTools'; // import { helper } from 'amos-3d/lib/threeTools';
import { FscSerUrl, FasSerUrl } from './../consts/urlConsts'; 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'; import { baseURI } from 'amos-processor/lib/config/endconf';
//---------------- 加载模型、解析模型json ----------- //---------------- 加载模型、解析模型json -----------
...@@ -273,15 +273,17 @@ export const rightTopChartAction = (companyId) => { ...@@ -273,15 +273,17 @@ export const rightTopChartAction = (companyId) => {
* 查询主页一级值班信息 * 查询主页一级值班信息
* @param {*} id * @param {*} id
*/ */
export const middleTabletAction = ( page, size ) => { export const middleTabletAction = (id) => {
return commonGet(formatUrl(FscSerUrl.middleTableListUrl,{ page, size })); let orgCode = getOrgCode();
return commonGet(formatUrl(FscSerUrl.middleTableListUrl, { orgCode,id }));
}; };
/** /**
* 查询主页二级值班信息 * 查询主页二级值班信息
* @param {*} id * @param {*} id
*/ */
export const middleHeaderAction = ( page, size ) => { export const middleHeaderAction = () => {
return commonGet(formatUrl(FscSerUrl.middleHeaderDataUrl)); let orgCode = getOrgCode();
return commonGet(formatUrl(FscSerUrl.middleHeaderDataUrl, { orgCode }));
}; };
/** /**
* 查询主页支付累计数据 * 查询主页支付累计数据
......
...@@ -6,3 +6,17 @@ import { FscSerUrl } from './../consts/urlConsts'; ...@@ -6,3 +6,17 @@ import { FscSerUrl } from './../consts/urlConsts';
export const getAlarms = function() { export const getAlarms = function() {
return commonGet(FscSerUrl.alarmDataUrl); return commonGet(FscSerUrl.alarmDataUrl);
}; };
/**
* 获取七天告警统计数据
*/
export const getSevenDaysAlarms = function() {
return commonGet(FscSerUrl.sevenDaysalarmDataUrl);
};
/**
* 首页动环信息展示
*/
export const getMobileShowDate = function() {
return commonGet(FscSerUrl.getMobileShowDateUrl);
};
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);
};
...@@ -52,3 +52,12 @@ export const updateMonitorPosition3d = (data) => { ...@@ -52,3 +52,12 @@ export const updateMonitorPosition3d = (data) => {
let url = MonitorUrl.updateMonitorPosition3dUrl; let url = MonitorUrl.updateMonitorPosition3dUrl;
return commonPut(url, data); return commonPut(url, data);
}; };
/**
* 更新动环点三维坐标
* @param {*} data
*/
export const updateDynamicRingPosition = (data) => {
let url = MonitorUrl.updateDynamicRingPosition3dUrl;
return commonPut(url, data);
};
...@@ -72,3 +72,7 @@ body { ...@@ -72,3 +72,7 @@ body {
line-height: 36px; line-height: 36px;
border: 0; border: 0;
} }
.amos-toast-inner.amos-toast-inner-closable {
top: 150px;
background:#49a9ee;
}
@function vw($px) {
@return ($px/ 1920) * 100vw;
}
@function vh($px) {
@return ($px/ 1080) * 100vh;
}
.content-body-2d { .content-body-2d {
display: flex;
display: -webkit-flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #d7e7fb !important; background: #d7e7fb !important;
...@@ -7,28 +18,38 @@ ...@@ -7,28 +18,38 @@
.AlarmMarquee-top-news { .AlarmMarquee-top-news {
top: 7rem; top: 7rem;
} }
.body-left { .body-left {
top: 7rem; top: 7rem;
font-size: 16px;
} }
.body-second { .body-second {
top: 7rem; top: 7rem;
} }
.body-right { .body-right {
top: 7rem; top: 7rem;
font-size: 16px;
} }
} }
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff;
.body-left { .body-left {
position: absolute; position: absolute;
// @media screen and (min-width: 1280px) and (max-width: 1366px) {
// position: fixed;
// }
top: 0; top: 0;
//right: 47px; //right: 47px;
left: 10px; left: 10px;
z-index: 200; z-index: 200;
padding: 5px 0;
width: 22%; width: 22%;
padding: 5px 0;
// height: 100%; // height: 100%;
> div { > div {
width: 100%; width: 100%;
...@@ -36,170 +57,310 @@ ...@@ -36,170 +57,310 @@
text-align: right; text-align: right;
// background: url('/src/assets/bg/indexRight.png') no-repeat center center/100% 100%; // background: url('/src/assets/bg/indexRight.png') no-repeat center center/100% 100%;
img { img {
height: 100%;
width: 100%; width: 100%;
height: 100%;
} }
} }
.point {
padding-top:130px;
}
.dangerNums { .dangerNums {
margin-bottom: 5px; margin-bottom: -12px;
// height: 15%; // height: 15%;
.item { .item {
width: 25%;
// border-left: 1px solid #fff; // border-left: 1px solid #fff;
float: left; 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:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 100%;
padding: 8px 0;
.itemValue { .itemValue {
font-size: 17px;
color: #f70500;
height: 45%; height: 45%;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 17px;
color: #f70500;
} }
&:nth-child(1) { &:nth-child(1) {
.itemContent { .itemContent {
border-left: none; border-left: none;
} }
} }
&:nth-child(1) { &:nth-child(1) {
.itemValue { .itemValue {
color: #f70500; color: #f70500;
} }
} }
&:nth-child(2) { &:nth-child(2) {
.itemValue { .itemValue {
color: #ff8000; color: #ff8000;
} }
} }
&:nth-child(3) { &:nth-child(3) {
.itemValue { .itemValue {
color: #f1f10c; color: #f1f10c;
} }
} }
&:nth-child(4) { &:nth-child(4) {
.itemValue { .itemValue {
color: #06c3ff; color: #06c3ff;
} }
} }
.itemContent { .itemContent {
border-left: 1px solid rgba(151, 180, 226, 0.5); display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; border-left: 1px solid rgba(151, 180, 226, 0.5);
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
} }
} }
.alarmNums { .alarmNums {
height: 15%; height: 15%;
padding-top: 2px;
margin-bottom: -8px;
.item { .item {
width: 25%;
// border-left: 1px solid #fff; // border-left: 1px solid #fff;
float: left; 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:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 100%;
padding: 8px 0;
.itemValue { .itemValue {
font-size: 17px;
color: #f70500;
height: 45%; height: 45%;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 17px;
color: #f70500;
} }
&:nth-child(1) { &:nth-child(1) {
.itemContent { .itemContent {
border-left: none; border-left: none;
} }
} }
&:nth-child(1) { &:nth-child(1) {
.itemValue { .itemValue {
color: #f70500; color: #f70500;
} }
} }
&:nth-child(2) { &:nth-child(2) {
.itemValue { .itemValue {
color: #ff8000; color: #ff8000;
} }
} }
&:nth-child(3) { &:nth-child(3) {
.itemValue { .itemValue {
color: #f1f10c; color: #f1f10c;
} }
} }
&:nth-child(4) { &:nth-child(4) {
.itemValue { .itemValue {
color: #06c3ff; color: #06c3ff;
} }
} }
.itemContent { .itemContent {
border-left: 1px solid rgba(151, 180, 226, 0.5); display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; border-left: 1px solid rgba(151, 180, 226, 0.5);
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
} }
} }
.alarmLineChart {
height: 23rem;
background: transparent;
background-color: #2965ca;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.equipmentdata { .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 { .item {
width: 33.333%;
border-left: 1px solid #fff;
float: left; 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:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
border-left: 1px solid #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 100%;
.chartBox { .chartBox {
height: 60%; height: 60%;
} }
.chartDesc { .chartDesc {
height: 40%;
display: flex; display: flex;
height: 40%;
color: #fff;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: #fff;
span { span {
line-height: 20px; line-height: 20px;
} }
.itemIcon { .itemIcon {
display: inline-block; display: inline-block;
height: 20px;
width: 20px; width: 20px;
height: 20px;
vertical-align: top; vertical-align: top;
} }
} }
} }
} }
.rangeData { .rangeData {
height: 47%; height: 47%;
.item { .item {
width: 100%; width: 100%;
height: 50%;
margin-bottom: 1px; margin-bottom: 1px;
// border-bottom: 1px solid #fff; // border-bottom: 1px solid #fff;
// float: left; // float: left;
// background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 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); background: rgba(23, 90, 201, 0.9);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 50%;
.chartBox { .chartBox {
height: 85%; height: 85%;
} }
.chartDesc { .chartDesc {
height: 15%; height: 15%;
min-height: 25px; min-height: 25px;
text-align: center;
color: #fff; color: #fff;
text-align: center;
span { span {
line-height: 24px; line-height: 24px;
} }
...@@ -256,33 +417,52 @@ ...@@ -256,33 +417,52 @@
// } // }
// } // }
.business { .business {
padding-top: 5px;
height: 44%; height: 44%;
padding-top: 5px;
.chartBody { .chartBody {
// height: 300px; // height: 300px;
} }
.table-bottom { .table-bottom {
// height: 100%;
width: 100%;
// margin-top: 2px; // margin-top: 2px;
// padding: 10px 20px; // padding: 10px 20px;
float: left; float: left;
// height: 100%;
width: 100%;
.business-table { .business-table {
// height: 25%; // height: 25%;
//padding: 15px 10px; //padding: 15px 10px;
padding: 0 10px; padding: 0 10px;
//padding-bottom: 25px;
padding-bottom: 10px;
margin-bottom: 1px;
color: #fff; color: #fff;
text-align: initial; text-align: initial;
margin-bottom: 1px;
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
//padding-bottom: 25px;
padding-bottom: 10px;
> div { > 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; 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; margin-bottom: 2px;
text-align: center;
} }
.business-table-header { .business-table-header {
...@@ -293,20 +473,20 @@ ...@@ -293,20 +473,20 @@
> table { > table {
width: 100%; width: 100%;
text-align: center; text-align: center;
border-collapse: collapse;
border: 1px solid #42bee1; border: 1px solid #42bee1;
border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
> tbody{
> tbody {
> tr { > tr {
> td { > td {
border-collapse: collapse;
border: 1px solid #42bee1;
height: 29px; height: 29px;
overflow: hidden;
line-height: 29px; line-height: 29px;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
border: 1px solid #42bee1;
border-collapse: collapse;
} }
} }
} }
...@@ -328,45 +508,45 @@ ...@@ -328,45 +508,45 @@
.top { .top {
width: 135px; width: 135px;
height: 40px; height: 40px;
font-size: 14;
text-align: center;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 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; border-radius: 20px;
text-align: center; opacity: 1;
font-size: 14; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
.small-card-wrapper { .small-card-wrapper {
height: 100%; height: 100%;
text-align: center;
font-size: 14px; font-size: 14px;
text-align: center;
.small-card-css { .small-card-css {
height: 100%;
background: linear-gradient(#dfdfdfff, #ffffffff);
width: 55px; width: 55px;
height: 100%;
height: 28px; height: 28px;
text-align: center; padding-top: 3px;
border-radius: 20px;
margin-top: 5px; margin-top: 5px;
margin-left: 6px; margin-left: 6px;
color: #1f72f9; color: #1f72f9;
padding-top: 3px; text-align: center;
cursor: pointer; cursor: pointer;
background: linear-gradient(#dfdfdfff, #ffff);
border-radius: 20px;
} }
.small-card-css-selected { .small-card-css-selected {
height: 100%;
background: linear-gradient(#9ee4ffff, #389ec5ff);
width: 55px; width: 55px;
height: 100%;
height: 28px; height: 28px;
text-align: center; padding-top: 3px;
border-radius: 20px;
margin-top: 5px; margin-top: 5px;
color: white;
margin-left: 6px; margin-left: 6px;
padding-top: 3px; color: white;
text-align: center;
cursor: pointer; cursor: pointer;
background: linear-gradient(#9ee4ffff, #389ec5ff);
border-radius: 20px;
} }
// .small-card-css { // .small-card-css {
...@@ -402,61 +582,63 @@ ...@@ -402,61 +582,63 @@
} }
.middle { .middle {
margin-top: 10px;
width: 100%; width: 100%;
height: 45px; height: 45px;
margin-top: 10px;
//复位样式 //复位样式
.fw-css { .fw-css {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 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; text-align: center;
cursor: pointer; 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 { .bottom {
position: relative; position: relative;
height: 30px;
width: 120px; width: 120px;
height: 30px;
} }
.fw-css-selected { .fw-css-selected {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 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; text-align: center;
cursor: pointer; 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 { .track-css {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 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; text-align: center;
cursor: pointer; 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 { .track-css-selected {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 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; text-align: center;
cursor: pointer; 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 { img {
...@@ -470,13 +652,13 @@ ...@@ -470,13 +652,13 @@
bottom: 20px; bottom: 20px;
left: 24%; left: 24%;
z-index: 1; z-index: 1;
width: 120px; width: 150px;
height: 180px; height: 90px;
padding-top: 10px; padding-top: 10px;
padding-left: 10px; padding-left: 10px;
background: white;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
border-radius: 5px; border-radius: 5px;
background: white;
.indexMap-bottom-one { .indexMap-bottom-one {
float: left; float: left;
...@@ -486,10 +668,10 @@ ...@@ -486,10 +668,10 @@
} }
.indexMap-bottom-two { .indexMap-bottom-two {
width: 80px; width: 97px;
height: 20px; height: 20px;
margin-top: 3px; margin-top: 3px;
margin-left: 40px; margin-left: 31px;
color: black; color: black;
} }
} }
...@@ -499,6 +681,7 @@ ...@@ -499,6 +681,7 @@
float: left; float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 15px;
.after_line_small { .after_line_small {
margin-top: 25px; margin-top: 25px;
...@@ -510,10 +693,12 @@ ...@@ -510,10 +693,12 @@
.line1 { .line1 {
margin-top: 15px; margin-top: 15px;
} }
.line4 { .line4 {
margin-left: -3px;
margin-top: 15px; margin-top: 15px;
margin-left: -3px;
} }
.line6 { .line6 {
margin-top: 15px; margin-top: 15px;
} }
...@@ -527,12 +712,12 @@ ...@@ -527,12 +712,12 @@
//color: white; //color: white;
color: white; color: white;
.xian{ .xian {
width: 100px; width: 150px;
height: 50px; height: 100px;
background-color: #f50000; background-color: #f50000;
.xian-line{ .xian-line {
width: 1px; width: 1px;
height: 50px; height: 50px;
background-color: #f50000; background-color: #f50000;
...@@ -541,41 +726,42 @@ ...@@ -541,41 +726,42 @@
} }
} }
.xianyang{ .xianyang {
bottom: 70px;
left: -160px;
width: 100px; width: 100px;
height: 22px; height: 22px;
left: -160px;
bottom: 70px;
.xianyang-line{ .xianyang-line {
position: absolute;
width: 1px; width: 1px;
height: 130px; height: 150px;
margin-left: 142px; margin-top: 1px;
-webkit-transform: rotate(135deg); margin-left: 138px;
-moz-transform: rotate(-45deg); -webkit-transform: rotate(145deg);
} }
span { span {
position: absolute; position: absolute;
margin-left: -50px;
margin-top: 2px; margin-top: 2px;
margin-left: -50px;
} }
} }
} }
.after_circle_title { .after_circle_title {
width: 80px; width: 80px;
background-color: rgba(23,90,201,0.9);
color: white;
margin-top: -45px; margin-top: -45px;
margin-left: -30px; margin-left: -30px;
border-radius: 7px; color: white;
text-align: center; text-align: center;
background-color: rgba(23, 90, 201, 0.9);
border-radius: 7px;
.pulse-spread-circle{ .pulse-spread-circle {
position: absolute; position: absolute;
right: 17px;
top: -9px; top: -9px;
right: 17px;
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid red; border: 3px solid red;
...@@ -587,18 +773,18 @@ ...@@ -587,18 +773,18 @@
} }
} }
.after_circle_title_center{ .after_circle_title_center {
width: 80px; width: 80px;
background-color: rgba(23,90,201,0.9);
color: white;
margin-left: -30px; margin-left: -30px;
border-radius: 7px; color: white;
text-align: center; text-align: center;
background-color: rgba(23, 90, 201, 0.9);
border-radius: 7px;
.pulse-spread-xian { .pulse-spread-xian {
position: absolute; position: absolute;
right: 22px;
top: 12px; top: 12px;
right: 22px;
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid red; border: 3px solid red;
...@@ -611,8 +797,8 @@ ...@@ -611,8 +797,8 @@
.pulse-spread-xianyang { .pulse-spread-xianyang {
position: absolute; position: absolute;
left: -12px;
top: 10px; top: 10px;
left: -12px;
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid red; border: 3px solid red;
...@@ -624,87 +810,90 @@ ...@@ -624,87 +810,90 @@
} }
} }
.xian{ .xian {
position: absolute; position: absolute;
width: 100px; top: -199px;
height: 22px; left: 274px;
top: -68px; width: 122px;
left: 28px; height: 36px;
font-size: 21px;
.xian-line{ .xian-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 90px; height: 342px;
margin-top: 15px; margin-top: -41px;
margin-left: -10px; margin-left: -130px;
-webkit-transform: rotate(195deg); -webkit-transform: rotate(234deg);
} }
span { span {
position: absolute; position: absolute;
margin-top: 1px; margin-left: 22px;
margin-left: 30px;
cursor: pointer; cursor: pointer;
} }
.pulse-spread-circular { .pulse-spread-circular {
position: absolute; position: absolute;
top: 78px; top: -8px;
left: -40px; left: -11px;
width: 40px; z-index: 1;
height: 40px; width: 140px;
height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
border-radius: 50%; border-width: 15px;
opacity: 0; 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; animation: pulseAnim 1.5s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
top: -7px;
left: -5px; left: -5px;
top: -3px; z-index: 1;
width: 110px; width: 122px;
height: 30px; height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
} }
} }
.xianyang{ .xianyang {
position: absolute; position: absolute;
width: 100px; top: -189px;
height: 22px; left: -331px;
top: -70px; width: 122px;
left: -135px; height: 35px;
font-size: 21px;
.xianyang-line{ .xianyang-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 90px; height: 300px;
margin-top: 12px; margin-top: -26px;
margin-left: 122px; margin-left: 228px;
-webkit-transform: rotate(150deg); -webkit-transform: rotate(130deg);
} }
span { span {
position: absolute; position: absolute;
margin-top: 1px; margin-left: 22px;
margin-left: 30px;
cursor: pointer; cursor: pointer;
} }
.pulse-spread-circular { .pulse-spread-circular {
position: absolute; position: absolute;
top: 80px; top: 200px;
left: 122px; left: 337px;
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid red; border: 3px solid red;
...@@ -715,461 +904,404 @@ ...@@ -715,461 +904,404 @@
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
top: -7px;
left: -5px; left: -5px;
top: -3px; z-index: 1;
width: 110px; width: 122px;
height: 30px; height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
} }
} }
.xidajie{ .xidajie {
position: absolute; position: absolute;
width: 100px; top: -31px;
height: 22px; left: 316px;
top: -11px; width: 153px;
left: 90px; height: 35px;
font-size: 21px;
.xidajie-line{ .xidajie-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 90px; height: 320px;
margin-top: -14px; margin-top: -113px;
margin-left: -40px; margin-left: -146px;
-webkit-transform: rotate(75deg); -webkit-transform: rotate(85deg);
} }
span { span {
position: absolute; position: absolute;
margin-top: 1px; margin-left: 14px;
margin-left: 16px;
cursor: pointer; cursor: pointer;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
left: -5px; top: -17px;
top: -3px; left: -32px;
width: 110px; z-index: 1;
height: 30px; width: 214px;
height: 65px;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
} }
} }
.xian-bank{ .xian-bank {
position: absolute; position: absolute;
width: 100px; top: 263px;
height: 22px; left: 136px;
left: 40px; width: 122px;
top: 95px; height: 35px;
font-size: 21px;
.xian-bank-line{ .xian-bank-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 90px; height: 300px;
margin-top: -70px; margin-top: -263px;
margin-left: -15px; margin-left: -60px;
-webkit-transform: rotate(160deg); -webkit-transform: rotate(152deg);
} }
span { span {
position: absolute; position: absolute;
margin-top: 1px; margin-left: 22px;
margin-left: 30px; cursor: pointer;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
top: -7px;
left: -5px; left: -5px;
top: -3px; z-index: 1;
width: 110px; width: 122px;
height: 30px; height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
} }
} }
.snxs-bank{ .snxs-bank {
position: absolute; position: absolute;
width: 100px; top: 124px;
height: 22px; left: 250px;
top: 55px; width: 122px;
left: 85px; height: 35px;
font-size: 21px;
.snxs-bank-line{ .snxs-bank-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 90px; height: 260px;
margin-top: -45px; margin-top: -177px;
margin-left: -35px; margin-left: -121px;
-webkit-transform: rotate(120deg); -webkit-transform: rotate(112deg);
} }
span { span {
position: absolute; position: absolute;
margin-left: 30px; margin-left: 22px;
margin-top: 1px; cursor: pointer;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
top: -7px;
left: -5px; left: -5px;
top: -3px; z-index: 1;
width: 110px; width: 122px;
height: 30px; height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
} }
} }
.jszx-bank{ .jszx-bank {
position: absolute; position: absolute;
width: 100px;
height: 22px;
top: -25px; top: -25px;
left: -175px; left: -440px;
// top: 87px; width: 140px;
// left: -135px; height: 35px;
font-size: 21px;
.jszx-bank-line{ .jszx-bank-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
// height: 90px; height: 320px;
// margin-top: -62px; margin-top: -112px;
// margin-left: 120px; margin-left: 283px;
// -webkit-transform: rotate(30deg); -webkit-transform: rotate(95deg);
height: 100px;
margin-top: -12px;
margin-left: 145px;
-webkit-transform: rotate(110deg);
} }
span { span {
position: absolute; position: absolute;
margin-top: 1px; margin-left: 7px;
margin-left: 16px; cursor: pointer;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
top: -7px;
left: -5px; left: -5px;
top: -3px; z-index: 1;
width: 110px; width: 122px;
height: 30px; height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
} }
} }
.ch-an-bank{ .ch-an-bank {
position: absolute; position: absolute;
width: 100px; top: 263px;
height: 22px; left: -201px;
top: 80px; width: 122px;
left: -150px; height: 35px;
// top: 40px; font-size: 21px;
// left: -175px;
.ch-an-bank-line{ .ch-an-bank-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
// height: 90px; height: 280px;
// margin-top: -40px; margin-top: -254px;
// margin-left: 140px; margin-left: 163px;
// -webkit-transform: rotate(70deg); -webkit-transform: rotate(20deg);
height: 100px;
margin-top: -67px;
margin-left: 131px;
-webkit-transform: rotate(40deg);
} }
span { span {
position: absolute; position: absolute;
margin-top: 1px; margin-left: 22px;
margin-left: 30px; cursor: pointer;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
top: -7px;
left: -5px; left: -5px;
top: -3px; z-index: 1;
width: 110px; width: 122px;
height: 30px; height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
} }
} }
.qn-bank{ .qn-bank {
position: absolute; position: absolute;
width: 100px; top: 124px;
height: 22px; left: -426px;
top: 35px; width: 122px;
left: -180px; height: 35px;
// top: -17px; font-size: 21px;
// left: -190px;
.qn-bank-line{ .qn-bank-line {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 100px; height: 350px;
margin-top: -42px; margin-top: -218px;
margin-left: 146px; margin-left: 275px;
-webkit-transform: rotate(75deg); -webkit-transform: rotate(74deg);
// height: 110px;
// margin-top: -20px;
// margin-left: 150px;
// -webkit-transform: rotate(105deg);
} }
span { span {
position: absolute; position: absolute;
margin-top: 1px; margin-left: 22px;
margin-left: 30px; cursor: pointer;
} }
.pulse-spread-div{ .pulse-spread-div {
position: absolute; position: absolute;
top: -7px;
left: -5px; left: -5px;
top: -3px; z-index: 1;
width: 110px; width: 122px;
height: 30px; height: 50px;
cursor: pointer;
border: 3px solid red; border: 3px solid red;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
} }
} }
.title1 { .title1 {
position: absolute; position: absolute;
width: 150px;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
width: 150px;
span { span {
position: absolute; position: absolute;
width: 50px; width: 50px;
margin-left: -80px;
margin-top: 8px; margin-top: 8px;
margin-left: -80px;
} }
} }
.title2 { .title2 {
position: absolute; position: absolute;
width: 150px;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
width: 150px;
span { span {
position: absolute; position: absolute;
width: 50px; width: 50px;
margin-left: -80px;
margin-top: 8px; margin-top: 8px;
margin-left: -80px;
} }
} }
.title3 { .title3 {
position: absolute; position: absolute;
width: 150px;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
width: 150px;
span { span {
position: absolute; position: absolute;
width: 50px; width: 50px;
margin-left: -80px;
margin-top: 8px; margin-top: 8px;
margin-left: -80px;
} }
} }
.title4 { .title4 {
position: absolute; position: absolute;
width: 270px; right: 0;
bottom: 15px; bottom: 15px;
right: 0px; width: 270px;
span { span {
position: absolute; position: absolute;
margin-left: -225px;
margin-top: 8px; margin-top: 8px;
margin-left: -225px;
} }
} }
.title5 { .title5 {
position: absolute; position: absolute;
width: 160px;
top: 10px; top: 10px;
right: 7px; right: 7px;
width: 160px;
span { span {
position: absolute; position: absolute;
margin-left: -120px;
margin-top: 47px; margin-top: 47px;
margin-left: -120px;
} }
} }
.title6 { .title6 {
position: absolute; position: absolute;
width: 249px;
bottom: 15px; bottom: 15px;
left: 13px; left: 13px;
width: 249px;
span { span {
position: absolute; position: absolute;
margin-left: -93px;
margin-top: 8px; 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 { .title8 {
position: absolute; position: absolute;
width: 300px;
bottom: 10px;
right: -5px; right: -5px;
bottom: 10px;
width: 300px;
span { span {
position: absolute; position: absolute;
margin-left: -252px;
margin-top: 8px; margin-top: 8px;
margin-left: -252px;
} }
} }
.title9 { .title9 {
position: absolute; position: absolute;
width: 160px; right: 0;
bottom: 15px; bottom: 15px;
right: 0px; width: 160px;
span { span {
position: absolute; position: absolute;
margin-left: -115px;
margin-top: 8px; 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 { .pulse-spread-name-xian {
position: absolute; position: absolute;
top: -70px;
//left: 152px; //left: 152px;
//top: 62px; //top: 62px;
left: 20px; left: 20px;
top: -70px; z-index: 1;
width: 110px; width: 110px;
height: 30px; height: 30px;
cursor: pointer;
border: 3px solid #5c04fc; border: 3px solid #5c04fc;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
} }
.pulse-spread-name-xianyang { .pulse-spread-name-xianyang {
position: absolute; position: absolute;
right: 75px; right: 75px;
bottom: 72px; bottom: 72px;
z-index: 1;
width: 110px; width: 110px;
height: 30px; height: 30px;
cursor: pointer;
border: 3px solid #5c04fc; border: 3px solid #5c04fc;
opacity: 0;
border-width: 15px; border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red; box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out; animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite; 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 { .after_circle_center {
position: absolute; position: absolute;
width: 20px; width: 20px;
...@@ -1218,16 +1350,28 @@ ...@@ -1218,16 +1350,28 @@
.amap-container { .amap-container {
//background: url('/src/assets/bg/indexBG.png') !important; //background: url('/src/assets/bg/indexBG.png') !important;
background: #d7e7fb !important; background: #d7e7fb !important;
.amap-logo {
display: none;
}
.amap-controls {
display: none;
}
.amap-copyright {
opacity: 0;
}
} }
.body-right { .body-right {
z-index: 200;
position: absolute; position: absolute;
top: 0; top: 0;
//right: 47px; //right: 47px;
right: 10px; right: 10px;
padding: 5px 0; z-index: 200;
width: 22%; width: 22%;
padding: 5px 0;
// height: 100%; // height: 100%;
> div { > div {
width: 100%; width: 100%;
...@@ -1239,91 +1383,136 @@ ...@@ -1239,91 +1383,136 @@
vertical-align: middle; vertical-align: middle;
} }
} }
.patrolMsg { .patrolMsg {
height: 100%; height: 100%;
} }
.point { .point {
// height: 50%; height: 50%;
margin-bottom: 5px; font-size: 16px;
.chartBody { .chartBody {
//height: 420px; height: 460px;
height: 390px;
@media screen and (min-width: 1280px) and (max-width: 1366px) {
height: 300px;
}
} }
.left-chart-top { .left-chart-top {
width: 100%; width: 100%;
height: 99%; height:110%;
.left-chart-child { .left-chart-child-patrol {
float: left;
width: 100%; width: 100%;
height: 55%;
margin-bottom: 2px;
background: rgba(23, 90, 201, 0.9);
}
.left-chart-child {
float: left; float: left;
height: 50%; width: 100%;
// margin-right: 2px; height: 56%;
// margin-top: 2px; margin-top: 3px;
margin-bottom: 4px; margin-bottom: 2px;
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
.child-pie { .child-pie {
height: 160px !important;
top: -15px; top: -15px;
height: 160px !important;
}
.left-chart-echars {
display: flex;
justify-content: center;
align-items: center;
height: calc(100% - 28px);
} }
.child-title { .child-title {
height: 50px !important; height: 50px !important;
text-align: center; padding: 0 0 5px 10px;
color: #fff;
padding: 0px 0px 5px 10px;
margin-top: -15px; margin-top: -15px;
color: #fff;
text-align: center;
cursor: pointer; cursor: pointer;
} }
} }
} }
} }
.technology { .technology {
// height: 40%; margin-top: 113px;
font-size: 14px;
.chartBody { .chartBody {
height: 220px; height: 220px;
.leaderBox { .leaderBox {
display: flex;
width: 100%;
.leader { .leader {
// height: 40px; width: 30%;
// line-height: 40px; height: 100px;
height: 38px;
line-height: 38px;
margin-bottom: 1px; margin-bottom: 1px;
line-height: 38px;
text-align: center;
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
.itemLabel { .itemLabel {
display: inline-block; display: inline-block;
width: 100px; width: 100px;
text-align: center; text-align: center;
} }
.itemValue { .itemValue {
text-align: left; display: block;
text-align: center;
height: 30px;
} }
} }
.secondLine { .secondLine {
height: 60px; width: 70%;
//line-height: 35px; border-left: 1px solid white;
margin-bottom: 1px; margin-bottom: 1px;
background: rgba(23, 90, 201, 0.9); background: rgba(23,90,201,0.9);
.itemLabel { .itemLabel {
display: inline-block; // display: inline-block;
width: 100px; // float: left;
line-height: 60px; display: block;
overflow: auto;
line-height: 40px;
text-align: center; text-align: center;
float: left;
} }
.itemList { .itemList {
height: 60px;
width: calc(100% - 100px);
float: left; float: left;
width: calc(100% - 1px);
height: 40px;
margin-left: 15px;
//padding: 5px 0; //padding: 5px 0;
> div { > div {
height: 30px; display: flex;
.itemIcon {
height: 73%;
margin-top: 5px;
vertical-align: middle;
}
.itemContent{
width: 22%;
height: 72%;
line-height: 30px; line-height: 30px;
text-align: center;
vertical-align: middle;
} }
} }
} }
} }
} }
}
.table-middle { .table-middle {
height: calc(100% - 4px); height: calc(100% - 4px);
.table-header-row, .table-header-row,
...@@ -1331,23 +1520,26 @@ ...@@ -1331,23 +1520,26 @@
height: 31px; height: 31px;
line-height: 30px; line-height: 30px;
} }
.table-header { .table-header {
width: 100%; width: 100%;
height: 40%; height: 40%;
// margin-top: 2px; // margin-top: 2px;
color: #fff; color: #fff;
text-align: left; text-align: left;
.table-header-row { .table-header-row {
margin: 3px 0px 1px 20px; margin: 3px 0 1px 20px;
} }
.table-header-left { .table-header-left {
float: left;
width: calc(40% - 2px); width: calc(40% - 2px);
height: 100%; height: 100%;
margin-right: 2px; margin-right: 2px;
float: left;
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
} }
.table-header-right { .table-header-right {
float: left; float: left;
width: 60%; width: 60%;
...@@ -1355,8 +1547,14 @@ ...@@ -1355,8 +1547,14 @@
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
} }
} }
.firstPeople { .firstPeople {
position: relative; position: relative;
.duty-title {
font-size: 15px;
}
.leftBtn { .leftBtn {
position: absolute; position: absolute;
top: -31px; top: -31px;
...@@ -1365,11 +1563,13 @@ ...@@ -1365,11 +1563,13 @@
height: 30px !important; height: 30px !important;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 130% !important; height: 130% !important;
} }
} }
.rightBtn { .rightBtn {
position: absolute; position: absolute;
top: -31px; top: -31px;
...@@ -1378,6 +1578,7 @@ ...@@ -1378,6 +1578,7 @@
height: 30px !important; height: 30px !important;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 130% !important; height: 130% !important;
...@@ -1386,13 +1587,14 @@ ...@@ -1386,13 +1587,14 @@
} }
.table-header-split { .table-header-split {
height: 30px; height: 40px;
text-align: center;
padding: 3px 10px; padding: 3px 10px;
margin-top: 1px;
color: #fff; color: #fff;
text-align: center;
background: rgba(23, 90, 201, 0.9); background: rgba(23, 90, 201, 0.9);
margin-top: 1px;
} }
.table-body-cotent { .table-body-cotent {
// height: calc(45% + 28px); // height: calc(45% + 28px);
// margin-top: 2px; // margin-top: 2px;
...@@ -1400,17 +1602,19 @@ ...@@ -1400,17 +1602,19 @@
.amos-row { .amos-row {
margin-top: 1px; margin-top: 1px;
background: rgba(23, 90, 201, 0.9);
color: rgb(5, 221, 249); color: rgb(5, 221, 249);
background: rgba(23, 90, 201, 0.9);
// height: 28px; // height: 28px;
.amos-col-1 { .amos-col-1 {
height: 100%; height: 100%;
} }
.table-page-img { .table-page-img {
height: 100%; height: 100%;
background: rgba(28, 125, 213, 0.9); background: rgba(28, 125, 213, 0.9);
} }
} }
.content { .content {
color: #fff; color: #fff;
} }
...@@ -1423,36 +1627,47 @@ ...@@ -1423,36 +1627,47 @@
.tieleBox { .tieleBox {
background-color: rgba(0, 66, 174, 0.9); background-color: rgba(0, 66, 174, 0.9);
} }
.title { .title {
color: #fff;
height: 28px; height: 28px;
padding-right: 10px;
font-size: 16px;
line-height: 28px; line-height: 28px;
color: #fff;
// border-bottom: 1px solid #fff; // border-bottom: 1px solid #fff;
// margin-bottom: 1px; // margin-bottom: 1px;
background: url('/src/assets/indexChart/title.png') no-repeat center center/100% 100%; background: url('/src/assets/indexChart/title.png') no-repeat center center/100% 100%;
padding-right: 10px;
background: rgba(0, 66, 174, 0.9); background: rgba(0, 66, 174, 0.9);
span { span {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
} }
.titleRight { .titleRight {
float: right; float: right;
// padding: 3px 10px; // padding: 3px 10px;
} }
.titleLeft { .titleLeft {
float: left; float: left;
// padding: 3px 10px; // padding: 3px 10px;
} }
.titleIcon { .titleIcon {
display: inline-block; display: inline-block;
height: 20px;
width: 20px; width: 20px;
height: 20px;
vertical-align: middle; vertical-align: middle;
} }
} }
.chartBody { .chartBody {
height: 100px; height: 136px;
@media screen and (min-width: 1280px) and (max-width: 1366px) {
height: 40px;
}
} }
} }
} }
...@@ -1463,46 +1678,33 @@ ...@@ -1463,46 +1678,33 @@
position: absolute; position: absolute;
top: 140px; top: 140px;
left: 410px; left: 410px;
z-index: 10;
width: 80px; width: 80px;
height: 30px; height: 30px;
z-index: 10;
} }
.list09::-webkit-scrollbar {/*滚动条整体样式*/ .list09::-webkit-scrollbar {/* 滚动条整体样式 */
width: 6px; /* 高宽分别对应横竖滚动条的尺寸 */
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px; height: 1px;
} }
.list09::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ .list09::-webkit-scrollbar-thumb {/* 滚动条里面小方块 */
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
background: #535353; background: #535353;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2);
} }
.list09::-webkit-scrollbar-track {/*滚动条里面轨道*/ .list09::-webkit-scrollbar-track {/* 滚动条里面轨道 */
background: #ededed;
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2);
background: #EDEDED;
} }
.list09{ .list09 {
height: 630px;
overflow-y: auto; overflow-y: auto;
height:630px ;
} }
.patrolDetailContent .contentBox .patrolItem { .patrolDetailContent .contentBox .patrolItem {
...@@ -1510,68 +1712,79 @@ ...@@ -1510,68 +1712,79 @@
} }
.amos-list-split .amos-list-item { .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; overflow-y: auto;
height:630px ;
} }
.amos-list-lg .amos-list-item { .amos-list-lg .amos-list-item {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
} }
.amos-list-item { .amos-list-item {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.amos-list-pagination { .amos-list-pagination {
margin-top: 15px; margin-top: 15px;
text-align: center; text-align: center;
} }
.amos-list-something-after-last-item .amos-list-item:last-child { .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 { .amos-pagination-layout-right {
display: inline-block;
padding-right: 0;
font-family: 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif; font-family: 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;
font-size: 12px; font-size: 12px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display: inline-block;
padding-right: 0px;
} }
.amos-list-vertical .amos-list-item-content { .amos-list-vertical .amos-list-item-content {
display: block; display: block;
margin-bottom: 0px; margin-bottom: 0;
font-size: 12px; font-size: 12px;
color: black; color: black;
} }
.patrolDetailContent { .patrolDetailContent {
width: 22%;
height: 100%;
position: absolute; position: absolute;
top: 7rem; top: 7rem;
//right: calc(22% + 53px); //right: calc(22% + 53px);
right: calc(22% + 15px); right: calc(22% + 15px);
padding: 5px 0;
z-index: 200; z-index: 200;
width: 22%;
height: 100%;
padding: 5px 0;
.title { .title {
padding-right: 0 !important; padding-right: 0 !important;
.titleRight { .titleRight {
display: inline-block; display: inline-block;
width: 35px; width: 35px;
height: 27px !important; height: 27px !important;
cursor: pointer;
text-align: center;
font-size: 16px; font-size: 16px;
text-align: center;
cursor: pointer;
background: linear-gradient(180deg, rgba(253, 53, 17, 1) 0%, rgba(252, 4, 145, 1) 100%); background: linear-gradient(180deg, rgba(253, 53, 17, 1) 0%, rgba(252, 4, 145, 1) 100%);
} }
} }
.contentBox { .contentBox {
height: 100%; height: 100%;
...@@ -1579,81 +1792,93 @@ ...@@ -1579,81 +1792,93 @@
// border-bottom: 1px solid #fff; // border-bottom: 1px solid #fff;
margin-bottom: 1px; margin-bottom: 1px;
} }
.technology {
}
.patrolItem { .patrolItem {
height: 724px; height: 724px;
padding: 15px; padding: 15px;
background-color: #175ac9; background-color: #175ac9;
.itemTop { .itemTop {
height: calc(45% - 15px); height: calc(45% - 15px);
.itemMsg { .itemMsg {
float: left;
width: 50%; width: 50%;
height: 100%; height: 100%;
float: left;
.itemName { .itemName {
display: inline-block;
height: 30px; height: 30px;
line-height: 30px;
padding: 0 15px; padding: 0 15px;
display: inline-block; margin: 8px;
font-size: 13px; font-size: 13px;
background: rgba(0, 66, 174, 0.9); line-height: 30px;
color: #5ffffd; color: #5ffffd;
margin: 8px; background: rgba(0, 66, 174, 0.9);
.itemIcon { .itemIcon {
display: inline-block; display: inline-block;
height: 20px;
width: 20px; width: 20px;
height: 20px;
vertical-align: middle; vertical-align: middle;
} }
} }
.itemDesc { .itemDesc {
font-size: 15px; font-size: 15px;
} }
} }
.rightChart { .rightChart {
float: left;
width: 50%; width: 50%;
height: 100%; height: 100%;
float: left;
} }
} }
.itemMiddle { .itemMiddle {
height: calc(55% - 15px); height: calc(55% - 15px);
padding: 5px 0; padding: 5px 0;
text-align: center; text-align: center;
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
} }
.itemBottom { .itemBottom {
height: 30px; height: 30px;
text-align: center;
padding-top: 8px; padding-top: 8px;
text-align: center;
span { span {
display: inline-block; display: inline-block;
height: 15px;
padding: 0 10px; padding: 0 10px;
padding-right: 0; padding-right: 0;
border-left: 2px solid #92baf4; margin: 5px;
font-size: 15px; font-size: 15px;
height: 15px;
line-height: 15px; line-height: 15px;
margin: 5px; border-left: 2px solid #92baf4;
&:nth-child(1) { &:nth-child(1) {
color: #58f2f4; color: #58f2f4;
border: none; border: none;
} }
&:nth-child(2) { &:nth-child(2) {
color: #ff8000; color: #ff8000;
} }
&:nth-child(3) { &:nth-child(3) {
color: #ff0000; color: #f00;
} }
} }
} }
} }
.pagination{ .pagination {
.amos-pagination-paging li a { .amos-pagination-paging li a {
color: white; color: white;
} }
...@@ -1662,52 +1887,47 @@ ...@@ -1662,52 +1887,47 @@
} }
.list3 { .list3 {
float:left ; float: left;
width: 33%; width: 33%;
height: 100%; height: 100%;
} }
.list5 { .list5 {
float:left ; float: left;
width: 33%; width: 33%;
height: 100%; height: 100%;
border-left: 1px solid #fff;
border-right: 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::after { display: block; height: 0; clear: both; content: ''; visibility: hidden; }
.clearfloat{zoom:1} .clearfloat { zoom: 1; }
.list4 { .list4 {
width: 100%; width: 100%;
height: 35px; height: 35px;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
text-align: left;
padding: 0 10px; padding: 0 10px;
text-align: left;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
} }
.list1 { .list1 {
width: 99%; width: 99%;
border: 1px solid #fff;
margin-top: 5px; margin-top: 5px;
font-size: 12px;
line-height: 35px; line-height: 35px;
text-align: center;
color: #fff; color: #fff;
font-size: 12px; text-align: center;
border: 1px solid #fff;
} }
.list2 { .list2 {
width: 100%; width: 100%;
height: 35px; height: 35px;
} }
.AlarmMarquee-top-news { .AlarmMarquee-top-news {
display: flex;
position: absolute !important; 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: url('/src/assets/3dview/marquee.png') no-repeat;
//background-size: 100% 100%; //background-size: 100% 100%;
//background-color:#ff524a; //background-color:#ff524a;
...@@ -1717,30 +1937,39 @@ ...@@ -1717,30 +1937,39 @@
//background:rgba(0,0,0,1); //background:rgba(0,0,0,1);
//width: calc(100% - 3.6rem); //width: calc(100% - 3.6rem);
position: relative; position: relative;
z-index: 10;
display: flex;
width: 50%;
height: 52px;
//border: solid;
//border-color: red;
margin-left: 24%;
overflow: hidden;
//left: 3.6rem; //left: 3.6rem;
letter-spacing: 0.6px; letter-spacing: 0.6px;
z-index: 10; //color: #ff524a;
color: white;
.amosicon-shengyin { .amosicon-shengyin {
width: 42px; width: 42px;
height: 52px; height: 52px;
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0.1);
//background:rgba(41,152,225,0.2); //background:rgba(41,152,225,0.2);
background-color: #345fa6; background-color: #345fa6;
box-shadow: 0px 0px 16px 4px rgba(77, 170, 224, 0.2); box-shadow: 0 0 16px 4px rgba(77, 170, 224, 0.2);
background: rgba(0, 0, 0, 0.1);
} }
.amosicon-shengyin::before { .amosicon-shengyin::before {
display: inline-block; display: inline-block;
content: '' !important;
line-height: 47px;
width: 37px; width: 37px;
height: 37px; height: 37px;
margin: 2.5px 0 0 2.5px; margin: 2.5px 0 0 2.5px;
line-height: 47px;
//background: url('/src/assets/3dview/marquee-light.png') no-repeat; //background: url('/src/assets/3dview/marquee-light.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
content: '' !important;
} }
...@@ -1750,29 +1979,31 @@ ...@@ -1750,29 +1979,31 @@
margin-left: 24px; margin-left: 24px;
font-size: 0.156rem; font-size: 0.156rem;
line-height: 32px; line-height: 32px;
font-size: 10px !important;
} }
.tops-news-item:before { .tops-news-item::before {
//content: '\e600'; //content: '\e600';
} }
.news-marquee { .news-marquee {
//margin-left: 10px;
background: url('/src/assets/3dview/maquee.png') no-repeat;
background-size: 100% 100%;
overflow: hidden; overflow: hidden;
clear: 'both'; clear: 'both';
cursor: pointer;
//margin-left: 10px;
background: url('/src/assets/3dview/maquee.png') no-repeat;
background-size: 100% 110%;
flex: 1; flex: 1;
opacity: 0.8;
.tops-news-item { .tops-news-item {
height: 52px; height: 52px;
font-size: 15px;
line-height: 48px; line-height: 48px;
span { span {
font-family: 'microsoft YaHei'; font-family: 'microsoft YaHei';
font-weight: bold; font-weight: bold;
} }
} }
cursor: pointer;
} }
} }
...@@ -1783,38 +2014,44 @@ ...@@ -1783,38 +2014,44 @@
right: 0 !important; right: 0 !important;
left: inherit !important; left: inherit !important;
z-index: 200; z-index: 200;
.control-pane-biz { .control-pane-biz {
background: rgba(0, 0, 0, 0);
padding: 0; padding: 0;
background: rgba(0, 0, 0, 0);
border-radius: 0; border-radius: 0;
.control-item { .control-item {
position: relative;
width: 42px; width: 42px;
height: 42px; height: 42px;
border: none;
background: #1853b6;
margin-bottom: 1px; margin-bottom: 1px;
background: #1853b6;
border: none;
border-radius: 2px; border-radius: 2px;
position: relative;
&:hover { &:hover {
background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%); background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%);
} }
.dotTip { .dotTip {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
border-radius: 50%;
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: red; background-color: red;
border-radius: 50%;
} }
} }
.control-active { .control-active {
background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%) !important; background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%) !important;
} }
} }
.marker-icon-title { .marker-icon-title {
left: inherit !important;
right: 55px !important; right: 55px !important;
left: inherit !important;
z-index: 300; z-index: 300;
} }
} }
......
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
@include create-point-level('impEqu_01', $equ-color-type-1); @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_02', $equ-color-type-2);
@include create-point-level('impEqu_03', $equ-color-type-3); @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_01', $dynamic-color-type-1);
@include create-point-level('dynamicRingData_02', $dynamic-color-type-2); @include create-point-level('dynamicRingData_02', $dynamic-color-type-2);
} }
...@@ -2,6 +2,69 @@ ...@@ -2,6 +2,69 @@
height: 100%; height: 100%;
display: flex; 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 { .left-content {
width: 300px; width: 300px;
position: relative; position: relative;
...@@ -15,7 +78,7 @@ ...@@ -15,7 +78,7 @@
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background: #f3f3f3; background: #f3f3f3;
border:1px solid rgba(234,234,234,1); border: 1px solid rgba(234, 234, 234, 1);
border-right: none; border-right: none;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -40,16 +103,19 @@ ...@@ -40,16 +103,19 @@
.ant-tree { .ant-tree {
height: calc(100% - 42px); height: calc(100% - 42px);
padding-left: 24px; padding-left: 24px;
border:1px solid rgba(234,234,234,1); border: 1px solid rgba(234, 234, 234, 1);
border-top: none; border-top: none;
padding-top: 7px; padding-top: 7px;
.ant-tree-title { .ant-tree-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
li .ant-tree-node-content-wrapper.ant-tree-node-selected { li .ant-tree-node-content-wrapper.ant-tree-node-selected {
background-color: rgba(230, 247, 255, 1); background-color: rgba(230, 247, 255, 1);
} }
li span.ant-tree-switcher.ant-tree-switcher_open:after { li span.ant-tree-switcher.ant-tree-switcher_open:after {
display: inline-block; display: inline-block;
width: 17px; width: 17px;
...@@ -73,6 +139,7 @@ ...@@ -73,6 +139,7 @@
background-size: cover; background-size: cover;
vertical-align: sub; vertical-align: sub;
} }
.ant-tree-child-tree { .ant-tree-child-tree {
.ant-tree-switcher:before { .ant-tree-switcher:before {
display: inline-block; display: inline-block;
...@@ -93,6 +160,7 @@ ...@@ -93,6 +160,7 @@
} }
.tree-right { .tree-right {
.ant-menu-item:hover, .ant-menu-item:hover,
.ant-menu-item-active, .ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
...@@ -106,6 +174,7 @@ ...@@ -106,6 +174,7 @@
font-size: 14px; font-size: 14px;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
.tree-add-img { .tree-add-img {
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -124,14 +193,22 @@ ...@@ -124,14 +193,22 @@
} }
} }
.left-content-close {
position: relative;
.tree-wrapper {
display: none;
}
}
.right-content { .right-content {
flex: 1; flex: 1;
.net-topo-header { .net-topo-header {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background:rgba(243,243,243,1); background: rgba(243, 243, 243, 1);
border:1px solid rgba(234,234,234,1); border: 1px solid rgba(234, 234, 234, 1);
border-left: none; border-left: none;
padding-right: 42px; padding-right: 42px;
text-align: right; text-align: right;
...@@ -179,7 +256,7 @@ ...@@ -179,7 +256,7 @@
.tooltip-content { .tooltip-content {
width: 251px; width: 251px;
background: #345fa6; 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; opacity: 1;
border-radius: 7px; border-radius: 7px;
padding: 22px 24px; padding: 22px 24px;
......
.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;
}
}
}
}
}
}
}
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
#app { #app {
.header { .header {
background: $core-color;
z-index: 111; z-index: 111;
background: $core-color;
.sys-tools { .sys-tools {
display: none; display: none;
...@@ -26,31 +26,30 @@ ...@@ -26,31 +26,30 @@
.logo-wrapper { .logo-wrapper {
// display: none; // display: none;
width: 240px; width: 240px;
font-size: 18px;
padding-left: 15px; padding-left: 15px;
font-size: 18px;
// background: #345fa6; // background: #345fa6;
color: #fff; color: #fff;
.header-logo { .header-logo {
width: 100%;
background: #345fa6; background: #345fa6;
border: none; border: none;
border-right: 1px solid #2d5291; border-right: 1px solid #2d5291;
width: 100%;
} }
.logo-text { .logo-text {
display: inline-block; display: inline-block;
} }
} }
.nav-menu-wrapper { .nav-menu-wrapper {
.menu-expanded {
.menu-expanded{
position: relative; position: relative;
z-index: 90000; z-index: 90000;
} }
.nav-menu-box { .nav-menu-box {
.nav-menu-list { .nav-menu-list {
color: white; color: white;
...@@ -65,7 +64,8 @@ ...@@ -65,7 +64,8 @@
} }
.nav-menu-item-label { .nav-menu-item-label {
font-size: 15px; font-size: 18px;
font-weight: 500;
color: white; color: white;
} }
...@@ -88,56 +88,68 @@ ...@@ -88,56 +88,68 @@
} }
} }
} }
.header.headerIndex { .header.headerIndex {
background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
background-size: 100% 100%;
height: 7rem;
// line-height: 7rem; // line-height: 7rem;
z-index: 11111; z-index: 11111;
display: flex; display: flex;
height: 7rem;
background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
background-size: 100% 100%;
box-shadow: none; box-shadow: none;
.header-navs { .header-navs {
width: 38%; width: 38%;
.nav-menu-wrapper { .nav-menu-wrapper {
top: 3rem; top: 3rem;
width: 100%; width: 100%;
.nav-menu-item { .nav-menu-item {
width: 24% !important; width: 24% !important;
border: none !important; border: none !important;
.menusub-wrapper { .menusub-wrapper {
width: 100% !important; width: 100% !important;
} }
} }
.nav-menu-bg { .nav-menu-bg {
display: none; display: none;
} }
} }
} }
.leftNavs { .leftNavs {
.nav-menu-wrapper { .nav-menu-wrapper {
padding-left: 25.5%; padding-right: 10%;
padding-right: 15%; padding-left: 28.5%;
.nav-menu-item { .nav-menu-item {
width: 33.3% !important; width: 33.3% !important;
} }
} }
} }
.rightNavs { .rightNavs {
.nav-menu-wrapper { .nav-menu-wrapper {
padding-left: 15%; padding-left: 9%;
} }
} }
.projectName { .projectName {
width: 24%; width: 24%;
height: 7rem; height: 7rem;
line-height: 7rem; line-height: 7rem;
text-align: center; text-align: center;
img { img {
width: 100%;
vertical-align: middle; vertical-align: middle;
width: 65%;
} }
} }
} }
.content-body.indexContent { .content-body.indexContent {
top: 0; top: 0;
height: 100%; height: 100%;
......
...@@ -22,6 +22,8 @@ ...@@ -22,6 +22,8 @@
@import './dynamicRing/index.scss'; @import './dynamicRing/index.scss';
@import './equipMonitor/index.scss'; @import './equipMonitor/index.scss';
@import './selfsupport/index.scss'; @import './selfsupport/index.scss';
@import './financialCityLan/index.scss';
@import './virtualCloudPlatform/index.scss';
.ant-calendar-picker-container { .ant-calendar-picker-container {
&.ant-calendar-picker-container-placement-bottomRight { &.ant-calendar-picker-container-placement-bottomRight {
......
...@@ -2,6 +2,69 @@ ...@@ -2,6 +2,69 @@
height: 100%; height: 100%;
display: flex; 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 { .left-content {
width: 300px; width: 300px;
position: relative; position: relative;
...@@ -15,7 +78,7 @@ ...@@ -15,7 +78,7 @@
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background: #f3f3f3; background: #f3f3f3;
border:1px solid rgba(234,234,234,1); border: 1px solid rgba(234, 234, 234, 1);
border-right: none; border-right: none;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -40,16 +103,17 @@ ...@@ -40,16 +103,17 @@
.ant-tree { .ant-tree {
height: calc(100% - 42px); height: calc(100% - 42px);
padding-left: 24px; padding-left: 24px;
border:1px solid rgba(234,234,234,1); border: 1px solid rgba(234, 234, 234, 1);
border-top: none; border-top: none;
padding-top: 7px; padding-top: 7px;
//overflow-x: scroll; //overflow-x: scroll;
.ant-tree-title { .ant-tree-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
li .ant-tree-node-content-wrapper{ li .ant-tree-node-content-wrapper {
width: 82%; width: 82%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -58,6 +122,7 @@ ...@@ -58,6 +122,7 @@
li .ant-tree-node-content-wrapper.ant-tree-node-selected { li .ant-tree-node-content-wrapper.ant-tree-node-selected {
background-color: rgba(230, 247, 255, 1); background-color: rgba(230, 247, 255, 1);
} }
li span.ant-tree-switcher.ant-tree-switcher_open:after { li span.ant-tree-switcher.ant-tree-switcher_open:after {
display: inline-block; display: inline-block;
width: 17px; width: 17px;
...@@ -81,6 +146,7 @@ ...@@ -81,6 +146,7 @@
background-size: cover; background-size: cover;
vertical-align: sub; vertical-align: sub;
} }
.ant-tree-child-tree { .ant-tree-child-tree {
.ant-tree-switcher:before { .ant-tree-switcher:before {
display: inline-block; display: inline-block;
...@@ -101,6 +167,7 @@ ...@@ -101,6 +167,7 @@
} }
.tree-right { .tree-right {
.ant-menu-item:hover, .ant-menu-item:hover,
.ant-menu-item-active, .ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
...@@ -116,6 +183,7 @@ ...@@ -116,6 +183,7 @@
line-height: 36px; line-height: 36px;
margin-left: -70px; margin-left: -70px;
background-color: white; background-color: white;
.tree-add-img { .tree-add-img {
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -134,14 +202,22 @@ ...@@ -134,14 +202,22 @@
} }
} }
.left-content-close {
position: relative;
.tree-wrapper {
display: none;
}
}
.right-content { .right-content {
flex: 1; flex: 1;
.net-topo-header { .net-topo-header {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background:rgba(243,243,243,1); background: rgba(243, 243, 243, 1);
border:1px solid rgba(234,234,234,1); border: 1px solid rgba(234, 234, 234, 1);
border-left: none; border-left: none;
padding-right: 42px; padding-right: 42px;
text-align: right; text-align: right;
...@@ -189,7 +265,7 @@ ...@@ -189,7 +265,7 @@
.tooltip-content { .tooltip-content {
width: 251px; width: 251px;
background: #345fa6; 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; opacity: 1;
border-radius: 7px; border-radius: 7px;
padding: 22px 24px; padding: 22px 24px;
...@@ -235,21 +311,25 @@ ...@@ -235,21 +311,25 @@
-webkit-transform: scale(0.3); -webkit-transform: scale(0.3);
transform: scale(0.3); transform: scale(0.3);
} }
25% { 25% {
opacity: 0.5; opacity: 0.5;
-webkit-transform: scale(0.3); -webkit-transform: scale(0.3);
transform: scale(0.3); transform: scale(0.3);
} }
50% { 50% {
opacity: 1; opacity: 1;
-webkit-transform: scale(0.3); -webkit-transform: scale(0.3);
transform: scale(0.3); transform: scale(0.3);
} }
75% { 75% {
opacity: 0.5; opacity: 0.5;
-webkit-transform: scale(0.5); -webkit-transform: scale(0.5);
transform: scale(0.5); transform: scale(0.5);
} }
100% { 100% {
opacity: 0.3; opacity: 0.3;
-webkit-transform: scale(0.8); -webkit-transform: scale(0.8);
......
...@@ -340,6 +340,7 @@ ...@@ -340,6 +340,7 @@
.ant-table-pagination { .ant-table-pagination {
float: right; float: right;
display: inline; display: inline;
width: 98%;
} }
} }
.ant-table-title { .ant-table-title {
...@@ -393,6 +394,9 @@ ...@@ -393,6 +394,9 @@
background: #ecf6fd; background: #ecf6fd;
} }
.ant-pagination-item { .ant-pagination-item {
height: 25px; height: 25px;
min-width: 25px; min-width: 25px;
...@@ -454,7 +458,8 @@ ...@@ -454,7 +458,8 @@
} }
.ant-pagination-options { .ant-pagination-options {
margin-top: 5px; margin-top: -12%;
margin-left: 88%;
.ant-select-selection { .ant-select-selection {
height: 25px; height: 25px;
...@@ -462,6 +467,7 @@ ...@@ -462,6 +467,7 @@
background: $biz-title-color; background: $biz-title-color;
border-color: $core-border-color; border-color: $core-border-color;
.ant-select-arrow { .ant-select-arrow {
color: $biz-table-font-color; color: $biz-table-font-color;
} }
......
.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;
}
}
}
}
}
}
}
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
height: 100%; height: 100%;
text-align: center; text-align: center;
background: url('../../assets/region/region-bg.png') no-repeat $core-border-color; background: url('../../assets/region/region-bg.png') no-repeat $core-border-color;
background-size: 100%;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
...@@ -31,6 +31,7 @@ $point-color-level-0: rgb(141, 8, 25); ...@@ -31,6 +31,7 @@ $point-color-level-0: rgb(141, 8, 25);
$equ-color-type-1: rgb(19, 213, 184); $equ-color-type-1: rgb(19, 213, 184);
$equ-color-type-2: rgb(1, 126, 211); $equ-color-type-2: rgb(1, 126, 211);
$equ-color-type-3: rgb(7, 24, 212); $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-1:rgb(1, 126, 211);
$dynamic-color-type-2:rgb(230, 84, 4); $dynamic-color-type-2:rgb(230, 84, 4);
......
...@@ -51,3 +51,24 @@ export const calcCoorArrUtil = (point_start, point_end, num, key) => { ...@@ -51,3 +51,24 @@ export const calcCoorArrUtil = (point_start, point_end, num, key) => {
return paths; 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('当前浏览器不支持语音朗读.');
}
}
// 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){ export default function(data, delRequest){
window.setLoading && window.setLoading(false); window.setLoading && window.setLoading(false);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (data) { if (data) {
if (data.result === 'SUCCESS') {
if (data.dataList || data.dataList === null){ if (data.dataList || data.dataList === null){
resolve(data.dataList); 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); resolve(data.result);
}else if (data == 'TypeError: Failed to fetch'){ } else {
reject(data); resolve(data);
}else{ }
} else {
resolve(data); resolve(data);
} }
} else { } else {
reject(data); reject(data);
} }
......
import amosRequest, { singleFetch } from 'amos-processor/lib/fetch/amosRequest'; import amosRequest, { singleFetch } from 'amos-processor/lib/fetch/amosRequest';
import { utils } from 'amos-tool'; import { utils } from 'amos-tool';
import formatUrl from 'amos-processor/lib/utils/urlFormat'; import formatUrl from 'amos-processor/lib/utils/urlFormat';
import SysConsts from 'amos-processor/lib/config/consts';
import { Store } from 'amos-tool'; import { Store } from 'amos-tool';
import { message } from 'amos-framework'; import { message } from 'amos-framework';
import sysConsts from 'amos-processor/lib/config'; import sysConsts from 'amos-processor/lib/config';
import payload from './payload'; import payload from './payload';
const lsTool = Store.lsTool; const lsTool = Store.lsTool;
const ORGCODE = 'orgCode';
const defaultPageable = { const defaultPageable = {
page: 0, page: 0,
...@@ -115,7 +117,35 @@ const commonDelete = (url, data, params) => { ...@@ -115,7 +117,35 @@ const commonDelete = (url, data, params) => {
//message.danger(error.message || '请求失败,服务器错误!'); //message.danger(error.message || '请求失败,服务器错误!');
} }
}).then(data => payload(data)); }).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 = () => { const compleHeaders = () => {
return { return {
...@@ -140,4 +170,12 @@ export function setUserId(userId){ ...@@ -140,4 +170,12 @@ export function setUserId(userId){
return lsTool.write(sysConsts.userId, 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 };
...@@ -18,11 +18,9 @@ const checkListColumns = (self) => { ...@@ -18,11 +18,9 @@ const checkListColumns = (self) => {
key: 'type', key: 'type',
width: '20%', width: '20%',
render: (text, record) => { render: (text, record) => {
debugger
if (record && record !== null) { if (record && record !== null) {
record.map((item, index) => { record.map((item, index) => {
//根据换行符分隔 //根据换行符分隔
debugger
let arr = item.type.split(","); let arr = item.type.split(",");
let p = document.createElement('span'); let p = document.createElement('span');
...@@ -135,7 +133,6 @@ class RiskSourceDetailModal extends Component { ...@@ -135,7 +133,6 @@ class RiskSourceDetailModal extends Component {
} }
render() { render() {
debugger
//const { data = {} } = this.state; //const { data = {} } = this.state;
return ( return (
<div className="risk-warn"> <div className="risk-warn">
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
/* eslint-disable react/sort-comp */ /* eslint-disable react/sort-comp */
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; 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 { Connect as UIConnect, Toast } from 'amos-framework';
import A3DDesigner, { Connect } from 'amos-3d/lib/designer'; import A3DDesigner, { Connect } from 'amos-3d/lib/designer';
import WorkerObjContent from 'amos-3d/lib/worker/WorkerObjContent'; import WorkerObjContent from 'amos-3d/lib/worker/WorkerObjContent';
...@@ -22,7 +22,7 @@ import LoadingComs from './LoadingComs'; ...@@ -22,7 +22,7 @@ import LoadingComs from './LoadingComs';
import PointsPool from './PointsPool'; import PointsPool from './PointsPool';
import PointsAlarm from './PointsAlarm'; import PointsAlarm from './PointsAlarm';
import CoordinatePickup from './CoordinatePickup'; import CoordinatePickup from './CoordinatePickup';
import { eventTopics, isPointEvent ,isControllerEvent, isManualOperate } from './consts'; import { eventTopics, isPointEvent, isControllerEvent, isManualOperate } from './consts';
import { executeView3dCMD, parseManual } from './dataProcessor'; import { executeView3dCMD, parseManual } from './dataProcessor';
//import { xianCode, xianyangCode } from '../../../_mock/code'; //import { xianCode, xianyangCode } from '../../../_mock/code';
...@@ -42,7 +42,7 @@ const FLOOR = { ...@@ -42,7 +42,7 @@ const FLOOR = {
FLOOR_3: 'floor_3', FLOOR_3: 'floor_3',
XY_FLOOR_3: 'xy_floor_3', XY_FLOOR_3: 'xy_floor_3',
FLOOR_6: 'floor_6', FLOOR_6: 'floor_6',
FLOOR_XY:'floor_xy' FLOOR_XY: 'floor_xy'
}; };
...@@ -59,6 +59,33 @@ const createPanel = (text) => { ...@@ -59,6 +59,33 @@ const createPanel = (text) => {
return div; 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 { ...@@ -147,7 +174,9 @@ class View3D extends Component {
onProgress: (item, loaded, total) => { onProgress: (item, loaded, total) => {
this.setState({ this.setState({
loadingResInfo: { loadingResInfo: {
total, current: loaded, url: item total,
current: loaded,
url: item
} }
}); });
} }
...@@ -159,25 +188,18 @@ class View3D extends Component { ...@@ -159,25 +188,18 @@ class View3D extends Component {
componentDidMount() { componentDidMount() {
this._registerEvents(); // 注册事件 this._registerEvents(); // 注册事件
this._bindPubSubEvents(); // 绑定事件 this._bindPubSubEvents(); // 绑定事件
this._bindRulesPubSubEvents();//获取风险点告警 this._bindRulesPubSubEvents(); //获取风险点告警
this.loadAlarmData();//获取告警数据 this.loadAlarmData(); //获取告警数据
// this.props.onRef(this);//传输子组件对象 // this.props.onRef(this);//传输子组件对象
} }
componentWillUnmount() { componentWillUnmount() {
this.objAnchorHelper && this.objAnchorHelper.destroy(); this.objAnchorHelper && this.objAnchorHelper.destroy();
this.infoHelper && this.infoHelper.destroy(); this.infoHelper && this.infoHelper.destroy();
// 定时器销毁 // 定时器销毁
this.interval && clearInterval(this.interval); this.interval && clearInterval(this.interval);
this.timer && clearTimeout(this.timer); this.timer && clearTimeout(this.timer);
} }
/** /**
...@@ -190,7 +212,7 @@ class View3D extends Component { ...@@ -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); // console.log('main camera_change', evt);
}); });
...@@ -223,7 +245,7 @@ class View3D extends Component { ...@@ -223,7 +245,7 @@ class View3D extends Component {
return; return;
} }
if (evt.object && evt.object.type === 'Mesh'){ if (evt.object && evt.object.type === 'Mesh') {
const parentObj = evt.object.parent; const parentObj = evt.object.parent;
const userData = parentObj.userData; const userData = parentObj.userData;
if (userData && this.lensLevel !== LENS_LEVEL.ROOT && userData.type === 'cabinet') { if (userData && this.lensLevel !== LENS_LEVEL.ROOT && userData.type === 'cabinet') {
...@@ -290,13 +312,12 @@ class View3D extends Component { ...@@ -290,13 +312,12 @@ class View3D extends Component {
// 清除选中 // 清除选中
// _this.outlineFactory.toggleOutline([]); // _this.outlineFactory.toggleOutline([]);
// info信息框不显示 // info信息框不显示
if (_this.lensLevel !== LENS_LEVEL.SUN){ if (_this.lensLevel !== LENS_LEVEL.SUN) {
_this.infoHelper.toggleVisible(false); _this.infoHelper.toggleVisible(false);
} }
} }
} }
}); });
}; };
/** /**
...@@ -318,24 +339,23 @@ class View3D extends Component { ...@@ -318,24 +339,23 @@ class View3D extends Component {
}); });
}; };
_bindRulesPubSubEvents = () => { _bindRulesPubSubEvents = () => {
this.props.subscribe(eventTopics.fromws, (topic, content) => { this.props.subscribe(eventTopics.fromws, (topic, content) => {
let data = content.data; let data = content.data;
console.log('消息类型--->' + topic); console.log('消息类型--->' + topic);
console.log('data==' + JSON.stringify(data)); console.log('data==' + JSON.stringify(data));
//this.riskAlarmDataTwinkle(data); //this.riskAlarmDataTwinkle(data);
switch (topic){ switch (topic) {
case 'base3d.fromws.riskSituation_flicker': case 'base3d.fromws.riskSituation_flicker':
console.log('风险触发风险点闪烁~~~~~~~~~~~~~~~~~~~~'); console.log('风险触发风险点闪烁~~~~~~~~~~~~~~~~~~~~');
this.flickerTroubleMarkers(this, data);//风险触发风险点闪烁 this.flickerTroubleMarkers(this, data); //风险触发风险点闪烁
break; break;
case 'base3d.fromws.riskSituation_colour': case 'base3d.fromws.riskSituation_colour':
console.log('风险触发风险点颜色改变~~~~~~~~~~~~~~~~~~~~'); console.log('风险触发风险点颜色改变~~~~~~~~~~~~~~~~~~~~');
this.flickerTroubleMarkers(this, data);//风险触发风险点闪烁 this.flickerTroubleMarkers(this, data); //风险触发风险点闪烁
break; break;
default: default:
console.log(topic,':类型不支持'); console.log(topic, ':类型不支持');
} }
}); });
}; };
...@@ -396,7 +416,11 @@ class View3D extends Component { ...@@ -396,7 +416,11 @@ class View3D extends Component {
r3d, r3d,
cameraFactory, cameraFactory,
sceneFactory, 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 { ...@@ -405,13 +429,13 @@ class View3D extends Component {
* *
* @memberof View3D * @memberof View3D
*/ */
createInfowindow = (text) => { createInfowindow = text => {
const div = document.createElement('div'); const div = document.createElement('div');
div.style.position = 'absolute'; div.style.position = 'absolute';
div.className = 'three-ui-infowindow'; div.className = 'three-ui-infowindow';
div.innerText = text; div.innerText = text;
return div; return div;
} };
/** /**
* 创建信息面板 * 创建信息面板
...@@ -425,7 +449,7 @@ class View3D extends Component { ...@@ -425,7 +449,7 @@ class View3D extends Component {
element: createPanel(name), element: createPanel(name),
position: [3.5, 4, 0] position: [3.5, 4, 0]
}); });
} };
/** /**
* 加载完成 * 加载完成
...@@ -434,7 +458,7 @@ class View3D extends Component { ...@@ -434,7 +458,7 @@ class View3D extends Component {
*/ */
onComplete = obj => { onComplete = obj => {
const _this = this; const _this = this;
if (!obj.isForceParent ) { if (!obj.isForceParent) {
obj.on('click', evt => { obj.on('click', evt => {
// console.log('obj click', evt); // console.log('obj click', evt);
...@@ -459,7 +483,7 @@ class View3D extends Component { ...@@ -459,7 +483,7 @@ class View3D extends Component {
* *
* @memberof View3D * @memberof View3D
*/ */
onAllDone = (objGroup) => { onAllDone = objGroup => {
this.sceneFactory.level.change(objGroup); this.sceneFactory.level.change(objGroup);
// 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);
this.setRootFitView(); this.setRootFitView();
...@@ -469,64 +493,49 @@ class View3D extends Component { ...@@ -469,64 +493,49 @@ class View3D extends Component {
// 加载告警数据 // 加载告警数据
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.transferAlarmData(); this.transferAlarmData();
let flag= this.props.flag; let flag = this.props.flag;
if(flag&&flag===1){ if (flag && flag === 1) {
let pointName= this.props.pointName; let pointName = this.props.pointName;
let pointAttrs= this.props.pointAttrs; let pointAttrs = this.props.pointAttrs;
let pid= this.props.pid; let pid = this.props.pid;
//楼层 //楼层
let floor= this.props.floor; let floor = this.props.floor;
let pointtype= this.props.pointtype; let pointtype = this.props.pointtype;
if (this.props.city === 'xian') {
this.onAlarmClick1(pointtype, 'floor_' + floor, {
if(this.props.city==='xian'){ authOrg: null,
this.onAlarmClick1(pointtype,'floor_'+floor,{ code: '',
content: '',
'authOrg': null, id: 0,
'code': "", isAlarm: 0,
'content': "", pointAttrs: `{"position":"` + pointAttrs + `","storey":"` + floor + `"}`,
'id': 0, pointId: pid,
'isAlarm': 0, pointName: pointName,
'pointAttrs': `{"position":"`+pointAttrs+`","storey":"`+floor+`"}`, pointType: '3',
'pointId': pid, sourceId: null,
'pointName': pointName, updateDate: ''
'pointType': "3",
'sourceId': null,
'updateDate': "",
}); });
}else{ } else {
this.onAlarmClick1(pointtype, 'xy_floor_' + floor, {
this.onAlarmClick1(pointtype,'xy_floor_'+floor,{ authOrg: null,
code: '',
'authOrg': null, content: '',
'code': "", id: 0,
'content': "", isAlarm: 0,
'id': 0, pointAttrs: `{"position":"` + pointAttrs + `","storey":"` + floor + `"}`,
'isAlarm': 0, pointId: pid,
'pointAttrs': `{"position":"`+pointAttrs+`","storey":"`+floor+`"}`, pointName: pointName,
'pointId': pid, pointType: '3',
'pointName': pointName, sourceId: null,
'pointType': "3", updateDate: ''
'sourceId': null,
'updateDate': "",
}); });
} }
} }
}, 1500); }, 1500);
// 设置楼层勾边标记 // 设置楼层勾边标记
this.setToggleOutline(); this.setToggleOutline();
}; };
/** /**
...@@ -538,7 +547,7 @@ class View3D extends Component { ...@@ -538,7 +547,7 @@ class View3D extends Component {
getAlarms().then(data => { getAlarms().then(data => {
this.setState({ alarmData: data }); this.setState({ alarmData: data });
}); });
} };
/** /**
* Worker加载中 * Worker加载中
...@@ -553,14 +562,14 @@ class View3D extends Component { ...@@ -553,14 +562,14 @@ class View3D extends Component {
} = {}) => { } = {}) => {
this.setState({ percent }); this.setState({ percent });
console.log('from worker:', loading, percent, rendering); console.log('from worker:', loading, percent, rendering);
} };
/** /**
* Worker初始化完成 * Worker初始化完成
* *
* @memberof View3D * @memberof View3D
*/ */
onAfterWorkerInit = (workerObjGroup) => { onAfterWorkerInit = workerObjGroup => {
this.setState({ isAllDone: true }); this.setState({ isAllDone: true });
// 处理跳跃 // 处理跳跃
this.lensJumpFactory.process(workerObjGroup); this.lensJumpFactory.process(workerObjGroup);
...@@ -571,18 +580,18 @@ class View3D extends Component { ...@@ -571,18 +580,18 @@ class View3D extends Component {
* *
* @memberof View3D * @memberof View3D
*/ */
onLoadProgress = (xhr) => { onLoadProgress = xhr => {
if (xhr.lengthComputable) { if (xhr.lengthComputable) {
var percentComplete = (xhr.loaded / xhr.total) * 100; var percentComplete = (xhr.loaded / xhr.total) * 100;
const percent = Math.round(percentComplete, 2); const percent = Math.round(percentComplete, 2);
console.log(`model ${percent}% downloaded`); console.log(`model ${percent}% downloaded`);
if (percent === 100){ if (percent === 100) {
this.setState({ percent: 10 }); this.setState({ percent: 10 });
} else { } else {
this.setState({ percent }); this.setState({ percent });
} }
} }
} };
/** /**
* 焦点位置设置 * 焦点位置设置
...@@ -609,7 +618,7 @@ class View3D extends Component { ...@@ -609,7 +618,7 @@ class View3D extends Component {
this.clearAlarms(); this.clearAlarms();
if (object && object.foreignKey) { if (object && object.foreignKey) {
this.cameraFactory.flyTo({ this.cameraFactory.flyTo({
position: [269.11, 83.06, 103.80], position: [269.11, 83.06, 103.8],
target: object, target: object,
duration: 1000, duration: 1000,
// 飞行到具体的 obj 之后,执行进入层级操作 // 飞行到具体的 obj 之后,执行进入层级操作
...@@ -636,7 +645,6 @@ class View3D extends Component { ...@@ -636,7 +645,6 @@ class View3D extends Component {
if (isFlyToSun !== undefined && isFlyToSun === true) { if (isFlyToSun !== undefined && isFlyToSun === true) {
_this.flyToCabinet(object); _this.flyToCabinet(object);
} }
} }
} }
}); });
...@@ -693,7 +701,7 @@ class View3D extends Component { ...@@ -693,7 +701,7 @@ class View3D extends Component {
} }
this.setCabinetFitView(userData); this.setCabinetFitView(userData);
} };
/** /**
* 设置楼层勾边标记 * 设置楼层勾边标记
...@@ -702,14 +710,14 @@ class View3D extends Component { ...@@ -702,14 +710,14 @@ class View3D extends Component {
*/ */
setToggleOutline = () => { setToggleOutline = () => {
let _objs = []; let _objs = [];
this.objs.map(_obj=>{ this.objs.map(_obj => {
const userData = _obj.userData; const userData = _obj.userData;
if (userData && (userData.key === FLOOR.FLOOR_3 || userData.key === FLOOR.FLOOR_6 || userData.key === FLOOR.XY_FLOOR_3)) { if (userData && (userData.key === FLOOR.FLOOR_3 || userData.key === FLOOR.FLOOR_6 || userData.key === FLOOR.XY_FLOOR_3)) {
_objs.push(_obj); _objs.push(_obj);
} }
}); });
this.outlineFactory.toggleOutline(_objs); this.outlineFactory.toggleOutline(_objs);
} };
/** /**
* 设置楼层勾边标记为默认颜色 * 设置楼层勾边标记为默认颜色
...@@ -721,7 +729,7 @@ class View3D extends Component { ...@@ -721,7 +729,7 @@ class View3D extends Component {
visibleEdgeColor: '#ffe2ad', visibleEdgeColor: '#ffe2ad',
hiddenEdgeColor: '#ffe2ad' hiddenEdgeColor: '#ffe2ad'
}; };
} };
/** /**
* 设置楼层勾边标记为选中的颜色 * 设置楼层勾边标记为选中的颜色
...@@ -733,23 +741,24 @@ class View3D extends Component { ...@@ -733,23 +741,24 @@ class View3D extends Component {
visibleEdgeColor: '#f8a303', visibleEdgeColor: '#f8a303',
hiddenEdgeColor: '#ffe2ad' hiddenEdgeColor: '#ffe2ad'
}; };
} };
/** /**
* 设置楼层类型 * 设置楼层类型
* *
* @memberof View3D * @memberof View3D
*/ */
setFloorType = (key) => { setFloorType = key => {
// 设置初始视角 // 设置初始视角
if (key === FLOOR.FLOOR_3) { if (key === FLOOR.FLOOR_3) {
this.setFloorThreeFitView(); this.setFloorThreeFitView();
} else if (key === FLOOR.FLOOR_6) { } else if (key === FLOOR.FLOOR_6) {
this.setFloorSixFitView(); this.setFloorSixFitView();
} else { // 咸阳 } else {
// 咸阳
this.setXYFloorThreeFitView(); this.setXYFloorThreeFitView();
} }
} };
/** /**
* 淡出 * 淡出
...@@ -793,7 +802,7 @@ class View3D extends Component { ...@@ -793,7 +802,7 @@ class View3D extends Component {
const { orgCode } = this.state; const { orgCode } = this.state;
this.clearMarkers(); this.clearMarkers();
//风险点访问风险模块 //风险点访问风险模块
if (markerType === 'riskSource'){ if (markerType === 'riskSource') {
initView3DRiskFromBizAction(markerType, orgCode).then(data => { initView3DRiskFromBizAction(markerType, orgCode).then(data => {
this.initView3DData(markerType, data); this.initView3DData(markerType, data);
}); });
...@@ -802,19 +811,20 @@ class View3D extends Component { ...@@ -802,19 +811,20 @@ class View3D extends Component {
this.initView3DData(markerType, data); this.initView3DData(markerType, data);
}); });
} }
} };
/** /**
* 重构数据 * 重构数据
* *
* @memberof View3D * @memberof View3D
*/ */
initView3DData = (markerType, data) =>{ initView3DData = (markerType, data) => {
const { markers, floorType, alarmData } = this.state; const { markers, floorType, alarmData } = this.state;
let markerData = []; let markerData = [];
if (data) {// 点数据按楼层显示 if (data) {
// 点数据按楼层显示
if (LENS_LEVEL.SUB === this.lensLevel || LENS_LEVEL.SUN === this.lensLevel) { if (LENS_LEVEL.SUB === this.lensLevel || LENS_LEVEL.SUN === this.lensLevel) {
data.forEach(item=> { data.forEach(item => {
if (floorType === item.objKey) { if (floorType === item.objKey) {
markerData.push(item); markerData.push(item);
} }
...@@ -840,14 +850,14 @@ class View3D extends Component { ...@@ -840,14 +850,14 @@ class View3D extends Component {
markers[markerType] = markerData; markers[markerType] = markerData;
this.setState({ markers, markerData }); this.setState({ markers, markerData });
} }
} };
/** /**
* 风险点闪烁 * 风险点闪烁
* *
* @memberof View3D * @memberof View3D
*/ */
riskAlarmDataTwinkle = (alarmData) =>{ riskAlarmDataTwinkle = alarmData => {
const { markers, markerData, markerType } = this.state; const { markers, markerData, markerType } = this.state;
if (alarmData.bizobj) { if (alarmData.bizobj) {
markerData.forEach(marker => { markerData.forEach(marker => {
...@@ -862,7 +872,7 @@ class View3D extends Component { ...@@ -862,7 +872,7 @@ class View3D extends Component {
// 点数据分类 // 点数据分类
markers[markerType] = markerData; markers[markerType] = markerData;
this.setState({ markers }); this.setState({ markers });
} };
/** /**
* 设置初始视角 * 设置初始视角
...@@ -870,9 +880,10 @@ class View3D extends Component { ...@@ -870,9 +880,10 @@ class View3D extends Component {
* @memberof View3D * @memberof View3D
*/ */
setRootFitView = () => { setRootFitView = () => {
this.cameraFactory.fitView(this.city.isXian ? desigerHelperConfig.cameraEffect : this.cameraFactory.fitView(
this.city.isXianyang ? desigerHelperConfig.xyCameraEffect : desigerHelperConfig.xdjCameraEffect); this.city.isXian ? desigerHelperConfig.cameraEffect : this.city.isXianyang ? desigerHelperConfig.xyCameraEffect : desigerHelperConfig.xdjCameraEffect
} );
};
/** /**
* 设置西大街初始视角 * 设置西大街初始视角
...@@ -881,7 +892,7 @@ class View3D extends Component { ...@@ -881,7 +892,7 @@ class View3D extends Component {
*/ */
setXidajieFitView = () => { setXidajieFitView = () => {
this.cameraFactory.fitView(desigerHelperConfig.xdjCameraEffect); this.cameraFactory.fitView(desigerHelperConfig.xdjCameraEffect);
} };
/** /**
* 设置三楼初始视角 * 设置三楼初始视角
...@@ -891,7 +902,7 @@ class View3D extends Component { ...@@ -891,7 +902,7 @@ class View3D extends Component {
setFloorThreeFitView = () => { setFloorThreeFitView = () => {
this.cameraFactory.fitView(desigerHelperConfig.thirdFloorCameraEffect); this.cameraFactory.fitView(desigerHelperConfig.thirdFloorCameraEffect);
this.setState({ floorType: FLOOR.FLOOR_3 }); this.setState({ floorType: FLOOR.FLOOR_3 });
} };
/** /**
* 设置三楼初始视角 - 咸阳 * 设置三楼初始视角 - 咸阳
...@@ -901,7 +912,7 @@ class View3D extends Component { ...@@ -901,7 +912,7 @@ class View3D extends Component {
setXYFloorThreeFitView = () => { setXYFloorThreeFitView = () => {
this.cameraFactory.fitView(desigerHelperConfig.xyThirdFloorCameraEffect); this.cameraFactory.fitView(desigerHelperConfig.xyThirdFloorCameraEffect);
this.setState({ floorType: FLOOR.FLOOR_3 }); this.setState({ floorType: FLOOR.FLOOR_3 });
} };
/** /**
* 设置六楼初始视角 * 设置六楼初始视角
...@@ -911,21 +922,21 @@ class View3D extends Component { ...@@ -911,21 +922,21 @@ class View3D extends Component {
setFloorSixFitView = () => { setFloorSixFitView = () => {
this.cameraFactory.fitView(desigerHelperConfig.thirdFloorCameraEffect); this.cameraFactory.fitView(desigerHelperConfig.thirdFloorCameraEffect);
this.setState({ floorType: FLOOR.FLOOR_6 }); this.setState({ floorType: FLOOR.FLOOR_6 });
} };
/** /**
* 设置机柜初始视角 * 设置机柜初始视角
* *
* @memberof View3D * @memberof View3D
*/ */
setCabinetFitView = (userData) => { setCabinetFitView = userData => {
this.cameraFactory.fitView({ this.cameraFactory.fitView({
position: userData.position ? userData.position : desigerHelperConfig.cabinetCameraEffect.position, position: userData.position ? userData.position : desigerHelperConfig.cabinetCameraEffect.position,
target: userData.target ? userData.target : desigerHelperConfig.cabinetCameraEffect.target, target: userData.target ? userData.target : desigerHelperConfig.cabinetCameraEffect.target,
duration: desigerHelperConfig.cabinetCameraEffect.duration duration: desigerHelperConfig.cabinetCameraEffect.duration
}); });
this.setState({ floorType: FLOOR.FLOOR_0 }); this.setState({ floorType: FLOOR.FLOOR_0 });
} };
/** /**
* 设置玻璃透明度 * 设置玻璃透明度
...@@ -967,7 +978,7 @@ class View3D extends Component { ...@@ -967,7 +978,7 @@ class View3D extends Component {
* @memberof View3D * @memberof View3D
*/ */
clearFloorViewEffect() { clearFloorViewEffect() {
this.objs.forEach(obj=>{ this.objs.forEach(obj => {
if (obj.userData.type === 'floor') { if (obj.userData.type === 'floor') {
obj.baseObjHelper.style.color = ''; obj.baseObjHelper.style.color = '';
} }
...@@ -997,7 +1008,7 @@ class View3D extends Component { ...@@ -997,7 +1008,7 @@ class View3D extends Component {
// 设置楼层标记 // 设置楼层标记
this.setToggleOutline(); this.setToggleOutline();
} };
/** /**
* 返回三维第二层 * 返回三维第二层
...@@ -1013,7 +1024,7 @@ class View3D extends Component { ...@@ -1013,7 +1024,7 @@ class View3D extends Component {
// 设置层级 // 设置层级
this.lensLevel = LENS_LEVEL.SUB; this.lensLevel = LENS_LEVEL.SUB;
// this.clearMarkers(); // this.clearMarkers();
} };
/** /**
* 返回上级 * 返回上级
...@@ -1021,10 +1032,13 @@ class View3D extends Component { ...@@ -1021,10 +1032,13 @@ class View3D extends Component {
* @memberof View3D * @memberof View3D
*/ */
backPreviousLevelView = () => { backPreviousLevelView = () => {
this.props.trigger(eventTopics.innate_operater_back, { value: true });
if (this.lensLevel === LENS_LEVEL.SUN) { if (this.lensLevel === LENS_LEVEL.SUN) {
this.backSubView(); this.backSubView();
this.lensLevel = LENS_LEVEL.SUB; 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) { } else if (this.lensLevel === LENS_LEVEL.SUB && !this.city.isXidajie) {
this.backRootView(); this.backRootView();
this.lensLevel = LENS_LEVEL.ROOT; this.lensLevel = LENS_LEVEL.ROOT;
...@@ -1046,7 +1060,7 @@ class View3D extends Component { ...@@ -1046,7 +1060,7 @@ class View3D extends Component {
pickVisable: false, pickVisable: false,
pickDialog: false pickDialog: false
}); });
} };
/** /**
* 执行操作 * 执行操作
...@@ -1136,7 +1150,10 @@ class View3D extends Component { ...@@ -1136,7 +1150,10 @@ class View3D extends Component {
*/ */
updateMarker = data => { updateMarker = data => {
//console.log(data, 'updateMarker'); //console.log(data, 'updateMarker');
if(data !=undefined && data != null){
const { type, id } = data; const { type, id } = data;
if (type !=undefined && type != null) {
if (type && null !== type) {
const { markers } = this.state; const { markers } = this.state;
const markersArr = markers[type] || []; const markersArr = markers[type] || [];
if (markersArr.length > 0) { if (markersArr.length > 0) {
...@@ -1158,6 +1175,12 @@ class View3D extends Component { ...@@ -1158,6 +1175,12 @@ class View3D extends Component {
}); });
} }
} }
}
}
}
}; };
/** /**
...@@ -1180,14 +1203,45 @@ class View3D extends Component { ...@@ -1180,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 * @memberof View3D
*/ */
transferAlarmData = () => { transferAlarmData = () => {
let { alarmData, orgCode } = this.state; let { alarmData, orgCode } = this.state;
//登录人的orgCode
let userOrgCode = lsTool.read('selectedCompanyOrg');
// alarmData = moniData;
const { isAllDone, alarms, markerType } = this.state; const { isAllDone, alarms, markerType } = this.state;
if (!isAllDone || this.city.isXidajie) { if (!isAllDone || this.city.isXidajie) {
return; return;
...@@ -1195,8 +1249,9 @@ class View3D extends Component { ...@@ -1195,8 +1249,9 @@ class View3D extends Component {
this.clearMarkers(); this.clearMarkers();
this.clearAlarms(); this.clearAlarms();
if (!utils.isEmpty(alarmData) && utils.isArray(alarmData)){ if (!utils.isEmpty(alarmData) && utils.isArray(alarmData)) {
alarmData = alarmData.filter(e=>{ //过滤通道信息 alarmData = alarmData.filter(e => {
//过滤通道信息
return e.pointType !== '4'; return e.pointType !== '4';
}); });
} }
...@@ -1209,23 +1264,78 @@ class View3D extends Component { ...@@ -1209,23 +1264,78 @@ class View3D extends Component {
let dictionaryList = lsTool.read('dictionaryList'); let dictionaryList = lsTool.read('dictionaryList');
let dicCodeList = JSON.parse(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)) { 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); 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 (
if (pointAttrs.storey === '3' || pointAttrs.storey === 'floor_3') {// 三楼数据 (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); thirdFloorAlarmData.push(item);
} else if (pointAttrs.storey === '6' || pointAttrs.storey === 'floor_6') {// 六楼数据 } else if (pointAttrs.storey === '6' || pointAttrs.storey === 'floor_6') {
// 六楼数据
sixthFloorAlarmData.push(item); 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); 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) { if (this.lensLevel === LENS_LEVEL.ROOT) {
// 三楼告警 // 三楼告警
...@@ -1276,30 +1386,40 @@ class View3D extends Component { ...@@ -1276,30 +1386,40 @@ class View3D extends Component {
this.setFloorViewEffect(obj, xyFloorAlarmStatus); this.setFloorViewEffect(obj, xyFloorAlarmStatus);
} }
}); });
} else if (this.lensLevel === LENS_LEVEL.SUB) { } else if (this.lensLevel === LENS_LEVEL.SUB) {
let item = { 'type': markerType }; let item = { type: markerType };
this.changeMarkerType(item, false); this.changeMarkerType(item, false);
} else if (this.lensLevel === LENS_LEVEL.SUN && markerType === 'impEquipment') { } else if (this.lensLevel === LENS_LEVEL.SUN && markerType === 'impEquipment') {
let item = { 'type': 'impEquipment' }; let item = { type: 'impEquipment' };
this.changeMarkerType(item, false); this.changeMarkerType(item, false);
} }
} };
/** /**
* 根据城市的orgCode,返回城市名称 * 根据城市的orgCode,返回城市名称
*/ */
getSelectCityByOrgCode = (orgCode,dictionaryList) => { getSelectCityByOrgCode = (orgCode, dictionaryList) => {
let city = null; let city = null;
dictionaryList.map(item =>{ dictionaryList.map(item => {
if(item.dictDataValue === orgCode){ if (item.dictDataValue === orgCode) {
city=item.dictDataKey; city = item.dictDataKey;
} }
}) });
return city; return city;
} };
/**
* 根据城市返回字典中配置的组织orgCode
*/
getSelectOrgCode = (city, dictionaryList) => {
let orgCode = null;
dictionaryList.map(item => {
if (item.dictDataKey === city) {
orgCode = item.dictDataValue;
}
});
return orgCode;
};
/** /**
* 告警信息点击事件 * 告警信息点击事件
...@@ -1313,116 +1433,117 @@ class View3D extends Component { ...@@ -1313,116 +1433,117 @@ class View3D extends Component {
const _this = this; const _this = this;
const pointType = parseInt(item.pointType); const pointType = parseInt(item.pointType);
if (type === FLOOR.FLOOR_3 || type === FLOOR.FLOOR_6) { if (type === FLOOR.FLOOR_3 || type === FLOOR.FLOOR_6) {
_this.objs.forEach( obj => { _this.objs.forEach(obj => {
if (obj.userData && obj.userData.key === type) { if (obj.userData && obj.userData.key === type) {
if (!obj.isForceParent ) { if (!obj.isForceParent) {
_this.outlineFactory.toggleOutline(obj); _this.outlineFactory.toggleOutline(obj);
if (pointType === 1) { // if (pointType === 1) {
_this.focusObject(obj, true); // _this.focusObject(obj, true);
setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200); // setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200);
} else { // } else {
// _this.focusObject(obj);
// }
_this.focusObject(obj); _this.focusObject(obj);
}
// 延迟显示告警点 // 延迟显示告警点
setTimeout(() => {_this.renderAlarmMarker(type, item);}, 1100); setTimeout(() => {
_this.renderAlarmMarker(type, item);
}, 1100);
} }
} }
}); });
} }
if (type === FLOOR.FLOOR_XY) { 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.userData && obj.userData.key === FLOOR.XY_FLOOR_3) {
if (!obj.isForceParent ) { if (!obj.isForceParent) {
_this.outlineFactory.toggleOutline(obj); _this.outlineFactory.toggleOutline(obj);
if (pointType === 1) { // if (pointType === 1) {
_this.focusObject(obj, true); // _this.focusObject(obj, true);
setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200); // setTimeout(() => {_this.executeOperate({ key: 'fitview' });}, 1200);
} else { // } else {
// _this.focusObject(obj);
// }
_this.focusObject(obj); _this.focusObject(obj);
}
// 延迟显示告警点 // 延迟显示告警点
setTimeout(() => {_this.renderAlarmMarker(type, item);}, 1100); setTimeout(() => {
_this.renderAlarmMarker(type, item);
}, 1100);
} }
} }
}); });
} }
} };
onAlarmClick1 = (pointtype,type, item) => { onAlarmClick1 = (pointtype, type, item) => {
this.clearAlarms(); this.clearAlarms();
this.clearMarkers(); this.clearMarkers();
const _this = this; const _this = this;
const pointType = parseInt(item.pointType); const pointType = parseInt(item.pointType);
if (type === FLOOR.FLOOR_3) { if (type === FLOOR.FLOOR_3) {
_this.objs.forEach( obj => { _this.objs.forEach(obj => {
if (obj.userData && obj.userData.key === FLOOR.FLOOR_3) { if (obj.userData && obj.userData.key === FLOOR.FLOOR_3) {
if (!obj.isForceParent ) { if (!obj.isForceParent) {
_this.outlineFactory.toggleOutline(obj); _this.outlineFactory.toggleOutline(obj);
_this.focusObject(obj); _this.focusObject(obj);
// 延迟显示告警点 // 延迟显示告警点
setTimeout(() => {_this.renderAlarmMarker1(pointtype,type, item);}, 1100); setTimeout(() => {
_this.renderAlarmMarker1(pointtype, type, item);
}, 1100);
} }
} }
}); });
} }
if (type === FLOOR.FLOOR_6) { if (type === FLOOR.FLOOR_6) {
_this.objs.forEach( obj => { _this.objs.forEach(obj => {
if (obj.userData && obj.userData.key === FLOOR.FLOOR_6) { if (obj.userData && obj.userData.key === FLOOR.FLOOR_6) {
if (!obj.isForceParent ) { if (!obj.isForceParent) {
_this.outlineFactory.toggleOutline(obj); _this.outlineFactory.toggleOutline(obj);
_this.focusObject(obj); _this.focusObject(obj);
// 延迟显示告警点 // 延迟显示告警点
setTimeout(() => {_this.renderAlarmMarker1(pointtype,type, item);}, 1100); setTimeout(() => {
_this.renderAlarmMarker1(pointtype, type, item);
}, 1100);
} }
} }
}); });
} }
if (type === FLOOR.XY_FLOOR_3) { if (type === FLOOR.XY_FLOOR_3) {
_this.objs.forEach( obj => { _this.objs.forEach(obj => {
if (obj.userData && obj.userData.key === FLOOR.XY_FLOOR_3) { if (obj.userData && obj.userData.key === FLOOR.XY_FLOOR_3) {
if (!obj.isForceParent ) { if (!obj.isForceParent) {
_this.outlineFactory.toggleOutline(obj); _this.outlineFactory.toggleOutline(obj);
_this.focusObject(obj); _this.focusObject(obj);
// 延迟显示告警点 // 延迟显示告警点
setTimeout(() => {_this.renderAlarmMarker1(pointtype,type, item);}, 1100); setTimeout(() => {
_this.renderAlarmMarker1(pointtype, type, item);
}, 1100);
} }
} }
}); });
} }
} };
/** /**
* 进入机柜 * 进入机柜
* *
* @memberof View3D * @memberof View3D
*/ */
flyToCabinet = (object) => { flyToCabinet = object => {
const _this = this; const _this = this;
_this.lensLevel = LENS_LEVEL.SUN; _this.lensLevel = LENS_LEVEL.SUN;
object.parent.children.forEach(childrenObj => { object.parent.children.forEach(childrenObj => {
if (childrenObj.primaryKey === object.foreignKey) { if (childrenObj.primaryKey === object.foreignKey) {
childrenObj.children.forEach(obj => { childrenObj.children.forEach(obj => {
if (obj){ if (obj) {
const userData = obj.userData; const userData = obj.userData;
if (userData && userData.type === 'cabinet') { if (userData && userData.type === 'cabinet') {
_this.onCabinetClick(obj, userData); _this.onCabinetClick(obj, userData);
...@@ -1431,12 +1552,9 @@ class View3D extends Component { ...@@ -1431,12 +1552,9 @@ class View3D extends Component {
}); });
} }
}); });
} };
renderAlarmMarker1 = (pointtype,type, item) => { renderAlarmMarker1 = (pointtype, type, item) => {
const { markers } = this.state; const { markers } = this.state;
const pointAttrs = JSON.parse(item.pointAttrs); const pointAttrs = JSON.parse(item.pointAttrs);
if (pointAttrs.position) { if (pointAttrs.position) {
...@@ -1451,15 +1569,20 @@ class View3D extends Component { ...@@ -1451,15 +1569,20 @@ class View3D extends Component {
alarmPoint.id = item.pointId; alarmPoint.id = item.pointId;
let levelType = ''; let levelType = '';
if (pointType === 3){//巡检 if (pointType === 3) {
//巡检
levelType = '3'; levelType = '3';
} else if (pointType === 2){//动环 } else if (pointType === 2) {
//动环
levelType = '01'; levelType = '01';
} else if (pointType === 6){ //火探 } else if (pointType === 6) {
//火探
levelType = '02'; levelType = '02';
} else if (pointType === 1){//网络设备 } else if (pointType === 1) {
//网络设备
levelType = '01'; levelType = '01';
} else if (pointType === 5){//虚拟设备(自动巡检设备) } else if (pointType === 5) {
//虚拟设备(自动巡检设备)
levelType = '03'; levelType = '03';
} }
alarmPoint.level = levelType; alarmPoint.level = levelType;
...@@ -1469,7 +1592,7 @@ class View3D extends Component { ...@@ -1469,7 +1592,7 @@ class View3D extends Component {
alarmPoint.title = item.pointName; alarmPoint.title = item.pointName;
alarmPoint.sourceId = item.sourceId; alarmPoint.sourceId = item.sourceId;
alarmPoint.twinkle = pointtype; alarmPoint.twinkle = pointtype;
alarmPoint.type = pointType === 3 ? 'patrol' : ((pointType === 2)||(pointType === 6)) ? 'dynamicRingData' : 'impEquipment'; alarmPoint.type = pointType === 3 ? 'patrol' : pointType === 2 || pointType === 6 ? 'dynamicRingData' : 'impEquipment';
let points = []; let points = [];
points.push(alarmPoint); points.push(alarmPoint);
markers[alarmPoint.type] = points; markers[alarmPoint.type] = points;
...@@ -1482,7 +1605,7 @@ class View3D extends Component { ...@@ -1482,7 +1605,7 @@ class View3D extends Component {
}); });
} }
} }
} };
/** /**
* 生成告警点 * 生成告警点
...@@ -1504,16 +1627,20 @@ class View3D extends Component { ...@@ -1504,16 +1627,20 @@ class View3D extends Component {
alarmPoint.id = item.pointId; alarmPoint.id = item.pointId;
let levelType = ''; let levelType = '';
if (pointType === 3){//巡检 if (pointType === 3) {
//巡检
levelType = '3'; levelType = '3';
} else if (pointType === 2){//动环 } else if (pointType === 2) {
//动环
levelType = '01'; levelType = '01';
}else if(pointType === 6){ //火探 } else if (pointType === 6) {
//火探
levelType = '02'; levelType = '02';
} } else if (pointType === 1) {
else if (pointType === 1){//网络设备 //网络设备
levelType = '01'; levelType = '01';
} else if (pointType === 5){//虚拟设备(自动巡检设备) } else if (pointType === 5) {
//虚拟设备(自动巡检设备)
levelType = '03'; levelType = '03';
} }
alarmPoint.level = levelType; alarmPoint.level = levelType;
...@@ -1522,10 +1649,14 @@ class View3D extends Component { ...@@ -1522,10 +1649,14 @@ class View3D extends Component {
alarmPoint.position = pointPosition; alarmPoint.position = pointPosition;
alarmPoint.title = item.pointName; alarmPoint.title = item.pointName;
alarmPoint.sourceId = item.sourceId; alarmPoint.sourceId = item.sourceId;
if (pointAttrs.levelStr === 'impEqu_04') {
alarmPoint.levelStr = 'impEqu_04';
}
alarmPoint.twinkle = true; 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 = []; let points = [];
points.push(alarmPoint); points.push(alarmPoint);
markers[alarmPoint.type] = points; markers[alarmPoint.type] = points;
//console.log(markers); //console.log(markers);
...@@ -1536,7 +1667,7 @@ class View3D extends Component { ...@@ -1536,7 +1667,7 @@ class View3D extends Component {
}); });
} }
} }
} };
/** /**
* 弹出框关闭事件 * 弹出框关闭事件
...@@ -1548,7 +1679,7 @@ class View3D extends Component { ...@@ -1548,7 +1679,7 @@ class View3D extends Component {
pickDialog: false, pickDialog: false,
pickData: {} pickData: {}
}); });
} };
/** /**
* 渲染控制区 * 渲染控制区
...@@ -1558,19 +1689,21 @@ class View3D extends Component { ...@@ -1558,19 +1689,21 @@ class View3D extends Component {
renderMaskContent = () => { renderMaskContent = () => {
const { showExplain } = this.state; const { showExplain } = this.state;
const { hiddenScreenSaver } = this.props; const { hiddenScreenSaver } = this.props;
return (<MaskContent return (
<MaskContent
onItemClick={this.changeMarkerType} onItemClick={this.changeMarkerType}
layerConfig={layerConfig} layerConfig={layerConfig}
showExplain={showExplain} showExplain={showExplain}
onExplainClose={this.handleExplainClose} onExplainClose={this.handleExplainClose}
hiddenScreenSaver={hiddenScreenSaver} hiddenScreenSaver={hiddenScreenSaver}
/>); />
} );
};
afterRender = () => { afterRender = () => {
this.objAnchorHelper && this.objAnchorHelper.update(); this.objAnchorHelper && this.objAnchorHelper.update();
this.infoHelper && this.infoHelper.update(); this.infoHelper && this.infoHelper.update();
} };
render() { render() {
const { const {
...@@ -1612,7 +1745,7 @@ class View3D extends Component { ...@@ -1612,7 +1745,7 @@ class View3D extends Component {
enableModelParser enableModelParser
disabledEdit disabledEdit
defaultLoading={false} defaultLoading={false}
ref={node => this.a3dRef = node} ref={node => (this.a3dRef = node)}
baseObjs={objs} baseObjs={objs}
options={desigerConf.options} options={desigerConf.options}
maskContent={isAllDone && this.renderMaskContent()} maskContent={isAllDone && this.renderMaskContent()}
...@@ -1623,7 +1756,9 @@ class View3D extends Component { ...@@ -1623,7 +1756,9 @@ class View3D extends Component {
loadingManager={this.loadingManager} loadingManager={this.loadingManager}
customLoading={<LoadingComs percent={percent} tip="正在搭载模型..." />} 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} /> <PointsPool markers={markers} orgCode={orgCode} updateMarker={this.updateMarker} />
{isAllDone && <PointsAlarm alarms={alarms} onAlarmClick={this.onAlarmClick} visible />} {isAllDone && <PointsAlarm alarms={alarms} onAlarmClick={this.onAlarmClick} visible />}
......
...@@ -74,16 +74,16 @@ class AlarmMarquee extends Component { ...@@ -74,16 +74,16 @@ class AlarmMarquee extends Component {
const { pmdList } = this.props; const { pmdList } = this.props;
return ( return (
<div className="AlarmMarquee-top-news"> <div className="AlarmMarquee-top-news">
<div className="news-marquee" > <div className="news-marquee">
<marquee <marquee
id="marquee" id="marquee"
direction="left" direction="left"
behavior="scroll" behavior="scroll"
scrollamount="10px" scrollamount="10px"
scrolldelay="0" scrolldelay="120"
loop="-1" loop="-1"
width="auto" width="auto"
height="42" height="100"
bgcolor="transparent" bgcolor="transparent"
hspace="0" hspace="0"
vspace="0" vspace="0"
......
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;
@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;
}
}
}
}
/* 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;
};
@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;
}
}
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;
//系统前缀名
$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); //流程底色
...@@ -83,16 +83,14 @@ export const bizControls = [ ...@@ -83,16 +83,14 @@ export const bizControls = [
{ key: 'level_1', label: '合格' }, { key: 'level_1', label: '合格' },
{ key: 'level_0', 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_01', label: '网络设备' },
{ key: 'impEqu_02', 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: 'monitorEquipment-point', icon: 'shujudian', type: 'monitorEquipment', label: '动环数据' },
{ key: 'dynamicRingData-point', icon: 'shujudian', type: 'dynamicRingData', label: '动环数据', subs: [ { key: 'dynamicRingData-point', icon: 'shujudian', type: 'dynamicRingData', label: '动环数据' },
{ key: 'dynamicRingData_01', label: '动环数据' },
{ key: 'dynamicRingData_02', label: '火探' }
] },
{ key: 'monitor-point', icon: 'xunjiandian', type: 'video', label: '视频监控' } { key: 'monitor-point', icon: 'xunjiandian', type: 'video', label: '视频监控' }
]; ];
......
...@@ -63,6 +63,7 @@ export const eventTopics = { ...@@ -63,6 +63,7 @@ export const eventTopics = {
innate_layer: 'base3d.view.controller_layer', // 楼层操作 innate_layer: 'base3d.view.controller_layer', // 楼层操作
innate_operater: 'base3d.view.controller_operater', // 三维内置操作 innate_operater: 'base3d.view.controller_operater', // 三维内置操作
innate_operater_back: 'base3d.view.controller_operater_back', // 三维内置操作返回--关闭首页弹框
broadcast_fresh: 'base3d.view.broadcast_fresh',//执行步骤数据刷新 broadcast_fresh: 'base3d.view.broadcast_fresh',//执行步骤数据刷新
view_fresh: 'base3d.view.view_fresh',//视图刷新 view_fresh: 'base3d.view.view_fresh',//视图刷新
fromws: 'base3d.fromws', fromws: 'base3d.fromws',
......
...@@ -46,7 +46,7 @@ class ListPaginate extends Component { ...@@ -46,7 +46,7 @@ class ListPaginate extends Component {
if (number === 0) { if (number === 0) {
data = content; data = content;
} else { } else {
if (content.length > 0) { if (content && content.length > 0) {
data.push(...content); data.push(...content);
} }
} }
...@@ -56,7 +56,7 @@ class ListPaginate extends Component { ...@@ -56,7 +56,7 @@ class ListPaginate extends Component {
tip = undefined; tip = undefined;
} }
if (number === 0) { if (number === 0) {
this.scroll.scrollToTop(); this.scroll && this.scroll.scrollToTop();
} }
this.setState({ tip, page: number }); this.setState({ tip, page: number });
parent.setState({ data }); parent.setState({ data });
......
...@@ -5,9 +5,9 @@ import Drawer from './Drawer'; ...@@ -5,9 +5,9 @@ import Drawer from './Drawer';
const dataPanes = [ const dataPanes = [
// { key: 'search', icon: 'sousuo', label: '检索', title: '信息检索' }, // { 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: 'trajectory', icon: 'trajectory', label: '轨迹', title: '巡检轨迹' },
{ key: 'record', icon: 'yuan1', label: '预案', title: '预案' }, { key: 'msg', icon: 'yuan1', label: '预案', title: '预案' },
// { key: 'job', icon: 'job', label: '工单', title: '工单查看' }, // { key: 'job', icon: 'job', label: '工单', title: '工单查看' },
// { key: 'broadcast', icon: 'buzhou7', label: '步骤', title: '步骤' }, // { key: 'broadcast', icon: 'buzhou7', label: '步骤', title: '步骤' },
// { key: 'statistics', icon: 'statistics', label: '统计', title: '统计信息' }, // { key: 'statistics', icon: 'statistics', label: '统计', title: '统计信息' },
......
...@@ -35,7 +35,7 @@ class IndexChart extends Component { ...@@ -35,7 +35,7 @@ class IndexChart extends Component {
if(pointData && pointData.name && pointData.name === '西安'){ if(pointData && pointData.name && pointData.name === '西安'){
this.props.indexViewChange(true); this.props.indexViewChange(true);
}else if (seriesType === 'lines') { } else if (seriesType === 'lines') {
// window.localStorage.setItem('cityLine',JSON.stringify(pointData)) // window.localStorage.setItem('cityLine',JSON.stringify(pointData))
browserHistory.push({pathname: '/biz/defaultRoute',state: { cityLine: JSON.stringify(pointData) }}); browserHistory.push({pathname: '/biz/defaultRoute',state: { cityLine: JSON.stringify(pointData) }});
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Connect, Modal } from 'amos-framework'; import { Connect, Modal, AmosAlert } from 'amos-framework';
import AmosWebSocket from 'amos-websocket'; import AmosWebSocket from 'amos-websocket';
import * as endConf from 'amos-processor/lib/config/endconf'; import * as endConf from 'amos-processor/lib/config/endconf';
import PilotController from 'amos-viz/lib/board/PilotController'; import PilotController from 'amos-viz/lib/board/PilotController';
import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts'; import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts';
// import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable'; // import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
import { Table } from 'amos-antd'; import { Table } from 'amos-antd';
import BottomTable from './rightChartChild/bottomTable'; import AlarmLineChart from './rightPane/alarmLineChart';
import moment from 'moment'; import moment from 'moment';
import { BarCharts } from 'amos-core'; import { BarCharts } from 'amos-core';
import { setPieOption,setLineOption } from './chartData'; import { setPieOption, setLineOption } from './chartData';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import { getLeftMetricDataAction, getLeftDangerDataAction } from './../../../../services/2dService'; import { getLeftMetricDataAction, getLeftDangerDataAction } from './../../../../services/2dService';
import { getSevenDaysAlarms, getMobileShowDate } from './../../../../services/alarmService';
import { browserHistory } from 'amos-react-router'; import { browserHistory } from 'amos-react-router';
import { utils } from 'amos-tool'; import { utils } from 'amos-tool';
...@@ -24,56 +25,63 @@ const chartStyle = { ...@@ -24,56 +25,63 @@ const chartStyle = {
width: '100%', height: '100%' width: '100%', height: '100%'
}; };
const chartDatas = { const chartDatas = {
dangerNums:{ dangerNums: {
total: 0, total: 0,
sevenAlarm: {
xAxis: [],
urgent: [],
important: [],
secondary: [],
warning: []
},
data: [ data: [
{ {
name:'一级风险', name: '一级风险',
value:'0/0' value: '0/0'
},{ }, {
name:'二级风险', name: '二级风险',
value:'0/0' value: '0/0'
},{ }, {
name:'三级风险', name: '三级风险',
value:'0/0' value: '0/0'
},{ }, {
name:'四级风险', name: '四级风险',
value:'0/0' value: '0/0'
} }
] ]
}, },
alarmNums:{ alarmNums: {
total: 223, total: 223,
data: [ data: [
{ {
name:'紧急', name: '紧急',
value:'0/0' value: '0/0'
},{ }, {
name:'重要', name: '重要',
value:'0/0' value: '0/0'
},{ }, {
name:'次要', name: '次要',
value:'0/0' value: '0/0'
},{ }, {
name:'警告', name: '警告',
value:'0/0' value: '0/0'
} }
] ]
}, },
equipmentData:[ equipmentData: [
{ {
name: '网络设备', name: '网络设备',
num: 0, num: 0,
unit: '个', unit: '个',
damageNum: 0, damageNum: 0,
damageRate: '0%' damageRate: '0%'
},{ }, {
name: '服务器', name: '服务器',
num: 0, num: 0,
unit: '个', unit: '个',
damageNum: 0, damageNum: 0,
damageRate: '0%' damageRate: '0%'
},{ }, {
name: 'NPC节点', name: 'NPC节点',
num: 0, num: 0,
unit: '个', unit: '个',
...@@ -81,10 +89,10 @@ const chartDatas = { ...@@ -81,10 +89,10 @@ const chartDatas = {
damageRate: '0%' damageRate: '0%'
} }
], ],
rangeData:[ rangeData: [
{ {
name:'中心机房', name: '中心机房',
data:[ data: [
{ {
name: '供配电', name: '供配电',
normalNum: 11, normalNum: 11,
...@@ -94,19 +102,19 @@ const chartDatas = { ...@@ -94,19 +102,19 @@ const chartDatas = {
name: 'UPS', name: 'UPS',
normalNum: 15, normalNum: 15,
damageNum: 6 damageNum: 6
},{ }, {
name: '精密空调', name: '精密空调',
normalNum: 21, normalNum: 21,
damageNum: 5 damageNum: 5
},{ }, {
name: '其他', name: '其他',
normalNum: 19, normalNum: 19,
damageNum: 8 damageNum: 8
} }
] ]
},{ }, {
name:'通信转接机房', name: '通信转接机房',
data:[ data: [
{ {
name: '供配电', name: '供配电',
normalNum: 13, normalNum: 13,
...@@ -116,11 +124,11 @@ const chartDatas = { ...@@ -116,11 +124,11 @@ const chartDatas = {
name: 'UPS', name: 'UPS',
normalNum: 17, normalNum: 17,
damageNum: 5 damageNum: 5
},{ }, {
name: '精密空调', name: '精密空调',
normalNum: 15, normalNum: 15,
damageNum: 7 damageNum: 7
},{ }, {
name: '其他', name: '其他',
normalNum: 19, normalNum: 19,
damageNum: 8 damageNum: 8
...@@ -143,31 +151,31 @@ class LeftCharts extends Component { ...@@ -143,31 +151,31 @@ class LeftCharts extends Component {
this.state = { this.state = {
currentCode: this.props.currentCode || '1*2', currentCode: this.props.currentCode || '1*2',
dangerNumData: [], dangerNumData: [],
gjdate:[], gjdate: [],
gjznum:0, gjznum: 0,
equipmentData: [], equipmentData: [],
dangerAllNum: [0,0] dangerAllNum: [0, 0],
mobileDate: {
QSZX: [],
SBJ: [],
HB: [],
XFJC: [],
LSJC: []
}
}; };
} }
componentDidMount() { componentDidMount() {
// getLeftMetricDataAction({code:this.state.currentCode}).then(data => {
// console.log('hhhhh',data);
// this.setState({
// dangerNumData: data
// });
// });
this.initData(); this.initData();
} }
handleData = (data) => { handleData = (data) => {
console.log(data); console.log('WS风险总数刷新...');
setTimeout(() => {
this.initData(); this.initData();
} }, 2000);
};
componentWillReceiveProps = nextProps => { componentWillReceiveProps = nextProps => {
if (nextProps.currentCode && this.state.currentCode !== nextProps.currentCode) { if (nextProps.currentCode && this.state.currentCode !== nextProps.currentCode) {
...@@ -178,21 +186,20 @@ class LeftCharts extends Component { ...@@ -178,21 +186,20 @@ class LeftCharts extends Component {
} }
}; };
initData = () => { initData = () => {
getLeftMetricDataAction({ code: this.state.currentCode }).then(data => { getLeftMetricDataAction({ code: this.state.currentCode }).then(data => {
// console.log('hhhhh',data);
let dataList = data.data || []; let dataList = data.data || [];
let num=0; let num = 0;
dataList.forEach(v=>{ dataList.forEach(v => {
num=num+Number(v.value.split('/')[1]); num = num + Number(v.value.split('/')[1]);
}); });
this.state.dangerAllNum[0] = num || 0; 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({ this.setState({
dangerNumData: data, dangerNumData: data,
dangerAllNum: this.state.dangerAllNum dangerAllNum: this.state.dangerAllNum
}); });
if (data.result === 'FAILURE' && data.message) { AmosAlert.error('警告', data.message); }
}); });
let dates = { let dates = {
...@@ -211,13 +218,13 @@ class LeftCharts extends Component { ...@@ -211,13 +218,13 @@ class LeftCharts extends Component {
getLeftDangerDataAction({ code: this.state.currentCode }).then(data => { getLeftDangerDataAction({ code: this.state.currentCode }).then(data => {
if (data&&data.length>0){ if (data && data.length > 0) {
let num=0; let num = 0;
data.forEach(v=>{ data.forEach(v => {
num=num+v.value; num = num + v.value;
}); });
this.state.dangerAllNum[1] = num || 0; 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({ this.setState({
gjznum: num, gjznum: num,
dangerAllNum: this.state.dangerAllNum dangerAllNum: this.state.dangerAllNum
...@@ -235,28 +242,28 @@ class LeftCharts extends Component { ...@@ -235,28 +242,28 @@ class LeftCharts extends Component {
// equipmentData: data // equipmentData: data
// }); // });
// }); // });
}
getSevenDaysAlarms().then(d => {
this.setState({ sevenAlarm: d });
});
getMobileShowDate().then(d => {
this.setState({ mobileDate: d });
});
}
gofx(){
gofx() {
browserHistory.push('/biz/riskModel'); browserHistory.push('/biz/riskModel');
} }
componentWillUnmount() { componentWillUnmount() {
} }
renderDangerNum = () => { renderDangerNum = () => {
let { dangerNumData } = this.state; let { dangerNumData } = this.state;
return (dangerNumData.data || chartDatas.dangerNums.data || []).map((item,index) => { return (dangerNumData.data || chartDatas.dangerNums.data || []).map((item, index) => {
return ( return (
<div className='item' key={index} onClick={ () => {this.gofx()} }> <div className='item' key={index} onClick={() => { this.gofx() }}>
<div className='itemContent' > <div className='itemContent' >
<span className='itemValue'>{item.value}</span> <span className='itemValue'>{item.value}</span>
<span className='itemLable'>{item.name}</span> <span className='itemLable'>{item.name}</span>
...@@ -279,8 +286,8 @@ class LeftCharts extends Component { ...@@ -279,8 +286,8 @@ class LeftCharts extends Component {
let { gjdate } = this.state; let { gjdate } = this.state;
// gjdate = gjdate.filter( e => { return e._id != null }) // gjdate = gjdate.filter( e => { return e._id != null })
if(!utils.isEmpty(gjdate) && utils.isArray(gjdate)){ if (!utils.isEmpty(gjdate) && utils.isArray(gjdate)) {
return (gjdate||[]).map((item, index) => { return (gjdate || []).map((item, index) => {
return ( return (
<div className='item' key={index}> <div className='item' key={index}>
<div className='itemContent'> <div className='itemContent'>
...@@ -291,9 +298,9 @@ class LeftCharts extends Component { ...@@ -291,9 +298,9 @@ class LeftCharts extends Component {
</div> </div>
) )
}) })
}else{ } else {
let alarmNumData = chartDatas.alarmNums.data || []; let alarmNumData = chartDatas.alarmNums.data || [];
return alarmNumData.map((item,index) => { return alarmNumData.map((item, index) => {
return ( return (
<div className='item' key={index}> <div className='item' key={index}>
<div className='itemContent'> <div className='itemContent'>
...@@ -307,57 +314,90 @@ class LeftCharts extends Component { ...@@ -307,57 +314,90 @@ class LeftCharts extends Component {
} }
} }
renderEquipmentData = () => { renderEquipmentData = () => {
let { equipmentData } = this.state; let { mobileDate } = this.state;
if (equipmentData.length < 3) { console.log('mobileDate' + mobileDate.QSZX);
equipmentData = chartDatas.equipmentData; let wd1 = mobileDate.QSZX.find(item => item.text === '1#温湿度') || {};
} let wd2 = mobileDate.QSZX.find(item => item.text === '2#温湿度') || {};
// let equipmentData = chartDatas.equipmentData || []; let wd3 = mobileDate.SBJ.find(item => item.text === '3#温湿度') || {};
return (equipmentData || []).map((item, index) => { 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 ( return (
<div className='item' key={index}> <div className="equipmentdiv">
<div className='chartBox'> <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.dyTopoURI} onMessage={this.handleData} reconnect debug />
<BarCharts barOps={setPieOption(item)} /> <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>
<div className='chartDesc'> <div className="dh-values" >
<div className="dh-values-item">3#温度:{wd3.value === undefined ? '0°C' : wd3.value } </div>
<span className='itemName'> <div className="dh-values-item">4#温度:{wd4.value === undefined ? '0°C' : wd4.value }</div>
{
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> </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>
<div className='chartBox'> <div className="quarter-div top-right">
{/*<LineCharts barOps={setLineOption(item)} chartStyle={chartStyle} />*/} <div className="dh-title">设备间</div>
<ReactEcharts option={setLineOption(item)} style={chartStyle} className="react_for_echarts" /> <div className='dh-content'>
<div className="dh-icon">
<img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
</div> </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>
} <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 = () => { renderWorkList = () => {
// let workMsg = chartDatas.workMsg || []; // let workMsg = chartDatas.workMsg || [];
...@@ -377,7 +417,7 @@ class LeftCharts extends Component { ...@@ -377,7 +417,7 @@ class LeftCharts extends Component {
render() { render() {
let now = moment().locale('zh-cn').format('YYYY-MM-DD'); 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); const wsURL = completeToken(SysWsURL.view3dws);
return ( return (
<div className="chart-content"> <div className="chart-content">
...@@ -402,46 +442,45 @@ class LeftCharts extends Component { ...@@ -402,46 +442,45 @@ class LeftCharts extends Component {
<span className='titleLeft'> <span className='titleLeft'>
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span> <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
告警统计</span> 告警统计</span>
<span className='titleRight'>{gjznum|| 0}</span> <span className='titleRight'>{gjznum || 0}</span>
</div> </div>
</div> </div>
<div className='chartBody'> <div className='chartBody'>
{this.renderAlarmNum()} {this.renderAlarmNum()}
</div> </div>
</div> </div>
{/**<div className='equipmentdata'> <div className='equipmentdata'>
<div className='tieleBox'> <div className='tieleBox'>
<div className='title'> <div className='title'>
<span className='titleLeft'> <span className='titleLeft'>
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span> <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
设备</span> 动环监控</span>
</div> </div>
</div> </div>
<div className='chartBody'> <div className='chartBody'>
{this.renderEquipmentData()} {this.renderEquipmentData()}
</div> </div>
</div> </div>
<div className='rangeData'> {/* <div className='rangeData'>
<div className='tieleBox'> <div className='tieleBox'>
<div className='title'> <div className='title'>
<span className='titleLeft'> <span className='titleLeft'>
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span> <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
动环数据</span> 动环监控</span>
</div> </div>
</div> </div>
<div className='chartBody'> <div className='chartBody'>
{this.renderRangeData()} {this.renderRangeData()}
</div> </div>
</div>*/} </div> */}
<div className='business'> <div className='point'>
<div className='title'> <div className='title'>
<span className='titleLeft'> <span className='titleLeft'>
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span> <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }} />
支付业务累计数据</span> 告警趋势统计</span>
<span className='titleRight'>{ now }</span>
</div> </div>
<div className='chartBody'> <div className='chartBody'>
<BottomTable /> <AlarmLineChart data={sevenAlarm} />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -21,9 +21,9 @@ class BusinessTable extends Component { ...@@ -21,9 +21,9 @@ class BusinessTable extends Component {
render() { render() {
const { data = [], title = '' } = this.props; const { data = [], title = '' } = this.props;
let de = data.find(e=>{ return e.payName.indexOf('大') >= 0}) || {}; let de = data.find(e=>{ return e.payName && e.payName.indexOf('大') >= 0}) || {};
let xe = data.find(e=>{ return e.payName.indexOf('小') >= 0}) || {}; let xe = data.find(e=>{ return e.payName && e.payName.indexOf('小') >= 0}) || {};
let wy = data.find(e=>{ return 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 de = data.find(e=>{ return e.payName === '大额系统'}) || {};
// let xe = data.find(e=>{ return e.payName === '小额系统'}) || {}; // let xe = data.find(e=>{ return e.payName === '小额系统'}) || {};
// let wy = data.find(e=>{ return e.payName === '网银系统'}) || {}; // let wy = data.find(e=>{ return e.payName === '网银系统'}) || {};
......
...@@ -8,8 +8,11 @@ import { middleTabletAction, middleHeaderAction } from '../../../../../services/ ...@@ -8,8 +8,11 @@ import { middleTabletAction, middleHeaderAction } from '../../../../../services/
const eventConnect = Connect.eventConnect; const eventConnect = Connect.eventConnect;
const AmosConfig = endConf.AmosConfig; const AmosConfig = endConf.AmosConfig;
const imgs = {"技术岗":"/src/assets/indexChart/work.png", const imgs = {"二线技术":"/src/assets/indexChart/work.png",
"业务岗":"/src/assets/indexChart/service.png"} "二线业务":"/src/assets/indexChart/service.png"}
// const time = {'早班': '08:30-20:30',
// '晚班': '20:30-次日08:30'}
@eventConnect @eventConnect
class MiddleTable extends Component { class MiddleTable extends Component {
...@@ -22,9 +25,10 @@ class MiddleTable extends Component { ...@@ -22,9 +25,10 @@ class MiddleTable extends Component {
this.state = { this.state = {
headerData: {}, headerData: {},
dataList: [], dataList: [],
total: 0,//总页数 arrangeList: [],
time: ['08:30-20:30','20:30-次日08:30'], arrangeName: null,
selectTime: '08:30-20:30', arrangeNo: '',
id: ''
}; };
} }
...@@ -32,6 +36,17 @@ class MiddleTable extends Component { ...@@ -32,6 +36,17 @@ class MiddleTable extends Component {
this.refreshDataList(); this.refreshDataList();
this.getHeaderData(); 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 = () => { getHeaderData = () => {
middleHeaderAction().then(data => { middleHeaderAction().then(data => {
if(data!=null){ if(data!=null){
...@@ -40,94 +55,82 @@ class MiddleTable extends Component { ...@@ -40,94 +55,82 @@ class MiddleTable extends Component {
}); });
} }
refreshDataList = () => { leftClick = () =>{
middleTabletAction(this.pageConfig.current,this.pageConfig.pageSize).then(data => { const { arrangeList } = this.state;
this.setState({ dataList: data.content, total:data.total }) let count = this.getarrangeIdex();
}); if (count - 1 < 0 ){
} return;
} else {
count = count - 1;
leftClick = () => {
if( this.pageConfig.current != 1 ){
this.pageConfig.current = this.pageConfig.current == 1 ? 1 : this.pageConfig.current - 1;
this.refreshDataList();
this.changeTime();
} }
middleTabletAction(arrangeList[count].id).then(data => {
this.setState({ dataList: data.content, arrangeName: data.arrangeName,arrangeList: data.arrangeList,arrangeNo: data.arrangeNo });
});
} }
rightClick = () => { rightClick= ()=>{
const { total } = this.state; const { arrangeList } = this.state;
let maxNum = Math.ceil( total/this.pageConfig.pageSize ); let count = this.getarrangeIdex();
if( this.pageConfig.current < maxNum){ if (count + 1 > arrangeList.length - 1){
this.pageConfig.current = this.pageConfig.current + 1; return;
this.refreshDataList(); } else {
this.changeTime(); count = count + 1;
} }
middleTabletAction(arrangeList[count].id).then(data => {
this.setState({dataList: data.content, arrangeName: data.arrangeName,arrangeList: data.arrangeList,arrangeNo: data.arrangeNo });
});
} }
changeTime = () => { refreshDataList = () => {
const { selectTime, time } = this.state; middleTabletAction(this.state.id).then(data => {
let newTime = time.filter( e => { console.log(data);
return e!=selectTime this.setState({ dataList: data.content, arrangeName: data.arrangeName,arrangeList: data.arrangeList,arrangeNo: data.arrangeNo });
}) });
this.setState({ selectTime:newTime[0] })
} }
render() { render() {
const { headerData, dataList, time, selectTime } = this.state; const { headerData, dataList,arrangeList, arrangeNo } = this.state;
let leader = headerData.leader || {}; let leader = (headerData.leader && headerData.leader[0]) || {};
let second = headerData.second || []; let secondTier = headerData.secondTier || [];
let arrange = (arrangeList && arrangeList.find(item => item.id === arrangeNo)) || {};
return ( return (
<div className='table-middle'> <div className='table-middle'>
<div className='leaderBox'> <div className='leaderBox'>
<div className='leader'> <div className='leader'>
<span className='itemLabel'>带班领导</span> <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>
<div className='secondLine'> <div className='secondLine'>
<span className='itemLabel'>二线人员</span> <span className='itemLabel'>二线人员</span>
<div className='itemList'> <div className='itemList'>
{ second && second.map(e => { { secondTier && secondTier.map(e => {
return (<div key={e.name + e.phone}> let postName = e.postName.replace('二线', '') + '岗';
<img src={ imgs[e.post] }/><span style={{color:'#05ddf9'}}>{e.post}</span>&emsp;&emsp; return (
{e.name} &emsp; { e.phone } <div>
</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> </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-header-split'>一线人员</Row>
<Row className='table-body-cotent firstPeople'> <Row className='table-body-cotent firstPeople'>
<Col className=''> <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 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={5}>岗位</Col>
<Col span={8}>{ selectTime }</Col> <Col span={11}>{arrange.startTime} - {arrange.endTime} </Col>
<Col span={7}>电话</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> <Col className='rightBtn' span={1}><img className='table-page-img' src="/src/assets/3dview/right.png" onClick={ () => this.rightClick() }/></Col>
</Row> </Row>
{ dataList && dataList.map((d,index) => { { dataList && dataList.map((d,index) => {
return ( return (
<Row className='table-header-row content' key={index}> <Row className='table-header-row content' key={index}>
<Col span={8}>{ d.post }</Col> <Col span={6}>{ d.postName }</Col>
<Col span={8}>{ d.name }</Col> <Col span={8}>{ d.dutyName }</Col>
<Col span={8}>{ d.phone }</Col> <Col span={10}>{ d.mobile }</Col>
</Row> </Row>
) )
}) } }) }
......
...@@ -7,7 +7,7 @@ import PilotController from 'amos-viz/lib/board/PilotController'; ...@@ -7,7 +7,7 @@ import PilotController from 'amos-viz/lib/board/PilotController';
import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts'; import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts';
// import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable'; // import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
import { Table } from 'amos-antd'; import { Table } from 'amos-antd';
import { BarCharts,LineCharts } from 'amos-core'; import { BarCharts, LineCharts } from 'amos-core';
// import { setPieOption,setLineOption } from './chartData'; // import { setPieOption,setLineOption } from './chartData';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import moment from 'moment'; import moment from 'moment';
...@@ -15,7 +15,8 @@ import { List } from 'amos-framework'; ...@@ -15,7 +15,8 @@ import { List } from 'amos-framework';
// import Three3dView from './View3D'; // import Three3dView from './View3D';
// import { eventTopics } from './consts'; // import { eventTopics } from './consts';
// import IndexChart from './indexChart'; // import IndexChart from './indexChart';
import { middleHeaderAction1 ,getporintAction} from '../../../../../services/3dService'; import { middleHeaderAction1, getporintAction } from '../../../../../services/3dService';
import { OverFlowText, Tooltip, Pagination } from 'amos-framework';
const chartStyle = { const chartStyle = {
width: '100%', height: '100%' width: '100%', height: '100%'
}; };
...@@ -25,28 +26,23 @@ const AmosConfig = endConf.AmosConfig; ...@@ -25,28 +26,23 @@ const AmosConfig = endConf.AmosConfig;
const enableScreenSaver = AmosConfig.screenSaverConf.enable; const enableScreenSaver = AmosConfig.screenSaverConf.enable;
const delayTime = AmosConfig.screenSaverConf.delayTime; const delayTime = AmosConfig.screenSaverConf.delayTime;
//const totalDatas = [1,2,3,4,5,6]; //const totalDatas = [1,2,3,4,5,6];
import { OverFlowText,Tooltip,Pagination } from 'amos-framework';
@eventConnect @eventConnect
class PatrolDetail extends Component { class PatrolDetail extends Component {
constructor(props) { constructor(props) {
debugger
super(props); super(props);
this.state = { this.state = {
pageData: [], pageData: [],
total: 0,//总页数 total: 0,//总页数
currentPage:1, currentPage: 1,
dataList1:[], dataList1: [],
}; };
} }
calcPageData = (page,dataList) => { calcPageData = (page, dataList) => {
debugger if (dataList) {
if(dataList){
const [currentPage, pageSize] = page.split('&'); // 当前页、每页大小 const [currentPage, pageSize] = page.split('&'); // 当前页、每页大小
const cp = currentPage.split('=')[1]; const cp = currentPage.split('=')[1];
const size = pageSize.split('=')[1]; const size = pageSize.split('=')[1];
...@@ -54,13 +50,13 @@ class PatrolDetail extends Component { ...@@ -54,13 +50,13 @@ class PatrolDetail extends Component {
// const {dataList1} = this.state; // const {dataList1} = this.state;
const start = (parseInt(cp) - 1) * parseInt(size); const start = (parseInt(cp) - 1) * parseInt(size);
const end = start + parseInt(size); const end = start + parseInt(size);
this.setState({ currentPage: cp}); this.setState({ currentPage: cp });
// const { dataList } = this.props; // const { dataList } = this.props;
// this.setState({ dataList1:dataList}); // this.setState({ dataList1:dataList});
middleHeaderAction1(start,size,dataList[1],dataList[0]).then(data => { middleHeaderAction1(start, size, dataList[1], dataList[0]).then(data => {
if(data!=null){ if (data != null) {
this.setState({ pageData: data.date, total: data.num}) this.setState({ pageData: data.date, total: data.num })
} }
}); });
} }
...@@ -68,24 +64,24 @@ class PatrolDetail extends Component { ...@@ -68,24 +64,24 @@ class PatrolDetail extends Component {
handlePageChange = (page) => { handlePageChange = (page) => {
const { dataList } = this.props; const { dataList } = this.props;
this.calcPageData(page,dataList); this.calcPageData(page, dataList);
} }
componentDidMount() { componentDidMount() {
const { dataList } = this.props; 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; const { dataList } = nextProps;
this.calcPageData('currentPage=1&pageSize=5',dataList); this.calcPageData('currentPage=1&pageSize=5', dataList);
} }
getOptions = (data) => { getOptions = (data) => {
let seriesData = [ let seriesData = [
{ value: data.passNum || 0, name:'正常' }, { value: data.passNum || 0, name: '正常' },
{ value: data.nopassNum || 0, name:'异常' }, { value: data.nopassNum || 0, name: '异常' },
{ value: data.overTime || 0, name:'漏检'} { value: data.overTime || 0, name: '漏检' }
]; ];
return { return {
// title : { // title : {
...@@ -101,19 +97,19 @@ class PatrolDetail extends Component { ...@@ -101,19 +97,19 @@ class PatrolDetail extends Component {
formatter: "{b}: {c} ({d}%)" formatter: "{b}: {c} ({d}%)"
}, },
color:['#58f2f4','#ff8000','#ff0000'], color: ['#58f2f4', '#ff8000', '#ff0000'],
series: [ series: [
{ {
name:'检查点', name: '检查点',
type:'pie', type: 'pie',
center:['50%','50%'],//饼图位置 center: ['50%', '50%'],//饼图位置
radius: ['50%', '70%'],//外半径,内半径 radius: ['50%', '70%'],//外半径,内半径
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'center', position: 'center',
formatter: function(param) { formatter: function (param) {
let total = 0; let total = 0;
seriesData.forEach(e => { seriesData.forEach(e => {
total += e.value; total += e.value;
...@@ -132,30 +128,21 @@ class PatrolDetail extends Component { ...@@ -132,30 +128,21 @@ class PatrolDetail extends Component {
show: false show: false
} }
}, },
data:seriesData data: seriesData
} }
] ]
}; };
} }
go3xq = (id,name,coordinates,floor) => { go3xq = (id, name, coordinates, floor) => {
debugger
getporintAction(id).then(data => { getporintAction(id).then(data => {
if(data!=null){ if (data != null) {
this.props.markerOnClick1(data.cstype,1,id,name,coordinates,floor,data.pointtype); this.props.markerOnClick1(data.cstype, 1, id, name, coordinates, floor, data.pointtype);
} }
}); });
}
}
getDate = () => { getDate = () => {
let currentDate = new Date(); let currentDate = new Date();
...@@ -166,9 +153,7 @@ go3xq = (id,name,coordinates,floor) => { ...@@ -166,9 +153,7 @@ go3xq = (id,name,coordinates,floor) => {
} }
render() { render() {
const { total ,pageData,currentPage} = this.state; const { total, pageData, currentPage } = this.state;
return ( return (
<div className="patrolDetailContent chart-content"> <div className="patrolDetailContent chart-content">
<div className='tieleBox'> <div className='tieleBox'>
...@@ -182,7 +167,7 @@ go3xq = (id,name,coordinates,floor) => { ...@@ -182,7 +167,7 @@ go3xq = (id,name,coordinates,floor) => {
<div className='contentBox'> <div className='contentBox'>
<div className='business patrolItem'> <div className='business patrolItem'>
<div className='list09'> <div className='list09'>
{ pageData.map(item => { {pageData.map(item => {
return ( return (
<div className="list1"> <div className="list1">
<div className="list2"> <div className="list2">
...@@ -197,27 +182,27 @@ go3xq = (id,name,coordinates,floor) => { ...@@ -197,27 +182,27 @@ go3xq = (id,name,coordinates,floor) => {
<div className="list4"> 未开始:{item.noStartNum}&#12288; 异常:{item.noPassNum} &#12288;正常:{item.passNum} &#12288;漏点:{item.overTimeNum}</div> <div className="list4"> 未开始:{item.noStartNum}&#12288; 异常:{item.noPassNum} &#12288;正常:{item.passNum} &#12288;漏点:{item.overTimeNum}</div>
<div className='clearfloat' > <div className='clearfloat' >
{item.pointReturn.map(f => { {item.pointReturn.map(f => {
if (f.isFinish==='0'){ if (f.isFinish === '0') {
return ( return (
<Tooltip className="item" title={ f.name } direction="up" align="middle"> <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> <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> </Tooltip>
); );
} else if(f.isFinish==='1'){ } else if (f.isFinish === '1') {
return ( return (
<Tooltip className="item" title={ f.name } direction="up" align="middle"> <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> <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> </Tooltip>
); );
} else if(f.isFinish==='2'){ } else if (f.isFinish === '2') {
return ( return (
<Tooltip className="item" title={ f.name } direction="up" align="middle"> <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> <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> </Tooltip>
); );
} else{ } else {
return <Tooltip className="item" title={ f.name } direction="up" align="middle"> 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> <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> </Tooltip>
} }
}) })
...@@ -228,7 +213,7 @@ go3xq = (id,name,coordinates,floor) => { ...@@ -228,7 +213,7 @@ go3xq = (id,name,coordinates,floor) => {
}) })
} }
</div> </div>
<div className='pagination' style={{marginTop:'15px',marginLeft:'20px'}} > <div className='pagination' style={{ marginTop: '15px', marginLeft: '20px' }} >
<Pagination <Pagination
currentPage={1} currentPage={1}
totalPageNum={total} totalPageNum={total}
......
...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; ...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Connect, Modal } from 'amos-framework'; import { Connect, Modal } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf'; import * as endConf from 'amos-processor/lib/config/endconf';
import ReactEcharts from 'amos-viz/lib/echarts'; 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 SysWsURL, { completeToken } from './../../../../../consts/wsUrlConsts';
import AmosWebSocket from 'amos-websocket'; import AmosWebSocket from 'amos-websocket';
import moment from 'moment'; import moment from 'moment';
...@@ -21,14 +21,14 @@ class TopCharts extends Component { ...@@ -21,14 +21,14 @@ class TopCharts extends Component {
super(props); super(props);
this.state = { this.state = {
data:{}, data: {},
currentCode: '', currentCode: '',
technologyDataname: '', technologyDataname: '',
serviceDataname: '', serviceDataname: '',
technologyData: {}, technologyData: {},
serviceData: {}, serviceData: {},
dataList: [], dataList: [],
xun:{} xun: {}
}; };
} }
...@@ -39,7 +39,7 @@ class TopCharts extends Component { ...@@ -39,7 +39,7 @@ class TopCharts extends Component {
componentWillReceiveProps = nextProps => { componentWillReceiveProps = nextProps => {
if (this.props.currentCode !== nextProps.currentCode) { if (this.props.currentCode !== nextProps.currentCode) {
console.log(nextProps.currentCode,'nextProps.currentCode') console.log(nextProps.currentCode, 'nextProps.currentCode')
const { currentCode, curCompanyId } = nextProps || {}; const { currentCode, curCompanyId } = nextProps || {};
this.state.currentCode = currentCode; this.state.currentCode = currentCode;
this.freshDataList(nextProps.curCompanyId); this.freshDataList(nextProps.curCompanyId);
...@@ -48,9 +48,8 @@ class TopCharts extends Component { ...@@ -48,9 +48,8 @@ class TopCharts extends Component {
} }
}; };
//巡检点统计 //巡检点统计
getxuncount(){ getxuncount() {
getxuncountAction().then(data => { getxuncountAction().then(data => {
this.setState({ this.setState({
xun: data xun: data
...@@ -58,9 +57,7 @@ class TopCharts extends Component { ...@@ -58,9 +57,7 @@ class TopCharts extends Component {
}); });
} }
freshDataList(companyId) {
freshDataList(companyId){
rightTopChartAction(companyId).then(data => { rightTopChartAction(companyId).then(data => {
this.setState({ this.setState({
dataList: data dataList: data
...@@ -68,13 +65,13 @@ class TopCharts extends Component { ...@@ -68,13 +65,13 @@ class TopCharts extends Component {
}); });
} }
getOptions = (data,title) => { getOptions = (data, title) => {
let seriesData = [ let seriesData = [
{ value: data.normal || 0, name:'正常' }, { value: data.normal || 0, name: '正常' },
{ value: data.abnormal || 0, name:'异常'}, { value: data.abnormal || 0, name: '异常' },
{ value: data.missedDetection || 0, name:'漏点' }, { value: data.missedDetection || 0, name: '漏点' },
{ value: data.notIncluded || 0, name:'未计划' }, { value: data.notIncluded || 0, name: '未计划' },
]; ];
return { return {
...@@ -85,37 +82,37 @@ class TopCharts extends Component { ...@@ -85,37 +82,37 @@ class TopCharts extends Component {
legend: { legend: {
orient: 'vertical', orient: 'vertical',
x: 'left', x: 'left',
top:'35%', top: '35%',
left:'10%', left: '10%',
itemWidth: 15, itemWidth: 17,
itemHeight: 10, itemHeight: 12,
itemGap: 10, itemGap: 10,
data:['正常','异常','漏点','未计划'], data: ['正常', '异常', '漏点', '未计划'],
formatter: function(name) { formatter: function (name) {
let curItem = seriesData.find( e => { let curItem = seriesData.find(e => {
return e.name === name; return e.name === name;
}) })
var content = name +':' + curItem.value; var content = name + ':' + curItem.value;
return content; return content;
}, },
textStyle: { textStyle: {
color: '#ffffff',//字体颜色 color: '#ffffff',//字体颜色
fontSize: 10 fontSize: 16
} }
}, },
color:['#88FF00','#FF9100','#FF0000','#D8D8D8'], color: ['#88FF00', '#FF9100', '#FF0000', '#D8D8D8'],
series: [ series: [
{ {
name:'检查点', name: '检查点',
type:'pie', type: 'pie',
center:['70%','60%'],//饼图位置 center: ['70%', '60%'],//饼图位置
radius: ['50%', '70%'],//外半径,内半径 radius: ['50%', '70%'],//外半径,内半径
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'center', position: 'center',
formatter: function(param) { formatter: function (param) {
let total = 0; let total = 0;
seriesData.forEach(e => { seriesData.forEach(e => {
total += e.value; total += e.value;
...@@ -124,7 +121,7 @@ class TopCharts extends Component { ...@@ -124,7 +121,7 @@ class TopCharts extends Component {
return view; return view;
}, },
textStyle: { textStyle: {
fontSize: 14, fontSize: 16,
color: '#D8D8D8' color: '#D8D8D8'
}, },
}, },
...@@ -134,18 +131,18 @@ class TopCharts extends Component { ...@@ -134,18 +131,18 @@ class TopCharts extends Component {
show: false show: false
} }
}, },
data:seriesData data: seriesData
} }
] ]
}; };
} }
getOptionsx = (data,title) => { getOptionsx = (data, title) => {
return { return {
backgroundColor:'rgba(23,90,201,0.9)', backgroundColor: 'rgba(23,90,201,0.9)',
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效 axisPointer: { // 坐标轴指示器,坐标轴触发有效
...@@ -156,15 +153,16 @@ class TopCharts extends Component { ...@@ -156,15 +153,16 @@ class TopCharts extends Component {
left: '2%', left: '2%',
right: '4%', right: '4%',
bottom: '14%', bottom: '14%',
top:'16%', top: '16%',
containLabel: true containLabel: true
}, },
legend: { legend: {
data: ['未开始', '进行中', '已结束','已超时'], data: ['未开始', '进行中', '已结束', '已超时'],
right: 10, right: 10,
top:12, top: 12,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
fontSize: 16
}, },
itemWidth: 12, itemWidth: 12,
itemHeight: 10, itemHeight: 10,
...@@ -172,21 +170,21 @@ class TopCharts extends Component { ...@@ -172,21 +170,21 @@ class TopCharts extends Component {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
triggerEvent :true, triggerEvent: true,
data: data.x, data: data.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white' color: 'white'
} }
}, },
axisLabel: { axisLabel: {
// interval: 0, // interval: 0,
// rotate: 40, // rotate: 40,
textStyle: { textStyle: {
fontFamily: 'Microsoft YaHei' fontFamily: 'Microsoft YaHei',
fontSize: 14
}
} }
},
}, },
yAxis: { yAxis: {
...@@ -212,11 +210,11 @@ class TopCharts extends Component { ...@@ -212,11 +210,11 @@ class TopCharts extends Component {
barWidth: '15%', barWidth: '15%',
itemStyle: { itemStyle: {
normal: { normal: {
color:'#02E3FC', color: '#02E3FC',
barBorderRadius: 11, barBorderRadius: 11
}, }
}, },
data:data.wks data: data.wks
}, },
{ {
name: '进行中', name: '进行中',
...@@ -224,11 +222,11 @@ class TopCharts extends Component { ...@@ -224,11 +222,11 @@ class TopCharts extends Component {
barWidth: '15%', barWidth: '15%',
itemStyle: { itemStyle: {
normal: { normal: {
color:'#00FF55', color: '#00FF55',
barBorderRadius: 11, barBorderRadius: 11
}, }
}, },
data:data.yxz data: data.yxz
}, },
{ {
name: '已结束', name: '已结束',
...@@ -236,12 +234,11 @@ class TopCharts extends Component { ...@@ -236,12 +234,11 @@ class TopCharts extends Component {
barWidth: '15%', barWidth: '15%',
itemStyle: { itemStyle: {
normal: { normal: {
color:'#FF8000', color: '#FF8000',
barBorderRadius: 11, barBorderRadius: 11
}
},
}, },
data:data.yjs data: data.yjs
}, },
{ {
name: '已超时', name: '已超时',
...@@ -249,59 +246,43 @@ class TopCharts extends Component { ...@@ -249,59 +246,43 @@ class TopCharts extends Component {
barWidth: '15%', barWidth: '15%',
itemStyle: { itemStyle: {
normal: { normal: {
color:'#FF0000', color: '#FF0000',
barBorderRadius: 11, barBorderRadius: 11
}
},
}, },
data:data.ycs data: data.ycs
}] }]
}; };
} }
onclick = { onclick = {
'click': this.clickEchartsPie.bind(this) 'click': this.clickEchartsPie.bind(this)
} }
clickEchartsPie(e) { clickEchartsPie(e) {
const { dataList } = this.state; const { dataList } = this.state;
let ff={} let ff = {}
isArray(dataList) && dataList.forEach(e => { isArray(dataList) && dataList.forEach(e => {
ff = e; ff = e;
}); });
if(e.hasOwnProperty("name")){ if (e.hasOwnProperty("name")) {
if(ff[ff[e.name]]>0){ if (ff[ff[e.name]] > 0) {
this.props.patrolDetailView(e.name, ff[e.name]);
this.props.patrolDetailView(e.name,ff[e.name]); } else {
}else{
message.danger('当前没有巡检计划'); message.danger('当前没有巡检计划');
} }
} else {
if (ff[ff[e.value]] > 0) {
}else{ this.props.patrolDetailView(e.value, ff[e.value]);
if(ff[ff[e.value]]>0){ } else {
this.props.patrolDetailView(e.value,ff[e.value]);
}else{
message.danger('当前没有巡检计划'); message.danger('当前没有巡检计划');
} }
} }
}
}
handleData = (data = {}) => { handleData = (data = {}) => {
//console.log('topChart ws data:', data); //console.log('topChart ws data:', data);
if (data === 'planTaskRefresh'){ if (data === 'planTaskRefresh') {
this.getxuncount(); this.getxuncount();
this.freshDataList(this.props.curCompanyId); this.freshDataList(this.props.curCompanyId);
} else { } else {
...@@ -314,21 +295,16 @@ clickEchartsPie(e) { ...@@ -314,21 +295,16 @@ clickEchartsPie(e) {
const { data, dataList } = this.state; const { data, dataList } = this.state;
const wsURL = completeToken(SysWsURL.topChartws); const wsURL = completeToken(SysWsURL.topChartws);
const planTaskWsURL = completeToken(SysWsURL.planTaskURI); 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'); //console.log(dataList,'topchartDataList');
isArray(dataList) && dataList.forEach(e => { isArray(dataList) && dataList.forEach(e => {
technologyData = e; technologyData = e;
}); });
return ( return (
<div className='left-chart-top'> <div className='left-chart-top'>
<div className='left-chart-child-patrol'>
<ReactEcharts option={this.getOptionsx(technologyData, null)} eventpool={this.onclick} />
<div className='left-chart-child'>
<ReactEcharts option = { this.getOptionsx(technologyData, null) } eventpool={this.onclick}/>
</div> </div>
<div className='left-chart-child'> <div className='left-chart-child'>
<div className='title'> <div className='title'>
...@@ -336,8 +312,9 @@ clickEchartsPie(e) { ...@@ -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 className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
巡检点状态统计</span> 巡检点状态统计</span>
</div> </div>
<ReactEcharts option = { this.getOptions(xun,"") } className='child-pie'/> <div className='left-chart-echars'>
<ReactEcharts option={this.getOptions(xun, "")} className='child-pie' />
</div>
</div> </div>
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> <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 /> <AmosWebSocket ref={node => this.aws = node} url={planTaskWsURL} onMessage={this.handleData} reconnect debug />
......
...@@ -20,7 +20,7 @@ class RightCharts extends Component { ...@@ -20,7 +20,7 @@ class RightCharts extends Component {
}; };
} }
componentDidMount() {} componentDidMount() { }
componentWillUnmount() { componentWillUnmount() {
} }
...@@ -34,13 +34,13 @@ class RightCharts extends Component { ...@@ -34,13 +34,13 @@ class RightCharts extends Component {
return ( return (
<div className="chart-content"> <div className="chart-content">
{ {
chartsViewFlag === 'patrolMsg'?<div className='patrolMsg'> chartsViewFlag === 'patrolMsg' ? <div className='patrolMsg'>
<div className='point'> <div className='point'>
<div className='title'> <div className='title'>
<span className='titleLeft'> <span className='titleLeft'>
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span> <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
今日巡检计划执行情况</span> 今日巡检计划执行情况</span>
<span className='titleRight'>{ now }</span> <span className='titleRight'>{now}</span>
</div> </div>
<div className='chartBody'> <div className='chartBody'>
<TopChart curCompanyId={this.props.currentCode} currentCode={this.props.currentCode} patrolDetailView={this.props.patrolDetailView} /> <TopChart curCompanyId={this.props.currentCode} currentCode={this.props.currentCode} patrolDetailView={this.props.patrolDetailView} />
...@@ -51,27 +51,27 @@ class RightCharts extends Component { ...@@ -51,27 +51,27 @@ class RightCharts extends Component {
<span className='titleLeft'> <span className='titleLeft'>
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span> <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
值班信息</span> 值班信息</span>
<span className='titleRight'>{ now }</span> <span className='titleRight'>{now}</span>
</div> </div>
<div className='chartBody'> <div className='chartBody'>
<MiddleTable/> <MiddleTable />
</div> </div>
</div> </div>
</div>:'' </div> : ''
} }
{ {
chartsViewFlag === 'applyMsg'?<div className='business'> chartsViewFlag === 'applyMsg' ? <div className='business'>
<div className='title'> <div className='title'>
<span className='titleLeft'> <span className='titleLeft'>
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span> <span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
支付业务累计数据</span> 支付业务累计数据</span>
<span className='titleRight'>{ now }</span> <span className='titleRight'>{now}</span>
</div> </div>
<div className='chartBody'> <div className='chartBody'>
<BottomTable orgCode={this.props.currentCode}/> <BottomTable orgCode={this.props.currentCode} />
</div> </div>
</div>:'' </div> : ''
} }
</div> </div>
); );
......
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;
...@@ -25,10 +25,11 @@ import { getAlarms } from 'SERVICES/alarmService'; ...@@ -25,10 +25,11 @@ import { getAlarms } from 'SERVICES/alarmService';
import { Store, utils } from 'amos-tool'; import { Store, utils } from 'amos-tool';
import * as endConf from 'amos-processor/lib/config/endconf'; import * as endConf from 'amos-processor/lib/config/endconf';
import { isArray } from 'amos-pluggable/lib/_utils'; import { isArray } from 'amos-pluggable/lib/_utils';
import { calcCoorArrUtil } from 'UTILS/CalcCoorArrUtil'; import { calcCoorArrUtil, text2Speech } from 'UTILS/CalcCoorArrUtil';
import { insertDistrict } from './common/mapUtils'; import { insertDistrict } from './common/mapUtils';
import { getDictionaryList } from './../../../services/securityService'; import { getDictionaryList } from './../../../services/securityService';
import { fetchJsonAction } from './../../../services/3dService'; import { fetchJsonAction } from './../../../services/3dService';
import { setOrgCode } from './../../../utils/request';
import TwinkleDiv from './map/TwinkleDiv'; import TwinkleDiv from './map/TwinkleDiv';
import mqtt from 'mqtt'; import mqtt from 'mqtt';
const AmosConfig = endConf.AmosConfig; const AmosConfig = endConf.AmosConfig;
...@@ -49,18 +50,20 @@ const mapConfig = { ...@@ -49,18 +50,20 @@ const mapConfig = {
features: ['bg', 'road', 'point'] //隐藏默认楼块 features: ['bg', 'road', 'point'] //隐藏默认楼块
}; };
const options = { const options = {
//默认 30 * 1000毫秒,收到 CONNACK 之前等待的时间,即连接超时时间。 //默认 30 * 1000毫秒,收到 CONNACK 之前等待的时间,即连接超时时间。
connectTimeout: 40000, connectTimeout: 40000,
// 客户端 ID,随机生成 // 客户端 ID,随机生成
clientId: 'bank_mqtt' + Math.random().toString(16).substr(2, 8), clientId:
'bank_mqtt' +
Math.random()
.toString(16)
.substr(2, 8),
clean: true, clean: true,
//默认 1000 毫秒,两次重新连接之间的间隔,客户端 ID 重复、认证失败等客户端会重新连接; //默认 1000 毫秒,两次重新连接之间的间隔,客户端 ID 重复、认证失败等客户端会重新连接;
reconnectPeriod: 1000 * 50 reconnectPeriod: 1000 * 50
} };
let client = mqtt.connect(mqttURI, options) let client = mqtt.connect(mqttURI, options);
const layers = [ const layers = [
new AMap.TileLayer({ new AMap.TileLayer({
...@@ -69,7 +72,7 @@ const layers = [ ...@@ -69,7 +72,7 @@ const layers = [
}, },
zIndex: 0 zIndex: 0
}) })
] ];
const twoDimensionalMapConfig = { const twoDimensionalMapConfig = {
zooms: [_showZoom[0], _showZoom[2]], zooms: [_showZoom[0], _showZoom[2]],
...@@ -108,8 +111,9 @@ class IndexMap extends Component { ...@@ -108,8 +111,9 @@ class IndexMap extends Component {
currentCard: 1, currentCard: 1,
currentCss: 1, currentCss: 1,
chartsViewFlag: [], chartsViewFlag: [],
type: 'small',//当前图层展示的末端marker标识 type: 'small', //当前图层展示的末端marker标识
styleCss: {//末端marker样式 styleCss: {
//末端marker样式
background: `url('/src/assets/sy/afterbody.png')`, background: `url('/src/assets/sy/afterbody.png')`,
backgroundSize: 'contain', backgroundSize: 'contain',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
...@@ -121,15 +125,17 @@ class IndexMap extends Component { ...@@ -121,15 +125,17 @@ class IndexMap extends Component {
lineHeight: '40px' lineHeight: '40px'
}, },
dotTipNum: 0, dotTipNum: 0,
pmdList: [],//跑马灯集合 pmdList: [], //跑马灯集合
isVoice: false, //控制语音播报渲染刷新页面不触发,仅接收消息触发
voiceList: [], //语音播报集合
xianVisible: false, xianVisible: false,
xianyangVisible: false, xianyangVisible: false,
xianAisleList: [],//西安通道集合 xianAisleList: [], //西安通道集合
xianyangAisleList: [],//咸阳通道集合 xianyangAisleList: [], //咸阳通道集合
centerList: [],//中心点集合 centerList: [], //中心点集合
bankInfoList: [], bankInfoList: [],
isEncircleShow: false,//是否环绕显示 isEncircleShow: false, //是否环绕显示
isOnClickCity: false//是否点击的城市 isOnClickCity: false //是否点击的城市
}; };
} }
...@@ -142,14 +148,15 @@ class IndexMap extends Component { ...@@ -142,14 +148,15 @@ class IndexMap extends Component {
this.receivcemqtt(); this.receivcemqtt();
} }
//mqtt接收可删除
receivcemqtt = () => { receivcemqtt = () => {
client.on('connect', (e) => { client.on('connect', e => {
console.log("连接成功!!!") console.log('连接成功!!!');
//QoS0,最多一次送达。也就是发出去就fire掉,没有后面的事情了。 //QoS0,最多一次送达。也就是发出去就fire掉,没有后面的事情了。
// QoS1,至少一次送达。发出去之后必须等待ack,没有ack,就要找时机重发 // QoS1,至少一次送达。发出去之后必须等待ack,没有ack,就要找时机重发
// QoS2,准确一次送达。消息id将拥有一个简单的生命周期。 // QoS2,准确一次送达。消息id将拥有一个简单的生命周期。
// client.subscribe('bank/equipment/ping', { qos: 1 }, (res) => { // 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) { if (!res) {
console.log('订阅成功'); console.log('订阅成功');
// fetchJsonAction('/src/_mock/map/eqp.json', (data) => { // fetchJsonAction('/src/_mock/map/eqp.json', (data) => {
...@@ -159,7 +166,7 @@ class IndexMap extends Component { ...@@ -159,7 +166,7 @@ class IndexMap extends Component {
// this.initBankInfoList(null, eqpId, status); // this.initBankInfoList(null, eqpId, status);
// }); // });
} else { } else {
console.log('订阅失败') console.log('订阅失败');
} }
}); });
...@@ -171,19 +178,19 @@ class IndexMap extends Component { ...@@ -171,19 +178,19 @@ class IndexMap extends Component {
let metricJson = JSON.parse(data.metricDatas[0].metricJson); let metricJson = JSON.parse(data.metricDatas[0].metricJson);
let eqpId = data.metricDatas[0].eqpId; let eqpId = data.metricDatas[0].eqpId;
let status = metricJson.communication === '正常' ? 0 : 1; let status = metricJson.communication === '正常' ? 0 : 1;
this.initBankInfoList(null, eqpId, status); //this.initBankInfoList(null, eqpId, status);
}); });
// 断开发起重连 // 断开发起重连
client.on('reconnect', (error) => { client.on('reconnect', error => {
console.log('正在重连:', error) console.log('正在重连:', error);
}); });
// 链接异常处理 // 链接异常处理
client.on('error', (error) => { client.on('error', error => {
console.log('连接失败:', error) console.log('连接失败:', error);
}); });
}); });
} };
/** /**
* 初始化登录用户权限 * 初始化登录用户权限
*/ */
...@@ -201,15 +208,15 @@ class IndexMap extends Component { ...@@ -201,15 +208,15 @@ class IndexMap extends Component {
currentCard: 1 currentCard: 1
}); });
lsTool.write('orgCode', orgCode); setOrgCode(orgCode);
} };
/** /**
* 查询银行经纬度列表 * 查询银行经纬度列表
*/ */
getBankInfoList = () => { getBankInfoList = () => {
let { bankInfoList } = this.state; let { bankInfoList } = this.state;
getBankInfoListData().then((data) => { getBankInfoListData().then(data => {
if (data) { if (data) {
data.centerList.map(e => { data.centerList.map(e => {
bankInfoList.push(e); bankInfoList.push(e);
...@@ -223,7 +230,7 @@ class IndexMap extends Component { ...@@ -223,7 +230,7 @@ class IndexMap extends Component {
}); });
} }
}); });
} };
/** /**
* 初始化数据,判断权限 * 初始化数据,判断权限
...@@ -244,23 +251,23 @@ class IndexMap extends Component { ...@@ -244,23 +251,23 @@ class IndexMap extends Component {
/** /**
* 查询通道信息及状态 * 查询通道信息及状态
*/ */
queryAisleList = (city) => { queryAisleList = city => {
if (city === '西安') { if (city === '西安') {
queryAisleDataByCity(city).then((data) => { queryAisleDataByCity(city).then(data => {
let temp = this.isExist(xaMapData, data); let temp = this.isExist(xaMapData, data);
this.setState({ this.setState({
xianAisleList: temp xianAisleList: temp
}); });
}); });
} else { } else {
queryAisleDataByCity(city).then((data) => { queryAisleDataByCity(city).then(data => {
let temp = this.isExist(xyMapData, data); let temp = this.isExist(xyMapData, data);
this.setState({ this.setState({
xianyangAisleList: temp xianyangAisleList: temp
}); });
}); });
} }
} };
/** /**
* 重构数据,增加alarmState字段,渲染不同曲线颜色 * 重构数据,增加alarmState字段,渲染不同曲线颜色
...@@ -283,7 +290,7 @@ class IndexMap extends Component { ...@@ -283,7 +290,7 @@ class IndexMap extends Component {
} }
}); });
return mapData; return mapData;
} };
/** /**
* 经纬度获取坐标曲线 * 经纬度获取坐标曲线
...@@ -294,7 +301,7 @@ class IndexMap extends Component { ...@@ -294,7 +301,7 @@ class IndexMap extends Component {
*/ */
calcCoorArr = (point_start, point_end, num, key) => { calcCoorArr = (point_start, point_end, num, key) => {
return calcCoorArrUtil(point_start, point_end, num, key); return calcCoorArrUtil(point_start, point_end, num, key);
} };
/** /**
* 监听图层 * 监听图层
...@@ -304,7 +311,7 @@ class IndexMap extends Component { ...@@ -304,7 +311,7 @@ class IndexMap extends Component {
window.map.on('zoomchange', () => { window.map.on('zoomchange', () => {
thisMap.setStyleC(window.map.getZoom()); thisMap.setStyleC(window.map.getZoom());
}); });
} };
/** /**
* 根据传入的名称查询匹配orgCode * 根据传入的名称查询匹配orgCode
...@@ -335,19 +342,19 @@ class IndexMap extends Component { ...@@ -335,19 +342,19 @@ class IndexMap extends Component {
// } // }
// } // }
getCompanyId = (jsonObjDep) => { getCompanyId = jsonObjDep => {
if (jsonObjDep && jsonObjDep !== null) { if (jsonObjDep && jsonObjDep !== null) {
let companyId = jsonObjDep.companySeq; let companyId = jsonObjDep.companySeq;
return companyId; return companyId;
} }
} };
/** /**
* 点 * 点
*/ */
markerEvents = { markerEvents = {
click: (e) => { click: e => {
let map = { 'is3DPage': true, 'city': e.target.F.extData.city }; let map = { is3DPage: true, city: e.target.F.extData.city };
//this.props.indexViewChange(map); //this.props.indexViewChange(map);
} }
}; };
...@@ -361,15 +368,16 @@ class IndexMap extends Component { ...@@ -361,15 +368,16 @@ class IndexMap extends Component {
* 线 * 线
*/ */
lineEvents = { lineEvents = {
click: (e) => { click: e => {
let line = e.target.F.extData; let line = e.target.F.extData;
let pointData = { citys: line.name }; let pointData = { citys: line.name };
setTimeout(()=> {//设置延时判断点击的线还是点 setTimeout(() => {
//设置延时判断点击的线还是点
let { isOnClickCity } = this.state; let { isOnClickCity } = this.state;
if (isOnClickCity === false && line.name[0] === '西安') { if (isOnClickCity === false && line.name[0] === '西安') {
browserHistory.push({ pathname: '/biz/defaultRoute', state: { cityLine: JSON.stringify(pointData) } }); browserHistory.push({ pathname: '/biz/defaultRoute', state: { cityLine: JSON.stringify(pointData) } });
} }
},500); }, 500);
} }
}; };
...@@ -384,7 +392,7 @@ class IndexMap extends Component { ...@@ -384,7 +392,7 @@ class IndexMap extends Component {
} }
}); });
return orgCode; return orgCode;
} };
/** /**
* 根据城市的orgCode,返回城市名称 * 根据城市的orgCode,返回城市名称
...@@ -395,11 +403,9 @@ class IndexMap extends Component { ...@@ -395,11 +403,9 @@ class IndexMap extends Component {
if (item.dictDataValue === orgCode) { if (item.dictDataValue === orgCode) {
city = item.dictDataKey; city = item.dictDataKey;
} }
}) });
return city; return city;
} };
/** /**
* 切换城市 * 切换城市
...@@ -478,14 +484,14 @@ class IndexMap extends Component { ...@@ -478,14 +484,14 @@ class IndexMap extends Component {
} else { } else {
message.danger('当前没有巡检计划'); message.danger('当前没有巡检计划');
} }
} };
closePatrol = () => { closePatrol = () => {
this.setState({ this.setState({
patrolView: false patrolView: false
}); });
} };
chartsView = (itemKey) => { chartsView = itemKey => {
if (itemKey.length < 1 || itemKey[0] === 'dangerMsg' || itemKey[0] === 'applyMsg') { if (itemKey.length < 1 || itemKey[0] === 'dangerMsg' || itemKey[0] === 'applyMsg') {
this.setState({ this.setState({
chartsViewFlag: itemKey, chartsViewFlag: itemKey,
...@@ -496,12 +502,12 @@ class IndexMap extends Component { ...@@ -496,12 +502,12 @@ class IndexMap extends Component {
chartsViewFlag: itemKey chartsViewFlag: itemKey
}); });
} }
} };
/** /**
* 不同图层渲染图标大小 * 不同图层渲染图标大小
*/ */
setStyleC = (zoom) => { setStyleC = zoom => {
if (zoom >= 8) { if (zoom >= 8) {
this.setState({ this.setState({
type: 'middle', type: 'middle',
...@@ -526,7 +532,7 @@ class IndexMap extends Component { ...@@ -526,7 +532,7 @@ class IndexMap extends Component {
} }
}); });
} }
} };
/** /**
* 13层以上设置地名环绕 * 13层以上设置地名环绕
...@@ -535,12 +541,12 @@ class IndexMap extends Component { ...@@ -535,12 +541,12 @@ class IndexMap extends Component {
this.setState({ this.setState({
isEncircleShow: true isEncircleShow: true
}); });
} };
/** /**
* 通道末端marker点 * 通道末端marker点
*/ */
setBodyMarker = (bankInfoList) => { setBodyMarker = bankInfoList => {
let { styleCss, type, isEncircleShow } = this.state; let { styleCss, type, isEncircleShow } = this.state;
if (isEncircleShow) { if (isEncircleShow) {
// return xaMapData.map((item, index) => { // return xaMapData.map((item, index) => {
...@@ -554,14 +560,23 @@ class IndexMap extends Component { ...@@ -554,14 +560,23 @@ class IndexMap extends Component {
// } // }
// }); // });
return bankInfoList.map((item, index) => { 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') { if (
return (<Marker zIndex={19} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents}> item.eName !== 'xian' &&
<div className={`after_line_${type} line${item.id}`} style={styleCss} ></div> 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`}> <div className={`after_circle_title`}>
<span>{item.aName}</span> <span>{item.aName}</span>
{ item.status === 1 && <div className={`pulse-spread-circle`} /> } {item.status === 1 && <div className={`pulse-spread-circle`} />}
</div> </div>
</Marker>) </Marker>
);
} }
}); });
} else { } else {
...@@ -577,170 +592,355 @@ class IndexMap extends Component { ...@@ -577,170 +592,355 @@ class IndexMap extends Component {
// } // }
// }); // });
return bankInfoList.map((item, index) => { 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') { if (
return (<Marker zIndex={19} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents}> item.eName !== 'xian' &&
<div className={`after_line_${type} line${item.id}`} style={styleCss} ></div> 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}`}> {/*<div className={`after_circle_${type} title${item.id}`}>
<img src={item.imgSrc} ></img> <img src={item.imgSrc} ></img>
<span>{item.alias}</span> <span>{item.alias}</span>
</div>*/} </div>*/}
</Marker>); </Marker>
);
} }
}); });
} }
} };
/** /**
*设置中心点的marker点 *设置中心点的marker点
* *
* @memberof IndexMap * @memberof IndexMap
*/ */
setCenterMarker = (centerList) => { setCenterMarker = centerList => {
let { isEncircleShow, xianVisible, xianyangVisible } = this.state; let { isEncircleShow, xianVisible, xianyangVisible } = this.state;
if (isEncircleShow) { if (isEncircleShow) {
return centerList.map((item, index) => { return centerList.map((item, index) => {
if (item) { 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`}> <div className={`after_circle_title_center`}>
<span onClick={() => { this.markerOnClick(item.eName) }}>{item.aName}</span> <span
{item.eName === 'xian' && xianVisible && <div className="pulse-spread-xian" /> } onClick={() => {
{item.eName === 'xianyang' && xianyangVisible && <div className="pulse-spread-xianyang" /> } 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>
<div className={`after_circle_center`}> <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> </div>
</Marker>); </Marker>
);
} }
}); });
} else { } else {
return centerList.map((item, index) => { return centerList.map((item, index) => {
if (item) { 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`}> <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> </div>
</Marker>); </Marker>
);
} }
}); });
} }
} };
/** /**
* 根据状态匹配不同通道颜色 * 根据状态匹配不同通道颜色
* @param {} alarmState * @param {} alarmState
*/ */
setSelectAisleStyle = (alarmState) => { setSelectAisleStyle = alarmState => {
switch (alarmState) { switch (alarmState) {
case '正常': case '正常':
return this.state.selectStyle; return this.state.selectStyle;
case '异常': case '异常':
return this.setSelectColor(4); return this.setSelectColor(4);
} }
} };
setUnSelectAisleStyle = (alarmState) => { setUnSelectAisleStyle = alarmState => {
switch (alarmState) { switch (alarmState) {
case '正常': case '正常':
return this.state.unSelectStyle; return this.state.unSelectStyle;
case '异常': case '异常':
return this.setUnSelectColor(4); return this.setUnSelectColor(4);
} }
} };
setSelectColor = (index) => { setSelectColor = index => {
let colorStyle = { strokeColor: LineColors[index], fillColor: LineColors[index], strokeWeight: '3' }; let colorStyle = { strokeColor: LineColors[index], fillColor: LineColors[index], strokeWeight: '3' };
return colorStyle; return colorStyle;
} };
setUnSelectColor = (index) => { setUnSelectColor = index => {
let colorStyle = { strokeColor: LineColors[index], fillColor: LineColors[index], strokeWeight: '1' }; let colorStyle = { strokeColor: LineColors[index], fillColor: LineColors[index], strokeWeight: '1' };
return colorStyle; return colorStyle;
} };
/** /**
* 点击名称切换三维 * 点击名称切换三维
*/ */
markerOnClick = (city) => { markerOnClick = (city, sourceIdStr) => {
// let { orgCode } = this.getOrgCode(city, this.state.companys); //跳转告警页面
if (city === 'xian' || city === 'xianyang' || city === 'xidajie'){ if (city !== 'xian' && city !== 'xianyang' && city !== 'xidajie') {
this.state.isOnClickCity=true; 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 dictionaryList = lsTool.read('dictionaryList');
let dicCodeList = JSON.parse(dictionaryList); let dicCodeList = JSON.parse(dictionaryList);
let orgCode = this.getSelectOrgCode(city, dicCodeList);
let selectedCompanyOrg = lsTool.read('selectedCompanyOrg');
let companyName = this.getSelectCityByOrgCode(selectedCompanyOrg, dicCodeList); let companyName = this.getSelectCityByOrgCode(selectedCompanyOrg, dicCodeList);
let map = null; let map = null;
if (companyName && companyName.indexOf("清算中心") !== -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 { } else {
//如果不是西安CCPC,orgCode为空 map = { is3DPage: true, city: '', orgCode: '' };
map = { 'is3DPage': true, 'city': 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: '' };
}
this.props.indexViewChange(map);
};
markerOnClick1 = (city,flag,id, pointName,pointAttrs,floor,pointtype) => { markerOnClick1 = (city, flag, id, pointName, pointAttrs, floor, pointtype) => {
// let { orgCode } = this.getOrgCode(city, this.state.companys); this.state.isOnClickCity = true;
let selectedCompanyOrg = lsTool.read('selectedCompanyOrg');
let dictionaryList = lsTool.read('dictionaryList'); let dictionaryList = lsTool.read('dictionaryList');
let dicCodeList = JSON.parse(dictionaryList); let dicCodeList = JSON.parse(dictionaryList);
let orgCode = this.getSelectOrgCode(city,dicCodeList);
// let selectedCompany = lsTool.read('selectedCompany');
let selectedCompanyOrg = lsTool.read('selectedCompanyOrg');
let companyName = this.getSelectCityByOrgCode(selectedCompanyOrg, dicCodeList); let companyName = this.getSelectCityByOrgCode(selectedCompanyOrg, dicCodeList);
let map = null; let map = null;
if (companyName.indexOf("清算中心")!==-1){
map = { 'is3DPage': true, 'city': city, 'orgCode': orgCode ,'flag':flag,'pid':id,'pointName':pointName,'pointAttrs':pointAttrs,'floor':floor,'pointtype':pointtype}; 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 {
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);
}
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 { } else {
//如果不是西安CCPC,orgCode为空 map = { is3DPage: true, city: '', orgCode: '', flag: flag, pid: id, pointName: pointName, pointAttrs: pointAttrs, floor: floor, pointtype: pointtype };
map = { 'is3DPage': true, 'city': city, 'orgCode': '','flag':flag ,'pid':id,'pointName':pointName,'pointAttrs':pointAttrs,'floor':floor,'pointtype':pointtype};
} }
this.props.indexViewChange(map); this.props.indexViewChange(map);
} };
dotTipNumChange = (num) => { dotTipNumChange = num => {
if (num !== this.state.dotTipNum) { if (num !== this.state.dotTipNum) {
this.setState({ this.setState({
dotTipNum: num 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;
};
/**
* 初始化告警数据 //处理告警数据
*/ handleAlarmData = () => {
queeryAlarms = () => { getAlarms().then(data => {
this.processingAlarmData(data);
});
}
//过滤告警列表
processingAlarmData = data => {
let { orgCode, pmdList } = this.state;
if (orgCode !== '') {
let dictionaryList = lsTool.read('dictionaryList'); let dictionaryList = lsTool.read('dictionaryList');
let dicCodeList = JSON.parse(dictionaryList); let dicCodeList = JSON.parse(dictionaryList);
let xianCode = this.getSelectOrgCode('xian', dicCodeList); let xianCode = this.getSelectOrgCode('xian', dicCodeList);
let xianyangCode = this.getSelectOrgCode('xianyang', 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(newData) && utils.isArray(newData)) {
if (!utils.isEmpty(data) && utils.isArray(data)) { const xianFlag = newData.some(e => {
const xianFlag = data.some(e => {
// if (e.code === xianCode) { // 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; return true;
} }
}); });
const xianyangFlag = data.some(e => { const xianyangFlag = newData.some(e => {
if (e.code.startsWith(xianyangCode) || e.authOrg && e.authOrg.indexOf(xianyangCode) !== -1) { 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; return true;
} }
}); });
this.compareAlarms(pmdList, newData);
this.setState({ this.setState({
pmdList: data, pmdList: newData,
xianVisible: xianFlag, xianVisible: xianFlag,
xianyangVisible: xianyangFlag xianyangVisible: xianyangFlag
}); });
this.initBankInfoList('xian', null, xianFlag); this.initBankInfoList('xian', null, xianFlag);
this.initBankInfoList('xianyang', null, xianyangFlag); 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);
}
} }
/** /**
...@@ -751,7 +951,7 @@ class IndexMap extends Component { ...@@ -751,7 +951,7 @@ class IndexMap extends Component {
initBankInfoList = (city, eqpId, status) => { initBankInfoList = (city, eqpId, status) => {
let { bankInfoList } = this.state; let { bankInfoList } = this.state;
bankInfoList.forEach(bankInfo => { bankInfoList.forEach(bankInfo => {
if (eqpId && bankInfo.sourceId === eqpId) { if (eqpId && bankInfo.sourceIdStr && bankInfo.sourceIdStr.indexOf(eqpId) >= 0) {
bankInfo.status = status; bankInfo.status = status;
} else if (city && bankInfo.eName === city) { } else if (city && bankInfo.eName === city) {
status = status ? 1 : 0; status = status ? 1 : 0;
...@@ -761,51 +961,24 @@ class IndexMap extends Component { ...@@ -761,51 +961,24 @@ class IndexMap extends Component {
this.setState({ this.setState({
bankInfoList bankInfoList
}); });
} };
/** /**
* webSocket接收轨迹数据 * webSocket接收数据
*/ */
handleData = (data) => { handleData = data => {
let dictionaryList = lsTool.read('dictionaryList'); this.setState({ isVoice: true });
let dicCodeList = JSON.parse(dictionaryList); this.handleAlarmData();
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 => {
//item.authOrg && item.authOrg.indexOf(xianCode)!==-1
if (e.code && e.code.indexOf(xianCode)!==-1) {
return true;
}
});
const xianyangFlag = data.some(e => {
//xianyangCode
if (e.code && e.code.indexOf(xianyangCode)!==-1) {
return true;
}
});
handleXianFlag = xianFlag;
handleXianyangFlag = xianyangFlag;
}
this.initBankInfoList('xian', null, handleXianFlag);
this.initBankInfoList('xianyang', null, handleXianyangFlag);
this.setState({
pmdList: data,
xianVisible: handleXianFlag,
xianyangVisible: handleXianyangFlag
});
}
/** /**
* webSocket接收通道状态数据 * webSocket接收通道状态数据
*/ */
aisleIndexHandleData = (data) => { aisleIndexHandleData = data => {
//data = data.index; //data = data.index;
console.log('aisleWS', data); console.log('aisleWS', data);
if (data) { if (data) {
this.initBankInfoList(null, data.eqpId, data.status);
this.queryAisleList('西安'); this.queryAisleList('西安');
this.queryAisleList('咸阳'); this.queryAisleList('咸阳');
// const flag = data.some(e => { // const flag = data.some(e => {
...@@ -825,14 +998,37 @@ class IndexMap extends Component { ...@@ -825,14 +998,37 @@ class IndexMap extends Component {
// }); // });
// } // }
} }
} };
render() { render() {
const events = { const events = {
created: this.setInstanceToGlobal created: this.setInstanceToGlobal
}; };
let { mapCenter, isIndexMap, patrolView, patrolDescData, city, selectStyle, unSelectStyle, orgCode, sequenceNbr, companys, currentCard, currentCss, let {
chartsViewFlag, dotTipNum, pmdList, xianVisible, xianyangVisible, xianAisleList, xianyangAisleList, centerList, isEncircleShow, bankInfoList, styleCss } = this.state; 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 cardCss1 = 'small-card-css';
let cardCss2 = 'small-card-css'; let cardCss2 = 'small-card-css';
// 旧版点击样式,正式上线前需删除 // 旧版点击样式,正式上线前需删除
...@@ -868,10 +1064,10 @@ class IndexMap extends Component { ...@@ -868,10 +1064,10 @@ class IndexMap extends Component {
return ( return (
<div className="content indexPage"> <div className="content indexPage">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} 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 /> <AmosWebSocket ref={node => (this.aws = node)} url={aisleURL} onMessage={this.aisleIndexHandleData} reconnect debug />
<AlarmMarquee pmdList={pmdList} /> <AlarmMarquee pmdList={pmdList} />
<div className='body-left'> <div className="body-left">
{/**<div className='body-left' style={{ display: chartsViewFlag[0] === 'dangerMsg' ? 'block' : 'none' }}>**/} {/**<div className='body-left' style={{ display: chartsViewFlag[0] === 'dangerMsg' ? 'block' : 'none' }}>**/}
{/**<div><img src='/src/assets/sy/indexLeft.png' /></div>*/} {/**<div><img src='/src/assets/sy/indexLeft.png' /></div>*/}
<LeftCharts currentCode={orgCode} dotTipNumChange={this.dotTipNumChange} /> <LeftCharts currentCode={orgCode} dotTipNumChange={this.dotTipNumChange} />
...@@ -889,9 +1085,14 @@ class IndexMap extends Component { ...@@ -889,9 +1085,14 @@ class IndexMap extends Component {
</div> </div>
</Col> </Col>
</div>*/} </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} /> <img src={currentCss === 1 ? newTrackUnSelect : newTrackSelect} />
</div> </div> */}
{/* <div className="middle"> {/* <div className="middle">
<div className={`${fwCss}`} onClick={() => { this.showIndexMap(1) }}> <div className={`${fwCss}`} onClick={() => { this.showIndexMap(1) }}>
<img src={currentCss === 1 ? fwSelectImg : fwUnSelectImg} /> <img src={currentCss === 1 ? fwSelectImg : fwUnSelectImg} />
...@@ -903,7 +1104,7 @@ class IndexMap extends Component { ...@@ -903,7 +1104,7 @@ class IndexMap extends Component {
</div> </div>
{currentCss === 1 && <LeftDown></LeftDown>} {currentCss === 1 && <LeftDown></LeftDown>}
{isIndexMap ? ( {isIndexMap ? (
<div className='body-center'> <div className="body-center">
<BaseMap events={events} center={mapCenter} {...mapConfig}> <BaseMap events={events} center={mapCenter} {...mapConfig}>
{/* 三个可点击的中心点(西安|咸阳|西大街) */} {/* 三个可点击的中心点(西安|咸阳|西大街) */}
{/* {(centerList || []).map((item, index) => ( {/* {(centerList || []).map((item, index) => (
...@@ -956,16 +1157,23 @@ class IndexMap extends Component { ...@@ -956,16 +1157,23 @@ class IndexMap extends Component {
} }
</Marker> </Marker>
))}*/} ))}*/}
{(bankInfoList || []).map((item) => ( {(bankInfoList || []).map(item => (
<Marker key={item.id} zIndex={18} position={{ longitude: item.lng, latitude: item.lat }} events={this.markerEvents} extData={{ 'city': item.eName }}> <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} />} {isEncircleShow === false && <TwinkleDiv info={item} markerOnClick={this.markerOnClick} styleCss={styleCss} />}
</Marker> </Marker>
))} ))}
</BaseMap> </BaseMap>
</div> </div>
) : (<TwoDimensionalMap twoDimensionalMapConfig={twoDimensionalMapConfig}></TwoDimensionalMap>) ) : (
} <TwoDimensionalMap twoDimensionalMapConfig={twoDimensionalMapConfig}></TwoDimensionalMap>
<div className='body-right' > )}
<div className="body-right">
<RightCharts currentCode={orgCode} curCompanyId={sequenceNbr} patrolDetailView={this.patrolDetailView} chartsViewFlag={chartsViewFlag[0]} /> <RightCharts currentCode={orgCode} curCompanyId={sequenceNbr} patrolDetailView={this.patrolDetailView} chartsViewFlag={chartsViewFlag[0]} />
</div> </div>
{/*{ {/*{
...@@ -977,7 +1185,6 @@ class IndexMap extends Component { ...@@ -977,7 +1185,6 @@ class IndexMap extends Component {
{patrolView ? <PatrolDetail closePatrol={this.closePatrol} dataList={patrolDescData} markerOnClick1={this.markerOnClick1} /> : ''} {patrolView ? <PatrolDetail closePatrol={this.closePatrol} dataList={patrolDescData} markerOnClick1={this.markerOnClick1} /> : ''}
{/*{patrolView && chartsViewFlag.length > 0 ? <PatrolDetail closePatrol={this.closePatrol} dataList={patrolDescData} /> : ''} {/*{patrolView && chartsViewFlag.length > 0 ? <PatrolDetail closePatrol={this.closePatrol} dataList={patrolDescData} /> : ''}
<IndexSidePane chartsView={this.chartsView} nowKey={chartsViewFlag} dotTipNum={dotTipNum} />*/} <IndexSidePane chartsView={this.chartsView} nowKey={chartsViewFlag} dotTipNum={dotTipNum} />*/}
</div> </div>
); );
} }
......
import React, { Component } from 'react'; import React, { Component } from 'react';
class LeftDown extends Component { class LeftDown extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
...@@ -13,49 +11,20 @@ class LeftDown extends Component { ...@@ -13,49 +11,20 @@ class LeftDown extends Component {
<div style={{ width: '100px', height: '20px', float: 'left' }}> <div style={{ width: '100px', height: '20px', float: 'left' }}>
<div className="indexMap-bottom-one" style={{ backgroundColor: '#00A2FF' }}></div> <div className="indexMap-bottom-one" style={{ backgroundColor: '#00A2FF' }}></div>
<div className="indexMap-bottom-two"> <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: '#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>
</div> </div>
</div> </div>
<div style={{ width: '100px', height: '20px', float: 'left' }}> <div style={{ width: '100px', height: '20px', float: 'left' }}>
<div className="indexMap-bottom-one" style={{ backgroundColor: '#FF8800' }}></div> <div className="indexMap-bottom-one" style={{ backgroundColor: '#FF8800' }}></div>
<div className="indexMap-bottom-two"> <div className="indexMap-bottom-two">
<span>警告</span> <span>商业银行正常</span>
</div> </div>
</div> </div>
<div style={{ width: '100px', height: '20px', float: 'left' }}> <div style={{ width: '100px', height: '20px', float: 'left' }}>
<div className="indexMap-bottom-one" style={{ backgroundColor: '#FF0000' }}></div> <div className="indexMap-bottom-one" style={{ backgroundColor: '#FF0000' }}></div>
<div className="indexMap-bottom-two"> <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: '#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>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -13,7 +13,7 @@ class TwinkleDiv extends Component { ...@@ -13,7 +13,7 @@ class TwinkleDiv extends Component {
} }
render() { render() {
const { eName, aName, status, isCenter } = this.props.info; const { eName, aName, status, isCenter, sourceIdStr } = this.props.info;
const { markerOnClick, styleCss } = this.props; const { markerOnClick, styleCss } = this.props;
let color; let color;
let visable = false; let visable = false;
...@@ -27,13 +27,12 @@ class TwinkleDiv extends Component { ...@@ -27,13 +27,12 @@ class TwinkleDiv extends Component {
backgroundColor: color backgroundColor: color
}; };
return ( return (
<div className={eName} style={style} > <div className={eName} style={style} >
<span onClick={() => markerOnClick(eName)}>{aName}</span> <span onClick={() => markerOnClick(eName, sourceIdStr)}>{aName}</span>
<div className={`${eName}-line`} style={style} /> <div className={`${eName}-line`} style={style} />
{ visable && (eName === 'xian' || eName === 'xianyang') && <div className={`${eName} pulse-spread-circular`} /> } { 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> </div>
); );
} }
......
...@@ -2,7 +2,8 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Form, Input, Radio, Select, Button, Toast, CopyToClipboard } from 'amos-framework'; import { Form, Input, Radio, Select, Button, Toast, CopyToClipboard } from 'amos-framework';
// eslint-disable-next-line max-len // 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 FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
...@@ -53,12 +54,15 @@ class PickModal extends Component { ...@@ -53,12 +54,15 @@ class PickModal extends Component {
case 'impEquipment': case 'impEquipment':
this.setState({ datas: [] }); this.setState({ datas: [] });
break; break;
case 'dynamicRingData': // case 'dynamicRingData':
this.setState({ datas: [] }); // this.setState({ datas: [] });
break; // break;
case 'video': case 'video':
this.getMonitorData(); this.getMonitorData();
break; break;
case 'dynamicRingData':
this.getDynamicRingData();
break;
default: default:
console.log('不支持的类型'); console.log('不支持的类型');
} }
...@@ -143,6 +147,28 @@ class PickModal extends Component { ...@@ -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 * @memberof PickModal
...@@ -155,6 +181,20 @@ class PickModal extends Component { ...@@ -155,6 +181,20 @@ class PickModal extends Component {
this.props.onCancel(); 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 => { handleSubmit = e => {
this.form.validate((valid, dataValues) => { this.form.validate((valid, dataValues) => {
...@@ -171,6 +211,7 @@ class PickModal extends Component { ...@@ -171,6 +211,7 @@ class PickModal extends Component {
case 'impEquipment': case 'impEquipment':
break; break;
case 'dynamicRingData': case 'dynamicRingData':
this.updateDynamicRingPosition3d(pickedPosition);
break; break;
case 'video': case 'video':
this.updateMonitorPosition3d(pickedPosition); this.updateMonitorPosition3d(pickedPosition);
...@@ -220,13 +261,14 @@ class PickModal extends Component { ...@@ -220,13 +261,14 @@ class PickModal extends Component {
{/* <Option value="impEquipment">网络设备</Option> */} {/* <Option value="impEquipment">网络设备</Option> */}
{/* {<Option value="dynamicRingData">动环数据</Option>} */} {/* {<Option value="dynamicRingData">动环数据</Option>} */}
{<Option value="video">视频监控</Option>} {<Option value="video">视频监控</Option>}
{/* {<Option value="dynamicRingData">动环监测</Option>} */}
</Select> </Select>
</FormItem> </FormItem>
<FormItem label={form.desc} field="data" {...formItemLayout}> <FormItem label={form.desc} field="data" {...formItemLayout}>
<RadioGroup onChange={this.onRadioChange}> <RadioGroup onChange={this.onRadioChange}>
{ datas.map(item => { { datas.map(item => {
return ( return (
<Radio key={item.token} value={item.id}>{item.name}</Radio> <Radio key={item.token} value={item.id}>{item.label || item.name }</Radio>
); );
})} })}
</RadioGroup> </RadioGroup>
......
/* eslint-disable react/sort-comp */ /* eslint-disable react/sort-comp */
/* eslint-disable react/jsx-no-undef */ /* eslint-disable react/jsx-no-undef */
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { pointInfoAction } from 'SERVICES/3dService'; import { pointInfoAction } from 'SERVICES/3dService';
import { CONSTS } from 'CONSTS/storageConsts'; import { CONSTS } from 'CONSTS/storageConsts';
import { queryRoutePlanPointAction } from 'SERVICES/checkInfoService'; import { queryRoutePlanPointAction } from 'SERVICES/checkInfoService';
...@@ -14,7 +15,9 @@ import MonitorEquipmentModal from './dialogModel/MonitorEquipmentModal'; ...@@ -14,7 +15,9 @@ import MonitorEquipmentModal from './dialogModel/MonitorEquipmentModal';
import EquipmentModal from './dialogModel/EquipmentModal'; import EquipmentModal from './dialogModel/EquipmentModal';
import DynamicRingDateModalTable from './dialogModel/DynamicRingDateModalTable'; import DynamicRingDateModalTable from './dialogModel/DynamicRingDateModalTable';
import RiskSourceDetailModal from './dialogModel/RiskSourceDetailModal'; 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: '隐患' }]; const headers = [{ key: 'details', icon: 'number-more', text: '详情' }, { key: 'danger', icon: 'danger', text: '隐患' }];
...@@ -46,11 +49,17 @@ class PointDialog extends Component { ...@@ -46,11 +49,17 @@ class PointDialog extends Component {
dialog: false, dialog: false,
isFullScreen: false, isFullScreen: false,
fireDetectVisible: false, fireDetectVisible: false,
xun:false, xun: false,
checkId:'' checkId: ''
}; };
} }
componentDidMount() {
PubSub.subscribe(eventTopics.innate_operater_back, (topic, data) => {
this.onDialogClose();
});
}
/** /**
* 打开模态框 * 打开模态框
* *
...@@ -78,7 +87,7 @@ class PointDialog extends Component { ...@@ -78,7 +87,7 @@ class PointDialog extends Component {
markerData.markerExtData = { dialogId: id, type, objType, sourceId }; markerData.markerExtData = { dialogId: id, type, objType, sourceId };
if (type === 'riskSource') { if (type === 'riskSource') {
this.setState({ markerData, modal: true }); this.setState({ markerData, modal: true });
} else if (type === 'impEquipment' && objType !== '03'){//虚拟设备不需要打开Model框 } else if (type === 'impEquipment' && objType !== '03') {//虚拟设备不需要打开Model框
this.setState({ markerData, modal: true }); this.setState({ markerData, modal: true });
} else if (type === 'dynamicRingData') {// } else if (type === 'dynamicRingData') {//
this.setState({ markerData, modal: true }); this.setState({ markerData, modal: true });
...@@ -116,7 +125,7 @@ class PointDialog extends Component { ...@@ -116,7 +125,7 @@ class PointDialog extends Component {
* @memberof PointDialog * @memberof PointDialog
*/ */
onCheckStatusClick = record => { onCheckStatusClick = record => {
this.setState({ xun: true,checkId: record.id }); this.setState({ xun: true, checkId: record.id });
// const detailParams = { // const detailParams = {
// ...markerData.markerExtData, // ...markerData.markerExtData,
// detailForw: 'record', // detailForw: 'record',
...@@ -184,23 +193,12 @@ class PointDialog extends Component { ...@@ -184,23 +193,12 @@ class PointDialog extends Component {
this.setState({ modal: false }); this.setState({ modal: false });
}; };
/**** /**
*
*
* 巡检详情 * 巡检详情
*
*/ */
cancelxun = () => {
cancelxun = () => {
this.setState({ xun: false }); this.setState({ xun: false });
}; };
/** /**
* 全屏切换 * 全屏切换
...@@ -247,8 +245,8 @@ cancelxun = () => { ...@@ -247,8 +245,8 @@ cancelxun = () => {
}; };
render() { render() {
const { open,checkId, xun,showRight, rightContent, markerData, modal, dataList, dialog, isFullScreen, fireDetectVisible} = this.state; const { open, checkId, xun, showRight, rightContent, markerData, modal, dataList, dialog, isFullScreen, fireDetectVisible } = this.state;
const { type, dialogId,objType } = markerData.markerExtData || {}; const { type, dialogId, objType } = markerData.markerExtData || {};
let minInfo = { let minInfo = {
headers, headers,
title: dialogEum[type], title: dialogEum[type],
...@@ -256,27 +254,27 @@ cancelxun = () => { ...@@ -256,27 +254,27 @@ cancelxun = () => {
table: <RiskContentTable pointId={dialogId} dataList={dataList} onCheckStatusClick={this.onCheckStatusClick} fetchData={this.getTableData} /> table: <RiskContentTable pointId={dialogId} dataList={dataList} onCheckStatusClick={this.onCheckStatusClick} fetchData={this.getTableData} />
}; };
let modelClass = 'point-dialog-modal'; let modelClass = 'point-dialog-modal';
if (type === 'riskSource' || type === 'patrol'){ if (type === 'riskSource' || type === 'patrol') {
modelClass = 'risk-warn-modal'; modelClass = 'risk-warn-modal';
} else if (type === 'impEquipment'){ } else if (type === 'impEquipment') {
modelClass = 'impEqu-info-modal'; modelClass = 'impEqu-info-modal';
} else if ( type === 'dynamicRingData' && objType === '01'){ } else if (type === 'dynamicRingData' && objType === '01') {
modelClass = 'dynamicRingData-info-modal'; modelClass = 'dynamicRingData-info-modal';
} else if ( type === 'dynamicRingData' && objType === '02'){ } else if (type === 'dynamicRingData' && objType === '02') {
modelClass = 'dynamicRingData-fire-info-modal'; modelClass = 'dynamicRingData-fire-info-modal';
} }
let header = ''; let header = '';
if (type === 'dynamicRingData' && objType === '01'){ if (type === 'dynamicRingData' && objType === '01') {
header = dialogEum['dynamicRingData']; header = dialogEum['dynamicRingData'];
} else if (type === 'dynamicRingData' && objType === '02'){ } else if (type === 'dynamicRingData' && objType === '02') {
header = dialogEum['huotan']; header = dialogEum['huotan'];
} else { } else {
header = dialogEum[type]; header = dialogEum[type];
} }
//console.log(type,fireDetectVisible); //console.log(type,fireDetectVisible);
let ff=true; let ff = true;
return ( return (
<div> <div>
{ {
...@@ -289,7 +287,6 @@ cancelxun = () => { ...@@ -289,7 +287,6 @@ cancelxun = () => {
clickHeaderItem={this.clickHeaderItem} clickHeaderItem={this.clickHeaderItem}
/> />
} }
{<Modal {<Modal
className='xun' className='xun'
header="巡检详情" header="巡检详情"
...@@ -300,16 +297,7 @@ cancelxun = () => { ...@@ -300,16 +297,7 @@ cancelxun = () => {
onCancel={this.cancelxun} onCancel={this.cancelxun}
content={<CheckDetail pointId={dialogId} checkID={checkId} />} content={<CheckDetail pointId={dialogId} checkID={checkId} />}
/> />
} } }
{type && type !== 'video' && ( {type && type !== 'video' && (
<Modal <Modal
header={header} header={header}
...@@ -336,4 +324,8 @@ cancelxun = () => { ...@@ -336,4 +324,8 @@ cancelxun = () => {
} }
} }
PointDialog.propTypes = {
subscribe: PropTypes.func
};
export default PointDialog; export default PointDialog;
...@@ -53,13 +53,15 @@ class DynamicRingDataModal extends Component { ...@@ -53,13 +53,15 @@ class DynamicRingDataModal extends Component {
queryDynamicRingData =(dialogId)=>{ queryDynamicRingData =(dialogId)=>{
dynamicRingData3dAction(dialogId).then(data =>{ dynamicRingData3dAction(dialogId).then(data =>{
let monitorElectricityJson = data.find(e => { return e.equipTempCapabName === '运行参数'}) == undefined ? [] : data.find(e => { return e.equipTempCapabName === '运行参数'}).metricList; let monitorElectricityJson = data.find(e => { return e.equipTempCapabName === '运行参数' || e.equipTempCapabName === '市电监测'
let alarmMessageJson = data.find(e => { return e.equipTempCapabName === '监测报警'}) == undefined ? [] : data.find(e => { return e.equipTempCapabName === '监测报警'}).metricList; || e.equipTempCapabName === '常电监测' || e.equipTempCapabName === '进线参数' ;}) === undefined ? [] : data.find(e => { return e.equipTempCapabName === '运行参数' ||
let otherInfoJson = data.find(e => { return e.equipTempCapabName === '运行状态'}) == undefined ? [] : data.find(e => { return e.equipTempCapabName === '运行状态'}).metricList; 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({ this.setState({
// monitorElectricity: monitorElectricityJson != 'null' ? JSON.parse(monitorElectricityJson) : {},
// alarmMessage: alarmMessageJson != 'null' ? JSON.parse(alarmMessageJson) : {},
// otherInfo: otherInfoJson != 'null' ? JSON.parse(otherInfoJson) : {},
monitorElectricity: monitorElectricityJson != 'null' ? monitorElectricityJson : [], monitorElectricity: monitorElectricityJson != 'null' ? monitorElectricityJson : [],
alarmMessage: alarmMessageJson != 'null' ? alarmMessageJson : [], alarmMessage: alarmMessageJson != 'null' ? alarmMessageJson : [],
otherInfo: otherInfoJson != 'null' ? otherInfoJson : [], otherInfo: otherInfoJson != 'null' ? otherInfoJson : [],
...@@ -67,33 +69,35 @@ class DynamicRingDataModal extends Component { ...@@ -67,33 +69,35 @@ class DynamicRingDataModal extends Component {
}); });
} }
onTabClick = (value) => { // onTabClick = (value) => {
this.setState({ activeKey: value }); // this.setState({ activeKey: value });
}; // };
render() { render() {
const { data, monitorElectricity, alarmMessage, otherInfo, activeKey } = this.state; const { monitorElectricity, alarmMessage, otherInfo } = this.state;
return ( return (
<div>
<div className="dynamicRingData-info"> <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) => ( {serverTabs.map((item, i) => (
<Tab key={item.id} activeKey={item.id} closable={item.closable}> <Tab key={item.id} activeKey={item.id} closable={item.closable}>
{item.title} {item.title}
</Tab> </Tab>
))} ))}
</TabList> </TabList> */}
<TabPanel activeKey="1"> <div className="dynamicRingData-info-body">
<MonitorElectricity data = {monitorElectricity}/> <div>
</TabPanel> <MonitorElectricity data={monitorElectricity} />
<TabPanel activeKey="2"> </div>
<AlarmMessage data = {alarmMessage}/> <div >
</TabPanel> <AlarmMessage data={alarmMessage} />
<TabPanel activeKey="3"> </div>
<OtherInfo data = {otherInfo}/> <div>
</TabPanel> <OtherInfo data={otherInfo} />
</Tabs> </div>
</div>
</div>
</div> </div>
); );
......
...@@ -3,31 +3,31 @@ import PropTypes from 'prop-types'; ...@@ -3,31 +3,31 @@ import PropTypes from 'prop-types';
import { CONSTS } from 'CONSTS/storageConsts'; import { CONSTS } from 'CONSTS/storageConsts';
import AmosGridTable from '../../../../bizview/common/tableComponent/table/AmosGridTable'; import AmosGridTable from '../../../../bizview/common/tableComponent/table/AmosGridTable';
import { riskSoureDetail3dAction } from 'SERVICES/bizService'; import { riskSoureDetail3dAction } from 'SERVICES/bizService';
import {queryPointItemAllDatas } from '../../../../../services/3dService'; import { queryPointItemAllDatas } from '../../../../../services/3dService';
const checkListColumns = self => {
const checkListColumns = (self) => {
return [ return [
{ {
title: '危险因素名称', title: '危险因素名称',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '40%' width: '40%'
}, { },
{
title: '责任人', title: '责任人',
dataIndex: 'type', dataIndex: 'type',
key: 'type', key: 'type',
width: '20%', width: '20%',
render: (text, record) => { render: (text, record) => {
//根据换行符分隔 //根据换行符分隔
let arr = text.split(","); let arr = text.split(',');
let p = document.createElement('span'); let p = document.createElement('span');
if (arr && arr !== null) { if (arr && arr !== null) {
arr.map((e, index) => { arr.map((e, index) => {
if (0 == index) { if (0 == index) {
let grandChildItem = document.createElement('p'); let grandChildItem = document.createElement('p');
grandChildItem.innerText = "公司:"; grandChildItem.innerText = '公司:';
let font = document.createElement('font'); let font = document.createElement('font');
font.innerText = e; font.innerText = e;
grandChildItem.append(font); grandChildItem.append(font);
...@@ -36,7 +36,7 @@ const checkListColumns = (self) => { ...@@ -36,7 +36,7 @@ const checkListColumns = (self) => {
if (1 == index) { if (1 == index) {
let grandChildItem = document.createElement('p'); let grandChildItem = document.createElement('p');
grandChildItem.innerText = "部门:"; grandChildItem.innerText = '部门:';
let font = document.createElement('font'); let font = document.createElement('font');
font.innerText = e; font.innerText = e;
grandChildItem.append(font); grandChildItem.append(font);
...@@ -45,7 +45,7 @@ const checkListColumns = (self) => { ...@@ -45,7 +45,7 @@ const checkListColumns = (self) => {
if (2 == index) { if (2 == index) {
let grandChildItem = document.createElement('p'); let grandChildItem = document.createElement('p');
grandChildItem.innerText = "班组:"; grandChildItem.innerText = '班组:';
let font = document.createElement('font'); let font = document.createElement('font');
font.innerText = e; font.innerText = e;
grandChildItem.append(font); grandChildItem.append(font);
...@@ -54,27 +54,24 @@ const checkListColumns = (self) => { ...@@ -54,27 +54,24 @@ const checkListColumns = (self) => {
if (3 == index) { if (3 == index) {
let grandChildItem = document.createElement('p'); let grandChildItem = document.createElement('p');
grandChildItem.innerText = "岗位:"; grandChildItem.innerText = '岗位:';
let font = document.createElement('font'); let font = document.createElement('font');
font.innerText = e; font.innerText = e;
grandChildItem.append(font); grandChildItem.append(font);
p.append(grandChildItem); p.append(grandChildItem);
} }
}); });
return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div> return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }}></div>;
} }
} }
},
{
}, {
title: '风险等级', title: '风险等级',
dataIndex: 'level', dataIndex: 'level',
key: 'level', key: 'level',
width: '20%' width: '20%'
}, { },
{
title: '安全管控状态', title: '安全管控状态',
dataIndex: 'controlStatus', dataIndex: 'controlStatus',
key: 'controlStatus', key: 'controlStatus',
...@@ -83,84 +80,76 @@ const checkListColumns = (self) => { ...@@ -83,84 +80,76 @@ const checkListColumns = (self) => {
]; ];
}; };
export const datamoni = { export const datamoni = {
id: 349,
name: 'XAP-P-EXD-SW01',
"id": 349, code: '0010020003',
"name": "XAP-P-EXD-SW01", user: null,
"code": "0010020003", identificationMethod: null,
"user": null, riskLevel: '3级',
"identificationMethod": null, riskType: null,
"riskLevel": "3级", riskFactors: [
"riskType": null,
"riskFactors": [
{ {
"id": 57, id: 57,
"name": "噪音", name: '噪音',
"type": " , , , ", type: ' , , , ',
"level": "3级", level: '3级',
"controlStatus": "" controlStatus: ''
}, },
{ {
"id": 58, id: 58,
"name": "设备故障", name: '设备故障',
"type": " , , , ", type: ' , , , ',
"level": "4级", level: '4级',
"controlStatus": null controlStatus: null
} }
], ],
"riskFactorsControlMeasures": [ riskFactorsControlMeasures: [
{ {
id: 22,
"id": 22, label: '测试',
"label": "测试", content: '正文'
"content": "正文"
}, },
{ {
id: 23,
"id": 23, label: '测试',
"label": "测试", content: '正文'
"content": "正文"
}, },
{ {
id: 24,
"id": 24, label: '测试',
"label": "测试", content: '正文'
"content": "正文"
} }
], ],
"dangerDetails":null dangerDetails: null
} };
const deviceData = [ const deviceData = [
{ {
"type": "device", type: 'device',
"name": "中心机房新风机", name: '中心机房新风机',
"value": "高湿报警", value: '高湿报警',
"identification": "qualified", identification: 'qualified',
"factorId": 26 factorId: 26
} }
] ];
const patrolData = [ const patrolData = [
{ {
type: 'patrol',
"type": "patrol", name: 'A02机柜',
"name": "A02机柜", value: '【(2U-14U)750服务器01】工作指示灯',
"value": "【(2U-14U)750服务器01】工作指示灯", identification: 'qualified',
"identification": "qualified", factorId: 31
"factorId": 31
}, },
{ {
type: 'patrol',
"type": "patrol", name: 'A02机柜',
"name": "A02机柜", value: '【(2U-14U)750服务器01】噪声',
"value": "【(2U-14U)750服务器01】噪声", identification: 'qualified',
"identification": "qualified", factorId: 31
"factorId": 31
} }
] ];
/** /**
* 风险详情 * 风险详情
...@@ -176,7 +165,7 @@ class RiskSourceDetailModal extends Component { ...@@ -176,7 +165,7 @@ class RiskSourceDetailModal extends Component {
selectedRowKeys: [], selectedRowKeys: [],
data: {}, data: {},
patroList: [], patroList: [],
deviceList:[] deviceList: []
}; };
} }
...@@ -190,34 +179,29 @@ class RiskSourceDetailModal extends Component { ...@@ -190,34 +179,29 @@ class RiskSourceDetailModal extends Component {
const { tirggerTransTopic } = this.props; const { tirggerTransTopic } = this.props;
const detailParams = { type: 'risk', detailForw: 'record', dialogId: pointId }; const detailParams = { type: 'risk', detailForw: 'record', dialogId: pointId };
pointId && tirggerTransTopic && tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() }); pointId && tirggerTransTopic && tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() });
} };
queryRiskSoureDetail = (riskSourceId) => {
queryRiskSoureDetail = riskSourceId => {
riskSoureDetail3dAction(riskSourceId).then(data => { riskSoureDetail3dAction(riskSourceId).then(data => {
this.setState({ data }); this.setState({ data });
data.riskFactors.map(e =>{ data.riskFactors.map(e => {
let {patroList,deviceList} =this.state; let { patroList, deviceList } = this.state;
queryPointItemAllDatas(e.id).then(datas =>{ queryPointItemAllDatas(e.id).then(datas => {
datas.patrol&& datas.patrol.map(item =>{ datas.patrol &&
patroList.push(item) datas.patrol.map(item => {
}) patroList.push(item);
});
datas.device && datas.device.map(item =>{
deviceList.push(item)
})
this.setState({ patroList:patroList, deviceList:deviceList});
})
})
datas.device &&
datas.device.map(item => {
deviceList.push(item);
}); });
} this.setState({ patroList: patroList, deviceList: deviceList });
});
});
});
};
/** /**
* 获取表格刷新方法 * 获取表格刷新方法
*/ */
...@@ -243,83 +227,90 @@ class RiskSourceDetailModal extends Component { ...@@ -243,83 +227,90 @@ class RiskSourceDetailModal extends Component {
// }); // });
// } // }
renderDangersPatrol = (danger) => { renderDangersPatrol = danger => {
return (danger || []).map(item =>{ return (danger || []).map(item => {
if(item && item.identification==="unqualified"){ if (item && item.identification === 'unqualified') {
return (<p > <font style={{ color: '#FF0000' }}>巡检不合格:</font> return (
<p>
{' '}
<font style={{ color: '#FF0000' }}>巡检不合格:</font>
<span>{item.name} &nbsp;</span> <span>{item.name} &nbsp;</span>
<span>{item.value} &nbsp;</span> <span>{item.value} &nbsp;</span>
</p>); </p>
);
} }
}) });
// return (danger || []).map(item => { // return (danger || []).map(item => {
// return (<p > <font style={{ color: '#FF0000' }}>巡检不合格:</font> // return (<p > <font style={{ color: '#FF0000' }}>巡检不合格:</font>
// <span>{item.name} &nbsp;</span> // <span>{item.name} &nbsp;</span>
// <span>{item.value} &nbsp;</span> // <span>{item.value} &nbsp;</span>
// </p>); // </p>);
// }); // });
} };
renderDangersDevice= (danger) => { renderDangersDevice = danger => {
// return (danger || []).map(item => { // return (danger || []).map(item => {
// return (<p > <font style={{ color: '#FF0000' }}>设备告警:</font> // return (<p > <font style={{ color: '#FF0000' }}>设备告警:</font>
// <span>{item.name} &nbsp;</span> // <span>{item.name} &nbsp;</span>
// <span>{item.value} &nbsp;</span> // <span>{item.value} &nbsp;</span>
// </p>); // </p>);
// }); // });
return (danger || []).map(item =>{ return (danger || []).map(item => {
if(item && item.identification==="unqualified"){ if (item && item.identification === 'unqualified') {
return (<p > <font style={{ color: '#FF0000' }}>设备告警:</font> return (
<p>
{' '}
<font style={{ color: '#FF0000' }}>设备告警:</font>
<span>{item.name} &nbsp;</span> <span>{item.name} &nbsp;</span>
<span>{item.value} &nbsp;</span> <span>{item.value} &nbsp;</span>
</p>); </p>
} );
})
} }
});
};
handledata = (data, patroList, deviceList) => {
if (data.riskFactors) {
data.riskFactors.map(e => {
e.controlStatus = '受控';
});
handledata =(data,patroList,deviceList)=>{ data.riskFactors.map(item => {
patroList.map(p => {
if(data.riskFactors){ if ((item.id === p.factorId && p.identification === 'unqualified')) {
data.riskFactors.map(e =>{ item.controlStatus = '失效';
e.controlStatus = "受控";
})
data.riskFactors.map(item =>{
patroList.map(p =>{
if(item.id = p.factorId && p.identification==="unqualified"){
item.controlStatus = "失效";
} }
}) });
deviceList.map(p =>{ deviceList.map(p => {
if(item.id = p.factorId && p.identification==="unqualified"){ if ((item.id === p.factorId && p.identification === 'unqualified')) {
item.controlStatus = "失效"; item.controlStatus = '失效';
} }
}) });
}) });
} }
return data; return data;
} };
render() { render() {
let { data = {} } = this.state; let { data = {} } = this.state;
let {patroList,deviceList} = this.state; let { patroList, deviceList } = this.state;
let newData = this.handledata(data,patroList,deviceList); let newData = this.handledata(data, patroList, deviceList);
return ( return (
<div className="risk-warn"> <div className="risk-warn">
<div className="risk-source-header"> <div className="risk-source-header">
<span className="colName">风险编号:</span><span className="colValue">{data.code || ''}</span> <span className="colName">风险编号:</span>
<span className="colName">风险名称:</span><span className="colValue">{data.name || ''}</span> <span className="colValue">{data.code || ''}</span>
<span className="colName">级别:</span><span className="colValue">{data.riskLevel || ''}</span> <span className="colName">风险名称:</span>
<span className="colValue">{data.name || ''}</span>
<span className="colName">级别:</span>
<span className="colValue">{data.riskLevel || ''}</span>
</div> </div>
<div className="risk-warn-table"> <div className="risk-warn-table">
<AmosGridTable <AmosGridTable
columns={checkListColumns(this)} columns={checkListColumns(this)}
getTableDataAction={() => { }} getTableDataAction={() => {}}
callBack={this.reload} callBack={this.reload}
isPageable={false} isPageable={false}
isChecked={false} isChecked={false}
...@@ -328,8 +319,8 @@ class RiskSourceDetailModal extends Component { ...@@ -328,8 +319,8 @@ class RiskSourceDetailModal extends Component {
</div> </div>
<div className="risk-warn-content"> <div className="risk-warn-content">
<div className="risk-warn-content-header">风险触发原因:巡检不合格/设备告警</div> <div className="risk-warn-content-header">风险触发原因:巡检不合格/设备告警</div>
{patroList &&this.renderDangersPatrol(patroList)} {patroList && this.renderDangersPatrol(patroList)}
{deviceList &&this.renderDangersDevice(deviceList)} {deviceList && this.renderDangersDevice(deviceList)}
</div> </div>
</div> </div>
); );
...@@ -341,5 +332,4 @@ RiskSourceDetailModal.propTypes = { ...@@ -341,5 +332,4 @@ RiskSourceDetailModal.propTypes = {
tirggerTransTopic: PropTypes.func tirggerTransTopic: PropTypes.func
}; };
export default RiskSourceDetailModal; export default RiskSourceDetailModal;
...@@ -7,7 +7,7 @@ import MarkerIcon from './MarkerIcon'; ...@@ -7,7 +7,7 @@ import MarkerIcon from './MarkerIcon';
import StatisticsMarkerIcon from './markers/StatisticsMarkerIcon'; import StatisticsMarkerIcon from './markers/StatisticsMarkerIcon';
import { tirggerTransTopic, tirggerPlanTopic } from '../dataProcessor'; import { tirggerTransTopic, tirggerPlanTopic } from '../dataProcessor';
export default function markerFactory(WrappedComponent = 'div', options){ export default function markerFactory(WrappedComponent = 'div', options) {
const { markerType } = options; const { markerType } = options;
class MarkerPoints extends Component { class MarkerPoints extends Component {
static propTypes = { static propTypes = {
...@@ -54,6 +54,9 @@ export default function markerFactory(WrappedComponent = 'div', options){ ...@@ -54,6 +54,9 @@ export default function markerFactory(WrappedComponent = 'div', options){
* @memberof MarkerPoints * @memberof MarkerPoints
*/ */
onMarkerDblClick = (marker, e) => { onMarkerDblClick = (marker, e) => {
if (marker.extData.levelStr === 'impEqu_04') {
return;
}
clearTimeout(this.time); clearTimeout(this.time);
tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData }); tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
// if (marker.extData.markerType === 'impEquipment' && void 0 !== marker.extData.show) { // if (marker.extData.markerType === 'impEquipment' && void 0 !== marker.extData.show) {
......
...@@ -37,10 +37,12 @@ class ControlItem extends Component { ...@@ -37,10 +37,12 @@ class ControlItem extends Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const { active } = nextProps; const { active } = nextProps;
if (nextProps.active !== this.state.open ){
this.setState({ this.setState({
open: active open: active
}); });
} }
}
/** /**
* 子项点击事件 * 子项点击事件
......
...@@ -38,6 +38,12 @@ class InnateControlPane extends Component { ...@@ -38,6 +38,12 @@ class InnateControlPane extends Component {
key: item.type, key: item.type,
value: !alreadyActive value: !alreadyActive
}); });
if (item.type === 'back'){//点击返回按钮,关闭页面所有弹窗
this.props.trigger(eventTopics.innate_operater_back, {
key: item.type,
value: !alreadyActive
});
}
}; };
onMulitLayerItemClick = (item, toggle) => { onMulitLayerItemClick = (item, toggle) => {
......
...@@ -5,6 +5,8 @@ import { Store } from 'amos-tool'; ...@@ -5,6 +5,8 @@ import { Store } from 'amos-tool';
import BizControlPane from './BizControlPane'; import BizControlPane from './BizControlPane';
import InnateControlPane from './InnateControlPane'; import InnateControlPane from './InnateControlPane';
import { viewController, bizControls } from '../conf'; import { viewController, bizControls } from '../conf';
import { PubSub } from 'ray-eventpool';
import { eventTopics } from '../consts';
const loginUserName = Store.lsTool.read('userName'); const loginUserName = Store.lsTool.read('userName');
const filterUser = ['tianbo', 'opera1', 'opera2']; const filterUser = ['tianbo', 'opera1', 'opera2'];
...@@ -19,10 +21,19 @@ class SideControl extends Component { ...@@ -19,10 +21,19 @@ class SideControl extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
activeControl: [] activeControl: [],
open: true
}; };
} }
componentDidMount() {
PubSub.subscribe(eventTopics.innate_operater_back, (topic, data) => {//监听三维返回按钮
this.setState({
open: false
});
});
}
/** /**
* control 点击,第二次点击则取消 * control 点击,第二次点击则取消
*/ */
...@@ -58,8 +69,16 @@ class SideControl extends Component { ...@@ -58,8 +69,16 @@ class SideControl extends Component {
* @memberof SideControl * @memberof SideControl
*/ */
isActive = key => { isActive = key => {
const { activeControl } = this.state; const { activeControl, open } = this.state;
return activeControl && activeControl.includes(key); if (!open){//2秒后初始activeControl和open
setTimeout(()=>{
this.setState({
activeControl: [],
open: true
});
}, 2000);
}
return open && activeControl && activeControl.includes(key);
}; };
render() { render() {
......
...@@ -67,6 +67,12 @@ class TopologyComponent extends Component { ...@@ -67,6 +67,12 @@ class TopologyComponent extends Component {
} }
} }
//设置文字
setFontText = (v) => {
return v.text;
}
// 告警高亮 // 告警高亮
warnHighlights = (d,v) => { warnHighlights = (d,v) => {
if (d.warnState) { if (d.warnState) {
...@@ -121,6 +127,9 @@ class TopologyComponent extends Component { ...@@ -121,6 +127,9 @@ class TopologyComponent extends Component {
} }
getNodeDetail = (id) => { getNodeDetail = (id) => {
this.setState({
detailData: []
});
nodeDetailTopoAction(id).then(data => { nodeDetailTopoAction(id).then(data => {
this.setState({ this.setState({
detailData: data detailData: data
...@@ -277,7 +286,9 @@ class TopologyComponent extends Component { ...@@ -277,7 +286,9 @@ class TopologyComponent extends Component {
) )
); );
this.diagram.groupTemplate = goObj(go.Group, 'Vertical', this.diagram.groupTemplate = goObj(
go.Group,
'Vertical',
{ {
resizable: true, resizable: true,
locationObjectName: 'SHAPE', locationObjectName: 'SHAPE',
...@@ -287,27 +298,46 @@ class TopologyComponent extends Component { ...@@ -287,27 +298,46 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 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, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), // new go.Binding('text')
goObj(go.Shape, 'Rectangle', new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(
go.Shape,
'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'rgba(255,255,255,0.2)',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 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)
) )
); );
......
...@@ -243,6 +243,25 @@ class TreeComponent extends Component { ...@@ -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) => { renderTreeNodes = (data) => {
let operableTreeData = deepCopy(data); let operableTreeData = deepCopy(data);
return operableTreeData.map((item) => { return operableTreeData.map((item) => {
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import classnames from 'classnames';
import { message } from 'amos-framework'; import { message } from 'amos-framework';
import AmosWebSocket from 'amos-websocket'; import AmosWebSocket from 'amos-websocket';
import TopologyComponent from './TopologyComponent'; import TopologyComponent from './TopologyComponent';
import TreeComponent from './TreeComponent'; import TreeComponent from './TreeComponent';
import { getDyTopoAction,updateDyTopoAction } from './../../../services/dynamicRingService'; import { getDyTopoAction, updateDyTopoAction } from './../../../services/dynamicRingService';
import SysWsURL from './../../../consts/wsUrlConsts'; import SysWsURL from './../../../consts/wsUrlConsts';
class DynamicRing extends Component { class DynamicRing extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
selectedKeys: [], selectedKeys: [],
wSelectedKeys: '', wSelectedKeys: '',
isTreeDisplay: true,
topologyData: {} //拓扑图数据 topologyData: {} //拓扑图数据
}; };
} }
// 拓扑图数据初始化 // 拓扑图数据初始化
initTopologyData = (id,value = '') => { initTopologyData = (id, value = '') => {
getDyTopoAction(id).then(data => { getDyTopoAction(id).then(data => {
if (value === 'refresh') { if (value === 'refresh') {
message.success('拓扑图刷新成功!'); message.success('拓扑图刷新成功!');
...@@ -28,27 +28,27 @@ class DynamicRing extends Component { ...@@ -28,27 +28,27 @@ class DynamicRing extends Component {
topologyData: data topologyData: data
}); });
}); });
} };
// 树选择 // 树选择
onSelect = (selectedKeys) => { onSelect = selectedKeys => {
this.initTopologyData(selectedKeys); this.initTopologyData(selectedKeys);
this.setState({ this.setState({
selectedKeys, selectedKeys,
wSelectedKeys: '' wSelectedKeys: ''
}); });
} };
// 节点数据改变 // 节点数据改变
nodeChange = (e) => { nodeChange = e => {
// console.log(e.model.toJson()); // console.log(e.model.toJson());
this.updateTopologyData = JSON.parse(e.model.toJson()); this.updateTopologyData = JSON.parse(e.model.toJson());
} };
// 保存节点数据 // 保存节点数据
saveTopologyData = () => { saveTopologyData = () => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
const { nodeDataArray,linkDataArray } = this.updateTopologyData; const { nodeDataArray, linkDataArray } = this.updateTopologyData;
const params = { const params = {
treeid: selectedKeys, treeid: selectedKeys,
nodeData: nodeDataArray, nodeData: nodeDataArray,
...@@ -57,44 +57,62 @@ class DynamicRing extends Component { ...@@ -57,44 +57,62 @@ class DynamicRing extends Component {
updateDyTopoAction(params).then(data => { updateDyTopoAction(params).then(data => {
message.success('拓扑图保存成功!'); message.success('拓扑图保存成功!');
}); });
} };
// 刷新节点 // 刷新节点
refreshTopologyData = () => { refreshTopologyData = () => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys, 'refresh'); this.initTopologyData(selectedKeys, 'refresh');
} };
// 选择节点 // 选择节点
nodeSelectionChanged = (e) => { nodeSelectionChanged = e => {
// console.log('e',e); // console.log('e',e);
if (e.isSelected) { } if (e.isSelected) {
} }
};
// // webSocket 接收消息 // // webSocket 接收消息
handleData = (data) => { handleData = data => {
this.onSelect(data); this.onSelect(data);
this.setState({ this.setState({
wSelectedKeys: data 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() { render() {
const { topologyData,wSelectedKeys } = this.state; const { topologyData, wSelectedKeys, isTreeDisplay } = this.state;
return ( return (
<div className="dy-wrapper"> <div className="dy-wrapper">
<AmosWebSocket <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.dyTopoURI} onMessage={this.handleData} reconnect debug />
ref={node => this.aws = node} <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
url={SysWsURL.dyTopoURI} <div className={classnames({ 'view-header': isTreeDisplay, 'view-header-close': !isTreeDisplay })}>
onMessage={this.handleData} <div className="left-view">
reconnect <img className="image-sytle" src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('left')} />
debug </div>
/> <div className="right-view">
<div className="left-content"> <img className="image-sytle" src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
<TreeComponent </div>
onSelect={this.onSelect} </div>
wSelectedKeys={wSelectedKeys} <TreeComponent onSelect={this.onSelect} wSelectedKeys={wSelectedKeys} />
/>
</div> </div>
<div className="right-content"> <div className="right-content">
<div className="net-topo-header"> <div className="net-topo-header">
...@@ -106,11 +124,7 @@ class DynamicRing extends Component { ...@@ -106,11 +124,7 @@ class DynamicRing extends Component {
</div> </div>
</div> </div>
<div className="net-topo-content"> <div className="net-topo-content">
<TopologyComponent <TopologyComponent topologyData={topologyData} nodeChange={this.nodeChange} nodeSelectionChanged={this.nodeSelectionChanged} />
topologyData={topologyData}
nodeChange={this.nodeChange}
nodeSelectionChanged={this.nodeSelectionChanged}
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -118,8 +132,6 @@ class DynamicRing extends Component { ...@@ -118,8 +132,6 @@ class DynamicRing extends Component {
} }
} }
DynamicRing.propTypes = { DynamicRing.propTypes = {};
};
export default DynamicRing; export default DynamicRing;
...@@ -533,23 +533,38 @@ class TopologyComponent extends Component { ...@@ -533,23 +533,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 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, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'rgba(255,255,255,0.2)',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
......
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;
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;
// 获取类型
export const getTypeBySystem = (name) => {
const typeParams = {
PAMS: 1,
SelfSupport: 5,
CityLan: 6,
CloudPlatform: 7
};
return typeParams[name];
};
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;
...@@ -35,6 +35,19 @@ class TopologyComponent extends Component { ...@@ -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 // this function is the Node.dragComputation, to limit the movement of the parts
stayInFixedArea = (part, pt, gridpt) => { stayInFixedArea = (part, pt, gridpt) => {
let diagram = part.diagram; let diagram = part.diagram;
...@@ -145,7 +158,7 @@ class TopologyComponent extends Component { ...@@ -145,7 +158,7 @@ class TopologyComponent extends Component {
showToolTip = (obj, diagram, tool) => { showToolTip = (obj, diagram, tool) => {
let toolTipDIV = document.getElementById('toolTipDIV'); let toolTipDIV = document.getElementById('toolTipDIV');
let pt = diagram.lastInput.viewPoint; 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.top = `${pt.y}px`;
toolTipDIV.style.display = 'block'; toolTipDIV.style.display = 'block';
this.getNodeDetail(obj.data.id); this.getNodeDetail(obj.data.id);
...@@ -221,6 +234,32 @@ class TopologyComponent extends Component { ...@@ -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', this.diagram.nodeTemplateMap.add('Picture',
goObj(go.Node, 'Vertical', goObj(go.Node, 'Vertical',
{ {
...@@ -288,23 +327,38 @@ class TopologyComponent extends Component { ...@@ -288,23 +327,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 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, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text')
//new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'rgba(255,255,255,0.2)',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
...@@ -321,6 +375,8 @@ class TopologyComponent extends Component { ...@@ -321,6 +375,8 @@ class TopologyComponent extends Component {
this.diagram.model = new go.GraphLinksModel(nodeData, linkData); this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
} }
render() { render() {
const { className,style, topologyData } = this.props; const { className,style, topologyData } = this.props;
const { nodeData = [] } = topologyData || {}; const { nodeData = [] } = topologyData || {};
......
...@@ -244,6 +244,7 @@ class TreeComponent extends Component { ...@@ -244,6 +244,7 @@ class TreeComponent extends Component {
} }
renderTreeNodes = (data) => { renderTreeNodes = (data) => {
let operableTreeData = deepCopy(data); let operableTreeData = deepCopy(data);
return operableTreeData.map((item) => { return operableTreeData.map((item) => {
if (item.isAdd) { if (item.isAdd) {
...@@ -287,9 +288,9 @@ class TreeComponent extends Component { ...@@ -287,9 +288,9 @@ class TreeComponent extends Component {
return ( return (
<div className={classnames('tree-wrapper', className)}> <div className={classnames('tree-wrapper', className)}>
<div className="tree-btn"> <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="添加拓扑图" /> <img src="/src/assets/bizView/netTopology/add-topo.png" alt="添加拓扑图" />
</div> </div>*/}
</div> </div>
<Tree <Tree
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
...@@ -297,7 +298,7 @@ class TreeComponent extends Component { ...@@ -297,7 +298,7 @@ class TreeComponent extends Component {
onSelect={this.onSelect} onSelect={this.onSelect}
onExpand={this.onExpand} onExpand={this.onExpand}
autoExpandParent={autoExpandParent} autoExpandParent={autoExpandParent}
onRightClick={this.treeNodeonRightClick} // onRightClick={this.treeNodeonRightClick}
> >
{this.renderTreeNodes(treeData)} {this.renderTreeNodes(treeData)}
</Tree> </Tree>
......
...@@ -4,11 +4,11 @@ import { message } from 'amos-framework'; ...@@ -4,11 +4,11 @@ import { message } from 'amos-framework';
import AmosWebSocket from 'amos-websocket'; import AmosWebSocket from 'amos-websocket';
import TopologyComponent from './TopologyComponent'; import TopologyComponent from './TopologyComponent';
import TreeComponent from './TreeComponent'; import TreeComponent from './TreeComponent';
import { getNetTopoAction,updateNetTopoAction } from './../../../services/netTopologyService'; import { getNetTopoAction, updateNetTopoAction } from './../../../services/netTopologyService';
import SysWsURL from './../../../consts/wsUrlConsts'; import SysWsURL from './../../../consts/wsUrlConsts';
import PamsTable from './pamsTable/index'; import PamsTable from './pamsTable/index';
import { UUID } from 'amos-tool'; import { UUID } from 'amos-tool';
import classnames from 'classnames';
class NetTopology extends Component { class NetTopology extends Component {
constructor(props) { constructor(props) {
...@@ -18,12 +18,13 @@ class NetTopology extends Component { ...@@ -18,12 +18,13 @@ class NetTopology extends Component {
wSelectedKeys: '', wSelectedKeys: '',
topologyData: {}, //拓扑图数据 topologyData: {}, //拓扑图数据
pamsDisplay: false, pamsDisplay: false,
pamsTableContent: [] pamsTableContent: [],
isTreeDisplay: true
}; };
} }
// 拓扑图数据初始化 // 拓扑图数据初始化
initTopologyData = (id,value = '') => { initTopologyData = (id, value = '') => {
getNetTopoAction(id).then(data => { getNetTopoAction(id).then(data => {
if (value === 'refresh') { if (value === 'refresh') {
message.success('拓扑图刷新成功!'); message.success('拓扑图刷新成功!');
...@@ -32,27 +33,27 @@ class NetTopology extends Component { ...@@ -32,27 +33,27 @@ class NetTopology extends Component {
topologyData: data topologyData: data
}); });
}); });
} };
// 树选择 // 树选择
onSelect = (selectedKeys) => { onSelect = selectedKeys => {
this.initTopologyData(selectedKeys); this.initTopologyData(selectedKeys);
this.setState({ this.setState({
selectedKeys, selectedKeys,
wSelectedKeys: '' wSelectedKeys: ''
}); });
} };
// 节点数据改变 // 节点数据改变
nodeChange = (e) => { nodeChange = e => {
// console.log(e.model.toJson()); // console.log(e.model.toJson());
this.updateTopologyData = JSON.parse(e.model.toJson()); this.updateTopologyData = JSON.parse(e.model.toJson());
} };
// 保存节点数据 // 保存节点数据
saveTopologyData = () => { saveTopologyData = () => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
const { nodeDataArray,linkDataArray } = this.updateTopologyData; const { nodeDataArray, linkDataArray } = this.updateTopologyData;
const params = { const params = {
treeid: selectedKeys, treeid: selectedKeys,
nodeData: nodeDataArray, nodeData: nodeDataArray,
...@@ -61,58 +62,75 @@ class NetTopology extends Component { ...@@ -61,58 +62,75 @@ class NetTopology extends Component {
updateNetTopoAction(params).then(data => { updateNetTopoAction(params).then(data => {
message.success('拓扑图保存成功!'); message.success('拓扑图保存成功!');
}); });
} };
// 刷新节点 // 刷新节点
refreshTopologyData = () => { refreshTopologyData = () => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys, 'refresh'); this.initTopologyData(selectedKeys, 'refresh');
} };
// 选择节点 // 选择节点
nodeSelectionChanged = (e) => { nodeSelectionChanged = e => {
console.log('e',e); console.log('e', e);
if (e.isSelected) { if (e.isSelected) {
this.setState({pamsDisplay: true }); this.setState({ pamsDisplay: true });
console.log(e.data,"device"); console.log(e.data, 'device');
const pamsTableContent = [<PamsTable data={e.data} key={UUID.uuid('16')}></PamsTable>]; const pamsTableContent = [<PamsTable data={e.data} key={UUID.uuid('16')}></PamsTable>];
this.setState({pamsTableContent }); this.setState({ pamsTableContent });
} else { } else {
console.log('没进来'); console.log('没进来');
this.setState({pamsDisplay: false }); this.setState({ pamsDisplay: false });
}
} }
};
//pams底部表 //pams底部表
renderPamsTable=()=>{ renderPamsTable = () => {
const {pamsTableContent } = this.state; const { pamsTableContent } = this.state;
return pamsTableContent; return pamsTableContent;
} };
// // webSocket 接收消息 // // webSocket 接收消息
handleData = (data) => { handleData = data => {
this.onSelect(data); this.onSelect(data);
this.setState({ this.setState({
wSelectedKeys: data 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() { render() {
const { topologyData,wSelectedKeys,selectedKeys, pamsDisplay } = this.state; const { topologyData, wSelectedKeys, selectedKeys, pamsDisplay, isTreeDisplay } = this.state;
return ( return (
<div className="net-wrapper"> <div className="net-wrapper">
<AmosWebSocket <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.netTopoURI} onMessage={this.handleData} reconnect debug />
ref={node => this.aws = node} <div className={classnames({ 'left-content': isTreeDisplay, 'left-content-close': !isTreeDisplay })}>
url={SysWsURL.netTopoURI} <div className={classnames({ 'view-header': isTreeDisplay, 'view-header-close': !isTreeDisplay })}>
onMessage={this.handleData} <div className="left-view">
reconnect <img className="image-sytle" src="/src/assets/bizView/netTopology/left-view.png" alt="左视图" onClick={() => this.toggleView('right')} />
debug </div>
/> <div className="right-view">
<div className="left-content"> <img className="image-sytle" src="/src/assets/bizView/netTopology/detail-view.png" alt="详细视图" onClick={() => this.toggleView('detail')} />
<TreeComponent </div>
onSelect={this.onSelect} </div>
wSelectedKeys={wSelectedKeys} <TreeComponent onSelect={this.onSelect} wSelectedKeys={wSelectedKeys} />
/>
</div> </div>
<div className="right-content"> <div className="right-content">
<div className="net-topo-header"> <div className="net-topo-header">
...@@ -123,24 +141,16 @@ class NetTopology extends Component { ...@@ -123,24 +141,16 @@ class NetTopology extends Component {
<img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} /> <img src="/src/assets/bizView/netTopology/refresh.png" alt="刷新" onClick={this.refreshTopologyData} />
</div> </div>
</div> </div>
<div className="net-topo-content" style={{height: pamsDisplay ? 'calc(100% - 342px)' : 'calc(100% - 42px) ',overflow: 'auto'}}> <div className="net-topo-content" style={{ height: pamsDisplay ? 'calc(100% - 342px)' : 'calc(100% - 42px) ' }}>
<TopologyComponent <TopologyComponent topologyData={topologyData} nodeChange={this.nodeChange} nodeSelectionChanged={this.nodeSelectionChanged} />
topologyData={topologyData}
nodeChange={this.nodeChange}
nodeSelectionChanged={this.nodeSelectionChanged}
/>
</div> </div>
{ {pamsDisplay ? this.renderPamsTable() : null}
pamsDisplay ? this.renderPamsTable() : null
}
</div> </div>
</div> </div>
); );
} }
} }
NetTopology.propTypes = { NetTopology.propTypes = {};
};
export default NetTopology; export default NetTopology;
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Table, Col, Row, Pagination } from 'amos-antd'; import { Table, Col, Row,Pagination } from 'amos-antd';
import { Search, Icon } from 'amos-framework'; import _amosTool from 'amos-tool';
import './../../../../styles/view/biz/situation/warn.scss'; import BizIcon from './../../../common/icon/BizIcon';
import { Icon,Button } from 'amos-framework';
import { getWarningsData, getWarningsByPageData, getWarningsExcelData } from 'SERVICES/situationService'; 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 = () => [ const columnss = () => [
...@@ -109,16 +116,32 @@ class Warnings extends Component { ...@@ -109,16 +116,32 @@ class Warnings extends Component {
pageSize: 10, pageSize: 10,
total: 1 total: 1
}, },
showFilter: false, //是否显示筛选面板
pageItem1: [ pageItem1: [
{ {
// name: 'alarmLevel', name: 'alarmSourceName',
name: 'sourceId', type: 'LIKE',
value: ''
},
{
name: 'alarmLevel',
value: ''
},
{
name: 'currentState',
value: ''
},
{
name: 'alarmSourceType',
type: 'LIKE',
value: ''
},
{
name: 'alarmSourceIp',
type: 'LIKE', type: 'LIKE',
value: '' value: ''
} }
], ],
//搜索框查询参数 //搜索框查询参数
queryParams: { queryParams: {
searchValue: '' searchValue: ''
...@@ -129,41 +152,20 @@ class Warnings extends Component { ...@@ -129,41 +152,20 @@ class Warnings extends Component {
} }
componentDidMount() { componentDidMount() {
//this.getWarnings(); this.initData();
this.getWarningsByPage();
} }
/** initData = () =>{
* 获取告警信息列表 if (this.props.location.state) {
*/ let sourceId = this.props.location.state.sourceId;
getWarnings = () => { this.onIconClick(null, sourceId.toString());
getWarningsData().then((data) => { } else {
if (data.dataList.content > 0) { this.getWarningsByPage();
this.setState({
warnings: data.dataList.content
})
}
});
} }
getQueryParams = () => {
let { queryParams, pageItem } = this.state;
let params = Object.assign({}, queryParams);
params.pageNumber = pageItem.current;
params.pageSize = pageItem.pageSize;
return params;
} }
getWarningsByPage = (arr) => { getWarningsByPage = (arr) => {
// let { pageItem } = this.state; let { pageItem1, pageItem } = this.state;
// if (arr) {
// pageItem.current = arr;
// this.setState({ pageItem });
// }
// let params = this.getQueryParams();
let { queryParams, pageItem1, pageItem } = this.state;
let current = pageItem.current; let current = pageItem.current;
if (arr) { if (arr) {
...@@ -171,7 +173,6 @@ class Warnings extends Component { ...@@ -171,7 +173,6 @@ class Warnings extends Component {
} }
getWarningsByPageData(pageItem1, current, pageItem.pageSize).then((data) => { getWarningsByPageData(pageItem1, current, pageItem.pageSize).then((data) => {
if (data.content.length > 0) {
this.setState({ this.setState({
warnings: data.content, warnings: data.content,
pageItem: { pageItem: {
...@@ -179,11 +180,9 @@ class Warnings extends Component { ...@@ -179,11 +180,9 @@ class Warnings extends Component {
pageSize: data.size, pageSize: data.size,
total: data.totalElements total: data.totalElements
} }
}) });
let ddd = this.setState; });
}
})
} }
onSelectChange = (selectedRowKeys, selectionRows) => { onSelectChange = (selectedRowKeys, selectionRows) => {
...@@ -206,11 +205,10 @@ class Warnings extends Component { ...@@ -206,11 +205,10 @@ class Warnings extends Component {
* 搜索 * 搜索
*/ */
onIconClick = (e, value) => { onIconClick = (e, value) => {
let { queryParams, pageItem1 } = this.state; if (value === undefined){ value = ''; }
let { pageItem1 } = this.state;
pageItem1[0].value = value; pageItem1[0].value = value;
// queryParams.searchValue = value;
this.setState({ this.setState({
// queryParams
pageItem1 pageItem1
}, () => { }, () => {
this.getWarningsByPage(1); this.getWarningsByPage(1);
...@@ -222,28 +220,62 @@ class Warnings extends Component { ...@@ -222,28 +220,62 @@ class Warnings extends Component {
*/ */
onClickExport = (data) => { onClickExport = (data) => {
let url = getWarningsExcelData(); 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() { render() {
let columns = columnss(); let columns = columnss();
let { selectedRowKeys, warnings, pageItem } = this.state; let { selectedRowKeys,warnings, pageItem,pageItem1, showFilter } = this.state;
const rowSelection = { const rowSelection = {
selectedRowKeys, selectedRowKeys,
onChange: this.onSelectChange onChange: this.onSelectChange
}; };
const filterProps = {
show: showFilter,
onFilterChange: this.handleFilterChange,
pageItem1,
onSearch: this.getWarningsByPage,
handleFilterShow: this.handleFilterShow
};
const wsURL = completeToken(SysWsURL.view3dws);
return ( return (
<div className="amos-warn" style={{ overflow: 'auto', height: '100%' }}> <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"> <div className="amos-warn-up">
<Row > <Row >
<Col span={24} className="amos-warn-top"> <Col span={24} className="amos-warn-top">
<Col span={17}></Col> <Col span={20} />
<Col span={5}> <Col span={1}>
<Search icon="search" style={{ color: '#345FA6' }} placeholder="请输入设备编号" onIconClick={this.onIconClick} /> <div className="amos-warn-top-btn" title="筛选" >
<Button title="筛选" icon={<BizIcon icon="shaixuan" />} onClick={() => { this.handleFilterShow();}} />
</div>
</Col> </Col>
<Col span={1}> <Col span={1}>
<div className="amos-warn-top-btn" title="导出" > <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> </div>
</Col> </Col>
</Col> </Col>
...@@ -256,6 +288,9 @@ class Warnings extends Component { ...@@ -256,6 +288,9 @@ class Warnings extends Component {
/> />
</Col> </Col>
</Row> </Row>
<div>
<WarningsSearchFilter {...filterProps} />
</div>
</div> </div>
<div className="data-list-pagination"> <div className="data-list-pagination">
<Pagination <Pagination
......
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;
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;
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;
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;
import React, { Component } from 'react'; 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 { class DutyInfoView extends Component {
constructor(props){
super(props);
}
render() { render() {
return ( return (
<div className='parent-check-detail' style={{ background: '#33333', height: '100%' }}> <div>
暂未开发 <DutyModellibView {...this.props} />
</div> </div>
); );
} }
......
...@@ -100,7 +100,6 @@ class DangerList extends Component { ...@@ -100,7 +100,6 @@ class DangerList extends Component {
exportDangerList = (searchParam) => { exportDangerList = (searchParam) => {
let url = formatUrl(SpcSerUrl.exportDangerListUrl); let url = formatUrl(SpcSerUrl.exportDangerListUrl);
debugger
fetch(url, { fetch(url, {
method: 'post', method: 'post',
headers: { headers: {
...@@ -111,7 +110,6 @@ class DangerList extends Component { ...@@ -111,7 +110,6 @@ class DangerList extends Component {
}, },
body: JSON.stringify(searchParam) body: JSON.stringify(searchParam)
}).then(e => { }).then(e => {
debugger
e.blob().then(blob => { e.blob().then(blob => {
const a = window.document.createElement('a'); const a = window.document.createElement('a');
const downUrl = window.URL.createObjectURL(blob); const downUrl = window.URL.createObjectURL(blob);
......
...@@ -209,7 +209,6 @@ class DifferentiateView extends Component { ...@@ -209,7 +209,6 @@ class DifferentiateView extends Component {
let startTime = new Date(searchParam.startTime).getTime(); let startTime = new Date(searchParam.startTime).getTime();
let endTime = new Date(searchParam.endTime).getTime(); let endTime = new Date(searchParam.endTime).getTime();
dataList = dataList.filter(item => { dataList = dataList.filter(item => {
debugger
let _time = new Date(item.time).getTime(); let _time = new Date(item.time).getTime();
return _time >= startTime && _time <= endTime; return _time >= startTime && _time <= endTime;
}); });
......
...@@ -232,23 +232,38 @@ class TopologyComponent extends Component { ...@@ -232,23 +232,38 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 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, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text')
)
),
goObj(go.Shape, 'Rectangle', goObj(go.Shape, 'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'rgba(255,255,255,0.2)',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 1 strokeWidth: 1
}, },
......
...@@ -69,8 +69,8 @@ class Pams extends Component { ...@@ -69,8 +69,8 @@ class Pams extends Component {
this.state.cityLine = JSON.parse(this.props.location.state.cityLine); this.state.cityLine = JSON.parse(this.props.location.state.cityLine);
this.viewlineItem(); this.viewlineItem();
} }
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.location.state) { if (nextProps.location.state) {
this.state.cityLine = JSON.parse(nextProps.location.state.cityLine); this.state.cityLine = JSON.parse(nextProps.location.state.cityLine);
...@@ -115,6 +115,7 @@ class Pams extends Component { ...@@ -115,6 +115,7 @@ class Pams extends Component {
initData = () => { initData = () => {
let expandedKeysData = []; let expandedKeysData = [];
getTopoTreeAction().then(data => { getTopoTreeAction().then(data => {
if (data.length > 0) {
data.map(item => { data.map(item => {
expandedKeysData.push(item.id); expandedKeysData.push(item.id);
}); });
...@@ -128,6 +129,17 @@ class Pams extends Component { ...@@ -128,6 +129,17 @@ class Pams extends Component {
}, () => { }, () => {
this.viewlineItem(); 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 { ...@@ -233,6 +245,10 @@ class Pams extends Component {
activeView: 'detail' activeView: 'detail'
}); });
} }
//刷新视图
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], '');
} }
//webSocket 接收消息 //webSocket 接收消息
......
...@@ -9,7 +9,6 @@ const goObj = go.GraphObject.make; ...@@ -9,7 +9,6 @@ const goObj = go.GraphObject.make;
const deviceSource = '/src/assets/bizView/selfsupport'; const deviceSource = '/src/assets/bizView/selfsupport';
class TopologyComponent extends Component { class TopologyComponent extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -27,7 +26,7 @@ class TopologyComponent extends Component { ...@@ -27,7 +26,7 @@ class TopologyComponent extends Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
const { topologyData } = this.props; const { topologyData } = this.props;
const { nodeData, linkData } = topologyData; 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.diagram.model = new go.GraphLinksModel(nodeData, linkData);
this.initTop = 0; this.initTop = 0;
this.initLeft = 0; this.initLeft = 0;
...@@ -37,7 +36,9 @@ class TopologyComponent extends Component { ...@@ -37,7 +36,9 @@ class TopologyComponent extends Component {
// this function is the Node.dragComputation, to limit the movement of the parts // this function is the Node.dragComputation, to limit the movement of the parts
stayInFixedArea = (part, pt, gridpt) => { stayInFixedArea = (part, pt, gridpt) => {
let diagram = part.diagram; let diagram = part.diagram;
if (diagram === null) {return pt;} if (diagram === null) {
return pt;
}
// compute the document area without padding // compute the document area without padding
let v = diagram.documentBounds.copy(); let v = diagram.documentBounds.copy();
v.subtractMargin(diagram.padding); v.subtractMargin(diagram.padding);
...@@ -48,41 +49,41 @@ class TopologyComponent extends Component { ...@@ -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 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); let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
return new go.Point(x, y); return new go.Point(x, y);
} };
// 选择节点 // 选择节点
nodeSelectionChanged = (node) => { nodeSelectionChanged = node => {
this.props.nodeSelectionChanged(node); this.props.nodeSelectionChanged(node);
} };
// 设备资源图片 // 设备资源图片
getDeviceSource = (v) => { getDeviceSource = v => {
return `${deviceSource}/${v}.png`; return `${deviceSource}/${v}.png`;
} };
// 告警图片 // 告警图片
getWarnPic = (v) => { getWarnPic = v => {
if (v) { if (v) {
return '/src/assets/bizView/netTopology/alarm.png'; return '/src/assets/bizView/netTopology/alarm.png';
} }
} };
// 告警高亮 // 告警高亮
warnHighlights = (d,v) => { warnHighlights = (d, v) => {
if (d.warnState) { if (d.warnState) {
this.showWarnHighlights(d, v); this.showWarnHighlights(d, v);
return d.text; return d.text;
} }
return d.text; return d.text;
} };
// 获取线颜色 // 获取线颜色
getLinkColor = (v) => { getLinkColor = v => {
if (v) { if (v) {
return '#FF0000'; return '#FF0000';
} }
return '#00FFFF'; return '#00FFFF';
} };
showWarnHighlights = (d, v) => { showWarnHighlights = (d, v) => {
const oldDom = this[d.key]; const oldDom = this[d.key];
...@@ -104,7 +105,7 @@ class TopologyComponent extends Component { ...@@ -104,7 +105,7 @@ class TopologyComponent extends Component {
customBox.style.height = '100px'; customBox.style.height = '100px';
customBox.style.backgroundPosition = 'center'; customBox.style.backgroundPosition = 'center';
customBox.id = d.key; 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); this.diagram.div.appendChild(customBox);
} }
}; };
...@@ -113,32 +114,38 @@ class TopologyComponent extends Component { ...@@ -113,32 +114,38 @@ class TopologyComponent extends Component {
updateTopo = () => { updateTopo = () => {
const { nodeDataArray } = this.updateTopologyData; const { nodeDataArray } = this.updateTopologyData;
let pos; 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)); pos = this.diagram.transformDocToView(go.Point.parse(item.loc));
this[item.key].style.left = `${pos.x + 18}px`; this[item.key].style.left = `${pos.x + 18}px`;
this[item.key].style.top = `${pos.y + 20}px`; this[item.key].style.top = `${pos.y + 20}px`;
}); });
} };
getNodeDetail = (id) => { getNodeDetail = id => {
nodeDetailTopoAction(id).then(data => { nodeDetailTopoAction(id).then(data => {
this.setState({ this.setState({
detailData: data detailData: data
}); });
}); });
} };
renderDetail = () => { renderDetail = () => {
const { detailData } = this.state; 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 => { {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-name">{item.name}: </div>
<div className="item-value">{item.value}</div> <div className="item-value">{item.value}</div>
</div>); </div>
);
})} })}
</div>); </div>
} );
};
// 提示框 // 提示框
showToolTip = (obj, diagram, tool) => { showToolTip = (obj, diagram, tool) => {
...@@ -148,12 +155,18 @@ class TopologyComponent extends Component { ...@@ -148,12 +155,18 @@ class TopologyComponent extends Component {
toolTipDIV.style.top = `${pt.y}px`; toolTipDIV.style.top = `${pt.y}px`;
toolTipDIV.style.display = 'block'; toolTipDIV.style.display = 'block';
this.getNodeDetail(obj.data.id); this.getNodeDetail(obj.data.id);
} };
//设置椭圆宽度
setEllipseWidth = v => {
let width = v === '西安中心' ? 500 : 300;
return width;
};
hideToolTip = (diagram, tool) => { hideToolTip = (diagram, tool) => {
let toolTipDIV = document.getElementById('toolTipDIV'); let toolTipDIV = document.getElementById('toolTipDIV');
toolTipDIV.style.display = 'none'; toolTipDIV.style.display = 'none';
} };
renderCanvas = () => { renderCanvas = () => {
const { topologyData } = this.props; const { topologyData } = this.props;
...@@ -162,7 +175,7 @@ class TopologyComponent extends Component { ...@@ -162,7 +175,7 @@ class TopologyComponent extends Component {
show: this.showToolTip, show: this.showToolTip,
hide: this.hideToolTip hide: this.hideToolTip
}); });
this.customEditor = goObj(go.HTMLInfo,{ this.customEditor = goObj(go.HTMLInfo, {
show: this.showWarnHighlights show: this.showWarnHighlights
}); });
this.diagram = goObj(go.Diagram, this.refs.goJsDiv, { this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
...@@ -175,53 +188,78 @@ class TopologyComponent extends Component { ...@@ -175,53 +188,78 @@ class TopologyComponent extends Component {
'animationManager.isEnabled': false, // 过渡动画 'animationManager.isEnabled': false, // 过渡动画
'textEditingTool.defaultTextEditor': this.customEditor, 'textEditingTool.defaultTextEditor': this.customEditor,
// fixedBounds: new go.Rect(0, 0, this.refs.goJsDiv.clientWidth, this.refs.goJsDiv.clientHeight), // fixedBounds: new go.Rect(0, 0, this.refs.goJsDiv.clientWidth, this.refs.goJsDiv.clientHeight),
ModelChanged: (e) => { // just for demonstration purposes, ModelChanged: e => {
if (e.isTransactionFinished) { // show the model data in the page's TextArea // just for demonstration purposes,
if (e.isTransactionFinished) {
// show the model data in the page's TextArea
// console.log(e.model.toJson(), 'model'); // console.log(e.model.toJson(), 'model');
this.updateTopologyData = JSON.parse(e.model.toJson()); this.updateTopologyData = JSON.parse(e.model.toJson());
this.props.nodeChange(e); this.props.nodeChange(e);
} }
}, },
SelectionMoved: (e) => { SelectionMoved: e => {
setTimeout(()=> { setTimeout(() => {
this.updateTopo(); this.updateTopo();
},0); }, 0);
}, },
ViewportBoundsChanged: () => { ViewportBoundsChanged: () => {
setTimeout(()=> { setTimeout(() => {
this.updateTopo(); this.updateTopo();
},0); }, 0);
} }
}); });
this.diagram.nodeTemplateMap.add(
this.diagram.nodeTemplateMap.add('Circle', 'Circle',
goObj(go.Node, 'Vertical', goObj(
go.Node,
'Vertical',
{ {
selectionObjectName: 'ICON', selectionObjectName: 'ICON',
locationObjectName: 'ICON' locationObjectName: 'ICON'
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.Panel, 'Auto', goObj(go.Panel, 'Auto', goObj(go.Shape, 'Circle', { name: 'ICON', portId: '', width: 22, height: 22, strokeWidth: 0, fill: '#009dd9' })),
goObj(go.Shape, 'Circle', { name: 'ICON',portId: '', goObj(go.TextBlock, { margin: 15, cursor: 'pointer', font: '15px sans-serif' }, new go.Binding('text', 'text')),
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: selectionAdornmentTemplate: goObj(
goObj(go.Adornment, 'Auto', go.Adornment,
goObj(go.Shape, 'Circle', 'Auto',
{ fill: null, stroke: '#fbfb7b', strokeWidth: 3 }), goObj(go.Shape, 'Circle', { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }),
goObj(go.Placeholder) goObj(go.Placeholder)
) // end Adornment ) // 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', this.diagram.nodeTemplateMap.add(
goObj(go.Node, 'Vertical', 'Picture',
goObj(
go.Node,
'Vertical',
{ {
locationSpot: go.Spot.Center, locationSpot: go.Spot.Center,
locationObjectName: 'ICON', locationObjectName: 'ICON',
...@@ -231,27 +269,31 @@ class TopologyComponent extends Component { ...@@ -231,27 +269,31 @@ class TopologyComponent extends Component {
toolTip: myToolTip toolTip: myToolTip
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.Panel,'Spot', goObj(
goObj(go.Shape, 'Rectangle', go.Panel,
{ fill: 'lightgreen', stroke: null, width: 1, height: 1 }), 'Spot',
goObj(go.Picture, goObj(go.Shape, 'Rectangle', { fill: 'lightgreen', stroke: null, width: 1, height: 1 }),
goObj(
go.Picture,
{ {
width: 65, width: 65,
height: 45, 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', stroke: 'white',
font: '15px sans-serif' font: '15px sans-serif'
}, },
new go.Binding('text', 'warnMessage') new go.Binding('text', 'warnMessage')
)
), ),
), goObj(
goObj(go.Picture, go.Picture,
{ {
margin: 0, margin: 0,
name: 'ICON', name: 'ICON',
...@@ -260,24 +302,23 @@ class TopologyComponent extends Component { ...@@ -260,24 +302,23 @@ class TopologyComponent extends Component {
cursor: 'pointer', cursor: 'pointer',
portId: '' 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' }, { 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: selectionAdornmentTemplate: goObj(go.Adornment, 'Auto', goObj(go.Shape, { fill: null, stroke: '#fbfb7b', strokeWidth: 3 }), goObj(go.Placeholder)) // end Adornment
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, resizable: true,
locationObjectName: 'SHAPE', locationObjectName: 'SHAPE',
...@@ -287,47 +328,61 @@ class TopologyComponent extends Component { ...@@ -287,47 +328,61 @@ class TopologyComponent extends Component {
// selectionChanged: this.nodeSelectionChanged // selectionChanged: this.nodeSelectionChanged
}, },
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 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, height: 24,
font: 'Bold 14px Sans-Serif', font: 'Bold 14px Sans-Serif',
stroke: 'white', textAlign: 'left',
background: '#1c9ad2', margin: new go.Margin(0, 0, 0, 12),
margin: 5, verticalAlignment: go.Spot.Center,
textAlign: 'center', alignment: go.Spot.TopLeft
verticalAlignment: go.Spot.Center
}, },
new go.Binding('text')), new go.Binding('text')
goObj(go.Shape, 'Rectangle', //new go.Binding('text', (v) => this.setFontText(v))
)
),
goObj(
go.Shape,
'Rectangle',
{ {
name: 'SHAPE', name: 'SHAPE',
parameter1: 14, parameter1: 14,
fill: 'rgba(185,185,185,0.2)', fill: 'rgba(255,255,255,0.2)',
stroke: 'rgba(28,154,210,1)', stroke: 'rgba(28,154,210,1)',
strokeWidth: 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 = this.diagram.linkTemplate = goObj(go.Link, goObj(go.Shape, { strokeWidth: 3 }, new go.Binding('stroke', 'warnState', v => this.getLinkColor(v))));
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); this.diagram.model = new go.GraphLinksModel(nodeData, linkData);
} };
render() { render() {
const { className,style, topologyData } = this.props; const { className, style, topologyData } = this.props;
const { nodeData = [] } = topologyData || {}; const { nodeData = [] } = topologyData || {};
return ( return (
<div ref="goJsDiv" style={style} className={classnames('topology-net', className)}> <div ref="goJsDiv" style={style} className={classnames('topology-net', className)}>
{ {nodeData
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} />) .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()} {nodeData.length > 0 && this.renderDetail()}
</div> </div>
); );
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { message } from 'amos-framework'; import { message } from 'amos-framework';
import dt2react from 'dt2react'; import dt2react from 'dt2react';
import AmosWebSocket from 'amos-websocket'; import AmosWebSocket from 'amos-websocket';
import TopologyComponent from './TopologyComponent'; import TopologyComponent from './TopologyComponent';
import TreeComponent from './TreeComponent'; import TreeComponent from './TreeComponent';
import mqtt from 'mqtt'; import { getDeivceListAction } from './../../../services/selfServices';
import * as endConf from 'amos-processor/lib/config/endconf'; import { getTopoTreeByTypeAction, getNodesByTypeAndTreeIdAction, saveNodesByTypeUrlAction } from './../../../services/monitorService';
import { getSelfTopoTreeAction, getSelfTopographyAction, updateSelfTopographyAction, getTopographyEventsAction, getDeivceListAction } from './../../../services/selfServices';
// import AmosGridTable from './../../bizview/common/tableComponent/table/AmosGridTable';
import AmosGridTable from './../../component/table/table/AmosGridTable'; import AmosGridTable from './../../component/table/table/AmosGridTable';
import SysWsURL from './../../../consts/wsUrlConsts'; import SysWsURL from './../../../consts/wsUrlConsts';
import { getTypeBySystem } from './../../bank/financialCityLan/conf';
const AmosConfig = endConf.AmosConfig; const checkListColumns = self => {
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) => {
return [ return [
{ {
title: '时间', title: '时间',
...@@ -42,9 +26,10 @@ const checkListColumns = (self) => { ...@@ -42,9 +26,10 @@ const checkListColumns = (self) => {
} else { } else {
font.innerText = text; font.innerText = text;
} }
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div> return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
} }
}, { },
{
title: '设备名称', title: '设备名称',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
...@@ -57,9 +42,10 @@ const checkListColumns = (self) => { ...@@ -57,9 +42,10 @@ const checkListColumns = (self) => {
} else { } else {
font.innerText = text; font.innerText = text;
} }
return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }} ></div> return <div dangerouslySetInnerHTML={{ __html: font.outerHTML }}></div>;
} }
}, { },
{
title: 'ping结果', title: 'ping结果',
dataIndex: 'deviceStatus', dataIndex: 'deviceStatus',
key: 'deviceStatus', key: 'deviceStatus',
...@@ -77,19 +63,18 @@ const checkListColumns = (self) => { ...@@ -77,19 +63,18 @@ const checkListColumns = (self) => {
font.style.color = 'red'; font.style.color = 'red';
p.append(font); p.append(font);
} }
return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }} ></div> return <div dangerouslySetInnerHTML={{ __html: p.outerHTML }}></div>;
} }
} }
]; ];
}; };
//偏移 //偏移
const offsetHeight = 110; const offsetHeight = 110;
const defaultHeight = 450; const defaultHeight = 450;
const type = getTypeBySystem('SelfSupport');
class SelfSupport extends Component { class SelfSupport extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.pageConfig = { this.pageConfig = {
...@@ -122,105 +107,19 @@ class SelfSupport extends Component { ...@@ -122,105 +107,19 @@ class SelfSupport extends Component {
selectedRowKeys: [], selectedRowKeys: [],
pagination: true, pagination: true,
isChecked: false, isChecked: false,
tableDataXianshi: true
}; };
this.updateTopologyData = {}; this.updateTopologyData = {};
this.mapView = true; this.mapView = true;
} }
componentWillMount() { 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;
};
// 数据初始化 // 数据初始化
// eslint-disable-next-line react/sort-comp
initData = () => { initData = () => {
let expandedKeysData = []; let expandedKeysData = [];
getSelfTopoTreeAction().then(data => { getTopoTreeByTypeAction(type).then(data => {
if (data.length > 0) {
data.map(item => { data.map(item => {
expandedKeysData.push(item.id); expandedKeysData.push(item.id);
}); });
...@@ -231,15 +130,32 @@ class SelfSupport extends Component { ...@@ -231,15 +130,32 @@ class SelfSupport extends Component {
selectedKeys: [data[0].id], selectedKeys: [data[0].id],
expandedKeys: expandedKeysData, expandedKeys: expandedKeysData,
pHeight: this.getPanelHeight() 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 = '') => { initTopologyData = (id, value = '') => {
getSelfTopographyAction(id).then(data => { getNodesByTypeAndTreeIdAction(type, id).then(data => {
if (value === 'refresh') { if (value === 'refresh') {
message.success('拓扑图刷新成功!'); message.success('拓扑图刷新成功!');
} }
...@@ -249,32 +165,23 @@ class SelfSupport extends Component { ...@@ -249,32 +165,23 @@ class SelfSupport extends Component {
topologyData: data topologyData: data
}); });
}); });
let tatableDataXianshi = this.state.tableDataXianshi;
if (true === tatableDataXianshi) {
getDeivceListAction(0, 10, null).then(data => { getDeivceListAction(0, 10, null).then(data => {
// console.log('表格刷新成功!'); // console.log('表格刷新成功!');
this.setState({ tableData: data.content, totalCount: data.totalElements }); this.setState({ tableData: data.content, totalCount: data.totalElements });
}); });
} }
};
// // 拓扑图事件数据初始化
// initTopologyEventData = () => {
// debugger
// getDeivceListAction().then(data => {
// this.setState({
// tableData: data
// });
// });
// }
/** /**
* 获取表格所选则的行数据 * 获取表格所选则的行数据
*/ */
getSelectedRows = (selectedRows, selectedRowKeys) => { getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys }); this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
}; };
// 树选择 // 树选择
onSelect = (selectedKeys, e) => { onSelect = (selectedKeys, e) => {
if (selectedKeys.length && !e.node.props.parent) { if (selectedKeys.length && !e.node.props.parent) {
...@@ -284,61 +191,42 @@ class SelfSupport extends Component { ...@@ -284,61 +191,42 @@ class SelfSupport extends Component {
selectedKeys selectedKeys
}); });
} }
} };
mapLineClick = (data) => {
window.localStorage.removeItem('cityLine');
this.state.cityLine = data;
this.viewlineItem();
}
// 树展开 // 树展开
onExpand = (expandedKeys) => { onExpand = expandedKeys => {
this.setState({ this.setState({
expandedKeys, expandedKeys,
autoExpandParent: false autoExpandParent: false
}); });
}; };
queryEquipPage = () => { queryEquipPage = () => {
let tableDataXianshi = this.state.tableDataXianshi;
if (true === tableDataXianshi) {
let pageConfig = this.pageConfig; let pageConfig = this.pageConfig;
let pageNumber = pageConfig.pageNumber - 1; let pageNumber = pageConfig.pageNumber - 1;
let pageSize = pageConfig.pageSize; let pageSize = pageConfig.pageSize;
getDeivceListAction(pageNumber, pageSize, null).then(data => { getDeivceListAction(pageNumber, pageSize, null).then(data => {
this.setState({ tableData: data.content, totalCount: data.totalElements }); 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); // console.log('e',e);
if (e.isSelected) { } if (e.isSelected) {
} }
};
// 节点数据改变 // 节点数据改变
nodeChange = (e) => { nodeChange = e => {
// console.log(e.model.toJson()); // console.log(e.model.toJson());
this.updateTopologyData = JSON.parse(e.model.toJson()); this.updateTopologyData = JSON.parse(e.model.toJson());
} };
// 保存节点数据 // 保存节点数据
saveTopologyData = () => { saveTopologyData = () => {
...@@ -349,10 +237,10 @@ class SelfSupport extends Component { ...@@ -349,10 +237,10 @@ class SelfSupport extends Component {
nodeData: nodeDataArray, nodeData: nodeDataArray,
linkData: linkDataArray linkData: linkDataArray
}; };
updateSelfTopographyAction(params).then(data => { saveNodesByTypeUrlAction(type, params).then(data => {
message.success('拓扑图保存成功!'); message.success('拓扑图保存成功!');
}); });
} };
/** /**
* 分页设置参数 * 分页设置参数
...@@ -366,8 +254,8 @@ class SelfSupport extends Component { ...@@ -366,8 +254,8 @@ class SelfSupport extends Component {
}; };
/** /**
* 获取表格刷新方法 * 获取表格刷新方法
*/ */
reload = r => { reload = r => {
this.setState( this.setState(
{ {
...@@ -384,10 +272,10 @@ class SelfSupport extends Component { ...@@ -384,10 +272,10 @@ class SelfSupport extends Component {
refreshTopologyData = () => { refreshTopologyData = () => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], 'refresh'); this.initTopologyData(selectedKeys[0], 'refresh');
} };
// 视图切换 // 视图切换
toggleView = (value) => { toggleView = value => {
if (value === 'left') { if (value === 'left') {
this.setState({ this.setState({
isTreeDisplay: true, isTreeDisplay: true,
...@@ -401,14 +289,17 @@ class SelfSupport extends Component { ...@@ -401,14 +289,17 @@ class SelfSupport extends Component {
activeView: 'detail' activeView: 'detail'
}); });
} }
}
//webSocket 接收消息 //拓扑图刷新
handleData = (data) => {
const { selectedKeys } = this.state; const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], ''); this.initTopologyData(selectedKeys[0], '');
} };
//webSocket 接收消息
handleData = data => {
const { selectedKeys } = this.state;
this.initTopologyData(selectedKeys[0], '');
};
render() { render() {
const { treeData, selectedKeys, expandedKeys, isTreeDisplay, totalCount, selectedRowKeys, pagination, isChecked } = this.state; const { treeData, selectedKeys, expandedKeys, isTreeDisplay, totalCount, selectedRowKeys, pagination, isChecked } = this.state;
...@@ -424,17 +315,11 @@ class SelfSupport extends Component { ...@@ -424,17 +315,11 @@ class SelfSupport extends Component {
} }
} }
const { topologyData } = this.state; const { topologyData } = this.state;
const { tableData, isTableDisplay, pHeight, activeView } = this.state; const { tableData, isTableDisplay, activeView } = this.state;
console.log(topologyData); console.log(topologyData);
return ( return (
<div className="self-wrapper"> <div className="self-wrapper">
<AmosWebSocket <AmosWebSocket ref={node => (this.aws = node)} url={SysWsURL.selfURI} onMessage={this.handleData} reconnect debug />
ref={node => this.aws = node}
url={SysWsURL.selfURI}
onMessage={this.handleData}
reconnect
debug
/>
<div className="self-header"> <div className="self-header">
<div className="self-view"> <div className="self-view">
<div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}> <div className={classnames('left-view', { 'left-active-view': activeView === 'left' })}>
...@@ -454,8 +339,8 @@ class SelfSupport extends Component { ...@@ -454,8 +339,8 @@ class SelfSupport extends Component {
</div> </div>
</div> </div>
<div className="self-content"> <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 <TreeComponent
treeData={treeData} treeData={treeData}
//treeData={moniTreeData} //treeData={moniTreeData}
...@@ -464,17 +349,10 @@ class SelfSupport extends Component { ...@@ -464,17 +349,10 @@ class SelfSupport extends Component {
// onSelect={this.onSelect} // onSelect={this.onSelect}
onExpand={this.onExpand} onExpand={this.onExpand}
/> />
</div>} </div>
}
<div className={`middle-content ${isTreeDisplay && isTableDisplay ? '' : 'only-middle'}`}> <div className={`middle-content ${isTreeDisplay && isTableDisplay ? '' : 'only-middle'}`}>
<div className="paslogy-content"> <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"> <div className="net-topo-content">
<TopologyComponent <TopologyComponent
topologyData={topologyData} topologyData={topologyData}
...@@ -485,36 +363,10 @@ class SelfSupport extends Component { ...@@ -485,36 +363,10 @@ class SelfSupport extends Component {
</div> </div>
</div> </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={classnames({ 'right-content': isTableDisplay, 'right-content-close': !isTableDisplay })}>
<div className="devive-title"> <div className="devive-title">日志</div>
日志 <div className="device-lists" ref={node => (this.tableNode = node)}>
</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> */}
<AmosGridTable <AmosGridTable
columns={checkListColumns(this)} columns={checkListColumns(this)}
callBack={this.reload} callBack={this.reload}
...@@ -540,8 +392,6 @@ class SelfSupport extends Component { ...@@ -540,8 +392,6 @@ class SelfSupport extends Component {
} }
} }
SelfSupport.propTypes = { SelfSupport.propTypes = {};
};
export default SelfSupport; export default SelfSupport;
...@@ -64,7 +64,6 @@ class AlarmSearch extends Component { ...@@ -64,7 +64,6 @@ class AlarmSearch extends Component {
}; };
searchData = () => { searchData = () => {
debugger
let { searchParam } = this.state; let { searchParam } = this.state;
this.props.setSearchParam(searchParam); this.props.setSearchParam(searchParam);
}; };
......
...@@ -137,7 +137,7 @@ class Header extends Component { ...@@ -137,7 +137,7 @@ class Header extends Component {
} }
Header.defaultProps = { Header.defaultProps = {
height: 250 height: 310
}; };
Header.propTypes = { Header.propTypes = {
......
...@@ -152,7 +152,7 @@ class MainFrame extends Component { ...@@ -152,7 +152,7 @@ class MainFrame extends Component {
<div className="view-port"> <div className="view-port">
<Header <Header
navs={extendSystem} navs={extendSystem}
logoText={'运维安全预控执行系统'} logoText={'西安CCPC运维安全预控执行系统'}
onLogoClick={this.onLogoClick} onLogoClick={this.onLogoClick}
onNavItemClick={this.handleMenuClick} onNavItemClick={this.handleMenuClick}
renderSubmenu={renderSubmenu} renderSubmenu={renderSubmenu}
......
...@@ -5,7 +5,7 @@ import { Select, Form, Button } from 'amos-framework'; ...@@ -5,7 +5,7 @@ import { Select, Form, Button } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf'; import * as endConf from 'amos-processor/lib/config/endconf';
import { setRegion } from './../../utils/cacheUtils'; import { setRegion } from './../../utils/cacheUtils';
import { tellRegionSelectAction } from './../../services/navApi'; import { tellRegionSelectAction } from './../../services/navApi';
import { getCurrentUser,getDictionaryList } from './../../services/securityService'; import { getCurrentUser, getDictionaryList } from './../../services/securityService';
import { fetchRegionSelectAction } from './../../services/checkInfoService'; import { fetchRegionSelectAction } from './../../services/checkInfoService';
import { tirggerTransTopic } from './../3dview/dataProcessor'; import { tirggerTransTopic } from './../3dview/dataProcessor';
import { regionSelectAction } from './../../services/bizService'; import { regionSelectAction } from './../../services/bizService';
...@@ -33,7 +33,7 @@ class RegionSelect extends Component { ...@@ -33,7 +33,7 @@ class RegionSelect extends Component {
this.state = { this.state = {
userInfo: {}, userInfo: {},
reginParams: {}, reginParams: {},
dictionaryList:[] dictionaryList: []
}; };
} }
...@@ -47,18 +47,19 @@ class RegionSelect extends Component { ...@@ -47,18 +47,19 @@ class RegionSelect extends Component {
* 查询组织机构字典 * 查询组织机构字典
*/ */
getDicCode = (dicCode) => { getDicCode = (dicCode) => {
getDictionaryList(dicCode).then(data =>{ getDictionaryList(dicCode).then(data => {
this.setState({ this.setState({
dictionaryList:data dictionaryList: data
}) });
}) lsTool.write('dictionaryList', JSON.stringify(data));
});
} }
onClick = () => { onClick = () => {
const { reginParams,dictionaryList } = this.state; const { reginParams } = this.state;
//获取当前登陆部门 //获取当前登陆部门
lsTool.write('dictionaryList', JSON.stringify(dictionaryList)); //lsTool.write('dictionaryList', JSON.stringify(dictionaryList));
lsTool.write("department", JSON.stringify(reginParams.department)) lsTool.write("department", JSON.stringify(reginParams.department));
lsTool.remove('selectedRole'); lsTool.remove('selectedRole');
regionSelectAction(reginParams).then( regionSelectAction(reginParams).then(
data => { data => {
...@@ -118,7 +119,7 @@ class RegionSelect extends Component { ...@@ -118,7 +119,7 @@ class RegionSelect extends Component {
roles = orgRoles[value]; roles = orgRoles[value];
} }
if (key === 'department') { if (key === 'department') {
reginParams.department = departments.find(item => item &&item.sequenceNbr === value); reginParams.department = departments.find(item => item && item.sequenceNbr === value);
roles = orgRoles[value]; roles = orgRoles[value];
} }
if (key === 'role') { if (key === 'role') {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment