接口

src/api/fusing.js

@@ -0,0 +1,91 @@
+import request from '@/utils/request'
+
+//熔断列表查询
+export function GetFusingList(params) {
+  return request({
+    url: '/api/Fusing/GetFusingList',
+    method: 'post',
+    data: params
+  })
+}
+
+//新增熔断
+export function addFusingList(params) {
+  return request({
+    url: '/api/Fusing/EditFusingInfo',
+    method: 'post',
+    data: params
+  })
+}
+
+//熔断详情
+export function GetFusingById(params) {
+  return request({
+    url: '/api/Fusing/GetFusingById',
+    method: 'post',
+    data: params
+  })
+}
+
+//删除熔断
+export function DeleteFusingInfo(params) {
+  return request({
+    url: '/api/Fusing/DeleteFusingInfo',
+    method: 'post',
+    data: params
+  })
+}
+
+//状态变更
+export function UpdateFusingStatusPatch(params) {
+  return request({
+    url: '/api/Fusing/UpdateFusingStatusPatch',
+    method: 'post',
+    data: params
+  })
+}
+
+//限流列表查询
+export function GetLimitList(params) {
+  return request({
+    url: '/api/Limit/GetLimitList',
+    method: 'post',
+    data: params
+  })
+}
+
+//新增限流
+export function EditLimitInfo(params) {
+  return request({
+    url: '/api/Limit/EditLimitInfo',
+    method: 'post',
+    data: params
+  })
+}
+
+//删除限流
+export function DeleteLimitInfo(params) {
+  return request({
+    url: '/api/Limit/DeleteLimitInfo',
+    method: 'post',
+    data: params
+  })
+}
+
+//状态变更
+export function UpdateLimitStatusPatch(params) {
+  return request({
+    url: '/api/Limit/UpdateLimitStatusPatch',
+    method: 'post',
+    data: params
+  })
+}
+
+//限流详情
+export function GetLimitById(params) {
+  return request({
+    url: '/api/Limit/GetLimitById',
+    method: 'post',
+    data: params
+  })
+}

src/styles/index.scss

@@ -142,6 +142,10 @@ li {
   margin-right: 24px;
 }
 
+.fc{
+  display: flex;
+  justify-content: center;
+}
 .right {
   text-align: right;
 }

src/views/gateway/circuit-break/index.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="gateway-circuit-break">
     <div class="gateway-circuit-break-head">
-      <Search placeholder="请输入您要搜索的内容" :isSlot="true">
-        <button class="btnAdd" @click="dialogAddShow = true">新增</button>
+      <Search
+        placeholder="请输入您要搜索的内容"
+        :isSlot="true"
+        @getSearchData="getSearchData"
+        @clearSearchData="clearSearchData"
+      >
+        <button
+          class="btnAdd"
+          @click="(dialogAddShow = true), (upName = '新增')"
+        >
+          新增
+        </button>
       </Search>
     </div>
     <div class="gateway-circuit-break-content">
@@ -11,16 +21,16 @@
           <el-col
             v-for="(
               {
-                id,
+                searchId,
                 name,
-                circuitBreakDuration,
-                timeoutPeriod,
-                circuitBreakStandard,
+                fusingtime,
+                businessouttime,
+                maxerror,
                 interfaceBinding,
               },
               index
             ) in circuitBreakList"
-            :key="id"
+            :key="searchId"
             :xs="24"
             :md="12"
             :lg="6"
@@ -29,7 +39,9 @@
             <NormalCard
               :title="name"
               :flag.sync="circuitBreakList[index].flag"
-              @close-click="removeCard(index)"
+              @update="update(searchId, circuitBreakList[index].flag)"
+              @close-click="removeCard(searchId)"
+              @editdate="editClickHandler(searchId)"
             >
               <template #default>
                 <el-row :gutter="16">
@@ -37,7 +49,7 @@
                     >熔断时间：</el-col
                   >
                   <el-col :span="5" class="card-content-right">{{
-                    circuitBreakDuration
+                    fusingtime
                   }}</el-col>
                   <el-col :span="7" class="card-content-left"
                     >接口关联：</el-col
@@ -49,13 +61,13 @@
                     >超时时间：</el-col
                   >
                   <el-col :span="17" class="card-content-right">{{
-                    timeoutPeriod
+                    businessouttime
                   }}</el-col>
                   <el-col :span="7" class="card-content-left"
                     >熔断标准：</el-col
                   >
                   <el-col :span="17" class="card-content-right">{{
-                    circuitBreakStandard
+                    maxerror
                   }}</el-col>
                 </el-row>
               </template>
@@ -72,7 +84,7 @@
       width="630px"
       @close-dialog="dialogAddShow = false"
     >
-      <div class="dialog-add-title">新增熔断配置</div>
+      <div class="dialog-add-title">{{ upName }}熔断配置</div>
       <div class="dialog-add-content">
         <el-form :model="circuitBreakAddForm" label-width="auto">
           <el-row :gutter="24">
@@ -110,7 +122,10 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="是否启用">
-                <el-radio-group v-model="circuitBreakAddForm.enable">
+                <el-radio-group
+                  v-model="circuitBreakAddForm.enable"
+                  :disabled="true"
+                >
                   <el-radio :label="true">是</el-radio>
                   <el-radio :label="false">否</el-radio>
                 </el-radio-group>
@@ -129,7 +144,7 @@
         <el-button
           size="medium"
           type="primary"
-          @click="dialogAddShow = false"
+          @click="onSubmit()"
           class="r24 blubtn"
           >提交</el-button
         >
@@ -160,7 +175,13 @@
 import Search from "@/layout/components/Search";
 import NormalCard from "../components/NormalCard";
 import Dialog from "@/layout/components/Dialog";
-import { getGatewayCircuitBreakList } from "@/api/gateway";
+import {
+  GetFusingList,
+  addFusingList,
+  DeleteFusingInfo,
+  UpdateFusingStatusPatch,
+  GetFusingById,
+} from "@/api/fusing";
 
 export default {
   name: "GatewayLimit",
@@ -173,39 +194,13 @@ export default {
     return {
       circuitBreakList: [
         {
-          id: 0,
-          name: "熔断规则名称",
-          circuitBreakDuration: 2,
-          timeoutPeriod: 2,
-          circuitBreakStandard: 3,
-          interfaceBinding: 2,
-          flag: true,
-        },
-        {
-          id: 1,
-          name: "熔断规则名称",
-          circuitBreakDuration: 2,
-          timeoutPeriod: 2,
-          circuitBreakStandard: 3,
-          interfaceBinding: 2,
-          flag: true,
-        },
-        {
-          id: 2,
-          name: "熔断规则名称",
-          circuitBreakDuration: 2,
-          timeoutPeriod: 2,
-          circuitBreakStandard: 3,
-          interfaceBinding: 2,
-          flag: true,
-        },
-        {
-          id: 3,
+          searchId: 0,
           name: "熔断规则名称",
-          circuitBreakDuration: 2,
-          timeoutPeriod: 2,
-          circuitBreakStandard: 3,
-          interfaceBinding: 2,
+          fusingtime: 2,
+          businessouttime: 2,
+          maxerror: 3,
+          businesserrorresponse: 2,
+          fusingdescribe: 2,
           flag: true,
         },
       ],
@@ -220,26 +215,149 @@ export default {
       dialogAddShow: false,
       deleteUserName: "",
       dialogVisible: false,
+      PageIndex: 1,
+      PageSize: 20,
+      pages: null,
+      loading: false,
+      searchInfo: "",
+      searchId: "",
+      upName: "",
     };
   },
   created() {
-    this.fetchData();
+    this.accountList();
   },
   methods: {
-    fetchData() {
-      this.listLoading = true;
-      getGatewayCircuitBreakList().then((response) => {
-        this.circuitBreakList.push(...response.data.items);
-        this.listLoading = false;
-      });
+    // 查询
+    getSearchData(val) {
+      this.searchInfo = val;
+      this.pageInit();
+    },
+    // 清除查询
+    clearSearchData() {
+      this.searchInfo = "";
+    },
+    // 滚动加载
+    load() {
+      this.PageIndex += 1;
+      this.accountList();
+    },
+    // 回到第一页
+    pageInit() {
+      this.PageIndex = 1;
+      this.accountArr = [];
+      this.accountList();
+    },
+    //查询熔断列表
+    async accountList() {
+      try {
+        this.loading = true;
+        const result = await GetFusingList({
+          keyword: this.searchInfo,
+          PageIndex: this.PageIndex,
+          PageSize: this.PageSize,
+        });
+        if (result.code === 0) {
+          this.loading = false;
+          const newDatas = result.returnData.data;
+          // console.log(newDatas[0])
+          // this.pages = result.returnData.pages;
+          newDatas.forEach((element) => {
+            this.circuitBreakList.push(element);
+          });
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //新增熔断
+    async onSubmit() {
+      try {
+        const result = await addFusingList({
+          fusingid: this.circuitBreakAddForm.fusingid
+            ? this.circuitBreakAddForm.fusingid
+            : "",
+          fusingtime: this.circuitBreakAddForm.circuitBreakDuration,
+          businessouttime: this.circuitBreakAddForm.timeoutPeriod,
+          maxerror: this.circuitBreakAddForm.circuitBreakStandard,
+          businesserrorresponse: this.circuitBreakAddForm.errorCode,
+          fusingdescribe: this.circuitBreakAddForm.description,
+        });
+        if (result.code === 0) {
+          this.dialogAddShow = false;
+          this.circuitBreakAddForm = {};
+          this.pageInit();
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
     },
     //删除-弹窗
-    removeCard(index) {
+    removeCard(searchId) {
       this.dialogVisible = true;
+      this.searchId = searchId;
       // this.circuitBreakList.splice(index, 1);
     },
     //删除-接口
-    del() {},
+    async del() {
+      try {
+        const result = await DeleteFusingInfo({
+          searchId: this.searchId,
+        });
+        if (result.code === 0) {
+          this.dialogVisible = false;
+          this.pageInit();
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //状态变更
+    async update(searchId, data) {
+      try {
+        const result = await UpdateFusingStatusPatch({
+          edittype: data ? 1 : 0,
+          idlist: [searchId],
+        });
+        if (result.code === 0) {
+          this.pageInit();
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //编辑详情
+    async editClickHandler(searchId) {
+      this.upName = "编辑";
+      this.dialogAddShow = true;
+      try {
+        const result = await GetFusingById({
+          searchId: searchId,
+        });
+        if (result.code === 0) {
+          this.circuitBreakAddForm.circuitBreakDuration =
+            result.data.fusingtime;
+          this.circuitBreakAddForm.timeoutPeriod = result.data.businessouttime;
+          this.circuitBreakAddForm.circuitBreakStandard = result.data.maxerror;
+          this.circuitBreakAddForm.errorCode =
+            result.data.businesserrorresponse;
+          this.circuitBreakAddForm.description = result.data.fusingdescribe;
+          this.circuitBreakAddForm.fusingid = result.data.fusingid;
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
   },
 };
 </script>

src/views/gateway/components/NormalCard/index.vue

@@ -2,6 +2,7 @@
   <div :class="['normal-card', { disabled: !flag }]">
     <div class="card-head">
       <div class="card-title">{{ title }}</div>
+      <div class="cap cap-edit" @click="editClickHandler"></div>
       <div class="card-close">
         <i class="icon el-icon-close" @click="closeClickHandler" />
       </div>
@@ -44,10 +45,14 @@ export default {
   methods: {
     switchChangeHandler(val) {
       this.$emit("update:flag", val);
+      this.$emit("update", val);
     },
     closeClickHandler() {
       this.$emit("close-click");
     },
+    editClickHandler() {
+      this.$emit("editdate");
+    },
   },
 };
 </script>
@@ -70,6 +75,25 @@ export default {
     justify-content: flex-end;
     margin-bottom: 7px;
   }
+  .cap {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-size: cover;
+    transition: all 0.3s;
+    margin-left: 10px;
+    cursor: pointer;
+    &:first-child {
+      margin-right: 0;
+    }
+  }
+  .cap-edit {
+    background-image: url("../../../../assets/status/ic_edit.png");
+    &:hover {
+      background-image: url("../../../../assets/status/ic_edit_hovar.png");
+    }
+  }
   .close {
     font-size: 12px;
     font-family: Microsoft YaHei;
@@ -85,8 +109,8 @@ export default {
 
   .card-head {
     display: flex;
-    justify-content: space-between;
-
+    // justify-content: space-between;
+    position: relative;
     .card-title {
       font-size: 18px;
       font-family: Microsoft YaHei;
@@ -99,6 +123,8 @@ export default {
       height: 11px;
       color: #303133;
       cursor: pointer;
+      position: absolute;
+      right: 10px;
     }
   }
 

src/views/gateway/limit/index.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="gateway-limit">
     <div class="gateway-limit-head">
-      <Search placeholder="请输入您要搜索的内容" :isSlot="true">
-        <button class="btnAdd" @click="dialogAddShow = true">新增</button>
+      <Search
+        placeholder="请输入您要搜索的内容"
+        :isSlot="true"
+        @getSearchData="getSearchData"
+        @clearSearchData="clearSearchData"
+      >
+        <button
+          class="btnAdd"
+          @click="(dialogAddShow = true), (upName = '新增')"
+        >
+          新增
+        </button>
       </Search>
     </div>
     <div class="gateway-limit-content">
@@ -10,9 +20,9 @@
         <el-row :gutter="24">
           <el-col
             v-for="(
-              { id, name, visitTimes, visitDuration, inBlacklist }, index
+              { searchId, name, visitTimes, apiunittime, inBlacklist }, index
             ) in limitList"
-            :key="id"
+            :key="searchId"
             :xs="24"
             :md="12"
             :lg="6"
@@ -21,7 +31,9 @@
             <NormalCard
               :title="name"
               :flag.sync="limitList[index].flag"
-              @close-click="removeCard(index)"
+              @update="update(searchId, limitList[index].flag)"
+              @close-click="removeCard(searchId)"
+              @editdate="editClickHandler(searchId)"
             >
               <el-row :gutter="16">
                 <el-col :span="12" class="card-content-left"
@@ -34,7 +46,7 @@
                   >IP访问单位时间：</el-col
                 >
                 <el-col :span="12" class="card-content-right">{{
-                  visitDuration
+                  apiunittime
                 }}</el-col>
                 <el-col :span="12" class="card-content-left"
                   >是否加入黑名单：</el-col
@@ -56,14 +68,14 @@
       width="630px"
       @close-dialog="dialogAddShow = false"
     >
-      <div class="dialog-add-title">新增限流配置</div>
+      <div class="dialog-add-title">{{ upName }}限流配置</div>
       <div class="dialog-add-content">
         <el-form :model="limitAddForm" label-width="auto">
           <el-row :gutter="24">
             <el-col :span="12">
               <el-form-item label="IP单位访问时间">
                 <el-input
-                  v-model="limitAddForm.visitDuration"
+                  v-model="limitAddForm.apiunittime"
                   placeholder="请输入访问时间"
                 />
               </el-form-item>
@@ -71,7 +83,7 @@
             <el-col :span="12">
               <el-form-item label="IP访问单位次数">
                 <el-input
-                  v-model="limitAddForm.visitTimes"
+                  v-model="limitAddForm.apiunittimecount"
                   placeholder="请输入访问次数"
                 />
               </el-form-item>
@@ -86,16 +98,16 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="是否启用">
-                <el-radio-group v-model="limitAddForm.enable">
-                  <el-radio :label="true">是</el-radio>
-                  <el-radio :label="false">否</el-radio>
+                <el-radio-group v-model="limitAddForm.enable" :disabled="true">
+                  <el-radio :label="false">是</el-radio>
+                  <el-radio :label="true">否</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
           </el-row>
           <el-form-item label="限流规则描述">
             <el-input
-              v-model="limitAddForm.description"
+              v-model="limitAddForm.trafficdescrible"
               placeholder="请输入描述"
             />
           </el-form-item>
@@ -113,6 +125,21 @@
         >
       </div>
     </Dialog>
+    <Dialog :flag="dialogVisible">
+      <div class="closeDialog">
+        <div class="title">删除限流配置</div>
+        <div class="content">是否确定要删除{{ deleteUserName }}？</div>
+        <div class="foot right t30">
+          <el-button size="medium" type="danger" class="r24" @click="del()"
+            >删除</el-button
+          >
+
+          <el-button size="medium" @click="dialogVisible = false"
+            >取消</el-button
+          >
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -120,7 +147,13 @@
 import Search from "@/layout/components/Search";
 import NormalCard from "../components/NormalCard";
 import Dialog from "@/layout/components/Dialog";
-import { getGatewayLimitList } from "@/api/gateway";
+import {
+  GetLimitList,
+  EditLimitInfo,
+  DeleteLimitInfo,
+  UpdateLimitStatusPatch,
+  GetLimitById,
+} from "@/api/gateway";
 
 export default {
   name: "GatewayLimit",
@@ -136,35 +169,159 @@ export default {
           id: 0,
           name: "访问规则名称",
           visitTimes: 21090,
-          visitDuration: 21,
+          apiunittime: 21,
           inBlackList: true,
           flag: true,
         },
       ],
       limitAddForm: {
-        visitTimes: "",
-        visitDuration: "",
-        inBlacklist: true,
+        apiunittime: "",
+        apiunittimecount: "",
+        iptoblack: true,
         enable: true,
-        description: "",
+        trafficdescrible: "",
       },
       dialogAddShow: false,
+      deleteUserName: "",
+      dialogVisible: false,
+      PageIndex: 1,
+      PageSize: 20,
+      pages: null,
+      loading: false,
+      searchInfo: "",
+      searchId: "",
+      upName: "",
     };
   },
   created() {
-    this.fetchData();
+    this.accountList();
   },
   methods: {
-    fetchData() {
-      this.listLoading = true;
-      getGatewayLimitList().then((response) => {
-        this.limitList.push(...response.data.items);
-        console.log(this.limitList);
-        this.listLoading = false;
-      });
+    // 查询
+    getSearchData(val) {
+      this.searchInfo = val;
+      this.pageInit();
+    },
+    // 清除查询
+    clearSearchData() {
+      this.searchInfo = "";
     },
-    removeCard(index) {
-      this.limitList.splice(index, 1);
+    // 滚动加载
+    load() {
+      this.PageIndex += 1;
+      this.accountList();
+    },
+    //查询列表
+    async accountList() {
+      try {
+        this.loading = true;
+        const result = await GetLimitList({
+          keyword: this.searchInfo,
+          PageIndex: this.PageIndex,
+          PageSize: this.PageSize,
+        });
+        if (result.code === 0) {
+          this.loading = false;
+          const newDatas = result.returnData.data;
+          // console.log(newDatas[0])
+          // this.pages = result.returnData.pages;
+          newDatas.forEach((element) => {
+            this.circuitBreakList.push(element);
+          });
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    // 回到第一页
+    pageInit() {
+      this.PageIndex = 1;
+      this.accountArr = [];
+      this.accountList();
+    },
+    //新增熔断
+    async onSubmit() {
+      try {
+        const result = await EditLimitInfo({
+          trafficid: this.limitAddForm.trafficid
+            ? this.limitAddForm.trafficid
+            : "",
+          apiunittime: this.limitAddForm.apiunittime,
+          apiunittimecount: this.limitAddForm.apiunittimecount,
+          iptoblack: this.limitAddForm.inBlacklist ? 1 : 0,
+          trafficdescrible: this.limitAddForm.trafficdescrible,
+        });
+        if (result.code === 0) {
+          this.dialogAddShow = false;
+          this.limitAddForm = {};
+          this.pageInit();
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //删除-弹窗
+    removeCard(searchId) {
+      this.dialogVisible = true;
+      this.searchId = searchId;
+      // this.circuitBreakList.splice(index, 1);
+    },
+    //删除-接口
+    async del() {
+      try {
+        const result = await DeleteLimitInfo({
+          searchId: this.searchId,
+        });
+        if (result.code === 0) {
+          this.dialogVisible = false;
+          this.pageInit();
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //状态变更
+    async update(searchId, data) {
+      try {
+        const result = await UpdateLimitStatusPatch({
+          edittype: data ? 1 : 0,
+          idlist: [searchId],
+        });
+        if (result.code === 0) {
+          this.pageInit();
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //编辑详情
+    async editClickHandler(searchId) {
+      this.upName = "编辑";
+      this.dialogAddShow = true;
+      try {
+        const result = await GetLimitById({
+          searchId: searchId,
+        });
+        if (result.code === 0) {
+          this.limitAddForm.trafficid = result.data.trafficid;
+          this.limitAddForm.apiunittime = result.data.apiunittime;
+          this.limitAddForm.apiunittimecount = result.data.apiunittimecount;
+          this.limitAddForm.iptoblack = result.data.iptoblack;
+          this.limitAddForm.trafficdescrible = result.data.trafficdescrible;
+        } else {
+          this.$message.error(result.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
     },
   },
 };