菜单

lxl

2022-11-07 df007d0b7f677240d9ab9b01e6bebdbad0762a0f

 src/components/mapsdk.vue

@@ -1,5 +1,14 @@
<template>
  <div id="mapdiv" class="mapdiv">
  <div class="mapBox">
    <div id="mapdiv">
      <div class="menu_Top" v-if="$store.state.mapMenuBoolean">
        <map-menu-top v-if="$store.state.mapMenuBoxFlag == '1'" />
        <map-space-top v-if="$store.state.mapMenuBoxFlag == '2'" />
      </div>
      <div class="menu_Popup" v-if="$store.state.mapPopBoolean">
        <map-menu-pop v-if="$store.state.mapPopBoxFlag == '1'" />
        <map-space-pop v-if="$store.state.mapPopBoxFlag == '2'" />
      </div>
    <div class="bufferBox" v-if="showBufferBoxDialog">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
@@ -114,7 +123,10 @@
        <div class="box-body">
          <el-form ref="form" :model="pathFrom" label-width="50px">
            <el-form-item label="经度:">
              <el-input style="width: 300px" v-model="pathFrom.lon"></el-input>
                <el-input
                  style="width: 300px"
                  v-model="pathFrom.lon"
                ></el-input>
              <el-link
                :underline="false"
                @click="showMouseLeftClick(1)"
@@ -123,7 +135,10 @@
              ></el-link>
            </el-form-item>
            <el-form-item label="纬度:">
              <el-input style="width: 300px" v-model="pathFrom.lat"></el-input>
                <el-input
                  style="width: 300px"
                  v-model="pathFrom.lat"
                ></el-input>
              <el-link
                :underline="false"
                @click="showMouseLeftClick(2)"
@@ -151,16 +166,27 @@
      ></div>
    </div>
  </div>
  </div>
</template>

<script>
import $ from 'jquery';
import mapMenuTop from './MapView/mapMenuTop.vue';
import mapMenuPop from './MapView/mapMenuPop.vue';
import mapSpaceTop from './MapView/mapSpaceTop.vue';
import mapSpacePop from './MapView/mapSpacePop.vue';
import {
  select_Comprehensive_ByPageAndCount,
  select_Comprehensive_SelectWktById,
} from '../api/api';
export default {
  name: '',
  components: {
    mapMenuTop,
    mapMenuPop,
    mapSpaceTop,
    mapSpacePop,
  },
  data() {
    return {
      centerFlag: false,
@@ -188,6 +214,7 @@
        pageSize: 10,
      },
      count: 0,
      selFrom: {},
      tableData: [],
      imagePoint: null,
      handler: null,
@@ -197,6 +224,63 @@

      isActive: false,
      isMenuLayer: true,
      selFrom: {},
      selectTree: null,

      menuList: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      }, //树绑定对象
    };
  },
  mounted() {
@@ -646,27 +730,33 @@
};
</script>

<style scoped>
.mapdiv {
<style scoped lang="less">
.mapBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}
.bufferBox {
  width: 412px;
  height: 230px;

  #mapdiv {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: absolute;

    .toponymicLocalBox {
      width: 750px;
      height: 450x;
  z-index: 40;
  position: absolute;
  right: 1%;
  bottom: 1%;
}

.pathAnalysisBox {
    .bufferBox {
  width: 412px;

      height: 230px;
  z-index: 40;
  position: absolute;
  right: 1%;
@@ -680,22 +770,16 @@
  right: 1%;
  bottom: 1%;
}
.toponymicLocalBox {
  width: 750px;
  height: 450x;
    .pathAnalysisBox {
      width: 412px;

  z-index: 40;
  position: absolute;
  right: 1%;
  bottom: 1%;
}
.box-card {
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(32, 160, 255, 0.6);
  color: white;
}
.box-body {
  padding: 18px;
}
/deep/ .el-form-item__label {
  color: white !important;
}
@@ -704,91 +788,168 @@
  color: white !important;
}

::v-deep .el-table,
      /deep/.el-table,
.el-table__expanded-cell {
  background-color: transparent;
  color: white;
}

::v-deep .el-table tr {
      /deep/ .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table tbody tr:hover > td {
      /deep/ .el-table tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
::v-deep .el-table–enable-row-transition .el-table__body td,
      /deep/.el-table–enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent !important;
}
::v-deep .el-table th.el-table__cell {
      /deep/ .el-table th.el-table__cell {
  background-color: transparent !important;
  color: white;
}
::v-deep .el-pager li {
      /deep/.el-pager li {
  background-color: transparent !important;
  color: white;
}
::v-deep .btn-prev {
      /deep/ .btn-prev {
  background-color: transparent !important;
}
::v-deep .btn-next {
      /deep/ .btn-next {
  background-color: transparent !important;
  color: white !important;
}
::v-deep .el-pagination__total {
      /deep/ .el-pagination__total {
  color: white;
}
::v-deep .el-pagination__jump {
      /deep/ .el-pagination__jump {
  color: white;
}
.center {
  left: 1%;
}
.CenDiv {
  position: absolute;
  bottom: 1%;
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
.center1 {
  right: 1%;
}
.right {
  position: absolute;
  top: 50px;
  right: 0;
  width: 20%;
  height: calc(100% - 50px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
    .box-card {
      background-color: rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(32, 160, 255, 0.6);
      color: white;
}
.CenDiv:hover {
  border: 1px solid #409eff;
}
.active {
    .menu_Top {
      background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
      height: 6%;
      padding: 1%;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
      z-index: 40;
}
.menuLayer {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
    .menu_Popup {
      background: rgba(0, 0, 0, 0.6);
      width: 60%;
      height: 45%;

      left: 20%;
      bottom: 5%;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
      z-index: 40;
}
  }
}

// /deep/
// /deep/ .el-input__inner {
//   background: rgba(255, 255, 255, 0.2) !important;
//   color: white !important;
// }

// ::v-deep .el-table,
// .el-table__expanded-cell {
//   background-color: transparent;
//   color: white;
// }

// ::v-deep .el-table tr {
//   background-color: transparent !important;
// }
// ::v-deep .el-table tbody tr:hover > td {
//   background-color: rgba(255, 255, 255, 0.2) !important;
// }
// ::v-deep .el-table–enable-row-transition .el-table__body td,
// .el-table .cell {
//   background-color: transparent !important;
// }
// ::v-deep .el-table th.el-table__cell {
//   background-color: transparent !important;
//   color: white;
// }
// ::v-deep .el-pager li {
//   background-color: transparent !important;
//   color: white;
// }
// ::v-deep .btn-prev {
//   background-color: transparent !important;
// }
// ::v-deep .btn-next {
//   background-color: transparent !important;
//   color: white !important;
// }
// ::v-deep .el-pagination__total {
//   color: white;
// }
// ::v-deep .el-pagination__jump {
//   color: white;
// }
// .center {
//   left: 1%;
// }
// .CenDiv {
//   position: absolute;
//   bottom: 1%;
//   height: 40px;
//   width: 60px;
//   z-index: 101;
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
//   box-shadow: 3px 3px 6px #666;
//   border: 1px solid rgba(204, 204, 204, 0.76);
//   border-radius: 5px;
//   cursor: pointer;
// }
// .center1 {
//   right: 1%;
// }
// .right {
//   position: absolute;
//   top: 50px;
//   right: 0;
//   width: 20%;
//   height: calc(100% - 50px);

//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
// }
// .CenDiv:hover {
//   border: 1px solid #409eff;
// }
// .active {
//   width: 100%;
//   height: 100%;
//   background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
//   position: absolute;
//   background-size: 100% 100%;
//   border-radius: 5px;
// }
// .menuLayer {
//   width: 100%;
//   height: 100%;
//   background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
//   position: absolute;
//   background-size: 100% 100%;
//   border-radius: 5px;
// }

// .menuSelect .el-input__inner {
//   background: rgba(255, 255, 255, 0.2) !important;
//   color: white !important;
//   border: 1px solid rgba(255, 255, 255, 0.2) !important;
// }
</style>