Merge pull request 'feat : 新增历史数据导出csv文件' (#317) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/317

.drone.yml

@@ -16,7 +16,7 @@ steps:
       - export NODE_MODULES_PATH=`pwd`/node_modules
       # - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
-#      - npm install
+      - npm install
       - npm run build
       - echo $NODE_MODULES_PATH
       - cp -r dist /app/build/$DRONE_REPO_NAME

package.json

@@ -12,6 +12,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "autofit.js": "^3.0.4",
     "axios": "^1.4.0",
+    "csv-exportor": "^1.0.2",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.5",
     "element-resize-detector": "^1.2.4",

src/assets/styles/index.scss

@@ -322,13 +322,15 @@ body,
   margin: 520px auto 0 auto !important;
   background: rgba(6, 34, 71, 0.8) !important;
 }
-.alarm-tunnel{
+
+.alarm-tunnel {
   .el-tag {
     font-size: 36px;
     height: 60px;
     padding: 0 20px;
     border-radius: 10px;
   }
+
   .detail {
     font-size: 50px;
     color: #FFFFFF;
@@ -338,6 +340,7 @@ body,
       margin-bottom: 10px;
     }
   }
+
   .el-dialog {
     position: relative;
     display: flex;
@@ -452,6 +455,7 @@ body,
   }
 
 }
+
 .shrink-icon {
   margin: -36px -20px 0 30px;
   cursor: pointer;
@@ -459,10 +463,12 @@ body,
   height: 65px;
   background-image: url("@/assets/images/fanInfo/shrink.png");
 }
+
 .full-icon {
   cursor: pointer;
   margin: -36px -20px 0 30px;
 }
+
 //弹窗样式
 .digital-tunnel {
   .chat-dialog {
@@ -574,11 +580,29 @@ body,
     background-image: url(@/assets/images/badGasInfo/sp_jz.png);
     transform: rotate(90deg);
   }
-.change-screen{
+
-  position: absolute;
+  .export-btn {
-  right: 126px;
+    cursor: pointer;
-  top: 50px;
+    //padding-left: 53px;
-}
+    width: 178px;
+    height: 92px;
+    line-height: 92px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    background: #264A78;
+    //border-radius: 11px;
+    color: #FFFFFF;
+    font-size: 48px;
+    text-align: center;
+    margin-right: 30px;
+  }
+
+  .change-screen {
+    position: absolute;
+    right: 126px;
+    top: 50px;
+  }
+
   .time-select {
     position: absolute;
     top: 20px;

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()

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(()=>{
+  clickMonth.value = ''
-    if(chooseMonthRef.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,

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',
     },

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 v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
-<!--      <div class="loading" v-if="loading===0"></div>-->
+    <!--      <div class="loading" v-if="loading===0"></div>-->
-<!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
+    <!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
-<!--    </div>-->
+    <!--    </div>-->
-    <div  class="content">
+    <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){
+          if (!isFullScreen.value) {
-            initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues,'94%')
+            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实例方法

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()

src/utils/date.js

@@ -18,9 +18,22 @@ export const dateFormat = (time = new Date().getTime(),flag) => { //YYYY年MM月
     return `${Y}年${M}月${D}日 星期${week}`;
   }
 }
-
+export const getNowFormatDate = (flag) => {
+  let date = new Date(),
+    year = date.getFullYear(), //获取完整的年份(4位)
+    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+    strDate = date.getDate() // 获取当前日(1-31)
+  if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
+  if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
+  if(flag){
+    return `${year}-${month}-${strDate}`
+  }else {
+    return `${year}-${month}`
+  }
+}
 export default {
-  dateFormat
+  dateFormat,
+  getNowFormatDate
 }