修改下载报告
Showing
5 changed files
with
110 additions
and
17 deletions
| ... | @@ -149,6 +149,9 @@ export const dataSourceTypeList = [{ | ... | @@ -149,6 +149,9 @@ export const dataSourceTypeList = [{ |
| 149 | }, { | 149 | }, { |
| 150 | value: 2, | 150 | value: 2, |
| 151 | label: '文件导入' | 151 | label: '文件导入' |
| 152 | }, { | ||
| 153 | value: 3, | ||
| 154 | label: '文件夹' | ||
| 152 | }]; | 155 | }]; |
| 153 | 156 | ||
| 154 | /** 获取数据库选择列表 */ | 157 | /** 获取数据库选择列表 */ |
| ... | @@ -341,3 +344,10 @@ export const exportAnonReport = (params) => request({ | ... | @@ -341,3 +344,10 @@ export const exportAnonReport = (params) => request({ |
| 341 | method: 'post', | 344 | method: 'post', |
| 342 | responseType: 'blob' | 345 | responseType: 'blob' |
| 343 | }) | 346 | }) |
| 347 | |||
| 348 | export const htmlToWord = (params) => request({ | ||
| 349 | url: `${import.meta.env.VITE_APP_ANONYMIZATION_BASEURL}/anon-task/download/html-to-word`, | ||
| 350 | method: 'postJsonD', | ||
| 351 | data: params, | ||
| 352 | responseType: 'blob' | ||
| 353 | }) | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -8,12 +8,14 @@ import { | ... | @@ -8,12 +8,14 @@ import { |
| 8 | getAnonAnalyzePageData, | 8 | getAnonAnalyzePageData, |
| 9 | getAnonAnalyzeResult, | 9 | getAnonAnalyzeResult, |
| 10 | getAnonTaskDetail, | 10 | getAnonTaskDetail, |
| 11 | htmlToWord, | ||
| 11 | } from '@/api/modules/dataAnonymization'; | 12 | } from '@/api/modules/dataAnonymization'; |
| 12 | import { changeNum, download } from '@/utils/common'; | 13 | import { changeNum, download } from '@/utils/common'; |
| 13 | import { ElMessage } from 'element-plus'; | 14 | import { ElMessage } from 'element-plus'; |
| 14 | import anonResultAnalysis from './components/anonResultAnalysis.vue'; | 15 | import anonResultAnalysis from './components/anonResultAnalysis.vue'; |
| 15 | import { commonPageConfig } from '@/utils/enum'; | 16 | import { commonPageConfig } from '@/utils/enum'; |
| 16 | import { calcColumnWidth } from '@/utils'; | 17 | import { calcColumnWidth } from '@/utils'; |
| 18 | import html2canvas from 'html2canvas'; | ||
| 17 | 19 | ||
| 18 | const route = useRoute(); | 20 | const route = useRoute(); |
| 19 | const router = useRouter(); | 21 | const router = useRouter(); |
| ... | @@ -52,6 +54,8 @@ const originResultTableFieldColumn = ref({}); | ... | @@ -52,6 +54,8 @@ const originResultTableFieldColumn = ref({}); |
| 52 | 54 | ||
| 53 | /** 结果分析中的字段表格数据 */ | 55 | /** 结果分析中的字段表格数据 */ |
| 54 | const resultData: any = ref([]); | 56 | const resultData: any = ref([]); |
| 57 | /** 全部未分页的数据,下载word时使用。 */ | ||
| 58 | const fullResultData: any = ref([]); | ||
| 55 | 59 | ||
| 56 | /** 结果分析中的字段信息 */ | 60 | /** 结果分析中的字段信息 */ |
| 57 | const analysisResultTableFields: any = ref([]); | 61 | const analysisResultTableFields: any = ref([]); |
| ... | @@ -100,16 +104,30 @@ watch( | ... | @@ -100,16 +104,30 @@ watch( |
| 100 | } | 104 | } |
| 101 | ); | 105 | ); |
| 102 | 106 | ||
| 103 | const getAnalysisResultPageData = () => { | 107 | const getAnalysisResultPageData = (isFull = false) => { |
| 104 | analysisResultLoading.value = true; | 108 | analysisResultLoading.value = true; |
| 105 | getAnonAnalyzePageData({ | 109 | getAnonAnalyzePageData({ |
| 106 | pageIndex: pageInfo.value.curr, | 110 | pageIndex: pageInfo.value.curr, |
| 107 | pageSize: pageInfo.value.limit, | 111 | pageSize: isFull ? -1 : pageInfo.value.limit, |
| 108 | taskExecGuid: taskExecGuid.value, | 112 | taskExecGuid: taskExecGuid.value, |
| 109 | }).then((res: any) => { | 113 | }).then((res: any) => { |
| 110 | analysisResultLoading.value = false; | 114 | analysisResultLoading.value = false; |
| 111 | if (res?.code == proxy.$passCode) { | 115 | if (res?.code == proxy.$passCode) { |
| 112 | pageInfo.value.rows = | 116 | if (isFull) { |
| 117 | fullResultData.value = []; | ||
| 118 | res.data?.records?.forEach(d => { | ||
| 119 | let obj = {}; | ||
| 120 | analysisResultTableFields.value.forEach(t => { | ||
| 121 | obj[t.enName] = d.fieldValue?.[t.enName]; | ||
| 122 | }); | ||
| 123 | obj['equivalenceClassNum'] = changeNum(d.equivalenceClassNum || 0, 0); | ||
| 124 | obj['reIdentifyRisk'] = changeNum(d.reIdentifyRisk || 0, 2); | ||
| 125 | obj['isGtThreshold'] = d.isGtThreshold; | ||
| 126 | fullResultData.value.push(obj); | ||
| 127 | }); | ||
| 128 | resultData.value = fullResultData.value.slice(0, pageInfo.value.limit); | ||
| 129 | pageInfo.value.rows = fullResultData.value.length; | ||
| 130 | } else { | ||
| 113 | resultData.value = []; | 131 | resultData.value = []; |
| 114 | res.data?.records?.forEach(d => { | 132 | res.data?.records?.forEach(d => { |
| 115 | let obj = {}; | 133 | let obj = {}; |
| ... | @@ -122,30 +140,82 @@ const getAnalysisResultPageData = () => { | ... | @@ -122,30 +140,82 @@ const getAnalysisResultPageData = () => { |
| 122 | resultData.value.push(obj); | 140 | resultData.value.push(obj); |
| 123 | }); | 141 | }); |
| 124 | pageInfo.value.rows = res.data?.totalRows ?? 0; | 142 | pageInfo.value.rows = res.data?.totalRows ?? 0; |
| 143 | } | ||
| 125 | } else { | 144 | } else { |
| 126 | proxy.$ElMessage.error(res.msg); | 145 | proxy.$ElMessage.error(res.msg); |
| 127 | } | 146 | } |
| 128 | }) | 147 | }) |
| 129 | } | 148 | } |
| 130 | 149 | ||
| 150 | const isWordStyle = ref(false); | ||
| 151 | |||
| 131 | /** 下载评估报告 */ | 152 | /** 下载评估报告 */ |
| 132 | const transfer = () => { | 153 | const transfer = () => { |
| 154 | isWordStyle.value = true; | ||
| 155 | } | ||
| 156 | |||
| 157 | const domClone: any = ref(null); | ||
| 158 | |||
| 159 | const resultReportRef = ref(); | ||
| 160 | |||
| 161 | const convertHtml2Img = (dom, domClone) => { | ||
| 162 | const element = <HTMLElement>dom.querySelector('.kpi-content') | ||
| 163 | if (!element) { | ||
| 164 | return Promise.resolve(); | ||
| 165 | } | ||
| 166 | return html2canvas(element, { | ||
| 167 | allowTaint: true, | ||
| 168 | useCORS: true, | ||
| 169 | scale: 2, | ||
| 170 | }).then((canvas: any) => { | ||
| 171 | document.documentElement.scrollTop = 0; | ||
| 172 | document.body.scrollTop = 0; | ||
| 173 | element.parentNode && ((<HTMLElement>element.parentNode).scrollTop = 0); | ||
| 174 | let url = canvas.toDataURL('image/jpeg'); | ||
| 175 | let img = document.createElement('img'); | ||
| 176 | if (url) { | ||
| 177 | // img.src = url.split(',')[1]; | ||
| 178 | img.src = url; | ||
| 179 | img.width = 620; | ||
| 180 | img.height = 265; | ||
| 181 | img.crossOrigin = 'Anonymous'; | ||
| 182 | } | ||
| 183 | const copyElement = <HTMLElement>domClone.querySelector('.kpi-content') | ||
| 184 | copyElement.parentNode?.replaceChild(img, copyElement); | ||
| 185 | }) | ||
| 186 | } | ||
| 187 | |||
| 188 | const loadingText = ref(''); | ||
| 189 | |||
| 190 | const getHTML = (reportResultContent) => { | ||
| 191 | let html = reportResultContent; | ||
| 192 | html = html.replace(/"/g, "'"); | ||
| 193 | return html; | ||
| 194 | }; | ||
| 195 | |||
| 196 | const downloadWord = () => { | ||
| 133 | if (downPromise.value) { | 197 | if (downPromise.value) { |
| 134 | return; | 198 | return; |
| 135 | } | 199 | } |
| 136 | downPromise.value = exportAnonReport({ | 200 | let dom = domClone.value || (domClone.value = document.createElement('div')); |
| 137 | taskGuid: route.query.guid, | 201 | let report = resultReportRef.value?.report; |
| 138 | execGuid: taskExecGuid.value | 202 | dom.innerHTML = report?.innerHTML; |
| 139 | }).then((res: any) => { | 203 | resultDataLoading.value = true; |
| 140 | downPromise.value = null; | 204 | loadingText.value = '报告正在下载中,请勿关闭浏览器...'; |
| 205 | downPromise.value = convertHtml2Img(report, dom).then(() => { | ||
| 206 | htmlToWord({ html: encodeURIComponent(`<div>${getHTML(dom.innerHTML)}</div>`) }).then((res: any) => { | ||
| 207 | downPromise.value = null | ||
| 208 | loadingText.value = ''; | ||
| 209 | resultDataLoading.value = false; | ||
| 141 | if (res && !res.msg) { | 210 | if (res && !res.msg) { |
| 142 | download(res, (route.query.taskName || oldAnonTaskValueInfo.value.taskName) + '_匿名化评估报告.docx', 'word') | 211 | download(res, (route.query.taskName || oldAnonTaskValueInfo.value.taskName) + '_匿名化评估报告.docx', 'word') |
| 143 | } else { | 212 | } else { |
| 144 | res?.msg && ElMessage.error(res?.msg); | 213 | res?.msg && ElMessage.error(res?.msg); |
| 145 | } | 214 | } |
| 215 | }) | ||
| 146 | }).catch(() => { | 216 | }).catch(() => { |
| 147 | downPromise.value = null; | 217 | downPromise.value = null; |
| 148 | }) | 218 | }); |
| 149 | } | 219 | } |
| 150 | 220 | ||
| 151 | onMounted(() => { | 221 | onMounted(() => { |
| ... | @@ -165,7 +235,7 @@ onBeforeMount(() => { | ... | @@ -165,7 +235,7 @@ onBeforeMount(() => { |
| 165 | analysisResultInfo.value = res.data || {}; | 235 | analysisResultInfo.value = res.data || {}; |
| 166 | analysisResultTableFields.value = res.data?.column || []; | 236 | analysisResultTableFields.value = res.data?.column || []; |
| 167 | pageInfo.value.curr = 1; | 237 | pageInfo.value.curr = 1; |
| 168 | getAnalysisResultPageData(); | 238 | getAnalysisResultPageData(true); |
| 169 | } else { | 239 | } else { |
| 170 | res?.msg && proxy.$ElMessage.error(res.msg); | 240 | res?.msg && proxy.$ElMessage.error(res.msg); |
| 171 | } | 241 | } |
| ... | @@ -182,13 +252,24 @@ onBeforeMount(() => { | ... | @@ -182,13 +252,24 @@ onBeforeMount(() => { |
| 182 | </script> | 252 | </script> |
| 183 | 253 | ||
| 184 | <template> | 254 | <template> |
| 185 | <div class="table_tool_wrap" v-loading="resultDataLoading" ref="containerRef"> | 255 | <div class="table_tool_wrap" v-loading="resultDataLoading" ref="containerRef" :element-loading-text="loadingText"> |
| 186 | <el-button style="margin-bottom: 8px;" type="primary" @click="transfer" v-preReClick>下载评估报告</el-button> | 256 | <el-button v-show="!isWordStyle" style="margin-bottom: 8px;" type="primary" @click="transfer" |
| 187 | <anonResultAnalysis :show-title="true" :analysis-result-info="analysisResultInfo" | 257 | v-preReClick>生成Word评估报告</el-button> |
| 188 | :analysis-result-loading="analysisResultLoading" :analysis-result-table-fields="analysisResultTableFields" | 258 | <div v-show="isWordStyle" style="margin-bottom: 8px;"> |
| 189 | :old-anon-task-value-info="oldAnonTaskValueInfo" :container-width="containerWidth" | 259 | <el-button @click="isWordStyle = false">返回</el-button> |
| 190 | :origin-result-table-field-column="originResultTableFieldColumn" :page-info="pageInfo" :result-data="resultData" | 260 | <el-button type="primary" @click="downloadWord">下载评估报告</el-button> |
| 191 | @page-change="pageChange"></anonResultAnalysis> | 261 | </div> |
| 262 | <anonResultAnalysis ref="resultReportRef" :show-title="true" :analysis-result-info="analysisResultInfo" | ||
| 263 | :isWordStyle="isWordStyle" :style="isWordStyle ? { | ||
| 264 | height: 'calc(100% - 36px)', | ||
| 265 | 'overflow-y': 'auto', | ||
| 266 | 'margin-right': '-16px', | ||
| 267 | 'padding-right': '16px', | ||
| 268 | width: 'auto' | ||
| 269 | } : null" :analysis-result-loading="analysisResultLoading" | ||
| 270 | :analysis-result-table-fields="analysisResultTableFields" :old-anon-task-value-info="oldAnonTaskValueInfo" | ||
| 271 | :container-width="containerWidth" :origin-result-table-field-column="originResultTableFieldColumn" | ||
| 272 | :page-info="pageInfo" :result-data="resultData" :fullResultData="fullResultData" @page-change="pageChange"></anonResultAnalysis> | ||
| 192 | </div> | 273 | </div> |
| 193 | </template> | 274 | </template> |
| 194 | 275 | ... | ... |
This diff is collapsed.
Click to expand it.
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment