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

src/views/Home.vue

@@ -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>

src/views/ProjectGroup.vue

@@ -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>