fix: 修复大屏rem设置影响全局bug

This commit is contained in:
fyy 2025-07-11 15:45:25 +08:00
parent 1aac583b4e
commit 627cb088cf
11 changed files with 88 additions and 63 deletions

View File

@ -1,7 +1,6 @@
import { initPreferences } from '@vben/preferences'; import { initPreferences } from '@vben/preferences';
import { unmountGlobalLoading } from '@vben/utils'; import { unmountGlobalLoading } from '@vben/utils';
import { overridesPreferences } from './preferences'; import { overridesPreferences } from './preferences';
import './utils/flexible'
/** /**
* *
*/ */

View File

@ -1,12 +0,0 @@
function setRootFontSize(): void {
const baseWidth = 1920 // 设计稿宽度
const baseFontSize = 16 // 设计稿根字体
const screenWidth = window.innerWidth
const fontSize = (screenWidth / baseWidth) * baseFontSize
document.documentElement.style.fontSize = fontSize + 'px'
}
setRootFontSize()
window.addEventListener('resize', setRootFontSize)
export default setRootFontSize

View File

@ -0,0 +1,29 @@
//在需要的页面单独引入,不然会影响全局
import { onMounted, onBeforeUnmount } from 'vue'
export function useFlexibleRem() {
let originFontSize = ''
let resizeHandler: (() => void) | null = null
const setRemBase = () => {
const html = document.documentElement
const width = window.innerWidth
html.style.fontSize = (width / 1920) * 16 + 'px'
}
onMounted(() => {
// 记录原始 font-size
originFontSize = document.documentElement.style.fontSize
setRemBase()
resizeHandler = setRemBase
window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
// 离开页面时恢复原始 font-size
document.documentElement.style.fontSize = originFontSize
if (resizeHandler) {
window.removeEventListener('resize', resizeHandler)
}
})
}

View File

@ -3,11 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
export const querySchema: FormSchemaGetter = () => [ export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'inspectionPlanId',
label: '巡检计划id',
},
{ {
component: 'DatePicker', component: 'DatePicker',
componentProps: { componentProps: {
@ -17,6 +13,7 @@ export const querySchema: FormSchemaGetter = () => [
}, },
fieldName: 'actInsTime', fieldName: 'actInsTime',
label: '实际巡检时间', label: '实际巡检时间',
labelWidth: 120,
}, },
{ {
component: 'Input', component: 'Input',
@ -30,11 +27,7 @@ export const querySchema: FormSchemaGetter = () => [
fieldName: 'taskType', fieldName: 'taskType',
label: '巡检方式', label: '巡检方式',
}, },
{
component: 'Textarea',
fieldName: 'transferDesc',
label: '转移描述',
},
{ {
component: 'RadioGroup', component: 'RadioGroup',
componentProps: { componentProps: {
@ -44,50 +37,60 @@ export const querySchema: FormSchemaGetter = () => [
fieldName: 'status', fieldName: 'status',
label: '巡检状态', label: '巡检状态',
}, },
{
component: 'Input',
fieldName: 'createById',
label: '创建人id',
},
{
component: 'Input',
fieldName: 'updateById',
label: '更新人id',
},
{
component: 'Input',
fieldName: 'searchValue',
label: '搜索值',
},
]; ];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [ // export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [ export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 }, { type: 'checkbox', width: 60 },
{ {
title: '主键id', title: '序号',
field: 'id', field: 'id',
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
},
},
width:60
}, },
{ {
title: '巡检计划id', title: '巡检计划',
field: 'inspectionPlanId', field: 'planName',
width:'auto'
},
{
title: '巡检开始日期',
field: 'startDate',
width:180
},
{
title: '巡检结束日期',
field: 'endDate',
width:180
}, },
{ {
title: '实际巡检时间', title: '实际巡检时间',
field: 'actInsTime', field: 'actInsTime',
width:180
}, },
{ {
title: '当前巡检人', title: '当前巡检人',
field: 'actUserId', field: 'actUserId',
width:'auto'
}, },
{ {
title: '巡检方式', title: '巡检方式',
field: 'taskType', field: 'taskType',
width:'auto'
}, },
{ {
title: '转移描述', title: '转移描述',
field: 'transferDesc', field: 'transferDesc',
width:200
}, },
{ {
title: '巡检状态', title: '巡检状态',
@ -96,18 +99,7 @@ export const columns: VxeGridProps['columns'] = [
{ {
title: '备注', title: '备注',
field: 'remark', field: 'remark',
},
{
title: '创建人id',
field: 'createById',
},
{
title: '更新人id',
field: 'updateById',
},
{
title: '搜索值',
field: 'searchValue',
}, },
{ {
field: 'action', field: 'action',
@ -129,8 +121,18 @@ export const modalSchema: FormSchemaGetter = () => [
}, },
}, },
{ {
label: '巡检计划id', label: '巡检计划',
fieldName: 'inspectionPlanId', fieldName: 'planName',
component: 'Input',
},
{
label: '巡检开始日期',
fieldName: 'startDate',
component: 'Input',
},
{
label: '巡检结束日期',
fieldName: 'endDate',
component: 'Input', component: 'Input',
}, },
{ {

View File

@ -144,6 +144,7 @@ function handleDownloadExcel() {
{{ $t('pages.common.delete') }} {{ $t('pages.common.delete') }}
</a-button> </a-button>
<a-button <a-button
:disabled="true"
type="primary" type="primary"
v-access:code="['property:inspectionTask:add']" v-access:code="['property:inspectionTask:add']"
@click="handleAdd" @click="handleAdd"

View File

@ -134,7 +134,8 @@ import 'echarts-gl'
import { getThreeDBarOption } from '#/utils/threeDBarOption' import { getThreeDBarOption } from '#/utils/threeDBarOption'
import { renderPie3DChart } from '#/utils/pie3d' import { renderPie3DChart } from '#/utils/pie3d'
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize' import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
import { useFlexibleRem } from '#/utils/useFlexibleRem'
useFlexibleRem()
// //
const router = useRouter() const router = useRouter()

View File

@ -170,7 +170,8 @@ import 'echarts-gl'
import { getThreeDBarOption } from '#/utils/threeDBarOption' import { getThreeDBarOption } from '#/utils/threeDBarOption'
import { renderPie3DChart } from '#/utils/pie3d' import { renderPie3DChart } from '#/utils/pie3d'
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize' import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
import { useFlexibleRem } from '#/utils/useFlexibleRem'
useFlexibleRem()
// //
const router = useRouter() const router = useRouter()

View File

@ -226,7 +226,8 @@ import 'echarts-gl'
import { getThreeDBarOption } from '#/utils/threeDBarOption' import { getThreeDBarOption } from '#/utils/threeDBarOption'
import { renderPie3DChart } from '#/utils/pie3d' import { renderPie3DChart } from '#/utils/pie3d'
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize' import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
import { useFlexibleRem } from '#/utils/useFlexibleRem'
useFlexibleRem()
// //
const router = useRouter() const router = useRouter()

View File

@ -47,7 +47,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import { useFlexibleRem } from '#/utils/useFlexibleRem'
useFlexibleRem()
const router = useRouter() const router = useRouter()
// 退 // 退

View File

@ -113,7 +113,8 @@ import 'echarts-gl'
import { getThreeDBarOption } from '#/utils/threeDBarOption' import { getThreeDBarOption } from '#/utils/threeDBarOption'
import { renderPie3DChart } from '#/utils/pie3d' import { renderPie3DChart } from '#/utils/pie3d'
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize' import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
import { useFlexibleRem } from '#/utils/useFlexibleRem'
useFlexibleRem()
// //
const router = useRouter() const router = useRouter()

View File

@ -192,7 +192,8 @@ import 'echarts-gl'
import { getThreeDBarOption } from '#/utils/threeDBarOption' import { getThreeDBarOption } from '#/utils/threeDBarOption'
import { renderPie3DChart } from '#/utils/pie3d' import { renderPie3DChart } from '#/utils/pie3d'
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize' import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
import { useFlexibleRem } from '#/utils/useFlexibleRem'
useFlexibleRem()
// //
const router = useRouter() const router = useRouter()