解决run build后Home没有头部的问题
parent
fa6ded8ed2
commit
e2732e8fab
|
@ -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>
|
|
@ -1,22 +1,23 @@
|
|||
<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>
|
||||
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
style="width: 100%"
|
||||
: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">
|
||||
<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%"
|
||||
: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)"
|
||||
|
@ -42,37 +43,39 @@
|
|||
|
||||
</span>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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 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>
|
||||
<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>
|
||||
</view>
|
||||
</div>
|
||||
</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>
|
||||
|
|
Loading…
Reference in New Issue