2024-10-21 绘制mars3d版本

src/components/mars3d/MarsBox.vue

@@ -41,7 +41,7 @@
 
         <div class="mars3d-item">
           <div class="mar3d-title">边框颜色：</div>
-          <div class="mar3d-con">
+          <div class="mar3d-con distinction">
             <el-color-picker v-model="itemdata.fillColor" size="small" />
             <input v-model="itemdata.fillColor" placeholder="边框颜色" />
           </div>
@@ -49,7 +49,7 @@
 
         <div class="mars3d-item">
           <div class="mar3d-title">填充颜色：</div>
-          <div class="mar3d-con">
+          <div class="mar3d-con distinction">
             <el-color-picker v-model="itemdata.collColor" size="small" />
             <input v-model="itemdata.collColor" placeholder="填充色" />
           </div>
@@ -57,7 +57,7 @@
 
         <div class="mars3d-item">
           <div class="mar3d-title">文字颜色：</div>
-          <div class="mar3d-con">
+          <div class="mar3d-con distinction">
             <el-color-picker v-model="itemdata.textColor" size="small" />
             <input v-model="itemdata.textColor" placeholder="文字颜色" />
           </div>
@@ -75,7 +75,7 @@
         <div class="mars3d-item">
           <div class="mar3d-title">是否虚线：</div>
           <div class="mar3d-con">
-            <el-switch v-model="itemdata.swtichitem" active-color="#13ce66" inactive-color="#ccc"></el-switch>
+            <el-switch v-model="itemdata.swtichitem" active-color="#34c759" inactive-color="#ccc"></el-switch>
           </div>
         </div>
 
@@ -125,7 +125,7 @@
           @click="onmapitem(item)"
         >{{item.name}}</div>
       </div>
-    </div> -->
+    </div>-->
   </div>
 </template>
 
@@ -846,15 +846,20 @@ export default {
   position: relative;
 
   .mars-3d-deleter {
-    width: 296px;
+    width: 300px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 15px;
     height: 42px;
-    border-left: 5px solid #52a3de;
+    // border-left: 5px solid linear-gradient(180deg, #3170e2 0%, #52b2ee 100%);
-    border-bottom: 2px solid #52a3de;
+    // border-bottom: 2px solid #4faced;
-    background: #3c444f;
+    background: rgba(11, 22, 51, 0.3);
+    background-image: url("~@/assets/images/mapbox/Group 31.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    background-size: 100% 100%;
     color: #ffffff;
     // box-sizing: border-box;
 
@@ -870,7 +875,11 @@ export default {
 
     width: 300px;
     height: 420px;
-    background: #3c444f;
+    // background: #3c444f;
+    background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
+    // background-position: center center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     z-index: 1000;
     padding: 0 15px 15px;
     display: flex;
@@ -886,8 +895,12 @@ export default {
       line-height: 45px;
       padding-left: 15px !important;
       padding-right: 15px !important;
-      background: #2a3653;
+      // background: #2a3653;
-      border: 1px solid #344c7b;
+
+      // border: 1px solid #344c7b;
+      background-image: url("~@/assets/images/mapbox/Rectangle 22.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
       position: absolute;
       left: 0;
       padding: 0;
@@ -925,6 +938,24 @@ export default {
           width: 100px;
         }
 
+        .distinction {
+          // background: skyblue;
+          display: flex;
+          // align-items: flex-start;
+          align-items: center;
+
+          input {
+            width: 140px !important;
+          }
+
+          ::v-deep .el-color-picker--small .el-color-picker__trigger {
+            width: 23px !important;
+            height: 23px !important;
+            margin-right: 8px !important;
+            margin-top: 5px !important;
+          }
+        }
+
         .mar3d-con {
           flex: 1;
           display: flex;
@@ -933,7 +964,25 @@ export default {
           // background: skyblue;
 
           .block {
-            width: 200px;
+            width: 180px;
+
+            ::v-deep .el-slider__runway {
+              background-image: url("~@/assets/images/mapbox/Rectangle 34624274.png") !important;
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+
+              .el-slider__bar {
+                background: transparent !important;
+              }
+
+              .el-slider__button {
+                // background: yellow !important;
+                background-image: url("~@/assets/images/mapbox/Group 1000015866.png") !important;
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                border: 0px !important;
+              }
+            }
           }
         }
       }
@@ -949,7 +998,7 @@ export default {
     top: 30px;
     left: 20px;
 
-    background: skyblue;
+    // background: skyblue;
     display: flex;
     flex-direction: column;
 
@@ -957,9 +1006,10 @@ export default {
       // background: red !important;
 
       input {
-        border: 1px solid #516182;
+        border: 1px solid #3e62a6;
-        background: #4a5261 !important;
+        background: #778098;
-        color: #ffffff;
+
+        color: #fff;
       }
 
       i {
@@ -979,8 +1029,10 @@ export default {
     .sea-list {
       width: 100%;
       flex: 1;
-      background: #434447 !important;
+      background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
-      border: 1px solid rgba(66, 70, 78 / 0.1);
+      // background-position: center center;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
       box-sizing: border-box;
       color: #ffffff;
 

src/components/mars3d/MarsBoxarea.vue

@@ -2,7 +2,17 @@
   <div class="mars3d-com">
     <div class="mars3d-com" ref="mars3dContainer" style="width: 100%; height: 100%"></div>
     <!-- 绘制区域 -->
-    <div class="mars3d-box">
+
+    <div class="mars-3d-deleter">
+      {{ !latlntswtich ? '绘制面' : '获取经纬度'}}
+      <i
+        @click="onclonemap"
+        class="el-icon-close"
+        style="font-size:'16px'; cursor: pointer;"
+      ></i>
+    </div>
+
+    <div class="mars3d-box" v-if="!latlntswtich">
       <div class="mars-3d-header">
         <el-radio-group v-model="marsheader">
           <el-radio :label="1">多边形面</el-radio>
@@ -22,14 +32,14 @@
 
         <div class="mars3d-item">
           <div class="mar3d-title">区域名称：</div>
-          <div class="mar3d-con" style="margin-left: 24px;">
+          <div class="mar3d-con">
             <input v-model="itemdata.texttitle" placeholder="填充文字" />
           </div>
         </div>
 
         <div class="mars3d-item">
           <div class="mar3d-title">边框颜色：</div>
-          <div class="mar3d-con">
+          <div class="mar3d-con distinction">
             <el-color-picker v-model="itemdata.fillColor" size="small" />
             <input v-model="itemdata.fillColor" placeholder="填充色" />
           </div>
@@ -37,7 +47,7 @@
 
         <div class="mars3d-item">
           <div class="mar3d-title">填充颜色：</div>
-          <div class="mar3d-con">
+          <div class="mar3d-con distinction">
             <el-color-picker v-model="itemdata.collColor" size="small" />
             <input v-model="itemdata.collColor" placeholder="填充色" />
           </div>
@@ -45,7 +55,7 @@
 
         <div class="mars3d-item">
           <div class="mar3d-title">文字颜色：</div>
-          <div class="mar3d-con">
+          <div class="mar3d-con distinction">
             <el-color-picker v-model="itemdata.textColor" size="small" />
             <input v-model="itemdata.textColor" placeholder="文字颜色" />
           </div>
@@ -63,7 +73,7 @@
         <div class="mars3d-item">
           <div class="mar3d-title">是否虚线：</div>
           <div class="mar3d-con">
-            <el-switch v-model="itemdata.swtichitem" active-color="#13ce66" inactive-color="#ccc"></el-switch>
+            <el-switch v-model="itemdata.swtichitem" active-color="#34c759" inactive-color="#ccc"></el-switch>
           </div>
         </div>
 
@@ -74,12 +84,7 @@
     </div>
 
     <!-- 经纬度数据 -->
-    <div class="mars3d-box" v-if="latlntswtich">
+    <div class="mars3djinwie-box" v-if="latlntswtich">
-      <div class="mars-3d-header">
-        <el-radio v-model="marsheader" label="1">经纬度数据</el-radio>
-        <!-- <i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i> -->
-      </div>
-
       <div class="mars3d-Controls">
         <div class="mars3d-item" style="margin-top: 50px;">
           <div class="mar3d-title">当前经度：</div>
@@ -699,14 +704,49 @@ export default {
 .mars3d-com {
   position: relative;
 
-  .mars3d-box {
+  .mars-3d-deleter {
+    width: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 15px;
+    height: 42px;
+    // border-left: 5px solid linear-gradient(180deg, #3170e2 0%, #52b2ee 100%);
+    // border-bottom: 2px solid #4faced;
+    background: rgba(11, 22, 51, 0.3);
+    background-image: url("~@/assets/images/mapbox/Group 31.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    background-size: 100% 100%;
+    color: #ffffff;
+    // box-sizing: border-box;
+
     position: absolute;
     right: 50px;
-    top: 50px;
+    top: 20px;
+  }
+
+  .mars3d-jinwei {
+    height: 220px !important;
+  }
+
+  .mars3djinwie-box {
+    height: 220px !important;
+  }
+
+  .mars3d-box,
+  .mars3djinwie-box {
+    position: absolute;
+    right: 50px;
+    top: 70px;
 
     width: 300px;
     height: 420px;
-    background: #3c444f;
+    background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
+    // background-position: center center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     z-index: 1000;
     padding: 0 15px 15px;
     display: flex;
@@ -722,7 +762,9 @@ export default {
       line-height: 45px;
       padding-left: 15px !important;
       padding-right: 15px !important;
-      background: #2a3653;
+      background-image: url("~@/assets/images/mapbox/Rectangle 22.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
       border: 1px solid #344c7b;
       position: absolute;
       left: 0;
@@ -761,13 +803,49 @@ export default {
           width: 100px;
         }
 
+        .distinction {
+          // background: skyblue;
+          display: flex;
+          // align-items: flex-start;
+          align-items: center;
+
+          input {
+            width: 140px !important;
+          }
+
+          ::v-deep .el-color-picker--small .el-color-picker__trigger {
+            width: 23px !important;
+            height: 23px !important;
+            margin-right: 8px !important;
+            margin-top: 5px !important;
+          }
+        }
+
         .mar3d-con {
           flex: 1;
           display: flex;
           align-items: center;
 
           .block {
-            width: 200px;
+            width: 180px;
+
+            ::v-deep .el-slider__runway {
+              background-image: url("~@/assets/images/mapbox/Rectangle 34624274.png") !important;
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+
+              .el-slider__bar {
+                background: transparent !important;
+              }
+
+              .el-slider__button {
+                // background: yellow !important;
+                background-image: url("~@/assets/images/mapbox/Group 1000015866.png") !important;
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                border: 0px !important;
+              }
+            }
           }
         }
       }

src/views/projectFront/quality/businessModule/checkPointer.vue

@@ -443,13 +443,14 @@
     <!-- <div class="dialog-map" v-if="MarsBoxSwtich">
        <MarsBoxarea ref="MarsBoxarea" />
     </div>-->
-
+    <div class="projectareaadmin">
       <el-dialog :title="maptypetitle" :visible.sync="MarsBoxSwtich" :fullscreen="true">
         <div v-if="MarsBoxSwtich">
           <MarsBoxarea ref="MarsBoxarea" />
         </div>
       </el-dialog>
     </div>
+  </div>
 </template>
 <script>
 // 全局组件
@@ -1122,6 +1123,26 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.projectareaadmin {
+  ::v-deep .el-dialog {
+    // background: skyblue !important;
+    // width: 1750px !important;
+    // height: 600px !important;
+    // margin-top: 50px !important;
+
+    .el-dialog__wrapper {
+      background: transparent !important;
+    }
+
+    .el-dialog__header {
+      display: none;
+    }
+
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+}
 .flex {
   display: flex;
 }