自定义模型修改按钮样式，综合分析面板添加定位按钮

src/components/common/BottomForm/CustomModelDialog.vue

@@ -27,14 +27,27 @@
         :label="item"
       ></el-checkbox>
     </el-checkbox-group>
+    <div
+      v-if="overlayBtnShow"
+      class="overlay-container"
+      @click="executeOverlay"
+    >
+      <div
+        class="overlay-container-icon"
+        :class="{ checked: btnChecked }"
+      ></div>
+      <div class="overlay-container-btn" :class="{ checked: btnChecked }">
+        叠置分析
+      </div>
+    </div>
+    <!-- <input
+      v-if="overlayBtnShow"
+      type="button"
+      value="叠置分析"
+      class="overlay-btn"
+      @click="executeOverlay"
+    /> -->
     <span slot="footer" class="dialog-footer">
-      <input
-        v-if="overlayBtnShow"
-        type="button"
-        value="叠置分析"
-        class="overlay-btn"
-        @click="executeOverlay"
-      />
       <el-button @click="clearDialogVisible()">取 消</el-button>
       <el-button type="primary" @click="saveModel()">保存模型</el-button>
     </span>
@@ -51,6 +64,7 @@ export default {
   components: {},
   data() {
     return {
+      btnChecked: false,
       outerDialogVisible: false,
       innerDialogVisible: false,
       overlayBtnShow: false,
@@ -157,7 +171,8 @@ export default {
     },
     // 执行叠置分析
     executeOverlay() {
-      alert("正在开发中");
+      this.btnChecked = !this.btnChecked;
+      // alert("正在开发中");
       // console.log("execute overlay");
     },
   },
@@ -200,16 +215,36 @@ export default {
   color: #e6e6e6;
   margin-right: 0;
 }
-.overlay-btn {
-  width: 80px;
-  height: 40px;
-  position: absolute;
-  left: 50px;
-  bottom: 22px;
+.overlay-container {
+  width: 100%;
+  height: 35px;
   border-radius: 4px;
   cursor: pointer;
   color: #e6e6e6;
   border: none;
-  background: rgba(129, 140, 164, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: 14px;
+  &-icon {
+    width: 25px;
+    height: 25px;
+    background: url("../../../assets/image/overlay_white.png") no-repeat center;
+    &.checked {
+      background: url("../../../assets/image/overlay.png") no-repeat center;
+    }
+  }
+  &-btn {
+    width: 80px;
+    height: 25px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.checked {
+      color: rgb(0, 170, 255);
+    }
+  }
 }
 </style>

src/views/ComprehensiveAnalysis.vue

@@ -85,25 +85,34 @@
                     node.parent.label === '我的模型'
                   "
                 >
-                  <el-checkbox v-model="node.checked">{{
-                    node.label
-                  }}</el-checkbox>
-                  <span style="position: relative; left: 30px">
-                    <el-button
-                      v-if="node.parent.label === '我的模型'"
-                      size="small"
-                      type="text"
-                      icon="el-icon-edit"
-                      @click="handleUpdate(node)"
-                    ></el-button>
-                    <el-button
-                      v-if="node.parent.label === '我的模型'"
-                      size="small"
-                      type="text"
-                      icon="el-icon-delete"
-                      @click="handleDelete(node)"
-                    ></el-button>
-                  </span>
+                  <el-checkbox v-model="node.checked" style="position: relative"
+                    >{{ node.label
+                    }}<span
+                      ><el-button
+                        size="normal"
+                        type="text"
+                        icon="el-icon-location"
+                        @click="locateEvent(node)"
+                        style="position: absolute; right: -30px; top: -12px;"
+                      ></el-button
+                    ></span>
+                    <span style="position: absolute;right: -85px;top: -8px;">
+                      <el-button
+                        v-if="node.parent.label === '我的模型'"
+                        size="small"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="handleUpdate(node)"
+                      ></el-button>
+                      <el-button
+                        v-if="node.parent.label === '我的模型'"
+                        size="small"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="handleDelete(node)"
+                      ></el-button>
+                    </span>
+                  </el-checkbox>
                 </template>
                 <template v-else>
                   <div
@@ -463,6 +472,9 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
+    locateEvent(node) {
+      console.log(node, "目前的节点");
+    },
     handleUpdate(node) {
       // console.log(node.data.data, "涉及的图层");
       // console.log(node.data.label);
@@ -779,13 +791,13 @@ export default {
       &-pin-btn {
         width: 30px;
         height: 30px;
-        background: url("../assets/image/pin_gray.png") no-repeat center;
+        background: url("../assets/image/panel_unlock.png") no-repeat center;
         position: absolute;
-        top: 3px;
+        top: 0;
         right: 3px;
         cursor: pointer;
         &.lock-style {
-          background: url("../assets/image/pin_blue.png") no-repeat center;
+          background: url("../assets/image/panel_lock.png") no-repeat center;
         }
       }
       &-input {
@@ -887,13 +899,13 @@ export default {
       & > div {
         width: 30px;
         height: 30px;
-        background: url("../assets/image/pin_gray.png") no-repeat center;
+        background: url("../assets/image/panel_unlock.png") no-repeat center;
         position: absolute;
-        top: 3px;
-        right: 3px;
+        top: 0;
+        left: 3px;
         cursor: pointer;
         &.lock-style {
-          background: url("../assets/image/pin_blue.png") no-repeat center;
+          background: url("../assets/image/panel_lock.png") no-repeat center;
         }
       }
     }