besure_web/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue

<template>
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <span class="card-title-icon">
          <Icon icon="fa-solid:chart-line" />
        </span>
        <span>周生产趋势</span>
      </div>
      <div class="legend-inline">
        <span class="dot" style="background: var(--accent);"></span> 产量
        <span class="dot" style="background: var(--purple);"></span> 计划
      </div>
    </div>
    <div class="card-body">
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import { colors, style } from '../utils'
import { PlanApi } from  '@/api/mes/plan'

const route = useRoute()
const orgId = route.query.orgId

const weekDays = ref()
const weekPlan = ref()
const weekReal = ref()

const chartRef = ref<HTMLElement | null>(null)
let chart: echarts.ECharts | null = null

const initChart = () => {
  if (!chartRef.value) return
  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
  chart.setOption({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis' },
    legend: { top: 0, right: 0, textStyle: style.legendText },
    grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
    xAxis: { type: 'category', data: weekDays.value, axisLine: style.axisLine, axisLabel: style.axisLabel },
    yAxis: { type: 'value', axisLine: style.axisLine, axisLabel: style.axisLabel, splitLine: style.splitLine },
    series: [
      {
        name: '计划产量',
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: { width: 2, color: colors.purple },
        data: weekPlan.value
      },
      {
        name: '实际产量',
        type: 'line',
        smooth: true,
        showSymbol: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: { width: 3, color: colors.cyan },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(34,211,238,0.28)' },
            { offset: 1, color: 'rgba(15,23,42,0.8)' }
          ])
        },
        data: weekReal.value
      }
    ]
  })
}

const resizeHandler = () => {
  chart?.resize()
}

onMounted( async() => { 
  window.addEventListener('resize', resizeHandler)
  const data = await PlanApi.getWeekTrend({ orgId })
  weekDays.value = data.weekDays
  weekPlan.value = data.weekPlan
  weekReal.value = data.weekReal
  initChart()
  // console.log(data)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
  chart?.dispose()
})
</script>

<style scoped>
.card {
  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
  border-radius: 10px;
  border: 1px solid rgba(30,64,175,0.85);
  box-shadow:
    0 18px 45px rgba(15,23,42,0.95),
    0 0 0 1px rgba(15,23,42,1),
    inset 0 0 0 1px rgba(56,189,248,0.05);
  padding: 10px 10px 10px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(56,189,248,0.75);
  opacity: 0.6;
  pointer-events: none;
}

.card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.card::after {
  right: -1px;
  bottom: -1px;
  border-left: none;
  border-top: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #e5f0ff;
}

.card-title-icon {
  color: #22d3ee;
}

.card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: #94a3b8;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 180px;
}

@media (max-width: 1600px) {
  .chart { min-height: 160px; }
}
</style>