|
|
@@ -8,9 +8,14 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- 同屏对比主题 -->
|
|
|
- <div class="ssc_main">
|
|
|
+ <div
|
|
|
+ class="ssc_main"
|
|
|
+ id="doPrint"
|
|
|
+ ref="doPrint"
|
|
|
+ :style="{ height: !subMitStatus ? 'calc(100vh - 190px)' : 'calc(100vh - 310px)' }"
|
|
|
+ >
|
|
|
<!-- 地图列表 -->
|
|
|
- <div class="ssc_main_mapList" :style="{ width: subMitStatus ? '100%' : '60%' }">
|
|
|
+ <div class="ssc_main_mapList">
|
|
|
<div
|
|
|
class="ssc_main_mapList_showList"
|
|
|
:id="'map' + index"
|
|
|
@@ -31,18 +36,15 @@
|
|
|
</div>
|
|
|
<!-- 底图列表 -->
|
|
|
<div class="ssc_main_aimapList" v-show="!subMitStatus">
|
|
|
- <span>地图底图(最多只能选择6个)</span>
|
|
|
- <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
|
+ <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"
|
|
|
- @click="
|
|
|
- index => {
|
|
|
- if (this.checkedCities.length >= 6 && this.checkedCities.indexOf(index) == -1) {
|
|
|
- this.$message.info('最多只能选择6个地图底图哦！');
|
|
|
- }
|
|
|
- }
|
|
|
- "
|
|
|
v-for="(city, index) in mapList"
|
|
|
:label="index"
|
|
|
:key="index"
|
|
|
@@ -51,6 +53,18 @@
|
|
|
</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>
|
|
|
@@ -65,6 +79,7 @@
|
|
|
* @Date: 2022年11月21-25日
|
|
|
*/
|
|
|
import Map from "../../map/Map.vue";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
export default {
|
|
|
name: "SameScreenComparison",
|
|
|
components: { Map },
|
|
|
@@ -78,6 +93,8 @@ export default {
|
|
|
mouseIndex: -1,
|
|
|
// 确认状态
|
|
|
subMitStatus: false,
|
|
|
+ // 底部文本域
|
|
|
+ textarea1: "",
|
|
|
// 地图底图列表
|
|
|
mapList: [
|
|
|
{
|
|
|
@@ -235,14 +252,46 @@ export default {
|
|
|
},
|
|
|
// 同屏对比表单提交
|
|
|
subMitDialogVisible() {
|
|
|
- this.subMitStatus = !this.subMitStatus;
|
|
|
- if (this.subMitStatus) {
|
|
|
- this.$message.success("确定!");
|
|
|
+ if (!this.subMitStatus) {
|
|
|
+ this.subMitStatus = !this.subMitStatus;
|
|
|
} else {
|
|
|
- this.$message.success("打印!");
|
|
|
- // this.clearDialogVisible();
|
|
|
+ // 出现新的弹窗并截图当前地图，以及文本域
|
|
|
+ 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"));
|
|
|
+ });
|
|
|
+ setTimeout(() =>{
|
|
|
+ that.doPrint();
|
|
|
+ },300);
|
|
|
+ },
|
|
|
+ // 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);
|
|
|
@@ -268,6 +317,13 @@ export default {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 190px);
|
|
|
+ position: relative;
|
|
|
+ #textareaBox {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
&_mapList {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -303,15 +359,32 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
&_aimapList {
|
|
|
- width: 40%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ right: 0;
|
|
|
+ width: 20rem;
|
|
|
height: 100%;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ 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 */
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ background: #002645 !important;
|
|
|
+ .checkLength {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #74ffff;
|
|
|
+ }
|
|
|
+ #mapCheckBox {
|
|
|
+ height: calc(100% - 4rem);
|
|
|
+ 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;
|
|
|
@@ -334,4 +407,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.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>
|
DESKTOP-6LTVLN7\Liumouren