bigdata_WX/pages/shuHai1/components/rodentAnalysis.vue

<template>
  <view class="rodent-analysis">
    <!-- 发生趋势分析 -->
    <view class="analysis-card">
      <view class="analysis-card__header">
        <view class="analysis-card__title">发生趋势分析</view>
        <!-- <view class="range-tabs">
          <view
            class="range-tab"
            :class="{ active: trendRange === 'week' }"
            @click="switchTrendRange('week')"
          >周</view>
          <view
            class="range-tab"
            :class="{ active: trendRange === 'month' }"
            @click="switchTrendRange('month')"
          >月</view>
          <view
            class="range-tab"
            :class="{ active: trendRange === 'year' }"
            @click="switchTrendRange('year')"
          >年</view>
        </view> -->
      </view>
      <view class="trend-legend">
        <view class="trend-legend__item" v-for="item in trendLegend" :key="item.name">
          <view class="trend-legend__line" :style="{ background: item.color }">
            <view class="trend-legend__dot" :style="{ borderColor: item.color }"></view>
          </view>
          <text class="trend-legend__text">{{ item.name }}</text>
        </view>
      </view>
      <view class="trend-axis-label">鼠害数量：只</view>
      <view class="chart-wrap chart-wrap--trend">
        <qiun-data-charts
          type="line"
          :chartData="trendChart"
          :opts="trendOpts"
          :reshow="active"
          :canvas2d="true"
          :inScrollView="true"
          :ontouch="true"
        />
      </view>
    </view>

    <!-- 鼠害占比 -->
    <view class="analysis-card">
      <view class="analysis-card__header">
        <view class="analysis-card__title">鼠害占比</view>
      </view>
      <view class="community-content">
        <view class="chart-wrap chart-wrap--ring">
          <qiun-data-charts
            type="ring"
            :chartData="communityChart"
            :opts="communityOpts"
            :reshow="active"
            :canvas2d="true"
            :inScrollView="true"
            :ontouch="true"
            :tooltip-show="false"
            @getIndex="onRingIndex"
          />
        </view>
        <view class="community-total">
          <text>总鼠害数量</text>
          <text class="total-value">{{ totalCount }}
            <text class="unit">只</text>
          </text>
        </view>
        <view class="community-list">
          <view
            class="community-item"
            :class="{ active: communitySelected === index }"
            v-for="(item, index) in communityList"
            :key="index"
            @click="onCommunityClick(index)"
          >
            <view class="community-item__dot" :style="{ background: item.color }"></view>
            <view class="community-item__name">{{ item.name }}</view>
            <view class="community-item__count">{{ item.count }}只</view>
            <view class="community-item__percent">{{ item.percent }}%</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 鼠情分析：categories/series → 发生趋势，total → 鼠害占比
const ANALYSIS_URL = '/api/api_gateway?method=forecast.shuhai.shuhai_analysis';
// 趋势图配色：系列为 target_detail 里的各物种，数量不定，循环取色
const TREND_PALETTE = ['#FF5252', '#0BBC58', '#3D5AFE', '#FFC107', '#9C27B0', '#00BCD4', '#FF7043', '#8BC34A', '#7986CB', '#F06292'];

export default {
  name: 'RodentAnalysis',
  props: {
    // 当前 tab 是否激活（tab 用 v-show 切换时，隐藏状态下 canvas 容器测量为 0，需激活后重绘）
    active: {
      type: Boolean,
      default: true
    },
    // 设备 id：鼠情分析接口入参
    deviceId: {
      type: [String, Number],
      default: ''
    },
    // 查询范围（秒级时间戳），由页面日期选择驱动
    start: {
      type: [String, Number],
      default: 0
    },
    end: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      // 发生趋势
      trendChart: null,
      trendOpts: {
        // 颜色顺序与 series 一一对应
        color: ['#FF5252', '#0BBC58', '#3D5AFE'],
        dataLabel: false,
        // 不绘制折线上的数据点圆点
        dataPointShape: false,
        // 图例用卡片内自定义样式（见 template 的 trend-legend）
        legend: { show: false },
        xAxis: {
          disableGrid: true,
          fontSize: 9,
          fontColor: '#656565',
          // 'justify' 点落在刻度线上（线条铺满左右）；'center' 点位于两刻度中间
          boundaryGap: 'justify',
          labelCount: 6
        },
        yAxis: {
          disableGrid: false,
          gridType: 'dash',
          gridColor: '#EEEEEE',
          data: [{
            min: 0,
            max: 50,
            splitNumber: 5,
            fontSize: 10,
            fontColor: '#656565',
            tofix: 0
          }]
        },
        extra: {
          line: {
            type: 'curve',
            width: 2,
            activeType: 'none'
          }
        }
      },

      // 群落结构
      communityList: [],
      // 当前选中的占比列表项索引（-1 为未选中）
      communitySelected: -1,
      communityChart: null,
      communityOpts: {
        color: ['#E53935', '#FFC107', '#2196F3', '#9E9E9E'],
        // 点击联动会触发整图重绘（canvas 无局部更新），关掉动画避免每次点击重放入场动画
        animation: false,
        legend: { show: false },
        // 环形图：中心显示当前占比最高的物种
        dataLabel: false,
        // uCharts 以 opts.tooltip.index 命中扇区高亮（-1 为不高亮），点击列表时更新
        tooltip: { index: -1 },
        title: {
          name: '0%',
          fontSize: 16,
          color: '#E53935',
          offsetY: -6
        },
        subtitle: {
          name: '--',
          fontSize: 10,
          color: '#333333',
          offsetY: 8
        },
        extra: {
          ring: {
            // 环粗细约为半径的三分之一
            ringWidth: 16,
            offsetAngle: 0,
            // 去掉分段之间的白色分隔线（qiun-data-charts 的 ring 默认 border: true）
            border: false,
            // 关闭点击分段时外扩+半透明的高亮效果（默认 activeRadius: 10 / activeOpacity: 0.5）
            activeRadius: 5,
            activeOpacity: 1
          }
        }
      },

      // 总量
      totalCount: 0,
    };
  },
  computed: {
    // 趋势图图例：跟随接口返回的物种系列
    trendLegend() {
      if (!this.trendChart) return [];
      return this.trendChart.series.map(s => ({ name: s.name, color: s.color }));
    },
    // 依赖项拼接，任一变化即重新拉取
    fetchKey() {
      return [this.deviceId, this.start, this.end].join('_');
    }
  },
  mounted() {
    // 延迟拉取：等页面布局稳定后再初始化 canvas，避免容器尺寸测量为 0
    setTimeout(() => {
      this.fetchAnalysis();
    }, 300);
  },
  watch: {
    // 设备或日期范围变化时重新拉取
    fetchKey() {
      this.fetchAnalysis();
    }
  },
  methods: {
    // 拉取鼠情分析数据：categories/series → 发生趋势，total → 鼠害占比
    async fetchAnalysis() {
      if (!this.deviceId || !this.start || !this.end) return;
      try {
        const res = await this.$myRequest({
          url: ANALYSIS_URL,
          method: 'POST',
          data: {
            device_id: this.deviceId,
            start: this.start,
            end: this.end
          }
        });
        if (!res) return;
        this.buildTrendChart(res.categories || [], res.series || []);
        this.buildCommunity(res.total || []);
      } catch (e) {
        // $myRequest 已统一 toast 错误信息
      }
    },
    // 发生趋势：x 轴为日期（MM-DD），系列为接口返回的各物种
    buildTrendChart(categories, seriesList) {
      const cats = categories.map(date => (date || '').slice(5));
      const series = seriesList.map((item, index) => ({
        name: item.name,
        color: TREND_PALETTE[index % TREND_PALETTE.length],
        data: (item.data || []).map(v => v || 0)
      }));
      this.trendChart = { categories: cats, series };
      if (!cats.length) return;
      // Y 轴上限随数据量调整，向上取整到 10 的倍数
      let maxVal = 0;
      series.forEach(s => {
        s.data.forEach(v => {
          if (v > maxVal) maxVal = v;
        });
      });
      this.trendOpts.yAxis.data[0].max = Math.max(10, Math.ceil(maxVal / 10) * 10);
      // 单天数据画不出折线，改为显示数据点；boundaryGap 切为 'center' 让点位/刻度居中，多天时 'justify' 贴边铺满
      this.trendOpts.dataPointShape = cats.length === 1;
      this.trendOpts.xAxis.boundaryGap = cats.length === 1 ? 'center' : 'justify';
    },
    // 鼠害占比：环形图 + 列表，物种来自 total；颜色跟随趋势图同名系列，两图保持一致
    buildCommunity(totalList) {
      const colorByName = {};
      ((this.trendChart && this.trendChart.series) || []).forEach(s => {
        colorByName[s.name] = s.color;
      });
      const list = totalList.map((item, index) => ({
        name: item.name,
        count: item.value || 0,
        color: colorByName[item.name] || TREND_PALETTE[index % TREND_PALETTE.length]
      }));
      const total = list.reduce((sum, item) => sum + item.count, 0);
      list.forEach(item => {
        item.percent = total ? Math.round((item.count / total) * 100) : 0;
      });
      this.communityList = list;
      this.communitySelected = -1;
      this.totalCount = total;
      // 环形图扇区颜色与列表圆点保持一致
      this.communityOpts.color = list.map(item => item.color);
      this.communityOpts.tooltip = { index: -1 };
      this.communityChart = {
        series: [{
          data: list.map(item => ({ name: item.name, value: item.count }))
        }]
      };
      // 环形中心显示占比最高的物种
      if (list.length) {
        const top = list.reduce((a, b) => (b.count > a.count ? b : a), list[0]);
        this.communityOpts.title.name = top.percent + '%';
        this.communityOpts.subtitle.name = top.name;
      }
    },
    // 点击占比列表：环形图高亮对应扇区，中心数据联动；再次点击取消选中
    onCommunityClick(index) {
      const item = this.communityList[index];
      if (!item) return;
      const next = this.communitySelected === index ? -1 : index;
      this.communitySelected = next;
      const target = next > -1
        ? item
        : this.communityList.reduce((a, b) => (b.count > a.count ? b : a), this.communityList[0]);
      this.communityOpts.title.name = target.percent + '%';
      this.communityOpts.subtitle.name = target.name;
      this.communityOpts.tooltip = { index: next };
    },
    // 点击环形图扇区：中心数据联动，复用列表点击逻辑
    onRingIndex(e) {
      if (!e || typeof e.currentIndex !== 'number' || e.currentIndex < 0) return;
      this.onCommunityClick(e.currentIndex);
    }
  }
};
</script>

<style lang="scss" scoped>
.rodent-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;
  }
}
.analysis-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.analysis-card__title {
  position: relative;
  font-size: 32rpx;
  color: #042118;
  font-family: 'Source Han Sans CN VF';
  font-weight: 700;
}
.analysis-card__extra {
  display: flex;
  align-items: center;
  .peak-label {
    font-size: 24rpx;
    color: #656565;
    font-family: 'Source Han Sans CN VF';
    margin-right: 8rpx;
  }
  .peak-value {
    font-size: 24rpx;
    color: #E53935;
    font-family: 'Source Han Sans CN VF';
    font-weight: 700;
  }
}
.chart-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom:-20rpx;
  .chart-legend__dot--bar {
    width: 16rpx;
    height: 16rpx;
    border-radius: 4rpx;
    background: #FFC107;
    margin-right: 8rpx;
  }
  .chart-legend__text {
    font-size: 20rpx;
    color: #656565;
    font-family: 'Source Han Sans CN VF';
  }
}
.chart-wrap {
  position: relative;
  width: 100%;
}
.chart-wrap--rhythm {
  height: 400rpx;
}
.chart-wrap--ring {
  width: 360rpx;
  height: 320rpx;
  flex-shrink: 0;
}
.chart-wrap--weather {
  height: 420rpx;
}
// 发生趋势分析：自定义图例（曲线图例：短线 + 空心圆点）
.trend-legend {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 24rpx;
  background: #F5F6FA;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}
.trend-legend__item {
  display: flex;
  align-items: center;
  width: 33.33%;
  box-sizing: border-box;
  padding: 8rpx 0;
}
.trend-legend__line {
  position: relative;
  width: 40rpx;
  height: 4rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
}
.trend-legend__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #fff;
  border: 4rpx solid #fff;
  box-sizing: border-box;
}
.trend-legend__text {
  font-size: 26rpx;
  color: #042118;
  font-family: 'Source Han Sans CN VF';
}
.trend-axis-label {
  font-size: 22rpx;
  color: #B3B9C2;
  font-family: 'Source Han Sans CN VF';
  margin-bottom: 4rpx;
}
.chart-wrap--trend {
  height: 420rpx;
}
// 群落结构：上下布局，环形图在上，图例列表在下
.community-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.community-total{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Source Han Sans CN VF';
  .total-value {
    font-size: 32rpx;
    color: #042118;
    font-weight: 700;
    line-height: 1;
  }
  .unit {
    font-size: 28rpx;
    font-weight: 400;
    color:#999999;
    margin-left: 8rpx;
  }
}
.community-list {
  width: 90%;
  margin-top: 16rpx;
}
.community-item {
  display: flex;
  align-items: center;
  padding: 12rpx 12rpx;
  border-radius: 8rpx;
  font-family: 'Source Han Sans CN VF';
  &.active {
    background: #F5F6FA;
  }
  .community-item__dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 4rpx;
    margin-right: 12rpx;
    flex-shrink: 0;
  }
  .community-item__name {
    flex: 1;
    font-size: 26rpx;
    color: #042118;
  }
  .community-item__count {
    font-size: 26rpx;
    color: #042118;
    margin-right: 16rpx;
  }
  .community-item__percent {
    font-size: 26rpx;
    color: #656565;
    width: 72rpx;
    text-align: right;
  }
}
// 总量害虫数量
.total-main {
  display: flex;
  align-items: flex-end;
  margin-bottom: 24rpx;
  font-family: 'Source Han Sans CN VF';
  .total-value {
    font-size: 56rpx;
    color: #042118;
    font-weight: 700;
    line-height: 1;
    .total-unit {
      font-size: 28rpx;
      font-weight: 500;
      margin-left: 8rpx;
    }
  }
  .total-compare {
    font-size: 24rpx;
    color: #656565;
    margin-left: 24rpx;
    padding-bottom: 4rpx;
    .total-compare__value {
      color: #E53935;
      font-weight: 700;
    }
  }
}
.total-bar {
  .total-bar__track {
    position: relative;
    height: 16rpx;
    border-radius: 8rpx;
    background: #F1F4F8;
    overflow: visible;
  }
  .total-bar__fill {
    height: 100%;
    border-radius: 8rpx;
    background: #0BBC58;
  }
  .total-bar__marker {
    position: absolute;
    top: -6rpx;
    width: 4rpx;
    height: 28rpx;
    border-radius: 2rpx;
    background: #E53935;
    transform: translateX(-50%);
  }
  .total-bar__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 8rpx;
    font-size: 22rpx;
    color: #999999;
    font-family: 'Source Han Sans CN VF';
  }
}
// 周/月/年切换
.range-tabs {
  display: flex;
  align-items: center;
  .range-tab {
    width: 64rpx;
    height: 48rpx;
    line-height: 44rpx;
    text-align: center;
    font-size: 24rpx;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    background: #fff;
    border: 2rpx solid #E4E7ED;
    box-sizing: border-box;
    &:first-child {
      border-radius: 8rpx 0 0 8rpx;
    }
    &:last-child {
      border-radius: 0 8rpx 8rpx 0;
    }
    &.active {
      background: #0BBC58;
      border-color: #0BBC58;
      color: #fff;
      font-weight: 700;
    }
  }
}
</style>