jointHeatMapMoreOption.vue

<template>
    <div class="analysis-option-wrapper">
        <div class="panels-content">
            <div class="panels-main-top">
                <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="mallId" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" @change="mallChange">
                                <el-option v-for="item in malls" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="condition-item">
                        <span class="condition-item-text">{{$t('asisTab.floorT')}}</span>
                        <div class="condition-item-option">
                            <el-select v-model="floorId" filterable :placeholder="$t('pholder.floorSelect')" class="floor-sel-box" style="width: 120px" @change="floorChange">
                                <el-option v-for="item in floors" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="condition-item">
                        <span class="condition-item-text">{{$t('asisTab.manType')}}:</span>
                        <div class="condition-item-option">
                           <el-select class="manage-sel" v-model="typeVal" :placeholder="$t('asisTab.all') + $t('asisTab.manType')">
                                <el-option
                                    v-for="item in allTypeList"
                                    :key="item.id"
                                    :label="item.name === 'all' ? $t('pholder.allType') : item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="condition-item">
                      <span class="condition-item-text">{{ $t('table.age') }}:</span>
                      <div class="condition-item-option">
                        <el-select class="age-sel-box" v-model="ageList" :placeholder="$t('pholder.areaSelect')" multiple collapse-tags @change="ageChangeHandle">
                          <div :class="['sel-all-box', { 'selected': isAgeSelAll }]" @click="ageAllChangeHandle()">
                            <span class="custom-checkbox__input">
                              <span class="custom-checkbox__inner"></span>
                            </span>
                            <span style="padding-left: 5px;">{{ $t('allPages.all') }}</span>
                          </div>
                          <el-option v-for="item in ageArr" :key="item.value" :label="item.name" :value="item.value">
                            <span class="custom-checkbox__input">
                              <span class="custom-checkbox__inner"></span>
                            </span>
                            <span style="padding-left: 5px;">{{ item.name }}</span>
                          </el-option>
                        </el-select>
                      </div>
                    </li>
                    <li class="condition-item">
                      <span class="condition-item-text spe-item-text">{{ $t('table.gender') }}:</span>
                      <div class="condition-item-option">
                        <el-checkbox-group v-model="genderList" class="sex-container">
                          <el-checkbox :label="1" class="sex-item-checkbox">{{ $t('dictionary.Male') }}</el-checkbox>
                          <el-checkbox :label="0" class="sex-item-checkbox">{{ $t('dictionary.Female') }}</el-checkbox>
                          <el-checkbox :label="-1" class="sex-item-checkbox">{{ $t('dictionary.unknow') }}</el-checkbox>
                        </el-checkbox-group>
                      </div>
                    </li>
                </ul>
            </div>
            <div class="panels-main-bottom">
                <ul class="condition-box">
                    <li class="condition-item">
                        <span class="condition-item-text spe-item-text">{{$t('asisTab.date')}}</span>
                        <div class="condition-item-option">
                            <el-date-picker class="date-input analysis-date-input" v-model="dayTime" value-format="yyyy-MM-dd" align="right" type="date" size="mini" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1">
                            </el-date-picker>
                            <el-time-picker
                                is-range
                                v-model="hourTime"
                                value-format="HH:mm:ss"
                                format = 'HH:mm:ss'
                                class="checkTime"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                              </el-time-picker>
                        </div>
                    </li>
                    <li class="condition-item">
                        <span class="condition-item-text spe-item-text">Id</span>
                        <div class="condition-item-option">
                            <el-input v-model="personId" class="search-inp" placeholder="请输入" clearable></el-input>
                        </div>
                    </li>
                    <li class="condition-item">
                        <el-button type="primary" class="primary-btn analysis-collapse-btn"
                            :disabled="!floorId || floorId === ''"
                            size="small" @click="confirmCondition">{{$t('button.confirm')}}</el-button>
                        <!-- <el-button class="reset-btn analysis-collapse-btn" size="small" @click="resetRefresh">{{$t('button.reset')}}</el-button> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
    },
    data() {
        return {
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            tabItem: [
                {
                    label: 'mall',
                    value: 'mall',
                    className: 'analysis-item'
                }
            ],
            analyasisTime: [
                {
                    label: 'day',
                    value: 'day',
                    is_active: 'time-btn'
                }
            ],
            dayTime: '',
            paramId: '',  // 需要传的orgId

            accountId: this.$cookie.get("accountId"),
            malls: [],      // 广场/门店列表
            mallId: '',     // 广场id
            mallName: '',   // 广场名称
            floors: [],     // 楼层列表
            floorId: '',    // 楼层id
            floorImage: '', // 楼层图片
            typeList: [],
            typeVal:'',
            floorPlanUrl: window._vionConfig.picUrl,
            genderList: [1, 0, -1],
            ageArr: [
              {
                name: this.$t('table.under'),
                value: '0-18'
              },
              {
                name: '18-24' + this.$t("table.ages"),
                value: '18-24'
              },
              {
                name: '25-34' + this.$t("table.ages"),
                value: '25-34'
              },
              {
                name: '35-44' + this.$t("table.ages"),
                value: '35-44'
              },
              {
                name: '45-54' + this.$t("table.ages"),
                value: '45-54'
              },
              {
                name: '55-64' + this.$t("table.ages"),
                value: '55-64'
              },
              {
                name: this.$t('table.over'),
                value: '65-100'
              }
            ],
            ageList: ['0-18', '18-24', '25-34', '35-44', '45-54', '55-64', '65-100'],
            isAgeSelAll: true,
            // hourTime:[new Date(new Date().getFullYear(),new Date().getMonth(),0,0,0),new Date()]
            hourTime:['00:00:00','23:59:59'],
            personId:''
        }
    },
    created() {
        this.init();
    },
    watcn: {
        dayTime(val) {
            this.sessionDate('dayDate', val);
        }
    },
    computed: {
        allTypeList() {
        let list = this.typeList.map(item => {
            return item;
        });
        list.unshift({
            name: "all",
            id: null
        });
        return list;
        },
    },
    methods: {
        i18nFormatter(label){
            let langeLabel = 'asisTab.' + label;
            return this.$t(langeLabel)
        },
        // 年龄
        ageChangeHandle() {
          this.isAgeSelAll = this.isAgeSelAll
            ? (this.ageList.length < this.ageArr.length ? false : true)
            : this.ageList.length < this.ageArr.length ? false : true
        },
        ageAllChangeHandle() {
          if (this.isAgeSelAll) {
            this.isAgeSelAll = false
            if (this.ageList.length === this.ageArr.length) {
              this.ageList = []
            }
          } else {
            this.isAgeSelAll = true
            if (this.ageList.length === this.ageArr.length) {
              this.ageList = []
            } else {
              this.ageList = []
              this.ageArr.forEach(item => {
                this.ageList.push(item.value)
              })
            }
          }
        },
         // 查询门店列表
        getMallData() {
            let tabelParams = { accountId: this.accountId, status: 1 };
            this.$api.base.mall(tabelParams, null, true).then(data => {
                this.malls = data.data.data;
                this.mallId = data.data.data[0].id
                this.mallName = data.data.data[0].name
                this.floorFetch(true)
                this.fetchPersonType();
            })
            .catch(error => {});
        },
        // 获取人员类型
        fetchPersonType() {
            if (!this.mallId) return false
            this.typeVal = null
            this.typeList = []
            this.$api.management.personTypeList({
                accountId: this.$cookie.get('accountId'),
                mallId: this.mallId,
                // 是否有顾客店员基础类型
                hasBaseType: 1,
            }).then(res => {
                const { code, data } = res.data
                if (code === 200) {
                this.typeList = data.reduce((arr, curr) => {
                    arr.push(curr)
                    return arr
                }, [])
                }
            })
        },
        // 获取楼层列表
        floorFetch(status) {
            this.floors = [];
            this.floorId = '';
            this.floorImage = '';
            this.$api.base.floor({ mallId: this.mallId, status: 1 }).then(data => {
                this.floors = data.data.data || [];
                this.floorId = data.data.data[0].id || '';
                this.floorImage = data.data.data[0].floorPlan ? (this.floorPlanUrl + data.data.data[0].floorPlan) : null
                if (status) {
                    this.$emit('reportTime', {
                        floorImage: this.floorImage,
                        floorId: this.floorId,
                        mallId: this.mallId,
                        mallName: this.mallName,
                        time: this.dayTime,
                        gender: this.genderList,
                        age: this.ageList,
                        hourTime:this.hourTime,
                        personId:this.personId
                    });
                }
            }).catch(error => {})
        },

        init() {
            this.tabItem[0].className = 'analysis-item tabs-active';
            this.getMallData()
        },

        mallChange() {
            const selectMall = this.malls.filter(x => x.id === this.mallId)[0]
            this.mallName = selectMall.name
            this.floorFetch(false)
            this.fetchPersonType()
        },

        floorChange() {
            const selectFloor = this.floors.filter(x => x.id === this.floorId)[0]
            this.floorImage = this.floorPlanUrl + selectFloor.floorPlan
        },

        confirmCondition() {
            const {
              genderList,
              ageList
            } = this
            this.$emit('reportTime', {
                floorImage: this.floorImage,
                floorId: this.floorId,
                mallId: this.mallId,
                mallName: this.mallName,
                time: this.dayTime,
                personTypes:this.typeVal,
                gender: genderList,
                age: ageList,
                hourTime:this.hourTime,
                personId:this.personId
            });
        },

        resetRefresh() {
            this.init();
            this.mallId = this.malls[0].id;
            this.mallName = this.malls[0].name;
            this.floorFetch(true)
            this.dayTime = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
        }
    },
    mounted() {
        this.typeList = []
        let { dayDate } = this.createDate();
        this.dayTime = dayDate;
    }
}
</script>

<style scoped>
/* @import url(../css/fixed_layout.css); */
.analysis-option-wrapper{
  margin-top: 75px;
}
.search-inp{
  height: 30px;
}
.checkTime{
  height: 30px !important;
  padding: 0 !important;
}
.panels-main-bottom{
  float: none;
  margin-left: 0;
}
.panels-main-top{
  margin-bottom: 5px;
}
</style>