fix:监测站数据显示修改，无人机基本值修改

guoshipeng

2023-08-18 213cf17a4b48b4cf6333726975eb25ef70568200

fix:监测站数据显示修改，无人机基本值修改

 src/components/Form/HourPicker3.vue

New file
@@ -0,0 +1,72 @@
<template>

  <!-- <el-date-picker

    v-model="value1"

    type="date"

    placeholder="选择日期"

    value-format="yyyy-MM-dd"

  /> -->

  <el-date-picker

    v-model="value1"

    type="daterange"

    range-separator="至"

    start-placeholder="开始日期"

    value-format="yyyy-MM-dd"

    end-placeholder="结束日期"

    :picker-options="pickerOptions"

  >

  </el-date-picker>

</template>



<script>

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

// 例如：import《组件名称》from'《组件路径》';



export default {

  // import 引入的组件需要注入到对象中才能使用

  components: {},

  props: {

    // value1: String

  },

  data() {

    // 这里存放数据

    return {

      // newValue1: ''

      value1: '',

      pickerOptions: {

        disabledDate: (time) => {

          return time.getTime() > new Date()

        },

      },

    }

  },

  // 计算属性 类似于data概念

  computed: {},

  // 监控data中的数据变化

  watch: {

    value1(nv, ov) {

      // this.newValue1 = nv

      this.sendPicker()

    },

  },

  // 生命周期 - 创建完成（可以访问当前 this 实例）

  created() {},

  // 生命周期 - 挂载完成（可以访问 DOM 元素）

  mounted() {},



  beforeCreate() {}, // 生命周期 - 创建之前

  beforeMount() {}, // 生命周期 - 挂载之前

  beforeUpdate() {}, // 生命周期 - 更新之前

  updated() {}, // 生命周期 - 更新之后

  beforeDestroy() {}, // 生命周期 - 销毁之前

  destroyed() {}, // 生命周期 - 销毁完成

  activated() {},

  // 方法集合

  methods: {

    sendPicker() {

      this.$emit('sendPickerChild', this.value1)

    },

  }, // 如果页面有keep-alive缓存功能，这个函数会触发

}

</script>

<style scoped>

</style>


 src/views/UVA/index.vue

@@ -775,7 +775,7 @@
      endTime: '',
      dataDate: '',
      sensorTime: [],
      uvasize: 50,
      uvasize: 20,
      timeValue: [
        new Date(2020, 1, 1, 0, 0, 0),
        new Date(2022, 12, 31, 23, 59, 59),
@@ -2252,7 +2252,6 @@
.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}

 src/views/main/index.vue

@@ -353,7 +353,7 @@
    getData() {
      this.monitorPointIds = []
      this.$request({
        url: '/monitorPoint/queryMonitorPoints',
        url: '/monitorPoint/queryMonitorPointsState',
        method: 'get',
        params: {
          organizationId: this.organizationId,

 src/views/reportForm/index.vue

@@ -1,326 +1,44 @@
<template>
  <div style="width: 100%">
    <div>
      <div class="topSelect">
        <el-cascader
          v-model="newMac"
          :options="options"
          :props="props"
          collapse-tags
          clearable
          placeholder="选择设备"
          style="width: 21rem"
        />
        <div>
          <el-radio-group v-model="select1" style="margin-left: 20px">
            <el-radio-button label="小时报" />
            <el-radio-button label="日报" />
            <el-radio-button label="周报" />
            <el-radio-button label="月报" />
            <el-radio-button label="自定义" />
          </el-radio-group>
        </div>
        <component
          :is="dataType"
          style="padding-left: 0; margin-left: 30px"
          @sendPickerChild="showPickerChild"
          class="select11"
        />
        <el-date-picker
          v-if="dateDisplay"
          v-model="newData"
          style="width: 400px; margin-left: 10px"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH"
        />
        <el-button
          type="primary"
          @click="getReportForm()"
          style="margin-left: 10px"
          >查询</el-button
        >
        <el-button type="primary" @click="exportExcel()">报表导出</el-button>
      </div>
    </div>
    <div class="topTitle">
      <el-table
        id="exportTab"
        :default-sort="{ prop: 'rank', order: 'ascending' }"
        :data="tableData"
        border
        style="width: 100%"
        max-height="800"
        :stripe="true"
        @sort-change="changeTableSort"
      >
        <el-table-column prop="rank" label="排名" />
        <el-table-column prop="deviceName" label="设备" width="180" />
        <el-table-column prop="responsibleUnit" label="责任单位" width="180" />
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="aqi" label="AQI" sortable />
        <el-table-column
          prop="comIndex"
          label="综合指数"
          width="130"
          sortable
        />
        <el-table-column prop="a34004" label="PM2.5" sortable />
        <el-table-column prop="a34002" label="PM10" sortable />
        <el-table-column prop="a21026" label="SO2" sortable />
        <el-table-column prop="a21004" label="NO2" sortable />
        <el-table-column prop="a21005" label="CO" sortable />
        <el-table-column prop="a05024" label="O3_8H" sortable />
        <el-table-column prop="a99054" label="TVOC" sortable />
      </el-table>
    </div>
  </div>
  <el-tabs
    v-model="activeName"
    type="card"
    @tab-click="handleClick"
    style="height: 100%"
  >
    <el-tab-pane name="first" label="基于因子展示">
      <keep-alive>
        <sensor />
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="监测站数据展示" name="second">
      <keep-alive>
        <sensorday />
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import DatePicker from '@/components/Form/DatePicker'
import MouthPicker from '@/components/Form/MouthPicker'
import HourPicker from '@/components/Form/HourPicker'
import HourPicker1 from '@/components/Form/HourPicker1'
import CustomPicker from '@/components/Form/CustomPicker'
import CustomPicker1 from '@/components/Form/CustomPicker1'
import TimePicker1 from '@/components/Form/TimePicker1'
import weekPicker from '@/components/Form/weekPicker'

import sensor from '@/views/reportForm/sensor'
import sensorday from '@/views/reportForm/sensorday'
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {
    DatePicker,
    MouthPicker,
    HourPicker,
    CustomPicker,
    CustomPicker1,
    TimePicker1,
    HourPicker1,
    weekPicker,
    sensor,
    sensorday,
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      newData: [],
      props: { multiple: true },
      newMac: '',
      newMac1: [],
      options: [],
      select1: '小时报',
      dataType: 'HourPicker1',
      unit: '0',
      radio1: '',
      value: '',
      value1: '',
      reportType: 0,
      monitorPointId: 0,
      tableData: [],
      dateDisplay: false,
      newKey: 0,
      timearr: null,
      // pickerOptions1: {
      //   disabledDate(time) {
      //     console.log(time)
      //     const curDate = this.value1[0] ? this.value1[0] : (new Date()).getTime()//  获取当前时间点
      //     const seven = 7 * 24 * 60 * 60 * 1000 // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳
      //     const sevenDays = curDate + seven//  当前时间点后的七天所处的日期
      //     return time.getTime() < Date.now() + 8.64e7 || time.getTime() > sevenDays + 8.64e7// 8.64e7 表示一天，明天之前包括明天不可选，只可选七天
      //   }
      // }
      activeName: 'first',
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    select1(nv, ov) {
      if (nv === '日报') {
        this.dataType = 'HourPicker'
        this.unit = 1
      } else if (nv === '月报') {
        this.dataType = 'DatePicker'
        this.unit = 3
      } else if (nv === '周报') {
        this.dataType = 'weekPicker'
        this.unit = 2
      } else if (nv === '小时报') {
        this.dataType = 'HourPicker1'
        this.unit = 0
      }
      if (nv === '自定义') {
        this.newData = []
        this.dateDisplay = true
        this.unit = null
        this.dataType = ''
      } else {
        this.dateDisplay = false
      }
    },
    newMac(newVal, oldval) {
      this.newMac1 = []
      for (let i = 0; i < newVal.length; i++) {
        // console.log(newVal[i], 111)
        this.newMac1.push(newVal[i][1][1])
      }
      // 设备更新后，重新获取因子数据
    },
  },

  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  created() {},
  methods: {
    showPickerChild(data) {
      this.newData = data
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 重新添加rank排名(当表格的排序条件发生变化的时候会触发该事件)
    changeTableSort() {
      var sortTableData = this.$refs.mytable.tableData
      // console.log(this.$refs.mytable.tableData, 111)
      for (let i = 0; i < sortTableData.length; i++) {
        sortTableData[i].rank = i + 1
      }
    },

    // 导出报表
    exportExcel() {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(
        document.querySelector('#exportTab'),
        xlsxParam
      )

      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          '站点数据表.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
    // 请求站点信息
    getData() {
      this.$request({
        url: '/monitorPoint/queryMonitorPoints',
        method: 'get',
        params: {
          organizationId: this.$store.state.orgId,
        },
      })
        .then((res) => {
          // console.log('这是index页面左侧设备数据')
          // console.log(res)
          this.defaultData = res.data.monitorPoints
          for (let i = 0; i < this.defaultData.length; i++) {
            this.options.push({
              value: this.defaultData[i].name,
              label: this.defaultData[i].name,
            })
            this.options[i].children = []
            for (let j = 0; j < this.defaultData[i].devices.length; j++) {
              this.options[i].children.push({
                value: [
                  this.defaultData[i].devices[j].name,
                  this.defaultData[i].devices[j].mac,
                ],
                label: this.defaultData[i].devices[j].name,
              })
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 请求报表数据
    getReportForm() {
      this.$request({
        url: '/dataDisplay/monitorPointDataDisplay',
        method: 'post',
        data: {
          macs: this.newMac1,
          reportType: this.unit,
          // monitorPointId: this.monitorPointId,
          // reportType: key === 4 ? null : key,
          startTime: this.unit === 2 ? this.newData : this.newData[0],
          endTime: this.unit === 2 ? null : this.newData[1],
          // times: this.newData instanceof Array ? this.newData : [this.newData],
        },
      })
        .then((res) => {
          console.log(res)
          if (res.code !== 0) {
            return
          }
          var tempData = res.data
          for (let i = 0; i < tempData.length; i++) {
            tempData[i].rank = i + 1
          }
          this.tableData = tempData
          // for (let i = 0; i < res.data.data.length; i++) {
          //   this.tableData.push({ ranking: this.defaultData[i].rank, name: this.defaultData[i].name, responsibleUnit: this.defaultData[i].responsibleUnit, time: this.defaultData[i].time, AQI: this.defaultData[i].AQI, compositeIndex: this.defaultData[i].compositeIndex, PM2_5: this.defaultData[i].PM2_5, PM10: this.defaultData[i].PM10, SO2: this.defaultData[i].SO2, NO2: this.defaultData[i].NO2, CO: this.defaultData[i].CO, O3: this.defaultData[i].O3 })
          // }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
  },
}
</script>
<style scoped lang="scss">
.topSelect {
  display: flex;
  margin-bottom: 20px;
  padding: 20px 15px 0 15px;
  // display: flex;
  // justify-content: space-between;
  // span:first-child {
  //   flex: 1;
  // }
  // div:last-child{
  //     width: 300px;
  //     line-height: 40px;
  //     padding-left: 6px;
  // }
}
.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}
.select11 {
  width: 20% !important;
}

<style scoped>
</style>

 src/views/reportForm/sensor.vue

New file
@@ -0,0 +1,337 @@
<template>

  <div style="width: 100%">

    <div>

      <div class="topSelect">

        <el-cascader

          v-model="newMac"

          :options="options"

          :props="props"

          collapse-tags

          clearable

          placeholder="选择设备"

          style="width: 21rem"

        />

        <div>

          <el-radio-group v-model="select1" style="margin-left: 20px">

            <el-radio-button label="小时报" />

            <el-radio-button label="日报" />

            <el-radio-button label="周报" />

            <el-radio-button label="月报" />

            <el-radio-button label="自定义" />

          </el-radio-group>

        </div>

        <component

          :is="dataType"

          style="padding-left: 0; margin-left: 30px"

          @sendPickerChild="showPickerChild"

          class="select11"

        />

        <el-date-picker

          v-if="dateDisplay"

          v-model="newData"

          style="width: 400px; margin-left: 10px"

          type="daterange"

          range-separator="至"

          start-placeholder="开始日期"

          end-placeholder="结束日期"

          value-format="yyyy-MM-dd HH"

        />

        <el-button

          type="primary"

          @click="getReportForm()"

          style="margin-left: 10px"

          >查询</el-button

        >

        <el-button type="primary" @click="exportExcel()">报表导出</el-button>

      </div>

    </div>

    <div class="topTitle">

      <el-table

        id="exportTab"

        :default-sort="{ prop: 'rank', order: 'ascending' }"

        :data="tableData"

        border

        style="width: 100%"

        max-height="800"

        :stripe="true"

        @sort-change="changeTableSort"

      >

        <el-table-column prop="rank" label="排名" align="center" />

        <el-table-column

          prop="deviceName"

          label="设备"

          width="180"

          align="center"

        />

        <el-table-column

          prop="responsibleUnit"

          label="责任单位"

          width="180"

          align="center"

        />

        <el-table-column prop="time" label="时间" width="180" align="center" />

        <el-table-column prop="aqi" label="AQI" sortable align="center" />

        <el-table-column

          prop="comIndex"

          label="综合指数"

          width="130"

          sortable

          align="center"

        />

        <el-table-column prop="a34004" label="PM2.5" sortable align="center" />

        <el-table-column prop="a34002" label="PM10" sortable align="center" />

        <el-table-column prop="a21026" label="SO2" sortable align="center" />

        <el-table-column prop="a21004" label="NO2" sortable align="center" />

        <el-table-column prop="a21005" label="CO" sortable align="center" />

        <el-table-column prop="a05024" label="O3_8H" sortable align="center" />

        <el-table-column prop="a99054" label="TVOC" sortable align="center" />

      </el-table>

    </div>

  </div>

</template>



<script>

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

// 例如：import《组件名称》from'《组件路径》';

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

import DatePicker from '@/components/Form/DatePicker'

import MouthPicker from '@/components/Form/MouthPicker'

import HourPicker from '@/components/Form/HourPicker'

import HourPicker1 from '@/components/Form/HourPicker1'

import CustomPicker from '@/components/Form/CustomPicker'

import CustomPicker1 from '@/components/Form/CustomPicker1'

import TimePicker1 from '@/components/Form/TimePicker1'

import weekPicker from '@/components/Form/weekPicker'



export default {

  // import 引入的组件需要注入到对象中才能使用

  components: {

    DatePicker,

    MouthPicker,

    HourPicker,

    CustomPicker,

    CustomPicker1,

    TimePicker1,

    HourPicker1,

    weekPicker,

  },

  props: {},

  data() {

    // 这里存放数据

    return {

      newData: [],

      props: { multiple: true },

      newMac: '',

      newMac1: [],

      options: [],

      select1: '小时报',

      dataType: 'HourPicker1',

      unit: '0',

      radio1: '',

      value: '',

      value1: '',

      reportType: 0,

      monitorPointId: 0,

      tableData: [],

      dateDisplay: false,

      newKey: 0,

      timearr: null,

      // pickerOptions1: {

      //   disabledDate(time) {

      //     console.log(time)

      //     const curDate = this.value1[0] ? this.value1[0] : (new Date()).getTime()//  获取当前时间点

      //     const seven = 7 * 24 * 60 * 60 * 1000 // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳

      //     const sevenDays = curDate + seven//  当前时间点后的七天所处的日期

      //     return time.getTime() < Date.now() + 8.64e7 || time.getTime() > sevenDays + 8.64e7// 8.64e7 表示一天，明天之前包括明天不可选，只可选七天

      //   }

      // }

    }

  },

  // 计算属性 类似于data概念

  computed: {},

  // 监控data中的数据变化

  watch: {

    select1(nv, ov) {

      if (nv === '日报') {

        this.dataType = 'HourPicker'

        this.unit = 1

      } else if (nv === '月报') {

        this.dataType = 'DatePicker'

        this.unit = 3

      } else if (nv === '周报') {

        this.dataType = 'weekPicker'

        this.unit = 2

      } else if (nv === '小时报') {

        this.dataType = 'HourPicker1'

        this.unit = 0

      }

      if (nv === '自定义') {

        this.newData = []

        this.dateDisplay = true

        this.unit = null

        this.dataType = ''

      } else {

        this.dateDisplay = false

      }

    },

    newMac(newVal, oldval) {

      this.newMac1 = []

      for (let i = 0; i < newVal.length; i++) {

        // console.log(newVal[i], 111)

        this.newMac1.push(newVal[i][1][1])

      }

      // 设备更新后，重新获取因子数据

    },

  },



  // 生命周期 - 创建完成（可以访问当前 this 实例）

  created() {

    this.getData()

  },

  // 生命周期 - 挂载完成（可以访问 DOM 元素）

  mounted() {},

  beforeCreate() {}, // 生命周期 - 创建之前

  beforeMount() {}, // 生命周期 - 挂载之前

  beforeUpdate() {}, // 生命周期 - 更新之前

  updated() {}, // 生命周期 - 更新之后

  beforeDestroy() {}, // 生命周期 - 销毁之前

  destroyed() {}, // 生命周期 - 销毁完成

  activated() {},

  // 方法集合

  methods: {

    showPickerChild(data) {

      this.newData = data

    },

    // 重新添加rank排名(当表格的排序条件发生变化的时候会触发该事件)

    changeTableSort() {

      var sortTableData = this.$refs.mytable.tableData

      // console.log(this.$refs.mytable.tableData, 111)

      for (let i = 0; i < sortTableData.length; i++) {

        sortTableData[i].rank = i + 1

      }

    },



    // 导出报表

    exportExcel() {

      /* generate workbook object from table */

      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换

      var wb = XLSX.utils.table_to_book(

        document.querySelector('#exportTab'),

        xlsxParam

      )



      /* get binary string as output */

      var wbout = XLSX.write(wb, {

        bookType: 'xlsx',

        bookSST: true,

        type: 'array',

      })

      try {

        FileSaver.saveAs(

          new Blob([wbout], { type: 'application/octet-stream' }),

          '站点数据表.xlsx'

        )

      } catch (e) {

        if (typeof console !== 'undefined') {

          console.log(e, wbout)

        }

      }

      return wbout

    },

    // 请求站点信息

    getData() {

      this.$request({

        url: '/monitorPoint/queryMonitorPoints',

        method: 'get',

        params: {

          organizationId: this.$store.state.orgId,

        },

      })

        .then((res) => {

          // console.log('这是index页面左侧设备数据')

          // console.log(res)

          this.defaultData = res.data.monitorPoints

          for (let i = 0; i < this.defaultData.length; i++) {

            this.options.push({

              value: this.defaultData[i].name,

              label: this.defaultData[i].name,

            })

            this.options[i].children = []

            for (let j = 0; j < this.defaultData[i].devices.length; j++) {

              this.options[i].children.push({

                value: [

                  this.defaultData[i].devices[j].name,

                  this.defaultData[i].devices[j].mac,

                ],

                label: this.defaultData[i].devices[j].name,

              })

            }

          }

        })

        .catch((error) => {

          console.log(error)

        })

    },

    // 请求报表数据

    getReportForm() {

      this.$request({

        url: '/dataDisplay/monitorPointDataDisplay',

        method: 'post',

        data: {

          macs: this.newMac1,

          reportType: this.unit,

          // monitorPointId: this.monitorPointId,

          // reportType: key === 4 ? null : key,

          startTime: this.unit === 2 ? this.newData : this.newData[0],

          endTime: this.unit === 2 ? null : this.newData[1],

          // times: this.newData instanceof Array ? this.newData : [this.newData],

        },

      })

        .then((res) => {

          console.log(res)

          if (res.code !== 0) {

            return

          }

          var tempData = res.data

          for (let i = 0; i < tempData.length; i++) {

            tempData[i].rank = i + 1

          }

          this.tableData = tempData

          // for (let i = 0; i < res.data.data.length; i++) {

          //   this.tableData.push({ ranking: this.defaultData[i].rank, name: this.defaultData[i].name, responsibleUnit: this.defaultData[i].responsibleUnit, time: this.defaultData[i].time, AQI: this.defaultData[i].AQI, compositeIndex: this.defaultData[i].compositeIndex, PM2_5: this.defaultData[i].PM2_5, PM10: this.defaultData[i].PM10, SO2: this.defaultData[i].SO2, NO2: this.defaultData[i].NO2, CO: this.defaultData[i].CO, O3: this.defaultData[i].O3 })

          // }

        })

        .catch((err) => {

          console.log(err)

        })

    },

  }, // 如果页面有keep-alive缓存功能，这个函数会触发

}

</script>

<style scoped lang="scss">

.topSelect {

  display: flex;

  margin-bottom: 20px;

  padding: 20px 15px 0 15px;

  // display: flex;

  // justify-content: space-between;

  // span:first-child {

  //   flex: 1;

  // }

  // div:last-child{

  //     width: 300px;

  //     line-height: 40px;

  //     padding-left: 6px;

  // }

}

.topTitle {

  display: flex;

  justify-content: space-between;

  margin-bottom: 20px;

  padding: 0 15px;

}

.select11 {

  width: 20% !important;

}

</style>


 src/views/reportForm/sensorday.vue

New file
@@ -0,0 +1,367 @@
<template>

  <div style="width: 100%">

    <div>

      <div class="topSelect">

        <el-cascader

          v-model="newMac"

          :options="options"

          :props="props"

          collapse-tags

          clearable

          placeholder="选择设备"

          style="width: 21rem"

        />

        <div>

          <el-radio-group v-model="select1" style="margin-left: 20px">

            <el-radio-button label="日报" />

            <el-radio-button label="周报" />

            <el-radio-button label="月报" />

            <el-radio-button label="自定义" />

          </el-radio-group>

        </div>

        <component

          :is="dataType"

          style="padding-left: 0; margin-left: 30px"

          @sendPickerChild="showPickerChild"

          class="select11"

        />

        <el-date-picker

          v-if="dateDisplay"

          v-model="newData"

          style="width: 400px; margin-left: 10px"

          type="daterange"

          range-separator="至"

          start-placeholder="开始日期"

          end-placeholder="结束日期"

          value-format="yyyy-MM-dd HH"

        />

        <el-button

          type="primary"

          @click="getReportForm()"

          style="margin-left: 10px"

          >查询</el-button

        >

        <el-button type="primary" @click="exportExcel()">报表导出</el-button>

      </div>

    </div>

    <div class="topTitle">

      <el-table

        :data="tableData"

        id="exportTabs"

        max-height="730"

        @sort-change="changeTableSort"

        style="width: 100%"

      >

        <el-table-column

          prop="name"

          label="站点名称"

          width="240"

          align="center"

        >

        </el-table-column>

        <el-table-column label="综合指数" align="center">

          <el-table-column

            prop="composite"

            label="指数"

            width="180"

            align="center"

          >

          </el-table-column>

          <el-table-column

            label="排名"

            width="180"

            align="center"

            prop="compositeNum"

            sortable

          >

          </el-table-column>

        </el-table-column>

        <el-table-column label="PM2.5" align="center">

          <el-table-column prop="pm25" label="浓度" width="180" align="center">

          </el-table-column>

          <el-table-column

            label="排名"

            width="180"

            align="center"

            prop="pm25Num"

            sortable

          >

          </el-table-column>

        </el-table-column>

        <el-table-column label="臭氧" align="center">

          <el-table-column prop="o3" label="浓度" width="180" align="center">

          </el-table-column>

          <el-table-column

            label="排名"

            width="180"

            align="center"

            prop="o3Num"

            sortable

          >

          </el-table-column>

        </el-table-column>

        <el-table-column label="TVOC" align="center">

          <el-table-column prop="tovc" label="浓度" width="180" align="center">

          </el-table-column>

          <el-table-column

            label="排名"

           width="180"

            align="center"

            prop="tovcnum"

            sortable

          >

          </el-table-column>

        </el-table-column>

      </el-table>

    </div>

  </div>

</template>



<script>

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

// 例如：import《组件名称》from'《组件路径》';

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

import DatePicker from '@/components/Form/DatePicker'

import MouthPicker from '@/components/Form/MouthPicker'

import HourPicker from '@/components/Form/HourPicker3'

import HourPicker1 from '@/components/Form/HourPicker1'

import CustomPicker from '@/components/Form/CustomPicker'

import CustomPicker1 from '@/components/Form/CustomPicker1'

import TimePicker1 from '@/components/Form/TimePicker1'

import weekPicker from '@/components/Form/weekPicker'



export default {

  // import 引入的组件需要注入到对象中才能使用

  components: {

    DatePicker,

    MouthPicker,

    HourPicker,

    CustomPicker,

    CustomPicker1,

    TimePicker1,

    HourPicker1,

    weekPicker,

  },

  props: {},

  data() {

    // 这里存放数据

    return {

      newData: [],

      props: { multiple: true },

      newMac: '',

      newMac1: [],

      options: [],

      select1: '日报',

      dataType: 'HourPicker',

      unit: '1',

      radio1: '',

      value: '',

      value1: '',

      reportType: 0,

      monitorPointId: 0,

      tableData: [],

      dateDisplay: false,

      newKey: 0,

      timearr: null,

      // pickerOptions1: {

      //   disabledDate(time) {

      //     console.log(time)

      //     const curDate = this.value1[0] ? this.value1[0] : (new Date()).getTime()//  获取当前时间点

      //     const seven = 7 * 24 * 60 * 60 * 1000 // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳

      //     const sevenDays = curDate + seven//  当前时间点后的七天所处的日期

      //     return time.getTime() < Date.now() + 8.64e7 || time.getTime() > sevenDays + 8.64e7// 8.64e7 表示一天，明天之前包括明天不可选，只可选七天

      //   }

      // }

    }

  },

  // 计算属性 类似于data概念

  computed: {},

  // 监控data中的数据变化

  watch: {

    select1(nv, ov) {

      if (nv === '日报') {

        this.dataType = 'HourPicker'

        this.unit = 1

      } else if (nv === '月报') {

        this.dataType = 'DatePicker'

        this.unit = 3

      } else if (nv === '周报') {

        this.dataType = 'weekPicker'

        this.unit = 2

      }

      if (nv === '自定义') {

        this.newData = []

        this.dateDisplay = true

        this.unit = 4

        this.dataType = ''

      } else {

        this.dateDisplay = false

      }

    },

    newMac(newVal, oldval) {

      this.newMac1 = []

      for (let i = 0; i < newVal.length; i++) {

        // console.log(newVal[i], 111)

        this.newMac1.push(newVal[i][1][1])

      }

      // 设备更新后，重新获取因子数据

    },

  },



  // 生命周期 - 创建完成（可以访问当前 this 实例）

  created() {

    this.getData()

  },

  // 生命周期 - 挂载完成（可以访问 DOM 元素）

  mounted() {},

  beforeCreate() {}, // 生命周期 - 创建之前

  beforeMount() {}, // 生命周期 - 挂载之前

  beforeUpdate() {}, // 生命周期 - 更新之前

  updated() {}, // 生命周期 - 更新之后

  beforeDestroy() {}, // 生命周期 - 销毁之前

  destroyed() {}, // 生命周期 - 销毁完成

  activated() {},

  // 方法集合

  methods: {

    showPickerChild(data) {

      this.newData = data

    },

    // 重新添加rank排名(当表格的排序条件发生变化的时候会触发该事件)

    changeTableSort() {

      var sortTableData = this.$refs.mytable.tableData

      // console.log(this.$refs.mytable.tableData, 111)

      for (let i = 0; i < sortTableData.length; i++) {

        sortTableData[i].rank = i + 1

      }

    },



    // 导出报表

    exportExcel() {

      /* generate workbook object from table */

      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换

      var wb = XLSX.utils.table_to_book(

        document.querySelector('#exportTabs'),

        xlsxParam

      )



      /* get binary string as output */

      var wbout = XLSX.write(wb, {

        bookType: 'xlsx',

        bookSST: true,

        type: 'array',

      })

      try {

        FileSaver.saveAs(

          new Blob([wbout], { type: 'application/octet-stream' }),

          '监测站数据报表.xlsx'

        )

      } catch (e) {

        if (typeof console !== 'undefined') {

          console.log(e, wbout)

        }

      }

      return wbout

    },

    // 请求站点信息

    getData() {

      this.$request({

        url: '/monitorPoint/queryMonitorPoints',

        method: 'get',

        params: {

          organizationId: this.$store.state.orgId,

        },

      })

        .then((res) => {

          // console.log('这是index页面左侧设备数据')

          // console.log(res)

          this.defaultData = res.data.monitorPoints

          for (let i = 0; i < this.defaultData.length; i++) {

            this.options.push({

              value: this.defaultData[i].name,

              label: this.defaultData[i].name,

            })

            this.options[i].children = []

            for (let j = 0; j < this.defaultData[i].devices.length; j++) {

              this.options[i].children.push({

                value: [

                  this.defaultData[i].devices[j].name,

                  this.defaultData[i].devices[j].mac,

                ],

                label: this.defaultData[i].devices[j].name,

              })

            }

          }

        })

        .catch((error) => {

          console.log(error)

        })

    },

    // 请求报表数据

    getReportForm() {

      console.log(this.newData)

      this.$request({

        // url: '/monitorPoint/listMonitoring',

        url: '/monitorPoint/listMonitoring',

        method: 'post',

        data: {

          mac: this.newMac1,

          reportType: this.unit,

          // monitorPointId: this.monitorPointId,

          // reportType: key === 4 ? null : key,

          startTime: this.unit === 2 ? this.newData : this.newData[0],

          endTime: this.unit === 2 ? this.newData : this.newData[1],

          // times: this.newData instanceof Array ? this.newData : [this.newData],

        },

      })

        .then((res) => {

          console.log(res)

          this.tableData = res.data

          //   if (res.code !== 0) {

          //     return

          //   }

          //   var tempData = res.data

          //   for (let i = 0; i < tempData.length; i++) {

          //     tempData[i].rank = i + 1

          //   }

          //   this.tableData = tempData

          // for (let i = 0; i < res.data.data.length; i++) {

          //   this.tableData.push({ ranking: this.defaultData[i].rank, name: this.defaultData[i].name, responsibleUnit: this.defaultData[i].responsibleUnit, time: this.defaultData[i].time, AQI: this.defaultData[i].AQI, compositeIndex: this.defaultData[i].compositeIndex, PM2_5: this.defaultData[i].PM2_5, PM10: this.defaultData[i].PM10, SO2: this.defaultData[i].SO2, NO2: this.defaultData[i].NO2, CO: this.defaultData[i].CO, O3: this.defaultData[i].O3 })

          // }

        })

        .catch((err) => {

          console.log(err)

        })

    },

  }, // 如果页面有keep-alive缓存功能，这个函数会触发

}

</script>

<style scoped lang="scss">

.topSelect {

  display: flex;

  margin-bottom: 20px;

  padding: 20px 15px 0 15px;

  // display: flex;

  // justify-content: space-between;

  // span:first-child {

  //   flex: 1;

  // }

  // div:last-child{

  //     width: 300px;

  //     line-height: 40px;

  //     padding-left: 6px;

  // }

}

.topTitle {

  display: flex;

  justify-content: space-between;

  margin-bottom: 20px;

  padding: 0 15px;

}

.select11 {

  width: 20% !important;

}

/deep/.el-table thead.is-group th {

  background-color: white;

}

</style>