feat:首页

+import filter from '@/utils/filter.js'
+class data extends filter {
+  constructor() {
+    super()
+  }
+  columns () {
+    return [
+      {
+        type: 'index',
+        label: "序号",
+      },
+      {
+        prop: "xzqmc",
+        label: "行政区名称",
+      },
+      {
+        prop: "xzqzs",
+        label: "行政区总数",
+      },
+      {
+        prop: "jrl",
+        label: "接入量",
+      },
+      {
+        prop: 'jscgl',
+        label: '接收成功率',
+        render: (h, scope) => {
+          return (
+            <div>
+              {scope.row.jscgl} %
+            </div>
+          )
+        }
+      },
+      {
+        prop: "dk",
+        label: "成功率得分",
+      },
+      {
+        prop: "wjrqx",
+        label: "未接入区县",
+      },
+      {
+        prop: "jrdf",
+        label: "接入得分",
+      },
+      {
+        prop: "jrdf",
+        label: "未上传登薄日志区县",
+      },
+      {
+        prop: "jrdf",
+        label: "登薄日志得分",
+      },
+      {
+        prop: "jrdf",
+        label: "总评分",
+      }
+    ]
+  }
+}
+export default new data()

 .home {
-  background: #fff;
   height: 100%;
   width: 100%;
   box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
 
   &-left {
-    width: 50%;
+    width: 40%;
     padding-top: 25px;
   }
+
+  &-right {
+    width: 59.5%;
+
+    .gkList {
+      @include flex-center;
+      flex-direction: column;
+
+      li:nth-child(1) {
+        color: #409EFF;
+        font-size: 24px;
+      }
+    }
+
+    .jrdgk {
+      display: flex;
+      margin-top: 5px;
+      justify-content: space-between;
+
+      .box-card {
+        width: 49.5%;
+      }
+    }
+
+    .jrdList {
+      ul {
+        @include flex-center;
+        flex-direction: column;
+
+        li:nth-child(1) {
+          color: #409EFF;
+          font-size: 24px;
+        }
+      }
+    }
+
+    .jrdList:nth-of-type(2) {
+      li:nth-child(1) {
+        color: #67C23A;
+      }
+    }
+
+    .jrdList:nth-of-type(3) {
+      li:nth-child(1) {
+        color: #F56C6C;
+      }
+    }
+  }
+
+  .sbqkgs {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    li {
+      font-size: 24px;
+    }
+
+    li:nth-child(2) {
+      color: #409EFF;
+      margin-left: 25px;
+    }
+  }
+
+  .jrxxlb {
+    margin-top: 5px;
+
+    .title {
+      text-align: center;
+      line-height: 36px;
+    }
+  }
 }
\ No newline at end of file

 <template>
   <div class="home">
-    <div class="home-left">
+    <el-card class="home-left">
+      <!-- 地图 -->
       <wgsl></wgsl>
+    </el-card>
+    <div class="home-right">
+      <!-- 陕西省接入概括 -->
+      <el-card>
+        <div slot="header">
+          陕西省接入概括
+        </div>
+        <!-- 陕西省接入概括列表 -->
+        <el-row :gutter="20">
+          <el-col :span="6" v-for="(item, index) in gkList" :key="index">
+            <ul class="gkList">
+              <li>{{ item.value }}</li>
+              <li>{{ item.title }}</li>
+            </ul>
+          </el-col>
+        </el-row>
+      </el-card>
+      <div class="jrdgk">
+        <!-- 接入点概括 -->
+        <el-card class="box-card">
+          <div slot="header">
+            接入点概括
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
+              <ul>
+                <li>{{ item.value }}</li>
+                <li>{{ item.title }}</li>
+              </ul>
+            </el-col>
+          </el-row>
+        </el-card>
+        <!-- 上报情况概括 -->
+        <el-card class="box-card">
+          <div slot="header">
+            上报情况概括
+          </div>
+          <ul class="sbqkgs">
+            <li>总数量</li>
+            <li>99999</li>
+          </ul>
+        </el-card>
+      </div>
+      <!-- 底部表格 -->
+      <el-card class="jrxxlb">
+        <div class="title">陕西省平台接入情况</div>
+        <!-- 陕西省平台接入情况table -->
+        <lb-table ref="table" :pagination="false" :heightNum="527" :column="tableData.columns" :data="tableData.data">
+        </lb-table>
+      </el-card>
     </div>
   </div>
 </template>
@@ -9,15 +60,60 @@
 <script>
 // 监管首页
 import wgsl from "./wgsl.vue";
+// 引入表格数据
+import data from "./data"
 export default {
   name: "home",
   components: { wgsl },
   data () {
-    return {};
+    return {
+      // 陕西省接入概括
+      gkList: [
+        {
+          value: 6269,
+          title: '总数量'
+        },
+        {
+          value: 300,
+          title: '日均接入量'
+        },
+        {
+          value: 0,
+          title: '当天接入量'
+        },
+        {
+          value: 3620,
+          title: '总体质量'
+        }
+      ],
+      // 接入点概括
+      jrdList: [
+        {
+          value: 60,
+          title: '总数量'
+        },
+        {
+          value: 60,
+          title: '正常'
+        },
+        {
+          value: 60,
+          title: '异常'
+        }
+      ],
+      // 表格数据
+      tableData: {
+        // 表格头部信息
+        columns: data.columns(),
+        // 表格列表数据
+        data: [{}]
+      }
+    }
   },
-  methods: {},
-};
+  methods: {}
+}
 </script>
 <style scoped lang="scss">
+@import "~@/styles/mixin.scss";
 @import "./home.scss";
 </style>

@@ -6,7 +6,6 @@
 </template>
  
 <script>
-import echarts from "echarts";
 export default {
     data () {
         return {
@@ -60,9 +59,10 @@ export default {
         drawProvinceMap (provinceName, mapName) {
             this.provinceName = provinceName;
             this.mapName = mapName;
+            // 引入区域数据
             require(`./map/${this.provinceName}.js`);
             let _this = this;
-            let myChart8 = echarts.init(this.$refs.mapContainProvince);
+            let myChart8 = this.$echarts.init(this.$refs.mapContainProvince);
             const option = {
                 visualMap: {
                     min: _this.min,
@@ -72,12 +72,15 @@ export default {
                         color: ["lightskyblue"],
                     },
                 },
+                // 数据移入显示
                 tooltip: {
                     trigger: "item",
                     formatter: function (params) {
                         return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
                     },
+                    // 边框颜色
                     borderColor: "#CB000C",
+                    // 边框宽度
                     borderWidth: "1",
                 },
                 series: [
@@ -85,7 +88,6 @@ export default {
                         type: "map",
                         map: this.mapName,
                         itemStyle: {
-                            // normal: { label: { show: true } },
                             normal: {  //正常状态
                                 label: {
                                     show: true,
@@ -107,6 +109,7 @@ export default {
         },
     },
     mounted () {
+        // 初始化数据
         this.drawProvinceMap("shanxi1", "陕西");
     }
 }