daily.vue

<template>
  <div class="daily">
    <!-- 小时分钟合并 -->
    <div class="asis-table-wrapper">
      <h3 class="asis-table-header single-report-header tf-table-header">
        <span
          class="asis-table-download"
          @click="downloadData(i18nFormatter(detailData_title) + '-' + Time(),radioDate)"
        >{{$t('allPages.load')}}</span>
        <span class="report-type-box">
          <span :class="barLineIcon" @click="selReport('bar')"></span>
          <span
            :class="isDTabChart ? 'report-item report-item-tab' : 'report-item'"
            @click="selReport('table')"
          ></span>
        </span>
      </h3>
      <div class="date-radio-wrapper tf-ratio-group single-ratio-group">
        <el-radio-group
          v-model="radioDate"
          size="mini"
          fill="#0069FF"
          @change="changeTabSelect(radioDate)"
        >
          <el-radio-button label="hour" border>{{$t('button.hour')}}</el-radio-button>
          <el-radio-button label="minute" border>{{$t('button.min')}}</el-radio-button>
        </el-radio-group>
      </div>
      <ul class="legend">
          <li v-for="(item,index) in mallNameList" :key="index">
              <span :style="{'background-color': colorArr[index]}"></span><span>{{item}}</span>
          </li>
      </ul>
      <div class="asis-table-content" v-loading="loading">
        <el-table
            v-show="isDTabChart"
            class="asis-table baseasis-table"
            id="domBaseTrafficFlow"
            :data="tabOps"
            header-row-class-name="asis-table-head"
            style="width: 100%"
            :max-height="tableHeight"
          >
          <comp-column v-for="(item, index) in tabHeadData" :key="index" :col="item" />
        </el-table>
        <!-- echarts 图表 -->
        <div v-show="!isDTabChart">
            <el-row>
                <el-col :span="8" v-for="(item,index) in chartData.length" :key="item">
                    <p>{{chartData[index].title}}</p>
                   <mix-charts
                     :chartId="'bdlineChart'+item"
                     class="area-line-chart"
                     :style="{ height: 300 + 'px' }"
                     :chartData="chartData[index]"
                     chartType="AreaLineNew"
                   /> 
                </el-col>
            </el-row>
        </div>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import exportData from "../../public/exportData";
import publicChart from "../common/publicChart";
import CompCol from "../../public/myColum";
import { columnComputed, rowComputed, curryAvgAndSum, combineHeadAndBody } from '@/utils'

export default {
  props: {
    propparam: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    "export-data-dialog": exportData,
    "basic-chart": publicChart,
    "comp-column": CompCol
  },
  data() {
    return {
      loading: true,
      tableKeyToId: {},
      emitData: {},
      radioDate: "hour",
      isDTabChart: false,
      chartTypeOpt: "line",
      chartData: [], // 图数据
      tabHeadData: [],
      tabOps: [],
      detailData_title:'comprehensiveIndicators',
      configHeadData:[],
      colorArr:["#3BB8FF", "#FFC62E", "#97c05c", "#154bee", "#d83965",
                "#9036aa", "#e35241", "#4fb9d1", "#3f9488", "#97c05c",
                "#154bee", "#FF9631", "#f39c38", "#e35241"],
      mallNameList:[]
    };
  },
  computed: {
    barLineIcon() {
      if (this.isDTabChart) {
        return "report-item line-report";
      } else {
        return "report-item line-report report-item-line";
      }
    },
    tableHeight() {
      let windowHeight = window.innerHeight,
        scale = 0.34
      
      scale = windowHeight <= 720
        ? 0.4
        : windowHeight <= 768
          ? 0.38
          : windowHeight <= 900
            ? 0.36
            : windowHeight <= 1080
              ? 0.34
              : 0.34
      return windowHeight - windowHeight * scale
    }
  },
  watch: {
    propparam: {
      handler: "refreshHandle",
      immediate: true
    }
  },
  created() {
  },
  methods: {
      i18n(title) {
        let languageTitle = "format." + title;
        return this.$t(languageTitle);
      },
    refreshHandle(param) {
        if(param.data){
            this.configHeadData = param.data.indicatorVal
            this.emitData = param.data;
            this.mallNameList = param.data.asis_nameList
            this.getData();
        }
    },
    // 获取表格数据
    getTableData(resData) {
        if(resData['multiMallPassengerFlowTable']){
            let originData = JSON.parse(JSON.stringify(resData['multiMallPassengerFlowTable'].series))
            let flowHeadData = JSON.parse(JSON.stringify(resData.multiMallPassengerFlowTable.xaxis.data));
            this.tabHeadData = this.dealThead(flowHeadData);
            if(this.configHeadData && this.configHeadData.length>0){
                this.tabHeadData.forEach((item,index)=>{
                    if(index>0){
                        if(this.configHeadData.includes(item.label)){
                            item.isShow = 1
                        }else{
                            item.isShow = 2
                        }
                    }
                })
            }
            resData['multiMallPassengerFlowTable'].series.forEach((item,index)=>{
                let temp = {};
                item.data.forEach((dataItem, dataIndex)=>{
                    temp["defaultOrg" + dataIndex] = dataItem != null ? dataItem : "--";
                })
                this.tabOps.push(temp);
            })
        }
    },
    // 获取统计图数据
    getEcartsData(resData,index) {
      let chartOption = resData;
      chartOption["otherConf"] = {
        _color:this.colorArr ,
        hasYaxisName: false,
        periodTime: this.radioDate === "day" ? false : true,
        nextTimeNum: this.radioDate === "minute" ? 10 : undefined,
        chartKey: this.radioDate,
        yAxisName:(resData.key=="deepShoppingRateChart" || resData.key=="enterRateChart")?'%':(resData.key=="humanEffectChart"||resData.key=="perAreaValueChart")?'':this.i18n("perTime")
      };
      if (/\,/.test(this.emitData.asis_org)) {
        chartOption["otherConf"][
          "selectedLen"
        ] = this.emitData.asis_org.split(",").length;
      }
      this.chartData[index] = chartOption;
    },
    getData() {
      this.tabHeadData = [];
      this.chartData = [];
      this.tabOps = [];
      this.loading = true;
      let param = {
        orgIds: this.emitData.asis_org,
        startDate: this.emitData.startDate,
        endDate: this.emitData.endDate,
        type: this.isDTabChart ? "table" : "line",
        option: this.radioDate
      }
      this.$api.analysisReport.getPassengerFlowMultiMallStatistics(param).then(res => {
          let resData = res.data.data.body;
          this.loading = false;
          if (this.isDTabChart) { // 表格
            this.getTableData(resData)
          } else { // 图
            Object.keys(resData).forEach((key) => {
                resData[key].key = key
                this.chartData.push(resData[key])
            })
            this.chartData.forEach((item,index)=>{
                this.getEcartsData(item,index)
            })
          }
        })
        .catch(err => {
          this.catchErrorHandle(err);
          setTimeout(() => {
            this.loading = false;
          }, 500);
        });
    },
    // 新增表格回调
    /**
     * 表头格式化
     * @param {array} originHeadData
     * @param {string} addColumn { 'avg' | 'sum' | 'avgAndTotal' }
     */
    dealThead(theadData) {
      let cols = [],
        $index = 0;
      cols = theadData.map((item, index) => {
        if (/^\[.+\]$/.test(item)) {
          let formatItem = eval(item);
          return {
            label: formatItem[0],
            children: formatItem.map((childItem, childIndex) => {
                if (childIndex > 0) {
                  return {
                    prop: "defaultOrg" + $index++,
                    label: childItem,
                    width: 150
                  };
                } else {
                  return false;
                }
              })
              .filter(Boolean)
          };
        } else {
          return {
            prop: "defaultOrg" + $index++,
            label: item,
            fixed: true,
            width: 120
          };
        }
      });
      return cols;
    },
    // 切换 button group
    changeTabSelect(val) {
      this.getData();
    },
    selReport(iconType) {
      if (iconType === "line" || iconType === "bar") {
        this.isDTabChart = false;
        this.getData();
        this.$emit('indicatorShow',false)
      } else {
        this.isDTabChart = true;
        this.$emit('indicatorShow',true)
        this.getData();
      }
    },
    downloadData(title, chartKey) {
      if (this.isDTabChart) {
        this.dealExport("domBaseTrafficFlow", title);
      } else {
          let language = localStorage.getItem('lang');
          if(language){
              var languageObj = {
                  zh_CN: 'zh_CN',
                  en_US: 'en_US',
                  zh_TW: 'zh_TW',
              }
              language = '&localLanguage=' + languageObj[language];
          }
          let Url = window._vionConfig.apiUrl + '/multiMall/passengerFlow/export?'
          let dowloadUrl = Url + language + `&orgIds=${this.emitData.asis_org}&startDate=${this.emitData.startDate}&endDate=${this.emitData.endDate}&type=${this.isDTabChart ? "table" : "line"}&option=${this.radioDate}&authorization=${this.$cookie.get("atoken")}`;
          window.open(dowloadUrl)
      }
    }
  }
};
</script>

<style scoped lang="less">
.asis-table-wrapper {
  position: relative;
}
.legend{
    li{
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 10px;
        span{
            display: inline-block;
            border-radius: 50%;
            &:first-child{
                width: 15px;
                height: 15px;
                margin-right: 5px;
            }
        }
    }
}
</style>