feat : 新增历史数据导出csv文件

src/components/content/usedEle/UsedEle.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
-<!--    <div v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
-<!--      <div class="loading" v-if="loading===0"></div>-->
-<!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
-<!--    </div>-->
-    <div  class="content">
+    <!--    <div v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
+    <!--      <div class="loading" v-if="loading===0"></div>-->
+    <!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
+    <!--    </div>-->
+    <div class="content">
       <div class="item">
         <div class="container" ref="length">
           <div class="value" ref="valueA"></div>
@@ -29,7 +29,7 @@
   </div>
 
   <div class="digital-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false"  id="eleDialog">
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false" id="eleDialog">
       <div class="left-top-icon"></div>
       <div class="right-top-icon"></div>
       <div class="user-select">
@@ -72,6 +72,9 @@
         <div style="width: 1px;"></div>
       </div>
       <div class="time-select">
+        <div class="export-btn" @click="handleExport">
+          导出
+        </div>
         <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
         <time-range-btn
             :buttonList="timeList"
@@ -97,6 +100,8 @@ import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import {getEleEchartsInfo} from "@/api/largeScreen";
 import elementResizeDetectorMaker from "element-resize-detector";
+import CsvExportor from "csv-exportor";
+import {getNowFormatDate} from "@/utils/date.js";
 
 const props = defineProps({
   list: Array,
@@ -147,7 +152,7 @@ watch(() => props.eleData, (now) => {
     })
     getBasicData(now.largeScreenElectricity)
   }
- nextTick(() => {
+  nextTick(() => {
     setValueA()
     setValueB()
   })
@@ -166,6 +171,33 @@ watch(() => props.eleData, (now) => {
 //   setValueA()
 //   setValueB()
 // }, {deep: true});
+const handleExport = () => {
+  const header = ['月总用电量(kwh)', '月总节省电量(kwh)', '时间', '日用电量(kwh)', '日节省量(kwh)'];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      totalElectricityConsumption: chartData.totalElectricityConsumption,
+      saveElectricity: chartData.saveElectricity,
+      dates: chartData.dates[index],
+      consumptionValues: chartData.consumptionValues[index],
+      saveElectricityValues: chartData.saveElectricityValues[index]
+    }
+    newArray.push(obj)
+  })
+  let time = ''
+  if (selectTimeButton.value === 1) {
+    if (monthValue.value) {
+      const index = monthValue.value.lastIndexOf("\-");
+      time = monthValue.value.substring(0, index)
+    } else {
+      time = getNowFormatDate(false)
+    }
+  } else if (selectTimeButton.value === 0) {
+    time = new Date().getFullYear() + '年'
+  }
+  const name = changeNum(chooseChartFan.value) + '用电量监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
 //放大弹窗
 const fullScreen = () => {
   const fan = document.getElementById('eleDialog')
@@ -204,7 +236,7 @@ const setValueA = () => {
   if (electricityConsumptionMonthly.value === 0 || length.value === null) {
     valueA.value.style.height = `0px`;
   }
-  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) /100000;
+  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 100000;
   valueA.value.style.height = `${width}px`;
 }
 const setValueB = () => {
@@ -243,7 +275,7 @@ const timeSelect = (index) => {
   if (isFullScreen.value) {
     getFanInfo(openEquipmentId.value, changeDate(index))
   } else {
-    getFanInfo(openEquipmentId.value, changeDate(index),'',true)
+    getFanInfo(openEquipmentId.value, changeDate(index), '', true)
   }
 };
 const changeFanData = (val) => {
@@ -252,7 +284,7 @@ const changeFanData = (val) => {
   if (isFullScreen.value) {
     getFanInfo(val, changeDate(selectTimeButton.value), monthValue.value)
   } else {
-    getFanInfo(val, changeDate(selectTimeButton.value), monthValue.value,true)
+    getFanInfo(val, changeDate(selectTimeButton.value), monthValue.value, true)
   }
 }
 const getFanInfo = (equipmentId, type = 'month', time = '', flag) => {
@@ -278,13 +310,13 @@ const getFanInfo = (equipmentId, type = 'month', time = '', flag) => {
           const fanChart = document.getElementById('containerEle')
           const erd = elementResizeDetectorMaker();
           erd.listenTo(document.getElementById('eleDialog'), (element) => {
-            fanChart.style.height = element.offsetHeight - 280+ 'px'
+            fanChart.style.height = element.offsetHeight - 280 + 'px'
             myEcharts.resize();
           });
-          if(!isFullScreen.value){
-            initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues,'94%')
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues, '94%')
           }
-        }else {
+        } else {
           shrinkScreen()
         }
       })
@@ -295,6 +327,7 @@ const getFanInfo = (equipmentId, type = 'month', time = '', flag) => {
   })
 }
 const handleOpenChart = () => {
+  monthValue.value=''
   selectTimeButton.value = 1
   isVisited.value = true
   openEquipmentId.value = fanList.value[0].value
@@ -305,7 +338,7 @@ const handleOpenChart = () => {
     }
   })
   isFullScreen.value = false
-  getFanInfo(openEquipmentId.value, 'month','',true)
+  getFanInfo(openEquipmentId.value, 'month', '', true)
 }
 /**
  * 初始化echarts实例方法