WanZai_School/src/views/screenShot/screenShot.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">截屏风险</span>
    </div>
    <div class="middle">
      <div class="filter">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-change="handleClick"
        >
          <el-tab-pane label="规则" name="1">
            <div class="footer">
              <el-table
                :row-class-name="tableRowClassName"
                :data="ruleData.list"
                @selection-change="handleSelectionChange"
                style="width: 100%"
                :header-cell-style="{
                  background: 'rgba(240, 243, 247, 1)',
                  height: '50px',
                  border: 0,
                }"
              >
                <el-table-column
                  width="250"
                  align="center "
                  prop="screenshotNum"
                  label="近一年截屏次数"
                />
                <el-table-column
                  align="center"
                  prop="triggers"
                  label="触发惩罚"
                >
                  <template #default="scope">
                    <div class="triggers" v-if="scope.row.triggers == 0">
                      身份码提醒
                    </div>
                    <div class="triggers" v-if="scope.row.triggers == 1">
                      冻结1小时
                    </div>
                    <div class="triggers" v-if="scope.row.triggers == 2">
                      冻结2小时
                    </div>
                    <div class="triggers" v-if="scope.row.triggers == 3">
                      冻结4小时
                    </div>
                    <div class="triggers" v-if="scope.row.triggers == 4">
                      冻结8小时
                    </div>
                    <div class="triggers" v-if="scope.row.triggers == 5">
                      冻结1天
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200">
                  <template #default="scope">
                    <div class="del" @click="editClick(scope.row)">编辑</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pageSize">
              <span></span>
              <el-pagination
                background
                :current-page="currentPageRule"
                :page-size="pageSizeRule"
                layout="total, prev, pager, next, jumper, slot"
                :total="totalRule"
                @update:current-page="handleCurrentChangeRule"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="截屏记录" name="2">
            <div class="footer">
              <el-table
                :row-class-name="tableRowClassName"
                :data="recordData.list"
                style="width: 100%"
                :header-cell-style="{
                  background: 'rgba(240, 243, 247, 1)',
                  height: '50px',
                  border: 0,
                }"
              >
                <el-table-column
                  width="150"
                  align="center "
                  type="index"
                  label="序号"
                />
                <el-table-column
                  width="250"
                  align="center "
                  prop="cardNo"
                  label="用户编号"
                />
                <el-table-column
                  align="center"
                  prop="userName"
                  label="用户姓名"
                />
                <el-table-column
                  align="center"
                  prop="createTime"
                  label="创建时间"
                />
                <el-table-column align="center" label="操作" width="200">
                  <template #default="scope">
                    <div
                      v-if="scope.row.isShow == 1"
                      class="del"
                      @click="freezeClick(scope.row)"
                    >
                      冻结
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pageSize">
              <span></span>
              <el-pagination
                background
                :current-page="currentPageRecord"
                :page-size="pageSizeRecord"
                layout="total, prev, pager, next, jumper, slot"
                :total="totalRecord"
                @update:current-page="handleCurrentChangeRecord"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane class="freezeList" label="已冻结名单" name="3">
            <div class="searchInp">
              <div class="sel">
                <el-input
                  :clearable="true"
                  @clear="searchBtn"
                  v-model="freezeListSel"
                  placeholder="请输入关键字"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon"><search /></el-icon>
                  </template>
                </el-input>
                <el-button
                  color="rgba(0, 97, 255, 1)"
                  type="primary"
                  class="search"
                  @click="searchBtn"
                >
                  查询</el-button
                >
              </div>
              <el-button
                type="primary"
                color="rgba(0, 97, 255, 1)"
                plain
                @click="importExcel"
                ><span>导出</span></el-button
              >
            </div>
            <div class="footers">
              <el-table
                :row-class-name="tableRowClassName"
                :data="freezeListData.list"
                style="width: 100%"
                :header-cell-style="{
                  background: 'rgba(240, 243, 247, 1)',
                  height: '50px',
                  border: 0,
                }"
              >
                <el-table-column
                  width="150"
                  align="center "
                  type="index"
                  label="序号"
                />
                <el-table-column
                  width="250"
                  align="center "
                  prop="cardNo"
                  label="编号"
                />
                <el-table-column
                  align="center"
                  prop="userName"
                  label="用户姓名"
                />
                <el-table-column align="center" prop="typeStr" label="冻结方式">
                  <template #default="scope">
                    <span v-if="scope.row.typeStr == 0">永久冻结</span>
                    <span v-if="scope.row.typeStr == 1">指定时间</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200">
                  <template #default="scope">
                    <div class="defrost">
                      <el-popconfirm
                        width="220"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#f89626"
                        title="是否解冻此用户?"
                        @confirm="defrost(scope.row)"
                      >
                        <template #reference>
                          <div class="del">解冻</div>
                        </template>
                      </el-popconfirm>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pageSize">
              <span></span>
              <el-pagination
                background
                :current-page="currentPageFreezeList"
                :page-size="pageSizeFreezeList"
                layout="total, prev, pager, next, jumper, slot"
                :total="totalFreezeList"
                @update:current-page="handleCurrentChangeFreezeList"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--规则 编辑按钮 -->
    <el-dialog
      class="editDialog"
      v-model="editVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑"
      align-center
      width="500"
      :before-close="cancelEdit"
    >
      <el-form
        ref="editRuleRef"
        :model="editRuleForm"
        :rules="editRules"
        label-width="90px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="left"
        status-icon
      >
        <el-form-item label="截屏次数 :" prop="screenshotNum">
          <span
            >近一年截屏次数到达
            <el-input
              v-model="editRuleForm.screenshotNum"
              placeholder="请输入截屏次数"
              clearable
              style="width: 150px"
            />
            次</span
          >
        </el-form-item>
        <el-form-item label="触发惩罚 :" prop="trigger">
          <el-select
            v-model="editRuleForm.trigger"
            class="m-2"
            placeholder="请选择触发惩罚"
            style="width: 300px"
          >
            <el-option v-for="i in ruleList" :label="i.name" :value="i.id" />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmEdit(editRuleRef)"
        >
          确认
        </el-button>
        <el-button @click="cancelEdit(editRuleRef)">取消</el-button>
      </div>
    </el-dialog>

    <!--截屏记录 冻结按钮 -->
    <el-dialog
      class="freezeDialog"
      v-model="freezeVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑"
      align-center
      width="500"
      :before-close="cancelFreeze"
    >
      <el-form
        ref="freezeRef"
        :model="freezeRuleForm"
        :rules="freezeRules"
        label-width="90px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="left"
        status-icon
      >
        <el-form-item label="冻结方式 :" prop="type">
          <el-radio-group v-model="freezeRuleForm.type">
            <el-radio :label="0">永久冻结</el-radio>
            <el-radio :label="1">指定时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="截止时间 :"
          :prop="freezeRuleForm.type == 0 ? '' : 'time'"
        >
          <el-date-picker
            v-model="freezeRuleForm.time"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
            @change="changeTime"
          />
        </el-form-item>
        <el-form-item label="冻结原因 :" prop="reason">
          <el-input
            v-model="freezeRuleForm.reason"
            :rows="4"
            show-word-limit
            maxlength="100"
            type="textarea"
            placeholder="请输入冻结原因"
          />
        </el-form-item>

        <el-form-item class="options">
          <el-button
            color="rgba(41, 109, 227, 1)"
            class="queding"
            type="primary"
            @click="confirmFreeze(freezeRef)"
          >
            确认
          </el-button>
          <el-button @click="cancelFreeze(freezeRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 头部切换按钮
const activeName = ref("1");

// 规则表格数据 (-------------------------------------------------------------)
const loading = ref(false);
const ruleData = reactive({
  list: [],
});
const currentPageRule = ref(1); // 当前页
const pageSizeRule = ref(10);
const totalRule = ref(15); // 当前总数
const ruleList = ref(); // 规则列表

// 编辑规则功能
const editVisible = ref(false);
const editRuleRef = ref();
const editRuleForm = reactive({
  trigger: "", // 选择触发惩罚
  screenshotNum: "", // 次数
  id: "",
});
const editRules = reactive({
  trigger: [{ required: true, message: "触发惩罚不能为空", trigger: "blur" }],
  screenshotNum: [
    {
      required: true,
      message: "截屏次数不能为空",
      trigger: "blur",
    },
  ],
});

// 截屏记录表格数据 (-------------------------------------------------------------)
const recordData = reactive({
  list: [],
});
const currentPageRecord = ref(1); // 当前页
const pageSizeRecord = ref(10);
const totalRecord = ref(15); // 当前总数
// 冻结功能
const freezeVisible = ref(false);
const freezeRef = ref();
const freezeRuleForm = reactive({
  type: 1,
  time: "",
  reason: "",
  userId: "",
});
// 表单验证
const freezeRules = reactive({
  type: [{ required: true, message: "冻结方式不能为空", trigger: "blur" }],
  time: [
    {
      required: true,
      message: "截止时间不能为空",
      trigger: "blur",
    },
  ],
  // reason: [
  //   {
  //     required: true,
  //     message: "冻结原因不能为空",
  //     trigger: "blur",
  //   },
  // ],
});

// 已冻结名单 (----------------------------------------------------------)
const freezeListSel = ref();
const freezeListData = reactive({
  list: [],
});
const currentPageFreezeList = ref(1); // 当前页
const pageSizeFreezeList = ref(9);
const totalFreezeList = ref(5); // 当前总数

// 查看列表
const getList = async () => {
  if (activeName.value == 1) {
    let data = {
      currentPage: currentPageRule.value,
      pageCount: pageSizeRule.value,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartScreenshot/queryPageSmartScreenshot",
      headers: {
        // token: sessionStorage.getItem("token"),
        // user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "规则");
    if (res.data.code == 200) {
      loading.value = false;
      ruleData.list = res.data.data.list;
      totalRule.value = res.data.data.totalCount;
      // ElMessage({
      //   type: "success",
      //   showClose: true,
      //   message: res.data.message,
      //   center: true,
      // });
    } else {
      loading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (activeName.value == 2) {
    let data = {
      currentPage: currentPageRecord.value,
      pageCount: pageSizeRecord.value,
    };
    let res = await axios({
      method: "get",
      url:
        api.value +
        "/wanzai/api/smartScreenshotRecord/queryScreenshotRecordPage",
      headers: {
        // token: sessionStorage.getItem("token"),
        // user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "截屏记录分页");
    if (res.data.code == 200) {
      recordData.list = res.data.data.list;
      totalRecord.value = res.data.data.totalCount;
      // ElMessage({
      //   type: "success",
      //   showClose: true,
      //   message: res.data.message,
      //   center: true,
      // });
    } else {
      loading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (activeName.value == 3) {
    let data = {
      currentPage: currentPageFreezeList.value,
      pageCount: pageSizeFreezeList.value,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartFreezeRecord/queryPageFreezeRecord",
      headers: {
        // token: sessionStorage.getItem("token"),
        // user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "已冻结名单分页");
    if (res.data.code == 200) {
      freezeListData.list = res.data.data.list;
      totalFreezeList.value = res.data.data.totalCount;
      // ElMessage({
      //   type: "success",
      //   showClose: true,
      //   message: res.data.message,
      //   center: true,
      // });
    } else {
      loading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 头部切换功能
const handleClick = (name) => {
  console.log(name);
  getList();
};
// 规则页面 （----------------------------------------------------）
const handleCurrentChangeRule = (value) => {
  currentPageRule.value = value;
};
//编辑按钮
const editClick = async (row) => {
  editVisible.value = true;
  editRuleForm.screenshotNum = row.screenshotNum;
  editRuleForm.trigger = row.triggers;
  editRuleForm.id = row.id;
};
// 确定编辑
const confirmEdit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        screenshotNum: editRuleForm.screenshotNum,
        trigger: editRuleForm.trigger,
        id: editRuleForm.id,
      };
      let res = await axios({
        method: "post",
        url:
          api.value + "/wanzai/api/smartScreenshot/updateSmartScreenshotById",
        headers: {
          // token: sessionStorage.getItem("token"),
          // user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "规则");
      if (res.data.code == 200) {
        editVisible.value = false;
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  });
};
const cancelEdit = () => {
  editVisible.value = false;
  editRuleRef.value.resetFields();
  editRuleForm.trigger = "";
  editRuleForm.screenshotNum = "";
  editRuleForm.id = "";
};
const getRules = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScreenshot/queryPunishs",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "规则列表");
  if (res.data.code == 200) {
    ruleList.value = res.data.data;
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 截屏记录页面 （----------------------------------------------------）
const handleCurrentChangeRecord = (value) => {
  currentPageRecord.value = value;
};
// 改变时间
const changeTime = (value) => {
  console.log(value);
  let nowTime = dayjs().format("YYYY-MM-DD");
  if (dayjs(value).isAfter(nowTime)) {
  } else {
    freezeRuleForm.time = "";
    ElMessage({
      type: "warning",
      showClose: true,
      message: "截止时间应大于当前时间",
      center: true,
    });
  }
};
//冻结按钮
const freezeClick = async (row) => {
  freezeVisible.value = true;
  freezeRuleForm.userId = row.userId;
  freezeRuleForm.type = "";
  freezeRuleForm.time = "";
  freezeRuleForm.reason = "";
};
// 确定冻结
const confirmFreeze = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        userId: freezeRuleForm.userId,
        type: freezeRuleForm.type,
        deadline: freezeRuleForm.time,
        reason: freezeRuleForm.reason,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/wanzai/api/smartFreezeRecord/manualFreezing",
        headers: {
          // token: sessionStorage.getItem("token"),
          // user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "冻结");
      if (res.data.code == 200) {
        editVisible.value = false;
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  });
};
const cancelFreeze = () => {
  freezeVisible.value = false;
  freezeRef.value.resetFields();
  freezeRuleForm.userId = "";
  freezeRuleForm.type = "";
  freezeRuleForm.time = "";
  freezeRuleForm.reason = "";
};

//已冻结名单（-------------------------------------------------------------------）
// 分页
const handleCurrentChangeFreezeList = (value) => {
  currentPageFreezeList.value = value;
};
// 搜索功能
const searchBtn = lodash.debounce(async () => {}, 300);
//导出功能
const importExcel = async () => {
  // if (searchInput.createTime == null) {
  //   searchInput.createTime = "";
  // }
  // let data = new FormData();
  // data.set("car_number", searchInput.carnumber);
  // data.set("create_time", searchInput.createTime);
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/carBook/cinfotoExcel.action",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //   },
  //   data: data,
  // });
  // // console.log(res, "导出账号");
  // if (res.data.code == 200) {
  //   // const elt = document.createElement("a");
  //   // elt.setAttribute(
  //   //   "href",
  //   //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
  //   // );
  //   // elt.setAttribute("download", "file.png");
  //   // elt.style.display = "none";
  //   // document.body.appendChild(elt);
  //   // elt.click();
  //   var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
  //   console.log("获得地址数据:", downloadPath);
  //   var downloadLink = document.createElement("a");
  //   downloadLink.style.display = "none"; // 使其隐藏
  //   downloadLink.href = downloadPath;
  //   downloadLink.download = "";
  //   downloadLink.click();
  //   document.body.appendChild(downloadLink);
  //   document.body.removeChild(downloadLink);
  //   ElMessage({
  //     type: "success",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // }
};
// 解冻
const defrost = async (row) => {
  let data = {
    id: row.id,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartFreezeRecord/thawFreezing",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "解冻");
  if (res.data.code == 200) {
    editVisible.value = false;
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  getList();
  getRules();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    width: 96%;
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;
  }

  .middle {
    width: 96%;
    height: calc(100% - 61px);
    margin: 0 auto;
    overflow: auto;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .el-tabs {
        width: 100%;
        height: 100%;
        :deep(.el-tabs__header) {
          margin: 15px 0;
          .el-tabs__item {
            color: #000;
            font-size: 16px;
            font-family: "微软雅黑";
          }
        }
        :deep(.el-tabs__content) {
          height: calc(100% - 70px);
          .el-tab-pane {
            height: 100%;
          }
        }

        .footer {
          width: 100%;
          height: calc(100% - 64px);
          margin: 0 auto;

          .el-table--fit {
            height: 100%;
            :deep(.el-table__header-wrapper) {
              background-color: #000;
              font-size: 14px;

              tr {
                // color: #000;
              }
            }

            :deep(.el-table__row) {
              height: 50px;
              font-size: 14px;
              // color: #000;
              &:hover {
                td {
                  background-color: rgba(223, 236, 254, 1);
                }
              }
            }

            :deep(.el-table__row):nth-child(2n) {
              .el-table-fixed-column--right {
                background-color: rgba(240, 243, 247, 1);
              }
            }

            :deep(.el-table__row td) {
              padding: 0;
              // border: 0;
            }

            .el-button--primary {
              margin-left: 5px;
            }

            :deep(.el-table__body .even) {
              background-color: #fff;
            }

            :deep(.el-table__body .odd) {
              background-color: rgba(240, 243, 247, 1);
            }

            .defrost,
            .del {
              padding: 0 10px;
              color: rgba(30, 125, 251, 1);
              cursor: pointer;
            }
            .triggers {
              color: red;
            }

            // :deep(.look):hover {
            //   color: red;
            // }
            // :deep(.del):hover {
            //   color: red;
            // }
          }
        }
        .freezeList {
          .searchInp {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .search {
              margin-left: 15px;
            }
          }
          .footers {
            width: 100%;
            height: calc(100% - 106px);
            margin: 0 auto;

            .el-table--fit {
              height: 100%;
              :deep(.el-table__header-wrapper) {
                background-color: #000;
                font-size: 14px;

                tr {
                  // color: #000;
                }
              }

              :deep(.el-table__row) {
                height: 50px;
                font-size: 14px;
                // color: #000;
                &:hover {
                  td {
                    background-color: rgba(223, 236, 254, 1);
                  }
                }
              }

              :deep(.el-table__row):nth-child(2n) {
                .el-table-fixed-column--right {
                  background-color: rgba(240, 243, 247, 1);
                }
              }

              :deep(.el-table__row td) {
                padding: 0;
                // border: 0;
              }

              .el-button--primary {
                margin-left: 5px;
              }

              :deep(.el-table__body .even) {
                background-color: #fff;
              }

              :deep(.el-table__body .odd) {
                background-color: rgba(240, 243, 247, 1);
              }

              .defrost,
              .del {
                padding: 0 10px;
                color: rgba(30, 125, 251, 1);
                cursor: pointer;
              }
              .triggers {
                color: red;
              }

              // :deep(.look):hover {
              //   color: red;
              // }
              // :deep(.del):hover {
              //   color: red;
              // }
            }
          }
        }
      }
    }
  }

  // 编辑按钮
  :deep(.editDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px 10px 30px;
      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 20px 0;
        color: #000;

        .item {
          margin-right: 15px;
          width: 80px;
          text-align: right;
          font-weight: 600;
        }
      }
      .options {
        margin: 80px 20px 20px 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
  //冻结按钮
  :deep(.freezeDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px 10px 30px;
      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 20px 0;
        color: #000;

        .item {
          margin-right: 15px;
          width: 80px;
          text-align: right;
          font-weight: 600;
        }
      }
      .options {
        margin: 50px 20px 20px 0;
        width: 100%;
        .el-form-item__content {
          display: flex;
          flex-direction: row-reverse;
        }
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 30px;

    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(0, 97, 255, 0.8);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>