更多操作
+ 
+ 虫情图片
+
+
+ 虫情图片
+ 返回详情
+
+
+
+
+
+ 时间段
+
+
+
+
+
+
+ 查询
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.shootTime }} 虫情标注
+ 
添加
+ 
编辑
+ 
删除
+ 
+ 
@@ -427,6 +464,10 @@ import EZUIKit from "ezuikit-js";
import videojs from "video.js";
import video_zhCN from "video.js/dist/lang/zh-CN.json";
import vueSeamless from "vue-seamless-scroll";
+
+import axios from "axios";
+
+import { pestLine } from "@/assets/js/charts";
export default {
name: "largeScreen",
components: { vueSeamless },
@@ -556,8 +597,12 @@ export default {
},
],
- // 金山吕港草莓数据
+ // 金山吕港草莓数据id12
imgUrl: '',
+ //长兴前卫柑桔新优品种扩繁基地id13单独虫情接口数据
+ imageList: [],
+ chartsData: null,
+ srcList: [],
};
},
beforeMount() {
@@ -653,7 +698,17 @@ export default {
this.get_environmentData(2023120613270120);
this.get_readControl_getState(2023120613270120);
this.getWeatherData(2023120613270120);
- } else if (limitUserId == 8 || limitUserId == 10 || limitUserId == 11|| limitUserId == 12) {
+ } else if (limitUserId == 9) {
+
+ // 左侧上部气象站charts
+ this.get_weather_echart_data(2023120613270131);
+ this.get_thisWeekTemperature_echart_data(2023120613270131);
+ this.get_environmentData(2024070113400048);
+ this.get_readControl_getState(2024070113400048);
+ // 左侧上部气象站
+ this.getWeatherData(2023120613270131);
+ }else {
+ // 其他非指定id都默认第一个
// 获取控制器第一个Id
const list = []
this.$store.state.equipmentList.forEach((el, index) => {
@@ -685,22 +740,78 @@ export default {
}
})
}
+ // 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
+ if(limitUserId == 13){
+ this.getImage();
+ this.getCharts();
+ }
- } else if (limitUserId == 9) {
-
- // 左侧上部气象站charts
- this.get_weather_echart_data(2023120613270131);
- this.get_thisWeekTemperature_echart_data(2023120613270131);
- this.get_environmentData(2024070113400048);
- this.get_readControl_getState(2024070113400048);
- // 左侧上部气象站
- this.getWeatherData(2023120613270131);
- }
+ }
}
});
},
+ getTimeNew() {
+ // 获取当前日期（格式：YYYY-MM-DD）
+ const today = new Date().toISOString().split("T")[0];
+ return today;
+ },
+ getTime7() {
+ // 获取一周前的日期（格式：YYYY-MM-DD）
+ const oneWeekAgo = new Date();
+ oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+ const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
+ return formattedOneWeekAgo;
+ },
+ // 获取图片列表
+ getImage() {
+ var data = {
+ beginTime: this.getTime7(),
+ endTime: this.getTimeNew(),
+ deviceId: 613,
+ pageNum: 1,
+ pageSize: 4,
+ };
+ axios
+ .post(`/api1/api/v1/getDeviceImages`, data, {
+ headers: {
+ //头部参数
+ Authorization: localStorage.getItem("CQtoken")
+ ? localStorage.getItem("CQtoken")
+ : "",
+ },
+ })
+ .then((res) => {
+ if (res.data.code == 200) {
+ this.imageList = res.data.data.list;
+ this.srcList = this.imageList.map((item) => item.imageUrl);
+ }
+ });
+ },
+ // 左下角虫情趋势图
+ getCharts() {
+ var data = {
+ beginTime: this.getTime7(),
+ endTime: this.getTimeNew(),
+ deviceId: 613,
+ };
+ axios
+ .post(`/api1/api/v1/getInsectChartData`, data, {
+ headers: {
+ //头部参数
+ Authorization: localStorage.getItem("CQtoken")
+ ? localStorage.getItem("CQtoken")
+ : "",
+ },
+ })
+ .then((res) => {
+ if (res.data.code == 200) {
+ this.chartsData = res.data;
+ pestLine("pest-charts", this.chartsData);
+ }
+ });
+ },
// 获取设备当天的温度
get_weather_echart_data(deviceId) {
this.api.Bigdata_getTemperature(deviceId).then((res1) => {
@@ -961,7 +1072,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 || el.id == 11|| el.id == 12))[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|| el.id == 12|| el.id == 13))[0].id;
if (this.limitUserId == 1) {
this.drag_boxHandler();
this.dataInit(userId, this.limitUserId);
@@ -989,6 +1100,9 @@ export default {
}else if (this.limitUserId == 12) {
this.drag_boxHandler12();
this.dataInit(userId, this.limitUserId);
+ }else if (this.limitUserId == 13) {
+ this.drag_boxHandler13();
+ this.dataInit(userId, this.limitUserId);
}
}
@@ -1086,7 +1200,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 || this.limitUserId == 11|| this.limitUserId == 12) {
+ } else if (this.limitUserId == 8 || this.limitUserId == 9 || this.limitUserId == 10 || this.limitUserId == 11|| this.limitUserId == 12|| this.limitUserId == 13) {
this.get_readControl_getState(list[0].deviceId);
}
@@ -1226,6 +1340,63 @@ export default {
// console.log(scale);
}
};
+ },
+ drag_boxHandler13() {
+ let demo = this.$refs.drag_box13;
+ demo = document.querySelector(".drag_box13"); //待拖拽元素
+ 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_boxHandler12() {
let demo = this.$refs.drag_box12;
@@ -1883,6 +2054,20 @@ export default {
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.66rem;
+
+ .e_title {
+ width: 3.98rem;
+ height: 0.19rem;
+ background: url("../../assets/img/environmentData_bg.png") center no-repeat;
+ background-size: 100% 100%;
+ font-size: 0.18rem;
+ font-family: AlibabaPuHuiTiM;
+ font-weight: 500;
+ color: #83ccff;
+ box-sizing: border-box;
+ padding-left: 0.32rem;
+ line-height: 0.19rem;
+ }
.left {
width: 4rem;
@@ -1962,20 +2147,6 @@ export default {
height: calc((100% - 4.04rem) / 2);
}
- .e_title {
- width: 3.98rem;
- height: 0.19rem;
- background: url("../../assets/img/environmentData_bg.png") center no-repeat;
- background-size: 100% 100%;
- font-size: 0.18rem;
- font-family: AlibabaPuHuiTiM;
- font-weight: 500;
- color: #83ccff;
- box-sizing: border-box;
- padding-left: 0.32rem;
- line-height: 0.19rem;
- }
-
.environmentData {
width: 3.98rem;
height: 3.27rem;
@@ -2283,6 +2454,154 @@ export default {
cursor: pointer;
}
}
+ .drag_box13{
+ 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 13%,
+ blue 73%,
+ transparent 97%);
+ }
+ .axis_shimen {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 13%;
+ left:43.5%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen1 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 15%;
+ left:34.5%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen2 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 16%;
+ left:26%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen3 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 28%;
+ left:35%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen4 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 29%;
+ left:27%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen5 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 43%;
+ left:38.5%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen6 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 44%;
+ left:30.5%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen7 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 56%;
+ left:57%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen8 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 49%;
+ left:58%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen9 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 42%;
+ left:59%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen10 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 35%;
+ left:60%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen11 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 27%;
+ left:61%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen12 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 69%;
+ left:70%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ .axis_shimen13 {
+ width: 0.3rem;
+ height: auto;
+ position: absolute;
+ top: 77%;
+ left:70%;
+ z-index: 99;
+ cursor: pointer;
+ }
+ }
.drag_box12 {
width: 100%;
height: auto;
@@ -2800,7 +3119,21 @@ export default {
top: 0.56rem;
right: 0.66rem;
z-index: 999;
-
+ .right-image-list{
+ padding: 20px 0;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-row-gap: 10px; //纵向间隔
+ grid-column-gap: 10px; //横向间隔
+ .image-time{
+ text-align: center;
+ color: #fff;
+ }
+ }
+ .right-image-list,.right-charts{
+ width: 100%;
+ height: calc((100% - .38rem) / 2);
+ }
.liveVideo {
width: 4rem;
height: 0.43rem;
diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue
index 685d559f..75ad6675 100644
--- a/src/views/page/largeScreen1.vue
+++ b/src/views/page/largeScreen1.vue
@@ -19,10 +19,10 @@
+ 
+ 
+ 
+