areagroupOps.vue

<template>
    <div class="behavior-more-option behavior-test-option">
        <div class="opt-left">
            <!-- 广场 -->
            <div class="test-opt-mall">
                <el-select v-model="mallVal" class="mall-opt" filterable :placeholder="$t('pholder.shopSelect')" @change="chooseMall">
                    <el-option v-for="(item, index) in mallOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
                </el-select>
            </div>
            <!-- 监控点 -->
            <div class="test-opt-monitory">
                <el-select v-model="zoneVal" filterable :placeholder="$t('pholder.site')" class="multipleClass mall-sel-box" multiple collapse-tags @change="chooseMonitory">
                    <!-- <el-option value="all" label="{{$t('allPages.all')}}">
                            <span class="custom-checkbox__input">
                                <span class="custom-checkbox__inner"></span>
                            </span>
                            <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                        </el-option> -->
                    <div :class="isSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle">
                        <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, index) in zoneOpt" :label="item.name" :value="item.id" :key="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>
            <!-- 时间 -->
            <div class="test-opt-time">
                <!-- <el-date-picker v-model="date1" class="time-opt" placeholder="请选择时间" :picker-options="pickerOptions1"></el-date-picker>   -->
                <!-- <el-date-picker class="time-opt" v-model="timeVal" type="date" :picker-options="pickerOptions1" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                </el-date-picker> -->
                <el-date-picker
                  class="time-opt"
                  v-model="timeVal"
                  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>
        </div>
        <div class="opt-right">
            <el-button type="primary" class="primary-btn behavior-collapse-btn" size="samll" @click="clickHandle">{{$t('button.confirm')}}</el-button>
            <!-- <el-button class="reset-btn behavior-collapse-btn" size="samll" @click="resetRefresh">{{$t('button.reset')}}</el-button> -->
        </div>
    </div>
</template>

<script>
export default {
    // props: {
    //     pageSize: [Number, String]
    // },
    data() {
        return {
            date1: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            mallName: '',
            mallVal: '',
            mallOpt: [],
            // monitoryVal: [],
            // monitoryName: '',
            // monitoryOpt: [],
            zoneOpt: [],
            zoneVal: [],
            zoneName: '',
            typeVal: '',
            timeVal: [],
            account_id: '',
            all_id: [],
            isAll: false,
            isSingle: false,
            arr: [],
            idArr: [],
            isSelAll: false,
            // defaultCameraId: '6F51-4138-911F-B84C-01',
        }
    },
    created() {
        this.timeVal = [dateUnit.dateFormat(new Date(), 'yyyy-MM-dd'), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
        this.account_id = this.$cookie.get('accountId');
    },
    mounted() {
        // 获取机构所有的监控点
        this.getMallList();
    },
    methods: {
        getMallList() {
            this.mallOpt = [];
            this.mallVal = '';
            this.mallName = '';
            this.$api.base.mall({
                accountId: this.account_id,
                status: 1,
                // _t: Date.parse(new Date()) / 1000
            })
                .then(res => {
                    let result = res.data.data;
                    if (result.length > 0) {
                        this.mallOpt = result;
                        this.mallVal = result[0].id;
                        this.mallName = result[0].name;
                        this.getGates(this.mallVal);
                        this.clickHandle()
                        // this.mallName = result[0].name + '-';
                        // this.getZones(this.mallVal);
                    }
                })
                .catch(err => { })
        },
        chooseMall() {
            this.mallOpt.forEach(item => {
                if (item.id == this.mallVal) {
                    this.mallName = item.name + '-';
                }
            })
            this.getZones(this.mallVal);
        },
        getZones(mallId) {
            this.zoneOpt = [];
            this.zoneVal = [];
            this.zoneName = '';
            this.isSelAll = false;
            this.$api.base.zone({
                mallId: mallId,
                status: 1,
                sortName: 'floor.name, zone.name',
                // _t: Date.parse(new Date()) / 1000
                // isHasFace: 1,
                // isMallGate: 1
            })
                .then(res => {
                    let result = res.data.data
                    if (result.length) {
                        this.len = result.length
                        this.zoneOpt = result;
                        if (this.zoneVal.length == this.zoneOpt.length) {
                            this.isSelAll = true;
                        }
                        this.arr = [result[0].id];
                        // this.idArr = [result[0].id];
                        this.zoneVal.push(result[0].id);
                        this.zoneName = result[0].name + ' ';
                    }
                })
                .catch(err => { })
        },
        getGates(mallId) {
            this.monitoryOpt = [];
            this.monitoryVal = [];
            this.monitoryName = '';
            this.isSelAll = false;
            this.$api.base.gate({
                mallId: mallId,
                isHasFace: 1,
                // _t: Date.parse(new Date()) / 1000
                // isMallGate: 1
            })
                .then(res => {
                    let result = res.data.data
                    if (result.length) {
                        this.len = result.length
                        // result.forEach((item, index, arr) => {
                        //     // this.monitoryOpt.push(item);
                        //     this.all_id.push(item.id)
                        // });
                        this.monitoryOpt = result;
                        if (this.monitoryVal.length == this.monitoryOpt.length) {
                            this.isSelAll = true;
                        }
                        this.arr = [result[0].id];
                        // this.idArr = [result[0].id];
                        this.monitoryVal.push(result[0].id);
                        this.monitoryName = result[0].name + ' ';
                    }
                })
                .catch(err => { })
        },
        chooseMonitory() {
            // Array.prototype.indexOf = function(val) {
            //     for (var i = 0; i < this.length; i++) {
            //     if (this[i] == val) return i;
            //     }
            //     return -1;
            // };
            // Array.prototype.remove = function(val) {
            //     var index = this.indexOf(val);
            //     if (index > -1) {
            //     this.splice(index, 1);
            //     }
            // };
            // var temp1 = [], temp2 = [];
            // if(this.arr.length > this.monitoryVal.length){
            //     temp1 = this.arr
            //     temp2 = this.monitoryVal
            // }else{
            //     temp1 = this.monitoryVal
            //     temp2 = this.arr
            // }
            // var temp = [];
            // var tempstr = '';
            // for(var i=0;i<temp2.length;i++){
            //     temp[temp2[i]] = true;
            // }
            // for(var i=0;i<temp1.length;i++){
            //     if(!temp[temp1[i]]){
            //         tempstr=temp1[i];
            //     }
            // }
            // if(tempstr !== "all" && this.isSingle == false){
            //     this.monitoryVal.remove("all")
            //     this.isAll = false
            //     this.isSingle = true
            // }else if(tempstr !== "all" && this.isSingle == true && this.monitoryVal.length == this.all_id.length){
            //     this.monitoryVal.push("all")
            //     this.isSingle = false
            //     this.isAll = true
            // }else if(tempstr == "all" && this.isAll == false){
            //     this.monitoryVal = [];
            //     for(var i=0;i<this.all_id.length;i++){
            //         this.monitoryVal.push(this.all_id[i])                  
            //     }
            //     this.monitoryVal.push("all")
            //     this.isAll = true
            //     this.isSingle = false
            // }else if(tempstr == "all" && this.isAll == true){
            //     this.monitoryVal = []
            //     this.isAll = false
            //     this.isSingle = false
            // }
            // this.arr=this.monitoryVal;
            this.isSelAll = this.isSelAll ?
                (this.zoneVal.length < this.zoneOpt.length ? false : true) :
                this.zoneVal.length < this.zoneOpt.length ? false : true;
            this.zoneName = '';
            if (this.zoneVal.length > 0) {
                this.zoneOpt.forEach(item => {
                    if (item.id == this.zoneVal[0]) {
                        this.zoneName = item.name + ' ';
                    }
                    return false;
                })
            }
        },
        selAllHandle() {
            if (this.isSelAll) {
                this.isSelAll = false;
                if (this.zoneVal.length == this.zoneOpt.length) {
                    this.zoneVal = [];
                }
            } else {
                this.isSelAll = true;
                if (this.zoneVal.length == this.zoneOpt.length) {
                    this.zoneVal = [];
                } else {
                    this.zoneVal = [];
                    this.zoneOpt.forEach(item => {
                        this.zoneVal.push(item.id);
                    })
                }
            }
        },
        clickHandle() {
            this.$emit('startLoading', 'areagroup');
            for (var i = 0; i < this.zoneVal.length; i++) {
                if (this.zoneVal[i] !== "all") {
                    this.idArr.push(this.zoneVal[i])
                }
            }
            if (this.timeVal.length <= 1) {
                // let _tomorrow = new Date(Date.parse(new Date()) - (24 * 60 * 60 * 1000));
                this.timeVal = [dateUnit.dateFormat(new Date(), 'yyyy-MM-dd'), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
            }
                let orgIds = '';
                this.idArr.forEach((item, index, arr) => {
                    orgIds += item + ','
                })
                this.idArr = [];
                orgIds = orgIds.substring(0, orgIds.length - 1);
                let tomorrow = new Date(Date.parse(new Date(this.timeVal)) + (24 * 60 * 60 * 1000));
                let startDate = this.timeVal[0];
                // let endDate = dateUnit.dateFormat(tomorrow, 'yyyy-MM-dd') + ' 23:59:59';
                let endDate = this.timeVal[1];
                let params = {
                    orgIds: orgIds,
                    startDate: startDate,
                    endDate: endDate,
                    title: this.mallName + this.zoneName + startDate + this.$t('dialog.to') + endDate
                }
                // let _title = this.mallName + ' ' + startDate.split(' ')[0] + ' ';
                // this.$emit('emitTitle', _title);
                this.$emit('emitParams', params);
        }
    }
}
</script>

<style scoped>
    @media only screen and (max-width: 1680px) {
        .test-opt-time .time-opt {
            width: 266px;
        }
        .test-opt-monitory {
            width: 160px;
        }
    }
    @media only screen and (max-width: 1440px) {
        .test-opt-time .time-opt {
            width: 266px;
        }
        .test-opt-monitory {
            width: 160px;
        }
    }
    @media only screen and (max-width: 1366px) {
        .test-opt-time .time-opt {
            width: 266px;
        }
        .test-opt-monitory {
            width: 160px;
        }
    }
    @media only screen and (max-width: 1280px) {
        .test-opt-time .time-opt {
            width: 266px;
        }
        .test-opt-monitory {
            width: 160px;
        }
    }
</style>