修改驾驶舱页面
This commit is contained in:
guanj
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader :showSearch="false">
|
||||
<TableHeader :showSearch="false" v-if="flag">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true"></DatePicker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" icon="el-icon-Edit" @click="editd">编辑</el-button>
|
||||
<el-button type="primary" icon="el-icon-Tools" @click="settings">设置</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<GridLayout
|
||||
v-model:layout="layout"
|
||||
:row-height="rowHeight"
|
||||
@@ -21,66 +26,74 @@
|
||||
<div class="box">
|
||||
<div class="title">
|
||||
<div style="display: flex; align-items: center">
|
||||
<Icon class="HelpFilled" :name="item.icon" />
|
||||
{{ item.name }}
|
||||
<Icon class="HelpFilled" :name="(item as LayoutItem).icon" />
|
||||
{{ (item as LayoutItem).name }}
|
||||
</div>
|
||||
<!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
|
||||
<img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" />
|
||||
</div>
|
||||
<div>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-if="item.component"
|
||||
:is="(item as LayoutItem).component"
|
||||
v-if="(item as LayoutItem).component"
|
||||
class="pd10"
|
||||
:key="key"
|
||||
:timeValue="datePickerRef.timeValue"
|
||||
:timeValue="datePickerRef?.timeValue || 3"
|
||||
:height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
|
||||
:width="rowWidth * item.w - 30 + 'px'"
|
||||
:timeKey="item.timeKey"
|
||||
:timeKey="(item as LayoutItem).timeKey"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
/>
|
||||
<div v-else class="pd10">组件加载失败...</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</GridLayout>
|
||||
<!-- 设置 -->
|
||||
<RoutingConfig ref="RoutingConfigRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, markRaw, onUnmounted, defineAsyncComponent, type Component } from 'vue'
|
||||
import { ref, reactive, onMounted, markRaw, onUnmounted, computed, defineAsyncComponent, type Component } from 'vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { GridLayout } from 'grid-layout-plus'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { queryActivatePage, queryByPagePath } from '@/api/system-boot/csstatisticalset'
|
||||
import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
|
||||
import RoutingConfig from '@/views/pqs/cockpit/homePage/components/routingConfig.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const { push } = useRouter()
|
||||
const datePickerRef = ref()
|
||||
const router = useRouter()
|
||||
|
||||
// defineOptions({
|
||||
// name: 'cockpit/homePage'
|
||||
// })
|
||||
defineOptions({
|
||||
// name: 'dashboard/index'
|
||||
})
|
||||
// 定义类型
|
||||
interface LayoutItem {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
timeKey: number | string
|
||||
i: string | number
|
||||
name: string
|
||||
path: string
|
||||
icon?: string // 新增 icon 可选字段
|
||||
component?: Component | string
|
||||
loading?: boolean
|
||||
error?: any
|
||||
}
|
||||
const RoutingConfigRef = ref()
|
||||
const key = ref(0)
|
||||
const img = new URL(`@/assets/img/amplify.png`, import.meta.url)
|
||||
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url)
|
||||
const img = new URL(`@/assets/img/amplify.png`, import.meta.url).href
|
||||
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url).href
|
||||
// 响应式数据
|
||||
const rowHeight = ref(0)
|
||||
const rowWidth = ref(0)
|
||||
const layout = ref<LayoutItem[]>([
|
||||
const layout: any = ref([
|
||||
// {
|
||||
// x: 4,
|
||||
// y: 0,
|
||||
@@ -91,11 +104,11 @@ const layout = ref<LayoutItem[]>([
|
||||
// path: '/src/views/pqs/runManage/assessment/components/uese/index.vue'
|
||||
// },
|
||||
])
|
||||
const layoutCopy = ref<LayoutItem[]>([])
|
||||
const layoutCopy: any = ref([])
|
||||
const flag = ref(true)
|
||||
// 组件映射
|
||||
const componentMap = reactive(new Map<string, Component | string>())
|
||||
|
||||
const dataList: any = ref({})
|
||||
// 获取主内容区域高度
|
||||
const getMainHeight = () => {
|
||||
const elMain = document.querySelector('.el-main')
|
||||
@@ -109,7 +122,7 @@ const getMainWidth = () => {
|
||||
|
||||
// 初始化行高
|
||||
const initRowHeight = () => {
|
||||
rowHeight.value = Math.max(0, (getMainHeight() - 72) / 6)
|
||||
rowHeight.value = Math.max(0, (getMainHeight() - 77 + (flag.value ? 0 : 56)) / 6)
|
||||
rowWidth.value = Math.max(0, getMainWidth() / 12)
|
||||
}
|
||||
|
||||
@@ -153,13 +166,14 @@ const zoom = (value: any) => {
|
||||
if (flag.value) {
|
||||
layout.value = [{ ...value, x: 0, y: 0, w: 12, h: 6 }]
|
||||
} else {
|
||||
layout.value = layoutCopy.value.map((item, index) => ({
|
||||
layout.value = layoutCopy.value.map((item:any, index: number) => ({
|
||||
...item,
|
||||
i: item.i || index, // 确保有唯一标识
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
}
|
||||
flag.value = !flag.value
|
||||
initRowHeight()
|
||||
key.value += 1
|
||||
}
|
||||
// 计算组件高度
|
||||
@@ -177,6 +191,7 @@ const seRowHeight = (value: any) => {
|
||||
const fetchLayoutData = async () => {
|
||||
try {
|
||||
const { data } = await queryByPagePath({ pagePath: router.currentRoute.value.name })
|
||||
dataList.value = data
|
||||
const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
|
||||
// 处理布局数据
|
||||
layout.value = parsedLayout.map((item, index) => ({
|
||||
@@ -185,6 +200,7 @@ const fetchLayoutData = async () => {
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
layoutCopy.value = JSON.parse(JSON.stringify(layout.value))
|
||||
initRowHeight()
|
||||
} catch (error) {
|
||||
console.error('获取布局数据失败:', error)
|
||||
// 可以添加错误提示逻辑
|
||||
@@ -197,9 +213,21 @@ const handleResize = useDebounceFn(() => {
|
||||
key.value += 1
|
||||
}, 200)
|
||||
|
||||
// 修改
|
||||
const editd = (e: any) => {
|
||||
if (dataList.value?.id) {
|
||||
push(`/admin/cockpit/popup?id=${dataList.value?.id}&&path=${String(router.currentRoute.value.name)}`)
|
||||
} else {
|
||||
push(`/admin/cockpit/popup?path=${String(router.currentRoute.value.name)}`)
|
||||
}
|
||||
}
|
||||
// 设置
|
||||
const settings = () => {
|
||||
RoutingConfigRef.value.open()
|
||||
}
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initRowHeight()
|
||||
// initRowHeight()
|
||||
fetchLayoutData()
|
||||
|
||||
// 添加窗口大小变化监听器
|
||||
|
||||
Reference in New Issue
Block a user