bigdata_WX/pages/cbd/components/deviceData.vue

<template>
  <view class="device-data-container">
    <!-- 顶部时间戳和图标区域 -->
    <view class="device-data-wraper">
      <view class="top-bar">
        <text class="timestamp">2025-12-28 08:00:00
          <u-icon name="reload" color="#0BBC58" style="margin-left: 12rpx"></u-icon>
        </text>
        <view class="icon-group">
          <view class="icon-item refresh-icon" @click="refreshData">
            <text class="iconfont">&#xe6aa;</text>
          </view>
          <view class="icon-item settings-icon" @click="openSettings">
            <text class="iconfont">&#xe634;</text>
          </view>
          <view class="icon-item info-icon">
            <text class="iconfont">&#xe604;</text>
          </view>
        </view>
      </view>

      <!-- 主要数据面板 -->
      <view class="main-data-panel">
        <view class="data-column-left">
          <view class="data-item">
            <text class="data-value">84%</text>
            <text class="data-label">电量</text>
          </view>
          <view class="data-item">
            <text class="data-value">时控</text>
            <text class="data-label">电压</text>
          </view>
          <view class="data-item">
            <text class="data-value temp-value">25°C</text>
            <text class="data-label">环境湿度</text>
          </view>
          <view class="data-item">
            <text class="data-value">70min</text>
            <text class="data-label">数据上传间隔</text>
          </view>
        </view>
        <view class="data-column-left">
          <view class="data-item">
            <text class="data-value">时控</text>
            <text class="data-label">定时模式</text>
          </view>
          <view class="data-item">
            <text class="data-value">220V</text>
            <text class="data-label">信号强度</text>
          </view>
          <view class="data-item">
            <text class="data-value">70%RH</text>
            <text class="data-label">环境湿度</text>
          </view>
          <view class="data-item">
            <text class="data-value">1.54.40(2000W)-2.11.1</text>
            <text class="data-label">设备版本</text>
          </view>
        </view>
        <view class="data-column-right">
          <view class="device-image-container">
            <view class="device-glow"></view>
            <image class="device-image" src="../assets/online.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 图表区域 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-tabs">
          <view
            v-for="(tab, index) in chartTabs"
            :key="index"
            class="chart-tab-item"
            :class="{ active: activeChartTab === index }"
            @click="switchChartTab(index)"
          >
            {{ tab.name }}
          </view>
        </view>
        <view class="chart-dropdown">
          <text class="iconfont dropdown-icon">&#xe606;</text>
        </view>
      </view>
      <view class="chart-content">
        <view class="chart-canvas-container">
          <canvas
            canvas-id="tempChart"
            id="tempChart"
            class="chart-canvas"
            @touchstart="chartTouchStart"
            @touchmove="chartTouchMove"
            @touchend="chartTouchEnd"
          />
        </view>
      </view>
    </view>

    <!-- 历史数据表格 -->
    <view class="history-section">
      <view class="history-header">
        <text class="history-title">历史数据</text>
      </view>
      <view class="history-table">
        <view class="table-container">
          <!-- 固定列 -->
          <view class="fixed-column">
            <view class="fixed-header">
              <text class="header-cell fixed">上报时间</text>
            </view>
            <view class="fixed-body">
              <view
                v-for="(item, index) in historyData"
                :key="index"
                class="fixed-row"
                :class="{ even: index % 2 === 0 }"
              >
                <text class="body-cell fixed">{{ item.time }}</text>
              </view>
            </view>
          </view>
          <!-- 可滑动列 -->
          <view class="scrollable-column">
            <view class="scrollable-header">
              <text class="header-cell">环境温度(°C)</text>
              <text class="header-cell">环境湿度(%)</text>
              <text class="header-cell">环境湿度(%)</text>
              <text class="header-cell">环境湿度(%)</text>
              <text class="header-cell">环境湿度(%)</text>
              <text class="header-cell">环境湿度(%)</text>
            </view>
            <view class="scrollable-body">
              <view
                v-for="(item, index) in historyData"
                :key="index"
                class="scrollable-row"
                :class="{ even: index % 2 === 0 }"
              >
                <text class="body-cell">{{ item.temp }}</text>
                <text class="body-cell">{{ item.humidity }}</text>
                <text class="body-cell">{{ item.humidity }}</text>
                <text class="body-cell">{{ item.humidity }}</text>
                <text class="body-cell">{{ item.humidity }}</text>
                <text class="body-cell">{{ item.humidity }}</text>
                <text class="body-cell">{{ item.humidity }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="pagination">
        <text class="pagination-btn prev-btn">上一页</text>
        <text class="pagination-info">1/6</text>
        <text class="pagination-btn next-btn">下一页</text>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from '@/components/js_sdk/u-charts/u-charts/u-charts.js';

let chartInstance = null;

export default {
  name: 'DeviceData',
  data() {
    return {
      chartTabs: [
        { name: '温度', id: 'temp' },
        { name: '湿度', id: 'humidity' },
        { name: '加热仓温度', id: 'heatingTemp' },
        { name: '雨量累计', id: 'rainfall' }
      ],
      activeChartTab: 0,
      chartData: {
        categories: ['05-29/00:00', '05-29/00:00', '05-29/00:00', '05-29/00:00', '05-29/00:00', '05-29/00:00'],
        series: [
          {
            name: '大气温度',
            data: [2, 4, 6, 8, 10, 8]
          }
        ]
      },
      cWidth: 320,
      cHeight: 180,
      historyData: [
        { time: '2025-12-28 08:00', temp: '25', humidity: '70' },
        { time: '2025-12-28 07:00', temp: '24', humidity: '68' },
        { time: '2025-12-28 06:00', temp: '23', humidity: '65' },
        { time: '2025-12-28 05:00', temp: '22', humidity: '63' },
        { time: '2025-12-28 04:00', temp: '21', humidity: '60' },
        { time: '2025-12-28 03:00', temp: '20', humidity: '58' },
        { time: '2025-12-28 02:00', temp: '19', humidity: '55' }
      ],
      currentPage: 1,
      totalPages: 6
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    openSettings(){
      this.$router.push({
        path: '/pages/cbd/deviceControl',
        query: {
          deviceId: this.deviceId
        }
      });
    },
    initChart() {
      this.cWidth = uni.upx2px(640);
      this.cHeight = uni.upx2px(360);
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    drawChart() {
      const ctx = uni.createCanvasContext('tempChart', this);

      chartInstance = new uCharts({
        type: 'area',
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: this.chartData.categories,
        series: this.chartData.series,
        animation: true,
        background: '#FFFFFF',
        color: ['#0BBC58'],
        padding: [20, 10, 10, 0],
        dataLabel: false,
        dataPointShape: true,
        enableScroll: false,
        legend: {
          show: false
        },
        xAxis: {
          disableGrid: true,
          boundaryGap: 'center',
          fontSize: 10,
          fontColor: '#999999',
          scrollShow: false
        },
        yAxis: {
          gridType: 'dash',
          splitNumber: 4,
          min: 0,
          max: 12,
          fontSize: 10,
          fontColor: '#999999'
        },
        extra: {
          area: {
            type: 'curve',
            width: 2,
            addLine: true,
            gradient: true,
            activeType: 'hollow',
            linearType: 'custom',
            shadowColor: 'rgba(11, 188, 88, 0.3)',
            tension: 0.4
          }
        }
      });
    },
    switchChartTab(index) {
      this.activeChartTab = index;
      // 根据不同标签切换数据
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    chartTouchStart(e) {
      if (chartInstance) {
        chartInstance.scrollStart(e);
      }
    },
    chartTouchMove(e) {
      if (chartInstance) {
        chartInstance.scroll(e);
      }
    },
    chartTouchEnd(e) {
      if (chartInstance) {
        chartInstance.scrollEnd(e);
        chartInstance.showToolTip(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.device-data-container {
  width: 100%;
  min-height: 100vh;
}
.device-data-wraper{
  padding: 16rpx;
  background: #ffffff;
  border-radius: 16rpx;
}
/* 顶部时间戳和图标区域 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  .timestamp {
    font-size: 28rpx;
    font-family: 'Source Han Sans CN VF', sans-serif;
    font-weight: 400;
    color: #999999;
  }

  .icon-group {
    display: flex;
    gap: 24rpx;

    .icon-item {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      .iconfont {
        font-size: 36rpx;
      }

      &.refresh-icon .iconfont {
        color: #0BBC58;
      }

      &.settings-icon .iconfont {
        color: #999999;
      }

      &.info-icon .iconfont {
        color: #999999;
      }
    }
  }
}

/* 主要数据面板 */
.main-data-panel {
  display: flex;
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 16rpx;

  .data-column-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    .data-item {
      display: flex;
      flex-direction: column;
      gap: 8rpx;

      .data-label {
        font-size: 24rpx;
        font-family: 'Source Han Sans CN VF', sans-serif;
        font-weight: 400;
        color: #999999;
      }

      .data-value {
        font-size: 24rpx;
        font-family: 'Source Han Sans CN VF', sans-serif;
        font-weight: 700;
        color: #042118;

        &.temp-value {
          color: #FF6B6B;
        }
      }

      .data-unit {
        font-size: 24rpx;
        font-family: 'Source Han Sans CN VF', sans-serif;
        font-weight: 400;
        color: #999999;
      }
    }
  }

  .data-column-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;

    .device-image-container {
      position: relative;
      width: 200rpx;
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .device-glow {
        position: absolute;
        width: 180rpx;
        height: 180rpx;
        background: radial-gradient(circle, rgba(11, 188, 88, 0.3) 0%, rgba(11, 188, 88, 0) 70%);
        border-radius: 50%;
      }

      .device-image {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        z-index: 1;
      }
    }

    .device-info {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      width: 100%;

      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info-label {
          font-size: 24rpx;
          font-family: 'Source Han Sans CN VF', sans-serif;
          font-weight: 400;
          color: #999999;
        }

        .info-value {
          font-size: 36rpx;
          font-family: 'Source Han Sans CN VF', sans-serif;
          font-weight: 700;
          color: #042118;
        }

        .info-version {
          font-size: 24rpx;
          font-family: 'Source Han Sans CN VF', sans-serif;
          font-weight: 400;
          color: #999999;
        }

        .info-label-small {
          font-size: 24rpx;
          font-family: 'Source Han Sans CN VF', sans-serif;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}

/* 图表区域 */
.chart-section {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx 32rpx 32rpx;
  margin: 24rpx 0;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .chart-tabs {
      display: flex;
      gap: 32rpx;
      overflow-x: auto;
      white-space: nowrap;

      .chart-tab-item {
        font-size: 28rpx;
        font-family: 'Source Han Sans CN VF', sans-serif;
        font-weight: 500;
        color: #999999;
        position: relative;
        padding-bottom: 8rpx;
        transition: all 0.3s;

        &.active {
          color: #0BBC58;
          font-weight: 700;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4rpx;
            background: #0BBC58;
            border-radius: 2rpx;
          }
        }
      }
    }

    .chart-dropdown {
      .dropdown-icon {
        font-size: 28rpx;
        color: #999999;
      }
    }
  }

  .chart-content {
    .chart-legend {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .legend-item {
        display: flex;
        align-items: center;
        gap: 8rpx;

        .legend-dot {
          width: 16rpx;
          height: 16rpx;
          background: #0BBC58;
          border-radius: 50%;
        }

        .legend-text {
          font-size: 24rpx;
          font-family: 'Source Han Sans CN VF', sans-serif;
          font-weight: 400;
          color: #042118;
        }
      }

      .legend-average {
        .average-text {
          font-size: 24rpx;
          font-family: 'Source Han Sans CN VF', sans-serif;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    .chart-canvas-container {
      width: 100%;
      height: 360rpx;

      .chart-canvas {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* 历史数据表格 */
.history-section {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx 32rpx 32rpx;

  .history-header {
    margin-bottom: 24rpx;

    .history-title {
      font-size: 32rpx;
      font-family: 'Source Han Sans CN VF', sans-serif;
      font-weight: 700;
      color: #042118;
    }
  }

  .history-table {
    margin-bottom: 24rpx;

    .table-container {
      display: flex;
      position: relative;

      /* 固定列 */
      .fixed-column {
        width: 180rpx;
        position: relative;
        z-index: 2;
        background: #FFFFFF;

        .fixed-header {
          border-bottom: 2rpx solid #F0F0F0;
          padding: 16rpx 0;

          .header-cell.fixed {
            font-size: 24rpx;
            font-family: 'Source Han Sans CN VF', sans-serif;
            font-weight: 500;
            color: #666666;
            text-align: left;
            padding-left: 0;
          }
        }

        .fixed-body {
          .fixed-row {
            padding: 16rpx 0;
            border-bottom: 1rpx solid #F5F5F5;
            height: 80rpx;
            display: flex;
            align-items: center;

            &.even {
              background: #FAFAFA;
            }

            .body-cell.fixed {
              font-size: 24rpx;
              font-family: 'Source Han Sans CN VF', sans-serif;
              font-weight: 400;
              color: #042118;
              text-align: left;
              padding-left: 0;
            }
          }
        }
      }

      /* 可滑动列 */
      .scrollable-column {
        flex: 1;
        overflow-x: auto;
        white-space: nowrap;

        /* 隐藏滚动条 */
        &::-webkit-scrollbar {
          display: none;
        }
        scrollbar-width: none;

        .scrollable-header {
          display: flex;
          border-bottom: 2rpx solid #F0F0F0;
          padding: 20rpx 0;

          .header-cell {
            min-width: 140rpx;
            font-size: 24rpx;
            font-family: 'Source Han Sans CN VF', sans-serif;
            font-weight: 500;
            color: #666666;
            text-align: center;
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .scrollable-body {
          .scrollable-row {
            display: flex;
            padding: 16rpx 0;
            border-bottom: 1rpx solid #F5F5F5;
            height: 80rpx;
            align-items: center;

            &.even {
              background: #FAFAFA;
            }

            .body-cell {
              min-width: 120rpx;
              font-size: 24rpx;
              font-family: 'Source Han Sans CN VF', sans-serif;
              font-weight: 400;
              color: #042118;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .pagination-btn {
      font-size: 24rpx;
      font-family: 'Source Han Sans CN VF', sans-serif;
      font-weight: 400;
      padding: 6rpx 18rpx;
      border-radius: 8rpx;
      transition: all 0.3s;

      &.prev-btn {
        color: #656565;
        border: 1px solid #E4E7ED;
      }

      &.next-btn {
        color: #0BBC58;
        border: 1px solid #0BBC58;
      }
    }

    .pagination-info {
      font-size: 28rpx;
      font-family: 'Source Han Sans CN VF', sans-serif;
      font-weight: 400;
      color: #999999;
    }
  }
}
</style>