thoth-frontend-test/src/views/quality/components/tables/index.vue

<template>
  <div style="margin: 0 30px;">
    <el-table v-if="title === '状态停留分布图数据' || title === '需求分布图数据' || title === '需求方向分布图数据' || title === '任务分布图数据' || title === '状态累积流量图数据' || title === '周期统计数据' || title === '人力统计数据' || title === '新增趋势图数据' || title === '上线趋势图数据' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '所属需求方向分布图数据' || title === `模块分布图数据` || title === '累计新增' && type === '需求' || title === '累计新增' && type === '任务' || title === '技术准入' && type === '需求' || title === '技术准入' && type === '任务' || title === '累计上线' && type === '需求' || title === '累计上线' && type === '任务' || title === '累计hold' && type === '需求' || title === '累计hold' && type === '任务'" :data="data" style="width: 100%;" :height="setTitleHeight()" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="优先级" min-width="80" align="left">
        <template slot-scope="scope" style="text-align: center;">
          <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ 'P'+scope.row.priority }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级' || type === '需求类型' || title === '需求分布图数据' && type === '跟版客户端' || type === 'pm' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' && type === '需求' || title === '人力统计数据' && type === '需求' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据' || title === '累计新增' && type === '需求' || title === '技术准入' && type === '需求' || title === '累计上线' && type === '需求' || title === '累计hold' && type === '需求'" label="需求名称" :min-width="title === '周期统计数据' || title === '人力统计数据' ? '120' : '360'" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ scope.row.requirementDisplayId }}</div>
          <div class="drawer-name" @click="jumper(scope.row, '需求')">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '任务' || type === '任务状态' || title === '所属需求方向分布图数据' || type === '任务等级' || type === '开发负责人' || type === '测试负责人' || title === '任务分布图数据' && type === '跟版客户端' || type === '直接归属' || title === '状态累积流量图数据' && type === '任务' || title === '周期统计数据' && type === '任务' || title === '新增趋势图数据' && type === '任务' || title === '上线趋势图数据' && type === '任务' || title === '人力统计数据' && type === '任务' || title === `模块分布图数据` || title === '累计新增' && type === '任务' || title === '技术准入' && type === '任务' || title === '累计上线' && type === '任务' || title === '累计hold' && type === '任务'" label="任务名称" :min-width="title === '周期统计数据' || title === '人力统计数据' ? '120' : '360'" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ scope.row.taskIdSting }}</div>
          <div class="drawer-name" @click="jumper(scope.row, '任务')">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="title === '周期统计数据' && mintitle !== ''" :label="mintitle" min-width="150" align="center">
        <template slot="header">
          <span>{{ mintitle }}</span>
          <el-tooltip placement="top" popper-class="cycleStatistic-tips">
            <i class="el-icon-info" style="cursor: pointer;color:rgba(121,132,150,0.8);margin-left:5px;" />
            <div slot="content" class="tooltip-content">
              <div v-if="mintitle === '产品技术侧总周期'">'产品技术侧总周期定义：需求从BRD评审通过到交付的总周期。计算条件：仅计算需求计划里 BRD评审通过时间不为空，且需求状态已变更为“已排期”且排期不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算）'</div>
              <div v-if="mintitle === '产品侧总周期'">'产品侧总周期定义：需求从BRD评审通过到技术准入的总周期。计算条件：仅计算需求计划里BRD评审通过时间和技术准入时间均不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算、没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
              <div v-if="mintitle === '技术侧总周期'">'技术侧总周期定义：需求从技术准入到交付的总周期。计算条件：仅计算需求计划里技术准入时间不为空，且需求状态已变更为“已排期”且需求排期不为空的需求。（没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
              <div v-if="mintitle === '研发交付周期'">'研发交付周期定义：{{ type }}排期里开发、联调、上线类型排期的总周期。计算条件：仅计算{{ type }}状态已变更为“已排期”且{{ type }}排期不为空的{{ type }}。'</div>
              <div v-if="mintitle === '研发周期'">'研发周期定义：{{ type }}排期里开发、联调类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且{{ type }}排期不为空的{{ type }}。计算规则：'</div>
              <div v-if="mintitle === '测试周期'">'测试周期定义：{{ type }}排期里测试类型排期的总周期。计算条件：仅计算{{ type }}状态已变更为“已排期”且需求排期不为空的{{ type }}。'</div>
              <div v-if="mintitle === '提测等待测试时长'">'提测等待测试时长定义：任务排期里提测排期结束日期距离测试排期开始日期的天数。计算条件：仅计算任务状态已变更为“已排期”且排期不为空，且提测、测试类型排期不为空的任务。'</div>
            </div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">{{ getCountDataList(scope.row) }}</template>
      </el-table-column>
      <el-table-column v-if="title === '人力统计数据' && mintitle !== ''" :label="mintitle" min-width="150" align="center">
        <template slot-scope="scope">
          {{ getCountDataList(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column v-if="type === '开发负责人'" label="开发负责人" min-width="100" align="center">
        <template slot-scope="scope">{{ scope.row.rdObject !== null? scope.row.rdObject.name: '' }}</template>
      </el-table-column>
      <el-table-column v-if="type === '测试负责人'" label="测试负责人" min-width="100" align="center">
        <template slot-scope="scope">{{ scope.row.qaObject !== null?scope.row.qaObject.name: '' }}</template>
      </el-table-column>
      <el-table-column v-if="title === '需求分布图数据' && type === '跟版客户端'" label="跟版客户端" min-width="100" align="center">
        {{ oftype }}
      </el-table-column>
      <el-table-column v-if="title === '任务分布图数据' && type === '跟版客户端'" label="跟版客户端" min-width="100" align="center">
        {{ oftype }}
      </el-table-column>
      <el-table-column v-if="type === '直接归属'" label="直接归属" min-width="110" align="center" show-overflow-tooltip>
        {{ oftype }}
      </el-table-column>
      <el-table-column v-if="type === 'pm'" label="PM" min-width="100" show-overflow-tooltip align="center">
        <template v-if="scope.row.pmMemberInfoResponse" slot-scope="scope">
          <span>{{ scope.row.pmMemberInfoResponse.name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '需求类型'" label="需求类型" min-width="100" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' && type === '需求' || title === '人力统计数据' && type === '需求' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据' || title === '累计新增' && type === '需求' || title === '技术准入' && type === '需求' || title === '累计上线' && type === '需求' || title === '累计hold'" label="状态" prop="statusName" min-width="100" align="center" />
      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级' || title === '状态累积流量图数据' && type === '任务' || title === '周期统计数据' && type === '任务' || title === '人力统计数据' && type === '任务' || title === '新增趋势图数据' && type === '任务' || title === '上线趋势图数据' && type === '任务' || title === '所属需求方向分布图数据' || title === `模块分布图数据` || title === '累计新增' && type === '任务' || title === '技术准入' && type === '任务' || title === '累计上线' && type === '任务' || title === '累计hold' && type === '任务'" label="状态" prop="statusString" min-width="100" align="center" />
    </el-table>

    <el-table v-if="title === '去除节假日的修复时长区间数据' || title === '不去除节假日的修复时长区间数据'" :data="data" style="width: auto;" height="calc(100vh - 355px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="缺陷等级" min-width="80" align="left">
        <template slot-scope="scope" style="text-align: center;">
          <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ scope.row.priorityName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bugName" label="缺陷名称" min-width="200" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
          <span class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="title === '不去除节假日的修复时长区间数据'" prop="devFixTime" label="缺陷修复时长" min-width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTime/(1000 * 3600) | numFilter }}
        </template>
      </el-table-column>
      <el-table-column v-if="title === '去除节假日的修复时长区间数据'" prop="fixTimePurgeNH" label="缺陷修复时长(去除节假日)" min-width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTimePurgeNH/(1000 * 3600) | numFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="bugStatusName" label="状态" min-width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.bugStatusName }}
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="title === '分布图数据' || title === '去除节假日的修复时长数据' || title === '模块分布数据' || title === '缺陷统计数据' || title === '责任人分布数据' || title === '平均修复时长数据' || title === '趋势图数据' || title === '累计修复' && type === '缺陷' || title === '累计reopen' && type === '缺陷' || title === '累计新增' && type === '缺陷'" :data="data" style="width: auto;" :height="setTitleHeight()" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="缺陷等级" min-width="80" align="left">
        <template slot-scope="scope" style="text-align: center;">
          <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ scope.row.priorityName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bugName" label="缺陷名称" min-width="200" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
          <span class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="title === '模块分布数据' || title === '缺陷统计数据' || title === '责任人分布数据' || title === '平均修复时长数据'" prop="devFixTime" label="缺陷修复时长" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTime/(1000 * 3600) | numFilter }}
        </template>
      </el-table-column>
      <el-table-column v-if="title === '模块分布数据' || title === '去除节假日的修复时长数据' || title === '责任人分布数据'" prop="fixTimePurgeNH" label="缺陷修复时长(去除节假日)" :min-width="title === '模块分布数据' || title === '责任人分布数据' ? '110': '80'" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTimePurgeNH/(1000 * 3600) | numFilter }}
        </template>
      </el-table-column>
      <el-table-column v-if="type === '端类型' || type === '发现方式' || type === '发现阶段' || type === '缺陷类型'" :label="type" min-width="100" align="center">
        {{ oftype }}
      </el-table-column>
      <el-table-column prop="bugStatusName" label="状态" min-width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.bugStatusName }}
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="title === '报告统计数据'" :data="data" style="width: auto;" height="calc(100vh - 296px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="报告名称" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.typeString === '日报'" class="drawer-name" @click.stop="jumper(scope.row, '日报')">{{ scope.row.reportName || '' }}</span>
          <span v-if="scope.row.typeString === '准出'" class="drawer-name" @click.stop="jumper(scope.row, '准出')">{{ scope.row.reportName || '' }}</span>
          <span v-if="scope.row.typeString === '提测报告'" class="drawer-name" @click.stop="jumper(scope.row, '提测')">{{ scope.row.reportName || '' }}</span>
          <div v-if="scope.row.typeString === '准出' && scope.row.passStatus === 1" style="color: red;">不通过</div>
          <div v-if="scope.row.typeString === '提测报告' && scope.row.returnReason" style="color: red;">打回报告：{{ scope.row.returnReason }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="statusString" label="状态" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.statusString }}
        </template>
      </el-table-column>
      <el-table-column label="报告人" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.creatorObject.name || '' }}
        </template>
      </el-table-column>
      <el-table-column prop="typeString" label="类型" min-width="110" />
    </el-table>
  </div>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import { EncryptId } from '@/utils/crypto-js.js'
export default {
  filters: {
    numFilter(value) {
      let realVal = ''
      if (!isNaN(value) && value !== '' && value !== 0) {
        realVal = parseFloat(value).toFixed(1) + 'H' // 截取当前数据到小数点后两位
      } else {
        realVal = '--'
      }
      return realVal
    }
  },
  props: {
    data: { type: Array, default: null },
    title: { type: String, required: true },
    type: { type: String, default: null },
    oftype: { type: String, default: null },
    mintitle: { type: String, default: '' }
  },
  data() {
    return {
      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']
    }
  },
  methods: {
    getCountDataList(list) {
      let str = ''
      if (list.countDataList) {
        list.countDataList.map(item => {
          if ('平均' + this.mintitle === item.label) {
            str = item.countStr
          }
        })
      }
      return str + '天'
    },
    setTitleHeight() {
      if (this.title === '状态停留分布图数据' || this.title === '状态累积流量图数据') {
        return 'calc(100vh - 363px)'
      } else if (this.title === '需求方向分布图数据' || this.title === `模块分布图数据`) {
        return 'calc(100vh - 200px)'
      } else if (this.title === '累计新增' || this.title === '技术准入' || this.title === '累计上线' || this.title === '累计hold' || this.title === '累计修复' || this.title === '累计reopen') {
        return 'calc(100vh - 134px)'
      } else if (this.title === '模块分布数据') {
        return 'calc(100vh - 175px)'
      } else {
        return 'calc(100vh - 318px)'
      }
    },
    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')
    }
  }
}
</script>

<style lang="scss" scoped>
.div_priority {
  color: #ffffff;
  width:fit-content;
  padding: 0 12px;
  border-radius: 4px;
  margin-left: 4px;
}
.drawer-name:hover {
  color: #409eff;
  cursor: pointer;
}
.drawer-id {
  color: rgb(167, 174, 188);
  font-size: 10px;
}
</style>
<style>
.cycleStatistic-tips {
  width: 500px !important;
  background:rgba(121,132,150,0.8) !important;
  color: #FFF !important;
}
</style>