diff --git a/src/components/Configure/complex/basic/scrollTable.vue b/src/components/Configure/complex/basic/scrollTable.vue
index c823398..185b470 100644
--- a/src/components/Configure/complex/basic/scrollTable.vue
+++ b/src/components/Configure/complex/basic/scrollTable.vue
@@ -6,77 +6,75 @@
         {{ i }}
       </div>
     </div>
-    <vue-seamless-scroll
-      :visibleCount="3"
-      :list="tableData"
-      :hover="true"
-      :step="0.5"
-      class="case-item"
-      style="height: 84%;overflow: hidden;"
-    >
-      <div
-        v-for="(item, index) in tableData"
-        :key="index"
+    <!--        <vue-seamless-scroll-->
+    <!--          :visibleCount="3"-->
+    <!--          :list="tableData"-->
+    <!--          :hover="true"-->
+    <!--          :step="0.5"-->
+    <!--          class="case-item"-->
+    <!--          style="height: 84%;overflow: hidden;"-->
+    <!--        >-->
+    <div
+      v-for="(item, index) in tableData"
+      :key="index"
 
-      >
-        <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
-          <div
-            class="scrollTable" v-for="i in defaultData.td" :style="`width:calc(${100/defaultData.td.length}%)`">
-            {{ item[i] }}
-          </div>
+    >
+      <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+        <div
+          class="scrollTable" v-for="i in defaultData.td" :style="`width:calc(${100/defaultData.td.length}%)`">
+          {{ item[i] }}
         </div>
       </div>
-    </vue-seamless-scroll>
+    </div>
+    <!--        </vue-seamless-scroll>-->
   </div>
 </template>
-<script>
-import vueSeamlessScroll from 'vue3-seamless-scroll';
 
-export default {
-  props: ['defaultData', 'defaultTableData'],
-  expose: ['getRequestData'],
-  components: {
-    vueSeamlessScroll
-  },
-  data() {
-    return {
-      tableData: []
-    };
-  },
-  watch: {
-    defaultData: {
-      handler(a, b) {
-        this.getOption();
-      },
-      deep: true
-    },
-    defaultTableData: {
-      handler(a, b) {
-        this.getOption();
-      },
-      deep: true
-    }
-  },
-  async mounted() {
-    await this.getData();
-    this.getOption();
-    setInterval(async () => {
-      await this.getData();
-    }, 1000 * 10);
-  },
-  methods: {
-    async getData(e) {
-      let data = await this.$getFinalData(this.defaultData.requests);
-      console.log('data', data);
-      this.$set(this, 'networkData', data);
-    },
-    getOption() {
-      this.tableData = this.defaultTableData;
-      console.log('this.tableData', this.tableData);
-    }
-  }
+<script setup>
+// import vueSeamlessScroll from 'vue3-seamless-scroll';
+
+import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';
+
+const props = defineProps({
+  defaultData: Object,
+  defaultTableData: Object
+});
+
+const { defaultData, defaultTableData } = toRefs(props);
+
+const tableData = ref([]);
+const $getFinalData = inject('$getFinalData');
+
+watch(() => defaultData, (newVal) => {
+    getOption();
+  }, { deep: true }
+);
+watch(() => defaultTableData, (newVal) => {
+    getOption();
+  }, { deep: true }
+);
+
+onMounted(async () => {
+  await getData();
+  getOption();
+  setInterval(async () => {
+    await getData();
+  }, 1000 * 10);
+});
+
+const getData = async (e) => {
+  let data = await $getFinalData(defaultData.value.requests);
+  // networkData.value = data
 };
+const getOption = () => {
+  tableData.value = defaultTableData.value;
+};
+
+// defineExpose({
+//   getRequestData
+// });
 </script>
+
 <style>
 
 
diff --git a/src/components/Configure/complex/chart.vue b/src/components/Configure/complex/chart.vue
index c16353e..9e3985d 100644
--- a/src/components/Configure/complex/chart.vue
+++ b/src/components/Configure/complex/chart.vue
@@ -3,42 +3,37 @@
     <Chart ref="chart"></Chart>
   </div>
 </template>
-<script>
-import Chart from '@/components/chart'
 
-export default {
-  props: ['defaultData', 'colors'],
-  components: {
-    Chart
-  },
-  data() {
-    return {
-      resizeTime: true,
-      maxHeight: null,
-      requestData: null,
-    }
-  },
-  watch: {
-    defaultData: {
-      handler(a, b) {
-        this.getData()
-      },
-      deep: true
-    }
-  },
-  async mounted() {
-    console.log('123123', this.defaultData)
-    await this.getData()
-  },
-  methods: {
-    async getData() {
-      let chartData = this.$clearNull(this.defaultData) || {}
-      chartData.color = this.colors?.length > 0 ? this.colors : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-      this.$refs.chart?.setData(chartData)
-    },
-  },
-}
+<script setup>
+import Chart from '@/components/chart';
+import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';
+
+const props = defineProps({
+  defaultData: Object,
+  colors: Array
+});
+
+const { defaultData, colors } = toRefs(props);
+const resizeTime = ref(true);
+const maxHeight = ref(null);
+const requestData = ref(null);
+
+watch(() => defaultData, (newVal) => {
+    getData();
+  }, { deep: true }
+);
+onMounted(async () => {
+  await getData();
+});
+const chart = ref();
+const $clearNull = inject('$clearNull');
+const getData = async () => {
+  let chartData = $clearNull(defaultData.value) || {};
+  chartData.color = colors.value?.length > 0 ? colors.value : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+  chart.value?.setData(chartData);
+};
 </script>
+
 <style>
 
 </style>
diff --git a/src/components/Configure/modelComponents/line/line.vue b/src/components/Configure/modelComponents/line/line.vue
index 0e5ef28..72612c6 100644
--- a/src/components/Configure/modelComponents/line/line.vue
+++ b/src/components/Configure/modelComponents/line/line.vue
@@ -4,21 +4,21 @@
       <el-col :span="12" style="height: 100%;overflow: auto;padding-bottom: 12px;" class="leftCol">
         <div style="text-align: center">
           <el-switch
-              v-model="configSwitch"
-              active-text="数据配置"
-              inactive-text="图表配置">
+            v-model="configSwitch"
+            active-text="数据配置"
+            inactive-text="图表配置">
           </el-switch>
         </div>
         <div v-show="!configSwitch" style="height: 100%">
           <el-form ref="form" :model="defaultData.configForm" label-width="80px">
             <el-form-item label="字体颜色">
               <el-cascader
-                  v-model="defaultData.configForm['textColor']" placeholder="请选择字体颜色"
-                  :options="getCascaderOption('color')"
-                  @change="textColorChange">
-                <template slot-scope="{ node, data }">
+                v-model="defaultData.configForm['textColor']" placeholder="请选择字体颜色"
+                :options="getCascaderOption('color')"
+                @change="textColorChange">
+                <template #default="{ node, data }">
                   <span
-                      :style="`color:${$testColor(data.color)?data.color: '#000'}`">{{
+                    :style="`color:${$testColor(data.color)?data.color: '#000'}`">{{
                       data.label
                     }}</span>
                 </template>
@@ -44,9 +44,9 @@
               </el-form-item>
               <el-form-item label="线颜色">
                 <el-cascader
-                    v-model="item['lineColor']" placeholder="请选择线颜色"
-                    :options="getCascaderOption('color')"
-                    @change="lineColorChange(k)"></el-cascader>
+                  v-model="item['lineColor']" placeholder="请选择线颜色"
+                  :options="getCascaderOption('color')"
+                  @change="lineColorChange(k)"></el-cascader>
               </el-form-item>
               <div class="add" @click="addDatas()" v-if="k === defaultData.configForm['datas'].length -1">
                 <img :src="addIcon" alt="" style="width: 100%">
@@ -66,7 +66,7 @@
           </div>
         </div>
         <div v-show="configSwitch">
-          <NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
+          <NetworkRequest :requests="defaultData.requests" @GetFinalData="getData" />
         </div>
       </el-col>
       <el-col :span="12" style="height: 100%">
@@ -78,182 +78,173 @@
   </div>
 </template>
 
-<script>
-import ComplexChart from '@/components/Configure/complex/chart'
-import {queryGlobalCfg} from "@/api/configure/configuration/globalCfg";
-import NetworkRequest from "@/components/Configure/networkRequest/NetworkRequest";
+<script setup>
+import ComplexChart from '@/components/Configure/complex/chart';
+import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg';
+import NetworkRequest from '@/components/Configure/networkRequest/NetworkRequest';
 
-import addIcon from '@/assets/add.png'
-import subtractIcon from "@/assets/subtract.png";
+import addIcon from '@/assets/add.png';
+import subtractIcon from '@/assets/subtract.png';
 
-export default {
-  components: {
-    ComplexChart,
-    NetworkRequest
-  },
-  props: ['defaultData', 'isDialog', 'styleData'],
-  watch: {
-    networkData: {
-      handler() {
-        this.textColorChange()
-        this.defaultData.configForm['datas'].forEach((i, k) => {
-          this.dataChange(k)
-          this.lineColorChange(k)
+const props = defineProps({
+  defaultData: Object,
+  isDialog: Boolean,
+  styleData: Object
+});
+
+const { defaultData, isDialog, styleData } = toRefs(props);
+
+const globalList = ref([]);
+const configSwitch = ref(false);
+const chartData = ref({});
+const networkData = ref({});
+const $detectingNullValues = inject('$detectingNullValues');
+const $delete = inject('$delete');
+const $getFinalData = inject('$getFinalData');
+const $testColor = inject('$testColor');
+
+
+watch(() => networkData, (newVal) => {
+    textColorChange();
+    defaultData.value.configForm['datas'].forEach((i, k) => {
+      dataChange(k);
+      lineColorChange(k);
+    });
+    XdataChange();
+  }, { deep: true }
+);
+watch(() => defaultData.value.requests, async (newVal) => {
+    await getData();
+    textColorChange();
+    defaultData.value.configForm['datas'].forEach((i, k) => {
+      dataChange(k);
+      lineColorChange(k);
+    });
+    XdataChange();
+  }, { deep: true }
+);
+onMounted(async () => {
+  $detectingNullValues(defaultData.value, ['configForm', 'textColor']);
+  $detectingNullValues(defaultData.value, ['configForm', 'datas', 0]);
+  chartData.value = JSON.parse(JSON.stringify(defaultData.value.chartData));
+  // 获取全局配置
+  await queryGlobalCfg().then(e => {
+    globalList.value = e;
+  });
+  // 轮询
+  await getData();
+  getChartData();
+});
+
+const addDatas = () => {
+  let series = JSON.parse(JSON.stringify(chartData.value.series[0]));
+  chartData.value.series[defaultData.value.configForm['datas'].length] = series;
+  defaultData.value.chartData.series[defaultData.value.configForm['datas'].length] = series;
+  defaultData.value.configForm['datas'][defaultData.value.configForm['datas'].length] = {
+    data: '',
+    lineColor: '',
+    name: ''
+  };
+};
+const subtractDatas = (k) => {
+  $delete(chartData.value.series, k);
+  $delete(defaultData.value.chartData.series, k);
+  $delete(defaultData.value.configForm['datas'], k);
+};
+const getCascaderOption = (el) => {
+  if (el === 'color') {
+    let styleData1 = JSON.parse(JSON.stringify(styleData.value?.colors || []));
+    return [
+      {
+        value: 'system',
+        label: '全局变量',
+        children: globalList.value.filter(e => e.globalCfgType === el).map(v => {
+          return {
+            value: v.globalCfgId,
+            label: v.globalCfgName,
+            color: v.globalCfgDate
+          };
         })
-        this.XdataChange()
       },
-      deep: true
-    },
-    'defaultData.requests': {
-      async handler() {
-        await this.getData()
-        this.textColorChange()
-        this.defaultData.configForm['datas'].forEach((i, k) => {
-          this.dataChange(k)
-          this.lineColorChange(k)
+      {
+        value: 'styleData',
+        label: '界面风格',
+        children: styleData1?.map((v, k) => {
+          return {
+            value: k,
+            label: v,
+            color: v
+          };
+        }) || []
+      }
+    ];
+  } else {
+    return [
+      {
+        value: 'system',
+        label: '全局变量',
+        children: globalList.value.filter(e => e.globalCfgType === el).map(v => {
+          return {
+            value: v.globalCfgId,
+            label: v.globalCfgName,
+            color: v.globalCfgDate
+          };
         })
-        this.XdataChange()
-      },
-      deep: true
-    },
-  },
-  data() {
-    return {
-      addIcon,
-      subtractIcon,
-      globalList: [],
-      configSwitch: false,
-      chartData: {},
-      networkData: {},
-    }
-  },
-  created() {
-    this.$detectingNullValues(this.defaultData, ['configForm', 'textColor'])
-    this.$detectingNullValues(this.defaultData, ['configForm', 'datas', 0])
-  },
-  async mounted() {
-    this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData))
-    // 获取全局配置
-    await queryGlobalCfg().then(e => {
-      this.globalList = e
-    })
-    // 轮询
-    await this.getData()
-    this.getChartData()
-  },
-  methods: {
-    addDatas() {
-      let series = JSON.parse(JSON.stringify(this.chartData.series[0]))
-      this.$set(this.chartData.series, this.defaultData.configForm['datas'].length, series)
-      this.$set(this.defaultData.chartData.series, this.defaultData.configForm['datas'].length, series)
-      this.$set(this.defaultData.configForm['datas'], this.defaultData.configForm['datas'].length, {
-        data: '',
-        lineColor: '',
-        name: ''
-      })
-    },
-    subtractDatas(k) {
-      this.$delete(this.chartData.series, k)
-      this.$delete(this.defaultData.chartData.series, k)
-      this.$delete(this.defaultData.configForm['datas'], k)
-    },
-    // 筛选配置项
-    getCascaderOption(el) {
-      if (el === 'color') {
-        let styleData = JSON.parse(JSON.stringify(this.styleData?.colors || []))
-        return [
-          {
-            value: 'system',
-            label: '全局变量',
-            children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
-              return {
-                value: v.globalCfgId,
-                label: v.globalCfgName,
-                color: v.globalCfgDate
-              }
-            })
-          },
-          {
-            value: 'styleData',
-            label: '界面风格',
-            children: styleData?.map((v, k) => {
-              return {
-                value: k,
-                label: v,
-                color: v
-              }
-            }) || []
-          }
-        ]
-      } else {
-
-        return [
-          {
-            value: 'system',
-            label: '全局变量',
-            children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
-              return {
-                value: v.globalCfgId,
-                label: v.globalCfgName,
-                color: v.globalCfgDate
-              }
-            })
-          }
-        ]
       }
-    },
-    async getData(e) {
-      let data = await this.$getFinalData(this.defaultData.requests)
-      this.$set(this, 'networkData', data)
-    },
-    async onSubmit() {
-      if (this.isDialog) {
-        this.$emit('close')
-      }
-    },
-    getChartData() {
-      this.textColorChange()
-      this.XdataChange()
-      this.defaultData.configForm['datas'].forEach((i, k) => {
-        this.dataChange(k)
-        this.lineColorChange(k)
-        this.nameChange(k)
-      })
-    },
-    lineColorChange(k) {
-      this.$detectingNullValues(this.chartData, ['series', k, 'lineStyle', 'color'])
-      if (this.defaultData.configForm['datas'][k]['lineColor'][0] === 'system') {
-        this.$set(this.chartData.series[k].lineStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm['datas'][k].lineColor?.[1])?.globalCfgDate || '')
-      }
-      if (this.defaultData.configForm['datas'][k]['lineColor'][0] === 'styleData') {
-        this.$set(this.chartData.series[k].lineStyle, 'color', this.styleData.colors[this.defaultData.configForm['datas'][k]['lineColor'][1]])
-      }
-    },
-    textColorChange() {
-      this.$detectingNullValues(this.chartData, ['textStyle', 'color'])
-      if (this.defaultData.configForm['textColor'][0] === 'system') {
-        this.$set(this.chartData.textStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm.textColor?.[1])?.globalCfgDate || '')
-      }
-      if (this.defaultData.configForm['textColor'][0] === 'styleData') {
-        this.$set(this.chartData.textStyle, 'color', this.styleData.colors[this.defaultData.configForm['textColor'][1]])
-      }
-    },
-    dataChange(k) {
-      this.$detectingNullValues(this.chartData, ['series', k, 'data'])
-      this.$set(this.chartData.series[k], 'data', this.networkData[this.defaultData.configForm['datas'][k].data])
-    },
-    XdataChange(k) {
-      this.$detectingNullValues(this.chartData, ['xAxis', 'data'])
-      this.$set(this.chartData.xAxis, 'data', this.networkData[this.defaultData.configForm.Xdata])
-    },
-    nameChange(k) {
-      this.$detectingNullValues(this.chartData, ['series', k, 'name'])
-      this.$set(this.chartData.series[k], 'name', this.defaultData.configForm['datas'][k].name)
-      console.log(this.chartData)
-    },
-  },
-}
+    ];
+  }
+};
+const getData = async (e) => {
+  let data = await $getFinalData(defaultData.value.requests);
+  networkData.value = data;
+};
+const emit = defineEmits(['close']);
+const onSubmit = async () => {
+  if (isDialog.value) {
+    emit('close');
+  }
+};
+const getChartData = () => {
+  textColorChange();
+  XdataChange();
+  defaultData.value.configForm['datas'].forEach((i, k) => {
+    dataChange(k);
+    lineColorChange(k);
+    nameChange(k);
+  });
+};
+const lineColorChange = (k) => {
+  $detectingNullValues(chartData.value, ['series', k, 'lineStyle', 'color']);
+  if (defaultData.value.configForm['datas'][k]['lineColor'][0] === 'system') {
+    chartData.value.series[k].lineStyle['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm['datas'][k].lineColor?.[1])?.globalCfgDate || '';
+  }
+  if (defaultData.value.configForm['datas'][k]['lineColor'][0] === 'styleData') {
+    chartData.value.series[k].lineStyle['color'] = styleData.value.colors[defaultData.value.configForm['datas'][k]['lineColor'][1]];
+  }
+};
+const textColorChange = () => {
+  $detectingNullValues(chartData.value, ['textStyle', 'color']);
+  if (defaultData.value.configForm['textColor'][0] === 'system') {
+    chartData.value.textStyle['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm.textColor?.[1])?.globalCfgDate || '';
+  }
+  if (defaultData.value.configForm['textColor'][0] === 'styleData') {
+    chartData.value.textStyle['color'] = styleData.value.colors[defaultData.value.configForm['textColor'][1]];
+  }
+};
+const dataChange = (k) => {
+  $detectingNullValues(chartData.value, ['series', k, 'data']);
+  chartData.value.series[k]['data'] = networkData.value[defaultData.value.configForm['datas'][k].data];
+};
+const XdataChange = (k) => {
+  $detectingNullValues(chartData.value, ['xAxis', 'data']);
+  chartData.value.xAxis['data'] = networkData.value[defaultData.value.configForm.Xdata];
+};
+const nameChange = (k) => {
+  $detectingNullValues(chartData.value, ['series', k, 'name']);
+  chartData.value.series[k]['name'] = defaultData.value.configForm['datas'][k].name;
+};
 </script>
+
 <style scoped lang="less">
 .chart {
   width: 100%;
diff --git a/src/components/Configure/modelComponents/srcollTable/srcollTable.vue b/src/components/Configure/modelComponents/srcollTable/srcollTable.vue
index ac10f5a..9690f05 100644
--- a/src/components/Configure/modelComponents/srcollTable/srcollTable.vue
+++ b/src/components/Configure/modelComponents/srcollTable/srcollTable.vue
@@ -74,6 +74,8 @@
 import { ComplexScrollTable } from '@/components/Configure/complex';
 import NetworkRequest from '@/components/Configure/networkRequest/NetworkRequest';
 
+let time1 = null;
+
 export default {
   components: {
     ComplexScrollTable,
@@ -102,15 +104,22 @@ export default {
   async mounted() {
     await this.getData();
     this.dataChange();
-    setInterval(async () => {
+    time1 = setInterval(async () => {
       await this.getData();
     }, 1000 * 10);
   },
+  beforeDestroy() {
+    clearInterval(time1);
+  },
   methods: {
     async getData(e) {
-      let data = await this.$getFinalData(this.defaultData.requests);
+      const $getFinalData = inject('$getFinalData');
+      if (!$getFinalData) {
+        return;
+      }
+      let data = await $getFinalData(this.defaultData.requests);
       console.log('data', data);
-      this.$set(this, 'networkData', data);
+      this.networkData = data;
     },
     async onSubmit() {
       if (this.isDialog) {
diff --git a/src/components/Configure/networkRequest/EquipmentRequest.vue b/src/components/Configure/networkRequest/EquipmentRequest.vue
index 91be9f2..d656540 100644
--- a/src/components/Configure/networkRequest/EquipmentRequest.vue
+++ b/src/components/Configure/networkRequest/EquipmentRequest.vue
@@ -3,133 +3,131 @@
     <el-form-item label="设备">
       <el-select v-model="form.deviceId" placeholder="请选择" @change="setDeviceId">
         <el-option
-            v-for="item in deviceList"
-            :key="item.deviceId"
-            :label="item.deviceName"
-            :value="item.deviceId">
+          v-for="item in deviceList"
+          :key="item.deviceId"
+          :label="item.deviceName"
+          :value="item.deviceId">
         </el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="deviceModeId" v-show="false">
       <el-input
-          v-model="form.deviceModeId">
+        v-model="form.deviceModeId">
       </el-input>
     </el-form-item>
     <el-form-item label="设备属性">
       <el-select v-model="form.functionIdentifier" placeholder="请选择">
         <el-option
-            v-for="item in deviceFunList"
-            :key="item.functionIdentifier"
-            :label="item.functionName"
-            :value="item.functionIdentifier">
+          v-for="item in deviceFunList"
+          :key="item.functionIdentifier"
+          :label="item.functionName"
+          :value="item.functionIdentifier">
         </el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="数据间隔">
       <el-select v-model="form.interval" placeholder="请选择" @change="changeInterval">
         <el-option
-            v-for="item in intervalOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
+          v-for="item in intervalOption"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
         </el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="时间周期">
       <el-date-picker
-          @change="timeChange"
-          v-model="time"
-          type="datetimerange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
+        @change="timeChange"
+        v-model="time"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期">
       </el-date-picker>
     </el-form-item>
   </div>
 </template>
-<script>
 
+<script setup>
+import { getDeviceFunctions, getDeviceList } from '@/api/configure/configuration/equipment';
+import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';
 
-import {getDeviceFunctions, getDeviceList} from "@/api/configure/configuration/equipment";
+const props = defineProps({
+  form: Object
+});
 
-export default {
-  props: ['form'],
-  data() {
-    return {
-      time: [],
-      deviceList: [],
-      deviceFunList: [],
-      intervalOption: [
-        {
-          label: '时',
-          value: '1',
-          default: 1
-        },
-        {
-          label: '日',
-          value: '2',
-          default: 24
-        },
-        {
-          label: '周',
-          value: '3',
-          default: 7
-        },
-        {
-          label: '月',
-          value: '4',
-          default: 30
-        },
-        {
-          label: '年',
-          value: '5',
-          default: 12
-        },
-      ],
-    }
+const { form } = toRefs(props);
+const time = ref([]);
+const deviceList = ref([]);
+const deviceFunList = ref([]);
+const intervalOption = ref([
+  {
+    label: '时',
+    value: '1',
+    default: 1
   },
-  mounted() {
-    getDeviceList().then(e => {
-      this.deviceList = e.rows
-    })
+  {
+    label: '日',
+    value: '2',
+    default: 24
   },
-  methods: {
-    setDeviceId(e) {
-      let modelId = this.deviceList.find(v => v.deviceId === e).deviceModeId
-      this.$set(this.form, 'deviceModeId', modelId)
-      console.log(modelId)
-      getDeviceFunctions(modelId).then(v => {
-        this.deviceFunList = v.data
-      })
-    },
-    timeChange() {
-      this.$set(this.form, 'startTime', new Date(this.time[0]).getTime())
-      this.$set(this.form, 'endTime', new Date(this.time[1]).getTime())
-    },
-    changeInterval(e) {
-      let data = this.intervalOption.find(v => v.value === e)
-      this.$set(this.form, 'intervalType', data.default)
-      if (e === '1') {
-        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
-      }
-      if (e === '2') {
-        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
-      }
-      if (e === '3') {
-        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 7)), this.$parseTime(new Date())]
-      }
-      if (e === '4') {
-        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 30)), this.$parseTime(new Date())]
-      }
-      if (e === '5') {
-        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 365)), this.$parseTime(new Date())]
-      }
-      this.$set(this.form, 'startTime', new Date(this.time[0]).getTime())
-      this.$set(this.form, 'endTime', new Date(this.time[1]).getTime())
-    }
+  {
+    label: '周',
+    value: '3',
+    default: 7
+  },
+  {
+    label: '月',
+    value: '4',
+    default: 30
+  },
+  {
+    label: '年',
+    value: '5',
+    default: 12
   }
-}
+]);
+const $parseTime = inject('$parseTime');
+
+onMounted(async () => {
+  getDeviceList().then(e => {
+    deviceList.value = e.rows;
+  });
+});
+const setDeviceId = (e) => {
+  let modelId = deviceList.value.find(v => v.deviceId === e).deviceModeId;
+  form.value['deviceModeId'] = modelId;
+  getDeviceFunctions(modelId).then(v => {
+    deviceFunList.value = v.data;
+  });
+};
+const timeChange = () => {
+  form.value['startTime'] = new Date(time.value[0]).getTime();
+  form.value['endTime'] = new Date(time.value[1]).getTime();
+};
+const changeInterval = (e) => {
+  let data = intervalOption.value.find(v => v.value === e);
+  form.value['intervalType'] = data.default;
+  if (e === '1') {
+    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), $parseTime(new Date())];
+  }
+  if (e === '2') {
+    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), $parseTime(new Date())];
+  }
+  if (e === '3') {
+    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 7)), $parseTime(new Date())];
+  }
+  if (e === '4') {
+    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 30)), $parseTime(new Date())];
+  }
+  if (e === '5') {
+    time.value = [$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 365)), $parseTime(new Date())];
+  }
+  form.value['startTime'] = new Date(time.value[0]).getTime();
+  form.value['endTime'] = new Date(time.value[1]).getTime();
+};
 </script>
 
+
 <style>
 </style>
diff --git a/src/components/Configure/networkRequest/NetworkRequest.vue b/src/components/Configure/networkRequest/NetworkRequest.vue
index e8f354b..3513663 100644
--- a/src/components/Configure/networkRequest/NetworkRequest.vue
+++ b/src/components/Configure/networkRequest/NetworkRequest.vue
@@ -104,11 +104,13 @@
                     </el-button>
                     <el-dropdown placement='bottom' trigger="click" @command="dropdownDeviceCommand($event,i,k)">
                       <el-button size="mini" round>...</el-button>
-                      <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="del">删除</el-dropdown-item>
-                        <el-dropdown-item command="update">修改</el-dropdown-item>
-                        <el-dropdown-item command="mapping">设置结果映射</el-dropdown-item>
-                      </el-dropdown-menu>
+                      <template #dropdown>
+                        <el-dropdown-menu >
+                          <el-dropdown-item command="del">删除</el-dropdown-item>
+                          <el-dropdown-item command="update">修改</el-dropdown-item>
+                          <el-dropdown-item command="mapping">设置结果映射</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
                     </el-dropdown>
                   </div>
                 </div>
@@ -137,7 +139,7 @@
     <el-dialog
       title="添加请求"
       append-to-body
-      :visible.sync="addRequestDialogVisible"
+      v-model="addRequestDialogVisible"
       width="30%">
       <el-row :gutter="12">
         <el-col :span="8">
@@ -188,7 +190,7 @@
     <el-dialog
       title="网络请求"
       append-to-body
-      :visible.sync="addRequestFormDialogVisible"
+      v-model="addRequestFormDialogVisible"
       width="30%">
       <el-form :model="addRequestForm">
         <InterfaceRequest :form="addRequestForm" />
@@ -202,7 +204,7 @@
     <el-dialog
       title="添加设备"
       append-to-body
-      :visible.sync="addEquipmentFormDialogVisible"
+      v-model="addEquipmentFormDialogVisible"
       width="30%">
       <el-form :model="addEquipmentForm" label-width="120px">
         <EquipmentRequest :form="addEquipmentForm" />
@@ -213,7 +215,7 @@
   </span>
     </el-dialog>
 
-    <el-dialog title="设置结果映射" :visible.sync="mappingDialogVisible"
+    <el-dialog title="设置结果映射" v-model="mappingDialogVisible"
                append-to-body width="30%">
       <el-form :model="mappingForm">
         <el-form-item label="pid" v-if="false">
@@ -245,7 +247,8 @@
     </el-dialog>
   </div>
 </template>
-<script>
+
+<script setup>
 import addIcon from '@/assets/add.png';
 import subtractIcon from '@/assets/subtract.png';
 import networkImg from '@/assets/request/network.png';
@@ -255,313 +258,300 @@ import InterfaceRequest from './InterfaceRequest';
 import EquipmentRequest from './EquipmentRequest';
 import { customRequest, interfaceRequest } from '@/components/Configure/networkRequest/requestSend';
 import { getHistoryData } from '@/api/configure/configuration/equipment';
+import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';
 
 
-export default {
-  components: {
-    InterfaceRequest,
-    EquipmentRequest
-  },
-  props: ['requests'],
-  data() {
-    return {
-      value: false,
-      addIcon,
-      subtractIcon,
-      networkImg,
-      customizationRequestImg,
-      addRequestDialogVisible: false,
-      addRequestFormDialogVisible: false,
-      addEquipmentFormDialogVisible: false,
-      mappingDialogVisible: false,
-      addRequestForm: {},
-      addEquipmentForm: {},
-      mappingForm: {},
-      option: [],
-      enumOption: [],
-      updateFlag: false,
-      updateIndex: 0,
-      updateDeviceFlag: false,
-      updateDeviceIndex: 0
+const props = defineProps({
+  requests: Object
+});
+
+const { requests } = toRefs(props);
+const value = ref(false);
+const addRequestDialogVisible = ref(false);
+const addRequestFormDialogVisible = ref(false);
+const addEquipmentFormDialogVisible = ref(false);
+const mappingDialogVisible = ref(false);
+const addRequestForm = ref({});
+const addEquipmentForm = ref({});
+const mappingForm = ref({});
+const option = ref([]);
+const enumOption = ref([]);
+const updateFlag = ref(false);
+const updateIndex = ref(0);
+const updateDeviceFlag = ref(false);
+const updateDeviceIndex = ref(0);
+const options = ref({});
+
+onMounted(async () => {
+  if (!requests.value || !Array.isArray(requests.value)) {
+    requests.value = [];
+  }
+});
+const addRequest = () => {
+  addRequestDialogVisible.value = true;
+};
+const addNetworkRequest = () => {
+  addRequestFormDialogVisible.value = true;
+};
+const addEquipment = () => {
+  addEquipmentFormDialogVisible.value = true;
+};
+const addRequestConfirm = () => {
+  if (updateFlag.value) {
+    requests.value[updateIndex.value] = ({
+      ...addRequestForm.value,
+      type: 1,
+      connectionStatus: -1,
+      isOpen: true
+    });
+  } else {
+    requests.value.push(({
+      ...addRequestForm.value,
+      type: 1,
+      connectionStatus: -1,
+      isOpen: true
+    }));
+  }
+  updateFlag.value = false;
+  addRequestFormDialogVisible.value = false;
+  addRequestDialogVisible.value = false;
+  addRequestForm.value = {};
+};
+const addEquipmentConfirm = () => {
+  if (updateDeviceFlag.value) {
+    requests.value[updateDeviceIndex.value] = {
+      ...addEquipmentForm.value,
+      type: 2,
+      connectionStatus: -1,
+      isOpen: true
     };
-  },
-  mounted() {
-    if (!this.requests || !Array.isArray(this.requests)) {
-      this.requests = [];
-    }
-  },
-  methods: {
-    addRequest() {
-      this.addRequestDialogVisible = true;
-    },
-    subtractRequest(key) {
-      if (this.requests?.length > 1) {
-        this.$delete(this.requests, key);
-      }
-    },
-    addNetworkRequest() {
-      this.addRequestFormDialogVisible = true;
-    },
-    addEquipment() {
-      this.addEquipmentFormDialogVisible = true;
-    },
-    addRequestConfirm() {
-      if (this.updateFlag) {
-        this.$set(this.requests, this.updateIndex, ({
-          ...this.addRequestForm,
-          type: 1,
-          connectionStatus: -1,
-          isOpen: true
-        }));
-      } else {
-        this.requests.push(({
-          ...this.addRequestForm,
-          type: 1,
-          connectionStatus: -1,
-          isOpen: true
-        }));
-      }
-      this.updateFlag = false;
-      this.addRequestFormDialogVisible = false;
-      this.addRequestDialogVisible = false;
-      this.addRequestForm = {};
-    },
-    addEquipmentConfirm() {
-      if (this.updateDeviceFlag) {
-        this.$set(this.requests, this.updateDeviceIndex, ({
-          ...this.addEquipmentForm,
-          type: 2,
-          connectionStatus: -1,
-          isOpen: true
-        }));
-      } else {
-        this.requests.push(({
-          ...this.addEquipmentForm,
-          type: 2,
-          connectionStatus: -1,
-          isOpen: true
-        }));
-      }
-      this.updateDeviceFlag = false;
-      this.addEquipmentFormDialogVisible = false;
-      this.addRequestDialogVisible = false;
-      this.addEquipmentForm = {};
-    },
-    testConnection(i, k) {
-      this.$set(this.requests[k], 'connectionStatus', 0);
-      interfaceRequest(i).then(e => {
-        this.$set(this.requests[k], 'connectionStatus', e.status ? 1 : 2);
-        this.$set(this.requests[k], 'request', e.data);
-      });
-    },
-    testDeviceConnection(i, k) {
-      this.$set(this.requests[k], 'connectionStatus', 0);
-      getHistoryData({
-        deviceModeId: i.deviceModeId,
-        functionIdentifier: i.functionIdentifier + '1',
-        interval: i.interval,
-        'sceneId': 144,
-        'deviceId': i.deviceId,
-        startTime: i.startTime,
-        endTime: i.endTime,
-        intervalType: 1 || i.intervalType
-      }).then(e => {
-        // this.$set(this.requests[k], 'connectionStatus', e.status ? 1 : 2)
-        this.$set(this.requests[k], 'connectionStatus', e.code === 200 ? 1 : 2);
-        this.$set(this.requests[k], 'request', e.data);
-      });
-    },
-    dropdownCommand(command, i, k) {
-      switch (command) {
-        case 'del':
-          this.delRequest(i, k);
-          break;
-        case 'update':
-          this.updateRequestForm(i, k);
-          break;
-        case 'mapping':
-          this.setMapping(i, k);
-          break;
-      }
-    },
-    dropdownDeviceCommand(command, i, k) {
-      switch (command) {
-        case 'del':
-          this.delRequest(i, k);
-          break;
-        case 'update':
-          this.updateDeviceRequestForm(i, k);
-          break;
-        case 'mapping':
-          this.setDeviceMapping(i, k);
-          break;
-      }
-    },
-    delRequest(i, k) {
-      this.$confirm('此操作将删除该网络请求, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$delete(this.requests, k);
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
-        });
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        });
-      });
-    },
-    updateRequestForm(i, k) {
-      this.updateFlag = true;
-      this.updateIndex = k;
-      this.addRequestForm = JSON.parse(JSON.stringify(i));
-      this.addRequestFormDialogVisible = true;
-    },
-    updateDeviceRequestForm(i, k) {
-      this.updateDeviceFlag = true;
-      this.updateDeviceIndex = k;
-      this.addEquipmentForm = JSON.parse(JSON.stringify(i));
-      this.addEquipmentFormDialogVisible = true;
-    },
-    async setMapping(i, k) {
-      if (!this.requests?.[k]?.request) {
-        await interfaceRequest(i).then(e => {
-          this.$set(this.requests[k], 'connectionStatus', e.status ? 1 : 2);
-          this.$set(this.requests[k], 'request', e.data);
-        });
-      }
-      this.mappingDialogVisible = true;
-      // this.mappingForm = {mappingArr:[...(i.mappingForm || {})], pid: k}
-      let obj;
-      if (!i.mappingForm?.mappingArr || !Array.isArray(i.mappingForm?.mappingArr)) {
-        obj = { mappingArr: [i.mappingForm || {}], pid: k };
-      } else {
-        obj = { mappingArr: i.mappingForm.mappingArr || [], pid: k };
-      }
-      this.mappingForm = (obj);
-      let data = this.requests?.[k]?.request;
-      let fun = (v) => {
-        return Object.keys(v).map(e => {
-          if (v[e].constructor === Object) {
-            return {
-              value: e,
-              label: e,
-              type: 'Object',
-              children: fun(v[e])
-            };
-          } else {
-            return {
-              value: e,
-              label: e,
-              type: Array.isArray(v[e]) ? 'Array' : 'String',
-              enum: Array.isArray(v[e]) ? Object.keys(v[e]?.[0] || {}) : []
-            };
-          }
-        });
-      };
-
-      let option = fun(data);
-      this.options = option;
-      if (this.mappingForm.isArray) {
-        this.mappingChange();
-      }
-    },
-    async setDeviceMapping(i, k) {
-      if (!this.requests?.[k]?.request) {
-        await getHistoryData({
-          deviceModeId: i.deviceModeId,
-          functionIdentifier: i.functionIdentifier + '1',
-          interval: i.interval,
-          'sceneId': 144,
-          'deviceId': i.deviceId,
-          startTime: i.startTime,
-          endTime: i.endTime,
-          intervalType: 1 || i.intervalType
-        }).then(e => {
-          // this.$set(this.requests[k], 'connectionStatus', e.status ? 1 : 2)
-          this.$set(this.requests[k], 'connectionStatus', e.code === 200 ? 1 : 2);
-          this.$set(this.requests[k], 'request', e.data);
-        });
-      }
-      this.mappingDialogVisible = true;
-      this.mappingForm = { mappingArr: [(i.mappingForm || {})], pid: k };
-      let obj;
-      if (!i.mappingForm?.mappingArr || !Array.isArray(i.mappingForm?.mappingArr)) {
-        obj = { mappingArr: [(i.mappingForm || {})], pid: k };
-      } else {
-        obj = { mappingArr: i.mappingForm.mappingArr || [], pid: k };
-      }
-      this.mappingForm = (obj);
-      let data = this.requests?.[k]?.request;
-      let fun = (v) => {
-        return Object.keys(v).map(e => {
-          if (v[e].constructor === Object) {
-            return {
-              value: e,
-              label: e,
-              type: 'Object',
-              children: fun(v[e])
-            };
-          } else {
-            return {
-              value: e,
-              label: e,
-              type: Array.isArray(v[e]) ? 'Array' : 'String',
-              enum: Array.isArray(v[e]) ? Object.keys(v[e]?.[0] || {}) : []
-            };
-          }
-        });
-      };
-
-      let option = fun(data);
-      this.options = option;
-      if (this.mappingForm.isArray) {
-        this.mappingChange();
-      }
-    },
-    mappingChange(e, k) {
-      let data = this.options;
-      this.mappingForm.mappingArr[k]?.region.forEach(e => {
-        if (Array.isArray(data?.children)) {
-          data = data.children?.find(v => v.value === e) || data;
-        } else {
-          data = data?.find(v => v.value === e) || data;
-        }
-      });
-      this.$set(this.mappingForm.mappingArr[k], 'isArray', data.type === 'Array');
-      if (this.mappingForm.mappingArr[k].isArray) {
-        this.enumOption = data.enum.map(e => {
-          return {
-            value: e,
-            label: e
-          };
-        });
-      } else {
-        this.enumOption = [];
-      }
-    },
-    mappingDialogOk() {
-      this.$set(this.requests[this.mappingForm.pid], 'mappingForm', this.mappingForm);
-      this.mappingDialogVisible = false;
-    },
-    addMappingArr() {
-      this.mappingForm.mappingArr.push(
-        {
-          name: '',
-          region: '',
-          isArray: false,
-          mapData: ''
-        }
-      );
-    }
+  } else {
+    requests.value.push({
+      ...addEquipmentForm.value,
+      type: 2,
+      connectionStatus: -1,
+      isOpen: true
+    });
+  }
+  updateDeviceFlag.value = false;
+  addEquipmentFormDialogVisible.value = false;
+  addRequestDialogVisible.value = false;
+  addEquipmentForm.value = {};
+};
+const testConnection = (i, k) => {
+  requests.value[k]['connectionStatus'] = 0;
+  interfaceRequest(i).then(e => {
+    requests.value[k]['connectionStatus'] = e.status ? 1 : 2;
+    requests.value[k]['request'] = e.data;
+  });
+};
+const testDeviceConnection = (i, k) => {
+  requests.value[k]['connectionStatus'] = 0;
+  getHistoryData({
+    deviceModeId: i.deviceModeId,
+    functionIdentifier: i.functionIdentifier + '1',
+    interval: i.interval,
+    'sceneId': 144,
+    'deviceId': i.deviceId,
+    startTime: i.startTime,
+    endTime: i.endTime,
+    intervalType: 1 || i.intervalType
+  }).then(e => {
+    // this.$set(this.requests[k], 'connectionStatus', e.status ? 1 : 2)
+    requests.value[k]['connectionStatus'] = e.code === 200 ? 1 : 2;
+    requests.value[k]['request'] = e.data;
+  });
+};
+const dropdownCommand = (command, i, k) => {
+  switch (command) {
+    case 'del':
+      delRequest(i, k);
+      break;
+    case 'update':
+      updateRequestForm(i, k);
+      break;
+    case 'mapping':
+      setMapping(i, k);
+      break;
   }
 };
+const dropdownDeviceCommand = (command, i, k) => {
+  switch (command) {
+    case 'del':
+      delRequest(i, k);
+      break;
+    case 'update':
+      updateDeviceRequestForm(i, k);
+      break;
+    case 'mapping':
+      setDeviceMapping(i, k);
+      break;
+  }
+};
+const delRequest = (i, k) => {
+  ElMessageBox.confirm('此操作将删除该网络请求, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    requests.value.splice(k, 1);
+    ElMessage({
+      type: 'success',
+      message: '删除成功!'
+    });
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除'
+    });
+  });
+};
+const updateRequestForm = (i, k) => {
+  updateFlag.value = true;
+  updateIndex.value = k;
+  addRequestForm.value = JSON.parse(JSON.stringify(i));
+  addRequestFormDialogVisible.value = true;
+};
+const updateDeviceRequestForm = (i, k) => {
+  updateDeviceFlag.value = true;
+  updateDeviceIndex.value = k;
+  addEquipmentForm.value = JSON.parse(JSON.stringify(i));
+  addEquipmentFormDialogVisible.value = true;
+};
+const setMapping = async (i, k) => {
+  if (!requests.value?.[k]?.request) {
+    await interfaceRequest(i).then(e => {
+      requests.value[k]['connectionStatus'] = e.status ? 1 : 2;
+      requests.value[k]['request'] = e.data;
+    });
+  }
+  mappingDialogVisible.value = true;
+  // this.mappingForm = {mappingArr:[...(i.mappingForm || {})], pid: k}
+  let obj;
+  if (!i.mappingForm?.mappingArr || !Array.isArray(i.mappingForm?.mappingArr)) {
+    obj = { mappingArr: [i.mappingForm || {}], pid: k };
+  } else {
+    obj = { mappingArr: i.mappingForm.mappingArr || [], pid: k };
+  }
+  mappingForm.value = (obj);
+  let data = requests.value?.[k]?.request;
+  let fun = (v) => {
+    return Object.keys(v).map(e => {
+      if (v[e].constructor === Object) {
+        return {
+          value: e,
+          label: e,
+          type: 'Object',
+          children: fun(v[e])
+        };
+      } else {
+        return {
+          value: e,
+          label: e,
+          type: Array.isArray(v[e]) ? 'Array' : 'String',
+          enum: Array.isArray(v[e]) ? Object.keys(v[e]?.[0] || {}) : []
+        };
+      }
+    });
+  };
+
+  let option1 = fun(data);
+  options.value = option1;
+  if (mappingForm.value.isArray) {
+    mappingChange();
+  }
+};
+const setDeviceMapping = async (i, k) => {
+  if (!requests.value?.[k]?.request) {
+    await getHistoryData({
+      deviceModeId: i.deviceModeId,
+      functionIdentifier: i.functionIdentifier + '1',
+      interval: i.interval,
+      'sceneId': 144,
+      'deviceId': i.deviceId,
+      startTime: i.startTime,
+      endTime: i.endTime,
+      intervalType: 1 || i.intervalType
+    }).then(e => {
+      // this.$set(this.requests[k], 'connectionStatus', e.status ? 1 : 2)
+      requests.value[k]['connectionStatus'] = e.code === 200 ? 1 : 2;
+      requests.value[k]['request'] = e.data;
+    });
+  }
+  mappingDialogVisible.value = true;
+  mappingForm.value = { mappingArr: [(i.mappingForm || {})], pid: k };
+  let obj;
+  if (!i.mappingForm?.mappingArr || !Array.isArray(i.mappingForm?.mappingArr)) {
+    obj = { mappingArr: [(i.mappingForm || {})], pid: k };
+  } else {
+    obj = { mappingArr: i.mappingForm.mappingArr || [], pid: k };
+  }
+  mappingForm.value = (obj);
+  let data = requests.value?.[k]?.request;
+  let fun = (v) => {
+    return Object.keys(v).map(e => {
+      if (v[e].constructor === Object) {
+        return {
+          value: e,
+          label: e,
+          type: 'Object',
+          children: fun(v[e])
+        };
+      } else {
+        return {
+          value: e,
+          label: e,
+          type: Array.isArray(v[e]) ? 'Array' : 'String',
+          enum: Array.isArray(v[e]) ? Object.keys(v[e]?.[0] || {}) : []
+        };
+      }
+    });
+  };
+
+  let option1 = fun(data);
+  options.value = option1;
+  if (mappingForm.value.isArray) {
+    mappingChange();
+  }
+};
+const mappingChange = (e, k) => {
+  let data = options.value;
+  mappingForm.value.mappingArr[k]?.region.forEach(e => {
+    if (Array.isArray(data?.children)) {
+      data = data.children?.find(v => v.value === e) || data;
+    } else {
+      data = data?.find(v => v.value === e) || data;
+    }
+  });
+  mappingForm.value.mappingArr[k]['isArray'] = data.type === 'Array';
+  if (mappingForm.value.mappingArr[k].isArray) {
+    enumOption.value = data.enum.map(e => {
+      return {
+        value: e,
+        label: e
+      };
+    });
+  } else {
+    enumOption.value = [];
+  }
+};
+const mappingDialogOk = () => {
+  requests.value[mappingForm.value.pid]['mappingForm'] = mappingForm.value;
+  mappingDialogVisible.value = false;
+};
+const addMappingArr = () => {
+  mappingForm.value.mappingArr.push(
+    {
+      name: '',
+      region: '',
+      isArray: false,
+      mapData: ''
+    }
+  );
+};
 </script>
 
+
 <style>
 
 .add {
diff --git a/src/components/Configure/networkRequest/requestSend.js b/src/components/Configure/networkRequest/requestSend.js
index 96a7bea..09a0ce4 100644
--- a/src/components/Configure/networkRequest/requestSend.js
+++ b/src/components/Configure/networkRequest/requestSend.js
@@ -1,4 +1,4 @@
-import request from '@/utils/request';
+import request from '@/utils/request1';
 
 const interfaceRequest = async (option) => {
   let params = {};
diff --git a/src/components/Configure/setLayout/leftRightStr.vue b/src/components/Configure/setLayout/leftRightStr.vue
index 85ac711..2f72b74 100644
--- a/src/components/Configure/setLayout/leftRightStr.vue
+++ b/src/components/Configure/setLayout/leftRightStr.vue
@@ -27,7 +27,7 @@
 
     <el-dialog
       title="分割方式"
-      :visible.sync="dialogVisible"
+      v-model="dialogVisible"
       :append-to-body="true"
       width="30%">
       <el-button type="primary" @click="leftRight">左右</el-button>
@@ -41,7 +41,7 @@
 
     <el-dialog
       title="选择组件"
-      :visible.sync="componentsDialogVisible"
+      v-model="componentsDialogVisible"
       :append-to-body="true"
       width="60%">
       <ComponentsDialogContent @SelectComponentsCB="SelectComponentsCB" />
@@ -56,7 +56,7 @@
     <el-dialog
       title="图表配置"
       :append-to-body="true"
-      :visible.sync="componentsDialog"
+      v-model="componentsDialog"
       width="96%"
       class="dialog1"
       :fullscreen="true"
@@ -169,7 +169,6 @@ const props = defineProps({
 });
 
 const { tree, viewFlag, styleData } = toRefs(props);
-console.log(tree.value);
 
 const componentsEnum = {
   table: 'ComplexTable',
@@ -186,7 +185,7 @@ const componentsEnum = {
 const width = ref(0);
 const distance = ref(false);
 const dialogVisible = ref(false);
-const componentsDialogVisible = ref(0);
+const componentsDialogVisible = ref(false);
 const type = ref('');
 const componentsDialog = ref(false);
 const componentsDialogData = ref({});
@@ -199,13 +198,17 @@ let con = ref();
 let separate = ref();
 onMounted(async () => {
   await nextTick();
+  console.log(area1.value);
   area1.value.addEventListener('contextmenu', (event) => {
+    console.log(111);
     event.preventDefault();
     event.stopPropagation();
     if (!tree.value.left) {
+      console.log(222);
       dialogVisible.value = true;
       type.value = 'left';
     } else {
+      console.log(333);
       type.value = 'left';
       dialogKey.value += 1;
       componentsDialogData.value = tree.value.left;
@@ -250,7 +253,7 @@ onMounted(async () => {
   separate.value.ondrag = (e) => {
     e.preventDefault();
   };
-  separate.ondragend = (e) => {
+  separate.value.ondragend = (e) => {
     tree.value.separate = ((distance.value + e.offsetX) / width.value) * 100;
     if (tree.value.separate < 1) {
       tree.value.separate = 1;
diff --git a/src/components/Configure/setLayout/upDownStr.vue b/src/components/Configure/setLayout/upDownStr.vue
index 30974c1..896d33b 100644
--- a/src/components/Configure/setLayout/upDownStr.vue
+++ b/src/components/Configure/setLayout/upDownStr.vue
@@ -26,7 +26,7 @@
     </div>
     <el-dialog
       title="分割方式"
-      :visible.sync="dialogVisible"
+      v-model="dialogVisible"
       :append-to-body="true"
       width="30%">
       <el-button type="primary" @click="leftRight">左右</el-button>
@@ -39,7 +39,7 @@
 
     <el-dialog
       title="选择组件"
-      :visible.sync="componentsDialogVisible"
+      v-model="componentsDialogVisible"
       :append-to-body="true"
       width="60%">
       <ComponentsDialogContent @SelectComponentsCB="SelectComponentsCB" />
@@ -54,7 +54,7 @@
     <el-dialog
       title="图表配置"
       :append-to-body="true"
-      :visible.sync="componentsDialog"
+      v-model="componentsDialog"
       width="96%"
       class="dialog1"
       :fullscreen="true"
@@ -163,7 +163,6 @@ const props = defineProps({
 });
 
 const { tree, viewFlag, styleData } = toRefs(props);
-console.log(tree.value);
 
 const componentsEnum = {
   table: 'ComplexTable',
@@ -193,7 +192,6 @@ let con = ref();
 let separate = ref();
 onMounted(async () => {
   await nextTick();
-  console.log(area1.value);
   area1.value.addEventListener('contextmenu', (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -249,7 +247,6 @@ onMounted(async () => {
     e.preventDefault();
   };
   separate.value.ondragend = (e) => {
-    let con = ref();
     height.value = con.value.offsetHeight;
     tree.value.separate = ((distance.value + e.offsetY) / height.value) * 100;
     if (tree.value.separate < 1) {
diff --git a/src/components/Configure/view/bar.vue b/src/components/Configure/view/bar.vue
index 8a9ad6b..aef22ae 100644
--- a/src/components/Configure/view/bar.vue
+++ b/src/components/Configure/view/bar.vue
@@ -3,69 +3,69 @@
     <Chart ref="chart"></Chart>
   </div>
 </template>
-<script>
+<script setup>
 import Chart from '@/components/chart';
 import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg';
 
-export default {
-  props: ['defaultData', 'styleData'],
-  components: {
-    Chart
-  },
-  data() {
-    return {
-      chartData: {},
-      globalList: [],
-      requestData: null
-    };
-  },
-  async mounted() {
-    // 获取全局配置
-    await queryGlobalCfg().then(e => {
-      this.globalList = e;
-    });
-    await this.getData();
-    setInterval(async () => {
-      await this.getData();
-    }, 10000);
-  },
-  methods: {
-    getChartData(data) {
-      this.$detectingNullValues(this.chartData, ['textStyle', 'color']);
-      this.$detectingNullValues(this.chartData, ['xAxis', 'data']);
-      if (this.defaultData.configForm['textColor']?.[0] === 'system') {
-        this.$set(this.chartData.textStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm.textColor?.[1])?.globalCfgDate || '');
-      }
-      if (this.defaultData.configForm['textColor']?.[0] === 'styleData') {
-        this.$set(this.chartData.textStyle, 'color', this.styleData.colors[this.defaultData.configForm['textColor'][1]]);
-      }
-      this.$set(this.chartData.xAxis, 'data', data[this.defaultData.configForm.Xdata]);
 
-      this.defaultData.configForm['datas'].forEach((i, k) => {
-        this.$detectingNullValues(this.chartData, ['series', k, 'data']);
-        this.$detectingNullValues(this.chartData, ['series', k, 'itemStyle', 'normal', 'color']);
-        this.$detectingNullValues(this.chartData, ['series', k, 'name']);
-        this.$set(this.chartData.series[k], 'data', data[this.defaultData.configForm['datas'][k].data]);
-        this.$set(this.chartData.series[k], 'name', this.defaultData.configForm['datas'][k].name);
-        if (this.defaultData.configForm['datas'][k]['barColor'][0] === 'system') {
-          this.$set(this.chartData.series[k].itemStyle.normal, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm['datas'][k].barColor?.[1])?.globalCfgDate || '');
-        }
-        if (this.defaultData.configForm['datas'][k]['barColor'][0] === 'styleData') {
-          this.$set(this.chartData.series[k].itemStyle.normal, 'color', this.styleData.colors[this.defaultData.configForm['datas'][k]['barColor'][1]]);
-        }
-      });
-    },
-    async getData() {
-      this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData));
-      let data = await this.$getFinalData(this.defaultData.requests);
-      if (Object.keys(data).length > 0) {
-        this.getChartData(data);
-      }
-      this.$refs.chart?.setData(this.$clearNull(this.chartData, this.requestData) || {});
-    }
+const props = defineProps({
+  defaultData: Object,
+  styleData: Object
+});
 
+const { defaultData, styleData } = toRefs(props);
+const chartData = ref({});
+const globalList = ref([]);
+const requestData = ref(null);
+const $getFinalData = inject('$getFinalData');
+const $clearNull = inject('$clearNull');
+const $detectingNullValues = inject('$detectingNullValues');
+const chart = ref();
 
+onMounted(async () => {
+  // 获取全局配置
+  await queryGlobalCfg().then(e => {
+    globalList.value = e;
+  });
+  await getData();
+  setInterval(async () => {
+    await getData();
+  }, 10000);
+});
+const getChartData = (data) => {
+  $detectingNullValues(chartData.value, ['textStyle', 'color']);
+  $detectingNullValues(chartData.value, ['xAxis', 'data']);
+  if (defaultData.value.configForm['textColor']?.[0] === 'system') {
+    chartData.value.textStyle['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm.textColor?.[1])?.globalCfgDate || '';
   }
+  if (defaultData.value.configForm['textColor']?.[0] === 'styleData') {
+    chartData.value.textStyle['color'] = styleData.value.colors[defaultData.value.configForm['textColor'][1]];
+  }
+  chartData.value.xAxis['data'] = data[defaultData.value.configForm.Xdata];
+
+  defaultData.value.configForm['datas'].forEach((i, k) => {
+    $detectingNullValues(chartData.value, ['series', k, 'data']);
+    $detectingNullValues(chartData.value, ['series', k, 'itemStyle', 'normal', 'color']);
+    $detectingNullValues(chartData.value, ['series', k, 'name']);
+    chartData.value.series[k]['data'] = data[defaultData.value.configForm['datas'][k].data];
+    chartData.value.series[k]['name'] = defaultData.value.configForm['datas'][k].name;
+
+    if (defaultData.value.configForm['datas'][k]['barColor'][0] === 'system') {
+      chartData.value.series[k].itemStyle.normal['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm['datas'][k].barColor?.[1])?.globalCfgDate || '';
+
+    }
+    if (defaultData.value.configForm['datas'][k]['barColor'][0] === 'styleData') {
+      chartData.value.series[k].itemStyle.normal['color'] = styleData.value.colors[this.defaultData.configForm['datas'][k]['barColor'][1]];
+    }
+  });
+};
+const getData = async () => {
+  chartData.value = JSON.parse(JSON.stringify(defaultData.value.chartData));
+  let data = await $getFinalData(defaultData.value.requests);
+  if (Object.keys(data).length > 0) {
+    getChartData(data);
+  }
+  chart.value?.setData($clearNull(chartData.value, requestData.value) || {});
 };
 </script>
 <style>
diff --git a/src/components/Configure/view/line.vue b/src/components/Configure/view/line.vue
index 1053d52..ca5ad1d 100644
--- a/src/components/Configure/view/line.vue
+++ b/src/components/Configure/view/line.vue
@@ -3,71 +3,74 @@
     <Chart ref="chart"></Chart>
   </div>
 </template>
-<script>
+
+<script setup>
 import Chart from '@/components/chart';
 import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg';
 
-export default {
-  props: ['defaultData', 'styleData'],
-  components: {
-    Chart
-  },
-  data() {
-    return {
-      chartData: {},
-      globalList: {},
-      requestData: null
-    };
-  },
-  async mounted() {
-    await queryGlobalCfg().then(e => {
-      this.globalList = e;
-    });
-    await this.getData();
-    setInterval(async () => {
-      await this.getData();
-    }, 10000);
-  },
-  methods: {
-    async getData() {
-      this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData));
-      let data = await this.$getFinalData(this.defaultData.requests);
-      if (Object.keys(data).length > 0) {
-        this.getChartData(data);
-      }
-      this.chartData.color = this.styleData?.colors?.length > 0 ? this.styleData.colors : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+const props = defineProps({
+  defaultData: Object,
+  styleData: Object
+});
 
-      this.$refs.chart?.setData(this.$clearNull(this.chartData, this.requestData) || {});
-    },
-    getChartData(data) {
-      this.$detectingNullValues(this.chartData, ['textStyle', 'color']);
-      this.$detectingNullValues(this.chartData, ['xAxis', 'data']);
+const { defaultData, styleData } = toRefs(props);
+const chartData = ref({});
+const globalList = ref([]);
+const requestData = ref(null);
+const $getFinalData = inject('$getFinalData');
+const $clearNull = inject('$clearNull');
+const $detectingNullValues = inject('$detectingNullValues');
+const chart = ref();
 
-      if (this.defaultData.configForm['textColor'][0] === 'system') {
-        this.$set(this.chartData.textStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm.textColor?.[1])?.globalCfgDate || '');
-      }
-      if (this.defaultData.configForm['textColor'][0] === 'styleData') {
-        this.$set(this.chartData.textStyle, 'color', this.styleData.colors[this.defaultData.configForm['textColor'][1]] || '');
-      }
 
-      this.$set(this.chartData.xAxis, 'data', data[this.defaultData.configForm.Xdata]);
+onMounted(async () => {
+  await queryGlobalCfg().then(e => {
+    globalList.value = e;
+  });
+  await getData();
+  setInterval(async () => {
+    await getData();
+  }, 10000);
+});
 
-      this.defaultData.configForm['datas'].forEach((i, k) => {
-        this.$detectingNullValues(this.chartData, ['series', k, 'data']);
-        this.$detectingNullValues(this.chartData, ['series', k, 'lineStyle', 'color']);
-        this.$detectingNullValues(this.chartData, ['series', k, 'name']);
-        this.$set(this.chartData.series[k], 'data', data[this.defaultData.configForm['datas'][k].data]);
-        this.$set(this.chartData.series[k], 'name', this.defaultData.configForm['datas'][k].name);
-        if (this.defaultData.configForm['datas'][k]['lineColor'][0] === 'system') {
-          this.$set(this.chartData.series[k].lineStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm['datas'][k].lineColor?.[1])?.globalCfgDate || '');
-        }
-        if (this.defaultData.configForm['datas'][k]['lineColor'][0] === 'styleData') {
-          this.$set(this.chartData.series[k].lineStyle, 'color', this.styleData.colors[this.defaultData.configForm['datas'][k]['lineColor'][1]] || '');
-        }
-      });
-    }
+const getData = async () => {
+  chartData.value = JSON.parse(JSON.stringify(defaultData.value.chartData));
+  let data = await $getFinalData(defaultData.value.requests);
+  if (Object.keys(data).length > 0) {
+    getChartData(data);
   }
+  chartData.value.color = styleData.value?.colors?.length > 0 ? styleData.value.colors : ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+
+  chart.value?.setData($clearNull(chartData.value, requestData.value) || {});
 };
+const getChartData = (data) => {
+  $detectingNullValues(chartData.value, ['textStyle', 'color']);
+  $detectingNullValues(chartData.value, ['xAxis', 'data']);
+
+  if (defaultData.value.configForm['textColor'][0] === 'system') {
+    chartData.value.textStyle['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm.textColor?.[1])?.globalCfgDate || '';
+  }
+  if (defaultData.value.configForm['textColor'][0] === 'styleData') {
+    chartData.value.textStyle['color'] = styleData.value.colors[defaultData.value.configForm['textColor'][1]] || '';
+  }
+
+  chartData.value.xAxis['data'] = data[defaultData.value.configForm.Xdata];
+
+  defaultData.value.configForm['datas'].forEach((i, k) => {
+    $detectingNullValues(chartData.value, ['series', k, 'data']);
+    $detectingNullValues(chartData.value, ['series', k, 'lineStyle', 'color']);
+    $detectingNullValues(chartData.value, ['series', k, 'name']);
+    chartData.value.series[k]['data'] = data[defaultData.value.configForm['datas'][k].data];
+    chartData.value.series[k]['name'] = defaultData.value.configForm['datas'][k].name;
+    if (defaultData.value.configForm['datas'][k]['lineColor'][0] === 'system') {
+      chartData.value.series[k].lineStyle['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm['datas'][k].lineColor?.[1])?.globalCfgDate || '';
+    }
+    if (defaultData.value.configForm['datas'][k]['lineColor'][0] === 'styleData') {
+      chartData.value.series[k].lineStyle['color'] = styleData.value.colors[defaultData.value.configForm['datas'][k]['lineColor'][1]] || '';
+    }
+  });
+};
+
 </script>
 <style>
 
diff --git a/src/components/Configure/view/pie.vue b/src/components/Configure/view/pie.vue
index 567a6aa..42f300f 100644
--- a/src/components/Configure/view/pie.vue
+++ b/src/components/Configure/view/pie.vue
@@ -3,60 +3,52 @@
     <Chart ref="chart"></Chart>
   </div>
 </template>
-<script>
-import Chart from '@/components/chart'
+<script setup>
+import Chart from '@/components/chart';
+import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';
+
+const props = defineProps({
+  defaultData: Object
+});
+
+const { defaultData } = toRefs(props);
+const chartData = ref({});
+const pieData = ref([]);
+const requestData = ref(null);
+const $getFinalData = inject('$getFinalData');
+const $clearNull = inject('$clearNull');
+const $detectingNullValues = inject('$detectingNullValues');
+const chart = ref();
+
+
+onMounted(async () => {
+  $detectingNullValues(defaultData.value, ['configForm', 'data']);
+  $detectingNullValues(defaultData.value, ['configForm', 'pieName']);
+  $detectingNullValues(defaultData.value, ['configForm', 'pieData']);
+  await getData();
+  setInterval(async () => {
+    await getData();
+  }, 10000);
+});
+const getData = async () => {
+  chartData.value = JSON.parse(JSON.stringify(defaultData.value.chartData));
+  let data = await $getFinalData(defaultData.value.requests);
+  if (Object.keys(data).length > 0) {
+    pieData.value = data[defaultData.value.configForm.data];
+
+    if (defaultData.value.configForm['pieName'] && defaultData.value.configForm['pieData']) {
+      let data1 = pieData.value.map(e => {
+        return [e[defaultData.value.configForm['pieName']], e[defaultData.value.configForm['pieData']]];
+      });
+      $detectingNullValues(chartData.value, ['dataset', 'source', 0]);
+      let data = [chartData.value.dataset.source[0], ...data1];
+
+      chartData.value.dataset['source'] = data;
 
-export default {
-  props: ['defaultData'],
-  components: {
-    Chart
-  },
-  data() {
-    return {
-      chartData: {},
-      requestData: null,
-      pieData: [],
     }
-  },
-  created() {
-    this.$detectingNullValues(this.defaultData, ['configForm', 'data'])
-    this.$detectingNullValues(this.defaultData, ['configForm', 'pieName'])
-    this.$detectingNullValues(this.defaultData, ['configForm', 'pieData'])
-  },
-  async mounted() {
-    await this.getData()
-    setInterval(async () => {
-      await this.getData()
-    }, 10000)
-  },
-  methods: {
-    async getData() {
-      this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData))
-      let data = await this.$getFinalData(this.defaultData.requests)
-      console.log('chart-data',data)
-      console.log('chart-data==--==',this.defaultData)
-      if (Object.keys(data).length > 0) {
-        this.pieData = data[this.defaultData.configForm.data]
-
-        if (this.defaultData.configForm['pieName'] && this.defaultData.configForm['pieData']) {
-          let data1 = this.pieData.map(e=>{
-            return [e[this.defaultData.configForm['pieName']],e[this.defaultData.configForm['pieData']]]
-          })
-          this.$detectingNullValues(this.chartData, ['dataset', 'source', 0])
-          let data =[this.chartData.dataset.source[0],...data1]
-
-          this.$set(this.chartData.dataset,'source' , data)
-
-          console.log('this.chartData.dataset.source',this.chartData)
-        }
-      }
-      console.log('chart-data==--==112312',this.chartData)
-      this.$refs.chart?.setData(this.$clearNull(this.chartData, this.requestData) || {})
-    },
-
-
-  },
-}
+  }
+  chart.value?.setData($clearNull(chartData.value, requestData.value) || {});
+};
 </script>
 <style>
 
diff --git a/src/components/Configure/view/scrollTable.vue b/src/components/Configure/view/scrollTable.vue
index f1e56e2..7510b08 100644
--- a/src/components/Configure/view/scrollTable.vue
+++ b/src/components/Configure/view/scrollTable.vue
@@ -1,59 +1,56 @@
 <template>
   <div style="display: inline-block;width: 100%;height: 100% ">
-      <div style="background-color: #094170">
-        <div class="scrollTable" style="font-weight: bold;" :style="`width:calc(${100/defaultData.th.length}%)`" v-for="i in defaultData.th">
-          {{i}}
-        </div>
+    <div style="background-color: #094170">
+      <div class="scrollTable" style="font-weight: bold;" :style="`width:calc(${100/defaultData.th.length}%)`"
+           v-for="i in defaultData.th">
+        {{ i }}
       </div>
-    <vue-seamless-scroll
-      :visibleCount="3"
-      :list="tableData"
-      :hover="true"
-      :step="0.5"
-      class="case-item"
-      style="height: 84%;overflow: hidden;"
-    >
+    </div>
+    <div style="height: 84%;overflow: hidden;">
+      <!--            <vue3-seamless-scroll-->
+      <!--              :list="tableData"-->
+      <!--              ref="tableRef"-->
+      <!--            >-->
       <div
         v-for="(item, index) in tableData"
         :key="index"
-
       >
         <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
           <div
-            class="scrollTable" v-for="i in defaultData.td" :style="`width:calc(${100/defaultData.td.length}%)`">
+            class="scrollTable" v-for="i in defaultData.td"
+            :style="`width:calc(${100/defaultData.td.length}%)`">
             {{ item[i] }}
           </div>
         </div>
       </div>
-    </vue-seamless-scroll>
+      <!--            </vue3-seamless-scroll>-->
+    </div>
   </div>
 </template>
-<script>
-import vueSeamlessScroll from "vue3-seamless-scroll";
+<script setup>
+// import vueSeamlessScroll from 'vue3-seamless-scroll';
 
-export default {
-  props: ['defaultData'],
-  components: {
-    vueSeamlessScroll,
-  },
-  data() {
-    return {
-      tableData:[],
-    }
-  },
-  async mounted() {
-    await this.getData()
-    setInterval(async () => {
-      await this.getData()
-    }, 1000*10)
-  },
-  methods: {
-    async getData() {
-      let data = await this.$getFinalData(this.defaultData.requests)
-      this.tableData = data[this.defaultData.tableDataKey]
-    },
-  },
-}
+const props = defineProps({
+  defaultData: Object
+});
+
+const { defaultData } = toRefs(props);
+const tableData = ref([]);
+const tableV = ref(true);
+const tableKey = ref(0);
+const $getFinalData = inject('$getFinalData');
+const tableRef = ref();
+
+onMounted(async () => {
+  await getData();
+  setInterval(async () => {
+    await getData();
+  }, 1000 * 10);
+});
+const getData = async () => {
+  let data = await $getFinalData(defaultData.value.requests);
+  tableData.value = data[defaultData.value.tableDataKey];
+};
 </script>
 <style>
 
diff --git a/src/components/chart.vue b/src/components/chart.vue
index db1a5b7..67c6730 100644
--- a/src/components/chart.vue
+++ b/src/components/chart.vue
@@ -1,65 +1,71 @@
 <template>
-    <div style="width: 100%;height: 100%" ref="chart" @resize="resize" />
+  <div style="width: 100%;height: 100%" ref="chartRef" @resize="resize" />
 </template>
 
-<script>
+<script setup>
 import * as echarts from 'echarts';
+import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';
 
-export default {
-  expose: ['setData'],
-  props:['defaultOption'],
-  data() {
-    return {
-      chart: null,
-      option: null,
-      resizeTime:true
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          this.resize()
-        }
-      });
+const props = defineProps({
+  defaultOption: Object
+});
 
-      resizeObserver.observe(this.$refs.chart);
-    });
-    window.addEventListener('resize', this.resize)
-    if(this.defaultOption){
-      this.setData(this.defaultOption)
-    }
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-    window.removeEventListener('resize', this.resize)
-  },
-  methods: {
-    setData(option) {
-      this.option = option
-      this.initChart(option)
-    },
-    initChart(option) {
-      if(!this.chart){
-        this.chart = echarts.init(this.$refs.chart, 'macarons')
-      }
-      this.chart.setOption(option,true)
-    },
-    resize() {
-      if(this.resizeTime){
-        this.resizeTime = false
-        if (this.option && this.chart) {
-          this.chart.resize()
-        }
-      setTimeout(()=>{
-        this.resizeTime = true
-      },16)
-      }
-    },
+const { defaultOption } = toRefs(props);
+
+
+const chart = ref(null);
+const option = ref(null);
+const resizeTime = ref(true);
+const chartRef = ref();
+
+onMounted(async () => {
+  if (defaultOption.value) {
+    setData(defaultOption.value);
   }
-}
+  debugger
+  console.log(chartRef.value);
+  debugger
+  nextTick(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        resize();
+      }
+    });
+    resizeObserver.observe(chartRef.value);
+  });
+  window.addEventListener('resize', resize);
+});
+
+const setData = (e) => {
+  option.value = e;
+  initChart(e);
+};
+const initChart = (option) => {
+  if (!chart.value) {
+    chart.value = echarts.init(chartRef.value, 'macarons');
+  }
+  chart.value.setOption(option, true);
+};
+const resize = () => {
+  if (resizeTime.value) {
+    resizeTime.value = false;
+    if (option.value  && chartRef.value) {
+      chartRef.value.resize();
+    }
+    setTimeout(() => {
+      resizeTime.value = true;
+    }, 16);
+  }
+};
+onBeforeUnmount(() => {
+  if (!chart.value) {
+    return;
+  }
+  chart.value.dispose();
+  chart.value = null;
+  window.removeEventListener('resize', resize);
+});
+defineExpose({
+  setData
+});
 </script>
diff --git a/src/main.ts b/src/main.ts
index e87ebe9..a9390fe 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -53,6 +53,7 @@ import i18n from '@/lang/index';
 import VXETable from 'vxe-table';
 import 'vxe-table/lib/style.css';
 
+
 VXETable.config({
   zIndex: 999999
 });
@@ -62,6 +63,8 @@ import { ElDialog } from 'element-plus';
 
 ElDialog.props.closeOnClickModal.default = false;
 
+import vue3SeamlessScroll from 'vue3-seamless-scroll';
+
 const app = createApp(App);
 
 
@@ -76,6 +79,7 @@ app.provide('$detectingNullValues', detectingNullValues);
 app.provide('$getFinalData', getFinalData);
 app.provide('$testColor', testColor);
 
+app.use(vue3SeamlessScroll);
 app.use(HighLight);
 app.use(ElementIcons);
 app.use(ElementPlus);
diff --git a/src/utils/request1.js b/src/utils/request1.js
index 87b2cb5..8fdc5d3 100644
--- a/src/utils/request1.js
+++ b/src/utils/request1.js
@@ -1,45 +1,45 @@
 import axios from 'axios';
-import {getToken} from "@/utils/auth";
+import { getToken } from '@/utils/auth';
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
 
 const service = axios.create({
-    baseURL: '/deva-api',
-    // baseURL: 'http://124.223.15.102:8888',
-    timeout: 10000,
+  baseURL: '/deva-api',
+  // baseURL: 'http://124.223.15.102:8888',
+  timeout: 10000
 });
 
 service.interceptors.request.use(config => {
-    config.headers['Authorization'] = 'Bearer ' + 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ0ZW5hbnRpZCI6MSwidXNlcl9rZXkiOiJkMjM4MjI2ZS0zOWRiLTRkOTctYTI0MC0zZTgwZmVmOTNiYjkiLCJ1c2VybmFtZSI6ImFkbWluIn0.Zff2GdWE8NwhRKt_N3p06wQkxytBB3FGmJW4HCeYlGQSPnvAVFGgDrBrWxvmtfNTaa54pNJmAJe9_HML1hsdJQ'
-    return config
+  config.headers['Authorization'] = 'Bearer ' + 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ0ZW5hbnRpZCI6MSwidXNlcl9rZXkiOiI1NjFiNTA4My0zNzU3LTQ4NzAtOTQ1Mi01MDVjNmE4NzI1ZTkiLCJ1c2VybmFtZSI6ImFkbWluIn0.erDoYvf3eOkcLOqznRXyHL-yBoz9WNvCBcZfqTERV5f8cB7YyU6t6-5uxWM_-Drf7925hagMsJPk0q3Usbeu2Q';
+  return config;
 }, error => {
-})
+});
 
 service.interceptors.response.use(res => {
-        return res.data;
-    },
-    error => {
-        console.log('err' + error)
-        let { message } = error;
-        if (message == "Network Error") {
-            message = "后端接口连接异常";
-        } else if (message.includes("timeout")) {
-            message = "系统接口请求超时";
-        } else if (message.includes("Request failed with status code")) {
-            message = "系统接口" + message.substr(message.length - 3) + "异常";
-        }
-      ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
-        return Promise.reject(error)
+    return res.data;
+  },
+  error => {
+    console.log('err' + error);
+    let { message } = error;
+    if (message == 'Network Error') {
+      message = '后端接口连接异常';
+    } else if (message.includes('timeout')) {
+      message = '系统接口请求超时';
+    } else if (message.includes('Request failed with status code')) {
+      message = '系统接口' + message.substr(message.length - 3) + '异常';
     }
-)
+    ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
+    return Promise.reject(error);
+  }
+);
 
-function request({method = 'get', url, data = {}, params = {}}) {
-    return service({
-        method,
-        url,
-        data,
-        params,
-    });
+function request({ method = 'get', url, data = {}, params = {} }) {
+  return service({
+    method,
+    url,
+    data,
+    params
+  });
 }
 
 export default request;
diff --git a/src/utils/scrin.js b/src/utils/scrin.js
index 09369c1..4286fa1 100644
--- a/src/utils/scrin.js
+++ b/src/utils/scrin.js
@@ -178,7 +178,7 @@ const clearNull = (e, data) => {
 };
 
 const parseTime = (time, pattern) => {
-  if (arguments.length === 0 || !time) {
+  if (!time) {
     return null;
   }
   const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
diff --git a/src/views/tool/draggable/elements/hw-form.vue b/src/views/tool/draggable/elements/hw-form.vue
index 91665a4..c30e44a 100644
--- a/src/views/tool/draggable/elements/hw-form.vue
+++ b/src/views/tool/draggable/elements/hw-form.vue
@@ -39,6 +39,7 @@ const props = defineProps({
   tasks: Array,
   formData: Object
 });
+
 const { options, tasks, formData } = toRefs(props);
 console.log('formData', formData);
 formData.value[options.value.key || ('form-' + options.value.uuid)] = {};
@@ -46,7 +47,9 @@ formData.value[options.value.key || ('form-' + options.value.uuid)] = {};
 
 const selectUuid = inject('selectUuid');
 const getSelectUuid = inject('getSelectUuid');
+const getOptions = inject('getOptions');
 const formClick = () => {
+  getOptions(options.value);
   getSelectUuid(options.value.uuid);
 };
 </script>
diff --git a/src/views/tool/draggable/elements/hw-input.vue b/src/views/tool/draggable/elements/hw-input.vue
index af79366..901e7fe 100644
--- a/src/views/tool/draggable/elements/hw-input.vue
+++ b/src/views/tool/draggable/elements/hw-input.vue
@@ -2,8 +2,8 @@
   <div class="hw-input" @click.stop="inputClick"
        :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
     <tool v-if="selectUuid === options.uuid" :options="options" />
-    <el-form-item :label="options.name">
-      <el-input v-model="formData[options.key || ('input-'+options.uuid)]" />
+    <el-form-item :label="options.name" :required="options.required">
+      <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled" />
     </el-form-item>
   </div>
 </template>
diff --git a/src/views/tool/draggable/formBoard.vue b/src/views/tool/draggable/formBoard.vue
new file mode 100644
index 0000000..3903224
--- /dev/null
+++ b/src/views/tool/draggable/formBoard.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import hwInputView from './viewElements/hw-input-view.vue';
+import hwFormView from './viewElements/hw-form-view.vue';
+
+export default {
+  name: 'hw-form',
+  components: {
+    hwInputView,
+    hwFormView
+  }
+};
+</script>
+
+<template>
+  <div class="hw-form">
+    <div v-for="i in widgetList" :key="i.uuid">
+      <component :is="i.type+'-view'" :options="i.options" :tasks="i.tasks" :formData="formData" />
+    </div>
+    {{ formData }}
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps({
+  widgetList: Object
+});
+
+const { widgetList } = toRefs(props);
+
+const formData = ref({ pageVariable: {} });
+const formDataOperation = {
+  get: (key) => {
+    return formData.value.pageVariable[key];
+  },
+  set: (key, value) => {
+    formData.value.pageVariable[key] = value;
+  }
+};
+provide('formDataOperation', formDataOperation);
+</script>
+<style scoped lang="less">
+.hw-form {
+  min-height: 20px;
+  border: 1px dashed #ccc;
+  margin: 2px;
+  padding: 2px;
+  position: relative;
+
+  &:hover {
+    background-color: #0001;
+    border-color: #00afff;
+  }
+}
+</style>
+
+
+
diff --git a/src/views/tool/draggable/index.vue b/src/views/tool/draggable/index.vue
index 802171f..fdf0014 100644
--- a/src/views/tool/draggable/index.vue
+++ b/src/views/tool/draggable/index.vue
@@ -3,20 +3,32 @@
     <div class="left-box">
       <div class="model" :style="`display:${isDrag?'inline-block':'none'}`">
       </div>
-      <draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }"
-                 :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
-        <template #item="{ element }">
-          <element-mini :option="element" @dblclick.stop="addElement(element)" />
-        </template>
-      </draggable>
+      <el-tabs v-model="activeName" class="demo-tabs" stretch>
+        <el-tab-pane label="组件列表" name="first">
+          <draggable :list="dragList" ghost-class="ghost" :force-fallback="true"
+                     :group="{ name: 'list', pull: 'clone' }"
+                     :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
+            <template #item="{ element }">
+              <element-mini :option="element" @dblclick.stop="addElement(element)" />
+            </template>
+          </draggable>
+        </el-tab-pane>
+        <el-tab-pane label="模板列表" name="second">Config</el-tab-pane>
+        <el-tab-pane label="数据（）" name="three">
+          <div class="dataBox">
+            <div>{{ dragList }}</div>
+            <div>-------</div>
+            <div>{{ formData }}</div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
 
-      <div class="dataBox">
-        <div>{{ dragList }}</div>
-        <div>----</div>
-        <div>{{ formData }}</div>
-      </div>
     </div>
     <div class="right-box">
+      <div class="toolbar">
+        <el-button type="primary" :icon="View" @click="viewForm">预览</el-button>
+
+      </div>
       <nested-draggable :tasks="widgetList" style="height: 100%;" :formData="formData" />
     </div>
     <div class="option-box">
@@ -28,15 +40,28 @@
         <div>{{ widgetList }}</div>
       </div>
     </div>
+    <el-dialog
+      v-model="viewDialogVisible"
+      fullscreen
+    >
+      <form-board :widgetList="widgetList" />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="viewDialogVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
+import { View } from '@element-plus/icons-vue';
 import { reactive, ref, provide } from 'vue';
 import draggable from 'vuedraggable';
 import optionFrom from './option/optionForm.vue';
+import { v4 as getUuid } from 'uuid';
 import nestedDraggable from './nest.vue';
 import elementMini from './element-mini.vue';
-import { v4 as getUuid } from 'uuid';
+import formBoard from './formBoard.vue';
 
 interface type {
   name: string,
@@ -57,11 +82,23 @@ provide('getSelectUuid', getSelectUuid);
 
 
 const formData = ref({});
+const activeName = ref('first');
+const viewDialogVisible = ref(false);
 const dragList = [
   {
     type: 'hw-form',
     isContainer: true,
-    options: { name: '表单', labelWidth: '120px', formData: {} },
+    options: {
+      name: '表单',
+      labelWidth: '120px',
+      formData: {},
+      isReset: false,
+      isResetBottom: false,
+      isSubmitBottom: true,
+      submitBottomName: '提交',
+      resetBottomName: '重置',
+      submitFunction: ''
+    },
     tasks: [],
     name: '表单',
     id: 0
@@ -69,12 +106,24 @@ const dragList = [
   {
     type: 'hw-input',
     isContainer: false,
-    options: { name: '单行文本', type: 'text', key: '' },
+    options: { name: '单行文本', type: 'text', key: '', disabled: false, required: false },
     name: '单行文本',
     id: 1
   },
-  { type: 'hw-input', isContainer: false, options: { name: '密码文本', type: 'password' }, name: '密码文本', id: 2 },
-  { type: 'hw-input', isContainer: false, options: { name: '多行文本', type: 'textarea' }, name: '多行文本', id: 3 },
+  {
+    type: 'hw-input',
+    isContainer: false,
+    options: { name: '密码文本', type: 'password', key: '', disabled: false, required: false },
+    name: '密码文本',
+    id: 2
+  },
+  {
+    type: 'hw-input',
+    isContainer: false,
+    options: { name: '多行文本', type: 'textarea', key: '', disabled: false, required: false },
+    name: '多行文本',
+    id: 3
+  },
   { type: 'hw-input-number', isContainer: false, options: { name: '计数器', step: 2 }, name: '计数器', id: 4 },
   {
     type: 'hw-radio-group', isContainer: false,
@@ -95,9 +144,9 @@ function removeItemByUuid(arr, uuid) {
   });
 }
 
-const widgetList = reactive<type[]>([]);
+const widgetList = ref([]);
 const delFormListItem = (uuid) => {
-  removeItemByUuid(widgetList, uuid);
+  removeItemByUuid(widgetList.value, uuid);
 };
 
 provide('delFormListItem', delFormListItem);
@@ -115,9 +164,11 @@ const onStartLeft = (e) => {
 
 const addElement = (e) => {
   let element = onClone(e);
-  widgetList.push(element);
+  widgetList.value.push(element);
+};
+const viewForm = () => {
+  viewDialogVisible.value = true;
 };
-
 </script>
 <style scoped>
 .model {
@@ -153,6 +204,11 @@ const addElement = (e) => {
   &::-webkit-scrollbar {
     display: none;
   }
+
+  .toolbar {
+    width: 100%;
+    margin-bottom: 8px;
+  }
 }
 
 .option-box {
diff --git a/src/views/tool/draggable/option/functionDialog/getPageData.vue b/src/views/tool/draggable/option/functionDialog/getPageData.vue
new file mode 100644
index 0000000..a77b6dd
--- /dev/null
+++ b/src/views/tool/draggable/option/functionDialog/getPageData.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+    <el-form-item label="变量名称">
+      <el-input v-model="form.name" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+const form = ref({
+  name: ''
+});
+
+const onSubmit = () => {
+  return `console.log(${form.value.name});\n`;
+};
+
+
+defineExpose({ onSubmit });
+</script>
diff --git a/src/views/tool/draggable/option/functionDialog/log.vue b/src/views/tool/draggable/option/functionDialog/log.vue
new file mode 100644
index 0000000..a77b6dd
--- /dev/null
+++ b/src/views/tool/draggable/option/functionDialog/log.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+    <el-form-item label="变量名称">
+      <el-input v-model="form.name" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+const form = ref({
+  name: ''
+});
+
+const onSubmit = () => {
+  return `console.log(${form.value.name});\n`;
+};
+
+
+defineExpose({ onSubmit });
+</script>
diff --git a/src/views/tool/draggable/option/functionDialog/request.vue b/src/views/tool/draggable/option/functionDialog/request.vue
new file mode 100644
index 0000000..6c0de79
--- /dev/null
+++ b/src/views/tool/draggable/option/functionDialog/request.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+    <el-form-item label="请求地址">
+      <el-input v-model="form.url" />
+    </el-form-item>
+    <el-form-item label="请求方法">
+      <el-select
+        v-model="form.method"
+      >
+        <el-option
+          label="get"
+          value="get"
+        />
+        <el-option
+          label="post"
+          value="post"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="请求参数" v-if="form.method === 'get'">
+      <el-input v-model="form.params" />
+    </el-form-item>
+    <el-form-item label="请求参数" v-if="form.method === 'post'">
+      <el-input v-model="form.data" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+const form = ref({
+  url: '',
+  method: 'get',
+  params: '',
+  data: ''
+});
+
+const onSubmit = () => {
+
+};
+
+
+defineExpose({ onSubmit });
+</script>
diff --git a/src/views/tool/draggable/option/functionDialog/setPageData.vue b/src/views/tool/draggable/option/functionDialog/setPageData.vue
new file mode 100644
index 0000000..a77b6dd
--- /dev/null
+++ b/src/views/tool/draggable/option/functionDialog/setPageData.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+    <el-form-item label="变量名称">
+      <el-input v-model="form.name" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+const form = ref({
+  name: ''
+});
+
+const onSubmit = () => {
+  return `console.log(${form.value.name});\n`;
+};
+
+
+defineExpose({ onSubmit });
+</script>
diff --git a/src/views/tool/draggable/option/functionType.vue b/src/views/tool/draggable/option/functionType.vue
new file mode 100644
index 0000000..2e6f062
--- /dev/null
+++ b/src/views/tool/draggable/option/functionType.vue
@@ -0,0 +1,123 @@
+<script lang="ts">
+import log from './functionDialog/log.vue';
+import request from './functionDialog/request.vue';
+import setPageData from './functionDialog/setPageData.vue';
+import getPageData from './functionDialog/getPageData.vue';
+
+export default {
+  name: 'function-type',
+  components: {
+    log,
+    request,
+    setPageData,
+    getPageData
+  }
+};
+</script>
+<template>
+  <el-form-item>
+    <template #label>
+      <div style="line-height: 20px">
+        <el-text>{{ itemName }}</el-text>
+        <el-tooltip placement="top">
+          <template #content>
+            预定义参数：<br>
+            formData:表单数据<br>
+            request:网络请求<br>
+            formDataOperation:页面变量存储<br>
+            包含get,set两个方法<br>
+          </template>
+          <el-icon style="margin-left: 4px">
+            <Warning />
+          </el-icon>
+        </el-tooltip>
+      </div>
+    </template>
+    <el-button @click="dialogVisible = true">编辑方法</el-button>
+    <el-button @click="addDialogVisible = true">添加</el-button>
+  </el-form-item>
+  <el-dialog v-model="dialogVisible" title="编辑方法" width="500">
+    <div class="code">(formData, request, formDataOperation: {get, set} )=>{</div>
+    <el-input v-model="formData[keyValue]" type="textarea" />
+    <div class="code">}</div>
+    <template #footer>
+      <div>
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="addDialogVisible"
+    title="选择方法"
+    width="500"
+  >
+    <el-button type="primary" @click="addFunction('log')">打印变量</el-button>
+    <el-button type="primary" @click="addFunction('request')">网络请求</el-button>
+    <el-button type="primary" @click="addFunction('setPageData')">设置页面变量</el-button>
+    <el-button type="primary" @click="addFunction('getPageData')">读取页面变量</el-button>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="addDialogVisible = false">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="addFunctionDialogVisible"
+    title="添加方法"
+    width="500"
+  >
+    <component :is="addFunctionType" ref="addFunctionRef" v-if="addFunctionDialogVisible" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="addFunctionSubmit" type="primary">确定</el-button>
+        <el-button @click="addFunctionDialogVisible = false">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+  formData: String,
+  keyValue: String,
+  itemName: String
+});
+
+const { formData, keyValue, itemName } = toRefs(props);
+const dialogVisible = ref(false);
+const addDialogVisible = ref(false);
+const addFunctionDialogVisible = ref(false);
+const addFunctionType = ref('');
+const addFunctionRef = ref();
+
+
+const addFunction = (e) => {
+  addFunctionType.value = e;
+  addFunctionDialogVisible.value = true;
+};
+
+const addFunctionSubmit = () => {
+  const value = addFunctionRef.value.onSubmit() || '';
+  formData.value[keyValue.value] += value;
+  addDialogVisible.value = false;
+  addFunctionDialogVisible.value = false;
+};
+
+</script>
+<style scoped lang="less">
+.code {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  padding-left: 8px;
+  background-color: #0001;
+  user-select: text;
+}
+</style>
+
+
+
diff --git a/src/views/tool/draggable/option/inputAreaType.vue b/src/views/tool/draggable/option/inputAreaType.vue
new file mode 100644
index 0000000..602b146
--- /dev/null
+++ b/src/views/tool/draggable/option/inputAreaType.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-form-item :label="itemName">
+    <el-input v-model="formData[keyValue]" type="textarea" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+  formData: String,
+  keyValue: String,
+  itemName: String
+});
+
+const { formData, keyValue, itemName } = toRefs(props);
+
+
+</script>
+<style scoped lang="less">
+</style>
+
+
+
diff --git a/src/views/tool/draggable/option/inputType.vue b/src/views/tool/draggable/option/inputType.vue
new file mode 100644
index 0000000..3774dfd
--- /dev/null
+++ b/src/views/tool/draggable/option/inputType.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-form-item :label="itemName">
+    <el-input v-model="formData[keyValue]" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+  formData: String,
+  keyValue: String,
+  itemName: String
+});
+
+const { formData, keyValue, itemName } = toRefs(props);
+
+
+</script>
+<style scoped lang="less">
+</style>
+
+
+
diff --git a/src/views/tool/draggable/option/optionForm.vue b/src/views/tool/draggable/option/optionForm.vue
index 161e388..1798a43 100644
--- a/src/views/tool/draggable/option/optionForm.vue
+++ b/src/views/tool/draggable/option/optionForm.vue
@@ -1,6 +1,26 @@
+<script lang="ts">
+
+import inputType from './inputType.vue';
+import inputAreaType from './inputAreaType.vue';
+import switchType from './switchType.vue';
+import functionType from './functionType.vue';
+
+export default {
+  name: 'option-form',
+  components: {
+    inputType,
+    inputAreaType,
+    switchType,
+    functionType
+  }
+};
+</script>
 <template>
-  <div class="tool">
-  </div>
+  <el-form :model="formData" label-width="auto" style="max-width: 600px">
+    <div v-for="i in Object.keys(formData)" :key="i">
+      <component :is="getType(i)" :formData="formData" :keyValue="i" :itemName="nameEnum[i]||''" />
+    </div>
+  </el-form>
 </template>
 <script lang="ts" setup>
 import { watch } from 'vue';
@@ -9,10 +29,45 @@ const props = defineProps({
   formData: Object
 });
 
+const typeEnum = {
+  inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName'],
+  inputAreaType: [],
+  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled'],
+  functionType: ['submitFunction']
+};
+const nameEnum = {
+  name: '组件名称',
+  key: '组件key值',
+  labelWidth: '标签长度',
+  submitBottomName: '确定按钮名称',
+  resetBottomName: '重置按钮名称',
+  isReset: '是否可重置',
+  isResetBottom: '是否显示重置按钮',
+  isSubmitBottom: '是否显示确定按钮',
+  disabled: '是否禁用',
+  submitFunction: '提交回调函数'
+};
+const getType = (e) => {
+  let res = '';
+  Object.keys(typeEnum).forEach((key) => {
+    if (typeEnum[key].includes(e)) {
+      res = key;
+    }
+  });
+  console.log(res);
+  return res;
+};
+
+
 const { formData } = toRefs(props);
 watch(formData, e => {
   console.log(formData.value);
 });
+
+const onSubmit = () => {
+  console.log('submit!');
+};
+
 </script>
 <style scoped lang="less">
 </style>
diff --git a/src/views/tool/draggable/option/switchType.vue b/src/views/tool/draggable/option/switchType.vue
new file mode 100644
index 0000000..e325898
--- /dev/null
+++ b/src/views/tool/draggable/option/switchType.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-form-item :label="itemName">
+    <el-switch v-model="formData[keyValue]" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+  formData: String,
+  keyValue: String,
+  itemName: String
+});
+
+const { formData, keyValue, itemName } = toRefs(props);
+
+
+</script>
+<style scoped lang="less">
+</style>
+
+
+
diff --git a/src/views/tool/draggable/viewElements/hw-form-view.vue b/src/views/tool/draggable/viewElements/hw-form-view.vue
new file mode 100644
index 0000000..4f9bde2
--- /dev/null
+++ b/src/views/tool/draggable/viewElements/hw-form-view.vue
@@ -0,0 +1,62 @@
+<script lang="ts">
+import hwInputView from './hw-input-view.vue';
+
+export default {
+  name: 'hw-form-view',
+  components: {
+    hwInputView
+  }
+};
+</script>
+
+<template>
+  <div>
+    <el-form :model="formData[options.key || ('form-'+options.uuid)]">
+      <div v-for="i in tasks">
+        <component :is="i.type+'-view'" :options="i.options" :tasks="i.tasks"
+                   :formData="formData[options.key || ('form-'+options.uuid)]" />
+      </div>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit" v-if="options.isSubmitBottom">{{ options.submitBottomName }}
+        </el-button>
+        <el-button v-if="options.isResetBottom" @click="onReset">{{ options.resetBottomName }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import request from '@/utils/request';
+
+
+const props = defineProps({
+  options: Object,
+  tasks: Array,
+  formData: Object
+});
+
+const { options, tasks, formData } = toRefs(props);
+const formDataOperation = inject('formDataOperation');
+
+onBeforeMount(() => {
+  formData.value[options.value.key || ('form-' + options.value.uuid)] = {};
+});
+
+const onSubmit = () => {
+  try {
+    const submitFunction = new Function('formData', 'request','formDataOperation', options.value.submitFunction);
+    submitFunction(formData.value[options.value.key || ('form-' + options.value.uuid)], request,formDataOperation);
+  } catch (e) {
+    console.log(e);
+  }
+};
+const onReset = () => {
+  formData.value[options.value.key || ('form-' + options.value.uuid)] = {};
+};
+</script>
+<style scoped lang="less">
+
+</style>
+
+
+
diff --git a/src/views/tool/draggable/viewElements/hw-input-view.vue b/src/views/tool/draggable/viewElements/hw-input-view.vue
new file mode 100644
index 0000000..877fc2d
--- /dev/null
+++ b/src/views/tool/draggable/viewElements/hw-input-view.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-form-item :label="options.name" :required="options.required">
+      <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled" />
+    </el-form-item>
+  </div>
+</template>
+<script lang="ts" setup>
+
+defineOptions({
+  name: 'hw-input-view'
+});
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+const { options, formData } = toRefs(props);
+</script>
+<style scoped lang="less">
+</style>
+
+
+