rmdjz
/
ProjectManagement_frontend
10
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

解决run build后Home没有头部的问题

main
wuyize 2022-07-08 16:52:48 +08:00
parent fa6ded8ed2
commit e2732e8fab
2 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/Home.vue
View File

@ -28,15 +28,17 @@
display: flex; flex-direction: row-reverse; align-items: center">
<div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
display: flex; justify-content: center;align-items: center;">
<span style="color: white">{{ this.$store.state.staff===null? this.$store.state.staff:this.$store.state.staff.staffFullname[0] }}</span>
<span style="color: white">{{
getStaffFullname()[0]
}}</span>
</div>
<div style="height: 100%; margin-right: 10px;
display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
<span
style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">
{{ this.$store.state.staff===null? this.$store.state.staff: this.$store.state.staff.staffFullname }}</span>
{{ getStaffFullname() }}</span>
<span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
this.$store.state.staff===null? this.$store.state.staff:this.$store.state.staff.staffUsername
getStaffUsername()
}}</span>
</div>
@ -66,13 +68,25 @@ export default {
name: 'Home',
components: {},
data() {
return {
}
return {}
},
mounted() {
},
methods: {
getStaffFullname() {
if(this.$store&&this.$store.state.staff)
return this.$store.state.staff.staffFullname
else
return ' '
},
getStaffUsername() {
if(this.$store&&this.$store.state.staff)
return this.$store.state.staff.staffUsername
else
return ' '
},
}
}
</script>
@ -86,5 +100,4 @@ export default {
}
</style>

43
src/views/ProjectGroup.vue
View File

@ -1,12 +1,13 @@
<template>
<view style="display: flex;margin: 0 30px 10px 30px;height: 100%;justify-content: space-around;">
<div ref="divRef" style="display: flex;margin: 0 30px 0 30px;height: 100%;justify-content: space-around;">
<div class="left" ref="leftRef" style="width: 50%;height: 100%;padding: 0 30px 0 0">
<div style="margin: 0 0 26px 0;display: flex;flex-direction: row;justify-content: space-between" ref="left_title_Ref">
<div ref="leftRef" style="width: 50%;height: 100%;padding: 0 30px 0 0;display: flex;flex-direction: column">
<div style="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>
<div style="flex: 1; margin: 30px 0 0 0; background-color: white; border-radius: 10px;padding: 20px;
display: flex;flex-direction: column;justify-content: space-between">
<el-table
ref="tableRef"
style="width: 100%"
@ -58,21 +59,23 @@
style="padding: 15px 15px 15px 15px;box-sizing:border-box;background: #fff;display: flex;justify-content: flex-end;">
</el-pagination>
</div>
</div>
</div>
<div class="right" style="width: 50%;display: flex;flex-direction: column;height: 100%;">
<div style="width: 50%;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 style="flex: 1;">
<!-- <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 style="flex: 1;">
<!-- <EchartsPie :id="'pie_team'" :isRadius="true" />-->
</div>
</div>
</div>
</div>
</view>
</template>
<script setup>
@ -80,7 +83,6 @@
import {nextTick, onMounted, ref} from "vue";
const tableRef = ref(null);
// 总高度
const leftRef = ref(null);
const left_title_Ref = ref(null);
@ -90,15 +92,20 @@ 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;
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
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;
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
};
// 设置表格初始高度为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>