单点监控面板完成

src/views/AppRealtimePanel.vue

@@ -4,18 +4,45 @@ export default {
   label: "实况面板",
   data() {
     return {
-      list: [
-        {label: "总销售", prop: "a"},
-        {label: "常规销售", prop: "a1"},
-        {label: "节令销售", prop: "a2"},
-        {label: "有效订单数", prop: "a3"},
-        {label: "常规客单数", prop: "a4"},
-        {label: "会员有效订单占比", prop: "a5"},
-        {label: "报损率", prop: "a6"},
-        {label: "报损金额", prop: "a7"},
-        {label: "外卖销售占比", prop: "a8"},
-      ]
+      search: {
+        storeCode: 'K230QTD081',
+        hourNum: "18"
+      },
+      info: {},
+
     }
+  },
+  computed: {
+    list: v => [
+      {label: "总销售", prop: "saleAmt"},
+      {label: "常规销售", prop: "commonSaleAmt"},
+      {label: "节令销售", prop: "seasonSaleAmt"},
+      {label: "有效订单数", prop: "validOrderNum"},
+      {label: "常规客单价", prop: "customerUnitPrice"},
+      {label: "会员有效订单占比", prop: "memOrderPercent", unit: "%"},
+      {label: "报损率", prop: "lossAmtPercent", unit: "%"},
+      {label: "报损金额", prop: "lossAmt"},
+      {label: "外卖销售占比", prop: "deliveryAmtPercent", unit: "%"},
+    ]
+  },
+  methods: {
+    getData() {
+      const {$http, $waitFor} = window
+      $waitFor($http).then(() => $http.post('/data-boot/la/screen/singleStoreBoard/overview', {...this.search}).then(res => {
+        if (res?.data) {
+          this.info = res.data
+        }
+      }))
+    },
+    getValue(item) {
+      let result = this.info[item.prop]
+      if (item.unit == "%") result = (result * 100 || 0) + "%"
+      if (item.calc) result = item.calc()
+      return result
+    }
+  },
+  created() {
+    this.getData()
   }
 }
 </script>
@@ -24,7 +51,7 @@ export default {
   <section class="AppRealtimePanel">
     <div v-for="item in list" :key="item.prop" class="item">
       <div v-text="item.label"/>
-      <div class="value" v-text="item.prop"/>
+      <div class="value" v-text="getValue(item)"/>
     </div>
   </section>
 </template>