cbsl-app/pages/simpleResviror/aqjc/sljc.vue

<template>
  <view>
    <view class="search-bar">
      <view class="time-ranger">
        <uni-datetime-picker type="daterange" v-model="tm" @change="handleRanger" :clear-icon="false"
          rangeSeparator="至"></uni-datetime-picker>
      </view>
    </view>
    
    <!-- 表格容器 - 统一滚动 -->
    <div class="table-container">
      <!-- 表头 -->
      <div class="tableHead">
        <div class="td fixed-col">序号</div>
        <div class="td fixed-col">监测点</div>
        <div class="td fixed-col time-col">监测时间</div>
        <!-- 动态列 -->
        <div v-for="(col, index) in dynamicColumns" :key="index" class="td dynamic-col">
          {{ col.name }}(L/s)
        </div>
      </div>
      
      <!-- 表体 -->
      <div class="tableBody">
        <div v-for="(item, index) in tableData" :key="index" class="tableRow">
          <div class="td fixed-col">{{ index+1 }}</div>
          <div class="td fixed-col">{{ item.pointName }}</div>
          <div class="td fixed-col time-col">{{ item.monitorTime }}</div>
          <!-- 动态列数据 -->
          <div v-for="(col, colIndex) in dynamicColumns" :key="colIndex" class="td dynamic-col">
            {{ item[col.field] || '--' }}
          </div>
        </div>
        <div :style="{ height: '80px' }"></div>
      </div>
    </div>
  </view>
</template>

<script>
import moment from "moment"
const stm = moment().subtract(3, 'days').format("YYYY-MM-DD");
const etm = moment().format("YYYY-MM-DD");

export default {
  // props: {
  //   tableData: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  data() {
    return {
      tm: [stm, etm],
      // 动态列配置，后端返回的数据格式示例：
      // [
      //   { name: 'we-01', field: 'we01', unit: 'L/s' },
      //   { name: 'we-02', field: 'we02', unit: 'L/s' },
      //   { name: 'we-03', field: 'we03', unit: 'L/s' }
      // ]
      dynamicColumns: [],
    
      tableData:Array(30).fill(0).map(item => ( {pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3}))
    }
  },
  created() {
    // 初始化时获取列配置
    this.fetchColumnConfig()
  },
  methods: {
    handleRanger(e) {
      this.tm = [...e]
      // 时间变化后重新获取数据
      this.fetchData()
    },
    
    // 获取动态列配置
    fetchColumnConfig() {
      // 模拟后端返回的列配置
      // 实际使用时替换为真实接口调用
      // uni.$http.get('/api/columns').then(res => {
      //   this.dynamicColumns = res.data
      // })
      
      // 示例数据
      this.dynamicColumns = [
        { name: 'we-01', field: 'we01', unit: 'L/s' },
        { name: 'we-02', field: 'we02', unit: 'L/s' },
        { name: 'we-03', field: 'we03', unit: 'L/s' },
        { name: 'we-04', field: 'we04', unit: 'L/s' }
      ]
    },
    
    // 获取表格数据
    fetchData() {
      // 实际使用时调用接口
      // uni.$http.get('/api/data', { params: { startTime: this.tm[0], endTime: this.tm[1] }})
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  display: flex;
  margin: 5px 0;
  align-items: center;
}

.time-ranger {
  flex: 1;
}

/* 表格容器 - 统一横向滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.tableHead {
  width: max-content;
  min-width: 100%;
  margin-top: 5px;
  height: 50px;
  background-color: #e4f2fe;
  display: flex;
  color: #208FEE;
}

.tableBody {
  width: max-content;
  min-width: 100%;
  height: calc(80vh - 130px);
  overflow-y: auto;
}

.tableRow {
  width: max-content;
  min-width: 100%;
  height: 46px;
  display: flex;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
}

.td {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* 固定列样式 */
.fixed-col {
  width: 80px;
}

.time-col {
  width: 100px;
}

/* 动态列样式 */
.dynamic-col {
  width: 100px;
}
</style>