regionalRankingOption.vue 10.3 KB
<template>
    <div class=" analysis-option-wrapper">
        <ul class="condition-box 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">
                <div class="condition-item-option">
                    <el-radio-group v-model="dateType" size="small">
                      <el-radio-button v-for="item in analyasisTime" :key="item.value" :label="item.value" >{{i18nFormatter(item.label)}}</el-radio-button>
                      </el-radio-group>
                </div>
            </li>
            <!-- 选择日期 S -->
            <li class="condition-item">
                <span class="condition-item-text">{{ $t('iPage.selectdate') }}:</span>
                <div class="condition-item-option">
                    <el-date-picker class="date-input" v-show="dateType == 'day'" size="mini" v-model="dayTime"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" align="right" type="date"
                        :placeholder="$t('pholder.date')" :picker-options="pickerOption"></el-date-picker>
                    <el-date-picker class="date-input analysis-date-input date-week-box" v-show="dateType === 'week'" v-model="weekTime" align="right" type="week" :format="datePickerFormatter('week')" size="mini" :placeholder="$t('pholder.week')" :picker-options="weekPickerOpt">
                        </el-date-picker>
                    <el-date-picker class="date-input" v-show="dateType == 'month'" size="mini" v-model="monthTime"
                        align="right" type="month" value-format="yyyy-MM" format="yyyy-MM"
                        :placeholder="$t('pholder.month')" :picker-options="pickerOption"></el-date-picker>
                    <el-date-picker class="date-input" v-show="dateType == 'year'" size="mini" v-model="yearTime"
                        align="right" type="year" value-format="yyyy" format="yyyy" :placeholder="$t('pholder.year')"
                        :picker-options="pickerOption"></el-date-picker>
                    <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="pickerOption" range-separator="-" v-show="dateType === 'custom'" :start-placeholder="$t('table.startTime')" :end-placeholder="$t('table.endTime')">
                    </el-date-picker>
                </div>
            </li>
            <!-- 选择日期 E -->
            
            <!-- 操作按钮区域 S -->
            <li class="condition-item">
                <el-button type="primary" class="primary-btn" size="small"
                    :disabled="(dateType == 'day' && !dayTime) || (dateType == 'week' && !weekTime) || (dateType == 'month' && !monthTime) || (dateType == 'year' && !yearTime)|| (dateType == 'custom' && !customTime)"
                    @click="confirmCondition(true)">{{ $t('button.confirm') }}</el-button>
                <!-- <el-button class="reset-btn" size="small" @click="resetRefresh">{{ $t('button.reset') }}</el-button> -->
            </li>
            <!-- 操作按钮区域 E -->
        </ul>
    </div>
</template>
<script>
let hasInit = false; //是否完成初始化绘图
import _ from 'underscore';
const analyasisTime = ['day', "week","month", "year","custom"].map(item => ({
    label: item,
    value: item
}))
const simulateAsyncOperation = fn => {
    setTimeout(fn, 2000);
  };
export default {
    props: {
        pVal: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            treeData:[],
            groupIds:null,
            accountVal: "",
            mallVal: "",
            analyasisTime,
            orgType: "", //当前页面所属的层级【'account','mall','floor',...】
            dateType: "", //报告类型【'day','month',...】
            radioVal: "", //单选【统计、画像】
            params: {},
            dayTime: "", //日-期
            weekTime:'',//周,
            monthTime: "", //月
            yearTime: "", //年
            customTime: '',//自定义
            pickerOption: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            weekPickerOpt: {
              firstDayOfWeek: window._vionConfig.firstDayOfWeek ? window._vionConfig.firstDayOfWeek : 1
            },
        };
    },
    watch: {
        radioVal(val) {
            this.confirmCondition();
        },
        dayTime(val) {
            this.sessionDate("dayDate", val);
        },
        weekTime(val) {
            this.sessionDate("weekDate", val);
        },
        monthTime(val) {
            this.sessionDate("monthDate", val);
        },
        yearTime(val) {
            this.sessionDate("yearDate", val);
            if (this.orgType == 'activity' && this.mallVal) {
                this.getActivityList();
            }
        },
        customTime(val) {
          this.sessionDate('customDate', val);
        }
    },
    methods: {
        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;
            }
          });
        },
        loadOptions({ action, callback, parentNode, instanceId }) {
          if (action == "LOAD_CHILDREN_OPTIONS") {
            if (!parentNode.children) {
              simulateAsyncOperation(() => {
                callback(null);
              });
            }
          }
        },
        parentChange(node) {
          this.groupIds = node.id;
        },
        i18nFormatter(label) {
            let langeLabel = 'asisTab.' + label;
            return this.$t(langeLabel)
        },
        initOption() {
            const pVal = this.pVal.split("_");
            this.orgType = pVal[0];
            this.dateType = pVal[1];
            this.accountVal = this.$cookie.get('accountId');
            this.initDraw();
        },
        confirmCondition(force) {
            const emitData = {
                force,
                radio: this.radioVal,
                mallIds: this.mallVal,
                orgType: this.orgType,
                dateType: this.dateType,
                dateVal:
                   this.dateType == "day"
                       ? this.dayTime
                       : this.dateType == "week"
                           ? this.weekTime
                       : this.dateType == "month"
                           ? this.monthTime
                           : this.dateType == "year"
                               ? this.yearTime
                               : this.dateType == "custom"
                                 ? this.customTime
                                 : "",
            };
            if(this.dateType == "custom"){
              emitData.startDate = this.customTime[0];
              emitData.endDate = this.customTime[1];
            }else{
              let timeObj = this.newDateFormat(
                  this.dateType,
                  new Date(emitData.dateVal)
              );
              emitData.startDate = timeObj.startTime;
              emitData.endDate = timeObj.endTime;
            }
            emitData[this.orgType + "Ids"] = this[this.orgType + "Val"];
            if(emitData.dateType=='week'||emitData.dateType=='custom'){
              emitData.dateType = 'month'
            }
            emitData.isStore = true;
            emitData.groupIds = this.groupIds;
            this.$emit("reportData", emitData);
        },
        resetRefresh() {
            this.dayTime = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
            this.weekTime = new Date();  // 周时间
            this.monthTime = new Date(); // 月时间
            this.yearTime = new Date(); // 年时间
            this.customTime = [this.dayReduce(new Date(), 15), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
        },
        initDraw() {
            if (hasInit) return false;
            hasInit = true;
            this.confirmCondition();
        },
    },
    created() {
    },
    mounted() {
        hasInit = false;
        let { dayDate, weekDate, monthDate, yearDate, customDate } = this.createDate();
        this.dayTime = dayDate;
        this.weekTime = weekDate;
        this.monthTime = monthDate;
        this.yearTime = yearDate;
        this.customTime = customDate;
        this.initOption();
        this.getGroup()
    },
};
</script>
<style scoped>
@import url(../css/public.css);
.group-parent-sel{
    display: inline-block;
    width: 250px;
    vertical-align: middle;
  }
  /deep/.group-parent-sel .vue-treeselect__control{
    height: 30px;
  }
  .analysis-option-wrapper{
   background-color: #fff;   
  }
</style>