历史数据页面编写+接口对接

pull/111/head
孙萌 2024-02-20 14:43:23 +08:00
parent e58028d02d
commit 6192d8151d
9 changed files with 399 additions and 16 deletions

View File

@ -367,6 +367,19 @@ readalarmSetting(data) {
return sendGetRequest(`/readControl/alarmSetting`, data) return sendGetRequest(`/readControl/alarmSetting`, data)
}, },
//报警设置
readalarmSetting(data) {
return sendGetRequest(`/readControl/alarmSetting`, data)
},
//主页查看施肥机历史数据
selFsTime(data) {
return sendPostRequest(`/selFs/time`, data)
},
//主页查看施肥机历史数据
loadHistorydata(data) {
return sendPostRequest(`/load/historydata`, data)
},
//二维码溯源 //二维码溯源
//查看农事作物信息 //查看农事作物信息
getAgriculturalInformation(data) { getAgriculturalInformation(data) {

View File

@ -965,6 +965,40 @@
border-bottom: 1px solid rgba(0, 180, 255, 0.5); border-bottom: 1px solid rgba(0, 180, 255, 0.5);
} }
.input-sel-time {
display: flex;
align-items: center;
}
.input-sel-time .el-range-separator {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
padding: 0 8px;
width: 40px;
}
.input-sel-time span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
padding: 0 8px;
}
.input-sel-time .el-input__inner {
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.4);
cursor: pointer;
position: relative;
}
.input-sel-time .el-input__inner .el-range-input {
background: transparent;
color: #fff;
}
.input-btn { .input-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@ -3473,3 +3507,36 @@
cursor: pointer; cursor: pointer;
background: #00BB88; background: #00BB88;
} }
.el-pagination {
margin-top: 20px;
}
.el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon {
color: #333;
}
.el-pager li {
color: #333;
}
.el-pager li.active {
color: #409EFF;
}
.el-select-dropdown__item.selected span {
color: #409EFF;
font-weight: 700;
}
.el-pagination__total, .el-pagination__jump {
color: #fff;
}
.el-select-dropdown__item span {
color: #606266;
}
.historyData .table-view .el-table th.el-table__cell.is-leaf .cell {
font-size: 14px !important;
}

File diff suppressed because one or more lines are too long

View File

@ -1007,6 +1007,35 @@
border-bottom: 1px solid rgba(0, 180, 255, 0.5); border-bottom: 1px solid rgba(0, 180, 255, 0.5);
} }
.input-sel-time{
display: flex;
align-items: center;
.el-range-separator{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
padding:0 8px;
width: 40px;
}
span{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
padding:0 8px;
}
.el-input__inner{
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.40);
cursor: pointer;
position: relative;
.el-range-input{
background: transparent;
color: #fff;
}
}
}
.input-btn { .input-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@ -3661,4 +3690,37 @@
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
background: #00BB88; background: #00BB88;
}
.el-pagination{
margin-top: 20px;
.btn-prev,.btn-next{
.el-icon{
color: #333;
}
}
}
.el-pager li{
color: #333;
}
.el-pager li.active{
color: #409EFF;
}
.el-select-dropdown__item.selected span{
color: #409EFF;
font-weight: 700;
}
.el-pagination__total,.el-pagination__jump{
color: #fff;
}
.el-select-dropdown__item span{
color: #606266;
}
.historyData{
.table-view{
.el-table th.el-table__cell.is-leaf .cell{
font-size: 14px!important;
}
}
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 505 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 B

View File

@ -46,6 +46,10 @@ const routes = [
path: '/formula', path: '/formula',
name: 'formula', name: 'formula',
component: () => import('../views/page/formula.vue') component: () => import('../views/page/formula.vue')
},{
path: '/historyData',
name: 'historyData',
component: () => import('../views/page/historyData.vue')
},{ },{
path: '/videoMonitoring', path: '/videoMonitoring',
name: 'videoMonitoring', name: 'videoMonitoring',

View File

@ -70,7 +70,7 @@ export default {
{ name: '图库数据', router: '', routerList: [], img: require('../assets/image/header-img1.png') }, { name: '图库数据', router: '', routerList: [], img: require('../assets/image/header-img1.png') },
{ name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') }, { name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
// history history // history history
{ name: '历史数据', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img3.png') }, { name: '历史数据', router: 'historyData', index: 1, routerList: ['historyData'], img: require('../assets/image/header-img3.png') },
//dataAnalysis dataAnalysis //dataAnalysis dataAnalysis
{ name: '数据分析', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img4.png') }, { name: '数据分析', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img4.png') },
// { name: '', router: '', routerList: [], img: require('../assets/image/header-img5.png') }, // { name: '', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
@ -83,10 +83,10 @@ export default {
activeNames: [3], activeNames: [3],
leftList: [ leftList: [
{ name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, }, { name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },
{ name: '温室', routerList: ['realTime','exitSettings','videoMonitoring', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img0.png'), list: [] }, { name: '温室', routerList: ['realTime','historyData','exitSettings','videoMonitoring', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img0.png'), list: [] },
// { name: '', img: require('../assets/image/left-img1.png'), list: [] }, // { name: '', img: require('../assets/image/left-img1.png'), list: [] },
{ name: '施肥机', routerList: ['formula', 'irrigateSet','videoMonitoring', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] }, { name: '施肥机', routerList: ['formula','historyData', 'irrigateSet','videoMonitoring', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },
{ name: '生态气象站', routerList: ['realTime','exitSettings', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img3.png'), list: [] }, { name: '生态气象站', routerList: ['realTime','historyData','exitSettings', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img3.png'), list: [] },
], ],
routerNow: 'realTime', routerNow: 'realTime',
@ -343,7 +343,19 @@ export default {
if (this.routerNow == 'realTime') { if (this.routerNow == 'realTime') {
this.$store.state.equipmentIndex = item.index this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/realTime?index=${item.index ? item.index : 1}&name=${item.deviceName}` }) this.$router.push({ path: `/realTime?index=${item.index ? item.index : 1}&name=${item.deviceName}` })
} else if (item.router == 'formula') { } else if (this.routerNow == 'formula') {
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/formula?index=${item.index ? item.index : 1}` })
} else if (this.routerNow == 'history') {
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/history?index=${item.index ? item.index : 1}` })
} else if (this.routerNow == 'dataAnalysis') {
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
} else if (this.routerNow == 'historyData') {
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/historyData?index=${item.index ? item.index : 1}` })
} else if (item.router == 'formula') {
this.$store.state.equipmentIndex = item.index this.$store.state.equipmentIndex = item.index
this.routerIndex = item.index this.routerIndex = item.index
@ -356,16 +368,7 @@ export default {
} else if (item.deviceName == 1 && this.routerNow != 'irrigateSet') { } else if (item.deviceName == 1 && this.routerNow != 'irrigateSet') {
this.$router.push({ path: `/irrigateSet?change=${item.index}` }) this.$router.push({ path: `/irrigateSet?change=${item.index}` })
} }
} else if (this.routerNow == 'formula') { }
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/formula?index=${item.index ? item.index : 1}` })
} else if (this.routerNow == 'history') {
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/history?index=${item.index ? item.index : 1}` })
} else if (this.routerNow == 'dataAnalysis') {
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
}
} else if (item.router == 'formula' && this.$route.query.index == item.index) { } else if (item.router == 'formula' && this.$route.query.index == item.index) {
return return
} else if (item.router != this.routerNow && !item.http) { } else if (item.router != this.routerNow && !item.http) {

View File

@ -0,0 +1,234 @@
<template>
<div class="formula realTime historyData">
<div class="page-content">
<div class="table-title">
<img src="../../assets/image/real-time.png" alt="" />
历史数据
</div>
<div class="flex-view">
<div class="input-btn">
<span>快速查询</span>
<div class="btn btn-w66" @click="active = 0" :class="active == 0 ? 'blue' : 'off'">
今日
</div>
<div class="btn btn-w66" @click="active = 1" :class="active == 1 ? 'blue' : 'off'">
昨日
</div>
<div class="btn btn-w66" @click="active = 2" :class="active == 2 ? 'blue' : 'off'">
自定义
</div>
</div>
<div class="input-sel-time">
<span>时间段</span>
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="" start-placeholder=""
end-placeholder="结束时间">
</el-date-picker>
</div>
<div class="input-btn ">
<div class="btn blue" @click="search">
查询
</div>
<div class="btn blue" @click="download">
下载
</div>
<!-- <div class="btn blue">
数据统计
</div>
<div class="btn blue">
/夜平均时间范围设置
</div> -->
</div>
</div>
<div class="table-view">
<el-table :data="tableData" :row-class-name="tableRowClassName" max-height="520" style="width: 100%">
<el-table-column min-width='150' prop="time" label="时间"></el-table-column>
<el-table-column min-width='150' :label="item" v-for="item, index in tableList" :key="index">
<template slot-scope="scope">
<div>{{ scope.row['data' + index] }}</div>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
layout="->,total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: 0,
dateRange: [],
tableData: [],
currentPage: 1,
pageSize: 10,
tableList: [],
total: 0,
}
},
watch: {
active(newVal, oldVal) {
if (newVal != 2) {
this.dataInit()
}
},
$route(newVal, oldVal) {
const that = this;
const store = this.$store.state
this.dataInit()
},
},
mounted() {
this.dataInit()
},
methods: {
getTime(time) {
//
var chinaTime = new Date(time);
// UTC
var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);
// UTC2024-02-17 00:00:00
var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
return formattedTime
},
dataInit() {
if (this.active == 0) {
this.timeInit()
} else if (this.active == 1) {
this.yesterdayTime()
}
this.pageSize = 10
this.currentPage = 1
setTimeout(() => {
this.getData()
}, 0);
},
download() {
var store = this.$store.state
var index = store.equipmentIndex;
var data = {
equipmentId: store.equipmentList[index - 1].deviceId,
startTime: this.getTime(this.dateRange[0]),
endTime: this.getTime(this.dateRange[1]),
page: this.currentPage,
pageSize: this.pageSize,
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
}
this.api.loadHistorydata(data).then(res => {
// blob
const blob = new Blob([res.data], { type: 'text/csv' });
// a
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
//
link.setAttribute('download', 'filename.csv');
//
document.body.appendChild(link);
link.click();
//
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
},
getData() {
var store = this.$store.state
var index = store.equipmentIndex;
var data = {
equipmentId: store.equipmentList[index - 1].deviceId,
startTime: this.getTime(this.dateRange[0]),
endTime: this.getTime(this.dateRange[1]),
page: this.currentPage,
pageSize: this.pageSize,
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 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[`data${index}`] = item.environmentData;
});
this.tableData.push(processedData)
})
}
})
},
yesterdayTime() {
//
var today = new Date();
//
var yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
// 00:00
yesterday.setHours(0, 0, 0, 0);
var start = yesterday.toISOString();
// 23:59
yesterday.setHours(23, 59, 59, 999);
var end = yesterday.toISOString();
this.dateRange = [start, end]
},
timeInit() {
const start = new Date()
start.setHours(0, 0, 0, 0)
const end = new Date()
this.dateRange = [start, end]
},
search() {
this.dataInit()
},
handleSizeChange(val) {
this.pageSize = val
setTimeout(() => {
this.getData()
}, 0);
},
handleCurrentChange(val) {
this.currentPage = val
setTimeout(() => {
this.getData()
}, 0);
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return 'warning-row';
} else if (rowIndex % 2 == 0) {
return 'success-row';
}
return '';
}
},
}
</script>
<style lang="scss"></style>