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

src/components/content/fanInfo/FanInfo.vue

@@ -98,6 +98,9 @@
           <div style="width: 1px;"></div>
         </div>
         <div class="time-select">
+          <div class="export-btn" @click="handleExport">
+            导出
+          </div>
           <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
@@ -134,6 +137,8 @@ import {
 } from "@/api/largeScreen";
 import {ElMessage, ElMessageBox} from "element-plus";
 import elementResizeDetectorMaker from "element-resize-detector";
+import CsvExportor from "csv-exportor";
+import {getNowFormatDate} from "@/utils/date.js";
 
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
@@ -174,6 +179,8 @@ let dataZoomTop = reactive('87%')
 let chartData = reactive([])
 const fanIndex = ref('')
 const openEquipmentId = ref(0)
+const clickMonth = ref('')
+const clickDay = ref('')
 let myEcharts = reactive({});
 watch(() => props.loading, (now) => {
   props.loading = now
@@ -214,7 +221,42 @@ watch(() => props.list, (now) => {
   })
   handleOnMounted()
 }, {deep: true});
+
+//导出csv
+const handleExport = () => {
+  const header = ['时间', 'A相电流(A)', 'B相电流(A)', 'C相电流(A)'];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      dates: chartData.dates[index],
+      currentsA: chartData.currentsA[index],
+      currentsB: chartData.currentsB[index],
+      currentsC: chartData.currentsC[index]
+    }
+    newArray.push(obj)
+  })
+  let time = ''
+  if (selectTimeButton.value === 1) {
+    if (clickMonth.value) {
+      const index = clickMonth.value.lastIndexOf("\-");
+      time = clickMonth.value.substring(0, index)
+    } else {
+      time = getNowFormatDate(false)
+    }
+  } else if (selectTimeButton.value === 2) {
+    if (clickDay.value) {
+      time = clickDay.value
+    } else {
+      time = getNowFormatDate(true)
+    }
+  } else if (selectTimeButton.value === 0) {
+    time = new Date().getFullYear() + '年'
+  }
+  const name = fanIndex.value + '号风机电流监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
 const daySelect = (val) => {
+  clickDay.value = val
   if (isFullScreen.value) {
     getFanInfo(openEquipmentId.value, 'day', val)
   } else {
@@ -222,6 +264,7 @@ const daySelect = (val) => {
   }
 }
 const monthSelect = (val) => {
+  clickMonth.value = val
   if (isFullScreen.value) {
     getFanInfo(openEquipmentId.value, 'month', val)
   } else {
@@ -401,12 +444,14 @@ const handleOpenChart = (item) => {
       chooseDayRef.value.clearData()
     }
   })
+  clickMonth.value=''
+  clickDay.value=''
   isVisited.value = true
   selectTimeButton.value = 2
   openEquipmentId.value = item.equipmentId
   isFullScreen.value = false
   getFanInfo(item.equipmentId, 'day', '', true)
-  if (item.equipmentType ==="frequency1") {
+  if (item.equipmentType === "frequency1") {
     fanIndex.value = '一'
   } else {
     fanIndex.value = '二'
@@ -647,7 +692,6 @@ const initChart = (type, valueA, valueB, valueC, top) => {
       formatter: (params) => {
         let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px;margin-left: 20px">${params[0].name}</div>` + '<br/>'
         for (let i = 0; i < params.length; i++) {
-          // console.log('params[i]', params[i])
           res += `
               <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>
              `;
@@ -655,15 +699,6 @@ const initChart = (type, valueA, valueB, valueC, top) => {
         return res
       },
     },
-    toolbox: {
-      show: false,
-      right: 10,
-      feature: {
-        dataZoom: {
-          yAxisIndex: 'none'
-        }
-      }
-    },
     dataZoom: [{
       type: 'inside',
     },