|
|
@@ -7,7 +7,7 @@
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="btn1">
|
|
|
+ <div class="btn1" @click="handleScreenshot">
|
|
|
<div class="icon1"></div>
|
|
|
当前地图截图导出
|
|
|
</div>
|
|
|
@@ -125,11 +125,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--添加文字-->
|
|
|
- <TextEdit v-model="showTextEdit" @addText="addText" />
|
|
|
+ <TextEdit v-model="showTextEdit" @add-text="addText" />
|
|
|
<!--绘制提示信息-->
|
|
|
<div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
|
|
|
<!--保存修改弹窗-->
|
|
|
- <EditDialog v-if="showEdit" v-model="showEdit" :editData="editData" @submit="handleSubmit" />
|
|
|
+ <EditDialog v-if="showEdit" v-model="showEdit" :edit-data="editData" @submit="handleSubmit" />
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="OnlinePlotting">
|
|
|
@@ -140,6 +140,7 @@ import { deletePatternById, getPatternInfo, getPatternList } from '@/api/globalM
|
|
|
import TextEdit from '@/views/globalMap/RightMenu/OnlinePlotting/TextEdit.vue';
|
|
|
import EditDialog from '@/views/globalMap/RightMenu/OnlinePlotting/EditDialog.vue';
|
|
|
import { Search } from '@element-plus/icons-vue';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const getDrawTool = inject('getDrawTool');
|
|
|
@@ -216,14 +217,95 @@ const menu = ref([
|
|
|
{ name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: getImageUrl('extinguishedPoint'), size: [166, 88] }
|
|
|
]
|
|
|
},
|
|
|
- { name: '火线', value: 'firewire', children: [] },
|
|
|
- { name: '火场', value: 'fireGround', children: [] },
|
|
|
- { name: '箭头', value: 'arrow', children: [] },
|
|
|
- { name: '导航', value: 'navigation', children: [] },
|
|
|
- { name: '扑救队伍', value: 'firefightingTeam', children: [] },
|
|
|
- { name: '飞机车辆', value: 'aircraftVehicles', children: [] },
|
|
|
- { name: '基础设置', value: 'basicSetting', children: [] },
|
|
|
- { name: '其他', value: 'other', children: [] }
|
|
|
+ {
|
|
|
+ name: '火线',
|
|
|
+ value: 'firewire',
|
|
|
+ children: [
|
|
|
+ { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: getImageUrl('firewire'), size: [166, 88] },
|
|
|
+ { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: getImageUrl('controlledfireline'), size: [166, 88] },
|
|
|
+ { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: getImageUrl('extinguishedline'), size: [166, 88] },
|
|
|
+ { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: getImageUrl('StrongFrontline'), size: [166, 88] },
|
|
|
+ { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: getImageUrl('ZhongxianLine'), size: [166, 88] },
|
|
|
+ { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: getImageUrl('WeakFrontline'), size: [166, 88] }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '火场',
|
|
|
+ value: 'fireGround',
|
|
|
+ children: [
|
|
|
+ { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: getImageUrl('fireground'), size: [166, 88] },
|
|
|
+ { name: '受控火场', value: 'marker', image: getImageUrl('controlledfireground'), icon: getImageUrl('controlledfireground'), size: [166, 88] },
|
|
|
+ { name: '已灭火场', value: 'marker', image: getImageUrl('extinguishedfireground'), icon: getImageUrl('extinguishedfireground'), size: [166, 88] }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '箭头',
|
|
|
+ value: 'arrow',
|
|
|
+ children: [
|
|
|
+ { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: getImageUrl('curvedarrow'), size: [166, 88] },
|
|
|
+ { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: getImageUrl('straightarrow1'), size: [166, 88] },
|
|
|
+ { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: getImageUrl('thinarrow'), size: [166, 88] }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '导航',
|
|
|
+ value: 'navigation',
|
|
|
+ children: [
|
|
|
+ { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: getImageUrl('navigation'), size: [166, 88] }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '扑救队伍',
|
|
|
+ value: 'firefightingTeam',
|
|
|
+ children: [
|
|
|
+ { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: getImageUrl('commandcentre'), size: [166, 88] },
|
|
|
+ { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: getImageUrl('dividingcenter'), size: [166, 88] },
|
|
|
+ { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: getImageUrl('rendezvous'), size: [166, 88] },
|
|
|
+ { name: '军队', value: 'marker', image: getImageUrl('army'), icon: getImageUrl('army'), size: [166, 88] },
|
|
|
+ { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: getImageUrl('armedpolice'), size: [166, 88] },
|
|
|
+ { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: getImageUrl('forestpoliceman'), size: [166, 88] },
|
|
|
+ { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: getImageUrl('firefightingteam'), size: [166, 88] },
|
|
|
+ { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: getImageUrl('Firefightingteamroute'), size: [166, 88] }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '飞机车辆',
|
|
|
+ value: 'aircraftVehicles',
|
|
|
+ children: [
|
|
|
+ { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: getImageUrl('fixedwing'), size: [166, 88] },
|
|
|
+ { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: getImageUrl('helicopter'), size: [166, 88] },
|
|
|
+ { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: getImageUrl('UAV'), size: [166, 88] },
|
|
|
+ { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: getImageUrl('commandvehicle'), size: [166, 88] },
|
|
|
+ { name: '飞机航线设置', value: 'marker', image: getImageUrl('aircraftroutesetting'), icon: getImageUrl('aircraftroutesetting'), size: [166, 88] },
|
|
|
+ { name: '直升机航线设置', value: 'marker', image: getImageUrl('helicopterroutesetting'), icon: getImageUrl('helicopterroutesetting'), size: [166, 88] }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '基础设置',
|
|
|
+ value: 'basicSetting',
|
|
|
+ children: [
|
|
|
+ { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: getImageUrl('terminal'), size: [166, 88] },
|
|
|
+ { name: '起降点', value: 'marker', image: getImageUrl('takeoffandlandingpoint'), icon: getImageUrl('takeoffandlandingpoint'), size: [166, 88] },
|
|
|
+ { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: getImageUrl('waterpoint'), size: [166, 88] },
|
|
|
+ { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: getImageUrl('watchtower'), size: [166, 88] },
|
|
|
+ { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: getImageUrl('materialwarehouse'), size: [166, 88] },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ value: 'other',
|
|
|
+ children: [
|
|
|
+ { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: getImageUrl('dangerousarea'), size: [166, 88] },
|
|
|
+ { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: getImageUrl('Isolationzonemining'), size: [166, 88] },
|
|
|
+ { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: getImageUrl('emergencyshelter'), size: [166, 88] },
|
|
|
+ { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: getImageUrl('windspeedanddirection'), size: [166, 88] },
|
|
|
+ { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: getImageUrl('ranging'), size: [166, 88] },
|
|
|
+ { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: getImageUrl('strongwind'), size: [166, 88] },
|
|
|
+ { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: getImageUrl('artificialrainfall'), size: [166, 88] },
|
|
|
+ { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: getImageUrl('typhoon'), size: [166, 88] }
|
|
|
+ ]
|
|
|
+ }
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
@@ -571,6 +653,42 @@ const handleShowDialog = () => {
|
|
|
showEdit.value = true;
|
|
|
};
|
|
|
|
|
|
+// 页面元素转图片
|
|
|
+const handleScreenshot = () => {
|
|
|
+ const canvasBox = getMap().kv;
|
|
|
+ // 手动创建一个 canvas 标签
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+
|
|
|
+ if (canvasBox) {
|
|
|
+ // 获取父级的宽高
|
|
|
+ const width = parseInt(window.getComputedStyle(canvasBox).width);
|
|
|
+ const height = parseInt(window.getComputedStyle(canvasBox).height);
|
|
|
+ canvas.style.width = width + 'px';
|
|
|
+ canvas.style.height = height + 'px';
|
|
|
+ const context = canvas.getContext('2d');
|
|
|
+ const options = {
|
|
|
+ backgroundColor: null, // 设置背景色为透明
|
|
|
+ canvas: canvas,
|
|
|
+ useCORS: true, //是否尝试使用CORS从服务器加载图像，解决跨域问题
|
|
|
+ tainttest: true, // 是否在渲染前测试图片
|
|
|
+ logging: false // 不启动日志调试
|
|
|
+ };
|
|
|
+
|
|
|
+ // canvasBox是要截图的元素，options是一些相关配置
|
|
|
+ html2canvas(canvasBox, options).then((canvas) => {
|
|
|
+ // toDataURL 图片格式转成 base64
|
|
|
+ const dataURL = canvas.toDataURL('image/png');
|
|
|
+ // 新建一个a标签
|
|
|
+ var oA = document.createElement('a');
|
|
|
+ oA.download = '截图'; // 设置下载的文件名
|
|
|
+ oA.href = dataURL;
|
|
|
+ document.body.appendChild(oA);
|
|
|
+ oA.click(); // 模拟点击a标签
|
|
|
+ oA.remove(); // 下载之后把创建的元素删除
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getList();
|
|
|
});
|
