Skip to content

A
amos-station-module-view
Commit 16fec21d authored by suhuiguang's avatar suhuiguang
Browse files
Options

1.修改监控评样式

parent 9a6170aa
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 20 additions and 1536 deletions
mods/components/3dviewConvertor/styles/index.js
View file @ 16fec21d
import './index.scss'
import './index.scss';
import './../assets/bizFont/iconfont.js';
import './view/index.scss';
\ No newline at end of file
import './view/index.scss';
mods/components/3dviewConvertor/styles/view/panoramic/index.scss
View file @ 16fec21d
@import './statistical.scss';
.sys-view-panoramic{
position: absolute;
top: 40px;
height: calc(100% - 40px);
width: 100%;
//background: black
.sys-view-panoramic {
position: absolute;
top: 40px;
width: 100%;
height: calc(100% - 40px);
}
mods/components/3dviewConvertor/styles/view/panoramic/statistical.scss
View file @ 16fec21d
......@@ -10,11 +10,13 @@
float: left;
z-index: 1;
color: white;
display: flex;
flex-direction: column;
.equipStatusList{
padding-left: 97px;
padding-top: 10px;
height: 33.3%;
flex-grow: 1;
.title-child{
width: 100%;
......@@ -31,7 +33,7 @@
}
.safetyExecuteList{
height: 40%;
flex: 2;
margin-left: 37px;
.up{
height: 90px;
......@@ -131,10 +133,10 @@
}
.safetyIndex {
height: 33.3%;
display: flex;
margin-left: 37px;
padding-top: 65px;
flex: 1;
.safetyIndex-icon {
width: 36px;
......@@ -223,8 +225,7 @@
}
.safetyIndexWeek {
height: 33.3%;
margin-bottom: -5%;
height: 33.3%;
.content-week-font-style {
width: 146px;
height: 18px;
......@@ -238,7 +239,6 @@
.statisticsCheck {
height: 50%;
margin-bottom: -106px;
.check-content {
height: 100%;
.content-xj-top {
......@@ -326,26 +326,24 @@
}
.div-echars {
margin-left: 17px;
background-image: url('../../assets/panoramic/circle_bg.png') !important;
background-repeat: no-repeat !important;
height: 200px !important;
background-image: url('../../assets/panoramic/circle_bg.png') !important;
background-position: 60px 14px !important;
background-repeat: no-repeat !important;
}
}
.statisticsDuty {
display: flex;
height: 16.7%;
flex-direction: column;
.content-duty-font-style {
width: 146px;
height: 18px;
font-size: 18px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-size: 18px;
font-weight: 500;
color: rgba(112, 238, 255, 1);
line-height: 65px;
margin-top: 25%;
margin-bottom: 14%;
color: rgba(112, 238, 255, 1);
}
.content-picture-div {
......
mods/components/3dviewConvertor/view/panoramic/index.js
View file @ 16fec21d
import React, { Component } from 'react';
import Statistical from './statistical'
import Statistical from './statistical';
/**
* 全景监控
......
mods/components/panoramic/consts/imgStatic.js deleted 100644 → 0
View file @ 9a6170aa
export default {
panoramicIcon: {
safetyrate: require('./../assets/panoramic/main_icon_safetyrate.png'),
safetyup: require('./../assets/panoramic/main_icon_up.png'),
safetyexecute: require('./../assets/panoramic/main_icon_safetyexecute.png'),
select_warn: require('./../assets/panoramic/main_icon_select_warntitle.png'),
select_fire: require('./../assets/panoramic/main_icon_select_fire.png'),
select_risk: require('./../assets/panoramic/main_icon_select_risk.png'),
select_check: require('./../assets/panoramic/main_icon_select_check.png'),
unselect_warn: require('./../assets/panoramic/main_icon_unselect_warntitle.png'),
unselect_fire: require('./../assets/panoramic/main_icon_unselect_fire.png'),
unselect_risk: require('./../assets/panoramic/main_icon_unselect_risk.png'),
unselect_check: require('./../assets/panoramic/main_icon_unselect_check.png'),
arrow_warn: require('./../assets/panoramic/main_icon_left_arrow.png'),
unfold: require('./../assets/panoramic/main_icon_left_unfold.png'),
model_fire: require('./../assets/panoramic/main_icon_model_fire.png'),
model_risk: require('./../assets/panoramic/main_icon_model_risk.png'),
model_patrol: require('./../assets/panoramic/main_icon_model_patrol.png'),
model_close: require('./../assets/panoramic/main_icon_model_close.png'),
textleft: require('./../assets/panoramic/main_icon_textleft.png'),
check_buhege: require('./../assets/panoramic/main_icon_tag_buhege.png'),
check_hege: require('./../assets/panoramic/main_icon_tag_hege.png'),
check_louyan: require('./../assets/panoramic/main_icon_tag_louyan.png'),
check_weizhixing: require('./../assets/panoramic/main_icon_tag_weizhixing.png')
}
};
mods/components/panoramic/consts/urlConsts.js deleted 100644 → 0
View file @ 9a6170aa
import * as endConf from 'amos-processor/lib/config/endconf';
const completePrefix = endConf.completePrefix;
const AmosConfig = endConf.AmosConfig;
const baseURI = AmosConfig.httpURI.baseURI;
export const FscSerUrl = {
//*******************************************************************************
// 全景监控
//*******************************************************************************
safetyIndexUrl: completePrefix(baseURI, 'api/view3d/statistics/safetyIndex'),//今日安全指数
safetyIndexDetailUrl: completePrefix(baseURI, 'api/view3d/safetyIndex/detail/{type}'),//今日安全指数详情
safetyExecuteListUrl: completePrefix(baseURI, 'api/view3d/safetyExecute/list/{type}'),//告警列表最新5条
equipStatusListUrl: completePrefix(baseURI, 'api/view3d/equipStatus/list'),//设备状态消息最新5条
safetyIndexWeekUrl: completePrefix(baseURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
statisticsCheckUrl: completePrefix(baseURI, 'api/view3d/statistics/check'),//今日巡检统计接口
statisticsDutyUrl: completePrefix(baseURI, 'api/view3d/statistics/duty'), //今日值班统计
onlineDayUrl: completePrefix(baseURI, 'api/view3d/online/date') //消防安全执行天数
};
mods/components/panoramic/consts/wsUrlConsts.js deleted 100644 → 0
View file @ 9a6170aa
import * as endConf from 'amos-processor/lib/config/endconf';
import formatUrl from 'amos-processor/lib/utils/urlFormat';
import { Store } from 'amos-tool';
import SysConsts from 'amos-processor/lib/config/consts';
const lsTool = Store.lsTool;
const completePrefix = endConf.completePrefix;
const AmosConfig = endConf.AmosConfig;
const baseURI = AmosConfig.wsURI.baseURI;
const view3dURI = AmosConfig.wsURI.view3dURI;
const getToken = () => {
return lsTool.read(SysConsts.token);
};
export default {
rulews: completePrefix(view3dURI, 'rule.ws?token={token}'),
view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}'),
viewIndexws: completePrefix(baseURI, '3dViewMessage')
};
export const completeToken = (url) => {
const token = getToken();
const result = formatUrl(url, { token });
return result;
};
mods/components/panoramic/index.js deleted 100644 → 0
View file @ 9a6170aa
import panoramicLeft from './view/panoramic/statistical/indexLeft';
export default {
key: 'panoramicLeft',
component: panoramicLeft
};
mods/components/panoramic/index.jsx deleted 100644 → 0
View file @ 9a6170aa
import panoramicRight from './view/panoramic/statistical/indexRight';
export default {
key: 'panoramicRight',
component: panoramicRight
};
mods/components/panoramic/services/panoramicService.js deleted 100644 → 0
View file @ 9a6170aa
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 }));
};
/**
* 消防安全执行天数
*/
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);
};
mods/components/panoramic/styles/view/panoramic/index.scss deleted 100644 → 0
View file @ 9a6170aa
@import './statistical.scss';
.sys-view-panoramic{
position: absolute;
top: 40px;
height: calc(100% - 40px);
width: 100%;
//background: black;
}
mods/components/panoramic/utils/payload.js deleted 100644 → 0
View file @ 9a6170aa
export default function(data, delRequest){
window.setLoading && window.setLoading(false);
return new Promise((resolve, reject) => {
if (data) {
if (data.dataList || data.dataList === null){
if(data.result==='SUCCESS'){
resolve(data.dataList);
}else{
resolve(data.result);
}
} else if (data.result || data.result === null){
resolve(data.result);
}else{
resolve(data);
}
} else {
if (data) {
reject(data.message);
} else {
reject(data);
}
}
});
}
mods/components/panoramic/utils/request.js deleted 100644 → 0
View file @ 9a6170aa
import amosRequest, { singleFetch } from 'amos-processor/lib/fetch/amosRequest';
import { utils, Store } from 'amos-tool';
import { message } from 'amos-framework';
import formatUrl from 'amos-processor/lib/utils/urlFormat';
import SysConsts from 'amos-processor/lib/config/consts';
import imgStatic from './../consts/imgStatic';
const panoramicIcon = imgStatic.panoramicIcon;
import payload from './payload';
const lsTool = Store.lsTool;
const defaultPageable = {
page: 0,
size: 10
};
const defaultHeaders = {
appKey: 'CONVERTER_STATION',
product: 'CONVERTER_STATION_WEB',
channelType: '3dpage'
};
const compleHeaders = () => {
return {
...defaultHeaders,
token: getToken(),
};
};
/**
* 获取 token
*/
const getToken = () => {
return lsTool.read(SysConsts.token);
}
/**
* 删除全局变量requests中的地址
* @param {*} url
* @param {*} method
*/
const delRequest = (url, method) => {
if (window.requests && window.requests.length > 0) {
window.requests = window.requests.filter(e => e.url !== url && e.method !== method);
}
};
/**
* 构建分页
*/
const buildPageable = (url, pageable = defaultPageable) => {
let { page, size } = pageable;
return `${url}?page=${page}&size=${size}`;
};
/**
* 转换指定值为 JSON
* @param {array} dataList
* @param {string} key
*/
const convertDatalist = (dataList = [], key = 'content') => {
const newDL = dataList.map(d => {
if (!utils.isNil(d[key]) && utils.isString(d[key])) {
d[key] = JSON.parse(d[key]);
}
return d;
});
return newDL;
};
export function commonGet(url) {
window.setLoading && window.setLoading(true);
return amosRequest(url, {
timeout: 10000000 ,
method: 'GET',
headers: compleHeaders(),
reject(error){
window.setLoading && window.setLoading(false);
delRequest(url, 'GET');
//message.danger(error.message || '请求失败，服务器错误！');
}
}).then(data => payload(data));
}
export function commonPost(url, data, params) {
window.setLoading && window.setLoading(true);
return amosRequest(url, {
timeout: 10000000,
method: 'POST',
headers: compleHeaders(),
body: data,
reject(error){
delRequest(url, 'POST');
window.setLoading && window.setLoading(false);
//message.danger(error.message || '请求失败，服务器错误！');
}
}).then(data => payload(data));
}
export function commonPut(url, data, params) {
window.setLoading && window.setLoading(true);
return amosRequest(url, {
timeout: 10000000,
method: 'PUT',
headers: compleHeaders(),
body: data,
reject(error){
delRequest(url, 'PUT');
window.setLoading && window.setLoading(false);
//message.danger(error.message || '请求失败，服务器错误！');
}
}).then(data => payload(data));
}
export function commonDelete(url, data, params) {
window.setLoading && window.setLoading(true);
return amosRequest(url, {
timeout: 10000000 ,
method: 'DELETE',
headers: compleHeaders(),
body: data,
reject(error){
window.setLoading && window.setLoading(false);
//message.danger(error.message || '请求失败，服务器错误！');
}
}).then(data => payload(data));
}
export const getWithCookie = (url) => {
return commonGet(url, {
hasCookie: true
});
};
export const getIcon = (alarmType) => {
return panoramicIcon[`${alarmType}`];
};
export { amosRequest, singleFetch, convertDatalist, buildPageable, formatUrl };
mods/components/panoramic/view/panoramic/index.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
import Statistical from './statistical'
/**
* 全景监控
*/
export default class Panoramic extends Component {
render() {
return (
<div className="sys-view-panoramic">
<Statistical/>
</div>
);
}
}
mods/components/panoramic/view/panoramic/statistical/EquipStatusList.js deleted 100644 → 0
View file @ 9a6170aa
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() {
let { equipStatusList } = this.state;
return (
<div className="equipStatusList">
{this.renderContent(equipStatusList)}
</div>
);
}
}
mods/components/panoramic/view/panoramic/statistical/ModelContent.js deleted 100644 → 0
View file @ 9a6170aa
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;
this.safetyIndexDetail(type);
}
safetyIndexDetail = (type) => {
safetyIndexDetailAction(type).then(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) =>{
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>
);
}
}
mods/components/panoramic/view/panoramic/statistical/SafetyExecuteList.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
import imgStatic from './../../../consts/imgStatic';
import { onlineDayAction, safetyExecuteListAction } from './../../../services/panoramicService';
import { getIcon } from './../../../utils/request';
import { warnTypes } from './conf';
const panoramicIcon = imgStatic.panoramicIcon;
/**
* 告警列表
*/
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() {
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>)
);
}
}
mods/components/panoramic/view/panoramic/statistical/SafetyIndex.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { safetyIndexAction } from './../../../services/panoramicService';
import imgStatic from './../../../consts/imgStatic';
import ModelContent from './ModelContent';
import { warnController } from './conf';
import { getIcon } from './../../../utils/request';
const panoramicIcon = imgStatic.panoramicIcon;
/**
* 今日安全指数
*/
export default class SafetyIndex extends Component {
constructor(props) {
super(props);
this.state = {
safetyIndexData: {},
modelVisable: false
};
}
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: '今日安全指数'}]
}
]
}
}
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() {
const { safetyIndexData, modelVisable } = this.state;
return (
<div className="safetyIndex">
<div className="safetyIndex-icon">
<img className="safetyIndex-safetyrate" src={panoramicIcon.safetyrate} alt="safetyrate" />
</div>
<div className='safetyIndex-content' onClick={() => this.modelOpen(true)}>
<div>今日安全指数 </div>
<div className='safetyIndex-content-row'>
<div className='number-large'>{safetyIndexData.safetyIndex}</div>
<span className='number-unit'>&nbsp;分&nbsp;
<img src={panoramicIcon.safetyup} 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()}/>
{ modelVisable && this.renderWarnContent()}
</div>
);
}
}
mods/components/panoramic/view/panoramic/statistical/SafetyIndexWeek.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import echarts from 'echarts/lib/echarts';
import { safetyIndexWeekAction } from './../../../services/panoramicService';
import { getIcon } from './../../../utils/request';
/**
* 一周安全指数
*/
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() {
this.safetyIndexWeekData();
}
safetyIndexWeekData = () => {
safetyIndexWeekAction().then(data => {
this.setState({
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(${getIcon('textleft')}) 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;
mods/components/panoramic/view/panoramic/statistical/StatisticsCheck.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { statisticsCheckAction } from './../../../services/panoramicService';
import { getIcon } from './../../../utils/request';
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() {
this.statisticsCheckData();
}
statisticsCheckData = () => {
statisticsCheckAction().then(data => {
this.setState({
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;
}
rederStyle = (checkType) => {
const style = {
background: `url(${getIcon(checkType)}) no-repeat center center/100% 100%`
};
return style;
}
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("漏检");
return (
<div className="statisticsCheck">
<div className="check-content">
<div className="content-xj-top">
<span className='titleIcon' style={this.rederStyle('textleft')}></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={this.rederStyle('check_buhege')}></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={this.rederStyle('check_hege')}></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={this.rederStyle('check_louyan')}></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={this.rederStyle('check_weizhixing')}></span><span className="content-week-font"> 不合格
<span className="content-font-number"> {buhege}个</span>
</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
StatisticsCheck.propTypes = {
};
export default StatisticsCheck;
mods/components/panoramic/view/panoramic/statistical/StatisticsDuty.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
import { statisticsDutyAction } from './../../../services/panoramicService';
import { getIcon } from './../../../utils/request';
/**
* 今日值班统计
*/
class StatisticsDuty extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
};
}
componentDidMount() {
this.statisticsDutyData();
}
statisticsDutyData = () => {
statisticsDutyAction().then(data => {
this.setState({
data
});
});
}
render() {
let { data } = this.state;
return (
<div className="statisticsDuty">
<div className="content-duty-font-style">
<span className='titleIcon' style={{ background: `url(${getIcon('textleft')}) 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;
mods/components/panoramic/view/panoramic/statistical/conf.js deleted 100644 → 0
View file @ 9a6170aa
/**
* 告警控制
*/
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: '巡检异常' }
];
mods/components/panoramic/view/panoramic/statistical/index.js deleted 100644 → 0
View file @ 9a6170aa
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';
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.parse(JSON.stringify(data));
console.log(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('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyIndexWeek.safetyIndexWeekData();
break;
case 'today_check_status':
console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
this.statisticsCheck.statisticsCheckData();
break;
case 'today_duty':
this.statisticsDuty.statisticsDutyData();
console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'all':
console.log('首页刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyIndex.getSafetyIndex();
this.safetyExecute.safetyExecuteList();
this.equipStatus.equipStatusList();
this.safetyIndexWeek.safetyIndexWeekData();
this.statisticsCheck.statisticsCheckData();
this.statisticsDuty.statisticsDutyData();
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 ref={node => this.safetyIndex = node} />
<SafetyExecuteList ref={node => this.safetyExecute = node} />
<EquipStatusList ref={node => this.equipStatus = node} />
</div>
<div className="statistical-right">
<SafetyIndexWeek ref={node => this.safetyIndexWeek = node} />
<StatisticsCheck ref={node => this.statisticsCheck = node} />
<StatisticsDuty ref={node => this.statisticsDuty = node} />
</div>
</div>
);
}
}
mods/components/panoramic/view/panoramic/statistical/indexLeft.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
import EquipStatusList from './EquipStatusList';
import SafetyExecuteList from './SafetyExecuteList';
import SafetyIndex from './SafetyIndex';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
/**
* 全景监控统计
*/
export default class StatisticalLeft extends Component {
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data));
console.log(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 'all':
console.log('首页左侧刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyIndex.getSafetyIndex();
this.safetyExecute.safetyExecuteList();
this.equipStatus.equipStatusList();
break;
default:
console.log(refreshType,'：类型不支持');
}
}
render() {
const wsURL = completeToken(SysWsURL.viewIndexws);
return (
<div className="statistical-left">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<SafetyIndex ref={node => this.safetyIndex = node} />
<SafetyExecuteList ref={node => this.safetyExecute = node} />
<EquipStatusList ref={node => this.equipStatus = node} />
</div>
);
}
}
mods/components/panoramic/view/panoramic/statistical/indexRight.js deleted 100644 → 0
View file @ 9a6170aa
import React, { Component } from 'react';
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 StatisticalRight extends Component {
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data));
console.log(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
case 'error_status':
console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'week_safety_index':
console.log('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyIndexWeek.safetyIndexWeekData();
break;
case 'today_check_status':
console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
this.statisticsCheck.statisticsCheckData();
break;
case 'today_duty':
this.statisticsDuty.statisticsDutyData();
console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'all':
console.log('首页右侧刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyIndexWeek.safetyIndexWeekData();
this.statisticsCheck.statisticsCheckData();
this.statisticsDuty.statisticsDutyData();
break;
default:
console.log(refreshType,'：类型不支持');
}
}
render() {
const wsURL = completeToken(SysWsURL.viewIndexws);
return (
<div className="statistical-right">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<SafetyIndexWeek ref={node => this.safetyIndexWeek = node} />
<StatisticsCheck ref={node => this.statisticsCheck = node} />
<StatisticsDuty ref={node => this.statisticsDuty = node} />
</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