1

fhKeeper/formulahousekeeper/timesheet/src/views/dashboard/index.vue

@@ -42,15 +42,7 @@
         </el-table-column>
         <el-table-column label="项目名称" min-width="260">
           <template slot-scope="scope">
-            <el-tooltip
-              :content="scope.row.projectName || '-'"
-              placement="top"
-              :disabled="!isLongText(scope.row.projectName)"
-            >
-              <span class="truncate-text">{{
-                truncateText(scope.row.projectName, 18) || "-"
-              }}</span>
-            </el-tooltip>
+            <span>{{ scope.row.projectName || "-" }}</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -304,14 +296,20 @@
           class="analysis-card"
         >
           <div class="analysis-card-title">{{ table.title }}</div>
-          <el-table :data="table.data" size="mini" border height="260">
+          <el-table
+            :data="table.data"
+            size="mini"
+            border
+            fit
+            class="analysis-fixed-table"
+            :style="{ width: '100%' }"
+          >
             <el-table-column
               v-for="column in table.columns"
               :key="column.prop"
               :prop="column.prop"
               :label="column.label"
-              :min-width="column.minWidth"
-              :width="column.width"
+              :resizable="false"
             >
               <template slot-scope="scope">
                 <TranslationOpenDataText
@@ -319,22 +317,9 @@
                   :type="openDataType(column.prop)"
                   :openid="openDataId(scope.row, column.prop)"
                 />
-                <el-tooltip
-                  v-else
-                  :content="
-                    String(
-                      scope.row[column.prop] == null
-                        ? ''
-                        : scope.row[column.prop],
-                    )
-                  "
-                  placement="top"
-                  :disabled="!isLongText(scope.row[column.prop])"
-                >
-                  <span class="truncate-text">{{
-                    truncateText(scope.row[column.prop])
-                  }}</span>
-                </el-tooltip>
+                <span v-else>{{
+                  scope.row[column.prop] == null ? '' : scope.row[column.prop]
+                }}</span>
               </template>
             </el-table-column>
           </el-table>
@@ -477,9 +462,9 @@ export default {
             projectText: this.projectText(item),
           })),
           columns: [
-            { prop: "projectText", label: "项目", minWidth: 180 },
-            { prop: "overtimeHours", label: "加班工时(h)", width: 120 },
-            { prop: "workingTime", label: "总工时(h)", width: 100 },
+            { prop: "projectText", label: "项目" },
+            { prop: "overtimeHours", label: "加班工时(h)" },
+            { prop: "workingTime", label: "总工时(h)" },
           ],
         },
         {
@@ -487,9 +472,9 @@ export default {
           title: "加班前三项目部门参与情况",
           data: this.analysisData.top3OvertimeProjectDept || [],
           columns: [
-            { prop: "departmentName", label: "部门", minWidth: 140 },
-            { prop: "overtimeHours", label: "加班工时(h)", width: 120 },
-            { prop: "workingTime", label: "总工时(h)", width: 100 },
+            { prop: "departmentName", label: "部门" },
+            { prop: "overtimeHours", label: "加班工时(h)" },
+            { prop: "workingTime", label: "总工时(h)" },
           ],
         },
         {
@@ -497,11 +482,11 @@ export default {
           title: "各部门加班总时长和平均加班时长",
           data: this.analysisData.deptOvertimeSummary || [],
           columns: [
-            { prop: "departmentName", label: "部门", minWidth: 120 },
-            { prop: "overtimeHours", label: "加班总时长(h)", width: 130 },
-            { prop: "avgOvertimeHours", label: "平均加班(h)", width: 120 },
-            { prop: "maxOvertimeHours", label: "最大加班(h)", width: 120 },
-            { prop: "workingTime", label: "总工时(h)", width: 100 },
+            { prop: "departmentName", label: "部门" },
+            { prop: "overtimeHours", label: "加班总时长(h)" },
+            { prop: "avgOvertimeHours", label: "平均加班(h)" },
+            { prop: "maxOvertimeHours", label: "最大加班(h)" },
+            { prop: "workingTime", label: "总工时(h)" },
           ],
         },
         {
@@ -509,9 +494,9 @@ export default {
           title: "各部门个人加班 TOP3",
           data: flatten(this.analysisData.deptUserOvertimeTop3),
           columns: [
-            { prop: "departmentName", label: "部门", minWidth: 120 },
-            { prop: "userName", label: "姓名", minWidth: 120 },
-            { prop: "overtimeHours", label: "加班工时(h)", width: 120 },
+            { prop: "departmentName", label: "部门" },
+            { prop: "userName", label: "姓名" },
+            { prop: "overtimeHours", label: "加班工时(h)" },
           ],
         },
         {
@@ -522,10 +507,10 @@ export default {
             projectText: this.projectText(item),
           })),
           columns: [
-            { prop: "departmentName", label: "部门", minWidth: 120 },
-            { prop: "projectText", label: "项目", minWidth: 180 },
-            { prop: "workingTime", label: "工时(h)", width: 100 },
-            { prop: "overtimeHours", label: "加班(h)", width: 100 },
+            { prop: "departmentName", label: "部门" },
+            { prop: "projectText", label: "项目" },
+            { prop: "workingTime", label: "工时(h)" },
+            { prop: "overtimeHours", label: "加班(h)" },
           ],
         },
         {
@@ -535,10 +520,10 @@ export default {
             (item) => ({ ...item, projectText: this.projectText(item) }),
           ),
           columns: [
-            { prop: "departmentName", label: "部门", minWidth: 120 },
-            { prop: "projectText", label: "项目", minWidth: 180 },
-            { prop: "overtimeHours", label: "加班工时(h)", width: 120 },
-            { prop: "workingTime", label: "总工时(h)", width: 100 },
+            { prop: "departmentName", label: "部门" },
+            { prop: "projectText", label: "项目" },
+            { prop: "overtimeHours", label: "加班工时(h)" },
+            { prop: "workingTime", label: "总工时(h)" },
           ],
         },
       ];
@@ -550,13 +535,7 @@ export default {
       this.resetWorkedProjectDialog();
       this.loadAllCharts();
     },
-    truncateText(value, maxLength = 12) {
-      const text = value == null ? "" : String(value);
-      return text.length > maxLength ? `${text.slice(0, maxLength)}...` : text;
-    },
-    isLongText(value, maxLength = 12) {
-      return value != null && String(value).length > maxLength;
-    },
+
     openDataType(prop) {
       return prop === "departmentName" ? "departmentName" : "userName";
     },
@@ -946,9 +925,7 @@ export default {
     },
     projectText(row) {
       if (!row) return "";
-      const code = row.projectCode || "未知项目";
-      const name = row.projectName || "";
-      return name ? `${code} ${name}` : code;
+      return row.projectCode || "未知项目";
     },
     getCategoryZoom(names, visibleSize) {
       const count = names.length || 1;
@@ -1102,11 +1079,7 @@ export default {
             rotate: 0,
             interval: 0,
             fontSize: 11,
-            width: 56,
-            overflow: "break",
-            lineHeight: 14,
             margin: 12,
-            formatter: (value) => this.truncateText(value, 8),
           },
         },
         yAxis: [
@@ -1141,11 +1114,7 @@ export default {
       this.chart1 = echarts.init(el, null, { width, height });
 
       const data = this.top10Data.slice();
-      const names = data.map((item) => {
-        const code = item.projectCode || "未知项目";
-        const name = item.projectName || "";
-        return name ? `${code} ${name}` : code;
-      });
+      const names = data.map((item) => item.projectCode || "未知项目");
       const workingTimes = data.map((item) => Number(item.workingTime || 0));
       const overtimeTimes = data.map((item) => Number(item.overtimeHours || 0));
 
@@ -1171,10 +1140,7 @@ export default {
             interval: 0,
             fontSize: 11,
             width: 120,
-            overflow: "truncate",
-            ellipsis: "...",
             margin: 14,
-            formatter: (value) => this.truncateText(value, 10),
           },
         },
         yAxis: {
@@ -1229,7 +1195,6 @@ export default {
       }));
 
       const deptNameHtml = this.deptNameHtml.bind(this);
-      const truncateText = this.truncateText;
       const needTranslate = this.needWxOpenData;
       const option = {
         tooltip: {
@@ -1261,8 +1226,7 @@ export default {
             itemStyle: { borderRadius: 6, borderColor: "#fff", borderWidth: 2 },
             label: {
               show: true,
-              formatter: (params) =>
-                truncateText(params.name, 8) + "\n" + params.percent + "%",
+              formatter: (params) => params.name + "\n" + params.percent + "%",
             },
             emphasis: {
               label: { show: true, fontSize: 14, fontWeight: "bold" },
@@ -1406,7 +1370,6 @@ export default {
             rotate: 45,
             interval: 0,
             fontSize: 11,
-            formatter: (value) => this.truncateText(value, 8),
           },
         },
         yAxis: [
@@ -1506,8 +1469,6 @@ export default {
         visibleSize: 5,
       });
       option.xAxis.axisLabel.rotate = 38;
-      option.xAxis.axisLabel.width = 120;
-      option.xAxis.axisLabel.overflow = "truncate";
       this.chart5.setOption(option);
       this.chart5.resize({ width, height: 380 });
     },
@@ -1626,11 +1587,7 @@ export default {
             rotate: 38,
             interval: 0,
             fontSize: 11,
-            width: 72,
-            overflow: "truncate",
-            ellipsis: "...",
             margin: 14,
-            formatter: (value) => this.truncateText(value, 8),
           },
         },
         yAxis: {
@@ -1826,15 +1783,6 @@ export default {
   grid-column: span 2;
 }
 
-.truncate-text {
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: bottom;
-}
-
 .lazy-list-status {
   height: 32px;
   line-height: 32px;
@@ -1903,6 +1851,7 @@ export default {
 
 .analysis-card {
   min-width: 0;
+  overflow: hidden;
   border: 1px solid #edf2f7;
   border-radius: 10px;
   padding: 12px;
@@ -1930,6 +1879,46 @@ export default {
   height: 180px;
 }
 
+.analysis-fixed-table {
+  width: 100% !important;
+  table-layout: fixed !important;
+}
+
+.analysis-card ::v-deep .analysis-fixed-table {
+  width: 100% !important;
+}
+
+.analysis-card ::v-deep .analysis-fixed-table .el-table__header,
+.analysis-card ::v-deep .analysis-fixed-table .el-table__body {
+  width: 100% !important;
+  table-layout: fixed !important;
+}
+
+.analysis-card ::v-deep .analysis-fixed-table .el-table__header-wrapper,
+.analysis-card ::v-deep .analysis-fixed-table .el-table__body-wrapper {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+.analysis-card ::v-deep .analysis-fixed-table .el-table__header th.gutter,
+.analysis-card ::v-deep .analysis-fixed-table .el-table__body td.gutter {
+  display: none !important;
+  width: 0 !important;
+}
+
+.analysis-card ::v-deep .analysis-fixed-table .el-table__header colgroup col[name="gutter"],
+.analysis-card ::v-deep .analysis-fixed-table .el-table__body colgroup col[name="gutter"] {
+  display: none !important;
+  width: 0 !important;
+}
+
+.analysis-card ::v-deep .analysis-fixed-table th,
+.analysis-card ::v-deep .analysis-fixed-table td {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .chart-loading i {
   margin-right: 6px;
   font-size: 18px;