大数据图片放大

This commit is contained in:
home孙 2025-06-07 15:46:11 +08:00
parent f605de093f
commit 407f13d790
2 changed files with 31 additions and 64 deletions

View File

@ -2226,8 +2226,8 @@ export default {
transparent 100%);
.map1 {
width: 60%;
height: 60%;
width: 70%;
height:90%;
// background: url('../assets/img/map.png') center no-repeat;
// background-size: 100% 100%;
// -webkit-mask-image: linear-gradient(0deg, transparent 5%,
@ -2360,7 +2360,7 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top: -64px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 5%,
@ -2443,13 +2443,12 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top: -64px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 2%,
blue 97%,
transparent 99%);
.drag_img {
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
@ -2591,7 +2590,6 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top: -64px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 2%,
@ -2642,7 +2640,7 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top: -64px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 2%,
@ -2676,7 +2674,7 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top: -64px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 2%,
@ -2781,7 +2779,7 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top: -64px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 2%,
@ -2905,7 +2903,7 @@ export default {
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top: -64px;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 2%,

View File

@ -32,7 +32,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -97,7 +96,7 @@
<div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'">
<template>
<div class="pole_item" :style="'top:' +
(21 + index * 0.1) +
(27 + index * 0.1) +
'%' +
';' +
'left:' +
@ -109,7 +108,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -160,7 +158,7 @@
<div class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'">
<template>
<div class="pole_item_1" :style="'top:' +
(51 + index * 0.2) +
(57 + index * 0.2) +
'%' +
';' +
'left:' +
@ -172,7 +170,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -236,7 +233,7 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -300,7 +297,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -364,7 +360,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>泵房</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
</div>
@ -375,7 +370,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -439,11 +433,7 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>泵房</span>
</div>
<img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div>
</template>
</div> -->
@ -453,7 +443,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>100个拱棚</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
@ -463,7 +452,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -526,7 +514,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>泵房</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div>
<div class="popBox">
@ -535,7 +522,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制中心</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
@ -545,7 +531,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -611,7 +596,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -674,7 +658,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制中心</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
@ -684,7 +667,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -737,7 +719,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制器南</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div>
@ -747,7 +728,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制器北</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div> -->
</div>
@ -766,7 +746,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>C1</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div>
<div class="popBox">
@ -775,7 +754,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>C2</span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
@ -785,7 +763,6 @@
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div>
</template>
@ -958,17 +935,17 @@ export default {
getTopOrLeft1_1(id) {
if (id == 1) {
return "top: 68%;left: 6%;transform: translate(54%,-50%);";
return "top: 81%;left: 6%;transform: translate(54%,-50%);";
}else if (id == 2) {
return "top: 60%;left: 20%;transform: translate(54%,-50%);";
return "top: 73%;left: 20%;transform: translate(54%,-50%);";
} else if (id == 3) {
return "top: 51%;left: 36%;transform: translate(54%,-40%);";
return "top: 64%;left: 36%;transform: translate(54%,-40%);";
} else if (id == 4) {
return "top: 38%;left: 56%;transform: translate(54%,0);";
return "top: 41%;left: 56%;transform: translate(54%,0);";
} else if (id == 5) {
return "top: 27%;left: 71%;transform: translate(-20%,20%);";
return "top: 33%;left: 71%;transform: translate(-20%,20%);";
} else if (id == 6) {
return "top: 19%;left: 81%;transform: translate(-20%,20%);";
return "top: 25%;left: 81%;transform: translate(-40%,20%);";
}
},
@ -1244,17 +1221,17 @@ export default {
},
getNamePosition(id) {
if (id == 1) {
return "position: absolute;top: 68%;left: 6%;";
return "position: absolute;top: 81%;left: 6%;";
} else if (id == 2) {
return "position: absolute;top: 60%;left: 20%;";
return "position: absolute;top: 73%;left: 20%;";
} else if (id == 3) {
return "position: absolute;top: 51%;left: 36%;";
return "position: absolute;top: 64%;left: 36%;";
} else if (id == 4) {
return "position: absolute;top: 38%;left: 56%;";
return "position: absolute;top: 51%;left: 56%;";
} else if (id == 5) {
return "position: absolute;top: 27%;left: 71%;";
return "position: absolute;top: 40%;left: 71%;";
} else if (id == 6) {
return "position: absolute;top: 19%;left: 81%;";
return "position: absolute;top: 32%;left: 81%;";
}
},
@ -2268,11 +2245,11 @@ export default {
width: 0.5rem;
height: 0.22rem;
position: absolute;
// top: 21%;
// left: 5%;
top: 21%;
left: 5%;
.p_title {
width: 0.5rem;
// width: 0.5rem;
height: 0.22rem;
background: rgba(1, 12, 28, 0.7);
border-radius: 12px;
@ -2280,7 +2257,6 @@ export default {
align-items: center;
box-sizing: border-box;
padding: 0.04rem;
position: absolute;
overflow: hidden;
white-space: nowrap;
@ -2494,7 +2470,7 @@ export default {
.pole_item {
width: 1.45rem;
height: 1.8rem;
height: 0.44rem;
.p_title {
width: 1.45rem;
@ -2505,9 +2481,6 @@ export default {
align-items: center;
box-sizing: border-box;
padding: 0 0 0 10px;
position: absolute;
top: 0;
left: 0;
>img {
width: 0.32rem;
@ -2761,10 +2734,8 @@ export default {
// width: 0.5rem;
height: 0.34rem;
position: absolute;
top: 21%;
left: 5%;
cursor: pointer;
transform: translate(-10%,300%);
.p_title {
// width: 0.5rem;
// height: 0.22rem;
@ -2983,14 +2954,13 @@ export default {
}
.pole_item {
width: 0.5rem;
height: 0.22rem;
position: absolute;
top: 21%;
left: 5%;
transform: translate(-10%,200%);
.p_title {
width: 0.5rem;
// width: 0.5rem;
height: 0.22rem;
background: rgba(1, 12, 28, 0.7);
border-radius: 12px;
@ -2998,7 +2968,6 @@ export default {
align-items: center;
box-sizing: border-box;
padding: 0.04rem;
position: absolute;
overflow: hidden;
white-space: nowrap;