Skip to content

A
amos-convertor-view
Commit e80b8525 authored by baoshuang's avatar baoshuang
Browse files
Options

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

parents ce38a085 d112c835
Show whitespace changes
Inline Side-by-side
Showing with 1222 additions and 12 deletions
src/consts/urlConsts.js
View file @ e80b8525
...@@ -77,6 +77,18 @@ export const FscSerUrl = { ...@@ -77,6 +77,18 @@ export const FscSerUrl = {
pointInfoUrl: completePrefix(patrolURI, 'api/spc/queryPointById/{pointId}'), // 获取巡检点详情 pointInfoUrl: completePrefix(patrolURI, 'api/spc/queryPointById/{pointId}'), // 获取巡检点详情
//******************************************************************************* //*******************************************************************************
// 全景监控
//*******************************************************************************
safetyIndexUrl: completePrefix(patrolURI, 'api/view3d/statistics/safetyIndex'),//今日安全指数
safetyIndexDetailUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/detail/{type}'),//今日安全指数详情
safetyExecuteListUrl: completePrefix(patrolURI, 'api/view3d/safetyExecute/list/{type}'),//告警列表最新5条
equipStatusListUrl: completePrefix(patrolURI, 'api/view3d/equipStatus/list'),//设备状态消息最新5条
safetyIndexWeekUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
statisticsCheckUrl: completePrefix(patrolURI, 'api/view3d/statistics/check'),//今日巡检统计接口
statisticsDutyUrl: completePrefix(patrolURI, 'api/view3d/statistics/duty'), //今日值班统计
//*******************************************************************************
// 巡检业务 // 巡检业务
//******************************************************************************* //*******************************************************************************
fetchCheckDetailById: completePrefix(patrolURI, 'api/spc/check-detail'), //根据ID查询巡检记录详情 fetchCheckDetailById: completePrefix(patrolURI, 'api/spc/check-detail'), //根据ID查询巡检记录详情
...@@ -247,6 +259,7 @@ selectedOrgInfoUrl: completePrefix(baseURI, 'api/region/current'),//获取选择 ...@@ -247,6 +259,7 @@ selectedOrgInfoUrl: completePrefix(baseURI, 'api/region/current'),//获取选择
queryNodeDetailUrl: completePrefix(baseURI, 'api/Topography/detail/{id}'),//获取node节点详情 queryNodeDetailUrl: completePrefix(baseURI, 'api/Topography/detail/{id}'),//获取node节点详情
saveNodeDetailUrl:completePrefix(baseURI, 'api/Topography/detail'),//保存nodeDetail详情 saveNodeDetailUrl:completePrefix(baseURI, 'api/Topography/detail'),//保存nodeDetail详情
deleteTopoUrl:completePrefix(baseURI, 'api/Topography/{type}/{id}'),//删除点/线 deleteTopoUrl:completePrefix(baseURI, 'api/Topography/{type}/{id}'),//删除点/线
manageLevelEumListUrl: completePrefix(baseURI, 'api/riskLevel/manageLevel/list')//查询管控级别
}; };
......
src/routes/view.js
View file @ e80b8525
...@@ -58,7 +58,7 @@ import ModuleEdit from './../view/3dview/ModuleEdit' ...@@ -58,7 +58,7 @@ import ModuleEdit from './../view/3dview/ModuleEdit'
import PanoramicMonitor from './../view/panoramicMonitor'; import PanoramicMonitor from './../view/panoramicMonitor';
import LeaderStruct from './../view/planMgmt/view/leaderStruct'; import LeaderStruct from './../view/planMgmt/view/leaderStruct';
import Graph3DModel from 'amos-iot-3dgraph/lib/view/modelMgmt'; import Graph3DModel from 'amos-iot-3dgraph/lib/view/modelMgmt';
import Panorama from './../view/Panorama'; import Panoramic from './../view/panoramic';
const Routes = { const Routes = {
...@@ -112,7 +112,7 @@ const Routes = { ...@@ -112,7 +112,7 @@ const Routes = {
// planDrill: PublishView, // planDrill: PublishView,
modelManage: Graph3DModel, modelManage: Graph3DModel,
leaderStruct: LeaderStruct, leaderStruct: LeaderStruct,
panorama: Panorama, panoramic: Panoramic,
}; };
const pageCompontent = key => { const pageCompontent = key => {
......
src/services/panoramicService.js 0 → 100644
View file @ e80b8525
import formatUrl from 'amos-processor/lib/utils/urlFormat';
import * as helper from 'base-r3d/lib/utils/helper';
import { FscSerUrl } from './../consts/urlConsts';
import { commonGet, commonPost } from './../utils/request';
/**
* 今日安全指数
*/
export const safetyIndexAction = () => {
return commonGet(FscSerUrl.safetyIndexUrl);
}
/**
* 今日安全指数详情
*/
export const safetyIndexDetailAction = ( type ) => {
return commonGet(formatUrl(FscSerUrl.safetyIndexDetailUrl,{ type }));
}
/**
* 告警列表最新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/services/preControlService.js
View file @ e80b8525
...@@ -247,3 +247,10 @@ export const getTextPlanTreeAction = (appId) => { ...@@ -247,3 +247,10 @@ export const getTextPlanTreeAction = (appId) => {
export const deleteTextPlanAction = (id) => { export const deleteTextPlanAction = (id) => {
return commonDelete(formatUrl(FasSerUrl.deleteTextPlanUrl, { id })); return commonDelete(formatUrl(FasSerUrl.deleteTextPlanUrl, { id }));
}; };
/**
* 查询管控级别
*/
export const getManageLevelEumListAction = () => {
return commonGet(FasSerUrl.manageLevelEumListUrl);
};
\ No newline at end of file
src/styles/view/index.scss
View file @ e80b8525
...@@ -4,3 +4,4 @@ ...@@ -4,3 +4,4 @@
@import './region/index.scss'; @import './region/index.scss';
@import './common/index.scss'; @import './common/index.scss';
@import './planMgmt/index.scss'; @import './planMgmt/index.scss';
@import './panoramic/index.scss';
src/styles/view/panoramic/index.scss 0 → 100644
View file @ e80b8525
@import './statistical.scss';
.sys-view-panoramic{
position: absolute;
top: 40px;
height: calc(100% - 40px);
width: 100%;
background: black;
color: white;
}
\ No newline at end of file
src/styles/view/panoramic/statistical.scss 0 → 100644
View file @ e80b8525
.statistical{
position: absolute;
height: 100%;
width: 100%;
.statistical-left{
height: 100%;
width: 350px;
float: left;
.equipStatusList{
height: 33.3%;
}
.safetyExecuteList{
height: 33.3%;
}
.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;
.content-item{
margin: 5px;
}
.safetyIndex-content-row{
display: flex;
align-items: flex-end;
.number-large{
font-size: 44px;
color: #00C3FF;
}
.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;
.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%;
.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
}
}
.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;
.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;
}
}
}
}
}
}
}
\ No newline at end of file
src/view/bizview/preControl/paramSet/riskLevel/RiskLevelModel.js
View file @ e80b8525
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Form, AmosAlert, Input, Select, InputNumber } from 'amos-framework'; import { Form, AmosAlert, Input, Select, InputNumber } from 'amos-framework';
import { riskLevelEditAction } from '../../../../../services/preControlService'; import { riskLevelEditAction, getManageLevelEumListAction } from '../../../../../services/preControlService';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
...@@ -17,9 +17,11 @@ class RiskLevelModel extends Component { ...@@ -17,9 +17,11 @@ class RiskLevelModel extends Component {
super(props); super(props);
this.state = { this.state = {
searchParam: [], searchParam: [],
manageLevelEum: [],
form: { form: {
level: '', level: '',
severity: '', severity: '',
manageLevel: '',
topLimit: 1, topLimit: 1,
downLimit: 1 downLimit: 1
}, },
...@@ -27,7 +29,8 @@ class RiskLevelModel extends Component { ...@@ -27,7 +29,8 @@ class RiskLevelModel extends Component {
level: [{ required: true, message: '风险级等级不能为空' }], level: [{ required: true, message: '风险级等级不能为空' }],
severity: [{ required: true, message: '严重程度影响描述不能为空' }], severity: [{ required: true, message: '严重程度影响描述不能为空' }],
topLimit: [{ required: true, message: '等级上限不能为空' }], topLimit: [{ required: true, message: '等级上限不能为空' }],
downLimit: [{ required: true, message: '等级下限不能为空' }] downLimit: [{ required: true, message: '等级下限不能为空' }],
manageLevel: [{required: true, message: '管理级别不能为空'}]
} }
}; };
} }
...@@ -39,7 +42,11 @@ class RiskLevelModel extends Component { ...@@ -39,7 +42,11 @@ class RiskLevelModel extends Component {
Object.assign(form, selectRowData); Object.assign(form, selectRowData);
this.setState({ form }); this.setState({ form });
} }
}; }
componentDidMount = () => {
this.fetchManageLevelEumList();
}
onSelectChange = (key, value) => { onSelectChange = (key, value) => {
const { form } = this.state; const { form } = this.state;
...@@ -57,6 +64,12 @@ class RiskLevelModel extends Component { ...@@ -57,6 +64,12 @@ class RiskLevelModel extends Component {
this.setState({ form }); this.setState({ form });
} }
fetchManageLevelEumList = ()=>{
getManageLevelEumListAction().then(data => {
this.setState({manageLevelEum: data});
});
}
handleSubmit = e => { handleSubmit = e => {
this.form.validate((valid, dataValues) => { this.form.validate((valid, dataValues) => {
if (valid) { if (valid) {
...@@ -81,7 +94,7 @@ class RiskLevelModel extends Component { ...@@ -81,7 +94,7 @@ class RiskLevelModel extends Component {
} }
render() { render() {
const { form, rules } = this.state; const { form, rules, manageLevelEum } = this.state;
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
...@@ -113,6 +126,15 @@ class RiskLevelModel extends Component { ...@@ -113,6 +126,15 @@ class RiskLevelModel extends Component {
<FormItem label={<span>下限</span>} field="downLimit" {...formItemLayout}> <FormItem label={<span>下限</span>} field="downLimit" {...formItemLayout}>
<InputNumber defaultValue={1} max={1000} min={1} value={form.downLimit} onChange={value => this.onChange(value, 'downLimit')} /> <InputNumber defaultValue={1} max={1000} min={1} value={form.downLimit} onChange={value => this.onChange(value, 'downLimit')} />
</FormItem> </FormItem>
<FormItem label={<span>管控级别</span>} field="manageLevel" {...formItemLayout}>
<Select
className="risk_factor_select"
data={manageLevelEum}
renderOption={item => <Option value={item.key}>{item.label}</Option>}
value={form.manageLevel}
onChange={(value)=> this.onSelectChange('manageLevel', value)}
/>
</FormItem>
<FormItem label={<span>严重程度影响描述</span>} field="severity" {...formItemLayout}> <FormItem label={<span>严重程度影响描述</span>} field="severity" {...formItemLayout}>
<TextArea className="risk_lever_input" value={form.severity} onChange={e => this.onSelectChange('severity', e.target.value)} /> <TextArea className="risk_lever_input" value={form.severity} onChange={e => this.onSelectChange('severity', e.target.value)} />
</FormItem> </FormItem>
......
src/view/bizview/preControl/paramSet/riskLevel/index.js
View file @ e80b8525
...@@ -25,7 +25,14 @@ const getColumns = () => { ...@@ -25,7 +25,14 @@ const getColumns = () => {
title: '严重度影响描述', title: '严重度影响描述',
dataIndex: 'severity', dataIndex: 'severity',
key: 'severity', key: 'severity',
width: '30%', width: '10%',
className: 'uant-table-thead'
},
{
title: '管控级别',
dataIndex: 'manageLevelName',
key: 'manageLevelName',
width: '10%',
className: 'uant-table-thead' className: 'uant-table-thead'
}, },
{ {
...@@ -39,14 +46,14 @@ const getColumns = () => { ...@@ -39,14 +46,14 @@ const getColumns = () => {
title: 'RPN上限', title: 'RPN上限',
dataIndex: 'topLimit', dataIndex: 'topLimit',
key: 'topLimit', key: 'topLimit',
width: '5%', width: '10%',
className: 'uant-table-thead' className: 'uant-table-thead'
}, },
{ {
title: 'RPN下限', title: 'RPN下限',
dataIndex: 'downLimit', dataIndex: 'downLimit',
key: 'downLimit', key: 'downLimit',
width: '5%', width: '10%',
className: 'uant-table-thead' className: 'uant-table-thead'
}, },
{ {
......
src/view/panoramic/index.js 0 → 100644
View file @ e80b8525
import React, { Component } from 'react';
import Statistical from './statistical'
/**
* 全景监控
*/
export default class Panoramic extends Component {
render() {
return (
<div className="sys-view-panoramic">
<Statistical/>
</div>
);
}
}
src/view/panoramic/statistical/EquipStatusList.js 0 → 100644
View file @ e80b8525
import React, { Component } from 'react';
/**
* 设备状态消息
*/
export default class EquipStatusList extends Component {
render() {
console.log('EquipStatusList')
return (
<div className="equipStatusList">
EquipStatusList
</div>
);
}
}
src/view/Panorama/index.js → src/view/panoramic/statistical/SafetyExecuteList.js
View file @ e80b8525
import React, { Component } from 'react'; import React, { Component } from 'react';
/** /**
* 全景监控 * 告警列表
*/ */
export default class Panorama extends Component { export default class SafetyExecuteList extends Component {
render() { render() {
return <div>111</div>; console.log('SafetyExecuteList')
return <div className="safetyExecuteList">SafetyExecuteList</div>;
} }
} }
src/view/panoramic/statistical/SafetyIndex.js 0 → 100644
View file @ e80b8525
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { safetyIndexAction } from './../../../services/panoramicService'
/**
* 今日安全指数
*/
export default class SafetyIndex extends Component {
constructor(props) {
super(props);
this.state = {
safetyIndexData:{}
};
}
componentDidMount() {
this.getSafetyIndex();
}
getSafetyIndex = () => {
safetyIndexAction().then(safetyIndexData => {
this.setState({safetyIndexData})});
}
getOption = () => {
const { safetyIndexData } = this.state;
return {
tooltip: {
show:false
},
toolbox: {
show:false,
feature: {
mark: {show: false},
restore: {show: false},
saveAsImage: {show: false}
}
},
series: [
{
name: '今日安全指数',
type: 'gauge',
center: ['10%', '48%'], // 默认全局居中
radius: '60%',
min: 0,
max: 100,
endAngle: 90,
startAngle:-90,
splitNumber: 3,
axisLine: { // 坐标轴线
show:false,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.5, 'red'],
[0.9, 'Orange'],
[0.95, 'Gold'],
[1, '#00C3FF']
],
width: 0,
opacity : 0
}
},
axisLabel: { // 坐标轴小标记
show:false
},
axisTick: { // 坐标轴小标记
show:false
},
splitLine: { // 分隔线
show:false
},
pointer: {
width: 5
},
title: {
show:false
},
detail: {
show:false
},
data: [{value: safetyIndexData.safetyIndex, name: '今日安全指数'}]
}
]
}
}
render() {
console.log('SafetyIndex')
const { safetyIndexData } = 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>今日安全指数 </div>
<div className='safetyIndex-content-row'>
<div className='number-large'>{safetyIndexData.safetyIndex}</div>
<span className='number-unit'>&nbsp;分&nbsp;
<img src="/src/assets/panoramic/statistical/main_icon_up.png" className="row-up" alt="up" />
</span>
</div>
{
[{name:'风险值上升',num:safetyIndexData.riskExceptionNum},
{name:'巡检不合格',num:safetyIndexData.checkExceptionNum},
{name:'火灾报警',num:safetyIndexData.fireExceptionNum}].map((item,index)=>
<div className="content-item">{item.name} {item.num}</div>
)
}
</div>
<ReactEcharts className='safetyIndex-content-chart' option={this.getOption()}/>
</div>
);
}
}
src/view/panoramic/statistical/SafetyIndexWeek.js 0 → 100644
View file @ e80b8525
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import echarts from 'echarts/lib/echarts';
import { safetyIndexWeekAction } from './../../../services/panoramicService';
/**
* 一周安全指数
*/
const option = {
xAxis: {
type: 'category',
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"
},
}
},
yAxis: {
type: 'value',
splitLine: { show: false },//去除网格线
axisLine: {
lineStyle: {
color: '#2A5D75',
}
},
// 改变y轴字体颜色和大小
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '14',
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
},
},
},
series: [{
data: [0, 40, 80, 100, 85, 70, 85, 80],
type: 'line',
smooth: true, //这个是把线变成
itemStyle: {
normal: {
color: "#FF7400", //折线点的颜色
lineStyle: {
width: 3,//折线宽度
color: "#DDBF28"//折线颜色
}
}
},
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00ADFF'
}, {
offset: 0.5,
color: '#DDBF28'
}, {
offset: 1,
color: '#FF7400'
}])
}
}
}]
};
class SafetyIndexWeek extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
};
}
componentDidMount() {
safetyIndexWeekAction().then(data => {
this.setState({
data: data
})
})
}
getOptionsx = (map) => {
return {
xAxis: {
type: 'category',
boundaryGap: false,
data: map.get("dates"),
axisLabel: {
interval: 0,//横轴信息全部显示
// rotate:40,
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '12',
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
},
margin: 15,//刻度标签与轴线之间的距离。
}
},
yAxis: {
type: 'value',
splitLine: { show: false },//去除网格线
axisLine: {
lineStyle: {
color: '#2A5D75',
}
},
// 改变y轴字体颜色和大小
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '12',
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
},
margin: 15,//刻度标签与轴线之间的距离。
},
},
series: [{
data: map.get("values"),
type: 'line',
symbol: 'circle',//折线点设置为实心点
smooth: true, //这个是把线变成
itemStyle: {
normal: {
color: "#E1B623", //折线点的颜色
lineStyle: {
width: 3,//折线宽度
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
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.1,
color: '#6e6a26'
}, {
offset: 0.2,
color: '#766016'
}, {
offset: 0.5,
color: '#4b2006'
},{
offset: 0.6,
color: '#280d07'
}])
}
}
}]
};
}
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)
})
}
map.set("dates", dates);
map.set("values", values);
return map;
}
render() {
let { data } = this.state;
let map = this.handleData(data);
return (
<div className="safetyIndexWeek">
<div className="content-week-font-style">
<span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") no-repeat center center/100% 100%' }}></span>一周安全趋势</div>
{/* <img src="/src/assets/panoramic/statistical/main_icon_textleft.png" ></img> */}
<ReactEcharts option={this.getOptionsx(map)} className='echart-week' />
</div>
);
}
}
SafetyIndexWeek.propTypes = {
};
export default SafetyIndexWeek;
src/view/panoramic/statistical/StatisticsCheck.js 0 → 100644
View file @ e80b8525
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { statisticsCheckAction } from './../../../services/panoramicService';
const option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: []
},
//绿色 黄色 灰色 红色
// color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
series: [
{
type: 'pie',
radius: ['80%', '70%'],
center: ['35%', '40%'], // 默认全局居中
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: '未执行' },
{ value: 310, name: '漏检' },
{ value: 234, name: '合格' },
{ value: 135, name: '不合格' },
]
}
]
};
/**
* 今日巡检统计
*/
class StatisticsCheck extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
statisticsCheckAction().then(data =>{
this.setState({
data:data
})
})
}
getOptionsx = (data) => {
return {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: []
},
//绿色 黄色 灰色 红色
// color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
color: ['#C0C0C0', '#00FF00', '#FFFF00', '#FF0000'],
series: [
{
type: 'pie',
radius: ['80%', '70%'],
center: ['35%', '40%'], // 默认全局居中
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:data
}
]
};;
}
handleData = (data) =>{
let map = new Map();
if(data && data.length > 0){
data.map(item =>{
map.set(item.name,item.value);
})
}
return map;
}
render() {
let {data} = this.state;
let map = this.handleData(data);
let weikaishi = map.get("未开始");
let hege = map.get("合格");
let buhege = map.get("不合格");
let loujian = map.get("漏检");
console.log('StatisticsCheck')
return (
<div className="statisticsCheck">
<div className="check-content">
<div className="content-xj-top">
<span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") no-repeat center center/100% 100%' }}></span> 今日巡检
</div>
<div className="content-xj-middle">
<ReactEcharts option={this.getOptionsx(data)} eventpool={this.onclick} className="div-echars" />
</div>
<div className="content-xj-bottom" >
<div className="yellow-div">
<div className="yellow-div-content">
<span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_buhege.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 合格
<span className="content-font-number"> {hege}个</span>
</span>
</div>
</div>
<div className="green-div">
<div className="green-div-content">
<span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_hege.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 未开始
<span className="content-font-number">{weikaishi}个</span>
</span>
</div>
</div>
<div className="red-div">
<div className="red-div-content">
<span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_louyan.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 漏检
<span className="content-font-number"> {loujian}个</span>
</span>
</div>
</div>
<div className="grey-div">
<div className="grey-div-content">
<span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_weizhixing.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 不合格
<span className="content-font-number"> {buhege}个</span>
</span>
</div>
</div>
</div>
</div>
</div>
)
}
}
StatisticsCheck.propTypes = {
};
export default StatisticsCheck;
\ No newline at end of file
src/view/panoramic/statistical/StatisticsDuty.js 0 → 100644
View file @ e80b8525
import React, { Component } from 'react';
import {statisticsDutyAction} from './../../../services/panoramicService';
/**
* 今日值班统计
*/
class StatisticsDuty extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
};
}
componentDidMount() {
statisticsDutyAction().then(data =>{
this.setState({
data:data
})
})
}
render() {
let {data} = this.state;
console.log('StatisticsDuty')
return (
<div className="statisticsDuty">
<div className="content-duty-font-style">
<span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") no-repeat center center/100% 100%' }}></span> 今日值班
</div>
<div className="content-picture-div">
<div className="content-picture-left">
<div className="content-image"></div>
<div className="content-wenzi">
<div className="wenzi-zhiban">值班</div>
<div className="wenzi-number">{data.dutyPersonNumber}</div>
</div>
</div>
<div className="content-picture-middle">
<div className="content-image"></div>
<div className="content-wenzi">
<div className="wenzi-zhiban">消防</div>
<div className="wenzi-number">{data.firePersonNumber}</div>
</div>
</div>
<div className="content-picture-right">
<div className="content-image"></div>
<div className="content-wenzi">
<div className="wenzi-zhiban">保安</div>
<div className="wenzi-number">{data.securityPersonNumber}</div>
</div>
</div>
</div>
{/* <img src="/src/assets/panoramic/statistical/main_icon_baoan.png" ></img>
<img src="/src/assets/panoramic/statistical/main_icon_baoan.png" ></img> */}
</div>
);
}
}
StatisticsDuty.propTypes = {
};
export default StatisticsDuty;
\ No newline at end of file
src/view/panoramic/statistical/index.js 0 → 100644
View file @ e80b8525
import React, { Component } from 'react';
import EquipStatusList from './EquipStatusList';
import SafetyExecuteList from './SafetyExecuteList';
import SafetyIndex from './SafetyIndex';
import SafetyIndexWeek from './SafetyIndexWeek';
import StatisticsCheck from './StatisticsCheck';
import StatisticsDuty from './StatisticsDuty';
/**
* 全景监控统计
*/
export default class Statistical extends Component {
render() {
return (
<div className="statistical">
<div className="statistical-left">
<SafetyIndex/>
<SafetyExecuteList/>
<EquipStatusList/>
</div>
<div className="statistical-right">
<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