Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改冀北问题

Browse Source
This commit is contained in:
guanj
2025-11-28 16:27:52 +08:00
parent 028fd44490
commit a19cbf233e
39 changed files with 11033 additions and 3886 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/views/pqs/cockpit/homePage/components/routingConfig.vue Normal file
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>

583
src/views/pqs/cockpit/homePage/index.vue
View File

@@ -1,245 +1,338 @@
<template>
<GridLayout
class="default-main"
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'"
:timeKey="item.timeKey"
/>
<div v-else class="pd10">组件加载失败...</div>
</div>
</div>
</template>
</GridLayout>
</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 { queryActivatePage } from '@/api/system-boot/csstatisticalset'
import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
// defineOptions({
// name: 'cockpit/homePage'
// })
// 定义类型
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 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() - 20) / 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 queryActivatePage()
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;
}
}
</style>
<template>
<div class="default-main">
<TableHeader :showSearch="false" v-show="flag">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker
ref="datePickerRef"
:nextFlag="false"
:theCurrentTime="true"
@change="handleDatePickerChange"
></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"
: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 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 as LayoutItem).component"
v-if="(item as LayoutItem).component"
class="pd10"
:key="key"
:timeValue="datePickerRef?.timeValue || 3"
:height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
:width="rowWidth * item.w - 30 + 'px'"
:timeKey="(item as LayoutItem).timeKey"
:interval="datePickerRef?.interval"
: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, 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 RoutingConfig from '@/views/pqs/cockpit/homePage/components/routingConfig.vue'
import { useRouter, useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const { push } = useRouter()
const datePickerRef = ref()
const router = useRouter()
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
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).href
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url).href
// 响应式数据
const rowHeight = ref(0)
const rowWidth = ref(0)
const layout: any = ref([
// {
// x: 4,
// y: 0,
// w: 4,
// h: 2,
// i: '1',
// name: '',
// path: '/src/views/pqs/runManage/assessment/components/uese/index.vue'
// },
])
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')
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() - 77 + (flag.value ? 0 : 56)) / 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('@/**/*.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: any, index: number) => ({
...item,
i: item.i || index, // 确保有唯一标识
component: registerComponent(item.path)
}))
}
console.log('🚀 ~ zoom ~ layout.value:', layout.value)
flag.value = !flag.value
initRowHeight()
key.value += 1
}
// 计算组件高度
const seRowHeight = (value: any) => {
if (value == 6) return 0
if (value == 5) return 12
if (value == 4) return 20
if (value == 3) return 30
if (value == 2) return 40
if (value == 1) return 50
return 0
}
// 获取布局数据
const fetchLayoutData = async () => {
try {
// const { data } = await queryByPagePath({ pagePath: router.currentRoute.value.name })
// dataList.value = data
dataList.value = {
createBy: 'e6a67ccbe789493687766c4304fcb228',
createTime: '2025-11-26 08:43:56',
updateBy: 'e6a67ccbe789493687766c4304fcb228',
updateTime: '2025-11-26 08:43:56',
id: 'e8218545cc11e32d5d6b87c92fdd0fbc',
pageName: '测试',
thumbnail: '',
remark: '',
containerConfig:
'[{"x":0,"y":0,"w":6,"h":3,"i":0.9274640143002512,"name":"终端在线率","path":"/src/components/cockpit/onlineRate/index.vue","icon":"local-审计列表","timeKey":"3","moved":false},{"x":6,"y":0,"w":6,"h":3,"i":0.9154814002445102,"name":"监测点数据完整性","path":"/src/components/cockpit/integrity/index.vue","icon":"local-告警中心","timeKey":"3","moved":false},{"x":0,"y":3,"w":6,"h":3,"i":0.6560899767923003,"name":"终端运行评价","path":"/src/components/cockpit/terminalEvaluation/index.vue","icon":"local-稳态指标超标明细","timeKey":"3","moved":false},{"x":6,"y":3,"w":6,"h":3,"i":0.5812302648025226,"name":"异常数据清洗","path":"/src/components/cockpit/dataCleaning/index.vue","icon":"local-区域暂态评估","timeKey":"3","moved":false}]',
sort: 100,
state: 1,
pagePath: 'dashboard/index6',
pathName: null,
routeName: '/src/views/pqs/cockpit/homePage/index.vue',
icon: ''
}
const parsedLayout = JSON.parse(dataList.value.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))
initRowHeight()
} catch (error) {
console.error('获取布局数据失败:', error)
// 可以添加错误提示逻辑
}
}
// 窗口大小变化处理 - 使用防抖
const handleResize = useDebounceFn(() => {
initRowHeight()
// 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()
}
// 处理 DatePicker 值变化事件
const handleDatePickerChange = (value: any) => {
// 将值缓存到 timeCache
if (value) {
timeCacheStore.setCache(route.path, value.interval, value.timeValue)
}
}
// 生命周期钩子
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;
}
}
</style>

459
src/views/pqs/cockpit/realTimeData/iframeDia.vue Normal file
View File

@@ -0,0 +1,459 @@
<template>
<div class="container">
<!-- 使用 v-for 遍历四个角落 -->
<div v-for="corner in corners" v-show="corner.show" :key="corner.id" :class="['corner', corner.className]">
<div class="content">
<div class="title" style="display: flex">
<img src="@/assets/img/lightning.png" class="title_img" />
<span>{{ corner.title }}</span>
</div>
<vxe-table
:data="corner.data"
size="small"
border
show-header
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
height="200"
style="padding: 5px;"
>
<vxe-column field="name" title="名称"></vxe-column>
<vxe-column field="a" title="A" width="40"></vxe-column>
<vxe-column field="b" title="B" width="40"></vxe-column>
<vxe-column field="c" title="C" width="40"></vxe-column>
</vxe-table>
</div>
<span class="close-btn" @click="closeCorner(corner.id)">
<Close />
</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from 'vue'
// import { clickImage } from "@/api/manage_wx";
import { Close } from '@element-plus/icons-vue'
import socketClient from '@/utils/webSocketClient'
//开始创建webSocket客户端
const dataSocket = reactive({
socketServe: socketClient.Instance
})
// 定义四个角落的数据
const corners = ref([
{
id: 'topLeft',
title: '左上',
className: 'top-left',
show: false,
data: [
{ name: '电压', a: 1098, b: 2080, c: 3006 },
{ name: '电流', a: 15, b: 25, c: 35 },
{ name: '电压畸变率', a: 12, b: 22, c: 32 },
{ name: '电流畸变率', a: 18, b: 28, c: 38 },
{ name: '电压偏值', a: 12, b: 22, c: 32 },
{ name: '电压不平衡', a: 18, b: 28, c: 38 }
] as any[],
elementId: '', // 记录该角落对应的元素ID
raceLists: [] as any[] // 为每个角落添加独立的跑马灯数据存储
},
{
id: 'topRight',
title: '右上',
className: 'top-right',
show: false,
data: [] as any[],
elementId: '',
raceLists: [] as any[] // 为每个角落添加独立的跑马灯数据存储
}
// {
// id: "bottomLeft",
// title: "左下",
// className: "bottom-left",
// show: false,
// data: [] as { label: string; value: string }[],
// elementId: "",
// },
// {
// id: "bottomRight",
// title: "右下",
// className: "bottom-right",
// show: false,
// data: [] as { label: string; value: string }[],
// elementId: "",
// },
])
interface DataTableItem {
name: string
a: number
b: number
c: number
}
const tableData = ref<DataTableItem[]>([
{ name: '电压', a: 1098, b: 2080, c: 3006 },
{ name: '电流', a: 15, b: 25, c: 35 },
{ name: '电压畸变率', a: 12, b: 22, c: 32 },
{ name: '电流畸变率', a: 18, b: 28, c: 38 },
{ name: '电压偏值', a: 12, b: 22, c: 32 },
{ name: '电压不平衡', a: 18, b: 28, c: 38 }
])
const steadyStateList = ref([])
const selectedId = ref('')
// 内部响应式数据
const eventList = ref<any[]>([])
// const handleClickImage = async (elementId: string) => {
// // 检查 elementId 是否有值，没有值则直接返回空数组
// if (!elementId) {
// eventList.value = [];
// return;
// }
// try {
// // 发送点击图片请求
// const res = await clickImage({ lineId: elementId });
// // 确保返回的数据是数组格式，并且过滤掉 null/undefined 元素
// let dataToStore: any[] = [];
// if (Array.isArray(res.data)) {
// dataToStore = res.data.filter(
// (item:any) => item !== null && item !== undefined
// );
// } else if (res.data && Array.isArray(res.data.records)) {
// dataToStore = res.data.records.filter(
// (item:any) => item !== null && item !== undefined
// );
// } else if (res.data) {
// // 如果是单个对象且不为 null
// if (res.data !== null && res.data !== undefined) {
// dataToStore = [res.data];
// }
// }
// eventList.value = dataToStore;
// } catch (error) {
// console.error("调用 clickImage 接口出错:", error);
// // 出错时设置为空数组，避免后续处理出错
// eventList.value = [];
// }
// };
// 记录显示顺序，用于循环替换
const displayOrder = ref<number[]>([])
// 更新指定角落数据的函数
const updateCornerData = (cornerIndex: number, dataItem: any, elementId: string) => {
// 更新标题为 objName
if (dataItem.objName) {
corners.value[cornerIndex].title = dataItem.objName
} else {
corners.value[cornerIndex].title = dataItem.stationName
}
// 格式化数据
corners.value[cornerIndex].data = [
{ label: '监测点', value: dataItem.lineName },
// {
// label: "暂降次数",
// value: dataItem.eventIds.length,
// },
{
label: '暂降次数',
value: ``
},
// { label: "稳态指标", value: "Ua:65.5 Ub:65.02 Uc:65.27 Uac:112.85 Uab:112.67 Ubc:112.85" },
{
label: '稳态指标',
value: ``
}
]
// 记录该角落对应的元素ID
corners.value[cornerIndex].elementId = elementId
corners.value[cornerIndex].show = true
}
// 显示下一个角落的函数
const showNextCorner = (elementId: string) => {
// 检查该元素ID是否已经显示过
const existingCornerIndex = corners.value.findIndex(corner => corner.elementId === elementId && corner.show)
if (existingCornerIndex !== -1) {
// 如果该元素已经显示过，不更新数据
return
}
// 确保 eventList.value 是数组并且过滤掉 null/undefined 元素
if (!Array.isArray(eventList.value)) {
console.warn('eventList.value 不是数组格式:', eventList.value)
return
}
// 过滤掉 null 和 undefined 元素，然后查找匹配项
const validItems = eventList.value.filter(item => item !== null && item !== undefined)
const dataItem = validItems.find(item => item.lineId === elementId)
// 如果没有找到匹配的数据项，则不更新数据
if (!dataItem) {
console.warn('未找到匹配的数据项:', elementId)
return
}
// 查找一个未显示的角落
const availableCornerIndex = corners.value.findIndex(corner => !corner.show)
if (availableCornerIndex !== -1) {
// 有空闲角落，显示在该角落
updateCornerData(availableCornerIndex, dataItem, elementId)
// 将事件数据存储到该角落
corners.value[availableCornerIndex].raceLists = dataItem.eventList || []
// 记录显示顺序
displayOrder.value.push(availableCornerIndex)
} else {
// 没有空闲角落，按顺序替换角落
// 获取需要替换的角落索引（循环替换）
const replaceIndex = displayOrder.value.shift() || 0
updateCornerData(replaceIndex, dataItem, elementId)
// 将事件数据存储到该角落
corners.value[replaceIndex].raceLists = dataItem.eventList || []
// 将替换的索引重新加入队列末尾
displayOrder.value.push(replaceIndex)
}
}
// 关闭指定角落的函数
const closeCorner = (id: string) => {
const cornerIndex = corners.value.findIndex(c => c.id === id)
if (cornerIndex !== -1) {
corners.value[cornerIndex].show = false
corners.value[cornerIndex].elementId = '' // 清空元素ID记录
// 从显示顺序中移除该角落索引
const orderIndex = displayOrder.value.indexOf(cornerIndex)
if (orderIndex !== -1) {
displayOrder.value.splice(orderIndex, 1)
}
}
send()
}
// 关闭所有角落的函数
const closeAllCorners = () => {
corners.value.forEach(corner => {
corner.show = false
corner.elementId = ''
})
displayOrder.value = []
}
// 组件挂载后初始化监听器
onMounted(() => {
init()
// 初始化时不显示任何内容
})
// 连接webSocket客户端
const init = () => {
if (!dataSocket.socketServe) {
console.error('WebSocket 客户端实例不存在')
return
}
dataSocket.socketServe.connect(new Date().getTime())
dataSocket.socketServe.registerCallBack('message', (res: any) => {
if (res.type == 1) {
//稳态指标数据
let steadyState = JSON.parse(res.message)
// console.log(steadyState, "8990hhhhh");
if (steadyState == null || steadyState.length == 0) return
steadyStateList.value = steadyState
corners.value.forEach((corner, index) => {
let str = ``
steadyState
.filter((item: any) => item.lineId == corner.elementId)
.forEach((item: any) => {
if (item.value == 3.1415926) {
str += `<div>${item.statisticalName}：/</div>`
} else {
str += `<div>${item.statisticalName}：${item.value}${item.unit}</div>`
}
})
corner.data.length > 0
? (corner.data[2].value = `<div style="max-height: 100px;overflow-y: auto;">${str} </div>`)
: ''
})
}
})
}
const time = ref(null)
// 推送消息
const send = () => {
dataSocket.socketServe.send({
pageId: selectedId.value,
lineIdList: corners.value.filter(item => item.show == true).map(corner => corner.elementId)
})
if (time.value) {
clearTimeout(time.value)
}
if (corners.value.filter(item => item.show == true).map(corner => corner.elementId).length == 0) return
time.value = setInterval(() => {
dataSocket.socketServe.send({
pageId: selectedId.value,
lineIdList: corners.value.filter(item => item.show == true).map(corner => corner.elementId)
})
}, 1000 * 60)
}
// 监听来自 iframe 的消息
window.addEventListener('message', async function (event) {
// 安全起见，可以验证消息来源（origin）
// if (event.origin !== 'https://trusted-origin.com') return;
// 处理从 iframe 发送过来的消息
if (event.data.action === 'coreClick') {
const clickedElementId = event.data.coreId
selectedId.value = event.data.selectedId
// 调用接口获取最新数据
// await handleClickImage(clickedElementId);
// 根据接收到的元素LineId显示对应数据
await showNextCorner(clickedElementId)
await send()
}
})
// 页面卸载时清除定时器
onBeforeUnmount(() => {
clearTimeout(time.value)
dataSocket.socketServe?.closeWs()
})
</script>
<style scoped lang="scss">
.container {
position: relative;
}
.corner {
width: 240px;
/* height: 135px; */
background-color: #fff;
position: absolute;
color: #000;
/* font-weight: bold; */
/* 添加弹出动画 */
opacity: 0;
transform: scale(0.3);
transition: all 0.4s ease-out;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* 显示状态的样式 */
.corner:not([style*='display: none']):not([style*='display:none']) {
opacity: 1;
transform: scale(1);
}
.top-left {
top: 10px;
left: 10px;
}
.top-right {
top: 10px;
right: 10px;
}
.bottom-left {
top: 170px;
left: 10px;
}
.bottom-right {
top: 170px;
right: 10px;
}
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.title {
font-size: 16px;
// text-align: center;
padding: 5px;
color: #fff;
border-bottom: 1px solid #444;
background-color: var(--el-color-primary);
border-radius: 8px 8px 0 0;
}
.title_img {
width: 25px;
height: 25px;
margin-right: 10px;
}
.data-item {
display: flex;
margin-bottom: 4px;
font-size: 12px;
}
.label {
/* font-weight: bold; */
width: 55px;
flex-shrink: 0;
}
.value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 关闭按钮样式 */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 14px;
color: white;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.indicator {
display: flex;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid #000;
text-align: center;
font-size: 12px;
}
</style>

244
src/views/pqs/cockpit/realTimeData/index.vue Normal file
View File

@@ -0,0 +1,244 @@
<template>
<div class="default-main" :style="{ padding: prop.height ? '0px !important' : '10px' }">
<!-- 实时数据 -->
<!-- 添加加载事件监听 -->
<div class="dataBox" :style="{ height: prop.height || pageHeight.height }" >
<div
class="iframe-container"
:style="{
boxShadow: `var(--el-box-shadow-light)`
}"
style="position: relative;"
>
<iframe
:src="iframeSrc"
width="100%"
height="100%"
frameborder="0"
scrolling="no"
id="iframeLeft"
@load="onIframeLoad"
></iframe>
<IframeDia
style="position: absolute; top: 0px; right: 0px; left: 0px"
/>
</div>
<el-card class="bottom-container " style="min-height: 230px;">
<div class="buttonBox">
<el-button type="primary" icon="el-icon-Aim">复位</el-button>
</div>
<div class="tableBox">
<Table ref="tableRef" height="100%"></Table>
</div>
</el-card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, provide } from 'vue'
import Table from '@/components/table/index.vue'
import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout'
import IframeDia from './iframeDia.vue'
// import { getActive } from "@/api/manage_wx/index";
// const props = defineProps<{
// project: { id: string; name: string } | null
// }>()
const prop = defineProps({
width: { type: [String, Number]},
height: { type: [String, Number]},
timeKey: { type: [String, Number]},
timeValue: { type: Object }
})
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
showPage: false,
column: [
{
field: 'index',
title: '序号',
width: '80',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{
title: '时间',
field: 'whetherToGovern',
minWidth: '70'
},
{
title: '监测点名',
field: 'name',
minWidth: '90'
// render: 'customTemplate',
// customTemplate: (row: any) => {
// return `<span style='cursor: pointer;text-decoration: underline;'>${row.name}</span>`
// }
},
{ title: '事件描述', field: 'question', minWidth: '200' }
],
beforeSearchFun: () => {
// tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
// tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
},
loadCallback: () => {
tableStore.table.data = [
{
name: '10kV1#电动机',
type: '电动机',
whetherToGovern: '2025-01-01 15:00:00',
question: '3次谐波电压、5次谐波电流、电压不平衡度超标'
},
{
name: '10kV2#(治理后)',
type: '电焊机',
whetherToGovern: '2025-05-01 16:00:00',
question: '所有指标均合格'
},
{
name: '380V电焊机(治理前)',
type: '电焊机',
whetherToGovern: '2025-06-01 15:00:00',
question: '5次谐波电流、电压不平衡度超标'
},
{
name: '380V水泵机',
type: '电动机',
whetherToGovern: '2025-08-01 15:00:00',
question: '所有指标均合格'
}
]
}
})
const tableRef = ref()
provide('tableRef', tableRef)
const pageHeight = mainHeight(40)
provide('tableStore', tableStore)
const iframeSrc = ref('')
// 监听 props 变化
// watch(
// () => props.project,
// newVal => {
// if (newVal && newVal.id && newVal.name) {
// // window.location.origin
// // iframeSrc.value =
// // "http://192.168.1.179:4001" +
// // `/zutai/?id=${newVal.id}&&name=${encodeURIComponent(
// // newVal.name
// // )}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
// iframeSrc.value =
// 'http://192.168.1.179:4001' +
// `/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true&&display=true#/preview_YPT`
// // console.log("更新 iframeSrc:", iframeSrc.value);
// }
// },
// { immediate: true, deep: true }
// )
onMounted(() => {
iframeSrc.value =
'http://192.168.1.179:4001' +
`/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true#/preview_YPT`
tableStore.index()
// 监听来自 eventStatistics 组件的消息
window.addEventListener('message', handleMessage)
// getActive({}).then((res: any) => {
// if (res.code == "A0000") {
// // window.location.origin
// iframeSrc.value =
// "http://192.168.1.179:4001" +
// `/zutai/?id=${res.data.id}&&name=${encodeURIComponent(
// res.data.name
// )}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
// }
// });
})
onUnmounted(() => {
// 清理事件监听器
window.removeEventListener('message', handleMessage)
})
// iframe 加载完成回调 添加加载事件监听
const onIframeLoad = () => {
// console.log("iframe 加载完成");
// 通知 securityDetail.vue 组件 iframe 已加载完成
window.postMessage(
{
type: 'IFRAME_LOADED',
data: { loaded: true }
},
'*'
)
}
// 处理来自 eventStatistics 组件的消息
const handleMessage = (event: MessageEvent) => {
// 验证消息来源（在生产环境中应该验证 origin）
// if (event.origin !== 'trusted-origin') return;
const { type, payload } = event.data
if (type === 'SEND_KEYS_TO_IFRAME') {
// 将数据转发给 iframe
sendKeysToIframe(payload)
}
}
// 向 iframe 发送 keyList 数据
const sendKeysToIframe = (keyList: string[]) => {
const iframe = document.getElementById('iframeLeft') as HTMLIFrameElement
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
type: 'ANALYSIS_KEYS',
payload: keyList
},
'*'
) // 在生产环境中应该指定具体的域名而不是 '*'
}
}
</script>
<style lang="scss" scoped>
.dataBox {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.iframe-container {
flex: 3.5;
}
:deep(.el-card__body) {
display: flex;
padding: 10px;
height: 100%;
.buttonBox {
display: flex;
width: 150px;
align-items: center;
justify-content: center;
}
.tableBox {
flex: 1;
width: 100%;
}
}
</style>

89
src/views/pqs/cockpit/setUp/components/popup.vue
View File

@@ -1,29 +1,29 @@
<template>
<div class="pd10">
<el-card>
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
<el-form-item label="页面名称:" prop="pageName">
<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
style="width: 100%"
/>
<el-form-item label="图标">
<IconSelector v-model.trim="form.icon" style="width: 80%" placeholder="请选择图标" />
</el-form-item>
<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 label="备注:" class="top">
<el-form-item label="备注" class="top">
<el-input
maxlength="300"
show-word-limit
@@ -87,6 +87,7 @@
<template #item="{ item }">
<div class="imgBox">
<div class="textName">{{ item.name }}</div>
<img
:src="getImg(item.path)"
:style="{
@@ -106,6 +107,7 @@
'px'
}"
/>
<CloseBold class="remove" @click="removeItem(item.i)" />
</div>
<!-- <span class="text">{{ `${item?.name}` }}</span>
@@ -118,11 +120,12 @@
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, onBeforeUnmount } 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 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'
@@ -130,11 +133,18 @@ import { ElMessage, ElMessageBox } from 'element-plus'
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'
// })
const { go } = useRouter()
const { query } = useRoute()
const router = useRouter()
const height = mainHeight(108)
const indicatorHeight = mainHeight(128)
const rowHeight = ref(0)
const pageList: any = ref([])
const GridHeight = ref(0)
const position = ref<CollapseIconPositionType>('left')
const form: any = reactive({
@@ -143,7 +153,11 @@ const form: any = reactive({
containerConfig: [],
sort: '100',
id: '',
remark: ''
icon: '',
pagePath: '',
remark: '',
routeName: '/src/views/pqs/cockpit/homePage/index.vue'
})
const activeNames = ref([])
const activeNames1 = ref([])
@@ -167,6 +181,13 @@ const layout: any = ref([
const treeComponents: any = ref([]) //组件树
const treeComponentsCopy: any = ref([]) //组件树
const info = () => {
pageList.value = router
.getRoutes()
.filter(item => item?.meta?.component == '/src/views/pqs/cockpit/homePage/index.vue')
.map(item => {
return { name: item?.meta?.title, path: item?.meta?.path }
})
activeNames.value = []
activeNames1.value = []
componentTree().then(res => {
@@ -184,10 +205,14 @@ const info = () => {
queryById({ id: query.id }).then(res => {
layout.value = JSON.parse(res.data.containerConfig)
form.pageName = res.data.pageName
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
}
}
@@ -286,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
@@ -309,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,
@@ -327,18 +351,19 @@ 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 = ''
await html2canvas(document.querySelector('.GridLayout'), {
useCORS: true
}).then(canvas => {
url = canvas.toDataURL('image/png')
})
// await html2canvas(document.querySelector('.GridLayout'), {
// useCORS: true
// }).then(canvas => {
// url = canvas.toDataURL('image/png')
// })
form.pagePath = form.pagePath || ''
if (valid) {
if (form.id == '') {
@@ -346,6 +371,7 @@ const onSubmit = () => {
(res: any) => {
ElMessage.success('新增页面成功!')
go(-1)
getMenu()
}
)
} else {
@@ -353,6 +379,7 @@ const onSubmit = () => {
(res: any) => {
ElMessage.success('修改页面成功!')
go(-1)
getMenu()
}
)
}
@@ -362,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()
@@ -436,7 +464,9 @@ onBeforeUnmount(() => {
.vgl-layout {
background-color: #eee;
}
:deep(.el-input-group) {
width: 90%;
}
.remove {
position: absolute;
top: 5px;
@@ -462,4 +492,7 @@ onBeforeUnmount(() => {
background-color: #fff;
border: 1px solid black;
}
:deep(.el-form--inline .el-form-item) {
margin-right: 0px;
}
</style>

560
src/views/pqs/cockpit/setUp/components/view.vue
View File

@@ -1,265 +1,295 @@
<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'"
:timeKey="item.timeKey"
/>
<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>
<template>
<div class="default-main">
<!-- <div class=" layoutHeader">
<div class="title">{{title}}</div>
<back-component />
</div> -->
<TableHeader :showSearch="false">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true"></DatePicker>
</el-form-item>
</template>
<template v-slot:operation>
<back-component />
</template>
</TableHeader>
<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"
:timeValue="datePickerRef.timeValue"
:height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
:width="rowWidth * item.w - 30 + 'px'"
:timeKey="item.timeKey"
/>
<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 TableHeader from '@/components/table/header/index.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import BackComponent from '@/components/icon/back/index.vue'
import { queryById } from '@/api/system-boot/csstatisticalset'
import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
// defineOptions({
// name: 'cockpit/view'
// })
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 datePickerRef = ref()
const title = 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 rowHeight = ref(0)
const rowWidth = ref(0)
const layout: any = 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('@/**/*.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 seRowHeight = (value: any) => {
if (value == 6) return 0
if (value == 5) return 12
if (value == 4) return 20
if (value == 3) return 30
if (value == 2) return 40
if (value == 1) return 50
return 0
}
// 窗口大小变化处理 - 使用防抖
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>

570
src/views/pqs/cockpit/setUp/index.vue
View File

@@ -1,284 +1,286 @@
<template>
<div class="default-main">
<TableHeader>
<template v-slot:select>
<el-form-item label="页面名称">
<el-input
maxlength="32"
show-word-limit
v-model.trim="tableStore.table.params.searchValue"
placeholder="请输入页面名称"
></el-input>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<!-- <Table ref="tableRef" /> -->
<div
style="overflow-x: hidden; overflow-y: scroll; padding: 0 10px"
v-loading="tableStore.table.loading"
:style="{ height: tableStore.table.height }"
>
<el-row :gutter="12">
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<span
style="display: flex; align-items: center; font-weight: 550"
:style="{ color: item.state == 1 ? `var(--el-color-primary)` : '' }"
>
{{ item.pageName }}
</span>
<div style="display: flex; justify-content: end">
<el-button
class="color"
icon="el-icon-Position"
style="padding: 3px 0"
type="text"
v-if="item.state == 0"
@click="activation(item)"
>
激活
</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"
style="padding: 3px 0"
type="text"
@click="editd(item)"
>
修改
</el-button>
<el-button
icon="el-icon-Delete"
style="padding: 3px 0; color: red"
type="text"
@click="deleted(item)"
>
删除
</el-button>
</div>
</div>
<img v-if="item.thumbnail" :src="item.thumbnail" class="image" />
<el-empty style="height: 220px" v-else description="暂无设计" />
</el-card>
</el-col>
</el-row>
</div>
<div class="table-pagination">
<el-pagination
:currentPage="tableStore.table.params!.pageNum"
:page-size="tableStore.table.params!.pageSize"
:page-sizes="[10, 20, 50, 100]"
background
:layout="'sizes,total, ->, prev, pager, next, jumper'"
:total="tableStore.table.total"
@size-change="onTableSizeChange"
@current-change="onTableCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
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'
const { push } = useRouter()
import { deleteDashboard, activatePage } from '@/api/system-boot/csstatisticalset'
defineOptions({
// name: 'cockpit/setUp'
})
const tableRef = ref()
const tableStore = new TableStore({
showPage: false,
url: '/system-boot/dashboard/queryPage',
method: 'POST',
publicHeight: 60,
column: [],
loadCallback: () => {}
})
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
onMounted(() => {
tableStore.table.ref = tableRef.value
tableStore.index()
tableStore.table.loading = false
})
// 查询
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}`)
}
// 删除
const deleted = (e: any) => {
ElMessageBox.confirm('此操作将永久删除该页面, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDashboard({ id: e.id }).then((res: any) => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '删除页面成功!'
})
}
tableStore.index()
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
// 激活
const activation = (e: any) => {
ElMessageBox.confirm('此操作将激活该页面, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
activatePage({ id: e.id }).then((res: any) => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '激活成功!'
})
}
tableStore.index()
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
const onTableSizeChange = (val: number) => {
tableStore.onTableAction('page-size-change', { size: val })
}
const onTableCurrentChange = (val: number) => {
tableStore.onTableAction('current-page-change', { page: val })
}
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
span {
font-size: 16px;
}
.item {
margin-bottom: 18px;
}
.image {
display: block;
width: 100%;
height: 220px;
}
.clearfix::before,
.clearfix::after {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
.box-card {
width: 100%;
// border: 1px solid #000;
box-shadow: var(--el-box-shadow-light);
}
.setstyle {
min-height: 200px;
padding: 0 !important;
margin: 0;
overflow: auto;
cursor: default !important;
}
.color {
color: var(--el-color-primary);
}
:deep(.el-select-dropdown__wrap) {
max-height: 300px;
}
:deep(.el-tree) {
padding-top: 15px;
padding-left: 10px;
// 不可全选样式
.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
}
:deep(.el-card__header) {
padding: 13px 20px;
height: 44px;
}
.table-pagination {
height: 58px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
padding: 13px 15px;
border-left: 1px solid #e4e7e9;
border-right: 1px solid #e4e7e9;
border-bottom: 1px solid #e4e7e9;
}
:deep(.el-pagination__sizes) {
.el-select {
min-width: 128px;
}
}
</style>
<template>
<div class="default-main">
<TableHeader>
<template v-slot:select>
<el-form-item label="页面名称">
<el-input
maxlength="32"
show-word-limit
v-model.trim="tableStore.table.params.searchValue"
placeholder="请输入页面名称"
></el-input>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<!-- <Table ref="tableRef" /> -->
<div
style="overflow-x: hidden; overflow-y: scroll; padding: 0 10px"
v-loading="tableStore.table.loading"
:style="{ height: tableStore.table.height }"
>
<el-row :gutter="12">
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<span
style="display: flex; align-items: center; font-weight: 550"
:style="{ color: item.state == 1 ? `var(--el-color-primary)` : '' }"
>
{{ item.pageName }}
</span>
<div style="display: flex; justify-content: end">
<!-- <el-button
class="color"
icon="el-icon-Position"
style="padding: 3px 0"
type="text"
v-if="item.state == 0"
@click="activation(item)"
>
激活
</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"
style="padding: 3px 0"
type="text"
@click="editd(item)"
>
修改
</el-button>
<el-button
icon="el-icon-Delete"
style="padding: 3px 0; color: red"
type="text"
@click="deleted(item)"
>
删除
</el-button>
</div>
</div>
<img v-if="item.thumbnail" :src="item.thumbnail" class="image" />
<el-empty style="height: 220px" v-else description="暂无设计" />
</el-card>
</el-col>
</el-row>
</div>
<div class="table-pagination">
<el-pagination
:currentPage="tableStore.table.params!.pageNum"
:page-size="tableStore.table.params!.pageSize"
:page-sizes="[10, 20, 50, 100]"
background
:layout="'sizes,total, ->, prev, pager, next, jumper'"
:total="tableStore.table.total"
@size-change="onTableSizeChange"
@current-change="onTableCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
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'
const { push } = useRouter()
import { deleteDashboard, activatePage } from '@/api/system-boot/csstatisticalset'
defineOptions({
// name: 'cockpit/setUp'
})
const tableRef = ref()
const tableStore = new TableStore({
showPage: false,
url: '/system-boot/dashboard/queryPage',
method: 'POST',
publicHeight: 60,
column: [],
loadCallback: () => {}
})
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
onMounted(() => {
tableStore.table.ref = tableRef.value
tableStore.index()
tableStore.table.loading = false
})
// 查询
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}`)
}
// 删除
const deleted = (e: any) => {
ElMessageBox.confirm('此操作将永久删除该页面, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDashboard({ id: e.id }).then((res: any) => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '删除页面成功!'
})
}
tableStore.index()
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
// 激活
const activation = (e: any) => {
ElMessageBox.confirm('此操作将激活该页面, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
activatePage({ id: e.id }).then((res: any) => {
if (res.code == 'A0000') {
ElMessage({
type: 'success',
message: '激活成功!'
})
}
tableStore.index()
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
const onTableSizeChange = (val: number) => {
tableStore.onTableAction('page-size-change', { size: val })
}
const onTableCurrentChange = (val: number) => {
tableStore.onTableAction('current-page-change', { page: val })
}
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
span {
font-size: 16px;
}
.item {
margin-bottom: 18px;
}
.image {
display: block;
width: 100%;
height: 220px;
}
.clearfix::before,
.clearfix::after {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
.box-card {
width: 100%;
// border: 1px solid #000;
box-shadow: var(--el-box-shadow-light);
}
.setstyle {
min-height: 200px;
padding: 0 !important;
margin: 0;
overflow: auto;
cursor: default !important;
}
.color {
color: var(--el-color-primary);
}
:deep(.el-select-dropdown__wrap) {
max-height: 300px;
}
:deep(.el-tree) {
padding-top: 15px;
padding-left: 10px;
// 不可全选样式
.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
}
:deep(.el-card__header) {
padding: 13px 20px;
height: 44px;
}
.table-pagination {
height: 58px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
padding: 13px 15px;
border-left: 1px solid #e4e7e9;
border-right: 1px solid #e4e7e9;
border-bottom: 1px solid #e4e7e9;
}
:deep(.el-pagination__sizes) {
.el-select {
min-width: 128px;
}
}
</style>