Skip to content

S
station-elec-manage-view
Commit da793909 authored by 王海涛's avatar 王海涛
Browse files
Options

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

parents e77ed618 27f20218
Expand all Show whitespace changes
Inline Side-by-side
Showing with 231 additions and 204 deletions
src/view/biz/duty/situation/data.js → src/_mock/rczsData/data.js
View file @ da793909
......@@ -41,23 +41,7 @@ export const riskTrendData = {
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: {
type: 'category',
boundaryGap: false,
......
src/view/biz/duty/situation/geo.js → src/_mock/rczsData/geo.js
View file @ da793909
......@@ -271,4 +271,14 @@ const geoCoordMap = {
大庆: [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 };
src/styles/view/biz/situation/situation.scss
View file @ da793909
.daily-duties-content{
position:absolute;
left:0;
top:pxToRem(68px);
right:0;
bottom:0; //left,top,right,bottom都为0，充满真个页面
overflow-y:auto;
overflow-x:hidden; //设置Y轴出现滚动条，X轴隐藏
@function vw($px) {
@return ($px/ 1920) * 100vw;
}
@function vh($px) {
@return ($px/ 1080) * 100vh;
}
.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;
flex-direction: row;
justify-content: center;
......@@ -17,232 +26,281 @@
color: rgb(89, 240, 251);
line-height: 60%;
text-align: center;
font-size: 22px;
width: 28px;
height: 28px;
background: linear-gradient(180deg,rgba(95,255,253,0.6) 0%,rgba(95,255,253,0.1) 100%);
font-size: pxToRem(22px);
width: vw(28);
height: vh(28);
background: linear-gradient(180deg, rgba(95, 255, 253, 0.6) 0%, rgba(95, 255, 253, 0.1) 100%);
cursor: pointer;
}
.common-margin{
margin-top: pxToRem(29px);
.common-margin {
margin-top: vh(29);
}
.daily-title{
font-size:pxToRem(20px);
.daily-title {
font-size: pxToRem(20px);
color: #ffffff;
}
.daily-title-content{
width:pxToRem(257px);
.daily-title-content {
width: vw(257);
display: flex;
flex-direction: row;
justify-content: center;
}
.top-ten-content{
padding:pxToRem(30px) pxToRem(30px);
.top-ten-content {
padding: vh(30) vw(30);
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
.top-ten-item{
.top-ten-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.top-ten-item-middle{
width:pxToRem(208px);
height: pxToRem(16px);
.top-ten-item-middle {
width: vw(208);
height: vh(16);
display: flex;
flex-direction: column;
justify-content: center;
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;
flex-direction:row;
flex-direction: row;
justify-content: flex-end;
}
}
}
}
.class-Situation .daily-duties-left{
.class-Situation .daily-duties-left {
height: 100%;
.safety-rate-view{
position: relative;
left: 1%;
.safety-rate-view {
// background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat;
width:pxToRem(412px);
height:pxToRem(390px);
width: vw(412);
height: vh(450);
}
.growth-statistics-view{
.growth-statistics-view {
// background-image: url('../../assets/dailyDuties/leftBottom.png');
background-repeat: no-repeat;
width:pxToRem(411px);
height:pxToRem(444px);
.growth-content{
padding:pxToRem(30px) pxToRem(24px);
width: vw(411);
height: vh(450);
margin-top: vh(47);
.growth-content {
padding: vh(30) vw(24);
height: 100%;
.growth-item-header{
.growth-item-header {
font-size: pxToRem(20px);
color: #52EDF2;
}
.growth-item-text{
.growth-item-text {
font-size: pxToRem(20px);
color: #ffffff;
}
.growth-item-datatext{
.growth-item-datatext {
font-size: pxToRem(20px);
color: #00CACE;
}
.growth-item{
.growth-item {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height:pxToRem(42px);
width: pxToRem(362px);
background-color:#1C6264 ;
margin-top:pxToRem(5px);
height: vh(42);
width: vw(340);
background-color: #1C6264;
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%;
margin-left: pxToRem(19px);
margin-right: pxToRem(19px);
.statistics-title{
margin-left: vw(25);
margin-right: vw(-18);
.statistics-title {
font-size: pxToRem(32px);
color: #00EEE8;
}
.statistics-title-content{
width:100%;
.statistics-title-content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.statistics-view{
.statistics-view {
// background-image: url('../../assets/dailyDuties/middleTop.png');
background-repeat: no-repeat;
width:pxToRem(999px);
height:pxToRem(533px);
width: vw(999);
height: vh(600);
position: relative;
.statistics-banner{
.statistics-banner {
position: absolute;
left:pxToRem(95px);
right: pxToRem(95px);
left: vw(95);
right: vw(95);
top: 3%;
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 2;
.statistics-banner-content{
height: pxToRem(100px);
width:pxToRem(380px);
background-color:rgba(28, 98, 100, 0.5) ;
.statistics-banner-content {
height: vh(100);
width: vw(380);
background-color: rgba(28, 98, 100, 0.5);
border-radius: pxToRem(5px);
.statistics-banner-item{
height: pxToRem(100px);
margin-left: pxToRem(32px);
margin-right: pxToRem(32px);
.statistics-banner-item {
height: vh(100);
margin-left: vw(32);
margin-right: vw(32);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.statistics-banner-itemblock{
.statistics-banner-itemblock {
text-align: center;
.statistics-text-number{
.statistics-text-number {
font-weight: bold;
font-size: pxToRem(35px);
color:#00EEE8 ;
letter-spacing:pxToRem(5px);
height: pxToRem(44px);
color: #00EEE8;
letter-spacing: pxToRem(5px);
height: vh(44);
display: flex;
flex-direction:row;
flex-direction: row;
justify-content: flex-start;
}
span{
span {
font-weight: bold;
font-size: pxToRem(20px);
color:#FF0000 ;
letter-spacing:pxToRem(5px);
padding-top: pxToRem(9px);
color: #FF0000;
letter-spacing: pxToRem(5px);
padding-top: vh(9);
}
p{
p {
font-size: pxToRem(14px);
color:#FFF ;
color: #FFF;
}
}
}
}
}
}
.risk-trend-view{
.risk-trend-view {
// background-image: url('../../assets/dailyDuties/middleBottom.png');
background-repeat: no-repeat;
width:pxToRem(1002px);
height:pxToRem(289px);
width: vw(1002);
height: vh(307);
position: relative;
.buttongroup-style{
.buttongroup-style {
position: absolute;
right:pxToRem(50px);
top:pxToRem(56px);
z-index:2 ;
.button-style{
right: vw(50);
top: 14%;
z-index: 2;
.button-style {
border-width: pxToRem(1px);
border-color: #45FEFE;
width:pxToRem(80px);
width: vw(80);
}
}
.risk-trend-content{
padding:pxToRem(20px);
width:100%;
.risk-trend-content {
padding: pxToRem(20px);
width: 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%;
.risk-failure-view{
// background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat;
width:pxToRem(412px);
height:pxToRem(390px);
.risk-failure-view {
width: vw(450);
height: vh(450);
position: relative;
top: vh(15);
}
.recent-statistics-view{
.recent-statistics-view {
// background-image: url('../../assets/dailyDuties/rightBottom.png');
background-repeat: no-repeat;
width:pxToRem(411px);
height:pxToRem(444px);
width: vw(450);
height: vh(440);
position: relative;
.buttongroup-style{
top:vh(24);
.buttongroup-style {
position: absolute;
right:pxToRem(50px);
top:pxToRem(56px);
z-index:2 ;
.button-style{
border-width: pxToRem(1px);
right: vw(20);
top: 11%;
z-index: 2;
.button-style {
border-width: vw(1);
border-color: #45FEFE;
width:pxToRem(80px)
width: vw(80)
}
}
.recent-statistics-content{
padding:pxToRem(20px);
width:100%;
.recent-statistics-content {
padding: pxToRem(20px);
width: 100%;
height: 100%;
.div-echars-style {
height: vh(430) !important;
width: 100% !important;
background-position: vw(60) vh(14) !important;
}
}
}
}
src/styles/view/monitor/homePage.scss
View file @ da793909
......@@ -433,6 +433,7 @@
text-stroke: 1 rgba(0, 0, 0, 0);
border-radius: 17px;
width: 102%;
margin-bottom: vh(7);
}
.ant-calendar-picker-icon:after {
......@@ -442,7 +443,7 @@
background-size: 100% 100%;
width: vw(18);
height: vh(20);
bottom: vh(0);
bottom: vh(1);
right: vw(-2);
content: '' !important;
}
......@@ -585,7 +586,7 @@
.risk-model-model99 {
.amos-modal-container {
background: rgba(14, 127, 180, 0.29);
height: 70%;
// height: 70%;
}
.amos-modal-content {
......@@ -1185,7 +1186,7 @@
margin-left: vw(17);
height: vh(260) !important;
width: 82% !important;
background-position: 60px vh(14) !important;
background-position: vw(60) vh(14) !important;
}
.jiantou {
......
src/view/biz/duty/situation/GrowthStatistics.js
View file @ da793909
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { growthData } from './data';
import { growthData } from './../../../../_mock/rczsData/data';
import CommonCard from '../../../common/commonCard/CommonCard';
class GrowthStatistics extends Component {
......
src/view/biz/duty/situation/RecentStatistics.js
View file @ da793909
import React, { Component } from 'react';
import PropTypes from 'prop-types';
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 CommonCard from '../../../common/commonCard/CommonCard';
......@@ -36,7 +36,7 @@ class RecentStatistics extends Component {
</ButtonGroup>
<div className="recent-statistics-content" style={{position: 'relative'}}>
<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>
</CommonCard>
</div>
......
src/view/biz/duty/situation/RiskFailure.js
View file @ da793909
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { riskFailureData } from './data';
import { riskFailureData } from './../../../../_mock/rczsData/data';
import { OverFlowText } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard';
......
src/view/biz/duty/situation/RiskTrend.js
View file @ da793909
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts';
import { riskTrendData } from './data';
import { riskTrendData } from './../../../../_mock/rczsData/data';
import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard';
......@@ -32,7 +31,7 @@ class RiskTrend extends Component {
<Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} />
</ButtonGroup>
<div className="risk-trend-content">
<ReactEcharts option={riskTrendData} style={{ height: '100%', width: '100%' }} />
<ReactEcharts option={riskTrendData} className="div-echars" />
</div>
</CommonCard>
</div>
......
src/view/biz/duty/situation/SafetyRate.js
View file @ da793909
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SafetyRateData } from './data';
import { OverFlowText, Button } from 'amos-framework';
import { SafetyRateData } from './../../../../_mock/rczsData/data';
import { OverFlowText } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard';
/**
* 安全指数top10
*/
class SafetyRate extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
this.querySafetyData();
}
querySafetyData = () => {
this.setState({
data: SafetyRateData
});
};
render() {
let { data } = this.state;
return (
<div className='safety-rate-view common-margin daily-title'>
{/* <div className='daily-title-content'>
<div className="safety-rate-view common-margin daily-title">
{/* <div className='daily-title-content'>
安全指数 TOP10
</div> */}
<CommonCard title="安全指数 TOP10">
<div className='top-ten-content' style={{ position: 'relative' }}>
<div className="content-detail"
onClick={this.props.onClick}>...</div>
{
SafetyRateData.map((item,index)=>
<div className='top-ten-item' key={index}>
<div className="top-ten-content" style={{ position: 'relative' }}>
<div className="content-detail" onClick={this.props.onClick}>
...
</div>
{data.map((item, index) => (
<div className="top-ten-item">
<OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText>
<div className='top-ten-item-middle'>
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div>
<div className="top-ten-item-middle">
<div className="top-ten-item-middlelinear" style={{ height: 8, width: `${item.value}%` }}>
{' '}
</div>
<div className ='top-ten-item-bottom'>
</div>
<div className="top-ten-item-bottom">
<span>{item.value}</span>
</div>
</div>
)
}
))}
</div>
</CommonCard>
</div>
......
src/view/biz/duty/situation/Statistics.js
View file @ da793909
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/map/js/china';
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';
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 {
constructor(props) {
......@@ -26,45 +17,9 @@ class Statistics extends Component {
}
initalECharts() {
const data = [
{ 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' }
];
const data = provienceData;
echarts.registerMap('china', geoJson);
debugger;
for (const item of provienceData) {
if (item.area === '东北大区') {
item.itemStyle = {
......
src/view/biz/duty/situation/china.js deleted 100644 → 0
View file @ e77ed618
This diff is collapsed.
src/view/biz/duty/situation/index.js
View file @ da793909
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import GrowthStatistics from './GrowthStatistics';
import RecentStatistics from './RecentStatistics';
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