数据工厂：生产线管理嵌套n8n页面测试

src/router/routes.js

@@ -696,95 +696,6 @@ export default {
       path: '/dataFactory',
       urls: '',
       children: [
-        {
-          meun: '',
-          code: '',
-          hidden: 1,
-          rootId: 972,
-          icon: '',
-          remark: '',
-          type: 1,
-          title: '生产线监控',
-          local: '',
-          path: '/dataFactory/production-line-monitor1',
-          urls: '',
-          children: [],
-          enName: 'production line monitor',
-          id: 99999999,
-          redirect: '',
-          level: 2,
-          openPath: '',
-          active: '',
-          label: '生产线监控',
-          sort: 4,
-          parentId: 972,
-          effectiveStatus: true,
-          parentName: 'dataFactory',
-          component: 'dataFactory/productionLineMonitor',
-          meta: {
-            noLogin: true,
-            keepAlive: false,
-            allowClick: false,
-            roles: [],
-            enName: 'production line monitor',
-            icon: '',
-            editModules: false,
-            title: '生产线监控',
-            fullScreen: true,
-            target: false,
-            dataPermission: false,
-            effectiveStatus: true
-          },
-          name: 'productionLineMonitor',
-          style: '',
-          alwaysShow: 0,
-          metastr: '{"keepAlive":false,"noLogin":true,"allowClick":false,"enName":"production line monitor","editModules":false,"title":"生产线监控","fullScreen":true,"target":false,"dataPermission":false}',
-          open: null
-        },
-        {
-          meun: '',
-          code: '',
-          hidden: 0,
-          rootId: 972,
-          icon: '',
-          remark: '',
-          type: 1,
-          title: '生产线监控',
-          local: '',
-          path: '/dataFactory/production-line-monitor',
-          urls: '',
-          children: [],
-          enName: 'production line monitor',
-          id: 961,
-          redirect: '',
-          level: 2,
-          openPath: '',
-          active: '',
-          label: '生产线监控',
-          sort: 4,
-          parentId: 972,
-          effectiveStatus: true,
-          parentName: 'dataFactory',
-          component: 'dataFactory/productionLineMonitor',
-          meta: {
-            keepAlive: false,
-            allowClick: false,
-            roles: [],
-            enName: 'production line monitor',
-            icon: '',
-            editModules: false,
-            title: '生产线监控',
-            fullScreen: false,
-            target: false,
-            dataPermission: false,
-            effectiveStatus: true
-          },
-          name: 'productionLineMonitor',
-          style: '',
-          alwaysShow: 0,
-          metastr: '{"keepAlive":false,"allowClick":false,"enName":"production line monitor","editModules":false,"title":"生产线监控","fullScreen":false,"target":false,"dataPermission":false}',
-          open: null
-        },
         {
           meun: '',
           code: '',
@@ -827,93 +738,50 @@ export default {
           alwaysShow: 0,
           metastr: '{"keepAlive":false,"allowClick":false,"enName":"Assembly Line","editModules":false,"title":"生产线管理","fullScreen":false,"target":false}',
           open: null
-        },
-        {
-          meun: '',
-          code: '',
-          hidden: 0,
-          rootId: 972,
-          icon: '',
-          remark: '',
-          type: 1,
-          title: '生产线调度',
-          local: '',
-          path: '/dataFactory/production-line-dispatch',
-          urls: '',
-          children: [],
-          enName: 'Assembly Line',
-          id: 1230,
-          redirect: '',
-          level: 2,
-          openPath: '',
-          active: '',
-          label: '生产线调度',
-          sort: 8,
-          parentId: 972,
-          effectiveStatus: true,
-          parentName: '',
-          component: 'dataFactory/dispatch',
-          meta: {
-            keepAlive: false,
-            allowClick: false,
-            roles: [],
-            enName: 'Assembly Line',
-            icon: '',
-            editModules: false,
-            title: '生产线调度',
-            fullScreen: false,
-            target: false,
-            effectiveStatus: true
-          },
-          name: 'productionLineDispatch',
-          style: '',
-          alwaysShow: 0,
-          metastr: '{"keepAlive":false,"allowClick":false,"enName":"Assembly Line","editModules":false,"title":"生产线调度","fullScreen":false,"target":false}',
-          open: null
-        },
-        {
-          meun: '',
-          code: '',
-          hidden: 0,
-          rootId: 972,
-          icon: '',
-          remark: '',
-          type: 1,
-          title: '生产线日志',
-          local: '',
-          path: '/dataFactory/log-manage',
-          urls: '',
-          children: [],
-          enName: 'log manage',
-          id: 974,
-          redirect: '',
-          level: 2,
-          openPath: '',
-          active: '',
-          label: '生产线日志',
-          sort: 10,
-          parentId: 972,
-          effectiveStatus: true,
-          parentName: 'dataFactory',
-          component: 'dataFactory/logManage',
-          meta: {
-            keepAlive: false,
-            allowClick: false,
-            roles: [],
-            enName: 'log manage',
-            icon: '',
-            editModules: false,
-            title: '生产线日志',
-            fullScreen: false,
-            target: false,
-            effectiveStatus: true
-          },
-          name: 'productionLineLogManage',
-          style: '',
-          alwaysShow: 0,
-          metastr: '{"keepAlive":false,"allowClick":false,"enName":"log manage","editModules":false,"title":"生产线日志","fullScreen":false,"target":false}',
-          open: null
         }
+        // {
+        //   meun: '',
+        //   code: '',
+        //   hidden: 0,
+        //   rootId: 972,
+        //   icon: '',
+        //   remark: '',
+        //   type: 1,
+        //   title: '原料管理',
+        //   local: '',
+        //   path: '/dataFactory/log-manage',
+        //   urls: '',
+        //   children: [],
+        //   enName: 'log manage',
+        //   id: 974,
+        //   redirect: '',
+        //   level: 2,
+        //   openPath: '',
+        //   active: '',
+        //   label: '原料管理',
+        //   sort: 10,
+        //   parentId: 972,
+        //   effectiveStatus: true,
+        //   parentName: 'dataFactory',
+        //   component: 'dataFactory/logManage',
+        //   meta: {
+        //     keepAlive: false,
+        //     allowClick: false,
+        //     roles: [],
+        //     enName: 'log manage',
+        //     icon: '',
+        //     editModules: false,
+        //     title: '原料管理',
+        //     fullScreen: false,
+        //     target: false,
+        //     effectiveStatus: true
+        //   },
+        //   name: 'productionLineLogManage',
+        //   style: '',
+        //   alwaysShow: 0,
+        //   metastr: '{"keepAlive":false,"allowClick":false,"enName":"log manage","editModules":false,"title":"生产线日志","fullScreen":false,"target":false}',
+        //   open: null
+        // }
       ],
       enName: 'production line manage',
       id: 972,

src/views/dataFactory/productionLine/index.vue

@@ -1,138 +1,105 @@
 <template>
-  <div class="white pa-3">
-    <m-filter :option="filter" @search="handleSearch" />
-    <m-table
-      class="mt-3"
-      :loading="loading"
-      :headers="headers"
-      :items="items"
-      :show-select="false"
-      :is-tools="false"
-      :disable-sort="true"
-      :total="total"
-      :page-info="pageInfo"
-      @pageHandleChange="pageHandleChange"
-    >
-      <template #name="{ item }">
-        <tool-tip :text="item.name" :width="200"></tool-tip>
-      </template>
-      <template #remark="{ item }">
-        <tool-tip :text="item.remark" :width="200"></tool-tip>
-      </template>
-      <template #actions="{ item }">
-        <v-btn text color="primary" @click="handleDetails(item)">
-          详情
-        </v-btn>
-        <v-btn text color="error" @click="handleClose(item.id)">
-          关闭
-        </v-btn>
-      </template>
-    </m-table>
-    <m-dialog
-      :visible.sync="show"
-      flex-box
-      title="生产线详情"
-      :footer="false"
-      :width-type="1"
-      body-style="padding: 0; overflow: hidden;"
-    >
-      <m-details v-if="show" :item-data="itemData" class="pa-5" style="height: 600px"></m-details>
-    </m-dialog>
+  <div class="data-manage-container">
+    <v-card class="iframe-card" elevation="2">
+      <iframe
+        ref="iframe"
+        class="n8n-chat-iframe"
+        :src="webhookUrl"
+        frameborder="0"
+        allowfullscreen
+        referrerpolicy="no-referrer-when-downgrade"
+        @load="handleIframeLoad"
+      ></iframe>
+      <div v-if="loading" class="loading-overlay">
+        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        <div class="mt-4 text--secondary">正在加载...</div>
+      </div>
+    </v-card>
   </div>
 </template>
 
 <script>
-import ToolTip from '@/components/Tooltip'
-import MFilter from '@/components/Filter'
-import MTable from '@/components/List/table'
-import MDialog from '@/components/Dialog'
-import MDetails from '../components/graph.vue'
-import { getDataFactoryList, getDataFactoryDetails } from '@/api/productionLine'
 export default {
-  name: 'production-line',
-  components: {
-    MTable,
-    MFilter,
-    ToolTip,
-    MDialog,
-    MDetails
-  },
+  name: 'dataManage',
   data () {
     return {
-      filter: {
-        list: [
-          { type: 'textField', value: null, label: '名称', key: 'name' }
-        ]
-      },
-      show: false,
-      loading: false,
-      headers: [
-        { text: '名称', value: 'name' },
-        // { text: '状态', value: 'status' },
-        { text: '更新时间', value: 'updateTime' },
-        { text: '创建时间', value: 'createTime' },
-        { text: '备注', value: 'remark' },
-        { text: '操作', value: 'actions' }
-      ],
-      items: [
-        {
-          id: 1,
-          name: '生产线1'
-        }
-      ],
-      pageInfo: {
-        size: 10,
-        current: 1
-      },
-      total: 0,
-      query: {
-        name: null
-      },
-      itemData: null
+      webhookUrl: 'https://n8n.citupro.com/',
+      loading: true
     }
   },
-  created () {
-    this.init()
-  },
   methods: {
-    async init () {
-      try {
-        const { data } = await getDataFactoryList({ ...this.pageInfo, ...this.query })
-        this.items = data.records
-        this.total = data.total
-      } catch (error) {
-        this.$snackbar.error(error)
-      }
-    },
-    handleSearch (val) {
-      Object.assign(this.query, val)
-      this.pageInfo.current = 1
-      this.init()
-    },
-    handleClose () {
-    },
-    async handleDetails (item) {
-      try {
-        const { data } = await getDataFactoryDetails({ id: item.id })
-        this.itemData = data
-        if (!Object.keys(this.itemData).length) {
-          this.$snackbar.error('生产线找不到节点')
-          return
-        }
-        this.show = true
-        // console.log(data)
-      } catch (error) {
-        this.$snackbar.error(error)
-      }
-    },
-    pageHandleChange (index) {
-      this.pageInfo.current = index
-      this.init()
+    handleIframeLoad () {
+      // iframe 加载完成
+      this.loading = false
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.data-manage-container {
+  height: 100%;
+  width: 100%;
+  padding: 6px;
+  background: #f0f2f5;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.iframe-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #ffffff;
+  border-radius: 4px;
+  position: relative;
+}
+
+.n8n-chat-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 10;
+}
 
+// 如果 iframe 内容可以访问，可以通过以下方式注入样式
+// 注意：这需要同源或 n8n Chat 支持样式注入
+::v-deep iframe {
+  // 调整 iframe 的显示效果
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
 </style>