diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue
index a9102e43..dff8f934 100644
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
@@ -6,8 +6,10 @@
height: heightVal + 'px',
cursor: isDrag ? 'pointer' : 'default',
scale: isSizeRadio,
- transformOrigin: '0 0'
+ transformOrigin: '0 0',
+ width: widthVal + 'px'
}"
+ @wheel="handleWheel"
>
{
}
//获取扫描图
const getMapData = async (item) => {
- // console.log('============', JSON.parse(item.yamlJson))
+ console.log('===22=========', JSON.parse(item.yamlJson))
+ widthVal.value = JSON.parse(item.yamlJson).width
+ heightVal.value = JSON.parse(item.yamlJson).height
testCarList.value = []
nowObject.value = JSON.parse(JSON.stringify(item))
nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
@@ -811,7 +815,32 @@ const getMapLineList = () => {
lineList.value = res
})
}
+//鼠标滚轮
+const handleWheel = (event) => {
+ // 判断 Ctrl 键是否被按下
+ if (event.ctrlKey) {
+ // 阻止默认的滚动行为
+ event.preventDefault()
+ // 根据滚轮滚动方向调整缩放比例
+ if (event.deltaY < 0) {
+ // 向上滚动,放大
+ //放大
+ if (isSizeRadio.value < 4) {
+ isSizeRadio.value += 0.2
+ } else {
+ message.warning('不能在放大了')
+ }
+ } else {
+ //缩小
+ if (isSizeRadio.value > 0.2) {
+ isSizeRadio.value -= 0.2
+ } else {
+ message.warning('不能在缩小了')
+ }
+ }
+ }
+}
// 获取图片尺寸
const getImageSize = (url) => {
return new Promise((resolve, reject) => {
@@ -935,8 +964,8 @@ onUnmounted(() => {
.affix-container {
width: 100%;
position: relative;
- overflow: hidden;
- background: rgba(0, 0, 0, 0.8);
+ // overflow: hidden;
+ // background: rgba(0, 0, 0, 0.8);
}
.indexpage-container {
width: 100%;
diff --git a/src/views/mapPage/realTimeMap/index.vue b/src/views/mapPage/realTimeMap/index.vue
index 130461b7..e78f6d86 100644
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@@ -189,6 +189,6 @@ onMounted(() => {