pref:修改api服务页面

portal-manager-ui/admin/public/index.html

@@ -28,6 +28,7 @@ body {
   width: 100%;
   height: 100%;
 }
+
   </style>
 </head>
 

portal-manager-ui/admin/src/assets/css/common.css

+/* 颜色 */
+.primary {
+    color: #1890FF;
+}
+
+.delete {
+    color: #FF4D4F;
+}
+
+.green {
+    color: #1BBC9B;
+}
+
+.clofff {
+    color: #fff;
+}
+
+.orange {
+    color: orange;
+}
+
+.bgdel {
+    background-color: #FF4D4F;
+}
+
+.bgpr {
+    background-color: #1890FF;
+}
+
+.bgg {
+    background-color: #1BBC9B;
+}
+
+/* 版心 */
+.container {
+    width: 1200px;
+}
+
+/* 弹性布局 */
+.flex {
+    display: flex;
+}
+
+.flex1 {
+    flex: 1
+}
+
+.flexc {
+    flex-direction: column;
+}
+
+.flexwrap {
+    flex-wrap: wrap;
+}
+
+.jcc {
+    justify-content: center;
+}
+
+.jca {
+    justify-content: space-around;
+}
+
+.jcb {
+    justify-content: space-between;
+}
+
+.jce {
+    justify-content: space-evenly;
+}
+
+.aic {
+    align-items: center;
+}
+
+.aca {
+    align-content: space-around;
+}
+
+.acb {
+    align-content: space-between;
+}
+
+.ace {
+    align-content: space-evenly;
+}
+
+/* margin */
+.m10 {
+    margin: 10px
+}
+
+.m15 {
+    margin: 15px;
+}
+
+.m20 {
+    margin: 20px;
+}
+
+.mt10 {
+    margin-top: 10px;
+}
+
+.mt15 {
+    margin-top: 15px;
+}
+
+.mt20 {
+    margin-top: 20px;
+}
+
+.mt50 {
+    margin-top: 50px;
+}
+
+.ml10 {
+    margin-left: 10px;
+}
+
+.ml15 {
+    margin-left: 15px;
+}
+
+.ml20 {
+    margin-left: 20px;
+}
+
+.ml25 {
+    margin-left: 25px;
+}
+
+.mr10 {
+    margin-right: 10px;
+}
+
+.mr15 {
+    margin-right: 15px;
+}
+
+.mr20 {
+    margin-right: 20px;
+}
+
+.mr25 {
+    margin-right: 25px;
+}
+
+.mr50 {
+    margin-right: 50px;
+}
+
+.mb10 {
+    margin-bottom: 10px;
+}
+
+.mb15 {
+    margin-bottom: 15px;
+}
+
+.mb20 {
+    margin-bottom: 20px;
+}
+
+.mb25 {
+    margin-bottom: 25px;
+}
+
+/* padding */
+.pd10 {
+    padding: 10px;
+}
+
+.pd15 {
+    padding: 15px;
+}
+
+.pd20 {
+    padding: 20px;
+}
+
+.pdt10 {
+    padding-top: 10px;
+}
+
+.pdt15 {
+    padding-top: 15px;
+}
+
+.pdt20 {
+    padding-top: 20px;
+}
+
+.pdt30 {
+    padding-top: 30px;
+}
+
+.pdl8 {
+    padding-left: 8px;
+}
+
+.pdl10 {
+    padding-left: 10px;
+}
+
+.pdl15 {
+    padding-left: 15px;
+}
+
+.pdl20 {
+    padding-left: 20px;
+}
+
+.pdr10 {
+    padding-right: 10px;
+}
+
+.pdr15 {
+    padding-right: 15px;
+}
+
+.pdr20 {
+    padding-right: 20px;
+}
+
+.pdb10 {
+    padding-bottom: 10px;
+}
+
+.pdb15 {
+    padding-bottom: 15px;
+}
+
+.pdb20 {
+    padding-bottom: 20px;
+}
+
+/* 字体大小 */
+.font16 {
+    font-size: 16px;
+}
+
+.font18 {
+    font-size: 18px;
+}
+
+.font20 {
+    font-size: 20px;
+}
+
+.font22 {
+    font-size: 22px;
+}
+
+.font24 {
+    font-size: 24px;
+}
+
+.font26 {
+    font-size: 26px;
+}
+
+.font28 {
+    font-size: 28px;
+}
+
+.font30 {
+    font-size: 30px;
+}
+
+/* 字体位置 */
+.tac {
+    text-align: center;
+}
+
+.tal {
+    text-align: left;
+}
+
+.tar {
+    text-align: right;
+}
+
+/* 加粗 */
+.fontw600 {
+    font-weight: 600;
+}
+
+.fontw700 {
+    font-weight: 700;
+}
+
+.fontw800 {
+    font-weight: 800;
+}
+
+/* 手型鼠标 */
+.pointer {
+    cursor: pointer;
+}
+
+.pagination {
+    margin-top: 10px;
+    text-align: right;
+}
+
+
+.color_title {
+    margin-left: 15px;
+    position: relative;
+    margin-bottom: 15px;
+    color: #1890ff;
+
+}
+
+.color_title::before {
+    content: "";
+    width: 4px;
+    height: 20px;
+    position: absolute;
+    top: 0px;
+    left: -16px;
+    background-color: rgba(5, 149, 253, 1);
+}
+::-webkit-scrollbar {
+    width: 6px;
+    height:6px;
+    overflow-y: auto;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background-color: rgba(144, 147, 153, .5);
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 6px;
+    background: #fff;
+}
\ No newline at end of file

portal-manager-ui/admin/src/main.js

-import 'babel-polyfill'
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-
-
-import Antd from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css';
+import "babel-polyfill";
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+
+import Antd from "ant-design-vue";
+import "ant-design-vue/dist/antd.css";
 Vue.use(Antd);
 
-import GlobalComponents from './utils/js/globalComponents';
-Vue.use(GlobalComponents)
+import GlobalComponents from "./utils/js/globalComponents";
+Vue.use(GlobalComponents);
 
-import common from './utils/commin'
-Vue.use(common)
+import common from "./utils/commin";
+Vue.use(common);
+import "@/assets/css/common.css";
 
 // 引入注册全局指令
-import * as directives from "@/directive"
-Object.keys(directives).forEach(name => Vue.directive(name, directives[name]))
+import * as directives from "@/directive";
+Object.keys(directives).forEach((name) =>
+  Vue.directive(name, directives[name])
+);
 
 // 全局过滤器
-import * as filters from "@/filters"
-Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
-})
+import * as filters from "@/filters";
+Object.keys(filters).forEach((key) => {
+  Vue.filter(key, filters[key]);
+});
 
-Vue.prototype.$bus = new Vue
+Vue.prototype.$bus = new Vue();
 
 Vue.config.productionTip = false;
 new Vue({
   router,
   store,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");

portal-manager-ui/admin/src/views/thePlatformIsSet/components/APIServe/APIServe.vue

@@ -3,38 +3,49 @@
     <div class="search_box" ref="search_box">
       <h3>API服务</h3>
       <h4>
-        <a-input placeholder="请输入API名称搜索" v-model="searchVal" />
-        <button class="search_btn btn" @click="getServiceApiList">
-          <span>搜索</span>
+        <a-input
+          placeholder="请输入API名称搜索"
+          v-model="searchVal"
+          @pressEnter="getServiceApiList"
+        />
+        <button class="search_btn btn" @click="handleSearch">
+          <span>{{ isSearch ? "重置" : "搜索" }}</span>
         </button>
       </h4>
     </div>
     <div class="stepbox" :style="{ height: contentHigh + 'px' }">
       <div class="_left">
-        <a-steps direction="vertical" status="wait" v-model="activeStep">
+        <a-steps progress-dot direction="vertical">
           <a-step
             v-for="(item, index) in stepsList"
+            :status="active === index ? 'process' : 'wait'"
             :key="index"
-            @click.native="stepChange(index)"
           >
-            <span slot="title">{{ item.serviceName }}</span>
-            <span class="stepIcon" slot="icon"></span>
+            <span slot="title" @click="handleChange(item, index)">{{
+              item.serviceName
+            }}</span>
           </a-step>
         </a-steps>
       </div>
-      <el-scrollbar class="_right" ref="scroll">
-        <div v-for="(item, index) of stepsList" class="list_box step_sign">
-          <h1 class="list_title">{{ item.serviceName }}</h1>
-          <div class="list" v-for="(itm, idx) of item.serviceList">
-            <b>{{ itm.apiName }}</b>
-            <span>{{ itm.systemServiceName }}</span>
-            <!-- <i>失效时间：{{ $moment(itm.lapseTime).format("YYYY-MM-DD") }}</i> -->
-            <button class="examine_btn" @click="pushroeuter">
-              <i class="fa fa-file-o"></i> 查看文档
-            </button>
+      <div class="_right">
+        <div class="list_box step_sign">
+          <div class="title-box">
+            <span class="list_title">{{ curApiInfo.serviceName }}</span>
+            <span class="count primary">{{ curApiInfo.count }}</span>
+          </div>
+          <div
+            class="list flex aic jcb"
+            v-for="v in curApiInfo.serviceList"
+            :key="v.id"
+          >
+            <div class="api-name">{{ v.apiName }}</div>
+            <span class="service-name">{{ v.systemServiceName }}</span>
+            <a-button icon="read" type="primary" @click="pushroeuter(v)">
+              查看文档
+            </a-button>
           </div>
         </div>
-      </el-scrollbar>
+      </div>
     </div>
   </div>
 </template>
@@ -42,54 +53,66 @@
 <script>
 import { serviceApiList } from "@/api/APIServe.js";
 import common from "@/mixins/common";
-import Vue from "vue";
-import { Scrollbar } from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
-Vue.use(Scrollbar);
 export default {
   name: "PortalAdminVueAPIServe",
   mixins: [common],
   data() {
     return {
-      searchVal: undefined,
+      searchVal: "",
       stepsList: [],
+      isSearch: false,
+      active: 0,
+      curApiInfo: {}, // 当前api信息
     };
   },
   created() {
     this.getServiceApiList();
   },
   mounted() {
-    this.$nextTick(() => {
-      this.handleScroll();
-      this.setContentHigh();
-    });
-    window.addEventListener("resize", this.setContentHigh);
-  },
-  destroyed() {
-    window.removeEventListener("resize", this.setContentHigh);
+    this.setContentHigh();
   },
+
   methods: {
     getServiceApiList() {
       serviceApiList({
         page: 1,
-        size: 10, //每页条数
-        apiName: this.searchVal,
+        size: -1, //每页条数
+        apiName: `%${this.searchVal}%`,
       }).then((res) => {
-        // console.log(res);
         let { code, data } = res;
         if (code == 1) {
-          // this.$message.success(res.msg);
-          this.stepsList = data.data;
-          // console.log(this.stepsList);
-          this.searchVal = undefined;
+          if (data.data.length) {
+            this.stepsList = data.data;
+            this.curApiInfo = data.data[0];
+          } else {
+            this.curApiInfo = {};
+          }
         }
       });
     },
+    handleSearch() {
+      this.isSearch = !this.isSearch;
+      if (this.isSearch) {
+        this.active = -1;
+        this.getServiceApiList();
+      } else {
+        this.searchVal = "";
+        this.active = 0;
+        this.getServiceApiList();
+      }
+    },
+    // 切换设备
+    handleChange(row, index) {
+      this.active = index;
+      this.curApiInfo = row;
+      this.searchVal = "";
+    },
     pushroeuter() {
-      this.$router.push({
-        path: "/home/thePlatformIsSet/portDocument",
-        // query: { testoption: "test001" },
-      });
+      this.$message.warning("暂未开通文档查看");
+      // this.$router.push({
+      //   path: "/home/thePlatformIsSet/portDocument",
+      //   // query: { testoption: "test001" },
+      // });
     },
   },
 };
@@ -98,11 +121,13 @@ export default {
 <style lang="less" scoped>
 @headerH: 4.5rem;
 .Container {
-  height: 100%;
+  width: 100%;
+  height: 100vh;
   background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
   .search_box {
-    // height: 20rem;
-    height: 14rem;
+    height: 300px;
     background: url("~@/assets/images/u210.png") top no-repeat;
     background-size: cover;
     text-align: center;
@@ -124,6 +149,7 @@ export default {
       margin-right: 2rem;
       height: 3rem !important;
     }
+
     .search_btn {
       width: 9rem;
       height: 3rem;
@@ -221,116 +247,79 @@ export default {
     }
   }
   .stepbox {
+    width: 90%;
+    margin-left: 5%;
+    flex: 1;
     display: flex;
-    overflow-y: auto;
-    overflow-x: hidden;
-    &::-webkit-scrollbar {
-      display: none !important;
+    /deep/.ant-steps-item-content {
+      cursor: pointer;
     }
     ._left {
-      padding-top: 2rem;
-      width: 20rem;
-      .stepIcon {
-        height: 8px;
-        width: 8px;
-        display: inline-block;
-        background: #b3b3b3;
-        border-radius: 50%;
-        -webkit-box-shadow: 0 0 2px 5px rgb(231, 232, 236);
-        box-shadow: 0 0 2px 5px rgb(231, 232, 236);
+      width: 300px;
+      height: 100%;
+      padding: 20px;
+      margin-right: 20px;
+      overflow: auto;
+      &::-webkit-scrollbar {
+        width: 3px;
+        height: 3px;
+        overflow-y: auto;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: rgba(144, 147, 153, 0.5);
+      }
+
+      &::-webkit-scrollbar-track {
+        border-radius: 3px;
+        background: #fff;
       }
     }
+
     ._right {
-      overflow: hidden !important;
-      padding-left: 2rem;
       flex: 1;
-      .list_box {
-        padding-top: 2rem;
-        & + .list_box {
-          // margin-top: 1rem;
+      height: 100%;
+      padding: 20px;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 3px;
+        height: 3px;
+        overflow-y: auto;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: rgba(144, 147, 153, 0.5);
+      }
+
+      &::-webkit-scrollbar-track {
+        border-radius: 3px;
+        background: #fff;
+      }
+      .title-box {
+        font-size: 24px;
+        .list_title {
+          margin-right: 10px;
+          font-weight: 600;
         }
-        &:last-child {
-          margin-bottom: 10rem;
+        .count {
+          font-weight: 600;
         }
-        .list_title {
-          font-weight: bold;
-          font-size: 1.2rem;
-          margin-bottom: 0.7rem;
-          span {
-            color: #1890ff;
-          }
+      }
+      .list {
+        width: 100%;
+        height: 80px;
+        margin-top: 20px;
+        padding: 0px 20px;
+        background-color: #fff;
+        border-radius: 4px;
+        .api-name {
+          font-size: 16px;
+          font-weight: 600;
         }
-        .list {
-          margin-right: 2rem;
-          padding: 1rem;
-          background: #fff;
-          display: flex;
-          border-radius: 8px;
-          justify-content: space-between;
-          align-items: center;
-          & + .list {
-            margin-top: 1rem;
-          }
-
-          b {
-            font-weight: bold;
-            color: #333;
-            max-width: 300px;
-            text-align: justify;
-            hyphens: auto;
-            overflow: hidden;
-            line-height: 1.5em;
-            white-space: nowrap;
-            word-wrap: normal;
-            text-overflow: ellipsis;
-          }
-          span {
-            color: #666;
-            max-width: 500px;
-            text-align: justify;
-            hyphens: auto;
-            overflow: hidden;
-            line-height: 1.5em;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-          }
-
-          .examine_btn {
-            background-image: linear-gradient(
-              45deg,
-              #2d6feb 0%,
-              #477ee4 51%,
-              #5885da 100%
-            );
-          }
-
-          .examine_btn {
-            margin: 10px;
-            padding: 12px 26px;
-            text-align: center;
-            cursor: pointer;
-            text-transform: uppercase;
-            transition: 0.5s;
-            background-size: 200% auto;
-            color: white;
-            border-radius: 10px;
-            display: block;
-            border: 0px;
-            font-size: 0.4rem;
-            box-shadow: 0px 0px 14px -7px #3673e4;
-          }
-
-          .examine_btn:hover {
-            background-position: right center;
-            /* change the direction of the change here */
-            color: #fff;
-            text-decoration: none;
-          }
-
-          .examine_btn:active {
-            transform: scale(0.95);
-          }
+        .service-name {
+          font-size: 14px;
         }
       }
     }
@@ -358,33 +347,5 @@ export default {
     );
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff",endColorstr="#6c35f7",GradientType=1);
   }
-  .el-scrollbar__wrap {
-    overflow-x: hidden !important;
-  }
-  .ant-steps-item-tail {
-    left: 288px !important ;
-    padding: 23px 0 1px !important;
-  }
-  .ant-steps-item-icon {
-    float: right;
-    margin-top: -8px;
-  }
-  .ant-steps-item-content {
-    text-align: right !important;
-  }
-  .ant-steps-item-finish {
-    .ant-steps-item-title {
-      color: #1890ff !important;
-    }
-    .stepIcon {
-      height: 8px;
-      width: 8px;
-      display: inline-block;
-      border-radius: 50%;
-      background: #1890ff !important;
-      -webkit-box-shadow: 0 0 2px 5px #c9dbff !important;
-      box-shadow: 0 0 2px 5px #c9dbff !important;
-    }
-  }
 }
 </style>
\ No newline at end of file