hyyfClient/src/views/BioSafety/PersonAdmin.vue

<!--
 * @Author: your name
 * @Date: 2021-09-16 11:27:35
 * @LastEditTime: 2021-12-21 13:34:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue
-->
<template>
  <div class="person-admin">
    <!-- 顶部的按钮选择 -->
    <head-btns
      :btnNames="btnNames"
      :btnSelected="btnSelected"
      @btnSelected="getBtnSelected"
    >
    </head-btns>

    <!-- 图 -->
    <board v-if="btnSelected === 2">
      <div
        class="charts"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <chart-electro :total="total1"></chart-electro>
        <cost-histogram v-bind="recordData"></cost-histogram>
      </div>
    </board>

    <!-- 筛选条件 -->
    <query-conditions
      :formItems="formItems"
      :propFormData="propFormData"
      :defaultEmit="true"
      @getQueryParams="handleQuery"
    >
    </query-conditions>

    <!-- 表格 -->
    <new-table
      :title="title"
      :listData="listData"
      :tableItems="tableItems"
      :shows="tableShows"
      :height="475"
    >
      <!-- <template v-slot:right>
        <template v-if="btnSelected === 1">
          <div>共{{ total }}人，其中男 人，女 人</div>
        </template>
        <template v-else-if="btnSelected === 2">
          <div>共{{ total }}人，其中男 人，女 人</div>
        </template>
        <template v-else>
          <div>
            <el-button size="mini">添加赶猪人员</el-button>
          </div>
        </template>
      </template> -->

      <!-- 人员门禁 -->
      <template v-slot:recordImage="slotProps">
        <img
          :src="slotProps.row.recordImage"
          alt="人员门禁"
          width="50px"
          @click="clickImg(slotProps.row.recordImage)"
        />
      </template>
      <template v-slot:personName="slotProps">
        {{ slotProps.row.personName ? slotProps.row.personName : "未知 " }}
      </template>

      <!-- 档案管理 -->
      <template v-slot:personBiosignatures="slotProps">
        <img
          :src="slotProps.row.personBiosignatures[0].path"
          alt="人员门禁"
          width="100"
          @click="clickImg(slotProps.row.personBiosignatures[0].path)"
        />
      </template>
      <template #sex="slotProps">
        <span>{{ personSex[slotProps.row.sex] }}</span>
      </template>
      <template #status="slotProps">
        <span>{{ personStatus[slotProps.row.status] }}</span>
      </template>
    </new-table>
    <table-footer
      :totals="total"
      :size="size"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    >
    </table-footer>
    <el-dialog title="人脸图片" :visible.sync="dialogVisible" width="40%">
      <img :src="imgUrl" alt="人脸图片" width="100%" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HeadBtns from "components/bioSafety/Btns";
import QueryConditions from "components/bioSafety/QueryConditions";
import NewTable from "components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";
import Board from "components/bioSafety/Board";
import ChartElectro from "./chart/ChartElectro.vue";
import CostHistogram from "./chart/CostHistogram.vue";
import { timeDate } from "../../utils/index";

import { formItems, propFormData } from "./personAdmin/queryCondition.config";
import { titles, tableItems, tableShows } from "./personAdmin/table.config";
import { getFaceGuard } from "../../utils/api";
import {
  getFaceGuardTotal,
  getPersonFiles,
  getRecord,
} from "../../utils/chenApi";
import { mapState } from "vuex";

export default {
  name: "PersonAdmin",
  components: {
    HeadBtns,
    QueryConditions,
    NewTable,
    TableFooter,
    Board,
    ChartElectro,
    CostHistogram,
  },
  computed: {
    ...mapState(["ip"]),
  },
  data() {
    return {
      btnNames: [
        // 按钮情况
        { id: 1, name: "档案管理" },
        { id: 2, name: "人脸门禁" },
        // { id: 3, name: '赶猪监管' }
      ],
      btnSelected: 1, // 选中的按钮
      formItems: [], // 传给 QueryCondition 组件的 formItems
      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
      title: "", // 传给 BioTable 组件的 title
      listData: [], // 传给 BioTable 组件的表格展示的值 listData
      tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
      tableShows: {},
      // table的翻页
      total: 0,
      total1: 0,
      isTotal: false,
      size: 20,
      pageNum: 1,
      selectId: "",
      params: {},
      personStatus: ["已删除", "正常", "冻结"], // 档案管理 - 人员状态
      personSex: ["未知", "男", "女"], // 档案管理 - 性别
      dialogVisible: false, // 图片放大，也不知道得多老眼昏花，这么大的图片还要再大
      imgUrl: "", // 点击图片后放大的图片路径
      recordData: {}, // 进出统计
      loading: true,
    };
  },
  mounted() {
    this.formItems = formItems[this.btnSelected - 1];
    this.propFormData = propFormData[this.btnSelected - 1];
    this.title = titles[this.btnSelected - 1];
    this.tableItems = tableItems[this.btnSelected - 1];
    this.tableShows = tableShows;
    this.initPersonFiles();
  },
  methods: {
    // 获取选中的按钮情况
    getBtnSelected(id) {
      this.btnSelected = id;
      this.formItems = formItems[id - 1];
      this.propFormData = propFormData[id - 1];
      this.title = titles[id - 1];
      this.tableItems = tableItems[id - 1];
      this.chooseApi();
    },
    // 按钮选中情况 --> 对应的 api
    chooseApi(flag = true) {
      if (this.btnSelected === 1) {
        if (flag) {
          this.pageNum = 1;
        }
        this.initPersonFiles();
      } else {
        if (flag) {
          this.pageNum = 1;
          this.faceGuardTotal();
        }
        this.faceGuard();
      }
    },
    // 获取查询条件
    handleQuery(params) {
      this.params = params;
      this.chooseApi();
    },
    // 修改size
    sizeChange(val) {
      this.size = val;
      this.chooseApi(false);
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.chooseApi(false);
    },
    init() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.size,
        searchStr: this.keyword,
      };
      // 获取后端数据
    },
    // 人脸门禁的查询 + 近 7 小时进出统计
    faceGuard() {
      if (!this.params.time) {
        this.params.time = [
          timeDate(new Date().getTime()),
          timeDate(new Date().getTime()),
        ];
      }
      let queryParams = {
        pageNum: this.pageNum,
        pageSize: this.size,
        personName: this.params.name || undefined,
        startSwingTime: this.params.time[0] + " 00:00:00",
        endSwingTime: this.params.time[1] + " 23:59:59",
        openType: 61, // 进门，刷脸
      };
      getFaceGuard(queryParams).then(async (res) => {
        // 结果是 JSON 格式
        this.listData = JSON.parse(res.result).data.pageData;
        this.listData.forEach((item) => {
          item.channelName = item.channelName.split("人脸门禁")[0];
          // item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`;
          item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`;
        });
        // 近 7 小时进出统计
        const recordRes = await getRecord({});
        if (recordRes.code === 0) {
          const timeList = [];
          const dataList = [];
          recordRes.data.forEach((item) => {
            timeList.push(item.time);
            dataList.push(item.value);
          });
          this.recordData = { timeList, dataList };
        } else {
          this.recordData = { timeList: [], dataList: [] };
        }
        this.loading = false;
      });
    },
    // 人脸门禁总条数
    faceGuardTotal() {
      if (!this.params.time) {
        this.params.time = [
          timeDate(new Date().getTime()),
          timeDate(new Date().getTime()),
        ];
      }
      let queryParams = {
        personName: this.params.name || undefined,
        startSwingTime: this.params.time[0] + " 00:00:00",
        endSwingTime: this.params.time[1] + " 23:59:59",
        openType: 61, // 进门，刷脸
      };
      getFaceGuardTotal(queryParams).then((res) => {
        console.log("total:", JSON.parse(res.result));
        this.total = JSON.parse(res.result).data;
        if(this.isTotal === false) {
          this.total1 = JSON.parse(res.result).data;
          this.isTotal = true;
        }
      });
    },
    // 档案管理
    initPersonFiles() {
      getPersonFiles({
        searchKey: "",
        pageNum: this.pageNum,
        pageSize: this.size,
        departmentId: this.params.departmentId || 5,
        isContain: true,
        statusList: [1, 2],
      }).then(async ({ success, result }) => {
        if (success) {
          const listData = JSON.parse(result);
          this.listData = listData.data.pageData;
          console.log(this.listData);
          this.total = listData.data.totalRows;
          this.listData.forEach((item) => {
            item.personBiosignatures[0].path = `${this.ip}/video/picture/get?path=${item.personBiosignatures[0].path}`;
          });
        }
      });
    },
    // 点击图片放大
    clickImg(url) {
      this.dialogVisible = true;
      this.imgUrl = url;
    },
  },
};
</script>

<style scoped>
.person-admin {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
/* 进出统计 */
.charts {
  height: 250px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>