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

src/components/content/airInfo/AirInfo.vue

@@ -33,6 +33,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
@@ -64,6 +67,8 @@ import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
 
+import {getNowFormatDate} from "@/utils/date.js";
+import CsvExportor from "csv-exportor";
 let myEcharts = reactive({});
 const props = defineProps({
   list: Array,
@@ -90,6 +95,8 @@ const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
 const showSpeedLoading = ref(false)
+const clickMonth = ref('')
+const clickDay = ref('')
 watch(() => props.list, (now) => {
   airList.value?.forEach(item => {
     now.forEach(newItem => {
@@ -118,7 +125,51 @@ watch(() => props.airData, (now) => {
   //   windSpeed.value = 0
   // }
 }, {deep: true});
+//导出csv
+const handleExport = () => {
+  let clickUnit = ''
+  if(dialogTitle.value==='风速'){
+    clickUnit=windSpeedUnit.value
+  }else  if(dialogTitle.value==='风向'){
+    clickUnit=windDirectionUnit.value
+  }else {
+    airList.value.forEach(item => {
+      if (item.name=== dialogTitle.value) {
+        clickUnit = item.unit
+      }
+    })
+  }
+  const header = ['时间', `${dialogTitle.value}值(${clickUnit})`];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      dates: chartData.dates[index],
+      values: chartData.values[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 = dialogTitle.value + '监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
 const daySelect = (val) => {
+  clickDay.value = val
   if (isFullScreen.value) {
     getChartInfo(openDialogId.value, 'day', val)
   } else {
@@ -126,6 +177,7 @@ const daySelect = (val) => {
   }
 }
 const monthSelect = (val) => {
+  clickMonth.value = val
   if (isFullScreen.value) {
     getChartInfo(openDialogId.value, 'month', val)
   } else {
@@ -204,6 +256,8 @@ const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
 const handleOpenChart = (id, type) => {
   selectTimeButton.value = 2
   isWindSpeedVisited.value = true
+  clickMonth.value=''
+  clickDay.value=''
   nextTick(() => {
     if (chooseMonthRef.value) {
       chooseMonthRef.value.clearData()