大屏修改成全屏模式

main
liutao 2 weeks ago
parent 66855e95ac
commit 9da8853f93

@ -1,5 +1,5 @@
<template> <template>
<div class="home-page"> <div class="home-page" :class="{ 'is-fullscreen': isFullscreenLayout }">
<div class="home-welcome"> <div class="home-welcome">
<div class="home-welcome-left"> <div class="home-welcome-left">
<div class="home-welcome-title text-white!">{{t("home.welcome")}}</div> <div class="home-welcome-title text-white!">{{t("home.welcome")}}</div>
@ -338,15 +338,26 @@ import { WeatherVO } from '@/api/home/info'
import bannerImg from '@/assets/imgs/banner.png' import bannerImg from '@/assets/imgs/banner.png'
import { DashboardApi,DashboardProductVO,DeviceStatusVO } from '@/api/dashboard' import { DashboardApi,DashboardProductVO,DeviceStatusVO } from '@/api/dashboard'
import { formatDate } from '@/utils/formatTime' import { formatDate } from '@/utils/formatTime'
import { useRoute } from 'vue-router'
defineOptions({ name: 'Home' }) defineOptions({ name: 'Home' })
const { t } = useI18n() const { t } = useI18n()
const route = useRoute()
const userStore = useUserStore() const userStore = useUserStore()
const { setWatermark } = useWatermark() const { setWatermark } = useWatermark()
const loading = ref(true) const loading = ref(true)
const avatar = userStore.getUser.avatar const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname const username = userStore.getUser.nickname
const isEnabledQueryValue = (value: unknown) => {
const rawValue = Array.isArray(value) ? value[0] : value
return ['1', 'true', 'yes', 'on'].includes(String(rawValue ?? '').toLowerCase())
}
const isFullscreenLayout = computed(() =>
isEnabledQueryValue(route.query.fullscreen ?? route.query.full)
)
const getCssVar = (name: string, fallback: string) => { const getCssVar = (name: string, fallback: string) => {
if (typeof window === 'undefined') return fallback if (typeof window === 'undefined') return fallback
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim() const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
@ -869,6 +880,17 @@ getAllApi()
gap: 16px; gap: 16px;
} }
.home-page.is-fullscreen {
position: fixed;
inset: 0;
z-index: 2000;
width: 100vw;
height: 100vh;
padding: 16px;
overflow: auto;
background: #f5f7fa;
}
.home-section { .home-section {
margin-bottom: 16px; margin-bottom: 16px;
} }

@ -1,5 +1,5 @@
<template> <template>
<div class="stock-overview"> <div class="stock-overview" :class="{ 'is-fullscreen': isFullscreenLayout }">
<ContentWrap> <ContentWrap>
<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px stock-overview__query" <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px stock-overview__query"
label-width="auto"> label-width="auto">
@ -175,6 +175,7 @@ import { StockApi, type StockStatisticsCardsRespVO, type StockVO } from '@/api/e
import { StockRecordApi, StockRecordVO } from '@/api/erp/stock/record' import { StockRecordApi, StockRecordVO } from '@/api/erp/stock/record'
import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse' import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
import { useDictStoreWithOut } from '@/store/modules/dict' import { useDictStoreWithOut } from '@/store/modules/dict'
import {useRoute} from "vue-router";
defineOptions({ name: 'ErpStockOverview' }) defineOptions({ name: 'ErpStockOverview' })
@ -195,7 +196,7 @@ const queryParams = reactive<{
warehouseId: undefined, warehouseId: undefined,
areaId: undefined areaId: undefined
}) })
const route = useRoute()
const cardsLoading = ref(false) const cardsLoading = ref(false)
const stockLoading = ref(false) const stockLoading = ref(false)
const recordLoading = ref(false) const recordLoading = ref(false)
@ -211,7 +212,14 @@ const recordQuery = reactive({
pageNo: 1, pageNo: 1,
pageSize: 9 pageSize: 9
}) })
const isEnabledQueryValue = (value: unknown) => {
const rawValue = Array.isArray(value) ? value[0] : value
return ['1', 'true', 'yes', 'on'].includes(String(rawValue ?? '').toLowerCase())
}
const isFullscreenLayout = computed(() =>
isEnabledQueryValue(route.query.fullscreen ?? route.query.full)
)
const displayValue = (value: unknown) => { const displayValue = (value: unknown) => {
return value === undefined || value === null || value === '' ? '-' : value return value === undefined || value === null || value === '' ? '-' : value
} }
@ -476,6 +484,16 @@ onMounted(async () => {
<style scoped lang="scss"> <style scoped lang="scss">
.stock-overview { .stock-overview {
&.is-fullscreen {
position: fixed;
inset: 0;
z-index: 2000;
width: 100vw;
height: 100vh;
padding: 16px;
overflow: auto;
background: #f5f7fa;
}
.stock-overview__query { .stock-overview__query {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;

@ -1,5 +1,5 @@
<template> <template>
<div class="energy-overview-page"> <div class="energy-overview-page" :class="{ 'is-fullscreen': isFullscreenLayout }">
<ContentWrap> <ContentWrap>
<el-form <el-form
ref="queryFormRef" ref="queryFormRef"
@ -181,6 +181,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
import { useRoute } from 'vue-router'
import { Echart } from '@/components/Echart' import { Echart } from '@/components/Echart'
import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype' import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype'
import { import {
@ -196,6 +197,17 @@ import { handleTree } from '@/utils/tree'
defineOptions({ name: 'EnergyOverview' }) defineOptions({ name: 'EnergyOverview' })
const route = useRoute()
const isEnabledQueryValue = (value: unknown) => {
const rawValue = Array.isArray(value) ? value[0] : value
return ['1', 'true', 'yes', 'on'].includes(String(rawValue ?? '').toLowerCase())
}
const isFullscreenLayout = computed(() =>
isEnabledQueryValue(route.query.fullscreen ?? route.query.full)
)
interface MetricCard { interface MetricCard {
key: string key: string
label: string label: string
@ -911,6 +923,17 @@ watch(
<style scoped lang="scss"> <style scoped lang="scss">
.energy-overview-page { .energy-overview-page {
&.is-fullscreen {
position: fixed;
inset: 0;
z-index: 2000;
width: 100vw;
height: 100vh;
padding: 16px;
overflow: auto;
background: #f5f7fa;
}
.energy-overview-filter { .energy-overview-filter {
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 15px; margin-bottom: 15px;

Loading…
Cancel
Save