clerkCameraOpt.vue 10.1 KB
<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) 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="monitoryVal" class="monitory-opt" filterable :placeholder="$t('pholder.site')" @change="chooseMonitory">
                   <el-option v-for="(item) in monitoryOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
                </el-select>
            </div>
            <!-- 相机 -->
            <!-- <div class="test-opt-camera" v-if="monitoryVal !== ''">
                <el-select v-model="cameraVal" filterable :placeholder="$t('pholder.camera')" @change="chooseCamera">
                   <el-option v-for="item in cameraOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </div> -->
            <!-- 时间 -->
            <div class="test-opt-time mr20">
                <el-date-picker v-model="dayTime" :clearable="false" @change="chooseCamera"
                class="time-opt date-time" value-format="yyyy-MM-dd" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1"></el-date-picker>
            </div>
            <div v-if="accountId == 127" class="test-opt-type" style="margin-left: 20px; font-size: 15px; display: flex; align-items: center; color: #606266">
                <span v-if="isJuLei" style="margin-right: 5px">聚类已完成</span>
                <i v-if="isJuLei" class="el-icon-success" style="font-size: 28px; color: #67c23a"></i>
                <span v-if="!isJuLei" style="margin-right: 5px">聚类未完成</span>
                <i v-if="!isJuLei" class="el-icon-loading" style="font-size: 28px; color: #409eff"></i>
            </div>
        </div>
        <div class="opt-right">
            <!-- <el-button type="primary" class="primary-btn behavior-collapse-btn" size="samll"
                :disabled="!dayTime" 
                @click="clickHandle">{{$t('button.confirm')}}</el-button> -->
            <el-button type="primary" class="primary-btn behavior-collapse-btn" size="samll" @click="uploadData">{{$t('button.load')}}</el-button>
        </div>
    </div>
</template>

<script>
import * as Cookies from 'js-cookie'

export default {
    props: {
        params: Object,
        pageSize: [String, Number],
    },
    data() {
        return {
            date1: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            mallName: '',
            mallVal: '',
            mallOpt: [],
            monitoryVal: '',
            monitoryName: '',
            monitoryOpt: [],
            cameraVal: '',
            cameraOpt: [],
            timeVal: [],
            dayTime: '',
            Params:{},
            isEffect: true,
            isSuper: Cookies.get('user_type') === 'super',
            accountId: this.$cookie.get('accountId'),
            isJuLei: false,
            // defaultCameraId: '6F51-4138-911F-B84C-01',
        }
    },
    created() {
        // this.timeVal = [dateUnit.dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateUnit.dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'];
        let {dayDate} = this.createDate();
        this.dayTime = dayDate;
        this.getMallList();
        this.reidJd()
    },
    watch: {
        dayTime(val) {
            this.sessionDate('dayDate', val);
        },
    },
    mounted() {
        
    },
    methods: {
        // reid进度
        reidJd() {
        this.$api.base.reidJd({
            accountId: this.$cookie.get('accountId'),
            business_name: 'reid聚类完成',
            content: this.dayTime,
            opUserId: this.mallVal,
            page: 1,
            pageSize: 20
        }).then(res => {
            if (res.data.code === 200) {
            this.isJuLei = (res.data.data && res.data.data.list.length > 0) ? true : false
            } else {
            this.isJuLei = false
            }
        })
        },
        getMallList() {
            this.mallOpt = [];
            this.mallVal = '';
            this.mallName = '';
            this.getCommonMalls().then(resolveData => {
                let {mallData,localMallId,titleName,multiMallId} = resolveData;
                this.mallOpt = mallData;
                this.mallVal =  localMallId;
                this.mallName = titleName + ' ';
                this.getGates(this.mallVal);
                this.clickHandle();
            },(rejectData) => {
            })
        },
        async chooseMall() {
            this.mallName = this.behaviorMallChange(this.mallVal,this.mallOpt)
            this.monitoryVal = ''
            this.monitoryName = ''
            this.cameraVal = ''
            await this.getGates(this.mallVal);
            this.clickHandle()
        },
        getGates(mallId) {
            this.monitoryOpt = [];
            this.monitoryVal = '';
            this.monitoryName = '';
            this.$api.base.gate({
                mallId: mallId,
                status: 1,
                isHasFace: 1
            })
            .then(res => {
                let result = res.data.data
                if(result.length) {
                    result.unshift({ id: '', name: this.$t('pholder.allGate') })
                    this.monitoryOpt = result;
                    this.monitoryVal = result[0].id;
                    this.monitoryName = result[0].name;
                }
            })
            .catch(err => {})
        },
        async chooseMonitory() {
            this.monitoryOpt.forEach(item => {
                if(item.id == this.monitoryVal) {
                    this.monitoryName = item.name;
                }
                return;
            })
            this.cameraVal = ''
            await this.getChannels(this.monitoryVal);
            this.clickHandle()
        },
        chooseCamera() {
            this.clickHandle()
        },
        getChannels(gateId) {
            this.cameraOpt = [];
            this.cameraVal = '';
            this.$api.base.channel({
                 gateId: gateId
             })
            .then(res => {
                let result = res.data;
                if(result.data.length > 0) {
                    result.data.unshift({
                        id: '',
                        name: '全部通道'
                    })
                    this.cameraVal = result.data[0].id;
                    this.cameraOpt = result.data;
                }
                // this.clickHandle();
            })
            .catch(err => {})
        },
        clickHandle() {
            this.reidJd()
            let mallName = '';
            this.$emit('startLoading', 'camera');
                let _params = {
                    countdate: this.dayTime,
                    // countdate_get: this.timeVal[0].split(' ')[0],
                    // countdate_lte: this.timeVal[1].split(' ')[0],
                    // counttime_gte: this.timeVal[0],
                    // counttime_lte: this.timeVal[1],
                    accountId: this.$cookie.get('accountId'),
                    mallId: this.mallVal,
                    // age_gt: this.isEffect ? 0 : null,
                    // channelId: this.cameraVal ? this.cameraVal : null,
                    gateId: this.monitoryVal ? this.monitoryVal : null,
                    personType: 1,
                    // direction: 1,
                    page: 1,
                    pageSize: 45,
                    sortName: 'counttime',
                    sortOrder: 'DESC'
                }
                this.Params ='&countdate=' + this.dayTime + '&accountId=' + this.$cookie.get('accountId') + '&mallId=' + this.mallVal;
                if(this.cameraVal){
                    this.Params = this.Params + '&channelId=' + this.cameraVal
                }
                if(this.monitoryVal){
                    this.Params = this.Params + '&gateId=' + this.monitoryVal
                }
                this.Params = this.Params + '&personType=1'
                this.Params = this.Params + '&direction=1' + '&page=1' + '&pageSize=45' + '&sortName=counttime&sortOrder=DESC'
                mallName = this.mallName;
                let _title = mallName + this.monitoryName + ' ' + this.dayTime  + ' ';
                this.$emit('emitTitle', _title);
                this.$emit('emitParams', _params);
        },
        resetRefresh() {
            this.timeVal = [dateUnit.dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateUnit.dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'];
        },
        uploadData(){
            let language = localStorage.getItem('lang');
            if(language){
                var languageObj = {
                    mall_CN: 'zh_CN',
                    zh_CN: 'zh_CN',
                    en_US: 'en_US',
                    zh_TW: 'zh_TW',
                }
                language = '&localLanguage=' + languageObj[language];
            }
            let Url = window._vionConfig.apiUrl + '/faceRecognitions/excel?'
            let dowloadUrl = Url + this.Params + language + `&authorization=${this.$cookie.get(
              "atoken"
            )}`;
            window.open(dowloadUrl)
        }
    }
}
</script>

<style scoped>
    .test-opt-time .date-time {
        width: 150px !important;
    }
    @media only screen and (max-width: 1680px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }
    @media only screen and (max-width: 1440px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }
    @media only screen and (max-width: 1366px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }
    @media only screen and (max-width: 1280px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }
</style>