xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

甘井设施农业大数据云平台修改

Browse Source
This commit is contained in:
home孙 2025-06-17 11:22:54 +08:00
parent a2f17ec7bb
commit f56010172c
5 changed files with 276 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/map5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 MiB

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
src/assets/img/map51.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 MiB

10
src/assets/js/charts.js
View File

@ -616,11 +616,11 @@ export function realTimeLine2(id, data,pageId) {
})
if(!selTure){
dataList.forEach((el, index) => {
selList[el.name]=(index==0?true:false)
})
}
// if(!selTure){
// dataList.forEach((el, index) => {
// selList[el.name]=(index==0?true:false)
// })
// }
dataList.forEach((el, index) => {
list.push({

294
src/views/page/largeScreen.vue
View File

@ -19,7 +19,8 @@
<span class="line"></span>
<span>{{ time.time }}</span>
</div>
<div class="nav">
<el-button class="large-btn" @click="toBackPage" type="primary" v-if="limitUserId==9">返回</el-button>
<div class="nav" v-if="limitUserId!=9">
<div class="item">
<img src="../../assets/img/nav1_act.png" alt="" />
<span>大数据平台</span>
@ -56,9 +57,12 @@
</div>
</div>
<div class="weather_echart" id="weather_echart" v-show="limitUserId != 11&&limitUserId != 12"></div>
<div class="weather_echart" id="weather_echart" v-if="limitUserId != 11&&limitUserId != 12&&limitUserId != 9"></div>
<div class="weather_echart" v-if="limitUserId==9">
<img class="img" src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E8%A5%BF%E7%BA%A2%E6%9F%BF%E7%94%9F%E9%95%BF%E5%9B%BE.gif" alt="">
</div>
<div class="e_title" v-show="limitUserId == 12">实时数据</div>
<div class="realTime-line" id="realTime-line" v-show="limitUserId == 12"></div>
<div class="realTime-line" id="realTime-line" v-if="limitUserId == 12"></div>
<div class="environmentData" :class="`environmentData-${limitUserId}`">
<div class="e_title">温室环境数据</div>
<div class="detail">
@ -107,6 +111,20 @@
</div>
</div>
<div class="middle">
<div class="middle-data" v-if="limitUserId==9">
<div class="data-title" :style="`--dataNumber:${tableList.length+1}`">
<div>时间</div>
<div v-for="item,index in tableList" :key="index">{{item}}</div>
</div>
<vue-seamless :style="`--dataNumber:${tableList.length+1}`" class="data-data" :data="tableData" :class-option="defaultOption1">
<div class="data-table" v-for="item,index in tableData" :key="index">
<div>{{item.time}}</div>
<div v-for="item1,index1 in tableList" :key="index1">
<div>{{ item[item1] }}</div>
</div>
</div>
</vue-seamless>
</div>
<div class="map">
<div class="map1">
<!-- 丽水 -->
@ -245,11 +263,23 @@
</div>
<div class="e_title">虫情趋势图</div>
<div class="right-charts" id="pest-charts"></div>
</div>
<!-- 甘井设施农业大数据云平台 -->
<div class="right" v-else-if="limitUserId == 9">
<div class="liveVideo"></div>
<div class="liveVideo_content">
<video class="video" controls muted loop autoplay src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E7%95%AA%E8%8C%84%E7%94%9F%E9%95%BF%E8%A7%86%E9%A2%91.mp4"></video>
</div>
<div class="e_title">温室实时数据</div>
<div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div>
</div>
<div class="right" v-else>
<div class="liveVideo"></div>
<!-- 监控 -->
<template v-if="limitUserId != 12">
<div class="liveVideo"></div>
<div class="liveVideo_content" v-show="limitUserId != 12">
<div class="liveVideo_content">
<div class="swiper-container mySwiper_video">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
@ -267,14 +297,17 @@
</div>
</div>
</div>
</template>
<!-- 金山吕港草莓单独显示控制器南图片 -->
<div class="liveVideo_content" style="padding:10px;" v-show="limitUserId == 12">
<img style="width: 100%;height: 100%;" :src="imgUrl" alt="">
</div>
<div class="deviceState"></div>
<div class="device_detail">
<!-- 右下角设备状态 -->
<template>
<div class="deviceState"></div>
<div class="device_detail">
<div class="swiper_timer">
<div>
<div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer">
@ -299,7 +332,6 @@
</div>
</div>
</div>
<div class="device_content scroll">
<!-- 丽水 -->
<div class="content_item" v-if="limitUserId == 1">
@ -420,7 +452,7 @@
</div>
<!-- 大冶鑫 -->
<div class="content_item"
v-if="limitUserId == 7 || limitUserId == 9 || limitUserId == 10 || limitUserId == 11 || limitUserId == 12|| limitUserId == 13">
v-if="limitUserId == 7 || limitUserId == 10 || limitUserId == 11 || limitUserId == 12|| limitUserId == 13">
<div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
<div class="i_title" v-if="item.controlState != 0">
<img src="../../assets/img/i_title_img.png" alt="" />
@ -443,7 +475,10 @@
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
@ -484,6 +519,18 @@ export default {
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
defaultOption1() {
return {
step: 0.1, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
data() {
return {
@ -603,6 +650,13 @@ export default {
imageList: [],
chartsData: null,
srcList: [],
// id9的甘井设施农业大数据云平台
dateRange: [],
currentPage: 1,
pageSize: 20,
tableData: [],
tableList: [],
};
},
beforeMount() {
@ -628,6 +682,62 @@ export default {
clearInterval(this.timer_) && this.timer_;
},
methods: {
// id9的甘井设施农业大数据云平台
timeInit() {
const start = new Date()
start.setHours(0, 0, 0, 0)
const end = new Date()
this.dateRange = [start, end]
},
getdataTime(time) {
// 中国标准时间
var chinaTime = new Date(time);
// 将中国标准时间转换为UTC时间
var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);
// 将UTC时间转换为2024-02-17 00:00:00格式
var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
return formattedTime
},
getData() {
console.log(this.dateRange);
var data = {
equipmentId:'2024070113400048',
startTime: this.getdataTime(this.dateRange[0]),
endTime: this.getdataTime(this.dateRange[1]),
page: this.currentPage,
pageSize: this.pageSize,
isEquipment:0
}
this.api.selFsTime(data).then(res => {
if (res.data.code == 200) {
this.tableList = []
this.tableData = []
this.total = res.data.data.totalCount
res.data.data.data[0].equipment.forEach((el, index) => {
this.tableList.push(el.environmentDataId + '(' + el.formula+ ')')
})
res.data.data.data.forEach((el, index) => {
const processedData = {
time: el.updateTime
};
el.equipment.forEach((item, index) => {
processedData[item.environmentDataId + '(' + item.formula+ ')'] = item.environmentData;
});
this.tableData.push(processedData)
})
console.log( this.tableList, this.tableData);
}else{
this.$message.success(res.data.msg);
this.tableList = []
this.tableData = []
this.total =0
}
})
},
handlerOther() {
this.other_show = !this.other_show
},
@ -705,10 +815,27 @@ export default {
this.get_thisWeekTemperature_echart_data(2023120613270131);
this.get_environmentData(2024070113400048);
this.get_readControl_getState(2024070113400048);
this.timeInit()
// 左侧上部气象站
this.getWeatherData(2023120613270131);
}else {
// 其他非指定id都默认第一个
const store=this.$store.state
var data1 ='2024070113400048'
var nowDevice = store.equipmentList.find(item => item.deviceId == data1);
this.imgUrl =nowDevice? nowDevice.hls:null
this.api.getControlFsdata(data1).then(res => {
if (res.data.code == 200) {
var chartsData = res.data.data
realTimeLine2('realTime-line', chartsData, data1)
} else {
// this.$message.error(res.data.msg);
}
})
setTimeout(() => {
this.getData()
}, 0);
} else if (limitUserId == 11||limitUserId == 12){
// 其他非指定id都默认第一个
// 获取控制器第一个Id
const list = []
this.$store.state.equipmentList.forEach((el, index) => {
@ -717,9 +844,7 @@ export default {
}
})
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);
@ -740,6 +865,22 @@ export default {
}
})
}
} else {
// 其他非指定id都默认第一个
// 获取控制器第一个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);
// 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
if(limitUserId == 13){
this.getImage();
@ -896,11 +1037,11 @@ export default {
res.data.data.forEach((item, index) => {
//规定 指定id获取监控
//规定 id为1(丽水) 并且使用第一个设备ID的监控
// item.deviceId == 2024070113400048 甘井设施农业大数据云平台监控
if (
item.cameraSerialNumber != null &&
(item.deviceId == 2023042214250027 ||
item.deviceId == 2023120613270115 ||
item.deviceId == 2024070113400048 ||
item.deviceId == 2023042214250017||
item.deviceId == 2023120613270053|| (this.limitUserId==1&&index==0)
)
@ -1935,7 +2076,12 @@ export default {
height: 0.2rem;
}
}
.large-btn{
position: absolute;
top: 0.13rem;
right: 0.66rem;
z-index: 111;
}
.calendar {
width: 4rem;
height: 0.3rem;
@ -2056,9 +2202,9 @@ export default {
height: calc(100% - 0.66rem);
box-sizing: border-box;
// padding-top: 0.56rem;
position: absolute;
top: 0.56rem;
left: 0.66rem;
position: relative;
// top: 0.56rem;
// left: 0.66rem;
z-index: 999;
.realTime-line{
width: 100%;
@ -2127,6 +2273,10 @@ export default {
.weather_echart {
width: 100%;
height: calc((100% - 4.04rem) / 2);
.img{
width: 100%;
height: 100%;
}
}
.environmentData {
@ -2210,6 +2360,58 @@ export default {
}
.middle {
width: calc(100% - 8rem);
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding-bottom: 0.5rem;
.middle-data{
width: 100%;
height:2.5rem ;
position: relative;
z-index: 100;
background: rgba(0, 92, 178, 0.3);
.data-title{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height:40px;
>div{
width: calc(100% / var(--dataNumber));
font-size: 13px;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
color:#fff;
font-weight: bold;
}
}
.data-data{
height: calc(2.5rem - 40px);
overflow: hidden;
.data-table{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: calc((2.5rem - 40px) / 5);
>div{
width: calc(100% / var(--dataNumber));
font-size: 13px;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
color:#fff;
}
}
}
}
.map {
width: 100%;
height: 100%;
@ -2798,8 +3000,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 24%;
left: 11%;
top: 31.5%;
left:22.5%;
z-index: 99;
cursor: pointer;
}
@ -2808,8 +3010,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 76%;
left: 13%;
top:71%;
left: 28.5%;
z-index: 99;
cursor: pointer;
}
@ -2818,8 +3020,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 36%;
left: 56%;
top: 31.5%;
left: 55%;
z-index: 99;
cursor: pointer;
}
@ -2828,8 +3030,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 38%;
left: 57%;
top: 33%;
left: 56%;
z-index: 99;
cursor: pointer;
}
@ -2838,8 +3040,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 25%;
left: 66%;
top: 22%;
left: 59.5%;
z-index: 99;
cursor: pointer;
}
@ -2848,8 +3050,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 28%;
left: 67%;
top: 23%;
left: 60.5%;
z-index: 99;
cursor: pointer;
}
@ -2858,8 +3060,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 21%;
left: 70%;
top: 19.5%;
left: 62%;
z-index: 99;
cursor: pointer;
}
@ -2868,8 +3070,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 24%;
left: 71%;
top: 20.5%;
left:63%;
z-index: 99;
cursor: pointer;
}
@ -2878,8 +3080,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 18.5%;
left: 74%;
top: 16%;
left:64%;
z-index: 99;
cursor: pointer;
}
@ -2888,8 +3090,8 @@ export default {
width: 0.3rem;
height: auto;
position: absolute;
top: 21.5%;
left: 75%;
top:18%;
left: 65%;
z-index: 99;
cursor: pointer;
}
@ -3101,10 +3303,13 @@ export default {
height: calc(100% - 0.66rem);
box-sizing: border-box;
padding-top: 0.44rem;
position: absolute;
top: 0.56rem;
right: 0.66rem;
position: relative;
// top: 0.56rem;
// right: 0.66rem;
z-index: 999;
.weather_echart{
height: calc(100% - 3.5rem);
}
.right-image-list{
padding: 20px 0;
display: grid;
@ -3137,7 +3342,10 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
.video{
width: 3.7rem;
height: 2.6rem;
}
.mySwiper_video {
width: 100%;
height: 100%;

40
src/views/page/largeScreen1.vue
View File

@ -443,7 +443,7 @@
</template>
</div> -->
<div class="popBox">
<div class="pole_item" style="top:53.5%;left:48.5%;z-index:1;" @click="toHttp">
<div class="pole_item" style="top:40.5%;left:48.5%;z-index:1;" @click="toHttp">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>100个拱棚</span>
@ -1071,48 +1071,48 @@ export default {
},
getTopOrLeft9(id) {
if (id == 1) {
return 'top:20.5%;left:10%;z-index:10;'
return 'top:23.5%;left:21%;z-index:10;'
} else if (id == 2) {
return 'top:72%;left:12%;z-index:9;'
return 'top:63%;left:28%;z-index:9;'
} else if (id == 3) {
return 'top:32%;left:56%;z-index:8;'
return 'top:23%;left:55%;z-index:8;'
} else if (id == 4) {
return 'top:34%;left:57%;z-index:7;'
} else if (id == 5) {
return 'top:20.5%;left:66.5%;z-index:6;'
return 'top:13.5%;left:59.5%;z-index:6;'
} else if (id == 6) {
return 'top:22.5%;left:68%;z-index:5;'
return 'top:15.5%;left:61%;z-index:5;'
} else if (id == 7) {
return 'top:17%;left:70.6%;z-index:4;'
return 'top:10%;left:61.6%;z-index:4;'
} else if (id == 8) {
return 'top:19.5%;left:71.5%;z-index:3;'
return 'top:12.5%;left:63.5%;z-index:3;'
} else if (id == 9) {
return 'top:14%;left:75%;z-index:2;'
return 'top:7%;left:63%;z-index:2;'
} else if (id == 10) {
return 'top:16.5%;left:75.5%;z-index:1;'
return 'top:10%;left:65.5%;z-index:1;'
}
},
getTopOrLeft9_9(id) {
if (id == 1) {
return 'top:20.5%;left:10%;transform: translate(54%,0);'
return 'top:23.5%;left:21%;transform: translate(30%,0);'
} else if (id == 2) {
return 'top:72%;left:12%;transform: translate(54%,0);'
return 'top:63%;left:28%;transform: translate(30%,0);'
} else if (id == 3) {
return 'top:32%;left:56%;transform: translate(54%,0);'
return 'top:23%;left:55%;transform: translate(30%,0);'
} else if (id == 4) {
return 'top:16%;left:57%;transform: translate(54%,0%);'
return 'top:34%;left:57%;transform: translate(30%,0%);'
} else if (id == 5) {
return 'top:20.5%;left:66.5%;transform: translate(54%,0%);'
return 'top:13.5%;left:59.5%;transform: translate(30%,0%);'
} else if (id == 6) {
return 'top:22.5%;left:68%;transform: translate(54%,0%);'
return 'top:15.5%;left:61%;transform: translate(30%,0%);'
} else if (id == 7) {
return 'top:17%;left:70.6%;transform: translate(54%,0%);'
return 'top:10%;left:61.6%;transform: translate(30%,0%);'
} else if (id == 8) {
return 'top:19.5%;left:71.5%;transform: translate(54%,0);'
return 'top:12.5%;left:63.5%;transform: translate(30%,0);'
} else if (id == 9) {
return 'top:14%;left:75%;transform: translate(54%,0);'
return 'top:7%;left:63%;transform: translate(30%,0);'
} else if (id == 10) {
return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
return 'top:10%;left:65.5%;transform: translate(30%,0);'
}
},