0912xx

src/api/interface/interface.ts

@@ -6,7 +6,8 @@ import type { ErrorMessageMode } from '/#/axios';
 enum Api {
     List = '/base-center/system/selectSystemPowerInterface',
     GetGroup = '/interface-center/interface/getGroup',
-    GetGroupId = '/interface-center/interface/getInterfacesAndPowerByUserId'
+    GetGroupId = '/interface-center/interface/getInterfacesAndPowerByUserId',
+    GetInterfaceDetail = '/interface-center/interface/getInterfaceDetail'
 }
 
 const interfaceType = { apiUrl2: true };
@@ -73,3 +74,22 @@ export function getGroupId(e) {
             })
     })
 }
+
+/**
+ * @description:通过组id获取列表
+ */
+export function getInterfaceDetail(id:string) {
+    var params = {
+        interfaceId:id
+    }
+    return new Promise<void>((resolve) => {
+        defHttp.get({ url: Api.GetInterfaceDetail, params })
+            .then((r) => {
+                if (r.resp_code == 0 && r.datas) {
+                    resolve(r.datas);
+                } else {
+                    resolve({});
+                }
+            })
+    })
+}

src/views/interface/item/AssemblyData.vue

@@ -37,7 +37,7 @@
     </div>
     <a-drawer title="接口详情" width="700px" placement="right" :closable="false" v-model:visible="visible"
       :after-visible-change="afterVisibleChange">
-      <Details></Details>
+      <Details :action="action"></Details>
       <div class="footer">
         <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
       </div>

src/views/interface/item/child/Details copy.vue

@@ -0,0 +1,468 @@
+<template>
+    <div data-v-70f1cc3b="">
+        123123123
+        <section data-v-70f1cc3b="" class="ant-container is-vertical">
+            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px; margin-top: 5px;">基本信息
+                <button data-v-70f1cc3b="" type="button" class="ant-button ant-button--primary ant-button--mini"
+                    style="float: right; margin-left: 20px;"><span>在线调试
+                    </span></button> <button data-v-70f1cc3b="" type="button"
+                    class="ant-button ant-button--primary ant-button--mini" style="float: right;"><span>调试说明</span></button>
+            </header>
+            <main data-v-70f1cc3b="" class="ant-main">
+                <div data-v-70f1cc3b="" class="ant-row">
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">接口名称:</div>
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">查询是否配置图层搜索</div>
+                </div>
+                <div data-v-70f1cc3b="" class="ant-row">
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">接口地址:</div>
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">/iTypeConfigInfo/getIsConfig</div>
+                </div>
+                <div data-v-70f1cc3b="" class="ant-row">
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">请求方式:</div>
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">POST</div>
+                </div>
+                <div data-v-70f1cc3b="" class="ant-row">
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">发布日期:</div>
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">2021-10-11 13:38:25</div>
+                </div>
+                <div data-v-70f1cc3b="" class="ant-row">
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">版本号:</div>
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">1.0</div>
+                </div>
+                <div data-v-70f1cc3b="" class="ant-row">
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">接口描述:</div>
+                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">
+                        <div data-v-70f1cc3b="" class="quill-editor ql-editor" style="padding: 0px;">
+                            <div data-v-70f1cc3b=""></div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </section>
+        <section data-v-70f1cc3b="" class="ant-container is-vertical">
+            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px;">请求参数</header>
+            <main data-v-70f1cc3b="" class="ant-main">
+                <div data-v-70f1cc3b=""
+                    class="ant-table ant-table--fit ant-table--border ant-table--enable-row-hover ant-table--enable-row-transition ant-table--mini"
+                    style="width: 100%;">
+                    <div class="hidden-columns">
+                        <div data-v-70f1cc3b=""></div>
+                        <div data-v-70f1cc3b=""></div>
+                        <div data-v-70f1cc3b=""></div>
+                        <div data-v-70f1cc3b=""></div>
+                        <div data-v-70f1cc3b=""></div>
+                    </div>
+                    <div class="ant-table__header-wrapper">
+                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__header" style="width: 1186px;">
+                            <colgroup>
+                                <col name="ant-table_1_column_1" width="200">
+                                <col name="ant-table_1_column_2" width="536">
+                                <col name="ant-table_1_column_3" width="150">
+                                <col name="ant-table_1_column_4" width="100">
+                                <col name="ant-table_1_column_5" width="200">
+                                <col name="gutter" width="0">
+                            </colgroup>
+                            <thead class="has-gutter">
+                                <tr class="">
+                                    <th colspan="1" rowspan="1" class="ant-table_1_column_1     is-leaf">
+                                        <div class="cell">参数名称</div>
+                                    </th>
+                                    <th colspan="1" rowspan="1" class="ant-table_1_column_2     is-leaf">
+                                        <div class="cell">说明</div>
+                                    </th>
+                                    <th colspan="1" rowspan="1" class="ant-table_1_column_3     is-leaf">
+                                        <div class="cell">参数位置</div>
+                                    </th>
+                                    <th colspan="1" rowspan="1" class="ant-table_1_column_4     is-leaf">
+                                        <div class="cell">是否必填</div>
+                                    </th>
+                                    <th colspan="1" rowspan="1" class="ant-table_1_column_5     is-leaf">
+                                        <div class="cell">数据类型</div>
+                                    </th>
+                                    <th class="gutter" style="width: 0px; display: none;"></th>
+                                </tr>
+                            </thead>
+                        </table>
+                    </div>
+                    <div class="ant-table__body-wrapper is-scrolling-none">
+                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__body" style="width: 1186px;">
+                            <colgroup>
+                                <col name="ant-table_1_column_1" width="200">
+                                <col name="ant-table_1_column_2" width="536">
+                                <col name="ant-table_1_column_3" width="150">
+                                <col name="ant-table_1_column_4" width="100">
+                                <col name="ant-table_1_column_5" width="200">
+                            </colgroup>
+                            <tbody>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">Authorization</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell">令牌</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">header</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">否</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">client_id</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">query</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">否</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">functionType</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell">functionType</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">query</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">是</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">real_name</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">query</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">否</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">scope</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">query</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">否</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">array</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">serviceId</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell">serviceId</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">query</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">是</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">user_id</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">query</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">否</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
+                                        <div class="cell">user_name</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
+                                        <div class="cell">query</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
+                                        <div class="cell">否</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="ant-table__column-resize-proxy" style="display: none;"></div>
+                </div>
+            </main>
+        </section>
+        <section data-v-70f1cc3b="" class="ant-container is-vertical">
+            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px;">返回参数</header>
+            <main data-v-70f1cc3b="" class="ant-main">
+                <div data-v-70f1cc3b=""
+                    class="ant-table ant-table--fit ant-table--border ant-table--enable-row-hover ant-table--enable-row-transition ant-table--mini"
+                    style="width: 100%;">
+                    <div class="hidden-columns">
+                        <div data-v-70f1cc3b=""></div>
+                        <div data-v-70f1cc3b=""></div>
+                        <div data-v-70f1cc3b=""></div>
+                        <div data-v-70f1cc3b=""></div>
+                    </div>
+                    <div class="ant-table__header-wrapper">
+                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__header" style="width: 1186px;">
+                            <colgroup>
+                                <col name="ant-table_2_column_6" width="200">
+                                <col name="ant-table_2_column_7" width="636">
+                                <col name="ant-table_2_column_8" width="150">
+                                <col name="ant-table_2_column_9" width="200">
+                                <col name="gutter" width="0">
+                            </colgroup>
+                            <thead class="has-gutter">
+                                <tr class="">
+                                    <th colspan="1" rowspan="1" class="ant-table_2_column_6     is-leaf">
+                                        <div class="cell">参数名称</div>
+                                    </th>
+                                    <th colspan="1" rowspan="1" class="ant-table_2_column_7     is-leaf">
+                                        <div class="cell">说明</div>
+                                    </th>
+                                    <th colspan="1" rowspan="1" class="ant-table_2_column_8     is-leaf">
+                                        <div class="cell">参数位置</div>
+                                    </th>
+                                    <th colspan="1" rowspan="1" class="ant-table_2_column_9     is-leaf">
+                                        <div class="cell">数据类型</div>
+                                    </th>
+                                    <th class="gutter" style="width: 0px; display: none;"></th>
+                                </tr>
+                            </thead>
+                        </table>
+                    </div>
+                    <div class="ant-table__body-wrapper is-scrolling-none">
+                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__body" style="width: 1186px;">
+                            <colgroup>
+                                <col name="ant-table_2_column_6" width="200">
+                                <col name="ant-table_2_column_7" width="636">
+                                <col name="ant-table_2_column_8" width="150">
+                                <col name="ant-table_2_column_9" width="200">
+                            </colgroup>
+                            <tbody>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_6  ">
+                                        <div class="cell">datas</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_7  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_8  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_9  ">
+                                        <div class="cell">object</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_6  ">
+                                        <div class="cell">resp_code</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_7  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_8  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_9  ">
+                                        <div class="cell">integer</div>
+                                    </td>
+                                </tr>
+                                <tr class="ant-table__row expanded">
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_6  ">
+                                        <div class="cell">resp_msg</div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_7  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_8  ">
+                                        <div class="cell"></div>
+                                    </td>
+                                    <td rowspan="1" colspan="1" class="ant-table_2_column_9  ">
+                                        <div class="cell">string</div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="ant-table__column-resize-proxy" style="display: none;"></div>
+                </div>
+            </main>
+        </section>
+        <section data-v-70f1cc3b="" class="ant-container is-vertical">
+            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px;">返回示例</header>
+            <main data-v-70f1cc3b="" class="ant-main">
+                <div data-v-70f1cc3b="" id="resText">
+                    <div data-v-70f1cc3b="" class="ant-textarea is-disabled"><textarea disabled="disabled" autocomplete="off"
+                            placeholder="请输入内容" class="ant-textarea__inner"
+                            style="min-height: 180px; height: 180px;"></textarea></div>
+                </div>
+            </main>
+        </section>
+        <div data-v-70f1cc3b="" class="ant-dialog__wrapper" style="z-index: 2012; display: none;">
+            <div role="dialog" aria-modal="true" aria-label="调试接口" class="ant-dialog" style="margin-top: 4vh; width: 80%;">
+                <div class="ant-dialog__header"><span class="ant-dialog__title">调试接口</span><button type="button"
+                        aria-label="Close" class="ant-dialog__headerbtn"><i
+                            class="ant-dialog__close ant-icon ant-icon-close"></i></button></div>
+                <div class="ant-dialog__body"></div>
+            </div>
+        </div>
+        <div data-v-70f1cc3b="" class="ant-dialog__wrapper" style="z-index: 2005; display: none;">
+            <div role="dialog" aria-modal="true" aria-label="调用说明" class="ant-dialog" style="margin-top: 4vh; width: 700px;">
+                <div class="ant-dialog__header"><span class="ant-dialog__title">调用说明</span><button type="button"
+                        aria-label="Close" class="ant-dialog__headerbtn"><i
+                            class="ant-dialog__close ant-icon ant-icon-close"></i></button></div>
+                <div class="ant-dialog__body">
+                    <div data-v-70f1cc3b="" style="margin: 0px auto;">
+                        <p data-v-70f1cc3b=""> · 使用需鉴权的接口要在网络请求头（Http Headers）中添加参数（Authorization）项，设置已授权的令牌（JWT：JSON Web
+                            Tokens）</p>
+                        <p data-v-70f1cc3b=""> · 获取授权的JWT如下:</p>
+                        <p data-v-70f1cc3b=""> 1). 首先拥有成都市规划和自然资源局门户的账号和密码</p>
+                        <p data-v-70f1cc3b=""> 2). 其次由信息中心管理员配置client_id、client_secret、username、password参数值</p>
+                        <p data-v-70f1cc3b=""> 3). 然后获取access_token</p>
+                        <p data-v-70f1cc3b=""> 4). 最后通过access_token访问需鉴权的资源</p>
+                        <p data-v-70f1cc3b=""> 5). 注意:access_token有效期为:30分钟,过期需重新获取</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+</script>
+
+
+<style scoped>
+.ant-container.is-vertical {
+    -ms-flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+}
+
+.ant-header[data-v-70f1cc3b] {
+    border-left: 3px solid #e6a23c;
+}
+
+.ant-main {
+    display: block;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+    overflow: auto;
+    padding: 20px;
+}
+
+.ant-row[data-v-70f1cc3b] {
+    margin-bottom: 10px;
+}
+
+.ant-col-4 {
+    width: 8.33333%;
+}
+
+.ant-col-20 {
+    width: 91.66667%;
+}
+
+.ant-col-pull-0,
+.ant-col-pull-1,
+.ant-col-pull-2,
+.ant-col-pull-3,
+.ant-col-pull-4,
+.ant-col-pull-5,
+.ant-col-pull-6,
+.ant-col-pull-7,
+.ant-col-pull-8,
+.ant-col-pull-9,
+.ant-col-pull-10,
+.ant-col-pull-11,
+.ant-col-pull-13,
+.ant-col-pull-14,
+.ant-col-pull-15,
+.ant-col-pull-16,
+.ant-col-pull-17,
+.ant-col-pull-18,
+.ant-col-pull-19,
+.ant-col-pull-20,
+.ant-col-pull-21,
+.ant-col-pull-22,
+.ant-col-pull-23,
+.ant-col-pull-24,
+.ant-col-push-0,
+.ant-col-push-1,
+.ant-col-push-2,
+.ant-col-push-3,
+.ant-col-push-4,
+.ant-col-push-5,
+.ant-col-push-6,
+.ant-col-push-7,
+.ant-col-push-8,
+.ant-col-push-9,
+.ant-col-push-10,
+.ant-col-push-11,
+.ant-col-push-12,
+.ant-col-push-13,
+.ant-col-push-14,
+.ant-col-push-15,
+.ant-col-push-16,
+.ant-col-push-17,
+.ant-col-push-18,
+.ant-col-push-19,
+.ant-col-push-20,
+.ant-col-push-21,
+.ant-col-push-22,
+.ant-col-push-23,
+.ant-col-push-24,
+.ant-row {
+    position: relative;
+}</style>

src/views/interface/item/child/Details.vue

@@ -1,467 +1,264 @@
+<!-- 接口详情弹窗 -->
 <template>
-    <div data-v-70f1cc3b="">
-        <section data-v-70f1cc3b="" class="ant-container is-vertical">
-            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px; margin-top: 5px;">基本信息
-                <button data-v-70f1cc3b="" type="button" class="ant-button ant-button--primary ant-button--mini"
-                    style="float: right; margin-left: 20px;"><span>在线调试
-                    </span></button> <button data-v-70f1cc3b="" type="button"
-                    class="ant-button ant-button--primary ant-button--mini" style="float: right;"><span>调试说明</span></button>
-            </header>
-            <main data-v-70f1cc3b="" class="ant-main">
-                <div data-v-70f1cc3b="" class="ant-row">
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">接口名称:</div>
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">查询是否配置图层搜索</div>
+    <div class="assembly-detail">
+        <!-- 基本信息 -->
+        <div class="detail-item">
+            <div class="item-header">
+                <div class="title">基本信息</div>
+                <div class="btns">
+                    <div class="btn">接口说明</div>
+                    <div class="btn">在线调试</div>
                 </div>
-                <div data-v-70f1cc3b="" class="ant-row">
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">接口地址:</div>
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">/iTypeConfigInfo/getIsConfig</div>
-                </div>
-                <div data-v-70f1cc3b="" class="ant-row">
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">请求方式:</div>
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">POST</div>
-                </div>
-                <div data-v-70f1cc3b="" class="ant-row">
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">发布日期:</div>
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">2021-10-11 13:38:25</div>
-                </div>
-                <div data-v-70f1cc3b="" class="ant-row">
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">版本号:</div>
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">1.0</div>
-                </div>
-                <div data-v-70f1cc3b="" class="ant-row">
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-4">接口描述:</div>
-                    <div data-v-70f1cc3b="" class="ant-col ant-col-20">
-                        <div data-v-70f1cc3b="" class="quill-editor ql-editor" style="padding: 0px;">
-                            <div data-v-70f1cc3b=""></div>
-                        </div>
-                    </div>
-                </div>
-            </main>
-        </section>
-        <section data-v-70f1cc3b="" class="ant-container is-vertical">
-            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px;">请求参数</header>
-            <main data-v-70f1cc3b="" class="ant-main">
-                <div data-v-70f1cc3b=""
-                    class="ant-table ant-table--fit ant-table--border ant-table--enable-row-hover ant-table--enable-row-transition ant-table--mini"
-                    style="width: 100%;">
-                    <div class="hidden-columns">
-                        <div data-v-70f1cc3b=""></div>
-                        <div data-v-70f1cc3b=""></div>
-                        <div data-v-70f1cc3b=""></div>
-                        <div data-v-70f1cc3b=""></div>
-                        <div data-v-70f1cc3b=""></div>
-                    </div>
-                    <div class="ant-table__header-wrapper">
-                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__header" style="width: 1186px;">
-                            <colgroup>
-                                <col name="ant-table_1_column_1" width="200">
-                                <col name="ant-table_1_column_2" width="536">
-                                <col name="ant-table_1_column_3" width="150">
-                                <col name="ant-table_1_column_4" width="100">
-                                <col name="ant-table_1_column_5" width="200">
-                                <col name="gutter" width="0">
-                            </colgroup>
-                            <thead class="has-gutter">
-                                <tr class="">
-                                    <th colspan="1" rowspan="1" class="ant-table_1_column_1     is-leaf">
-                                        <div class="cell">参数名称</div>
-                                    </th>
-                                    <th colspan="1" rowspan="1" class="ant-table_1_column_2     is-leaf">
-                                        <div class="cell">说明</div>
-                                    </th>
-                                    <th colspan="1" rowspan="1" class="ant-table_1_column_3     is-leaf">
-                                        <div class="cell">参数位置</div>
-                                    </th>
-                                    <th colspan="1" rowspan="1" class="ant-table_1_column_4     is-leaf">
-                                        <div class="cell">是否必填</div>
-                                    </th>
-                                    <th colspan="1" rowspan="1" class="ant-table_1_column_5     is-leaf">
-                                        <div class="cell">数据类型</div>
-                                    </th>
-                                    <th class="gutter" style="width: 0px; display: none;"></th>
-                                </tr>
-                            </thead>
-                        </table>
-                    </div>
-                    <div class="ant-table__body-wrapper is-scrolling-none">
-                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__body" style="width: 1186px;">
-                            <colgroup>
-                                <col name="ant-table_1_column_1" width="200">
-                                <col name="ant-table_1_column_2" width="536">
-                                <col name="ant-table_1_column_3" width="150">
-                                <col name="ant-table_1_column_4" width="100">
-                                <col name="ant-table_1_column_5" width="200">
-                            </colgroup>
-                            <tbody>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">Authorization</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell">令牌</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">header</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">否</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">client_id</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">query</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">否</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">functionType</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell">functionType</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">query</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">是</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">real_name</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">query</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">否</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">scope</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">query</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">否</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">array</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">serviceId</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell">serviceId</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">query</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">是</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">user_id</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">query</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">否</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_1  ">
-                                        <div class="cell">user_name</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_2  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_3  ">
-                                        <div class="cell">query</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_4  ">
-                                        <div class="cell">否</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_1_column_5  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="ant-table__column-resize-proxy" style="display: none;"></div>
-                </div>
-            </main>
-        </section>
-        <section data-v-70f1cc3b="" class="ant-container is-vertical">
-            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px;">返回参数</header>
-            <main data-v-70f1cc3b="" class="ant-main">
-                <div data-v-70f1cc3b=""
-                    class="ant-table ant-table--fit ant-table--border ant-table--enable-row-hover ant-table--enable-row-transition ant-table--mini"
-                    style="width: 100%;">
-                    <div class="hidden-columns">
-                        <div data-v-70f1cc3b=""></div>
-                        <div data-v-70f1cc3b=""></div>
-                        <div data-v-70f1cc3b=""></div>
-                        <div data-v-70f1cc3b=""></div>
-                    </div>
-                    <div class="ant-table__header-wrapper">
-                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__header" style="width: 1186px;">
-                            <colgroup>
-                                <col name="ant-table_2_column_6" width="200">
-                                <col name="ant-table_2_column_7" width="636">
-                                <col name="ant-table_2_column_8" width="150">
-                                <col name="ant-table_2_column_9" width="200">
-                                <col name="gutter" width="0">
-                            </colgroup>
-                            <thead class="has-gutter">
-                                <tr class="">
-                                    <th colspan="1" rowspan="1" class="ant-table_2_column_6     is-leaf">
-                                        <div class="cell">参数名称</div>
-                                    </th>
-                                    <th colspan="1" rowspan="1" class="ant-table_2_column_7     is-leaf">
-                                        <div class="cell">说明</div>
-                                    </th>
-                                    <th colspan="1" rowspan="1" class="ant-table_2_column_8     is-leaf">
-                                        <div class="cell">参数位置</div>
-                                    </th>
-                                    <th colspan="1" rowspan="1" class="ant-table_2_column_9     is-leaf">
-                                        <div class="cell">数据类型</div>
-                                    </th>
-                                    <th class="gutter" style="width: 0px; display: none;"></th>
-                                </tr>
-                            </thead>
-                        </table>
-                    </div>
-                    <div class="ant-table__body-wrapper is-scrolling-none">
-                        <table cellspacing="0" cellpadding="0" border="0" class="ant-table__body" style="width: 1186px;">
-                            <colgroup>
-                                <col name="ant-table_2_column_6" width="200">
-                                <col name="ant-table_2_column_7" width="636">
-                                <col name="ant-table_2_column_8" width="150">
-                                <col name="ant-table_2_column_9" width="200">
-                            </colgroup>
-                            <tbody>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_6  ">
-                                        <div class="cell">datas</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_7  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_8  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_9  ">
-                                        <div class="cell">object</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_6  ">
-                                        <div class="cell">resp_code</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_7  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_8  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_9  ">
-                                        <div class="cell">integer</div>
-                                    </td>
-                                </tr>
-                                <tr class="ant-table__row expanded">
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_6  ">
-                                        <div class="cell">resp_msg</div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_7  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_8  ">
-                                        <div class="cell"></div>
-                                    </td>
-                                    <td rowspan="1" colspan="1" class="ant-table_2_column_9  ">
-                                        <div class="cell">string</div>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="ant-table__column-resize-proxy" style="display: none;"></div>
-                </div>
-            </main>
-        </section>
-        <section data-v-70f1cc3b="" class="ant-container is-vertical">
-            <header data-v-70f1cc3b="" class="ant-header" style="height: 20px;">返回示例</header>
-            <main data-v-70f1cc3b="" class="ant-main">
-                <div data-v-70f1cc3b="" id="resText">
-                    <div data-v-70f1cc3b="" class="ant-textarea is-disabled"><textarea disabled="disabled" autocomplete="off"
-                            placeholder="请输入内容" class="ant-textarea__inner"
-                            style="min-height: 180px; height: 180px;"></textarea></div>
+            </div>
+            <div class="item-body">
+                <div class="des" v-for="(item, index) of baseData" :key="index">
+                    <div class="des-label">{{ item.label }}:</div>
+                    <div>{{ item.value }}</div>
                 </div>
-            </main>
-        </section>
-        <div data-v-70f1cc3b="" class="ant-dialog__wrapper" style="z-index: 2012; display: none;">
-            <div role="dialog" aria-modal="true" aria-label="调试接口" class="ant-dialog" style="margin-top: 4vh; width: 80%;">
-                <div class="ant-dialog__header"><span class="ant-dialog__title">调试接口</span><button type="button"
-                        aria-label="Close" class="ant-dialog__headerbtn"><i
-                            class="ant-dialog__close ant-icon ant-icon-close"></i></button></div>
-                <div class="ant-dialog__body"></div>
             </div>
         </div>
-        <div data-v-70f1cc3b="" class="ant-dialog__wrapper" style="z-index: 2005; display: none;">
-            <div role="dialog" aria-modal="true" aria-label="调用说明" class="ant-dialog" style="margin-top: 4vh; width: 700px;">
-                <div class="ant-dialog__header"><span class="ant-dialog__title">调用说明</span><button type="button"
-                        aria-label="Close" class="ant-dialog__headerbtn"><i
-                            class="ant-dialog__close ant-icon ant-icon-close"></i></button></div>
-                <div class="ant-dialog__body">
-                    <div data-v-70f1cc3b="" style="margin: 0px auto;">
-                        <p data-v-70f1cc3b=""> · 使用需鉴权的接口要在网络请求头（Http Headers）中添加参数（Authorization）项，设置已授权的令牌（JWT：JSON Web
-                            Tokens）</p>
-                        <p data-v-70f1cc3b=""> · 获取授权的JWT如下:</p>
-                        <p data-v-70f1cc3b=""> 1). 首先拥有成都市规划和自然资源局门户的账号和密码</p>
-                        <p data-v-70f1cc3b=""> 2). 其次由信息中心管理员配置client_id、client_secret、username、password参数值</p>
-                        <p data-v-70f1cc3b=""> 3). 然后获取access_token</p>
-                        <p data-v-70f1cc3b=""> 4). 最后通过access_token访问需鉴权的资源</p>
-                        <p data-v-70f1cc3b=""> 5). 注意:access_token有效期为:30分钟,过期需重新获取</p>
-                    </div>
-                </div>
+        <!-- 请求参数 -->
+        <div class="detail-item">
+            <div class="item-header">
+                <div class="title">请求参数</div>
+            </div>
+            <div class="item-body">
+                <a-table :data-source="reqData" :columns="reqColumns" :pagination="{ hideOnSinglePage: true }">
+                    <template #required="{ record }">
+                        <div>{{ record.required? '是' : '否' }}</div>
+                    </template>
+                </a-table>
+            </div>
+        </div>
+        <!-- 返回参数 -->
+        <div class="detail-item">
+            <div class="item-header">
+                <div class="title">返回参数</div>
+            </div>
+            <div class="item-body">
+                <a-table :data-source="resData" :columns="resColumns" :pagination="{ hideOnSinglePage: true }">
+                </a-table>
+            </div>
+        </div>
+        <!-- 返回示例 -->
+        <div class="detail-item">
+            <div class="item-header">
+                <div class="title">返回示例</div>
+            </div>
+            <div class="item-body">
+                <a-textarea v-model:value="resExample" placeholder="" :autosize="true" />
             </div>
         </div>
     </div>
 </template>
+
 <script>
+import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
+import { getInterfaceDetail } from '/@/api/interface/interface.ts';
+
+const props = {
+    action: {
+        type: Object,
+        default: {}
+    }
+}
+
+export default defineComponent({
+    name: 'assemblyDetail',
+    components: {},
+    props,
+    setup(props) {
+        //action数据，初始化时使用这个数据去组装需要的数据
+        const data = ref(null)
+
+        // 四类数据
+        const baseData = ref(null)
+        const reqData = ref(null)
+        const resData = ref(null)
+        const resExample = ref(null)
+
+        //请求参数表
+        const reqColumns = [
+            {
+                title: '参数名称',
+                align: 'center',
+                dataIndex: 'name',
+                key: 'name'
+            },
+            {
+                title: '说明',
+                align: 'center',
+                dataIndex: 'description',
+                key: 'description'
+            },
+            {
+                title: '参数位置',
+                align: 'center',
+                dataIndex: 'in',
+                key: 'in'
+            },
+            {
+                title: '是否必填',
+                align: 'center',
+                dataIndex: 'required',
+                slots: {
+                    customRender: 'required',
+                }
+            },
+            {
+                title: '数据类型',
+                align: 'center',
+                dataIndex: 'type',
+                key: 'type'
+            }
+        ]
+        //返回参数列表
+        const resColumns = [
+            {
+                title: '参数名称',
+                align: 'center',
+                dataIndex: 'name',
+                key: 'name'
+            },
+            {
+                title: '说明',
+                align: 'center',
+                dataIndex: 'schema',
+                key: 'schema'
+            },
+            {
+                title: '参数位置',
+                align: 'center',
+                dataIndex: 'in',
+                key: 'in'
+            },
+            {
+                title: '数据类型',
+                align: 'center',
+                dataIndex: 'type',
+                key: 'type'
+            }
+        ]
+
+        onMounted(() => {
+            // console.log(props.action);
+            props.action && getActionData(props.action.id)
+        })
+        watch(
+            () => props.action,
+            (val) => {
+                getActionData(val.id)
+            }
+        )
+        const getActionData = (id) => {
+            getInterfaceDetail(id).then(res => {
+                data.value = {
+                    ...res,
+                    queryParams: JSON.parse(res.queryParams),
+                    requestHeaders: JSON.parse(res.requestHeaders),
+                    responseParams: JSON.parse(res.responseParams),
+                    // successRespExample:JSON.parse(res.successRespExample),
+                }
+                //组装四个需求的数据
+                baseData.value = [
+                    {
+                        label: '接口名称',
+                        value: data.value.name || '',
+                    },
+                    {
+                        label: '接口地址',
+                        value: data.value.requestUrl || '',
+                    },
+                    {
+                        label: '请求方式',
+                        value: data.value.requestMethod ? data.value.requestMethod : '',
+                    },
+                    {
+                        label: '发布日期',
+                        value: data.value.publishTime || '',
+                    },
+                    {
+                        label: '版本号',
+                        value: data.value.version || ''
+                    },
+                    {
+                        label: '接口描述',
+                        value: data.value.remark || ''
+                    },
+                ]
+                reqData.value = data.value.queryParams
+                reqData.value.forEach((item,index)=>{
+                    item.key = index
+                })
+                resData.value = data.value.responseParams
+                resData.value.forEach((item,index)=>{
+                    item.key = index
+                })
+                resExample.value = data.value.successRespExample
+                console.log(data.value);
+            })
+        }
+        return {
+            data,
+            baseData,
+            reqData,
+            resData,
+            resExample,
 
+            reqColumns,
+            resColumns
+        };
+    },
+});
 </script>
 
+<style lang="less" scoped>
+.assembly-detail {
+    .detail-item {
+        margin-top: 10px;
+        margin-bottom: 20px;
 
-<style scoped>
-.ant-container.is-vertical {
-    -ms-flex-direction: column;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    flex-direction: column;
-}
+        &:first-child {
+            margin-top: 0;
+        }
 
-.ant-header[data-v-70f1cc3b] {
-    border-left: 3px solid #e6a23c;
-}
+        .item-header {
+            padding-left: 20px;
+            height: 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-left: 2px solid #e6a23c;
+            box-sizing: border-box;
 
-.ant-main {
-    display: block;
-    -webkit-box-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
-    overflow: auto;
-    padding: 20px;
-}
+            .btns {
+                display: flex;
 
-.ant-row[data-v-70f1cc3b] {
-    margin-bottom: 10px;
-}
+                .btn {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 30px;
+                    text-align: center;
+                    border-radius: 5px;
+                    background-color: #66b1ff;
+                    color: #fff;
+                    margin-right: 10px;
+                }
+            }
+        }
 
-.ant-col-4 {
-    width: 8.33333%;
-}
+        .item-body {
+            padding-left: 20px;
 
-.ant-col-20 {
-    width: 91.66667%;
-}
+            .des {
+                margin: 10px 0;
+                display: flex;
 
-.ant-col-pull-0,
-.ant-col-pull-1,
-.ant-col-pull-2,
-.ant-col-pull-3,
-.ant-col-pull-4,
-.ant-col-pull-5,
-.ant-col-pull-6,
-.ant-col-pull-7,
-.ant-col-pull-8,
-.ant-col-pull-9,
-.ant-col-pull-10,
-.ant-col-pull-11,
-.ant-col-pull-13,
-.ant-col-pull-14,
-.ant-col-pull-15,
-.ant-col-pull-16,
-.ant-col-pull-17,
-.ant-col-pull-18,
-.ant-col-pull-19,
-.ant-col-pull-20,
-.ant-col-pull-21,
-.ant-col-pull-22,
-.ant-col-pull-23,
-.ant-col-pull-24,
-.ant-col-push-0,
-.ant-col-push-1,
-.ant-col-push-2,
-.ant-col-push-3,
-.ant-col-push-4,
-.ant-col-push-5,
-.ant-col-push-6,
-.ant-col-push-7,
-.ant-col-push-8,
-.ant-col-push-9,
-.ant-col-push-10,
-.ant-col-push-11,
-.ant-col-push-12,
-.ant-col-push-13,
-.ant-col-push-14,
-.ant-col-push-15,
-.ant-col-push-16,
-.ant-col-push-17,
-.ant-col-push-18,
-.ant-col-push-19,
-.ant-col-push-20,
-.ant-col-push-21,
-.ant-col-push-22,
-.ant-col-push-23,
-.ant-col-push-24,
-.ant-row {
-    position: relative;
-}</style>
+                .des-label {
+                    width: 100px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/tips/index.vue

@@ -279,8 +279,8 @@ export default defineComponent({
 <style lang="less" scoped>
 .tips {
     position: fixed;
-    left: 46px;
-    top: 20px;
+    left: calc(100% - 106px);
+    top: calc(100% - 80px);
     display: flex;
     flex-direction: column;
     align-items: flex-end;