diff --git a/src/assets/img/map4.jpg b/src/assets/img/map4.jpg new file mode 100644 index 00000000..36cbc6c2 Binary files /dev/null and b/src/assets/img/map4.jpg differ diff --git a/src/views/index.vue b/src/views/index.vue index 8ad289c1..d64f4117 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -475,7 +475,7 @@ export default { // item.id == 2 东北; // item.id == 1 丽水; // item.id == 5 石门; - const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7); + const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7|| item.id == 8); if (!foundObject) { this.$message('您当前没有权限查看!') return diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue index b14a44d2..22d448a6 100644 --- a/src/views/page/largeScreen.vue +++ b/src/views/page/largeScreen.vue @@ -155,6 +155,18 @@ + +
+ + + + + + + + + +
@@ -914,8 +926,6 @@ export default { } }) list.sort(this.compare('equipmentStatu')) - console.log(list, 123); - // 丽水 this.get_weather_echart_data(list[0].deviceId); this.get_thisWeekTemperature_echart_data(list[0].deviceId); @@ -943,6 +953,22 @@ export default { this.get_environmentData(2023120613270120); this.get_readControl_getState(2023120613270120); this.getWeatherData(2023120613270120); + } else if (limitUserId == 8) { + // 获取控制器第一个Id + const list = [] + this.$store.state.equipmentList.forEach((el, index) => { + if (el.deviceName == 10) { + list.push(el) + } + }) + list.sort(this.compare('equipmentStatu')) + + // 大冶鑫 + this.get_weather_echart_data(list[0].deviceId); + this.get_thisWeekTemperature_echart_data(list[0].deviceId); + this.get_environmentData(list[0].deviceId); + this.get_readControl_getState(list[0].deviceId); + this.getWeatherData(list[0].deviceId); } } }); @@ -1200,7 +1226,7 @@ export default { // id == 1 丽水; // id == 5 石门; // id == 5 大冶鑫; - this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7))[0].id; + this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7|| el.id == 8))[0].id; if (this.limitUserId == 1) { this.drag_boxHandler(); this.dataInit(userId, this.limitUserId); @@ -1213,6 +1239,9 @@ export default { } else if (this.limitUserId == 7) { this.drag_boxHandler7(); this.dataInit(userId, this.limitUserId); + } else if (this.limitUserId == 8) { + this.drag_boxHandler8(); + this.dataInit(userId, this.limitUserId); } } }); @@ -1292,14 +1321,25 @@ export default { this.current1 = index; // console.log(item,'00000000000000'); // this.get_readControl_getState(item.deviceId); + // 获取控制器第一个Id + const list = [] + this.$store.state.equipmentList.forEach((el, index) => { + if (el.deviceName == 10) { + list.push(el) + } + }) + list.sort(this.compare('equipmentStatu')) + if (this.limitUserId == 1) { - this.get_readControl_getState(2023042214250027); + this.get_readControl_getState(list[0].deviceId); } else if (this.limitUserId == 2) { this.get_readControl_getState(2023112911050004); } else if (this.limitUserId == 5) { this.get_readControl_getState(2023042214250070); } else if (this.limitUserId == 7) { this.get_readControl_getState(2023120613270120); + }else if (this.limitUserId == 8) { + this.get_readControl_getState(list[0].deviceId); } }, @@ -1439,6 +1479,63 @@ export default { } }; }, + drag_boxHandler8() { + let demo = this.$refs.drag_box8; + demo = document.querySelector(".drag_box8"); //待拖拽元素 + let canMove = false; //拖拽状态 + let x = 0, + y = 0; //鼠标位置 + //监听按下鼠标事件 + demo.onmousedown = function (e) { + x = e.pageX - demo.offsetLeft; + y = e.pageY - demo.offsetTop; + canMove = true; //激活拖拽状态 + }; + //监听右击鼠标事件 + demo.oncontextmenu = function (e) { + e.preventDefault(); //阻止默认行为 + }; + //监听鼠标抬起事件 + window.onmouseup = function () { + canMove = false; //关闭拖拽状态 + }; + + window.onblur = function () { + //窗口失去焦点事件 + canMove = false; //关闭拖拽状态 + }; + + //监听鼠标移动事件 + window.onmousemove = function (e) { + e.preventDefault(); //阻止默认行为(字不能拖走) + if (canMove) { + //对范围判断 + let left = e.pageX - x; + let top = e.pageY - y; + + demo.style.left = left + "px"; + demo.style.top = top + "px"; + } + }; + let scale = 1; + demo.onwheel = function (e) { + if (e.wheelDelta > 0) { + scale += 0.05; + if (scale > 4) { + scale = 4; + } + demo.style.transform = `scale(${scale})`; + // console.log(scale); + } else { + scale -= 0.05; + if (scale < 1) { + scale = 1; + } + demo.style.transform = `scale(${scale})`; + // console.log(scale); + } + }; + }, drag_boxHandler7() { let demo = this.$refs.drag_box7; demo = document.querySelector(".drag_box7"); //待拖拽元素 @@ -2202,7 +2299,102 @@ export default { cursor: pointer; } } + .drag_box8 { + width: 100%; + height: auto; + position: absolute; + // top: 0.3rem; + // left: 0.5rem; + z-index: 10; + top: -64px; + -webkit-mask-image: linear-gradient(90deg, + transparent 0%, + blue 2%, + blue 97%, + transparent 99%); + .drag_img { + width: 100%; + height: auto; + -webkit-mask-image: linear-gradient(transparent 0%, + blue 2%, + blue 95%, + transparent 97%); + } + + .axis_shimen { + width: 0.4rem; + height: auto; + position: absolute; + top: 83%; + left: 30%; + z-index: 99; + cursor: pointer; + } + .axis_shimen1 { + width: 0.4rem; + height: auto; + position: absolute; + top: 66%; + left: 41%; + z-index: 99; + cursor: pointer; + } + .axis_shimen2 { + width: 0.4rem; + height: auto; + position: absolute; + top: 48%; + left: 54%; + z-index: 99; + cursor: pointer; + } + .axis_shimen3 { + width: 0.4rem; + height: auto; + position: absolute; + top: 28%; + left: 61%; + z-index: 99; + cursor: pointer; + } + .axis_shimen4 { + width: 0.4rem; + height: auto; + position: absolute; + top: 20%; + left: 59%; + z-index: 99; + cursor: pointer; + } + .axis_shimen5 { + width: 0.4rem; + height: auto; + position: absolute; + top: 10%; + left: 57%; + z-index: 99; + cursor: pointer; + } + .axis_shimen6 { + width: 0.4rem; + height: auto; + position: absolute; + top: 5%; + left: 54%; + z-index: 99; + cursor: pointer; + } + .axis_shimen7 { + width: 0.4rem; + height: auto; + position: absolute; + top: 0%; + left: 50%; + z-index: 99; + cursor: pointer; + } + } .drag_box { width: 100%; height: 100%; diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue index fe9ad274..659ea56a 100644 --- a/src/views/page/largeScreen1.vue +++ b/src/views/page/largeScreen1.vue @@ -471,6 +471,90 @@ + +
+
+
+
+ +
+ + + + +
+
+
+
+
@@ -1015,6 +1099,7 @@ export default { return 'top:52%;left:64%' } }, + getTopOrLeft77(id){ if(id == 1){ @@ -1031,6 +1116,44 @@ export default { return 'top:52%;left:64%;transform: translate(54%,-50%);' } }, + getTopOrLeft8(id){ + if(id == 1){ + return 'top:79%;left:28%;z-index:8;' + }else if(id == 2){ + return 'top:62%;left:39%;z-index:7;' + }else if(id == 3){ + return 'top:48%;left:52%;z-index:6;' + }else if(id == 4){ + return 'top:24%;left:59%;z-index:5;' + }else if(id == 5){ + return 'top:16%;left:57%;z-index:4;' + }else if(id == 6){ + return 'top:6%;left:55%;z-index:3;' + }else if(id == 7){ + return 'top:1%;left:52%;z-index:2;' + }else if(id == 8){ + return 'top:-4%;left:48%;z-index:1;' + } + }, + getTopOrLeft8_8(id){ + if(id == 1){ + return 'top:79%;left:28%;transform: translate(54%,-50%);' + }else if(id == 2){ + return 'top:62%;left:39%;transform: translate(54%,-50%);' + }else if(id == 3){ + return 'top:48%;left:52%;transform: translate(54%,-50%);' + }else if(id == 4){ + return 'top:24%;left:59%;transform: translate(54%,-50%);' + }else if(id == 5){ + return 'top:16%;left:57%;transform: translate(54%,0%);' + }else if(id == 6){ + return 'top:6%;left:55%;transform: translate(54%,0%);' + }else if(id == 7){ + return 'top:1%;left:52%;transform: translate(54%,0%);' + }else if(id == 8){ + return 'top:0%;left:48%;transform: translate(54%,0%);' + } + }, getNamePosition(id) { if (id == 1) { return "position: absolute;top: 41%;left: 13%;"; @@ -1150,7 +1273,7 @@ export default { get_user_getjurisdiction(userId) { this.api.user_getjurisdiction(userId).then((res) => { if (res.data.code == 200) { - this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5|| el.id == 7))[0].id; + this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5|| el.id == 7|| el.id == 8))[0].id; if (this.limitUserId == 1) { this.drag_boxHandler(); } else if (this.limitUserId == 2) { @@ -1159,6 +1282,8 @@ export default { this.drag_boxHandler5(); } else if (this.limitUserId == 7) { this.drag_boxHandler7(); + } else if (this.limitUserId == 8) { + this.drag_boxHandler8(); } } }); @@ -1340,6 +1465,73 @@ export default { } }; }, + drag_boxHandler8() { + let demo = this.$refs.drag_box8; + demo = document.querySelector(".drag_box8"); //待拖拽元素 + let canMove = false; //拖拽状态 + let x = 0, + y = 0; //鼠标位置 + //监听按下鼠标事件 + demo.onmousedown = function (e) { + x = e.pageX - demo.offsetLeft; + y = e.pageY - demo.offsetTop; + canMove = true; //激活拖拽状态 + }; + //监听右击鼠标事件 + demo.oncontextmenu = function (e) { + e.preventDefault(); //阻止默认行为 + }; + //监听鼠标抬起事件 + window.onmouseup = function () { + canMove = false; //关闭拖拽状态 + }; + + window.onblur = function () { + //窗口失去焦点事件 + canMove = false; //关闭拖拽状态 + }; + + //监听鼠标移动事件 + window.onmousemove = function (e) { + e.preventDefault(); //阻止默认行为(字不能拖走) + if (canMove) { + //对范围判断 + let left = e.pageX - x; + let top = e.pageY - y; + + //if (left > 0) left = 0 //当距离左边小于0时 让它为0 + //if (top > 0) top = 0 //当距离上边小于0时 让它为0 + // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) + // let maxLeft = window.innerWidth - demo.offsetWidth + // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) + // let maxTop = window.innerHeight - demo.offsetHeight + + // if (left > maxLeft) left = maxLeft + // if (top > maxTop) top = maxTop + + demo.style.left = left + "px"; + demo.style.top = top + "px"; + } + }; + let scale = 1; + demo.onwheel = function (e) { + if (e.wheelDelta > 0) { + scale += 0.05; + if (scale > 4) { + scale = 4; + } + demo.style.transform = `scale(${scale})`; + // console.log(scale); + } else { + scale -= 0.05; + if (scale < 1) { + scale = 1; + } + demo.style.transform = `scale(${scale})`; + // console.log(scale); + } + }; + }, drag_boxHandler7() { let demo = this.$refs.drag_box7; demo = document.querySelector(".drag_box7"); //待拖拽元素 @@ -2142,7 +2334,8 @@ export default { } } } - .drag_box7{ + + .drag_box7,.drag_box8{ width: 100%; height: auto; position: absolute; @@ -2150,8 +2343,8 @@ export default { -webkit-mask-image: linear-gradient( 90deg, transparent 0%, - blue 5%, - blue 93%, + blue 2%, + blue 97%, transparent 99% ); @@ -2160,8 +2353,8 @@ export default { height: auto; -webkit-mask-image: linear-gradient( transparent 0%, - blue 13%, - blue 73%, + blue 3%, + blue 95%, transparent 97% ); }