|
|
@@ -2,16 +2,37 @@
|
|
|
<div class="container">
|
|
|
<!-- 顶部操作栏 -->
|
|
|
<div class="toolbar">
|
|
|
- <el-button class="custom-button" @click="calculate">计算</el-button>
|
|
|
- <el-button class="custom-button" @click="captureScreenshot">截图</el-button>
|
|
|
- <el-button class="custom-button" @click="exportData">导出</el-button>
|
|
|
+ <el-button class="custom-button" :loading="isCalculating" @click="calculate">计算</el-button>
|
|
|
+ <el-button class="custom-button" :disabled="isCalculating || !mapBlob" @click="exportMap">导出地图</el-button>
|
|
|
+ <el-button class="custom-button" :disabled="isCalculating || !histogramBlob" @click="exportHistogram">导出直方图</el-button>
|
|
|
+ <el-button class="custom-button" :disabled="isCalculating || !tableData.length" @click="exportData">导出数据</el-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主体内容区，计算后显示 -->
|
|
|
- <div v-if="result" class="content-area" ref="captureArea">
|
|
|
- <!-- 地图区域 -->
|
|
|
+ <div v-if="result" class="content-area">
|
|
|
+ <!-- 地图区域 - 现在包含两个图片展示区 -->
|
|
|
<div class="map-area">
|
|
|
- <div class="map-placeholder">地图区域</div>
|
|
|
+ <div class="map-container">
|
|
|
+ <!-- 地图展示 -->
|
|
|
+ <div class="map-section">
|
|
|
+ <h3>有效态Cd预测地图</h3>
|
|
|
+ <img v-if="mapImageUrl" :src="mapImageUrl" alt="有效态Cd预测地图" class="map-image">
|
|
|
+ <div v-if="loadingMap" class="loading-container">
|
|
|
+ <el-icon class="loading-icon"><Loading /></el-icon>
|
|
|
+ <span>地图加载中...</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 直方图展示 -->
|
|
|
+ <div class="histogram-section">
|
|
|
+ <h3>有效态Cd预测直方图</h3>
|
|
|
+ <img v-if="histogramImageUrl" :src="histogramImageUrl" alt="有效态Cd预测直方图" class="histogram-image">
|
|
|
+ <div v-if="loadingMap" class="loading-container">
|
|
|
+ <el-icon class="loading-icon"><Loading /></el-icon>
|
|
|
+ <span>直方图加载中...</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 表格区域 -->
|
|
|
@@ -29,54 +50,154 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import html2canvas from 'html2canvas';
|
|
|
import * as XLSX from 'xlsx';
|
|
|
import { saveAs } from 'file-saver';
|
|
|
+import axios from 'axios';
|
|
|
+import { Loading } from '@element-plus/icons-vue';
|
|
|
|
|
|
export default {
|
|
|
- name: 'TotalCadmiumPrediction',
|
|
|
+ name: 'EffectiveCadmiumPrediction',
|
|
|
+ components: { Loading },
|
|
|
data() {
|
|
|
return {
|
|
|
+ isCalculating: false,
|
|
|
+ loadingMap: false,
|
|
|
+ loadingHistogram: false,
|
|
|
result: false,
|
|
|
- tableData: []
|
|
|
+ tableData: [],
|
|
|
+ mapImageUrl: null, // 存储地图图片 URL
|
|
|
+ histogramImageUrl: null, // 存储直方图图片 URL
|
|
|
+ mapBlob: null, // 存储地图原始Blob数据
|
|
|
+ histogramBlob: null // 存储直方图原始Blob数据
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- calculate() {
|
|
|
- this.result = true;
|
|
|
- this.tableData = [
|
|
|
- { name: '样本1', value: 10, unit: 'mg/L', description: '描述1' },
|
|
|
- { name: '样本2', value: 20, unit: 'mg/L', description: '描述2' }
|
|
|
- ];
|
|
|
- },
|
|
|
- async captureScreenshot() {
|
|
|
- const element = this.$refs.captureArea;
|
|
|
- if (!element) return;
|
|
|
-
|
|
|
+ async calculate() {
|
|
|
try {
|
|
|
- const canvas = await html2canvas(element);
|
|
|
- const dataUrl = canvas.toDataURL('image/png');
|
|
|
- const link = document.createElement('a');
|
|
|
- link.href = dataUrl;
|
|
|
- link.download = '截图.png';
|
|
|
- link.click();
|
|
|
- } catch (err) {
|
|
|
- console.error('截图失败:', err);
|
|
|
+ // 重置状态
|
|
|
+ this.isCalculating = true;
|
|
|
+ this.loadingMap = true;
|
|
|
+ this.loadingHistogram = true;
|
|
|
+ this.result = false;
|
|
|
+ this.mapImageUrl = null;
|
|
|
+ this.histogramImageUrl = null;
|
|
|
+ this.mapBlob = null;
|
|
|
+ this.histogramBlob = null;
|
|
|
+ this.tableData = [];
|
|
|
+
|
|
|
+ // 调用有效态Cd地图接口
|
|
|
+ const mapResponse = await axios.post('https://soilgd.com:8000/api/cd-prediction/effective-cd/generate-and-get-map', {}, {
|
|
|
+ responseType: 'blob'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 调用有效态Cd直方图接口
|
|
|
+ const histogramResponse = await axios.post('https://soilgd.com:8000/api/cd-prediction/effective-cd/generate-and-get-histogram', {}, {
|
|
|
+ responseType: 'blob'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 保存原始Blob数据用于导出
|
|
|
+ this.mapBlob = mapResponse.data;
|
|
|
+ this.histogramBlob = histogramResponse.data;
|
|
|
+
|
|
|
+ // 为图片数据创建 URL
|
|
|
+ this.mapImageUrl = URL.createObjectURL(this.mapBlob);
|
|
|
+ this.histogramImageUrl = URL.createObjectURL(this.histogramBlob);
|
|
|
+
|
|
|
+ // 更新表格数据
|
|
|
+ this.result = true;
|
|
|
+ this.tableData = [
|
|
|
+ { name: '样本1', value: 10, unit: 'mg/L', description: '描述1' },
|
|
|
+ { name: '样本2', value: 20, unit: 'mg/L', description: '描述2' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取地图或直方图失败:', error);
|
|
|
+ this.$message.error('获取预测结果失败，请重试');
|
|
|
+ } finally {
|
|
|
+ // 无论成功失败都重置加载状态
|
|
|
+ this.isCalculating = false;
|
|
|
+ this.loadingMap = false;
|
|
|
+ this.loadingHistogram = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导出地图方法
|
|
|
+ exportMap() {
|
|
|
+ if (!this.mapBlob) {
|
|
|
+ this.$message.warning('请先计算生成地图');
|
|
|
+ return;
|
|
|
}
|
|
|
+
|
|
|
+ // 创建下载链接并添加到文档中
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = URL.createObjectURL(this.mapBlob);
|
|
|
+ link.download = '有效态Cd预测地图.jpg';
|
|
|
+ link.style.display = 'none';
|
|
|
+ document.body.appendChild(link);
|
|
|
+
|
|
|
+ // 触发点击事件
|
|
|
+ link.click();
|
|
|
+
|
|
|
+ // 清理临时URL和链接元素
|
|
|
+ setTimeout(() => {
|
|
|
+ document.body.removeChild(link);
|
|
|
+ URL.revokeObjectURL(link.href);
|
|
|
+ }, 100);
|
|
|
},
|
|
|
+
|
|
|
+ // 导出直方图方法 - 修复：确保链接元素被添加到文档中
|
|
|
+ exportHistogram() {
|
|
|
+ if (!this.histogramBlob) {
|
|
|
+ this.$message.warning('请先计算生成直方图');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建下载链接并添加到文档中
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = URL.createObjectURL(this.histogramBlob);
|
|
|
+ link.download = '有效态Cd预测直方图.jpg';
|
|
|
+ link.style.display = 'none';
|
|
|
+ document.body.appendChild(link);
|
|
|
+
|
|
|
+ // 触发点击事件
|
|
|
+ link.click();
|
|
|
+
|
|
|
+ // 清理临时URL和链接元素
|
|
|
+ setTimeout(() => {
|
|
|
+ document.body.removeChild(link);
|
|
|
+ URL.revokeObjectURL(link.href);
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导出数据方法
|
|
|
exportData() {
|
|
|
- const worksheet = XLSX.utils.json_to_sheet(this.tableData);
|
|
|
+ // 创建工作簿
|
|
|
const workbook = XLSX.utils.book_new();
|
|
|
- XLSX.utils.book_append_sheet(workbook, worksheet, '表格数据');
|
|
|
- const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
|
|
|
- const blob = new Blob([wbout], { type: 'application/octet-stream' });
|
|
|
- saveAs(blob, '导出数据.xlsx');
|
|
|
+
|
|
|
+ // 创建数据表
|
|
|
+ const worksheet = XLSX.utils.json_to_sheet(this.tableData);
|
|
|
+
|
|
|
+ // 将工作表添加到工作簿
|
|
|
+ XLSX.utils.book_append_sheet(workbook, worksheet, '有效态Cd数据');
|
|
|
+
|
|
|
+ // 生成Excel文件
|
|
|
+ const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
|
|
|
+ const excelData = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
|
|
+
|
|
|
+ // 保存文件
|
|
|
+ saveAs(excelData, 'effective-cd-data.xlsx');
|
|
|
}
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 组件销毁时释放图片 URL 防止内存泄漏
|
|
|
+ if (this.mapImageUrl) URL.revokeObjectURL(this.mapImageUrl);
|
|
|
+ if (this.histogramImageUrl) URL.revokeObjectURL(this.histogramImageUrl);
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+/* 样式保持不变 */
|
|
|
.container {
|
|
|
padding: 20px;
|
|
|
background-color: #f5f7fa;
|
|
|
@@ -110,19 +231,68 @@ export default {
|
|
|
min-width: 300px;
|
|
|
}
|
|
|
|
|
|
+.map-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.map-section, .histogram-section {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 15px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.map-image, .histogram-image {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 600px;
|
|
|
+ object-fit: contain;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
.map-placeholder {
|
|
|
background-color: #cce5ff;
|
|
|
- height: 400px;
|
|
|
+ height: 200px;
|
|
|
border-radius: 8px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-weight: bold;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 16px;
|
|
|
color: #003366;
|
|
|
}
|
|
|
|
|
|
.table-area {
|
|
|
flex: 1;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 15px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.loading-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 200px;
|
|
|
+ color: #47C3B9;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-icon {
|
|
|
+ font-size: 36px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ animation: rotate 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotate {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
