cameraOpt.vue

<template>
  <div class="behavior-more-option behavior-test-option">
    <div class="opt-left">
      <!-- 广场 -->
      <div class="test-opt-mall test-camera">
        <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 test-camera">
        <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 test-camera" v-if="monitoryVal !== ''">
        <el-select v-model="cameraVal" filterable :placeholder="$t('pholder.camera')">
          <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-type">
        <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>
      <!-- 时间 -->
      <div class="test-opt-time mr20">
        <el-date-picker v-model="dayTime" class="time-opt date-time" value-format="yyyy-MM-dd" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1"></el-date-picker>
        <!-- <el-date-picker
                    class="time-opt"
                    v-model="timeVal"
                    type="datetimerange"
                    :picker-options="pickerOptions1"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    @change="clickHandle"
                    :start-placeholder="$t('pholder.startDate')"
                    :end-placeholder="$t('pholder.endDate')">
                  </el-date-picker> -->
      </div>
      <div class="test-opt-effect test-opt-type">
        <el-select v-model="isEffect">
          <el-option :label="$t('asisTab.all')" :value="0"></el-option>
          <el-option :label="$t('Behavior.identified')" :value="1"></el-option>
          <el-option :label="$t('Behavior.unrecognized')" :value="2"></el-option>
        </el-select>
      </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>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dayTime: '',
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      mallName: '',
      mallVal: '',
      mallOpt: [],
      monitoryVal: '',
      monitoryName: '',
      monitoryOpt: [],
      cameraVal: '',
      cameraOpt: [],
      typeVal: null,
      timeVal: [],
      Params: {},
      isEffect: 1,
      // showAllModel: true,
      pageLimit: 45,
      typeList: []
    }
  },
  computed: {
    allTypeList() {
      let list = this.typeList.map(item => {
        return item;
      });
      list.unshift({
        name: "all",
        id: null
      });
      return list;
    },
  },
  watch: {
    dayTime(val) {
      this.sessionDate('dayDate', val);
    },
  },
  async mounted() {
    const storage = window.sessionStorage.valueOf()
    this.typeList = []
    let { dayDate } = this.createDate();
    this.dayTime = dayDate;
    this.getMallList()
  },
  methods: {
    fetchPersonType() {
      if (!this.mallVal) return false
      this.typeVal = null
      this.typeList = []
      return new Promise(resolve => {
        this.$api.management.personTypeList({
          accountId: this.$cookie.get('accountId'),
          mallId: this.mallVal,
          // 是否有顾客店员基础类型
          hasBaseType: 1,
        }).then(res => {
          const { code, data } = res.data
          if (code === 200) {
            this.typeList = data.reduce((arr, curr) => {
              arr.push(curr)
              return arr
            }, [])
            resolve()
          }
        })
      })
    },
    getMallList() {
      // return new Promise(resolve => {
        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.fetchPersonType()
          this.clickHandle()
          // resolve()
        }, (rejectData) => {
        })
      // })
    },
    chooseMall() {
      this.mallName = this.behaviorMallChange(this.mallVal, this.mallOpt)
      this.getGates(this.mallVal)
      this.fetchPersonType()
    },
    getGates(mallId) {
      this.monitoryOpt = [];
      this.monitoryVal = '';
      this.monitoryName = '';
      this.$api.base.gate({
        mallId: mallId,
        status: 1,
        isHasFace: 1,
        // _t: Date.parse(new Date()) / 1000
        // isMallGate: 1
      })
        .then(res => {
          let result = res.data.data
          if (result.length) {
            // result.forEach((item, index, arr) => {
            // this.monitoryOpt.push(item);
            // });
            result.unshift({
              id: '',
              name: this.$t('pholder.allGate')
            })
            this.monitoryOpt = result;
            this.monitoryVal = result[0].id;
            this.monitoryName = result[0].name + ' ';
            this.getChannels(this.monitoryVal);
          }
        })
        .catch(err => { })
    },
    chooseMonitory() {
      this.monitoryOpt.forEach(item => {
        if (item.id == this.monitoryVal) {
          this.monitoryName = item.name + ' ';
        }
        return;
      })
      this.getChannels(this.monitoryVal);
    },
    getChannels(gateId) {
      if (!gateId) return;
      this.cameraOpt = [];
      this.cameraVal = '';
      this.$api.base.channel({
        gateId: gateId,
        // _t: Date.parse(new Date()) / 1000
      })
        .then(res => {
          let result = res.data;
          if (result.data.length > 0) {
            result.data.unshift({
              id: '',
              name: this.$t('pholder.allChannel')
            })
            this.cameraVal = result.data[0].id;
            this.cameraOpt = result.data;
          }
          // this.clickHandle();
        })
        .catch(err => { })
    },
    clickHandle() {
      let mallName = '';
      this.$emit('startLoading', 'camera');
      let _params = {
        countdate: this.dayTime,
        accountId: this.$cookie.get('accountId'),
        mallId: this.mallVal,
        channelId: this.cameraVal || null,
        gateId: this.monitoryVal || null,
        personType: typeof this.typeVal === 'number' ? this.typeVal : null,
        direction: 1,
        page: 1,
        pageSize: this.pageLimit,
        sortName: 'counttime',
        sortOrder: 'DESC'
      }
      if (this.isEffect === 1) {
        _params.age_gt = 0
      } else if (this.isEffect === 2) {
        _params.age_lte = 0
      }
      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
      }
      if (typeof this.typeVal === 'number') {
        this.Params = this.Params + '&personType=' + this.typeVal
      }
      this.Params = this.Params + '&direction=1' + '&page=1' + '&pageSize=' + this.pageLimit + '&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;
      window.open(dowloadUrl)
    }
  }
}
</script>

<style scoped>
.test-opt-time .time-opt .el-input__inner {
  height: 100% !important;
}

.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>