Skip to content

A
AmosBankView
Commit eabed450 authored by xinglei's avatar xinglei
Browse files
Options

*）修改首页样式

parent e13fa66d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 122 deletions
amos.config.js
View file @ eabed450
......@@ -127,6 +127,4 @@
window.appKey = 'AMOS_BANK';
window.product = 'AMOS_BANK_WEB';
window.dutyType = 'bank'; //normal/bank
})();
src/styles/view/3dview/indexCharts.scss
View file @ eabed450
This diff is collapsed.
src/styles/view/biz/header.scss
View file @ eabed450
......@@ -2,8 +2,8 @@
#app {
.header {
background: $core-color;
z-index: 111;
background: $core-color;
.sys-tools {
display: none;
......@@ -26,31 +26,30 @@
.logo-wrapper {
// display: none;
width: 240px;
font-size: 18px;
padding-left: 15px;
font-size: 18px;
// background: #345fa6;
color: #fff;
.header-logo {
width: 100%;
background: #345fa6;
border: none;
border-right: 1px solid #2d5291;
width: 100%;
}
.logo-text {
display: inline-block;
}
}
.nav-menu-wrapper {
.menu-expanded{
.menu-expanded {
position: relative;
z-index: 90000;
}
.nav-menu-box {
.nav-menu-list {
color: white;
......@@ -65,7 +64,7 @@
}
.nav-menu-item-label {
font-size: 15px;
font-size: 18px;
color: white;
}
......@@ -88,56 +87,68 @@
}
}
}
.header.headerIndex {
background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
background-size: 100% 100%;
height: 7rem;
// line-height: 7rem;
z-index: 11111;
display: flex;
height: 7rem;
background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
background-size: 100% 100%;
box-shadow: none;
.header-navs {
width: 38%;
.nav-menu-wrapper {
top: 3rem;
width: 100%;
.nav-menu-item {
width: 24% !important;
border: none !important;
.menusub-wrapper {
width: 100% !important;
}
}
.nav-menu-bg {
display: none;
}
}
}
.leftNavs {
.nav-menu-wrapper {
padding-left: 25.5%;
padding-right: 15%;
padding-left: 25.5%;
.nav-menu-item {
width: 33.3% !important;
}
}
}
.rightNavs {
.nav-menu-wrapper {
padding-left: 15%;
}
}
.projectName {
width: 24%;
height: 7rem;
line-height: 7rem;
text-align: center;
img {
vertical-align: middle;
width: 65%;
vertical-align: middle;
}
}
}
.content-body.indexContent {
top: 0;
height: 100%;
......
src/view/bank/3dview/indexCharts/leftCharts.js
View file @ eabed450
......@@ -336,8 +336,8 @@ class LeftCharts extends Component {
<img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
</div>
<div className="dh-values" >
<div className="dh-values-item">3#温度：{wd3.value === undefined ? '0°C' : wd3.value + '°C'} </div>
<div className="dh-values-item">4#温度：{wd4.value === undefined ? '0°C' : wd4.value + '°C'}</div>
<div className="dh-values-item">3#温度：{wd3.value === undefined ? '0°C' : wd3.value } </div>
<div className="dh-values-item">4#温度：{wd4.value === undefined ? '0°C' : wd4.value }</div>
</div>
</div>
</div>
......@@ -348,8 +348,8 @@ class LeftCharts extends Component {
<img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
</div>
<div className="dh-values" >
<div className="dh-values-item">1#温度：{wd1.value === undefined ? '0°C' : wd1.value + '°C'} </div>
<div className="dh-values-item">2#温度：{wd1.value === undefined ? '0°C' : wd2.value + '°C'} </div>
<div className="dh-values-item">1#温度：{wd1.value === undefined ? '0°C' : wd1.value } </div>
<div className="dh-values-item">2#温度：{wd1.value === undefined ? '0°C' : wd2.value } </div>
</div>
</div>
</div>
......@@ -360,8 +360,8 @@ class LeftCharts extends Component {
<img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
</div>
<div className="dh-values" >
<div className="dh-values-item">1温度：{wd5.value === undefined ? '0°C' : wd5.value + '°C'} </div>
<div className="dh-values-item">5温度：{wd6.value === undefined ? '0°C' : wd6.value + '°C'} </div>
<div className="dh-values-item">1#温度：{wd5.value === undefined ? '0°C' : wd5.value } </div>
<div className="dh-values-item">5#温度：{wd6.value === undefined ? '0°C' : wd6.value } </div>
</div>
</div>
</div>
......
src/view/bank/3dview/indexCharts/rightChartChild/middleTable.js
View file @ eabed450
......@@ -91,13 +91,13 @@ class MiddleTable extends Component {
const { headerData, dataList,arrangeList, arrangeNo } = this.state;
let leader = (headerData.leader && headerData.leader[0]) || {};
let secondTier = headerData.secondTier || [];
let arrange = arrangeList.find(item => item.id === arrangeNo) || {};
let arrange = (arrangeList && arrangeList.find(item => item.id === arrangeNo)) || {};
return (
<div className='table-middle'>
<div className='leaderBox'>
<div className='leader'>
<span className='itemLabel'>带班领导</span>
<span className='itemValue'>{leader.dutyName || ''}&nbsp;{ leader.mobile || ''}</span>
<span className='itemValue'>{leader.dutyName || ''}&nbsp;&nbsp;&nbsp;{ leader.mobile || ''}</span>
</div>
<div className='secondLine'>
<span className='itemLabel'>二线人员</span>
......@@ -134,19 +134,19 @@ class MiddleTable extends Component {
<Row className='table-header-split'>一线人员</Row>
<Row className='table-body-cotent firstPeople'>
<Col className=''>
<Row className='table-header-row title'>
<Row className='table-header-row duty-title'>
<Col className='leftBtn' span={1}><img className='table-page-img' src="/src/assets/3dview/left.png" onClick={ () => this.leftClick() }/></Col>
<Col span={7}>岗位</Col>
<Col span={8}>{arrange.startTime} - {arrange.endTime} </Col>
<Col span={7}>电话</Col>
<Col span={6}>岗位</Col>
<Col span={11}>{arrange.startTime} - {arrange.endTime} </Col>
<Col span={4}>电话</Col>
<Col className='rightBtn' span={1}><img className='table-page-img' src="/src/assets/3dview/right.png" onClick={ () => this.rightClick() }/></Col>
</Row>
{ dataList && dataList.map((d,index) => {
return (
<Row className='table-header-row content' key={index}>
<Col span={8}>{ d.postName }</Col>
<Col span={8}>{ d.dutyName }</Col>
<Col span={8}>{ d.mobile }</Col>
<Col span={6}>{ d.postName }</Col>
<Col span={11}>{ d.dutyName }</Col>
<Col span={4}>{ d.mobile }</Col>
</Row>
)
}) }
......
src/view/bank/3dview/indexCharts/rightChartChild/topChart.js
View file @ eabed450
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Connect, Modal } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf';
import ReactEcharts from 'amos-viz/lib/echarts';
import { rightTopChartAction ,getxuncountAction} from '../../../../../services/3dService';
import { rightTopChartAction, getxuncountAction } from '../../../../../services/3dService';
import SysWsURL, { completeToken } from './../../../../../consts/wsUrlConsts';
import AmosWebSocket from 'amos-websocket';
import moment from 'moment';
......@@ -21,14 +21,14 @@ class TopCharts extends Component {
super(props);
this.state = {
data:{},
data: {},
currentCode: '',
technologyDataname: '',
serviceDataname: '',
technologyData: {},
serviceData: {},
dataList: [],
xun:{}
xun: {}
};
}
......@@ -39,7 +39,7 @@ class TopCharts extends Component {
componentWillReceiveProps = nextProps => {
if (this.props.currentCode !== nextProps.currentCode) {
console.log(nextProps.currentCode,'nextProps.currentCode')
console.log(nextProps.currentCode, 'nextProps.currentCode')
const { currentCode, curCompanyId } = nextProps || {};
this.state.currentCode = currentCode;
this.freshDataList(nextProps.curCompanyId);
......@@ -48,9 +48,8 @@ class TopCharts extends Component {
}
};
//巡检点统计
getxuncount(){
getxuncount() {
getxuncountAction().then(data => {
this.setState({
xun: data
......@@ -58,9 +57,7 @@ class TopCharts extends Component {
});
}
freshDataList(companyId){
freshDataList(companyId) {
rightTopChartAction(companyId).then(data => {
this.setState({
dataList: data
......@@ -68,13 +65,13 @@ class TopCharts extends Component {
});
}
getOptions = (data,title) => {
getOptions = (data, title) => {
let seriesData = [
{ value: data.normal || 0, name:'正常' },
{ value: data.abnormal || 0, name:'异常'},
{ value: data.missedDetection || 0, name:'漏点' },
{ value: data.notIncluded || 0, name:'未计划' },
{ value: data.normal || 0, name: '正常' },
{ value: data.abnormal || 0, name: '异常' },
{ value: data.missedDetection || 0, name: '漏点' },
{ value: data.notIncluded || 0, name: '未计划' },
];
return {
......@@ -85,37 +82,37 @@ class TopCharts extends Component {
legend: {
orient: 'vertical',
x: 'left',
top:'35%',
left:'10%',
top: '35%',
left: '10%',
itemWidth: 15,
itemHeight: 10,
itemGap: 10,
data:['正常','异常','漏点','未计划'],
formatter: function(name) {
let curItem = seriesData.find( e => {
data: ['正常', '异常', '漏点', '未计划'],
formatter: function (name) {
let curItem = seriesData.find(e => {
return e.name === name;
})
var content = name +'：' + curItem.value;
var content = name + '：' + curItem.value;
return content;
},
textStyle: {
color: '#ffffff',//字体颜色
fontSize: 10
fontSize: 14
}
},
color:['#88FF00','#FF9100','#FF0000','#D8D8D8'],
color: ['#88FF00', '#FF9100', '#FF0000', '#D8D8D8'],
series: [
{
name:'检查点',
type:'pie',
center:['70%','60%'],//饼图位置
name: '检查点',
type: 'pie',
center: ['70%', '60%'],//饼图位置
radius: ['50%', '70%'],//外半径，内半径
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: function(param) {
formatter: function (param) {
let total = 0;
seriesData.forEach(e => {
total += e.value;
......@@ -134,18 +131,18 @@ class TopCharts extends Component {
show: false
}
},
data:seriesData
data: seriesData
}
]
};
}
getOptionsx = (data,title) => {
getOptionsx = (data, title) => {
return {
backgroundColor:'rgba(23,90,201,0.9)',
backgroundColor: 'rgba(23,90,201,0.9)',
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
......@@ -156,15 +153,16 @@ class TopCharts extends Component {
left: '2%',
right: '4%',
bottom: '14%',
top:'16%',
top: '16%',
containLabel: true
},
legend: {
data: ['未开始', '进行中', '已结束','已超时'],
data: ['未开始', '进行中', '已结束', '已超时'],
right: 10,
top:12,
top: 12,
textStyle: {
color: "#fff"
color: "#fff",
fontSize: 14
},
itemWidth: 12,
itemHeight: 10,
......@@ -172,21 +170,21 @@ class TopCharts extends Component {
},
xAxis: {
type: 'category',
triggerEvent :true,
triggerEvent: true,
data: data.x,
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
fontFamily: 'Microsoft YaHei',
fontSize: 13
}
}
},
},
yAxis: {
......@@ -212,11 +210,11 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#02E3FC',
barBorderRadius: 11,
},
color: '#02E3FC',
barBorderRadius: 11
}
},
data:data.wks
data: data.wks
},
{
name: '进行中',
......@@ -224,11 +222,11 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#00FF55',
barBorderRadius: 11,
},
color: '#00FF55',
barBorderRadius: 11
}
},
data:data.yxz
data: data.yxz
},
{
name: '已结束',
......@@ -236,12 +234,11 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#FF8000',
barBorderRadius: 11,
},
color: '#FF8000',
barBorderRadius: 11
}
},
data:data.yjs
data: data.yjs
},
{
name: '已超时',
......@@ -249,59 +246,43 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#FF0000',
barBorderRadius: 11,
},
color: '#FF0000',
barBorderRadius: 11
}
},
data:data.ycs
data: data.ycs
}]
};
}
onclick = {
'click': this.clickEchartsPie.bind(this)
}
clickEchartsPie(e) {
}
clickEchartsPie(e) {
const { dataList } = this.state;
let ff={}
let ff = {}
isArray(dataList) && dataList.forEach(e => {
ff = e;
});
if(e.hasOwnProperty("name")){
if(ff[ff[e.name]]>0){
this.props.patrolDetailView(e.name,ff[e.name]);
}else{
if (e.hasOwnProperty("name")) {
if (ff[ff[e.name]] > 0) {
this.props.patrolDetailView(e.name, ff[e.name]);
} else {
message.danger('当前没有巡检计划');
}
}else{
if(ff[ff[e.value]]>0){
this.props.patrolDetailView(e.value,ff[e.value]);
}else{
} else {
if (ff[ff[e.value]] > 0) {
this.props.patrolDetailView(e.value, ff[e.value]);
} else {
message.danger('当前没有巡检计划');
}
}
}
}
handleData = (data = {}) => {
//console.log('topChart ws data:', data);
if (data === 'planTaskRefresh'){
if (data === 'planTaskRefresh') {
this.getxuncount();
this.freshDataList(this.props.curCompanyId);
} else {
......@@ -314,21 +295,16 @@ clickEchartsPie(e) {
const { data, dataList } = this.state;
const wsURL = completeToken(SysWsURL.topChartws);
const planTaskWsURL = completeToken(SysWsURL.planTaskURI);
let { technologyData,xun, serviceData ,technologyDataname,serviceDataname} = this.state;
let { technologyData, xun, serviceData, technologyDataname, serviceDataname } = this.state;
//console.log(dataList,'topchartDataList');
isArray(dataList) && dataList.forEach(e => {
technologyData = e;
});
return (
<div className='left-chart-top'>
<div className='left-chart-child'>
<ReactEcharts option = { this.getOptionsx(technologyData, null) } eventpool={this.onclick}/>
<ReactEcharts option={this.getOptionsx(technologyData, null)} eventpool={this.onclick} />
</div>
<div className='left-chart-child'>
<div className='title'>
......@@ -336,7 +312,7 @@ clickEchartsPie(e) {
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
巡检点状态统计</span>
</div>
<ReactEcharts option = { this.getOptions(xun,"") } className='child-pie'/>
<ReactEcharts option={this.getOptions(xun, "")} className='child-pie' />
</div>
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
......
src/view/bank/3dview/indexCharts/rightPane/alarmLineChart.js
View file @ eabed450
......@@ -35,7 +35,8 @@ class AlarmLineChart extends Component {
// itemHeight: 5,
// itemGap: 13,
textStyle: {
color: 'white'
color: 'white',
fontSize: 14
},
data: ['紧急', '重要', '次要','警告']
......@@ -47,7 +48,8 @@ class AlarmLineChart extends Component {
interval: 0,
show: true,
textStyle: {
color: 'white'
color: 'white',
fontSize: 13
}
},
axisLine: {
......
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