feat: 名称脱敏

src/views/waitList/index.vue

@@ -1,6 +1,7 @@
 <template>
   <section class="waitBox bg-[#F3F2FA]">
-    <nav class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF] relative overflow-hidden">
+    <nav
+      class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF] relative overflow-hidden">
       <div class="logBox h-[5vh]">
         <img class="h-full" src="@/assets/svg/Wait/yanan-logo.png" />
       </div>
@@ -19,14 +20,17 @@
       <div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-30px)]">
         <div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
           <template v-for="item in colList">
-            <div class="font-semibold border-r truncate" :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`" :key="item['columnCode']" v-if="item['isShow']">
+            <div class="font-semibold border-r truncate"
+              :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`" :key="item['columnCode']"
+              v-if="item['isShow']">
               {{ item['columnName'] }}
             </div>
           </template>
         </div>
         <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
           <template v-if="patientList['length']">
-            <el-carousel direction="vertical" :autoplay="false" indicatorPosition="none" ref="carousel" @change="onCarouselChange">
+            <el-carousel direction="vertical" :autoplay="false" indicatorPosition="none" ref="carousel"
+              @change="onCarouselChange">
               <el-carousel-item v-for="(item, index) in patientList" :key="index">
                 <section class="carouselItemBox">
                   <template v-for="(subItem, index) in item">
@@ -34,22 +38,23 @@
                       <div class="flex text-center">
                         <template v-for="item in colList">
                           <template v-if="item['columnCode'] == 'ProcStatusName'">
-                            <div
+                            <div class="border-r text-[#333] font-semibold truncate"
-                              class="border-r text-[#333] font-semibold truncate"
                               :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}`, 'flex-basis': `${item['width']}px` }"
-                              :key="item['columnCode']"
+                              :key="item['columnCode']" v-if="item['isShow']">
-                              v-if="item['isShow']"
-                            >
                               {{ subItem['ProcStatusName'] }}
                             </div>
                           </template>
+                          <template v-else-if="item['columnCode'] == 'PatientName'">
+                            <div class="border-r text-[#333] font-semibold truncate"
+                              :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`"
+                              :key="item['columnCode']" v-if="item['isShow']">
+                              {{ desensitizationText(subItem[item['columnCode']]) }}
+                            </div>
+                          </template>
                           <template v-else>
-                            <div
+                            <div class="border-r text-[#333] font-semibold truncate"
-                              class="border-r text-[#333] font-semibold truncate"
                               :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`"
-                              :key="item['columnCode']"
+                              :key="item['columnCode']" v-if="item['isShow']">
-                              v-if="item['isShow']"
-                            >
                               {{ subItem[item['columnCode']] }}
                             </div>
                           </template>
@@ -73,7 +78,8 @@
 
       <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex">
         <template v-for="(item, index) in patientList">
-          <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ '!bg-[#8C8D92]': index == activeIndex }" :key="index" />
+          <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ '!bg-[#8C8D92]': index == activeIndex }"
+            :key="index" />
         </template>
       </div>
     </main>
@@ -128,7 +134,8 @@ export default {
     textWaitToColor,
     onGetPageData() {
       let today = dayjs().format('YYYY-MM-DD');
-      // today = '2024-06-06';
+      // let today = '2024-06-06';
+      // let today = '2025-02-26';
       const QueryFiledDic = {};
       this.queryCondition.forEach(queryItem => {
         if (queryItem['queryType'] == 'dateTime') {
@@ -270,6 +277,15 @@ export default {
         }
       }
     },
+    desensitizationText(text) {
+      if (text.length <= 1) {
+        return text; 
+      }
+      if (text.length === 2) {
+        return text.charAt(0) + '*';  
+      }
+      return text.charAt(0) + '*'.repeat(text.length - 2) + text.charAt(text.length - 1);
+    }
   },
   mounted() {
     this.$nextTick(() => {
@@ -285,6 +301,8 @@ export default {
       }).then(res => {
         if (res['Data']['Data']['length']) {
           res = res['Data']['Data'][0];
+          console.log(JSON.parse(res['ReportHeadColumn']));
+
           this.colList = JSON.parse(res['ReportHeadColumn']);
           this.queryCondition = JSON.parse(res['QueryCondition']);
         }
@@ -353,19 +371,23 @@ export default {
 <style lang="scss" scoped>
 :deep(.el-carousel) {
   height: 100%;
+
   .el-carousel__container,
   .el-carousel__item {
     height: 100%;
+
     .carouselItemBox {
-      > div:nth-child(odd) {
+      >div:nth-child(odd) {
         background: #fff;
       }
-      > div:nth-child(even) {
+
+      >div:nth-child(even) {
         background: #f5f8ff;
       }
     }
   }
 }
+
 .popupBox {
   position: absolute;
   top: 0%;
@@ -373,6 +395,7 @@ export default {
   width: 100%;
   height: 100%;
   z-index: 9999;
+
   div {
     position: absolute;
     top: 50%;
@@ -384,6 +407,7 @@ export default {
     padding: 3vh;
     backdrop-filter: blur(2px);
     background: #ece5ffe6;
+
     p {
       color: #333;
       text-align: center;