web_sh_audit/src/components/common/BottomForm/SameScreenComparison.vue

<template>
  <!-- 同屏对比弹窗 -->
  <el-dialog title="同屏对比" fullscreen :visible.sync="dialogVisible" :before-close="handleClose">
    <template slot="title">
      <div class="dialogTitle">
        <div class="dialogTitleIcon"></div>
        同屏对比
      </div>
    </template>
    <!-- 同屏对比主题 -->
    <div class="ssc_main" :style="{ height: !subMitStatus ? 'calc(100vh - 190px)' : 'calc(100vh - 310px)' }">
      <!-- 地图列表 -->
      <div class="ssc_main_mapList" id="doPrint" ref="doPrint">
        <div
          class="ssc_main_mapList_showList"
          :id="'map' + index"
          v-for="(mapIndex, index) in checkedCities"
          :key="index"
          :style="mapListBoxStyle()"
          @mousedown="changeMouseIndex(index)"
        >
          <span>{{ mapList[mapIndex].mapName }}</span>
          <Map
            :mapUrl="mapList[mapIndex].mapUrl"
            :index="index"
            :mouseIndex="mouseIndex"
            :centerZoom="centerZoom"
            @changeCenterZoom="changeCenterZoom"
          />
        </div>
      </div>
      <!-- 底图列表 -->
      <div class="ssc_main_aimapList">
        <span>地图底图(最多选择6个) </span>
        <div>
          已选择<span class="checkLength">{{ checkedCities.length }}</span
          >个
        </div>
        <el-checkbox-group id="mapCheckBox" v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox
            class="mapCheckBox"
            :disabled="checkedCities.length >= 6 && checkedCities.indexOf(index) == -1"
            v-for="(city, index) in mapList"
            :label="index"
            :key="index"
            >{{ city.mapName }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <!-- 底部文本域 -->
    <div id="textareaBox" v-if="subMitStatus">
      <div class="textareaTitle">描述记录:</div>
      <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入内容" v-model="textarea1"> </el-input>
    </div>
    <!-- 打印区域 -->
    <div id="imgBox">
      <span>基本农田被侵占</span>
      <img src="" id="imgOut" style="width: 1240px; background-repeat: no-repeat; background-size: 100% 100%" />
      <span><div>描述记录:</div></span>
      <div>{{ textarea1 }}</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="clearDialogVisible()">{{ subMitStatus ? "返回上级" : "取 消" }}</el-button>
      <el-button type="primary" @click="subMitDialogVisible()">{{ subMitStatus ? "打 印" : "确 定" }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
/**
 * 底部菜单（同屏对比）组件
 * @author: LiuMengxiang
 * @Date: 2022年11月21-25日
 */
import Map from "../../map/Map.vue";
import html2canvas from "html2canvas";
export default {
  name: "SameScreenComparison",
  components: { Map },
  data() {
    return {
      // 同屏对比弹窗显示状态
      dialogVisible: false,
      checkedCities: [],
      // 定时器暂存
      interval: "",
      // 地图暂存显示变量
      centerZoom: {},
      mouseIndex: -1,
      // 确认状态
      subMitStatus: false,
      // 底部文本域
      textarea1: "",
      // 地图底图列表
      mapList: [
        {
          mapName: "2018年航空影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2019年航空影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2020年航空影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2021年航空影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2022年航空影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2018年卫星影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2019年卫星影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2020年卫星影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2021年卫星影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2022年卫星影像图（春季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2018年航空影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2019年航空影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2020年航空影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2021年航空影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2022年航空影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2018年卫星影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2019年卫星影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2020年卫星影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2021年卫星影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        },
        {
          mapName: "2022年卫星影像图（秋季）",
          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
          active: false
        }
      ]
    };
  },
  mounted() {
    // 同屏对比事件监听
    this.$bus.$on("tpdb", () => {
      this.changeShowBottomMenusStatus();
    });
    // 点击底部菜单SVG，且有弹窗打开时触发（弹窗关闭询问）
    this.$bus.$on("handleClose", () => {
      if (this.dialogVisible) {
        this.handleClose();
      }
    });
  },
  destroy() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("tpdb");
  },
  props: [],
  methods: {
    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
    changeShowBottomMenusStatus() {
      if (this.dialogVisible) {
        this.handleClose();
      } else {
        // 打开弹窗
        this.dialogVisible = !this.dialogVisible;
        this.$emit("changeShowBottomMenusStatus", false);
      }
    },
    // 弹窗关闭询问
    handleClose() {
      if (this.dialogVisible) {
        this.$confirm("确认关闭？")
          .then(_ => {
            this.clearDialogVisible();
          })
          .catch(_ => {});
      }
    },
    // 同屏对比取消
    clearDialogVisible() {
      if (this.interval) {
        this.$message.info("取消打印！");
        this.clearDiyInterval();
      } else {
        // 返回上级
        if (this.subMitStatus) {
          this.subMitStatus = !this.subMitStatus;
        } else {
          // 关闭弹窗
          this.dialogVisible = false;
          // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
          this.$emit("changeShowBottomMenusStatus", true);
        }
      }
    },
    // 同屏对比表单提交
    subMitDialogVisible() {
      if (this.interval) {
        this.$message.info("正在打印，请稍后操作！");
      } else {
        if (!this.subMitStatus) {
          if (this.checkedCities.length < 2) {
            this.$message.info("请至少选择两个地图底图！");
          } else {
            this.subMitStatus = !this.subMitStatus;
          }
        } else {
          // 出现新的弹窗并截图当前地图，以及文本域
          this.cutDiv();
        }
      }
    },
    // div转图片
    cutDiv() {
      var container = document.getElementById("doPrint").innerHTML;
      const _width = container.offsetWidth;
      const _height = container.offsetHeight;
      const ops = {
        _width,
        _height,
        useCORS: true,
        allowTaint: false
      };
      let that = this;
      html2canvas(this.$refs.doPrint, ops).then(canvas => {
        document.getElementById("imgOut").setAttribute("src", canvas.toDataURL("image/png"));
      });

      this.interval = setInterval(() => {
        if ($("#imgOut").attr("src")) {
          that.clearDiyInterval();
          setTimeout(() => {
            that.doPrint();
          }, 500);
        }
      }, 500);
    },
    clearDiyInterval() {
      let that = this;
      // 先销毁定时器
      clearInterval(that.interval);
      that.interval = "";
    },
    // div打印（iframe的方式为最优）
    doPrint() {
      // 将包含转为图片的div获取。
      var new_iframe = document.createElement("IFRAME");
      var doc = null;
      document.body.appendChild(new_iframe);
      doc = new_iframe.contentWindow.document;
      var obj = document.getElementById("imgBox");
      doc.write('<div style="width:100%;height:auto;margin:0px;">' + obj.innerHTML + "</div>");
      doc.close();
      new_iframe.contentWindow.focus();
      new_iframe.contentWindow.print();
      // document.body.removeChild(iframe);
    },
    // 修改
    handleCheckedCitiesChange(e) {
      // console.log("已选中的底图：", this.checkedCities, this.checkedCities.length);
    },
    // 根据地图列表，返回合适的样式
    mapListBoxStyle() {
      return "width:calc(33% - 2px);height:calc(50% - 2px);";
    },
    // 当其中一个地图移动或缩放时
    changeCenterZoom(data) {
      this.centerZoom = data;
    },
    // 暂存当前光标所在map组件的下标
    changeMouseIndex(mouseIndex) {
      this.mouseIndex = mouseIndex;
    }
  },
  watch: {}
};
</script>
<style lang="less" scoped>
.ssc_main {
  display: flex;
  width: 100%;
  height: calc(100vh - 190px);
  position: relative;
  #textareaBox {
    width: calc(100% - 20px);
    height: 100px;
    position: absolute;
    bottom: 0;
  }
  &_mapList {
    width: calc(100% - 20rem);
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    &_showList {
      border: 1px solid #ccc;
      text-align: right;
      position: relative;
      span {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
        z-index: 999;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
      }
    }
  }
  &_aimapList {
    width: 20rem;
    height: 100%;
    font-size: 20px;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    background: #002645 !important;
    .checkLength {
      font-size: 24px;
      color: #74ffff;
    }
    #mapCheckBox {
      height: calc(100% - 58px);
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
      border: 1px solid #fff;
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
    .mapCheckBox:hover {
      color: #ffffff;
      background: #002645 !important;
    }
    .mapCheckBox[disabled] {
      color: #666666;
      cursor: not-allowed;
    }
    .mapCheckBox {
      width: 100%;
      padding: 10px 5px;
      border-bottom: 1px solid;
      color: #cccccc;
      font-size: 18px;
      background: #001e37 !important;
      .el-checkbox__label {
        font-size: 18px;
      }
    }
  }
}
.textareaTitle {
  font-size: 20px;
  font-weight: 400;
}
#imgBox {
  display: none;
  font-size: 16px;
  color: #000;
  font-weight: 400;
  span {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    padding: 20px 10px;
  }
}
</style>