Merge branch 'insist' into http_test

src/api/monthly/index.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+import { TeamManagement } from '@/apiConfig/api'
+
+// 获取主页轮播图
+export function materialGetMaterialList(data) {
+  return request({
+    url: TeamManagement + `/material/getMaterialList`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除素材
+export function materialDeleteMaterial(data) {
+  return request({
+    url: TeamManagement + `/material/deleteMaterial`,
+    method: 'post',
+    data
+  })
+}
+
+// 新增素材
+export function materialAddMaterial(data) {
+  return request({
+    url: TeamManagement + `/material/addMaterial`,
+    method: 'post',
+    data
+  })
+}

src/api/requirement.js

@@ -346,3 +346,11 @@ export function unlockScheduleCheck(id) {
     method: 'get'
   })
 }
+
+// 更新需求预计上线版本
+export function requirementUpdatePreOnlineVersion(id) {
+  return request({
+    url: requestIp + `/requirement/updatePreOnlineVersion?requirementId=${id}`,
+    method: 'get'
+  })
+}

src/api/taskIndex.js

@@ -283,3 +283,11 @@ export function listRequireAndTask(data) {
     data
   })
 }
+
+// 更新任务下预计上线版本
+export function taskUpdatePreOnlineVersion(id) {
+  return request({
+    url: TeamManagement + `/task/updatePreOnlineVersion?taskId=${id}`,
+    method: 'get'
+  })
+}

src/components/chart/index.vue

@@ -42,7 +42,3 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>

src/components/chart/normalEchart.vue

@@ -49,7 +49,3 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>

src/components/newLayout/Head.vue

@@ -10,6 +10,18 @@
       </div>
       <div class="name">{{ item.name }}</div>
     </div>
+    <div @mouseleave="target = true">
+      <div :class="[target ? 'nav-div1' : 'nav-div2']">
+        <el-tooltip v-if="!target" class="item" effect="dark" content="工具集合" placement="right">
+          <div class="div-child" @click="$router.push({ name: 'Interface' })"><svg-icon icon-class="tool-enter" /></div>
+        </el-tooltip>
+        <el-tooltip v-if="!target" class="item" effect="dark" content="环境平台" placement="right">
+          <div class="div-child" @click="$router.push({ name: 'env' })"><svg-icon icon-class="env-enter" /></div>
+        </el-tooltip>
+      </div>
+      <div class="nav-div3 nav-circular" />
+      <div class="nav-div4 nav-circular" @mouseenter="target = false" />
+    </div>
     <!-- <div v-show="navTagType === 2" class="nav-tag-type" @click="setNavTagType(1)">
       <i class="el-icon-notebook-2" style="transform: rotate(90deg);" />
     </div>
@@ -53,7 +65,8 @@ export default {
   data() {
     return {
       headList: routes.filter(item => item.name !== '业务线'),
-      userInfo: null
+      userInfo: null,
+      target: true
     }
   },
   computed: {
@@ -71,6 +84,9 @@ export default {
     this.getLoginUser()
   },
   methods: {
+    getTarget() {
+      this.target = !this.target
+    },
     findRoute(routeName) {
       for (const element of routes) {
         if (element.name === routeName) {
@@ -221,11 +237,65 @@ export default {
   }
 }
 </style>
-<style lang="scss">
+<style lang="scss" scoped>
 .head-popover {
   box-shadow: 10px 0px 11px #dedede;
   /deep/ .ant-popover-inner-content {
     padding: 0;
   }
 }
+.nav-div1 {
+  width:25px;height:50px;border-radius: 0 50px 50px 0;line-height:50px;background: #FFF; position: absolute; bottom: 172px; left: 0;border: 1px solid #333;opacity: 0.8;animation:myfirsts 0.5s;
+}
+.nav-div2 {
+  bottom: 122px; width:70px; height:150px; line-height:150px;border-radius: 0 80px 80px 0;;background: rgb(255, 255, 255); position: absolute; left: 0;opacity: 0.8;animation:myfirst 1s;
+}
+@keyframes myfirst
+{
+	from {bottom: 172px; width:25px; height:50px; line-height:50px;}
+	to {bottom: 122px; width:70px; height:150px; line-height:150px;}
+}
+
+@keyframes myfirsts
+{
+	from {bottom: 122px; width:70px; height:150px; line-height:150px;}
+  to {bottom: 172px; width:25px; height:50px; line-height:50px;}
+}
+
+.nav-div3 {
+  width:25px;
+  height:50px;
+  line-height:50px;
+  background: #FFF;
+  bottom: 172px;
+  border: 1px solid #eee;
+  opacity: 0.63;
+}
+.nav-div4 {
+  width:20px;
+  height:40px;
+  line-height:45px;
+  background: #FFF;
+  bottom: 177px;
+  border: 1px solid #eee;
+}
+.div-child {
+  text-align: right;
+  margin-right: 24px;
+  line-height: 75px;
+  cursor: pointer;
+  opacity: 1;
+  animation:myfirs 4s;
+}
+@keyframes myfirs
+{
+	from {opacity: 0}
+  to {opacity: 1}
+}
+.nav-circular {
+  position: absolute;
+  left: 0;
+  border-radius: 0 50px 50px 0;
+  cursor: pointer;
+}
 </style>

src/components/select/searchTeam.vue

@@ -132,4 +132,7 @@ export default {
     overflow:hidden
   }
 }
+>>>.el-tag.el-tag--info {
+    margin: 2px 0 2px 15px !important;
+}
 </style>

src/icons/svg/problem.svg

@@ -0,0 +1,8 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="8.272" height="9.613" viewBox="0 0 8.272 9.613">
+  <g id="问题" transform="translate(-160.5 -103.5)">
+    <path id="路径_432" data-name="路径 432" d="M306.689,370.171h-3.354a.335.335,0,0,1,0-.671h3.354a.335.335,0,0,1,0,.671Zm-2.236,1.341h-1.118a.335.335,0,0,1,0-.671h1.118a.335.335,0,1,1,0,.671Z" transform="translate(-140.823 -262.87)" fill="#666"/>
+    <path id="路径_433" data-name="路径 433" d="M165.2,112.347h-3.692a1.008,1.008,0,0,1-1.006-1.006v-6.835a1.008,1.008,0,0,1,1.006-1.006h6.26a1.008,1.008,0,0,1,1.006,1.006v3.8a.335.335,0,1,1-.671,0v-3.8a.336.336,0,0,0-.335-.335h-6.26a.336.336,0,0,0-.335.335v6.835a.336.336,0,0,0,.335.335H165.2a.335.335,0,1,1,0,.671Z" fill="#666"/>
+    <path id="路径_434" data-name="路径 434" d="M646.23,572.333a.333.333,0,0,1-.335-.332,1.675,1.675,0,0,1,.688-1.32.518.518,0,0,0,.192-.539.538.538,0,0,0-.406-.388.589.589,0,0,0-.5.109.521.521,0,0,0-.2.406.335.335,0,1,1-.671,0,1.186,1.186,0,0,1,.449-.928,1.256,1.256,0,0,1,1.064-.241,1.2,1.2,0,0,1,.913.89,1.188,1.188,0,0,1-.433,1.224,1.014,1.014,0,0,0-.427.784A.34.34,0,0,1,646.23,572.333Zm0,.87a.335.335,0,0,1,0-.671h0a.335.335,0,1,1,0,.671Z" transform="translate(-478.799 -460.089)" fill="#666"/>
+  </g>
+</svg>

src/icons/svg/problem1.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8.272" height="9.613" viewBox="0 0 8.272 9.613">
+  <g id="问题" transform="translate(-160.5 -103.5)">
+    <path id="路径_432" data-name="路径 432" d="M306.689,370.171h-3.354a.335.335,0,0,1,0-.671h3.354a.335.335,0,0,1,0,.671Zm-2.236,1.341h-1.118a.335.335,0,0,1,0-.671h1.118a.335.335,0,1,1,0,.671Z" transform="translate(-140.823 -262.87)" fill="#409eff"/>
+    <path id="路径_433" data-name="路径 433" d="M165.2,112.347h-3.692a1.008,1.008,0,0,1-1.006-1.006v-6.835a1.008,1.008,0,0,1,1.006-1.006h6.26a1.008,1.008,0,0,1,1.006,1.006v3.8a.335.335,0,1,1-.671,0v-3.8a.336.336,0,0,0-.335-.335h-6.26a.336.336,0,0,0-.335.335v6.835a.336.336,0,0,0,.335.335H165.2a.335.335,0,1,1,0,.671Z" fill="#409eff"/>
+    <path id="路径_434" data-name="路径 434" d="M646.23,572.333a.333.333,0,0,1-.335-.332,1.675,1.675,0,0,1,.688-1.32.518.518,0,0,0,.192-.539.538.538,0,0,0-.406-.388.589.589,0,0,0-.5.109.521.521,0,0,0-.2.406.335.335,0,1,1-.671,0,1.186,1.186,0,0,1,.449-.928,1.256,1.256,0,0,1,1.064-.241,1.2,1.2,0,0,1,.913.89,1.188,1.188,0,0,1-.433,1.224,1.014,1.014,0,0,0-.427.784A.34.34,0,0,1,646.23,572.333Zm0,.87a.335.335,0,0,1,0-.671h0a.335.335,0,1,1,0,.671Z" transform="translate(-478.799 -460.089)" fill="#409eff"/>
+  </g>
+</svg>

src/router/index.js

@@ -61,6 +61,14 @@ export const constantRoutes = [{
   name: '首页',
   hidden: true
 },
+
+{
+  path: '/monthly',
+  name: '月刊详情',
+  component: () => import('@/views/monthly/index.vue'),
+  hidden: true
+},
+
 {
   path: '/env-platform',
   component: Layout,

src/views/home/index.vue

@@ -34,16 +34,22 @@
     </el-menu>
     <div style="color: #FFFF">
       <div class="div-introduction">
-        <img
-          class="image-title"
-          style="width: 470px"
-          src="@/assets/home_images/banner_title@2x.png"
-        >
-        <br>
-        <span style="font-size: 17pt;">一站式质量效率平台，普惠你的工作</span><br>
-        <el-button plain class="enter-button" @click.native="handleSelect('4')"><svg-icon icon-class="project-enter" />项目管理</el-button>
-        <el-button plain class="enter-button" @click.native="handleSelect('1')"><svg-icon icon-class="env-enter" />环境管理</el-button>
-        <el-button plain class="enter-button" @click.native="handleSelect('9')"><svg-icon icon-class="tool-enter" />工具集合</el-button>
+        <div>
+          <img class="image-title" style="width: 470px" src="@/assets/home_images/banner_title@2x.png">
+          <br>
+          <span style="font-size: 17pt;">一站式质量效率平台，普惠你的工作</span><br>
+          <el-button plain class="enter-button" @click.native="handleSelect('4')"><svg-icon icon-class="project-enter" />项目管理</el-button>
+          <el-button plain class="enter-button" @click.native="handleSelect('1')"><svg-icon icon-class="env-enter" />环境管理</el-button>
+          <el-button plain class="enter-button" @click.native="handleSelect('9')"><svg-icon icon-class="tool-enter" />工具集合</el-button>
+        </div>
+        <div class="home-carousel">
+          <el-carousel :height="imgHeight + 'px'" indicator-position="outside">
+            <el-carousel-item v-for="(item, index) in abc_img" :key="index">
+              <img ref="image" :src="item.thumb" style="width: 100%; cursor: pointer;" @load="loadImage()" @click="image_carousel(item)">
+            </el-carousel-item>
+          </el-carousel>
+          <img src="@/assets/home_images/home_inage.png" style="position: absolute; left: 45%; width: 60%;">
+        </div>
       </div>
       <a href="#content1">
         <img
@@ -52,7 +58,7 @@
           src="@/assets/home_images/banner_icon_arrow@3x.png"
         >
       </a>
-      <img style="width: 100%;z-index: -1;" src="@/assets/home_images/banner_pic@3x.png">
+      <img style="width: 100%;z-index: -1;" src="@/assets/home_images/home.png">
     </div>
     <div id="content1" />
     <div class="div-main" style="height: 600pt;width 100%;text-align: center;">
@@ -127,6 +133,22 @@
 </template>
 
 <style scoped>
+.home-carousel {
+  width: 50%;
+  border-top:30px solid #f5f5f5;
+  border-right:30px solid #f5f5f5;
+  border-left:30px solid #f5f5f5;
+  border-radius: 12px;
+  background: #f5f5f5;
+}
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
 .el-dropdown:hover {
   cursor: pointer;
 }
@@ -148,9 +170,12 @@ div.div-login {
 div.div-introduction {
   position: absolute;
   font-size: 37pt;
-  top: 28.5%;
+  top: 17.5%;
   left: 8.3%;
   line-height: 50px;
+  width: 80%;
+  display: flex;
+  justify-content: space-between;
 }
 img.img-arrow {
   position: absolute;
@@ -268,6 +293,7 @@ import { mapGetters } from 'vuex'
 import FloatMenu from './floatMenu'
 import { logoutUrl } from '@/apiConfig/requestIP.js'
 import { settingUserGetBiz } from '@/api/projectIndex'
+import { materialGetMaterialList } from '@/api/monthly/index.js'
 
 export default {
   components: {
@@ -275,7 +301,9 @@ export default {
   },
   data() {
     return {
+      abc_img: [],
       activeIndex2: '1',
+      imgHeight: 300,
       menuColor: 'transparent',
       processManage: true,
       screenWidth: '100%',
@@ -291,6 +319,10 @@ export default {
     ])
   },
   mounted() {
+    this.materialGetMaterialList()
+    window.addEventListener('resize', () => {
+      this.imgHeight = this.$refs.image[0].height
+    })
     window.addEventListener('scroll', this.handleScroll, true)
     window.onresize = () => {
       return (() => {
@@ -306,6 +338,18 @@ export default {
     this.settingUserGetBiz()
   },
   methods: {
+    loadImage() {
+      this.imgHeight = this.$refs.image[0].height
+    },
+    image_carousel(e) {
+      this.$router.push({ name: '月刊详情', query: { id: e.id }})
+    },
+    async materialGetMaterialList() {
+      const res = await materialGetMaterialList({ pageSize: 5 })
+      if (res.code === 200) {
+        this.abc_img = res.data
+      }
+    },
     async settingUserGetBiz() { // 获取人员默认业务线
       const res = await settingUserGetBiz()
       if (res.code === 200 && res.data) {

src/views/monthly/components/createdMonthly.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-dialog :show="show" :title="title" :visible.sync="monthly_show" width="60%" class="public_task" @close="$emit('update:show', false)">
+    <div class="blueStripe" />
+    <el-form ref="monthly_form" :model="monthly_form" :rules="rules" label-position="left" label-width="80px">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="monthly_form.title" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="缩略图" prop="thumb">
+        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreview" :on-remove="handleRemove">
+          <i class="el-icon-plus" />
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="素材" prop="content">
+        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreviewTow" :on-remove="handleRemoveTow">
+          <i class="el-icon-plus" />
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="monthly_show = false">取 消</el-button>
+      <el-button type="primary" @click="monthly_dialog">创 建</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    show: { type: Boolean, default: false },
+    title: { type: String, required: true }
+  },
+  data() {
+    return {
+      monthly_show: this.show,
+      monthly_form: {},
+      rules: {
+        title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
+        thumb: [{ required: true, message: '缩略图不能为空', trigger: 'change' }],
+        content: [{ required: true, message: '素材不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  watch: {
+    show: {
+      handler(newV) {
+        this.monthly_show = newV
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    monthly_dialog() {
+      this.$refs.monthly_form.validate((valid) => {
+        if (valid) {
+          this.$emit('monthly_created', this.monthly_form)
+          this.$emit('update:show', false)
+        }
+      })
+    },
+    handleClose(done) {
+      this.monthly_show = false
+    },
+    handleRemoveTow(file, fileList) {
+      if (fileList.length === 0) {
+        this.kfFormRules.content = [{ required: true, message: '素材不能为空', trigger: 'change' }]
+      }
+    },
+    handlePictureCardPreviewTow(file) {
+      this.monthly_form.content = 'http:' + file.url
+      this.$refs.monthly_form.clearValidate('content')
+    },
+    handleRemove(file, fileList) {
+      if (fileList.length === 0) {
+        this.kfFormRules.thumb = [{ required: true, message: '缩略图不能为空', trigger: 'change' }]
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.monthly_form.thumb = 'http:' + file.url
+      this.$refs.monthly_form.clearValidate('thumb')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.public_task {
+  /deep/ .el-dialog__title {
+    line-height: 24px;
+    font-size: 16px;
+    color: #303133;
+    padding-left: 10px;
+}
+
+.blueStripe {
+  width:4px;
+  height:17px;
+  background:#409EFF;
+  border-radius:1px;
+  position: absolute;
+  top: 23px;
+  left: 20px;
+}
+}
+</style>

src/views/monthly/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <el-container>
+    <el-header class="monthly-title" style="padding: 0 20px;">
+      <div class="monthly-zhihui" @click="$router.push({ name: '首页' })"><img :src="logo"> 质惠</div>
+      <div class="monthly-title">
+        <div class="monthly-nav" @click="handleSelect('4')"><svg-icon icon-class="monthly_project" /> 项目管理</div>
+        <div class="monthly-nav" @click="handleSelect('1')"><svg-icon icon-class="monthly_环境" /> 环境管理</div>
+        <div class="monthly-nav" @click="handleSelect('9')"><svg-icon icon-class="monthly_工具" /> 工具集合</div>
+      </div>
+    </el-header>
+    <el-container>
+      <el-aside width="215px">
+        <div class="monthly-aside-header">
+          <el-input v-model="monthly_nav_query" suffix-icon="el-icon-search" size="mini" style="width: 80%; margin-right: 15px;" @blur="monthly_query(monthly_nav_query)" />
+          <i v-show="monthly_show" class="el-icon-circle-plus-outline monthly_icon" @click="addMonthly" />
+        </div>
+        <div v-for="item in monthly_nav_list" :key="item.id">
+          <div class="monthly-nav-center">
+            <i class="el-icon-document monthly-hover" @click="monthlyGetData(item)"> {{ item.title }}</i>
+            <i class="el-icon-close monthly-hover" @click="monthlyDelete(item.id)" />
+          </div>
+        </div>
+      </el-aside>
+      <el-main class="monthly-main">
+        <div class="monthly-main-title">
+          <el-tooltip v-if="monthly_main_image.title && monthly_main_image.title.length > 12" class="item" effect="dark" :content="monthly_main_image.title" placement="top">
+            <div>{{ monthly_main_image.title | ellipsis }}</div>
+          </el-tooltip>
+          <div v-else>{{ monthly_main_image.title | ellipsis }}</div>
+          <div class="monthly-main-date">{{ monthly_main_image.gmtCreate }}</div>
+        </div>
+        <div class="demo-image__placeholder" style="padding: 20px 0;">
+          <div class="block" style="text-align: center;max-height: calc(100vh - 211px); overflow-y: auto;">
+            <el-image :src="monthly_main_image.content" />
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+    <addMonthly v-if="show" :show.sync="show" :title="title" @monthly_created="monthly_created" />
+  </el-container>
+</template>
+
+<script>
+import logoUrl from '@/assets/内页logo2@2x.png'
+import addMonthly from './components/createdMonthly.vue'
+import { materialGetMaterialList, materialDeleteMaterial, materialAddMaterial } from '@/api/monthly/index.js'
+import { verifyIsAdmin } from '@/api/configure.js'
+export default {
+  components: {
+    addMonthly
+  },
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      if (value.length > 12) {
+        return value.slice(0, 12) + '...'
+      }
+      return value
+    }
+  },
+  data() {
+    return {
+      logo: logoUrl,
+      title: '',
+      show: false,
+      monthly_show: false,
+      monthly_nav_query: '',
+      monthly_main_image: '',
+      monthly_nav_list: []
+    }
+  },
+  mounted() {
+    this.verifyIsAdmin()
+    this.materialGetMaterialList()
+  },
+  methods: {
+    async verifyIsAdmin() {
+      const res = await verifyIsAdmin()
+      if (res.code === 200) {
+        this.monthly_show = res.data
+      }
+    },
+    async materialGetMaterialList() {
+      const num = this.$route.query.id
+      const res = await materialGetMaterialList({})
+      if (res.code === 200) {
+        this.monthly_nav_list = res.data
+        this.monthly_main_image = this.monthly_nav_list.filter(item => item.id === Number(num))[0]
+      }
+    },
+    monthlyGetData(val) {
+      this.monthly_main_image = this.monthly_nav_list.filter(item => item.id === Number(val.id))[0]
+    },
+    async monthly_query(val) {
+      const res = await materialGetMaterialList({ title: val })
+      if (res.code === 200) {
+        this.monthly_nav_list = res.data
+      }
+    },
+    handleSelect(key, keyPath) {
+      switch (key) {
+        case '1':
+          this.$router.push({ name: 'env' })
+          break
+        case '4' :
+          if (!this.bizId || this.bizId === -1) {
+            this.$router.push({ name: '业务线选择' })
+          } else {
+            this.$router.push({ name: '项目' })
+          }
+          break
+        case '9':
+          this.$router.push({ name: 'Interface' })
+          break
+      }
+    },
+    monthlyDelete(id) {
+      this.$confirm('确认删除此素材?', '移除确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await materialDeleteMaterial({ id: id })
+        if (res.code === 200) {
+          this.materialGetMaterialList()
+          this.$message({ type: 'success', message: '删除成功!' })
+        }
+      }).catch(() => {
+        this.$message({ type: 'info', message: '已取消删除' })
+      })
+    },
+    async monthly_created(data) {
+      console.log(data, 'cdbjksbkj')
+      const res = await materialAddMaterial(data)
+      if (res.code === 200) {
+        this.materialGetMaterialList()
+        this.$message({ type: 'success', message: '创建成功!' })
+      }
+    },
+    addMonthly() {
+      this.title = '新建'
+      this.show = true
+      console.log(this.show)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.monthly-title {
+  background: #409eff;
+  line-height: 60px;
+  color: #FFFFFF;
+  font-size: 14px;
+  display: flex;
+  justify-content: flex-start;
+}
+.monthly-zhihui {
+  width: 215px;
+  text-align: center;
+  color: #FFFFFF;
+  font-weight: 600;
+  font-size: 20pt;
+  cursor: pointer;
+  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+  }
+.monthly-nav {
+  cursor: pointer;
+  margin-right: 100px;
+  padding: 0 10px;
+}
+.monthly-nav:hover {
+  background: #1e89f7;
+}
+.monthly-main {
+  width: 215px;
+  min-height: calc(100vh - 60px);
+  border: 10px solid #f2f3f6;
+}
+.monthly-main-title {
+  border-bottom: 1px solid #ccc;
+  font-family: PingFangSC-Medium;
+  padding-bottom: 20px;
+  font-size: 20px;
+  color: #333B4A;
+  display: flex;
+  justify-content: space-between;
+}
+.monthly-main-date {
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #666666;
+}
+.monthly-aside-header {
+  margin: 20px;
+}
+.monthly-nav-center {
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+}
+.monthly-hover {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #444444;
+}
+.monthly-hover:hover {
+  color: #1e89f7;
+  cursor: pointer;
+}
+.monthly_icon {
+  color: #1e89f7;
+  cursor: pointer;
+  font-size: 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

src/views/projectManage/components/demand.vue

@@ -158,7 +158,13 @@
     <el-row :gutter="20">
       <el-col v-for="(item, index) in scheduleDetail" :key="index" :span="6"><span class="demandLayout">{{ index }}：</span><span class="demandeta">{{ item.startTime }} ~ {{ item.endTime }}</span></el-col>
     </el-row>
-    <el-row><span class="demandLayout">预计上线版本：</span> <span v-for="item in preOnlineVersion" :key="item" class="demandeta">{{ item }}</span></el-row>
+    <el-row>
+      <span class="demandLayout">预计上线版本：</span>
+      <span v-for="item in preOnlineVersion" :key="item" class="demandeta"> {{ item }} </span>
+      <el-tooltip class="item" effect="dark" content="版本有问题？点击触发重新计算！" placement="right">
+        <svg-icon :icon-class="icon_problem ? 'problem1' : 'problem'" class="cursorPo" @mouseenter="icon_problem = true" @mouseleave="icon_problem = false" @click="requirementUpdatePreOnlineVersion" />
+      </el-tooltip>
+    </el-row>
     <!-- 日期详情 -->
 
     <!-- 排期锁定弹窗 -->
@@ -172,7 +178,7 @@
 import { EncryptId, analysisBizId_id } from '@/utils/crypto-js.js'
 import { mapGetters } from 'vuex'
 import _ from 'lodash'
-import { listByRequire, taskListAvailableDpmTask, taskSetTaskRelated, taskDeleteRelationship, taskShowRelatedDpmTask, taskSyncScheduleToDpm } from '@/api/requirement.js'
+import { listByRequire, taskListAvailableDpmTask, taskSetTaskRelated, taskDeleteRelationship, taskShowRelatedDpmTask, taskSyncScheduleToDpm, requirementUpdatePreOnlineVersion } from '@/api/requirement.js'
 import scheduleList from '@/views/projectManage/components/scheduleList.vue'
 import '@/styles/PublicStyle/index.scss' // 通用css
 import { configShowTaskStatusEnum } from '@/api/taskIndex'
@@ -205,6 +211,7 @@ export default {
   },
   data() {
     return {
+      icon_problem: false,
       requirementId: -1,
       allStatus: [], // task状态
       taskDataList: [], // 同步排期到望岳的任务
@@ -478,6 +485,13 @@ export default {
       this.tableHeader = false
       this.taskList = []
     },
+    async requirementUpdatePreOnlineVersion() {
+      const res = await requirementUpdatePreOnlineVersion(this.requirementId)
+      if (res.code === 200) {
+        this.listByTask(this.requirementId)
+        this.$message({ message: '预计上线版本重新计算中，请稍后刷新页面查看！', type: 'success', offset: 150 })
+      }
+    },
     handleSelectionChange(val) {
       this.taskList = val
       this.taskList.length === this.tableData.length ? this.checkAlls = true : this.checkAlls = false

src/views/projectManage/taskList/components/scheduleList.vue

@@ -100,13 +100,14 @@
     <div class="bottom-detail">
       <el-row>交付日期：{{ scheduleDetail.endTime }}</el-row>
       <el-row>排期：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }}</el-row>
-      <el-row v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length>0">
-        <el-col :span="2">预计上线版本：</el-col>
-        <el-col :span="6">
-          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span><br>
-        </el-col>
+      <el-row>预计上线版本：
+        <span v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length > 0">
+          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span>
+        </span>
+        <el-tooltip class="item" effect="dark" content="版本有问题？点击触发重新计算！" placement="right">
+          <svg-icon :icon-class="icon_problem ? 'problem1' : 'problem'" style="cursor: pointer;" @mouseenter="icon_problem = true" @mouseleave="icon_problem = false" @click="taskUpdatePreOnlineVersion" />
+        </el-tooltip>
       </el-row>
-      <el-row v-else>预计上线版本：</el-row>
     </div>
     <modify-schedule
       v-if="visibleSchedule"
@@ -120,6 +121,7 @@
   </div>
 </template>
 <script>
+import { taskUpdatePreOnlineVersion } from '@/api/taskIndex.js'
 import { EncryptId } from '@/utils/crypto-js.js'
 import { mapGetters } from 'vuex'
 import Sortable from 'sortablejs'
@@ -161,7 +163,9 @@ export default {
   },
   data() {
     return {
+      taskId: '',
       move: move,
+      icon_problem: false,
       scheduleList: [],
       scheduleDetail: {},
       visibleSchedule: false,
@@ -213,11 +217,20 @@ export default {
         this.$message({ message: '移动成功', type: 'success', duration: 1000, offset: 150 })
       }
     },
+    async taskUpdatePreOnlineVersion() {
+      console.log(this.taskId, 'csdcds')
+      const res = await taskUpdatePreOnlineVersion(this.taskId)
+      if (res.code === 200) {
+        this.listByTask(this.taskId)
+        this.$message({ message: '预计上线版本重新计算中，请稍后刷新页面查看！', type: 'success', offset: 150 })
+      }
+    },
     // getType(value) {
     //   const res = this.taskScheduleEvent.find(item => item.code === value) || {}
     //   return res.msg
     // },
     async listByTask(id) { // 获取排期列表
+      this.taskId = id
       const res = await listByTask(id)
       if (res.code === 200) {
         this.scheduleList = res.data.scheduleDetailRespons || []

src/views/quality/components/requireDrawer.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-drawer :title="Statistics.label" :visible.sync="drawer_" :direction="direction" :modal="false" size="100%" :before-close="handleClose">
+    <div class="_font">{{ Statistics.total }}</div>
+    <el-table :data="tableData" style="width: 100%" class="integration-num">
+      <el-table-column label="优先级" min-width="180">
+        <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="Statistics.typeStr + '名称'" min-width="250">
+        <template slot-scope="scope">
+          <div v-if="Statistics.typeStr === '需求' || Statistics.typeStr === '任务'" class="drawer-name" @click="jumper(scope.row)">{{ scope.row.name }}</div>
+          <div v-if="Statistics.typeStr === '缺陷'" class="drawer-name" @click="jumper(scope.row)">{{ scope.row.bugName }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" min-width="180">
+        <template slot-scope="scope">
+          <div v-if="Statistics.typeStr === '需求'">{{ scope.row.statusName }}</div>
+          <div v-if="Statistics.typeStr === '任务'">{{ scope.row.statusString }}</div>
+          <div v-if="Statistics.typeStr === '缺陷'">{{ querySatus(scope.row.status) }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="text-align: center;"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="10"
+      layout="total, sizes, 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'
+export default {
+  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',
+      bugList: [],
+      currentPage: 1,
+      total: 0,
+      paging: {
+        curIndex: 1, // 分页
+        pageSize: 10 // 分页
+      },
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }]
+    }
+  },
+  computed: {
+    drawer_: {
+      get() { return this.drawer },
+      set(v) {
+        console.log(v, 'co')
+        this.$emit('clone', v)
+      }
+    }
+  },
+  watch: {
+    data: {
+      handler(newV, oldV) {
+        this.Statistics = newV
+        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 = []
+      }
+    },
+    querySatus(val) {
+      let data = ''
+      this.bugList.map(item => {
+        if (val === item.code) {
+          data = item.name
+        }
+      })
+      return data
+    },
+    jumper(val) {
+      console.log(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')
+    },
+    async bugGetEnum() {
+      const res = await bugGetEnum()
+      if (res.code === 200) {
+        this.bugList = res.data.bugEnumList
+      }
+    },
+    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;
+}
+._font {
+  font-size: 16px;
+  color: #409eff;
+  margin: 20px 30px;
+}
+>>>.el-drawer__header {
+    color: #444;
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 0px;
+    padding: 20px 30px 0;
+}
+ .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%;
+}
+</style>

src/views/quality/defectStatistics.vue

@@ -1,312 +1,318 @@
 <template>
-  <el-container class="defect-container">
-    <el-header class="defect-main" style="height: auto;">
-      <el-form :model="defectForm" class="demo-form-inline" :inline="true">
-        <el-form-item label="时间：">
-          <div class="date-select">
-            <span :class="[dateType==='week'?'date-active':'']" class="date-item" @click.stop="dateType='week';setDate('week')">本周</span>
-            <span :class="[dateType==='month'?'date-active':'']" class="date-item" @click.stop="dateType='month';setDate('month')">本月</span>
-            <span :class="[dateType==='year'?'date-active':'']" class="date-item" @click.stop="dateType='year';setDate('year')">本年</span>
-          </div>
-          <el-date-picker
-            v-model="stratAndEnd"
-            type="daterange"
-            align="right"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            size="small"
-            value-format="yyyy.MM.dd"
-            :default-time="['00:00:00','23:59:59']"
-            @change="dateType = ''"
-          />
-        </el-form-item>
-      </el-form>
-      <el-form :model="defectForm" class="demo-form-inline" :inline="true">
-        <el-form-item label="责任团队：">
-          <el-select
-            v-model="defectForm.team"
-            placeholder="请选择"
-            size="small"
-            clearable
-            filterable
-            multiple
-          >
-            <el-option-group
-              v-for="group in teamOptions"
-              :key="group.label"
-              :label="group.label"
-            >
-              <el-option
-                v-for="item in group.options"
-                :key="item.teamId"
-                :label="item.teamName"
-                :value="item.teamId"
-              />
-            </el-option-group>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="模块：">
-          <el-cascader
-            v-model="defectForm.moduleIds"
-            size="small"
-            clearable
-            collapse-tags
-            :props="{ multiple: true }"
-            :options="moduleList"
-            placeholder="请选择"
-            @click.native="bugDataGet"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="data-total">
-        <div v-for="(item,index) in Summary" :key="'Summary'+index" class="data-item" :class="['item'+ (index + 1)]">
-          <article>
-            <div class="item-top">
-              <div class="item-circle">
-                <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
-                <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
-                <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">
-                <i class="el-icon-info" />
-              </el-tooltip>
-              <el-tooltip v-if="index === 1" class="item" effect="dark" content="统计时间区间内，缺陷执行过更新状态为“已完成”的操作并且当前缺陷状态是“已完成”的缺陷数量" placement="top-start">
-                <i class="el-icon-info" />
-              </el-tooltip>
-              <el-tooltip v-if="index === 2" class="item" effect="dark" content="统计时间区间内，缺陷执行过更新状态为“Reopen”的操作并且当前缺陷状态为任意状态的缺陷数量" placement="top-start">
-                <i class="el-icon-info" />
-              </el-tooltip>
+  <div @click="drawer = false">
+    <el-container class="defect-container">
+      <el-header class="defect-main" style="height: auto;">
+        <el-form :model="defectForm" class="demo-form-inline" :inline="true">
+          <el-form-item label="时间：">
+            <div class="date-select">
+              <span :class="[dateType==='week'?'date-active':'']" class="date-item" @click.stop="dateType='week';setDate('week')">本周</span>
+              <span :class="[dateType==='month'?'date-active':'']" class="date-item" @click.stop="dateType='month';setDate('month')">本月</span>
+              <span :class="[dateType==='year'?'date-active':'']" class="date-item" @click.stop="dateType='year';setDate('year')">本年</span>
             </div>
-            <div class="item-title">{{ item.total }}</div>
-            <div class="item-line" />
-            <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
-            <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</div>
-            <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
-          </article>
-        </div>
-      </div>
-    </el-header>
-    <el-main class="charts-main">
-      <el-tabs v-model="activeName" @tab-click="tabChange">
-        <el-tab-pane name="first">
-          <span slot="label" class="tab-item">新增缺陷</span>
-        </el-tab-pane>
-        <el-tab-pane name="second">
-          <span slot="label" class="tab-item">累计修复缺陷</span>
-        </el-tab-pane>
-      </el-tabs>
-      <div v-show="activeName === 'first'" class="chart-item">
-        <h3>趋势图</h3>
-        <el-row type="flex" align="middle">
-          <el-col :span="24">
-            <div class="chart-contain">
-              <normal-echart v-if="echartsOption3" :chart-id="'chartThird'" :option="echartsOption3" />
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="chart-item">
-        <h3>分布图</h3>
-        <el-row type="flex" align="middle">
-          <el-col :span="4">
-            <el-select v-model="defectStatus" placeholder="缺陷状态" size="small" @change="defectStatusChange">
-              <el-option
-                v-for="item in defectStatusList"
-                :key="item.code"
-                :disabled="activeTab === 2&&item.code === 1"
-                :label="item.label"
-                :value="item.code"
-              />
+            <el-date-picker
+              v-model="stratAndEnd"
+              type="daterange"
+              align="right"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="small"
+              value-format="yyyy.MM.dd"
+              :default-time="['00:00:00','23:59:59']"
+              @change="dateType = ''"
+            />
+          </el-form-item>
+        </el-form>
+        <el-form :model="defectForm" class="demo-form-inline" :inline="true">
+          <el-form-item label="责任团队：">
+            <el-select
+              v-model="defectForm.team"
+              placeholder="请选择"
+              size="small"
+              clearable
+              filterable
+              multiple
+            >
+              <el-option-group
+                v-for="group in teamOptions"
+                :key="group.label"
+                :label="group.label"
+              >
+                <el-option
+                  v-for="item in group.options"
+                  :key="item.teamId"
+                  :label="item.teamName"
+                  :value="item.teamId"
+                />
+              </el-option-group>
             </el-select>
-          </el-col>
-          <el-col :span="4" :offset="16" class="col-flex-end">
-            <div class="bar-pie" :class="[barOrPie==='bar'?'active':'']" @click="changeBarOrPie('bar')">柱状图</div>
-            <div class="bar-pie" :class="[barOrPie==='pie'?'active':'']" @click="changeBarOrPie('pie')">饼图</div>
-          </el-col>
-        </el-row>
-        <el-row type="flex" align="middle">
-          <el-col :span="24">
-            <div class="chart-contain">
-              <child-chart :show.sync="showChild" :chart-type="barOrPie" :params="childParams" />
-              <normal-echart v-if="echartsOption1" :chart-id="'chartFirst'" :option="echartsOption1" @onClick="echartClick" />
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="chart-item">
-        <h3>平均修复时长</h3>
-        <el-row type="flex" align="middle">
-          <div class="repair-list">
-            <div v-for="(item, index) in repairTimeList" :key="'time'+index" class="repair-item" :class="[Number(item.relativeRatio)<0?'repair-slow':'repair-rise']">
-              <div class="repair-item-point" :class="['point'+index]" />
-              <span>{{ item.label }}</span>
-              <div class="repair-time">{{ item.total }}</div>
-              <div v-show="Number(item.relativeRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.relativeRatio }}%</span></div>
-              <div v-show="Number(item.relativeRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</span></div>
-              <div v-show="item.relativeRatio === '--'" class="repair-up">环比：<span>{{ item.relativeRatio }}%</span></div>
-            </div>
+          </el-form-item>
+          <el-form-item label="模块：">
+            <el-cascader
+              v-model="defectForm.moduleIds"
+              size="small"
+              clearable
+              collapse-tags
+              :props="{ multiple: true }"
+              :options="moduleList"
+              placeholder="请选择"
+              @click.native="bugDataGet"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="data-total">
+          <div v-for="(item,index) in Summary" :key="'Summary'+index" class="data-item" :class="['item'+ (index + 1)]">
+            <article>
+              <div class="item-top">
+                <div class="item-circle">
+                  <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
+                  <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
+                  <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">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+                <el-tooltip v-if="index === 1" class="item" effect="dark" content="统计时间区间内，缺陷执行过更新状态为“已完成”的操作并且当前缺陷状态是“已完成”的缺陷数量" placement="top-start">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+                <el-tooltip v-if="index === 2" class="item" effect="dark" content="统计时间区间内，缺陷执行过更新状态为“Reopen”的操作并且当前缺陷状态为任意状态的缺陷数量" placement="top-start">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+              </div>
+              <div class="item-title" @click.stop="getRequiredNum(item)">{{ item.total }}</div>
+              <div class="item-line" />
+              <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
+              <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</div>
+              <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
+            </article>
           </div>
-        </el-row>
-        <h3>去除节假日的修复时长</h3>
-        <el-row type="flex" align="middle">
-          <div class="repair-list">
-            <div v-for="(item, index) in repairTimeListNoHoliday" :key="'time'+index" class="repair-item" :class="[Number(item.relativeRatio)<0?'repair-slow':'repair-rise']">
-              <div class="repair-item-point" :class="['point'+index]" />
-              <span>{{ item.label }}</span>
-              <div class="repair-time">{{ item.total }}</div>
-              <div v-show="Number(item.relativeRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.relativeRatio }}%</span></div>
-              <div v-show="Number(item.relativeRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</span></div>
-              <div v-show="item.relativeRatio === '--'" class="repair-up">环比：<span>{{ item.relativeRatio }}%</span></div>
+        </div>
+      </el-header>
+      <el-main class="charts-main">
+        <el-tabs v-model="activeName" @tab-click="tabChange">
+          <el-tab-pane name="first">
+            <span slot="label" class="tab-item">新增缺陷</span>
+          </el-tab-pane>
+          <el-tab-pane name="second">
+            <span slot="label" class="tab-item">累计修复缺陷</span>
+          </el-tab-pane>
+        </el-tabs>
+        <div v-show="activeName === 'first'" class="chart-item">
+          <h3>趋势图</h3>
+          <el-row type="flex" align="middle">
+            <el-col :span="24">
+              <div class="chart-contain">
+                <normal-echart v-if="echartsOption3" :chart-id="'chartThird'" :option="echartsOption3" />
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="chart-item">
+          <h3>分布图</h3>
+          <el-row type="flex" align="middle">
+            <el-col :span="4">
+              <el-select v-model="defectStatus" placeholder="缺陷状态" size="small" @change="defectStatusChange">
+                <el-option
+                  v-for="item in defectStatusList"
+                  :key="item.code"
+                  :disabled="activeTab === 2&&item.code === 1"
+                  :label="item.label"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4" :offset="16" class="col-flex-end">
+              <div class="bar-pie" :class="[barOrPie==='bar'?'active':'']" @click="changeBarOrPie('bar')">柱状图</div>
+              <div class="bar-pie" :class="[barOrPie==='pie'?'active':'']" @click="changeBarOrPie('pie')">饼图</div>
+            </el-col>
+          </el-row>
+          <el-row type="flex" align="middle">
+            <el-col :span="24">
+              <div class="chart-contain">
+                <child-chart :show.sync="showChild" :chart-type="barOrPie" :params="childParams" />
+                <normal-echart v-if="echartsOption1" :chart-id="'chartFirst'" :option="echartsOption1" @onClick="echartClick" />
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="chart-item">
+          <h3>平均修复时长</h3>
+          <el-row type="flex" align="middle">
+            <div class="repair-list">
+              <div v-for="(item, index) in repairTimeList" :key="'time'+index" class="repair-item" :class="[Number(item.relativeRatio)<0?'repair-slow':'repair-rise']">
+                <div class="repair-item-point" :class="['point'+index]" />
+                <span>{{ item.label }}</span>
+                <div class="repair-time">{{ item.total }}</div>
+                <div v-show="Number(item.relativeRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.relativeRatio }}%</span></div>
+                <div v-show="Number(item.relativeRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</span></div>
+                <div v-show="item.relativeRatio === '--'" class="repair-up">环比：<span>{{ item.relativeRatio }}%</span></div>
+              </div>
             </div>
-          </div>
-        </el-row>
-        <el-row type="flex" align="middle">
-          <el-col :span="4" class="col-flex-start">
-            <div class="off-holiday" :class="[offOnholiday==='off'?'selected':'']" @click="changeHoliday('off')">去除节假日</div>
-            <div class="on-holiday" :class="[offOnholiday==='on'?'selected':'']" @click="changeHoliday('on')">不去除节假日</div>
-          </el-col>
-          <el-col :span="4" :offset="16" class="col-flex-end">
-            <div class="bar-line" :class="[barOrLine==='line'?'active':'']" @click="changeBarOrLine('line')">折线图</div>
-            <div class="bar-line" :class="[barOrLine==='bar'?'active':'']" @click="changeBarOrLine('bar')">柱状图</div>
-          </el-col>
-        </el-row>
-        <el-row type="flex" align="middle">
-          <el-col :span="24">
-            <div class="chart-contain">
-              <normal-echart v-if="echartsOption2" :chart-id="'chartSecond'" :option="echartsOption2" />
+          </el-row>
+          <h3>去除节假日的修复时长</h3>
+          <el-row type="flex" align="middle">
+            <div class="repair-list">
+              <div v-for="(item, index) in repairTimeListNoHoliday" :key="'time'+index" class="repair-item" :class="[Number(item.relativeRatio)<0?'repair-slow':'repair-rise']">
+                <div class="repair-item-point" :class="['point'+index]" />
+                <span>{{ item.label }}</span>
+                <div class="repair-time">{{ item.total }}</div>
+                <div v-show="Number(item.relativeRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.relativeRatio }}%</span></div>
+                <div v-show="Number(item.relativeRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</span></div>
+                <div v-show="item.relativeRatio === '--'" class="repair-up">环比：<span>{{ item.relativeRatio }}%</span></div>
+              </div>
             </div>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="chart-item">
-        <h3>模块分布</h3>
-        <el-table
-          :data="moduleData"
-          style="width: 100%;margin-bottom: 20px;"
-          row-key="id"
-          :border="false"
-          :max-height="350"
-          :tree-props="{children: 'childModuleDatas', hasChildren: 'hasChildren'}"
-          :header-cell-style="{background: 'rgba(232,232,232,0.6)',color:'#333333'}"
-          class="repair-table"
-          @sort-change="moduleTableSortChange"
-        >
-          <el-table-column prop="name" label="模块" />
-          <el-table-column v-if="activeTab=== 1" prop="newData" label="新增" sortable="custom" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>
-              <span class="repair-span">{{ scope.row.newData.detail[0].label }}:{{ scope.row.newData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.newData.detail[1].label }}:{{ scope.row.newData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="newAndReopenData" label="待修复/Reopen" sortable="custom">
-            <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.newAndReopenData.total }}</span>
-              <span class="repair-span">{{ scope.row.newAndReopenData.detail[0].label }}:{{ scope.row.newAndReopenData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.newAndReopenData.detail[1].label }}:{{ scope.row.newAndReopenData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="waitTestData" label="待测试" sortable="custom">
-            <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.waitTestData.total }}</span>
-              <span class="repair-span">{{ scope.row.waitTestData.detail[0].label }}:{{ scope.row.waitTestData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.waitTestData.detail[1].label }}:{{ scope.row.waitTestData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="repairData" label="已完成" sortable="custom">
-            <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>
-              <span class="repair-span">{{ scope.row.repairData.detail[0].label }}:{{ scope.row.repairData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.repairData.detail[1].label }}:{{ scope.row.repairData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="repairTimeAvgData" label="平均修复时长" min-width="120">
-            <template slot-scope="scope">
-              <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="repairTimeAvgPurgeNhData" label="平均修复时长(去除节假日)" min-width="120">
-            <template slot-scope="scope">
-              <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[0].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[1].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="chart-item">
-        <h3>责任人分布</h3>
-        <el-table
-          :data="memberData"
-          style="width: 100%;margin-bottom: 20px;"
-          row-key="id"
-          :border="false"
-          :max-height="350"
-          :tree-props="{children: 'childModuleDatas', hasChildren: 'hasChildren'}"
-          :header-cell-style="{background: 'rgba(232,232,232,0.6)',color:'#333333'}"
-          class="repair-table"
-          @sort-change="memberTableSortChange"
-        >
-          <el-table-column prop="name" label="姓名" />
-          <el-table-column v-if="activeTab=== 1" prop="newData" label="新增" sortable="custom" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>
-              <span class="repair-span">{{ scope.row.newData.detail[0].label }}:{{ scope.row.newData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.newData.detail[1].label }}:{{ scope.row.newData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="newAndReopenData" label="待修复/Reopen" sortable="custom">
-            <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.newAndReopenData.total }}</span>
-              <span class="repair-span">{{ scope.row.newAndReopenData.detail[0].label }}:{{ scope.row.newAndReopenData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.newAndReopenData.detail[1].label }}:{{ scope.row.newAndReopenData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="waitTestData" label="待测试" sortable="custom">
-            <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.waitTestData.total }}</span>
-              <span class="repair-span">{{ scope.row.waitTestData.detail[0].label }}:{{ scope.row.waitTestData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.waitTestData.detail[1].label }}:{{ scope.row.waitTestData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="repairData" label="已完成" sortable="custom">
-            <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>
-              <span class="repair-span">{{ scope.row.repairData.detail[0].label }}:{{ scope.row.repairData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.repairData.detail[1].label }}:{{ scope.row.repairData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="repairTimeAvgData" label="平均修复时长" min-width="120">
-            <template slot-scope="scope">
-              <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="repairTimeAvgPurgeNhData" label="平均修复时长(去除节假日)" min-width="120">
-            <template slot-scope="scope">
-              <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[0].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[0].total }}</span>
-              <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[1].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[1].total }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
+          </el-row>
+          <el-row type="flex" align="middle">
+            <el-col :span="4" class="col-flex-start">
+              <div class="off-holiday" :class="[offOnholiday==='off'?'selected':'']" @click="changeHoliday('off')">去除节假日</div>
+              <div class="on-holiday" :class="[offOnholiday==='on'?'selected':'']" @click="changeHoliday('on')">不去除节假日</div>
+            </el-col>
+            <el-col :span="4" :offset="16" class="col-flex-end">
+              <div class="bar-line" :class="[barOrLine==='line'?'active':'']" @click="changeBarOrLine('line')">折线图</div>
+              <div class="bar-line" :class="[barOrLine==='bar'?'active':'']" @click="changeBarOrLine('bar')">柱状图</div>
+            </el-col>
+          </el-row>
+          <el-row type="flex" align="middle">
+            <el-col :span="24">
+              <div class="chart-contain">
+                <normal-echart v-if="echartsOption2" :chart-id="'chartSecond'" :option="echartsOption2" />
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="chart-item">
+          <h3>模块分布</h3>
+          <el-table
+            :data="moduleData"
+            style="width: 100%;margin-bottom: 20px;"
+            row-key="id"
+            :border="false"
+            :max-height="350"
+            :tree-props="{children: 'childModuleDatas', hasChildren: 'hasChildren'}"
+            :header-cell-style="{background: 'rgba(232,232,232,0.6)',color:'#333333'}"
+            class="repair-table"
+            @sort-change="moduleTableSortChange"
+          >
+            <el-table-column prop="name" label="模块" />
+            <el-table-column v-if="activeTab=== 1" prop="newData" label="新增" sortable="custom" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>
+                <span class="repair-span">{{ scope.row.newData.detail[0].label }}:{{ scope.row.newData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.newData.detail[1].label }}:{{ scope.row.newData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="newAndReopenData" label="待修复/Reopen" sortable="custom">
+              <template slot-scope="scope">
+                <span class="table-repair-item2 repair-span2">{{ scope.row.newAndReopenData.total }}</span>
+                <span class="repair-span">{{ scope.row.newAndReopenData.detail[0].label }}:{{ scope.row.newAndReopenData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.newAndReopenData.detail[1].label }}:{{ scope.row.newAndReopenData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="waitTestData" label="待测试" sortable="custom">
+              <template slot-scope="scope">
+                <span class="table-repair-item2 repair-span2">{{ scope.row.waitTestData.total }}</span>
+                <span class="repair-span">{{ scope.row.waitTestData.detail[0].label }}:{{ scope.row.waitTestData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.waitTestData.detail[1].label }}:{{ scope.row.waitTestData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="repairData" label="已完成" sortable="custom">
+              <template slot-scope="scope">
+                <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>
+                <span class="repair-span">{{ scope.row.repairData.detail[0].label }}:{{ scope.row.repairData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.repairData.detail[1].label }}:{{ scope.row.repairData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="repairTimeAvgData" label="平均修复时长" min-width="120">
+              <template slot-scope="scope">
+                <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="repairTimeAvgPurgeNhData" label="平均修复时长(去除节假日)" min-width="120">
+              <template slot-scope="scope">
+                <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[0].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[1].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="chart-item">
+          <h3>责任人分布</h3>
+          <el-table
+            :data="memberData"
+            style="width: 100%;margin-bottom: 20px;"
+            row-key="id"
+            :border="false"
+            :max-height="350"
+            :tree-props="{children: 'childModuleDatas', hasChildren: 'hasChildren'}"
+            :header-cell-style="{background: 'rgba(232,232,232,0.6)',color:'#333333'}"
+            class="repair-table"
+            @sort-change="memberTableSortChange"
+          >
+            <el-table-column prop="name" label="姓名" />
+            <el-table-column v-if="activeTab=== 1" prop="newData" label="新增" sortable="custom" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>
+                <span class="repair-span">{{ scope.row.newData.detail[0].label }}:{{ scope.row.newData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.newData.detail[1].label }}:{{ scope.row.newData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="newAndReopenData" label="待修复/Reopen" sortable="custom">
+              <template slot-scope="scope">
+                <span class="table-repair-item2 repair-span2">{{ scope.row.newAndReopenData.total }}</span>
+                <span class="repair-span">{{ scope.row.newAndReopenData.detail[0].label }}:{{ scope.row.newAndReopenData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.newAndReopenData.detail[1].label }}:{{ scope.row.newAndReopenData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="waitTestData" label="待测试" sortable="custom">
+              <template slot-scope="scope">
+                <span class="table-repair-item2 repair-span2">{{ scope.row.waitTestData.total }}</span>
+                <span class="repair-span">{{ scope.row.waitTestData.detail[0].label }}:{{ scope.row.waitTestData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.waitTestData.detail[1].label }}:{{ scope.row.waitTestData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="repairData" label="已完成" sortable="custom">
+              <template slot-scope="scope">
+                <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>
+                <span class="repair-span">{{ scope.row.repairData.detail[0].label }}:{{ scope.row.repairData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.repairData.detail[1].label }}:{{ scope.row.repairData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="repairTimeAvgData" label="平均修复时长" min-width="120">
+              <template slot-scope="scope">
+                <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="repairTimeAvgPurgeNhData" label="平均修复时长(去除节假日)" min-width="120">
+              <template slot-scope="scope">
+                <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[0].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[0].total }}</span>
+                <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[1].label }}:{{ scope.row.repairTimeAvgPurgeNhData.detail[1].total }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-main>
+      <div @click.stop>
+        <require-drawer :drawer="drawer" :data="requireList" @clone="clone" />
       </div>
-    </el-main>
-  </el-container>
+    </el-container>
+  </div>
 </template>
 <script>
 import moment from 'moment'
 moment.locale('zh-cn')
 import { mapGetters } from 'vuex'
+import requireDrawer from './components/requireDrawer'
 import { settingQueryBizModuleList } from '@/api/defectManage'
 import { teamQueryTeamInfoList } from '@/api/configure'
 import {
@@ -323,9 +329,11 @@ import {
 import normalEchart from '@/components/chart/normalEchart'
 import childChart from './components/childCharts'
 export default {
-  components: { normalEchart, childChart },
+  components: { normalEchart, childChart, requireDrawer },
   data() {
     return {
+      drawer: false,
+      requireList: {},
       echartsOption1: null,
       echartsOption2: null,
       echartsOption3: null, // 趋势图
@@ -425,6 +433,7 @@ export default {
       }))
     },
     setDate(type) { // 日期筛选
+      this.drawer = false
       let startDate = null
       let endDate = null
       switch (type) {
@@ -737,6 +746,15 @@ export default {
         column.order === 'ascending' ? this.memberSort = 7 : this.memberSort = 8
       }
       this.getMemberDistributeData()
+    },
+    getRequiredNum(value) {
+      console.log(value, 'cdcsdcd')
+      this.drawer = true
+      value.typeStr = '缺陷'
+      this.requireList = value
+    },
+    clone(v) {
+      this.drawer = v
     }
   }
 }
@@ -825,6 +843,7 @@ export default {
       .item-title {
         font-size: 40px;
         padding: 5% 20px;
+        cursor: pointer;
       }
       .item-up,.item-down {
         font-size: 13px;

src/views/quality/qualityMeasurement.vue

@@ -475,9 +475,9 @@ export default {
   created() {
     this._initBusinessTreeAndBeginInfo()
   },
-  mounted() {
-    document.getElementsByClassName('app-main')[0].style.cssText = 'overflow:auto'
-  },
+  // mounted() {
+  // document.getElementsByClassName('app-main')[0].style.cssText = 'overflow:auto'
+  // },
   methods: {
     // 点击头部导航栏显示默认数据
     async _initBusinessTreeAndBeginInfo() {

src/views/quality/requireStatistics.vue

@@ -1,172 +1,177 @@
 <template>
-  <el-container class="defect-container">
-    <el-header class="defect-main" style="height: auto;">
-      <el-form :model="chartForm" class="demo-form-inline" :inline="true">
-        <el-form-item label="时间：">
-          <div class="date-select">
-            <span :class="[dateType==='week'?'date-active':'']" class="date-item" @click.stop="dateType='week';setDate('week')">本周</span>
-            <span :class="[dateType==='month'?'date-active':'']" class="date-item" @click.stop="dateType='month';setDate('month')">本月</span>
-            <span :class="[dateType==='year'?'date-active':'']" class="date-item" @click.stop="dateType='year';setDate('year')">本年</span>
+  <div @click="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">
+          <el-form-item label="时间：">
+            <div class="date-select">
+              <span :class="[dateType==='week'?'date-active':'']" class="date-item" @click.stop="dateType='week';setDate('week')">本周</span>
+              <span :class="[dateType==='month'?'date-active':'']" class="date-item" @click.stop="dateType='month';setDate('month')">本月</span>
+              <span :class="[dateType==='year'?'date-active':'']" class="date-item" @click.stop="dateType='year';setDate('year')">本年</span>
+            </div>
+            <el-date-picker
+              v-model="stratAndEnd"
+              type="daterange"
+              align="right"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="small"
+              value-format="yyyy.MM.dd"
+              :default-time="['00:00:00','23:59:59']"
+              @change="dateType = ''"
+            />
+          </el-form-item>
+        </el-form>
+        <el-form :model="chartForm" class="demo-form-inline" :inline="true">
+          <el-form-item label="团队：">
+            <el-select
+              v-model="chartForm.team"
+              placeholder="请选择"
+              size="small"
+              clearable
+              filterable
+              multiple
+            >
+              <el-option-group
+                v-for="group in teamOptions"
+                :key="group.label"
+                :label="group.label"
+              >
+                <el-option
+                  v-for="item in group.options"
+                  :key="item.teamId"
+                  :label="item.teamName"
+                  :value="item.teamId"
+                />
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="需求方向：">
+            <el-cascader
+              v-model="chartForm.rqmtOrntIds"
+              size="small"
+              clearable
+              collapse-tags
+              :props="{
+                value: 'id',
+                label: 'rqmtOrntName',
+                children: 'childRqmtOrnts',
+                multiple: true
+              }"
+              :options="moduleList"
+              placeholder="请选择"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="data-total">
+          <div v-for="(item,index) in Summary" :key="'Summary'+index" class="data-item" :class="['item'+ (index + 1)]">
+            <article>
+              <div class="item-top">
+                <div class="item-circle">
+                  <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
+                  <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
+                  <img v-show="index === 2" src="../../../src/assets/defect_images/reopen.png">
+                  <img v-show="index === 3" 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">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+                <el-tooltip v-if="index === 1" class="item" effect="dark" content="需求最近一次更新状态为“PRD评审通过”在统计区间内，并且当前状态是“PRD评审通过”及之后状态的需求数量" placement="top-start">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+                <el-tooltip v-if="index === 2" class="item" effect="dark" content="需求最近一次更新状态为“已上线”在统计区间内，并且当前状态是“已上线”及之后状态的需求数量" placement="top-start">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+                <el-tooltip v-if="index === 3" class="item" effect="dark" content="需求最近一次更新状态为“Hold”在统计区间内，并且当前状态为“Hold”的需求数量" placement="top-start">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+              </div>
+              <div class="item-title" @click.stop="getRequiredNum(item)">{{ item.total }}</div>
+              <div class="item-line" />
+              <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
+              <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</div>
+              <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
+            </article>
           </div>
-          <el-date-picker
-            v-model="stratAndEnd"
-            type="daterange"
-            align="right"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            size="small"
-            value-format="yyyy.MM.dd"
-            :default-time="['00:00:00','23:59:59']"
-            @change="dateType = ''"
+        </div>
+        <div class="chart-item bottom-padding">
+          <h3>状态累积流量图</h3>
+          <status-chart :chart-data="cumulativeData" />
+        </div>
+      </el-header>
+      <el-main class="charts-main">
+        <el-tabs v-model="activeTab" class="tab-change" @tab-click="onSubmit">
+          <el-tab-pane v-for="item in countTitle" :key="'countTitle'+item.code" :name="item.code+''">
+            <span slot="label" class="tab-item">{{ item.msg }}</span>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="chart-item">
+          <h3 v-show="activeTab === '1'">新增趋势图</h3>
+          <h3 v-show="activeTab === '2'">上线趋势图</h3>
+          <h3 v-show="activeTab === '3'">PRD评审趋势图</h3>
+          <h3 v-show="activeTab === '5'">技术准入趋势图</h3>
+          <tendency-chart :chart-data="tendencyData" />
+        </div>
+        <div class="chart-item">
+          <h3>周期统计<span>（根据排期计算）</span></h3>
+          <!-- <div class="chart-item-tip">
+            <i class="el-icon-warning-outline" />
+            <span>仅统计状态已变更“已排期”且排期不为空的需求</span>
+          </div> -->
+          <cycle-statistic :chart-data="cycleData" />
+        </div>
+        <div class="chart-item">
+          <h3>周期分布图<span>（根据排期计算）</span></h3>
+          <!-- <div class="chart-item-tip">
+            <i class="el-icon-warning-outline" />
+            <span>仅统计状态已变更“已排期”且排期不为空的需求；横坐标表示需求交付日期，纵坐标代表研发交付周期（研发、联调、上线类型排期的总周期)</span>
+          </div> -->
+          <development-cycle
+            :chart-data="developmentCycleData"
+            type="require"
+            :graph-type.sync="graphType"
+            :graph-type-list="graphTypeList"
+            @change="getDevelopmentCycle()"
           />
-        </el-form-item>
-      </el-form>
-      <el-form :model="chartForm" class="demo-form-inline" :inline="true">
-        <el-form-item label="团队：">
-          <el-select
-            v-model="chartForm.team"
-            placeholder="请选择"
-            size="small"
-            clearable
-            filterable
-            multiple
-          >
-            <el-option-group
-              v-for="group in teamOptions"
-              :key="group.label"
-              :label="group.label"
-            >
-              <el-option
-                v-for="item in group.options"
-                :key="item.teamId"
-                :label="item.teamName"
-                :value="item.teamId"
-              />
-            </el-option-group>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="需求方向：">
-          <el-cascader
-            v-model="chartForm.rqmtOrntIds"
-            size="small"
-            clearable
-            collapse-tags
-            :props="{
-              value: 'id',
-              label: 'rqmtOrntName',
-              children: 'childRqmtOrnts',
-              multiple: true
-            }"
-            :options="moduleList"
-            placeholder="请选择"
+        </div>
+        <div class="chart-item">
+          <h3>需求分布图</h3>
+          <distribution-chart
+            :chart-data="distributeData"
+            :status-list="distributeStatusList"
+            :status.sync="distributeStatus"
+            :active-tab="activeTab"
+            @change="getDistributeData()"
           />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="data-total">
-        <div v-for="(item,index) in Summary" :key="'Summary'+index" class="data-item" :class="['item'+ (index + 1)]">
-          <article>
-            <div class="item-top">
-              <div class="item-circle">
-                <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
-                <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
-                <img v-show="index === 2" src="../../../src/assets/defect_images/reopen.png">
-                <img v-show="index === 3" 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">
-                <i class="el-icon-info" />
-              </el-tooltip>
-              <el-tooltip v-if="index === 1" class="item" effect="dark" content="需求最近一次更新状态为“PRD评审通过”在统计区间内，并且当前状态是“PRD评审通过”及之后状态的需求数量" placement="top-start">
-                <i class="el-icon-info" />
-              </el-tooltip>
-              <el-tooltip v-if="index === 2" class="item" effect="dark" content="需求最近一次更新状态为“已上线”在统计区间内，并且当前状态是“已上线”及之后状态的需求数量" placement="top-start">
-                <i class="el-icon-info" />
-              </el-tooltip>
-              <el-tooltip v-if="index === 3" class="item" effect="dark" content="需求最近一次更新状态为“Hold”在统计区间内，并且当前状态为“Hold”的需求数量" placement="top-start">
-                <i class="el-icon-info" />
-              </el-tooltip>
-            </div>
-            <div class="item-title">{{ item.total }}</div>
-            <div class="item-line" />
-            <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
-            <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</div>
-            <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
-          </article>
         </div>
+        <div class="chart-item">
+          <h3>状态停留分布图</h3>
+          <status-stay-chart :chart-data="statusStayData" />
+        </div>
+        <div class="chart-item">
+          <h3>需求方向分布图</h3>
+          <belong-chart :chart-data="orntDistributeData" />
+        </div>
+        <div class="chart-item">
+          <h3>排期发生变更的需求（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
+          <change-require-chart :chart-data="changeRequireData" type-name="需求" />
+        </div>
+        <div class="chart-item">
+          <h3>缺陷统计</h3>
+          <bug-list :chart-data="bugListData" />
+        </div>
+      </el-main>
+      <div @click.stop>
+        <require-drawer :drawer="drawer" :data="requireList" @clone="clone" />
       </div>
-      <div class="chart-item bottom-padding">
-        <h3>状态累积流量图</h3>
-        <status-chart :chart-data="cumulativeData" />
-      </div>
-    </el-header>
-    <el-main class="charts-main">
-      <el-tabs v-model="activeTab" class="tab-change" @tab-click="onSubmit">
-        <el-tab-pane v-for="item in countTitle" :key="'countTitle'+item.code" :name="item.code+''">
-          <span slot="label" class="tab-item">{{ item.msg }}</span>
-        </el-tab-pane>
-      </el-tabs>
-      <div class="chart-item">
-        <h3 v-show="activeTab === '1'">新增趋势图</h3>
-        <h3 v-show="activeTab === '2'">上线趋势图</h3>
-        <h3 v-show="activeTab === '3'">PRD评审趋势图</h3>
-        <h3 v-show="activeTab === '5'">技术准入趋势图</h3>
-        <tendency-chart :chart-data="tendencyData" />
-      </div>
-      <div class="chart-item">
-        <h3>周期统计<span>（根据排期计算）</span></h3>
-        <!-- <div class="chart-item-tip">
-          <i class="el-icon-warning-outline" />
-          <span>仅统计状态已变更“已排期”且排期不为空的需求</span>
-        </div> -->
-        <cycle-statistic :chart-data="cycleData" />
-      </div>
-      <div class="chart-item">
-        <h3>周期分布图<span>（根据排期计算）</span></h3>
-        <!-- <div class="chart-item-tip">
-          <i class="el-icon-warning-outline" />
-          <span>仅统计状态已变更“已排期”且排期不为空的需求；横坐标表示需求交付日期，纵坐标代表研发交付周期（研发、联调、上线类型排期的总周期)</span>
-        </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>
-        <distribution-chart
-          :chart-data="distributeData"
-          :status-list="distributeStatusList"
-          :status.sync="distributeStatus"
-          :active-tab="activeTab"
-          @change="getDistributeData()"
-        />
-      </div>
-      <div class="chart-item">
-        <h3>状态停留分布图</h3>
-        <status-stay-chart :chart-data="statusStayData" />
-      </div>
-      <div class="chart-item">
-        <h3>需求方向分布图</h3>
-        <belong-chart :chart-data="orntDistributeData" />
-      </div>
-      <div class="chart-item">
-        <h3>排期发生变更的需求（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
-        <change-require-chart :chart-data="changeRequireData" type-name="需求" />
-      </div>
-      <div class="chart-item">
-        <h3>缺陷统计</h3>
-        <bug-list :chart-data="bugListData" />
-      </div>
-    </el-main>
-  </el-container>
+    </el-container>
+  </div>
 </template>
 <script>
 import moment from 'moment'
@@ -187,6 +192,7 @@ import {
   getReqUnlockData,
   getBugStatisticData
 } from '@/api/statisticsApi/requireStatistics'
+import requireDrawer from './components/requireDrawer'
 import statusChart from './components/statusChart'
 import tendencyChart from './components/tendencyChart'
 import cycleStatistic from './components/cycleStatistic'
@@ -206,10 +212,13 @@ export default {
     statusStayChart,
     belongChart,
     changeRequireChart,
-    bugList
+    bugList,
+    requireDrawer
   },
   data() {
     return {
+      drawer: false,
+      requireList: {},
       bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
       timeTypeList: [ // 日期选择
         { code: 1, label: '周' },
@@ -326,6 +335,7 @@ export default {
       this.getBugStatisticData()
     },
     setDate(type) { // 日期筛选
+      this.drawer = false
       let startDate = null
       let endDate = null
       switch (type) {
@@ -474,6 +484,14 @@ export default {
       }
       const res = await getBugStatisticData(params)
       if (res.code === 200) this.bugListData = res.data
+    },
+    getRequiredNum(value) {
+      this.drawer = true
+      value.typeStr = '需求'
+      this.requireList = value
+    },
+    clone(v) {
+      this.drawer = v
     }
   }
 }
@@ -569,6 +587,7 @@ export default {
     .item-title {
       font-size: 40px;
       padding: 5% 20px;
+      cursor: pointer;
     }
     .item-up,.item-down {
       font-size: 13px;

src/views/quality/taskStatistics.vue

@@ -1,178 +1,184 @@
 <template>
-  <el-container class="defect-container">
-    <el-header class="defect-main" style="height: auto;">
-      <el-form :model="chartForm" class="demo-form-inline" :inline="true">
-        <el-form-item label="时间：">
-          <div class="date-select">
-            <span :class="[dateType==='week'?'date-active':'']" class="date-item" @click.stop="dateType='week';setDate('week')">本周</span>
-            <span :class="[dateType==='month'?'date-active':'']" class="date-item" @click.stop="dateType='month';setDate('month')">本月</span>
-            <span :class="[dateType==='year'?'date-active':'']" class="date-item" @click.stop="dateType='year';setDate('year')">本年</span>
-          </div>
-          <el-date-picker
-            v-model="stratAndEnd"
-            type="daterange"
-            align="right"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            size="small"
-            value-format="yyyy.MM.dd"
-            :default-time="['00:00:00','23:59:59']"
-            @change="dateType = ''"
-          />
-        </el-form-item>
+  <div @click="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">
+          <el-form-item label="时间：">
+            <div class="date-select">
+              <span :class="[dateType==='week'?'date-active':'']" class="date-item" @click.stop="dateType='week';setDate('week')">本周</span>
+              <span :class="[dateType==='month'?'date-active':'']" class="date-item" @click.stop="dateType='month';setDate('month')">本月</span>
+              <span :class="[dateType==='year'?'date-active':'']" class="date-item" @click.stop="dateType='year';setDate('year')">本年</span>
+            </div>
+            <el-date-picker
+              v-model="stratAndEnd"
+              type="daterange"
+              align="right"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="small"
+              value-format="yyyy.MM.dd"
+              :default-time="['00:00:00','23:59:59']"
+              @change="dateType = ''"
+            />
+          </el-form-item>
 
-      </el-form>
-      <el-form :model="chartForm" class="demo-form-inline" :inline="true">
-        <el-form-item label="团队：">
-          <el-select
-            v-model="chartForm.team"
-            placeholder="请选择"
-            size="small"
-            clearable
-            filterable
-            multiple
-          >
-            <el-option-group
-              v-for="group in teamOptions"
-              :key="group.label"
-              :label="group.label"
+        </el-form>
+        <el-form :model="chartForm" class="demo-form-inline" :inline="true">
+          <el-form-item label="团队：">
+            <el-select
+              v-model="chartForm.team"
+              placeholder="请选择"
+              size="small"
+              clearable
+              filterable
+              multiple
             >
-              <el-option
-                v-for="item in group.options"
-                :key="item.teamId"
-                :label="item.teamName"
-                :value="item.teamId"
-              />
-            </el-option-group>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="技术模块：">
-          <el-cascader
-            v-model="chartForm.moduleIds"
-            size="small"
-            clearable
-            collapse-tags
-            :props="{ multiple: true }"
-            :options="moduleList"
-            placeholder="请选择"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="data-total">
-        <div v-for="(item,index) in Summary" :key="'Summary'+index" class="data-item" :class="['item'+ (index + 1)]">
-          <article>
-            <div class="item-top">
-              <div class="item-circle">
-                <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
-                <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
-                <img v-show="index === 2" src="../../../src/assets/defect_images/reopen.png">
+              <el-option-group
+                v-for="group in teamOptions"
+                :key="group.label"
+                :label="group.label"
+              >
+                <el-option
+                  v-for="item in group.options"
+                  :key="item.teamId"
+                  :label="item.teamName"
+                  :value="item.teamId"
+                />
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="技术模块：">
+            <el-cascader
+              v-model="chartForm.moduleIds"
+              size="small"
+              clearable
+              collapse-tags
+              :props="{ multiple: true }"
+              :options="moduleList"
+              placeholder="请选择"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="data-total">
+          <div v-for="(item,index) in Summary" :key="'Summary'+index" class="data-item" :class="['item'+ (index + 1)]">
+            <article>
+              <div class="item-top">
+                <div class="item-circle">
+                  <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
+                  <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
+                  <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">
+                  <i class="el-icon-info" />
+                </el-tooltip>
+                <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">
+                  <i class="el-icon-info" />
+                </el-tooltip>
               </div>
-              <span>{{ item.label }}</span>
-              <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">
-                <i class="el-icon-info" />
-              </el-tooltip>
-              <el-tooltip v-if="index === 2" class="item" effect="dark" content="任务最近一次更新状态为“Hold”在统计区间内，并且当前状态是“Hold”的任务数量" placement="top">
-                <i class="el-icon-info" />
-              </el-tooltip>
-            </div>
-            <div class="item-title">{{ item.total }}</div>
-            <div class="item-line" />
-            <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
-            <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</div>
-            <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
-          </article>
+              <div class="item-title" @click.stop="getRequiredNum(item)">{{ item.total }}</div>
+              <div class="item-line" />
+              <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
+              <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio.substring(1,item.relativeRatio.length) }}%</div>
+              <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
+            </article>
+          </div>
         </div>
+        <div class="chart-item bottom-padding">
+          <h3>状态累积流量图</h3>
+          <status-chart :chart-data="cumulativeData" />
+        </div>
+      </el-header>
+      <el-main class="charts-main">
+        <el-tabs v-model="activeTab" class="tab-change" @tab-click="onSubmit">
+          <el-tab-pane name="1">
+            <span slot="label" class="tab-item">累计新增</span>
+          </el-tab-pane>
+          <el-tab-pane name="2">
+            <span slot="label" class="tab-item">累计上线</span>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="chart-item">
+          <h3 v-show="activeTab === '1'">新增趋势图</h3>
+          <h3 v-show="activeTab === '2'">上线趋势图</h3>
+          <tendency-chart :chart-data="tendencyData" type-title="任务数量" />
+        </div>
+        <div class="chart-item">
+          <h3>所属需求方向分布图</h3>
+          <belong-requirement-chart :chart-data="belongRequirementData" />
+        </div>
+        <div class="chart-item">
+          <h3>周期统计<span>（根据排期计算）</span></h3>
+          <!-- <div class="chart-item-tip">
+            <i class="el-icon-warning-outline" />
+            <span>仅统计状态已变更“已排期”且排期不为空的任务</span>
+          </div> -->
+          <cycle-statistic :chart-data="cycleData" type="task" />
+        </div>
+        <div class="chart-item">
+          <h3>周期&等待时长分布图<span>（根据排期计算）</span></h3>
+          <!-- <div class="chart-item-tip">
+            <i class="el-icon-warning-outline" />
+            <span>仅统计状态已变更“已排期”且排期不为空的任务；横坐标表示任务交付日期，纵坐标代表研发交付周期（研发、联调、上线类型排期的总周期)</span>
+          </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>
+          <distribution-chart
+            :chart-data="distributeData"
+            :status-list="distributeStatusList"
+            :status.sync="distributeStatus"
+            :active-tab="activeTab"
+            @change="getDistributeData()"
+          />
+        </div>
+        <div class="chart-item">
+          <h3>状态停留分布图</h3>
+          <status-stay-chart :chart-data="statusStayData" />
+        </div>
+        <div class="chart-item">
+          <h3>模块分布图</h3>
+          <belong-chart :chart-data="moduleDistributeData" />
+        </div>
+        <div class="chart-item">
+          <h3>排期发生变更的任务（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
+          <change-require-chart :chart-data="changeTaskData" type-name="任务" />
+        </div>
+        <div class="chart-item">
+          <h3>报告统计</h3>
+          <cycle-statistic :chart-data="reportSummaryData" child-data="relativeRatio" :show-tips="false" />
+        </div>
+        <div class="chart-item">
+          <h3>缺陷统计</h3>
+          <bug-list :chart-data="bugListData" />
+        </div>
+      </el-main>
+      <div @click.stop>
+        <require-drawer :drawer="drawer" :data="requireList" @clone="clone" />
       </div>
-      <div class="chart-item bottom-padding">
-        <h3>状态累积流量图</h3>
-        <status-chart :chart-data="cumulativeData" />
-      </div>
-    </el-header>
-    <el-main class="charts-main">
-      <el-tabs v-model="activeTab" class="tab-change" @tab-click="onSubmit">
-        <el-tab-pane name="1">
-          <span slot="label" class="tab-item">累计新增</span>
-        </el-tab-pane>
-        <el-tab-pane name="2">
-          <span slot="label" class="tab-item">累计上线</span>
-        </el-tab-pane>
-      </el-tabs>
-      <div class="chart-item">
-        <h3 v-show="activeTab === '1'">新增趋势图</h3>
-        <h3 v-show="activeTab === '2'">上线趋势图</h3>
-        <tendency-chart :chart-data="tendencyData" type-title="任务数量" />
-      </div>
-      <div class="chart-item">
-        <h3>所属需求方向分布图</h3>
-        <belong-requirement-chart :chart-data="belongRequirementData" />
-      </div>
-      <div class="chart-item">
-        <h3>周期统计<span>（根据排期计算）</span></h3>
-        <!-- <div class="chart-item-tip">
-          <i class="el-icon-warning-outline" />
-          <span>仅统计状态已变更“已排期”且排期不为空的任务</span>
-        </div> -->
-        <cycle-statistic :chart-data="cycleData" type="task" />
-      </div>
-      <div class="chart-item">
-        <h3>周期&等待时长分布图<span>（根据排期计算）</span></h3>
-        <!-- <div class="chart-item-tip">
-          <i class="el-icon-warning-outline" />
-          <span>仅统计状态已变更“已排期”且排期不为空的任务；横坐标表示任务交付日期，纵坐标代表研发交付周期（研发、联调、上线类型排期的总周期)</span>
-        </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>
-        <distribution-chart
-          :chart-data="distributeData"
-          :status-list="distributeStatusList"
-          :status.sync="distributeStatus"
-          :active-tab="activeTab"
-          @change="getDistributeData()"
-        />
-      </div>
-      <div class="chart-item">
-        <h3>状态停留分布图</h3>
-        <status-stay-chart :chart-data="statusStayData" />
-      </div>
-      <div class="chart-item">
-        <h3>模块分布图</h3>
-        <belong-chart :chart-data="moduleDistributeData" />
-      </div>
-      <div class="chart-item">
-        <h3>排期发生变更的任务（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
-        <change-require-chart :chart-data="changeTaskData" type-name="任务" />
-      </div>
-      <div class="chart-item">
-        <h3>报告统计</h3>
-        <cycle-statistic :chart-data="reportSummaryData" child-data="relativeRatio" :show-tips="false" />
-      </div>
-      <div class="chart-item">
-        <h3>缺陷统计</h3>
-        <bug-list :chart-data="bugListData" />
-      </div>
-    </el-main>
-  </el-container>
+    </el-container>
+  </div>
 </template>
 <script>
 import moment from 'moment'
 moment.locale('zh-cn')
 import { mapGetters } from 'vuex'
+import requireDrawer from './components/requireDrawer'
 import { settingQueryBizModuleList } from '@/api/defectManage'
 import { teamQueryTeamInfoList } from '@/api/configure'
 import {
@@ -210,10 +216,13 @@ export default {
     statusStayChart,
     belongChart,
     changeRequireChart,
-    bugList
+    bugList,
+    requireDrawer
   },
   data() {
     return {
+      drawer: false,
+      requireList: {},
       bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
       timeTypeList: [ // 日期选择
         { code: 1, label: '周' },
@@ -331,6 +340,7 @@ export default {
       this.getBugStatisticData()
     },
     setDate(type) { // 日期筛选
+      this.drawer = false
       let startDate = null
       let endDate = null
       switch (type) {
@@ -491,6 +501,14 @@ export default {
       }
       const res = await getBugStatisticData(params)
       if (res.code === 200) this.bugListData = res.data
+    },
+    getRequiredNum(value) {
+      this.drawer = true
+      value.typeStr = '任务'
+      this.requireList = value
+    },
+    clone(v) {
+      this.drawer = v
     }
   }
 }
@@ -586,6 +604,7 @@ export default {
     .item-title {
       font-size: 40px;
       padding: 5% 20px;
+      cursor: pointer;
     }
     .item-up,.item-down {
       font-size: 13px;

src/views/workbench/team/index.vue

@@ -554,14 +554,16 @@ export default {
           const colorObj = this.mapMemberColor.get(item.peopleObject.idap)
           const title = item.origin ? '日程：' : '排期：'
           let require = ''
+          let task = ''
           if (item.requireList && item.requireList.length > 0) {
             require = `所属需求：${item.requireList.map(item => item.name).join('，')}`
-          } else if (item.taskList && item.taskList.length > 0) {
-            require = `所属任务：${item.taskList.map(item => item.name).join('，')}`
+          }
+          if (item.taskList && item.taskList.length > 0) {
+            task = `所属任务：${item.taskList.map(item => item.name).join('，')}`
           }
           return {
             id: item.id,
-            title: `${title}【${item.peopleObject.name}】${item.name} ${item.desc ? '：' + item.desc : ''}; ${item.origin ? '' : require}`,
+            title: `${title}【${item.peopleObject.name}】${item.name} ${item.desc ? '：' + item.desc : ''}; ${item.origin ? '' : require + ';'} ${task}`,
             start: moment(item.startTime).toDate(),
             end: moment(item.endTime).add(1, 'day').toDate(),
             detailData: item,