|
|
@@ -1,17 +1,256 @@
|
|
|
<template>
|
|
|
- <el-containr>
|
|
|
- <el-main>
|
|
|
- 123
|
|
|
+ <el-container direction="vertical" class="workbench_team">
|
|
|
+ <el-main class="layout_main">
|
|
|
+ <div>
|
|
|
+ <div style="display: inline-block">团队</div>
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.team"
|
|
|
+ style="margin-left: 20px"
|
|
|
+ @change="query()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in searchEnum.teams"
|
|
|
+ :key="item.teamId"
|
|
|
+ :label="item.teamName"
|
|
|
+ :value="item.teamId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div style="display: inline-block;margin-left: 20px">业务线</div>
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.businessline"
|
|
|
+ style="margin-left: 20px"
|
|
|
+ @change="query()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in searchEnum.businesslines"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.bizName"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</el-main>
|
|
|
- </el-containr>
|
|
|
+ <el-main class="layout_main" style="margin-top: 10px">
|
|
|
+ <div class="module_title">
|
|
|
+ <div class="module_title__sign" />
|
|
|
+ <div class="module_title__caption">团队数据</div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ <el-main class="layout_main" style="margin-top: 10px">
|
|
|
+ <div class="module_title">
|
|
|
+ <div class="module_title__sign" />
|
|
|
+ <div class="module_title__caption">团队日程</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-radio-group v-model="radio1" size="small">
|
|
|
+ <el-radio-button label="忙碌" />
|
|
|
+ <el-radio-button label="空闲" />
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="text-align: right">
|
|
|
+ <el-radio-group v-model="radio2" size="small">
|
|
|
+ <el-radio-button label="今天" />
|
|
|
+ </el-radio-group>
|
|
|
+ <el-radio-group v-model="radio3" size="small" style="margin-left: 20px">
|
|
|
+ <el-radio-button label="日" />
|
|
|
+ <el-radio-button label="周" />
|
|
|
+ <el-radio-button label="月" />
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <gantt-elastic :tasks="tasks" :options="options">
|
|
|
+ <gantt-elastic-header slot="header" />
|
|
|
+ <gantt-elastic-footer slot="footer" />
|
|
|
+ </gantt-elastic>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import workbenchApi from '@/api/workbench.js'
|
|
|
+import { queryBizTypeList } from '@/api/defectManage'
|
|
|
+import GanttElastic from 'gantt-elastic'
|
|
|
+import Header from 'gantt-elastic-header'
|
|
|
+
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ ganttElasticHeader: Header, // or Header
|
|
|
+ ganttElastic: GanttElastic,
|
|
|
+ ganttElasticFooter: { template: `<span>your footer</span>` }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tasks: [], // 甘特图任务
|
|
|
+ options: {
|
|
|
+ maxRows: 100,
|
|
|
+ maxHeight: 300,
|
|
|
+ title: {
|
|
|
+ label: 'Your project title as html (link or whatever...)',
|
|
|
+ html: false
|
|
|
+ },
|
|
|
+ row: {
|
|
|
+ height: 24
|
|
|
+ },
|
|
|
+ calendar: {
|
|
|
+ hour: {
|
|
|
+ display: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chart: {
|
|
|
+ progress: {
|
|
|
+ bar: false
|
|
|
+ },
|
|
|
+ expander: {
|
|
|
+ display: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ taskList: {
|
|
|
+ expander: {
|
|
|
+ straight: false
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ label: 'ID',
|
|
|
+ value: 'id',
|
|
|
+ width: 40
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ label: 'Description',
|
|
|
+ value: 'label',
|
|
|
+ width: 200,
|
|
|
+ expander: true,
|
|
|
+ html: true,
|
|
|
+ events: {
|
|
|
+ click({ data, column }) {
|
|
|
+ alert('description clicked!\n' + data.label)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: 'Assigned to',
|
|
|
+ value: 'user',
|
|
|
+ width: 130,
|
|
|
+ html: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: 'Start',
|
|
|
+ value: task => dayjs(task.start).format('YYYY-MM-DD'),
|
|
|
+ width: 78
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ label: 'Type',
|
|
|
+ value: 'type',
|
|
|
+ width: 68
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ label: '%',
|
|
|
+ value: 'progress',
|
|
|
+ width: 35,
|
|
|
+ style: {
|
|
|
+ 'task-list-header-label': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ 'task-list-item-value-container': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }, // 甘特图配置
|
|
|
+ radio1: '忙碌',
|
|
|
+ radio2: '今天',
|
|
|
+ radio3: '日',
|
|
|
+ searchForm: {
|
|
|
+ team: 0,
|
|
|
+ businessline: 0
|
|
|
+ },
|
|
|
+ searchEnum: {
|
|
|
+ teams: [],
|
|
|
+ businesslines: []
|
|
|
+ },
|
|
|
+ username: localStorage.getItem('username')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.queryTeamInfoList(this.username)
|
|
|
+ this.queryBizTypeList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ query() {
|
|
|
+
|
|
|
+ },
|
|
|
+ queryTeamInfoList(username) {
|
|
|
+ const data = { memberIDAP: username, curIndex: 1, pageSize: 9999 }
|
|
|
+ workbenchApi.queryTeamInfoList(data).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.searchEnum.teams = res.data.list
|
|
|
+ this.searchEnum.teams.unshift({
|
|
|
+ teamId: 0,
|
|
|
+ teamName: '全部'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryBizTypeList() {
|
|
|
+ queryBizTypeList({}).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.searchEnum.businesslines = res.data.list
|
|
|
+ this.searchEnum.businesslines.unshift({
|
|
|
+ id: 0,
|
|
|
+ bizName: '全部'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+// 布局
|
|
|
+<style scoped>
|
|
|
+.workbench_team {
|
|
|
+ background-color: #f2f3f6;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.workbench_team .layout_main,
|
|
|
+.layout_aside {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+</style>
|
|
|
|
|
|
+// 公共部分
|
|
|
+<style scoped>
|
|
|
+.module_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.module_title__sign {
|
|
|
+ width: 4px;
|
|
|
+ height: 15px;
|
|
|
+ background: #409eff;
|
|
|
+ border-radius: 1px;
|
|
|
+}
|
|
|
+.module_title__caption {
|
|
|
+ width: 83px;
|
|
|
+ height: 18px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(51, 59, 74, 1);
|
|
|
+ margin-left: 6px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
</style>
|
reedliuqing_i