测点数据查询模块完成

package.json

@@ -16,6 +16,7 @@
     "echarts": "^5.1.1",
     "echarts-gl": "^2.0.4",
     "element-plus": "^1.0.2-beta.53",
+    "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "html2canvas": "^1.0.0-rc.7",
     "jspdf": "^2.3.1",
@@ -25,7 +26,8 @@
     "vue": "^3.0.0",
     "vue-axios": "^3.2.4",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "xlsx": "^0.17.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -44,6 +46,7 @@
     "less-loader": "^5.0.0",
     "sass": "^1.27.0",
     "sass-loader": "^10.0.4",
+    "script-loader": "^0.7.2",
     "style-resources-loader": "^1.4.1",
     "svg-sprite-loader": "^6.0.7",
     "svgo-loader": "^3.0.0"

src/tools/excel/Blob.js

@@ -0,0 +1,177 @@
+/* eslint-disable */
+/* Blob.js
+ * A Blob implementation.
+ * 2014-05-27
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+const blob = function (view) {
+  "use strict";
+
+  view.URL = view.URL || view.webkitURL;
+
+  if (view.Blob && view.URL) {
+    try {
+      new Blob;
+      return;
+    } catch (e) {}
+  }
+
+  // Internally we use a BlobBuilder implementation to base Blob off of
+  // in order to support older browsers that only have BlobBuilder
+  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
+    var
+      get_class = function (object) {
+        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+      },
+      FakeBlobBuilder = function BlobBuilder() {
+        this.data = [];
+      },
+      FakeBlob = function Blob(data, type, encoding) {
+        this.data = data;
+        this.size = data.length;
+        this.type = type;
+        this.encoding = encoding;
+      },
+      FBB_proto = FakeBlobBuilder.prototype,
+      FB_proto = FakeBlob.prototype,
+      FileReaderSync = view.FileReaderSync,
+      FileException = function (type) {
+        this.code = this[this.name = type];
+      },
+      file_ex_codes = (
+        "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
+        "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+      ).split(" "),
+      file_ex_code = file_ex_codes.length,
+      real_URL = view.URL || view.webkitURL || view,
+      real_create_object_URL = real_URL.createObjectURL,
+      real_revoke_object_URL = real_URL.revokeObjectURL,
+      URL = real_URL,
+      btoa = view.btoa,
+      atob = view.atob
+
+      ,
+      ArrayBuffer = view.ArrayBuffer,
+      Uint8Array = view.Uint8Array;
+    FakeBlob.fake = FB_proto.fake = true;
+    while (file_ex_code--) {
+      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+    }
+    if (!real_URL.createObjectURL) {
+      URL = view.URL = {};
+    }
+    URL.createObjectURL = function (blob) {
+      var
+        type = blob.type,
+        data_URI_header;
+      if (type === null) {
+        type = "application/octet-stream";
+      }
+      if (blob instanceof FakeBlob) {
+        data_URI_header = "data:" + type;
+        if (blob.encoding === "base64") {
+          return data_URI_header + ";base64," + blob.data;
+        } else if (blob.encoding === "URI") {
+          return data_URI_header + "," + decodeURIComponent(blob.data);
+        }
+        if (btoa) {
+          return data_URI_header + ";base64," + btoa(blob.data);
+        } else {
+          return data_URI_header + "," + encodeURIComponent(blob.data);
+        }
+      } else if (real_create_object_URL) {
+        return real_create_object_URL.call(real_URL, blob);
+      }
+    };
+    URL.revokeObjectURL = function (object_URL) {
+      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+        real_revoke_object_URL.call(real_URL, object_URL);
+      }
+    };
+    FBB_proto.append = function (data /*, endings*/ ) {
+      var bb = this.data;
+      // decode data to a binary string
+      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+        var
+          str = "",
+          buf = new Uint8Array(data),
+          i = 0,
+          buf_len = buf.length;
+        for (; i < buf_len; i++) {
+          str += String.fromCharCode(buf[i]);
+        }
+        bb.push(str);
+      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+        if (FileReaderSync) {
+          var fr = new FileReaderSync;
+          bb.push(fr.readAsBinaryString(data));
+        } else {
+          // async FileReader won't work as BlobBuilder is sync
+          throw new FileException("NOT_READABLE_ERR");
+        }
+      } else if (data instanceof FakeBlob) {
+        if (data.encoding === "base64" && atob) {
+          bb.push(atob(data.data));
+        } else if (data.encoding === "URI") {
+          bb.push(decodeURIComponent(data.data));
+        } else if (data.encoding === "raw") {
+          bb.push(data.data);
+        }
+      } else {
+        if (typeof data !== "string") {
+          data += ""; // convert unsupported types to strings
+        }
+        // decode UTF-16 to binary string
+        bb.push(unescape(encodeURIComponent(data)));
+      }
+    };
+    FBB_proto.getBlob = function (type) {
+      if (!arguments.length) {
+        type = null;
+      }
+      return new FakeBlob(this.data.join(""), type, "raw");
+    };
+    FBB_proto.toString = function () {
+      return "[object BlobBuilder]";
+    };
+    FB_proto.slice = function (start, end, type) {
+      var args = arguments.length;
+      if (args < 3) {
+        type = null;
+      }
+      return new FakeBlob(
+        this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
+      );
+    };
+    FB_proto.toString = function () {
+      return "[object Blob]";
+    };
+    FB_proto.close = function () {
+      this.size = this.data.length = 0;
+    };
+    return FakeBlobBuilder;
+  }(view));
+
+  view.Blob = function Blob(blobParts, options) {
+    var type = options ? (options.type || "") : "";
+    var builder = new BlobBuilder();
+    if (blobParts) {
+      for (var i = 0, len = blobParts.length; i < len; i++) {
+        builder.append(blobParts[i]);
+      }
+    }
+    return builder.getBlob(type);
+  };
+}
+exports.blob = blob;

src/tools/excel/Export2Excel.js

@@ -0,0 +1,179 @@
+//Export2Excel.js
+/* eslint-disable */
+require('script-loader!file-saver');
+require('./Blob.js');//转二进制用  这边要写你的blob的实际地址
+require('script-loader!xlsx/dist/xlsx.core.min');
+
+function generateArray (table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum (v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays (data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook () {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab (s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel (id) {
+  var theTable = document.getElementById(id);
+  console.log('a')
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "导出的Excel";
+  console.log(data);
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+function formatJson (jsonData) {
+  console.log(jsonData)
+}
+export function export_json_to_excel (th, jsonData, defaultTitle) {
+
+  /* original data */
+
+  var data = jsonData;
+  data.unshift(th);
+  var ws_name = "导出的Excel";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+  var title = defaultTitle || '列表'
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), title + ".xlsx")
+};

src/views/realSearch/index.vue

@@ -1,18 +1,87 @@
 <template>
-  <div class="searchPage">
-    <div style="width:200px">
-      <CollapseList :list="menus" />
+  <div>
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">点名：</div>
+          <div class="search-input">
+            <el-input style="width: 250px;" placeholder="请输入点名" size="middle" v-model="form.pointId" clearable></el-input>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">描述：</div>
+          <div class="search-input">
+            <el-input placeholder="请输入描述" size="middle" v-model="form.pointName" clearable></el-input>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">描述：</div>
+          <div class="search-input">
+            <el-checkbox v-model="form.autoReq" label="刷新" border @change="reReqAjax"></el-checkbox>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="getTableData">查询</button>
+        <button class="btn green" @click="exportExcel('tableData')">导出</button>
+      </div>
     </div>
+    <div class="searchPage">
+      <div style="width:200px;height:100vh">
+        <CollapseList :list="menus" @click="clickMenu" />
+      </div>
+      <div class="df-table">
+        <ComTable height="78vh" :data="tableData" :pageSize="20" @onPagging="onChangePage"></ComTable>
+      </div>
+    </div>
+    <el-dialog title="查看详情" v-model="showDialog" width="85%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="(res) => { pointId=''; }">
+      <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">点名：</div>
+          <div class="search-input">
+            <el-input readonly style="width: 300px;" size="middle" v-model="pointId" clearable></el-input>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker size="medium" v-model="form.dateArea" type="datetimerange"
+              :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
+              @change="(res) => { getDatePickerChange(res); }">
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">间隔：</div>
+          <div class="search-input">
+            <el-input placeholder="请输入间隔" clearable v-model="form.interval" type="number"></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="getDetails">查询</button>
+        <button class="btn green" @click="exportExcel('detailsTableData')" v-if="detailsTableData.data.length">导出</button>
+        <button class="btn green" @click="renderCharts" v-if="detailsTableData.data.length">查看折线图</button>
+      </div>
+    </div>
+    <ComTable height="50vh" :data="detailsTableData"></ComTable>
+    </el-dialog>
+    <el-dialog title="查看折线图" v-model="chartDialogShow" width="60%" top="10vh" custom-class="modal" :close-on-click-modal="true">
+      <div id="lineChart" style="width:100%;height:500px;"></div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { Message } from 'element-plus';
 import CollapseList from "@com/coms/collapse/collapse-list.vue";
+import ComTable from "@com/coms/table/table.vue";
 import * as echarts from "echarts";
 
 export default {
   data () {
+    const that=this;
     return {
       menus:[],
       tableid: "",
@@ -29,8 +98,84 @@ export default {
       },
       showDialog: false,
       chartDialogShow: false,
-      tableData: [],
-      detailsTableData: [],
+      tableData: {
+        column: [
+          {
+            name: "序号",
+            field: "index",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "点名",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "描述",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "值",
+            field: "value",
+            is_num: true,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "时间戳",
+            field: "timeDate",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+								return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
+						},
+            click(e, row){
+              that.goDetails(row);
+            }
+          }
+        ],
+        data: [],
+      },
+      detailsTableData: {
+        column: [
+          {
+            name: "序号",
+            field: "index",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "时间戳",
+            field: "timeDate",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "值",
+            field: "value",
+            is_num: true,
+            is_light: false,
+            sortable: true
+          }
+        ],
+        data: [],
+      },
       autoReqTimmer: null,
 
       currentPage: 1,
@@ -71,19 +216,20 @@ export default {
             picker.$emit('pick', [start, end]);
           }
         }]
-      }
+      },
     }
   },
 
   components:{
-    CollapseList
+    CollapseList,
+    ComTable
   },
 
   mounted () {
     let that = this;
     that.$nextTick(() => {
-      that.tableid = that.$route.query.tableid;
-      // that.getTableData();
+      that.tableid = that.$route.query.tableid || "JSFW";
+      that.getTableData();
       that.getMenuList();
     });
   },
@@ -93,12 +239,6 @@ export default {
     this.autoReqTimmer = null;
   },
 
-  created () {
-    let that = this
-    that.tableid = "JSFW";
-    // that.getTableData();
-  },
-
   methods: {
 
     // 获取左侧菜单
@@ -177,6 +317,7 @@ export default {
         }
       });
     },
+
     // 获取表格数据
     getTableData () {
       let that=this;
@@ -187,18 +328,19 @@ export default {
         data:{
           tableid:that.tableid,
           pointId:that.pointId,
-          pointName:that.pointName,
+          pointName:that.form.pointName || "",
           pageNum:that.currentPage,
-          currentPage:that.pagesizereal,
+          pageSize:that.pagesizereal,
         },
         success(res){
-          res.data.forEach(ele => {
+          res.data.forEach((ele,index) => {
+            ele.index = (index+1);
             ele.timeDate = that.fmtDate(new Date(ele.time));
             if (ele.value > 0) {
               ele.value = parseFloat(ele.value).toFixed(4);
             }
           });
-          that.tableData = res.data || [];
+          that.tableData.data = res.data || [];
           that.currentPageTotal = res.count || [];
         }
       });
@@ -212,31 +354,51 @@ export default {
     // 查看详情按钮被点击
     goDetails (row) {
       this.pointId = row.pointId;
-      this.showDialog = true;
+      this.getDetails();
     },
 
     // 获取详情
     getDetails () {
-      if (!this.form.dateArea || !this.form.dateArea.length) {
-        Message.error("请先选择要查询的日期区间后再试");
+      let that=this;
+      if (!that.form.dateArea || !that.form.dateArea.length) {
+        that.BASE.showMsg({
+          msg:"请先选择要查询的日期区间后再试"
+        });
       } else {
-        this.$store.commit("loadingStore", true);
-        let begin = (this.form.dateArea.length ? this.form.dateArea[0] : '');
-        let end = (this.form.dateArea.length ? this.form.dateArea[1] : '');
-
-        this.API.get("datacenter/historyData?pointId=" + this.pointId + "&begin=" + begin + "&end=" + end + (this.form.interval ? ("&interval=" + this.form.interval) : '')).then((res) => {
-          if (res.data.length) {
-            res.data.forEach(ele => {
-              ele.timeDate = this.fmtDate(new Date(ele.time));
-              if (ele.value > 0) {
-                ele.value = parseFloat(ele.value).toFixed(4);
-              }
-            });
-            this.detailsTableData = res.data || [];
-          } else {
-            Message.warning("所选日期区间之内暂无数据，请重试");
+        let begin = (this.form.dateArea.length ? new Date(this.form.dateArea[0]).formatDate("yyyy-MM-dd hh:mm:ss") : '');
+        let end = (this.form.dateArea.length ? new Date(this.form.dateArea[1]).formatDate("yyyy-MM-dd hh:mm:ss") : '');
+
+        let data = {
+          pointId:that.pointId || "",
+          begin,
+          end,
+        };
+
+        if(this.form.interval) data.interval = that.form.interval;
+        
+        that.API.requestData({
+          baseURL:"http://10.155.32.4:8031/",
+          subUrl:"datacenter/historyData",
+          method:"GET",
+          data,
+          success(res){
+            if (res.data.length) {
+              res.data.forEach((ele,index) => {
+                ele.index = (index+1);
+                ele.timeDate = that.fmtDate(new Date(ele.time));
+                if (ele.value > 0) {
+                  ele.value = parseFloat(ele.value).toFixed(4);
+                }
+              });
+              that.detailsTableData.data = res.data || [];
+            } else {
+              that.BASE.showMsg({
+                type:"warning",
+                msg:"所选日期区间之内暂无数据，请重试"
+              });
+            }
+            that.showDialog = true;
           }
-          this.$store.commit("loadingStore", false);
         });
       }
     },
@@ -255,44 +417,62 @@ export default {
     },
 
     // 导出excel
-    // exportExcel (tableDataName) {
-    //   if (tableDataName === 'tableData') {
-    //     let tableid = this.tableid;
-    //     let pointId = this.form.pointId || '';
-    //     let pointName = this.form.pointName || '';
-    //     this.API.get("datacenter/realtimeExport?tableid=" + tableid + "&pointId=" + pointId + "&pointName=" + pointName).then(res => {
-    //       const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
-    //       const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题       
-    //       const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值   
-    //       const list = res.data; //把要导出的数据tableData存到list 
-    //       const data = this.formatJson(filterVal, list);
-    //       export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
-    //     });
-    //   } else {
-    //     const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
-    //     const tHeader = ['点名', '描述', '时间戳', '值']; // 上面设置Excel的表格第一行的标题       
-    //     const filterVal = ['pointId', 'pointName', 'timeDate', 'value']; // 上面的index、nickName、name是tableData里对象的属性key值   
-    //     const list = this[tableDataName]; //把要导出的数据tableData存到list 
-    //     const data = this.formatJson(filterVal, list);
-    //     export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
-    //   }
-    // },
-
-    // formatJson (filterVal, jsonData) {
-    //   return jsonData.map(v => filterVal.map(j => v[j]));
-    // },
+    exportExcel (tableDataName) {
+      let that = this;
+      if (tableDataName === 'tableData') {
+        let tableid = that.tableid;
+        let pointId = that.form.pointId || '';
+        let pointName = that.form.pointName || '';
+
+        that.API.requestData({
+          baseURL:"http://10.155.32.4:8031/",
+          subUrl:"datacenter/realtimeExport",
+          method:"GET",
+          data:{
+            tableid,
+            pointId,
+            pointName
+          },
+          success(res){
+            const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
+            const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题       
+            const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值   
+            const list = res.data; //把要导出的数据tableData存到list 
+            const data = that.formatJson(filterVal, list);
+            export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
+          }
+        });
+      } else {
+        const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
+        const tHeader = ['点名', '描述', '时间戳', '值']; // 上面设置Excel的表格第一行的标题       
+        const filterVal = ['pointId', 'pointName', 'timeDate', 'value']; // 上面的index、nickName、name是tableData里对象的属性key值   
+        const list = that[tableDataName].data; //把要导出的数据tableData存到list 
+        const data = that.formatJson(filterVal, list);
+        export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
+      }
+    },
+
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]));
+    },
 
     // 刷新开关
     reReqAjax () {
       clearInterval(this.autoReqTimmer);
       this.autoReqTimmer = null;
       if (this.form.autoReq) {
-        Message.success("已开启自动刷新数据，每间隔 1 秒自动刷新一次数据");
+        this.BASE.showMsg({
+          type:"success",
+          msg:"已开启自动刷新数据，每间隔 1 秒自动刷新一次数据"
+        });
         this.autoReqTimmer = setInterval(() => {
           this.getTableData(true);
         }, 1000);
       } else {
-        Message.warning("已关闭自动刷新数据");
+        this.BASE.showMsg({
+          type:"warning",
+          msg:"已关闭自动刷新数据"
+        });
       }
     },
 
@@ -308,9 +488,13 @@ export default {
       this.getTableData();
     },
 
+    onChangePage(page) {
+      this.getPaginationCurrent(page.pageIndex);
+    },
+
     // 获取选中的时间
     getDatePickerChange (value) {
-      this.detailsTableData = [];
+      this.detailsTableData.data = [];
     },
 
     // 渲染折线图
@@ -321,7 +505,7 @@ export default {
         let xAxisData = [];
         let seriesData = [];
 
-        this.detailsTableData.forEach(ele => {
+        this.detailsTableData.data.forEach(ele => {
           xAxisData.push(ele.timeDate);
           seriesData.push(ele.value);
         });
@@ -368,22 +552,17 @@ export default {
       let seconds = curDate.getSeconds();
       return year + '-' + (mouth < 10 ? '0' + mouth : mouth) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
     },
-  },
 
-  watch: {
-    $route (value) {
-      this.tableid = value.query.tableid;
-      this.form.pointName = "";
-      this.form.autoReq = false;
-      clearInterval(this.autoReqTimmer);
-      this.autoReqTimmer = null;
+    // 点击左侧菜单
+    clickMenu(item){
+      this.tableid = item.tableid;
       this.getTableData();
     }
   }
 }
 </script>
   
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .searchBox {
   width: 80%;
   display: flex;
@@ -416,14 +595,43 @@ export default {
   justify-content: flex-end;
   align-items: center;
 }
+
+.df-table {
+    border: 0.093vh solid fade(@darkgray, 50%);
+    position: relative;
+    overflow: auto;
+    width:calc(100% - 220px);
+    height: 87vh;
+    margin-left:20px;
+
+    &:before {
+      content: "";
+      width: 0.37vh;
+      height: 0.37vh;
+      background: @write;
+      position: absolute;
+      left: 0.278vh;
+      top: 0.278vh;
+    }
+
+    tbody {
+      height: calc(100vh - 166px);
+    }
+  }
 </style>
-<style lang="scss">
+<style lang="less">
 .tableBox {
   .cell {
     text-align: center;
   }
 }
 .searchPage {
+  margin-top: 1.481vh;
+  display: flex;
+  justify-content: start;
+  align-items: flex-start;
+  width:100%;
+
   .el-dialog__body {
     padding: 10px 20px;
     max-height: 570px;