优化

src/components/table/index.vue

@@ -1,123 +0,0 @@
-<template>
-  <el-table
-    ref="table"
-    :data="tableList"
-    stripe
-    fit
-    highlight-current-row
-    :height="inTableHeight"
-    @selection-change="selectionChange"
-    @row-click="rowClick"
-  >
-    <template v-for="(itm, idx) in header">
-      <!-- 特殊处理列 -->
-      <el-table-column
-        v-if="itm.render"
-        :key="idx"
-        :prop="itm.prop ? itm.prop : null"
-        :label="itm.label ? itm.label : null"
-        :width="itm.width ? itm.width : null"
-        :sortable="itm.sortable ? itm.sortable : false"
-        :align="itm.align ? itm.align : 'center'"
-        :fixed="itm.fixed ? itm.fixed : null"
-        :show-overflow-tooltip="itm.tooltip"
-        min-width="50"
-      >
-        <template slot-scope="scope">
-          <ex-slot
-            :render="itm.render"
-            :row="scope.row"
-            :index="scope.$index"
-            :column="itm"
-          />
-        </template>
-      </el-table-column>
-      <!-- 正常列 -->
-      <el-table-column
-        v-else
-        :key="idx"
-        :prop="itm.prop ? itm.prop : null"
-        :label="itm.label ? itm.label : null"
-        :width="itm.width ? itm.width : null"
-        :sortable="itm.sortable ? itm.sortable : false"
-        :align="itm.align ? itm.align : 'center'"
-        :fixed="itm.fixed ? itm.fixed : null"
-        :formatter="itm.formatter"
-        :show-overflow-tooltip="itm.tooltip"
-        min-width="50"
-      />
-    </template>
-  </el-table>
-</template>
-
-<script>
-// 自定义内容的组件
-var exSlot = {
-  functional: true,
-  props: {
-    row: Object,
-    render: Function,
-    index: Number,
-    column: {
-      type: Object,
-      default: null
-    }
-  },
-  render: (h, context) => {
-    const params = {
-      row: context.props.row,
-      index: context.props.index
-    }
-    if (context.props.column) params.column = context.props.column
-    return context.props.render(h, params)
-  }
-}
-
-export default {
-  components: { exSlot },
-  props: {
-    tableList: {
-      type: Array,
-      default: () => []
-    },
-    header: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: [Number, String, Function],
-      default: () => null
-    }
-  },
-  data() {
-    return {
-      inTableHeight: null
-    }
-  },
-  created() {
-    // 该阶段可以接收父组件的传递参数
-    this.inTableHeight = this.height
-  },
-  destroyed() {
-    // 高度自适应事件注销
-    window.onresize = null
-  },
-  methods: {
-    /**
-     * 选择框选择后更改,事件分发
-     */
-    selectionChange(selection) {
-      this.$emit('selection-change', selection)
-    },
-    /**
-     * 点击事件
-     */
-    rowClick(row, column, event) {
-      this.$emit('row-click', row, column, event)
-    }
-  }
-}
-</script>
-<style>
-
-</style>

src/components/timeline/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="qz-timeline-bg">
+  <div :class="[!bgmargin ? 'qz-timeline-bg' : 'qz-timeline-bgOne']">
     <div class="qz-timeline-layout">
       <div v-for="(item, index) in list" :key="index">
         <div class="qz-timeline-name" :class="[index === key ? 'qz-time-color1' : 'qz-time-color']">{{ item }}</div>
@@ -14,7 +14,8 @@
 export default {
   props: {
     data: { type: Array, required: true },
-    num: { type: Number, default: 0 }
+    num: { type: Number, default: 0 },
+    bgmargin: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -25,7 +26,7 @@ export default {
   watch: {
     data: {
       handler(newV) {
-        console.log(newV, 'cdscdscdsc')
+        console.log(newV, '时间轴数据')
         if (!newV) return
         this.list = newV
       },
@@ -34,7 +35,7 @@ export default {
     },
     num: {
       handler(newV) {
-        if (!newV) return
+        console.log(newV, '时间轴状态')
         this.key = newV
       },
       deep: true
@@ -66,6 +67,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.qz-timeline-bgOne {
+  min-width: max-content;
+  margin: 5px 30px 20px;
+  text-align: center;
+}
 .qz-timeline-bg {
   min-width: max-content;
   margin: 20px 30px 40px;

src/views/quality/components/bugList.vue

@@ -4,7 +4,7 @@
       <div v-for="(item, index) in chartData.bugCount" :key="'time'+index" class="repair-item">
         <div :class="{'item-detail': index === 0}" @click.stop>
           <span>{{ item.label }}</span>
-          <div class="repair-time repair-hover" @click="openDrawer(item)">{{ item.countStr }}<span> 个</span></div>
+          <div class="repair-time repair-hover" @click="openDrawer(item, chartData.bugCount)">{{ 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>
@@ -13,9 +13,9 @@
     </div>
     <div class="repair-list">
       <div v-for="(item, index) in chartData.averageBugCount" :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, chartData.averageBugCount)">{{ 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>
@@ -24,9 +24,9 @@
     </div>
     <div class="repair-list">
       <div v-for="(item, index) in chartData.averageBugRepairTime" :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> h</span></div>
+          <div class="repair-time repair-hover" @click="openDrawer(item, chartData.averageBugRepairTime)">{{ item.countStr }}<span> h</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>
@@ -59,8 +59,8 @@ export default {
     }
   },
   methods: {
-    openDrawer(val) {
-      this.requireList = { ...val }
+    openDrawer(val, list) {
+      this.requireList = { ...val, yaxis: list }
       this.$emit('requireBug', this.requireList)
     }
   }

src/views/quality/components/distributionChart.vue

@@ -10,6 +10,7 @@
               :disabled="activeTab === '2'&&item.code === 1"
               :label="item.label"
               :value="item.code"
+              @click.native="getLabel(item.label)"
             />
           </el-select>
         </el-col>
@@ -85,12 +86,17 @@ export default {
   },
   mounted() {
     this.changeBarOrPie(this.barOrPie)
+    this.getLabel('需求状态')
   },
   methods: {
     statusChange(e) {
       this.$emit('update:status', this.curStatus)
       this.$emit('change')
     },
+    getLabel(e) {
+      console.log(e, '状态')
+      this.$emit('state', e)
+    },
     getCode(val) {
       this.$emit('code', val)
     },

src/views/quality/components/drawerAll.vue

@@ -2,33 +2,16 @@
   <el-drawer :title="Statistics.title" :visible.sync="drawer_" :direction="direction" :modal="false" :class="{'drawer-box': showClass}" size="100%" :before-close="handleClose">
     <div>
       <div class="qz-drawer-header">
-        <timeline :data="list" :num="defaultKey" @update="getTimeLine" />
-        <!-- <timeline :data="list" @update="getTimeLine" /> -->
-      </div>
-      <div style="height: calc(100vh - 295px); overflow: scroll; overflow-x: hidden;">
-        <div class="qz-drawer-H">需求等级为p1的需求</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-column label="需求名称" min-width="250">
-            <template slot-scope="scope">
-              <div class="drawer-id">{{ scope.row.requirementDisplayId }}</div>
-              <el-tooltip v-if="scope.row.name.length >= 15" class="item" effect="dark" :content="scope.row.name" placement="top">
-                <div class="drawer-name" @click="jumper(scope.row)">{{ scope.row.name | ellipsis }}</div>
-              </el-tooltip>
-              <div v-else class="drawer-name" @click="jumper(scope.row)">{{ scope.row.name | ellipsis }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态" min-width="100">
-            <template slot-scope="scope">
-              <div>{{ scope.row.statusName }}</div>
-            </template>
-          </el-table-column>
-        </el-table>
+        <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 === '需求分布图数据'" class="qz-drawer-H">{{ status }}为{{ type }}的需求</div>
+      <div v-if="Statistics.title === '状态停留分布图数据'" class="qz-drawer-H">在{{ type }}状态停留时长为{{ typeTow }}的需求</div>
+      <qzTable :data="tableData" :title="Statistics.title" />
     </div>
     <el-pagination
       style="text-align: center;"
@@ -43,36 +26,36 @@
 </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 { bugList } from '@/api/defectManage'
 import timeline from '@/components/timeline'
+import qzTable from './tables'
 export default {
   components: {
-    timeline
-  },
-  filters: {
-    ellipsis(value) {
-      if (!value) return ''
-      if (value.length > 15) {
-        return value.slice(0, 15) + '...'
-      }
-      return value
-    }
+    timeline,
+    qzTable
   },
   props: {
     data: { type: Object, required: true },
-    drawer: { type: Boolean, default: false }
+    drawer: { type: Boolean, default: false },
+    status: { type: String, default: '' }
   },
   data() {
     return {
-      list: [{ value: 0, name: '全部' }, { value: 1, name: 'P0' }, { value: 2, name: 'P1' }, { value: 3, name: 'P2' }, { value: 4, name: 'P3' }],
-      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
+      list: [],
+      bgMargin: false,
+      dataList: [],
       Statistics: {}, // title
       direction: 'rtl',
       showClass: false,
+      defaultKey2: 0,
+      defaultKey: 0,
       bugList: [],
+      type: '',
+      typeTow: '',
+      towVal: '',
+      oneVal: '',
       currentPage: 1,
       total: 0,
       paging: {
@@ -85,98 +68,118 @@ export default {
   computed: {
     drawer_: {
       get() { return this.drawer },
-      set(v) {
-        this.$emit('clone', v)
-      }
+      set(v) { this.$emit('clone', v) }
     }
   },
   watch: {
     data: {
       handler(newV, oldV) {
-        this.Statistics = newV
-        this.list = newV.xaxis
-        this.defaultKey = newV.dataIndex
-        this.currentPage = 1
-        this.paging = {
-          curIndex: 1, // 分页
-          pageSize: 10 // 分页
+        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()
         }
-        this.getTableData(this.Statistics.yaxis[0].idList[this.defaultKey],)
       },
       immediate: true
     }
   },
-  // created() {
-  //   this.bugGetEnum()
-  // },
   mounted() {
     this.$nextTick(() => {
       this.showClass = true
     })
   },
   methods: {
+    setDrawerDate() {
+      if (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 === '缺陷统计数据') {
+        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)
+      }
+    },
     handleClick(row) {
       console.log(row)
     },
-    getTimeLine(val) {
-      console.log(val, 'vfvdv')
-      const data = this.Statistics.yaxis[0].idList[val.value]
-      if (data[0]) {
-        this.getTableData(this.Statistics.yaxis[0].idList[val.value])
-      } else {
+    getvalue(e) {
+      this.oneVal = e
+      this.type = e.name
+      this.defaultKey = e.value
+      this.getTimeLine()
+    },
+    getvalueTow(e) {
+      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.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]
+      }
+      if (this.dataList[0]) { // 判断idList有没有数据
+        this.getTableData(this.dataList)
+      } else { // 没有数据初始化table
         this.tableData = []
+        this.total = 0
       }
     },
     async getTableData(taskIdList) {
-      const data = {
-        ids: taskIdList,
-        ...this.paging
-      }
-      // if (this.Statistics.idList !== undefined && this.Statistics.idList.length > 0) {
-      //   this.paging.ids = this.Statistics.idList
-      //   if (this.Statistics.typeStr === '需求') {
-      const res = await getRequirement(data)
-      if (res.code === 200) {
-        console.log(res, '农村科技大厦')
-        this.tableData = res.data.list
-        // this.total = res.data.total
-      }
+      const data = { ids: taskIdList, ...this.paging }
+      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据') {
+        const res = await getRequirement(data)
+        if (res.code === 200) {
+          console.log(res, '农村科技大厦')
+          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 if (this.Statistics.title === '缺陷统计数据') {
+        const res = await bugList(data)
+        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()
+      this.getTableData(this.dataList)
     },
     handleCurrentChange(val) {
       this.paging.curIndex = val
-      this.getTableData()
+      this.getTableData(this.dataList)
     },
     handleClose(done) {
       this.$emit('clone')
@@ -194,8 +197,11 @@ export default {
   margin: 20px 30px;
   padding: 1px 0;
   overflow: hidden;
+}
+.qz-drawer-scll {
   overflow-x: auto;
 }
+.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
 .qz-drawer-H {
   font-size: 16px;
   font-weight: 500;
@@ -204,12 +210,7 @@ export default {
 }
 >>> :focus{outline:0;}
 .integration-num {
-  margin: 20px 30px;
-}
-
-.drawer-name:hover {
-  color: #409eff;
-  cursor: pointer;
+  margin: 5px 30px;
 }
 
 .div_priority {
@@ -219,10 +220,6 @@ export default {
   border-radius: 4px;
   margin-left: 4px;
 }
-.drawer-id {
-  color: rgb(167, 174, 188);
-  font-size: 10px;
-}
 >>>.el-drawer__header {
     color: #444;
     font-size: 20px;

src/views/quality/components/statusStayChart.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <div class="chart-contain">
-      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" />
+      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" @onClick="getCode" />
     </div>
   </section>
 </template>
@@ -23,7 +23,8 @@ export default {
   },
   data() {
     return {
-      echartsOption: null
+      echartsOption: null,
+      dayList: []
     }
   },
   watch: {
@@ -36,8 +37,12 @@ export default {
     }
   },
   methods: {
+    getCode(val) {
+      this.$emit('code', val, this.dayList, this.chartData)
+    },
     setChart() {
       if (!this.chartData) return
+      this.dayList = this.chartData.yaxis.map(item => { return item.name })
       const newArr = this.chartData.yaxis.filter(item => { return item.name !== '全部' })
       const colorArr = ['#409EFF', '#F8CE5C', '#F2904F', '#5EE2BE', '#D873F5', '#7479F5']
       this.echartsOption = {

src/views/quality/components/tables/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div style="margin: 0 30px;">
+    <el-table v-if="title === '需求分布图数据'" :data="data" style="width: 100%;" height="calc(100vh - 318px)" :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" align="center">
+        <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 label="需求名称" min-width="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 label="状态" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.statusName }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-table v-if="title === '缺陷统计数据'" :data="data" style="width: auto;" height="calc(100vh - 318px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }" class="integration-num">
+      <el-table-column label="优先级" prop="priorityCode" min-width="100" align="center">
+        <template slot-scope="scope" style="text-align: center;">
+          <span class="div_priority" :class="[{'priority_color': scope.row.priorityLevel === 'High'},{'priority_color1': scope.row.priorityLevel === 'Medium'},{'priority_color3': scope.row.priorityLevel === 'Low'}]">
+            {{ scope.row.priorityLevel.substring(0, 1) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="bugName" label="缺陷标题" min-width="360" 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 prop="priorityName" label="缺陷等级" align="center" />
+      <el-table-column prop="bugStatusName" label="状态" min-width="110" align="center">
+        <template slot-scope="scope">
+          <statusChange :status-code="Number(scope.row.status)" :bug-data="scope.row" :status-obj="statusObj" />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-table v-if="title === '状态停留分布图数据'" :data="data" style="width: 100%;" height="calc(100vh - 318px)" :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" align="center">
+        <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 label="需求名称" min-width="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 label="状态" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.statusName }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import '@/styles/PublicStyle/index.scss'
+import { EncryptId } from '@/utils/crypto-js.js'
+import { bugGetEnum } from '@/api/defectManage'
+import statusChange from '@/views/projectManage/bugList/details/statusChange'
+export default {
+  components: {
+    statusChange
+  },
+  props: {
+    data: { type: Array, default: null },
+    title: { type: String, required: true }
+  },
+  data() {
+    return {
+      statusObj: null, // 状态对象
+      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']
+    }
+  },
+  created() {
+    this.bugGetEnum()
+  },
+  methods: {
+    async bugGetEnum() {
+      const res = await bugGetEnum()
+      if (res.code === 200) {
+        this.statusObj = {
+          bugEnumList: res.data.bugEnumList, // status
+          repairResultEnumList: res.data.repairResultEnumList, // 修复结果
+          bugReasonEnumList: res.data.bugReasonEnumList, // 缺陷原因
+          theBugTypeEnumList: this.deleteChild(res.data.theBugTypeEnumList), // 缺陷类型
+          priorityEnumList: res.data.priorityEnumList // 缺陷等级
+        }
+      }
+    },
+    deleteChild(arr) { // 删除无用子属性
+      const bfs = arr => {
+        arr.forEach(item => {
+          if (!item.childrenEnums || item.childrenEnums.length === 0) {
+            delete item.childrenEnums
+          } else {
+            this.deleteChild(item.childrenEnums)
+          }
+        })
+      }
+      bfs(arr)
+      return arr
+    },
+    jumper(val, name) {
+      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')
+    }
+  }
+}
+</script>
+
+<style lang="scss" 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>

src/views/quality/requireStatistics.vue

@@ -164,11 +164,12 @@
             :active-tab="activeTab"
             @change="getDistributeData()"
             @code="clickCodeData"
+            @state="getStatusType"
           />
         </div>
-        <div class="chart-item">
+        <div class="chart-item" @click.stop>
           <h3>状态停留分布图</h3>
-          <status-stay-chart :chart-data="statusStayData" />
+          <status-stay-chart :chart-data="statusStayData" @code="statusStayChart" />
         </div>
         <div class="chart-item">
           <h3>需求方向分布图</h3>
@@ -178,14 +179,14 @@
           <h3>排期发生变更的需求（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
           <change-require-chart :chart-data="changeRequireData" type-name="需求" />
         </div>
-        <div class="chart-item">
+        <div class="chart-item" @click.stop>
           <h3>缺陷统计</h3>
           <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" />
+        <drawer-all v-if="openDrawer" :drawer="openDrawer" :data="requireList" :status="reqStatus" @clone="clone" />
       </div>
     </el-container>
   </div>
@@ -241,6 +242,7 @@ export default {
       drawer: false,
       openDrawer: false,
       requireList: {},
+      reqStatus: '',
       bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
       timeTypeList: [ // 日期选择
         { code: 1, label: '周' },
@@ -487,7 +489,11 @@ export default {
           : this.developmentCycleData = [moment().format('YYYY-MM-DD'), '0']
       }
     },
+    getStatusType(e) {
+      this.reqStatus = e
+    },
     async getDistributeData() { // 获取需求分布图
+      this.openDrawer = false
       const params = {
         ...this.globalParams,
         type: Number(this.activeTab),
@@ -553,6 +559,7 @@ export default {
     queryData(value) { // 需求bug 浮层数据
       console.log(value)
       value.title = '缺陷统计数据'
+      value.xaxis = ['全部', 'P0', 'P1', 'P2', 'P3']
       this.requireList = value
       this.openDrawer = true
     },
@@ -562,6 +569,14 @@ export default {
       this.openDrawer = true
       console.log(this.requireList, 'cdscdmckcdscsldmcl')
     },
+    statusStayChart(value, list, data) {
+      value.title = '状态停留分布图数据'
+      value.towTimeLine = list
+      value.statusList = data
+      this.requireList = { ...value, xaxis: data.xaxis }
+      this.openDrawer = true
+      console.log(this.requireList, 'cdscdmckcdscsldmc2')
+    },
     clone(v) {
       this.drawer = v
       this.openDrawer = false