修改看版配置

src/main.ts

@@ -23,7 +23,7 @@ import {
   clearNull,
   parseTime,
   getFinalData,
-  testColor
+  testColor, isJSON
 } from '@/utils/scrin';
 import request from '@/utils/request';
 
@@ -81,6 +81,7 @@ app.provide('$request', request);
 app.provide('$detectingNullValues', detectingNullValues);
 app.provide('$getFinalData', getFinalData);
 app.provide('$testColor', testColor);
+app.provide('$isJSON', isJSON);
 
 app.use(vue3SeamlessScroll);
 app.use(HighLight);

src/router/index.ts

@@ -297,12 +297,12 @@ export const dynamicRoutes: RouteRecordRaw[] = [
     hidden: true,
     permissions: ['mes:orderInfo:edit'],
     children: [
-      {
+      // {
-        path: 'index/:productOrderId(\\d+)',
+      //   path: 'index/:productOrderId(\\d+)',
-        component: () => import('@/views/mes/orderInfo/editProductOrder.vue'),
+      //   component: () => import('@/views/mes/orderInfo/editProductOrder.vue'),
-        name: 'productOrderEdit',
+      //   name: 'productOrderEdit',
-        meta: { title: '生产任务', activeMenu: '/mes/productplan', noCache: true }
+      //   meta: { title: '生产任务', activeMenu: '/mes/productplan', noCache: true }
-      }
+      // }
     ]
   },
   {

src/utils/scrin.js

@@ -241,6 +241,19 @@ const testColor = (color) => {
 
   return regexHex.test(color) || regexRgb.test(color) || regexRgba.test(color);
 };
-export {
+
-  limitSolve, parseData, clearObjNull, clearArrNull, clearNull, detectingNullValues, getFinalData, parseTime, testColor
+// 判断是否是json
+const isJSON = (str) => {
+  if (typeof str === 'string') {
+    try {
+      JSON.parse(str);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+export {
+  limitSolve, parseData, clearObjNull, clearArrNull, clearNull, detectingNullValues, getFinalData, parseTime, testColor,isJSON
 };

src/views/boardGenerate/api/boardSource.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request';
+
+// 获取数据源列表
+export const getDataSourceList = (data) => {
+  return request({
+    url: '/system/designDataSource/list', method: 'get', params: data
+  });
+};
+
+// 删除数据源
+export const delDataSourceApi = (id) => {
+  return request({
+    url: '/system/designDataSource/' + id, method: 'DELETE'
+  });
+};
+
+// 新增数据源
+export const addDataSourceApi = (data) => {
+  return request({
+    url: '/system/designDataSource', method: 'POST', data
+  });
+};
+
+// 编辑数据源
+export const editDataSourceApi = (data) => {
+  return request({
+    url: '/system/designDataSource', method: 'PUT', data
+  });
+};

src/views/boardGenerate/api/dataSource.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request';
+
+// 获取数据源列表
+export const getDataSourceList = (data) => {
+  return request({
+    url: '/system/designDataSource/list', method: 'get', params: data
+  });
+};
+
+// 删除数据源
+export const delDataSourceApi = (id) => {
+  return request({
+    url: '/system/designDataSource/' + id, method: 'DELETE'
+  });
+};
+
+// 新增数据源
+export const addDataSourceApi = (data) => {
+  return request({
+    url: '/system/designDataSource', method: 'POST', data
+  });
+};
+
+// 编辑数据源
+export const editDataSourceApi = (data) => {
+  return request({
+    url: '/system/designDataSource', method: 'PUT', data
+  });
+};

src/views/boardGenerate/boardList.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <el-card style="margin: 8px">
+      <el-form :inline="true" :model="selectForm" class="demo-form-inline" label-width="120px">
+        <el-form-item label="数据源名称">
+          <el-input v-model="selectForm.dataSourceName" clearable />
+        </el-form-item>
+        <el-form-item label="请求地址">
+          <el-input v-model="selectForm.requestUrl" clearable />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="queryList">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-button plain type="primary" icon="Plus" @click="constructionData">新增</el-button>
+      <!--      <el-button plain type="success" icon="Edit" @click="editData">修改</el-button>-->
+      <!--      <el-button plain type="danger" icon="Delete" @click="delData">删除</el-button>-->
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-table :data="tableData" style="width: 100%" v-loading="loading">
+        <el-table-column prop="dataSourceName" label="数据源名称" align="center" />
+        <el-table-column prop="requestMethod" label="请求方式" align="center" />
+        <el-table-column prop="requestUrl" label="请求地址" align="center" />
+        <el-table-column label="操作" width="300" align="center">
+          <template #default="scope">
+            <el-button text type="primary" size="small" @click="editDataSource(scope.row)">修改
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              text
+              @click="delDataSource(scope.row)"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        class="pagination"
+        v-model:current-page="selectForm.pageNum"
+        v-model:page-size="selectForm.pageSize"
+        :page-sizes="[10,20,50,100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        v-if="total>0"
+        :total="total"
+        @size-change="pageChange"
+        @current-change="pageChange"
+      />
+    </el-card>
+
+    <el-dialog v-model="constructionDataFormVisible" draggable width="800">
+      <template #header>
+        <div style="width: 100%">
+          <span>{{ constructionDataForm.dataSourceId ? '修改' : '构造' }}数据源</span>
+          <div style="text-align:right;display: inline-block;width: calc(100% - 100px)">
+            <span>简易模式</span>
+            <el-switch v-model="isEasy" />
+          </div>
+        </div>
+      </template>
+      <el-form :model="constructionDataForm">
+        <el-form-item label="数据名称" prop="dataSourceName">
+          <el-input v-model="constructionDataForm.dataSourceName" />
+        </el-form-item>
+        <el-form-item label="请求地址" prop="requestUrl">
+          <el-input v-model="constructionDataForm.requestUrl">
+            <template #prepend>
+              <el-select v-model="constructionDataForm.requestMethod" style="width: 100px">
+                <el-option label="get" value="get" />
+                <el-option label="post" value="post" />
+                <el-option label="socket" value="socket" />
+              </el-select>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="请求数据" v-if="isEasy">
+          <el-table :data="paramsTableData" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="测试数据" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.test" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="paramsTableData.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="paramsTableData.push({})">
+            添加字段
+          </el-button>
+        </el-form-item>
+        <el-form-item label="输出数据">
+          <el-table :data="constructionDataForm.designDataFieldList" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!isEasy" label="字段层级" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.tier" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="constructionDataForm.designDataFieldList.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="constructionDataForm.designDataFieldList.push({})">
+            添加字段
+          </el-button>
+          <el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0"
+                     @click="findTier">
+            查找
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="constructionDataFormVisible = false">关闭</el-button>
+          <el-button type="primary" @click="createData ">
+            {{ constructionDataForm.dataSourceId ? '确定' : '创建' }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import axios from 'axios';
+import request from '@/utils/request';
+import { options } from './tool.js';
+import { addDataSourceApi, delDataSourceApi, editDataSourceApi, getDataSourceList } from './api/dataSource';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const comparisonTable = {
+  starttime: '开始时间',
+  time: '时间',
+  value: '值'
+};
+
+const isEasy = ref(false);
+const loading = ref(false);
+const paramsTableData = ref([]);
+const selectForm = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
+const tableData = ref([{}]);
+const constructionDataForm = ref({ designDataFieldList: [] });
+const constructionDataFormVisible = ref(false);
+const getList = async () => {
+  loading.value = true;
+  getDataSourceList(selectForm.value)
+    .then((res) => {
+      console.log(res);
+      tableData.value = res.rows;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const queryList = async () => {
+  selectForm.value.pageNum = 1;
+  await getList();
+};
+const pageChange = () => {
+  getList();
+};
+const constructionData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const delData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editDataSource = (e) => {
+  constructionDataFormVisible.value = true;
+  constructionDataForm.value = e;
+};
+const delDataSource = (e) => {
+  ElMessageBox.confirm(
+    '要删除这条数据源吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  )
+    .then(() => {
+      delDataSourceApi(e.dataSourceId).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        });
+        getList();
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消'
+      });
+    });
+};
+const createData = () => {
+  if (!constructionDataForm.value.designDataFieldList) {
+    constructionDataForm.value.designDataFieldList = [];
+  }
+  if (constructionDataForm.value.dataSourceId) {
+    editDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '修改成功'
+      });
+      getList();
+    });
+  } else {
+    addDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '创建成功'
+      });
+      getList();
+    });
+  }
+  // let nowData = JSON.parse(localStorage.getItem('DATANODE') || '[]');
+  // nowData.push(constructionDataForm.value);
+  // localStorage.setItem('DATANODE', JSON.stringify(nowData));
+};
+const findTier = () => {
+  constructionDataForm.value.designDataFieldList = [];
+  let params = {};
+  (paramsTableData.value || []).forEach((item) => {
+    params[item.name] = item.test;
+  });
+
+  (options.isD ? request : axios.request)({
+    method: constructionDataForm.value.requestMethod,
+    url: constructionDataForm.value.requestUrl,
+    params: constructionDataForm.value.requestMethod === 'get' ? params : '',
+    data: constructionDataForm.value.requestMethod === 'post' ? params : ''
+  }).then(res => {
+    let data = (options.isD ? res : res.data);
+    console.log(data);
+    if (data?.data) {
+      Object.keys(data.data?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `data,map%${key}`
+        });
+      });
+    } else if (data?.rows) {
+      console.log(data?.rows);
+      Object.keys(data.rows?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `rows,map%${key}`
+        });
+      });
+    } else {
+      let exclude = ['code'];
+      Object.keys(data).forEach(key => {
+        if (!exclude.includes(key.toLowerCase())) {
+          if (typeof data[key] === 'string' || typeof data[key] === 'string') {
+            constructionDataForm.value.designDataFieldList.push({
+              name: key,
+              remark: comparisonTable[key],
+              tier: `${key}`
+            });
+          }
+        }
+      });
+    }
+  });
+
+};
+onMounted(async () => {
+  await queryList();
+});
+</script>
+<style lang="less" scoped>
+.pagination {
+  float: right;
+  margin: 12px 0;
+}
+</style>

src/views/boardGenerate/boardSourceList.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <el-card style="margin: 8px">
+      <el-form :inline="true" :model="selectForm" class="demo-form-inline" label-width="120px">
+        <el-form-item label="图表名称">
+          <el-input v-model="selectForm.dataSourceName" clearable />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="queryList">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-button plain type="primary" icon="Plus" @click="constructionData">新增</el-button>
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-table :data="tableData" style="width: 100%" v-loading="loading">
+        <el-table-column prop="dataSourceName" label="数据源名称" align="center" />
+        <el-table-column prop="requestMethod" label="请求方式" align="center" />
+        <el-table-column prop="requestUrl" label="请求地址" align="center" />
+        <el-table-column label="操作" width="300" align="center">
+          <template #default="scope">
+            <el-button text type="primary" size="small" @click="editDataSource(scope.row)">修改
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              text
+              @click="delDataSource(scope.row)"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        class="pagination"
+        v-model:current-page="selectForm.pageNum"
+        v-model:page-size="selectForm.pageSize"
+        :page-sizes="[10,20,50,100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        v-if="total>0"
+        :total="total"
+        @size-change="pageChange"
+        @current-change="pageChange"
+      />
+    </el-card>
+
+    <el-dialog v-model="constructionDataFormVisible" draggable width="800">
+      <template #header>
+        <div style="width: 100%">
+          <span>{{ constructionDataForm.dataSourceId ? '修改' : '构造' }}数据源</span>
+          <div style="text-align:right;display: inline-block;width: calc(100% - 100px)">
+            <span>简易模式</span>
+            <el-switch v-model="isEasy" />
+          </div>
+        </div>
+      </template>
+      <el-form :model="constructionDataForm">
+        <el-form-item label="数据名称" prop="dataSourceName">
+          <el-input v-model="constructionDataForm.dataSourceName" />
+        </el-form-item>
+        <el-form-item label="请求地址" prop="requestUrl">
+          <el-input v-model="constructionDataForm.requestUrl">
+            <template #prepend>
+              <el-select v-model="constructionDataForm.requestMethod" style="width: 100px">
+                <el-option label="get" value="get" />
+                <el-option label="post" value="post" />
+                <el-option label="socket" value="socket" />
+              </el-select>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="请求数据" v-if="isEasy">
+          <el-table :data="paramsTableData" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="测试数据" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.test" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="paramsTableData.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="paramsTableData.push({})">
+            添加字段
+          </el-button>
+        </el-form-item>
+        <el-form-item label="输出数据">
+          <el-table :data="constructionDataForm.designDataFieldList" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!isEasy" label="字段层级" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.tier" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="constructionDataForm.designDataFieldList.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="constructionDataForm.designDataFieldList.push({})">
+            添加字段
+          </el-button>
+          <el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0"
+                     @click="findTier">
+            查找
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="constructionDataFormVisible = false">关闭</el-button>
+          <el-button type="primary" @click="createData ">
+            {{ constructionDataForm.dataSourceId ? '确定' : '创建' }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import axios from 'axios';
+import request from '@/utils/request';
+import { options } from './tool.js';
+import { addDataSourceApi, delDataSourceApi, editDataSourceApi, getDataSourceList } from './api/boardSource';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const comparisonTable = {
+  starttime: '开始时间',
+  time: '时间',
+  value: '值'
+};
+
+const isEasy = ref(false);
+const loading = ref(false);
+const paramsTableData = ref([]);
+const selectForm = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
+const tableData = ref([{}]);
+const constructionDataForm = ref({ designDataFieldList: [] });
+const constructionDataFormVisible = ref(false);
+const getList = async () => {
+  loading.value = true;
+  getDataSourceList(selectForm.value)
+    .then((res) => {
+      console.log(res);
+      tableData.value = res.rows;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const queryList = async () => {
+  selectForm.value.pageNum = 1;
+  await getList();
+};
+const pageChange = () => {
+  getList();
+};
+const constructionData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const delData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editDataSource = (e) => {
+  constructionDataFormVisible.value = true;
+  constructionDataForm.value = e;
+};
+const delDataSource = (e) => {
+  ElMessageBox.confirm(
+    '要删除这条数据源吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  )
+    .then(() => {
+      delDataSourceApi(e.dataSourceId).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        });
+        getList();
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消'
+      });
+    });
+};
+const createData = () => {
+  if (!constructionDataForm.value.designDataFieldList) {
+    constructionDataForm.value.designDataFieldList = [];
+  }
+  if (constructionDataForm.value.dataSourceId) {
+    editDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '修改成功'
+      });
+      getList();
+    });
+  } else {
+    addDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '创建成功'
+      });
+      getList();
+    });
+  }
+  // let nowData = JSON.parse(localStorage.getItem('DATANODE') || '[]');
+  // nowData.push(constructionDataForm.value);
+  // localStorage.setItem('DATANODE', JSON.stringify(nowData));
+};
+const findTier = () => {
+  constructionDataForm.value.designDataFieldList = [];
+  let params = {};
+  (paramsTableData.value || []).forEach((item) => {
+    params[item.name] = item.test;
+  });
+
+  (options.isD ? request : axios.request)({
+    method: constructionDataForm.value.requestMethod,
+    url: constructionDataForm.value.requestUrl,
+    params: constructionDataForm.value.requestMethod === 'get' ? params : '',
+    data: constructionDataForm.value.requestMethod === 'post' ? params : ''
+  }).then(res => {
+    let data = (options.isD ? res : res.data);
+    console.log(data);
+    if (data?.data) {
+      Object.keys(data.data?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `data,map%${key}`
+        });
+      });
+    } else if (data?.rows) {
+      console.log(data?.rows);
+      Object.keys(data.rows?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `rows,map%${key}`
+        });
+      });
+    } else {
+      let exclude = ['code'];
+      Object.keys(data).forEach(key => {
+        if (!exclude.includes(key.toLowerCase())) {
+          if (typeof data[key] === 'string' || typeof data[key] === 'string') {
+            constructionDataForm.value.designDataFieldList.push({
+              name: key,
+              remark: comparisonTable[key],
+              tier: `${key}`
+            });
+          }
+        }
+      });
+    }
+  });
+
+};
+onMounted(async () => {
+  await queryList();
+});
+</script>
+<style lang="less" scoped>
+.pagination {
+  float: right;
+  margin: 12px 0;
+}
+</style>

src/views/boardGenerate/construction.vue

@@ -138,18 +138,7 @@ const comparisonTable = {
   value: '值'
 };
 
-// 判断是否是json
+const { isJSON } = options;
-function isJSON(str) {
-  if (typeof str === 'string') {
-    try {
-      JSON.parse(str);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-  return false;
-}
 
 const isEasy = ref(false);
 const constructBoardForm = ref({});

src/views/boardGenerate/dataSourceList.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <el-card style="margin: 8px">
+      <el-form :inline="true" :model="selectForm" class="demo-form-inline" label-width="120px">
+        <el-form-item label="数据源名称">
+          <el-input v-model="selectForm.dataSourceName" clearable />
+        </el-form-item>
+        <el-form-item label="请求地址">
+          <el-input v-model="selectForm.requestUrl" clearable />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="queryList">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-button plain type="primary" icon="Plus" @click="constructionData">新增</el-button>
+      <!--      <el-button plain type="success" icon="Edit" @click="editData">修改</el-button>-->
+      <!--      <el-button plain type="danger" icon="Delete" @click="delData">删除</el-button>-->
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-table :data="tableData" style="width: 100%" v-loading="loading">
+        <el-table-column prop="dataSourceName" label="数据源名称" align="center" />
+        <el-table-column prop="requestMethod" label="请求方式" align="center" />
+        <el-table-column prop="requestUrl" label="请求地址" align="center" />
+        <el-table-column label="操作" width="300" align="center">
+          <template #default="scope">
+            <el-button text type="primary" size="small" @click="editDataSource(scope.row)">修改
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              text
+              @click="delDataSource(scope.row)"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        class="pagination"
+        v-model:current-page="selectForm.pageNum"
+        v-model:page-size="selectForm.pageSize"
+        :page-sizes="[10,20,50,100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        v-if="total>0"
+        :total="total"
+        @size-change="pageChange"
+        @current-change="pageChange"
+      />
+    </el-card>
+
+    <el-dialog v-model="constructionDataFormVisible" draggable width="800">
+      <template #header>
+        <div style="width: 100%">
+          <span>{{ constructionDataForm.dataSourceId ? '修改' : '构造' }}数据源</span>
+          <div style="text-align:right;display: inline-block;width: calc(100% - 100px)">
+            <span>简易模式</span>
+            <el-switch v-model="isEasy" />
+          </div>
+        </div>
+      </template>
+      <el-form :model="constructionDataForm">
+        <el-form-item label="数据名称" prop="dataSourceName">
+          <el-input v-model="constructionDataForm.dataSourceName" />
+        </el-form-item>
+        <el-form-item label="请求地址" prop="requestUrl">
+          <el-input v-model="constructionDataForm.requestUrl">
+            <template #prepend>
+              <el-select v-model="constructionDataForm.requestMethod" style="width: 100px">
+                <el-option label="get" value="get" />
+                <el-option label="post" value="post" />
+                <el-option label="socket" value="socket" />
+              </el-select>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="请求数据" v-if="isEasy">
+          <el-table :data="paramsTableData" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="测试数据" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.test" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="paramsTableData.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="paramsTableData.push({})">
+            添加字段
+          </el-button>
+        </el-form-item>
+        <el-form-item label="输出数据">
+          <el-table :data="constructionDataForm.designDataFieldList" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!isEasy" label="字段层级" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.tier" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="constructionDataForm.designDataFieldList.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="constructionDataForm.designDataFieldList.push({})">
+            添加字段
+          </el-button>
+          <el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0"
+                     @click="findTier">
+            查找
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="constructionDataFormVisible = false">关闭</el-button>
+          <el-button type="primary" @click="createData ">
+            {{ constructionDataForm.dataSourceId ? '确定' : '创建' }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import axios from 'axios';
+import request from '@/utils/request';
+import { options } from './tool.js';
+import { addDataSourceApi, delDataSourceApi, editDataSourceApi, getDataSourceList } from './api/dataSource';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const comparisonTable = {
+  starttime: '开始时间',
+  time: '时间',
+  value: '值'
+};
+
+const isEasy = ref(false);
+const loading = ref(false);
+const paramsTableData = ref([]);
+const selectForm = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
+const tableData = ref([{}]);
+const constructionDataForm = ref({ designDataFieldList: [] });
+const constructionDataFormVisible = ref(false);
+const getList = async () => {
+  loading.value = true;
+  getDataSourceList(selectForm.value)
+    .then((res) => {
+      console.log(res);
+      tableData.value = res.rows;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const queryList = async () => {
+  selectForm.value.pageNum = 1;
+  await getList();
+};
+const pageChange = () => {
+  getList();
+};
+const constructionData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const delData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editDataSource = (e) => {
+  constructionDataFormVisible.value = true;
+  constructionDataForm.value = e;
+};
+const delDataSource = (e) => {
+  ElMessageBox.confirm(
+    '要删除这条数据源吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  )
+    .then(() => {
+      delDataSourceApi(e.dataSourceId).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        });
+        getList();
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消'
+      });
+    });
+};
+const createData = () => {
+  if (!constructionDataForm.value.designDataFieldList) {
+    constructionDataForm.value.designDataFieldList = [];
+  }
+  if (constructionDataForm.value.dataSourceId) {
+    editDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '修改成功'
+      });
+      getList();
+    });
+  } else {
+    addDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '创建成功'
+      });
+      getList();
+    });
+  }
+  // let nowData = JSON.parse(localStorage.getItem('DATANODE') || '[]');
+  // nowData.push(constructionDataForm.value);
+  // localStorage.setItem('DATANODE', JSON.stringify(nowData));
+};
+const findTier = () => {
+  constructionDataForm.value.designDataFieldList = [];
+  let params = {};
+  (paramsTableData.value || []).forEach((item) => {
+    params[item.name] = item.test;
+  });
+
+  (options.isD ? request : axios.request)({
+    method: constructionDataForm.value.requestMethod,
+    url: constructionDataForm.value.requestUrl,
+    params: constructionDataForm.value.requestMethod === 'get' ? params : '',
+    data: constructionDataForm.value.requestMethod === 'post' ? params : ''
+  }).then(res => {
+    let data = (options.isD ? res : res.data);
+    console.log(data);
+    if (data?.data) {
+      Object.keys(data.data?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `data,map%${key}`
+        });
+      });
+    } else if (data?.rows) {
+      console.log(data?.rows);
+      Object.keys(data.rows?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `rows,map%${key}`
+        });
+      });
+    } else {
+      let exclude = ['code'];
+      Object.keys(data).forEach(key => {
+        if (!exclude.includes(key.toLowerCase())) {
+          if (typeof data[key] === 'string' || typeof data[key] === 'string') {
+            constructionDataForm.value.designDataFieldList.push({
+              name: key,
+              remark: comparisonTable[key],
+              tier: `${key}`
+            });
+          }
+        }
+      });
+    }
+  });
+
+};
+onMounted(async () => {
+  await queryList();
+});
+</script>
+<style lang="less" scoped>
+.pagination {
+  float: right;
+  margin: 12px 0;
+}
+</style>

src/views/boardGenerate/fieldMap.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <el-card style="margin: 8px">
+      <el-form :inline="true" :model="selectForm" class="demo-form-inline" label-width="120px">
+        <el-form-item label="数据源名称">
+          <el-input v-model="selectForm.dataSourceName" clearable />
+        </el-form-item>
+        <el-form-item label="请求地址">
+          <el-input v-model="selectForm.requestUrl" clearable />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="queryList">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-button plain type="primary" icon="Plus" @click="constructionData">新增</el-button>
+      <!--      <el-button plain type="success" icon="Edit" @click="editData">修改</el-button>-->
+      <!--      <el-button plain type="danger" icon="Delete" @click="delData">删除</el-button>-->
+    </el-card>
+    <el-card style="margin: 8px">
+      <el-table :data="tableData" style="width: 100%" v-loading="loading">
+        <el-table-column prop="dataSourceName" label="数据源名称" align="center" />
+        <el-table-column prop="requestMethod" label="请求方式" align="center" />
+        <el-table-column prop="requestUrl" label="请求地址" align="center" />
+        <el-table-column label="操作" width="300" align="center">
+          <template #default="scope">
+            <el-button text type="primary" size="small" @click="editDataSource(scope.row)">修改
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              text
+              @click="delDataSource(scope.row)"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        class="pagination"
+        v-model:current-page="selectForm.pageNum"
+        v-model:page-size="selectForm.pageSize"
+        :page-sizes="[10,20,50,100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        v-if="total>0"
+        :total="total"
+        @size-change="pageChange"
+        @current-change="pageChange"
+      />
+    </el-card>
+
+    <el-dialog v-model="constructionDataFormVisible" draggable width="800">
+      <template #header>
+        <div style="width: 100%">
+          <span>{{ constructionDataForm.dataSourceId ? '修改' : '构造' }}数据源</span>
+          <div style="text-align:right;display: inline-block;width: calc(100% - 100px)">
+            <span>简易模式</span>
+            <el-switch v-model="isEasy" />
+          </div>
+        </div>
+      </template>
+      <el-form :model="constructionDataForm">
+        <el-form-item label="数据名称" prop="dataSourceName">
+          <el-input v-model="constructionDataForm.dataSourceName" />
+        </el-form-item>
+        <el-form-item label="请求地址" prop="requestUrl">
+          <el-input v-model="constructionDataForm.requestUrl">
+            <template #prepend>
+              <el-select v-model="constructionDataForm.requestMethod" style="width: 100px">
+                <el-option label="get" value="get" />
+                <el-option label="post" value="post" />
+                <el-option label="socket" value="socket" />
+              </el-select>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="请求数据" v-if="isEasy">
+          <el-table :data="paramsTableData" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="测试数据" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.test" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="paramsTableData.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="paramsTableData.push({})">
+            添加字段
+          </el-button>
+        </el-form-item>
+        <el-form-item label="输出数据">
+          <el-table :data="constructionDataForm.designDataFieldList" style="width: 100%">
+            <el-table-column label="字段名称" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!isEasy" label="字段层级" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.tier" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.remark" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="scope">
+                <el-button link size="small" type="primary"
+                           @click="constructionDataForm.designDataFieldList.splice(scope.$index, 1)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button style="width: 100%" @click="constructionDataForm.designDataFieldList.push({})">
+            添加字段
+          </el-button>
+          <el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0"
+                     @click="findTier">
+            查找
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="constructionDataFormVisible = false">关闭</el-button>
+          <el-button type="primary" @click="createData ">
+            {{ constructionDataForm.dataSourceId ? '确定' : '创建' }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import axios from 'axios';
+import request from '@/utils/request';
+import { options } from './tool.js';
+import { addDataSourceApi, delDataSourceApi, editDataSourceApi, getDataSourceList } from './api/dataSource';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const comparisonTable = {
+  starttime: '开始时间',
+  time: '时间',
+  value: '值'
+};
+
+const isEasy = ref(false);
+const loading = ref(false);
+const paramsTableData = ref([]);
+const selectForm = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
+const tableData = ref([{}]);
+const constructionDataForm = ref({ designDataFieldList: [] });
+const constructionDataFormVisible = ref(false);
+const getList = async () => {
+  loading.value = true;
+  getDataSourceList(selectForm.value)
+    .then((res) => {
+      console.log(res);
+      tableData.value = res.rows;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const queryList = async () => {
+  selectForm.value.pageNum = 1;
+  await getList();
+};
+const pageChange = () => {
+  getList();
+};
+const constructionData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const delData = () => {
+  paramsTableData.value = [];
+  constructionDataForm.value = { designDataFieldList: [] };
+  constructionDataFormVisible.value = true;
+};
+const editDataSource = (e) => {
+  constructionDataFormVisible.value = true;
+  constructionDataForm.value = e;
+};
+const delDataSource = (e) => {
+  ElMessageBox.confirm(
+    '要删除这条数据源吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  )
+    .then(() => {
+      delDataSourceApi(e.dataSourceId).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        });
+        getList();
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消'
+      });
+    });
+};
+const createData = () => {
+  if (!constructionDataForm.value.designDataFieldList) {
+    constructionDataForm.value.designDataFieldList = [];
+  }
+  if (constructionDataForm.value.dataSourceId) {
+    editDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '修改成功'
+      });
+      getList();
+    });
+  } else {
+    addDataSourceApi(constructionDataForm.value).then(() => {
+      constructionDataFormVisible.value = false;
+      ElMessage({
+        type: 'success',
+        message: '创建成功'
+      });
+      getList();
+    });
+  }
+  // let nowData = JSON.parse(localStorage.getItem('DATANODE') || '[]');
+  // nowData.push(constructionDataForm.value);
+  // localStorage.setItem('DATANODE', JSON.stringify(nowData));
+};
+const findTier = () => {
+  constructionDataForm.value.designDataFieldList = [];
+  let params = {};
+  (paramsTableData.value || []).forEach((item) => {
+    params[item.name] = item.test;
+  });
+
+  (options.isD ? request : axios.request)({
+    method: constructionDataForm.value.requestMethod,
+    url: constructionDataForm.value.requestUrl,
+    params: constructionDataForm.value.requestMethod === 'get' ? params : '',
+    data: constructionDataForm.value.requestMethod === 'post' ? params : ''
+  }).then(res => {
+    let data = (options.isD ? res : res.data);
+    console.log(data);
+    if (data?.data) {
+      Object.keys(data.data?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `data,map%${key}`
+        });
+      });
+    } else if (data?.rows) {
+      console.log(data?.rows);
+      Object.keys(data.rows?.[0]).forEach(key => {
+        constructionDataForm.value.designDataFieldList.push({
+          name: key,
+          remark: comparisonTable[key],
+          tier: `rows,map%${key}`
+        });
+      });
+    } else {
+      let exclude = ['code'];
+      Object.keys(data).forEach(key => {
+        if (!exclude.includes(key.toLowerCase())) {
+          if (typeof data[key] === 'string' || typeof data[key] === 'string') {
+            constructionDataForm.value.designDataFieldList.push({
+              name: key,
+              remark: comparisonTable[key],
+              tier: `${key}`
+            });
+          }
+        }
+      });
+    }
+  });
+
+};
+onMounted(async () => {
+  await queryList();
+});
+</script>
+<style lang="less" scoped>
+.pagination {
+  float: right;
+  margin: 12px 0;
+}
+</style>

src/views/boardGenerate/index.vue

@@ -81,6 +81,14 @@
           </template>
           <div class="moduleText">映射</div>
         </el-card>
+        <el-card class="moduleCard" shadow="never" :draggable="true"
+                 @dragstart="onDragStart($event, 'staticData')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                 :body-style="{padding:'4px 0'}">
+          <template #header>
+            <StarFilled />
+          </template>
+          <div class="moduleText">静态数据</div>
+        </el-card>
         <el-card class="moduleCard" shadow="never" :draggable="true"
                  @dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                  :body-style="{padding:'4px 0'}">
@@ -221,6 +229,10 @@
           <MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
                    @resize="resize"></MapNode>
         </template>
+        <template #node-staticData="staticDataNodeProps">
+          <StaticDataNode :inputData=getInputData(staticDataNodeProps.id) v-bind="staticDataNodeProps"
+                          @resize="resize"></StaticDataNode>
+        </template>
       </VueFlow>
     </div>
   </div>
@@ -248,6 +260,9 @@
       </el-collapse-item>
       <el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
         <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
+          <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInputArea')">
+            <el-input type="textarea" v-model="nodeAttrForm.defaultInputArea" style="width: 100%" />
+          </el-form-item>
           <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
             <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
           </el-form-item>
@@ -413,6 +428,7 @@ import CurveNode from './nodes/board/curveNode.vue';
 import MultiCurvesNode from './nodes/board/multiCurvesNode.vue';
 import BarNode from './nodes/board/barNode.vue';
 import MultiBarsNode from './nodes/board/multiBarsNode.vue';
+import StaticDataNode from './nodes/data/staticDataNode.vue';
 import CustomBoardNode from './nodes/board/customBoardNode.vue';
 import PieNode from './nodes/board/pieNode.vue';
 import DataNode from './nodes/data/dataNode.vue';
@@ -434,7 +450,6 @@ const {
   addEdges,
   updateNode
 } = useVueFlow();
-console.log(updateNode);
 
 const pageSettingVisible = ref(false);
 const pageSettingForm = ref({});

src/views/boardGenerate/nodes/board/lineNode.vue

@@ -213,6 +213,7 @@ onMounted(() => {
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });

src/views/boardGenerate/nodes/data/staticDataNode.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    <NodeResizer :color="dataIsJson?'#ff0000':'#fff'" v-if="!props.isView && !props.isHideHandle && props.selected"
+                 @resize="resize" />
+
+    <div class="custom-node"
+         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+      <el-input ref="textArea" type="textarea" v-model="input" placeholder="输入JSON"
+                style="width: 100%;height: 100%;" />
+    </div>
+    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
+    <Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
+  </div>
+</template>
+<script setup>
+import { defineEmits, defineProps, ref } from 'vue';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import { Handle, Position } from '@vue-flow/core';
+import { options } from '../../tool.js';
+
+const { isJSON } = options;
+const input = ref('');
+const dataIsJson = ref(true);
+const textArea = ref();
+const props = defineProps({
+  isView: {
+    type: Boolean,
+    required: false
+  },
+  inputData: {
+    type: Object,
+    required: false
+  },
+  id: {
+    type: String,
+    required: true
+  },
+  isHideHandle: {
+    type: Boolean,
+    required: false
+  },
+  selected: {
+    type: Boolean,
+    required: false
+  },
+  data: {
+    type: Object,
+    required: true
+  },
+  dimensions: {
+    type: Object,
+    required: true
+  }
+});
+
+watch(() => [JSON.parse(JSON.stringify(props.data.options?.defaultInputArea || '')), JSON.parse(JSON.stringify(props.data.options?.field || ''))], (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    input.value = props.data.options.defaultInputArea;
+    if (isJSON(input.value)) {
+      dataIsJson.value = true;
+      textArea.value && (textArea.value.textarea.style.backgroundColor = '#fff');
+      textArea.value && (textArea.value.textarea.style.color = '#606266');
+      let value = JSON.parse(input.value);
+      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        Object.keys(value).forEach(key => {
+          props.data.outputData[key] = value[key];
+        });
+      } else {
+        props.data.outputData[props.data.options?.field || 'input'] = value;
+      }
+
+    } else {
+      textArea.value && (textArea.value.textarea.style.backgroundColor = '#ff0000');
+      textArea.value && (textArea.value.textarea.style.color = '#fff');
+      dataIsJson.value = false;
+    }
+  }
+}, { deep: true, immediate: true });
+const emit = defineEmits(['resize']);
+const resize = (e) => {
+  emit('resize', e, props.id);
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+
+:deep(.el-textarea__inner) {
+  height: 100%;
+}
+</style>
+

src/views/boardGenerate/tool.js

@@ -21,12 +21,14 @@ const getOption = (e) => {
     return { title: '', yNames: [] };
   } else if (e === 'data') {
     return { timeout: 5000 };
+  } else if (e === 'staticData') {
+    return { defaultInputArea: '', field: 'input' };
   } else if (e === 'customData') {
     return { timeout: 5000 };
   } else if (e === 'map') {
     return { dataMap: [] };
   } else if (e === 'inputNode') {
-    return { field: '', defaultInput: '' };
+    return { field: 'input', defaultInput: '' };
   } else if (e === 'time') {
     return { startTimeId: 'startTime', endTimeId: 'endTime', defaultTime: [], format: '' };
   } else if (e === 'text') {
@@ -44,6 +46,8 @@ const getNodeSize = (e) => {
     return { width: 150, height: 50 };
   } else if (e === 'inputNode') {
     return { width: 100, height: 30 };
+  } else if (e === 'staticData') {
+    return { width: 100, height: 60 };
   } else if (e === 'text') {
     return { width: 100, height: 30 };
   } else if (e === 'time') {
@@ -120,5 +124,15 @@ const tool = () => {
 };
 export default tool;
 export const options = {
-  isD: false
+  isD: false, isJSON: (str) => {
+    if (typeof str === 'string') {
+      try {
+        JSON.parse(str);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+    return false;
+  }
 };

src/views/boardGenerate/view.vue

@@ -8,6 +8,9 @@
       <template v-if="i.type === 'customData'">
         <CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
       </template>
+      <template v-if="i.type === 'staticData'">
+        <StaticDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></StaticDataNode>
+      </template>
       <template v-if="i.type === 'line'">
         <LineNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></LineNode>
       </template>
@@ -68,6 +71,7 @@ import CustomDataNode from './nodes/data/customDataNode.vue';
 import TextNode from './nodes/form/textNode.vue';
 import ImgNode from './nodes/form/imgNode.vue';
 import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';
+import StaticDataNode from './nodes/data/staticDataNode.vue';
 
 const nodes = ref([]);
 const edges = ref([]);