pc-master #63
|
|
@ -160,6 +160,10 @@ export default {
|
|||
getControlGetState(data) {
|
||||
return sendGetRequest('/readControl/getState', data)
|
||||
},
|
||||
//控制器 气象站实时数据折线图
|
||||
getControlChartdata(data) {
|
||||
return sendPostRequest('/equip/chartdata?equipmentId='+data, '')
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
|
@ -210,4 +214,18 @@ export default {
|
|||
return sendGetRequest(`/readControl/fiveControl`, data);
|
||||
},
|
||||
|
||||
// 查看用户额外权限
|
||||
user_getjurisdiction(userId,data){
|
||||
return sendGetRequest(`/user/getjurisdiction?userId=${userId}`, data)
|
||||
},
|
||||
|
||||
|
||||
//实时数据页面状态值(查看全部设备)
|
||||
getStatePermissionStatus(data){
|
||||
return sendGetRequest(`/getcontrol/getStatePermissionStatus`, data)
|
||||
},
|
||||
getPermissionStatus(data){
|
||||
return sendGetRequest(`/getcontrol/getPermissionStatus`, data)
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -225,6 +225,11 @@
|
|||
color: #00FFBA;
|
||||
}
|
||||
|
||||
.table-title .title-text {
|
||||
font-size: 16px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1694,7 +1699,7 @@
|
|||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-top {
|
||||
padding: 0 10px 0 20px;
|
||||
padding: 0 10px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -1707,6 +1712,7 @@
|
|||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-top .status-view-top-right {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -245,6 +245,10 @@
|
|||
font-weight: 400;
|
||||
color: #00FFBA;
|
||||
}
|
||||
.title-text{
|
||||
font-size: 16px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.index {
|
||||
|
|
@ -1791,7 +1795,7 @@ margin-top: 20px;
|
|||
margin: 7.5px;
|
||||
|
||||
.status-view-top {
|
||||
padding: 0 10px 0 20px;
|
||||
padding: 0 10px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -1803,6 +1807,7 @@ margin-top: 20px;
|
|||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-view-top-right {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
|
|
@ -89,6 +89,7 @@ export default {
|
|||
loading: true,//页面加载
|
||||
IDTimer: null,
|
||||
deviceId:'',
|
||||
limitUserId:''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -125,11 +126,25 @@ export default {
|
|||
that.getEqbyid()
|
||||
}, 120000);
|
||||
|
||||
// 获取用户id权限
|
||||
this.get_user_getjurisdiction()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.IDTimer && clearInterval(this.IDTimer)
|
||||
},
|
||||
methods: {
|
||||
// 获取用户id权限
|
||||
get_user_getjurisdiction() {
|
||||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
let userId = userInfo.userid
|
||||
this.api.user_getjurisdiction(userId).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.limitUserId = res.data.data[0].id;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
//获取设备名称/配方名称
|
||||
getByid() {
|
||||
var store = this.$store.state
|
||||
|
|
@ -255,6 +270,7 @@ export default {
|
|||
return
|
||||
|
||||
} else if (item.router != this.routerNow && !item.http) {
|
||||
if(this.limitUserId == 0) return this.$message('您当前没有权限查看!')
|
||||
this.$router.push({ name: item.router })
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
<div class="middle">
|
||||
<div class="map">
|
||||
<div class="map1">
|
||||
<div class="drag_box" ref="drag_box">
|
||||
<div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
|
||||
<img class="drag_img" src="../../assets/img/map.png" alt="" />
|
||||
<img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
|
||||
<img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
|
||||
|
|
@ -100,6 +100,12 @@
|
|||
<img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
|
||||
<img class="axis_7" src="../../assets/img/axis2.png" alt="" @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 class="axis_init" :class="'axis_' + (index + 8)" src="../../assets/img/axis1.png" :style="'left:' + (48.5 + index * 4.1) + '%'" alt="" @click="handlerAxis_2" v-for="(i,index) in 10" :key="index + '_1'"/>
|
||||
|
||||
<img class="axis_init1" :class="'axis_' + (index1 + 17)" src="../../assets/img/axis1.png" :style="'top:' + (22 + index1 * 0.105) + '%' + ';' + 'left:' + (5 + index1 * 3.3) + '%' + ';'" alt="" @click="handlerAxis_2" v-for="(i,index1) in 25" :key="index1 + '_2'"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -673,10 +679,13 @@ export default {
|
|||
unit: "dB",
|
||||
},
|
||||
],
|
||||
|
||||
limitUserId:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.drag_boxHandler();
|
||||
|
||||
|
||||
|
||||
this.login();
|
||||
|
||||
|
|
@ -943,6 +952,9 @@ export default {
|
|||
this.dataInit(userInfo.userid);
|
||||
this.get_sel_eqbyid(userInfo.userid);
|
||||
|
||||
// 获取用户id权限
|
||||
this.get_user_getjurisdiction(userInfo.userid)
|
||||
|
||||
// this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
|
||||
// console.log(this.autoPlay);
|
||||
// if (this.autoPlay == false) {
|
||||
|
|
@ -954,6 +966,20 @@ export default {
|
|||
// }
|
||||
},
|
||||
|
||||
// 获取用户id权限
|
||||
get_user_getjurisdiction(userId){
|
||||
this.api.user_getjurisdiction(userId).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.limitUserId = res.data.data[0].id;
|
||||
if(this.limitUserId == 1){
|
||||
this.drag_boxHandler();
|
||||
}else if(this.limitUserId == 2){
|
||||
this.drag_boxHandler1();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// autoPlay1() {
|
||||
// this.autoPlay = false;
|
||||
// clearInterval(this.timer_) && this.timer_;
|
||||
|
|
@ -1012,6 +1038,10 @@ export default {
|
|||
this.$router.push({ path: "/largeScreen1" });
|
||||
},
|
||||
|
||||
handlerAxis_2() {
|
||||
this.$router.push({ path: "/largeScreen1" });
|
||||
},
|
||||
|
||||
toBackPage() {
|
||||
this.$router.push({ path: "/realTime" });
|
||||
},
|
||||
|
|
@ -1089,6 +1119,74 @@ export default {
|
|||
}
|
||||
};
|
||||
},
|
||||
|
||||
drag_boxHandler1() {
|
||||
let demo = this.$refs.drag_box1;
|
||||
demo = document.querySelector(".drag_box1"); //待拖拽元素
|
||||
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);
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1506,6 +1604,43 @@ export default {
|
|||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
|
||||
.drag_box1{
|
||||
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_init{
|
||||
width: 0.4rem;
|
||||
height: 0.5rem;
|
||||
position: absolute;
|
||||
top: 54%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.axis_init1{
|
||||
width: 0.4rem;
|
||||
height: 0.5rem;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
.drag_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<span>{{ time.time }}</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content" v-show="limitUserId == 1">
|
||||
<div class="map">
|
||||
<div class="map1">
|
||||
<div class="drag_box" ref="drag_box">
|
||||
|
|
@ -40,48 +40,10 @@
|
|||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
||||
</div>
|
||||
<!-- <div class="pole_item pole_item2" @click="handlerPop(3)">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="" />
|
||||
<span>1#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
||||
</div>
|
||||
<div class="pole_item pole_item3" @click="handlerPop(4)">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi1.png" alt="" />
|
||||
<span>3#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole.png" alt="" />
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="pole_item pole_item5" @click="handlerPop(5)">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="" />
|
||||
<span>4#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
||||
</div>
|
||||
<div class="pole_item pole_item6" @click="handlerPop(6)">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="" />
|
||||
<span>5#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
||||
</div>
|
||||
<div class="pole_item pole_item7" @click="handlerPop(7)">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="" />
|
||||
<span>6#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="" />
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<!-- 弹框 -->
|
||||
<template>
|
||||
<!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
|
||||
v-if="popContentCurrent == index ? true : false"> -->
|
||||
<div class="pop_content" :style="getTopOrLeft(item.id)"
|
||||
v-show="popContentCurrent == item.id ? true : false">
|
||||
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
|
||||
|
|
@ -132,44 +94,126 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
|
||||
<div class="pop_content">
|
||||
<div class="p_video">
|
||||
<img src="../assets/img/c_top.png" alt="">
|
||||
</div>
|
||||
<div class="text">某某项目温室一号</div>
|
||||
<div class="line"></div>
|
||||
<div class="detail">
|
||||
<div class="d_item">
|
||||
<img src="../assets/img/detail_img.png" alt="">
|
||||
<span>面积：6652㎡</span>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<img src="../assets/img/detail_img.png" alt="">
|
||||
<span>品种：番茄</span>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<img src="../assets/img/detail_img.png" alt="">
|
||||
<span>数量：80000株</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow">
|
||||
<img src="../assets/img/grow_img.png" alt="">
|
||||
<span>生长阶段：</span>
|
||||
<span>幼苗期</span>
|
||||
</div>
|
||||
<div class="line" style="margin-top: 0.2rem;"></div>
|
||||
<div class="icon_item">
|
||||
<div class="icon_item_child" v-for="(item, index) in list" :key="index">
|
||||
<img :src="item.img" alt="">
|
||||
<div>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.data }}</span>
|
||||
|
||||
<div class="content" v-show="limitUserId == 2">
|
||||
<div class="map">
|
||||
<div class="map1">
|
||||
<div class="drag_box1" ref="drag_box1">
|
||||
<img class="drag_img" src="../../assets/img/map1.png" alt="" />
|
||||
<div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'">
|
||||
<template>
|
||||
<div class="pole_item"
|
||||
:style="'top:' + (21 + index * .1) + '%' + ';' + 'left:' + (83 - index * 3.24) + '%' + ';'" @click="handlerPop1(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="popContentCurrent1 == item.id ? true : false" :style="getTopOrLeft1(item.id)">
|
||||
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/>
|
||||
<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 class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'">
|
||||
<template >
|
||||
<div class="pole_item_1"
|
||||
:style="'top:' + (51 + index * .2) + '%' + ';' + 'left:' + (84 - index * 4.05) + '%' + ';'" @click="handlerPop1(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="popContentCurrent1 == item.id ? true : false" :style="getTopOrLeft11(item.id)">
|
||||
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/>
|
||||
<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>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -221,6 +265,7 @@ export default {
|
|||
|
||||
popContentList: [],
|
||||
popContentCurrent: 1,
|
||||
popContentCurrent1: 1,
|
||||
|
||||
// 自动跳转和手动跳转切换
|
||||
autoPlay: false, //false 手动切换 true 自动切换
|
||||
|
|
@ -582,10 +627,14 @@ export default {
|
|||
unit: "dB",
|
||||
},
|
||||
],
|
||||
|
||||
limitUserId: '',
|
||||
popContentList1: [],
|
||||
popContentList2: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.drag_boxHandler();
|
||||
|
||||
|
||||
this.login();
|
||||
|
||||
|
|
@ -602,7 +651,7 @@ export default {
|
|||
// 根据用户id查询对应的设备大数据信息
|
||||
dataInit(userid) {
|
||||
this.api.Bigdata_getAllControl(userid).then((res) => {
|
||||
console.log("根据用户id查询对应的设备大数据信息", res);
|
||||
// console.log("根据用户id查询对应的设备大数据信息", res);
|
||||
this.popContentList = res.data.data;
|
||||
this.popContentList = this.popContentList.map((item) => {
|
||||
return {
|
||||
|
|
@ -620,6 +669,14 @@ export default {
|
|||
});
|
||||
});
|
||||
// console.log(this.popContentList,'12121212');
|
||||
if (this.limitUserId == 2) {
|
||||
this.popContentList1 = (this.popContentList.slice(0, 25))
|
||||
// this.popContentList2 = this.popContentList.slice(-10)
|
||||
if(this.popContentList.length > 25){
|
||||
this.popContentList2 = (this.popContentList.slice(-(this.popContentList.length - 25)))
|
||||
}
|
||||
console.log(this.popContentList1);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -639,6 +696,33 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
getTopOrLeft1(id) {
|
||||
for(let i = 0; i < 26;i++){
|
||||
if(id == (i + 1)){
|
||||
return `top:34%;left:${(74 - i * 3) < 15 ? 15 : (74 - i * 3)}%;transform: translate(-50%,-50%);`;
|
||||
}
|
||||
}
|
||||
// if (id == 1) {
|
||||
// return "top:34%;left:74%;transform: translate(-50%,-50%);";
|
||||
// } else if (id == 2) {
|
||||
// return "top:34%;left:70%;transform: translate(-50%,-50%);";
|
||||
// }else if(id == 3){
|
||||
// return "top:34%;left:68%;transform: translate(-50%,-50%);";
|
||||
// }
|
||||
},
|
||||
|
||||
getTopOrLeft11(id) {
|
||||
for(let i=0;i<10;i++){
|
||||
if(id == (i + 26))
|
||||
return `top:65%;left:${77 - i *4}%;transform: translate(-50%,-50%);`
|
||||
}
|
||||
// if (id == 10) {
|
||||
// return "top:65%;left:57%;transform: translate(-50%,-50%);";
|
||||
// } else if (id == 11) {
|
||||
// return "top:65%;left:61%;transform: translate(-50%,-50%);";
|
||||
// }
|
||||
},
|
||||
|
||||
getNamePosition(id) {
|
||||
if (id == 1) {
|
||||
return "position: absolute;top: 41%;left: 13%;"
|
||||
|
|
@ -662,14 +746,22 @@ export default {
|
|||
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
|
||||
},
|
||||
autoPlay2() {
|
||||
let that = this
|
||||
this.autoPlay = true;
|
||||
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
|
||||
this.timer2 = setInterval(() => {
|
||||
this.popContentCurrent++;
|
||||
if (this.popContentCurrent > 6) {
|
||||
this.popContentCurrent = 1;
|
||||
// this.$router.push({ path: "/largeScreen" });
|
||||
if(that.limitUserId == 1){
|
||||
that.popContentCurrent++;
|
||||
if (that.popContentCurrent > 6) {
|
||||
that.popContentCurrent = 1;
|
||||
}
|
||||
}else if(that.limitUserId == 2){
|
||||
that.popContentCurrent1++;
|
||||
if (that.popContentCurrent1 > 35) {
|
||||
that.popContentCurrent1 = 1;
|
||||
}
|
||||
}
|
||||
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
|
|
@ -702,23 +794,44 @@ export default {
|
|||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
this.dataInit(userInfo.userid);
|
||||
|
||||
// 获取用户id权限
|
||||
this.get_user_getjurisdiction(userInfo.userid)
|
||||
|
||||
let that = this;
|
||||
this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
|
||||
// this.popContentCurrent = 0;
|
||||
if (this.autoPlay == false) {
|
||||
clearInterval(that.timer2) && this.timer2;
|
||||
} else {
|
||||
this.timer2 = setInterval(() => {
|
||||
this.popContentCurrent++;
|
||||
console.log('this.popContentCurrent', this.popContentCurrent);
|
||||
if (this.popContentCurrent > 6) {
|
||||
this.popContentCurrent = 1;
|
||||
// this.$router.push({ path: "/largeScreen" });
|
||||
if(that.limitUserId == 1){
|
||||
that.popContentCurrent++;
|
||||
if (that.popContentCurrent > 6) {
|
||||
that.popContentCurrent = 1;
|
||||
}
|
||||
}else if(that.limitUserId == 2){
|
||||
that.popContentCurrent1++;
|
||||
if (that.popContentCurrent1 > 35) {
|
||||
that.popContentCurrent1 = 1;
|
||||
}
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取用户id权限
|
||||
get_user_getjurisdiction(userId) {
|
||||
this.api.user_getjurisdiction(userId).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.limitUserId = res.data.data[0].id;
|
||||
if (this.limitUserId == 1) {
|
||||
this.drag_boxHandler();
|
||||
} else if (this.limitUserId == 2) {
|
||||
this.drag_boxHandler1();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getTime() {
|
||||
this.time = getnowtime();
|
||||
// console.log(this.time);
|
||||
|
|
@ -743,15 +856,19 @@ export default {
|
|||
clearInterval(that.timer2) && this.timer2;
|
||||
},
|
||||
|
||||
// handleClose(done) {
|
||||
// done();
|
||||
// },
|
||||
cancelHandler1(){
|
||||
this.popContentCurrent1 = -1;
|
||||
},
|
||||
|
||||
handlerPop(id) {
|
||||
console.log(id);
|
||||
this.popContentCurrent = id;
|
||||
},
|
||||
|
||||
handlerPop1(id){
|
||||
this.popContentCurrent1 = id;
|
||||
},
|
||||
|
||||
toBack() {
|
||||
this.$router.push({ path: "/largeScreen" });
|
||||
},
|
||||
|
|
@ -823,6 +940,74 @@ export default {
|
|||
}
|
||||
};
|
||||
},
|
||||
|
||||
drag_boxHandler1() {
|
||||
let demo = this.$refs.drag_box1;
|
||||
demo = document.querySelector(".drag_box1"); //待拖拽元素
|
||||
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);
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -993,6 +1178,231 @@ export default {
|
|||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
||||
.drag_box1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-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%);
|
||||
}
|
||||
|
||||
.pole_item,
|
||||
.pole_item_1 {
|
||||
width: 0.5rem;
|
||||
height: 0.22rem;
|
||||
position: absolute;
|
||||
// top: 21%;
|
||||
// left: 5%;
|
||||
|
||||
.p_title {
|
||||
width: 0.5rem;
|
||||
height: 0.22rem;
|
||||
background: rgba(1, 12, 28, 0.7);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0.04rem;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
|
||||
>img {
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: 0.1rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pole1 {
|
||||
width: 0.3rem;
|
||||
height: 0.7rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pop_content1 {
|
||||
width: 2.5rem;
|
||||
height: 3rem;
|
||||
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: .2rem;
|
||||
height: .2rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.p_video {
|
||||
width: 90%;
|
||||
height: 1.2rem;
|
||||
margin: 0.1rem auto 0;
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
height: 0.3rem;
|
||||
font-size: 0.15rem;
|
||||
font-family: AlimamaShuHeiTi-Bold;
|
||||
font-weight: bold;
|
||||
color: #f3fdff;
|
||||
line-height: 0.3rem;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.15rem;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 2.2rem;
|
||||
height: 0.01rem;
|
||||
background: #51d4fa;
|
||||
opacity: 0.5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 0.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
padding: 0 0.15rem;
|
||||
|
||||
.d_item {
|
||||
height: 0.2rem;
|
||||
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 0.05rem;
|
||||
|
||||
>img {
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: 0.12rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #d9effd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grow {
|
||||
width: 2.5rem;
|
||||
height: 0.2rem;
|
||||
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.15rem;
|
||||
height: 0.15rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
font-size: 0.12rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
>span:nth-child(3) {
|
||||
font-size: 0.12rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #36ffd2;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_item {
|
||||
width: 95%;
|
||||
height: calc(100% - 2.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: 50%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
margin-bottom: 0.05rem;
|
||||
|
||||
> img {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> span:nth-child(1) {
|
||||
font-size: 0.1rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #86d9ff;
|
||||
}
|
||||
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.11rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drag_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1251,25 +1661,15 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ::v-deep .el-dialog {
|
||||
// background: unset !important;
|
||||
|
||||
// .el-icon-close:before {
|
||||
// contain: " ";
|
||||
// width: .44rem;
|
||||
// height: .44rem;
|
||||
// background: url('../assets/img/close.png') center no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
// top: 0.3rem;
|
||||
// left: -0.1rem;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="formula realTime">
|
||||
<div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">
|
||||
<div class="page-content new-data" :class="deviceName == 10 || deviceName == 30 ? 'control-page' : ''">
|
||||
|
||||
<div class="control-view" v-if="deviceName == 10">
|
||||
<div class="control-view" v-if="deviceName == 10 || deviceName == 30">
|
||||
<div class="title">气象站:</div>
|
||||
<vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
|
||||
<div class="list-view" v-for="item, index in controlList " :key="index">
|
||||
|
|
@ -22,8 +22,6 @@
|
|||
<div class="table-title">
|
||||
<img src="../../assets/image/real-time.png" alt="" />
|
||||
实时数据
|
||||
<!-- <div class="tips">种植作物1</div> -->
|
||||
|
||||
</div>
|
||||
<div class="timeNow" v-if="list.length">
|
||||
<!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
|
||||
|
|
@ -53,7 +51,7 @@
|
|||
|
||||
</div>
|
||||
<div class="flex-list realTime-bottom">
|
||||
<div class="left-view">
|
||||
<div class="left-view" v-if="deviceName != 30">
|
||||
<div ref="monitor" class="monitor" id="monitor">
|
||||
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
|
||||
<div ref="videoPlayer" class="video-js" id="video-js"></div>
|
||||
|
|
@ -68,83 +66,11 @@
|
|||
设备运行状态
|
||||
</div>
|
||||
<div class="flex-view border-none">
|
||||
<div class="status-view">
|
||||
<div class="status-view-top">
|
||||
<div class="status-view-top-left">{{ fanStatus.name }}</div>
|
||||
<!-- <el-popover placement="top" width="140">
|
||||
<div class="set-status-blue">进入修改设定值</div>
|
||||
<el-popover placement="top" width="160">
|
||||
<p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
|
||||
</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
|
||||
</div>
|
||||
<div class="set-status-red" slot="reference">删除</div>
|
||||
</el-popover>
|
||||
<el-popover placement="right" width="100">
|
||||
<input v-model="item.index" type="text" class="status-save">
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
|
||||
<div class="set-status-blue" slot="reference">排序</div>
|
||||
</el-popover>
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</el-popover> -->
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</div>
|
||||
<div class="status-view-content">
|
||||
<div v-if="fanStatus.open != 0" class="status-true">
|
||||
<div class="status-true-sel">
|
||||
<div class="sel">
|
||||
<img v-if="fanStatus.open == 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
自动控制
|
||||
</div>
|
||||
<div class="sel-phone">
|
||||
<img v-if="fanStatus.open != 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
手机控制
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-fan">
|
||||
<div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt="">
|
||||
<span>1#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="status-noTrue">
|
||||
<img src="../../assets/img/status-no.png" alt="">
|
||||
<div>当前设备无效</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-view" v-for="item, index in statusList" :key="index">
|
||||
<div class="status-view-top">
|
||||
<div class="status-view-top-left">{{ item.name }}</div>
|
||||
<!-- <el-popover placement="top" width="140">
|
||||
<div class="set-status-blue">进入修改设定值</div>
|
||||
<el-popover placement="top" width="140">
|
||||
<!-- <div class="set-status-blue">进入修改设定值</div> -->
|
||||
<el-popover placement="top" width="160">
|
||||
<p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
|
||||
</p>
|
||||
|
|
@ -154,16 +80,12 @@
|
|||
</div>
|
||||
<div class="set-status-red" slot="reference">删除</div>
|
||||
</el-popover>
|
||||
<el-popover placement="right" width="100">
|
||||
<input v-model="item.index" type="text" class="status-save">
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
|
||||
<div class="set-status-blue" slot="reference">排序</div>
|
||||
</el-popover>
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</el-popover> -->
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</el-popover>
|
||||
<!-- <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt=""> -->
|
||||
</div>
|
||||
<div class="status-view-content">
|
||||
<!-- 风机 -->
|
||||
<div class="status-view-content" v-if="item.type == 1">
|
||||
<div v-if="item.open != 0" class="status-true">
|
||||
<div class="status-true-sel">
|
||||
<div class="sel">
|
||||
|
|
@ -177,13 +99,66 @@
|
|||
手机控制
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-true-charts">
|
||||
<div class="status-fan">
|
||||
<div class="btn" :class="item.status[0] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="item.status[0] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt="">
|
||||
<span>1#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="item.status[1] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="item.status[1] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="item.status[2] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="item.status[2] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="item.status[3] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="item.status[3] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
|
||||
</div>
|
||||
<div class="btn" :class="item.status[4] == 1 ? 'blue' : 'off'">
|
||||
<img class="fan-img" v-if="item.status[4] == 1" src="../../assets/img/fan-on.png"
|
||||
alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="status-noTrue">
|
||||
<img src="../../assets/img/status-no.png" alt="">
|
||||
<div>当前设备无效</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 顶卷膜及其他 -->
|
||||
<div class="status-view-content" v-if="item.type != 1">
|
||||
<div v-if="item.open != 0" class="status-true">
|
||||
<div class="status-true-sel">
|
||||
<div class="sel">
|
||||
<img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
自动控制
|
||||
</div>
|
||||
<div class="sel-phone">
|
||||
<img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
手机控制
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-true-charts" v-if="item.type == 6 || item.type == 5 || item.type == 2">
|
||||
<img src="../../assets/img/status-true-charts-icon.png" alt="">
|
||||
<div :id="'statusCharts' + index"></div>
|
||||
</div>
|
||||
<div class="status-true-charts" style="background: unset;height: 50px;" v-else>
|
||||
|
||||
</div>
|
||||
<div class="status-true-text">
|
||||
<div class="status-true-text-left">{{ getNumberStatus(item.index) }}</div>
|
||||
<div class="status-true-text-right">{{ item.progress }}%</div>
|
||||
<div class="status-true-text-left">{{ getNumberStatus(item) }}</div>
|
||||
<div class="status-true-text-right" v-if="item.type == 6 || item.type == 5 || item.type == 2">{{
|
||||
item.progress }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="status-noTrue">
|
||||
|
|
@ -236,9 +211,6 @@ export default {
|
|||
return {
|
||||
statusList: [],
|
||||
|
||||
fanStatus: {
|
||||
name: '风机', open: 0, status: []
|
||||
},
|
||||
time: null,//右上角时间
|
||||
list: [],
|
||||
inputData: [],
|
||||
|
|
@ -250,6 +222,9 @@ export default {
|
|||
controlList: [],
|
||||
statusInterval: null,//status状态的Interval
|
||||
statusTime: 2,//status状态的秒数
|
||||
|
||||
allDevicestatus: [],//所有权限
|
||||
nowDevicestatus: [],//当前设备权限
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -323,16 +298,48 @@ export default {
|
|||
})
|
||||
console.log(this.player);
|
||||
},
|
||||
getNumberStatus(index) {
|
||||
if (index == 0) {
|
||||
return '静止状态'
|
||||
} else if (index == 1) {
|
||||
return '正向打开中'
|
||||
} else if (index == 2) {
|
||||
return '反向关闭中'
|
||||
} else {
|
||||
return ''
|
||||
getNumberStatus(item) {
|
||||
var index = item.index
|
||||
if (item.type == 2||item.type == 5||item.type == 6) {
|
||||
//顶卷膜
|
||||
if (index == 0) {
|
||||
return '静止状态'
|
||||
} else if (index == 1) {
|
||||
return '正向打开中'
|
||||
} else if (index == 2) {
|
||||
return '反向关闭中'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
} else if (item.type == 3) {
|
||||
//加温水泵
|
||||
if (index == 0) {
|
||||
return '加温水泵关闭'
|
||||
} else if (index == 1) {
|
||||
return '加温水泵打开'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
} else if (item.type == 4) {
|
||||
//地热风机
|
||||
if (index == 0) {
|
||||
return '地热风机关闭'
|
||||
} else if (index == 1) {
|
||||
return '地热风机打开'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
} else if (item.type == 7) {
|
||||
//地热风机
|
||||
if (index == 0) {
|
||||
return '除雪关闭'
|
||||
} else if (index == 1) {
|
||||
return '除雪打开'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
createVideo() {
|
||||
|
||||
|
|
@ -568,8 +575,9 @@ export default {
|
|||
}
|
||||
// console.log(this.controlList);
|
||||
})
|
||||
|
||||
this.getPermissionStatus()
|
||||
this.getStatus()
|
||||
this.getStatePermissionStatus()
|
||||
clearInterval(this.statusInterval) && this.statusInterval
|
||||
this.statusInterval = setInterval(() => {
|
||||
if (this.deviceName == 10) {
|
||||
|
|
@ -606,9 +614,64 @@ export default {
|
|||
}
|
||||
})
|
||||
}
|
||||
} else if (this.deviceName == 30) {
|
||||
this.api.getControlRtDatastation(formData).then(res => {
|
||||
this.controlList = []
|
||||
if (res.data.code == 200) {
|
||||
res.data.data.forEach((el, index) => {
|
||||
list.forEach((el1, index1) => {
|
||||
if (el.formula == el1.value) {
|
||||
// console.log(el1);
|
||||
var num = el.environmentData + el1.unit
|
||||
this.list.push({
|
||||
...el,
|
||||
name: el.environmentDataId,
|
||||
num: num,
|
||||
img: require(`../../assets/image/real-time-${el.formula}.png`)
|
||||
})
|
||||
this.controlList.push({
|
||||
...el,
|
||||
num: num,
|
||||
img: require(`../../assets/image/real-time-${el.formula}.png`)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// console.log(this.controlList);
|
||||
})
|
||||
this.api.getControlChartdata(equipmentId).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
res.data.data.forEach((el, index) => {
|
||||
var chartsData = res.data.data
|
||||
realTimeLine('realTime-line', chartsData)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
//获取全部status数据
|
||||
getStatePermissionStatus() {
|
||||
this.api.getStatePermissionStatus().then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.allDevicestatus = res.data.data
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取当前设备的权限
|
||||
getPermissionStatus() {
|
||||
var store = this.$store.state
|
||||
var TargetValue = {
|
||||
deviceId: store.equipmentList[this.indexs - 1].deviceId
|
||||
}
|
||||
this.api.getPermissionStatus(TargetValue).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.nowDevicestatus = res.data.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getStatus() {
|
||||
var store = this.$store.state
|
||||
var TargetValue = {
|
||||
|
|
@ -616,24 +679,57 @@ export default {
|
|||
}
|
||||
this.api.getControlGetState(TargetValue).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.fanStatus.open = res.data.data['1023']
|
||||
this.fanStatus.status = []
|
||||
var num = res.data.data['1024']
|
||||
var num1 = this.padString(num.toString(2), 5)
|
||||
var openListNew = []
|
||||
openListNew = num1.split("")
|
||||
this.fanStatus.status = openListNew.reverse()
|
||||
this.statusList = []
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
|
||||
this.statusList.push(statusData)
|
||||
this.nowDevicestatus.forEach((el, index) => {
|
||||
if (el.id == 1) {
|
||||
//风机
|
||||
var fandata = {}
|
||||
fandata.open = res.data.data['1023']
|
||||
fandata.id = el.id
|
||||
fandata.type = 1
|
||||
fandata.name = el.name
|
||||
fandata.status = []
|
||||
var num = res.data.data['1024']
|
||||
var num1 = this.padString(num.toString(2), 5)
|
||||
var openListNew = []
|
||||
openListNew = num1.split("")
|
||||
fandata.status = openListNew.reverse()
|
||||
this.statusList.push(fandata)
|
||||
} else if (el.id == 2 || el.id == 3 || el.id == 4 || el.id == 5) {
|
||||
//顶卷膜
|
||||
var statusData = { name: el.name, type: 2, id: el.id, open: res.data.data[(1025 + ((el.id - 2) * 3))], progress: res.data.data[(1027 + ((el.id - 2) * 3))], index: res.data.data[(1026 + ((el.id - 2) * 3))] }
|
||||
this.statusList.push(statusData)
|
||||
} else if (el.id == 6) {
|
||||
//加温水泵
|
||||
var statusData = { name: el.name, type: 3, id: el.id, open: res.data.data['1000'], progress: 0, index: res.data.data['1001'] }
|
||||
this.statusList.push(statusData)
|
||||
} else if (el.id == 7) {
|
||||
//地热风机
|
||||
var statusData = { name: el.name, type: 4, id: el.id, open: res.data.data['1002'], progress: 0, index: res.data.data['1003'] }
|
||||
this.statusList.push(statusData)
|
||||
} else if (el.id == 8) {
|
||||
//上风口
|
||||
var statusData = { name: el.name, type: 5, id: el.id, open: res.data.data['1004'], progress: res.data.data['1006'], index: res.data.data['1005'] }
|
||||
this.statusList.push(statusData)
|
||||
} else if (el.id == 9) {
|
||||
//下风口
|
||||
var statusData = { name: el.name, type: 5, id: el.id, open: res.data.data['1007'], progress: res.data.data['1009'], index: res.data.data['1008'] }
|
||||
this.statusList.push(statusData)
|
||||
} else if (el.id == 10) {
|
||||
//卷被
|
||||
var statusData = { name: el.name, type: 6, id: el.id, open: res.data.data['1010'], progress: res.data.data['1012'], index: res.data.data['1011'] }
|
||||
this.statusList.push(statusData)
|
||||
} else if (el.id == 11) {
|
||||
//除雪
|
||||
var statusData = { name: el.name, type: 7, id: el.id, open: res.data.data['1013'], progress: 0, index: res.data.data['1014'] }
|
||||
this.statusList.push(statusData)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
this.$forceUpdate();
|
||||
setTimeout(() => {
|
||||
this.statusList.forEach((el, index) => {
|
||||
if (el.open != 0) {
|
||||
if (el.open != 0 && (el.type == 6 || el.type == 5 || el.type == 2)) {
|
||||
statusCharts(`statusCharts${index}`, el.progress)
|
||||
}
|
||||
})
|
||||
|
|
@ -641,9 +737,7 @@ export default {
|
|||
|
||||
} else {
|
||||
this.statusList = []
|
||||
this.fanStatus = {
|
||||
name: '风机', open: 0, status: []
|
||||
}
|
||||
|
||||
this.$forceUpdate();
|
||||
// this.$message.error(res.data.msg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
<div class="waterPump wufang">
|
||||
<div class="table-title">
|
||||
<img src="../../assets/img/rollByRoll.png" alt=""> 卷被
|
||||
|
||||
<div class="title-text">日出:{{ sunrise }}</div>
|
||||
<div class="title-text">日落:{{ sunset }}</div>
|
||||
</div>
|
||||
<div class="title-tips">卷被有效性设置</div>
|
||||
<div class="flex-view">
|
||||
|
|
@ -24,56 +27,48 @@
|
|||
|
||||
<div class="flex-view">
|
||||
<div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(0)">
|
||||
<div v-if="openTrue[0]==0" class="no-sel margin-none"></div>
|
||||
<div v-if="openTrue[0] == 0" class="no-sel margin-none"></div>
|
||||
<div v-else class="sel margin-none"></div>
|
||||
</div>
|
||||
<div class="input-main">
|
||||
<span>①室外光照大于</span>
|
||||
<input @blur="blurChange10('21550', $event)"
|
||||
v-model="inputData['21550']"
|
||||
@input="changeCount10('21550', $event)"
|
||||
type="text" value="60" placeholder="60" />
|
||||
<input @blur="blurChange10('21550', $event)" v-model="inputData['21550']"
|
||||
@input="changeCount10('21550', $event)" type="text" value="60" placeholder="60" />
|
||||
<span>klx，收拢卷被</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-view">
|
||||
<div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(1)">
|
||||
<div v-if="openTrue[1]==0" class="no-sel margin-none"></div>
|
||||
<div v-if="openTrue[1] == 0" class="no-sel margin-none"></div>
|
||||
<div v-else class="sel margin-none"></div>
|
||||
</div>
|
||||
<div class="input-main">
|
||||
<span>②日出</span>
|
||||
<input @blur="blurChange('21551', $event)"
|
||||
v-model="inputData['21551']"
|
||||
@input="change('21551', $event)"
|
||||
<input @blur="blurChange('21551', $event)" v-model="inputData['21551']" @input="change('21551', $event)"
|
||||
type="text" value="60" placeholder="60" />
|
||||
<span>分钟，收拢卷被</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-view">
|
||||
<div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(2)">
|
||||
<div v-if="openTrue[2]==0" class="no-sel margin-none"></div>
|
||||
<div v-if="openTrue[2] == 0" class="no-sel margin-none"></div>
|
||||
<div v-else class="sel margin-none"></div>
|
||||
</div>
|
||||
<div class="input-main">
|
||||
<span>③室内1#平均温度低于</span>
|
||||
<input @blur="blurChangeCount('21552', $event)"
|
||||
v-model="inputData['21552']"
|
||||
@input="changeCountData('21552', $event)"
|
||||
type="text" value="60" placeholder="60" />
|
||||
<input @blur="blurChangeCount('21552', $event)" v-model="inputData['21552']"
|
||||
@input="changeCountData('21552', $event)" type="text" value="60" placeholder="60" />
|
||||
<span>℃时，展开卷被</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-view">
|
||||
<div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(3)">
|
||||
<div v-if="openTrue[3]==0" class="no-sel margin-none"></div>
|
||||
<div v-if="openTrue[3] == 0" class="no-sel margin-none"></div>
|
||||
<div v-else class="sel margin-none"></div>
|
||||
</div>
|
||||
<div class="input-main">
|
||||
<span>④日落前</span>
|
||||
<input @blur="blurChange('21553', $event)"
|
||||
v-model="inputData['21553']"
|
||||
@input="change('21553', $event)"
|
||||
<input @blur="blurChange('21553', $event)" v-model="inputData['21553']" @input="change('21553', $event)"
|
||||
type="text" value="60" placeholder="60" />
|
||||
<span>分钟，展开卷被</span>
|
||||
</div>
|
||||
|
|
@ -81,25 +76,19 @@
|
|||
<div class="flex-view border-none">
|
||||
<div class="input-main">
|
||||
<div>卷被的行程时间</div>
|
||||
<input @blur="blurChange('21554', $event)"
|
||||
v-model="inputData['21554']"
|
||||
@input="change('21554', $event)"
|
||||
<input @blur="blurChange('21554', $event)" v-model="inputData['21554']" @input="change('21554', $event)"
|
||||
type="text" value="60" placeholder="60" />
|
||||
<span>秒</span>
|
||||
</div>
|
||||
<div class="input-main">
|
||||
<div>卷被开窗的行程时间</div>
|
||||
<input @blur="blurChange('21555', $event)"
|
||||
v-model="inputData['21555']"
|
||||
@input="change('21555', $event)"
|
||||
<input @blur="blurChange('21555', $event)" v-model="inputData['21555']" @input="change('21555', $event)"
|
||||
type="text" value="60" placeholder="60" />
|
||||
<span>秒</span>
|
||||
</div>
|
||||
<div class="input-main">
|
||||
<div>展开的输出通道</div>
|
||||
<input @blur="blurChange('21556', $event)"
|
||||
v-model="inputData['21556']"
|
||||
@input="change('21556', $event)"
|
||||
<input @blur="blurChange('21556', $event)" v-model="inputData['21556']" @input="change('21556', $event)"
|
||||
type="text" value="60" placeholder="60" />
|
||||
<span></span>
|
||||
</div>
|
||||
|
|
@ -119,6 +108,8 @@ export default {
|
|||
openIndex: 1,
|
||||
inputData: {},
|
||||
openTrue: [],
|
||||
sunrise: '00:00',
|
||||
sunset: '00:00'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -130,21 +121,21 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
//反转数组 不影响原数组
|
||||
myReverse(arr) {
|
||||
//反转数组 不影响原数组
|
||||
myReverse(arr) {
|
||||
return [...arr].reverse()
|
||||
},
|
||||
padString(str, length) {
|
||||
return str.padStart(length, '0');
|
||||
},
|
||||
changeOpenTrue(index) {
|
||||
if( this.openTrue[index]==0){
|
||||
this.openTrue[index]=1
|
||||
}else{
|
||||
this.openTrue[index]=0
|
||||
}
|
||||
this.$forceUpdate();
|
||||
var num=this.myReverse(this.openTrue).join("")
|
||||
if (this.openTrue[index] == 0) {
|
||||
this.openTrue[index] = 1
|
||||
} else {
|
||||
this.openTrue[index] = 0
|
||||
}
|
||||
this.$forceUpdate();
|
||||
var num = this.myReverse(this.openTrue).join("")
|
||||
|
||||
var dataNum = {
|
||||
target: {
|
||||
|
|
@ -227,12 +218,34 @@ export default {
|
|||
return 0
|
||||
}
|
||||
},
|
||||
get21549(){
|
||||
get21549() {
|
||||
var num1 = this.inputData['21549']
|
||||
var num11 = this.padString(num1.toString(2), 4)
|
||||
var openList1New
|
||||
openList1New = num11.split("")
|
||||
this.openTrue= openList1New.reverse()
|
||||
this.openTrue = openList1New.reverse()
|
||||
},
|
||||
getStatus(data) {
|
||||
this.api.getControlGetState(data).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.sunrise = this.convertToTimeMinutes(res.data.data['1021'])
|
||||
this.sunset = this.convertToTimeMinutes(res.data.data['1022'])
|
||||
}
|
||||
})
|
||||
},
|
||||
//16进制转为时间 16位无符号高字节是时，低字节是分
|
||||
convertToTimeMinutes(hexValue) {
|
||||
// 将 16 进制字符串转换为 16 进制数值
|
||||
const intValue = hexValue
|
||||
|
||||
// 提取高字节（小时）和低字节（分钟）
|
||||
const hours = (intValue >> 8) & 0xFF;
|
||||
const minutes = intValue & 0xFF;
|
||||
|
||||
// 格式化为时:分的字符串
|
||||
const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||||
|
||||
return formattedTime;
|
||||
},
|
||||
dataInit() {
|
||||
var store = this.$store.state
|
||||
|
|
@ -242,17 +255,18 @@ export default {
|
|||
};
|
||||
this.api.readControl_fiveControl(data).then(res => {
|
||||
console.log(res, 111);
|
||||
if(res.data.code==200){
|
||||
if (res.data.code == 200) {
|
||||
this.inputData = res.data.data
|
||||
this.openIndex = this.inputData['21548']
|
||||
this.openIndex = this.inputData['21548']
|
||||
this.get21549()
|
||||
this.inputData['21552'] = this.countData(this.inputData['21552'])
|
||||
this.inputData['21550'] = this.countData10(this.inputData['21550'])
|
||||
this.inputData['21552'] = this.countData(this.inputData['21552'])
|
||||
this.inputData['21550'] = this.countData10(this.inputData['21550'])
|
||||
}
|
||||
|
||||
|
||||
|
||||
})
|
||||
this.getStatus(data)
|
||||
},
|
||||
//全选文本
|
||||
selectValue(e) {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
</div>
|
||||
<div class="input-main border-right">
|
||||
<span>最大开度</span>
|
||||
<span>{{ inputData['21535'] }}</span>
|
||||
<span>{{ statusNum }}</span>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div class="input-main">
|
||||
|
|
@ -93,8 +93,13 @@ export default {
|
|||
openIndex: 1,
|
||||
inputData: {},
|
||||
openTrue: false,
|
||||
statusNum:0,
|
||||
statusInterval:null,
|
||||
}
|
||||
},
|
||||
beforeDestroy(){
|
||||
clearInterval(this.statusInterval)&&this.statusInterval
|
||||
},
|
||||
mounted() {
|
||||
this.dataInit();
|
||||
//input获取焦点后全选
|
||||
|
|
@ -203,6 +208,18 @@ export default {
|
|||
}
|
||||
|
||||
})
|
||||
this.getStatus(data)
|
||||
clearInterval(this.statusInterval)&&this.statusInterval
|
||||
this.statusInterval=setInterval(() => {
|
||||
this.getStatus(data)
|
||||
}, 3000);
|
||||
},
|
||||
getStatus(data){
|
||||
this.api.getControlGetState(data).then(res=>{
|
||||
if(res.data.code==200){
|
||||
this.statusNum=res.data.data['1015']
|
||||
}
|
||||
})
|
||||
},
|
||||
//全选文本
|
||||
selectValue(e) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue