AcidificationModel/pages/Visualization/Visualization.wxml

<!-- 固定顶部区域 -->
<view class="top-container">
  <view class="top">
    <view class="topsearch">
      <view class="frame">
        <input value="{{shoopingtext}}" placeholder="请输入搜索内容" bindinput="shoppinginput" />
      </view>
      <text bindtap="search">搜索</text>
    </view>
  </view>

  <view class="add-btn-container">
  <button class="add-btn" bindtap="onImport">导入</button>
  <button class="add-btn" bindtap="onExport">导出</button>
  <button class="add-btn" bindtap="onDownloadTemplate">下载模板</button>
  <button class="add-btn" bindtap="onAdd">新增</button>
  </view>
</view>

<!-- 滚动区域 -->
<scroll-view class="table-container" scroll-x="true" scroll-with-animation="true">
  <!-- 数据加载中 -->
  <view wx:if="{{loading}}" class="loading">数据加载中，请稍候...</view>

  <!-- 无数据提示 -->
  <view wx:if="{{!loading && filteredRows.length === 0}}" class="no-data">暂无数据</view>

  <!-- 表格 -->
  <view class="table-body">
    <view class="table-header">
      <view class="table-cell" wx:for="{{tableHeaders}}" wx:key="index">{{item}}</view>
    </view>

    <block wx:for="{{filteredRows}}" wx:key="index">
      <view class="table-row" bindtap="onRowClick" data-index="{{index}}" data-row="{{item}}">
        <view class='table-cell' wx:for="{{list}}" wx:key="item">
          <view class='item'>{{item}}</view>
        </view>
        <view class="table-cell">{{index + 1}}</view> <!-- 序号 -->
        <view class="table-cell">{{item.OM}}</view>
        <view class="table-cell">{{item.CL}}</view>
        <view class="table-cell">{{item.CEC}}</view>
        <view class="table-cell">{{item.H_plus}}</view>
        <view class="table-cell">{{item.HN}}</view>
        <view class="table-cell">{{item.Al3_plus}}</view>
        <view class="table-cell">{{item.free_alumina}}</view>
        <view class="table-cell">{{item.free_iron_oxides}}</view>
        <view class="table-cell">{{item.Delta_pH}}</view>
      </view>
    </block>
  </view>
</scroll-view>

<!-- 新增数据弹窗 -->
<view class="modal" wx:if="{{showAddModal}}">
  <view class="modal-content">
    <!-- 有机质含量 -->
    <view class="modal-item">
      <text class="item-label">有机质含量：</text>
      <input class="input-field" placeholder="请输入有机质含量" data-field="OM" bindinput="onInputOM" value="{{newData.OM}}"/>
    </view>

    <!-- 土壤粘粒重量 -->
    <view class="modal-item">
      <text class="item-label">土壤粘粒重量：</text>
      <input class="input-field" placeholder="请输入土壤粘粒重量" data-field="CL" bindinput="onInputCL" value="{{newData.CL}}"/>
    </view>

    <!-- 阳离子交换量 -->
    <view class="modal-item">
      <text class="item-label">阳离子交换量：</text>
      <input class="input-field" placeholder="请输入阳离子含量" data-field="CEC" bindinput="onInputCEC" value="{{newData.CEC}}"/>
    </view>

    <!-- 氢离子含量 -->
    <view class="modal-item">
      <text class="item-label">氢离子含量：</text>
      <input class="input-field" placeholder="请输入氢离子含量" data-field="H_plus" bindinput="onInputH_plus" value="{{newData.H_plus}}"/>
    </view>

    <!-- 硝态氮含量 -->
    <view class="modal-item">
      <text class="item-label">硝态氮含量：</text>
      <input class="input-field" placeholder="请输入硝态氮含量" data-field="HN" bindinput="onInputHN" value="{{newData.HN}}"/>
    </view>

    <!-- 铝离子含量 -->
    <view class="modal-item">
      <text class="item-label">铝离子含量：</text>
      <input class="input-field" placeholder="请输入铝离子含量" data-field="Al3_plus" bindinput="onInputAl3_plus" value="{{newData.Al3_plus}}"/>
    </view>

    <!-- 游离氧化铝 -->
    <view class="modal-item">
      <text class="item-label">游离氧化铝：</text>
      <input class="input-field" placeholder="请输入游离氧化铝含量" data-field="free_alumina" bindinput="onInputfree_alumina" value="{{newData.free_alumina}}"/>
    </view>

    <!-- 游离氧化铁 -->
    <view class="modal-item">
      <text class="item-label">游离氧化铁：</text>
      <input class="input-field" placeholder="请输入游离氧化铁含量" data-field="free_iron_oxides" bindinput="onInputfree_iron_oxides" value="{{newData.free_iron_oxides}}"/>
    </view>

    <!-- 酸碱差值 -->
    <view class="modal-item">
      <text class="item-label">酸碱差值：</text>
      <input class="input-field" placeholder="请输入酸碱差值" data-field="Delta_pH" bindinput="onInputDelta_pH" value="{{newData.Delta_pH}}"/>
    </view>

    <!-- 按钮容器 -->
    <view class="button-container">
      <button class="submit-btn" bindtap="onSubmit">确认</button>
      <button class="cancel-btn" bindtap="onCancel">取消</button>
    </view>
  </view>
</view>


<!-- 底部编辑删除弹窗 -->
<view class="modal" wx:if="{{showModal}}">
  <view class="modal-content">
    <view class="modal-item" bindtap="onEdit">编辑</view>
    <view class="modal-item delete" bindtap="onDelete">删除</view>
    <view class="modal-item cancel" bindtap="onCancel">取消</view>
  </view>
</view>