gateflow.vue

<template>
  <div class="gateflow-wrapper">
    <el-header>
      <span class="behavior-title">{{ repTitle }}{{$t('Behavior.gateFlow')}}</span>
    </el-header>
    <!-- @emitTitle="getTitle" -->
    <test-option
      @emitParams="getPatams"
      @startLoading="startLoad"
      ref="searchRef"
    ></test-option>
    <!-- <el-main>Main</el-main> -->
    <div class="element-main behavior-main" style="margin-top: 114px">
      <!-- 监控点人脸客流统计详情 -->
      <div class="asis-table-wrapper">
        <h3 class="asis-table-header">
          <span class="asis-table-title">{{ i18nFormatter(faceTrafficDetail_title) }}</span>
          <span
            class="asis-table-download"
            @click="dealExport('domFaceTrafficDetail', i18nFormatter(faceTrafficDetail_title))"
          >{{$t('allPages.load')}}</span>
        </h3>
        <div class="asis-table-content">
          <el-table
            id="domFaceTrafficDetail"
            class="asis-table"
            :data="faceTrafficDetail_ops"
            header-row-class-name="asis-table-head"
            show-summary
            :summary-method="getSummaries"
            v-loading="loading"
            style="width: 100%"
          >
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              align="center"
              v-for="item in faceTrafficDetail_head"
              :key="item.prop"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <el-row class="chart-wrapper" :gutter="8">
        <el-col :span="8" class="download-parent">
          <!-- 监控点人脸客流统计 -->
          <my-chart
            id="faceTrafficChart"
            class="gender-chart"
            :options="faceTrafficOps"
            chartType="horFtBar"
          ></my-chart>
          <span class="ehcarts-title">{{ i18nFormatter(faceTraffic_title) }}</span>
          <span
            class="download-text"
            @click="exportDataHandle('faceTrafficChart',i18nFormatter(faceTraffic_title),'faceTraffic')"
          >{{$t('allPages.load')}}</span>
        </el-col>
        <el-col :span="8" class="download-parent">
          <!-- 监控点人脸性别比例统计 -->
          <my-chart
            id="faceGenderRatioChart"
            class="gender-chart"
            :options="faceGenderRatio_ops"
            chartType="horFgBar"
          ></my-chart>
          <span class="ehcarts-title">{{ i18nFormatter(faceGenderRatio_title) }}</span>
          <span
            class="download-text"
            @click="exportDataHandle('faceGenderRatioChart',i18nFormatter(faceGenderRatio_title),'faceGenderRatio')"
          >{{$t('allPages.load')}}</span>
        </el-col>
        <el-col :span="8" class="download-parent">
          <!-- 监控点人脸年龄比例统计 -->
          <my-chart
            id="faceAgeRatioChart"
            class="gender-chart"
            :options="faceAgeRatio_ops"
            chartType="areaAge"
          ></my-chart>
          <span class="ehcarts-title">{{ i18nFormatter(faceAgeRatio_title) }}</span>
          <span
            class="download-text"
            @click="exportDataHandle('faceAgeRatioChart',i18nFormatter(faceAgeRatio_title),'faceAgeRatio')"
          >{{$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/gateflowOps";
import chart from "./common/chart";
export default {
  data() {
    return {
      repTitle: "",
      faceTraffic_title: "", //监控点人脸客流统计
      faceTrafficOps: {},
      faceTrafficDetail_title: "", //监控点人脸客流统计详情
      faceTrafficDetail_head: [],
      faceTrafficDetail_ops: [],
      faceGenderRatio_title: "", //监控点人脸性别比例统计
      faceGenderRatio_ops: {},
      faceAgeRatio_title: "", //监控点人脸性别比例统计
      faceAgeRatio_ops: {},
      loading: true,
      tableKeyToId: {},
      tableIds: "",
      emitData: {}
    };
  },
  components: {
    "test-option": testOption,
    "my-chart": chart
    //     'common-tab': commonTable,
    //     'common-chart':commonChart
  },
  created() {
    window.addEventListener("resize", () => {
      try {
        let timeHeatEChartsUtil = {
          chart1: $("#faceTrafficChart")[0],
          chart2: $("#faceGenderRatioChart")[0],
          chart3: $("#faceAgeRatioChart")[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() {
  },
  methods: {
    getTableId() {
      this.tableKeyToId = {};
      this.tableIds = "";
      this.$api.baseReport
        .reportChart({
          report: "faceDistribution"
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          let tableItem = res.data.data;
          tableItem.forEach((item, index) => {
            this.tableKeyToId[item.key] = item.id;
            if (index == tableItem.length - 1) {
              this.tableIds += item.id;
            } else {
              this.tableIds += item.id + ",";
            }
          });
          this.getTableData(this.tableIds);
        });
    },
    getTableData(tableIds) {
      if (!tableIds) return;
      // this.faceTrafficOps = {};
      // this.faceTrafficDetail_ops = [];
      // this.faceGenderRatio_ops = {};
      let apiUrl = "",
        param = {};
      apiUrl = "/report/faceDistribution/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: tableIds
        // kpiType: this.emitData.asis_kpi,
        // _t: Date.parse(new Date()) / 1000
      };
      this.$api.flowReport
        .faceDistribution(param)
        .then(res => {
          let result = res.data;
          let report = "faceDistribution";
          // this.faceTraffic_title = result.data.body.faceTraffic.title;
          // this.faceTrafficDetail_title = result.data.body.faceTrafficDetail.title;
          // this.faceGenderRatio_title = result.data.body.faceGenderRatio.title;
          // this.faceAgeRatio_title = result.data.body.faceAgeRatio.title;
          this.faceTrafficDetail_title = report + "faceTrafficDetail";
          this.faceTraffic_title = report + "faceTraffic";
          this.faceGenderRatio_title = report + "faceGenderRatio";
          this.faceAgeRatio_title = report + "faceAgeRatio";
          // 表头
          let fTrafficDetailHead =
            result.data.body.faceTrafficDetail.xaxis.data;
          fTrafficDetailHead.unshift(this.$t("table.order"));
          this.faceTrafficDetail_head = this.autoComplateHead(
            "faceTrafficDetail",
            fTrafficDetailHead
          );
          // 数据渲染dom
          let faceTraffic_series = result.data.body.faceTraffic;
          faceTraffic_series["color"] = ["#3BB8FF", "#FFC62E"];
          this.faceTrafficOps = faceTraffic_series;
          // this.faceTraffic_title = faceTraffic_series.title;
          let fTrafficDetail_series = result.data.body.faceTrafficDetail.series;
          let faceGender_series = result.data.body.faceGenderRatio;
          faceGender_series["color"] = ["#3BB8FF", "#FFC62E", "#6e6fc1"];
          this.faceGenderRatio_ops = faceGender_series;
          // this.faceGenderRatio_title = faceGender_series.title;
          let faceAge_series = result.data.body.faceAgeRatio;
          faceAge_series["color"] = [
            "#6e6fc1",
            "#33bafe",
            "#fec62b",
            "#ff9c01",
            "#38d4be",
            "#79ce4c"
          ];
          this.faceAgeRatio_ops = faceAge_series;
          // this.faceAgeRatio_title = faceAge_series.title;
          // 表格数据渲染
          fTrafficDetail_series.forEach((item, index) => {
            item.data.unshift(index + 1);
          });
          this.faceTrafficDetail_ops = this.dealData(
            fTrafficDetail_series,
            this.faceTrafficDetail_head
          );
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        })
        .catch(err => {
          this.catchErrorHandle(err);
          // console.log('base err:', err.message, err)
        });
    },
    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 === "gateFlow") {
        this.faceTrafficDetail_ops = [];
        this.loading = true;
        this.faceTrafficOps = {};
        this.faceGenderRatio_ops = {};
        this.faceAgeRatio_ops = {};
      }
    },
    getPatams(param) {
      this.emitData = param;
      this.repTitle = param.title;
      // this.loading = true;
      if (this.tableIds) {
        this.getTableData(this.tableIds);
      } else {
        this.getTableId();
      }
    },
    getTitle(tit) {
      this.repTitle = tit;
    },
    exportDataHandle(domId, title, chartKey) {
      //
      let chartId = this.tableKeyToId[chartKey];
      let exportNeed = {
        domId: domId,
        title: title,
        data: {
          url: "/report/faceDistribution/gate/" + chartId + "/excel",
          params:
            "orgIds=" +
            this.emitData.orgIds +
            "&startDate=" +
            this.emitData.startDate +
            "&endDate=" +
            this.emitData.endDate
        }
      };
      // console.log('gateflow day exportNeed', exportNeed)
      this.$refs.exportDialog.dialogInit(exportNeed);
    }
  }
};
</script>

<style scoped>
.gateflow-wrapper {
  width: 100%;
  height: calc(100% - 114px);
}

/* 通道客流统计 */
.chart-wrapper {
  margin-bottom: 12px;
}

#faceTrafficChart,
#faceGenderRatioChart,
#faceAgeRatioChart {
  height: 540px;
  background-color: #fff;
}

@media only screen and (max-width: 1680px) {
  #faceTrafficChart,
  #faceGenderRatioChart,
  #faceAgeRatioChart {
    height: 540px;
    background-color: #fff;
  }
}
@media only screen and (max-width: 1440px) {
  #faceTrafficChart,
  #faceGenderRatioChart,
  #faceAgeRatioChart {
    height: 436px;
    background-color: #fff;
  }
}
@media only screen and (max-width: 1366px) {
  #faceTrafficChart,
  #faceGenderRatioChart,
  #faceAgeRatioChart {
    height: 436px;
    background-color: #fff;
  }
}
@media only screen and (max-width: 1280px) {
  #faceTrafficChart,
  #faceGenderRatioChart,
  #faceAgeRatioChart {
    height: 436px;
    background-color: #fff;
  }
}
</style>