fix: 大屏初始化样式自适应问题

spring

3 天以前 a3828ee89b866f9b4857883cf6eee34170c5d87e

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

@@ -5,8 +5,8 @@
      <div class="filters-row">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
      </div>
      <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"
@@ -23,11 +23,15 @@
</template>

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

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

const dateType = ref(1) // 1=周 2=月 3=季度

@@ -133,6 +137,18 @@
  textStyle: { color: '#B8C8E0' },
}

// 使用封装的背景位置调整方法
// 图表中心是 ['25%', '50%']，背景需要对齐到这个位置
const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
  wrapperRef: pieWrapperRef,
  backgroundRef: pieBackgroundRef,
  left: '25%',       // 图表中心 X 是 25%
  top: '50%',        // 图表中心 Y 是 50%
  offsetX: '-51.5%', // X 轴偏移
  offsetY: '-50%',   // Y 轴偏移
  watchData: pieDatas // 监听数据变化，自动调整位置
})

const fetchData = () => {
  productSalesAnalysis()
    .then((res) => {
@@ -156,6 +172,11 @@

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

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

@@ -190,9 +211,6 @@

.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
@@ -201,5 +219,9 @@
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  /* 位置由 JS 动态设置，默认居中 */
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
}
</style>