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

<script>
import LifeQuery from "@/components/life/common/lifeQuery.vue";
import IotCard from "@/components/common/IotCard.vue";
import CoreData from "@/components/life/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";

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

  }
}
</script>

<template>
  <div class="lifeRestaurant">
    <a-row>
      <a-col>
        <div class="lifeRestaurant-query">
          <LifeQuery></LifeQuery>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col>
        <div class="lifeRestaurant-core">
          <IotCard title="核心指标">
            <CoreData :data-list="coreData"></CoreData>
          </IotCard>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="18">
        <div class="lifeRestaurant-left">
          <div class="lifeRestaurant-eat">
            <IotCard title="用餐分析">
              <LifeRestEatChart :height="300"></LifeRestEatChart>
            </IotCard>
          </div>
          <div class="lifeRestaurant-consume">
            <IotCard title="消费分析">
              <LifeRestConsumeChart :height="300"></LifeRestConsumeChart>
            </IotCard>
          </div>
          <div class="lifeRestaurant-profit"></div>
          <div class="lifeRestaurant-pay"></div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="lifeRestaurant-right">
          <div class="lifeRestaurant-top">
            <IotCard title="受欢迎菜品">
              123
            </IotCard>
          </div>
          <div class="lifeRestaurant-cookbook">
            <IotCard title="每日菜谱">
              123
            </IotCard>
          </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;
    }
    #iot-life-restaurant-eat {
      height: 250px;
    }
  }
  .lifeRestaurant-right {
    > div {
      margin-bottom: 12px;
    }
  }
}
</style>