customtrack.vue

<template>
  <div class="base-analysis">
    <el-header height="70px">
      <span class="asis-title">{{ asisName }}&nbsp;{{$t('Behavior.CustomTrack')}}</span>
      <span class="more-option-wrapper" @click="showCollapse">
        <span class="more-option-text">{{$t('asis.moreOp')}}</span>
        <i
          :class="['el-icon-arrow-down', 'more-option-arrow', { 'more-option-up': !moreOptVisible }]"
        ></i>
      </span>
    </el-header>
    <track-option
      v-show="moreOptVisible"
      ref="init"
      :mallData="mallData"
      @reportTime="reportHandler"
      @initData="initTab"
    />
    <div class="element-main track-main">
      <!-- <router-view :propparam="propParams"></router-view> -->
      <div class="track-list">
        <el-table
          :data="tableData"
          :max-height="tableHeight"
          class="track-table"
          style="width: 100%;"
          v-loading="loading"
          header-row-class-name="behavior-thead"
        >
          <el-table-column :label="$t('table.order')" align="center" prop="seriesNum" width="100"></el-table-column>
          <el-table-column :label="$t('table.age')" align="center" prop="age"></el-table-column>
          <el-table-column :label="$t('table.gender')" align="center" prop="gender"></el-table-column>
          <el-table-column :label="$t('table.expression')" align="center" prop="mood"></el-table-column>
          <el-table-column :label="$t('table.type')" align="center" prop="personType"></el-table-column>
          <el-table-column :label="$t('table.time')" align="center" prop="counttime"></el-table-column>
          <el-table-column :label="$t('table.faceMap')" align="center">
            <template slot-scope="scope">
              <el-popover placement="left" title trigger="hover">
                <div class="face-img-box" slot="reference">
                  <!-- <img :src="dealImg(scope.row.facePic)" width="50" height="50" @mouseover="picPopover($event, scope)" @mouseout="mouseOut" alt=""> -->
                  <img
                    :src="dealImg(scope.row)"
                    width="50"
                    height="50"
                    alt
                    class="face-img"
                    @error="dealErrImg($event)"
                  />
                </div>
                <img
                  :src="dealImg(scope.row)"
                  width="200"
                  height="200"
                  :alt="dealImg(scope.row)"
                  @error="dealErrImg($event)"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.operate')" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                @click="showAll(scope.row)"
                type="text"
                size="small"
                class="tab-btn"
              >{{$t('dialog.allCapture')}}</el-button>
              <el-button
                @click="showTrack(scope.row)"
                type="text"
                size="small"
                class="tab-btn"
              >{{$t('button.showTrack')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-wrapper">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="pageArr"
            :page-size="pageSize"
            @size-change="sizeChange"
            @current-change="handleCurrentChange"
            layout="sizes, prev, pager, next, slot"
            :total="totalPage"
          >
            <span
              class="slot-pagination-ele slot-ele-total"
            >{{$t('table.pageHead')}} {{ totalPage }} {{$t('table.pageTail')}}</span>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 轨迹图 -->
    <track-dialog ref="showTrack"></track-dialog>
    <!-- 查看所有图片 -->
    <showall-dialog ref="showAllImg"></showall-dialog>
  </div>
</template>

<script>
import trackOption from "../common/option/cusTrackMoreOption";
import defaultImg from "@/assets/img/behavior/default.png";
import trackDialog from "./trackDialog";
import showallDialog from "./showallDialog";
export default {
  data() {
    return {
      moreOptVisible: false,
      mallData: [],
      asisName: "",
      asisLevel: "",
      propParams: {},
      tableData: [],
      tableHeight: "",
      loading: true,
      currentPage: 1,
      pageArr: [10, 50, 100],
      pageSize: 10,
      totalPage: 0,
      personTypeList: []
    };
  },
  components: {
    "track-option": trackOption,
    "track-dialog": trackDialog,
    "showall-dialog": showallDialog
  },
  created() {
    let winH = $(window).height(),
      scale = 0.34;
    if (winH <= 720) {
      scale = 0.4;
    } else if (winH <= 768) {
      scale = 0.38;
    } else if (winH <= 900) {
      scale = 0.36;
    } else if (winH <= 1080) {
      scale = 0.34;
    }
    this.tableHeight = winH - winH * scale;
  },
  mounted() {
    this.getMallOpt();
    this.showCollapse();
  },
  methods: {
    dealErrImg(e) {
      let ev = e || window.event;
      ev.target.src = defaultImg;
    },
    showCollapse() {
      // 获取上面元素的高度
      let headerH = "",
        titleH = "",
        collapseH = "",
        mt = "";
      headerH = this.getStyleFn(".el-header", "height");
      titleH = this.getStyleFn(".analysis-wrapper .el-header", "height");
      if (this.moreOptVisible) {
        this.moreOptVisible = false;
        mt = headerH + titleH + 8 + "px";
        $(".track-main").animate({ marginTop: mt });
      } else {
        this.moreOptVisible = true;
        setTimeout(() => {
          collapseH = this.getStyleFn(".analysis-option-wrapper", "height");
          mt = headerH + titleH + collapseH + 8 + "px";
          $(".track-main").animate({ marginTop: mt });
        }, 100);
      }
    },
    getMallOpt() {
      let param = {
        accountId: this.$cookie.get("accountId"),
        status: 1
      };
      this.zoneFilterMall(param, 4).then(
        resolveData => {
          let { mallData, localMallId, titleName } = resolveData;
          this.mallData = mallData;
          this.asisName = titleName;
          this.$refs.init.initAsis(
            localMallId === "" ? null : Number(localMallId)
          );
        },
        rejectData => {
          console.log(rejectData);
        }
      );
    },
    getTableData() {
      this.tableData = [];
      const { propParams, currentPage, pageSize, getLocalDic, personTypeFormatter } = this;
      const { asis_org, asis_type, asis_time, asis_filter } = propParams;
      if (!asis_org) return;
      let tableParams = {
        mallId: asis_org,
        personType: asis_type,
        countdate: asis_time,
        page: currentPage,
        pageSize: pageSize,
        direction: 1,
        age_gte: 0,
        sortName: "counttime",
        // 0:  过滤抓拍次数大于0的数据; 1: 过滤抓拍次数大于1的数据
        filterSize: asis_filter,
        sortOrder: "DESC"
      };
      this.$api.flowReport
        .uniqueCaptureRecord(tableParams)
        .then(res => {
          let result = res.data;
          if (result.code == 200) {
            this.totalPage = result.data.total;
            result.data.list.forEach((item, index) => {
              item.pic =
                item.channelSerialnum +
                "|" +
                (item.facePic ? item.facePic : "0");
              item.seriesNum =
                (currentPage - 1) * pageSize + index + 1;
              item.age =
                item.age !== "null" && item.age >= 0 ? item.age : "未知";
              item.gender =
                item.gender !== "null"
                  ? this.getLocalDic("gender", item.gender)
                    ? this.getLocalDic("gender", item.gender)
                    : "--"
                  : "--";
              item.mood =
                item.mood !== "null"
                  ? this.getLocalDic("mood", item.mood)
                    ? this.getLocalDic("mood", item.mood)
                    : this.$t("dictionary.unknow")
                  : "--";
              item.personType =
                item.personType !== "null"
                  ? personTypeFormatter(item.personType)
                  : "--"
              item.counttime =
                item.counttime !== "null" ? item.counttime : "--";
              item.countdate =
                item.counttime !== "null" ? item.counttime : "--";
            });
            this.tableData = result.data.list;
            setTimeout(() => {
              this.loading = false;
            }, 1000);
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "获取顾客轨迹失败!" + result.msg
            });
          }
        })
        .catch(err => {
          this.catchErrorHandle(err);
        });
    },
    personTypeFormatter(personType) {
      const matched = this.personTypeList.find(item => item.id === personType);
      return (matched && matched.name) || this.$t("dictionary.unknow")
      // this.$t("dictionary.custom");
    },
    sizeChange(val) {
      this.pageSize = val;
      this.loading = true;
      this.getTableData();
    },
    handleCurrentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.loading = true;
        this.getTableData();
      } else {
        this.currentPage = val;
        this.loading = true;
        this.getTableData();
      }
      // this.$refs.searchRef.searchHandle(val, this.pageSize);
    },
    initTab(data, personTypeList) {
      this.loading = true;
      this.asisName = data.asis_tit;
      this.propParams = data;
      this.currentPage = 1;
      this.personTypeList = JSON.parse(JSON.stringify(personTypeList));
      this.setStaffDic(data.mallId);
    },
    reportHandler(emitData, personTypeList) {
      this.loading = true;
      this.asisName = emitData.asis_tit;
      this.propParams = emitData;
      this.currentPage = 1;
      this.personTypeList = JSON.parse(JSON.stringify(personTypeList));
      this.setStaffDic(emitData.mallId);
    },
    setStaffDic(mall_id) {
      this.$api.management
        .staff({
          mallId: mall_id
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          let result = res.data;
          result.data.forEach(item => {
            this.setSessionLocal("staff-" + item.personUnid, item.name);
          });
          this.getTableData();
        });
    },
    getLocalDic(name, val) {
      if (window.sessionStorage.getItem(name + "-" + val)) {
        return this.$t(
          "dictionary." + window.sessionStorage.getItem(name + "-" + val)
        );
      } else {
        return val;
      }
    },
    dealImg(row) {
      let serialnum = row.pic.split("|")[0];
      let picsrc = row.pic.split("|")[1];
      let date = row.counttime.split(" ")[0];
      let year = date.split("-")[0];
      let month = date.split("-")[1];
      let day = date.split("-")[2];
      let dateStr = year + month + day;
      let img_path =
        picsrc === "0"
          ? defaultImg
          : window._vionConfig.picUrl +
            "/picture/face/" +
            dateStr +
            "/" +
            serialnum +
            "/" +
            picsrc;
      return img_path;
    },
    showAll(row) {
      this.$refs.showAllImg.dialogInit(row.personUnid, this.propParams);
    },
    showTrack(row) {
      // 显示轨迹
      this.$refs.showTrack.dialogInit(row.personUnid, this.propParams);
    }
  }
};
</script>

<style scoped>
.face-img-box {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid #dcdcdc;
  margin: 0px auto;
  cursor: zoom-in;
}

.face-img {
  width: 50px;
  height: 50px;
}

.track-list {
  background-color: #fff;
  padding-bottom: 20px;
}
.slot-ele-total {
  margin-right: 10px;
  font-weight: 400;
  color: #606266;
  float: left;
}
</style>