iot-front-ui/src/components/life/restaurant/lifeRestaurant.vue

<script>
import Query from "@/components/common/query.vue";
import Card from "@/components/common/card.vue";
import CoreData from "@/components/common/coreData.vue";
import LifeRestEatChart from "@/components/life/restaurant/components/lifeRestEatChart.vue";
import LifeRestConsumeChart from "@/components/life/restaurant/components/lifeRestConsumeChart.vue";
import LifeRestTopMenu from "@/components/life/restaurant/components/lifeRestTopMenu.vue";
import LifeRestDailyMenu from "@/components/life/restaurant/components/lifeRestDailyMenu.vue";
import LifeRestProfitChart from "@/components/life/restaurant/components/LifeRestProfitChart.vue";
import LifeRestPayChart from "@/components/life/restaurant/components/LifeRestPayChart.vue";

export default {
  data() {
    return {
      coreData: [
        {
          title: '当天就餐人数预测',
          num: 400,
          unit: '人',
          isHighLight: true,
          historyDesc: '同比',
          historyNum: 0.4
        },
        {
          title: '累计就餐人数',
          num: 400,
          unit: '人',
          historyDesc: '同比',
          historyNum: 0.4
        },
        {
          title: '消费总数',
          num: 400,
          unit: '人',
          historyDesc: '同比',
          historyNum: 0.4
        },
        {
          title: '订单均价',
          num: 400,
          unit: '人',
          historyDesc: '同比',
          historyNum: 0.4
        },
        {
          type: 1,
          isHighLight: true,
          title: '值得关注',
          content: 'testhnjlkjn'
        },
      ]
    }
  },
  components: {
    Query,
    Card,
    CoreData,
    LifeRestEatChart,
    LifeRestConsumeChart,
    LifeRestTopMenu,
    LifeRestDailyMenu,
    LifeRestProfitChart,
    LifeRestPayChart,
  },
  created() {
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<template>
  <div class="lifeRestaurant">
    <a-row>
      <a-col>
        <div class="lifeRestaurant-query">
          <Query></Query>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col>
        <div class="lifeRestaurant-core">
          <Card title="核心指标">
            <CoreData :data-list="coreData"></CoreData>
          </Card>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="18">
        <div class="lifeRestaurant-left">
          <div class="lifeRestaurant-eat">
            <Card title="用餐分析">
              <LifeRestEatChart :height="300"></LifeRestEatChart>
            </Card>
          </div>
          <div class="lifeRestaurant-consume">
            <Card title="消费分析">
              <LifeRestConsumeChart :height="300"></LifeRestConsumeChart>
            </Card>
          </div>
          <div class="lifeRestaurant-profit">
            <Card title="盈利分析">
              <LifeRestProfitChart :height="200"></LifeRestProfitChart>
            </Card>
          </div>
          <div class="lifeRestaurant-pay">
            <Card title="支付分析">
              <LifeRestPayChart :height="200"></LifeRestPayChart>
            </Card>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="lifeRestaurant-right">
          <div class="lifeRestaurant-top">
            <Card title="受欢迎菜品">
              <LifeRestTopMenu ></LifeRestTopMenu>
            </Card>
          </div>
          <div class="lifeRestaurant-cookbook">
            <Card title="每日菜谱">
              <LifeRestDailyMenu ></LifeRestDailyMenu>
            </Card>
          </div>
        </div>
      </a-col>


    </a-row>

  </div>
</template>

<style lang="less" scoped>
.lifeRestaurant {
  width: 100%;
  height: 1500px;
  display: inline-block;
  vertical-align: top;
  .lifeRestaurant-query {
    width: 100%;
    height: 60px;
    margin-bottom: 8px;
  }
  .lifeRestaurant-core {
    width: 100%;
    margin-bottom: 8px;
  }
  .lifeRestaurant-left {
    margin-right: 1%;
    > div {
      margin-bottom: 8px;
    }
    .lifeRestaurant-profit {
      display: inline-block;
      vertical-align: top;
      padding: 0 3px;
      width: 50%;
    }
    .lifeRestaurant-pay {
      display: inline-block;
      vertical-align: top;
      padding: 0 3px;
      width: 50%;
    }
  }
  .lifeRestaurant-right {
    > div {
      margin-bottom: 12px;
    }
  }
}
</style>