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

src/views/iscs/iscsSystem/config/cctv/controlCCTV.vue

@@ -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{width:1300px;margin: 0 auto;display:flex;margin-top:10px;}
-.cctv-box-top-left{width:500px;height:220px;
+.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;
+.each-cctv-box-top-btn{margin-left:10px;display:flex;align-items:center;width:65px;
-height:34px;font-size:12px;float:left;background:#ccc;margin-top:10px;
+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;
+.cctv-box-top-right1{width:242px;display:inline-block;
-    margin-left: 30px;margin-top: 4px;
+    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;
+    width: 120px;
-    height:85px;
+    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-top{width:1000px;height:20px;background:#fff;}
-.cctv-box-bottom-bottom{margin-top:5px;width:800px;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;
+    width:70px;
-    height:45px;
+    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;

src/views/iscs/iscsSystem/config/cctv/timeCCTV.vue

@@ -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>

src/views/iscs/iscsSystem/config/pis/timePreview.vue

@@ -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=" "