台桌页面增加统计显示

src/views/tool/table/index.vue

@@ -40,6 +40,7 @@
 			</el-button> -->
     </div>
 
+    <div class="u-flex" style="justify-content: space-between">
       <div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
         <div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
           <span
@@ -51,6 +52,15 @@
           {{ 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>
 
     <!-- 列表 -->
     <div class="head-container">
@@ -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);