版本首页开发完成

src/api/version.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+const requestIp = 'http://10.179.24.176:8990'
+
+export function getVersionHomePageList(data) {
+  return request({
+    url: requestIp + '/Version/versionHomePageList',
+    method: 'post',
+    data
+  })
+}
+
+export function showAppClientEnum(data) {
+  return request({
+    url: requestIp + '/config/showAppClientEnum',
+    method: 'get',
+    data
+  })
+}
+
+export function showVersionEnum(data) {
+  return request({
+    url: requestIp + '/config/showVersionEnum',
+    method: 'get',
+    data
+  })
+}

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

@@ -1,32 +1,39 @@
 <template>
   <el-container>
     <el-header class="layout_header">
-      <el-dropdown @command="handleCommand">
-        <span class="el-dropdown-link">
-          {{ searchTitle.client }}
-          <i class="el-icon-arrow-down el-icon--right" />
-        </span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item
-            v-for="(item,index) in searchInfo.clients"
-            :key="index"
-            :command="{value: item,flag: 1}"
-          >{{ item.msg }}</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      <el-dropdown style="margin-left: 60px" @command="handleCommand">
-        <span class="el-dropdown-link">
-          {{ searchTitle.version }}
-          <i class="el-icon-arrow-down el-icon--right" />
-        </span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item
-            v-for="(item,index) in searchInfo.versions"
-            :key="index"
-            :command="{value: item,flag: 2}"
-          >{{ item.msg }}</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+      <el-row>
+        <el-col :span="3">
+          <el-dropdown @command="handleCommand">
+            <span class="el-dropdown-link">
+              {{ searchTitle.client }}
+              <i class="el-icon-arrow-down el-icon--right" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(item,index) in searchInfo.clients"
+                :key="index"
+                :command="{value: item,flag: 1}"
+              >{{ item.msg }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+        <el-col :span="5">
+          <el-dropdown @command="handleCommand">
+            <span class="el-dropdown-link">
+              {{ searchTitle.version }}
+              <i class="el-icon-arrow-down el-icon--right" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(item,index) in searchInfo.versions"
+                :key="index"
+                :command="{value: item,flag: 2}"
+              >{{ item.msg }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+        {{ searchForm }}
+      </el-row>
     </el-header>
     <el-main class="layout_main">
       <div style="font-size: 18px;margin: 2%">
@@ -41,13 +48,37 @@
         :cell-style="{textAlign: 'center'}"
         @current-change="handleCurrentRowChange"
       >
-        <el-table-column prop="name" label="优先级" min-width="20%" />
-        <el-table-column prop="name" label="需求名称" min-width="20%" />
-        <el-table-column prop="name" label="业务线" min-width="20%" />
-        <el-table-column prop="name" label="PM" min-width="20%" />
-        <el-table-column prop="name" label="状态" min-width="20%" />
-        <el-table-column prop="name" label="任务" min-width="20%" />
-        <el-table-column prop="name" label="任务健康分布" min-width="20%" />
+        <el-table-column prop="priority" label="优先级" min-width="10%">
+          <template v-slot="scope">
+            <el-tag size="mini" :type="getPriorityTagType(scope.row.priority)">{{ 'P'+scope.row.priority }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="requirementName" label="需求名称" min-width="10%" />
+        <el-table-column prop="bizId" label="业务线" min-width="10%">
+          <template v-slot="scope">
+            {{ versionEnum.bizTypeMap[scope.row.bizId] }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="pmName" label="PM" min-width="10%" />
+        <el-table-column prop="status" label="状态" min-width="10%" />
+        <el-table-column prop="statusInfoCountList" label="任务" min-width="30%">
+          <template v-slot="scope">
+            <version-chart
+              :chart-id="'taskCount' + scope.$index"
+              :option="taskOptionList[scope.$index]"
+              style="position: relative;bottom: 30px"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="statusInfoHealthyList" label="任务健康分布" min-width="30%">
+          <template v-slot="scope">
+            <version-chart
+              :chart-id="'taskHealthCount' + scope.$index"
+              :option="taskHealthOptionList[scope.$index]"
+              style="position: relative;bottom: 30px"
+            />
+          </template>
+        </el-table-column>
       </el-table>
       <el-pagination
         background
@@ -64,32 +95,20 @@
 </template>
 
 <script>
+import { getVersionHomePageList, showAppClientEnum, showVersionEnum } from '@/api/version.js'
+import VersionChart from '@/components/chart/index.vue'
+
 export default {
+  components: {
+    VersionChart
+  },
   data() {
     return {
-      tableData: null,
+      tableData: [],
       loading: false,
       searchInfo: {
-        clients: [
-          {
-            code: 0,
-            msg: '代驾'
-          },
-          {
-            code: 1,
-            msg: '黑马'
-          }
-        ],
-        versions: [
-          {
-            code: 0,
-            msg: '1.1.1'
-          },
-          {
-            code: 1,
-            msg: '2.2.2'
-          }
-        ]
+        clients: [],
+        versions: []
       },
       searchTitle: {
         client: '选择客户端',
@@ -97,41 +116,298 @@ export default {
       },
       total: 0,
       searchForm: {
-        client: null,
-        version: null,
+        clientType: null,
+        versionType: null,
         curIndex: 1,
         pageSize: 15
-      }
+      },
+      versionEnum: {
+        requirementStatusMap: {},
+        bizTypeMap: {},
+        taskStatusMap: {},
+        taskStageMap: {}
+      },
+      taskOptionTemplate: {
+        color: ['#69B3FF'],
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [],
+            axisTick: {
+              alignWithLabel: true,
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: '60%',
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            data: []
+          }
+        ]
+      },
+      taskOptionList: [],
+      taskHealthOptionTemplate: {
+        color: ['#909399', '#61D3B8', '#F7AD3F', '#F56C6C'],
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [],
+            axisTick: {
+              alignWithLabel: true,
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: '60%',
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            data: []
+          }
+        ]
+      },
+      taskHealthOptionList: []
     }
   },
+  mounted() {
+    this.showAppClientEnum()
+    this.showVersionEnum()
+  },
   methods: {
-    getTableData() {
-
+    getPriorityTagType(priority) {
+      let type
+      switch (priority) {
+        case 0:
+          type = 'danger'
+          break
+        case 2:
+          type = 'warning'
+          break
+        case 3:
+          type = ''
+          break
+        case 4:
+          type = 'success'
+          break
+        case 5:
+          type = 'info'
+          break
+        case 6:
+          type = 'info'
+          break
+        default:
+          type = 'info'
+      }
+      return type
     },
     handleCommand(command) {
       switch (command.flag) {
         case 1:
-          this.searchForm.client = command.value.code
           this.searchTitle.client = command.value.msg
+          this.searchInfo.versions = command.value.childEnumInfos
+          if (command.value.code !== this.searchForm.clientType) {
+            if (this.searchInfo.versions && this.searchInfo.versions.length > 0) {
+              this.searchForm.versionType = this.searchInfo.versions[0].code
+              this.searchTitle.version = this.searchInfo.versions[0].msg
+            } else {
+              this.searchForm.versionType = null
+              this.searchTitle.version = '无版本'
+            }
+          }
+          this.searchForm.clientType = command.value.code
           break
         case 2:
-          this.searchForm.version = command.value.code
+          this.searchForm.versionType = command.value.code
           this.searchTitle.version = command.value.msg
           break
       }
+      this.getVersionHomePageList()
     },
     handleCurrentRowChange(val) {
-      this.$router.push({ name: '版本详情', params: { id: val.id + '' }})
+      // this.$router.push({ name: '版本详情', params: { id: val.id + '' }})
     },
     // 分页pageSize选择
     handleSizeChange(pageSize) {
       this.searchForm.pageSize = pageSize
-      this.getTableData()
+      this.getVersionHomePageList()
     },
     // 当前页选择
     handleCurrentChange(currentPage) {
       this.searchForm.curIndex = currentPage
-      this.getTableData()
+      this.getVersionHomePageList()
+    },
+    getVersionHomePageList() {
+      getVersionHomePageList(this.searchForm)
+        .then(res => {
+          if (res.code === 200) {
+            this.createTaskOption(res.data.list)
+            this.createTaskHealthOption(res.data.list)
+            this.tableData = res.data.list
+            this.total = res.data.total
+          } else {
+            this.tableData = null
+            this.$message.warning(res.msg)
+          }
+        })
+    },
+    createTaskOption(data) {
+      this.taskOptionList = []
+      for (const i in data) {
+        const option = JSON.parse(JSON.stringify(this.taskOptionTemplate))
+        for (const j in data[i].statusInfoCountList) {
+          option.xAxis[0].data.push(data[i].statusInfoCountList[j].statusString)
+          option.series[0].data.push(data[i].statusInfoCountList[j].count)
+        }
+        this.taskOptionList.push(option)
+      }
+    },
+    createTaskHealthOption(data) {
+      this.taskHealthOptionList = []
+      for (const i in data) {
+        const option = JSON.parse(JSON.stringify(this.taskHealthOptionTemplate))
+        for (const j in data[i].statusInfoHealthyList) {
+          option.xAxis[0].data.push(data[i].statusInfoHealthyList[j].statusString)
+          const item = {
+            value: data[i].statusInfoHealthyList[j].count,
+            itemStyle: {
+              color: this.taskHealthOptionTemplate.color[j % this.taskHealthOptionTemplate.color.length]
+            }
+          }
+          option.series[0].data.push(item)
+        }
+        this.taskHealthOptionList.push(option)
+      }
+    },
+    showAppClientEnum() {
+      showAppClientEnum()
+        .then(res => {
+          if (res.code === 200) {
+            this.searchInfo.clients = res.data.appClient
+            if (this.searchInfo.clients.length > 0) {
+              this.searchForm.clientType = this.searchInfo.clients[0].code
+              this.searchTitle.client = this.searchInfo.clients[0].msg
+              if (this.searchInfo.clients[0].childEnumInfos && this.searchInfo.clients[0].childEnumInfos.length > 0) {
+                this.searchInfo.versions = this.searchInfo.clients[0].childEnumInfos
+                this.searchForm.versionType = this.searchInfo.versions[0].code
+                this.searchTitle.version = this.searchInfo.versions[0].msg
+              }
+            }
+            this.getVersionHomePageList()
+          } else {
+            this.$message.warning(res.msg)
+          }
+        })
+    },
+    showVersionEnum() {
+      showVersionEnum()
+        .then(res => {
+          if (res.code === 200) {
+            const enums = res.data
+            for (const i in enums.bizType) {
+              this.versionEnum.bizTypeMap[enums.bizType[i].code] = enums.bizType[i].msg
+            }
+            for (const i in enums.requirementStatus) {
+              this.versionEnum.requirementStatusMap[enums.requirementStatus[i].code] = enums.requirementStatus[i].msg
+            }
+            for (const i in enums.taskStatus) {
+              this.versionEnum.taskStatusMap[enums.taskStatus[i].code] = enums.taskStatus[i].msg
+            }
+            for (const i in enums.taskStage) {
+              this.versionEnum.taskStageMap[enums.taskStage[i].code] = enums.taskStage[i].msg
+            }
+            console.log(this.versionEnum)
+          } else {
+            this.$message.warning(res.msg)
+          }
+        })
     }
   }
 }