<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" class="customBlock">
          <div class="customPicker">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
            ></el-date-picker>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- tab切换end -->

    <!-- 主题部分 -->
    <div class="operStatisticsInner">
      <el-row :gutter="20">
        <!-- 左边start -->
        <el-col :span="18" style="">
          <!-- 上边统计区块 -->
          <el-row :gutter="40" class="staitcDataSec">
            <el-col :span="6">
              <div class="grid-content bg-purple staitcDataItem">
                <el-row :gutter="20">
                  <el-col :span="11" class="imgBlock">
                    <img src="@/assets/images/workIcon.png" alt="" />
                  </el-col>
                  <el-col :span="13" 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="20">
                  <el-col :span="11" class="imgBlock">
                    <img src="@/assets/images/doneWorkIcon.png" alt="" />
                  </el-col>
                  <el-col :span="13">
                    <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="20">
                  <el-col :span="11" class="imgBlock">
                    <img src="@/assets/images/workTimeIcon.png" alt="" />
                  </el-col>
                  <el-col :span="13">
                    <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="20">
                  <el-col :span="11" class="imgBlock">
                    <img src="@/assets/images/workDailyIcon.png" alt="" />
                  </el-col>
                  <el-col :span="13">
                    <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">
              <!-- 工单数趋势 -->
              <div class="grid-content bg-purple workPanel">
                <div class="panelTit">工单数趋势</div>
                <work-panel-chart></work-panel-chart>
              </div>
              <!-- 工单数趋势 end -->
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple siteWorkPanel">
                <div class="panelTit">站点工单</div>
                <site-work-chart></site-work-chart>
              </div>
            </el-col>
          </el-row>
          <!-- 左中区块 end -->

          <!-- 左下区块 -->
          <el-row :gutter="20" class="mt-20">
            <el-col :span="24">
              <!-- 各站点各类工单数统计 -->
              <div class="grid-content bg-purple staticPanel">
                <div class="panelTit">各站点各类工单数统计</div>
                <work-table></work-table>
              </div>
              <!-- 各站点各类工单数统计 end -->
            </el-col>
          </el-row>
          <!-- 左下区块 end -->
        </el-col>
        <!-- 左边end -->

        <!-- 右边 -->
        <el-col :span="6" style="">
          <!-- 右上区块 -->
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 工单状态 -->
              <div class="grid-content bg-purple" style="height: 440px">
                <div class="panelTit">工单状态</div>
                <pie-chart></pie-chart>
              </div>
              <!-- 工单状态 end -->
            </el-col>
          </el-row>
          <!-- 右上区块 end -->

          <!-- 右下区块 -->
          <el-row :gutter="20" class="mt-20">
            <el-col :span="24">
              <!-- 运维工工单数 -->
              <div class="grid-content bg-purple" style="height: 365px">
                <div class="panelTit">运维工工单数</div>
                <ope-work-chart></ope-work-chart>
              </div>
              <!-- 运维工工单数 end -->
            </el-col>
          </el-row>
          <!-- 右下区块 end -->
        </el-col>
        <!-- 右边 end-->
      </el-row>
    </div>
    <!-- 主题部分end -->
  </div>
</template>
<script>
import workPanelChart from './components/workPanelChart'
import siteWorkChart from './components/siteWorkChart'
import workTable from './components/workTable'
import pieChart from './components/pieChart'
import opeWorkChart from './components/opeWorkChart'

export default {
  components: {
    workPanelChart,
    siteWorkChart,
    workTable,
    pieChart,
    opeWorkChart,
  },
  data() {
    return {
      value1: '',
      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>