Skip to content

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

首页及日常值守样式优化

parent 4d1ac2ff
Expand all Show whitespace changes
Inline Side-by-side
Showing with 224 additions and 32 deletions
_mock/apps.js
View file @ b51f9267
...@@ -42,4 +42,175 @@ export const recommends = () => { ...@@ -42,4 +42,175 @@ export const recommends = () => {
}); });
}; };
const disasterData = () => {
return Mock.mock({
'disasterInfo': {
'time': '2020-4-9 10:30:34',
'area': '极1高端换流阀厅',
'part': '#3联络变',
'people': '16人',
'car': '3辆',
'emergency': '有'
}
});
};
const deviceData = () => {
return Mock.mock({
'deviceInfo': [
{
'title': '#3联络变', 'status': '已停止'
},
{
'title': '#1泡沫炮', 'status': '未启动'
},
{
'title': '#2泡沫炮', 'status': '已启动'
}
]
});
};
const contactData = () => {
return Mock.mock({
'contactInfo': [
{
'position': '值班长',
'name': '王丽泽熙',
'phone': '18300021232'
},
{
'position': '值班副长',
'name': '王丽泽熙',
'phone': '18300022345'
},
{
'position': '值班副长',
'name': '王丽泽熙',
'phone': '18300023215'
}
]
});
};
const detailData = () => {
return Mock.mock({
'detailInfo': [
{ 'name': '3#泡沫炮', 'value': '13L/s', 'id': 1 },
{ 'name': '1#消防水池', 'value': '1300mm', 'id': 2 },
{ 'name': '2#消防水池', 'value': '1300mm', 'id': 3 },
{ 'name': '红外火焰探测器', 'value': '50辆', 'id': 4 },
{ 'name': '消防器材', 'value': '20000件', 'id': 5 },
{ 'name': '红外火焰探测器', 'value': '50辆', 'id': 6 }
]
});
};
const recordData = () => {
return Mock.mock({
'disasterRecord': [
{ name: '伊克昭换流站换流变火灾', date: '2020-1-1', id: 1 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-2', id: 2 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-3', id: 3 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-4', id: 4 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-5', id: 5 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-6', id: 6 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-7', id: 7 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-8', id: 8 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-9', id: 9 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-10', id: 10 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-11', id: 11 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-12', id: 12 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-13', id: 13 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-14', id: 14 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-15', id: 15 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-16', id: 16 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-17', id: 117 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-18', id: 18 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-19', id: 19 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-20', id: 20 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-21', id: 21 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-22', id: 22 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-23', id: 23 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-24', id: 24 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-25', id: 25 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-26', id: 26 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-27', id: 27 },
{ name: '伊克昭换流站换流变火灾', date: '2020-1-28', id: 28 }
]
});
};
const planData = () => {
return Mock.mock({
'planData': [
{
title: '伊克昭换流站',
key: '1',
children: [
{ title: '应急预案-1', key: '1-1' },
{ title: '应急预案-2', key: '1-2' },
{ title: '应急预案-3', key: '1-3' },
{ title: '应急预案-4', key: '1-4' },
{ title: '应急预案-5', key: '1-5' },
{ title: '应急预案-6', key: '1-6' },
{ title: '应急预案-7', key: '1-7' },
{ title: '应急预案-8', key: '1-8' }
]
},
{
title: '复龙换流站',
key: '2',
children: [
{ title: '应急预案-1', key: '2-1' },
{ title: '应急预案-2', key: '2-2' },
{ title: '应急预案-3', key: '2-3' },
{ title: '应急预案-4', key: '2-4' },
{ title: '应急预案-5', key: '2-5' },
{ title: '应急预案-6', key: '2-6' },
{ title: '应急预案-7', key: '2-7' },
{ title: '应急预案-8', key: '2-8' }
]
},
{
title: '奉贤换流站',
key: '3',
children: [
{ title: '应急预案-1', key: '3-1' },
{ title: '应急预案-2', key: '3-2' },
{ title: '应急预案-3', key: '3-3' },
{ title: '应急预案-4', key: '3-4' },
{ title: '应急预案-5', key: '3-5' },
{ title: '应急预案-6', key: '3-6' },
{ title: '应急预案-7', key: '3-7' },
{ title: '应急预案-8', key: '3-8' }
]
},
{
title: '锦屏换流站',
key: '4',
children: [
{ title: '应急预案-1', key: '4-1' },
{ title: '应急预案-2', key: '4-2' },
{ title: '应急预案-3', key: '4-3' },
{ title: '应急预案-4', key: '4-4' },
{ title: '应急预案-5', key: '4-5' },
{ title: '应急预案-6', key: '4-6' },
{ title: '应急预案-7', key: '4-7' },
{ title: '应急预案-8', key: '4-8' }
]
},
]
});
};
// 输出结果 // 输出结果
module.exports = {
disasterData,
deviceData,
contactData,
detailData,
recordData,
planData
};
src/styles/view/biz/situation/situation.scss
View file @ b51f9267
...@@ -9,8 +9,23 @@ ...@@ -9,8 +9,23 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
.content-detail {
position: absolute;
top: 0;
right: 0;
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%);
cursor: pointer;
}
.common-margin{ .common-margin{
margin-top: pxToRem(19px); margin-top: pxToRem(29px);
} }
.daily-title{ .daily-title{
font-size:pxToRem(20px); font-size:pxToRem(20px);
...@@ -29,6 +44,7 @@ ...@@ -29,6 +44,7 @@
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;
...@@ -61,16 +77,17 @@ ...@@ -61,16 +77,17 @@
// 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:pxToRem(412px);
height:pxToRem(469px); height:pxToRem(390px);
} }
.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:pxToRem(411px);
height:pxToRem(474px); height:pxToRem(444px);
.growth-content{ .growth-content{
padding:pxToRem(30px) pxToRem(24px); padding:pxToRem(30px) pxToRem(24px);
height: 100%; height: 100%;
.growth-item-header{ .growth-item-header{
font-size: pxToRem(20px); font-size: pxToRem(20px);
color: #52EDF2; color: #52EDF2;
...@@ -118,13 +135,14 @@ ...@@ -118,13 +135,14 @@
// 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:pxToRem(999px);
height:pxToRem(615px); height:pxToRem(533px);
position: relative; position: relative;
.statistics-banner{ .statistics-banner{
position: absolute; position: absolute;
left:pxToRem(95px); left:pxToRem(95px);
right: pxToRem(95px); right: pxToRem(95px);
top:pxToRem(68px); top: 3%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
...@@ -175,7 +193,7 @@ ...@@ -175,7 +193,7 @@
// 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:pxToRem(1002px);
height:pxToRem(325px); height:pxToRem(289px);
position: relative; position: relative;
.buttongroup-style{ .buttongroup-style{
position: absolute; position: absolute;
...@@ -201,13 +219,13 @@ ...@@ -201,13 +219,13 @@
// 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:pxToRem(412px);
height:pxToRem(469px); height:pxToRem(390px);
} }
.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:pxToRem(411px);
height:pxToRem(474px); height:pxToRem(444px);
position: relative; position: relative;
.buttongroup-style{ .buttongroup-style{
position: absolute; position: absolute;
......
src/styles/view/disaster/index.scss
View file @ b51f9267
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 9px 0 12px; padding: 0 9px 0 12px;
font-size: 20px; font-size: 0.2rem;
position: relative; position: relative;
.current { .current {
...@@ -78,14 +78,14 @@ ...@@ -78,14 +78,14 @@
} }
} }
.amos-tabs-tabitem { .amos-tabs-tabitem {
width: 44%; width: 183px;
height: 100%; height: 31px;
.amos-tabs-tabitem-inner:hover { .amos-tabs-tabitem-inner:hover {
background-color: transparent; background-color: transparent;
} }
.amos-tabs-tabitem-inner { .amos-tabs-tabitem-inner {
height: 98%; height: 30px;
width: 100%; width: 181px;
background-image: url('../../../assets/images/title_bg.png'); background-image: url('../../../assets/images/title_bg.png');
background-size: cover; background-size: cover;
......
src/styles/view/monitor/homePage.scss
View file @ b51f9267
This diff is collapsed.
src/view/biz/duty/situation/GrowthStatistics.js
View file @ b51f9267
...@@ -9,8 +9,8 @@ class GrowthStatistics extends Component { ...@@ -9,8 +9,8 @@ class GrowthStatistics extends Component {
<div className="growth-statistics-view common-margin"> <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="告警隐患周增幅统计"> <CommonCard title="告警隐患周增幅统计">
<div className="growth-content"> <div className="growth-content" style={{ position: 'relative' }}>
<div style={{ position: 'initial', width: 28, height: 28, marginTop: -28, marginLeft: 358 }} onClick={this.props.onWarnClick}></div> <div className="content-detail" onClick={this.props.onWarnClick}>...</div>
<div className="growth-item growth-item-header"> <div className="growth-item growth-item-header">
<div>日期</div> <div>日期</div>
<div>告警/隐患</div> <div>告警/隐患</div>
......
src/view/biz/duty/situation/RecentStatistics.js
View file @ b51f9267
...@@ -34,8 +34,8 @@ class RecentStatistics extends Component { ...@@ -34,8 +34,8 @@ class RecentStatistics extends Component {
<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="1" style={value == '1' ? select : noselect} />
<Button size="sm" children={<span>隐患</span>} className="button-style" value="2" style={value == '2' ? select : noselect} /> <Button size="sm" children={<span>隐患</span>} className="button-style" value="2" style={value == '2' ? select : noselect} />
</ButtonGroup> </ButtonGroup>
<div className="recent-statistics-content"> <div className="recent-statistics-content" style={{position: 'relative'}}>
<div style={{ position: 'initial', width: 28, height: 28, marginTop: -19, marginLeft: 362 }} 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} style={{ height: '100%', width: '100%' }} />
</div> </div>
</CommonCard> </CommonCard>
......
src/view/biz/duty/situation/RiskFailure.js
View file @ b51f9267
...@@ -10,8 +10,8 @@ class RiskFailure extends Component { ...@@ -10,8 +10,8 @@ class RiskFailure extends Component {
<div className="risk-failure-view common-margin daily-title"> <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"> <CommonCard title="安全风险失效 TOP10">
<div className="top-ten-content"> <div className="top-ten-content" style={{ position: 'relative' }}>
<div style={{ position: 'initial', width: 28, height: 28, marginTop: -35, marginLeft: 352 }} onClick={this.props.onRiskClick}></div> <div className="content-detail" onClick={this.props.onRiskClick}>...</div>
{riskFailureData.map((item, index) => ( {riskFailureData.map((item, index) => (
<div className="top-ten-item" key={index}> <div className="top-ten-item" key={index}>
<OverFlowText> <OverFlowText>
......
src/view/biz/duty/situation/SafetyRate.js
View file @ b51f9267
...@@ -7,28 +7,29 @@ import CommonCard from '../../../common/commonCard/CommonCard'; ...@@ -7,28 +7,29 @@ import CommonCard from '../../../common/commonCard/CommonCard';
class SafetyRate extends Component { class SafetyRate extends Component {
render() { render() {
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: 'initial' }}> <div className='top-ten-content' style={{ position: 'relative' }}>
<div style={{ position: 'initial', width: 28, height: 28, marginTop: -36, marginLeft: 352 }} onClick={this.props.onClick}></div> <div className="content-detail"
{SafetyRateData.map((item, index) => ( onClick={this.props.onClick}>...</div>
<div className="top-ten-item" key={index}> {
SafetyRateData.map((item,index)=>
<div className='top-ten-item' key={index}>
<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 className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div>
{' '}
</div> </div>
</div> <div className ='top-ten-item-bottom'>
<div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
))} )
}
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
src/view/biz/duty/situation/Statistics.js
View file @ b51f9267
...@@ -388,7 +388,7 @@ class Statistics extends Component { ...@@ -388,7 +388,7 @@ class Statistics extends Component {
</div> </div>
</div> </div>
{/* <MapChart option={option123} style={{ height: '100%', width: '100%' }} /> */} {/* <MapChart option={option123} style={{ height: '100%', width: '100%' }} /> */}
<div id="mainMap" style={{ width: '100%', height: '86%' }}></div> <div id="mainMap" style={{ width: '90%', height: '86%', margin: '0 auto', paddingTop: '3%' }}></div>
</CommonCard> </CommonCard>
</div> </div>
); );
......
src/view/biz/emergency/disaster/index.js
View file @ b51f9267
...@@ -10,6 +10,7 @@ import SwitchInfo from './SwitchInfo'; ...@@ -10,6 +10,7 @@ import SwitchInfo from './SwitchInfo';
import DisasterContents from './DisasterContents'; import DisasterContents from './DisasterContents';
import PaperContents from './PaperContents'; import PaperContents from './PaperContents';
import ModelContents from './ModelContents'; import ModelContents from './ModelContents';
import { disasterData, deviceData, contactData, detailData } from '../../../../../_mock/apps';
const { TabList, Tab, TabPanel } = Tabs; const { TabList, Tab, TabPanel } = Tabs;
...@@ -127,6 +128,7 @@ class DisasterSituation extends React.Component { ...@@ -127,6 +128,7 @@ class DisasterSituation extends React.Component {
} }
render() { render() {
console.log(disasterData);
const { flag, switchFlag, disasterInfo = {}, contactInfo = [], deviceInfo = [], deviceData = [], contentSwitch, paperSwitch, modelSwitch } = this.state; const { flag, switchFlag, disasterInfo = {}, contactInfo = [], deviceInfo = [], deviceData = [], contentSwitch, paperSwitch, modelSwitch } = this.state;
return ( return (
<div className="demo"> <div className="demo">
......
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