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

pc-master #135

Merged
xiaomeng merged 4 commits from pc-master into portal 2024-03-18 00:18:54 +00:00
Conversation 0 Commits 4 Files Changed 10 +339 -5
7 changed files with 339 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8aa05945d7 - Show all commits

9
src/api/index.js
View File

@ -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}`)

31
src/assets/css/main.css
View File

@ -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;
}

2
src/assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

28
src/assets/css/main.scss
View File

@ -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;
}
}
}
}
}

4
src/router/index.js
View File

@ -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',

11
src/views/index.vue
View File

@ -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: ['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: ['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','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) {

259
src/views/page/imageData.vue Normal file
View File

@ -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>