Project_yhfu/src/views/bigdata/tabbar.vue

<template>
  <div class="bigdata-map-tabbar">
    <el-row :gutter="20">
      <el-col :span="4" v-for="(item,index) in data_zhxx_data" :key="index">
        <div class="list-content">
          <span>{{item.value}}</span>
          <h5>{{item.name}}</h5>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="(item,index) in data_zhxx_event" :key="index">
        <div class="list-content">
          <span>{{item.value}}</span>
          <h5>{{item.name}}</h5>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="list-content">
          <span>{{data_zhxx_device}}</span>
          <h5>设备</h5>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  import {getZhxx} from '@/api/bigdata'

  export default {
    data() {
      return {
        data_zhxx_data: [],
        data_zhxx_event: [],
        data_zhxx_device: 0,
        //tab默认停留项el-tab-pane > name = "?"
        activeName: 'sp',
        //地区分类tabtitle
        district: [
          {
            label: '四平市',
            name: 'sp',
            id: ''
          },
          {
            label: '双辽市',
            name: 'sl',
            id: ''
          },
          {
            label: '梨树县',
            name: 'ls',
            id: ''
          },
          {
            label: '伊通县',
            name: 'yt',
            id: ''
          },
          {
            label: '铁东区',
            name: 'td',
            id: ''
          },
          {
            label: '铁西区',
            name: 'tx',
            id: ''
          },
        ],
        // 本地区内分类项数量
        regionNum: [
          {
            count: 641,
            name: '事件'
          },
          {
            count: 351,
            name: '隐患'
          },
          {
            count: 785,
            name: '人口'
          },
          {
            count: 512,
            name: '企业'
          },
          {
            count: 786,
            name: '林场'
          },
          {
            count: 544,
            name: '矿坑'
          },
          {
            count: 320,
            name: '收集点'
          },
          {
            count: 321,
            name: '水鹤'
          },
          {
            count: 400,
            name: '取水口'
          },
          {
            count: 654,
            name: '消火栓'
          },
          {
            count: 806,
            name: '摄像头'
          },
          {
            count: 312,
            name: '养殖场'
          },
          {
            count: 713,
            name: '处理中心'
          },
          {
            count: 132,
            name: '泡沫液'
          },
          {
            count: 466,
            name: '泡沫液'
          },
          {
            count: 897,
            name: '消防力量'
          },
          {
            count: 132,
            name: '探测器'
          }
        ]
      };
    },
    mounted() {
      this.zhxx(null);
    },
    methods: {
      zhxx() {
        let that = this
        getZhxx().then(resp => {
          console.log(resp)
          that.data_zhxx_device = resp.data.device
          that.data_zhxx_data = resp.data.data
          that.data_zhxx_event = resp.data.event
        })
      },

      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  @import '@/assets/styles/base.scss';

  .bigdata-map-tabbar {
    width: 100%;
    height: 28.5vh;
    padding: 0 1rem 1rem 1rem !important;
    box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
    -0 -0 20px rgba($color: #163696, $alpha: .6) inset;

    .el-tabs__item {
      color: #fff;
      font-size: 12px;
      height: 32px;
      line-height: 32px;
      padding: 0 10px;
    }

    .el-tabs__item.is-active {
      color: #3ec6fc;
    }

    .el-tabs__nav-wrap::after {
      background: none;
    }

    .el-tabs__active-bar {
      // background-color: #ffbc30;
      border-radius: 20px;
    }

    .el-tab-pane {
      color: #fff;
    }

    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      line-height: 40px;
    }

    .el-tabs__header {
      margin: 0 0 10px;
    }

    .list-content {
      width: 95%;
      margin: 0 auto;
      text-align: center;
      margin-top: 1rem;

      h5 {
        width: 100%;
        color: #0aaef2;
        padding: .2rem 0;
        border: 1px solid #091641;
        font-size: 12px;
      }

      span {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: $white;
        padding: .5rem 0;
        font-weight: bolder;
        border: 1px solid #091641;
        border-bottom: none;
      }
    }

    .list-content:hover {
      filter: brightness(2.3);
    }
  }
</style>