feat：termail 功能实现 细节待优化

nezha-fronted/package.json

@@ -31,6 +31,7 @@
     "node-sass": "^4.14.1",
     "pl-table": "^2.5.8",
     "quill": "^1.3.7",
+    "v-selectpage": "^2.1.4",
     "vis": "^4.21.0-EOL",
     "vis-network": "^8.3.2",
     "vue": "^2.5.2",

nezha-fronted/src/components/charts/chart-group.vue

@@ -33,6 +33,11 @@
                 <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
 
               </span>
+              <span class="chart-title-icon"  v-else :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span  v-has="'panel_chart_edit'" :title="$t('dashboard.refresh')" class="" @click="addGroupItemChart">
+                  <i class="nz-icon nz-icon-plus"></i>
+                </span>
+              </span>
             </span>
             <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
               <li  @click="editChart" class="el-dropdown-menu__item">

nezha-fronted/src/components/charts/chart-list-group.vue

@@ -204,6 +204,8 @@ import chartAlertList from './chart-alert-list'
 import textChart from './text-chart'
 import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
+import chartTempData from '@/components/charts/chartTempData'
+import {fromRoute} from "@/components/common/js/constants";
 // import visNetwork from './visNetwork'
 export default {
   name: 'chartList',
@@ -677,6 +679,9 @@ export default {
               // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
               //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
               // }
+              if (this.from === fromRoute.chartTemp) {
+                return chartTempData
+              }
               return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
             })
             // 一个图表的所有element单独获取数据

nezha-fronted/src/components/charts/chart-list.vue

@@ -231,7 +231,7 @@ import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
 import chartGroup from './chart-group'
 import { fromRoute } from '@/components/common/js/constants'
-import chartTempData from "@/components/charts/chartTempData";
+import chartTempData from '@/components/charts/chartTempData'
 // import visNetwork from './visNetwork'
 export default {
   name: 'chartList',

nezha-fronted/src/components/cli/console.vue

@@ -201,7 +201,17 @@ export default {
       } else {
         baseUrl = baseUrl.replace('http://', 'ws://').replace('https://', 'ws://')
       }
-      const url = baseUrl + '/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
+      let url = ''
+      if (this.terminal.type === 'asset') {
+        url = baseUrl + '/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
+      } else if (this.terminal.type === 'custom') {
+        url = baseUrl + '/terminal.ws?width=' + this.terminal.width + '&height=' + this.terminal.height + '&cols=' + this.terminal.cols + '&rows=' + this.terminal.rows + '&token=' + token + '&accountId=' + this.terminal.accountId + '&uuid=' + this.terminal.uuid
+        Object.keys(this.terminal.custom).forEach(key => {
+          if (this.terminal.custom[key]) {
+            url += '&' + key + '=' + this.terminal.custom[key]
+          }
+        })
+      }
       console.info(baseUrl, url)
       this.terminalSocket = new WebSocket(url)
       // 连接成功

nezha-fronted/src/components/cli/webSSH.scss

@@ -157,3 +157,46 @@
 .dailog-custom{
   width:100%;
 }
+/* 上滑resize工具条 */
+.resize-modal{
+
+}
+.sub-list-resize, .sub-list-resize-copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 9px;
+  width: 100%;
+  box-shadow: inset 0 1px 0 0 #BEBEBE;
+  background-color: #e6eaed;
+  position: absolute;
+  z-index: 1;
+  box-sizing: border-box;
+  user-select: none;
+  color: #5f6368;
+  cursor: ns-resize;
+  top: 0;
+}
+.sub-list-window-control {
+  display: flex;
+  align-items: center;
+  margin-left: 14px;
+  position: absolute;
+  right: 0;
+  height: 44px;
+  z-index: 2;
+
+  .window-control-btn {
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .window-control-btn>i {
+    color: #999999;
+    font-size: 14px;
+    transition: all .2s;
+  }
+  .window-control-btn>i:hover {
+    color: $--theme-color;
+  }
+}
+/* 上滑resize工具条--end */

nezha-fronted/src/components/cli/webSSH.vue

@@ -64,8 +64,19 @@
             <my-console :fontSize="fontSize"    :idIndex="index" :isFullScreen="isFullScreen"    :ref="'console'+index" :terminal="item.terminal" @closeConsole="removeTab" @refreshConsoleTitle="refreshTabTitle"></my-console>
 
           </el-tab-pane>
-          <el-tab-pane key="add" name="add">
+          <el-tab-pane key="add" name="addConsole" style="width: 20px">
-            <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
+            <el-popover
+              slot="label"
+              placement="bottom"
+              width="200"
+              trigger="hover"
+             >
+              <div>
+                <div  @click="assetShowChange">Asset</div>
+                <div @click="customShow=true">Custom</div>
+              </div>
+              <span slot="reference" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
+            </el-popover>
           </el-tab-pane>
         </el-tabs>
         <i @click="minScreen" class="nz-icon nz-icon-minus console-title-icon" style='right:70px;'></i>
@@ -170,6 +181,72 @@
             </div>
           </div>
         </el-dialog>
+        <el-dialog :modal-append-to-body='false'  :show-close="true" :visible.sync="assetShow" @close="assetShow=false" class="nz-dialog" width="620px" >
+          <div >
+            <el-form label-width="120px" size="small" :model="assetContent" label-position = "top" :rules="rules" ref="assetConnect" v-loading="assetLoading" >
+              <el-form-item :label='$t("overall.asset")' prop="assetId" class="flex">
+                <v-selectpage
+                  style="flex: 1"
+                  :data="assetData"
+                  :tb-columns="columns"
+                  key-field="id"
+                  show-field="manageIp"
+                  search-field="manageIp"
+                  v-model="assetContent.assetId"
+                  size="small"
+                  :placeholder="$t('dashboard.panel.chartForm.selectAsset')"
+                  id="box-input-asset-id"
+                  :result-format="resultFormat"></v-selectpage>
+                <button @click="connect" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">Connect</button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-dialog>
+        <el-dialog :modal-append-to-body='false'  :show-close="true" :visible.sync="customShow" @close="customShow=false" class="nz-dialog" width="620px" >
+          <div >
+            <el-form label-width="120px" size="small" :model="customConnect" label-position = "top" :rules="rulesCustom" ref="customConnect" v-loading="assetLoading" class="custom">
+              <el-form-item :label='$t("webshell.protocol")' prop="authProtocol">
+                <el-select value-key="id" popper-class="config-dropdown" v-model="customConnect.authProtocol" placeholder="" size="small" id="webshell-box-input-protocol">
+                  <el-option v-for="item in authProtocol" :id="'dc-principal-op-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.authType")' prop="authType">
+                <el-select value-key="id" popper-class="config-dropdown" v-model="customConnect.authType" placeholder="" size="small" id="webshell-box-input-protocol">
+                  <el-option v-for="item in authType" :id="'dc-principal-op-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.host")' prop="host">
+                <el-input v-model="customConnect.host" size="small"/>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.port")' prop="host">
+                <el-input v-model="customConnect.port" size="small"/>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.authUsername")' prop="authUsername">
+                <el-input v-model="customConnect.authUsername" size="small"/>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.authPin")' prop="authPin">
+                <el-input v-model="customConnect.authPin" size="small"/>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.authUserTip")' prop="authUserTip">
+                <el-input v-model="customConnect.authUserTip" size="small"/>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.authPinTip")' prop="authPinTip">
+                <el-input v-model="customConnect.authPinTip" size="small"/>
+              </el-form-item>
+              <el-form-item :label='$t("webshell.authPriKey")' prop="authPriKey">
+                <el-input v-model="customConnect.authPriKey" size="small"/>
+              </el-form-item>
+              <div class="right-box__footer">
+                <button id="asset-edit-cancel" @click="customShow=false" class="footer__btn footer__btn--light">
+                  <span>{{$t('overall.cancel')}}</span>
+                </button>
+                <button id="asset-edit-save" :disabled="prevent_opt.save" class="footer__btn" @click="connect">
+                  <span>Connect</span>
+                </button>
+              </div>
+            </el-form>
+          </div>
+        </el-dialog>
       </div>
     </div>
 </template>
@@ -178,16 +255,38 @@
 import Console from './console'
 import uuidv1 from 'uuid/v1'
 import axios from 'axios'
-
+import { SelectPage } from 'v-selectpage'
+import { host, port } from '@/components/common/js/validate'
 export default {
   name: 'webSSH',
   components: {
-    'my-console': Console
+    'my-console': Console,
+    'v-selectpage': SelectPage
   },
 
   data () {
     const termFontSize = parseInt(localStorage.getItem('termFontSize'))
     return {
+      authProtocol: [
+        {
+          value: 1,
+          name: 'SSH'
+        },
+        {
+          value: 2,
+          name: 'TELNET'
+        }
+      ],
+      authType: [
+        {
+          value: 1,
+          name: 'Password'
+        },
+        {
+          value: 2,
+          name: 'Key'
+        }
+      ],
       consoleShow: false,
       isFullScreen: false,
       closeConfirmShow: false,
@@ -213,7 +312,85 @@ export default {
       downloadResult: null,
       // 字体大小
       fontSize: termFontSize || 15,
-      webSSHHeight: ''// 最小化之前的高度
+      webSSHHeight: '', // 最小化之前的高度
+      assetShow: false,
+      customShow: false,
+      assetContent: {
+        assetId: ''
+      },
+      customConnect: {
+        host: '',
+        port: '',
+        authType: 1,
+        authUsername: '',
+        authPin: '',
+        authPriKey: '',
+        authUserTip: '',
+        authPinTip: '',
+        authProtocolPort: '',
+        authProtocol: 1
+      },
+      columns: [
+        { title: 'id', data: 'id' },
+        { title: 'name', data: 'name' },
+        { title: 'Manage Ip', data: 'manageIp' },
+        {
+          title: 'Type',
+          data: (row) => {
+            return row.type.name
+          }
+        },
+        {
+          title: 'Model',
+          data: (row) => {
+            return row.model.name
+          }
+        },
+        {
+          title: 'Datacenter',
+          data: (row) => {
+            return row.dc.name
+          }
+        }
+      ],
+      rules: {
+        assetId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      rulesCustom: {
+        authProtocol: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+          { validator: host, trigger: 'change' }
+        ],
+        port: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+          { validator: port, trigger: 'change' }
+        ],
+        authUsername: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authPin: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        // authUserTip: [
+        //   { validator: this.authUserTipValid, trigger: 'change' }
+        // ],
+        // authPinTip: [
+        //   { validator: this.authPinTipValid, trigger: 'change' }
+        // ],
+        // authPriKey: [
+        //   { validator: this.authPriKeyValid, trigger: 'change' }
+        // ]
+      },
+      assetData: [],
+      assetLoading: false
     }
   },
   methods: {
@@ -224,7 +401,7 @@ export default {
       this.currentUuid = uuid
       return uuid
     },
-    addConsole (id, host, accountId, port) {
+    addConsole (id, host, accountId, port, type) {
       if (!id) { id = '' }
       if (!host) { host = '' }
       if (!accountId) { accountId = '' }
@@ -251,9 +428,13 @@ export default {
           height: this.consoleHeight,
           assetId: id,
           accountId: accountId,
-          uuid: uuid
+          uuid: uuid,
+          type: type
         }
       }
+      if (type === 'custom') {
+        console.terminal.custom = { ...this.customConnect }
+      }
       this.editableTabsValue = newTabName
       this.editableTabs.push(console)
 
@@ -510,56 +691,11 @@ export default {
         })
       }
     },
-    /* dragEagle:function(e){
-        var targetDiv= document.getElementById('shell-service'); //e.target.parentNode.parentNode;.children[0]
-
-        //得到点击时该容器的宽高：
-        var targetDivHeight=targetDiv.offsetHeight;
-        var startY=e.clientY;
-        var _this=this;
-
-        document.onmousemove=function(e){
-          e.preventDefault();
-          //得到鼠标拖动的宽高距离：取绝对值
-          var distY=Math.abs(e.clientY-startY);
-
-          //往上方拖动：
-          if( e.clientY < startY){
-            targetDiv.style.height=targetDivHeight+distY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > startY) {
-            targetDiv.style.height=(targetDivHeight-distY)+'px';
-          }
-          let height = document.body.clientHeight;//可视高度
-          if(parseInt(targetDiv.style.height)>=height){
-            targetDiv.style.height=height+'px';
-          }
-          if(parseInt(targetDiv.style.height)<=10){
-            targetDiv.style.height=20+'px';
-          }
-
-          _this.editableTabs.forEach((tab, index) => {
-            _this.$refs['console'+index][0].resizeConsole(parseInt(targetDiv.style.height));
-          });
-        }
-
-        document.onmouseup=function(){
-          document.onmousemove=null;
-          _this.editableTabs.forEach((tab, index) => {
-           // _this.$refs['console'+index][0].resizeServiceConsole(parseInt(targetDiv.style.height));
-            _this.$refs['console'+index][0].resizeServiceConsole();
-          });
-
-          _this.consoleHeight = parseInt(targetDiv.style.height);
-          if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
-        }
-      }, */
     dragEagle (e) {
       // let mainListDom = document.querySelector(".main-list"); //主列表
       const subBoxDom = document.querySelector('#shell-service.sub-box') // 副列表
       const subListDom = document.querySelector('#shell-service .sub-list') // 副列表
-      const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+      const contentRightDom = document.querySelector('.list-page') // 右侧内容区
       const resizeBarHeight = 9 // resize横条高度
       const minHeight = 15 // terminal最小高度限制为15
       // let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
@@ -656,6 +792,54 @@ export default {
       this.editableTabs.forEach((tab, index) => {
         this.$refs['console' + index][0].setFontSize(fontSize)
       })
+    },
+    resultFormat (resp) {
+      console.log(resp)
+      if (resp && resp.data) return resp.data.values.gridResult
+    },
+    assetShowChange () {
+      this.assetShow = true
+      this.getAssetData()
+    },
+    getAssetData () {
+      this.assetLoading = true
+      this.$get('asset/asset', { pageSize: -1 }).then(res => {
+        this.assetLoading = false
+        this.assetData = res.data.list
+      })
+    },
+    connect () {
+      this.prevent_opt.save = true
+      if (this.assetShow) {
+        console.log(this.assetContent)
+        this.$refs.assetConnect.validate((valid) => {
+          if (valid) {
+            // this.show(id, host, accountId, port)
+            const asset = this.assetData.find(item => item.id == this.assetContent.assetId)
+            console.log(asset)
+            this.addConsole(asset.id, asset.manageIp, '', '', 'asset')
+            this.assetShow = false
+            this.prevent_opt.save = false
+          }
+        })
+      } else {
+        this.$refs.customConnect.validate((valid) => {
+          if (valid) {
+            this.addConsole('', this.customConnect.host, '', this.customConnect.port, 'custom')
+            this.customShow = false
+            this.prevent_opt.save = false
+          }
+        })
+      }
+    },
+    authUserTipValid () {
+
+    },
+    authPinTipValid () {
+
+    },
+    authPriKeyValid () {
+
     }
   },
   watch: {
@@ -706,6 +890,22 @@ export default {
   }
   .sub-list{
     background: #E4E7ED;
-
+  }
+  .flex /deep/ .el-form-item__content{
+    display: flex;
+  }
+  .nz-btn-style-normal-new{
+    margin-left: 10px;
+    margin-top: 2px;
+  }
+  /deep/ .custom .el-form-item {
+    width: calc(50% - 30px);
+    display: inline-block;
+  }
+  /deep/ .custom .el-form-item:nth-child(even) {
+    margin-left: 10px;
+  }
+  /deep/ .el-select--small{
+    width: 100%;
   }
 </style>

nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue

@@ -15,7 +15,7 @@
             <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
               <div class="box-content">
                 <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
-                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelData"></chart-list>
+                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList"></chart-list>
               </div>
             </div>
           </div>
@@ -108,7 +108,8 @@ export default {
       // removeModal: false, // 删除弹出
       // deleteObj: {}, // 删除对象
       // ---图表相关参数--end
-      scrollbarWrap: null
+      scrollbarWrap: null,
+      panelDataList: []
     }
   },
   components: {
@@ -227,10 +228,15 @@ export default {
       } else {
         if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
           console.log(this.obj)
-          this.panelData = [this.obj]
+          this.panelDataList = [this.obj]
           console.log(this.panelData)
-          if (this.panelData.length > 0) {
+          if (this.obj.type === 'group') {
-            this.showPanel.id = this.filter.panelId = this.panelData[0].id
+            this.$get('/visual/panel/chart', { ids: this.obj.id,pageSize: -1 }).then(res => {
+              console.log(res)
+            })
+          }
+          if (this.panelDataList.length > 0) {
+            this.showPanel.id = this.filter.panelId = 0
             this.getData(this.filter)
           }
         } else {

nezha-fronted/src/components/common/language/cn.js

@@ -165,7 +165,16 @@ const cn = {
     downloadButtonTitle: '下载',
     filePath: '文件路径',
     closeTip: '是否断开所有连接，关闭窗口？',
-    remember: '记住我的决定'
+    remember: '记住我的决定',
+    protocol: 'Protocol',
+    authType: 'Auth type',
+    host: 'Host',
+    port: 'Port',
+    authUsername: 'Username',
+    authPin: 'Password',
+    authUserTip: 'Username prompt',
+    authPinTip: 'Password prompt',
+    authPriKey: 'Key',
   },
   pageSize: '条/页',
   login: {

nezha-fronted/src/components/common/language/en.js

@@ -173,7 +173,16 @@ const en = {
     downloadButtonTitle: 'Download',
     filePath: 'File path',
     closeTip: 'All connections will be closed, are you sure you want to close the window?',
-    remember: 'Remember my decision'
+    remember: 'Remember my decision',
+    protocol: 'Protocol',
+    authType: 'Auth type',
+    host: 'Host',
+    port: 'Port',
+    authUsername: 'Username',
+    authPin: 'Password',
+    authUserTip: 'Username prompt',
+    authPinTip: 'Password prompt',
+    authPriKey: 'Key',
   },
   login: {
     username: 'Username',

nezha-fronted/src/components/common/rightBox/chartTempBox.vue

@@ -293,6 +293,45 @@ export default {
             show: true
           }
         ]
+        this.transfer.searchMsg.searchLabelList = [
+          {
+            id: 1,
+            name: 'ID',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 20,
+            name: 'SN',
+            type: 'input',
+            label: 'sn',
+            disabled: false
+          }, {
+            id: 21,
+            name: 'Host',
+            type: 'input',
+            label: 'host',
+            disabled: false
+          }, {
+            id: 22,
+            name: this.$t('asset.state'),
+            type: 'select',
+            label: 'assetState',
+            disabled: false
+          }, {
+            id: 23,
+            name: 'pingStatus',
+            type: 'select',
+            label: 'pingStatus',
+            disabled: false
+          }, {
+            id: 23,
+            name: this.$t('asset.cabinet'),
+            type: 'input',
+            label: 'cabinetName',
+            disabled: false
+          }
+        ]
       } else {
         this.transferTableTitle = [
           {
@@ -306,6 +345,47 @@ export default {
             show: true
           }
         ]
+        this.transfer.searchMsg.searchLabelList = [
+          {
+            id: 11,
+            name: 'project id',
+            type: 'input',
+            label: 'projectIds',
+            disabled: false
+          }, {
+            id: 12,
+            name: 'endpoint name',
+            type: 'input',
+            label: 'name',
+            disabled: false
+          },
+          {
+            id: 13,
+            name: 'endpoint id',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 14,
+            name: this.$t('asset.asset'),
+            type: 'query',
+            label: 'query',
+            disabled: false
+          }, {
+            id: 34,
+            name: this.$t('project.project.project'),
+            // name: this.$t('asset.asset'),
+            type: 'input',
+            label: 'projectName',
+            disabled: false
+          }, {
+            id: 35,
+            name: this.$t('project.module.module'),
+            // name: this.$t('asset.asset'),
+            type: 'input',
+            label: 'moduleName',
+            disabled: false
+          }]
       }
       this.getTableData()
     }

nezha-fronted/src/components/common/rightBox/dcBox.vue

@@ -84,7 +84,7 @@ export default {
       editDc: {},
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
         ],
         state: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }

nezha-fronted/src/components/layout/header.vue

@@ -4,36 +4,30 @@
       <el-breadcrumb-item v-for="crumb in breadcrumb" :key="crumb.code">{{$t(crumb.i18n)}}</el-breadcrumb-item>
     </el-breadcrumb>
     <div class="header-menu">
-      <template v-for="(menu, index) in getMenuList">
+      <el-dropdown>
-        <template v-if="menu.code === 'header' && menu.children && menu.children.length > 0">
+        <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-more-app"></i></div>
-          <template v-for="(subMenu, subIndex) in menu.children">
-            <el-dropdown v-if="subMenu.code === 'header_link'" :key="subIndex">
-              <div class="header-menu--item"><i class="nz-icon nz-icon-more-app"></i></div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-for="(item, index) in linkData" :key="index" :index="'0-' + index">
             <span class="link-title"><a :href='item.url' :title="item.name" rel="noopener norefferrer" target="_blank">{{item.name}}</a></span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-            <el-dropdown v-if="subMenu.code === 'header_terminal'" :key="subIndex">
+      <el-dropdown >
         <div id="header-open-cli" @click="cli">
-                <div class="header-menu--item"><i class="nz-icon nz-icon-terminal"></i></div>
+          <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-terminal"></i></div>
           <span v-show="$store.state.consoleCount>0" class="right-tip">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</span>
         </div>
       </el-dropdown>
-            <el-dropdown v-if="subMenu.code === 'header_add'" :key="subIndex">
+      <el-dropdown>
-              <div class="header-menu--item"><i class="nz-icon nz-icon-create-square"></i></div>
+        <div class="header-menu&#45;&#45;item"><i class="nz-icon nz-icon-create-square"></i></div>
         <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="(item, createIndex) in createMenu" :key="createIndex" v-has="item.permission" :index="`${index}-${subIndex}-${createIndex}`">
+          <el-dropdown-item v-for="(item, createIndex) in createMenu" :key="createIndex" v-has="item.permission" :index="`${createIndex}`">
             <div :id="'create-box-'+createIndex" @click="createBox(item)">
               <span>{{item.label}}</span>
             </div>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-          </template>
-        </template>
-      </template>
     </div>
     <!--个人操作-->
     <div class="personal">
@@ -565,7 +559,7 @@ export default {
   .right-tip {
     position: absolute;
     left: 30px;
-    bottom: 27px;
+    top: 10px;
     padding: 0 6px;
     line-height: 15px;
     height: 15px;

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -160,7 +160,7 @@ export default {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
       this.tools.loading = true
-      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox, panelId: 0, returnChildren: 0 }).then(response => {
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox, panelId: 0, returnChildren: 0, groupId: 0 }).then(response => {
         this.tools.loading = false
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -144,15 +144,17 @@
         <!-- begin--标题-->
         <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
         <!-- end--标题-->
-
+        <div class="header__operation">
-        <!-- begin--顶部按钮-->
+          <span v-cancel="{obj: editChart, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
-        <div class="right-box-top-btns right-box-form-delete">
-          <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" id="chart-box-delete" type="button" v-if="editChart.id">
-            <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-            <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-          </button>
         </div>
-        <!-- end--顶部按钮-->
+<!--        &lt;!&ndash; begin&#45;&#45;顶部按钮&ndash;&gt;-->
+<!--        <div class="right-box-top-btns right-box-form-delete">-->
+<!--          <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" id="chart-box-delete" type="button" v-if="editChart.id">-->
+<!--            <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
+<!--            <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
+<!--          </button>-->
+<!--        </div>-->
+<!--        &lt;!&ndash; end&#45;&#45;顶部按钮&ndash;&gt;-->
       </div>
 
       <!-- begin--表单-->

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -91,7 +91,7 @@
               </button>
             </template>
           </export-excel>
-          <button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-lock'></i></button>
+          <button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-table-edit'></i></button>
           <button id="panel-lock" class="top-tool-btn margin-l-10" type="button" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
         </div>
       </template>

nezha-fronted/src/store/index.js

@@ -81,12 +81,6 @@ const store = new Vuex.Store({
 
     openConsole (state) { // 打开console，如果当前窗口数为0，则默认新建一个console
       state.consoleShow = true
-      if (state.consoleCount === 0) {
-        state.consoleCount++
-        state.isAddConsole = true
-      } else {
-        state.isAddConsole = false
-      }
     },
     addConsole (state, data) { // 打开console，并新建一个console
       state.consoleShow = true