半浮层：0.0.1

src/views/dataBigManage/components/drawerModal/components/table.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <el-table
+      :data="tableList"
+      class="bug_tableHeader"
+      :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '500' }"
+      row-key="id"
+      style="width: auto;"
+      :height="tableHeight"
+    >
+      <el-table-column
+        v-for="(columnItem, columnIndex) in column"
+        :key="columnIndex"
+        :label="columnItem.label"
+        :prop="columnItem.key"
+        :min-width="columnItem.minWidth"
+        :align="columnItem.align"
+        show-overflow-tooltip
+      >
+        <!-- 自定义表头 -->
+        <template slot="header" slot-scope="scope">
+          <div v-if="scope.column.label.search(/研发周期|缺陷等级/) > -1">
+            {{ scope.column.label }}
+            <el-tooltip
+              v-if="setContent(scope.column.label)"
+              effect="dark"
+              :content="setContent(scope.column.label)"
+              placement="top"
+              popper-class="cycleStatistic-tips">
+              <i class="el-icon-info" />
+            </el-tooltip>
+          </div>
+          <div v-else>
+            {{ scope.column.label }}
+          </div>
+        </template>
+        <!-- 自定义列内容 -->
+        <template slot-scope="scope" style="text-align: center;">
+          <!-- 缺陷等级 -->
+          <div v-if="columnItem.key === 'priorityName'">
+            <div class="div_priority" :style="{background: priorityColors[scope.row[columnItem.key][1]]}">
+              {{ scope.row[columnItem.key] }}
+            </div>
+          </div>
+          <!-- 缺陷名称 -->
+          <div v-else-if="columnItem.key === 'bugName'">
+            <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
+            <div class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</div>
+          </div>
+          <!-- 报告名称 -->
+          <div v-else-if="columnItem.key === 'bugName'">
+            <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
+            <div class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</div>
+          </div>
+          <div v-else>
+            {{ scope.row[columnItem.key] }}
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { EncryptId } from '@/utils/crypto-js'
+import { requireTips, priorityColors } from './tableData'
+// Object.freeze(requireTips)
+Object.freeze(priorityColors)
+
+export default {
+  name: 'Table',
+  props: {
+    tableList: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    column: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    tableHeight: {
+      type: String,
+      required: false,
+      default: () => '100%'
+    }
+  },
+  data() {
+    return {
+      requireTips,
+      priorityColors
+    }
+  },
+  methods: {
+    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')
+    },
+    //
+    setContent(label) {
+      const item = this.requireTips.filter(elm => elm.label === label)[0]
+      if (item) {
+        return item.tips
+      }
+      return ''
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+.bug_tableHeader {
+  padding: 0 20px;
+}
+
+.div_priority {
+  color: #ffffff;
+  padding: 0 12px;
+  border-radius: 4px;
+  margin-left: 4px;
+
+  display: inline-block;
+  text-align: center;
+  line-height: 24px;
+  font-size: 14px;
+  margin-right: 30px;
+}
+
+.drawer-name:hover {
+  color: #409eff;
+  cursor: pointer;
+
+}
+
+.wrap {
+
+  table-layout: fixed;
+  word-wrap: break-all;
+
+  word-break: normal;
+
+  overflow: hidden;
+
+}
+
+.drawer-id {
+  color: rgb(167, 174, 188);
+  font-size: 10px;
+}
+
+/*tips*/
+/deep/ .cycleStatistic-tips {
+  width: 500px;
+  background: rgba(121, 132, 150, 0.8);
+  color: #FFF;
+}
+</style>

src/views/dataBigManage/components/drawerModal/components/tableData.js

@@ -0,0 +1,60 @@
+export const requireTips = [
+  {
+    label: '产品技术侧总周期',
+    key: '',
+    tips: '需求从BRD评审通过到交付的总周期。计算条件：仅计算需求计划里 BRD评审通过时间不为空，且需求状态已变更为“已排期”且排期不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算）'
+  },
+  {
+    label: '产品侧总周期',
+    key: '',
+    tips: '需求从BRD评审通过到技术准入的总周期。计算条件：仅计算需求计划里BRD评审通过时间和技术准入时间均不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算、没有技术准入状态的业务线按PRD评审通过时间计算）'
+  },
+  {
+    label: '技术侧总周期',
+    key: '',
+    tips: '需求从技术准入到交付的总周期。计算条件：仅计算需求计划里技术准入时间不为空，且需求状态已变更为“已排期”且需求排期不为空的需求。（没有技术准入状态的业务线按PRD评审通过时间计算）'
+  },
+  {
+    label: '研发交付周期',
+    key: '',
+    tips: '需求排期里开发、联调、上线类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'
+  },
+  {
+    label: '研发周期',
+    key: '',
+    tips: '需求排期里开发、联调类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'
+  },
+  {
+    label: '研发交付周期',
+    key: '',
+    tips: '需求排期里开发、联调、上线类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'
+  },
+  {
+    label: '研发周期',
+    key: '',
+    tips: '需求排期里开发、联调类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'
+  },
+  {
+    label: '测试周期',
+    key: '',
+    tips: '需求排期里测试类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'
+  }
+]
+export const taskTips = [
+  {
+    label: '研发交付周期',
+    key: '',
+    tips: '任务排期里开发、联调、上线类型排期的总周期。计算条件：仅计算任务状态已变更为“已排期”且任务排期不为空的任务。'
+  },
+  {
+    label: '测试周期',
+    key: '',
+    tips: '任务排期里测试类型排期的总周期。计算条件：仅计算状态已变更为“已排期”且排期不为空的任务。'
+  },
+  {
+    label: '提测等待测试时长',
+    key: '',
+    tips: '任务排期里提测排期结束日期距离测试排期开始日期的天数。计算条件：仅计算任务状态已变更为“已排期”且排期不为空，且提测、测试类型排期不为空的任务。'
+  }
+]
+export const priorityColors = ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']

src/views/dataBigManage/components/drawerModal/components/timeline.vue

@@ -0,0 +1,114 @@
+<template>
+  <div :class="[!bgmargin ? 'qz-timeline-bg' : 'qz-timeline-bgOne']">
+    <div class="qz-timeline-layout">
+      <div v-for="(item, index) in list" ref="ss" :key="'item' + index">
+        <div class="qz-timeline-name" :class="[index === key ? 'qz-time-color1' : 'qz-time-color']">{{ item }}</div>
+        <span class="circular" :class="[index === key ? 'qz-time-code1' : 'qz-time-code']" @click="qz_click_code({value: index, name: item})" />
+        <div class="qz-timeline-divider" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: { type: Array, required: true },
+    num: { type: Number, default: 0 },
+    bgmargin: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      list: [],
+      key: this.num
+    }
+  },
+  watch: {
+    data: {
+      handler(newV) {
+        if (!newV) return
+        this.list = newV
+      },
+      deep: true,
+      immediate: true
+    },
+    num: {
+      handler(newV) {
+        this.key = newV
+        document.getElementById('index').scrollLeft += 500
+        // this.$refs.ss.scrollLeft = 300
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 初始化
+    timeline_init() {
+      this.list = this.list.map(item => ({
+        ...item,
+        show: false
+      }))
+    },
+    // 点击节点
+    qz_click_code(val) {
+      this.key = val.value
+      this.$emit('update', val)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.qz-timeline-bgOne {
+  min-width: max-content;
+  margin: 0 30px 18px;
+  text-align: center;
+  padding-right: 30px;
+}
+.qz-timeline-bg {
+  min-width: max-content;
+  margin: 29px 30px 30px;
+  text-align: center;
+  padding-right: 30px;
+}
+.qz-timeline-layout {
+  display: flex;
+  justify-content: center;
+}
+.qz-timeline-divider {
+  content: '';
+  min-width: 100px;
+  border: 1px solid #E5E5E5;
+}
+.qz-timeline-name {
+  padding: 0 10px;
+  font-weight: 400;
+  font-size: 12px;
+  color: #444444;
+  position: relative;
+  top: 12px;
+}
+.circular {
+  width: 10px;
+  height: 10px;
+  margin: 0 8px;
+  display: inline-block;
+  border: 1px solid #60AEFF;
+  border-radius: 50%;
+  position: relative;
+  top: 12px;
+  cursor: pointer;
+}
+.qz-time-code {
+  background: #FFF;
+}
+.qz-time-code1 {
+  background: #60AEFF;
+}
+.qz-time-color {
+  color: #444;
+}
+.qz-time-color1 {
+  color: #60AEFF;
+}
+</style>

src/views/dataBigManage/components/drawerModal/drawerModalData.js

@@ -0,0 +1,36 @@
+// 新增缺陷|reopen缺
+export const columns = {
+  bugColumn: [
+    {
+      label: '缺陷等级',
+      key: 'priorityName',
+      minWidth: 90,
+      align: 'left'
+    },
+    {
+      label: '缺陷名称',
+      key: 'bugName',
+      minWidth: 360,
+      align: 'left'
+    },
+    {
+      label: '状态',
+      key: 'bugStatusName',
+      minWidth: 100,
+      align: 'center'
+    }
+  ]
+}
+// 时间轴数据
+export const timelineData = {
+  time: [
+    '24小时内修复',
+    '>24小时修复',
+    '24未修复'
+  ],
+  priorityName: [
+    '全部',
+    'P0&P1',
+    'P1以上'
+  ]
+}

src/views/dataBigManage/components/drawerModal/index.vue

@@ -1,326 +1,252 @@
 <template>
-  <el-drawer v-if="drawer_" :title="Statistics.title" :visible.sync="drawer_" :direction="direction" :modal="false" class="drawer-box" 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 !== '模块分布数据' && Statistics.title !== '需求方向分布图数据' && Statistics.title !== '责任人分布数据' && Statistics.title !== `模块分布图数据` && show === true " :class="[Statistics.towTimeLine ? 'qz-drawer-padding' : 'qz-drawer-padding-s', 'qz-drawer-header']">
-        <div id="index" class="qz-drawer-scll">
-          <timeline :data="list" :num="defaultKey" :bgmargin="bgMargin" @update="getvalue" />
-        </div>
-        <div v-if="Statistics.towTimeLine" id="index1" class="qz-drawer-scll">
-          <timeline :data="Statistics.towTimeLine" :num="defaultKey2" :bgmargin="bgMargin" @update="getvalueTow" />
-        </div>
+  <el-drawer
+    :modal="false"
+    size="50%"
+    class="drawer-box"
+    destroy-on-close
+    :visible.sync="drawer"
+    :before-close="handleClose"
+  >
+    <template slot="title">
+      <div>{{ title }}<span class="sub-title">{{ subTitle }}</span></div>
+    </template>
+    <!-- 时间线 -->
+    <div v-if="openDrawer && isTimeLine(1)" class="qz-drawer-padding qz-drawer-header">
+      <div ref="timeline1" class="qz-drawer-scll">
+        <timeline :data="['P0','P1','P2','P3','P4','P5','P6']" @update="(params)=>timeLineClick(params, 1)" />
+      </div>
+      <div v-if="isTimeLine(2)" ref="timeline2" class="qz-drawer-scll">
+        <timeline :data="['P0','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1','P1']" @update="(params)=>timeLineClick(params, 2)" />
       </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 qz-margin-H"> 模块<span>{{ Statistics.name }}</span>的缺陷</div>
-      <div v-if="Statistics.title === `${Statistics.qz_holiday}的修复时长区间数据`" class="qz-drawer-H qz-margin-H">{{ Statistics.qz_holiday }}修复时间区间为<span>{{ type }}</span>的<span>{{ typeTow }}</span>级缺陷</div>
-      <div v-if="Statistics.title === `状态累积流量图数据`" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>流入到<span>{{ typeTow }}</span>的{{ Statistics.toType }}</div>
-      <div v-if="Statistics.title === `需求方向分布图数据` || Statistics.title === '所属需求方向分布图数据'" class="qz-drawer-H qz-margin-H">需求方向为<span>{{ type }}</span>的{{ Statistics.toType }}</div>
-      <div v-if="Statistics.title === `责任人分布数据`" class="qz-drawer-H qz-margin-H">责任人<span>{{ type }}</span>的缺陷</div>
-      <div v-if="Statistics.title === `趋势图数据`" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>新增的缺陷</div>
-      <div v-if="Statistics.title === `模块分布图数据`" class="qz-drawer-H qz-margin-H">模块为<span>{{ type }}</span>的任务</div>
-      <div v-if="Statistics.title === '新增趋势图数据' && Statistics.toType === '任务' || Statistics.title === '上线趋势图数据' && Statistics.toType === '任务'" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>{{ Statistics.title.substring(0, Statistics.title.length - 5 ) }}的任务</div>
-      <div v-if="Statistics.toType === '需求' && Statistics.title === '新增趋势图数据' || Statistics.title === '上线趋势图数据' && Statistics.toType === '需求' || Statistics.title === 'PRD评审趋势图数据' || Statistics.title === '技术准入趋势图数据'" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>{{ Statistics.title.substring(0, Statistics.title.length - 5 ) }}的需求</div>
-      <qzTable
-        :data="tableData"
-        :title="Statistics.title"
-        :type="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据' || Statistics.title === '分布图数据' ? status : Statistics.toType"
-        :oftype="type"
-        :mintitle="Statistics.title === '周期统计数据' || Statistics.title === '人力统计数据' ? min_title : ''"
-      />
     </div>
+
+    <!-- 表格 -->
+    <dmTable v-if="openDrawer" :table-list="tableList" :total="tableList" :column="column" :table-height="tableHeight" />
+    <!-- 下拉 -->
     <div class="qz-footer-laout">
       <div style="line-height: 60px;">
-        <el-button type="primary" size="mini" @click="exportTable">导 出</el-button>
+<!--        <el-button type="primary" size="mini" @click="exportTable">导 出</el-button>-->
       </div>
       <el-pagination
-        :current-page.sync="currentPage"
-        :page-size="10"
+        :current-page.sync="paging.curIndex"
+        :page-size="paging.pageSize"
         :pager-count="5"
-        layout="total, prev, pager, next, jumper"
-        :total="total"
+        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 { getRequirement, requirementDownload } from '@/api/requirement.js'
-import { taskList, taskDownload } from '@/api/taskIndex'
-import { bugList, bugDownload } from '@/api/defectManage'
-import { getReportList } from '@/api/reportTemplate'
-import timeline from '@/components/timeline'
-import qzTable from './tables'
+import { mapGetters } from 'vuex'
+import { bugList } from '@/api/defectManage'
+import dmTable from './components/table.vue'
+import timeline from './components/timeline'
+import { columns, timelineData } from './drawerModalData'
+
+Object.freeze(timelineData)
 export default {
-  components: { timeline, qzTable },
+  name: 'DrawerModal',
+  components: {
+    dmTable, timeline
+  },
   props: {
-    data: { type: Object, required: true },
-    drawer: { type: Boolean, default: false },
-    status: { type: String, default: '' }
+    // 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: () => {}
+    }
+    // ids: {
+    //   type: Array,
+    //   required: false,
+    //   default: () => [14952, 15453, 15988, 16182, 17445, 17447, 17735, 18062, 18064, 18067, 19255, 19568, 19569, 19570, 19571, 19572, 19574, 19575, 19576, 19577, 19578, 19579, 19587, 19588, 19590, 19593, 19595, 19596, 19597, 19599, 19619, 19642, 19644, 19645, 19652, 19655, 19673, 19674, 19887, 19888, 19931, 19935, 19970, 20048, 20049, 20058, 20071, 20086, 20149, 20181, 20182, 20183, 20184, 20301, 20442, 20755, 20758, 20760, 20765, 20770, 20777, 20778, 20782, 20783, 20789, 20803, 20804, 20805, 20808, 20809, 20810, 20812, 20813, 20814, 20815, 20816, 20817, 20818, 20819, 20820, 20825, 20826, 20831, 20848, 20850, 20851]
+    // }
   },
   data() {
     return {
-      list: [],
-      show: true,
-      responseDownload: '',
-      min_title: '', // 周期统计表头标题
-      bgMargin: false,
-      dataList: [],
-      Statistics: {}, // title
-      direction: 'rtl',
-      defaultKey2: 0,
-      defaultKey: 0,
-      bugList: [],
-      type: '',
-      typeTow: '',
-      towVal: '',
-      oneVal: '',
-      currentPage: 1,
-      total: 0,
-      reportData: {},
+      drawer: false,
+      timelineData,
+      tableList: [],
+      tableHeight: 'auto',
+      column: [],
+      ids: [],
+      label: '',
+      subTitle: '',
       paging: {
-        curIndex: 1, // 分页
-        pageSize: 10 // 分页
-      },
-      tableData: []
-    }
-  },
-  computed: {
-    drawer_: {
-      get() { return this.drawer },
-      set(v) { this.$emit('clone', v) }
+        curIndex: 1,
+        pageTotal: 0,
+        pageSize: 10
+      }
     }
   },
   watch: {
-    data: {
-      handler(newV, oldV) {
-        if (newV) {
-          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
+    openDrawer(value) {
+      if (value) {
+        this.init()
+        this.setTitleHeight()
+        this.setTimeLine()
+        this.setColumn()
+      }
     }
   },
+  computed: {
+    ...mapGetters(['bizId'])
+  },
+  created() {
+    this.drawer = false
+  },
   mounted() {
-    // this.$nextTick(() => {
-    //   const dateId = document.getElementById('index')
-    //   dateId.scrollLeft = Number(this.defaultKey) * 100 - 60
-    // })
+    this.drawer = false
   },
   methods: {
-    setDrawerDate() {
-      this.show = true
-      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || 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.dataList = this.Statistics[this.Statistics.key].idList
-        this.getTableData(this.dataList)
-      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '去除节假日的修复时长数据' || this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' || this.Statistics.title === '平均修复时长数据') {
-        const key = this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' ? this.Statistics.xaxis.indexOf(this.Statistics.label.substr(2)) : this.Statistics.xaxis.indexOf(this.Statistics.label)
-        this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' ? this.min_title = this.Statistics.label.substr(2) : ''
-        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)
-        const statusArr = this.Statistics.statusList[this.Statistics.seriesName]
-        this.dataList = statusArr[this.defaultKey].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.title === `模块分布图数据`) {
-        this.mapChildren(this.Statistics)
-      } 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)
-      } else if (this.Statistics.title === '新增趋势图数据' || this.Statistics.title === '上线趋势图数据' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据') {
-        this.defaultKey = this.Statistics.dataIndex
-        this.defaultKey2 = this.Statistics.seriesIndex
-        this.dataList = this.Statistics.yaxis[0].idList[this.defaultKey]
-        this.getTableData(this.dataList)
-      } else if (this.Statistics.title === '累计新增' || this.Statistics.title === 'PRD评审通过' || this.Statistics.title === '技术准入' || this.Statistics.title === '累计上线' || this.Statistics.title === '累计hold' || this.Statistics.title === '累计修复' || this.Statistics.title === '累计reopen') {
-        this.show = false
-        this.dataList = this.Statistics.idList
-        this.getTableData(this.dataList)
-      }
-      this.$nextTick(() => { // 时间轴定位
-        const dateId = document.getElementById('index')
-        dateId.scrollLeft = Number(this.defaultKey) * 109 - 60
-        if (this.Statistics.towTimeLine) {
-          const dateIds = document.getElementById('index1')
-          dateIds.scrollLeft = Number(this.defaultKey2) * 100 - 60
-        }
-      })
+    init() {
+      this.drawer = this.openDrawer
+      this.title = this.drawerData.label
+      this.ids = this.drawerData.IdList.map(e => e)
+      // this.ids = [14952, 15453, 15988, 16182, 17445, 17447, 17735, 18062, 18064, 18067, 19255, 19568, 19569, 19570, 19571, 19572, 19574, 19575, 19576, 19577, 19578, 19579, 19587, 19588, 19590, 19593, 19595, 19596, 19597, 19599, 19619, 19642, 19644, 19645, 19652, 19655, 19673, 19674, 19887, 19888, 19931, 19935, 19970, 20048, 20049, 20058, 20071, 20086, 20149, 20181, 20182, 20183, 20184, 20301, 20442, 20755, 20758, 20760, 20765, 20770, 20777, 20778, 20782, 20783, 20789, 20803, 20804, 20805, 20808, 20809, 20810, 20812, 20813, 20814, 20815, 20816, 20817, 20818, 20819, 20820, 20825, 20826, 20831, 20848, 20850, 20851]
+      this.getBugStatisticData()
     },
-    getvalue(e) { // 时间轴one
-      this.oneVal = e
-      this.type = e.name
-      this.defaultKey = e.value
-      this.getTimeLine()
+    handleClose() {
+      this.drawer = false
+      this.$emit('update:openDrawer', this.drawer)
     },
-    getvalueTow(e) { // 时间轴tow
-      this.towVal = e
-      this.typeTow = e.name
-      this.defaultKey2 = e.value
-      this.getTimeLine()
+    handleSizeChange(value) {
+      this.paging.pageSize = value
+      this.getBugStatisticData()
     },
-    getTimeLine() { // 数据筛选
-      this.dataList = []
-      this.currentPage = 1
-      this.paging = { curIndex: 1, pageSize: 10 }
-      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === '新增趋势图数据' || this.Statistics.title === '上线趋势图数据' || this.Statistics.title === 'PRD评审趋势图数据' || 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.Statistics.title === '平均修复时长数据') {
-        this.dataList = this.Statistics.yaxis[this.oneVal.value].idList
-      } else if (this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据') {
-        this.min_title = this.type
-        this.dataList = this.Statistics.yaxis[this.defaultKey].idList
-      } else if (this.Statistics.title === '状态累积流量图数据') {
-        const statusArr = this.Statistics.statusList[this.typeTow]
-        this.dataList = statusArr[this.defaultKey].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
-      }
+    handleCurrentChange(value) {
+      console.log(value)
+      this.paging.curIndex = value
+      this.getBugStatisticData()
     },
-    async getTableData(taskIdList) { // 获取需求、任务、缺陷表格数据
-      if (!taskIdList || taskIdList.length <= 0) {
-        this.tableData = []
-        this.total = 0
-        return
-      }
-      const data = { ids: taskIdList, ...this.paging }
-      if (this.Statistics.title === '周期统计数据') { data.statisticsType = 1 }
-      if (this.Statistics.title === '人力统计数据') { data.statisticsType = 2 }
-      if (this.Statistics.title === '需求方向分布图数据' || this.Statistics.title === '所属需求方向分布图数据' || this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据' || this.Statistics.title === '累计新增' && this.Statistics.toType === '需求' || this.Statistics.title === 'PRD评审通过' && this.Statistics.toType === '需求' || this.Statistics.title === '技术准入' && this.Statistics.toType === '需求' || this.Statistics.title === '累计上线' && this.Statistics.toType === '需求' || this.Statistics.title === '累计hold' && 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 === '任务' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === `模块分布图数据` || this.Statistics.title === '累计新增' && this.Statistics.toType === '任务' || this.Statistics.title === '技术准入' && this.Statistics.toType === '任务' || this.Statistics.title === '累计上线' && this.Statistics.toType === '任务' || this.Statistics.title === '累计hold' && 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.title === `${this.Statistics.qz_holiday}的修复时长区间数据` || this.Statistics.title === '平均修复时长数据' || this.Statistics.title === '趋势图数据' || this.Statistics.title === '累计修复' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计reopen' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计新增' && this.Statistics.toType === '缺陷') {
-        const res = await bugList(data)
-        if (res.code === 200) {
-          this.tableData = res.data
-          this.total = res.total
-        }
+    // 导出
+    exportTable() {
+    },
+    // 设置表格头
+    setColumn() {
+      if (this.title.search(/新增缺陷|reopen缺陷|缺陷24小时修复率/) > -1) {
+        this.column = columns.bugColumn.map(e => e)
       }
     },
-    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
+    // 时间轴点击事件
+    timeLineClick({ value, name }, index) {
+      this.pagingInit()
+      if (index === 1) {
+        console.log(value, name, '第一条')
+      }
+      if (index === 2) {
+        console.log(value, name, '第二条')
       }
     },
-    handleSizeChange(val) {
-      this.paging.pageSize = val
-      this.Statistics.title === '报告统计数据' ? this.getIdList(this.reportData) : this.getTableData(this.dataList)
+    // 累计新增缺陷
+    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
+      })
+      this.tableList = res.data
+      this.paging.pageTotal = res.total
+      this.paging = { ...paging }
     },
-    handleCurrentChange(val) {
-      this.paging.curIndex = val
-      this.Statistics.title === '报告统计数据' ? this.getIdList(this.reportData) : this.getTableData(this.dataList)
+    // 分页数据初始化
+    pagingInit() {
+      this.paging = {
+        curIndex: 1,
+        pageTotal: 0,
+        pageSize: 5
+      }
     },
-    mapChildren(item) {
-      if (this.Statistics.name === '需求方向分布' || this.Statistics.name === '模块分布') {
-        this.dataList = []
-        item.children.map(i => {
-          this.dataList = this.dataList.concat(i.idList)
-        })
-        this.getTableData(this.dataList)
-        return
+    // 设置表格高度
+    setTitleHeight() {
+      console.log(this.title)
+      if (this.title.search(/状态停留分布图数据|状态累积流量图数据/) > -1) {
+        this.tableHeight = 'calc(100vh - 363px)'
+      } else if (this.title.search(/需求方向分布图数据|模块分布图数据/) > -1) {
+        this.tableHeight = 'calc(100vh - 200px)'
+      } else if (this.title.search(/累计新增|PRD评审通过|技术准入|累计上线|累计hold|累计修复|累计reopen/) > -1) {
+        this.tableHeight = 'calc(100vh - 134px)'
+      } else if (this.title === '模块分布数据') {
+        this.tableHeight = 'calc(100vh - 175px)'
+      } else if (this.title === '缺陷24小时修复率') {
+        this.tableHeight = 'calc(100vh - 416px)'
+      } else if (this.title === '新增缺陷') {
+        this.tableHeight = 'calc(100vh - 136px)'
+      } else {
+        this.tableHeight = 'calc(100vh - 318px)'
+        // this.tableHeight = 'calc(100vh - 10px)'
       }
-      item.children.map(i => {
-        if (i.name === this.Statistics.name) {
-          this.dataList = i.idList
-          this.getTableData(this.dataList)
-        } else {
-          if (i.children) {
-            this.mapChildren(i)
-          }
+    },
+    // 设置表头
+
+    // 设置时间轴自动滚动
+    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
         }
       })
     },
-    async exportTable() {
-      const data = { ids: this.dataList }
-      if (this.Statistics.title === '需求方向分布图数据' || this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '所属需求方向分布图数据' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据' || this.Statistics.title === '累计新增' && this.Statistics.toType === '需求' || this.Statistics.title === '技术准入' && this.Statistics.toType === '需求' || this.Statistics.title === '累计上线' && this.Statistics.toType === '需求' || this.Statistics.title === '累计hold' && this.Statistics.toType === '需求') {
-        this.responseDownload = await requirementDownload(data)
-      } else if (this.Statistics.title === '任务分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === `模块分布图数据` || this.Statistics.title === '累计新增' && this.Statistics.toType === '任务' || this.Statistics.title === '技术准入' && this.Statistics.toType === '任务' || this.Statistics.title === '累计上线' && this.Statistics.toType === '任务' || this.Statistics.title === '累计hold' && this.Statistics.toType === '任务') {
-        this.responseDownload = await taskDownload(data)
-      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === `责任人分布数据` || this.Statistics.title === '去除节假日的修复时长数据' || this.Statistics.title === '模块分布数据' || this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据` || this.Statistics.title === '平均修复时长数据' || this.Statistics.title === '趋势图数据' || this.Statistics.title === '累计修复' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计reopen' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计新增' && this.Statistics.toType === '缺陷') {
-        this.responseDownload = await bugDownload(data)
+    // 设置时间轴自动滚动
+    isTimeLine(index = 1) {
+      // 是第一条
+      if (index === 1) {
+        return this.title.search(/缺陷24小时修复率/) > -1
+      }
+      // 是第二条
+      if (index === 2) {
+        return this.title.search(/缺陷24小时修复率/) > -1
       }
-      const aLink = document.createElement('a')
-      const blob = new Blob([this.responseDownload], { type: 'application/vnd.ms-excel' })
-      aLink.href = URL.createObjectURL(blob)
-      aLink.download = this.Statistics.title + '.xlsx'
-      aLink.style.display = 'none'
-      aLink.click()
-    },
-    handleClose(done) { // 关闭
-      this.$emit('clone')
     }
   }
 }
 </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;
 
-<style lang="less" scoped>
+  .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);
+}
+/* S 时间轴 */
 .qz-drawer-header {
   text-align: center;
   background: #F7F7F7;
@@ -344,71 +270,19 @@ export default {
   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;
-}
-/deep/ :focus{outline:0;}
-/deep/.el-table::before {
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 0px;
-}
-/deep/.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;
-}
-/deep/.el-drawer__container {
-    left: 0;
-    right: 0;
-    width: 50%;
-}
-/deep/.el-table td, .el-table th {
-    padding: 5px 0;
+.qz-drawer-scll {
+  overflow-x: scroll;
 }
-.qz-margin-H {
-  margin: 20px 30px 10px;
+.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
+.qz-drawer-H {
+  font-size: 16px;
+  margin: 0 30px;
+  color: #444444;
 }
+/* E 时间轴 */
 .qz-footer-laout {
   display: flex;
   justify-content: space-between;
   margin: 0 30px;
 }
 </style>
-<style>
-.el-drawer__open .el-drawer.rtl {
-    -webkit-animation: none;
-    animation: none;
-}
-</style>

src/views/dataBigManage/components/drawerModal/tables/index.vue

@@ -1,244 +0,0 @@
-<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 === 'PRD评审通过' && 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 === '所属需求方向分布图数据' || title === '需求分布图数据' && type === '跟版客户端' || type === 'pm' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' && type === '需求' || title === '人力统计数据' && type === '需求' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据' || title === 'PRD评审通过' && type === '需求' || 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 === '任务状态' || 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 === '所属需求方向分布图数据' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' && type === '需求' || title === '人力统计数据' && type === '需求' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据' || title === 'PRD评审通过' && type === '需求' || 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 === '累计新增' && 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.less'
-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 === 'PRD评审通过' || 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="less" 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>

src/views/dataBigManage/index.vue

@@ -33,8 +33,13 @@
         @checkDetialModal="checkDetialModal"
       />
     </div>
-    <div @click.stop>
-      <!-- <drawer-modal v-if="openDrawer" :drawer="openDrawer" :data="requireList" :status="reqStatus" @clone="clone" /> -->
+    <div>
+<!--      <drawer-modal v-if="openDrawer" :drawer="openDrawer" :data="requireList" />-->
+<!--      <el-button @click="openDrawer = true">触发</el-button>-->
+      <drawer-modal
+        :open-drawer.sync="openDrawer"
+        :drawer-data="requireList"
+      />
     </div>
   </div>
 </template>
@@ -62,22 +67,22 @@ import headTitle from '@/components/headTitle'
 import throughputModule from './components/throughputModule/index.vue'
 import qualityModule from './components/qualityModule/index.vue'
 import efficiencyModule from './components/efficiencyModule/index.vue'
-// import drawerModal from './components/drawerModal/index.vue'
+import drawerModal from './components/drawerModal/index.vue'
 export default {
   components: {
     searchHeader,
     headTitle,
     throughputModule,
     qualityModule,
-    efficiencyModule
-    // drawerModal
+    efficiencyModule,
+    drawerModal
   },
   data() {
     return {
       // enum
       listSearch: listSearchData,
       showMore: false,
-      openDrawer: true,
+      openDrawer: false,
       requireList: {},
       reqStatus: '缺陷状态',
       params: {
@@ -136,6 +141,8 @@ export default {
     // 弹窗数据
     checkDetialModal(data) {
       console.log(data)
+      this.openDrawer = true
+      this.requireList = { ...data }
     },
     moreReset(data) {
       this.renderList.adv.map(t => t.map(g => {