新增气象台数据查询页面

package.json

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

src/api/counter.js

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

src/lang/en.js

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

src/lang/zh.js

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

src/router/index.js

@@ -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 }
+    }]
   }
 ]
 

src/views/weather/index.vue

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