From 213cf17a4b48b4cf6333726975eb25ef70568200 Mon Sep 17 00:00:00 2001 From: guoshipeng <3194674006@qq.com> Date: Fri, 18 Aug 2023 15:08:28 +0800 Subject: [PATCH] fix:监测站数据显示修改,无人机基本值修改 --- src/views/reportForm/sensor.vue | 337 +++++++++++++++++ src/views/main/index.vue | 2 src/views/reportForm/index.vue | 338 +---------------- src/views/reportForm/sensorday.vue | 367 +++++++++++++++++++ src/components/Form/HourPicker3.vue | 72 +++ src/views/UVA/index.vue | 3 6 files changed, 806 insertions(+), 313 deletions(-) diff --git a/src/components/Form/HourPicker3.vue b/src/components/Form/HourPicker3.vue new file mode 100644 index 0000000..1064c28 --- /dev/null +++ b/src/components/Form/HourPicker3.vue @@ -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> diff --git a/src/views/UVA/index.vue b/src/views/UVA/index.vue index 3e672d1..382c68c 100644 --- a/src/views/UVA/index.vue +++ b/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; } diff --git a/src/views/main/index.vue b/src/views/main/index.vue index c694ae5..2d54e4c 100644 --- a/src/views/main/index.vue +++ b/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, diff --git a/src/views/reportForm/index.vue b/src/views/reportForm/index.vue index c4c3266..3087730 100644 --- a/src/views/reportForm/index.vue +++ b/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> diff --git a/src/views/reportForm/sensor.vue b/src/views/reportForm/sensor.vue new file mode 100644 index 0000000..92afa2e --- /dev/null +++ b/src/views/reportForm/sensor.vue @@ -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> diff --git a/src/views/reportForm/sensorday.vue b/src/views/reportForm/sensorday.vue new file mode 100644 index 0000000..2d339b4 --- /dev/null +++ b/src/views/reportForm/sensorday.vue @@ -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> -- Gitblit v1.8.0