Browse Source

fix: 企业数据可视化地图代码优化

zhangying 9 months ago
parent
commit
95edd3fef4
1 changed files with 35 additions and 64 deletions
  1. 35 64
      vue/src/views/companyService/dataMap/index.vue

+ 35 - 64
vue/src/views/companyService/dataMap/index.vue

@@ -83,15 +83,17 @@
             </p>
             <!-- 岗位 -->
             <div class="company-post-box label-text">
-              <span>招聘岗位:</span>
-              <a-tag v-if="company.postList && company.postList.length > 0" v-for="(label, index) in company.postList"
+              <span style="width: 65px; flex: 0 0 auto">招聘岗位:</span>
+              <a-tag v-if="company.postList && company.postList.length > 0"
+                     v-for="(label, index) in company.postList.slice(0, 3)"
                      :key="index">
                 {{ label.professionName }}
               </a-tag>
-              <span v-if="company.postList && company.postList.length > 0" class="all-post-btn">
+              <span v-if="company.postList && company.postList.length > 3" class="all-post-btn"
+                    style="width: 25px;flex: 0 0 auto">
                 更多
               </span>
-              <span v-else>暂无</span>
+              <span v-if="company.postList.length == 0" style="width: 25px;flex: 0 0 auto">暂无</span>
             </div>
             <!-- 标签 -->
             <div class="company-label-box" v-if="company.labelList && company.labelList.length > 0"
@@ -99,10 +101,10 @@
               <a-tag v-for="(label, labelIndex) in company.labelList" :key="labelIndex">
                 {{ label.labelName }}
               </a-tag>
-              <div v-if="showLaunchBtnBox(index)">
+              <div v-if="showLaunchBtnBox(companyLabelBoxRef,index,50)">
                 <span class="launch-btn" v-if="company.labelExpanded"
-                      @click.stop="companyLabelOpen(company)">展开</span>
-                <span class="launch-btn" v-else @click.stop="companyLabelOpen(company)">收起</span>
+                      @click.stop="company.labelExpanded = false">展开</span>
+                <span class="launch-btn" v-else @click.stop="company.labelExpanded = true">收起</span>
               </div>
             </div>
           </div>
@@ -141,10 +143,10 @@
             <a-tag v-for="(label, index) in nowCheckCompany.labelList" :key="index">
               {{ label.labelName }}
             </a-tag>
-            <div v-if="postBoxCompanyShowLaunchBtn()">
+            <div v-if="showLaunchBtnBox(postBoxCompanyLabelBoxRef, null, 50)">
               <span class="launch-btn" v-if="postBoxCompanyLabelExpanded"
-                    @click.stop="postBoxCompanyLabelOpen">展开</span>
-              <span class="launch-btn" v-else @click.stop="postBoxCompanyLabelOpen">收起</span>
+                    @click.stop="postBoxCompanyLabelExpanded = false">展开</span>
+              <span class="launch-btn" v-else @click.stop="postBoxCompanyLabelExpanded = true">收起</span>
             </div>
           </div>
         </div>
@@ -170,10 +172,10 @@
                    :class="{'post-desc-max-height': post.descExpanded}">
                 岗位要求:{{ post.postDesc }}
               </div>
-              <div v-if="postDescLaunchBtnBox(postIndex)">
+              <div v-if="showLaunchBtnBox(postDescBoxRef,postIndex,35)">
                 <span class="launch-btn" v-if="post.descExpanded"
-                      @click.stop="postDescOpen(post)">展开</span>
-                <span class="launch-btn " v-else @click.stop="postDescOpen(post)">收起</span>
+                      @click.stop="post.descExpanded = false">展开</span>
+                <span class="launch-btn " v-else @click.stop="post.descExpanded = true">收起</span>
               </div>
             </div>
             <!-- 标签 -->
@@ -182,10 +184,10 @@
               <a-tag v-for="(label, labelIndex) in post.labelList" :key="labelIndex">
                 {{ label.labelName }}
               </a-tag>
-              <div v-if="postListShowLaunchBtnBox(postIndex)">
+              <div v-if="showLaunchBtnBox(postLabelBoxRef,postIndex,50)">
                 <span class="launch-btn" v-if="post.labelExpanded"
-                      @click.stop="postLabelOpen(post)">展开</span>
-                <span class="launch-btn" v-else @click.stop="postLabelOpen(post)">收起</span>
+                      @click.stop="post.labelExpanded = true">展开</span>
+                <span class="launch-btn" v-else @click.stop="post.labelExpanded = false">收起</span>
               </div>
             </div>
           </div>
@@ -527,52 +529,19 @@ const showSalary = (minSalary: any, maxSalary: any) => {
   }
 }
 
-// 是否显示展开按钮
-function showLaunchBtnBox(index) {
-  if (companyLabelBoxRef.value[index] && companyLabelBoxRef.value[index].scrollHeight) {
-    return companyLabelBoxRef.value[index]?.scrollHeight > 50
-  }
-  return false;
-}
-
-function postBoxCompanyShowLaunchBtn() {
-  if (postBoxCompanyLabelBoxRef.value && postBoxCompanyLabelBoxRef.value.scrollHeight) {
-    return postBoxCompanyLabelBoxRef.value?.scrollHeight > 50
-  }
-  return false;
-}
-
-function postListShowLaunchBtnBox(index) {
-  if (postLabelBoxRef.value[index] && postLabelBoxRef.value[index].scrollHeight) {
-    return postLabelBoxRef.value[index]?.scrollHeight > 50
-  }
-  return false;
-}
-
-function postDescLaunchBtnBox(index) {
-  if (postDescBoxRef.value[index] && postDescBoxRef.value[index].scrollHeight) {
-    return postDescBoxRef.value[index]?.scrollHeight > 35
+// 企业标签,岗位标签等的展开与收起按钮是否显示判断方法
+function showLaunchBtnBox(refValue: any, index: any, scrollHeight: any) {
+  if (index != null) {
+    if (refValue[index] && refValue[index].scrollHeight) {
+      return refValue[index]?.scrollHeight > scrollHeight
+    }
+    return false;
+  } else {
+    if (refValue && refValue.scrollHeight) {
+      return refValue?.scrollHeight > scrollHeight
+    }
+    return false;
   }
-  return false;
-}
-
-// 企业标签展开
-function companyLabelOpen(company) {
-  company.labelExpanded = !company.labelExpanded;
-}
-
-function postBoxCompanyLabelOpen() {
-  postBoxCompanyLabelExpanded.value = !postBoxCompanyLabelExpanded.value;
-}
-
-// 岗位标签展开
-function postLabelOpen(post) {
-  post.labelExpanded = !post.labelExpanded;
-}
-
-// 岗位要求展开
-function postDescOpen(post) {
-  post.descExpanded = !post.descExpanded;
 }
 
 onMounted(() => {
@@ -580,7 +549,6 @@ onMounted(() => {
   getCompanyModelList();
   getAllSites();
   getRegionList();
-  // onSearch();
 })
 </script>
 
@@ -699,12 +667,15 @@ export default {
         cursor: pointer;
 
         .company-post-box {
+          width: 100%;
           display: flex;
-          flex-wrap: wrap;
+          flex-wrap: nowrap;
           align-items: center;
 
           .ant-tag {
-            width: 55px;
+            flex: 1 1 auto;
+            min-width: 0;
+            max-width: fit-content;
           }
 
           .all-post-btn {