feat：添加chart 同步按钮以及修改时间显示不正确的问题

2021-05-20 14:07:58 +08:00
parent 0f5176cd48
commit f805795f1d
13 changed files with 125 additions and 11 deletions
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -42,7 +42,7 @@
      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">PingLastReply</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? alertLabelData.pingInfo.lastUpdate : '--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">Alert</div>
--- a/nezha-fronted/src/components/common/alert/alertLabel2.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue
@@ -42,7 +42,7 @@
      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">PingLastReply</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? alertLabelData.pingInfo.lastUpdate : '--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
      </div>
      <div class="alert-label-box">
        <div class="alert-label-title">Alert</div>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -51,10 +51,15 @@
          >
          </top-tool-more-options>
        </div>
-        <div v-else> <button  @click="panelLock=!panelLock" id="panel-lock"  :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10"
+        <div v-else-if="from === fromRoute.chartTemp"> <button  @click="panelLock=!panelLock" id="panel-lock"  :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10"
                               type="button">
          <i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>
-        </button></div>
+        </button>
+          <button  @click="chartBySync" id="chart-sync"  :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10"
+                   type="button">
+            <i class="nz-icon nz-icon-sync"></i>
+          </button>
+        </div>
      </template>
      <template v-slot>
        <div class="panel">
@@ -482,7 +487,17 @@ export default {
    },
    panelLockChange (boolean) {
      this.panelLock = boolean
+    },
+    chartBySync () {
+      this.$post('visual/panel/chart/syncTmpl', { pid: this.obj.id }).then(res => {
+        if (res.code === 200) {
+          this.getTableData()
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
        }
+      })
+    },
  },
  mounted () {
    this.scrollbarWrap = this.$refs.dashboardScrollbar
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -54,6 +54,11 @@ export default {
          this.$emit('shutdown', row)
          break
        }
+        case 'sync': {
+          // this.$emit('copy', row)
+          this.$emit('sync', row)
+          break
+        }
        default:
          break
      }
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -84,6 +84,25 @@
        </el-form-item>
        </span>

+        <!-- ChartTemplate 'visual/panel/chart' -->
+        <el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
+          <v-selectpage
+            :data="chartlList"
+            :tb-columns="ChartSearchShowFields"
+            :params="{
+              varType: 1, panelId: 0
+            }"
+            :multiple="true"
+            :language="language"
+            title="ChartSearch"
+            key-field="id"
+            v-model="editModule.chartIds"
+            show-field="name"
+            class="form-control"
+            @values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}"
+            :result-format="resultFormat"
+          ></v-selectpage>
+        </el-form-item>
        <!--Enpoint template-->
        <div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
          <el-tooltip placement="top" effect="light">
@@ -266,6 +285,7 @@ export default {
  data () {
    return {
      walkData: [],
+      chartlList: [],
      activeName: 'Basic',
      expandedWalkData: [],
      radio: 'password',
@@ -274,6 +294,13 @@ export default {
        { value: '{{module.name}}-{{asset.name}}' },
        { value: '{{module.name}}-{{asset.manageIp}}' }
      ],
+      ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
+        { title: 'ID', data: 'id' },
+        { title: this.$t('config.model.titleName'), data: 'name' },
+        { title: this.$t('config.model.titleType'), data: 'type' },
+        { title: this.$t('config.model.remark'), data: 'remark' }
+      ],
+      language: localStorage.getItem('nz-language'),
      showAllBasicOption: false,
      rules: {
        name: [
@@ -626,10 +653,25 @@ export default {
    },
    paramObjchange (val, index) {
      this.editModule.paramObj[index].value = val.filter(item => item.trim())
+    },
+    resultFormat (resp) {
+      if (resp && resp.data) {
+        const assetData = {}
+        assetData.list = resp.data.list
+        assetData.totalRow = resp.data.total
+        return assetData
+      }
+    },
+    /* 获取chart列表数据 */
+    ChartTemplateList () {
+      this.$get('visual/panel/chart', { pageSize: -1, varType: 2, panelId: 0 }).then(res => {
+        this.chartlList = res.data.list
+      })
    }
  },
  mounted () {
    this.getWalkData()
+    this.ChartTemplateList()
  },
  created () {
    this.getProjectList()
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -57,6 +57,7 @@
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-has="'panel_chart_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
            <el-dropdown-item v-has="'panel_chart_delete'" :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-item v-has="'panel_chart_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/common/table/settings/modelTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/modelTable.vue
@@ -69,6 +69,7 @@
          <el-dropdown-menu slot="dropdown">
 <!--            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
            <el-dropdown-item v-has="'model_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'panel_chart_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -72,6 +72,7 @@
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-has="'monitor_module_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
            <el-dropdown-item v-has="'monitor_module_delete'" :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'panel_chart_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -28,6 +28,7 @@
          @edit="edit"
          @orderBy="tableDataSort"
          @reload="getTableData"
+          @sync="chartBySync"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></model-table>
      </template>
@@ -87,7 +88,16 @@ export default {
    }
  },
  methods: {
-
+    chartBySync (row) {
+      this.$post('visual/panel/chart/syncTmpl', { pid: row.id }).then(res => {
+        if (res.code === 200) {
+          this.getTableData()
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
  },
  created() {

--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -52,6 +52,7 @@
          @copy="(row) => {copyRow(row, 'exprTmpl')}"
          @orderBy="tableDataSort"
          @reload="getTableData"
+          @sync="chartBySync"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></chartTmplTable>
      </template>
@@ -162,6 +163,16 @@ export default {
      this.object.panelName = this.showPanel.name
      this.rightBox.show = true
    },
+    chartBySync (row) {
+      this.$post('visual/panel/chart/syncTmpl', { pid: row.id }).then(res => {
+        if (res.code === 200) {
+          this.getTableData()
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
    getTableData (params) {
      if (params && Object.keys(params).length > 0) {
        for (const key in params) {
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -432,7 +432,7 @@ export default {
      return new Promise(resolve => {
        this.assetLoading = true
        this.$refs.assetHexagon.startLoading()
-        this.$get('asset/asset', { pageSize: -1}).then(response => {
+        this.$get('stat/alertMessage/topN', { size: 48, dimension: 'asset' }).then(response => {
          this.assetLoading = false
          this.$refs.assetHexagon.endLoading()
          if (response.code === 200) {
@@ -634,7 +634,7 @@ export default {
        endpointOption.series[0].label.formatter = data.asset.total + ''
        endpointOption.series[0].data = [
          { name: vm.$t('dashboard.overview.asset.ok'), value: data.asset.ok ? data.asset.ok : 0 },
-          { name: vm.$t('dashboard.overview.asset.alarm'), value: data.asset.alarm ? data.asset.alarm : 0 },
+          { name: vm.$t('dashboard.overview.asset.alarm'), value: data.asset.alarm ? data.asset.alarm : 0 }
          // { name: vm.$t('dashboard.overview.asset.total'), value: data.asset.total ? data.asset.total : 0 }
        ]
        endpointOption.title.text = vm.$t('asset.asset')
@@ -938,12 +938,12 @@ export default {
    queryAlertStatByModule () {
      return new Promise(resolve => {
        this.$refs.moduleHexagon.startLoading()
-        this.$get('monitor/module', { pageSize: -1 }).then(response => {
+        this.$get('stat/alertMessage/topN', { size: 48, dimension: 'module' }).then(response => {
          this.$refs.moduleHexagon.endLoading()
          if (response.code === 200) {
            const moduleData = response.data.list
            moduleData.sort((a, b) => b.alertNum - a.alertNum)
-            const alertTopModules = moduleData.slice(0,48)
+            const alertTopModules = moduleData.slice(0, 48)
            const requests = alertTopModules.map(a => axios.get(`stat/alertMessage/severity?moduleId=${a.id}`))
            const moduleStateData = []
            axios.all(requests).then(result => {
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -59,6 +59,9 @@
                  <el-dropdown-item v-has="'panel_chart_add'">
                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
                  </el-dropdown-item>
+                  <el-dropdown-item v-has="'panel_chart_edit'">
+                    <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+                  </el-dropdown-item>
                </template>
              </top-tool-more-options>
            </div>
@@ -296,6 +299,16 @@ export default {
      this.chart.panelId = this.showPanel.id
      this.rightBox.chartTemp.show = true
    },
+    chartBySync () {
+      this.$post('visual/panel/chart/syncTmpl', { panelId: this.showPanel.id }).then(res => {
+        if (res.code === 200) {
+          this.getData(this.filter)
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
    addGroupItem (groupId) {
      this.chart = this.newChart()
      this.chart.groupId = groupId
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -44,6 +44,7 @@
          @edit="edit"
          @orderBy="tableDataSort"
          @reload="getTableData"
+          @sync="chartBySync"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></module-table>
      </template>
@@ -89,6 +90,7 @@ export default {
        endpointNameTmpl: '{{module.name}}-{{asset.name}}',
        type: 'http',
        port: 9100,
+        chartIds: [],
        configs: {
          walk: [],
          snmpCredentialsId: '',
@@ -163,6 +165,9 @@ export default {
      } else {
        this.object.paramObj.push({ key: '', value: [] })
      }
+      if (!this.object.chartIds) {
+        this.object.chartIds = []
+      }
      this.rightBox.show = true
    },
    getTableData () {
@@ -190,7 +195,17 @@ export default {
          }
        }
      })
+    },
+    chartBySync (row) {
+      this.$post('visual/panel/chart/syncTmpl', { modules: row.id }).then(res => {
+        if (res.code === 200) {
+          this.getTableData()
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
        }
+      })
+    },
  },
  computed: {
  },