@@ -490,361 +495,6 @@ export default {
// 自动跳转和手动跳转切换
//autoPlay: false, //false 手动切换 true 自动切换
- typeList: [
- {
- label: "无意义的传感器",
- value: 0,
- countType: 0,
- },
- {
- label: "空气温度",
- value: 1,
- countType: 3,
- unit: "℃",
- },
- {
- label: "空气湿度",
- value: 2,
- countType: 2,
- unit: "%",
- },
- {
- label: "光亮度",
- value: 3,
- countType: 2,
- unit: "Klux",
- },
- {
- label: "二氧化碳",
- value: 4,
- countType: 0,
- unit: "ppm",
- },
- {
- label: "土壤温度",
- value: 5,
- countType: 3,
- unit: "℃",
- },
- {
- label: "土壤湿度",
- value: 6,
- countType: 2,
- unit: "%",
- },
- {
- label: "水温",
- value: 7,
- countType: 3,
- unit: "℃",
- },
- {
- label: "水肥PH",
- value: 8,
- countType: 2,
- unit: "",
- },
- {
- label: "水肥EC",
- value: 9,
- countType: 2,
- unit: "mS/cm",
- },
- {
- label: "压差",
- value: 10,
- countType: 0,
- unit: "Pa",
- },
- {
- label: "风速",
- value: 11,
- countType: 2,
- unit: "m/s",
- },
- {
- label: "风向",
- value: 12,
- countType: 0,
- unit: "°",
- },
- {
- label: "雨雪信号",
- value: 13,
- countType: 0,
- unit: "",
- },
- {
- label: "降雨量",
- value: 14,
- countType: 2,
- unit: "mm",
- },
- {
- label: "光合有效辐射",
- value: 15,
- countType: 2,
- unit: "umol/m2.s",
- },
- {
- label: "太阳总辐射",
- value: 16,
- countType: 0,
- unit: "W/m2",
- },
- {
- label: "流量",
- value: 17,
- countType: 0,
- unit: "L/H",
- },
- {
- label: "大气压强",
- value: 18,
- countType: 2,
- unit: "KPa",
- },
- {
- label: "土壤PH",
- value: 19,
- countType: 2,
- unit: "",
- },
- {
- label: "土壤EC",
- value: 20,
- countType: 0,
- unit: "uS/cm",
- },
- {
- label: "叶面温度",
- value: 21,
- countType: 3,
- unit: "℃",
- },
- {
- label: "叶面湿度",
- value: 22,
- countType: 2,
- unit: "%",
- },
- {
- label: "果实直径",
- value: 23,
- countType: 0,
- unit: "mm",
- },
- {
- label: "茎秆直径",
- value: 24,
- countType: 0,
- unit: "mm",
- },
- {
- label: "流速",
- value: 25,
- countType: 2,
- unit: "m/s",
- },
- {
- label: "瞬时流量",
- value: 26,
- countType: 2,
- unit: "m3",
- },
- {
- label: "当日流量",
- value: 27,
- countType: 2,
- unit: "T",
- },
- {
- label: "累计流量",
- value: 28,
- countType: 0,
- unit: "T",
- },
- {
- label: "无线气象站电池电压",
- value: 29,
- countType: 2,
- unit: "V",
- },
- {
- label: "无线气象站无线信号强度",
- value: 30,
- countType: 1,
- unit: "dBm",
- },
- {
- label: "无线气象站信噪比（SNR）",
- value: 31,
- countType: 1,
- unit: "dB",
- },
- {
- label: "PM1.0",
- value: 32,
- countType: 0,
- unit: "μg/m2",
- },
- {
- label: "PM2.5",
- value: 33,
- countType: 0,
- unit: "μg/m2",
- },
- {
- label: "PM10",
- value: 34,
- countType: 0,
- unit: "μg/m2",
- },
- {
- label: "紫外辐射",
- value: 35,
- countType: 0,
- unit: "W/m2",
- },
- {
- label: "蒸发量",
- value: 36,
- countType: 2,
- unit: "mm",
- },
- {
- label: "负氧离子",
- value: 37,
- countType: 0,
- unit: "个/cm3",
- },
- {
- label: "露点温度",
- value: 38,
- countType: 3,
- unit: "℃",
- },
- {
- label: "设备电压",
- value: 39,
- countType: 2,
- unit: "V",
- },
- {
- label: "设备电流",
- value: 40,
- countType: 2,
- unit: "A",
- },
- {
- label: "土壤氮含量",
- value: 41,
- countType: 0,
- unit: "mg/kg",
- },
- {
- label: "土壤磷含量",
- value: 42,
- countType: 0,
- unit: "mg/kg",
- },
- {
- label: "土壤钾含量",
- value: 43,
- countType: 0,
- unit: "mg/kg",
- },
- {
- label: "管道压力",
- value: 44,
- countType: 0,
- unit: "Kpa",
- },
- {
- label: "一氧化碳",
- value: 45,
- countType: 0,
- unit: "ppm",
- },
- {
- label: "氨气",
- value: 46,
- countType: 0,
- unit: "ppm",
- },
- {
- label: "硫化氢",
- value: 47,
- countType: 0,
- unit: "ppm",
- },
- {
- label: "氧气",
- value: 48,
- countType: 2,
- unit: "%vol",
- },
- {
- label: "甲烷",
- value: 49,
- countType: 2,
- unit: "%vol",
- },
- {
- label: "铜（CU）",
- value: 50,
- countType: 0,
- unit: "mg/kg",
- },
- {
- label: "镉（CD）",
- value: 51,
- countType: 2,
- unit: "mg/kg",
- },
- {
- label: "铅（PB）",
- value: 52,
- countType: 0,
- unit: "mg/kg",
- },
- {
- label: "噪声",
- value: 53,
- countType: 0,
- unit: "dB",
- },
- {
- label: "叶面面积",
- value: 54,
- countType: 0,
- unit: "mm",
- },
- {
- label: "虫数量",
- value: 55,
- countType: 0,
- unit: "个",
- },
- {
- label: "无线传感器电池电压",
- value: 56,
- countType: 2,
- unit: "V",
- },
- {
- label: "无线传感器无线信号强度",
- value: 57,
- countType: 1,
- unit: "dBm",
- },
- {
- label: "无线传感器信噪比（SNR）",
- value: 58,
- countType: 1,
- unit: "dB",
- },
- ],
limitUserId: "",
@@ -986,7 +636,7 @@ export default {
this.get_environmentData(2023120613270120);
this.get_readControl_getState(2023120613270120);
this.getWeatherData(2023120613270120);
- } else if (limitUserId == 8||limitUserId == 10) {
+ } else if (limitUserId == 8||limitUserId == 10||limitUserId == 11) {
// 获取控制器第一个Id
const list = []
this.$store.state.equipmentList.forEach((el, index) => {
@@ -1271,7 +921,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 || el.id == 8 || el.id == 9|| el.id == 10))[0].id;
+ this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9|| el.id == 10|| el.id == 11))[0].id;
if (this.limitUserId == 1) {
this.drag_boxHandler();
this.dataInit(userId, this.limitUserId);
@@ -1293,6 +943,9 @@ export default {
}else if (this.limitUserId == 10) {
this.drag_boxHandler10();
this.dataInit(userId, this.limitUserId);
+ }else if (this.limitUserId == 11) {
+ this.drag_boxHandler11();
+ this.dataInit(userId, this.limitUserId);
}
}
@@ -1390,7 +1043,7 @@ export default {
this.get_readControl_getState(2023042214250070);
} else if (this.limitUserId == 7) {
this.get_readControl_getState(2023120613270120);
- } else if (this.limitUserId == 8||this.limitUserId == 9||this.limitUserId == 10) {
+ } else if (this.limitUserId == 8||this.limitUserId == 9||this.limitUserId == 10||this.limitUserId == 11) {
this.get_readControl_getState(list[0].deviceId);
}
@@ -1531,6 +1184,63 @@ export default {
}
};
},
+ drag_boxHandler11() {
+ let demo = this.$refs.drag_box11;
+ demo = document.querySelector(".drag_box11"); //待拖拽元素
+ 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_boxHandler10() {
let demo = this.$refs.drag_box10;
demo = document.querySelector(".drag_box10"); //待拖拽元素
@@ -2465,6 +2175,39 @@ export default {
cursor: pointer;
}
}
+ .drag_box11 {
+ 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.3rem;
+ height: auto;
+ position: absolute;
+ top: 18%;
+ left: 42%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ }
.drag_box10 {
width: 100%;
height: auto;
diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue
index 02f4680..d080047 100644
--- a/src/views/page/largeScreen1.vue
+++ b/src/views/page/largeScreen1.vue
@@ -1,7 +1,7 @@
@@ -33,36 +33,20 @@
@@ -400,27 +306,15 @@
{{ item.greenhouseName }}#温室
-
{{ item.greenhouseName }}#温室
+
- 
+
+
+
![]()
@@ -443,19 +337,11 @@
-
- ![]()
+
-
-
+ ![]()
{{ item1.environmentDataId }}
{{
@@ -471,24 +357,20 @@
+
+
-
+
-
-
+
泵房
-
+
@@ -499,27 +381,15 @@
{{ item.greenhouseName }}#温室
-
泵房
+
{{ item.greenhouseName }}#温室
+
-
+
+
+
![]()
@@ -542,19 +412,11 @@
-
- ![]()
+
+ ![]()
{{ item1.environmentDataId }}
{{
@@ -592,46 +454,30 @@
-->
-
- {{item.greenhouseName}}
+ {{ item.greenhouseName }}
-
+
-
-
+
-
- 100个拱棚
-
-
- 100个拱棚
-
+
+
+
+
+ 100个拱棚
+
+ 100个拱棚
+
- {{item.greenhouseName}}
+ {{ item.greenhouseName }}
+
-
+
+
+
![]()
@@ -654,19 +500,11 @@
-
- ![]()
+
-
-
+ ![]()
{{ item1.environmentDataId }}
{{
@@ -682,66 +520,46 @@
+
+
+
+
-
+
-
+
-
- 泵房
-
-
- 泵房
-
+
+
+
+
+ 泵房
+
+ 泵房
+
-
- {{item.greenhouseName}}
+ {{ item.greenhouseName }}
-
+
-
+
+
-
+
-
- 控制中心
-
-
- 控制中心
-
+
+
+
+
+ 控制中心
+
+ 控制中心
+
- {{item.greenhouseName}}
+ {{ item.greenhouseName }}
+
-
+
+
+
+
![]()
@@ -764,19 +582,85 @@
-
+
+
- ![]()
+
+
+ ![]()
+
+
+ {{ item1.environmentDataId }}
+ {{
+ item1.environmentData + getTypeList(item1.formula)
+ }}
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.greenhouseName }}
+
+
+ {{ item.greenhouseName }}
+
+
+
+
+
+ ![]()
+
+ {{ item.greenhouseName }}
+
+
+
+
+ 
+ 品种：{{ item.greenhouseVariety }}
+
+
+ 品种：{{ item.greenhouseVariety }}
+
+
+ 数量：{{ item.greenhouseNums }}株
+
+
+ 数量：{{ item.greenhouseNums }}株
+
+ 
+ 生长阶段：
+ {{ item.growthStageName }}
+
+
+
+ 生长阶段：
+ {{ item.growthStageName }}
+
+
+ ![]()
{{ item1.environmentDataId }}
{{
@@ -1278,13 +1162,11 @@ export default {
for (let i = 0; i < 25; i++) {
if (id == i + 1) {
if (i < 20) {
- return `top:40%;left:${
- 74 - i * 3 < 15 ? 15 : 74 - i * 3
- }%;transform: translate(-50%,-50%);`;
+ return `top:40%;left:${74 - i * 3 < 15 ? 15 : 74 - i * 3
+ }%;transform: translate(-50%,-50%);`;
} else {
- return `top:40%;left:${
- 74 - i * 3 < 15 ? 15 + (i - 20) * 3 : 74 - i * 3
- }%;transform: translate(-50%,-50%);`;
+ return `top:40%;left:${74 - i * 3 < 15 ? 15 + (i - 20) * 3 : 74 - i * 3
+ }%;transform: translate(-50%,-50%);`;
}
}
}
@@ -1297,176 +1179,186 @@ export default {
}
},
- getTopOrLeft5(id){
- if(id == 1){
+ getTopOrLeft5(id) {
+ if (id == 1) {
return 'top:50%;left:9%'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:47%;left:16%'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:49%;left:18%'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:51%;left:20%'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:53%;left:22%'
}
},
- getTopOrLeft55(id){
- if(id == 1){
+ getTopOrLeft55(id) {
+ if (id == 1) {
return `top:53%;left:21%;transform: translate(-50%,-50%);`;
}
for (let i = 0; i < 4; i++) {
- if(id == i + 1) {
+ if (id == i + 1) {
return `top:${46 + (i - 1) * 2}%;left:${28 + (i - 1) * 2}%;transform: translate(-50%,-50%);`;
}
}
},
- getTopOrLeft7(id){
- if(id == 1){
+ getTopOrLeft7(id) {
+ if (id == 1) {
return 'top:34%;left:62%'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:19%;left:64%'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:19%;left:50%'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:52%;left:22%'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:34%;left:25%'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:52%;left:64%'
}
},
-
- getTopOrLeft77(id){
-
- if(id == 1){
+
+ getTopOrLeft77(id) {
+
+ if (id == 1) {
return 'top:34%;left:62%;transform: translate(54%,-50%);'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:19%;left:64%;transform: translate(54%,0%);'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:19%;left:50%;transform: translate(54%,0%);'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:52%;left:22%;transform: translate(54%,-50%);'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:34%;left:25%;transform: translate(54%,-50%);'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:52%;left:64%;transform: translate(54%,-50%);'
}
},
- getTopOrLeft8(id){
- if(id == 8){
+ getTopOrLeft8(id) {
+ if (id == 8) {
return 'top:81%;left:29%;z-index:8;'
- }else if(id == 1){
+ } else if (id == 1) {
return 'top:65%;left:39%;z-index:7;'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:53%;left:49%;z-index:6;'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:38%;left:55%;z-index:5;'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:30%;left:55%;z-index:4;'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:22%;left:54%;z-index:3;'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:14%;left:52%;z-index:2;'
- }else if(id == 7){
+ } else if (id == 7) {
return 'top:9%;left:50%;z-index:1;'
}
},
- getTopOrLeft8_8(id){
- if(id == 8){
+ getTopOrLeft8_8(id) {
+ if (id == 8) {
return 'top:81%;left:29%;transform: translate(54%,0%);'
- }else if(id == 1){
+ } else if (id == 1) {
return 'top:65%;left:39%;transform: translate(54%,0%);'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:53%;left:49%;transform: translate(54%,0%);'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:38%;left:55%;transform: translate(54%,0%);'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:30%;left:55%;transform: translate(54%,0%);'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:22%;left:54%;transform: translate(54%,0%);'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:14%;left:52%;transform: translate(54%,0%);'
- }else if(id == 7){
+ } else if (id == 7) {
return 'top:9%;left:50%;transform: translate(54%,0%);'
}
},
- getTopOrLeft9(id){
- if(id == 1){
+ getTopOrLeft9(id) {
+ if (id == 1) {
return 'top:20.5%;left:10%;z-index:10;'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:72%;left:12%;z-index:9;'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:32%;left:56%;z-index:8;'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:34%;left:57%;z-index:7;'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:20.5%;left:66.5%;z-index:6;'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:22.5%;left:68%;z-index:5;'
- }else if(id == 7){
+ } else if (id == 7) {
return 'top:17%;left:70.6%;z-index:4;'
- }else if(id == 8){
+ } else if (id == 8) {
return 'top:19.5%;left:71.5%;z-index:3;'
- }else if(id == 9){
+ } else if (id == 9) {
return 'top:14%;left:75%;z-index:2;'
- }else if(id == 10){
+ } else if (id == 10) {
return 'top:16.5%;left:75.5%;z-index:1;'
}
},
- getTopOrLeft9_9(id){
- if(id == 1){
+ getTopOrLeft9_9(id) {
+ if (id == 1) {
return 'top:20.5%;left:10%;transform: translate(54%,0);'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:72%;left:12%;transform: translate(54%,0);'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:32%;left:56%;transform: translate(54%,0);'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:16%;left:57%;transform: translate(54%,0%);'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:20.5%;left:66.5%;transform: translate(54%,0%);'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:22.5%;left:68%;transform: translate(54%,0%);'
- }else if(id == 7){
+ } else if (id == 7) {
return 'top:17%;left:70.6%;transform: translate(54%,0%);'
- }else if(id == 8){
+ } else if (id == 8) {
return 'top:19.5%;left:71.5%;transform: translate(54%,0);'
- }else if(id == 9){
+ } else if (id == 9) {
return 'top:14%;left:75%;transform: translate(54%,0);'
- }else if(id == 10){
+ } else if (id == 10) {
return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
}
},
- getTopOrLeft10(id){
- if(id == 1){
+ getTopOrLeft10(id) {
+ if (id == 1) {
return 'top:12.5%;left:43%;z-index:10;'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:12.5%;left:53%;z-index:9;'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:45%;left:43%;z-index:8;'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:45%;left:54%;z-index:7;'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:68%;left:43%;z-index:6;'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:68%;left:54%;z-index:5;'
}
},
- getTopOrLeft10_10(id){
- if(id == 1){
+ getTopOrLeft10_10(id) {
+ if (id == 1) {
return 'top:12.5%;left:43%;transform: translate(54%,0);'
- }else if(id == 2){
+ } else if (id == 2) {
return 'top:12.5%;left:53%;transform: translate(54%,0);'
- }else if(id == 3){
+ } else if (id == 3) {
return 'top:45%;left:43%;transform: translate(54%,0);'
- }else if(id == 4){
+ } else if (id == 4) {
return 'top:45%;left:54%;transform: translate(54%,0%);'
- }else if(id == 5){
+ } else if (id == 5) {
return 'top:68%;left:43%;transform: translate(54%,0%);'
- }else if(id == 6){
+ } else if (id == 6) {
return 'top:68%;left:54%;transform: translate(54%,0%);'
}
},
+ getTopOrLeft11(id) {
+ if (id == 1) {
+ return 'top:14.5%;left:41%;z-index:10;'
+ }
+ },
+ getTopOrLeft11_11(id) {
+ if (id == 1) {
+ return 'top:14.5%;left:41%;transform: translate(54%,0);'
+ }
+ },
getNamePosition(id) {
if (id == 1) {
return "position: absolute;top: 41%;left: 13%;";
@@ -1504,14 +1396,14 @@ export default {
if (that.popContentCurrent1 > 34) {
that.popContentCurrent1 = 1;
}
- } else if(that.limitUserId == 5){
+ } else if (that.limitUserId == 5) {
that.popContentCurrent++;
- if(that.popContentCurrent > 4){
+ if (that.popContentCurrent > 4) {
that.popContentCurrent = 1;
}
- } else if(that.limitUserId == 7){
+ } else if (that.limitUserId == 7) {
that.popContentCurrent++;
- if(that.popContentCurrent > 6){
+ if (that.popContentCurrent > 6) {
that.popContentCurrent = 1;
}
}
@@ -1567,14 +1459,14 @@ export default {
if (that.popContentCurrent1 > 35) {
that.popContentCurrent1 = 1;
}
- }else if(that.limitUserId == 5){
+ } else if (that.limitUserId == 5) {
that.popContentCurrent++;
- if(that.popContentCurrent > 4){
+ if (that.popContentCurrent > 4) {
that.popContentCurrent = 1;
}
- }else if(that.limitUserId == 7){
+ } else if (that.limitUserId == 7) {
that.popContentCurrent++;
- if(that.popContentCurrent > 6){
+ if (that.popContentCurrent > 6) {
that.popContentCurrent = 1;
}
}
@@ -1586,7 +1478,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|| el.id == 8|| el.id == 9|| el.id == 10))[0].id;
+ this.limitUserId = (res.data.data.filter(el => el.id == 1 || el.id == 2 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10|| el.id == 11))[0].id;
if (this.limitUserId == 1) {
this.drag_boxHandler();
} else if (this.limitUserId == 2) {
@@ -1601,6 +1493,8 @@ export default {
this.drag_boxHandler9();
} else if (this.limitUserId == 10) {
this.drag_boxHandler10();
+ } else if (this.limitUserId == 11) {
+ this.drag_boxHandler11();
}
}
});
@@ -1614,9 +1508,9 @@ export default {
that.time = getnowtime();
}, 1000);
},
-toHttp(){
- window.open('https://wlw.hx3n.com/datav/indexinfo.do', '_blank');
-},
+ toHttp() {
+ window.open('https://wlw.hx3n.com/datav/indexinfo.do', '_blank');
+ },
getNowTime() {
const now = new Date();
const year = now.getFullYear();
@@ -1635,7 +1529,7 @@ toHttp(){
cancelHandler1() {
this.popContentCurrent1 = -1;
},
-
+
handlerPop(id) {
// console.log(id);
this.popContentCurrent = id;
@@ -1644,7 +1538,7 @@ toHttp(){
handlerPop1(id) {
this.popContentCurrent1 = id;
},
-
+
toBack() {
this.$router.push({ path: "/largeScreen" });
},
@@ -1784,6 +1678,73 @@ toHttp(){
}
};
},
+ drag_boxHandler11() {
+ let demo = this.$refs.drag_box11;
+ demo = document.querySelector(".drag_box11"); //待拖拽元素
+ 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_boxHandler10() {
let demo = this.$refs.drag_box10;
demo = document.querySelector(".drag_box10"); //待拖拽元素
@@ -1851,7 +1812,7 @@ toHttp(){
}
};
},
- drag_boxHandler9() {
+ drag_boxHandler9() {
let demo = this.$refs.drag_box9;
demo = document.querySelector(".drag_box9"); //待拖拽元素
let canMove = false; //拖拽状态
@@ -2151,12 +2112,10 @@ toHttp(){
opacity: 0.89;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
- background: linear-gradient(
- to bottom,
- #ffffff 45%,
- #e9f8ff 90%,
- #77baff 100%
- );
+ background: linear-gradient(to bottom,
+ #ffffff 45%,
+ #e9f8ff 90%,
+ #77baff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
@@ -2171,7 +2130,7 @@ toHttp(){
display: flex;
align-items: center;
- > span {
+ >span {
width: 0.8rem;
height: 0.3rem;
background: rgba(14, 91, 165, 0.1);
@@ -2187,12 +2146,10 @@ toHttp(){
}
.act {
- background: linear-gradient(
- -35deg,
- #56a8d5 0%,
- rgba(0, 55, 110, 0.75) 50%,
- #56a8d5 100%
- );
+ background: linear-gradient(-35deg,
+ #56a8d5 0%,
+ rgba(0, 55, 110, 0.75) 50%,
+ #56a8d5 100%);
border: 1px solid rgba(122, 225, 255, 0.75);
font-size: 0.18rem;
font-family: MicrosoftYaHei;
@@ -2214,7 +2171,7 @@ toHttp(){
align-items: center;
justify-content: center;
- > img {
+ >img {
width: 0.2rem;
height: 0.2rem;
}
@@ -2230,26 +2187,26 @@ toHttp(){
align-items: center;
justify-content: space-between;
- > img {
+ >img {
width: 0.28rem;
height: 0.3rem;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.24rem;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #7abaff;
}
- > span:nth-child(4) {
+ >span:nth-child(4) {
font-size: 0.2rem;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #7abaff;
}
- > span:nth-child(6) {
+ >span:nth-child(6) {
font-size: 0.3rem;
font-family: PingFang-SC-Bold;
font-weight: bold;
@@ -2275,25 +2232,21 @@ toHttp(){
top: 0;
left: 0;
z-index: 99;
- -webkit-mask-image: linear-gradient(
- 90deg,
- transparent 0%,
- blue 7%,
- blue 87%,
- transparent 97%
- );
+ -webkit-mask-image: linear-gradient(90deg,
+ transparent 0%,
+ blue 7%,
+ blue 87%,
+ transparent 97%);
.map1 {
width: 100%;
height: 100%;
// background: url('../assets/img/map.png') center no-repeat;
// background-size: 100% 100%;
- -webkit-mask-image: linear-gradient(
- transparent 4%,
- blue 15%,
- blue 86%,
- transparent 100%
- );
+ -webkit-mask-image: linear-gradient(transparent 4%,
+ blue 15%,
+ blue 86%,
+ transparent 100%);
overflow: hidden;
position: absolute;
@@ -2301,23 +2254,19 @@ toHttp(){
width: 100%;
height: 100%;
position: absolute;
- -webkit-mask-image: linear-gradient(
- 90deg,
- transparent 0%,
- blue 5%,
- blue 93%,
- transparent 99%
- );
+ -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%
- );
+ -webkit-mask-image: linear-gradient(transparent 0%,
+ blue 13%,
+ blue 73%,
+ transparent 97%);
}
.pole_item,
@@ -2341,13 +2290,13 @@ toHttp(){
overflow: hidden;
white-space: nowrap;
- > img {
+ >img {
width: 0.1rem;
height: 0.1rem;
margin-right: 0.05rem;
}
- > span {
+ >span {
font-size: 0.1rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2388,7 +2337,7 @@ toHttp(){
height: 1.82rem;
margin: 0.1rem auto 0;
- > img {
+ >img {
width: 100%;
height: 100%;
}
@@ -2433,13 +2382,13 @@ toHttp(){
box-sizing: border-box;
padding: 0.05rem 0.05rem;
- > img {
+ >img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.05rem;
}
- > span {
+ >span {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2458,20 +2407,20 @@ toHttp(){
justify-content: center;
align-items: center;
- > img {
+ >img {
width: 0.18rem;
height: 0.18rem;
margin-right: 0.05rem;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
}
- > span:nth-child(3) {
+ >span:nth-child(3) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2495,24 +2444,24 @@ toHttp(){
display: flex;
margin-bottom: 0.05rem;
- > img {
+ >img {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.05rem;
}
- > div {
+ >div {
display: flex;
flex-direction: column;
- > span:nth-child(1) {
+ >span:nth-child(1) {
font-size: 0.12rem;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #86d9ff;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.15rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
@@ -2528,23 +2477,19 @@ toHttp(){
width: 100%;
height: 100%;
position: absolute;
- -webkit-mask-image: linear-gradient(
- 90deg,
- transparent 4%,
- blue 18%,
- blue 88%,
- transparent 100%
- );
+ -webkit-mask-image: linear-gradient(90deg,
+ transparent 4%,
+ blue 18%,
+ blue 88%,
+ transparent 100%);
.drag_img {
width: 100%;
height: 100%;
- -webkit-mask-image: linear-gradient(
- transparent 0%,
- blue 13%,
- blue 73%,
- transparent 97%
- );
+ -webkit-mask-image: linear-gradient(transparent 0%,
+ blue 13%,
+ blue 73%,
+ transparent 97%);
}
.pole_item_4 {
@@ -2570,13 +2515,13 @@ toHttp(){
top: 0;
left: 0;
- > img {
+ >img {
width: 0.32rem;
height: 0.32rem;
margin-right: 0.15rem;
}
- > span {
+ >span {
font-size: 0.18rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2652,7 +2597,7 @@ toHttp(){
height: 2.8rem;
margin: 0.2rem auto 0;
- > img {
+ >img {
width: 100%;
height: 100%;
}
@@ -2696,13 +2641,13 @@ toHttp(){
box-sizing: border-box;
padding: 0 0.1rem 0 0.1rem;
- > img {
+ >img {
width: 0.18rem;
height: 0.18rem;
margin-right: 0.05rem;
}
- > span {
+ >span {
font-size: 0.16rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2721,20 +2666,20 @@ toHttp(){
justify-content: center;
align-items: center;
- > img {
+ >img {
width: 0.22rem;
height: 0.18rem;
margin-right: 0.1rem;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.16rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
}
- > span:nth-child(3) {
+ >span:nth-child(3) {
font-size: 0.16rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2758,24 +2703,24 @@ toHttp(){
display: flex;
margin-bottom: 0.1rem;
- > img {
+ >img {
width: 0.6rem;
height: 0.53rem;
margin-right: 0.1rem;
}
- > div {
+ >div {
display: flex;
flex-direction: column;
- > span:nth-child(1) {
+ >span:nth-child(1) {
font-size: 0.14rem;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #86d9ff;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.2rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
@@ -2787,43 +2732,46 @@ toHttp(){
}
}
}
-
- .drag_box7,.drag_box8,.drag_box9,.drag_box10{
+
+ .drag_box7,
+ .drag_box8,
+ .drag_box9,
+ .drag_box10,
+ .drag_box11 {
width: 100%;
height: auto;
position: absolute;
- top:-95px;
- // -webkit-mask-image: linear-gradient(
+ top: -95px;
+ // -webkit-mask-image: linear-gradient(
// 90deg,
- // transparent 0%,
- // blue 2%,
- // blue 97%,
- // transparent 99%
- // );
+ // transparent 0%,
+ // blue 2%,
+ // blue 97%,
+ // transparent 99%
+ // );
.drag_img {
width: 100%;
height: auto;
- -webkit-mask-image: linear-gradient(
- transparent 0%,
- blue 3%,
- blue 95%,
- transparent 97%
- );
+ -webkit-mask-image: linear-gradient(transparent 0%,
+ blue 3%,
+ blue 95%,
+ transparent 97%);
}
- .pole_item{
+ .pole_item {
// width: 0.5rem;
height: 0.34rem;
position: absolute;
top: 21%;
left: 5%;
cursor: pointer;
+
.p_title {
// width: 0.5rem;
// height: 0.22rem;
background: rgba(1, 12, 28, 0.7);
- border-radius:40px;
+ border-radius: 40px;
display: flex;
align-items: center;
box-sizing: border-box;
@@ -2832,13 +2780,13 @@ toHttp(){
overflow: hidden;
white-space: nowrap;
- > img {
+ >img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.05rem;
}
- > span {
+ >span {
font-size: 0.2rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2849,7 +2797,7 @@ toHttp(){
.pole1 {
width: 0.5rem;
- height:auto;
+ height: auto;
position: absolute;
left: 50%;
top: .2rem;
@@ -2881,7 +2829,7 @@ toHttp(){
height: 1.82rem;
margin: 0.1rem auto 0;
- > img {
+ >img {
width: 100%;
height: 100%;
}
@@ -2926,13 +2874,13 @@ toHttp(){
box-sizing: border-box;
padding: 0.05rem 0.05rem;
- > img {
+ >img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.05rem;
}
- > span {
+ >span {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2951,20 +2899,20 @@ toHttp(){
justify-content: center;
align-items: center;
- > img {
+ >img {
width: 0.18rem;
height: 0.18rem;
margin-right: 0.05rem;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
}
- > span:nth-child(3) {
+ >span:nth-child(3) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -2988,24 +2936,24 @@ toHttp(){
display: flex;
margin-bottom: 0.05rem;
- > img {
+ >img {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.05rem;
}
- > div {
+ >div {
display: flex;
flex-direction: column;
- > span:nth-child(1) {
+ >span:nth-child(1) {
font-size: 0.12rem;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #86d9ff;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.15rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
@@ -3016,30 +2964,27 @@ toHttp(){
}
}
}
- .drag_box5{
+
+ .drag_box5 {
width: 100%;
height: 100%;
position: absolute;
- -webkit-mask-image: linear-gradient(
- 90deg,
- transparent 0%,
- blue 5%,
- blue 93%,
- transparent 99%
- );
+ -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%
- );
+ -webkit-mask-image: linear-gradient(transparent 0%,
+ blue 13%,
+ blue 73%,
+ transparent 97%);
}
- .pole_item{
+ .pole_item {
width: 0.5rem;
height: 0.22rem;
position: absolute;
@@ -3059,13 +3004,13 @@ toHttp(){
overflow: hidden;
white-space: nowrap;
- > img {
+ >img {
width: 0.1rem;
height: 0.1rem;
margin-right: 0.05rem;
}
- > span {
+ >span {
font-size: 0.1rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -3106,7 +3051,7 @@ toHttp(){
height: 1.82rem;
margin: 0.1rem auto 0;
- > img {
+ >img {
width: 100%;
height: 100%;
}
@@ -3151,13 +3096,13 @@ toHttp(){
box-sizing: border-box;
padding: 0.05rem 0.05rem;
- > img {
+ >img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.05rem;
}
- > span {
+ >span {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -3176,20 +3121,20 @@ toHttp(){
justify-content: center;
align-items: center;
- > img {
+ >img {
width: 0.18rem;
height: 0.18rem;
margin-right: 0.05rem;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
}
- > span:nth-child(3) {
+ >span:nth-child(3) {
font-size: 0.13rem;
font-family: MicrosoftYaHei;
font-weight: 400;
@@ -3213,24 +3158,24 @@ toHttp(){
display: flex;
margin-bottom: 0.05rem;
- > img {
+ >img {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.05rem;
}
- > div {
+ >div {
display: flex;
flex-direction: column;
- > span:nth-child(1) {
+ >span:nth-child(1) {
font-size: 0.12rem;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #86d9ff;
}
- > span:nth-child(2) {
+ >span:nth-child(2) {
font-size: 0.15rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;