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

src/components/content/badGasInfo/BadGasInfo.vue

@@ -7,7 +7,7 @@
       <div class="loading" v-if="loading===0"></div>
       {{ loading === 0 ? '加载中...' : '暂无数据~' }}
     </div>
-    <div v-else class="info-list"  @click="handleOpenChart">
+    <div v-else class="info-list" @click="handleOpenChart">
       <gas-info-item
           v-for="item in badGasList"
           :key="item.equipmentId"
@@ -34,7 +34,10 @@
           <div style="width: 1px"></div>
         </div>
         <div class="time-select">
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef"  @select="daySelect"/>
+          <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
               :buttonList="timeList"
@@ -65,6 +68,9 @@ 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";
+
 const props = defineProps({
   list: Array,
   badGasData: Array,
@@ -82,6 +88,8 @@ let chartData = reactive([])
 let dataZoomTop = reactive('87%')
 const badGasList = ref([]);
 let myEcharts = reactive({});
+const clickMonth = ref('')
+const clickDay = ref('')
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
 watch(
     () => props.list,
@@ -116,6 +124,68 @@ watch(
     },
     {deep: true}
 );
+//导出csv
+const handleExport = () => {
+  console.log(badGasList.value)
+  let dustUnit
+  let carbonUnit
+  let carbonMonoxideUnit
+  let nitrogenUnit
+  let sulfurMonoxideUnit
+  let sulfurDioxideUnit
+  let hydrogenSulfideUnit
+  badGasList.value.forEach((item) => {
+    if(item.name==='粉尘'){
+      dustUnit=item.unit
+    }else if(item.name==='二氧化碳'){
+      carbonUnit=item.unit
+    }else if(item.name==='一氧化碳'){
+      carbonMonoxideUnit=item.unit
+    }else if(item.name==='二氧化氮'){
+      nitrogenUnit=item.unit
+    }else if(item.name==='一氧化氮'){
+      sulfurMonoxideUnit=item.unit
+    }else if(item.name==='二氧化硫'){
+      sulfurDioxideUnit=item.unit
+    }else if(item.name==='硫化氢'){
+      hydrogenSulfideUnit=item.unit
+    }
+  });
+  const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`,`二氧化氮(${nitrogenUnit})`,`一氧化氮(${sulfurMonoxideUnit})`,`二氧化硫(${sulfurDioxideUnit})`,`硫化氢(${hydrogenSulfideUnit})`];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      dates: chartData.dates[index],
+      dustValues: chartData.dustValues[index],
+      carbonDioxideValues: chartData.carbonDioxideValues[index],
+      carbonMonoxideValues: chartData.carbonMonoxideValues[index],
+      nitrogenDioxideValues: chartData.nitrogenDioxideValues[index],
+      sulfurMonoxideValues: chartData.sulfurMonoxideValues[index],
+      sulfurDioxideValues: chartData.sulfurDioxideValues[index],
+      hydrogenSulfideValues: chartData.hydrogenSulfideValues[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 = '有害气体监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
 //放大弹窗
 const handleFullScreen = () => {
   const titleName = document.getElementsByClassName('el-dialog__title')[0]
@@ -147,17 +217,19 @@ const shrinkScreen = () => {
   })
 }
 const daySelect = (val) => {
+  clickDay.value = val
   if (isFullScreen.value) {
     getBadGasChartInfo('day', val)
   } else {
-    getBadGasChartInfo('day', val,true)
+    getBadGasChartInfo('day', val, true)
   }
 }
 const monthSelect = (val) => {
+  clickMonth.value = val
   if (isFullScreen.value) {
     getBadGasChartInfo('month', val)
   } else {
-    getBadGasChartInfo('month', val,true)
+    getBadGasChartInfo('month', val, true)
   }
 }
 const changeDate = (index) => {
@@ -174,7 +246,7 @@ const timeSelect = (index) => {
   if (isFullScreen.value) {
     getBadGasChartInfo(changeDate(index))
   } else {
-    getBadGasChartInfo(changeDate(index),'',true)
+    getBadGasChartInfo(changeDate(index), '', true)
   }
 };
 const getBadGasInfo = (now) => {
@@ -207,7 +279,7 @@ const changeData = (item) => {
     unit: item.unit,
   };
 };
-const getBadGasChartInfo = (type, time = '',flag) => {
+const getBadGasChartInfo = (type, time = '', flag) => {
   showLoading.value = true
   let id = props.tunnelId
   nextTick(() => {
@@ -243,17 +315,19 @@ const getBadGasChartInfo = (type, time = '',flag) => {
   })
 }
 const handleOpenChart = () => {
-  nextTick(()=>{
-    if(chooseMonthRef.value){
+  clickMonth.value = ''
+  clickDay.value = ''
+  nextTick(() => {
+    if (chooseMonthRef.value) {
       chooseMonthRef.value.clearData()
     }
-    if(chooseDayRef.value){
+    if (chooseDayRef.value) {
       chooseDayRef.value.clearData()
     }
   })
   isBadGasVisited.value = true
   isFullScreen.value = false
-  getBadGasChartInfo('day','',true)
+  getBadGasChartInfo('day', '', true)
 };
 const getImageUrl = (name) => {
   return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
@@ -262,7 +336,7 @@ const getImageUrl = (name) => {
 /**
  * 初始化echarts实例方法
  */
-const initChart = (type, values,top) => {
+const initChart = (type, values, top) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById("containerBad"));
   //5.传入数据
@@ -367,7 +441,7 @@ const initChart = (type, values,top) => {
         lineStyle: {
           width: 5,
         },
-      },{
+      }, {
         name: "二氧化碳",
         // data: [
         //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,