瑞恒看板库存模块

src/views/pms/stat/rhkb.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { DESIGN_HEIGHT, DESIGN_WIDTH } from '@/utils/kb'
-import dayjs from 'dayjs'
 
 import rhsummary from './rhkb/rhsummary.vue'
 import deviceType from './rhkb/deviceType.vue'
@@ -26,8 +25,6 @@ const pageTabs = [
   { label: '生产日报', value: 'device' }
 ] as const
 
-const selectedDate = ref(dayjs().subtract(1, 'day').format('YYYY-MM-DD'))
-
 const wrapperRef = ref<HTMLDivElement>()
 const scale = ref(1)
 
@@ -35,7 +32,6 @@ let resizeObserver: ResizeObserver | null = null
 let resizeRaf = 0
 
 provide('rhKbScale', scale)
-provide('rhKbInventoryDate', selectedDate)
 
 const targetWrapperStyle = computed(() => ({
   width: `${DESIGN_WIDTH * scale.value}px`,
@@ -106,16 +102,6 @@ onUnmounted(() => {
               {{ tab.label }}
             </button>
           </div>
-          <div v-if="activePage === 'home'" class="page-filters">
-            <el-date-picker
-              v-model="selectedDate"
-              value-format="YYYY-MM-DD"
-              type="date"
-              placeholder="选择日期"
-              :clearable="false"
-              class="page-date-picker" />
-          </div>
-
           <div v-if="activePage === 'home'" class="kb-home-page">
             <rhsummary class="kb-stage-card kb-stage-card--1" />
             <div class="kb-chart-grid">
@@ -165,29 +151,6 @@ onUnmounted(() => {
   gap: calc(12px * var(--kb-scale));
 }
 
-.page-filters {
-  position: absolute;
-  top: calc(10px * var(--kb-scale));
-  right: calc(20px * var(--kb-scale));
-  z-index: 3;
-}
-
-.page-date-picker {
-  width: calc(132px * var(--kb-scale));
-
-  :deep(.el-input__wrapper) {
-    min-height: calc(28px * var(--kb-scale));
-    padding: 0 calc(8px * var(--kb-scale));
-    background: rgb(255 255 255 / 88%);
-    border-radius: calc(5px * var(--kb-scale));
-    box-shadow: 0 0 0 1px rgb(31 91 184 / 28%) inset;
-  }
-
-  :deep(.el-input__inner) {
-    font-size: calc(13px * var(--kb-scale));
-  }
-}
-
 .page-tab {
   height: calc(28px * var(--kb-scale));
   min-width: calc(82px * var(--kb-scale));

src/views/pms/stat/rhkb/inventorySituation.vue

@@ -13,8 +13,6 @@ import { IotStatApi } from '@/api/pms/stat'
 import dayjs from 'dayjs'
 import { getUserProfile } from '@/api/system/user/profile'
 
-type ActivePanel = 'distribution' | 'trend'
-
 type InventoryItem = {
   project: string
   mayInventoryAmount: number
@@ -31,9 +29,8 @@ type InventoryDistributionResponse = {
   storageNameInventoryPair?: Record<string, number>
 }
 
-const activePanel = ref<ActivePanel>('distribution')
 const DEFAULT_DATE = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
-const selectedDate = inject<Ref<string>>('rhKbInventoryDate', ref(DEFAULT_DATE))
+const selectedDate = ref(DEFAULT_DATE)
 const inventoryResult = ref<InventoryDistributionResponse | null>(null)
 const distributionChartRef = ref<HTMLDivElement>()
 const trendChartRef = ref<HTMLDivElement>()
@@ -41,11 +38,6 @@ const trendChartRef = ref<HTMLDivElement>()
 let distributionChart: echarts.ECharts | null = null
 let trendChart: echarts.ECharts | null = null
 
-const panelOptions: Array<{ label: string; value: ActivePanel }> = [
-  { label: '分布', value: 'distribution' },
-  { label: '趋势', value: 'trend' }
-]
-
 const yuanToWan = (value: number) => Number((value / 10000).toFixed(2))
 
 const inventoryData: InventoryItem[] = [
@@ -105,8 +97,6 @@ const inventoryData: InventoryItem[] = [
   }
 ]
 
-const activeTitle = computed(() => (activePanel.value === 'distribution' ? '存货分布' : '积压趋势'))
-
 function formatAmount(value: number) {
   return Number(value || 0).toFixed(2)
 }
@@ -198,9 +188,9 @@ function getDistributionOption(
     }),
     title: [
       {
-        text: `5月底余额\n${formatAmount(inventoryTotal)} 万元`,
+        text: '各单位存货占比分布',
         left: '26.5%',
-        top: layout.distributionTitleTop,
+        top: 4,
         textAlign: 'center',
         textStyle: {
           color: THEME.text.strong,
@@ -211,9 +201,9 @@ function getDistributionOption(
         }
       },
       {
-        text: `5月底积压\n${formatAmount(backlogTotal)} 万元`,
+        text: '各单位积压占比分布',
         left: '72.5%',
-        top: layout.distributionTitleTop,
+        top: 4,
         textAlign: 'center',
         textStyle: {
           color: THEME.text.strong,
@@ -247,7 +237,18 @@ function getDistributionOption(
         center: ['27%', layout.distributionPieCenterY],
         minAngle: 5,
         label: {
-          show: false
+          show: true,
+          position: 'outside',
+          formatter: '{b}\n{d}%',
+          color: THEME.text.regular,
+          fontSize: layout.labelFontSize,
+          fontWeight: 600,
+          fontFamily: FONT_FAMILY
+        },
+        labelLine: {
+          show: true,
+          length: layout.labelDistance,
+          length2: layout.labelDistance
         },
         data: data.map((item) => ({
           name: item.project,
@@ -261,7 +262,18 @@ function getDistributionOption(
         center: ['73%', layout.distributionPieCenterY],
         minAngle: 5,
         label: {
-          show: false
+          show: true,
+          position: 'outside',
+          formatter: '{b}\n{d}%',
+          color: THEME.text.regular,
+          fontSize: layout.labelFontSize,
+          fontWeight: 600,
+          fontFamily: FONT_FAMILY
+        },
+        labelLine: {
+          show: true,
+          length: layout.labelDistance,
+          length2: layout.labelDistance
         },
         data: data
           .filter((item) => item.mayBacklogAmount > 0)
@@ -374,6 +386,36 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
         align: 'right'
       }
     },
+    graphic: [
+      {
+        type: 'text',
+        left: '26.5%',
+        top: '39%',
+        style: {
+          text: `总库存\n${formatAmount(inventoryTotal)}万元`,
+          textAlign: 'center',
+          fill: THEME.text.strong,
+          fontSize: layout.distributionTitleFontSize + 2,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        }
+      },
+      {
+        type: 'text',
+        left: '72.5%',
+        top: '39%',
+        style: {
+          text: `总积压\n${formatAmount(backlogTotal)}万元`,
+          textAlign: 'center',
+          fill: THEME.text.strong,
+          fontSize: layout.distributionTitleFontSize + 2,
+          fontWeight: 700,
+          lineHeight: layout.distributionTitleLineHeight + 6,
+          fontFamily: FONT_FAMILY
+        }
+      }
+    ],
     series: [
       {
         name: '年初积压',
@@ -500,19 +542,6 @@ async function requestInventoryDistribution() {
   }
 }
 
-watch(activePanel, (value) => {
-  nextTick(() => {
-    if (value === 'distribution') {
-      if (!distributionChart) initDistributionChart()
-      renderDistributionChart()
-    } else {
-      if (!trendChart) initTrendChart()
-      renderTrendChart()
-    }
-    resizeCharts()
-  })
-})
-
 onMounted(() => {
   initDistributionChart()
   window.addEventListener('resize', resizeCharts)
@@ -546,20 +575,18 @@ onUnmounted(() => {
           <span></span>
           <span></span>
         </div>
-        {{ activeTitle }}
+        存货分布
       </div>
-      <el-segmented
-        v-model="activePanel"
-        :options="panelOptions"
-        size="small"
-        class="inventory-switch" />
+      <el-date-picker
+        v-model="selectedDate"
+        value-format="YYYY-MM-DD"
+        type="date"
+        placeholder="选择日期"
+        :clearable="false"
+        class="inventory-date-picker" />
     </div>
     <div class="flex-1 min-h-0">
-      <div
-        v-show="activePanel === 'distribution'"
-        ref="distributionChartRef"
-        class="inventory-chart"></div>
-      <div v-show="activePanel === 'trend'" ref="trendChartRef" class="inventory-chart"></div>
+      <div ref="distributionChartRef" class="inventory-chart"></div>
     </div>
   </div>
 </template>
@@ -567,22 +594,19 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 @import url('@/styles/kb.scss');
 
-.inventory-switch {
-  --el-segmented-item-selected-color: #03409b;
-  --el-segmented-item-selected-bg-color: rgb(255 255 255 / 86%);
-  --el-segmented-bg-color: rgb(31 91 184 / 10%);
-  --el-segmented-item-hover-bg-color: rgb(255 255 255 / 56%);
-
-  min-height: calc(26px * var(--kb-scale, 1));
-  padding: calc(2px * var(--kb-scale, 1));
-  border: 1px solid rgb(31 91 184 / 12%);
-  transform: translateY(calc(-2px * var(--kb-scale, 1)));
-
-  :deep(.el-segmented__item) {
-    min-height: calc(22px * var(--kb-scale, 1));
-    padding: 0 calc(8px * var(--kb-scale, 1));
-    font-size: calc(13px * var(--kb-scale, 1));
-    font-weight: 600;
+.inventory-date-picker {
+  width: calc(132px * var(--kb-scale, 1));
+
+  :deep(.el-input__wrapper) {
+    min-height: calc(26px * var(--kb-scale, 1));
+    padding: 0 calc(7px * var(--kb-scale, 1));
+    background: rgb(255 255 255 / 82%);
+    border-radius: calc(4px * var(--kb-scale, 1));
+    box-shadow: 0 0 0 1px rgb(31 91 184 / 24%) inset;
+  }
+
+  :deep(.el-input__inner) {
+    font-size: calc(12px * var(--kb-scale, 1));
     color: #29527f;
   }
 }