iot-front-ui/src/components/scene/access/sceneAccessGuestManage.vue

<template>
  <div class="accessManage ">
    <div class="page-query-core" style="padding: 30px 15px">
      <Query :show="['time']" :query-data.sync="queryData" :search="search">
        <template #extraItem>
          <a-form-model-item label="访客" style="margin-left: 45px">
            <a-input style="width: 250px" v-model="queryData.guestName" placeholder="请输入姓名/手机号"/>
          </a-form-model-item>
          <a-form-model-item label="受访人" style="margin-left: 45px">
            <a-input style="width: 250px" v-model="queryData.name" placeholder="请输入姓名/手机号"/>
          </a-form-model-item>
          <a-form-model-item label="公司" style="">
            <a-select v-model="queryData.company" style="width: 250px">
              <a-select-option v-for="(item,index) in companyOptions" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <div style="height: 20px"></div>
          <a-form-model-item label="访问事由" style="margin-left: 15px">
            <a-select v-model="queryData.objective" style="width: 250px">
              <a-select-option v-for="(item,index) in objectiveOptions" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </template>
      </Query>
    </div>

    <div class="accessManage-body">
      <a-table :columns="tableColumns" :data-source="tableData" :pagination="true"
               :scroll="{ y: tableContainerHeight }" bordered>
        <template #action="text, record">
          <a-button type="link" @click="showPeopleBehaviour"> 查看 </a-button>
        </template>

      </a-table>

      <!--<div style="width: 100%;text-align: right;margin-top: 15px;">-->
      <!--  <a-pagination ref="pagination"-->
      <!--                :showQuickJumper="true"-->
      <!--                :show-size-changer="true"-->
      <!--                :show-total="showTotal"-->
      <!--                v-model="currentPage"-->
      <!--                :default-current="1"-->
      <!--                :total="500"-->
      <!--                @showSizeChange="onShowSizeChange"-->
      <!--  />-->
      <!--</div>-->
    </div>

    <a-modal
        title="行为感知"
        v-if="showBehaviour"
        :visible="showBehaviour"
        width="65%"
        @cancel="hideBehaviour"
        :footer="null"
    >
      <SceneAccessBehaviour :item="currItem" />
    </a-modal>
  </div>
</template>

<script>
import Query from "@/components/common/query.vue";
export default {
  components: {
    Query
  },
  data() {
    return {
      showBehaviour: false,
      currentPage: 1,
      queryData: {
        objective: '1',
        company: '0'
      },
      currItem: {},
      objectiveMap:new Map(),
      objectiveOptions: [
        {
          label: '全部',
          value: '0'
        },
        {
          label: '开会',
          value: '1'
        },
        {
          label: '交流',
          value: '2'
        },
      ],
      companyMap:new Map(),
      companyOptions: [
        {
          label: '全部',
          value: '0'
        },{
          label: '北京电信规划院',
          value: '1'
        },
      ],
      tableContainerHeight: 500,
      tableColumns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          align: "center",
          width: 80,
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '访客',
          dataIndex: 'visitor',
          key: 'visitor',
        },
        {
          title: '访客手机号',
          dataIndex: 'visitor_phone',
          key: 'visitor_phone',
        },
        {
          title: '所属公司',
          dataIndex: 'department',
          key: 'department',
        },
        {
          title: '受访人',
          dataIndex: 'interviewee',
          key: 'interviewee',
        },
        {
          title: '访问事由',
          dataIndex: 'reason',
          key: 'reason',
        },
        {
          title: '受访人手机号',
          dataIndex: 'interviewee_phone',
          key: 'interviewee_phone',
        },
        {
          title: '通行时间',
          dataIndex: 'time',
          key: 'time',
        },
        {
          title: '通行方向',
          dataIndex: 'direction',
          key: 'direction',
        },
        {
          title: '行为感知',
          key: 'operation',
          fixed: 'right',
          width: 100,
          scopedSlots: {customRender: 'action'},
        },

      ],
      tableData:[],
      originalData: [
        {
          key: '1',
          visitor: "潘夏彤",
          visitor_phone: "13038678756",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B3",
          interviewee: "胡八一", interviewee_phone: "15643567892",
          directionStatus: "进",
        },
        {
          key: '2',
          visitor: "庞慧",
          visitor_phone: "13038678756",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入1F",
          interviewee: "胡八一",
          interviewee_phone: "15643567892",
          directionStatus: "进",
        },
        {
          key: '3',
          visitor: "李天泽",
          visitor_phone: "13038678756",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "张永军", interviewee_phone: "15643563892",
          directionStatus: "进",
        },
        {
          key: '4',
          visitor: "李天泽",
          visitor_phone: "13038678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "胡八一", interviewee_phone: "15643567892",directionStatus: "进",
        },
        {
          key: '5',
          visitor: "李天泽",
          visitor_phone: "13038678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "胡八一", interviewee_phone: "15643563892",directionStatus: "进",
        },
        {
          key: '6',
          visitor: "李天泽",
          visitor_phone: "13038678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "胡八一", interviewee_phone: "15643563892",directionStatus: "进",
        },
        {
          key: '7',
          visitor: "李天泽",
          visitor_phone: "13032678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "交流",
          direction: "进入B2",
          interviewee: "刘一鸣", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '8',
          visitor: "李天泽",
          visitor_phone: "13032678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "交流",
          direction: "进入B2",
          interviewee: "刘一鸣", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '9',
          visitor: "李天泽",
          visitor_phone: "13032678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "交流",
          direction: "进入B2",
          interviewee: "胡八一", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '10',
          visitor: "李天泽",
          visitor_phone: "12232678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "交流",
          direction: "进入B2",
          interviewee: "胡八一", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '11',
          visitor: "李天泽",
          visitor_phone: "12232678754",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "交流",
          direction: "出去B2",
          interviewee: "胡八一", interviewee_phone: "15943563892",directionStatus: "出",
        },
        {
          key: '12',
          visitor: "李天泽",
          visitor_phone: "12232678759",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "交流",
          direction: "出去B2",
          interviewee: "刘一鸣", interviewee_phone: "15943463892",directionStatus: "出",
        },
        {
          key: '13',
          visitor: "李天泽",
          visitor_phone: "15513548219",
          department: "北京电信规划院",
          time: "2023-03-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "刘一鸣", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '14',
          visitor: "李天泽",
          visitor_phone: "15513548214",
          department: "北京电信规划院",
          time: "2023-03-20 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "刘一鸣", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '15',
          visitor: "李天泽",
          visitor_phone: "15511548219",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "刘一鸣", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '16',
          visitor: "李天泽",
          visitor_phone: "15513548219",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "刘一鸣", interviewee_phone: "15943563892",directionStatus: "进",
        },
        {
          key: '17',
          visitor: "李天泽",
          visitor_phone: "15513548219",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "刘一鸣", interviewee_phone: "13943563892",directionStatus: "进",
        },
        {
          key: '18',
          visitor: "李天泽",
          visitor_phone: "15513548219",
          department: "北京电信规划院",
          time: "2023-03-10 12:00:00",
          reason: "开会",
          direction: "出去B1",
          interviewee: "刘一鸣", interviewee_phone: "15943563892",directionStatus: "出",
        },
        {
          key: '19',
          visitor: "李天泽",
          visitor_phone: "15513548219",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "出去B2",
          interviewee: "钱多多", interviewee_phone: "15942563898",directionStatus: "出",
        },
        {
          key: '20',
          visitor: "李天泽",
          visitor_phone: "15913548219",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "钱多多", interviewee_phone: "15942563898",directionStatus: "进",
        },
        {
          key: '21',
          visitor: "李天泽",
          visitor_phone: "15913548219",
          department: "北京电信规划院",
          time: "2022-08-26 12:00:00",
          reason: "开会",
          direction: "进入B2",
          interviewee: "钱多多", interviewee_phone: "15942563898",directionStatus: "进",
        },
      ]
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData(){
      this.objectiveOptions.forEach((v) => {
        this.objectiveMap.set(v.value, v.label);
      });
      this.companyOptions.forEach((v) => {
        this.companyMap.set(v.value, v.label);
      });
      this.tableData = this.originalData;
    },
    showPeopleBehaviour() {
      this.showBehaviour = true;
    },
    hideBehaviour() {
      this.showBehaviour = false;
    },
    showTotal(total, range) {
      let pageSize = range[1]-range[0]+1;
      let pages = Math.ceil(total/pageSize);
      return '共'+total+'条数据，第 '+this.currentPage+'/'+pages+' 页';
    },
    onShowSizeChange(val) {

    },
    search(){
      // this.$util.asyncPromise(this.getGuestData());
      this.getGuestData()
    },
    getGuestData(){
      let guestRegex = new RegExp(this.queryData.guestName)
      let intervieweeRegex = new RegExp(this.queryData.name)
      let startDate;
      let endDate;
      if (this.queryData.timeRange) {
        startDate = this.queryData.timeRange.startDate;
        endDate = this.queryData.timeRange.endDate;
      }
      this.tableData = this.originalData.filter((item) => {
        if (
          this.queryData.guestName &&
          this.queryData.guestName != "" &&
          !nameRegex.test(item.visitor)
        ) {
          return false;
        }
        if (
          this.queryData.name &&
          this.queryData.name != "" &&
          !equipmentRegex.test(item.interviewee)
        ) {
          return false;
        }
        if (
          this.queryData.objective &&
          this.queryData.objective != "0" &&
          !(this.objectiveMap.get(this.queryData.objective) === item.reason)
        ) {
          return false;
        }
        if (
          this.queryData.company &&
          this.queryData.company != "0" &&
          !(
            this.companyMap.get(this.queryData.company) ===
            item.department
          )
        ) {
          return false;
        }

        if (
          this.queryData.timeRange &&
          this.queryData.timeRange.startDate != "" &&
          !(
            this.$moment(item.time).isSameOrAfter(startDate) &&
            this.$moment(item.time).isSameOrBefore(endDate)
          )
        ) {
          return false;
        }

        return true;
      });

    }
  }
}
</script>

<style lang="less" scoped>
.accessManage {
  width: 100%;
  height: 100%;

  .ant-form-inline .ant-form-item {
    margin-right: 60px;

  }

  .accessManage-body {
    background: white;
    border-radius: 4px;
    margin-top: 12px;
    padding: 15px;
  }

}
</style>