Skip to content

A
amos-station-module-view
Commit e94546a5 authored by suhuiguang's avatar suhuiguang
Browse files
Options

1.修改今日安全指数详情样式

parent e7f40486
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 116 deletions
mods/components/3dviewConvertor/styles/view/panoramic/statistical.scss
View file @ e94546a5
......@@ -17,6 +17,7 @@
padding-left: 97px;
padding-top: 10px;
flex-grow: 1;
overflow-y: auto;
.title-child{
width: 100%;
......@@ -156,9 +157,7 @@
height: 100%;
margin-left: 30px;
margin-right: 20px;
&:hover{
background-color: rgba(199,223,245,0.3);
}
cursor: pointer;
.content-item {
margin: 5px;
......@@ -473,56 +472,59 @@
text-align: right;
margin-top: 5px;
margin-right: 3px;
float: right;
// margin-top: 5px;
// margin-right: 3px;
img{
cursor: pointer;
}
}
.model-line{
float: left;
display: inline;
width: 32%;
height: 88%;
text-align: center;
padding-left: 35px;
margin-top: 5px;
margin-left: 10px;
overflow: auto;
.model-title{
height: 30px;
font-size:16px;
color:rgba(240,223,45,1);
padding-top: 10px;
}
.model-content{
&-body {
display: flex;
height: calc(100% - 50px);
.model-line{
float: left;
display: inline;
width: 32%;
height: 88%;
text-align: center;
padding-left: 35px;
margin-top: 5px;
margin-left: 10px;
overflow: auto;
.model-title{
height: 30px;
font-size:16px;
color:rgba(240,223,45,1);
padding-top: 10px;
}
.model-content{
.content-div{
min-width: 80px;
min-height: 120px;
text-align: left;
padding-top: 20px;
.content-div{
min-width: 80px;
min-height: 120px;
text-align: left;
padding-top: 20px;
.title{
height: 30px;
font-size: 16px;
color:rgba(240,223,45,1);
}
.next-title{
padding-left: 5px;
}
.rows{
padding-left: 15px;
font-size: 14px;
color:rgba(255,255,255,1);
.row{
display: inline-block;
height: 28px;
.title{
height: 30px;
font-size: 16px;
color:rgba(240,223,45,1);
}
.date{
padding-left: 25px;
.next-title{
padding-left: 5px;
}
.rows{
padding-left: 15px;
font-size: 14px;
color:rgba(255,255,255,1);
.row{
display: inline-block;
height: 28px;
}
.date{
padding-left: 25px;
}
}
}
}
......
mods/components/3dviewConvertor/view/panoramic/statistical/SafetyIndex.js
View file @ e94546a5
......@@ -35,59 +35,59 @@ export default class SafetyIndex extends Component {
const { safetyIndexData } = this.state;
return {
tooltip: {
show:false
show: false
},
toolbox: {
show:false,
feature: {
mark: {show: false},
restore: {show: false},
saveAsImage: {show: false}
}
show: false,
feature: {
mark: { show: false },
restore: { show: false },
saveAsImage: { show: false }
}
},
series: [
{
name: '今日安全指数',
type: 'gauge',
center: ['10%', '48%'], // 默认全局居中
radius: '60%',
min: 0,
max: 100,
endAngle: 90,
startAngle:-90,
splitNumber: 3,
axisLine: { // 坐标轴线
show:false,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.5, 'red'],
[0.9, 'Orange'],
[0.95, 'Gold'],
[1, '#00C3FF']
],
width: 0,
opacity : 0
}
},
axisLabel: { // 坐标轴小标记
show:false
},
axisTick: { // 坐标轴小标记
show:false
},
splitLine: { // 分隔线
show:false
},
pointer: {
width: 5
},
title: {
show:false
},
detail: {
show:false
},
data: [{value: safetyIndexData.safetyIndex, name: '今日安全指数'}]
{
name: '今日安全指数',
type: 'gauge',
center: ['10%', '48%'], // 默认全局居中
radius: '60%',
min: 0,
max: 100,
endAngle: 90,
startAngle: -90,
splitNumber: 3,
axisLine: { // 坐标轴线
show: false,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.5, 'red'],
[0.9, 'Orange'],
[0.95, 'Gold'],
[1, '#00C3FF']
],
width: 0,
opacity: 0
}
},
axisLabel: { // 坐标轴小标记
show: false
},
axisTick: { // 坐标轴小标记
show: false
},
splitLine: { // 分隔线
show: false
},
pointer: {
width: 5
},
title: {
show: false
},
detail: {
show: false
},
data: [{ value: safetyIndexData.safetyIndex, name: '今日安全指数' }]
}
]
}
......@@ -103,19 +103,21 @@ export default class SafetyIndex extends Component {
return (
<div className='warnModal'>
<div className='close'>
<img src={panoramicIcon.model_close} onClick={() => this.modelOpen(false)}></img>
<img src={panoramicIcon.model_close} alt='' onClick={() => this.modelOpen(false)} />
</div>
{warnController.map(item => {
return (
<div className='model-line'>
<div>
<img src={getIcon(item.icon)}></img>
<div className='warnModal-body'>
{warnController.map(item => {
return (
<div key={item.key} className='model-line'>
<div>
<img src={getIcon(item.icon)} alt='' />
</div>
<div className='model-title'>{item.label}</div>
<ModelContent type={item.type} />
</div>
<div className='model-title'>{item.label}</div>
<ModelContent type={item.type} />
</div>
);
})}
);
})}
</div>
</div>
);
}
......@@ -130,21 +132,21 @@ export default class SafetyIndex extends Component {
<div className='safetyIndex-content' onClick={() => this.modelOpen(true)}>
<div>今日安全指数 </div>
<div className='safetyIndex-content-row'>
<div className='number-large'>{safetyIndexData.safetyIndex}</div>
<span className='number-unit'>&nbsp;分&nbsp;
<img src={panoramicIcon.safetyup} className="row-up" alt="up" />
</span>
<div className='number-large'>{safetyIndexData.safetyIndex}</div>
<span className='number-unit'>&nbsp;分&nbsp;
<img src={panoramicIcon.safetyup} className="row-up" alt="up" />
</span>
</div>
{
[{name:'风险值上升',num:safetyIndexData.riskExceptionNum},
{name:'巡检不合格',num:safetyIndexData.checkExceptionNum},
{name:'火灾报警',num:safetyIndexData.fireExceptionNum}].map((item,index)=>
<div className="content-item">{item.name} {item.num}</div>
[{ name: '风险值上升',num: safetyIndexData.riskExceptionNum },
{ name: '巡检不合格',num: safetyIndexData.checkExceptionNum },
{ name: '火灾报警',num: safetyIndexData.fireExceptionNum }].map((item,index)=>
<div key={item.name} className="content-item">{item.name} {item.num}</div>
)
}
</div>
<ReactEcharts className='safetyIndex-content-chart' option={this.getOption()}/>
{ modelVisable && this.renderWarnContent()}
</div>
<ReactEcharts className='safetyIndex-content-chart' option={this.getOption()} />
{ modelVisable && this.renderWarnContent()}
</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