修改显示

src/views/bpm/vis-page/factoryProductionDashboard.vue

@@ -585,8 +585,8 @@
       this.updateTime();
       this.updateTimer = setInterval(this.updateTime, 1000);
       const now = new Date();
-      const start = new Date(now.getTime() - 1000 * 60 * 60 * 24 * 30);
-      this.dateRange = [this.formatDate(start), this.formatDate(now)];
+      const today = this.formatDate(now);
+      this.dateRange = [today, today];
       this.getFactoryListByData();
     },
     mounted() {
@@ -766,31 +766,16 @@
           value: this.normalizeNumber(item?.value)
         }));
       },
-      getDateType() {
-        const [start, end] = this.dateRange || [];
-        if (!start || !end) return 1;
-        const startDate = new Date(start);
-        const endDate = new Date(end);
-        if (
-          Number.isNaN(startDate.getTime()) ||
-          Number.isNaN(endDate.getTime())
-        ) {
-          return 1;
-        }
-        if (start === end) return 1;
-        if (
-          startDate.getFullYear() === endDate.getFullYear() &&
-          startDate.getMonth() === endDate.getMonth()
-        ) {
-          return 2;
-        }
-        return 3;
-      },
       getBaseParams(extra = {}) {
         if (!this.factoryId) return null;
+        const [rangeStart, rangeEnd] = this.dateRange || [];
+        const today = this.formatDate(new Date());
+        const startTime = rangeStart || today;
+        const endTime = rangeEnd || startTime;
         return {
-          dateType: this.getDateType(),
           factoryId: this.factoryId,
+          startTime,
+          endTime,
           ...extra
         };
       },

src/views/bpm/vis-page/renewableResourcesDashboard.vue

@@ -132,7 +132,9 @@
                 <div class="rr-inv-chart-wrap">
                   <div ref="inventoryDonutRef" class="rr-native-chart"></div>
                   <div class="rr-inv-center">
-                    <span class="rr-inv-center-value">{{ inventoryOverview.total }}</span>
+                    <span class="rr-inv-center-value">{{
+                      inventoryOverview.total
+                    }}</span>
                     <span class="rr-inv-center-label">库存总量</span>
                   </div>
                 </div>
@@ -229,17 +231,38 @@
 
           <section class="rr-panel rr-panel-production">
             <div class="rr-panel-title">生产总览</div>
-            <div class="rr-chart-panel">
-              <area-line-chart
-                v-if="isChartReady"
-                :categories="monthCategories"
-                :series="productionSeries"
-                :colors="['#4fa5ff', '#22d4b8']"
-                class="rr-fill-chart"
-              />
-            </div>
-            <div class="rr-mini-bar-panel">
-              <div ref="productionBarRef" class="rr-native-chart"></div>
+            <div class="rr-procurement-body">
+              <div class="rr-procurement-pane rr-procurement-pane-area">
+                <div class="rr-pane-caption">
+                  <span>单位：件</span>
+                  <div class="rr-pane-legend">
+                    <span class="rr-legend-item rr-legend-item-blue"
+                      >采购量</span
+                    >
+                    <span class="rr-legend-item rr-legend-item-gold"
+                      >到货量</span
+                    >
+                  </div>
+                </div>
+                <div class="rr-chart-panel rr-chart-panel-compact">
+                  <area-line-chart
+                    v-if="isChartReady"
+                    :categories="monthCategories"
+                    :series="procurementSeries"
+                    :colors="['#3c87ff', '#e5b15d']"
+                    :show-legend="false"
+                    class="rr-fill-chart"
+                  />
+                </div>
+              </div>
+              <div class="rr-procurement-pane rr-procurement-pane-bar">
+                <div class="rr-pane-caption rr-pane-caption-right">
+                  <span>准时交付率</span>
+                </div>
+                <div class="rr-mini-bar-panel rr-mini-bar-panel-fill">
+                  <div ref="productionBarRef" class="rr-native-chart"></div>
+                </div>
+              </div>
             </div>
           </section>
 
@@ -398,11 +421,17 @@
         procurementSeries: [
           {
             name: '采购量',
-            data: [2100, 3200, 2800, 4200, 4673, 2600, 1800, 2200, 1500, 2800, 4800, 1900]
+            data: [
+              2100, 3200, 2800, 4200, 4673, 2600, 1800, 2200, 1500, 2800, 4800,
+              1900
+            ]
           },
           {
             name: '到货量',
-            data: [1400, 2100, 1800, 2600, 2895, 1700, 1300, 1600, 1100, 1700, 2500, 1200]
+            data: [
+              1400, 2100, 1800, 2600, 2895, 1700, 1300, 1600, 1100, 1700, 2500,
+              1200
+            ]
           }
         ],
         productionSeries: [
@@ -583,7 +612,7 @@
         const designWidth = 1920;
         const designHeight = 1080;
         const scale = Math.min(w / designWidth, h / designHeight);
-        const baseFontSize = isFs ? Math.max(14, Math.min(18, 16 * scale)) : 16;
+        const baseFontSize = isFs ? 16 * scale : 16;
         document.documentElement.style.fontSize = `${baseFontSize}px`;
       },
       initNativeCharts() {
@@ -618,7 +647,7 @@
         if (!el) return;
         this.chartInstances[key]?.dispose();
         const chart = echarts.init(el);
-        if (key === 'procurementBar') {
+        if (key === 'procurementBar' || key === 'productionBar') {
           const topColor = '#0DF1FF';
           const barW = 22;
           const diamondW = barW;
@@ -627,13 +656,18 @@
             backgroundColor: 'transparent',
             tooltip: {
               trigger: 'axis',
-              axisPointer: { type: 'shadow', shadowStyle: { color: 'rgba(13,241,255,0.06)' } },
+              axisPointer: {
+                type: 'shadow',
+                shadowStyle: { color: 'rgba(13,241,255,0.06)' }
+              },
               backgroundColor: 'rgba(255,255,255,0.96)',
               borderColor: '#ddd',
               textStyle: { color: '#333', fontSize: 13 },
               formatter: (params) => {
                 const p = params.find((s) => s.seriesIndex === 1);
-                return p ? `<b>${p.name}</b><br/>准时到货率 <b>${p.value}%</b>` : '';
+                return p
+                  ? `<b>${p.name}</b><br/>准时到货率 <b>${p.value}%</b>`
+                  : '';
               }
             },
             grid: {
@@ -715,20 +749,6 @@
                   shadowBlur: 8,
                   shadowColor: 'rgba(13, 241, 255, 0.55)'
                 }
-              },
-              {
-                name: 'bottomCap',
-                type: 'pictorialBar',
-                data: new Array(data.length).fill(0.5),
-                symbol: 'diamond',
-                symbolSize: [diamondW, diamondH],
-                symbolOffset: [0, diamondH / 2],
-                symbolPosition: 'start',
-                z: 2,
-                tooltip: { show: false },
-                itemStyle: {
-                  color: 'rgba(10, 68, 122, 0.78)'
-                }
               }
             ]
           });
@@ -779,7 +799,13 @@
         if (!this.$refs.inventoryDonutRef) return;
         this.chartInstances.inventoryDonut?.dispose();
         const chart = echarts.init(this.$refs.inventoryDonutRef);
-        const pieColors = ['#2d5dbe', '#ffb648', '#3cd8c8', '#7b69ff', '#1fa4df'];
+        const pieColors = [
+          '#2d5dbe',
+          '#ffb648',
+          '#3cd8c8',
+          '#7b69ff',
+          '#1fa4df'
+        ];
         const pieData = [
           { name: '成品数', value: 2533 },
           { name: '半成品数', value: 1050 },
@@ -851,7 +877,9 @@
               silent: true,
               label: { show: false },
               labelLine: { show: false },
-              data: [{ value: 1, itemStyle: { color: 'rgba(60, 135, 255, 0.18)' } }]
+              data: [
+                { value: 1, itemStyle: { color: 'rgba(60, 135, 255, 0.18)' } }
+              ]
             }
           ]
         });
@@ -882,7 +910,15 @@
           },
           xAxis: {
             type: 'category',
-            data: ['数据一', '数据二', '数据三', '数据四', '数据五', '数据六', '数据七'],
+            data: [
+              '数据一',
+              '数据二',
+              '数据三',
+              '数据四',
+              '数据五',
+              '数据六',
+              '数据七'
+            ],
             axisLine: { lineStyle: { color: 'rgba(21, 77, 123, 0.6)' } },
             axisTick: { show: false },
             axisLabel: { color: '#b8d4ef', fontSize: 10 }
@@ -894,7 +930,11 @@
             interval: 10,
             axisLine: { show: false },
             axisTick: { show: false },
-            axisLabel: { color: '#b8d4ef', fontSize: 10, formatter: '{value}%' },
+            axisLabel: {
+              color: '#b8d4ef',
+              fontSize: 10,
+              formatter: '{value}%'
+            },
             splitLine: { lineStyle: { color: 'rgba(21, 77, 123, 0.24)' } }
           },
           series: [
@@ -906,7 +946,11 @@
               symbolSize: 8,
               showSymbol: true,
               lineStyle: { color: '#3c87ff', width: 2.5 },
-              itemStyle: { color: '#3c87ff', borderColor: '#fff', borderWidth: 2 },
+              itemStyle: {
+                color: '#3c87ff',
+                borderColor: '#fff',
+                borderWidth: 2
+              },
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: 'rgba(60, 135, 255, 0.3)' },
@@ -1276,7 +1320,7 @@
   .rr-side-column {
     min-height: 0;
     display: grid;
-    grid-template-rows: minmax(6.5rem, auto) minmax(12.4rem, 1fr) minmax(12.4rem, 1fr);
+    grid-template-rows: 1fr 1fr 1fr;
     gap: 0.6rem;
   }
 
@@ -1466,7 +1510,7 @@
 
   .rr-summary-main {
     display: flex;
-    align-items: baseline;
+    align-items: flex-end;
     justify-content: flex-start;
     gap: 0.06rem;
     margin-top: 0.08rem;
@@ -1498,15 +1542,14 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    justify-content: flex-end;
+    justify-content: center;
     gap: 0.02rem;
     min-width: 0;
-    margin-left: 0.08rem;
-    padding-bottom: 0.02rem;
+    margin-left: 0.1rem;
     font-size: clamp(0.3rem, 0.36vw, 0.4rem);
     white-space: nowrap;
-    flex-shrink: 1;
-    overflow: hidden;
+    flex-shrink: 0;
+    align-self: stretch;
   }
 
   .rr-summary-trend-label {
@@ -1517,7 +1560,7 @@
   .rr-summary-trend-value {
     font-size: clamp(0.32rem, 0.38vw, 0.42rem);
     font-weight: 600;
-    line-height: 1.1;
+    line-height: 1.2;
   }
 
   .rr-summary-trend.up .rr-summary-trend-value {
@@ -1713,7 +1756,7 @@
 
   .rr-map-head {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     gap: 0.75rem;
     min-height: 2.2rem;
@@ -1887,7 +1930,7 @@
 
   @media (max-width: 1600px) {
     .rr-side-column {
-      grid-template-rows: minmax(6rem, auto) minmax(11rem, 1fr) minmax(11rem, 1fr);
+      grid-template-rows: 1fr 1fr 1fr;
     }
 
     .rr-summary-strip {