|
@@ -0,0 +1,312 @@
|
|
|
+<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>
|
|
|
+ <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 class="fontSize">{{ status }}</span>为<span class="fontSize">{{ type }}</span>的{{ Statistics.toType }}
|
|
|
+ </div>
|
|
|
+ <div v-if="Statistics.title === '状态停留分布图数据'" class="qz-drawer-H">
|
|
|
+ 在<span class="fontSize">{{ type }}</span>状态停留时长为<span class="fontSize">{{ typeTow }}</span>的{{ Statistics.toType }}
|
|
|
+ </div>
|
|
|
+ <div v-if="Statistics.title === '模块分布数据'" class="qz-drawer-H" style="margin: 20px 30px 10px;">
|
|
|
+ 模块<span class="fontSize">{{ 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 class="fontSize">{{ type }}</span>的<span class="fontSize">{{ typeTow }}</span>级缺陷
|
|
|
+ </div>
|
|
|
+ <qzTable :data="tableData" :title="Statistics.title" :type="Statistics.toType" />
|
|
|
+ </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.subCountList[0].idList, dailyReportIdList: this.Statistics.subCountList[1].idList, releaseReportIdList: this.Statistics.subCountList[2].idList }) : ''
|
|
|
+ this.defaultKey === 1 ? this.getIdList({ deliverTestReportIdList: this.Statistics.subCountList[0].idList }) : '' // 提测
|
|
|
+ this.defaultKey === 2 ? this.getIdList({ dailyReportIdList: this.Statistics.subCountList[0].idList }) : '' // 日报
|
|
|
+ this.defaultKey === 3 ? this.getIdList({ releaseReportIdList: this.Statistics.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-grade {
|
|
|
+ color: #444;
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ left: 185px;
|
|
|
+}
|
|
|
+.fontSize {
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+>>> :focus{outline:0;}
|
|
|
+>>>.el-table::before {
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.div_priority {
|
|
|
+ color: #ffffff;
|
|
|
+ width:fit-content;
|
|
|
+ padding: 0 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-left: 4px;
|
|
|
+}
|
|
|
+>>>.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>
|