修改组件录入、新增项目管理

package.json

@@ -38,7 +38,7 @@
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "echarts4": "npm:echarts@^4.9.0",
-    "element-plus": "^2.8.7",
+    "element-plus": "^2.9.11",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "grid-layout-plus": "^1.1.0",
@@ -63,6 +63,7 @@
     "steady-xml": "0.1.0",
     "svg-pan-zoom": "^3.6.2",
     "use-element-plus-theme": "^0.0.5",
+    "vexip-ui": "^2.3.28",
     "vue": "^3.3.11",
     "vue-baidu-map-3x": "^1.0.35",
     "vue-baidu-map-offline": "^1.0.7",

src/api/system-boot/csstatisticalset.ts

@@ -60,3 +60,11 @@ export const queryActivatePage = () => {
         method: 'post'
     })
 }
+// 更具id 查询驾驶舱页面
+export const queryById = (params: any) => {
+    return createAxios({
+        url: '/system-boot/dashboard/queryById',
+        method: 'post',
+        params
+    })
+}

src/router/static.ts

@@ -172,12 +172,14 @@ export const adminBaseRoute = {
             children: [
                 {
                     path: 'aListOfLoadData',
-                    component: () => import('@/views/pqs/harmonicMonitoring/detailed/division/components/aListOfLoadData.vue'),
+                    component: () =>
+                        import('@/views/pqs/harmonicMonitoring/detailed/division/components/aListOfLoadData.vue'),
                     name: '负荷数据列表页面',
                     meta: {
                         title: pageTitle('router.aListOfLoadData')
                     }
-                },{
+                },
+                {
                     path: 'compute',
                     component: () => import('@/views/pqs/harmonicMonitoring/detailed/division/components/compute.vue'),
                     name: '贡献度计算页面',
@@ -192,8 +194,7 @@ export const adminBaseRoute = {
                     meta: {
                         title: pageTitle('router.detail')
                     }
-                },
+                }
-               
             ]
         },
         {
@@ -212,8 +213,26 @@ export const adminBaseRoute = {
                     meta: {
                         title: pageTitle('router.addUser')
                     }
+                }
+            ]
         },
-               
+        {
+            path: 'cockpit',
+            name: '项目管理',
+            meta: {
+                title: pageTitle('runManage'),
+                icon: 'ep:management',
+                alwaysShow: true
+            },
+            children: [
+                {
+                    path: 'popup',
+                    component: () => import('@/views/pqs/cockpit/setUp/components/popup.vue'),
+                    name: '新增项目',
+                    meta: {
+                        title: pageTitle('router.popup')
+                    }
+                }
             ]
         },
         {

src/views/pqs/cockpit/setUp/components/popup.vue

@@ -1,14 +1,7 @@
 <template>
-    <el-dialog
+    <div class="pd10">
-        draggable
+        <el-card>
-        :title="title"
+            <el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
-        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"
@@ -35,99 +28,114 @@
                         maxlength="300"
                         show-word-limit
                         type="textarea"
-                        :rows="2"
+                        :rows="1"
                         placeholder="请输入内容"
                         v-model.trim="form.remark"
                     ></el-input>
                 </el-form-item>
-            </el-form>
+                <el-form-item>
-            <!-- 拖拽组件 -->
+                    <div style="width: 100%; display: flex; justify-content: end">
-            <div>
+                        <el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
-                <div class="image">
+                        <back-component />
-                    <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>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="mt10" :style="height">
+            <div style="display: flex">
+                <div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
+                    <el-collapse v-model="activeNames" :expand-icon-position="position">
+                        <el-collapse-item
+                            v-for="item in treeComponents"
+                            :key="item.id"
+                            :title="item.name"
+                            :name="item.id"
+                        >
+                            <el-collapse v-model="activeNames1" class="ml20">
+                                <el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
+                                    <div class="Box">
+                                        <div
+                                            v-for="(s, index) in k.children"
+                                            :key="index"
+                                            class="mr10 mb10 imgBox"
+                                            draggable="true"
+                                            unselectable="on"
+                                            @drag="drag(s)"
+                                            @dragend="dragEnd(s)"
+                                        >
+                                            <div class="textName">{{ s.name }}</div>
+                                            <img :src="s.image" style="width: 180px" />
+                                        </div>
+                                    </div>
+                                </el-collapse-item>
+                            </el-collapse>
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+                <div style="flex: 1" ref="wrapper">
                     <GridLayout
                         class="GridLayout"
+                        ref="gridLayout"
                         v-model:layout="layout"
-                    style="width: 511px; height: 310px"
+                        style="width: 100%"
-                    :row-height="40"
+                        :style="{ height: GridHeight + 'px' }"
+                        :row-height="rowHeight"
                         :col-num="12"
+                        :vertical-compact="false"
                     >
                         <template #item="{ item }">
-                        <span class="text">{{ `${item.name}` }}</span>
+                            <div class="imgBox">
-                        <!-- <span class="remove" @click="removeItem(item.i)">x</span> -->
+                                <div class="textName">{{ item.name }}</div>
-                        <CloseBold class="remove" @click="removeItem(item.i)" />
+                                <img
-
+                                    :src="item.image"
-                        <el-popover placement="top" :width="230" trigger="click">
+                                    :style="{
-                            <template #reference>
+                                        height:
-                                <!-- <span class="bind">绑定页面</span> -->
+                                            item.h * rowHeight -
-                                <Tools class="bind" />
+                                            (item.h == 1
-                            </template>
+                                                ? 30
-                            <el-select
+                                                : item.h == 2
-                                v-model="item.path"
+                                                ? 20
-                                filterable
+                                                : item.h == 3
-                                placeholder="选择绑定页面"
+                                                ? 10
-                                class="mb10"
+                                                : item.h == 4
-                                @change="change($event, item)"
+                                                ? -0
-                            >
+                                                : item.h == 5
-                                <el-option
+                                                ? -10
-                                    v-for="item in treeList"
+                                                : -20) +
-                                    :key="item.id"
+                                            'px'
-                                    :label="item.name"
+                                    }"
-                                    :value="item.path"
                                 />
-                            </el-select>
+                                <CloseBold class="remove" @click="removeItem(item.i)" />
-                        </el-popover>
+                            </div>
+                            <!-- <span class="text">{{ `${item?.name}` }}</span>
+                            -->
                         </template>
                     </GridLayout>
                 </div>
             </div>
-        <template #footer>
+        </el-card>
-            <span class="dialog-footer">
+    </div>
-                <el-button @click="handleClose">取 消</el-button>
-                <el-button type="primary" @click="addFn">确定</el-button>
-            </span>
-        </template>
-    </el-dialog>
 </template>
 <script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import BackComponent from '@/components/icon/back/index.vue'
+import { mainHeight } from '@/utils/layout'
+import type { CollapseIconPositionType } from 'element-plus'
 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 { throttle } from 'lodash-es'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Tools, CloseBold } from '@element-plus/icons-vue'
-import { addDashboard, updateDashboard } from '@/api/system-boot/csstatisticalset'
+import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
 import html2canvas from 'html2canvas'
-const title = ref('')
+const { go } = useRouter()
-const formRef = ref()
+const { query } = useRoute()
-const treeList: any = ref([])
+const height = mainHeight(108)
-const dialogVisible = ref(false)
+const indicatorHeight = mainHeight(128)
-let index = 9
+const rowHeight = ref(0)
-const emit = defineEmits(['submit'])
+const GridHeight = ref(0)
-const layout: any = ref([
+const position = ref<CollapseIconPositionType>('left')
-    { 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: '',
@@ -136,11 +144,48 @@ const form: any = reactive({
     id: '',
     remark: ''
 })
+const activeNames = ref([])
+const activeNames1 = ref([])
 const rules = {
     pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
     projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
     sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
 }
+const formRef = ref()
+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 info = () => {
+    activeNames.value = []
+    activeNames1.value = []
+    componentTree().then(res => {
+        treeComponents.value = res.data
+        activeNames.value = treeComponents.value.map(item => item.id)
+        res.data.forEach(item => {
+            item.children.forEach(k => {
+                activeNames1.value.push(k.id)
+            })
+        })
+    })
+    if (query.id) {
+        queryById({ id: query.id }).then(res => {
+            layout.value = JSON.parse(res.data.containerConfig)
+            form.pageName = res.data.pageName
+            form.sort = res.data.sort
+            form.remark = res.data.remark
+            form.id = res.data.id
+        })
+    }
+}
+const treeComponents: any = ref([]) //组件树
 // 删除拖拽
 const removeItem = (id: string) => {
     const index = layout.value.findIndex(item => item.i === id)
@@ -149,20 +194,109 @@ const removeItem = (id: string) => {
         layout.value.splice(index, 1)
     }
 }
+const wrapper = ref<HTMLElement>()
+const gridLayout = ref<InstanceType<typeof GridLayout>>()
 
-// 添加拖拽容器
+const mouseAt = { x: -1, y: -1 }
-function addItem() {
+
+function syncMousePosition(event: MouseEvent) {
+    mouseAt.x = event.clientX
+    mouseAt.y = event.clientY
+}
+
+const dropId = 'drop'
+const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
+
+const drag = throttle(row => {
+    // console.log("🚀 ~ drag ~ row:", row)
+
+    const parentRect = wrapper.value?.getBoundingClientRect()
+
+    if (!parentRect || !gridLayout.value) return
+
+    const mouseInGrid =
+        mouseAt.x > parentRect.left &&
+        mouseAt.x < parentRect.right &&
+        mouseAt.y > parentRect.top &&
+        mouseAt.y < parentRect.bottom
+
+    if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
         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++}`,
+            i: dropId
-        name: '',
-        path: ''
         })
     }
-const addFn = () => {
+
+    const index = layout.value.findIndex(item => item.i === dropId)
+
+    if (index !== -1) {
+        const item = gridLayout.value.getItem(dropId)
+
+        if (!item) return
+
+        try {
+            item.wrapper.style.display = 'none'
+        } catch (e) {}
+
+        Object.assign(item.state, {
+            top: mouseAt.y - parentRect.top,
+            left: mouseAt.x - parentRect.left
+        })
+        const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
+
+        if (mouseInGrid) {
+            gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
+            dragItem.i = String(index)
+            dragItem.x = layout.value[index].x
+            dragItem.y = layout.value[index].y
+        } else {
+            gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
+            layout.value = layout.value.filter(item => item.i !== dropId)
+        }
+    }
+})
+
+function dragEnd(row: any) {
+    console.log('🚀 ~ drag ~ row:', row)
+    const parentRect = wrapper.value?.getBoundingClientRect()
+
+    if (!parentRect || !gridLayout.value) return
+
+    const mouseInGrid =
+        mouseAt.x > parentRect.left &&
+        mouseAt.x < parentRect.right &&
+        mouseAt.y > parentRect.top &&
+        mouseAt.y < parentRect.bottom
+
+    if (mouseInGrid) {
+        gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
+        layout.value = layout.value.filter(item => item.i !== dropId)
+    } else {
+        return
+    }
+
+    layout.value.push({
+        x: dragItem.x,
+        y: dragItem.y,
+        w: dragItem.w,
+        h: dragItem.h,
+        i: dragItem.i,
+        name: row.name,
+        path: row.path,
+        image: row.image
+    })
+    gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
+    const item = gridLayout.value.getItem(dropId)
+    if (!item) return
+    try {
+        item.wrapper.style.display = ''
+    } catch (e) {}
+}
+// 保存
+const onSubmit = () => {
     if (layout.value.length == 0) {
         return ElMessage.warning('页面设计不能为空!')
     }
@@ -180,195 +314,122 @@ const addFn = () => {
         })
 
         if (valid) {
-            if (title.value == '新增页面') {
+            if (form.id == '') {
                 addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
                     (res: any) => {
                         ElMessage.success('新增页面成功!')
-                        handleClose()
+                        go(-1)
                     }
                 )
             } else {
                 updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
                     (res: any) => {
                         ElMessage.success('修改页面成功!')
-                        handleClose()
+                        go(-1)
                     }
                 )
             }
         }
     })
 }
-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) => {
+    info()
-        const uniqueArray = tree2List(res.data, Math.random() * 1000).filter(
+
-            (item: any) => item.path != '' && item.path != null
+    GridHeight.value = wrapper.value?.offsetWidth / 1.77777
-        )
+    rowHeight.value = GridHeight.value / 6 - 11.5
-        treeList.value = Array.from(new Map(uniqueArray.map(item => [item.path, item])).values())
+    document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
+    document.addEventListener('dragover', syncMousePosition)
 })
+
+onBeforeUnmount(() => {
+    document.removeEventListener('dragover', syncMousePosition)
 })
-const tree2List = (list: any, id: any) => {
+// onMounted(() => {
-    //存储结果的数组
+
-    let arr: any = []
+//     // document.addEventListener('dragover', syncMousePosition)
-    // 遍历 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>
+.form-four {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .el-form-item {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        .el-form-item__content {
+            width: 100%;
+            flex: 1;
+            .el-select,
+            .el-cascader,
+            .el-input__inner,
+            .el-date-editor {
+                width: 100%;
+            }
+        }
+    }
+}
+:deep(.el-card__body) {
+    padding: 20px 20px 12px;
+}
+.Box {
+    display: flex;
+    flex-wrap: wrap;
+}
+.imgBox {
+    // padding: 10px;
+    display: flex;
+    flex-direction: column;
+
+    box-shadow: var(--el-box-shadow-light);
+    --el-card-border-color: var(--el-border-color-light);
+    --el-card-border-radius: 4px;
+    --el-card-padding: 20px;
+    --el-card-bg-color: var(--el-fill-color-blank);
+    background-color: var(--el-card-bg-color);
+    border: 1px solid var(--el-card-border-color);
+    border-radius: var(--el-card-border-radius);
+    color: var(--el-text-color-primary);
+    overflow: hidden;
+    transition: var(--el-transition-duration) 0.3s;
+    .textName {
+        padding: 2px 5px;
+        background-color: var(--el-color-primary);
+        color: #fff;
+    }
+    user-select: none; /* 标准属性 */
+    -webkit-user-select: none; /* Chrome/Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+}
 .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;
+    color: #fff;
     cursor: pointer;
 }
-.bind {
+
+.vgl-layout::before {
     position: absolute;
-    top: 50%;
+    width: calc(100% - 5px);
-    right: -5px;
+    height: calc(100% - 5px);
-    transform: translate(-50%, -50%);
+    margin: 5px;
-    color: var(--el-color-primary);
+    content: '';
-    cursor: pointer;
+    background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
-    width: 16px;
+        linear-gradient(to bottom, lightgrey 1px, transparent 1px);
-}
+    background-repeat: repeat;
-.image {
+    background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-    img {
-        height: 20px;
-        cursor: pointer;
-    }
-    .el-button {
-        margin-left: auto;
 }
+
+:deep(.vgl-item:not(.vgl-item--placeholder)) {
+    background-color: #fff;
+    border: 1px solid black;
 }
 </style>

src/views/pqs/cockpit/setUp/components/popup1.vue

@@ -0,0 +1,374 @@
+<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>

src/views/pqs/cockpit/setUp/index.vue

@@ -80,8 +80,6 @@
                 @current-change="onTableCurrentChange"
             ></el-pagination>
         </div>
-
-        <popup ref="popupRef" @submit="tableStore.index()" v-if="popupFlag" />
     </div>
 </template>
 <script setup lang="ts">
@@ -91,23 +89,22 @@ import TableStore from '@/utils/tableStore'
 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'
 })
 const tableRef = ref()
-const popupRef = ref()
+
-const popupFlag = ref(false)
 const tableStore = new TableStore({
     showPage: false,
     url: '/system-boot/dashboard/queryPage',
     method: 'POST',
     publicHeight: 60,
     column: [],
-    loadCallback: () => {
+    loadCallback: () => {}
-        popupFlag.value = false
-    }
 })
 provide('tableStore', tableStore)
 tableStore.table.params.searchValue = ''
@@ -118,23 +115,12 @@ onMounted(() => {
 })
 // 查询
 const onSubmitadd = () => {
-    popupFlag.value = true
+    push(`/admin/cockpit/popup`)
-    setTimeout(() => {
-        popupRef.value.open({
-            title: '新增页面'
-        })
-    }, 100)
 }
 
 // 修改
 const editd = (e: any) => {
-    popupFlag.value = true
+    push(`/admin/cockpit/popup?id=${e.id}`)
-    setTimeout(() => {
-        popupRef.value.open({
-            data: e,
-            title: '修改页面'
-        })
-    }, 100)
 }
 // 删除
 const deleted = (e: any) => {

src/views/setting/dictionary/component/add.vue

@@ -1,6 +1,7 @@
 <template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="930px" :title="title" @close="cancel">
-        <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
+        <div style="display: flex">
+            <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
                 <el-form-item class="top" label="组件名称" prop="name">
                     <el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
                 </el-form-item>
@@ -13,6 +14,9 @@
                         style="width: 100%"
                     />
                 </el-form-item>
+                <el-form-item label="组件图标" prop="icon">
+                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                </el-form-item>
                 <el-form-item class="top" label="组件标识" prop="code">
                     <el-input v-model="form.code" placeholder="请输入组件菜单选取"></el-input>
                 </el-form-item>
@@ -23,6 +27,20 @@
                     <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
                 </el-form-item>
             </el-form>
+            <div style="max-width: 600px; overflow: hidden">
+                <div class="ml10" style="font-weight: 600">组件展示</div>
+                <component
+                    :is="registerComponent(form.path)"
+                    v-if="registerComponent(form.path)"
+                    class="pd10 GridLayout"
+                    :key="form.path"
+                    :height="'350px'"
+                    :width="'533px'"
+                />
+                <!-- <div  class="pd10">组件加载失败...</div> -->
+                <el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
+            </div>
+        </div>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="cancel">取消</el-button>
@@ -32,12 +50,14 @@
     </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, type Component } from 'vue'
 import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useDictData } from '@/stores/dictData'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
+import IconSelector from '@/components/baInput/components/iconSelector.vue'
+import html2canvas from 'html2canvas'
 const dictData = useDictData()
 const dialogVisible = ref(false)
 const title = ref('')
@@ -55,7 +75,8 @@ const props = { label: 'name', value: 'id' }
 const rules = {
     code: [{ required: true, message: '请输入组件标识', trigger: 'blur' }],
     name: [{ required: true, message: '请输输入组件名称', trigger: 'blur' }],
-    system: [{ required: true, message: '请输选父组件节点', trigger: 'change' }],
+    system: [{ required: true, message: '请先择父组件节点', trigger: 'change' }],
+    icon: [{ required: true, message: '请先择组件图标', trigger: 'change' }],
     path: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
     sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
 }
@@ -80,23 +101,31 @@ const open = (text: string, data?: anyObj) => {
     }
 }
 const submit = () => {
-    console.log('🚀 ~ form:', form.value)
-    console.log('🚀 ~ formRef.value.validate ~ title.value:', title.value)
-
     formRef.value.validate(async (valid: boolean) => {
         if (valid) {
+            let url = ''
+            await html2canvas(document.querySelector('.GridLayout'), {
+                scale: 2
+            }).then(canvas => {
+                url = canvas.toDataURL('image/png')
+                console.log('🚀 ~ html2canvas ~ url:', url)
+            })
             if (title.value == '新增组件') {
-                await componentAdd({ ...form.value, systemType: form.value.system[0], pid: form.value.system[1] }).then(
+                await componentAdd({
-                    res => {
+                    ...form.value,
+                    systemType: form.value.system[0],
+                    pid: form.value.system[1],
+                    image: url
+                }).then(res => {
                     ElMessage.success('新增成功!')
                     cancel()
-                    }
+                })
-                )
             } else {
                 await componentEdit({
                     ...form.value,
                     systemType: form.value.system[0],
-                    pid: form.value.system[1]
+                    pid: form.value.system[1],
+                    image: url
                 }).then(res => {
                     ElMessage.success('修改成功!')
                     cancel()
@@ -105,6 +134,44 @@ const submit = () => {
         }
     })
 }
+// 组件映射
+const componentMap = reactive(new Map<string, Component | string>())
+// 动态注册组件
+const registerComponent = (path: string): Component | string | null => {
+    if (!path) return null
+    if (path.slice(-4) != '.vue') 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 cancel = () => {
     tableStore.index()
     dialogVisible.value = false

src/views/setting/dictionary/component/index.vue

@@ -36,8 +36,16 @@ const tableStore = new TableStore({
     showPage: false,
     column: [
         { field: 'name', title: '功能组件名称', align: 'left', treeNode: true },
+        {
+            title: '组件图标',
+            field: 'icon',
+            align: 'center',
+            width: '80',
+            render: 'icon'
+        },
         { field: 'code', title: '组件标识' },
         { field: 'path', title: '组件路径' },
+        { field: 'image', title: '组件展示', render: 'image' },
         {
             title: '操作',
             render: 'buttons',