新增东北大屏和大图
parent
b8a8121161
commit
9486053800
|
|
@ -210,4 +210,9 @@ export default {
|
|||
return sendGetRequest(`/readControl/fiveControl`, data);
|
||||
},
|
||||
|
||||
// 查看用户额外权限
|
||||
user_getjurisdiction(userId,data){
|
||||
return sendGetRequest(`/user/getjurisdiction?userId=${userId}`, data)
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue