新增计算表格列宽方法

表格改为列宽自适应

src/utils/table.ts

@@ -0,0 +1,32 @@
+/**
+ * 计算字符串“字数”
+ * 中文 / 全角字符：1
+ * 英文 / 数字 / 半角符号：0.5
+ */
+export function calcTextLength(text: string): number {
+  let length = 0;
+
+  for (const char of text) {
+    // charCode > 255 基本可以认为是中文或全角字符
+    if (char.charCodeAt(0) > 255) {
+      length += 1;
+    } else {
+      length += 0.5;
+    }
+  }
+
+  return length;
+}
+
+/**
+ * 根据文本计算列宽
+ */
+export function calcColumnWidth(
+  text: string,
+  unitWidth = 24,
+  minWidth = 50,
+  maxWidth = 150
+) {
+  const width = calcTextLength(text) * unitWidth;
+  return Math.min(Math.max(width, minWidth), maxWidth);
+}

src/views/Line1/L1-data-list/index.vue

@@ -39,7 +39,7 @@
     <!-- 数据表格 -->
     <div class="table-section">
       <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
-        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 1200 }">
+        @change="handleTableChange" row-key="id" size="middle" table-layout="fixed" :scroll="{ x: 'max-content'}">
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'index'">{{ index + 1 }}</template>
           <template v-else-if="['createTime', 'updateTime', 'recordTime'].includes(column.key as string)">

src/views/Line1/alarm-records/index.vue

@@ -33,7 +33,7 @@
     <!-- 数据表格 -->
     <div class="table-section">
       <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
-        @change="handleTableChange" row-key="alarmId" size="middle" :scroll="{ x: 1200 }">
+        @change="handleTableChange" row-key="alarmId" size="middle" :scroll="{ x: 'max-content'}">
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'index'">{{ index + 1 }}</template>
           <template v-else-if="['alarmDatetime', 'updateTime', 'createTime'].includes(column.key as string)">

src/views/Line2/L1-data-list/index.vue

@@ -33,7 +33,7 @@
     <!-- 数据表格 -->
     <div class="table-section">
       <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
-        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 1200 }">
+        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 'max-content'}">
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'index'">{{ index + 1 }}</template>
           <template v-else-if="column.key === 'createTime'">

src/views/Line2/L4-data-list/index.vue

@@ -33,7 +33,7 @@
     <!-- 数据表格 -->
     <div class="table-section">
       <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
-        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 1200 }">
+        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 'max-content'}">
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'index'">{{ index + 1 }}</template>
           <template v-if="column.key === 'createTime'">