添加数据底座相关

package.json

@@ -17,6 +17,7 @@
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "echarts": "^5.2.2",
+    "el-table-infinite-scroll": "^1.0.11",
     "element-ui": "^2.15.7",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.2.1",

public/config.js

@@ -6,6 +6,7 @@ PLATFROM_CONFIG.appSecret = "40t7vcbi5bc1twyihd2dum82yn1mt1kj" //appSecret
 PLATFROM_CONFIG.appId = "unsk1w37910olf8j" //appid
 PLATFROM_CONFIG.gatewayApiUrl = "106.14.243.117:8089" // 网关测试连接地址
 PLATFROM_CONFIG.gatewayUrl = "http://106.14.243.117:8089" //网关http请求地址
+PLATFROM_CONFIG.dataBaseUrl = "http://192.168.3.74:8093" //数据底座请求地址
 // does job show yes/no 显示/不显示职务
 PLATFROM_CONFIG.doesJobShow = false
 

src/api/acquisition.js

@@ -0,0 +1,206 @@
+import request from '@/utils/request'
+
+//数据解析-详情
+export function analysisList(params) {
+  return request({
+    url: '/baggageDC/openApi/AnalysisMainQuery',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据解析-状态修改
+export function analysisStart(params) {
+  return request({
+    url: '/baggageDC/openApi/UpdateAnalysisStatus',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据解析-新增修改
+export function analysisadd(params) {
+  return request({
+    url: '/baggageDC/openApi/AnalysisMainSave',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据解析-删除
+export function analysisele(params) {
+  return request({
+    url: '/baggageDC/openApi/AnalysisDelete',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据解析-编辑列表查询
+export function anaListmod(params) {
+  return request({
+    url: '/baggageDC/openApi/AnalysisItemQuery',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据解析-编辑基本信息
+export function anaListmoder(params) {
+  return request({
+    url: '/baggageDC/openApi/AnalysisItemQuery',
+    method: 'post',
+    data: params
+  })
+}
+//数据解析-编辑列表新增
+export function anaListmodpass(params) {
+  return request({
+    url: '/baggageDC/openApi/AnalysisItemSave',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据解析-编辑列表删除
+export function anaListmodele(params) {
+  return request({
+    url: '/baggageDC/openApi/AnalysisItemDelete',
+    method: 'post',
+    data: params
+  })
+}
+//数据解析-解析
+export function analysiser(params) {
+  return request({
+    url: '/baggageDC/openApi/doAnalysis',
+    method: 'post',
+    data: params
+  })
+}
+
+//航站节点-列表
+export function TerminalnodeList(params) {
+  return request({
+    url: '/baggageDC/openApi/TraceNodesList',
+    method: 'post',
+    data: params
+  })
+}
+
+//航站节点-列表新增
+export function erListadd(params) {
+  return request({
+    url: '/baggageDC/openApi/TracenodesSave',
+    method: 'post',
+    data: params
+  })
+}
+
+//航站节点-列表删除
+export function TerminalnodeListele(params) {
+  return request({
+    url: '/baggageDC/openApi/TracenodesDelete',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-列表查询
+export function Datastorage(params) {
+  return request({
+    url: '/baggageDC/openApi/TargetDataSaveList',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-状态修改
+export function DatastorageStart(params) {
+  return request({
+    url: '/baggageDC/openApi/TargetDataSaveStatusUpdate',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-新增
+export function Datastorageadd(params) {
+  return request({
+    url: '/baggageDC/openApi/SaveTargetSave',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-删除
+export function Datastoragedel(params) {
+  return request({
+    url: '/baggageDC/openApi/TargetDataSaveDelete',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-保存
+export function Datastoragemod(params) {
+  return request({
+    url: '/baggageDC/openApi/SaveTargetSave',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-详情查询
+export function storageList(params) {
+  return request({
+    url: '/baggageDC/openApi/GetTargetDataSaveItems',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-详情新增
+export function storageListadd(params) {
+  return request({
+    url: '/baggageDC/openApi/TargetDataSaveItemSave',
+    method: 'post',
+    data: params
+  })
+}
+//数据储存-详情新增
+export function storageListdel(params) {
+  return request({
+    url: '/baggageDC/openApi/SaveDataItemDelete',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-异常类型
+export function exceptiontype(params) {
+  return request({
+    url: '/baggageDC/openApi/SpecailtypeQuery',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-异常类型新增
+export function exceptionadd(params) {
+  return request({
+    url: '/baggageDC/openApi/SpecailtypeSave',
+    method: 'post',
+    data: params
+  })
+}
+
+//数据储存-异常类型删除
+export function exceptiondel(params) {
+  return request({
+    url: '/baggageDC/openApi/SpecailtypeDelete',
+    method: 'post',
+    data: params
+  })
+}
+

src/api/dataIntegration.js

@@ -0,0 +1,95 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-04-13 14:35:17
+ * @LastEditTime: 2022-05-13 09:26:03
+ * @LastEditors: your name
+ * @Description: 数据整合接口
+ * have a nice day!
+ */
+
+import request from '@/utils/request-base'
+import { Message } from 'element-ui'
+
+export function GeneralDataReception (params) {
+  return request({
+    url: '/openApi/generalDataReception',
+    method: 'post',
+    headers: {
+      'content-type': 'application/json'
+    },
+    data: params
+  })
+}
+
+export function Query (params) {
+  return request({
+    url: '/openApi/query',
+    method: 'post',
+    headers: {
+      'content-type': 'application/json'
+    },
+    data: params
+  })
+}
+
+export const queryMap = {
+  protocol: 1,
+  node: 2,
+  service: 3,
+  source: 4,
+  sourceItem: 5,
+  serviceAndSource: 6,
+  target: 7,
+  targetItem: 8,
+  serviceAndOutput: 9,
+  serviceAndNode: 10,
+  serviceByID: 11,
+  nodeByServiceID: 12,
+  sourceByServiceID: 13,
+  targetByServiceID: 14,
+  targetItemByTargetID: 15,
+  sourceItemBySourceID: 16,
+  targetByID: 17,
+  sourceByID: 18,
+  serviceAlgorithmByServiceID: 19,
+  outputListByServiceID: 20,
+  advacedQuery: 30,
+  departureAirPort: 31,
+  landingAirport: 32,
+  departureAirPortBylandingAirport: 33,
+  landingAirportBydepartureAirPort: 34,
+  carrier: 35,
+  craftType: 36,
+  flightAttr: 37,
+  landingFlight: 38,
+  departureFlight: 39,
+  transferFlight: 40,
+  container: 41,
+  baggageDetailsByID: 44,
+  baggageBasicInfoByID: 45,
+  baggageByFlightNO: 46,
+  transferInBaggage: 47,
+  transferOutBaggage: 48,
+  flightInfo: 49,
+  baggageTrackByID: 61,
+  message: 75,
+  baggageType: 86
+}
+
+export async function myQuery (id, ...dataContent) {
+  const params = {
+    id,
+    dataContent
+  }
+  try {
+    const result = await Query(params)
+    if (Number(result.code) === 0) {
+      return result.returnData
+    } else {
+      Message.error(result.message ?? '失败')
+      return Promise.reject(result.message)
+    }
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}

src/components/Table/index.vue

@@ -0,0 +1,758 @@
+<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 v-if="isBtn" class="data-table-btn flex-end">
+        <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
+      </div>
+      <template v-if="tableData.length">
+        <div>
+          <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-if="selectionEnable"
+              type="selection"
+              width="35"
+            />
+            <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="180">
+              <template slot-scope="scope">
+                <div class="hd-td">
+                  <div class="hd-tr">
+                    <!-- <el-button class="hrefBtn" type="text" @click="handleHerf(scope.row)" size="small">跳转</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>
+                    <el-button class="rmScs" v-if="withColumnSet" type="text" size="small" @click="handleColumnSet(scope.row)">列设置</el-button>
+                    <el-button class="rmScs" v-if="withItemSet" type="text" size="small" @click="handleItemSet(scope.row)">数据项</el-button>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- <p v-if="noMore" style="text-align: center">没有更多了</p> -->
+        </div>
+      </template>
+      <template v-else>
+        <NoData image-width="auto" image-height="100%" />
+      </template>
+    </div>
+    <div class="data-table-dialog">
+      <!--新增/编辑-->
+      <Dialog :width="width" :flag="flag">
+        <div class="dialog-content">
+          <div class="title">{{ tableTitle }}</div>
+          <div class="content">
+            <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
+              <el-row :gutter="20">
+                <el-col v-for="(item, index) in tableColsCopy" :key="index" :span="rows">
+                  <el-form-item :label="item.columnLabel">
+                    <template v-if="
+                        item.listqueryTemplateID ||
+                        item.listqueryTemplateID == 0
+                      ">
+                      <el-select size="small" clearable style="width: 100%" v-model="tableForm[item.columnName]" @change="changeSelect(item.columnName)" placeholder="请选择">
+                        <el-option v-for="item in tableOptions[item.columnName]" :key="item.v" :label="item.k" :value="item.v">
+                        </el-option>
+                      </el-select>
+                    </template>
+                    <!-- <template v-else-if="item.dataType == 'longtext'">
+                      <el-input size="small" :rows="1" type="textarea" v-model="tableForm[item.columnName]"></el-input>
+                    </template> -->
+                    <template v-else>
+                      <el-input size="small" v-model="tableForm[item.columnName]" @change="inputChangeHandler(item.columnName)"></el-input>
+                    </template>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <div class="foot right t30">
+            <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
+            <el-button @click="flag = false" size="medium">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+      <Dialog :flag="rmFlag">
+        <div class="airportInfoDialog">
+          <div class="title del-title">删除</div>
+          <div class="content del-content">
+            <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
+            ？
+          </div>
+          <div class="foot right Delfoot t30">
+            <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
+            <el-button size="medium" @click="rmFlag = false">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setTableFilters } from "@/utils/table";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import NoData from "@/components/nodata";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
+export default {
+  name: "DataTable",
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: true
+    },
+    //接口ID
+    dataId: {
+      type: [String, Number],
+      default: ''
+    },
+    editId: {
+      type: [String, Number],
+      default: ''
+    },
+    dataContent: {
+      type: Object,
+      default: () => ({})
+    },
+    //弹框宽度
+    width: {
+      type: String,
+      default: "560px",
+    },
+    //弹框表单-行数
+    rows: {
+      type: Number,
+      default: 3,
+    },
+    //弹框-表单文字宽度
+    labelWidth: {
+      type: String,
+      default: "80px",
+    },
+    //表格高度
+    tableHeight: {
+      type: [String, Number],
+      default: 0
+    },
+    minHeight: {
+      type: Number,
+      default: 65,
+    },
+    //是否显示新增按钮
+    isBtn: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示合计行
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    marginTop: {
+      type: String,
+      default: '20px'
+    },
+    // 是否可选中行
+    selectionEnable: {
+      type: Boolean,
+      default: false
+    },
+    // 懒加载
+    withLazyLoad: {
+      type: Boolean,
+      default: false
+    },
+    // 不换行，溢出隐藏
+    showOverflowTooltip: {
+      type: Boolean,
+      default: false
+    },
+    // 表格-操作-列设置按钮显示
+    withColumnSet: {
+      type: Boolean,
+      default: false
+    },
+    // 表格-操作-项设置按钮显示
+    withItemSet: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: { Dialog, NoData },
+  data () {
+    return {
+      loading: false,
+      flag: false,
+      serviceId: null,
+      rmFlag: false,
+      rowTitle: '',
+      tableCols: [], //表头数据
+      tableData: [], //表格数据
+      tableColsCopy: [], //表头数据缓存
+      tableDataFilters: {}, //表头-下拉数据
+      filterValues: {}, //表头-下拉-选中数据
+      tableDataCopy: [], //缓存table数据
+      tableGroups: [], //表格分组数据
+      colShowFilter: "", //表头-下拉-箭头
+      spanArr: [], //表格分组数据缓存
+      pos: 0, //表格分组计数
+      tableTitle: "新增", //弹框标题
+      tableType: "add", //弹框类型=新增/编辑
+      tableForm: {}, //弹框表单
+      rmTitle: "", //弹框-删除-标题
+      tableObj: {}, //增/删/改数据缓存
+      tableOptions: {}, //弹框-下来数据缓存
+      tableArrs: [], //重组table-表头下拉
+      proAll: false //重组时-所有请求是否都完成
+    };
+  },
+  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;
+      };
+    },
+    //设置表头-下拉-选中数据
+    filteredTableData () {
+      return this.tableData.filter((item) => {
+        let flag = true;
+        Object.entries(this.filterValues).forEach(([key, value]) => {
+          if (value !== "" && item[key] !== value) {
+            flag = false;
+          }
+        });
+        return flag;
+      });
+    },
+  },
+  // watch: {
+  //   proAll: {
+  //     handler (val) {
+  //       if (val) {
+  //         setTimeout(() => {
+  //           this.setTable()
+  //         }, 200);
+  //       }
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted () {
+    this.getQuery();
+  },
+  updated() {
+    this.$refs['table']?.doLayout()
+  },
+  methods: {
+    load(){
+      console.log('分页')
+    },
+    changeSelect(data){
+      if (this.tableForm[data] === '') {
+        this.tableForm[data] = null
+      }
+      this.tableForm[this.tableOptions[data][0].setvalue] = this.tableForm[data];
+      // console.log(this.tableForm)
+    },
+    inputChangeHandler(data) {
+      if (this.tableForm[data] === '') {
+        this.tableForm[data] = null
+      }
+    },
+    //获取表格数据
+    async getQuery () {
+      try {
+        this.loading = true;
+        const { code, returnData } = await Query({
+          id: this.dataId,
+          dataContent: Object.values(this.dataContent),
+        });
+        if (code == 0) {
+          const titleColumn = returnData.columnSet.find(item => item.needShow === 1)
+          if (titleColumn) {
+            this.rowTitle = titleColumn.columnName
+          }
+          this.tableData = returnData.listValues;
+          this.tableCols = returnData.columnSet;
+          this.serviceId = returnData.submitID;
+          setTimeout(() => {
+            this.initTableData();
+            this.loading = false;
+          }, 100);
+        } else {
+          this.loading = false;
+          this.$message.error("获取表格数据失败");
+        }
+      } catch (error) {
+        this.loading = false;
+        console.log(error);
+      }
+    },
+    //表格-增/删/改
+    async generalDataReception (data) {
+      try {
+        data = {
+          ...data,
+          ...this.dataContent
+        }
+        const { code, message } = await GeneralDataReception({
+          serviceId: this.serviceId,
+          dataContent: JSON.stringify(data),
+        });
+        if (code == 0) {
+          this.$message.success("操作成功");
+          this.getQuery();
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.tableForm = {};
+        } else {
+          this.$message.error("操作失败");
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.tableForm = {};
+        }
+      } catch (error) {
+        console.log(error);
+        this.flag = false;
+        this.rmFlag = false;
+        this.tableObj = {};
+        this.tableForm = {};
+      }
+    },
+    // 表格勾选
+    toggleRowSelection(row, isSelected) {
+      this.$refs['table'].toggleRowSelection(row, isSelected)
+    },
+    // 表格初始勾选
+    selectTableRows(tableData, selectFlagName) {
+      tableData.forEach(row => {
+        this.$refs['table'].toggleRowSelection(row, !!row[selectFlagName])
+      })
+    },
+    //初始化表格
+    initTableData () {
+      this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
+      // console.log(this.tableColsCopy)
+      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)
+          this.tableOptions[item.columnName] = await this.getSelectData(item.listqueryTemplateID)
+          // console.log(this.tableOptions[item.columnName])
+        }
+        // this.filterValues[item.columnName] = ''
+      });
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.tableGroup(this.tableData);
+      this.selectTableRows(this.tableData, 'DeployID')
+      // this.getSelectDataAll(reqUts)
+    },
+    //获取所有获取弹框-下拉数据-请求状态
+    getSelectDataAll (reqUts) {
+      Promise.all(reqUts).then(res => {
+        this.proAll = true
+      }).catch(err => {
+        this.proAll = false
+      })
+    },
+    //获取弹框-下拉数据
+    async getSelectData (id) {
+      const { code, returnData } = await Query({
+        id,
+        dataContent: [],
+      });
+      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 () {
+      console.log("d");
+    },
+    //表格-新增
+    handleAdd () {
+      // this.flag = true;
+      //   this.tableType = "add";
+      //   this.tableTitle = "新增";
+      //   this.tableForm = {};
+      if(this.isDialog ){
+        this.flag = true;
+        this.tableType = "add";
+        this.tableTitle = "新增";
+        this.tableForm = {};
+      }
+      else{
+        this.$emit("handleAdd");
+      }
+
+      // console.log(this.tableOptions);
+    },
+    //表格-编辑
+    async handleEdit (row) {
+      if(this.isDialog) {
+        if (this.editId) {
+          let data  = await this.queryOriginRow(this.editId, row.queryTemplateColumnSetID)
+          this.tableForm =  JSON.parse(JSON.stringify(data))
+          // this.tableForm =this.tableForm;
+          // Object.entries(tableForm).forEach(([key, value]) => {
+          //   this.tableForm[key] = value
+          // })
+        } else {
+          this.tableForm =  JSON.parse(JSON.stringify(row));
+        }
+        this.flag = true;
+        this.tableType = "edit";
+        this.tableTitle = "编辑";
+      } else{
+        this.$emit("handleEdit",row);
+      }
+    },
+    async queryOriginRow(editId, queryTemplateColumnSetID) {
+      try {
+        const { code, returnData } = await Query({
+          id: editId,
+          dataContent: [queryTemplateColumnSetID]
+        })
+        if (Number(code) === 0) {
+          return returnData.listValues[0]
+        } else {
+          this.$message.error("失败")
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    //表格-跳转
+    handleHerf(row){
+      alert('跳转')
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (this.tableType == "add") {
+            this.tableForm.event = 1;
+          } else {
+            this.tableForm.event = 2;
+          }
+          this.generalDataReception(this.tableForm);
+        } 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.tableObj.event = 3;
+      this.generalDataReception(this.tableObj);
+    },
+    // 表格-跳转列设置页
+    handleColumnSet(row) {
+      this.$router.push({
+        path: '/systemSettings/queryTemplateChild',
+        query: {
+          queryTemplateID: row.queryTemplateID
+        }
+      })
+    },
+    // 表格-跳转数据项设置页
+    handleItemSet(row) {
+      this.$router.push({
+        path: '/systemSettings/datastructureChild',
+        query: {
+          dataStructureID: row.dataStructureID
+        }
+      })
+    },
+    // 表格-选中行
+    selectHandler(selection, row) {
+      this.$emit('selection-change', selection, row)
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.data-table {
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  ::v-deep .table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .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: #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;
+      }
+    }
+
+    .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-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;
+}
+</style>

src/components/nodata/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="nodata">
+    <div :style="style" class="nodata_image">
+      <img src="../../assets/nav/nodata.png" alt="" srcset="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NoData',
+  props: {
+    imageWidth: {
+      type: [String, Number],
+      default: 460
+    },
+    imageHeight: {
+      type: [String, Number],
+      default: 320
+    }
+  },
+  computed: {
+    style () {
+      const that = this
+      const style = {
+        width: typeof that.imageWidth === 'number' ? that.imageWidth + 'px' : that.imageWidth,
+        height: typeof that.imageHeight === 'number' ? that.imageHeight + 'px' : that.imageHeight
+      }
+      return style
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nodata {
+  height: 100%;
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .nodata_image {
+    overflow: hidden;
+    img {
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+</style>

src/layout/components/ToolBar/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="ToolBar">
+    <div class="ToolBar-Head">
+      <div class="flex-wrap" style="flex-wrap: wrap">
+        <div v-for="(item, index) in dataArr" @click="routeLink(item, index)" :class="dialogCy == index ? 'toolbar-active' : ''" :key="index" class="toolbar-list">
+          <div class="flex-wrap toolbar-list-bar">
+            <!-- <div class="toolbar-list-img">
+              <img :src="item.src" :alt="item.meta.title" />
+            </div> -->
+            <img style="width: 18px; height: 18px" :src="dialogCy == index ? item.srcer : item.src" :alt="item.meta.title" />
+            <div class="toolbar-list-name">{{ item.meta.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ToolBar-Content">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  name: "ToolBar",
+  data () {
+    return {
+      dataArr: [],
+      flag: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["dialogCy", "permission_routes"]),
+  },
+  created () {
+    const path = this.$route.path;
+    const pathArr = path.split("/");
+    if (pathArr.length > 2) {
+      //子路由
+      const name = pathArr[pathArr.length - 2];
+      const childName = pathArr[pathArr.length - 1];
+      this.getRoutes(name, childName);
+    } else {
+      //一级路由
+      const name = pathArr[pathArr.length - 1];
+      this.getRoutes(name);
+      this.$store.dispatch("app/toggleDialogCy", 0);
+    }
+  },
+  methods: {
+    // 子路由跳转
+    routeLink (item, index) {
+      this.$store.dispatch("app/toggleDialogCy", index);
+      this.$router.push(item.path);
+    },
+    // 获取路由数据
+    getRoutes (name, childName = "") {
+      const routes = this.permission_routes;
+      if (name == 'dataBase') {
+        const datas = routes.filter(
+          (item) => item.path === "/systemManagement" || item.redirect === "/systemManagement"
+        );
+        const dataArr = datas[0].children;
+        const msgArr = dataArr[dataArr.length - 1].children
+        const arrs = msgArr.filter((item) => item.hidden);
+        if (childName) {
+          const isAloneData = dataArr.filter((item) => item.name === childName);
+          if (isAloneData.length > 0) {
+            this.dataArr = arrs;
+          }
+        } else {
+          this.dataArr = arrs;
+        }
+        if (this.dialogCy == false) {
+          this.dataArr.forEach((res, index) => {
+            if (res.path == this.$route.path) {
+              this.$store.dispatch("app/toggleDialogCy", index);
+            }
+          });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.ToolBar {
+  .toolbar-list {
+    margin-right: 19px;
+    cursor: pointer;
+    background: #ffffff;
+    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    min-width: 160px;
+    margin-bottom: 10px;
+    .toolbar-list-bar {
+      display: flex;
+      align-items: center;
+      padding: 6px 32px;
+      padding-left: 24px;
+      line-height: 40px;
+    }
+    .toolbar-list-img {
+      width: 20px;
+      height: 20px;
+      margin-right: 16px;
+      img {
+        margin-right: 16px;
+        // max-height: 40px;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    img {
+      margin-right: 16px;
+      // max-height: 40px;
+      // width: 100%;
+      // height: 100%;
+    }
+    .toolbar-list-name {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .toolbar-active {
+    background: #2d67e3;
+    .toolbar-list-name {
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/main.js

@@ -23,6 +23,8 @@ Vue.prototype.accountGroupType = PLATFROM_CONFIG.accountGroupType
 import * as echarts from 'echarts'
 import Vue2OrgTree from 'vue2-org-tree'
 import 'vue2-org-tree/dist/style.css'
+import elTableInfiniteScroll from 'el-table-infinite-scroll'
+Vue.use(elTableInfiniteScroll)
 Vue.use(Vue2OrgTree)
 Vue.use(ElementUI)
 Vue.prototype.$echarts = echarts

src/router/routes/routes-file-four.js

@@ -27,54 +27,192 @@ const systemManagementRoutes = {
   path: '/systemManagement',
   component: Layout,
   meta: { roles: ['system_menu'], title: '系统管理' },
-  children: [{
-    path: '/systemManagement',
-    name: 'systemManagement',
-    component: () => import('@/views/systemManagement/index'),
-    meta: {
-      title: '系统管理',
-      icon: 'systemManagement',
-      imgstyle: 'ic_home_nav_defaul.png',
-      imgstyleup: 'ic_home_nav_check.png',
-      roles: ['system_basic_page']
+  children: [
+    {
+      path: '/systemManagement',
+      name: 'systemManagement',
+      component: () => import('@/views/systemManagement/index'),
+      meta: {
+        title: '系统管理',
+        icon: 'systemManagement',
+        imgstyle: 'ic_home_nav_defaul.png',
+        imgstyleup: 'ic_home_nav_check.png',
+        roles: ['system_basic_page']
+      },
     },
-  },
-  {
-    path: '/LoginPolicy',
-    name: 'LoginPolicy',
-    component: () => import('@/views/systemManagement/LoginPolicy/index'),
-    meta: {
-      title: '登录策略',
-      icon: 'LoginPolicy',
-      imgstyle: 'ic_home_nav_defaul.png',
-      imgstyleup: 'ic_home_nav_check.png',
-      roles: ['system_logintac_page']
+    {
+      path: '/LoginPolicy',
+      name: 'LoginPolicy',
+      component: () => import('@/views/systemManagement/LoginPolicy/index'),
+      meta: {
+        title: '登录策略',
+        icon: 'LoginPolicy',
+        imgstyle: 'ic_home_nav_defaul.png',
+        imgstyleup: 'ic_home_nav_check.png',
+        roles: ['system_logintac_page']
+      },
     },
-  },
-  {
-    path: '/addSystem',
-    name: 'addSystem',
-    hidden: true,
-    component: () => import('@/views/systemManagement/addSystem/index'),
-    meta: {
-      title: '新增策略信息',
-      icon: 'addSystem',
-      imgstyle: 'ic_home_nav_defaul.png',
-      imgstyleup: 'ic_home_nav_check.png'
+    {
+      path: '/addSystem',
+      name: 'addSystem',
+      hidden: true,
+      component: () => import('@/views/systemManagement/addSystem/index'),
+      meta: {
+        title: '新增策略信息',
+        icon: 'addSystem',
+        imgstyle: 'ic_home_nav_defaul.png',
+        imgstyleup: 'ic_home_nav_check.png'
+      },
     },
-  },
-  {
-    path: '/EditSystem',
-    name: 'EditSystem',
-    hidden: true,
-    component: () => import('@/views/systemManagement/EditSystem/index'),
-    meta: {
-      title: '编辑策略信息',
-      icon: 'EditSystem',
-      imgstyle: 'ic_home_nav_defaul.png',
-      imgstyleup: 'ic_home_nav_check.png'
+    {
+      path: '/EditSystem',
+      name: 'EditSystem',
+      hidden: true,
+      component: () => import('@/views/systemManagement/EditSystem/index'),
+      meta: {
+        title: '编辑策略信息',
+        icon: 'EditSystem',
+        imgstyle: 'ic_home_nav_defaul.png',
+        imgstyleup: 'ic_home_nav_check.png'
+      },
     },
-  },
+    {
+      path: '/dataBase/serviceManagement',
+      name: 'serviceManagement',
+      meta: { title: '服务管理' },
+      hidden: true,
+      src: require('@/assets/nav/ic_setting_top_default.png'),
+      srcer: require('@/assets/nav/ic_setting_top_check.png'),
+      component: () => import('@/views/systemManagement/dataBases/views/serviceManagement/serviceHome'),
+    },
+    {
+      path: '/dataBase/serviceEdit',
+      name: 'serviceEdit',
+      component: () => import('@/views/systemManagement/dataBases/views/serviceManagement/serviceEdit'),
+      meta: { title: '服务编辑' },
+      hidden: false,
+      isAlone: true,
+      src: require('@/assets/nav/ic_setting_top@2x.png')
+    },
+    {
+      path: '/dataBase/protocolManagement',
+      name: 'protocolManagement',
+      component: () => import('@/views/systemManagement/dataBases/views/protocolManagement/protocolHome'),
+      meta: { title: '协议管理' },
+      hidden: true,
+      src: require('@/assets/nav/ic_setting_top_default.png'),
+      srcer: require('@/assets/nav/ic_setting_top_check.png')
+    },
+    // {
+    //   path: '/systemSettings/machineManagement',
+    //   name: 'machineManagement',
+    //   component: () => import('@/views/systemSettings/views/machineManagement/machineHome'),
+    //   meta: { title: '机器维护' },
+    //   hidden: true,
+    //   src: require('@/assets/nav/ic_setting_top_default.png'),
+    //   srcer: require('@/assets/nav/ic_setting_top_check.png')
+    // },
+    {
+      path: '/dataBase/queryTemplate',
+      name: 'queryTemplate',
+      meta: { title: '查询模板' },
+      hidden: true,
+      src: require('@/assets/nav/ic_setting_top_default.png'),
+      srcer: require('@/assets/nav/ic_setting_top_check.png'),
+      component: () => import('@/views/systemManagement/dataBases/views/queryTemplate/queryTemplate'),
+    },
+    {
+      path: '/dataBase/queryTemplateadd',
+      name: 'queryTemplateadd',
+      component: () => import('@/views/systemManagement/dataBases/views/queryTemplate/queryTemplateadd'),
+      meta: { title: '新增查询模板' },
+      hidden: false,
+      isAlone: true,
+      src: require('@/assets/nav/ic_setting_top@2x.png')
+    },
+    {
+      path: '/dataBase/queryTemplateedit',
+      name: 'queryTemplateedit',
+      component: () => import('@/views/systemManagement/dataBases/views/queryTemplate/queryTemplateedit'),
+      meta: { title: '编辑查询模板' },
+      hidden: false,
+      isAlone: true,
+      src: require('@/assets/nav/ic_setting_top@2x.png')
+    },
+    {
+      path: '/dataBase/queryTemplateChild',
+      name: 'queryTemplateChild',
+      component: () => import('@/views/systemManagement/dataBases/views/queryTemplate/queryTemplateChild'),
+      meta: { title: '查询项设置' },
+      hidden: false,
+      isAlone: true,
+      src: require('@/assets/nav/ic_setting_top@2x.png')
+    },
+    {
+      path: '/dataBase/datastructure',
+      name: 'datastructure',
+      component: { render (c) { return c('router-view') } },
+      meta: { title: '数据结构' },
+      hidden: true,
+      src: require('@/assets/nav/ic_setting_top_default.png'),
+      srcer: require('@/assets/nav/ic_setting_top_check.png'),
+      component: () => import('@/views/systemManagement/dataBases/views/datastructure/datastructureHome'),
+    },
+    {
+      path: '/dataBase/datastructureChild',
+      name: 'datastructureChild',
+      component: () => import('@/views/systemManagement/dataBases/views/datastructure/datastructureChild'),
+      meta: { title: '数据项' },
+      hidden: false,
+      isAlone: true,
+      src: require('@/assets/nav/ic_setting_top@2x.png')
+    },
+    // {
+    //   path: '/systemSettings/dataStructureItem',
+    //   name: 'dataStructureItem',
+    //   component: () => import('@/views/systemSettings/views/dataStructureItem/dataStructureItemHome'),
+    //   meta: { title: '数据结构项' },
+    //   hidden: true,
+    //   src: require('@/assets/nav/ic_setting_top_default.png'),
+    //   srcer: require('@/assets/nav/ic_setting_top_check.png')
+    // },
+    {
+      path: '/dataBase/sourceservice',
+      name: 'sourceservice',
+      component: () => import('@/views/systemManagement/dataBases/views/sourceservice/sourceserviceHome'),
+      meta: { title: '数据源服务' },
+      hidden: true,
+      src: require('@/assets/nav/ic_setting_top_default.png'),
+      srcer: require('@/assets/nav/ic_setting_top_check.png')
+    },
+    {
+      path: '/dataBase/log',
+      name: 'log',
+      component: () => import('@/views/systemManagement/dataBases/views/log'),
+      meta: { title: '日志查询' },
+      hidden: true,
+      src: require('@/assets/nav/ic_setting_top_default.png'),
+      srcer: require('@/assets/nav/ic_setting_top_check.png')
+    },
+    // {
+    //   path: '/systemSettings/servicedeployment',
+    //   name: 'servicedeployment',
+    //   component: () => import('@/views/systemSettings/views/servicedeployment/servicedeploymentHome'),
+    //   meta: { title: '服务部署' },
+    //   hidden: true,
+    //   src: require('@/assets/nav/ic_setting_top_default.png'),
+    //   srcer: require('@/assets/nav/ic_setting_top_check.png')
+    // },
+
+    // {
+    //   path: '/systemSettings/queryItemSettings',
+    //   name: 'queryItemSettings',
+    //   component: () => import('@/views/systemSettings/views/queryItemSettings/queryItemSettingsHome'),
+    //   meta: { title: '查询项设置' },
+    //   hidden: true,
+    //   src: require('@/assets/nav/ic_setting_top_default.png'),
+    //   srcer: require('@/assets/nav/ic_setting_top_check.png')
+    // },
   ]
 }
 

src/store/getters.js

@@ -17,6 +17,7 @@ const getters = {
   roles: state => state.user.roles,
   firstLogin: state => state.user.firstLogin,
   dialog: state => state.app.dialog,
+  dialogCy: state => state.app.dialogCy,
   pwdflag: state => state.app.pwdflag,
   outflag: state => state.app.outflag,
   outcheck: state => state.app.outcheck,
@@ -30,6 +31,6 @@ const getters = {
   authMsg: state => state.auth.authMsg,
   userRole: state => state.app.OpenRole,
   permission_routes: state => state.permission.routes,
-  interfaceDatas: state => state.user.interfaceDatas
+  interfaceDatas: state => state.user.interfaceDatas,
 }
 export default getters

src/store/modules/app.js

@@ -15,6 +15,7 @@ const state = {
   },
   device: 'desktop',
   dialog: Cookies.get('dialogStatus') === 'true' ? true : false,
+  dialogCy: Cookies.get('dialogStatusCy') === 'true' ? true : false,
   pwdflag: false,
   outflag: false,
   outcheck: false,
@@ -44,6 +45,10 @@ const mutations = {
     state.dialog = dialog
     Cookies.set('dialogStatus', dialog)
   },
+  TOGGLE_DIALOG_CY: (state, dialog) => {
+    state.dialogCy = dialog
+    Cookies.set('dialogStatusCy', dialog)
+  },
   TOGGLE_PWDFLAG: (state, pwdflag) => {
     state.pwdflag = pwdflag
   },
@@ -79,6 +84,9 @@ const actions = {
   toggleDialog ({ commit }, dialog) {
     commit('TOGGLE_DIALOG', dialog)
   },
+  toggleDialogCy ({ commit }, dialog) {
+    commit('TOGGLE_DIALOG_CY', dialog)
+  },
   togglePwdflag ({ commit }, pwdflag) {
     commit('TOGGLE_PWDFLAG', pwdflag)
   },

src/styles/index.scss

@@ -130,6 +130,11 @@ li {
   flex-wrap: wrap;
 }
 
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .h100 {
   height: 100%;
 }

src/utils/request-base.js

@@ -0,0 +1,210 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-06 09:45:17
+ * @LastEditTime: 2022-04-21 17:36:42
+ * @LastEditors: your name
+ * @Description: axios封装
+ */
+import axios from 'axios'
+import { MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getToken, getUserId, getCodeToken, getLogId, getUserName } from '@/utils/auth'
+import { parseTime } from '@/utils'
+import { Loading } from 'element-ui'
+// create an axios instance
+const service = axios.create({
+  //baseURL: baseURL, // url = base url + request url
+  baseURL: PLATFROM_CONFIG.dataBaseUrl,
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 30000, // request timeout
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+let loadingInstance,
+  flag = false
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    if (config.istoken) {
+      config.headers['appSecret'] = PLATFROM_CONFIG.appSecret
+    } else if (getCodeToken() && !config.istoken && config.islogin) {
+      config.headers['token'] = getCodeToken()
+    } else if (store.getters.token) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['Token'] = getToken()
+    }
+    if (config.data && !config.url.includes('/api/fs4a/sendLog')) {
+      config.data['OperatorId'] = getUserId()
+    }
+    flag = true
+    if (flag) {
+      loadingInstance = Loading.service({
+        text: '数据加载中'
+      })
+    }
+    if (config.url.includes('/api/fs4a/sendLog') && config.data.Data[0]?.OperateResult?.Token) {
+      config.headers['token'] = config.data.Data[0].OperateResult.Token
+    }
+    config.metaData = {
+      BeginTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+    // 特定请求完成后发送日志
+    const { metaData, url, Ident, data, msg, islogin } = response.config
+    if (!url.includes('/api/fs4a/sendLog') && (Ident || msg)) {
+      Object.assign(metaData, {
+        LogInfo: typeof data === 'string' ? JSON.parse(data) : data,
+        EndTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
+        LogType: msg ?? '未定义操作',
+        OperateResult: res.message,
+        Ident: Ident ?? ''
+      })
+      const { BeginTime, EndTime, OperateResult } = metaData
+      const config = {
+        url: '/api/fs4a/sendLog',
+        method: 'post',
+        data: {
+          Data: [metaData],
+          BrowserTag: navigator.userAgent,
+          OperateIP: returnCitySN.cip,
+          Msg: msg ?? '未定义操作',
+          Type: '2',
+          BeginTime,
+          BeginTime2: BeginTime,
+          EndTime,
+          OperateResult,
+          Ident: Ident ?? '',
+          AppId: '9'
+        }
+      }
+      if (islogin) {
+        if (res.code === 0) {
+          config.data.OperatorId = (res.returnData.UserId ?? '').toString()
+          config.data.LogId = (res.returnData.LogId ?? '').toString()
+          config.data.UserName = (res.returnData.UserName ?? '').toString()
+        } else {
+          const loginData = typeof data === 'string' ? JSON.parse(data) : data
+          config.data.UserName = loginData.LoginName.toString()
+        }
+      } else {
+        config.data.OperatorId = getUserId()
+        config.data.LogId = getLogId()
+        config.data.UserName = getUserName()
+      }
+      service(config)
+    }
+    if (res.code == 0) {
+      flag = false
+      loadingInstance.close()
+      return res
+    } else {
+      if (res.code == 500) {
+        Message({
+          message: res.message,
+          type: 'error',
+          duration: 5 * 1000,
+          onClose: () => {
+            store.dispatch('tagsView/delAllViews').then(() => { })
+            store.dispatch('user/resetToken').then(() => {
+              location.reload()
+            })
+          }
+        })
+      }
+      flag = false
+      loadingInstance.close()
+    }
+    // if the custom code is not 20000, it is judged as an error.
+    // if (res.code != 0 || res.code == -1) {
+    //   Message({
+    //     message: res.message || 'Error',
+    //     type: 'error',
+    //     duration: 5 * 1000
+    //   })
+
+    //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+    //   if (res.code == 500) {
+    //     // to re-login
+    //     Message({
+    //       message: '身份令牌过期或失效，即将重新登录',
+    //       type: 'error',
+    //       duration: 5 * 1000,
+    //       onClose: () => {
+    //         store.dispatch('tagsView/delAllViews').then(() => { })
+    //         store.dispatch('user/resetToken').then(() => {
+    //           location.reload()
+    //         })
+    //       }
+    //     })
+    //   }
+    //   // loadingInstance.close()
+    //   return Promise.reject(new Error(res.message || 'Error'))
+    // } else {
+    //   // loadingInstance.close()
+    //   return res
+    // }
+  },
+  error => {
+    // console.log('err', error) // for debug
+    const des = `${error}`.split(' ').includes('500')
+    if (des) {
+      Message({
+        message: '身份令牌过期或失效，即将重新登录',
+        type: 'error',
+        duration: 5 * 1000,
+        onClose: () => {
+          store.dispatch('app/toggleDialog', false)
+          store.dispatch('tagsView/delAllViews').then(() => { })
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
+        }
+      })
+      // MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+      //   confirmButtonText: 'Re-Login',
+      //   cancelButtonText: 'Cancel',
+      //   type: 'warning'
+      // }).then(() => {
+      //   store.dispatch('user/resetToken').then(() => {
+      //     location.reload()
+      //   })
+      // })
+    } else {
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }
+    flag = false
+    loadingInstance.close()
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/utils/table.js

@@ -0,0 +1,143 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-02-11 09:20:58
+ * @LastEditTime: 2022-05-25 17:55:05
+ * @LastEditors: your name
+ * @Description: 表格用
+ * have a nice day!
+ */
+
+import _ from 'lodash'
+
+/**
+ * @description: 表格行合并
+ * @param {Object} config
+ * @return {Array}
+ */
+export function mergeTableRow(config) {
+  let data = config.data
+  const { mergeColNames, firstMergeColNames, firstMerge } = config
+  if (!mergeColNames || mergeColNames.length === 0) {
+    return data
+  }
+  mergeColNames.forEach(m => {
+    const mList = {}
+    data = data.map((v, index) => {
+      const rowVal = v[m]
+      if (mList[rowVal] && mList[rowVal].newIndex === index) {
+        const flag =
+          firstMergeColNames.filter(f => {
+            return f === m
+          }).length !== 0
+        const mcFlag =
+          mergeColNames.filter(mc => {
+            return mc === firstMerge
+          }).length === 0
+        if (
+          (mcFlag && flag) ||
+          (flag && data[index][firstMerge + '-span'] && data[index][firstMerge + '-span'].rowspan === 1)
+        ) {
+          v[m + '-span'] = {
+            rowspan: 1,
+            colspan: 1
+          }
+        } else {
+          data[mList[rowVal]['index']][m + '-span'].rowspan++
+          v[m + '-span'] = {
+            rowspan: 0,
+            colspan: 0
+          }
+          mList[rowVal]['num']++
+          mList[rowVal]['newIndex']++
+        }
+      } else {
+        mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
+        v[m + '-span'] = {
+          rowspan: 1,
+          colspan: 1
+        }
+      }
+      return v
+    })
+  })
+  return data
+}
+
+// 表格单元格class设置
+export function commonTableCellClass({ row, column, rowIndex, columnIndex }) {
+  const classes = []
+  if (['ActualDepartureTime', 'ActualLandingTime'].includes(column.property)) {
+    classes.push('pre-line')
+  }
+  return classes
+}
+
+// 获取对应时区的时间
+export function timeInZone(date, timeZone = 0, local = 8) {
+  if (!(date instanceof Date)) {
+    if (typeof date === 'string' && date.length) {
+      date = new Date(date)
+    } else {
+      return ''
+    }
+  }
+
+  function formatDate(num) {
+    return num < 10 ? '0' + num : num
+  }
+  const time = date.getTime() + (timeZone - local) * 60 * 60 * 1000
+  date.setTime(time)
+  const year = date.getFullYear()
+  const month = formatDate(date.getMonth() + 1)
+  const day = formatDate(date.getDate())
+  const hour = formatDate(date.getHours())
+  const minute = formatDate(date.getMinutes())
+  const second = formatDate(date.getSeconds())
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
+}
+
+// // 表格添加过滤条件
+// export function setTableFilters(tableData, filterKeys) {
+//   const tempSets = {}
+//   const result = {}
+//   filterKeys.forEach(key => {
+//     tempSets[key] = new Set()
+//   })
+//   tableData.forEach(item => {
+//     Object.keys(tempSets).forEach(key => {
+//       (item[key] ?? '') !== '' && tempSets[key].add(item[key])
+//     })
+//   })
+//   Object.keys(tempSets).forEach(key => {
+//     result[key] = _.sortBy(
+//       [...tempSets[key]].map(value => ({
+//         text: value,
+//         value
+//       })),
+//       ['value']
+//     )
+//   })
+//   return result
+// }
+
+// 表格添加过滤条件
+export function setTableFilters(tableData, filters) {
+  const tempSets = {}
+  Object.keys(filters).forEach(key => {
+    tempSets[key] = new Set()
+  })
+  tableData.forEach(item => {
+    Object.keys(tempSets).forEach(key => {
+      (item[key] ?? '') !== '' && tempSets[key].add(item[key])
+    })
+  })
+  Object.keys(tempSets).forEach(key => {
+    filters[key] = _.orderBy(
+      [...tempSets[key]].map(value => ({
+        text: value,
+        value
+      })),
+      o => o.value
+    )
+  })
+}

src/views/systemManagement/dataBases/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="dashboard">
+    <!--导航-->
+    <ToolBar />
+  </div>
+</template>
+
+<script>
+import ToolBar from "@/layout/components/ToolBar";
+export default {
+  name: "Dashboard",
+  components: { ToolBar },
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 24px 24px 0;
+}
+</style>

src/views/systemManagement/dataBases/views/dataStructureItem/dataStructureItemHome.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="dataStructureItem_home">
+    <div class="wrap">
+      <DataTable
+        data-id="9"
+        :rows="12"
+        labelWidth="140px"
+        :minHeight="70"
+        width="800px"
+      />
+    </div>
+
+  </div>
+</template>
+<script>
+import DataTable from "@/components/Table";
+export default {
+  data() {
+    return {
+    };
+  },
+  components: { DataTable },
+};
+</script>
+<style lang="scss" scoped>
+.dataStructureItem-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/datastructure/datastructureChild.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="queryItemSettings_home">
+    <div class="wrap">
+      <DataTable
+        ref="DataTable"
+        data-id="9"
+        edit-id="51"
+        :data-content="{ dataStructureID }"
+        :rows="12"
+        label-width="140px"
+        :min-height="70"
+        width="800px"
+        :isDialog="false"
+        @handleAdd="handleAdd"
+        @handleEdit="handleEdit"
+      />
+    </div>
+    <Dialog :width="width" :flag="flag">
+      <div class="dialog-content">
+        <div class="title">{{ tableTitle }}</div>
+        <div class="content">
+          <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
+            <el-row :gutter="20">
+              <!-- <el-col :span="12">
+                  <el-form-item label="数据项名称">
+                    <template v-if="
+                        item.listqueryTemplateID ||
+                        item.listqueryTemplateID == 0
+                      ">
+                      <el-select size="small" clearable style="width: 100%" v-model="tableForm[item.columnName]" @change="changeSelect(item.columnName)" placeholder="请选择">
+                        <el-option v-for="item in tableOptions[item.columnName]" :key="item.v" :label="item.k" :value="item.v">
+                        </el-option>
+                      </el-select>
+                    </template>
+                    <template v-else>
+                      <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
+                    </template>
+                  </el-form-item>
+                </el-col> -->
+              <el-col :span="12">
+                <el-form-item label="数据项名称">
+                  <el-input
+                    size="small"
+                    v-model="tableForm.ItemName"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="数据项类型">
+                  <el-select
+                    size="small"
+                    clearable
+                    style="width: 100%"
+                    v-model="tableForm.dataType"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptions.dataType"
+                      :key="item.v"
+                      :label="item.k"
+                      :value="item.v"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="输出标识符">
+                  <el-input
+                    size="small"
+                    v-model="tableForm.outputIdentifier"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="描述">
+                  <el-input
+                    size="small"
+                    v-model="tableForm.ItemDescribe"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="唯一项">
+                  <el-select
+                    size="small"
+                    clearable
+                    style="width: 100%"
+                    v-model="tableForm.isKey"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptions.OptionArr"
+                      :key="item.v"
+                      :label="item.k"
+                      :value="item.v"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="必填项">
+                  <el-select
+                    size="small"
+                    clearable
+                    style="width: 100%"
+                    v-model="tableForm.isMust"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptions.OptionArr"
+                      :key="item.v"
+                      :label="item.k"
+                      :value="item.v"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="多条拆分">
+                  <el-select
+                    size="small"
+                    clearable
+                    style="width: 100%"
+                    v-model="tableForm.isSplite"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptions.OptionArr"
+                      :key="item.v"
+                      :label="item.k"
+                      :value="item.v"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="取值表达式">
+                  <el-input
+                    size="small"
+                    type="textarea"
+                    v-model="tableForm.computingExpression"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="实时计算表达式">
+                  <el-input
+                    size="small"
+                    type="textarea"
+                    v-model="tableForm.calculationExpression"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="计算结果标识符">
+                  <el-input
+                    size="small"
+                    v-model="tableForm.calcIdentifier"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="计算参数">
+                  <el-input
+                    size="small"
+                    v-model="tableForm.calcparameter"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="计算数据源">
+                  <el-select
+                    size="small"
+                    clearable
+                    style="width: 100%"
+                    v-model="tableForm.dataSourceID"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in tableOptions.listValues"
+                      :key="item.v"
+                      :label="item.k"
+                      :value="item.v"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" @click="handleOk" class="r24" type="primary"
+            >确定</el-button
+          >
+          <el-button @click="flag = false" size="medium">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+<script>
+import DataTable from "@/components/Table";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { Query,GeneralDataReception } from "@/api/dataIntegration";
+export default {
+  components: { DataTable, Dialog },
+  data() {
+    return {
+      dataStructureID: null,
+      flag: false,
+      width: "800px",
+      tableTitle: "新增",
+      tableForm: {},
+      labelWidth: "110px",
+      tableOptions: {
+        dataType: [
+          {
+            v: 1,
+            k: "字符串",
+            setValue: "v",
+            setlabel: "k",
+          },
+          {
+            v: 2,
+            k: "数字",
+            setValue: "v",
+            setlabel: "k",
+          },
+          {
+            v: 3,
+            k: "日期",
+            setValue: "v",
+            setlabel: "k",
+          },
+          {
+            v: 4,
+            k: "时间",
+            setValue: "v",
+            setlabel: "k",
+          },
+          {
+            v: 5,
+            k: "日期时间",
+            setValue: "v",
+            setlabel: "k",
+          },
+        ],
+        OptionArr: [
+          {
+            v: 1,
+            k: "是",
+            setValue: "v",
+            setlabel: "k",
+          },
+          {
+            v: 0,
+            k: "否",
+            setValue: "v",
+            setlabel: "k",
+          },
+        ],
+        listValues:[]
+      },
+      tableType:"add"
+    };
+  },
+  created() {
+    if (!this.$route.query.dataStructureID) {
+      this.$router.push("/systemSettings/datastructure");
+      return;
+    }
+    this.dataStructureID = Number(this.$route.query.dataStructureID);
+    this.getData()
+  },
+  methods:{
+    handleAdd(){
+      this.flag = true
+      this.tableType= 'add'
+    },
+    handleEdit(row){
+      this.tableTitle="编辑",
+      this.flag = true
+      this.tableType= 'edit'
+      this.queryDetial(row.ItemID)
+    },
+    //弹框-确定
+    handleOk () {
+      this.submitClickHandler();
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.loading = true;
+      this.$refs["ruleForm"].validate((valid) => {
+        console.log(this.tableForm)
+        this.tableForm['dataStructureID'] = this.dataStructureID;
+        if (valid) {
+          if (this.tableType == "add") {
+            this.tableForm.event = 1;
+          } else {
+            this.tableForm.event = 2;
+          }
+          this.generalDataReception(this.tableForm);
+        } else {
+          return false;
+        }
+      });
+    },
+    async generalDataReception (data) {
+      try {
+        data = {
+          ...data,
+          ...this.dataContent
+        }
+        const { code, message } = await GeneralDataReception({
+          serviceId: 11,
+          dataContent: JSON.stringify(data),
+        });
+        this.loading = true;
+        if (code == 0) {
+          this.$message.success("操作成功");
+          this.$refs['DataTable'].getQuery();
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.tableForm = {};
+        } else {
+          this.$message.error("操作失败");
+          this.flag = false;
+          this.rmFlag = false;
+          this.tableObj = {};
+          this.tableForm = {};
+        }
+      } catch (error) {
+        console.log(error);
+        this.flag = false;
+        this.rmFlag = false;
+        this.tableObj = {};
+        this.tableForm = {};
+      }
+    },
+    async getData(){
+      try {
+        this.loading = true;
+        const { code, returnData } = await Query({
+          id: 21,
+          dataContent: [],
+        });
+        if (code == 0) {
+            console.log(returnData)
+            this.tableOptions.listValues = returnData.listValues
+        } else {
+          this.loading = false;
+        }
+      } catch (error) {
+        this.loading = false;
+        console.log(error);
+      }
+    },
+    async queryDetial(id){
+      try {
+        const { code, returnData } = await Query({
+          id: 51,
+          dataContent: [id],
+        });
+        if (code == 0) {
+            console.log(returnData)
+            this.tableForm = JSON.parse(JSON.stringify(returnData.listValues[0]))
+        } else {
+          this.loading = false;
+        }
+      } catch (error) {
+        this.loading = false;
+        console.log(error);
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.queryItemSettings-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/datastructure/datastructureHome.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="datastructure_home">
+    <div class="wrap">
+      <DataTable
+        data-id="5"
+        :rows="12"
+        labelWidth="130px"
+        :minHeight="70"
+        width="800px"
+        :withItemSet="true"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DataTable from "@/components/Table";
+export default {
+  data() {
+    return {};
+  },
+  components: { DataTable },
+};
+</script>
+<style lang="scss" scoped>
+.datastructure-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/log/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="interfaceLog">
+    <div class="interfaceLog_head flex">
+      <div class="interfaceLog_head_time flex-wrap">
+        <!-- <div class="interfaceLog_head_time_start mr10">
+          <el-date-picker v-model="timeStart" size="small" type="date" placeholder="选择开始日期">
+          </el-date-picker>
+        </div>
+        <div class="interfaceLog_head_time_end">
+          <el-date-picker v-model="timeEnd" size="small" type="date" placeholder="选择结束日期">
+          </el-date-picker>
+        </div> -->
+        <el-date-picker
+          v-model="date"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          :default-time="['00:00:00', '23:59:59']"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="dateChange"
+        >
+        </el-date-picker>
+      </div>
+      <div class="interfaceLog_head_btn">
+        <Search
+          @getSearchData="getSearchData"
+          :isTitle="false"
+          @clearSearchData="clearSearchData"
+        />
+      </div>
+    </div>
+    <div class="interfaceLog_content flex-wrap">
+      <el-table
+        :data="tableData"
+        class="table"
+        border
+        style="width: 100%"
+        @row-click="rowClick"
+        :height="720"
+      >
+        <el-table-column prop="logType" label="日志类型" width="100px">
+        </el-table-column>
+        <el-table-column prop="logObject" label="日志对象"> </el-table-column>
+        <el-table-column prop="logTime" label="日志时间"> </el-table-column>
+        <!-- <el-table-column prop="time" label="发生时间">
+        </el-table-column> -->
+        <el-table-column
+          prop="logPositionID"
+          label="发生位置"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+        <el-table-column label="日志结果" width="100px">
+          <template slot-scope="scope">
+            <span
+              :class="scope.row.resultCode == '成功' ? 'success' : 'error'"
+              >{{ scope.row.resultCode }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="resultDetails"
+          label="日志详情"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+      </el-table>
+      <div class="interfaceLog_content_progress">
+        <el-timeline v-if="preDatas != []">
+          <el-timeline-item v-for="(item, index) in preDatas" :key="index">
+            <div class="list">
+              <div class="list_status"></div>
+              <div class="list_title">{{ item.logType }}</div>
+              <div
+                class="list_code"
+                :class="item.resultCode == '成功' ? 'success' : 'error'"
+              >
+                {{ item.resultCode }}
+              </div>
+              <div class="list_time">{{ item.logTime }}</div>
+              <div class="list_detial">{{ item.resultDetails }}</div>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from "@/layout/components/Search";
+import { Query } from "@/api/dataIntegration";
+export default {
+  name: "InterfaceLog",
+  components: { Search },
+  data() {
+    return {
+      timeStart: "",
+      timeEnd: "",
+      tableData: [],
+      preDatas: [],
+      date: "",
+      keyWords: null,
+      preDatas: [],
+    };
+  },
+  created() {
+    this.getNowTime();
+  },
+  methods: {
+    rowClick(row, column, event) {
+      this.preDatas = [];
+      if (row.logObject) {
+        this.tableData.forEach((item) => {
+          if (item.logObject == row.logObject) {
+            this.preDatas.push(item);
+          }
+        });
+      } else {
+        this.preDatas.push(row);
+      }
+    },
+    dateChange() {
+      if (this.date != null) {
+        this.getQuery();
+      }
+    },
+    getNowTime() {
+      var now = new Date();
+      var year = now.getFullYear(); //得到年份
+      var month = now.getMonth(); //得到月份
+      var date = now.getDate(); //得到日期
+      var hour = now.getHours(); //得到时
+      var min = now.getMinutes(); //得到分
+      var second = now.getSeconds(); //得到秒
+      month = month + 1;
+      month = month.toString().padStart(2, "0");
+      date = date.toString().padStart(2, "0");
+      var defaultDate = `${year}-${month}-${date}`;
+      this.date = [defaultDate, defaultDate];
+      this.timeEnd = defaultDate;
+      this.getQuery();
+    },
+    //获取表格数据
+    async getQuery() {
+      try {
+        this.loading = true;
+        const { code, returnData } = await Query({
+          id: 15,
+          dataContent: [this.date[0] + " 00:00:00", this.date[1] + " 23:59:59"],
+        });
+        if (code == 0) {
+          this.tableData = returnData.listValues;
+          console.log(returnData);
+        } else {
+          this.loading = false;
+          this.$message.error("获取数据失败");
+        }
+      } catch (error) {
+        this.loading = false;
+        console.log(error);
+      }
+    },
+    getSearchData(val) {
+      console.log(val);
+      this.keyWords = val;
+      this.getQuery();
+    },
+    clearSearchData() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.interfaceLog {
+  padding: 8px 32px 12px 8px;
+  .mr10 {
+    margin-right: 10px;
+  }
+  ::v-deep .interfaceLog_head_time {
+    .el-input__prefix {
+      left: 10px;
+      color: #101116;
+      top: 10px;
+    }
+    .el-input--prefix .el-input__inner {
+      padding-left: 50px;
+    }
+  }
+  .interfaceLog_head_btn {
+    ::v-deep .btn {
+      margin-right: 0;
+    }
+  }
+  .interfaceLog_content {
+    margin-top: 8px;
+    ::v-deep .table {
+      color: #101116;
+      thead {
+        color: #101116;
+      }
+      .success {
+        color: #33bf47;
+      }
+      .error {
+        color: #df4545;
+      }
+    }
+    &_progress {
+      width: 368px;
+      background: #fafcff;
+      margin-left: 8px;
+      padding: 13px 32px;
+      overflow: hidden;
+      ::v-deep .el-timeline {
+        padding: 0;
+        .el-timeline-item {
+          position: relative;
+          &::after {
+            position: absolute;
+            content: "";
+            height: 1px;
+            width: calc(100% + 4px);
+            background-color: #dfe3ea;
+            left: 28px;
+            bottom: 20px;
+          }
+          &:last-child {
+            &::after {
+              height: 0;
+            }
+          }
+        }
+        .el-timeline-item__node--normal {
+          z-index: 2;
+          background-color: #fff;
+          width: 10px;
+          height: 10px;
+          left: 0px;
+          top: 2px;
+        }
+        .el-timeline-item__tail {
+          border-left: 4px solid #dfe3ea;
+          left: 3px;
+        }
+        .el-timeline-item:last-child .el-timeline-item__tail {
+          height: 1000%;
+          display: block;
+        }
+        .list {
+          &_status {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #2d67e3;
+            left: -5px;
+            border-radius: 50%;
+            z-index: 1;
+          }
+          &_title,
+          &_code {
+            margin-bottom: 7px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #101116;
+          }
+          &_time {
+            font-size: 12px;
+            font-family: Helvetica;
+            font-weight: 400;
+            color: #afb4bf;
+          }
+          &_detial {
+            font-family: Helvetica;
+            word-wrap: break-word;
+          }
+          .success {
+            color: #33bf47;
+          }
+          .error {
+            color: #df4545;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/machineManagement/machineHome.vue

@@ -0,0 +1,399 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-04-12 17:49:47
+ * @LastEditTime: 2022-04-13 16:17:37
+ * @LastEditors: your name
+ * @Description: 机器维护-首页
+ * have a nice day!
+-->
+
+<template>
+  <div class="protocol-home">
+    <div class="wrap">
+      <DataTable data-id="3" :rows="12" labelWidth="100px" :minHeight="70" width="800px" />
+      <!-- <div class="protocol-header flex">
+        <div class="status flex-wrap">
+          <div class="manageTitle">机器维护</div>
+          <div class="status1"><span class="icon"></span>物理机</div>
+          <div class="status2"><span class="icon"></span>虚拟机</div>
+          <div class="status3"><span class="icon"></span>Docker</div>
+        </div>
+        <div class="addBtn">
+          <el-button class="button-white" size="small" @click="showAddDialog()"
+            >新增</el-button
+          >
+        </div>
+      </div> -->
+      <!-- <div class="protocol-content">
+        <el-row :gutter="24">
+          <el-col v-for="item in dataList" :key="item.deployNodeID" :span="4">
+            <div class="grid-content">
+              <div
+                :class="{ 'success': item.nodeType=='物理机', 'error': item.nodeType=='虚拟机', 'info': item.nodeType=='Docker' }"
+                class="grid-content-bg"
+              ></div>
+              <div class="grid-content-hand flex">
+                <div class="title flex-wrap">
+                  <el-tooltip class="item" effect="dark" :content="item.deployNodeName" placement="bottom">
+                    <div class="name">{{ item.deployNodeName }}</div>
+                  </el-tooltip>
+                  <i class="loger" @click="showEditDialog(item)" />
+                </div>
+                <i class="el-icon-close icon" @click="showRemoveDialog(item)" />
+              </div>
+              <div class="grid-content-hand flex">
+                <div class="cardContent">
+                  <div class="IPadress">
+                    服务地址：<el-tooltip class="item" effect="dark" :content="item.serviceURL" placement="bottom"><span>{{ item.serviceURL }}</span></el-tooltip>
+                  </div>
+                  <div class="type">类型：{{ item.nodeType }}</div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div> -->
+      <!--新增/编辑-->
+      <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
+        <div class="airportInfoDialog dialog-public-background">
+          <div class="title">{{ editDialogTitle }}</div>
+          <div class="content">
+            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
+              <el-form-item label="机器名称" prop="deployNodeName">
+                <el-input v-model="ruleForm.deployNodeName" size="small" placeholder="请输入机器名称" />
+              </el-form-item>
+              <el-form-item label="机器描述">
+                <el-input v-model="ruleForm.deployNodeDescribe" size="small" type="textarea" :rows="2" placeholder="请输入描述" />
+              </el-form-item>
+              <el-form-item label="服务地址" prop="serviceURL">
+                <el-input v-model="ruleForm.serviceURL" size="small" placeholder="请输入服务器地址信息" />
+              </el-form-item>
+              <el-form-item label="机器类型" prop="nodeType">
+                <el-select v-model="ruleForm.nodeType" size="small" placeholder="请选择机器类型">
+                  <el-option label="物理机" value="物理机"></el-option>
+                  <el-option label="虚拟机" value="虚拟机"></el-option>
+                  <el-option label="Docker" value="Docker"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="foot center t30">
+            <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
+            <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+      <!--删除弹框-->
+      <Dialog :flag="removeDialogVisible">
+        <div class="airportInfoDialog">
+          <div class="del-title">删除协议</div>
+          <div class="content er">
+            <div class="log">你是否确认删除{{ rmObj.deployNodeName }}？</div>
+          </div>
+          <div class="DelFoot right t30">
+            <el-button size="medium" class="r25 r26" type="danger" @click="removeSubmit()">删除</el-button>
+            <el-button size="medium" class="r26" @click="removeDialogVisible = false">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { GeneralDataReception, Query } from "@/api/dataIntegration";
+import { validateIP } from "@/utils/validate";
+import DataTable from "@/components/Table";
+
+export default {
+  name: "ProtocolHome",
+  components: { Dialog, DataTable },
+  data () {
+    return {
+      dataList: [],
+      editDialogVisible: false,
+      removeDialogVisible: false,
+      rmObj: {},
+      editDialogTitle: "新增机器",
+      ruleForm: {
+        // 机器信息表单
+        deployNodeName: "",
+        deployNodeDescribe: "",
+        serviceURL: "",
+        deployNodeType: "",
+      },
+      rules: {
+        // 机器信息表单验证
+        deployNodeName: [
+          { required: true, message: "请输入机器名称", trigger: "blur" },
+        ],
+        serviceURL: [
+          {
+            required: true,
+            message: "请输入正确的IP地址",
+            validator: this.validateIP,
+            trigger: "blur",
+          },
+        ],
+        deployNodeType: [
+          { required: true, message: "请选择机器类型", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created () {
+    // this.getList();
+  },
+  methods: {
+    async getList () {
+      try {
+        const res = await Query({
+          id: 2,
+          dataContent: [],
+        });
+        if (res.code === "0") {
+          this.dataList = res.returnData;
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    // 新增-弹框
+    showAddDialog () {
+      this.editDialogTitle = "新增机器";
+      this.editDialogVisible = true;
+    },
+    // 编辑-弹框
+    showEditDialog (item) {
+      this.editDialogTitle = "编辑机器";
+      this.ruleForm = JSON.parse(JSON.stringify(item));
+      this.editDialogVisible = true;
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (!this.ruleForm.deployNodeID) {
+            this.addSubmit();
+          } else {
+            this.editSubmit();
+          }
+          this.resetForm("ruleForm");
+        }
+      });
+    },
+    // 重置
+    resetForm (formName) {
+      this.ruleForm = {};
+      this.$refs[formName].resetFields();
+      this.editDialogVisible = false;
+    },
+    // 删除-弹框
+    showRemoveDialog (item) {
+      this.rmObj = item;
+      this.removeDialogVisible = true;
+    },
+    // 确认删除
+    async removeSubmit () {
+      this.rmObj["operate"] = "3";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "2",
+          dataContent: JSON.stringify(this.rmObj),
+        });
+        if (res.code === "0") {
+          this.removeDialogVisible = false;
+          this.$message.success("删除成功");
+          this.getList();
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    async addSubmit () {
+      this.ruleForm["operate"] = "1";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "2",
+          dataContent: JSON.stringify(this.ruleForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+          this.getList();
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    async editSubmit () {
+      this.ruleForm["operate"] = "2";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "2",
+          dataContent: JSON.stringify(this.ruleForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+          this.getList();
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.protocol-home {
+  .wrap {
+    padding: 16px 0;
+    .protocol-header {
+      line-height: 32px;
+      font-size: 14px;
+      .button-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+      .status {
+        & > div {
+          .icon {
+            width: 14px;
+            height: 14px;
+            background: #2d67e3;
+            border-radius: 2px;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 10px;
+            position: relative;
+            top: -2px;
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .status1 {
+          font-size: 14px;
+          margin-right: 28px;
+        }
+        .status2 {
+          font-size: 14px;
+          margin-right: 28px;
+          .icon {
+            background: #f4c154;
+          }
+        }
+        .status3 {
+          font-size: 14px;
+          .icon {
+            background: #73d970;
+          }
+        }
+      }
+    }
+    .protocol-content {
+      .grid-content {
+        height: 136px;
+        background: #ffffff;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 25px;
+        margin-bottom: 24px;
+        position: relative;
+        .grid-content-bg {
+          position: absolute;
+          width: 100%;
+          height: 4px;
+          background-color: #f4c154;
+          top: 0;
+          left: 0;
+          border-radius: 4px 4px 0 0;
+        }
+        .title {
+          font-size: 16px;
+          font-family: Helvetica;
+          font-weight: bold;
+          color: #101116;
+          white-space: nowrap;
+          max-width: 80%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          .name {
+            white-space: nowrap;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .loger {
+            width: 14px;
+            height: 14px;
+            margin-left: 24px;
+            background: url("../../../../../assets/status/ic_edit_default.png")
+              no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            position: relative;
+            top: 2px;
+          }
+          .loger:hover {
+            background: url("../../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .cardContent {
+          margin-top: 30px;
+          text-align: left;
+          width: 100%;
+          .IPadress {
+            font-size: 14px;
+            font-weight: normal;
+            color: #101116;
+            width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .type {
+            margin-top: 14px;
+            font-size: 14px;
+            font-weight: normal;
+            color: #101116;
+            width: 100%;
+          }
+        }
+        .icon {
+          cursor: pointer;
+          font-size: 16px;
+          color: #606266;
+        }
+        .success {
+          background-color: #2d67e3;
+        }
+        .error {
+          background-color: #f4c154;
+        }
+        .info {
+          background-color: #73d970;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/protocolManagement/protocolHome.vue

@@ -0,0 +1,353 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-04-12 17:49:47
+ * @LastEditTime: 2022-04-13 16:17:37
+ * @LastEditors: your name
+ * @Description: 协议管理-首页
+ * have a nice day!
+-->
+
+<template>
+  <div class="protocol-home">
+    <div class="wrap">
+      <!-- <div class="protocol-header flex">
+        <div class="status flex-wrap">
+          <div class="manageTitle">协议管理</div>
+          <div class="status1"><span class="icon"></span>内置</div>
+          <div class="status2"><span class="icon"></span>扩展</div>
+        </div>
+        <div class="addBtn">
+          <el-button class="button-white" size="small" @click="showAddDialog()">新增</el-button>
+        </div>
+      </div> -->
+      <div class="protocol-content">
+        <DataTable data-id="1" :rows="12" labelWidth="100px" :minHeight="70" width="800px" :showOverflowTooltip="true" />
+        <!-- <el-row :gutter="24">
+          <el-col v-for="item in dataList" :key="item.protocolId" :span="4">
+            <div class="grid-content">
+              <div :class="item.protocolStatus=='1' ? 'success' : 'error'" class="grid-content-bg"></div>
+              <div class="grid-content-hand flex">
+                <div class="title flex-wrap">
+                  <el-tooltip class="item" effect="dark" :content="item.protocolName" placement="bottom">
+                    <div class="name">{{ item.protocolName }}</div>
+                  </el-tooltip>
+                  <i class="loger" @click="showEditDialog(item)" />
+                </div>
+                <i class="el-icon-close icon" @click="showRemoveDialog(item)" />
+              </div>
+            </div>
+          </el-col>
+        </el-row> -->
+      </div>
+      <!--新增/编辑-->
+      <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
+        <div class="airportInfoDialog dialog-public-background">
+          <div class="title">{{ editDialogTitle }}</div>
+          <div class="content">
+            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
+              <el-form-item label="协议名称" prop="protocolName">
+                <el-input v-model="ruleForm.protocolName" size="medium" placeholder="请输入协议名称（必填）" />
+              </el-form-item>
+              <el-form-item label="协议类型" prop="nodeType">
+                <el-select v-model="ruleForm.nodeType" size="small" placeholder="请选择协议类型">
+                  <el-option label="内置" value="1"></el-option>
+                  <el-option label="扩展" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="类名" prop="className">
+                <el-input v-model="ruleForm.className" size="medium" type="textarea" :rows="2" placeholder="请输入类名（必填）" />
+              </el-form-item>
+              <el-form-item label="读方法名" prop="rmethodName">
+                <el-input v-model="ruleForm.rmethodName" size="medium" placeholder="请输入读方法名（必填）" />
+              </el-form-item>
+              <el-form-item label="写方法名" prop="smethodName">
+                <el-input v-model="ruleForm.smethodName" size="medium" placeholder="请输入写方法名（必填）" />
+              </el-form-item>
+              <el-form-item label="文件名及路径" prop="filePath">
+                <el-input v-model="ruleForm.filePath" size="medium" type="textarea" :rows="3" placeholder="请输入文件名及路径" />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="foot center t30">
+            <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
+            <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+      <!--删除弹框-->
+      <Dialog :flag="removeDialogVisible">
+        <div class="airportInfoDialog">
+          <div class="del-title">删除协议</div>
+          <div class="content er">
+            <div class="log">
+              是否确认删除{{ rmObj.protocolName }}？
+            </div>
+          </div>
+          <div class="DelFoot right t30">
+            <el-button size="medium" class="r25 r26" type="danger" @click="removeSubmit()">删除</el-button>
+            <el-button size="medium" class="r26" @click="removeDialogVisible = false">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { GeneralDataReception, Query } from '@/api/dataIntegration'
+import DataTable from '@/components/Table'
+export default {
+  name: 'ProtocolHome',
+  components: { Dialog, DataTable },
+  data () {
+    return {
+      dataList: [],
+      editDialogVisible: false,
+      removeDialogVisible: false,
+      rmObj: {},
+      editDialogTitle: '新增协议',
+      ruleForm: {
+        // 协议信息表单
+        protocolName: '',
+        className: '',
+        rmethodName: '',
+        smethodName: '',
+        filePath: ''
+      },
+      rules: {
+        // 协议信息表单验证
+        protocolName: [{ required: true, message: '请输入协议名称', trigger: 'blur' }],
+        className: [{ required: true, message: '请输入类名', trigger: 'blur' }],
+        rmethodName: [{ required: true, message: '请输入读方法名', trigger: 'blur' }],
+        smethodName: [{ required: true, message: '请输入写方法名', trigger: 'blur' }]
+      }
+    }
+  },
+  created () {
+    //this.getList()
+  },
+  methods: {
+    async getList () {
+      try {
+        const res = await Query({
+          id: 1,
+          dataContent: []
+        });
+        if (res.code === "0") {
+          this.dataList = res.returnData;
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    // 新增-弹框
+    showAddDialog () {
+      this.editDialogTitle = '新增协议'
+      this.editDialogVisible = true
+    },
+    // 编辑-弹框
+    showEditDialog (item) {
+      this.editDialogTitle = '编辑协议'
+      this.ruleForm = item
+      this.editDialogVisible = true
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs['ruleForm'].validate(valid => {
+        if (valid) {
+          if (!this.ruleForm.protocolId) {
+            this.addSubmit()
+          } else {
+            this.editSubmit()
+          }
+          this.resetForm('ruleForm')
+        }
+      })
+    },
+    // 重置
+    resetForm (formName) {
+      this.ruleForm = {};
+      this.$refs[formName].resetFields()
+      this.editDialogVisible = false
+    },
+    // 删除-弹框
+    showRemoveDialog (item) {
+      this.rmObj = item
+      this.removeDialogVisible = true
+    },
+    // 确认删除
+    async removeSubmit () {
+      this.rmObj["operate"] = "3";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "1",
+          dataContent: JSON.stringify(this.rmObj),
+        });
+        if (res.code === "0") {
+          this.removeDialogVisible = false;
+          this.$message.success("删除成功");
+          this.getList()
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    async addSubmit () {
+      this.ruleForm["operate"] = "1";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: '1',
+          dataContent: JSON.stringify(this.ruleForm)
+        })
+        if (res.code === "0") {
+          this.$message.success(res.message ?? '成功')
+          this.getList()
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async editSubmit () {
+      this.ruleForm["operate"] = "2";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: '1',
+          dataContent: JSON.stringify(this.ruleForm)
+        })
+        if (res.code === "0") {
+          this.$message.success(res.message ?? '成功')
+          this.getList()
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.protocol-home {
+  .wrap {
+    padding: 16px 0;
+    .protocol-header {
+      line-height: 32px;
+      font-size: 14px;
+      .button-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+      .status {
+        & > div {
+          .icon {
+            width: 14px;
+            height: 14px;
+            background: #2d67e3;
+            border-radius: 2px;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 10px;
+            position: relative;
+            top: -2px;
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .status1 {
+          font-size: 14px;
+          margin-right: 28px;
+        }
+        .status2 {
+          font-size: 14px;
+          .icon {
+            background: #f4c154;
+          }
+        }
+      }
+    }
+    .protocol-content {
+      .grid-content {
+        height: 120px;
+        background: #ffffff;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 25px;
+        margin-bottom: 24px;
+        position: relative;
+        .grid-content-bg {
+          position: absolute;
+          width: 100%;
+          height: 4px;
+          background-color: #f4c154;
+          top: 0;
+          left: 0;
+          border-radius: 4px 4px 0 0;
+        }
+        .title {
+          font-size: 16px;
+          font-family: Helvetica;
+          font-weight: bold;
+          color: #101116;
+          white-space: nowrap;
+          max-width: 80%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          .name {
+            white-space: nowrap;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .loger {
+            width: 14px;
+            height: 14px;
+            margin-left: 24px;
+            background: url("../../../../../assets/status/ic_edit_default.png")
+              no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            position: relative;
+            top: 2px;
+          }
+          .loger:hover {
+            background: url("../../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .icon {
+          cursor: pointer;
+          font-size: 16px;
+          color: #606266;
+        }
+        .success {
+          background-color: #2d67e3;
+        }
+        .error {
+          background-color: #f4c154;
+        }
+      }
+    }
+    .r25 {
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/queryItemSettings/queryItemSettingsHome.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="queryItemSettings_home">
+    <div class="wrap">
+      <DataTable
+        data-id="10"
+        :rows="12"
+        labelWidth="140px"
+        :minHeight="70"
+        width="800px"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DataTable from "@/components/Table";
+export default {
+  data() {
+    return {};
+  },
+  components: { DataTable },
+};
+</script>
+<style lang="scss" scoped>
+.queryItemSettings-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/queryTemplate/queryTemplate.vue

@@ -0,0 +1,330 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-17 13:43:58
+ * @LastEditTime: 2022-06-12 00:04:05
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \CABaggageData\src\views\dashboard\views\info.vue
+-->
+<template>
+  <div class="airportInfo">
+    <DataTable data-id="4" :rows="12" label-width="100px" :min-height="70" width="800px" :show-overflow-tooltip="true" :with-column-set="true" @handleAdd="handleAdd" @handleEdit="handleEdit" />
+    <!--搜索-->
+    <!-- <div class="airportInfo-search">
+      <Search title="查询模板" @getSearchData="getSearchData" :isSearch="false">
+        <button @click="handleAdd" class="btnAdd">新增</button>
+      </Search>
+    </div> -->
+    <!--内容区域-->
+    <!-- <div class="airportInfo-content">
+      <el-row :gutter="24">
+        <el-col
+          v-for="(item, index) in arr"
+          class="airportInfo-content-list"
+          :key="index"
+          :data="serachBox"
+          :span="4"
+        >
+          <div class="grid-content box-public-shadow">
+            <div class="flex list">
+              <div class="ult flex-wrap er">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="item.queryTemplateName"
+                  placement="bottom"
+                >
+                  <div class="title">{{ item.queryTemplateName }}</div>
+                </el-tooltip>
+                <div @click="airEdit(item)" class="edit_log"></div>
+              </div>
+              <div class="close">
+                <span
+                  @click.stop="handleMove(item, index)"
+                  class="el-icon-close icon"
+                ></span>
+              </div>
+            </div>
+            <div class="list desc">{{ item.queryTemplateDescribe }}</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div> -->
+    <!--删除弹框-->
+    <Dialog :flag="flag">
+      <div class="airportInfoDialog">
+        <div class="del-title">删除分类信息</div>
+        <div class="content er">
+          <div class="log" />
+          是否确认删除
+          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
+            {{ rmObj.name }}
+          </p>
+          ？
+        </div>
+        <div class="DelFoot right t30">
+          <el-button size="medium" class="r25 buwitch" type="danger" @click="remove()">删除</el-button>
+          <el-button size="medium" class="r26" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+<script>
+// import Search from '@/layout/components/Search/index.vue'
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { findarrays } from '@/utils/validate'
+// import { AirlinesInquiry } from '@/api/SystemSettings'
+import {
+  exceptiontype,
+  exceptionadd
+  // exceptiondel
+} from '@/api/acquisition'
+import { GeneralDataReception, Query } from '@/api/dataIntegration'
+import DataTable from '@/components/Table'
+export default {
+  name: 'AirportInfo',
+  components: {
+    // Search,
+    Dialog,
+    DataTable
+  },
+  data () {
+    return {
+      arr: [
+        {
+          typeName: '名称',
+          typeCode: '测试'
+        }
+      ], // 内容数据
+      flag: false, // 删除弹框开关
+      addFlag: false, // 新增机场信息弹框开关
+      EditFlag: false,
+      ids: null,
+      idss: null,
+      listDate: {},
+      rmObj: {
+        // 删除内容
+        name: ''
+      },
+      ruleForm: {
+        // 新增机场信息表单
+        name: '',
+        fullName: '',
+        code: ''
+      },
+      EditForm: {
+        name: '',
+        fullName: '',
+        code: ''
+      },
+      rules: {
+        // 新增机场信息表单验证
+        name: [{ required: true, message: '请输入航司简称', trigger: 'blur' }],
+        fullName: [{ required: true, message: '请输入航司全称', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入航司二字码', trigger: 'blur' }]
+      },
+      modid: ''
+    }
+  },
+  computed: {
+    serachBox () {
+      if (this.searchInfo) {
+        return this.arr.filter(data => {
+          return Object.keys(data).some(key => {
+            return String(data[key]).toLowerCase().indexOf(this.searchInfo) > -1
+          })
+        })
+      }
+      return this.arr
+    }
+  },
+  created () {
+    // this.getAirlines();
+    // this.exceptionlist();
+  },
+  methods: {
+    // 异常列表查询
+    async exceptionlist () {
+      const params = {
+        id: ''
+      }
+      const result = await exceptiontype(params)
+      if (Number(result.code) === 0) {
+        this.arr = result.returnData
+      }
+    },
+    // 搜索
+    getSearchData (val) {
+      const that = this
+      that.exceptionlist().then(function (data) {
+        if (val) {
+          that.arr = findarrays(that.arr, 'typeName', val)
+        } else {
+          that.exceptionlist()
+        }
+      })
+      // console.log(this.searchInfo);
+    },
+    // 删除信息
+    handleMove (item) {
+      this.listDate = item
+      this.flag = true
+      this.rmObj = {
+        name: item.queryTemplateName
+      }
+    },
+    async EditSubmit () {
+      let arr = 0
+      this.$refs['ruleFormall'].validate(valid => {
+        if (valid) {
+          arr = 1
+        } else {
+          arr = 0
+          return false
+        }
+      })
+      if (arr === 1) {
+        const params = {
+          id: this.modid.id,
+          typeName: this.EditForm.name,
+          typeCode: this.EditForm.fullName
+        }
+        const result = await exceptionadd(params)
+        if (Number(result.code) === 0) {
+          this.$message.success('成功')
+          this.exceptionlist()
+          this.$refs.ruleFormall.resetFields()
+        }
+        this.EditFlag = false
+      }
+    },
+    closeForm () {
+      this.$refs.ruleForm.resetFields()
+    },
+    // 获取模板列表
+    async getAirlines () {
+      try {
+        const res = await Query({
+          id: 77,
+          dataContent: []
+        })
+        if (res.code === '0') {
+          this.arr = res.returnData
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+
+    // 新增机场信息-弹框
+    handleAdd () {
+      this.$router.push('/systemSettings/queryTemplateadd')
+    },
+    // 新增机场信息-弹框
+    handleEdit (item) {
+      // this.modid = item;
+      // this.EditForm.name = item.typeName;
+      // this.EditForm.fullName = item.typeCode;
+      this.$router.push({
+        path: '/systemSettings/queryTemplateedit',
+        query: { queryTemplateID: item.queryTemplateID }
+      })
+      // this.EditForm.code = item.code2;
+      // this.EditFlag = true;
+    },
+    // 新增机场信息-弹框-取消
+    resetForm () {
+      this.addFlag = false
+      this.EditFlag = false
+      this.ruleForm.name = ''
+      this.ruleForm.fullName = ''
+      this.$refs.ruleForms.resetFields()
+      this.$refs.ruleFormall.resetFields()
+    },
+    // 删除
+    async remove (data) {
+      this.listDate.operate = '3'
+      try {
+        const res = await GeneralDataReception({
+          serviceId: 5,
+          dataContent: JSON.stringify(this.listDate)
+        })
+        if (res.code === '0') {
+          this.$message.success(res.message ?? '成功')
+          this.flag = false
+          this.listDate = {}
+          this.getAirlines()
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.airportInfo {
+  .log {
+    width: 26px;
+    height: 26px;
+    background: #eb2f3b;
+    border-radius: 50%;
+    margin-right: 15px;
+    background: url("../../../../../assets/index/ic_close_hint.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .er {
+    display: flex;
+    align-items: center;
+  }
+  .airportInfo-search {
+    margin: 40px 0 30px 0;
+  }
+  .airportInfo-content {
+    img {
+      margin: 0 auto;
+      margin-top: 10%;
+      display: -webkit-box;
+      -webkit-box-pack: center;
+      -webkit-box-align: center;
+      -webkit-box-orient: vertical;
+      text-align: center;
+    }
+    .grid-content {
+      height: 144px;
+      padding: 24px;
+      margin-bottom: 24px;
+      .title {
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #303133;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 150px;
+      }
+      .edit_log {
+        position: relative;
+        // top: -2px;
+      }
+      .icon {
+        cursor: pointer;
+      }
+      .desc {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #101116;
+        margin-top: 60px;
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/queryTemplate/queryTemplateChild.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="queryItemSettings_home">
+    <div class="wrap">
+      <DataTable
+        data-id="44"
+        edit-id="45"
+        :data-content="{ queryTemplateID }"
+        :rows="12"
+        label-width="140px"
+        :min-height="70"
+        width="800px"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DataTable from '@/components/Table'
+export default {
+  components: { DataTable },
+  data() {
+    return {
+      queryTemplateID: null
+    }
+  },
+  created() {
+    if (!this.$route.query.queryTemplateID) {
+      this.$router.push('/systemSettings/queryTemplate')
+      return
+    }
+    this.queryTemplateID = Number(this.$route.query.queryTemplateID)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.queryItemSettings-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/queryTemplate/queryTemplateadd.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="queryTemplate">
+    <Search
+      title="新增查询模板"
+      :is-search="false"
+    >
+      <button class="btnAner">测试</button>
+      <button
+        class="btnAn"
+        @click="addSubmit"
+      >保存</button>
+    </Search>
+    <el-form
+      ref="ruleForm"
+      style="margin-top: 10px"
+      :inline="true"
+      :model="ruleForm"
+      label-width="auto"
+      class="demo-ruleForm"
+    >
+      <el-row
+        :gutter="24"
+        class="b24"
+      >
+        <el-col :span="6">
+          <el-form-item
+            label="查询模板名称"
+            prop="queryTemplateName"
+          >
+            <el-input
+              v-model="ruleForm.queryTemplateName"
+              size="medium"
+              placeholder="请输入查询模板名称"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="数据源"
+            prop="dataSourceID"
+          >
+            <el-select
+              v-model="ruleForm.dataSourceID"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in dataSourceList"
+                :key="item.dataSourceID"
+                :label="item.dataSourceName"
+                :value="item.dataSourceID"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="服务名称"
+            prop="submitID"
+          >
+            <el-select
+              v-model="ruleForm.submitID"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in serviceList"
+                :key="item.submitID"
+                :label="item.serviceName"
+                :value="item.submitID"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="每页显示"
+            prop="pageRows"
+          >
+            <el-input
+              v-model="ruleForm.pageRows"
+              size="medium"
+              placeholder="请输入每页显示行数"
+              type="number"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item
+            label="查询模板描述"
+            prop="queryTemplateDescribe"
+          >
+            <el-input
+              v-model="ruleForm.queryTemplateDescribe"
+              size="medium"
+              placeholder="请输入查询模板描述"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <!-- <el-form-item
+        label="查询配置"
+        style="margin-bottom: 24px"
+      >
+        <el-input
+          v-model="ruleForm.queryTemplatetConfig"
+          class="desc"
+          type="textarea"
+          resize="none"
+          :autosize="{ minRows: 4, maxRows: 4 }"
+          placeholder="描述内容···"
+          size="small"
+        />
+      </el-form-item> -->
+        <el-col :span="24">
+          <el-form-item label="查询语句">
+            <el-input
+              v-model="ruleForm.queryTemplate"
+              class="desc"
+              type="textarea"
+              resize="none"
+              :autosize="{ minRows: 26, maxRows: 26 }"
+              placeholder="描述内容···"
+              size="small"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+import Search from '@/layout/components/Search/index.vue'
+import { GeneralDataReception, myQuery } from '@/api/dataIntegration'
+export default {
+  components: {
+    Search
+  },
+  data() {
+    return {
+      ruleForm: {
+        queryTemplateName: '',
+        queryTemplateDescribe: '',
+        submitID: null,
+        queryTemplate: '',
+        pageRows: null
+      },
+      dataSourceList: [],
+      serviceList: [],
+      rules: {
+        queryTemplateName: [{ required: true, message: '请输入查询模板名称', trigger: 'blur' }],
+        // protocolID: [{ required: true, message: '请输入查询协议', trigger: 'blur' }],
+        queryTemplateDescribe: [{ required: true, message: '请输入查询模板描述', trigger: 'blur' }],
+        queryTemplatetConfig: [{ required: true, message: '请选查询配置', trigger: 'change' }],
+        queryTemplate: [{ required: true, message: '请选择查询语句', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.ruleForm.event = 1
+    this.getDataSourceList()
+    this.queryServiceList()
+  },
+  methods: {
+    async addSubmit() {
+      const params = {
+        ...this.ruleForm,
+        submitID: this.ruleForm.serviceID
+      }
+      delete params.serviceID
+      try {
+        const res = await GeneralDataReception({
+          serviceId: 5,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.$router.push('/systemSettings/queryTemplate')
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async getDataSourceList() {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async queryServiceList() {
+      const serviceList = await this.getSelectOption(2)
+      this.serviceList = serviceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption(ID) {
+      try {
+        const { listValues } = await myQuery(ID)
+        return listValues
+      } catch (error) {
+        this.$message.error(error)
+        return []
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.queryTemplate {
+  padding: 20px 30px 0 24px;
+  height: 87vh;
+  background: #ffffff;
+  border-radius: 4px;
+  .btnAner {
+    width: 64px;
+    height: 32px;
+    background: #ffffff;
+    border: 1px solid #9ebbf7;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #2d67e3;
+    margin-right: 16px;
+  }
+  ::v-deep .demo-ruleForm {
+    > .el-row > .el-col {
+      .el-form-item {
+        margin-bottom: 24px;
+        // margin-right: 0px;
+        .el-input,
+        .el-select {
+          width: 100%;
+          // color: #101116;
+        }
+        input {
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type='‘number’'] {
+            -moz-appearance: textfield !important;
+          }
+        }
+      }
+    }
+  }
+  .b24 {
+    ::v-deep .el-input__inner {
+      height: 32px;
+    }
+  }
+  ::v-deep .el-form-item__content {
+    width: calc(100% - 96px);
+  }
+  ::v-deep .el-form-item {
+    width: 100%;
+  }
+  // .desc {
+  //   ::v-deep .el-input__inner {
+  //     height: 96px;
+  //   }
+  // }
+}
+</style>

src/views/systemManagement/dataBases/views/queryTemplate/queryTemplateedit.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="queryTemplate">
+    <Search
+      title="编辑查询模板"
+      :is-search="false"
+    >
+      <button class="btnAner">测试</button>
+      <button
+        class="btnAn"
+        @click="editSubmit"
+      >保存</button>
+    </Search>
+    <el-form
+      ref="ruleForm"
+      style="margin-top: 10px"
+      :inline="true"
+      :model="ruleForm"
+      label-width="auto"
+      class="demo-ruleForm"
+    >
+      <el-row
+        :gutter="24"
+        class="b24"
+      >
+        <el-col :span="6">
+          <el-form-item
+            label="查询模板名称"
+            prop="queryTemplateName"
+          >
+            <el-input
+              v-model="ruleForm.queryTemplateName"
+              size="medium"
+              placeholder="请输入查询模板名称"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="数据源"
+            prop="dataSourceID"
+          >
+            <el-select
+              v-model="ruleForm.dataSourceID"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in dataSourceList"
+                :key="item.dataSourceID"
+                :label="item.dataSourceName"
+                :value="item.dataSourceID"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="服务名称"
+            prop="serviceID"
+          >
+            <el-select
+              v-model="ruleForm.serviceID"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in serviceList"
+                :key="item.serviceID"
+                :label="item.serviceName"
+                :value="item.serviceID"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="每页显示"
+            prop="pageRows"
+          >
+            <el-input
+              v-model="ruleForm.pageRows"
+              size="medium"
+              placeholder="请输入每页显示行数"
+              type="number"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item
+            label="查询模板描述"
+            prop="queryTemplateDescribe"
+          >
+            <el-input
+              v-model="ruleForm.queryTemplateDescribe"
+              size="medium"
+              placeholder="请输入查询模板描述"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <!-- <el-form-item
+        label="查询配置"
+        style="margin-bottom: 24px"
+      >
+        <el-input
+          v-model="ruleForm.queryTemplatetConfig"
+          class="desc"
+          type="textarea"
+          resize="none"
+          :autosize="{ minRows: 4, maxRows: 4 }"
+          placeholder="描述内容···"
+          size="small"
+        />
+      </el-form-item> -->
+        <el-col :span="24">
+          <el-form-item label="查询语句">
+            <el-input
+              v-model="ruleForm.queryTemplate"
+              class="desc"
+              type="textarea"
+              resize="none"
+              :autosize="{ minRows: 26, maxRows: 26 }"
+              placeholder="描述内容···"
+              size="small"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+import Search from '@/layout/components/Search/index.vue'
+import { GeneralDataReception, myQuery } from '@/api/dataIntegration'
+export default {
+  components: {
+    Search
+  },
+  data() {
+    return {
+      queryTemplateID: null,
+      ruleForm: {
+        queryTemplateName: '',
+        queryTemplateDescribe: '',
+        serviceID: null,
+        queryTemplate: '',
+        pageRows: null
+      },
+      dataSourceList: [],
+      serviceList: [],
+      rules: {
+        queryTemplateName: [{ required: true, message: '请输入查询模板名称', trigger: 'blur' }],
+        // protocolID: [{ required: true, message: '请输入查询协议', trigger: 'blur' }],
+        queryTemplateDescribe: [{ required: true, message: '请输入查询模板描述', trigger: 'blur' }],
+        queryTemplatetConfig: [{ required: true, message: '请选查询配置', trigger: 'change' }],
+        queryTemplate: [{ required: true, message: '请选择查询语句', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    // this.ruleForm = this.$route.query
+    if (this.$route.query.queryTemplateID == null) {
+      this.$router.push('/systemSettings/queryTemplate')
+      return
+    }
+    this.queryTemplateID = Number(this.$route.query.queryTemplateID)
+    this.ruleForm.queryTemplateID = this.queryTemplateID
+    this.ruleForm.event = 2
+    this.queryQueryTemplateByID(this.queryTemplateID)
+    this.getDataSourceList()
+    this.queryServiceList()
+  },
+  methods: {
+    async editSubmit() {
+      const params = {
+        ...this.ruleForm,
+        submitID: this.ruleForm.serviceID
+      }
+      delete params.serviceID
+      try {
+        const res = await GeneralDataReception({
+          serviceId: 5,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.$router.push('/systemSettings/queryTemplate')
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async queryQueryTemplateByID(queryTemplateID) {
+      try {
+        const templateInfo = await myQuery(43, queryTemplateID)
+        Object.entries(templateInfo.listValues[0]).forEach(([key, value]) => {
+          this.ruleForm[key] = value
+        })
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    async getDataSourceList() {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async queryServiceList() {
+      const serviceList = await this.getSelectOption(2)
+      this.serviceList = serviceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption(ID) {
+      try {
+        const { listValues } = await myQuery(ID)
+        return listValues
+      } catch (error) {
+        this.$message.error(error)
+        return []
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.queryTemplate {
+  padding: 20px 30px 0 24px;
+  height: 87vh;
+  background: #ffffff;
+  border-radius: 4px;
+  .btnAner {
+    width: 64px;
+    height: 32px;
+    background: #ffffff;
+    border: 1px solid #9ebbf7;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #2d67e3;
+    margin-right: 16px;
+  }
+  ::v-deep .demo-ruleForm {
+    > .el-row > .el-col {
+      .el-form-item {
+        margin-bottom: 24px;
+        // margin-right: 0px;
+        .el-input,
+        .el-select {
+          width: 100%;
+          // color: #101116;
+        }
+        input {
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type='‘number’'] {
+            -moz-appearance: textfield !important;
+          }
+        }
+      }
+    }
+  }
+  .b24 {
+    ::v-deep .el-input__inner {
+      height: 32px;
+    }
+  }
+  ::v-deep .el-form-item__content {
+    width: calc(100% - 96px);
+  }
+  ::v-deep .el-form-item {
+    width: 100%;
+  }
+  // .desc {
+  //   ::v-deep .el-input__inner {
+  //     height: 96px;
+  //   }
+  // }
+}
+</style>

src/views/systemManagement/dataBases/views/serviceManagement/mixins/operate.js

@@ -0,0 +1,129 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-04-29 09:17:55
+ * @LastEditTime: 2022-06-11 20:56:26
+ * @LastEditors: your name
+ * @Description: 服务相关操作
+ * have a nice day!
+ */
+
+import { GeneralDataReception } from '@/api/dataIntegration'
+
+const operateMap = {
+  create: 1,
+  update: 2,
+  delete: 3
+}
+
+export default {
+  methods: {
+    async updateService() {
+      const params = {
+        serviceID: this.serviceID,
+        ...this.serviceForm,
+        event: 2
+      }
+      try {
+        const result = await GeneralDataReception({
+          serviceId: 3,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(result.code) === 0) {
+          this.$message.success(result.message ?? '成功')
+        } else {
+          this.$message.error(result.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async updateServiceNode(event, deployObject) {
+      const params = {
+        event,
+        serviceID: this.serviceID
+      }
+      if (event === 1) {
+        Object.assign(params, {
+          deployNodeID: deployObject.deployNodeID
+        })
+      } else {
+        Object.assign(params, {
+          DeployID: deployObject.servicedeploynodeID
+        })
+      }
+      try {
+        const result = await GeneralDataReception({
+          serviceId: 4,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(result.code) === 0) {
+          return result.message
+        } else {
+          return Promise.reject(result.message)
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async updateServiceSource(operate, sourceDataID) {
+      const params = {
+        operate: operateMap[operate],
+        serviceID: this.serviceID
+      }
+      if (operate === 'create') {
+        params.sourceDataID = sourceDataID
+      } else {
+        const { serviceInputSourceDataID } = this.serviceAndSourceList.find(
+          element => element.serviceID === this.serviceID && element.sourceDataID === sourceDataID
+        )
+        params.serviceInputSourceDataID = serviceInputSourceDataID
+      }
+      try {
+        const result = await GeneralDataReception({
+          serviceId: 6,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(result.code) === 0) {
+          return result.message
+        } else {
+          return Promise.reject(result.message)
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async updateServiceOutput(operate, outputTarget) {
+      const { dataOutputConfig, outputCondition, protocolID, serviceOutputID, targetdataID } = outputTarget
+      const params = {
+        operate: operateMap[operate]
+      }
+      if (operate !== 'create') {
+        Object.assign(params, {
+          serviceOutputID
+        })
+      }
+      if (operate !== 'delete') {
+        Object.assign(params, {
+          protocolID,
+          dataOutputConfig,
+          targetdataID,
+          outputCondition,
+          serviceID: this.serviceID
+        })
+      }
+      try {
+        const result = await GeneralDataReception({
+          serviceId: 9,
+          dataContent: JSON.stringify(params)
+        })
+        if (Number(result.code) === 0) {
+          return result.message
+        } else {
+          return Promise.reject(result.message)
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    }
+  }
+}

src/views/systemManagement/dataBases/views/serviceManagement/mixins/query.js

@@ -0,0 +1,149 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-04-27 15:54:38
+ * @LastEditTime: 2022-05-11 17:58:57
+ * @LastEditors: your name
+ * @Description: 服务相关数据查询
+ * have a nice day!
+ */
+
+import { queryMap, myQuery } from '@/api/dataIntegration'
+
+export default {
+  data() {
+    return {}
+  },
+  mounted() {
+    if (this.serviceID) {
+      this.queryAll()
+    } else {
+      this.$router.push('/systemSettings')
+    }
+  },
+  methods: {
+    // 协议 id: 1
+    queryProtocolList() {
+      return myQuery(queryMap.protocol)
+    },
+    // 机器/节点 id: 2
+    queryNodeList() {
+      return myQuery(queryMap.node)
+    },
+    // 服务 id: 3
+    queryServiceList() {
+      return myQuery(queryMap.service)
+    },
+    // 源数据 id: 4
+    querySourceList() {
+      return myQuery(queryMap.source)
+    },
+    // 源数据项 id: 5
+    querySourceItemList() {
+      return myQuery(queryMap.sourceItem)
+    },
+    // 源数据服务关联 id: 6
+    queryServiceAndSourceList() {
+      return myQuery(queryMap.serviceAndSource)
+    },
+    // 目标数据 id: 7
+    queryTargetList() {
+      return myQuery(queryMap.target)
+    },
+    // 目标数据项 id: 8
+    queryTargetItemList() {
+      return myQuery(queryMap.targetItem)
+    },
+    // 服务输出项关联 id: 9
+    queryServiceAndOutputList() {
+      return myQuery(queryMap.serviceAndOutput)
+    },
+    // 服务节点关联 id: 10
+    queryServiceAndNodeList() {
+      return myQuery(queryMap.serviceAndNode)
+    },
+    // 按照ID查询服务 id: 11
+    queryServiceByID(serviceID) {
+      return myQuery(queryMap.serviceByID, serviceID)
+    },
+    // 按照服务ID查询节点列表 id: 12
+    queryNodeListByServiceId(serviceID) {
+      return myQuery(queryMap.nodeByServiceID, serviceID)
+    },
+    // 按照服务ID查询源数据列表 id: 13
+    querySourceListByServiceId(serviceID) {
+      return myQuery(queryMap.sourceByServiceID, serviceID)
+    },
+    // 按照服务ID查询目标数据列表 id: 14
+    queryTargetListByServiceId(serviceID) {
+      return myQuery(queryMap.targetByServiceID, serviceID)
+    },
+    // 按照目标数据ID查询目标数据项列表 id: 15
+    queryTargetItemListByTargetID(targetID) {
+      return myQuery(queryMap.targetItemByTargetID, targetID)
+    },
+    // 按照源数据ID查询源数据项列表 id: 16
+    querySourceItemListBySourceID(sourceID) {
+      return myQuery(queryMap.sourceItemBySourceID, sourceID)
+    },
+    // 按照目标数据ID查询目标数据 id: 17
+    queryTargetByID(targetID) {
+      return myQuery(queryMap.targetByID, targetID)
+    },
+    // 按照源数据ID查询源数据 id: 18
+    querySourceBySourceID(sourceID) {
+      return myQuery(queryMap.sourceByID, sourceID)
+    },
+    // 按照服务ID查询算法计算方式 id: 19
+    queryAlgorithmByServiceID(serviceID) {
+      return myQuery(queryMap.serviceAlgorithmByServiceID, serviceID)
+    },
+    // 按照服务ID查询服务输出列表 id: 20
+    queryOutputListByServiceId(serviceID) {
+      return myQuery(queryMap.outputListByServiceID, serviceID)
+    },
+    async queryAll(serviceID = this.serviceID) {
+      try {
+        const [
+          [serviceInfo],
+          nodeList,
+          checkedNodeList,
+          serviceAndNodeList,
+          protocolList,
+          sourceList,
+          checkedSourceList,
+          serviceAndSourceList,
+          outputList,
+          targetList
+        ] = await Promise.all([
+          this.queryServiceByID(serviceID),
+          this.queryNodeList(),
+          this.queryNodeListByServiceId(serviceID),
+          this.queryServiceAndNodeList(),
+          this.queryProtocolList(),
+          this.querySourceList(),
+          this.querySourceListByServiceId(serviceID),
+          this.queryServiceAndSourceList(),
+          this.queryOutputListByServiceId(serviceID),
+          this.queryTargetList()
+        ])
+        Object.keys(this.serviceForm).forEach(key => {
+          this.serviceForm[key] = serviceInfo[key]
+        })
+        Object.keys(this.inputForm).forEach(key => {
+          this.inputForm[key] = serviceInfo[key]
+        })
+        this.nodeList = nodeList
+        this.checkedNodeKeys = checkedNodeList.map(node => node.deployNodeID)
+        this.serviceAndNodeList = serviceAndNodeList
+        this.protocolList = protocolList
+        this.sourceList = sourceList
+        this.checkedSourceKeys = checkedSourceList.map(source => source.sourceDataID)
+        this.serviceAndSourceList = serviceAndSourceList
+        this.outputList = outputList
+        this.targetList = targetList
+      } catch (error) {
+        console.log('错误', error)
+      }
+    }
+  }
+}

src/views/systemManagement/dataBases/views/serviceManagement/serviceEdit copy.vue

@@ -0,0 +1,707 @@
+<!--
+ * @Date: 2022-03-24 09:55:13
+ * @LastEditTime: 2022-05-16 09:55:51
+ * @LastEditors: your name
+ * @Description: 服务管理-编辑服务
+ * have a nice day!
+-->
+
+<template>
+  <div class="service-edit">
+    <div class="scrollbar">
+      <el-row :gutter="24">
+        <el-col :span="16">
+          <div class="part part-top">
+            <header class="title">
+              <p class="manageTitle">服务</p>
+              <el-button size="small" type="primary" class="btn-save" @click="btnSaveClickHandler">保存</el-button>
+            </header>
+            <main class="content">
+              <el-form ref="serviceForm" class="service-form" :model="serviceForm" label-position="right" label-width="72px" size="mini">
+                <el-form-item label="服务名称" prop="serviceName">
+                  <el-input v-model="serviceForm.serviceName" width="240px" placeholder="请输入服务名称" clearable />
+                </el-form-item>
+                <el-form-item label="是否同步">
+                  <el-radio-group v-model="serviceForm.isAsynchronous">
+                    <el-radio :label="0">是</el-radio>
+                    <el-radio :label="1">否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="服务描述" prop="serviceDescribe">
+                  <el-input v-model="serviceForm.serviceDescribe" placeholder="请输入描述" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" resize="none" clearable />
+                </el-form-item>
+              </el-form>
+            </main>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part part-top">
+            <header class="title">
+              <p class="manageTitle">部署机器</p>
+            </header>
+            <main class="content">
+              <div class="scrollbar">
+                <template v-if="nodeList.length">
+                  <el-row :gutter="16">
+                    <el-col :span="8">
+                      <div class="service-edit-card">
+                        <div class="card-btn-add" @click="showOperateDialog('node')">
+                          <i class="el-icon-plus" />
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col v-for="node in checkedNodeList" :key="node.deployNodeID" :span="8">
+                      <div class="service-edit-card">
+                        <div class="card-btn-close" @click="showDeleteDialog(node, 'node')">
+                          <i class="el-icon-close" />
+                        </div>
+                        <div class="card-header">
+                          <span>{{ node.deployNodeName }}</span>
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </template>
+                <template v-else>
+                  <NoData />
+                </template>
+              </div>
+            </main>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <header class="title">
+              <p class="manageTitle">输入</p>
+            </header>
+            <main class="content first-content">
+              <el-form ref="inputForm" class="input-form" :model="inputForm" label-position="right" label-width="72px" size="mini">
+                <el-form-item label="来源" prop="protocolID">
+                  <el-select v-model="inputForm.protocolID">
+                    <el-option v-for="protocol in protocolList" :key="protocol.protocolID" :value="protocol.protocolID" :label="protocol.protocolName" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="并发线程数" prop="threads" label-width="86px">
+                  <el-input v-model="inputForm.threads" width="166px" placeholder="请输入并发线程数" clearable />
+                </el-form-item>
+                <el-form-item label="来源配置" prop="connectConfig">
+                  <el-input v-model="inputForm.connectConfig" placeholder="请输入来源配置" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+                </el-form-item>
+              </el-form>
+            </main>
+            <header class="title">
+              <p class="manageTitle">源数据</p>
+            </header>
+            <main class="content second-content">
+              <div class="scrollbar">
+                <template v-if="sourceList.length">
+                  <el-row :gutter="16">
+                    <el-col :span="8">
+                      <div class="service-edit-card">
+                        <div class="card-btn-add" @click="showOperateDialog('source')">
+                          <i class="el-icon-plus" />
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col v-for="source in checkedSourceList" :key="source.sourceDataID" :span="8">
+                      <div class="service-edit-card">
+                        <div class="card-btn-close" @click="showDeleteDialog(source, 'source')">
+                          <i class="el-icon-close" />
+                        </div>
+                        <div class="card-header">
+                          <span>{{ source.dataName }}</span>
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </template>
+                <template v-else>
+                  <NoData />
+                </template>
+              </div>
+            </main>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <header class="title">
+              <p class="manageTitle">数据处理</p>
+            </header>
+            <main class="content">
+              <div class="scrollbar">
+                <template v-if="processList.length">
+                  <el-row :gutter="16">
+                    <el-col :span="8">
+                      <div class="service-edit-card">
+                        <div class="card-btn-add" @click="showOperateDialog('process')">
+                          <i class="el-icon-plus" />
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col v-for="process in checkedProcessList" :key="process.id" :span="8">
+                      <div class="service-edit-card">
+                        <div class="card-btn-close" @click="showDeleteDialog(process, 'process')">
+                          <i class="el-icon-close" />
+                        </div>
+                        <div class="card-header">
+                          <span>{{ process.processName }}</span>
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </template>
+                <template v-else>
+                  <NoData />
+                </template>
+              </div>
+            </main>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="part">
+            <header class="title">
+              <p class="manageTitle">数据输出</p>
+              <el-button size="small" type="primary" class="btn-white" @click="showOperateDialog('output')">新增</el-button>
+            </header>
+            <main class="content">
+              <div class="scrollbar">
+                <el-row :gutter="16">
+                  <el-col v-for="outputTarget in outputList" :key="outputTarget.serviceOutputID" :span="24">
+                    <div class="service-edit-card" style="height: 160px">
+                      <div class="card-btn-close" @click="showDeleteDialog(outputTarget, 'output')">
+                        <i class="el-icon-close" />
+                      </div>
+                      <div class="card-header">
+                        <span>{{ outputTargetProtocolName(outputTarget.protocolID) }}</span>
+                        <i class="icon-edit" @click="btnEditClickHandler(outputTarget, 'output')" />
+                      </div>
+                      <div class="card-main">
+                        <div class="flex">
+                          <div class="left">目标配置：</div>
+                          <div class="multiple-ellipsis" :title="outputTarget.dataOutputConfig">{{ outputTarget.dataOutputConfig }}</div>
+                        </div>
+                        <span>{{ outputTargetDataName(outputTarget.targetdataID) }}</span>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </main>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <Dialog :flag="operateDialogVisible" width="500px">
+      <template v-if="['node', 'source', 'process'].includes(operateDialogType)">
+        <div class="dialog-checkbox">
+          <div class="title">{{ dataInMap(operateDialogType, 'title') }}</div>
+          <main class="content">
+            <el-checkbox-group v-model="tempCheckedKeys">
+              <el-checkbox v-for="item in dataInMap(operateDialogType, 'list')" :key="item[dataInMap(operateDialogType, 'key')]" :label="item[dataInMap(operateDialogType, 'key')]">{{ item[dataInMap(operateDialogType, 'label')] }}</el-checkbox>
+            </el-checkbox-group>
+          </main>
+          <div class="foot">
+            <el-button size="medium" type="primary" class="r25 r26" @click="checkedSubmitHandler">提交</el-button>
+            <el-button size="medium" class="r26" @click="hideOperateDialog">取消</el-button>
+          </div>
+        </div>
+      </template>
+      <template v-if="operateDialogType === 'output'">
+        <div id="dialog-form">
+          <div class="title">数据输出编辑</div>
+          <main class="content">
+            <el-form ref="outputForm" class="output-form" :model="outputForm" label-position="right" label-width="72px" size="mini">
+              <el-form-item label="协议类型" prop="protocolID">
+                <el-select v-model="outputForm.protocolID">
+                  <el-option v-for="item in protocolList" :key="item.protocolID" :value="item.protocolID" :label="item.protocolName" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="协议配置" prop="dataOutputConfig">
+                <el-input v-model="outputForm.dataOutputConfig" type="textarea" placeholder="请输入协议配置" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+              </el-form-item>
+              <el-form-item label="目标数据" prop="targetdataID">
+                <el-select v-model="outputForm.targetdataID">
+                  <el-option v-for="item in targetList" :key="item.targetdataID" :value="item.targetdataID" :label="item.tdataName" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="输出条件" prop="outputCondition">
+                <el-input v-model="outputForm.outputCondition" type="textarea" placeholder="请输入输出条件" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+              </el-form-item>
+            </el-form>
+          </main>
+          <div class="foot">
+            <el-button size="medium" type="primary" class="r25 r26" @click="outputSubmitHandler">提交</el-button>
+            <el-button size="medium" class="r26" @click="hideOperateDialog">取消</el-button>
+          </div>
+        </div>
+      </template>
+    </Dialog>
+    <!--删除弹框-->
+    <Dialog :flag="deleteDialogVisible">
+      <div class="dialog-delete">
+        <div class="del-title">删除{{ dataInMap(deleteDialogType, 'deleteTitle') }}</div>
+        <div class="content er">
+          <div class="log">
+            你是否确认删除{{ delObj[dataInMap(deleteDialogType, 'label')] || '这一项' }}？
+          </div>
+        </div>
+        <div class="del-foot right t30">
+          <el-button size="medium" class="r25 r26" type="danger" @click="deleteSubmitHandler">删除</el-button>
+          <el-button size="medium" class="r26" @click="hideDeleteDialog">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import NoData from '@/components/nodata'
+import Dialog from '@/layout/components/Dialog'
+import query from './mixins/query'
+import operate from './mixins/operate'
+
+const keyMap = {
+  node: {
+    title: '部署机器选择',
+    deleteTitle: '机器',
+    key: 'deployNodeID',
+    label: 'deployNodeName',
+    list: 'nodeList',
+    checked: 'checkedNodeKeys',
+    operate: 'updateServiceNode'
+  },
+  source: {
+    title: '源数据',
+    deleteTitle: '源数据',
+    key: 'sourceDataID',
+    label: 'dataName',
+    list: 'sourceList',
+    checked: 'checkedSourceKeys',
+    operate: 'updateServiceSource'
+  },
+  process: {},
+  output: {
+    deleteTitle: '输出目标',
+    key: 'serviceOutputID',
+    list: 'outputList',
+    operate: 'updateServiceOutput'
+  }
+}
+
+export default {
+  components: { NoData, Dialog },
+  mixins: [query, operate],
+  data () {
+    return {
+      serviceID: Number(this.$route.query.serviceID),
+      operateDialogType: null,
+      delObj: {},
+      deleteDialogType: null,
+      tempCheckedKeys: [],
+      serviceForm: {
+        serviceName: '',
+        isAsynchronous: null,
+        serviceDescribe: ''
+      },
+      inputForm: {
+        protocolID: null,
+        threads: null,
+        connectConfig: ''
+      },
+      outputForm: {
+        protocolID: null,
+        dataOutputConfig: '',
+        targetdataID: null,
+        outputCondition: '',
+        serviceOutputID: null
+      },
+      targetList: [],
+      protocolList: [],
+      nodeList: [],
+      checkedNodeKeys: [],
+      serviceAndNodeList: [],
+      sourceList: [],
+      checkedSourceKeys: [],
+      serviceAndSourceList: [],
+      processList: [],
+      checkedProcessKeys: [],
+      outputList: []
+    }
+  },
+  computed: {
+    // 获取各关联项的标题、键名、操作方法等
+    dataInMap () {
+      return function (type, keyType) {
+        if (type === null) {
+          return null
+        }
+        if (['title', 'deleteTitle', 'key', 'label'].includes(keyType)) {
+          return keyMap[type][keyType]
+        } else {
+          return this[keyMap[type][keyType]]
+        }
+      }
+    },
+    operateDialogVisible () {
+      return Boolean(this.operateDialogType)
+    },
+    deleteDialogVisible () {
+      return Boolean(this.deleteDialogType)
+    },
+    checkedNodeList () {
+      return this.nodeList.filter(item => this.checkedNodeKeys.includes(item.deployNodeID))
+    },
+    checkedSourceList () {
+      return this.sourceList.filter(item => this.checkedSourceKeys.includes(item.sourceDataID))
+    },
+    checkedProcessList () {
+      return this.processList.filter(item => this.checkedProcessKeys.includes(item.processName))
+    },
+    // 从协议列表中根据协议ID获取协议名称
+    outputTargetProtocolName () {
+      return function (protocolID) {
+        return this.protocolList.find(protocol => protocol.protocolID === protocolID).protocolName
+      }
+    },
+    // 从目标数据列表中根据目标数据ID获取目标数据名称
+    outputTargetDataName () {
+      return function (targetdataID) {
+        return this.targetList.find(target => target.targetdataID === targetdataID).tdataName
+      }
+    }
+  },
+  methods: {
+    // 服务信息保存
+    async btnSaveClickHandler () {
+      this.$refs['serviceForm'].validate(valid => {
+        if (!valid) return
+      })
+      this.$refs['inputForm'].validate(valid => {
+        if (!valid) return
+      })
+      await this.updateService()
+      this.queryAll()
+    },
+    // 关联编辑-显示弹框
+    showOperateDialog (type) {
+      if (['node', 'source', 'process'].includes(type)) {
+        this.tempCheckedKeys = [...this.dataInMap(type, 'checked')]
+      }
+      this.operateDialogType = type
+    },
+    btnEditClickHandler (obj, type) {
+      // Object.keys(this.outputForm).forEach(key => {
+      //   this.outputForm[key] = obj[key]
+      // })
+      this.outputForm = obj
+      this.showOperateDialog(type)
+    },
+    // 关联编辑-提交
+    async checkedSubmitHandler () {
+      const addKeys = this.tempCheckedKeys.filter(
+        key => !this.dataInMap(this.operateDialogType, 'checked').includes(key)
+      )
+      const removeKeys = this.dataInMap(this.operateDialogType, 'checked').filter(
+        key => !this.tempCheckedKeys.includes(key)
+      )
+      const createArr = addKeys.map(key => this.dataInMap(this.operateDialogType, 'operate')('create', key))
+      const deleteArr = removeKeys.map(key => this.dataInMap(this.operateDialogType, 'operate')('delete', key))
+      try {
+        await Promise.all([...createArr, ...deleteArr])
+        this.$message.success('成功')
+        await this.queryAll()
+        this.hideOperateDialog()
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    // 服务输出项新增/编辑
+    async outputSubmitHandler () {
+      const outputTarget = {
+        ...this.outputForm
+      }
+      try {
+        let message
+        if (outputTarget.serviceOutputID !== null) {
+          message = await this.updateServiceOutput('update', outputTarget)
+        } else {
+          message = await this.updateServiceOutput('create', outputTarget)
+        }
+        this.$message.success(message ?? '成功')
+        await this.queryAll()
+        this.hideOperateDialog()
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    // 关联编辑-隐藏弹框
+    hideOperateDialog () {
+      if (this.operateDialogType === 'output') {
+        this.$refs['outputForm'].resetFields()
+      }
+      this.operateDialogType = null
+    },
+    // 关联删除-显示弹框
+    showDeleteDialog (obj, type) {
+      this.delObj = obj
+      this.deleteDialogType = type
+    },
+    // 关联删除-提交
+    async deleteSubmitHandler () {
+      const operate = this.dataInMap(this.deleteDialogType, 'operate')
+      let message
+      try {
+        if (this.deleteDialogType === 'output') {
+          message = await operate('delete', this.delObj)
+        } else {
+          message = await operate('delete', this.delObj[this.dataInMap(this.deleteDialogType, 'key')])
+        }
+        this.$message.success(message ?? '成功')
+        await this.queryAll()
+        this.hideDeleteDialog()
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    // 关联删除-隐藏弹框
+    hideDeleteDialog () {
+      this.deleteDialogType = null
+      this.delObj = {}
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service-edit {
+  margin: 0 -24px;
+  padding-bottom: 16px;
+  overflow: hidden;
+  .scrollbar {
+    height: calc(100vh - 120px);
+    padding: 0 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    ::v-deep .part {
+      height: 640px;
+      padding: 26px 24px 0 24px;
+      background: #ffffff;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      &.part-top {
+        height: 296px;
+        margin-bottom: 24px;
+        overflow: hidden;
+      }
+      .title {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 24px;
+        &:nth-of-type(2) {
+          margin-top: 10px;
+        }
+        .manageTitle {
+          height: 32px;
+          line-height: 30px;
+        }
+        .el-button {
+          width: 64px;
+          height: 32px;
+          border: none;
+          &.btn-white {
+            background-color: #ffffff;
+            border: 1px solid #92ace2;
+            color: #2d67e3;
+          }
+          &:hover {
+            background-color: #487be8;
+            color: #ffffff;
+          }
+        }
+      }
+      label,
+      span,
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: Helvetica, Microsoft YaHei;
+        font-size: 14px;
+        font-weight: 400;
+      }
+      label {
+        color: #303133;
+      }
+      input {
+        color: #101116;
+      }
+      .el-input__inner,
+      .el-textarea__inner {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-radio {
+        font-weight: 400;
+      }
+      .content {
+        margin: 0;
+        &:not(.first-content) {
+          height: calc(100% - 32px - 24px);
+        }
+        &.second-content {
+          height: calc(100% - 297px);
+        }
+        > .scrollbar {
+          margin: -12px -24px 0 0;
+          padding: 12px 24px 28px 0;
+          height: calc(100% + 12px);
+          > .el-row > .el-col {
+            margin-bottom: 16px;
+            .service-edit-card {
+              height: 80px;
+              padding: 16px 14px 0 16px;
+              background: #f5f7fa;
+              box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+              border-radius: 4px;
+              position: relative;
+              font-family: Helvetica, "Microsoft YaHei";
+              .card-btn-add {
+                margin: -16px -14px 0 -16px;
+                height: calc(100% + 16px);
+                border: 1px dashed #9ebbf7;
+                cursor: pointer;
+                position: relative;
+                .el-icon-plus {
+                  font-size: 32px;
+                  color: #9ebbf7;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  margin: -16px -16px;
+                }
+              }
+              .card-btn-close {
+                position: absolute;
+                top: -12px;
+                right: -12px;
+                z-index: 10;
+                width: 24px;
+                height: 24px;
+                line-height: 24px;
+                text-align: center;
+                background: #000000;
+                opacity: 0.8;
+                border-radius: 50%;
+                color: #ffffff;
+                cursor: pointer;
+              }
+              .card-header {
+                display: flex;
+                justify-content: flex-start;
+                color: #101116;
+                font-size: 14px;
+                margin-bottom: 30px;
+                .icon-edit {
+                  width: 14px;
+                  height: 14px;
+                  display: inline-block;
+                  background-repeat: no-repeat;
+                  background-size: cover;
+                  transition: all 0.3s;
+                  margin-left: 16px;
+                  cursor: pointer;
+                  background-image: url("../../../../../assets/status/ic_edit_default.png");
+                  &:hover {
+                    background-image: url("../../../../../assets/status/ic_edit_hovar.png");
+                  }
+                }
+              }
+              .card-main {
+                font-size: 14px;
+                font-family: Helvetica, Microsoft YaHei;
+                color: #101116;
+                .flex {
+                  height: 32px;
+                  margin-bottom: 23px;
+                  .left {
+                    padding-right: 9px;
+                  }
+                  .multiple-ellipsis {
+                    flex: 1;
+                    display: -webkit-box;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    word-break: break-all;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 2;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      &:nth-last-child(1) .content > .scrollbar > .el-row > .el-col {
+        margin-bottom: 24px;
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  ::v-deep .service-form {
+    display: flex;
+    flex-wrap: wrap;
+    .el-form-item {
+      margin-bottom: 25px;
+      .el-form-item__label {
+        padding-right: 16px;
+      }
+      &:nth-child(2) {
+        margin-left: 80px;
+        flex: 1;
+        .el-form-item__label {
+          margin-right: 9px;
+        }
+      }
+      &:nth-child(3) {
+        width: 100%;
+      }
+    }
+  }
+  ::v-deep .input-form {
+    display: flex;
+    flex-wrap: wrap;
+    .el-form-item {
+      margin-bottom: 25px;
+      .el-form-item__label {
+        padding-right: 16px;
+      }
+      &:nth-child(2) {
+        margin-left: 54px;
+        flex: 1;
+      }
+      &:nth-child(3) {
+        width: 100%;
+      }
+    }
+  }
+  .dialog-checkbox {
+    .content {
+      margin-left: 16px;
+      .el-checkbox-group {
+        margin-right: 24px;
+        .el-checkbox {
+          margin-bottom: 24px;
+          font-family: Helvetica, Microsoft YaHei;
+          color: #303133;
+        }
+      }
+    }
+  }
+  ::v-deep #dialog-form .el-select .el-input__inner {
+    width: 100%;
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/serviceManagement/serviceEdit.vue

@@ -0,0 +1,612 @@
+<!--
+ * @Date: 2022-03-24 09:55:13
+ * @LastEditTime: 2022-06-13 15:22:49
+ * @LastEditors: your name
+ * @Description: 服务管理-编辑服务
+ * have a nice day!
+-->
+
+<template>
+  <div class="service-edit">
+    <div class="scrollbar">
+      <div
+        ref="formWrap"
+        class="service-form-wrapper service-edit-wrapper"
+      >
+        <header class="title">
+          <p class="manageTitle">服务</p>
+          <el-button
+            size="small"
+            type="primary"
+            class="btn-save"
+            @click="editSubmitHandler"
+          >保存</el-button>
+        </header>
+        <main class="content">
+          <el-form
+            ref="serviceForm"
+            class="service-form"
+            :model="serviceForm"
+            label-position="right"
+            label-width="72px"
+            size="mini"
+          >
+            <el-row
+              :gutter="60"
+              type="flex"
+            >
+              <el-col :span="8">
+                <el-form-item
+                  label="服务名称"
+                  prop="serviceName"
+                >
+                  <el-input
+                    v-model="serviceForm.serviceName"
+                    placeholder="请输入服务名称"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="类型"
+                  prop="serviceType"
+                  label-width="44px"
+                >
+                  <el-select
+                    v-model="serviceForm.serviceType"
+                    clearable
+                  >
+                    <el-option
+                      :value="1"
+                      label="管理前端"
+                    />
+                    <el-option
+                      :value="2"
+                      label="管理后端"
+                    />
+                    <el-option
+                      :value="3"
+                      label="业务前端"
+                    />
+                    <el-option
+                      :value="4"
+                      label="业务后端"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="数据来源"
+                  prop="dataSourceID"
+                >
+                  <el-select
+                    v-model="serviceForm.dataSourceID"
+                    clearable
+                  >
+                    <el-option
+                      v-for="dataSource in dataSourceList"
+                      :key="dataSource.dataSourceID"
+                      :value="dataSource.dataSourceID"
+                      :label="dataSource.dataSourceName"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="生命周期ID键名"
+                  prop="lifeCycleCol"
+                  label-width="114px"
+                >
+                  <el-input
+                    v-model="serviceForm.lifeCycleCol"
+                    placeholder="请输入生命周期ID键名"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item
+                  label="服务描述"
+                  prop="serviceDescribe"
+                >
+                  <el-input
+                    v-model="serviceForm.serviceDescribe"
+                    placeholder="请输入描述"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="采集线程"
+                  prop="threads"
+                >
+                  <el-input
+                    v-model="serviceForm.threads"
+                    type="number"
+                    placeholder="请输入采集线程数"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="是否异步"
+                  prop="isAsynchronous"
+                >
+                  <el-radio-group v-model="serviceForm.isAsynchronous">
+                    <el-radio :label="0">是</el-radio>
+                    <el-radio :label="1">否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="数据类型"
+                  prop="datatype"
+                >
+                  <el-select
+                    v-model="serviceForm.datatype"
+                    clearable
+                  >
+                    <el-option
+                      label="JSON"
+                      :value="1"
+                    />
+                    <el-option
+                      label="XML"
+                      :value="2"
+                    />
+                    <el-option
+                      label="自定义"
+                      :value="3"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label="取值规则"
+                  prop="computingMethod"
+                >
+                  <el-input
+                    v-model="serviceForm.computingMethod"
+                    placeholder="请输入取值规则"
+                    type="textarea"
+                    :autosize="{ minRows: 4, maxRows: 4 }"
+                    resize="none"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label="检测规则"
+                  prop="validationExpression"
+                >
+                  <el-input
+                    v-model="serviceForm.validationExpression"
+                    placeholder="请输入检测规则"
+                    type="textarea"
+                    :autosize="{ minRows: 4, maxRows: 4 }"
+                    resize="none"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="启动时间"
+                  prop="startTime"
+                >
+                  <el-date-picker
+                    v-model="serviceForm.startTime"
+                    type="datetime"
+                    format="yyyy-MM-dd HH:mm"
+                    value-format="yyyy-MM-dd HH:mm"
+                    placeholder="请选择启动时间"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="停止时间"
+                  prop="stopTime"
+                >
+                  <el-date-picker
+                    v-model="serviceForm.stopTime"
+                    type="datetime"
+                    format="yyyy-MM-dd HH:mm"
+                    value-format="yyyy-MM-dd HH:mm"
+                    placeholder="请选择停止时间"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="失败重试次数"
+                  prop="retryCount"
+                  label-width="100px"
+                >
+                  <el-input
+                    v-model="serviceForm.retryCount"
+                    type="number"
+                    placeholder="请输入重试次数"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="循环次数"
+                  prop="loopCount"
+                >
+                  <el-input
+                    v-model="serviceForm.loopCount"
+                    type="number"
+                    placeholder="请输入循环次数"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="循环频率"
+                  prop="frequencyCount"
+                >
+                  <el-input
+                    v-model="serviceForm.frequencyCount"
+                    type="number"
+                    placeholder="请输入循环频率"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item
+                  label="循环频率单位"
+                  prop="frequencyUnit"
+                  label-width="100px"
+                >
+                  <el-select
+                    v-model="serviceForm.frequencyUnit"
+                    clearable
+                  >
+                    <el-option
+                      label="天"
+                      :value="24 * 60 * 60 * 1000"
+                    />
+                    <el-option
+                      label="小时"
+                      :value="60 * 60 * 1000"
+                    />
+                    <el-option
+                      label="分钟"
+                      :value="60 * 1000"
+                    />
+                    <el-option
+                      label="秒"
+                      :value="1000"
+                    />
+                    <el-option
+                      label="毫秒"
+                      :value="1"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </main>
+      </div>
+      <div class="service-tables">
+        <div class="service-table-wrapper service-edit-wrapper">
+          <header class="title">
+            <p class="manageTitle">输出</p>
+            <el-button
+              size="small"
+              type="primary"
+              class="btn-white"
+              @click="btnAddClickHandler(1)"
+            >新增</el-button>
+          </header>
+          <main class="content">
+            <DataTable
+              ref="serviceOutputTable"
+              data-id="7"
+              :data-content="{ serviceID: serviceID }"
+              :rows="12"
+              :table-height="computedTableHeight"
+              margin-top="0"
+              :is-btn="false"
+              :is-dialog="true"
+            />
+          </main>
+        </div>
+        <div class="service-table-wrapper service-edit-wrapper">
+          <header class="title">
+            <p class="manageTitle">部署机器</p>
+            <el-button
+              size="small"
+              type="primary"
+              class="btn-white"
+              @click="btnAddClickHandler(2)"
+            >新增</el-button>
+          </header>
+          <main class="content">
+            <DataTable
+              ref="serviceMachineTable"
+              data-id="3"
+              :data-content="{ serviceID: serviceID }"
+              :rows="12"
+              :table-height="computedTableHeight"
+              margin-top="0"
+              :is-btn="false"
+              :is-dialog="true"
+              :selection-enable="true"
+              @selection-change="machineSelectionChangeHandler"
+            />
+          </main>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import NoData from '@/components/nodata'
+// import Dialog from '@/layout/components/Dialog'
+import DataTable from '@/components/Table'
+import { myQuery } from '@/api/dataIntegration'
+
+// import query from './mixins/query'
+import operate from './mixins/operate'
+
+export default {
+  components: {
+    // NoData,
+    // Dialog,
+    DataTable
+  },
+  mixins: [
+    // query,
+    operate
+  ],
+  data() {
+    return {
+      serviceID: Number(this.$route.query.serviceID),
+      operateDialogType: null,
+      delObj: {},
+      deleteDialogType: null,
+      tempCheckedKeys: [],
+      serviceForm: {
+        serviceName: '',
+        serviceType: null,
+        dataSourceID: null,
+        lifeCycleCol: '',
+        serviceDescribe: '',
+        threads: null,
+        isAsynchronous: 1,
+        datatype: null,
+        computingMethod: '',
+        validationExpression: '',
+        startTime: null,
+        stopTime: null,
+        retryCount: null,
+        loopCount: null,
+        frequencyCount: null,
+        frequencyUnit: null
+      },
+      computedTableHeight: '200px',
+      targetList: [],
+      protocolList: [],
+      nodeList: [],
+      checkedNodeKeys: [],
+      serviceAndNodeList: [],
+      dataSourceList: [],
+      checkedSourceKeys: [],
+      serviceAndSourceList: [],
+      processList: [],
+      checkedProcessKeys: [],
+      outputList: []
+    }
+  },
+  mounted() {
+    this.queryServiceByID(this.serviceID)
+    this.getDataSourceList()
+  },
+  updated() {
+    const headerHeight = 80 + 24
+    const bottomBlankHeight = 16
+    const formWrapHeight = this.$refs['formWrap'].offsetHeight
+    const tableWrapHeaderHeight = 26 + 32 + 24
+    const tableWrapPadding = 20 * 2
+    this.computedTableHeight = `calc(100vh - ${headerHeight + formWrapHeight + bottomBlankHeight + tableWrapHeaderHeight + tableWrapPadding}px)`
+  },
+  methods: {
+    editSubmitHandler() {
+      this.$refs['serviceForm'].validate(valid => {
+        if (valid) {
+          this.updateService()
+        }
+      })
+    },
+    btnAddClickHandler(flag) {
+      switch (flag) {
+        case 1:
+          this.$refs['serviceOutputTable'].handleAdd()
+          break
+        case 2:
+          this.$refs['serviceMachineTable'].handleAdd()
+          break
+        default:
+          break
+      }
+    },
+    async machineSelectionChangeHandler(selection, row) {
+      const isSelected = selection.findIndex(item => item.deployNodeID === row.deployNodeID) > -1
+      const event = isSelected ? 1 : 3
+      try {
+        const message = await this.updateServiceNode(event, row)
+        this.$message.success(message ?? '操作成功')
+      } catch (error) {
+        this.$message.error(error)
+        this.$refs['serviceMachineTable'].toggleRowSelection(row, !isSelected)
+      }
+    },
+    async getDataSourceList() {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption(ID) {
+      try {
+        const { listValues } = await myQuery(ID)
+        return listValues
+      } catch (error) {
+        this.$message.error(error)
+        return []
+      }
+    },
+    async queryServiceByID(serviceID) {
+      const serviceInfo = await myQuery(39, serviceID)
+      Object.entries(serviceInfo.listValues[0]).forEach(([key, value]) => {
+        this.serviceForm[key] = value
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service-edit {
+  margin: 0 -24px;
+  padding-bottom: 16px;
+  overflow: hidden;
+  .scrollbar {
+    height: calc(100vh - 120px);
+    padding: 0 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .service-edit-wrapper {
+      padding: 26px 24px 0 24px;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 24px;
+        &:nth-of-type(2) {
+          margin-top: 10px;
+        }
+        .manageTitle {
+          height: 32px;
+          line-height: 30px;
+        }
+        .el-button {
+          width: 64px;
+          height: 32px;
+          border: none;
+          &.btn-white {
+            background-color: #ffffff;
+            border: 1px solid #92ace2;
+            color: #2d67e3;
+          }
+          &:hover {
+            background-color: #487be8;
+            color: #ffffff;
+          }
+        }
+      }
+      .content {
+        margin: 0;
+      }
+    }
+    ::v-deep .service-form-wrapper {
+      background: #ffffff;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      .service-form {
+        > .el-row {
+          flex-wrap: wrap;
+          > .el-col {
+            .el-form-item {
+              margin-bottom: 25px;
+              .el-form-item__label {
+                padding-right: 16px;
+              }
+              .el-input,
+              .el-select {
+                width: 100%;
+                height: 32px;
+              }
+            }
+          }
+        }
+        label,
+        span,
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+          font-family: Helvetica, Microsoft YaHei;
+          font-size: 14px;
+          font-weight: 400;
+        }
+        label {
+          color: #303133;
+        }
+        input {
+          color: #101116;
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type='‘number’'] {
+            -moz-appearance: textfield !important;
+          }
+        }
+        .el-radio {
+          font-weight: 400;
+        }
+      }
+    }
+    .service-tables {
+      width: 100%;
+      display: flex;
+      margin: 0 -12px;
+      .service-table-wrapper {
+        padding-left: 12px;
+        padding-right: 12px;
+        &:nth-child(1) {
+          flex: 1 1 624px;
+        }
+        &:nth-child(2) {
+          flex: 0 1 624px;
+        }
+      }
+    }
+  }
+  .dialog-checkbox {
+    .content {
+      margin-left: 16px;
+      .el-checkbox-group {
+        margin-right: 24px;
+        .el-checkbox {
+          margin-bottom: 24px;
+          font-family: Helvetica, Microsoft YaHei;
+          color: #303133;
+        }
+      }
+    }
+  }
+  ::v-deep #dialog-form .el-select .el-input__inner {
+    width: 100%;
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/serviceManagement/serviceHome.vue

@@ -0,0 +1,363 @@
+<!--
+ * @Date: 2022-04-12 17:49:47
+ * @LastEditTime: 2022-06-13 15:22:45
+ * @LastEditors: your name
+ * @Description: 服务管理-首页
+ * have a nice day!
+-->
+
+<template>
+  <div class="service-home">
+    <div class="wrap">
+      <DataTable ref="serviceTable" data-id="2" :rows="12" width="800px" label-width="110px" :min-height="70" :is-dialog="false" @handleAdd="showCreateDialog" @handleEdit="btnEditClickHandler" />
+      <!--新增弹框-->
+      <Dialog :flag="createDialogVisible" width="878px">
+        <div class="dialog-create">
+          <div class="title">新增服务</div>
+          <main class="content">
+            <el-form ref="serviceForm" class="service-form" :model="serviceForm" :rules="serviceFormRules" label-position="right" label-width="82px" size="mini">
+              <el-row :gutter="36" type="flex">
+                <el-col :span="24">
+                  <el-form-item label="服务名称" prop="serviceName">
+                    <el-input v-model="serviceForm.serviceName" placeholder="请输入服务名称" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="类型" prop="serviceType">
+                    <el-select v-model="serviceForm.serviceType" clearable>
+                      <el-option :value="1" label="管理前端" />
+                      <el-option :value="2" label="管理后端" />
+                      <el-option :value="3" label="业务前端" />
+                      <el-option :value="4" label="业务后端" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="是否异步" label-width="114px">
+                    <el-radio-group v-model="serviceForm.isAsynchronous">
+                      <el-radio :label="0">是</el-radio>
+                      <el-radio :label="1">否</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="数据来源" prop="dataSourceID">
+                    <el-select v-model="serviceForm.dataSourceID" clearable>
+                      <el-option v-for="dataSource in dataSourceList" :key="dataSource.dataSourceID" :value="dataSource.dataSourceID" :label="dataSource.dataSourceName" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="生命周期ID键名" prop="lifeCycleCol" label-width="114px">
+                    <el-input v-model="serviceForm.lifeCycleCol" placeholder="请输入生命周期ID键名" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="采集线程" prop="threads">
+                    <el-input v-model="serviceForm.threads" type="number" placeholder="请输入采集线程数" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="数据类型" prop="datatype">
+                    <el-select v-model="serviceForm.datatype" clearable>
+                      <el-option label="JSON" :value="1" />
+                      <el-option label="XML" :value="2" />
+                      <el-option label="自定义" :value="3" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="取值规则" prop="computingMethod">
+                    <el-input v-model="serviceForm.computingMethod" placeholder="请输入取值规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="检测规则" prop="validationExpression">
+                    <el-input v-model="serviceForm.validationExpression" placeholder="请输入检测规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="启动时间" prop="startTime">
+                    <el-date-picker v-model="serviceForm.startTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="请选择启动时间" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="停止时间" prop="stopTime">
+                    <el-date-picker v-model="serviceForm.stopTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="请选择停止时间" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="失败重试次数" prop="retryCount" label-width="100px">
+                    <el-input v-model="serviceForm.retryCount" type="number" placeholder="请输入重试次数" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="循环次数" prop="loopCount">
+                    <el-input v-model="serviceForm.loopCount" type="number" placeholder="请输入循环次数" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="循环频率" prop="frequencyCount">
+                    <el-input v-model="serviceForm.frequencyCount" type="number" placeholder="请输入循环频率" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="循环频率单位" prop="frequencyUnit" label-width="100px">
+                    <el-select v-model="serviceForm.frequencyUnit" clearable>
+                      <el-option label="天" :value="24 * 60 * 60 * 1000" />
+                      <el-option label="小时" :value="60 * 60 * 1000" />
+                      <el-option label="分钟" :value="60 * 1000" />
+                      <el-option label="秒" :value="1000" />
+                      <el-option label="毫秒" :value="1" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="服务描述" prop="serviceDescribe">
+                    <el-input v-model="serviceForm.serviceDescribe" placeholder="请输入描述" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </main>
+          <div class="foot">
+            <el-button size="medium" type="primary" class="r25 r26" @click="createSubmitHandler">提交</el-button>
+            <el-button size="medium" class="r26" @click="hideCreateDialog">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { GeneralDataReception, Query } from '@/api/dataIntegration'
+// import { regular } from '@/utils/validate'
+import DataTable from '@/components/Table'
+export default {
+  name: 'ProtocolHome',
+  components: {
+    Dialog,
+    DataTable
+  },
+  data () {
+    return {
+      serviceList: [],
+      createDialogVisible: false,
+      serviceForm: {
+        serviceName: '',
+        serviceType: null,
+        dataSourceID: null,
+        lifeCycleCol: '',
+        isAsynchronous: 1,
+        threads: null,
+        datatype: null,
+        computingMethod: '',
+        validationExpression: '',
+        startTime: null,
+        stopTime: null,
+        retryCount: null,
+        loopCount: null,
+        frequencyCount: null,
+        frequencyUnit: null,
+        serviceDescribe: ''
+      },
+      serviceFormRules: {
+        serviceName: [{ required: true, message: '请输入服务名称', trigger: ['change', 'blur'] }]
+      },
+      dataSourceList: [],
+      deleteDialogVisible: false,
+      delObj: {}
+    }
+  },
+  methods: {
+    // 新增-弹框
+    showCreateDialog () {
+      this.getDataSourceList()
+      this.createDialogVisible = true
+    },
+    // 新增-提交
+    createSubmitHandler () {
+      this.$refs['serviceForm'].validate(valid => {
+        if (valid) {
+          this.createService()
+        }
+      })
+    },
+    // 新增-关闭
+    hideCreateDialog () {
+      this.$refs['serviceForm'].resetFields()
+      this.createDialogVisible = false
+    },
+    // 编辑-跳转
+    btnEditClickHandler (item) {
+      this.$router.push({
+        path: '/systemSettings/serviceEdit',
+        query: { serviceID: item.serviceID }
+      })
+    },
+    getServiceList () {
+      this.$refs['serviceTable'].getQuery()
+    },
+    async getDataSourceList () {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption (id) {
+      try {
+        const { code, returnData, message } = await Query({
+          id,
+          dataContent: []
+        })
+        if (Number(code) === 0) {
+          return returnData.listValues
+        } else {
+          this.$message.error(message ?? '失败')
+          return []
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async createService () {
+      try {
+        this.serviceForm['event'] = 1
+        const res = await GeneralDataReception({
+          serviceId: 3,
+          dataContent: JSON.stringify(this.serviceForm)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.hideCreateDialog()
+          this.getServiceList()
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+    .service-content {
+      .grid-content {
+        height: 120px;
+        background: #ffffff;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 25px;
+        margin-bottom: 24px;
+        .title {
+          font-size: 16px;
+          font-family: Helvetica;
+          font-weight: bold;
+          color: #101116;
+          white-space: nowrap;
+          max-width: 80%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          .name {
+            white-space: nowrap;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .loger {
+            width: 14px;
+            height: 14px;
+            margin-left: 24px;
+            background: url("../../../../../assets/status/ic_edit_default.png")
+              no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            position: relative;
+            top: 2px;
+          }
+          .loger:hover {
+            background: url("../../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .icon {
+          cursor: pointer;
+          font-size: 16px;
+          color: #606266;
+        }
+      }
+    }
+    .dialog-create {
+      ::v-deep .service-form {
+        display: flex;
+        flex-wrap: wrap;
+        > .el-row {
+          flex-wrap: wrap;
+          > .el-col > .el-form-item {
+            margin-bottom: 20px;
+            .el-form-item__label {
+              padding-right: 16px;
+            }
+            .el-input,
+            .el-select {
+              width: 100%;
+            }
+          }
+        }
+        label,
+        span,
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+          font-family: Helvetica, Microsoft YaHei;
+          font-size: 14px;
+          font-weight: 400;
+        }
+        label {
+          color: #303133;
+        }
+        input {
+          color: #101116;
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type="‘number’"] {
+            -moz-appearance: textfield !important;
+          }
+        }
+        .el-radio {
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/servicedeployment/servicedeploymentHome.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="servicedeployment_home">
+    <div class="wrap">
+      <DataTable
+        data-id="8"
+        :rows="12"
+        labelWidth="110px"
+        :minHeight="70"
+        width="800px"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DataTable from "@/components/Table";
+export default {
+  data() {
+    return {};
+  },
+  components: { DataTable },
+};
+</script>
+<style lang="scss" scoped>
+.servicedeployment-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/serviceoutput/serviceoutputHome.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="serviceoutput_home">
+    <div class="wrap">
+      <DataTable
+        data-id="7"
+        :rows="12"
+        labelWidth="130px"
+        :minHeight="70"
+        width="800px"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DataTable from "@/components/Table";
+export default {
+  data() {
+    return {};
+  },
+  components: { DataTable },
+};
+</script>
+<style lang="scss" scoped>
+.serviceoutput-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/sourceDataItemManagement/sourceDataItemEdit.vue

@@ -0,0 +1,662 @@
+<!--
+ * @Date: 2021-11-19 11:34:20
+ * @LastEditTime: 2022-03-02 09:41:02
+ * @LastEditors: Please set LastEditors
+ * @Description: 目标数据-基本信息
+-->
+<template>
+  <div class="dataStoreInfo">
+    <!--基本信息-->
+    <div class="airportInfoDetails-head">
+      <Search title="编辑源数据信息" :isSearch="false">
+        <button class="childBtnAn" @click="storagemod">保存</button>
+      </Search>
+      <div class="airportInfoDetails-head-content dialog-public-background">
+        <el-form :inline="true" :rules="rules" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" label-width="140px">
+          <el-form-item label="源数据名称" prop="dataName">
+            <el-input size="small" maxlength="128" placeholder="请输入源数据名称" v-model="ruleForm.dataName"></el-input>
+          </el-form-item>
+          <el-form-item label="数据格式" prop="dataType">
+            <el-select size="small" style="width: 100%" v-model="ruleForm.dataType" placeholder="请选择数据类型">
+              <el-option label="JSON" value="1"></el-option>
+              <el-option label="XML" value="2"></el-option>
+              <el-option label=" REGULA" value="3"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="目标数据描述">
+            <el-input maxlength="128" placeholder="请输入描述" type="textarea" :rows="1" v-model="ruleForm.dataDescribe" style="width: 575px"></el-input>
+          </el-form-item>
+          <el-row>
+            <el-col :span="10.5">
+              <el-form-item label="取值方法">
+                <el-input maxlength="128" placeholder="请输入取值方法" type="textarea" :rows="1" v-model="ruleForm.computingMethod" style="width: 575px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10.5">
+
+              <el-form-item label="检测方法">
+                <el-input maxlength="128" placeholder="请输入检测方法" type="textarea" :rows="1" v-model="ruleForm.validationExpression" style="width: 575px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <!--数据项信息-->
+    <div class="airportInfoDetails-content">
+      <Search style="padding-left: 24px" :isChild="true" title="数据项信息" @clearSearchData="clearSearchData" @getSearchData="getSearchData">
+        <button @click="addStore" class="childBtnAdd">新增</button>
+      </Search>
+      <div class="table-info">
+        <el-table :data="posArr" row-key="ItemID" :row-class-name="tabRowClassName" height="56vh" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" class="table" style="width: 100%" :header-cell-style="{ 'text-align': 'left' }" :cell-style="{ 'text-align': 'left' }">
+          <el-table-column prop="ItemName" label="数据项名称"></el-table-column>
+          <!-- <el-table-column prop="itemCode" label="数据项标识"></el-table-column> -->
+          <el-table-column prop="dataTypeText" label="数据类型"></el-table-column>
+          <el-table-column prop="ItemDescribe" label="数据项描述"></el-table-column>
+          <el-table-column prop="computingMethod" label="取值方法"></el-table-column>
+          <el-table-column prop="computingExpression" label="取值表达式"></el-table-column>
+          <el-table-column prop="outputIdentifier" label="输出标识符"></el-table-column>
+          <el-table-column prop="isMustText" label="是否必填"></el-table-column>
+          <el-table-column prop="isKeyText" label="是否唯一"></el-table-column>
+          <el-table-column prop="isSpliteText" label="多条拆分"></el-table-column>
+          <el-table-column label="操作">
+            <div slot-scope="scope" style="
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              ">
+              <el-button class="fut" size="small" @click="handleAdd(scope.$index, scope.row)">新增</el-button>
+              <el-button class="fut" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              <el-button class="futdel" size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            </div>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag">
+      <div class="airportInfoDialog">
+        <div class="del-title">删除存储数据项</div>
+        <div class="content er">
+          <div class="log"></div>
+          是否确认删除{{ rmObj.name }}？
+        </div>
+        <div class="foot right t30" style="background: #ffffff">
+          <el-button size="small" @click="remove" class="r25 r26" type="danger">删除</el-button>
+          <el-button size="medium" class="r26" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+    <!--新增/编辑存储数据项弹框-->
+    <Dialog width="748px" customClass="dataStoreInfoDialog" :flag="addFlag">
+      <div class="dialog-public-background">
+        <div class="flx">
+          {{ msgType === 1 ? "新增" : "编辑" }}数据项信息
+        </div>
+        <div class="contenter">
+          <el-form :model="dataForm" :rules="dataRules" ref="dataForm" label-width="130px" class="demo-dataForm">
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item class="flex1" label="所属数据项" prop="parentID">
+                  <el-cascader size="small" style="width: 100%" placeholder="请选择所属数据项" v-model="dataForm.parentIDs" :options="posArr" ref="cascader" :props="{ label: 'ItemName', value: 'ItemID',checkStrictly: true  }" @change="handleChange">
+                  </el-cascader>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item class="flex1" label="数据项名称" prop="ItemName">
+                  <el-input maxlength="128" size="small" placeholder="请输入数据项名称" v-model="dataForm.ItemName"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item class="flex1" label="数据类型" prop="dataType">
+                  <el-select size="small" style="width: 100%" v-model="dataForm.dataType" placeholder="请选择数据类型">
+                    <el-option v-for="item in optiondata" :key="item.id" :label="item.name" :value="item.id">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item class="flex1" label="输出标识符" prop="outputIdentifier">
+                  <el-input maxlength="128" size="small" placeholder="请输入输出标识符" v-model="dataForm.outputIdentifier"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item class="flex1" label="取值方法" prop="computingMethod">
+                  <el-input maxlength="128" size="small" placeholder="请输入取值方法" v-model="dataForm.computingMethod"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <el-form-item label="取值表达式">
+                  <el-input v-model="dataForm.computingExpression" size="medium" type="textarea" :rows="2" placeholder="请输入取值表达式" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="数据项描述">
+                  <el-input v-model="dataForm.ItemDescribe" size="medium" type="textarea" :rows="2" placeholder="请输入数据项描述" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item class="flexer" label="允许空值">
+                  <el-radio v-model="dataForm.isMust" label="1">是</el-radio>
+                  <el-radio v-model="dataForm.isMust" label="0">否</el-radio>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item class="flexer" label="唯一项标志">
+                  <el-radio v-model="dataForm.isKey" label="1">是</el-radio>
+                  <el-radio v-model="dataForm.isKey" label="0">否</el-radio>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item class="flexer" label="多条拆分">
+                  <el-radio v-model="dataForm.isSplite" label="1">是</el-radio>
+                  <el-radio v-model="dataForm.isSplite" label="0">否</el-radio>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="foot center" style="padding-right: 35px">
+          <el-button size="small" type="primary" @click="addSubmit('dataForm')" class="r25 r26">提交</el-button>
+          <el-button size="small" class="r26" @click="resetForm('dataForm')">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Search from "@/layout/components/Search/index.vue";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
+import { translateDataToTreeAll, findarrays } from "@/utils/validate";
+export default {
+  name: "dataStoreInfo",
+  components: { Search, Dialog },
+  data () {
+    return {
+      ruleForm: {
+        //基本信息表单
+        dataName: "",
+        dataType: "",
+        dataDescribe: "",
+        computingMethod: "",
+        validationExpression: ""
+      },
+      rules: {
+        //基本信息验证
+        dataName: [
+          { required: true, message: "请输入目标数据名", trigger: "blur" },
+        ],
+        dataType: [
+          { required: true, message: "请选择数据格式", trigger: "change" },
+        ],
+      },
+      posArr: [], //存储数据项数据
+      posArrCopy: [], //临时存放数据
+      rmObj: {}, //选中的表格信息
+      rmIndex: null, //选中的表格序号
+      flag: false, //删除弹框
+      msgType: 1, //新增or编辑
+      dataForm: {},
+      dataRules: {
+        //数据项表单验证
+        ItemName: [
+          { required: true, message: "请输入数据项名称", trigger: "blur" },
+        ],
+        code: [
+          { required: true, message: "请输入数据来源表达式", trigger: "blur" },
+        ],
+        dataType: [{ required: true, message: "请选数据类型", trigger: "change" }],
+      },
+      addFlag: false, //数据项弹框,
+      dataStoreid: "", //修改id，
+      analyList: [], //遍历后的确定数据
+      dataitem: [], //所属数据项
+      optiondata: [
+        //数据类型
+        {
+          name: "字符",
+          id: 1,
+        },
+        {
+          name: "数字",
+          id: 2,
+        },
+        {
+          name: "日期",
+          id: 3,
+        },
+        {
+          name: "时间",
+          id: 4,
+        },
+      ],
+      sourceList: [], //取值来源
+      tableData: [],
+      deleID: "", //删除id
+    };
+  },
+  created () {
+    const { id } = this.$route.query;
+    this.dataStoreid = id;
+    this.storagedetails();
+    this.getDataList();
+  },
+  methods: {
+    tabRowClassName ({ row, rowIndex }) {
+      if (row.index) {
+        let index = row.index + 1;
+        if (index % 2 == 0) {
+          return "warning-row";
+        } else {
+          return "warning-rows";
+        }
+      }
+    },
+    //数据项信息
+    // async Dataitem() {
+    //   let params = {
+    //     sourceId: this.sourceider,
+    //   };
+    //   const result = await anaListmod(params);
+    //   if (result.code == 0) {
+    //     this.sourceList = result.returnData;
+    //     this.tableData = result.returnData;
+    //   }
+    // },
+    //详情查询
+    async storagedetails () {
+      let params = {
+        id: 18,
+        dataContent: [this.dataStoreid],
+      };
+      const result = await Query(params);
+      if (result.code == 0) {
+        result.returnData.forEach((element) => {
+          element.dataType = element.dataType + "";
+        });
+        this.ruleForm = result.returnData[0];
+      } else {
+        this.$message.error(res.message ?? "失败");
+      }
+    },
+
+    //保存主数据
+    async storagemod () {
+      this.ruleForm["operate"] = "2";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "4",
+          dataContent: JSON.stringify(this.ruleForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    //获取数据项列表
+    async getDataList () {
+      let params = {
+        id: 16,
+        dataContent: [this.dataStoreid],
+      };
+      const result = await Query(params);
+      if (result.code == 0) {
+        console.log(result);
+        result.returnData.forEach(item => {
+          if (item.dataType == 1) {
+            item['dataTypeText'] = "字符串"
+          }
+          else if (item.dataType == 2) {
+            item['dataTypeText'] = "数字"
+          }
+          else if (item.dataType == 3) {
+            item['dataTypeText'] = "时间"
+          }
+          else if (item.dataType == 4) {
+            item['dataTypeText'] = "日期"
+          }
+          else {
+            item['dataTypeText'] = "其他"
+          }
+          if (item.isKey == 1) {
+            item['isKeyText'] = "是"
+          }
+          else {
+            item['isKeyText'] = "否"
+          }
+          if (item.isMust == 1) {
+            item['isMustText'] = "是"
+          }
+          else {
+            item['isMustText'] = "否"
+          }
+          if (item.isSplite == 1) {
+            item['isSpliteText'] = "是"
+          }
+          else {
+            item['isSpliteText'] = "否"
+          }
+        })
+        this.posArr = translateDataToTreeAll(
+          result.returnData,
+          "parentID",
+          "ItemID"
+        );
+        this.posArr.forEach((res, index) => {
+          res.index = index + 1;
+          if (res.children.length < 1) {
+            delete res.children
+          }
+        });
+        this.posArrCopy = JSON.parse(JSON.stringify(this.posArr));
+      } else {
+        this.$message.error(res.message ?? "失败");
+      }
+    },
+    //搜索
+    getSearchData (val) {
+      let that = this;
+      that.storagedetails().then(function (data) {
+        if (val) {
+          that.posArr = that.rebuildData(val, that.posArr);
+        } else {
+          that.storagedetails();
+        }
+      });
+    },
+    //根据name字段模糊匹配树状结构数据，最后将处理好的数据返回出来
+    rebuildData (value, arr) {
+      if (!arr) {
+        return []
+      }
+      const newarr = [];
+      arr.forEach(element => {
+        // indexOf用来判读当前节点name字段是否包含所搜索的字符串value
+        // 返回值：包含则返回索引值，反之返回-1
+        if (element.ItemName.indexOf(value) > -1) {
+          const ab = this.rebuildData(value, element.children);
+          const obj = {
+            ...element,
+            children: ab
+          }
+          newarr.push(obj);
+        } else {
+          // 判断当前节点知否有子节点，并且子节点中有数据，有数据继续递归查找
+          if (element.children && element.children.length > 0) {
+            const ab = this.rebuildData(value, element.children);
+            const obj = {
+              ...element,
+              children: ab
+            };
+            if (ab && ab.length > 0) {
+              newarr.push(obj);
+            }
+          }
+        }
+      });
+      return newarr
+    },
+    //清空搜索
+    clearSearchData () {
+      this.posArr = this.posArrCopy;
+    },
+    //删除信息
+    handleDelete (index, row) {
+      this.rmObj = row;
+      this.rmIndex = index;
+      this.flag = true;
+      this.deleID = row.ItemID;
+    },
+    //删除
+    async remove () {
+      this.rmObj["operate"] = "3";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "5",
+          dataContent: JSON.stringify(this.rmObj),
+        });
+        if (res.code === "0") {
+          this.removeDialogVisible = false;
+          this.$message.success("删除成功");
+          this.getDataList()
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+      this.flag = false;
+    },
+    //新增数据项
+    addStore () {
+      this.msgType = 1;
+      this.addFlag = true;
+    },
+    //点击列表新增按钮
+    handleAdd (index, row) {
+      this.msgType = 1;
+      this.addFlag = true;
+      this.dataForm.parentID = row.ItemID;
+      this.dataForm.parentIDs = [row.ItemID];
+    },
+    //点击列表编辑按钮
+    handleEdit (index, row) {
+      this.msgType = 2;
+      this.addFlag = true;
+      this.dataForm = row;
+      this.dataForm.parentIDs = [row.parentID];
+      this.dataForm.isKey = this.dataForm.isKey + ""
+      this.dataForm.isMust = this.dataForm.isMust + ""
+      this.dataForm.isSplite = this.dataForm.isSplite + ""
+    },
+    handleChange (data) {
+      this.dataForm.parentID = data[data.length - 1]
+    },
+    //数据项-提交
+    async addSubmit (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.dataForm.ItemID) {
+            this.dataForm["operate"] = "2";
+          }
+          else {
+            this.dataForm["operate"] = "1";
+          }
+          this.dataForm["sourceDataID"] = this.dataStoreid;
+          this.saveData();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //数据项保存
+    async saveData () {
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "5",
+          dataContent: JSON.stringify(this.dataForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+          this.getDataList();
+          this.resetForm("dataForm");
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+
+    },
+    //数据项-取消
+    resetForm (formName) {
+      this.addFlag = false;
+      this.dataForm = {};
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataStoreInfo {
+  ::v-deep .warning-row {
+    background: #f0f3f7;
+  }
+  ::v-deep .warning-rows {
+    background: #ffffff;
+  }
+  .log {
+    width: 26px;
+    height: 26px;
+    background: #eb2f3b;
+    border-radius: 50%;
+    margin-right: 15px;
+    background: url("../../../../../assets/index/ic_close_hint.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .fut {
+    width: 48px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff;
+    border: 1px solid #9ebbf7;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #2d67e3;
+  }
+  .futdel {
+    width: 48px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #eb2f3b;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .contenter {
+    padding: 0 24px 0 24px;
+  }
+  .flexer {
+    margin-left: 0;
+  }
+  // ::v-deep .cell {
+  //   display: flex;
+  // }
+  .er {
+    display: flex;
+    align-items: center;
+  }
+  .airportInfoDetails-head {
+    padding: 32px 40px 44px 24px;
+    background: #ffffff;
+    box-shadow: 8px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    .airportInfoDetails-head-content {
+      margin-top: 48px;
+      .el-input {
+        min-width: 188px;
+      }
+      .el-form--inline .el-form-item {
+        margin-bottom: 0;
+        margin-right: 48px;
+      }
+    }
+  }
+  .airportInfoDetails-content {
+    // height: 56vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding: 0 0 0 0;
+    background: #dfe3ea;
+    // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    margin-top: 10px;
+    .table-info {
+      margin-top: 8px;
+      ::v-deep .table {
+        .el-table__header {
+          .has-gutter {
+            color: #101116;
+            .is-leaf {
+              height: 40px;
+              background: #ffffff;
+              &:first-child {
+                border-top-left-radius: 4px;
+              }
+            }
+            .gutter {
+              background: #ffffff;
+              border-top-right-radius: 4px;
+            }
+          }
+        }
+        td.el-table__cell,
+        th.el-table__cell.is-leaf {
+          border-bottom: none;
+        }
+        .el-table__cell {
+          padding: 16px 0;
+          // background: #f5f7fa;
+        }
+        .el-table__row--level-1 {
+          td {
+            background: #dfe4ec;
+          }
+        }
+        tr {
+          transition: all 0.3s;
+          &:hover {
+            td {
+              background-color: #cbd7ee;
+            }
+          }
+        }
+        &::before {
+          width: 0;
+        }
+      }
+    }
+  }
+  ::v-deep .dataStoreInfoDialog {
+    .demo-dataForm {
+      .noleft {
+        .el-form-item__content {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+          width: 300px;
+          .el-input__suffix {
+            right: 23px;
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .el-input__suffix {
+    right: 15px;
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/sourceDataItemManagement/sourceDataItemHome.vue

@@ -0,0 +1,316 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-04-12 17:49:47
+ * @LastEditTime: 2022-04-13 16:17:37
+ * @LastEditors: your name
+ * @Description: 源数据管理-首页
+ * have a nice day!
+-->
+
+<template>
+  <div class="sourceDataItem-home">
+    <div class="wrap">
+      <!-- <div class="protocol-header flex">
+        <div class="manageTitle">源数据管理</div>
+        <div class="addBtn">
+          <el-button class="button-white" size="small" @click="showAddDialog()"
+            >新增</el-button
+          >
+        </div>
+      </div>
+      <div class="protocol-content">
+        <el-row :gutter="24">
+          <el-col v-for="item in dataList" :key="item.sourceDataID" :span="4">
+            <div class="grid-content">
+              <div class="head-line"></div>
+              <div class="grid-content-hand flex">
+                <div class="title flex-wrap">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    :content="item.dataName"
+                    placement="bottom"
+                  >
+                    <div class="name">{{ item.dataName }}</div>
+                  </el-tooltip>
+                  <i class="loger" @click="showEditDialog(item)" />
+                </div>
+                <i class="el-icon-close icon" @click="showRemoveDialog(item)" />
+              </div>
+              <div class="disc">{{ item.dataTypeText }}</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div> -->
+      <!--新增/编辑-->
+      <Dialog :flag="editDialogVisible" width="466px" :show-flag="true">
+        <div class="airportInfoDialog dialog-public-background">
+          <div class="title">{{ editDialogTitle }}</div>
+          <div class="content">
+            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
+              <el-form-item label="源数据名称" prop="dataName">
+                <el-input v-model="ruleForm.dataName" size="small" placeholder="请输入源数据名称" />
+              </el-form-item>
+              <el-form-item label="数据格式" prop="dataType">
+                <el-select v-model="ruleForm.dataType" size="small" placeholder="请选择数据格式">
+                  <el-option label="JSON" value="1"></el-option>
+                  <el-option label="XML" value="2"></el-option>
+                  <el-option label=" REGULA" value="3"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="取值方法">
+                <el-input v-model="ruleForm.computingMethod" size="small" type="textarea" :rows="2" placeholder="请输入取值方法" />
+              </el-form-item>
+              <el-form-item label="检测方法">
+                <el-input v-model="ruleForm.validationExpression" size="small" type="textarea" :rows="2" placeholder="请输入检测方法" />
+              </el-form-item>
+              <el-form-item label="源数据描述">
+                <el-input v-model="ruleForm.dataDescribe" size="small" type="textarea" :rows="2" placeholder="请输入描述" />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="foot center t30">
+            <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
+            <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+      <!--删除弹框-->
+      <Dialog :flag="removeDialogVisible">
+        <div class="airportInfoDialog">
+          <div class="del-title">删除协议</div>
+          <div class="content er">
+            <div class="log">是否确认删除{{ rmObj.protocolName }}？</div>
+          </div>
+          <div class="DelFoot right t30">
+            <el-button size="medium" class="r25 r26" type="danger" @click="removeSubmit()">删除</el-button>
+            <el-button size="medium" class="r26" @click="removeDialogVisible = false">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
+
+export default {
+  name: "ProtocolHome",
+  components: { Dialog },
+  data () {
+    return {
+      dataList: [],
+      removeDialogVisible: false,
+      rmObj: {},
+      editDialogVisible: false,
+      editDialogTitle: "目标数据新增",
+      ruleForm: {
+        // 信息表单
+        dataName: "",
+        dataDescribe: "",
+        computingMethod: "",
+        validationExpression: "",
+        dataType: "",
+      },
+      rules: {
+        // 机器信息表单验证
+        dataName: [
+          { required: true, message: "请输入源数据名称", trigger: "blur" },
+        ],
+        dataType: [
+          { required: true, message: "请选择数据格式", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created () {
+    this.getList();
+  },
+  methods: {
+    async getList () {
+      try {
+        const res = await Query({
+          id: 4,
+          dataContent: [],
+        });
+        if (res.code === "0") {
+          res.returnData.forEach((element) => {
+            if (element.dataType == 1) {
+              element["dataTypeText"] = "JSON";
+            } else if (element.dataType == 2) {
+              element["dataTypeText"] = "XML";
+            } else if (element.dataType == 3) {
+              element["dataTypeText"] = "REGULA";
+            } else {
+              element["dataTypeText"] = "其他";
+            }
+          });
+          this.dataList = res.returnData;
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    // 新增-跳转
+    showAddDialog () {
+      this.editDialogTitle = "新增源数据";
+      this.editDialogVisible = true;
+    },
+    // 编辑-跳转
+    showEditDialog (item) {
+      this.$router.push({
+        path: "/systemSettings/sourceDataItemEdit",
+        query: { id: item.sourceDataID },
+      });
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.addSubmit();
+          this.resetForm("ruleForm");
+        }
+      });
+    },
+    async addSubmit () {
+      this.ruleForm["operate"] = "1";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "4",
+          dataContent: JSON.stringify(this.ruleForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+          this.getList();
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    // 删除-弹框
+    showRemoveDialog (item) {
+      this.rmObj = item;
+      this.removeDialogVisible = true;
+    },
+    // 确认删除
+    async removeSubmit () {
+      this.rmObj["operate"] = "3";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "4",
+          dataContent: JSON.stringify(this.rmObj),
+        });
+        if (res.code === "0") {
+          this.removeDialogVisible = false;
+          this.$message.success("删除成功");
+          this.getList();
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    // 重置
+    resetForm (formName) {
+      this.ruleForm = {};
+      this.$refs[formName].resetFields();
+      this.editDialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sourceDataItem-home {
+  .wrap {
+    padding: 16px 0;
+    .protocol-header {
+      line-height: 32px;
+      font-size: 14px;
+      .button-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+    .protocol-content {
+      .grid-content {
+        height: 144px;
+        background: #ffffff;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 25px;
+        margin-bottom: 24px;
+        position: relative;
+        .head-line {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 4px;
+          background: #2d67e3;
+          border-radius: 4px;
+        }
+        .disc {
+          position: absolute;
+          bottom: 25px;
+          left: 25px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #101116;
+        }
+        .title {
+          font-size: 16px;
+          font-family: Helvetica;
+          font-weight: bold;
+          color: #101116;
+          white-space: nowrap;
+          max-width: 80%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          .name {
+            white-space: nowrap;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .loger {
+            width: 14px;
+            height: 14px;
+            margin-left: 24px;
+            background: url("../../../../../assets/status/ic_edit_default.png")
+              no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            position: relative;
+            top: 2px;
+          }
+          .loger:hover {
+            background: url("../../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .icon {
+          cursor: pointer;
+          font-size: 16px;
+          color: #606266;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/sourceservice/sourceserviceHome.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="sourceservice_home">
+    <div class="wrap">
+      <DataTable
+        data-id="6"
+        :rows="12"
+        labelWidth="110px"
+        :showOverflowTooltip="true"
+        :minHeight="70"
+        width="800px"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DataTable from "@/components/Table";
+export default {
+  data() {
+    return {};
+  },
+  components: { DataTable },
+};
+</script>
+<style lang="scss" scoped>
+.sourceservice-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/targetDataManagement/targetDataEdit.vue

@@ -0,0 +1,651 @@
+<!--
+ * @Date: 2021-11-19 11:34:20
+ * @LastEditTime: 2022-03-02 09:41:02
+ * @LastEditors: Please set LastEditors
+ * @Description: 目标数据-基本信息
+-->
+<template>
+  <div class="dataStoreInfo">
+    <!--基本信息-->
+    <div class="airportInfoDetails-head">
+      <Search title="编辑目标数据信息" :isSearch="false">
+        <button class="childBtnAn" @click="storagemod">保存</button>
+      </Search>
+      <div class="airportInfoDetails-head-content dialog-public-background">
+        <el-form :inline="true" :rules="rules" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" label-width="140px">
+          <el-form-item label="目标数据名" prop="tdataName">
+            <el-input size="small" maxlength="128" placeholder="请输入目标数据名" v-model="ruleForm.tdataName"></el-input>
+          </el-form-item>
+          <el-form-item label="数据类型" prop="datatype">
+            <el-select size="small" style="width: 100%" v-model="ruleForm.datatype" placeholder="请选择数据类型">
+              <el-option label="字符串" value="1"></el-option>
+              <el-option label="数字" value="2"></el-option>
+              <el-option label="时间" value="3"></el-option>
+              <el-option label="日期" value="4"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="目标数据事件标识" prop="eventID">
+            <el-input size="small" maxlength="128" placeholder="请输入目标数据事件标识" v-model="ruleForm.eventID"></el-input>
+          </el-form-item>
+          <el-row>
+            <el-form-item label="目标数据描述">
+              <el-input maxlength="128" placeholder="请输入描述" type="textarea" :rows="1" v-model="ruleForm.dataDescribe" style="width: 575px"></el-input>
+            </el-form-item>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <!--数据项信息-->
+    <div class="airportInfoDetails-content">
+      <Search style="padding-left: 24px" :isChild="true" title="数据项信息" @clearSearchData="clearSearchData" @getSearchData="getSearchData">
+        <button @click="addStore" class="childBtnAdd">新增</button>
+      </Search>
+      <div class="table-info">
+        <el-table :data="posArr" row-key="ItemID" :row-class-name="tabRowClassName" height="56vh" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" class="table" style="width: 100%" :header-cell-style="{ 'text-align': 'left' }" :cell-style="{ 'text-align': 'left' }">
+          <el-table-column prop="ItemName" label="数据项名称"></el-table-column>
+          <!-- <el-table-column prop="itemCode" label="数据项标识"></el-table-column> -->
+          <el-table-column prop="dataTypeText" label="数据类型"></el-table-column>
+          <el-table-column prop="ItemDescribe" label="数据项描述"></el-table-column>
+          <el-table-column prop="computingExpression" label="数据来源表达式"></el-table-column>
+          <el-table-column prop="isMustText" label="是否必填"></el-table-column>
+          <el-table-column prop="isKeyText" label="是否唯一"></el-table-column>
+          <el-table-column prop="isSpliteText" label="多条拆分"></el-table-column>
+          <el-table-column label="操作">
+            <div slot-scope="scope" style="
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              ">
+              <el-button class="fut" size="small" @click="handleAdd(scope.$index, scope.row)">新增</el-button>
+              <el-button class="fut" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              <el-button class="futdel" size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            </div>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag">
+      <div class="airportInfoDialog">
+        <div class="del-title">删除存储数据项</div>
+        <div class="content er">
+          <div class="log"></div>
+          是否确认删除{{ rmObj.name }}？
+        </div>
+        <div class="foot right t30" style="background: #ffffff">
+          <el-button size="small" @click="remove" class="r25 r26" type="danger">删除</el-button>
+          <el-button size="medium" class="r26" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+    <!--新增/编辑存储数据项弹框-->
+    <Dialog width="450px" customClass="dataStoreInfoDialog" :flag="addFlag">
+      <div class="dialog-public-background">
+        <div class="flx">
+          {{ msgType === 1 ? "新增" : "编辑" }}数据项信息
+        </div>
+        <div class="contenter">
+          <el-form :model="dataForm" :rules="dataRules" ref="dataForm" label-width="130px" class="demo-dataForm">
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <el-form-item class="flex1" label="所属数据项" prop="parentID">
+                  <el-cascader size="small" style="width: 100%" placeholder="请选择所属数据项" v-model="dataForm.parentIDs" :options="posArr" ref="cascader" :props="{ label: 'ItemName', value: 'ItemID',checkStrictly: true  }" @change="handleChange">
+                  </el-cascader>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <el-form-item class="flex1" label="数据项名称" prop="ItemName">
+                  <el-input maxlength="128" size="small" placeholder="请输入数据项名称" v-model="dataForm.ItemName"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <el-form-item class="flex1" label="数据类型" prop="dataType">
+                  <el-select size="small" style="width: 100%" v-model="dataForm.dataType" placeholder="请选择数据类型">
+                    <el-option v-for="item in optiondata" :key="item.id" :label="item.name" :value="item.id">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <el-form-item class="flex1" label="数据来源表达式" prop="computingExpression">
+                  <el-input maxlength="128" size="small" placeholder="请输入数据来源表达式" v-model="dataForm.computingExpression"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <el-form-item class="flexer" label="允许空值">
+                  <el-radio v-model="dataForm.isMust" label="1">是</el-radio>
+                  <el-radio v-model="dataForm.isMust" label="0">否</el-radio>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="flexer" label="唯一项标志">
+                  <el-radio v-model="dataForm.isKey" label="1">是</el-radio>
+                  <el-radio v-model="dataForm.isKey" label="0">否</el-radio>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item class="flexer" label="多条拆分">
+                  <el-radio v-model="dataForm.isSplite" label="1">是</el-radio>
+                  <el-radio v-model="dataForm.isSplite" label="0">否</el-radio>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="24">
+                <el-form-item label="数据项描述">
+                  <el-input v-model="dataForm.ItemDescribe" size="medium" type="textarea" :rows="2" placeholder="请输入描述" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="foot center" style="padding-right: 35px">
+          <el-button size="small" type="primary" @click="addSubmit('dataForm')" class="r25 r26">提交</el-button>
+          <el-button size="small" class="r26" @click="resetForm('dataForm')">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Search from "@/layout/components/Search/index.vue";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
+import { translateDataToTreeAll, findarrays } from "@/utils/validate";
+export default {
+  name: "dataStoreInfo",
+  components: { Search, Dialog },
+  data () {
+    return {
+      ruleForm: {
+        //基本信息表单
+        tdataName: "",
+        eventID: "",
+        datatype: "",
+        dataDescribe: "",
+      },
+      rules: {
+        //基本信息验证
+        tdataName: [
+          { required: true, message: "请输入目标数据名", trigger: "blur" },
+        ],
+        eventID: [
+          {
+            required: true,
+            message: "请输入目标数据事件标识",
+            trigger: "blur",
+          },
+        ],
+        datatype: [
+          { required: true, message: "请选择数据类型", trigger: "change" },
+        ],
+      },
+      posArr: [], //存储数据项数据
+      posArrCopy: [], //临时存放数据
+      rmObj: {}, //选中的表格信息
+      rmIndex: null, //选中的表格序号
+      flag: false, //删除弹框
+      msgType: 1, //新增or编辑
+      dataForm: {},
+      dataRules: {
+        //数据项表单验证
+        ItemName: [
+          { required: true, message: "请输入数据项名称", trigger: "blur" },
+        ],
+        computingExpression: [
+          { required: true, message: "请输入数据来源表达式", trigger: "blur" },
+        ],
+        dataType: [{ required: true, message: "请选数据类型", trigger: "change" }],
+      },
+      addFlag: false, //数据项弹框,
+      dataStoreid: "", //修改id，
+      analyList: [], //遍历后的确定数据
+      dataitem: [], //所属数据项
+      optiondata: [
+        //数据类型
+        {
+          name: "字符",
+          id: 1,
+        },
+        {
+          name: "数字",
+          id: 2,
+        },
+        {
+          name: "日期",
+          id: 3,
+        },
+        {
+          name: "时间",
+          id: 4,
+        },
+      ],
+      sourceList: [], //取值来源
+      tableData: [],
+      deleID: "", //删除id
+    };
+  },
+  created () {
+    const { id } = this.$route.query;
+    this.dataStoreid = id;
+    this.storagedetails();
+    this.getDataList();
+  },
+  methods: {
+    tabRowClassName ({ row, rowIndex }) {
+      if (row.index) {
+        let index = row.index + 1;
+        if (index % 2 == 0) {
+          return "warning-row";
+        } else {
+          return "warning-rows";
+        }
+      }
+    },
+    //数据项信息
+    // async Dataitem() {
+    //   let params = {
+    //     sourceId: this.sourceider,
+    //   };
+    //   const result = await anaListmod(params);
+    //   if (result.code == 0) {
+    //     this.sourceList = result.returnData;
+    //     this.tableData = result.returnData;
+    //   }
+    // },
+    //详情查询
+    async storagedetails () {
+      let params = {
+        id: 17,
+        dataContent: [this.dataStoreid],
+      };
+      const result = await Query(params);
+      if (result.code == 0) {
+        result.returnData.forEach((element) => {
+          element.datatype = element.datatype + "";
+        });
+        this.ruleForm = result.returnData[0];
+      } else {
+        this.$message.error(res.message ?? "失败");
+      }
+    },
+
+    //保存
+    async storagemod () {
+      this.ruleForm["operate"] = "2";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "7",
+          dataContent: JSON.stringify(this.ruleForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    async getDataList () {
+      let params = {
+        id: 15,
+        dataContent: [this.dataStoreid],
+      };
+      const result = await Query(params);
+      if (result.code == 0) {
+        console.log(result);
+        result.returnData.forEach(item => {
+          if (item.dataType == 1) {
+            item['dataTypeText'] = "字符串"
+          }
+          else if (item.dataType == 2) {
+            item['dataTypeText'] = "数字"
+          }
+          else if (item.dataType == 3) {
+            item['dataTypeText'] = "时间"
+          }
+          else if (item.dataType == 4) {
+            item['dataTypeText'] = "日期"
+          }
+          else {
+            item['dataTypeText'] = "其他"
+          }
+          if (item.isKey == 1) {
+            item['isKeyText'] = "是"
+          }
+          else {
+            item['isKeyText'] = "否"
+          }
+          if (item.isMust == 1) {
+            item['isMustText'] = "是"
+          }
+          else {
+            item['isMustText'] = "否"
+          }
+          if (item.isSplite == 1) {
+            item['isSpliteText'] = "是"
+          }
+          else {
+            item['isSpliteText'] = "否"
+          }
+        })
+        this.posArr = translateDataToTreeAll(
+          result.returnData,
+          "parentID",
+          "ItemID"
+        );
+        this.posArr.forEach((res, index) => {
+          res.index = index + 1;
+          // if(res.children.length<1){
+          //   delete res.children
+          // }
+        });
+        this.posArrCopy = JSON.parse(JSON.stringify(this.posArr));
+      } else {
+        this.$message.error(res.message ?? "失败");
+      }
+    },
+    //搜索
+    getSearchData (val) {
+      let that = this;
+      that.storagedetails().then(function (data) {
+        if (val) {
+          that.posArr = that.rebuildData(val, that.posArr);
+        } else {
+          that.storagedetails();
+        }
+      });
+    },
+    //根据name字段模糊匹配树状结构数据，最后将处理好的数据返回出来
+    rebuildData (value, arr) {
+      if (!arr) {
+        return []
+      }
+      const newarr = [];
+      arr.forEach(element => {
+        // indexOf用来判读当前节点name字段是否包含所搜索的字符串value
+        // 返回值：包含则返回索引值，反之返回-1
+        if (element.ItemName.indexOf(value) > -1) {
+          const ab = this.rebuildData(value, element.children);
+          const obj = {
+            ...element,
+            children: ab
+          }
+          newarr.push(obj);
+        } else {
+          // 判断当前节点知否有子节点，并且子节点中有数据，有数据继续递归查找
+          if (element.children && element.children.length > 0) {
+            const ab = this.rebuildData(value, element.children);
+            const obj = {
+              ...element,
+              children: ab
+            };
+            if (ab && ab.length > 0) {
+              newarr.push(obj);
+            }
+          }
+        }
+      });
+      return newarr
+    },
+    //清空搜索
+    clearSearchData () {
+      this.posArr = this.posArrCopy;
+    },
+    //删除信息
+    handleDelete (index, row) {
+      this.rmObj = row;
+      this.rmIndex = index;
+      this.flag = true;
+      this.deleID = row.ItemID;
+    },
+    //删除
+    async remove () {
+      this.rmObj["operate"] = "3";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "8",
+          dataContent: JSON.stringify(this.rmObj),
+        });
+        if (res.code === "0") {
+          this.removeDialogVisible = false;
+          this.$message.success("删除成功");
+          this.getDataList()
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+      this.flag = false;
+    },
+    //新增数据项
+    addStore () {
+      this.msgType = 1;
+      this.addFlag = true;
+    },
+    handleAdd (index, row) {
+      this.msgType = 1;
+      this.addFlag = true;
+      this.dataForm.parentID = row.ItemID;
+      this.dataForm.parentIDs = [row.ItemID];
+    },
+    handleEdit (index, row) {
+      this.msgType = 2;
+      this.addFlag = true;
+      this.dataForm = row;
+      this.dataForm.parentIDs = [row.parentID];
+      this.dataForm.isKey = this.dataForm.isKey + ""
+      this.dataForm.isMust = this.dataForm.isMust + ""
+      this.dataForm.isSplite = this.dataForm.isSplite + ""
+    },
+    handleChange (data) {
+      this.dataForm.parentID = data[data.length - 1]
+    },
+    //数据项-提交
+    async addSubmit (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.dataForm.ItemID) {
+            this.dataForm["operate"] = "2";
+          }
+          else {
+            this.dataForm["operate"] = "1";
+          }
+          this.dataForm["targetdataID"] = this.dataStoreid;
+          this.saveData();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    async saveData () {
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "8",
+          dataContent: JSON.stringify(this.dataForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+          this.getDataList();
+          this.resetForm("dataForm");
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+
+    },
+    //存储数据项-取消
+    resetForm (formName) {
+      this.addFlag = false;
+      this.dataForm = {};
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataStoreInfo {
+  ::v-deep .warning-row {
+    background: #f0f3f7;
+  }
+  ::v-deep .warning-rows {
+    background: #ffffff;
+  }
+  .log {
+    width: 26px;
+    height: 26px;
+    background: #eb2f3b;
+    border-radius: 50%;
+    margin-right: 15px;
+    background: url("../../../../../assets/index/ic_close_hint.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .fut {
+    width: 48px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff;
+    border: 1px solid #9ebbf7;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #2d67e3;
+  }
+  .futdel {
+    width: 48px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #eb2f3b;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .contenter {
+    padding: 0 24px 0 24px;
+  }
+  .flexer {
+    margin-left: 0;
+  }
+  // ::v-deep .cell {
+  //   display: flex;
+  // }
+  .er {
+    display: flex;
+    align-items: center;
+  }
+  .airportInfoDetails-head {
+    padding: 32px 40px 44px 24px;
+    background: #ffffff;
+    box-shadow: 8px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    .airportInfoDetails-head-content {
+      margin-top: 48px;
+      .el-input {
+        min-width: 188px;
+      }
+      .el-form--inline .el-form-item {
+        margin-bottom: 0;
+        margin-right: 48px;
+      }
+    }
+  }
+  .airportInfoDetails-content {
+    // height: 56vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding: 0 0 0 0;
+    background: #dfe3ea;
+    // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    margin-top: 10px;
+    .table-info {
+      margin-top: 8px;
+      ::v-deep .table {
+        .el-table__header {
+          .has-gutter {
+            color: #101116;
+            .is-leaf {
+              height: 40px;
+              background: #ffffff;
+              &:first-child {
+                border-top-left-radius: 4px;
+              }
+            }
+            .gutter {
+              background: #ffffff;
+              border-top-right-radius: 4px;
+            }
+          }
+        }
+        td.el-table__cell,
+        th.el-table__cell.is-leaf {
+          border-bottom: none;
+        }
+        .el-table__cell {
+          padding: 16px 0;
+          // background: #f5f7fa;
+        }
+        .el-table__row--level-1 {
+          td {
+            background: #dfe4ec;
+          }
+        }
+        tr {
+          transition: all 0.3s;
+          &:hover {
+            td {
+              background-color: #cbd7ee;
+            }
+          }
+        }
+        &::before {
+          width: 0;
+        }
+      }
+    }
+  }
+  ::v-deep .dataStoreInfoDialog {
+    .demo-dataForm {
+      .noleft {
+        .el-form-item__content {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+          width: 300px;
+          .el-input__suffix {
+            right: 23px;
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .el-input__suffix {
+    right: 15px;
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/targetDataManagement/targetDataHome.vue

@@ -0,0 +1,307 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-04-12 17:49:47
+ * @LastEditTime: 2022-04-13 16:17:37
+ * @LastEditors: your name
+ * @Description: 目标数据管理-首页
+ * have a nice day!
+-->
+
+<template>
+  <div class="targetData-home">
+    <div class="wrap">
+      <div class="targetData-header flex">
+        <div class="manageTitle">目标数据管理</div>
+        <div class="addBtn">
+          <el-button class="button-white" size="small" @click="showAdd()">新增</el-button>
+        </div>
+      </div>
+      <div class="targetData-content">
+        <el-row :gutter="24">
+          <el-col v-for="item in dataList" :key="item.targetdataID" :span="4">
+            <div class="grid-content">
+              <div class="grid-content-hand flex">
+                <div class="title flex-wrap">
+                  <!-- <div class="name">{{ item.tdataName }}</div> -->
+                  <el-tooltip class="item" effect="dark" :content="item.tdataName" placement="bottom">
+                    <div class="name">{{ item.tdataName }}</div>
+                  </el-tooltip>
+                  <i class="loger" @click="showEditDialog(item)" />
+                </div>
+                <i class="el-icon-close icon" @click="showRemoveDialog(item)" />
+              </div>
+              <div class="dataType">
+                <span>{{item.datatypeText}}</span>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <!--新增/编辑-->
+      <Dialog :flag="editDialogVisible" width="466px" :show-flag="true">
+        <div class="airportInfoDialog dialog-public-background">
+          <div class="title">{{ editDialogTitle }}</div>
+          <div class="content">
+            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px" class="demo-ruleForm">
+              <el-form-item label="目标数据名" prop="tdataName">
+                <el-input v-model="ruleForm.tdataName" size="small" placeholder="请输入目标数据名称" />
+              </el-form-item>
+              <el-form-item label="数据类型" prop="datatype">
+                <el-select v-model="ruleForm.datatype" size="small" placeholder="请选择数据类型">
+                  <el-option label="字符串" value="1"></el-option>
+                  <el-option label="数字" value="2"></el-option>
+                  <el-option label="时间" value="3"></el-option>
+                  <el-option label="日期" value="4"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="目标数据事件标识" prop="eventID">
+                <el-input v-model="ruleForm.eventID" size="small" placeholder="请输入目标数据事件标识" />
+              </el-form-item>
+
+              <el-form-item label="目标数据描述">
+                <el-input v-model="ruleForm.dataDescribe" size="small" type="textarea" :rows="2" placeholder="请输入描述" />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="foot center t30">
+            <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
+            <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+      <!--删除弹框-->
+      <Dialog :flag="removeDialogVisible">
+        <div class="airportInfoDialog">
+          <div class="Deltitle">删除协议</div>
+          <div class="content er">
+            <div class="log">是否确认删除{{ rmObj.tdataName }}？</div>
+          </div>
+          <div class="DelFoot right t30">
+            <el-button size="medium" class="r25 r26" type="danger" @click="removeSubmit()">删除</el-button>
+            <el-button size="medium" class="r26" @click="removeDialogVisible = false">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { Query, GeneralDataReception } from '@/api/dataIntegration'
+
+export default {
+  name: "targetDataHome",
+  components: { Dialog },
+  data () {
+    return {
+      dataList: [],
+      removeDialogVisible: false,
+      rmObj: {},
+      editDialogVisible: false,
+      editDialogTitle: "目标数据新增",
+      ruleForm: {
+        // 信息表单
+        tdataName: "",
+        dataDescribe: "",
+        eventID: "",
+        datatype: "",
+      },
+      rules: {
+        // 机器信息表单验证
+        tdataName: [
+          { required: true, message: "请输入目标数据名称", trigger: "blur" },
+        ],
+        eventID: [
+          {
+            required: true,
+            message: "请输入目标数据事件标识",
+            trigger: "blur",
+          },
+        ],
+        datatype: [
+          { required: true, message: "请选择数据类型", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    async getList () {
+      try {
+        const res = await Query({
+          id: 7,
+          dataContent: []
+        });
+        if (res.code === "0") {
+          res.returnData.forEach(element => {
+            if (element.datatype == 1) {
+              element.datatypeText = "字符串"
+            }
+            else if (element.datatype == 2) {
+              element.datatypeText = "数字"
+            }
+            else if (element.datatype == 3) {
+              element.datatypeText = "时间"
+            }
+            else if (element.datatype == 4) {
+              element.datatypeText = "日期"
+            }
+            else {
+              element.datatypeText = "其他"
+            }
+          });
+          this.dataList = res.returnData
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    showAdd () {
+      this.editDialogTitle = "新增目标数据";
+      this.editDialogVisible = true;
+    },
+    showEditDialog (item) {
+      this.$router.push({ path: '/systemSettings/targetDataEdit', query: { id: item.targetdataID } })
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.addSubmit();
+          this.resetForm("ruleForm");
+        }
+      });
+    },
+    async addSubmit () {
+      this.ruleForm["operate"] = "1";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "7",
+          dataContent: JSON.stringify(this.ruleForm),
+        });
+        if (res.code === "0") {
+          this.$message.success(res.message ?? "成功");
+          this.getList()
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    // 删除-弹框
+    showRemoveDialog (item) {
+      this.rmObj = item;
+      this.removeDialogVisible = true;
+    },
+    // 确认删除
+    async removeSubmit () {
+      this.rmObj["operate"] = "3";
+      try {
+        const res = await GeneralDataReception({
+          serviceId: "7",
+          dataContent: JSON.stringify(this.rmObj),
+        });
+        if (res.code === "0") {
+          this.removeDialogVisible = false;
+          this.$message.success("删除成功");
+          this.getList()
+        } else {
+          this.$message.error(res.message ?? "失败");
+        }
+      } catch (error) {
+        console.log("错误", error);
+      }
+    },
+    // 重置
+    resetForm (formName) {
+      this.ruleForm = {}
+      this.$refs[formName].resetFields();
+      this.editDialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.targetData-home {
+  .wrap {
+    padding: 16px 0;
+    .targetData-header {
+      line-height: 32px;
+      font-size: 14px;
+      .button-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+    .targetData-content {
+      .grid-content {
+        height: 120px;
+        background: #ffffff;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 25px;
+        margin-bottom: 24px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .dataType {
+          font-size: 14px;
+          font-weight: 400;
+          color: #101116;
+        }
+        .title {
+          font-size: 16px;
+          font-family: Helvetica;
+          font-weight: bold;
+          color: #101116;
+          white-space: nowrap;
+          max-width: 80%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          .name {
+            white-space: nowrap;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .loger {
+            width: 14px;
+            height: 14px;
+            margin-left: 24px;
+            background: url("../../../../../assets/status/ic_edit_default.png")
+              no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            position: relative;
+            top: 2px;
+          }
+          .loger:hover {
+            background: url("../../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .icon {
+          cursor: pointer;
+          font-size: 16px;
+          color: #606266;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/warningSet/warningEdit.vue

@@ -0,0 +1,1050 @@
+<template>
+  <div class="bgBox">
+    <div class="topBox">
+      <div class="headerBox">
+        <div class="top">
+          <span class="oneColor"></span>
+          <span class="titleOne">报警预警场景</span>
+        </div>
+        <el-button class="buts" @click="editSubmit">保存</el-button>
+      </div>
+
+      <div class="formBox">
+        <div class="digName">
+          <div class="aviName">
+            <span class="aviP">名称</span>
+            <el-input v-model="warnName" placeholder="请输入名称"></el-input>
+          </div>
+          <div class="aviName">
+            <span class="aviP">航司</span>
+            <el-select v-model="code2" placeholder="请选择">
+              <el-option v-for="item in aircompeny" :key="item.value" :label="item.airCompanyName" :value="item.code2">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="aviName" style="margin-left: 20px">
+            <span class="aviP">起飞机场</span>
+            <el-select v-model="code3" placeholder="请选择起飞机场">
+              <el-option v-for="item in arilist" :key="item.value1" :label="item.name" :value="item.code3">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="aviName" style="margin-left: 20px">
+            <span class="aviP">降落机场</span>
+            <el-select v-model="code4" placeholder="请选择降落机场">
+              <el-option v-for="item in arilist" :key="item.value2" :label="item.name" :value="item.code3">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="digName4">
+            <div class="aviP1">航班号</div>
+            <el-input placeholder="请输入航班号" v-model="flightNO"></el-input>
+          </div>
+        </div>
+        <div class="digName1">
+          <div class="aviName1">
+            <div class="aviP2">起止时间</div>
+            <el-date-picker v-model="BeginTime1" type="datetimerange" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+            </el-date-picker>
+          </div>
+
+          <div class="aviName2">
+            <div class="aviP3">备注</div>
+            <el-input type="textarea" v-model="desc" resize="none"></el-input>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="centerBox">
+      <Search title="报警预警策略" :isSlot="false" :isChild="true" @clearSearchData="clearSearchData" @getSearchData="getSearchData" style="padding-left: 16px; padding-right: 32px" />
+
+      <div class="LBox">
+        <!-- <div @click="addDig" class="lbox-add r24">
+          <div class="terminal-info-add-icons">
+            <span class="icon el-icon-plus"></span>
+          </div>
+        </div> -->
+        <el-row :gutter="24">
+          <el-col :span="4">
+            <div @click="addDig" class="lbox-add r24">
+              <div class="terminal-info-add-icons">
+                <span class="icon el-icon-plus"></span>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="4" v-for="(item, index) in infoArr" :key="index">
+            <div class="headerBoxs">
+              <div class="tltle-head">
+                <!-- <div class="title flower">
+                  {{ item.name }}
+                </div> -->
+                <el-tooltip effect="dark" :content="item.name" placement="bottom">
+                  <div class="title flower">{{ item.name }}</div>
+                </el-tooltip>
+                <div @click="delBox(item, index)" class="el-icon-close icon"></div>
+              </div>
+              <div class="text item" style="margin-top: 15px">
+                <div class="adTime fwgh" style="margin-bottom: 15px">
+                  预警时长:<span class="timeER">{{ item.beginTime }}</span>
+                </div>
+                <div class="adTime fwgh">
+                  报警时长:<span class="timeER">{{ item.endTime }}</span>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <!-- <div
+          v-for="(item, index) in infoArr"
+          @click="infoIndex(item, index)"
+          :key="index"
+          class="forBox"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="edit right">
+            <span @click.stop="editInfo(item)" class="round">
+              <div class="edit_log" style="margin-left: 0"></div>
+            </span>
+          </div>
+          <div @click.stop="delBox(item)" class="close">
+            <i class="el-icon-close"></i>
+          </div>
+        </div> -->
+      </div>
+    </div>
+
+    <!--删除弹框-->
+    <Dialog :flag="flag">
+      <div class="airportInfoDialog">
+        <div class="del-title">删除报警预警策略</div>
+        <div class="content er">
+          <div class="log"></div>
+          是否确认删除
+          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
+            {{ this.delName }}?
+          </p>
+        </div>
+        <div class="DelFoot right t30" style="background: #ffffff">
+          <el-button size="medium" @click="remove" class="r25 buwitch" type="danger">删除</el-button>
+          <el-button size="medium" class="r26" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+    <!-- 新增 -->
+    <div class="EditDig">
+      <el-dialog @close="closeForm" :visible.sync="editFalg" :title="posType === 1 ? '新增报警预警策略' : '编辑报警预警策略'">
+        <el-form ref="form" :model="form" label-width="80px">
+          <div class="itemBox">
+            <el-form-item label="名称">
+              <el-input @input="changeValue" v-model="form.name" placeholder="请输入名称"></el-input>
+            </el-form-item>
+            <el-form-item label="策略类型">
+              <el-select v-model="region" placeholder="请选择航司">
+                <el-option v-for="(item, index) in regform" :key="index" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="itemBox">
+            <el-form-item label="预警时长">
+              <el-input @input="changeValue1" v-model="form.WarningDur" placeholder="请输入预警时长(分)"></el-input>
+            </el-form-item>
+            <el-form-item label="报警时长">
+              <el-input @input="changeValue2" v-model="form.alamDur" placeholder="请输入报警时长(分)"></el-input>
+            </el-form-item>
+          </div>
+          <div class="itemBox">
+            <el-form-item label="开始节点">
+              <el-select v-model="form.StartNode" placeholder="请选择开始节点">
+                <el-option v-for="(item, index) in traceList" :key="index" :label="item.nodeName" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- <el-input
+                placeholder="请选择开始位置"
+                v-model="form.StartPosition"
+              >
+              </el-input> -->
+            <el-form-item label="开始位置">
+              <el-select v-model="form.StartPosition" placeholder="请选择开始位置">
+                <el-option v-for="(item, index) in StartPositionList" :key="index" :label="item.remarkCn" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="itemBox">
+            <el-form-item label="结束节点">
+              <el-select v-model="form.EndNode" placeholder="请选择结束节点">
+                <el-option v-for="(item, index) in traceList" :key="index" :label="item.nodeName" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- <el-input placeholder="请选择结束位置" v-model="form.EndPosition">
+              </el-input> -->
+            <el-form-item label="结束位置">
+              <el-select v-model="form.StartPosition" placeholder="请选择结束位置">
+                <el-option v-for="(item, index) in endPositionList" :key="index" :label="item.remarkCn" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <!-- <div class="itemBox">
+            <el-form-item label="备注">
+              <el-input
+                @input="changeValue3"
+                type="textarea"
+                v-model="form.desc"
+              ></el-input>
+            </el-form-item>
+          </div> -->
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" class="r25 r26" @click="submit">提 交</el-button>
+          <el-button @click="close" class="r26" style="margin-left: 12px">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog/index.vue";
+import Search from "@/layout/components/Search/index.vue";
+import {
+  AddWarning,
+  AirlinesInquiry,
+  AirportsList,
+  UserWarningList,
+  AddUserWarning,
+  DelUserWarning,
+  traceNodeslist,
+  Alarmlocation,
+} from "@/api/SystemSettings.js";
+export default {
+  components: { Dialog, Search },
+  data () {
+    return {
+      id: this.$route.query.id,
+      airportCode2: this.$route.query.airportCode2,
+      BeginTime1: this.$route.query.BeginTime1,
+      flightNO: this.$route.query.flightNO,
+      ladingAirport: this.$route.query.ladingAirport,
+      desc: this.$route.query.desc,
+      warnName: this.$route.query.warnName,
+      code2: this.$route.query.airportCode2,
+      code3: this.$route.query.departureAirport,
+      code4: this.$route.query.ladingAirport,
+      flag: false,
+      aircompeny: [],
+      infoArr: [
+        {
+          name: "名称",
+        },
+      ], //报警预警策略列表
+      posType: 1,
+      arilist: [],
+      traceList: [],
+      editFalg: false,
+      posArrCopy: null,
+      delName: "",
+      DelId: "", //删除场景id
+      region: "",
+      StartNode: "",
+      StartNodeer: "",
+      EndNodeer: "",
+      EndNode: "",
+      pid: "",
+      StartPositionList: [],
+      endPositionList: [],
+      form: {
+        name: "",
+        WarningDur: "",
+        alamDur: "",
+        desc: "",
+        StartPosition: this.$route.query.StartPosition,
+        EndPosition: this.$route.query.EndPosition,
+      },
+      regform: [
+        {
+          name: "节点或位置间超时",
+          id: 1,
+        },
+        {
+          name: "临近航班起飞",
+          id: 2,
+        },
+        {
+          name: "降落后超时",
+          id: 3,
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick (picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick (picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick (picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  created () {
+    // this.getAirlines();
+    // this.getAirlist();
+    // this.UserWarning();
+    // this.tracenode();
+    // this.AlarmlocationList(this.code3, "1");
+    // this.AlarmlocationList(this.code4, "2");
+  },
+  watch: {
+    code3 () {
+      this.AlarmlocationList(this.code3, "1");
+    },
+    code4 () {
+      this.AlarmlocationList(this.code4, "2");
+    },
+  },
+  methods: {
+    //获取开始位置
+    async AlarmlocationList (data, val) {
+      if (val == "1") {
+        const result = await Alarmlocation({ code: data });
+        if (result.code == 0) {
+          this.StartPositionList = result.returnData;
+        }
+      } else if (val == "2") {
+        const result = await Alarmlocation({ code: data });
+        if (result.code == 0) {
+          this.endPositionList = result.returnData;
+        }
+      }
+    },
+    //清除搜索
+    clearSearchData () { },
+    //模糊查询
+    findarrays (ar, feature, v) {
+      var arr = [];
+      for (var i = 0; i < ar.length; i++) {
+        var atxt = ar[i][feature];
+        var btxt = v;
+        //		将字符串按某个字符切割成若干个字符串，并以数组形式返回
+        var atxtarr = atxt.split("");
+        var btxtarr = btxt.split("");
+        var type = 0;
+        for (var k = 0; k < atxtarr.length; k++) {
+          for (var p = 0; p < btxtarr.length; p++) {
+            if (atxtarr[k] == btxtarr[p]) {
+              type = 1;
+            }
+          }
+        }
+        if (type == 1) {
+          arr.push(ar[i]);
+        }
+      }
+      return arr;
+    },
+    //搜索
+    getSearchData (val) {
+      if (val) {
+        this.infoArr = this.findarrays(this.infoArr, "name", val);
+      } else {
+        this.UserWarning();
+      }
+    },
+    closeForm () {
+      this.$refs.form.resetFields();
+    },
+    changeValue (val) {
+      this.form.name = val;
+
+      this.$forceUpdate();
+    },
+    changeValue1 (val) {
+      this.form.WarningDur = val;
+      this.$forceUpdate();
+    },
+    changeValue2 (val) {
+      this.form.alamDur = val;
+      this.$forceUpdate();
+    },
+    changeValue3 (val) {
+      this.form.desc = val;
+      this.$forceUpdate();
+    },
+
+    //获取航司信息列表
+    async getAirlines () {
+      const res = await AirlinesInquiry({});
+      if (res.code === 0) {
+        this.aircompeny = res.returnData;
+      } else {
+        this.$message.error.message;
+      }
+    },
+    //机场列表
+    async getAirlist () {
+      const res = await AirportsList({});
+      if (res.code === 0) {
+        this.arilist = res.returnData;
+      } else {
+        this.$message.error.message;
+      }
+    },
+    //节点信息列表
+    async tracenode () {
+      const res = await traceNodeslist({});
+      if (res.code === 0) {
+        this.traceList = res.returnData;
+      } else {
+        this.$message.error.message;
+      }
+    },
+    //编辑数据
+    async editSubmit () {
+      let params = {
+        id: this.id,
+        warnName: this.warnName,
+        desc: this.desc,
+        flightNO: this.flightNO,
+        airportCode2: this.code2,
+        departureAirport: this.code3,
+        ladingAirport: this.code4,
+        beginTime: this.BeginTime1[0],
+        endTime: this.BeginTime1[1],
+      };
+      const res = await AddWarning(params);
+      if (res.code === 0) {
+        this.$message.success("修改报警预警信息成功");
+        this.$router.push("/systemSettings/warningSet");
+      } else {
+        this.$message.error.message;
+      }
+      this.EditDialogVisible = false;
+    },
+
+    //场景列表
+    async UserWarning () {
+      const res = await UserWarningList({
+        sceneId: this.id,
+      });
+      if (res.code === 0) {
+        this.infoArr = res.returnData;
+      } else {
+        this.$message.error.message;
+      }
+    },
+    infoIndex () { },
+
+    delBox (item) {
+      this.flag = true;
+      this.delName = item.name;
+      this.DelId = item.id;
+    },
+    //删除
+    async remove () {
+      const res = await DelUserWarning({
+        id: this.DelId,
+      });
+      if (res.code === 0) {
+        this.$message.success("删除报警预警策略成功");
+        this.UserWarning();
+      } else {
+        this.$message.error.message;
+      }
+      this.flag = false;
+    },
+    addDig () {
+      this.editFalg = true;
+      this.posType = "1";
+      this.form.name = null;
+      this.region = null;
+      this.form.WarningDur = null;
+      this.form.alamDur = null;
+      this.StartNode = null;
+      this.EndNode = null;
+      this.form.desc = null;
+    },
+    editInfo (item) {
+      this.posType = 2;
+      this.editFalg = true;
+      this.form.name = item.name;
+      this.region = item.way;
+      this.form.WarningDur = item.earlyWarningTime;
+      this.form.alamDur = item.warningTime;
+      this.StartNode = item.beginNodeId;
+      this.EndNode = item.endNodeId;
+      this.form.StartPosition = item.beginLocationID;
+      this.form.EndPosition = item.endNodeLocationID;
+      this.form.desc = item.remark;
+      this.pid = item.id;
+      this.posArrCopy = _.cloneDeep(item);
+    },
+
+    close () {
+      this.editFalg = false;
+    },
+    async submit () {
+      if (this.posType === 1) {
+        const res = await AddUserWarning({
+          id: null,
+          sceneId: this.id,
+          warnName: this.form.name,
+          way: this.region,
+          earlyWarningTime: this.form.WarningDur,
+          warningTime: this.form.alamDur,
+          beginNodeId: this.StartNode,
+          endNodeId: this.EndNode,
+          beginLocationID: this.form.StartPosition,
+          endNodeLocationID: this.form.EndPosition,
+          beginLocationId: this.form.StartPosition,
+          endNodeLocationId: this.form.EndPosition,
+          remark: this.form.desc,
+        });
+        if (res.code === 0) {
+          this.editFalg = false;
+          this.UserWarning();
+          this.$message.success("新增报警预警策略成功");
+        } else {
+          this.$message.error.message;
+        }
+      } else {
+        const res = await AddUserWarning({
+          id: this.pid,
+          sceneId: this.id,
+          name: this.form.name,
+          way: this.region,
+          earlyWarningTime: this.form.WarningDur,
+          warningTime: this.form.alamDur,
+          beginNodeId: this.form.StartNode,
+          endNodeId: this.form.EndNode,
+          beginLocationId: this.form.StartPosition,
+          endNodeLocationId: this.form.EndPosition,
+          remark: this.form.desc,
+        });
+        if (res.code === 0) {
+          this.editFalg = false;
+          this.UserWarning();
+          this.$message.success("编辑报警预警策略成功");
+        } else {
+          this.$message.error.message;
+        }
+      }
+      this.closeForm();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bgBox {
+  padding: 0;
+  width: 100%;
+
+  .log {
+    width: 26px;
+    height: 26px;
+    background: #eb2f3b;
+    border-radius: 50%;
+    margin-right: 15px;
+    background: url("../../../../../assets/index/ic_close_hint.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .er {
+    display: flex;
+    align-items: center;
+  }
+  ::v-deep .el-input__suffix {
+    right: 0;
+  }
+  ::v-deep .el-dialog__body {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    // padding-top: 20px !important;
+    padding-bottom: 0px;
+  }
+  ::v-deep .el-dialog__headerbtn {
+    top: 17px;
+    color: #ffffff;
+  }
+  ::v-deep .el-dialog__close {
+    color: #ffffff;
+  }
+  ::v-deep .el-range-separator {
+    line-height: 27px;
+  }
+  ::v-deep .el-range__icon {
+    line-height: 27px;
+  }
+  ::v-deep .el-dialog__header {
+    width: 100%;
+    height: 36px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    background: #2d67e3;
+    padding: 0 16px 0 16px;
+    display: flex;
+    align-items: center;
+  }
+  ::v-deep .el-dialog__title {
+    color: #ffffff !important;
+    font-size: 16px !important;
+    margin-bottom: 15px;
+  }
+}
+.timeER {
+  font-size: 14px;
+  font-family: Helvetica;
+  font-weight: 400;
+  color: #afb4bf;
+}
+.box-card {
+  width: 268px;
+  height: 144px;
+  margin-left: 18px;
+  margin-top: 24px;
+  background: #fff;
+  box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+  border-radius: 4px;
+}
+.headerBox {
+  padding: 16px 32px 16px 16px;
+  display: flex;
+  justify-content: space-between;
+  .tltle-head {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .el-button {
+    width: 64px;
+    height: 32px;
+    background: #2d67e3;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+.text {
+  font-size: 14px;
+}
+
+.item {
+  padding: 18px 0;
+}
+
+.box-card {
+  width: 216px;
+  height: 104px;
+  margin-top: -13px;
+  cursor: pointer;
+  margin-left: 35px;
+  background: #f5f7fa;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+}
+.topBox {
+  // height: 280px;
+  background: #ffffff;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  margin-bottom: 25px;
+}
+.headerBoxs {
+  height: 144px;
+  padding: 24px 24px 20px 18px;
+  background: #ffffff;
+  border-radius: 4px;
+  .tltle-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .el-button {
+    width: 64px;
+    height: 32px;
+    background: #2d67e3;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.oneColor {
+  width: 4px;
+  height: 20px;
+  margin-right: 12px;
+  background: #2d67e3;
+}
+.titleOne {
+  width: 144px;
+  font-size: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #303133;
+}
+
+.formBox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 90%;
+  ::v-deep .el-input__suffix {
+    top: 4px;
+  }
+}
+::v-deep .el-row {
+  width: 100%;
+}
+::v-deep .formBox {
+  .digName {
+    width: 100%;
+    display: flex;
+    margin-left: 70px;
+  }
+  .digName .el-input__inner {
+    margin-left: 15px;
+    width: 160px;
+    height: 32px;
+    background: #fff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+  .digName1 {
+    display: flex;
+    width: 100%;
+    margin-left: 54px;
+    margin-bottom: 20px;
+  }
+  .aviP2 {
+    margin-left: 14px;
+    margin-right: 17px;
+  }
+  .digName4 {
+    display: flex;
+  }
+  .digName4 .el-input__inner {
+    width: 400px;
+    height: 32px;
+    margin-left: 16px;
+    background: #fff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+
+  .digName {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    //   flex-direction: row;
+  }
+  .aviName {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 24px;
+    width: 240px;
+    margin-right: 10px;
+    text-align: right;
+  }
+  .aviName1 {
+    width: 35%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 24px;
+    margin-right: 10px;
+    text-align: right;
+    .el-input__inner {
+      width: 410px;
+      height: 32px;
+      background: #fff;
+    }
+  }
+  .aviName2 {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 24px;
+    margin-right: 10px;
+    text-align: right;
+    .el-textarea__inner {
+      width: 972px;
+      height: 32px;
+    }
+  }
+  .aviP {
+    width: 100px;
+    height: 32px;
+    line-height: 32px;
+    color: #303133;
+  }
+  .aviP1 {
+    width: 140px;
+    text-align: right;
+    height: 32px;
+    line-height: 32px;
+    color: #303133;
+  }
+  .aviP2 {
+    width: 64px;
+    text-align: right;
+    height: 32px;
+    line-height: 32px;
+    color: #303133;
+  }
+  .aviP3 {
+    width: 64px;
+    height: 32px;
+    line-height: 32px;
+    text-align: right;
+    margin-right: 40px;
+  }
+}
+.centerBox {
+  height: 495px;
+  padding: 32px 0 44px 0;
+  // background: #ffffff;
+  // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  // border-radius: 4px;
+}
+.centerTitle {
+  width: 126px;
+  height: 18px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+}
+.delIcon {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  background: #000000;
+  opacity: 0.8;
+  border-radius: 50%;
+  color: #ffffff;
+  font-weight: bold;
+  text-align: center;
+  line-height: 24px;
+  margin-left: 232px;
+}
+
+.centerCard {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.boxFlex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.addIcon {
+  color: #d7dae3;
+  font-size: 60px;
+}
+.LBox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  // margin-left: 30px;
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+.lbox-add {
+  height: 144px;
+  background: #f5f7fa;
+  border: 1px dashed #9ebbf7;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  .icon {
+    font-size: 31px;
+    color: #9ebbf7;
+  }
+}
+.forBox {
+  width: 230px;
+  height: 120px;
+  margin-bottom: 24px;
+  background: #f5f7fa;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 2px;
+  padding: 24px;
+  position: relative;
+  margin-right: 24px;
+  cursor: pointer;
+  .name {
+    font-size: 18px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .edit {
+    margin-top: 32px;
+    position: relative;
+    .round {
+      display: inline-block;
+      width: 28px;
+      height: 28px;
+      // background: #f5f7fa;
+      border-radius: 50%;
+      line-height: 28px;
+      text-align: center;
+      // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      right: 0px;
+      i {
+        color: #fff;
+      }
+    }
+  }
+  .close {
+    width: 24px;
+    height: 24px;
+    background: #000000;
+    opacity: 0.8;
+    border-radius: 50%;
+    position: absolute;
+    right: -12px;
+    line-height: 24px;
+    text-align: center;
+    top: -12px;
+    i {
+      color: #fff;
+    }
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+}
+.active {
+  background: #6e82a7;
+  .name {
+    color: #fff;
+  }
+  .edit {
+    .round {
+      background: #fff;
+      i {
+        color: #6e82a7;
+      }
+    }
+  }
+}
+::v-deep .DigClass {
+  .el-dialog {
+    // border-radius: 20px;
+    width: 462px;
+  }
+  .el-dialog__header {
+    padding: 35px 46px 10px;
+  }
+  .el-dialog__title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #303133;
+  }
+}
+::v-deep .EditDig {
+  .itemBox {
+    display: flex;
+    justify-content: space-around;
+  }
+  .el-dialog {
+    // border-radius: 20px;
+    width: 600px;
+    display: flex;
+    display: -ms-flex; /* 兼容IE */
+    flex-direction: column;
+    -ms-flex-direction: column; /* 兼容IE */
+    margin: 0 !important;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-height: calc(100% - 30px);
+    max-width: calc(100% - 30px);
+    // height: 515px;
+  }
+  .el-input__inner {
+    width: 160px;
+    height: 32px;
+    background: #ffffff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+  .el-textarea__inner {
+    width: 462px;
+    height: 96px;
+    background: #ffffff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+  .el-dialog__header {
+    padding: 35px 46px 10px;
+  }
+  .el-dialog__footer {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 0;
+  }
+  .el-dialog__title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #303133;
+  }
+
+  .dialog-footer {
+    height: 56px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 34px;
+    background: #f0f5ff;
+    padding-bottom: 0;
+  }
+}
+</style>

src/views/systemManagement/dataBases/views/warningSet/warningSet.vue

@@ -0,0 +1,664 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-17 13:43:26
+ * @LastEditTime: 2021-11-17 13:43:27
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \CABaggageData\src\views\dashboard\views\about.vue
+-->
+
+<template>
+  <div class="airportInfo">
+    <!--搜索-->
+    <div class="nodeLnformation_header">
+      <Search title="报警预警设置" @getSearchData="getSearchData">
+        <button @click="handleAdd" class="btnAdd">新增</button>
+      </Search>
+    </div>
+
+    <div class="aviInfo">
+      <el-row :gutter="24">
+        <el-col :span="4" class="box-card" v-for="(item, index) in warningArr" :key="index" style="padding-left: 24px; padding-right: 24px">
+          <div class="headerBox">
+            <div class="tltle-head">
+              <el-tooltip class="item" effect="dark" :content="item.warnName" placement="bottom">
+                <div class="title fz16">{{ item.warnName }}</div>
+              </el-tooltip>
+              <div @click="gotoAram(item, index)" class="edit_log"></div>
+            </div>
+            <div @click="delBtn(item, index)" class="el-icon-close icon"></div>
+          </div>
+          <div class="text item" style="margin-top: 6px">
+            <div class="adTime">
+              生效时间：<span class="timeSt">{{ item.beginTime }}</span>
+            </div>
+            <div class="adTime">
+              失效时间：<span class="timeSt">{{ item.endTime }}</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- <img v-if="!warningArr.length" src="../../../assets/logo/nodata.png" /> -->
+    </div>
+
+    <!--删除弹框-->
+    <Dialog :flag="flag">
+      <div class="airportInfoDialog">
+        <div class="del-title">删除机场信息</div>
+        <div class="content er">
+          <div class="log"></div>
+          是否确认删除
+          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
+            {{ warnname }}
+          </p>
+          ？
+        </div>
+        <div class="DelFoot right t30">
+          <el-button size="medium" @click="remove" class="r25 buwitch" type="danger">删除</el-button>
+          <el-button size="medium" class="r26" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+    <!-- 新增 -->
+    <div class="EditDig">
+      <el-dialog title="新增报警预警信息" :visible.sync="EditDialogVisible">
+        <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small ">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入名称（必填）"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="航司" prop="code2">
+                <el-select v-model="form.code2" placeholder="请选择航司">
+                  <el-option v-for="item in aircompeny" :key="item.value" :label="item.airCompanyName" :value="item.code2">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="起飞机场" prop="code3">
+                <el-select v-model="form.code3" placeholder="请选择起飞机场">
+                  <el-option v-for="item in arilist" :key="item.value1" :label="item.name" :value="item.code3">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="降落机场" prop="code4">
+                <el-select v-model="form.code4" placeholder="请选择降落机场">
+                  <el-option v-for="item in arilist" :key="item.value2" :label="item.name" :value="item.code3">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="航班号" prop="FlightNO">
+                <el-input v-model="form.FlightNO" placeholder="航班号"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <!-- <div class="digName">
+          <div class="aviName">
+            <span class="aviP">名称</span>
+            <el-input v-model="name" placeholder="请输入名称" ></el-input>
+          </div>
+          <div class="aviName">
+            <span class="aviP">航司</span>
+            <el-select v-model="code2" placeholder="请选择">
+              <el-option
+                v-for="item in aircompeny"
+                :key="item.value"
+                :label="item.airCompanyName"
+                :value="item.code2"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="digName">
+          <div class="aviName">
+            <span class="aviP">起飞机场</span>
+            <el-select v-model="code3" placeholder="请选择起飞机场">
+              <el-option
+                v-for="item in arilist"
+                :key="item.value1"
+                :label="item.name"
+                :value="item.code3"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="aviName">
+            <span class="aviP">降落机场</span>
+            <el-select v-model="code4" placeholder="请选择降落机场">
+              <el-option
+                v-for="item in arilist"
+                :key="item.value2"
+                :label="item.name"
+                :value="item.code3"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="digName1">
+          <span class="aviP1">航班号</span>
+          <el-input placeholder="请输入航班号" v-model="FlightNO"></el-input>
+        </div> -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <div class="digName2">
+              <span class="aviP2">起止时间</span>
+              <el-date-picker v-model="BeginTime1" type="datetimerange" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+              </el-date-picker>
+            </div>
+          </el-col>
+        </el-row>
+
+        <div class="digName3">
+          <span class="aviP1">备注</span>
+          <el-input type="textarea" v-model="desc" resize="none" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <div class="btnstyle">
+            <el-button class="r25 r26" type="primary" @click="addSubmit">提 交</el-button>
+            <el-button class="r26" @click="EditDialogVisible = false">取 消</el-button>
+          </div>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from "@/layout/components/Search/index.vue";
+import Dialog from "@/layout/components/Dialog/index.vue";
+import { findarrays } from "@/utils/validate";
+import {
+  warningList,
+  AddWarning,
+  AirlinesInquiry,
+  AirportsList,
+  DelWarning,
+} from "@/api/SystemSettings.js";
+export default {
+  components: { Search, Dialog },
+  data () {
+    return {
+      flag: false,
+      EditDialogVisible: false,
+      name: "",
+      desc: "",
+      warningArr: [
+        {
+          warnName: "名称",
+          beginTime: "1111",
+          endTime: "22222",
+        },
+      ],
+      warnname: "",
+      arilist: [],
+      delId: "",
+      aircompeny: [],
+      BeginTime1: [], //起止时间
+      code2: "",
+      code3: "",
+      code4: "",
+      form: {
+        name: "",
+        code2: "",
+        code3: "",
+        code4: "",
+        FlightNO: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        code2: [{ required: true, message: "请输入航司", trigger: "change" }],
+        code3: [
+          { required: true, message: "请输入起飞机场", trigger: "change" },
+        ],
+        code4: [
+          { required: true, message: "请输入起飞机场", trigger: "change" },
+        ],
+        FlightNO: [
+          { required: true, message: "请输入航班号", trigger: "blur" },
+        ],
+      },
+      FlightNO: "", //航班号
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick (picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick (picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick (picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  created () {
+    // this.getWarningList();
+    // this.getAirlines();
+    // this.getAirlist();
+  },
+  methods: {
+    getSearchData (val) {
+      if (val) {
+        this.warningArr = findarrays(this.warningArr, "warnName", val);
+      } else {
+        this.getWarningList();
+      }
+    },
+
+    async getWarningList () {
+      const res = await warningList({});
+      if (res.code === 0) {
+        this.warningArr = res.returnData;
+      } else {
+        this.$message.error.message;
+      }
+    },
+    delBtn (item, index) {
+      this.delId = item.id;
+      this.warnname = item.warnName;
+      this.flag = true;
+    },
+    //删除
+    async remove () {
+      const res = await DelWarning({
+        id: this.delId,
+      });
+      if (res.code === 0) {
+        this.$message.success("删除报警预警信息成功");
+        this.getWarningList();
+      } else {
+        this.$message.error.message;
+      }
+      this.flag = false;
+    },
+    handleAdd () {
+      this.EditDialogVisible = true;
+    },
+    //获取航司信息列表
+    async getAirlines () {
+      const res = await AirlinesInquiry({});
+      if (res.code === 0) {
+        this.aircompeny = res.returnData;
+      } else {
+        this.$message.error.message;
+      }
+    },
+    //机场列表
+    async getAirlist () {
+      const res = await AirportsList({});
+      if (res.code === 0) {
+        this.arilist = res.returnData;
+      } else {
+        this.$message.error.message;
+      }
+    },
+
+    //新增数据
+    async addSubmit () {
+      let arr = 0;
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          arr = 1;
+        } else {
+          arr = 0;
+          return false;
+        }
+      });
+      if (arr == 1) {
+        const res = await AddWarning({
+          id: null,
+          warnName: this.form.name,
+          desc: this.desc,
+          flightNO: this.form.FlightNO,
+          airportCode2: this.form.code2,
+          departureAirport: this.form.code3,
+          ladingAirport: this.form.code4,
+          beginTime: this.BeginTime1[0],
+          endTime: this.BeginTime1[1],
+        });
+        if (res.code === 0) {
+          this.$message.success("新增报警预警信息成功");
+          this.getWarningList();
+          this.form.name = null;
+          this.desc = null;
+          this.form.FlightNO = null;
+          this.form.code2 = null;
+          this.form.code3 = null;
+          this.form.code4 = null;
+          this.BeginTime1 = null;
+        } else {
+          this.$message.error.message;
+        }
+        this.EditDialogVisible = false;
+      }
+    },
+    gotoAram (item, index) {
+      this.$router.push({
+        path: "/systemSettings/warningEdit",
+        query: {
+          id: item.id,
+          airportCode2: item.airportCode2,
+          beginTime: item.beginTime,
+          endTime: item.endTime,
+          BeginTime1: [item.beginTime, item.endTime],
+          flightNO: item.flightNO,
+          departureAirport: item.departureAirport,
+          ladingAirport: item.ladingAirport,
+          desc: item.desc,
+          warnName: item.warnName,
+          beginLocationId: item.beginLocationId,
+          endNodeLocationId: item.endNodeLocationId,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style  lang='scss' scoped>
+.airportInfo {
+  margin-top: 40px;
+  .title {
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #101116;
+    max-width: calc(100% - 40px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .log {
+    width: 26px;
+    height: 26px;
+    background: #eb2f3b;
+    border-radius: 50%;
+    margin-right: 15px;
+    background: url("../../../../../assets/index/ic_close_hint.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .er {
+    display: flex;
+    align-items: center;
+  }
+}
+.text {
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+.adTime {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  font-weight: bold;
+  margin-bottom: 14px;
+  // margin-left: 10px;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #101116;
+}
+.timeSt {
+  width: 141px;
+  height: 13px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #909399;
+}
+.delBtn {
+  display: flex;
+}
+.headerBox {
+  padding-top: 24px;
+  // padding-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+  .tltle-head {
+    display: flex;
+    width: calc(100% - 15px);
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+.iconBox {
+  margin-right: 80px;
+  display: flex;
+  align-items: center;
+}
+.edit_log {
+  margin-bottom: 18px;
+  // top: -2px;
+}
+::v-deep .aviInfo {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  img {
+    margin: 0 auto;
+    margin-top: 10%;
+    display: -webkit-box;
+    -webkit-box-pack: center;
+    -webkit-box-align: center;
+    -webkit-box-orient: vertical;
+    text-align: center;
+  }
+  .box-card {
+    width: 268px;
+    height: 144px;
+    margin-left: 18px;
+    margin-top: 24px;
+    background: #fff;
+    box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+    border-radius: 4px;
+  }
+  .el-card__body {
+    padding: 0;
+  }
+  .el-card__header {
+    border: none;
+  }
+}
+
+::v-deep .EditDig {
+  .el-dialog {
+    width: 600px;
+    height: 450px;
+    border-radius: 2px;
+    display: flex;
+    display: -ms-flex; /* 兼容IE */
+    flex-direction: column;
+    -ms-flex-direction: column; /* 兼容IE */
+    margin: 0 !important;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-height: calc(100% - 30px);
+    max-width: calc(100% - 30px);
+    .el-dialog__body {
+      padding: 20px 20px 0 20px !important;
+    }
+    .el-dialog__footer {
+      padding: 0 19px 0 0;
+      background: #f0f5ff;
+    }
+    .dialog-footer {
+      width: 100%;
+      // background: #f0f5ff;
+      border-radius: 2px;
+      display: flex;
+      height: 56px;
+      line-height: 56px;
+      justify-content: flex-end;
+      .el-button {
+        // height: 35px;
+
+        text-align: center;
+      }
+      .el-button-primary {
+        background: #2d67e3 !important;
+        border-radius: 4px;
+      }
+      .btnstyle {
+        width: 100%;
+        height: 100%;
+        // margin-right: 22px;
+        // margin-top: 10px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    }
+  }
+  .el-dialog__header {
+    padding: 10px 20px 10px;
+    height: 36px;
+    background: #2d67e3;
+  }
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+  }
+  .el-date-editor .el-range__icon {
+    line-height: 24px;
+  }
+  .el-range-separator {
+    line-height: 24px;
+  }
+  .el-dialog__headerbtn {
+    top: 11px;
+  }
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #fff;
+  }
+
+  .digName .el-input__inner {
+    margin-left: 15px;
+    width: 160px;
+    height: 32px;
+    background: #ffffff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+  .digName1 {
+    display: flex;
+    margin-left: 31px;
+    margin-bottom: 20px;
+  }
+
+  .digName1 .el-input__inner {
+    width: 464px;
+    height: 32px;
+    margin-left: 16px;
+    background: #ffffff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+  .digName3 .el-textarea__inner {
+    width: 455px;
+    height: 96px;
+    margin-left: 16px;
+    background: #ffffff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+  .digName2 {
+    display: flex;
+    margin-left: 31px;
+    margin-bottom: 20px;
+  }
+  .digName3 {
+    display: flex;
+    margin-left: 31px;
+    margin-bottom: 20px;
+  }
+  .digName2 .el-input__inner {
+    width: 500px;
+    height: 32px;
+    margin-left: 16px;
+    background: #ffffff;
+    border: 1px solid #d7dae3;
+    border-radius: 4px;
+  }
+}
+.digName {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+}
+.aviName {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 24px;
+  width: 240px;
+  margin-right: 10px;
+  text-align: right;
+}
+.aviP {
+  width: 100px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #303133;
+}
+.aviP1 {
+  width: 70px;
+  text-align: right;
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #303133;
+}
+.aviP2 {
+  width: 64px;
+  text-align: right;
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #303133;
+}
+</style>

src/views/systemManagement/index.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="Box">
     <div class="centerBox">
-      <el-form
-        :model="FormData"
-        :rules="rules"
-        ref="systemForm"
-        label-width="0"
-        class="demo-ruleForm"
-      >
+      <el-form :model="FormData" :rules="rules" ref="systemForm" label-width="0" class="demo-ruleForm">
         <div class="centerTitle">
           <span class="TitleStyle">系统基础设置</span>
           <el-button v-is="['system_btn_save']" @click="save()">保存</el-button>
@@ -23,12 +17,8 @@
         <div class="boxList">
           <span class="ListName">是否允许职员关联多账号</span>
           <div class="riaStyle">
-            <el-radio disabled v-model="FormData.UserOfficerMulti" :label="1"
-              >是</el-radio
-            >
-            <el-radio disabled v-model="FormData.UserOfficerMulti" :label="0"
-              >否</el-radio
-            >
+            <el-radio disabled v-model="FormData.UserOfficerMulti" :label="1">是</el-radio>
+            <el-radio disabled v-model="FormData.UserOfficerMulti" :label="0">否</el-radio>
           </div>
           <div class="lineStyle"></div>
         </div>
@@ -43,12 +33,8 @@
         <div class="boxList">
           <span class="ListName">是否开启严格数据权限</span>
           <div class="riaStyle">
-            <el-radio v-model="FormData.OpenAuthData" :label="1" disabled
-              >是</el-radio
-            >
-            <el-radio v-model="FormData.OpenAuthData" :label="0" disabled
-              >否</el-radio
-            >
+            <el-radio v-model="FormData.OpenAuthData" :label="1" disabled>是</el-radio>
+            <el-radio v-model="FormData.OpenAuthData" :label="0" disabled>否</el-radio>
           </div>
           <div class="lineStyle"></div>
         </div>
@@ -56,10 +42,7 @@
           <span class="ListName">账号变更为闲置状态的不登录时间（天）</span>
           <div class="riaStyle">
             <el-form-item prop="UserIdledays">
-              <el-input
-                v-model.trim="FormData.UserIdledays"
-                placeholder="请输入"
-              ></el-input>
+              <el-input v-model.trim="FormData.UserIdledays" placeholder="请输入"></el-input>
             </el-form-item>
           </div>
           <div class="lineStyle"></div>
@@ -68,10 +51,7 @@
           <span class="ListName">登录后锁定系统的不操作时间（分钟）</span>
           <div class="riaStyle">
             <el-form-item prop="LockMins">
-              <el-input
-                v-model.trim="FormData.LockMins"
-                placeholder="请输入"
-              ></el-input>
+              <el-input v-model.trim="FormData.LockMins" placeholder="请输入"></el-input>
             </el-form-item>
           </div>
           <div class="lineStyle"></div>
@@ -81,11 +61,7 @@
           <div class="riaStyle1">
             <div>
               <el-form-item prop="PwdLengthBegin">
-                <el-input
-                  class="ipt1"
-                  v-model.trim="FormData.PwdLengthBegin"
-                  placeholder="最少位数"
-                ></el-input>
+                <el-input class="ipt1" v-model.trim="FormData.PwdLengthBegin" placeholder="最少位数"></el-input>
               </el-form-item>
               <div class="lineStyle1"></div>
             </div>
@@ -93,11 +69,7 @@
             <span class="zhi">至</span>
             <div>
               <el-form-item prop="PwdLengthEnd">
-                <el-input
-                  class="ipt2"
-                  v-model.trim="FormData.PwdLengthEnd"
-                  placeholder="最多位数"
-                ></el-input>
+                <el-input class="ipt2" v-model.trim="FormData.PwdLengthEnd" placeholder="最多位数"></el-input>
               </el-form-item>
               <div class="lineStyle2"></div>
             </div>
@@ -106,18 +78,8 @@
         <div class="boxList">
           <span class="ListName">密码组成结构</span>
           <div class="riaStyle">
-            <el-checkbox-group
-              v-model="checkedList"
-              @change="PwdStrucChange"
-              :min="1"
-            >
-              <el-checkbox
-                v-for="(item, index) in PwdStrucList"
-                :label="item.id"
-                :key="index"
-                :checked="item.isChecked"
-                >{{ item.name }}</el-checkbox
-              >
+            <el-checkbox-group v-model="checkedList" @change="PwdStrucChange" :min="1">
+              <el-checkbox v-for="(item, index) in PwdStrucList" :label="item.id" :key="index" :checked="item.isChecked">{{ item.name }}</el-checkbox>
             </el-checkbox-group>
           </div>
           <div class="lineStyle"></div>
@@ -134,10 +96,7 @@
           <span class="ListName">密码有效时长（天）</span>
           <div class="riaStyle">
             <el-form-item prop="PwdValidtime">
-              <el-input
-                v-model.trim="FormData.PwdValidtime"
-                placeholder="请输入"
-              ></el-input>
+              <el-input v-model.trim="FormData.PwdValidtime" placeholder="请输入"></el-input>
             </el-form-item>
           </div>
           <div class="lineStyle"></div>
@@ -146,10 +105,7 @@
           <span class="ListName">允许试错次数（次数）</span>
           <div class="riaStyle">
             <el-form-item prop="LoginError">
-              <el-input
-                v-model.trim="FormData.LoginError"
-                placeholder="请输入"
-              ></el-input>
+              <el-input v-model.trim="FormData.LoginError" placeholder="请输入"></el-input>
             </el-form-item>
           </div>
           <div class="lineStyle"></div>
@@ -158,10 +114,7 @@
           <span class="ListName">密码找回联系方式</span>
           <div class="riaStyle">
             <el-form-item prop="PwdMessage">
-              <el-input
-                v-model.trim="FormData.PwdMessage"
-                placeholder="请输入"
-              ></el-input>
+              <el-input v-model.trim="FormData.PwdMessage" placeholder="请输入"></el-input>
             </el-form-item>
           </div>
           <div class="lineStyle"></div>
@@ -169,24 +122,21 @@
         <div class="boxList">
           <span class="ListName">是否启用简易验证码</span>
           <div class="riaStyle">
-            <el-radio v-model="FormData.SimpleValidCodeMode" :label="1"
-              >是</el-radio
-            >
-            <el-radio v-model="FormData.SimpleValidCodeMode" :label="0"
-              >否</el-radio
-            >
+            <el-radio v-model="FormData.SimpleValidCodeMode" :label="1">是</el-radio>
+            <el-radio v-model="FormData.SimpleValidCodeMode" :label="0">否</el-radio>
           </div>
-          <div class="lineStyle" style="margin-bottom: 70px"></div>
+          <div class="lineStyle"></div>
         </div>
       </el-form>
     </div>
     <div class="asideBox">
-      <el-button v-is="['system_basic_page']" type="primary"
-        >系统基础设置</el-button
-      >
-      <el-button v-is="['system_logintac_page']" @click="gotoLogin"
-        >登录策略</el-button
-      >
+      <el-button v-is="['system_basic_page']" type="primary">系统基础设置</el-button>
+      <el-button v-is="['system_logintac_page']" @click="gotoLogin">登录策略</el-button>
+      <el-button style="margin-top:24px" v-is="['system_logintac_page']" @click="gotoData('serviceManagement')">服务管理</el-button>
+      <el-button style="margin-top:24px" v-is="['system_logintac_page']" @click="gotoData('protocolManagement')">协议管理</el-button>
+      <el-button style="margin-top:24px" v-is="['system_logintac_page']" @click="gotoData('queryTemplate')">查询模板</el-button>
+      <el-button style="margin-top:24px" v-is="['system_logintac_page']" @click="gotoData('datastructure')">数据结构</el-button>
+      <el-button style="margin-top:24px" v-is="['system_logintac_page']" @click="gotoData('sourceservice')">数据源服务</el-button>
     </div>
   </div>
 </template>
@@ -196,7 +146,7 @@ import { GetSystemSet, SaveSystemSet } from "@/api/systemConfiguration";
 import { positiveIntegerValidator } from "@/utils/validate";
 import { lengthValidator } from "@/utils/validate";
 export default {
-  data() {
+  data () {
     return {
       isShow: false,
       FormData: {
@@ -213,7 +163,7 @@ export default {
         PwdValidtime: 0,
         LoginError: 0,
         PwdMessage: "",
-        SimpleValidCodeMode: 0,
+        SimpleValidCodeMode: 0
       },
       rules: {
         UserIdledays: [
@@ -309,7 +259,7 @@ export default {
   },
   watch: {
     FormData: {
-      handler(val) {
+      handler (val) {
         if (
           JSON.stringify(val) != this.oldFormData &&
           this.oldFormData != null
@@ -334,7 +284,7 @@ export default {
     //   }
     // }
   },
-  created() {
+  created () {
     this.getSystemSet();
     // let SystemSetInfo = JSON.parse(this.$store.state.app.systemSet);
     // if (SystemSetInfo) {
@@ -347,10 +297,13 @@ export default {
     // }
   },
   methods: {
-    gotoLogin() {
+    gotoLogin () {
       this.$router.push("/LoginPolicy");
     },
-    getSystemSet() {
+    gotoData (name) {
+      this.$router.push(`/dataBase/${name}`);
+    },
+    getSystemSet () {
       GetSystemSet({})
         .then((response) => {
           const { returnData } = response;
@@ -364,7 +317,7 @@ export default {
           reject(error);
         });
     },
-    PwdStrucChange(data) {
+    PwdStrucChange (data) {
       let count = 0;
       for (let i = 0; i < data.length; i++) {
         count = count + Number(data[i]);
@@ -372,7 +325,7 @@ export default {
       }
       console.log(this.FormData);
     },
-    getPwdStruc(data) {
+    getPwdStruc (data) {
       let dataList = data.split("");
       if (dataList[0] == 1) {
         this.checkedList.push("1000");
@@ -387,7 +340,7 @@ export default {
         this.checkedList.push("0001");
       }
     },
-    save() {
+    save () {
       if (this.FormData.PwdStruc == 11) {
         this.FormData.PwdStruc = "0011";
       } else if (this.FormData.PwdStruc == 101) {