驾驶舱功能开发

package.json

@@ -41,6 +41,7 @@
     "element-plus": "^2.8.7",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
+    "grid-layout-plus": "^1.1.0",
     "html2canvas": "^1.4.1",
     "jquery": "^3.7.1",
     "js-pinyin": "^0.2.5",

src/api/system-boot/csstatisticalset.ts

@@ -1,6 +1,6 @@
 import createAxios from '@/utils/request'
 // 查询指标
-export const queryStatistical = (id:string) => {
+export const queryStatistical = (id: string) => {
     let form = new FormData()
     form.append('id', id)
     return createAxios({
@@ -14,10 +14,49 @@ export const queryStatistical = (id:string) => {
 }
 
 // 绑定指标
-export const addStatistical = (params:any) => {
+export const addStatistical = (params: any) => {
     return createAxios({
         url: '/system-boot/csstatisticalset/addStatistical',
         method: 'post',
         data: params
     })
 }
+// 新增驾驶舱页面
+export const addDashboard = (data: any) => {
+    return createAxios({
+        url: '/system-boot/dashboard/addDashboard',
+        method: 'post',
+        data: data
+    })
+}
+// 修改驾驶舱页面
+export const updateDashboard = (data: any) => {
+    return createAxios({
+        url: '/system-boot/dashboard/updateDashboard',
+        method: 'post',
+        data: data
+    })
+}
+// 删除驾驶舱页面
+export const deleteDashboard = (params: any) => {
+    return createAxios({
+        url: '/system-boot/dashboard/deleteDashboard',
+        method: 'post',
+        params
+    })
+}
+// 激活的驾驶舱页面
+export const activatePage = (params: any) => {
+    return createAxios({
+        url: '/system-boot/dashboard/activatePage',
+        method: 'post',
+        params
+    })
+}
+// 查询激活的驾驶舱页面
+export const queryActivatePage = () => {
+    return createAxios({
+        url: '/system-boot/dashboard/queryActivatePage',
+        method: 'post'
+    })
+}

src/api/user-boot/dept.ts

@@ -80,3 +80,39 @@ export function getDeptListByIds(data:any) {
     })
 }
 
+// 查询组件
+export function getFatherComponent(params:any) {
+    return request({
+        url: '/user-boot/component/getFatherComponent',
+        method: 'GET',
+        params
+    })
+}
+
+// 删除组件
+export function deleteSubassembly(params:any) {
+    return request({
+        url: '/user-boot/component/delete',
+        method: 'DELETE',
+        params
+    })
+}
+
+// 新增组件
+export function componentAdd(data:any) {
+    return request({
+        url: '/user-boot/component/add',
+        method: 'post',
+        data
+    })
+}
+
+// 修改组件
+export function componentEdit(data:any) {
+    return request({
+        url: '/user-boot/component/update',
+        method: 'put',
+        data
+    })
+}
+

src/api/user-boot/user.ts

@@ -206,3 +206,10 @@ export const getSysConfig = () => {
         method: 'get'
     })
 }
+// 驾驶舱组件配置
+export const componentTree = () => {
+    return request({
+        url: '/user-boot/component/componentTree',
+        method: 'GET'
+    })
+}

src/components/echarts/MyEchart.vue

@@ -112,7 +112,7 @@ const initChart = () => {
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '70px',
+            top: '50px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',

src/styles/vxeTable.scss

@@ -20,10 +20,10 @@
 // }
 
 .vxe-header--row {
-    // background: var(--vxe-table-header-background-color);
+    background: var(--vxe-table-header-background-color);
-    // color: var(--vxe-table-header-font-color);
+    color: var(--vxe-table-header-font-color);
-    background: var(--el-color-primary);
+    // background: var(--el-color-primary);
-    color: #fff;
+    // color: #fff;
     font-size: 14px;
 }
 

src/utils/formatTime.ts

@@ -5,51 +5,51 @@ import type { TableColumnCtx } from 'element-plus'
  * 日期快捷选项适用于 el-date-picker
  */
 export const defaultShortcuts = [
-  {
+    {
-    text: '今天',
+        text: '今天',
-    value: () => {
+        value: () => {
-      return new Date()
+            return new Date()
+        }
+    },
+    {
+        text: '昨天',
+        value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24)
+            return [date, date]
+        }
+    },
+    {
+        text: '最近七天',
+        value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+            return [date, new Date()]
+        }
+    },
+    {
+        text: '最近 30 天',
+        value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+            return [date, new Date()]
+        }
+    },
+    {
+        text: '本月',
+        value: () => {
+            const date = new Date()
+            date.setDate(1) // 设置为当前月的第一天
+            return [date, new Date()]
+        }
+    },
+    {
+        text: '今年',
+        value: () => {
+            const date = new Date()
+            return [new Date(`${date.getFullYear()}-01-01`), date]
+        }
     }
-  },
-  {
-    text: '昨天',
-    value: () => {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24)
-      return [date, date]
-    }
-  },
-  {
-    text: '最近七天',
-    value: () => {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-      return [date, new Date()]
-    }
-  },
-  {
-    text: '最近 30 天',
-    value: () => {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
-      return [date, new Date()]
-    }
-  },
-  {
-    text: '本月',
-    value: () => {
-      const date = new Date()
-      date.setDate(1) // 设置为当前月的第一天
-      return [date, new Date()]
-    }
-  },
-  {
-    text: '今年',
-    value: () => {
-      const date = new Date()
-      return [new Date(`${date.getFullYear()}-01-01`), date]
-    }
-  }
 ]
 
 /**
@@ -64,19 +64,19 @@ export const defaultShortcuts = [
  * @returns 返回拼接后的时间字符串
  */
 export function formatDate(date: Date, format?: string): string {
-  // 日期不存在，则返回空
+    // 日期不存在，则返回空
-  if (!date) {
+    if (!date) {
-    return ''
+        return ''
-  }
+    }
-  // 日期存在，则进行格式化
+    // 日期存在，则进行格式化
-  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
+    return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
 }
 
 /**
  * 获取当前的日期+时间
  */
 export function getNowDateTime() {
-  return dayjs()
+    return dayjs()
 }
 
 /**
@@ -85,18 +85,18 @@ export function getNowDateTime() {
  * @returns 返回第几周数字值
  */
 export function getWeek(dateTime: Date): number {
-  const temptTime = new Date(dateTime.getTime())
+    const temptTime = new Date(dateTime.getTime())
-  // 周几
+    // 周几
-  const weekday = temptTime.getDay() || 7
+    const weekday = temptTime.getDay() || 7
-  // 周1+5天=周六
+    // 周1+5天=周六
-  temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
+    temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
-  let firstDay = new Date(temptTime.getFullYear(), 0, 1)
+    let firstDay = new Date(temptTime.getFullYear(), 0, 1)
-  const dayOfWeek = firstDay.getDay()
+    const dayOfWeek = firstDay.getDay()
-  let spendDay = 1
+    let spendDay = 1
-  if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1
+    if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1
-  firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay)
+    firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay)
-  const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
+    const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
-  return Math.ceil(d / 7)
+    return Math.ceil(d / 7)
 }
 
 /**
@@ -111,38 +111,38 @@ export function getWeek(dateTime: Date): number {
  * @returns 返回拼接后的时间字符串
  */
 export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS'): string {
-  // 传入格式处理、存储转换值
+    // 传入格式处理、存储转换值
-  let t: any, s: number
+    let t: any, s: number
-  // 获取js 时间戳
+    // 获取js 时间戳
-  let time: number = new Date().getTime()
+    let time: number = new Date().getTime()
-  // 是否是对象
+    // 是否是对象
-  typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param)
+    typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param)
-  // 当前时间戳 - 传入时间戳
+    // 当前时间戳 - 传入时间戳
-  time = Number.parseInt(`${time - t}`)
+    time = Number.parseInt(`${time - t}`)
-  if (time < 10000) {
+    if (time < 10000) {
-    // 10秒内
+        // 10秒内
-    return '刚刚'
+        return '刚刚'
-  } else if (time < 60000 && time >= 10000) {
+    } else if (time < 60000 && time >= 10000) {
-    // 超过10秒少于1分钟内
+        // 超过10秒少于1分钟内
-    s = Math.floor(time / 1000)
+        s = Math.floor(time / 1000)
-    return `${s}秒前`
+        return `${s}秒前`
-  } else if (time < 3600000 && time >= 60000) {
+    } else if (time < 3600000 && time >= 60000) {
-    // 超过1分钟少于1小时
+        // 超过1分钟少于1小时
-    s = Math.floor(time / 60000)
+        s = Math.floor(time / 60000)
-    return `${s}分钟前`
+        return `${s}分钟前`
-  } else if (time < 86400000 && time >= 3600000) {
+    } else if (time < 86400000 && time >= 3600000) {
-    // 超过1小时少于24小时
+        // 超过1小时少于24小时
-    s = Math.floor(time / 3600000)
+        s = Math.floor(time / 3600000)
-    return `${s}小时前`
+        return `${s}小时前`
-  } else if (time < 259200000 && time >= 86400000) {
+    } else if (time < 259200000 && time >= 86400000) {
-    // 超过1天少于3天内
+        // 超过1天少于3天内
-    s = Math.floor(time / 86400000)
+        s = Math.floor(time / 86400000)
-    return `${s}天前`
+        return `${s}天前`
-  } else {
+    } else {
-    // 超过3天
+        // 超过3天
-    const date = typeof param === 'string' || 'object' ? new Date(param) : param
+        const date = typeof param === 'string' || 'object' ? new Date(param) : param
-    return formatDate(date, format)
+        return formatDate(date, format)
-  }
+    }
 }
 
 /**
@@ -152,15 +152,15 @@ export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS')
  * @returns 返回拼接后的时间字符串
  */
 export function formatAxis(param: Date): string {
-  const hour: number = new Date(param).getHours()
+    const hour: number = new Date(param).getHours()
-  if (hour < 6) return '凌晨好'
+    if (hour < 6) return '凌晨好'
-  else if (hour < 9) return '早上好'
+    else if (hour < 9) return '早上好'
-  else if (hour < 12) return '上午好'
+    else if (hour < 12) return '上午好'
-  else if (hour < 14) return '中午好'
+    else if (hour < 14) return '中午好'
-  else if (hour < 17) return '下午好'
+    else if (hour < 17) return '下午好'
-  else if (hour < 19) return '傍晚好'
+    else if (hour < 19) return '傍晚好'
-  else if (hour < 22) return '晚上好'
+    else if (hour < 22) return '晚上好'
-  else return '夜里好'
+    else return '夜里好'
 }
 
 /**
@@ -170,24 +170,24 @@ export function formatAxis(param: Date): string {
  * @returns {string} 字符串
  */
 export function formatPast2(ms: number): string {
-  const day = Math.floor(ms / (24 * 60 * 60 * 1000))
+    const day = Math.floor(ms / (24 * 60 * 60 * 1000))
-  const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
+    const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
-  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
+    const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
-  const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
+    const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
-  if (day > 0) {
+    if (day > 0) {
-    return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
+        return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
-  }
+    }
-  if (hour > 0) {
+    if (hour > 0) {
-    return hour + ' 小时 ' + minute + ' 分钟'
+        return hour + ' 小时 ' + minute + ' 分钟'
-  }
+    }
-  if (minute > 0) {
+    if (minute > 0) {
-    return minute + ' 分钟'
+        return minute + ' 分钟'
-  }
+    }
-  if (second > 0) {
+    if (second > 0) {
-    return second + ' 秒'
+        return second + ' 秒'
-  } else {
+    } else {
-    return 0 + ' 秒'
+        return 0 + ' 秒'
-  }
+    }
 }
 
 /**
@@ -198,7 +198,7 @@ export function formatPast2(ms: number): string {
  * @param cellValue 字段值
  */
 export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
-  return cellValue ? formatDate(cellValue) : ''
+    return cellValue ? formatDate(cellValue) : ''
 }
 
 /**
@@ -209,7 +209,7 @@ export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue
  * @param cellValue 字段值
  */
 export function dateFormatter2(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
-  return cellValue ? formatDate(cellValue, 'YYYY-MM-DD') : ''
+    return cellValue ? formatDate(cellValue, 'YYYY-MM-DD') : ''
 }
 
 /**
@@ -218,7 +218,7 @@ export function dateFormatter2(_row: any, _column: TableColumnCtx<any>, cellValu
  * @returns 带时间00:00:00的日期
  */
 export function beginOfDay(param: Date): Date {
-  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
+    return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
 }
 
 /**
@@ -227,7 +227,7 @@ export function beginOfDay(param: Date): Date {
  * @returns 带时间23:59:59的日期
  */
 export function endOfDay(param: Date): Date {
-  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
+    return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
 }
 
 /**
@@ -236,10 +236,10 @@ export function endOfDay(param: Date): Date {
  * @param param2 日期2
  */
 export function betweenDay(param1: Date, param2: Date): number {
-  param1 = convertDate(param1)
+    param1 = convertDate(param1)
-  param2 = convertDate(param2)
+    param2 = convertDate(param2)
-  // 计算差值
+    // 计算差值
-  return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
+    return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
 }
 
 /**
@@ -248,8 +248,8 @@ export function betweenDay(param1: Date, param2: Date): number {
  * @param param2 添加的时间
  */
 export function addTime(param1: Date, param2: number): Date {
-  param1 = convertDate(param1)
+    param1 = convertDate(param1)
-  return new Date(param1.getTime() + param2)
+    return new Date(param1.getTime() + param2)
 }
 
 /**
@@ -257,10 +257,10 @@ export function addTime(param1: Date, param2: number): Date {
  * @param param 日期
  */
 export function convertDate(param: Date | string): Date {
-  if (typeof param === 'string') {
+    if (typeof param === 'string') {
-    return new Date(param)
+        return new Date(param)
-  }
+    }
-  return param
+    return param
 }
 
 /**
@@ -269,11 +269,11 @@ export function convertDate(param: Date | string): Date {
  * @param b 日期 B
  */
 export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
-  if (!a || !b) return false
+    if (!a || !b) return false
 
-  const aa = dayjs(a)
+    const aa = dayjs(a)
-  const bb = dayjs(b)
+    const bb = dayjs(b)
-  return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
+    return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
 }
 
 /**
@@ -281,39 +281,36 @@ export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
  * @param date 日期
  * @param days 天数
  */
-export function getDayRange(
+export function getDayRange(date: dayjs.ConfigType, days: number): [dayjs.ConfigType, dayjs.ConfigType] {
-  date: dayjs.ConfigType,
+    const day = dayjs(date).add(days, 'd')
-  days: number
+    return getDateRange(day, day)
-): [dayjs.ConfigType, dayjs.ConfigType] {
-  const day = dayjs(date).add(days, 'd')
-  return getDateRange(day, day)
 }
 
 /**
  * 获取最近7天的开始时间、截止时间
  */
 export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
-  const lastWeekDay = dayjs().subtract(7, 'd')
+    const lastWeekDay = dayjs().subtract(7, 'd')
-  const yesterday = dayjs().subtract(1, 'd')
+    const yesterday = dayjs().subtract(1, 'd')
-  return getDateRange(lastWeekDay, yesterday)
+    return getDateRange(lastWeekDay, yesterday)
 }
 
 /**
  * 获取最近30天的开始时间、截止时间
  */
 export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
-  const lastMonthDay = dayjs().subtract(30, 'd')
+    const lastMonthDay = dayjs().subtract(30, 'd')
-  const yesterday = dayjs().subtract(1, 'd')
+    const yesterday = dayjs().subtract(1, 'd')
-  return getDateRange(lastMonthDay, yesterday)
+    return getDateRange(lastMonthDay, yesterday)
 }
 
 /**
  * 获取最近1年的开始时间、截止时间
  */
 export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
-  const lastYearDay = dayjs().subtract(1, 'y')
+    const lastYearDay = dayjs().subtract(1, 'y')
-  const yesterday = dayjs().subtract(1, 'd')
+    const yesterday = dayjs().subtract(1, 'd')
-  return getDateRange(lastYearDay, yesterday)
+    return getDateRange(lastYearDay, yesterday)
 }
 
 /**
@@ -321,12 +318,17 @@ export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
  * @param beginDate 开始日期
  * @param endDate 截止日期
  */
-export function getDateRange(
+export function getDateRange(beginDate: dayjs.ConfigType, endDate: dayjs.ConfigType): [string, string] {
-  beginDate: dayjs.ConfigType,
+    return [
-  endDate: dayjs.ConfigType
+        dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
-): [string, string] {
+        dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
-  return [
+    ]
-    dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
+}
-    dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
+/**
-  ]
+ * 获取当月时间
+ * @param beginDate 开始日期
+ * @param endDate 截止日期
+ */
+export function getTimeOfTheMonth(): [string, string] {
+    return [formatDate(new Date(), 'YYYY-MM') + '-01', formatDate(new Date(), 'YYYY-MM-DD')]
 }

src/views/cockpit/TerminalLog.vue

@@ -0,0 +1,105 @@
+<template>
+    <div >
+        <!--终端运维日志 -->
+        <TableHeader datePicker showExport style="display: none">
+            <template v-slot:select>
+                <el-form-item label="日志类型">
+                    <el-select v-model="tableStore.table.params.type" clearable placeholder="请选择日志类型">
+                        <el-option v-for="item in fontdveoption" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="筛选数据">
+                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入筛选数据" clearable />
+                </el-form-item>
+            </template>
+            <template #operation>
+                <el-button type="primary" icon="el-icon-Sort" @click="changePush">台账变更推送</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef"></Table>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, nextTick } from 'vue'
+
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ledgerChangePush } from '@/api/device-boot/terminalTree'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String }
+})
+const dictData = useDictData()
+const fontdveoption = dictData.getBasicData('Dev_Ops')
+
+const tableStore = new TableStore({
+    url: '/device-boot/pqsTerminalLogs/getList',
+    method: 'POST',
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '60',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        // { title: '名称', field: 'name', width: '200' },
+        {
+            title: '日志类型',
+            field: 'logsType',
+            width: '100',
+            formatter: (row: any) => {
+                return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
+            }
+        },
+
+        {
+            title: '更改人员',
+            field: 'createBy',
+            width: '100'
+        },
+        {
+            title: '更改时间',
+            field: 'updateTime',
+            width: '140'
+        },
+
+        { title: '描述', field: 'terminalDescribe' }
+    ],
+    beforeSearchFun: () => {
+        
+    },
+    loadCallback: () => { 
+        tableStore.table.height = `calc(${prop.height} - 80px)`
+    }
+})
+// 变更推送
+const changePush = () => {
+    ElMessageBox.confirm('当前操作会把存在变动的装置测点推送至前置，是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        ledgerChangePush().then(res => {
+            // ElMessage.success(res.message)
+            tableStore.index()
+        })
+    })
+}
+const tableRef = ref()
+provide('tableRef', tableRef)
+tableStore.table.params.type = ''
+tableStore.table.params.searchValue = ''
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+
+const addMenu = () => {}
+</script>
+<style lang="scss" scoped></style>

src/views/cockpit/qualifiedRate.vue

@@ -0,0 +1,263 @@
+<template>
+    <!-- 稳态合格率统计图 -->
+    <my-echart :style="{ width: prop.width, height: prop.height }" :options="options" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import * as echarts from 'echarts/core'
+import { getTimeOfTheMonth } from '@/utils/formatTime'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String }
+})
+const dictData = useDictData()
+const options = ref({})
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+
+const itemStyle = {
+    normal: {
+        // 随机显示
+        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
+
+        // 定制显示（按顺序）
+        color: function (params) {
+            if (params.value >= 90) {
+                return new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                        {
+                            offset: 1,
+                            color: '#339966'
+                        }
+                    ],
+                    false
+                )
+            } else if (params.value >= 60 && params.value <= 90) {
+                return new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                        {
+                            offset: 1,
+                            color: '#FFCC33'
+                        }
+                    ],
+                    false
+                )
+            } else if (params.value <= 60 && params.value !== 3.14159) {
+                return new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                        {
+                            offset: 1,
+                            color: '#CC0000'
+                        }
+                    ],
+                    false
+                )
+            } else if (params.value == 3.14159) {
+                return new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                        {
+                            offset: 1,
+                            color: '#cccccc'
+                        }
+                    ],
+                    false
+                )
+            }
+        }
+    }
+}
+
+const tableStore = new TableStore({
+    url: '/harmonic-boot/steadyQualify/getSteadyQualifyCensus',
+    showPage: false,
+    method: 'POST',
+    column: [],
+
+    loadCallback: () => {
+        let code = tableStore.table.params.statisticalType.code
+        let title = '',
+            titleX = ''
+        if (code == 'Power_Network') {
+            title = '区域'
+            titleX = '区域'
+        } else if (code == 'Manufacturer') {
+            title = '终端厂家'
+            titleX = '终端\n厂家'
+        } else if (code == 'Voltage_Level') {
+            title = '电压等级'
+            titleX = '电压\n等级'
+        } else if (code == 'Load_Type') {
+            title = '干扰源类型'
+            titleX = '干扰\n源类型'
+        } else if (code == 'Report_Type') {
+            title = '上报类型'
+            titleX = '上报\n类型'
+        }
+        options.value = {
+            title: {
+                text: title
+            },
+            legend: {
+                show: false
+            },
+
+            tooltip: {
+                formatter: function (params: any) {
+                    let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
+                    params.forEach((item: any) => {
+                        const value = item.value === 3.14159 ? '暂无数据' : item.value // 处理特殊值
+                        tips += `<div style=" display: flex;justify-content: space-between;">
+                           <span>${item.marker}
+                            ${item.seriesName}:
+                           </span>　${value} 
+                            </div>` // 统一格式
+                    })
+                    return tips
+                }
+            },
+
+            xAxis: {
+                name: titleX,
+                data: tableStore.table.data.type
+            },
+            yAxis: {
+                name: '%',
+                max: 100
+            },
+            series: [
+                {
+                    name: '频率偏差',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.freqOffset,
+                    markLine: {
+                        silent: false,
+                        symbol: 'circle',
+                        data: [
+                            {
+                                name: '',
+                                yAxis: 100,
+                                lineStyle: {
+                                    color: '#339966'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#339966'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 90,
+                                lineStyle: {
+                                    color: '#FFCC33'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#FFCC33'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 60,
+                                lineStyle: {
+                                    color: '#CC0000'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#CC0000'
+                                    }
+                                }
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: '闪变',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.flicker
+                },
+                {
+                    name: '三相电压不平衡',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.voltageUnbalance
+                },
+                {
+                    name: '谐波电压',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.harmonicVoltage
+                },
+                {
+                    name: '电压偏差',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.voltageOffset
+                },
+                {
+                    name: '谐波电流',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.harmonicCurrent
+                },
+                {
+                    name: '负序电流',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.negativeCurrent
+                },
+                {
+                    name: '间谐波电压含有率',
+                    type: 'bar',
+                    itemStyle: itemStyle,
+                    data: tableStore.table.data.interHarmonic
+                }
+            ]
+        }
+    }
+})
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.searchBeginTime = getTimeOfTheMonth()[0]
+tableStore.table.params.searchEndTime = getTimeOfTheMonth()[1]
+tableStore.table.params.statisticalType = classificationData[0]
+tableStore.table.params.scale = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.loadType = []
+tableStore.table.params.serverName = 'harmonicBoot'
+tableStore.table.params.powerFlag = 0
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+</script>
+<style scoped lang="scss"></style>

src/views/cockpit/testEchart.vue

@@ -0,0 +1,98 @@
+<template>
+    <my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: prop.height }" />
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, provide } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableStore from '@/utils/tableStore'
+const echartList = ref({})
+import { useDictData } from '@/stores/dictData'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String }
+})
+const dictData = useDictData()
+const distributionData: any = ref([])
+const tableStore = new TableStore({
+    url: '/event-boot/area/getAreaLineDetail',
+    method: 'POST',
+    column: [],
+    loadCallback: () => {
+        tabulation(tableStore.table.data)
+        histogram(tableStore.table.data)
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'event-boot'
+// 表格数据处理
+const tabulation = (res: any) => {
+    distributionData.value = []
+    for (var i = 0; i < res.areaValue.length; i++) {
+        distributionData.value.push({
+            qy: res.areaValue[i][0],
+            jcd: res.areaValue[i][1],
+            zc: res.areaValue[i][2],
+            zd: res.areaValue[i][3]
+        })
+    }
+}
+// 柱状图数据处理
+const histogram = (res: any) => {
+    echartList.value = {
+        title: {
+            text: '区域'
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                // console.log(params);
+                var tips = ''
+                for (var i = 0; i < params.length; i++) {
+                    tips += params[i].name + '</br/>'
+                    tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
+                }
+                return tips
+            }
+        },
+
+        xAxis: {
+            name: '(区域)',
+            data: distributionData.value.map((item: any) => item.qy)
+        },
+        yAxis: {
+            name: '监测点数（个）' // 给X轴加单位
+        },
+        options: {
+            series: [
+                {
+                    //   name: '暂降次数',
+                    type: 'bar',
+                    data: distributionData.value.map((item: any) => item.jcd),
+                    barMaxWidth: 30,
+                    itemStyle: {
+                        normal: {
+                            color: '#07CCCA'
+                        }
+                    },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        textStyle: {
+                            //数值样式
+                            color: '#000'
+                        },
+                        fontSize: 12
+                    }
+                }
+            ]
+        }
+    }
+}
+onMounted(() => {
+    tableStore.index()
+})
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,242 @@
+<template>
+    <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">
+                        <HelpFilled class="HelpFilled" />
+                        {{ item.name }}
+                    </div>
+                    <!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
+                    <img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" />
+                </div>
+                <div>
+                    <component
+                        :is="item.component"
+                        v-if="item.component"
+                        class="pd10"
+                        :key="key"
+                        :height="rowHeight * item.h - (item.h == 6 ? -20 : item.h == 2 ? 20 : 5) + 'px'"
+                        :width="rowWidth * item.w - 5 + 'px'"
+                    />
+                    <div v-else class="pd10">组件加载失败...</div>
+                </div>
+            </div>
+        </template>
+    </GridLayout>
+</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() / 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;
+        margin-right: 5px;
+    }
+}
+</style>

src/views/pqs/cockpit/setUp/components/popup.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

@@ -0,0 +1,287 @@
+<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-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>
+
+        <popup ref="popupRef" @submit="tableStore.index()" v-if="popupFlag" />
+    </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 popup from './components/popup.vue'
+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: () => {
+        popupFlag.value = false
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.searchValue = ''
+onMounted(() => {
+    tableStore.table.ref = tableRef.value
+    tableStore.index()
+    tableStore.table.loading = false
+})
+// 查询
+const onSubmitadd = () => {
+    popupFlag.value = true
+    setTimeout(() => {
+        popupRef.value.open({
+            title: '新增页面'
+        })
+    }, 100)
+}
+
+// 修改
+const editd = (e: any) => {
+    popupFlag.value = true
+    setTimeout(() => {
+        popupRef.value.open({
+            data: e,
+            title: '修改页面'
+        })
+    }, 100)
+}
+// 删除
+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>

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

@@ -0,0 +1,113 @@
+<template>
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
+        <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
+            <el-form-item class="top" label="组件名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
+            </el-form-item>
+            <el-form-item class="top" label="父组件节点" prop="system">
+                <el-cascader
+                    v-model="form.system"
+                    :options="customDeptOption"
+                    :props="props"
+                    placeholder="请选择父组件节点"
+                    style="width: 100%"
+                />
+            </el-form-item>
+            <el-form-item class="top" label="组件标识" prop="code">
+                <el-input v-model="form.code" placeholder="请输入组件菜单选取"></el-input>
+            </el-form-item>
+            <el-form-item class="top" label="组件路径" prop="path">
+                <el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
+            </el-form-item>
+            <el-form-item class="top" label="组件排序" prop="sort">
+                <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="cancel">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject, onMounted } 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'
+const dictData = useDictData()
+const dialogVisible = ref(false)
+const title = ref('')
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+// 注意不要和表单ref的命名冲突
+const form = ref<anyObj>({
+    name: '',
+    sort: 100,
+    system: [],
+    code: '',
+    path: ''
+})
+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' }],
+    path: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+}
+const customDeptOption: any = ref([])
+onMounted(() => {
+    customDeptOption.value = dictData.getBasicData('System_Type')
+    customDeptOption.value.forEach((item: any) => {
+        getFatherComponent({ systemType: item.id }).then(res => {
+            item.children = res.data
+        })
+    })
+})
+
+const open = (text: string, data?: anyObj) => {
+    console.log(data)
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        let Data = JSON.parse(JSON.stringify(data))
+        form.value = Data
+        form.value.system = [Data.systemType, Data.pid]
+    }
+}
+const submit = () => {
+    console.log('🚀 ~ form:', form.value)
+    console.log('🚀 ~ formRef.value.validate ~ title.value:', title.value)
+
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (title.value == '新增组件') {
+                await componentAdd({ ...form.value, systemType: form.value.system[0], pid: form.value.system[1] }).then(
+                    res => {
+                        ElMessage.success('新增成功!')
+                        cancel()
+                    }
+                )
+            } else {
+                await componentEdit({
+                    ...form.value,
+                    systemType: form.value.system[0],
+                    pid: form.value.system[1]
+                }).then(res => {
+                    ElMessage.success('修改成功!')
+                    cancel()
+                })
+            }
+        }
+    })
+}
+const cancel = () => {
+    tableStore.index()
+    dialogVisible.value = false
+}
+defineExpose({ open })
+</script>

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

@@ -0,0 +1,129 @@
+<template>
+    <div class="default-main">
+        <TableHeader :showSearch="false">
+            <template v-slot:operation>
+                <el-button type="primary" @click="add" icon="el-icon-Plus">新增</el-button>
+            </template>
+        </TableHeader>
+        <Table
+            ref="tableRef"
+            :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
+            :scroll-y="{ enabled: true }"
+        />
+        <Add ref="addRef" v-if="addFlag" @onSubmit="tableStore.index()" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { ElMessage } from 'element-plus'
+import TableHeader from '@/components/table/header/index.vue'
+import Add from './add.vue'
+import { deleteSubassembly } from '@/api/user-boot/dept'
+const dictData = useDictData()
+defineOptions({
+    name: 'component'
+})
+const addRef = ref()
+const addFlag = ref(false)
+const tableRef = ref()
+const treeData: any = ref([])
+const tableStore = new TableStore({
+    url: '/user-boot/component/componentTree',
+    method: 'GET',
+    showPage: false,
+    column: [
+        { field: 'name', title: '功能组件名称', align: 'left', treeNode: true },
+        { field: 'code', title: '组件标识' },
+        { field: 'path', title: '组件路径' },
+        {
+            title: '操作',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '修改',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.path == '' || row.path == null
+                    },
+                    click: row => {
+                        addFlag.value = true
+                        setTimeout(() => {
+                            addRef.value.open('修改组件', row)
+                        }, 100)
+                    }
+                },
+                {
+                    name: 'del',
+                    text: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    disabled: row => {
+                        return row.path == '' || row.path == null
+                    },
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除？'
+                    },
+                    click: row => {
+                        deleteSubassembly({ id: row.id }).then(res => {
+                            ElMessage.success('删除成功!')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        addFlag.value = false
+        setTimeout(() => {
+            tableRef.value.getRef().setAllTreeExpand(true)
+        }, 1000)
+        tableStore.table.data.forEach(item => {
+            item.state = 0
+        })
+        treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
+        tableStore.table.data = treeData.value
+    }
+})
+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 add = () => {
+    addFlag.value = true
+    setTimeout(() => {
+        addRef.value.open('新增组件')
+    }, 100)
+}
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableStore.index()
+})
+</script>