NEZ-600 fix: 各页面搜索框功能

2021-05-10 15:59:39 +08:00
parent aa9f9f38f1
commit 5c3b058907
26 changed files with 556 additions and 755 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -11,6 +11,11 @@
      class="full-width-height"
    >
      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot:top-tool-right>
+        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData">
+          <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </template>
      <template v-slot>
        <alertMessageTable
          ref="dataTable"
@@ -43,7 +48,7 @@ import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import axios from 'axios'
 import bus from '@/libs/bus'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
-import { fromRoute } from '@/components/common/js/constants'
+import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 // import {getTime} from "@/components/common/js/tools";
 // import chartDataFormat from "@/components/charts/chartDataFormat";

@@ -69,67 +74,46 @@ export default {
  },
  data () {
    return {
+      stateOptions: alertMessageConstant.states,
      url: 'alert/message',
      tableId: 'alertMessageModule', // 需要分页的table的id，用于记录每页数量
+      state: '1',
      searchMsg: { // 给搜索框子组件传递的信息
-        zheze_none: true,
-        searchLabelList: [{
-          id: 2,
-          name: this.$t('alert.alertName'),
-          type: 'input',
-          label: 'alertName',
-          disabled: false
-        }, {
-          id: 20,
-          name: this.$t('project.project.project'),
-          type: 'project',
-          label: 'project',
-          disabled: false
-        }, {
-          id: 21,
-          name: this.$t('project.module.module'),
-          type: 'module',
-          label: 'module',
-          disabled: false
-        }, {
-          id: 22,
-          name: this.$t('project.endpoint.endpoint'),
-          type: 'input',
-          label: 'endpointId',
-          disabled: false
-        }, {
-          id: 4,
-          name: this.$t('alert.severity'),
-          type: 'selectString',
-          label: 'severity',
-          disabled: false
-        }, {
-          id: 11,
-          name: this.$t('asset.asset'),
-          type: 'asset',
-          label: 'asset',
-          disabled: false
-        }, {
-          id: 12,
-          name: this.$t('alert.list.state'),
-          type: 'select',
-          label: 'alertMessageState',
-          disabled: false
-        },
-        {
-          id: 26,
-          name: this.$t('alert.list.id'),
-          type: 'id',
-          label: 'id',
-          disabled: false
-        }, {
-          id: 27,
-          name: this.$t('config.dc.dc'),
-          type: 'idc',
-          label: 'idcId',
-          disabled: false,
-          readonly: true
-        }]
+        searchLabelList: [
+          {
+            id: 26,
+            name: this.$t('alert.list.id'),
+            type: 'id',
+            label: 'id',
+            disabled: false
+          },
+          {
+            name: this.$t('alert.alertRule'),
+            type: 'input',
+            label: 'ruleName',
+            disabled: false
+          }, {
+            name: this.$t('asset.asset'),
+            type: 'input',
+            label: 'assetName',
+            disabled: false
+          }, {
+            name: 'Endpoint',
+            type: 'input',
+            label: 'endpointName',
+            disabled: false
+          }, {
+            name: this.$t('alert.summary'),
+            type: 'input',
+            label: 'summary',
+            disabled: false
+          }, {
+            name: 'Labels',
+            type: 'input',
+            label: 'labels',
+            disabled: false
+          }
+        ]
      },
      rightBox: {
        editShow: false,
@@ -282,7 +266,10 @@ export default {
        })
      }
    },
-    getTableData () {
+    getTableData (state) {
+      if (state) {
+        this.state = state
+      }
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      if (this.searchTime && this.searchTime.length > 1) {
@@ -293,6 +280,10 @@ export default {
        delete this.searchLabel.endAt
      }
      this.tools.loading = true
+      if (state) {
+        delete this.searchLabel.startAt
+        delete this.searchLabel.endAt
+      }
      if (this.from === fromRoute.module) {
        this.searchLabel.moduleIds = this.obj.id
      } else if (this.from === fromRoute.endpoint) {
@@ -302,9 +293,7 @@ export default {
      } else if (this.from === fromRoute.alertRule) {
        this.searchLabel.ruleIds = this.obj.id
      }
-      // state 暂时默认1
-      this.searchLabel.state = 1
-      this.$get(this.url, this.searchLabel).then(response => {
+      this.$get(this.url + '?state=' + this.state, this.searchLabel).then(response => {
        this.tools.loading = false
        if (response.code === 200) {
          this.nowTime = this.utcTimeToTimezoneStr(response.time)
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -155,7 +155,7 @@ export const alertMessage = {
    { value: 'P3', label: i18n.t('alert.config.P3') }
  ],
  states: [
-    { value: '1', label: i18n.t('alert.list.pending') },
+    { value: '1', label: i18n.t('overall.active') },
    { value: '2', label: i18n.t('overall.silence') },
    { value: '3', label: i18n.t('alert.list.expired') }
  ]
@@ -172,6 +172,55 @@ export const statisticsList = [
  { value: 'different', label: i18n.t('dashboard.panel.chartForm.statisticsVal.different') }
 ]

+export const chart = {
+  varType: [
+    { value: '1', label: i18n.t('asset.asset') },
+    { value: '2', label: i18n.t('asset.endpoint') }
+  ],
+  type: [
+    {
+      value: 'line',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.line.label')
+    },
+    {
+      value: 'stackArea',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.stackArea.label')
+    },
+    {
+      value: 'bar',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.bar.label')
+    },
+    {
+      value: 'singleStat',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.singleStat.label')
+    },
+    {
+      value: 'pie',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.pie.label')
+    },
+    {
+      value: 'table',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.table.label')
+    },
+    {
+      value: 'alertList',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.alertList.label')
+    },
+    {
+      value: 'text',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.text.label')
+    },
+    {
+      value: 'url',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.url.label')
+    },
+    {
+      value: 'group',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.group.label')
+    }
+  ]
+}
+
 export const intervalList = [
  { value: -1, label: i18n.t('dashboard.panel.refreshInterval.never') },
  { value: 30, label: '30s' },
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -84,7 +84,7 @@ const en = {
    clickUpload: 'Click to upload',
    upload: 'upload',
    template: 'Template',
-    active: 'active',
+    active: 'Active',
    result: {
      total: 'Total',
      failed: 'Failed',
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -49,7 +49,7 @@
                                <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                              </ul>
                            </div>
-                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectString'">
+                            <div v-if="val.type === 'selectString'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">
                              <el-scrollbar v-if="selectInfoList[val.label].length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
@@ -89,7 +89,37 @@
                                <li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
                              </ul>
                            </div>
-                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'project'">
+                            <div v-if="val.type === 'assetState'" :style="'top:' + selectDom.top +'; left:'+selectDom.left" class="select_info_list">
+                              <el-scrollbar v-if="assetStateSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
+                                <ul>
+                                    <li v-for="(item,key) in assetStateSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                                </ul>
+                              </el-scrollbar>
+                              <ul v-else>
+                                <li v-for="(item,key) in assetStateSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                              </ul>
+                            </div>
+                            <div v-if="val.type === 'brand'" :style="'top:' + selectDom.top +'; left:'+selectDom.left" class="select_info_list">
+                              <el-scrollbar v-if="brandSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
+                                <ul>
+                                    <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                                </ul>
+                              </el-scrollbar>
+                              <ul v-else>
+                                <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                              </ul>
+                            </div>
+                            <div v-if="val.type === 'group'" :style="'top:' + selectDom.top +'; left:'+selectDom.left" class="select_info_list">
+                              <el-scrollbar v-if="groupSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
+                                <ul>
+                                    <li v-for="(item,key) in groupSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                                </ul>
+                              </el-scrollbar>
+                              <ul v-else>
+                                <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                              </ul>
+                            </div>
+                            <div v-if="val.type === 'project'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">
                              <el-scrollbar v-if="projectSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
@@ -99,6 +129,16 @@
                                <li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                              </ul>
                            </div>
+                            <div v-if="val.type === 'severity'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">
+                              <el-scrollbar v-if="severitySelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
+                                <ul>
+                                    <li v-for="(item,key) in severitySelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                                </ul>
+                              </el-scrollbar>
+                              <ul v-else>
+                                <li v-for="(item,key) in severitySelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                              </ul>
+                            </div>
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'module'">
                              <el-scrollbar v-if="moduleSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
@@ -222,7 +262,11 @@ export default {
      actionSelect: [],
      dcSelect: [], // 数据中心
      assetSelect: [], // 资产
+      assetStateSelect: [],
+      brandSelect: [],
+      groupSelect: [],
      projectSelect: [],
+      severitySelect: [],
      moduleSelect: [],
      modelSelect: [],
      gnameList: [],
@@ -444,6 +488,22 @@ export default {
          val.val = selectItem.host
          val.valnum = selectItem.id
          val.valString = ''
+        } else if (val.type == 'assetState' && selectItem.searchType == 'assetState') {
+          val.val = selectItem.name
+          val.valnum = selectItem.id
+          val.valString = ''
+        } else if (val.type === 'brand' && selectItem.searchType === 'brand') {
+          val.val = selectItem.name
+          val.valnum = selectItem.id
+          val.valString = ''
+        } else if (val.type === 'group' && selectItem.searchType === 'group') {
+          val.val = selectItem.name
+          val.valnum = selectItem.id
+          val.valString = ''
+        } else if (val.type === 'severity' && selectItem.searchType === 'severity') {
+          val.val = selectItem.name
+          val.valnum = selectItem.id
+          val.valString = ''
        }
      }
      // this.select_list.push({type: 'dc', val: selectItem.name, valnum: selectItem.id});
@@ -520,6 +580,36 @@ export default {
        }
      })
    },
+    getAssetStateData () {
+      this.$get('asset/stateConf', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.assetStateSelect = response.data.list
+          this.assetStateSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'assetState')
+          })
+        }
+      })
+    },
+    getBrandData () {
+      this.$get('asset/brand', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.brandSelect = response.data.list
+          this.brandSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'brand')
+          })
+        }
+      })
+    },
+    getGroupData () {
+      this.$get('asset/field/group', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.groupSelect = response.data.list
+          this.groupSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'group')
+          })
+        }
+      })
+    },
    getModelData () {
      this.$get('model', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
@@ -531,7 +621,7 @@ export default {
      })
    },
    getProjectData () {
-      this.$get('project', { pageNo: 1, pageSize: -1 }).then(response => {
+      this.$get('monitor/project', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.projectSelect = response.data.list
          this.projectSelect.forEach((item, index) => {
@@ -540,6 +630,16 @@ export default {
        }
      })
    },
+    getSeverityData () {
+      this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.severitySelect = response.data.list
+          this.severitySelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'severity')
+          })
+        }
+      })
+    },
    getModuleData () {
      this.$get('module', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
@@ -593,7 +693,7 @@ export default {
    stringSelectInfo (column, selectItem, e) {
      this.stop_click(e)
      this.select_list.forEach(val => {
-        if (val.label == column.label) {
+        if (val.label === column.label) {
          val.val = selectItem.value
          val.valString = selectItem.label
        }
@@ -759,20 +859,34 @@ export default {
          } else if (val.type == 'selectAction') { // 新增日志判断
            objectInfo[val.label] = val.valnum
          } else if (val.type == 'dc') {
-            objectInfo.idcId = val.valnum
+            objectInfo.dcIds = val.valnum
          } else if (val.type == 'asset') {
            objectInfo.asset = val.val
          } else if (val.type == 'module') {
            objectInfo.moduleId = val.valnum
-          } else if (val.type == 'project') {
-            objectInfo.projectId = val.valnum
-          } else if (val.type == 'idc') {
-            objectInfo.dcId = val.valnum
+          } else if (val.type === 'project') {
+            objectInfo.projectIds = val.valnum
+          } else if (val.type === 'assetState') {
+            objectInfo.stateIds = val.valnum
+          } else if (val.type === 'brand') {
+            objectInfo.brandIds = val.valnum
+          } else if (val.type === 'group') {
+            objectInfo.groupIds = val.valnum
+          } else if (val.type === 'selectString') {
+            if (val.label === 'dcState') {
+              objectInfo.state = val.val
+            } else if (val.label === 'promType') {
+              objectInfo.type = val.val
+            } else if (val.label === 'promState') {
+              objectInfo.status = val.val
+            } else if (val.label === 'chartType') {
+              objectInfo.type = val.val
+            }
          } else {
            objectInfo[val.label] = val.val
          }
        }
-        // console.log('search obj', objectInfo)
+        console.log('search obj', objectInfo)
      })
      this.getHeight()
      // 搜索完成后存储在本地历史记录中
@@ -1326,23 +1440,25 @@ export default {
            this.defaultValue != '' ? this.no_condition=this.defaultValue:''; */
    this.restructure_historyDate()
    setTimeout(() => {
-      if (this.$route.path == '/Objects_Objects') {
-        this.schelistget()
+      if (this.$route.path === '/asset') {
+        this.getAssetStateData()
      }
-      if (this.$route.path == '/agent') {
+      if (this.$route.path === '/agent') {
        this.getDcData()
      }
-      if (this.$route.path == '/monitor/project' || this.$route.path == '/alertMessage' || this.$route.path == '/alertRule') {
-        this.getAssetData()
+      if (this.$route.path === '/model') {
+        this.getBrandData()
      }
-      if (this.$route.path == '/alertMessage') {
+      if (this.$route.path === '/assetLabel') {
+        this.getGroupData()
+      }
+      if (this.$route.path === '/monitor/module') {
        this.getProjectData()
-        this.getModuleData()
      }
-      if (this.$route.path == '/asset') {
-        this.getModelData()
+      if (this.$route.path === '/alertRule') {
+        this.getSeverityData()
      }
-      if (this.$route.path == '/exprTemp') {
+      if (this.$route.path === '/exprTemp') {
        this.getGnameList()
      }
    }, 1000)
--- a/nezha-fronted/src/components/common/searchSelectInfo.vue
+++ b/nezha-fronted/src/components/common/searchSelectInfo.vue
@@ -51,7 +51,7 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用
      label: i18n.t('asset.suspended')
    }
  ],
-  endpointState: [ // 资产入库/出库状态
+  endpointState: [
    {
      value: 1,
      label: 'UP'
@@ -63,6 +63,15 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用
      label: 'SUSPENDED'
    }
  ],
+  promState: [
+    {
+      value: 1,
+      label: 'UP'
+    }, {
+      value: 0,
+      label: 'DOWN'
+    }
+  ],
  pingStatus: [
    {
      value: '0',
@@ -73,6 +82,15 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用
      label: i18n.t('asset.pingActive')
    }
  ],
+  credentialType: [
+    {
+      value: 2,
+      label: 'V2'
+    }, {
+      value: 3,
+      label: 'V3'
+    }
+  ],
  operation: [
    {
      value: 'add',
@@ -110,7 +128,6 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用
      value: 'logout',
      label: i18n.t('config.operationlog.operations.logout')
    }
-
  ],
  alertMessageState: [
    {
@@ -142,6 +159,62 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用
      label: i18n.t('overall.result.failed')
    }
  ],
+  dcState: [
+    {
+      value: 'enable',
+      label: 'Enable'
+    },
+    {
+      value: 'disable',
+      label: 'Disable'
+    }
+  ],
+  varType: [
+    { value: '1', label: i18n.t('asset.asset') },
+    { value: '2', label: i18n.t('asset.endpoint') }
+  ],
+  chartType: [
+    {
+      value: 'line',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.line.label')
+    },
+    {
+      value: 'stackArea',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.stackArea.label')
+    },
+    {
+      value: 'bar',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.bar.label')
+    },
+    {
+      value: 'singleStat',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.singleStat.label')
+    },
+    {
+      value: 'pie',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.pie.label')
+    },
+    {
+      value: 'table',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.table.label')
+    },
+    {
+      value: 'alertList',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.alertList.label')
+    },
+    {
+      value: 'text',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.text.label')
+    },
+    {
+      value: 'url',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.url.label')
+    },
+    {
+      value: 'group',
+      label: i18n.t('dashboard.panel.chartForm.typeVal.group.label')
+    }
+  ],
  terminalStatus: [
    {
      value: 0,
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -106,9 +106,15 @@
        fixed="right">
        <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
        <div slot-scope="scope" class="table-operation-items">
-          <button class="table-operation-item" @click="showBottomBox('detail',scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-          <!-- <button class="table-operation-item" @click="detail(scope.row)"><i class="nz-icon nz-icon-view1"></i></button> -->
-          <button class="table-operation-item" @click="toDeleteMessage(scope.row)"><i class="nz-icon nz-icon-delete"></i></button>
+          <button class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+            <div class="table-operation-item table-operation-item--more">
+              <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
        </div>
      </el-table-column>
    </el-table>
@@ -159,7 +165,7 @@ export default {
          width: 80,
          sortable: 'custom'
        }, {
-          label: this.$t('alert.alertName'),
+          label: this.$t('alert.rule'),
          prop: 'alertRule',
          show: true,
          width: 180,
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -11,7 +11,7 @@
          </div>
          <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
            <div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
-              <search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
+              <search-input ref="searchInput" :from="from" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
            </div>
            <slot name="top-tool-right"></slot>
            <button v-if="showLayout.indexOf('elementSet') > -1"  class="top-tool-btn table-column-setting"
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -37,7 +37,7 @@
        <span v-if="item.prop==='varType'">{{scope.row[item.prop]===1?'Asset':'endpoint'}}</span>
        <span v-else-if="item.prop==='type'">
          <i :class="typeIcon(scope.row)"/>
-        {{chartTypeList.find(title=>title.id == scope.row[item.prop]).name}}
+        {{chartTypeList.find(title=>title.value === scope.row[item.prop]).label}}
        </span>
        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
        <template v-else>-</template>
@@ -66,11 +66,13 @@

 <script>
 import table from '@/components/common/mixin/table'
+import { chart as chartConstant } from '@/components/common/js/constants'
 export default {
  name: 'roleTable',
  mixins: [table],
  data () {
    return {
+      chartTypeList: chartConstant.type,
      tableTitle: [
        {
          label: 'ID',
@@ -99,49 +101,6 @@ export default {
          show: true
        }
      ],
-      chartTypeList: [
-        {
-          id: 'line',
-          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
-        },
-        {
-          id: 'stackArea',
-          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
-        },
-        {
-          id: 'bar',
-          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
-        },
-        {
-          id: 'singleStat',
-          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
-        },
-        {
-          id: 'pie',
-          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
-        },
-        {
-          id: 'table',
-          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
-        },
-        {
-          id: 'alertList',
-          name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
-        },
-        {
-          id: 'text',
-          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
-        },
-        {
-          id: 'url',
-          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
-        },
-        {
-          id: 'group',
-          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
-        }
-
-      ]
    }
  },
  methods: {