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

2024-03-13 11:21:18 +08:00
parent 7df3f5251f
commit 499de290ab
9 changed files with 329 additions and 47 deletions
--- a/.drone.yml
+++ b/.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
--- a/package.json
+++ b/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",
--- a/src/assets/styles/index.scss
+++ b/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;
-  right: 126px;
-  top: 50px;
-}
+
+  .export-btn {
+    cursor: pointer;
+    //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;
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/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()
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/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,
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/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',
    },
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/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 class="loading" v-if="loading===0"></div>-->
-<!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
-<!--    </div>-->
-    <div  class="content">
+    <!--    <div v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
+    <!--      <div class="loading" v-if="loading===0"></div>-->
+    <!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
+    <!--    </div>-->
+    <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){
-            initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues,'94%')
+          if (!isFullScreen.value) {
+            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实例方法
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/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()
--- a/src/utils/date.js
+++ b/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
 }