test

src/api/requirement.js

@@ -363,3 +363,21 @@ export function getPerson(data) {
     data
   })
 }
+
+// 获取chart视图数据
+export function getChartData(data) {
+  return request({
+    url: requestIp + `/requirement/queryRequirementStatisticInfoList`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取chart视图数据
+export function getChartListData(data) {
+  return request({
+    url: requestIp + `/requirement/queryRequirementStatisticDetail`,
+    method: 'post',
+    data
+  })
+}

src/components/chartView/index.vue

@@ -3,17 +3,7 @@
     <div class="chartSearchbar inlineBetween">
       <div class="inlineBetween">
         <div class="subtitle" style="width: 200px">
-          未开始的任务
-          <!-- <span class="label">分布类型：</span>
-          <el-select
-            v-model="chartSearchData.viewType"
-            size="small"
-            filterable
-            style="width: 115px"
-            @change="$emit('search', 'type', type)"
-          >
-            <el-option v-for="(t, index) in typeOptionList" :key="index" :label="t.label" :value="t.value" />
-          </el-select> -->
+          {{ data.title }}
         </div>
         <div class="tip">
           <span v-for="item in data.option" :key="item.key" class="item">
@@ -34,7 +24,7 @@
           size="small"
           filterable
           style="width: 115px"
-          @change="$emit('search', 'type', type)"
+          @change="$emit('search')"
         >
           <el-option v-for="(t, index) in typeOptionList" :key="index" :label="t.label" :value="t.value" />
         </el-select>

src/components/filterModal/index.vue

@@ -46,12 +46,9 @@ export default {
   },
   methods: {
     confirm() {
-      this.$emit('update:showDialog', this.visible)
-      this.$emit('confirm', true)
+      this.$emit('confirm')
     },
     cancel() {
-      this.visible = false
-      this.$emit('update:showDialog', this.visible)
       this.$emit('cancel', false)
     }
   }

src/views/projectManage/requirement/list/index.vue

@@ -13,13 +13,14 @@
           :data="chartData"
           :type-option-list="typeOptionList"
           :chart-search-data="searchForm"
-          @changeList="(code) => console.log(code)"
+          @search="get_charts()"
+          @changeList="(code) => get_chartListDetial(code)"
         >
           <div slot="searchBox">
             <div class="Layout">
               <div class="Layout">
                 <div class="queryName marginLeft">需求方向</div>
-                <el-cascader v-model="searchForm.rqmtOrntIds" size="small" collapse-tags :props="props" :options="demandDirection" placeholder="请选择" style="width: 72%" @change="getTableData()" />
+                <el-cascader v-model="searchForm.rqmtOrntIds" size="small" collapse-tags :props="props" :options="demandDirection" placeholder="请选择" style="width: 72%" @change="get_charts()" />
               </div>
               <span class="screen" @click="showChartModal = true">更多筛选</span>
             </div>
@@ -186,12 +187,13 @@
       </div>
     </div>
     <div class="stylus-content">
+      <div v-if="nowTab === 'charts'" class="subtitle">{{ tableTitle }}</div>
       <el-table
         v-loading="loading"
         :data="tableData"
         style="width: 100%"
         highlight-current-row
-        :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }"
+        :header-cell-style="{ 'background': nowTab === 'charts' ? '#F7F7F7' : '#fff', 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }"
         :cell-style="{ 'font-size':'14px','color':'rgba(102,102,102,1)' }"
         size="small"
         show-overflow-tooltip="true"
@@ -267,7 +269,7 @@
     <normal-dialog :show-footer="false" :show-dialog="showEditSearch" :title="'管理过滤器'" :width="'65%'" @cancel="showEditSearch=false">
       <filter-list :show-filter="showEditSearch" @deleteFilter="deleteFilter" />
     </normal-dialog>
-    <filterModal :show-dialog="showChartModal" @cancel="showChartModal = false">
+    <filterModal :show-dialog="showChartModal" @cancel="showChartModal = false"  @confirm="filterModalConfirm()">
       <div>
         <chartSearchForm
           :data="chartSearchFormRenderData"
@@ -294,7 +296,9 @@ import {
   filterCreateFilter,
   filtergetFilterList,
   filterGetFilter,
-  getPerson
+  getPerson,
+  getChartListData,
+  getChartData
 } from '@/api/requirement.js'
 import { deepClone } from '@/utils/global'
 import RequirementCreate from './create'
@@ -384,6 +388,7 @@ export default {
       requiredStatus: [], // 需求状态option
       demandDirection: [], // 需求方向option
       searchForm: {
+        viewType: '0',
         containStatus: [] // 包含
       }, // 查询字段
       pageSize: 15,
@@ -399,9 +404,12 @@ export default {
       typeOptionList: [
         { value: '0', label: '需求状态' },
         { value: '1', label: '需求等级' },
-        { value: '2', label: '需求类型' }
+        { value: '2', label: '需求类型' },
+        { value: '3', label: 'pm' },
+        { value: '4', label: '跟版客户端' }
       ],
       showChartModal: false,
+      tableTitle: '',
       chartSearchFormRenderData: _.cloneDeep(chartSearchFormData)
     }
   },
@@ -429,31 +437,34 @@ export default {
     this.$store.state.data.status = false
   },
   methods: {
+    filterModalConfirm() {
+      this.showChartModal = false
+      this.get_charts()
+    },
     logHandle(d) {
       window.log({ c: 'requirement', d })
     },
     changeTab(e) {
       this.nowTab = e
       if (this.nowTab === 'charts') {
-        // this.$emit('chartSearch')
-        this.updateChartSearchFormValue()
-        console.log('charts')
+        this.get_charts()
       } else {
+        this.chartData = {}
         this.getTableData()
       }
     },
-    getTableData() { // 查询
+    get_charts() {
+      this.updateChartSearchFormValue()
+      this.getSearchFormHandle()
+      this.get_chartList()
+    },
+    getSearchFormHandle() {
       if (this.bizId === -1) return
       for (const key in this.searchForm) { // 接口不接受空值的处理
         if (this.searchForm[key] === '' || this.searchForm[key] === null) {
           delete this.searchForm[key]
         }
       }
-      // if (this.requirementName) { // 判断需求名称
-      //   this.searchForm.name = this.requirementName
-      // } else {
-      //   this.searchForm.name = ''
-      // }
       if (this.searchForm.date) {
         this.searchForm.createStartTime = this.searchForm.date[0]
         this.searchForm.createEndTime = this.searchForm.date[1]
@@ -466,13 +477,49 @@ export default {
 
       this.searchForm.pageSize = this.pageSize
       this.searchForm.curIndex = this.curIndex
+    },
+    getTableData() { // 查询
+      // if (this.bizId === -1) return
+      // for (const key in this.searchForm) { // 接口不接受空值的处理
+      //   if (this.searchForm[key] === '' || this.searchForm[key] === null) {
+      //     delete this.searchForm[key]
+      //   }
+      // }
+      // if (this.searchForm.date) {
+      //   this.searchForm.createStartTime = this.searchForm.date[0]
+      //   this.searchForm.createEndTime = this.searchForm.date[1]
+      // } else {
+      //   delete this.searchForm.createStartTime
+      //   delete this.searchForm.createEndTime
+      // }
+      // this.searchForm.bizId = this.bizId
+      // this.loading = true
 
+      // this.searchForm.pageSize = this.pageSize
+      // this.searchForm.curIndex = this.curIndex
+      this.getSearchFormHandle()
       getRequirement(this.searchForm).then(res => {
         this.tableData = res.data.list
         this.total = res.data.total
         this.loading = false
       })
     },
+    async get_chartList() {
+      this.loading = true
+      const res = await getChartData(this.searchForm)
+      this.chartData = res.data
+      this.get_chartListDetial(res.data.data[0].code)
+    },
+    async get_chartListDetial(code) {
+      if (code) {
+        this.searchForm.code = code
+      }
+      const dataList = await getChartListData(this.searchForm)
+      this.tableData = dataList.data.list
+      this.total = dataList.total
+      this.tableTitle = dataList.data.title
+      this.loading = false
+    },
     async showRequirementEnum() {
       const res = await showRequirementEnum()
       if (res.code === 200) {
@@ -766,6 +813,13 @@ export default {
   background: rgba(245,108,108,0.17);
   color: rgba(245,108,108,1);
 }
+.subtitle {
+  color: #333;
+  font-size: 16px;
+  background: #fff;
+  font-weight: 700;
+  padding: 16px 8px;
+}
 </style>
 
 <style>

src/views/projectManage/taskList/taskIndex.vue

@@ -13,13 +13,14 @@
           :data="chartData"
           :type-option-list="typeOptionList"
           :chart-search-data="form_task"
+          @search="get_charts()"
           @changeList="(code) => get_chartListDetial(code)"
         >
           <div slot="searchBox">
             <div class="Layout">
               <div class="Layout">
                 <div class="chartSearchTitle">模块：</div>
-                <el-cascader v-model="form_task.moduleIds" size="small" clearable collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" style="width:77% !important;" @change="get_taskList()" />
+                <el-cascader v-model="form_task.moduleIds" size="small" clearable collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" style="width:77% !important;" @change="get_charts()" />
               </div>
               <span class="screen" @click="showChartModal = true">更多筛选</span>
             </div>
@@ -172,7 +173,7 @@
       </div>
     </div>
     <div class="stylus-content">
-      <div v-if="nowTab === 'charts'" class="subtitle">subtitle</div>
+      <div v-if="nowTab === 'charts'" class="subtitle">{{ tableTitle }}</div>
       <el-table
         v-loading="table_loading"
         :data="task_table"
@@ -271,7 +272,7 @@
     <normal-dialog :show-footer="false" :show-dialog="showEditSearch" :title="'管理过滤器'" :width="'65%'" @cancel="showEditSearch=false">
       <filter-list :show-filter="showEditSearch" :filter-type="2" @deleteFilter="deleteFilter" />
     </normal-dialog>
-    <filterModal :show-dialog="showChartModal" @cancel="showChartModal = false">
+    <filterModal :show-dialog="showChartModal" @cancel="showChartModal = false" @confirm="filterModalConfirm()">
       <div>
         <chartSearchForm
           :data="chartSearchFormRenderData"
@@ -415,6 +416,7 @@ export default {
         { value: '5', label: '直接归属' }
       ],
       showChartModal: false,
+      tableTitle: '',
       chartSearchFormRenderData: _.cloneDeep(chartSearchFormData)
     }
   },
@@ -446,22 +448,29 @@ export default {
     this.$store.state.data.status = false
   },
   methods: {
+    filterModalConfirm() {
+      this.showChartModal = false
+      this.get_charts()
+    },
     logHandle(d) {
       window.log({ c: 'task', d })
     },
     changeTab(e) {
       this.nowTab = e
       if (this.nowTab === 'charts') {
-        // this.$emit('chartSearch')
-        this.updateChartSearchFormValue()
-        this.form_taskHandle()
-        this.get_chartList()
+        this.get_charts()
       } else {
         this.chartData = {}
         this.get_taskList()
       }
     },
+    get_charts() {
+      this.updateChartSearchFormValue()
+      this.form_taskHandle()
+      this.get_chartList()
+    },
     async get_chartList() {
+      this.table_loading = true
       const res = await getChartData(this.form_task)
       this.chartData = res.data
       this.get_chartListDetial(res.data.data[0].code)
@@ -473,6 +482,7 @@ export default {
       const dataList = await getChartListData(this.form_task)
       this.task_table = dataList.data.list
       this.total = dataList.total
+      this.tableTitle = dataList.data.title
       this.table_loading = false
     },
     test2(item, e) {