综合展示空间查询

Surpriseplus

2022-11-04 d3208016fbb567fb55186e0275fdd1b421ee3e0d

综合展示空间查询

 package.json

@@ -9,6 +9,7 @@
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
  },
  "dependencies": {
    "@turf/turf": "^6.5.0",
    "aws-sdk": "^2.963.0",
    "axios": "^0.21.1",
    "cesium": "^1.84.0",
@@ -24,6 +25,7 @@
    "ol": "^6.15.1",
    "sql.js": "^1.5.0",
    "sqlite3": "^5.0.2",
    "terraformer-wkt-parser": "^1.2.1",
    "vant": "^2.12.25",
    "vue": "^2.6.11",
    "vue-i18n": "^8.27.2",

 public/config/rollups.js

 public/index.html

@@ -13,6 +13,7 @@
  <script src="./SmartEarthSDK/Workers/TreeTool.js"></script>
  <script src="./config/config.js"></script>
  <script src="./config/rsa.min.js"></script>
  <script src="./config/rollups.js"></script>
  <style>
    .esriControlsBR {
      display: none;

 src/api/api.js

@@ -8,7 +8,7 @@
 */
import request from '@/utils/request';
import axios from 'axios';
import './rollups';

//公司后台
const service = axios.create({
  // baseURL: '/api', // api的base_url
@@ -425,20 +425,43 @@
export function select_Comprehensive_SelectWktById(params) {
  return request.get('/comprehensive/selectWktById', { params: params });
}
//上传Shp文件读取第一条记录的WKT;
export function inquiry_uploadShp(params) {
  return request.post('/inquiry/uploadShp', params);
}

export function comprehensive_uploadShp(params) {
  return request.post('/comprehensive/uploadShp', params);
//数据管理=>数据检索=>列表获取
export function dataQuerySelectByPage(params) {
  return request.get('/dataQuery/selectByPage', { params: params });
}

//数据管理=>数据检索=>根据ID查询WKT
export function dataQuerySelectWktById(params) {
  return request.get('/inquiry/selectWktById', { params: params });
}
//数据管理=>数据检索=>查询字段信息
export function inquiry_selectFields(params) {
  return request.get('/inquiry/selectFields', { params: params });
}
//数据管理=>数据检索=>查询值域信息
export function inquiry_selectDomains(params) {
  return request.get('/inquiry/selectDomains', { params: params });
}

//综合展示=>列表查询=>查询所有表
export function inquiry_SelectTabs(params) {
  return request.get('/inquiry/selectTabs', { params: params });
}

//请求站场点内容
export function querySitePoint(size, index, name) {
  return service.get(
    '/LFServer/SitePoint/Query?pageSize=' +
    size +
    '&pageIndex=' +
    (index - 1) +
    '&name=' +
    name
      size +
      '&pageIndex=' +
      (index - 1) +
      '&name=' +
      name
  );
}
//请求站场点数量
@@ -449,11 +472,11 @@
export function queryStationSeries(size, index, name) {
  return service.get(
    '/LFServer/StationSeries/Query?pageSize=' +
    size +
    '&pageIndex=' +
    (index - 1) +
    '&name=' +
    name
      size +
      '&pageIndex=' +
      (index - 1) +
      '&name=' +
      name
  );
}
//请求管道中心线数量
@@ -465,11 +488,11 @@
export function queryMarker(size, index, name) {
  return service.get(
    '/LFServer/Marker/Query?pageSize=' +
    size +
    '&pageIndex=' +
    (index - 1) +
    '&name=' +
    name
      size +
      '&pageIndex=' +
      (index - 1) +
      '&name=' +
      name
  );
}
//请求标桩数量
@@ -516,10 +539,12 @@
  ).toString();
}
export function decr(word) {
  return CryptoJS.AES.encrypt(
    CryptoJS.enc.Utf8.parse(word),
    CryptoJS.enc.Utf8.parse(base64Decode('QSNzX2xGX3NFcnZlX2sueQ==')),
    { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
  return CryptoJS.enc.Utf8.stringify(
    CryptoJS.AES.decrypt(
      word,
      CryptoJS.enc.Utf8.parse(base64Decode('QSNzX2xGX3NFcnZlX2sueQ==')),
      { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
    )
  ).toString();
}


 src/components/MapView/mapMenuPop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,294 @@
<template>
  <div class="menuPop">
    <div class="leftBox">
      <ul>
        <li
          v-for="(item, index) in option"
          @click="setTableChange(item)"
          class="leftBoxLi"
        >
          {{ item.tabDesc }}
        </li>
      </ul>
    </div>
    <div class="rightBox">
      <div class="rightTitle">
        <span>管道</span>
        <el-link :underline="false" class="boxClose"
          ><i class="el-icon-close"></i>
        </el-link>
      </div>
      <el-table :data="tableData" height="220">
        <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column label="定位" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-map-location"
              size="mini"
              @click="spaceLocation(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in attributeData"
          :key="index"
          :label="item.alias"
          :prop="item.field"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
      </el-table>
      <div class="rightPage">
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listPage.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listPage.pageCount"
        >
        </el-pagination> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  dataQuerySelectByPage,
  inquiry_selectDomains,
  inquiry_selectFields,
  dataQuerySelectWktById,
  decr,
} from '../../api/api.js';
export default {
  data() {
    return {
      listPage: {
        pageSize: 10,
        pageIndex: 1,
        pageCount: 0,
      },
      attributeData: [],
      option: [],
      tableData: [],
      listdata: {
        pageIndex: 1,
        pageSize: 10,
        name: null,
        srid: 4326,
        wkt: null,
        filter: null,
      },
      querylayer: null,
      queryTable: [],
      domainsLayer: [],
      optionx: [],
      imagePoint: null,
    };
  },
  methods: {
    startTableMssage() {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = 10;
      this.listdata.name = null;
      this.option = [];
    },
    setTableAll() {
      this.startTableMssage();
      this.listdata.wkt = this.$store.state.mapMenuShpFile;
      this.querylayer = this.$store.state.mapSpaceQueryLayer;
      this.option = this.$store.state.mapSpaceQueryLayer;
      this.listdata.name = this.option[0].entity;

      this.getTableDateHidder();
    },
    async getTableDateHidder() {
      const data = await inquiry_selectFields({ name: this.listdata.name });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      const data1 = await inquiry_selectDomains({ name: this.listdata.name });
      if (data1.code != 200) {
        this.$message.error('列表调用失败');
      }
      this.optionx = [];
      this.attributeData = [];
      var valadata = data.result;
      var laydomain = data1.result;

      for (var i in valadata) {
        if (valadata[i].showtype == 1) {
          if (
            valadata[i].domainNa != null &&
            valadata[i].domainNa != undefined
          ) {
            for (var j in laydomain) {
              if (laydomain[j].domName == valadata[i].domainNa) {
                valadata[i].domainNa = laydomain[j].codeDesc;
              }
            }
          }
          this.optionx.push(valadata[i]);
          this.attributeData.push(valadata[i]);
        }
      }
      this.getTableData();
    },
    async spaceLocation(index, row) {
      var param = {
        gid: row.gid,
        name: this.listdata.name,
      };
      const data = await dataQuerySelectWktById(param);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }

      var val1 = decr(data.result);
      if (val1) {
        if (this.imagePoint != null) {
          sgworld.Creator.DeleteObject(this.imagePoint);
          this.imagePoint = null;
        }
        var wkt = this.$wkt.parse(val1);
        this.setMapLoaction(wkt);
      }
    },
    setMapLoaction(res) {
      var coord = res.coordinates;
      if (res.type == 'Point') {
        this.imagePoint = sgworld.Creator.CreateLabel(
          { X: coord[0], Y: coord[1], Altitude: 2000 },
          '',
          SmartEarthRootUrl + 'Workers/image/mark.png',
          {
            disableDepthTestDistance: Infinity,
            scale: 0.8,
          },
          0,
          '巡检点'
        );
        sgworld.Navigate.flyToObj(this.imagePoint.item);
      }
    },
    setTableChange(res) {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = 10;
      this.listdata.name = res.entity;
      this.getTableDateHidder();
    },
    async getTableData() {
      this.tableData = [];

      const data = await dataQuerySelectByPage(this.listdata);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      debugger;
      var val_Data = data.result;
      for (var i in val_Data) {
        var valste = val_Data[i];
        for (var j in this.optionx) {
          if (
            this.optionx[j].domainNa != null &&
            this.optionx[j].domainNa != undefined
          ) {
            valste[this.optionx[j].field] = this.optionx[j].domainNa;
          }
        }
      }
      this.tableData = data.result;
    },
  },
  created() {
    this.setTableAll();
  },
  mounted() {
    this.$bus.$on('changeMapMenuTop', (res) => {
      if (res == 'true') {
        this.setTableAll();
      }
    });
  },
};
</script>

<style scoped lang="less">
.menuPop {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid gray;
  float: left;
  .leftBox {
    width: 20%;
    height: 100%;
    overflow: auto;
    float: left;
    border-right: 1px solid gray;
    li {
      color: white;
      line-height: 20px;
      border-bottom: 1px solid gray;
      padding: 5px;
      background: rgba(255, 255, 255, 0.2);
    }
    li:hover {
      color: #409eff;
      background: rgba(128, 128, 128, 0.2);
    }
  }

  .rightBox {
    width: calc(80% - 1px);
    height: 100%;
    float: left;
    .rightTitle {
      padding: 5px;
      color: white;
      width: 100%;
    }
    .rightPage {
      position: absolute;
      bottom: 10px;
      margin-left: 50px;
      /*不可点击的*/
    }
    .boxClose {
      float: right;
      margin-right: 20px;
      color: white;
    }
  }
}
</style>
<style lang="less">
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

/* è¡¨æ ¼å†…背景颜色 */
/deep/ .el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
  color: white;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* è¡¨æ ¼å†…背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
</style>
<style scoped lang="less"></style>

 src/components/MapView/mapMenuTop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,341 @@
<template>
  <div class="menuBox">
    <el-form :inline="true" :model="menuTopFrom" class="demo-form-inline">
      <el-form-item>
        <el-select
          v-model="menuTopFrom.queryLayer"
          :title="treeChange"
          placeholder="请选择..."
        >
          <el-option
            :value="menuTopFrom.queryLayer"
            style="overflow: auto; height: 100%"
          >
            <el-tree
              :data="layerData"
              show-checkbox
              node-key="id"
              ref="tree"
              accordion
              highlight-current
              :props="defaultProps"
            >
            </el-tree>
            <div style="margin-top: 5px">
              <el-button size="mini" plain @click="getCheckedNodes"
                >确认</el-button
              >
              <el-button
                size="mini"
                type="info"
                plain
                @click="resetCheckedNodes"
                >重置</el-button
              >
            </div>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="menuTopFrom.queryType" placeholder="请选择...">
          <el-option
            v-for="item in queryOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <input
          :accept="'.shp, .shx, .dbf, .prj'"
          style="display: none"
          type="file"
          name="file"
          id="getMenuTopFile"
          multiple="multiple"
          @change="setMenuTopFile()"
        />
        <el-link @click="getMenuTopFile" :underline="false"
          >导入选择范围</el-link
        >
      </el-form-item>
      <el-form-item>
        <el-button plain @click="getAttributeQuery">查询</el-button>
        <el-button type="info" plain>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import $ from 'jquery';
import { inquiry_SelectTabs, inquiry_uploadShp, encr } from '../../api/api.js';
import { getToken } from '@/utils/auth';
import * as turf from '@turf/turf';
export default {
  data() {
    return {
      menuTopFrom: {
        queryType: '',
      },
      treeChange: [],
      layerData: [
        {
          id: 1,
          tabDesc: '基础数据',
          value: 'BD',
          children: [],
        },
        {
          id: 2,
          tabDesc: '业务数据',
          value: 'BS',
          children: [],
        },
      ],

      queryOption: [
        {
          value: 'point',
          label: '点选',
        },
        {
          value: 'polyline',
          label: '线选',
        },
        {
          value: 'rectangle',
          label: '矩形',
        },
        {
          value: 'circle',
          label: '圆形',
        },
        {
          value: 'polygon',
          label: '多边形',
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'tabDesc',
      },
      graphicLayer: null,
    };
  },

  mounted() {
    // sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });

    this.menuTopFrom.queryType = 'rectangle';
    this.getAllTable();
  },
  methods: {
    async getAllTable() {
      const data = await inquiry_SelectTabs();
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      var option = data.result;

      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        if (option[i].ns == 'bd') {
          this.layerData[0].children.push(val_Data);
        } else {
          this.layerData[1].children.push(val_Data);
        }
      }
    },
    //获取选择树的节点
    getCheckedNodes() {
      var valTree = this.$refs.tree.getCheckedNodes();
      if (valTree.length == 0) return;

      this.menuTopFrom.queryLayer = valTree[0].tabDesc;
      for (var i = 0; i < valTree.length; i++) {
        this.treeChange.push(valTree[i]);
      }
    },
    //清空树选中的节点
    resetCheckedNodes() {
      this.treeChange = [];
      this.menuTopFrom.queryLayer = null;
      this.$refs.tree.setCheckedKeys([]);
    },
    //导入shp文件
    async setMenuTopFile() {
      var val = document.getElementById('getMenuTopFile').files;
      if (!val || !val.length) return;
      var formData = new FormData();
      var exts = ['.shp', '.shx', '.dbf', '.prj'];
      var count = 0;
      for (var i = 0; i < val.length; i++) {
        var name = val[i].name.toLocaleLowerCase();
        var ext = name.substring(name.lastIndexOf('.'));
        if (exts.indexOf(ext) > -1) {
          count++;
          formData.append(val[i].name, val[i]); // fs.files[i].name,file
        }
      }
      if (count != 4) {
        alert('ShapeFile文件选择不全！');
        return;
      }
      $.ajax(BASE_URL + '/inquiry/uploadShp?token=' + getToken(), {
        type: 'post',
        data: formData,
        async: true,
        cache: false,
        processData: false,
        contentType: false,
        success: (rs) => {
          if (rs.code !== 200) {
            return this.$message.error('用户角色请求错误');
          }
          this.$store.state.mapMenuShpFile = rs.result;
        },
        error: (e) => {
          console.log(e);
        },
      });
    },
    getMenuTopFile() {
      $('#getMenuTopFile').click();
    },
    //查询
    getAttributeQuery() {
      //清空标绘
      sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
      sgworld.Creator.SimpleGraphic.clear();
      var val = document.getElementById('getMenuTopFile').files;
      if (!val || !val.length) {
        sgworld.Creator.createSimpleGraphic(
          this.menuTopFrom.queryType,
          {},
          (entity) => {
            this.setTurfGeometry(entity);
          }
        );
      } else {
        this.showMapMenuPop();
      }
    },
    setTurfGeometry(res) {
      var that = this;
      switch (this.menuTopFrom.queryType) {
        case 'point': //点
          var val = that.setCartesianToEightFour(res.position.getValue());
          that.setTurfCircle([val.lng, val.lat], 10);
          break;
        case 'polyline': //线
          var polyline = res.polyline.positions.getValue();

          that.setTurfPolyOrLine(polyline, 'polyline');
          break;
        case 'rectangle': //矩形
          let rectangle = res.rectangle.coordinates.getValue();
          var result = new Cesium.Rectangle.subsample(
            rectangle,
            Cesium.Ellipsoid.WGS84,
            rectangle.height
          );
          that.setTurfPolyOrLine(result, 'rectangle');

          break;
        case 'circle': //圆
          var val = that.setCartesianToEightFour(res.position.getValue());
          var radius = res.ellipse.semiMajorAxis.getValue();
          that.setTurfCircle([val.lng, val.lat], radius);
          break;
        case 'polygon': //多边形
          var polygon = res.polygon.hierarchy.getValue().positions;
          that.setTurfPolyOrLine(polygon, 'polygon');
          break;
      }
    },
    setTurfCircle(position, radius) {
      var options = {
        steps: 10,
        units: 'miles',
        properties: { foo: 'bar' },
      };
      var circle = turf.circle(position, radius, options);
      this.setJonToWKT(circle);
    },
    setTurfPolyOrLine(res, type) {
      var restVal,
        std = [];
      for (var i in res) {
        var line_data = this.setCartesianToEightFour(res[i]);
        std.push([line_data.lng, line_data.lat]);
      }
      if (type == 'polyline') {
        var line = turf.lineString(std, { name: 'polyline' });
        restVal = turf.buffer(line, 10, { units: 'miles' });
        console.log('line', restVal);
      } else if (type == 'rectangle') {
        var ste = this.setCartesianToEightFour(res[0]);
        std.push([ste.lng, ste.lat]);
        restVal = turf.polygon([std], { name: 'rectangle' });
      } else if (type == 'polygon') {
        var ste = this.setCartesianToEightFour(res[0]);
        std.push([ste.lng, ste.lat]);
        restVal = turf.polygon([std], { name: 'polygon' });
      }
      this.setJonToWKT(restVal);
    },

    setJonToWKT(res) {
      var jsonToWkt = this.$wkt.convert(res.geometry);
      this.$store.state.mapMenuShpFile = encr(jsonToWkt);
      this.showMapMenuPop();
    },
    showMapMenuPop() {
      console.log(this.treeChange);
      this.$store.state.mapSpaceQueryLayer = this.treeChange;
      if (
        this.$store.state.mapPopBoolean != true &&
        this.$store.state.mapPopBoxFlag != '1'
      ) {
        this.$store.state.mapPopBoolean = true;
        this.$store.state.mapPopBoxFlag = '1';
      }
      this.$bus.$emit('changeMapMenuTop', 'true');
      //清空inputFile
      var file = document.getElementById('getMenuTopFile');
      file.outerHTML = file.outerHTML;
    },
    setCartesianToEightFour(res) {
      var std = {};
      let ellipsoid = Viewer.scene.globe.ellipsoid;
      let cartographic = ellipsoid.cartesianToCartographic(res);
      std.lat = Cesium.Math.toDegrees(cartographic.latitude);
      std.lng = Cesium.Math.toDegrees(cartographic.longitude);
      std.alt = cartographic.height;
      return std;
    },
  },
};
</script>

<style lang="less">
.menuBox {
  width: 98%;
  height: 100%;
}
.unit-option {
  height: auto;
  line-height: 1;
  padding: 0;
  background-color: #fff;
}
.unit-tree {
  padding: 4px 20px;
  font-weight: 400;
}
</style>

 src/components/MapView/mapSpacePop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,386 @@
<template>
  <div class="menuPop">
    <div class="rightTitle">
      <span>管道</span>
      <el-link @click="closeSpaceBox" :underline="false" class="boxClose"
        ><i class="el-icon-close"></i>
      </el-link>
    </div>
    <div style="padding: 5px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select
            v-model="formInline.name"
            style="width: 150px"
            placeholder="...."
            @change="changeValue($event)"
          >
            <el-option
              v-for="item in optionx"
              :key="item.field"
              :label="item.alias"
              :value="item.field"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.region"
            style="width: 100px"
            placeholder="...."
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            style="width: 150px"
            v-model="formInline.input"
            placeholder="请输入..."
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="setSpaceTableLayer">查詢</el-button>
          <el-button plain @click="restSpacePopLayer">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="centTable">
        <el-table :data="tableData" height="220" style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column label="定位" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-map-location"
                size="mini"
                @click="spaceLocation(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in attributeData"
            :key="index"
            :label="item.alias"
            :prop="item.field"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
        </el-table>
      </div>

      <div class="bottomPage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listdata.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  dataQuerySelectByPage,
  dataQuerySelectWktById,
  inquiry_selectFields,
  inquiry_selectDomains,
  decr,
} from '../../api/api.js';
export default {
  computed: {
    storeTime() {
      return this.$store.state.mapSpaceQueryLayer;
    },
  },
  data() {
    return {
      count: 0,
      listdata: {
        pageIndex: 1,
        pageSize: 10,
        name: null,
        srid: 4326,
        wkt: null,
        filter: null,
      },
      formInline: {
        name: '',
        region: '',
      },
      attributeData: [],
      optionx: [],
      options: [],
      options1: [
        {
          value: '=',
          label: '=',
        },
        {
          value: 'like',
          label: 'like',
        },
        {
          value: '<>',
          label: '<>',
        },
      ],
      options2: [
        {
          value: '=',
          label: '=',
        },
        {
          value: '<>',
          label: '<>',
        },
        {
          value: '<=',
          label: '<=',
        },
        {
          value: '<',
          label: '<',
        },
        {
          value: '>=',
          label: '>=',
        },
        {
          value: '>',
          label: '>',
        },
      ],
      value: '',
      tableData: [],
      spaceLayer: '',
      imagePoint: null,
      domainsLayer: null,
    };
  },
  watch: {
    async storeTime(index) {
      this.spaceLayer = index;
      this.getDomainsLayer();
      // this.getTableselectFields();
      // this.restSpacePopLayer();
    },
  },
  created() {
    this.spaceLayer = this.$store.state.mapSpaceQueryLayer;
    // this.showSpacePopLayer();
    //   this.getTableselectFields();
    this.getDomainsLayer();
  },

  methods: {
    closeSpaceBox() {
      if (this.imagePoint != null) {
        sgworld.Creator.DeleteObject(this.imagePoint);
        this.imagePoint = null;
      }
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
    },
    setSpaceTableLayer() {
      this.setListDataStart();
      this.getSpaceTableLayer();
    },
    restSpacePopLayer() {
      this.formInline.input = null;
      this.showSpacePopLayer();
    },
    changeValue(value) {
      var obj = {};
      obj = this.optionx.find(function (item) {
        return item.value === value;
      });
      if (obj.type == 'serial' || obj.type == 'int') {
        this.options = this.options2;
      } else {
        this.options = this.options1;
      }
      this.formInline.region = this.options[0].value;
    },
    setListDataStart() {
      this.listdata.pageSize = 10;
      this.listdata.pageIndex = 1;
      this.tableData = [];
    },
    //初始化查询条件
    showSpacePopLayer() {
      let val_date = this.optionx[0];
      this.formInline.name = val_date.field;
      if (val_date.type == 'serial' || val_date.type == 'int') {
        this.options = this.options2;
      } else {
        this.options = this.options1;
      }
      this.formInline.region = this.options[0].value;
      this.getSpaceTableLayer();
    },
    //初始化查询表的字段
    async getTableselectFields() {
      const data = await inquiry_selectFields({ name: this.spaceLayer });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      this.optionx = [];
      var valadata = data.result;
      for (var i in valadata) {
        if (valadata[i].showtype == 1) {
          if (
            valadata[i].domainNa != null &&
            valadata[i].domainNa != undefined
          ) {
            valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa);
          }
          this.optionx.push(valadata[i]);
          this.attributeData.push(valadata[i]);
        }
      }
      this.showSpacePopLayer();
    },
    getMatchDomainNa(res) {
      var std = null;
      for (var i in this.domainsLayer) {
        if (this.domainsLayer[i].domName == res) {
          return (std = this.domainsLayer[i].codeDesc);
        }
      }
      return std;
    },
    //初始化查询阈值表
    async getDomainsLayer() {
      const data = await inquiry_selectDomains({ name: this.spaceLayer });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      this.domainsLayer = data.result;
      this.setListDataStart();
      this.getTableselectFields();
    },
    //初始化查询表格信息
    async getSpaceTableLayer() {
      this.listdata.name = this.spaceLayer;
      if (this.formInline.input == undefined || this.formInline.input == null) {
        this.listdata.filter = null;
      } else {
        this.listdata.filter =
          this.formInline.name +
          ' ' +
          this.formInline.region +
          ' ' +
          this.formInline.input;
      }
      const data = await dataQuerySelectByPage(this.listdata);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      var val_Data = data.result;
      this.count = data.count;

      for (var i in val_Data) {
        var valste = val_Data[i];
        for (var j in this.optionx) {
          if (
            this.optionx[j].domainNa != null &&
            this.optionx[j].domainNa != undefined
          ) {
            valste[this.optionx[j].field] = this.optionx[j].domainNa;
          }
        }
      }
      this.tableData = data.result;
    },
    async spaceLocation(index, row) {
      var param = {
        gid: row.gid,
        name: this.spaceLayer,
      };
      const data = await dataQuerySelectWktById(param);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }

      var val1 = decr(data.result);
      if (val1) {
        if (this.imagePoint != null) {
          sgworld.Creator.DeleteObject(this.imagePoint);
          this.imagePoint = null;
        }
        var wkt = this.$wkt.parse(val1);
        this.setMapLoaction(wkt);
      }
    },
    handleSizeChange(val) {
      this.listdata.pageSize = val;
      this.getSpaceTableLayer();
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getSpaceTableLayer();
    },
    setMapLoaction(res) {
      var coord = res.coordinates;
      if (res.type == 'Point') {
        this.imagePoint = sgworld.Creator.CreateLabel(
          { X: coord[0], Y: coord[1], Altitude: 2000 },
          '',
          SmartEarthRootUrl + 'Workers/image/mark.png',
          {
            disableDepthTestDistance: Infinity,
            scale: 0.8,
          },
          0,
          '巡检点'
        );
        sgworld.Navigate.flyToObj(this.imagePoint.item);
      }
    },
  },
};
</script>

<style lang="less">
.menuPop {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid gray;
  float: left;
  .rightTitle {
    padding: 5px;
    color: white;
    width: 100%;
    .boxClose {
      float: right;
      margin-right: 20px;
      color: white;
    }
  }

  .bottomPage {
    position: absolute;
    bottom: 1%;
  }
}
</style>

 src/components/MapView/mapSpaceTop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,123 @@
<template>
  <div class="spaceBox">
    <el-select v-model="menuTopFrom.queryLayer" placeholder="请选择...">
      <el-option
        :value="menuTopFrom.queryLayer"
        style="overflow: auto; height: 100%"
      >
        <el-tree
          :data="layerData"
          :props="defaultProps"
          :show-checkbox="true"
          :check-on-click-node="true"
          :check-strictly="true"
          node-key="id"
          @check="menuTreeCheck"
          ref="treeForm"
          :default-expanded-keys="[1]"
          accordion
        >
        </el-tree>
        <div style="margin-top: 5px">
          <el-button size="mini" plain @click="getCheckedNodes">确认</el-button>
          <el-button size="mini" type="info" plain @click="resetCheckedNodes"
            >重置</el-button
          >
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { inquiry_SelectTabs } from '../../api/api.js';
export default {
  data() {
    return {
      menuTopFrom: {
        queryLayer: '',
      },
      layerData: [
        {
          id: 1,
          tabDesc: '基础数据',
          value: 'BD',
          children: [],
        },
        {
          id: 2,
          tabDesc: '业务数据',
          value: 'BS',
          children: [],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'tabDesc',
      },
      mapSpaceQueryLayer: null,
    };
  },
  mounted() {
    this.getAllTable();
  },
  methods: {
    async getAllTable() {
      const data = await inquiry_SelectTabs();
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      var option = data.result;

      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        if (option[i].ns == 'bd') {
          this.layerData[0].children.push(val_Data);
        } else {
          this.layerData[1].children.push(val_Data);
        }
      }
    },
    getCheckedNodes() {
      this.$store.state.mapSpaceQueryLayer = this.mapSpaceQueryLayer;
      this.$store.state.mapPopBoolean = true;
      this.$store.state.mapPopBoxFlag = '2';
    },
    resetCheckedNodes() {
      this.menuTopFrom.queryLayer = null;
      this.$refs.treeForm.setCheckedKeys([]);
    },
    menuTreeCheck(node, list) {
      if (list.checkedNodes.length > 0) {
        this.menuTopFrom.queryLayer = node.tabDesc;
        this.mapSpaceQueryLayer = node.entity;
        if (list.checkedKeys.length == 2) {
          //单选实现
          this.$refs.treeForm.setCheckedKeys([node.id]);
        }
      } else {
        this.menuid = null;
      }
    },
  },
};
</script>

<style scoped lang="less">
.spaceBox {
  width: 98%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
<style lang="less">
.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
  display: inline-block;
}
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
  display: none;
}
</style>

 src/components/mapsdk.vue

@@ -1,166 +1,192 @@
<template>
  <div id="mapdiv" class="mapdiv">
    <div class="bufferBox" v-if="showBufferBoxDialog">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>缓冲区分析</span>
          <div style="float: right; cursor: pointer">
            <i class="el-icon-close" @click="closeBufferBox(1)"></i>
  <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">
            <span>缓冲区分析</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(1)"></i>
            </div>
          </div>
        </div>
        <div class="box-body">
          <el-form ref="form" :model="bufFrom" label-width="100px">
            <el-form-item label="缓冲半径(ç±³):">
              <el-input v-model="bufFrom.val"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="addBuffer(1)" type="info">点</el-button>
              <el-button @click="addBuffer(2)" type="info">线</el-button>
              <el-button @click="addBuffer(3)" type="info">面</el-button>
              <el-button @click="clearBuffer" type="info">清除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>坐标定位</span>
          <div style="float: right; cursor: pointer">
            <i class="el-icon-close" @click="closeBufferBox(2)"></i>
          <div class="box-body">
            <el-form ref="form" :model="bufFrom" label-width="100px">
              <el-form-item label="缓冲半径(ç±³):">
                <el-input v-model="bufFrom.val"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="addBuffer(1)" type="info">点</el-button>
                <el-button @click="addBuffer(2)" type="info">线</el-button>
                <el-button @click="addBuffer(3)" type="info">面</el-button>
                <el-button @click="clearBuffer" type="info">清除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="box-body">
          <el-form ref="form" :model="coordFrom" label-width="50px">
            <el-form-item label="经度:">
              <el-input v-model="coordFrom.lon"></el-input>
            </el-form-item>
            <el-form-item label="纬度:">
              <el-input v-model="coordFrom.lat"></el-input>
            </el-form-item>
            <el-form-item label="高度:">
              <el-input v-model="coordFrom.height"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="setCoordLocal" type="info">定位</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>地名定位</span>
          <div style="float: right; cursor: pointer">
            <i class="el-icon-close" @click="closeBufferBox(3)"></i>
        </el-card>
      </div>
      <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>坐标定位</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(2)"></i>
            </div>
          </div>
        </div>
        <div class="box-body">
          <el-form :model="comprehensive" :inline="true" label-width="50px">
            <el-form-item label="地名:">
              <el-input
                style="width: 200px"
                v-model="comprehensive.name"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="info">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" height="200px" style="width: 100%">
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="70px"
            />
            <el-table-column prop="name" align="center" label="定位">
              <template slot-scope="scope">
                <el-button
                  @click="handleLocation(scope.$index, scope.row)"
                  size="small"
                  icon="el-icon-place"
                ></el-button>
              </template>
            </el-table-column>
            <el-table-column prop="name" align="center" label="地名">
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px" class="pagination_box">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listData.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="listData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          <div class="box-body">
            <el-form ref="form" :model="coordFrom" label-width="50px">
              <el-form-item label="经度:">
                <el-input v-model="coordFrom.lon"></el-input>
              </el-form-item>
              <el-form-item label="纬度:">
                <el-input v-model="coordFrom.lat"></el-input>
              </el-form-item>
              <el-form-item label="高度:">
                <el-input v-model="coordFrom.height"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="setCoordLocal" type="info">定位</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
    <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>路径分析</span>
          <div style="float: right; cursor: pointer">
            <i class="el-icon-close" @click="closeBufferBox(4)"></i>
        </el-card>
      </div>
      <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>地名定位</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(3)"></i>
            </div>
          </div>
        </div>
        <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-link
                :underline="false"
                @click="showMouseLeftClick(1)"
                style="margin-left: 10px"
                ><i style="color: white" class="el-icon-plus"></i
              ></el-link>
            </el-form-item>
            <el-form-item label="纬度:">
              <el-input style="width: 300px" v-model="pathFrom.lat"></el-input>
              <el-link
                :underline="false"
                @click="showMouseLeftClick(2)"
                style="margin-left: 10px"
                ><i style="color: white" class="el-icon-plus"></i
              ></el-link>
            </el-form-item>
            <el-form-item>
              <el-button @click="showMouseLeftClick(3)" type="info"
                >查询</el-button
          <div class="box-body">
            <el-form :model="comprehensive" :inline="true" label-width="50px">
              <el-form-item label="地名:">
                <el-input
                  style="width: 200px"
                  v-model="comprehensive.name"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="info">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" height="200px" style="width: 100%">
              <el-table-column
                align="center"
                type="index"
                label="序号"
                width="70px"
              />
              <el-table-column prop="name" align="center" label="定位">
                <template slot-scope="scope">
                  <el-button
                    @click="handleLocation(scope.$index, scope.row)"
                    size="small"
                    icon="el-icon-place"
                  ></el-button>
                </template>
              </el-table-column>
              <el-table-column prop="name" align="center" label="地名">
              </el-table-column>
            </el-table>
            <div style="margin-top: 10px" class="pagination_box">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listData.pageIndex"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="listData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count"
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div
      @click="changeMenulayer"
      class="center CenDiv"
      :class="{ center1: centerFlag }"
    >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
      <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>路径分析</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(4)"></i>
            </div>
          </div>
          <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-link
                  :underline="false"
                  @click="showMouseLeftClick(1)"
                  style="margin-left: 10px"
                  ><i style="color: white" class="el-icon-plus"></i
                ></el-link>
              </el-form-item>
              <el-form-item label="纬度:">
                <el-input
                  style="width: 300px"
                  v-model="pathFrom.lat"
                ></el-input>
                <el-link
                  :underline="false"
                  @click="showMouseLeftClick(2)"
                  style="margin-left: 10px"
                  ><i style="color: white" class="el-icon-plus"></i
                ></el-link>
              </el-form-item>
              <el-form-item>
                <el-button @click="showMouseLeftClick(3)" type="info"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
      <div
        id="cenBg"
        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
      ></div>
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
      >
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></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,149 +730,226 @@
};
</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;
  z-index: 40;
  position: absolute;
  right: 1%;
  bottom: 1%;

  #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%;
    }
    .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%;
    }
    .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;
      }

      /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;
      }
    }

    .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;
    }
  }
}

.pathAnalysisBox {
  width: 412px;
// /deep/
// /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;
}
// ::v-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;
}
// ::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);

::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;
// }

  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>

 src/main.js

@@ -7,6 +7,7 @@
import axios from './http';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
import WKT from 'terraformer-wkt-parser';
// import locale from 'element-ui/lib/locale/lang/zh-CN'
import 'element-ui/lib/theme-chalk/index.css';
Vue.prototype.$echarts = echarts;
@@ -14,6 +15,7 @@
Vue.use(ElementUI, { locale });
Vue.prototype.$http = axios;
Vue.prototype.$bus = new Vue();
Vue.prototype.$wkt = WKT;
Vue.config.productionTip = false;

new Vue({

 src/store/index.js

@@ -31,6 +31,12 @@
    currentPerms: '',
    //综合展示
    syntiesis: {},
    mapMenuBoolean: false,
    mapPopBoolean: false,
    mapPopBoxFlag: null,
    mapMenuBoxFlag: null,
    mapSpaceQueryLayer: null,
    mapMenuShpFile: null,
  },
  mutations: {
    //获取权限合集

 src/views/Synthesis/inquire.vue

@@ -1,16 +1,5 @@
<template>
  <div class="box">
    <!-- <input  type="file" name="file" id="getF" @change="clickF()"></input> -->
    <input
      :accept="'.shp, .shx, .dbf, .prj'"
      style="display: none"
      type="file"
      name="file"
      id="getF"
      multiple="multiple"
      @change="setQueryFile()"
    />

    <ul>
      <li
        style="margin-left: 20px"
@@ -21,18 +10,6 @@
          <div :class="item.class" class="backimge5"></div>
        </div>
        <div class="div_li">{{ $t(item.name) }}</div>
      </li>
      <li v-if="analyStatus.upload" style="margin-left: 20px">
        <div class="divli">
          <div class="backimge5"><i class="el-icon-upload2"></i></div>
        </div>
        <div class="div_li">上传</div>
      </li>
      <li v-if="analyStatus.download" style="margin-left: 20px">
        <div class="divli">
          <div class="backimge5"><i class="el-icon-download"></i></div>
        </div>
        <div class="div_li">下载</div>
      </li>
    </ul>
  </div>
@@ -102,7 +79,7 @@
  methods: {
    showViewMenu(res) {
      if (res.cnName != '查询') return;
      console.log('查询', res.tag);

      switch (res.tag) {
        case '/upload':
          this.analyStatus.upload = true;
@@ -113,14 +90,19 @@
      }
    },
    changeIquery(res) {
      if (res.id == '7') {
        this.getQueryFile();
      } else {
        var val = {
          name: 'Query',
          id: res.id,
        };
        this.$bus.$emit('mapChangeBox', val);
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = null;
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
      switch (res.id) {
        case '6':
          this.$store.state.mapMenuBoolean = true;
          this.$store.state.mapMenuBoxFlag = '2';
          break;
        case '7':
          this.$store.state.mapMenuBoolean = true;
          this.$store.state.mapMenuBoxFlag = '1';
          break;
      }
    },
    getQueryFile() {
@@ -145,7 +127,7 @@
        return;
      }
      const data = await comprehensive_uploadShp(formData);
      debugger;

      // $.ajax(BASE_URL + '/comprehensive/uploadShp?token=' + getToken(), {
      //   type: 'post',
      //   data: formData,