<template>
  <div class="app-container operStatisticsPage">
    <!-- tab切换start -->
    <div class="grid-content">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="本月" name="first"></el-tab-pane>
        <el-tab-pane label="上月" name="second"></el-tab-pane>
        <el-tab-pane label="本季度" name="third"></el-tab-pane>
        <el-tab-pane label="上季度" name="five"></el-tab-pane>
        <el-tab-pane label="本年" name="six"></el-tab-pane>
        <el-tab-pane label="上一年" name="seven"></el-tab-pane>
        <el-tab-pane label="自定义时间" name="eight"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- tab切换end -->

    <!-- 主题部分 -->
    <div class="operStatisticsInner">
      <el-row :gutter="20">

        <!-- 左边start -->
        <el-col :span="16" style="border:1px solid red">
          <!-- 上边统计区块 -->
          <el-row :gutter="40" class="staitcDataSec">
            <el-col :span="6">
              <div class="grid-content bg-purple staitcDataItem">
                 <el-row :gutter="40">
                    <el-col :span="12" class="imgBlock">
                      <img src="@/assets/images/workIcon.png" alt="">
                    </el-col>
                    <el-col :span="12" class="staticBlock">
                      <p><span class="num">2</span>个</p>
                      <p>新建工单</p>
                    </el-col>
                 </el-row>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple staitcDataItem">
                 <el-row :gutter="40">
                    <el-col :span="12" class="imgBlock">
                      <img src="@/assets/images/doneWorkIcon.png" alt="">
                    </el-col>
                    <el-col :span="12">
                      <p><span class="num">2</span>个</p>
                      <p>已完成工单</p>
                    </el-col>
                 </el-row>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple staitcDataItem">
                 <el-row :gutter="40">
                    <el-col :span="12" class="imgBlock">
                      <img src="@/assets/images/workTimeIcon.png" alt="">
                    </el-col>
                    <el-col :span="12">
                      <p><span class="num">2</span>个</p>
                      <p>平均相应时间</p>
                    </el-col>
                 </el-row>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple staitcDataItem">
                 <el-row :gutter="40">
                    <el-col :span="12" class="imgBlock">
                      <img src="@/assets/images/workDailyIcon.png" alt="">
                    </el-col>
                    <el-col :span="12">
                      <p><span class="num">2</span>个</p>
                      <p>日均工单数</p>
                    </el-col>
                 </el-row>
              </div>
            </el-col>
          </el-row>
           <!-- 上边统计区块 end -->

           <!-- 左中区块 -->
           <el-row :gutter="20" class="mt-20">
             <el-col :span="16">
                
              
             </el-col>
             <el-col :span="8">
               <div class="grid-content bg-purple "> 
                  <div class="panelTit">站点工单</div>
                 
                 </div>
             </el-col>
           </el-row>
           <!-- 左中区块 end -->
        </el-col>
         <!-- 左边end -->

        <el-col :span="8" style="border:1px solid red">11</el-col>
      </el-row>
    </div>
    <!-- 主题部分end -->
  </div>
</template>
<script>
import workPanel from "./components/workPanel";

export default {
  components: { workPanel},
  data() {
    return {
      activeName: 'first',
    }
  },
  watch: {},

  methods: {},
}
</script>



<style lang="scss">
// tab重置样式
.el-tabs--card > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs--card .el-tabs__header:hover,
.el-tabs__item:hover {
  color: #409eff !important;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>