新增气象台数据查询页面
This commit is contained in:
VIJAY\vijay
parent
6059735df0
commit
784165ae78
|
|
@ -49,6 +49,7 @@
|
|||
"jszip": "3.1.5",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"moment": "^2.27.0",
|
||||
"node-sass": "^7.0.1",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"screenfull": "3.3.2",
|
||||
|
|
@ -94,7 +95,6 @@
|
|||
"husky": "0.14.3",
|
||||
"lint-staged": "7.2.0",
|
||||
"node-notifier": "5.1.2",
|
||||
"node-sass": "^4.7.2",
|
||||
"optimize-css-assets-webpack-plugin": "3.2.0",
|
||||
"ora": "1.3.0",
|
||||
"portfinder": "1.0.13",
|
||||
|
|
@ -102,6 +102,7 @@
|
|||
"postcss-loader": "2.0.9",
|
||||
"postcss-url": "7.3.0",
|
||||
"rimraf": "2.6.2",
|
||||
"sass": "^1.54.4",
|
||||
"sass-loader": "6.0.6",
|
||||
"script-loader": "0.7.2",
|
||||
"semver": "5.4.1",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export function fetchDeviceList(query) {
|
|||
|
||||
// device log list api
|
||||
export function fetchDeviceLogs(query) {
|
||||
request.defaults.timeout = 5000 * 6
|
||||
request.defaults.timeout = 50000 * 6
|
||||
return request({
|
||||
url: '/api/counter/logs/',
|
||||
method: 'get',
|
||||
|
|
@ -20,7 +20,7 @@ export function fetchDeviceLogs(query) {
|
|||
}
|
||||
|
||||
// reset timeout
|
||||
request.defaults.timeout = 5000
|
||||
request.defaults.timeout = 50000
|
||||
|
||||
// device logs history api
|
||||
export function fetchDeviceLogsHistory(query) {
|
||||
|
|
@ -67,3 +67,13 @@ export function fetchDeviceTempLog(query) {
|
|||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// weather device log api
|
||||
|
||||
export function fetchWeatherLog(query) {
|
||||
return request({
|
||||
url: '/api/mosq/weather/',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export default {
|
|||
detail: 'Device Detail',
|
||||
logs: 'Log List',
|
||||
map: 'Map',
|
||||
weather: 'Weather Station',
|
||||
deviceSetting: 'Device Setting',
|
||||
systemSetting: 'System Setting',
|
||||
guide: 'Guide',
|
||||
|
|
@ -185,5 +186,52 @@ export default {
|
|||
to: 'To',
|
||||
start_date: 'Start Date',
|
||||
end_date: 'End Date'
|
||||
},
|
||||
weather: {
|
||||
online: 'online',
|
||||
offline: 'offline',
|
||||
all: 'all',
|
||||
inputDeviceID: 'Device ID',
|
||||
inputStatus: 'status',
|
||||
search: 'search',
|
||||
reset: 'reset',
|
||||
detail: 'Detail',
|
||||
map: 'Map',
|
||||
sn: 'No.',
|
||||
device: 'Device ID',
|
||||
status: 'Status',
|
||||
count: 'Count',
|
||||
signal: 'Signal',
|
||||
energy: 'Energy',
|
||||
time: 'Time',
|
||||
date: 'Date',
|
||||
coordinate: 'Coordinate',
|
||||
action: 'Action',
|
||||
logDesc: 'Mosquito killer log list',
|
||||
screen: 'Screen chart',
|
||||
trendChart: 'Trend chart',
|
||||
region: 'Region',
|
||||
deviceName: 'Device Name',
|
||||
humitureChart: 'Humiture chart',
|
||||
temperature: 'Temperature(℃)',
|
||||
humidity: 'Humidity',
|
||||
logSeachContent: 'Device ID/Name',
|
||||
to: 'To',
|
||||
start_date: 'Start Date',
|
||||
end_date: 'End Date',
|
||||
envTemp: 'Env. Temp(℃)',
|
||||
dewPointTemp: 'Daw Point Temp(℃)',
|
||||
envHumi: 'Env. Humi(%RH)',
|
||||
airPressure: 'Air Pressure(hPa)',
|
||||
totalRadiation1Ins: 'Total Radiation 1 Ins(W/㎡)',
|
||||
windDirection: 'Wind Directiong(°)',
|
||||
windSpeedIns: 'Wind Speed Ins(m/s)',
|
||||
windSpeed2mins: 'Wind Speed 2mins(m/s)',
|
||||
windSpeed10mins: 'Wind Speed 10mins(m/s)',
|
||||
rainfallIntervalCum: 'Rainfall Interval Cum(mm)',
|
||||
totalRadiation1IntervalCum: 'Total Radiation 1 Interval Cum(MJ/㎡)',
|
||||
rainfallDailyCum: 'Rainfall Daily Cum(mm)',
|
||||
totalRadiation1DailyCum: 'Total Radiation 1 Daily Cum(MJ/㎡)',
|
||||
power: 'Power(V)'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ export default {
|
|||
dashboard: '仪表盘',
|
||||
introduction: '简述',
|
||||
documentation: '文档',
|
||||
counter: '数据分析',
|
||||
counter: '灭蚊灯数据',
|
||||
statistic: '数据统计',
|
||||
device: '状态监控',
|
||||
detail: '设备详情',
|
||||
logs: '日志列表',
|
||||
map: '区域地图',
|
||||
weather: '气象台',
|
||||
deviceSetting: '设备设置',
|
||||
systemSetting: '系统设置',
|
||||
guide: '引导页',
|
||||
|
|
@ -185,5 +186,52 @@ export default {
|
|||
logSeachContent: '设备名称/ID',
|
||||
start_date: '开始日期',
|
||||
end_date: '结束日期'
|
||||
},
|
||||
weather: {
|
||||
online: '在线',
|
||||
offline: '离线',
|
||||
all: '全部',
|
||||
inputDeviceID: '设备 ID',
|
||||
inputStatus: '状态',
|
||||
search: '搜索',
|
||||
reset: '重置',
|
||||
detail: '详情',
|
||||
map: '地图',
|
||||
sn: '序号',
|
||||
device: '设备ID',
|
||||
status: '状态',
|
||||
count: '计数',
|
||||
signal: '信号',
|
||||
energy: '电量',
|
||||
time: '时间',
|
||||
date: '日期',
|
||||
coordinate: '坐标',
|
||||
action: '操作',
|
||||
logDesc: '灭蚊器日志列表',
|
||||
screen: '显示屏',
|
||||
trendChart: '趋势图',
|
||||
region: '地区',
|
||||
deviceName: '设备名称',
|
||||
humitureChart: '温湿度',
|
||||
temperature: '温度',
|
||||
humidity: '湿度',
|
||||
to: '至',
|
||||
logSeachContent: '设备名称/ID',
|
||||
start_date: '开始日期',
|
||||
end_date: '结束日期',
|
||||
envTemp: '环温(℃)',
|
||||
dewPointTemp: '露点温度(℃)',
|
||||
envHumi: '环湿(%RH)',
|
||||
airPressure: '气压(hPa)',
|
||||
totalRadiation1Ins: '总辐射1瞬时(W/㎡)',
|
||||
windDirection: '风向(°)',
|
||||
windSpeedIns: '瞬时风速(m/s)',
|
||||
windSpeed2mins: '2分钟风速(m/s)',
|
||||
windSpeed10mins: '10分钟风速(m/s)',
|
||||
rainfallIntervalCum: '雨量间隔累计(mm)',
|
||||
totalRadiation1IntervalCum: '总辐射1间隔累计(MJ/㎡)',
|
||||
rainfallDailyCum: '雨量日累计(mm)',
|
||||
totalRadiation1DailyCum: '总辐射1日累计(MJ/㎡)',
|
||||
power: '电量(V)'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,6 +67,17 @@ export const constantRouterMap = [
|
|||
{ path: 'logs', component: () => import('@/views/counter/logs'), name: 'logs', meta: { title: 'logs' }},
|
||||
{ path: 'map', component: () => import('@/views/counter/map2'), name: 'map', meta: { title: 'map' }}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: 'weather',
|
||||
children: [{
|
||||
path: 'weather',
|
||||
component: () => import('@/views/weather/index'),
|
||||
name: 'weather',
|
||||
meta: { title: 'weather', icon: 'international', noCache: true }
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,303 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
@keyup.enter.native="handleFilter"
|
||||
@keyup.esc.native="handleEsc"
|
||||
size="small" style="width: 220px;"
|
||||
class="filter-item"
|
||||
:placeholder="$t('weather.logSeachContent')" v-model="logsListQuery.device">
|
||||
</el-input>
|
||||
<div class="date-selector filter-item">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
size="small"
|
||||
type="daterange"
|
||||
align="right"
|
||||
:range-separator="$t('weather.to')"
|
||||
:start-placeholder="$t('weather.start_date')"
|
||||
:end-placeholder="$t('weather.end_date')"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="handleDateSelect"
|
||||
/>
|
||||
</div>
|
||||
<el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
<el-button :disabled="downloadDisabled" class="filter-item export" :loading="downloadLoading" size="small"
|
||||
type="primary" icon="el-icon-document" @click="handleDownload">{{ $t('table.export') }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="logList"
|
||||
style="width: 100%"
|
||||
:default-sort = "{prop: 'data_time', order: 'descending'}"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
:label="$t('weather.sn')">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="data_time"
|
||||
:label="$t('weather.time')"
|
||||
sortable
|
||||
min-width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="device_id"
|
||||
:label="$t('weather.device')"
|
||||
sortable
|
||||
min-width="110">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="device_name"
|
||||
:label="$t('weather.deviceName')"
|
||||
sortable
|
||||
min-width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="env_temp"
|
||||
:label="$t('weather.envTemp')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dew_point_temp"
|
||||
:label="$t('weather.dewPointTemp')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="env_humi"
|
||||
:label="$t('weather.envHumi')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="air_pressure"
|
||||
:label="$t('weather.airPressure')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="total_radiation_1_ins"
|
||||
:label="$t('weather.totalRadiation1Ins')"
|
||||
min-width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="wind_direction"
|
||||
:label="$t('weather.windDirection')"
|
||||
min-width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="wind_speed_ins"
|
||||
:label="$t('weather.windSpeedIns')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="wind_speed_2mins"
|
||||
:label="$t('weather.windSpeed2mins')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="wind_speed_10mins"
|
||||
:label="$t('weather.windSpeed10mins')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="rainfall_interval_cum"
|
||||
:label="$t('weather.rainfallIntervalCum')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="total_radiation_1_interval_cum"
|
||||
:label="$t('weather.totalRadiation1IntervalCum')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="rainfall_daily_cum"
|
||||
:label="$t('weather.rainfallDailyCum')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="total_radiation_1_daily_cum"
|
||||
:label="$t('weather.totalRadiation1DailyCum')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="power"
|
||||
:label="$t('weather.power')"
|
||||
min-width="120">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination background
|
||||
:current-page="1"
|
||||
:page-sizes="[10,20,30,50]"
|
||||
:page-size="logsListQuery.limit"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchWeatherLog } from '@/api/counter'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import { parseTime } from '@/utils'
|
||||
export default {
|
||||
name: 'weather',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logList: [],
|
||||
logExportList: [],
|
||||
listLoading: true,
|
||||
total: 0,
|
||||
logsListQuery: {
|
||||
device: undefined,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
start: undefined,
|
||||
end: undefined
|
||||
},
|
||||
pickerOptions: null,
|
||||
dateRange: undefined,
|
||||
downloadLoading: false,
|
||||
downloadDisabled: false,
|
||||
filename: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getWeatherLog(params, type = 'table') {
|
||||
await fetchWeatherLog(params).then(response => {
|
||||
if (type === 'table') {
|
||||
this.logList = response.data.results
|
||||
}
|
||||
if (type === 'export') {
|
||||
this.logExportList = response.data.results
|
||||
}
|
||||
this.total = response.data.count
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
coordinate(row, column) {
|
||||
return row.longitude + ', ' + row.latitude
|
||||
},
|
||||
handleCurrentChange(page) {
|
||||
// console.log(page)
|
||||
this.listLoading = true
|
||||
this.logsListQuery.page = page
|
||||
this.getWeatherLog(this.logsListQuery)
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.logsListQuery.limit = val
|
||||
this.getWeatherLog(this.logsListQuery)
|
||||
},
|
||||
handleFilter() {
|
||||
this.logsListQuery.page = 1
|
||||
this.getWeatherLog(this.logsListQuery)
|
||||
},
|
||||
handleEsc() {
|
||||
this.logsListQuery.page = 1
|
||||
this.logsListQuery.device = undefined
|
||||
this.getWeatherLog(this.logsListQuery)
|
||||
},
|
||||
handleDateSelect(value) {
|
||||
if (value === null) {
|
||||
this.logsListQuery.start = undefined
|
||||
this.logsListQuery.end = undefined
|
||||
} else {
|
||||
const [start, end] = value
|
||||
this.logsListQuery.start = start
|
||||
this.logsListQuery.end = end
|
||||
}
|
||||
// this.getWeatherLog(this.logsListQuery)
|
||||
},
|
||||
async handleDownload() {
|
||||
const start = this.logsListQuery.start
|
||||
const end = this.logsListQuery.end
|
||||
if (!start || !end) {
|
||||
this.$message({
|
||||
message: 'Please select the start/end date',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.downloadLoading = true
|
||||
const exportQuery = Object.assign({}, this.logsListQuery)
|
||||
exportQuery.limit = 50000
|
||||
await this.getWeatherLog(exportQuery, 'export')
|
||||
this.filename = 'WeatherStationData' + String(start).replace(/-/g, '') + '_' + String(end).replace(/-/g, '') + '.xlsx'
|
||||
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['Data Time', 'Device ID', 'Device Name', 'Env. Temp(℃)', 'Daw Point Temp(℃)', 'Env. Humi(%RH)', 'Air Pressure(hPa)', 'Total Radiation 1 Ins(W/㎡)', 'Wind Directiong(°)', 'Wind Speed Ins(m/s)', 'Wind Speed 2mins(m/s)', 'Wind Speed 10mins(m/s)', 'Rainfall Interval Cum(mm)', 'Total Radiation 1 Interval Cum(MJ/㎡)', 'Rainfall Daily Cum(mm)', 'Total Radiation 1 Daily Cum(MJ/㎡)', 'Power(V)']
|
||||
const filterVal = ['data_time', 'device_id', 'device_name', 'env_temp', 'dew_point_temp', 'env_humi', 'air_pressure', 'total_radiation_1_ins', 'wind_direction', 'wind_speed_ins', 'wind_speed_2mins', 'wind_speed_10mins', 'rainfall_interval_cum', 'total_radiation_1_interval_cum', 'rainfall_daily_cum', 'total_radiation_1_daily_cum', 'power']
|
||||
const list = this.logExportList
|
||||
const data = this.formatJson(filterVal, list)
|
||||
excel.export_json_to_excel({
|
||||
header: tHeader,
|
||||
data,
|
||||
filename: this.filename,
|
||||
autoWidth: this.autoWidth,
|
||||
bookType: this.bookType
|
||||
})
|
||||
this.downloadLoading = false
|
||||
this.logsListQuery.limit = 10
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
if (j === 'timestamp') {
|
||||
return parseTime(v[j])
|
||||
} else {
|
||||
return v[j]
|
||||
}
|
||||
}))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getWeatherLog(this.logsListQuery)
|
||||
},
|
||||
deactivated() {
|
||||
this.$destroy(true)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date-selector {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.date-selector /deep/ .el-date-editor .el-range-separator {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.filter-container {
|
||||
display: block;
|
||||
.filter-item {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 0 15px 10px;
|
||||
}
|
||||
.date-selector {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.time-selector {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@media only screen and (max-width: 500px) {
|
||||
.el-date-range-picker {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-date-range-picker__content {
|
||||
float: none;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue