智慧生活相关界面

src/components/common/IotCard.vue

@@ -0,0 +1,31 @@
+<template>
+  <a-card >
+    <template #title>
+      <span>{{ title }}</span>
+    </template>
+    <slot></slot>
+  </a-card>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    title: String
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .ant-card-body {
+  display: inline-block;
+  width: 100% !important;
+  height: auto !important;
+  padding: 8px !important;
+}
+</style>

src/components/doubleCarbon/doubleCarbon.vue

@@ -40,7 +40,7 @@ export default {
       this.contentShow = false;
       setTimeout(function () {
         app.contentShow = true;
-      }, 200)
+      }, 100)
     }
   }
 }

src/components/home/ContainerAside.vue

@@ -38,8 +38,15 @@ export default {
         this.title = obj.meta.breadcrumb;
       }
       this.menuList = JSON.parse(JSON.stringify(route))
-      if (this.menuList.length>0) {
+      if (this.menuList.length>0 && arr.length<=2) {
         this.handleClick(this.menuList[0])
+      } else {
+        for (let obj of this.menuList) {
+          obj.selected = false;
+          if (obj.path == this.$route.path) {
+            obj.selected = true;
+          }
+        }
       }
     },
     handleClick(item) {

src/components/life/common/coreData.vue

@@ -0,0 +1,84 @@
+<script>
+export default {
+  data() {
+    return {
+      itemWidth: 150,
+    }
+  },
+  props: {
+    dataList: Array
+  },
+  mounted() {
+    let clientWidth = document.getElementsByClassName("coreData")[0].clientWidth;
+    clientWidth = clientWidth;
+    this.itemWidth = Math.floor(clientWidth/this.dataList.length)-55
+  }
+}
+</script>
+
+<template>
+  <div class="coreData">
+    <template v-for="(ele, index) in dataList" >
+      <div class="coreData-item" :key="index" :style="{width: itemWidth+'px', backgroundColor: ele.isHighLight?'#e7f5fc':''}">
+        <div class="coreData-item-title">{{ ele.title }}</div>
+        <div class="coreData-item-num">{{ ele.num }}</div>
+        <div class="coreData-item-unit">{{ ele.unit }}</div>
+        <div class="coreData-item-history">
+          <div class="coreData-item-historyDesc">
+            {{ ele.historyDesc }}
+            <span v-if="ele.trend===0">持平</span>
+            <span v-else-if="ele.trend>0">上升</span>
+            <span v-else-if="ele.trend<0">下降</span>
+            <span v-else></span>
+          </div>
+          <div class="coreData-item-historyNum">{{ ele.historyNum }}</div>
+        </div>
+      </div>
+      <a-divider type="vertical" class="iot-core-divider" v-if="index!==dataList.length-1"/>
+    </template>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.coreData {
+  width: 100%;
+  height: 150px;
+  background-color: #f7fbfe;
+  .coreData-item {
+    display: inline-block;
+    vertical-align: top;
+    height: 120px;
+    margin: 15px 20px;
+    padding: 8px;
+    .coreData-item-title {
+      line-height: 30px;
+    }
+    .coreData-item-num {
+      display: inline-block;
+      font-size: 30px;
+      font-weight: bolder;
+      height: 50%;
+      padding-top: 3%;
+    }
+    .coreData-item-unit {
+      display: inline-block;
+      margin-left: 3px;
+      color: #9a9a9a;
+    }
+    .coreData-item-historyDesc {
+      display: inline-block;
+    }
+    .coreData-item-historyNum {
+      margin-left: 5px;
+      display: inline-block;
+      color: red;
+    }
+  }
+  .iot-core-divider {
+    margin-top: 10px;
+    height: 100px;
+    display: inline-block;
+    vertical-align: top
+  }
+}
+</style>

src/components/life/common/lifeQuery.vue

@@ -0,0 +1,44 @@
+<template>
+  <a-form layout="inline" :form="formData" >
+    <a-form-item label="单位名称：" class="formItem">
+      <a-select style="width: 240px;" >
+        <a-select-option value="中迅">
+          中迅
+        </a-select-option>
+        <a-select-option value="电信规划院">
+          电信规划院
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label="部门名称：" class="formItem">
+      <a-select style="width: 240px" >
+        <a-select-option value="中迅">
+          中迅
+        </a-select-option>
+        <a-select-option value="电信规划院">
+          电信规划院
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item class="formItem">
+      <a-button type="primary" >重置</a-button>
+      <a-button type="primary" >查询</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formData: {}
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.formItem {
+  margin: 5px 15px;
+}
+</style>

src/components/life/healthyHome/components/lifeHealthyHomeChart.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        legend: {
+          data: [
+            '上午消费总额',
+            '下午消费总额',
+            '上午订单',
+            '下午订单',
+            '平均单价',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '10%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日']
+        },
+        yAxis: [
+          {
+            name: '平均单价',
+            type: 'value',
+            position: 'left',
+            axisLine: {
+              show: true,
+            },
+            nameTextStyle: {
+              padding: [10, 0, 10, 0]
+            },
+          },
+          {
+            name: '消费总额',
+            type: 'value',
+            axisLine: {
+              show: true,
+            },
+            position: 'right',
+            nameTextStyle: {
+              padding: [10, 0, 10, -20]
+            },
+          },
+          {
+            type: 'value',
+            name: '交易订单',
+            axisLine: {
+              show: true,
+            },
+            position: 'right',
+            offset: 80,
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+            splitNumber: 5,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                width: 1,
+                // 使用深浅的间隔色
+                color: ['#566471', '#566471']
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 12
+              }
+            }
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '上午消费总额',
+            data: [233, 209, 296, 148, 233, 395, 329],
+            type: 'bar',
+            stack: 'A',
+            yAxisIndex: 1,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '下午消费总额',
+            data: [206, 247, 251, 108, 392, 339, 220],
+            type: 'bar',
+            stack: 'A',
+            yAxisIndex: 1,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '上午订单',
+            data: [42, 48, 30, 35, 63, 60, 64],
+            type: 'bar',
+            stack: 'B',
+            yAxisIndex: 2,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '下午订单',
+            data: [42, 48, 30, 35, 63, 60, 64],
+            type: 'bar',
+            stack: 'B',
+            yAxisIndex: 2,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '平均单价',
+            data: [31, 36, 18, 21, 73, 12, 59],
+            yAxisIndex:0,
+            type: 'line',
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -1,22 +1,135 @@
-<template>
-  <div class="lifeHealthyHome">
-
-  </div>
-</template>
-
 <script>
+import LifeQuery from "@/components/life/common/lifeQuery.vue";
+import IotCard from "@/components/common/IotCard.vue";
+import CoreData from "@/components/life/common/coreData.vue";
+
 export default {
   data() {
     return {
-
+      coreData: [
+        {
+          title: '累计检查人数',
+          num: 100,
+          unit: '人',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '健康人数',
+          num: 20,
+          unit: '人',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '亚健康人数',
+          num: 21,
+          unit: '元',
+          trend: -1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '最多患病问题',
+          content: ''
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
     }
   },
+  components: {
+    LifeQuery,
+    IotCard,
+    CoreData,
+  },
   created() {
+  },
+  mounted() {
+  },
+  methods: {
+
   }
 }
 </script>
 
-<style lang="less" scoped>
+<template>
+  <div class="lifeHealthyHome">
+    <a-row>
+      <a-col>
+        <div class="lifeHealthyHome-query">
+          <LifeQuery></LifeQuery>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col>
+        <div class="lifeHealthyHome-core">
+          <IotCard title="核心指标">
+            <CoreData :data-list="coreData"></CoreData>
+          </IotCard>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="16">
+      <a-col :span="18">
+        <div class="lifeHealthyHome-left">
+          <div class="lifeHealthyHome-detail">
+            <IotCard title="小屋分析">
+              <lifeHealthyHomeAnalysisChart :height="300"></lifeHealthyHomeAnalysisChart>
+            </IotCard>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="lifeHealthyHome-right">
+          <div class="lifeHealthyHome-top">
+            <IotCard title="环境监测">
+              <lifeHealthyHomeTopTable></lifeHealthyHomeTopTable>
+            </IotCard>
+          </div>
+        </div>
+      </a-col>
+
 
+    </a-row>
 
+  </div>
+</template>
+
+<style lang="less" scoped>
+.lifeHealthyHome {
+  width: 100%;
+  height: 1500px;
+  display: inline-block;
+  vertical-align: top;
+  .lifeHealthyHome-query {
+    width: 100%;
+    height: 60px;
+    margin-bottom: 8px;
+  }
+  .lifeHealthyHome-core {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  .lifeHealthyHome-left {
+    margin-right: 1%;
+    > div {
+      margin-bottom: 8px;
+    }
+  }
+  .lifeHealthyHome-right {
+    > div {
+      margin-bottom: 12px;
+    }
+  }
+}
 </style>

src/components/life/life.vue

@@ -40,7 +40,7 @@ export default {
       this.contentShow = false;
       setTimeout(function () {
         app.contentShow = true;
-      }, 200)
+      }, 100)
     }
   }
 }
@@ -51,4 +51,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+.myChart {
+  width: 100%;
+}
 </style>

src/components/life/parking/components/lifeParkConsumeChart.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: '',
+          bottom: 'bottom',
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '0%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        series: [
+          {
+            name: '占用车位情况',
+            type: 'pie',
+            radius: ['20%', '60%'],
+            data: [
+              { value: 850, name: '北京规划院' },
+              { value: 735, name: '中迅院' },
+              { value: 580, name: '单位3' },
+              { value: 484, name: '单位4' },
+              { value: 300, name: '单位5' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+
+
+</style>

src/components/life/parking/components/lifeParkDetailTable.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-table
+      :data="tableData"
+      stripe
+      :header-row-style="{fontSize: '12px'}"
+      :cell-style="{fontSize: '12px'}"
+  >
+    <el-table-column
+        prop="carPosition"
+        label="车位" min-width="40">
+    </el-table-column>
+    <el-table-column
+        prop="owner"
+        label="拥有者" min-width="60">
+    </el-table-column>
+    <el-table-column
+        prop="company"
+        label="单位" min-width="100">
+      <template #default="scope">
+        <span >{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+        prop="parkTime"
+        label="停车时间" min-width="50">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        url: '',
+        name: '北京规划院',
+        address: '2h',
+        address1: '2min'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/parking/components/lifeParkTopTable.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-table
+      :data="tableData"
+      stripe
+      :header-row-style="{fontSize: '12px'}"
+      :cell-style="{fontSize: '12px'}"
+  >
+    <el-table-column
+        prop="url"
+        label="车位" min-width="40">
+    </el-table-column>
+    <el-table-column
+        prop="name"
+        label="单位" min-width="100">
+      <template #default="scope">
+        <span >{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+        prop="address"
+        label="占用量长时间" min-width="50">
+    </el-table-column>
+    <el-table-column
+        prop="address1"
+        label="占用量短时间" min-width="50">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        url: '',
+        name: '北京规划院',
+        address: '2h',
+        address1: '2min'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }, {
+        url: '',
+        name: '北京规划院',
+        address: '2h'
+      }]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/parking/components/lifeParkTrendChart.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="myChart" ref="lifeParkTrendChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.lifeParkTrendChart)
+      let option = {
+        legend: {
+          data: [
+            '进入车辆数',
+            '离开车辆数',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '0%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: {},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '进入车辆数',
+            data: [43, 57, 51, 42, 56, 19, 32, 18, 41, 20, 20, 37],
+            type: 'line',
+            stack: 'x',
+            smooth: true,
+            areaStyle: {
+              opacity: 0.5,
+              color: '#5087ec',
+
+            }
+          },
+          {
+            name: '离开车辆数',
+            data: [40, 15, 59, 18, 33, 31, 31, 26, 34, 26, 28, 40],
+            type: 'line',
+            stack: 'x',
+            smooth: true,
+            areaStyle: {
+              opacity: 0.5,
+              color: '#68bbc4',
+            }
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>

src/components/life/parking/components/lifeParkUnNormalChart.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: '',
+          bottom: 'bottom',
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '0%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        series: [
+          {
+            name: '违停情况',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 850, name: '北京规划院' },
+              { value: 735, name: '中迅院' },
+              { value: 580, name: '单位3' },
+              { value: 484, name: '单位4' },
+              { value: 300, name: '单位5' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+
+
+</style>

src/components/life/parking/lifeParking.vue

@@ -1,28 +1,174 @@
-<template>
-  <div class="lifeParking">
-
-  </div>
-</template>
-
 <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 LifeParkTrendChart from "@/components/life/parking/components/lifeParkTrendChart.vue";
+import lifeParkUnNormalChart from "@/components/life/parking/components/lifeParkUnNormalChart.vue";
+import LifeParkConsumeChart from "@/components/life/parking/components/lifeParkConsumeChart.vue";
+import LifeParkingTopChart from "@/components/life/parking/components/lifeParkTopTable.vue";
+import LifeParkDetailTable from "@/components/life/parking/components/lifeParkDetailTable.vue";
+
 export default {
   data() {
     return {
-
+      coreData: [
+        {
+          title: '车位数量',
+          num: 2000,
+          unit: '个',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '平均停车数量',
+          num: 180,
+          unit: '辆/天',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '违停数量',
+          num: 20,
+          unit: '辆',
+          trend: -1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '建议回收车位',
+          num: 40,
+          unit: '个',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: 'testhnjlkjn'
+        },
+      ]
     }
   },
+  components: {
+    LifeQuery,
+    IotCard,
+    CoreData,
+    LifeParkTrendChart,
+    lifeParkUnNormalChart,
+    LifeParkConsumeChart,
+    LifeParkingTopChart,
+    LifeParkDetailTable,
+  },
   created() {
-
   },
   mounted() {
-
   },
+  methods: {
+
+  }
 }
 </script>
 
+<template>
+  <div class="lifeParking">
+    <a-row>
+      <a-col>
+        <div class="lifeParking-query">
+          <LifeQuery></LifeQuery>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col>
+        <div class="lifeParking-core">
+          <IotCard title="核心指标">
+            <CoreData :data-list="coreData"></CoreData>
+          </IotCard>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="16">
+      <a-col :span="18">
+        <div class="lifeParking-left">
+          <div class="lifeParking-trend">
+            <IotCard title="车流态势">
+              <LifeParkTrendChart :height="300"></LifeParkTrendChart>
+            </IotCard>
+          </div>
+          <div class="lifeParking-unNormal">
+            <IotCard title="违停情况">
+              <LifeParkUnNormalChart :height="200"></LifeParkUnNormalChart>
+            </IotCard>
+          </div>
+          <div class="lifeParking-consume">
+            <IotCard title="占用车位数量">
+              <LifeParkConsumeChart :height="200"></LifeParkConsumeChart>
+            </IotCard>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="lifeParking-right">
+          <div class="lifeParking-top">
+            <IotCard title="空置车位">
+              <LifeParkingTopChart></LifeParkingTopChart>
+            </IotCard>
+          </div>
+          <div class="lifeParking-detail">
+            <IotCard title="车位详情">
+              <LifeParkDetailTable></LifeParkDetailTable>
+            </IotCard>
+          </div>
+        </div>
+      </a-col>
+
+
+    </a-row>
+
+  </div>
+</template>
+
 <style lang="less" scoped>
 .lifeParking {
   width: 100%;
-  height: 100%;
+  height: 1500px;
+  display: inline-block;
+  vertical-align: top;
+  .lifeParking-query {
+    width: 100%;
+    height: 60px;
+    margin-bottom: 8px;
+  }
+  .lifeParking-core {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  .lifeParking-left {
+    margin-right: 1%;
+    > div {
+      margin-bottom: 8px;
+    }
+    .lifeParking-unNormal {
+      display: inline-block;
+      vertical-align: top;
+      padding: 0 3px;
+      width: 50%;
+    }
+    .lifeParking-consume {
+      display: inline-block;
+      vertical-align: top;
+      padding: 0 3px;
+      width: 50%;
+    }
+  }
+  .lifeParking-right {
+    > div {
+      margin-bottom: 12px;
+    }
+  }
 }
 </style>

src/components/life/restaurant/components/LifeRestPayChart.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: '人脸支付' },
+              { value: 735, name: '扫码' },
+              { value: 678, name: '刷卡' },
+              { value: 580, name: '线下' },
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/restaurant/components/LifeRestProfitChart.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: '早餐' },
+              { value: 735, name: '午餐' },
+              { value: 580, name: '晚餐' },
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/restaurant/components/lifeRestConsumeChart.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        legend: {
+          data: [
+            '早餐人数',
+            '午餐人数',
+            '晚餐人数',
+            '早餐单价',
+            '午餐单价',
+            '晚餐单价',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '0%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: [
+          {
+            name: '人数',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -20]
+            },
+          },
+          {
+            type: 'value',
+            name: '平均单价',
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+            splitNumber: 5,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                width: 1,
+                // 使用深浅的间隔色
+                color: ['#566471', '#566471']
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 12
+              },
+              formatter: '{value} 元/单'
+            }
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '早餐人数',
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '午餐人数',
+            data: [78, 154, 111, 70, 66, 88, 100],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '晚餐人数',
+            data: [78, 154, 111, 70, 66, 88, 100],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '早餐单价',
+            data: [30, 17, 21, 32, 13, 18, 32],
+            yAxisIndex:1,
+            type: 'line',
+          },
+          {
+            name: '午餐单价',
+            data: [22, 34, 25, 18, 35, 47, 54],
+            yAxisIndex:1,
+            type: 'line',
+          },
+          {
+            name: '晚餐单价',
+            data: [22, 14, 19, 32, 18, 33, 25],
+            yAxisIndex:1,
+            type: 'line',
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/life/restaurant/components/lifeRestDailyMenu.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-table
+      :data="tableData"
+      stripe
+      :show-header="false"
+      >
+    <el-table-column
+        prop="url"
+        label="日期" min-width="60">
+    </el-table-column>
+    <el-table-column
+        prop="name"
+        label="姓名" min-width="100">
+      <template #default="scope">
+        <span style="font-size: 12px">{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+        prop="address"
+        label="分数" min-width="70">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        url: '热菜',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '16大/12小'
+      }, {
+        url: '热菜',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '16大/12小'
+      }, {
+        url: '凉菜',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '16大/12小'
+      }, {
+        url: '主食',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '16大/12小'
+      }, {
+        url: '主食',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '16大/12小'
+      }]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/restaurant/components/lifeRestEatChart.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        legend: {
+          data: [
+            '客流人数',
+            '就餐人数',
+            '就餐人数占比'
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '0%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: [
+          {
+            name: '人数',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -20]
+            },
+          },
+          {
+            type: 'value',
+            name: '就餐人数占比',
+            min: 0,
+            max: 100,
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+            splitNumber: 5,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                width: 1,
+                // 使用深浅的间隔色
+                color: ['#566471', '#566471']
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 12
+              }
+            }
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '客流人数',
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '就餐人数',
+            data: [78, 154, 111, 70, 66, 88, 100],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '就餐人数占比',
+            data: [50, 55, 60, 18, 35, 47, 80],
+            yAxisIndex:1,
+            type: 'line',
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/restaurant/components/lifeRestTopMenu.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-table
+      :data="tableData"
+      stripe
+      :show-header="false"
+      >
+    <el-table-column
+        prop="url"
+        label="日期" min-width="60">
+    </el-table-column>
+    <el-table-column
+        prop="name"
+        label="姓名" min-width="100">
+      <template #default="scope">
+        <span style="font-size: 12px">{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+        prop="address"
+        label="分数" min-width="70">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/restaurant/lifeRestaurant.vue

@@ -5,6 +5,9 @@ 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";
+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() {
@@ -58,6 +61,10 @@ export default {
     CoreData,
     LifeRestEatChart,
     LifeRestConsumeChart,
+    LifeRestTopMenu,
+    LifeRestDailyMenu,
+    LifeRestProfitChart,
+    LifeRestPayChart,
   },
   created() {
   },
@@ -100,20 +107,28 @@ export default {
               <LifeRestConsumeChart :height="300"></LifeRestConsumeChart>
             </IotCard>
           </div>
-          <div class="lifeRestaurant-profit"></div>
-          <div class="lifeRestaurant-pay"></div>
+          <div class="lifeRestaurant-profit">
+            <IotCard title="盈利分析">
+              <LifeRestProfitChart :height="200"></LifeRestProfitChart>
+            </IotCard>
+          </div>
+          <div class="lifeRestaurant-pay">
+            <IotCard title="支付分析">
+              <LifeRestPayChart :height="200"></LifeRestPayChart>
+            </IotCard>
+          </div>
         </div>
       </a-col>
       <a-col :span="6">
         <div class="lifeRestaurant-right">
           <div class="lifeRestaurant-top">
             <IotCard title="受欢迎菜品">
-              123
+              <LifeRestTopMenu ></LifeRestTopMenu>
             </IotCard>
           </div>
           <div class="lifeRestaurant-cookbook">
             <IotCard title="每日菜谱">
-              123
+              <LifeRestDailyMenu ></LifeRestDailyMenu>
             </IotCard>
           </div>
         </div>
@@ -145,8 +160,17 @@ export default {
     > div {
       margin-bottom: 8px;
     }
-    #iot-life-restaurant-eat {
-      height: 250px;
+    .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 {

src/components/life/supermarket/components/lifeSupermarketAnalysisChart.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        legend: {
+          data: [
+            '上午消费总额',
+            '下午消费总额',
+            '上午订单',
+            '下午订单',
+            '平均单价',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '10%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日']
+        },
+        yAxis: [
+          {
+            name: '平均单价',
+            type: 'value',
+            position: 'left',
+            axisLine: {
+              show: true,
+            },
+            nameTextStyle: {
+              padding: [10, 0, 10, 0]
+            },
+          },
+          {
+            name: '消费总额',
+            type: 'value',
+            axisLine: {
+              show: true,
+            },
+            position: 'right',
+            nameTextStyle: {
+              padding: [10, 0, 10, -20]
+            },
+          },
+          {
+            type: 'value',
+            name: '交易订单',
+            axisLine: {
+              show: true,
+            },
+            position: 'right',
+            offset: 80,
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+            splitNumber: 5,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                width: 1,
+                // 使用深浅的间隔色
+                color: ['#566471', '#566471']
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 12
+              }
+            }
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '上午消费总额',
+            data: [233, 209, 296, 148, 233, 395, 329],
+            type: 'bar',
+            stack: 'A',
+            yAxisIndex: 1,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '下午消费总额',
+            data: [206, 247, 251, 108, 392, 339, 220],
+            type: 'bar',
+            stack: 'A',
+            yAxisIndex: 1,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '上午订单',
+            data: [42, 48, 30, 35, 63, 60, 64],
+            type: 'bar',
+            stack: 'B',
+            yAxisIndex: 2,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '下午订单',
+            data: [42, 48, 30, 35, 63, 60, 64],
+            type: 'bar',
+            stack: 'B',
+            yAxisIndex: 2,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '平均单价',
+            data: [31, 36, 18, 21, 73, 12, 59],
+            yAxisIndex:0,
+            type: 'line',
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/supermarket/components/lifeSupermarketTopTable.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-table
+      :data="tableData"
+      stripe
+  >
+    <el-table-column
+        prop="url"
+        label="图片" min-width="60">
+    </el-table-column>
+    <el-table-column
+        prop="name"
+        label="商品名称" min-width="100">
+      <template #default="scope">
+        <span style="font-size: 12px">{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+        prop="num"
+        label="销量" min-width="70">
+    </el-table-column>
+    <el-table-column
+        prop="price"
+        label="单价" min-width="70">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }, {
+        url: '',
+        name: '铁锅蘑菇炖柴鸡',
+        address: '200份'
+      }]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/life/supermarket/lifeSupermarket.vue

@@ -1,18 +1,141 @@
-<template>
-  <div class="lifeSupermarket">
-
-  </div>
-</template>
-
 <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 LifeSupermarketAnalysisChart from "@/components/life/supermarket/components/lifeSupermarketAnalysisChart.vue";
+import LifeSupermarketTopTable from "@/components/life/supermarket/components/lifeSupermarketTopTable.vue";
+
 export default {
+  data() {
+    return {
+      coreData: [
+        {
+          title: '消费总额',
+          num: 100,
+          unit: '万元',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '交易单数',
+          num: 2100,
+          unit: '',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '人均消费金额',
+          num: 21,
+          unit: '元',
+          trend: 1,
+          historyDesc: '同比',
+          historyNum: '0.4%'
+        },
+        {
+          title: '平均单价',
+          num: 1,
+          unit: '元',
+          trend: 1,
+          historyDesc: '环比',
+          historyNum: '0.4%'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  components: {
+    LifeQuery,
+    IotCard,
+    CoreData,
+    LifeSupermarketAnalysisChart,
+    LifeSupermarketTopTable,
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
 
+  }
 }
 </script>
 
+<template>
+  <div class="lifeSupermarket">
+    <a-row>
+      <a-col>
+        <div class="lifeSupermarket-query">
+          <LifeQuery></LifeQuery>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col>
+        <div class="lifeSupermarket-core">
+          <IotCard title="核心指标">
+            <CoreData :data-list="coreData"></CoreData>
+          </IotCard>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="16">
+      <a-col :span="18">
+        <div class="lifeSupermarket-left">
+          <div class="lifeSupermarket-detail">
+            <IotCard title="商超分析">
+              <LifeSupermarketAnalysisChart :height="300"></LifeSupermarketAnalysisChart>
+            </IotCard>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="lifeSupermarket-right">
+          <div class="lifeSupermarket-top">
+            <IotCard title="商品排行">
+              <LifeSupermarketTopTable></LifeSupermarketTopTable>
+            </IotCard>
+          </div>
+        </div>
+      </a-col>
+
+
+    </a-row>
+
+  </div>
+</template>
+
 <style lang="less" scoped>
 .lifeSupermarket {
   width: 100%;
-  height: 100%;
+  height: 1500px;
+  display: inline-block;
+  vertical-align: top;
+  .lifeSupermarket-query {
+    width: 100%;
+    height: 60px;
+    margin-bottom: 8px;
+  }
+  .lifeSupermarket-core {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  .lifeSupermarket-left {
+    margin-right: 1%;
+    > div {
+      margin-bottom: 8px;
+    }
+  }
+  .lifeSupermarket-right {
+    > div {
+      margin-bottom: 12px;
+    }
+  }
 }
 </style>

src/components/work/work.vue

@@ -40,7 +40,7 @@ export default {
       this.contentShow = false;
       setTimeout(function () {
         app.contentShow = true;
-      }, 200)
+      }, 50)
     }
   }
 }

src/views/HomeView.vue

@@ -20,7 +20,7 @@ export default {
       let app = this
       setTimeout(() => {
         app.suitHeight()
-      }, 500)
+      }, 100)
     },
   },
   mounted() {