修改

src/layout/mixin/getPublicData.js

@@ -23,7 +23,7 @@ export default {
           serviceId: id,
           page: this.pageIndex,
           pageSize: pageSize ?? this.pageSize,
-          dataContent
+          dataContent,
         })
         if (code == 0) {
           if (type) {

src/utils/request.js

@@ -84,6 +84,7 @@ service.interceptors.response.use(
   },
   (error) => {
     const des500 = `${error}`.split(" ").includes("500");
+    return
     if (des500) {
       Message({
         message: "身份令牌过期或失效，即将重新登录",

src/views/newRole/index.vue

@@ -406,7 +406,9 @@ export default {
       })
       if (type == 'add') {
         this.generalDataReception(SERVICE_ID.authTreeId, 1, res, true)
-        this.getRoleQuth(this.dataObj)
+        setTimeout(() => {
+          this.getRoleQuth(this.dataObj)
+        }, 100);
       } else {
         this.generalDataReception(SERVICE_ID.authTreeId, 3, msgs, true)
       }

src/views/systemSettings/views/newMachine/components/table.vue

@@ -0,0 +1,978 @@
+<template>
+  <div class="data-table" :style="{ marginTop: marginTop }">
+    <div :style="dataTableContentStyle" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
+      <div class="flex">
+        <div :class="dataId ? 'bcTitle': 'manageTitle'">{{ pageTitle }}</div>
+      </div>
+      <template v-if="tableData.length">
+        <div style="height:100%">
+          <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
+            <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip">
+              <template #header>
+                <span class="colTips">
+                  <el-tooltip :content="item.columnDescribe" placement="top">
+                    <span>{{ item.columnLabel }}</span>
+                  </el-tooltip>
+                </span>
+                <span v-if="item.needFilters">
+                  <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
+                    <i slot="reference" :class="[
+                        'filter-arrow',
+                        'el-icon-arrow-down',
+                        arrowClass(item.columnName),
+                      ]" />
+                    <el-form>
+                      <el-form-item :label="item.columnLabel">
+                        <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
+                          <el-option v-for="(option, optionIndex) in tableDataFilters[
+                              item.columnName
+                            ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
+                        </el-select>
+                      </el-form-item>
+                    </el-form>
+                  </el-popover>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" :width="fixedWidth">
+              <template slot-scope="scope">
+                <div class="hd-td">
+                  <el-button type="text" size="small" class="rmScs">启用</el-button>
+                  <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">停用</el-button>
+                  <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">重置</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+      <template v-else>
+        <el-empty description="暂无数据"></el-empty>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setTableFilters } from "@/utils/table";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import NoData from "@/components/nodata";
+import { translateDataToTreeAllTreeMsg } from "@/utils/validate";
+import { Query, newData, modifyData, moveData } from "@/api/webApi";
+export default {
+  name: "DataTable",
+  props: {
+    dataContent: {
+      type: Object,
+      default: () => ({}),
+    },
+    //弹框宽度
+    width: {
+      type: String,
+      default: "630px",
+    },
+    //弹框是否显示在body上
+    isBody: {
+      type: Boolean,
+      default: false,
+    },
+    //弹框表单-行数
+    rows: {
+      type: Number,
+      default: 24,
+    },
+    //弹框-表单文字宽度
+    labelWidth: {
+      type: String,
+      default: "100px",
+    },
+    //表格高度
+    tableHeight: {
+      type: [String, Number],
+      default: 0,
+    },
+    minHeight: {
+      type: Number,
+      default: 89,
+    },
+    // 是否显示合计行
+    showSummary: {
+      type: Boolean,
+      default: false,
+    },
+    marginTop: {
+      type: String,
+      default: "0px",
+    },
+    // 不换行，溢出隐藏
+    showOverflowTooltip: {
+      type: Boolean,
+      default: false,
+    },
+    //操作列宽度
+    fixedWidth: {
+      type: String,
+      default: "180px",
+    },
+    dataId: {
+      type: Number
+    },
+    dataTitle: {
+      type: String,
+      default: "",
+    },
+  },
+  components: { Dialog, NoData },
+  data () {
+    return {
+      pageTitle: '',
+      asShow: true,
+      loading: false,
+      flag: false,
+      serviceId: null,
+      rmFlag: false,
+      rowTitle: "",
+      page: 0,
+      pageSize: 10,
+      noMore: false,
+      tableCols: [], //表头数据
+      tableData: [], //表格数据
+      tableColsCopy: [], //表头数据缓存
+      tableDataFilters: {}, //表头-下拉数据
+      filterValues: {}, //表头-下拉-选中数据
+      tableDataCopy: [], //缓存table数据
+      tableGroups: [], //表格分组数据
+      colShowFilter: "", //表头-下拉-箭头
+      spanArr: [], //表格分组数据缓存
+      pos: 0, //表格分组计数
+      tableTitle: "新增", //弹框标题
+      tableType: "add", //弹框类型=新增/编辑
+      tableForm: {}, //弹框表单
+      rmTitle: "", //弹框-删除-标题
+      tableObj: {}, //增/删/改数据缓存
+      tableOptions: {}, //弹框-下来数据缓存
+      tableArrs: [], //重组table-表头下拉
+      proAll: false, //重组时-所有请求是否都完成
+      roles: JSON.parse(sessionStorage.getItem("userAuthList")) ?? [],
+      tableOptionscp: {},
+      tabledatacopy: {},
+      queryId: 3,
+      form: {
+        computing_expression: null,
+        is_exec: null,
+        isActiveTable: null,
+        library_name: null,
+        library_sort: null,
+        library_type: null,
+        parmIndex: null,
+        sourceObjectName: null,
+        datasource_id: null
+      },
+      datasource_id: 7,
+      dataSourceArrs: []
+    };
+  },
+  watch: {
+    dataContent: {
+      handler (obj) {
+        if (obj.deployNodeID) {
+          this.resetTable();
+          this.getColumnData(obj.deployNodeID)
+        } else {
+          this.resetTable();
+        }
+      },
+      deep: true
+    }
+  },
+  computed: {
+    dataTableContentStyle () {
+      const style = {};
+      if (this.minHeight) {
+        style["min-height"] = this.minHeight;
+      }
+      if (this.tableHeight) {
+        style["height"] = this.tableHeight;
+      }
+      return style;
+    },
+    //设置表头-下拉-箭头样式
+    arrowClass () {
+      return function (prop) {
+        let classString = "";
+        if (this.colShowFilter === prop) {
+          return "arrow-active";
+        }
+        if (
+          Object.entries(this.tableDataFilters).find(
+            ([key, arr]) => this.filterValues[prop]
+          )
+        ) {
+          classString += "arrow-blue";
+        }
+        return classString;
+      };
+    },
+    //设置新增修改表单类型
+    fromDataType () {
+      return function (type) {
+        return type.replace(/\([^\)]*\)/g, "");
+      }
+    },
+
+    //设置表头-下拉-选中数据
+    filteredTableData () {
+      if (this.isTree) {
+        this.tableData = translateDataToTreeAllTreeMsg(
+          this.tableData,
+          "parentID",
+          "companyID"
+        );
+      }
+      return this.tableData.filter((item) => {
+        let flag = true;
+        Object.entries(this.filterValues).forEach(([key, value]) => {
+          if (value !== "" && item[key] !== value) {
+            flag = false;
+          }
+        });
+        return flag;
+      });
+    },
+  },
+  updated () {
+    this.$refs["table"]?.doLayout();
+  },
+  methods: {
+    //获取表头数据
+    async getColumnData (id) {
+      try {
+        const { code, returnData } = await Query({
+          serviceId: SERVICE_ID.getTableColumnId,
+          dataContent: [
+            {
+              "left": "(",
+              "column": "serviceOutPutId",
+              "comparator": "=",
+              "value": `${id}`,
+              "right": ")",
+              "connector": ""
+            }
+          ],
+          event: '0'
+        });
+        if (code == 0) {
+          if (returnData && returnData.length) {
+            const titleColumn = returnData.find(
+              (item) => item.needShow === 1
+            );
+            if (titleColumn) {
+              this.rowTitle = titleColumn.columnName;
+            }
+            this.tableCols = returnData;
+            this.getQuery(this.queryId);
+          }
+        } else {
+          this.$message.error("获取表头数据失败");
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    eledite () {
+      this.flag = false;
+      const arrbegin = _.cloneDeep(this.tableOptionscp);
+      this.tableOptions = arrbegin;
+    },
+    load () {
+      //
+      if (!this.isTree) {
+        if (this.noMore || this.loading) {
+          return;
+        }
+        this.getQuery(this.queryId);
+      }
+    },
+    resetTable () {
+      this.page = 0;
+      this.noMore = false;
+      this.tableData = [];
+    },
+    changeSelect (data, name) {
+      if (this.tableForm[data] === "") {
+        this.tableForm[data] = null;
+      }
+      this.tableForm[this.tableOptions[data][0].setvalue] =
+        this.tableForm[data];
+      const arrbegin = _.cloneDeep(this.tabledatacopy);
+      if (this.tableForm.beginNode) {
+        this.tableOptions.beginPosition = arrbegin.beginPosition.filter(
+          (i) => i.nodeCode === this.tableForm.beginNode
+        );
+        arrbegin.beginPosition.forEach((element) => {
+          if (element.v === this.tableForm.beginPosition) {
+            if (element.nodeCode !== this.tableForm.beginNode) {
+              this.tableForm.beginPosition = "";
+            }
+          }
+        });
+        // let arr = [];
+        // this.tableOptions.beginPosition.forEach((element) => {
+        //   arr.push(element.nodeCode);
+        // });
+        // if (
+        //   !arr.includes(this.tableForm.beginPosition) &&
+        //   this.tableForm.beginNode
+        // ) {
+        //   this.tableForm.beginPosition = null;
+        // }
+        this.asShow = false;
+        this.asShow = true;
+      }
+      if (this.tableForm.beginPosition && !this.tableForm.beginNode) {
+        arrbegin.beginPosition.forEach((element) => {
+          if (this.tableForm.beginPosition === element.v) {
+            this.tableForm.beginNode = element.nodeCode;
+          }
+        });
+      }
+      if (this.tableForm.endNode) {
+        this.tableOptions.endPosition = arrbegin.endPosition.filter(
+          (i) => i.nodeCode === this.tableForm.endNode
+        );
+        arrbegin.endPosition.forEach((element) => {
+          if (element.v === this.tableForm.endPosition) {
+            if (element.nodeCode !== this.tableForm.endNode) {
+              this.tableForm.endPosition = "";
+            }
+          }
+        });
+        this.asShow = false;
+        this.asShow = true;
+      }
+      if (this.tableForm.endPosition && !this.tableForm.endNode) {
+        arrbegin.endPosition.forEach((element) => {
+          if (this.tableForm.endPosition === element.v) {
+            this.tableForm.endNode = element.nodeCode;
+          }
+        });
+      }
+    },
+    inputChangeHandler (data) {
+      if (this.tableForm[data] === "") {
+        this.tableForm[data] = null;
+      }
+    },
+    //获取表格数据
+    async getQuery (id) {
+      try {
+        this.loading = true;
+        const { code, returnData, columnset } = await Query({
+          serviceId: id,
+          page: ++this.page,
+          pageSize: this.pageSize,
+          dataContent: [
+            {
+              "left": "(",
+              "column": "deployNodeID",
+              "comparator": "=",
+              "value": `${id}`,
+              "right": ")",
+              "connector": ""
+            }
+          ],
+          event: '0'
+        });
+        if (code == 0) {
+          if (returnData.length === 0) {
+            this.page--;
+            this.noMore = true;
+            this.loading = false;
+          } else {
+            this.tableData.push(...returnData);
+            // this.tableCols = columnset;
+            setTimeout(() => {
+              this.initTableData();
+              this.loading = false;
+            }, 100);
+          }
+        } else {
+          this.page--;
+          this.loading = false;
+          this.$message.error("获取表格数据失败");
+        }
+      } catch (error) {
+        this.page--;
+        this.loading = false;
+      }
+    },
+    //表格-增/删/改
+    async generalDataReception (event, data) {
+      try {
+        const params = {
+          serviceId: this.dataId,
+          dataContent: data,
+          event: `${event}`,
+        };
+        const { code } =
+          event == 1
+            ? await newData(params)
+            : event == 2
+              ? await modifyData(params)
+              : await moveData(params);
+        if (code == 0) {
+          this.$message.success("操作成功");
+          this.resetTable();
+          this.getQuery(this.queryId);
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.form = {};
+          // this.$router.go(0);
+        } else {
+          this.$message.error("操作失败");
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.form = {};
+        }
+      } catch (error) {
+        this.flag = false;
+        this.rmFlag = false;
+        this.tableObj = {};
+        this.form = {};
+      }
+    },
+    // 表格勾选
+    toggleRowSelection (row, isSelected) {
+      this.$refs["table"].toggleRowSelection(row, isSelected);
+    },
+    // 表格初始勾选
+    selectTableRows (tableData, selectFlagName) {
+      tableData.forEach((row) => {
+        this.$refs["table"].toggleRowSelection(row, !!row[selectFlagName]);
+      });
+      this.$emit("selectionAll", this.$refs.table.selection);
+    },
+    //初始化表格
+    initTableData () {
+      this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
+      this.tableColsCopy = _.orderBy(this.tableColsCopy, ['orderNumber'], ['asc']);
+      this.tableDataCopy = _.cloneDeep(this.tableData);
+      const datas = _.cloneDeep(this.tableColsCopy);
+      // const reqUts = [];
+      datas.forEach(async (item) => {
+        this.tableDataFilters[item.columnName] = [];
+        if (item.needGroup) {
+          this.tableGroups.push(item.columnName);
+        }
+        if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
+          this.tableArrs.push(item.columnName);
+          // const reqUt = this.getSelectData(item.listqueryTemplateID)
+          // reqUts.push(reqUt)
+          if (!this.tableOptions[item.columnName]) {
+            //开始位置beginPosition 结束位置endPosition (区分开始结束位置必须传null)
+            if (
+              item.columnName !== "beginPosition" &&
+              item.columnName !== "endPosition"
+            ) {
+              this.tableOptions[item.columnName] = await this.getSelectData(
+                item.listqueryTemplateID
+              );
+            } else {
+              this.tableOptions[item.columnName] = await this.getSelectData(
+                item.listqueryTemplateID,
+                null
+              );
+              this.tabledatacopy[item.columnName] = _.cloneDeep(
+                this.tableOptions[item.columnName]
+              );
+            }
+          } else {
+            if (
+              item.columnName === "beginPosition" ||
+              item.columnName === "endPosition"
+            ) {
+              this.tableOptions[item.columnName] = await this.getSelectData(
+                item.listqueryTemplateID,
+                null
+              );
+            }
+          }
+          //
+        }
+        // this.filterValues[item.columnName] = ''
+      });
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.tableGroup(this.tableData);
+      // this.selectTableRows(this.tableData, "DeployID");
+      this.tableOptionscp = _.cloneDeep(this.tableOptions);
+      const arrbegin = _.cloneDeep(this.tableOptions);
+      if (arrbegin) {
+        setTimeout(() => {
+          this.tableData.forEach((element) => {
+            if (this.tableOptions.beginNode) {
+              arrbegin.beginNode.forEach((res) => {
+                if (res.v === element.beginNode) {
+                  element.beginNode = res.k;
+                }
+              });
+              arrbegin.endNode.forEach((res) => {
+                if (res.v == element.endNode) {
+                  element.endNode = res.k;
+                }
+              });
+              arrbegin.calculationBasis.forEach((res) => {
+                if (res.v == element.calculationBasis) {
+                  element.calculationBasis = res.k;
+                }
+              });
+              //位置
+              this.tabledatacopy.beginPosition.forEach((res) => {
+                if (res.v == element.beginPosition) {
+                  element.beginPosition = res.k;
+                }
+              });
+              this.tabledatacopy.endPosition.forEach((res) => {
+                if (res.v == element.endPosition) {
+                  element.endPosition = res.k;
+                }
+              });
+            }
+          });
+        }, 100);
+      }
+      // this.getSelectDataAll(reqUts)
+    },
+    //获取所有获取弹框-下拉数据-请求状态
+    getSelectDataAll (reqUts) {
+      Promise.all(reqUts)
+        .then((res) => {
+          this.proAll = true;
+        })
+        .catch((err) => {
+          this.proAll = false;
+        });
+    },
+    //获取弹框-下拉数据
+    async getSelectData (id, name) {
+      // name ? [name] : name === null ? [null]: [],
+      const { code, returnData } = await Query({
+        id,
+        dataContent: name ? [name] : name === null ? [null] : [],
+      });
+      if (code == 0) {
+        return returnData.listValues;
+      } else {
+        return [];
+      }
+    },
+    //重组table-显示名称
+    setTable () {
+      this.tableArrs.forEach((item) => {
+        this.tableOptions[item].forEach((p) => {
+          this.tableDataCopy.forEach((msg) => {
+            if (msg[item] == p.v) {
+              msg[item] = p.k;
+            }
+          });
+          this.tableDataFilters[item].forEach((cap) => {
+            if (cap.value == p.v) {
+              cap.text = p.k;
+              cap.value = p.k;
+            }
+          });
+        });
+      });
+      this.tableData = this.tableDataCopy;
+    },
+    //分组
+    tableGroup (tableData) {
+      const spanArr = [];
+      let pos = 0;
+      let ifYj = this.tableGroups[0];
+      for (let i = 0; i < tableData.length; i++) {
+        if (i === 0) {
+          spanArr.push(1);
+        } else {
+          if (tableData[i][ifYj] === tableData[i - 1][ifYj]) {
+            spanArr[pos] += 1;
+            spanArr.push(0);
+          } else {
+            spanArr.push(1);
+            pos = i;
+          }
+        }
+      }
+      this.spanArr = spanArr;
+      this.pos = pos;
+    },
+    popoverShowHandler (prop) {
+      this.colShowFilter = prop;
+    },
+    popoverHideHandler () {
+      this.colShowFilter = "";
+    },
+    //分组
+    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (this.tableGroups.includes(column["property"])) {
+        const _row = this.spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col,
+        };
+      }
+    },
+    //合计
+    getSummaries (param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        this.tableColsCopy.forEach((p) => {
+          if (column.property == p.columnName && p.needCount) {
+            const values = data.map((item) => Number(item[column.property]));
+            if (!values.every((value) => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!isNaN(value)) {
+                  return prev + curr;
+                } else {
+                  return prev;
+                }
+              }, 0);
+              sums[index] += "";
+            }
+          }
+        });
+      });
+      return sums;
+    },
+    //弹框-确定
+    handleOk () {
+      this.submitClickHandler();
+    },
+    //滚动
+    tableLoad () { },
+    //表格-新增
+    handleAdd () {
+      this.flag = true;
+      this.tableType = "add";
+      this.tableTitle = "新增算法配置";
+      for (const key in this.form) {
+        if (Object.hasOwnProperty.call(this.form, key)) {
+          this.form[key] = null
+        }
+      }
+    },
+    async getDataSourceId (id) {
+      const { code, returnData } = await Query({
+        serviceId: id,
+        dataContent: this.dataContent,
+      });
+      if (code == 0) {
+        this.dataSourceArrs = returnData
+      }
+    },
+    //表格-编辑
+    handleEdit (row) {
+      this.flag = true;
+      this.tableType = "edit";
+      this.tableTitle = "编辑算法配置";
+      this.form = JSON.parse(JSON.stringify(row));
+    },
+
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.form = Object.assign(this.form, this.dataContent)
+          if (this.tableType == "add") {
+            this.generalDataReception(1, this.form);
+          } else {
+            this.generalDataReception(2, this.form);
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //表格-删除
+    handleRemove (row) {
+      this.rmFlag = true;
+      // this.rmTitle = row.className || row.username || row.serviceName || row.queryTemplateName;
+      this.rmTitle = row[this.rowTitle];
+      this.tableObj = row;
+    },
+    //表格-删除-确认
+    tableRemove () {
+      this.generalDataReception(3, this.tableObj);
+    },
+
+    // 表格-选中行
+    selectHandler (selection, row) {
+      this.$emit("selection-change", selection, row);
+    },
+    // 表格-查询模板预览
+    handlePreview (row) {
+      this.$emit("preview", row);
+    },
+    //服务启停
+    async controlService (event, data) {
+      try {
+        const params = {
+          serviceId: data.deployNodeID
+        };
+        const { code } =
+          event == 1
+            ? await start(params)
+            : await stop(params);
+        if (code == 0) {
+          this.generalDataReception(2, data)
+        } else {
+          this.$message.error("操作失败");
+        }
+      } catch (error) {
+        this.$message.error("操作失败");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.data-table {
+  width: 100%;
+  // background-color: #fff;
+  padding: 20px;
+  .data-table-content {
+    height: 100%;
+    .nodata {
+      margin-top: 25px;
+    }
+  }
+  .bcButton {
+    background: #2579a0;
+    border-radius: 4px;
+    border-color: #2579a0;
+    color: #ffffff;
+  }
+  .bcButton.is-disabled {
+    color: #8cc5ff;
+    background-color: #ecf5ff;
+    border-color: #d9ecff;
+  }
+  .bcTitle {
+    font-size: 20px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+  }
+  ::v-deep .table {
+    width: 100%;
+    margin-top: 25px;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .hd-td {
+      display: flex;
+      justify-content: center;
+    }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+        > .el-checkbox {
+          display: none;
+        }
+      }
+      .has-gutter {
+        tr {
+          .bgl-huang {
+            background: #fcf0b1;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper {
+      tr.bgl-hui {
+        background: #d2d6df;
+        td {
+          background: #d2d6df;
+        }
+        &.redBorder {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: #e83f82;
+          }
+        }
+      }
+    }
+    .rmScs {
+      width: 48px;
+      height: 24px;
+      border-color: #b2cbde;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      float: left;
+      span {
+        color: #2579a0;
+      }
+    }
+    .rmScser {
+      width: 60px;
+      height: 24px;
+      border-color: #9ebbf7;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      float: left;
+      span {
+        color: #2d67e3;
+      }
+    }
+    .rmSc {
+      width: 48px;
+      height: 24px;
+      background: #eb2f3b;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        color: #ffffff;
+      }
+    }
+
+    .hrefBtn {
+      width: 48px;
+      height: 24px;
+      background: #6f81bc;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        color: #ffffff;
+      }
+    }
+    .tableStatus {
+      font-size: 14px;
+      .icon {
+        width: 14px;
+        height: 14px;
+        background: #2d67e3;
+        border-radius: 2px;
+        display: inline-block;
+        vertical-align: middle;
+        position: relative;
+        top: -2px;
+      }
+      .status0 {
+        position: relative;
+        top: 5px;
+      }
+      .status1 {
+        position: relative;
+        top: 5px;
+        .icon {
+          background-color: #afb4bf;
+        }
+      }
+      .status2 {
+        position: relative;
+        top: 5px;
+        .icon {
+          background-color: #eb2f3b;
+        }
+      }
+    }
+    .el-table__fixed-right {
+      thead {
+        div {
+          color: #101116;
+        }
+      }
+    }
+    .hd-td {
+      .hd-tr {
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+        padding: 0 8px;
+      }
+    }
+  }
+  .data-table-btn {
+    margin-top: 13px;
+    line-height: 32px;
+    margin-bottom: 20px;
+  }
+}
+.filter-arrow {
+  cursor: pointer;
+  transition: 0.3s transform;
+  &.arrow-active {
+    transform: rotate(-180deg);
+  }
+  &.arrow-blue {
+    color: #2d7cff;
+    font-weight: bold;
+  }
+}
+.el-select-dropdown__item.hover {
+  background: #d2d6df;
+}
+.data-table-dialog {
+  ::v-deep .dialog-content {
+    .title {
+      background-color: #2579a0;
+    }
+    .bcButton {
+      background-color: #2579a0;
+    }
+    .contents {
+      padding: 24px;
+      .el-form {
+        padding-right: 0;
+      }
+      .el-select {
+        width: 100%;
+      }
+      .r40 {
+        margin-right: 60px;
+      }
+    }
+    .datetimes {
+      width: 100%;
+    }
+    .el-form-item__content {
+      line-height: 41px;
+    }
+  }
+}
+</style>

src/views/systemSettings/views/newMachine/css/index.scss

@@ -0,0 +1,166 @@
+.newService {
+  height: calc(100vh - 80px);
+  padding: 24px;
+  &-head {
+    line-height: 30px;
+    .icons {
+      &-list {
+        font-size: 14px;
+        margin-right: 35px;
+        &-box {
+          width: 14px;
+          height: 14px;
+          display: inline-block;
+          border-radius: 2px;
+          margin-right: 12px;
+          vertical-align: middle;
+        }
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .start {
+        .icons-list-box {
+          background-color: #50c183;
+        }
+      }
+      .stop {
+        .icons-list-box {
+          background-color: #afb4bf;
+        }
+      }
+      .error {
+        .icons-list-box {
+          background-color: #ef4747;
+        }
+      }
+    }
+  }
+  &-content {
+    margin-top: 30px;
+    height: calc(100% - 58px);
+    &-left {
+      width: 360px;
+      height: 100%;
+      background: #ffffff;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      margin-right: 16px;
+      &-top {
+        padding: 24px 24px 18px 24px;
+        .head {
+          line-height: 32px;
+          .title {
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #101116;
+          }
+        }
+        .search {
+          margin-top: 18px;
+        }
+      }
+      &-bottom {
+        height: calc(100% - 138px);
+        .contents {
+          padding: 0 24px;
+          height: 42px;
+          line-height: 42px;
+          .left {
+            .box {
+              width: 16px;
+              height: 16px;
+              display: inline-block;
+              border-radius: 2px;
+              margin-right: 15px;
+              vertical-align: middle;
+            }
+            .txt {
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #101116;
+            }
+            .success {
+              background-color: #50c183;
+            }
+            .error {
+              background: #afb4bf;
+            }
+          }
+          .right {
+            font-size: 14px;
+            span {
+              margin-right: 16px;
+              cursor: pointer;
+              &:last-child {
+                margin-right: 0;
+              }
+            }
+            .start,
+            .stop {
+              color: #2579a0;
+            }
+            .error {
+              color: #eb3434;
+            }
+          }
+        }
+        .active {
+          background: #e4f3f9;
+        }
+      }
+    }
+    &-right {
+      flex: 1;
+      height: 100%;
+      &-top {
+        
+        background: #ffffff;
+        border-radius: 4px;
+        padding: 24px;
+        margin-bottom: 16px;
+        .title {
+          font-size: 20px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #303133;
+        }
+        .demo-form,.cj-form {
+          margin-top: 20px;
+          .el-form-item {
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+        .cj-form{
+          .title{
+            margin-bottom: 20px;
+          }
+          .el-form-item{
+            margin-bottom: 0;
+          }
+          margin-top: 0;
+        }
+      }
+      &-bottom {
+        background: #ffffff;
+        border-radius: 4px;
+        .data-table{
+          height: 100%;
+        }
+      }
+    }
+    .serButton {
+      border: 1px solid #b2cbde;
+      color: #2579a0;
+      border-radius: 4px;
+    }
+    .bcButton {
+      background: #2579a0;
+      border-radius: 4px;
+    }
+  }
+}

src/views/systemSettings/views/newMachine/index.vue

@@ -0,0 +1,393 @@
+<template>
+  <div class="newService">
+    <div class="newService-head flex-wrap">
+      <div class="manageTitle">{{ title }}</div>
+      <div class="icons flex-wrap">
+        <div class="icons-list start">
+          <span class="icons-list-box"></span>
+          <span class="icons-list-text">启用</span>
+        </div>
+        <div class="icons-list stop">
+          <span class="icons-list-box"></span>
+          <span class="icons-list-text">停用</span>
+        </div>
+        <div class="icons-list error">
+          <span class="icons-list-box"></span>
+          <span class="icons-list-text">异常</span>
+        </div>
+      </div>
+    </div>
+    <div class="newService-content flex-wrap">
+      <div class="newService-content-left">
+        <div class="newService-content-left-top">
+          <div class="flex head">
+            <div class="title">机器列表</div>
+            <el-button @click="handleAdd" class="serButton" size="small">新增</el-button>
+          </div>
+          <div class="search">
+            <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" v-model="search">
+            </el-input>
+          </div>
+        </div>
+        <div class="newService-content-left-bottom">
+          <template v-if="dataList.length">
+            <el-scrollbar ref="scroll" style="height: 100%">
+              <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+                <div v-for="(item,index) in dataList" :key="index" @click.stop="handleClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
+                  <div class="left">
+                    <span :class="item.runState ? 'success' : 'error'" class="box"></span>
+                    <span class="txt">{{ item.deployNodeName }}</span>
+                  </div>
+                  <div v-show="activeIndex == index" class="right">
+                    <!-- <template v-if="!flag && item.deployNodeID">
+                      <template v-if="item.serviceType == 4">
+                        <span @click.stop="handleStart" v-if="!item.runState" class="start">启用</span>
+                        <span @click.stop="handleStop" v-else class="stop">停用</span>
+                      </template>
+                      <template v-else>
+                        <span @click.stop="handleRest(item)" class="rest">重置</span>
+                      </template>
+                    </template> -->
+                    <span @click.stop="handleError" class="error">删除</span>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </template>
+          <template v-else>
+            <el-empty description="暂无数据"></el-empty>
+          </template>
+        </div>
+      </div>
+      <div class="newService-content-right">
+        <div class="newService-content-right-top">
+          <div class="flex">
+            <div class="title">服务配置 {{ dataObj.deployNodeName }}</div>
+            <el-button type="primary" @click="handleSave" :disabled="flag" class="bcButton" size="small">保存</el-button>
+          </div>
+          <div class="demo-form">
+            <el-form :inline="true" :model="formInline" class="flex">
+              <el-form-item label="机器名称">
+                <el-input clearable v-model="formInline.deployNodeName" :disabled="activeIndex == null" size="small" placeholder="请输入服务名称"></el-input>
+              </el-form-item>
+              <el-form-item label="IP及端口">
+                <el-input clearable v-model="formInline.serviceURL" :disabled="activeIndex == null" size="small" placeholder="请输入IP及端口"></el-input>
+              </el-form-item>
+              <el-form-item label="部署位置">
+                <el-input clearable v-model="formInline.serviceName" :disabled="activeIndex == null" size="small" placeholder="请输入部署位置"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div :style="formInline.serviceType != 4 ? 'height: calc(100% - 180px);':'height: calc(100% - 305px);'" class="newService-content-right-bottom">
+          <Table :dataId="dataId" :dataContent="msgContent" width="860px" tableHeight="calc(100% - 30px)" dataTitle="算法配置" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from './components/table.vue'
+import { Query, newData, modifyData, moveData, start, stop } from "@/api/webApi"
+import * as _ from 'lodash'
+export default {
+  name: 'NewService',
+  components: { Table },
+  data () {
+    return {
+      title: '服务设置',
+      search: '',
+      arrs: [],
+      flag: true,
+      formInline: {
+        serviceName: '',
+        serviceType: '',
+        workId: '',
+        loopCount: '',
+        frequencyCount: '',
+        frequencyUnit: '',
+        taskValid: '',
+        taskInvalid: '',
+        taskType: '',
+        cronExpress: ''
+      },
+      serviceType: [
+        {
+          label: '接收',
+          value: 1
+        },
+        {
+          label: '采集',
+          value: 4
+        }
+      ],
+      activeIndex: null,
+      pageIndex: 0,
+      pageSize: 9999,
+      dataContent: {},
+      queryId: '',
+      dataObj: {},
+      dataType: 'edit',
+      noMore: false,
+      loading: false,
+      dataId: 8,
+      msgContent: {},
+      jqList: []
+    }
+  },
+  computed: {
+    dataList () {
+      return this.arrs.filter(data => !this.search || data.serviceName.toLowerCase().includes(this.search.toLowerCase()))
+    }
+  },
+  created () {
+    const { title, qid } = this.$route.meta
+    this.title = title
+    this.queryId = qid
+    this.getQuery(qid)
+  },
+  updated () {
+    this.scrollDown()
+  },
+  methods: {
+    async getQuery (id) {
+      try {
+        this.loading = true;
+        const { code, returnData } = await Query({
+          serviceId: id,
+          page: ++this.pageIndex,
+          pageSize: this.pageSize,
+          dataContent: this.dataContent,
+          event: '0'
+        })
+        if (code == 0) {
+          if (returnData.length === 0) {
+            this.pageIndex--;
+            this.noMore = true;
+          }
+          this.arrs.push(...returnData)
+          if (this.dataType == 'add') {
+            const item = this.arrs[this.arrs.length - 1]
+            if (Object.keys(item).length) {
+              this.dataObj = item
+              this.flag = false
+              this.msgContent = item
+            }
+          }
+          this.loading = false;
+        } else {
+          this.pageIndex--;
+          this.loading = false;
+        }
+      } catch (error) {
+        this.pageIndex--;
+        this.loading = false;
+      }
+    },
+    async getMsgList (id) {
+      try {
+        const { code, returnData } = await Query({
+          serviceId: id,
+          page: 1,
+          pageSize: 99,
+          dataContent: {},
+        })
+        if (code == 0) {
+          this.jqList = returnData
+        }
+      } catch (error) {
+        this.jqList = []
+      }
+    },
+    load () {
+      if (!this.noMore) {
+        this.getQuery(this.queryId);
+      }
+    },
+    scrollDown () {
+      if (this.$refs['scroll'] && this.dataType == 'add') {
+        this.$refs['scroll'].wrap.scrollTop = this.$refs['scroll'].wrap.scrollHeight
+      }
+    },
+    resetTable () {
+      this.pageIndex = 0;
+      this.noMore = false;
+      this.arrs = [];
+    },
+    //服务列表-新增
+    handleAdd () {
+      this.dataType = 'add'
+      this.flag = false
+      this.dataObj.serviceName = '新建服务'
+      this.arrs.push({ serviceName: '新建服务' })
+      this.activeIndex = this.arrs.length - 1
+      for (const key in this.formInline) {
+        if (Object.hasOwnProperty.call(this.formInline, key)) {
+          this.formInline[key] = null
+        }
+      }
+      this.msgContent = {}
+    },
+    //服务列表-点击
+    handleClick (item, index) {
+      this.dataType = 'edit'
+      this.dataObj = _.cloneDeep(item)
+      this.formInline = _.cloneDeep(item)
+      this.activeIndex = index
+      this.flag = false
+      this.msgContent = item
+    },
+    //服务列表-启用
+    handleStart () {
+      if (this.dataObj.deployNodeID && this.dataType == 'edit') {
+        this.dataObj.runState = 1
+        this.controlService(1, this.dataObj)
+      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
+        this.arrs[this.arrs.length - 1].runState = 1
+        this.controlService(1, this.arrs[this.arrs.length - 1])
+      }
+      else {
+        this.$message.error('请先添加当前服务后再操作')
+      }
+    },
+    //服务列表-停用
+    handleStop () {
+      if (this.dataObj.deployNodeID && this.dataType == 'edit') {
+        this.dataObj.runState = 0
+        this.controlService(0, this.dataObj)
+      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
+        this.arrs[this.arrs.length - 1].runState = 0
+        this.controlService(0, this.arrs[this.arrs.length - 1])
+      }
+      else {
+        this.$message.error('请先添加当前服务后再操作')
+      }
+    },
+    //服务列表-重置
+    handleRest (item) {
+      this.controlService(0, item)
+    },
+    //服务列表-保存
+    handleSave () {
+      if (this.dataObj.deployNodeID && this.dataType == 'edit') {
+        this.generalDataReception(2, this.formInline)
+      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
+        this.formInline.deployNodeID = this.arrs[this.arrs.length - 1].deployNodeID
+        this.generalDataReception(2, this.formInline)
+      } else if (this.dataType == 'add') {
+        this.generalDataReception(1, this.formInline)
+      }
+      else {
+        this.$message.error('请先选中服务后再操作')
+      }
+    },
+    //服务列表-删除
+    handleError () {
+      if (this.dataObj.deployNodeID && this.dataType == 'edit') {
+        this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.generalDataReception(3, this.dataObj)
+          this.msgContent = {}
+          this.activeIndex = null;
+          this.dataObj = {};
+          for (const key in this.formInline) {
+            if (Object.hasOwnProperty.call(this.formInline, key)) {
+              this.formInline[key] = null
+            }
+          }
+          this.flag = true
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
+        this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.generalDataReception(3, this.arrs[this.arrs.length - 1])
+          this.msgContent = {
+            service_id: ''
+          }
+          this.activeIndex = null;
+          this.dataObj = {};
+          for (const key in this.formInline) {
+            if (Object.hasOwnProperty.call(this.formInline, key)) {
+              this.formInline[key] = null
+            }
+          }
+          this.flag = true
+          this.dataType = 'edit'
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      }
+      else {
+        this.arrs.splice(this.activeIndex, 1)
+        this.activeIndex = null
+        this.flag = true
+        this.dataObj = {}
+      }
+    },
+    //服务列表-增/删/改
+    async generalDataReception (event, data) {
+      try {
+        const params = {
+          serviceId: this.queryId,
+          dataContent: data,
+          event: `${event}`,
+        };
+        const { code } =
+          event == 1
+            ? await newData(params)
+            : event == 2
+              ? await modifyData(params)
+              : await moveData(params);
+        if (code == 0) {
+          this.$message.success("操作成功");
+          this.resetTable();
+          this.getQuery(this.queryId);
+        } else {
+          this.$message.error("操作失败");
+        }
+      } catch (error) {
+        this.$message.error("操作失败");
+      }
+    },
+
+    //服务启停
+    async controlService (event, data) {
+      try {
+        const params = {
+          serviceId: data.deployNodeID
+        };
+        const { code } =
+          event == 1
+            ? await start(params)
+            : await stop(params);
+        if (code == 0) {
+          this.generalDataReception(2, data)
+        } else {
+          this.$message.error("操作失败");
+        }
+      } catch (error) {
+        this.$message.error("操作失败");
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./css/index.scss";
+</style>