修改驾驶舱页面

This commit is contained in:
guanj
2025-10-24 16:17:40 +08:00
parent d113df832d
commit dede918f34
12 changed files with 454 additions and 173 deletions

View File

@@ -77,3 +77,11 @@ export const queryByPagePath = (params: any) => {
params
})
}
// 根据用户id查询用户驾驶舱
export const getDashboardPageByUserId = (params: any) => {
return createAxios({
url: '/system-boot/dashboard/getDashboardPageByUserId',
method: 'post',
params
})
}

View File

@@ -1,7 +1,7 @@
<template>
<div>
<!--治理效果报表 -->
<TableHeader :showReset="false">
<TableHeader :showReset="false" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="治理对象">
<el-select
@@ -26,13 +26,16 @@
<div style="display: flex">
<div
id="luckysheet"
:style="{ width: `calc(${prop.width} )`, height: `calc(${prop.height} - 57px )` }"
:style="{
width: `calc(${prop.width} )`,
height: `calc(${prop.height} - 57px + ${fullscreen ? 0 : 56}px)`
}"
></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import { ref, onMounted, provide, reactive, watch, h, computed } from 'vue'
import TableStore from '@/utils/tableStore'
import { exportExcel } from '@/views/govern/reportForms/export.js'
import TableHeader from '@/components/table/header/index.vue'
@@ -44,6 +47,8 @@ import { useConfig } from '@/stores/config'
import Json from './index.json'
const prop = defineProps({
w: { type: String },
h: { type: String },
width: { type: String },
height: { type: String },
timeKey: { type: String },
@@ -98,6 +103,17 @@ onMounted(() => {
tableStore.index()
})
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
watch(
() => prop.timeKey,
val => {
@@ -120,5 +136,4 @@ const addMenu = () => {}
:deep(.el-select) {
min-width: 80px;
}
</style>

View File

@@ -1,7 +1,7 @@
<template>
<div>
<!--指标拟合图 -->
<TableHeader :showReset="false" @selectChange="selectChange">
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="用户功率">
<el-select
@@ -53,12 +53,15 @@
<my-echart
class="tall"
:options="echartList"
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
:style="{
width: prop.width,
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`
}"
/>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import { ref, onMounted, provide, reactive, watch, h, computed } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
@@ -68,6 +71,8 @@ import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
const prop = defineProps({
w: { type: String },
h: { type: String },
width: { type: String },
height: { type: String },
timeKey: { type: String },
@@ -84,6 +89,17 @@ const powerList: any = ref([
value: '2'
}
])
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const exceedingTheLimitList: any = ref([
{
label: '越限',

View File

@@ -1,7 +1,7 @@
<template>
<div>
<!--趋势对比 -->
<TableHeader :showReset="false" @selectChange="selectChange">
<TableHeader :showReset="false" @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="监测点名称">
<el-select
@@ -53,12 +53,12 @@
<my-echart
class="tall"
:options="echartList"
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)` }"
/>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import { ref, onMounted, provide, reactive, watch, h, computed } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
@@ -68,6 +68,8 @@ import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
const prop = defineProps({
w: { type: String },
h: { type: String },
width: { type: String },
height: { type: String },
timeKey: { type: String },
@@ -84,6 +86,17 @@ const powerList: any = ref([
value: '2'
}
])
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const exceedingTheLimitList: any = ref([
{
label: '2次',

View File

@@ -1,5 +1,5 @@
import router from '@/router/index'
import { isNavigationFailure, NavigationFailureType } from 'vue-router'
import { isNavigationFailure, NavigationFailureType ,useRouter} from 'vue-router'
import type { RouteRecordRaw, RouteLocationRaw } from 'vue-router'
import { ElNotification } from 'element-plus'
import { useConfig } from '@/stores/config'
@@ -8,8 +8,9 @@ import { closeShade } from '@/utils/pageShade'
import { adminBaseRoute } from '@/router/static'
import { compact, isEmpty, reverse } from 'lodash-es'
import { isAdminApp } from '@/utils/common'
import { log } from 'console'
import { getRouteMenu, dictDataCache } from '@/api/auth'
import { adminBaseRoutePath } from '@/router/static'
const route = useRouter()
/**
* 导航失败有错误消息的路由push
* @param to — 导航位置,同 router.push
@@ -279,6 +280,41 @@ export const addRouteItem = (
}
}
// 刷新菜单
export const getMenu = () => {
getRouteMenu().then((res: any) => {
const handlerMenu = (data: any) => {
data.forEach((item: any) => {
item.routePath =
item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
item.path = item.routePath
item.name = item.routePath
item.keepalive = item.routePath
item.component = item.routeName
? item.routeName.indexOf('/src/views/') > -1
? item.routeName
: `/src/views/${item.routeName}/index.vue`
: ''
item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
if (item.children) {
handlerMenu(item.children)
}
})
}
handlerMenu(res.data)
handleAdminRoute(res.data)
if (route.params.to) {
const lastRoute = JSON.parse(route.params.to as string)
if (lastRoute.path != adminBaseRoutePath) {
let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
routePush({ path: lastRoute.path, query: query })
return
}
}
})
}
/**
* 根据name字符串获取父级name组合的数组
* @param name

View File

@@ -0,0 +1,161 @@
<template>
<div>
<el-dialog v-model="dialogVisible" title="设置" width="600">
<div style="display: flex; justify-content: end" class="mb10">
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
</div>
<div style="height: calc(100vh / 2); max-height: 400px">
<vxe-table
border
ref="tableRef"
:data="pageList.filter((item: any) => item.pagePath != 'dashboard/index')"
align="center"
height="auto"
v-bind="defaultAttribute"
>
<vxe-column field="pageName" title="菜单名称"></vxe-column>
<vxe-column field="icon" title="图标" width="80">
<template #default="{ row }">
<Icon class="ba-icon-dark" :name="row.icon || ''" />
</template>
</vxe-column>
<vxe-column field="startTime" title="是否激活">
<template #default="{ row }">
<el-switch
v-model="row.state"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="已激活"
inactive-text="未激活"
:before-change="() => beforeChange(row)"
/>
</template>
</vxe-column>
<vxe-column field="startTime" title="操作">
<template #default="{ row }">
<el-button type="primary" link @click="edit(row)">编辑</el-button>
<el-button type="danger" link @click="deletes(row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getDashboardPageByUserId, deleteDashboard, activatePage } from '@/api/system-boot/csstatisticalset'
import { useAdminInfo } from '@/stores/adminInfo'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMenu } from '@/utils/router'
const { push } = useRouter()
const dialogVisible = ref(false)
const route = useRouter()
const adminInfo = useAdminInfo()
const pageList: any = ref([])
const open = () => {
dialogVisible.value = true
init()
}
const init = () => {
getDashboardPageByUserId({ id: adminInfo.id, state: false }).then(res => {
pageList.value = res.data
})
}
// 新增
const add = () => {
push(`/admin/cockpit/popup?path=${String(getNextPagePath(pageList.value))}`)
}
// 修改
const edit = (row: any) => {
push(`/admin/cockpit/popup?id=${row?.id}&&path=${row.pagePath}`)
}
// 激活
const beforeChange = (row: any): Promise<boolean> => {
return new Promise(resolve => {
// setTimeout(() => {
// loading1.value = false
// ElMessage.success('Switch success')
// return resolve(true)
// }, 1000)
ElMessageBox.confirm('此操作将激活该页面, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
activatePage({ id: row.id, state: row.state == 0 ? 1 : 0 }).then((res: any) => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '操作成功!'
})
}
init()
resolve(true)
getMenu()
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
})
}
// 删除
const deletes = (row: any) => {
ElMessageBox.confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDashboard({ id: row.id }).then((res: any) => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '删除页面成功!'
})
}
init()
getMenu()
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
function getNextPagePath(pages: any) {
// 提取所有pagePath中的数字部分
const numbers = pages.map((page: any) => {
const match = page.pagePath.match(/dashboard\/index(\d*)$/)
if (match && match[1]) {
return parseInt(match[1], 10)
}
return 0 // 没有数字时视为0
})
// 找到最大数字并加1
const maxNum = Math.max(...numbers)
const nextNum = maxNum + 1
// 生成下一个pagePath
return `dashboard/index${nextNum}`
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

View File

@@ -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()
// 添加窗口大小变化监听器

View File

@@ -24,7 +24,7 @@
/>
</div>
<el-card class="bottom-container " style="flex: 1;min-height: 165px;">
<el-card class="bottom-container " style="min-height: 230px;">
<div class="buttonBox">
<el-button type="primary" icon="el-icon-Aim">复位</el-button>
</div>

View File

@@ -1,31 +1,27 @@
<template>
<div class="pd10">
<el-card>
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="auto" class="form-four">
<el-form-item label="页面名称" prop="pageName">
<el-input
style="width: 100%"
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
/>
<el-form-item label="图标">
<IconSelector v-model.trim="form.icon" style="width: 80%" placeholder="请选择图标" />
</el-form-item>
<el-form-item label="绑定页面">
<el-form-item label="页面排序" prop="sort">
<el-input-number style="width: 100%" v-model.trim="form.sort" :min="0" :max="10000" :step="1" />
</el-form-item>
<!-- <el-form-item label="绑定页面">
<el-select v-model="form.pagePath" filterable placeholder="请选择绑定页面" style="width: 100%" clearable>
<el-option v-for="item in pageList" :key="item.path" :label="item.name" :value="item.path" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="备注" class="top">
<el-input
@@ -91,6 +87,7 @@
<template #item="{ item }">
<div class="imgBox">
<div class="textName">{{ item.name }}</div>
<img
:src="getImg(item.path)"
:style="{
@@ -110,6 +107,7 @@
'px'
}"
/>
<CloseBold class="remove" @click="removeItem(item.i)" />
</div>
<!-- <span class="text">{{ `${item?.name}` }}</span>
@@ -127,6 +125,7 @@ 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 IconSelector from '@/components/baInput/components/iconSelector.vue'
import { componentTree } from '@/api/user-boot/user'
import { GridLayout, GridItem } from 'grid-layout-plus'
import { throttle } from 'lodash-es'
@@ -135,7 +134,7 @@ import { Tools, CloseBold } from '@element-plus/icons-vue'
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
import html2canvas from 'html2canvas'
import { useRoute } from 'vue-router'
import { getMenu } from '@/utils/router'
// defineOptions({
// name: 'cockpit/popup'
// })
@@ -154,9 +153,11 @@ const form: any = reactive({
containerConfig: [],
sort: '100',
id: '',
icon: '',
pagePath: '',
pathName: '',
remark: ''
remark: '',
routeName: '/src/views/pqs/cockpit/homePage/index.vue'
})
const activeNames = ref([])
const activeNames1 = ref([])
@@ -204,12 +205,14 @@ const info = () => {
queryById({ id: query.id }).then(res => {
layout.value = JSON.parse(res.data.containerConfig)
form.pageName = res.data.pageName
form.pagePath = res.data.pagePath
form.pathName = res.data.pathName
form.pagePath = query.path || res.data.pagePath
form.sort = res.data.sort
form.remark = res.data.remark
form.id = res.data.id
form.icon = res.data.icon
})
} else {
form.pagePath = query.path
}
}
@@ -308,7 +311,6 @@ const drag = throttle(row => {
})
function dragEnd(row: any) {
console.log('🚀 ~ drag ~ row:', row)
const parentRect = wrapper.value?.getBoundingClientRect()
if (!parentRect || !gridLayout.value) return
@@ -331,7 +333,7 @@ function dragEnd(row: any) {
y: dragItem.y,
w: dragItem.w,
h: dragItem.h,
i: dragItem.i,
i: Math.random(), //dragItem.i,
name: row.name,
path: row.path,
icon: row.icon,
@@ -349,10 +351,10 @@ const onSubmit = () => {
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('组件不能超出当前容器!')
}
// 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 = ''
@@ -362,7 +364,6 @@ const onSubmit = () => {
url = canvas.toDataURL('image/png')
})
form.pagePath = form.pagePath || ''
form.pathName = pageList.value.filter((item: any) => item.path == form.pagePath)?.[0]?.name || ''
if (valid) {
if (form.id == '') {
@@ -370,6 +371,7 @@ const onSubmit = () => {
(res: any) => {
ElMessage.success('新增页面成功!')
go(-1)
getMenu()
}
)
} else {
@@ -377,6 +379,7 @@ const onSubmit = () => {
(res: any) => {
ElMessage.success('修改页面成功!')
go(-1)
getMenu()
}
)
}
@@ -386,6 +389,7 @@ const onSubmit = () => {
const getImg = throttle((path: string) => {
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
})
onMounted(() => {
info()
@@ -460,7 +464,9 @@ onBeforeUnmount(() => {
.vgl-layout {
background-color: #eee;
}
:deep(.el-input-group) {
width: 90%;
}
.remove {
position: absolute;
top: 5px;
@@ -486,4 +492,7 @@ onBeforeUnmount(() => {
background-color: #fff;
border: 1px solid black;
}
:deep(.el-form--inline .el-form-item) {
margin-right: 0px;
}
</style>

View File

@@ -31,12 +31,7 @@
>
{{ item.pageName }}
</span>
<div style="display: flex; align-items: center; font-weight: 550">
<div v-if="item.pathName" :style="{ color: `var(--el-color-primary)` }">
绑定页面{{ item.pathName }}
</div>
<div v-else>暂未绑定</div>
</div>
<div style="display: flex; justify-content: end">
<!-- <el-button

View File

@@ -32,11 +32,11 @@
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
</el-form-item>
</el-form>
<div style="width: 600px; height: 360px; overflow: hidden">
<div style="width: 600px; height: 390px; 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="'580px'"
:timeKey="form.timeKey" />
:timeKey="form.timeKey" :w="12" :h="6"/>
<!-- <div class="pd10">组件加载失败...</div> -->
<el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
</div>