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')" @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-type">
        <el-select class="manage-sel" v-model="typeVal" :placeholder="$t('asisTab.all') + $t('asisTab.manType')" @change="chooseType">
          <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" :clearable="false" @change="chooseTime"
        value-format="yyyy-MM-dd" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1"></el-date-picker>
      </div>
      <!-- <div class="test-opt-effect test-opt-type">
        <el-select v-model="isEffect" @change="chooseTime">
          <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 class="test-opt-effect test-opt-type">
        <el-select v-model="picType" @change="chooseTime">
          <el-option :label="$t('Behavior.bodyPic')" value="body"></el-option>
          <el-option :label="$t('Behavior.facePic')" value="face"></el-option>
        </el-select>
      </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="small" 
        :disabled="!dayTime"
        @click="clickHandle">{{$t('button.confirm')}}</el-button>
    </div> -->
  </div>
</template>

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

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: 0,
      picType: 'body',
      // showAllModel: true,
      pageLimit: 45,
      typeList: [],
      isSuper: Cookies.get('user_type') === 'super',
      isJuLei: false,
      accountId: this.$cookie.get('accountId'),
    }
  },
  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()
    this.reidJd()
  },
  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
        }
      })
    },
    // 获取人员类型
    fetchPersonType() {
      if (!this.mallVal) return false
      this.typeVal = null
      this.typeList = []
      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
          }, [])
        }
      })
    },
    // 获取门店列表
    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).then(()=>{
             this.fetchPersonType()
             this.clickHandle()
          });
          //this.fetchPersonType()
          //this.clickHandle()
        }, (rejectData) => {})
    },
    // 选择门店
    async chooseMall() {
      this.mallName = this.behaviorMallChange(this.mallVal, this.mallOpt)
      this.getGates(this.mallVal)
      this.monitoryVal = ''
      this.monitoryName = ''
      this.cameraVal = ''
      this.typeVal = null
      await this.fetchPersonType()
      this.clickHandle()
    },
    chooseCamera() {
      this.clickHandle()
    },
    chooseType() {
      this.clickHandle()
    },
    chooseTime() {
      this.clickHandle()
    },
    // 获取所有监控点
    getGates(mallId) {
      this.monitoryOpt = [];
      this.monitoryVal = '';
      this.monitoryName = '';
      return 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 + ' ';
            this.getChannels(this.monitoryVal);
          }
          return result;
        })
        .catch(err => {})
    },
    // 选择监控点
    async chooseMonitory() {
      this.monitoryOpt.forEach(item => {
        if (item.id == this.monitoryVal) {
          this.monitoryName = item.name + ' ';
        }
        return;
      })
      this.cameraVal = ''
      this.typeVal = null
      await this.getChannels(this.monitoryVal);
      this.clickHandle()
    },
    // 获取相机列表
    getChannels(gateId) {
      if (!gateId) return;
      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.$t('pholder.allChannel') })
            this.cameraVal = result.data[0].id;
            this.cameraOpt = result.data;
          }
        })
        .catch(err => {})
    },
    clickHandle() {
      this.reidJd()
      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',
        gateList:this.monitoryOpt
        // isMallGate: this.isSuper ? null : '1'
      }
      if (this.isEffect === 1) {
        _params.age_gt = 0
      } else if (this.isEffect === 2) {
        _params.age_lte = 0
      }
      _params.picType = this.picType;
      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'];
    }
  }
}
</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>