服务管理修改

package.json

@@ -25,6 +25,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "vis": "^4.21.0-EOL",
     "vue": "2.6.10",
     "vue-count-to": "^1.0.13",
     "vue-json-viewer": "^2.2.21",

public/config.js

@@ -10,5 +10,5 @@ PLATFROM_CONFIG.appId = "q7kdjmmaf0kerwpf"; //appid
 // PLATFROM_CONFIG.baseURLCA = "http://192.168.3.17:8080";
 // PLATFROM_CONFIG.baseURLCA = "http://192.168.3.243:8093";
 // PLATFROM_CONFIG.baseURLCA = "http://ts.free.idcfengye.com";
-PLATFROM_CONFIG.baseURLCA = "http://192.168.3.239:18064"; // 登录后的http请求地址
+PLATFROM_CONFIG.baseURLCA = "http://192.168.3.74:18064"; // 登录后的http请求地址
 

src/layout/components/Navbar.vue

@@ -18,7 +18,7 @@
             <i class="el-icon-arrow-down el-icon--right"></i>
           </div>
           <el-dropdown-menu class="handleMsgMneu" slot="dropdown">
-            <el-dropdown-item>
+            <el-dropdown-item v-if="name != '匿名用户'">
               <span class="editPwd" @click="dialogPwd">修改密码</span>
             </el-dropdown-item>
             <el-dropdown-item>

src/utils/validate.js

@@ -6,7 +6,7 @@
  * @param {string} path
  * @returns {Boolean}
  */
-export function isExternal(path) {
+export function isExternal (path) {
   return /^(https?:|mailto:|tel:)/.test(path)
 }
 
@@ -14,12 +14,12 @@ export function isExternal(path) {
  * @param {string} str
  * @returns {Boolean}
  */
-export function validUsername(str) {
+export function validUsername (str) {
   const valid_map = ['admin', 'editor']
   return valid_map.indexOf(str.trim()) >= 0
 }
 // 账号组树构造
-// export function translateDataToTreeAll(data, parentKey, parentIDKey) {
+// export function translateDataToTreeAllTree (data, parentKey, parentIDKey) {
 //   const parent = data.filter(value => Number(value[parentKey]) <= 0) // 父数据
 //   const children = data.filter(value => Number(value[parentKey]) > 0) // 子数据
 //   // console.log('--parent', parent)
@@ -27,30 +27,54 @@ export function validUsername(str) {
 //   const translator = (parent, children) => {
 //     parent.forEach(parent => {
 //       parent.children = []
-//       // children.forEach((current, index) => {
-//       //   if (current[parentKey] === parent[parentIDKey]) {
-//       //     const temp = JSON.parse(JSON.stringify(children))
-//       //     temp.splice(index, 1)
-//       //     translator([current], temp)
-//       //     typeof parent.children !== 'undefined' ? parent.children.push(current) : (parent.children = [current])
-//       //   }
-//       // })
-//       for (let i = 0; i < children.length; ) {
-//         if (children[i][parentKey] === parent[parentIDKey]) {
-//           const temp = children.splice(i, 1)
-//           typeof parent.children !== 'undefined' ? parent.children.push(...temp) : (parent.children = temp)
-//           translator(temp, children)
-//         } else {
-//           i++
+//       children.forEach((current, index) => {
+//         if (current[parentKey] === parent[parentIDKey]) {
+//           const temp = JSON.parse(JSON.stringify(children))
+//           temp.splice(index, 1)
+//           translator([current], temp)
+//           typeof parent.children !== 'undefined' ? parent.children.push(current) : (parent.children = [current])
 //         }
-//       }
+//       })
+//       // for (let i = 0; i < children.length;) {
+//       //   if (children[i][parentKey] === parent[parentIDKey]) {
+//       //     const temp = children.splice(i, 1)
+//       //     typeof parent.children !== 'undefined' ? parent.children.push(...temp) : (parent.children = temp)
+//       //     translator(temp, children)
+//       //   } else {
+//       //     i++
+//       //   }
+//       // }
 //     })
 //   }
 //   translator(parent, children)
 //   return parent
 // }
 
-export function translateDataToTreeAll(arr, parentKey, key) {
+export function translateDataToTreeAllTree (data, parentKey, parentIDKey) {
+  let parent = data.filter((value) => Number(value[parentKey]) <= 0);// 父数据
+  let children = data.filter((value) => Number(value[parentKey]) > 0);// 子数据
+  //console.log('--parent', parent)
+  //console.log('--children', children)
+  let translator = (parent, children) => {
+    parent.forEach((parent) => {
+      parent.children = [];
+      children.forEach((current, index) => {
+        if (current[parentKey] === parent[parentIDKey] && current['type'] !== parent['type']) {
+          const temp = JSON.parse(JSON.stringify(children));
+          temp.splice(index, 1);
+          translator([current], temp);
+          typeof parent.children !== "undefined"
+            ? parent.children.push(current)
+            : (parent.children = [current]);
+        }
+      });
+    });
+  };
+  translator(parent, children);
+  return parent;
+}
+
+export function translateDataToTreeAll (arr, parentKey, key) {
   const map = {}
   const result = []
   arr.forEach(element => {
@@ -84,7 +108,7 @@ export function translateDataToTreeAll(arr, parentKey, key) {
 }
 
 // 模糊查询
-export function findarrays(ar, feature, v) {
+export function findarrays (ar, feature, v) {
   var arr = []
   ar.forEach(res => {
     console.log(res.feature)
@@ -134,12 +158,12 @@ export function findarrays(ar, feature, v) {
 }
 
 // 随机长度
-function randomNum(start, end) {
+function randomNum (start, end) {
   return Math.floor(Math.random() * (Number(end) - Number(start)) + start)
 }
 
 // 字母随机
-function randomAlp(arr, count) {
+function randomAlp (arr, count) {
   let shuffled = arr.slice(0),
     i = arr.length,
     min = i - count,
@@ -161,7 +185,7 @@ function randomAlp(arr, count) {
  * @returns {Object}
  * 4位密码规则 1111 = 大写 小写 特殊字符 数字 都开启
  */
-export function pwdProduce(minLen, maxLen, struc) {
+export function pwdProduce (minLen, maxLen, struc) {
   // 密码规则转化
   const pwdStruc = typeof struc === 'string' ? struc.split('') : `${struc}`.split('')
   // 字母
@@ -234,7 +258,7 @@ export function pwdProduce(minLen, maxLen, struc) {
 }
 
 // 表单输入长度验证
-function getRealLength(string) {
+function getRealLength (string) {
   let realLength = 0,
     len = string.length,
     charCode = -1
@@ -249,7 +273,7 @@ function getRealLength(string) {
   return realLength
 }
 
-export function lengthValidator(rule, value, callback) {
+export function lengthValidator (rule, value, callback) {
   value = value ?? ''
   const realLength = getRealLength(value)
   if (realLength === 0) {
@@ -269,7 +293,7 @@ export function lengthValidator(rule, value, callback) {
  * @param value
  * @param callback
  */
-export function validateIP(rule, value, callback) {
+export function validateIP (rule, value, callback) {
   if (value === '' || typeof value === 'undefined' || value == null) {
     callback(new Error('请输入正确的IP地址'))
   } else {

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

@@ -0,0 +1,119 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-09 09:46:37
+ * @LastEditTime: 2021-12-22 17:08:40
+ * @LastEditors: Please set LastEditors
+ * @Description: vue2-org-tree
+ * @FilePath: \Foshan4A\src\layout\components\OrgTree\index.vue
+-->
+<template>
+  <div class="orgTree">
+    <div class="orgTreeContent">
+      <vue2-org-tree :data="dataList" :horizontal="true" collapsable @on-expand="onExpand" :render-content="renderContent" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OrgTree",
+  props: {
+    dataList: {
+      type: Object,
+      default: () => { },
+    },
+    renderContent: {
+      type: Function,
+    },
+  },
+  mounted () {
+    this.toggleExpand(this.dataList, true);
+  },
+  watch: {
+    dataList: {
+      handler (val, old) {
+        if (val != old) {
+          this.toggleExpand(val, true);
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    collapse (list) {
+      const _this = this;
+      list.forEach(function (child) {
+        if (child.expand) {
+          child.expand = false;
+        }
+        child.children && _this.collapse(child.children);
+      });
+    },
+    //展开
+    onExpand (e, data) {
+      const _this = this;
+      if ("expand" in data) {
+        data.expand = !data.expand;
+        if (!data.expand && data.children) {
+          _this.collapse(data.children);
+        }
+      } else {
+        _this.$set(data, "expand", true);
+      }
+      if (data.expand) {
+        this.$emit("expandData", data);
+      }
+    },
+    //节点关闭按钮点击
+    onNodeClick (e, data) {
+      const _this = this;
+      if (e.target.className === "icon el-icon-close") {
+        this.decompose(_this.dataList.children, data.id);
+      }
+    },
+    //删除指定数据
+    decompose (data, id) {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].id === id) {
+          data.splice(i, 1);
+        } else if (data[i].children && data[i].children.length > 0) {
+          this.decompose(data[i].children, id);
+        }
+      }
+    },
+    //是否完全展开
+    toggleExpand (data, val) {
+      const _this = this;
+      if (Array.isArray(data)) {
+        data.forEach(function (item) {
+          _this.$set(item, "expand", val);
+          if (item.children) {
+            _this.toggleExpand(item.children, val);
+          }
+        });
+      } else {
+        _this.$set(data, "expand", val);
+        if (data.children) {
+          _this.toggleExpand(data.children, val);
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.orgTree {
+  ::v-deep .orgTreeContent {
+    .org-tree-node-btn {
+      display: none;
+    }
+    .renderContent {
+      .name {
+        font-size: 14px;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="integration__cont__map__cont" id="map"></div>
+</template>
+
+<script>
+import { DataSet, Network } from 'vis'
+export default {
+  name: 'VisChart',
+  data () {
+    return {
+      chartNodes: [],
+      chartEdges: [],
+      chartOptions: {
+        nodes: {
+          shape: 'box',
+          fixed: false,
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/systemSettings/views/serviceManagement/serviceEdit.vue

@@ -17,11 +17,16 @@
         <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-col :span="4">
                 <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="前序输出编号" label-width="114px" prop="serviceOutputID">
+                  <el-input v-model="serviceForm.serviceOutputID" 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>
@@ -206,6 +211,7 @@ export default {
       tempCheckedKeys: [],
       serviceForm: {
         serviceName: '',
+        serviceOutputID: '',
         serviceType: null,
         dataSourceID: null,
         lifeCycleCol: '',

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

@@ -25,11 +25,16 @@
           <main class="content">
             <el-form ref="serviceForm" class="service-form" :model="serviceForm" :rules="serviceFormRules" label-position="right" label-width="82px" size="mini">
               <el-row :gutter="36" type="flex">
-                <el-col :span="24">
+                <el-col :span="12">
                   <el-form-item label="服务名称" prop="serviceName">
                     <el-input v-model="serviceForm.serviceName" placeholder="请输入服务名称" clearable />
                   </el-form-item>
                 </el-col>
+                <el-col :span="12">
+                  <el-form-item label="前序输出编号" label-width="114px" prop="serviceOutputID">
+                    <el-input v-model="serviceForm.serviceOutputID" placeholder="请输入前序输出编号" clearable />
+                  </el-form-item>
+                </el-col>
                 <el-col :span="12">
                   <el-form-item label="类型" prop="serviceType">
                     <el-select v-model="serviceForm.serviceType" clearable>
@@ -183,6 +188,7 @@ export default {
       sourceFormVisible: false,
       serviceForm: {
         serviceName: '',
+        serviceOutputID: '',
         serviceType: null,
         dataSourceID: null,
         lifeCycleCol: '',

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

@@ -12,7 +12,8 @@
     </div>
     <div class="serviceTopology_cont">
       <div class="title">当前服务：{{title}}</div>
-      <sankeyChart />
+      <!-- <sankeyChart /> -->
+      <OrgTree :dataList="dataList" :renderContent="renderContent" />
     </div>
     <Dialog :flag="logVisible" width="1200px">
       <div class="logDialog">
@@ -41,7 +42,12 @@
               </el-table-column>
               <el-table-column prop="logTime" label="发生时间">
               </el-table-column>
-              <el-table-column prop="logPositionID" label="发生位置">
+              <el-table-column label="发生位置">
+                <template slot-scope="scope">
+                  <el-tooltip class="item" effect="dark" :content="scope.row.logPositionID" placement="top">
+                    <div class="logPositionID">{{scope.row.logPositionID}}</div>
+                  </el-tooltip>
+                </template>
               </el-table-column>
               <el-table-column prop="resultDetails" label="成败详情">
               </el-table-column>
@@ -79,14 +85,28 @@
 </template>
 
 <script>
-import Search from "@/layout/components/Search";
-import sankeyChart from './components/sankeyChart.vue'
+import Search from "@/layout/components/Search"
+// import sankeyChart from './components/sankeyChart.vue'
 import Dialog from '@/layout/components/Dialog'
-import { Query } from "@/api/dataIntegration";
-import { parseTime } from "@/utils/index";
+import { Query } from "@/api/dataIntegration"
+import { parseTime } from "@/utils/index"
+import OrgTree from './components/orgTree.vue'
+import { translateDataToTreeAllTree } from '@/utils/validate'
+//默认节点
+const defaultImg = require('@/assets/topplogy/ic_pulll_default.png')
+//默认节点-错误
+const defaultImgError = require('@/assets/topplogy/ic_pull_error.png')
+//默认节点-选中
+const defaultImgCheck = require('@/assets/topplogy/ic_pulll_check.png')
+//kafka节点
+const kafkaImg = require('@/assets/topplogy/ic_Kafka_default.png')
+//kafka节点-错误
+const kafkaImgError = require('@/assets/topplogy/ic_Kafka_error.png')
+//kafka节点-选中
+const kafkaImgCheck = require('@/assets/topplogy/ic_Kafka_check.png')
 export default {
   name: 'serviceTopology',
-  components: { sankeyChart, Dialog, Search },
+  components: { Dialog, Search, OrgTree },
   created () {
     const { serviceID, serviceName } = this.$route.params
     const capName = sessionStorage.getItem('serviceTopology-serviceName')
@@ -100,6 +120,10 @@ export default {
       this.title = capName
       this.id = id
     }
+    for (let i = 0; i < 6; i++) {
+      this.treeDatas.push(this.id)
+    }
+    this.getTreeData()
   },
   data () {
     return {
@@ -114,7 +138,9 @@ export default {
       input1: "",
       title: "",
       id: "",
-      loading: false
+      loading: false,
+      treeDatas: [],
+      dataList: {}
     }
   },
   methods: {
@@ -155,6 +181,33 @@ export default {
     },
     handleOk () {
       this.getQuery()
+    },
+    async getTreeData () {
+      const { code, returnData } = await Query({
+        id: 129,
+        dataContent: this.treeDatas
+      })
+      if (code == 0) {
+        const obj = translateDataToTreeAllTree(returnData.listValues, 'upid', 'id')
+        this.dataList = obj[0]
+      } else {
+        this.$message.error('')
+      }
+    },
+    renderContent (h, data) {
+      return (
+        <div class="renderContent">
+          <div class="status">
+            <img v-show={data.type == 'service' && data.runState == 0} src={defaultImg} alt={data.sname} />
+            <img v-show={data.type == 'service' && data.runState == 1} src={defaultImgCheck} alt={data.sname} />
+            <img v-show={data.type == 'service' && data.runState == 2} src={defaultImgError} alt={data.sname} />
+            <img v-show={data.type == 'output' && data.runState == 0} src={kafkaImg} alt={data.sname} />
+            <img v-show={data.type == 'output' && data.runState == 1} src={kafkaImgCheck} alt={data.sname} />
+            <img v-show={data.type == 'output' && data.runState == 2} src={kafkaImgError} alt={data.sname} />
+          </div>
+          <div class="name">{data.sname}</div>
+        </div>
+      )
     }
   }
 }
@@ -242,6 +295,11 @@ export default {
       .error {
         color: #df4545;
       }
+      .logPositionID {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
     }
     &_progress {
       width: 248px;