From 4a25bd9ba57cf9b9985d93e85fab1e065a0911bc Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 28 Sep 2023 14:22:21 +0800 Subject: [PATCH] fix:立行立改 --- src/views/reportForm/index.vue | 338 ++++--------------------------------------------------- 1 files changed, 28 insertions(+), 310 deletions(-) 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> -- Gitblit v1.8.0