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,6 +322,7 @@ body,
   margin: 520px auto 0 auto !important;
   background: rgba(6, 34, 71, 0.8) !important;
 }
+
 .alarm-tunnel {
   .el-tag {
     font-size: 36px;
@@ -329,6 +330,7 @@ body,
     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);
   }
+
+  .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;

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

@@ -34,6 +34,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
@@ -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,6 +217,7 @@ const shrinkScreen = () => {
   })
 }
 const daySelect = (val) => {
+  clickDay.value = val
   if (isFullScreen.value) {
     getBadGasChartInfo('day', val)
   } else {
@@ -154,6 +225,7 @@ const daySelect = (val) => {
   }
 }
 const monthSelect = (val) => {
+  clickMonth.value = val
   if (isFullScreen.value) {
     getBadGasChartInfo('month', val)
   } else {
@@ -243,6 +315,8 @@ const getBadGasChartInfo = (type, time = '',flag) => {
   })
 }
 const handleOpenChart = () => {
+  clickMonth.value = ''
+  clickDay.value = ''
   nextTick(() => {
     if (chooseMonthRef.value) {
       chooseMonthRef.value.clearData()

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,6 +444,8 @@ const handleOpenChart = (item) => {
       chooseDayRef.value.clearData()
     }
   })
+  clickMonth.value=''
+  clickDay.value=''
   isVisited.value = true
   selectTimeButton.value = 2
   openEquipmentId.value = item.equipmentId
@@ -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

@@ -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,
@@ -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')
@@ -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

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
 }