From 13e2e69368ebb472dd627c566703d737668de3dd Mon Sep 17 00:00:00 2001
From: joylink_fanyuhong <18706759286@163.com>
Date: Fri, 7 Feb 2020 18:40:16 +0800
Subject: [PATCH] =?UTF-8?q?iscs=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iscsSystem/config/cctv/controlCCTV.vue    | 94 ++++++++++++++++++-
 1 file changed, 90 insertions(+), 4 deletions(-)

diff --git a/src/views/iscs/iscsSystem/config/cctv/controlCCTV.vue b/src/views/iscs/iscsSystem/config/cctv/controlCCTV.vue
index 9df61dcf5..3063b0d50 100644
--- a/src/views/iscs/iscsSystem/config/cctv/controlCCTV.vue
+++ b/src/views/iscs/iscsSystem/config/cctv/controlCCTV.vue
@@ -36,9 +36,58 @@
       </div>
       <div class="cctv-box-top-middle">
         <div class="cctv-box-top-middle-title">预设位置</div>
+          <div style="margin-top: 20px;position: relative;left: 30px;">
+              <div style="display: inline-block;color: #56E5DE;">新描述</div>
+              <el-select v-model="value" size="mini">
+                  <el-option
+                      v-for="item in descriptionList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                  </el-option>
+              </el-select>
+          </div>
+          <div style="margin-top: 20px;position: relative;left: 30px; width: 230px">
+              <el-input
+                  type="textarea"
+                  :rows="6"
+                  v-model="textarea">
+              </el-input>
+          </div>
+          <div style="position: relative;left: 30px; width: 230px; display: flex; justify-content: space-between;margin-top: 10px">
+              <div class="each-cctv-box-top-gray-btn">预设位置</div>
+              <div class="each-cctv-box-top-gray-btn">回预位置</div>
+          </div>
       </div>
       <div class="cctv-box-top-right">
         <div class="cctv-box-top-right-title" />
+          <div style="text-align: center">
+              <div class="cctv-box-top-right-btn1"/>
+              <div class="cctv-box-top-right-btn1 cctv-btn-gray"/>
+              <div>
+                  <div class="cctv-box-top-right-btn2"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2" style="width: 40px;"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2 cctv-btn-gray"></div>
+                  <div class="cctv-box-top-right-btn2" style="margin-right: 0"></div>
+              </div>
+              <div class="cctv-box-top-right-btn1"/>
+              <div class="cctv-box-top-right-btn1 cctv-btn-gray"/>
+              <div>
+                  <div style="display: inline-block;width: 40px; height: 30px; background: #666666;margin-top: 10px; position: relative; left: -90px;line-height: 30px;">+</div>
+                  <div style="display: inline-block;width: 40px; height: 30px; background: #666666;margin-top: 10px; position: relative; left: -70px;line-height: 30px;">-</div>
+                  <div style="display: inline-block;width: 40px; height: 30px; background: #666666;margin-top: 10px; position: relative; left: -10px;line-height: 30px;">+</div>
+                  <div style="display: inline-block;width: 40px; height: 30px; background: #666666;margin-top: 10px; position: relative; left: 10px;line-height: 30px;">-</div>
+                  <div style="display: inline-block;width: 40px; height: 30px; background: #666666;margin-top: 10px; position: relative; left: 70px;line-height: 30px;">+</div>
+                  <div style="display: inline-block;width: 40px; height: 30px; background: #666666;margin-top: 10px; position: relative; left: 90px;line-height: 30px;">-</div>
+              </div>
+          </div>
       </div>
     </div>
     <div class="cctv-box-content">
@@ -73,7 +122,9 @@ export default {
     },
     data() {
         return {
-            selectedCCTV: '41'
+            selectedCCTV: '41',
+            descriptionList: [],
+            textarea: ''
         };
     },
     mounted() {
@@ -107,7 +158,7 @@ export default {
     color: #56E5DE;
   }
 }
-.cctv-box-top{width:1300px;margin: 0 auto;display:flex;margin-top:10px;}
+.cctv-box-top{width:1400px;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;
@@ -126,6 +177,18 @@ justify-content:center;text-align:center;
     cursor: pointer;
     font-weight:bold;
 }
+.each-cctv-box-top-gray-btn{
+    background: #666666;
+    border-top: 2px solid #f9f9f9;
+    border-left: 2px solid #f6f8f8;
+    border-right: 2px solid #9e9e9e;
+    border-bottom: 2px solid #9e9e9e;
+    font-size: 12px;
+    cursor: pointer;
+    font-weight:bold;
+    text-align:center;
+    padding: 5px 5px;
+}
 .each-cctv-box-top-btn.active{
     background: #EBB570;
     border-top: 2px solid #795B31;
@@ -160,7 +223,30 @@ justify-content:center;text-align:center;
     border-bottom: 2px solid #fff;
     margin-left:4px;
 }
-.cctv-box-top-right{width:400px;height:300px;
+.cctv-box-top-right-btn1{
+    width: 40px;
+    height: 30px;
+    background: #000077;
+    margin-top: 10px;
+    position: relative;
+    left: 230px;
+}
+.cctv-box-top-right-btn2{
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background: #000077;
+    margin-top: 10px;
+    margin-right: 10px;
+}
+.cctv-btn-gray{
+    background: #666666;
+    border-top: 2px solid #fff;
+    border-left: 2px solid #fff;
+    border-right: 2px solid #555555;
+    border-bottom: 2px solid #555555;
+}
+.cctv-box-top-right{width:500px;height:300px;
     border-top: 2px solid #8c8a89;
     border-left: 2px solid #8c8a89;
     border-right: 2px solid #fff;
@@ -225,7 +311,7 @@ justify-content:center;text-align:center;
     border-bottom: 3px solid #565656;
     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-right-title{width:496px;background:#000077;text-align:center;color:#fff;padding:5px 0px;font-size:13px;height:24px;}
 .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;