style:地图

@@ -47,6 +47,21 @@ export const asyncRoutes = [
       }
     ]
   },
+  // 监管首页
+  {
+    path: '/jgHome',
+    component: Layout,
+    redirect: '/jgHome',
+    meta: { title: '首页' },
+    children: [
+      {
+        path: 'jgHome',
+        component: () => import('@/views/jgHome/index'),
+        name: 'jgHome',
+        meta: { title: '首页', icon: 'workbench', affix: true }
+      }
+    ]
+  },
   // 接收报文查询
   {
     path: '/jsbwcx',

@@ -151,6 +151,10 @@ div:focus {
 .d-flex {
   display: flex;
 }
+.d-flex-center {
+  display: flex;
+  align-items: center;
+}
 
 .bg-color-blue {
   background-color: #1a5cd7;

@@ -58,7 +58,7 @@
 </template>
 
 <script>
-// 监管首页
+// 上报首页
 import wgsl from "./wgsl.vue";
 // 引入表格数据
 import data from "./data"

+<template>
+  <div id="barChart"></div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    };
+  },
+  mounted () {
+    this.drawProvinceMap();
+  },
+  methods: {
+    drawProvinceMap () {
+      var chartDom = document.getElementById('barChart');
+      var myChart = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['网络断开', '网络正常']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false
+            },
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        series: [
+          {
+            name: '网络正常',
+            type: 'bar',
+            itemStyle: {
+              color: '#67C23A'
+            },
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [200, 170, 240, 244, 200, 220, 210]
+          },
+
+          {
+            name: '网络断开',
+            type: 'bar',
+            itemStyle: {
+              color: '#F56C6C'
+            },
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [-120, -132, -101, -134, -190, -230, -210]
+          }
+        ],
+
+      }
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        this.myChart.resize();
+      });
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+#barChart {
+  width: 100%;
+  height: 500px;
+}
+</style>

+.jgHome {
+  display: flex;
+  justify-content: space-between;
+
+  &-left,
+  &-right {
+    width: 30%;
+
+    .fznum {
+      font-size: 24px;
+      color: $light-blue;
+
+      span {
+        font-size: 14px;
+        color: #606266;
+      }
+    }
+
+    .fzl {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 70px;
+        margin-right: 15px;
+      }
+
+      p:nth-child(1) {
+        font-size: 18px;
+      }
+
+    }
+
+    .zszm {
+      justify-content: space-between;
+
+      li:nth-child(1) {}
+    }
+  }
+
+  .barChart {
+    flex: 1;
+    margin-top: 10px;
+    height: calc(100vh - 355px);
+  }
+
+  &-center {
+    width: 39%;
+  }
+}
\ No newline at end of file

+<template>
+  <div class="jgHome">
+    <div class="jgHome-left">
+      <el-card>
+        <div slot="header">
+          <span>发证情况</span>
+          <el-button style="float: right;" type="text">更多</el-button>
+        </div>
+        <div class="fzl">
+          <img src="../../image/zs.png" alt="">
+          <div>
+            <p>发证量</p>
+            <p class="fznum">10000<span>本</span></p>
+          </div>
+        </div>
+        <ul class="zszm d-flex-center">
+          <li>
+            <p>证书</p>
+            <p class="fznum">600<span>本</span></p>
+          </li>
+          <li>
+            <p>证明</p>
+            <p class="fznum">900<span>本</span></p>
+          </li>
+        </ul>
+      </el-card>
+      <el-card class="barChart">
+        <barChart />
+      </el-card>
+    </div>
+    <div class="jgHome-center">
+      <el-card>
+      </el-card>
+    </div>
+    <div class="jgHome-right">
+      <el-card>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import barChart from './components/barChart'
+export default {
+  name: "jgHome",
+  components: { barChart },
+  data () {
+    return {
+    }
+  },
+  methods: {}
+}
+</script>
+<style scoped lang="scss">
+@import "./index.scss";
+</style>