|
@@ -45,10 +45,18 @@
|
|
|
已选择<span class="checkLength">{{ checkedCities.length }}</span
|
|
|
>个
|
|
|
</div>
|
|
|
- <el-checkbox-group id="mapCheckBox" v-model="checkedCities" @change="handleCheckedCitiesChange" :min="2" :max="6">
|
|
|
+ <el-checkbox-group
|
|
|
+ id="mapCheckBox"
|
|
|
+ v-model="checkedCities"
|
|
|
+ @change="handleCheckedCitiesChange"
|
|
|
+ :min="2"
|
|
|
+ :max="6"
|
|
|
+ >
|
|
|
<el-checkbox
|
|
|
class="mapCheckBox"
|
|
|
- :disabled="checkedCities.length >= 6 && checkedCities.indexOf(index) == -1"
|
|
|
+ :disabled="
|
|
|
+ checkedCities.length >= 6 && checkedCities.indexOf(index) == -1
|
|
|
+ "
|
|
|
v-for="(city, index) in mapList"
|
|
|
:checked="city.active"
|
|
|
:label="index"
|
|
@@ -62,12 +70,26 @@
|
|
|
<div id="textareaBox">
|
|
|
<div class="doPrintInfo">地址:xxxxxxxx 时间:{{ newTime }}</div>
|
|
|
<div class="textareaTitle">描述记录:</div>
|
|
|
- <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入内容" v-model="textarea1"> </el-input>
|
|
|
+ <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%" />
|
|
|
+ <img
|
|
|
+ src=""
|
|
|
+ id="imgOut"
|
|
|
+ style="
|
|
|
+ width: 1240px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ "
|
|
|
+ />
|
|
|
<div class="doPrintInfo2">地址:xxxxxxxx 时间:{{ newTime }}</div>
|
|
|
<span><div>描述记录:</div></span>
|
|
|
<div>{{ textarea1 }}</div>
|
|
@@ -113,109 +135,12 @@ export default {
|
|
|
textarea1: "",
|
|
|
// 地图底图列表
|
|
|
mapList: [
|
|
|
- {
|
|
|
- mapName: "2018年航空影像图(春季)",
|
|
|
- mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
|
|
|
- active: true
|
|
|
- },
|
|
|
- {
|
|
|
- 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
|
|
|
- }
|
|
|
- ]
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getBaseMap();
|
|
|
+ },
|
|
|
mounted() {
|
|
|
// 同屏对比事件监听
|
|
|
this.$bus.$off("tpdb");
|
|
@@ -239,23 +164,52 @@ export default {
|
|
|
},
|
|
|
props: [],
|
|
|
methods: {
|
|
|
+ // 获取地图底图服务
|
|
|
+ getBaseMap() {
|
|
|
+ this.mapList = [];
|
|
|
+ let params = new FormData();
|
|
|
+ params = {
|
|
|
+ columnId: 35,
|
|
|
+ states: 3,
|
|
|
+ pageSize: 20,
|
|
|
+ page: 0,
|
|
|
+ };
|
|
|
+ this.$Post(this.urlsCollection.selectContentList, params).then((res) => {
|
|
|
+ if (res.code === 200 && res.content.data.length > 0) {
|
|
|
+ let data = res.content.data;
|
|
|
+ data.forEach((v) => {
|
|
|
+ this.mapList.push({
|
|
|
+ mapName: v.title,
|
|
|
+ mapUrl: v.c_url + localStorage.getItem("TOKEN"),
|
|
|
+ active: false,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.mapList[0].active = true
|
|
|
+ console.log(this.mapList);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
// 当用户点击svg底座时,切换底部菜单显示隐藏状态。
|
|
|
changeShowBottomMenusStatus() {
|
|
|
// 打开弹窗
|
|
|
this.dialogVisible = true;
|
|
|
this.$emit("changeShowBottomMenusStatus", false);
|
|
|
// 打开弹窗前首先同步一下地图定位
|
|
|
- this.centerZoomInit = { center: map2DViewer.map.getCenter(), zoom: map2DViewer.map.getZoom() };
|
|
|
+ this.centerZoomInit = {
|
|
|
+ center: map2DViewer.map.getCenter(),
|
|
|
+ zoom: map2DViewer.map.getZoom(),
|
|
|
+ };
|
|
|
this.handleCheckedCitiesChange();
|
|
|
},
|
|
|
// 弹窗关闭询问
|
|
|
handleClose() {
|
|
|
if (this.dialogVisible) {
|
|
|
this.$confirm("确认关闭?")
|
|
|
- .then(_ => {
|
|
|
+ .then((_) => {
|
|
|
this.clearDialogVisible();
|
|
|
})
|
|
|
- .catch(_ => {});
|
|
|
+ .catch((_) => {});
|
|
|
}
|
|
|
},
|
|
|
// 同屏对比取消
|
|
@@ -289,11 +243,13 @@ export default {
|
|
|
_width,
|
|
|
_height,
|
|
|
useCORS: true,
|
|
|
- allowTaint: false
|
|
|
+ allowTaint: false,
|
|
|
};
|
|
|
let that = this;
|
|
|
- html2canvas(this.$refs.doPrint, ops).then(canvas => {
|
|
|
- document.getElementById("imgOut").setAttribute("src", canvas.toDataURL("image/png"));
|
|
|
+ html2canvas(this.$refs.doPrint, ops).then((canvas) => {
|
|
|
+ document
|
|
|
+ .getElementById("imgOut")
|
|
|
+ .setAttribute("src", canvas.toDataURL("image/png"));
|
|
|
});
|
|
|
|
|
|
this.interval = setInterval(() => {
|
|
@@ -318,7 +274,11 @@ export default {
|
|
|
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.write(
|
|
|
+ '<div style="width:100%;height:auto;margin:0px;">' +
|
|
|
+ obj.innerHTML +
|
|
|
+ "</div>"
|
|
|
+ );
|
|
|
doc.close();
|
|
|
new_iframe.contentWindow.focus();
|
|
|
new_iframe.contentWindow.print();
|
|
@@ -363,9 +323,9 @@ export default {
|
|
|
if (!this.MouseDownStatus) {
|
|
|
this.mouseIndex = mouseIndex;
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
- watch: {}
|
|
|
+ watch: {},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|