Commit da793909 authored by 王海涛's avatar 王海涛

Merge branch 'developer' of 172.16.10.76:station/station-elec-manage-view into developer

parents e77ed618 27f20218
...@@ -41,23 +41,7 @@ export const riskTrendData = { ...@@ -41,23 +41,7 @@ export const riskTrendData = {
fontSize: 14 fontSize: 14
} }
}, },
dataZoom: [
{
show: true,
realtime: true,
backgroundColor: '#00B9ff',
borderColor: '#00B9ff',
left: 40,
height: 14,
width: 996,
bottom: 5
},
{
type: 'inside',
realtime: true,
textStyle: false
}
],
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
......
...@@ -271,4 +271,14 @@ const geoCoordMap = { ...@@ -271,4 +271,14 @@ const geoCoordMap = {
大庆: [125.03, 46.58] 大庆: [125.03, 46.58]
}; };
export { provienceData, geoCoordMap };
//地图标点用
const dmtData = [
{ latitude: 30.67, longitude: 104.07 },
{ latitude: 34.76, longitude: 113.65 },
{ latitude: 29.65, longitude: 91.13 },
{ latitude: 43.82, longitude: 87.62 }
];
export { provienceData, geoCoordMap, dmtData };
.daily-duties-content{ @function vw($px) {
position:absolute; @return ($px/ 1920) * 100vw;
left:0; }
top:pxToRem(68px);
right:0; @function vh($px) {
bottom:0; //left,top,right,bottom都为0,充满真个页面 @return ($px/ 1080) * 100vh;
overflow-y:auto; }
overflow-x:hidden; //设置Y轴出现滚动条,X轴隐藏
.daily-duties-content {
position: absolute;
left: 0;
top: vh(68);
right: 0;
bottom: 0; //left,top,right,bottom都为0,充满真个页面
overflow-y: auto;
overflow-x: hidden; //设置Y轴出现滚动条,X轴隐藏
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
...@@ -17,232 +26,281 @@ ...@@ -17,232 +26,281 @@
color: rgb(89, 240, 251); color: rgb(89, 240, 251);
line-height: 60%; line-height: 60%;
text-align: center; text-align: center;
font-size: 22px; font-size: pxToRem(22px);
width: 28px; width: vw(28);
height: 28px; height: vh(28);
background: linear-gradient(180deg,rgba(95,255,253,0.6) 0%,rgba(95,255,253,0.1) 100%); background: linear-gradient(180deg, rgba(95, 255, 253, 0.6) 0%, rgba(95, 255, 253, 0.1) 100%);
cursor: pointer; cursor: pointer;
} }
.common-margin{ .common-margin {
margin-top: pxToRem(29px); margin-top: vh(29);
} }
.daily-title{
font-size:pxToRem(20px); .daily-title {
font-size: pxToRem(20px);
color: #ffffff; color: #ffffff;
} }
.daily-title-content{
width:pxToRem(257px); .daily-title-content {
width: vw(257);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.top-ten-content{ .top-ten-content {
padding:pxToRem(30px) pxToRem(30px); padding: vh(30) vw(30);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
height: 100%; height: 100%;
.top-ten-item{ .top-ten-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.top-ten-item-middle{
width:pxToRem(208px); .top-ten-item-middle {
height: pxToRem(16px); width: vw(208);
height: vh(16);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
background-color: #1C6264; background-color: #1C6264;
.top-ten-item-middlelinear{
background-image: linear-gradient(to right, #1C6264 , #00FFF7); .top-ten-item-middlelinear {
background-image: linear-gradient(to right, #1C6264, #00FFF7);
} }
} }
.top-ten-item-bottom{
width:pxToRem(36px); .top-ten-item-bottom {
width: vw(36);
display: flex; display: flex;
flex-direction:row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
} }
} }
} }
} }
.class-Situation .daily-duties-left{
.class-Situation .daily-duties-left {
height: 100%; height: 100%;
.safety-rate-view{ position: relative;
left: 1%;
.safety-rate-view {
// background-image: url('../../assets/dailyDuties/leftTop.png'); // background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:pxToRem(412px); width: vw(412);
height:pxToRem(390px); height: vh(450);
} }
.growth-statistics-view{
.growth-statistics-view {
// background-image: url('../../assets/dailyDuties/leftBottom.png'); // background-image: url('../../assets/dailyDuties/leftBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:pxToRem(411px); width: vw(411);
height:pxToRem(444px); height: vh(450);
.growth-content{ margin-top: vh(47);
padding:pxToRem(30px) pxToRem(24px);
.growth-content {
padding: vh(30) vw(24);
height: 100%; height: 100%;
.growth-item-header{ .growth-item-header {
font-size: pxToRem(20px); font-size: pxToRem(20px);
color: #52EDF2; color: #52EDF2;
} }
.growth-item-text{
.growth-item-text {
font-size: pxToRem(20px); font-size: pxToRem(20px);
color: #ffffff; color: #ffffff;
} }
.growth-item-datatext{
.growth-item-datatext {
font-size: pxToRem(20px); font-size: pxToRem(20px);
color: #00CACE; color: #00CACE;
} }
.growth-item{
.growth-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
height:pxToRem(42px); height: vh(42);
width: pxToRem(362px); width: vw(340);
background-color:#1C6264 ; background-color: #1C6264;
margin-top:pxToRem(5px); margin-top: vh(5);
} }
.growth-item:hover{
background-color:#00B9FF ; .growth-item:hover {
background-color: #00B9FF;
} }
} }
} }
} }
.class-Situation .daily-duties-middle{ .class-Situation .daily-duties-middle {
height: 100%; height: 100%;
margin-left: pxToRem(19px); margin-left: vw(25);
margin-right: pxToRem(19px); margin-right: vw(-18);
.statistics-title{
.statistics-title {
font-size: pxToRem(32px); font-size: pxToRem(32px);
color: #00EEE8; color: #00EEE8;
} }
.statistics-title-content{
width:100%; .statistics-title-content {
width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.statistics-view{
.statistics-view {
// background-image: url('../../assets/dailyDuties/middleTop.png'); // background-image: url('../../assets/dailyDuties/middleTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:pxToRem(999px); width: vw(999);
height:pxToRem(533px); height: vh(600);
position: relative; position: relative;
.statistics-banner{ .statistics-banner {
position: absolute; position: absolute;
left:pxToRem(95px); left: vw(95);
right: pxToRem(95px); right: vw(95);
top: 3%; top: 3%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
z-index: 2; z-index: 2;
.statistics-banner-content{
height: pxToRem(100px); .statistics-banner-content {
width:pxToRem(380px); height: vh(100);
background-color:rgba(28, 98, 100, 0.5) ; width: vw(380);
background-color: rgba(28, 98, 100, 0.5);
border-radius: pxToRem(5px); border-radius: pxToRem(5px);
.statistics-banner-item{
height: pxToRem(100px); .statistics-banner-item {
margin-left: pxToRem(32px); height: vh(100);
margin-right: pxToRem(32px); margin-left: vw(32);
margin-right: vw(32);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.statistics-banner-itemblock{
.statistics-banner-itemblock {
text-align: center; text-align: center;
.statistics-text-number{
.statistics-text-number {
font-weight: bold; font-weight: bold;
font-size: pxToRem(35px); font-size: pxToRem(35px);
color:#00EEE8 ; color: #00EEE8;
letter-spacing:pxToRem(5px); letter-spacing: pxToRem(5px);
height: pxToRem(44px); height: vh(44);
display: flex; display: flex;
flex-direction:row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
} }
span{
span {
font-weight: bold; font-weight: bold;
font-size: pxToRem(20px); font-size: pxToRem(20px);
color:#FF0000 ; color: #FF0000;
letter-spacing:pxToRem(5px); letter-spacing: pxToRem(5px);
padding-top: pxToRem(9px); padding-top: vh(9);
} }
p{
p {
font-size: pxToRem(14px); font-size: pxToRem(14px);
color:#FFF ; color: #FFF;
} }
} }
} }
} }
} }
} }
.risk-trend-view{
.risk-trend-view {
// background-image: url('../../assets/dailyDuties/middleBottom.png'); // background-image: url('../../assets/dailyDuties/middleBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:pxToRem(1002px); width: vw(1002);
height:pxToRem(289px); height: vh(307);
position: relative; position: relative;
.buttongroup-style{
.buttongroup-style {
position: absolute; position: absolute;
right:pxToRem(50px); right: vw(50);
top:pxToRem(56px); top: 14%;
z-index:2 ; z-index: 2;
.button-style{
.button-style {
border-width: pxToRem(1px); border-width: pxToRem(1px);
border-color: #45FEFE; border-color: #45FEFE;
width:pxToRem(80px); width: vw(80);
} }
} }
.risk-trend-content{
padding:pxToRem(20px); .risk-trend-content {
width:100%; padding: pxToRem(20px);
width: 100%;
height: 100%; height: 100%;
.div-echars {
margin-left: vw(-45);
height: vh(300) !important;
width: 100% !important;
}
} }
} }
} }
.class-Situation .daily-duties-right{
.class-Situation .daily-duties-right {
height: 100%; height: 100%;
.risk-failure-view{
// background-image: url('../../assets/dailyDuties/leftTop.png'); .risk-failure-view {
background-repeat: no-repeat;
width:pxToRem(412px); width: vw(450);
height:pxToRem(390px); height: vh(450);
position: relative;
top: vh(15);
} }
.recent-statistics-view{
.recent-statistics-view {
// background-image: url('../../assets/dailyDuties/rightBottom.png'); // background-image: url('../../assets/dailyDuties/rightBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:pxToRem(411px); width: vw(450);
height:pxToRem(444px); height: vh(440);
position: relative; position: relative;
.buttongroup-style{ top:vh(24);
.buttongroup-style {
position: absolute; position: absolute;
right:pxToRem(50px); right: vw(20);
top:pxToRem(56px); top: 11%;
z-index:2 ; z-index: 2;
.button-style{
border-width: pxToRem(1px); .button-style {
border-width: vw(1);
border-color: #45FEFE; border-color: #45FEFE;
width:pxToRem(80px) width: vw(80)
} }
} }
.recent-statistics-content{ .recent-statistics-content {
padding:pxToRem(20px); padding: pxToRem(20px);
width:100%; width: 100%;
height: 100%; height: 100%;
.div-echars-style {
height: vh(430) !important;
width: 100% !important;
background-position: vw(60) vh(14) !important;
}
} }
} }
} }
...@@ -433,6 +433,7 @@ ...@@ -433,6 +433,7 @@
text-stroke: 1 rgba(0, 0, 0, 0); text-stroke: 1 rgba(0, 0, 0, 0);
border-radius: 17px; border-radius: 17px;
width: 102%; width: 102%;
margin-bottom: vh(7);
} }
.ant-calendar-picker-icon:after { .ant-calendar-picker-icon:after {
...@@ -442,7 +443,7 @@ ...@@ -442,7 +443,7 @@
background-size: 100% 100%; background-size: 100% 100%;
width: vw(18); width: vw(18);
height: vh(20); height: vh(20);
bottom: vh(0); bottom: vh(1);
right: vw(-2); right: vw(-2);
content: '' !important; content: '' !important;
} }
...@@ -585,7 +586,7 @@ ...@@ -585,7 +586,7 @@
.risk-model-model99 { .risk-model-model99 {
.amos-modal-container { .amos-modal-container {
background: rgba(14, 127, 180, 0.29); background: rgba(14, 127, 180, 0.29);
height: 70%; // height: 70%;
} }
.amos-modal-content { .amos-modal-content {
...@@ -1185,7 +1186,7 @@ ...@@ -1185,7 +1186,7 @@
margin-left: vw(17); margin-left: vw(17);
height: vh(260) !important; height: vh(260) !important;
width: 82% !important; width: 82% !important;
background-position: 60px vh(14) !important; background-position: vw(60) vh(14) !important;
} }
.jiantou { .jiantou {
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { growthData } from './data'; import { growthData } from './../../../../_mock/rczsData/data';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
class GrowthStatistics extends Component { class GrowthStatistics extends Component {
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import { recentData1, recentData2 } from './data'; import { recentData1, recentData2 } from './../../../../_mock/rczsData/data';
import { Button } from 'amos-framework'; import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
...@@ -36,7 +36,7 @@ class RecentStatistics extends Component { ...@@ -36,7 +36,7 @@ class RecentStatistics extends Component {
</ButtonGroup> </ButtonGroup>
<div className="recent-statistics-content" style={{position: 'relative'}}> <div className="recent-statistics-content" style={{position: 'relative'}}>
<div className="content-detail" onClick={this.props.onStatisticClick}>...</div> <div className="content-detail" onClick={this.props.onStatisticClick}>...</div>
<ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} /> <ReactEcharts option={recentData} className="div-echars-style" />
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { riskFailureData } from './data'; import { riskFailureData } from './../../../../_mock/rczsData/data';
import { OverFlowText } from 'amos-framework'; import { OverFlowText } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import { riskTrendData } from './data'; import { riskTrendData } from './../../../../_mock/rczsData/data';
import { Button } from 'amos-framework'; import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
...@@ -32,7 +31,7 @@ class RiskTrend extends Component { ...@@ -32,7 +31,7 @@ class RiskTrend extends Component {
<Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} /> <Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} />
</ButtonGroup> </ButtonGroup>
<div className="risk-trend-content"> <div className="risk-trend-content">
<ReactEcharts option={riskTrendData} style={{ height: '100%', width: '100%' }} /> <ReactEcharts option={riskTrendData} className="div-echars" />
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import { SafetyRateData } from './../../../../_mock/rczsData/data';
import { SafetyRateData } from './data'; import { OverFlowText } from 'amos-framework';
import { OverFlowText, Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
/**
* 安全指数top10
*/
class SafetyRate extends Component { class SafetyRate extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
this.querySafetyData();
}
querySafetyData = () => {
this.setState({
data: SafetyRateData
});
};
render() { render() {
let { data } = this.state;
return ( return (
<div className='safety-rate-view common-margin daily-title'> <div className="safety-rate-view common-margin daily-title">
{/* <div className='daily-title-content'> {/* <div className='daily-title-content'>
安全指数 TOP10 安全指数 TOP10
</div> */} </div> */}
<CommonCard title="安全指数 TOP10"> <CommonCard title="安全指数 TOP10">
<div className='top-ten-content' style={{ position: 'relative' }}> <div className="top-ten-content" style={{ position: 'relative' }}>
<div className="content-detail" <div className="content-detail" onClick={this.props.onClick}>
onClick={this.props.onClick}>...</div> ...
{ </div>
SafetyRateData.map((item,index)=> {data.map((item, index) => (
<div className='top-ten-item' key={index}> <div className="top-ten-item">
<OverFlowText> <OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p> <p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText> </OverFlowText>
<div className='top-ten-item-middle'> <div className="top-ten-item-middle">
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div> <div className="top-ten-item-middlelinear" style={{ height: 8, width: `${item.value}%` }}>
{' '}
</div> </div>
<div className ='top-ten-item-bottom'> </div>
<div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
) ))}
}
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { MapChart } from 'amos-viz/lib/echarts';
import { chainMapData, option123 } from './data';
import echarts from 'echarts/lib/echarts'; import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/china'; import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json'; import geoJson from 'echarts/map/json/china.json';
import { geoCoordMap, provienceData } from './geo'; import { geoCoordMap, provienceData,dmtData } from './../../../../_mock/rczsData/geo';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
export const dmtData = [
{ latitude: 30.67, longitude: 104.07 },
{ latitude: 34.76, longitude: 113.65 },
{ latitude: 29.65, longitude: 91.13 },
{ latitude: 43.82, longitude: 87.62 }
];
class Statistics extends Component { class Statistics extends Component {
constructor(props) { constructor(props) {
...@@ -26,45 +17,9 @@ class Statistics extends Component { ...@@ -26,45 +17,9 @@ class Statistics extends Component {
} }
initalECharts() { initalECharts() {
const data = [ const data = provienceData;
{ name: '黑龙江', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '吉林', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '辽宁', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '内蒙古', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '北京', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '天津', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '河北', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '山东', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '山西', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '江苏', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
{ name: '上海', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
{ name: '浙江', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
{ name: '福建', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '海南', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '台湾', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '香港', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '澳门', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '河南', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '安徽', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '江西', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '陕西', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '湖北', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '湖南', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '广西', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '宁夏', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '重庆', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '贵州', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '四川', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '云南', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '甘肃', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '青海', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '西藏', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' }
];
echarts.registerMap('china', geoJson); echarts.registerMap('china', geoJson);
debugger;
for (const item of provienceData) { for (const item of provienceData) {
if (item.area === '东北大区') { if (item.area === '东北大区') {
item.itemStyle = { item.itemStyle = {
......
This diff is collapsed.
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import GrowthStatistics from './GrowthStatistics'; import GrowthStatistics from './GrowthStatistics';
import RecentStatistics from './RecentStatistics'; import RecentStatistics from './RecentStatistics';
import RiskFailure from './RiskFailure'; import RiskFailure from './RiskFailure';
......
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