fix:食堂用餐人数统计

src/components/abnormal-event-type-status.vue

@@ -1,19 +1,29 @@
 <template>
   <div class="container">
-    <div class="segmented">
-      <el-segmented v-model="activeSegment" :options="props.segments" :props="{ label: 'label', value: 'value' }"
-        size="small" @change="dateTypeChange" />
-    </div>
-    <div class="chart" ref="chartRef"></div>
-    <div class="area-info">
-      <div class="area-info-item" v-for="(item, index) in props.data" :key="item.name" @click="doItem(item)">
+    <div class="chart" ref="chartRef" />
+    <div class="info">
+      <div class="segmented">
+        <el-segmented v-model="activeSegment" :options="props.segments" :props="{ label: 'label', value: 'value' }"
+          size="small" @change="dateTypeChange" />
+      </div>
+      <div class="area-info">
+        <div class="area-info-item" v-for="(item, index) in 10" :key="item.name" @click="doItem(item)">
+          <span
+            :style="{ width: '1vw', height: '1vw', background: colors[index], borderRadius: '50%', display: 'inline-block' }"></span>
+          <span class="name">{{ item.title }}</span>
+          <span :style="{ marginLeft: '0.2vw', color: colors[index] }">{{ item.total }}次</span>
+          <span :style="{ marginLeft: '0.1vw', color: colors[index], fontSize: '0.6vw' }"> ({{ percent(item.total) }})
+          </span>
+        </div>
+      </div>
+      <!-- <div class="area-info-item" v-for="(item, index) in props.data" :key="item.name" @click="doItem(item)">
         <span
           :style="{ width: '1vw', height: '1vw', background: colors[index], borderRadius: '50%', display: 'inline-block' }"></span>
         <span class="name">{{ item.title }}</span>
         <span :style="{ marginLeft: '0.2vw', color: colors[index] }">{{ item.total }}次</span>
         <span :style="{ marginLeft: '0.1vw', color: colors[index], fontSize: '0.6vw' }"> ({{ percent(item.total) }})
         </span>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -62,7 +72,7 @@ const props = defineProps({
   },
 });
 
-const colors = ["#31D3A4", "#1AD0F9", "#5470C6"];
+const colors = ["#31D3A4", "#1AD0F9", "#5470C6", "#FFC83D", "#FF6B6B", "#9B59B6"];
 const activeSegment = ref(props.segments[0].value || "TODAY");
 const chartRef = useTemplateRef("chartRef");
 let chartInstance = null;
@@ -198,56 +208,66 @@ onBeforeUnmount(() => {
 
 <style scoped lang="less">
 .container {
-  position: relative;
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
-  align-items: center;
-
-  .segmented {
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 2;
-
-    .el-segmented {
-      --el-segmented-item-selected-color: var(--el-text-color-primary);
-      --el-segmented-item-selected-bg-color: #095d82;
-      --el-border-radius-base: 8px;
-    }
-  }
 
   .chart {
-    flex: 1;
+    width: 100%;
     height: 100%;
   }
 
-  .area-info {
-    flex: 1;
+  .info {
     height: 100%;
+    flex: 1;
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: center;
+    gap: 1vh;
 
-    .area-info-item {
-      display: flex;
-      align-items: center;
-      padding: 0.4vw 0;
-      font-size: 0.7vw;
-      border-bottom: 1px dashed #eeeeee99;
-      cursor: pointer;
+    .segmented {
+      .el-segmented {
+        --el-segmented-item-selected-color: var(--el-text-color-primary);
+        --el-segmented-item-selected-bg-color: #095d82;
+        --el-border-radius-base: 8px;
+      }
+    }
 
-      .name {
-        width: 5vw;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    .area-info {
+      overflow: scroll;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
 
-        margin-left: 0.2vw;
-        color: #b8c7d9;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .area-info-item {
+        display: flex;
+        align-items: center;
+        padding: 0.4vw 0;
         font-size: 0.7vw;
+        border-bottom: 1px dashed #eeeeee99;
+        cursor: pointer;
+
+        .name {
+          width: 5vw;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          margin-left: 0.2vw;
+          color: #b8c7d9;
+          font-size: 0.7vw;
+        }
       }
     }
   }
+
+
+
 }
 </style>