<template>
  <div class="home">
    <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>

<script>
// 监管首页
import wgsl from "./wgsl.vue";
// 引入表格数据
import data from "./data"
export default {
  name: "home",
  components: { wgsl },
  data () {
    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: {}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "./home.scss";
</style>