顶部菜单，左侧菜单，图图层管理界面

Surpriseplus

2023-06-05 7540886ea5a498085052104c054cf9f0853310c9

顶部菜单，左侧菜单，图图层管理界面

 src/assets/img/leftBtn/ͼ²ã1 (1) ¿½±´.png

 src/assets/img/leftBtn/ͼ²ã1 (1).png

 src/assets/img/leftBtn/ÐÎ×´ 1 ¿½±´.png

 src/assets/img/leftBtn/ÐÎ×´ 1.png

 src/assets/img/leftBtn/ÐÎ×´ 2 ¿½±´.png

 src/assets/img/leftBtn/ÐÎ×´ 2.png

 src/assets/img/leftBtn/ÐÎ×´ 3 ¿½±´.png

 src/assets/img/leftBtn/ÐÎ×´ 3.png

 src/assets/img/leftBtn/ÐÎ×´ 4 ¿½±´.png

 src/assets/img/leftBtn/ÐÎ×´ 4.png

 src/assets/img/leftBtn/ÐÎ×´ 8 ¿½±´.png

 src/assets/img/leftBtn/ÐÎ×´ 8.png

 src/assets/img/topBtn/ÏòÉÏ1.png

 src/assets/img/topBtn/ͼ²ã 14 ¿½±´ 3.png

 src/assets/img/topBtn/ͼ²ã 31 ¿½±´.png

 src/assets/img/topBtn/ͼ²ã 31.png

 src/assets/img/topBtn/ͼ²ã 5 ¿½±´ 6.png

 src/assets/img/topBtn/ͼ²ã 7 ¿½±´ 5.png

 src/assets/img/topBtn/ͼ²ã 8 ¿½±´ 2.png

 src/assets/img/topBtn/ͼ²ã 8.png

 src/assets/img/topBtn/ͼ±êbj.png

 src/assets/img/topBtn/Ô²½Ç¾ØÐÎ 12 ¿½±´ 5.png

 src/assets/img/topBtn/Ô²½Ç¾ØÐÎ 12 ¿½±´ 6.png

 src/assets/img/topBtn/ÐÎ×´ 3.png

 src/assets/img/topBtn/ÐÎ×´ 5.png

 src/assets/img/topBtn/ÎÄ×Ö±ê×¢.png

 src/assets/img/topBtn/ÍÖÔ² 3 ¿½±´ 16.png

 src/assets/img/topBtn/ÍÖÔ² 3 ¿½±´ 20.png

 src/assets/img/topBtn/ÍÖÔ² 3 ¿½±´ 23.png

 src/assets/img/topBtn/ÍÖÔ² 5 ¿½±´ 3.png

 src/assets/img/topBtn/ÍÖÔ² 6.png

 src/assets/img/topBtn/ÍÖÔ² 7 ¿½±´ 2.png

 src/assets/img/topBtn/ÍÖÔ² 8 ¿½±´ 8.png

 src/assets/img/topBtn/Çå³ý.png

 src/assets/img/topBtn/ʸÁ¿ÖÇÄܶÔÏó ¿½±´ 3.png

 src/assets/img/topBtn/¾ØÐÎ 13 ¿½±´.png

 src/assets/img/topBtn/¾ØÐÎ 8 ¿½±´ 11.png

 src/assets/img/topBtn/¸ß³Ì²âÁ¿.png

 src/assets/img/¾ØÐÎ 1.png

 src/assets/js/Map/menuData.js

@@ -3,199 +3,184 @@
        {
            id: 'a1',
            name: "漫游",
            class: 'twoMenu_imge21',
            imgUrl: '图层 8 æ‹·è´ 2.png',
            level: 1,
            children: [
                {
                    id: 'a2',
                    name: "点漫游",
                    class: 'twoMenu_imge21',
                    imgUrl: '椭圆 6.png',
                    level: 2,
                },
                {
                    id: 'a3',
                    name: "线路漫游",
                    class: 'twoMenu_imge21',
                    imgUrl: '椭圆 7 æ‹·è´ 2.png',
                    level: 2,
                }
            ],
        },
        {
            id: 'b1',
            name: "测量",
            class: 'twoMenu_imge21',
            name: "量测",
            imgUrl: '图层 5 æ‹·è´ 6.png',
            level: 1,
            children: [
                {
                    id: 'b2',
                    name: "表面距离",
                    class: 'twoMenu_imge21',
                    imgUrl: '图层 31.png',
                    level: 2,
                },
                {
                    id: 'b3',
                    name: "平面面积",
                    class: 'twoMenu_imge21',
                    imgUrl: '矩形 13 æ‹·è´.png',
                    level: 2,
                }, {
                    id: 'b4',
                    name: "高程测量",
                    class: 'twoMenu_imge21',
                    imgUrl: '高程测量.png',
                    level: 2,
                },
                {
                    id: 'b5',
                    name: "垂直高度",
                    class: 'twoMenu_imge21',
                    imgUrl: '图层 31 æ‹·è´.png',
                    level: 2,
                }
            ],
        },
        {
            id: 'c1',
            name: "标绘",
            class: 'twoMenu_imge21',
            imgUrl: '矩形 8 æ‹·è´ 11.png',
            level: 1,
            children: [{
                id: 'c2',
                name: "点",
                class: 'twoMenu_imge21',
                imgUrl: '椭圆 5 æ‹·è´ 3.png',
                level: 2,
            },
            {
                id: 'c3',
                name: "文字",
                class: 'twoMenu_imge21',
                imgUrl: '文字标注.png',
                level: 2,
            }, {
                id: 'c4',
                name: "线",
                class: 'twoMenu_imge21',
                imgUrl: '椭圆 3 æ‹·è´ 16.png',
                level: 2,
            },
            {
                id: 'c5',
                name: "矩形",
                class: 'twoMenu_imge21',
                imgUrl: '椭圆 3 æ‹·è´ 20.png',
                level: 2,
            }, {
                id: 'c6',
                name: "多边形",
                class: 'twoMenu_imge21',
                imgUrl: '椭圆 3 æ‹·è´ 23.png',
                level: 2,
            }],
        },
        {
            id: 'd1',
            name: "分析",
            class: 'twoMenu_imge21',
            imgUrl: '矢量智能对象 æ‹·è´ 3.png',
            level: 1,
            children: [{
                id: 'd2',
                name: "等高线分析",
                class: 'twoMenu_imge21',
                imgUrl: '椭圆 8 æ‹·è´ 8.png',
                level: 2,
            },
            {
                id: 'd3',
                name: "坡度分析",
                class: 'twoMenu_imge21',
                imgUrl: '圆角矩形 12 æ‹·è´ 5.png',
                level: 2,
            }, {
                id: 'd4',
                name: "土方量计算",
                class: 'twoMenu_imge21',
                imgUrl: '图层 14 æ‹·è´ 3.png',
                level: 2,
            },
            {
                id: 'd5',
                name: "影像对比",
                class: 'twoMenu_imge21',
                imgUrl: '圆角矩形 12 æ‹·è´ 6.png',

                level: 2,
            }, {
                id: 'd6',
                name: "阴影分析",
                class: 'twoMenu_imge21',
                imgUrl: '图层 8.png',
                level: 2,
            }],
        },
        {
            id: 'e1',
            class: 'twoMenu_imge21',
            name: "截图",
            imgUrl: '形状 5.png',
            name: "快照",
            level: 1,
        },
        {
            id: 'f1',
            name: "查询",
            class: 'twoMenu_imge21',
            name: "空间查询",
            imgUrl: '形状 3.png',
            level: 1,
            children: [],
        },
        {
            id: 'g1',
            class: 'twoMenu_imge21',
            name: "定位",
            imgUrl: '图层 7 æ‹·è´ 5.png',
            name: "坐标定位",
            level: 1,
        },
        {
            id: 'k1',
            class: 'twoMenu_imge21',
            imgUrl: '清除.png',
            level: 1,
            name: "清除",
        },
    ],
    toolMenu: null,
    toolFlag: null,
    colorAll: {

    },
    menuTools(res) {
        this.clearTools();
        this.toolFlag = res.id;
        switch (res.id) {
            case 'a2'://点漫游
                this.pointRoam();
                break;
            case 'a3'://线漫游
                this.lineRoam();
                break;
            case 'b2'://表面距离
                this.surfaceDistance();
                break;
            case 'b3'://平面面积
                this.planeDistance();
                break;
            case 'b4'://高程测量
                this.heightMeasure();
                break;
            case 'b5'://垂直高度
                this.verticalHeight();
                break;
    leftMenu: [
        {
            id: 'l1',
            name: '图层管理',
            imgUrl: '图层1 (1).png',
            checkImgUrl: '图层1 (1) æ‹·è´.png'
        },
        {
            id: 'l2',
            name: '标绘查询',
            imgUrl: '形状 4.png',
            checkImgUrl: '形状 4 æ‹·è´.png'
        }, {
            id: 'l3',
            name: '专题图制作',
            imgUrl: '形状 2.png',
            checkImgUrl: '形状 2 æ‹·è´.png'
        }, {
            id: 'l4',
            name: '工具箱',
            imgUrl: '形状 1.png',
            checkImgUrl: '形状 1 æ‹·è´.png'
        }, {
            id: 'l5',
            name: '全屏',
            imgUrl: '形状 8.png',
            checkImgUrl: '形状 8 æ‹·è´.png'
        }, {
            id: 'l6',
            name: '底图切换',
            imgUrl: '形状 3.png',
            checkImgUrl: '形状 3 æ‹·è´.png'
        }
    },
    //清除方法
    clearTools() {
        if (this.toolFlag) {
            switch (this.toolFlag) {
                case 'a2':

                    break;
                case 'a3':

                    break;
                case 'b2':
                case 'b3':
                case 'b4':
                case 'b5':

                    break;
            }
            this.toolFlag = null;
            this.toolMenu = null;
        }
    },

    //垂直高度
    verticalHeight() {

    },
    //高程测量
    heightMeasure() {

    },
    //平面面积
    planeDistance() {

    },
    //表面距离
    surfaceDistance() {

    },
    //点漫游
    pointRoam() {

    },
    //线漫游
    lineRoam() {
    ]


    }
}
export default menuData;

 src/assets/js/Map/menuTool.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,80 @@
const menuTool = {
    toolMenu: null,
    toolFlag: null,
    colorAll: {
    },
    menuTools(res) {
        this.clearTools();
        this.toolFlag = res.id;
        switch (res.id) {
            case 'a2'://点漫游
                this.pointRoam();
                break;
            case 'a3'://线漫游
                this.lineRoam();
                break;
            case 'b2'://表面距离
                this.surfaceDistance();
                break;
            case 'b3'://平面面积
                this.planeDistance();
                break;
            case 'b4'://高程测量
                this.heightMeasure();
                break;
            case 'b5'://垂直高度
                this.verticalHeight();
                break;
        }
    },
    //垂直高度
    verticalHeight() {

    },
    //高程测量
    heightMeasure() {

    },
    //平面面积
    planeDistance() {

    },
    //表面距离
    surfaceDistance() {

    },
    //点漫游
    pointRoam() {

    },
    //线漫游
    lineRoam() {


    },

    //清除方法
    clearTools() {
        if (this.toolFlag) {
            switch (this.toolFlag) {
                case 'a2':

                    break;
                case 'a3':

                    break;
                case 'b2':
                case 'b3':
                case 'b4':
                case 'b5':

                    break;
            }
            this.toolFlag = null;
            this.toolMenu = null;
        }
    },


}
export default menuTool;

 src/components/menus.vue

@@ -7,7 +7,7 @@
        class="logo"
      />
      <div class="logo_name">
        <h3>数字月球系统</h3>
        <h3>月球大数据地理空间分析展示平台</h3>
        <img
          src="../assets/img/logob.png"
          alt=""
@@ -16,52 +16,27 @@
      </div>
    </div>
    <div class="menus_box">
      <div class="menus_btn">
        <div
          class="menus_btn_btn1"
          :class="{ CDactive: btnstate.CDbj }"
          @click="isactive('CDbj')"
        ></div>
        <div
          class="menus_btn_btn2"
          :class="{ SSactive: btnstate.SSbj }"
          @click="isactive('SSbj')"
        ></div>
        <div
          class="menus_btn_btn3"
          :class="{ SZactive: btnstate.SZbj }"
          @click="isactive('SZbj')"
        ></div>
        <div
          class="menus_btn_btn4"
          :class="{ TCactive: btnstate.TCbj }"
          @click="isactive('TCbj')"
        ></div>
      </div>
      <div class="menus_content">
        <div class="menus_content_TC">
          <div class="menus_content_TC_h">
            <i></i>
            <h3>数字月球系统</h3>
          </div>
          <div class="menus_content_TC_c">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
            />
          </div>
        </div>
      <div
        class="imgBox"
        v-for="(item,i) in menuOptions"
        @click="setMenuClick(item)"
      >
        <img
          v-if="checkMenuFlag != item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/'+item.imgUrl)"
        >
        <img
          v-if="checkMenuFlag == item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/'+item.checkImgUrl)"
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import { layerList } from "@/api/api";
import {
  ref,
  onMounted,
@@ -70,203 +45,67 @@
  defineProps,
  defineEmits,
} from "vue";
const defaultProps = {
  children: "children",
  label: "label",
};
const data = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
];
let btnstate = reactive({
  CDbj: false,
  SSbj: false,
  SZbj: false,
  TCbj: false,
});
const isactive = (e: string) => {
  for (const k in btnstate) {
    btnstate[k] = false;
    if (k == e) {
      btnstate[k] = true;
    }
import menuData from "@/assets/js/Map/menuData";
const menuOptions = ref([]);
const checkMenuFlag = ref("");
const setMenuClick = (res) => {
  if (checkMenuFlag.value && checkMenuFlag.value == res.id) {
    checkMenuFlag.value = null;
  } else {
    checkMenuFlag.value = res.id;
  }
};
const getList = async () => {
  // const data = await layerList();
  console.log(data);
};
getList();
onMounted(() => {
  menuOptions.value = menuData.leftMenu;
});
</script>
<style lang="less" scoped>
.menus {
  // height: ;
  position: absolute;
  top: 23px;
  left: 10px;
}
.logo_box {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding-left: 6px;
  margin-bottom: 14px;
  .logo {
    width: 68px;
    height: 68px;
  }
  .logo_name {
    margin-left: 18px;
    h3 {
      font-size: 36px;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
    }
    .logo_name_b {
      text-align: center;
      width: 208px;
      height: 9px;
    }
  }
}
.menus_box {
  height: 70vh;
  display: flex;
  .menus_btn {
    height: 100%;
    width: 72px;
    padding-top: 60px;
    box-sizing: border-box;
    background: url("../assets/img/menusbtnb.png") no-repeat center;
    background-size: 100% 100%;
  top: 27px;
  left: 14px;
  .logo_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: space-evenly;
    margin-right: 6px;
    .menus_btn_btn1 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/cd.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 50px;
      cursor: pointer;
    .logo {
      width: 68px;
      height: 68px;
    }
    .menus_btn_btn2 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/ss.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 50px;
      cursor: pointer;
    }
    .menus_btn_btn3 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/sz.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 50px;
      cursor: pointer;
    }
    .menus_btn_btn4 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/tc.png") no-repeat center;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .CDactive {
      background: url("../assets/img/cdl.png") no-repeat center;
      background-size: 100% 100%;
    }
    .SSactive {
      background: url("../assets/img/ssl.png") no-repeat center;
      background-size: 100% 100%;
    }
    .SZactive {
      background: url("../assets/img/szl.png") no-repeat center;
      background-size: 100% 100%;
    }
    .TCactive {
      background: url("../assets/img/tcl.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .menus_content {
    height: 100%;
  }
  .menus_content_TC {
    width: 359px;
    height: 100%;
    .menus_content_TC_h {
      padding: 12px;
      background: #171e2e;
      box-shadow: 0px 10px 10px 0px #262f47,
        0px 20px 20px 0px rgba(8, 12, 19, 0.3);
      display: flex;
      align-items: center;
    .logo_name {
      margin-left: 14px;

      i {
        display: inline-block;
        width: 11px;
        height: 18px;
        background: url("../assets/img/jiantouZ.png") no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;
        margin-right: 10px;
      }
      h3 {
        font-size: 18px;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        font-family: Source Han Sans CN;
        line-height: 9px;
      }
      .logo_name_b {
        text-align: center;
        width: 100%;
        height: 9px;
      }
    }
    .menus_content_TC_c {
    }
  }
}
.el-tree {
  background: transparent;
  /deep/ .el-tree-node__label {
    color: #ffffff;
  .menus_box {
    background: url("../assets/img/矩形 1.png");
    left: 7px;
    position: absolute;
    top: 105px;
    width: 71px;
    height: 628px;
    padding: 36px 0px;
    .imgBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 52px;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>

 src/components/topBtn.vue

@@ -1,52 +1,49 @@
<template>
  <div class="top_btn">
    <div>
      <ul>
        <li
          class="firstMenu"
          v-for="(item,i) in menuOptions"
          @mousemove="setFirstLevlMenu(item,1)"
          @mouseleave="setFirstLevlMenu(item,2)"
        >
          <div
            class="menuDiv"
            :title="item.name"
            :class="{ 'border_left' : i == 0, 'border_right' :i == (menuOptions.length -1)}"
            @click="setMenuClick(item)"
    <div class="menu_Box">
      <div
        class="first_Menu"
        :title="item.name"
        v-for="(item,i) in menuOptions"
        @click="setMenuClick(item)"
      >
        <div class="First_img">
          <img
            class="imgIcon"
            :src="require('../assets/img/topBtn/'+item.imgUrl)"
          >
        </div>
        <div
          class="menu_second"
          v-if="item.children && item.children.length > 0"
          v-show="menuFlag == item.id"
        >
          <div class="upTop">
            <div class="upimg"></div>
          </div>
          <div class="second_Box">
            <div
              class="menuFirstImage"
              :class="item.class"
              class="second_Menu"
              :title="res.name"
              v-for="(res,j) in item.children"
              @click="setMenuClick(res)"
              :class="{'second_Menu_click':checkFlag == res.id}"
            >
              <img
                class="imgIcon"
                style="margin-bottom: 5px;"
                :src="require('../assets/img/topBtn/'+res.imgUrl)"
              >
              <div>
                {{ res.name }}
              </div>

            </div>
          </div>
          <ul
            @mouseleave="setFirstLevlMenu(item,2)"
            v-show="item.children &&menuFlag == item.id"
          >
            <li v-for="(res,j) in item.children">
              <div
                class="tmenuDiv"
                :title="res.name"
                @click="setMenuClick(res)"
              >
                <div class="tmenuImg">
                  <div
                    class="menuFirstImage"
                    :class="res.class"
                  >

                  </div>
                </div>
                <div class="tmenulabel">
                  {{ res.name }}
                </div>
              </div>
            </li>
        </div>

          </ul>
        </li>
      </ul>
      </div>
    </div>
  </div>
</template>
@@ -61,21 +58,27 @@
  defineEmits,
} from "vue";
import menuData from "@/assets/js/Map/menuData.js";
import menuTool from "@/assets/js/Map/menuTool.js";
const menuFlag = ref(null);
const menuOptions = ref([]);
const setFirstLevlMenu = (res, flag) => {
  if (flag == 1) {
    menuFlag.value = res.id;
  } else {
    menuFlag.value = null;
  }
};
const checkFlag = ref(null);
const setMenuClick = (res) => {
  if (res.children && res.children.length > 0) {
    return;
  if (res.children) {
    if (menuFlag.value && menuFlag.value == res.id) {
      menuFlag.value = null;
      checkFlag.value = null;
    } else {
      menuFlag.value = res.id;
    }
  } else {
    if (res.level == 1) {
      checkFlag.value = null;
    } else if (res.level == 2) {
      checkFlag.value = res.id;
    }
    menuFlag.value = null;
    menuTool.menuTools(res);
  }
  menuFlag.value = null;
  menuData.menuTools(res);
};
onMounted(() => {
  menuOptions.value = menuData.topMenu;
@@ -86,68 +89,70 @@
.top_btn {
  position: absolute;
  top: 23px;
  right: 25px;
  right: 0px;
  display: flex;
  cursor: pointer;
  .menu_Box {
    margin-right: 104px;
    display: flex;
    .imgIcon {
      width: 30px;
      height: 30px;
    }
    .first_Menu {
      min-width: 50px;
      height: 50px;
      margin-right: 7px;
      background: url("../assets/img/topBtn/图标bj.png") no-repeat;
      background-size: 100% 100%;
      .First_img {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .upTop {
      width: 100%;
      height: 10px;
      display: flex;
      justify-content: center;
      .upimg {
        width: 15px;
        height: 100%;
        background: url("../assets/img/topBtn/向上1.png") no-repeat;
      }
    }
    .menu_second {
      margin-top: 0px;
    }
    .second_Box {
      background: #07080e;
      box-shadow: inset 0px 0px 15px 0px rgb(38, 47, 71, 0.68);

  .menuDiv {
    width: 72px;
    padding: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(1, 10, 28, 1);
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
  }
  .border_left {
    border-radius: 5px 0px 0px 5px;
    border-left: 1px solid gray;
  }
  .border_right {
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid gray;
  }
  .tmenuDiv {
    width: 70px;
    padding: 10px 0px;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    background: rgba(1, 10, 28, 1);
  }
  .tmenuDiv :hover {
    color: #409eff;
  }
  .tmenuImg {
    width: 100%;
      .second_Menu {
        background: #07080e;
        box-shadow: inset 0px 0px 8px 0px rgb(38, 47, 71, 0.68);
        margin-top: 1px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        padding: 10px 10px;
        font-weight: 300;
        color: #d1e0ff;
        line-height: 7px;
        text-align: center;
        border: 1px solid none;
      }

    display: flex;
    justify-content: center;
  }
  .tmenulabel {
    width: 100%;

    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    margin-top: 2px;
  }
  .firstMenu {
    float: left;
  }
  .menuScond {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .menuFirstImage {
    width: 15px;
    height: 15px;
  }
  .twoMenu_imge21 {
    background: url("../assets/img/cd.png") no-repeat 100% 100%;
      .second_Menu_click {
        background: #171e2e;
        border: 1px solid;
        border-image: linear-gradient(47deg, #397bc9, #77a5cd, #397bc9) 1 1;
        box-shadow: 0px 0px 6px 0px #080c13,
          0px 7px 8px 0px rgba(38, 47, 71, 0.68);
      }
    }
  }
}
</style>

 src/main.ts

@@ -9,11 +9,13 @@
import "./assets/css/global.css";
//自适应
import "amfe-flexible/index";
import Particles from "particles.vue3";
//粒子特效
import VueParticles from "vue-particles";
import Drag from "./utils/drag";
createApp(App)
  .use(ElementPlus)
  .use(store)
  .use(router)
  .use(VueParticles)
  .use(Drag)
  .mount("#app");

 src/utils/drag.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,46 @@
const drag = {
  mounted(el: HTMLElement) {
    let moveEl = el as HTMLElement;
    const mouseDown = (e: MouseEvent) => {
      //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
      // console.log(e.clientX, e.clientY, "-----起始", el.offsetLeft);
      let X = e.clientX - el.offsetLeft;
      let Y = e.clientY - el.offsetTop;
      const move = (e: MouseEvent) => {
        // èŽ·å–拖拽元素的位置
        let left = e.clientX - X;
        let top = e.clientY - Y;

        if (left <= 0) {
          left = 0;
        } else if (
          left >=
          document.documentElement.clientWidth - el.offsetWidth
        ) {
          left = document.documentElement.clientWidth - el.offsetWidth;
        }

        // if (top <= 0) {
        //   top = 0
        // } else if (top > document.documentElement.clientHeight - el.offsetHeigh) {
        //   top = document.documentElement.clientHeight - el.offsetHeight
        // }

        el.style.left = left + "px";
        el.style.top = top + "px";
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    moveEl.addEventListener("mousedown", mouseDown);
  },
};

const directives = {
  install: function (app: any) {
    app.directive("drag", drag);
  },
};
export default directives;

 src/views/Index.vue

@@ -7,6 +7,9 @@
    <menus></menus>
    <bottom-btn></bottom-btn>
    <top-btn></top-btn>
    <layer-manage>

    </layer-manage>
  </div>
</template>

@@ -19,11 +22,17 @@
  defineProps,
  defineEmits,
} from "vue";

//左侧菜单
import menus from "@/components/menus.vue";
//底部菜单
import bottomBtn from "@/components/bottomBtn.vue";
//顶部菜单
import topBtn from "@/components/topBtn.vue";
//图层管理页面
import layerManage from "@/views/layer/layerManage.vue";

import InitMap from "@/assets/js/Map/index.js";

let map;
var viewer;
const init = () => {

 src/views/layer/layerManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,37 @@
<template>
  <div
    v-drag
    class="layerBox"
  >
    <div class="layerTitle">

    </div>

  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits,
} from "vue";
</script>

<style lang="less" scoped>
.layerBox {
  position: absolute;
  top: 135px;
  left: 100px;
  width: 359px;
  height: 680px;
  background: rgba(7, 8, 14, 0.8);
  .layerTitle {
    width: 100%;
    height: 42px;
  }
}
</style>