服务管理修改

src/components/Table/index.vue

@@ -3,7 +3,7 @@
     <div :style="dataTableContentStyle" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
       <div :class="isStatus ? 'flex' : 'flex-end'" class="data-table-btn">
         <div v-if="isStatus" class="vStatus">
-          <slot />
+          <slot name="header" />
         </div>
         <el-button v-if="isBtn" size="small" @click="handleAdd" plain type="primary">新增</el-button>
       </div>
@@ -11,6 +11,14 @@
         <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-if="isStatus" width="55">
+              <template slot-scope="scope">
+                <div class="tableStatus">
+                  <div v-if="filteredTableData[scope.$index].runState == '运行'" class="status0"><span class="icon"></span></div>
+                  <div v-else class="status1"><span class="icon"></span></div>
+                </div>
+              </template>
+            </el-table-column>
             <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">
@@ -38,10 +46,15 @@
                 </span>
               </template>
             </el-table-column>
-            <el-table-column fixed="right" label="操作" width="180">
+            <el-table-column fixed="right" label="操作" :width="fixedWidth">
               <template slot-scope="scope">
                 <div class="hd-td">
                   <div class="hd-tr">
+                    <template v-if="isStatus">
+                      <el-button type="text" @click="handleLook(scope.row)" size="small" class="rmScs">查看</el-button>
+                      <el-button type="text" v-if="scope.row.runState == '停止'" size="small" class="rmScs">启动</el-button>
+                      <el-button type="text" v-if="scope.row.runState == '运行'" size="small" class="rmScs">停止</el-button>
+                    </template>
                     <!-- <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>
@@ -217,6 +230,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    //操作列宽度
+    fixedWidth: {
+      type: String,
+      default: "180px",
+    }
   },
   components: { Dialog, NoData },
   data () {
@@ -717,6 +735,15 @@ export default {
         },
       });
     },
+    // 表格-查看
+    handleLook (row) {
+      this.$router.push({
+        name: 'serviceTopology',
+        params: {
+          serviceID: row.serviceID,
+        },
+      });
+    },
     // 表格-选中行
     selectHandler (selection, row) {
       this.$emit("selection-change", selection, row);
@@ -837,7 +864,30 @@ export default {
         color: #ffffff;
       }
     }
-
+    .tableStatus {
+      font-size: 14px;
+      .icon {
+        width: 14px;
+        height: 14px;
+        background: #2d67e3;
+        border-radius: 2px;
+        display: inline-block;
+        vertical-align: middle;
+        position: relative;
+        top: -2px;
+      }
+      .status0 {
+        position: relative;
+        top: 5px;
+      }
+      .status1 {
+        position: relative;
+        top: 5px;
+        .icon {
+          background-color: #afb4bf;
+        }
+      }
+    }
     .el-table__fixed-right {
       thead {
         div {

src/components/nodata/index.vue

@@ -20,7 +20,7 @@ export default {
     }
   },
   computed: {
-    style() {
+    style () {
       const that = this
       const style = {
         width: typeof that.imageWidth === 'number' ? that.imageWidth + 'px' : that.imageWidth,
@@ -39,11 +39,12 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: #fff;
   .nodata_image {
     overflow: hidden;
     img {
       height: 100%;
-      object-fit: cover
+      object-fit: cover;
     }
   }
 }

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

@@ -13,7 +13,7 @@ const systemSettingsRoutes = {
         {
           path: '/systemSettings',
           name: 'serviceManagement',
-          component: { render(c) { return c('router-view') } },
+          component: { render (c) { return c('router-view') } },
           redirect: '/systemSettings',
           meta: { title: '服务管理' },
           hidden: true,
@@ -28,7 +28,25 @@ const systemSettingsRoutes = {
               path: '/systemSettings/serviceEdit',
               name: 'serviceEdit',
               component: () => import('@/views/systemSettings/views/serviceManagement/serviceEdit'),
-              meta: { title: '服务编辑' },
+              meta: { title: '编辑服务监控' },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            },
+            {
+              path: '/systemSettings/serviceAdd',
+              name: 'serviceAdd',
+              component: () => import('@/views/systemSettings/views/serviceManagement/serviceAdd'),
+              meta: { title: '新增服务监控' },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            },
+            {
+              path: '/systemSettings/serviceTopology',
+              name: 'serviceTopology',
+              component: () => import('@/views/systemSettings/views/serviceManagement/serviceTopology'),
+              meta: { title: '服务拓扑' },
               hidden: false,
               isAlone: true,
               src: require('@/assets/nav/ic_setting_top@2x.png')
@@ -56,7 +74,7 @@ const systemSettingsRoutes = {
         {
           path: '/systemSettings/queryTemplate',
           name: 'queryTemplate',
-          component: { render(c) { return c('router-view') } },
+          component: { render (c) { return c('router-view') } },
           redirect: '/systemSettings/queryTemplate',
           meta: { title: '查询模板' },
           hidden: true,
@@ -98,7 +116,7 @@ const systemSettingsRoutes = {
         {
           path: '/systemSettings/datastructure',
           name: 'datastructure',
-          component: { render(c) { return c('router-view') } },
+          component: { render (c) { return c('router-view') } },
           meta: { title: '数据结构' },
           hidden: true,
           src: require('@/assets/nav/ic_setting_top_default.png'),

src/styles/index.scss

@@ -590,3 +590,7 @@ li {
 input[type='number'] {
   line-height: 1 !important;
 }
+
+.el-input__inner,.el-button,.el-textarea__inner{
+  border-radius: 2px;
+}

src/views/dataIntegration/views/integrationHome.vue

@@ -55,7 +55,7 @@
     </div>
   </div>
 </template>
-{
+
 <script>
 import sankeyChart from './sankeyChart.vue'
 import graphChart from './graphChart.vue'

src/views/systemSettings/views/serviceManagement/components/sankeyChart.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="integration__cont__map__cont" id="map"></div>
+</template>
+
+<script>
+//默认节点
+const defaultImg = 'image://' + require('@/assets/topplogy/ic_pulll_default.png');
+
+//默认节点-错误
+const defaultImgError = 'image://' + require('@/assets/topplogy/ic_pull_error.png');
+
+//默认节点-选中
+const defaultImgCheck = 'image://' + require('@/assets/topplogy/ic_pulll_check.png');
+
+//kafka节点
+const kafkaImg = 'image://' + require('@/assets/topplogy/ic_Kafka_default.png');
+
+//kafka节点-错误
+const kafkaImgError = 'image://' + require('@/assets/topplogy/ic_Kafka_error.png');
+
+//kafka节点-选中
+const kafkaImgCheck = 'image://' + require('@/assets/topplogy/ic_Kafka_check.png');
+
+// 节点数据
+export default {
+  name: '',
+  data () {
+    return {
+      myChart: null,
+      desc: 300, // 防抖时间
+      nodeDataList: [
+        {
+          name: "星盟SBH",
+          linkTargetName: 'Kafka原始报文',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 240],
+          draggable: false,
+          fixed: true,
+          symbol: defaultImg,
+          symbolSize: 56
+        },
+        //节点B,C,D ....n
+        {
+          name: "Kafka原始报文",
+          linkTargetName: 'BSMBPM报文解析',
+          linkValue: ' ',
+          coordConfig: {
+            level: '1',
+          },
+          symbol: kafkaImgCheck,
+          symbolSize: 56,
+          draggable: false,
+          value: [20, 240]
+        }, {
+          name: "BSMBPM报文解析",
+          linkTargetName: 'Kafka报文解析结果',
+          linkValue: ' ',
+          coordConfig: {
+            level: '2',
+          },
+          symbol: defaultImgError,
+          symbolSize: 56,
+          draggable: false,
+          value: [30, 240]
+        }, {
+          name: "BSMBPM报文解析 ",
+          linkTargetName: 'Mysql数据库行李表',
+          linkValue: ' ',
+          coordConfig: {
+            level: '2',
+          },
+          symbol: defaultImgError,
+          symbolSize: 56,
+          draggable: false,
+          value: [30, 240]
+        }, {
+          name: "BSMBPM报文解析  ",
+          linkTargetName: 'Mysql数据库行李跟踪表',
+          linkValue: ' ',
+          coordConfig: {
+            level: '2',
+          },
+          symbol: defaultImgError,
+          symbolSize: 56,
+          draggable: false,
+          value: [30, 240]
+        }, {
+          name: "Kafka报文解析结果",
+          linkTargetName: 'Kafka报文解析结果',
+          linkValue: ' ',
+          coordConfig: {
+            level: '3',
+          },
+          symbol: kafkaImg,
+          symbolSize: 56,
+          draggable: false,
+          value: [40, 240]
+        }, {
+          name: "Mysql数据库行李表",
+          linkTargetName: 'Mysql数据库行李表',
+          linkValue: ' ',
+          coordConfig: { level: '3' },
+          symbolSize: 56,
+          symbol: kafkaImg,
+          draggable: false,
+          value: [40, 170],
+        },
+        {
+          name: "Mysql数据库行李跟踪表",
+          linkTargetName: 'Mysql数据库行李跟踪表',
+          linkValue: ' ',
+          coordConfig: { level: '3' },
+          symbolSize: 56,
+          symbol: kafkaImg,
+          draggable: false,
+          value: [40, 90],
+        },
+      ],
+      options: {
+        itemStyle: {
+          normal: {
+            color: "#67C23A",
+          },
+          shadowBlur: 0
+        },
+        textStyle: {
+          color: '#444',
+          fontSize: 16,
+          fontWeight: 600,
+        },
+        grid: {
+          top: 20,
+          bottom: 10,
+          left: 0,
+          right: 0
+        },
+        legend: [{
+          formatter: function (name) {
+            return this.$echarts.format.truncateText(name, 200, '12px', '…');
+          },
+          tooltip: {
+            show: true
+          },
+          selectedMode: 'false',
+          bottom: 20,
+        }],
+        animationDuration: 500,
+        animationEasingUpdate: 'quinticInOut',
+        xAxis: {
+          show: false,
+          type: 'value'
+        },
+        yAxis: {
+          show: false,
+          type: 'value'
+        },
+        series: [{
+          type: 'graph',
+          coordinateSystem: 'cartesian2d',
+          //圆形上面的文字	
+          label: {
+            normal: {
+              position: "bottom",
+              show: true,
+              textStyle: {
+                fontSize: 12
+              },
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: "#409eff",
+            },
+            shadowBlur: 0
+          },
+          lineStyle: {
+            normal: {
+              width: 0,
+              shadowColor: 'none',
+              color: '#ff0000'
+            }
+          },
+          data: [],
+          links: []
+        }]
+      }
+    }
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    options: {
+      handler (obj) {
+        // 生成柱状图
+        this.myChart.setOption(obj)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    const datas = []
+    this.nodeDataList.map(item => {
+      datas.push({
+        source: item.name,
+        value: item.linkValue,
+        target: item.linkTargetName
+      })
+    })
+    this.options.series[0].data = this.nodeDataList
+    this.options.series[0].links = datas
+    this.options.series = this.options.series.concat(this.getCoordDataList())
+    this.myChart = this.$echarts.init(document.getElementById('map'))
+    this.myChart.setOption(this.options)
+    // 事件
+    this.myChart.on('click', params => {
+      console.log(params)
+    })
+    // 监听页面缩放 防止dom重复渲染
+    window.addEventListener('resize', _.debounce(this.handle, this.desc))
+  },
+  beforeDestroy () {
+    // 销毁实例和移除监听
+    if (this.myChart) {
+      this.myChart.dispose()
+      window.removeEventListener('resize', this.handle)
+      this.myChart = null
+    }
+  },
+  methods: {
+    handle () {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    getCoordDataList () {
+      let coorDataDict = {}
+      let defaultConfig = {
+        type: 'lines', //块1,2...n到节点A,B...N
+        coordinateSystem: 'cartesian2d',
+        // animationDelay: 10000,
+        z: 1,
+        effect: {
+          show: true,
+          smooth: true,
+          trailLength: 0,
+          symbol: "arrow",
+          color: '#92A7D5',
+          symbolSize: 10,
+          period: 3,
+          delay: 1500,
+          loop: true,
+        },
+        lineStyle: {
+          normal: {
+            curveness: 0,
+            color: '#92A7D5',
+            width: 1,
+          }
+        },
+        data: []
+      }
+      this.nodeDataList.map(item => {
+        if (item.coordConfig !== undefined) {
+          if (!(item.coordConfig.level in coorDataDict)) {
+            let coorConfig = JSON.parse(JSON.stringify(defaultConfig))
+            if (item.coordConfig.lineStyle !== undefined) {
+              coorConfig.lineStyle = item.coordConfig.lineStyle
+            }
+            if (item.coordConfig.effect !== undefined) {
+              coorConfig.effect = item.coordConfig.effect
+            }
+            coorDataDict[item.coordConfig.level] = coorConfig
+          }
+
+          let coordData = [
+            item.value,
+            this.nodeDataList.filter(i => i.name == item.linkTargetName)[0].value || this.nodeDataList.filter(i => i.name == item.linkTargetName)[1].value
+          ]
+          coorDataDict[item.coordConfig.level].data.push({
+            coords: coordData
+          })
+          if (item.coordConfig.bilateral) {
+            coorDataDict[item.coordConfig.level].data.push({
+              coords: coordData.reverse()
+            })
+          }
+        }
+
+      })
+      return Object.values(coorDataDict)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.integration__cont__map__cont {
+  height: calc(100vh - 330px);
+}
+</style>

src/views/systemSettings/views/serviceManagement/serviceAdd.vue

@@ -0,0 +1,439 @@
+<!--
+ * @Date: 2022-03-24 09:55:13
+ * @LastEditTime: 2022-06-30 16:35:44
+ * @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">
+                <div class="flex-wrap">
+                  <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-button style="margin-left:20px;height:28px;line-height: 0px;" size="small" @click="createDialogVisible = true" type="primary">新增</el-button>
+                </div>
+              </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>
+    <Dialog :flag="createDialogVisible" width="464px">
+      <div class="dialog-create">
+        <div class="title">新增数据来源</div>
+        <div class="content">
+          <el-form ref="sourceForm" label-width="100px" :model="formLabelAlign">
+            <el-form-item label="数据源名称">
+              <el-input size="small" v-model="formLabelAlign.sourceName"></el-input>
+            </el-form-item>
+            <el-form-item label="协议名称">
+              <el-select size="small" style="width:100%;" v-model="formLabelAlign.agreementName" placeholder="请选择活动区域">
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="连接参数">
+              <el-input size="small" type="textarea" rows="3" v-model="formLabelAlign.params"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="foot">
+          <el-button size="medium" type="primary" class="r25 r26">提交</el-button>
+          <el-button size="medium" class="r26" @click="hideCreateDialog">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </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 {
+      createDialogVisible: false,
+      serviceID: Number(this.$route.query.serviceID),
+      operateDialogType: null,
+      delObj: {},
+      deleteDialogType: null,
+      tempCheckedKeys: [],
+      formLabelAlign: {
+        sourceName: '',
+        agreementName: '',
+        params: ''
+      },
+      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
+      }
+    },
+    hideCreateDialog () {
+      this.$refs['sourceForm'].resetFields()
+      this.createDialogVisible = false
+    },
+    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/systemSettings/views/serviceManagement/serviceEdit.vue

@@ -9,134 +9,61 @@
 <template>
   <div class="service-edit">
     <div class="scrollbar">
-      <div
-        ref="formWrap"
-        class="service-form-wrapper service-edit-wrapper"
-      >
+      <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>
+          <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-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 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-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"
-                    />
+                <div class="flex-wrap">
+                  <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-button style="height:28px;line-height: 0px;margin-left:16px;" size="small" @click="addService" type="primary">新增</el-button>
+                </div>
+                <!-- <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-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 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 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 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-form-item label="是否异步" prop="isAsynchronous">
                   <el-radio-group v-model="serviceForm.isAsynchronous">
                     <el-radio :label="0">是</el-radio>
                     <el-radio :label="1">否</el-radio>
@@ -144,157 +71,57 @@
                 </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-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 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 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 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 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 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 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 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-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>
@@ -306,61 +133,55 @@
         <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>
+            <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"
-            />
+            <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>
+            <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"
-            />
+            <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>
+    <Dialog :flag="sourceFormVisible" width="464px">
+      <div class="dialog-create">
+        <div class="title">新增数据来源</div>
+        <div class="content">
+          <el-form ref="sourceForm" label-width="100px" :model="formLabelAlign">
+            <el-form-item label="数据源名称">
+              <el-input size="small" v-model="formLabelAlign.dataSourceName"></el-input>
+            </el-form-item>
+            <el-form-item label="协议名称">
+              <el-select size="small" style="width:100%;" v-model="formLabelAlign.protocolName" placeholder="请选择活动区域">
+                <el-option v-for="item in sourceDatas" :key="item.protocolID" :label="item.protocolName" :value="item.protocolID"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="连接参数">
+              <el-input size="small" type="textarea" rows="3" v-model="formLabelAlign.connectConfig"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="foot">
+          <el-button size="medium" type="primary" @click="formService" class="r25 r26">提交</el-button>
+          <el-button size="medium" class="r26" @click="sourceFormVisible = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
 <script>
 // import NoData from '@/components/nodata'
-// import Dialog from '@/layout/components/Dialog'
+import Dialog from '@/layout/components/Dialog'
 import DataTable from '@/components/Table'
-import { myQuery } from '@/api/dataIntegration'
+import { myQuery, GeneralDataReception } from '@/api/dataIntegration'
 
 // import query from './mixins/query'
 import operate from './mixins/operate'
@@ -368,19 +189,20 @@ import operate from './mixins/operate'
 export default {
   components: {
     // NoData,
-    // Dialog,
+    Dialog,
     DataTable
   },
   mixins: [
     // query,
     operate
   ],
-  data() {
+  data () {
     return {
       serviceID: Number(this.$route.query.serviceID),
       operateDialogType: null,
       delObj: {},
       deleteDialogType: null,
+      sourceFormVisible: false,
       tempCheckedKeys: [],
       serviceForm: {
         serviceName: '',
@@ -411,14 +233,20 @@ export default {
       serviceAndSourceList: [],
       processList: [],
       checkedProcessKeys: [],
-      outputList: []
+      outputList: [],
+      formLabelAlign: {
+        dataSourceName: '',
+        protocolName: '',
+        connectConfig: ''
+      },
+      sourceDatas: [],
     }
   },
-  mounted() {
+  mounted () {
     this.queryServiceByID(this.serviceID)
-    this.getDataSourceList()
+    this.getDataSourceList(21)
   },
-  updated() {
+  updated () {
     const headerHeight = 80 + 24
     const bottomBlankHeight = 16
     const formWrapHeight = this.$refs['formWrap'].offsetHeight
@@ -427,14 +255,14 @@ export default {
     this.computedTableHeight = `calc(100vh - ${headerHeight + formWrapHeight + bottomBlankHeight + tableWrapHeaderHeight + tableWrapPadding}px)`
   },
   methods: {
-    editSubmitHandler() {
+    editSubmitHandler () {
       this.$refs['serviceForm'].validate(valid => {
         if (valid) {
           this.updateService()
         }
       })
     },
-    btnAddClickHandler(flag) {
+    btnAddClickHandler (flag) {
       switch (flag) {
         case 1:
           this.$refs['serviceOutputTable'].handleAdd()
@@ -446,7 +274,11 @@ export default {
           break
       }
     },
-    async machineSelectionChangeHandler(selection, row) {
+    addService () {
+      this.getDataSourceList(23)
+      this.sourceFormVisible = true
+    },
+    async machineSelectionChangeHandler (selection, row) {
       const isSelected = selection.findIndex(item => item.deployNodeID === row.deployNodeID) > -1
       const event = isSelected ? 1 : 3
       try {
@@ -457,15 +289,23 @@ export default {
         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 getDataSourceList (id) {
+      const dataSourceList = await this.getSelectOption(id)
+      if (id == 21) {
+        this.dataSourceList = dataSourceList.map(item => {
+          item[item.setlabel] = item.k
+          item[item.setvalue] = item.v
+          return item
+        })
+      } else {
+        this.sourceDatas = dataSourceList.map(item => {
+          item[item.setlabel] = item.k
+          item[item.setvalue] = item.v
+          return item
+        })
+      }
     },
-    async getSelectOption(ID) {
+    async getSelectOption (ID) {
       try {
         const { listValues } = await myQuery(ID)
         return listValues
@@ -474,12 +314,36 @@ export default {
         return []
       }
     },
-    async queryServiceByID(serviceID) {
+    async queryServiceByID (serviceID) {
       const serviceInfo = await myQuery(39, serviceID)
       Object.entries(serviceInfo.listValues[0]).forEach(([key, value]) => {
         this.serviceForm[key] = value
       })
-    }
+    },
+    async formService () {
+      this.sourceDatas.forEach(item => {
+        if (item.protocolID == this.formLabelAlign.protocolName) {
+          this.formLabelAlign.protocolName = item.protocolName
+          this.formLabelAlign.protocolID = item.protocolID
+        }
+      })
+      try {
+        this.formLabelAlign['event'] = 1
+        const res = await GeneralDataReception({
+          serviceId: 12,
+          dataContent: JSON.stringify(this.formLabelAlign)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.sourceFormVisible = false
+          this.getDataSourceList(21)
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
   }
 }
 </script>
@@ -567,7 +431,7 @@ export default {
           &::-webkit-inner-spin-button {
             -webkit-appearance: none !important;
           }
-          &[type='number'] {
+          &[type="number"] {
             -moz-appearance: textfield !important;
           }
         }

src/views/systemSettings/views/serviceManagement/serviceHome.vue

@@ -9,12 +9,14 @@
 <template>
   <div class="service-home">
     <div class="wrap">
-      <DataTable ref="serviceTable" data-id="2" :rows="12" width="800px" label-width="110px" :min-height="70" :isStatus="true" :is-dialog="false" @handleAdd="showCreateDialog" @handleEdit="btnEditClickHandler">
-        <div class="status flex-wrap">
-          <div class="manageTitle">服务管理</div>
-          <div class="status0"><span class="icon"></span>启动</div>
-          <div class="status1"><span class="icon"></span>停止</div>
-        </div>
+      <DataTable ref="serviceTable" data-id="2" :rows="12" width="800px" label-width="110px" fixedWidth="280px" :min-height="70" :isStatus="true" :is-dialog="false" @handleAdd="showCreateDialog" @handleEdit="btnEditClickHandler">
+        <template v-slot:header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">服务管理</div>
+            <div class="status0"><span class="icon"></span>启动</div>
+            <div class="status1"><span class="icon"></span>停止</div>
+          </div>
+        </template>
       </DataTable>
       <!--新增弹框-->
       <Dialog :flag="createDialogVisible" width="878px">
@@ -47,11 +49,14 @@
                   </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>
+                  <div class="flex">
+                    <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-button style="height:28px;line-height: 0px;" size="small" @click="addService" type="primary">新增</el-button>
+                  </div>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="生命周期ID键名" prop="lifeCycleCol" label-width="114px">
@@ -132,6 +137,30 @@
           </div>
         </div>
       </Dialog>
+      <Dialog :flag="sourceFormVisible" width="464px">
+        <div class="dialog-create">
+          <div class="title">新增数据来源</div>
+          <div class="content">
+            <el-form ref="sourceForm" label-width="100px" :model="formLabelAlign">
+              <el-form-item label="数据源名称">
+                <el-input size="small" v-model="formLabelAlign.dataSourceName"></el-input>
+              </el-form-item>
+              <el-form-item label="协议名称">
+                <el-select size="small" style="width:100%;" v-model="formLabelAlign.protocolName" placeholder="请选择活动区域">
+                  <el-option v-for="item in sourceDatas" :key="item.protocolID" :label="item.protocolName" :value="item.protocolID"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="连接参数">
+                <el-input size="small" type="textarea" rows="3" v-model="formLabelAlign.connectConfig"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="foot">
+            <el-button size="medium" type="primary" @click="formService" class="r25 r26">提交</el-button>
+            <el-button size="medium" class="r26" @click="sourceFormVisible = false">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
     </div>
   </div>
 </template>
@@ -151,6 +180,7 @@ export default {
     return {
       serviceList: [],
       createDialogVisible: false,
+      sourceFormVisible: false,
       serviceForm: {
         serviceName: '',
         serviceType: null,
@@ -172,7 +202,13 @@ export default {
       serviceFormRules: {
         serviceName: [{ required: true, message: '请输入服务名称', trigger: ['change', 'blur'] }]
       },
+      formLabelAlign: {
+        dataSourceName: '',
+        protocolName: '',
+        connectConfig: ''
+      },
       dataSourceList: [],
+      sourceDatas: [],
       deleteDialogVisible: false,
       delObj: {}
     }
@@ -180,9 +216,14 @@ export default {
   methods: {
     // 新增-弹框
     showCreateDialog () {
-      this.getDataSourceList()
+      this.getDataSourceList(21)
       this.createDialogVisible = true
     },
+    //
+    addService () {
+      this.getDataSourceList(23)
+      this.sourceFormVisible = true
+    },
     // 新增-提交
     createSubmitHandler () {
       this.$refs['serviceForm'].validate(valid => {
@@ -206,13 +247,21 @@ export default {
     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 getDataSourceList (id) {
+      const dataSourceList = await this.getSelectOption(id)
+      if (id == 21) {
+        this.dataSourceList = dataSourceList.map(item => {
+          item[item.setlabel] = item.k
+          item[item.setvalue] = item.v
+          return item
+        })
+      } else {
+        this.sourceDatas = dataSourceList.map(item => {
+          item[item.setlabel] = item.k
+          item[item.setvalue] = item.v
+          return item
+        })
+      }
     },
     async getSelectOption (id) {
       try {
@@ -247,7 +296,31 @@ export default {
       } catch (error) {
         console.log('错误', error)
       }
-    }
+    },
+    async formService () {
+      this.sourceDatas.forEach(item => {
+        if (item.protocolID == this.formLabelAlign.protocolName) {
+          this.formLabelAlign.protocolName = item.protocolName
+          this.formLabelAlign.protocolID = item.protocolID
+        }
+      })
+      try {
+        this.formLabelAlign['event'] = 1
+        const res = await GeneralDataReception({
+          serviceId: 12,
+          dataContent: JSON.stringify(this.formLabelAlign)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.sourceFormVisible = false
+          this.getDataSourceList(21)
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
   }
 }
 </script>

src/views/systemSettings/views/serviceManagement/serviceTopology.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="serviceTopology">
+    <div class="serviceTopology_head flex">
+      <div class="status flex-wrap">
+        <div class="manageTitle">服务拓扑</div>
+        <div class="status0"><span class="icon"></span>正常</div>
+        <div class="status1"><span class="icon"></span>异常</div>
+      </div>
+      <div class="btn">
+        <el-button size="small" @click="logVisible = true" plain type="primary">查看日志</el-button>
+      </div>
+    </div>
+    <div class="serviceTopology_cont">
+      <div class="title">当前服务：Kafka原始报文</div>
+      <sankeyChart />
+    </div>
+    <Dialog :flag="logVisible" width="1200px">
+      <div class="logDialog">
+        <div class="title">查看日志</div>
+        <div class="interfaceLog content">
+          <div class="interfaceLog_head flex">
+            <div class="logTitle">当前服务：Kafka原始报文</div>
+            <div class="interfaceLog_head_time flex-wrap">
+              <div class="interfaceLog_head_time_start">
+                <el-date-picker v-model="timeStart" size="small" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00">
+                </el-date-picker>
+              </div>
+              <div class="interfaceLog_head_time_end">
+                <el-date-picker v-model="timeEnd" size="small" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00">
+                </el-date-picker>
+              </div>
+              <div class="">
+                <el-input placeholder="请选择日期" suffix-icon="el-icon-search" size="small" v-model="input1">
+                </el-input>
+              </div>
+            </div>
+          </div>
+          <div class="interfaceLog_content flex-wrap">
+            <el-table :data="tableData" class="table" border style="width: 100%">
+              <el-table-column prop="action" label="用户">
+              </el-table-column>
+              <el-table-column prop="time" label="发生时间">
+              </el-table-column>
+              <el-table-column prop="dataNumber" label="发生位置">
+              </el-table-column>
+              <el-table-column prop="details" label="成败详情">
+              </el-table-column>
+              <el-table-column prop="sourceDataNumber" label="成败代码">
+              </el-table-column>
+              <!-- <el-table-column label="结果">
+                <template slot-scope="scope">
+                  <span :class="scope.row.result ? 'success' : 'error'">{{scope.row.result ? '成功' : '出错'}}</span>
+                </template>
+              </el-table-column> -->
+            </el-table>
+            <div class="interfaceLog_content_progress">
+              <el-timeline>
+                <el-timeline-item v-for="(item,index) in preDatas" :key="index">
+                  <div class="list">
+                    <div class="list_status"></div>
+                    <div class="list_title flex">
+                      <span class="l_title">{{item.title}}</span>
+                      <span v-if="item.status == 1" class="l_status l_success">成功</span>
+                      <span v-else class="l_status l_error">失败</span>
+                    </div>
+                    <div class="list_code">{{item.code}}</div>
+                    <div class="list_time">{{item.time}}</div>
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </div>
+        </div>
+        <div class="foot">
+          <el-button size="medium" type="primary" class="r25 r26">提交</el-button>
+          <el-button size="medium" class="r26" @click="logVisible = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Search from "@/layout/components/Search";
+import sankeyChart from './components/sankeyChart.vue'
+import Dialog from '@/layout/components/Dialog'
+export default {
+  name: 'serviceTopology',
+  components: { sankeyChart, Dialog, Search },
+  created () {
+    const { serviceID } = this.$route.params
+    if (serviceID) {
+      sessionStorage.setItem('serviceTopology-serviceID', serviceID)
+    }
+    for (let i = 0; i < 5; i++) {
+      const element = {
+        action: '采集',
+        dataNumber: '000120220307201211011201',
+        sourceDataNumber: 'BSM',
+        time: '2022-03-07 20:00:12',
+        result: i % 2 == 0 ? true : false,
+        details: '数据格式不正确'
+      };
+      const obj = {
+        title: 'login',
+        code: 'admin',
+        time: '2022-4-26 15:48:55',
+        id: i,
+        status: 1
+      };
+      this.tableData.push(element)
+      this.preDatas.push(obj)
+    }
+  },
+  data () {
+    return {
+      logVisible: false,
+      timeStart: '',
+      timeEnd: '',
+      tableData: [],
+      preDatas: [],
+      input1: ""
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.serviceTopology {
+  &_head {
+    line-height: 32px;
+    .status {
+      font-size: 14px;
+      .icon {
+        width: 14px;
+        height: 14px;
+        background: #041741;
+        border-radius: 2px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+        position: relative;
+        top: -2px;
+      }
+      .status0 {
+        margin-right: 28px;
+        position: relative;
+        top: 5px;
+      }
+      .status1 {
+        position: relative;
+        top: 5px;
+        .icon {
+          background-color: #e32d2d;
+        }
+      }
+    }
+  }
+  &_cont {
+    margin-top: 24px;
+    padding: 35px;
+    background-color: #fff;
+    height: calc(100vh - 190px);
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+      margin-bottom: 70px;
+    }
+  }
+}
+.interfaceLog {
+  padding: 8px 32px 12px 8px;
+  .logTitle {
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+  }
+  .mr10 {
+    margin-right: 10px;
+  }
+  ::v-deep .interfaceLog_head_time {
+    .el-input--prefix .el-input__inner {
+      padding-left: 50px;
+    }
+  }
+  .interfaceLog_head_btn {
+    ::v-deep .btn {
+      margin-right: 0;
+    }
+  }
+  .interfaceLog_head_time_end {
+    margin: 0 16px;
+  }
+  .interfaceLog_content {
+    margin-top: 24px;
+    ::v-deep .table {
+      color: #101116;
+      thead {
+        color: #101116;
+      }
+      .success {
+        color: #33bf47;
+      }
+      .error {
+        color: #df4545;
+      }
+    }
+    &_progress {
+      width: 248px;
+      background: #fafcff;
+      margin-left: 16px;
+      padding: 13px 32px;
+      overflow: hidden;
+      border: 1px solid #ebeef5;
+      ::v-deep .el-timeline {
+        padding: 0;
+        .el-timeline-item {
+          position: relative;
+          &::after {
+            position: absolute;
+            content: "";
+            height: 1px;
+            width: calc(100% + 4px);
+            background-color: #ebeef5;
+            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: 0px 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;
+            .l_status {
+              font-size: 12px;
+              font-weight: 500;
+            }
+            .l_success {
+              color: #33bf47;
+            }
+            .l_error {
+              color: #e32d2d;
+            }
+          }
+          &_time {
+            font-size: 12px;
+            font-family: Helvetica;
+            font-weight: 400;
+            color: #afb4bf;
+          }
+        }
+      }
+    }
+  }
+}
+</style>