From a337fc824fc85b3771a422b373dfcb9ae1161f8c Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 21 Dec 2023 16:31:08 +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 4a62b65..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