bigdata_WX/pages/scd/components/deviceData.vue

<template>
  <view class="device-data-container">
    <!-- 顶部时间戳和图标区域 -->
    <view class="device-data-wraper">
      <view class="top-bar">
        <view class="timestamp">
          {{formatDate(deviceInfo.uptime)}}
          <u-icon name="reload" color="#0bbc58" style="margin-left: 12rpx" @click="refreshData"></u-icon>
        </view>
        <view class="icon-group">
          <!-- <view class="icon-item refresh-icon">
            <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">{{ objItem.ds == '1' ? '开机' : '关机' }}</text>
            <text class="data-label">设备开机</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ objItem.ws }}</text>
            <text class="data-label">工作状态</text>
          </view>
        </view>
      </view>
      <view class="main-data-panel">
        <view class="data-column-left">
          <view class="data-item">
            <text class="data-value">{{ objItem.rps }}</text>
            <text class="data-label">雨控状态</text>
          </view>
          <view class="data-item">
            <text class="data-value">{{ objItem.tps }}</text>
            <text class="data-label">温控状态</text>
          </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" v-if="!show" :key="chartKey">
          <!-- <div id="tempChart" class="chart-canvas"></div> -->
		      <qiun-data-charts type="line" :chartData="chartData" :canvas2d="true" :inScrollView="true" :opts="opts" :ontouch="true" v-show="xData.length"/>
        </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"
              >
                <text class="body-cell fixed">{{ formatTime(item.addtime) }}</text>
              </view>
            </view>
          </view>
          <!-- 可滑动列 -->
          <view class="scrollable-column">
            <view class="scrollable-header">
              <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">灯管状态</text>
              <text class="header-cell">电压状态</text>
              <text class="header-cell">定时状态</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>
            </view>
            <view class="scrollable-body">
              <view
                v-for="(item, index) in historyData"
                :key="index"
                class="scrollable-row"
              >
                <text class="body-cell">{{ item.ds == 1? '打开' : '关闭' }}</text>
                <text class="body-cell">{{ item.ws }}</text>
                <text class="body-cell">{{ item.rps }}</text>
                <text class="body-cell">{{ item.tps }}</text>
                <text class="body-cell">{{ item.dps }}</text>
                <text class="body-cell">{{ item.voltval }}</text>
                <text class="body-cell">{{ item.vps == '0' ? '正常' : '欠压' }}</text>
                <text class="body-cell">{{ item.tt }}</text>
                <text class="body-cell">{{ item.infr_ct }}</text>
                <text class="body-cell">{{ item.at }}</text>
                <text class="body-cell">{{ item.ah }}</text>
                <text class="body-cell">{{ item.cv }}</text>
                <text class="body-cell">{{ item.bv }}</text>
                <text class="body-cell">{{ item.csq }}</text>
                <text class="body-cell">{{ formatTime(item.addtime) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="pagination">
        <text class="pagination-btn prev-btn" @click="prevPage">上一页</text>
        <text class="pagination-info">{{currentPage}}/{{totalPages || 1}}</text>
        <text class="pagination-btn next-btn" @click="nextPage">下一页</text>
      </view>
    </view>
    <u-popup v-model="show" mode="bottom" border-radius="20">
			<view style="height:70vh">
        <view class="tabs-container">
          <view class="tabs-item" @click="switchTab(0)" :class="{ active: activeTab === 0 }" v-if="data_iccid">数据SIM卡流量</view>
          <view class="tabs-item" @click="switchTab(1)" :class="{ active: activeTab === 1 }">图片SIM卡流量</view>
        </view>
        <view class="sim-container" v-if="activeTab === 0">
          <view class="sim-item">
            <text class="sim-label">ICCID：</text>
            <text class="sim-value">{{ deviceInfoStatic.iccid }}</text>
          </view>
           <view class="sim-item">
            <text class="sim-label">总流量：</text>
            <text class="sim-value">{{ deviceInfoStatic.total }}</text>
          </view>
           <view class="sim-item">
            <text class="sim-label">状态：</text>
            <text class="sim-value">{{ deviceInfoStatic.status }}</text>
          </view>
           <view class="sim-item">
            <text class="sim-label">到期时间：</text>
            <text class="sim-value">{{ deviceInfoStatic.expire }}</text>
          </view>
           <view class="sim-item">
            <text class="sim-label">厂商名称：</text>
            <text class="sim-value">{{ deviceInfoStatic.company }}</text>
          </view>
          <view class="sim-item">
            <text class="sim-label">已使用：</text>
            <text class="sim-value"><text style="color: #0bbc58">{{ deviceInfoStatic.used || ''}}</text>/{{ deviceInfoStatic.total || '' }}</text>
          </view>
          <view class="sim-item">
            <text class="sim-value">
              <u-line-progress active-color="#0bbc58" :percent="deviceInfoStatic.used / deviceInfoStatic.total * 100" :show-percent="false"></u-line-progress>
            </text>
          </view>
        </view>
        <view class="sim-container" v-if="activeTab === 1">
          <view class="sim-item" style="display:flex;align-items: center;height:80rpx;">
            <text class="sim-label">ICCID：</text>
            <text v-if="show1" style="margin-right: 10rpx">{{ photo_iccid }}</text>
            <text class="sim-value" style="color: #0bbc58;" @click="changeSim" v-if="show1">
              更换SIM卡
            </text>
            <view v-else class="sim-value-change">
              <u-input v-model="data_iccidInput" placeholder="请输入ICCID" class="sim-value"></u-input>
              <view class="sim-value-button" size="small" @click="changeSimHandler">确认</view>
              <view class="sim-value-button" size="small" @click="show1 = true">取消</view>
            </view>
          </view>
        </view>
      </view>
		</u-popup>
    <floatButton v-if="false">
      <view slot="icon">
        <view class="general-border">
          <image :src="general" class="general-icon"></image>
        </view>
      </view>
      <view slot="expanded">
        <view class="general-images">
          <view class="general-image edit-border" :class="{'edit-border2':isShowPhoto}" @click="editData">
            <image :src="editBorder" class="image-icon"></image>
          </view>
          <view class="general-image sim-border" :class="{'sim-border2':isShowPhoto}" @click="simData">
            <image :src="simBorder" class="image-icon"></image>
          </view>
          <view class="general-image setting-border" :class="{'setting-border2':isShowPhoto}" @click="openSettings">
            <image :src="settingBorder" class="image-icon"></image>
          </view>
          <view class="general-image photo-border" @click="openPhoto" v-if="isShowPhoto">
            <image :src="photoBorder" class="image-icon"></image>
          </view>
        </view>
      </view>
    </floatButton>
  </view>
</template>

<script>
import Circulation from '../../../static/js/equipState_dict.json';
import floatButton from './floating-button.vue';
let chartInstance = null;

export default {
  name: 'DeviceData',
  props:{
    deviceInfo:{
      type:Object,
      default:()=>({}),
    },
    deviceStatic:{
      type:Object,
      default:()=>({}),
    },
    polylineList:{
      type:Array,
      default:()=>[],
    },
    deviceHistoryList:{
      type:Array,
      default:()=>[],
    },
    totalPage:{
      type:Number,
      default:0
    },
    currentPage:{
      type:Number,
      default:0
    },
    page_size:{
      type:Number,
      default:10
    },
  },
  components: {
    floatButton,
  },
  data() {
    return {
      setting:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/setting.png',
      general:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/general.png',
      editBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/editBorder.png',
      settingBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/settingBorder.png',
      simBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/simBorder.png',
      devImage:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cbd.png',
      photoBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/photoBorder.png',
      devImg:'',
      activeTab: 0,
      edit:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/edit.png',
      sim:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/sim.png',
      show:false,
      isShowPhoto:false,
      show1:true,
      equipStateDict:{},
      chartTabs: [
        { name: '温度', id: 'new_tem' },
        { name: '湿度', id: 'new_hum' },
        { name: '充电电压', id: 'cv' },
        { name: '电池电压', id: 'bv' },
        { name: '杀虫数量', id: 'infr_ct' },
      ],
      opts: {
        type: 'line',
        xAxis: {
          disableGrid: true,
          itemCount: 3,
          scrollShow: true
        },
        yAxis: {
          disableGrid: true,
          gridType: 'dash',
          splitNumber: 5,
          min: 0,
          format: (val) => {
            return Math.round(val)
          }
        },
        extra: {
          line: {
            type: 'curve'
          },
          tooltip: {
            format: {
              name: '',
              value: (val) => Math.round(val)
            }
          }
        },
        legend: {
        },
        enableScroll: true
      },
      xData:[],
      yData:[],
      activeChartTab: 0,
      historyData: [],
      data_iccid:'',
      data_iccidInput:'',
      deviceInfoStatic:{},
      photo_iccid:'',
	    chartData: {},
	    chartKey: 0,
	    objItem:{}
    };
  },
  mounted(){
    this.equipStateDict = Circulation
  },
  computed: {
    totalPages(){
      return Math.ceil(this.totalPage / this.page_size)
    },
    formatDevImg() {
      return `https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/${this.devImg}.png`;
    },
  },
  watch:{
    polylineList:{
      handler(newVal, oldVal){
        this.xData = newVal.map(item => this.formatDate(new Date(item.addtime)));
        this.yData = newVal.map(item => Number(item.new_tem) || 0);
        if(this.xData.length){
          this.initChart();
        }
      },
      deep:true,
      immediate:true,
    },
    deviceInfo:{
      handler(newVal, oldVal){
        if (newVal.device_model == '11'){
          this.devImg = 'cbd4.1'
          this.isShowPhoto = true
        } else if(newVal.device_model == '12'){
          this.devImg = 'cbd1'
          this.isShowPhoto = false
        } else if(newVal.device_model == '13'){
          this.devImg = 'cbd5'
          this.isShowPhoto = true
        } else if(newVal.device_model == '14'){
          this.devImg = 'cbd6'
          this.isShowPhoto = true
        } else if(newVal.device_model == '15'){
          this.devImg = 'gkcbd1'
          this.isShowPhoto = false
        } else{
          this.devImg = 'cbd'
          this.isShowPhoto = true
        }
      },
      deep:true,
      immediate:true,
    },
    deviceHistoryList:{
      handler(newVal, oldVal){
        this.historyData = []
        if(newVal.length > 0){
          newVal.forEach(item=>{
            this.historyData.push(item.d_h_t)
          })
          this.objItem = this.historyData[0]
        }else{
          this.objItem = {}
        }
      },
      deep:true,
      immediate:true,
    },
  },
  methods: {
    async openPhoto(){
       const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
        method: 'POST',
        data: {
          device_type_id: this.deviceInfo.type,
          d_id: this.deviceInfo.d_id,
          cmd: 'takephoto',
        },
      });
      if(res){
        this.$u.toast('拍照成功')
      }
    },
    editData(){
      uni.navigateTo({
        url: '/pages/afterSale/addafter?d_id=' + this.deviceInfo.d_id +'&device_id='+this.deviceInfo.id + '&device_type=' + this.deviceInfo.type,
      })
    },
    prevPage(){
      this.$emit('prevPage', this.currentPage)
    },
    nextPage(){
      this.$emit('nextPage', this.currentPage)
    },
    changeSim(){
      this.show1 = false
    },
    changeSimHandler(){
      if(this.data_iccidInput){
        this.changeSimAction(this.data_iccidInput);
      }else{
        this.$u.toast('请输入ICCID')
      }
    },
    switchTab(index){
      this.activeTab = index
    },
    simData(){
      this.show = true
    },
    async changeSimAction(simid){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.device_sim_update',
        method: 'POST',
        data: {
          d_id: this.deviceInfo.d_id,
          simid,
        },
      });
      if(res){
        this.$u.toast('更换成功')
        this.show1 = true
        this.data_iccidInput = ''
        this.getSimNew()
      }
    },
    async getSimNew(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.device_sim_new',
        method: 'POST',
        data: {
          d_id: this.deviceInfo.d_id,
        },
      });
      if(res){
        const data_iccid = res.data_iccid
        this.data_iccid = data_iccid
        this.photo_iccid = res.photo_iccid
        if(data_iccid){
          this.getQueryNew(data_iccid);
        }else{
          this.activeTab = 1
        }
      }
    },
    async getQueryNew(data_iccid){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.sim_query_new',
        method: 'POST',
        data: {
          iccid: data_iccid,
        },
      });
      this.deviceInfoStatic = res
    },
    async refreshData(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.get_device_config',
        method: 'POST',
        data: {
          device_type_id: this.deviceInfo.type,
          d_id: this.deviceInfo.d_id,
          control_type:'data',
          device_model: this.deviceInfo.device_model || 0,
        },
      });
      if(res){
        // 弹出提示
        this.$u.toast('刷新成功')
      }
    },
    getStateDict(item){
      return item.ws == 0 ? '待机' : this.equipStateDict.lamp.value[item.lamp]
    },
    getRpsDict(item){
      return this.equipStateDict.rps.value[item.rps]
    },
    getTpsDict(item){
      return this.equipStateDict.tps.value[item.tps]
    },
    getLpsDict(item){
      return this.equipStateDict.lps.value[item.lps]
    },
    openSettings(){
      uni.navigateTo({
        url: '/pages/scd/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id,
      });
    },
    initChart() {
      this.$nextTick(() => {
        this.updateChartsData();
      });
    },
    // 格式化时间
    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);
	  
      if(!chartInstance){
        return 
      }
      
      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 === 'cv') {
        this.yData = this.polylineList.map(item => Number(item.others.cv) || 0);
      } else if (this.chartTabs[index].id === 'bv') {
        this.yData = this.polylineList.map(item => Number(item.others.bv) || 0);
      } else if (this.chartTabs[index].id === 'infr_ct') {
        this.yData = this.polylineList.map(item => Number(item.others.infr_ct) || 0);
      }
      this.$nextTick(() => {
        // this.drawChart();
		    this.updateChartsData();
      });
    },
    updateChartsData(){
      const categories = this.xData.length ? this.xData : [];
      const lineData = {
        categories,
        series: [
          {
            name: this.chartTabs[this.activeChartTab].name,
            data: this.yData
          }
        ]
      };
      
      this.chartData = lineData;
    }
  }
};
</script>

<style lang="scss" scoped>
.device-data-container {
  width: 100%;
}
.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: 10rpx;
    .icon-item {
      width: 56rpx;
      height: 56rpx;
      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;
      }
    }
  }
}
.sim-container{
  padding: 0 20rpx;
  .sim-item{
    margin-bottom: 20rpx;
    .sim-value-change{
      display: flex;
      align-items: center;
      .sim-value-button{
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-family: 'Source Han Sans CN VF', sans-serif;
        font-weight: 400;
        color: #042118;
        background: #0bbc58;
        color: #ffffff;
        margin-left: 20rpx;
      }
    }
  }
}

.general-border{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  .general-icon{
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }
}
.general-images{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .general-image{
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display:flex;
    align-items: center;
    justify-content: center;
    .image-icon{
      width: 45rpx;
      height: 45rpx;
    }
  }
  .edit-border{
    top: 45rpx;
    left: -110rpx;
  }
  .sim-border{
    top: -125rpx;
    left: -110rpx;
  }
  .setting-border{
    top: -40rpx;
    left: -180rpx;
  }
  .edit-border2{
    top: 60rpx;
    left: -70rpx;
  }
  .sim-border2{
    top: -75rpx;
    left: -150rpx;
  }
  .setting-border2{
    top: 20rpx;
    left: -150rpx;
  }
  .photo-border{
    top: -135rpx;
    left: -70rpx;
  }
}
/* 主要数据面板 */
.main-data-panel {
  display: flex;
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 16rpx;

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

    .data-item {
      display: flex;
      flex: 1;
      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;
        }
      }
    }
  }
}
.tabs-container{
  display:flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  .tabs-item{
    font-size: 28rpx;
    font-family: 'Source Han Sans CN VF', sans-serif;
    font-weight: 500;
    color: #999999;
  }
  .tabs-item.active{
    color: #0bbc58;
  }
}
/* 图表区域 */
.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: 48rpx;
      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: 400rpx;

      .chart-canvas {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.copy-icon{
  width: 40rpx;
  height: 40rpx;
}
/* 历史数据表格 */
.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: 240rpx;
        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;
            .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;
            margin-right: 10rpx;
          }
        }

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

            .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;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }

  .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>