销售情况

2024-06-28 17:38:53 +08:00
parent 05e5b36b75
commit 8e48237542
1 changed files with 110 additions and 0 deletions
--- a/src/views/AppSalesPerformance.vue
+++ b/src/views/AppSalesPerformance.vue
@@ -0,0 +1,110 @@
+<script>
+export default {
+  name: "AppSalesPerformance",
+  label: "市场看板-销售情况",
+  data() {
+    return {
+      search: {
+        "groupCodeList": [
+          "K250QTD032"
+        ], //课区编码，不传即为全部
+        "currentDate": "20240501", //当前日期
+        "compareDate": "20240430", //比较日期
+        "hourNum": "18" //小时数(取值1~24,18表示18:00:00之前的交易统计)
+      },
+      info: {},
+      list: [
+        {label: "过机销售额(万元)", prop: "saleAmt"},
+        {label: "有效订单数(单)", prop: "validOrderNum"},
+        {label: "客单价(元)", prop: "customerUnitPrice"},
+        {label: "店均销售额(元)", prop: "avgSaleAmt"},
+        {label: "店均有效订单数(单)", prop: "avgValidOrderNum"},
+        {label: "有效订单(单)", prop: "validOrderNum"},
+      ]
+    }
+  },
+  methods: {
+    getData() {
+      const {$http, $waitFor} = window
+      $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/saleCondition", {
+        ...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
+    },
+    getIncrement(item) {
+      let result = this.info[item.prop + "Diff"] || ""
+      if (result > 0) result = "↑" + result
+      else if (result < 0) result = "↓" + result
+      return result
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<template>
+  <section class="AppSalesPerformance">
+    <div v-for="(item,i) in list" :key="i" class="item">
+      <div v-text="item.label"/>
+      <div class="flex">
+        <div class="value" v-text="getValue(item)"/>
+        <div class="increment" v-text="getIncrement(item)"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style>
+.AppSalesPerformance {
+  display: grid;
+  grid-template-columns:auto auto;
+  gap: 12px 24px;
+}
+
+.AppSalesPerformance .flex {
+  align-items: baseline;
+  gap: 4px;
+}
+
+.AppSalesPerformance .item {
+  background: linear-gradient(90deg, rgba(17, 112, 221, 0.5) 0%, rgba(17, 112, 221, 0.01) 100%);
+  background-size: 100% 100%;
+  color: #fff;
+  line-height: 20px;
+  white-space: nowrap;
+  border-left: 4px solid rgba(17, 112, 221, 1);
+  padding: 10px 16px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.AppSalesPerformance .item:nth-of-type(4n-1), .AppSalesPerformance .item:nth-of-type(4n) {
+  border-left-color: rgba(1, 196, 236, 1);
+  background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
+}
+
+.AppSalesPerformance .item .value {
+  font-family: Helvetica;
+  font-size: 20px;
+  line-height: 38px;
+  font-weight: bold;
+}
+
+.AppSalesPerformance .item .increment {
+  color: #FFD15C;
+  line-height: 20px;
+}
+</style>