Skip to content

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

样式优化

parent 3dd53237
Show whitespace changes
Inline Side-by-side
Showing with 155 additions and 60 deletions
src/styles/view/biz/index.scss
View file @ df33df8f
......@@ -28,6 +28,11 @@
align-items: center;
margin-left: pxToRem(23px);
height: pxToRem(54.35px);
.amos-nav-item.amos-nav-item-active:hover {
background-color: transparent;
}
}
& > .amos-nav-horizontal > ul {
......
src/styles/view/biz/situation/situation.scss
View file @ df33df8f
......@@ -58,13 +58,13 @@
.class-Situation .daily-duties-left{
height: 100%;
.safety-rate-view{
background-image: url('../../assets/dailyDuties/leftTop.png');
// background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat;
width:pxToRem(412px);
height:pxToRem(469px);
}
.growth-statistics-view{
background-image: url('../../assets/dailyDuties/leftBottom.png');
// background-image: url('../../assets/dailyDuties/leftBottom.png');
background-repeat: no-repeat;
width:pxToRem(411px);
height:pxToRem(474px);
......@@ -115,7 +115,7 @@
justify-content: center;
}
.statistics-view{
background-image: url('../../assets/dailyDuties/middleTop.png');
// background-image: url('../../assets/dailyDuties/middleTop.png');
background-repeat: no-repeat;
width:pxToRem(999px);
height:pxToRem(615px);
......@@ -172,7 +172,7 @@
}
}
.risk-trend-view{
background-image: url('../../assets/dailyDuties/middleBottom.png');
// background-image: url('../../assets/dailyDuties/middleBottom.png');
background-repeat: no-repeat;
width:pxToRem(1002px);
height:pxToRem(325px);
......@@ -198,13 +198,13 @@
.class-Situation .daily-duties-right{
height: 100%;
.risk-failure-view{
background-image: url('../../assets/dailyDuties/leftTop.png');
// background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat;
width:pxToRem(412px);
height:pxToRem(469px);
}
.recent-statistics-view{
background-image: url('../../assets/dailyDuties/rightBottom.png');
// background-image: url('../../assets/dailyDuties/rightBottom.png');
background-repeat: no-repeat;
width:pxToRem(411px);
height:pxToRem(474px);
......
src/styles/view/disaster/index.scss
View file @ df33df8f
......@@ -24,6 +24,7 @@
.title {
height: 62px;
width: 100%;
border: 1px solid rgba(245,54,54,1);
background-color: linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
display: flex;
......@@ -33,7 +34,7 @@
position: relative;
.current {
width: 107px;
width: 28%;
height: 41px;
background: rgba(245,54,54,1);
box-shadow: 0px 0px 10px rgba(225,0,0,0.78);
......@@ -41,10 +42,9 @@
}
.current-name {
margin-left: 31px;
margin-left: 4%;
height: 41px;
line-height: 41px;
width: 164px;
text-align: left;
}
......@@ -78,14 +78,14 @@
}
}
.amos-tabs-tabitem {
width: 183px;
height: 31px;
width: 44%;
height: 100%;
.amos-tabs-tabitem-inner:hover {
background-color: transparent;
}
.amos-tabs-tabitem-inner {
height: 30px;
width: 181px;
height: 98%;
width: 100%;
background-image: url('../../../assets/images/title_bg.png');
background-size: cover;
......@@ -243,21 +243,21 @@
.dec {
padding-left: 16px;
text-align: left;
width: 253px;
height: 40px;
width: 65%;
height: 35px;
background: rgba(82,237,242,0.05);
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
line-height: 40px;
line-height: 35px;
}
.deco {
padding-left: 16px;
text-align: left;
width: 253px;
height: 40px;
width: 65%;
height: 35px;
background: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
line-height: 40px;
line-height: 35px;
}
}
}
......
src/styles/view/monitor/homePage.scss
View file @ df33df8f
......@@ -623,7 +623,7 @@
margin-top: 10%;
height: 29.9%;
width: 100%;
background-image: url('/src/assets/homePage/3120.png');
// background-image: url('/src/assets/homePage/3120.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
......@@ -651,6 +651,10 @@
width:9%;
float: right;
height:14%;
color: rgb(89, 240, 251);
line-height: 9%;
text-align: center;
font-size: 22px;
//border:1px solid rgba(23,186,252,1);
}
.AlarmControl_2_2{
......@@ -771,7 +775,7 @@
margin-top: 10%;
height: 29.9%;
width: 100%;
background-image: url('/src/assets/homePage/3120.png');
// background-image: url('/src/assets/homePage/3120.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
......@@ -799,6 +803,10 @@
width:9%;
float: right;
height:14%;
color: rgb(89, 240, 251);
line-height: 9%;
text-align: center;
font-size: 22px;
// border:1px solid rgba(23,186,252,1);
}
.DangerControl_2_2{
......@@ -926,7 +934,7 @@
.RiskControl {
height: 32.6%;
width: 100%;
background-image: url('/src/assets/homePage/3119.png');
// background-image: url('/src/assets/homePage/3119.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
......@@ -955,6 +963,10 @@
width:9%;
float: right;
height:18%;
color: rgb(89, 240, 251);
line-height: 9%;
text-align: center;
font-size: 22px;
//border:1px solid rgba(23,186,252,1);
}
.RiskControl_2_2{
......@@ -1122,7 +1134,7 @@
}
.all-safety-content {
background-image: url('/src/assets/homePage/ztxf.png');
// background-image: url('/src/assets/homePage/ztxf.png');
background-repeat: no-repeat !important;
height: 100%;
width: 100%;
......@@ -1247,11 +1259,14 @@
margin-top: 10%;
height: 34%;
width: 100%;
.common-card .card-content .card-contain .card-corner {
bottom: 12px !important;
}
.fire-safety-content {
background-image: url('/src/assets/homePage/xfsl.png');
// background-image: url('/src/assets/homePage/xfsl.png');
margin-top: 12px;
background-repeat: no-repeat !important;
height: 100%;
width: 100%;
......@@ -1374,7 +1389,9 @@
margin-top: 10%;
height: 34%;
width: 100%;
.common-card .card-content .card-contain .card-corner {
bottom: 11px !important;
}
.strength-safety-font {
height: 11%;
......@@ -1453,7 +1470,7 @@
}
.strength-safety-content {
background-image: url('/src/assets/homePage/xfsl.png');
// background-image: url('/src/assets/homePage/xfsl.png');
background-repeat: no-repeat !important;
height: 100%;
width: 100%;
......
src/view/biz/duty/situation/GrowthStatistics.js
View file @ df33df8f
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {growthData} from './data';
import CommonCard from '../../../common/commonCard/CommonCard';
class GrowthStatistics extends Component {
render() {
return (
<div className='growth-statistics-view common-margin'>
<div className='daily-title daily-title-content'>告警隐患周增幅统计</div>
{/* <div className='daily-title daily-title-content'>告警隐患周增幅统计</div> */}
<CommonCard title="告警隐患周增幅统计">
<div className='growth-content'>
<div style={{position:"initial",width:28,height:28,marginTop:-28,marginLeft:358}}
onClick={this.props.onWarnClick}></div>
......@@ -25,6 +28,7 @@ class GrowthStatistics extends Component {
)
}
</div>
</CommonCard>
</div>
);
}
......
src/view/biz/duty/situation/RecentStatistics.js
View file @ df33df8f
......@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts';
import {recentData1,recentData2} from './data';
import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard';
const ButtonGroup = Button.Group;
class RecentStatistics extends Component {
constructor(props) {
......@@ -28,7 +30,8 @@ class RecentStatistics extends Component {
const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
return (
<div className='recent-statistics-view common-margin'>
<div className='daily-title daily-title-content'>最近 7 日风险统计</div>
{/* <div className='daily-title daily-title-content'>最近 7 日风险统计</div> */}
<CommonCard title="最近 7 日风险统计">
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}>
<Button size='sm' children={<span>告警</span>} className='button-style' value="1" style={(value == '1')?select:noselect} />
<Button size='sm' children={<span>隐患</span>} className='button-style' value="2" style={(value == '2')?select:noselect}/>
......@@ -38,6 +41,7 @@ class RecentStatistics extends Component {
onClick={this.props.onStatisticClick}></div>
<ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} />
</div>
</CommonCard>
</div>
);
}
......
src/view/biz/duty/situation/RiskFailure.js
View file @ df33df8f
......@@ -2,11 +2,15 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {riskFailureData} from './data'
import { OverFlowText } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard';
class RiskFailure extends Component {
render() {
return (
<div className='risk-failure-view common-margin daily-title'>
<div className='daily-title daily-title-content'>安全风险失效 TOP10</div>
{/* <div className='daily-title daily-title-content'>安全风险失效 TOP10</div> */}
<CommonCard title="安全风险失效 TOP10">
<div className='top-ten-content'>
<div style={{position:"initial",width:28,height:28,marginTop:-35,marginLeft:352}}
onClick={this.props.onRiskClick}></div>
......@@ -26,6 +30,7 @@ class RiskFailure extends Component {
)
}
</div>
</CommonCard>
</div>
);
}
......
src/view/biz/duty/situation/RiskTrend.js
View file @ df33df8f
......@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts';
import {riskTrendData} from './data'
import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard';
const ButtonGroup = Button.Group;
class RiskTrend extends Component {
constructor(props) {
......@@ -21,7 +23,8 @@ class RiskTrend extends Component {
const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
return (
<div className='risk-trend-view common-margin'>
<div className='daily-title daily-title-content'>安全风险总体趋势</div>
{/* <div className='daily-title daily-title-content'>安全风险总体趋势</div> */}
<CommonCard title="安全风险总体趋势">
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}>
<Button size='sm' children={<span>总数</span>} className='button-style' value="1" style={(value == '1')?select:noselect} />
<Button size='sm' children={<span>换流站</span>} className='button-style' value="2" style={(value == '2')?select:noselect}/>
......@@ -29,8 +32,9 @@ 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: '280px', width: '1100px',left:'-60px'}} />
<ReactEcharts option={riskTrendData} style={{ height: '100%', width: '100%'}} />
</div>
</CommonCard>
</div>
);
}
......
src/view/biz/duty/situation/SafetyRate.js
View file @ df33df8f
......@@ -2,14 +2,17 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {SafetyRateData} from './data';
import { OverFlowText, Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard';
class SafetyRate extends Component {
render() {
return (
<div className='safety-rate-view common-margin daily-title'>
<div className='daily-title-content'>
{/* <div className='daily-title-content'>
安全指数 TOP10
</div>
</div> */}
<CommonCard title="安全指数 TOP10">
<div className='top-ten-content' style={{position:"initial"}}>
<div style={{position:"initial",width:28,height:28,marginTop:-36,marginLeft:352}}
onClick={this.props.onClick}></div>
......@@ -29,6 +32,7 @@ class SafetyRate extends Component {
)
}
</div>
</CommonCard>
</div>
);
}
......
src/view/biz/duty/situation/Statistics.js
View file @ df33df8f
......@@ -6,6 +6,7 @@ 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 CommonCard from '../../../common/commonCard/CommonCard';
export const dmtData = [
{ 'latitude': 30.67, 'longitude': 104.07 },
......@@ -341,7 +342,8 @@ class Statistics extends Component {
render() {
return (
<div className='statistics-view common-margin'>
<div className='statistics-title statistics-title-content'>全国</div>
{/* <div className='statistics-title statistics-title-content'>全国</div> */}
<CommonCard title="全国" position="center">
<div className='statistics-banner'>
<div className='statistics-banner-content'>
<div className='statistics-banner-item'>
......@@ -378,6 +380,7 @@ class Statistics extends Component {
</div>
{/* <MapChart option={option123} style={{ height: '100%', width: '100%' }} /> */}
<div id="mainMap" style={{ width: '100%', height: '86%' }}></div>
</CommonCard>
</div>
);
}
......
src/view/common/commonCard/CommonCard.js
View file @ df33df8f
......@@ -13,13 +13,20 @@ class CommonCard extends Component {
const { title, children, position } = this.props;
return (
<div className="common-card">
<div className={`card-title ${position === 'center' ? 'center-title' : null}`} >
<div className={`card-title ${position === 'center' ? 'center-title' : ''}`} >
<div className="title-contain">
<div className="title-bg">{title}</div>
<div className="title-bg">
<div className="title-shape">
<div className="title-text">{title}</div>
</div>
</div>
</div>
</div>
<div className="card-content">
<div className="card-contain">
{children}
<div className="card-corner" />
</div>
</div>
</div>
);
......
src/view/common/commonCard/index.scss
View file @ df33df8f
.common-card {
width: 20vw;
height: 40vh;
font-size: 20px;
width: 95%;
height: 95%;
.card-title {
display: flex;
......@@ -9,9 +8,9 @@
.title-contain {
background: rgba(0,0,0,0.57);
width: 188px;
text-align: center;
.title-bg {
margin: 0 auto;
background-image: url('./images/title_bg.png');
background-size: cover;
height: 31px;
......@@ -21,20 +20,46 @@
text-shadow: 0px 0px 4px rgba(9,35,61,1);
cursor: pointer;
border: 1px solid rgba(95,255,253,1);
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgb(0,0,0);
.title-shape {
background-color: transparent;
border-right: 1px solid rgba(95,255,253,1);
border-top: 1px solid rgba(95,255,253,1);
transform: skewX(5deg);
height: 31px;
.title-text {
transform: skewX(-5deg);
font-size: 18px;
}
}
}
}
}
.card-content {
margin-top: -1px;
height: 35vh;
height: 100%;
border: 1px solid rgba(95,255,253,1);
background: linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
}
.card-contain {
position: relative;
height: 100%;
.card-corner {
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 12px;
border-right: 2px solid rgba(0,255,229,1);
border-bottom: 2px solid rgba(0,255,229,1);
}
}
}
}
.center-title {
......
src/view/monitor/statistical/AlarmControl.js
View file @ df33df8f
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import CommonCard from '../../common/commonCard/CommonCard';
/**
* 告警管控
......@@ -123,11 +124,12 @@ if(dates){
return (
<div className="AlarmControl">
<div className="AlarmControl_1">
{/* <div className="AlarmControl_1">
<div className="AlarmControl_1_1"><span>告警管控情况</span></div>
</div>
</div> */}
<CommonCard title="告警管控情况">
<div className="AlarmControl_2">
<div className="AlarmControl_2_1" onClick={this.ondetails}> </div>
<div className="AlarmControl_2_1" onClick={this.ondetails}>...</div>
<div className="AlarmControl_2_2">
<div className="AlarmControl_2_2_1">
......@@ -166,6 +168,7 @@ if(dates){
</div>
</div>
</div>
</CommonCard>
</div>
);
}
......
src/view/monitor/statistical/AllSafety.js
View file @ df33df8f
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import echarts from 'echarts/lib/echarts';
import CommonCard from '../../common/commonCard/CommonCard';
//import { AllSafetyAction } from './../../../services/centerLevelService';
......@@ -139,7 +140,8 @@ class AllSafety extends Component {
<div className="all-safety-content">
<div className="all-safety-font">总体消防安全情况</div>
{/* <div className="all-safety-font">总体消防安全情况</div> */}
<CommonCard title="总体消防安全情况">
<div className="content-detail">
<div className="all-safety-left">
<ReactEcharts option={this.getOptionsx()} className="div-echars" />
......@@ -160,7 +162,7 @@ class AllSafety extends Component {
</div>
</div>
</CommonCard>
</div>
......
src/view/monitor/statistical/DangerControl.js
View file @ df33df8f
import React, { Component } from 'react';
import imgStatic from './../../../consts/imgStatic';
import CommonCard from '../../common/commonCard/CommonCard';
import ReactEcharts from 'amos-viz/lib/echarts';
const centerLevelIcon = imgStatic.centerLevelIcon;
......@@ -124,11 +124,12 @@ export default class DangerControl extends Component {
const { yq,sw,zl,jd} = this.state;
return (
<div className='DangerControl'>
<div className="DangerControl_1">
{/* <div className="DangerControl_1">
<div className="DangerControl_1_1"><span>隐患管控情况</span></div>
</div>
</div> */}
<CommonCard title="隐患管控情况">
<div className="DangerControl_2">
<div className="DangerControl_2_1" onClick={this.ondetails}></div>
<div className="DangerControl_2_1" onClick={this.ondetails}>...</div>
<div className="DangerControl_2_2">
<div className="DangerControl_2_2_1">
<div className="AlarmControl8">
......@@ -172,7 +173,7 @@ export default class DangerControl extends Component {
</div>
</div>
</div>
</CommonCard>
</div>
);
}
......
src/view/monitor/statistical/FireSafety.js
View file @ df33df8f
import React, { Component } from 'react';
import { sessionConsts } from './../../../consts/storageConsts';
import { browerSupport, consts, Store, LocationParam } from 'amos-tool';
import CommonCard from '../../common/commonCard/CommonCard';
const lsTool = Store.lsTool;
......@@ -56,8 +58,10 @@ class FireSafety extends Component {
return (
<div className="FireSafety">
<CommonCard title="消防安全管理(累计)">
<div className="fire-safety-content">
<div className="fire-safety-font">消防安全管理(累计)</div>
{/* <div className="fire-safety-font">消防安全管理(累计)</div> */}
<div className="fire-safety-tongji" >
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
......@@ -112,7 +116,7 @@ class FireSafety extends Component {
{/**分割线 */}
</div>
</CommonCard>
</div>
);
}
......
src/view/monitor/statistical/FireStrength.js
View file @ df33df8f
......@@ -3,6 +3,8 @@ import { Modal } from 'amos-framework';
import FireStrengthDetail from'./../firestrength/FireStrengthDetail';
import { sessionConsts } from './../../../consts/storageConsts';
import {Store, } from 'amos-tool';
import CommonCard from '../../common/commonCard/CommonCard';
const lsTool = Store.lsTool;
/**
* 消防实力统计
......@@ -40,8 +42,9 @@ class FireStrength extends Component {
return (
<div className="FireStrength">
{/* <FireStrengthDetail /> */}
<CommonCard title="消防实力情况(累计)">
<div className="strength-safety-content">
<div className="strength-safety-font">消防实力情况(累计) </div>
{/* <div className="strength-safety-font">消防实力情况(累计) </div> */}
{/* <div className="item" style={{marginTop:"0%"}} onClick={this.onClick} >
......@@ -112,6 +115,7 @@ class FireStrength extends Component {
</div>
</div>
</CommonCard>
<Modal
width={1000}
height={1000}
......
src/view/monitor/statistical/RiskControl.js
View file @ df33df8f
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import CommonCard from '../../common/commonCard/CommonCard';
/**
* 风险管控
......@@ -137,11 +138,12 @@ export default class RiskControl extends Component {
const { shikong,shoukong,shikongx,shoukongx,yiji,erji,sanji,siji} = this.state;
return (
<div className="RiskControl">
<div className="RiskControl_1">
{/* <div className="RiskControl_1">
<div className="RiskControl_1_1"><span>风险管控情况</span></div>
</div>
</div> */}
<CommonCard title="风险管控情况">
<div className="RiskControl_2">
<div className="RiskControl_2_1" onClick={this.ondetails}></div>
<div className="RiskControl_2_1" onClick={this.ondetails}>...</div>
<div className="RiskControl_2_2">
<div className="RiskControl_2_2_1">
......@@ -194,6 +196,7 @@ export default class RiskControl extends Component {
<div className="RiskControl_3_1_5"></div>
</div>
</div>
</CommonCard>
</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