```添加测试API按钮和对话框以支持手机号查询归属地在系统端口视图中，为'手机号查询归属地'功能添加了一个测试API按钮。该按钮触发一个对话框，用户可以在其中输入手机号码进行查询。对话框展示了省份、城市、区号、邮编和运营商信息。此外，对phonePlace方法进行了整合，以发起请求并处理响应。

```

src/views/port/sys/index.vue

@@ -6,7 +6,37 @@
         <el-image :src="picture" style="width: 80%; max-width: 300px; height: auto;" fit="contain"></el-image>
         <h2>{{ name }}</h2>
         <p>{{remark}}</p>
-        <p><strong></strong> {{ price }}/次</p>
+        <p><strong></strong> <span class="price">{{ price }}/次</span></p>
+
+
+        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="this.name =='手机号查询归属地'">测试API</el-button>
+        <!--        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">测试API</el-button>-->
+        <!--        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">测试API</el-button>-->
+        <!--        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">测试API</el-button>-->
+        <!--        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>-->
+        <!--        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>-->
+        <!--        <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeatherForecast()" v-if="connector.connectorName=='天气预报'">测试API</el-button>-->
+
+
+        <!--    手机号查询归属地-->
+        <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
+          <el-form :model="formInline">
+            <el-form-item label="手机号" :label-width="formLabelWidth">
+              <el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
+            </el-form-item>
+            <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
+        省份：{{this.formInline.province}}<br>
+        城市：{{this.formInline.city}}<br>
+        区号：{{this.formInline.areacode}}<br>
+        邮编：{{this.formInline.zip}}<br>
+        运营商：{{this.formInline.company}}<br>
+        </span>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="phonePlace()">发起请求</el-button>
+          </div>
+        </el-dialog>
+
       </div>
     </el-aside>
     <div>
@@ -41,11 +71,11 @@
       </div>
 
       <div v-if="activeTab === 'error-codes'">
-        <h1>错误码参照</h1>
+        <h1>服务级错误码参照(error_code)</h1>
       </div>
 
       <div v-if="activeTab === 'data-stats'">
-        <h2>数据统计</h2>
+        <h2>请求</h2>
       </div>
     </div>
   </el-container>
@@ -54,10 +84,21 @@
 <script>
 
 import { findApiById } from "@/api/port/port";
+import {phonePlace} from "@/api/port/port";
 
 export default {
   data() {
     return {
+      // 手机号查询归属地formInline
+      formInline:{
+        tel:"",
+        province:"",
+        city:"",
+        areacode:"",
+        zip:"",
+        company:"",
+        reason:"",
+      },
       activeTab: 'api-docs',
       name: '',
       describe: '',
@@ -72,10 +113,39 @@ export default {
       responseFormat: 'N/A',
       requestMethod: 'N/A',
       requestExample: 'N/A',
-      apiDescription: 'N/A'
+      apiDescription: 'N/A',
+      dialogFormVisible:false,
+      dialogFormVisible1:false,
+      dialogFormVisible2:false,
+      dialogFormVisible3:false,
+      dialogFormVisible4:false,
+      dialogFormVisible5:false,
+      dialogFormVisible6:false,
+      dialogTableVisible:false,
     };
+
+
   },
   methods: {
+    phonePlace(){
+      phonePlace(this.formInline.tel).then((res)=>{
+        console.log(res.data);
+        if (200==res.code){
+          this.formInline.province=res.data.province;
+          this.formInline.city=res.data.city;
+          this.formInline.areacode=res.data.areacode;
+          this.formInline.zip=res.data.zip;
+          this.formInline.company=res.data.company;
+          this.formInline.reason=true;
+        }
+      })
+    },
+    testIP(){
+      this.dialogFormVisible1=true;
+    },
+    testPhone(){
+      this.dialogFormVisible=true;
+    },
     handleTabClick(tab) {
       this.activeTab = tab.name;
     },
@@ -108,6 +178,10 @@ export default {
 </script>
 
 <style scoped>
+.price {
+  font-size: 24px; /* 调整字体大小 */
+  color: red;
+}
 .api-docs {
   margin-top: 20px;
 }