diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index 4daf447..324dfe5 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -550,3 +550,19 @@
   color: var(--white) !important;
   background: var(--selecthover) !important;
 }
+
+.addFilter span {
+  display: inline-block;
+  width: 100%;
+  border: 1px dashed var(--white) !important;
+  height: 31px;
+  line-height: 31px;
+  cursor: pointer;
+  color: var(--white) !important;
+}
+.icon-jia {
+  color: var(--white) !important;
+}
+.condition .sign {
+  color: var(--white) !important;
+}
\ No newline at end of file

diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index 4daf447..324dfe5 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -550,3 +550,19 @@
   color: var(--white) !important;
   background: var(--selecthover) !important;
 }
+
+.addFilter span {
+  display: inline-block;
+  width: 100%;
+  border: 1px dashed var(--white) !important;
+  height: 31px;
+  line-height: 31px;
+  cursor: pointer;
+  color: var(--white) !important;
+}
+.icon-jia {
+  color: var(--white) !important;
+}
+.condition .sign {
+  color: var(--white) !important;
+}
\ No newline at end of file
diff --git a/src/components/shujulvwang/dataBrowsingQuery.vue b/src/components/shujulvwang/dataBrowsingQuery.vue
index 9acf6eb..562e52f 100644
--- a/src/components/shujulvwang/dataBrowsingQuery.vue
+++ b/src/components/shujulvwang/dataBrowsingQuery.vue
@@ -373,7 +373,7 @@
               end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
               start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
               picker.$emit("pick", [start, end]);
-            },
+            }
           },
           {
             text: "最近一个月",
@@ -387,7 +387,7 @@
               end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
               start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
               picker.$emit("pick", [start, end]);
-            },
+            }
           },
           {
             text: "最近三个月",
@@ -401,9 +401,9 @@
               end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
               start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
               picker.$emit("pick", [start, end]);
-            },
-          },
-        ],
+            }
+          }
+        ]
       },
       ruleForm: {
         dataPreviewLists: [
@@ -417,46 +417,46 @@
               dateColumn: [], //时间字段
               numberColumn: [], //查询字段
               sourcesField: [], //字段名称
-              symbolNum: [], //类型
+              symbolNum: [] //类型
             },
             queryConditions: [
               {
                 name: "",
                 symbol: "",
                 value: "",
-                select: true,
-              },
-            ], //过滤条件
-          },
-        ],
+                select: true
+              }
+            ] //过滤条件
+          }
+        ]
       },
       symbolNum1: [
         {
           label: ">",
-          value: ">",
+          value: ">"
         },
         {
           label: ">=",
-          value: ">=",
+          value: ">="
         },
         {
           label: "<",
-          value: "<",
+          value: "<"
         },
         {
           label: "<=",
-          value: "<=",
+          value: "<="
         },
         {
           label: "=",
-          value: "=",
-        },
+          value: "="
+        }
       ],
       symbolNum2: [
         {
           label: "=",
-          value: "=",
-        },
+          value: "="
+        }
       ],
       rules: {
         dataPreviewLists: [
@@ -467,53 +467,53 @@
                   {
                     required: true,
                     message: "请选择字段名称",
-                    trigger: "change",
-                  },
+                    trigger: "change"
+                  }
                 ], //检测字段
                 minVal: [
                   {
                     required: true,
                     message: "请输入小于阈值",
-                    trigger: "blur",
-                  },
+                    trigger: "blur"
+                  }
                 ], //小于阈值
                 maxVal: [
                   {
                     required: true,
                     message: "请输入大于阈值",
-                    trigger: "blur",
-                  },
-                ], //大于阈值
-              },
+                    trigger: "blur"
+                  }
+                ] //大于阈值
+              }
             ],
             queryColumnNames: [
               {
                 required: true,
                 message: "请选择查询字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             timeColumnName: [
               {
                 required: true,
                 message: "请选择时间字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             tableName: [
               {
                 required: true,
                 message: "请选择数据表",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             dataSourceName: [
               {
                 required: true,
                 message: "请选择连接",
-                trigger: "change",
-              },
-            ],
+                trigger: "change"
+              }
+            ]
           },
           {
             queryConditions: [
@@ -522,56 +522,56 @@
                   {
                     required: true,
                     message: "请选择字段名称",
-                    trigger: "change",
-                  },
+                    trigger: "change"
+                  }
                 ], //检测字段
                 minVal: [
                   {
                     required: true,
                     message: "请输入小于阈值",
-                    trigger: "blur",
-                  },
+                    trigger: "blur"
+                  }
                 ], //小于阈值
                 maxVal: [
                   {
                     required: true,
                     message: "请输入大于阈值",
-                    trigger: "blur",
-                  },
-                ], //大于阈值
-              },
+                    trigger: "blur"
+                  }
+                ] //大于阈值
+              }
             ],
             queryColumnNames: [
               {
                 required: true,
                 message: "请选择查询字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             timeColumnName: [
               {
                 required: true,
                 message: "请选择时间字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             tableName: [
               {
                 required: true,
                 message: "请选择数据表",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             dataSourceName: [
               {
                 required: true,
                 message: "请选择连接",
-                trigger: "change",
-              },
-            ],
-          },
-        ],
-      },
+                trigger: "change"
+              }
+            ]
+          }
+        ]
+      }
     };
   },
   mixins: [project],
@@ -586,7 +586,7 @@
     // 获取内容
     this.getStorageId();
 
-    this.$nextTick(function () {
+    this.$nextTick(function() {
       setTimeout(() => {
         this.defaultDrawCanvas();
       }, 300);
@@ -609,7 +609,7 @@
       this.draw = false;
       // 数据回显
       let response = await this.getHttpDatas(this.nozzle.dataPreviewQueryById, {
-        id: row["id"],
+        id: row["id"]
       });
       response = response ? response : [];
       let queryCondition = JSON.parse(response["queryCondition"]);
@@ -628,7 +628,7 @@
       // 任务时间
       this.dates = [
         Date.parse(response.startTime),
-        Date.parse(response.endTime),
+        Date.parse(response.endTime)
       ];
 
       // 窗口复制按钮进行处理
@@ -643,7 +643,7 @@
       if (this.dates === null || this.dates === "") {
         this.$notify({
           type: "warning",
-          message: "请选择需要查询的时间段",
+          message: "请选择需要查询的时间段"
         });
         return;
       }
@@ -651,12 +651,12 @@
       if (this.ruleForm.dataPreviewLists.length === 0) {
         this.$notify({
           type: "warning",
-          message: "至少添加一组数据，进行浏览",
+          message: "至少添加一组数据，进行浏览"
         });
         return;
       }
 
-      this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(valid => {
         if (valid) {
           // this.loading = true;
 
@@ -688,7 +688,7 @@
         devisors,
         seriesFactorValue,
         devisorsShowOrHidd,
-        colorPump,
+        colorPump
       ] = [[], [], [], [], 0];
       //自定义色彩搭配
       let colors = [
@@ -702,7 +702,7 @@
         "#91d5ff",
         "#0050b3",
         "#10239e",
-        "#3366CC",
+        "#3366CC"
       ];
       for (let i = 0; i < 100; i++) {
         colors.push(randomColor());
@@ -724,29 +724,29 @@
             smooth: true,
             itemStyle: {
               normal: {
-                color: color,
-              },
+                color: color
+              }
             },
             areaStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: color + "E6",
+                    color: color + "E6"
                   },
                   {
                     offset: 0.6,
-                    color: color + "66",
+                    color: color + "66"
                   },
                   {
                     offset: 1,
-                    color: color,
-                  },
-                ]),
-              },
+                    color: color
+                  }
+                ])
+              }
             },
             smooth: true,
-            data: Object.values(vv),
+            data: Object.values(vv)
           });
 
           if (keys === 0 && Object.keys(values)[0] === ii) {
@@ -780,17 +780,17 @@
         title: {
           text: "",
           textStyle: {
-            color: "#333333", //标题文字颜色
+            color: "#1890fd80" //标题文字颜色
           },
           y: 15,
-          x: "center",
+          x: "center"
         },
         tooltip: {
-          trigger: "axis",
+          trigger: "axis"
         },
         grid: {
           x: 55,
-          x2: 25,
+          x2: 25
         },
         xAxis: {
           axisLine: {
@@ -798,18 +798,18 @@
             show: true,
             lineStyle: {
               type: "dashed", //设置x轴线条样式
-              color: "#ced0d1",
-            },
+              color: "#ced0d1"
+            }
           },
           axisLabel: {
             show: true,
             textStyle: {
               color: "#ced0d1", //更改坐标轴文字颜色
-              fontSize: 12, //更改坐标轴文字大小
-            },
+              fontSize: 12 //更改坐标轴文字大小
+            }
           },
           boundaryGap: false, //从x轴起点开始
-          data: xAxis,
+          data: xAxis
         },
         legend: {
           data: devisors,
@@ -818,40 +818,40 @@
           itemWidth: 15, // 设置宽度
           itemHeight: 15,
           textStyle: {
-            color: "#333", //图例文字颜色
+            color: "#333" //图例文字颜色
           },
           y: 20,
           selected: devisorsShowOrHidd,
           padding: [0, 30, 0, 0],
-          x: "center",
+          x: "center"
         },
         yAxis: {
           axisLine: {
             //y轴
             show: false,
             lineStyle: {
-              color: "#ced0d1",
-            },
+              color: "#ced0d1"
+            }
           },
           axisTick: {
             //y轴刻度线
-            show: false,
+            show: false
           },
           axisLabel: {
             show: true,
             textStyle: {
               color: "#ced0d1", //更改坐标轴文字颜色
-              fontSize: 12, //更改坐标轴文字大小
-            },
+              fontSize: 12 //更改坐标轴文字大小
+            }
           },
           name: "",
           splitLine: {
             show: true,
             lineStyle: {
               type: "dashed",
-              color: "#ced0d1",
-            },
-          },
+              color: "#ced0d1"
+            }
+          }
         },
         dataZoom: [
           {
@@ -860,18 +860,18 @@
             end: 15,
             height: 18,
             textStyle: {
-              color: "#ced0d1",
-            },
+              color: "#ced0d1"
+            }
           },
           {
             type: "inside",
             realtime: true,
             start: 0,
             height: 18,
-            end: 15,
-          },
+            end: 15
+          }
         ],
-        series: seriesFactorValue,
+        series: seriesFactorValue
       };
       myChart.clear();
       myChart.setOption(option);
@@ -884,7 +884,7 @@
       this.$nextTick(() => {
         // 不加延时,会出现获取不到dom的情况
         setTimeout(() => {
-          window.addEventListener("resize", function () {
+          window.addEventListener("resize", function() {
             that.$echarts.resize();
           });
         }, 100);
@@ -920,13 +920,13 @@
       // 连接列表渲染
 
       let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
-        dbType: "Relational",
+        dbType: "Relational"
       });
 
       let dataBase = [];
       for (let item of datas.values()) {
         dataBase.push({
-          value: item,
+          value: item
         });
       }
       this.datasSources = dataBase;
@@ -942,7 +942,7 @@
         {
           dataSourceName: val,
           pageSize: 999999,
-          pageNo: 1,
+          pageNo: 1
         }
       );
 
@@ -952,7 +952,7 @@
 
       for (let item of datas.list.values()) {
         dataBase.push({
-          value: item,
+          value: item
         });
       }
 
@@ -1002,7 +1002,7 @@
         this.nozzle.getDataStructureByTableName,
         {
           dataSourceName: dataSourceName,
-          tableName: tableName,
+          tableName: tableName
         }
       );
 
@@ -1021,7 +1021,7 @@
 
           newDatas.push({
             value: item["columnName"],
-            isStringL: item["columnName"] + "," + isString,
+            isStringL: item["columnName"] + "," + isString
           });
         }
 
@@ -1036,7 +1036,7 @@
         this.nozzle.getDataStructureByTableNameAndType,
         {
           dataSourceName: dataSourceName,
-          tableName: tableName,
+          tableName: tableName
         }
       );
       // 填充时间字段和查询字段
@@ -1054,7 +1054,7 @@
         for (const item of datas.values()) {
           newDevisor.push({
             label: devisor[item.toLowerCase()],
-            value: item,
+            value: item
           });
         }
         return newDevisor;
@@ -1128,7 +1128,7 @@
       cb(results);
     },
     createFilter(queryString) {
-      return (restaurant) => {
+      return restaurant => {
         return restaurant.value.indexOf(queryString) !== -1;
       };
     },
@@ -1141,7 +1141,7 @@
         name: "",
         symbol: "",
         value: "",
-        select: true,
+        select: true
       });
     },
     modelAdd() {
@@ -1157,15 +1157,15 @@
           dateColumn: [], //时间字段
           numberColumn: [], //查询字段
           sourcesField: [],
-          symbolNum: [],
+          symbolNum: []
         },
         queryConditions: [
           {
             name: "",
             symbol: "",
-            value: "",
-          },
-        ], //过滤条件
+            value: ""
+          }
+        ] //过滤条件
       });
 
       if (this.ruleForm.dataPreviewLists.length >= 2) {
@@ -1248,7 +1248,7 @@
       if (this.programme === "") {
         this.$notify({
           type: "warning",
-          message: "请将查询名称填写完整",
+          message: "请将查询名称填写完整"
         });
         return;
       }
@@ -1283,7 +1283,7 @@
       if (this.programme === "") {
         this.$notify({
           type: "warning",
-          message: "请将查询名称填写完整",
+          message: "请将查询名称填写完整"
         });
         return;
       }
@@ -1339,8 +1339,8 @@
       }
       this.drawChart([
         {
-          PN: keys,
-        },
+          PN: keys
+        }
       ]);
     },
     async getPlatform() {
@@ -1349,8 +1349,8 @@
       let res = await this.$http.get(this.nozzle.getProjectName);
       res = res.data ? res.data.data : "滤网";
       headTitle(res);
-    },
-  },
+    }
+  }
 };
 </script>
 <style>
@@ -1455,7 +1455,7 @@
         } */
 
 .icon-jia {
-  color: #fff;
+  color: var(--white) !important;
 }
 .aboutType {
   padding-left: 15px;
@@ -1501,4 +1501,4 @@
 .el-table .cell {
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>

diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index 4daf447..324dfe5 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -550,3 +550,19 @@
   color: var(--white) !important;
   background: var(--selecthover) !important;
 }
+
+.addFilter span {
+  display: inline-block;
+  width: 100%;
+  border: 1px dashed var(--white) !important;
+  height: 31px;
+  line-height: 31px;
+  cursor: pointer;
+  color: var(--white) !important;
+}
+.icon-jia {
+  color: var(--white) !important;
+}
+.condition .sign {
+  color: var(--white) !important;
+}
\ No newline at end of file
diff --git a/src/components/shujulvwang/dataBrowsingQuery.vue b/src/components/shujulvwang/dataBrowsingQuery.vue
index 9acf6eb..562e52f 100644
--- a/src/components/shujulvwang/dataBrowsingQuery.vue
+++ b/src/components/shujulvwang/dataBrowsingQuery.vue
@@ -373,7 +373,7 @@
               end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
               start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
               picker.$emit("pick", [start, end]);
-            },
+            }
           },
           {
             text: "最近一个月",
@@ -387,7 +387,7 @@
               end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
               start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
               picker.$emit("pick", [start, end]);
-            },
+            }
           },
           {
             text: "最近三个月",
@@ -401,9 +401,9 @@
               end = moment(end, "YYYY-MM-DD HH:mm:ss").valueOf();
               start = moment(start, "YYYY-MM-DD HH:mm:ss").valueOf();
               picker.$emit("pick", [start, end]);
-            },
-          },
-        ],
+            }
+          }
+        ]
       },
       ruleForm: {
         dataPreviewLists: [
@@ -417,46 +417,46 @@
               dateColumn: [], //时间字段
               numberColumn: [], //查询字段
               sourcesField: [], //字段名称
-              symbolNum: [], //类型
+              symbolNum: [] //类型
             },
             queryConditions: [
               {
                 name: "",
                 symbol: "",
                 value: "",
-                select: true,
-              },
-            ], //过滤条件
-          },
-        ],
+                select: true
+              }
+            ] //过滤条件
+          }
+        ]
       },
       symbolNum1: [
         {
           label: ">",
-          value: ">",
+          value: ">"
         },
         {
           label: ">=",
-          value: ">=",
+          value: ">="
         },
         {
           label: "<",
-          value: "<",
+          value: "<"
         },
         {
           label: "<=",
-          value: "<=",
+          value: "<="
         },
         {
           label: "=",
-          value: "=",
-        },
+          value: "="
+        }
       ],
       symbolNum2: [
         {
           label: "=",
-          value: "=",
-        },
+          value: "="
+        }
       ],
       rules: {
         dataPreviewLists: [
@@ -467,53 +467,53 @@
                   {
                     required: true,
                     message: "请选择字段名称",
-                    trigger: "change",
-                  },
+                    trigger: "change"
+                  }
                 ], //检测字段
                 minVal: [
                   {
                     required: true,
                     message: "请输入小于阈值",
-                    trigger: "blur",
-                  },
+                    trigger: "blur"
+                  }
                 ], //小于阈值
                 maxVal: [
                   {
                     required: true,
                     message: "请输入大于阈值",
-                    trigger: "blur",
-                  },
-                ], //大于阈值
-              },
+                    trigger: "blur"
+                  }
+                ] //大于阈值
+              }
             ],
             queryColumnNames: [
               {
                 required: true,
                 message: "请选择查询字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             timeColumnName: [
               {
                 required: true,
                 message: "请选择时间字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             tableName: [
               {
                 required: true,
                 message: "请选择数据表",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             dataSourceName: [
               {
                 required: true,
                 message: "请选择连接",
-                trigger: "change",
-              },
-            ],
+                trigger: "change"
+              }
+            ]
           },
           {
             queryConditions: [
@@ -522,56 +522,56 @@
                   {
                     required: true,
                     message: "请选择字段名称",
-                    trigger: "change",
-                  },
+                    trigger: "change"
+                  }
                 ], //检测字段
                 minVal: [
                   {
                     required: true,
                     message: "请输入小于阈值",
-                    trigger: "blur",
-                  },
+                    trigger: "blur"
+                  }
                 ], //小于阈值
                 maxVal: [
                   {
                     required: true,
                     message: "请输入大于阈值",
-                    trigger: "blur",
-                  },
-                ], //大于阈值
-              },
+                    trigger: "blur"
+                  }
+                ] //大于阈值
+              }
             ],
             queryColumnNames: [
               {
                 required: true,
                 message: "请选择查询字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             timeColumnName: [
               {
                 required: true,
                 message: "请选择时间字段",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             tableName: [
               {
                 required: true,
                 message: "请选择数据表",
-                trigger: "change",
-              },
+                trigger: "change"
+              }
             ],
             dataSourceName: [
               {
                 required: true,
                 message: "请选择连接",
-                trigger: "change",
-              },
-            ],
-          },
-        ],
-      },
+                trigger: "change"
+              }
+            ]
+          }
+        ]
+      }
     };
   },
   mixins: [project],
@@ -586,7 +586,7 @@
     // 获取内容
     this.getStorageId();
 
-    this.$nextTick(function () {
+    this.$nextTick(function() {
       setTimeout(() => {
         this.defaultDrawCanvas();
       }, 300);
@@ -609,7 +609,7 @@
       this.draw = false;
       // 数据回显
       let response = await this.getHttpDatas(this.nozzle.dataPreviewQueryById, {
-        id: row["id"],
+        id: row["id"]
       });
       response = response ? response : [];
       let queryCondition = JSON.parse(response["queryCondition"]);
@@ -628,7 +628,7 @@
       // 任务时间
       this.dates = [
         Date.parse(response.startTime),
-        Date.parse(response.endTime),
+        Date.parse(response.endTime)
       ];
 
       // 窗口复制按钮进行处理
@@ -643,7 +643,7 @@
       if (this.dates === null || this.dates === "") {
         this.$notify({
           type: "warning",
-          message: "请选择需要查询的时间段",
+          message: "请选择需要查询的时间段"
         });
         return;
       }
@@ -651,12 +651,12 @@
       if (this.ruleForm.dataPreviewLists.length === 0) {
         this.$notify({
           type: "warning",
-          message: "至少添加一组数据，进行浏览",
+          message: "至少添加一组数据，进行浏览"
         });
         return;
       }
 
-      this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(valid => {
         if (valid) {
           // this.loading = true;
 
@@ -688,7 +688,7 @@
         devisors,
         seriesFactorValue,
         devisorsShowOrHidd,
-        colorPump,
+        colorPump
       ] = [[], [], [], [], 0];
       //自定义色彩搭配
       let colors = [
@@ -702,7 +702,7 @@
         "#91d5ff",
         "#0050b3",
         "#10239e",
-        "#3366CC",
+        "#3366CC"
       ];
       for (let i = 0; i < 100; i++) {
         colors.push(randomColor());
@@ -724,29 +724,29 @@
             smooth: true,
             itemStyle: {
               normal: {
-                color: color,
-              },
+                color: color
+              }
             },
             areaStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: color + "E6",
+                    color: color + "E6"
                   },
                   {
                     offset: 0.6,
-                    color: color + "66",
+                    color: color + "66"
                   },
                   {
                     offset: 1,
-                    color: color,
-                  },
-                ]),
-              },
+                    color: color
+                  }
+                ])
+              }
             },
             smooth: true,
-            data: Object.values(vv),
+            data: Object.values(vv)
           });
 
           if (keys === 0 && Object.keys(values)[0] === ii) {
@@ -780,17 +780,17 @@
         title: {
           text: "",
           textStyle: {
-            color: "#333333", //标题文字颜色
+            color: "#1890fd80" //标题文字颜色
           },
           y: 15,
-          x: "center",
+          x: "center"
         },
         tooltip: {
-          trigger: "axis",
+          trigger: "axis"
         },
         grid: {
           x: 55,
-          x2: 25,
+          x2: 25
         },
         xAxis: {
           axisLine: {
@@ -798,18 +798,18 @@
             show: true,
             lineStyle: {
               type: "dashed", //设置x轴线条样式
-              color: "#ced0d1",
-            },
+              color: "#ced0d1"
+            }
           },
           axisLabel: {
             show: true,
             textStyle: {
               color: "#ced0d1", //更改坐标轴文字颜色
-              fontSize: 12, //更改坐标轴文字大小
-            },
+              fontSize: 12 //更改坐标轴文字大小
+            }
           },
           boundaryGap: false, //从x轴起点开始
-          data: xAxis,
+          data: xAxis
         },
         legend: {
           data: devisors,
@@ -818,40 +818,40 @@
           itemWidth: 15, // 设置宽度
           itemHeight: 15,
           textStyle: {
-            color: "#333", //图例文字颜色
+            color: "#333" //图例文字颜色
           },
           y: 20,
           selected: devisorsShowOrHidd,
           padding: [0, 30, 0, 0],
-          x: "center",
+          x: "center"
         },
         yAxis: {
           axisLine: {
             //y轴
             show: false,
             lineStyle: {
-              color: "#ced0d1",
-            },
+              color: "#ced0d1"
+            }
           },
           axisTick: {
             //y轴刻度线
-            show: false,
+            show: false
           },
           axisLabel: {
             show: true,
             textStyle: {
               color: "#ced0d1", //更改坐标轴文字颜色
-              fontSize: 12, //更改坐标轴文字大小
-            },
+              fontSize: 12 //更改坐标轴文字大小
+            }
           },
           name: "",
           splitLine: {
             show: true,
             lineStyle: {
               type: "dashed",
-              color: "#ced0d1",
-            },
-          },
+              color: "#ced0d1"
+            }
+          }
         },
         dataZoom: [
           {
@@ -860,18 +860,18 @@
             end: 15,
             height: 18,
             textStyle: {
-              color: "#ced0d1",
-            },
+              color: "#ced0d1"
+            }
           },
           {
             type: "inside",
             realtime: true,
             start: 0,
             height: 18,
-            end: 15,
-          },
+            end: 15
+          }
         ],
-        series: seriesFactorValue,
+        series: seriesFactorValue
       };
       myChart.clear();
       myChart.setOption(option);
@@ -884,7 +884,7 @@
       this.$nextTick(() => {
         // 不加延时,会出现获取不到dom的情况
         setTimeout(() => {
-          window.addEventListener("resize", function () {
+          window.addEventListener("resize", function() {
             that.$echarts.resize();
           });
         }, 100);
@@ -920,13 +920,13 @@
       // 连接列表渲染
 
       let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
-        dbType: "Relational",
+        dbType: "Relational"
       });
 
       let dataBase = [];
       for (let item of datas.values()) {
         dataBase.push({
-          value: item,
+          value: item
         });
       }
       this.datasSources = dataBase;
@@ -942,7 +942,7 @@
         {
           dataSourceName: val,
           pageSize: 999999,
-          pageNo: 1,
+          pageNo: 1
         }
       );
 
@@ -952,7 +952,7 @@
 
       for (let item of datas.list.values()) {
         dataBase.push({
-          value: item,
+          value: item
         });
       }
 
@@ -1002,7 +1002,7 @@
         this.nozzle.getDataStructureByTableName,
         {
           dataSourceName: dataSourceName,
-          tableName: tableName,
+          tableName: tableName
         }
       );
 
@@ -1021,7 +1021,7 @@
 
           newDatas.push({
             value: item["columnName"],
-            isStringL: item["columnName"] + "," + isString,
+            isStringL: item["columnName"] + "," + isString
           });
         }
 
@@ -1036,7 +1036,7 @@
         this.nozzle.getDataStructureByTableNameAndType,
         {
           dataSourceName: dataSourceName,
-          tableName: tableName,
+          tableName: tableName
         }
       );
       // 填充时间字段和查询字段
@@ -1054,7 +1054,7 @@
         for (const item of datas.values()) {
           newDevisor.push({
             label: devisor[item.toLowerCase()],
-            value: item,
+            value: item
           });
         }
         return newDevisor;
@@ -1128,7 +1128,7 @@
       cb(results);
     },
     createFilter(queryString) {
-      return (restaurant) => {
+      return restaurant => {
         return restaurant.value.indexOf(queryString) !== -1;
       };
     },
@@ -1141,7 +1141,7 @@
         name: "",
         symbol: "",
         value: "",
-        select: true,
+        select: true
       });
     },
     modelAdd() {
@@ -1157,15 +1157,15 @@
           dateColumn: [], //时间字段
           numberColumn: [], //查询字段
           sourcesField: [],
-          symbolNum: [],
+          symbolNum: []
         },
         queryConditions: [
           {
             name: "",
             symbol: "",
-            value: "",
-          },
-        ], //过滤条件
+            value: ""
+          }
+        ] //过滤条件
       });
 
       if (this.ruleForm.dataPreviewLists.length >= 2) {
@@ -1248,7 +1248,7 @@
       if (this.programme === "") {
         this.$notify({
           type: "warning",
-          message: "请将查询名称填写完整",
+          message: "请将查询名称填写完整"
         });
         return;
       }
@@ -1283,7 +1283,7 @@
       if (this.programme === "") {
         this.$notify({
           type: "warning",
-          message: "请将查询名称填写完整",
+          message: "请将查询名称填写完整"
         });
         return;
       }
@@ -1339,8 +1339,8 @@
       }
       this.drawChart([
         {
-          PN: keys,
-        },
+          PN: keys
+        }
       ]);
     },
     async getPlatform() {
@@ -1349,8 +1349,8 @@
       let res = await this.$http.get(this.nozzle.getProjectName);
       res = res.data ? res.data.data : "滤网";
       headTitle(res);
-    },
-  },
+    }
+  }
 };
 </script>
 <style>
@@ -1455,7 +1455,7 @@
         } */
 
 .icon-jia {
-  color: #fff;
+  color: var(--white) !important;
 }
 .aboutType {
   padding-left: 15px;
@@ -1501,4 +1501,4 @@
 .el-table .cell {
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/shujulvwang/timeSeriesPrediction.vue b/src/components/shujulvwang/timeSeriesPrediction.vue
index 45d5b3e..1314e53 100644
--- a/src/components/shujulvwang/timeSeriesPrediction.vue
+++ b/src/components/shujulvwang/timeSeriesPrediction.vue
@@ -1,35 +1,74 @@
 <!-- 时序预测 -->
 <template>
-  <div id='timeSeiesPrediction' class="tab">
+  <div id="timeSeiesPrediction" class="tab">
     <!-- 搜索条件 -->
     <div class="searchCondition">
-      <el-form status-icon :model="ruleForm" :rules="rules" ref="ruleForm" label-width='auto' class="demo-ruleForm">
-        <div class='condition' :style='{height:conditionHeight}'
-          v-for='(parentItem,parentIndex) in ruleForm.dataPreviewLists' :key='parentIndex'>
+      <el-form
+        status-icon
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="auto"
+        class="demo-ruleForm"
+      >
+        <div
+          class="condition"
+          :style="{ height: conditionHeight }"
+          v-for="(parentItem, parentIndex) in ruleForm.dataPreviewLists"
+          :key="parentIndex"
+        >
           <el-row>
-            <el-col :span='5' class="p-r-10">
-              <el-form-item label="连接名" :prop="'dataPreviewLists.' + parentIndex + '.dataSourceName'">
-                <el-select @change="dataSourceChange" v-model="parentItem.dataSourceName" placeholder="请选择连接">
-                  <el-option v-for='(item,index) in datasSources' :key='index+99' :label="item.value"
-                    :value="item.value">
+            <el-col :span="5" class="p-r-10">
+              <el-form-item
+                label="连接名"
+                :prop="'dataPreviewLists.' + parentIndex + '.dataSourceName'"
+              >
+                <el-select
+                  @change="dataSourceChange"
+                  v-model="parentItem.dataSourceName"
+                  placeholder="请选择连接"
+                >
+                  <el-option
+                    v-for="(item, index) in datasSources"
+                    :key="index + 99"
+                    :label="item.value"
+                    :value="item.value"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
 
-            <el-col :span='5' class="p-r-10">
-              <el-form-item label="数据表名" :prop="'dataPreviewLists.' + parentIndex + '.tableName'">
-                <el-autocomplete @select='dataSourceTable' v-model="parentItem.tableName"
-                  :fetch-suggestions="querySearch" placeholder="请选择数据表">
+            <el-col :span="5" class="p-r-10">
+              <el-form-item
+                label="数据表名"
+                :prop="'dataPreviewLists.' + parentIndex + '.tableName'"
+              >
+                <el-autocomplete
+                  @select="dataSourceTable"
+                  v-model="parentItem.tableName"
+                  :fetch-suggestions="querySearch"
+                  placeholder="请选择数据表"
+                >
                 </el-autocomplete>
               </el-form-item>
             </el-col>
 
-            <el-col :span='5' class="p-r-10">
-              <el-form-item label="时序字段" :prop="'dataPreviewLists.' + parentIndex + '.queryColumnName'">
-                <el-select v-model="parentItem.queryColumnName" placeholder="请选择时序字段">
-                  <el-option v-for='(item,index) in parentItem.datas.numberColumn' :key='item.value' :label="item.label"
-                    :value="item.value">
+            <el-col :span="5" class="p-r-10">
+              <el-form-item
+                label="时序字段"
+                :prop="'dataPreviewLists.' + parentIndex + '.queryColumnName'"
+              >
+                <el-select
+                  v-model="parentItem.queryColumnName"
+                  placeholder="请选择时序字段"
+                >
+                  <el-option
+                    v-for="(item, index) in parentItem.datas.numberColumn"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -37,1018 +76,1154 @@
           </el-row>
 
           <el-row>
-
-            <el-col :span='5' class="p-r-10">
+            <el-col :span="5" class="p-r-10">
               <el-form-item label="时间字段">
-                <el-select v-model="parentItem.timeColumnName" placeholder="请选择时间字段">
-                  <el-option v-for='(item,index) in parentItem.datas.dateColumn' :key='item.value' :label="item.label"
-                    :value="item.value">
+                <el-select
+                  v-model="parentItem.timeColumnName"
+                  placeholder="请选择时间字段"
+                >
+                  <el-option
+                    v-for="(item, index) in parentItem.datas.dateColumn"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span='10' class="p-r-10">
+            <el-col :span="10" class="p-r-10">
               <el-form-item label="时间范围">
-                <el-date-picker v-model="dates" type="datetimerange" :picker-options="pickerOptions" :editable="false"
-                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:MM:ss"
-                  align="right">
+                <el-date-picker
+                  v-model="dates"
+                  type="datetimerange"
+                  :picker-options="pickerOptions"
+                  :editable="false"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd HH:MM:ss"
+                  align="right"
+                >
                 </el-date-picker>
               </el-form-item>
             </el-col>
           </el-row>
 
           <!-- 字段名称 - 过滤条件 -->
-          <el-row v-for='(items,indexs) in parentItem.queryConditions' :key='indexs+999'>
-            <el-col :span='4' class="p-r-10">
+          <el-row
+            v-for="(items, indexs) in parentItem.queryConditions"
+            :key="indexs + 999"
+          >
+            <el-col :span="4" class="p-r-10">
               <el-form-item label="过滤条件">
-                <el-select v-model="items.name" placeholder="请选择字段名称" @change="fieldNameChange"
-                  @visible-change='fieldNameFocus(indexs)'>
-                  <el-option v-for='(item,index) in parentItem.datas.sourcesField' :key='item.value' :label="item.value"
-                    :value="item.isStringL">
+                <el-select
+                  v-model="items.name"
+                  placeholder="请选择字段名称"
+                  @change="fieldNameChange"
+                  @visible-change="fieldNameFocus(indexs)"
+                >
+                  <el-option
+                    v-for="(item, index) in parentItem.datas.sourcesField"
+                    :key="item.value"
+                    :label="item.value"
+                    :value="item.isStringL"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
 
-            <el-col :span='3' class="p-r-10">
-              <el-select v-model="items.symbol" style='line-height:40px' placeholder="类型">
-                <el-option v-for='(item,index) in parentItem.datas.symbolNum' :key='index' :label="item.label"
-                  :value="item.value">
+            <el-col :span="3" class="p-r-10">
+              <el-select
+                v-model="items.symbol"
+                style="line-height:40px"
+                placeholder="类型"
+              >
+                <el-option
+                  v-for="(item, index) in parentItem.datas.symbolNum"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                >
                 </el-option>
               </el-select>
             </el-col>
 
-            <el-col :span='3' style='margin-top:5px;'>
-              <el-input v-if='items.select' v-model.trim="items.value" placeholder="输入字段值"></el-input>
-              <el-date-picker v-if='!items.select' v-model="items.value" type="datetime" placeholder="选择字段值"
-                align="right" value-format="yyyy-MM-dd HH:mm:ss">
+            <el-col :span="3" style="margin-top:5px;">
+              <el-input
+                v-if="items.select"
+                v-model.trim="items.value"
+                placeholder="输入字段值"
+              ></el-input>
+              <el-date-picker
+                v-if="!items.select"
+                v-model="items.value"
+                type="datetime"
+                placeholder="选择字段值"
+                align="right"
+                value-format="yyyy-MM-dd HH:mm:ss"
+              >
               </el-date-picker>
             </el-col>
-            <el-col :span='1' class="addendumNames text-right">
-              <i @click='deleteAutoIcons("queryConditions",indexs)' class="iconfont icon-qiyong deleteIcon"></i>
+            <el-col :span="1" class="addendumNames text-right">
+              <i
+                @click="deleteAutoIcons('queryConditions', indexs)"
+                class="iconfont icon-qiyong deleteIcon"
+              ></i>
             </el-col>
-
           </el-row>
           <el-row>
-            <el-col :span='10' class="addFilter">
-              <span @click='filterCondition(parentIndex)'><i class="iconfont icon-jia"></i>
-                添加</span>
+            <el-col :span="10" class="addFilter">
+              <span @click="filterCondition(parentIndex)"
+                ><i class="iconfont icon-jia"></i> 添加</span
+              >
             </el-col>
-            <el-col :offset='1' :span='10'>
-              <el-button size='mini' type='primary' @click='getCharts("ruleForm")'>搜索</el-button>
+            <el-col :offset="1" :span="10">
+              <el-button
+                size="mini"
+                type="primary"
+                @click="getCharts('ruleForm')"
+                >搜索</el-button
+              >
 
-              <el-button size='mini'>保存</el-button>
+              <el-button size="mini">保存</el-button>
             </el-col>
           </el-row>
 
           <!-- 伸缩按钮 -->
-          <div class="telescopic" title='条件窗开关' @click='conditional'>
+          <div class="telescopic" title="条件窗开关" @click="conditional">
             <i :class="conditionIcon"></i>
           </div>
-
         </div>
       </el-form>
     </div>
 
     <!-- 预测条件 -->
     <div class="searchCondition ycSearch">
-      <el-form status-icon :model="ruleForms" :rules="rules" ref="ruleForms" label-width='auto' class="demo-ruleForm">
-        <div class='condition'>
+      <el-form
+        status-icon
+        :model="ruleForms"
+        :rules="rules"
+        ref="ruleForms"
+        label-width="auto"
+        class="demo-ruleForm"
+      >
+        <div class="condition">
           <el-row>
-            <el-col :span='5' class="p-r-10">
-              <el-form-item label="预测模型" prop='modelType'>
-                <el-select v-model="ruleForms.modelType" placeholder="请选择预测模型">
-                  <el-option v-for='(item,index) in models' :key='index+99' :label="item.value" :value="item.value">
+            <el-col :span="5" class="p-r-10">
+              <el-form-item label="预测模型" prop="modelType">
+                <el-select
+                  v-model="ruleForms.modelType"
+                  placeholder="请选择预测模型"
+                >
+                  <el-option
+                    v-for="(item, index) in models"
+                    :key="index + 99"
+                    :label="item.value"
+                    :value="item.value"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
 
-            <el-col :span='5' class="p-r-10">
-              <el-form-item label="验证比例" prop='scale'>
-
-                <el-input v-model.native.number="ruleForms.scale" placeholder="输入验证比例"></el-input>
+            <el-col :span="5" class="p-r-10">
+              <el-form-item label="验证比例" prop="scale">
+                <el-input
+                  v-model.native.number="ruleForms.scale"
+                  placeholder="输入验证比例"
+                ></el-input>
               </el-form-item>
             </el-col>
 
-            <el-col :span='5' class="p-r-10">
-              <el-form-item label="周期长度" prop='trainCycle'>
-
-                <el-input type='number' v-model.native.number="ruleForms.trainCycle" placeholder="输入周期长度">
+            <el-col :span="5" class="p-r-10">
+              <el-form-item label="周期长度" prop="trainCycle">
+                <el-input
+                  type="number"
+                  v-model.native.number="ruleForms.trainCycle"
+                  placeholder="输入周期长度"
+                >
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span='5'>
-              <el-button size='mini' type='primary' style='margin-top:5px' @click='predictionModel("ruleForms")'>预测
+            <el-col :span="5">
+              <el-button
+                size="mini"
+                type="primary"
+                style="margin-top:5px"
+                @click="predictionModel('ruleForms')"
+                >预测
               </el-button>
             </el-col>
-
           </el-row>
-
         </div>
       </el-form>
     </div>
 
     <!-- 图形展示 -->
-    <div id='charts' ref='Echarts'>
-
-    </div>
+    <div id="charts" ref="Echarts"></div>
   </div>
 </template>
 
 <script>
-  import echarts from 'echarts'
-  import project from '../../mixins/project'
-  import devisor from '../../util/devisor'
-  import {
-    randomColor,
-    deepClone
-  } from '../../util'
+import echarts from "echarts";
+import project from "../../mixins/project";
+import devisor from "../../util/devisor";
+import { randomColor, deepClone } from "../../util";
 
-  import qs from 'qs';
-  import {
-    notify
-  } from '../../util/item'
-  let moment = require('moment');
-  export default {
-    data() {
-      return {
-        addText: '添加数据',
-        dates: '',
-        datasSources: [],
-        fieldIndex: 0,
-        chart: '',
-        $echarts: '',
-        datasSourceTypes: [],
-        conditionHeight: 'auto', //条件窗口高度
-        conditionIcon: 'el-icon-arrow-up', //条件窗口高度
-        modelsDatas: null,
-        pickerOptions: {
-          shortcuts: [{
-            text: '最近一周',
+import qs from "qs";
+import { notify } from "../../util/item";
+let moment = require("moment");
+export default {
+  data() {
+    return {
+      addText: "添加数据",
+      dates: "",
+      datasSources: [],
+      fieldIndex: 0,
+      chart: "",
+      $echarts: "",
+      datasSourceTypes: [],
+      conditionHeight: "auto", //条件窗口高度
+      conditionIcon: "el-icon-arrow-up", //条件窗口高度
+      modelsDatas: null,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
             onClick(picker) {
-              let end = moment().subtract('days', 0).format('YYYY-MM-DD HH:mm:ss');
-              let start = moment().subtract('days', 7).format('YYYY-MM-DD HH:mm:ss');
+              let end = moment()
+                .subtract("days", 0)
+                .format("YYYY-MM-DD HH:mm:ss");
+              let start = moment()
+                .subtract("days", 7)
+                .format("YYYY-MM-DD HH:mm:ss");
               // end = moment(end, 'YYYY-MM-DD HH:mm:ss').valueOf();
               // start = moment(start, 'YYYY-MM-DD HH:mm:ss').valueOf();
-              picker.$emit('pick', [start, end]);
+              picker.$emit("pick", [start, end]);
             }
-          }, {
-            text: '最近一个月',
+          },
+          {
+            text: "最近一个月",
             onClick(picker) {
-              let end = moment().subtract('days', 0).format('YYYY-MM-DD HH:mm:ss');
-              let start = moment().subtract('days', 30).format('YYYY-MM-DD HH:mm:ss');
+              let end = moment()
+                .subtract("days", 0)
+                .format("YYYY-MM-DD HH:mm:ss");
+              let start = moment()
+                .subtract("days", 30)
+                .format("YYYY-MM-DD HH:mm:ss");
               // end = moment(end, 'YYYY-MM-DD HH:mm:ss').valueOf();
               // start = moment(start, 'YYYY-MM-DD HH:mm:ss').valueOf();
-              picker.$emit('pick', [start, end]);
+              picker.$emit("pick", [start, end]);
             }
-          }, {
-            text: '最近三个月',
+          },
+          {
+            text: "最近三个月",
             onClick(picker) {
-              let end = moment().subtract('days', 0).format('YYYY-MM-DD HH:mm:ss');
-              let start = moment().subtract('days', 90).format('YYYY-MM-DD HH:mm:ss');
+              let end = moment()
+                .subtract("days", 0)
+                .format("YYYY-MM-DD HH:mm:ss");
+              let start = moment()
+                .subtract("days", 90)
+                .format("YYYY-MM-DD HH:mm:ss");
               // end = moment(end, 'YYYY-MM-DD HH:mm:ss').valueOf();
               // start = moment(start, 'YYYY-MM-DD HH:mm:ss').valueOf();
-              picker.$emit('pick', [start, end]);
+              picker.$emit("pick", [start, end]);
             }
-          }],
+          }
+        ]
+      },
+      models: [
+        {
+          label: "ARIMA",
+          value: "ARIMA"
         },
-        models: [{
-          label: 'ARIMA',
-          value: 'ARIMA'
-        }, {
-          label: 'LSTM',
-          value: 'LSTM'
-        }],
-        ruleForm: {
-          dataPreviewLists: [{
-            dataSourceName: '', //连接名称
-            tableName: '', //数据表名称
-            timeColumnName: '', //时间字段名称
-            queryColumnName: '', //待查询字段名称
-            datas: { //存储改变字段，进行数据区分，比较改变数值，修改不必要字段
+        {
+          label: "LSTM",
+          value: "LSTM"
+        }
+      ],
+      ruleForm: {
+        dataPreviewLists: [
+          {
+            dataSourceName: "", //连接名称
+            tableName: "", //数据表名称
+            timeColumnName: "", //时间字段名称
+            queryColumnName: "", //待查询字段名称
+            datas: {
+              //存储改变字段，进行数据区分，比较改变数值，修改不必要字段
               dateColumn: [], //时间字段
               numberColumn: [], //查询字段
               sourcesField: [], //字段名称
               symbolNum: [] //类型
             },
-            queryConditions: [{
-              name: '',
-              symbol: '',
-              value: '',
-              select: true
-            }], //过滤条件
-          }]
+            queryConditions: [
+              {
+                name: "",
+                symbol: "",
+                value: "",
+                select: true
+              }
+            ] //过滤条件
+          }
+        ]
+      },
+      ruleForms: {
+        trainCycle: "",
+        scale: "",
+        modelType: ""
+      },
+      symbolNum1: [
+        {
+          label: ">",
+          value: ">"
         },
-        ruleForms: {
-          trainCycle: '',
-          scale: '',
-          modelType: '',
+        {
+          label: ">=",
+          value: ">="
         },
-        symbolNum1: [{
-            label: '>',
-            value: '>'
-          }, {
-            label: '>=',
-            value: '>='
-          },
+        {
+          label: "<",
+          value: "<"
+        },
+        {
+          label: "<=",
+          value: "<="
+        },
+        {
+          label: "=",
+          value: "="
+        }
+      ],
+      symbolNum2: [
+        {
+          label: "=",
+          value: "="
+        }
+      ],
+      rules: {
+        dataPreviewLists: [
           {
-            label: '<',
-            value: '<'
-          }, {
-            label: '<=',
-            value: '<='
-          },
-          {
-            label: '=',
-            value: '='
+            queryConditions: [
+              {
+                name: [
+                  {
+                    required: true,
+                    message: "请选择字段名称",
+                    trigger: "change"
+                  }
+                ], //检测字段
+                minVal: [
+                  {
+                    required: true,
+                    message: "请输入小于阈值",
+                    trigger: "blur"
+                  }
+                ], //小于阈值
+                maxVal: [
+                  {
+                    required: true,
+                    message: "请输入大于阈值",
+                    trigger: "blur"
+                  }
+                ] //大于阈值
+              }
+            ],
+            queryColumnName: [
+              {
+                required: true,
+                message: "请选择查询字段",
+                trigger: "change"
+              }
+            ],
+            timeColumnName: [
+              {
+                required: true,
+                message: "请选择时间字段",
+                trigger: "change"
+              }
+            ],
+            tableName: [
+              {
+                required: true,
+                message: "请选择数据表",
+                trigger: "change"
+              }
+            ],
+            dataSourceName: [
+              {
+                required: true,
+                message: "请选择连接",
+                trigger: "change"
+              }
+            ]
           }
         ],
-        symbolNum2: [{
-          label: '=',
-          value: '='
-        }],
-        rules: {
-          dataPreviewLists: [{
-            queryConditions: [{
-              name: [{
-                required: true,
-                message: '请选择字段名称',
-                trigger: 'change'
-              }], //检测字段
-              minVal: [{
-                required: true,
-                message: '请输入小于阈值',
-                trigger: 'blur'
-              }], //小于阈值
-              maxVal: [{
-                required: true,
-                message: '请输入大于阈值',
-                trigger: 'blur'
-              }], //大于阈值
-            }],
-            queryColumnName: [{
-              required: true,
-              message: '请选择查询字段',
-              trigger: 'change'
-            }],
-            timeColumnName: [{
-              required: true,
-              message: '请选择时间字段',
-              trigger: 'change'
-            }],
-            tableName: [{
-              required: true,
-              message: '请选择数据表',
-              trigger: 'change'
-            }],
-            dataSourceName: [{
-              required: true,
-              message: '请选择连接',
-              trigger: 'change'
-            }],
-          }],
-          modelType: [{
+        modelType: [
+          {
             required: true,
-            message: '请选择预测模型',
-            trigger: 'change'
-          }],
-          scale: [{
-            required: true,
-            message: '请输入验证比例',
-            trigger: 'blur'
-          }],
-          trainCycle: [{
-            required: true,
-            message: '请输入周期长度',
-            trigger: 'blur'
-          }],
-        },
-      };
-    },
-    mixins: [project],
-    components: {},
-    computed: {},
-    mounted() {
-      /**
-       * 页面注意事项
-       * 每组数值，动态进行数据的添加，方法相同，但是数据组不同
-       */
-      this.$nextTick(function () {
-        setTimeout(() => {
-
-          this.defaultDrawCanvas()
-
-        }, 300);
-      })
-      this.dataSourceChanges();
-    },
-    methods: {
-      defaultDrawCanvas() {
-        // 默认图形占位
-        let keys = {};
-        for (let i = 10; i > 0; i--) {
-          keys[moment().subtract('days', i * 3).format('YYYY-MM-DD HH:mm:ss')] = 0
-        }
-        this.drawChart([{
-          "PN": keys
-        }])
-
-      },
-      getCharts(formName = 'ruleForm') {
-        // 获取图形参数
-        if (this.dates === null || this.dates === '') {
-          this.$notify({
-            type: 'warning',
-            message: '请选择需要查询的时间范围'
-          })
-          return
-        }
-
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-
-            // 成功请求数据
-            this.getChart()
-
-          } else {
-            console.log('error submit!!');
-            return false;
+            message: "请选择预测模型",
+            trigger: "change"
           }
+        ],
+        scale: [
+          {
+            required: true,
+            message: "请输入验证比例",
+            trigger: "blur"
+          }
+        ],
+        trainCycle: [
+          {
+            required: true,
+            message: "请输入周期长度",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  components: {},
+  computed: {},
+  mounted() {
+    /**
+     * 页面注意事项
+     * 每组数值，动态进行数据的添加，方法相同，但是数据组不同
+     */
+    this.$nextTick(function() {
+      setTimeout(() => {
+        this.defaultDrawCanvas();
+      }, 300);
+    });
+    this.dataSourceChanges();
+  },
+  methods: {
+    defaultDrawCanvas() {
+      // 默认图形占位
+      let keys = {};
+      for (let i = 10; i > 0; i--) {
+        keys[
+          moment()
+            .subtract("days", i * 3)
+            .format("YYYY-MM-DD HH:mm:ss")
+        ] = 0;
+      }
+      this.drawChart([
+        {
+          PN: keys
+        }
+      ]);
+    },
+    getCharts(formName = "ruleForm") {
+      // 获取图形参数
+      if (this.dates === null || this.dates === "") {
+        this.$notify({
+          type: "warning",
+          message: "请选择需要查询的时间范围"
         });
-      },
-      predictionModel(formName) {
-        // 预测模型数据
+        return;
+      }
 
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            // 成功请求数据
-            let forms = deepClone(this.ruleForms);
-            if (this.modelsDatas === null) {
-              this.$notify({
-                type: 'warning',
-                message: '请先进行基础条件搜索再进行预测'
-              })
-              return
-            }
-            forms['trainDatas'] = this.modelsDatas;
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 成功请求数据
+          this.getChart();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    predictionModel(formName) {
+      // 预测模型数据
 
-            // 预测数据请求
-            this.$http.post(this.nozzle.dataModelQueryPredictData, qs.stringify({
-              dataJson: JSON.stringify(forms)
-            }), {
-              headers: {
-                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 成功请求数据
+          let forms = deepClone(this.ruleForms);
+          if (this.modelsDatas === null) {
+            this.$notify({
+              type: "warning",
+              message: "请先进行基础条件搜索再进行预测"
+            });
+            return;
+          }
+          forms["trainDatas"] = this.modelsDatas;
+
+          // 预测数据请求
+          this.$http
+            .post(
+              this.nozzle.dataModelQueryPredictData,
+              qs.stringify({
+                dataJson: JSON.stringify(forms)
+              }),
+              {
+                headers: {
+                  "Content-Type":
+                    "application/x-www-form-urlencoded; charset=UTF-8"
+                }
               }
-            }).then(response => {
-
-              notify(response)
+            )
+            .then(response => {
+              notify(response);
               if (response.data.code !== 200) {
                 this.parameters({}, 2);
               } else {
                 this.parameters(response.data.data, 2);
               }
-            })
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    drawChart(res) {
+      let [
+        xAxis,
+        devisors,
+        seriesFactorValue,
+        devisorsShowOrHidd,
+        colorPump
+      ] = [[], [], [], [], 0];
+      //自定义色彩搭配
+      let colors = [
+        "#fa541c",
+        "#13c2c2",
+        "#52c41a",
+        "#2f54eb",
+        "#fa8c16",
+        "#1890ff",
+        "#f5222d",
+        "#91d5ff",
+        "#0050b3",
+        "#10239e",
+        "#3366CC"
+      ];
 
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      drawChart(res) {
+      for (let [keys, values] of res.entries()) {
+        for (let [ii, vv] of Object.entries(values)) {
+          var xName = devisor[ii.toLowerCase()] || "无";
+          // 站点图例
+          devisors.push(xName);
 
-        let [xAxis, devisors, seriesFactorValue, devisorsShowOrHidd, colorPump] = [
-          [],
-          [],
-          [],
-          [],
-          0
-        ];
-        //自定义色彩搭配
-        let colors = ['#fa541c', '#13c2c2', '#52c41a', '#2f54eb', '#fa8c16', '#1890ff', '#f5222d', '#91d5ff', '#0050b3',
-          '#10239e', '#3366CC'
-        ];
-
-
-        for (let [keys, values] of res.entries()) {
-          for (let [ii, vv] of Object.entries(values)) {
-            
-            var xName = devisor[ii.toLowerCase()] || '无';
-            // 站点图例
-            devisors.push(xName);
-
-            var color = colors[colorPump];
-            colorPump++;
-            // 站点内容
-            seriesFactorValue.push({
-              name: xName,
-              type: 'line',
-              smooth: true,
-              itemStyle: {
-                normal: {
-                  color: color
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          var color = colors[colorPump];
+          colorPump++;
+          // 站点内容
+          seriesFactorValue.push({
+            name: xName,
+            type: "line",
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: color
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
                     offset: 0,
-                    color: color + 'E6'
-                  }, {
+                    color: color + "E6"
+                  },
+                  {
                     offset: 0.6,
-                    color: color + '66'
-                  }, {
+                    color: color + "66"
+                  },
+                  {
                     offset: 1,
                     color: color
-                  }])
-                }
-              },
-              smooth: true,
-              data: Object.values(vv)
-            })
+                  }
+                ])
+              }
+            },
+            smooth: true,
+            data: Object.values(vv)
+          });
 
-            if (keys === 0 && Object.keys(values)[0] === ii) {
-              xAxis = Object.keys(vv);
-            }
+          if (keys === 0 && Object.keys(values)[0] === ii) {
+            xAxis = Object.keys(vv);
           }
         }
+      }
 
-        // 默认显示数据
-        if (devisors.length > 0) {
-          for (let [index, values] of devisors.entries()) {
-
-            if (index > 3) {
-              var keys = {};
-              keys[devisors[index]] = false;
-              devisorsShowOrHidd.push(keys)
-            } else {
-
-              var keys = {};
-              keys[devisors[index]] = true;
-              devisorsShowOrHidd.push(keys)
-            }
-          }
-        }
-        /**
-         * 流速（VA）处理对比分析图
-         */
-        let dom = document.getElementById('charts');
-        let myChart = echarts.init(dom);
-        this.$echarts = myChart;
-        let option = {
-          // backgroundColor: '#F6F9FE',
-          title: {
-            text: '',
-            textStyle: {
-              color: '#333333', //标题文字颜色
-            },
-            y: 15,
-            x: 'center'
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          grid: {
-            x: 55,
-            x2: 25,
-          },
-          xAxis: {
-            axisLine: {
-              //设置地名及x轴线条颜色
-              show: true,
-              lineStyle: {
-                type: 'dashed', //设置x轴线条样式
-                color: '#ced0d1'
-              }
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#ced0d1', //更改坐标轴文字颜色
-                fontSize: 12 //更改坐标轴文字大小
-              }
-            },
-            boundaryGap: false, //从x轴起点开始
-            data: xAxis
-          },
-          legend: {
-            data: devisors,
-            itemGap: 5,
-            icon: "rect",
-            itemWidth: 15, // 设置宽度
-            itemHeight: 15,
-            textStyle: {
-              color: '#333', //图例文字颜色
-            },
-            y: 20,
-            selected: devisorsShowOrHidd,
-            padding: [0, 30, 0, 0],
-            x: 'center'
-          },
-          yAxis: {
-            "axisLine": { //y轴
-              "show": false,
-              lineStyle: {
-                color: '#ced0d1'
-              }
-            },
-            "axisTick": { //y轴刻度线
-              "show": false
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#ced0d1', //更改坐标轴文字颜色
-                fontSize: 12 //更改坐标轴文字大小
-              }
-            },
-            name: '',
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: 'dashed',
-                color: '#ced0d1'
-              }
-            },
-          },
-          dataZoom: [{
-              show: true,
-              start: 0,
-              end: 30,
-              height: 18,
-              textStyle: {
-                color: '#ced0d1'
-              }
-            },
-            {
-              type: 'inside',
-              realtime: true,
-              start: 0,
-              height: 18,
-              end: 15
-            }
-          ],
-          series: seriesFactorValue
-        };
-        myChart.clear();
-        myChart.setOption(option);
-
-        this.$nextTick(() => {
-          this.$echarts.resize();
-        })
-        this.init();
-      },
-      init() {
-        // 图形自适应
-        let that = this;
-        this.$nextTick(() => {
-          // 不加延时,会出现获取不到dom的情况
-          setTimeout(() => {
-            window.addEventListener('resize', function () {
-              that.$echarts.resize();
-            })
-          }, 100)
-        })
-      },
-      async getChart() {
-        // 查询图形数据
-        let newDatas = null;
-        newDatas = deepClone(this.ruleForm);
-        // 输出处理
-        for (let [keys, items] of Object.entries(newDatas.dataPreviewLists)) {
-          items['queryCondition'] = [];
-
-          // 过滤条件处理
-          if (items['queryConditions'].length !== 0) {
-
-            for (let [i, v] of Object.entries(items['queryConditions'])) {
-
-              var pa = new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/);
-              // 处理字段值类型是否是string 或者number
-              let paVal = pa.test(v['value']) ? (+v['value']) : ("'" + v['value'] + "'");
-              let da = v['name'].split(',')[0] + " " + v['symbol'] + " " + paVal;
-
-              //过滤条件非必选
-              // if (v['name'] === '' || v['symbol'] === '' || v['value'] === '') {
-              //   this.$notify({
-              //     type: 'warning',
-              //     message: '请将数据填充完全，再进行搜索'
-              //   })
-              //   return
-              // }
-
-              items['queryCondition'].push(da)
-            }
-          }
-
-          delete items['queryConditions']
-          delete items['datas']
-        }
-
-        newDatas['dataPreviewLists'][0]['startTime'] = this.dates[0];
-        newDatas['dataPreviewLists'][0]['endTime'] = this.dates[1];
-        let response = await this.getHttpDatas(this.nozzle.dataModelGetDataComparisonList, newDatas[
-          'dataPreviewLists'][0], 2, 2)
-
-        this.parameters(response)
-      },
-      parameters(response, dif = 1) {
-        // 图形数据测试，是否有参数
-        /**
-         * 图形数据测试，是否有参数
-         * @param {Object} response 图形参数
-         *  */
-        if (JSON.stringify(response) === '{}' || JSON.stringify(response) === 'null') {
-          this.defaultDrawCanvas()
-
-          this.modelsDatas = null;
-          return
-        }
-
-        // 有数据情况下，窗口缩小
-        this.conditionIcon = 'el-icon-arrow-down'
-        this.conditionHeight = '80px';
-        let queryColumnName = this.ruleForm.dataPreviewLists[0]['queryColumnName']
-
-        let res = [];
-        if (dif === 2) {
-          // 预测数据图形渲染
-          let newNames = `${queryColumnName}预测`
-
-          res[0] = {};
-          res[1] = {};
-          res[0][queryColumnName] = this.modelsDatas;
-          res[1][newNames] = response;
-
-        } else {
-          // 图形渲染
-          res[0] = {};
-          res[0][queryColumnName] = response;
-          this.$refs['ruleForms'].resetFields();
-          // 数据存储
-          if (response === {}) {
-            this.modelsDatas = null
+      // 默认显示数据
+      if (devisors.length > 0) {
+        for (let [index, values] of devisors.entries()) {
+          if (index > 3) {
+            var keys = {};
+            keys[devisors[index]] = false;
+            devisorsShowOrHidd.push(keys);
           } else {
-            this.modelsDatas = response;
+            var keys = {};
+            keys[devisors[index]] = true;
+            devisorsShowOrHidd.push(keys);
           }
+        }
+      }
+      /**
+       * 流速（VA）处理对比分析图
+       */
+      let dom = document.getElementById("charts");
+      let myChart = echarts.init(dom);
+      this.$echarts = myChart;
+      let option = {
+        // backgroundColor: '#F6F9FE',
+        title: {
+          text: "",
+          textStyle: {
+            color: "#333333" //标题文字颜色
+          },
+          y: 15,
+          x: "center"
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          x: 55,
+          x2: 25
+        },
+        xAxis: {
+          axisLine: {
+            //设置地名及x轴线条颜色
+            show: true,
+            lineStyle: {
+              type: "dashed", //设置x轴线条样式
+              color: "#ced0d1"
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ced0d1", //更改坐标轴文字颜色
+              fontSize: 12 //更改坐标轴文字大小
+            }
+          },
+          boundaryGap: false, //从x轴起点开始
+          data: xAxis
+        },
+        legend: {
+          data: devisors,
+          itemGap: 5,
+          icon: "rect",
+          itemWidth: 15, // 设置宽度
+          itemHeight: 15,
+          textStyle: {
+            color: "rgb(0, 119, 254)" //图例文字颜色
+          },
+          y: 20,
+          selected: devisorsShowOrHidd,
+          padding: [0, 30, 0, 0],
+          x: "center"
+        },
+        yAxis: {
+          axisLine: {
+            //y轴
+            show: false,
+            lineStyle: {
+              color: "#ced0d1"
+            }
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ced0d1", //更改坐标轴文字颜色
+              fontSize: 12 //更改坐标轴文字大小
+            }
+          },
+          name: "",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#ced0d1"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            show: true,
+            start: 0,
+            end: 30,
+            height: 18,
+            textStyle: {
+              color: "#ced0d1"
+            }
+          },
+          {
+            type: "inside",
+            realtime: true,
+            start: 0,
+            height: 18,
+            end: 15
+          }
+        ],
+        series: seriesFactorValue
+      };
+      myChart.clear();
+      myChart.setOption(option);
 
+      this.$nextTick(() => {
+        this.$echarts.resize();
+      });
+      this.init();
+    },
+    init() {
+      // 图形自适应
+      let that = this;
+      this.$nextTick(() => {
+        // 不加延时,会出现获取不到dom的情况
+        setTimeout(() => {
+          window.addEventListener("resize", function() {
+            that.$echarts.resize();
+          });
+        }, 100);
+      });
+    },
+    async getChart() {
+      // 查询图形数据
+      let newDatas = null;
+      newDatas = deepClone(this.ruleForm);
+      // 输出处理
+      for (let [keys, items] of Object.entries(newDatas.dataPreviewLists)) {
+        items["queryCondition"] = [];
+
+        // 过滤条件处理
+        if (items["queryConditions"].length !== 0) {
+          for (let [i, v] of Object.entries(items["queryConditions"])) {
+            var pa = new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/);
+            // 处理字段值类型是否是string 或者number
+            let paVal = pa.test(v["value"])
+              ? +v["value"]
+              : "'" + v["value"] + "'";
+            let da = v["name"].split(",")[0] + " " + v["symbol"] + " " + paVal;
+
+            //过滤条件非必选
+            // if (v['name'] === '' || v['symbol'] === '' || v['value'] === '') {
+            //   this.$notify({
+            //     type: 'warning',
+            //     message: '请将数据填充完全，再进行搜索'
+            //   })
+            //   return
+            // }
+
+            items["queryCondition"].push(da);
+          }
         }
 
-        // 图形绘制
-        this.drawChart(res)
+        delete items["queryConditions"];
+        delete items["datas"];
+      }
 
-      },
-      async dataSourceChanges() {
-        // 连接列表渲染
+      newDatas["dataPreviewLists"][0]["startTime"] = this.dates[0];
+      newDatas["dataPreviewLists"][0]["endTime"] = this.dates[1];
+      let response = await this.getHttpDatas(
+        this.nozzle.dataModelGetDataComparisonList,
+        newDatas["dataPreviewLists"][0],
+        2,
+        2
+      );
 
-        let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
-          dbType: 'Relational'
+      this.parameters(response);
+    },
+    parameters(response, dif = 1) {
+      // 图形数据测试，是否有参数
+      /**
+       * 图形数据测试，是否有参数
+       * @param {Object} response 图形参数
+       *  */
+      if (
+        JSON.stringify(response) === "{}" ||
+        JSON.stringify(response) === "null"
+      ) {
+        this.defaultDrawCanvas();
+
+        this.modelsDatas = null;
+        return;
+      }
+
+      // 有数据情况下，窗口缩小
+      this.conditionIcon = "el-icon-arrow-down";
+      this.conditionHeight = "80px";
+      let queryColumnName = this.ruleForm.dataPreviewLists[0][
+        "queryColumnName"
+      ];
+
+      let res = [];
+      if (dif === 2) {
+        // 预测数据图形渲染
+        let newNames = `${queryColumnName}预测`;
+
+        res[0] = {};
+        res[1] = {};
+        res[0][queryColumnName] = this.modelsDatas;
+        res[1][newNames] = response;
+      } else {
+        // 图形渲染
+        res[0] = {};
+        res[0][queryColumnName] = response;
+        this.$refs["ruleForms"].resetFields();
+        // 数据存储
+        if (response === {}) {
+          this.modelsDatas = null;
+        } else {
+          this.modelsDatas = response;
+        }
+      }
+
+      // 图形绘制
+      this.drawChart(res);
+    },
+    async dataSourceChanges() {
+      // 连接列表渲染
+
+      let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
+        dbType: "Relational"
+      });
+
+      let dataBase = [];
+      for (let item of datas.values()) {
+        dataBase.push({
+          value: item
         });
+      }
+      this.datasSources = dataBase;
+    },
+    async dataSourceChange(val, fields = null) {
+      // 数据表内容获取以及填充
+      this.ruleForm.dataPreviewLists[0]["tableName"] = "";
 
-        let dataBase = [];
-        for (let item of datas.values()) {
-          dataBase.push({
-            value: item
-          })
-        }
-        this.datasSources = dataBase;
-      },
-      async dataSourceChange(val, fields = null) {
-        // 数据表内容获取以及填充
-        this.ruleForm.dataPreviewLists[0]['tableName'] = '';
-
-        let datas = await this.getHttpDatas(this.nozzle.getAllTableNameByDateSourceName, {
+      let datas = await this.getHttpDatas(
+        this.nozzle.getAllTableNameByDateSourceName,
+        {
           dataSourceName: val,
           pageSize: 999999,
           pageNo: 1
+        }
+      );
+      let dataBase = [];
+      for (let item of datas.list.values()) {
+        dataBase.push({
+          value: item
         });
-        let dataBase = [];
-        for (let item of datas.list.values()) {
-          dataBase.push({
-            value: item
-          })
+      }
+
+      // 数据表内容
+      this.datasSourceTypes = dataBase;
+    },
+    async dataSourceTable() {
+      // 数据表内容变化发生改变
+
+      // 展开窗口
+      this.conditionHeight = "auto";
+      this.conditionIcon = "el-icon-arrow-up";
+
+      let val = this.ruleForm.dataPreviewLists[0].tableName;
+      let dataBase = this.ruleForm.dataPreviewLists[0].dataSourceName;
+
+      this.sourceFieldChange(dataBase, val);
+      this.getZdname(dataBase, val);
+      // 清空字段名
+      for (let item of this.ruleForm.dataPreviewLists[0].queryConditions.values()) {
+        item["name"] = "";
+      }
+
+      this.ruleForm.dataPreviewLists[0].datas.sourcesField = [];
+      this.ruleForm.dataPreviewLists[0].timeColumnName = "";
+      this.ruleForm.dataPreviewLists[0].queryColumnName = "";
+    },
+    async sourceFieldChange(dataSourceName, tableName) {
+      /**
+       * 检测字段填充
+       * @param {String} dataSourceName 连接名称
+       * @param {String} tableName 表名称
+       */
+
+      const datas = await this.getHttpDatas(
+        this.nozzle.getDataStructureByTableName,
+        {
+          dataSourceName: dataSourceName,
+          tableName: tableName
+        }
+      );
+
+      let isString = 1; //是否是string类型，是为1，否为2
+
+      if (datas["list"].length !== 0) {
+        let newDatas = [];
+        for (let item of datas["list"].values()) {
+          // 判断是否为字符串类型 1 为string 2为date 3
+          if (item["columnType"].includes("String")) {
+            isString = 1;
+          } else if (item["columnType"].includes("Date")) {
+            isString = 2;
+          } else {
+            isString = 3;
+          }
+
+          newDatas.push({
+            value: item["columnName"],
+            isStringL: item["columnName"] + "," + isString
+          });
         }
 
-        // 数据表内容
-        this.datasSourceTypes = dataBase;
-      },
-      async dataSourceTable() {
-        // 数据表内容变化发生改变
-
-        // 展开窗口
-        this.conditionHeight = 'auto'
-        this.conditionIcon = 'el-icon-arrow-up'
-
-        let val = this.ruleForm.dataPreviewLists[0].tableName;
-        let dataBase = this.ruleForm.dataPreviewLists[0].dataSourceName;
-
-        this.sourceFieldChange(dataBase, val);
-        this.getZdname(dataBase, val);
-        // 清空字段名
-        for (let item of this.ruleForm.dataPreviewLists[0].queryConditions.values()) {
-          item['name'] = '';
-        }
-
+        this.ruleForm.dataPreviewLists[0].datas.sourcesField = newDatas;
+      } else {
         this.ruleForm.dataPreviewLists[0].datas.sourcesField = [];
-        this.ruleForm.dataPreviewLists[0].timeColumnName = ''
-        this.ruleForm.dataPreviewLists[0].queryColumnName = ''
-
-      },
-      async sourceFieldChange(dataSourceName, tableName) {
-        /**
-         * 检测字段填充
-         * @param {String} dataSourceName 连接名称
-         * @param {String} tableName 表名称
-         */
-
-        const datas = await this.getHttpDatas(this.nozzle.getDataStructureByTableName, {
+      }
+    },
+    async getZdname(dataSourceName, tableName) {
+      // 字段名称
+      let response = await this.getHttpDatas(
+        this.nozzle.getDataStructureByTableNameAndType,
+        {
           dataSourceName: dataSourceName,
           tableName: tableName
-        })
-
-        let isString = 1; //是否是string类型，是为1，否为2
-
-        if (datas['list'].length !== 0) {
-          let newDatas = [];
-          for (let item of datas['list'].values()) {
-
-            // 判断是否为字符串类型 1 为string 2为date 3
-            if (item['columnType'].includes('String')) {
-              isString = 1;
-            } else if (item['columnType'].includes('Date')) {
-              isString = 2;
-            } else {
-              isString = 3;
-            }
-
-            newDatas.push({
-              value: item['columnName'],
-              isStringL: item['columnName'] + ',' + isString
-            })
-          }
-
-          this.ruleForm.dataPreviewLists[0].datas.sourcesField = newDatas;
-        } else {
-          this.ruleForm.dataPreviewLists[0].datas.sourcesField = [];
         }
-      },
-      async getZdname(dataSourceName, tableName) {
-        // 字段名称
-        let response = await this.getHttpDatas(this.nozzle.getDataStructureByTableNameAndType, {
-          dataSourceName: dataSourceName,
-          tableName: tableName
-        })
+      );
 
-        // 填充时间字段和查询字段
-        this.ruleForm.dataPreviewLists[0].datas.dateColumn = this.enOrChin(response['dateColumn']);
-        this.ruleForm.dataPreviewLists[0].datas.numberColumn = this.enOrChin(response['numberColumn']);
-      },
-      enOrChin(datas = []) {
-        // 英文转换成中文
-        if (datas.length !== 0) {
-          let newDevisor = [];
-          for (const item of datas.values()) {
-            newDevisor.push({
-              label: devisor[item.toLowerCase()],
-              value: item
-            })
-          }
-          return newDevisor
+      // 填充时间字段和查询字段
+      this.ruleForm.dataPreviewLists[0].datas.dateColumn = this.enOrChin(
+        response["dateColumn"]
+      );
+      this.ruleForm.dataPreviewLists[0].datas.numberColumn = this.enOrChin(
+        response["numberColumn"]
+      );
+    },
+    enOrChin(datas = []) {
+      // 英文转换成中文
+      if (datas.length !== 0) {
+        let newDevisor = [];
+        for (const item of datas.values()) {
+          newDevisor.push({
+            label: devisor[item.toLowerCase()],
+            value: item
+          });
         }
-      },
-      fieldNameFocus(indexs = 0) {
-        // 获取当前字段类行数
-        this.fieldIndex = indexs
-      },
-      fieldNameChange(val) {
-        /**
-         * 字段名称
-         * @param {Number} parentIndex 是第几个窗口
-         * @param {Number} index 是第几行数据
-         */
-        let isString = val.split(',')[1];
+        return newDevisor;
+      }
+    },
+    fieldNameFocus(indexs = 0) {
+      // 获取当前字段类行数
+      this.fieldIndex = indexs;
+    },
+    fieldNameChange(val) {
+      /**
+       * 字段名称
+       * @param {Number} parentIndex 是第几个窗口
+       * @param {Number} index 是第几行数据
+       */
+      let isString = val.split(",")[1];
 
-        // 是字符串类型，类型判断只能展示=
-        this.ruleForm.dataPreviewLists[0].queryConditions[this.fieldIndex].symbol = ''
+      // 是字符串类型，类型判断只能展示=
+      this.ruleForm.dataPreviewLists[0].queryConditions[
+        this.fieldIndex
+      ].symbol = "";
 
-        if (isString === '1') {
+      if (isString === "1") {
+        // string类型
+        this.ruleForm.dataPreviewLists[0].datas.symbolNum = this.symbolNum2;
+        this.ruleForm.dataPreviewLists[0].queryConditions[
+          this.fieldIndex
+        ].select = true;
+      } else if (isString === "2") {
+        // 字段值转换成时间框
+        this.ruleForm.dataPreviewLists[0].datas.symbolNum = this.symbolNum1;
+        this.ruleForm.dataPreviewLists[0].queryConditions[
+          this.fieldIndex
+        ].select = false;
+      } else {
+        // 默认情况
+        this.ruleForm.dataPreviewLists[0].datas.symbolNum = this.symbolNum1;
+        this.ruleForm.dataPreviewLists[0].queryConditions[
+          this.fieldIndex
+        ].select = true;
+      }
+    },
+    querySearch(queryString, cb) {
+      // 数据表内容填充
+      var restaurants = this.datasSourceTypes;
 
-          // string类型
-          this.ruleForm.dataPreviewLists[0].datas.symbolNum = this.symbolNum2;
-          this.ruleForm.dataPreviewLists[0].queryConditions[this.fieldIndex].select = true;
-        } else if (isString === '2') {
-
-          // 字段值转换成时间框
-          this.ruleForm.dataPreviewLists[0].datas.symbolNum = this.symbolNum1;
-          this.ruleForm.dataPreviewLists[0].queryConditions[this.fieldIndex].select = false;
-        } else {
-
-          // 默认情况
-          this.ruleForm.dataPreviewLists[0].datas.symbolNum = this.symbolNum1;
-          this.ruleForm.dataPreviewLists[0].queryConditions[this.fieldIndex].select = true;
+      var results = queryString
+        ? restaurants.filter(this.createFilter(queryString))
+        : restaurants;
+      // 调用 callback 返回建议列表的数据
+      if (results.length !== 0) {
+        for (let item of results.values()) {
+          item["value"] = item["value"];
         }
-
-      },
-      querySearch(queryString, cb) {
-        // 数据表内容填充
-        var restaurants = this.datasSourceTypes;
-
-        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
-        // 调用 callback 返回建议列表的数据
-        if (results.length !== 0) {
-          for (let item of results.values()) {
-            item['value'] = item['value'];
-          }
-        }
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (restaurant) => {
-          return (restaurant.value.indexOf(queryString) !== -1);
-        };
-      },
-      filterCondition(index) {
-        /**
-         * 添加检测字段，修改时刻，渲染并进行赋值
-         * @param {Number} index 当前选中的删除区域
-         */
-        this.ruleForm.dataPreviewLists[index].queryConditions.push({
-          name: '',
-          symbol: '',
-          value: '',
-          select: true
-        });
-      },
-      conditional() {
-        // 条件窗开关
-        if (this.conditionHeight === '80px') {
-          this.conditionHeight = 'auto'
-          this.conditionIcon = 'el-icon-arrow-up'
-        } else {
-          this.conditionHeight = '80px'
-          this.conditionIcon = 'el-icon-arrow-down'
-        }
-      },
-      deleteAutoIcons(fieldName, index) {
-        //   删除字段
-        this.ruleForm.dataPreviewLists[0][fieldName].splice(index, 1);
-      },
+      }
+      cb(results);
+    },
+    createFilter(queryString) {
+      return restaurant => {
+        return restaurant.value.indexOf(queryString) !== -1;
+      };
+    },
+    filterCondition(index) {
+      /**
+       * 添加检测字段，修改时刻，渲染并进行赋值
+       * @param {Number} index 当前选中的删除区域
+       */
+      this.ruleForm.dataPreviewLists[index].queryConditions.push({
+        name: "",
+        symbol: "",
+        value: "",
+        select: true
+      });
+    },
+    conditional() {
+      // 条件窗开关
+      if (this.conditionHeight === "80px") {
+        this.conditionHeight = "auto";
+        this.conditionIcon = "el-icon-arrow-up";
+      } else {
+        this.conditionHeight = "80px";
+        this.conditionIcon = "el-icon-arrow-down";
+      }
+    },
+    deleteAutoIcons(fieldName, index) {
+      //   删除字段
+      this.ruleForm.dataPreviewLists[0][fieldName].splice(index, 1);
     }
   }
-
+};
 </script>
 
 <style>
-  #timeSeiesPrediction {
-    height: 98%;
-    background-color: #fff;
-    overflow-x: hidden;
-  }
-  #timeSeiesPrediction  .btns {
-      height: 72px;
-      line-height: 76px;
-      overflow: hidden;
-      padding: 20px;
-  }
-    .btns .dateSearch {
-        height: 31px;
-      }
-
-    .btns .el-date-editor.el-input__inner {
-        width: 377px !important;
-        height: 31px;
-      
-    }
-
-    .el-date-editor .el-range__icon,
-    .el-date-editor .el-range-separator {
-      line-height: 23px;
-    }
-
-    .searchButton span {
-      line-height: 20px;
-    }
-
-     
-     .ycSearch .el-form-item {
-        margin-bottom: 0px;
-      }
-    
-
-   .ycSearch .demo-ruleForm {
-      overflow: initial;
-    }
-
-    /* // 搜索条件 */
-  .searchCondition {
-      width: 96%;
-
-      padding: 20px 20px 0 20px;
-      overflow: hidden;
-
-
-   }
-     .searchCondition .condition {
-        position: relative;
-        width: 100%;
-        padding: 20px 15px 20px 25px;
-        border-radius: 5px;
-        border: 1px dashed #6fa5ff;
-        margin-bottom: 20px;
-        overflow: hidden;
-     }
-      .searchCondition:hover{
-          border: 1px solid rgba(111, 165, 255, 1);
-          box-shadow: 2px 2px 6px rgba(24, 144, 253, 0.5);
-      }
-         .condition .sign {
-            border: 1px solid #ccc;
-          }
-        
-
-        .el-autocomplete {
-          width: 100%;
-        }
-
-        /* // 标记 */
-        .sign {
-          position: absolute;
-          width: 28px;
-          height: 28px;
-          text-align: center;
-          line-height: 17px;
-          top: -8px;
-          left: -8px;
-          font-size: 12px;
-          border: 1px dashed #ccc;
-          background: #d8d7d73d;
-          border-radius: 30px;
-        }
-         .sign span {
-            position: absolute;
-            bottom: 1px;
-            right: 5px;
-          }
-        
-
-        /* // 打开当前按钮 */
-        .telescopic {
-          position: absolute;
-          right: 10px !important;
-          top: 10px;
-          color: #ccc;
-          cursor: pointer;
-        }
-      
-
-      .aboutType {
-        padding-left: 15px;
-      }
-
-      .addendumNames {
-        text-align: left;
-        padding-left: 10px;
-        cursor: pointer;
-        line-height: 40px;
-        color: #f15353;
-      }
-    
-
-    /* // 添加按钮 */
-    .addFilter {
-      padding-left: 80px;
-      text-align: center;
-    }
-    .addFilter span {
-        display: inline-block;
-        width: 100%;
-        border: 1px dashed #ccc;
-        height: 31px;
-        line-height: 31px;
-        cursor: pointer;
-        color: #fff;
-      }
-      .icon-jia {
-  color: #fff;
+#timeSeiesPrediction {
+  height: 98%;
+  background-color: #fff;
+  overflow-x: hidden;
+}
+#timeSeiesPrediction .btns {
+  height: 72px;
+  line-height: 76px;
+  overflow: hidden;
+  padding: 20px;
+}
+.btns .dateSearch {
+  height: 31px;
 }
 
-    /* // 图形展示 */
-    #charts {
-      width: 100%;
-      height: 400px;
-      margin: 20px 0;
-      text-align: center;
-    }
+.btns .el-date-editor.el-input__inner {
+  width: 377px !important;
+  height: 31px;
+}
 
-    .el-icon-arrow-down:before {
-      content: "\E6DF" !important;
-      color: rgb(204, 204, 204);
-    }
+.el-date-editor .el-range__icon,
+.el-date-editor .el-range-separator {
+  line-height: 23px;
+}
 
-    .el-input__icon{
-      line-height: 30px;
-    }
+.searchButton span {
+  line-height: 20px;
+}
 
+.ycSearch .el-form-item {
+  margin-bottom: 0px;
+}
 
+.ycSearch .demo-ruleForm {
+  overflow: initial;
+}
+
+/* // 搜索条件 */
+.searchCondition {
+  width: 96%;
+
+  padding: 20px 20px 0 20px;
+  overflow: hidden;
+}
+.searchCondition .condition {
+  position: relative;
+  width: 100%;
+  padding: 20px 15px 20px 25px;
+  border-radius: 5px;
+  border: 1px dashed #6fa5ff;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+.searchCondition:hover {
+  border: 1px solid rgba(111, 165, 255, 1);
+  box-shadow: 2px 2px 6px #1890fd80;
+}
+.condition .sign {
+  border: 1px solid #ccc;
+}
+
+.el-autocomplete {
+  width: 100%;
+}
+
+/* // 标记 */
+.sign {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  text-align: center;
+  line-height: 17px;
+  top: -8px;
+  left: -8px;
+  font-size: 12px;
+  border: 1px dashed #ccc;
+  background: #d8d7d73d;
+  border-radius: 30px;
+}
+.sign span {
+  position: absolute;
+  bottom: 1px;
+  right: 5px;
+}
+
+/* // 打开当前按钮 */
+.telescopic {
+  position: absolute;
+  right: 10px !important;
+  top: 10px;
+  color: #ccc;
+  cursor: pointer;
+}
+
+.aboutType {
+  padding-left: 15px;
+}
+
+.addendumNames {
+  text-align: left;
+  padding-left: 10px;
+  cursor: pointer;
+  line-height: 40px;
+  color: #f15353;
+}
+
+/* // 添加按钮 */
+.addFilter {
+  padding-left: 80px;
+  text-align: center;
+}
+
+/* // 图形展示 */
+#charts {
+  width: 100%;
+  height: 400px;
+  margin: 20px 0;
+  text-align: center;
+}
+
+.el-icon-arrow-down:before {
+  content: "\E6DF" !important;
+  color: rgb(204, 204, 204);
+}
+
+.el-input__icon {
+  line-height: 30px;
+}
 </style>