From 4a8d9f1920bdbf93dd6b685a4ca0fc6bb91c8ec2 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Mon, 2 Mar 2020 17:44:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=20web?=
 =?UTF-8?q?shell=E6=A8=A1=E5=9D=97=EF=BC=88=E4=BB=A5=E4=B8=8B=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=9C=89=E5=BE=85=E8=AE=A4=E7=9C=9F=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=EF=BC=8C=E6=AD=A4=E6=AC=A1=E6=8F=90=E4=BA=A4=E4=B8=BA=E6=96=B9?=
 =?UTF-8?q?=E4=BE=BF=E5=90=8E=E7=AB=AF=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=EF=BC=89=201.=E7=95=8C=E9=9D=A2=E5=B8=83=E5=B1=80=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=AE=8C=E6=88=90=202.=E5=A4=9Atab=E9=A1=B5=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E5=A4=9Axshell=E8=BF=9E=E6=8E=A5=EF=BC=88=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E9=97=AE=E9=A2=98=E6=9C=89=E5=BE=85=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=EF=BC=89=203.=E5=85=B3=E9=97=AD=E5=8A=9F=E8=83=BD=EF=BC=88?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=89=80=E6=9C=89=E8=BF=9E=E6=8E=A5=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/cli/console.vue  | 116 +++++++++
 nezha-fronted/src/components/cli/webSSH.scss  |  62 +++++
 nezha-fronted/src/components/cli/webSSH.vue   | 230 ++++++++++++++++++
 .../src/components/page/asset/asset.vue       |  17 +-
 4 files changed, 423 insertions(+), 2 deletions(-)
 create mode 100644 nezha-fronted/src/components/cli/console.vue
 create mode 100644 nezha-fronted/src/components/cli/webSSH.scss
 create mode 100644 nezha-fronted/src/components/cli/webSSH.vue

diff --git a/nezha-fronted/src/components/cli/console.vue b/nezha-fronted/src/components/cli/console.vue
new file mode 100644
index 000000000..1304005b0
--- /dev/null
+++ b/nezha-fronted/src/components/cli/console.vue
@@ -0,0 +1,116 @@
+<style scoped>
+  .console{
+    height:405px;
+    background-color: black;
+  }
+</style>
+<template>
+    <div class="console" >
+        <div  :id="'terminal'+idIndex"></div>
+    </div>
+</template>
+<script>
+import Terminal from '../common/js/Xterm'
+export default {
+  name: 'console',
+  props:{
+    terminal:{/*
+      cols: 400,
+      rows: 400,
+      width:'',
+      height:'',
+      assetId:0,
+      accountId:0,
+      uuid:'aaadwdwd',*/
+    },
+
+    idIndex:{
+      type: Number,
+      default: 0,
+    },
+  },
+  data () {
+    return {
+      term: null,
+      terminalSocket: null,
+      obj:{
+        id:2
+      },
+    }
+  },
+  watch:{
+    /*
+    token: {
+      immediate:true,
+      handler(val){
+        if(val){
+          this.create()
+        }
+      }
+    },
+    */
+  },
+  methods: {
+    create(){
+      let terminalContainer = document.getElementById('terminal'+this.idIndex);
+      //alert('id='+'terminal'+this.idIndex);
+      //alert('==='+JSON.stringify(terminalContainer));
+      this.term = new Terminal(
+        /*{
+        width:500,
+        height:400,
+        cols:225,
+        rows:200
+      }*/);
+      this.term.open(terminalContainer);
+      //this.term.write("**************"+this.terminal.assetId);
+      //this.term.focus();
+      let token = sessionStorage.getItem('nz-token');
+      let url = "ws://192.168.40.247:8080/nz-admin/terminal.ws?width="+this.terminal.width+"&height="+this.terminal.height+"&cols="+this.terminal.cols+"&rows="+this.terminal.rows+"&token="+token+"&assetId="+this.terminal.assetId+"&accountId="+this.terminal.accountId+"&uuid="+this.terminal.uuid;
+      //alert(url);
+      this.terminalSocket = new WebSocket(url);
+      // this.terminalSocket = new WebSocket("ws://192.168.41.101:8088/nz-admin/terminal.ws?width=1600&height=1005&cols=225&rows=58&token="+this.token);
+
+      this.terminalSocket.onopen = () =>{
+        //alert('open');
+      };
+      this.terminalSocket.onclose = () =>{
+        //alert('closeSocket');
+      };
+      this.terminalSocket.ondata = (data) =>{
+        //alert('data:'+data);
+      };
+      this.terminalSocket.onerror = (e) =>{
+        //alert('error'+e);
+      };
+
+      this.term.attach(this.terminalSocket);
+      this.term._initialized = true;
+      this.term.fit();
+    },
+
+    closeSocket(){
+      if(this.terminalSocket){
+        this.terminalSocket.close();
+      }
+      if(this.term) {
+        this.term.destroy();
+      }
+    },
+  },
+  mounted () {
+    this.create();
+  },
+  created(){
+
+  },
+  beforeCreate(){
+
+  },
+  beforeDestroy () {
+    this.closeSocket();
+    //this.terminalSocket.close()
+    //this.term.destroy()
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/cli/webSSH.scss b/nezha-fronted/src/components/cli/webSSH.scss
new file mode 100644
index 000000000..2578831d4
--- /dev/null
+++ b/nezha-fronted/src/components/cli/webSSH.scss
@@ -0,0 +1,62 @@
+
+.console-dialog {
+  .menu {
+
+  }
+  .console{
+
+  }
+
+  .console-title-icon{
+    font-size:18px;
+    color: #909399;
+    position: absolute;
+    top:9px;
+  }
+  .console-title-icon:hover:before{
+    color: #1989fa;
+  }
+
+  .el-dialog {
+    .el-dialog__body{
+      padding: 0px !important;
+    }
+    .el-dialog__header{
+      padding: 0px !important;
+    }
+   }
+  .el-tabs--border-card>.el-tabs__content {
+    padding: 0px !important;
+  }
+
+  .el-tabs {
+    /*background-color: #F5F7FA;*/
+  }
+
+  .el-tabs .el-tabs__header {
+    margin-left:90px;
+    margin-right:150px;
+  }
+
+  .el-menu--horizontal>.el-submenu .el-submenu__title {
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .el-menu.el-menu--horizontal .el-submenu__title i:first-child:before{
+    color: #909399;
+    font-size:22px;
+  }
+  .el-menu.el-menu--horizontal .el-submenu__title i:first-child:hover:before{
+    color: #1989fa;
+  }
+
+  .el-submenu__title:hover{
+    background-color:#FFF !important;
+  }
+
+
+}
+.dailog-custom{
+  width:100%;
+}
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
new file mode 100644
index 000000000..2afad366c
--- /dev/null
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -0,0 +1,230 @@
+<style lang="scss">
+  @import './webSSH.scss';
+</style>
+<template>
+  <el-dialog class="console-dialog"
+             :visible.sync="consoleShow"
+             width="70%"
+             :customClass="{'dailog-custom' :isFullScreen == true}"
+             @close="closeDailog"
+             @opened="initDialog">
+
+    <div style='position: relative;border:solid 0px red;'>
+      <el-menu  mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;'>
+          <el-submenu index="1"  style="width:40px;">
+            <template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 9px;"></i></template>
+            <el-submenu index="1-1">
+              <template slot="title">文字大小</template>
+              <el-menu-item index="1-1-1">最小</el-menu-item>
+              <el-menu-item index="1-1-2">小</el-menu-item>
+              <el-menu-item index="1-1-3">中</el-menu-item>
+              <el-menu-item index="1-1-4">大</el-menu-item>
+            </el-submenu>
+            <el-submenu index="1-2" >
+              <template slot="title">字体</template>
+              <el-menu-item index="1-2-1">Monosapace</el-menu-item>
+              <el-menu-item index="1-2-2">Courier New</el-menu-item>
+            </el-submenu>
+          </el-submenu>
+          <el-submenu index="2" style="width:50px;">
+            <template slot="title" ><i class="el-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 9px;"></i></template>
+            <el-menu-item index="2-1" @click="download">下载</el-menu-item>
+            <el-menu-item index="2-2" @click="upload">上传</el-menu-item>
+          </el-submenu>
+       </el-menu>
+
+      <el-tabs v-model="editableTabsValue" @tab-click="handleClick" @tab-remove="removeTab"  closable style='width:100%' type="border-card">
+        <el-tab-pane
+          v-for="(item, index) in editableTabs"
+          :key="item.name"
+          :label="item.title"
+          :name="item.name"
+        >
+          <!-- tab显示的内容 -->
+          <span slot="label" > <i class="el-icon-aim"></i>{{item.title}}</span>
+          <my-console :terminal="item.terminal"  :ref="'console'+index"    :idIndex="index"></my-console>
+        </el-tab-pane>
+
+      </el-tabs>
+<!--
+      <el-button size='mini' style='position: absolute;right:50px;top:5px;'>设置</el-button>
+
+      <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
+      -->
+      <i style='right:103px;' class="el-icon-minus console-title-icon"></i>
+      <i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
+      <i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
+      <i style='right:8px;' @click="closeConsole" class="el-icon-close console-title-icon"></i>
+      <!--el-icon-setting  el-icon-minus  el-icon-full-screen  el-icon-copy-document-->
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import Console from './console'
+  import uuidv1 from "uuid/v1";
+
+  export default {
+    name: 'webSSH',
+    components: {
+      'my-console': Console
+    },
+
+    data() {
+      return {
+        consoleShow:false,
+        isFullScreen:false,
+        /*
+        terminal: {
+          //pid: 1,
+          //name: 'terminal',
+          cols: 400,
+          rows: 400,
+          assetId:'',
+          uuid:'',
+        },
+        */
+        //activeName:'',
+        editableTabsValue: '-1',//当前显示的console
+        editableTabs: [/*
+          {
+          title: '用户管理',
+          name: '1',
+          content: '用户管理内容',
+          terminal: {
+            cols: 400,
+            rows: 400,
+            width:'',
+            height:'',
+            assetId:0,
+            accountId:0,
+            uuid:'aaadwdwd',
+          },
+        }, {
+          title: '角色管理',
+          name: '2',
+          content: '角色管理内容'
+        },*/ ],
+        tabIndex: -1,//添加tab的时候使用，暂留
+      }
+    },
+    methods: {
+      getUuid(){
+        let uuid = uuidv1();
+        let now = new Date().getTime();
+        uuid = uuid+"-"+now+"-"+now;
+        return uuid;
+      },
+      addConsole(id,host,accountId,port){
+        let uuid = this.getUuid();
+        let newTabName = ++this.tabIndex + '';
+        let title = host;
+        if(port){
+          title = title+":"+port;
+        }
+        const console = {
+          title:title,
+          name:newTabName,
+          terminal: {
+            cols: 825,
+            rows: 800,
+            width:500,
+            height:400,
+            assetId:id,
+            accountId:accountId,
+            uuid:uuid,
+          },
+        };
+        this.editableTabsValue = newTabName;
+        this.editableTabs.push(console);
+      },
+      show(id,host,accountId,port){
+        this.addConsole(id,host,accountId,port);
+        this.consoleShow = true;
+      },
+      initDialog(){
+
+      },
+
+      //可以做最小化的处理，点击窗口外的空白处会调用此方法
+      closeDailog(){
+        //alert('closeDailog');
+      },
+      closeConsole(){
+        //关闭所有连接
+        this.editableTabs.forEach((tab, index) => {
+          this.$refs['console'+index][0].closeSocket();
+        });
+
+        this.editableTabs = [];
+        this.editableTabsValue= '-1',//当前显示的consol
+        this.tabIndex = -1
+
+        this.consoleShow = false;
+      },
+      handleClick(){
+
+      },
+      removeTab(targetName) {
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        //关闭此console的链接
+        //?????????????????
+
+        if(this.editableTabs.length<=0){
+          this.closeConsole();
+        }
+      },
+      handleSelect(key, keyPath) {
+        //alert(key, keyPath);
+      },
+      download(){
+
+      },
+      upload(){
+        //alert('upload');
+      },
+      fullScreen(){
+        isFullScreen = true;
+
+        //const dailog = document.getElementById("consoleDailog");
+        //dailog.style.width = `${100}%`;
+      },
+      /*
+      addTab(targetName) {
+        let newTabName = ++this.tabIndex + '';
+        this.editableTabs.push({
+          title: 'New Tab',
+          name: newTabName,
+          content: 'New Tab content'
+        });
+        this.editableTabsValue = newTabName;
+      },
+      */
+
+
+    },
+    watch: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+  }
+</script>
+
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 66ba498fc..d94f618f6 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -164,7 +164,7 @@
                 class="el-icon-delete"></i>
               </span>&nbsp;&nbsp;&nbsp;
               &nbsp;
-              <span title="CLI" @click="ssss(scope.row.id ,scope.row.host)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
+              <span title="CLI" @click="cli(scope.row.id ,scope.row.host,scope.row.accounts)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
                 class="nz-icon nz-icon-cli"></i>
               </span>
             </template>
@@ -195,6 +195,7 @@
       ref="elementset"
     ></element-set>
     <module-box :module="module" @reload="getAssetData" ref="moduleBox"></module-box>
+    <web-ssh ref="webSsh" ></web-ssh>
   </div>
 </template>
 
@@ -202,11 +203,14 @@
   import bus from "../../../libs/bus";
   import exportXLSX from "../../common/exportXLSX";
   import endpointStatusPop from "./endpointStatusPop";
+  import webSSH from "../../cli/webSSH";
+
   export default {
     name: "asset",
     components:{
       'export-excel':exportXLSX,
-      'endpoint-status-pop':endpointStatusPop
+      'endpoint-status-pop':endpointStatusPop,
+      'web-ssh':webSSH,
     },
     data() {
       return {
@@ -498,6 +502,15 @@
         });
         window.open(routeData.href);
       },
+      cli(id,host,accounts){
+        let port = '';
+        let accountId = '';
+        if(accounts && accounts.length>0 && accounts[0].port){
+          port = accounts[0].port;
+          accountId = accounts[0].id;
+        }
+        this.$refs.webSsh.show(id,host,accountId,port);
+      },
       jumpToAlertMsg(assetId) {
         this.$store.commit('assetForAlertListChange', assetId);
         bus.$emit("menu-change", 'alertList');