优化驾驶舱

2025-05-29 16:01:44 +08:00
parent 80bdda9abc
commit 6e99373c1c
9 changed files with 383 additions and 419 deletions
--- a/src/router/static.ts
+++ b/src/router/static.ts
@@ -232,6 +232,14 @@ export const adminBaseRoute = {
                    meta: {
                        title: pageTitle('router.popup')
                    }
+                },
+                {
+                    path: 'view',
+                    component: () => import('@/views/pqs/cockpit/setUp/components/view.vue'),
+                    name: '预览项目',
+                    meta: {
+                        title: pageTitle('router.view')
+                    }
                }
            ]
        },
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs'
 import type { TableColumnCtx } from 'element-plus'
+import { sw } from 'element-plus/es/locale'

 /**
 * 日期快捷选项适用于 el-date-picker
@@ -328,7 +329,36 @@ export function getDateRange(beginDate: dayjs.ConfigType, endDate: dayjs.ConfigT
 * 获取当月时间
 * @param beginDate 开始日期
 * @param endDate 截止日期
+ * @param key 1:年 2:季 3:月 4:周 5:日
 */
-export function getTimeOfTheMonth(): [string, string] {
-    return [formatDate(new Date(), 'YYYY-MM') + '-01', formatDate(new Date(), 'YYYY-MM-DD')]
+export function getTimeOfTheMonth(key: string): [string, string] {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = now.getMonth()
+
+    switch (key) {
+        case '1': // 年
+            return [formatDate(new Date(year, 0, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
+
+        case '2': // 季
+            const quarterStartMonth = Math.floor(month / 3) * 3
+            const quarterEndMonth = quarterStartMonth + 2
+
+            return [formatDate(new Date(year, quarterStartMonth, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
+
+        case '3': // 月
+            return [formatDate(new Date(year, month, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
+
+        case '4': // 周
+            const dayOfWeek = now.getDay() // 0是周日
+            const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 调整为周一
+            const weekStart = new Date(year, month, diff)
+            return [formatDate(weekStart, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
+
+        case '5': // 日
+            return [formatDate(now, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
+
+        default:
+            throw new Error('Invalid key')
+    }
 }
--- a/src/views/cockpit/TerminalLog.vue
+++ b/src/views/cockpit/TerminalLog.vue
@@ -1,26 +1,12 @@
 <template>
-    <div >
+    <div>
        <!--终端运维日志 -->
-        <TableHeader datePicker showExport style="display: none">
-            <template v-slot:select>
-                <el-form-item label="日志类型">
-                    <el-select v-model="tableStore.table.params.type" clearable placeholder="请选择日志类型">
-                        <el-option v-for="item in fontdveoption" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="筛选数据">
-                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入筛选数据" clearable />
-                </el-form-item>
-            </template>
-            <template #operation>
-                <el-button type="primary" icon="el-icon-Sort" @click="changePush">台账变更推送</el-button>
-            </template>
-        </TableHeader>
+
        <Table ref="tableRef"></Table>
    </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, provide, reactive, nextTick } from 'vue'
+import { ref, onMounted, provide, reactive, watch } from 'vue'

 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
@@ -28,9 +14,11 @@ import TableHeader from '@/components/table/header/index.vue'
 import { useDictData } from '@/stores/dictData'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ledgerChangePush } from '@/api/device-boot/terminalTree'
+import { getTimeOfTheMonth } from '@/utils/formatTime'
 const prop = defineProps({
    width: { type: String },
-    height: { type: String }
+    height: { type: String },
+    timeKey: { type: String }
 })
 const dictData = useDictData()
 const fontdveoption = dictData.getBasicData('Dev_Ops')
@@ -71,25 +59,14 @@ const tableStore = new TableStore({
        { title: '描述', field: 'terminalDescribe' }
    ],
    beforeSearchFun: () => {
-        
+        tableStore.table.params.searchBeginTime = getTimeOfTheMonth(prop.timeKey)[0]
+        tableStore.table.params.searchEndTime = getTimeOfTheMonth(prop.timeKey)[1]
    },
-    loadCallback: () => { 
+    loadCallback: () => {
        tableStore.table.height = `calc(${prop.height} - 80px)`
    }
 })
-// 变更推送
-const changePush = () => {
-    ElMessageBox.confirm('当前操作会把存在变动的装置测点推送至前置，是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-    }).then(() => {
-        ledgerChangePush().then(res => {
-            // ElMessage.success(res.message)
-            tableStore.index()
-        })
-    })
-}
+
 const tableRef = ref()
 provide('tableRef', tableRef)
 tableStore.table.params.type = ''
@@ -99,6 +76,13 @@ provide('tableStore', tableStore)
 onMounted(() => {
    tableStore.index()
 })
+watch(
+    () => prop.timeKey,
+    val => {
+        tableStore.index()
+        console.log(123)
+    }
+)

 const addMenu = () => {}
 </script>
--- a/src/views/pqs/cockpit/homePage/index.vue
+++ b/src/views/pqs/cockpit/homePage/index.vue
@@ -1,5 +1,6 @@
 <template>
    <GridLayout
+        class="default-main"
        v-model:layout="layout"
        :row-height="rowHeight"
        :is-resizable="false"
@@ -13,7 +14,7 @@
            <div class="box">
                <div class="title">
                    <div style="display: flex; align-items: center">
-                        <HelpFilled class="HelpFilled" />
+                        <Icon class="HelpFilled" :name="item.icon" />
                        {{ item.name }}
                    </div>
                    <!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
@@ -92,7 +93,7 @@ const getMainWidth = () => {

 // 初始化行高
 const initRowHeight = () => {
-    rowHeight.value = Math.max(0, getMainHeight() / 6)
+    rowHeight.value = Math.max(0, (getMainHeight() - 20) / 6)
    rowWidth.value = Math.max(0, getMainWidth() / 12)
 }

@@ -166,7 +167,7 @@ const fetchLayoutData = async () => {
 // 窗口大小变化处理 - 使用防抖
 const handleResize = useDebounceFn(() => {
    initRowHeight()
-     key.value += 1
+    key.value += 1
 }, 200)

 // 生命周期钩子
@@ -236,6 +237,7 @@ onUnmounted(() => {
    .HelpFilled {
        height: 16px;
        width: 16px;
+        color: #fff !important;
        margin-right: 5px;
    }
 }
--- a/src/views/pqs/cockpit/setUp/components/popup.vue
+++ b/src/views/pqs/cockpit/setUp/components/popup.vue
@@ -87,7 +87,7 @@
                            <div class="imgBox">
                                <div class="textName">{{ item.name }}</div>
                                <img
-                                    :src="item.image"
+                                    :src="getImg(item.path)"
                                    :style="{
                                        height:
                                            item.h * rowHeight -
@@ -163,6 +163,8 @@ const layout: any = ref([
    // { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
    // { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
 ])
+const treeComponents: any = ref([]) //组件树
+const treeComponentsCopy: any = ref([]) //组件树
 const info = () => {
    activeNames.value = []
    activeNames1.value = []
@@ -174,7 +176,9 @@ const info = () => {
                activeNames1.value.push(k.id)
            })
        })
+        treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
    })
+
    if (query.id) {
        queryById({ id: query.id }).then(res => {
            layout.value = JSON.parse(res.data.containerConfig)
@@ -185,7 +189,28 @@ const info = () => {
        })
    }
 }
-const treeComponents: any = ref([]) //组件树
+
+// 扁平化树
+const tree2List = (list: any, id: any) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        item.uPid = id
+        item.uId = Math.random() * 1000
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children, item.uId)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
 // 删除拖拽
 const removeItem = (id: string) => {
    const index = layout.value.findIndex(item => item.i === id)
@@ -286,7 +311,7 @@ function dragEnd(row: any) {
        i: dragItem.i,
        name: row.name,
        path: row.path,
-        image: row.image
+        icon: row.icon
    })
    gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
    const item = gridLayout.value.getItem(dropId)
@@ -332,6 +357,9 @@ const onSubmit = () => {
        }
    })
 }
+const getImg = throttle((path: string) => {
+    if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
+})
 onMounted(() => {
    info()

--- a/src/views/pqs/cockpit/setUp/components/popup1.vue
+++ b/src/views/pqs/cockpit/setUp/components/popup1.vue
@@ -1,374 +0,0 @@
-<template>
-    <el-dialog
-        draggable
-        :title="title"
-        v-model.trim="dialogVisible"
-        width="900px"
-        :before-close="handleClose"
-        :close-on-click-modal="false"
-    >
-        <div style="display: flex">
-            <el-form ref="formRef" style="flex: 1" :rules="rules" :model="form" label-width="auto" class="form mr10">
-                <el-form-item label="页面名称:" prop="pageName">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit
-                        v-model.trim="form.pageName"
-                        placeholder="请输入页面名称"
-                    ></el-input>
-                </el-form-item>
-
-                <el-form-item label="页面排序:" prop="sort">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit-number
-                        v-model.trim.number="form.sort"
-                        :min="0"
-                        :step="1"
-                        step-strictly
-                        style="width: 100%"
-                    />
-                </el-form-item>
-
-                <el-form-item label="备注:" class="top">
-                    <el-input
-                        maxlength="300"
-                        show-word-limit
-                        type="textarea"
-                        :rows="2"
-                        placeholder="请输入内容"
-                        v-model.trim="form.remark"
-                    ></el-input>
-                </el-form-item>
-            </el-form>
-            <!-- 拖拽组件 -->
-            <div>
-                <div class="image">
-                    <img
-                        v-for="(item, index) in imgList"
-                        :key="index"
-                        :src="item"
-                        class="mr10"
-                        @click="imgData(index)"
-                    />
-                    <el-button type="primary" icon="el-icon-Plus" size="small" @click="addItem">添加容器</el-button>
-                </div>
-                <GridLayout
-                    class="GridLayout"
-                    v-model:layout="layout"
-                    style="width: 511px; height: 310px"
-                    :row-height="40"
-                    :col-num="12"
-                >
-                    <template #item="{ item }">
-                        <span class="text">{{ `${item.name}` }}</span>
-                        <!-- <span class="remove" @click="removeItem(item.i)">x</span> -->
-                        <CloseBold class="remove" @click="removeItem(item.i)" />
-
-                        <el-popover placement="top" :width="230" trigger="click">
-                            <template #reference>
-                                <!-- <span class="bind">绑定页面</span> -->
-                                <Tools class="bind" />
-                            </template>
-                            <el-select
-                                v-model="item.path"
-                                filterable
-                                placeholder="选择绑定页面"
-                                class="mb10"
-                                @change="change($event, item)"
-                            >
-                                <el-option
-                                    v-for="item in treeList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.path"
-                                />
-                            </el-select>
-                        </el-popover>
-                    </template>
-                </GridLayout>
-            </div>
-        </div>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="handleClose">取 消</el-button>
-                <el-button type="primary" @click="addFn">确定</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script setup lang="ts">
-import { componentTree } from '@/api/user-boot/user'
-import { ref, reactive, onMounted, watch } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { GridLayout, GridItem } from 'grid-layout-plus'
-import { Tools, CloseBold } from '@element-plus/icons-vue'
-import { addDashboard, updateDashboard } from '@/api/system-boot/csstatisticalset'
-import html2canvas from 'html2canvas'
-const title = ref('')
-const formRef = ref()
-const treeList: any = ref([])
-const dialogVisible = ref(false)
-let index = 9
-const emit = defineEmits(['submit'])
-const layout: any = ref([
-    { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
-    { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
-    { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
-    { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
-    { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
-    { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
-    { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
-    { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
-    { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
-])
-const imgList = [
-    new URL(`@/assets/imgs/1x1.png`, import.meta.url),
-    new URL(`@/assets/imgs/2x2.png`, import.meta.url),
-    new URL(`@/assets/imgs/2x3.png`, import.meta.url),
-    new URL(`@/assets/imgs/3x3.png`, import.meta.url)
-]
-const form: any = reactive({
-    pageName: '',
-    thumbnail: '',
-    containerConfig: [],
-    sort: '100',
-    id: '',
-    remark: ''
-})
-const rules = {
-    pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
-    projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
-    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
-}
-// 删除拖拽
-const removeItem = (id: string) => {
-    const index = layout.value.findIndex(item => item.i === id)
-
-    if (index > -1) {
-        layout.value.splice(index, 1)
-    }
-}
-
-// 添加拖拽容器
-function addItem() {
-    layout.value.push({
-        x: (layout.value.length * 2) % 6,
-        y: layout.value.length + 6, // puts it at the bottom
-        w: 4,
-        h: 2,
-        i: `${index++}`,
-        name: '',
-        path: ''
-    })
-}
-const addFn = () => {
-    if (layout.value.length == 0) {
-        return ElMessage.warning('页面设计不能为空!')
-    }
-    const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
-    if (maxValue > 6) {
-        return ElMessage.warning('组件不能超出当前容器!')
-    }
-
-    formRef.value.validate(async (valid: boolean) => {
-        let url = ''
-        await html2canvas(document.querySelector('.GridLayout'), {
-            useCORS: true
-        }).then(canvas => {
-            url = canvas.toDataURL('image/png')
-        })
-
-        if (valid) {
-            if (title.value == '新增页面') {
-                addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
-                    (res: any) => {
-                        ElMessage.success('新增页面成功!')
-                        handleClose()
-                    }
-                )
-            } else {
-                updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
-                    (res: any) => {
-                        ElMessage.success('修改页面成功!')
-                        handleClose()
-                    }
-                )
-            }
-        }
-    })
-}
-const change = (e: any, item: any) => {
-    item.name = treeList.value.filter((item: any) => item.path == e)[0].name
-}
-// 设置布局
-const imgData = i => {
-    switch (i) {
-        case 0:
-            // 1x1
-            layout.value = [{ x: 0, y: 0, w: 12, h: 6, i: '0', name: '', path: '' }]
-            return
-        case 1:
-            // 2x2
-            layout.value = [
-                { x: 0, y: 0, w: 6, h: 3, i: '0', name: '', path: '' },
-                { x: 6, y: 0, w: 6, h: 3, i: '1', name: '', path: '' },
-                { x: 0, y: 3, w: 6, h: 3, i: '3', name: '', path: '' },
-                { x: 6, y: 3, w: 6, h: 3, i: '4', name: '', path: '' }
-            ]
-            return
-        case 2:
-            // 2x3
-            layout.value = [
-                { x: 0, y: 0, w: 8, h: 4, i: '0', name: '', path: '' },
-                { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
-                { x: 8, y: 2, w: 4, h: 2, i: '5', name: '', path: '' },
-                { x: 0, y: 4, w: 4, h: 2, i: '6', name: '', path: '' },
-                { x: 4, y: 4, w: 4, h: 2, i: '7', name: '', path: '' },
-                { x: 8, y: 4, w: 4, h: 2, i: '8', name: '', path: '' }
-            ]
-            return
-        case 3:
-            // 3x3
-            layout.value = [
-                { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
-                { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
-                { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
-                { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
-                { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
-                { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
-                { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
-                { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
-                { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
-            ]
-            return
-        default:
-    }
-}
-
-const open = ref((row: any) => {
-    if (row.data) {
-        layout.value = JSON.parse(row.data.containerConfig)
-        form.pageName = row.data.pageName
-        form.sort = row.data.sort
-        form.remark = row.data.remark
-        form.id = row.data.id
-    }
-    title.value = row.title
-    dialogVisible.value = true
-    // if (row.title == '新增页面') {
-    //     form.name = ''
-    //     form.projectIds = []
-    //     form.sort = '100'
-    //     form.remark = ''
-    // } else {
-    //     for (let key in form) {
-    //         form[key] = row.row[key] || ''
-    //     }
-    //     form.id = row.row.id
-    // }
-})
-onMounted(() => {
-    componentTree().then((res: any) => {
-        const uniqueArray = tree2List(res.data, Math.random() * 1000).filter(
-            (item: any) => item.path != '' && item.path != null
-        )
-        treeList.value = Array.from(new Map(uniqueArray.map(item => [item.path, item])).values())
-    })
-})
-const tree2List = (list: any, id: any) => {
-    //存储结果的数组
-    let arr: any = []
-    // 遍历 tree 数组
-    list.forEach((item: any) => {
-        item.uPid = id
-        item.uId = Math.random() * 1000
-        // 判断item是否存在children
-        if (!item.children) return arr.push(item)
-        // 函数递归，对children数组进行tree2List的转换
-        const children = tree2List(item.children, item.uId)
-        // 删除item的children属性
-        delete item.children
-        // 把item和children数组添加至结果数组
-        //..children: 意思是把children数组展开
-        arr.push(item, ...children)
-    })
-    // 返回结果数组
-    return arr
-}
-const handleClose = () => {
-    dialogVisible.value = false
-    emit('submit')
-}
-defineExpose({ open })
-</script>
-<style lang="scss" scoped>
-.vgl-layout {
-    background-color: #eee;
-}
-
-:deep(.vgl-item:not(.vgl-item--placeholder)) {
-    background-color: #ccc;
-    border: 1px solid black;
-}
-
-:deep(.vgl-item--resizing) {
-    opacity: 90%;
-}
-
-:deep(.vgl-item--static) {
-    background-color: #cce;
-}
-
-.text {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    inset: 0;
-    width: 80%;
-    height: 100%;
-    padding: 5px;
-    color: #000;
-    font-size: 14px;
-}
-
-.layout-json {
-    padding: 10px;
-    margin-top: 10px;
-    background-color: #ddd;
-    border: 1px solid black;
-}
-
-.columns {
-    columns: 120px;
-}
-
-.remove {
-    position: absolute;
-    top: 5px;
-    right: 2px;
-    width: 16px;
-    cursor: pointer;
-}
-.bind {
-    position: absolute;
-    top: 50%;
-    right: -5px;
-    transform: translate(-50%, -50%);
-    color: var(--el-color-primary);
-    cursor: pointer;
-    width: 16px;
-}
-.image {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-    img {
-        height: 20px;
-        cursor: pointer;
-    }
-    .el-button {
-        margin-left: auto;
-    }
-}
-</style>
--- a/src/views/pqs/cockpit/setUp/components/view.vue
+++ b/src/views/pqs/cockpit/setUp/components/view.vue
@@ -0,0 +1,264 @@
+<template>
+    <div class="default-main">
+        <div class=" layoutHeader">
+            <div class="title">{{title}}</div>
+            <back-component />
+        </div>
+        <GridLayout
+            v-model:layout="layout"
+            :row-height="rowHeight"
+            :is-resizable="false"
+            :is-draggable="false"
+            :responsive="false"
+            :vertical-compact="false"
+            prevent-collision
+            :col-num="12"
+        >
+            <template #item="{ item }">
+                <div class="box">
+                    <div class="title">
+                        <div style="display: flex; align-items: center">
+                            <Icon class="HelpFilled" :name="item.icon" />
+                            {{ item.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"
+                            class="pd10"
+                            :key="key"
+                            :height="rowHeight * item.h - (item.h == 6 ? -20 : item.h == 2 ? 20 : 5) + 'px'"
+                            :width="rowWidth * item.w - 5 + 'px'"
+                        />
+                        <div v-else class="pd10">组件加载失败...</div>
+                    </div>
+                </div>
+            </template>
+        </GridLayout>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, markRaw, onUnmounted, defineAsyncComponent, type Component } from 'vue'
+import { GridLayout } from 'grid-layout-plus'
+import { useDebounceFn } from '@vueuse/core'
+import { useRouter } from 'vue-router'
+import BackComponent from '@/components/icon/back/index.vue'
+import { queryById } from '@/api/system-boot/csstatisticalset'
+import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
+// defineOptions({
+//     name: 'cockpit/homePage'
+// })
+const { query } = useRoute()
+// 定义类型
+interface LayoutItem {
+    x: number
+    y: number
+    w: number
+    h: number
+    i: string | number
+    name: string
+    path: string
+    component?: Component | string
+    loading?: boolean
+    error?: any
+}
+const title = ref('')
+const key = ref(0)
+const img = new URL(`@/assets/imgs/amplify.png`, import.meta.url)
+const img1 = new URL(`@/assets/imgs/reduce.png`, import.meta.url)
+// 响应式数据
+const rowHeight = ref(0)
+const rowWidth = ref(0)
+const layout = ref<LayoutItem[]>([
+    // {
+    //     x: 4,
+    //     y: 0,
+    //     w: 4,
+    //     h: 2,
+    //     i: '1',
+    //     name: '',
+    //     path: '/src/views/pqs/runManage/assessment/components/uese/index.vue'
+    // },
+])
+const layoutCopy = ref<LayoutItem[]>([])
+const flag = ref(true)
+// 组件映射
+const componentMap = reactive(new Map<string, Component | string>())
+
+// 获取主内容区域高度
+const getMainHeight = () => {
+    const elMain = document.querySelector('.el-main')
+    return (elMain?.offsetHeight || 0) - 70
+}
+// 获取主内容区域高度
+const getMainWidth = () => {
+    const elMain = document.querySelector('.el-main')
+    return (elMain?.offsetWidth || 0) - 20
+}
+
+// 初始化行高
+const initRowHeight = () => {
+    rowHeight.value = Math.max(0, (getMainHeight() - 72) / 6)
+    rowWidth.value = Math.max(0, getMainWidth() / 12)
+}
+
+// 动态注册组件
+const registerComponent = (path: string): Component | string | null => {
+    if (!path) return null
+
+    const cacheKey = path
+
+    // 使用缓存的组件
+    if (componentMap.has(cacheKey)) {
+        return componentMap.get(cacheKey)!
+    }
+
+    try {
+        // 动态导入组件
+        const modules = import.meta.glob('@/views/**/*.vue')
+        if (!modules[path]) {
+            console.error(`组件加载失败: ${path}`)
+            return null
+        }
+
+        const AsyncComponent = defineAsyncComponent({
+            loader: modules[path],
+            loadingComponent: () => h('div', '加载中...'),
+            errorComponent: ({ error }) => h('div', `加载错误: ${error.message}`),
+            delay: 200,
+            timeout: 10000
+        })
+
+        // 保存到映射中
+        componentMap.set(cacheKey, markRaw(AsyncComponent))
+        return AsyncComponent
+    } catch (error) {
+        console.error('注册组件失败:', error)
+        return null
+    }
+}
+// 缩放
+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) => ({
+            ...item,
+            i: item.i || index, // 确保有唯一标识
+            component: registerComponent(item.path)
+        }))
+    }
+    flag.value = !flag.value
+    key.value += 1
+}
+// 获取布局数据
+const fetchLayoutData = async () => {
+    try {
+        const { data } = await queryById({ id: query.id })
+        title.value = data.pageName+'_预览'
+        const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
+        // 处理布局数据
+        layout.value = parsedLayout.map((item, index) => ({
+            ...item,
+            i: item.i || index, // 确保有唯一标识
+            component: registerComponent(item.path)
+        }))
+        layoutCopy.value = JSON.parse(JSON.stringify(layout.value))
+    } catch (error) {
+        console.error('获取布局数据失败:', error)
+        // 可以添加错误提示逻辑
+    }
+}
+
+// 窗口大小变化处理 - 使用防抖
+const handleResize = useDebounceFn(() => {
+    initRowHeight()
+    key.value += 1
+}, 200)
+
+// 生命周期钩子
+onMounted(() => {
+    initRowHeight()
+    fetchLayoutData()
+
+    // 添加窗口大小变化监听器
+    window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+    // 移除监听器防止内存泄漏
+    window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.vgl-layout {
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+:deep(.vgl-item:not(.vgl-item--placeholder)) {
+    background-color: #ffffff;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    transition: all 0.3s ease;
+}
+
+:deep(.vgl-item:hover:not(.vgl-item--placeholder)) {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
+}
+
+:deep(.vgl-item--static) {
+    background-color: #f0f2f5;
+}
+
+.text {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    color: #606266;
+}
+
+:deep(.vgl-item) {
+    overflow: hidden;
+}
+.box {
+    overflow: hidden;
+    .title {
+        border-bottom: 1px solid #000;
+        font-size: 14px;
+        height: 30px;
+        font-weight: 600;
+        padding: 0px 10px;
+        color: #fff;
+        background-color: var(--el-color-primary);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .HelpFilled {
+        height: 16px;
+        width: 16px;
+        color: #fff !important;
+        margin-right: 5px;
+    }
+}
+.layoutHeader{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    font-size: 16px;
+    .title{
+        font-weight: 600;
+    }
+}
+</style>
--- a/src/views/pqs/cockpit/setUp/index.vue
+++ b/src/views/pqs/cockpit/setUp/index.vue
@@ -42,6 +42,15 @@
                                >
                                    激活
                                </el-button>
+                                <el-button
+                                    class="color"
+                                    icon="el-icon-View"
+                                    style="padding: 3px 0"
+                                    type="text"
+                                    @click="preview(item)"
+                                >
+                                    预览
+                                </el-button>
                                <el-button
                                    class="color"
                                    icon="el-icon-Edit"
@@ -90,11 +99,10 @@ import TableHeader from '@/components/table/header/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Edit } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
-import popup from './components/popup.vue'
 const { push } = useRouter()
 import { deleteDashboard, activatePage } from '@/api/system-boot/csstatisticalset'
 defineOptions({
-    name: 'cockpit/setUp'
+    // name: 'cockpit/setUp'
 })
 const tableRef = ref()

@@ -117,7 +125,10 @@ onMounted(() => {
 const onSubmitadd = () => {
    push(`/admin/cockpit/popup`)
 }
-
+// 预览
+const preview = (e: any) => {
+    push(`/admin/cockpit/view?id=${e.id}`)
+}
 // 修改
 const editd = (e: any) => {
    push(`/admin/cockpit/popup?id=${e.id}`)
--- a/src/views/setting/dictionary/component/add.vue
+++ b/src/views/setting/dictionary/component/add.vue
@@ -23,11 +23,20 @@
                <el-form-item class="top" label="组件路径" prop="path">
                    <el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
                </el-form-item>
+                <el-form-item class="top" label="组件查询时间">
+                    <el-radio-group v-model="form.timeKey" style="width: 100%">
+                        <el-radio-button label="年" value="1" />
+                        <el-radio-button label="季" value="2" />
+                        <el-radio-button label="月" value="3" />
+                        <el-radio-button label="周" value="4" />
+                        <el-radio-button label="日" value="5" />
+                    </el-radio-group>
+                </el-form-item>
                <el-form-item class="top" label="组件排序" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
                </el-form-item>
            </el-form>
-            <div style="max-width: 600px; overflow: hidden">
+            <div style="max-width: 600px; max-height: 370px; overflow: hidden">
                <div class="ml10" style="font-weight: 600">组件展示</div>
                <component
                    :is="registerComponent(form.path)"
@@ -36,6 +45,7 @@
                    :key="form.path"
                    :height="'350px'"
                    :width="'533px'"
+                    :timeKey="form.timeKey"
                />
                <!-- <div  class="pd10">组件加载失败...</div> -->
                <el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
@@ -68,6 +78,7 @@ const form = ref<anyObj>({
    name: '',
    sort: 100,
    system: [],
+    timeKey: '3',
    code: '',
    path: ''
 })