bigdata_WX/pages/bzy2/detail.vue

<template>
  <view class="device-detail">
    <view class="device-detail__header">
      <u-icon
        size="36"
        class="arrow-left"
        name="arrow-left"
        @click="handleBack"
      ></u-icon>
      {{ deviceInfo.name }}
    </view>
    <view class="operation" @click.stop="isShowOperation = !isShowOperation">操作</view>
    <view class="operation-container" v-if="isShowOperation" @click="closeOperationHandler">
      <view class="operation-background"></view>
      <view class="operation-content">
        <view class="operation-item" v-if="isShowPhoto" @click="handlePhotoClick">
          <image :src="photoIcon" class="operation-icon"></image>
          拍照
        </view>
        <!-- <view class="operation-item" @click="handleServiceClick">
          <image :src="serviceIcon" class="operation-icon"></image>
          维修
        </view> -->
        <view class="operation-item" @click="handleSettingClick">
          <image :src="settingIcon" class="operation-icon"></image>
          设置
        </view>
        <view class="operation-item" @click="handleSimClick">
          <image :src="simIcon" class="operation-icon"></image>
          SIM卡
        </view>
        <view class="operation-item" @click="modification">
          <image :src="editIcon" class="operation-icon"></image>
          修改
        </view>
      </view>
    </view>
    <view class="device-detail__body">
      <DeviceCard
        :dataSource="deviceInfo"
        :collectTime="time"
        :title="deviceInfo.name"
        :deviceType="deviceType"
      />
      <view class="tabs">
        <view class="tab-container" v-if="isShowTab">
          <view class="tab-item" :class="activeTab === 'viewImage'?'active':''" @click="handleTabClick('viewImage')">
            查看图片
          </view>
          <view class="tab-item" :class="activeTab === 'pestAnalysis'?'active':''" @click="handleTabClick('pestAnalysis')">
            孢子分析
          </view>
          <view class="tab-item" :class="activeTab === 'deviceData'?'active':''" @click="handleTabClick('deviceData')">
            设备数据
          </view>
        </view>
        <view class="select-timer-container">
          <view class="select-year">
            <view class="select-year-item" @click="showPicker = true">
              {{ currentYear }}
              <u-icon name="arrow-down" size="18" class="arrow-down"></u-icon>
            </view>
          </view>
          <view class="tabs-timer-container" @click="showCalendar">
            <view class="tabs-timer-item">
              {{startDate}}
            </view>
            至
            <view class="tabs-timer-item">
              {{endDate}}
            </view>
            <u-icon name="calendar" size="36" class="calendar-icon"></u-icon>
          </view>
        </view>
      </view>
      <view v-show="activeTab === 'viewImage'">
        <!-- 孢子仪2.1（device_code=1）：文件夹列表，file_fold 作为名称 -->
        <view class="tabs-fold" v-if="isSporeTwo && folderList.length">
          <view
            class="tabs-fold-item"
            :class="{ active: index === folderIndex }"
            v-for="(item, index) in folderList"
            :key="index"
            @click="handleFolderSelect(index)"
          >
            <image src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/file.png" class="tabs-fold-icon" />
            <view>{{ formatFold(item.file_fold) }}</view>
          </view>
        </view>
        <photoImage
          :images="imageList"
          :pestList="pestList"
          :disableShow="disableShow"
          @changeTab="changeTab"
          :currentYear="currentYear"
          :deviceInfo="deviceInfo"
          :sporeTwo="isSporeTwo"
          :folderId="folderList[folderIndex] ? folderList[folderIndex].id : ''"
        />
      </view>
      <view v-show="activeTab === 'deviceData'">
        <DeviceData
          :deviceStatic="deviceStatic"
          :deviceInfo="deviceInfo"
          :polylineList="polylineList"
          :deviceHistoryList="deviceHistoryList"
          :totalPage="totalPage"
          :currentPage="page"
          :page_size="page_size"
          @prevPage="prevPage"
          @nextPage="nextPage"
        />
      </view>
      <view v-show="activeTab === 'pestAnalysis'" class="spore-analysis">
        <!-- 孢子识别 -->
        <view class="analysis-card">
          <view class="card-title">孢子识别</view>
          <view class="pest-rank">
            <view class="pest-rank__item" v-for="(item, index) in pestRankList" :key="index">
              <text class="pest-rank__name">{{ item.name }}</text>
              <view class="pest-rank__track">
                <view class="pest-rank__fill" :style="{ width: rankPercent(item) + '%', background: rankColors[index % rankColors.length] }"></view>
              </view>
              <text class="pest-rank__count">{{ item.count }}</text>
            </view>
          </view>
        </view>
        <!-- 孢子趋势 -->
        <view class="analysis-card">
          <view class="card-title">孢子趋势</view>
          <view class="chart-wrap--spore">
            <qiun-data-charts
              type="mix"
              :chartData="sporeChart"
              :opts="sporeOpts"
              :reshow="activeTab === 'pestAnalysis'"
              :canvas2d="true"
              :inScrollView="true"
              :ontouch="true"
            />
          </view>
        </view>
      </view>
    </view>
    <u-calendar v-model="show" :mode="mode" range-color="#999" btn-type="success" active-bg-color="#0bbc58" range-bg-color="rgba(11,188,88,0.13)" @change="handleChange" :max-date="maxDate" :min-date="minDate"></u-calendar>
    <u-picker v-model="showPicker" mode="selector" :range="selectorRange" range-key="id" :default-selector="[0]" @confirm="confirmHandler"></u-picker>
  </view>
</template>
<script>
import DeviceCard from './components/DeviceCard.vue';
import PestDiscern from './components/pestDiscern.vue';
import PestEchart from './components/pestEchart.vue';
import PestArchive from './components/pestArchive.vue';
import photoImage from './components/photoImage.vue';
import photoImage2 from './components/photoImage2.vue';
import DeviceData from './components/deviceData.vue';

export default {
  components: {
    DeviceCard,
    PestDiscern,
    PestEchart,
    PestArchive,
    photoImage,
    photoImage2,
    DeviceData,
  },
  data(){
    return {
      isShowTab:false,
      showPicker: false,
      disableShow: false,
      isShowOperation: false,
      photoIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/photoIcon.png',
      editIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/editIcon.png',
      serviceIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/serviceIcon.png',
      simIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/simIcon.png',
      settingIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/settingIcon.png',
      totalPage:0,
      currentYear: new Date().getFullYear(),
      selectorRange: [],
      maxDate: this.formatDate(new Date()),
      minDate: this.formatDate(new Date(new Date().getFullYear(), 0, 1)),
      show: false,
      showSim: false,
      // 当前日期向前推30天 格式2026-01-01 月份和日期小于10的时候前面加个0
      startDate: this.formatDate(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)),
      endDate: this.formatDate(new Date()),
      mode: 'range',
      imageList: [],
      pest_order:{},
      deviceInfo: {},
      pestInfo: {},
      time: '',
      activeTab: 'viewImage',
      deviceType: '',
      location: '',
      total: 0,
      day: [],
      pest: [],
      page:1,
      is_pest:'',
      page_size:24,
      pestList:[],
      pest_names:'',
      pests:[],
      // 孢子分析
      rankColors: ['#4FD8E0', '#FF7A45', '#5AD8A6', '#FFC53D', '#F8E71C', '#5B8FF9', '#E8684A', '#6DC8EC', '#FF9DC6', '#7EDB8F'],
      pestRankList: [],
      // 各物种每日数量/浓度（char_data）
      sporeCharData: {},
      sporeOpts: {
        dataPointShape: true,
        // 图例置顶，点击可隐藏/显示对应线（同 PC 图例交互）
        legend: {
          show: true,
          fontSize: 10,
          itemGap: 12
        },
        xAxis: {
          disableGrid: false,
          gridType: 'dash',
          gridColor: '#EEEEEE',
          fontSize: 10,
          fontColor: '#666666',
          itemCount: 4,
          scrollShow: true
        },
        // 双 Y 轴：左轴虫数，右轴浓度
        yAxis: {
          showTitle: true,
          disableGrid: false,
          gridType: 'dash',
          gridColor: '#EEEEEE',
          data: [
            {
              title: '虫数:头',
              titleFontSize: 10,
              titleFontColor: '#666666',
              position: 'left',
              min: 0,
              splitNumber: 4,
              formatter: val => Math.round(val) + ''
            },
            {
              title: '浓度:个/L',
              titleFontSize: 10,
              titleFontColor: '#666666',
              position: 'right',
              min: 0,
              splitNumber: 4,
              formatter: val => Number(val).toFixed(4)
            }
          ]
        },
        extra: {
          mix: {
            line: { width: 2 }
          },
          tooltip: { showBox: true }
        },
        enableScroll: true
      },
      polylineList:[],
      isShowPhoto:false,
      deviceHistoryList:[],
      deviceStatic:{},
      // 孢子仪2.1 文件夹列表
      folderList: [],
      folderIndex: 0,
      // 设备代号：1=孢子仪2.1，其他=2.0（走原接口）
      deviceCode: ''
    }
  },
  computed: {
    // 孢子仪2.1
    isSporeTwo() {
      return this.deviceCode == 1;
    }
  },
  onLoad(options){
    this.deviceInfo = JSON.parse(options.info);
    console.log(this.deviceInfo,'deviceInfod2eviceInfo')
    // 列表跳转时带过来的设备代号：1=孢子仪2.1
    this.deviceCode = options.device_code || this.deviceInfo.device_code || '';
    // 诊断：确认列表带过来的 device_code 是否有值
    console.log('[bzy2] device_code =', options.device_code, ', deviceInfo =', JSON.stringify(this.deviceInfo));
    // 延迟初始化：等布局稳定后再测 canvas 尺寸
    setTimeout(() => {
      this.getSporeAnalysis();
    }, 300);
    // this.getPestAnalysis();
    this.isShow();
    const currentYear = new Date().getFullYear();
    this.selectorRange = [];
    for(let i = 0;i<50;i++){
      const item = {
        label: currentYear - i,
        id: currentYear - i
      }
      this.selectorRange.push(item);
    }
  },
  methods: {
    handleSimClick(){
      // this.showSim = true;
      //`/pages/deviceDetails/weatherStation/${type}?deviceInfo=${encodeURIComponent(JSON.stringify(this.deviceInfo))}`
      uni.navigateTo({
        url:
          '/pages/deviceDetails/weatherStation/simDetail?deviceInfo=' +
          encodeURIComponent(JSON.stringify(this.deviceInfo))
      }); 
    },
		modification() {
      uni.navigateTo({
        url:
          '/pages/equipList2/seabox/modification?data=' +
          JSON.stringify(this.deviceInfo) +
          '&id=' +
          this.deviceInfo.type,
      }); 
    },
    async handlePhotoClick(){
       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('拍照成功')
      }
    },
    handleServiceClick(){
      uni.navigateTo({
        url: '/pages/afterSale/addafter?d_id=' + this.deviceInfo.d_id +'&device_id='+this.deviceInfo.id + '&device_type=' + this.deviceInfo.type,
      })
    },
    handleSettingClick(){
      uni.navigateTo({
        url: '/pages/bzy/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id + '&device_model=' + this.deviceInfo.device_model,
      });
    },
    closeOperationHandler(){
      this.isShowOperation = false;
    },
    isShow(){
      // disable == 0 或者 device_model == 15 表示不可以查看
      if(!this.deviceInfo.d_id){
        return false;
      }
      let showStatus = true;
      if(this.deviceInfo.device_model == 15 || this.deviceInfo.device_model == 12){
        showStatus = false;
      }
      if(showStatus){
        this.activeTab = 'viewImage';
      }else{
        this.activeTab = 'deviceData';
      }
      this.initAction();
      this.isShowTab = showStatus;
      if(this.deviceInfo.disable == 0){
        this.disableShow = false;
        if(showStatus){
          this.activeTab = 'viewImage';
          this.handleTabClick('viewImage');
        }
      }else{
        this.disableShow = true;
      }
    },
    prevPage(e){
      if(e == 1){
        return
      }
      this.page = e-=1;
      this.getDeviceHistoryData();
    },
    nextPage(e){
      if(e * this.page_size >= this.totalPage){
        return
      }
      this.page = e+=1;
      this.getDeviceHistoryData();
    },
    changeTab(pestList){
      let pest_names = pestList.map(item => item.pest_name);
      this.pest_names = pest_names.join(',');
      this.initImageList();
    },
    confirmHandler(e){
      this.currentYear = this.selectorRange[e].id;
      if(this.currentYear == new Date().getFullYear()){
        // 结束日期为this.endDate的月份和日期加上选择的年份
        const timeDate = this.currentYear + '-' + this.endDate.split('-')[1] + '-' + this.endDate.split('-')[2];
        this.endDate = this.formatDate(new Date(timeDate));
        // 开始日期为结束日期前30天
        this.startDate = this.formatDate(new Date(new Date(this.endDate).getTime() - 30 * 24 * 60 * 60 * 1000));
        this.maxDate = this.formatDate(new Date());
        this.minDate = this.formatDate(new Date(new Date().getFullYear(), 0, 1));
      }else{
        // 结束日期为this.endDate的月份和日期加上选择的年份
        const timeDate = this.currentYear + '-' + this.endDate.split('-')[1] + '-' + this.endDate.split('-')[2];
        this.endDate = this.formatDate(new Date(timeDate));
        // 开始日期为结束日期前30天
        this.startDate = this.formatDate(new Date(new Date(this.endDate).getTime() - 30 * 24 * 60 * 60 * 1000));
        this.maxDate = this.formatDate(new Date(this.currentYear, 11, 31));
        this.minDate = this.formatDate(new Date(this.currentYear, 0, 1));
      }
      this.initAction();
      this.showPicker = false;
    },
    getInfo(info){
      this.pestInfo = info;
    },
    // 格式化日期为YYYY-MM-DD格式，月份和日期小于10时前面加0
    formatDate(date) {
      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(date){
      const time = new Date(date).getTime() / 1000;
      return time.toFixed(0);
    },
    handleChange(e){
      this.startDate = e.startDate;
      this.endDate = e.endDate;
      this.page = 1;
      this.initAction();
    },
    showCalendar(){
      this.show = true;
    },
    handleBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    initAction(){
      this.pest_order = {}
      if(this.activeTab === 'viewImage'){
        // this.initPest();
        this.initImageList();
      }else if(this.activeTab === 'deviceData'){
        // this.getDeviceData();
        this.getPolylineData();
        this.getDeviceHistoryData();
      }else if(this.activeTab === 'pestAnalysis'){
        this.getSporeAnalysis();
      }
    },
    handleTabClick(tab) {
      this.activeTab = tab;
      this.initAction();
    },
    // 拉取孢子分析数据（虫害识别 + 孢子趋势）
    async getSporeAnalysis() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.bzy.pest_order_and_char',
        method: 'POST',
        data: {
          id: this.deviceInfo.d_id,
          hour_st: '00',
          hour_ed: '00',
          device_type_id: this.deviceInfo.type_id || this.deviceInfo.type,
          start: this.formatTime(this.startDate + ' 00:00:00'),
          end: this.formatTime(this.endDate + ' 23:59:59')
        }
      });
      // 虫害识别：pest_total 按数量降序
      const pestTotal = (res && res.pest_total) || {};
      this.pestRankList = Object.keys(pestTotal)
        .map(name => ({ name: name, count: pestTotal[name] || 0 }))
        .sort((a, b) => b.count - a.count);
      // 各物种每日数量/浓度（char_data）
      const charData = (res && res.char_data) || {};
      const charRows = {};
      Object.keys(charData).forEach(name => {
        charRows[name] = (charData[name] || []).map(item => ({
          date: this.formatDay(item.addtime),
          value: item.sum || 0,
          ctn: item.ctn || 0
        }));
      });
      this.sporeCharData = charRows;
      this.buildSporeChart();
    },
    // 秒级时间戳 → YYYY-MM-DD
    formatDay(seconds) {
      return this.formatDate(new Date(Number(seconds) * 1000));
    },
    // 孢子趋势：所有物种的数量（左轴）+ 浓度（右轴）画在同一张图，点图例可隐藏/显示
    buildSporeChart() {
      const names = Object.keys(this.sporeCharData);
      // 汇总所有日期作为 x 轴
      const categories = [];
      names.forEach(name => {
        this.sporeCharData[name].forEach(row => {
          if (categories.indexOf(row.date) === -1) categories.push(row.date);
        });
      });
      categories.sort();
      const series = [];
      names.forEach(name => {
        const map = {};
        this.sporeCharData[name].forEach(row => {
          map[row.date] = row;
        });
        series.push({
          name: name,
          type: 'line',
          style: 'curve',
          index: 0,
          data: categories.map(d => (map[d] ? map[d].value : null))
        });
        series.push({
          name: name + '浓度',
          type: 'line',
          style: 'curve',
          index: 1,
          data: categories.map(d => (map[d] ? map[d].ctn : null))
        });
      });
      this.sporeChart = { categories: categories, series: series };
    },
    // 虫害识别进度条宽度：占总量百分比，保底 4% 便于查看
    rankPercent(item) {
      const total = this.pestRankList.reduce((sum, cur) => sum + cur.count, 0);
      if (!total) return 0;
      return Math.max(4, Math.round((item.count / total) * 100));
    },
    async getDeviceData(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.device_status_data',
        method: 'POST',
        data: {
          device_id: this.deviceInfo.id,
        },
      });
      this.deviceStatic = res;
    },
    async initImageList(){
      // 孢子仪2.1（device_code=1）走文件夹列表；2.0 走原接口
      if (!this.isSporeTwo) {
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
          method: 'POST',
          data: {
            page:this.page,
            page_number:this.page_size,
            device_id: this.deviceInfo.id,
            ret:'list',
            time_begin: this.formatTime(this.formatDate(new Date(this.startDate)) + ' 00:00:00'),// 格式化开始时间YYYY-MM-DD HH:MM:SS
            time_end: this.formatTime(this.formatDate(new Date(this.endDate)) + ' 23:59:59'),// 格式化结束时间YYYY-MM-DD HH:MM:SS
          },
        });
        const data = res?.data || [];
        this.imageList = data
        return;
      }
      await this.initFolderList();
    },
    // 孢子仪2.1：拉取文件夹列表，默认选中第一个并加载其图片
    async initFolderList(){
      uni.showLoading({ title: '加载中' });
      try {
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=forecast.bzy.bzy_file_fold',
          method: 'POST',
          data: {
            device_id: this.deviceInfo.id,
            page: 1,
            size: 999,
          },
        });
        this.folderList = res?.data || [];
        // 默认选中第一个文件夹并加载其图片
        this.folderIndex = 0;
        if (this.folderList.length) {
          await this.loadFolderPhotos();
        } else {
          this.imageList = [];
        }
      } catch (e) {
        console.log('bzy_file_fold error:', e);
        this.folderList = [];
      } finally {
        uni.hideLoading();
      }
    },
    // 20260905110035 → 2026-09-05 11:00
    formatFold(str){
      const s = String(str || '');
      if (s.length < 12) return s;
      return `${s.slice(0, 4)}${s.slice(4, 6)}${s.slice(6, 8)}_${s.slice(8, 10)}${s.slice(10, 12)}`;
    },
    handleFolderSelect(index){
      if (index === this.folderIndex) return;
      this.folderIndex = index;
      this.loadFolderPhotos();
    },
    // 孢子仪2.1：拉取选中文件夹内的图片列表
    async loadFolderPhotos(){
      const folder = this.folderList[this.folderIndex] || {};
      if (!folder.id) {
        this.imageList = [];
        return;
      }
      uni.showLoading({ title: '加载中' });
      try {
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=forecast.bzy.bzy_two_percent_one_photo',
          method: 'POST',
          data: {
            id: folder.id,
            page: 1,
            size: 32,
          },
        });
        console.log('bzy_two_percent_one_photo res:', JSON.stringify(res).slice(0, 500));
        this.imageList = res?.data || [];
      } catch (e) {
        console.log('bzy_two_percent_one_photo error:', e);
        this.imageList = [];
      } finally {
        uni.hideLoading();
      }
    },
    async initPest(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.new_cbd.pest_type_list',
        method: 'POST',
        data:{
          page:1,
          page_size:999999,
          device_id: this.deviceInfo.id,
          identify_model: 'B',
          time_begin: this.formatTime(this.formatDate(new Date(this.startDate)) + ' 00:00:00'),// 格式化开始时间YYYY-MM-DD HH:MM:SS
          time_end: this.formatTime(this.formatDate(new Date(this.endDate)) + ' 23:59:59'),// 格式化结束时间YYYY-MM-DD HH:MM:SS
        },
      });
      const data = res?.data || [];
      this.pestList = data
    },
    async getPolylineData(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
        method: 'POST',
        data: {
          device_type_id: this.deviceInfo.type_id,
          d_id: this.deviceInfo.d_id,
          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,// 转成毫秒
          end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,// 转成毫秒
        },
      });
      const data = res || [];
      this.polylineList = data
    },
    async getDeviceHistoryData(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
        method: 'POST',
        data: {
          device_type_id: this.deviceInfo.type_id,
          device_id: this.deviceInfo.id,
          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,
          end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,
          page: this.page,
          page_size: this.page_size,
        },
      });
      const data = res?.data || [];
      this.totalPage = res.counts;
      this.deviceHistoryList = data
    },
    async getPestAnalysis(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.cbd_analysis.analysis_pest_result',
        method: 'POST',
        data: {
        d_id: this.deviceInfo.d_id,
        start: this.startDate,
        end: this.endDate,
        model: 'B'
        },
      });
      const pest_order = res?.pest_order;
      this.getInfo({});
      let total = 0;
      this.pests = [];
      for(let key in pest_order){
        total += pest_order[key] || 0;
        this.pests.push({
          name: key,
          percent: (pest_order[key] / total) * 100
        })
      }
      this.pest_order = pest_order;
      this.day = res?.day || [];
      const pest = res?.pest || [];
      this.pest = pest;
      // pest.forEach(p =>{
      //   for(let i = 0;i< p.length;i++){
      //     this.pest.push(p[i]);
      //   }
      // })
      this.total = total;
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .u-calendar__action{
  display:flex;
  justify-content: space-between;
}
::v-deep .u-hover-class{
  .u-calendar__content__item__inner{
    color:#aaa !important;
  }
}
.operation-container{
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.operation{
  position: fixed;
  top: 260rpx;
  right: 0;
  z-index: 999;
  width:48rpx;
  height: 100rpx;
  line-height: 50rpx;
  border-radius: 8px 0 0 8px;
  border-top: 4rpx solid #FFF;
  border-bottom: 4rpx solid #FFF;
  border-left: 4rpx solid #FFF;
  background: #dddfe6a3;
  color: #515153;
  text-align: center;
  font-family: "Source Han Sans CN VF";
  font-size: 24rpx;
  font-weight: 500;
  writing-mode: vertical-rl;
}
.operation-background{
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: #00000040;
}
.operation-content{
  position: fixed;
  top: 240rpx;
  right: 80rpx;
  height: 126rpx;
  display: flex;
  padding: 16rpx 32rpx;
  align-items: center;
  gap: 64rpx;
  z-index: 999;
  border-radius: 32rpx;
  border: 2rpx solid #FFF;
  background: #FFF;
  backdrop-filter: blur(8rpx);
  .operation-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333333;
    text-align: center;
    font-family: "Source Han Sans CN VF";
    font-size: 24rpx;
    font-weight: 400;
  }
  .operation-icon{
    width: 58rpx;
    height: 58rpx;
  }
}
.device-detail {
  display: flex;
  width: 100%;
  height: calc(100vh - 112rpx);
  padding-top: 112rpx;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;

  // 孢子分析
  .spore-analysis {
    width: 100%;
    .analysis-card {
      width: 100%;
      padding: 32rpx;
      box-sizing: border-box;
      background: #fff;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .card-title {
      font-size: 32rpx;
      color: #042118;
      font-family: 'Source Han Sans CN VF';
      font-weight: 700;
      margin-bottom: 24rpx;
    }
    .pest-rank {
      &__item {
        display: flex;
        align-items: center;
        padding: 14rpx 0;
      }
      &__name {
        width: 160rpx;
        flex-shrink: 0;
        font-size: 26rpx;
        color: #042118;
        font-family: 'Source Han Sans CN VF';
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &__track {
        flex: 1;
        height: 12rpx;
        border-radius: 6rpx;
        background: #F0F2F5;
        overflow: hidden;
        margin: 0 24rpx;
      }
      &__fill {
        height: 100%;
        border-radius: 6rpx;
      }
      &__count {
        width: 80rpx;
        flex-shrink: 0;
        text-align: right;
        font-size: 26rpx;
        color: #042118;
        font-family: 'Source Han Sans CN VF';
      }
    }
    .chart-wrap--spore {
      width: 100%;
      height: 420rpx;
    }
  }

  background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
  .device-detail__header {
    width: 100%;
    font-size: 28rpx;
    color: #999;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    font-weight: 700;
    position: relative;
    text-align: center;
    .arrow-left {
      position: absolute;
      left: 32rpx;
      margin-right: 12rpx;
    }
  }
  .device-detail__body {
    width: calc(100% - 64rpx);
    margin: 0 auto;
    border-radius: 16rpx;
    overflow-x: hidden;
    overflow-y: auto;
    // 隐藏滚动条
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tab-content{
    width: 100%;
    padding-bottom: 32rpx;
  }
  .tabs {
    background: #ffffff;
    margin: 24rpx 0;
    border-radius: 16rpx;
    padding: 16rpx 0;
    padding-top: 0;
    .tab-container{
      display: flex;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 700;
      color: #042118;
      font-family: 'Source Han Sans CN VF';
    }
    .select-timer-container{
      display:flex;
      align-items: center;
      padding-left: 32rpx;
      .select-year{
        width: 110rpx;
        text-align: center;
        height: 64rpx;
        border-radius: 32rpx;
        font-family: 'Source Han Sans CN VF';
        line-height: 64rpx;
        background: #F1F4F8;
        padding: 0 32rpx;
        .select-year-item{
          color: #656565;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
    .tabs-timer-container{
      display: flex;
      align-items: center;
      width: calc(100% - 256rpx);
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 500;
      font-family: 'Source Han Sans CN VF';
      border-radius: 32rpx;
      background: #F1F4F8;
      padding: 0 32rpx;
      color: #656565;
      margin: 16rpx;
      position: relative;
      .tabs-timer-item{
        width: 42%;
        color: #656565;
        text-align: center;
        font-family: "Source Han Sans CN VF";
        font-size: 24rpx;
        font-weight: 400;
      }
      .calendar-icon{
        margin-left: 24rpx;
      }
    }
    .tab-item {
      flex: 1;
      color: #999999;
      text-align: center;
      font-family: "Source Han Sans CN VF";
      font-size: 28rpx;
      font-weight: 400;
    }
    .active{
      position: relative;
      color: #303133;
      text-align: center;
      font-family: "Source Han Sans CN VF";
      font-size: 28rpx;
      font-weight: 700;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 36rpx;
        height: 36rpx;
        border: 6rpx solid #0bbc58;
        border-radius: 50%;
        border-color: transparent;
        border-bottom-color: #0bbc58;
      }
    }
  }
  .tabs-fold{
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 28rpx;
    font-weight: 700;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    // 滚动条
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 24rpx;
    // 隐藏滚动条
    -ms-overflow-style: none;
    scrollbar-width: none;
    .tabs-fold-item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex-shrink: 0; // 不压缩子项，超出容器宽度才能横向滚动
      background: #FFFFFF;
      border-radius: 24rpx;
      border: 4rpx solid transparent;
      box-sizing: border-box;
      width: 180rpx;
      padding: 16rpx 0;
      &.active {
        border-color: #0BBC58;
      }
      text-align: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #656565;
      font-family: 'Source Han Sans CN VF';
      margin: 0 14rpx;
      border: 1rpx solid #E5E5E5;
      .tabs-fold-icon{
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 12rpx;
      }
    }
    .tabs-fold-item.active{
      border-color: #0bbc58;
    }
  }
}
</style>