@@ -541,11 +560,13 @@ import vueSeamless from "vue-seamless-scroll";
import axios from "axios";
+import mapData from "@/assets/js/mapData.js";
import { changeLanguage, getLanguage } from '@/utils/language'
import { pestLine } from "@/assets/js/charts";
+import largeNav from '@/components/large-nav.vue'
export default {
name: "largeScreen",
- components: { vueSeamless },
+ components: { vueSeamless,largeNav },
computed: {
defaultOption() {
return {
@@ -723,7 +744,9 @@ export default {
},
watch:{
'$i18n.locale'() {
- this.dataInit()
+ let userInfo = JSON.parse(localStorage.getItem("userInfo"));
+
+ this.dataInit(userInfo.userid, this.limitUserId)
}
},
methods: {
@@ -798,7 +821,7 @@ export default {
// 根据用户id查询对应的设备大数据信息
dataInit(userid, limitUserId) {
this.api.Bigdata_getAllControl(userid).then((res) => {
- // console.log('根据用户id查询对应的设备大数据信息', res);
+ console.log('根据用户id查询对应的设备大数据信息', res);
this.dataList = res.data.data;
setTimeout(() => {
new Swiper(".middle_disasterWarningAnalysis", {
@@ -935,6 +958,7 @@ export default {
this.getWeatherData(list[0].deviceId);
// 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
if(limitUserId == 13){
+ this.mapInit()
this.getImage();
this.getCharts();
}
@@ -1282,7 +1306,7 @@ export default {
this.dataInit(userId, this.limitUserId);
}else if (this.limitUserId == 13) {
// this.drag_boxHandler13();
- this.mapInit()
+
this.dataInit(userId, this.limitUserId);
}
@@ -1314,7 +1338,41 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
});
+// 添加画范围
+ var listall = mapData.features;
+ listall.forEach((el, index) => {
+ console.log(el,111);
+ var polygon = new AMap.Polygon({
+ map: map,
+ path: el.geometry.coordinates, //设置多边形边界路径
+ strokeColor: '#ff0000', //线颜色
+ strokeOpacity: 1, //线透明度
+ strokeWeight: 2, //线宽
+ fillColor: '#ff0000', //填充色
+ fillOpacity: 0.5, //填充透明度
+ });
+ polygon.on("click", function (e) {
+ // 在点击事件处理程序中获取点击位置的经纬度坐标
+ var lng = e.lnglat.getLng(); // 获取经度
+ var lat = e.lnglat.getLat(); // 获取纬度
+ // 输出经纬度坐标
+ console.log("点击位置的经度：" + lng);
+ console.log("点击位置的纬度：" + lat);
+ });
+ polygon.on("mouseover", (e) => {
+ // 点击之后覆盖物的样式
+ // console.log(e,index);
+ });
+ // 鼠标移出事件
+ polygon.on("mouseout", () => {
+ // 鼠标移开覆盖物之后覆盖物的样式
+ // console.log('离开');
+ });
+
+ //将绘制的面对象添加到地图上
+ map.add(polygon);
+ });
map.add(marker);
},
// autoPlay1() {
@@ -2219,7 +2277,7 @@ window.open("http://localhost:8080/");
}
.nav {
- width: 2.5rem;
+ // width: 2.5rem;
position: absolute;
z-index: 999999;
left: 50%;
@@ -2233,7 +2291,8 @@ window.open("http://localhost:8080/");
flex-direction: column;
align-items: center;
justify-content: center;
-
+ margin: 0 .2rem;
+ cursor: pointer;
>img {
width: 1.08rem;
height: 0.91rem;
@@ -2521,6 +2580,12 @@ window.open("http://localhost:8080/");
blue 80%,
transparent 90%,
transparent 100%);
+ &.map1-13{
+ -webkit-mask-image: unset;
+ .map1{
+ width: 100%;
+ }
+ }
.map1 {
width: 90%;
@@ -2543,7 +2608,7 @@ window.open("http://localhost:8080/");
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
-
+
.drag_box1 {
width: 100%;
height: 100%;
@@ -2743,8 +2808,8 @@ window.open("http://localhost:8080/");
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
- blue 13%,
- blue 87%,
+ blue 27%,
+ blue 73%,
transparent 100%);
.drag_img {
width: 100%;
diff --git a/src/views/page/largeScreen2.vue b/src/views/page/largeScreen2.vue
new file mode 100644
index 00000000..f2b613cb
--- /dev/null
+++ b/src/views/page/largeScreen2.vue
@@ -0,0 +1,213 @@
+
+
+
+
温室智慧云数据统计
+
+
+
{{ getNowTime() }}
+
+
{{ time.week }}
+
+
{{ time.time }}
+
+
+
+
+
+
+
+
+
diff --git a/src/views/page/largeScreen3.vue b/src/views/page/largeScreen3.vue
new file mode 100644
index 00000000..23a9368d
--- /dev/null
+++ b/src/views/page/largeScreen3.vue
@@ -0,0 +1,2597 @@
+
+
+
+
+
温室智慧云数据统计
+
+
+
+
{{ getNowTime() }}
+
+
{{ time.week }}
+
+
{{ time.time }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
实时数据
+
+
温室环境数据
+
+
+
+
+
+
![]()
+
+ {{ el.name }}
+ {{ el.num }}
+
+
+
+
+
+
+
+
+
+
+
虫情图片
+
+
+
+
+
+
+
+
{{ item.shootTime }}
+
+
+
虫情趋势图
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 基地总览
+ 
+ 
+ 监控设备
+ 
+ 
+ 虫情监测
+ 
+ 
+ 环境监测
+