perf：修改Automatic installation下拉框样式

nezha-fronted/src/assets/css/components/page/integration/integration.scss

@@ -398,6 +398,15 @@
           .el-select{
             width: 220px;
           }
+          .v-selectpage{
+            width: 640px;
+            .sp-base.sp-input{
+              height: 32px;
+            }
+            .sp-icon-close{
+              display: none;
+            }
+          }
           .nz-btn{
             margin-left: 18px;
           }

nezha-fronted/src/components/common/v-selectpagenew/css/selectPage.css

@@ -188,7 +188,7 @@ div.v-selectpage div.sp-input-container div.sp-button {
   display: inline-block;
   box-sizing: border-box;
   padding: 0;
-  width: 24px;
+  width: 26px;
   height: 100%;
   border: 0;
   border-top-right-radius: 0;
@@ -201,22 +201,45 @@ div.v-selectpage div.sp-input-container div.sp-button {
 
 div.v-selectpage div.sp-input-container div.sp-button span.sp-caret {
   position: absolute;
-  top: 50%;
+  left: 0;
-  right: 12px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto; 
   display: inline-block;
-  margin-top: -1px;
+  transition: transform 0.3s ease;
-  margin-left: 2px;
+  transform: rotate(180deg);
+
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'element-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  display: inline-block;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+div.v-selectpage div.sp-input-container div.sp-button span.sp-caret::before {
+  content: "\e6e1";
+}
+
+div.v-selectpage div.sp-input-container div.sp-button span.sp-caret::after {
+  content: "";
+  height: 100%;
   width: 0;
-  height: 0;
+  display: inline-block;
-  border-top: 4px dashed;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
   vertical-align: middle;
-  transition: transform .2s ease;
 }
 
 div.v-selectpage div.sp-input-container div.sp-button.open span.sp-caret {
-  transform: rotate(180deg);
+  transform: rotate(0);
 }
 
 div.sp-header {

nezha-fronted/src/components/page/integration/integration-tabs/automatic.vue

@@ -8,11 +8,19 @@
         <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">
+          <v-selectpage
-            <el-option v-for="item in assetList" :key="item.name" :label="item.name" :value="item.id">
+            :data="assetList"
-              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            :tb-columns="assetColumns"
-            </el-option>
+            :multiple="false"
-          </el-select>
+            :language="language"
+            key-field="id"
+            show-field="name"
+            :width="640"
+            v-model="assetId"
+            class="form-control"
+            :result-format="resultFormat"
+          >
+          </v-selectpage>
         </div>
       </div>
     </div>
@@ -39,7 +47,39 @@ export default {
     return {
       loadFinish: false,
       assetId: '',
-      assetList: []
+      assetList: [],
+      // asset表头
+      assetColumns: [
+        { title: 'id', data: 'id' },
+        {
+          title: this.$t('overall.name'),
+          data: function (row) {
+            if (row.name.length > 15) {
+              return row.name.substring(0, 12) + '...'
+            }
+            return row.name
+          }
+        },
+        { title: 'Manage Ip', data: 'manageIp' },
+        {
+          title: this.$t('overall.type'),
+          data: (row) => {
+            return row.type ? row.type.name : ''
+          }
+        },
+        {
+          title: this.$t('asset.model'),
+          data: (row) => {
+            return row.model ? row.model.name : ''
+          }
+        },
+        {
+          title: this.$t('overall.dc'),
+          data: (row) => {
+            return row.dc ? row.dc.name : ''
+          }
+        }
+      ]
     }
   },
   created () {
@@ -51,6 +91,7 @@ export default {
     })
   },
   computed: {
+    language () { return this.$store.getters.getLanguage },
     curlUrl () {
       return 'curl -o- -k -H "Authorization:' + this.token + '" ' + this.ipAddr + '/asset/talon/' + this.assetId + '/install.sh | sudo -E bash'
     }
@@ -64,12 +105,20 @@ export default {
         if (response.code === 200) {
           this.assetList = response.data.list
           if (this.assetList && this.assetList.length > 0) {
-            this.assetId = this.assetList[0].id
+            this.assetId = String(this.assetList[0].id)
             this.loadFinish = true
           }
         }
       })
     },
+    resultFormat (resp) {
+      if (resp && resp.data) {
+        const assetData = {}
+        assetData.list = resp.data.list
+        assetData.totalRow = resp.data.total
+        return assetData
+      }
+    },
     copyUrl (txt) {
       this.$copyText(txt).then(() => {
         this.$message.success({ message: this.$t('overall.copySuccess') })

nezha-fronted/src/components/page/integration/integration-tabs/integration-tabs.vue

@@ -9,7 +9,7 @@
       <automatic v-if="tabId==='automatic'"></automatic>
       <!-- module -->
       <configuration v-if="tabId==='configuration'" :configuration="detailsObj.configuration"></configuration>
-      <dashboard ref="dashboard" v-if="tabId==='dashboard'" :tempId="detailsObj.tempId"></dashboard>
+      <dashboard v-if="tabId==='dashboard'" :tempId="detailsObj.tempId"></dashboard>
       <alert v-if="tabId==='alert'" :moduleId="detailsObj.id"></alert>
       <metric v-if="tabId==='metric'" :moduleId="detailsObj.id"></metric>
     </div>

nezha-fronted/src/components/page/integration/integration.vue

@@ -44,7 +44,7 @@
       </div>
       <!-- tabs -->
       <div class="integration-dialog-content">
-        <integration-tabs ref="tabs" :type="type" :detailsObj="detailsObj"></integration-tabs>
+        <integration-tabs :type="type" :detailsObj="detailsObj"></integration-tabs>
       </div>
     </el-dialog>
   </div>