From 8e51c6b4e295d9ab188fb9346bec0297205ad9d0 Mon Sep 17 00:00:00 2001 From: yichenxi <yichenxi0601@163.com> Date: Thu, 05 Jan 2023 15:19:38 +0800 Subject: [PATCH] 1、设备数据导出页面完成 2、列表数据导出页面完成 --- src/views/Equipment/index.vue | 67 ++++- src/router/dynamicRouter.js | 17 + src/views/Listdata/index.vue | 298 ++++++++++++++++++++++++ src/views/Equidata/index.vue | 287 +++++++++++++++++++++++ 4 files changed, 656 insertions(+), 13 deletions(-) diff --git a/src/router/dynamicRouter.js b/src/router/dynamicRouter.js index 2e751b3..115f04b 100644 --- a/src/router/dynamicRouter.js +++ b/src/router/dynamicRouter.js @@ -107,11 +107,24 @@ component: () => import('@/views/Monitoringstation/index'), meta: { title: '������������������', icon: 'example' } } +const Listdata = { + path: 'report/Listdata', + name: 'Listdata', + component: () => import('@/views/Listdata/index'), + meta: { title: '������������������', icon: 'example' } +} + const Equipment = { path: 'report/Equipment', name: 'Equipment', component: () => import('@/views/Equipment/index'), meta: { title: '������������', icon: 'example' } +} +const Equidata = { + path: 'report/Equidata', + name: 'Equipment', + component: () => import('@/views/Equidata/index'), + meta: { title: '������������������', icon: 'example' } } // ������������ // ������������������������ @@ -204,7 +217,9 @@ Monitoringstation, Equipment, dailyreport, - sectionReport + sectionReport, + Listdata, + Equidata } // ������������������������������������4������������������������������������������������������������������������4������������������������������������ diff --git a/src/views/Equidata/index.vue b/src/views/Equidata/index.vue new file mode 100644 index 0000000..f3be95e --- /dev/null +++ b/src/views/Equidata/index.vue @@ -0,0 +1,287 @@ ++<template> + <div style="width: 100%; height: 100%"> + <div class="topSelect"> + <el-cascader + v-model="newMac" + :options="options" + clearable + placeholder="������������" + style="width: 354px" + /> + <el-cascader + v-model="value" + :options="newSensor" + :props="props" + collapse-tags + clearable + placeholder="������������" + style="margin-left: 20px" + /> + <el-date-picker + v-model="timevalue" + type="datetimerange" + range-separator="���" + value-format="yyyy-MM-dd HH" + start-placeholder="������������" + :picker-options="pickerOptions" + end-placeholder="������������" + style="margin-left: 1rem" + > + </el-date-picker> + + <el-button type="primary" @click="toExcel()" style="margin-left: 20px" + >������</el-button + > + <el-button @click="exportMon">������</el-button> + </div> + <el-table :data="dateList" id="exportTab" style="margin-top: 20px" border max-height="800"> + <el-table-column + v-for="item in columnList" + :prop="item" + :label="item" + width="180px" + :key="item" + > + </el-table-column> + </el-table> + </div> +</template> + +<script> +// ���������������������������������������������������������js������������������js���json������������������������������ +// ���������import������������������from'������������������'; +import FileSaver from 'file-saver' +import XLSX2 from 'xlsx-style' +import XLSX from 'xlsx' + +export default { + // import ���������������������������������������������������props + data() { + // ������������������ + return { + props: { multiple: true }, + options: [], + value: '', + value1: '', + newMac: '', + newMac1: [], + // newMac2:'', + newSensor: [], + timevalue: [], + columnList: [], //��������������� + dateList: [], + pickerOptions: { + disabledDate: (time) => { + return time.getTime() > new Date() + }, + }, + } + }, + // ������������ ���������data������ + computed: {}, + // ������data������������������ + watch: { + newMac(newVal, oldval) { + this.newMac1 = [] + this.newMac1.push(newVal[1][1]) + this.getSensor() + }, + value(n, o) { + this.value1 = [] + for (let i = 0; i < n.length; i++) { + this.value1.push(n[i][0]) + } + }, + }, + // ������������ - ��������������������������������� this ��������� + created() { + this.getData() + }, + // ������������ - ��������������������������� DOM ��������� + mounted() {}, + beforeCreate() {}, // ������������ - ������������ + beforeMount() {}, // ������������ - ������������ + beforeUpdate() {}, // ������������ - ������������ + updated() {}, // ������������ - ������������ + beforeDestroy() {}, // ������������ - ������������ + destroyed() {}, // ������������ - ������������ + activated() {}, + // ������������ + methods: { + // ������������������������ + 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) + }) + }, + // ������mac��������������� + getSensor() { + this.$request({ + url: '/deviceInfo/getMacSensors', + method: 'post', + data: { + macs: this.newMac1, + }, + }) + .then((res) => { + // console.log(res) + this.newSensor = [] + var sensor = res.data + for (var i in sensor) { + this.newSensor.push({ value: i, label: sensor[i] }) + } + }) + .catch((err) => { + console.log(err) + }) + }, + exportMon() { + console.log(this.timevalue) + if (this.newMac == '') { + this.$message.warning('���������������') + return + } + if (this.value == '') { + this.$message.warning('���������������') + return + } + + this.dateList = [] + this.columnList = [] + this.$request({ + url: 'monitorPoint/getHourlyDataExcel', + method: 'post', + data: { + macs: this.newMac1, + sensors: this.value.toString(), + startTime: this.timevalue[0], + endTime: this.timevalue[1], + }, + }).then((res) => { + console.log(res, 11) + this.tableData = res.data + console.log(this.tableData, 'this.tableData') + for (let key in this.tableData[0]) { + this.columnList.push(key) + } + for (let item of this.tableData) { + this.dateList.push(item) + } + }) + }, + toExcel() { + let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), { + sheet: '���������', + }) + this.setExlStyle(wb['Sheets']['���������']) + var ws = XLSX2.write(wb, { + type: 'buffer', + }) + try { + FileSaver.saveAs( + new Blob([ws], { type: 'application/octet-stream' }), + `������������������.xlsx` + ) + } catch (e) { + if (typeof console !== 'undefined') console.log(e, ws) + } + return ws + }, + setExlStyle(data) { + let borderAll = { + //��������������������� + top: { + style: 'thin', + }, + bottom: { + style: 'thin', + }, + left: { + style: 'thin', + }, + right: { + style: 'thin', + }, + } + data['!cols'] = [] + for (let key in data) { + if (data[key] instanceof Object) { + data[key].s = { + border: borderAll, + alignment: { + horizontal: 'center', //������������������ + vertical: 'center', + }, + font: { + sz: 11, + }, + bold: true, + numFmt: 0, + } + data['!cols'].push({ wpx: 200 }) + } + } + return data + }, + }, +} +</script> +<style scoped lang="scss"> +.topSelect { + display: flex; + margin-bottom: 20px; + padding: 20px 15px 0 15px; + 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; +} +.btn1 { + margin-left: 1%; + height: 40px; +} +.select11 { + width: 20% !important; +} +/deep/.el-date-editor .el-range-separator { + width: 11%; +} +</style> diff --git a/src/views/Equipment/index.vue b/src/views/Equipment/index.vue index 913b6ae..38375cb 100644 --- a/src/views/Equipment/index.vue +++ b/src/views/Equipment/index.vue @@ -2,13 +2,13 @@ <div style="padding: 20px"> <el-card> <div style="display: flex"> - <div class="timee"> + <div class="timee" style="margin-top: 0.5rem"> {{ time }} </div> - <div style="margin-left: 1.5rem; margin-top:-1.1rem"> + <div style="margin-left: 1.5rem"> <span>���������������:</span> <el-cascader - v-model="newMac" + v-model="newMac" :options="options" :props="props" collapse-tags @@ -18,9 +18,10 @@ style="width: 25rem" ></el-cascader> </div> - <div style="margin-left: 1.5rem; margin-top: -12px"> + <div style="margin-left: 1.5rem"> <span>������������:</span> <el-cascader + v-model="value" :options="newSensor" :props="props" collapse-tags @@ -28,11 +29,26 @@ @change="res" ></el-cascader> </div> - <div style="margin-left: 1.5rem; margin-top: -12px"> - <el-button type="primary">������</el-button> + <div style="margin-left: 1.5rem"> + <el-button type="primary" @click="Equisel">������</el-button> </div> </div> </el-card> + <el-table + :data="dateList" + style="margin-top: 20px" + border + max-height="800" + > + <el-table-column + v-for="item in columnList" + :prop="item" + :label="item" + width="180px" + :key="item" + > + </el-table-column> + </el-table> </div> </template> @@ -53,7 +69,11 @@ options: [], newSensor:[], newMac:'', - newMac1:[] + newMac1:[], + value:'', + value1:'', + columnList: [], //��������������� + dateList: [], } }, // ������������ ���������data������ @@ -69,6 +89,12 @@ // ������������������������������������������ this.getSensor() console.log(this.newMac1) + }, + value(n, o) { + this.value1 = [] + for (let i = 0; i < n.length; i++) { + this.value1.push(n[i][0]) + } }, }, //������������ @@ -108,7 +134,6 @@ }) }, changeYz(){ - console.log(11111); this.getSensor(); }, getSensor() { @@ -124,18 +149,37 @@ var sensor = result.data for (var i in sensor) { this.newSensor.push({ value: i, label: sensor[i] }) - } }) .catch((err) => { console.log(err) }) }, + Equisel(){ + this.$request({ + url:'', + method:'post', + data:{ + time:this.time, + zhan:this.newMac1, + sensorCode:this.value1 + } + }).then((res)=>{ + console.log(res); + this.tableData = res.data + console.log(this.tableData, 'this.tableData') + for (let key in this.tableData[0]) { + this.columnList.push(key) + } + for (let item of this.tableData) { + this.dateList.push(item) + } + }) + } }, //������������ - ��������������������������������� this ��������� created() { - var timer = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()) - this.time = timer + this.time = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()) this.getData(); }, //������������ - ��������������������������� DOM ��������� @@ -150,5 +194,4 @@ } </script> <style scoped> - </style> \ No newline at end of file diff --git a/src/views/Listdata/index.vue b/src/views/Listdata/index.vue new file mode 100644 index 0000000..ae35e81 --- /dev/null +++ b/src/views/Listdata/index.vue @@ -0,0 +1,298 @@ +<template> + <div style="width: 100%; height: 100%"> + <div class="topSelect"> + <!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="������������" /> --> + <el-cascader + v-model="newMac" + :options="options" + :props="props" + collapse-tags + clearable + placeholder="������������" + style="width: 21rem" + /> + <!-- <div> --> + <el-select + v-model="value" + placeholder="������������" + style="margin-left: 20px" + > + <el-option + v-for="(item, index) in newSensor" + :key="index" + :label="item.label" + :value="item.value" + /> + </el-select> + <el-date-picker + v-model="timevalue" + type="datetimerange" + range-separator="���" + value-format="yyyy-MM-dd HH" + start-placeholder="������������" + :picker-options="pickerOptions" + end-placeholder="������������" + style="margin-left: 1rem" + > + </el-date-picker> + + <el-button type="primary" @click="toExcel()" style="margin-left: 20px" + >������</el-button + > + <el-button @click="exportMon">������</el-button> + </div> + <el-table + :data="dateList" + id="exportTab" + style="margin-top: 20px" + border + max-height="800" + > + <el-table-column + v-for="item in columnList" + :prop="item" + :label="item" + width="180px" + :key="item" + > + </el-table-column> + </el-table> + </div> +</template> + +<script> +// ���������������������������������������������������������js������������������js���json������������������������������ +// ���������import������������������from'������������������'; +import FileSaver from 'file-saver' +import XLSX2 from 'xlsx-style' +import XLSX from 'xlsx' +export default { + data() { + // ������������������ + return { + props: { multiple: true }, + options: [], + value: '', + newMac: '', + newMac1: [], + newSensor: [] /* ������������ */, + columnList: [], //��������������� + dateList: [], + timevalue: [], + pickerOptions: { + disabledDate: (time) => { + return time.getTime() > new Date() + }, + }, + } + }, + // ������������ ���������data������ + computed: {}, + // ������data������������������ + watch: { + // ��������������������������� + 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.getSensor() + }, + // ������dataType��������������� + }, + // ������������ - ��������������������������������� this ��������� + created() { + this.getData() + }, + // ������������ - ��������������������������� DOM ��������� + // mounted() { + // + // }, + beforeCreate() {}, // ������������ - ������������ + beforeMount() {}, // ������������ - ������������ + beforeUpdate() {}, // ������������ - ������������ + updated() {}, // ������������ - ������������ + beforeDestroy() {}, // ������������ - ������������ + destroyed() {}, // ������������ - ������������ + activated() {}, + // ������������ + methods: { + 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) + }) + }, + // ��������������������������������� + getSensor() { + this.$request({ + url: '/deviceInfo/getMacSensors', + method: 'post', + data: { + macs: this.newMac1, + }, + }) + .then((result) => { + // console.log(result) + // this.newSensor = [] + var sensor = result.data + for (var i in sensor) { + this.newSensor.push({ value: i, label: sensor[i] }) + } + }) + .catch((err) => { + console.log(err) + }) + }, + exportMon() { + console.log(this.timevalue) + if (this.newMac1 == '') { + this.$message.warning('���������������') + return + } + if (this.value == '') { + this.$message.warning('���������������') + return + } + + this.dateList = [] + this.columnList = [] + this.$request({ + url: 'monitorPoint/getHourlyDataExcel', + method: 'post', + data: { + macs: this.newMac1, + sensors: this.value.toString(), + startTime: this.timevalue[0], + endTime: this.timevalue[1], + }, + }).then((res) => { + console.log(res, 11) + this.tableData = res.data + console.log(this.tableData, 'this.tableData') + for (let key in this.tableData[0]) { + this.columnList.push(key) + } + for (let item of this.tableData) { + this.dateList.push(item) + } + }) + }, + toExcel() { + let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), { + sheet: '���������', + }) + this.setExlStyle(wb['Sheets']['���������']) + var ws = XLSX2.write(wb, { + type: 'buffer', + }) + try { + FileSaver.saveAs( + new Blob([ws], { type: 'application/octet-stream' }), + `������������������.xlsx` + ) + } catch (e) { + if (typeof console !== 'undefined') console.log(e, ws) + } + return ws + }, + setExlStyle(data) { + let borderAll = { + //��������������������� + top: { + style: 'thin', + }, + bottom: { + style: 'thin', + }, + left: { + style: 'thin', + }, + right: { + style: 'thin', + }, + } + data['!cols'] = [] + for (let key in data) { + if (data[key] instanceof Object) { + data[key].s = { + border: borderAll, + alignment: { + horizontal: 'center', //������������������ + vertical: 'center', + }, + font: { + sz: 11, + }, + bold: true, + numFmt: 0, + } + data['!cols'].push({ wpx: 200 }) + } + } + return data + }, + }, // ���������������keep-alive������������������������������������ +} +</script> +<style scoped lang="scss"> +.topSelect { + display: flex; + margin-bottom: 20px; + padding: 20px 15px 0 15px; + 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; +} +.btn1 { + margin-left: 1%; + height: 40px; +} + +.select11 { + width: 20% !important; +} +/deep/.el-date-editor .el-range-separator { + width: 11%; +} +</style> -- Gitblit v1.8.0