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

iscs 闭路电视 车站时序 车站控制页面布局调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2020-02-04 11:14:51 +08:00
parent 3490c68e83
commit 7a07d12e67
3 changed files with 241 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/iscs/iscsSystem/config/cctv/controlCCTV.vue
View File

@ -65,7 +65,7 @@ export default {
.control-cctv-box{
width: 100%;
height: 100%;
padding-top: 30px;
padding-top: 20px;
padding-bottom: 40px;
.title-name{
width: 100%;
@ -75,17 +75,17 @@ export default {
color: #56E5DE;
}
}
.cctv-box-top{width: 1100px;margin: 0 auto;display:flex;margin-top:10px;}
.cctv-box-top-left{width:500px;height:220px;
.cctv-box-top{width:1300px;margin: 0 auto;display:flex;margin-top:10px;}
.cctv-box-top-left{width:600px;height:300px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.cctv-box-top-lefttop{width:492px;background:#000077;text-align:center;color:#fff;padding:5px 0px;font-size:13px;}
.cctv-box-top-lefttop{width:592px;background:#000077;text-align:center;color:#fff;padding:5px 0px;font-size:13px;}
.cctv-box-top-left1{width:180px;display:inline-block;vertical-align:top;}
.each-cctv-box-top-btn{margin-left:10px;display:flex;align-items:center;width:60px;
height:34px;font-size:12px;float:left;background:#ccc;margin-top:10px;
.each-cctv-box-top-btn{margin-left:10px;display:flex;align-items:center;width:65px;
height:40px;font-size:12px;float:left;background:#ccc;margin-top:10px;
justify-content:center;text-align:center;
border-top: 2px solid #f9f9f9;
border-left: 2px solid #f6f8f8;
@ -108,27 +108,27 @@ justify-content:center;text-align:center;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.cctv-box-top-right1{width:182px;display:inline-block;
margin-left: 30px;margin-top: 4px;
.cctv-box-top-right1{width:242px;display:inline-block;
margin-left: 60px;margin-top:10px;
border-top:2px #000077 solid;
border-left:2px #000077 solid;
}
.cctv-box-top-right1-line{width:180px;display:flex;
.cctv-box-top-right1-line{width:240px;display:flex;
}
.each-cctv-box-top-right1{
width: 90px;
height:85px;
width: 120px;
height:120px;
border-right:2px #000077 solid;
border-bottom:2px #000077 solid;
}
.cctv-box-top-middle{width:200px;height:220px;
.cctv-box-top-middle{width:300px;height:300px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
margin-left:4px;
}
.cctv-box-top-right{width:400px;height:220px;
.cctv-box-top-right{width:400px;height:300px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
@ -136,12 +136,12 @@ justify-content:center;text-align:center;
margin-left:4px;
}
.cctv-box-content{}
.cctv-box-bottom{width: 1100px;margin:30px auto;display:flex;}
.cctv-box-bottom{width: 1300px;margin:30px auto;display:flex;}
.cctv-box-bottom-left{display:flex;align-items:center;}
.cctv-box-bottom-text{color: #56E5DE;width:80px;font-size:14px;}
.cctv-box-bottom-middle{}
.cctv-box-bottom-top{width:800px;height:20px;background:#fff;}
.cctv-box-bottom-bottom{margin-top:5px;width:800px;height:20px;background:#fff;}
.cctv-box-bottom-top{width:1000px;height:20px;background:#fff;}
.cctv-box-bottom-bottom{margin-top:5px;width:1000px;height:20px;background:#fff;}
.cctv-box-bottom-right{}
.cctv-box-bottom-btn{width:80px;font-size:12px;cursor: pointer;
border-top: 3px solid #f9f9f9;
@ -153,7 +153,7 @@ justify-content:center;text-align:center;
background: #cccccc;text-align:center;font-weight:bold;
}
.cctv-box-top-right-title{width:396px;background:#000077;text-align:center;color:#fff;padding:5px 0px;font-size:13px;height:24px;}
.cctv-box-top-middle-title{width:196px;background:#000077;text-align:center;color:#fff;padding:5px 0px;font-size:13px;}
.cctv-box-top-middle-title{width:296px;background:#000077;text-align:center;color:#fff;padding:5px 0px;font-size:13px;}
.each-cctv-box-top-r1btn{
border-top: 2px solid #f9f9f9;
border-left: 2px solid #f6f8f8;
@ -161,20 +161,20 @@ justify-content:center;text-align:center;
border-bottom: 2px solid #636667;
background:#ccc;
text-align:center;
width:60px;
height:45px;
width:70px;
height:60px;
display:flex;
align-items: center;
justify-content:center;
margin:0 auto;
font-size:12px;
margin-top:5px;
margin-top:20px;
font-weight: bold;
cursor: pointer;
}
.each-cctv-box-top-r1text{
font-size: 12px;
width: 60px;
width: 70px;
padding: 2px 5px;
background: #fff;
margin: 0 auto;

220
src/views/iscs/iscsSystem/config/cctv/timeCCTV.vue
View File

@ -1,6 +1,78 @@
<template>
<div>
车站时序
<div class="time-cctv-box">
<div class="title-name">车站时序</div>
<div class="time-cctv-top">
<div class="time-cctv-top-inner">
<div class="time-cctv-top-lefttop">选择显示终端</div>
<div class="time-cctv-top-left1">
<div class="each-time-cctv-top-btn">单画面</div>
<div class="each-time-cctv-top-btn">站厅<br/>默认画面</div>
<div class="each-time-cctv-top-btn active">四画面</div>
<div class="each-time-cctv-top-btn">站台<br/>默认画面</div>
<div class="each-time-cctv-top-btn">大屏</div>
</div>
<div class="time-cctv-top-right1">
<div class="time-cctv-top-right1-line">
<div class="each-time-cctv-top-right1">
<div class="each-time-cctv-top-r1btn active">4-1</div>
<div class="each-time-cctv-top-r1text">01031#</div>
</div>
<div class="each-time-cctv-top-right1">
<div class="each-time-cctv-top-r1btn">4-2</div>
<div class="each-time-cctv-top-r1text">01001#</div>
</div>
</div>
<div class="time-cctv-top-right1-line">
<div class="each-time-cctv-top-right1">
<div class="each-time-cctv-top-r1btn">4-3</div>
<div class="each-time-cctv-top-r1text">01001#</div>
</div>
<div class="each-time-cctv-top-right1">
<div class="each-time-cctv-top-r1btn">4-4</div>
<div class="each-time-cctv-top-r1text">01005#</div>
</div>
</div>
</div>
</div>
</div>
<div class="time-cctv-content">
<div class="time-cctv-content-top">选择时序</div>
<div class="time-cctv-content-bottom">
<div class="time-cctv-content-bottomL">
<div class="time-cctv-content-bottomLT">车站固定时序列表</div>
<div class="time-cctv-content-bottomLB">
<el-table
cell-class-name="time_cctv_column"
header-cell-class-name="time_cctv_thead"
:data="tableData"
border
style="width: 100%"
>
<el-table-column
label="编号"
type="index"
:index="indexMethod"
width="40"
/>
</el-table>
<div class="time-cctv-content-btn1">启动时序</div>
</div>
</div>
<div class="time-cctv-content-bottomR"></div>
</div>
</div>
<div class="time-cctv-bottom">
<div class="time-cctv-bottom-left">
<div class="time-cctv-bottom-text">信息提示</div>
</div>
<div class="time-cctv-bottom-middle">
<div class="time-cctv-bottom-top" />
<div class="time-cctv-bottom-bottom" />
</div>
<div class="time-cctv-bottom-right">
<div class="time-cctv-bottom-btn">图元说明</div>
</div>
</div>
</div>
</template>
<script>
@ -8,3 +80,147 @@ export default {
};
</script>
<style lang="scss" scoped>
.time-cctv-box{
width: 100%;
height: 100%;
padding-top: 20px;
padding-bottom: 40px;
.title-name{
width: 100%;
text-align: center;
font-size: 20px;
margin-top: 30px;
color: #56E5DE;
}
}
.time-cctv-bottom{width: 1300px;margin:30px auto;display:flex;}
.time-cctv-bottom-left{display:flex;align-items:center;}
.time-cctv-bottom-text{color: #56E5DE;width:80px;font-size:14px;}
.time-cctv-bottom-middle{}
.time-cctv-bottom-top{width:1000px;height:20px;background:#fff;}
.time-cctv-bottom-bottom{margin-top:5px;width:1000px;height:20px;background:#fff;}
.time-cctv-bottom-right{}
.time-cctv-bottom-btn{width:80px;font-size:12px;cursor: pointer;
border-top: 3px solid #f9f9f9;
border-left: 3px solid #f6f8f8;
border-right: 3px solid #565656;
padding:2px 0px;
margin-left:30px;
border-bottom: 3px solid #565656;
background: #cccccc;text-align:center;font-weight:bold;
}
.time-cctv-top-inner{width:600px;height:300px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
margin:0 auto;
}
.time-cctv-top{margin-top:10px;}
.time-cctv-top-lefttop{width:592px;background:#000077;text-align:center;color:#fff;padding:5px 0px;font-size:13px;}
.time-cctv-top-left1{width:180px;display:inline-block;vertical-align:top;}
.each-time-cctv-top-btn{margin-left:10px;display:flex;align-items:center;width:65px;
height:40px;font-size:12px;float:left;background:#ccc;margin-top:10px;
justify-content:center;text-align:center;
border-top: 2px solid #f9f9f9;
border-left: 2px solid #f6f8f8;
border-right: 2px solid #9e9e9e;
border-bottom: 2px solid #636667;
cursor: pointer;
font-weight:bold;
}
.each-time-cctv-top-btn.active{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.each-time-cctv-top-r1btn.active{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.time-cctv-top-right1{width:242px;display:inline-block;
margin-left: 60px;margin-top:10px;
border-top:2px #000077 solid;
border-left:2px #000077 solid;
}
.time-cctv-top-right1-line{width:240px;display:flex;
}
.each-time-cctv-top-right1{
width: 120px;
height:120px;
border-right:2px #000077 solid;
border-bottom:2px #000077 solid;
}
.time-cctv-top-middle{width:300px;height:300px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
margin-left:4px;
}
.time-cctv-top-right{width:400px;height:300px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
margin-left:4px;
}
.each-time-cctv-top-r1btn{
border-top: 2px solid #f9f9f9;
border-left: 2px solid #f6f8f8;
border-right: 2px solid #9e9e9e;
border-bottom: 2px solid #636667;
background:#ccc;
text-align:center;
width:70px;
height:60px;
display:flex;
align-items: center;
justify-content:center;
margin:0 auto;
font-size:12px;
margin-top:20px;
font-weight: bold;
cursor: pointer;
}
.each-time-cctv-top-r1text{
font-size: 12px;
width: 70px;
padding: 2px 5px;
background: #fff;
margin: 0 auto;
margin-top:5px;
}
.time-cctv-content{width:1300px;margin:10px auto;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.time-cctv-content-top{
width: 1296px;
background: #000077;
text-align: center;
color: #fff;
padding: 5px 0px;
font-size: 13px;
}
.time-cctv-content-bottom{display:flex;}
.time-cctv-content-bottomL{
width: 300px;
margin-left: 50px;
}
.time_cctv_column{}
.time_cctv_thead{}
.time-cctv-content-btn1{}
.time-cctv-content-bottomR{}
.time-cctv-content-bottomLT{text-align:center;color:#56E5DE;font-size:13px;margin-top:5px;
margin-bottom: 5px;}
.time-cctv-content-bottomLB{}
</style>

3
src/views/iscs/iscsSystem/config/pis/timePreview.vue
View File

@ -9,7 +9,8 @@
header-cell-class-name="time_preview_thead"
:data="tableData"
border
style="width: 100%"
style="width:100%;overflow-y: auto;"
height="496"
>
<el-table-column
label=" "