AcidificationModel/pages/Visualization/Visualization.js

Page({
  data: {
    isEditing: false,
    tableName: 'current_reflux', // 确保这个表名在页面中是有效的
    fileFormat: 'excel', // 默认是 Excel 格式
    shoopingtext: "", // 搜索框内容
    filteredRows: [], // 表格过滤后的数据
    rows: [], // 所有表格数据
    showModal: false, // 控制底部编辑删除弹窗的显示与否
    showAddModal: false, // 控制新增数据弹窗的显示与否
    currentRow: null, // 当前选中的表格行
    // 新增数据弹窗的输入框内容
    newData: {
      id: "",
      OM: "",
      CL: "",
      CEC: "",
      H_plus: "",
      N: "",
      Al3_plus: "",
      Delta_pH: ""
    },
    // 中文表头内容，动态生成
    tableHeaders: [
      "序号", "有机质含量", "土壤粘粒", "阳离子交换量", "交换性氢",
      "水解氮","交换性铝", "ΔpH",
    ],
    unit: [
      " ", "(g/kg)", "(g/kg)", "(cmol/kg)", "(cmol/kg)", 
      "(g/kg)", "(cmol/kg)", " "
    ]
  },

  // 页面加载时获取表格数据
  onLoad: function() {
    this.LoadData();
  },  

  LoadData: function() {
    wx.request({
      url: 'https://soilgd.com:5000/table',
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        table: 'current_reflux'
      },
      success: (res) => {
        console.log('后端返回数据:', res.data.rows); // 打印返回数据，确认格式
        
        if (res.data && Array.isArray(res.data.rows)) {
          const rows = res.data.rows.map(row => {
            return {
            'id': row.id,
            'OM': parseFloat(row.OM).toFixed(2),
            'CL': parseFloat(row.CL).toFixed(2),
            'CEC': parseFloat(row.CEC).toFixed(2),
            'H_plus': parseFloat(row.H_plus).toFixed(2),
            'N': parseFloat(row.N).toFixed(2),
            'Al3_plus': parseFloat(row.Al3_plus).toFixed(2),
            'Delta_pH': parseFloat(row.Delta_pH).toFixed(2),

            };
          });
  
          this.setData({
            rows: rows,
            filteredRows: rows
          });
        } else {
          wx.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },

 // 下载模板函数
 onDownloadTemplate: function() {
  wx.showLoading({
    title: '下载中...',
  });

  const tableName = 'current_reflux';  // 或者根据需要选择表名
  const format = 'excel';  // 或者 'csv' 作为模板格式
  const timestamp = new Date().getTime();
  const fileName = `${tableName}_template_${timestamp}.${format}`;
  
  // 使用服务器的实际地址替换这里的URL
  const downloadUrl = `https://soilgd.com:5000/download_template?table=${tableName}&format=${format}`;

  wx.downloadFile({
    url: downloadUrl,
    success: (res) => {
      wx.hideLoading();
      if (res.statusCode === 200) {
        // 文件下载成功后，尝试打开文件
        wx.openDocument({
          filePath: res.tempFilePath, // 使用临时文件路径
          fileType: format === 'excel' ? 'xlsx' : 'csv',
          success: () => {
            console.log('文件打开成功');
            wx.showToast({
              title: '文件已打开',
              icon: 'success'
            });
          },
          fail: (error) => {
            console.error('文件打开失败', error);
            wx.showToast({
              title: '打开文件失败',
              icon: 'none'
            });
          }
        });
      } else {
        wx.showToast({
          title: '下载失败，请检查网络或重试',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      wx.hideLoading();
      wx.showToast({
        title: '请求失败，请重试',
        icon: 'none'
      });
      console.error('请求失败:', err);
    }
  });
},

   // 导出数据按钮点击事件
   onExport: function () {
    const tableName = this.data.tableName;
    const fileFormat = this.data.fileFormat;
  
    wx.showLoading({
      title: '导出中...',
    });
  
    // 向后端发送请求，获取表格数据并导出
    const downloadUrl = `https://soilgd.com:5000/export_data?table=${tableName}&format=${fileFormat}`;
  
    wx.downloadFile({
      url: downloadUrl,
      success: (res) => {
        wx.hideLoading();
        if (res.statusCode === 200) {
          // 文件下载成功后，尝试打开文件
          wx.openDocument({
            filePath: res.tempFilePath, // 使用临时文件路径
            fileType: fileFormat === 'excel' ? 'xlsx' : 'csv',
            success: () => {
              console.log('文件打开成功');
              wx.showToast({
                title: '文件已打开',
                icon: 'success'
              });
            },
            fail: (error) => {
              console.error('文件打开失败', error);
              wx.showToast({
                title: '打开文件失败',
                icon: 'none'
              });
            }
          });
        } else {
          wx.showToast({
            title: '导出失败，请检查网络或重试',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  },
  
  // 导入数据功能
onImport: function () {
  wx.chooseMessageFile({
    count: 1,
    type: 'file',
    extension: ['xlsx', 'csv'], // 允许上传的文件类型
    success: (res) => {
      const filePath = res.tempFiles[0].path;
      const fileName = res.tempFiles[0].name;
      const fileSize = (res.tempFiles[0].size / 1024).toFixed(2); // 文件大小以KB为单位

      // 显示所选文件信息
      this.setData({
        selectedFileInfo: `已选择文件：${fileName} (${fileSize} KB)`
      });

      wx.showLoading({ title: '上传中...' });

      // 使用服务器的 URL 替代本地地址或Ngrok地址
      const uploadUrl = 'https://soilgd.com:5000/import_data'; // 更新为您实际的服务器地址和端口

      // 上传文件到后端
      wx.uploadFile({
        url: 'https://soilgd.com:5000/import_data', // 后端接口
        filePath: filePath,
        name: 'file',
        formData: {
          table: this.data.tableName, // 表名
          fileName: fileName
        },
        success: (uploadRes) => {
          wx.hideLoading();
          let responseData;
          try {
            responseData = JSON.parse(uploadRes.data);
          } catch (e) {
            console.error('Failed to parse response data:', e);
            wx.showToast({
              title: '服务器响应解析失败',
              icon: 'none'
            });
            return;
          }

          if (responseData.success) {
            const { total_data, new_data, duplicate_data, duplicate_details } = responseData;

            // 显示导入结果
            wx.showModal({
              title: '导入结果',
              content: `总数据: ${total_data} 条\n新增: ${new_data} 条\n重复: ${duplicate_data} 条`,
            });

            // 重新加载数据
            this.LoadData();
          } else {
            wx.showToast({
              title: responseData.message || '导入失败，请检查文件格式',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          wx.hideLoading();
          wx.showToast({
            title: '导入失败，请重试',
            icon: 'none'
          });
          console.error('文件上传失败:', err);
        }
      });
    },
    fail: (err) => {
      console.error('文件选择失败:', err);
    }
  });
},

  // 新增按钮点击，显示新增弹窗
onAdd: function() {
  console.log("新增按钮被点击了");  // 调试日志
  this.setData({
    isEditing: false,  // 这里设置为 false，表示新增操作而非编辑
    showAddModal: true, // 显示新增数据弹窗
    newData: { // 重置新增数据
      OM: "",
      CL: "",
      CEC: "",
      H_plus: "",
      N: "",
      Al3_plus: "",
      Delta_pH: ""
    }
  });
  console.log("showAddModal: ", this.data.showAddModal);  // 确认数据更新
},

  // 输入框绑定：更新新增数据的对应字段
  onInputOM: function(e) {
    const value = e.detail.value;
    const filteredValue = value.replace(/[^0-9.]/g, '');
    this.setData({
      'newData.OM': filteredValue,
    });
  },
  onInputCL: function(e) {
    const value = e.detail.value;
    const filteredValue = value.replace(/[^0-9.]/g, '');
    this.setData({
      'newData.CL': filteredValue,
    });
  },
  onInputCEC: function(e) {
    const value = e.detail.value;
    const filteredValue = value.replace(/[^0-9.]/g, '');
    this.setData({
      'newData.CEC': filteredValue,
    });
  },
  onInputH_plus: function(e) {
    const value = e.detail.value;
    const filteredValue = value.replace(/[^0-9.]/g, '');
    this.setData({
      'newData.H_plus': filteredValue,
    });
  },
  onInputN: function(e) {
    const value = e.detail.value;
    const filteredValue = value.replace(/[^0-9.]/g, '');
    this.setData({
      'newData.N': filteredValue,
    });
  },
  onInputAl3_plus: function(e) {
    const value = e.detail.value;
    const filteredValue = value.replace(/[^0-9.]/g, '');
    this.setData({
      'newData.Al3_plus': filteredValue,
    });
  },
  onInputDelta_pH: function(e) {
    const value = e.detail.value;
    const filteredValue = value.replace(/[^0-9.]/g, '');
    this.setData({
      'newData.Delta_pH': filteredValue,
    });
  },

  // 提交新增数据
onSubmitAdd: function() {
  const newRow = this.data.newData;
  if (Object.values(newRow).some(value => !value)) {
    wx.showToast({
      title: '所有字段都必须填写！',
      icon: 'none'
    });
    return;
  }

  // 在请求之前打印数据，确保发送的数据正确
  console.log('Sending data:', {
    table: 'current_reflux',
    item: newRow
  });

  wx.request({
    url: 'https://soilgd.com:5000/add_item',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      table: 'current_reflux',
      item: newRow
    },
    success: (res) => {
      // 判断返回的状态码，进行处理
      if (res.statusCode === 200 && res.data.success) {
        this.setData({
          rows: [...this.data.rows, newRow],
          showAddModal: false
        });
        wx.showToast({
          title: '新增成功',
          icon: 'success'
        });
        this.LoadData();
      } else if (res.statusCode === 409) {
        wx.showToast({
          title: '重复数据，已有相同的数据项存在。',
          icon: 'none'
        });
      } else {
        wx.showToast({
          title: '新增失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      wx.showToast({
        title: '请求失败，请重试',
        icon: 'none'
      });
      console.error('请求失败:', err);
    }
  });
},

  // 取消新增数据
  onCancel: function() {
    this.setData({
      showAddModal: false
    });
  },

  // 编辑按钮点击
onEdit: function(e) {
  const { index, row } = this.data.currentRow;
  console.log(row);

  // 检查 currentRow 是否有定义并且包含数据
  if (row) {
    this.setData({
      isEditing: true,
      showModal: false,
      showAddModal: true, // 显示编辑弹窗
      newData: row, // 将当前行的数据复制到 newData 中，以便在表单中显示
      currentRow: { index: index, row: row } // 保存当前行的信息，以便在提交时使用
    });
  } else {
    wx.showToast({
      title: '数据加载失败，请重试',
      icon: 'none'
    });
  }
},

  // 提交编辑数据
onSubmitEdit: function() {
  const updatedRow = this.data.newData;
  const { index } = this.data.currentRow;

  if (Object.values(updatedRow).some(value => !value)) {
    wx.showToast({
      title: '所有字段都必须填写！',
      icon: 'none'
    });
    return;
  }

  wx.request({
    url: 'https://soilgd.com:5000/update_item',
    method: 'PUT',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      table: 'current_reflux',
      item: updatedRow
    },
    success: (res) => {
      if (res.data.success) {
        // 更新成功后，更新前端数据
        let rows = this.data.rows;
        rows[index] = updatedRow; // 用更新后的数据替换旧数据
        this.setData({
          rows: rows,
          showAddModal: false // 关闭编辑弹窗
        });
        wx.showToast({
          title: '编辑成功',
          icon: 'success'
        });
        this.LoadData();
      } else {
        wx.showToast({
          title: '编辑失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      wx.showToast({
        title: '请求失败，请重试',
        icon: 'none'
      });
      console.error('请求失败:', err);
    }
  });
},

  // 删除按钮点击
  onDelete: function() {
    const { index, row } = this.data.currentRow;
    console.log("当前选中行的数据:", this.data.currentRow);
  
    const condition = `id=${row.id}`;  // 使用条件进行删除
  
    // 发送 DELETE 请求
    wx.request({
      url: 'https://soilgd.com:5000/delete_item',  // 后端接口地址
      method: 'POST',  // 使用 POST 请求
      data: {
        table: 'current_reflux',  // 目标表
        condition: condition  // 删除条件
      },
      success: (res) => {
        if (res.data.success) {
          // 删除成功后，更新前端数据
          let rows = this.data.rows;
          rows.splice(index, 1);  // 从数据中删除选中的行
          this.setData({
            rows: rows,
            showModal: false  // 隐藏编辑删除弹窗
          });
          wx.showToast({
            title: '删除成功',
            icon: 'success'
          });
    
          // 重新获取数据
          this.LoadData();  // 重新加载数据
        } else {
          wx.showToast({
            title: '删除失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        });
        console.error('请求失败:', err);
      }
    });
  }, 

  onSubmit: function() {
    if (this.data.isEditing) {
      this.onSubmitEdit();
    } else {
      this.onSubmitAdd();
    }
  },

  // 取消编辑删除弹窗
  onCancel: function() {
    if (this.data.showModal) {
      this.setData({
        showModal: false
      });
    } else {
      this.setData({
        showAddModal: false
      });
    }
  },

  // 行点击事件：显示编辑和删除弹窗
  onRowClick: function(e) {
    const index = e.currentTarget.dataset.index;
    const row = e.currentTarget.dataset.row;

    this.setData({
      currentRow: { index: index, row: row },
      showModal: true  // 显示编辑删除弹窗
    });
  }
});