驾驶舱页面绘制

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

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

@@ -1,5 +1,6 @@
 <template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="930px" :title="title" @close="cancel">
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="1000px" :title="title"
+        @close="cancel">
         <div style="display: flex">
             <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
                 <el-form-item class="top" label="组件名称" prop="name">
@@ -31,10 +32,10 @@
                     <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
                 </el-form-item>
             </el-form>
-            <div style="width: 550px; height: 370px; overflow: hidden">
+            <div style="width: 600px; height: 360px; overflow: hidden">
                 <div class="ml10" style="font-weight: 600">组件展示</div>
                 <component :is="registerComponent(form.path)" v-if="registerComponent(form.path)"
-                    class="pd10 GridLayout" :key="form.path" :height="'350px'" :width="'533px'"
+                    class="pd10 GridLayout" :key="form.path" :height="'350px'" :width="'580px'"
                     :timeKey="form.timeKey" />
                 <!-- <div  class="pd10">组件加载失败...</div> -->
                 <el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
@@ -57,6 +58,7 @@ import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删
 import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
 import IconSelector from '@/components/baInput/components/iconSelector.vue'
 import html2canvas from 'html2canvas'
+
 const dictData = useDictData()
 const dialogVisible = ref(false)
 const title = ref('')
@@ -104,11 +106,12 @@ const submit = () => {
     formRef.value.validate(async (valid: boolean) => {
         if (valid) {
             let url = ''
+
+            
             await html2canvas(document.querySelector('.GridLayout'), {
                 scale: 2
             }).then(canvas => {
                 url = canvas.toDataURL('image/png')
-                console.log('🚀 ~ html2canvas ~ url:', url)
             })
             if (title.value == '新增组件') {
                 await componentAdd({
@@ -150,7 +153,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

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

@@ -5,16 +5,13 @@
                 <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 }"
-        />
+        <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 { ref, onMounted, provide,nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import { useDictData } from '@/stores/dictData'
@@ -42,12 +39,13 @@ const tableStore = new TableStore({
             width: '80',
             render: 'icon'
         },
-        { field: 'code', title: '组件标识' },
+        { field: 'code', title: '组件标识', minWidth: '100', },
         { field: 'path', title: '组件路径' },
         { field: 'image', title: '组件展示', render: 'image' },
         {
             title: '操作',
             render: 'buttons',
+            width: '150',
             buttons: [
                 {
                     name: 'edit',
@@ -93,9 +91,9 @@ const tableStore = new TableStore({
     loadCallback: () => {
         addFlag.value = false
         setTimeout(() => {
-            tableRef.value.getRef().setAllTreeExpand(true)
-        }, 1000)
-        tableStore.table.data.forEach((item:any) => {
+            tableRef.value?.getRef()?.setAllTreeExpand(true)
+        }, 0)
+        tableStore.table.data.forEach((item: any) => {
             item.state = 0
         })
         treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)