diff --git a/src/api/index.js b/src/api/index.js index 27f84d3..b1627ce 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -210,4 +210,9 @@ export default { return sendGetRequest(`/readControl/fiveControl`, data); }, + // 查看用户额外权限 + user_getjurisdiction(userId,data){ + return sendGetRequest(`/user/getjurisdiction?userId=${userId}`, data) + } + }; diff --git a/src/assets/img/map1.png b/src/assets/img/map1.png new file mode 100644 index 0000000..b75fd92 Binary files /dev/null and b/src/assets/img/map1.png differ diff --git a/src/views/index.vue b/src/views/index.vue index 869d64f..1b2eb3d 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -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 { diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue index 8bc2fb9..fbfae0e 100644 --- a/src/views/page/largeScreen.vue +++ b/src/views/page/largeScreen.vue @@ -90,7 +90,7 @@
-
+
@@ -100,6 +100,12 @@
+
+ + + + +
@@ -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); + } + }; + }, }, }; @@ -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%; diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue index f746ce3..edd28f3 100644 --- a/src/views/page/largeScreen1.vue +++ b/src/views/page/largeScreen1.vue @@ -19,7 +19,7 @@ {{ time.time }}
-
+
@@ -40,48 +40,10 @@
- - - @@ -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); + } + }; + }, }, }; @@ -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; - // } - // } } } - + +::-webkit-scrollbar { + display: none; +}