驾驶舱页面绘制

绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面

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

@@ -1,9 +1,19 @@
 <template>
     <div class="default-main">
-        <div class=" layoutHeader">
+        <!-- <div class=" layoutHeader">
             <div class="title">{{title}}</div>
             <back-component />
-        </div>
+        </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"
@@ -30,8 +40,9 @@
                             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'"
+                            :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>
@@ -47,12 +58,14 @@ import { ref, reactive, onMounted, markRaw, onUnmounted, defineAsyncComponent, t
 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/homePage'
+//     name: 'cockpit/view'
 // })
 const { query } = useRoute()
 // 定义类型
@@ -68,14 +81,15 @@ interface LayoutItem {
     loading?: boolean
     error?: any
 }
+const datePickerRef = ref()
 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 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 = ref<LayoutItem[]>([
+const layout: any = ref<LayoutItem[]>([
     // {
     //     x: 4,
     //     y: 0,
@@ -121,7 +135,7 @@ const registerComponent = (path: string): Component | string | null => {
 
     try {
         // 动态导入组件
-        const modules = import.meta.glob('@/views/**/*.vue')
+        const modules = import.meta.glob('@/**/*.vue')
         if (!modules[path]) {
             console.error(`组件加载失败: ${path}`)
             return null
@@ -161,7 +175,7 @@ const zoom = (value: any) => {
 const fetchLayoutData = async () => {
     try {
         const { data } = await queryById({ id: query.id })
-        title.value = data.pageName+'_预览'
+        title.value = data.pageName + '_预览'
         const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
         // 处理布局数据
         layout.value = parsedLayout.map((item, index) => ({
@@ -175,6 +189,15 @@ const fetchLayoutData = async () => {
         // 可以添加错误提示逻辑
     }
 }
+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(() => {
@@ -232,8 +255,10 @@ onUnmounted(() => {
 :deep(.vgl-item) {
     overflow: hidden;
 }
+
 .box {
     overflow: hidden;
+
     .title {
         border-bottom: 1px solid #000;
         font-size: 14px;
@@ -246,6 +271,7 @@ onUnmounted(() => {
         align-items: center;
         justify-content: space-between;
     }
+
     .HelpFilled {
         height: 16px;
         width: 16px;
@@ -253,13 +279,15 @@ onUnmounted(() => {
         margin-right: 5px;
     }
 }
-.layoutHeader{
+
+.layoutHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
     font-size: 16px;
-    .title{
+
+    .title {
         font-weight: 600;
     }
 }