Skip to content

S
station-elec-manage-view
Commit 1a93e07d authored by zhengjiangtao's avatar zhengjiangtao
Browse files
Options

修改日常值守样式

parent 259635af
Show whitespace changes
Inline Side-by-side
Showing with 174 additions and 132 deletions
src/styles/view/biz/situation/situation.scss
View file @ 1a93e07d
.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;
}
} }
} }
} }
src/styles/view/monitor/homePage.scss
View file @ 1a93e07d
...@@ -1186,7 +1186,7 @@ ...@@ -1186,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 {
......
src/view/biz/duty/situation/RecentStatistics.js
View file @ 1a93e07d
...@@ -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>
......
src/view/biz/duty/situation/RiskTrend.js
View file @ 1a93e07d
...@@ -32,7 +32,7 @@ class RiskTrend extends Component { ...@@ -32,7 +32,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>
......
src/view/biz/duty/situation/Statistics.js
View file @ 1a93e07d
...@@ -64,7 +64,7 @@ class Statistics extends Component { ...@@ -64,7 +64,7 @@ class Statistics extends Component {
{ 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 = {
......
src/view/biz/duty/situation/data.js
View file @ 1a93e07d
...@@ -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,
......
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