bigDataApp/pages/bzy2/detail.vue

<template>
  <view class="device-detail">
    <!-- 固定头部：滚动时内容不再钻到系统状态栏下面 -->
    <nav-top-bar background="linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%)">
      <view class="device-detail__header">
        <u-icon
          size="36"
          class="arrow-left"
          name="arrow-left"
          @click="handleBack"
        ></u-icon>
        {{ deviceInfo.name }}
      </view>
    </nav-top-bar>
    <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">
            <!-- 只在tab激活且有数据时挂载，保证量宽高时容器可见，避免"布局错误" -->
            <qiun-data-charts
              v-if="hasSporeSeries && activeTab === 'pestAnalysis'"
              type="line"
              :chartData="sporeChart"
              :opts="sporeOpts"
              :reshow="sporeRedraw"
              :canvas2d="true"
              :inScrollView="true"
              :ontouch="true"
            />
            <view v-if="!hasSporeSeries" class="chart-empty">
              <u-empty :text="sporeTrendLoading ? '加载中...' : '暂无数据'"></u-empty>
            </view>
          </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 NavTopBar from '@/components/nav-top-bar/nav-top-bar.vue';
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: {
    NavTopBar,
    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: [],
      // 孢子趋势数据（bzy_analysis：categories + series）
      sporeChart: { categories: [], series: [] },
      // 孢子趋势加载中
      sporeTrendLoading: false,
      // 真机首次量宽高偶发为0，延迟翻转此值触发qiun组件重试绘制
      sporeRedraw: false,
      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
        },
        // 虫数单轴。注意：opts里的函数属性经小程序setData传给组件后会丢失，不能依赖formatter，
        // 刻度整数化靠 buildSporeChart 把 data[0].max 取整到 splitNumber 的整数倍
        // padding给y轴标题和左侧刻度留出空间，避免被裁剪/压住卡片标题
        padding: [20, 15, 0, 5],
        yAxis: {
          showTitle: true,
          disableGrid: false,
          gridType: 'dash',
          gridColor: '#EEEEEE',
          splitNumber: 4,
          data: [
            {
              title: '虫数:头',
              titleFontSize: 10,
              titleFontColor: '#666666',
              position: 'left',
              min: 0,
              max: 4
            }
          ]
        },
        extra: {
          line: {
            type: 'curve',
            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;
    },
    // 孢子趋势是否有数据（无数据时显示空状态，避免图表组件一直转loading）
    hasSporeSeries() {
      return !!(this.sporeChart && this.sporeChart.series && this.sporeChart.series.length);
    }
  },
  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();
      this.getSporeTrend();
    }, 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/bzy2/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id + '&device_model=' + this.deviceInfo.device_model + '&device_code=' + (this.deviceCode || this.deviceInfo.device_code || ''),
      });
    },
    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){
      // iOS的JavaScriptCore不支持'YYYY-MM-DD HH:MM:SS'格式，统一替换成'/'分隔保证真机可用
      const time = new Date(date.replace(/-/g, '/')).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'){
        console.log('[bzy2] initAction → pestAnalysis');
        this.getSporeAnalysis();
        this.getSporeTrend();
      }
    },
    handleTabClick(tab) {
      this.activeTab = tab;
      // 复位后延迟翻转，触发图表在真机上重试绘制（首次量宽高偶发为0）
      this.sporeRedraw = false;
      this.initAction();
      if(tab === 'pestAnalysis'){
        setTimeout(() => {
          this.sporeRedraw = true;
        }, 300);
      }
    },
    // 拉取孢子识别数据（bzy_pest_pie：各物种总量，按数量降序）
    async getSporeAnalysis() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.bzy.bzy_pest_pie',
        method: 'POST',
        data: {
          device_id: this.deviceInfo.id,
          start: this.formatTime(this.startDate + ' 00:00:00'),// 秒级时间戳
          end: this.formatTime(this.endDate + ' 23:59:59')// 秒级时间戳
        }
      });
      const list = (res && res.data) || [];
      this.pestRankList = list
        .map(item => ({ name: item.name, count: item.value || 0 }))
        .sort((a, b) => b.count - a.count);
    },
    // 孢子趋势：各物种每日数量（秒级时间戳）
    async getSporeTrend() {
      this.sporeTrendLoading = true;
      try {
        console.log('[bzy2] getSporeTrend start', this.deviceInfo.id, this.startDate, this.endDate);
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=forecast.bzy.bzy_analysis',
          method: 'POST',
          data: {
            device_id: this.deviceInfo.id,
            start: this.formatTime(this.startDate + ' 00:00:00'),// 秒级时间戳
            end: this.formatTime(this.endDate + ' 23:59:59')// 秒级时间戳
          }
        });
        // $myRequest解包后应为{categories, series}；若拿到的是完整返回体则取data字段
        const payload = res && res.series ? res : ((res && res.data) || {});
        console.log(payload,'payloadpayload');
        console.log('[bzy2] bzy_analysis payload:', JSON.stringify(payload).slice(0, 300));
        this.buildSporeChart(payload);
      } catch (e) {
        console.log('[bzy2] bzy_analysis error:', e);
      } finally {
        this.sporeTrendLoading = false;
      }
    },
    // 孢子趋势：categories/series → 折线图；左轴max取整到splitNumber的整数倍，保证虫数刻度无小数
    buildSporeChart(res) {
      const categories = res?.categories || [];
      const series = (res?.series || []).map(item => ({
        name: item.name,
        data: (item.data || []).map(v => v || 0)
      }));
      let maxCount = 0;
      series.forEach(item => {
        item.data.forEach(v => {
          if (v > maxCount) maxCount = v;
        });
      });
      this.sporeOpts.yAxis.data[0].max = Math.max(4, Math.ceil(maxCount / 4) * 4);
      this.sporeChart = { categories: categories, series: series };
      // 真机上挂载后首次量宽高偶发为0，稍后翻转reshow触发组件重试绘制
      this.sporeRedraw = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.sporeRedraw = true;
        }, 400);
      });
    },
    // 虫害识别进度条宽度：占总量百分比，保底 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%;
  // 用页面原生滚动：CSS容器滚动(overflow)会导致canvas同层渲染在滚动时错位
  min-height: calc(100vh - 24rpx);
  // 状态栏高度由 nav-top-bar 的占位撑起，这里只留头部与内容的间距
  padding-top: 24rpx;
  flex-direction: column;
  align-items: center;

  // 孢子分析
  .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;
      .chart-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }
  }

  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;
    // 隐藏滚动条
    -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;
      justify-content: center;
      width: calc(100% - 206rpx);
      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;
      white-space: nowrap;
      .tabs-timer-item{
        width: auto;
        flex-shrink: 0;
        color: #656565;
        text-align: center;
        font-family: "Source Han Sans CN VF";
        font-size: 24rpx;
        font-weight: 400;
      }
      .calendar-icon{
        margin-left: 24rpx;
        flex-shrink: 0;
      }
    }
    .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>