1

src/api/index.js

@@ -382,6 +382,15 @@ selFsTime(data) {
 loadHistorydata(data) {
   return sendPostRequest(`/load/historydata`, data)
 },
+//查看抓取图片历史数据
+imageReadtoday(data) {
+  return sendPostRequest(`/image/readtoday`, data)
+},
+//下载图片
+imageUploadImage(data) {
+  return sendPostRequest(`/image/uploadImage`, data)
+},
+
 //摄像头操作开始
 cameraStart(cameraSerialNumber,cameraChannelNumber,num) {
   return sendPostRequest(`/camera/start?cameraid=${cameraSerialNumber}&channelid=${cameraChannelNumber}&direction=${num}`)

src/assets/css/main.css

@@ -3700,3 +3700,34 @@
 .historyData .table-view .el-table th.el-table__cell.is-leaf .cell {
   font-size: 14px !important;
 }
+
+.historyData .table-view .table-title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-bottom: 5px;
+  justify-content: space-between;
+  border-bottom: 2px solid rgba(0, 180, 255, 0.5);
+}
+
+.historyData .table-view .image-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.historyData .table-view .image-list > div {
+  width: 380px;
+  height: auto;
+  background: rgba(0, 132, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.35);
+  margin: 7.5px;
+  padding: 10px;
+  flex-shrink: 0;
+}
+
+.historyData .table-view .image-list > div .el-image {
+  cursor: pointer;
+  min-height: 200px;
+}

src/assets/css/main.scss

@@ -3949,5 +3949,33 @@
         .el-table th.el-table__cell.is-leaf .cell {
             font-size: 14px !important;
         }
+        .table-title{
+            width: 100%;
+            display: flex;
+            align-items: center;
+            padding-bottom: 5px;
+            justify-content: space-between;
+            border-bottom:2px solid rgba(0, 180, 255, 0.5);
+        }
+        .image-list{
+            width: 100%;
+            display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+     
+            >div{
+                width: 380px;
+                height: auto;
+                background: rgba(0, 132, 255, 0.15);
+                border: 2px solid rgba(0, 186, 255, 0.35);
+                margin: 7.5px;
+                padding: 10px;
+                flex-shrink: 0;
+                .el-image{
+                    cursor: pointer;
+                    min-height: 200px;
+                }
+            }
+        }
     }
 }

src/router/index.js

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

src/views/index.vue

@@ -68,7 +68,7 @@ export default {
                 { name: '实时数据', router: 'realTime', routerList: ['realTime'], img: require('../assets/image/header-img1.png') },
                 // { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
                 { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'status', 'exitSettings', 'skylight', 'systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'alarmSettings', 'synthesis-con', '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/header-img0.png') },
-                { name: '图库数据', router: '', routerList: [], img: require('../assets/image/header-img1.png') },
+                { name: '图库数据', router: 'imageData', routerList: ['imageData'], img: require('../assets/image/header-img1.png') },
                 { name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
                 //  history history
                 { name: '历史数据', router: 'historyData', index: 1, routerList: ['historyData'], img: require('../assets/image/header-img3.png') },
@@ -84,10 +84,10 @@ export default {
             activeNames: [3],
             leftList: [
                 { name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },
-                { name: '温室', routerList: ['realTime', 'dataAnalysis', '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: '温室', routerList: ['realTime', 'dataAnalysis', 'historyData', 'exitSettings', 'videoMonitoring','imageData', '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', 'dataAnalysis', 'historyData', 'irrigateSet', 'videoMonitoring', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },
+                { name: '施肥机', routerList: ['formula', 'dataAnalysis', 'historyData', 'irrigateSet', 'videoMonitoring','imageData', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.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: [] },
+                { name: '生态气象站', routerList: ['realTime', 'historyData', 'exitSettings', 'skylight', 'control', 'systemSet-con','imageData', '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',
@@ -402,6 +402,9 @@ export default {
                     } else if (this.routerNow == 'historyData') {
                         this.$store.state.equipmentIndex = item.index
                         this.$router.push({ path: `/historyData?index=${item.index ? item.index : 1}` })
+                    } else if (this.routerNow == 'imageData') {
+                        this.$store.state.equipmentIndex = item.index
+                        this.$router.push({ path: `/imageData?index=${item.index ? item.index : 1}` })
                     } else {
 
                         if (item.deviceName == 10) {

src/views/page/imageData.vue

@@ -0,0 +1,259 @@
+<template>
+    <div class="formula realTime historyData">
+        <div class="page-content">
+            <div class="table-title">
+                <img src="../../assets/image/real-time.png" alt="" />
+                {{ deviceName }}—图库数据
+            </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">
+                <!-- <div class="table-title">
+                    <div>{{ deviceName }}</div>
+                    <span>共有{{ total }}张图片</span>
+                </div> -->
+                <div class="image-list">
+                    <div v-for="item, index in tableData" :key="index">
+                        <el-image :src="item.pictureUrl" :preview-src-list="srcList">
+                            <div slot="error" class="image-slot">
+                                <i class="el-icon-picture-outline"></i>
+                            </div>
+                        </el-image>
+                        {{ item.updateTime }}
+                    </div>
+                </div>
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                    :current-page="currentPage" :page-sizes="[12, 20, 28, 36]" :page-size="pageSize"
+                    layout="->,total, sizes, prev, pager, next, jumper" :total="total">
+                </el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { Loading } from 'element-ui';
+export default {
+    data() {
+        return {
+            deviceName: '',
+            active: 0,
+            dateRange: [],
+            tableData: [],
+            currentPage: 1,
+            pageSize: 12,
+            total: 0,
+            loading: null,
+            srcList: [],
+        }
+    },
+    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() {
+            this.loading = this.$loading({
+                lock: true,
+                text: '加载中',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            var store = this.$store.state
+            var index = store.equipmentIndex;
+            this.deviceName = store.equipmentList[index - 1].deviceTypeName
+            if (this.active == 0) {
+                this.timeInit()
+            } else if (this.active == 1) {
+                this.yesterdayTime()
+            }
+            this.pageSize = 12
+            this.currentPage = 1
+            setTimeout(() => {
+                this.getData()
+            }, 0);
+        },
+        downloadImage(url, filename) {
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+
+        },
+        download() {
+            // this.loading = this.$loading({
+            //     lock: true,
+            //     text: '加载中',
+            //     spinner: 'el-icon-loading',
+            //     background: 'rgba(0, 0, 0, 0.7)'
+            // });
+            var store = this.$store.state
+            var index = store.equipmentIndex;
+
+            var data = {
+                deviceId: store.equipmentList[index - 1].deviceId,
+                startTime: this.getTime(this.dateRange[0]),
+                endTime: this.getTime(this.dateRange[1]),
+                page: this.currentPage,
+                pageSize: this.pageSize,
+            }
+            // this.api.imageUploadImage(data).then(res=>{
+            //     console.log(res,111);
+            // })
+            this.tableData.forEach((item, index) => {
+                const pictureUrl = item.pictureUrl;
+                const filename = `image_${item.updateTime}.jpg`;
+
+                this.downloadImage(pictureUrl, filename);
+            });
+            // this.api.loadHistorydata(data).then(res => {
+            //     // 创建一个blob对象
+            //     this.loading.close()
+            //     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 = {
+                deviceId: store.equipmentList[index - 1].deviceId,
+                startTime: this.getTime(this.dateRange[0]),
+                endTime: this.getTime(this.dateRange[1]),
+                page: this.currentPage,
+                pageSize: this.pageSize,
+            }
+            this.api.imageReadtoday(data).then(res => {
+                this.loading.close()
+                if (res.data.code == 200) {
+                    this.tableData = res.data.data.baiduspiderimage
+                    this.srcList = this.tableData.map(item => item.pictureUrl);
+                    this.total = res.data.data.totalCount
+                }
+            })
+        },
+        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>