ISMS-Visualization-BJGD-TKT-JCDJ/src/views/leave/index.vue

<template>
  <div class="recognize-main">
    <template>
      <!-- 退卡人员信息 -->
      <div>
        <div>
          <el-row>
            <el-col class="infomation_content" :span="18">
              <div class="infomation_prompt">
                今日进站信息概览：登记信息共计{{ companyCount }}条，人数共计{{
                  personsCount
                }}人次
              </div>
              <div class="infomation_data_line"></div>
              <div>
                <el-table
                  height="70vh"
                  :data="personComingList"
                  style="width: 100%"
                  :key="refreKey"
                  :default-sort="{ prop: 'field001', order: 'descending' }"
                >
                  <el-table-column align="center" prop="field003" label="单位">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="field006"
                    label="进站目的"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="field002" label="领队">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="field005"
                    label="联系电话"
                  >
                  </el-table-column>
                  <el-table-column
                    sortable
                    align="center"
                    prop="field001"
                    label="进站时间"
                  >
                  </el-table-column>
                  <el-table-column
                    sortable
                    align="center"
                    prop="field013"
                    label="离站时间"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="field007"
                    label="总人数"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="field008"
                    label="同行人员"
                  >
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        v-if="!scope.row.field013"
                        type="primary"
                        size="medium "
                        @click="handleClick(scope.row, 3)"
                        >离站</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
            <el-col class="infomation_content" :span="6">
              <div class="infomation_prompt">
                今日发出未收回卡{{ inList.length }}张
              </div>
              <div class="infomation_data_line"></div>
              <div>
                <el-table
                  height="70vh"
                  :data="inList"
                  style="width: 100%"
                  :key="refreKey"
                >
                  <el-table-column align="center" prop="field001" label="姓名">
                  </el-table-column>
                  <el-table-column align="center" label="在站">
                    <template slot-scope="scope">
                      {{ scope.row ? "未还卡" : "还卡" }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import BaseTableList from "@/views/components/base/BaseTableList";
import { getDataList, updateDataList } from "@/API/report";
import Dayjs from "dayjs";

export default {
  name: "recognize",
  components: {
    BaseTableList,
  },
  data() {
    return {
      url: "",
      showIframe: true,
      stepProcessInfomation: [
        {
          step: 1,
          propName: "人员姓名：",
          prop: "name",
          prompt: "请说出或点击输入你的姓名。",
        },
        {
          step: 2,
          propName: "工作单位：",
          prop: "company",
          prompt: "请说出或点击输入你的工作单位。",
        },
        {
          step: 3,
          propName: "身份证号：",
          prop: "cardNumber",
          prompt: "请说出或点击输入你的身份证号。",
        },
        {
          step: 4,
          propName: "联系电话：",
          prop: "tel",
          prompt: "请说出或点击输入你的联系电话。",
        },
        {
          step: 5,
          propName: "退卡卡号：",
          prop: "label",
          prompt: "请说出或点击输入你的卡号。",
        },
      ],
      infomation: {
        name: "",
        company: "",
        cardNumber: "",
        tel: "",
        label: "",
      },
      cameraInfo: {
        id: "1",
      },
      personComingList: [{}],
      personBindList: [{}],
      personUnbindList: [{}],
      inList: [{}],
      refreKey: 1,
      companyCount: 0,
      personsCount: 0,
    };
  },
  watch: {
    "$route.query.path": {
      handler(newVal, oldVal) {
        // console.log(newVal);
        this.showIframe = false;
        if (newVal) {
          this.url = newVal;
        }
        this.$nextTick(() => {
          this.showIframe = true;
        });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getComingDataList();
    this.getBindList().then(() => {
      this.getUnbindList();
    });
  },
  methods: {
    async getComingDataList() {
      try {
        const params = {
          sql: "select CAST(id as char) as id,field001,field002,field003,field004,field005,field006,field007,field008,field009,field010,field011,field012,field013 from custom_table_person_coming_records where TO_DAYS(field001) = TO_DAYS(NOW())", //登记时间
        };
        const res = await getDataList(params);
        this.personComingList = res.data.content;
        this.companyCount = this.personComingList.length;
        this.personsCount = 0;
        this.personComingList.forEach((e) => {
          this.personsCount += Number(e.field007);
        });
        console.log("入场登记报表sql", params, res);
        this.refreKey++;
      } catch (err) {
        console.log(err);
      }
    },
    async getBindList() {
      try {
        const params = {
          sql: "select CAST(id as char) as id,field001,field002,field003,field004,field005,field006,field007 from custom_table_bind_card_records where TO_DAYS(BaseCreateTime) = TO_DAYS(NOW())", //登记时间
        };
        const res = await getDataList(params);
        this.personBindList = res.data.content;
        // this.companyCount = this.personComingList.length;
        // this.personsCount = 0;
        // this.personComingList.forEach((e) => {
        //   this.personsCount += Number(e.field007);
        // });
        console.log("今日绑卡", params, res);
        this.refreKey++;
      } catch (err) {
        console.log(err);
      }
    },
    async getUnbindList() {
      try {
        const params = {
          sql: "select CAST(id as char) as id,field001,field002,field003,field004,field005 from custom_table_unbind_card_records where TO_DAYS(BaseCreateTime) = TO_DAYS(NOW())", //登记时间
        };
        const res = await getDataList(params);
        this.personUnbindList = res.data.content;
        // 过滤标记
        for (let i = 0; i < this.personUnbindList.length; i++) {
          const e = this.personUnbindList[i];
          for (let j = 0; j < this.personBindList.length; j++) {
            const bind = this.personBindList[j];
            if (bind.field001 === e.field001 && bind.field004 === e.field004) {
              this.personBindList[j].in = true;
            }
          }
        }
        //过滤显示
        this.inList = this.personBindList.filter((e) => !e.in);
        // console.log(
        //   "在站",
        //   this.personBindList,
        //   this.personUnbindList,
        //   this.inList
        // );
        this.refreKey++;
      } catch (err) {
        console.log(err);
      }
    },
    async saveComingRecord(data) {
      try {
        const res = await updateDataList(data);
        console.log("入场登记报表保存离站时间", data, res);
        this.refreKey++;
      } catch (err) {
        console.log(err);
      }
    },
    handleClick(data, type) {
      console.log("退卡了哦！", data);
      if (type) {
        switch (type) {
          case 1:
            console.log("退卡", data);
            let dialogConfig = {
              dialogId: "risk_" + data.id,
              show: true, //是否显示
              title: "退卡",
              width: 600, //px宽度
              height: 320, //px高度
              center: true, //是否居中定位
              zIndex: 10,
              data,
            };
            this.$store.dispatch("dialog/addRiskDialog", dialogConfig);
            break;
          case 2:
            console.log("确认退卡", data);
            this.$store.dispatch("dialog/addRiskDialog", dialogConfig);
            break;
          case 3:
            data.pageId = "842348058862690304";
            data.field013 = Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
            console.log("确认离站", data);
            this.saveComingRecord(data);
            break;
          default:
            break;
        }
      }
    },
  },
};
</script>
<style>
.el-input__inner {
  height: 120px;
}
</style>
<style lang="less" scoped>
.recognize-main {
  width: 100%;
  height: 100%;
  padding: 100px 30px 40px;
  pointer-events: auto;
  color: #fff;
  .infomation_content {
    color: #fff;
    padding: 6px;
    height: 100%;
    .infomation_prompt {
      font-size: 40px;
      margin-top: 40px;
      margin-left: 20px;
    }
    .infomation_prop {
      margin-top: 100px;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 60px;
    }
    .infomation_data_line {
      margin-top: 40px;
    }
    .infomation_table {
      height: 195px;
      overflow-y: scroll;
    }
    .infomation_data {
      width: 100%;
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      font-size: 50px;
      .infomation_data_content {
        margin-top: 2%;
        margin-left: 12%;
        width: 35%;
        height: 100px;
        justify-content: center;
        align-items: flex-start;
      }
      .infomation_data_content2 {
        margin-top: 2%;
        margin-left: 8%;
        width: 41%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .infomation_button {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2%;
      margin-left: 20%;
    }
  }
}
</style>