投影图层修改，在线制图修改

surprise

2023-10-31 b7e62ad2625121586b1254dab69b3c3d38da71de

 src/views/export/exportMap.vue

@@ -1,8 +1,5 @@
<template>
  <div
    class="expiort"
    v-drag="true"
  >
  <div class="expiort" v-drag="true">
    <div class="leftMenu">
      <div class="menuTitle">地图设计</div>
      <div class="menmuContent">
@@ -20,96 +17,53 @@
          <p>制作日期</p>
          <div class="contentInput">
            <!-- <el-input v-model="exportFrom.date"></el-input> -->
            <el-date-picker
              v-model="exportFrom.date"
              style="width: 100%;"
              type="date"
              placeholder="Pick a day"
            />
            <el-date-picker v-model="exportFrom.date" style="width: 100%;" type="date" :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"
            >
              <el-option
                label=".PNG"
                value="png"
              ></el-option>
            <el-select style="width: 100%;" v-model="exportFrom.type">
              <el-option label=".PNG" value="png"></el-option>
            </el-select>
          </div>
          <p>纸张设置</p>
          <div class="contentInput">
            <el-select
              style="width: 100%;"
              v-model="exportFrom.date"
            >
              <el-option
                label="A4"
                value="A4"
              ></el-option>
            <el-select style="width: 100%;" v-model="exportFrom.pageSize">
              <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"
        >确认</el-button>
        <el-button
          size="small"
          type="primary"
          class="delbtn"
          @click="editExport"
        >取消</el-button>
        <el-button size="small" type="primary" @click.stop="setInsertExporLayer">确认</el-button>
        <el-button size="small" type="primary" class="delbtn" @click="editExport">取消</el-button>
      </div>
    </div>
    <div class="rightMap">
      <el-image
        style="width: 100%; height: 100%;"
        :src="url"
        fit="fill"
      />
      <el-image style="width: 100%; height: 100%;" :src="url" fit="fill" />
    </div>
  </div>
</template>
@@ -123,23 +77,149 @@
  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;
  // 


  var layers = store.state.chekNowLayers
  var tabLayer = layers.filter((rs) => {
    if (!rs.shpType && rs.isLayer == 1) {
      return rs
    }
  })
  tableData.value = tabLayer.reverse();
  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 format = (shijianchuo) => {
  //shijianchuo是整数，否则要parseInt转换
  var time = new Date(shijianchuo);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  return (
    y +
    '-' +
    add0(m) +
    '-' +
    add0(d)
  );
}
//格式化时间
const add0 = (m) => {
  return m < 10 ? '0' + m : m;
}
const setInsertExporLayer = () => {
  emits("SETexportMap", false);
  store.state.loading = true;
  var token = "?token=" + getToken();
  var res = [];
  var ids = [];
  for (var i in tableData.value) {
    if (tableData.value[i].tab) {
      res.push(tableData.value[i].tab.replace("moon:", ""));

    }
    if (!tableData.value[i].shpType) {
      ids.push(tableData.value[i].id);
    }
  }

  res.push();


  var nowDate = format(exportFrom.value.date)
  var obj = {
    layerIds: ids,
    token: token.replace("?token=", ""),
    title: exportFrom.value.name,
    pageSize: exportFrom.value.pageSize,
    date: nowDate,
    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();
});
@@ -162,6 +242,7 @@
  z-index: 10;
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
}

.leftMenu {
  width: 358px;
  height: 100%;
@@ -169,12 +250,14 @@
  display: flex;
  flex-direction: column;
}

.rightMap {
  height: calc(100% - 20px);
  width: 849px;
  border-right: 1px solid #d6e4ff;
  padding: 10px;
}

.menmuContent {
  flex: 1;
  width: 100%;
@@ -193,12 +276,14 @@
    background: #0e151f;
    margin: 2px 0px;
  }

  .contentBox {
    margin: 5px 7px;
    width: calc(100% - 76px);

    background: #1e2a3d;
    padding: 14px 23px 5px 39px;

    p {
      font-size: 12px;
      font-family: Source Han Sans CN;
@@ -207,6 +292,7 @@
      line-height: 9px;
      margin-bottom: 10px;
    }

    .contentInput {
      margin-bottom: 10px;
    }
@@ -223,6 +309,7 @@
    font-family: Source Han Sans CN;
  }
}

.menuButton {
  padding: 10px;
  display: flex;
@@ -238,12 +325,74 @@
    font-weight: 400;
    color: #ffffff;
  }

  .el-button:hover {
    border: 1px solid #689cff;
  }

  .delbtn {
    background: rgba(245, 108, 108, 0.2);
    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;
  }
}

@@ -258,13 +407,16 @@
  padding: 10px;
  padding-left: 28px;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Change the scrollbar background color here */
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

/* Change the scrollbar button color and roundedness here */
::-webkit-scrollbar-thumb {
  background-color: rgba(104, 156, 255, 0.2);