|
|
@@ -1,352 +1,565 @@
|
|
|
<!--
|
|
|
* @Date: 2022-03-24 09:55:13
|
|
|
- * @LastEditTime: 2022-03-24 18:13:32
|
|
|
+ * @LastEditTime: 2022-04-26 18:09:34
|
|
|
* @LastEditors: your name
|
|
|
- * @Description: 服务管理-编辑接口
|
|
|
+ * @Description: 服务管理-编辑服务
|
|
|
* have a nice day!
|
|
|
-->
|
|
|
|
|
|
<template>
|
|
|
- <div class="interface-edit">
|
|
|
- <el-container class="scrollbar">
|
|
|
- <el-container>
|
|
|
- <el-main class="part part1">
|
|
|
- <el-form
|
|
|
- ref="form"
|
|
|
- :model="formData"
|
|
|
- class="form"
|
|
|
- label-position="right"
|
|
|
- label-width="132px"
|
|
|
- >
|
|
|
- <div class="header">
|
|
|
- <span class="title">服务</span>
|
|
|
- <el-form-item label="是否启用">
|
|
|
- <el-radio-group v-model="formData.active">
|
|
|
- <el-radio label="1">是</el-radio>
|
|
|
- <el-radio label="0">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- >保存</el-button>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="main">
|
|
|
- <el-form-item
|
|
|
- label="名称"
|
|
|
- prop="name"
|
|
|
+ <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"
|
|
|
+ >保存</el-button>
|
|
|
+ </header>
|
|
|
+ <main class="content">
|
|
|
+ <el-form
|
|
|
+ ref="serviceForm"
|
|
|
+ class="service-form"
|
|
|
+ :model="serviceForm"
|
|
|
+ label-position="right"
|
|
|
+ label-width="72px"
|
|
|
+ size="mini"
|
|
|
>
|
|
|
- <el-input
|
|
|
- v-model="formData.name"
|
|
|
- width="224px"
|
|
|
- placeholder="请输入名称"
|
|
|
- size="small"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="描述"
|
|
|
- prop="desc"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="formData.desc"
|
|
|
- placeholder="请输入描述"
|
|
|
- type="textarea"
|
|
|
- :auto-size="{ minRows: 2 }"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-row>
|
|
|
+ <el-form-item
|
|
|
+ label="服务名称"
|
|
|
+ prop="name"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="serviceForm.name"
|
|
|
+ width="240px"
|
|
|
+ placeholder="请输入服务名称"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否启用">
|
|
|
+ <el-radio-group v-model="serviceForm.sync">
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="服务描述"
|
|
|
+ prop="desc"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="serviceForm.desc"
|
|
|
+ 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">
|
|
|
+ <el-row :gutter="16">
|
|
|
<el-col :span="8">
|
|
|
- <el-form-item label="接口类型">
|
|
|
- <el-select
|
|
|
- v-model="formData.type"
|
|
|
- size="small"
|
|
|
- placeholder="请选择"
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-button-plus"
|
|
|
+ @click="btnPlusClickHandler('machine')"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="{ value, label } in formOptions.type"
|
|
|
- :key="value"
|
|
|
- :value="value"
|
|
|
- :label="label"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="接口协议">
|
|
|
- <el-select
|
|
|
- v-model="formData.protocol"
|
|
|
- size="small"
|
|
|
- placeholder="请选择"
|
|
|
+ <el-col
|
|
|
+ v-for="(machine, index) in checkedMachineList"
|
|
|
+ :key="machine.id"
|
|
|
+ :span="8"
|
|
|
+ >
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-btn-close"
|
|
|
+ @click="removeItem(index, 'machine')"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="{ value, label } in formOptions.protocol"
|
|
|
- :key="value"
|
|
|
- :value="value"
|
|
|
- :label="label"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ machine.machineName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-form-item
|
|
|
- label="详细配置"
|
|
|
- prop="options"
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="part">
|
|
|
+ <header class="title">
|
|
|
+ <p class="manageTitle">输入</p>
|
|
|
+ </header>
|
|
|
+ <main class="content">
|
|
|
+ <el-form
|
|
|
+ ref="inputForm"
|
|
|
+ class="input-form"
|
|
|
+ :model="inputForm"
|
|
|
+ label-position="right"
|
|
|
+ label-width="72px"
|
|
|
+ size="mini"
|
|
|
>
|
|
|
- <el-input
|
|
|
- v-model="formData.options"
|
|
|
- placeholder="请输入详细配置"
|
|
|
- type="textarea"
|
|
|
- :auto-size="{ minRows: 2 }"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="是否开启本地缓存">
|
|
|
- <el-radio-group v-model="formData.cache">
|
|
|
- <el-radio label="1">是</el-radio>
|
|
|
- <el-radio label="0">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="目标数据类型">
|
|
|
- <el-select
|
|
|
- v-model="formData.dataType"
|
|
|
- size="small"
|
|
|
- placeholder="请选择"
|
|
|
+ <el-form-item
|
|
|
+ label="来源"
|
|
|
+ prop="source"
|
|
|
+ >
|
|
|
+ <el-select v-model="inputForm.source">
|
|
|
+ <el-option
|
|
|
+ v-for="item in sourceOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="并发线程数"
|
|
|
+ prop="concurrent"
|
|
|
+ label-width="86px"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="{ value, label } in formOptions.dataType"
|
|
|
- :key="value"
|
|
|
- :value="value"
|
|
|
- :label="label"
|
|
|
+ <el-input
|
|
|
+ v-model="inputForm.concurrent"
|
|
|
+ width="166px"
|
|
|
+ placeholder="请输入并发线程数"
|
|
|
+ clearable
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="目标数据配置"
|
|
|
- prop="dataOptions"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="formData.dataOptions"
|
|
|
- placeholder="请输入目标数据配置"
|
|
|
- type="textarea"
|
|
|
- :auto-size="{ minRows: 2 }"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </el-main>
|
|
|
- <el-aside
|
|
|
- class="part part2"
|
|
|
- width="502px"
|
|
|
- >
|
|
|
- <div class="header">
|
|
|
- <span class="title">节点管理</span>
|
|
|
- <el-button
|
|
|
- class="button-white"
|
|
|
- size="small"
|
|
|
- >新增</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="来源配置"
|
|
|
+ prop="config"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="inputForm.config"
|
|
|
+ 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">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-button-plus"
|
|
|
+ @click="btnPlusClickHandler('source')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ v-for="item in checkedSourceList"
|
|
|
+ :key="item.id"
|
|
|
+ :span="8"
|
|
|
+ >
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div class="card-btn-close" @click="removeItem(index, 'source')">
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ item.sourceName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </main>
|
|
|
</div>
|
|
|
- <div class="main">
|
|
|
- <el-row :gutter="22">
|
|
|
- <el-col
|
|
|
- v-for="node in nodeList"
|
|
|
- :key="node.id"
|
|
|
- :span="12"
|
|
|
- >
|
|
|
- <div class="interface-edit-card">
|
|
|
- <div class="card-button-close">
|
|
|
- <i class="el-icon-close" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="part">
|
|
|
+ <header class="title">
|
|
|
+ <p class="manageTitle">数据处理</p>
|
|
|
+ </header>
|
|
|
+ <main class="content">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-button-plus"
|
|
|
+ @click="btnPlusClickHandler('process')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-header">
|
|
|
- <span>{{ node.nodeName }}</span>
|
|
|
- <el-checkbox v-model="node.isChecked" />
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ v-for="item in checkedProcessList"
|
|
|
+ :key="item.id"
|
|
|
+ :span="8"
|
|
|
+ >
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div class="card-btn-close" @click="removeItem(index, 'process')">
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ item.processName }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-main">
|
|
|
- <span>{{ node.IPAddr }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </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"
|
|
|
+ >新增</el-button>
|
|
|
+ </header>
|
|
|
+ <main class="content">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col
|
|
|
+ v-for="item in targetList"
|
|
|
+ :key="item.id"
|
|
|
+ :span="24"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="service-edit-card"
|
|
|
+ style="height: 160px"
|
|
|
+ >
|
|
|
+ <div class="card-btn-close">
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ item.targetName }}</span>
|
|
|
+ <i class="icon-edit" />
|
|
|
+ </div>
|
|
|
+ <div class="card-main">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="left">目标配置：</div>
|
|
|
+ <div
|
|
|
+ class="multiple-ellipsis"
|
|
|
+ :title="item.config"
|
|
|
+ >{{ item.config }}</div>
|
|
|
+ </div>
|
|
|
+ <span>{{ item.dataSource }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <Dialog
|
|
|
+ :flag="dialogVisible"
|
|
|
+ width="500px"
|
|
|
+ >
|
|
|
+ <template v-if="dialogContentType === 'machine'">
|
|
|
+ <div class="dialog-checkbox">
|
|
|
+ <div class="title">部署机器选择</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-checkbox-group v-model="tempCheckedKeys">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="item in machineList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.machineName"
|
|
|
+ />
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="foot">
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ class="r25 r26"
|
|
|
+ @click="checkedSubmitHandler('machine')"
|
|
|
+ >提交</el-button>
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ class="r26"
|
|
|
+ @click="closeDialog()"
|
|
|
+ >取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="dialogContentType === 'source'">
|
|
|
+ <div class="dialog-checkbox">
|
|
|
+ <div class="title">源数据选择</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-checkbox-group v-model="tempCheckedKeys">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="item in sourceList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.sourceName"
|
|
|
+ />
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="foot">
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ class="r25 r26"
|
|
|
+ @click="checkedSubmitHandler('source')"
|
|
|
+ >提交</el-button>
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ class="r26"
|
|
|
+ @click="closeDialog()"
|
|
|
+ >取消</el-button>
|
|
|
</div>
|
|
|
- </el-aside>
|
|
|
- </el-container>
|
|
|
- <el-footer
|
|
|
- class="part part3"
|
|
|
- height="360px"
|
|
|
- >
|
|
|
- <div class="header">
|
|
|
- <span class="title">源数据管理</span>
|
|
|
- <el-button
|
|
|
- class="button-white"
|
|
|
- size="small"
|
|
|
- >新增</el-button>
|
|
|
</div>
|
|
|
- <div class="main">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col
|
|
|
- v-for="source in sourceList"
|
|
|
- :key="source.id"
|
|
|
- :span="4"
|
|
|
- >
|
|
|
- <div class="interface-edit-card">
|
|
|
- <div class="card-button-close">
|
|
|
- <i class="el-icon-close" />
|
|
|
- </div>
|
|
|
- <div class="card-header">
|
|
|
- <span>{{ source.sourceName }}</span>
|
|
|
- <el-checkbox v-model="source.isChecked" />
|
|
|
- </div>
|
|
|
- <div class="card-main">
|
|
|
- <span>{{ source.desc }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </template>
|
|
|
+ <template v-if="dialogContentType === 'process'">
|
|
|
+ <div class="dialog-checkbox">
|
|
|
+ <div class="title">部署机器选择</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-checkbox-group v-model="tempCheckedKeys">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="item in processList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.processName"
|
|
|
+ />
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="foot">
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ class="r25 r26"
|
|
|
+ @click="checkedSubmitHandler('process')"
|
|
|
+ >提交</el-button>
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ class="r26"
|
|
|
+ @click="closeDialog()"
|
|
|
+ >取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="dialogContentType === 'output'">
|
|
|
+ <div class="dialog-form">
|
|
|
+ <div class="title">数据输出编辑</div>
|
|
|
+ <div class="content">
|
|
|
+ </div>
|
|
|
+ <div class="foot">
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ class="r25 r26"
|
|
|
+ @click="closeDialog()"
|
|
|
+ >提交</el-button>
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ class="r26"
|
|
|
+ @click="closeDialog()"
|
|
|
+ >取消</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-footer>
|
|
|
- </el-container>
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Dialog from '@/layout/components/Dialog'
|
|
|
+
|
|
|
+const keyMap = {
|
|
|
+ machine: 'checkdeMachineKeys',
|
|
|
+ source: 'checkedSourceKeys',
|
|
|
+ process: 'checkedProcessKeys'
|
|
|
+}
|
|
|
+
|
|
|
export default {
|
|
|
+ components: { Dialog },
|
|
|
data() {
|
|
|
return {
|
|
|
- formData: {
|
|
|
- active: '1',
|
|
|
+ dialogContentType: null,
|
|
|
+ tempCheckedKeys: [],
|
|
|
+ serviceForm: {
|
|
|
name: '',
|
|
|
- desc: '',
|
|
|
- type: '',
|
|
|
- protocol: '',
|
|
|
- options: '',
|
|
|
- cache: '1',
|
|
|
- dataType: '',
|
|
|
- dataOptions: ''
|
|
|
+ sync: 1,
|
|
|
+ desc: ''
|
|
|
},
|
|
|
- formOptions: {
|
|
|
- type: [
|
|
|
- {
|
|
|
- value: '1',
|
|
|
- label: '主动拉取'
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2',
|
|
|
- label: '自动拉取'
|
|
|
- }
|
|
|
- ],
|
|
|
- protocol: [
|
|
|
- {
|
|
|
- value: 'IBMMQ',
|
|
|
- label: 'IBMMQ'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'http',
|
|
|
- label: 'http'
|
|
|
- }
|
|
|
- ],
|
|
|
- dataType: [
|
|
|
- {
|
|
|
- value: 'kafka',
|
|
|
- label: 'kafka'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'MQ',
|
|
|
- label: 'MQ'
|
|
|
- }
|
|
|
- ]
|
|
|
+ inputForm: {
|
|
|
+ source: '',
|
|
|
+ concurrent: null,
|
|
|
+ config: ''
|
|
|
},
|
|
|
- nodeList: [
|
|
|
+ sourceOptions: [
|
|
|
{
|
|
|
id: 0,
|
|
|
- nodeName: '首都机场BHS',
|
|
|
- IPAddr: '192.168.1.1',
|
|
|
- isChecked: false
|
|
|
+ value: 0,
|
|
|
+ label: '来源1'
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
- nodeName: '主采集节点',
|
|
|
- IPAddr: '10.12.13.112',
|
|
|
- isChecked: true
|
|
|
+ value: 1,
|
|
|
+ label: '来源2'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ machineList: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ machineName: '主动采集服务器'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ machineName: '备用采集服务器'
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
- nodeName: '备用采集节点',
|
|
|
- IPAddr: '10.12.13.112',
|
|
|
- isChecked: true
|
|
|
+ machineName: '解析服务器'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ machineName: '存储服务器'
|
|
|
}
|
|
|
],
|
|
|
- checkedNodeList: [],
|
|
|
+ checkdeMachineKeys: [],
|
|
|
sourceList: [
|
|
|
{
|
|
|
id: 0,
|
|
|
sourceName: 'BSM',
|
|
|
- desc: '行李源报文',
|
|
|
- isChecked: true
|
|
|
+ desc: '行李源报文'
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
sourceName: 'BPM',
|
|
|
- desc: '行李处理报文',
|
|
|
- isChecked: true
|
|
|
+ desc: '行李处理报文'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ checkedSourceKeys: [],
|
|
|
+ processList: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ processName: '数据包合法性检测'
|
|
|
},
|
|
|
{
|
|
|
- id: 2,
|
|
|
- sourceName: '航班动态',
|
|
|
- desc: '国航全球航班计划及航班动态信息',
|
|
|
- isChecked: false
|
|
|
+ id: 1,
|
|
|
+ processName: '数据解析'
|
|
|
}
|
|
|
],
|
|
|
- sourceCheckedList: []
|
|
|
+ checkedProcessKeys: [],
|
|
|
+ targetList: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ targetName: 'Kafka',
|
|
|
+ config:
|
|
|
+ '"bootstrap.servers": "192.168.3.74:9092","key.serializer": "org.apache.kafka.common.serialization.StringSerializer","value.serializerXXXXXXXXXXXXXXXXXXXXXXX',
|
|
|
+ dataSource: 'BSM报文'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ targetName: 'Kafka',
|
|
|
+ config:
|
|
|
+ '"bootstrap.servers": "192.168.3.74:9092","key.serializer": "org.apache.kafka.common.serialization.StringSerializer","value.serializerXXXXXXXXXXXXXXXXXXXXXXX',
|
|
|
+ dataSource: 'BSM解析结果'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ targetName: 'Mysql',
|
|
|
+ config:
|
|
|
+ '"bootstrap.servers": "192.168.3.74:9092","key.serializer": "org.apache.kafka.common.serialization.StringSerializer","value.serializerXXXXXXXXXXXXXXXXXXXXXXX',
|
|
|
+ dataSource: '行李基础数据'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dialogVisible() {
|
|
|
+ return Boolean(this.dialogContentType)
|
|
|
+ },
|
|
|
+ checkedMachineList() {
|
|
|
+ return this.machineList.filter(item => this.checkdeMachineKeys.includes(item.machineName))
|
|
|
+ },
|
|
|
+ checkedSourceList() {
|
|
|
+ return this.sourceList.filter(item => this.checkedSourceKeys.includes(item.sourceName))
|
|
|
+ },
|
|
|
+ checkedProcessList() {
|
|
|
+ return this.processList.filter(item => this.checkedProcessKeys.includes(item.processName))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ btnPlusClickHandler(type) {
|
|
|
+ this.tempCheckedKeys = [...this[keyMap[type]]]
|
|
|
+ this.dialogContentType = type
|
|
|
+ },
|
|
|
+ checkedSubmitHandler(type) {
|
|
|
+ this[keyMap[type]] = [...this.tempCheckedKeys]
|
|
|
+ this.dialogContentType = null
|
|
|
+ },
|
|
|
+ closeDialog() {
|
|
|
+ this.dialogContentType = null
|
|
|
+ },
|
|
|
+ removeItem(index, type) {
|
|
|
+ this[keyMap[type]].splice(index, 1)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.interface-edit {
|
|
|
- padding: 16px 0 8px;
|
|
|
+.service-edit {
|
|
|
+ margin: 0 -24px;
|
|
|
+ padding-bottom: 16px;
|
|
|
overflow: hidden;
|
|
|
- > .scrollbar {
|
|
|
+ .scrollbar {
|
|
|
+ height: calc(100vh - 120px);
|
|
|
padding: 0 24px;
|
|
|
- height: calc(100vh - 104px);
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
::v-deep .part {
|
|
|
+ height: 640px;
|
|
|
+ padding: 32px 24px 0 24px;
|
|
|
background: #ffffff;
|
|
|
- padding: 24px 33px 20px 24px;
|
|
|
- .header {
|
|
|
+ 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;
|
|
|
- .title {
|
|
|
- flex: 1;
|
|
|
- position: relative;
|
|
|
- padding-left: 16px;
|
|
|
- height: 20px;
|
|
|
- line-height: 32px;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 4px;
|
|
|
- height: 20px;
|
|
|
- background: #2d67e3;
|
|
|
- top: 6px;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
+ margin-bottom: 32px;
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .manageTitle {
|
|
|
+ line-height: 30px;
|
|
|
}
|
|
|
- button {
|
|
|
+ .el-button {
|
|
|
width: 64px;
|
|
|
height: 32px;
|
|
|
- &.button-white {
|
|
|
- background: #ffffff;
|
|
|
+ border: none;
|
|
|
+ &.btn-white {
|
|
|
+ background-color: #ffffff;
|
|
|
border: 1px solid #92ace2;
|
|
|
color: #2d67e3;
|
|
|
}
|
|
|
+ &:hover {
|
|
|
+ background-color: #487be8;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
label,
|
|
|
@@ -356,8 +569,9 @@ export default {
|
|
|
optgroup,
|
|
|
select,
|
|
|
textarea {
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ font-family: Helvetica, Microsoft YaHei;
|
|
|
font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
label {
|
|
|
color: #303133;
|
|
|
@@ -365,83 +579,146 @@ export default {
|
|
|
input {
|
|
|
color: #101116;
|
|
|
}
|
|
|
+ .el-input__inner,
|
|
|
+ .el-textarea__inner {
|
|
|
+ padding-left: 8px;
|
|
|
+ padding-right: 8px;
|
|
|
+ }
|
|
|
.el-radio {
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
- .interface-edit-card {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 16px 14px 16px 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-button-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: space-between;
|
|
|
- color: #101116;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .card-main {
|
|
|
- color: #afb4bf;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- &.part1 {
|
|
|
- .header {
|
|
|
- .el-form-item {
|
|
|
- .el-form-item__label {
|
|
|
- line-height: 34px;
|
|
|
+ .content {
|
|
|
+ margin: 0;
|
|
|
+ > .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-button-plus {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
- .el-form-item__content {
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
+ .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: 32px;
|
|
|
+ .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 {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .main {
|
|
|
- span {
|
|
|
- line-height: 32px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .part2 {
|
|
|
- margin-left: 16px;
|
|
|
- .main {
|
|
|
- margin-top: 4px;
|
|
|
- .interface-edit-card {
|
|
|
- margin-top: 20px;
|
|
|
- height: 104px;
|
|
|
+ }
|
|
|
+ ::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%;
|
|
|
+ }
|
|
|
}
|
|
|
- .part3 {
|
|
|
- margin-top: 16px;
|
|
|
- .main {
|
|
|
- margin-top: 4px;
|
|
|
- .interface-edit-card {
|
|
|
- margin-top: 20px;
|
|
|
- height: 120px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ ::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 {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ font-family: Helvetica, Microsoft YaHei;
|
|
|
+ color: #303133;
|
|
|
}
|
|
|
}
|
|
|
}
|
