数据大盘：半浮层改造(0.3)

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

@@ -0,0 +1,114 @@
+<template>
+  <div :class="[!bgMargin ? 'timeline-bg' : 'timeline-bgOne']">
+    <div class="timeline-layout">
+      <div v-for="(item, index) in list" ref="ss" :key="'item' + index">
+        <div class="timeline-name" :class="[index === key ? 'time-color1' : 'time-color']">{{ item }}</div>
+        <span class="circular" :class="[index === key ? 'time-code1' : 'time-code']" @click="click_code({value: index, name: item})" />
+        <div class="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
+      }))
+    },
+    // 点击节点
+    click_code(val) {
+      this.key = val.value
+      this.$emit('update', val)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.timeline-bgOne {
+  min-width: max-content;
+  margin: 0 30px 18px;
+  text-align: center;
+  padding-right: 30px;
+}
+.timeline-bg {
+  min-width: max-content;
+  margin: 29px 30px 30px;
+  text-align: center;
+  padding-right: 30px;
+}
+.timeline-layout {
+  display: flex;
+  justify-content: center;
+}
+.timeline-divider {
+  content: '';
+  min-width: 100px;
+  border: 1px solid #E5E5E5;
+}
+.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;
+}
+.time-code {
+  background: #FFF;
+}
+.time-code1 {
+  background: #60AEFF;
+}
+.time-color {
+  color: #444;
+}
+.time-color1 {
+  color: #60AEFF;
+}
+</style>

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

@@ -465,6 +465,10 @@ export const timelineList = {
     '>24小时修复',
     '24未修复'
   ],
+  // 新增缺陷
+  newDefect: [
+    '全部', 'P0', 'p1', 'p2', 'p3'
+  ],
   // 需求数据
   requirementData: [
     '新增需求',

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

@@ -17,11 +17,11 @@
     <!-- 时间线 -->
     <div
       v-if="openDrawer && isTimeLine(1)"
-      class="qz-drawer-padding qz-drawer-header"
+      class="drawer-padding drawer-header"
       :style="{paddingTop: !isTimeLine(2) ? '30px':'20px'}"
       @click.stop
     >
-      <div id="index" ref="timeline1" class="qz-drawer-scll">
+      <div id="index" ref="timeline1" class="drawer-scll">
         <timeline
           :num="timelineData.firstActive"
           bg-margin
@@ -29,7 +29,7 @@
           @update="(params) => timeLineClick(params, 1)"
         />
       </div>
-      <div v-if="isTimeLine(2)" ref="timeline2" class="qz-drawer-scll">
+      <div v-if="isTimeLine(2)" ref="timeline2" class="drawer-scll">
         <timeline
           :num="timelineData.secondActive"
           :data="timelineData.second"
@@ -85,7 +85,7 @@
       </template>
     </dmTable>
     <!-- 下拉 -->
-    <div class="qz-footer-laout" @click.stop>
+    <div class="footer-laout" @click.stop>
       <div style="line-height: 60px;">
 <!--        <el-button type="primary" size="mini" @click="exportTable">导 出</el-button>-->
       </div>
@@ -108,7 +108,8 @@ import { bugList } from '@/api/defectManage'
 import _ from 'lodash'
 import { getReportList } from '@/api/reportTemplate'
 import dmTable from '@/components/baseTable/table'
-import timeline from '@/components/timeline/index'
+// import timeline from '@/components/timeline/index'
+import timeline from './components/timeline'
 import { columns, timelineList } from './drawerModalData'
 import { EncryptId } from '@/utils/crypto-js'
 import Clickoutside from 'element-ui/src/utils/clickoutside'
@@ -171,6 +172,9 @@ export default {
       drawerBox: '',
       subTitle: '',
       sourceData: null,
+      /* S 新增缺陷*/
+      priorityList: [],
+      /* E 新增缺陷*/
       timelineData: {
         first: [],
         firstActive: 0,
@@ -207,6 +211,7 @@ export default {
       console.log(slotProp)
     },
     init() {
+      console.log(this.drawerData, 210)
       this.headerTitle = this.drawerData.headerTitle
       this.title = this.headerTitle.search(/质量|效率/) > -1 ? this.drawerData.label || '' : this.drawerData.activeLabel
       if (this.headerTitle && this.title) {
@@ -297,7 +302,12 @@ export default {
     // 设置时间轴
     setTimeLineData() {
       let { firstActive, first, secondActive, second } = this.timelineData
-      if (this.title.search(/新增问题|新增缺陷|reopen|提测报告|准出记录/) < 0) {
+      if (this.title.search(/新增问题|reopen|提测报告|准出记录/) < 0) {
+        if (this.headerTitle === '质量') {
+          if (this.title.search(/新增缺陷|reopen/) > -1) {
+            first = [...timelineList.newDefect]
+          }
+        }
         if (this.headerTitle === '吞吐量') {
           secondActive = 0
           firstActive = 0
@@ -447,6 +457,12 @@ export default {
       this.pagingInit()
       this.ids = []
       if (index === 1) {
+        if (this.headerTitle === '质量') {
+          if (this.title.search(/新增缺陷|reopen/) > -1) {
+            this.ids = this.drawerData.IdList.map(e => e)
+            this.priorityList = value ? [value - 1] : []
+          }
+        }
         if (this.headerTitle === '吞吐量') {
           this.timelineData.firstActive = value || 0
           if (this.sourceData[value || 0] && this.sourceData[value || 0].idList) {
@@ -474,11 +490,12 @@ export default {
     },
     // 设置列表数据
     setTableList() {
-      // console.log(439)
       this.tableList = []
       if (this.headerTitle === '质量') {
         if (this.title.search(/新增缺陷|reopen/) > -1) {
+          // console.log(this.ids, 502)
           if (this.ids.length) {
+            // console.log(504)
             this.loading = true
             this.getBugStatisticData()
           }
@@ -540,13 +557,13 @@ export default {
         if (this.title === '缺陷修复时长') {
           if (this.sourceData[0].IdList.length) {
             this.loading = true
-            this.setbugRepair2Data()
+            this.setBugRepair2Data()
           }
         }
         if (this.title === '缺陷24小时修复率') {
           if (this.sourceData[0].IdList.length) {
             this.loading = true
-            this.setbugRepairData()
+            this.setBugRepairData()
           }
         }
         if (this.title === '延期提测率') {
@@ -639,6 +656,7 @@ export default {
       const res = await bugList({
         ids: this.ids,
         curIndex: this.paging.curIndex,
+        priorityList: this.priorityList,
         pageSize: this.paging.pageSize
       })
       if (res.code === 200) {
@@ -826,7 +844,7 @@ export default {
     setTitleHeight() {
       if (this.title.search(/状态停留分布图数据|状态累积流量图数据/) > -1) {
         this.tableHeight = 'calc(100vh - 363px)'
-      } else if (this.title.search(/需求周期|新增项目|新增任务|需求人力|任务周期|缺陷修复时长|延期准出率|延期提测率/) > -1) {
+      } else if (this.title.search(/需求周期|新增项目|新增任务|reopen|新增缺陷|需求人力|任务周期|缺陷修复时长|延期准出率|延期提测率/) > -1) {
         this.tableHeight = 'calc(100vh - 288px)'
       } else if (this.title.search(/需求|任务|项目/) > -1) {
         // 吞吐量： 需求
@@ -836,7 +854,7 @@ export default {
       } else {
         this.tableHeight = 'calc(100vh - 136px)'
       }
-      if (this.headerTitle === '质量') {
+      if (this.headerTitle === '质量' && this.title.search(/新增缺陷|reopen/) < 0) {
         this.tableHeight = 'calc(100vh - 136px)'
       }
       if (this.headerTitle === '吞吐量') {
@@ -909,6 +927,9 @@ export default {
     isTimeLine(index = 1) {
       // 是第一条
       if (index === 1) {
+        if (this.headerTitle.search(/质量/) > -1 && this.title.search(/新增缺陷|reopen/) > -1) {
+          return true
+        }
         return this.headerTitle.search(/吞吐量|效率/) > -1
       }
       // 是第二条
@@ -961,7 +982,7 @@ export default {
   width: 50%;
 }
 /* S 时间轴 */
-.qz-drawer-header {
+.drawer-header {
   text-align: center;
   background: #F7F7F7;
   border-radius: 4px;
@@ -969,26 +990,26 @@ export default {
   margin: 20px 30px;
   overflow: hidden;
 }
-.qz-drawer-padding {
+.drawer-padding {
   padding: 20px 0;
 }
-.qz-drawer-padding-s {
+.drawer-padding-s {
   padding: 1px 0;
 }
-.qz-drawer-scll {
+.drawer-scll {
   overflow-x: scroll;
 }
-.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
-.qz-drawer-H {
+.drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
+.drawer-H {
   font-size: 16px;
   margin: 0 30px;
   color: #444444;
 }
-.qz-drawer-scll {
+.drawer-scll {
   overflow-x: scroll;
 }
-.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
-.qz-drawer-H {
+.drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
+.drawer-H {
   font-size: 16px;
   margin: 0 30px;
   color: #444444;
@@ -1026,10 +1047,15 @@ export default {
   border-color: #b7eb8f;
 }
 /* E 质量：线上问题_改进方案 */
-.qz-footer-laout {
+.footer-laout {
   display: flex;
   justify-content: space-between;
   margin: 0 30px;
+  //width: 100%;
+  //padding: 0 30px;
+  //.el-pagination{
+  //  width: 100%;
+  //}
 }
 .drawer-name:hover {
   color: #409eff;