|
@@ -8,7 +8,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- 同屏对比主题 -->
|
|
|
- <div class="ssc_main" :style="{ height: !subMitStatus ? 'calc(100vh - 190px)' : 'calc(100vh - 310px)' }">
|
|
|
+ <div class="ssc_main">
|
|
|
<!-- 地图列表 -->
|
|
|
<div class="ssc_main_mapList" id="doPrint" ref="doPrint">
|
|
|
<div
|
|
@@ -36,11 +36,12 @@
|
|
|
已选择<span class="checkLength">{{ checkedCities.length }}</span
|
|
|
>个
|
|
|
</div>
|
|
|
- <el-checkbox-group id="mapCheckBox" v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
|
+ <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"
|
|
|
v-for="(city, index) in mapList"
|
|
|
+ :checked="city.active"
|
|
|
:label="index"
|
|
|
:key="index"
|
|
|
>{{ city.mapName }}</el-checkbox
|
|
@@ -49,7 +50,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 底部文本域 -->
|
|
|
- <div id="textareaBox" v-if="subMitStatus">
|
|
|
+ <div id="textareaBox">
|
|
|
<div class="textareaTitle">描述记录:</div>
|
|
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入内容" v-model="textarea1"> </el-input>
|
|
|
</div>
|
|
@@ -61,8 +62,8 @@
|
|
|
<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>
|
|
|
+ <el-button @click="clearDialogVisible()">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="subMitDialogVisible()">打 印</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
@@ -82,14 +83,13 @@ export default {
|
|
|
return {
|
|
|
// 同屏对比弹窗显示状态
|
|
|
dialogVisible: false,
|
|
|
+ // 默认选中第一个
|
|
|
checkedCities: [],
|
|
|
// 定时器暂存
|
|
|
interval: "",
|
|
|
// 地图暂存显示变量
|
|
|
centerZoom: {},
|
|
|
mouseIndex: -1,
|
|
|
- // 确认状态
|
|
|
- subMitStatus: false,
|
|
|
// 底部文本域
|
|
|
textarea1: "",
|
|
|
// 地图底图列表
|
|
@@ -97,7 +97,7 @@ export default {
|
|
|
{
|
|
|
mapName: "2018年航空影像图(春季)",
|
|
|
mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
|
|
|
- active: false
|
|
|
+ active: true
|
|
|
},
|
|
|
{
|
|
|
mapName: "2019年航空影像图(春季)",
|
|
@@ -202,12 +202,6 @@ export default {
|
|
|
this.$bus.$on("tpdb", () => {
|
|
|
this.changeShowBottomMenusStatus();
|
|
|
});
|
|
|
- // 点击底部菜单SVG,且有弹窗打开时触发(弹窗关闭询问)
|
|
|
- this.$bus.$on("handleClose", () => {
|
|
|
- if (this.dialogVisible) {
|
|
|
- this.handleClose();
|
|
|
- }
|
|
|
- });
|
|
|
},
|
|
|
destroy() {
|
|
|
// 当容器销毁时,需要停止监听该事件
|
|
@@ -217,13 +211,9 @@ export default {
|
|
|
methods: {
|
|
|
// 当用户点击svg底座时,切换底部菜单显示隐藏状态。
|
|
|
changeShowBottomMenusStatus() {
|
|
|
- if (this.dialogVisible) {
|
|
|
- this.handleClose();
|
|
|
- } else {
|
|
|
- // 打开弹窗
|
|
|
- this.dialogVisible = !this.dialogVisible;
|
|
|
- this.$emit("changeShowBottomMenusStatus", false);
|
|
|
- }
|
|
|
+ // 打开弹窗
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.$emit("changeShowBottomMenusStatus", false);
|
|
|
},
|
|
|
// 弹窗关闭询问
|
|
|
handleClose() {
|
|
@@ -241,15 +231,114 @@ export default {
|
|
|
this.$message.info("取消打印!");
|
|
|
this.clearDiyInterval();
|
|
|
} else {
|
|
|
- // 返回上级
|
|
|
- if (this.subMitStatus) {
|
|
|
- this.subMitStatus = !this.subMitStatus;
|
|
|
- } else {
|
|
|
- // 关闭弹窗
|
|
|
- this.dialogVisible = false;
|
|
|
- // 修改父级菜单变量(弹窗显示状态和显示底部菜单)
|
|
|
- this.$emit("changeShowBottomMenusStatus", true);
|
|
|
- }
|
|
|
+ // 关闭弹窗
|
|
|
+ this.dialogVisible = false;
|
|
|
+ // 恢复默认选中第一个地图底图
|
|
|
+ this.checkedCities = [];
|
|
|
+ this.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
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ // 修改父级菜单变量(弹窗显示状态和显示底部菜单)
|
|
|
+ this.$emit("changeShowBottomMenusStatus", true);
|
|
|
}
|
|
|
},
|
|
|
// 同屏对比表单提交
|
|
@@ -257,16 +346,7 @@ export default {
|
|
|
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();
|
|
|
- }
|
|
|
+ this.cutDiv();
|
|
|
}
|
|
|
},
|
|
|
// div转图片
|
|
@@ -338,7 +418,7 @@ export default {
|
|
|
.ssc_main {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
- height: calc(100vh - 190px);
|
|
|
+ height: calc(100vh - 310px);
|
|
|
position: relative;
|
|
|
#textareaBox {
|
|
|
width: calc(100% - 20px);
|