thoth-frontend-test/src/views/dataBigManage/components/drawerModal/index.vue

<template>
  <el-drawer
    :modal="false"
    size="100%"
    :class="drawerBox"
    destroy-on-close
    :visible.sync="drawer"
    :before-close="handleClose"
    @click.stop
    @open="setBoxShadow('')"
    @opened="setBoxShadow"
    @close="setBoxShadow('')"
  >
    <template slot="title">
      <div v-if="title" @click.stop>{{ title }}<span class="sub-title">{{ subTitle }}</span></div>
    </template>
    <!-- 时间线 -->
    <div
      v-if="openDrawer && isTimeLine(1)"
      class="qz-drawer-padding qz-drawer-header"
      :style="{paddingTop: !isTimeLine(2) ? '30px':'20px'}"
      @click.stop
    >
      <div ref="timeline1" class="qz-drawer-scll">
        <timeline

          :num="timelineData.firstActive"
          bgmargin
          :data="timelineData.first"
          @update="(params) => timeLineClick(params, 1)"
        />
      </div>
      <div v-if="isTimeLine(2)" ref="timeline2" class="qz-drawer-scll">
        <timeline
          :num="timelineData.secondActive"
          :data="timelineData.second"
          :bgmargin="true"
          @update="(params)=>timeLineClick(params, 2)"
        />
      </div>
    </div>

    <!-- 表格 -->
    <dmTable
      v-if="openDrawer"
      v-loading="loading"
      :table-list="tableList"
      :total="tableList"
      :column="column"
      :table-height="tableHeight"
      @click.stop
      @change="dmTableChange"
    >
      <template #bugStatusNameSlot="{scope}">
        <div @click.stop="print(scope)">自定义</div>
      </template>
      <!-- 报告名称 -->
      <template #returnReasonSlot="{scope}">
        <div v-if="scope.row.reportName" @click.stop>
          <div class="drawer-name" @click.stop="jumper(scope.row,'提测')">{{ scope.row.reportName }}</div>
          <div v-if="scope.row.returnReason" style="color: red">打开报告：{{ scope.row.returnReason }}</div>
        </div>
      </template>
      <!-- 报告人 -->
      <template #creatorObjectSlot="{scope}">
        <div v-if="scope && scope.row && scope.row.creatorObject" @click.stop>{{ scope.row.creatorObject.name }}</div>
      </template>
      <!-- 质量：线上问题_改进方案 -->
      <template #starFlowerDoneSlot="{scope}">
        <div @click.stop>
          <div>{{ scope.row.done + scope.row.undone }}项任务</div>
          <div
            v-if="scope.row.done === scope.row.done + scope.row.undone"
            class="antdv3-tag antdv3-tag-green"
          >
            已完成：{{ scope.row.done }}项
          </div>
          <div v-else class="antdv3-tag antdv3-tag-orange">已完成：{{ scope.row.done }}项</div>
        </div>
      </template>
      <!-- 质量：线上问题_改进方案 -->
      <template #gmtCreateSlot="{scope}">
        <div @click.stop>
          <div>{{ rTime(scope.row.gmtCreate) }}</div>
        </div>
      </template>
    </dmTable>
    <!-- 下拉 -->
    <div class="qz-footer-laout" @click.stop>
      <div style="line-height: 60px;">
<!--        <el-button type="primary" size="mini" @click="exportTable">导 出</el-button>-->
      </div>
      <el-pagination
        :current-page.sync="paging.curIndex"
        :page-size="paging.pageSize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 15, 20, 30]"
        :total="paging.pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-drawer>
</template>
<script>
// import { mapGetters } from 'vuex'
import { bugList } from '@/api/defectManage'
import _ from 'lodash'
import { getReportList } from '@/api/reportTemplate'
import dmTable from './components/table.vue'
import timeline from './components/timeline'
import { columns, timelineList } from './drawerModalData'
import { EncryptId } from '@/utils/crypto-js'
import Clickoutside from 'element-ui/src/utils/clickoutside'
import { requirementQueryRequirementInfoList, taskList } from '@/api/projectIndex'
import {
  // 质量
  getRequireAvgData, // 需求平均交付周期
  getTaskData, // 任务平均交付周期
  getRequirePeopleData, // 平均需求使用人力
  getDelayLaunchData, // 延期提测率
  getDelayReleaseData, // 延期准出率
  bugRepairData, // 缺陷24小时修复率
  bugRepair2Data, // 缺陷平均修复时长
  getStarFlowerList, // 线上问题：半浮层 列表
  getProjectList // 需求任务项目列表: 半浮层
} from '@/api/dataMarket'

export default {
  name: 'DrawerModal',
  components: {
    dmTable, timeline
  },
  directives: { Clickoutside },
  props: {
    // title: {
    //   type: String,
    //   required: false,
    //   default: ''
    // },
    // subTitle: {
    //   type: String,
    //   required: false,
    //   default: ''
    // },
    openDrawer: {
      type: Boolean,
      required: false,
      default: false
    },
    drawerData: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  data() {
    return {
      drawer: false,
      loading: false,
      title: '',
      headerTitle: '',
      // timelineData,
      tableList: [],
      tableListOld: [],
      tableHeight: 'auto',
      column: [],
      ids: [],
      label: '',
      activeLabel: '',
      drawerBox: '',
      subTitle: '',
      sourceData: null,
      timelineData: {
        first: [],
        firstActive: 0,
        second: [],
        secondActive: 0
      },
      paging: {
        curIndex: 1,
        pageTotal: 0,
        pageSize: 10
      }
    }
  },

  watch: {
    drawerData() {
      this.init()
    },
    openDrawer(value) {
      this.drawer = value
      // if (value) {
      //   this.init()
      // }
    }
  },
  created() {
    this.drawer = false
  },
  mounted() {
    this.drawer = false
  },
  methods: {
    print(slotProp) {
      console.log(slotProp)
    },
    init() {
      this.headerTitle = this.drawerData.headerTitle
      this.title = this.headerTitle.search(/质量|效率/) > -1 ? this.drawerData.label || '' : this.drawerData.activeLabel
      if (this.headerTitle && this.title) {
        console.log(this.drawerData)
        this.pagingInit()
        this.column = []
        this.tableList = []
        this.drawer = this.openDrawer
        this.setTitle()
        this.setIds() // 设置ids
        this.setTimeLineData()
        this.setTitleHeight()
        this.setTimeLine()
        this.setColumn()
        this.setTableList()
      } else {
        this.handleClose()
      }
    },
    // 设置标题
    setTitle() {
      // this.title = this.headerTitle.search(/质量|效率/) > -1 ? this.drawerData.label : this.drawerData.activeLabel
      if (this.headerTitle === '质量') {
        if (this.drawerData.label === '提测打回率') {
          this.title = '提测报告'
        }
        if (this.drawerData.label === '准出不通过率') {
          this.title = '准出记录'
        }
      }
      if (this.headerTitle === '效率') {
        this.activeLabel = this.drawerData.activeLabel
        if (this.drawerData.label === '需求平均交付周期') {
          this.title = '需求周期'
        }
        if (this.drawerData.label === '任务平均交付周期') {
          this.title = '任务周期'
        }
        if (this.drawerData.label === '平均需求使用人力') {
          this.title = '需求人力'
        }
        if (this.drawerData.label === '缺陷平均修复时长') {
          this.title = '缺陷修复时长'
        }
      }
      this.sourceData = this.drawerData.list
      if (this.headerTitle === '效率' && this.title && this.title.search(/延期准出率|延期提测率/) < 0) {
        this.sourceData = [
          {
            label: this.drawerData.label === '缺陷24小时修复率' ? '全部' : this.drawerData.label,
            IdList: this.drawerData.idList
          },
          ...this.drawerData.subCountList
        ]
      }
    },
    // 处理日期格式：JS - 2020-01-01T00:00:00.000000Z 日期格式转换
    rTime(date) {
      if (!date) return ''
      var json_date = new Date(date).toJSON()
      return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // 设置ids
    setIds() {
      if (this.headerTitle === '质量') {
        this.ids = this.drawerData.IdList.map(e => e)
      }
      if (this.headerTitle === '吞吐量') {
        this.drawerData.list.forEach(elm => {
          if (elm.label === this.drawerData.activeLabel && elm.idList) {
            this.ids = elm.idList.map(e => e)
          }
        })
      }
      if (this.headerTitle === '效率') {
        this.ids = this.drawerData.idList.map(e => e) // 提测报告
      }
    },
    // 设置时间轴
    setTimeLineData() {
      let { firstActive, first, secondActive, second } = this.timelineData
      if (this.title.search(/新增问题|新增缺陷|reopen|提测报告|准出记录/) < 0) {
        if (this.headerTitle === '吞吐量') {
          secondActive = 0
          firstActive = 0
          first = []

          this.sourceData.forEach((elm, index) => {
            if (this.title.indexOf(elm.label) > -1) {
              firstActive = index
            }
            first.push(elm.label)
          })
          if (this.title.search(/需求/) > -1) {
            first = timelineList.requirementData.map(e => e)
          }
        }
        if (this.headerTitle === '效率') {
          secondActive = 0
          firstActive = 0
          first = []
          second = []
          if (this.title === '缺陷24小时修复率') {
            first = [...timelineList.time]
          }
          if (this.title === '延期提测率') {
            first = [...timelineList.delayLaunchData]
          }
          if (this.title === '延期准出率') {
            first = [...timelineList.delayLaunchData2]
          }
          if (this.title.search(/延期提测率|延期准出率/) < 0) {
            this.sourceData.forEach((elm, index) => {
              let label = `${elm.label}`
              if (this.activeLabel === label) {
                if (this.title === '缺陷24小时修复率') {
                  secondActive = index
                } else {
                  firstActive = index
                }
              }
              if (this.title === '缺陷24小时修复率') {
                second.push(label)
              } else {
                if (index === 0) {
                  if (label === '需求平均交付周期') {
                    label = '需求交付周期'
                  }
                  if (label === '任务平均交付周期') {
                    label = '任务交付周期'
                  }
                  if (label === '平均需求使用人力') {
                    label = '需求使用人力'
                  }
                  if (this.drawerData.label === '缺陷平均修复时长') {
                    label = '全部'
                  }
                }
                first.push(label)
              }
            })
          }
        }
        this.timelineData = { firstActive, first, secondActive, second }
      }
    },
    handleClose() {
      this.drawer = false
      this.$emit('update:openDrawer', this.drawer)
    },
    handleSizeChange(value) {
      this.paging.pageSize = value
      const paging = _.cloneDeep(this.paging)
      paging.pageSize = value
      this.paging = _.cloneDeep(paging)
      if (this.headerTitle === '效率' && this.title !== '需求人力') {
        this.tableListPagination()
      } else {
        this.setTableList()
      }
    },
    handleCurrentChange(value) {
      // this.paging.curIndex = value
      const paging = _.cloneDeep(this.paging)
      paging.curIndex = value
      this.paging = _.cloneDeep(paging)
      if (this.headerTitle === '效率') {
        this.tableListPagination()
      } else {
        this.setTableList()
      }
    },
    // 导出
    exportTable() {
    },
    // 设置表格头
    setColumn() {
      if (this.title.search(/新增缺陷|reopen|缺陷24小时修复率/) > -1) {
        this.column = columns.bugColumn.map(e => e)
      }
      if (this.title.search(/新增问题/) > -1) {
        this.column = columns.newQuestionColumns.map(e => e)
      }
      if (this.title.search(/提测报告|准出记录/) > -1) {
        this.column = columns.deliverTestReportIdListColumns.map(e => e)
      }
      if (this.headerTitle === '吞吐量') {
        if (this.title.search(/需求/) > -1) {
          this.column = columns.requirementListColumns.map(e => e)
        }
        if (this.title.search(/任务/) > -1) {
          this.column = columns.taskListColumns.map(e => e)
        }
        if (this.title.search(/项目/) > -1) {
          this.column = columns.projectListColumns.map(e => e)
        }
      }
      if (this.headerTitle === '效率') {
        let columnsKey = 'requirementColumns'

        if (this.title === '任务周期') {
          columnsKey = 'taskColumns'
        }
        if (this.title === '需求人力') {
          columnsKey = 'requirementPeopleColumns'
        }
        if (this.title === '延期提测率') {
          columnsKey = 'delayLaunchDataColumns'
        }
        if (this.title === '延期准出率') {
          columnsKey = 'delayReleaseData2Columns'
        }
        if (this.title.search(/缺陷修复时长|缺陷24小时修复率/) > -1) {
          columnsKey = 'bugRepairDataColumns'
        }
        const columnsTipsKey = `${columnsKey}Tips`
        this.column = columns.efficiency[columnsKey].map((elm, index) => {
          if (index === 2 && this.title.search(/任务周期|需求人力|需求周期/) > -1) {
            return columns.efficiency[columnsTipsKey][this.timelineData.firstActive || 0]
          }
          return elm
        })
      }
    },
    // 时间轴点击事件
    timeLineClick({ value, name }, index) {
      this.pagingInit()
      this.ids = []
      if (index === 1) {
        if (this.headerTitle === '吞吐量') {
          this.timelineData.firstActive = value || 0
          if (this.sourceData[value || 0] && this.sourceData[value || 0].idList) {
            this.ids = this.sourceData[value || 0].idList
            this.title = name
          }
        }
        if (this.headerTitle === '效率') {
          this.timelineData.firstActive = value || 0
          if (this.title.search(/延期准出率|延期提测率/) > -1) {
            // this.ids = this.sourceData[value].IdList
          } else {
            this.timelineData.firstActive = value || 0
            this.ids = this.sourceData[value || 0].IdList
          }
          this.setColumn()
        }
        this.setTableList()
      }
      if (index === 2) {
        this.timelineData.secondActive = value || 0
        this.ids = this.sourceData[value || 0].IdList
        this.setTableList()
      }
    },
    // 设置列表数据
    setTableList() {
      console.log(439)
      this.tableList = []
      if (this.headerTitle === '质量') {
        if (this.title.search(/新增缺陷|reopen/) > -1) {
          if (this.ids.length) {
            this.loading = true
            this.getBugStatisticData()
          }
        }
        if (this.title.search(/新增问题/) > -1) {
          if (this.ids.length) {
            this.loading = true
            this.setStarFlowerList()
          }
        }
        if (this.title.search(/提测报告|准出记录/) > -1) {
          if (this.ids.length) {
            this.loading = true
            this.setReportList()
          }
        }
      }
      if (this.headerTitle === '吞吐量') {
        if (this.title.search(/需求/) > -1) {
          if (this.ids.length) {
            this.loading = true
            this.getRequirementList()
          }
        }
        if (this.title.search(/任务/) > -1) {
          if (this.ids.length) {
            this.loading = true
            this.getTaskList()
          }
        }
        if (this.title.search(/项目/) > -1 && this.ids.length) {
          if (this.ids.length) {
            this.loading = true
            this.setProjectList()
          }
        }
      }
      if (this.headerTitle === '效率') {
        if (this.title === '需求周期') {
          if (this.sourceData[0].IdList.length) {
            this.loading = true
            this.setRequireAvgData()
          }
        }
        if (this.title === '任务周期') {
          this.loading = true
          this.setTaskData()
          if (this.sourceData[0].IdList.length) {
            this.loading = true
            this.setTaskData()
          }
        }
        if (this.title === '需求人力') {
          if (this.sourceData[0].IdList.length) {
            this.loading = true
            this.setRequirePeopleData()
          }
        }
        if (this.title === '缺陷修复时长') {
          if (this.sourceData[0].IdList.length) {
            this.loading = true
            this.setbugRepair2Data()
          }
        }
        if (this.title === '缺陷24小时修复率') {
          if (this.sourceData[0].IdList.length) {
            this.loading = true
            this.setbugRepairData()
          }
        }
        if (this.title === '延期提测率') {
          if (this.drawerData.idList.length) {
            this.loading = true
            this.setDelayLaunchData()
          }
        }
        if (this.title === '延期准出率') {
          if (this.drawerData.idList.length) {
            this.loading = true
            this.setDelayReleaseData()
          }
        }
      }
    },
    // 获取需求
    async getRequirementList() {
      const paging = this.paging
      // {"ids":[14952,15453,15988,16182,17445,17447,17735,18062,18064,18067,18134,18137,18138,18140],"curIndex":2,"pageSize":10}
      const res = await requirementQueryRequirementInfoList({
        ids: this.ids,
        curIndex: this.paging.curIndex,
        pageSize: this.paging.pageSize
      })
      if (res.code === 200) {
        this.tableList = res.data.list
        this.paging.pageTotal = res.data.total
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 获取任务
    async getTaskList() {
      const paging = this.paging
      // {"ids":[14952,15453,15988,16182,17445,17447,17735,18062,18064,18067,18134,18137,18138,18140],"curIndex":2,"pageSize":10}
      const res = await taskList({
        ids: this.ids,
        curIndex: this.paging.curIndex,
        pageSize: this.paging.pageSize
      })
      if (res.code === 200) {
        this.tableList = res.data
        this.paging.pageTotal = res.total
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // getStarFlowerList, // 线上问题：半浮层 列表
    async setStarFlowerList() {
      if (!this.ids.length) {
        this.loading = false
        return
      }
      const paging = this.paging
      // {"ids":[14952,15453,15988,16182,17445,17447,17735,18062,18064,18067,18134,18137,18138,18140],"curIndex":2,"pageSize":10}
      const res = await getStarFlowerList({
        idList: this.ids,
        curIndex: this.paging.curIndex,
        pageSize: this.paging.pageSize
      })
      if (res.code === 200) {
        this.tableList = res.data.result
        this.paging.pageTotal = res.data.total
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // getProjectList // 需求任务项目列表: 半浮层
    async setProjectList() {
      const paging = this.paging
      // {"ids":[14952,15453,15988,16182,17445,17447,17735,18062,18064,18067,18134,18137,18138,18140],"curIndex":2,"pageSize":10}
      const res = await getProjectList({
        idList: this.ids.length ? this.ids : [],
        curIndex: this.paging.curIndex,
        pageSize: 15
      })
      if (res.code === 200) {
        // console.log(res)
        this.tableList = res.data.result
        paging.pageTotal = res.data.total
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 累计新增缺陷
    async getBugStatisticData() {
      const paging = this.paging
      // {"ids":[14952,15453,15988,16182,17445,17447,17735,18062,18064,18067,18134,18137,18138,18140],"curIndex":2,"pageSize":10}
      const res = await bugList({
        ids: this.ids,
        curIndex: this.paging.curIndex,
        pageSize: this.paging.pageSize
      })
      if (res.code === 200) {
        this.tableList = res.data
        this.paging.pageTotal = res.total
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 提测报告 deliverTestReportIdList 准出记录 releaseReportIdList
    async setReportList() {
      const key = this.title === '提测报告' ? 'deliverTestReportIdList' : 'releaseReportIdList'
      const paging = this.paging
      const params = {
        ...paging,
        [key]: this.ids
      }
      delete params.pageTotal
      const res = await getReportList(params)
      if (res.code === 200) {
        this.tableList = res.data
        paging.pageTotal = res.total
        this.paging = { ...paging }
        this.loading = false
      }
    },
    /* S 效率：半浮层数据接口 */
    // 需求平均交付周期
    async setRequireAvgData() {
      const paging = this.paging
      const params = {
        ...paging,
        title: this.timelineData.first[this.timelineData.firstActive],
        ids: this.sourceData[0].IdList
      }
      delete params.pageTotal
      const res = await getRequireAvgData(params)
      if (res.code === 200) {
        // this.tableList = res.data
        this.tableListOld = res.data.length && res.data.map(e => e)
        this.tableListPagination()
        paging.pageTotal = this.tableListOld.length
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 任务平均交付周期
    async setTaskData() {
      const paging = this.paging
      const params = {
        ...paging,
        title: this.timelineData.first[this.timelineData.firstActive],
        ids: this.sourceData[0].IdList
      }
      delete params.pageTotal
      const res = await getTaskData(params)
      if (res.code === 200) {
        // this.tableList = res.data
        this.tableListOld = res.data.length && res.data.map(e => e)
        this.tableListPagination()
        paging.pageTotal = this.tableListOld.length
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 平均需求使用人力
    async   setRequirePeopleData() {
      const paging = this.paging
      const params = {
        ...paging,
        title: this.timelineData.first[this.timelineData.firstActive],
        ids: this.sourceData[0].IdList
      }
      delete params.pageTotal
      const res = await getRequirePeopleData(params)
      if (res.code === 200) {
        // this.tableList = res.data
        this.tableListOld = res.data.length && res.data.map(e => e)
        this.tableListPagination()
        paging.pageTotal = this.tableListOld.length
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 缺陷平均修复时长
    async setbugRepair2Data() {
      const paging = this.paging
      const params = {
        ...paging,
        title: this.timelineData.first[this.timelineData.firstActive],
        ids: this.sourceData[0].IdList
      }
      delete params.pageTotal
      const res = await bugRepair2Data(params)
      if (res.code === 200) {
        // this.tableList = res.data
        this.tableListOld = res.data.length && res.data.map(e => e)
        this.tableListPagination()
        paging.pageTotal = this.tableListOld.length
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 缺陷24小时修复率
    async setbugRepairData() {
      const priorityList = [[0, 1, 2, 3], [0, 1], [2, 3]]
      const paging = this.paging
      const params = {
        // ...paging,
        title: this.timelineData.first[this.timelineData.firstActive],
        priorityList: priorityList[this.timelineData.secondActive],
        ids: this.sourceData[0].IdList
      }
      delete params.pageTotal
      const res = await bugRepairData(params)
      if (res.code === 200) {
        this.tableList = res.data
        this.tableListOld = res.data.length && this.tableList.map(e => e)
        paging.pageTotal = this.tableListOld.length
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // getDelayLaunchData, // 延期提测率
    async setDelayLaunchData() {
      const paging = this.paging
      const params = {
        ...paging,
        title: this.timelineData.first[this.timelineData.firstActive],
        ids: this.drawerData.idList
      }
      delete params.pageTotal
      const res = await getDelayLaunchData(params)
      if (res.code === 200) {
        this.tableList = res.data
        this.tableListOld = res.data.length && res.data.map(e => e)
        this.tableListPagination()
        paging.pageTotal = this.tableListOld.length
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // getDelayReleaseData, // 延期准出率
    async setDelayReleaseData() {
      const paging = this.paging
      const params = {
        ...paging,
        title: this.timelineData.first[this.timelineData.firstActive],
        ids: this.drawerData.idList
      }
      delete params.pageTotal
      const res = await getDelayReleaseData(params)
      if (res.code === 200) {
        // this.tableList = res.data
        this.tableListOld = res.data.length && res.data.map(e => e)
        this.tableListPagination()
        paging.pageTotal = this.tableListOld.length
        this.paging = { ...paging }
        this.loading = false
      }
    },
    // 分页
    tableListPagination() {
      if (this.tableListOld.length) {
        this.tableList = this.tableListOld.map(e => e).splice(this.paging.curIndex - 1 || 0, this.paging.pageSize)
      }
    },
    /* E 效率：半浮层数据接口 */
    // 分页数据初始化
    pagingInit() {
      this.paging = {
        curIndex: 1,
        pageTotal: 0,
        pageSize: 10
      }
    },
    // 设置表格高度
    setTitleHeight() {
      if (this.title.search(/状态停留分布图数据|状态累积流量图数据/) > -1) {
        this.tableHeight = 'calc(100vh - 363px)'
      } else if (this.title.search(/需求周期|新增项目|新增任务|需求人力|任务周期|缺陷修复时长|延期准出率|延期提测率/) > -1) {
        this.tableHeight = 'calc(100vh - 288px)'
      } else if (this.title.search(/需求|任务|项目/) > -1) {
        // 吞吐量： 需求
        this.tableHeight = 'calc(100vh - 188px)'
      } else if (this.title === '缺陷24小时修复率') {
        this.tableHeight = 'calc(100vh - 328px)'
      } else {
        this.tableHeight = 'calc(100vh - 136px)'
      }
      if (this.headerTitle === '质量') {
        this.tableHeight = 'calc(100vh - 136px)'
      }
      if (this.headerTitle === '吞吐量') {
        this.tableHeight = 'calc(100vh - 288px)'
      }
    },
    // 设置表头
    // 表格跳转
    dmTableChange({ column, row }) {
      if (this.headerTitle === '质量' && this.drawerData.label === '新增问题') {
        const url = `http://odin.xiaojukeji.com/#/risk/starflower/casedetail?id=${row.id}&name=${row.title}`
        window.open(url, '_blank')
      } else if (this.headerTitle === '质量' && this.drawerData.label.search(/^(提测报告|准出记录)/) > -1) {
        this.jumper(row, '报告')
      } else if (this.headerTitle === '吞吐量') {
        if (this.title.search(/需求/) > -1) {
          this.jumper(row, '需求')
        }
        if (this.title.search(/任务/) > -1) {
          this.jumper(row, '任务')
        }
        if (this.title.search(/项目/) > -1) {
          this.jumper(row, '项目')
        }
      } else if (this.headerTitle === '效率') {
        if (column.label.search(/需求/) > -1) {
          this.jumper(row, '需求')
        }
        if (column.label.search(/任务/) > -1) {
          this.jumper(row, '任务')
        }
        if (column.label.search(/缺陷/) > -1) {
          this.jumper(row, '缺陷')
        }
      } else {
        this.jumper(row, '缺陷')
      }
    },
    // 设置表格样式
    setBoxShadow(key = 'drawer-box') {
      if (key) {
        setTimeout(() => {
          this.drawerBox = key
        }, 300)
      } else {
        this.drawerBox = key
      }
    },
    // 设置时间轴自动滚动
    setTimeLine() {
      this.$nextTick(() => {
        if (this.isTimeLine(1)) {
          //  Number(this.defaultKey) * 109 - 60
          // this.$refs.timeline1.scrollLeft = 100
        }
        if (this.isTimeLine(2)) {
          // Number(this.defaultKey2) * 100 - 60
          // this.$refs.timeline2.scrollLeft = 256
        }
      })
    },
    jumper(val, name) { // 需求、任务、缺陷跳转
      const { bizId = null } = this.$store.state.global || {}
      const bizId_id = EncryptId(`${bizId}_${val.id}`)
      const newTab = this.$router.resolve({ name: name + '详情', query: { bizId_id: bizId_id }})
      window.open(newTab.href, '_blank')
    },
    // 设置时间轴自动滚动
    isTimeLine(index = 1) {
      // 是第一条
      if (index === 1) {
        return this.headerTitle.search(/吞吐量|效率/) > -1
      }
      // 是第二条
      if (index === 2) {
        return this.title.search(/缺陷24小时修复率/) > -1
      }
    }
  }
}
</script>
<style scoped lang='less'>
/deep/ .el-drawer__header {
  color: #444;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;
  padding: 20px 30px;
  border-bottom: 1px solid #E2E2E2;

  .sub-title {
    color: #444;
    font-size: 14px;
    margin-left: 20px;
    font-weight: 400;
  }
}

.drawer-box {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
}
.el-drawer-fade-enter-active {
  animation: el-drawer-fade-in 10ms;
}
.el-drawer-fade-leave-active {
  animation: el-drawer-fade-in 10ms reverse;
}
.el-drawer__wrapper {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  margin: 0;
}
/deep/.el-drawer__container {
  left: 0;
  right: 0;
  width: 50%;
}
/* S 时间轴 */
.qz-drawer-header {
  text-align: center;
  background: #F7F7F7;
  border-radius: 4px;
  min-height: 120px;
  margin: 20px 30px;
  overflow: hidden;
}
.qz-drawer-padding {
  padding: 20px 0;
}
.qz-drawer-padding-s {
  padding: 1px 0;
}
.qz-drawer-scll {
  overflow-x: scroll;
}
.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
.qz-drawer-H {
  font-size: 16px;
  margin: 0 30px;
  color: #444444;
}
.qz-drawer-scll {
  overflow-x: scroll;
}
.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
.qz-drawer-H {
  font-size: 16px;
  margin: 0 30px;
  color: #444444;
}
/* E 时间轴 */
/* S 质量：线上问题_改进方案 */
.antdv3-tag{
  box-sizing: border-box;
  color: rgba(0,0,0,.65);
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  display: inline-block;
  height: auto;
  margin: 0 8px 0 0;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: default;
  opacity: 1;
  transition: all .3s cubic-bezier(.78,.14,.15,.86);
}
.antdv3-tag-orange {
  color: #fa8c16;
  background: #fff7e6;
  border-color: #ffd591;
}
.antdv3-tag-green {
  color: #52c41a;
  background: #f6ffed;
  border-color: #b7eb8f;
}
/* E 质量：线上问题_改进方案 */
.qz-footer-laout {
  display: flex;
  justify-content: space-between;
  margin: 0 30px;
}
.drawer-name:hover {
  color: #409eff;
  cursor: pointer;
}
</style>