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

<template>
  <div @click="openDrawer = false, drawer = 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.rqmtOrntIds"
              size="small"
              clearable
              collapse-tags
              :props="{
                value: 'id',
                label: 'rqmtOrntName',
                children: 'childRqmtOrnts',
                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">
                  <img v-show="index === 3" 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-start">
                  <i class="el-icon-info" />
                </el-tooltip>
                <el-tooltip v-if="index === 1" class="item" effect="dark" content="需求最近一次更新状态为“PRD评审通过”在统计区间内，并且当前状态是“PRD评审通过”及之后状态的需求数量" placement="top-start">
                  <i class="el-icon-info" />
                </el-tooltip>
                <el-tooltip v-if="index === 2" class="item" effect="dark" content="需求最近一次更新状态为“已上线”在统计区间内，并且当前状态是“已上线”及之后状态的需求数量" placement="top-start">
                  <i class="el-icon-info" />
                </el-tooltip>
                <el-tooltip v-if="index === 3" class="item" effect="dark" content="需求最近一次更新状态为“Hold”在统计区间内，并且当前状态为“Hold”的需求数量" placement="top-start">
                  <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="statusAccumulate" @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 v-for="item in countTitle" :key="'countTitle'+item.code" :name="item.code+''">
            <span slot="label" class="tab-item">{{ item.msg }}</span>
          </el-tab-pane>
        </el-tabs>
        <div class="chart-item">
          <h3 v-show="activeTab === '1'">新增趋势图</h3>
          <h3 v-show="activeTab === '2'">上线趋势图</h3>
          <h3 v-show="activeTab === '3'">PRD评审趋势图</h3>
          <h3 v-show="activeTab === '5'">技术准入趋势图</h3>
          <tendency-chart :chart-data="tendencyData" @code="getTrendChart" @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" @clickCount="getClickItem" />
        </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
            :chart-data="developmentCycleData"
            type="require"
            :graph-type.sync="graphType"
            :graph-type-list="graphTypeList"
            @change="getDevelopmentCycle()"
          />
        </div>
        <div class="chart-item">
          <h3>人力统计<span>（根据排期计算）</span></h3>
          <cycle-statistic :chart-data="peopleData" :show-tips="false" @clickCount="getPeopleList" />
        </div>
        <div class="chart-item">
          <h3>人力分布图<span>（根据排期计算）</span></h3>
          <development-cycle
            id="101"
            :chart-data="developmentPeopleData"
            type="require"
            :graph-type.sync="peopleType"
            :graph-type-list="peopleTypeList"
            @change="getDevelopeopleData()"
          />
        </div>
        <div class="chart-item">
          <h3>需求分布图</h3>
          <distribution-chart
            :chart-data="distributeData"
            :status-list="distributeStatusList"
            :status.sync="distributeStatus"
            :active-tab="activeTab"
            @change="getDistributeData()"
            @code="clickCodeData"
            @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="orntDistributeData" @code="statusOrntDistributeData" @clone="openDrawer = false" />
        </div>
        <div class="chart-item">
          <h3>排期发生变更的需求（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
          <change-require-chart :chart-data="changeRequireData" type-name="需求" />
        </div>
        <div class="chart-item" @click.stop>
          <h3>缺陷统计</h3>
          <bug-list :chart-data="bugListData" @requireBug="queryData" />
        </div>
      </el-main>
      <div @click.stop>
        <require-drawer v-if="drawer" :drawer="drawer" :data="requireList" @clone="clone" />
        <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 { settingQueryBizRqmtOrntList } from '@/api/requirement'
import { teamQueryTeamInfoList } from '@/api/configure'
import {
  getRequireCountTitleEnum,
  getSummary,
  getCumulativeFlowDiagram,
  getRequireCountTrend,
  getRequirePeriodicData,
  getRequireRdDeliveryPeriodicData,
  getDistributeData,
  getStatusStayData,
  getOrntDistributeData,
  getReqUnlockData,
  getBugStatisticData,
  getManpowerStatistics,
  getManpowerDistributedData
} from '@/api/statisticsApi/requireStatistics'
import requireDrawer from './components/requireDrawer'
import drawerAll from './components/drawerAll'
import statusChart from './components/statusChart'
import tendencyChart from './components/tendencyChart'
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'
export default {
  components: {
    statusChart,
    tendencyChart,
    cycleStatistic,
    developmentCycle,
    distributionChart,
    statusStayChart,
    belongChart,
    changeRequireChart,
    bugList,
    requireDrawer,
    drawerAll
  },
  data() {
    return {
      drawer: false,
      openDrawer: false,
      requireList: {},
      reqStatus: '',
      bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
      timeTypeList: [ // 日期选择
        { code: 1, label: '周' },
        { code: 2, label: '月' },
        { code: 3, label: '年' }
      ],
      countTitle: [], // 趋势图的动态title
      teamOptions: [], // 团队列表
      chartForm: {}, // 筛选表单
      stratAndEnd: [], // 开始结束日期
      dateType: 'week', // 时间选择类型
      moduleList: [], // 需求方向列表
      Summary: [], // 顶部数据
      activeTab: '1', // tab标签
      cumulativeData: null, // 需求状态累计流数据
      tendencyData: null, // 趋势图数据
      cycleData: [], // 周期统计数据
      peopleData: [], // 人力统计数据
      graphType: 1, // 周期分布图选项
      graphTypeList: [ // 周期分布图选项列表
        { code: 1, label: '产品技术侧总周期' },
        { code: 2, label: '产品侧总周期' },
        { code: 3, label: '技术侧总周期' },
        { code: 4, label: '研发交付周期' },
        { code: 5, label: '研发周期' },
        { code: 6, label: '测试周期 ' }
      ],
      peopleType: -1, // 周期分布图选项
      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: '其他 ' }
      ],
      developmentCycleData: [], // 研发交付周期分布数据
      developmentPeopleData: [], // 人力分布图
      distributeStatus: 1, // 需求分布图需求状态
      distributeStatusList: [
        { code: 1, label: '需求状态' },
        { code: 2, label: '需求等级' },
        { code: 3, label: '需求类型' },
        { code: 4, label: 'pm' },
        { code: 5, label: '跟版客户端' }
      ], // 需求分布图需求状态列表
      orntDistributeData: null, // 所属需求方向数据
      distributeData: null, // 需求分布图数据
      statusStayData: null, // 状态停留图数据
      moduleDistribute: null, // 模块分布图数据
      changeRequireData: null, // 排期变更需求数据
      changeTotal: 0, // 变更总数
      bugListData: {} // 缺陷统计数据
    }
  },
  computed: {
    ...mapGetters(['bizId']),
    globalParams: { // 通用接口参数
      get() {
        const rqmtOrntIds = this.chartForm.rqmtOrntIds
        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,
          rqmtOrntIds: rqmtOrntIds && rqmtOrntIds.length > 0 ? rqmtOrntIds : 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() {
      await this.getRequireCountTitleEnum()
      this.setDate(this.dateType)
      this.getTeamList()
      this.getRequireDirection()
    },
    onSubmit() {
      if (this.activeTab === '2' && this.distributeStatus === 1) {
        this.distributeStatus = 2
      }
      this.getSummary()
      this.getCumulativeFlowDiagram()
      this.getRequireCountTrend()
      this.getCycleData()
      this.getDevelopmentCycle()
      this.getPeopleData()
      this.getDevelopeopleData()
      this.getOrntDistributeData()
      this.getDistributeData()
      this.getStatusStayData()
      this.getReqUnlockData()
      this.getBugStatisticData()
    },
    setDate(type) { // 日期筛选
      this.drawer = false
      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 getRequireCountTitleEnum() { // 趋势图的动态title枚举
      const res = await getRequireCountTitleEnum({ bizId: this.bizId })
      if (res.code === 200) {
        this.countTitle = res.data || []
        this.activeTab = `${res.data[0].code}`
      }
    },
    async getRequireDirection() { // 需求方向列表
      const res = await settingQueryBizRqmtOrntList(this.bizId)
      if (res.code === 200) {
        this.moduleList = this.getRequireData(res.data)
      }
    },
    getRequireData(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].childRqmtOrnts.length < 1 ? delete data[i].childRqmtOrnts : this.getRequireData(data[i].childRqmtOrnts)
      }
      return data
    },
    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 getRequireCountTrend() { // 趋势图日期变动
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        timeType: this.timeType
      }
      const res = await getRequireCountTrend(params)
      if (res.code === 200) this.tendencyData = 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 getPeopleData() { // 人力统计数据
      const params = {
        ...this.globalParams,
        timeType: this.timeType,
        type: Number(this.activeTab)
      }
      const res = await getManpowerStatistics(params)
      if (res.code === 200) this.peopleData = res.data
    },
    async getDevelopeopleData() { // 需求人力分布图
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        graphType: this.peopleType
      }
      const res = await getManpowerDistributedData(params)
      if (res.code === 200) {
        res.data.length > 0
          ? this.developmentPeopleData = res.data
          : this.developmentPeopleData = [moment().format('YYYY-MM-DD'), '0']
      }
    },
    async getCycleData() { // 周期统计数据
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getRequirePeriodicData(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 getRequireRdDeliveryPeriodicData(params)
      if (res.code === 200) {
        res.data.length > 0
          ? this.developmentCycleData = res.data
          : this.developmentCycleData = [moment().format('YYYY-MM-DD'), '0']
      }
    },
    getStatusType(e) {
      this.reqStatus = e
    },
    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 getOrntDistributeData() { // 获取需求方向分布
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getOrntDistributeData(params)
      if (res.code === 200) this.orntDistributeData = this.handlerData(res.data)
    },
    handlerData(arr) { // 处理需求方向分布图数据
      const bfs = (arr) => {
        for (const item of arr) {
          if (item.children && item.children.length > 0) {
            bfs(item.children)
          } else {
            delete item.children
          }
        }
      }
      bfs(arr)
      return { children: arr, name: '需求方向分布' }
    },
    async getReqUnlockData() { // 排期发生变更的需求
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab),
        distributeType: this.distributeStatus
      }
      const res = await getReqUnlockData(params)
      if (res.code === 200) {
        this.changeRequireData = res.data || []
        this.changeTotal = this.changeRequireData.length
      }
    },
    async getBugStatisticData() { // 缺陷统计
      const params = {
        ...this.globalParams,
        type: Number(this.activeTab)
      }
      const res = await getBugStatisticData(params)
      if (res.code === 200) this.bugListData = res.data
    },
    mapData(data) {
      const arr = []
      data.map(item => {
        arr.push(item.label.substr(2))
      })
      return arr
    },
    getRequiredNum(value) {
      this.drawer = true
      value.typeStr = '需求'
      this.requireList = value
    },
    getPeopleList(value, data) {
      console.log(value, data, '点击')
      value.title = '人力统计数据'
      value.xaxis = this.mapData(data)
      value.yaxis = data
      this.requireList = value
      this.openDrawer = true
    },
    statusOrntDistributeData(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
    },
    getTrendChart(value, option, data) {
      const titArr = ['新增趋势图', '上线趋势图', 'PRD评审趋势图', '占位', '技术准入趋势图']
      value.title = titArr[Number(this.activeTab) - 1] + '数据'
      value.toType = '需求'
      this.requireList = { ...value, ...data }
      this.openDrawer = true
    },
    getClickItem(value, data) {
      value.title = '周期统计数据'
      value.toType = '需求'
      value.xaxis = this.mapData(data)
      value.yaxis = data
      this.requireList = value
      this.openDrawer = true
    },
    statusAccumulate(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
    },
    queryData(value) { // 需求bug 浮层数据
      value.title = '缺陷统计数据'
      value.xaxis = ['全部', 'P0', 'P1', 'P2', 'P3']
      this.requireList = value
      this.openDrawer = true
      window.log({ c: 'statistic', d: 'requirement_statistic_defect_statistics' })
    },
    clickCodeData(value) {
      value.title = '需求分布图数据'
      value.toType = '需求'
      this.requireList = { ...value, ...this.distributeData }
      this.openDrawer = true
      window.log({ c: 'statistic', d: 'requirement_statistic_demand_distribution' })
    },
    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: 'requirement_statistic_state_stay' })
    },
    clone(v) {
      this.drawer = 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(4,22%);
  grid-gap: 4%;
  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>