重新

Surpriseplus

2022-11-12 50f52beb0ed100105166f62027cd0b15e6b596dc

 src/components/mapsdk.vue

@@ -1,5 +1,13 @@
<template>
  <div id="mapdiv" class="mapdiv">
  <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">
@@ -155,14 +163,26 @@

<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,
      buffer: null,
      showBufferBoxDialog: false,
      showCoordLocalBoxDialog: false,
@@ -187,6 +207,7 @@
        pageSize: 10,
      },
      count: 0,
      selFrom: {},
      tableData: [],
      imagePoint: null,
      handler: null,
@@ -196,6 +217,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() {
@@ -318,24 +396,38 @@
    },
    //显示弹窗
    showChangeBox(res) {
      if (res.name == 'Query') {
        if (res.id == '6') {
        } else if (res.id == '7') {
        } else {
          this.showBufferBoxDialog = true;
        }
      } else if (res.name == 'Coord') {
        if (res.id == '1') {
          this.showCoordLocalBoxDialog = true;
        } else if (res.id == '2') {
          this.showToponymicLocalBoxDialog = true;
          this.getToponymicData();
        }
      } else if (res.name == 'Analysis') {
        if (res.id == '3') {
          this.showPathAnalysisBoxDialog = true;
        }
      switch (res.name) {
        case 'Query':
          if (res.id == '6') {
          } else if (res.id == '7') {
          } else {
            this.showBufferBoxDialog = true;
          }
          break;
        case 'Coord':
          if (res.id == '1') {
            this.showCoordLocalBoxDialog = true;
          } else if (res.id == '2') {
            this.showToponymicLocalBoxDialog = true;
            this.getToponymicData();
          }
          break;
        case 'Analysis':
          if (res.id == '3') {
            this.showPathAnalysisBoxDialog = true;
          }
          break;
        case 'exportLayer':
          if (res.id == 1) {
          } else if (res.id == 2) {
            this.changeMenulayer();
          }
          break;
      }
      // if (res.name == 'Query') {
      // } else if (res.name == 'Coord') {
      // } else if (res.name == 'Analysis') {
      // }
    },
    handleSizeChange(val) {
      this.listData.pageSize = val;
@@ -645,101 +737,184 @@
};
</script>

<style scoped>
.mapdiv {
<style scoped lang="less">
// .mapBox {
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   margin: 0;
//   padding: 0;

#mapdiv {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}
.bufferBox {
  width: 412px;
  height: 230px;
  z-index: 40;
  position: absolute;
  right: 1%;
  bottom: 1%;
}

.pathAnalysisBox {
  width: 412px;
  .toponymicLocalBox {
    width: 750px;
    height: 450x;
    z-index: 40;
    position: absolute;
    right: 1%;
    bottom: 1%;
  }
  .bufferBox {
    width: 412px;
    height: 230px;
    z-index: 40;
    position: absolute;
    right: 1%;
    bottom: 1%;
  }
  .coordLocalBox {
    width: 350px;
    height: 370px;
    z-index: 40;
    position: absolute;
    right: 1%;
    bottom: 1%;
  }
  .pathAnalysisBox {
    width: 412px;
    z-index: 40;
    position: absolute;
    right: 1%;
    bottom: 1%;
  }
  .exportBoxLayer {
    z-index: 40;
    position: absolute;
    top: 3%;
    left: 20%;
  }
  .exportMenuLayer {
    z-index: 40;
    position: absolute;
    top: 15%;
    left: 2%;
    width: 15%;
  }
  .box-body {
    padding: 18px;
    /deep/ .el-form-item__label {
      color: white !important;
    }
    /deep/ .el-input__inner {
      background: rgba(255, 255, 255, 0.2) !important;
      color: white !important;
    }

  z-index: 40;
  position: absolute;
  right: 1%;
  bottom: 1%;
}
.coordLocalBox {
  width: 350px;
  height: 370px;
  z-index: 40;
  position: absolute;
  right: 1%;
  bottom: 1%;
}
.toponymicLocalBox {
  width: 750px;
  height: 450x;
  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;
}
/deep/ .el-input__inner {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}
    /deep/.el-table,
    .el-table__expanded-cell {
      background-color: transparent;
      color: white;
    }

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  color: white;
}
    /deep/ .el-table tr {
      background-color: transparent !important;
    }
    /deep/ .el-table tbody tr:hover > td {
      background-color: rgba(255, 255, 255, 0.2) !important;
    }
    /deep/.el-table–enable-row-transition .el-table__body td,
    .el-table .cell {
      background-color: transparent !important;
    }
    /deep/ .el-table th.el-table__cell {
      background-color: transparent !important;
      color: white;
    }
    /deep/.el-pager li {
      background-color: transparent !important;
      color: white;
    }
    /deep/ .btn-prev {
      background-color: transparent !important;
    }
    /deep/ .btn-next {
      background-color: transparent !important;
      color: white !important;
    }
    /deep/ .el-pagination__total {
      color: white;
    }
    /deep/ .el-pagination__jump {
      color: white;
    }
  }

::v-deep .el-table tr {
  background-color: transparent !important;
  .box-card {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(32, 160, 255, 0.6);
    color: white;
  }
  .menu_Top {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 6%;
    padding: 1%;
    position: absolute;
    z-index: 40;
  }
  .menu_Popup {
    background: rgba(0, 0, 0, 0.6);
    width: 60%;
    height: 45%;

    left: 20%;
    bottom: 5%;
    position: absolute;
    z-index: 40;
  }
}
::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;
}
// }

// /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%;
}
@@ -757,23 +932,23 @@
  border-radius: 5px;
  cursor: pointer;
}
.center1 {
  right: 1%;
}
.right {
  position: absolute;
  top: 50px;
  right: 0;
  width: 20%;
  height: calc(100% - 50px);
// .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;
}
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
// }
// .CenDiv:hover {
//   border: 1px solid #409eff;
// }
.active {
  width: 100%;
  height: 100%;
@@ -790,4 +965,10 @@
  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>