区域报告调整

src/views/pqs/harmonicMonitoring/reportForms/region/index.vue

@@ -11,11 +11,12 @@
             <pane style="background: #fff" :style="height">
                 <TableHeader ref="TableHeaderRef" datePicker :show-search="false">
                     <template #operation>
-                        <el-button icon="el-icon-Download" type="primary" @click="exportEvent" :loading="loading">
+                        <el-button icon="el-icon-Download" type="primary" @click="openDialog" :loading="loading">
                             生成
                         </el-button>
                     </template>
                 </TableHeader>
+
                 <div class="box">
                     <div id="luckysheet">
                         <img
@@ -25,13 +26,46 @@
                         />
                     </div>
                 </div>
+
+                <!-- 电压等级选择弹窗 -->
+                <el-dialog
+                    v-model="dialogVisible"
+                    title="选择电压等级"
+                    width="420px"
+                    :close-on-click-modal="false"
+                >
+                    <el-form label-width="100px" style="padding:10px 0;">
+                        <el-form-item label="电压等级">
+                            <el-select
+                                v-model="voltageLevel"
+                                multiple
+                                collapse-tags
+                                clearable
+                                value-key="id"
+                                placeholder="请选择电压等级"
+                                style="width: 260px;"
+                            >
+                                <el-option
+                                    v-for="item in voltageleveloption"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                    <template #footer>
+                        <el-button @click="dialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="confirmExport" :loading="loading">确定并生成</el-button>
+                    </template>
+                </el-dialog>
             </pane>
         </splitpanes>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, provide } from 'vue'
+import { onMounted, ref, provide, watch } from 'vue'
 import 'splitpanes/dist/splitpanes.css'
 import { Splitpanes, Pane } from 'splitpanes'
 import TableStore from '@/utils/tableStore'
@@ -40,8 +74,7 @@ import TableHeader from '@/components/table/header/index.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import { areaHarmonicReport } from '@/api/process-boot/reportForms'
-import { genFileId, ElMessage, ElNotification } from 'element-plus'
+import { ElMessage } from 'element-plus'
-import type { UploadProps, UploadUserFile } from 'element-plus'
 import dayjs from 'dayjs'
 
 defineOptions({
@@ -53,7 +86,11 @@ const loading = ref(false)
 const dictData = useDictData()
 const TableHeaderRef = ref()
 const dotList: any = ref({})
-const Template: any = ref({})
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand') || []
+const voltageLevel: any = ref([])
+
+// 弹窗状态
+const dialogVisible = ref(false)
 
 const tableStore = new TableStore({
     url: '',
@@ -64,9 +101,15 @@ const tableStore = new TableStore({
 })
 provide('tableStore', tableStore)
 
+// 弹窗打开时默认全选所有电压等级
+watch(dialogVisible, (val) => {
+    if (val && voltageleveloption.length) {
+        voltageLevel.value = [...voltageleveloption]
+    }
+})
+
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
-
     if (dom) {
         size.value = Math.round((180 / dom.offsetHeight) * 120)
     }
@@ -76,45 +119,62 @@ const handleNodeClick = (data: any, node: any) => {
     dotList.value = data
 }
 
-// 生成
+// 打开弹窗
-const exportEvent = () => {
+const openDialog = () => {
+    if (!dotList.value?.id) {
+        ElMessage.warning('请先在左侧选择站点/区域')
+        return
+    }
+    dialogVisible.value = true
+}
+
+// 确认生成
+const confirmExport = async () => {
     loading.value = true
     ElMessage('生成报告中...')
-    areaHarmonicReport({
-        deptId: dotList.value.id,
-        areaReportFlag: 1,
-        startTime: TableHeaderRef.value.datePickerRef.timeValue[0],
-        endTime: TableHeaderRef.value.datePickerRef.timeValue[1]
-    })
-        .then((res: any) => {
-            if (res == undefined) {
-                loading.value = false
-                return
-            }
-            let blob = new Blob([res], {
-                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
-            })
 
-            // createObjectURL(blob); //创建下载的链接
+    try {
-            const url = window.URL.createObjectURL(blob)
+        // 选中数据转为id数组，空数组代表导出全部
-            const link = document.createElement('a') // 创建a标签
+        const voltageIds = voltageLevel.value.map((item: any) => item.id)
-            link.href = url
+        const res: any = await areaHarmonicReport({
-            link.download = dotList.value.name + '区域稳态报告' + dayjs().format('YYYYMMDD') // 设置下载的文件名
+            deptId: dotList.value.id,
-            document.body.appendChild(link)
+            areaReportFlag: 1,
-            link.click() //执行下载
+            startTime: TableHeaderRef.value.datePickerRef.timeValue[0],
-            document.body.removeChild(link)
+            endTime: TableHeaderRef.value.datePickerRef.timeValue[1],
-            loading.value = false
+            voltageIds
         })
-        .catch(() => {
+
+        if (!res) {
             loading.value = false
+            return
+        }
+
+        const blob = new Blob([res], {
+            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
         })
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = dotList.value.name + '区域稳态报告' + dayjs().format('YYYYMMDD')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+
+        ElMessage.success('生成成功')
+        dialogVisible.value = false
+    } catch (e) {
+        ElMessage.error('生成失败，请重试')
+    } finally {
+        loading.value = false
+    }
 }
 </script>
+
 <style lang="scss">
 .splitpanes.default-theme .splitpanes__pane {
     background: #eaeef1;
 }
-
 .box {
     padding: 10px;
 }