diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index ec2dc5b..68d4699 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -1,3 +1,24 @@
+.sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+}
+.el-tag{
+  background-color: var(--tablethead) !important;
+  border-color:var(--tablethead) !important;
+}
+
+.el-button--info.is-plain {
+  color: #fff !important;
+  background: #409eff !important;
+  border-color: #409eff !important;
+}
+
+.avue-crud__menu {
+  background-color: transparent !important;
+}
+
 .el-card {
   background-color: transparent;
   border: 1px solid var(--white)
@@ -262,7 +283,8 @@
 }
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover,
-.el-cascader-node:hover {
+.el-cascader-node:hover,
+.el-table__body tr.hover-row>td {
   background-color: var(--selecthover) !important;
 }
 .el-select-dropdown__item,

diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index ec2dc5b..68d4699 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -1,3 +1,24 @@
+.sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+}
+.el-tag{
+  background-color: var(--tablethead) !important;
+  border-color:var(--tablethead) !important;
+}
+
+.el-button--info.is-plain {
+  color: #fff !important;
+  background: #409eff !important;
+  border-color: #409eff !important;
+}
+
+.avue-crud__menu {
+  background-color: transparent !important;
+}
+
 .el-card {
   background-color: transparent;
   border: 1px solid var(--white)
@@ -262,7 +283,8 @@
 }
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover,
-.el-cascader-node:hover {
+.el-cascader-node:hover,
+.el-table__body tr.hover-row>td {
   background-color: var(--selecthover) !important;
 }
 .el-select-dropdown__item,
diff --git a/src/components/model/sqlSource.vue b/src/components/model/sqlSource.vue
index c16e299..acf5fce 100644
--- a/src/components/model/sqlSource.vue
+++ b/src/components/model/sqlSource.vue
@@ -1,28 +1,48 @@
 <!-- 连接管理 -  符合数据库列表进行定制的内容 -->
 <template>
   <div id="sqlSource text-center">
+    <p class="sqlType">数据库类型：{{ ruleForm.dbType }}</p>
 
-    <p class="sqlType">数据库类型：{{ruleForm.dbType}}</p>
-
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="randerWidth" class="demo-ruleForm">
-
-      <el-col :span='12'>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      :label-width="randerWidth"
+      class="demo-ruleForm"
+    >
+      <el-col :span="12">
         <el-form-item label="连接名称：" prop="dataSourceName">
-          <el-input v-model="ruleForm.dataSourceName" :disabled="dataSourceDis" placeholder="请输入连接名称"></el-input>
+          <el-input
+            v-model="ruleForm.dataSourceName"
+            :disabled="dataSourceDis"
+            placeholder="请输入连接名称"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12' style='height:62px;'>
+      <el-col :span="12" style="height:62px;">
         <el-form-item label="连接url：" prop="url">
-          <el-col :span='22'>
-            <el-input v-model="ruleForm.url" placeholder="请输入连接url"></el-input>
-
+          <el-col :span="22">
+            <el-input
+              v-model="ruleForm.url"
+              placeholder="请输入连接url"
+            ></el-input>
           </el-col>
-          <el-col :span='2' class="text-right">
+          <el-col :span="2" class="text-right">
             <div class="aboutType">
-              <el-tooltip class="item" effect="dark" :content="'点击图标复制示例：'+examples" placement="top-start">
-                <span><i class="iconfont icon-49" v-clipboard:success="onCopy" v-clipboard:error="onError"
-                    v-clipboard:copy="examples"></i>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="'点击图标复制示例：' + examples"
+                placement="top-start"
+              >
+                <span
+                  ><i
+                    class="iconfont icon-49"
+                    v-clipboard:success="onCopy"
+                    v-clipboard:error="onError"
+                    v-clipboard:copy="examples"
+                  ></i>
                 </span>
               </el-tooltip>
             </div>
@@ -30,320 +50,355 @@
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="ruleForm.userName" @keyup.native="notEmpty(ruleForm.userName,'userName')"
-            placeholder="请输入用户名"></el-input>
+          <el-input
+            v-model="ruleForm.userName"
+            @keyup.native="notEmpty(ruleForm.userName, 'userName')"
+            placeholder="请输入用户名"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户密码：" prop="userPassword">
-          <el-input type='password' v-model="ruleForm.userPassword"
-            @keyup.native="notEmpty(ruleForm.userPassword,'userPassword')" placeholder="请输入用户密码">
+          <el-input
+            type="password"
+            v-model="ruleForm.userPassword"
+            @keyup.native="notEmpty(ruleForm.userPassword, 'userPassword')"
+            placeholder="请输入用户密码"
+          >
           </el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="备注：">
           <el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
-        <el-form-item v-show='!messageQueue' label="数据库属性串：">
-          <el-input v-model="ruleForm.properties" placeholder="请输入数据库属性串"></el-input>
+      <el-col :span="12">
+        <el-form-item v-show="!messageQueue" label="数据库属性串：">
+          <el-input
+            v-model="ruleForm.properties"
+            placeholder="请输入数据库属性串"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item v-show='!messageQueue' label="额外数量连接属性：" prop="extendProperties">
-          <el-input type="textarea" v-model="ruleForm.extendProperties" placeholder="请输入额外数量连接属性"></el-input>
+      <el-col :span="24">
+        <el-form-item
+          v-show="!messageQueue"
+          label="额外数量连接属性："
+          prop="extendProperties"
+        >
+          <el-input
+            type="textarea"
+            v-model="ruleForm.extendProperties"
+            placeholder="请输入额外数量连接属性"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item label="交换机名称：" v-show='messageQueue'>
-          <el-input v-model="exchange" placeholder="请输入交换机名称"></el-input>
+      <el-col :span="24">
+        <el-form-item label="交换机名称：" v-show="messageQueue">
+          <el-input
+            v-model="exchange"
+            placeholder="请输入交换机名称"
+          ></el-input>
         </el-form-item>
       </el-col>
-
     </el-form>
 
-    <span slot="footer" class="dialog-footer" :style='modelFloor'>
-      <el-button @click.native='connectionTesting' size='mini' class="f_left connection">连 接 测 试</el-button>
-      <p class="f_left" :style='errorText' v-show='errorConnect'>{{errorHtml}}</p>
-      <el-button type="primary" v-show='editAdd' @click="submitForm(1)">添 加</el-button>
-      <el-button type="primary" v-show='!editAdd' @click="submitForm(2)">修 改</el-button>
+    <span slot="footer" class="dialog-footer" :style="modelFloor">
+      <el-button
+        @click.native="connectionTesting"
+        size="mini"
+        class="f_left connection"
+        >连 接 测 试</el-button
+      >
+      <p class="f_left" :style="errorText" v-show="errorConnect">
+        {{ errorHtml }}
+      </p>
+      <el-button type="primary" v-show="editAdd" @click="submitForm(1)"
+        >添 加</el-button
+      >
+      <el-button type="primary" v-show="!editAdd" @click="submitForm(2)"
+        >修 改</el-button
+      >
       <el-button @click.native="dataEdits">取 消</el-button>
     </span>
   </div>
 </template>
 
 <script>
-  import {
-    isJSON,
-    notify
-  } from '../util/item'
-  import project from '../mixins/project'
+import { isJSON, notify } from "../util/item";
+import project from "../mixins/project";
 
-  export default {
-    data() {
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback();
-        } else if (!isJSON(value)) {
-          callback(new Error('额外数量连接属性，为JSON格式'))
-        } else {
-          callback();
-        }
-      };
+export default {
+  data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback();
+      } else if (!isJSON(value)) {
+        callback(new Error("额外数量连接属性，为JSON格式"));
+      } else {
+        callback();
+      }
+    };
 
-      return {
-        errorText: {
-          color: '#F56C6C',
-          lineHeight: '45px',
-          marginLeft: '10px'
-        },
-        randerWidth: '',
-        errorHtml: "",
-        editAdd: true,
-        examples: '',
-        messageQueue: false,
-        dataSourceDis: false,
-        errorConnect: false,
-        exchange: '',
-        editId: '',
-        testPass: 0,
-        ruleForm: {
-          dataSourceName: '',
-          dbType: '',
-          userName: '',
-          extendProperties: '',
-          userPassword: '',
-          properties: '',
-          url: '',
-          mark: '',
-        },
-        modelFloor: {
-          display: 'block',
-          textAlign: 'right',
-          padding: '0 0 22px 0'
-        },
-        rules: {
-          dataSourceName: [{
+    return {
+      errorText: {
+        color: "#F56C6C",
+        lineHeight: "45px",
+        marginLeft: "10px"
+      },
+      randerWidth: "",
+      errorHtml: "",
+      editAdd: true,
+      examples: "",
+      messageQueue: false,
+      dataSourceDis: false,
+      errorConnect: false,
+      exchange: "",
+      editId: "",
+      testPass: 0,
+      ruleForm: {
+        dataSourceName: "",
+        dbType: "",
+        userName: "",
+        extendProperties: "",
+        userPassword: "",
+        properties: "",
+        url: "",
+        mark: ""
+      },
+      modelFloor: {
+        display: "block",
+        textAlign: "right",
+        padding: "0 0 22px 0"
+      },
+      rules: {
+        dataSourceName: [
+          {
             required: true,
-            message: '请输入连接名称',
-            trigger: 'blur'
-          }],
-          extendProperties: [{
-            validator: validatePass2,
-            trigger: 'blur'
-          }],
-          url: [{
-            required: true,
-            message: '请输入连接url',
-            trigger: 'blur'
-          }],
-          userName: [{
-            required: true,
-            message: '请输入用户名',
-            trigger: 'blur'
-          }],
-          userPassword: [{
-            required: true,
-            message: '请输入用户密码',
-            trigger: 'blur'
-          }]
-        }
-      };
-    },
-    mixins: [project],
-    components: {},
-    computed: {},
-    mounted() {},
-    methods: {
-      mysqlVal(val, row = '') {
-        /**
-         * 数据库类型的判断
-         * @param {String} val 数据库类型
-         * @param {Object} row 表格参数
-         */
-        this.dataSourceDis = false;
-
-        this.resetForm('ruleForm')
-        this.editAdd = true;
-
-        // 连接名为小写
-        this.ruleForm.dbType = val;
-        let low = val.toLocaleLowerCase();
-
-        // 数据库类型示例
-        if (val === 'MongoDB') {
-          this.examples = '127.0.0.1:27010/monitoring';
-        } else {
-          this.examples = `jdbc:${low}://server:1433;databasename=test`
-        }
-        this.randerWidth = '170px';
-
-        if (val === 'RabbitMQ') {
-          this.messageQueue = true;
-          this.randerWidth = '120px';
-          this.examples = '127.0.0.1:5672'
-
-          // 新增窗口队列
-          if (row === '') {
-            this.exchange = ''
-            // this.dataSourceFlage = false;
-          } else {
-            // 修改窗口队列
-            let properties = JSON.parse(row['properties']);
-            this.exchange = properties['exchange']
-            // this.dataSourceFlage = true;
+            message: "请输入连接名称",
+            trigger: "blur"
           }
-          return
-        }
-        this.messageQueue = false;
+        ],
+        extendProperties: [
+          {
+            validator: validatePass2,
+            trigger: "blur"
+          }
+        ],
+        url: [
+          {
+            required: true,
+            message: "请输入连接url",
+            trigger: "blur"
+          }
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }
+        ],
+        userPassword: [
+          {
+            required: true,
+            message: "请输入用户密码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    mysqlVal(val, row = "") {
+      /**
+       * 数据库类型的判断
+       * @param {String} val 数据库类型
+       * @param {Object} row 表格参数
+       */
+      this.dataSourceDis = false;
 
-      },
-      editVal(row) {
-        /**
-         * 修改窗口
-         * @param {Object} row 表格行点击参数
-         */
-        this.mysqlVal(row.dbType, row);
-        this.editAdd = false;
-        this.dataSourceDis = true;
-        let {
-          keys
-        } = Object;
-        this.editId = row.id;
-        for (let item of keys(this.ruleForm)) {
-          this.ruleForm[item] = row[item]
-        }
-      },
-      connectionTesting() {
-        /**
-         * 连接测试，数据矫正
-         */
-        this.correct('ruleForm', () => {
+      this.resetForm("ruleForm");
+      this.editAdd = true;
 
-          // 消息队列
-          this.$http.post(this.nozzle.testSource, this.ruleForm).then(response => {
+      // 连接名为小写
+      this.ruleForm.dbType = val;
+      let low = val.toLocaleLowerCase();
+
+      // 数据库类型示例
+      if (val === "MongoDB") {
+        this.examples = "127.0.0.1:27010/monitoring";
+      } else {
+        this.examples = `jdbc:${low}://server:1433;databasename=test`;
+      }
+      this.randerWidth = "170px";
+
+      if (val === "RabbitMQ") {
+        this.messageQueue = true;
+        this.randerWidth = "120px";
+        this.examples = "127.0.0.1:5672";
+
+        // 新增窗口队列
+        if (row === "") {
+          this.exchange = "";
+          // this.dataSourceFlage = false;
+        } else {
+          // 修改窗口队列
+          let properties = JSON.parse(row["properties"]);
+          this.exchange = properties["exchange"];
+          // this.dataSourceFlage = true;
+        }
+        return;
+      }
+      this.messageQueue = false;
+    },
+    editVal(row) {
+      /**
+       * 修改窗口
+       * @param {Object} row 表格行点击参数
+       */
+      this.mysqlVal(row.dbType, row);
+      this.editAdd = false;
+      this.dataSourceDis = true;
+      let { keys } = Object;
+      this.editId = row.id;
+      for (let item of keys(this.ruleForm)) {
+        this.ruleForm[item] = row[item];
+      }
+    },
+    connectionTesting() {
+      /**
+       * 连接测试，数据矫正
+       */
+      this.correct("ruleForm", () => {
+        // 消息队列
+        this.$http
+          .post(this.nozzle.testSource, this.ruleForm)
+          .then(response => {
             if (response.data.code === 200) {
               this.testPass = 200;
               this.errorConnect = true;
-              this.errorText.color = '#41ca4c'
-              this.errorHtml = '测试连接成功';
+              this.errorText.color = "#41ca4c";
+              this.errorHtml = "测试连接成功";
             } else {
               this.testPass = 0;
-              this.errorHtml = response.data.data
+              this.errorHtml = response.data.data;
               this.errorConnect = true;
-              this.errorText.color = '#F56C6C'
+              this.errorText.color = "#F56C6C";
             }
-          })
-        })
-
-      },
-      dataEdits() {
-        /**
-         * 按钮取消事件
-         */
-
-        this.errorConnect = false;
-        this.testPass = 0;
-        this.$emit('dataEdits', false);
-      },
-      async addParameter(api, dif = 1) {
-        // 新增数据传值
-        let datas = this.ruleForm;
-
-        // 消息队列
-        if (this.ruleForm.dbType === "RabbitMQ") {
-          datas['properties'] = JSON.stringify({
-            exchange: this.exchange
           });
-        }
+      });
+    },
+    dataEdits() {
+      /**
+       * 按钮取消事件
+       */
 
-        // 修改数据
-        if (dif === 2) {
-          datas['id'] = this.editId;
-        }
+      this.errorConnect = false;
+      this.testPass = 0;
+      this.$emit("dataEdits", false);
+    },
+    async addParameter(api, dif = 1) {
+      // 新增数据传值
+      let datas = this.ruleForm;
 
-        const response = await this.$http.post(api, datas);
-        notify(response);
-        if (response.data.code === 200) {
-          this.updateData();
-        }
-      },
-      resetForm(formName) {
-        // 清空表格数据
-        this.$refs[formName].resetFields();
-      },
-      correct(formName, cb, dif = 1) {
-        // 数据矫正
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            // 连接测试
-            // if (dif === 2) {
-            //   if (this.testPass === 0) {
-            //     this.$notify({
-            //       type: 'warning',
-            //       message: '请先完成连接测试'
-            //     })
-            //     return
-            //   }
-            // }
-            cb()
-            return true
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
+      // 消息队列
+      if (this.ruleForm.dbType === "RabbitMQ") {
+        datas["properties"] = JSON.stringify({
+          exchange: this.exchange
         });
+      }
 
-      },
-      updateData() {
-        /**
-         * 更新数据
-         */
-        this.$emit('updateData')
-      },
-      submitForm(dif) {
-        // 添加数据,修改数据
-        this.correct('ruleForm', () => {
-          let api = '';
+      // 修改数据
+      if (dif === 2) {
+        datas["id"] = this.editId;
+      }
+
+      const response = await this.$http.post(api, datas);
+      notify(response);
+      if (response.data.code === 200) {
+        this.updateData();
+      }
+    },
+    resetForm(formName) {
+      // 清空表格数据
+      this.$refs[formName].resetFields();
+    },
+    correct(formName, cb, dif = 1) {
+      // 数据矫正
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 连接测试
+          // if (dif === 2) {
+          //   if (this.testPass === 0) {
+          //     this.$notify({
+          //       type: 'warning',
+          //       message: '请先完成连接测试'
+          //     })
+          //     return
+          //   }
+          // }
+          cb();
+          return true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    updateData() {
+      /**
+       * 更新数据
+       */
+      this.$emit("updateData");
+    },
+    submitForm(dif) {
+      // 添加数据,修改数据
+      this.correct(
+        "ruleForm",
+        () => {
+          let api = "";
           if (dif === 1) {
             api = this.nozzle.addSource;
-            this.addParameter(api)
+            this.addParameter(api);
           } else {
             api = this.nozzle.updateSource;
-            this.addParameter(api, 2)
+            this.addParameter(api, 2);
           }
           this.dataEdits();
-        }, 2)
-
-      }
+        },
+        2
+      );
     }
   }
-
+};
 </script>
 
 <style>
-  #sqlSource {
-    width: 100%;
-  }
+#sqlSource {
+  width: 100%;
+}
 
-  .sqlType {
-    font-size: 16px;
-    color: #001529;
-    margin-bottom: 20px;
-    padding-left: 11px;
-  }
+/* .sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+} */
 
-  .connection {
-    margin-top: 5px;
-  }
-
+.connection {
+  margin-top: 5px;
+}
 </style>

diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index ec2dc5b..68d4699 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -1,3 +1,24 @@
+.sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+}
+.el-tag{
+  background-color: var(--tablethead) !important;
+  border-color:var(--tablethead) !important;
+}
+
+.el-button--info.is-plain {
+  color: #fff !important;
+  background: #409eff !important;
+  border-color: #409eff !important;
+}
+
+.avue-crud__menu {
+  background-color: transparent !important;
+}
+
 .el-card {
   background-color: transparent;
   border: 1px solid var(--white)
@@ -262,7 +283,8 @@
 }
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover,
-.el-cascader-node:hover {
+.el-cascader-node:hover,
+.el-table__body tr.hover-row>td {
   background-color: var(--selecthover) !important;
 }
 .el-select-dropdown__item,
diff --git a/src/components/model/sqlSource.vue b/src/components/model/sqlSource.vue
index c16e299..acf5fce 100644
--- a/src/components/model/sqlSource.vue
+++ b/src/components/model/sqlSource.vue
@@ -1,28 +1,48 @@
 <!-- 连接管理 -  符合数据库列表进行定制的内容 -->
 <template>
   <div id="sqlSource text-center">
+    <p class="sqlType">数据库类型：{{ ruleForm.dbType }}</p>
 
-    <p class="sqlType">数据库类型：{{ruleForm.dbType}}</p>
-
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="randerWidth" class="demo-ruleForm">
-
-      <el-col :span='12'>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      :label-width="randerWidth"
+      class="demo-ruleForm"
+    >
+      <el-col :span="12">
         <el-form-item label="连接名称：" prop="dataSourceName">
-          <el-input v-model="ruleForm.dataSourceName" :disabled="dataSourceDis" placeholder="请输入连接名称"></el-input>
+          <el-input
+            v-model="ruleForm.dataSourceName"
+            :disabled="dataSourceDis"
+            placeholder="请输入连接名称"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12' style='height:62px;'>
+      <el-col :span="12" style="height:62px;">
         <el-form-item label="连接url：" prop="url">
-          <el-col :span='22'>
-            <el-input v-model="ruleForm.url" placeholder="请输入连接url"></el-input>
-
+          <el-col :span="22">
+            <el-input
+              v-model="ruleForm.url"
+              placeholder="请输入连接url"
+            ></el-input>
           </el-col>
-          <el-col :span='2' class="text-right">
+          <el-col :span="2" class="text-right">
             <div class="aboutType">
-              <el-tooltip class="item" effect="dark" :content="'点击图标复制示例：'+examples" placement="top-start">
-                <span><i class="iconfont icon-49" v-clipboard:success="onCopy" v-clipboard:error="onError"
-                    v-clipboard:copy="examples"></i>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="'点击图标复制示例：' + examples"
+                placement="top-start"
+              >
+                <span
+                  ><i
+                    class="iconfont icon-49"
+                    v-clipboard:success="onCopy"
+                    v-clipboard:error="onError"
+                    v-clipboard:copy="examples"
+                  ></i>
                 </span>
               </el-tooltip>
             </div>
@@ -30,320 +50,355 @@
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="ruleForm.userName" @keyup.native="notEmpty(ruleForm.userName,'userName')"
-            placeholder="请输入用户名"></el-input>
+          <el-input
+            v-model="ruleForm.userName"
+            @keyup.native="notEmpty(ruleForm.userName, 'userName')"
+            placeholder="请输入用户名"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户密码：" prop="userPassword">
-          <el-input type='password' v-model="ruleForm.userPassword"
-            @keyup.native="notEmpty(ruleForm.userPassword,'userPassword')" placeholder="请输入用户密码">
+          <el-input
+            type="password"
+            v-model="ruleForm.userPassword"
+            @keyup.native="notEmpty(ruleForm.userPassword, 'userPassword')"
+            placeholder="请输入用户密码"
+          >
           </el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="备注：">
           <el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
-        <el-form-item v-show='!messageQueue' label="数据库属性串：">
-          <el-input v-model="ruleForm.properties" placeholder="请输入数据库属性串"></el-input>
+      <el-col :span="12">
+        <el-form-item v-show="!messageQueue" label="数据库属性串：">
+          <el-input
+            v-model="ruleForm.properties"
+            placeholder="请输入数据库属性串"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item v-show='!messageQueue' label="额外数量连接属性：" prop="extendProperties">
-          <el-input type="textarea" v-model="ruleForm.extendProperties" placeholder="请输入额外数量连接属性"></el-input>
+      <el-col :span="24">
+        <el-form-item
+          v-show="!messageQueue"
+          label="额外数量连接属性："
+          prop="extendProperties"
+        >
+          <el-input
+            type="textarea"
+            v-model="ruleForm.extendProperties"
+            placeholder="请输入额外数量连接属性"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item label="交换机名称：" v-show='messageQueue'>
-          <el-input v-model="exchange" placeholder="请输入交换机名称"></el-input>
+      <el-col :span="24">
+        <el-form-item label="交换机名称：" v-show="messageQueue">
+          <el-input
+            v-model="exchange"
+            placeholder="请输入交换机名称"
+          ></el-input>
         </el-form-item>
       </el-col>
-
     </el-form>
 
-    <span slot="footer" class="dialog-footer" :style='modelFloor'>
-      <el-button @click.native='connectionTesting' size='mini' class="f_left connection">连 接 测 试</el-button>
-      <p class="f_left" :style='errorText' v-show='errorConnect'>{{errorHtml}}</p>
-      <el-button type="primary" v-show='editAdd' @click="submitForm(1)">添 加</el-button>
-      <el-button type="primary" v-show='!editAdd' @click="submitForm(2)">修 改</el-button>
+    <span slot="footer" class="dialog-footer" :style="modelFloor">
+      <el-button
+        @click.native="connectionTesting"
+        size="mini"
+        class="f_left connection"
+        >连 接 测 试</el-button
+      >
+      <p class="f_left" :style="errorText" v-show="errorConnect">
+        {{ errorHtml }}
+      </p>
+      <el-button type="primary" v-show="editAdd" @click="submitForm(1)"
+        >添 加</el-button
+      >
+      <el-button type="primary" v-show="!editAdd" @click="submitForm(2)"
+        >修 改</el-button
+      >
       <el-button @click.native="dataEdits">取 消</el-button>
     </span>
   </div>
 </template>
 
 <script>
-  import {
-    isJSON,
-    notify
-  } from '../util/item'
-  import project from '../mixins/project'
+import { isJSON, notify } from "../util/item";
+import project from "../mixins/project";
 
-  export default {
-    data() {
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback();
-        } else if (!isJSON(value)) {
-          callback(new Error('额外数量连接属性，为JSON格式'))
-        } else {
-          callback();
-        }
-      };
+export default {
+  data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback();
+      } else if (!isJSON(value)) {
+        callback(new Error("额外数量连接属性，为JSON格式"));
+      } else {
+        callback();
+      }
+    };
 
-      return {
-        errorText: {
-          color: '#F56C6C',
-          lineHeight: '45px',
-          marginLeft: '10px'
-        },
-        randerWidth: '',
-        errorHtml: "",
-        editAdd: true,
-        examples: '',
-        messageQueue: false,
-        dataSourceDis: false,
-        errorConnect: false,
-        exchange: '',
-        editId: '',
-        testPass: 0,
-        ruleForm: {
-          dataSourceName: '',
-          dbType: '',
-          userName: '',
-          extendProperties: '',
-          userPassword: '',
-          properties: '',
-          url: '',
-          mark: '',
-        },
-        modelFloor: {
-          display: 'block',
-          textAlign: 'right',
-          padding: '0 0 22px 0'
-        },
-        rules: {
-          dataSourceName: [{
+    return {
+      errorText: {
+        color: "#F56C6C",
+        lineHeight: "45px",
+        marginLeft: "10px"
+      },
+      randerWidth: "",
+      errorHtml: "",
+      editAdd: true,
+      examples: "",
+      messageQueue: false,
+      dataSourceDis: false,
+      errorConnect: false,
+      exchange: "",
+      editId: "",
+      testPass: 0,
+      ruleForm: {
+        dataSourceName: "",
+        dbType: "",
+        userName: "",
+        extendProperties: "",
+        userPassword: "",
+        properties: "",
+        url: "",
+        mark: ""
+      },
+      modelFloor: {
+        display: "block",
+        textAlign: "right",
+        padding: "0 0 22px 0"
+      },
+      rules: {
+        dataSourceName: [
+          {
             required: true,
-            message: '请输入连接名称',
-            trigger: 'blur'
-          }],
-          extendProperties: [{
-            validator: validatePass2,
-            trigger: 'blur'
-          }],
-          url: [{
-            required: true,
-            message: '请输入连接url',
-            trigger: 'blur'
-          }],
-          userName: [{
-            required: true,
-            message: '请输入用户名',
-            trigger: 'blur'
-          }],
-          userPassword: [{
-            required: true,
-            message: '请输入用户密码',
-            trigger: 'blur'
-          }]
-        }
-      };
-    },
-    mixins: [project],
-    components: {},
-    computed: {},
-    mounted() {},
-    methods: {
-      mysqlVal(val, row = '') {
-        /**
-         * 数据库类型的判断
-         * @param {String} val 数据库类型
-         * @param {Object} row 表格参数
-         */
-        this.dataSourceDis = false;
-
-        this.resetForm('ruleForm')
-        this.editAdd = true;
-
-        // 连接名为小写
-        this.ruleForm.dbType = val;
-        let low = val.toLocaleLowerCase();
-
-        // 数据库类型示例
-        if (val === 'MongoDB') {
-          this.examples = '127.0.0.1:27010/monitoring';
-        } else {
-          this.examples = `jdbc:${low}://server:1433;databasename=test`
-        }
-        this.randerWidth = '170px';
-
-        if (val === 'RabbitMQ') {
-          this.messageQueue = true;
-          this.randerWidth = '120px';
-          this.examples = '127.0.0.1:5672'
-
-          // 新增窗口队列
-          if (row === '') {
-            this.exchange = ''
-            // this.dataSourceFlage = false;
-          } else {
-            // 修改窗口队列
-            let properties = JSON.parse(row['properties']);
-            this.exchange = properties['exchange']
-            // this.dataSourceFlage = true;
+            message: "请输入连接名称",
+            trigger: "blur"
           }
-          return
-        }
-        this.messageQueue = false;
+        ],
+        extendProperties: [
+          {
+            validator: validatePass2,
+            trigger: "blur"
+          }
+        ],
+        url: [
+          {
+            required: true,
+            message: "请输入连接url",
+            trigger: "blur"
+          }
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }
+        ],
+        userPassword: [
+          {
+            required: true,
+            message: "请输入用户密码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    mysqlVal(val, row = "") {
+      /**
+       * 数据库类型的判断
+       * @param {String} val 数据库类型
+       * @param {Object} row 表格参数
+       */
+      this.dataSourceDis = false;
 
-      },
-      editVal(row) {
-        /**
-         * 修改窗口
-         * @param {Object} row 表格行点击参数
-         */
-        this.mysqlVal(row.dbType, row);
-        this.editAdd = false;
-        this.dataSourceDis = true;
-        let {
-          keys
-        } = Object;
-        this.editId = row.id;
-        for (let item of keys(this.ruleForm)) {
-          this.ruleForm[item] = row[item]
-        }
-      },
-      connectionTesting() {
-        /**
-         * 连接测试，数据矫正
-         */
-        this.correct('ruleForm', () => {
+      this.resetForm("ruleForm");
+      this.editAdd = true;
 
-          // 消息队列
-          this.$http.post(this.nozzle.testSource, this.ruleForm).then(response => {
+      // 连接名为小写
+      this.ruleForm.dbType = val;
+      let low = val.toLocaleLowerCase();
+
+      // 数据库类型示例
+      if (val === "MongoDB") {
+        this.examples = "127.0.0.1:27010/monitoring";
+      } else {
+        this.examples = `jdbc:${low}://server:1433;databasename=test`;
+      }
+      this.randerWidth = "170px";
+
+      if (val === "RabbitMQ") {
+        this.messageQueue = true;
+        this.randerWidth = "120px";
+        this.examples = "127.0.0.1:5672";
+
+        // 新增窗口队列
+        if (row === "") {
+          this.exchange = "";
+          // this.dataSourceFlage = false;
+        } else {
+          // 修改窗口队列
+          let properties = JSON.parse(row["properties"]);
+          this.exchange = properties["exchange"];
+          // this.dataSourceFlage = true;
+        }
+        return;
+      }
+      this.messageQueue = false;
+    },
+    editVal(row) {
+      /**
+       * 修改窗口
+       * @param {Object} row 表格行点击参数
+       */
+      this.mysqlVal(row.dbType, row);
+      this.editAdd = false;
+      this.dataSourceDis = true;
+      let { keys } = Object;
+      this.editId = row.id;
+      for (let item of keys(this.ruleForm)) {
+        this.ruleForm[item] = row[item];
+      }
+    },
+    connectionTesting() {
+      /**
+       * 连接测试，数据矫正
+       */
+      this.correct("ruleForm", () => {
+        // 消息队列
+        this.$http
+          .post(this.nozzle.testSource, this.ruleForm)
+          .then(response => {
             if (response.data.code === 200) {
               this.testPass = 200;
               this.errorConnect = true;
-              this.errorText.color = '#41ca4c'
-              this.errorHtml = '测试连接成功';
+              this.errorText.color = "#41ca4c";
+              this.errorHtml = "测试连接成功";
             } else {
               this.testPass = 0;
-              this.errorHtml = response.data.data
+              this.errorHtml = response.data.data;
               this.errorConnect = true;
-              this.errorText.color = '#F56C6C'
+              this.errorText.color = "#F56C6C";
             }
-          })
-        })
-
-      },
-      dataEdits() {
-        /**
-         * 按钮取消事件
-         */
-
-        this.errorConnect = false;
-        this.testPass = 0;
-        this.$emit('dataEdits', false);
-      },
-      async addParameter(api, dif = 1) {
-        // 新增数据传值
-        let datas = this.ruleForm;
-
-        // 消息队列
-        if (this.ruleForm.dbType === "RabbitMQ") {
-          datas['properties'] = JSON.stringify({
-            exchange: this.exchange
           });
-        }
+      });
+    },
+    dataEdits() {
+      /**
+       * 按钮取消事件
+       */
 
-        // 修改数据
-        if (dif === 2) {
-          datas['id'] = this.editId;
-        }
+      this.errorConnect = false;
+      this.testPass = 0;
+      this.$emit("dataEdits", false);
+    },
+    async addParameter(api, dif = 1) {
+      // 新增数据传值
+      let datas = this.ruleForm;
 
-        const response = await this.$http.post(api, datas);
-        notify(response);
-        if (response.data.code === 200) {
-          this.updateData();
-        }
-      },
-      resetForm(formName) {
-        // 清空表格数据
-        this.$refs[formName].resetFields();
-      },
-      correct(formName, cb, dif = 1) {
-        // 数据矫正
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            // 连接测试
-            // if (dif === 2) {
-            //   if (this.testPass === 0) {
-            //     this.$notify({
-            //       type: 'warning',
-            //       message: '请先完成连接测试'
-            //     })
-            //     return
-            //   }
-            // }
-            cb()
-            return true
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
+      // 消息队列
+      if (this.ruleForm.dbType === "RabbitMQ") {
+        datas["properties"] = JSON.stringify({
+          exchange: this.exchange
         });
+      }
 
-      },
-      updateData() {
-        /**
-         * 更新数据
-         */
-        this.$emit('updateData')
-      },
-      submitForm(dif) {
-        // 添加数据,修改数据
-        this.correct('ruleForm', () => {
-          let api = '';
+      // 修改数据
+      if (dif === 2) {
+        datas["id"] = this.editId;
+      }
+
+      const response = await this.$http.post(api, datas);
+      notify(response);
+      if (response.data.code === 200) {
+        this.updateData();
+      }
+    },
+    resetForm(formName) {
+      // 清空表格数据
+      this.$refs[formName].resetFields();
+    },
+    correct(formName, cb, dif = 1) {
+      // 数据矫正
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 连接测试
+          // if (dif === 2) {
+          //   if (this.testPass === 0) {
+          //     this.$notify({
+          //       type: 'warning',
+          //       message: '请先完成连接测试'
+          //     })
+          //     return
+          //   }
+          // }
+          cb();
+          return true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    updateData() {
+      /**
+       * 更新数据
+       */
+      this.$emit("updateData");
+    },
+    submitForm(dif) {
+      // 添加数据,修改数据
+      this.correct(
+        "ruleForm",
+        () => {
+          let api = "";
           if (dif === 1) {
             api = this.nozzle.addSource;
-            this.addParameter(api)
+            this.addParameter(api);
           } else {
             api = this.nozzle.updateSource;
-            this.addParameter(api, 2)
+            this.addParameter(api, 2);
           }
           this.dataEdits();
-        }, 2)
-
-      }
+        },
+        2
+      );
     }
   }
-
+};
 </script>
 
 <style>
-  #sqlSource {
-    width: 100%;
-  }
+#sqlSource {
+  width: 100%;
+}
 
-  .sqlType {
-    font-size: 16px;
-    color: #001529;
-    margin-bottom: 20px;
-    padding-left: 11px;
-  }
+/* .sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+} */
 
-  .connection {
-    margin-top: 5px;
-  }
-
+.connection {
+  margin-top: 5px;
+}
 </style>
diff --git a/src/components/shujulvwang/connectManager.vue b/src/components/shujulvwang/connectManager.vue
index d2c21e2..ce278b9 100644
--- a/src/components/shujulvwang/connectManager.vue
+++ b/src/components/shujulvwang/connectManager.vue
@@ -1,9 +1,17 @@
 <template>
   <!--连接管理-->
   <div id="dataSources" class="asideBgc tab">
-    <div class='butClick'>
-      <xf-buttons @changes="searChange" :btnAuthority='authority' @add='dataEditSql = true' @edit='clickeEdit'
-        @deletes='delectVals' @get='searchChange' :searchPlaceholder='searchPlaceholder' :addText='addText'>
+    <div class="butClick">
+      <xf-buttons
+        @changes="searChange"
+        :btnAuthority="authority"
+        @add="dataEditSql = true"
+        @edit="clickeEdit"
+        @deletes="delectVals"
+        @get="searchChange"
+        :searchPlaceholder="searchPlaceholder"
+        :addText="addText"
+      >
         <!-- 下拉列表框 -->
         <!-- <template #dataSource>
           <span>
@@ -33,38 +41,67 @@
       </xf-buttons>
     </div>
 
-    <xfTable ref="table" :btnAuthority='authority' @sizeSee='sizeChange' @selectionChange='selectionChange'
-      @currentChange='currentChange' @refreshChange='refreshChange' @handleEdit='handleEdit' @delectVal='delectVal'
-      @ruleAdden='ruleAdden' :slotOverhidden='slotName'>
+    <xfTable
+      ref="table"
+      :btnAuthority="authority"
+      @sizeSee="sizeChange"
+      @selectionChange="selectionChange"
+      @currentChange="currentChange"
+      @refreshChange="refreshChange"
+      @handleEdit="handleEdit"
+      @delectVal="delectVal"
+      @ruleAdden="ruleAdden"
+      :slotOverhidden="slotName"
+    >
     </xfTable>
 
     <!-- 数据添加 -->
-    <el-dialog :title="modelH" :visible.sync="dataEdit" :close-on-click-modal='closeOnClick' :lock-scroll='closeOnClick'
-      width="50%" @open='openContent' @close='closeContent' :modal='closeOnClick'>
-
-      <SqlSource ref='sqlSources' @dataEdits='dataEdits' @updateData='getLists'></SqlSource>
-
+    <el-dialog
+      :title="modelH"
+      :visible.sync="dataEdit"
+      :close-on-click-modal="closeOnClick"
+      :lock-scroll="closeOnClick"
+      width="50%"
+      @open="openContent"
+      @close="closeContent"
+      :modal="closeOnClick"
+    >
+      <SqlSource
+        ref="sqlSources"
+        @dataEdits="dataEdits"
+        @updateData="getLists"
+      ></SqlSource>
     </el-dialog>
 
     <!-- 数据库类型和队列类型 -->
-    <el-dialog title="添加数据库或队列" :visible.sync="dataEditSql" :close-on-click-modal='closeOnClick'
-      :lock-scroll='closeOnClick' width="50%" :modal='closeOnClick'>
+    <el-dialog
+      title="添加数据库或队列"
+      :visible.sync="dataEditSql"
+      :close-on-click-modal="closeOnClick"
+      :lock-scroll="closeOnClick"
+      width="50%"
+      :modal="closeOnClick"
+    >
+      <div v-for="(item, index) in mysqls" :key="index">
+        <p class="sqlGx">{{ item.label }}</p>
 
-      <div v-for='(item,index) in mysqls' :key='index'>
-        <p class="sqlGx">{{item.label}}</p>
-
-        <el-row type='flex' class="sqlIcon">
-          <el-col :span='5' :offset='1' v-for='items in item.options' :key='items.value' class="text-center"
-            @click.native='handleCommand(items.value)'>
+        <el-row type="flex" class="sqlIcon">
+          <el-col
+            :span="5"
+            :offset="1"
+            v-for="items in item.options"
+            :key="items.value"
+            class="text-center"
+            @click.native="handleCommand(items.value)"
+          >
             <el-card shadow="hover">
               <span><i :class="items.iconfont"></i></span>
-              <p>{{items.value}}</p>
+              <p>{{ items.value }}</p>
             </el-card>
           </el-col>
         </el-row>
-
       </div>
-      
+
       <div slot="footer" class="dialog-footer">
         <el-button @click="dataEditSql = false">取 消</el-button>
       </div>
@@ -73,287 +110,299 @@
 </template>
 
 <script>
-  import project from '../../mixins/project'
-  import * as locasto from '../../util/item';
-  import SqlSource from '../../model/sqlSource';
-  var moment = require('moment');
-  
-  import {
-    notify
-  } from '../../util/item'
+import project from "../../mixins/project";
+import * as locasto from "../../util/item";
+import SqlSource from "../../model/sqlSource";
+var moment = require("moment");
 
-  /*负责导出组件*/
-  export default {
-    name: 'dataSources',
-    data() {
-      return {
-        deleteId: 'id', //标记删除字段
-        addText: '添加连接', //标记删除字段
-        modelHead: ['添加连接信息', '修改连接信息'],
-        modelH: '',
-        mysqls: [{
-          label: '数据库',
-          options: [{
-            value: 'MySQL',
-            iconfont: 'iconfont icon-mysql',
-            label: 'MySQL'
-          }, {
-            value: 'Oracle',
-            iconfont: 'iconfont icon-oracle',
-            label: 'Oracle'
-          }, {
-            value: 'SQLServer',
-            iconfont: 'iconfont icon-db_mysql_server',
-            label: 'SQLServer'
-          }, {
-            value: 'MongoDB',
-            iconfont: 'iconfont icon-MongoDB',
-            label: 'MongoDB'
-          }]
-        }, {
-          label: '消息队列',
-          options: [{
-            value: 'RabbitMQ',
-            iconfont: 'iconfont icon-RabbitMQ',
-            label: 'RabbitMQ'
-          }]
-        }],
-        mysqlsValue: '',
-        searchPlaceholder: '请输入规则名称',
-        dialogVisible: false,
-        dataEdit: false,
-        dataEditSql: false,
-        center: true,
-        editAdd: true,
-        closeOnClick: false,
-        slotName: 'dataSourceName',
-        deleteList: [],
-        clickValue: '',
-        loadOption: {
-          menuWidth: 150,
-          selection: true, //多选框选择
-          menu: true,
-          column: [{
-            label: '数据库类型',
-            prop: 'dbType'
-          }, {
-            label: '连接名称',
-            prop: 'dataSourceName',
+import { notify } from "../../util/item";
+
+/*负责导出组件*/
+export default {
+  name: "dataSources",
+  data() {
+    return {
+      deleteId: "id", //标记删除字段
+      addText: "添加连接", //标记删除字段
+      modelHead: ["添加连接信息", "修改连接信息"],
+      modelH: "",
+      mysqls: [
+        {
+          label: "数据库",
+          options: [
+            {
+              value: "MySQL",
+              iconfont: "iconfont icon-mysql",
+              label: "MySQL"
+            },
+            {
+              value: "Oracle",
+              iconfont: "iconfont icon-oracle",
+              label: "Oracle"
+            },
+            {
+              value: "SQLServer",
+              iconfont: "iconfont icon-db_mysql_server",
+              label: "SQLServer"
+            },
+            {
+              value: "MongoDB",
+              iconfont: "iconfont icon-MongoDB",
+              label: "MongoDB"
+            }
+          ]
+        },
+        {
+          label: "消息队列",
+          options: [
+            {
+              value: "RabbitMQ",
+              iconfont: "iconfont icon-RabbitMQ",
+              label: "RabbitMQ"
+            }
+          ]
+        }
+      ],
+      mysqlsValue: "",
+      searchPlaceholder: "请输入规则名称",
+      dialogVisible: false,
+      dataEdit: false,
+      dataEditSql: false,
+      center: true,
+      editAdd: true,
+      closeOnClick: false,
+      slotName: "dataSourceName",
+      deleteList: [],
+      clickValue: "",
+      loadOption: {
+        menuWidth: 150,
+        selection: true, //多选框选择
+        menu: true,
+        column: [
+          {
+            label: "数据库类型",
+            prop: "dbType"
+          },
+          {
+            label: "连接名称",
+            prop: "dataSourceName",
             overHidden: true,
             solt: true
-          }, {
-            label: '数据库地址URL',
-            prop: 'url'
-          }, {
-            label: '创建人',
-            prop: 'createdby'
-          }, {
-            label: '创建时间',
-            prop: 'created',
-            formatter: function (row, value, text, column) {
+          },
+          {
+            label: "数据库地址URL",
+            prop: "url"
+          },
+          {
+            label: "创建人",
+            prop: "createdby"
+          },
+          {
+            label: "创建时间",
+            prop: "created",
+            formatter: function(row, value, text, column) {
               if (value === null) {
-                return ''
+                return "";
               }
-              return moment(value).format('YYYY-MM-DD HH:mm:ss')
+              return moment(value).format("YYYY-MM-DD HH:mm:ss");
             }
-          }]
-        },
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  mounted() {
+    this.getLists();
+  },
+  components: {
+    SqlSource
+  },
+  methods: {
+    handleCommand(command) {
+      //   下拉选中数据库类型
+      this.dataEditSql = false;
+      this.mysqlsValue = command;
+      this.handleAdd();
+    },
+    dataEdits(val) {
+      /**
+       * 隐藏
+       */
+      this.dataEdit = val;
+    },
+    searchChange(val = "") {
+      // 搜索数据
+      if (val === "") {
+        this.page.currentPage = 1;
+        this.getLists();
+      } else {
+        this.getLists(val);
       }
     },
-    mixins: [project],
-    mounted() {
-      this.getLists();
+    ruleAdden(row, index) {
+      console.log(row);
+      console.log(index);
     },
-    components: {
-      SqlSource
+    sortDataCopy(row) {
+      /**
+       * 数据渲染
+       */
+      for (let [key, value] of Object.entries(this.ruleForm)) {
+        this.ruleForm[key] = row[key];
+      }
     },
-    methods: {
-      handleCommand(command) {
-        //   下拉选中数据库类型
-        this.dataEditSql = false;
-        this.mysqlsValue = command;
-        this.handleAdd()
-      },
-      dataEdits(val) {
-        /**
-         * 隐藏
-         */
-        this.dataEdit = val;
-      },
-      searchChange(val = '') {
-        // 搜索数据
-        if (val === '') {
-          this.page.currentPage = 1;
-          this.getLists();
+    async getLists(ruleName = null) {
+      /**
+       * 获取任务列表
+       */
+      this.deleteList = [];
+      let datas = {
+        params: {
+          pageNo: this.page.currentPage,
+          pageSize: this.page.pageSize
+        }
+      };
+      // 获取数据返回状态 日志
+      let response = await this.getTableData(datas, this.nozzle.getSource);
+      this.rendering(response);
+    },
+    resetClear(item, keys) {
+      for (let items of Object.keys(this.ruleForm[item])) {
+        if (items === keys) {
+          this.ruleForm[item][items] = [];
         } else {
-          this.getLists(val);
+          this.ruleForm[item][items] = "";
         }
-      },
-      ruleAdden(row, index) {
-        console.log(row);
-        console.log(index);
-      },
-      sortDataCopy(row) {
-        /**
-         * 数据渲染
-         */
-        for (let [key, value] of Object.entries(this.ruleForm)) {
-          this.ruleForm[key] = row[key];
-        }
-      },
-      async getLists(ruleName = null) {
-        /**
-         * 获取任务列表
-         */
-        this.deleteList = [];
-        let datas = {
-          params: {
-            "pageNo": this.page.currentPage,
-            "pageSize": this.page.pageSize
-          }
-        }
-        // 获取数据返回状态 日志
-        let response = await this.getTableData(datas, this.nozzle.getSource);
-        this.rendering(response);
-      },
-      resetClear(item, keys) {
-        for (let items of Object.keys(this.ruleForm[item])) {
-          if (items === keys) {
-            this.ruleForm[item][items] = []
-          } else {
-            this.ruleForm[item][items] = ''
-          }
-        }
-      },
-      handleAdd() {
-        // 新增按钮
-        if (this.mysqlsValue === '') {
-          this.$notify({
-            type: 'info',
-            message: "请选择数据库或消息队列再进行数据"
-          })
-          return
-        }
-        this.editAdd = true;
-        this.modelH = this.modelHead[0];
-        this.dataEdit = true;
-        this.$nextTick(function () {
-          this.$refs.sqlSources.mysqlVal(this.mysqlsValue)
-        })
-      },
-      clickeEdit() {
-        // 单击修改
-        if (!this.clickValue) {
-          this.$notify.warning('请先选择要修改的行,再进行数据修改!');
-          return
-        } else {
-          this.handleEdit(this.clickValue)
-        }
-      },
-      handleEdit(row) {
-        // 行内点击修改
-        this.editAdd = false;
-        this.modelH = this.modelHead[1]
-        this.dataEdit = true;
+      }
+    },
+    handleAdd() {
+      // 新增按钮
+      if (this.mysqlsValue === "") {
+        this.$notify({
+          type: "info",
+          message: "请选择数据库或消息队列再进行数据"
+        });
+        return;
+      }
+      this.editAdd = true;
+      this.modelH = this.modelHead[0];
+      this.dataEdit = true;
+      this.$nextTick(function() {
+        this.$refs.sqlSources.mysqlVal(this.mysqlsValue);
+      });
+    },
+    clickeEdit() {
+      // 单击修改
+      if (!this.clickValue) {
+        this.$notify.warning("请先选择要修改的行,再进行数据修改!");
+        return;
+      } else {
+        this.handleEdit(this.clickValue);
+      }
+    },
+    handleEdit(row) {
+      // 行内点击修改
+      this.editAdd = false;
+      this.modelH = this.modelHead[1];
+      this.dataEdit = true;
 
-        this.$nextTick(function () {
-          this.$refs.sqlSources.editVal(row)
-        })
-      },
-      deleteUserLise(ids) {
-        // 删除用户
-        let datas = {
-          "params": {
-            "ids": ids
-          }
+      this.$nextTick(function() {
+        this.$refs.sqlSources.editVal(row);
+      });
+    },
+    deleteUserLise(ids) {
+      // 删除用户
+      let datas = {
+        params: {
+          ids: ids
         }
-        this.asyncDelete(datas, this.nozzle.deleteSource);
-      },
+      };
+      this.asyncDelete(datas, this.nozzle.deleteSource);
     }
   }
-
+};
 </script>
-<style>
-  #dataSources .formJcDoc {
-    font-size: 20px;
-    color: #333;
-    margin: 15px 0;
-  }
+<style scoped>
+#dataSources .formJcDoc {
+  font-size: 20px;
+  color: #333;
+  margin: 15px 0;
+}
 
-  #dataSources .iconfont[class^="icon"] {
-    width: 17px;
-  }
+#dataSources .iconfont[class^="icon"] {
+  width: 17px;
+}
 
-  #dataSources .aboutType {
-    color: rgb(102, 177, 255);
-    cursor: pointer;
-  }
+#dataSources .aboutType {
+  color: rgb(102, 177, 255);
+  cursor: pointer;
+}
 
-  .deleteIcon {
-    cursor: pointer;
-    color: #f15353;
-  }
+.deleteIcon {
+  cursor: pointer;
+  color: #f15353;
+}
 
-  .conditiona {
-    padding: 0px 0 10px 100px;
-  }
+.conditiona {
+  padding: 0px 0 10px 100px;
+}
 
-  hr {
-    opacity: 0.3;
-  }
+hr {
+  opacity: 0.3;
+}
 
-  .m-b-20 {
-    margin-bottom: 20px;
-  }
+.m-b-20 {
+  margin-bottom: 20px;
+}
 
-  #dataSources .sourceS {
-    display: inline-block;
-    width: 124px;
-    line-height: 29px;
-    background-color: #F0F0F0;
-    border: 1px solid #D1D1D1;
-    margin-right: 10px;
-    border-radius: 3px;
-    padding-left: 10px;
-    transform: translateY(1px);
-  }
+#dataSources .sourceS {
+  display: inline-block;
+  width: 124px;
+  line-height: 29px;
+  background-color: #f0f0f0;
+  border: 1px solid #d1d1d1;
+  margin-right: 10px;
+  border-radius: 3px;
+  padding-left: 10px;
+  transform: translateY(1px);
+}
 
-  #dataSources .el-dropdown-link {
-    color: #333;
-  }
+#dataSources .el-dropdown-link {
+  color: #333;
+}
 
-  .iconSql .iconfont[class^=icon] {
-    font-size: 18px;
-  }
+.iconSql .iconfont[class^="icon"] {
+  font-size: 18px;
+}
 
-  .sqlGx {
-    position: relative;
-    padding-left: 15px;
-    font-size: 20px;
-    cursor: pointer;
-  }
+.sqlGx {
+  position: relative;
+  padding-left: 15px;
+  font-size: 20px;
+  cursor: pointer;
+}
 
-  .sqlIcon {
-    margin: 20px 0;
-  }
+.sqlIcon {
+  margin: 20px 0;
+}
 
-  .sqlIcon p {
-    line-height: 36px;
-  }
+.sqlIcon p {
+  line-height: 36px;
+}
 
-  .sqlIcon .iconfont[class^="icon"] {
-    width: auto !important;
-    font-size: 60px;
-  }
+.sqlIcon .iconfont[class^="icon"] {
+  width: auto !important;
+  font-size: 60px;
+}
 
-  .sqlGx::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 10%;
-    width: 2px;
-    height: 80%;
-    background-color: #678ee0;
-  }
-
+.sqlGx::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10%;
+  width: 2px;
+  height: 80%;
+  background-color: #678ee0;
+}
 </style>

diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index ec2dc5b..68d4699 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -1,3 +1,24 @@
+.sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+}
+.el-tag{
+  background-color: var(--tablethead) !important;
+  border-color:var(--tablethead) !important;
+}
+
+.el-button--info.is-plain {
+  color: #fff !important;
+  background: #409eff !important;
+  border-color: #409eff !important;
+}
+
+.avue-crud__menu {
+  background-color: transparent !important;
+}
+
 .el-card {
   background-color: transparent;
   border: 1px solid var(--white)
@@ -262,7 +283,8 @@
 }
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover,
-.el-cascader-node:hover {
+.el-cascader-node:hover,
+.el-table__body tr.hover-row>td {
   background-color: var(--selecthover) !important;
 }
 .el-select-dropdown__item,
diff --git a/src/components/model/sqlSource.vue b/src/components/model/sqlSource.vue
index c16e299..acf5fce 100644
--- a/src/components/model/sqlSource.vue
+++ b/src/components/model/sqlSource.vue
@@ -1,28 +1,48 @@
 <!-- 连接管理 -  符合数据库列表进行定制的内容 -->
 <template>
   <div id="sqlSource text-center">
+    <p class="sqlType">数据库类型：{{ ruleForm.dbType }}</p>
 
-    <p class="sqlType">数据库类型：{{ruleForm.dbType}}</p>
-
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="randerWidth" class="demo-ruleForm">
-
-      <el-col :span='12'>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      :label-width="randerWidth"
+      class="demo-ruleForm"
+    >
+      <el-col :span="12">
         <el-form-item label="连接名称：" prop="dataSourceName">
-          <el-input v-model="ruleForm.dataSourceName" :disabled="dataSourceDis" placeholder="请输入连接名称"></el-input>
+          <el-input
+            v-model="ruleForm.dataSourceName"
+            :disabled="dataSourceDis"
+            placeholder="请输入连接名称"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12' style='height:62px;'>
+      <el-col :span="12" style="height:62px;">
         <el-form-item label="连接url：" prop="url">
-          <el-col :span='22'>
-            <el-input v-model="ruleForm.url" placeholder="请输入连接url"></el-input>
-
+          <el-col :span="22">
+            <el-input
+              v-model="ruleForm.url"
+              placeholder="请输入连接url"
+            ></el-input>
           </el-col>
-          <el-col :span='2' class="text-right">
+          <el-col :span="2" class="text-right">
             <div class="aboutType">
-              <el-tooltip class="item" effect="dark" :content="'点击图标复制示例：'+examples" placement="top-start">
-                <span><i class="iconfont icon-49" v-clipboard:success="onCopy" v-clipboard:error="onError"
-                    v-clipboard:copy="examples"></i>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="'点击图标复制示例：' + examples"
+                placement="top-start"
+              >
+                <span
+                  ><i
+                    class="iconfont icon-49"
+                    v-clipboard:success="onCopy"
+                    v-clipboard:error="onError"
+                    v-clipboard:copy="examples"
+                  ></i>
                 </span>
               </el-tooltip>
             </div>
@@ -30,320 +50,355 @@
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="ruleForm.userName" @keyup.native="notEmpty(ruleForm.userName,'userName')"
-            placeholder="请输入用户名"></el-input>
+          <el-input
+            v-model="ruleForm.userName"
+            @keyup.native="notEmpty(ruleForm.userName, 'userName')"
+            placeholder="请输入用户名"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户密码：" prop="userPassword">
-          <el-input type='password' v-model="ruleForm.userPassword"
-            @keyup.native="notEmpty(ruleForm.userPassword,'userPassword')" placeholder="请输入用户密码">
+          <el-input
+            type="password"
+            v-model="ruleForm.userPassword"
+            @keyup.native="notEmpty(ruleForm.userPassword, 'userPassword')"
+            placeholder="请输入用户密码"
+          >
           </el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="备注：">
           <el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
-        <el-form-item v-show='!messageQueue' label="数据库属性串：">
-          <el-input v-model="ruleForm.properties" placeholder="请输入数据库属性串"></el-input>
+      <el-col :span="12">
+        <el-form-item v-show="!messageQueue" label="数据库属性串：">
+          <el-input
+            v-model="ruleForm.properties"
+            placeholder="请输入数据库属性串"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item v-show='!messageQueue' label="额外数量连接属性：" prop="extendProperties">
-          <el-input type="textarea" v-model="ruleForm.extendProperties" placeholder="请输入额外数量连接属性"></el-input>
+      <el-col :span="24">
+        <el-form-item
+          v-show="!messageQueue"
+          label="额外数量连接属性："
+          prop="extendProperties"
+        >
+          <el-input
+            type="textarea"
+            v-model="ruleForm.extendProperties"
+            placeholder="请输入额外数量连接属性"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item label="交换机名称：" v-show='messageQueue'>
-          <el-input v-model="exchange" placeholder="请输入交换机名称"></el-input>
+      <el-col :span="24">
+        <el-form-item label="交换机名称：" v-show="messageQueue">
+          <el-input
+            v-model="exchange"
+            placeholder="请输入交换机名称"
+          ></el-input>
         </el-form-item>
       </el-col>
-
     </el-form>
 
-    <span slot="footer" class="dialog-footer" :style='modelFloor'>
-      <el-button @click.native='connectionTesting' size='mini' class="f_left connection">连 接 测 试</el-button>
-      <p class="f_left" :style='errorText' v-show='errorConnect'>{{errorHtml}}</p>
-      <el-button type="primary" v-show='editAdd' @click="submitForm(1)">添 加</el-button>
-      <el-button type="primary" v-show='!editAdd' @click="submitForm(2)">修 改</el-button>
+    <span slot="footer" class="dialog-footer" :style="modelFloor">
+      <el-button
+        @click.native="connectionTesting"
+        size="mini"
+        class="f_left connection"
+        >连 接 测 试</el-button
+      >
+      <p class="f_left" :style="errorText" v-show="errorConnect">
+        {{ errorHtml }}
+      </p>
+      <el-button type="primary" v-show="editAdd" @click="submitForm(1)"
+        >添 加</el-button
+      >
+      <el-button type="primary" v-show="!editAdd" @click="submitForm(2)"
+        >修 改</el-button
+      >
       <el-button @click.native="dataEdits">取 消</el-button>
     </span>
   </div>
 </template>
 
 <script>
-  import {
-    isJSON,
-    notify
-  } from '../util/item'
-  import project from '../mixins/project'
+import { isJSON, notify } from "../util/item";
+import project from "../mixins/project";
 
-  export default {
-    data() {
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback();
-        } else if (!isJSON(value)) {
-          callback(new Error('额外数量连接属性，为JSON格式'))
-        } else {
-          callback();
-        }
-      };
+export default {
+  data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback();
+      } else if (!isJSON(value)) {
+        callback(new Error("额外数量连接属性，为JSON格式"));
+      } else {
+        callback();
+      }
+    };
 
-      return {
-        errorText: {
-          color: '#F56C6C',
-          lineHeight: '45px',
-          marginLeft: '10px'
-        },
-        randerWidth: '',
-        errorHtml: "",
-        editAdd: true,
-        examples: '',
-        messageQueue: false,
-        dataSourceDis: false,
-        errorConnect: false,
-        exchange: '',
-        editId: '',
-        testPass: 0,
-        ruleForm: {
-          dataSourceName: '',
-          dbType: '',
-          userName: '',
-          extendProperties: '',
-          userPassword: '',
-          properties: '',
-          url: '',
-          mark: '',
-        },
-        modelFloor: {
-          display: 'block',
-          textAlign: 'right',
-          padding: '0 0 22px 0'
-        },
-        rules: {
-          dataSourceName: [{
+    return {
+      errorText: {
+        color: "#F56C6C",
+        lineHeight: "45px",
+        marginLeft: "10px"
+      },
+      randerWidth: "",
+      errorHtml: "",
+      editAdd: true,
+      examples: "",
+      messageQueue: false,
+      dataSourceDis: false,
+      errorConnect: false,
+      exchange: "",
+      editId: "",
+      testPass: 0,
+      ruleForm: {
+        dataSourceName: "",
+        dbType: "",
+        userName: "",
+        extendProperties: "",
+        userPassword: "",
+        properties: "",
+        url: "",
+        mark: ""
+      },
+      modelFloor: {
+        display: "block",
+        textAlign: "right",
+        padding: "0 0 22px 0"
+      },
+      rules: {
+        dataSourceName: [
+          {
             required: true,
-            message: '请输入连接名称',
-            trigger: 'blur'
-          }],
-          extendProperties: [{
-            validator: validatePass2,
-            trigger: 'blur'
-          }],
-          url: [{
-            required: true,
-            message: '请输入连接url',
-            trigger: 'blur'
-          }],
-          userName: [{
-            required: true,
-            message: '请输入用户名',
-            trigger: 'blur'
-          }],
-          userPassword: [{
-            required: true,
-            message: '请输入用户密码',
-            trigger: 'blur'
-          }]
-        }
-      };
-    },
-    mixins: [project],
-    components: {},
-    computed: {},
-    mounted() {},
-    methods: {
-      mysqlVal(val, row = '') {
-        /**
-         * 数据库类型的判断
-         * @param {String} val 数据库类型
-         * @param {Object} row 表格参数
-         */
-        this.dataSourceDis = false;
-
-        this.resetForm('ruleForm')
-        this.editAdd = true;
-
-        // 连接名为小写
-        this.ruleForm.dbType = val;
-        let low = val.toLocaleLowerCase();
-
-        // 数据库类型示例
-        if (val === 'MongoDB') {
-          this.examples = '127.0.0.1:27010/monitoring';
-        } else {
-          this.examples = `jdbc:${low}://server:1433;databasename=test`
-        }
-        this.randerWidth = '170px';
-
-        if (val === 'RabbitMQ') {
-          this.messageQueue = true;
-          this.randerWidth = '120px';
-          this.examples = '127.0.0.1:5672'
-
-          // 新增窗口队列
-          if (row === '') {
-            this.exchange = ''
-            // this.dataSourceFlage = false;
-          } else {
-            // 修改窗口队列
-            let properties = JSON.parse(row['properties']);
-            this.exchange = properties['exchange']
-            // this.dataSourceFlage = true;
+            message: "请输入连接名称",
+            trigger: "blur"
           }
-          return
-        }
-        this.messageQueue = false;
+        ],
+        extendProperties: [
+          {
+            validator: validatePass2,
+            trigger: "blur"
+          }
+        ],
+        url: [
+          {
+            required: true,
+            message: "请输入连接url",
+            trigger: "blur"
+          }
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }
+        ],
+        userPassword: [
+          {
+            required: true,
+            message: "请输入用户密码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    mysqlVal(val, row = "") {
+      /**
+       * 数据库类型的判断
+       * @param {String} val 数据库类型
+       * @param {Object} row 表格参数
+       */
+      this.dataSourceDis = false;
 
-      },
-      editVal(row) {
-        /**
-         * 修改窗口
-         * @param {Object} row 表格行点击参数
-         */
-        this.mysqlVal(row.dbType, row);
-        this.editAdd = false;
-        this.dataSourceDis = true;
-        let {
-          keys
-        } = Object;
-        this.editId = row.id;
-        for (let item of keys(this.ruleForm)) {
-          this.ruleForm[item] = row[item]
-        }
-      },
-      connectionTesting() {
-        /**
-         * 连接测试，数据矫正
-         */
-        this.correct('ruleForm', () => {
+      this.resetForm("ruleForm");
+      this.editAdd = true;
 
-          // 消息队列
-          this.$http.post(this.nozzle.testSource, this.ruleForm).then(response => {
+      // 连接名为小写
+      this.ruleForm.dbType = val;
+      let low = val.toLocaleLowerCase();
+
+      // 数据库类型示例
+      if (val === "MongoDB") {
+        this.examples = "127.0.0.1:27010/monitoring";
+      } else {
+        this.examples = `jdbc:${low}://server:1433;databasename=test`;
+      }
+      this.randerWidth = "170px";
+
+      if (val === "RabbitMQ") {
+        this.messageQueue = true;
+        this.randerWidth = "120px";
+        this.examples = "127.0.0.1:5672";
+
+        // 新增窗口队列
+        if (row === "") {
+          this.exchange = "";
+          // this.dataSourceFlage = false;
+        } else {
+          // 修改窗口队列
+          let properties = JSON.parse(row["properties"]);
+          this.exchange = properties["exchange"];
+          // this.dataSourceFlage = true;
+        }
+        return;
+      }
+      this.messageQueue = false;
+    },
+    editVal(row) {
+      /**
+       * 修改窗口
+       * @param {Object} row 表格行点击参数
+       */
+      this.mysqlVal(row.dbType, row);
+      this.editAdd = false;
+      this.dataSourceDis = true;
+      let { keys } = Object;
+      this.editId = row.id;
+      for (let item of keys(this.ruleForm)) {
+        this.ruleForm[item] = row[item];
+      }
+    },
+    connectionTesting() {
+      /**
+       * 连接测试，数据矫正
+       */
+      this.correct("ruleForm", () => {
+        // 消息队列
+        this.$http
+          .post(this.nozzle.testSource, this.ruleForm)
+          .then(response => {
             if (response.data.code === 200) {
               this.testPass = 200;
               this.errorConnect = true;
-              this.errorText.color = '#41ca4c'
-              this.errorHtml = '测试连接成功';
+              this.errorText.color = "#41ca4c";
+              this.errorHtml = "测试连接成功";
             } else {
               this.testPass = 0;
-              this.errorHtml = response.data.data
+              this.errorHtml = response.data.data;
               this.errorConnect = true;
-              this.errorText.color = '#F56C6C'
+              this.errorText.color = "#F56C6C";
             }
-          })
-        })
-
-      },
-      dataEdits() {
-        /**
-         * 按钮取消事件
-         */
-
-        this.errorConnect = false;
-        this.testPass = 0;
-        this.$emit('dataEdits', false);
-      },
-      async addParameter(api, dif = 1) {
-        // 新增数据传值
-        let datas = this.ruleForm;
-
-        // 消息队列
-        if (this.ruleForm.dbType === "RabbitMQ") {
-          datas['properties'] = JSON.stringify({
-            exchange: this.exchange
           });
-        }
+      });
+    },
+    dataEdits() {
+      /**
+       * 按钮取消事件
+       */
 
-        // 修改数据
-        if (dif === 2) {
-          datas['id'] = this.editId;
-        }
+      this.errorConnect = false;
+      this.testPass = 0;
+      this.$emit("dataEdits", false);
+    },
+    async addParameter(api, dif = 1) {
+      // 新增数据传值
+      let datas = this.ruleForm;
 
-        const response = await this.$http.post(api, datas);
-        notify(response);
-        if (response.data.code === 200) {
-          this.updateData();
-        }
-      },
-      resetForm(formName) {
-        // 清空表格数据
-        this.$refs[formName].resetFields();
-      },
-      correct(formName, cb, dif = 1) {
-        // 数据矫正
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            // 连接测试
-            // if (dif === 2) {
-            //   if (this.testPass === 0) {
-            //     this.$notify({
-            //       type: 'warning',
-            //       message: '请先完成连接测试'
-            //     })
-            //     return
-            //   }
-            // }
-            cb()
-            return true
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
+      // 消息队列
+      if (this.ruleForm.dbType === "RabbitMQ") {
+        datas["properties"] = JSON.stringify({
+          exchange: this.exchange
         });
+      }
 
-      },
-      updateData() {
-        /**
-         * 更新数据
-         */
-        this.$emit('updateData')
-      },
-      submitForm(dif) {
-        // 添加数据,修改数据
-        this.correct('ruleForm', () => {
-          let api = '';
+      // 修改数据
+      if (dif === 2) {
+        datas["id"] = this.editId;
+      }
+
+      const response = await this.$http.post(api, datas);
+      notify(response);
+      if (response.data.code === 200) {
+        this.updateData();
+      }
+    },
+    resetForm(formName) {
+      // 清空表格数据
+      this.$refs[formName].resetFields();
+    },
+    correct(formName, cb, dif = 1) {
+      // 数据矫正
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 连接测试
+          // if (dif === 2) {
+          //   if (this.testPass === 0) {
+          //     this.$notify({
+          //       type: 'warning',
+          //       message: '请先完成连接测试'
+          //     })
+          //     return
+          //   }
+          // }
+          cb();
+          return true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    updateData() {
+      /**
+       * 更新数据
+       */
+      this.$emit("updateData");
+    },
+    submitForm(dif) {
+      // 添加数据,修改数据
+      this.correct(
+        "ruleForm",
+        () => {
+          let api = "";
           if (dif === 1) {
             api = this.nozzle.addSource;
-            this.addParameter(api)
+            this.addParameter(api);
           } else {
             api = this.nozzle.updateSource;
-            this.addParameter(api, 2)
+            this.addParameter(api, 2);
           }
           this.dataEdits();
-        }, 2)
-
-      }
+        },
+        2
+      );
     }
   }
-
+};
 </script>
 
 <style>
-  #sqlSource {
-    width: 100%;
-  }
+#sqlSource {
+  width: 100%;
+}
 
-  .sqlType {
-    font-size: 16px;
-    color: #001529;
-    margin-bottom: 20px;
-    padding-left: 11px;
-  }
+/* .sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+} */
 
-  .connection {
-    margin-top: 5px;
-  }
-
+.connection {
+  margin-top: 5px;
+}
 </style>
diff --git a/src/components/shujulvwang/connectManager.vue b/src/components/shujulvwang/connectManager.vue
index d2c21e2..ce278b9 100644
--- a/src/components/shujulvwang/connectManager.vue
+++ b/src/components/shujulvwang/connectManager.vue
@@ -1,9 +1,17 @@
 <template>
   <!--连接管理-->
   <div id="dataSources" class="asideBgc tab">
-    <div class='butClick'>
-      <xf-buttons @changes="searChange" :btnAuthority='authority' @add='dataEditSql = true' @edit='clickeEdit'
-        @deletes='delectVals' @get='searchChange' :searchPlaceholder='searchPlaceholder' :addText='addText'>
+    <div class="butClick">
+      <xf-buttons
+        @changes="searChange"
+        :btnAuthority="authority"
+        @add="dataEditSql = true"
+        @edit="clickeEdit"
+        @deletes="delectVals"
+        @get="searchChange"
+        :searchPlaceholder="searchPlaceholder"
+        :addText="addText"
+      >
         <!-- 下拉列表框 -->
         <!-- <template #dataSource>
           <span>
@@ -33,38 +41,67 @@
       </xf-buttons>
     </div>
 
-    <xfTable ref="table" :btnAuthority='authority' @sizeSee='sizeChange' @selectionChange='selectionChange'
-      @currentChange='currentChange' @refreshChange='refreshChange' @handleEdit='handleEdit' @delectVal='delectVal'
-      @ruleAdden='ruleAdden' :slotOverhidden='slotName'>
+    <xfTable
+      ref="table"
+      :btnAuthority="authority"
+      @sizeSee="sizeChange"
+      @selectionChange="selectionChange"
+      @currentChange="currentChange"
+      @refreshChange="refreshChange"
+      @handleEdit="handleEdit"
+      @delectVal="delectVal"
+      @ruleAdden="ruleAdden"
+      :slotOverhidden="slotName"
+    >
     </xfTable>
 
     <!-- 数据添加 -->
-    <el-dialog :title="modelH" :visible.sync="dataEdit" :close-on-click-modal='closeOnClick' :lock-scroll='closeOnClick'
-      width="50%" @open='openContent' @close='closeContent' :modal='closeOnClick'>
-
-      <SqlSource ref='sqlSources' @dataEdits='dataEdits' @updateData='getLists'></SqlSource>
-
+    <el-dialog
+      :title="modelH"
+      :visible.sync="dataEdit"
+      :close-on-click-modal="closeOnClick"
+      :lock-scroll="closeOnClick"
+      width="50%"
+      @open="openContent"
+      @close="closeContent"
+      :modal="closeOnClick"
+    >
+      <SqlSource
+        ref="sqlSources"
+        @dataEdits="dataEdits"
+        @updateData="getLists"
+      ></SqlSource>
     </el-dialog>
 
     <!-- 数据库类型和队列类型 -->
-    <el-dialog title="添加数据库或队列" :visible.sync="dataEditSql" :close-on-click-modal='closeOnClick'
-      :lock-scroll='closeOnClick' width="50%" :modal='closeOnClick'>
+    <el-dialog
+      title="添加数据库或队列"
+      :visible.sync="dataEditSql"
+      :close-on-click-modal="closeOnClick"
+      :lock-scroll="closeOnClick"
+      width="50%"
+      :modal="closeOnClick"
+    >
+      <div v-for="(item, index) in mysqls" :key="index">
+        <p class="sqlGx">{{ item.label }}</p>
 
-      <div v-for='(item,index) in mysqls' :key='index'>
-        <p class="sqlGx">{{item.label}}</p>
-
-        <el-row type='flex' class="sqlIcon">
-          <el-col :span='5' :offset='1' v-for='items in item.options' :key='items.value' class="text-center"
-            @click.native='handleCommand(items.value)'>
+        <el-row type="flex" class="sqlIcon">
+          <el-col
+            :span="5"
+            :offset="1"
+            v-for="items in item.options"
+            :key="items.value"
+            class="text-center"
+            @click.native="handleCommand(items.value)"
+          >
             <el-card shadow="hover">
               <span><i :class="items.iconfont"></i></span>
-              <p>{{items.value}}</p>
+              <p>{{ items.value }}</p>
             </el-card>
           </el-col>
         </el-row>
-
       </div>
-      
+
       <div slot="footer" class="dialog-footer">
         <el-button @click="dataEditSql = false">取 消</el-button>
       </div>
@@ -73,287 +110,299 @@
 </template>
 
 <script>
-  import project from '../../mixins/project'
-  import * as locasto from '../../util/item';
-  import SqlSource from '../../model/sqlSource';
-  var moment = require('moment');
-  
-  import {
-    notify
-  } from '../../util/item'
+import project from "../../mixins/project";
+import * as locasto from "../../util/item";
+import SqlSource from "../../model/sqlSource";
+var moment = require("moment");
 
-  /*负责导出组件*/
-  export default {
-    name: 'dataSources',
-    data() {
-      return {
-        deleteId: 'id', //标记删除字段
-        addText: '添加连接', //标记删除字段
-        modelHead: ['添加连接信息', '修改连接信息'],
-        modelH: '',
-        mysqls: [{
-          label: '数据库',
-          options: [{
-            value: 'MySQL',
-            iconfont: 'iconfont icon-mysql',
-            label: 'MySQL'
-          }, {
-            value: 'Oracle',
-            iconfont: 'iconfont icon-oracle',
-            label: 'Oracle'
-          }, {
-            value: 'SQLServer',
-            iconfont: 'iconfont icon-db_mysql_server',
-            label: 'SQLServer'
-          }, {
-            value: 'MongoDB',
-            iconfont: 'iconfont icon-MongoDB',
-            label: 'MongoDB'
-          }]
-        }, {
-          label: '消息队列',
-          options: [{
-            value: 'RabbitMQ',
-            iconfont: 'iconfont icon-RabbitMQ',
-            label: 'RabbitMQ'
-          }]
-        }],
-        mysqlsValue: '',
-        searchPlaceholder: '请输入规则名称',
-        dialogVisible: false,
-        dataEdit: false,
-        dataEditSql: false,
-        center: true,
-        editAdd: true,
-        closeOnClick: false,
-        slotName: 'dataSourceName',
-        deleteList: [],
-        clickValue: '',
-        loadOption: {
-          menuWidth: 150,
-          selection: true, //多选框选择
-          menu: true,
-          column: [{
-            label: '数据库类型',
-            prop: 'dbType'
-          }, {
-            label: '连接名称',
-            prop: 'dataSourceName',
+import { notify } from "../../util/item";
+
+/*负责导出组件*/
+export default {
+  name: "dataSources",
+  data() {
+    return {
+      deleteId: "id", //标记删除字段
+      addText: "添加连接", //标记删除字段
+      modelHead: ["添加连接信息", "修改连接信息"],
+      modelH: "",
+      mysqls: [
+        {
+          label: "数据库",
+          options: [
+            {
+              value: "MySQL",
+              iconfont: "iconfont icon-mysql",
+              label: "MySQL"
+            },
+            {
+              value: "Oracle",
+              iconfont: "iconfont icon-oracle",
+              label: "Oracle"
+            },
+            {
+              value: "SQLServer",
+              iconfont: "iconfont icon-db_mysql_server",
+              label: "SQLServer"
+            },
+            {
+              value: "MongoDB",
+              iconfont: "iconfont icon-MongoDB",
+              label: "MongoDB"
+            }
+          ]
+        },
+        {
+          label: "消息队列",
+          options: [
+            {
+              value: "RabbitMQ",
+              iconfont: "iconfont icon-RabbitMQ",
+              label: "RabbitMQ"
+            }
+          ]
+        }
+      ],
+      mysqlsValue: "",
+      searchPlaceholder: "请输入规则名称",
+      dialogVisible: false,
+      dataEdit: false,
+      dataEditSql: false,
+      center: true,
+      editAdd: true,
+      closeOnClick: false,
+      slotName: "dataSourceName",
+      deleteList: [],
+      clickValue: "",
+      loadOption: {
+        menuWidth: 150,
+        selection: true, //多选框选择
+        menu: true,
+        column: [
+          {
+            label: "数据库类型",
+            prop: "dbType"
+          },
+          {
+            label: "连接名称",
+            prop: "dataSourceName",
             overHidden: true,
             solt: true
-          }, {
-            label: '数据库地址URL',
-            prop: 'url'
-          }, {
-            label: '创建人',
-            prop: 'createdby'
-          }, {
-            label: '创建时间',
-            prop: 'created',
-            formatter: function (row, value, text, column) {
+          },
+          {
+            label: "数据库地址URL",
+            prop: "url"
+          },
+          {
+            label: "创建人",
+            prop: "createdby"
+          },
+          {
+            label: "创建时间",
+            prop: "created",
+            formatter: function(row, value, text, column) {
               if (value === null) {
-                return ''
+                return "";
               }
-              return moment(value).format('YYYY-MM-DD HH:mm:ss')
+              return moment(value).format("YYYY-MM-DD HH:mm:ss");
             }
-          }]
-        },
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  mounted() {
+    this.getLists();
+  },
+  components: {
+    SqlSource
+  },
+  methods: {
+    handleCommand(command) {
+      //   下拉选中数据库类型
+      this.dataEditSql = false;
+      this.mysqlsValue = command;
+      this.handleAdd();
+    },
+    dataEdits(val) {
+      /**
+       * 隐藏
+       */
+      this.dataEdit = val;
+    },
+    searchChange(val = "") {
+      // 搜索数据
+      if (val === "") {
+        this.page.currentPage = 1;
+        this.getLists();
+      } else {
+        this.getLists(val);
       }
     },
-    mixins: [project],
-    mounted() {
-      this.getLists();
+    ruleAdden(row, index) {
+      console.log(row);
+      console.log(index);
     },
-    components: {
-      SqlSource
+    sortDataCopy(row) {
+      /**
+       * 数据渲染
+       */
+      for (let [key, value] of Object.entries(this.ruleForm)) {
+        this.ruleForm[key] = row[key];
+      }
     },
-    methods: {
-      handleCommand(command) {
-        //   下拉选中数据库类型
-        this.dataEditSql = false;
-        this.mysqlsValue = command;
-        this.handleAdd()
-      },
-      dataEdits(val) {
-        /**
-         * 隐藏
-         */
-        this.dataEdit = val;
-      },
-      searchChange(val = '') {
-        // 搜索数据
-        if (val === '') {
-          this.page.currentPage = 1;
-          this.getLists();
+    async getLists(ruleName = null) {
+      /**
+       * 获取任务列表
+       */
+      this.deleteList = [];
+      let datas = {
+        params: {
+          pageNo: this.page.currentPage,
+          pageSize: this.page.pageSize
+        }
+      };
+      // 获取数据返回状态 日志
+      let response = await this.getTableData(datas, this.nozzle.getSource);
+      this.rendering(response);
+    },
+    resetClear(item, keys) {
+      for (let items of Object.keys(this.ruleForm[item])) {
+        if (items === keys) {
+          this.ruleForm[item][items] = [];
         } else {
-          this.getLists(val);
+          this.ruleForm[item][items] = "";
         }
-      },
-      ruleAdden(row, index) {
-        console.log(row);
-        console.log(index);
-      },
-      sortDataCopy(row) {
-        /**
-         * 数据渲染
-         */
-        for (let [key, value] of Object.entries(this.ruleForm)) {
-          this.ruleForm[key] = row[key];
-        }
-      },
-      async getLists(ruleName = null) {
-        /**
-         * 获取任务列表
-         */
-        this.deleteList = [];
-        let datas = {
-          params: {
-            "pageNo": this.page.currentPage,
-            "pageSize": this.page.pageSize
-          }
-        }
-        // 获取数据返回状态 日志
-        let response = await this.getTableData(datas, this.nozzle.getSource);
-        this.rendering(response);
-      },
-      resetClear(item, keys) {
-        for (let items of Object.keys(this.ruleForm[item])) {
-          if (items === keys) {
-            this.ruleForm[item][items] = []
-          } else {
-            this.ruleForm[item][items] = ''
-          }
-        }
-      },
-      handleAdd() {
-        // 新增按钮
-        if (this.mysqlsValue === '') {
-          this.$notify({
-            type: 'info',
-            message: "请选择数据库或消息队列再进行数据"
-          })
-          return
-        }
-        this.editAdd = true;
-        this.modelH = this.modelHead[0];
-        this.dataEdit = true;
-        this.$nextTick(function () {
-          this.$refs.sqlSources.mysqlVal(this.mysqlsValue)
-        })
-      },
-      clickeEdit() {
-        // 单击修改
-        if (!this.clickValue) {
-          this.$notify.warning('请先选择要修改的行,再进行数据修改!');
-          return
-        } else {
-          this.handleEdit(this.clickValue)
-        }
-      },
-      handleEdit(row) {
-        // 行内点击修改
-        this.editAdd = false;
-        this.modelH = this.modelHead[1]
-        this.dataEdit = true;
+      }
+    },
+    handleAdd() {
+      // 新增按钮
+      if (this.mysqlsValue === "") {
+        this.$notify({
+          type: "info",
+          message: "请选择数据库或消息队列再进行数据"
+        });
+        return;
+      }
+      this.editAdd = true;
+      this.modelH = this.modelHead[0];
+      this.dataEdit = true;
+      this.$nextTick(function() {
+        this.$refs.sqlSources.mysqlVal(this.mysqlsValue);
+      });
+    },
+    clickeEdit() {
+      // 单击修改
+      if (!this.clickValue) {
+        this.$notify.warning("请先选择要修改的行,再进行数据修改!");
+        return;
+      } else {
+        this.handleEdit(this.clickValue);
+      }
+    },
+    handleEdit(row) {
+      // 行内点击修改
+      this.editAdd = false;
+      this.modelH = this.modelHead[1];
+      this.dataEdit = true;
 
-        this.$nextTick(function () {
-          this.$refs.sqlSources.editVal(row)
-        })
-      },
-      deleteUserLise(ids) {
-        // 删除用户
-        let datas = {
-          "params": {
-            "ids": ids
-          }
+      this.$nextTick(function() {
+        this.$refs.sqlSources.editVal(row);
+      });
+    },
+    deleteUserLise(ids) {
+      // 删除用户
+      let datas = {
+        params: {
+          ids: ids
         }
-        this.asyncDelete(datas, this.nozzle.deleteSource);
-      },
+      };
+      this.asyncDelete(datas, this.nozzle.deleteSource);
     }
   }
-
+};
 </script>
-<style>
-  #dataSources .formJcDoc {
-    font-size: 20px;
-    color: #333;
-    margin: 15px 0;
-  }
+<style scoped>
+#dataSources .formJcDoc {
+  font-size: 20px;
+  color: #333;
+  margin: 15px 0;
+}
 
-  #dataSources .iconfont[class^="icon"] {
-    width: 17px;
-  }
+#dataSources .iconfont[class^="icon"] {
+  width: 17px;
+}
 
-  #dataSources .aboutType {
-    color: rgb(102, 177, 255);
-    cursor: pointer;
-  }
+#dataSources .aboutType {
+  color: rgb(102, 177, 255);
+  cursor: pointer;
+}
 
-  .deleteIcon {
-    cursor: pointer;
-    color: #f15353;
-  }
+.deleteIcon {
+  cursor: pointer;
+  color: #f15353;
+}
 
-  .conditiona {
-    padding: 0px 0 10px 100px;
-  }
+.conditiona {
+  padding: 0px 0 10px 100px;
+}
 
-  hr {
-    opacity: 0.3;
-  }
+hr {
+  opacity: 0.3;
+}
 
-  .m-b-20 {
-    margin-bottom: 20px;
-  }
+.m-b-20 {
+  margin-bottom: 20px;
+}
 
-  #dataSources .sourceS {
-    display: inline-block;
-    width: 124px;
-    line-height: 29px;
-    background-color: #F0F0F0;
-    border: 1px solid #D1D1D1;
-    margin-right: 10px;
-    border-radius: 3px;
-    padding-left: 10px;
-    transform: translateY(1px);
-  }
+#dataSources .sourceS {
+  display: inline-block;
+  width: 124px;
+  line-height: 29px;
+  background-color: #f0f0f0;
+  border: 1px solid #d1d1d1;
+  margin-right: 10px;
+  border-radius: 3px;
+  padding-left: 10px;
+  transform: translateY(1px);
+}
 
-  #dataSources .el-dropdown-link {
-    color: #333;
-  }
+#dataSources .el-dropdown-link {
+  color: #333;
+}
 
-  .iconSql .iconfont[class^=icon] {
-    font-size: 18px;
-  }
+.iconSql .iconfont[class^="icon"] {
+  font-size: 18px;
+}
 
-  .sqlGx {
-    position: relative;
-    padding-left: 15px;
-    font-size: 20px;
-    cursor: pointer;
-  }
+.sqlGx {
+  position: relative;
+  padding-left: 15px;
+  font-size: 20px;
+  cursor: pointer;
+}
 
-  .sqlIcon {
-    margin: 20px 0;
-  }
+.sqlIcon {
+  margin: 20px 0;
+}
 
-  .sqlIcon p {
-    line-height: 36px;
-  }
+.sqlIcon p {
+  line-height: 36px;
+}
 
-  .sqlIcon .iconfont[class^="icon"] {
-    width: auto !important;
-    font-size: 60px;
-  }
+.sqlIcon .iconfont[class^="icon"] {
+  width: auto !important;
+  font-size: 60px;
+}
 
-  .sqlGx::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 10%;
-    width: 2px;
-    height: 80%;
-    background-color: #678ee0;
-  }
-
+.sqlGx::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10%;
+  width: 2px;
+  height: 80%;
+  background-color: #678ee0;
+}
 </style>
diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue
index a458bca..f285b29 100644
--- a/src/components/site/previewOfSiteStatus.vue
+++ b/src/components/site/previewOfSiteStatus.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="previewOfSiteStatus">
     <div id="previewOfSiteStatusMaps">
-      <div id="previewOfSiteStatusTop">
+      <!-- <div id="previewOfSiteStatusTop">
         <div class="previewOfSiteStatusTopC">
           <img
             src="./../../../static/img/previewOfSiteStatus7.png"
@@ -35,7 +35,7 @@
             <span class="previewOfSiteStatusTopCMS">在线率</span>
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="boxmain">
         <!-- 项目选择 -->
         <div id="previewOfSiteStatusLeftTop">

diff --git a/src/assets/css/skincolor.scss b/src/assets/css/skincolor.scss
index ec2dc5b..68d4699 100644
--- a/src/assets/css/skincolor.scss
+++ b/src/assets/css/skincolor.scss
@@ -1,3 +1,24 @@
+.sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+}
+.el-tag{
+  background-color: var(--tablethead) !important;
+  border-color:var(--tablethead) !important;
+}
+
+.el-button--info.is-plain {
+  color: #fff !important;
+  background: #409eff !important;
+  border-color: #409eff !important;
+}
+
+.avue-crud__menu {
+  background-color: transparent !important;
+}
+
 .el-card {
   background-color: transparent;
   border: 1px solid var(--white)
@@ -262,7 +283,8 @@
 }
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover,
-.el-cascader-node:hover {
+.el-cascader-node:hover,
+.el-table__body tr.hover-row>td {
   background-color: var(--selecthover) !important;
 }
 .el-select-dropdown__item,
diff --git a/src/components/model/sqlSource.vue b/src/components/model/sqlSource.vue
index c16e299..acf5fce 100644
--- a/src/components/model/sqlSource.vue
+++ b/src/components/model/sqlSource.vue
@@ -1,28 +1,48 @@
 <!-- 连接管理 -  符合数据库列表进行定制的内容 -->
 <template>
   <div id="sqlSource text-center">
+    <p class="sqlType">数据库类型：{{ ruleForm.dbType }}</p>
 
-    <p class="sqlType">数据库类型：{{ruleForm.dbType}}</p>
-
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="randerWidth" class="demo-ruleForm">
-
-      <el-col :span='12'>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      :label-width="randerWidth"
+      class="demo-ruleForm"
+    >
+      <el-col :span="12">
         <el-form-item label="连接名称：" prop="dataSourceName">
-          <el-input v-model="ruleForm.dataSourceName" :disabled="dataSourceDis" placeholder="请输入连接名称"></el-input>
+          <el-input
+            v-model="ruleForm.dataSourceName"
+            :disabled="dataSourceDis"
+            placeholder="请输入连接名称"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12' style='height:62px;'>
+      <el-col :span="12" style="height:62px;">
         <el-form-item label="连接url：" prop="url">
-          <el-col :span='22'>
-            <el-input v-model="ruleForm.url" placeholder="请输入连接url"></el-input>
-
+          <el-col :span="22">
+            <el-input
+              v-model="ruleForm.url"
+              placeholder="请输入连接url"
+            ></el-input>
           </el-col>
-          <el-col :span='2' class="text-right">
+          <el-col :span="2" class="text-right">
             <div class="aboutType">
-              <el-tooltip class="item" effect="dark" :content="'点击图标复制示例：'+examples" placement="top-start">
-                <span><i class="iconfont icon-49" v-clipboard:success="onCopy" v-clipboard:error="onError"
-                    v-clipboard:copy="examples"></i>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="'点击图标复制示例：' + examples"
+                placement="top-start"
+              >
+                <span
+                  ><i
+                    class="iconfont icon-49"
+                    v-clipboard:success="onCopy"
+                    v-clipboard:error="onError"
+                    v-clipboard:copy="examples"
+                  ></i>
                 </span>
               </el-tooltip>
             </div>
@@ -30,320 +50,355 @@
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="ruleForm.userName" @keyup.native="notEmpty(ruleForm.userName,'userName')"
-            placeholder="请输入用户名"></el-input>
+          <el-input
+            v-model="ruleForm.userName"
+            @keyup.native="notEmpty(ruleForm.userName, 'userName')"
+            placeholder="请输入用户名"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户密码：" prop="userPassword">
-          <el-input type='password' v-model="ruleForm.userPassword"
-            @keyup.native="notEmpty(ruleForm.userPassword,'userPassword')" placeholder="请输入用户密码">
+          <el-input
+            type="password"
+            v-model="ruleForm.userPassword"
+            @keyup.native="notEmpty(ruleForm.userPassword, 'userPassword')"
+            placeholder="请输入用户密码"
+          >
           </el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="备注：">
           <el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
-        <el-form-item v-show='!messageQueue' label="数据库属性串：">
-          <el-input v-model="ruleForm.properties" placeholder="请输入数据库属性串"></el-input>
+      <el-col :span="12">
+        <el-form-item v-show="!messageQueue" label="数据库属性串：">
+          <el-input
+            v-model="ruleForm.properties"
+            placeholder="请输入数据库属性串"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item v-show='!messageQueue' label="额外数量连接属性：" prop="extendProperties">
-          <el-input type="textarea" v-model="ruleForm.extendProperties" placeholder="请输入额外数量连接属性"></el-input>
+      <el-col :span="24">
+        <el-form-item
+          v-show="!messageQueue"
+          label="额外数量连接属性："
+          prop="extendProperties"
+        >
+          <el-input
+            type="textarea"
+            v-model="ruleForm.extendProperties"
+            placeholder="请输入额外数量连接属性"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item label="交换机名称：" v-show='messageQueue'>
-          <el-input v-model="exchange" placeholder="请输入交换机名称"></el-input>
+      <el-col :span="24">
+        <el-form-item label="交换机名称：" v-show="messageQueue">
+          <el-input
+            v-model="exchange"
+            placeholder="请输入交换机名称"
+          ></el-input>
         </el-form-item>
       </el-col>
-
     </el-form>
 
-    <span slot="footer" class="dialog-footer" :style='modelFloor'>
-      <el-button @click.native='connectionTesting' size='mini' class="f_left connection">连 接 测 试</el-button>
-      <p class="f_left" :style='errorText' v-show='errorConnect'>{{errorHtml}}</p>
-      <el-button type="primary" v-show='editAdd' @click="submitForm(1)">添 加</el-button>
-      <el-button type="primary" v-show='!editAdd' @click="submitForm(2)">修 改</el-button>
+    <span slot="footer" class="dialog-footer" :style="modelFloor">
+      <el-button
+        @click.native="connectionTesting"
+        size="mini"
+        class="f_left connection"
+        >连 接 测 试</el-button
+      >
+      <p class="f_left" :style="errorText" v-show="errorConnect">
+        {{ errorHtml }}
+      </p>
+      <el-button type="primary" v-show="editAdd" @click="submitForm(1)"
+        >添 加</el-button
+      >
+      <el-button type="primary" v-show="!editAdd" @click="submitForm(2)"
+        >修 改</el-button
+      >
       <el-button @click.native="dataEdits">取 消</el-button>
     </span>
   </div>
 </template>
 
 <script>
-  import {
-    isJSON,
-    notify
-  } from '../util/item'
-  import project from '../mixins/project'
+import { isJSON, notify } from "../util/item";
+import project from "../mixins/project";
 
-  export default {
-    data() {
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback();
-        } else if (!isJSON(value)) {
-          callback(new Error('额外数量连接属性，为JSON格式'))
-        } else {
-          callback();
-        }
-      };
+export default {
+  data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback();
+      } else if (!isJSON(value)) {
+        callback(new Error("额外数量连接属性，为JSON格式"));
+      } else {
+        callback();
+      }
+    };
 
-      return {
-        errorText: {
-          color: '#F56C6C',
-          lineHeight: '45px',
-          marginLeft: '10px'
-        },
-        randerWidth: '',
-        errorHtml: "",
-        editAdd: true,
-        examples: '',
-        messageQueue: false,
-        dataSourceDis: false,
-        errorConnect: false,
-        exchange: '',
-        editId: '',
-        testPass: 0,
-        ruleForm: {
-          dataSourceName: '',
-          dbType: '',
-          userName: '',
-          extendProperties: '',
-          userPassword: '',
-          properties: '',
-          url: '',
-          mark: '',
-        },
-        modelFloor: {
-          display: 'block',
-          textAlign: 'right',
-          padding: '0 0 22px 0'
-        },
-        rules: {
-          dataSourceName: [{
+    return {
+      errorText: {
+        color: "#F56C6C",
+        lineHeight: "45px",
+        marginLeft: "10px"
+      },
+      randerWidth: "",
+      errorHtml: "",
+      editAdd: true,
+      examples: "",
+      messageQueue: false,
+      dataSourceDis: false,
+      errorConnect: false,
+      exchange: "",
+      editId: "",
+      testPass: 0,
+      ruleForm: {
+        dataSourceName: "",
+        dbType: "",
+        userName: "",
+        extendProperties: "",
+        userPassword: "",
+        properties: "",
+        url: "",
+        mark: ""
+      },
+      modelFloor: {
+        display: "block",
+        textAlign: "right",
+        padding: "0 0 22px 0"
+      },
+      rules: {
+        dataSourceName: [
+          {
             required: true,
-            message: '请输入连接名称',
-            trigger: 'blur'
-          }],
-          extendProperties: [{
-            validator: validatePass2,
-            trigger: 'blur'
-          }],
-          url: [{
-            required: true,
-            message: '请输入连接url',
-            trigger: 'blur'
-          }],
-          userName: [{
-            required: true,
-            message: '请输入用户名',
-            trigger: 'blur'
-          }],
-          userPassword: [{
-            required: true,
-            message: '请输入用户密码',
-            trigger: 'blur'
-          }]
-        }
-      };
-    },
-    mixins: [project],
-    components: {},
-    computed: {},
-    mounted() {},
-    methods: {
-      mysqlVal(val, row = '') {
-        /**
-         * 数据库类型的判断
-         * @param {String} val 数据库类型
-         * @param {Object} row 表格参数
-         */
-        this.dataSourceDis = false;
-
-        this.resetForm('ruleForm')
-        this.editAdd = true;
-
-        // 连接名为小写
-        this.ruleForm.dbType = val;
-        let low = val.toLocaleLowerCase();
-
-        // 数据库类型示例
-        if (val === 'MongoDB') {
-          this.examples = '127.0.0.1:27010/monitoring';
-        } else {
-          this.examples = `jdbc:${low}://server:1433;databasename=test`
-        }
-        this.randerWidth = '170px';
-
-        if (val === 'RabbitMQ') {
-          this.messageQueue = true;
-          this.randerWidth = '120px';
-          this.examples = '127.0.0.1:5672'
-
-          // 新增窗口队列
-          if (row === '') {
-            this.exchange = ''
-            // this.dataSourceFlage = false;
-          } else {
-            // 修改窗口队列
-            let properties = JSON.parse(row['properties']);
-            this.exchange = properties['exchange']
-            // this.dataSourceFlage = true;
+            message: "请输入连接名称",
+            trigger: "blur"
           }
-          return
-        }
-        this.messageQueue = false;
+        ],
+        extendProperties: [
+          {
+            validator: validatePass2,
+            trigger: "blur"
+          }
+        ],
+        url: [
+          {
+            required: true,
+            message: "请输入连接url",
+            trigger: "blur"
+          }
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }
+        ],
+        userPassword: [
+          {
+            required: true,
+            message: "请输入用户密码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    mysqlVal(val, row = "") {
+      /**
+       * 数据库类型的判断
+       * @param {String} val 数据库类型
+       * @param {Object} row 表格参数
+       */
+      this.dataSourceDis = false;
 
-      },
-      editVal(row) {
-        /**
-         * 修改窗口
-         * @param {Object} row 表格行点击参数
-         */
-        this.mysqlVal(row.dbType, row);
-        this.editAdd = false;
-        this.dataSourceDis = true;
-        let {
-          keys
-        } = Object;
-        this.editId = row.id;
-        for (let item of keys(this.ruleForm)) {
-          this.ruleForm[item] = row[item]
-        }
-      },
-      connectionTesting() {
-        /**
-         * 连接测试，数据矫正
-         */
-        this.correct('ruleForm', () => {
+      this.resetForm("ruleForm");
+      this.editAdd = true;
 
-          // 消息队列
-          this.$http.post(this.nozzle.testSource, this.ruleForm).then(response => {
+      // 连接名为小写
+      this.ruleForm.dbType = val;
+      let low = val.toLocaleLowerCase();
+
+      // 数据库类型示例
+      if (val === "MongoDB") {
+        this.examples = "127.0.0.1:27010/monitoring";
+      } else {
+        this.examples = `jdbc:${low}://server:1433;databasename=test`;
+      }
+      this.randerWidth = "170px";
+
+      if (val === "RabbitMQ") {
+        this.messageQueue = true;
+        this.randerWidth = "120px";
+        this.examples = "127.0.0.1:5672";
+
+        // 新增窗口队列
+        if (row === "") {
+          this.exchange = "";
+          // this.dataSourceFlage = false;
+        } else {
+          // 修改窗口队列
+          let properties = JSON.parse(row["properties"]);
+          this.exchange = properties["exchange"];
+          // this.dataSourceFlage = true;
+        }
+        return;
+      }
+      this.messageQueue = false;
+    },
+    editVal(row) {
+      /**
+       * 修改窗口
+       * @param {Object} row 表格行点击参数
+       */
+      this.mysqlVal(row.dbType, row);
+      this.editAdd = false;
+      this.dataSourceDis = true;
+      let { keys } = Object;
+      this.editId = row.id;
+      for (let item of keys(this.ruleForm)) {
+        this.ruleForm[item] = row[item];
+      }
+    },
+    connectionTesting() {
+      /**
+       * 连接测试，数据矫正
+       */
+      this.correct("ruleForm", () => {
+        // 消息队列
+        this.$http
+          .post(this.nozzle.testSource, this.ruleForm)
+          .then(response => {
             if (response.data.code === 200) {
               this.testPass = 200;
               this.errorConnect = true;
-              this.errorText.color = '#41ca4c'
-              this.errorHtml = '测试连接成功';
+              this.errorText.color = "#41ca4c";
+              this.errorHtml = "测试连接成功";
             } else {
               this.testPass = 0;
-              this.errorHtml = response.data.data
+              this.errorHtml = response.data.data;
               this.errorConnect = true;
-              this.errorText.color = '#F56C6C'
+              this.errorText.color = "#F56C6C";
             }
-          })
-        })
-
-      },
-      dataEdits() {
-        /**
-         * 按钮取消事件
-         */
-
-        this.errorConnect = false;
-        this.testPass = 0;
-        this.$emit('dataEdits', false);
-      },
-      async addParameter(api, dif = 1) {
-        // 新增数据传值
-        let datas = this.ruleForm;
-
-        // 消息队列
-        if (this.ruleForm.dbType === "RabbitMQ") {
-          datas['properties'] = JSON.stringify({
-            exchange: this.exchange
           });
-        }
+      });
+    },
+    dataEdits() {
+      /**
+       * 按钮取消事件
+       */
 
-        // 修改数据
-        if (dif === 2) {
-          datas['id'] = this.editId;
-        }
+      this.errorConnect = false;
+      this.testPass = 0;
+      this.$emit("dataEdits", false);
+    },
+    async addParameter(api, dif = 1) {
+      // 新增数据传值
+      let datas = this.ruleForm;
 
-        const response = await this.$http.post(api, datas);
-        notify(response);
-        if (response.data.code === 200) {
-          this.updateData();
-        }
-      },
-      resetForm(formName) {
-        // 清空表格数据
-        this.$refs[formName].resetFields();
-      },
-      correct(formName, cb, dif = 1) {
-        // 数据矫正
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            // 连接测试
-            // if (dif === 2) {
-            //   if (this.testPass === 0) {
-            //     this.$notify({
-            //       type: 'warning',
-            //       message: '请先完成连接测试'
-            //     })
-            //     return
-            //   }
-            // }
-            cb()
-            return true
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
+      // 消息队列
+      if (this.ruleForm.dbType === "RabbitMQ") {
+        datas["properties"] = JSON.stringify({
+          exchange: this.exchange
         });
+      }
 
-      },
-      updateData() {
-        /**
-         * 更新数据
-         */
-        this.$emit('updateData')
-      },
-      submitForm(dif) {
-        // 添加数据,修改数据
-        this.correct('ruleForm', () => {
-          let api = '';
+      // 修改数据
+      if (dif === 2) {
+        datas["id"] = this.editId;
+      }
+
+      const response = await this.$http.post(api, datas);
+      notify(response);
+      if (response.data.code === 200) {
+        this.updateData();
+      }
+    },
+    resetForm(formName) {
+      // 清空表格数据
+      this.$refs[formName].resetFields();
+    },
+    correct(formName, cb, dif = 1) {
+      // 数据矫正
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 连接测试
+          // if (dif === 2) {
+          //   if (this.testPass === 0) {
+          //     this.$notify({
+          //       type: 'warning',
+          //       message: '请先完成连接测试'
+          //     })
+          //     return
+          //   }
+          // }
+          cb();
+          return true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    updateData() {
+      /**
+       * 更新数据
+       */
+      this.$emit("updateData");
+    },
+    submitForm(dif) {
+      // 添加数据,修改数据
+      this.correct(
+        "ruleForm",
+        () => {
+          let api = "";
           if (dif === 1) {
             api = this.nozzle.addSource;
-            this.addParameter(api)
+            this.addParameter(api);
           } else {
             api = this.nozzle.updateSource;
-            this.addParameter(api, 2)
+            this.addParameter(api, 2);
           }
           this.dataEdits();
-        }, 2)
-
-      }
+        },
+        2
+      );
     }
   }
-
+};
 </script>
 
 <style>
-  #sqlSource {
-    width: 100%;
-  }
+#sqlSource {
+  width: 100%;
+}
 
-  .sqlType {
-    font-size: 16px;
-    color: #001529;
-    margin-bottom: 20px;
-    padding-left: 11px;
-  }
+/* .sqlType {
+  font-size: 16px;
+  color: var(--white) !important;
+  margin-bottom: 20px;
+  padding-left: 11px;
+} */
 
-  .connection {
-    margin-top: 5px;
-  }
-
+.connection {
+  margin-top: 5px;
+}
 </style>
diff --git a/src/components/shujulvwang/connectManager.vue b/src/components/shujulvwang/connectManager.vue
index d2c21e2..ce278b9 100644
--- a/src/components/shujulvwang/connectManager.vue
+++ b/src/components/shujulvwang/connectManager.vue
@@ -1,9 +1,17 @@
 <template>
   <!--连接管理-->
   <div id="dataSources" class="asideBgc tab">
-    <div class='butClick'>
-      <xf-buttons @changes="searChange" :btnAuthority='authority' @add='dataEditSql = true' @edit='clickeEdit'
-        @deletes='delectVals' @get='searchChange' :searchPlaceholder='searchPlaceholder' :addText='addText'>
+    <div class="butClick">
+      <xf-buttons
+        @changes="searChange"
+        :btnAuthority="authority"
+        @add="dataEditSql = true"
+        @edit="clickeEdit"
+        @deletes="delectVals"
+        @get="searchChange"
+        :searchPlaceholder="searchPlaceholder"
+        :addText="addText"
+      >
         <!-- 下拉列表框 -->
         <!-- <template #dataSource>
           <span>
@@ -33,38 +41,67 @@
       </xf-buttons>
     </div>
 
-    <xfTable ref="table" :btnAuthority='authority' @sizeSee='sizeChange' @selectionChange='selectionChange'
-      @currentChange='currentChange' @refreshChange='refreshChange' @handleEdit='handleEdit' @delectVal='delectVal'
-      @ruleAdden='ruleAdden' :slotOverhidden='slotName'>
+    <xfTable
+      ref="table"
+      :btnAuthority="authority"
+      @sizeSee="sizeChange"
+      @selectionChange="selectionChange"
+      @currentChange="currentChange"
+      @refreshChange="refreshChange"
+      @handleEdit="handleEdit"
+      @delectVal="delectVal"
+      @ruleAdden="ruleAdden"
+      :slotOverhidden="slotName"
+    >
     </xfTable>
 
     <!-- 数据添加 -->
-    <el-dialog :title="modelH" :visible.sync="dataEdit" :close-on-click-modal='closeOnClick' :lock-scroll='closeOnClick'
-      width="50%" @open='openContent' @close='closeContent' :modal='closeOnClick'>
-
-      <SqlSource ref='sqlSources' @dataEdits='dataEdits' @updateData='getLists'></SqlSource>
-
+    <el-dialog
+      :title="modelH"
+      :visible.sync="dataEdit"
+      :close-on-click-modal="closeOnClick"
+      :lock-scroll="closeOnClick"
+      width="50%"
+      @open="openContent"
+      @close="closeContent"
+      :modal="closeOnClick"
+    >
+      <SqlSource
+        ref="sqlSources"
+        @dataEdits="dataEdits"
+        @updateData="getLists"
+      ></SqlSource>
     </el-dialog>
 
     <!-- 数据库类型和队列类型 -->
-    <el-dialog title="添加数据库或队列" :visible.sync="dataEditSql" :close-on-click-modal='closeOnClick'
-      :lock-scroll='closeOnClick' width="50%" :modal='closeOnClick'>
+    <el-dialog
+      title="添加数据库或队列"
+      :visible.sync="dataEditSql"
+      :close-on-click-modal="closeOnClick"
+      :lock-scroll="closeOnClick"
+      width="50%"
+      :modal="closeOnClick"
+    >
+      <div v-for="(item, index) in mysqls" :key="index">
+        <p class="sqlGx">{{ item.label }}</p>
 
-      <div v-for='(item,index) in mysqls' :key='index'>
-        <p class="sqlGx">{{item.label}}</p>
-
-        <el-row type='flex' class="sqlIcon">
-          <el-col :span='5' :offset='1' v-for='items in item.options' :key='items.value' class="text-center"
-            @click.native='handleCommand(items.value)'>
+        <el-row type="flex" class="sqlIcon">
+          <el-col
+            :span="5"
+            :offset="1"
+            v-for="items in item.options"
+            :key="items.value"
+            class="text-center"
+            @click.native="handleCommand(items.value)"
+          >
             <el-card shadow="hover">
               <span><i :class="items.iconfont"></i></span>
-              <p>{{items.value}}</p>
+              <p>{{ items.value }}</p>
             </el-card>
           </el-col>
         </el-row>
-
       </div>
-      
+
       <div slot="footer" class="dialog-footer">
         <el-button @click="dataEditSql = false">取 消</el-button>
       </div>
@@ -73,287 +110,299 @@
 </template>
 
 <script>
-  import project from '../../mixins/project'
-  import * as locasto from '../../util/item';
-  import SqlSource from '../../model/sqlSource';
-  var moment = require('moment');
-  
-  import {
-    notify
-  } from '../../util/item'
+import project from "../../mixins/project";
+import * as locasto from "../../util/item";
+import SqlSource from "../../model/sqlSource";
+var moment = require("moment");
 
-  /*负责导出组件*/
-  export default {
-    name: 'dataSources',
-    data() {
-      return {
-        deleteId: 'id', //标记删除字段
-        addText: '添加连接', //标记删除字段
-        modelHead: ['添加连接信息', '修改连接信息'],
-        modelH: '',
-        mysqls: [{
-          label: '数据库',
-          options: [{
-            value: 'MySQL',
-            iconfont: 'iconfont icon-mysql',
-            label: 'MySQL'
-          }, {
-            value: 'Oracle',
-            iconfont: 'iconfont icon-oracle',
-            label: 'Oracle'
-          }, {
-            value: 'SQLServer',
-            iconfont: 'iconfont icon-db_mysql_server',
-            label: 'SQLServer'
-          }, {
-            value: 'MongoDB',
-            iconfont: 'iconfont icon-MongoDB',
-            label: 'MongoDB'
-          }]
-        }, {
-          label: '消息队列',
-          options: [{
-            value: 'RabbitMQ',
-            iconfont: 'iconfont icon-RabbitMQ',
-            label: 'RabbitMQ'
-          }]
-        }],
-        mysqlsValue: '',
-        searchPlaceholder: '请输入规则名称',
-        dialogVisible: false,
-        dataEdit: false,
-        dataEditSql: false,
-        center: true,
-        editAdd: true,
-        closeOnClick: false,
-        slotName: 'dataSourceName',
-        deleteList: [],
-        clickValue: '',
-        loadOption: {
-          menuWidth: 150,
-          selection: true, //多选框选择
-          menu: true,
-          column: [{
-            label: '数据库类型',
-            prop: 'dbType'
-          }, {
-            label: '连接名称',
-            prop: 'dataSourceName',
+import { notify } from "../../util/item";
+
+/*负责导出组件*/
+export default {
+  name: "dataSources",
+  data() {
+    return {
+      deleteId: "id", //标记删除字段
+      addText: "添加连接", //标记删除字段
+      modelHead: ["添加连接信息", "修改连接信息"],
+      modelH: "",
+      mysqls: [
+        {
+          label: "数据库",
+          options: [
+            {
+              value: "MySQL",
+              iconfont: "iconfont icon-mysql",
+              label: "MySQL"
+            },
+            {
+              value: "Oracle",
+              iconfont: "iconfont icon-oracle",
+              label: "Oracle"
+            },
+            {
+              value: "SQLServer",
+              iconfont: "iconfont icon-db_mysql_server",
+              label: "SQLServer"
+            },
+            {
+              value: "MongoDB",
+              iconfont: "iconfont icon-MongoDB",
+              label: "MongoDB"
+            }
+          ]
+        },
+        {
+          label: "消息队列",
+          options: [
+            {
+              value: "RabbitMQ",
+              iconfont: "iconfont icon-RabbitMQ",
+              label: "RabbitMQ"
+            }
+          ]
+        }
+      ],
+      mysqlsValue: "",
+      searchPlaceholder: "请输入规则名称",
+      dialogVisible: false,
+      dataEdit: false,
+      dataEditSql: false,
+      center: true,
+      editAdd: true,
+      closeOnClick: false,
+      slotName: "dataSourceName",
+      deleteList: [],
+      clickValue: "",
+      loadOption: {
+        menuWidth: 150,
+        selection: true, //多选框选择
+        menu: true,
+        column: [
+          {
+            label: "数据库类型",
+            prop: "dbType"
+          },
+          {
+            label: "连接名称",
+            prop: "dataSourceName",
             overHidden: true,
             solt: true
-          }, {
-            label: '数据库地址URL',
-            prop: 'url'
-          }, {
-            label: '创建人',
-            prop: 'createdby'
-          }, {
-            label: '创建时间',
-            prop: 'created',
-            formatter: function (row, value, text, column) {
+          },
+          {
+            label: "数据库地址URL",
+            prop: "url"
+          },
+          {
+            label: "创建人",
+            prop: "createdby"
+          },
+          {
+            label: "创建时间",
+            prop: "created",
+            formatter: function(row, value, text, column) {
               if (value === null) {
-                return ''
+                return "";
               }
-              return moment(value).format('YYYY-MM-DD HH:mm:ss')
+              return moment(value).format("YYYY-MM-DD HH:mm:ss");
             }
-          }]
-        },
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  mounted() {
+    this.getLists();
+  },
+  components: {
+    SqlSource
+  },
+  methods: {
+    handleCommand(command) {
+      //   下拉选中数据库类型
+      this.dataEditSql = false;
+      this.mysqlsValue = command;
+      this.handleAdd();
+    },
+    dataEdits(val) {
+      /**
+       * 隐藏
+       */
+      this.dataEdit = val;
+    },
+    searchChange(val = "") {
+      // 搜索数据
+      if (val === "") {
+        this.page.currentPage = 1;
+        this.getLists();
+      } else {
+        this.getLists(val);
       }
     },
-    mixins: [project],
-    mounted() {
-      this.getLists();
+    ruleAdden(row, index) {
+      console.log(row);
+      console.log(index);
     },
-    components: {
-      SqlSource
+    sortDataCopy(row) {
+      /**
+       * 数据渲染
+       */
+      for (let [key, value] of Object.entries(this.ruleForm)) {
+        this.ruleForm[key] = row[key];
+      }
     },
-    methods: {
-      handleCommand(command) {
-        //   下拉选中数据库类型
-        this.dataEditSql = false;
-        this.mysqlsValue = command;
-        this.handleAdd()
-      },
-      dataEdits(val) {
-        /**
-         * 隐藏
-         */
-        this.dataEdit = val;
-      },
-      searchChange(val = '') {
-        // 搜索数据
-        if (val === '') {
-          this.page.currentPage = 1;
-          this.getLists();
+    async getLists(ruleName = null) {
+      /**
+       * 获取任务列表
+       */
+      this.deleteList = [];
+      let datas = {
+        params: {
+          pageNo: this.page.currentPage,
+          pageSize: this.page.pageSize
+        }
+      };
+      // 获取数据返回状态 日志
+      let response = await this.getTableData(datas, this.nozzle.getSource);
+      this.rendering(response);
+    },
+    resetClear(item, keys) {
+      for (let items of Object.keys(this.ruleForm[item])) {
+        if (items === keys) {
+          this.ruleForm[item][items] = [];
         } else {
-          this.getLists(val);
+          this.ruleForm[item][items] = "";
         }
-      },
-      ruleAdden(row, index) {
-        console.log(row);
-        console.log(index);
-      },
-      sortDataCopy(row) {
-        /**
-         * 数据渲染
-         */
-        for (let [key, value] of Object.entries(this.ruleForm)) {
-          this.ruleForm[key] = row[key];
-        }
-      },
-      async getLists(ruleName = null) {
-        /**
-         * 获取任务列表
-         */
-        this.deleteList = [];
-        let datas = {
-          params: {
-            "pageNo": this.page.currentPage,
-            "pageSize": this.page.pageSize
-          }
-        }
-        // 获取数据返回状态 日志
-        let response = await this.getTableData(datas, this.nozzle.getSource);
-        this.rendering(response);
-      },
-      resetClear(item, keys) {
-        for (let items of Object.keys(this.ruleForm[item])) {
-          if (items === keys) {
-            this.ruleForm[item][items] = []
-          } else {
-            this.ruleForm[item][items] = ''
-          }
-        }
-      },
-      handleAdd() {
-        // 新增按钮
-        if (this.mysqlsValue === '') {
-          this.$notify({
-            type: 'info',
-            message: "请选择数据库或消息队列再进行数据"
-          })
-          return
-        }
-        this.editAdd = true;
-        this.modelH = this.modelHead[0];
-        this.dataEdit = true;
-        this.$nextTick(function () {
-          this.$refs.sqlSources.mysqlVal(this.mysqlsValue)
-        })
-      },
-      clickeEdit() {
-        // 单击修改
-        if (!this.clickValue) {
-          this.$notify.warning('请先选择要修改的行,再进行数据修改!');
-          return
-        } else {
-          this.handleEdit(this.clickValue)
-        }
-      },
-      handleEdit(row) {
-        // 行内点击修改
-        this.editAdd = false;
-        this.modelH = this.modelHead[1]
-        this.dataEdit = true;
+      }
+    },
+    handleAdd() {
+      // 新增按钮
+      if (this.mysqlsValue === "") {
+        this.$notify({
+          type: "info",
+          message: "请选择数据库或消息队列再进行数据"
+        });
+        return;
+      }
+      this.editAdd = true;
+      this.modelH = this.modelHead[0];
+      this.dataEdit = true;
+      this.$nextTick(function() {
+        this.$refs.sqlSources.mysqlVal(this.mysqlsValue);
+      });
+    },
+    clickeEdit() {
+      // 单击修改
+      if (!this.clickValue) {
+        this.$notify.warning("请先选择要修改的行,再进行数据修改!");
+        return;
+      } else {
+        this.handleEdit(this.clickValue);
+      }
+    },
+    handleEdit(row) {
+      // 行内点击修改
+      this.editAdd = false;
+      this.modelH = this.modelHead[1];
+      this.dataEdit = true;
 
-        this.$nextTick(function () {
-          this.$refs.sqlSources.editVal(row)
-        })
-      },
-      deleteUserLise(ids) {
-        // 删除用户
-        let datas = {
-          "params": {
-            "ids": ids
-          }
+      this.$nextTick(function() {
+        this.$refs.sqlSources.editVal(row);
+      });
+    },
+    deleteUserLise(ids) {
+      // 删除用户
+      let datas = {
+        params: {
+          ids: ids
         }
-        this.asyncDelete(datas, this.nozzle.deleteSource);
-      },
+      };
+      this.asyncDelete(datas, this.nozzle.deleteSource);
     }
   }
-
+};
 </script>
-<style>
-  #dataSources .formJcDoc {
-    font-size: 20px;
-    color: #333;
-    margin: 15px 0;
-  }
+<style scoped>
+#dataSources .formJcDoc {
+  font-size: 20px;
+  color: #333;
+  margin: 15px 0;
+}
 
-  #dataSources .iconfont[class^="icon"] {
-    width: 17px;
-  }
+#dataSources .iconfont[class^="icon"] {
+  width: 17px;
+}
 
-  #dataSources .aboutType {
-    color: rgb(102, 177, 255);
-    cursor: pointer;
-  }
+#dataSources .aboutType {
+  color: rgb(102, 177, 255);
+  cursor: pointer;
+}
 
-  .deleteIcon {
-    cursor: pointer;
-    color: #f15353;
-  }
+.deleteIcon {
+  cursor: pointer;
+  color: #f15353;
+}
 
-  .conditiona {
-    padding: 0px 0 10px 100px;
-  }
+.conditiona {
+  padding: 0px 0 10px 100px;
+}
 
-  hr {
-    opacity: 0.3;
-  }
+hr {
+  opacity: 0.3;
+}
 
-  .m-b-20 {
-    margin-bottom: 20px;
-  }
+.m-b-20 {
+  margin-bottom: 20px;
+}
 
-  #dataSources .sourceS {
-    display: inline-block;
-    width: 124px;
-    line-height: 29px;
-    background-color: #F0F0F0;
-    border: 1px solid #D1D1D1;
-    margin-right: 10px;
-    border-radius: 3px;
-    padding-left: 10px;
-    transform: translateY(1px);
-  }
+#dataSources .sourceS {
+  display: inline-block;
+  width: 124px;
+  line-height: 29px;
+  background-color: #f0f0f0;
+  border: 1px solid #d1d1d1;
+  margin-right: 10px;
+  border-radius: 3px;
+  padding-left: 10px;
+  transform: translateY(1px);
+}
 
-  #dataSources .el-dropdown-link {
-    color: #333;
-  }
+#dataSources .el-dropdown-link {
+  color: #333;
+}
 
-  .iconSql .iconfont[class^=icon] {
-    font-size: 18px;
-  }
+.iconSql .iconfont[class^="icon"] {
+  font-size: 18px;
+}
 
-  .sqlGx {
-    position: relative;
-    padding-left: 15px;
-    font-size: 20px;
-    cursor: pointer;
-  }
+.sqlGx {
+  position: relative;
+  padding-left: 15px;
+  font-size: 20px;
+  cursor: pointer;
+}
 
-  .sqlIcon {
-    margin: 20px 0;
-  }
+.sqlIcon {
+  margin: 20px 0;
+}
 
-  .sqlIcon p {
-    line-height: 36px;
-  }
+.sqlIcon p {
+  line-height: 36px;
+}
 
-  .sqlIcon .iconfont[class^="icon"] {
-    width: auto !important;
-    font-size: 60px;
-  }
+.sqlIcon .iconfont[class^="icon"] {
+  width: auto !important;
+  font-size: 60px;
+}
 
-  .sqlGx::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 10%;
-    width: 2px;
-    height: 80%;
-    background-color: #678ee0;
-  }
-
+.sqlGx::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10%;
+  width: 2px;
+  height: 80%;
+  background-color: #678ee0;
+}
 </style>
diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue
index a458bca..f285b29 100644
--- a/src/components/site/previewOfSiteStatus.vue
+++ b/src/components/site/previewOfSiteStatus.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="previewOfSiteStatus">
     <div id="previewOfSiteStatusMaps">
-      <div id="previewOfSiteStatusTop">
+      <!-- <div id="previewOfSiteStatusTop">
         <div class="previewOfSiteStatusTopC">
           <img
             src="./../../../static/img/previewOfSiteStatus7.png"
@@ -35,7 +35,7 @@
             <span class="previewOfSiteStatusTopCMS">在线率</span>
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="boxmain">
         <!-- 项目选择 -->
         <div id="previewOfSiteStatusLeftTop">
diff --git a/src/model/sqlSource.vue b/src/model/sqlSource.vue
index c16e299..48e598e 100644
--- a/src/model/sqlSource.vue
+++ b/src/model/sqlSource.vue
@@ -1,28 +1,48 @@
 <!-- 连接管理 -  符合数据库列表进行定制的内容 -->
 <template>
   <div id="sqlSource text-center">
+    <p class="sqlType">数据库类型：{{ ruleForm.dbType }}</p>
 
-    <p class="sqlType">数据库类型：{{ruleForm.dbType}}</p>
-
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="randerWidth" class="demo-ruleForm">
-
-      <el-col :span='12'>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      :label-width="randerWidth"
+      class="demo-ruleForm"
+    >
+      <el-col :span="12">
         <el-form-item label="连接名称：" prop="dataSourceName">
-          <el-input v-model="ruleForm.dataSourceName" :disabled="dataSourceDis" placeholder="请输入连接名称"></el-input>
+          <el-input
+            v-model="ruleForm.dataSourceName"
+            :disabled="dataSourceDis"
+            placeholder="请输入连接名称"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12' style='height:62px;'>
+      <el-col :span="12" style="height:62px;">
         <el-form-item label="连接url：" prop="url">
-          <el-col :span='22'>
-            <el-input v-model="ruleForm.url" placeholder="请输入连接url"></el-input>
-
+          <el-col :span="22">
+            <el-input
+              v-model="ruleForm.url"
+              placeholder="请输入连接url"
+            ></el-input>
           </el-col>
-          <el-col :span='2' class="text-right">
+          <el-col :span="2" class="text-right">
             <div class="aboutType">
-              <el-tooltip class="item" effect="dark" :content="'点击图标复制示例：'+examples" placement="top-start">
-                <span><i class="iconfont icon-49" v-clipboard:success="onCopy" v-clipboard:error="onError"
-                    v-clipboard:copy="examples"></i>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="'点击图标复制示例：' + examples"
+                placement="top-start"
+              >
+                <span
+                  ><i
+                    class="iconfont icon-49"
+                    v-clipboard:success="onCopy"
+                    v-clipboard:error="onError"
+                    v-clipboard:copy="examples"
+                  ></i>
                 </span>
               </el-tooltip>
             </div>
@@ -30,320 +50,348 @@
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="ruleForm.userName" @keyup.native="notEmpty(ruleForm.userName,'userName')"
-            placeholder="请输入用户名"></el-input>
+          <el-input
+            v-model="ruleForm.userName"
+            @keyup.native="notEmpty(ruleForm.userName, 'userName')"
+            placeholder="请输入用户名"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="用户密码：" prop="userPassword">
-          <el-input type='password' v-model="ruleForm.userPassword"
-            @keyup.native="notEmpty(ruleForm.userPassword,'userPassword')" placeholder="请输入用户密码">
+          <el-input
+            type="password"
+            v-model="ruleForm.userPassword"
+            @keyup.native="notEmpty(ruleForm.userPassword, 'userPassword')"
+            placeholder="请输入用户密码"
+          >
           </el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
+      <el-col :span="12">
         <el-form-item label="备注：">
           <el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='12'>
-        <el-form-item v-show='!messageQueue' label="数据库属性串：">
-          <el-input v-model="ruleForm.properties" placeholder="请输入数据库属性串"></el-input>
+      <el-col :span="12">
+        <el-form-item v-show="!messageQueue" label="数据库属性串：">
+          <el-input
+            v-model="ruleForm.properties"
+            placeholder="请输入数据库属性串"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item v-show='!messageQueue' label="额外数量连接属性：" prop="extendProperties">
-          <el-input type="textarea" v-model="ruleForm.extendProperties" placeholder="请输入额外数量连接属性"></el-input>
+      <el-col :span="24">
+        <el-form-item
+          v-show="!messageQueue"
+          label="额外数量连接属性："
+          prop="extendProperties"
+        >
+          <el-input
+            type="textarea"
+            v-model="ruleForm.extendProperties"
+            placeholder="请输入额外数量连接属性"
+          ></el-input>
         </el-form-item>
       </el-col>
 
-      <el-col :span='24'>
-        <el-form-item label="交换机名称：" v-show='messageQueue'>
-          <el-input v-model="exchange" placeholder="请输入交换机名称"></el-input>
+      <el-col :span="24">
+        <el-form-item label="交换机名称：" v-show="messageQueue">
+          <el-input
+            v-model="exchange"
+            placeholder="请输入交换机名称"
+          ></el-input>
         </el-form-item>
       </el-col>
-
     </el-form>
 
-    <span slot="footer" class="dialog-footer" :style='modelFloor'>
-      <el-button @click.native='connectionTesting' size='mini' class="f_left connection">连 接 测 试</el-button>
-      <p class="f_left" :style='errorText' v-show='errorConnect'>{{errorHtml}}</p>
-      <el-button type="primary" v-show='editAdd' @click="submitForm(1)">添 加</el-button>
-      <el-button type="primary" v-show='!editAdd' @click="submitForm(2)">修 改</el-button>
+    <span slot="footer" class="dialog-footer" :style="modelFloor">
+      <el-button
+        @click.native="connectionTesting"
+        size="mini"
+        class="f_left connection"
+        >连 接 测 试</el-button
+      >
+      <p class="f_left" :style="errorText" v-show="errorConnect">
+        {{ errorHtml }}
+      </p>
+      <el-button type="primary" v-show="editAdd" @click="submitForm(1)"
+        >添 加</el-button
+      >
+      <el-button type="primary" v-show="!editAdd" @click="submitForm(2)"
+        >修 改</el-button
+      >
       <el-button @click.native="dataEdits">取 消</el-button>
     </span>
   </div>
 </template>
 
 <script>
-  import {
-    isJSON,
-    notify
-  } from '../util/item'
-  import project from '../mixins/project'
+import { isJSON, notify } from "../util/item";
+import project from "../mixins/project";
 
-  export default {
-    data() {
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback();
-        } else if (!isJSON(value)) {
-          callback(new Error('额外数量连接属性，为JSON格式'))
-        } else {
-          callback();
-        }
-      };
+export default {
+  data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback();
+      } else if (!isJSON(value)) {
+        callback(new Error("额外数量连接属性，为JSON格式"));
+      } else {
+        callback();
+      }
+    };
 
-      return {
-        errorText: {
-          color: '#F56C6C',
-          lineHeight: '45px',
-          marginLeft: '10px'
-        },
-        randerWidth: '',
-        errorHtml: "",
-        editAdd: true,
-        examples: '',
-        messageQueue: false,
-        dataSourceDis: false,
-        errorConnect: false,
-        exchange: '',
-        editId: '',
-        testPass: 0,
-        ruleForm: {
-          dataSourceName: '',
-          dbType: '',
-          userName: '',
-          extendProperties: '',
-          userPassword: '',
-          properties: '',
-          url: '',
-          mark: '',
-        },
-        modelFloor: {
-          display: 'block',
-          textAlign: 'right',
-          padding: '0 0 22px 0'
-        },
-        rules: {
-          dataSourceName: [{
+    return {
+      errorText: {
+        color: "#F56C6C",
+        lineHeight: "45px",
+        marginLeft: "10px"
+      },
+      randerWidth: "",
+      errorHtml: "",
+      editAdd: true,
+      examples: "",
+      messageQueue: false,
+      dataSourceDis: false,
+      errorConnect: false,
+      exchange: "",
+      editId: "",
+      testPass: 0,
+      ruleForm: {
+        dataSourceName: "",
+        dbType: "",
+        userName: "",
+        extendProperties: "",
+        userPassword: "",
+        properties: "",
+        url: "",
+        mark: ""
+      },
+      modelFloor: {
+        display: "block",
+        textAlign: "right",
+        padding: "0 0 22px 0"
+      },
+      rules: {
+        dataSourceName: [
+          {
             required: true,
-            message: '请输入连接名称',
-            trigger: 'blur'
-          }],
-          extendProperties: [{
-            validator: validatePass2,
-            trigger: 'blur'
-          }],
-          url: [{
-            required: true,
-            message: '请输入连接url',
-            trigger: 'blur'
-          }],
-          userName: [{
-            required: true,
-            message: '请输入用户名',
-            trigger: 'blur'
-          }],
-          userPassword: [{
-            required: true,
-            message: '请输入用户密码',
-            trigger: 'blur'
-          }]
-        }
-      };
-    },
-    mixins: [project],
-    components: {},
-    computed: {},
-    mounted() {},
-    methods: {
-      mysqlVal(val, row = '') {
-        /**
-         * 数据库类型的判断
-         * @param {String} val 数据库类型
-         * @param {Object} row 表格参数
-         */
-        this.dataSourceDis = false;
-
-        this.resetForm('ruleForm')
-        this.editAdd = true;
-
-        // 连接名为小写
-        this.ruleForm.dbType = val;
-        let low = val.toLocaleLowerCase();
-
-        // 数据库类型示例
-        if (val === 'MongoDB') {
-          this.examples = '127.0.0.1:27010/monitoring';
-        } else {
-          this.examples = `jdbc:${low}://server:1433;databasename=test`
-        }
-        this.randerWidth = '170px';
-
-        if (val === 'RabbitMQ') {
-          this.messageQueue = true;
-          this.randerWidth = '120px';
-          this.examples = '127.0.0.1:5672'
-
-          // 新增窗口队列
-          if (row === '') {
-            this.exchange = ''
-            // this.dataSourceFlage = false;
-          } else {
-            // 修改窗口队列
-            let properties = JSON.parse(row['properties']);
-            this.exchange = properties['exchange']
-            // this.dataSourceFlage = true;
+            message: "请输入连接名称",
+            trigger: "blur"
           }
-          return
-        }
-        this.messageQueue = false;
+        ],
+        extendProperties: [
+          {
+            validator: validatePass2,
+            trigger: "blur"
+          }
+        ],
+        url: [
+          {
+            required: true,
+            message: "请输入连接url",
+            trigger: "blur"
+          }
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }
+        ],
+        userPassword: [
+          {
+            required: true,
+            message: "请输入用户密码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mixins: [project],
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    mysqlVal(val, row = "") {
+      /**
+       * 数据库类型的判断
+       * @param {String} val 数据库类型
+       * @param {Object} row 表格参数
+       */
+      this.dataSourceDis = false;
 
-      },
-      editVal(row) {
-        /**
-         * 修改窗口
-         * @param {Object} row 表格行点击参数
-         */
-        this.mysqlVal(row.dbType, row);
-        this.editAdd = false;
-        this.dataSourceDis = true;
-        let {
-          keys
-        } = Object;
-        this.editId = row.id;
-        for (let item of keys(this.ruleForm)) {
-          this.ruleForm[item] = row[item]
-        }
-      },
-      connectionTesting() {
-        /**
-         * 连接测试，数据矫正
-         */
-        this.correct('ruleForm', () => {
+      this.resetForm("ruleForm");
+      this.editAdd = true;
 
-          // 消息队列
-          this.$http.post(this.nozzle.testSource, this.ruleForm).then(response => {
+      // 连接名为小写
+      this.ruleForm.dbType = val;
+      let low = val.toLocaleLowerCase();
+
+      // 数据库类型示例
+      if (val === "MongoDB") {
+        this.examples = "127.0.0.1:27010/monitoring";
+      } else {
+        this.examples = `jdbc:${low}://server:1433;databasename=test`;
+      }
+      this.randerWidth = "170px";
+
+      if (val === "RabbitMQ") {
+        this.messageQueue = true;
+        this.randerWidth = "120px";
+        this.examples = "127.0.0.1:5672";
+
+        // 新增窗口队列
+        if (row === "") {
+          this.exchange = "";
+          // this.dataSourceFlage = false;
+        } else {
+          // 修改窗口队列
+          let properties = JSON.parse(row["properties"]);
+          this.exchange = properties["exchange"];
+          // this.dataSourceFlage = true;
+        }
+        return;
+      }
+      this.messageQueue = false;
+    },
+    editVal(row) {
+      /**
+       * 修改窗口
+       * @param {Object} row 表格行点击参数
+       */
+      this.mysqlVal(row.dbType, row);
+      this.editAdd = false;
+      this.dataSourceDis = true;
+      let { keys } = Object;
+      this.editId = row.id;
+      for (let item of keys(this.ruleForm)) {
+        this.ruleForm[item] = row[item];
+      }
+    },
+    connectionTesting() {
+      /**
+       * 连接测试，数据矫正
+       */
+      this.correct("ruleForm", () => {
+        // 消息队列
+        this.$http
+          .post(this.nozzle.testSource, this.ruleForm)
+          .then(response => {
             if (response.data.code === 200) {
               this.testPass = 200;
               this.errorConnect = true;
-              this.errorText.color = '#41ca4c'
-              this.errorHtml = '测试连接成功';
+              this.errorText.color = "#41ca4c";
+              this.errorHtml = "测试连接成功";
             } else {
               this.testPass = 0;
-              this.errorHtml = response.data.data
+              this.errorHtml = response.data.data;
               this.errorConnect = true;
-              this.errorText.color = '#F56C6C'
+              this.errorText.color = "#F56C6C";
             }
-          })
-        })
-
-      },
-      dataEdits() {
-        /**
-         * 按钮取消事件
-         */
-
-        this.errorConnect = false;
-        this.testPass = 0;
-        this.$emit('dataEdits', false);
-      },
-      async addParameter(api, dif = 1) {
-        // 新增数据传值
-        let datas = this.ruleForm;
-
-        // 消息队列
-        if (this.ruleForm.dbType === "RabbitMQ") {
-          datas['properties'] = JSON.stringify({
-            exchange: this.exchange
           });
-        }
+      });
+    },
+    dataEdits() {
+      /**
+       * 按钮取消事件
+       */
 
-        // 修改数据
-        if (dif === 2) {
-          datas['id'] = this.editId;
-        }
+      this.errorConnect = false;
+      this.testPass = 0;
+      this.$emit("dataEdits", false);
+    },
+    async addParameter(api, dif = 1) {
+      // 新增数据传值
+      let datas = this.ruleForm;
 
-        const response = await this.$http.post(api, datas);
-        notify(response);
-        if (response.data.code === 200) {
-          this.updateData();
-        }
-      },
-      resetForm(formName) {
-        // 清空表格数据
-        this.$refs[formName].resetFields();
-      },
-      correct(formName, cb, dif = 1) {
-        // 数据矫正
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            // 连接测试
-            // if (dif === 2) {
-            //   if (this.testPass === 0) {
-            //     this.$notify({
-            //       type: 'warning',
-            //       message: '请先完成连接测试'
-            //     })
-            //     return
-            //   }
-            // }
-            cb()
-            return true
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
+      // 消息队列
+      if (this.ruleForm.dbType === "RabbitMQ") {
+        datas["properties"] = JSON.stringify({
+          exchange: this.exchange
         });
+      }
 
-      },
-      updateData() {
-        /**
-         * 更新数据
-         */
-        this.$emit('updateData')
-      },
-      submitForm(dif) {
-        // 添加数据,修改数据
-        this.correct('ruleForm', () => {
-          let api = '';
+      // 修改数据
+      if (dif === 2) {
+        datas["id"] = this.editId;
+      }
+
+      const response = await this.$http.post(api, datas);
+      notify(response);
+      if (response.data.code === 200) {
+        this.updateData();
+      }
+    },
+    resetForm(formName) {
+      // 清空表格数据
+      this.$refs[formName].resetFields();
+    },
+    correct(formName, cb, dif = 1) {
+      // 数据矫正
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 连接测试
+          // if (dif === 2) {
+          //   if (this.testPass === 0) {
+          //     this.$notify({
+          //       type: 'warning',
+          //       message: '请先完成连接测试'
+          //     })
+          //     return
+          //   }
+          // }
+          cb();
+          return true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    updateData() {
+      /**
+       * 更新数据
+       */
+      this.$emit("updateData");
+    },
+    submitForm(dif) {
+      // 添加数据,修改数据
+      this.correct(
+        "ruleForm",
+        () => {
+          let api = "";
           if (dif === 1) {
             api = this.nozzle.addSource;
-            this.addParameter(api)
+            this.addParameter(api);
           } else {
             api = this.nozzle.updateSource;
-            this.addParameter(api, 2)
+            this.addParameter(api, 2);
           }
           this.dataEdits();
-        }, 2)
-
-      }
+        },
+        2
+      );
     }
   }
-
+};
 </script>
 
 <style>
-  #sqlSource {
-    width: 100%;
-  }
+#sqlSource {
+  width: 100%;
+}
 
-  .sqlType {
-    font-size: 16px;
-    color: #001529;
-    margin-bottom: 20px;
-    padding-left: 11px;
-  }
-
-  .connection {
-    margin-top: 5px;
-  }
-
+.connection {
+  margin-top: 5px;
+}
 </style>