反应板/小瓶样式调整

src/pages/Index/Regular/Consumables.vue

@@ -84,7 +84,7 @@
           v-for="(item, idx) in consumableStore.consumableData?.littBottleGroup"
           :key="idx"
           class="ball-grid"
-          :projectName="item.projShortName || ''"
+          :projectName="item.projName || ''"
           :currentCount="item.num"
           :totalBalls="25"
           :activatedBalls="item.num"

src/pages/Index/components/Consumables/InfoBar.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="status-bar" v-if="currentCount">
-    <span class="project-name">{{ projectName }}</span>
-    <span class="project-count">{{ currentCount }}/{{ maxCount }}</span>
-  </div>
-  <div v-else class="status-bar">
-    <span class="project-name">{{ projectName }}</span>
-    <span class="project-count"></span>
+  <div :style="`width:${width}`">
+    <div class="status-bar" v-if="currentCount">
+      <span class="project-name">{{ projectName }}</span>
+      <span class="project-count">{{ currentCount }}/{{ maxCount }}</span>
+    </div>
+    <div v-else class="status-bar">
+      <span class="project-name">{{ projectName }}</span>
+      <span class="project-count"></span>
+    </div>
   </div>
 </template>
 
@@ -26,6 +28,10 @@ const props = defineProps({
     type: Number,
     default: 25, // 默认值为25
   },
+  width: {
+    type: String,
+    default: '120px',
+  },
 })
 
 // 解构 props
@@ -34,25 +40,26 @@ const { projectName, currentCount, maxCount } = toRefs(props)
 
 <style scoped>
 .status-bar {
-  width: 100%;
   display: flex;
-  justify-content: space-around;
+  /* justify-content: space-between; */
   align-items: center;
   background-color: #808080;
-  font-size: 32px;
-  height: 32px;
-}
-
-.project-name {
-  font-weight: 700;
   font-size: 22px;
+  font-weight: 600;
+  height: 30px;
   color: #fff;
+  padding: 0 20px;
+}
+.project-name {
+  flex: 1 1 auto;
+  text-align: left;
+  margin-right: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
 .project-count {
-  font-weight: 700;
-  font-size: 22px;
-  color: #fff;
-  background-color: #808080;
+  flex: 0 0 auto;
+  margin-left: 10px;
 }
 </style>

src/pages/Index/components/Consumables/MainComponent.vue

@@ -5,7 +5,7 @@
       :activeColor="activeColor" :inUse="inUse"/>
 
     <!-- 项目信息组件 -->
-    <InfoBar :projectName="projectName" :currentCount="currentCount" :maxCount="maxCount" />
+    <InfoBar :projectName="projectName" :currentCount="currentCount" :maxCount="maxCount" :width="gridWidth"/>
   </div>
 </template>
 
@@ -62,7 +62,7 @@ const props = defineProps({
 .combined-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  /* align-items: center; */
   background-color: #555555;
   border-radius: 10px;
 }

src/pages/Index/components/Consumables/Plate.vue

@@ -40,7 +40,7 @@ defineProps({
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
-  gap: 0.5px;
+  gap: 2.5px;
   width: 355px;
   // height: 100%;
   background-color: #f0f0f0;

src/pages/Index/components/Consumables/SpttingPlates.vue

@@ -15,9 +15,9 @@
     <div class="sptting-plates">
       <div class="card" v-for="i in 6" :key="i">
         <div class="plate-area">
-          <div class="plate-bottom" v-if="plates.length > 0">
-            <span></span>
-            <span class="project-name">{{ plates[i - 1]?.projShortName }}</span>
+          <div class="plate-bottom" v-if="plates[i - 1]?.isInstall">
+            <span class="project-lot">{{ plates[i - 1]?.projName }}</span>
+            <span class="project-name">{{ plates[i - 1]?.lotId }}</span>
             <span class="project-number">{{
               !!plates[i - 1]?.isInstall ? `${plates[i - 1]?.num}/25` : ''
             }}</span>
@@ -115,7 +115,7 @@ const updateSliderEndVal = async (plateNum, order) => {
   display: flex;
   flex-direction: column;
   background-color: #f6f6f6;
-  // padding-left: 4px;
+  padding-left: 8px;
   // 温度区域
   .temperature {
     width: 100%;
@@ -188,11 +188,8 @@ const updateSliderEndVal = async (plateNum, order) => {
       background-color: #f6f6f6;
 
       .plate-area {
-        // width: 100%;
-        // height: 100%;
         display: flex;
         flex-direction: column;
-        align-items: center;
         position: relative;
 
         .close-circle {
@@ -216,18 +213,26 @@ const updateSliderEndVal = async (plateNum, order) => {
       }
 
       .plate-bottom {
-        width: 100%;
+        // width: 100%;
         height: 32px;
         background-color: #808080;
         display: flex;
-        justify-content: space-around;
+        // justify-content: space-around;
+        align-items: center;
         color: white;
-        line-height: 32px;
+        font-size: 22px;
+        padding: 0 10px;
+        gap: 8px;
 
-        .project-name,
+        .project-name, .project-lot {
+          flex: 1 1 auto;
+          text-align: left;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         .project-number {
-          font-size: 25px;
-          font-weight: 300;
+          flex: 0 0 auto;
         }
       }
     }

src/store/modules/consumables.ts

@@ -101,9 +101,10 @@ export const useConsumablesStore = defineStore(
     }
 
     const projectsAvailable = computed(() => {
-      //@ts-ignore
+
       const group = R.groupBy(
-        (p) => p.projName,
+        //@ts-ignore
+        R.prop('projName'),
         consumableData.value.reactionPlateGroup,
       )
       const pNames = R.keys(group).filter((n) => n !== 'null')