test

src/api/taskIndex.js

@@ -335,3 +335,21 @@ export function filterGetFilter(id) {
     method: 'get'
   })
 }
+
+// 获取chart视图数据
+export function getChartData(data) {
+  return request({
+    url: TeamManagement + `/task/listStatistic`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取chart视图数据
+export function getChartListData(data) {
+  return request({
+    url: TeamManagement + `/task/listStatisticDetail`,
+    method: 'post',
+    data
+  })
+}

src/components/chartView/index.vue

@@ -2,43 +2,47 @@
   <div class="op-chart">
     <div class="chartSearchbar inlineBetween">
       <div class="inlineBetween">
-        <div>
-          <span class="label">分布类型：</span>
+        <div class="subtitle" style="width: 200px">
+          未开始的任务
+          <!-- <span class="label">分布类型：</span>
           <el-select
-            v-model="chartSearchData.chartType"
+            v-model="chartSearchData.viewType"
             size="small"
             filterable
-            style="width: 100px"
+            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>
+          </el-select> -->
         </div>
         <div class="tip">
-          <span class="item">
-            <span class="title">未上线：</span>
-            <span class="num">12</span>
-          </span>
-          <span class="item">
-            <span class="title">未上线：</span>
-            <span class="num">12</span>
+          <span v-for="item in data.option" :key="item.key" class="item">
+            <span class="title">{{ item.key }}：</span>
+            <span class="num">{{ item.value }}</span>
           </span>
         </div>
       </div>
       <div>
         <slot name="searchBox" />
       </div>
-      <!-- <el-select
-        v-model="year"
-        size="small"
-        filterable
-        style="width: 80px"
-        @change="$emit('search', 'year', year)"
-      >
-        <el-option v-for="(y, index) in yearList" :key="index" :label="y" :value="y" />
-      </el-select> -->
     </div>
-    <normal-echart v-if="echartsOption3" :chart-id="'chartThird'" :option="echartsOption3" @onClick="changeList" />
+    <div class="chartSearchbar inlineBetween mt15">
+      <div 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>
+      </div>
+    </div>
+    <div class="chartViewHeight">
+      <normal-echart v-if="echartsOption3" :chart-id="'chartThird'" :option="echartsOption3" @onClick="changeList" />
+    </div>
   </div>
 </template>
 <script>
@@ -99,7 +103,19 @@ export default {
 </script>
 <style scoped lang="scss">
 .op-chart {
-  height: 324px;
+  height: 370px;
+  .chartViewHeight {
+    height: 324px;
+  }
+  .mt15 {
+    margin-top: 15px;
+  }
+  .subtitle {
+    color: #333;
+    font-size: 16px;
+    background: #fff;
+    font-weight: 700;
+  }
   .chartSearchbar {
     padding: 0 5%;
     .label {
@@ -107,8 +123,10 @@ export default {
       color: #444;
     }
     .tip {
+      width: 200px;
       margin: 0px 25px;
       .item {
+        display: inline-block;
         margin-right: 15px;
         .title {
           font-size: 14px;

src/components/newLayout/Aside.vue

@@ -216,6 +216,8 @@ section {
     align-items: center;
     font-size: 14px;
     color: #444444;
+    height: calc(100vh - 170px);
+    overflow-y: auto;
     li {
       width: 100%;
     }

src/views/projectManage/taskList/taskIndex.vue

@@ -13,7 +13,7 @@
           :data="chartData"
           :type-option-list="typeOptionList"
           :chart-search-data="form_task"
-          @changeList="(code) => console.log(code)"
+          @changeList="(code) => get_chartListDetial(code)"
         >
           <div slot="searchBox">
             <div class="Layout">
@@ -172,12 +172,13 @@
       </div>
     </div>
     <div class="stylus-content">
+      <div v-if="nowTab === 'charts'" class="subtitle">subtitle</div>
       <el-table
         v-loading="table_loading"
         :data="task_table"
         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"
@@ -248,7 +249,7 @@
           background
           :current-page="currentPage"
           :page-sizes="[15,30,45,total]"
-          :page-size="15"
+          :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           @size-change="handleSizeChange"
@@ -297,7 +298,9 @@ import {
   getFilterList,
   configShowTaskStatusEnum,
   createFilter,
-  filterGetFilter
+  filterGetFilter,
+  getChartListData,
+  getChartData
 } from '@/api/taskIndex' // ajax
 import filterModal from '@/components/filterModal'
 import { settingQueryBizModuleList } from '@/api/defectManage'
@@ -371,7 +374,7 @@ export default {
       userInformation: localStorage.getItem('username'),
       userNames: localStorage.getItem('realname'),
       form_task: {
-        chartType: '0'
+        viewType: '0'
       },
       noTest: [], // 是否免测
       BusinessLine: [], // 业务线
@@ -404,9 +407,12 @@ export default {
       nowTab: 'list',
       chartData: {},
       typeOptionList: [
-        { value: '0', label: '需求状态' },
-        { value: '1', label: '需求等级' },
-        { value: '2', label: '需求类型' }
+        { value: '0', label: '任务状态' },
+        { value: '1', label: '任务等级' },
+        { value: '2', label: '开发负责人' },
+        { value: '3', label: '测试负责人' },
+        { value: '4', label: '跟版客户端' },
+        { value: '5', label: '直接归属' }
       ],
       showChartModal: false,
       chartSearchFormRenderData: _.cloneDeep(chartSearchFormData)
@@ -448,11 +454,27 @@ export default {
       if (this.nowTab === 'charts') {
         // this.$emit('chartSearch')
         this.updateChartSearchFormValue()
-        console.log('charts')
+        this.form_taskHandle()
+        this.get_chartList()
       } else {
+        this.chartData = {}
         this.get_taskList()
       }
     },
+    async get_chartList() {
+      const res = await getChartData(this.form_task)
+      this.chartData = res.data
+      this.get_chartListDetial(res.data.data[0].code)
+    },
+    async get_chartListDetial(code) {
+      if (code) {
+        this.form_task.code = code
+      }
+      const dataList = await getChartListData(this.form_task)
+      this.task_table = dataList.data.list
+      this.total = dataList.total
+      this.table_loading = false
+    },
     test2(item, e) {
       // 获取团队人员信息
       if (typeof this.test[item.idap] === 'undefined') {
@@ -512,7 +534,7 @@ export default {
       this.$router.push({ path: this.$route.path })
       this.getFilterList()
     },
-    get_taskList(e) {
+    form_taskHandle() {
       if (this.bizId === -1) return
       // 查询
       if (this.isToOne) {
@@ -535,6 +557,31 @@ export default {
         delete this.form_task.createTimeBegin
         delete this.form_task.createTimeEnd
       }
+    },
+    get_taskList(e) {
+      // if (this.bizId === -1) return
+      // // 查询
+      // if (this.isToOne) {
+      //   this.curIndex = 1
+      //   this.currentPage = 1
+      // }
+      // this.table_loading = true
+      // this.form_task.bizId = this.bizId
+      // this.form_task.pageSize = this.pageSize
+      // this.form_task.curIndex = this.curIndex
+      // for (const key in this.form_task) { // 接口不接受空值的处理
+      //   if (this.form_task[key] === '') {
+      //     delete this.form_task[key]
+      //   }
+      // }
+      // if (this.form_task.date) {
+      //   this.form_task.createTimeBegin = this.form_task.date[0]
+      //   this.form_task.createTimeEnd = this.form_task.date[1]
+      // } else {
+      //   delete this.form_task.createTimeBegin
+      //   delete this.form_task.createTimeEnd
+      // }
+      this.form_taskHandle()
       taskList(this.form_task).then(res => {
         this.task_table = res.data
         this.total = res.total
@@ -623,6 +670,11 @@ export default {
       //  分页
       this.pageSize = size
       this.isToOne = false
+      this.form_taskHandle()
+      if (this.nowTab === 'charts') {
+        this.get_chartListDetial()
+        return
+      }
       this.get_taskList(1)
     },
     handleCurrentChange(curIndex) {
@@ -630,6 +682,11 @@ export default {
       this.curIndex = curIndex
       this.currentPage = curIndex
       this.isToOne = false
+      this.form_taskHandle()
+      if (this.nowTab === 'charts') {
+        this.get_chartListDetial()
+        return
+      }
       this.get_taskList()
     },
     async get_taskSelect() {
@@ -759,6 +816,13 @@ export default {
     text-align: center;
   }
 }
+.subtitle {
+  color: #333;
+  font-size: 16px;
+  background: #fff;
+  font-weight: 700;
+  padding: 16px 8px;
+}
 </style>
 <style>
 .el-loading-mask {