月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-09-04 4ff2e4b83f2169661bee7ae099da67212ecbd186
src/views/export/exportMap.vue
@@ -7,7 +7,9 @@
      <div class="menuTitle">地图设计</div>
      <div class="menmuContent">
        <div class="contentTitle">
          <div class="contentImg"></div>
          <div class="contentImg">
          </div>
          图件信息
        </div>
        <div class="contentBox">
@@ -17,7 +19,13 @@
          </div>
          <p>制作日期</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.date"></el-input>
            <!-- <el-input v-model="exportFrom.date"></el-input> -->
            <el-date-picker
              v-model="exportFrom.date"
              style="width: 100%;"
              type="date"
              placeholder="Pick a day"
            />
          </div>
          <p>制作单位</p>
          <div class="contentInput">
@@ -49,7 +57,13 @@
        <div class="contentBox">
          <p>DPI</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.name"></el-input>
            <!-- <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">
@@ -91,12 +105,16 @@
      </div>
    </div>
    <div class="rightMap">
      <el-image
        style="width: 100%; height: 100%;"
        :src="url"
        fit="fill"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import store from "@/store";
import {
  ref,
  onMounted,
@@ -105,16 +123,26 @@
  defineProps,
  defineEmits,
} from "vue";
import canvas2image from "@/assets/js/canvas2image";
const emits = defineEmits(["SETexportMap"]);
const exportFrom = ref({
  name: "",
  date: "",
  dep: "",
});
const url = ref("");
const editExport = () => {
  emits("SETexportMap", false);
};
const setImgStart = () => {
  // window.Viewer.scene.render();
  const myCanvas = window.Viewer.scene.canvas;
  var res = canvas2image.convertToImage(myCanvas, "869", "783", "png");
  url.value = res.src;
};
onMounted((res) => {
  setImgStart();
});
</script>
 
@@ -132,6 +160,7 @@
  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);
}
.leftMenu {
  width: 358px;
@@ -140,6 +169,12 @@
  display: flex;
  flex-direction: column;
}
.rightMap {
  height: calc(100% - 20px);
  width: 849px;
  border-right: 1px solid #d6e4ff;
  padding: 10px;
}
.menmuContent {
  flex: 1;
  width: 100%;
@@ -147,7 +182,7 @@
  overflow: auto;
  .contentTitle {
    font-size: 20px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
@@ -184,6 +219,8 @@
    margin-top: 9px;
    margin-left: 16px;
    margin-right: 9px;
    font-size: 16px;
    font-family: Source Han Sans CN;
  }
}
.menuButton {
@@ -191,6 +228,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
  .el-button {
    height: 37px;
    background: rgba(104, 156, 255, 0.2);
@@ -211,13 +249,13 @@
.menuTitle {
  width: calc(100% - 30px);
  height: 42px;
  background: #0e151f;
  font-size: 24px;
  background: #0e151f;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  padding: 10px;
  padding-left: 28px;
}
::-webkit-scrollbar {