月球大数据地理空间分析展示平台-【前端】-月球2期前端
1
WX
2023-07-12 1adfbb6d0382a02a31d2ac1fc94ddbaebe6196ca
1
已添加1个文件
已修改4个文件
385 ■■■■ 文件已修改
src/assets/js/Map/config.js 13 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/Map/index.js 33 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/layer/attributeList.vue 301 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/layer/layerManage.vue 20 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/layer/layerSet.vue 18 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/Map/config.js
@@ -1,8 +1,7 @@
//是否为生产环境
const isWeb = true;
const isWeb = false;
//是否为生产环境
const webUrl = isWeb ? "/web" : ""
const webUrl = isWeb ? "/web" : "";
//配置文件地址
const config = {
  mapMoon: webUrl + "/mapscreen/index.html",
@@ -22,9 +21,9 @@
  moonTerrain: "http://172.16.2.10:50001/sj_raster/v6/terrain_mesh/10013901/37",
  conditions: [
    ['=', '<>', 'like'],
    ['>=', '>', ' =', '<=', '<', '<>'],
    ['>=', '>', ' =', '<=', '<', '<>'],
  ]
    ["=", "<>", "like"],
    [">=", ">", " =", "<=", "<", "<>"],
    [">=", ">", " =", "<=", "<", "<>"],
  ],
};
export default config;
src/assets/js/Map/index.js
@@ -17,7 +17,7 @@
    //页面初始化
    this.earthCtrl = new SmartEarth.EarthCtrl("cesiumContainer", {
      StaticFileBaseUrl: config.StaticFileBaseUrl,
      ellipsoidCoordinates: 'MOON'
      ellipsoidCoordinates: "MOON",
    });
    // this.earthCtrl.environment.disableAllEffect();
@@ -36,27 +36,24 @@
    window.sgworld = earthCtrl;
    sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
    window.Viewer.imageryLayers.removeAll();
    //=======================
    // window.Viewer.imageryLayers.removeAll();
    //=======================
    // Viewer.scene.globe.showGroundAtmosphere = false;
    // server.AddTmsLayer(config.moonTms);
    server.AddWmtesLayer(config.moonWmts);
    var terrain = new Cesium.CesiumTerrainProvider({
      url: config.moonTerrain,
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    window.Viewer.terrainProvider = terrain;
    window.Viewer.scene.globe.terrainExaggeration = 1.0000001
    //=======================
    // server.AddWmtesLayer(config.moonWmts);
    // var terrain = new Cesium.CesiumTerrainProvider({
    //   url: config.moonTerrain,
    //   tilingScheme: new Cesium.GeographicTilingScheme({
    //     ellipsoid: Cesium.Ellipsoid.MOON,
    //   }),
    // });
    // window.Viewer.terrainProvider = terrain;
    // window.Viewer.scene.globe.terrainExaggeration = 1.0000001;
    //=======================
    // server.AddTmsLayer("http://172.16.2.10:50001/sj_raster/v6/service/10003901/1");
    // server.AddGeoWmsLayer();
    // var param = {
src/views/layer/attributeList.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,301 @@
<template>
  <div v-drag="true" class="spatialBox">
    <!--     v-resizable="'right, bottom'" -->
    <div class="spatialTitle">
      <label>空间查询</label>
      <el-icon @click="setSpatialClose" :size="20">
        <Close />
      </el-icon>
    </div>
    <div class="spatialContent">
      <div class="spatialTable">
        <el-table :data="tableData" style="width: 100%; height: 73%">
          <el-table-column
            v-for="(item, index) in attributeData"
            :key="index"
            :label="item.alias"
            :prop="item.field"
            show-overflow-tooltip
            align="center"
            :fit="true"
            width="120"
          ></el-table-column>
        </el-table>
        <div class="spatialBottom">
          <el-pagination
            v-model:current-page="listData.pageIndex"
            v-model:page-size="listData.pageSize"
            :page-sizes="[10, 20, 100, 200]"
            small="small"
            :disabled="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listData.count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits,
  nextTick,
} from "vue";
import config from "@/assets/js/Map/config";
import { User, Lock, Plus } from "@element-plus/icons-vue";
import { dataQuery_selectByPage, dataQuery_selectFields } from "@/api/api";
import { ElMessage } from "element-plus";
import store from "@/store";
const emits = defineEmits(["SETspatialClose"]);
const setSpatialClose = () => {
  emits("SETspatialClose", false);
};
const dialogVisible = ref(false);
const listData = ref({
  pageIndex: 1,
  pageSize: 10,
  count: 0,
  wkt: null,
  hasGeom: 1,
  name: "",
});
const condOption = ref([]);
const fieldOption = ref([]);
const attributeData = ref([]);
const tableData = ref([]);
const formSql = ref({
  field: "",
  type: "",
  value: "",
  cut: "",
});
const handleSizeChange = (res) => {
  listData.value.pageSize = res;
  setQueySpatialData();
};
const handleCurrentChange = (res) => {
  listData.value.pageIndex = res;
  setQueySpatialData();
};
//查询列表数据
const setQueySpatialData = async () => {
  const data = await dataQuery_selectByPage(listData.value);
  if (data.code != 200) {
    return ElMessage.error("空间查询失败");
  }
  listData.value.count = data.count;
  tableData.value = data.result;
};
const setQueySpatialFields = async () => {
  const data = await dataQuery_selectFields({ name: listData.value.name });
  if (data.code != 200) {
    return ElMessage.error("字段查询失败");
  }
  console.log(data);
  attributeData.value = data.result;
  console.log(attributeData.value);
  conditionChange(data.result[0]);
  setQueySpatialData();
};
const conditionChange = (res) => {
  formSql.value.field = res.field;
  formSql.value.cut = res.type;
  const type = res.type;
  var std = [];
  if (type == "text" || type == "blob") {
    std = config.conditions[0];
  } else if (type == "date" || type == "datetime") {
    std = config.conditions[2];
  } else {
    std = config.conditions[1];
  }
  var str = [];
  for (var i in std) {
    str.push({
      label: std[i],
      value: std[i],
    });
  }
  condOption.value = str;
  formSql.value.type = std[0];
};
//页面初始化
const startQueryData = () => {
  listData.value.wkt = store.state.spatialQueryData.wkt;
  listData.value.name = "lunarplacenane";
  listData.value.hasGeom = 1;
  //
  setQueySpatialFields();
};
onMounted(() => {
  startQueryData();
});
</script>
<style lang="less" scoped>
.spatialBox {
  width: 800px;
  height: 400px;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 5%;
  right: 5%;
  background: rgba(7, 8, 14, 0.8);
  border: 1px solid #d6e4ff;
  z-index: 10;
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  .spatialTitle {
    padding: 10px;
    width: calc(100% - 20px);
    height: 66px;
    color: #d6e4ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    label {
      font-size: 16px;
    }
  }
  .spatialContent {
    height: calc(100% - 10px);
    width: calc(100% - 20px);
    padding: 10px;
    .spatialTable {
      margin-top: 10px;
      width: 100%;
      height: calc(100% - 35px);
      position: relative;
      .el-table /deep/ .el-table__header-wrapper tr th {
        background-color: rgba(38, 47, 71, 1) !important;
        color: #d6e4ff;
      }
      // ä¿®æ”¹æ¯è¡Œæ ·å¼ï¼š
      .el-table /deep/ .el-table__row {
        background-color: rgba(38, 47, 71, 1) !important;
        color: #d6e4ff;
      }
      .el-table /deep/ .el-table__body tr.current-row > td {
        background-color: rgba(38, 47, 71, 1) !important;
      }
      .el-table /deep/ .el-table__body tr:hover > td {
        background-color: rgba(38, 47, 71, 1) !important;
      }
      // ä¿®æ”¹è¡¨æ ¼æ¯è¡Œè¾¹æ¡†çš„æ ·å¼ï¼š
      .el-table /deep/ td,
      .el-table /deep/ th.is-leaf {
        // border-bottom: 1px solid #409eff;
        // border-right: 1px solid #409eff;
      }
      .el-table /deep/ .el-table__cell {
        padding: 8px 0;
      }
      // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度:
      .el-table /deep/ .el-table__header tr,
      .el-table /deep/ .el-table__header th {
        height: 50px;
      }
      .el-table__body tr,
      .el-table__body td {
        height: 50px;
        padding: 0;
      }
      // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š
      .el-table--border::after,
      .el-table--group::after {
        width: 0;
      }
      .el-table::before {
        height: 0;
      }
    }
  }
  .spatialBottom {
    padding: 10px;
    height: 40px;
  }
  /deep/.el-pagination button {
    background: transparent;
    color: #d6e4ff;
  }
  /deep/.el-pager li {
    background: transparent;
    color: #d6e4ff;
  }
  /deep/.el-pager li.is-active {
    color: #409eff;
  }
  /deep/.el-pagination__total {
    color: #d6e4ff;
  }
  /deep/.el-pagination__goto {
    color: #d6e4ff;
  }
  /deep/.el-pagination__classifier {
    color: #d6e4ff;
  }
  /deep/.el-input.is-disabled .el-input__wrapper {
    background: transparent !important;
    color: #d6e4ff;
  }
  /deep/.el-input.is-disabled .el-input__inner {
    color: #d6e4ff !important;
  }
  /deep/ .el-dialog {
    background: rgba(7, 8, 14, 0.8);
    border: 1px solid #d6e4ff;
    z-index: 10;
    box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  }
  /deep/.el-dialog__title {
    color: #d6e4ff !important;
  }
}
</style>
<style lang="less">
.el-scrollbar {
  background: rgba(7, 8, 14) !important;
  border: 1px solid #4472cb;
  color: #d6e4ff !important;
  box-shadow: inset 0px 1px 40px 1px rgba(38, 47, 71, 1);
  // .el-dropdown-menu {
  //   background: rgba(7, 8, 14, 0.8) !important;
  // }
  .el-select-dropdown__item {
    color: #d6e4ff;
  }
  .el-select-dropdown__item:hover {
    background: rgba(38, 47, 71, 1) !important;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(38, 47, 71, 1) !important;
  }
}
.el-table__header-wrapper {
  border: 1px siolid #409eff;
}
</style>
src/views/layer/layerManage.vue
@@ -53,6 +53,7 @@
    </div>
  </div>
  <layer-set v-show="layerSetIsshow" @SETstate="SETstate"></layer-set>
  <attribute-list></attribute-list>
</template>
<script lang="ts" setup>
@@ -65,6 +66,7 @@
  defineEmits,
} from "vue";
import layerSet from "./layerSet";
import attributeList from "./attributeList";
const stretchValue = ref("");
const stretchOptions = [
@@ -160,24 +162,6 @@
};
const clickdropdown = (res) => {
  console.log(res);
};
const remove = (node: Node, data: Tree) => {
  const parent = node.parent;
  const children: Tree[] = parent.data.children || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index, 1);
  // menuOption.value = [...menuOption.value];
};
let id = 1000;
const append = (data: Tree) => {
  const newChild = { id: id++, name: "testtest", children: [] };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
  // console.log(data);
  // menuOption = [...menuOption];
  // console.log(menuOption);
};
</script>
src/views/layer/layerSet.vue
@@ -286,6 +286,24 @@
    console.log(selectedNodeId.value, "当前选中的节点");
  }
};
const remove = (node: Node, data: Tree) => {
  const parent = node.parent;
  const children: Tree[] = parent.data.children || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index, 1);
  // menuOption.value = [...menuOption.value];
};
let id = 1000;
const append = (data: Tree) => {
  const newChild = { id: id++, name: "testtest", children: [] };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
  // console.log(data);
  // menuOption = [...menuOption];
  // console.log(menuOption);
};
</script>
<style lang="less" scoped>