refactor(layout): 调整布局样式并优化轮播卡片组件

云

2026-09-15 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/productionAnalysis/components/center-center.vue

@@ -1,15 +1,8 @@
<template>
  <div>
    <!-- 设备统计 -->
    <div class="equipment-stats">
      <div class="equipment-header">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
          class="equipment-icon"
        />
        <span class="equipment-title">投入产出分析</span>
      </div>
    <!-- 投入产出分析 -->
    <PanelHeader title="投入产出分析" />
    <div class="bi-panel chart-box">
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
@@ -19,7 +12,7 @@
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        :options="{ backgroundColor: 'transparent', textStyle: { color: BI_COLORS.text } }"
        style="height: 260px"
      />
    </div>
@@ -28,9 +21,10 @@

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import { inputOutputAnalysis } from '@/api/viewIndex.js'
import { BI_COLORS, BI_TOOLTIP, areaGradient } from '../theme.js'

const chartStyle = { width: '100%', height: '100%' }
const grid = {
@@ -48,10 +42,10 @@
  itemGap: 24,
  itemWidth: 12,
  itemHeight: 12,
  textStyle: { color: '#B8C8E0', fontSize: 14 },
  textStyle: { color: BI_COLORS.text, fontSize: 14 },
  data: [
    { name: '产出', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
    { name: '投入', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
    { name: '产出', itemStyle: { color: BI_COLORS.primary } },
    { name: '投入', itemStyle: { color: BI_COLORS.teal } },
  ],
}

@@ -60,9 +54,9 @@
    type: 'category',
    data: [],
    axisTick: { show: false },
    axisLine: { show: false, lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(184, 200, 224, 0.2)' } },
    axisLine: { lineStyle: { color: BI_COLORS.axisLine } },
    axisLabel: { color: BI_COLORS.text, fontSize: 12 },
    splitLine: { show: false },
  },
])

@@ -70,11 +64,11 @@
  {
    type: 'value',
    name: '单位: 件',
    nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 0] },
    nameTextStyle: { color: BI_COLORS.text, fontSize: 12 },
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { lineStyle: { color: '#B8C8E0' } },
    axisLabel: { color: BI_COLORS.text, fontSize: 12 },
    splitLine: { lineStyle: { color: BI_COLORS.splitLine } },
  },
]

@@ -82,36 +76,26 @@
  {
    name: '产出',
    type: 'line',
    smooth: false,
    smooth: true,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 137, 254, 1)', width: 2 },
    itemStyle: { color: 'rgba(11, 137, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 137, 254, 0.40)' },
        { offset: 1, color: 'rgba(11, 137, 254, 0.05)' },
      ]),
    },
    symbolSize: 6,
    lineStyle: { color: BI_COLORS.primary, width: 2 },
    itemStyle: { color: BI_COLORS.primary, borderWidth: 0 },
    areaStyle: { color: areaGradient(BI_COLORS.primary) },
    data: [],
    emphasis: { focus: 'series' },
  },
  {
    name: '投入',
    type: 'line',
    smooth: false,
    smooth: true,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 },
    itemStyle: { color: 'rgba(11, 249, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 249, 254, 0.5)' },
        { offset: 1, color: 'rgba(11, 249, 254, 0.05)' },
      ]),
    },
    symbolSize: 6,
    lineStyle: { color: BI_COLORS.teal, width: 2 },
    itemStyle: { color: BI_COLORS.teal, borderWidth: 0 },
    areaStyle: { color: areaGradient(BI_COLORS.teal) },
    data: [],
    emphasis: { focus: 'series' },
  },
@@ -120,8 +104,7 @@
const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'line' },
  borderWidth: 1,
  textStyle: { fontSize: 12 },
  ...BI_TOOLTIP,
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {
@@ -152,42 +135,8 @@
</script>

<style scoped>
.equipment-stats {
  border: 1px solid #1a58b0;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-header {
  font-weight: 500;
  font-size: 21px;
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 126, 255, 0) 0%,
      rgba(0, 126, 255, 0.4549) 35%,
      #007eff 78%,
      #007eff 100%
    )
    1;
  padding-bottom: 2px;
}

.equipment-title {
  font-weight: 500;
  font-size: 18px;
  background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 50px;
}

.equipment-icon {
  width: 50px;
  height: 50px;
.chart-box {
  padding: 12px 18px 18px;
  margin-top: 4px;
}
</style>