passengerFlowDataOption.vue 3.56 KB
<template>
  <div class="analysis-option-wrapper basicPassengerFlow">
    <div class="panels-content">
      <div class="panels-main-top panels-main-center">
        <ul class="condition-box">
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
            <div class="condition-item-option">
              <el-select v-model="mallVal" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" @change="mallChange">
                <el-option v-for="item in mallData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
          </li>
        </ul> <!-- 店铺检索选项 多选 -->
      </div>
      <div class="panels-main-bottom">
        <ul class="condition-box">
          <li class="condition-item analysis-date-condition">
            <span class="condition-item-text">{{$t('asisTab.date')}}</span>
            <div class="condition-item-option">
              <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>
            </div>
          </li>
          <li class="condition-item btn-condition-item">
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" :disabled="(!customTime)" @click="confirmCondition">{{$t('button.confirm')}}</el-button>
            <!-- <el-button class="reset-btn analysis-collapse-btn" size="samll" @click="resetRefresh">{{$t('button.reset')}}</el-button> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      customTime: '',
      mallVal: '',    // 单选商场
      mallId: '', // 组件全局商场ID
      mallData: [],
    }
  },
  mounted() {
      let year = new Date().getFullYear()
    this.customTime = [year+'-01-01', dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
  },
  methods: {
    i18nFormatter(label) {
      let langeLabel = 'businessAnalysis.' + label;
      return this.$t(langeLabel)
    },
    initAsis(id, mall_data) {
      this.mallData = mall_data;
      this.mallId = id.mallId;
      this.mallVal = id.mallId;

      let data = {
        asis_time: this.customTime,
        orgId: this.mallVal,
        type:'line',
        asis_tit: this.getItemName(this.mallData, this.mallVal.toString())
      }
      data.startDate = this.customTime[0];
      data.endDate = this.customTime[1];
      this.$emit('initData', data);
    },
    mallChange() {
      this.mallId = this.mallVal;
      window.sessionStorage.setItem('mallId', this.mallVal)
    },
    confirmCondition() {
      let {mallData,mallVal} = this;
      let emitObj = {},
      mallName = this.getItemName(mallData, mallVal.toString());
      emitObj.asis_time = this.customTime;
      emitObj.orgId = mallVal
      emitObj.asis_tit = this.getItemName(mallData, mallVal.toString());
      emitObj.startDate = this.customTime[0];
      emitObj.endDate = this.customTime[1];
      this.$emit('reportTime', emitObj);
    },
    resetRefresh() {
      let year = new Date().getFullYear()
      this.customTime = [year+'-01-01', dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
    }
  },

}
</script>

<style scoped>
.times-box{
  height: 30px;
  line-height: 30px;
}
</style>