From 53704149a7089a1d9d94746147ce14b957a5139e Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Thu, 2 Mar 2023 09:42:41 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2596=20feat=EF=BC=9ANZ-TALON=20=E9=9B=86?=
 =?UTF-8?q?=E6=88=90=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/integration/integration.scss         |  99 ++++++++-
 .../chart/chart/options/chartTimeSeries.js    |   7 +-
 .../src/components/chart/chartMixin.js        |  16 +-
 .../src/components/page/config/agent.vue      |   2 +-
 .../integration-tabs/automatic.vue            |  80 +++++++
 .../integration-tabs/configuration.vue        |  10 +-
 .../integration-tabs/integration-tabs.vue     |  43 +++-
 .../integration/integration-tabs/manual.vue   | 203 ++++++++++++++++++
 .../page/integration/integration.vue          |  27 ++-
 9 files changed, 451 insertions(+), 36 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/integration/integration-tabs/automatic.vue
 create mode 100644 nezha-fronted/src/components/page/integration/integration-tabs/manual.vue

diff --git a/nezha-fronted/src/assets/css/components/page/integration/integration.scss b/nezha-fronted/src/assets/css/components/page/integration/integration.scss
index 0ad7b6d1f..05eb36388 100644
--- a/nezha-fronted/src/assets/css/components/page/integration/integration.scss
+++ b/nezha-fronted/src/assets/css/components/page/integration/integration.scss
@@ -250,7 +250,6 @@
       }
       .integration-configuration-pre{
         width: 100%;
-        // max-height: 295px;
         overflow-y: auto;
         box-sizing: border-box;
         padding: 14px;
@@ -261,7 +260,6 @@
         overflow-wrap: break-word;
         word-break: break-word;
         white-space: pre-wrap;
-        margin-top: 6px;
       }
     }
 
@@ -327,4 +325,101 @@
       }
     }
   }
+}
+
+.integration-dialog.integration-dialog-internal{
+  .integration-tabs-nav{
+    .integration-tabs-nav-item{
+      width: 168px;
+    }
+  }
+  .integration-manual,.integration-automatic{
+    padding: 30px;
+    padding-top: 15px;
+    padding-right: 10px;
+    margin-right: 20px;
+    box-sizing: border-box;
+    height: 100%;
+    overflow-y: auto;
+    .integration-install{
+      font-size: 16px;
+      color: $--color-text-primary;
+      font-weight: 600;
+    }
+    .install-step{
+      padding-top: 15px;
+      width: 100%;
+      display: flex;
+      .step-num{
+        width: 20px;
+        height: 20px;
+        box-sizing: border-box;
+        border: 1px solid $--border-color-light;
+        border-radius: 2px;
+        font-size: 12px;
+        text-align: center;
+        line-height: 20px;
+        color: $--color-text-primary;
+        margin-right: 12px;
+      }
+      .step-right{
+        flex: 1;
+        h4{
+          font-size: 14px;
+          line-height: 20px;
+          margin-bottom: 12px;
+          color: $--color-text-regular;
+          font-weight: normal;
+        }
+        p{
+          font-size: 14px;
+          line-height: 20px;
+          margin-bottom: 8px;
+          color: $--color-text-regular;
+          display: flex;
+          align-items: center;
+          &>.dot{
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: $--color-text-primary;
+            margin-right: 6px;
+          }
+        }
+        .talon-select{
+          color: $--color-text-regular;
+          display: flex;
+          align-items: center;
+          &>span{
+            margin-right: 8px;
+          }
+          .el-select{
+            width: 220px;
+          }
+          .nz-btn{
+            margin-left: 18px;
+          }
+        }
+        .command-box{
+          // width: 800px;
+          width: 100%;
+          line-height: 32px;
+          .el-input__inner{
+            color: $--color-text-primary;
+            border-color: $--border-color-light;
+            cursor: text;
+          }
+          .el-input__suffix{
+            .el-input__suffix-inner{
+              cursor: pointer;
+              i{
+                color: $--color-text-regular;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
index 32b25ee29..7ef74150a 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -140,9 +140,9 @@ export const chartTimeSeriesLineOption = {
     type: 'line',
     symbol: 'emptyCircle', // 去掉点
     connectNulls: true,
-    symbolSize: [0, 0],
+    symbolSize: [2, 2],
     smooth: 0.2, // 曲线变平滑
-    // showSymbol: false,
+    showSymbol: false,
     data: [],
     lineStyle: {
       width: 1,
@@ -163,6 +163,7 @@ export const chartTimeSeriesScatterOption = {
   series: [{
     name: '',
     type: 'scatter',
-    data: []
+    data: [],
+    z: 9
   }]
 }
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index b1b075cd6..e1246c0be 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -92,21 +92,13 @@ export default {
           if (s.yAxisIndex == 1) {
             const style = chartInfo.param.rightYAxis.style
             if (style == 'line') {
-              s = {
-                ...chartTimeSeriesLineOption.series[0],
-                yAxisIndex: s.yAxisIndex
-              }
+              s = lodash.cloneDeep(chartTimeSeriesLineOption.series[0])
             } else if (style == 'area') {
-              s = {
-                ...chartTimeSeriesAreaOption.series[0],
-                yAxisIndex: s.yAxisIndex
-              }
+              s = lodash.cloneDeep(chartTimeSeriesAreaOption.series[0])
             } else if (style == 'point') {
-              s = {
-                ...chartTimeSeriesScatterOption.series[0],
-                yAxisIndex: s.yAxisIndex
-              }
+              s = lodash.cloneDeep(chartTimeSeriesScatterOption.series[0])
             }
+            s.yAxisIndex = 1
           }
 
           if (s.param && s.param.nullType) {
diff --git a/nezha-fronted/src/components/page/config/agent.vue b/nezha-fronted/src/components/page/config/agent.vue
index 9065d8539..7c0f66130 100644
--- a/nezha-fronted/src/components/page/config/agent.vue
+++ b/nezha-fronted/src/components/page/config/agent.vue
@@ -232,7 +232,7 @@ export default {
     },
     copyUrl (txt) {
       this.$copyText(txt).then(() => {
-        this.$message.success({ message: this.$t('overall.copySuccess'), customClass: 'message-zindex' })
+        this.$message.success({ message: this.$t('overall.copySuccess') })
       })
     },
     // copyUrl (id) {
diff --git a/nezha-fronted/src/components/page/integration/integration-tabs/automatic.vue b/nezha-fronted/src/components/page/integration/integration-tabs/automatic.vue
new file mode 100644
index 000000000..b6bcb5418
--- /dev/null
+++ b/nezha-fronted/src/components/page/integration/integration-tabs/automatic.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="integration-automatic">
+    <!-- New installation -->
+    <h3 class="integration-install">{{$t('integration.newUpgrade')}}</h3>
+    <div class="install-step">
+      <div class="step-num">1</div>
+      <div class="step-right">
+        <h4>{{$t('integration.selectAsset')}}</h4>
+        <div class="talon-select">
+          <span>{{$t('asset.asset')}}</span>
+          <el-select v-model="assetId" class="right-box-row-with-btn" popper-class="right-box-select-top right-public-box-dropdown-top" placeholder="" :popper-append-to-body="false" size="small">
+            <el-option v-for="item in assetList" :key="item.name" :label="item.name" :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <div class="install-step" v-if="loadFinish">
+      <div class="step-num">2</div>
+      <div class="step-right">
+        <h4>{{$t('integration.loginAsset')}}</h4>
+        <div class="command-box">
+          <el-input :disabled="true" :value="curlUrl" size="small">
+            <i slot="suffix" class="nz-icon nz-icon-override" @click="copyUrl(curlUrl)" :title="$t('overall.copyText')"></i>
+          </el-input>
+        </div>
+        <h4 style="margin-top:15px">{{$t('integration.autoRemark')}}</h4>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'integration-automatic',
+  data () {
+    return {
+      loadFinish: false,
+      assetId: '',
+      assetList: []
+    }
+  },
+  created () {
+    this.getAssetList()
+    this.token = localStorage.getItem('nz-token')
+    axios.get('/healthy').then(response => {
+      const url = response.request.responseURL
+      this.ipAddr = url.split('/healthy')[0]
+    })
+  },
+  computed: {
+    curlUrl () {
+      return 'curl -o- -k -H "Authorization:' + this.token + '" ' + this.ipAddr + '/asset/talon/' + this.assetId + '/install.sh | sudo -E bash'
+    }
+  },
+  methods: {
+    getAssetList () {
+      const params = {
+        pageSize: -1
+      }
+      this.$get('asset/asset', params).then(response => {
+        if (response.code === 200) {
+          this.assetList = response.data.list
+          if (this.assetList && this.assetList.length > 0) {
+            this.assetId = this.assetList[0].id
+            this.loadFinish = true
+          }
+        }
+      })
+    },
+    copyUrl (txt) {
+      this.$copyText(txt).then(() => {
+        this.$message.success({ message: this.$t('overall.copySuccess') })
+      })
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/integration/integration-tabs/configuration.vue b/nezha-fronted/src/components/page/integration/integration-tabs/configuration.vue
index 66124a921..333543390 100644
--- a/nezha-fronted/src/components/page/integration/integration-tabs/configuration.vue
+++ b/nezha-fronted/src/components/page/integration/integration-tabs/configuration.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="integration-configuration">
-    <pre class="integration-configuration-pre">{{configuration}}</pre>
+    <div class="integration-configuration-pre" v-html="converterData()"></div>
   </div>
 </template>
 
 <script>
+import showdown from 'showdown'
 export default {
   name: 'integration-configuration',
   props: {
@@ -15,8 +16,11 @@ export default {
     }
   },
   methods: {
-  },
-  watch: {
+    // 给页面插入markdown数据
+    converterData () {
+      const converter = new showdown.Converter()
+      return converter.makeHtml(this.configuration)
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/integration/integration-tabs/integration-tabs.vue b/nezha-fronted/src/components/page/integration/integration-tabs/integration-tabs.vue
index 60ef4395e..8452553f0 100644
--- a/nezha-fronted/src/components/page/integration/integration-tabs/integration-tabs.vue
+++ b/nezha-fronted/src/components/page/integration/integration-tabs/integration-tabs.vue
@@ -4,6 +4,10 @@
       <li class="integration-tabs-nav-item" :class="{active:tabId===item.id}"  v-for="item in tabs" :key="item.id" @click="tabChange(item.id)">{{item.name}}</li>
     </ul>
     <div class="integration-tabs-content">
+      <!-- internal -->
+      <manual v-if="tabId==='manual'"></manual>
+      <automatic v-if="tabId==='automatic'"></automatic>
+      <!-- module -->
       <configuration v-if="tabId==='configuration'" :configuration="detailsObj.configuration"></configuration>
       <dashboard v-if="tabId==='dashboard'" :dashboardTemplate="detailsObj.dashboardTemplate"></dashboard>
       <alert v-if="tabId==='alert'" :moduleId="detailsObj.id"></alert>
@@ -13,6 +17,8 @@
 </template>
 
 <script>
+import manual from './manual.vue'
+import automatic from './automatic.vue'
 import configuration from './configuration.vue'
 import dashboard from './dashboard.vue'
 import alert from './alert.vue'
@@ -20,9 +26,12 @@ import metric from './metric.vue'
 export default {
   name: 'integration-tabs',
   props: {
-    detailsObj: Object
+    detailsObj: Object,
+    type: String
   },
   components: {
+    manual,
+    automatic,
     configuration,
     dashboard,
     alert,
@@ -30,14 +39,8 @@ export default {
   },
   data () {
     return {
-      tabs:
-      [
-        { id: 'configuration', name: this.$t('project.module.configs') },
-        { id: 'dashboard', name: this.$t('overall.dashboard') },
-        { id: 'alert', name: this.$t('overall.alert') },
-        { id: 'metric', name: this.$t('overall.metric') }
-      ],
-      tabId: 'configuration'
+      tabs: [],
+      tabId: ''
     }
   },
   methods: {
@@ -45,6 +48,28 @@ export default {
       if (this.tabId === id) { return }
       this.tabId = id
     }
+  },
+  watch: {
+    type: {
+      immediate: true,
+      handler (val) {
+        if (val === 'internal') {
+          this.tabId = 'manual'
+          this.tabs = [
+            { id: 'manual', name: this.$t('integration.manualInstallation') },
+            { id: 'automatic', name: this.$t('integration.automaticInstallation') }
+          ]
+        } else if (val === 'module') {
+          this.tabId = 'configuration'
+          this.tabs = [
+            { id: 'configuration', name: this.$t('project.module.configs') },
+            { id: 'dashboard', name: this.$t('overall.dashboard') },
+            { id: 'alert', name: this.$t('overall.alert') },
+            { id: 'metric', name: this.$t('overall.metric') }
+          ]
+        }
+      }
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/integration/integration-tabs/manual.vue b/nezha-fronted/src/components/page/integration/integration-tabs/manual.vue
new file mode 100644
index 000000000..a4548b759
--- /dev/null
+++ b/nezha-fronted/src/components/page/integration/integration-tabs/manual.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="integration-manual">
+    <!-- New installation -->
+    <h3 class="integration-install">{{$t('integration.newInstallation')}}</h3>
+    <div class="install-step">
+      <div class="step-num">1</div>
+      <div class="step-right">
+        <h4>{{$t('integration.downloadTalon')}}</h4>
+        <div class="talon-select">
+          <span>{{$t('config.agent.agent.osType')}}</span>
+          <el-select v-model="newDownType" class="right-box-row-with-btn" popper-class="right-box-select-top right-public-box-dropdown-top" placeholder="" :popper-append-to-body="false" size="small">
+            <el-option v-for="item in osTypes" :key="item.name" :label="item.label" :value="item.name">
+              <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+            </el-option>
+          </el-select>
+          <button :class="{'nz-btn-disabled':newDownloadFlag}" :disabled="newDownloadFlag" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="newDownload">{{$t('overall.download')}}</button>
+        </div>
+      </div>
+    </div>
+    <div class="install-step">
+      <div class="step-num">2</div>
+      <div class="step-right">
+        <h4>{{$t('integration.uploadTalon')}}</h4>
+        <div class="command-box">
+          <el-input :disabled="true" :value="uploadCommand" size="small">
+            <i slot="suffix" class="nz-icon nz-icon-override" @click="copyUrl(uploadCommand)" :title="$t('overall.copyText')"></i>
+          </el-input>
+        </div>
+        <h4 style="margin-top:15px">{{$t('integration.installed')}}</h4>
+        <div class="command-box">
+          <el-input :disabled="true" :value="tokenCommand" size="small">
+            <i slot="suffix" class="nz-icon nz-icon-override" @click="copyUrl(tokenCommand)" :title="$t('overall.copyText')"></i>
+          </el-input>
+        </div>
+      </div>
+    </div>
+    <div class="install-step">
+      <div class="step-num">3</div>
+      <div class="step-right">
+        <h4>{{$t('integration.editAsset')}}</h4>
+        <p>
+          <i class="dot"></i>
+          <span>{{$t('integration.enableTalon')}}</span>
+        </p>
+        <p>
+          <i class="dot"></i>
+          <span>{{$t('integration.enterToken')}}</span>
+        </p>
+        <p>
+          <i class="dot"></i>
+          <span>{{$t('integration.enterPort')}}</span>
+        </p>
+      </div>
+    </div>
+
+    <!-- Upgrade installation -->
+    <h3 class="integration-install" style="margin-top:3px;">{{$t('integration.upgradeInstallation')}}</h3>
+    <div class="install-step">
+      <div class="step-num">1</div>
+      <div class="step-right">
+        <h4>{{$t('integration.downloadTalon')}}</h4>
+        <div class="talon-select">
+          <span>{{$t('config.agent.agent.osType')}}</span>
+          <el-select v-model="upDownType" class="right-box-row-with-btn" popper-class="right-box-select-top right-public-box-dropdown-top" placeholder="" :popper-append-to-body="false" size="small">
+            <el-option v-for="item in osTypes" :key="item.name" :label="item.label" :value="item.name">
+              <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+            </el-option>
+          </el-select>
+          <button :class="{'nz-btn-disabled':upDownloadFlag}" :disabled="upDownloadFlag" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="upDownload">{{$t('overall.download')}}</button>
+        </div>
+      </div>
+    </div>
+    <div class="install-step">
+      <div class="step-num">2</div>
+      <div class="step-right">
+        <h4>{{$t('integration.uploadTalon')}}</h4>
+        <div class="command-box">
+          <el-input :disabled="true" :value="uploadCommand" size="small">
+            <i slot="suffix" class="nz-icon nz-icon-override" @click="copyUrl(uploadCommand)" :title="$t('overall.copyText')"></i>
+          </el-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'integration-manual',
+  data () {
+    return {
+      newDownloadFlag: false,
+      newDownType: 'centos',
+      upDownloadFlag: false,
+      upDownType: 'centos',
+      osTypes: [
+        {
+          label: 'Centos',
+          name: 'centos'
+        },
+        {
+          label: 'Red Hat',
+          name: 'redHat'
+        }
+      ],
+      uploadCommand: 'rpm -ivh nz-talon*.rpm',
+      tokenCommand: 'cat /opt/nezha/nz-talon/config/token.auth'
+
+    }
+  },
+  async created () {
+    await axios.get('/healthy')
+  },
+  methods: {
+    copyUrl (txt) {
+      this.$copyText(txt).then(() => {
+        this.$message.success({ message: this.$t('overall.copySuccess') })
+      })
+    },
+    newDownload () {
+      this.newDownloadFlag = true
+      axios.get('asset/talon/download?os=' + this.newDownType, { responseType: 'blob' }).then(data => {
+        this.newDownloadFlag = false
+        let fileName = 'NZ-TALON'
+        const disposition = data.headers['content-disposition']
+        if (disposition) {
+          fileName = disposition.split(';')[1].split('filename=')[1]
+        }
+        // 由于ie不支持download属性，故需要做兼容判断
+        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
+          // ie独有的msSaveBlob属性，data.data为Blob文件流
+          window.navigator.msSaveBlob(data.data, fileName)
+        } else {
+          // 以下流程即为文章开始的下载流程
+          const url = window.URL.createObjectURL(data.data)
+          const link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.download = fileName
+          document.body.appendChild(link)
+          link.click()
+          window.URL.revokeObjectURL(link.href)
+        }
+      }).catch((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)
+        this.newDownloadFlag = false
+      })
+    },
+    upDownload () {
+      this.upDownloadFlag = true
+      axios.get('asset/talon/download?os=' + this.upDownType, { responseType: 'blob' }).then(data => {
+        this.upDownloadFlag = false
+        let fileName = 'NZ-TALON'
+        const disposition = data.headers['content-disposition']
+        if (disposition) {
+          fileName = disposition.split(';')[1].split('filename=')[1]
+        }
+        // 由于ie不支持download属性，故需要做兼容判断
+        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
+          // ie独有的msSaveBlob属性，data.data为Blob文件流
+          window.navigator.msSaveBlob(data.data, fileName)
+        } else {
+          // 以下流程即为文章开始的下载流程
+          const url = window.URL.createObjectURL(data.data)
+          const link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.download = fileName
+          document.body.appendChild(link)
+          link.click()
+          window.URL.revokeObjectURL(link.href)
+        }
+      }).catch((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)
+        this.upDownloadFlag = false
+      })
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/integration/integration.vue b/nezha-fronted/src/components/page/integration/integration.vue
index 990d46082..655a9407f 100644
--- a/nezha-fronted/src/components/page/integration/integration.vue
+++ b/nezha-fronted/src/components/page/integration/integration.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="integration">
     <!-- NZ-talon -->
-    <p class="integration-title" style="margin-top:10px;">NZ-talon</p>
+    <p class="integration-title" style="margin-top:10px;">{{talon.name}}</p>
     <ul class="integration-list">
-      <li class="integration-item">
-        <img class="integration-icon" src="https://static.datadoghq.com/static/images/logos/azure_avatar.svg" alt="">
-        <h2 class="integration-name">NZ-talontalontalontalontalontalontalontalontalontalon</h2>
-        <p class="integration-remark">Check content name check contentname check content Check content name name check content name check content namecheck content namecheck content namecheck content name</p>
+      <li class="integration-item" @click="talonDetail">
+        <img class="integration-icon" :src="talon.icon" alt="">
+        <h2 class="integration-name">{{talon.name}}</h2>
+        <p class="integration-remark">{{talon.remark}}</p>
         <div class="integration-internal">{{$t('integration.internal')}}</div>
       </li>
     </ul>
@@ -23,6 +23,7 @@
     <!-- 集成详情 -->
     <el-dialog
       class="integration-dialog"
+      :class="type=='internal'?'integration-dialog-internal':''"
       v-if="dialogVisible"
       :visible.sync="dialogVisible"
       :show-close="true"
@@ -42,7 +43,7 @@
       </div>
       <!-- tabs -->
       <div class="integration-dialog-content">
-        <integration-tabs :detailsObj="detailsObj"></integration-tabs>
+        <integration-tabs  :type="type" :detailsObj="detailsObj"></integration-tabs>
       </div>
     </el-dialog>
   </div>
@@ -58,7 +59,14 @@ export default {
   data () {
     return {
       dialogVisible: false,
+      talon: {
+        icon: 'https://static.datadoghq.com/static/images/logos/azure_avatar.svg',
+        name: 'NZ-TALON',
+        remark: this.$t('integration.talonRemark')
+      },
+      // 模块列表
       dataList: [],
+      type: '',
       detailsObj: {}
     }
   },
@@ -67,8 +75,15 @@ export default {
       const res = await this.$get('/integration/module', { pageSize: -1 })
       this.dataList = res.data.list
     },
+    // talon 详情
+    talonDetail () {
+      this.type = 'internal'
+      this.detailsObj = this.talon
+      this.dialogVisible = true
+    },
     // 详情
     details (val) {
+      this.type = 'module'
       this.detailsObj = val
       this.dialogVisible = true
     },