台桌页面增加统计显示

src/views/tool/table/index.vue

@@ -40,15 +40,25 @@
 			</el-button> -->
     </div>
 
-    <div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
+    <div class="u-flex" style="justify-content: space-between">
-      <div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
+      <div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
-        <span
+        <div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
-          class="dot"
+          <span
-          :style="{
+            class="dot"
-            backgroundColor: status[key] ? status[key].type : '',
+            :style="{
-          }"
+              backgroundColor: status[key] ? status[key].type : '',
-        />
+            }"
-        {{ item.label }}
+          />
+          {{ item.label }}
+        </div>
+      </div>
+      <div style="color: #3f9eff; font-weight: 700; padding-right: 30px">
+        <span style="color: #333; font-weight: 400">未结账：</span>
+        <span>{{ totalOrder }}笔</span>
+        <span>｜</span>
+        <span>{{ totalPerson }}人</span>
+        <span>｜</span>
+        <span>¥{{ totalMoney }}</span>
       </div>
     </div>
 
@@ -363,7 +373,7 @@ function addTableShow(item) {
 const tableList = ref([]);
 const tablequery = reactive({
   page: 1,
-  size: 100,
+  size: 300,
 });
 
 async function tableInit() {
@@ -371,6 +381,33 @@ async function tableInit() {
   tableList.value = res.records;
 }
 
+const totalOrder = computed(() => {
+  return tableList.value.reduce((pre, cur) => {
+    if (cur.status == "unsettled") {
+      return pre + 1;
+    }
+    return pre;
+  }, 0);
+});
+
+const totalPerson = computed(() => {
+  return tableList.value.reduce((pre, cur) => {
+    if (cur.status == "unsettled") {
+      return pre + cur.personNum;
+    }
+    return pre;
+  }, 0);
+});
+
+const totalMoney = computed(() => {
+  return tableList.value.reduce((pre, cur) => {
+    if (cur.status == "unsettled") {
+      return pre + cur.orderAmount;
+    }
+    return pre;
+  }, 0);
+});
+
 // 区域
 let areaMap = ref({});
 const refAddEara = ref(null);