customgroup.vue

<template>
  <div class="customgroup-wrapper">
    <el-header height="70px">
      <span class="behavior-title">{{ repTitle }}{{$t('Behavior.customGroup')}}</span>
      <span class="more-option-wrapper" @click="showCollapse">
        <span class="more-option-text">{{$t('Behavior.moreOp')}}</span>
        <i
          :class="moreOptVisible ? 'el-icon-arrow-down more-option-arrow' : 'el-icon-arrow-down more-option-arrow more-option-up'"
        ></i>
      </span>
    </el-header>
    <!-- <behavior-option v-show="moreOptVisible"></behavior-option> @emitTitle="getTitle" -->
    <test-option
      v-show="moreOptVisible"
      @emitParams="getPatams"
      @startLoading="startLoad"
      ref="searchRef"
    ></test-option>
    <!-- <el-main>Main</el-main> -->
    <div class="element-main behavior-main">
      <!-- main -->
      <!-- <router-view></router-view> -->
      <!-- 人脸统计详情 -->
      <div class="asis-table-wrapper">
        <h3 class="asis-table-header">
          <!-- {{ DayCountingYoY_title }} -->
          <span class="asis-table-title">{{ i18nFormatter(customData_title) }}</span>
          <span
            class="asis-table-download"
            @click="dealExport('domFeaDayCounting', i18nFormatter(customData_title))"
          >{{$t('allPages.load')}}</span>
        </h3>
        <div class="asis-table-content">
          <common-tab
            v-loading="loading"
            :tableData="customData_ops"
            id="domFeaDayCounting"
            :headData="customData_head"
            :is-summary="true"
            :summary-callback="getSummaries"
            :tabHeight="''"
          />
        </div>
      </div>
      <el-row class="chartRow" :gutter="12">
        <el-col :span="12" class="download-parent">
          <!-- 顾客性别对比 -->
          <common-chart
            id="dgenderChart"
            class="gender-wrapper"
            :options="customerfeatureGender_ops"
            chartType="Pie"
          ></common-chart>
          <span class="ehcarts-title">{{ i18nFormatter(faceGender_title) }}</span>
          <span
            class="download-text"
            @click="exportDataHandle('dgenderChart',i18nFormatter(faceGender_title),'faceGender')"
          >{{$t('allPages.load')}}</span>
        </el-col>
        <el-col :span="12" class="download-parent">
          <!-- 顾客年龄对比 -->
          <public-chart
            id="dageChart"
            class="age-wrapper"
            :options="customerfeatureAge_ops"
            chartType="AgeBar"
          ></public-chart>
          <span class="ehcarts-title">{{ i18nFormatter(faceAge_title) }}</span>
          <span
            class="download-text"
            @click="exportDataHandle('dageChart',i18nFormatter(faceAge_title),'faceAge')"
          >{{$t('allPages.load')}}</span>
        </el-col>
      </el-row>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import testOption from "./common/option/customgroupOps";
import defaultImg from "@/assets/img/behavior/default.png";
import commonTable from "../public/tableCommon";
import publicChart from "../Analysis/common/publicChart";
import commonChart from "./common/chart";
export default {
  data() {
    return {
      moreOptVisible: false,
      tableData: [],
      defaultImg: defaultImg,
      // picApiUrl: window._vionConfig.apiUrl + '/faceRecognitions/face/',
      currentPage: 1,
      pageArr: [10, 50, 100],
      pageSize: 10,
      totalPage: null,
      // popoverVisible: false,
      // hoverPic: '',
      // popPosition: {},
      repTitle: "",
      loading: true,
      tableHeight: 0,
      customData_title: "",
      faceGender_title: "",
      faceAge_title: "",
      customData_ops: [],
      customData_head: [
        {
          label: this.$t("table.totalCount"),
          prop: "all"
        },
        {
          label: this.$t("table.totalNum"),
          prop: "allPeople"
        },
        {
          label: this.$t("table.customerCount"),
          prop: "custom"
        },
        {
          label: this.$t("table.customerNum"),
          prop: "customPeople"
        },
        {
          label: this.$t("table.staffManTime"),
          prop: "clerk"
        },
        {
          label: this.$t("table.staffNum"),
          prop: "clerkPeople"
        }
      ],
      tableKeyToId: {},
      tableIds: "",
      emitData: {},
      customerfeatureAge_ops: {},
      customerfeatureGender_ops: {},
      hasChartKey: ["faceCountDetail", "faceGender", "faceAge"]
    };
  },
  components: {
    "test-option": testOption,
    "common-tab": commonTable,
    "common-chart": commonChart,
    "public-chart": publicChart
  },
  created() {
    window.addEventListener("resize", () => {
      try {
        let timeHeatEChartsUtil = {
          chart1: $("#dgenderChart")[0],
          chart2: $("#dageChart")[0]
        };
        for (let k in timeHeatEChartsUtil) {
          if (
            timeHeatEChartsUtil.hasOwnProperty(k) &&
            timeHeatEChartsUtil[k] != undefined
          ) {
            timeHeatEChartsUtil[k] = this.$echarts.init(timeHeatEChartsUtil[k]);
            var element = timeHeatEChartsUtil[k];
            element.resize();
          }
        }
      } catch (err) {}
    });
  },
  mounted() {
    this.showCollapse();
  },
  methods: {
    showCollapse() {
      // 获取上面元素的高度
      let headerH = "",
        titleH = "",
        collapseH = "",
        mt = "";
      headerH = this.getStyleFn(".el-header", "height");
      titleH = this.getStyleFn(".customgroup-wrapper .el-header", "height");
      if (this.moreOptVisible) {
        this.moreOptVisible = false;
        mt = headerH + titleH + 8 + "px";
        $(".behavior-main").animate({ marginTop: mt });
      } else {
        this.moreOptVisible = true;
        setTimeout(() => {
          if (document.documentMode) {
            collapseH = this.getStyleFn(".behavior-more-option", "height");
            collapseH =
              collapseH +
              this.getStyleFn(".behavior-more-option", "paddingTop") +
              this.getStyleFn(".behavior-more-option", "paddingBottom");
          } else {
            collapseH = this.getStyleFn(".behavior-more-option", "height");
          }
          mt = headerH + titleH + collapseH + 8 + "px";
          $(".behavior-main").animate({ marginTop: mt });
        }, 100);
      }
    },
    getTableId() {
      this.tableKeyToId = {};
      this.tableIds = "";
      this.$api.baseReport
        .reportChart({
          report: "faceAnalyzeSta"
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          let tableItem = res.data.data;
          tableItem.forEach((item, index) => {
            this.tableKeyToId[item.key] = item.id;
            if (this.hasChartKey.indexOf(item.key) != -1) {
              if (index == tableItem.length - 1) {
                this.tableIds += item.id;
              } else {
                this.tableIds += item.id + ",";
              }
            }
          });
          this.getTableData(this.tableIds);
        });
    },
    getTableData(tableIds) {
      if (!tableIds) return;
      // this.customData_ops = [];
      // console.log(this.emitData)
      let apiUrl = "",
        param = {};
      // apiUrl = '/report/faceAnalyzeSta/gate';
      param = {
        orgIds: this.emitData.orgIds,
        startDate: this.emitData.startDate,
        // endDate:this.emitData.endDate,
        // startDate:'2018-05-31 00:00:00',
        endDate: this.emitData.endDate,
        chartIds: this.tableIds
        // kpiType: this.emitData.asis_kpi,
        // _t: Date.parse(new Date()) / 1000
      };
      // }
      this.$api.flowReport
        .faceAnalyzeSta("gate", param)
        .then(res => {
          let result = res.data.data.body;
          setTimeout(() => {
            this.loading = false;
            // this.overflowBar(true);
          }, 500);
          let report = "faceAnalyzeSta";
          let customData_series = result["faceCountDetail"].series; // 人脸统计详情
          // this.customData_title = res.data.data.body['faceCountDetail'].title;
          this.customData_title = report + "faceCountDetail";
          let gender_ops = {};
          gender_ops = result.faceGender;
          gender_ops["color"] = ["#3BB8FF", "#FFC62E", "#6784E3"];
          this.customerfeatureGender_ops = gender_ops;
          // this.faceGender_title = gender_ops.title;
          this.faceGender_title = report + "faceGender";
          result["faceAge"]["color"] = ["#3BB8FF", "#FFC62E"];
          result["faceAge"]["reportType"] = "returnshop";
          this.customerfeatureAge_ops = result.faceAge;
          // this.faceAge_title = age_ops.title;
          this.faceAge_title = report + "faceAge";
          // 处理数据
          this.customData_head = this.autoComplateHead(
            "",
            result["faceCountDetail"].xaxis.data
          );
          this.customData_ops = this.dealData(
            customData_series,
            this.customData_head
          );
        })
        .catch(err => {
          this.catchErrorHandle(err);
          console.log("base err:", err.message, err);
        });
      // this.overflowBar(true);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t("table.total");
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              // fixed 0.1 + 0.2 != 0.3
              return (prev * 1000 + curr * 1000) / 1000;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = "--";
        }
      });

      return sums;
    },
    startLoad(isCurrentPage) {
      if (isCurrentPage === "customgroup") {
        this.customData_ops = [];
        this.loading = true;
        this.customerfeatureAge_ops = {};
        this.customerfeatureGender_ops = {};
      }
    },
    getPatams(param) {
      this.emitData = param;
      this.repTitle = param.title;
      if (this.tableIds) {
        this.getTableData(this.tableIds);
      } else {
        this.getTableId();
      }
    },
    getTitle(tit) {
      this.repTitle = tit;
    },
    exportDataHandle(domId, title, chartKey) {
      // item.key === 'CityTraffic' || item.key === 'CustomerCounting' || item.key === 'Customeradd' || item.key === 'trend7' || item.key === 'trend15' || item.key === 'trend30' || item.key === 'costomer_ranking' || item.key === 'format_costomer_ranking' || item.key === 'customerfeature_sex' || item.key === 'customerfeature_age'
      let chartId = this.tableKeyToId[chartKey];
      let exportNeed = {
        domId: domId,
        title: title,
        data: {
          url: "/report/faceAnalyzeSta/gate/" + chartId + "/excel",
          params:
            "orgIds=" +
            this.emitData.orgIds +
            "&startDate=" +
            this.emitData.startDate +
            "&endDate=" +
            this.emitData.endDate
        }
      };
      // console.log('customgroup exportNeed', exportNeed)
      this.$refs.exportDialog.dialogInit(exportNeed);
    }
  }
};
</script>

<style scoped>
.customgroup-wrapper {
  width: 100%;
}

/* .gender-wrapper,
    .age-wrapper {
        height: 480px;
        background: #fff;
    } */
</style>