content.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(trafficFlow_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="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"
          >
          <el-table-column
              v-if="tabOps.length"
              type="index"
              :label="$t('table.order')"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <span>{{ indexFormatter(scope) }}</span>
              </template>
          </el-table-column>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-for="(item,index) in tabHeadData"
            :key="index"
            min-width="100"
          >
          </el-table-column>
        </el-table>
       <div v-show="!isDTabChart">
          <div id="bdBarChart" class="area-line-chart" :style="{ height: tableHeight + 'px' }"></div>
        </div>
        <!-- echarts 图表 -->
        <!-- <mix-charts
          v-show="!isDTabChart"
          chartId="bdlineChart"
          class="area-line-chart"
          :style="{ height: tableHeight + 'px' }"
          :chartData="chartData"
          chartType="Rank"
        /> -->
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

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

export default {
  props: {
    propparam: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    "export-data-dialog": exportData,
  },
  data() {
    return {
      loading: false,
      trafficFlow_title: "stayStatistics", //报表
      emitData: {},
      radioDate: "day",
      isDTabChart: false,
      chartTypeOpt: "table",
      chartData: {}, // 图数据
      tabHeadData: [],
      tabOps: [],
      asisLevel: 'mall',
      chart:'',
      option: {
        tooltip: {
          show:false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color:['#3BB8FF'],
        xAxis: {
          type: 'value',
          show:false
        },
        yAxis: {
          type: 'category',
          axisLine:{
            show:false
          },
          axisTick:{
                show:false // 不显示坐标轴刻度线
          },
          data: []
        },
        series: []
      }
    };
  },
  computed: {
    barLineIcon() {
      if (this.isDTabChart) {
        if (this.radioDate === "day") {
          return "report-item bar-report";
        } else {
          return "report-item line-report";
        }
      } else {
        if (this.radioDate === "day") {
          return "report-item bar-report report-item-bar";
        } 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,
      deep:true
    },
    emitData: {
      handler(){

      },
      immediate: true,
      deep:true
    }
  },
  created() {
    this.chartTypeOpt =
      window._vionConfig.reportType && window._vionConfig.reportType == "table"
        ? "table"
        : "bar";
    this.isDTabChart =
      window._vionConfig.reportType && window._vionConfig.reportType == "table"
        ? true
        : false;
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('bdBarChart'));
  },
  methods: {
    refreshHandle(param) {

      this.emitData = param
      // return
      this.getData();
    },
    // 获取表格数据
    getTableData(resData) {
      let originData = JSON.parse(JSON.stringify(resData.series))
      let flowHeadData = JSON.parse(JSON.stringify(resData.xaxis && resData.xaxis.data || []));
      this.tabHeadData = flowHeadData.reduce((arr, curr, index) => {
        arr.push({
          prop: `defaultOrg${index}`,
          label: curr
        })
        return arr
      }, [])
      const tbodyData = originData.reduce((arr, curr) => {
          arr.push(curr.data)
          return arr
        }, [])
      this.tabOps = combineHeadAndBody(this.tabHeadData, tbodyData)
    },
    // 获取统计图数据
    getEcartsData(resData) {
      this.option.yAxis.data = resData.xaxis.data;
      this.option.series = resData.series
      if(this.option.series.length>0){
        this.option.series.forEach(item=>{
          delete item.name
          item.showBackground = true;
          item.backgroundStyle = {
            color: 'rgba(180, 180, 180, 0.2)'
          }
          item.label= {
            show: true,
            formatter :function(params){
              return (params.value)+ '%'
            }
          }
        })
      }
      this.chart.setOption(this.option,true)
    },
    getData() {
      this.tabHeadData = [];
      this.chartData = {};
      this.tabOps = [];
      this.loading = true;
      let param = {
        orgId: this.emitData.orgId,
        startDate: this.emitData.startDate,
        endDate: this.emitData.endDate,
        type: this.isDTabChart ? "table" : "bar",
      }
      this.$api.analysisReport.getResidenceTimeStatistics(param).then(res => {
          let resData = res.data.data.body.ResidenceTimeReport;
          this.trafficFlow_title = "stayStatistics";
          this.chartData = resData;
          this.loading = false;
          if (this.isDTabChart) { // 表格
            this.getTableData(resData)
          } else { // 图
            this.getEcartsData(resData)
          }
        })
        .catch(err => {
          this.catchErrorHandle(err);
          setTimeout(() => {
            this.loading = false;
          }, 500);
        });
    },
    // 新增表格回调
    /**
     * 表头格式化
     * @param {array} originHeadData
     * @param {string} addColumn { 'avg' | 'sum' | 'avgAndTotal' }
     */
    dealTheadData(originHeadData, addColumn) {
      if (originHeadData.length === 0) return originHeadData
      let copyHeadData = originHeadData.slice(0),
        resultHeadData = []

      if (addColumn === 'avg') {
        copyHeadData.push(this.$t('table.average'))
      } else if (addColumn === 'sum') {
        copyHeadData.push(this.$t('table.total'))
      } else if (addColumn === 'avgAndTotal') {
        copyHeadData.push(this.$t('table.average'))
        copyHeadData.push(this.$t('table.total'))
      }

      return copyHeadData.reduce((arr, curr, index) => {
        arr.push({
          prop: `defaultOrg${index}`,
          label: curr
        })
        return arr
      }, [])
    },
    /**
     * 处理表格数据
     * @param {array} data
     * @param {string} addPlace { 'index' | 'column' | 'row' | 'both' }
     * @param {string} addOption { 'avg' | 'sum' | 'avgAndTotal' }
     * @param {number} startPostion
     * @returns {array} result
     */
    dealTableData(data, addPlace, addOption, startPosition = 0) {
      if (!addPlace) return data
      let result = []
      if (addPlace === 'column') {
        result = columnComputed({data, addOption, startPosition})
      } else if (addPlace === 'row') {
        result = rowComputed({data, addOption, startPosition})
      } else {
        let addColAndRow = curryAvgAndSum(columnComputed, rowComputed)
        result = addColAndRow({data, addOption, startPosition})
      }

      return result
    },
    indexFormatter({ $index, row }) {
      const { createRow, tabOps } = this
      const realDataLen = createRow === 'avgAndTotal'
        ? tabOps.length - 2
        : tabOps.length
      if ($index < realDataLen) {
        return $index + 1
      } else {
        return ((realDataLen - $index) === 0) ? this.$t('table.average') : this.$t('table.total')
      }
    },
    selReport(iconType) {
      this.chartTypeOpt = iconType;
      if (iconType === "line" || iconType === "bar") {
        if (this.isDTabChart) {
          this.isDTabChart = false;
          this.getData();
        }
      } else {
        if (!this.isDTabChart) {
          this.isDTabChart = true;
          this.getData();
        }
      }
    },
    downloadData(title, chartKey) {
      if (this.isDTabChart) {
        this.dealExport("domBaseTrafficFlow", title);
      } else {
        this.exportDataHandle(title, chartKey);
      }
    },
    exportDataHandle(title, chartKey) {
      let exportNeed = {
        domId: "bdBarChart",
        title: title,
        data: {
          url: `/basePassengerFlow/residenceTime/export`,
          params: `orgId=${this.emitData.orgId}&startDate=${this.emitData.startDate}&endDate=${this.emitData.endDate}`
        }
      };
      this.$refs.exportDialog.dialogInit(exportNeed);
    }
  }
};
</script>

<style scoped>
.asis-table-wrapper {
  position: relative;
}

.bar-report {
  background: url("~@/assets/img/asis/bar_icon.svg") no-repeat;
  background-size: 100% 100%;
}

.report-item-bar {
  background: url("~@/assets/img/asis/active_bar_icon.svg") no-repeat;
  background-size: 100% 100%;
}
</style>