This commit is contained in:
fan 2020-01-21 16:06:03 +08:00
commit 9130b7752a
5 changed files with 170 additions and 69 deletions

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;
}
}

View File

@ -236,6 +236,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
border-left: 2px solid #f6f8f8;
border-right: 2px solid #9e9e9e;
border-bottom: 2px solid #636667;
cursor: pointer;
}
.screen_station_name{
width: 120px;
@ -253,11 +254,11 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
position: relative;
}
.button_default{
border-top: 2px solid #f1f1f1;border-left: 2px solid #d0d8dd;border-right: 2px solid #959da0;border-bottom: 2px solid #90999d;
border-top: 2px solid #edf1f2;border-left: 2px solid #d0d8dd;border-right: 2px solid #8c8a88;border-bottom: 2px solid #8a8887;
}
.button_default:before{
content:'';
border-top: 2px solid #f1f1f1;border-left: 2px solid #d0d8dd;border-right: 2px solid #959da0;border-bottom: 2px solid #90999d;
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
min-width: 10px;
height: 10px;
display: inline-block;
@ -266,7 +267,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
}
.button_default::before{
content:'';
border-top: 2px solid #f1f1f1;border-left: 2px solid #d0d8dd;border-right: 2px solid #959da0;border-bottom: 2px solid #90999d;
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
min-width: 10px;
height: 10px;
display: inline-block;
@ -275,7 +276,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
}
.button_default:after{
content:'';
border-top: 2px solid #f4f4f4;border-left: 2px solid #efefef;border-right: 2px solid #727272;border-bottom: 2px solid #7f7f7f;
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
min-width: 10px;
height: 10px;
display: inline-block;
@ -287,7 +288,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
}
.button_default::after{
content:'';
border-top: 2px solid #f4f4f4;border-left: 2px solid #efefef;border-right: 2px solid #727272;border-bottom: 2px solid #7f7f7f;
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
min-width: 10px;
height: 10px;
display: inline-block;
@ -302,40 +303,4 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
display: flex;
-webkit-flex-flow: row nowrap;
}
// safariqq360
//
.screen_right_group::-webkit-scrollbar {
height: 6px;
// height: 110px;
background-color: transparent;
}
/*定义滚动条轨道 内阴影+圆角*/
.screen_right_group::-webkit-scrollbar-track {
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFFFFF;;
}
/*定义滑块 内阴影+圆角*/
.screen_right_group::-webkit-scrollbar-thumb {
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #eaeaea;
}
/*滑块效果*/
.screen_right_group::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
</style>

View File

@ -1,7 +1,7 @@
<template>
<div class="iscs-system-box">
<top-nav @selectMode="selectMode" />
<div class="content-box">
<div class="content-box iscs_content_box">
<router-view />
</div>
<!-- <bottom /> -->
@ -39,4 +39,41 @@ export default {
padding: 34px 0 0;
background: #45607B;
}
// safariqq360
//
.iscs_content_box ::-webkit-scrollbar {
width: 6px;
height: 6px;
// height: 110px;
background-color: #FFFFFF;
}
/*定义滚动条轨道 内阴影+圆角*/
.iscs_content_box ::-webkit-scrollbar-track {
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFFFFF;;
}
/*定义滑块 内阴影+圆角*/
.iscs_content_box ::-webkit-scrollbar-thumb {
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #cacaca;
}
/*滑块效果*/
.iscs_content_box ::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
</style>

View File

@ -186,3 +186,13 @@ export default {
}
};
</script>
<style lang="scss">
.el-dialog__body {
padding: 0px 20px 10px 20px;
color: #606266;
font-size: 14px;
}
.el-dialog{
margin-top: 5vh !important;
}
</style>

View File

@ -111,10 +111,10 @@ export default {
rules: {
signalCode: [
{ required: true, message: this.$t('map.pleaseSelectSignal'), trigger: 'change' }
],
sectionList: [
{ required: true, message: this.$t('map.triggerSegmentData'), trigger: 'change' }
]
// sectionList: [
// { required: true, message: this.$t('map.triggerSegmentData'), trigger: 'change' }
// ]
}
};
},