From f74222e571d9164a59e01194f35ff1e34f10a423 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 15 Dec 2023 17:12:33 +0800
Subject: [PATCH] fix:热力图播放

---
 src/views/reportForm/index.vue |  415 ++++-------------------------------------------------------
 1 files changed, 30 insertions(+), 385 deletions(-)

diff --git a/src/views/reportForm/index.vue b/src/views/reportForm/index.vue
index 844908d..3087730 100644
--- a/src/views/reportForm/index.vue
+++ b/src/views/reportForm/index.vue
@@ -1,399 +1,44 @@
 <template>
-  <div style="width:100%">
-    <div class="topSelect">
-      <div>
-        <el-select v-model="value" placeholder="������������" style="width: 300px;">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-radio-group v-model="radio1" 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>
-        <el-date-picker
-          v-if="dateDisplay"
-          v-model="value1"
-          style="width:400px"
-          type="daterange"
-          range-separator="���"
-          start-placeholder="������������"
-          end-placeholder="������������"
-          value-format="yyyy-MM-dd"
-        />
-      </div>
-      <el-button type="primary" @click="exportExcel()">������������</el-button>
-    </div>
-    <div class="topTitle">
-      <el-table
-        id="exportTab"
-        :default-sort="{prop: 'rank', order: 'ascending'}"
-        :data="tableData"
-        border
-        style="width: 100%"
-        :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>
-    </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 sensor from '@/views/reportForm/sensor'
+import sensorday from '@/views/reportForm/sensorday'
 export default {
-// import ���������������������������������������������������
-  components: {},
-  props: {},
+  components: {
+    sensor,
+    sensorday,
+  },
   data() {
-    // ������������������
     return {
-      options: [],
-      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: {
-    value(n, o) {
-      this.monitorPointId = n
-    },
-    value1(n, o) {
-      var timearr = this.getAll(n[0], n[1])
-      if (timearr.length <= 7) {
-        this.getReportForm(this.newKey)
-      } else {
-        this.$message({
-          message: '������������������������7���',
-          type: 'warning'
-        })
-      }
-    },
-    radio1(n, o) {
-      // var newKey
-      switch (n) {
-        case '������':
-          this.newKey = 0
-          break
-        case '������':
-          this.newKey = 1
-          break
-        case '������':
-          this.newKey = 2
-          break
-        case '������':
-          this.newKey = 3
-          break
-        case '���������':
-          this.newKey = 4
-          break
-        default:
-          this.newKey = 4
-          break
-      }
-      if (this.newKey === 4) {
-        this.dateDisplay = true
-      } else {
-        this.dateDisplay = false
-      }
-      // if (!this.newKey === 'custom') {
-      this.getReportForm(this.newKey)
-      // }
-    }
-  },
-  // ������������ - ��������������������������������� this ���������
-  created() {
-    this.getMonitorPointId()
-  },
-  // ������������ - ��������������������������� DOM ���������
-  mounted() {
-
-  },
-  beforeCreate() {}, // ������������ - ������������
-  beforeMount() {}, // ������������ - ������������
-  beforeUpdate() {}, // ������������ - ������������
-  updated() {}, // ������������ - ������������
-  beforeDestroy() {}, // ������������ - ������������
-  destroyed() {}, // ������������ - ������������
-  activated() {},
-  // ������������
+  created() {},
   methods: {
-    // ������������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
-      }
+    handleClick(tab, event) {
+      // console.log(tab, event)
     },
-    // changeTableSort({ column, prop, order }) {
-    //   var sortTableData = this.$refs.mytable.tableData
-    //   for (let i = 0; i < sortTableData.length; i++) {
-    //     sortTableData[i].rank = i + 1
-    //   }
-    // },
-    // ���������������������
-    // ������������������������������
-    getAll(begin, end) {
-      const arr1 = begin.split('-') // ������������������/  ���2020/01/1 ������
-      const arr2 = end.split('-')
-      const arr1_ = new Date()
-      const arrTime = []
-      // console.log(arr1, arr2, arr1_)
-      arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2])
-      const arr2_ = new Date()
-      arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2])
-      const unixDb = arr1_.getTime()
-      const unixDe = arr2_.getTime()
-      for (let k = unixDb; k <= unixDe;) {
-        arrTime.push(this.datetimeparse(k, 'YY-MM-DD'))
-        k = k + 24 * 60 * 60 * 1000
-      }
-      return arrTime
-    },
-    // ������������������
-    datetimeparse(timestamp, format, prefix) {
-      if (typeof timestamp === 'string') {
-        timestamp = Number(timestamp)
-      }
-      // ������������
-      const currentZoneTime = new Date(timestamp)
-      let currentTimestamp = currentZoneTime.getTime()
-      const offsetZone = currentZoneTime.getTimezoneOffset() / 60 // ������offsetZone>0���������������������
-      let offset = null
-      // ������������������������������������������������������������������������������
-      offset = offsetZone + 8
-      currentTimestamp = currentTimestamp + offset * 3600 * 1000
-
-      let newtimestamp = null
-      if (currentTimestamp) {
-        if (currentTimestamp.toString().length === 13) {
-          newtimestamp = currentTimestamp.toString()
-        } else if (currentTimestamp.toString().length === 10) {
-          newtimestamp = currentTimestamp + '000'
-        } else {
-          newtimestamp = null
-        }
-      } else {
-        newtimestamp = null
-      }
-      const dateobj = newtimestamp ? new Date(parseInt(newtimestamp)) : new Date()
-      const YYYY = dateobj.getFullYear()
-      const MM = dateobj.getMonth() > 8 ? dateobj.getMonth() + 1 : '0' + (dateobj.getMonth() + 1)
-      const DD = dateobj.getDate() > 9 ? dateobj.getDate() : '0' + dateobj.getDate()
-      const HH = dateobj.getHours() > 9 ? dateobj.getHours() : '0' + dateobj.getHours()
-      const mm = dateobj.getMinutes() > 9 ? dateobj.getMinutes() : '0' + dateobj.getMinutes()
-      const ss = dateobj.getSeconds() > 9 ? dateobj.getSeconds() : '0' + dateobj.getSeconds()
-      let output = ''
-      let separator = '/'
-      if (format) {
-        separator = format.match(/-/) ? '-' : '/'
-        output += format.match(/yy/i) ? YYYY : ''
-        output += format.match(/MM/) ? (output.length ? separator : '') + MM : ''
-        output += format.match(/dd/i) ? (output.length ? separator : '') + DD : ''
-        output += format.match(/hh/i) ? (output.length ? ' ' : '') + HH : ''
-        output += format.match(/mm/) ? (output.length ? ':' : '') + mm : ''
-        output += format.match(/ss/i) ? (output.length ? ':' : '') + ss : ''
-      } else {
-        output += YYYY + separator + MM + separator + DD
-      }
-      output = prefix ? (prefix + output) : output
-
-      return newtimestamp ? output : ''
-    },
-    getTime() {
-      if (this.form.beginTime && this.form.endTime) {
-        var beginTime = this.formatTime(this.form.beginTime, 1)
-        var endTime = this.formatTime(this.form.endTime, 1)
-        var dateBegin = new Date(beginTime)
-        var dateEnd = new Date(endTime)
-        if (dateBegin.getTime() > dateEnd.getTime()) {
-          this.form.beginTime = null
-          this.form.endTime = null
-          alert('���������������������������������������')
-          return
-        }
-        this.difference(dateBegin, dateEnd)
-      }
-    },
-    difference(dateBegin, dateEnd) {
-      var dateDiff = dateEnd.getTime() - dateBegin.getTime()// ���������������������
-      var dayDiff = Math.ceil(dateDiff / (24 * 3600 * 1000))// ���������������������
-      this.form.alltime = dayDiff
-    },
-    // ������������
-    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
-    },
-    // ������������������
-    getMonitorPointId() {
-      this.$request({
-        url: '/monitorPoint/queryAllMonitorPoints',
-        method: 'get',
-        params: {
-          organizationId: this.$store.state.orgId
-        }
-      }).then((res) => {
-        // console.log('���������������������')
-        // console.log(res)
-        for (let i = 0; i < res.data.length; i++) {
-          this.options.push({ value: res.data[i].id, label: res.data[i].name })
-        }
-      }).catch((err) => {
-        console.log(err)
-      })
-    },
-    // ������������������
-    getReportForm(key) {
-      this.$request({
-        url: '/dataDisplay/monitorPointDataDisplay',
-        method: 'get',
-        params: {
-          monitorPointId: this.monitorPointId,
-          reportType: key === 4 ? null : key,
-          startTime: key === 4 ? this.value1[0] : null,
-          endTime: key === 4 ? this.value1[1] : null
-        }
-      }).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;
-}
+
+<style scoped>
 </style>

--
Gitblit v1.8.0