diff --git a/package.json b/package.json
index 1d65f3d..69dfcf4 100644
--- a/package.json
+++ b/package.json
@@ -11,17 +11,21 @@
     "analyz": "npm_config_report=true npm run build"
   },
   "dependencies": {
+    "@antv/g2": "^3.5.11",
+    "@antv/l7": "latest",
+    "@antv/l7-maps": "latest",
     "axios": "^0.19.1",
     "core-js": "^3.6.2",
     "echarts": "^4.6.0",
     "element-ui": "^2.13.0",
+    "insert-css": "^2.0.0",
+    "js-base64": "latest",
+    "js-cookie": "latest",
+    "nprogress": "latest",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
     "vue-router": "^3.1.3",
-    "vuex": "^3.1.2",
-    "nprogress": "latest",
-    "js-base64": "latest",
-    "js-cookie": "latest"
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.2",
diff --git a/src/assets/styles/login.scss b/src/assets/styles/login.scss
index afa13fa..0f6a2a2 100644
--- a/src/assets/styles/login.scss
+++ b/src/assets/styles/login.scss
@@ -35,7 +35,7 @@
   border-bottom-left-radius: 5px;
   justify-content: center;
   flex-direction: column;
-  background-color: #1296DB;
+  background-color: #55b5e5;
   color: #fff;
   float: left;
   width: 50%;
diff --git a/src/components/card/base-card.vue b/src/components/card/base-card.vue
index eecf859..7b2a89c 100644
--- a/src/components/card/base-card.vue
+++ b/src/components/card/base-card.vue
@@ -14,16 +14,21 @@
 
 <style lang="scss">
     .card {
-        padding: 8px 6px;
-        border-radius: 10px;
+        padding: 8px 5px;
+        border-radius: 5px;
         box-sizing: border-box;
 
         .el-card {
             width: 100%;
         }
 
+        .el-card__body {
+            padding: 10px;
+        }
+
         &:first-child {
             padding-top: 0;
+            padding-left: 3px;
         }
     }
 </style>
diff --git a/src/components/card/title-card.vue b/src/components/card/title-card.vue
new file mode 100644
index 0000000..0de333f
--- /dev/null
+++ b/src/components/card/title-card.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="card">
+        <el-card shadow="hover">
+            <div slot="header">
+                <span>{{title}}</span>
+            </div>
+            <div class="text item">
+                <slot/>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "title-card",
+        props: {
+            title: {
+                type: String,
+                default: ''
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .card {
+        padding: 8px 5px;
+        border-radius: 5px;
+        box-sizing: border-box;
+
+        .el-card {
+            width: 100%;
+        }
+
+        .el-card__header {
+            padding: 10px;
+        }
+
+        .el-card__body {
+            padding: 10px;
+        }
+
+        &:first-child {
+            padding-top: 0;
+            padding-left: 3px;
+        }
+    }
+</style>
diff --git a/src/plugins/element/element.js b/src/plugins/element/element.js
index b09723a..8cf3c3d 100644
--- a/src/plugins/element/element.js
+++ b/src/plugins/element/element.js
@@ -6,6 +6,8 @@ import 'element-ui/lib/theme-chalk/index.css';
 import './element-variables.scss'
 
 import baseCard from '@/components/card/base-card'
+import titleCard from '@/components/card/title-card'
 
 Vue.use(Element, {locale});
-Vue.component('base-card', baseCard);
\ No newline at end of file
+Vue.component('base-card', baseCard);
+Vue.component('title-card', titleCard);
\ No newline at end of file
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 4e6033d..b2a9184 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -1,4 +1,4 @@
-import Index from '@/views/index/index'
+import Index from '@/views/layout/index'
 
 export default [
     {
@@ -15,7 +15,7 @@ export default [
                 meta: {
                     isAuth: true
                 },
-                component: () => import('@/views/Home')
+                component: () => import('@/views/home/Home')
             },
             {
                 name: 'things',
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 59f6ba9..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-    <div class="home">
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-        <base-card>
-            <p>
-                Welcome to Your Vue.js App
-            </p>
-        </base-card>
-    </div>
-</template>
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
new file mode 100644
index 0000000..e3c2e3d
--- /dev/null
+++ b/src/views/home/Home.vue
@@ -0,0 +1,203 @@
+<template>
+    <div class="home">
+        <el-col :span="24">
+            <el-col :span="9">
+                <title-card title="设备在线统计">
+                    <div id="c1"/>
+                </title-card>
+            </el-col>
+            <el-col :span="6">
+                <title-card title="设备状态统计">
+                    <div id="c2"/>
+                </title-card>
+            </el-col>
+            <el-col :span="9">
+                <title-card title="设备分组统计">
+                    <div id="c3"/>
+                </title-card>
+            </el-col>
+
+        </el-col>
+        <el-col :span="24">
+            <base-card>
+                <div id="device-map"/>
+            </base-card>
+        </el-col>
+    </div>
+</template>
+<script>
+    import {PointLayer, Scene} from '@antv/l7';
+    import {GaodeMap} from '@antv/l7-maps';
+    import G2 from '@antv/g2';
+
+    export default {
+        data() {
+            return {};
+        },
+        mounted() {
+            const data1 = [
+                {year: '1991', value: 3},
+                {year: '1992', value: 4},
+                {year: '1993', value: 3.5},
+                {year: '1994', value: 5},
+                {year: '1995', value: 4.9},
+                {year: '1996', value: 6},
+                {year: '1997', value: 7},
+                {year: '1998', value: 9},
+                {year: '1999', value: 13}
+            ];
+            const chart1 = new G2.Chart({
+                container: 'c1',
+                forceFit: true,
+                height: 300,
+                padding: [20, 20, 20, 20]
+            });
+            chart1.source(data1);
+            chart1.scale('value', {
+                min: 0
+            });
+            chart1.scale('year', {
+                range: [0, 1]
+            });
+            chart1.tooltip({
+                crosshairs: {
+                    type: 'line'
+                }
+            });
+            chart1.line().position('year*value');
+            chart1.point().position('year*value')
+                .size(4)
+                .shape('circle')
+                .style({
+                    stroke: '#fff',
+                    lineWidth: 1
+                });
+
+            chart1.render();
+
+            const data2 = [
+                {item: '事例一', count: 40, percent: 0.4},
+                {item: '事例二', count: 21, percent: 0.21},
+                {item: '事例三', count: 17, percent: 0.17},
+                {item: '事例四', count: 13, percent: 0.13},
+                {item: '事例五', count: 9, percent: 0.09}
+            ];
+            const chart2 = new G2.Chart({
+                container: 'c2',
+                forceFit: true,
+                height: 300,
+                padding: [20, 20, 20, 20]
+            });
+            chart2.source(data2, {
+                percent: {
+                    formatter: val => {
+                        val = (val * 100) + '%';
+                        return val;
+                    }
+                }
+            });
+            chart2.coord('theta', {
+                radius: 0.75
+            });
+            chart2.tooltip({
+                showTitle: false,
+                itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+            });
+            chart2.intervalStack()
+                .position('percent')
+                .color('item')
+                .label('percent', {
+                    formatter: (val, item) => {
+                        return item.point.item + ': ' + val;
+                    }
+                })
+                .tooltip('item*percent', (item, percent) => {
+                    percent = percent * 100 + '%';
+                    return {
+                        name: item,
+                        value: percent
+                    };
+                })
+                .style({
+                    lineWidth: 1,
+                    stroke: '#fff'
+                });
+            chart2.render();
+
+            const data3 = [
+                {year: '1951 年', sales: 38},
+                {year: '1952 年', sales: 52},
+                {year: '1956 年', sales: 61},
+                {year: '1957 年', sales: 145},
+                {year: '1958 年', sales: 48},
+                {year: '1959 年', sales: 38},
+                {year: '1960 年', sales: 38},
+                {year: '1962 年', sales: 38}
+            ];
+            const chart3 = new G2.Chart({
+                container: 'c3',
+                forceFit: true,
+                height: 300,
+                padding: [20, 20, 20, 20]
+            });
+            chart3.source(data3);
+            chart3.scale('sales', {
+                tickInterval: 20
+            });
+            chart3.interval().position('year*sales');
+            chart3.render();
+
+            const scene = new Scene({
+                id: 'device-map',
+                map: new GaodeMap({
+                    pitch: 0,
+                    style: 'light',
+                    center: [121.410765, 31.256735],
+                    zoom: 14.83
+                })
+            });
+
+            fetch(
+                'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+            )
+                .then(res => res.json())
+                .then(data => {
+                    scene.addImage(
+                        '00',
+                        'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
+                    );
+                    scene.addImage(
+                        '01',
+                        'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
+                    );
+                    scene.addImage(
+                        '02',
+                        'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
+                    );
+                    const imageLayer = new PointLayer()
+                        .source(data, {
+                            parser: {
+                                type: 'json',
+                                x: 'longitude',
+                                y: 'latitude'
+                            }
+                        })
+                        .shape('name', ['00', '01', '02'])
+                        .size(20);
+                    scene.addLayer(imageLayer);
+                });
+        }
+    };
+</script>
+
+<style lang="scss">
+    .home:first-child {
+        padding-top: 4px;
+    }
+
+    #device-map {
+        position: relative;
+        width: 100%;
+        height: 500px;
+    }
+</style>
diff --git a/src/views/index/index.vue b/src/views/layout/index.vue
similarity index 98%
rename from src/views/index/index.vue
rename to src/views/layout/index.vue
index 0365b54..060cf87 100644
--- a/src/views/index/index.vue
+++ b/src/views/layout/index.vue
@@ -86,7 +86,7 @@
     }
 
     .header {
-        top: 0px;
+        top: 0;
         width: 100%;
         height: 60px;
         border-bottom: 1px solid #dcdfe6;
@@ -144,14 +144,14 @@
 
     .view {
         top: 1px;
-        bottom: 0px;
+        bottom: 0;
         width: 100%;
         position: absolute;
     }
 
     .operator {
         text-align: center;
-        margin: 5px 0px;
+        margin: 5px 0;
     }
 
     .page {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 85cabae..1b72e40 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -46,7 +46,7 @@
                 </div>
             </div>
         </div>
-        <particles></particles>
+        <particles/>
     </div>
 </template>
 <script>