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">
          {{formatDate(deviceInfo.uptime)}}
          <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">
            <img class="copy-icon" :src="sim"/>
          </view>
          <view class="icon-item settings-icon" @click="openSettings">
            <img class="copy-icon" :src="setting"/>
          </view>
          <view class="icon-item info-icon">
            <img class="copy-icon" :src="edit"/>
          </view>
        </view>
      </view>

      <!-- 主要数据面板 -->
      <view class="main-data-panel">
        <view class="data-column-left">
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.vol }}</text>
            <text class="data-label">电量</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.gs == 1? '落虫' : '排水' }}</text>
            <text class="data-label">通道状态</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.upds == 1? '打开' : '关闭' }}</text>
            <text class="data-label">上仓门</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.dver }}</text>
            <text class="data-label">设备版本</text>
          </view>
        </view>
        <view class="data-column-left">
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.tmod == '1' ? '时控' : '光控' }}</text>
            <text class="data-label">定时模式</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.hs == '1' ? '加热' : '正常' }}</text>
            <text class="data-label">加热状态</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.dpds == '1' ? '打开' : '关闭' }}</text>
            <text class="data-label">下仓门</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ deviceStatic.tph }}</text>
            <text class="data-label">高温限值</text>
          </view>
        </view>
        <view class="data-column-right">
          <view class="device-image-container">
            <image class="device-image" src="../assets/cbd.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">
          <div id="tempChart" class="chart-canvas"></div>
        </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">{{ formatTime(item.addtime) }}</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">加热仓温度(°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>
              <text class="header-cell">电流(mA)</text>
              <text class="header-cell">电压(V)</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.at }}</text>
                <text class="body-cell">{{ item.ah }}</text>
                <text class="body-cell">{{ item.hrt }}</text>
                <text class="body-cell">{{ item.rps }}</text>
                <text class="body-cell">{{ item.tps }}</text>
                <text class="body-cell">{{ item.lps }}</text>
                <text class="body-cell">{{ item.blbs }}</text>
                <text class="body-cell">{{ item.csq }}</text>
                <text class="body-cell">{{ item.current }}</text>
                <text class="body-cell">{{ item.vbat }}</text>
                <text class="body-cell">{{ item.lng }}</text>
                <text class="body-cell">{{ item.lat }}</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 * as echarts from 'echarts';
import setting from '../assets/setting.png';
import edit from '../assets/edit.png';
import sim from '../assets/sim.png';
let chartInstance = null;

export default {
  name: 'DeviceData',
  props:{
    deviceInfo:{
      type:Object,
      default:()=>({}),
    },
    deviceStatic:{
      type:Object,
      default:()=>({}),
    },
    polylineList:{
      type:Array,
      default:()=>[],
    },
    deviceHistoryList:{
      type:Array,
      default:()=>[],
    },
  },
  data() {
    return {
      setting,
      edit,
      sim,
      chartTabs: [
        { name: '温度', id: 'new_tem' },
        { name: '湿度', id: 'new_hum' },
        { name: '加热仓温度', id: 'others' },
      ],
      xData:[],
      yData:[],
      activeChartTab: 0,
      historyData: [],
      currentPage: 1,
      totalPages: 6
    };
  },
  watch:{
    polylineList:{
      handler(newVal, oldVal){
        if(newVal.length > 0){
          this.xData = newVal.map(item => this.formatDate(new Date(item.addtime)));
          this.yData = newVal.map(item => Number(item.new_tem) || 0);
          this.initChart();
        }
      },
      deep:true,
      immediate:true,
    },
    deviceHistoryList:{
      handler(newVal, oldVal){
        console.log(newVal,'newValnewVal')
        this.historyData = []
        if(newVal.length > 0){
          newVal.forEach(item=>{
            this.historyData.push(item.d_h_t)
          })
        }
      },
      deep:true,
      immediate:true,
    }
  },
  methods: {
    openSettings(){
      this.$router.push({
        path: '/pages/cbd/deviceControl',
        query: {
          deviceId: this.deviceId
        }
      });
    },
    initChart() {
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    // 格式化时间
    formatDate(dateString) {
      const date = new Date(dateString*1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    formatTime(dateString) {
      const date = new Date(dateString*1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      const second = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    drawChart() {
      // 销毁已有的图表实例
      if (chartInstance) {
        chartInstance.dispose();
      }
      
      // 初始化图表
      const chartDom = document.getElementById('tempChart');
      if (!chartDom) return;
      
      chartInstance = echarts.init(chartDom);
      
      const option = {
        backgroundColor: '#FFFFFF',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: '#CCCCCC'
            }
          },
          axisLabel: {
            fontSize: 10,
            color: '#999999'
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 4,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#CCCCCC'
            }
          },
          axisLabel: {
            fontSize: 10,
            color: '#999999'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5E5E5',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: this.chartTabs[this.activeChartTab].name,
            type: 'line',
            smooth: true,
            data: this.yData,
            lineStyle: {
              color: '#0BBC58',
              width: 2
            },
            itemStyle: {
              color: '#0BBC58',
              borderColor: '#0BBC58',
              borderWidth: 2
            },
            symbol: 'circle',
            symbolSize: 6,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(11, 188, 88, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(11, 188, 88, 0)'
                }
              ])
            }
          }
        ]
      };
      
      chartInstance.setOption(option);
      
      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', () => {
        chartInstance.resize();
      });
    },
    switchChartTab(index) {
      this.activeChartTab = index;
      // 根据不同标签切换数据
      if (this.chartTabs[index].id === 'new_tem') {
        this.yData = this.polylineList.map(item => Number(item.new_tem) || 0);
      } else if (this.chartTabs[index].id === 'new_hum') {
        this.yData = this.polylineList.map(item => Number(item.new_hum) || 0);
      } else if (this.chartTabs[index].id === 'others') {
        this.yData = this.polylineList.map(item => Number(item.others) || 0);
      }
      this.$nextTick(() => {
        this.drawChart();
      });
    }
  }
};
</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: 260rpx;
        height: 360rpx;
        z-index: 1;
        top: 60rpx;
      }
    }

    .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%;
      }
    }
  }
}
.copy-icon{
  width: 28rpx;
  height: 28rpx;
}
/* 历史数据表格 */
.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: 140rpx;
              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>