Foshan4A4.0/src/views/gateway/limit/index.vue

<template>
  <div class="gateway-limit">
    <div class="gateway-limit-head">
      <Search placeholder="请输入您要搜索的内容" :isSlot="true">
        <button class="btnAdd" @click="dialogAddShow = true">新增</button>
      </Search>
    </div>
    <div class="gateway-limit-content">
      <template v-if="limitList.length">
        <el-row :gutter="24">
          <el-col
            v-for="(
              { id, name, visitTimes, visitDuration, inBlacklist }, index
            ) in limitList"
            :key="id"
            :xs="24"
            :md="12"
            :lg="6"
            :xl="6"
          >
            <NormalCard
              :title="name"
              :flag.sync="limitList[index].flag"
              @close-click="removeCard(index)"
            >
              <el-row :gutter="16">
                <el-col :span="12" class="card-content-left"
                  >IP访问单位次数：</el-col
                >
                <el-col :span="12" class="card-content-right">{{
                  visitTimes
                }}</el-col>
                <el-col :span="12" class="card-content-left"
                  >IP访问单位时间：</el-col
                >
                <el-col :span="12" class="card-content-right">{{
                  visitDuration
                }}</el-col>
                <el-col :span="12" class="card-content-left"
                  >是否加入黑名单：</el-col
                >
                <el-col :span="12" class="card-content-right">{{
                  inBlacklist ? "是" : "否"
                }}</el-col>
              </el-row>
            </NormalCard>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <el-empty description="暂无数据" />
      </template>
    </div>
    <Dialog
      :flag="dialogAddShow"
      width="630px"
      @close-dialog="dialogAddShow = false"
    >
      <div class="dialog-add-title">新增限流配置</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"
                  placeholder="请输入访问时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="IP访问单位次数">
                <el-input
                  v-model="limitAddForm.visitTimes"
                  placeholder="请输入访问次数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否加入黑名单">
                <el-radio-group v-model="limitAddForm.inBlacklist">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </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>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="限流规则描述">
            <el-input
              v-model="limitAddForm.description"
              placeholder="请输入描述"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-add-bottom center">
        <el-button size="medium" type="primary" @click="dialogAddShow = false"
          >提交</el-button
        >
        <el-button
          size="medium"
          class="btn-cancel"
          @click="dialogAddShow = false"
          >取消</el-button
        >
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from "@/layout/components/Search";
import NormalCard from "../components/NormalCard";
import Dialog from "@/layout/components/Dialog";
import { getGatewayLimitList } from "@/api/gateway";

export default {
  name: "GatewayLimit",
  components: {
    Search,
    NormalCard,
    Dialog,
  },
  data() {
    return {
      limitList: [
        {
          id: 0,
          name: "访问规则名称",
          visitTimes: 21090,
          visitDuration: 21,
          inBlackList: true,
          flag: true,
        },
      ],
      limitAddForm: {
        visitTimes: "",
        visitDuration: "",
        inBlacklist: true,
        enable: true,
        description: "",
      },
      dialogAddShow: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getGatewayLimitList().then((response) => {
        this.limitList.push(...response.data.items);
        console.log(this.limitList);
        this.listLoading = false;
      });
    },
    removeCard(index) {
      this.limitList.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.gateway-limit-head {
  display: flex;
  justify-content: flex-end;
}

.gateway-limit-content {
  margin-top: 32px;
  height: calc(100vh - 224px);
  overflow-x: hidden;
  overflow-y: auto;

  & > .el-row > .el-col {
    margin-bottom: 24px;
  }

  ::v-deep .normal-card .card-content {
    & > .el-row > .el-col {
      margin-top: 21px;

      &:nth-child(1),
      &:nth-child(2) {
        margin-top: 0;
      }
    }

    .card-content-left {
      word-break: keep-all;
    }

    .card-content-right {
      color: #909399;
      word-break: break-all;
    }
  }
}

.dialog-add-title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.dialog-add-content {
  margin-top: 48px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;

  ::v-deep .el-input .el-input__inner {
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
  }
}

.dialog-add-bottom {
  margin-top: 48px;
}
</style>