首页数据导出Excel

jsowell-ui/package.json

@@ -57,7 +57,8 @@
     "vue-qr": "^4.0.9",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

jsowell-ui/src/views/homeIndex/echarts.js

@@ -1,35 +1,70 @@
+import * as XLSX from 'xlsx';
+import { saveAs } from 'file-saver';
+
 export function barDataView(titleName, fileName) {
   var dataView = {
     show: true,
     readOnly: false,
-    lang: ['数据视图', '关闭', '刷新'],
+    lang: ['数据视图', '关闭', '导出Excel'],
     optionToContent: function (opt) {
-      var axisData = opt.xAxis[0].data // 坐标数据
-      var series = opt.series // 折线图数据
-      var tdHeads = ''
+      var axisData = opt.xAxis[0].data; // 坐标数据
+      var series = opt.series; // 折线图数据
+      var tdHeads = '';
       for (let index = 0; index < titleName.length; index++) {
-        // 样式
-        tdHeads += '<td  style="height:30px;text-align: center;">' + titleName[index] + '</td>'
+        tdHeads += '<td style="height:30px;text-align: center;">' + titleName[index] + '</td>';
       }
-      var tdBodys = '' // 表数据
-      var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:centerborder:1px solid #ccc;border-collapse:collapse;" ><tbody><tr>' + tdHeads + ' </tr>'
-      // 组装表数据
+      var tdBodys = ''; // 表数据
+      var tableId = 'tableExcel_' + new Date().getTime(); // 动态表格ID
+      var table = `<table id="${tableId}" border="1" class="table-bordered table-striped" style="width:100%;text-align:center;border:1px solid #ccc;border-collapse:collapse;"><tbody><tr>${tdHeads}</tr>`;
+
       for (var i = 0, l = axisData.length; i < l; i++) {
+        tdBodys = '<td style="height:30px;text-align: center;">' + axisData[i] + '</td>'; // 添加坐标轴数据
         for (var j = 0; j < series.length; j++) {
-          var temp = series[j].data[i]
+          var temp = series[j].data[i];
           if (temp != null && temp !== undefined) {
-            tdBodys += '<td>' + temp + '</td>'
+            tdBodys += '<td>' + temp + '</td>';
           } else {
-            tdBodys += '<td></td>'
+            tdBodys += '<td></td>';
           }
         }
-        // 样式
-        table += '<tr style="height:30px;text-align: center;"><td >' + axisData[i] + '</td>' + tdBodys + '</tr>'
-        tdBodys = ''
+        table += '<tr>' + tdBodys + '</tr>';
       }
-      table += '</tbody></table>'
-      return table
+      table += '</tbody></table>';
+      return table;
+    },
+    contentToOption: function (html, opt) {
+      console.log('HTMLDomElement:', html); // 调试信息
+      if (!html || !html.tagName) {
+        console.error('Invalid HTML element passed to contentToOption');
+        return opt;
       }
+
+      // 获取表格元素
+      let tableElement = html.querySelector('table');
+
+      if (!tableElement) {
+        console.error('Table element not found within the provided HTML element');
+        return opt;
       }
-  return dataView
+
+      let et = XLSX.utils.table_to_book(tableElement);
+      let etout = XLSX.write(et, {
+        bookType: "xlsx",
+        bookSST: true,
+        type: "array",
+      });
+
+      try {
+        saveAs(
+          new Blob([etout], { type: "application/octet-stream" }),
+          `${fileName}-${new Date().toLocaleString().replace(/[:\/]/g, '-')}.xlsx`
+        );
+      } catch (e) {
+        console.error("Export failed:", e);
+      }
+
+      return opt; // 返回原始选项，因为这里没有修改图表的配置
+    },
+  };
+  return dataView;
 }

jsowell-ui/src/views/homeIndex/homeIndex.vue

@@ -2,30 +2,36 @@
   <div class="app-container">
     <h1>概况 (自2023-01-01起)</h1>
     <hr />
-        <div style="display: flex;justify-content: space-between;margin-top: 10px;flex-wrap: wrap;">
-            <div class="box" style="background-color: #ffba00;">
+    <div
+      style="
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        flex-wrap: wrap;
+      "
+    >
+      <div class="box" style="background-color: #ffba00">
         <el-image class="box-image" :src="require('@/assets/images/lightning.png')" />
         <div class="flex1">
           <div class="box-h1">{{ generalSituation.totalChargingDegree }}</div>
           <div>总充电电量(度)</div>
         </div>
-
       </div>
-            <div class="box" style="background-color: #c74542;">
+      <div class="box" style="background-color: #c74542">
         <el-image class="box-image" :src="require('@/assets/images/zongfeiyong.png')" />
         <div class="flex1">
           <div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
           <div>总充电费用(元)</div>
         </div>
       </div>
-            <div class="box" style="background-color: #12ce65;">
+      <div class="box" style="background-color: #12ce65">
         <el-image class="box-image" :src="require('@/assets/images/dingdan.png')" />
         <div class="flex1">
           <div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
           <div>总充电订单数(笔)</div>
         </div>
       </div>
-            <div class="box" style="background-color: #909399;">
+      <div class="box" style="background-color: #909399">
         <el-image class="box-image" :src="require('@/assets/images/shebei.png')" />
         <div class="flex1">
           <div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
@@ -42,12 +48,10 @@
       <!--                            <div>总客户余额(元)</div>-->
       <!--                        </div>-->
       <!--                    </div>-->
-
     </div>
     <h1>订单</h1>
     <hr />
-        <el-button style="background-color: #1ab394; color: #ffffff">最近30天
-        </el-button>
+    <el-button style="background-color: #1ab394; color: #ffffff">最近30天 </el-button>
     <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
     <hr />
     <!-- <h1>启动充电渠道</h1> -->
@@ -68,18 +72,19 @@ export default {
       chart: null,
       generalSituation: {},
       orderInfo: [],
-            tableData: [{
-                pileSn: '9527',
-                stationName: '万车充充电桩',
-                stationAddress: '昆山市黄埔江南路',
-                type: '直流',
-                power: '2131',
-                degree: '215',
-                electricityPrice: '565',
-                servicePrice: '9274',
-                chargingNumber: '624',
-
-            }]
+      tableData: [
+        {
+          pileSn: "9527",
+          stationName: "万车充充电桩",
+          stationAddress: "昆山市黄埔江南路",
+          type: "直流",
+          power: "2131",
+          degree: "215",
+          electricityPrice: "565",
+          servicePrice: "9274",
+          chargingNumber: "624",
+        },
+      ],
     };
   }, //图表实例
   created() {
@@ -98,7 +103,7 @@ export default {
     async getOrder() {
       const { obj, resCode } = await getOrderInfo({});
       console.log("订单信息", obj, resCode);
-            if (resCode === '00100000') {
+      if (resCode === "00100000") {
         this.orderInfo = obj;
       }
     },
@@ -285,7 +290,18 @@ export default {
             },
           ],
         };
-                option.toolbox.feature.dataView = barDataView(['时间/日期', '总用电量', '总订单金额', '尖时段总用电量', '峰时段总用电量', '平时段总用电量', '谷时段总用电量'], '电量电费')
+        option.toolbox.feature.dataView = barDataView(
+          [
+            "时间/日期",
+            "总用电量",
+            "总订单金额",
+            "尖时段总用电量",
+            "峰时段总用电量",
+            "平时段总用电量",
+            "谷时段总用电量",
+          ],
+          "电量电费"
+        );
         this.chart.setOption(option);
       });
     },