右侧菜单对接

chuanyi_client/src/api/opc.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+/**
+ * 查询用户所有连接信息
+ * @returns {AxiosPromise}
+ */
+export function getConnInfo() {
+    return request({
+        url: '/connect/selectAllConnect',
+        headers: {
+            isToken: true
+        },
+        method: 'get'
+    })
+}

chuanyi_client/src/api/user.js

@@ -55,14 +55,19 @@ export function getPublicKey() {
 
 /**
  * 获取验证码
+ * @param hasPubKey
  * @returns {AxiosPromise}
  */
-export function getCode() {
+export function getCode(hasPubKey) {
+    const params = {
+        hasPubKey
+    }
     return request({
         url: '/user/getCodeImage',
         headers: {
             isToken: false
         },
-        method: 'get'
+        method: 'get',
+        params
     })
 }

chuanyi_client/src/components/HeaderMenu/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header-menu-item">
+  <div class="header-menu-item" @click="open">
     <img :src="connIcon">
     <p>连接</p>
   </div>
@@ -14,6 +14,40 @@ export default {
     return {
       connIcon: connIcon
     }
+  },
+  methods: {
+    open() {
+      const h = this.$createElement;
+      this.$msgbox({
+        title: '消息',
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', {style: 'color: teal'}, 'VNode')
+        ]),
+        showCancelButton: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            instance.confirmButtonText = '执行中...';
+            setTimeout(() => {
+              done();
+              setTimeout(() => {
+                instance.confirmButtonLoading = false;
+              }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(action => {
+        this.$message({
+          type: 'info',
+          message: 'action: ' + action
+        });
+      });
+    }
   }
 }
 </script>

chuanyi_client/src/components/LeftMenu/index.vue

@@ -1,37 +1,49 @@
 <template>
   <el-row>
-    <el-col>
+    <el-col class="menu-list">
       <el-menu router>
-        <!--        <el-submenu index="1" background-color="#545c64">-->
-        <!--          <template slot="title" >-->
-        <!--            <i class="icon-server"></i>-->
-        <!--            <span>192.168.223.166</span>-->
-        <!--          </template>-->
-        <!--          <el-submenu index="1-1">-->
-        <!--            <template slot="title"><i class="fa fa-circle mark"></i>通道</template>-->
-        <!--            <el-menu-item index="1-1-1">选项4-1</el-menu-item>-->
-        <!--          </el-submenu>-->
-        <!--          <el-submenu index="1-2">-->
-        <!--            <template slot="title"><i class="fa fa-circle mark"></i>配置</template>-->
-        <!--            <el-menu-item index="1-2-1">选项4-1</el-menu-item>-->
-        <!--            <el-menu-item index="1-2-2">选项4-2</el-menu-item>-->
-        <!--            <el-menu-item index="404">选项4-3</el-menu-item>-->
-        <!--            <el-menu-item index="401">选项4-4</el-menu-item>-->
-        <!--          </el-submenu>-->
-        <!--          <el-submenu index="1-3">-->
-        <!--            <template slot="title"><i class="fa fa-circle mark"></i>运行</template>-->
-        <!--            <el-menu-item index="1-3-1">选项4-1</el-menu-item>-->
-        <!--          </el-submenu>-->
-        <!--          <el-submenu index="1-4">-->
-        <!--            <template slot="title"><i class="fa fa-circle mark"></i>数据源配置</template>-->
-        <!--            <el-menu-item index="1-4-1">选项4-1</el-menu-item>-->
-        <!--          </el-submenu>-->
-        <!--          <el-submenu index="1-5">-->
-        <!--            <template slot="title"><i class="fa fa-circle mark"></i>报表</template>-->
-        <!--            <el-menu-item index="1-5-1">选项4-1</el-menu-item>-->
-        <!--          </el-submenu>-->
-        <!--        </el-submenu>-->
-        <SidebarItem v-for="route in menuList" :key="route.id" :item="route"></SidebarItem>
+        <template v-for="server in serverList">
+          <el-submenu :index="server.id.toString()" background-color="#545c64">
+            <template slot="title">
+              <i class="icon-server"></i>
+              <span>{{ server.ipAddress }}</span>
+            </template>
+            <template v-for="child in server.children">
+              <el-submenu :index="server.id.toString() + '_' + child.id.toString()"
+                          @click.native="handleByMenu(server.id, child.id)">
+                <template slot="title">
+                  <i class="fa fa-circle mark"></i>
+                  <span>{{ child.name }}</span>
+                </template>
+                <div class="custom-tree">
+                  <el-tree class="filter-tree" :data="labelList" :indent="0" node-key="id"
+                           :props="defaultProps"
+                           @node-click="handleNodeClick"></el-tree>
+                </div>
+              </el-submenu>
+            </template>
+            <!--          <el-submenu index="1-2">-->
+            <!--            <template slot="title"><i class="fa fa-circle mark"></i>配置</template>-->
+            <!--            <el-menu-item index="1-2-1">选项4-1</el-menu-item>-->
+            <!--            <el-menu-item index="1-2-2">选项4-2</el-menu-item>-->
+            <!--            <el-menu-item index="404">选项4-3</el-menu-item>-->
+            <!--            <el-menu-item index="401">选项4-4</el-menu-item>-->
+            <!--          </el-submenu>-->
+            <!--          <el-submenu index="1-3">-->
+            <!--            <template slot="title"><i class="fa fa-circle mark"></i>运行</template>-->
+            <!--            <el-menu-item index="1-3-1">选项4-1</el-menu-item>-->
+            <!--          </el-submenu>-->
+            <!--          <el-submenu index="1-4">-->
+            <!--            <template slot="title"><i class="fa fa-circle mark"></i>数据源配置</template>-->
+            <!--            <el-menu-item index="1-4-1">选项4-1</el-menu-item>-->
+            <!--          </el-submenu>-->
+            <!--          <el-submenu index="1-5">-->
+            <!--            <template slot="title"><i class="fa fa-circle mark"></i>报表</template>-->
+            <!--            <el-menu-item index="1-5-1">选项4-1</el-menu-item>-->
+            <!--          </el-submenu>-->
+          </el-submenu>
+        </template>
+        <!--        <SidebarItem v-for="route in menuList" :key="route.id" :item="route"></SidebarItem>-->
       </el-menu>
     </el-col>
   </el-row>
@@ -39,6 +51,7 @@
 
 <script>
 import SidebarItem from '@/components/SidebarItem'
+import {getConnInfo} from "@/api/opc";
 
 export default {
   name: "LeftMenu",
@@ -47,45 +60,90 @@ export default {
   },
   data() {
     return {
-      menuList: [
+      serverList: [],
+      secondMenuList: [
         {
-          name: '192.168.223.166',
-          id: '1',
-          children: [
-            {id: '1-1', name: '通道'},
-            {id: '1-2', name: '配置'},
-            {id: '1-3', name: '运行'},
-            {id: '1-4', name: '数据源配置'},
-            {id: '1-5', name: '报表'}
-          ]
+          id: 's01',
+          name: '通道'
         },
         {
-          name: '182.68.1.90',
-          id: '2',
-          children: [
-            {id: '2-1', name: '通道'},
-            {
-              id: '2-2',
-              name: '配置',
-              children: [
-                {id: '2-2-1', name: '2-2-1'},
-                {id: '2-2-2', name: '2-2-2'},
-                {
-                  id: '2-2-3',
-                  name: '2-2-3',
-                  children: [
-                    {id: '2-2-3-1', name: '2-2-3-1'},
-                    {id: '2-2-3-2', name: '2-2-3-2'}
-                  ]
-                }
-              ]
-            },
-            {id: '2-3', name: '运行'},
-            {id: '2-4', name: '数据源配置'},
-            {id: '2-5', name: '报表'}
-          ]
+          id: 's02',
+          name: '配置'
+        },
+        {
+          id: 's03',
+          name: '运行'
+        },
+        {
+          id: 's04',
+          name: '数据源配置'
+        },
+        {
+          id: 's05', name: '报表'
         }
-      ]
+      ],
+      labelList: [{
+        label: '一级 1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }, {
+        label: '一级 2',
+        children: [{
+          label: '二级 2-1',
+          children: [{
+            label: '三级 2-1-1'
+          }]
+        }, {
+          label: '二级 2-2',
+          children: [{
+            label: '三级 2-2-1'
+          }]
+        }]
+      }, {
+        label: '一级 3',
+        children: [{
+          label: '二级 3-1',
+          children: [{
+            label: '三级 3-1-1'
+          }]
+        }, {
+          label: '二级 3-2',
+          children: [{
+            label: '三级 3-2-1'
+          }]
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  created() {
+    this.getConnInfo()
+  },
+  methods: {
+    /**
+     * 获取当前用户的连接信息
+     */
+    getConnInfo() {
+      getConnInfo().then(res => {
+        this.serverList = res.data;
+        for (let i in this.serverList) {
+          this.serverList[i].children = this.secondMenuList;
+        }
+      });
+    },
+    handleByMenu(serverId, menuId) {
+      console.log("serverId ==> " + serverId)
+      console.log("menuId ==> " + menuId)
+    },
+    handleNodeClick(data) {
+      console.log(data);
     }
   }
 }
@@ -98,6 +156,10 @@ export default {
   overflow: auto;
 }
 
+.menu-list {
+  height: 100%;
+}
+
 .el-submenu__title {
   color: white;
 }
@@ -133,6 +195,10 @@ export default {
   background-color: #4f77b2;
 }
 
+.el-menu .el-menu--inline {
+  overflow: hidden;
+}
+
 .el-submenu__title i {
   color: white;
 }
@@ -166,30 +232,86 @@ export default {
   margin-top: -4px;
 }
 
+.custom-tree {
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
 
-/*webkit内核*/
-.scroll_content::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
-}
+  .el-tree-node {
+    position: relative;
+    padding-left: 16px;
+  }
 
-/*o内核*/
-.scroll_content .-o-scrollbar {
-  -moz-appearance: none !important;
-  background: rgba(0, 255, 0, 0) !important;
-}
+  .el-tree-node__expand-icon.is-leaf {
+    display: none;
+  }
 
-/*IE10,IE11,IE12*/
-.scroll_content {
-  -ms-scroll-chaining: chained;
-  -ms-overflow-style: none;
-  -ms-content-zooming: zoom;
-  -ms-scroll-rails: none;
-  -ms-content-zoom-limit-min: 100%;
-  -ms-content-zoom-limit-max: 500%;
-  -ms-scroll-snap-type: proximity;
-  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-  -ms-overflow-style: none;
-  overflow: auto;
+  .el-tree-node__expand-icon.expanded {
+    transform: rotate(0deg);
+  }
+
+  .el-tree-node__children {
+    padding-left: 25px;
+  }
+
+  .el-tree-node :last-child:before {
+    height: 38px;
+  }
+
+  .el-tree > .el-tree-node:before {
+    border-left: none;
+  }
+
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+
+  .el-tree-node:before {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:after {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:before {
+    border-left: 1px dashed #b8b9bb;
+    bottom: 0px;
+    height: 100%;
+    top: -23px;
+    width: 1px;
+  }
+
+  .el-tree-node:after {
+    border-top: 1px dashed #b8b9bb;
+    height: 20px;
+    top: 15px;
+    width: 18px;
+  }
+
+  .el-tree .el-icon-caret-right:before {
+    content: "\e723";
+  }
+
+  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+    content: "\e722";
+  }
+
+  .el-tree-node__content > .el-tree-node__expand-icon {
+    padding: 0;
+    margin-right: 5px;
+  }
+
+  .el-tree-node__content {
+    padding: 15px;
+  }
 }
 </style>

chuanyi_client/src/utils/request.js

@@ -1,11 +1,11 @@
 import axios from 'axios'
 import {Notification, MessageBox, Message, Loading} from 'element-ui'
-import store from '@/store'
-import {getToken} from '@/utils/auth'
+import {clearUserInfo, getToken} from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import {tansParams, blobValidate} from "@/utils/cqcy";
 import cache from '@/plugins/cache'
 import {saveAs} from 'file-saver'
+import {logout} from "@/api/user";
 
 let downloadLoadingInstance;
 // 是否显示重新登录
@@ -15,7 +15,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
     // axios中请求配置有baseURL选项，表示请求URL公共部分
-    baseURL: "http://192.168.0.40:8081",
+    baseURL: "http://localhost:8081",
     // 超时
     timeout: 30000
 })
@@ -86,9 +86,10 @@ service.interceptors.response.use(res => {
                     }
                 ).then(() => {
                     isRelogin.show = false;
-                    store.dispatch('LogOut').then(() => {
+                    logout().then(res => {
+                        clearUserInfo()
                         location.href = '/index';
-                    })
+                    });
                 }).catch(() => {
                     isRelogin.show = false;
                 });
@@ -104,14 +105,12 @@ service.interceptors.response.use(res => {
             Notification.error({
                 title: msg
             })
-            // return Promise.reject('error')
             return Promise.reject(new Error(res.data.msg))
         } else {
             return res.data
         }
     },
     error => {
-        console.log('err' + error)
         let {message} = error;
         if (message == "Network Error") {
             message = errorCode[904];

chuanyi_client/src/views/login.vue

@@ -113,7 +113,6 @@ export default {
     }
   },
   created() {
-    this.getPublicKey();
     this.getCode();
   },
   methods: {
@@ -121,11 +120,13 @@ export default {
      * 获取验证码
      */
     getCode() {
-      getCode().then(res => {
+      getCode(true).then(res => {
         this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
-          this.loginForm.uid = res.data.uid;
-          this.codeUrl = "data:image/gif;base64," + res.data.verifyCode;
+          let data = res.data;
+          this.loginForm.uid = data.uid;
+          this.publicKey = data.publicKey;
+          this.codeUrl = "data:image/gif;base64," + data.verifyCode;
         }
       });
     },
@@ -151,7 +152,6 @@ export default {
           this.loading = true;
           const pwd = encrypt(this.loginForm.password, this.publicKey)
           login(this.loginForm.username.trim(), pwd, this.loginForm.code, this.loginForm.uid).then(res => {
-            console.log(res);
             setUserInfo(res.data.user, res.data.token)
             this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
           }).catch((e) => {