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

src/api/index.js

@@ -367,6 +367,19 @@ readalarmSetting(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) {

src/assets/css/main.css

@@ -965,6 +965,40 @@
   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 {
   display: flex;
   align-items: center;
@@ -3473,3 +3507,36 @@
   cursor: pointer;
   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;
+}

src/assets/css/main.scss

@@ -1007,6 +1007,35 @@
     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 {
     display: flex;
     align-items: center;
@@ -3661,4 +3690,37 @@
     color: #FFFFFF;
     cursor: pointer;
     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;
+        }
+    }
 }

src/router/index.js

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

src/views/index.vue

@@ -70,7 +70,7 @@ export default {
                 { name: '图库数据', router: '', routerList: [], img: require('../assets/image/header-img1.png') },
                 { name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
                 //  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
                 { name: '数据分析', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img4.png') },
                 // { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
@@ -83,10 +83,10 @@ export default {
             activeNames: [3],
             leftList: [
                 { 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: '施肥机', 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',
@@ -343,7 +343,19 @@ export default {
                     if (this.routerNow == 'realTime') {
                         this.$store.state.equipmentIndex = item.index
                         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.routerIndex = item.index
@@ -356,16 +368,7 @@ export default {
                         } else if (item.deviceName == 1 && this.routerNow != 'irrigateSet') {
                             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) {
                     return 
                 } else if (item.router != this.routerNow && !item.http) {

src/views/page/historyData.vue

@@ -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);
+
+            // 将UTC时间转换为2024-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>