新疆-融邦环保 1.大屏展示数据修改 2.销售台账展示字段修改

gaoluyang

8 天以前 84d7be872e96547becfbd1647ec77ed56f9f2dde

 src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue

@@ -3,8 +3,8 @@
    <PanelHeader title="销售品分布" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
      <div class="pie-chart-wrapper" ref="pieWrapperRef">
        <div class="pie-background" ref="pieBackgroundRef"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
@@ -13,7 +13,7 @@
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
          style="height: 100%"
        />
      </div>
    </div>
@@ -21,11 +21,15 @@
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ref, onMounted, onBeforeUnmount, computed, inject, watch } from 'vue'
import { productSalesAnalysis } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import { useChartBackground } from '@/hooks/useChartBackground.js'

const pieWrapperRef = ref(null)
const pieBackgroundRef = ref(null)

/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
@@ -63,9 +67,9 @@
  }))

  return {
    orient: 'vertical',
    top: 'center',
    left: '52%',
    orient: 'horizontal',
    bottom: 0,
    left: 'center',
    itemGap: 30,
    data: data,
    formatter: function (name) {
@@ -112,7 +116,7 @@
    name: '产品销售金额分析',
    type: 'pie',
    radius: '60%',
    center: ['25%', '50%'],
    center: ['50%', '45%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
@@ -137,6 +141,17 @@

const cardItems = ref([])

// 使用封装的背景位置调整方法（与其他文件保持一致）
const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
  wrapperRef: pieWrapperRef,
  backgroundRef: pieBackgroundRef,
  left: '50%',       // 图表中心 X 是 50%
  top: '45%',        // 图表中心 Y 是 45%（下面留出图例的位置）
  offsetX: '-51.5%', // X 轴偏移
  offsetY: '-50%',   // Y 轴偏移
  watchData: pieDatas // 监听数据变化，自动调整位置
})

const fetchData = () => {
  productSalesAnalysis()
    .then((res) => {
@@ -160,8 +175,20 @@
    })
}

const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
if (dataDashboardRefreshTick) {
  watch(dataDashboardRefreshTick, () => {
    fetchData()
  })
}

onMounted(() => {
  fetchData()
  initBackground()
})

onBeforeUnmount(() => {
  cleanupBackground()
})
</script>

@@ -172,21 +199,24 @@
  gap: 20px;
}

/* 左栏只剩这一块面板，高度撑满整栏，图表跟着把剩余空间占掉 */
.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
  flex: 1;
  min-height: 0;
}
.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  flex: 1;
  min-height: 0;
}
.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  left: 50%;
  top: 45%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;