feat：panel chart 可以通过模板添加

2021-04-26 11:43:33 +08:00
parent f70ae799ab
commit c59dfaaf69
7 changed files with 130 additions and 33 deletions
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -278,7 +278,11 @@ const cn = {
        content: '内容',
        tooltip: 'Tooltip',
        displayChart: '图表',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart 模板',
+        selectAsset: '请选择Asset',
+        selectEndpoint: '请选择Endpoint'
      },
      chartTableColumn: {
        metric: '指标',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -288,7 +288,11 @@ const en = {
        content: 'Content',
        tooltip: 'Tooltip',
        displayChart: 'Display chart',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart template',
+        selectAsset: 'Please select the Asset',
+        selectEndpoint: 'Please select the Endpoint'
      },
      chartTableColumn: {
        metric: 'Metric', // '指标'
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -313,7 +313,7 @@
           </button>

              <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                      v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                      v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                      :class="{'nz-btn-disabled':prevent_opt.save}"
                      style="margin-right: 20px">
             {{$t('project.topology.save')}}
@@ -477,6 +477,8 @@ export default {
      penToolTipScale: 1,
      oldScale: 1,
      uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
      uploadPic: {
        name: '',
        unit: ''
@@ -1484,22 +1486,24 @@ export default {
    beforeAvatarUpload (file, fileList) {
      const this_ = this
      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-
+      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error(this_.$t('project.topology.imgFormat'))
        return false
      }
-      // if (!isLt2M) {
-      //   this.$message.error( this_.$t('project.topology.imgSize'));
-      //   return false;
-      // }
+      if (!isLt2M) {
+        this.$message.error(this_.$t('project.topology.imgSize'))
+        return false
+      }
      const isSize = new Promise(function (resolve, reject) {
-        const width = 100
-        const height = 100
+        const width = 0
+        const height = 0
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function () {
          const valid = img.width > width && img.height > height
+          this_.imgWidth = img.width
+          this_.imgHeight = img.height
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file.raw)
@@ -1545,12 +1549,15 @@ export default {
    upload () {
      const form = new FormData()
      form.append('file', this.file)
+      console.log(this.file)
      if (this.uploadPic.name) {
        form.append('name', this.uploadPic.name)
      } else {
        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
      }
      form.append('unit', this.uploadPic.unit)
+      form.append('width', this.imgWidth)
+      form.append('height', this.imgHeight)
      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
        if (res.code == 200) {
          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -1685,6 +1692,7 @@ export default {
              responseType: 'arraybuffer'
            })
            .then(res => {
+              console.log(res.data)
              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
            })
            .then(data => {
--- a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
@@ -8,18 +8,18 @@
    </div>
    <div class="right-box__container">
      <div class="container__form">
-        <el-form ref="userForm" :model="editChartTemp" :rules="editChartTemp.id ? rules2 : rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
+        <el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
          <!--type-->
-          <el-form-item :label="$t('dashboard.panel.chartForm.varType')">
-            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group">
+          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <!--chartTemp list-->
-          <el-form-item :label="$t('dashboard.panel.chartForm.varType')">
-            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group">
+          <el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
              </el-option>
@@ -27,12 +27,13 @@
          </el-form-item>

          <!-- 选择资产，穿梭框 -->
-          <div class="form__sub-title">{{$t('overall.select')}}</div>
+          <div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
          <nz-transfer ref="transfer"
                       :page-obj="transfer.pageObj"
                       :search-msg="transfer.searchMsg"
                       :table-data="transfer.tableData"
                       style="margin-bottom: 20px;"
+                       :tableTitle="transferTableTitle"
                       @leftToRight="addAsset"
                       @search="search"
                       @rightToLeft="removeAsset">
@@ -77,7 +78,10 @@ export default {
      url: 'visual/panel/chart/fromTmpl',
      rightBox: { model: { show: false } },
      rules: { // 表单校验规则
-        name: [
+        varType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        pid: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
@@ -139,7 +143,19 @@ export default {
          pages: 1,
          total: 0
        }
+      },
+      transferTableTitle: [
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        },
+        {
+          label: this.$t('asset.host'),
+          prop: 'manageIp',
+          show: true
        }
+      ]
    }
  },
  watch: {
@@ -153,7 +169,7 @@ export default {
  },
  mounted () {
    this.getChartTempData()
-    this.getAssetData()
+    this.getTableData()
  },
  methods: {
    clickOutside () {
@@ -170,9 +186,9 @@ export default {
      if (!this.transfer.selectedData.length) {
        this.prevent_opt.save = false
        if (this.editChartTemp.varType === 1) {
-          this.$message.error('请选择Asset')
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
        } else {
-          this.$message.error('请选择Endpoint')
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
        }
        return
      }
@@ -184,6 +200,7 @@ export default {
              this.prevent_opt.save = false
              if (res.code === 200) {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$emit('on-create-success')
                this.esc(true)
              } else {
                this.$message.error(res.msg)
@@ -209,7 +226,7 @@ export default {
    search (searchLabel, page) {
      this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
      this.transfer.pageObj = JSON.parse(JSON.stringify(page))
-      this.getAssetData()
+      this.getTableData()
    },
    addAsset (toAdd) {
      this.transfer.selectedData = toAdd
@@ -231,6 +248,13 @@ export default {
        }
      })
    },
+    getTableData () {
+      if (this.editChartTemp.varType === 1) {
+        this.getAssetData()
+      } else {
+        this.getEndpointData()
+      }
+    },
    getAssetData () {
      this.$refs.transfer.startLoading()
      this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
@@ -252,7 +276,38 @@ export default {
      })
    },
    varTypeChange () {
-
+      this.getChartTempData()
+      this.editChartTemp.pid = ''
+      this.transfer.selectedData = []
+      this.$refs.transfer.selectedData = []
+      if (this.editChartTemp.varType === 1) {
+        this.transferTableTitle = [
+          {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true
+          },
+          {
+            label: this.$t('asset.host'),
+            prop: 'manageIp',
+            show: true
+          }
+        ]
+      } else {
+        this.transferTableTitle = [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true
+          },
+          {
+            label: this.$t('project.endpoint.name'),
+            prop: 'name',
+            show: true
+          }
+        ]
+      }
+      this.getTableData()
    }
  }
 }
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -194,7 +194,6 @@ export default {
          str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
        }
      })
-      console.log(arr, str)
      return str
    }
  },
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -9,6 +9,7 @@
      :from="fromRoute.endpoint"
      :layout="['searchInput', 'elementSet']"
      :hasSearch="true"
+      @search="search"
      :search-msg="searchMsg">
      <template v-slot:top-tool-right>
        <export-excel
@@ -126,6 +127,26 @@ export default {
          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
        }]
      },
      roles: [],
@@ -222,17 +243,23 @@ export default {
    getTableData () {
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      const params = {
+        ...this.searchLabel,
+        ...this.searchCheckBox
+      }
      if (this.searchLabel.projectIds) {
        localStorage.setItem('endpointProjectId', this.searchLabel.projectIds)
+        if (params.projectIds) {
+          params.projectIds += ',' + this.searchLabel.projectIds
+        } else {
+          params.projectIds = this.searchLabel.projectIds
+        }
      } else {
        localStorage.removeItem('endpointProjectId')
      }
-      const params = {
-        ...this.searchLabel,
-        ...this.titleSearch
-      }
+      console.log()
      this.tools.loading = true
-      this.$get(this.url, { ...params, ...this.searchCheckBox }).then(response => {
+      this.$get(this.url, params).then(response => {
        this.tools.loading = false
        if (response.code === 200) {
          for (let i = 0; i < response.data.list.length; i++) {
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -28,7 +28,7 @@ export function get (url, params) {
    axios.get(url, {
      params: params
    }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
    }).catch(err => {
      if (err.response) {
        resolve(err.response.data)
@@ -42,7 +42,7 @@ export function get (url, params) {
 export function post (url, params, headers) {
  return new Promise(resolve => {
    axios.post(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
    }).catch(err => {
      if (err.response) {
        resolve(err.response.data)
@@ -56,7 +56,7 @@ export function post (url, params, headers) {
 export function put (url, params, headers) {
  return new Promise((resolve) => {
    axios.put(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
    }).catch(err => {
      if (err.response) {
        resolve(err.response.data)
@@ -70,7 +70,7 @@ export function put (url, params, headers) {
 export function del (url, params) {
  return new Promise((resolve) => {
    axios.delete(url, params).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
    }).catch(err => {
      if (err.response) {
        resolve(err.response.data)