index.vue

<template>
  <div class="base-analysis">
      <el-header>
          <span class="asis-title">{{$t('echartsTitle.areaPassengerFlowStatistics')}}</span>
      </el-header>
      <div class=" analysis-option-wrapper">
          <div class="panels-content">
              <li class="condition-item">
                  <span class="condition-item-text">{{ $t('table.grouping') }}:</span>
                  <div class="condition-item-option">
                      <treeselect
                        v-model="groupIds"
                        :max-height="300"
                        class="manage-sel group-parent-sel"
                        :placeholder="$t('pholder.grouping')"
                        :load-options="loadOptions"
                        :options="treeData"
                        @select="parentChange"
                        :loadingText="$t('echartsTitle.loading')"
                        :noChildrenText="$t('echartsTitle.noData')"
                      />
                  </div>
              </li>
              <li class="condition-item">
                  <span class="condition-item-text">{{$t('iPage.selectdate')}}</span>
                  <el-date-picker class="date-input analysis-date-input times-box" v-model="customTime"
                    value-format="yyyy-MM-dd" align="right" type="daterange" size="mini" :picker-options="pickerOptions1"
                    range-separator="-" :start-placeholder="$t('table.startTime')" :end-placeholder="$t('table.endTime')">
                  </el-date-picker>
              </li>
              <li class="condition-item">
                  <el-button type="primary" class="search-btn" plain @click="searchFun">{{$t('button.search')}}</el-button>
                  <el-button type="primary" class="search-btn" plain @click="exportFun">{{$t('button.export')}}</el-button>
              </li>
              <li class="condition-item btn-condition-item" style="float: right;margin-right: 20px;">
                  <el-radio-group v-model="activeName" size="small" @change="handleClick">
                    <el-radio-button label="total">{{$t('table.total')}}</el-radio-button>
                    <el-radio-button label="detail">{{$t('table.detail')}}</el-radio-button>
                  </el-radio-group>
              </li>
          </div>
      </div>
    <div class="element-main">
        <div class="asis-table-wrapper">
            <div class="asis-table-content">
                <el-table :data="tableData" id="areaPassengerFlowStatistics" :max-height="tableHeight" style="width: 100%" header-row-class-name="manage-tab-head"
                    :span-method="objectSpanMethod" key="mallId" border v-loading='loading' lazy row-key="id"
                    :load="load" :tree-props="{children: 'children', hasChildren: 'hasSub'}">
                    <el-table-column v-for="(item,index) in areaLen" :key="item" :prop="'area'+index" align="center">
                        <template slot="header" slot-scope="scope">
                          {{numFormat(index)}}{{$t('table.levelOrganization')}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="mallName" align="center" v-if="activeName=='detail'" show-overflow-tooltip :label="$t('table.squareName')"></el-table-column>
                    <el-table-column prop="groupName" width="200" v-if="activeName=='total'" align="center" :label="$t('table.organizationName')"></el-table-column>
                    <el-table-column prop="mallCount" align="center" v-if="activeName=='total'" :label="$t('format.ZONENUM')"></el-table-column>
                    <el-table-column prop="passByCount" align="center" :label="$t('table.passersNumber')"></el-table-column>
                    <el-table-column prop="enterCount" align="center" :label="$t('table.enteringStoreNumber')"></el-table-column>
                    <el-table-column prop="customerNum" align="center" :label="$t('table.customerNum')"></el-table-column>
                    <el-table-column prop="staffCount" align="center" :label="$t('head.clerkNum')"></el-table-column>
                    <el-table-column prop="enterRate" align="center" :label="$t('head.enteringRate')"></el-table-column>
                    <el-table-column prop="effectEvaluation" align="center" :label="$t('head.perSquare')"></el-table-column>
                    <el-table-column prop="residenceTimeSecond" align="center" :label="$t('head.residenceTimeSecond')"></el-table-column>
                    <el-table-column prop="deepShoppingCount" align="center" :label="$t('head.deepShoppingCount')"></el-table-column>
                    <el-table-column prop="deepShoppingRate" align="center" :label="$t('head.deepShoppingRate')"></el-table-column>
                    <el-table-column prop="humanEffect" align="center" :label="$t('head.humanEffect')"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import _ from 'underscore';
  export default {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        activeName:'total',
        treeData:[],
        groupIds:-1,
        customTime: [],
        tableData: [],
        areaLen:0,
        rowIndexArr0:[],
        rowIndexArr1:[],
        rowIndexArr2:[],
        rowIndexArr3:[],
        rowIndexArr4:[],
        rowIndexArr5:[],
        rowIndexArr6:[],
        rowIndexArr7:[],
        rowIndexArr8:[],
        rowIndexArr9:[],
        rowIndexArr10:[],
        loading:false,
        cnNums:['一','二','三','四','五','六','七','八','九','十'],
        znNums:['one','two','three','four','five','six','seven','eight','nine','ten'],
      };
    },
    computed: {
      tableHeight() {
        const windowInnerHeight = window.innerHeight;
        return windowInnerHeight - 220;
      }
    },
    mounted() {
      let {
        customDate
      } = this.createDate();
      this.customTime = customDate;
      this.getGroup()
      this.getTableData();
    },
    methods: {
        load(tree, treeNode, resolve) {
            let tabelParams = {
              orgId: this.$cookie.get("accountId"),
              startDate: this.customTime[0],
              endDate: this.customTime[1],
              groupId:tree.groupId
            };
            this.$api.analysisReport.getGroupPassengerFlowStatisticsTree(tabelParams).then(data => {
                const result = data.data;
                if(result.data.length>0){
                    result.data.forEach(item=>{
                        item.id = item.groupName+Math.random()
                    })
                    setTimeout(() => {
                      resolve(result.data)
                    }, 500)
                }
            })
          },
      numFormat(val){
        if(window.localStorage.getItem('lang')=='en_US'){
          return this.znNums[val]
        }else{
          return this.cnNums[val]
        }
      },
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0 && this.rowIndexArr0.length>0) {
            // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
            if (this.rowIndexArr0.includes(rowIndex)) {
                return {
                    rowspan: this.rowIndexArr0[this.rowIndexArr0.indexOf(rowIndex) + 1] - rowIndex,
                    colspan: 1
                }
            } else {
              return {
                  rowspan: 0,
                  colspan: 0
              }
          }
        }
        if (columnIndex === 1 && this.rowIndexArr1.length>0) {
            // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
            if (this.rowIndexArr1.includes(rowIndex)) {
              return {
                rowspan: this.rowIndexArr1[this.rowIndexArr1.indexOf(rowIndex) + 1] - rowIndex,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
        }
        if (columnIndex === 2 && this.rowIndexArr2.length>0) {
            // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
            if (this.rowIndexArr2.includes(rowIndex)) {
              return {
                rowspan: this.rowIndexArr2[this.rowIndexArr2.indexOf(rowIndex) + 1] - rowIndex,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
        }
        if (columnIndex === 3 && this.rowIndexArr3.length>0) {
            // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
            if (this.rowIndexArr3.includes(rowIndex)) {
              return {
                rowspan: this.rowIndexArr3[this.rowIndexArr3.indexOf(rowIndex) + 1] - rowIndex,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
        }
        if (columnIndex === 4 && this.rowIndexArr4.length>0) {
            // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
            if (this.rowIndexArr4.includes(rowIndex)) {
              return {
                rowspan: this.rowIndexArr4[this.rowIndexArr4.indexOf(rowIndex) + 1] - rowIndex,
                colspan: 1
              }
            } else {
              return
            }
        }
      },
      tableFilterFun(tableData,valIndex){
        let arr = [],res = tableData;
        res.reduce((result, currentVal, currentIndex) => {
            // 将单元格合并的起始位0放到数组中
            // 每次出现两个值不相等时，说明之前的值是相等的，此时需要合并，保存这个拐点的index，作为下一个合并的开始位置
            if (result == 0 || result != currentVal['area'+valIndex]) {
                arr.push(currentIndex)
            }
            return currentVal['area'+valIndex]
        }, 0)
        arr.push(res.length);
        return arr
      },
      getTableData() {
        this.tableData = [];
        this.areaLen = 0;
        let tabelParams = {
          orgId: this.$cookie.get("accountId"),
          startDate: this.customTime[0],
          endDate: this.customTime[1],
          type:this.activeName,
          groupId:this.groupIds
        };
        for (var i = 0; i < 10; i++) {
          this['rowIndexArr'+i] = ''
        }
        this.loading = true;
        if(this.activeName=='detail'){
            this.$api.analysisReport.getGroupPassengerFlowStatistics(tabelParams).then(data => {
                const result = data.data;
                this.loading = false;
                if(result.data.length>0){
                    result.data.forEach(item=>{
                      let length = item.parGroups.length
                      item.id =item.groupName+Math.random()
                      for (var i = 0; i < length; i++) {
                        item.parGroups[i].name = item.parGroups[i].name?item.parGroups[i].name:'--'
                        item['area'+i] = item.parGroups[i].name
                      }
                    })
                    this.tableData = result.data;
                    let arr = []
                    this.areaLen = this.tableData[0].parGroups.length
                    for (var i = 0; i < this.areaLen; i++) {
                      this['rowIndexArr'+i] = this.tableFilterFun(this.tableData,i)
                    }
                }
                
            })
        }else{
            this.$api.analysisReport.getGroupPassengerFlowStatisticsTree(tabelParams).then(data => {
                const result = data.data;
                this.loading = false;
                if(result.data.length>0){
                    result.data.forEach(item=>{
                        item.id = item.groupName+Math.random()
                    })
                    this.tableData = result.data;
                }
            })
        }
      },
      handleClick(){
          this.getTableData()
      },
      // 搜索
      searchFun() {
        this.getTableData()
      },
      exportFun(){
        this.dealExport("areaPassengerFlowStatistics", this.i18nFormatter('areaPassengerFlowStatistics') + '-' + this.Time());
      },
      loadOptions({ action, callback, parentNode, instanceId }) {
        if (action == "LOAD_CHILDREN_OPTIONS") {
          if (!parentNode.children) {
            simulateAsyncOperation(() => {
              callback(null);
            });
          }
        }
      },
      parentChange(node) {
        this.groupIds = node.id;
      },
      getGroup() {
        this.$api.management.groupList({accountId: this.$cookie.get("accountId") }).then(res => {
          var result = res.data.data;
          this.treeData = this.creatRoot(result);
        });
      },
      creatRoot(result) {
        let rootNode = [
          {
            label: this.$cookie.get("accountName"),
            name: this.$cookie.get("accountName"),
            nameEn: "",
            id: -1,
            accountId: this.$cookie.get("accountId")
          }
        ];
        this.creatTreeData(rootNode, result);
        return rootNode;
      },
      creatTreeData(treeData, datas) {
        treeData.forEach(item => {
          var flag = false;
          item.children = [];
          datas.forEach(item2 => {
            if (item2.pid == item.id) {
              var objs = {
                label: item2.name,
                id: item2.id
              };
              flag = true;
              item.children.push(objs);
            }
          });
          if (flag) {
            this.creatTreeData(item.children, datas);
          } else {
            item.children = null;
          }
        });
      },
    }
  };
</script>

<style scoped>
  .search-btn{
    background-color: #3bb8ff !important;
    color: #fff !important;
    border: none;
    border-radius: 2px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .group-parent-sel{
      width: 300px;
      display: inline-block;
  }
  .condition-item-text{
      vertical-align:top;
      line-height: 28px;
      margin-right: 10px;
  }
  .element-main{
      margin-top: 120px !important;
  }
</style>