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