施工管控

src/views/construction/manage/realTimeManage/realTimeManage.vue

@@ -3,15 +3,38 @@
     <div class="left">
       <!-- 云平台 -->
       <div class="cloud-platform-box layout">
-        <div id="platform-left" class="layout">
-          <div class="left-right-btn-box layout"></div>
+        <div id="platform-left">
+          <div class="left-right-btn-box layout">
+            <button id="gq_nocheck" class="common_size"></button>
+            <span class="btn-desc">光圈</span>
+            <button id="gq2_nocheck" class="common_size"></button>
+          </div>
         </div>
         <div id="platform-center">
-          <div id="center-btn-top-box"></div>
-          <div id="center-btn-bottom-box"></div>
+          <div id="center-btn-top-box" class="layout">
+            <div class="fx-btn-box layout">
+              <button id="left_nocheck" class="common_size"></button>
+            </div>
+            <div class="fx-btn-box layout">
+              <button id="top_nocheck" class="common_size"></button>
+              <button id="bottom_nocheck" class="common_size"></button>
+            </div>
+            <div class="fx-btn-box layout">
+              <button id="right_nocheck" class="common_size"></button>
+            </div>
+          </div>
+          <div id="center-btn-bottom-box" class="layout">
+            <button id="sx_nocheck" class="common_size"></button>
+            <span class="btn-desc2">缩放</span>
+            <button id="fd_nocheck" class="common_size"></button>
+          </div>
         </div>
         <div id="platform-right">
-          <div class="left-right-btn-box layout"></div>
+          <div class="left-right-btn-box layout">
+            <button id="jj_nocheck" class="common_size"></button>
+            <span class="btn-desc">聚焦</span>
+            <button id="yj_nocheck" class="common_size"></button>
+          </div>
         </div>
       </div>
       <!-- 球机树 -->
@@ -107,7 +130,7 @@ export default {
           warnTime: '2024-03-03',
           warnContent: '人员未佩戴安全帽'
         }
-      ]
+      ],
     };
   },
   created() {
@@ -233,15 +256,121 @@ export default {
 #platform-right {
   width: 15%;
   height: 52%;
-  margin-top: 30%;
+  margin-top: 40%;
   align-items: center;
 }
 
+.common_size {
+  width: 32px;
+  height: 32px;
+  border: none;
+  cursor: pointer;
+  background-position: center center !important;
+  transition: background-image 0.5s;
+}
+
+.btn-desc {
+  writing-mode: vertical-lr;
+  margin: 8px 0;
+  letter-spacing: 2px;
+}
+
+.btn-desc2 {
+  margin: 0 8px;
+  letter-spacing: 2px;
+}
+
+#gq_nocheck {
+  background: url("../../../../assets/images/video/gq_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+
+#gq_nocheck:hover {
+  background: url("../../../../assets/images/video/gq_check.png") no-repeat 0 0 /100% 100%;
+}
+
+#gq2_nocheck {
+  background: url("../../../../assets/images/video/gq2_nocheck.png") no-repeat 0 0 /100% 100%;
+
+}
+
+#gq2_nocheck:hover {
+  background: url("../../../../assets/images/video/gq2_check.png") no-repeat 0 0 /100% 100%;
+
+}
+
+#jj_nocheck {
+  background: url("../../../../assets/images/video/jj_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+
+#jj_nocheck:hover {
+  background: url("../../../../assets/images/video/jj_check.png") no-repeat 0 0 /100% 100%;
+}
+
+#yj_nocheck {
+  background: url("../../../../assets/images/video/yj_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+
+#yj_nocheck:hover {
+  background: url("../../../../assets/images/video/yj_check.png") no-repeat 0 0 /100% 100%;
+}
+
+#sx_nocheck {
+  background: url("../../../../assets/images/video/sx_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+
+#sx_nocheck:hover {
+  background: url("../../../../assets/images/video/sx_check.png") no-repeat 0 0 /100% 100%;
+}
+
+#fd_nocheck {
+  background: url("../../../../assets/images/video/fd_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+
+#fd_nocheck:hover {
+  background: url("../../../../assets/images/video/fd_check.png") no-repeat 0 0 /100% 100%;
+}
+
+#left_nocheck{
+  background: url("../../../../assets/images/video/left_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+#left_nocheck:hover{
+  background: url("../../../../assets/images/video/left_check.png") no-repeat 0 0 /100% 100%;
+}
+#right_nocheck{
+  background: url("../../../../assets/images/video/right_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+#right_nocheck:hover{
+  background: url("../../../../assets/images/video/right_check.png") no-repeat 0 0 /100% 100%;
+}
+#top_nocheck{
+  background: url("../../../../assets/images/video/top_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+#top_nocheck:hover{
+  background: url("../../../../assets/images/video/top_check.png") no-repeat 0 0 /100% 100%;
+}
+#bottom_nocheck{
+  background: url("../../../../assets/images/video/bottom_nocheck.png") no-repeat 0 0 /100% 100%;
+}
+#bottom_nocheck:hover{
+  background: url("../../../../assets/images/video/bottom_check.png") no-repeat 0 0 /100% 100%;
+}
+.fx-btn-box:nth-of-type(2){
+  flex-direction: column;
+  justify-content: space-between;
+}
+.fx-btn-box:nth-of-type(2) button:nth-of-type(1){
+  margin-top: 5px;
+}
+.fx-btn-box:nth-of-type(2) button:nth-of-type(2){
+  margin-bottom: 5px;
+}
 .left-right-btn-box {
   width: 100%;
   height: 100%;
   background: url("../../../../assets/images/video/left_btn.png") no-repeat;
   background-position: center center !important;
+  flex-direction: column;
+  justify-content: center;
 }
 
 #platform-center {
@@ -254,6 +383,12 @@ export default {
   height: 80%;
   background: url("../../../../assets/images/video/back.png") no-repeat;
   background-position: center center !important;
+  justify-content: space-between;
+}
+
+.fx-btn-box {
+  width: 20%;
+  height: 100%;
 }
 
 #center-btn-bottom-box {
@@ -261,6 +396,7 @@ export default {
   height: 20%;
   background: url("../../../../assets/images/video/back3.png") no-repeat;
   background-position: center center !important;
+  justify-content: center;
 }
 
 .tree-box {