queueRecords.vue

<template>
  <div class="camera-wrapper">
    <el-header>
      <span class="behavior-title">{{$t('Behavior.capturecamera')}}</span>
    </el-header>
    <test-option
      :person-type-list="personTypeList"
      @emitParams="getPatams"
      @startLoading="startLoad"
    ></test-option>
    <div class="element-main behavior-main" v-loading="loading" style="margin-top: 160px">
      <div class="behavior-table-page download-parent" :style="{ height: 'calc(100% - 1px)' }">
        <div class="behavior-table" :style="{ height: 'calc(100% - 50px)', overflowY: 'auto' }">
          <ul class="shotpic-wrapper" >
            <li
              v-if="tableData.length == 0"
              style="text-align: center; margin: 10px 0; color: #909399;"
            >{{ $t('echartsTitle.noData') }}</li>
            <li class="shotpic-item"  v-for="(item, index) in tableData" :key="index">
              <div class="shotpic-img">
                <img
                  :src="dealImg(item)"
                  @error="dealErrImg"
                  @click="showAllImg(item)"
                  :style="imgStyle"
                />
              </div>
              <div>
                <p class="shotpic-info snap-info-wrapper">
                  <span
                    class="shotpic-text__left"
                    style="text-align: left"
                  >{{ personTypeFormatter(item.personType) }}</span>
                </p>
                <p class="shotpic-info snap-info-wrapper" style="text-align: left">
                  <span
                    class="shotpic-text__left"
                    style="text-align: left"
                  >trackTime: {{Math.floor(item.trackTime/60)}}min{{item.trackTime%60}}s</span>
                </p>
                <p class="shotpic-info snap-info-wrapper" style="text-align: left">
                  <el-tooltip class="item" effect="light" :content="item.counttime" placement="top">
                    <span class="shotpic-text">{{ item.counttime }}</span>
                  </el-tooltip>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="page-wrapper" style="margin-top: 5px">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="pageArr"
            :page-size="pageSize"
            @size-change="sizeChange"
            @current-change="handleCurrentChange"
            layout="sizes, prev, pager, next, slot, jumper"
            :total="totalPage"
          >
            <span
              class="slot-ele-total"
            >{{$t('table.pageHead')}} {{ totalPage }} {{$t('table.pageTail')}}</span>
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="isShowAll"
      v-if="isShowAll"
      :close-on-click-modal="false"
      class="manage-dialog"
      :before-close="closeDialog"
      width="1000"
      :title="$t('button.showTrack')"
    >
      <div v-loading='canvasLoading' style="width: 100%;text-align: center;padding: 40px 0;height: 100%;">
        <canvas id="cameraCanvas" class="xycanvas"></canvas>
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button @click="isShowAll = false" class="dialog-btn">{{ $t('dialog.close') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import testOption from "./common/option/queueRecordsOption";
import defaultImg from "@/assets/img/behavior/default.png";
import femaleImg from "@/assets/img/behavior/female.png";
import maleImg from "@/assets/img/behavior/male.png";
import { param, cleanObject, param2Obj, cleanArray } from "@/utils";
import _ from 'underscore';
export default {
  components: {
    "test-option": testOption
  },
  data() {
    return {
      canvasLoading:true,
      cmeraImage:'',
      canvasDevice: null, //canvas实例
      ctxDevice:null,
      tableData: [],
      currentPage: 1,
      pageArr: [45, 90, 135],
      pageSize: 45,
      totalPage: 0,
      repTitle: "",
      loading: true,
      tableHeight: 0,
      emitData: {},
      shotList: [],
      isShowAll: false,
      personData: {},
      lang: null,
      imgStyle: {},
      dialogImgStyle: {},
      showAllModel: true,
      isNewCustomer: true,
      clickUnid: "",
      snapLoading: true,
      loadText: "",
      personTypeList: [],
      picType: 'body',
      clientHeight: (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight
    };
  },
  created() {
    this.tableHeight = this.calcTabMaxHeight();
    window.addEventListener("resize", () => {
      this.tableHeight = this.calcTabMaxHeight();
    });
    this.lang = window.localStorage.getItem("lang");
  },
  mounted() {
    this.getPersonTypeList()
  },
  methods: {
    calcTabMaxHeight() {
      return (3 / 5) * window.innerHeight + "px";
    },
    getPersonTypeList() {
      this.personTypeList = []
      return new Promise(resolve => {
        this.$api.management.personTypeList().then(res => {
          const { code, data } = res.data
          if (code === 200) {
            this.personTypeList = data.reduce((arr, curr, index) => {
              arr.push(curr)
              return arr
            }, [])
            resolve()
          }
        })
      })
    },
    getTableData() {
      this.loading = true;
      this.$api.queueManagementApi.getRecognition(this.emitData).then(res => {
          let result = res.data;
          this.loading = false;
          if (result.code == 200) {
            this.totalPage = result.data.total;
            this.tableData = result.data.list;
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: this.$t("message.captureFailed") + result.msg
            });
          }
        })
    },
    dealDate(counttime, fmt = "$1$2$3") {
      return counttime.replace(/^(\d{4})-(\d{2})-(\d{2}).*/, fmt);
    },
    dealImagePath(item) {
      const { dealDate } = this;
      let imageUrl = "";
      if (this.picType == 'body') {
        if(item.bodyPic) {
          imageUrl = item.bodyPath && item.bodyPic
          ? item.bodyPath + item.bodyPic
          : `body/${dealDate(item.counttime)}/${item.channelSerialnum}/${item.bodyPic}`
        }
      } else {
        if(item.facePic) {
          imageUrl = item.facePath && item.facePic
          ? item.facePath + item.facePic
          : `/face/${dealDate(item.counttime)}/${item.channelSerialnum}/${item.facePic}`
        }
      }
      return imageUrl;
    },
    dealImg(row) {
      const imageUrl = this.dealImagePath(row);
      let img_path = "";
      img_path = window._vionConfig.picUrl + "/picture/" + imageUrl;
      return img_path;
    },
    personTypeFormatter(personType, visibleNew) {
      const matched = this.personTypeList.find(item => item.id === personType)
      return matched && matched.name || (visibleNew ? this.$t('table.newCustomer') : this.$t("dictionary.custom"))
    },
    showAllImg(item) {
      let picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.channelSerialnum + ".jpg?t=" + Date.parse(new Date()) / 1000;
      this.isShowAll = true;
      this.canvasLoading = true;
      this.$api.queueManagementApi.getTrajectory({
        personId:item.personUnid,
        countTime:item.counttime
      }).then(res => {
        let result = res.data;
        this.canvasDevice = document.getElementById("cameraCanvas");
        this.ctxDevice = this.canvasDevice.getContext("2d");
        this.canvasDevice.width = 1000;
        this.canvasDevice.height = 500;
        this.cmeraImage = new Image();
        this.cmeraImage.src =picUrl;
        this.cmeraImage.onload = () => {
          this.drawCirlceDevice(result);
        };
      })
    },
    drawCirlceDevice(result){
      this.ctxDevice.clearRect(0, 0, this.canvasDevice.width, this.canvasDevice.height);
      this.ctxDevice.drawImage(this.cmeraImage, 0, 0, this.canvasDevice.width, this.canvasDevice.height);
      let dataList = result.data;
      this.canvasLoading = false
      dataList.forEach((item) => {
        this.ctxDevice.fillStyle = "red";
        this.ctxDevice.beginPath();
        this.ctxDevice.arc(
          (item.x / 1920) * this.canvasDevice.width,
          (item.y / 1080) * this.canvasDevice.height,
          5,
          0,
          2 * Math.PI
        );
        this.ctxDevice.fill();
      });
    },
    closeDialog() {
      this.isShowAll = false;
    },
    dealErrImg(e) {
      let ev = e || window.event;
      ev.target.src = defaultImg;
    },
    handleSizeChange(val) {
      this.emitData.pageSize = val;
      this.pageSize = val;
      this.loading = true;
      this.getTableData();
    },
    handleCurrentChange(val) {
      if (this.currentPage != val) {
        this.emitData.page = val;
        this.currentPage = val;
      } else {
        this.emitData.page = val;
        this.currentPage = val;
        // this.loading = true;
      }
      this.getTableData();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.emitData["pageSize"] = val;
      this.getTableData();
    },
    startLoad(isCurrentPage) {
      if (isCurrentPage === "camera") {
        this.loading = true;
      }
    },
    getPatams(param) {
      this.pageSize = param.pageSize;
      this.currentPage = param.page;
      this.emitData = Object.assign('',param)
      this.getTableData();
    },
  }
};
</script>

<style scoped lang="less">
  .manage-dialog{
    /deep/.el-dialog{
      width: 1200px;
      height: 700px;
    }
  }
  .shotpic-img img{
    height: 250px !important;
  }
.shotpic-text__left{
  width: auto;
  max-width: 140px;
}
.camera-wrapper {
  width: 100%;
  height: calc(100% - 175px);
}



.slot-ele-total {
  margin-right: 10px;
  font-weight: 400;
  color: #606266;
  float: left;
}

.shotpic-info.snap-info-wrapper {
  margin-top: 2px;
  margin-bottom: 2px;
}

.history-snap-item:after,
.history-snap-item::before {
  content: "";
  display: table;
}

.history-snap-item:after {
  clear: both;
}

.snap-title {
  color: #333;
  font-size: 18px;
  padding: 0 6px 0;
  margin-bottom: 6px;
  margin-left: 3px;
  border-left: 4px solid #3bb8ff;
  box-sizing: border-box;
}
</style>