区域报告调整
This commit is contained in:
@@ -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 type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { ElMessage } 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); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = dotList.value.name + '区域稳态报告' + dayjs().format('YYYYMMDD') // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
loading.value = false
|
||||
try {
|
||||
// 选中数据转为id数组，空数组代表导出全部
|
||||
const voltageIds = voltageLevel.value.map((item: any) => item.id)
|
||||
const res: any = await areaHarmonicReport({
|
||||
deptId: dotList.value.id,
|
||||
areaReportFlag: 1,
|
||||
startTime: TableHeaderRef.value.datePickerRef.timeValue[0],
|
||||
endTime: TableHeaderRef.value.datePickerRef.timeValue[1],
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user