Skip to content

A
amos-convertor-view
Commit 865d4255 authored by suhuiguang's avatar suhuiguang
Browse files
Options

Merge branch 'dev_upgrade' of http://172.16.10.76/station/amos-convertor-view into dev_upgrade

parents 4d44f0af 3f9e7d2b
Hide whitespace changes
Inline Side-by-side
Showing with 1867 additions and 626 deletions
src/consts/imgStatic.js
View file @ 865d4255
......@@ -159,6 +159,25 @@ export default {
notice: require('./../assets/main/notice.png'),
setting: require('./../assets/main/setting.png')
},
panoramicIcon: {
safetyrate: require('./../assets/panoramic/statistical/main_icon_safetyrate.png'),
safetyup: require('./../assets/panoramic/statistical/main_icon_up.png'),
safetyexecute: require('./../assets/panoramic/statistical/main_icon_safetyexecute.png'),
select_warn: require('./../assets/panoramic/statistical/main_icon_select_warntitle.png'),
select_fire: require('./../assets/panoramic/statistical/main_icon_select_fire.png'),
select_risk: require('./../assets/panoramic/statistical/main_icon_select_risk.png'),
select_check: require('./../assets/panoramic/statistical/main_icon_select_check.png'),
unselect_warn: require('./../assets/panoramic/statistical/main_icon_unselect_warntitle.png'),
unselect_fire: require('./../assets/panoramic/statistical/main_icon_unselect_fire.png'),
unselect_risk: require('./../assets/panoramic/statistical/main_icon_unselect_risk.png'),
unselect_check: require('./../assets/panoramic/statistical/main_icon_unselect_check.png'),
arrow_warn: require('./../assets/panoramic/statistical/main_icon_left_arrow.png'),
unfold: require('./../assets/panoramic/statistical/main_icon_left_unfold.png'),
model_fire: require('./../assets/panoramic/statistical/main_icon_model_fire.png'),
model_risk: require('./../assets/panoramic/statistical/main_icon_model_risk.png'),
model_patrol: require('./../assets/panoramic/statistical/main_icon_model_patrol.png'),
model_close: require('./../assets/panoramic/statistical/main_icon_model_close.png')
}
};
export const marker3DIoncMapper = {
......
src/consts/urlConsts.js
View file @ 865d4255
......@@ -86,6 +86,7 @@ export const FscSerUrl = {
safetyIndexWeekUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
statisticsCheckUrl: completePrefix(patrolURI, 'api/view3d/statistics/check'),//今日巡检统计接口
statisticsDutyUrl: completePrefix(patrolURI, 'api/view3d/statistics/duty'), //今日值班统计
onlineDayUrl: completePrefix(patrolURI, 'api/view3d/online/date'), //消防安全执行天数
//*******************************************************************************
......@@ -263,14 +264,14 @@ selectedOrgInfoUrl: completePrefix(baseURI, 'api/region/current'),//获取选择
};
export const ModuleEditUrl = {
export const ModuleEditUrl = {
getAreaTreeUrl:completePrefix(baseURI, 'api/view3d/region/tree'),//
getPointTreeUrl:completePrefix(baseURI, 'api/view3d/point/tree'),
saveAreaDataUrl:completePrefix(baseURI, 'api/view3d/region/bind'),//
getPointTypeUrl:completePrefix(baseURI, 'api/view3d/point/type'),
getPointListUrl:completePrefix(baseURI, 'api/view3d/init3dViewNode'),//获取初始三维点 type=impEquipment&riskSourceId=1
savePointListUrl:completePrefix(baseURI, 'api/view3d/point/bind'),//批量保存点绑定关系
savePointListUrl:completePrefix(baseURI, 'api/view3d/point/bind'),//批量保存点绑定关系
}
export const securityKey = 'qianyue(xian),fsc,xunjianpassword';
src/consts/wsUrlConsts.js
View file @ 865d4255
......@@ -16,7 +16,8 @@ const getToken = () => {
export default {
rulews: completePrefix(view3dURI, 'rule.ws?token={token}'),
view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}')
view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}'),
viewIndexws: completePrefix(baseURI, '3dViewMessage')
};
export const completeToken = (url) => {
......
src/services/panoramicService.js
View file @ 865d4255
......@@ -8,46 +8,53 @@ import { commonGet, commonPost } from './../utils/request';
*/
export const safetyIndexAction = () => {
return commonGet(FscSerUrl.safetyIndexUrl);
}
};
/**
* 今日安全指数详情
*/
export const safetyIndexDetailAction = ( type ) => {
return commonGet(formatUrl(FscSerUrl.safetyIndexDetailUrl,{ type }));
}
};
/**
* 消防安全执行天数
*/
export const onlineDayAction = ( ) => {
return commonGet(formatUrl(FscSerUrl.onlineDayUrl));
};
/**
* 告警列表最新5条
*/
export const safetyExecuteListAction = ( type ) => {
return commonGet(formatUrl(FscSerUrl.safetyExecuteListUrl,{ type }));
}
};
/**
* 设备状态消息最新5条
*/
export const equipStatusListAction = () => {
return commonGet(FscSerUrl.equipStatusListUrl);
}
};
/**
* 一周安全指数趋势查询
*/
export const safetyIndexWeekAction = () => {
return commonGet(FscSerUrl.safetyIndexWeekUrl);
}
};
/**
* 今日巡检统计接口
*/
export const statisticsCheckAction = () => {
return commonGet(FscSerUrl.statisticsCheckUrl);
}
};
/**
* 今日值班统计
*/
export const statisticsDutyAction = () => {
return commonGet(FscSerUrl.statisticsDutyUrl);
}
\ No newline at end of file
};
src/styles/view/3dview/moduleEdit.scss
View file @ 865d4255
......@@ -120,6 +120,14 @@
font-size: 15px;
}
}
.icon {
margin-left: 5px;
vertical-align: middle;
img {
vertical-align: initial;
margin-left: 10px;
}
}
}
.bottomBtns {
padding-top: 15px;
......@@ -153,8 +161,18 @@
background-color: rgba(10, 53, 62, 0.68);
border: 1px solid rgba(46, 217, 239, 0.59);
padding: 12px;
color: #fff;
.amos-form-item-label {
color: #fff;
}
.topForm {
height: calc(100% - 48px);
.amos-input {
width: 100%;
}
.amos-select {
width: 100%;
}
}
}
.bottomBtns {
......@@ -172,6 +190,12 @@
background: url('/src/assets/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none;
}
.cancelBtn {
width: 100px;
height: 33px;
background: url('/src/assets/moduleEdit/cancelBtn.png') no-repeat 100% 100%;
border: none;
}
}
}
......
src/styles/view/panoramic/statistical.scss
View file @ 865d4255
.statistical{
position: absolute;
.statistical {
position: absolute;
height: 100%;
width: 100%;
.statistical-left {
height: 100%;
width: 100%;
width: 350px;
float: left;
.statistical-left{
height: 100%;
width: 350px;
float: left;
.equipStatusList{
padding-left: 97px;
padding-top: 10px;
height: 33.3%;
.title-child{
width: 100%;
height: 55px;
//margin-top: 5px;
}
.title-date{
height: 20px;
font-size: 13px;
}
.title-text{
font-size: 15px;
}
}
.equipStatusList{
height: 33.3%;
.safetyExecuteList{
height: 40%;
margin-left: 37px;
.up{
height: 90px;
.left{
float: left;
width:36px;
height:36px;
border:1px solid;
color: #00c3ff;
border-radius: 30px;
padding-top: 4px;
text-align: center;
}
.safetyExecuteList{
height: 33.3%;
.right{
float: left;
padding-left: 20px;
.date{
font-size: 44px;
color: rgba(1,248,64,1);;
}
.day{
margin-left: 5px;
font-size: 18px;
}
span{
font-size: 18px;
}
}
}
.down{
width: 98%;
height: 245px;
margin-left: 30px;
background-image: url('../../assets/panoramic/statistical/main_bg_warning.png');
background-repeat: repeat;
background-size: 100% 100%;
.title{
text-align: left;
padding-top: 15px;
height: 50px;
.safetyIndex{
height: 33.3%;
display: flex;
margin-left: 37px;
padding-top: 65px;
.safetyIndex-icon{
width:36px;
height:36px;
border:1px solid;
border-radius: 50%;
border-color: #00C3FF;
padding: 5px 7px;
.safetyIndex-safetyrate{
width: 20px;
height: 25px;
}
.icon{
float: left;
display: inline;
img{
padding-left: 20px;
}
}
.safetyIndex-content{
height: 100%;
margin-left: 30px;
margin-right: 20px;
.arrow{
float: right;
cursor: pointer;
}
.content-item{
margin: 5px;
}
.describe{
position: absolute;
width: 70px;
margin-top: -5px;
margin-left: 60px;
font-size: 16px;
color: rgba(240,223,45,1);
}
.safetyIndex-content-row{
display: flex;
align-items: flex-end;
.bottom-line{
height: 2px;
width: 100%;
margin-top: 25px;
background: radial-gradient(red 24%, black 100%);
}
}
.content{
padding-left: 30px;
width: 90%;
.number-large{
font-size: 44px;
color: #00C3FF;
}
span{
position: absolute;
margin-top: 3px;
font-size: 14px;
color: rgba(255,255,255,1);
}
.number-unit{
font-size: 16px;
margin-bottom: 10px;
.title-child{
height: 35px;
border-bottom: 1px solid rgba(196,86,86,0.3);
}
}
}
}
.common-title{
font-size: 16px;
}
.row-up{
margin-top: 3px;
width: 15px;
height: 19px;
}
}
}
.safetyIndex {
height: 33.3%;
display: flex;
margin-left: 37px;
padding-top: 65px;
}
.safetyIndex-icon {
width: 36px;
height: 36px;
border: 1px solid;
border-radius: 50%;
border-color: #00c3ff;
padding: 5px 7px;
.safetyIndex-safetyrate {
width: 20px;
height: 25px;
}
}
.safetyIndex-content {
height: 100%;
margin-left: 30px;
margin-right: 20px;
&:hover{
background-color: rgba(199,223,245,0.3);
}
.content-item {
margin: 5px;
}
.safetyIndex-content-row {
display: flex;
align-items: flex-end;
.number-large {
font-size: 44px;
color: #00c3ff;
}
.safetyIndex-content-chart{
background-image: url('/src/assets/panoramic/statistical/main_bg_dashboard.png') !important;
background-repeat:no-repeat !important;
margin-top: -25px !important;
width: 125px !important;
height: 220px !important;
.number-unit {
font-size: 16px;
margin-bottom: 10px;
.row-up {
margin-top: 3px;
width: 15px;
height: 19px;
}
}
}
}
.safetyIndex-content-chart {
background-image: url('/src/assets/panoramic/statistical/main_bg_dashboard.png') !important;
background-repeat: no-repeat !important;
margin-top: -25px !important;
width: 125px !important;
height: 220px !important;
}
}
}
.statistical-right {
height: 100%;
width: 355px;
float: right;
padding-top: 40px;
.statistical-right{
.echart-week {
width: 321px !important;
height: 248px !important;
background-image: url('/src/assets/panoramic/statistical/main_bg_line_bg.png') !important;
background-repeat: no-repeat !important;
background-position: 31px 47px !important;
left: 24px;
}
.titleIcon {
display: inline-block;
height: 20px;
width: 20px;
vertical-align: middle;
margin-top: -4px;
}
.safetyIndexWeek {
height: 33.3%;
margin-bottom: -5%;
.content-week-font-style {
width: 146px;
height: 18px;
font-size: 18px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(112, 238, 255, 1);
line-height: 65px;
}
}
.statisticsCheck {
height: 50%;
margin-bottom: -106px;
.check-content {
height: 100%;
width: 353px;
float: right;
padding-top: 65px;
.echart-week {
width: 321px !important;
height: 248px!important;
background-image: url('/src/assets/panoramic/statistical/main_bg_line_bg.png') !important;
background-repeat:no-repeat!important;
background-position:31px 47px!important;
.content-xj-top {
height: 10%;
width: 146px;
font-size: 18px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(112, 238, 255, 1);
line-height: 65px;
}
.titleIcon {
display: inline-block;
height: 20px;
width: 20px;
vertical-align: middle;
}
.safetyIndexWeek{
height: 33.3%;
margin-bottom: -5%;
.content-week-font-style {
width:146px;
height:18px;
font-size:18px;
font-family:SourceHanSansCN-Medium,SourceHanSansCN;
font-weight:500;
color:rgba(112,238,255,1);
line-height:65px;
}
.content-xj-middle {
height: 44%;
margin-top: 4%;
}
.statisticsCheck{
height: 50%;
margin-bottom: -106px;
.check-content {
height:100%;
.content-xj-top {
height: 10%;
width:146px;
font-size:18px;
font-family:SourceHanSansCN-Medium,SourceHanSansCN;
font-weight:500;
color:rgba(112,238,255,1);
line-height:65px;
}
.content-xj-middle {
height: 44%;
margin-top: 4%;
}
.content-xj-bottom {
height: 37%;
margin-top: 12px;
.content-week-font {
font-size:16px;
font-family:SourceHanSansCN-Regular,SourceHanSansCN;
font-weight:400;
color:rgba(255,255,255,1);
line-height:24px;
}
.content-font-number {
font-size:16px;
font-family:SourceHanSansCN-Regular,SourceHanSansCN;
font-weight:400;
color:rgba(255,255,255,1);
line-height:24px;
float: right;
}
.yellow-div{
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_buhege.png') !important;
background-repeat:no-repeat !important;
width:100%;
padding-top: 6px;
padding-left: 20px;
.yellow-div-content{
width:252px;
}
}
.green-div{
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_hege.png') !important;
background-repeat:no-repeat !important;
width:100%;
padding-top: 6px;
padding-left: 20px;
.green-div-content{
width:252px;
}
}
.red-div{
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_louyan.png') !important;
background-repeat:no-repeat !important;
width:100%;
padding-top: 6px;
padding-left: 20px;
.red-div-content{
width:252px;
}
}
.grey-div{
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_weizhixing.png') !important;
background-repeat:no-repeat !important;
width:100%;
padding-top: 6px;
padding-left: 20px;
.grey-div-content{
width:252px;
}
}
}
}
.div-echars{
margin-left: 17px;
background-image: url('/src/assets/panoramic/statistical/circle_bg.png') !important;
background-repeat:no-repeat !important;
height: 200px !important;
background-position:60px 14px!important
.content-xj-bottom {
height: 37%;
margin-top: 12px;
.content-week-font {
font-size: 16px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 24px;
}
.content-font-number {
font-size: 16px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 24px;
float: right;
}
.yellow-div {
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_buhege.png') !important;
background-repeat: no-repeat !important;
width: 100%;
padding-top: 6px;
padding-left: 20px;
.yellow-div-content {
width: 252px;
}
}
.green-div {
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_hege.png') !important;
background-repeat: no-repeat !important;
width: 100%;
padding-top: 6px;
padding-left: 20px;
.green-div-content {
width: 252px;
}
}
.red-div {
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_louyan.png') !important;
background-repeat: no-repeat !important;
width: 100%;
padding-top: 6px;
padding-left: 20px;
.red-div-content {
width: 252px;
}
}
.grey-div {
background-image: url('/src/assets/panoramic/statistical/main_bg_tag_weizhixing.png') !important;
background-repeat: no-repeat !important;
width: 100%;
padding-top: 6px;
padding-left: 20px;
.grey-div-content {
width: 252px;
}
}
}
}
.div-echars {
margin-left: 17px;
background-image: url('/src/assets/panoramic/statistical/circle_bg.png') !important;
background-repeat: no-repeat !important;
height: 200px !important;
background-position: 60px 14px !important;
}
}
.statisticsDuty {
height: 16.7%;
.content-duty-font-style {
width: 146px;
height: 18px;
font-size: 18px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(112, 238, 255, 1);
line-height: 65px;
margin-top: 25%;
margin-bottom: 14%;
}
.content-picture-div {
height: 100%;
width: 100%;
.content-picture-left {
width: 33.3%;
float: left;
display: inline-flex;
.statisticsDuty{
height: 16.7%;
.content-duty-font-style {
width:146px;
height:18px;
font-size:18px;
font-family:SourceHanSansCN-Medium,SourceHanSansCN;
font-weight:500;
color:rgba(112,238,255,1);
line-height:65px;
margin-top: 25%;
margin-bottom: 14%;
.content-image {
background-image: url('/src/assets/panoramic/statistical/main_icon_baoan.png') !important;
background-repeat: no-repeat !important;
height: 42px !important;
width: 100%;
}
.content-wenzi {
width: 100%;
.wenzi-zhiban {
height: 13px;
font-size: 13px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 20px;
}
.wenzi-number {
width: 15px;
height: 26px;
font-size: 26px;
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight: bold;
color: rgba(34, 243, 254, 1);
line-height: 39px;
-webkit-background-clip: text;
}
}
}
.content-picture-div{
height: 100%;
width: 100%;
.content-picture-left {
width: 33.3%;
float: left;
display: inline-flex;
.content-image{
background-image: url('/src/assets/panoramic/statistical/main_icon_baoan.png') !important;
background-repeat:no-repeat !important;
height: 42px !important;
width: 100%;
}
.content-wenzi{
width: 100%;
.wenzi-zhiban {
height:13px;
font-size:13px;
font-family:SourceHanSansCN-Medium,SourceHanSansCN;
font-weight:500;
color:rgba(255,255,255,1);
line-height:20px;
}
.wenzi-number {
width:15px;
height:26px;
font-size:26px;
font-family:SourceHanSansCN-Bold,SourceHanSansCN;
font-weight:bold;
color:rgba(34,243,254,1);
line-height:39px;
-webkit-background-clip:text;
}
}
}
.content-picture-middle {
width: 33.3%;
float: left;
display: inline-flex;
.content-image{
background-image: url('/src/assets/panoramic/statistical/main_icon_baoan.png') !important;
background-repeat:no-repeat !important;
height: 42px !important;
width: 100%;
}
.content-wenzi{
width: 100%;
.wenzi-zhiban {
height:13px;
font-size:13px;
font-family:SourceHanSansCN-Medium,SourceHanSansCN;
font-weight:500;
color:rgba(255,255,255,1);
line-height:20px;
}
.wenzi-number {
width:15px;
height:26px;
font-size:26px;
font-family:SourceHanSansCN-Bold,SourceHanSansCN;
font-weight:bold;
color:rgba(34,243,254,1);
line-height:39px;
-webkit-background-clip:text;
}
}
}
.content-picture-right {
width: 33.3%;
float: left;
display: inline-flex;
.content-image{
background-image: url('/src/assets/panoramic/statistical/main_icon_baoan.png') !important;
background-repeat:no-repeat !important;
height: 42px !important;
width: 100%;
}
.content-wenzi{
width: 100%;
.wenzi-zhiban {
height:13px;
font-size:13px;
font-family:SourceHanSansCN-Medium,SourceHanSansCN;
font-weight:500;
color:rgba(255,255,255,1);
line-height:20px;
}
.wenzi-number {
width:15px;
height:26px;
font-size:26px;
font-family:SourceHanSansCN-Bold,SourceHanSansCN;
font-weight:bold;
color:rgba(34,243,254,1);
line-height:39px;
-webkit-background-clip:text;
}
}
}
.content-picture-middle {
width: 33.3%;
float: left;
display: inline-flex;
.content-image {
background-image: url('/src/assets/panoramic/statistical/main_icon_baoan.png') !important;
background-repeat: no-repeat !important;
height: 42px !important;
width: 100%;
}
.content-wenzi {
width: 100%;
.wenzi-zhiban {
height: 13px;
font-size: 13px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 20px;
}
.wenzi-number {
width: 15px;
height: 26px;
font-size: 26px;
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight: bold;
color: rgba(34, 243, 254, 1);
line-height: 39px;
-webkit-background-clip: text;
}
}
}
.content-picture-right {
width: 33.3%;
float: left;
display: inline-flex;
.content-image {
background-image: url('/src/assets/panoramic/statistical/main_icon_baoan.png') !important;
background-repeat: no-repeat !important;
height: 42px !important;
width: 100%;
}
.content-wenzi {
width: 100%;
.wenzi-zhiban {
height: 13px;
font-size: 13px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 20px;
}
.wenzi-number {
width: 15px;
height: 26px;
font-size: 26px;
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight: bold;
color: rgba(34, 243, 254, 1);
line-height: 39px;
-webkit-background-clip: text;
}
}
}
}
}
}
}
.warnModal {
position: absolute;
// width: 1000px;
// height: 600px;
width: calc(100% - 800px);
height: calc(100% - 300px);
margin:auto;
top: 250px;
bottom: 250px;
left: 250px;
right: 250px;
background-image: url('../../assets/panoramic/statistical/main_bg_model.png');
background-repeat: repeat;
background-size: 100% 100%;
.close{
width: 100%;
height: 50px;
text-align: right;
margin-top: 5px;
margin-right: 3px;
float: right;
// margin-top: 5px;
// margin-right: 3px;
img{
cursor: pointer;
}
}
.model-line{
float: left;
display: inline;
width: 32%;
height: 88%;
text-align: center;
padding-left: 35px;
margin-top: 5px;
margin-left: 10px;
overflow: auto;
.model-title{
height: 30px;
font-size:16px;
color:rgba(240,223,45,1);
padding-top: 10px;
}
.model-content{
.content-div{
min-width: 80px;
min-height: 120px;
text-align: left;
padding-top: 20px;
.title{
height: 30px;
font-size: 16px;
color:rgba(240,223,45,1);
}
.next-title{
padding-left: 5px;
}
.rows{
padding-left: 15px;
font-size: 14px;
color:rgba(255,255,255,1);
.row{
display: inline-block;
height: 28px;
}
.date{
padding-left: 25px;
}
}
}
}
}
\ No newline at end of file
}
}
src/view/3dview/ModuleEdit.js
View file @ 865d4255
......@@ -16,20 +16,15 @@ import { desigerConf, desigerHelperConfig } from './moduleEditConf';
import withDesigner from './../connect/withDesigner';
import { getAreaTreeAction, getPointTypeAction, getPointTreeAction } from './../../services/moduleEditServices';
import { getPointListAction,saveAreaDataAction } from './../../services/moduleEditServices';
import { getPointListAction,saveAreaDataAction,savePointListAction } from './../../services/moduleEditServices';
import PointsPoolEditPage from './PointsPoolEditPage';
import { eventTopics, isControllerEvent, isManualOperate } from './consts';
import { executeView3dCMD, parseManual, parseBubbleMarkers, tirggerPlanTopic, tirggerTransTopic } from './dataProcessor';
import {
dealTroubleMarkers,
removeFireAlarm,
initView3d,
} from './ruleActionView';
// import ScreenSaverView from './screenSaver/ScreenSaverView';
import { lineData } from './datas';
// import PersonCurves from './PersonCurves';
import AreaLeftTree from './moduleEditComponent/AreaLeftTree';
import RightEditPanel from './moduleEditComponent/RightEditPanel';
import PointLeftTree from './moduleEditComponent/PointLeftTree';
import RightEditPointPanel from './moduleEditComponent/RightEditPointPanel';
import RightEditRegionPanel from './moduleEditComponent/RightEditRegionPanel';
import { EVENTS_CONSTS, dispatchMouseDown } from './../../consts/EventConsts';
const AmosConfig = endConf.AmosConfig;
......@@ -38,9 +33,6 @@ let mousewheelCount = AmosConfig.mapLevelconfig.mousewheelCount * 100;
// const showInterval = AmosConfig.screenSaverConf.delayTime * 1000;
const { resizeConnect } = Connect;
const eventConnect = UIConnect.eventConnect;
const { BaseObjHelper } = transitionHelper;
const { FlameFire, FlameFire2, FlameFire3 } = FireObject;
const LENS_LEVEL = {
......@@ -69,29 +61,20 @@ class ModuleEdit extends Component {
totalDelta: 0, // zoom值
asyncModels: null,
startAsyncLoad: false,
showScreenSaver: false,
showMap: true,
fireTruckRoute: '',
pathRoute: [],
markerList: [],
fireEquipmentPosition: [],
markerType: null,
alarmStarted: false,
drawing: false,
selectArea: "",
treeData: [],
drawing: false,//画线状态
selectArea: "",//选中区域
selectPoints:"",//选中点
treeData: [],//左树
routePathData:[], //区域线位置
pageType: 'region',
pointType: '',
pageType: 'region', //编辑类型
pointType: '', //筛选框点类型
pointTypeArr: [],
// markers: {
// patrol: [],
// risk: [],
// video: [],
// person: [],
// data: [],
// room: []
// },
markers: {
riskSource: [],
patrol: [],
......@@ -101,11 +84,15 @@ class ModuleEdit extends Component {
fireEquipment: []
},
editFlag: false,//编辑模式
showRightPanel: false, //是否显示右侧详情
simpleTipVisible: false //简单提示
};
this.nativeProps = {
onMouseDown: this.onMouseDown,
onMouseMove: this.onMouseMove
};
this.drowItem = '';
this.areas = []
getObjFromNet(view3dFile, (objs, asyncModels) => {
this.setState({
......@@ -208,11 +195,12 @@ class ModuleEdit extends Component {
this.setState({ totalDelta });
}
onGraphCreated = ({ cameraFactory, sceneFactory, outlineFactory, r3d }) => {
onGraphCreated = ({ cameraFactory, sceneFactory, outlineFactory, r3d, stagePilot }) => {
this.cameraFactory = cameraFactory;
this.sceneFactory = sceneFactory;
this.outlineFactory = outlineFactory;
this.r3d = r3d;
this.stagePilot = stagePilot;
// 重新设置 outline 风格
this.outlineFactory.outlineConfig = {
......@@ -226,6 +214,7 @@ class ModuleEdit extends Component {
sceneFactory,
cameraEffect: desigerHelperConfig.cameraEffect
});
};
onAllDone = objGroup => {
......@@ -271,7 +260,7 @@ class ModuleEdit extends Component {
getPointList = () => {
let { markers } = this.state
getPointListAction().then(data => {
console.log(data);
// console.log(data);
for (let i = 0; i < data.length;i++)
markers[data[i].type].push(data[i])
this.setState({
......@@ -310,13 +299,14 @@ class ModuleEdit extends Component {
afterRender = () => {
// this.infoHelper && this.infoHelper.update();
};
startDrow = (areaKey) => {
startDrow = (areaItem) => {
// this.a3dRef.addPen();
this.addPen(areaKey)
this.drowItem = areaItem;
this.addPen(areaItem.id)
}
addPen(areaKey) {
let params = { "displayName": "进攻线路", "thumb": "/a3dres/images/pathline/line-attack.png", "descr": "", "objParam": null, "type": "pen" }
console.log(this.state.selectArea)
// console.log(this.state.selectArea)
const penProps = {
key: this.genPenId(),
color: 0x00ff00,
......@@ -354,8 +344,8 @@ class ModuleEdit extends Component {
});
me.a3dRef.changeDrawState(PEN_STATE.FINISHED);
this.state.routePathData.push({
riskSourceId: this.state.selectArea,
position3d: JSON.stringify(penPoints)
riskSourceId: this.drowItem.id,
routePath: JSON.stringify(penPoints)
})
this.setState({
drawing: false,
......@@ -492,32 +482,57 @@ class ModuleEdit extends Component {
});
}
}
selectItemChange = (areaKey) => {
console.log(areaKey);
this.state.selectArea = areaKey
//选中区域变化
selectItemChange = (selectArea) => {
console.log(selectArea);
this.state.selectArea = selectArea
this.setState({
selectArea: areaKey
selectArea: selectArea,
showRightPanel: true
})
}
//选中点变化
selectPointChange = (selectPoints) => {
this.setState({
selectPoints: selectPoints,
showRightPanel: true
})
}
renderAreas = () => {
let { treeData } = this.state;
console.log(treeData)
let areas = [];
if (treeData.length>0) {
getAreas = (treeData) => {
// let { treeData } = this.state;
// console.log(treeData)
// let areas = [];
if (treeData&&treeData.length>0) {
treeData.map((item) => {
if (item.isRegion && item.isBind) {
if (treeData.children&&treeData.children.length > 0) {
areas.push(<PolygonRegion points={JSON.parse(item.position3d)} />)
{this.renderAreas(item.children)}
if (item.children&&item.children.length > 0) {
this.areas.push(<PolygonRegion points={JSON.parse(item.routePath)} onCreated={this.onRegionCreated}/>)
{this.getAreas(item.children)}
}
this.areas.push(<PolygonRegion points={JSON.parse(item.routePath)} onCreated={this.onRegionCreated}/>)
} else {
if (item.children&&item.children.length > 0) {
{this.getAreas(item.children)}
}
areas.push(<PolygonRegion points={JSON.parse(item.position3d)} />)
}
});
}
return areas
}
renderAreas = () => {
this.areas = [];
this.getAreas(this.state.treeData);
// console.log(this.areas)
return this.areas;
}
onRegionCreated = (polygonRegion, item) => {
console.log(polygonRegion)
console.log(item)
// console.log(polygonRegion.pointInPolygon)
this.polygonRegion = polygonRegion;
// console.log(e)
}
//保存区域绑定
saveAreaData = () => {
let { treeData, routePathData, pageType } = this.state;
let routePathParams = [];
......@@ -534,6 +549,45 @@ class ModuleEdit extends Component {
message.error('保存失败！');
});
}
//保存点绑定
savePointData = () => {
let { markers } = this.state;
let paramsArr = [];
for ( let key in markers ){
let item = markers[key];
for (let i = 0; i < item.length; i++) {
paramsArr.push({
pointId: item[i].id,
pointType: item[i].type,
position3d: `${item[i].position.x},${item[i].position.y},${item[i].position.z}`
})
}
}
savePointListAction(paramsArr).then(data => {
console.log(data);
})
}
// 删除点绑定
deletePointBind = () => {
let { selectPoints } = this.state;
if (selectPoints) {
let pointParams = [];
pointParams.push({
pointId: selectPoints.id,
pointType: selectPoints.type,
position3d: `${selectPoints.position.x},${selectPoints.position.y},${selectPoints.position.z}`
})
savePointListAction(pointParams).then(data => {
console.log(data);
})
}
}
/**
* 切换区域和点页面
*/
......@@ -543,7 +597,8 @@ class ModuleEdit extends Component {
getAreaTreeAction().then(data => {
this.setState({
treeData:data || [],
pageType: 'region'
pageType: 'region',
showRightPanel: false
})
})
} else {
......@@ -552,7 +607,8 @@ class ModuleEdit extends Component {
this.setState({
pointType: pointTypeArr[0].code||'',
treeData: data||[],
pageType: 'point'
pageType: 'point',
showRightPanel: false
})
})
}
......@@ -578,30 +634,42 @@ class ModuleEdit extends Component {
drop = (event) => {
event.preventDefault();
let { dragItem,markers }=this.state;
console.log(event.clientX)
console.log(dragItem)
if(dragItem) {
if (dragItem.isBind) {
this.tipMsg = '只能放置未绑定的标记点'
this.setState({
simpleTipVisible: true
})
return false;
}
}
const objs = this.a3dRef.pickerCoordinate(event.clientX, event.clientY, null, true);
let position;
if (objs.length > 0){
// get point
position = objs[0].point;
}
// [0,0,0]
const isInside = this.polygonRegion.pointInPolygon([position.x,position.y,position.z])
console.log(this.polygonRegion)
console.log(objs)
console.log(position)
console.log(position.x)
console.log(isInside)
if (dragItem) {
let uid = UUID.uuidFast()
let addPointParam = {
type: dragItem.type,
position: position,
uid: uid,
id: uid,
key: `${dragItem.type}-${uid}`,
id: dragItem.id,
key: `${dragItem.type}-${dragItem.id}`,
title: dragItem.name,
label: dragItem.name,
level:'1',
levelStr: 'level_2',
treeNodeId: dragItem.id
}
markers.riskSource.push(addPointParam)
......@@ -618,36 +686,34 @@ class ModuleEdit extends Component {
this.setState({ editFlag })
if(editFlag == true) {
getAreaTreeAction().then(data => {
console.log(data);
this.setState({
treeData:data || []
})
console.log(data);
this.setState({
treeData:data || []
})
getPointTypeAction().then(data => {
console.log(data);
this.setState({
pointTypeArr: data||[],
pointType:data[0]?data[0].code:''
})
})
getPointTypeAction().then(data => {
console.log(data);
this.setState({
pointTypeArr: data||[],
pointType:data[0]?data[0].code:''
})
this.getPointList();
})
this.getPointList();
}
}
simpleTipOk = () => {
this.setState({
simpleTipVisible: false
})
}
render() {
const {
fireEquipmentPosition,
drawing,
objs,
markers,
pageType,
pointType,
pointTypeArr,
editFlag
} = this.state;
const { fireEquipmentPosition, drawing, objs, markers, pageType, pointType, pointTypeArr, editFlag, showRightPanel, selectPoints, selectArea } = this.state;
console.log(this.state)
console.log(this.props)
const { dimension, hiddenScreenSaver } = this.props;
console.log(this)
const { dimension } = this.props;
const graphicProps = {
...dimension,
...desigerConf,
......@@ -657,11 +723,6 @@ class ModuleEdit extends Component {
onCreated: this.onGraphCreated,
afterRender: this.afterRender
};
// const modelContentProps = {
// onAllDone: this.onAllDone,
// onComplete: this.onComplete
// };
let firePosition = null;
if (fireEquipmentPosition && fireEquipmentPosition.length > 0) {
firePosition = {
......@@ -698,28 +759,44 @@ class ModuleEdit extends Component {
enablePen
nativeProps={this.nativeProps}
penProps={penProps}
enablePositionCtl
>
<PointsPoolEditPage markers={markers} updateMarker={this.updateMarker} />
<PointsPoolEditPage markers={markers} updateMarker={this.updateMarker} stagePilot={this.stagePilot} />
{this.renderAreas()}
</A3DDesigner>
</div>
<div className="editButton" onClick={() => this.editButtonChange()}>编辑模式</div>
{ editFlag &&
<div>
{
pageType == 'region'?
<AreaLeftTree
startDrow={this.startDrow}
treeData={this.state.treeData}
saveAreaData={this.saveAreaData}
selectItemChange={this.selectItemChange}
stopDrowing={this.stopDrowing}
pageType={pageType}
// pointType={pointType}
pointTypeArr={pointTypeArr}
pointTypeChange={this.pointTypeChange}
dragItemChange={this.dragItemChange}
/>
startDrow={this.startDrow}
treeData={this.state.treeData}
saveAreaData={this.saveAreaData}
selectItemChange={this.selectItemChange}
// stopDrowing={this.stopDrowing}
pageType={pageType}
// pointType={pointType}
pointTypeArr={pointTypeArr}
pointTypeChange={this.pointTypeChange}
dragItemChange={this.dragItemChange}
/>:
<PointLeftTree
treeData={this.state.treeData}
savePointData={this.savePointData}
selectPointChange={this.selectPointChange}
// stopDrowing={this.stopDrowing}
pageType={pageType}
// pointType={pointType}
pointTypeArr={pointTypeArr}
pointTypeChange={this.pointTypeChange}
dragItemChange={this.dragItemChange}
deletePointBind={this.deletePointBind}
/>
}
<div className='topBox'>
<span className='editTitle'>
<span className='titleText'>编辑模式</span>
......@@ -731,10 +808,24 @@ class ModuleEdit extends Component {
<span className={`editPointBtn ${pageType == 'point'?'selected':'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'point')}></span>
</div>
<div className='rightBox'>
<RightEditPanel />
{
showRightPanel && pageType == 'region'? <RightEditRegionPanel detailData={selectArea} />:''
}
{
showRightPanel && pageType == 'point'? <RightEditPointPanel detailData={selectPoints} />:''
}
</div>
</div>
}
<Modal
className='moduleEditMadel simpleTip'
header="基本模态框"
visible={this.state.simpleTipVisible}
noDefaultHeader
// onCancel={this.simpleTipCancel}
onOk = {this.simpleTipOk}
content={<div>内容区域...</div>}
/>
</div>
);
......
src/view/3dview/PointsPoolEditPage.js
View file @ 865d4255
......@@ -61,6 +61,14 @@ class PointsPoolEditPage extends Component {
onMarkersCreated = (type, { markersCache }) => {
this.markerList[type] = markersCache;
let stagePilot = this.props.stagePilot;
if(markersCache&&stagePilot) {
console.log(this.markerList)
console.log(markersCache)
console.log(this.props)
markersCache.eachValue(item => stagePilot.positionCtl.objects.push(item.node) )
}
(markersCache || []).forEach(mc => {
const extData = mc.getExtData();
if (extData.hasOwnProperty('visible')){
......
src/view/3dview/moduleEditComponent/AreaLeftTree.js
View file @ 865d4255
......@@ -28,13 +28,12 @@ class AreaLeftTree extends Component {
}
componentDidMount() {
// getAreaTreeAction().then(data => {
// console.log(data);
// this.setState({
// treeData:data || []
// })
// this.props.getAreaData(data || [])
// })
let {treeData,pointTypeArr} = this.props;
this.setState({
treeData,
pointTypeArr,
pointType: pointTypeArr[0]?pointTypeArr[0].code:''
})
}
componentWillUnmount() {
......@@ -50,11 +49,11 @@ class AreaLeftTree extends Component {
})
}
onSelectChange = (value, item) =>{
console.log(value, item);
this.state.pointType = value;
this.props.pointTypeChange(value);
}
// onSelectChange = (value, item) =>{
// console.log(value, item);
// this.state.pointType = value;
// this.props.pointTypeChange(value);
// }
onSearchChange = (e, value) => {
console.log(e, value);
this.setState({
......@@ -71,35 +70,42 @@ class AreaLeftTree extends Component {
autoExpandParent: false
});
}
onCheck = (checkedKeys,e) => {
console.log('onCheck', checkedKeys);
// console.log('onCheck', e);
let currentKey = checkedKeys.checked[0]?checkedKeys.checked[checkedKeys.checked.length-1]:'';
if (checkedKeys.checked.length<2) {
currentKey = checkedKeys.checked[0]
} else {
if (checkedKeys.checked[0] == this.state.checkedKeys[0]) {
currentKey = checkedKeys.checked[1]
} else {
currentKey = checkedKeys.checked[0]
}
}
// checkedKeys[0] = checkedKeys[checkedKeys.length - 1]
this.setState({ checkedKeys: currentKey?[currentKey]:[] });
this.props.selectItemChange(currentKey);
if (currentKey) {
this.props.startDrow(currentKey);
}else {
this.props.stopDrowing()
}
// onCheck = (checkedKeys,e) => {
// console.log('onCheck', checkedKeys);
// // console.log('onCheck', e);
// let currentKey = checkedKeys.checked[0]?checkedKeys.checked[checkedKeys.checked.length-1]:'';
// if (checkedKeys.checked.length<2) {
// currentKey = checkedKeys.checked[0]
// } else {
// if (checkedKeys.checked[0] == this.state.checkedKeys[0]) {
// currentKey = checkedKeys.checked[1]
// } else {
// currentKey = checkedKeys.checked[0]
// }
// }
// // checkedKeys[0] = checkedKeys[checkedKeys.length - 1]
// this.setState({ checkedKeys: currentKey?[currentKey]:[] });
// this.props.selectItemChange(currentKey);
// if (currentKey) {
// this.props.startDrow(currentKey);
// }else {
// this.props.stopDrowing()
// }
// }
drowArea = (editItem) => {
}
onTreeSelect = (selectedKeys, info) => {
console.log('onSelect', info);
let selectItem = info.node.props.dataRef;
this.setState({ selectedKeys });
this.props.selectItemChange(selectItem);
}
// onTreeSelect = (selectedKeys, info) => {
// console.log('onSelect', info);
// this.setState({ selectedKeys });
// }
// onClick={(e)=>{e.nativeEvent.stopImmediatePropagation();e.stopPropagation();console.log(123123);}}
renderTreeNodes = (data) => {
console.log(data);
// console.log(data);
if (data.length>0) {
return data.map((item) => {
if (item.children) {
......@@ -107,21 +113,34 @@ class AreaLeftTree extends Component {
<TreeNode
title={
<div>
{item.isRegion?<span>{item.name}</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>{item.name}</span>}
{
<span >
{item.name}
<span className='icon'>
{
item.isBind?'':
<img
src='/src/assets/moduleEdit/editBtn.png'
onClick={(e) => {
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
this.props.startDrow(item);
}}
/>
}
{
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.routePath?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>
}
</div>
}
key={item.id}
dataRef={item}
onDragStart={() => {
console.log(11)
this.props.dragItemChange(item)
}}>
>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
......@@ -130,18 +149,33 @@ class AreaLeftTree extends Component {
key={item.id}
title={
<div>
{item.isRegion?<span>{item.name}</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>{item.name}
</span>}
{
<span >
{item.name}
<span className='icon'>
{
item.isBind?'':
<img
src='/src/assets/moduleEdit/editBtn.png'
onClick={(e) => {
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
this.props.startDrow(item);
}}
/>
}
{
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.routePath?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>
}
</div>
}
{...item}
onClick={() => {console.log('aaa')}}
dataRef={item}
{...item}
/>;
});
}
......@@ -149,10 +183,6 @@ class AreaLeftTree extends Component {
}
render() {
let { treeData, checkedKeys,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
......@@ -160,28 +190,18 @@ class AreaLeftTree extends Component {
<div className="leftTree">
<div className='leftContainer'>
<div className='topForm'>
{
pageType=='region'?'':<Select onChange={this.onSelectChange} defaultValue={pointType} className='leftSelect'>
{
pointTypeArr.map(item => {
return (<Option value={item.code}>{item.name}</Option>)
})
}
</Select>
}
<Search className='leftSearch' icon="search" value={''} onChange={this.onSearchChange} onIconClick={this.onSearchChange} />
<Search className='leftSearch' icon="search" value={''} onChange={this.onSearchChange} onIconClick={this.onSearchChange} />
</div>
<div className='treeBox'>
<Tree
checkable
checkStrictly
selectable={false}
// checkable
// checkStrictly
selectable={true}
onExpand={this.onExpand}
expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent}
onCheck={this.onCheck}
checkedKeys={checkedKeys}
// onCheck={this.onCheck}
// checkedKeys={checkedKeys}
onSelect={this.onTreeSelect}
selectedKeys={this.state.selectedKeys}
blockNode
......
src/view/3dview/moduleEditComponent/PointLeftTree.js 0 → 100644
View file @ 865d4255
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Connect, Modal, Tree,Select,Search,Button } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf';
import { getAreaTreeAction,saveAreaDataAction } from '../../../services/moduleEditServices'
const eventConnect = Connect.eventConnect;
const TreeNode = Tree.TreeNode;
const Option = Select.Option;
@eventConnect
class PointLeftTree extends Component {
constructor(props) {
super(props);
this.state = {
// showScreenSaver: false //是否打开屏保
expandedKeys: [],
autoExpandParent: true,
checkedKeys: [],
selectedKeys: [],
treeData:[],
pointTypeArr:[],
pointType:''
};
}
componentDidMount() {
let {treeData,pointTypeArr} = this.props;
this.setState({
treeData,
pointTypeArr,
pointType: pointTypeArr[0]?pointTypeArr[0].code:''
})
// console.log(this.props)
}
componentWillUnmount() {
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
let {treeData,pointTypeArr} = nextProps;
this.setState({
treeData,
pointTypeArr,
pointType: pointTypeArr[0]?pointTypeArr[0].code:''
})
}
onSelectChange = (value, item) =>{
console.log(value, item);
this.state.pointType = value;
this.props.pointTypeChange(value);
}
onSearchChange = (e, value) => {
console.log(e, value);
this.setState({
value
});
}
onExpand = (expandedKeys) => {
console.log('onExpand', arguments);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.setState({
expandedKeys,
autoExpandParent: false
});
}
onCheck = (checkedKeys,e) => {
console.log('onCheck', checkedKeys,e);
this.setState({ checkedPointsKeys: checkedKeys });
this.props.selectPointChange(checkedKeys);
}
renderTreeNodes = (data) => {
// console.log(data);
if (data.length>0) {
return data.map((item) => {
if (item.children) {
return (
<TreeNode
title={
<div>
{item.isRegion?
<span>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>}
</div>
}
key={item.id}
dataRef={item}
onDragStart={() => {
console.log(11)
this.props.dragItemChange(item)
}}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode
key={item.id}
title={
<div>
{item.isRegion?
<span>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>}
</div>
}
dataRef={item}
{...item}
// onClick={() => {console.log('aaa')}}
/>;
});
}
}
onTreeSelect = (selectedKeys, info) => {
// e.nativeEvent.stopImmediatePropagation();
console.log('onSelect', info);
let selectItem = info.node.props.dataRef;
this.setState({ selectedKeys });
this.props.selectPointChange(selectItem)
}
render() {
let { treeData, checkedPointsKeys,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
console.log(treeData)
console.log(this.props)
return (
<div className="leftTree">
<div className='leftContainer'>
<div className='topForm'>
<Select onChange={this.onSelectChange} defaultValue={pointType} className='leftSelect'>
{
pointTypeArr.map(item => {
return (<Option value={item.code}>{item.name}</Option>)
})
}
</Select>
<Search className='leftSearch' icon="search" value={''} onChange={this.onSearchChange} onIconClick={this.onSearchChange} />
</div>
<div className='treeBox'>
<Tree
// checkable
// checkStrictly
selectable={true}
onExpand={this.onExpand}
expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent}
// onCheck={this.onCheck}
// checkedKeys={checkedPointsKeys}
onSelect={this.onTreeSelect}
selectedKeys={this.state.selectedKeys}
blockNode
>
{this.renderTreeNodes(treeData)}
</Tree>
</div>
<div className='bottomBtns'>
<Button
className='sureBtn'
onClick={() => {
this.props.savePointData()
}} ></Button>
<Button
className='deleteBtn'
onClick={() => {
this.props.deletePointBind()
}} ></Button>
</div>
</div>
</div>
);
}
}
PointLeftTree.propTypes = {
subscribe: PropTypes.func,
trigger: PropTypes.func
};
export default PointLeftTree;
src/view/3dview/moduleEditComponent/RightEditPanel.js → src/view/3dview/moduleEditComponent/RightEditPointPanel.js
View file @ 865d4255
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Connect, Modal, Tree, Select, Search, Button, Input } from 'amos-framework';
import { Connect, Modal, Tree, Select, Search, Button, Input,InputNumber, Form, Radio } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf';
import { getAreaTreeAction,saveAreaDataAction } from './../../../services/moduleEditServices'
import { getAreaTreeAction,saveAreaDataAction } from '../../../services/moduleEditServices'
const eventConnect = Connect.eventConnect;
const TreeNode = Tree.TreeNode;
const Option = Select.Option;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
@eventConnect
class RightEditPanel extends Component {
class RightEditPointPanel extends Component {
constructor(props) {
super(props);
this.state = {
form: {
},
rules:{}
};
}
......@@ -40,6 +45,25 @@ class RightEditPanel extends Component {
// })
}
onChange = (key, e) => {
const value = e.target.value;
const newForm = Object.assign({}, this.state.form, { [key]: value });
this.setState({
form: newForm
});
}
onRadioChange = (value) => {
const newForm = Object.assign({}, this.state.form, { 'isIndoor': value });
this.setState({
form: newForm
});
}
onHobbyChange = (value, item) => {
const newForm = Object.assign({}, this.state.form, { 'level': value });
this.setState({
form: newForm
});
}
......@@ -47,13 +71,34 @@ class RightEditPanel extends Component {
handleSubmit = (e) => {
// e.preventDefault();
this.form.validate((valid, dataValues, errors) => {
console.log('返回内容:', dataValues, valid, errors);
if (valid) {
// AmosAlert.success('结果', JSON.stringify(dataValues));
} else {
console.log('error submit!!');
return false;
}
});
}
render() {
let { treeData, checkedKeys,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
let { rules, form,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 28 },
sm: { span: 3 },
className: 'colspanlab'
}
}
return (
<div className="rightEditPanel">
<Form className="basic-demo" ref={component => this.form = component} model={form} rules={rules}>
<div className='rightContainer'>
<div className='topForm'>
<div className='rightTitle'>
......@@ -61,53 +106,109 @@ class RightEditPanel extends Component {
<span className='titleText'>风险点信息</span>
</div>
<div className='baseMsg'>
<div className='baseTitle'>
<div className='moduleTitle'>
<span className='titleIcon'></span>
<span className='titleText'>基本信息</span>
</div>
<div className='baseContent'>
<div className='moduleContent'>
<div className='msgItem'>
<div className='itemLabel'>风险名称</div>
<Input />
<FormItem field="name" >
<Input />
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>参考编号</div>
<Input />
<FormItem field="code" >
<Input
onChange={(e) => this.onChange('name', e)}
/>
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>风险等级</div>
<Input />
<FormItem field="level" >
<Select value={form.level} onChange={this.onHobbyChange}>
<Option value="1">一级</Option>
<Option value="2">二级</Option>
<Option value="3">三级</Option>
<Option value="4">四级</Option>
<Option value="5">五级</Option>
</Select>
</FormItem>
</div>
</div>
</div>
<div className='3dMsg'>
<div className='baseTitle'>
<div className='moduleTitle'>
<span className='titleIcon'></span>
<span className='titleText'>三维信息</span>
</div>
<div className='moduleContent'>
<div className='msgItem'>
<div className='itemLabel'>三维坐标</div>
<div className='position'>
<div className='positionItem'>
<FormItem label="X" field="positionX" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="Y" field="positionY" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="Z" field="positionZ" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
</div>
</div>
<div className='msgItem'>
<div className='itemLabel'>楼层位置</div>
<FormItem field="floorNum" >
<Input />
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>是否位于室内</div>
<FormItem field="isIndoor" >
<RadioGroup defaultValue="prop2" onChange={value => {this.onRadioChange(value)}}>
<Radio value="prop1">是</Radio>
<Radio value="prop2">否</Radio>
</RadioGroup>
</FormItem>
</div>
</div>
</div>
</div>
<div className='bottomBtns'>
<Button
className='sureBtn'
onClick={() => {
// this.props.saveAreaData()
this.handleSubmit()
}} ></Button>
<Button
className='deleteBtn'
className='cancelBtn'
onClick={() => {
// this.props.save()
}} ></Button>
</div>
</div>
</Form>
</div>
);
}
}
RightEditPanel.propTypes = {
RightEditPointPanel.propTypes = {
subscribe: PropTypes.func,
trigger: PropTypes.func
};
export default RightEditPanel;
export default RightEditPointPanel;
src/view/3dview/moduleEditComponent/RightEditRegionPanel.js 0 → 100644
View file @ 865d4255
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Connect, Modal, Tree, Select, Search, Button, Input,InputNumber, Form, Radio } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf';
import { getAreaTreeAction,saveAreaDataAction } from '../../../services/moduleEditServices'
const eventConnect = Connect.eventConnect;
const TreeNode = Tree.TreeNode;
const Option = Select.Option;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
@eventConnect
class RightEditRegionPanel extends Component {
constructor(props) {
super(props);
this.state = {
form: {
},
rules:{}
};
}
componentDidMount() {
// getAreaTreeAction().then(data => {
// console.log(data);
// this.setState({
// treeData:data || []
// })
// this.props.getAreaData(data || [])
// })
}
componentWillUnmount() {
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
let {treeData,pointTypeArr} = nextProps;
// this.setState({
// })
}
onChange = (key, e) => {
const value = e.target.value;
const newForm = Object.assign({}, this.state.form, { [key]: value });
this.setState({
form: newForm
});
}
onRadioChange = (value) => {
const newForm = Object.assign({}, this.state.form, { 'isIndoor': value });
this.setState({
form: newForm
});
}
onHobbyChange = (value, item) => {
const newForm = Object.assign({}, this.state.form, { 'level': value });
this.setState({
form: newForm
});
}
handleSubmit = (e) => {
// e.preventDefault();
this.form.validate((valid, dataValues, errors) => {
console.log('返回内容:', dataValues, valid, errors);
if (valid) {
// AmosAlert.success('结果', JSON.stringify(dataValues));
} else {
console.log('error submit!!');
return false;
}
});
}
render() {
let { rules, form,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 28 },
sm: { span: 3 },
className: 'colspanlab'
}
}
return (
<div className="rightEditPanel">
<Form className="basic-demo" ref={component => this.form = component} model={form} rules={rules}>
<div className='rightContainer'>
<div className='topForm'>
<div className='rightTitle'>
<span className='titleIcon'></span>
<span className='titleText'>风险区域信息</span>
</div>
<div className='baseMsg'>
<div className='moduleTitle'>
<span className='titleIcon'></span>
<span className='titleText'>基本信息</span>
</div>
<div className='moduleContent'>
<div className='msgItem'>
<div className='itemLabel'>风险名称</div>
<FormItem field="name" >
<Input />
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>参考编号</div>
<FormItem field="code" >
<Input
onChange={(e) => this.onChange('name', e)}
/>
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>风险等级</div>
<FormItem field="level" >
<Select value={form.level} onChange={this.onHobbyChange}>
<Option value="1">一级</Option>
<Option value="2">二级</Option>
<Option value="3">三级</Option>
<Option value="4">四级</Option>
<Option value="5">五级</Option>
</Select>
</FormItem>
</div>
</div>
</div>
<div className='3dMsg'>
<div className='moduleTitle'>
<span className='titleIcon'></span>
<span className='titleText'>三维信息</span>
</div>
<div className='moduleContent'>
<div className='msgItem'>
<div className='itemLabel'>三维坐标</div>
<div className='position'>
<div className='positionItem'>
<FormItem label="长" field="positionX" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="宽" field="positionY" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="高" field="positionZ" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='bottomBtns'>
<Button
className='sureBtn'
onClick={() => {
this.handleSubmit()
}} ></Button>
<Button
className='cancelBtn'
onClick={() => {
// this.props.save()
}} ></Button>
</div>
</div>
</Form>
</div>
);
}
}
RightEditRegionPanel.propTypes = {
subscribe: PropTypes.func,
trigger: PropTypes.func
};
export default RightEditRegionPanel;
src/view/3dview/moduleEditPoints/MarkerIcon.js
View file @ 865d4255
......@@ -179,8 +179,6 @@ class MarkerIcon extends Component {
const showLabel = disableLabel(markerType);
let animDur = (twinkle ? 1 / frequency : 0) + 's';
console.log('-------------')
console.log(this.props)
if (showInfo) {
return (
<div className={cls} style={style} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
......
src/view/3dview/moduleEditPoints/index.js
View file @ 865d4255
......@@ -16,7 +16,7 @@ class BasicPoint extends Component {
/**
* 风险
*/
export const RiskPoint = markerFactory(BasicPoint,
export const RiskPoint = marker3DFactory(BasicPoint,
{
markerType: 'riskSource'
}
......@@ -25,7 +25,7 @@ export const RiskPoint = markerFactory(BasicPoint,
/**
* 巡检
*/
export const PatrolPoint = markerFactory(BasicPoint,
export const PatrolPoint = marker3DFactory(BasicPoint,
{
markerType: 'risk'
}
......@@ -34,7 +34,7 @@ export const PatrolPoint = markerFactory(BasicPoint,
/**
* 人员
*/
export const PersonPoint = markerFactory(BasicPoint,
export const PersonPoint = marker3DFactory(BasicPoint,
{
markerType: 'person'
}
......@@ -43,7 +43,7 @@ export const PersonPoint = markerFactory(BasicPoint,
/**
* 监控
*/
export const MonitorPoint = markerFactory(BasicPoint,
export const MonitorPoint = marker3DFactory(BasicPoint,
{
markerType: 'video'
}
......@@ -52,7 +52,7 @@ export const MonitorPoint = markerFactory(BasicPoint,
/**
* 探测点
*/
export const ProbePoint = markerFactory(BasicPoint,
export const ProbePoint = marker3DFactory(BasicPoint,
{
markerType: 'monitorEquipment'
}
......@@ -61,13 +61,13 @@ export const ProbePoint = markerFactory(BasicPoint,
/**
* 消防资源
*/
export const FireResourcePoint = markerFactory(BasicPoint,
export const FireResourcePoint = marker3DFactory(BasicPoint,
{
markerType: 'fireResource'
}
);
export const EquipmentPoint = markerFactory(BasicPoint,
export const EquipmentPoint = marker3DFactory(BasicPoint,
{
markerType: 'impEquipment'
}
......@@ -114,14 +114,14 @@ export const WorkerMen3D = marker3DFactory(BasicPoint,
/**
* 人员 3D
*/
export const FirePoint = markerFactory(BasicPoint,
export const FirePoint = marker3DFactory(BasicPoint,
{
markerType: 'fire'
}
);
export const PointStatistics = markerFactory(BasicPoint,
export const PointStatistics = marker3DFactory(BasicPoint,
{
markerType: 'statistics'
}
......
src/view/3dview/moduleEditPoints/marker3DFactory.js
View file @ 865d4255
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { utils } from 'amos-tool';
import { utils, deepCopy } from 'amos-tool';
import { Markers } from 'amos-3d/lib/designer';
import { CONSTS } from 'CONSTS/storageConsts';
import PointDialog from './PointDialog';
......@@ -92,7 +92,7 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
<WrappedComponent>
<Markers
{...rest}
markers={result}
markers={deepCopy(result)}
events={this.markerEvents}
/>
{ !planStarted && <PointDialog style={dialogStyle} ref={node => this.pdRef = node} />}
......
src/view/panoramic/statistical/EquipStatusList.js
View file @ 865d4255
import React, { Component } from 'react';
import { equipStatusListAction } from 'SERVICES/panoramicService';
/**
* 设备状态消息
*/
export default class EquipStatusList extends Component {
constructor(props) {
super(props);
this.state = {
equipStatusList: []
};
}
componentDidMount(){
this.equipStatusList();
}
equipStatusList = () => {
equipStatusListAction().then(data => {
this.setState({
equipStatusList: data
});
});
}
renderContent = (datas) => {
return (
datas.map((item, index) => {
return (
<div key={item.id} className="title-child">
<div className="title-date" >{item.changeDate}</div>
<div className="title-text" >{item.label}</div>
</div>
);
})
);
}
render() {
console.log('EquipStatusList')
let { equipStatusList } = this.state;
return (
<div className="equipStatusList">
EquipStatusList
{this.renderContent(equipStatusList)}
</div>
);
}
}
src/view/panoramic/statistical/ModelContent.js 0 → 100644
View file @ 865d4255
import React, { Component } from 'react';
import { safetyIndexDetailAction } from 'SERVICES/panoramicService';
import moment from 'moment';
const format = 'YYYY-MM-dd';
export default class ModelContent extends Component {
constructor(props) {
super(props);
this.state = {
alarmData: []
};
}
componentDidMount(){
let { type } = this.props;
console.log(type);
this.safetyIndexDetail(type);
}
safetyIndexDetail = (type) => {
safetyIndexDetailAction(type).then(data => {
console.log(data);
this.setState({
alarmData: data
});
});
}
/**
* 获取标题
*
* @memberof ModelContent
*/
getTitle = (v) => {
const titleParams = {
1: '一级风险点', //一级风险点
2: '二级风险点', //二级风险点
3: '三级风险点', //三级风险点
4: '四级风险点' //四级风险点
};
return titleParams[v];
}
formatData = (str) => {
let date = str.split(' ')[0];
return date;
}
renderContent = (content) =>{
console.log(content);
return (
<div className='rows'>
{(content || []).map(itemA => {
return (
<div className='row'>
<span>{itemA.name}</span>
<span className='date'>{this.formatData(itemA.changeDate)}</span>
</div>
);
})}
</div>
);
}
render() {
let { alarmData } = this.state;
let { type } = this.props;
return (
<div className='model-content'>
{(alarmData || []).map(item => {
return (
<div className='content-div'>
<div className='title'>
<span>|</span>
<span className='next-title'>{ type === 'risk' ? this.getTitle(item.typeCode) : item.typeName }</span>
</div>
{this.renderContent(item.content)}
</div>
);
})}
</div>
);
}
}
src/view/panoramic/statistical/SafetyExecuteList.js
View file @ 865d4255
import React, { Component } from 'react';
import imgStatic from './../../../consts/imgStatic';
import { onlineDayAction, safetyExecuteListAction } from 'SERVICES/panoramicService';
const panoramicIcon = imgStatic.panoramicIcon;
import { warnTypes } from './conf';
const getIcon = (alarmType) => {
return panoramicIcon[`${alarmType}`];
};
/**
* 告警列表
*/
export default class SafetyExecuteList extends Component {
constructor(props) {
super(props);
this.state = {
year: 0,
day: 0,
alarmData: [],
isVisable: false,
selectKey: 'fire',
selectValue: ''
};
}
componentDidMount(){
this.onlineDayData();
this.safetyExecuteList();
}
onlineDayData = () => {
onlineDayAction().then(data => {
this.setState({
year: data.year,
day: data.day
});
});
}
safetyExecuteList = (type) => {
if (!type){
type = this.state.selectKey;
}
let value;
safetyExecuteListAction(type).then(data => {
warnTypes.some(e => {
if (e.type === type) {
value = e.label;
return true;
}
});
this.setState({
alarmData: data,
selectValue: value
});
});
}
/**
* 展开
*
* @memberof SafetyExecuteList
*/
unfoldOnClick = (flag) =>{
this.setState({
isVisable: flag
});
}
onClickIcon = (e) => {
if (e.type !== 'warn'){
this.setState({
selectKey: e.key
});
this.safetyExecuteList(e.key);
}
}
renderContent = (datas) => {
return (
datas.map((item, index) => {
return (
<div key={item.id} className="title-child">
<span className="title-text" >{item.label}</span>
</div>
);
})
);
}
renderIcon = (datas) => {
let { selectKey } = this.state;
return (
datas.map((item, index) => {
return (
<div key={item.id} className="icon">
{ selectKey === item.key ? <img src={getIcon(item.icon)} onClick={()=>this.onClickIcon(item)} /> : <img src={getIcon(item.unIcon)} onClick={()=>this.onClickIcon(item)} />}
</div>
);
})
);
}
render() {
console.log('SafetyExecuteList')
return <div className="safetyExecuteList">SafetyExecuteList</div>;
let { year, day, alarmData, isVisable, selectValue } = this.state;
let dayNum ;
if (year > 0 ){
dayNum = year + ' 年 ' + day;
} else {
dayNum = ' ' + day;
}
return (
isVisable ?
(<div className='safetyExecuteList'>
<img src={panoramicIcon.unfold} onClick={() => this.unfoldOnClick(false)}></img>
</div>) :
(<div className="safetyExecuteList">
<div className='up'>
<div className='left'>
<img src={panoramicIcon.safetyexecute}></img>
</div>
<div className='right'>
<div className='common-title'>
<span>消防安全执行</span>
</div>
<div className='content'>
<span className='date'>{dayNum}</span>
<span className='day'>天</span>
</div>
</div>
</div>
<div className='down'>
<div className='title'>
{this.renderIcon(warnTypes)}
<span className='describe'>{selectValue}</span>
<img className='arrow' src={panoramicIcon.arrow_warn} onClick={() => this.unfoldOnClick(true)}></img>
<div className='bottom-line'></div>
</div>
<div className='content'>
{this.renderContent(alarmData)}
</div>
</div>
</div>)
);
}
}
src/view/panoramic/statistical/SafetyIndex.js
View file @ 865d4255
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { safetyIndexAction } from './../../../services/panoramicService'
import { safetyIndexAction } from 'SERVICES/panoramicService';
import imgStatic from './../../../consts/imgStatic';
import ModelContent from './ModelContent';
import { warnController } from './conf';
const panoramicIcon = imgStatic.panoramicIcon;
const getIcon = (alarmType) => {
return panoramicIcon[`${alarmType}`];
};
/**
* 今日安全指数
......@@ -10,7 +18,8 @@ export default class SafetyIndex extends Component {
constructor(props) {
super(props);
this.state = {
safetyIndexData:{}
safetyIndexData: {},
modelVisable: false
};
}
......@@ -20,7 +29,8 @@ export default class SafetyIndex extends Component {
getSafetyIndex = () => {
safetyIndexAction().then(safetyIndexData => {
this.setState({safetyIndexData})});
this.setState({ safetyIndexData });
});
}
getOption = () => {
......@@ -85,15 +95,41 @@ export default class SafetyIndex extends Component {
}
}
modelOpen = (flag) =>{
this.setState({
modelVisable: flag
});
}
renderWarnContent = () =>{
return (
<div className='warnModal'>
<div className='close'>
<img src={panoramicIcon.model_close} onClick={() => this.modelOpen(false)}></img>
</div>
{warnController.map(item => {
return (
<div className='model-line'>
<div>
<img src={getIcon(item.icon)}></img>
</div>
<div className='model-title'>{item.label}</div>
<ModelContent type={item.type} />
</div>
);
})}
</div>
);
}
render() {
console.log('SafetyIndex')
const { safetyIndexData } = this.state;
const { safetyIndexData, modelVisable } = this.state;
return (
<div className="safetyIndex">
<div className="safetyIndex-icon">
<img className="safetyIndex-safetyrate" src="/src/assets/panoramic/statistical/main_icon_safetyrate.png" alt="safetyrate" />
</div>
<div className='safetyIndex-content'>
<div className='safetyIndex-content' onClick={() => this.modelOpen(true)}>
<div>今日安全指数 </div>
<div className='safetyIndex-content-row'>
<div className='number-large'>{safetyIndexData.safetyIndex}</div>
......@@ -110,6 +146,7 @@ export default class SafetyIndex extends Component {
}
</div>
<ReactEcharts className='safetyIndex-content-chart' option={this.getOption()}/>
{ modelVisable && this.renderWarnContent()}
</div>
);
}
......
src/view/panoramic/statistical/SafetyIndexWeek.js
View file @ 865d4255
......@@ -13,16 +13,16 @@ const option = {
boundaryGap: false,
data: ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20'],
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '14',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
},
}
},
yAxis: {
type: 'value',
......@@ -37,7 +37,7 @@ const option = {
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '14',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
},
......@@ -86,37 +86,38 @@ class SafetyIndexWeek extends Component {
super(props);
this.state = {
data: {}
};
}
componentDidMount() {
safetyIndexWeekAction().then(data =>{
this.setState({
data:data
})
};
}
componentDidMount() {
safetyIndexWeekAction().then(data => {
this.setState({
data: data
})
})
}
getOptionsx = (map) => {
return {
return {
xAxis: {
type: 'category',
boundaryGap: false,
data: map.get("dates"),
axisLabel: {
interval:0,//横轴信息全部显示
// rotate:40,
interval: 0,//横轴信息全部显示
// rotate:40,
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '14',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
fontSize: '12',
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
},
margin: 15,//刻度标签与轴线之间的距离。
}
},
yAxis: {
type: 'value',
......@@ -130,70 +131,95 @@ class SafetyIndexWeek extends Component {
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '14',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
fontSize: '12',
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
},
margin: 15,//刻度标签与轴线之间的距离。
},
},
series: [{
data: map.get("values"),
data: map.get("values"),
type: 'line',
symbol: 'circle',//折线点设置为实心点
smooth: true, //这个是把线变成
itemStyle: {
normal: {
color: "#FF7400", //折线点的颜色
color: "#E1B623", //折线点的颜色
lineStyle: {
width: 3,//折线宽度
color: "#DDBF28"//折线颜色
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#FF0000'
}, {
offset: 0.2,
color: '#DDBF28'
}, {
offset: 0.4,
color: '#FF7400'
}, {
offset: 0.5,
color: '#00ADFF'
}, {
offset: 0.6,
color: '#DDBF28'
}])
}
}
},
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上#766016 transparent
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00ADFF'
}, {
offset: 0.5,
color: '#DDBF28'
offset: 0.1,
color: '#6e6a26'
}, {
offset: 1,
color: '#FF7400'
offset: 0.2,
color: '#766016'
}, {
offset: 0.5,
color: '#4b2006'
},{
offset: 0.6,
color: '#280d07'
}])
}
}
}]
};
}
}
handleData = (data) =>{
handleData = (data) => {
let map = new Map();
let dates = [];
let values = [];
if(data && data.length > 0){
data.map(item =>{
let time2 = item.date.substring(5);
dates.push(time2)
values.push(item.value)
if (data && data.length > 0) {
data.map(item => {
let time2 = item.date.substring(5);
dates.push(time2)
values.push(item.value)
})
}
map.set("dates",dates);
map.set("values",values);
map.set("dates", dates);
map.set("values", values);
return map;
}
render() {
let {data} = this.state;
let { data } = this.state;
let map = this.handleData(data);
return (
<div className="safetyIndexWeek">
......
src/view/panoramic/statistical/conf.js 0 → 100644
View file @ 865d4255
/**
* 告警控制
*/
export const warnController = [
{ key: 'fire', icon: 'model_fire', type: 'fire', label: '火灾告警' },
{ key: 'risk', icon: 'model_risk', type: 'risk', label: '风险异常' },
{ key: 'check', icon: 'model_patrol', type: 'check', label: '巡检异常' }
];
/**
* 安全执行控制
*/
export const warnTypes = [
{ key: 'warn', icon: 'select_warn', unIcon: 'unselect_warn', type: 'warn', label: '巡检异常' },
{ key: 'fire', icon: 'select_fire', unIcon: 'unselect_fire', type: 'fire', label: '火灾告警' },
{ key: 'risk', icon: 'select_risk', unIcon: 'unselect_risk', type: 'risk', label: '风险异常' },
{ key: 'check', icon: 'select_check', unIcon: 'unselect_check', type: 'check', label: '巡检异常' }
];
src/view/panoramic/statistical/index.js
View file @ 865d4255
......@@ -6,25 +6,67 @@ import SafetyIndex from './SafetyIndex';
import SafetyIndexWeek from './SafetyIndexWeek';
import StatisticsCheck from './StatisticsCheck';
import StatisticsDuty from './StatisticsDuty';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts';
/**
* 全景监控统计
*/
export default class Statistical extends Component {
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.stringify(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
case 'today_safety_index':
console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyIndex.getSafetyIndex();
break;
case 'fire_safety':
console.log('消防安全执行刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyExecute.safetyExecuteList();
break;
case 'monitor_data':
console.log('设备状态检测数据刷新~~~~~~~~~~~~~~~~~~~~');
this.equipStatus.equipStatusList();
break;
case 'error_status':
console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'week_safety_index':
console.log('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'today_check_status':
console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'today_duty':
console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'all':
console.log('首页刷新~~~~~~~~~~~~~~~~~~~~');
break;
default:
console.log(refreshType,'：类型不支持');
}
}
render() {
const wsURL = completeToken(SysWsURL.viewIndexws);
return (
<div className="statistical">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<div className="statistical-left">
<SafetyIndex/>
<SafetyExecuteList/>
<EquipStatusList/>
<SafetyIndex ref={node => this.safetyIndex = node} />
<SafetyExecuteList ref={node => this.safetyExecute = node} />
<EquipStatusList ref={node => this.equipStatus = node} />
</div>
<div className="statistical-right">
<SafetyIndexWeek/>
<StatisticsCheck/>
<StatisticsDuty/>
<SafetyIndexWeek />
<StatisticsCheck />
<StatisticsDuty />
</div>
</div>
);
......
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