🌷 UI(table): 调整侧边菜单收缩table宽度计算公式

src/views/gateway/collectdatamonitor.vue

@@ -71,9 +71,14 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { endDeviceCollect, getDeviceCollectli, getDeviceEquipli, startDeviceCollect } from '/@/api/gateway/collectdatamonitor';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
 
 const deviceConfigTableRef = ref();
 const deviceDataTableRef = ref();
@@ -217,9 +222,19 @@ const deviceConfigClick = (e) => {
 //更新表格宽度
 const handleResize = () => {
 	deviceDataTableRef.value.doLayout();
-	tabelBox.value = window.innerWidth - 180 - 10;
+	tabelBox.value = themeConfig.value.isCollapse?window.innerWidth - 64 - 10:window.innerWidth - 180 - 10;
 };
 
+watch(
+	() => themeConfig.value.isCollapse,
+	() => {
+		handleResize();
+	},
+	{
+		deep: true,
+	}
+);
+
 onMounted(() => {
 	window.addEventListener('resize', handleResize);
 	getDeviceList();

src/views/gateway/northboundtask.vue

@@ -249,7 +249,11 @@
 import { reactive, ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { getPlatformConf, setPlatformConf } from '/@/api/gateway/northboundtask';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
 
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
 //上报策略
 const uploadModeList = ref([
 	{ value: 'timer 10', link: 'timer 10' },
@@ -558,9 +562,19 @@ const taskConfigClick = (e) => {
 //更新表格宽度
 const handleResize = () => {
 	deviceDataTableRef.value.doLayout();
-	tabelBox.value = window.innerWidth - 180 - 10;
+	tabelBox.value = themeConfig.value.isCollapse?window.innerWidth - 64 - 10:window.innerWidth - 180 - 10;
 };
 
+watch(
+	() => themeConfig.value.isCollapse,
+	() => {
+		handleResize();
+	},
+	{
+		deep: true,
+	}
+);
+
 onMounted(() => {
 	window.addEventListener('resize', handleResize);
 	getDeviceConfig();

src/views/gateway/southdirection.vue

@@ -364,6 +364,11 @@ import FileSaver from 'file-saver';
 import * as XLSX from 'xlsx';
 import dayjs from 'dayjs';
 import { getDeviceConf, getSerialPortDataList, setDeviceConf } from '/@/api/gateway/southdirection';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
 
 const dataTypeArray = ref([
 	{ type: 'bool', datalen: 1, show: false },
@@ -826,8 +831,17 @@ const deviceConfigClick = (e, event, column) => {
 //更新表格宽度
 const handleResize = () => {
 	deviceDataTableRef.value.doLayout();
-	tabelBox.value = window.innerWidth - 180 - 10;
+	tabelBox.value = themeConfig.value.isCollapse?window.innerWidth - 64 - 10:window.innerWidth - 180 - 10;
 };
+watch(
+	() => themeConfig.value.isCollapse,
+	() => {
+		handleResize();
+	},
+	{
+		deep: true,
+	}
+);
 
 const exportDeviceConfigXlsx = () => {
 	const workbook = XLSX.utils.book_new();