解决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,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 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>
         <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%">
+        <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>
         <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>
-  </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 = 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 = () => {
-    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>