~
This commit is contained in:
pangdundun
parent
2914d76401
commit
ad569e6c36
BIN
src/assets/img/map2.png
Normal file
BIN
src/assets/img/map2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
@ -284,9 +284,11 @@ export default {
|
||||
return
|
||||
|
||||
} else if (item.router == 'largeScreen') {
|
||||
const foundObject = this.limitUserId.find(item => item.id == 2);
|
||||
const foundObject1 = this.limitUserId.find(item => item.id == 1);
|
||||
if (!foundObject || !foundObject1) {
|
||||
// item.id == 2 东北;
|
||||
// item.id == 1 丽水;
|
||||
// item.id == 5 石门;
|
||||
const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5);
|
||||
if (!foundObject) {
|
||||
this.$message('您当前没有权限查看!')
|
||||
return
|
||||
} else {
|
||||
|
||||
@ -107,6 +107,7 @@
|
||||
<div class="middle">
|
||||
<div class="map">
|
||||
<div class="map1">
|
||||
<!-- 丽水 -->
|
||||
<div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
|
||||
<img class="drag_img" src="../../assets/img/map.png" alt="" />
|
||||
<img
|
||||
@ -152,6 +153,7 @@
|
||||
@click="handlerAxis_1"
|
||||
/>
|
||||
</div>
|
||||
<!-- 东北 -->
|
||||
<div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
|
||||
<img class="drag_img" src="../../assets/img/map1.png" alt="" />
|
||||
<img
|
||||
@ -185,6 +187,40 @@
|
||||
:key="index1 + '_2'"
|
||||
/>
|
||||
</div>
|
||||
<!-- 石门 -->
|
||||
<div class="drag_box5" ref="drag_box5" v-show="limitUserId == 5">
|
||||
<img class="drag_img" src="../../assets/img/map2.png" alt="" />
|
||||
<img
|
||||
class="axis_shimen"
|
||||
src="../../assets/img/axis2.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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -240,7 +276,7 @@
|
||||
@click="getCurrent(index, item)"
|
||||
>
|
||||
{{
|
||||
item.greenhouseName + (limitUserId == 1 ? "温室" : "")
|
||||
item.greenhouseName
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
@ -340,16 +376,35 @@
|
||||
</div>
|
||||
|
||||
<!-- 东北 -->
|
||||
<div
|
||||
class="content_item"
|
||||
v-if="limitUserId == 2"
|
||||
style="margin-top: 0.05rem"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in fiveControlList"
|
||||
:key="index"
|
||||
style="margin-bottom: 0.15rem"
|
||||
>
|
||||
<div class="content_item" v-if="limitUserId == 2" style="margin-top: 0.05rem">
|
||||
<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 class="content_item" v-if="limitUserId == 5">
|
||||
<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>
|
||||
@ -932,6 +987,13 @@ export default {
|
||||
this.get_environmentData(2023112911050004);
|
||||
this.get_readControl_getState(2023112911050004);
|
||||
this.getWeatherData(2023112911050004);
|
||||
}else if (limitUserId == 5) {
|
||||
// 石门
|
||||
this.get_weather_echart_data(2023042214250070);
|
||||
this.get_thisWeekTemperature_echart_data(2023042214250070);
|
||||
this.get_environmentData(2023042214250070);
|
||||
this.get_readControl_getState(2023042214250070);
|
||||
this.getWeatherData(2023042214250070);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1184,13 +1246,20 @@ export default {
|
||||
get_user_getjurisdiction(userId) {
|
||||
this.api.user_getjurisdiction(userId).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.limitUserId = res.data.data[0].id;
|
||||
// id == 2 东北;
|
||||
// id == 1 丽水;
|
||||
// id == 5 石门;
|
||||
this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5))[0].id;
|
||||
|
||||
if (this.limitUserId == 1) {
|
||||
this.drag_boxHandler();
|
||||
this.dataInit(userId, this.limitUserId);
|
||||
} else if (this.limitUserId == 2) {
|
||||
this.drag_boxHandler1();
|
||||
this.dataInit(userId, this.limitUserId);
|
||||
}else if (this.limitUserId == 5) {
|
||||
this.drag_boxHandler5();
|
||||
this.dataInit(userId, this.limitUserId);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1258,6 +1327,10 @@ export default {
|
||||
this.$router.push({ path: "/largeScreen1" });
|
||||
},
|
||||
|
||||
handlerAxis_5() {
|
||||
this.$router.push({ path: "/largeScreen1" });
|
||||
},
|
||||
|
||||
toBackPage() {
|
||||
this.$router.push({ path: "/realTime" });
|
||||
},
|
||||
@ -1405,6 +1478,64 @@ export default {
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
drag_boxHandler5() {
|
||||
let demo = this.$refs.drag_box5;
|
||||
demo = document.querySelector(".drag_box5"); //待拖拽元素
|
||||
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);
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1898,6 +2029,76 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.drag_box5{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
// top: 0.3rem;
|
||||
// left: 0.5rem;
|
||||
z-index: 10;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
blue 5%,
|
||||
blue 93%,
|
||||
transparent 99%
|
||||
);
|
||||
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
transparent 0%,
|
||||
blue 13%,
|
||||
blue 73%,
|
||||
transparent 97%
|
||||
);
|
||||
}
|
||||
|
||||
.axis_shimen{
|
||||
width: 0.4rem;
|
||||
height: 0.5rem;
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
left: 9%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.axis_shimen1{
|
||||
width: 0.3rem;
|
||||
height: 0.4rem;
|
||||
position: absolute;
|
||||
top: 52%;
|
||||
left: 16%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.axis_shimen2{
|
||||
width: 0.3rem;
|
||||
height: 0.4rem;
|
||||
position: absolute;
|
||||
top: 50.3%;
|
||||
left: 18%;
|
||||
z-index: 99;
|
||||
}
|
||||
.axis_shimen3{
|
||||
width: 0.3rem;
|
||||
height: 0.4rem;
|
||||
position: absolute;
|
||||
top: 48.3%;
|
||||
left: 20%;
|
||||
z-index: 99;
|
||||
}
|
||||
.axis_shimen4{
|
||||
width: 0.3rem;
|
||||
height: 0.4rem;
|
||||
position: absolute;
|
||||
top: 46.3%;
|
||||
left: 22%;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
.drag_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user