blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-10-13 22:12:11 +08:00
Code Issues Projects Releases Wiki Activity

feat: 修复gd地图无法生成缩略图的bug

Browse Source
This commit is contained in:
huanghao1412 2024-01-12 15:08:22 +08:00
parent 7158c9fd1d
commit e93473917d
4 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue
View File

@ -91,31 +91,35 @@
</g>
</g>
</svg>
<img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>
<!-- img标签出来的图不完整 所以换background-url background-reapt object-fit: contain不支持 -->
<!-- <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>-->
<div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div>
<div :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top">
<svg
<div
v-for="(item, i) in point"
:key="i"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="position: absolute;outline: none;width: 22px;height: 22px;cursor: pointer;"
@click="pointJump(item)"
:style="{
top: `${pxToPercentTop(item.style.top + 20, 911)}`,
left: `${pxToPercentLeft(item.style.left - 220, 1400)}`,
}"
style="position: absolute;"
:style="{top: `${pxToPercentTop(item.style.top + 20, 911)}`,left: `${pxToPercentLeft(item.style.left - 230, 1400)}`,}"
>
<g transform="translate(0, 0) scale(1, 1)">
<g>
<circle cx="11" cy="11" r="6.5" style="fill:#4dca59;opacity:0.5;isolation:isolate"></circle>
<path d="M11,5a6,6,0,1,1-6,6,6,6,0,0,1,6-6m0-1a7,7,0,1,0,7,7A7,7,0,0,0,11,4Z" style="fill:#4dca59"></path>
<g style="opacity:0.5">
<path d="M11,1A10,10,0,1,1,1,11,10,10,0,0,1,11,1m0-1A11,11,0,1,0,22,11,11,11,0,0,0,11,0Z" style="fill:#4dca59"></path>
<!-- svg加绝对定位时 四个方位都要写全 只写left top就不行 -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
@click="pointJump(item)"
style="cursor:pointer;outline: none;width: 22px;height: 22px;"
>
<g transform="translate(0, 0) scale(1, 1)">
<g>
<circle cx="11" cy="11" r="6.5" style="fill:#4dca59;opacity:0.5;isolation:isolate"></circle>
<path d="M11,5a6,6,0,1,1-6,6,6,6,0,0,1,6-6m0-1a7,7,0,1,0,7,7A7,7,0,0,0,11,4Z" style="fill:#4dca59"></path>
<g style="opacity:0.5">
<path d="M11,1A10,10,0,1,1,1,11,10,10,0,0,1,11,1m0-1A11,11,0,1,0,22,11,11,11,0,0,0,11,0Z" style="fill:#4dca59"></path>
</g>
<circle cx="11" cy="11" r="3" style="fill:#4dca59"></circle>
</g>
<circle cx="11" cy="11" r="3" style="fill:#4dca59"></circle>
</g>
</g>
</svg>
</svg>
</div>
<div
v-for="(item, i) in text"
:key="i"

34
src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/Svg.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="box">
<img class="scaner" src="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" alt="">
<div class="box" ref="box">
<img class="scaner" :style="{width: shorterSide, height: shorterSide}" src="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" alt="">
<svg v-show="alarmLevelsLength === 5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<g>
<g>
@ -511,19 +511,34 @@
</template>
<script lang="ts" setup>
import { toRefs, computed } from 'vue'
import { toRefs, computed, onMounted, onUnmounted, ref } from 'vue'
import { ResizeObserverELE } from '@/utils/aboutHtml2Canvas'
const props = defineProps(['urgentName', 'seriousName', 'importantName', 'commonName', 'eventName', 'alarmMonitorData', 'alarmLevels'])
const { urgentName, seriousName, importantName, commonName, eventName, alarmMonitorData, alarmLevels } = toRefs(props)
const alarmLevelsLength = computed(() => {
return alarmLevels!.value.length
})
let shorterSide = ref('50px')
const box = ref(null)
const observer = ResizeObserverELE((w, h) => {
shorterSide.value = `${w > h ? h : w}px`
})
onMounted(() => {
observer.observe(box.value!);
})
onUnmounted(() => {
observer.disconnect();
})
</script>
<style lang="scss" scoped>
@keyframes rotate {
from { transform: translateY(-50%) scale(0.71) rotate(0)}
to { transform: translateY(-50%) scale(0.71) rotate(360deg) }
from { transform: translate(-50%, -50%) scale(0.71) rotate(0)}
to { transform: translate(-50%, -50%) scale(0.71) rotate(360deg) }
}
.box{
position: relative;
@ -532,18 +547,19 @@ const alarmLevelsLength = computed(() => {
height: 100%;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
//top: 50%;
//transform: translateY(-50%);
z-index: 2;
}
.scaner{
object-fit: contain;
// html2canvas不支持这个属性 解决方法:直接设置宽高
//object-fit: contain;
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
animation: rotate linear 5s infinite;
width: 100%;
z-index: 3;
//height: 100%;
}

11
src/utils/aboutHtml2Canvas.ts Normal file
View File

@ -0,0 +1,11 @@
import { throttle } from 'lodash'
// 监听元素的宽高变化
export const ResizeObserverELE = (callback = (w:number, h:number) => {}) => {
return new ResizeObserver(throttle((entries) => {
for (let entry of entries) {
const { width:w, height:h } = entry.contentRect;
callback(w, h)
}
}, 200));
}

3
src/utils/index.ts
View File

@ -7,4 +7,5 @@ export * from '@/utils/plugin'
export * from '@/utils/components'
export * from '@/utils/type'
export * from '@/utils/file'
export * from '@/utils/http'
export * from '@/utils/http'
export * from '@/utils/aboutHtml2Canvas'