xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大数据图片放大

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/page/largeScreen.vue
View File

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

77
src/views/page/largeScreen1.vue
View File

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