fix: 修复大屏rem设置影响全局bug
This commit is contained in:
parent
1aac583b4e
commit
627cb088cf
@ -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'
|
|
||||||
/**
|
/**
|
||||||
* 应用初始化完成之后再进行页面加载渲染
|
* 应用初始化完成之后再进行页面加载渲染
|
||||||
*/
|
*/
|
||||||
|
@ -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 = () => [
|
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',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -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"
|
||||||
|
@ -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()
|
||||||
|
|
||||||
|
@ -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()
|
||||||
|
|
||||||
|
@ -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()
|
||||||
|
|
||||||
|
@ -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()
|
||||||
|
|
||||||
// 退出方法
|
// 退出方法
|
||||||
|
@ -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()
|
||||||
|
|
||||||
|
@ -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()
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user