添加配置模块

chuanyi_client/src/api/opc.js

@@ -155,3 +155,35 @@ export function getChannelSetting(params) {
         params
     })
 }
+
+/**
+ * 查询服务所有通道信息
+ * @param params
+ * @returns {AxiosPromise}
+ */
+export function getConnectServerChannel(params) {
+    return request({
+        url: '/channelSetting/getConnectTree',
+        headers: {
+            isToken: true
+        },
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 保存通道配置
+ * @param data
+ * @returns {AxiosPromise}
+ */
+export function saveConfigChannelSetting(data) {
+    return request({
+        url: '/channelSetting/assignChannelSettingList',
+        headers: {
+            isToken: true
+        },
+        method: 'post',
+        data
+    })
+}

chuanyi_client/src/components/FooterView/index.vue

@@ -21,6 +21,10 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+.el-footer{
+  z-index: 99999;
+}
+
 .el-login-footer {
   height: 40px;
   line-height: 40px;

chuanyi_client/src/components/LeftMenu/index.vue

@@ -17,7 +17,19 @@
           <ul class="el-menu el-menu--inline" v-show="server.conn">
             <li :class="'el-submenu ' + (child.open ? 'is-opened' : '')"
                 v-for="(child, j) in server.children">
-              <div class="el-submenu__title" style="padding-left: 40px;" @click="handleSecondEvent(child.id, i, j)">
+              <div v-if="child.id.indexOf('config_') > -1"
+                   class="el-submenu__title"
+                   style="padding-left: 40px;"
+                   @contextmenu.prevent="rightEventConnConfig($event, server, i)"
+                   @click="handleSecondEvent(child.id, i, j)">
+                <i class="fa fa-circle mark"></i>
+                <span>{{ child.name }}</span>
+                <i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
+              </div>
+              <div v-else
+                   class="el-submenu__title"
+                   style="padding-left: 40px;"
+                   @click="handleSecondEvent(child.id, i, j)">
                 <i class="fa fa-circle mark"></i>
                 <span>{{ child.name }}</span>
                 <i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
@@ -39,7 +51,7 @@
       <ul v-show="visibleServerMenu"
           :style="{ left: serverMenuLeft + 'px', top: serverMenuTop + 'px' }"
           class="contextmenu">
-        <li v-if="chooseServer == null ? true : (serverList[chooseServer].conn === undefined ? true : false)"
+        <li v-if="chooseServerIndex == null ? true : (serverList[chooseServerIndex].conn === undefined ? true : false)"
             @click="serverMenuOpen">打开连接</li>
         <li v-else @click="serverMenuClose">关闭连接</li>
         <li @click="serverMenuEdit">编辑连接</li>
@@ -53,6 +65,12 @@
         <li @click="channelMenuHistory">查看历史</li>
         <li @click="channelMenuLabelConfig">通道配置</li>
       </ul>
+      <!-- 服务连接配置右键操作 -->
+      <ul v-show="visibleServerConfigMenu"
+          :style="{ left: serverMenuLeft + 'px', top: serverMenuTop + 'px' }"
+          class="contextmenu contextmenu-black">
+        <li @click="createConfig">新建配置</li>
+      </ul>
     </el-col>
   </el-row>
 </template>
@@ -73,12 +91,16 @@ export default {
       visibleServerMenu: false,
       // 通道右键布局显示状态
       visibleChannelMenu: false,
+      // 通道右键配置管理显示状态
+      visibleServerConfigMenu: false,
       // 右键布局显示位置
       serverMenuTop: 0,
       // 右键布局显示位置
       serverMenuLeft: 50,
-      // 当前选择的服务
-      chooseServer: null,
+      // 当前选择的服务的位置
+      chooseServerIndex: null,
+      // 当前选择的服务的ID
+      chooseServerId: null,
       // 当前选择的通道
       chooseChannel: null,
       // 当前选择的步骤节点
@@ -140,7 +162,15 @@ export default {
       } else {
         document.body.removeEventListener('click', this.closeMenu)
       }
-    }
+    },
+    /** 连接服务配置右键值监听 */
+    visibleServerConfigMenu(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    },
   },
   methods: {
     /** 刷新左侧连接信息 */
@@ -220,13 +250,13 @@ export default {
     /** 右键菜单事件：服务 */
     rightEventConnServer(e, server, index) {
       this.closeMenu()
-      if (this.chooseServer != null) {
-        this.serverList[this.chooseServer].choose = false
-        this.$set(this.serverList, this.chooseServer, this.serverList[this.chooseServer])
+      if (this.chooseServerIndex != null) {
+        this.serverList[this.chooseServerIndex].choose = false
+        this.$set(this.serverList, this.chooseServerIndex, this.serverList[this.chooseServerIndex])
       }
       server.choose = true
       this.$set(this.serverList, index, server)
-      this.chooseServer = index
+      this.chooseServerIndex = index
       this.serverMenuLeft = 50
       const y = e.pageY
       this.serverMenuTop = y - 60
@@ -234,7 +264,7 @@ export default {
     },
     /** 右键菜单：打开连接 */
     serverMenuOpen() {
-      this.handleByConn(this.serverList[this.chooseServer], this.chooseServer)
+      this.handleByConn(this.serverList[this.chooseServerIndex], this.chooseServerIndex)
     },
     /** 关闭连接 */
     closeConnect(server, callback) {
@@ -244,9 +274,9 @@ export default {
         server.choose = false
         server.children = this.getInitServerSecondMenu(serverId)
         let currServer = JSON.parse(JSON.stringify(server))
-        this.$set(this.serverList, this.chooseServer, server)
+        this.$set(this.serverList, this.chooseServerIndex, server)
         // 清空选中项
-        this.chooseServer = null
+        this.chooseServerIndex = null
         this.closeMenu(this.serverList)
         this.clearSessionStorage()
         this.$forceUpdate()
@@ -260,12 +290,12 @@ export default {
     },
     /** 右键菜单：关闭连接 */
     serverMenuClose() {
-      let server = this.serverList[this.chooseServer]
+      let server = this.serverList[this.chooseServerIndex]
       this.closeConnect(server)
     },
     /** 右键菜单：编辑连接 */
     serverMenuEdit() {
-      let server = this.serverList[this.chooseServer]
+      let server = this.serverList[this.chooseServerIndex]
       if (server.conn === undefined) {
         this.$emit('getConnServer', JSON.parse(JSON.stringify(server)))
         return
@@ -283,8 +313,8 @@ export default {
     },
     /** 右键菜单：删除连接 */
     serverMenuDel() {
-      let serverId = this.serverList[this.chooseServer].id;
-      let serverName = this.serverList[this.chooseServer].connectName
+      let serverId = this.serverList[this.chooseServerIndex].id;
+      let serverName = this.serverList[this.chooseServerIndex].connectName
       this.$confirm('您确定要删除连接【' + serverName + '】吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -325,15 +355,15 @@ export default {
       const y = event.pageY
       this.serverMenuTop = y - 60
       this.visibleChannelMenu = true
-      this.chooseServer = serverId
+      this.chooseServerId = serverId
       this.chooseChannel = result
       this.breadcrumbList.push(this.serverList[index].connectName)
       this.breadcrumbList.push(result)
     },
-    /** 通道页面跳转 */
-    gotoChannelPage() {
+    /** 页面跳转 */
+    gotoPageByName(path) {
       this.$router.push({
-        path: '/channel',
+        path: path,
         query: {
           t: new Date().getTime()
         }
@@ -342,12 +372,12 @@ export default {
     /** 右键菜单事件：打开通道 */
     channelMenuOpen() {
       this.saveChannelSessionStorage(1)
-      this.gotoChannelPage()
+      this.gotoPageByName('/channel')
     },
     /** 右键菜单事件：查看历史 */
     channelMenuHistory() {
       console.log('channelMenuHistory')
-      console.log('curr server id ==> ' + this.chooseServer)
+      console.log('curr server id ==> ' + this.chooseServerId)
       console.log('curr channel name ==> ' + this.chooseChannel)
 
       this.saveChannelSessionStorage(2)
@@ -359,29 +389,49 @@ export default {
     /** 右键菜单事件：通道配置 */
     channelMenuLabelConfig() {
       this.saveChannelSessionStorage(3)
-      this.gotoChannelPage()
+      this.gotoPageByName('/channel')
+    },
+    /** 右键菜单事件：配置 */
+    rightEventConnConfig(e, server, index) {
+      this.closeMenu()
+      this.chooseServerId = server.id
+      this.chooseServerIndex = index
+      this.serverMenuLeft = 50
+      const y = e.pageY
+      this.serverMenuTop = y - 60
+      this.visibleServerConfigMenu = true
+    },
+    /** 右键菜单事件：新建配置 */
+    createConfig() {
+      this.saveChannelSessionStorage(1)
+      this.gotoPageByName('/config')
     },
     /** 关闭右键菜单事件 */
     closeMenu() {
-      if (this.chooseServer != null) {
-        this.serverList[this.chooseServer].choose = false
-        this.$set(this.serverList, this.chooseServer, this.serverList[this.chooseServer])
+      if (this.chooseServerIndex != null) {
+        this.serverList[this.chooseServerIndex].choose = false
+        this.$set(this.serverList, this.chooseServerIndex, this.serverList[this.chooseServerIndex])
       }
       // 清空选中项
-      this.chooseServer = null
+      this.chooseServerIndex = null
+      this.chooseServerId = null
       this.chooseChannel = null
       this.breadcrumbList = []
       // 隐藏右键菜单项
       this.visibleServerMenu = false
       this.visibleChannelMenu = false
+      this.visibleServerConfigMenu = false
     },
     /** 保存通道页面数据 */
-    saveChannelSessionStorage(channelType) {
-      // channelType：1 打开通道 2 查看历史 3 标签配置
-      if (channelType) {
-        sessionStorage.setItem(this.sessionName.CHANNEL_TYPE, channelType)
+    saveChannelSessionStorage(type) {
+      /**
+       * 通道：1 打开通道 2 查看历史 3 标签配置
+       * 配置：1 新建配置
+       */
+      if (type) {
+        sessionStorage.setItem(this.sessionName.CHANNEL_TYPE, type)
       }
-      sessionStorage.setItem(this.sessionName.SERVER_ID, this.chooseServer)
+      sessionStorage.setItem(this.sessionName.SERVER_ID, this.chooseServerId)
       sessionStorage.setItem(this.sessionName.CHANNEL_NAME, this.chooseChannel)
       sessionStorage.setItem(this.sessionName.BREADCRUMB_LIST, JSON.stringify(this.breadcrumbList))
     },

chuanyi_client/src/router/index.js

@@ -43,6 +43,10 @@ const routes = [
             {
                 path: 'channel',
                 component: () => import('@/views/channel/index')
+            },
+            {
+                path: 'config',
+                component: () => import('@/views/config/index')
             }
         ]
     }

chuanyi_client/src/views/channel/index.vue

@@ -87,8 +87,7 @@ export default {
         channelMapName: '',
         readMechanism: '',
         readPolicy: '',
-        policyValue: '',
-        dataType: 0
+        policyValue: ''
       },
       // 表单校验
       rules: {
@@ -170,14 +169,11 @@ export default {
       }
       getChannelSetting(params).then(response => {
         let data = response.data
-        if (!data) {
-          return
-        }
-        this.formChannel.id = data.id
-        this.formChannel.policyValue = data.policyValue
-        this.formChannel.readPolicy = data.readPolicy
-        this.formChannel.readMechanism = data.readMechanism
-        this.formChannel.channelMapName = data.channelMapName
+        this.formChannel.id = data ? data.id : ''
+        this.formChannel.policyValue = data ? data.policyValue : ''
+        this.formChannel.readPolicy = data ? data.readPolicy : ''
+        this.formChannel.readMechanism = data ? data.readMechanism : ''
+        this.formChannel.channelMapName = data ? data.channelMapName : ''
       }).catch((e) => {
         this.$message({
           message: '读取数据失败！',

chuanyi_client/src/views/config/index.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="cqcy-content">
+    <breadcrumb-view :breadcrumbList="breadcrumbList"></breadcrumb-view>
+    <div class="data-content-bg">
+      <div class="data-content">
+      </div>
+    </div>
+    <el-dialog
+        :title="dialogTitle"
+        width="70vw"
+        top="10vh"
+        :lock-scroll="false"
+        center
+        :before-close="handleClose"
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :append-to-body="true">
+      <div class="channel">
+        <el-input
+            placeholder="输入关键字进行过滤"
+            v-model="filterText">
+        </el-input>
+        <div class="channel-item">
+          <el-tree
+              class="filter-tree"
+              show-checkbox
+              node-key="id"
+              :data="channelList"
+              :props="defaultProps"
+              default-expand-all
+              :filter-node-method="filterNode"
+              ref="tree">
+          </el-tree>
+        </div>
+      </div>
+      <span slot='footer'>
+          <el-button type="success" @click='handleSaveConfig'>确认</el-button>
+          <el-button type="warning" @click='handleCancel'>取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import BreadcrumbView from '@/components/BreadcrumbView'
+import {getConnectServerChannel, saveConfigChannelSetting} from "@/api/opc";
+import {showLoading} from "@/utils/cqcy";
+
+export default {
+  name: 'index',
+  components: {
+    BreadcrumbView
+  },
+  data() {
+    return {
+      serverId: null,
+      channelName: null,
+      channelType: 0,
+      breadcrumbList: [],
+      // 本地存储的名字
+      sessionName: this.$store.getters.sessionName,
+      dialogTitle: '添加通道',
+      dialogVisible: false,
+      channelList: [],
+      filterText: '',
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  watch: {
+    '$route'(to, from) {
+      this.readParams()
+    },
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.readParams()
+  },
+  methods: {
+    /** 读取参数 */
+    readParams() {
+      this.channelType = sessionStorage.getItem(this.sessionName.CHANNEL_TYPE)
+      this.serverId = sessionStorage.getItem(this.sessionName.SERVER_ID)
+      this.channelName = sessionStorage.getItem(this.sessionName.CHANNEL_NAME)
+      this.breadcrumbList = JSON.parse(sessionStorage.getItem(this.sessionName.BREADCRUMB_LIST))
+      // 新建配置
+      if (this.channelType == 1) {
+        this.breadcrumbList.push('新建配置')
+        this.getConnectServerChannel()
+      }
+    },
+    /** 查询该服务下所有通道信息 */
+    getConnectServerChannel() {
+      const loading = showLoading(this, '正在读取通道数据，请等待···')
+      getConnectServerChannel({
+        'serverId': this.serverId
+      }).then(response => {
+        loading.close()
+        this.dialogVisible = true
+        let data = response.data
+        this.channelList = data ? data.tree : []
+      }).catch((e) => {
+        loading.close()
+        this.$message({
+          message: '读取数据失败！',
+          type: 'error'
+        })
+      })
+    },
+    /** 节点过滤 */
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    /**
+     * 显示层级数据
+     * @param tree {Array} 树数据
+     * @param func {Function} 回调函数
+     * @param field {String} 字段名称
+     * @param path {Array} 路径数据
+     * @returns {*[]|[]|*}
+     */
+    treeFindPath(tree, func, field = "", path = []) {
+      if (!tree) return []
+      for (const data of tree) {
+        field === "" ? path.push(data) : path.push(data[field]);
+        if (func(data)) return path
+        if (data.children) {
+          const findChildren = this.treeFindPath(data.children, func, field, path)
+          if (findChildren.length) return findChildren
+        }
+        path.pop()
+      }
+      return []
+    },
+    /** 弹出层保存事件 */
+    handleSaveConfig() {
+      let checkedNodes = this.$refs.tree.getCheckedNodes()
+      if (checkedNodes.length == 0) {
+        this.$message({
+          message: '请选择通道数据！',
+          type: 'warning'
+        })
+        return
+      }
+      let chooseChannelNameList = []
+      for (let i in checkedNodes) {
+        let checkedNode = checkedNodes[i]
+        if (checkedNode.children && checkedNode.children.length > 0) {
+          continue
+        }
+        const nodeId = checkedNode.$treeNodeId;
+        let channelName = this.treeFindPath(this.channelList, data => data.$treeNodeId === nodeId, "label")
+        chooseChannelNameList.push(channelName.join('.'))
+      }
+      console.log(chooseChannelNameList)
+      this.$prompt('请输入配置名称', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValidator: (val) => {
+          if (!val) {
+            return '配置名称不能为空'
+          }
+          if (val.length < 2 || val.length > 20) {
+            return '配置名称长度必须介于 2 和 20 之间'
+          }
+        }
+      }).then(({ value }) => {
+        let data = {
+          'serverId': this.serverId,
+          'channelNameList': chooseChannelNameList,
+          'configName': value
+        }
+        const loading = showLoading(this, '配置保存中，请稍候···')
+        saveConfigChannelSetting(data).then(response => {
+          loading.close()
+          if (response.code == 200) {
+            this.handleCancel()
+            this.$message({
+              message: response.data,
+              type: 'success'
+            })
+            return
+          }
+          this.$message({
+            message: '保存失败！',
+            type: 'error'
+          })
+        }).catch((e) => {
+          loading.close()
+          this.$message({
+            message: '保存失败！',
+            type: 'error'
+          })
+        })
+      }).catch((e) => {
+      })
+    },
+    /** 弹出层关闭事件 */
+    handleCancel() {
+      this.$refs.tree.setCheckedKeys([])
+      this.dialogVisible = false
+    },
+    /** 弹出层关闭事件 */
+    handleClose(done) {
+      done()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.data-content-bg {
+  background: #eff4f7;
+  height: calc(100vh - 155px);
+  padding: 8px;
+}
+
+.data-content {
+  background: white;
+  height: 100%;
+  padding: 20px;
+  box-shadow: 0px 0px 5px 0px #888888;
+}
+
+.channel {
+  padding: 10px;
+  border: 1px solid #e2e2e2;
+  border-radius: 5px;
+}
+
+.channel-item {
+  height: 50vh;
+  overflow-x: hidden;
+  margin-top: 15px;
+}
+
+.channel-item::-webkit-scrollbar {
+  width: 8px;
+  height: 6px;
+  opacity: 0.4;
+}
+
+.channel-item::-webkit-scrollbar-track {
+  background-color: white;
+  border-radius: 8px;
+  opacity: 0.4;
+}
+
+.channel-item::-webkit-scrollbar-track-piece {
+  width: 4px;
+}
+
+.channel-item::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background-color: gray;
+  opacity: 0.4;
+}
+</style>