Skip to content

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

全景监控右侧模块

parent 292efc39
Show whitespace changes
Inline Side-by-side
Showing with 750 additions and 10 deletions
src/styles/view/panoramic/statistical.scss
View file @ 4e8729eb
......@@ -23,19 +23,293 @@
.statistical-right{
height: 100%;
width: 350px;
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;
}
.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;
}
}
.statisticsCheck{
height: 33.3%;
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: 33.3%;
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;
}
}
}
}
}
}
......
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