pull/172/head
sunmeng 2024-09-11 08:43:12 +08:00
parent ff4f3288d7
commit 0e83fc9fc4
5 changed files with 647 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

View File

@ -468,7 +468,7 @@ export default {
// item.id == 2 ;
// item.id == 1 ;
// item.id == 5 ;
const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5);
const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7);
if (!foundObject) {
this.$message('您当前没有权限查看!')
return

View File

@ -1,6 +1,6 @@
<template>
<div class="home">
<div class="park" @click="handlerOther">{{other_show ? '退':''}}</div>
<div class="park" v-if="limitUserId == 2" @click="handlerOther">{{other_show ? '退':''}}</div>
<div class="other" v-show="other_show"></div>
<div class="kuang">
<div class="title">温室智慧云数据统计</div>
@ -241,6 +241,46 @@
@click="handlerAxis_5"
/>
</div>
<!-- 大冶鑫 -->
<div class="drag_box7" ref="drag_box7" v-show="limitUserId == 7">
<img class="drag_img" src="../../assets/img/map3.jpg" alt="" />
<img
class="axis_shimen"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_5"
/>
<img
class="axis_shimen1"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_5"
/>
<img
class="axis_shimen2"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_5"
/>
<img
class="axis_shimen3"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_5"
/>
<img
class="axis_shimen4"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_5"
/>
<img
class="axis_shimen5"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_5"
/>
</div>
</div>
</div>
</div>
@ -448,6 +488,32 @@
</div>
</div>
</div>
<!-- 大冶鑫 -->
<div class="content_item" v-if="limitUserId == 7">
<div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
<div class="i_title" v-if="item.controlState != 0">
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span>
<span class="line"></span>
<span>{{
item.controlState == 1 ? "自动控制" : "手机控制"
}}</span>
<span class="line"></span>
<i class="progress" v-if="Number(item.progress) == ''"
>进度{{ item.progress }}%</i
>
<span>菜单</span>
</div>
<div class="i_title" v-else>
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span>
<span class="line"></span>
<span>无效</span>
<span class="line"></span>
<span>菜单</span>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1017,6 +1083,13 @@ export default {
this.get_environmentData(2023042214250070);
this.get_readControl_getState(2023042214250070);
// this.getWeatherData(2023042214250070);
}else if (limitUserId == 7) {
//
this.get_weather_echart_data(2023120613270120);
this.get_thisWeekTemperature_echart_data(2023120613270120);
this.get_environmentData(2023120613270120);
this.get_readControl_getState(2023120613270120);
this.getWeatherData(2023120613270120);
}
}
});
@ -1123,7 +1196,8 @@ export default {
res.data.data.forEach((item, index) => {
if (
item.cameraSerialNumber != null &&
item.deviceId == 2023042214250027
(item.deviceId == 2023042214250027||
item.deviceId == 2023120613270115)
) {
this.get_sel_eqbyid_list.push({ ...item, number: index });
@ -1272,7 +1346,8 @@ export default {
// id == 2 ;
// id == 1 ;
// id == 5 ;
this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5))[0].id;
// id == 5 ;
this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5 ||el.id == 7))[0].id;
if (this.limitUserId == 1) {
this.drag_boxHandler();
this.dataInit(userId, this.limitUserId);
@ -1282,6 +1357,9 @@ export default {
}else if (this.limitUserId == 5) {
this.drag_boxHandler5();
this.dataInit(userId, this.limitUserId);
} else if (this.limitUserId == 7) {
this.drag_boxHandler7();
this.dataInit(userId, this.limitUserId);
}
}
});
@ -1352,7 +1430,6 @@ export default {
handlerAxis_5() {
this.$router.push({ path: "/largeScreen1" });
},
toBackPage() {
this.$router.push({ path: "/realTime" });
},
@ -1368,6 +1445,8 @@ export default {
this.get_readControl_getState(2023112911050004);
}else if(this.limitUserId == 5){
this.get_readControl_getState(2023042214250070);
}else if(this.limitUserId == 7){
this.get_readControl_getState(2023120613270120);
}
},
@ -1507,7 +1586,63 @@ export default {
}
};
},
drag_boxHandler7() {
let demo = this.$refs.drag_box7;
demo = document.querySelector(".drag_box7"); //
let canMove = false; //
let x = 0,
y = 0; //
//
demo.onmousedown = function (e) {
x = e.pageX - demo.offsetLeft;
y = e.pageY - demo.offsetTop;
canMove = true; //
};
//
demo.oncontextmenu = function (e) {
e.preventDefault(); //
};
//
window.onmouseup = function () {
canMove = false; //
};
window.onblur = function () {
//
canMove = false; //
};
//
window.onmousemove = function (e) {
e.preventDefault(); //()
if (canMove) {
//
let left = e.pageX - x;
let top = e.pageY - y;
demo.style.left = left + "px";
demo.style.top = top + "px";
}
};
let scale = 1;
demo.onwheel = function (e) {
if (e.wheelDelta > 0) {
scale += 0.05;
if (scale > 4) {
scale = 4;
}
demo.style.transform = `scale(${scale})`;
// console.log(scale);
} else {
scale -= 0.05;
if (scale < 1) {
scale = 1;
}
demo.style.transform = `scale(${scale})`;
// console.log(scale);
}
};
},
drag_boxHandler5() {
let demo = this.$refs.drag_box5;
demo = document.querySelector(".drag_box5"); //
@ -2145,7 +2280,90 @@ export default {
z-index: 99;
}
}
.drag_box7{
width: 100%;
height: auto;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
top:-64px;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
blue 5%,
blue 93%,
transparent 99%
);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%,
blue 73%,
transparent 97%
);
}
.axis_shimen{
width: 0.4rem;
height: auto;
position: absolute;
top: 38%;
left: 28%;
z-index: 99;
cursor: pointer;
}
.axis_shimen1{
width: 0.4rem;
height: auto;
position: absolute;
top: 56%;
left: 26%;
z-index: 99;
cursor: pointer;
}
.axis_shimen2{
width: 0.4rem;
height: auto;
position: absolute;
top: 38%;
left: 66%;
cursor: pointer;
z-index: 99;
}
.axis_shimen3{
width: 0.4rem;
height: auto;
position: absolute;
top: 56%;
left: 67%;
z-index: 99;
cursor: pointer;
}
.axis_shimen4{
width: 0.4rem;
height: auto;
position: absolute;
top: 22%;
left: 53%;
z-index: 99;
cursor: pointer;
}
.axis_shimen5{
width: 0.4rem;
height: auto;
position: absolute;
top: 22%;
left: 67%;
z-index: 99;
cursor: pointer;
}
}
.drag_box {
width: 100%;
height: 100%;
@ -2358,7 +2576,7 @@ export default {
}
::v-deep .swiper-slide {
width: 0.74rem !important;
width: 0.84rem !important;
}
.swiper-slide1 {

View File

@ -387,6 +387,90 @@
</div>
</div>
</div>
<!-- 大冶鑫 -->
<div class="content" v-show="limitUserId == 7">
<div class="map">
<div class="map1">
<div class="drag_box7" ref="drag_box7">
<img class="drag_img" src="../../assets/img/map3.jpg" alt="" />
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
<template>
<div class="pole_item" :style="getTopOrLeft7(item.id)" @click="handlerPop(item.id)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
<img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div>
</template>
<!-- 弹框 -->
<template>
<div
class="pop_content1"
v-show="popContentCurrent == item.id ? true : false"
:style="getTopOrLeft77(item.id)"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler"
/>
<div class="p_video">
<img :src="item.greenhouseImage" alt="" />
</div>
<div class="text">{{ item.greenhouseName }}</div>
<div class="line"></div>
<div class="detail">
<div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>品种{{ item.greenhouseVariety }}</span>
</div>
<div class="d_item">
<img src="../../assets/img/detail_img.png" alt="" />
<span>数量{{ item.greenhouseNums }}</span>
</div>
</div>
<div class="grow">
<img src="../../assets/img/grow_img.png" alt="" />
<span>生长阶段</span>
<span>{{ item.growthStageName }}</span>
</div>
<div class="line" style="margin-top: 0.06rem"></div>
<div class="icon_item scroll">
<div
class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<img
:src="
require('../../assets/image/real-time-' +
item1.formula +
'.png')
"
alt=""
/>
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList(item1.formula)
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -916,7 +1000,37 @@ export default {
}
}
},
getTopOrLeft7(id){
if(id == 1){
return 'top:34%;left:62%'
}else if(id == 2){
return 'top:19%;left:64%'
}else if(id == 3){
return 'top:19%;left:50%'
}else if(id == 4){
return 'top:52%;left:22%'
}else if(id == 5){
return 'top:34%;left:25%'
}else if(id == 6){
return 'top:52%;left:64%'
}
},
getTopOrLeft77(id){
if(id == 1){
return 'top:34%;left:62%;transform: translate(54%,-50%);'
}else if(id == 2){
return 'top:19%;left:64%;transform: translate(54%,0%);'
}else if(id == 3){
return 'top:19%;left:50%;transform: translate(54%,0%);'
}else if(id == 4){
return 'top:52%;left:22%;transform: translate(54%,-50%);'
}else if(id == 5){
return 'top:34%;left:25%;transform: translate(54%,-50%);'
}else if(id == 6){
return 'top:52%;left:64%;transform: translate(54%,-50%);'
}
},
getNamePosition(id) {
if (id == 1) {
return "position: absolute;top: 41%;left: 13%;";
@ -959,6 +1073,11 @@ export default {
if(that.popContentCurrent > 4){
that.popContentCurrent = 1;
}
} else if(that.limitUserId == 7){
that.popContentCurrent++;
if(that.popContentCurrent > 6){
that.popContentCurrent = 1;
}
}
}, 3000);
},
@ -1017,6 +1136,11 @@ export default {
if(that.popContentCurrent > 4){
that.popContentCurrent = 1;
}
}else if(that.limitUserId == 7){
that.popContentCurrent++;
if(that.popContentCurrent > 6){
that.popContentCurrent = 1;
}
}
}, 3000);
}
@ -1026,13 +1150,15 @@ export default {
get_user_getjurisdiction(userId) {
this.api.user_getjurisdiction(userId).then((res) => {
if (res.data.code == 200) {
this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5))[0].id;
this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5|| el.id == 7))[0].id;
if (this.limitUserId == 1) {
this.drag_boxHandler();
} else if (this.limitUserId == 2) {
this.drag_boxHandler1();
} else if (this.limitUserId == 5) {
this.drag_boxHandler5();
} else if (this.limitUserId == 7) {
this.drag_boxHandler7();
}
}
});
@ -1214,7 +1340,73 @@ export default {
}
};
},
drag_boxHandler7() {
let demo = this.$refs.drag_box7;
demo = document.querySelector(".drag_box7"); //
let canMove = false; //
let x = 0,
y = 0; //
//
demo.onmousedown = function (e) {
x = e.pageX - demo.offsetLeft;
y = e.pageY - demo.offsetTop;
canMove = true; //
};
//
demo.oncontextmenu = function (e) {
e.preventDefault(); //
};
//
window.onmouseup = function () {
canMove = false; //
};
window.onblur = function () {
//
canMove = false; //
};
//
window.onmousemove = function (e) {
e.preventDefault(); //()
if (canMove) {
//
let left = e.pageX - x;
let top = e.pageY - y;
//if (left > 0) left = 0 //0 0
//if (top > 0) top = 0 //0 0
// // (div)
// let maxLeft = window.innerWidth - demo.offsetWidth
// // (div)
// let maxTop = window.innerHeight - demo.offsetHeight
// if (left > maxLeft) left = maxLeft
// if (top > maxTop) top = maxTop
demo.style.left = left + "px";
demo.style.top = top + "px";
}
};
let scale = 1;
demo.onwheel = function (e) {
if (e.wheelDelta > 0) {
scale += 0.05;
if (scale > 4) {
scale = 4;
}
demo.style.transform = `scale(${scale})`;
// console.log(scale);
} else {
scale -= 0.05;
if (scale < 1) {
scale = 1;
}
demo.style.transform = `scale(${scale})`;
// console.log(scale);
}
};
},
drag_boxHandler5() {
let demo = this.$refs.drag_box5;
demo = document.querySelector(".drag_box5"); //
@ -1950,7 +2142,234 @@ export default {
}
}
}
.drag_box7{
width: 100%;
height: auto;
position: absolute;
top:-95px;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
blue 5%,
blue 93%,
transparent 99%
);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%,
blue 73%,
transparent 97%
);
}
.pole_item{
// width: 0.5rem;
height: 0.34rem;
position: absolute;
top: 21%;
left: 5%;
cursor: pointer;
.p_title {
// width: 0.5rem;
// height: 0.22rem;
background: rgba(1, 12, 28, 0.7);
border-radius:40px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0.04rem;
// position: absolute;
overflow: hidden;
white-space: nowrap;
> img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.05rem;
}
> span {
font-size: 0.2rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
flex: 1;
}
}
.pole1 {
width: 0.5rem;
height:auto;
position: absolute;
left: 50%;
top: .2rem;
transform: translateX(-50%)
}
}
.pop_content1 {
width: 3.5rem;
height: 4.55rem;
background: url("../../assets/img/pop_bg.png") center no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: absolute;
// top: 17%;
// left: 23%;
z-index: 999999;
.close_img {
width: 0.2rem;
height: 0.2rem;
position: absolute;
top: 0;
right: 0;
}
.p_video {
width: 90%;
height: 1.82rem;
margin: 0.1rem auto 0;
> img {
width: 100%;
height: 100%;
}
}
.text {
width: 100%;
height: 0.4rem;
font-size: 0.2rem;
font-family: AlimamaShuHeiTi-Bold;
font-weight: bold;
color: #f3fdff;
line-height: 0.4rem;
box-sizing: border-box;
padding-left: 0.2rem;
}
.line {
width: 90%;
height: 0.01rem;
background: #51d4fa;
opacity: 0.5;
margin: 0 auto;
}
.detail {
width: 100%;
height: 0.45rem;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 0 0.15rem;
.d_item {
height: 0.3rem;
background: rgba(81, 212, 250, 0.15);
border: 0.01rem solid rgba(106, 222, 255, 0.4);
border-radius: 0.02rem;
display: flex;
justify-content: center;
// align-items: center;
box-sizing: border-box;
padding: 0.05rem 0.05rem;
> img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.05rem;
}
> span {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #d9effd;
}
}
}
.grow {
width: 2.5rem;
height: 0.3rem;
background: url("../../assets/img/grow_bg.png") center no-repeat;
background-size: 100% 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
> img {
width: 0.18rem;
height: 0.18rem;
margin-right: 0.05rem;
}
> span:nth-child(2) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
}
> span:nth-child(3) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #36ffd2;
}
}
.icon_item {
width: 100%;
height: calc(100% - 3.22rem);
box-sizing: border-box;
padding: 0.1rem 0.15rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow: auto;
.icon_item_child {
width: 33.33%;
height: 33.33%;
display: flex;
margin-bottom: 0.05rem;
> img {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.05rem;
}
> div {
display: flex;
flex-direction: column;
> span:nth-child(1) {
font-size: 0.12rem;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #86d9ff;
}
> span:nth-child(2) {
font-size: 0.15rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
color: #ffffff;
}
}
}
}
}
}
.drag_box5{
width: 100%;
height: 100%;