Merge branch 'dev' of https://git.code.tencent.com/lian-cbtc/jl-client into dev
This commit is contained in:
commit
9130b7752a
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
.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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
.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>
|
||||
|
@ -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>
|
||||
|
@ -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' }
|
||||
// ]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user