From 1426253122ff5ee81bd9298ce46bb2676de3cad0 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Mon, 23 Dec 2024 16:17:25 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B7=20UI(table):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E8=8F=9C=E5=8D=95=E6=94=B6=E7=BC=A9table?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=AE=A1=E7=AE=97=E5=85=AC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/gateway/collectdatamonitor.vue | 19 +++++++++++++++++--
 src/views/gateway/northboundtask.vue     | 16 +++++++++++++++-
 src/views/gateway/southdirection.vue     | 16 +++++++++++++++-
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/views/gateway/collectdatamonitor.vue b/src/views/gateway/collectdatamonitor.vue
index 5a6a7bc..91a3c1e 100644
--- a/src/views/gateway/collectdatamonitor.vue
+++ b/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();
diff --git a/src/views/gateway/northboundtask.vue b/src/views/gateway/northboundtask.vue
index aca837e..00ca80c 100644
--- a/src/views/gateway/northboundtask.vue
+++ b/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();
diff --git a/src/views/gateway/southdirection.vue b/src/views/gateway/southdirection.vue
index 91240c3..2113172 100644
--- a/src/views/gateway/southdirection.vue
+++ b/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();