wangrong
2026-09-26 781539c6bea54b7689baf008e22fb25028729b4a
src/modules/report/views/screen/resource.vue
@@ -35,6 +35,7 @@
import { computed } from 'vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data } = useScreenData();
@@ -50,7 +51,7 @@
]);
const pieOption = computed(() => ({
   tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kg ({d}%)', ...tooltip() },
   tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kg') },
   legend: { bottom: 0, textStyle: { color: mutedColor.value } },
   series: [
      {
@@ -60,14 +61,18 @@
         padAngle: 3,
         itemStyle: { borderRadius: 6 },
         label: { color: textColor.value, formatter: '{b} {d}%' },
         data: data.value.recycleItems.map(e => ({
            name: e.name,
            value: e.weight,
            itemStyle: { color: e.color }
         }))
         data: toPieData(
            chartSeries(data.value.recycleItems, e => e.weight),
            e => e.name,
            e => e.color
         )
      }
   ]
}));
const weightRows = computed(() =>
   chartSeries(data.value.recycleItems, e => e.weight, { evenSplit: false }).reverse()
);
const weightOption = computed(() => ({
   grid: { containLabel: true, left: 8, right: 28, top: 12, bottom: 8 },
@@ -82,7 +87,7 @@
   },
   yAxis: {
      type: 'category',
      data: data.value.recycleItems.map(e => e.name).reverse(),
      data: weightRows.value.map(e => e.item.name),
      axisLabel: { color: textColor.value },
      axisLine: { show: false },
      axisTick: { show: false }
@@ -91,19 +96,24 @@
      {
         type: 'bar',
         barWidth: 16,
         data: data.value.recycleItems
            .map(e => ({ value: e.weight, itemStyle: { color: e.color, borderRadius: [0, 8, 8, 0] } }))
            .reverse()
         data: weightRows.value.map(e => ({
            value: e.value,
            itemStyle: { color: e.item.color, borderRadius: [0, 8, 8, 0] }
         }))
      }
   ]
}));
const valueRows = computed(() =>
   chartSeries(data.value.recycleItems, e => e.value, { evenSplit: false })
);
const valueOption = computed(() => ({
   grid: { containLabel: true, left: 16, right: 16, top: 28, bottom: 8 },
   tooltip: { trigger: 'axis', ...tooltip() },
   xAxis: {
      type: 'category',
      data: data.value.recycleItems.map(e => e.name),
      data: valueRows.value.map(e => e.item.name),
      axisLabel: { color: mutedColor.value },
      axisLine: { show: false },
      axisTick: { show: false }
@@ -121,7 +131,7 @@
      {
         type: 'bar',
         barWidth: 28,
         data: data.value.recycleItems.map(e => e.value),
         data: valueRows.value.map(e => e.value),
         itemStyle: { color: primary.value, borderRadius: [6, 6, 0, 0] }
      }
   ]