NZ-584 feat: panel顶部工具栏改版

nezha-fronted/src/assets/css/common/rightBoxCommon.scss

@@ -192,7 +192,7 @@
 .right-box-select-dropdown {
   width: 625px;
 }
-.limit-height {
+.limit-height .el-cascader-menu {
   max-height: 200px;
   overflow: auto;
 }

nezha-fronted/src/components/charts/chart-bar-statistics.vue

@@ -21,7 +21,6 @@
             </span>
           </el-popover>
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
               <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">

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

@@ -1,7 +1,7 @@
 <style lang="scss" scoped>
   .chartBox {
     float:left;
-    padding: 0 0 10px 0;
+    padding: 0 10px 10px 0;
     position:relative;
     box-sizing: border-box;
   }

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

@@ -9,8 +9,13 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-if="from === fromRoute.asset" v-slot:top-tool-right>
+        <div class="top-tool-search margin-r-20">
+          <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
+            <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
+          </el-input>
+        </div>
         <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
-        <export-excel
+<!--        <export-excel
           id="asset-list"
           :params="searchLabel"
           :permissions="{import: 'panel_chart_add', export: 'panel_view'}"
@@ -24,7 +29,21 @@
             <button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="addChart">
               <i class="nz-icon nz-icon-create-square"></i></button>
           </template>
-        </export-excel>
+        </export-excel>-->
+        <button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn margin-r-10" @click.stop="addChart">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+        <top-tool-more-options
+          id="asset-list"
+          :params="searchLabel"
+          :permissions="{import: 'panel_chart_add', export: 'panel_view'}"
+          class="top-tool-export margin-r-10"
+          export-file-name="asset-charts"
+          export-url="visual/panel/export"
+          import-url="visual/panel/import"
+          @afterImport="getTableData"
+        >
+        </top-tool-more-options>
       </template>
       <template v-slot>
         <div class="panel">
@@ -51,11 +70,10 @@
 import chartBox from '../../../page/dashboard/chartBox'
 import chartList from '../../../charts/chart-list'
 import bus from '../../../../libs/bus'
-import exportXLSX from '@/components/common/exportXLSX'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import { fromRoute } from '@/components/common/js/constants'
-
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 export default {
   name: 'panelTabNew',
   mixins: [subDataListMixin],
@@ -139,7 +157,7 @@ export default {
     chartBox,
     chartList,
     nzBottomDataList,
-    'export-excel': exportXLSX
+    topToolMoreOptions
   },
   methods: {
     // 刷新
@@ -333,7 +351,7 @@ export default {
       this.pageObj.pageSize = val
       this.getTableData(this.obj.id)
     },
-    search: function () {
+    search () {
       if (this.$refs.chartList) {
         this.$refs.chartList.searchCharts(this.filter.searchName)
       }
@@ -346,13 +364,13 @@ export default {
         _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
       }, 300))
     },
-    focusInput: function () {
+    focusInput () {
       let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
       classVal = classVal.replace('query-input-inactive', 'query-input-active')
       document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
       this.$refs.queryPanel.focus()
     },
-    blurInput: function () {
+    blurInput () {
       if (!this.filter.searchName || this.filter.searchName == '') {
         setTimeout(function () {
           let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
@@ -361,10 +379,10 @@ export default {
         }, 100)
       }
     },
-    clearInput: function () {
+    clearInput () {
       this.$refs.queryPanel.focus()
     },
-    syncChart: function () {
+    syncChart () {
       if (this.from == this.fromRoute.asset || this.from == this.fromRoute.model) {
         this.$confirm(this.$t('tip.syncTip'), {
           confirmButtonText: this.$t('tip.yes'),
@@ -408,14 +426,14 @@ export default {
       this.tableHover = false
     }
   },
-  mounted: function () {
+  mounted () {
     this.scrollbarWrap = this.$refs.dashboardScrollbar
     this.onScroll()
     document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
     document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
   },
   watch: {
-    'filter.searchName': function (n, o) {
+    'filter.searchName' (n, o) {
       const temp = this
       setTimeout(function () {
         temp.search()
@@ -651,12 +669,6 @@ export default {
   .nz-dashboard-dropdown {
     z-index: 3001 !important;
   }
-  .panel .top-tools input {
-    background-color: $content-right-background-color;
-  }
-  .panel .top-tools  .el-input__inner {
-    background-color: $content-right-background-color;
-  }
   .panel-calendar .el-range-editor--mini.el-input__inner {
     height: 25px !important;
     border-color: #d8d8d8;

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

@@ -1,15 +1,15 @@
 <template>
   <div :style="{'height': height + 'px'}" class="search-box__container">
-    <div v-for="(data, type, index) in titleSearchListCopy" v-if="data.show" :key="index" ref="searchContentBox" class="search-content-box">
+    <div v-for="(data, type, index) in titleSearchListCopy" v-cloak v-if="data.show" :key="index" ref="searchContentBox" class="search-content-box">
       <label class="search-title">{{data.label}}:</label>
       <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValueOut[data.key]">
         <template v-for="(item, j) in data.children">
-          <el-checkbox v-show="!data.showMore || j < data.index" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
+          <el-checkbox v-if="!data.showMore || j < data.index" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
         </template>
       </el-checkbox-group>
+      <template v-for="(item, j) in data.children" v-else-if="data.type === 'dropdownCheckBox'">
         <dropdown
-        v-for="(item, j) in data.children"
-        v-else-if="data.type === 'dropdownCheckBox'"
+          v-if="!data.showMore || j < data.index"
           :key="j"
           :ref="`${type}_cascader`"
           :collapse-tags="true"
@@ -18,6 +18,7 @@
           @change="casChange(type, data.key)"
           @focus="casFocus"
         ></dropdown>
+      </template>
       <span v-show="contentWidth <= data.width" class="search-more" @click="changShowMore(type)">更多 <i :class="data.showMore?'el-icon-arrow-down':'el-icon-arrow-up'"/></span>
     </div>
   </div>

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -0,0 +1,344 @@
+<template>
+  <el-dropdown :size="size">
+    <button id="more" :class="triggerButtonClass" title="more...">
+      <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
+    </button>
+    <el-dropdown-menu slot="dropdown">
+<!--      <el-dropdown-item>
+        <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? 'Locked' : 'Unlocked'}}</div>
+      </el-dropdown-item>-->
+      <slot name="before"></slot>
+      <el-dropdown-item v-if="importUrl">
+        <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
+      </el-dropdown-item>
+      <el-dropdown-item v-if="exportUrl">
+        <div id="chart-export"@click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
+      </el-dropdown-item>
+      <slot name="after"></slot>
+<!--      <el-dropdown-item v-has="'panel_chart_add'">
+        <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
+      </el-dropdown-item>-->
+    </el-dropdown-menu>
+
+    <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
+      <div v-if="importBox.type == 1">
+        <div class="upload-body">
+          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
+            <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
+            <i class="nz-icon nz-icon-upload"></i>
+            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+              <span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
+            </button>-->
+          </el-upload>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns" style="text-align: right;">
+            <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
+              <span>{{$t('overall.template')}}</span>
+            </button>
+            <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
+              <span>{{$t('overall.importExcel')}}</span>
+            </button>
+            <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
+              <span>{{$t('overall.cancel')}}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="importBox.type == 2">
+        <div class="upload-body">
+          <button :id="id+'-xlsx-export-current'"  class="el-button el-button--default el-button--small" @click="exportCur">
+            <span>{{$t('overall.exportCur')}}</span>
+          </button>
+          <button  :id="id+'-xlsx-export-all'"  class="el-button el-button--default el-button--small" @click="exportAll">
+            <span>{{$t('overall.exportAll')}}</span>
+          </button>
+        </div>
+        <div slot="footer" class="footer">
+        </div>
+      </div>
+      <div v-if="importBox.type==3">
+        <div class="upload-body result-body">
+          <div>
+            <span class="result-title">{{$t('overall.result.total')}}:</span>
+            <span>{{importResult&&importResult.totalNum?importResult.totalNum:0}}</span>
+          </div>
+          <div>
+            <span class="result-title">{{$t('overall.result.failed')}}:</span>
+            <span>{{importResult&&importResult.failNum?importResult.failNum:0}}</span>
+            <span class="result-title">{{$t('overall.result.success')}}:</span>
+            <span>{{importResult&&importResult.successNum?importResult.successNum:0}}</span>
+          </div>
+          <div>
+            <div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
+            <div v-if="importResult&&importResult.failDetail" class="result-detail">
+              <div style="height: 100%; overflow: auto;">
+                <!-- <ul>
+                   <li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
+                 </ul>-->
+                <template v-for="(item, index) in importResult.failDetail">
+                  <div :key="index" class="import-result-block">
+                    <div class="import-result-item">
+                      <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
+                      <div>{{item.errorMsg}}</div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns">
+            <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
+              <span>{{$t('overall.rollbackImport')}}</span>
+            </button>
+            <!--<button  @click="closeDialog"  class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">-->
+            <!--<span>{{$t('overall.cancel')}}</span>-->
+            <!--</button>-->
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </el-dropdown>
+</template>
+
+<script>
+import axios from 'axios'
+let timeout
+export default {
+  name: 'topToolMoreOptions',
+  props: {
+    size: {
+      type: String,
+      default: 'small'
+    },
+    exportUrl: { type: String, default: '' },
+    params: { type: Object },
+    exportFileName: { type: String },
+    importUrl: { type: String, default: '' }, // 为空时不显示导入按钮
+    link: { type: Object }, // 为空时不显示导出按钮
+    permissions: { type: Object },
+    showCur: { type: Boolean, default: true },
+    id: { type: String, default: 'export' },
+    triggerButtonClass: { // 触发下拉事件的按钮的class
+      type: String,
+      default: 'top-tool-btn'
+    }
+  },
+  data () {
+    return {
+      importBox: { show: false, title: this.$t('overall.importExcel'), type: 1 },
+      importFile: null,
+      importFileList: [],
+      importResult: null,
+      exportShow: false,
+      paramsType: ''
+    }
+  },
+  mounted () {
+    this.getParamsType()
+  },
+  methods: {
+    importChange (file, fileList) {
+      if (fileList.length > 0) {
+        this.importFileList = [fileList[fileList.length - 1]]
+      }
+      this.importFile = this.importFileList[0]
+      this.validateFile()
+    },
+    validateFile () {
+
+    },
+    rollbackImport () {
+      let url
+      if (this.importUrl.indexOf('asset') > -1) {
+        url = '/asset/cancelImport'
+      } else if (this.importUrl.indexOf('endpoint') > -1) {
+        url = '/monitor/endpoint/cancelImport'
+      } else if (this.importUrl.indexOf('rule') > -1) {
+        url = '/alert/rule/cancelImport'
+      } else if (this.importUrl.indexOf('panel') > -1) {
+        url = '/panel/cancelImport'
+      } else if (this.importUrl.indexOf('tmpl') > -1) {
+        url = '/expression/tmpl/cancelImport'
+      }
+      this.$delete(url + '?seq=' + this.importResult.seq).then(response => {
+        if (response.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.$emit('afterImport')
+        } else {
+          this.$message.error(response.msg)
+        }
+        this.closeDialog()
+      })
+    },
+    importExcel () {
+      if (this.importFile && this.importFile.raw) {
+        this.prevent_opt.import = true
+        const form = new FormData()
+        form.append('excelFile', this.importFile.raw)
+        if (this.paramsType) {
+          form.append('type', this.paramsType)
+          if (this.paramsType === 'asset' || this.paramsType === 'model') {
+            form.append('linkId', this.link ? this.link.id : '')
+          }
+        }
+        form.append('language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+        this.$post(this.importUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
+          if (response.code == 200 && response.msg == 'success') {
+            this.importResult = response.data
+            this.$emit('afterImport')
+            this.importBox.type = 3
+            this.importBox.width = '600px'
+          } else {
+            this.$message.error(response.msg)
+          }
+          this.prevent_opt.import = false
+        })
+      } else {
+        this.$message.error(this.$t('tip.noImportFile'))
+      }
+    },
+    exportMenuHandler (show) {
+      if (show) {
+        clearTimeout(timeout)
+        this.exportShow = true
+      } else {
+        timeout = setTimeout(() => {
+          this.exportShow = false
+        }, 700)
+      }
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.importResult = null
+      this.importFileList = []
+      this.importFile = null
+    },
+    downloadTemplate () {
+      const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
+      const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.xlsx'
+
+      let url = null
+      if (this.importUrl.indexOf('asset') > -1) {
+        url = '/asset/template'
+      } else if (this.importUrl.indexOf('rule') > -1) {
+        url = '/alert/rule/template'
+      } else if (this.importUrl.indexOf('panel') > -1) {
+        url = '/panel/template'
+      } else if (this.importUrl.indexOf('endpoint') > -1) {
+        url = '/monitor/endpoint/template'
+      } else if (this.importUrl.indexOf('tmpl') > -1) {
+        url = '/expression/tmpl/template'
+      }
+
+      const param = { language: language }
+      if (!url) {
+        console.error('no interface support')
+      }
+      this.exportExcel(url, param, fileName)
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    exportCur () {
+      const params = Object.assign({}, this.params)
+      params.language = localStorage.getItem('nz-language') || 'en'
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    exportAll () {
+      const params = JSON.parse(JSON.stringify(this.params))
+      params.pageSize = -1
+      if (this.importUrl.indexOf('panel') > -1) {
+        delete params.panelId
+      }
+      // if (this.importUrl.indexOf('endpoint') > -1){
+      //   delete params.moduleId
+      // }
+      params.language = localStorage.getItem('nz-language') || 'en'
+
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    exportExcel (url, params, fileName) {
+      if (this.paramsType) {
+        params.type = this.paramsType
+      }
+      axios.get(url, { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
+    showImportBox (type) {
+      this.importBox.show = true
+      this.importBox.type = type
+      if (type == 2 && (!this.showCur)) {
+        this.exportCur()
+        return
+      }
+      if (type == 1) { // import
+        this.importBox.title = this.$t('overall.importExcel')
+        this.importBox.width = '600px'
+      } else if (type == 2) { // export
+        this.importBox.title = this.$t('overall.exportExcel')
+        this.importBox.width = '300px'
+      }
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
+    },
+    getParamsType () {
+      const path = this.$route.path
+      switch (path) {
+        case '/panel': this.paramsType = 'dashboard'; break
+        case '/asset': this.paramsType = 'asset'; break
+        case '/model': this.paramsType = 'model'; break
+        default: this.paramsType = ''; break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -13,6 +13,7 @@
         </el-dropdown-menu>
       </el-dropdown>
       <el-dropdown>
+        <el-dropdown-menu slot="dropdown"></el-dropdown-menu>
         <div id="header-open-cli" @click="cli">
           <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>

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

@@ -22,48 +22,6 @@
                   </el-input>
                 </template>
               </select-panel>
-              <!--<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" >
-                <el-row  :gutter="10" class="el-dropdown-link" style="padding-right: 5px">
-                  <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
-                  <el-col :span="3" style="padding-left:0px !important;"><i class="nz-icon nz-icon-arrow-down"></i></el-col>
-                </el-row>
-                <el-dropdown-menu class="nz-dashboard-dropdown panel-dropdown-title-space" slot="dropdown"  >
-                  &lt;!&ndash;<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>&ndash;&gt;
-                  <div ref="dashboardScrollbar" style="height: 100%; overflow: auto">
-                    <el-dropdown-item >
-                      <el-row class="panel-list-width" :gutter="10" >
-                        <el-col :span="21"><el-input :placeholder="$t('overall.search')" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable size="mini" v-model="filterPanel"></el-input></el-col>
-                        <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span></el-col>
-                      </el-row>
-                    </el-dropdown-item>
-                    <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
-                               :scroll-sensitivity="150"
-                               :options="{
-                                   group:{name:'chartGroup',pull:'false'},
-                                   dragClass:'drag-chart-class',
-                                   fallbackClass:'fallback-class',
-                                   forceFallback:true,
-                                   ghostClass:'chart-ghost',
-                                   chosenClass:'choose-class',
-                                   scroll:true,
-                                   scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                                   animation:150,
-                                   handle:'.panelContent',
-                                 }"  >
-                      <el-dropdown-item v-for="item in showPanelList" :key="item.id+1" class="panel-title-li"
-                                        :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
-                        <el-row  :gutter="10" class="panel-list-width" >
-                          <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
-                          <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
-                          <el-col :span="1"><span @click.stop="del(item)" class="panel-dropdown-btn panel-dropdown-btn-delete" v-has="'panel_delete'"><i class="nz-icon nz-icon-delete"></i></span></el-col>
-                          <el-col :span="1">&nbsp;</el-col>
-                          <el-col :span="1"><span @click.stop="edit(item)" class="panel-dropdown-btn" v-has="'panel_toEdit'"><i class="nz-icon nz-icon-edit"></i></span></el-col>
-                        </el-row>
-                      </el-dropdown-item>
-                    </draggable>
-                  </div>
-                </el-dropdown-menu>
-              </el-dropdown>-->
             </div>
             <div class="top-tool-right">
               <div class="top-tool-search margin-r-20">
@@ -73,7 +31,13 @@
               </div>
 
               <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
-              <export-excel
+
+              <button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
+                      type="button" @click="addChart">
+                <i class="nz-icon-create-square nz-icon"></i>
+              </button>
+
+              <top-tool-more-options
                 id="panel"
                 :params="filter"
                 :permissions="{
@@ -86,15 +50,17 @@
                 import-url="/visual/panel/import"
                 @afterImport="dateChange"
               >
-                <template slot="optionZone">
-                  <button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')"
-                          class="top-tool-btn" @click="addChart">
-                    <i class="nz-icon-create-square nz-icon"></i>
-                  </button>
+                <template v-slot:before>
+                  <el-dropdown-item>
+                    <div id="panel-lock" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? 'Locked' : 'Unlocked'}}</div>
+                  </el-dropdown-item>
                 </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="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>
+                <template v-slot:after>
+                  <el-dropdown-item v-has="'panel_chart_add'">
+                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
+                  </el-dropdown-item>
+                </template>
+              </top-tool-more-options>
             </div>
           </template>
         </div>
@@ -127,11 +93,11 @@ import ChartBox from './chartBox'
 import ChartList from '../../charts/chart-list'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
-import exportXLSX from '../../common/exportXLSX'
 import selectPanel from '../../common/popBox/selectPanel'
 import panelBox from '@/components/common/rightBox/panelBox'
 import chartTempBox from '@/components/common/rightBox/chartTempBox'
-
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import Template from '@/components/page/config/template'
 export default {
   name: 'panel',
   data () {
@@ -216,12 +182,13 @@ export default {
     }
   },
   components: {
+    Template,
     'chart-box': ChartBox,
     'chart-list': ChartList,
     'pick-time': pickTime,
-    'export-excel': exportXLSX,
-    selectPanel,
     'panel-box': panelBox,
+    topToolMoreOptions,
+    selectPanel,
     chartTempBox
   },
   methods: {