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> <div class="title-0">火灾指示灯:</div>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
<div class="table-0-top"> <div v-if="scope.$index == 0" class="table-0-top">
<div class="left"> <div class="left">
{{ scope.row.date }} <div>正常</div>
<div>运行</div>
</div> </div>
<div class="right"> <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> </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> </template>
</el-table-column> </el-table-column>
<el-table-column prop="province" width="120"> <el-table-column prop="province" width="120">
@ -64,56 +82,67 @@
export default { export default {
data() { data() {
return { return {
tableTitleStyle: 'text-align: center; height: 35px; padding: 0;background: #45607B;', tableTitleStyle: 'text-align: center; height: 28px; padding: 0;background: #45607B;',
rowStyle: 'text-align: center;height: 35px; padding: 0; background: #45607B;', rowStyle: 'text-align: center;height: 28px; padding: 0; background: #45607B;',
tableData: [{ tableData: [{
date: '2016-05-03', date: '2016-05-03',
name: '王小虎', name: '王小虎',
province: '上海', province: '上海',
city: '普陀区', city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}, { }, {
date: '2016-05-02', date: '2016-05-02',
name: '王小虎', name: '王小虎',
province: '上海', province: '上海',
city: '普陀区', city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}, { }, {
date: '2016-05-04', date: '2016-05-04',
name: '王小虎', name: '王小虎',
province: '上海', province: '上海',
city: '普陀区', city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}, { }, {
date: '2016-05-01', date: '2016-05-01',
name: '王小虎', name: '王小虎',
province: '上海', province: '上海',
city: '普陀区', city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}, { }, {
date: '2016-05-08', date: '2016-05-08',
name: '王小虎', name: '王小虎',
province: '上海', province: '上海',
city: '普陀区', city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}, { }, {
date: '2016-05-06', date: '2016-05-06',
name: '王小虎', name: '王小虎',
province: '上海', province: '上海',
city: '普陀区', city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}, { }, {
date: '2016-05-07', date: '2016-05-07',
name: '王小虎', name: '王小虎',
province: '上海', province: '上海',
city: '普陀区', 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 zip: 200333
}] }]
}; };
@ -121,11 +150,16 @@ export default {
methods: { methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // if (columnIndex === 0) { //
if (rowIndex % 4 === 0) { if (rowIndex == 0 || rowIndex == 4) {
return { return {
rowspan: 4, rowspan: 4,
colspan: 1 colspan: 1
}; };
} else if (rowIndex >= 8) {
return {
rowspan: 1,
colspan: 2
};
} else { } else {
return { return {
rowspan: 0, 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> <style lang="scss" scoped>
.control-bas-box{ .control-bas-box{
width: 100%; width: 100%;
.table-0{ .title-0{
width: 300px; width: 100%;
float: left; line-height: 20px;
text-align: left;
padding-left: 14px;
} }
.table-0-top{ .table-0-top{
height: 140px; overflow: hidden;
.left{ .left{
float: left; float: left;
width: 40%;
display: flex;
flex-direction: column;
height: 110px;
justify-content: center;
} }
.right{ .right{
float: right; float: right;
width: 60%; 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{ .control-bas{
margin: 30px; margin: 30px;
@ -172,12 +264,6 @@ export default {
margin-top: 30px; margin-top: 30px;
color: #56E5DE; color: #56E5DE;
} }
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding: 0;
}
/deep/{ /deep/{
.el-table--border{ .el-table--border{
background: #45607B; background: #45607B;
@ -201,7 +287,10 @@ export default {
.el-table--scrollable-x .el-table__body-wrapper{ .el-table--scrollable-x .el-table__body-wrapper{
height: 400px; 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; 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-left: 2px solid #f6f8f8;
border-right: 2px solid #9e9e9e; border-right: 2px solid #9e9e9e;
border-bottom: 2px solid #636667; border-bottom: 2px solid #636667;
cursor: pointer;
} }
.screen_station_name{ .screen_station_name{
width: 120px; width: 120px;
@ -253,11 +254,11 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
position: relative; position: relative;
} }
.button_default{ .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{ .button_default:before{
content:''; 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; min-width: 10px;
height: 10px; height: 10px;
display: inline-block; display: inline-block;
@ -266,7 +267,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
} }
.button_default::before{ .button_default::before{
content:''; 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; min-width: 10px;
height: 10px; height: 10px;
display: inline-block; display: inline-block;
@ -275,7 +276,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
} }
.button_default:after{ .button_default:after{
content:''; 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; min-width: 10px;
height: 10px; height: 10px;
display: inline-block; display: inline-block;
@ -287,7 +288,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
} }
.button_default::after{ .button_default::after{
content:''; 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; min-width: 10px;
height: 10px; height: 10px;
display: inline-block; display: inline-block;
@ -302,40 +303,4 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
display: flex; display: flex;
-webkit-flex-flow: row nowrap; -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> </style>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="iscs-system-box"> <div class="iscs-system-box">
<top-nav @selectMode="selectMode" /> <top-nav @selectMode="selectMode" />
<div class="content-box"> <div class="content-box iscs_content_box">
<router-view /> <router-view />
</div> </div>
<!-- <bottom /> --> <!-- <bottom /> -->
@ -39,4 +39,41 @@ export default {
padding: 34px 0 0; padding: 34px 0 0;
background: #45607B; 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> </style>

View File

@ -186,3 +186,13 @@ export default {
} }
}; };
</script> </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: { rules: {
signalCode: [ signalCode: [
{ required: true, message: this.$t('map.pleaseSelectSignal'), trigger: 'change' } { 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' }
// ]
} }
}; };
}, },