thoth-frontend-test/src/views/quality/components/drawerAll.vue

<template>
  <el-drawer :title="Statistics.title" :visible.sync="drawer_" :direction="direction" :modal="false" :class="{'drawer-box': showClass}" size="100%" :before-close="handleClose">
    <div v-if="Statistics.title === '任务分布图数据'" class="qz-drawer-grade">按任务等级分布</div>
    <div v-if="Statistics.title === '分布图数据'" class="qz-drawer-grade-tow">按缺陷等级分布</div>
    <div>
      <div v-if="Statistics.title !== '模块分布数据'" :class="[Statistics.towTimeLine ? 'qz-drawer-padding' : 'qz-drawer-padding-s', 'qz-drawer-header']">
        <div class="qz-drawer-scll">
          <timeline :data="list" :num="defaultKey" :bgmargin="bgMargin" @update="getvalue" />
        </div>
        <div v-if="Statistics.towTimeLine" class="qz-drawer-scll">
          <timeline :data="Statistics.towTimeLine" :num="defaultKey2" :bgmargin="bgMargin" @update="getvalueTow" />
        </div>
      </div>
      <div v-if="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据'" class="qz-drawer-H">
        <span>{{ status }}</span>为<span>{{ type }}</span>的{{ Statistics.toType }}
      </div>
      <div v-if="Statistics.title === '状态停留分布图数据'" class="qz-drawer-H">
        在<span>{{ type }}</span>状态停留时长为<span>{{ typeTow }}</span>的{{ Statistics.toType }}
      </div>
      <div v-if="Statistics.title === '模块分布数据'" class="qz-drawer-H" style="margin: 20px 30px 10px;">
        模块<span>{{ Statistics.name }}</span>的缺陷
      </div>
      <div v-if="Statistics.title === `${Statistics.qz_holiday}的修复时长区间数据`" class="qz-drawer-H" style="margin: 20px 30px 10px;">
        {{ Statistics.qz_holiday }}修复时间区间为<span>{{ type }}</span>的<span>{{ typeTow }}</span>级缺陷
      </div>
      <qzTable
        :data="tableData"
        :title="Statistics.title"
        :type="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据' || Statistics.title === '分布图数据' ? status : Statistics.toType"
        :oftype="type"
      />
    </div>
    <el-pagination
      style="text-align: right; margin-right: 30px;"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-drawer>
</template>

<script>
import { getRequirement } from '@/api/requirement.js'
import { taskList } from '@/api/taskIndex'
import { bugList } from '@/api/defectManage'
import { getReportList } from '@/api/reportTemplate'
import timeline from '@/components/timeline'
import qzTable from './tables'
export default {
  components: { timeline, qzTable },
  props: {
    data: { type: Object, required: true },
    drawer: { type: Boolean, default: false },
    status: { type: String, default: '' }
  },
  data() {
    return {
      list: [],
      bgMargin: false,
      dataList: [],
      Statistics: {}, // title
      direction: 'rtl',
      showClass: false,
      defaultKey2: 0,
      defaultKey: 0,
      bugList: [],
      type: '',
      typeTow: '',
      towVal: '',
      oneVal: '',
      currentPage: 1,
      total: 0,
      reportData: {},
      paging: {
        curIndex: 1, // 分页
        pageSize: 10 // 分页
      },
      tableData: []
    }
  },
  computed: {
    drawer_: {
      get() { return this.drawer },
      set(v) { this.$emit('clone', v) }
    }
  },
  watch: {
    data: {
      handler(newV, oldV) {
        if (newV) {
          console.log(newV, this.drawer, '刚进来')
          this.Statistics = newV
          this.list = newV.xaxis
          this.type = newV.name
          this.bgMargin = false
          this.currentPage = 1
          this.paging = { curIndex: 1, pageSize: 10 }
          this.setDrawerDate()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.showClass = true
    })
  },
  methods: {
    setDrawerDate() {
      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || this.Statistics.title === '分布图数据') {
        this.defaultKey = this.Statistics.dataIndex
        this.dataList = this.Statistics.yaxis[0].idList[this.defaultKey]
        this.getTableData(this.dataList)
      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '去除节假日的修复时长数据') {
        const key = this.Statistics.xaxis.indexOf(this.Statistics.label)
        this.defaultKey = key === -1 ? 0 : key
        this.dataList = this.Statistics.idList
        this.getTableData(this.dataList)
      } else if (this.Statistics.title === '状态停留分布图数据') {
        this.bgMargin = true
        this.typeTow = this.Statistics.seriesName // 停留时长
        this.defaultKey = this.Statistics.dataIndex
        this.defaultKey2 = Number(this.Statistics.seriesIndex)
        this.dataList = this.Statistics.statusList.yaxis[this.defaultKey2].idList[this.defaultKey]
        this.getTableData(this.dataList)
      } else if (this.Statistics.title === '报告统计数据') {
        const key = this.Statistics.xaxis.indexOf(this.Statistics.label)
        this.defaultKey = key === -1 ? 0 : key
        this.Statistics.label === '总数' ? this.getIdList({ deliverTestReportIdList: this.Statistics.subCountList[0].idList, dailyReportIdList: this.Statistics.subCountList[1].idList, releaseReportIdList: this.Statistics.subCountList[2].idList }) : ''
        key === 1 ? this.getIdList({ deliverTestReportIdList: this.Statistics.subCountList[0].idList }) : '' // 提测
        key === 2 ? this.getIdList({ dailyReportIdList: this.Statistics.subCountList[0].idList }) : '' // 日报
        key === 3 ? this.getIdList({ releaseReportIdList: this.Statistics.subCountList[0].idList }) : '' // 准出
      } else if (this.Statistics.title === '模块分布数据') {
        this.getTableData(this.Statistics.newData.idList)
      } else if (this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据`) {
        this.bgMargin = true
        this.typeTow = this.Statistics.seriesName
        this.defaultKey = this.Statistics.dataIndex
        this.defaultKey2 = Number(this.Statistics.seriesIndex)
        this.dataList = this.Statistics.series[this.defaultKey2].idList[this.defaultKey]
        this.getTableData(this.dataList)
      }
    },
    getvalue(e) { // 时间轴one
      this.oneVal = e
      this.type = e.name
      this.defaultKey = e.value
      this.getTimeLine()
    },
    getvalueTow(e) { // 时间轴tow
      this.towVal = e
      this.typeTow = e.name
      this.defaultKey2 = e.value
      this.getTimeLine()
    },
    getTimeLine() { // 数据筛选
      this.dataList = []
      this.currentPage = 1
      this.paging = { curIndex: 1, pageSize: 10 }
      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || this.Statistics.title === '分布图数据') {
        this.dataList = this.Statistics.yaxis[0].idList[this.oneVal.value]
      } else if (this.Statistics.title === '缺陷统计数据') {
        this.dataList = this.Statistics.yaxis[this.oneVal.value].idList
      } else if (this.Statistics.title === '状态停留分布图数据') {
        this.dataList = this.Statistics.statusList.yaxis[this.defaultKey2].idList[this.defaultKey]
      } else if (this.Statistics.title === '报告统计数据') {
        this.defaultKey === 0 ? this.getIdList({ deliverTestReportIdList: this.Statistics.reportData[1].subCountList[0].idList, dailyReportIdList: this.Statistics.reportData[2].subCountList[0].idList, releaseReportIdList: this.Statistics.reportData[3].subCountList[0].idList }) : ''
        this.defaultKey === 1 ? this.getIdList({ deliverTestReportIdList: this.Statistics.reportData[1].subCountList[0].idList }) : '' // 提测
        this.defaultKey === 2 ? this.getIdList({ dailyReportIdList: this.Statistics.reportData[2].subCountList[0].idList }) : '' // 日报
        this.defaultKey === 3 ? this.getIdList({ releaseReportIdList: this.Statistics.reportData[3].subCountList[0].idList }) : '' // 准出
        return
      } else if (this.Statistics.title === '去除节假日的修复时长数据') {
        this.dataList = this.Statistics[this.defaultKey].idList
      } else if (this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据`) {
        this.dataList = this.Statistics.series[this.defaultKey2].idList[this.defaultKey]
      }
      if (this.dataList[0]) { // 判断idList有没有数据
        this.getTableData(this.dataList)
      } else { // 没有数据初始化table
        this.tableData = []
        this.total = 0
      }
    },
    async getTableData(taskIdList) { // 获取需求、任务、缺陷表格数据
      if (taskIdList.length <= 0) {
        this.tableData = []
        this.total = 0
        return
      }
      const data = { ids: taskIdList, ...this.paging }
      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '需求') {
        const res = await getRequirement(data)
        if (res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      } else if (this.Statistics.title === '任务分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '任务') {
        const res = await taskList(data)
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.total
        }
      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === '去除节假日的修复时长数据' || this.Statistics.title === '模块分布数据' || this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据`) {
        const res = await bugList(data)
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.total
        }
      }
    },
    async getIdList(value) {
      this.reportData = value
      const data = { ...value, ...this.paging }
      const res = await getReportList(data)
      if (res.code === 200) {
        this.tableData = res.data
        this.total = res.total
      }
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.Statistics.title === '报告统计数据' ? this.getIdList(this.reportData) : this.getTableData(this.dataList)
    },
    handleCurrentChange(val) {
      this.paging.curIndex = val
      this.Statistics.title === '报告统计数据' ? this.getIdList(this.reportData) : this.getTableData(this.dataList)
    },
    handleClose(done) { // 关闭
      this.$emit('clone')
    }
  }
}
</script>

<style lang="scss" scoped>
.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: auto;
}
.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
.qz-drawer-H {
  font-size: 16px;
  margin: 0 30px;
  color: #444444;
}
.qz-drawer-H span {
  color: #333333;
  font-weight: 600;
}
.qz-message { color: #444; font-size: 14px;}
.qz-drawer-grade {
  @extend .qz-message;
  position: absolute;
  top: 28px;
  left: 185px;
}
.qz-drawer-grade-tow {
  @extend .qz-message;
  position: absolute;
  top: 28px;
  left: 150px;
}
>>> :focus{outline:0;}
>>>.el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
}
>>>.el-drawer__header {
    color: #444;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0px;
    padding: 20px 30px;
    border-bottom: 1px solid #E2E2E2;
}
.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__wrapper {
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    overflow: hidden;
    margin: 0;
}
>>>.el-drawer__container {
    left: 0;
    right: 0;
    width: 50%;
}
>>>.el-table td, .el-table th {
    padding: 5px 0;
}
</style>