Skip to content

A
amos-convertor-view
Commit 4e8729eb authored by zhengjiangtao's avatar zhengjiangtao
Browse files
Options

全景监控右侧模块

parent 292efc39
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 473 additions and 7 deletions
src/styles/view/panoramic/statistical.scss
View file @ 4e8729eb
This diff is collapsed.
src/view/panoramic/statistical/SafetyIndexWeek.js
View file @ 4e8729eb
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import echarts from 'echarts/lib/echarts';
import { safetyIndexWeekAction } from './../../../services/panoramicService';
/**
* 一周安全指数
*/
export default class SafetyIndexWeek extends Component {
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: '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: map.get("values"),
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'
}])
}
}
}]
};
}
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() {
console.log('SafetyIndexWeek')
return <div className="safetyIndexWeek">SafetyIndexWeek</div>;
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
View file @ 4e8729eb
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: '不合格' },
]
}
]
};
/**
* 今日巡检统计
*/
export default class StatisticsCheck extends Component {
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">StatisticsCheck</div>;
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
View file @ 4e8729eb
import React, { Component } from 'react';
import {statisticsDutyAction} from './../../../services/panoramicService';
/**
* 今日值班统计
*/
export default class StatisticsDuty extends Component {
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">StatisticsDuty</div>;
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
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