pest_admin/src/views/orchardScreen/components/PestInfo.vue

<!--
 * @Author: chris
 * @Date: 2025-08-25 15:51:13
 * @LastEditors: chris
 * @LastEditTime: 2025-10-15 10:53:21
-->
<script setup>
import ModuleTitle from './moduleTitle.vue';
import { pestTypeDict } from '../config';

// 使用proxy访问全局$echarts
const { proxy } = getCurrentInstance();
const echarts = proxy?.$echarts;

const props = defineProps({
  pestData: {
    type: Array,
    default: () => []
  },
  pestInfo: {
    type: Object,
    default: () => ({
      // 默认模拟数据
      current: {
        totalCount: 156,
        types: [
          { name: '蚜虫', count: 48, color: '#ff6b6b' },
          { name: '红蜘蛛', count: 36, color: '#ffa502' },
          { name: '果蝇', count: 24, color: '#5f27cd' },
          { name: '菜青虫', count: 18, color: '#10ac84' },
          { name: '其他', count: 30, color: '#54a0ff' }
        ]
      },
      trend: Array(7).fill().map((_, index) => {
        const date = new Date();
        date.setDate(date.getDate() - (6 - index));
        return {
          date: `${date.getMonth() + 1}/${date.getDate()}`,
          count: 100 + Math.sin(index / 2) * 50 + Math.random() * 30
        };
      })
    })
  },
});

const trendChartRef = ref(null);
const distributionChartRef = ref(null);
let trendChartInstance = null;
let distributionChartInstance = null;
const formateLineData = ref({})
const formatePieData = ref({})
const lineChartData = ref({})
const pieChartData = ref({})

const pestTotal = computed(() => {
  return pieChartData.value.values?.reduce((total, cur) => total + cur, 0) || 0
})

watch(() => props.pestData, () => {
  const { lineRes, pieRes } = formatData(props.pestData)
  formateLineData.value = lineRes
  formatePieData.value = pieRes
  lineChartData.value = createChartData(formateLineData.value, 'line')
  pieChartData.value = createChartData(formatePieData.value, 'pie')
  updateTrendChart();
  updateDistributionChart();
})

onMounted(() => {
  console.log(proxy.$utils)
  initTrendChart();
  initDistributionChart();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时清理资源
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (trendChartInstance) {
    trendChartInstance.dispose();
  }
  if (distributionChartInstance) {
    distributionChartInstance.dispose();
  }
});

// 初始化趋势图
function initTrendChart () {
  if (trendChartRef.value && echarts) {
    // 销毁已存在的图表实例
    if (trendChartInstance) {
      trendChartInstance.dispose();
    }
    
    trendChartInstance = echarts.init(trendChartRef.value);
    updateTrendChart();
  }
};

// 初始化分布图
function initDistributionChart () {
  if (distributionChartRef.value && echarts) {
    // 销毁已存在的图表实例
    if (distributionChartInstance) {
      distributionChartInstance.dispose();
    }
    
    distributionChartInstance = echarts.init(distributionChartRef.value);
    updateDistributionChart();
  }
};

// 更新趋势图数据
function updateTrendChart () {

  if (!trendChartInstance || !echarts) return;
  
  const gradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: 'rgba(77, 171, 247, 0.5)' },
    { offset: 1, color: 'rgba(77, 171, 247, 0.1)' }
  ]);
  
  const option = {
    title: {
      text: '7天虫情数量趋势',
      textStyle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#333',
      textStyle: {
        color: '#fff'
      },
      formatter: function(params) {
        const data = params[0];
        return `${data.name}<br/>虫情数量: ${Math.round(data.value)}`;
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: lineChartData.value.dates?.map(item => {
        const arr = item.split('/')
        return `${arr[1]}/${arr[2]}日`
      }) || [],
      axisLine: {
        lineStyle: {
          color: '#464646'
        }
      },
      axisLabel: {
        color: '#ddd'
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '数量',
        nameTextStyle: {
          color: '#ddd'
        },
        min: 0,
        max: 'dataMax + 50',
        axisLine: {
          lineStyle: {
            color: '#464646'
          }
        },
        axisLabel: {
          color: '#ddd'
        },
        splitLine: {
          lineStyle: {
            color: '#2a2a2a',
            type: 'dashed'
          }
        }
      }
    ],
    series: [
      {
        name: '虫情数量',
        type: 'line',
        data: lineChartData.value.values || [],
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#4dabf7'
        },
        areaStyle: {
          color: gradient
        },
        emphasis: {
          focus: 'series'
        }
      }
    ]
  };
  
  trendChartInstance.setOption(option);
};

// 更新分布图数据
function updateDistributionChart () {
  if (!distributionChartInstance || !echarts) return;
  
  const option = {
    title: {
      text: '虫情分布状况',
      textStyle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#333',
      textStyle: {
        color: '#fff'
      },
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'center',
      textStyle: {
        color: '#ddd'
      }
    },
    series: [
      {
        name: '虫情分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#1a1a1a',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        labelLine: {
          show: false
        },
        data: pieChartData.value.names?.map((name, index) => ({
          name,
          value: pieChartData.value.values?.[index] || 0,
          itemStyle: {
            color: pestTypeDict[name]?.color || proxy.$utils.getRandomColor()
          }
        }))
      }
    ]
  };
  
  distributionChartInstance.setOption(option);
};

// 响应窗口大小变化
function handleResize () { 
  if (trendChartInstance) {
    trendChartInstance.resize();
  }
  if (distributionChartInstance) {
    distributionChartInstance.resize();
  }
};

function formatData (data) {
  const lineRes = {}
  const pieRes = {}
  data.forEach(item => {
    const date = item.createTime.split(' ')[0].replace(/-/g, '/')
    lineRes[item.name] ? lineRes[item.name].push(item) : (lineRes[item.name] = [item])
    pieRes[date] ? pieRes[date].push(item) : (pieRes[date] = [item])
  })
  return {
    lineRes,
    pieRes
  }
}

function createChartData(data, type) {
  const keys = Object.keys(data)
  const values = []
  names.forEach(key => {
    values.push(data[key].reduce((pre, cur) => cur + (pre.value || 0), 0))
  })
  return type === 'line' ? { dates: keys, values } : { names: keys, values }
}

</script>

<template>
  <div class="pest-info">
    <!-- <div class="info-header">
      <div class="title">
        <View class="title-icon" />
        <h3 class="main-title">虫情监测</h3>
      </div>
      <div class="total-count">
        <span class="total-label">总虫情数:</span>
        <span class="total-value">{{ pestInfo.current.totalCount }}</span>
      </div>
    </div> -->
    <module-title title="虫情监测" icon="bug">
      <div class="total-count">
        <span class="total-label">总虫情数:</span>
        <span class="total-value">{{ pestTotal }}</span>
      </div>
    </module-title>
    
    <!-- 左中右三列布局 -->
    <div class="main-content">
      <!-- 左列：7天虫情数量趋势图 -->
      <div class="left-column">
        <div class="chart-card">
          <div ref="trendChartRef" class="trend-chart"></div>
        </div>
      </div>
      
      <!-- 中列：虫情分布状况图 -->
      <div class="middle-column">
        <div class="chart-card">
          <div ref="distributionChartRef" class="distribution-chart"></div>
        </div>
      </div>
      
      <!-- 右列：害虫数量部分模块 -->
      <div class="right-column">
        <div class="pest-types-card">
          <div class="pest-types-title">害虫类型数量</div>
          <div class="pest-types">
            <div v-for="(name, index) in pieChartData.names" :key="name" class="type-item">
              <div class="color-dot" :style="{ backgroundColor: pestTypeDict[name]?.color || proxy.$utils.getRandomColor()}" />
              <span class="type-name">{{ name }}</span>
              <span class="type-count">{{ pieChartData.values[index] || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 定义SCSS变量
$primary-color: #4dabf7;
$hover-bg: rgba(255, 255, 255, 0.1);
$border-radius: 12px;
$transition: all 0.3s ease;

// 使用UnoCSS的@apply语法
.pest-info {
  @apply rounded-xl p-5 shadow-lg flex flex-col gap-5;
  // background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.info-header {
  @apply flex items-center justify-between;
}

.title {
  @apply flex items-center gap-2;
}

// 主标题样式统一
.title-icon {
  @apply text-primary w-6 h-6;
}

.main-title {
  @apply text-lg font-bold text-white m-0;
}

.total-count {
  @apply flex items-center px-4;
}

.total-label {
  @apply text-sm text-[#a0a0a0];
}

.total-value {
  @apply text-xl font-bold text-primary ml-1 color-rose;
}

// 左中右三列布局
.main-content {
  @apply flex gap-3 flex-1 h-full overflow-hidden;
}

// 左列样式
.left-column {
  @apply w-[45%];
}

// 中列样式
.middle-column {
  @apply w-[33%];
}

// 右列样式
.right-column {
  @apply w-[20%];
}

.chart-card {
  @apply bg-[rgba(255,255,255,0.03)] rounded-xl p-5 border border-[rgba(255,255,255,0.1)] h-full;
}

.trend-chart,
.distribution-chart {
  @apply w-full h-full min-h-[280px];
}

// 右侧害虫数量卡片样式
.pest-types-card {
  @apply bg-[rgba(255,255,255,0.03)] rounded-xl p-3 border border-[rgba(255,255,255,0.1)] h-full flex flex-col;
}

.pest-types-title {
  @apply text-base font-bold text-white mb-2;
}

.pest-types {
  @apply flex flex-col flex-1 space-y-1;
}

.type-item {
  @apply flex items-center p-1.5 hover:bg-[rgba(255,255,255,0.05)] rounded-lg transition-all duration-300;
}

.color-dot {
  @apply w-3 h-3 rounded-full mr-2;
}

.type-name {
  @apply text-xs text-[#ddd] flex-1;
}

.type-count {
  @apply text-sm font-bold text-white;
}
</style>