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

云

7 小时以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue

@@ -15,7 +15,7 @@
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#8FA3C8' } }"
        style="height: 260px"
      />
    </div>
@@ -29,8 +29,9 @@
import PanelHeader from './PanelHeader.vue'
import ProductTypeSwitch from './ProductTypeSwitch.vue'
import { productInOutAnalysis } from '@/api/viewIndex.js'
import { BI, withTooltip } from '../theme.js'

const productType = ref(1) // 1=原材料 2=半成品 3=成品
const productType = ref(1) // 1=原材料 2=成品 3=半成品（与 ProductTypeSwitch 一致）

const chartStyle = { width: '100%', height: '130%' }

@@ -49,10 +50,10 @@
  itemGap: 24,
  itemWidth: 12,
  itemHeight: 12,
  textStyle: { color: '#B8C8E0', fontSize: 14 },
  textStyle: { color: BI.text, fontSize: 14 },
  data: [
    { name: '出库', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
    { name: '入库', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
    { name: '出库', itemStyle: { color: BI.accentBright } },
    { name: '入库', itemStyle: { color: '#35C6D6' } },
  ],
}

@@ -61,9 +62,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: { show: false },
    axisLabel: { color: BI.text, fontSize: 12 },
    splitLine: { show: false },
  },
])

@@ -71,11 +72,11 @@
  {
    type: 'value',
    name: '单位: 件',
    nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 0] },
    nameTextStyle: { color: BI.text, fontSize: 12, padding: [0, 0, 0, 0] },
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { lineStyle: { color: '#B8C8E0' } },
    axisLabel: { color: BI.text, fontSize: 12 },
    splitLine: { lineStyle: { color: 'rgba(143, 163, 200, 0.15)' } },
  },
]

@@ -83,16 +84,16 @@
  {
    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 },
    symbolSize: 6,
    lineStyle: { color: BI.accentBright, width: 2 },
    itemStyle: { color: BI.accentBright, 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)' },
        { offset: 0, color: 'rgba(74, 108, 240, 0.25)' },
        { offset: 1, color: 'rgba(74, 108, 240, 0)' },
      ]),
    },
    data: [],
@@ -101,16 +102,16 @@
  {
    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 },
    symbolSize: 6,
    lineStyle: { color: '#35C6D6', width: 2 },
    itemStyle: { color: '#35C6D6', 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)' },
        { offset: 0, color: 'rgba(53, 198, 214, 0.25)' },
        { offset: 1, color: 'rgba(53, 198, 214, 0)' },
      ]),
    },
    data: [],
@@ -118,11 +119,9 @@
  },
])

const tooltip = {
const tooltip = withTooltip({
  trigger: 'axis',
  axisPointer: { type: 'line' },
  borderWidth: 1,
  textStyle: { fontSize: 12 },
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {
@@ -130,7 +129,7 @@
    })
    return result
  },
}
})

const fetchData = () => {
  productInOutAnalysis({ type: productType.value })
@@ -172,7 +171,9 @@
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  border: 1px solid var(--bi-panel-border);
  background: var(--bi-panel-bg);
  border-radius: 8px;
  padding: 18px;
  width: 100%;
  height: 428px;