“初步完成团队页面”

main
A 2022-07-08 13:36:39 +08:00
parent 8defdff039
commit c3eeecf120
4 changed files with 397 additions and 3 deletions

59
package-lock.json generated
View File

@ -12,6 +12,7 @@
"axios": "^0.24.0", "axios": "^0.24.0",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"echarts": "^5.3.3",
"element-plus": "^2.2.6", "element-plus": "^2.2.6",
"moment": "^2.29.1", "moment": "^2.29.1",
"vue": "^3.0.0", "vue": "^3.0.0",
@ -5956,6 +5957,20 @@
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"node_modules/echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.3.2"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/ee-first": { "node_modules/ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/download/ee-first-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/ee-first/download/ee-first-1.1.1.tgz",
@ -15701,6 +15716,19 @@
"resolved": "https://registry.npmmirror.com/yallist/download/yallist-2.1.2.tgz", "resolved": "https://registry.npmmirror.com/yallist/download/yallist-2.1.2.tgz",
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true "dev": true
},
"node_modules/zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
} }
}, },
"dependencies": { "dependencies": {
@ -20407,6 +20435,22 @@
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.3.2"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"ee-first": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/download/ee-first-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/ee-first/download/ee-first-1.1.1.tgz",
@ -28457,6 +28501,21 @@
"dev": true "dev": true
} }
} }
},
"zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
} }
} }
} }

View File

@ -11,6 +11,7 @@
"axios": "^0.24.0", "axios": "^0.24.0",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"echarts": "^5.3.3",
"element-plus": "^2.2.6", "element-plus": "^2.2.6",
"moment": "^2.29.1", "moment": "^2.29.1",
"vue": "^3.0.0", "vue": "^3.0.0",

View File

@ -0,0 +1,141 @@
<template>
<div id="echartsPie" ref="echartsPie">
<div :id="id" class="echarts_box" style="width: 450px;height: 100%;"></div>
<!-- <div class="list_box">-->
<!-- <p>总人数{{ getTotalNumber }}</p>-->
<!-- <p v-for="(item,index) in dataList" :key="index">{{ item.name }}{{ item.value }}</p>-->
<!-- </div>-->
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "echartsPie",
props: {
//
id: {
type: String
},
//
isLegend: {
type: Boolean,
default: false
},
//
isRadius: {
type: Boolean,
default: false
},
//
dataList: {
type: Array,
default: []
}
},
data() {
return {
myChart: null
}
},
mounted() {
this.initEcharts();
},
computed: {
getTotalNumber() {
let total = this.dataList.reduce((prev, item) => {
prev += item.value
return prev
}, 0)
return total;
}
},
methods: {
//
getOption() {
//
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '统计',
type: 'pie',
center: ['45%', '55%'],
// radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.dataList
}
]};
if (this.isLegend) {
option.legend = {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
}
}
option.series[0].radius = this.isRadius?'80%':['50%', '80%'];
return option;
},
//
initEcharts() {
this.$nextTick(()=>{
this.myChart = echarts.init(document.getElementById(this.id));
// 使
this.myChart.setOption(this.getOption());
});
let that = this;
window.addEventListener('resize', function () {
console.log("addEventListener");
// resize
that.$nextTick(()=>{
that.myChart.resize();
});
});
},
//
updateEcharts() {
this.myChart.setOption(this.getOption(),true);
}
}
}
</script>
<style scoped lang="scss">
#echartsPie {
width: 100%;
height: 100%;
display: flex;
background: #fff;
.echarts_box {
flex-shrink: 0;
}
.list_box {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: scroll;
padding: 50px 50px;
box-sizing:border-box;
}
}
</style>

View File

@ -1,13 +1,206 @@
<template> <template>
<div>项目团队</div> <view style="display: flex;height: 100%;justify-content: space-around;">
<div class="left" ref="leftRef" style="width: 50%;height: 100%;">
<div style="margin: 0 0 26px 0;display: flex;flex-direction: row;justify-content: space-between" ref="left_title_Ref">
<p style="text-align:center; 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目团队</p>
<el-button style="" type="primary" >新增成员</el-button>
</div>
<el-table
ref="tableRef"
class="projectTable"
:height="tableHeight"
:data="tableData">
<el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column>
<el-table-column prop="projectStaffPosition" label="职位" min-width="35%">
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="40%">
<template #default="scope">
<span>
<el-button
@click.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="midium"
>
修改
</el-button>
<el-button
@click.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="midium"
>
交接
</el-button>
<el-button
@click.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="midium"
>
离队
</el-button>
</span>
</template>
</el-table-column>
</el-table>
<div ref="left_bottom_Ref">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
v-model:currentPage="currentPage"
:page-sizes="[5, 10, 15, 20]"
v-model:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="padding: 15px 15px 15px 15px;box-sizing:border-box;background: #fff;display: flex;justify-content: flex-end;">
</el-pagination>
</div>
</div>
<div class="right" style="width: 45%;display: flex;flex-direction: column;height: 100%;">
<div style="display: flex;flex-direction: column;height: 100%">
<p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 0 0 30px 0;flex-shrink: 0;">岗位统计</p>
<div style="flex: 1;height: 100%">
<EchartsPie :id="'pie_post'" ref="pie_post" :isLegend="true" :dataList="stationList"/>
</div>
<p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 15px 0 30px 0;flex-shrink: 0;">团队工作情况统计</p>
<div style="flex: 1;height: 100%">
<EchartsPie :id="'pie_team'" :isRadius="true" />
</div>
</div>
</div>
</view>
</template> </template>
<script setup>
// table
import {nextTick, onMounted, ref} from "vue";
const tableRef = ref(null);
//
const leftRef = ref(null);
const left_title_Ref = ref(null);
const left_bottom_Ref = ref(null);
// table
const tableHeight = ref();
onMounted(() => {
// innerHeight-offsetTop-110
nextTick(()=>{
tableHeight.value = leftRef.value.clientHeight - left_title_Ref.value.clientHeight - 26 - left_bottom_Ref.value.clientHeight
});
// tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
window.onresize = () => {
tableHeight.value = leftRef.value.clientHeight - left_title_Ref.value.clientHeight - 26 - left_bottom_Ref.value.clientHeight
// tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
// echartsHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
};
});
</script>
<script> <script>
import EchartsPie from "@/components/echartsPie";
import request from "../utils/request";
export default { export default {
name: "ProjectGroup" methods: {
getStationList() {
let projectId = this.$route.params.projectId
request({
url: `project/${projectId}/group/stats`,
method: 'get',
}).then(response => {
if (response.data.code === 200) {
console.log(response.data.data);
let data = response.data.data;
let array = [];
for (let key in data) {
array.push({value: data[key], name: key});
}
this.stationList = array;
this.$nextTick(()=>{
this.$refs.pie_post.updateEcharts();
});
console.log(array);
}
}).catch(function (error) {
console.log(error)
})
},
deleteRow(index, rows) {
rows.splice(index, 1)
},
//
handleSizeChange(val) {
},
//
handleCurrentChange(val) {
},
},
mounted() {
this.getStationList();
},
components: {EchartsPie},
data() {
return {
//
stationList: [],
total: 5,
currentPage: 1,
pageSize: 10,
tableData: [
{
staffFullname: '王小虎',
projectStaffPosition: '项目经理',
},
{
staffFullname: '王小虎',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小虎',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
],
}
},
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>