🌷 UI(table): 调整侧边菜单收缩table宽度计算公式
This commit is contained in:
parent
40671042c0
commit
1426253122
|
@ -71,9 +71,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted } from 'vue';
|
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import { endDeviceCollect, getDeviceCollectli, getDeviceEquipli, startDeviceCollect } from '/@/api/gateway/collectdatamonitor';
|
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 deviceConfigTableRef = ref();
|
||||||
const deviceDataTableRef = ref();
|
const deviceDataTableRef = ref();
|
||||||
|
@ -217,9 +222,19 @@ const deviceConfigClick = (e) => {
|
||||||
//更新表格宽度
|
//更新表格宽度
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
deviceDataTableRef.value.doLayout();
|
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(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize);
|
||||||
getDeviceList();
|
getDeviceList();
|
||||||
|
|
|
@ -249,7 +249,11 @@
|
||||||
import { reactive, ref, onMounted, onUnmounted, computed, watch } from 'vue';
|
import { reactive, ref, onMounted, onUnmounted, computed, watch } from 'vue';
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
import { getPlatformConf, setPlatformConf } from '/@/api/gateway/northboundtask';
|
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([
|
const uploadModeList = ref([
|
||||||
{ value: 'timer 10', link: 'timer 10' },
|
{ value: 'timer 10', link: 'timer 10' },
|
||||||
|
@ -558,9 +562,19 @@ const taskConfigClick = (e) => {
|
||||||
//更新表格宽度
|
//更新表格宽度
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
deviceDataTableRef.value.doLayout();
|
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(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize);
|
||||||
getDeviceConfig();
|
getDeviceConfig();
|
||||||
|
|
|
@ -364,6 +364,11 @@ import FileSaver from 'file-saver';
|
||||||
import * as XLSX from 'xlsx';
|
import * as XLSX from 'xlsx';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { getDeviceConf, getSerialPortDataList, setDeviceConf } from '/@/api/gateway/southdirection';
|
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([
|
const dataTypeArray = ref([
|
||||||
{ type: 'bool', datalen: 1, show: false },
|
{ type: 'bool', datalen: 1, show: false },
|
||||||
|
@ -826,8 +831,17 @@ const deviceConfigClick = (e, event, column) => {
|
||||||
//更新表格宽度
|
//更新表格宽度
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
deviceDataTableRef.value.doLayout();
|
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 exportDeviceConfigXlsx = () => {
|
||||||
const workbook = XLSX.utils.book_new();
|
const workbook = XLSX.utils.book_new();
|
||||||
|
|
Loading…
Reference in New Issue