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

云

10 小时以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <PanelHeader title="在制品统计分析" />
    <div class="main-panel panel-item-customers">
    <div class="main-panel panel-item-customers bi-panel">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="chart-wrapper">
        <Echarts
@@ -13,7 +13,7 @@
          :tooltip="tooltip"
          :xAxis="workInProcessXAxis"
          :yAxis="workInProcessYAxis"
          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
          :options="{ backgroundColor: 'transparent', textStyle: { color: BI_COLORS.text } }"
          style="height: 100%"
        />
      </div>
@@ -27,6 +27,7 @@
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { getWorkInProcessTurnover } from '@/api/viewIndex.js'
import { BI_COLORS, BI_TOOLTIP, barGradient } from '../theme.js'

// 在制品周转统计对象
const workInProcessStatistics = ref({
@@ -53,10 +54,11 @@
const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'shadow' },
  ...BI_TOOLTIP,
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },
@@ -67,46 +69,38 @@
  {
    type: 'category',
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0' },
    axisLabel: { color: BI_COLORS.text },
    data: [],
  },
])
const workInProcessYAxis = [
  {
    type: 'value',
    axisLabel: { color: '#B8C8E0' },
    axisLabel: { color: BI_COLORS.text },
    name: '',
    splitLine: { lineStyle: { color: BI_COLORS.splitLine } },
  },
]
const workInProcessBarLegend = {
  show: false,
  textStyle: { color: '#B8C8E0' },
  textStyle: { color: BI_COLORS.text },
  data: [],
}
const workInProcessBarSeries = ref([
  {
    name: '在制品数量',
    type: 'bar',
    barWidth: 25,
    barWidth: 20,
    barGap: 0,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
        { offset: 1, color: 'rgba(0,164,237,0)' },
        { offset: 0, color: '#4EE4FF' },
        ],
      },
      borderRadius: [3, 3, 0, 0],
      color: barGradient(BI_COLORS.primary),
    },
    label: {
      show: true,
      position: 'top',
      color: '#B8C8E0',
      color: BI_COLORS.text,
    },
    data: [],
  },
@@ -156,7 +150,6 @@
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;