优化点

src/App.vue

@@ -28,13 +28,16 @@ export default {
       })
   },
   created() {
-    this.initOmegaTracker()
     this.initRoutes()
+    this.initOmegaTracker()
   },
   methods: {
     initOmegaTracker() {
-      const omega = OmegaTracker.getTracker(config)
-      return omega
+      try {
+        OmegaTracker.getTracker(config)
+      } catch (error) {
+        console.error(error)
+      }
     },
     initRoutes() {
       this.$store.dispatch('data/setRoutes', this.$router.options.routes)

src/api/statisticsApi/taskStatistics.js

@@ -44,7 +44,7 @@ export function getTaskPeriodicData(data) {
 // 研发交付周期分布图
 export function getTaskRdDeliveryPeriodicData(data) {
   return request({
-    url: TeamManagement + '/task/getTaskRdDeliveryPeriodicData',
+    url: TeamManagement + '/task/getTaskPeriodicDistributeData',
     method: 'post',
     data
   })

src/views/quality/components/cycleStatistic.vue

@@ -7,30 +7,36 @@
           <span>
             {{ item.label }}
             <template v-if="type === 'require' && showTips">
-              <el-tooltip v-if="index === 0" class="item" effect="dark" content="研发交付周期定义：需求排期里开发、联调、上线类型排期的总周期" placement="top-start">
+              <el-tooltip v-if="index === 0" class="item" effect="dark" :content="requireTips[0]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 1" class="item" effect="dark" content="研发周期定义：需求排期里开发、联调类型排期的总周期" placement="top-start">
+              <el-tooltip v-if="index === 1" class="item" effect="dark" :content="requireTips[1]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 2" class="item" effect="dark" content="测试周期定义：需求排期里测试类型排期的总周期" placement="top-start">
+              <el-tooltip v-if="index === 2" class="item" effect="dark" :content="requireTips[2]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 3" class="item" effect="dark" content="提测等待测试时长定义：需求排期里提测排期结束日期距离测试排期开始日期的天数" placement="top-start">
+              <el-tooltip v-if="index === 3" class="item" effect="dark" :content="requireTips[3]" placement="top" popper-class="cycleStatistic-tips">
+                <i class="el-icon-info" />
+              </el-tooltip>
+              <el-tooltip v-if="index === 4" class="item" effect="dark" :content="requireTips[4]" placement="top" popper-class="cycleStatistic-tips">
+                <i class="el-icon-info" />
+              </el-tooltip>
+              <el-tooltip v-if="index === 5" class="item" effect="dark" :content="requireTips[5]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
             </template>
             <template v-if="type === 'task' && showTips">
-              <el-tooltip v-if="index === 0" class="item" effect="dark" content="研发交付周期定义：任务排期里开发、联调、上线类型排期的总周期" placement="top-start">
+              <el-tooltip v-if="index === 0" class="item" effect="dark" :content="taskTips[0]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 1" class="item" effect="dark" content="研发周期定义：任务排期里开发、联调类型排期的总周期" placement="top-start">
+              <el-tooltip v-if="index === 1" class="item" effect="dark" :content="taskTips[1]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 2" class="item" effect="dark" content="测试周期定义：任务排期里测试类型排期的总周期" placement="top-start">
+              <el-tooltip v-if="index === 2" class="item" effect="dark" :content="taskTips[2]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 3" class="item" effect="dark" content="提测等待测试时长定义：任务排期里提测排期结束日期距离测试排期开始日期的天数" placement="top-start">
+              <el-tooltip v-if="index === 3" class="item" effect="dark" :content="taskTips[3]" placement="top" popper-class="cycleStatistic-tips">
                 <i class="el-icon-info" />
               </el-tooltip>
             </template>
@@ -74,6 +80,24 @@ export default {
       required: false
     }
   },
+  data() {
+    return {
+      requireTips: [
+        '产品技术侧总周期定义：需求从BRD评审通过到交付的总周期。计算条件：仅计算需求计划里 BRD评审通过时间不为空，且需求状态已变更为“已排期”且排期不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算）',
+        '产品侧总周期定义：需求从BRD评审通过到技术准入的总周期。计算条件：仅计算需求计划里BRD评审通过时间和技术准入时间均不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算、没有技术准入状态的业务线按PRD评审通过时间计算）',
+        '技术侧总周期定义：需求从技术准入到交付的总周期。计算条件：仅计算需求计划里技术准入时间不为空，且需求状态已变更为“已排期”且需求排期不为空的需求。（没有技术准入状态的业务线按PRD评审通过时间计算）',
+        '研发交付周期定义：需求排期里开发、联调、上线类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。',
+        '研发周期定义：需求排期里开发、联调类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。计算规则：',
+        '测试周期定义：需求排期里测试类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'
+      ],
+      taskTips: [
+        '研发交付周期定义：任务排期里开发、联调、上线类型排期的总周期。计算条件：仅计算任务状态已变更为“已排期”且任务排期不为空的任务。',
+        '研发周期定义：任务排期里开发、联调类型排期的总周期。计算条件：仅计算状态已变更为“已排期”且排期不为空的任务。',
+        '测试周期定义：任务排期里测试类型排期的总周期。计算条件：仅计算状态已变更为“已排期”且排期不为空的任务。',
+        '提测等待测试时长定义：任务排期里提测排期结束日期距离测试排期开始日期的天数。计算条件：仅计算任务状态已变更为“已排期”且排期不为空，且提测、测试类型排期不为空的任务。'
+      ]
+    }
+  },
   watch: {
     chartData: {
       handler(newV) {
@@ -93,7 +117,7 @@ export default {
   margin: 20px auto;
   .repair-item {
     position: relative;
-    width: 20%;
+    width: 16%;
     font-size: 12px;
     font-weight: bold;
     padding: 11px 17px 6px 17px;
@@ -154,3 +178,10 @@ export default {
   }
 }
 </style>
+<style>
+.cycleStatistic-tips {
+  width: 500px !important;
+  background:rgba(121,132,150,0.8) !important;
+  color: #FFF !important;
+}
+</style>

src/views/quality/components/developmentCycle.vue

@@ -1,5 +1,19 @@
 <template>
   <section>
+    <div class="control">
+      <el-row type="flex" align="middle">
+        <el-col :span="4" :offset="20">
+          <el-select v-model="selectType" size="small" @change="statusChange">
+            <el-option
+              v-for="item in graphTypeList"
+              :key="item.code"
+              :label="item.label"
+              :value="item.code"
+            />
+          </el-select>
+        </el-col>
+      </el-row>
+    </div>
     <div class="chart-contain">
       <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" @onClick="toLink" />
     </div>
@@ -25,11 +39,22 @@ export default {
       type: String,
       default: '',
       required: false
+    },
+    graphType: {
+      type: Number,
+      default: 1,
+      required: false
+    },
+    graphTypeList: {
+      type: Array,
+      default: () => [],
+      required: false
     }
   },
   data() {
     return {
-      echartsOption: null
+      echartsOption: null,
+      selectType: this.graphType
     }
   },
   watch: {
@@ -45,19 +70,33 @@ export default {
         this.timeType = newV
       },
       immediate: true
+    },
+    graphType: {
+      handler(newV) {
+        this.selectType = newV
+      },
+      immediate: true
     }
   },
   methods: {
+    statusChange(val) {
+      this.selectType = val
+      this.$emit('update:graphType', this.selectType)
+      this.$emit('change')
+    },
     setChart() {
+      const target = this.graphTypeList.find(value => {
+        return value.code === this.graphType
+      })
       this.echartsOption = {
         grid: { left: '0%', right: '5%', bottom: '0%', top: '3%', containLabel: true },
         tooltip: {
           showDelay: 0,
-          formatter: function(params) {
+          formatter: (params) => {
             if (params.componentType === 'markLine') {
-              return `平均研发交付周期：${params.value.toFixed(1)}天`
+              return `平均${target.label}：${params.value.toFixed(1)}天`
             } else {
-              return `交付日期：${params.data[0]}<br/> 研发交付周期：${params.data[1]}天`
+              return `交付日期：${params.data[0]}<br/> ${target.label}：${params.data[1]}天`
             }
           },
           axisPointer: {
@@ -125,5 +164,10 @@ export default {
   margin: auto;
   margin-top: 20px;
 }
+.control{
+  width: 84%;
+  margin: auto;
+  margin-top: 20px;
+}
 </style>
 

src/views/quality/requireStatistics.vue

@@ -118,19 +118,25 @@
       </div>
       <div class="chart-item">
         <h3>周期统计<span>（根据排期计算）</span></h3>
-        <div class="chart-item-tip">
+        <!-- <div class="chart-item-tip">
           <i class="el-icon-warning-outline" />
           <span>仅统计状态已变更“已排期”且排期不为空的需求</span>
-        </div>
+        </div> -->
         <cycle-statistic :chart-data="cycleData" />
       </div>
       <div class="chart-item">
         <h3>研发交付周期分布图<span>（根据排期计算）</span></h3>
-        <div class="chart-item-tip">
+        <!-- <div class="chart-item-tip">
           <i class="el-icon-warning-outline" />
           <span>仅统计状态已变更“已排期”且排期不为空的需求；横坐标表示需求交付日期，纵坐标代表研发交付周期（研发、联调、上线类型排期的总周期)</span>
-        </div>
-        <development-cycle :chart-data="developmentCycleData" type="require" />
+        </div> -->
+        <development-cycle
+          :chart-data="developmentCycleData"
+          type="require"
+          :graph-type.sync="graphType"
+          :graph-type-list="graphTypeList"
+          @change="getDevelopmentCycle()"
+        />
       </div>
       <div class="chart-item">
         <h3>需求分布图</h3>
@@ -219,6 +225,15 @@ export default {
       cumulativeData: null, // 需求状态累计流数据
       tendencyData: null, // 趋势图数据
       cycleData: [], // 周期统计数据
+      graphType: 1, // 周期分布图选项
+      graphTypeList: [// 周期分布图选项列表
+        { code: 1, label: '产品技术侧总周期' },
+        { code: 2, label: '产品侧总周期' },
+        { code: 3, label: '技术侧总周期' },
+        { code: 4, label: '研发交付周期' },
+        { code: 5, label: '研发周期' },
+        { code: 6, label: '测试周期 ' }
+      ],
       developmentCycleData: [], // 研发交付周期分布数据
       distributeStatus: 1, // 需求分布图需求状态
       distributeStatusList: [
@@ -378,7 +393,8 @@ export default {
     async getDevelopmentCycle() { // 获取研发交付周期分布数据
       const params = {
         ...this.globalParams,
-        type: Number(this.activeTab)
+        type: Number(this.activeTab),
+        graphType: this.graphType
       }
       const res = await getRequireRdDeliveryPeriodicData(params)
       if (res.code === 200) {

src/views/quality/taskStatistics.vue

@@ -73,13 +73,13 @@
                 <img v-show="index === 2" src="../../../src/assets/defect_images/reopen.png">
               </div>
               <span>{{ item.label }}</span>
-              <el-tooltip v-if="index === 0" class="item" effect="dark" content="统计区间内，新建的任务数量" placement="top-start">
+              <el-tooltip v-if="index === 0" class="item" effect="dark" content="统计区间内，新建的任务数量" placement="top">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 1" class="item" effect="dark" content="任务最近一次更新状态为“已上线”在统计区间内，并且当前状态是“已上线”的任务数量" placement="top-start">
+              <el-tooltip v-if="index === 1" class="item" effect="dark" content="任务最近一次更新状态为“已上线”在统计区间内，并且当前状态是“已上线”的任务数量" placement="top">
                 <i class="el-icon-info" />
               </el-tooltip>
-              <el-tooltip v-if="index === 2" class="item" effect="dark" content="任务最近一次更新状态为“Hold”在统计区间内，并且当前状态是“Hold”的任务数量" placement="top-start">
+              <el-tooltip v-if="index === 2" class="item" effect="dark" content="任务最近一次更新状态为“Hold”在统计区间内，并且当前状态是“Hold”的任务数量" placement="top">
                 <i class="el-icon-info" />
               </el-tooltip>
             </div>
@@ -116,19 +116,25 @@
       </div>
       <div class="chart-item">
         <h3>周期统计<span>（根据排期计算）</span></h3>
-        <div class="chart-item-tip">
+        <!-- <div class="chart-item-tip">
           <i class="el-icon-warning-outline" />
           <span>仅统计状态已变更“已排期”且排期不为空的任务</span>
-        </div>
+        </div> -->
         <cycle-statistic :chart-data="cycleData" type="task" />
       </div>
       <div class="chart-item">
         <h3>研发交付周期分布图<span>（根据排期计算）</span></h3>
-        <div class="chart-item-tip">
+        <!-- <div class="chart-item-tip">
           <i class="el-icon-warning-outline" />
           <span>仅统计状态已变更“已排期”且排期不为空的任务；横坐标表示任务交付日期，纵坐标代表研发交付周期（研发、联调、上线类型排期的总周期)</span>
-        </div>
-        <development-cycle :chart-data="developmentCycleData" type="task" />
+        </div> -->
+        <development-cycle
+          :chart-data="developmentCycleData"
+          type="task"
+          :graph-type.sync="graphType"
+          :graph-type-list="graphTypeList"
+          @change="getDevelopmentCycle()"
+        />
       </div>
       <div class="chart-item">
         <h3>任务分布图</h3>
@@ -224,6 +230,13 @@ export default {
       tendencyData: null, // 趋势图数据
       belongRequirementData: null, // 所属需求方向分布图
       cycleData: [], // 周期统计数据
+      graphType: 4, // 周期分布图选项
+      graphTypeList: [// 周期分布图选项列表
+        { code: 4, label: '研发交付周期' },
+        { code: 5, label: '研发周期' },
+        { code: 6, label: '测试周期' },
+        { code: 7, label: '提测等待测试时长' }
+      ],
       developmentCycleData: [], // 研发交付周期分布数据
       distributeStatus: 1, // 任务分布图任务状态
       distributeStatusList: [
@@ -389,7 +402,8 @@ export default {
     async getDevelopmentCycle() { // 获取研发交付周期分布数据
       const params = {
         ...this.globalParams,
-        type: Number(this.activeTab)
+        type: Number(this.activeTab),
+        graphType: this.graphType
       }
       const res = await getTaskRdDeliveryPeriodicData(params)
       if (res.code === 200) {