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>{{ t('WeekTrend.title') }}</span>
      </div>
      <div class="legend-inline">
        <span class="dot" style="background: var(--accent);"></span> {{ t('WeekTrend.legendOutput') }}
        <span class="dot" style="background: var(--purple);"></span> {{ t('WeekTrend.legendPlan') }}
      </div>
    </div>
    <div class="card-body">
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

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

const route = useRoute()
const orgId = route.query.orgId
const { t } = useI18n('Dashboard8')
const localeStore = useLocaleStore()

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

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

const buildOption = () => {
  return {
    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: t('WeekTrend.seriesPlanOutput'),
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: { width: 2, color: colors.purple },
        data: weekPlan.value
      },
      {
        name: t('WeekTrend.seriesActualOutput'),
        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 initChart = () => {
  if (!chartRef.value) return
  chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
  chart.setOption(buildOption())
}

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()
})

watch(
  () => localeStore.getCurrentLocale.lang,
  () => {
    chart?.setOption(buildOption(), true)
  }
)

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

<style scoped>
.card {
  position: relative;
  display: flex;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
  border: 1px solid rgb(30 64 175 / 85%);
  border-radius: 10px;
  box-shadow:
    0 18px 45px rgb(15 23 42 / 95%),
    0 0 0 1px rgb(15 23 42 / 100%),
    inset 0 0 0 1px rgb(56 189 248 / 5%);
  flex-direction: column;
}

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

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

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

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

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

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

.card-body {
  display: flex;
  min-height: 0;
  flex: 1;
  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 (width <= 1600px) {
  .chart { min-height: 160px; }
}
</style>