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"> display: flex; flex-direction: row-reverse; align-items: center">
<div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px; <div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
display: flex; justify-content: center;align-items: center;"> 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>
<div style="height: 100%; margin-right: 10px; <div style="height: 100%; margin-right: 10px;
display: flex; flex-direction: column;justify-content: center;align-items: flex-end;"> display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
<span <span
style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; "> 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;">{{ <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> }}</span>
</div> </div>
@ -66,13 +68,25 @@ export default {
name: 'Home', name: 'Home',
components: {}, components: {},
data() { data() {
return { return {}
}
}, },
mounted() { 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> </script>
@ -86,5 +100,4 @@ export default {
} }
</style> </style>

91
src/views/ProjectGroup.vue
View File

@ -1,22 +1,23 @@
<template> <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 ref="leftRef" style="width: 50%;height: 100%;padding: 0 30px 0 0;display: flex;flex-direction: column">
<div style="margin: 0 0 26px 0;display: flex;flex-direction: row;justify-content: space-between" ref="left_title_Ref"> <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> <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> <el-button style="" type="primary" >新增成员</el-button>
</div> </div>
<div style="flex: 1; margin: 30px 0 0 0; background-color: white; border-radius: 10px;padding: 20px;
<el-table display: flex;flex-direction: column;justify-content: space-between">
ref="tableRef" <el-table
style="width: 100%" ref="tableRef"
:height="tableHeight" style="width: 100%"
:data="tableData"> :height="tableHeight"
<el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column> :data="tableData">
<el-table-column prop="projectStaffPosition" label="职位" min-width="35%"> <el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column>
</el-table-column> <el-table-column prop="projectStaffPosition" label="职位" min-width="35%">
<el-table-column fixed="right" label="操作" min-width="40%"> </el-table-column>
<template #default="scope"> <el-table-column fixed="right" label="操作" min-width="40%">
<template #default="scope">
<span> <span>
<el-button <el-button
@click.prevent="deleteRow(scope.$index, tableData)" @click.prevent="deleteRow(scope.$index, tableData)"
@ -42,37 +43,39 @@
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div ref="left_bottom_Ref"> <div ref="left_bottom_Ref">
<el-pagination <el-pagination
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
@size-change="handleSizeChange" @size-change="handleSizeChange"
v-model:currentPage="currentPage" v-model:currentPage="currentPage"
:page-sizes="[5, 10, 15, 20]" :page-sizes="[5, 10, 15, 20]"
v-model:page-size="pageSize" v-model:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="total"
style="padding: 15px 15px 15px 15px;box-sizing:border-box;background: #fff;display: flex;justify-content: flex-end;"> style="padding: 15px 15px 15px 15px;box-sizing:border-box;background: #fff;display: flex;justify-content: flex-end;">
</el-pagination> </el-pagination>
</div>
</div> </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%"> <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> <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%"> <div style="flex: 1;">
<EchartsPie :id="'pie_post'" ref="pie_post" :isLegend="true" :dataList="stationList"/> <!-- <EchartsPie :id="'pie_post'" ref="pie_post" :isLegend="true" :dataList="stationList"/>-->
</div> </div>
<p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 15px 0 30px 0;flex-shrink: 0;">团队工作情况统计</p> <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%"> <div style="flex: 1;">
<EchartsPie :id="'pie_team'" :isRadius="true" /> <!-- <EchartsPie :id="'pie_team'" :isRadius="true" />-->
</div> </div>
</div> </div>
</div> </div>
</view> </div>
</template> </template>
<script setup> <script setup>
@ -80,7 +83,6 @@
import {nextTick, onMounted, ref} from "vue"; import {nextTick, onMounted, ref} from "vue";
const tableRef = ref(null); const tableRef = ref(null);
// 总高度 // 总高度
const leftRef = ref(null); const leftRef = ref(null);
const left_title_Ref = ref(null); const left_title_Ref = ref(null);
@ -90,15 +92,20 @@ const tableHeight = ref();
onMounted(() => { onMounted(() => {
// 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离110 // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离110
nextTick(()=>{ tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
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 = () => { 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 - 110;
// tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
// echartsHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 100;
}; };
// 设置表格初始高度为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>