From 63c0ecf98f3705b4c70e4bafee5f325966a5777b Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Thu, 06 Jul 2023 09:13:54 +0800
Subject: [PATCH] 提交
---
src/views/reportForm/index.vue | 481 ++++++++++++++++++++++------------------------------
1 files changed, 204 insertions(+), 277 deletions(-)
diff --git a/src/views/reportForm/index.vue b/src/views/reportForm/index.vue
index 844908d..c4c3266 100644
--- a/src/views/reportForm/index.vue
+++ b/src/views/reportForm/index.vue
@@ -1,105 +1,79 @@
<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>
+ <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="value1"
- style="width:400px"
+ v-model="newData"
+ style="width: 400px; margin-left: 10px"
type="daterange"
range-separator="���"
start-placeholder="������������"
end-placeholder="������������"
- value-format="yyyy-MM-dd"
+ 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>
- <el-button type="primary" @click="exportExcel()">������������</el-button>
</div>
<div class="topTitle">
<el-table
id="exportTab"
- :default-sort="{prop: 'rank', order: 'ascending'}"
+ :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="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="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>
@@ -110,14 +84,39 @@
// ���������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: {},
+ // 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: '',
@@ -126,7 +125,7 @@
tableData: [],
dateDisplay: false,
newKey: 0,
- timearr: null
+ timearr: null,
// pickerOptions1: {
// disabledDate(time) {
// console.log(time)
@@ -142,60 +141,45 @@
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'
- })
+ 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
}
- },
- 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) {
+ if (nv === '���������') {
+ this.newData = []
this.dateDisplay = true
+ this.unit = null
+ this.dataType = ''
} else {
this.dateDisplay = false
}
- // if (!this.newKey === 'custom') {
- this.getReportForm(this.newKey)
- // }
- }
+ },
+ 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.getMonitorPointId()
+ this.getData()
},
// ������������ - ��������������������������� DOM ���������
- mounted() {
-
- },
+ mounted() {},
beforeCreate() {}, // ������������ - ������������
beforeMount() {}, // ������������ - ������������
beforeUpdate() {}, // ������������ - ������������
@@ -205,6 +189,9 @@
activated() {},
// ������������
methods: {
+ showPickerChild(data) {
+ this.newData = data
+ },
// ������������rank������(���������������������������������������������������������������)
changeTableSort() {
var sortTableData = this.$refs.mytable.tableData
@@ -213,111 +200,27 @@
sortTableData[i].rank = i + 1
}
},
- // 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)
+ 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' })
+ var wbout = XLSX.write(wb, {
+ bookType: 'xlsx',
+ bookSST: true,
+ type: 'array',
+ })
try {
- FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '���������������.xlsx')
+ FileSaver.saveAs(
+ new Blob([wbout], { type: 'application/octet-stream' }),
+ '���������������.xlsx'
+ )
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
@@ -326,74 +229,98 @@
return wbout
},
// ������������������
- getMonitorPointId() {
+ getData() {
this.$request({
- url: '/monitorPoint/queryAllMonitorPoints',
+ url: '/monitorPoint/queryMonitorPoints',
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)
+ 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(key) {
+ getReportForm() {
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)
+ 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],
+ },
})
- }
- } // ���������������keep-alive������������������������������������
+ .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;
- // }
+.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;
+.topTitle {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ padding: 0 15px;
+}
+.select11 {
+ width: 20% !important;
}
</style>
--
Gitblit v1.8.0