thoth-frontend-test/src/views/quality/taskStatistics.vue

<template>
  <div @click="openDrawer = false">
    <el-container class="defect-container">
      <el-header class="defect-main" style="height: auto;">
        <el-form :model="chartForm" class="demo-form-inline" :inline="true">
          <el-form-item label="时间：">
            <div class="date-select">
              <span :class="[dateType==='week'?'date-active':'']" class="date-item" @click.stop="dateType='week';setDate('week')">本周</span>
              <span :class="[dateType==='month'?'date-active':'']" class="date-item" @click.stop="dateType='month';setDate('month')">本月</span>
              <span :class="[dateType==='year'?'date-active':'']" class="date-item" @click.stop="dateType='year';setDate('year')">本年</span>
            </div>
            <el-date-picker
              v-model="stratAndEnd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="yyyy.MM.dd"
              :default-time="['00:00:00','23:59:59']"
              @change="dateType = ''"
            />
          </el-form-item>

        </el-form>
        <el-form :model="chartForm" class="demo-form-inline" :inline="true">
          <el-form-item label="团队：">
            <el-select
              v-model="chartForm.team"
              placeholder="请选择"
              size="small"
              clearable
              filterable
              multiple
            >
              <el-option-group
                v-for="group in teamOptions"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.teamId"
                  :label="item.teamName"
                  :value="item.teamId"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="技术模块：">
            <el-cascader
              v-model="chartForm.moduleIds"
              size="small"
              clearable
              collapse-tags
              :props="{ multiple: true }"
              :options="moduleList"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="data-total">
          <div v-for="(item,index) in Summary" :key="'Summary'+index" class="data-item" :class="['item'+ (index + 1)]">
            <article>
              <div class="item-top">
                <div class="item-circle">
                  <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
                  <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
                  <img v-show="index === 2" src="../../../src/assets/defect_images/reopen.png">
                </div>
                <span>{{ item.label }}</span>
                <el-tooltip v-if="index === 0" class="item" effect="dark" content="统计区间内，新建的任务数量" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
                <el-tooltip v-if="index === 1" class="item" effect="dark" content="任务最近一次更新状态为“已上线”在统计区间内，并且当前状态是“已上线”的任务数量" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
                <el-tooltip v-if="index === 2" class="item" effect="dark" content="任务最近一次更新状态为“Hold”在统计区间内，并且当前状态是“Hold”的任务数量" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
              <div class="item-title" @click.stop="getRequiredNum(item)">{{ item.total }}</div>
              <div class="item-line" />
              <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
              <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</div>
              <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
            </article>
          </div>
        </div>
        <div class="chart-item bottom-padding">
          <h3>状态累积流量图</h3>
          <status-chart :chart-data="cumulativeData" @code="statusCumulativeData" @clone="openDrawer = false" />
        </div>
      </el-header>
      <el-main class="charts-main">
        <el-tabs v-model="activeTab" class="tab-change" @tab-click="onSubmit">
          <el-tab-pane name="1">
            <span slot="label" class="tab-item">累计新增</span>
          </el-tab-pane>
          <el-tab-pane name="2">
            <span slot="label" class="tab-item">累计上线</span>
          </el-tab-pane>
        </el-tabs>
        <div class="chart-item">
          <h3 v-show="activeTab === '1'">新增趋势图</h3>
          <h3 v-show="activeTab === '2'">上线趋势图</h3>
          <tendency-chart :chart-data="tendencyData" type-title="任务数量" @code="getTrendChart" @clone="openDrawer = false" />
        </div>
        <div class="chart-item">
          <h3>所属需求方向分布图</h3>
          <belong-requirement-chart :chart-data="belongRequirementData" @code="getRequirementData" @clone="openDrawer = false" />
        </div>
        <div class="chart-item">
          <h3>周期统计<span>（根据排期计算）</span></h3>
          <!-- <div class="chart-item-tip">
            <i class="el-icon-warning-outline" />
            <span>仅统计状态已变更“已排期”且排期不为空的任务</span>
          </div> -->
          <cycle-statistic :chart-data="cycleData" type="task" @clickCount="clickCycleData" />
        </div>
        <div class="chart-item">
          <h3>周期&等待时长分布图<span>（根据排期计算）</span></h3>
          <!-- <div class="chart-item-tip">
            <i class="el-icon-warning-outline" />
            <span>仅统计状态已变更“已排期”且排期不为空的任务；横坐标表示任务交付日期，纵坐标代表研发交付周期（研发、联调、上线类型排期的总周期)</span>
          </div> -->
          <development-cycle
            id="102"
            :chart-data="developmentCycleData"
            type="task"
            :graph-type.sync="graphType"
            :graph-type-list="graphTypeList"
            @change="getDevelopmentCycle()"
          />
        </div>
        <div class="chart-item">
          <h3>人力统计<span>（根据排期计算）</span></h3>
          <cycle-statistic :chart-data="taskPeoplecData" type="task_a" @clickCount="getTaskPeoplecData" />
        </div>
        <div class="chart-item">
          <h3>人力分布图<span>（根据排期计算）</span></h3>
          <development-cycle
            id="105"
            :chart-data="developmentTaskPeopleData"
            type="task"
            :graph-type.sync="graphTypes"
            :graph-type-list="peopleTypeList"
            @change="getManpowerDistributedData()"
          />
        </div>
        <div class="chart-item">
          <h3>任务分布图</h3>
          <distribution-chart
            :chart-data="distributeData"
            :status-list="distributeStatusList"
            :status.sync="distributeStatus"
            :active-tab="activeTab"
            @change="getDistributeData()"
            @code="getTaskDat"
            @state="getStatusType"
            @clone="openDrawer = false"
          />
        </div>
        <div class="chart-item">
          <h3>状态停留分布图</h3>
          <status-stay-chart :chart-data="statusStayData" @code="statusStayChart" @clone="openDrawer = false" />
        </div>
        <div class="chart-item">
          <h3>模块分布图</h3>
          <belong-chart :chart-data="moduleDistributeData" @code="getModuleDistribute" @clone="openDrawer = false" />
        </div>
        <div class="chart-item">
          <h3>排期发生变更的任务（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
          <change-require-chart :chart-data="changeTaskData" type-name="任务" />
        </div>
        <div class="chart-item">
          <h3>报告统计</h3>
          <cycle-statistic :chart-data="reportSummaryData" child-data="relativeRatio" :show-tips="false" @clickCount="clickCount" />
        </div>
        <div class="chart-item">
          <h3>缺陷统计</h3>
          <bug-list :chart-data="bugListData" @requireBug="clickCountStr" />
        </div>
      </el-main>
      <div @click.stop>
        <drawer-all v-if="openDrawer" :drawer="openDrawer" :data="requireList" :status="reqStatus" @clone="clone" />
      </div>
    </el-container>
  </div>
</template>
<script>
import moment from 'moment'
moment.locale('zh-cn')
import { mapGetters } from 'vuex'
import { settingQueryBizModuleList } from '@/api/defectManage'
import { teamQueryTeamInfoList } from '@/api/configure'
import {
  getSummary,
  getCumulativeFlowDiagram,
  getTaskCountTrend,
  getRequirementOrientationDistributeData,
  getTaskPeriodicData,
  getTaskRdDeliveryPeriodicData,
  getDistributeData,
  getStatusStayData,
  getModuleDistributeData,
  getTaskUnlockData,
  getReportSummary,
  getBugStatisticData,
  getManpowerStatistics,
  getManpowerDistributedData
} from '@/api/statisticsApi/taskStatistics'
import statusChart from './components/statusChart'
import tendencyChart from './components/tendencyChart'
import belongRequirementChart from './components/belongRequirementChart'
import cycleStatistic from './components/cycleStatistic'
import developmentCycle from './components/developmentCycle'
import distributionChart from './components/distributionChart'
import statusStayChart from './components/statusStayChart'
import belongChart from './components/belongChart'
import changeRequireChart from './components/changeRequireChart'
import bugList from './components/bugList'
import drawerAll from './components/drawerAll'
export default {
  components: {
    statusChart,
    tendencyChart,
    belongRequirementChart,
    cycleStatistic,
    developmentCycle,
    distributionChart,
    statusStayChart,
    belongChart,
    changeRequireChart,
    bugList,
    drawerAll
  },
  data() {
    return {
      requireList: {},
      reqStatus: '',
      bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
      timeTypeList: [ // 日期选择
        { code: 1, label: '周' },
        { code: 2, label: '月' },
        { code: 3, label: '年' }
      ],
      openDrawer: false,
      teamOptions: [], // 团队列表
      chartForm: {}, // 筛选表单
      stratAndEnd: [], // 开始结束日期
      dateType: 'week', // 时间选择类型
      moduleList: [], // 任务方向列表
      Summary: [], // 顶部数据
      activeTab: '1', // tab标签
      cumulativeData: null, // 任务状态累计流数据
      tendencyData: null, // 趋势图数据
      belongRequirementData: null, // 所属需求方向分布图
      cycleData: [], // 周期统计数据
      taskPeoplecData: [], // 任务人力统计
      graphTypes: -1, // 任务人力分布图默认
      graphType: 4, // 周期分布图选项
      graphTypeList: [// 周期分布图选项列表
        { code: 4, label: '研发交付周期' },
        { code: 5, label: '研发周期' },
        { code: 6, label: '测试周期' },
        { code: 7, label: '提测等待测试时长' }
      ],
      developmentCycleData: [], // 研发交付周期分布数据
      developmentTaskPeopleData: [], // 人力分布图
      distributeStatus: 1, // 任务分布图任务状态
      distributeStatusList: [
        { code: 1, label: '任务状态' },
        { code: 2, label: '任务等级' },
        { code: 3, label: '开发负责人' },
        { code: 4, label: '测试负责人' },
        { code: 5, label: '跟版客户端' },
        { code: 6, label: '直接归属' }
      ], // 任务分布图任务状态列表
      peopleTypeList: [ // 人力分布图选项列表
        { code: -1, label: '排期使用人力' },
        { code: 0, label: '开发类型排期使用人力' },
        { code: 1, label: '用例类型排期使用人力' },
        { code: 2, label: '联调类型排期使用人力' },
        { code: 3, label: '提测类型排期使用人力' },
        { code: 4, label: '测试类型排期使用人力 ' },
        { code: 5, label: '准出类型排期使用人力 ' },
        { code: 6, label: '上线类型排期使用人力 ' },
        { code: 7, label: '其他 ' }
      ],
      moduleDistributeData: null, // 任务模块分布
      distributeData: null, // 任务分布图数据
      statusStayData: null, // 状态停留图数据
      moduleDistribute: null, // 模块分布图数据
      changeTaskData: null, // 排期变更任务数据
      changeTotal: 0, // 变更总数
      reportSummaryData: null, // 报告统计数据
      bugListData: {} // 缺陷统计数据
    }
  },
  computed: {
    ...mapGetters(['bizId']),
    globalParams: { // 通用接口参数
      get() {
        const moduleIds = this.chartForm.moduleIds
        const team = this.chartForm.team
        const params = {
          startTime: this.stratAndEnd[0] || null,
          endTime: this.stratAndEnd[1] || null,
          bizId: this.bizId,
          teamIds: team && team.length > 0 ? team : null,
          moduleIds: moduleIds && moduleIds.length > 0 ? moduleIds : null
        }
        return params
      }
    },
    timeType: {
      get() {
        let timeType = 0
        switch (this.dateType) {
          case 'week':
            timeType = 1
            break
          case 'month':
            timeType = 2
            break
          case 'year':
            timeType = 3
            break
          default:
            timeType = 0
            break
        }
        return timeType
      }
    }
  },
  watch: {
    bizId: {
      handler(newV) {
        if (newV === -1) return
        this.init()
      },
      immediate: true
    }
  },
  created() {
    this.$store.state.data.status = true
  },
  methods: {
    async init() {
      this.setDate(this.dateType)
      this.getTeamList()
      this.getMoudlesList()
    },
    onSubmit() {
      if (this.activeTab === '2' && this.distributeStatus === 1) {
        this.distributeStatus = 2
      }
      this.getSummary()
      this.getCumulativeFlowDiagram()
      this.getTaskCountTrend()
      this.getBelongRequirementData()
      this.getCycleData()
      this.getManpowerStatistics()
      this.getDevelopmentCycle()
      this.getManpowerDistributedData()
      this.getModuleDistributeData()
      this.getDistributeData()
      this.getStatusStayData()
      this.getTaskUnlockData()
      this.getReportSummary()
      this.getBugStatisticData()
    },
    setDate(type) { // 日期筛选
      let startDate = null
      let endDate = null
      switch (type) {
        case 'week':
          startDate = moment().startOf('week').format('YYYY.MM.DD')
          endDate = moment().endOf('week').format('YYYY.MM.DD')
          this.bugCountTimeType = this.timeTypeList[0].code
          break
        case 'month':
          startDate = moment().startOf('month').format('YYYY.MM.DD')
          endDate = moment().endOf('month').format('YYYY.MM.DD')
          this.bugCountTimeType = this.timeTypeList[1].code
          break
        case 'year':
          startDate = moment().startOf('year').format('YYYY.MM.DD')
          endDate = moment().endOf('year').format('YYYY.MM.DD')
          this.bugCountTimeType = this.timeTypeList[2].code
          break
      }
      this.stratAndEnd = [startDate, endDate]
      this.onSubmit()
    },
    async getMoudlesList() { // 技术模块
      const res = await settingQueryBizModuleList(this.bizId)
      if (res.code === 200) {
        this.moduleList = this.handlerModules(res.data)
      }
    },
    handlerModules(arr) {
      return arr.map(item => ({
        ...item,
        value: item.id,
        label: item.moduleName,
        children: item.childModules.length ? this.handlerModules(item.childModules) : null
      }))
    },
    async getTeamList() { // 获取我的团队和所有团队
      const myRes = await teamQueryTeamInfoList({ type: 0 })// 我的团队
      const allRes = await teamQueryTeamInfoList({ type: 1 })// 所有团队
      this.teamOptions = [
        { label: '我的团队', options: [...myRes.data.list] },
        { label: '全部团队', options: [...allRes.data.list] }
      ]
    },
    async getSummary() { // 获取顶部数据
      const res = await getSummary(this.globalParams)
      if (res.code === 200) this.Summary = res.data || []
    },
    async getTaskCountTrend() { // 趋势图日期变动
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        timeType: this.timeType
      }
      const res = await getTaskCountTrend(params)
      if (res.code === 200) this.tendencyData = res.data
    },
    async getBelongRequirementData() { // 所属需求方向分布图
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getRequirementOrientationDistributeData(params)
      if (res.code === 200) this.belongRequirementData = res.data
    },
    async getCumulativeFlowDiagram() { // 任务状态累计流图
      const params = {
        ...this.globalParams,
        timeType: this.timeType
      }
      const res = await getCumulativeFlowDiagram(params)
      if (res.code === 200) this.cumulativeData = res.data
    },
    async getManpowerStatistics() { // 获取任务人力统计
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getManpowerStatistics(params)
      if (res.code === 200) this.taskPeoplecData = res.data
    },
    async getManpowerDistributedData() { // 人力分布图
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        graphType: this.graphTypes,
        timeType: this.timeType
      }
      const res = await getManpowerDistributedData(params)
      if (res.code === 200) {
        res.data.length > 0
          ? this.developmentTaskPeopleData = res.data
          : this.developmentTaskPeopleData = [moment().format('YYYY-MM-DD'), '0']
      }
    },
    async getCycleData() { // 周期统计数据
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getTaskPeriodicData(params)
      if (res.code === 200) this.cycleData = res.data
    },
    async getDevelopmentCycle() { // 获取研发交付周期分布数据
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        graphType: this.graphType
      }
      const res = await getTaskRdDeliveryPeriodicData(params)
      if (res.code === 200) {
        res.data.length > 0
          ? this.developmentCycleData = res.data
          : this.developmentCycleData = [moment().format('YYYY-MM-DD'), '0']
      }
    },
    async getDistributeData() { // 获取任务分布图
      this.openDrawer = false
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        distributeType: this.distributeStatus
      }
      const res = await getDistributeData(params)
      if (res.code === 200) this.distributeData = res.data
    },
    async getStatusStayData() { // 状态停留时长分布
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getStatusStayData(params)
      if (res.code === 200) this.statusStayData = res.data
    },
    async getModuleDistributeData() { // 获取模块分布
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getModuleDistributeData(params)
      if (res.code === 200) this.moduleDistributeData = this.handlerData(res.data)
    },
    handlerData(arr) { // 处理任务模块分布图数据
      const bfs = (arr) => {
        for (const item of arr) {
          if (item.children && item.children.length > 0) {
            delete item.value
            bfs(item.children)
          } else {
            delete item.children
          }
        }
      }
      bfs(arr)
      return { children: arr, name: '模块分布' }
    },
    async getTaskUnlockData() { // 排期发生变更的任务
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        distributeType: this.distributeStatus
      }
      const res = await getTaskUnlockData(params)
      if (res.code === 200) {
        this.changeTaskData = res.data || []
        this.changeTotal = this.changeTaskData.length
      }
    },
    async getReportSummary() { // 报告统计
      const params = { ...this.globalParams, type: Number(this.activeTab) }
      const res = await getReportSummary(params)
      if (res.code === 200) this.reportSummaryData = res.data
    },
    async getBugStatisticData() { // 缺陷统计
      const params = { ...this.globalParams, type: Number(this.activeTab) }
      const res = await getBugStatisticData(params)
      if (res.code === 200) this.bugListData = res.data
    },
    getStatusType(e) {
      this.reqStatus = e
    },
    mapData(data) {
      const arr = []
      data.map(item => {
        arr.push(item.label.substr(2))
      })
      return arr
    },
    getRequiredNum(value) {
      value.title = value.label
      value.toType = '任务'
      this.requireList = { ...value, ...this.Summary }
      this.openDrawer = true
    },
    getModuleDistribute(value, data) {
      if (value.data === undefined) {
        this.clone()
        return
      }
      value.title = '模块分布图数据'
      value.xaxis = ['全部']
      this.requireList = { ...value, ...data, name: value.data.data ? value.data.data.name : value.data._origin.name }
      this.openDrawer = true
    },
    statusCumulativeData(value, option, data) {
      value.title = '状态累积流量图数据'
      value.toType = '任务'
      value.towTimeLine = option.legend.data
      value.statusList = this.cumulativeData
      this.requireList = { ...value, xaxis: data[0].dayTime }
      this.openDrawer = true
    },
    getRequirementData(value, data) {
      value.title = '所属需求方向分布图数据'
      value.toType = '需求'
      this.requireList = { ...value, ...data }
      this.openDrawer = true
    },
    getTrendChart(value, option, data) {
      const titArr = ['占位', '新增趋势图', '上线趋势图']
      value.title = titArr[Number(this.activeTab)] + '数据'
      value.toType = '任务'
      this.requireList = { ...value, ...data }
      this.openDrawer = true
    },
    clickCycleData(value, data) {
      value.title = '周期统计数据'
      value.toType = '任务'
      value.xaxis = this.mapData(data)
      value.yaxis = data
      this.requireList = value
      this.openDrawer = true
    },
    getTaskPeoplecData(value, data) {
      value.title = '人力统计数据'
      value.toType = '任务'
      value.xaxis = this.mapData(data)
      value.yaxis = data
      this.requireList = value
      this.openDrawer = true
    },
    clickCountStr(value) { // 需求bug 浮层数据
      value.title = '缺陷统计数据'
      value.xaxis = ['全部', 'P0', 'P1', 'P2', 'P3']
      this.requireList = value
      this.openDrawer = true
      window.log({ c: 'statistic', d: 'task_defect_statistics_data' })
    },
    clickCount(value, data) {
      value.title = '报告统计数据'
      value.xaxis = ['全部', '提测报告', '测试日报', '准出报告']
      this.requireList = { ...value, reportData: data }
      this.openDrawer = true
      window.log({ c: 'statistic', d: 'task_report_statistics_data' })
    },
    getTaskDat(value) {
      value.title = '任务分布图数据'
      value.toType = '任务'
      this.requireList = { ...value, ...this.distributeData }
      this.openDrawer = true
      window.log({ c: 'statistic', d: 'task_distribution_data' })
    },
    statusStayChart(value, list, data) {
      value.title = '状态停留分布图数据'
      value.toType = '任务'
      value.towTimeLine = list
      value.statusList = data
      this.requireList = { ...value, xaxis: data.xaxis }
      this.openDrawer = true
      window.log({ c: 'statistic', d: 'task_state_stay_data' })
    },
    clone(v) {
      this.openDrawer = false
    }
  }
}
</script>
<style lang="scss" scoped>
.defect-container {
  width: 100%;
  height:100%;
  background:#F2F3F6;
  display: inline-block;
  color: #666666;
  h3 {
    font-size: 18px;
    margin: 0;
    padding: 0;
    span {
      font-size: 14px;
      color: #666666;
    }
  }
  .defect-main {
    padding: 20px 20px 0 20px;
    height:100%;
    width:auto;
    background:#ffffff;
    margin: 10px;
    border-radius: 4px;
    .date-select {
      line-height: 20px;
      display: inline-block;
      .date-item {
        display: inline-block;
        width: 40px;
        text-align: center;
        cursor: pointer;
        border-radius: 2px;
      }
      .date-active {
        color: #FFFFFF;
        background-color: #409EFF;
      }
    }
  }
}
.data-total {
  display: grid;
  width: 100%;
  margin: auto;
  grid-template-columns: repeat(3,25%);
  grid-gap: 12.5%;
  padding-bottom: 40px;
  ul,li{
    padding:0;margin:0;list-style:none
  }
  .data-item {
    position: relative;
    width: 100%;
    border-radius: 8px;
    article {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #FFFFFF;
    }
    .item-top {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 20px;
      font-size: 13px;
      .item-circle {
        height: 36px;
        width: 36px;
        border-radius: 50%;
        background:rgba(255,255,255,0.24);
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          height: 20px;
          width: 20px;
        }
      }
      span {
        margin-right: 5px;
      }
    }
    .item-line {
      width: 100%;
      border-bottom:1px solid rgba(255,255,255,0.2);
    }
    .item-title {
      font-size: 40px;
      padding: 5% 20px;
      cursor: pointer;
    }
    .item-up,.item-down {
      font-size: 13px;
      padding: 10px 20px 0 20px;
      margin-bottom: 20px;
    }
    .item-up i {
      color:#F32850
    }
    .item-down i {
      color:#9FFF39
    }
  }
  .item1 {
    background-image: url('../../../src/assets/defect_images/数据1.png');
    background-size: 100% 100%;
    background-position: 50% 50%;
    box-shadow:0px 50px 24px -25px rgba(64,137,255,0.30);
  }
  .item2 {
    background-image: url('../../../src/assets/defect_images/数据2.png');
    background-size: 100% 100%;
    background-position: 50% 50%;
    box-shadow:0px 50px 24px -25px rgba(78,188,250,0.40);
  }
  .item3 {
    background-image: url('../../../src/assets/defect_images/数据3.png');
    background-size: 100% 100%;
    background-position: 50% 50%;
    box-shadow:0px 50px 24px -25px rgba(255,136,134,0.30);
  }
  .item4 {
    background-image: url('../../../src/assets/defect_images/数据4.png');
    background-size: 100% 100%;
    background-position: 50% 50%;
    box-shadow:0px 50px 24px -25px rgba(83,97,255,0.30);
  }
}
.bottom-padding {
  padding-bottom: 30px;
}
.charts-main {
  padding-bottom: 20px;
  width:auto;
  background:#ffffff;
  margin: 10px;
  border-radius: 4px;
  .chart-item {
    margin-bottom: 30px;
  }
  .tab-change {
    overflow: hidden;
  }
  .chart-item-tip {
    padding: 6px 10px;
    margin-top: 5px;
    font-size: 12px;
    color: #444444;
    background: rgba(230, 162, 61, 0.1);
    border: 2px;
    i {
      margin-right: 10px;
    }
  }
}
.strong-font {
  color: #F01A1A !important;
  font-size: 18px !important;
}
/deep/.el-tabs__nav-wrap:after {
  background-color: #E4E7ED !important;
}
</style>