<template>
  <div class="inform">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <!-- 标题区域 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }"
            >房态管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>指纹管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 主体内容区域 -->
      <div class="inform-body">
        <!-- 筛选条件区域 -->
        <div class="order-top">
          <!-- 订单号筛选 -->
          <div class="inquire">
            <el-input
              placeholder="指纹编码/IC卡号/姓名"
              style="width: 261px"
              clearable
              v-model="queryValue"
              @clear="getData(1)"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button @click="getData(1)">查询</el-button>
          </div>
          <div class="paydate">
            <span class="demonstration">创建时间:</span>
            <el-date-picker
              v-model="createTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              @change="getData(1)"
            ></el-date-picker>
          </div>

          <!-- 支付时间筛选 -->
          <div class="paydate">
            <span class="demonstration">用户类型:</span>
            <!-- <el-input
              placeholder="请输入订单号"
              style="width: 261px"
              clearable
              v-model="value"
              @clear="getData(1)"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>-->
            <el-select
              v-model="userType"
              clearable
              placeholder="请选择类型"
              @change="getData(1)"
            >
              <el-option label="普通用户" value="2"></el-option>
              <el-option label="管理员" value="1"></el-option>
            </el-select>
          </div>
          <div class="add">
            <div class="export" @click="addCard">新增</div>
            <el-dialog
              :visible.sync="addDialogShow"
              :append-to-body="true"
              custom-class="addDialog"
            >
              <div class="elbody">
                <span class="ic">{{ addTitle }}</span>
                <el-button @click="closefingerprint">关 闭</el-button>
                <el-button @click="addfingerprint" type="primary"
                  >保 存</el-button
                >
              </div>
              <div slot="footer" class="dialog-footer">
                <div style="margin-left: 100px">
                  <el-divider content-position="left">基本信息</el-divider>
                </div>
                <el-form :model="icCardInfo" label-position="top">
                  <div class="left">
                    <el-form-item label="姓名">
                      <el-input v-model="icCardInfo.name"></el-input>
                      <span
                        style="
                          position: absolute;
                          left: 200px;
                          color: #296de3;
                          cursor: pointer;
                        "
                        @click="Editstaff"
                        >员工</span
                      >
                      <el-dialog
                        title="添加员工"
                        :visible.sync="selectStaffShow"
                        width="692px"
                        append-to-body
                        custom-class="dialongAllRoom"
                        :close-on-click-modal="false"
                      >
                        <div class="tree">
                          <div class="tree-left">
                            <span style="margin-left: 15px">列表</span>
                            <span style="margin-left: 228px">1/1</span>
                          </div>
                          <el-tree
                            :data="data"
                            show-checkbox
                            node-key="id"
                            ref="roomTree"
                            :default-expand-all="true"
                            :props="defaultProps"
                            @check="checkStaff"
                          >
                          </el-tree>
                        </div>
                        <div class="tree">
                          <div class="tree-left">
                            <p style="margin-left: 15px">已选</p>
                          </div>
                          <ul class="infinite-list" style="overflow: auto">
                            <li class="infinite-list-item" v-show="title">
                              <span style="margin-left: 19px">{{ title }}</span>
                              <!-- <i
                                class="el-icon-close"
                                @click="cancelCheck"
                              ></i> -->
                            </li>
                          </ul>
                        </div>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="selectStaffShow = false"
                            >取 消</el-button
                          >
                          <el-button
                            type="primary"
                            @click="selectStaffShow = false"
                            >确 定</el-button
                          >
                        </span>
                      </el-dialog>
                    </el-form-item>
                    <el-form-item label="用户类型">
                      <el-select
                        v-model="icCardInfo.userType"
                        placeholder="用户"
                      >
                        <el-option label="普通用户" value="2"></el-option>
                        <el-option label="管理员" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="生效时间(默认今天)">
                      <el-date-picker
                        v-model="startTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="right">
                    <el-form-item label="指纹">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 6, maxRows: 6 }"
                        placeholder="请输入内容"
                        v-model="icCardInfo.cardId"
                      >
                      </el-input>
                      <span
                        style="
                          position: absolute;
                          margin-left: 5px;
                          color: #296de3;
                          top: 50px;
                          cursor: pointer;
                        "
                        @click="fingerprin"
                        >录入</span
                      >
                      <el-dialog
                        :visible.sync="fingerprintShow"
                        :append-to-body="true"
                        custom-class="fingerprint"
                        :close-on-click-modal="false"
                      >
                        <div class="elbody">
                          <span>指 纹</span>
                          <i
                            class="el-icon-close"
                            @click="closefingerprintShow"
                          ></i>
                        </div>
                        <div class="el-footer">
                          <div style="height:350px;margin: 30px auto;">
                            <el-steps direction="vertical" :active="stepindex">
                              <el-step
                                v-for="i in step"
                                :key="i.id"
                                :title="`步骤 ${i.id}`"
                                :description="i.title"
                              ></el-step>
                              <!-- <el-step title="步骤 2"></el-step>
                              <el-step title="步骤 3"></el-step>
                              <el-step
                                title="步骤 4"
                                description="录取成功"
                              ></el-step> -->
                            </el-steps>
                          </div>
                        </div>
                      </el-dialog>
                    </el-form-item>
                    <el-form-item label="失效时间">
                      <el-date-picker
                        v-model="endTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="12:00:00"
                        @change="endT"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-radio-group
                      v-model="icCardInfo.radio"
                      @change="radioChange"
                    >
                      <el-radio label="一个星期">一个星期</el-radio>
                      <el-radio label="一个月">一个月</el-radio>
                      <el-radio label="半年">半年</el-radio>
                      <el-radio label="一年">一年</el-radio>
                      <el-radio label="长期">长期</el-radio>
                    </el-radio-group>
                  </div>
                </el-form>
              </div>
            </el-dialog>

            <!-- <div class="export" @click="exportExcel">导出订单</div> -->
          </div>
        </div>
        <!-- 表格区域 -->
        <div class="inform-table">
          <!-- 表格区域 -->
          <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            max-height="576"
            height="576"
            style="width: 1550px"
            stripe
            class="Devicetable"
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)'
            }"
          >
            <el-table-column
              prop="roomNo"
              width="120"
              label="房间号"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              width="200"
              align="center"
              label="房间号(锁设备UID)"
              show-overflow-tooltip
              prop="lockUserId"
            >
            </el-table-column>

            <el-table-column
              prop="createTime"
              width="200"
              align="center"
              label="生效时间"
            >
            </el-table-column>
            <el-table-column
              prop="failureTime"
              align="center"
              width="200"
              label="失效时间"
            >
            </el-table-column>
            <el-table-column
              prop="holderName"
              width="130"
              align="center"
              label="持卡人姓名"
            >
            </el-table-column>
            <el-table-column
              prop="fingerprintNumber"
              align="center"
              width="150"
              label="指纹编码"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column width="150" align="center" label="用户类型">
              <template slot-scope="{ row }">
                <span>{{ row.userType == 1 ? "管理员" : "普通用户" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              width="180"
              align="center"
              label="创建时间"
            >
            </el-table-column>
            <el-table-column prop="address" align="center" label="操作">
              <template slot-scope="{ row }">
                <!-- 解绑按钮 -->
                <span @click="handleDelete(row)" class="operate">解绑</span>
                <!-- 编辑按钮 -->
                <span @click="handleEdit(row)" class="operate">编辑</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器区域 -->
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :current-page="curPage"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import dayjs from "dayjs";
import _ from "lodash";
export default {
  name: "fingerprint",
  data() {
    return {
      // 显示的总数据
      tableData: [],
      // 多选框按钮勾选的数据
      selectionTable: [],
      // 新增 弹窗属性
      addDialogShow: false,
      icCardInfo: {
        userType: "", // 用户类型
        cardId: "", // 指纹编码
        name: "", // 用户姓名
        radio: "一个星期",
        id: ""
      },
      startTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      endTime: dayjs(new Date())
        .add(7, "day")
        .format("YYYY-MM-DD HH:mm:ss"),
      // 指纹录入弹窗属性
      fingerprintShow: false,
      stepindex: 0, // 录取指纹步骤
      step: [
        { id: 1, title: "" },
        { id: 2, title: "" },
        { id: 3, title: "" },
        { id: 4, title: "" }
      ], // 指纹步骤数据
      roomNo: "", // 房间号

      // 员工弹窗属性
      addTitle: "新增指纹",
      selectStaffShow: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      title: "",
      data: [],
      // 状态数组
      options: [
        {
          value: 0,
          label: "已取消"
        },
        {
          value: 1,
          label: "待支付"
        },
        {
          value: 2,
          label: "待入住"
        },
        {
          value: 3,
          label: "已入住"
        },
        {
          value: 4,
          label: "待结账"
        },
        {
          value: 5,
          label: "已完成"
        }
      ],
      // 筛选状态绑定数据
      userType: "",
      // 筛选订单号绑定数据
      queryValue: "",
      // 筛选创建时间绑定数据
      createTime: "",
      // 弹窗控制属性
      dialogVisible: false,
      waterTable: [],
      electricTable: [],
      order: [], // 用户信息
      // 当前页
      curPage: 1,
      // 每页条数
      pageSize: 8,
      // 总条数
      total: null
    };
  },
  watch: {
    startTime(newVal, oldVal) {
      // console.log(this.endTime > newVal);
      if (this.endTime <= newVal) {
        this.endTime = "";
      }
      this.icCardInfo.radio = "";
    }
  },
  watch: {
    stepindex(newVal, oldVal) {
      // console.log(newVal);
      this.stepindex = newVal;
    }
  },
  mounted() {
    this.roomNo = JSON.parse(sessionStorage.getItem("roomNo"));
    this.API.hotelStaff
      .departList()
      .then(res => {
        // console.log(res, "员工类型");

        let data = [];
        res.data.forEach(item => {
          let children = [];
          item.staffs.forEach(i => {
            children.push({
              label: i.username,
              id: i.id
            });
          });
          let arr = {
            id: item.id,
            label: item.department,
            disabled: true,
            children
          };

          data.push(arr);
        });

        this.data = data;
        // console.log(data);
      })
      .catch(err => {
        console.log(err);
      });
    this.getData();
  },
  methods: {
    // 返回首页
    goBack() {
      this.$router.replace({
        name: "Home"
      });
    },
    // 获取表格数据
    async getData() {
      let params = "";
      if (this.createTime == null) {
        this.createTime = "";
      }
      params = `${this.roomNo}?curPage=${this.curPage}&pageSize=${this.pageSize}&keyWord=${this.queryValue}&createTime=${this.createTime}&userType=${this.userType}`;
      let res = await this.API.fingerprint.queryInfo(params);
      // console.log(res, "指纹管理");
      if (res.success) {
        this.tableData = res.data.list;
        this.total = res.data.totalCount;
      } else {
        this.$message.error(res.message);
      }
    },
    //新增弹窗
    addCard() {
      this.addDialogShow = true;
      this.selectTime = true;
      this.addTitle = "新增指纹";
      this.icCardInfo = {
        userType: "",
        cardId: "",
        name: "",
        radio: "一个星期",
        id: ""
      };
      this.startTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
      this.endTime = dayjs(new Date())
        .add(7, "day")
        .format("YYYY-MM-DD HH:mm:ss");
    },
    // 确定新增指纹
    async addfingerprint() {
      if (this.addTitle == "新增指纹") {
        let data = {
          fingerprintNumber: this.icCardInfo.cardId, //指纹编码
          roomNo: this.roomNo, //房间号
          holderName: this.icCardInfo.name, // 持有人
          userType: this.icCardInfo.userType, // 用户类型
          takeTime: this.startTime, // 生效时间
          failureTime: this.endTime, // 失效时间
          createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), // 创建时间
          statu: 1 // 状态 失效：0  生效：1
        };
        let res = await this.API.fingerprint.add(data);
        if (res.code == 1) {
          this.$message.success("新增成功");
          this.getData();
          this.addDialogShow = false;
        } else {
          this.$message.error("新增失败");
        }
        // console.log(res, "确定添加指纹");
      } else if (this.addTitle == "编辑指纹") {
        let data = {
          id: this.icCardInfo.id, //数据id
          fingerprintNumber: this.icCardInfo.cardId, //指纹编码
          roomNo: this.roomNo, //房间号
          holderName: this.icCardInfo.name, // 持有人
          userType: this.icCardInfo.userType, // 用户类型
          takeTime: this.startTime, // 生效时间
          failureTime: this.endTime, // 失效时间
          createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), // 创建时间
          statu: 1 // 状态 失效：0  生效：1
        };
        let res = await this.API.fingerprint.update(data);
        if (res.code == 1) {
          this.$message.success("修改成功");
          this.getData();
          this.addDialogShow = false;
        } else {
          this.$message.error("修改失败");
        }
      }

      // this.addDialogShow = false;
    },
    // 关闭新增指纹
    closefingerprint() {
      this.addDialogShow = false;
    },
    endT() {
      if (
        this.endTime <
        dayjs(this.startTime)
          .add(1, "day")
          .format("YYYY-MM-DD HH:mm:ss")
      ) {
        this.$message({
          message: "失效日期应大于生效日期至少一天",
          type: "error"
        });
        this.endTime = "";
      }
      this.icCardInfo.radio = "";
    },
    radioChange() {
      // console.log(this.icCardInfo.radio);
      if (this.icCardInfo.radio == "一个星期") {
        this.endTime = dayjs(this.startTime)
          .add(1, "week")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.icCardInfo.radio == "一个月") {
        this.endTime = dayjs(this.startTime)
          .add(1, "month")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.icCardInfo.radio == "半年") {
        this.endTime = dayjs(this.startTime)
          .add(6, "month")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.icCardInfo.radio == "一年") {
        this.endTime = dayjs(this.startTime)
          .add(1, "year")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.icCardInfo.radio == "长期") {
        this.endTime = dayjs(this.startTime)
          .add(100, "year")
          .format("YYYY-MM-DD HH:mm:ss");
      }
    },
    //指纹录入
    fingerprin() {
      this.fingerprintShow = true;
      this.step = [
        { id: 1, title: "" },
        { id: 2, title: "" },
        { id: 3, title: "" },
        { id: 4, title: "" }
      ];
      this.stepindex = 0;
      let _this = this;
      var wsUrl = "ws://localhost:8181/";
      let websocket = new WebSocket(wsUrl);
      websocket.onopen = function(evt) {
        var params = { type: 101, data: null };
        websocket.send(JSON.stringify(params));
      };

      websocket.onmessage = function(evt) {
        // console.log(evt.data, "输出数据");
        let data = JSON.parse(evt.data);
        if (data.type == 0) {
          // console.log(JSON.parse(evt.data).data.portNames); // 获取到 USB接口
          let params1 = {
            type: 1,
            data: {
              type: 0,
              portName: JSON.parse(evt.data).data.portNames[1],
              baudRate: 115200
            }
          };
          websocket.send(JSON.stringify(params1));
        } else if (data.type == 110) {
          // console.log("已获取设备信息");
        } else if (data.type == 11) {
          var params2 = {
            type: 2,
            data: {
              totalStep: 4
            }
          };
          websocket.send(JSON.stringify(params2));
        } else if (data.type == 21) {
          if (data.data.step == 0) {
            // console.log("请按压指纹");
            _this.$message.success("请开始按压指纹");
          } else {
            // console.log(`请按下同一指纹，第${data.data.step}次按压`);
            if (data.data.step <= 4) {
              // _this.$message.success(
              //   `请按下同一指纹，第${data.data.step}次录入指纹成功`
              // );
              _this.step.forEach(item => {
                if (item.id == data.data.step) {
                  item.title = `请按下同一指纹，第${data.data.step}次录入指纹成功`;
                }
              });
            }
            _this.stepindex = data.data.step;
          }
          // _this.$message.warning("请将手指按在传感器上");
          if (data.data.step > 4) {
            var params = {
              type: 3,
              data: {
                id: data.data.id
              }
            };
            websocket.send(JSON.stringify(params));
          }
        } else if (data.type == 31) {
          _this.icCardInfo.cardId = data.data.template;
          _this.$message.success("指纹录取成功");
          setTimeout(() => {
            _this.fingerprintShow = false;
            websocket.close();
          }, 1500);
        } else {
          _this.$message.error("设备连接失败，请刷新重新录入");
        }
      };
      websocket.onclose = function(evt) {
        console.log("关闭连接");
      };
      websocket.onerror = function(evt) {
        console.log("错误提示");
      };
    },

    // 关闭指纹录入
    closefingerprintShow() {
      var wsUrl = "ws://localhost:8181/";
      const websocket = new WebSocket(wsUrl);
      this.fingerprintShow = false;
    },
    //员工弹窗
    Editstaff() {
      this.selectStaffShow = true;
    },
    checkStaff(data, nodes) {
      //   console.log(data, nodes);
      this.$refs.roomTree.setCheckedNodes([]);
      this.count = [
        {
          id: data.id,
          label: data.label
        }
      ];
      // console.log(this.count);
      this.$refs.roomTree.setCheckedNodes(this.count);
      this.title = this.count[0].label;
      this.icCardInfo.name = this.count[0].label;
    },
    cancelCheck() {
      //   if (this.data[0].children.length == this.count.length) {
      //     this.checked = true;
      //   } else {
      //     this.checked = false;
      //   }
      //   this.$refs.roomTree.setCheckedNodes(this.count);
      //   console.log(this.count);
    },

    // 导出订单按钮回调
    exportExcel() {
      // let selectId = ".selectTable";
      // let execlTable = ".execlTable";
      // if (this.selectionTable.length > 0) {
      //   this.excel(selectId);
      // } else {
      //   this.excel(execlTable);
      // }
    },

    // 导出表格
    excel(id) {
      let xlsxParam = { raw: true };
      /* generate workbook object from table */
      let wb = XLSX.utils.table_to_book(document.querySelector(id));
      /* get binary string as output */
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "订单管理.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    //编辑按钮回调
    handleEdit(row) {
      // console.log(row);
      this.addDialogShow = true;
      this.selectTime = true;
      this.addTitle = "编辑指纹";
      this.icCardInfo = {
        id: row.id,
        userType: row.userType,
        cardId: row.fingerprintNumber,
        name: row.holderName,
        radio: ""
      };
      this.startTime = row.takeTime;
      this.endTime = row.failureTime;
      if (
        this.endTime ==
        dayjs(this.startTime)
          .add(1, "week")
          .format("YYYY-MM-DD HH:mm:ss")
      ) {
        this.icCardInfo.radio = "一个星期";
      } else if (
        this.endTime ==
        dayjs(this.startTime)
          .add(1, "month")
          .format("YYYY-MM-DD HH:mm:ss")
      ) {
        this.icCardInfo.radio = "一个月";
      } else if (
        this.endTime ==
        dayjs(this.startTime)
          .add(6, "month")
          .format("YYYY-MM-DD HH:mm:ss")
      ) {
        this.icCardInfo.radio = "半年";
      } else if (
        this.endTime ==
        dayjs(this.startTime)
          .add(1, "year")
          .format("YYYY-MM-DD HH:mm:ss")
      ) {
        this.icCardInfo.radio = "一年";
      } else if (
        (this.endTime = dayjs(this.startTime)
          .add(100, "year")
          .format("YYYY-MM-DD HH:mm:ss"))
      ) {
        this.icCardInfo.radio = "长期";
      }
    },

    //删除按钮回调
    handleDelete(row) {
      // console.log(row.id);
      this.$confirm("确认解绑？")
        .then(async () => {
          let res = await this.API.fingerprint.unbundIC({
            id: row.id,
            statu: 0
          });
          // console.log(res);
          if (res.success) {
            this.$message.success("解绑成功");
            let totalPage = Math.ceil((this.total - 1) / this.pageSize);
            let currentPage =
              this.curPage > totalPage ? totalPage : this.curPage;
            this.curPage = currentPage < 1 ? 1 : currentPage;
            this.getData();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },

    // 翻页逻辑回调
    handleCurrentChange(val) {
      this.curPage = val;
      this.getData();
    },

    // 多选框按钮操作
    handleSelectionChange(list) {
      // console.log(list);
      this.selectionTable = list;
    },

    // 表格样式设置
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.inform /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;

  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .el-breadcrumb {
      margin-left: 33px;
      .el-breadcrumb__item {
        font-size: 20px;
      }
    }
  }
  .inform-body {
    .order-top {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 33px 29px 34px 33px;
      font-size: 16px;
      font-weight: 400;
      color: #000;
      .add {
        display: flex;
        align-items: center;
        margin-left: 400px;
      }
      .el-button {
        background-color: rgba(41, 109, 227, 1);
        color: #fff;
        margin-left: 9px;
      }
      .paydate {
        margin: 0 0 0 44px;
        .el-date-editor {
          margin-left: 7px;
          width: 236px;
          .el-range__icon {
            display: none;
          }
        }
      }
      .state {
        margin-left: 30px;
        .el-input {
          width: 150px;
        }
      }
      .export {
        width: 94px;
        height: 32px;
        opacity: 1;
        color: #fff;
        text-align: center;
        line-height: 32px;
        background: rgba(41, 109, 227, 1);
        cursor: pointer;
        border-radius: 2px;
        margin-left: 10px;
      }
    }
    .inform-table {
      .execlTable,
      .selectTable {
        display: none;
      }
      .el-table {
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        .el-table__header-wrapper {
          border-radius: 5px;
          .el-checkbox.is-checked {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }

          .el-checkbox__input.is-checked,
          .el-checkbox__input.is-indeterminate {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }
        }
        tr {
          height: 64px;
          td {
            .cell {
              .el-dialog__wrapper {
                .el-dialog.editCard {
                  width: 1136px !important;
                  height: 644px !important;
                  .el-dialog__header {
                    height: 86px;
                    padding: 0;
                    display: flex;
                    align-items: center;
                  }
                  .el-dialog__body {
                    text-align: left;
                    .dialog-footer {
                      .el-divider--horizontal {
                        width: 900px;
                        .el-divider__text {
                          font-size: 20px;
                        }
                      }
                    }
                    .el-form {
                      display: flex;
                      justify-content: center;
                      .left {
                        margin: 0 100px;
                      }
                      .right {
                        margin: 0 85px;
                      }
                    }
                    .el-input {
                      width: 240px;
                    }
                  }
                  .el-dialog__footer {
                  }
                }
              }
              .el-checkbox.is-checked {
                .el-checkbox__inner {
                  background-color: rgba(41, 109, 227, 1);
                }
              }
              .is-indeterminate {
                .el-checkbox__inner {
                  background-color: rgba(41, 109, 227, 1);
                }
              }
              .operate {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                padding: 0 5px;
              }
              .el-dialog__wrapper {
                overflow: hidden;
                .el-dialog {
                  width: 968px !important;
                  margin-top: 249px !important;
                  height: 550px;
                  opacity: 1;
                  background: rgba(255, 255, 255, 1);
                  box-shadow: none;
                  .el-dialog__header {
                    height: 83px;
                    border-bottom: 1px solid rgba(230, 230, 230, 1);

                    span {
                      float: left;
                      font-size: 20px;
                      font-weight: 500;
                      color: #000;
                    }

                    .el-dialog__close {
                      width: 35px;
                      height: 35px;
                      &::before {
                        font-size: 24px;
                        color: #000;
                      }
                    }
                  }
                  .el-dialog__body {
                    padding: 0 38px;
                    .userinfo {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin-top: 15px;
                    }
                    .info {
                      display: flex;
                      .user {
                        .name {
                          text-align: left;
                          padding: 12px 0;
                        }
                        .el-input {
                          width: 283px;
                          height: 38px;
                          opacity: 1;
                          margin-right: 81px;
                          .el-input__inner {
                            color: #000;
                          }
                        }
                      }
                    }
                    .rate {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin: 15px 0;
                    }
                    .water {
                      text-align: left;
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 0, 0, 1);
                    }
                    .el-table {
                      margin: 10px 0;
                      tr {
                        height: 48px;
                      }
                      .el-table__body-wrapper {
                        overflow: visible;
                      }
                    }
                  }
                }
              }

              .el-dialog__title {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                padding: 10px 18px 0 18px;
              }
            }
          }
          .el-checkbox__inner {
            width: 18px;
            height: 18px;
            &::after {
              transform: rotate(45deg) scaleY(1.5);
              top: 3px;
              left: 5px;
            }
          }
        }
        th {
          font-weight: 400;
        }
      }
    }
    .block {
      height: 36px;
      margin: 66px 29px 0 0;
      float: right;
      .el-pagination {
        padding: 0;
        button {
          width: 36px;
          background: #fff;
          color: rgba(0, 0, 0, 1);
          height: 36px;
          font-size: 14px;
          border: 1px solid rgba(112, 112, 112, 1);
          border-radius: 8px;
        }
        ul {
          .active {
            background: #fff;
            color: rgba(0, 97, 255, 1);
            border: 1px solid rgba(0, 97, 255, 1);
            box-sizing: border-box;
          }
          .el-icon {
            border: none;
          }
          li {
            background: #fff;
            color: rgba(0, 0, 0, 1);
            width: 36px;
            height: 36px;
            font-size: 14px;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8px;
            line-height: 36px;
          }
        }
        .el-pagination__jump {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          margin-left: 10px;
          font-weight: 400;
          height: 36px;
          .el-input {
            width: 65px;
            height: 36px;
            margin: 0 10px;
            input {
              width: 65px;
              height: 36px;
              border: 1px solid rgba(0, 0, 0, 1);
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
}
.el-dialog__wrapper {
  /deep/ .addDialog {
    width: 1136px;
    height: 644px;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 86px;
      padding: 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .elbody {
        display: flex;
        align-items: center;
        .ic {
          font-size: 20px;
          color: #000;
          margin: 0 850px 0 25px;
        }
        display: flex;
        .el-button--primary {
          background: #296de3;
        }
      }
    }
    .el-dialog__footer {
      text-align: left;
      .dialog-footer {
        .el-divider--horizontal {
          width: 900px;
          .el-divider__text {
            font-size: 20px;
          }
        }
      }
      .el-form {
        display: flex;
        justify-content: center;
        .left {
          margin: 0 100px;
        }
        .right {
          margin: 0 100px;
          .el-form-item {
            .el-textarea {
              margin-bottom: 12px;
              width: 350px !important;
            }
          }
        }
      }
      .el-input {
        width: 240px;
      }
    }
  }
}

/deep/ .dialongAllRoom {
  .el-dialog__body {
    display: flex;
    justify-content: center;
    padding: 21px 0 0 0;

    .tree {
      .tree-left {
        width: 316px;
        height: 44px;
        background: rgba(240, 243, 247, 1);
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
    }

    .el-tree {
      width: 316px;
      height: 324px;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      padding-left: 9px;
      overflow: auto;
    }

    ul {
      width: 316px;
      height: 324px;
      list-style: none;
      padding: 0;
      margin: 0;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      overflow: auto;
      li {
        display: flex;
        justify-content: space-between;
        padding-right: 17px;
        align-items: center;
        i {
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    .el-button--primary {
      background: rgba(41, 109, 227, 1);
    }
  }
}
/deep/ .fingerprint {
  width: 611px !important;
  height: 486px !important;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
    .elbody {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px;
      font-size: 18px;
      color: #000;
      border-bottom: 0.5px solid #ccc;

      i {
        cursor: pointer;
      }
    }
  }
  .el-dialog__footer {
    .el-button--primary {
      background: rgba(41, 109, 227, 1);
    }
  }
}
</style>
<style lang="scss">
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3;
  }
}
</style>
