优化

src/components/timeline/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="qz-timeline-bg">
+    <div class="qz-timeline-layout">
+      <div v-for="item in list" :key="item.value">
+        <div>{{ item.name }}</div>
+        <span class="circular" :class="[item.show ? 'qz-time-code1' : 'qz-time-code']" @click="qz_click_code(item)" />
+        <div class="qz-timeline-divider" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [{ value: 1, name: '全部' }, { value: 1, name: 'P0' }, { value: 2, name: 'P1' }, { value: 3, name: 'P2' }, { value: 4, name: 'P3' }],
+      codeColor: false
+    }
+  },
+  created() {
+    this.timeline_init()
+  },
+  methods: {
+    // 初始化
+    timeline_init() {
+      this.list = this.list.map(item => ({
+        ...item,
+        show: false
+      }))
+      console.log(this.list)
+    },
+    // 点击节点
+    qz_click_code(val) {
+      val.show = !val.show
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qz-timeline-bg {
+  width: 100%;
+  margin: 30px;
+  text-align: center;
+}
+.qz-timeline-layout {
+  display: flex;
+  justify-content: center;
+}
+.qz-timeline-divider {
+  content: '';
+  min-width: 100px;
+  border: 1px solid #eee;
+}
+.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;
+}
+</style>

src/views/quality/components/bugList.vue

@@ -2,9 +2,9 @@
   <section>
     <div class="repair-list">
       <div v-for="(item, index) in chartData.bugCount" :key="'time'+index" class="repair-item">
-        <div :class="{'item-detail': index === 0}">
+        <div :class="{'item-detail': index === 0}" @click.stop>
           <span>{{ item.label }}</span>
-          <div class="repair-time">{{ item.countStr }}<span> 个</span></div>
+          <div class="repair-time repair-hover" @click="openDrawer(item)">{{ item.countStr }}<span> 个</span></div>
           <div v-show="Number(item.chainRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.chainRatio }}%</span></div>
           <div v-show="Number(item.chainRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.chainRatio.substring(1,item.chainRatio.length) }}%</span></div>
           <div v-show="item.chainRatio === '--'" class="repair-up">环比：<span>{{ item.chainRatio }}%</span></div>
@@ -44,6 +44,11 @@ export default {
       required: false
     }
   },
+  data() {
+    return {
+      requireList: {}
+    }
+  },
   watch: {
     chartData: {
       handler(newV) {
@@ -52,6 +57,12 @@ export default {
       immediate: true,
       deep: true
     }
+  },
+  methods: {
+    openDrawer(val) {
+      this.requireList = { ...val }
+      this.$emit('requireBug', this.requireList)
+    }
   }
 }
 </script>
@@ -94,4 +105,8 @@ export default {
     color:#9FFF39
   }
 }
+.repair-hover {
+  cursor: pointer;
+  color: #409eff;
+}
 </style>

src/views/quality/components/drawerAll.vue

@@ -0,0 +1,198 @@
+<template>
+  <el-drawer :title="Statistics.title" :visible.sync="drawer_" :direction="direction" :modal="false" :class="{'drawer-box': showClass}" size="100%" :before-close="handleClose">
+    <div style="height: calc(100vh - 200px); overflow: scroll; overflow-x: hidden;">
+      <div style="text-align: center;">
+        <timeline />
+        <div>dcjns</div>
+      </div>
+
+      <!-- <el-table :data="tableData" style="width: 100%;" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }" class="integration-num">
+        <el-table-column label="优先级" min-width="100">
+          <template slot-scope="scope">
+            <div class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ 'P'+scope.row.priority }}</div>
+          </template>
+        </el-table-column>
+      </el-table> -->
+    </div>
+    <!-- <el-pagination
+      style="text-align: center;"
+      :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 { EncryptId } from '@/utils/crypto-js.js'
+// import { getRequirement } from '@/api/requirement.js'
+// import { taskList } from '@/api/taskIndex'
+// import { bugList, bugGetEnum } from '@/api/defectManage'
+import timeline from '@/components/timeline'
+export default {
+  components: {
+    timeline
+  },
+  // filters: {
+  //   ellipsis(value) {
+  //     if (!value) return ''
+  //     if (value.length > 15) {
+  //       return value.slice(0, 15) + '...'
+  //     }
+  //     return value
+  //   }
+  // },
+  props: {
+    data: { type: Object, required: true },
+    drawer: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
+      Statistics: {}, // title
+      direction: 'rtl',
+      showClass: false,
+      bugList: [],
+      // currentPage: 1,
+      // total: 0,
+      // paging: {
+      //   curIndex: 1, // 分页
+      //   pageSize: 10 // 分页
+      // },
+      tableData: []
+    }
+  },
+  computed: {
+    drawer_: {
+      get() { return this.drawer },
+      set(v) {
+        this.$emit('clone', v)
+      }
+    }
+  },
+  watch: {
+    data: {
+      handler(newV, oldV) {
+        this.Statistics = newV
+        this.currentPage = 1
+        // this.paging = {
+        //   curIndex: 1, // 分页
+        //   pageSize: 10 // 分页
+        // }
+        // this.getTableData()
+      },
+      immediate: true
+    }
+  },
+  // created() {
+  //   this.bugGetEnum()
+  // },
+  methods: {
+    async getTableData() {
+      // if (this.Statistics.idList !== undefined && this.Statistics.idList.length > 0) {
+      //   this.paging.ids = this.Statistics.idList
+      //   if (this.Statistics.typeStr === '需求') {
+      //     const res = await getRequirement(this.paging)
+      //     if (res.code === 200) {
+      //       this.tableData = res.data.list
+      //       this.total = res.data.total
+      //     }
+      //   } else if (this.Statistics.typeStr === '任务') {
+      //     const res = await taskList(this.paging)
+      //     if (res.code === 200) {
+      //       this.tableData = res.data
+      //       this.total = res.total
+      //     }
+      //   } else if (this.Statistics.typeStr === '缺陷') {
+      //     const res = await bugList(this.paging)
+      //     if (res.code === 200) {
+      //       this.tableData = res.data
+      //       this.total = res.total
+      //     }
+      //   }
+      // } else {
+      //   this.tableData = []
+      // }
+    },
+    // jumper(val) {
+    //   const bizId_id = EncryptId(`${val.bizId}_${val.id}`)
+    //   const newTab = this.$router.resolve({ name: this.Statistics.typeStr + '详情', query: { bizId_id: bizId_id }})
+    //   window.open(newTab.href, '_blank')
+    // },
+    // async bugGetEnum() {
+    //   const res = await bugGetEnum()
+    //   if (res.code === 200) {
+    //     this.bugList = res.data.bugEnumList
+    //     this.showClass = true
+    //   }
+    // },
+    // handleSizeChange(val) {
+    //   this.paging.pageSize = val
+    //   this.getTableData()
+    // },
+    // handleCurrentChange(val) {
+    //   this.paging.curIndex = val
+    //   this.getTableData()
+    // },
+    handleClose(done) {
+      this.$emit('clone')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+>>> :focus{outline:0;}
+.integration-num {
+  margin: 20px;
+}
+
+.drawer-name:hover {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.div_priority {
+  color: #ffffff;
+  width:fit-content;
+  padding: 0 12px;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+.drawer-id {
+  color: rgb(167, 174, 188);
+  font-size: 10px;
+}
+>>>.el-drawer__header {
+    color: #444;
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 0px;
+    padding: 20px 30px 0;
+}
+.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;
+    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+}
+>>>.el-drawer__container {
+    left: 0;
+    right: 0;
+    width: 50%;
+}
+>>>.el-table td, .el-table th {
+    padding: 5px 0;
+}
+</style>

src/views/quality/components/requireDrawer.vue

@@ -1,6 +1,5 @@
 <template>
   <el-drawer :title="Statistics.label" :visible.sync="drawer_" :direction="direction" :modal="false" :class="{'drawer-box': showClass}" size="100%" :before-close="handleClose">
-    <!-- <div class="_font">{{ Statistics.total }}</div> -->
     <div style="height: calc(100vh - 200px); overflow: scroll; overflow-x: hidden;">
       <el-table :data="tableData" style="width: 100%;" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }" class="integration-num">
         <el-table-column label="优先级" min-width="100">

src/views/quality/requireStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="drawer = false">
+  <div @click="openDrawer = false, drawer = false">
     <el-container class="defect-container">
       <el-header class="defect-main" style="height: auto;">
         <el-form :model="chartForm" class="demo-form-inline" :inline="true">
@@ -179,11 +179,12 @@
         </div>
         <div class="chart-item">
           <h3>缺陷统计</h3>
-          <bug-list :chart-data="bugListData" />
+          <bug-list :chart-data="bugListData" @requireBug="queryData" />
         </div>
       </el-main>
       <div @click.stop>
         <require-drawer v-if="drawer" :drawer="drawer" :data="requireList" @clone="clone" />
+        <drawer-all v-if="openDrawer" :drawer="openDrawer" :data="requireList" @clone="clone" />
       </div>
     </el-container>
   </div>
@@ -210,6 +211,7 @@ import {
   getManpowerDistributedData
 } from '@/api/statisticsApi/requireStatistics'
 import requireDrawer from './components/requireDrawer'
+import drawerAll from './components/drawerAll'
 import statusChart from './components/statusChart'
 import tendencyChart from './components/tendencyChart'
 import cycleStatistic from './components/cycleStatistic'
@@ -230,11 +232,13 @@ export default {
     belongChart,
     changeRequireChart,
     bugList,
-    requireDrawer
+    requireDrawer,
+    drawerAll
   },
   data() {
     return {
       drawer: false,
+      openDrawer: false,
       requireList: {},
       bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
       timeTypeList: [ // 日期选择
@@ -545,6 +549,12 @@ export default {
       value.typeStr = '需求'
       this.requireList = value
     },
+    queryData(value) { // 需求bug 浮层数据
+      console.log(value)
+      value.title = '缺陷统计数据'
+      this.requireList = value
+      this.openDrawer = true
+    },
     clone(v) {
       this.drawer = v
     }