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

src/components/content/windPressure/WindPressureList.vue

@@ -23,6 +23,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
@@ -53,6 +56,8 @@ import {getEchartsInfo} from "@/api/largeScreen";
 import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
+import CsvExportor from "csv-exportor";
+import {getNowFormatDate} from "@/utils/date.js";
 
 const props = defineProps({
   list: Array,
@@ -73,6 +78,8 @@ let dataZoomTop = reactive('87%')
 const showLoading = ref(false)
 let myEcharts = reactive({});
 const wpList = ref([]);
+const clickMonth = ref('')
+const clickDay = ref('')
 watch(() => props.list, (now) => {
   wpList.value.forEach(item => {
     now.forEach(newItem => {
@@ -86,6 +93,43 @@ watch(() => props.list, (now) => {
 watch(() => props.winData, (now) => {
   getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
+//导出csv
+const handleExport = () => {
+  let clickUnit = ''
+  wpList.value.forEach(item => {
+    if (item.equipmentName === windSort.value) {
+      clickUnit = item.unit
+    }
+  })
+  const header = ['时间', `风压值(${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 = windSort.value + '监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
 //放大弹窗
 const handleFullScreen = () => {
   const titleName = document.getElementsByClassName('el-dialog__title')[0]
@@ -117,6 +161,7 @@ const shrinkScreen = () => {
   })
 }
 const daySelect = (val) => {
+  clickDay.value = val
   if (isFullScreen.value) {
     getWindInfo(windSortId.value, 'day', val)
   } else {
@@ -124,6 +169,7 @@ const daySelect = (val) => {
   }
 }
 const monthSelect = (val) => {
+  clickMonth.value = val
   if (isFullScreen.value) {
     getWindInfo(windSortId.value, 'month', val)
   } else {
@@ -173,6 +219,8 @@ const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
 
 const handleOpenChart = (item) => {
   selectTimeButton.value = 2
+  clickMonth.value = ''
+  clickDay.value = ''
   nextTick(() => {
     if (chooseMonthRef.value) {
       chooseMonthRef.value.clearData()