修改table自适应、业主委员会人员信息不变的问题

src/view/components/memberTable.vue

@@ -17,11 +17,7 @@
         <div class="table-header-item i">联系方式</div>
       </div>
       <div class="table-list fs-14">
-        <div
-          class="table-item line-y"
-          v-for="(item, index) in props.ownerList"
-          :key="item.div"
-        >
+        <div class="table-item line-y" v-for="(item, index) in props.ownerList" :key="item.div">
           <div class="item-value a">{{ item.jobs }}</div>
           <div class="item-value b">{{ item.name }}</div>
           <div class="item-value c">{{ item.sex }}</div>
@@ -39,6 +35,7 @@
 
 <script setup>
 const props = defineProps(["ownerList"]);
+console.log("props", props);
 const emit = defineEmits(["close"]);
 function close() {
   emit("close");
@@ -80,14 +77,20 @@ function close() {
     }
     .table-list {
       color: #f6fcfe;
+
       .table-item {
         border-top: 1px solid #1772a0;
-        height: 30px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 每列占据相等的空间 */
+
+        // height: 30px;
         .item-value {
           text-align: center;
-          line-height: 30px;
+          // line-height: 30px;
           width: 85px;
+          height: 100%;
           border-right: 1px solid #1772a0;
+          padding: 5px 0;
         }
       }
     }
@@ -95,10 +98,10 @@ function close() {
       width: 60px !important;
     }
     .g {
-      width: 65px !important;
+      width: 156px !important;
     }
     .h {
-      width: 156px !important;
+      width: 80px !important;
     }
     .i {
       width: 100px !important;

src/view/components/screenRight.vue

@@ -12,10 +12,7 @@
         </div>
         <div class="company-info line-y">
           <div class="icon">
-            <img
-              src="../../assets/imgs/lxr_icon.png"
-              style="width: 21px; height: 25px"
-            />
+            <img src="../../assets/imgs/lxr_icon.png" style="width: 21px; height: 25px" />
             <div class="label fs-12">联系人</div>
           </div>
           <div class="info-content line-y">
@@ -31,10 +28,7 @@
         </div>
         <div class="company-info line-y">
           <div class="icon">
-            <img
-              src="../../assets/imgs/rypz_icon.png"
-              style="width: 28px; height: 29px"
-            />
+            <img src="../../assets/imgs/rypz_icon.png" style="width: 28px; height: 29px" />
             <div class="label fs-12">人员配置</div>
           </div>
           <div class="info-content line-y staffing">
@@ -46,27 +40,17 @@
         </div>
         <div class="company-info line-y">
           <div class="icon">
-            <img
-              src="../../assets/imgs/glkh_icon.png"
-              style="width: 27px; height: 26px"
-            />
+            <img src="../../assets/imgs/glkh_icon.png" style="width: 27px; height: 26px" />
             <div class="label fs-12">管理考核</div>
           </div>
-          <div
-            class="info-content examine"
-            @mouseenter="itemHover()"
-            @mouseleave="itemLeave()"
-          >
+          <div class="info-content examine" @mouseenter="itemHover()" @mouseleave="itemLeave()">
             <p v-if="currentHouseInfo.propertyAssessmentStatus === '是'">
               {{ currentHouseInfo.propertyAssessment }}
             </p>
             <p v-else>无</p>
-            <div
-              class="standard-box"
-              v-show="
+            <div class="standard-box" v-show="
                 standardShow && currentHouseInfo.propertyAssessment.length > 20
-              "
-            >
+              ">
               <div class="content">
                 {{ currentHouseInfo.propertyAssessment }}
               </div>
@@ -75,10 +59,7 @@
         </div>
         <div class="company-info line-y">
           <div class="icon">
-            <img
-              src="../../assets/imgs/wyht_icon.png"
-              style="width: 23px; height: 28px"
-            />
+            <img src="../../assets/imgs/wyht_icon.png" style="width: 23px; height: 28px" />
             <div class="label fs-12">物业合同</div>
           </div>
           <div class="info-content">
@@ -125,21 +106,13 @@
           <div class="member-info line-y">
             <div class="info-item" @click="tableShow = true">
               <div class="label">人员信息</div>
-              <div
-                class="value"
-                style="cursor: pointer; width: 270px"
-                :title="ownerTitle"
-              >
+              <div class="value" style="cursor: pointer; width: 270px" :title="ownerTitle">
                 {{ ownerTitle || "无" }}
               </div>
             </div>
           </div>
         </div>
-        <member-table
-          :ownerList="ownerList"
-          @close="tableShow = false"
-          v-if="tableShow"
-        ></member-table>
+        <member-table :ownerList="ownerList" @close="tableShow = false" v-if="tableShow"></member-table>
       </div>
       <div class="event">
         <div class="module-title">事件分析</div>
@@ -162,39 +135,20 @@
               <div class="table-header-item name">名称</div>
               <div class="table-header-item degree line-x">预警等级</div>
             </div>
-            <vue3-seamless-scroll
-              class="table-list"
-              :list="tableData"
-              :speed="scrollParams.speed"
-              :step="scrollParams.step"
-              :interval="scrollParams.interval"
-              :hover="true"
-            >
-              <div
-                class="table-item line-y"
-                v-for="(item, index) in tableData"
-                :key="index"
-                @click="itemClick(item)"
-              >
+            <vue3-seamless-scroll class="table-list" :list="tableData" :speed="scrollParams.speed" :step="scrollParams.step" :interval="scrollParams.interval" :hover="true">
+              <div class="table-item line-y" v-for="(item, index) in tableData" :key="index" @click="itemClick(item)">
                 <div class="item-value num line-x">{{ index + 1 }}</div>
                 <div class="item-value name">{{ item.name }}</div>
-                <div
-                  class="item-value degree line-x"
-                  :style="{
+                <div class="item-value degree line-x" :style="{
                     'background-color': ['#FF0400', '#FFFF00', '#05EA81'][
                       item.degree - 1
                     ],
-                  }"
-                ></div>
+                  }"></div>
               </div>
             </vue3-seamless-scroll>
           </div>
         </div>
-        <detail
-          v-if="detailShow"
-          @close="detailShow = false"
-          :detailData="detailData"
-        />
+        <detail v-if="detailShow" @close="detailShow = false" :detailData="detailData" />
       </div>
     </div>
   </div>
@@ -253,6 +207,9 @@ function getOwnerListFunc(communityId, houseId) {
     if (res.data.length) {
       ownerList.value = res.data;
       ownerTitle.value = res.data.map((i) => i.name).join("、");
+    } else {
+      ownerList.value = [];
+      ownerTitle.value = "";
     }
   });
 }