fix

src/views/count/churn/portrait/components/DataTable.vue

@@ -5,13 +5,24 @@
   }" :header-cell-style="{
     ...headerCellStyle,
     ...props.headerCellStyle
-    }">
-    <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop" show-overflow-tooltip :width="item.width || ''">
+  }">
+    <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
+      show-overflow-tooltip :width="item.width || ''">
       <template #default="scope">
-        <div class="percent-box" v-if="item.type === 'percentDom'">
-          <div class="inner" :style="{ width: scope.row[item.prop] + '%' }"></div>
-        </div>
-        <div v-else class="ellipsis-box">{{ scope.row[item.prop] + (item.prop == 'percent' ? '%' : '') }}</div>
+        <el-tooltip placement="top" effect="light" v-if="item.type === 'percentDom' && props.showTooltip">
+          <div class="percent-box">
+            <div class="inner" :style="{ width: scope.row[item.prop] + '%' }"></div>
+          </div>
+          <template #content>
+            {{ scope.row['name'] }}<br>
+            TGI: {{ scope.row['tgi'] }}<br>
+            本特征卸载用户占比: {{ scope.row['percent'] }}%
+          </template>
+        </el-tooltip>
+        <div class="percent-box" v-if="item.type === 'percentDom' && !props.showTooltip">
+            <div class="inner" :style="{ width: scope.row[item.prop] + '%' }"></div>
+          </div>
+        <div v-if="item.type !== 'percentDom'" class="ellipsis-box">{{ scope.row[item.prop] + (item.prop == 'percent' ? '%' : '') }}</div>
       </template>
     </el-table-column>
   </el-table>
@@ -37,7 +48,7 @@ const headerCellStyle = ref({
 
 const props = defineProps({
   data: {
-    type: Array,
+    type: Array as PropType<any[]>,
     default: () => []
   },
   columns: {
@@ -51,11 +62,15 @@ const props = defineProps({
   },
   cellStyle: {
     type: Object,
-    default: () => {}
+    default: () => { }
   },
   headerCellStyle: {
     type: Object,
-    default: () => {}
+    default: () => { }
+  },
+  showTooltip: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -68,9 +83,9 @@ const state = reactive<BasicTableProps>({
 })
 const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
 const newData = ref(props.data);
-watch(props.data, () => {
-  newData.value = props.data;
-});
+watch(() => props.data, (newVal) => {
+  newData.value = newVal;
+}, { immediate: true, deep: true });
 </script>
 <style scoped lang="scss">
 .percent-box {
@@ -84,6 +99,7 @@ watch(props.data, () => {
     background: rgba(109, 173, 249, 1);
   }
 }
+
 .ellipsis-box {
   width: 100%;
   overflow: hidden;

src/views/count/churn/portrait/components/UserInfo.vue

@@ -57,10 +57,9 @@ const props = defineProps({
   }
 })  
 const newTags = ref(props.tags);
-watch(props.tags, () => {
-  console.log(props.tags);
+watch(() => props.tags, () => {
   newTags.value = props.tags;
-});
+}, { immediate: true, deep: true });
 </script>
 <style scoped lang="scss">
 .user-info {

src/views/count/churn/portrait/index.vue

@@ -48,13 +48,13 @@
             <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
               <el-card shadow="none">
                 <UserInfo title="易卸载用户特征" :type="true" :tags="easyTags" tips="卸载用户 vs. 活跃用户具备的明显特征，有以下特征的用户易卸载" style="margin-bottom: 24px;"></UserInfo>
-                <DataTable :data="easyData" :columns="columns"></DataTable>
+                <DataTable :data="easyData" :columns="columns" :showTooltip="true"></DataTable>
               </el-card>
             </el-col>
             <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
               <el-card shadow="none">
                 <UserInfo title="不易卸载用户特征" :type="false" :tags="hardTags" tips="活跃用户 vs. 卸载用户具备的明显差异点，有以下特征的人群卸载可能性低" style="margin-bottom: 24px;"></UserInfo>
-                <DataTable :data="hardData" :columns="columns"></DataTable>
+                <DataTable :data="hardData" :columns="columns" :showTooltip="true"></DataTable>
               </el-card>
             </el-col>
           </el-row>
@@ -141,6 +141,13 @@ const hardTags = ref<string[]>([])
 const easyTags = ref<string[]>([])
 
 const init = () => {
+  easyData.value = [];
+  hardData.value = [];
+  easyTags.value = [];
+  hardTags.value = [];
+  echartsData.value = [];
+  usageTimeData.value = [];
+  
   uninstallPortrait({
     startDate: formatDate(new Date(form.value.dateArray[0]), 'YYYY-mm-dd'),
     endDate: formatDate(new Date(form.value.dateArray[1]), 'YYYY-mm-dd'),
@@ -151,12 +158,6 @@ const init = () => {
     }
     // if (res.data?.uninstallPortraitPhaseList) {
       const newData: any[] = [];
-      easyData.value = [];
-      hardData.value = [];
-      easyTags.value = [];
-      hardTags.value = [];
-
-      usageTimeData.value = [];
       res.data?.uninstallPortraitPhaseList.forEach((item: any) => {
         newData.push({
           name: item.phase,