fix: 修复大屏rem设置影响全局bug
This commit is contained in:
parent
1aac583b4e
commit
627cb088cf
@ -1,7 +1,6 @@
|
||||
import { initPreferences } from '@vben/preferences';
|
||||
import { unmountGlobalLoading } from '@vben/utils';
|
||||
import { overridesPreferences } from './preferences';
|
||||
import './utils/flexible'
|
||||
/**
|
||||
* 应用初始化完成之后再进行页面加载渲染
|
||||
*/
|
||||
|
@ -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
|
29
apps/web-antd/src/utils/useFlexibleRem.ts
Normal file
29
apps/web-antd/src/utils/useFlexibleRem.ts
Normal 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)
|
||||
}
|
||||
})
|
||||
}
|
@ -3,11 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'inspectionPlanId',
|
||||
label: '巡检计划id',
|
||||
},
|
||||
|
||||
{
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
@ -17,6 +13,7 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
},
|
||||
fieldName: 'actInsTime',
|
||||
label: '实际巡检时间',
|
||||
labelWidth: 120,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
@ -30,11 +27,7 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
fieldName: 'taskType',
|
||||
label: '巡检方式',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'transferDesc',
|
||||
label: '转移描述',
|
||||
},
|
||||
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
@ -44,50 +37,60 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
fieldName: 'status',
|
||||
label: '巡检状态',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'createById',
|
||||
label: '创建人id',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'updateById',
|
||||
label: '更新人id',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'searchValue',
|
||||
label: '搜索值',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '主键id',
|
||||
{
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
width:60
|
||||
},
|
||||
{
|
||||
title: '巡检计划id',
|
||||
field: 'inspectionPlanId',
|
||||
{
|
||||
title: '巡检计划',
|
||||
field: 'planName',
|
||||
width:'auto'
|
||||
},
|
||||
{
|
||||
title: '巡检开始日期',
|
||||
field: 'startDate',
|
||||
width:180
|
||||
|
||||
},
|
||||
{
|
||||
title: '巡检结束日期',
|
||||
field: 'endDate',
|
||||
width:180
|
||||
|
||||
},
|
||||
{
|
||||
title: '实际巡检时间',
|
||||
field: 'actInsTime',
|
||||
width:180
|
||||
},
|
||||
{
|
||||
title: '当前巡检人',
|
||||
field: 'actUserId',
|
||||
width:'auto'
|
||||
|
||||
},
|
||||
{
|
||||
title: '巡检方式',
|
||||
field: 'taskType',
|
||||
width:'auto'
|
||||
|
||||
},
|
||||
{
|
||||
title: '转移描述',
|
||||
field: 'transferDesc',
|
||||
width:200
|
||||
},
|
||||
{
|
||||
title: '巡检状态',
|
||||
@ -96,18 +99,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
},
|
||||
{
|
||||
title: '创建人id',
|
||||
field: 'createById',
|
||||
},
|
||||
{
|
||||
title: '更新人id',
|
||||
field: 'updateById',
|
||||
},
|
||||
{
|
||||
title: '搜索值',
|
||||
field: 'searchValue',
|
||||
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@ -129,8 +121,18 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '巡检计划id',
|
||||
fieldName: 'inspectionPlanId',
|
||||
label: '巡检计划',
|
||||
fieldName: 'planName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '巡检开始日期',
|
||||
fieldName: 'startDate',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '巡检结束日期',
|
||||
fieldName: 'endDate',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
|
@ -144,6 +144,7 @@ function handleDownloadExcel() {
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="true"
|
||||
type="primary"
|
||||
v-access:code="['property:inspectionTask:add']"
|
||||
@click="handleAdd"
|
||||
|
@ -134,7 +134,8 @@ import 'echarts-gl'
|
||||
import { getThreeDBarOption } from '#/utils/threeDBarOption'
|
||||
import { renderPie3DChart } from '#/utils/pie3d'
|
||||
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
|
||||
|
||||
import { useFlexibleRem } from '#/utils/useFlexibleRem'
|
||||
useFlexibleRem()
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
|
||||
|
@ -170,7 +170,8 @@ import 'echarts-gl'
|
||||
import { getThreeDBarOption } from '#/utils/threeDBarOption'
|
||||
import { renderPie3DChart } from '#/utils/pie3d'
|
||||
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
|
||||
|
||||
import { useFlexibleRem } from '#/utils/useFlexibleRem'
|
||||
useFlexibleRem()
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
|
||||
|
@ -226,7 +226,8 @@ import 'echarts-gl'
|
||||
import { getThreeDBarOption } from '#/utils/threeDBarOption'
|
||||
import { renderPie3DChart } from '#/utils/pie3d'
|
||||
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
|
||||
|
||||
import { useFlexibleRem } from '#/utils/useFlexibleRem'
|
||||
useFlexibleRem()
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
|
||||
|
@ -47,7 +47,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import { useFlexibleRem } from '#/utils/useFlexibleRem'
|
||||
useFlexibleRem()
|
||||
const router = useRouter()
|
||||
|
||||
// 退出方法
|
||||
|
@ -113,7 +113,8 @@ import 'echarts-gl'
|
||||
import { getThreeDBarOption } from '#/utils/threeDBarOption'
|
||||
import { renderPie3DChart } from '#/utils/pie3d'
|
||||
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
|
||||
|
||||
import { useFlexibleRem } from '#/utils/useFlexibleRem'
|
||||
useFlexibleRem()
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
|
||||
|
@ -192,7 +192,8 @@ import 'echarts-gl'
|
||||
import { getThreeDBarOption } from '#/utils/threeDBarOption'
|
||||
import { renderPie3DChart } from '#/utils/pie3d'
|
||||
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
|
||||
|
||||
import { useFlexibleRem } from '#/utils/useFlexibleRem'
|
||||
useFlexibleRem()
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user