卡口管理还原

zhanghua

2022-11-29 759ed15af8f9d423dc882337f8536d4bb76e7f57

卡口管理还原

 src/api/system/bayonet.js

@@ -4,7 +4,7 @@
        return http.get('/sccg/equipment_bayonet/query', params);
    },
    exportBayonetList: (params) => {
        return http.downloadFile('/sccg/equipment_bayonet/export', params);
        return http.post('/sccg/equipment_bayonet/export', params);
    },
    addBayonet: (params) => {
        return http.post('/sccg/equipment_bayonet/addition', params);

 src/views/systemSetting/device/bayonet/create/index.vue

@@ -1,206 +1,305 @@
<template>
    <div class="create">
        <el-form ref="device" label-position="right" label-width="120px" :model="bayonet" :rules="rules">
            <!-- 卡口名称 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="卡口名称:" prop="bayonetName">
                        <el-input v-model="bayonet.bayonetName" placeholder="请填写卡口名称"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 经纬度位置 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="经纬度位置:" prop="longitude">
                        <el-input v-model="bayonet.longitude" placeholder="请填写经度位置"></el-input>
                    </el-form-item>
                    <el-form-item prop="latitude">
                        <el-input v-model="bayonet.latitude" placeholder="请填写纬度位置"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 所属区域 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="所属区域:" prop="belongArea">
                        <el-input v-model="bayonet.belongArea" placeholder="请填写区域名称"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 域名/ip -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="域名/IP:" prop="ipAddress">
                        <el-input v-model="bayonet.ipAddress" placeholder="请填写域名或者IP"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 端口号 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="端口号:" prop="port">
                        <el-input v-model="bayonet.port" placeholder="请输入端口号"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 前端类型 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="前端类型:" prop="frontEndType">
                        <el-input v-model="bayonet.frontEndType" placeholder="请输入前端类型"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 出入城类型 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="出入城类型:" prop="inOutCityType">
                        <el-input v-model="bayonet.inOutCityType" placeholder="出城/入城"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 描述 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="描述:" prop="description">
                        <el-input type="textarea" :rows='5' maxlength="200" v-model="bayonet.description" placeholder="请输入描述内容200字以内"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 按钮 -->
            <div class="device-btn">
                <el-button @click="closeDialog">返回</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </div>
        </el-form>
    </div>
  <div class="create">
    <el-form
      ref="device"
      label-position="right"
      label-width="120px"
      :model="bayonet"
      :rules="rules"
    >
      <!-- 卡口名称 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="卡口名称:" prop="name">
            <el-input
              v-model="bayonet.name"
              placeholder="请填写卡口名称"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 经纬度位置 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="经纬度位置:" prop="longitude">
            <el-input
              v-model="bayonet.longitude"
              placeholder="请填写经度位置"
            ></el-input>
          </el-form-item>
          <el-form-item prop="latitude">
            <el-input
              v-model="bayonet.latitude"
              placeholder="请填写纬度位置"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 所属区域 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="所属区域:" prop="belongArea">
            <el-input
              v-model="bayonet.belongArea"
              placeholder="请填写区域名称"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 域名/ip -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="域名/IP:" prop="ipAddress">
            <el-input
              v-model="bayonet.ipAddress"
              placeholder="请填写域名或者IP"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 端口号 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="端口号:" prop="port">
            <el-input
              v-model="bayonet.port"
              placeholder="请输入端口号"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 前端类型 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item class="optionItem" label="前端类型:" prop="role">
            <el-select
              v-model="bayonet.frontEndType"
              placeholder="请输入前端类型"
              collapse-tags
            >
              <el-option
                v-for="item in frontEndTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 出入城类型 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item class="optionItem" label="出入城类型:" prop="role">
            <el-select
              v-model="bayonet.inOutCityType"
              placeholder="请输入出入城类型"
              collapse-tags
            >
              <el-option
                v-for="item in inOutTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 描述 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="描述:" prop="description">
            <el-input
              type="textarea"
              :rows="5"
              maxlength="200"
              v-model="bayonet.description"
              placeholder="请输入描述内容200字以内"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 按钮 -->
      <div class="device-btn">
        <el-button @click="closeDialog">返回</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import bayonet from "@/api/system/bayonet";
import { deepClone } from "@/utils/helper";
import { deepClone, getTypeList } from "@/utils/helper";

export default {
  props: {
    originalBayonet: {
      type: Object,
      default: () => {}
      default: () => {},
    },
    isEdit: {
      type: Boolean,
      default: () => false
    }
      default: () => false,
    },
  },

  data() {
      return {
          bayonet: {
              bayonetName: '',
              latitude: '',
              longitude: '',
              belongArea: '',
              ipAddress: '',
              port: '',
              frontEndType: '',
              inOutCityType: '',
              description: ''
    return {
      bayonet: {
        name: "",
        latitude: "",
        longitude: "",
        belongArea: "",
        ipAddress: "",
        port: "",
        frontEndType: "",
        inOutCityType: "",
        description: "",
      },
      rules: {
        name: [{ required: true, trigger: "blur", message: "请填写卡口名称" }],
        latitude: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写纬度位置",
          },
          rules: {
            bayonetName: [{ required: true, trigger: 'blur', message: '请填写卡口名称' }],
            latitude: [{ required: true, trigger: ['blur', 'change'], message: '请填写纬度位置' }],
            longitude: [{ required: true, trigger: ['blur', 'change'], message: '请填写经度位置' }],
            belongArea: [{ required: true, trigger: ['blur', 'change'], message: '请填写区域名称' }],
            ipAddress: [{ required: true, trigger: ['blur', 'change'], message: '请填写域名或者IP' }],
            port: [{ required: true, trigger: ['blur', 'change'], message: '请输入端口号' }],
            frontEndType: [{ required: true, trigger: ['blur', 'change'], message: '请输入前端类型' }],
            inOutCityType: [{ required: true, trigger: ['blur', 'change'], message: '请填写出城/入城' }],
            description: [{ required: true, trigger: ['blur', 'change'], message: '请输入描述内容' }]
          }
      }
        ],
        longitude: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写经度位置",
          },
        ],
        belongArea: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写区域名称",
          },
        ],
        ipAddress: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写域名或者IP",
          },
        ],
        port: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入端口号",
          },
        ],
        frontEndType: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入前端类型",
          },
        ],
        inOutCityType: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写出城/入城",
          },
        ],
      },
      frontEndTypeList: [],
      inOutTypeList: [],
    };
  },

  beforeCreate() {},
  created() {
    this.bayonet = deepClone(this.originalBayonet);
    this.getInOutCityTypeList();
    this.getFrontEndTypeList();
    if (this.originalBayonet) {
      this.bayonet.bayonetName = this.originalBayonet.name;
      this.bayonet = this.originalBayonet;
    }
  },

  methods: {
      onSubmit() {
        this.$refs.device.validate(valid => {
          if (valid) {
            this.bayonet.longitude = Number(this.bayonet.longitude);
            this.bayonet.latitude = Number(this.bayonet.latitude);
            this.bayonet.inOutCityType = Number(this.bayonet.inOutCityType);
            this.bayonet.belongArea = Number(this.bayonet.belongArea);
            const copyBayonet = deepClone(this.bayonet);
            delete copyBayonet.id;
            if (!this.isEdit) {
              bayonet.addBayonet(this.bayonet)
                  .then(() => {
                    this.$message({ type: 'success', message: '操作成功' });
                    this.$emit('closeDialog');
                  })
                  .catch(err => {
                    this.$message({ type: 'error', message: err });
                  })
            } else {
              bayonet.updateBayonet(copyBayonet)
                  .then(() => {
                    this.$message({ type: 'success', message: '操作成功' });
                    this.$emit('closeDialog');
                  })
                  .catch(err => {
                    this.$message({ type: 'error', message: err });
                  })
            }
    onSubmit() {
      this.$refs.device.validate((valid) => {
        if (valid) {
          const copyBayonet = deepClone(this.bayonet);
          if (!this.isEdit) {
            bayonet
              .addBayonet(this.bayonet)
              .then(() => {
                this.$message({ type: "success", message: "操作成功" });
                this.$emit("closeDialog");
              })
              .catch((err) => {
                this.$message({ type: "error", message: err });
              });
          } else {
           this.$message({ type: 'warning', message: '请检查必填项' });
            bayonet
              .updateBayonet(copyBayonet)
              .then(() => {
                this.$message({ type: "success", message: "操作成功" });
                this.$emit("closeDialog");
              })
              .catch((err) => {
                this.$message({ type: "error", message: err });
              });
          }
        });
      },
        } else {
          this.$message({ type: "warning", message: "请检查必填项" });
        }
      });
    },
    async getInOutCityTypeList() {
      this.inOutTypeList = await getTypeList(1, "14");
    },

      closeDialog() {
        this.$emit('closeDialog');
      }
  }

}
    async getFrontEndTypeList() {
      this.frontEndTypeList = await getTypeList(1, "13");
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>
<style lang="scss" scoped>
.create {
    padding: 20px;
  padding: 20px;

    .device-item {
        display: flex;
  .device-item {
    display: flex;

        .item-left {
            flex: 6;
            display: flex;
    .item-left {
      flex: 6;
      display: flex;

            .el-form-item {
                flex: 1;
            }
        }

        .item-right {
            flex: 4;
        }
      .el-form-item {
        flex: 1;
      }
    }

    .device-btn {
        padding-top: 20px;
        display: flex;
        justify-content: center;
    .item-right {
      flex: 4;
    }
  }

  .device-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>

 src/views/systemSetting/device/bayonet/index.vue

@@ -1,291 +1,342 @@
<template>
    <div class="userList">
        <header>
            <div class="header-content">
                <div class="search">
                    <span style="padding-right:20px">筛选条件:</span>
                    <el-select v-model="context" placeholder="请选择" @change="getBayonetListData">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </header>
        <main>
            <div class="main-content">
                <div class="main-title">
                    <el-button class="el-icon-plus" type="primary" @click="showDialog(false, null)">添加</el-button>
                    <el-button @click="handleExport">导出卡口</el-button>
                </div>
                <!-- 数据展示 -->
                <MyTable
                    :tableOption="tableOption" 
                    :tableData="list" 
                    :pageShow="false">
                    <template #operation="info">
                        <el-link :underline="false" style="color:#4b9bb7" @click="showDialog(true, info)">编辑</el-link>
                    </template>
                </MyTable>
            </div>
        </main>
        <footer>
            <!-- 添加卡口 -->
            <el-dialog :destroy-on-close="true" :title="getDialogTitle" :visible.sync="isShowDialog" width="60%" :before-close="handleClose">
                <MyCreate v-if="isShowDialog" @closeDialog="closeDialog" :originalBayonet="originalBayonet" :isEdit="isEdit"></MyCreate>
            </el-dialog>
        </footer>
    </div>
  <div class="userList">
    <header>
      <div class="header-content">
        <div class="search">
          <span style="padding-right: 20px">筛选条件:</span>
          <el-select
            v-model="context"
            placeholder="请选择"
            @change="getBayonetListData"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </header>
    <main>
      <div class="main-content">
        <div class="main-title">
          <el-button
            class="el-icon-plus"
            type="primary"
            @click="showDialog(false, null)"
            >添加</el-button
          >
          <el-button @click="handleExport">导出卡口</el-button>
        </div>
        <!-- 数据展示 -->
        <MyTable :tableOption="tableOption" :tableData="list" :pageShow="false">
          <template #operation="info">
            <el-link
              :underline="false"
              style="color: #4b9bb7"
              @click="showDialog(true, info)"
              >编辑</el-link
            >

            <span class="line">|</span>
            <el-link
              :underline="false"
              style="color: #4b9bb7"
              @click="handleDelete(info)"
              >删除</el-link
            >
          </template>
        </MyTable>
      </div>
    </main>
    <footer>
      <!-- 添加卡口 -->
      <el-dialog
        :destroy-on-close="true"
        :title="getDialogTitle"
        :visible.sync="isShowDialog"
        width="60%"
        :before-close="handleClose"
      >
        <MyCreate
          v-if="isShowDialog"
          @closeDialog="closeDialog"
          :originalBayonet="originalBayonet"
          :isEdit="isEdit"
        ></MyCreate>
      </el-dialog>
    </footer>
  </div>
</template>
<script>
import MyCreate from './create'
import MyTable from '@/components/Table'
import MyCreate from "./create";
import MyTable from "@/components/Table";
import bayonet from "@/api/system/bayonet";
import { downloadFile } from "@/utils/helper";

export default {
    components: {
        MyCreate, MyTable,
  components: {
    MyCreate,
    MyTable,
  },
  data() {
    return {
      isShowDialog: false,
      context: 0,
      options: [
        {
          value: 0,
          label: "离线",
        },
        {
          value: 1,
          label: "在线",
        },
      ],
      list: [],
      current: 1,
      size: 10,
      tableOption: {
        group: [
          {
            label: "卡口名称",
            type: "text",
            prop: "name",
          },
          {
            label: "域名/IP",
            type: "text",
            prop: "ipAddress",
          },
          {
            label: "端口号",
            type: "text",
            prop: "port",
          },
          {
            label: "前端类型",
            type: "text",
            prop: "frontEndTypeName",
          },
          {
            label: "出入城类型",
            type: "text",
            prop: "inOutCityTypeName",
          },
          {
            label: "操作",
            type: "operation",
            prop: "operation",
          },
        ],
      },
      originalBayonet: null,
      isEdit: false,
    };
  },

  computed: {
    getDialogTitle() {
      return this.isEdit ? "编辑卡口" : "新建卡口";
    },
    data() {
        return {
            isShowDialog: false,
            context: null,
            options: [
                {
                    value: 0,
                    label: '离线',
                },
                {
                    value: 1,
                    label: '在线',
                }
            ],
            list: [],
            current: 1,
            size: 10,
            tableOption: {
                group: [
                    {
                        label: '卡口名称',
                        type: 'text',
                        prop: 'bayonetName',
                    },
                    {
                        label: '经纬度位置',
                        type: 'text',
                        prop: 'latitude',
                    },
                    {
                        label: '域名/IP',
                        type: 'text',
                        prop: 'ipAddress',
                    },
                    {
                        label: '端口号',
                        type: 'text',
                        prop: 'port',
                    },
                    {
                        label: '前端类型',
                        type: 'text',
                        prop: 'frontEndType',
                    },
                    {
                        label: '出入城类型',
                        type: 'text',
                        prop: 'inOutCityType',
                    },
                    {
                        label: '操作',
                        type: 'operation',
                        prop: 'operation',
                    },
                ]
            },
          originalBayonet: null,
          isEdit: false
        }
  },
  created() {
    this.getBayonetListData();
  },
  methods: {
    getBayonetListData() {
      bayonet
        .getBayonetList({
          bayonetName: "",
          current: this.current,
          size: this.size,
        })
        .then(({ records }) => {
          this.list = records;
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭?").then((_) => {
        done();
      });
    },

    computed: {
      getDialogTitle() {
        return this.isEdit ? '编辑卡口' : '新建卡口';
      },
    },
    created() {
    closeDialog() {
      this.isShowDialog = false;
      this.getBayonetListData();
    },
    methods: {
      getBayonetListData() {
        bayonet.getBayonetList({ bayonetName: this.context, current: this.current, size: this.size })
            .then(({ records }) => {
              this.list = records;
            })
            .catch(err => {
              this.$message({ type: 'error', message: err });
            })
      },
      // 弹窗关闭
      handleClose(done) {
          this.$confirm('确认关闭?')
              .then(_ => {
                  done();
              })
      },

      closeDialog() {
        this.isShowDialog = false;
        this.getBayonetListData();
      },

      handleExport() {
        bayonet.exportBayonetList({ bayonetName: this.context, current: this.current, size: this.size })
            .then(res => {
              downloadFile(res);
              this.$message({ type: 'success', message: '操作成功' });
            })
            .catch(err => {
              this.$message({ type: 'error', message: err });
            })
      },
      showDialog(isEdit, data) {
        this.isShowDialog = true;
        this.isEdit = isEdit;
        this.originalBayonet = data.info.row;
      }
    }
}
    handleExport() {
      bayonet
        .exportBayonetList({
          bayonetName: this.context,
          current: this.current,
          size: this.size,
        })
        .then((res) => {
          downloadFile(res);
          this.$message({ type: "success", message: "操作成功" });
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
    handleDelete(data) {
      this.$confirm("确认删除？").then((_) => {
        bayonet.deleteBayonet(data.info.row.id).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getBayonetListData();
        });
      });
    },
    showDialog(isEdit, data) {
      this.isShowDialog = true;
      this.isEdit = isEdit;
      this.originalBayonet = data ? data.info.row : null;
    },
  },
};
</script>
<style lang="scss" scoped>
.userList {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;
  text-align: left;
  margin: 10px 20px;
  color: #4b9bb7;

    header {
        background-color: #09152f;
  header {
    background-color: #09152f;

        .header-content {
            padding: 0 40px;
            display: flex;
            line-height: 100px;
            justify-content: space-between;
            align-items: center;
    .header-content {
      padding: 0 40px;
      display: flex;
      line-height: 100px;
      justify-content: space-between;
      align-items: center;

            .search {
                display: flex;
                justify-content: flex-start;
      .search {
        display: flex;
        justify-content: flex-start;

                span {
                    flex: 1;
                }

                .el-input {
                    flex: 2;
                    color: #1d3f57;

                    &::v-deep .el-input__inner {
                        background-color: #09152f;
                        border: 1px solid #17324c;
                    }
                }

            }
        span {
          flex: 1;
        }

        .el-input {
          flex: 2;
          color: #1d3f57;

          &::v-deep .el-input__inner {
            background-color: #09152f;
            border: 1px solid #17324c;
          }
        }
      }
    }
  }

  main {
    background-color: #09152f;
    margin-top: 20px;
    padding-bottom: 50px;

    .main-title {
      line-height: 60px;
      padding: 10px 20px;
    }

    main {
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
    .tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

        .main-title {
            line-height: 60px;
            padding: 10px 20px;
        }
      .funs {
        display: flex;

        .tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        .funsItem {
          line-height: 28px;
          display: flex;
          align-items: center;
          border: 1px solid #17324c;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 10px;

            .funs {
                display: flex;
          .el-checkbox {
            width: 80px;
            padding: 0 10px;
          }

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    border-radius: 4px;
                    font-size: 12px;
                    margin-left: 10px;
          .el-select {
            width: 120px;
          }

                    .el-checkbox {
                        width: 80px;
                        padding: 0 10px;
                    }
          &::v-deep .el-input__inner {
            border: none;
            background-color: #09152f;
          }

                    .el-select {
                        width: 120px;
                    }
          &:hover {
            border: 1px solid #4b9bb7;
          }

                    &::v-deep .el-input__inner {
                        border: none;
                        background-color: #09152f;
                    }

                    &:hover {
                        border: 1px solid #4b9bb7;
                    }

                    &:hover .el-checkbox {
                        color: #4b9bb7;
                    }
                }

            }

            .pagination {
                margin-top: 50px;
                display: flex;
                line-height: 50px;
                justify-content: center;

                .el-pagination {

                    &::v-deep li,
                    &::v-deep .btn-prev,
                    &::v-deep .btn-next {
                        background-color: #071f39;
                        color: #4b9bb7;
                    }

                    &::v-deep .active {
                        background-color: #409eff;
                        color: #fff;
                    }
                }
            }
        }

        .el-table {
          &:hover .el-checkbox {
            color: #4b9bb7;
            font-size: 10px;

            .operation {
                display: flex;

                .line {
                    padding: 0 5px;
                }

                span:hover {
                    cursor: pointer;
                }
            }
          }
        }
      }

      .pagination {
        margin-top: 50px;
        display: flex;
        line-height: 50px;
        justify-content: center;

        .el-pagination {
          &::v-deep li,
          &::v-deep .btn-prev,
          &::v-deep .btn-next {
            background-color: #071f39;
            color: #4b9bb7;
          }

          &::v-deep .active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }

    .el-table {
      color: #4b9bb7;
      font-size: 10px;

      .cell {
        display: flex;

        &::v-deep .line {
          padding: 0 5px;
        }

        span:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.line {
  padding: 0 5px;
}
</style>