init

src/components/life/restaurant/lifeRestaurant.vue

@@ -1,7 +1,63 @@
 <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 {}
+    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() {
   },
@@ -15,15 +71,57 @@ export default {
 
 <template>
   <div class="lifeRestaurant">
-    <div class="lifeRestaurant-query"></div>
-    <div class="lifeRestaurant-core"></div>
-    <div class="lifeRestaurant-left">
-      <div class="lifeRestaurant-eat"></div>
-      <div class="lifeRestaurant-consume"></div>
-      <div class="lifeRestaurant-profit"></div>
-      <div class="lifeRestaurant-pay"></div>
-    </div>
-    <div class="lifeRestaurant-right"></div>
+    <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>
 
@@ -36,18 +134,25 @@ export default {
   .lifeRestaurant-query {
     width: 100%;
     height: 60px;
-    border: 1px solid red;
+    margin-bottom: 8px;
   }
   .lifeRestaurant-core {
     width: 100%;
-    height: 200px;
-    border: 1px solid red;
+    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>