joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

调整机电控制模式样式

Browse Source
This commit is contained in:
zyy 2020-01-21 10:23:52 +08:00
parent f2cc16c03f
commit 6bd3ad8b42
1 changed files with 113 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/views/iscs/iscsSystem/config/bas/controlBAS.vue
View File

@ -11,14 +11,32 @@
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div class="table-0-top">
<div v-if="scope.$index == 0" class="table-0-top">
<div class="left">
{{ scope.row.date }}
<div>正常</div>
<div>运行</div>
</div>
<div class="right">
<div>空调机</div>
<div class="button-box">小新风空调</div>
<div class="button-box">全新风空调</div>
<div class="button-box">非空调季节</div>
<div class="button-box">冬季模式</div>
</div>
</div>
<div v-if="scope.$index == 4" class="table-4-top">
<div class="left">
<div>火灾</div>
<div>模式</div>
</div>
<div class="right">
<div class="button-box">站厅公共区火灾</div>
<div class="button-box">站台公共区火灾</div>
</div>
<div class="button-box">非火灾工况突发事件</div>
<div class="button-box">全修模式</div>
</div>
<div v-if="scope.$index == 8" class="table-8-top">设备实际运行状态</div>
<div v-if="scope.$index == 9" class="table-9-top">状态比较</div>
</template>
</el-table-column>
<el-table-column prop="province" width="120">
@ -64,56 +82,67 @@
export default {
data() {
return {
tableTitleStyle: 'text-align: center; height: 35px; padding: 0;background: #45607B;',
rowStyle: 'text-align: center;height: 35px; padding: 0; background: #45607B;',
tableTitleStyle: 'text-align: center; height: 28px; padding: 0;background: #45607B;',
rowStyle: 'text-align: center;height: 28px; padding: 0; background: #45607B;',
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
}]
};
@ -121,11 +150,16 @@ export default {
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 只有第一行合并
if (rowIndex % 4 === 0) {
if (rowIndex == 0 || rowIndex == 4) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex >= 8) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
@ -133,6 +167,17 @@ export default {
};
}
}
if (columnIndex == 1) {
if (rowIndex >= 8) {
return {
rowspan: 0,
colspan: 0
};
}
}
},
detail(item) {
console.log(item);
}
}
};
@ -140,20 +185,67 @@ export default {
<style lang="scss" scoped>
.control-bas-box{
width: 100%;
.table-0{
width: 300px;
float: left;
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 14px;
}
.table-0-top{
height: 140px;
overflow: hidden;
.left{
float: left;
width: 40%;
display: flex;
flex-direction: column;
height: 110px;
justify-content: center;
}
.right{
float: right;
width: 60%;
}
}
.table-4-top{
overflow: hidden;
.left{
float: left;
height: 56px;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
}
.right{
float: right;
width: 60%;
}
}
.button-box{
width: 100%;
height: 28px;
text-align: center;
line-height: 28px;
background-color: #A7A7A7;
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
cursor: pointer;
&.active,
&:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
}
}
.control-bas{
margin: 30px;
@ -172,12 +264,6 @@ export default {
margin-top: 30px;
color: #56E5DE;
}
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding: 0;
}
/deep/{
.el-table--border{
background: #45607B;
@ -201,7 +287,10 @@ export default {
.el-table--scrollable-x .el-table__body-wrapper{
height: 400px;
}
.el-table .cell{
.el-table .cell,
.el-table th div,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell{
padding: 0;
}
}