出图接口对接调试

Surpriseplus

2023-09-08 be73e1692ebe367d45a0d6459402a5a3ac7edf81

出图接口对接调试

 package.json

@@ -16,9 +16,11 @@
    "axios": "^1.3.4",
    "default-passive-events": "^2.0.0",
    "element-plus": "^2.3.0",
    "jquery": "^3.7.1",
    "js-base64": "^3.7.5",
    "jsencrypt": "^3.3.2",
    "mitt": "^3.0.1",
    "moment": "^2.29.4",
    "ol": "^7.5.1",
    "particles.vue3": "^2.9.3",
    "terraformer-wkt-parser": "^1.2.1",

 src/api/api.js

@@ -86,3 +86,7 @@
}


//在线制图=>分页查询
export function exportSelectByPage(params) {
  return request.get('/export/selectByPage', { params: params });
}

 src/assets/js/Map/menuTool.js

@@ -17,6 +17,7 @@
    polyline: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"),
    polygon: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"),
  },
  exportSquare: null,
  topTools(res) {
    this.toolFlag = res.id;
    switch (res.id) {
@@ -366,6 +367,7 @@
    var east1 = ss[2];
    var north1 = ss[3];
    var south1 = ss[1];
    this.exportSquare = ss;
    var geometry = Cesium.Rectangle.fromDegrees(west1, south1, east1, north1);



 src/store/index.ts

@@ -40,6 +40,7 @@
      entitiesData: {},
      getData: {},
    },
    loading: false,
  },
  mutations: {
    // SET_plotting(state, obj) {

 src/views/Index.vue

@@ -1,5 +1,9 @@
<template>
  <div class="body_box">
  <div
    class="body_box"
    v-loading="store.state.loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <export-map
      v-if="layerExportshow"
      @SETexportMap="SETexportMap"
@@ -12,7 +16,10 @@
      v-if="layerSpatialshow"
      @SETspatialClose="SETspatialClose"
    ></spatial-box>
    <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation">
    <coord-location
      v-if="layerLocationshow"
      @SETcoordClose="setCoordLocation"
    >
    </coord-location>
    <details-query v-if="store.state.details.showDetails"> </details-query>
    <div v-if="store.state.isShowMap">

 src/views/export/exportList.vue

@@ -12,6 +12,71 @@
        <Close />
      </el-icon>
    </div>
    <div class="exportContent spatialTable">
      <div style="height:calc(100% - 130px) ; width: calc(100% - 25px); background: red; position: absolute;">
        <el-table
          ref="singleTable"
          :data="exportable"
          height="100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="index"
            width="100"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            property="descr"
            label="标题"
          > </el-table-column>
          <el-table-column
            property="name"
            label="文件名称"
          > </el-table-column>
          <el-table-column
            property="createName"
            label="出图人"
          >
          </el-table-column>
          <el-table-column
            property="createTime"
            :formatter="formatTime"
            label="日期"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            width="120"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.stop="downloadMap(scope.$index, scope.row)"
              >下载</el-button>

            </template>
          </el-table-column>
        </el-table>

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

    </div>
  </div>
</template>
  
@@ -26,19 +91,73 @@
} from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useStore } from "vuex"; // 引入useStore 方法

import { exportSelectByPage } from "@/api/api";
import moment from "moment";
import { getToken } from "@/utils/auth";
const store = useStore(); // 该方法用于返回store 实例
const emits = defineEmits(["SETspatialClose"]);
const listdata = ref({
  pageIndex: 1,
  pageSize: 10,
  count: 0,
});
const exportable = ref([]);
const handleSizeChange = (val) => {
  listdata.value.pageIndex = 1;
  listdata.value.pageSize = val;
  getTableData();
};
const downloadMap = (index, rows) => {
  var guid = rows.guid;
  var token = "?token=" + getToken();
  var a = document.createElement("a"); // 创建一个a标签元素
  a.style.display = "none"; // 设置元素不可见
  a.href = config.BASE_URL + "/export/downloadFile" + token + "&guid=" + guid;
  document.body.appendChild(a); // 加入
  a.click(); // 触发点击,下载
  document.body.removeChild(a); // 释放
};
const handleCurrentChange = (val) => {
  listdata.value.pageIndex = val;
  getTableData();
};
const setListDataStart = () => {
  listdata.value = {
    pageIndex: 1,
    pageSize: 10,
    count: 0,
  };
  getTableData();
};
const formatTime = (row, column) => {
  let date = row[column.property];
  if (date === undefined || date === null) {
    return "";
  }
  return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
};
const handleSelectionChange = () => {};
const getTableData = async () => {
  const data = await exportSelectByPage(listdata.value);

  exportable.value = data.result;

  listdata.value.count = data.count;
};

const setSpatialClose = () => {
  store.state.setExportList = false;
};
onMounted((res) => {
  setListDataStart();
});
</script>
  
  <style lang="less" scoped>
.exportBox {
  width: 800px;
  height: 400px;
  display: flex;

  position: absolute;
  bottom: 10px;
  right: 50px;
@@ -58,5 +177,94 @@
      font-size: 16px;
    }
  }
  .exportContent {
    width: 100%;
    height: calc(100% - 60px);
    padding: 5px;
    position: absolute;
    .pagination_box {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 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;
    }
  }
  /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;
  }
}
</style> 

 src/views/export/exportMap.vue

@@ -24,52 +24,21 @@
              v-model="exportFrom.date"
              style="width: 100%;"
              type="date"
              placeholder="Pick a day"
              :clearable="false"
            />
          </div>
          <p>制作单位</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.dep"></el-input>
          </div>
        </div>
        <div class="contentTitle">
          <div class="contentImg"></div>
          地图要素
        </div>
        <div class="contentBox">
          <p>指北针</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.name"></el-input>
          </div>
          <p>比例尺</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.date"></el-input>
          </div>
          <p>图例</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.dep"></el-input>
          </div>

        </div>
        <div class="contentTitle">
          <div class="contentImg"></div>
          打印设置
        </div>
        <div class="contentBox">
          <p>DPI</p>
          <div class="contentInput">
            <!-- <el-input v-model="exportFrom.name"></el-input> -->
            <el-input-number
              style="width: 100%;"
              v-model="exportFrom.name"
              :min="1"
              :max="10"
            />
          </div>
          <p>导出格式</p>
          <div class="contentInput">
            <el-select
              style="width: 100%;"
              v-model="exportFrom.date"
              v-model="exportFrom.type"
            >
              <el-option
                label=".PNG"
@@ -81,20 +50,58 @@
          <div class="contentInput">
            <el-select
              style="width: 100%;"
              v-model="exportFrom.date"
              v-model="exportFrom.pageSize"
            >
              <el-option
                label="A4"
                value="A4"
              ></el-option>
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <p>旋转角度</p>
          <div class="contentInput">
            <el-input
              v-model="exportFrom.role"
              placeholder="请输入旋转角度(0-360)"
            ></el-input>
          </div>
        </div>

        <div class="contentTitle">
          <div class="contentImg"></div>
          图层列表
        </div>
        <div
          class="contentBox spatialTable"
          style="height: 15vh; overflow: auto;"
        >
          <el-table
            ref="singleTableRef"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            height="calc(100% - 1px)"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
            />
            <el-table-column
              property="cnName"
              label="图层名称"
            />
          </el-table>
        </div>
      </div>

      <div class="menuButton">
        <el-button
          size="small"
          type="primary"
          @click.stop="setInsertExporLayer"
        >确认</el-button>
        <el-button
          size="small"
@@ -123,23 +130,111 @@
  defineProps,
  defineEmits,
} from "vue";
import { getToken } from "@/utils/auth";
import canvas2image from "@/assets/js/canvas2image";
import $ from "jquery";
import menuTool from "@/assets/js/Map/menuTool";
const emits = defineEmits(["SETexportMap"]);
import { ElMessage } from "element-plus";
const exportFrom = ref({
  name: "",
  date: "",
  dep: "",
  pageSize: "A4",
  role: "0",
  type: "png",
  date: new Date(),
  xmin: null,
  ymin: null,
  xmax: null,
  ymax: null,
});
const url = ref("");
const editExport = () => {
  emits("SETexportMap", false);
};
const options = [
  {
    value: "A0",
    name: "A0",
  },
  {
    value: "A1",
    name: "A1",
  },
  {
    value: "A2",
    name: "A2",
  },
  {
    value: "A3",
    name: "A3",
  },
  {
    value: "A4",
    name: "A4",
  },
];
const tableData = ref([]);
const setImgStart = () => {
  // window.Viewer.scene.render();
  const myCanvas = window.Viewer.scene.canvas;
  var res = canvas2image.convertToImage(myCanvas, "869", "783", "png");
  url.value = res.src;
  tableData.value = store.state.chekNowLayers;
  var val = menuTool.exportSquare;
  exportFrom.value.xmin = val[0];
  exportFrom.value.ymin = val[1];
  exportFrom.value.xmax = val[2];
  exportFrom.value.ymax = val[3];
};

const setInsertExporLayer = () => {
  emits("SETexportMap", false);
  store.state.loading = true;
  var token = "?token=" + getToken();
  var res = [];
  for (var i in tableData.value) {
    if (tableData.value[i].tab) {
      res.push(tableData.value[i].tab.replace("moon:", ""));
    }
  }

  res.push("moon");
  var obj = {
    token: token.replace("?token=", ""),
    title: exportFrom.value.name,
    pageSize: exportFrom.value.pageSize,
    date: exportFrom.value.date,
    layers: res.toString(),
    rotation: exportFrom.value.role,
    xmin: exportFrom.value.xmin,
    ymin: exportFrom.value.ymin,
    xmax: exportFrom.value.xmax,
    ymax: exportFrom.value.ymax,
  };

  $.ajax({
    async: true,
    url: config.BASE_URL + "/export/insertMap" + token,
    type: "POST",
    data: JSON.stringify(obj),
    contentType: "application/json",
    dataType: "json",
    error: function () {},
    success: (rs) => {
      store.state.loading = false;
      var value = "code = " + rs.code + ", result = " + rs.result;
      if ((rs.code = 200)) {
        ElMessage({
          message: "出图成功,请到出图列表查看并下载",
          type: "success",
        });
      } else {
        ElMessage.error(value);
      }
    },
  });
};

onMounted((res) => {
  setImgStart();
});
@@ -246,7 +341,56 @@
    border: 1px solid #5a0914;
  }
}
.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;
  }
}
.menuTitle {
  width: calc(100% - 30px);


 src/views/query/detailsQuery.vue

@@ -38,6 +38,7 @@
  defineProps,
  defineEmits,
  nextTick,
  watch,
} from "vue";
import store from "@/store";
import {
@@ -181,12 +182,24 @@
const add0 = (m) => {
  return m < 10 ? "0" + m : m;
};
onMounted(() => {
const setLayerStart = () => {
  detailsData.value.gid = store.state.details.gid;
  detailsData.value.name = store.state.details.tab.replaceAll("_", "");

  getTableByEntity();
};
onMounted(() => {
  setLayerStart();
});
watch(
  () => store.state.details,
  (nVal, oVal) => {
    if (nVal) {
      setLayerStart();
    }
  },
  { deep: true }
);
</script>

<style lang="less" scoped>