zoneDirect.vue 2.72 KB
<template>
  <div class="base-analysis">
    <el-header height="70px">
      <span class="asis-title">{{ asisName }}&nbsp;{{ $t('asis.ZoneTrafficDirection') }}</span>
      <span class="more-option-wrapper" @click="showCollapse">
        <span class="more-option-text">{{$t('asis.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>
    <zone-direct-option v-show="moreOptVisible" ref="init" :mallData="mallData" @reportTime="reportHandler" @initData="initTab"></zone-direct-option>
    <div class="element-main base-main">
      <!-- ref="takeTime" -->
      <router-view :propparam="propParams"></router-view>
    </div>
  </div> 
</template>

<script>
import zoneDirctOption from '../common/option/zoneDirectOption'
export default {
  components: {
    'zone-direct-option': zoneDirctOption
  },
  data () {
    return {
      asisName: '',
      moreOptVisible: false,
      propParams: {},
      mallData: []
    }
  },
  created() {
    this.getMallOpt();
  },
  mounted() {
    this.showCollapse();
  },
  methods: {
    showCollapse() {
      // 获取上面元素的高度
      let headerH = '', titleH = '', collapseH = '', mt = ''
        headerH = this.getStyleFn('.el-header', 'height')
        titleH = this.getStyleFn('.analysis-wrapper .el-header', 'height')
      if (this.moreOptVisible) {
        this.moreOptVisible = false
        mt = headerH + titleH + 8 + 'px'
        $('.base-main').animate({ marginTop: mt })
      }
      else {
        this.moreOptVisible = true
        setTimeout(() => {
            collapseH = this.getStyleFn('.analysis-option-wrapper', 'height')
            mt = headerH + titleH + collapseH + 8 + 'px'
            $('.base-main').animate({ marginTop: mt })
        }, 100)
      }
    },
    getMallOpt() {
      let param = {
          accountId: this.$cookie.get('accountId'),
          status: 1,
      }
      this.zoneFilterMall(param,4).then((resolveData) => {
          let {mallData,localMallId,titleName} = resolveData
          this.mallData = mallData
          this.asisName = titleName
          this.$refs.init.initAsis(localMallId === '' ? null : Number(localMallId))
      },(rejectData) => {
          console.log(rejectData)
      })
    },
    initTab(data) {
      this.$router.push('/behavior/zonedirection/zonegraph')
      this.propParams = {
        dateType: '/zonedirection/zonegraph',
        data: data
      }
    },
    reportHandler(emitData) {
      this.asisName = emitData.asis_tit
      this.$router.push('/behavior/zonedirection/zonegraph')
      this.propParams = {
        dateType: '/zonedirection/zonegraph',
        data: emitData
      }
    }
  },
}
</script>