|
|
@@ -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>
|
Xiao_123