kengee-data-screen/src/views/AppStoresTable.vue

<script>
export default {
  name: "AppStoresTable",
  label: "多店监控",
  data() {
    return {
      stores: [
        {}, {}, {}, {}, {}
      ],
      columns: {
        品类销售情况: [
          {label: "品类", prop: "categoryName"},
          {label: "销售额", prop: "sales"},
          {label: "库存金额", prop: "inventoryAmount"},
          {label: "同/环比销售额", prop: "compareSales"},
          {label: "同/环比库存金额", prop: "compareInventoryAmount"},
          {label: "前四周日军销售额", prop: "averageSales"},
        ],
        重点单品情况: [
          {label: "重点单品", prop: "categoryName"},
          {label: "当日目标", prop: "sales"},
          {label: "销售数量", prop: "inventoryAmount"},
          {label: "库存数量", prop: "compareSales"},
          {label: "剩余时间预计销售数量", prop: "compareInventoryAmount"},
          {label: "提醒", prop: "averageSales"},
        ]
      },
    }
  }
}
</script>

<template>
  <section class="AppStoresTable">
    <div class="layout">
      <div class="store" v-for="store in stores" :key="store.id">
        <div class="header" v-text="'郑州朗程康桥店'"/>
        <el-carousel indicator-position="none" height="250px">
          <el-carousel-item></el-carousel-item>
        </el-carousel>
        <div class="title" v-text="'品类销售情况'"/>
        <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
          <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
        </el-table>
        <div class="title" v-text="'重点单品情况'"/>
        <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
          <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop"/>
        </el-table>
      </div>
    </div>
  </section>
</template>

<style scoped>
.AppStoresTable {
  color: #fff;
  box-sizing: border-box;
}

:deep(.tableHeader) {
  background: rgba(13, 48, 99, 0.6) !important;
  color: #fff;
  border-color: transparent !important;
}

:deep(.el-table tr) {
  background: transparent;
}

:deep(.el-table) {
  background: transparent;
  border-color: transparent;
}

:deep(.el-table:before) {
  background: transparent;
}

:deep(.tableCell) {
  color: #fff;
  border-color: transparent;
}

.header {
  height: 48px;
  padding: 8px 0 8px 38px;
  margin-bottom: 24px;
  box-sizing: border-box;
  line-height: 32px;
  background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.title {
  line-height: 20px;
  width: fit-content;
  margin: 24px auto 12px;
  background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: center bottom;
}

.layout {
  display: flex;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
}

.store {
  width: calc(25% - 18px);
}
</style>