方案数据导出方案测试项信息&历史趋势

src/views/govern/device/planData/index.vue

@@ -6,6 +6,9 @@
             <el-descriptions value="small" title="方案信息" class="mb10" :column="2" border>
                 <template #extra>
                     <el-button size="small" type="primary" @click="handleOpen(0, '')">新增方案</el-button>
+                    <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
+                        数据导出
+                    </el-button>
                 </template>
                 <el-descriptions-item label="方案名称" width="60">
                     {{ deviceData.itemName }}
@@ -89,7 +92,7 @@
                 <p>历史趋势</p>
             </div>
             <div class="history_header">
-                <el-form :model="searchForm" class="history_select" label-width="auto">
+                <el-form :model="searchForm" class="history_select" id="history_select" label-width="auto">
                     <el-form-item label="统计指标">
                         <el-select
                             multiple
@@ -132,15 +135,6 @@
                 </el-form>
                 <div class="history_searchBtn">
                     <el-button type="primary" size="small" icon="el-icon-Search" @click="init()">查询</el-button>
-                    <el-button
-                        v-if="historyDataList.length != 0"
-                        type="primary"
-                        size="small"
-                        icon="el-icon-Download"
-                        @click="handleExport"
-                    >
-                        导出
-                    </el-button>
                 </div>
             </div>
             <div class="history_chart" v-loading="loading" v-show="echartsData">
@@ -166,6 +160,8 @@ import { queryStatistical } from '@/api/system-boot/csstatisticalset'
 import * as echarts from 'echarts'
 import { isNonNullChain } from 'typescript'
 import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
+
+import { read, writeFile, utils } from 'xlsx'
 const dictData = useDictData()
 defineOptions({
     name: 'govern/device/manage'
@@ -294,7 +290,7 @@ const init = async () => {
         'brown',
         '#70B601',
         '#1DD0CE',
-        'cadetblue',
+        'cadetblue'
     ]
     if (historyDevId.value) {
         //选择的指标使用方法处理
@@ -606,8 +602,47 @@ const init = async () => {
 const historyChart = ref()
 // const chart: any = ref(null)
 // chart.value = echarts.init(historyChart.value)
-const handleExport = () => {
+const handleExport = async () => {
-    setTimeout(() => {
+    const planCsv = ref('')
+    const chartsCsv = ref('')
+
+    if (deviceData.value.records && deviceData.value.records.length != 0) {
+        let csv = '',
+            obj = {}
+        obj = deviceData.value.records.find((item: any) => {
+            return item.id == activeName.value
+        })
+        if (obj) {
+            csv = `方案测试项信息\n,
+            方案名称,${deviceData.value.itemName},
+            方案描述,${deviceData.value.describe},
+            测试项名称,${obj?.itemName},
+            测量间隔,${obj?.statisticalInterval},
+            电压等级,${
+                voltageLevelList.find(vv => {
+                    return vv.id == obj.voltageLevel
+                })?.name
+            },
+            接线方式,${
+                volConTypeList.find(vv => {
+                    return vv.id == obj.volConType
+                })?.name
+            },
+            最小短路容量,${obj.capacitySscmin},
+            用户协议容量,${obj.capacitySi},
+            基准短路容量,${obj.capacitySscb},
+            供电设备容量,${obj.capacitySt},
+            PT变比,${obj.pt && obj.pt1 ? obj.pt / obj.pt1 : obj.pt},
+            CT变比,${obj.ct && obj.ct1 ? obj.ct / obj.ct1 : obj.ct},
+            起始时间,${obj.startTime},
+            结束时间,${obj.endTime},
+            监测位置,${obj.location}\n,
+        `
+            planCsv.value = csv
+        }
+    }
+
+    if (historyDataList.value.length != 0) {
         let xAxis: any = []
         let timeList: any = []
         historyDataList.value.map((item: any) => {
@@ -625,12 +660,13 @@ const handleExport = () => {
         let csv: any = ''
         const list = echartsData.value.options.series
         csv = convertToCSV([], [])
+        chartsCsv.value = csv
         // 如果你想提供下载链接
-        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+        // const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
-        const link = document.createElement('a')
+        // const link = document.createElement('a')
-        link.href = URL.createObjectURL(blob)
+        // link.href = URL.createObjectURL(blob)
-        link.download = '历史趋势.csv'
+        // link.download = '历史趋势.csv'
-        link.click()
+        // link.click()
         function convertToCSV(data: any, key: any) {
             // 添加列头
             let title = '统计时间,'
@@ -658,7 +694,26 @@ const handleExport = () => {
             })
             return csv
         }
-    }, 10)
+    }
+
+    let csvs = ''
+    if (chartsCsv.value) {
+        csvs = planCsv.value + '历史趋势数据,\n\n' + chartsCsv.value
+    } else {
+        csvs = planCsv.value
+    }
+
+    // 如果你想提供下载链接
+    const blob = new Blob([csvs], { type: 'text/csv;charset=utf-8;' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    let obj = deviceData.value.records.find((item: any) => {
+        return item.id == activeName.value
+    })
+    const date=window.XEUtils.toDateString(new Date() , 'yyyyMMdd HHmmss').replace(' ','_')
+    link.download = `${deviceData.value.itemName}_${obj?.itemName}_${date}.csv`
+    link.click()
+    return
 }
 const countData: any = ref([])
 
@@ -699,7 +754,11 @@ watch(
                 countData.value = []
             }
             countData.value.map((item: any, key: any) => {
-                if(val.findIndex((vv:any)=>{return vv==item.index})==-1){
+                if (
+                    val.findIndex((vv: any) => {
+                        return vv == item.index
+                    }) == -1
+                ) {
                     countData.value.splice(key, 1)
                 }
             })
@@ -767,17 +826,27 @@ onMounted(() => {})
 
 .history_header {
     display: flex;
-    flex-wrap: wrap;
+    // flex-wrap: wrap;
-    .history_select {
+    #history_select {
         width: 90%;
         display: flex;
         justify-content: flex-start;
-        flex-wrap: wrap;
+        overflow: auto;
+        // flex-wrap: wrap;
+        .el-form-item {
+            flex: none;
+            width: 380px !important;
+        }
         .el-select {
             margin-right: 10px;
         }
     }
 
+    #history_select::-webkit-scrollbar {
+        width: 0 !important;
+        display: none !important;
+    }
+
     .history_searchBtn {
         flex: 1;
         display: flex;
@@ -792,7 +861,7 @@ onMounted(() => {})
     margin-top: 10px;
 }
 
-// ::v-deep .el-select {
+::v-deep .el-select {
-//     width: 200px !important;
+    width: 200px !important;
-// }
+}
 </style>