pc-master #135
|
|
@ -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}`)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
</div>
|
||||
<div class="type1" v-if="scope.row.type == 5">
|
||||
<div class="input-main-80">
|
||||
<span>ph初始值</span>
|
||||
<span>PH初始值</span>
|
||||
<input @blur="blurChange(store.formulaNum[indexs - 1] + 26 , $event)"
|
||||
v-model="inputData[store.formulaNum[indexs - 1] + 26]"
|
||||
@input="change(store.formulaNum[indexs - 1] + 26, $event)" type="number" style="height: 34px;margin: 0 5px;"
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</div>
|
||||
<div class="type1" v-if="scope.row.type == 6">
|
||||
<div class="input-main-80">
|
||||
<span>ec初始值</span>
|
||||
<span>EC初始值</span>
|
||||
<input @blur="blurChange(store.formulaNum[indexs - 1] + 27 , $event)"
|
||||
v-model="inputData[store.formulaNum[indexs - 1] + 27]"
|
||||
@input="change(store.formulaNum[indexs - 1] + 27, $event)" type="number" style="height: 34px;margin: 0 5px;"
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
<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='180' 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,274 @@
|
|||
<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) {
|
||||
console.log(filename);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
link.click();
|
||||
},
|
||||
async 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);
|
||||
// })
|
||||
var index = 0
|
||||
// const pictureUrl = this.tableData[index].pictureUrl;
|
||||
// const filename = `image_${this.tableData[index].updateTime}.jpg`;
|
||||
// this.downloadImage(pictureUrl, filename);
|
||||
const timer =setInterval(() => {
|
||||
index += 1
|
||||
if (index <= this.tableData.length) {
|
||||
|
||||
console.log(index, this.tableData,this.tableData.length);
|
||||
const pictureUrl = this.tableData[index-1].pictureUrl;
|
||||
const filename = `image_${this.tableData[index-1].updateTime}.jpg`;
|
||||
this.downloadImage(pictureUrl, filename);
|
||||
}else{
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 501);
|
||||
// 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>
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="status-true-charts"
|
||||
v-if="item.type == 6 || item.type == 5 || item.type == 2 || item.type == 15 || item.type == 14 || item.type == 13 || item.type == 12">
|
||||
v-if="item.type == 6 || item.type == 5 || item.type == 2 || item.type == 15 || item.type == 14 || item.type == 13 || item.type == 12|| item.type == 16">
|
||||
<img src="../../assets/img/status-true-charts-icon.png" alt="">
|
||||
<div :id="'statusCharts' + index"></div>
|
||||
</div>
|
||||
|
|
@ -716,10 +716,11 @@ export default {
|
|||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||||
template: 'security',
|
||||
useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
|
||||
// plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||||
plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||||
width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
|
||||
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
|
||||
})
|
||||
|
||||
},
|
||||
getIcon(item) {
|
||||
var index = item.index
|
||||
|
|
@ -1430,7 +1431,7 @@ export default {
|
|||
setTimeout(() => {
|
||||
|
||||
this.statusList.forEach((el, index) => {
|
||||
if (el.open != 0 && (el.type == 6 || el.type == 5 || el.type == 2 || el.type == 15 || el.type == 14 || el.type == 13 || el.type == 12)) {
|
||||
if (el.open != 0 && (el.type == 6 || el.type == 5 || el.type == 2 || el.type == 15 || el.type == 14 ||el.type == 16 || el.type == 13 || el.type == 12)) {
|
||||
|
||||
setTimeout(() => {
|
||||
statusCharts(`statusCharts${index}`, el.progress)
|
||||
|
|
|
|||
Loading…
Reference in New Issue