|
|
@@ -1,14 +1,15 @@
|
|
|
<template>
|
|
|
- <div class="irrigation-management" style="display: flex; justify-content: center;">
|
|
|
+ <div class="irrigation-management" style="display: flex; justify-content: center;">
|
|
|
<!-- 计算页面 -->
|
|
|
<div v-if="showCalculation" class="page-container">
|
|
|
<el-card shadow="always" class="gradient-card">
|
|
|
- <el-radio-group v-model="selectedLandType" style="width: 100%;">
|
|
|
- <!-- 水地 -->
|
|
|
+ <!-- 将单选按钮组改为多选框组 -->
|
|
|
+ <el-checkbox-group v-model="selectedLandTypes" style="width: 100%;">
|
|
|
+ <!-- 水田 -->
|
|
|
<el-row :gutter="20" style="margin-bottom: 10px; align-items: center;">
|
|
|
<el-col :span="6">
|
|
|
<div class="radio-container">
|
|
|
- <el-radio label="water" border>水田</el-radio>
|
|
|
+ <el-checkbox label="water" border>水田</el-checkbox>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
@@ -16,16 +17,14 @@
|
|
|
<el-input
|
|
|
v-model="irrigationWaterUsage"
|
|
|
placeholder="请输入灌溉水用量"
|
|
|
- :disabled="selectedLandType !== 'water'"
|
|
|
style="margin-top: 10px;"
|
|
|
/>
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
- <div class="input-title">灌溉水有效利用率 (%)</div>
|
|
|
+ <div class='input-title'>灌溉水有效利用率 (%)</div>
|
|
|
<el-input
|
|
|
v-model="irrigationEfficiency"
|
|
|
placeholder="请输入灌溉水有效利用率"
|
|
|
- :disabled="selectedLandType !== 'water'"
|
|
|
style="margin-top: 10px;"
|
|
|
/>
|
|
|
</el-col>
|
|
|
@@ -35,7 +34,7 @@
|
|
|
<el-row :gutter="20" style="margin-bottom: 10px; align-items: center;">
|
|
|
<el-col :span="6">
|
|
|
<div class="radio-container">
|
|
|
- <el-radio label="irrigated" border>水浇地</el-radio>
|
|
|
+ <el-checkbox label="irrigated" border>水浇地</el-checkbox>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
@@ -43,7 +42,6 @@
|
|
|
<el-input
|
|
|
v-model="irrigatedWaterUsage"
|
|
|
placeholder="请输入灌溉水用量"
|
|
|
- :disabled="selectedLandType !== 'irrigated'"
|
|
|
style="margin-top: 10px;"
|
|
|
/>
|
|
|
</el-col>
|
|
|
@@ -52,7 +50,6 @@
|
|
|
<el-input
|
|
|
v-model="irrigatedEfficiency"
|
|
|
placeholder="请输入灌溉水有效利用率"
|
|
|
- :disabled="selectedLandType !== 'irrigated'"
|
|
|
style="margin-top: 10px;"
|
|
|
/>
|
|
|
</el-col>
|
|
|
@@ -62,7 +59,7 @@
|
|
|
<el-row :gutter="20" style="margin-bottom: 10px; align-items: center;">
|
|
|
<el-col :span="6">
|
|
|
<div class="radio-container">
|
|
|
- <el-radio label="dry" border>旱地</el-radio>
|
|
|
+ <el-checkbox label="dry" border>旱地</el-checkbox>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
@@ -70,7 +67,6 @@
|
|
|
<el-input
|
|
|
v-model="dryWaterUsage"
|
|
|
placeholder="请输入灌溉水用量"
|
|
|
- :disabled="selectedLandType !== 'dry'"
|
|
|
style="margin-top: 10px;"
|
|
|
/>
|
|
|
</el-col>
|
|
|
@@ -79,12 +75,11 @@
|
|
|
<el-input
|
|
|
v-model="dryEfficiency"
|
|
|
placeholder="请输入灌溉水有效利用率"
|
|
|
- :disabled="selectedLandType !== 'dry'"
|
|
|
style="margin-top: 10px;"
|
|
|
/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- </el-radio-group>
|
|
|
+ </el-checkbox-group>
|
|
|
|
|
|
<el-row justify="center" style="margin-top: 20px;">
|
|
|
<el-button
|
|
|
@@ -112,14 +107,26 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="results-container">
|
|
|
- <el-row :gutter="20" style="margin-top: 30px;">
|
|
|
- <el-col :span="24">
|
|
|
+ <!-- 图像区域（地图和直方图） -->
|
|
|
+ <div class="image-row">
|
|
|
+ <div class="image-container">
|
|
|
<div class="result-subtitle">Cd含量地图</div>
|
|
|
- <img v-if="mapImageUrl" :src="mapImageUrl" alt="Cd含量地图" class="result-image">
|
|
|
- <div v-else class="image-placeholder">地图加载中...</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div class="image-wrapper">
|
|
|
+ <img v-if="mapImageUrl" :src="mapImageUrl" alt="Cd含量地图" class="result-image">
|
|
|
+ <div v-else class="image-placeholder">地图加载中...</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="image-container">
|
|
|
+ <div class="result-subtitle">Cd含量分布直方图</div>
|
|
|
+ <div class="image-wrapper">
|
|
|
+ <img v-if="histogramImageUrl" :src="histogramImageUrl" alt="Cd含量地图" class="result-image">
|
|
|
+ <div v-else class="image-placeholder">直方图加载中...</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <!-- 统计结果 -->
|
|
|
<el-row style="margin-top: 30px;">
|
|
|
<el-col :span="24">
|
|
|
<div class="result-subtitle">统计结果</div>
|
|
|
@@ -168,8 +175,8 @@
|
|
|
import { ref } from 'vue';
|
|
|
import axios from 'axios';
|
|
|
import {
|
|
|
- ElRadio,
|
|
|
- ElRadioGroup,
|
|
|
+ ElCheckbox,
|
|
|
+ ElCheckboxGroup,
|
|
|
ElInput,
|
|
|
ElButton,
|
|
|
ElMessage,
|
|
|
@@ -189,8 +196,8 @@ const landTypeMap = {
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- ElRadio,
|
|
|
- ElRadioGroup,
|
|
|
+ ElCheckbox,
|
|
|
+ ElCheckboxGroup,
|
|
|
ElInput,
|
|
|
ElButton,
|
|
|
ElMessage,
|
|
|
@@ -201,7 +208,8 @@ export default {
|
|
|
ElTableColumn
|
|
|
},
|
|
|
setup() {
|
|
|
- const selectedLandType = ref('water'); // 默认选择水田
|
|
|
+ // 将单选改为多选，初始值为空数组
|
|
|
+ const selectedLandTypes = ref([]);
|
|
|
|
|
|
// 设置默认值
|
|
|
const irrigationWaterUsage = ref('711');
|
|
|
@@ -286,122 +294,123 @@ export default {
|
|
|
};
|
|
|
|
|
|
const calculateFlux = async () => {
|
|
|
- let totalFlux = 0;
|
|
|
- let valid = true;
|
|
|
- let currentLandType = '';
|
|
|
-
|
|
|
- if (selectedLandType.value === 'water') {
|
|
|
- if (!irrigationWaterUsage.value || !irrigationEfficiency.value) {
|
|
|
- ElMessage.warning('请输入水地的灌溉水用量和有效利用率');
|
|
|
- valid = false;
|
|
|
- } else {
|
|
|
- const usage = parseFloat(irrigationWaterUsage.value);
|
|
|
- const efficiency = parseFloat(irrigationEfficiency.value) / 100;
|
|
|
-
|
|
|
- if (isNaN(usage) || isNaN(efficiency)) {
|
|
|
- ElMessage.error('请输入有效的数字');
|
|
|
- valid = false;
|
|
|
- } else if (efficiency > 1 || efficiency < 0) {
|
|
|
- ElMessage.error('有效利用率应在0-100%之间');
|
|
|
- valid = false;
|
|
|
- } else {
|
|
|
- totalFlux = usage * efficiency;
|
|
|
- currentLandType = 'water';
|
|
|
- }
|
|
|
+ // 检查是否选择了土地类型
|
|
|
+ if (selectedLandTypes.value.length === 0) {
|
|
|
+ ElMessage.warning('请至少选择一种土地类型');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 收集所有土地类型的通量计算结果
|
|
|
+ const landFluxResults = [];
|
|
|
+ let inputValid = true; // 修复：在循环外部定义验证变量
|
|
|
+
|
|
|
+ // 遍历所有选中的土地类型
|
|
|
+ for (const landType of selectedLandTypes.value) {
|
|
|
+ let flux = 0;
|
|
|
+ let usage, efficiency;
|
|
|
+
|
|
|
+ // 根据土地类型获取对应的输入值
|
|
|
+ if (landType === 'water') {
|
|
|
+ usage = irrigationWaterUsage.value;
|
|
|
+ efficiency = irrigationEfficiency.value;
|
|
|
+ } else if (landType === 'irrigated') {
|
|
|
+ usage = irrigatedWaterUsage.value;
|
|
|
+ efficiency = irrigatedEfficiency.value;
|
|
|
+ } else if (landType === 'dry') {
|
|
|
+ usage = dryWaterUsage.value;
|
|
|
+ efficiency = dryEfficiency.value;
|
|
|
}
|
|
|
- }
|
|
|
- else if (selectedLandType.value === 'irrigated') {
|
|
|
- if (!irrigatedWaterUsage.value || !irrigatedEfficiency.value) {
|
|
|
- ElMessage.warning('请输入水浇地的灌溉水用量和有效利用率');
|
|
|
- valid = false;
|
|
|
- } else {
|
|
|
- const usage = parseFloat(irrigatedWaterUsage.value);
|
|
|
- const efficiency = parseFloat(irrigatedEfficiency.value) / 100;
|
|
|
-
|
|
|
- if (isNaN(usage) || isNaN(efficiency)) {
|
|
|
- ElMessage.error('请输入有效的数字');
|
|
|
- valid = false;
|
|
|
- } else if (efficiency > 1 || efficiency < 0) {
|
|
|
- ElMessage.error('有效利用率应在0-100%之间');
|
|
|
- valid = false;
|
|
|
- } else {
|
|
|
- totalFlux = usage * efficiency;
|
|
|
- currentLandType = 'irrigated';
|
|
|
- }
|
|
|
+
|
|
|
+ // 验证输入有效性
|
|
|
+ if (!usage || !efficiency) {
|
|
|
+ ElMessage.warning(`请输入${landTypeMap[landType]}的灌溉水用量和有效利用率`);
|
|
|
+ inputValid = false;
|
|
|
+ break;
|
|
|
}
|
|
|
- }
|
|
|
- else if (selectedLandType.value === 'dry') {
|
|
|
- if (!dryWaterUsage.value || !dryEfficiency.value) {
|
|
|
- ElMessage.warning('请输入旱地的灌溉水用量和有效利用率');
|
|
|
- valid = false;
|
|
|
- } else {
|
|
|
- const usage = parseFloat(dryWaterUsage.value);
|
|
|
- const efficiency = parseFloat(dryEfficiency.value) / 100;
|
|
|
-
|
|
|
- if (isNaN(usage) || isNaN(efficiency)) {
|
|
|
- ElMessage.error('请输入有效的数字');
|
|
|
- valid = false;
|
|
|
- } else if (efficiency > 1 || efficiency < 0) {
|
|
|
- ElMessage.error('有效利用率应在0-100%之间');
|
|
|
- valid = false;
|
|
|
- } else {
|
|
|
- totalFlux = usage * efficiency;
|
|
|
- currentLandType = 'dry';
|
|
|
- }
|
|
|
+
|
|
|
+ const usageValue = parseFloat(usage);
|
|
|
+ const efficiencyValue = parseFloat(efficiency) / 100;
|
|
|
+
|
|
|
+ if (isNaN(usageValue) || isNaN(efficiencyValue)) {
|
|
|
+ ElMessage.error(`请输入${landTypeMap[landType]}的有效数字`);
|
|
|
+ inputValid = false;
|
|
|
+ break;
|
|
|
+ } else if (efficiencyValue > 1 || efficiencyValue < 0) {
|
|
|
+ ElMessage.error(`${landTypeMap[landType]}的有效利用率应在0-100%之间`);
|
|
|
+ inputValid = false;
|
|
|
+ break;
|
|
|
}
|
|
|
- }
|
|
|
- else {
|
|
|
- ElMessage.warning('请选择一种土地类型');
|
|
|
- valid = false;
|
|
|
+
|
|
|
+ // 计算通量
|
|
|
+ flux = usageValue * efficiencyValue;
|
|
|
+ landFluxResults.push({
|
|
|
+ landType: landTypeMap[landType],
|
|
|
+ flux,
|
|
|
+ efficiency: efficiencyValue
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- if (valid) {
|
|
|
- loading.value = true;
|
|
|
- fluxResult.value = totalFlux;
|
|
|
+ if (!inputValid) return; // 使用在外部定义的验证变量
|
|
|
+
|
|
|
+ loading.value = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 准备调用后端接口的数据
|
|
|
+ const formData = new FormData();
|
|
|
|
|
|
- try {
|
|
|
- // 获取土地类型中文名称
|
|
|
- const landTypeChinese = landTypeMap[currentLandType];
|
|
|
-
|
|
|
- // 第一步：调用calculate接口进行计算
|
|
|
- const formData = new FormData();
|
|
|
- formData.append('land_type', landTypeChinese);
|
|
|
- formData.append('param1', totalFlux);
|
|
|
- formData.append('param2', parseFloat(irrigationEfficiency.value || irrigatedEfficiency.value || dryEfficiency.value));
|
|
|
- formData.append('color_map_name', "绿-黄-红-紫");
|
|
|
- formData.append('output_size', 8);
|
|
|
-
|
|
|
- await axios.post('http://localhost:8000/api/water/calculate', formData, {
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'multipart/form-data'
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 第二步：获取默认地图
|
|
|
- mapImageUrl.value = await fetchDefaultMap(landTypeChinese);
|
|
|
-
|
|
|
- // 第三步：获取默认直方图
|
|
|
- histogramImageUrl.value = await fetchDefaultHistogram(landTypeChinese);
|
|
|
-
|
|
|
- // 第四步：获取统计数据
|
|
|
- statisticsData.value = await fetchStatistics(landTypeChinese);
|
|
|
-
|
|
|
- // 切换到结果页面
|
|
|
- showCalculation.value = false;
|
|
|
- showResults.value = true;
|
|
|
-
|
|
|
- ElMessage.success('计算完成，结果已展示');
|
|
|
- } catch (error) {
|
|
|
- console.error('获取结果失败:', error);
|
|
|
- ElMessage.error('获取结果失败，请重试');
|
|
|
- } finally {
|
|
|
- loading.value = false;
|
|
|
- }
|
|
|
+ // 构建土地类型列表（中文名称）
|
|
|
+ const landTypesChinese = selectedLandTypes.value.map(type => landTypeMap[type]);
|
|
|
+
|
|
|
+ // 重要修改：将 land_types 作为数组传递（JSON字符串）
|
|
|
+ landTypesChinese.forEach(landType => formData.append('land_types', landType));
|
|
|
+
|
|
|
+
|
|
|
+ // 构建系数参数对象（每个土地类型对应的系数）
|
|
|
+ const coefficientParams = {};
|
|
|
+ landFluxResults.forEach(result => {
|
|
|
+ coefficientParams[result.landType] = [result.flux, result.efficiency];
|
|
|
+ });
|
|
|
+ formData.append('coefficient_params', JSON.stringify(coefficientParams));
|
|
|
+
|
|
|
+ // 其他固定参数
|
|
|
+ formData.append('color_map_name', "绿-黄-红-紫");
|
|
|
+ formData.append('output_size', 8);
|
|
|
+
|
|
|
+ // 调用计算接口
|
|
|
+ await axios.post('http://localhost:8000/api/water/calculate', formData, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取并显示结果
|
|
|
+ // 使用下划线连接的土地类型名称作为参数获取结果
|
|
|
+ const landTypeParam = landTypesChinese.join('_');
|
|
|
+
|
|
|
+ // 获取默认地图
|
|
|
+ mapImageUrl.value = await fetchDefaultMap(landTypeParam);
|
|
|
+
|
|
|
+ // 获取默认直方图
|
|
|
+ histogramImageUrl.value = await fetchDefaultHistogram(landTypeParam);
|
|
|
+
|
|
|
+ // 获取统计数据
|
|
|
+ statisticsData.value = await fetchStatistics(landTypeParam);
|
|
|
+
|
|
|
+ // 切换到结果页面
|
|
|
+ showCalculation.value = false;
|
|
|
+ showResults.value = true;
|
|
|
+
|
|
|
+ ElMessage.success('计算完成，结果已展示');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取结果失败:', error);
|
|
|
+ ElMessage.error('获取结果失败，请重试');
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
- selectedLandType,
|
|
|
+ selectedLandTypes,
|
|
|
irrigationWaterUsage,
|
|
|
irrigationEfficiency,
|
|
|
irrigatedWaterUsage,
|
|
|
@@ -424,15 +433,8 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.compact-container {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
+/* 保持原有样式不变，添加地图和直方图并列样式 */
|
|
|
.gradient-card {
|
|
|
- /* 半透明渐变背景 */
|
|
|
background: linear-gradient(
|
|
|
135deg,
|
|
|
rgba(250, 253, 255, 0.8),
|
|
|
@@ -441,15 +443,11 @@ export default {
|
|
|
width: 80%;
|
|
|
max-width: 800px;
|
|
|
padding: 25px;
|
|
|
- box-sizing: border-box;
|
|
|
border-radius: 12px;
|
|
|
- border: none;
|
|
|
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
|
- backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
|
|
|
}
|
|
|
|
|
|
.results-card {
|
|
|
- background: linear-gradient(
|
|
|
+ background: linear-gradient(
|
|
|
135deg,
|
|
|
rgba(250, 253, 255, 0.8),
|
|
|
rgba(137, 223, 252, 0.8)
|
|
|
@@ -457,10 +455,7 @@ export default {
|
|
|
width: 90%;
|
|
|
max-width: 1200px;
|
|
|
padding: 30px;
|
|
|
- box-sizing: border-box;
|
|
|
border-radius: 12px;
|
|
|
- border: none;
|
|
|
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
.results-header {
|
|
|
@@ -468,19 +463,15 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
- padding-bottom: 15px;
|
|
|
- border-bottom: 1px solid #e4e7ed;
|
|
|
}
|
|
|
|
|
|
.result-title {
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
- color: #303133;
|
|
|
text-align: center;
|
|
|
flex-grow: 1;
|
|
|
}
|
|
|
|
|
|
-/* 输入框标题样式 */
|
|
|
.input-title {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
@@ -489,7 +480,6 @@ export default {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
-/* 单选框容器 */
|
|
|
.radio-container {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
@@ -497,153 +487,17 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
-.compact-title-section {
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-main-title {
|
|
|
- font-size: 1.5rem;
|
|
|
- color: #1a3c7a;
|
|
|
- margin-bottom: 8px;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-sub-title {
|
|
|
- font-size: 0.9rem;
|
|
|
- color: #555;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-input-section {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-land-section {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- border-radius: 10px;
|
|
|
- padding: 12px 15px;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
- transition: all 0.2s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-land-section:hover {
|
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
|
- transform: translateY(-2px);
|
|
|
-}
|
|
|
-
|
|
|
-.compact-land-checkbox {
|
|
|
- width: 80px;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-land-label {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 1rem;
|
|
|
- color: #1a3c7a;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-input-group {
|
|
|
- flex: 1;
|
|
|
- margin: 0 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-input-label {
|
|
|
- font-size: 0.85rem;
|
|
|
- font-weight: 500;
|
|
|
- margin-bottom: 6px;
|
|
|
- color: #2c3e50;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.compact-input .el-input__inner) {
|
|
|
- height: 36px;
|
|
|
- font-size: 0.9rem;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 0 12px;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.compact-input .el-input__inner:focus) {
|
|
|
- border-color: #409EFF;
|
|
|
- box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-radio) {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-radio__label) {
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-
|
|
|
.calculate-btn {
|
|
|
width: 100%;
|
|
|
max-width: 300px;
|
|
|
height: 42px;
|
|
|
- border: none;
|
|
|
border-radius: 8px;
|
|
|
font-size: 1rem;
|
|
|
font-weight: 600;
|
|
|
- transition: all 0.3s ease;
|
|
|
background: linear-gradient(45deg, #1a8cff, #00cc99);
|
|
|
color: white;
|
|
|
- box-shadow: 0 4px 10px rgba(26, 140, 255, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-.compact-calculate-btn:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 6px 12px rgba(26, 140, 255, 0.4);
|
|
|
- background: linear-gradient(45deg, #0d7de0, #00b386);
|
|
|
-}
|
|
|
-
|
|
|
-.compact-calculate-btn:active {
|
|
|
- transform: translateY(1px);
|
|
|
-}
|
|
|
-
|
|
|
-.compact-result-section {
|
|
|
- text-align: center;
|
|
|
- margin-top: 15px;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 10px;
|
|
|
- background: rgba(255, 255, 255, 0.95);
|
|
|
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
|
|
|
- border: 1px solid #e0f7fa;
|
|
|
}
|
|
|
|
|
|
-.compact-result-title {
|
|
|
- font-size: 1.1rem;
|
|
|
- color: #1a3c7a;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-flux-value {
|
|
|
- font-size: 1.8rem;
|
|
|
- font-weight: 700;
|
|
|
- color: #e91e63;
|
|
|
- margin: 5px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-unit {
|
|
|
- font-size: 1.2rem;
|
|
|
- color: #555;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.compact-result-description {
|
|
|
- font-size: 0.9rem;
|
|
|
- color: #555;
|
|
|
- margin-top: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 结果区域样式 */
|
|
|
.results-container {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
@@ -653,29 +507,48 @@ export default {
|
|
|
font-weight: bold;
|
|
|
font-size: 20px;
|
|
|
margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
padding-bottom: 5px;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
|
|
|
-.result-image {
|
|
|
- width: 100%;
|
|
|
- max-height: 400px;
|
|
|
- object-fit: contain;
|
|
|
- border-radius: 8px;
|
|
|
+/* 新增：地图和直方图并列样式 */
|
|
|
+.image-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.image-container {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.image-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
border: 1px solid #e4e7ed;
|
|
|
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
background-color: #f8f8f8;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ height: 400px; /* 固定高度 */
|
|
|
+}
|
|
|
+
|
|
|
+.result-image {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.image-placeholder {
|
|
|
- height: 400px;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- border: 1px dashed #dcdfe6;
|
|
|
- border-radius: 8px;
|
|
|
- background-color: #f5f7fa;
|
|
|
color: #909399;
|
|
|
font-style: italic;
|
|
|
font-size: 18px;
|
|
|
@@ -685,8 +558,6 @@ export default {
|
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
|
border-radius: 12px;
|
|
|
padding: 25px;
|
|
|
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
|
- margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
/* 表格样式增强 */
|
|
|
@@ -694,7 +565,6 @@ export default {
|
|
|
margin-bottom: 25px;
|
|
|
border-radius: 10px;
|
|
|
overflow: hidden;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
:deep(.el-table__header) {
|
|
|
@@ -704,53 +574,28 @@ export default {
|
|
|
:deep(.el-table th) {
|
|
|
background-color: #f0f8ff;
|
|
|
font-weight: bold;
|
|
|
- color: #2c3e50;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-table td) {
|
|
|
- font-size: 15px;
|
|
|
}
|
|
|
|
|
|
/* 返回按钮样式 */
|
|
|
.back-button {
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
- left: 20px; /* 从right改为left */
|
|
|
+ left: 20px;
|
|
|
width: 120px;
|
|
|
- font-size: 16px;
|
|
|
padding: 10px;
|
|
|
background: linear-gradient(to right, #8DF9F0, #26B046);
|
|
|
color: white;
|
|
|
- border: none;
|
|
|
border-radius: 20px;
|
|
|
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
- z-index: 10; /* 确保按钮在顶层 */
|
|
|
}
|
|
|
|
|
|
-.back-button:hover {
|
|
|
- background: linear-gradient(to right, #7de8df, #20a03d);
|
|
|
-}
|
|
|
-.irrigation-management {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.page-container {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- max-width: 1200px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 调整卡片宽度 */
|
|
|
-.gradient-card {
|
|
|
- width: 90% !important;
|
|
|
- max-width: 800px;
|
|
|
-}
|
|
|
-
|
|
|
-.results-card {
|
|
|
- width: 95% !important;
|
|
|
- max-width: 1200px;
|
|
|
+/* 响应式调整 */
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .image-row {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-container {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
</style>
|
yes-yes-yes-k