index.vue

<!--
 * @Author: panda
 * @Date: 2021-12-18 12:57:47
 * @LastEditTime: 2022-02-14 15:32:50
 * @LastEditors: Please set LastEditors
 * @Description: 算法配置
 * @FilePath: /sdc-face/src/views/Algo/index.vue
-->
<template>
  <div class="algobox">
    <el-row :gutter="10">
      <div class="leftbox">
        <div class="video-box">
          <div class="video-title">标注图像</div>
          <div class="video-play">
            <roicontent
              :dtype="drawtype"
              :bgUrl="roiimg"
              :rois="roidata"
              ref="rois"
              @roiset="saveConfig"
              @imgLoad="imgload"
            ></roicontent>
          </div>
          <div class="about-set">
            <div class="setbtn-box">
              <el-checkbox v-model="checked">规则设置</el-checkbox>
              <span class="title" v-show="!checked"
                >当前高度为3米进门线为宽松模式</span
              >
              <span v-show="checked">
                <el-popover
                  placement="bottom"
                  width="320"
                  style="margin: 0 20px"
                  v-model="shapevisible"
                >
                  <div style="text-align: left; margin: 0">
                    <el-radio
                      v-model="shape"
                      label="polygon"
                      style="margin-right: 20px"
                      @change="selectShape('polygon','recxysets')"
                      >多边形</el-radio
                    >
                    <el-radio
                      v-model="shape"
                      label="rect"
                      @change="selectShape('rect','recxysets')"
                      >矩形</el-radio
                    >
                  </div>
                  <div style="color:#ccc;font-size:12px">
                    选择多边形绘制，可以通过鼠标根据实际场景任意选定锚点，最后通过闭合实现多边形区域绘制。
                  </div>
                  <el-button slot="reference" @click="selectShape('rect','recxysets')" class="" size="mini"  :class="{'isactive':active=='recxysets'}">识别区域</el-button>
                </el-popover>
                <el-popover
                  placement="bottom"
                  width="260"
                  style="margin-right: 20px"
                  v-model="todoorvisible"
                >
                  <div style="text-align: left; margin: 0; color: #ccc">
                    用鼠标完成进门方向绘制,箭头方向表示人的进入方向。
                  </div>
                  <el-button slot="reference" @click="selectShape('arrow','directionxysets')"  :class="{'isactive':active=='directionxysets'}"
                    size="mini">进门方向</el-button
                  >
                </el-popover>
                <el-popover
                  placement="bottom"
                  width="260"
                  v-model="linevisible"
                >
                  <div style="text-align: left; margin: 0">
                    <el-select
                      v-model="doorLine"
                      placeholder="请选择"
                      size="mini"
                    >
                      <el-option label="宽松模式" :value="1"></el-option>
                      <el-option label="严格模式" :value="2"></el-option>
                    </el-select>
                    <div style="text-align: left; margin: 0; color: #ccc">
                      请用鼠标标定门的位置，如果您选择了严格模式，则只有人的轨迹跨过这条线才会被计数，如果选择了宽松模式，则人走到线附近也会被计数。
                    </div>
                  </div>
                  <el-button slot="reference" @click="selectShape('line','linexysets')" size="mini" :class="{'isactive':active=='linexysets'}"
                    >进门线</el-button
                  >
                </el-popover>
                 <el-button slot="reference" style="float:right;margin:5px 20px 0 0;" type="primary" :disabled="disabled" @click="saveRoi()" size="mini" 
                    >保存</el-button
                  >
                   <el-button slot="reference" style="float:right;margin:5px 20px 0 0;" type="defalut"  @click="resetRoi()" size="mini" 
                    >全部清空</el-button
                  >
                   <el-button slot="reference" style="float:right;margin:5px 20px 0 0;" type="defalut"  @click="refresh()" size="mini" 
                    >刷新</el-button
                  >
              </span>
            </div>
            <div class=""></div>
          </div>
        </div>
      </div>
      <!-- 客流算法设置 -->
      <div class="rightbox">
        <div class="set-box">
          <div class="header">客流算法</div>
          <div class="set-content">
            <advancedSet
              @closeadv="closeadvancedModal"
              @saveconfig="saveConfig"
              :advconfig="algoform"
              v-show="advvisbale"
            ></advancedSet>
            <el-form ref="form" :model="algoform" label-width="70px">
              <div>
                <el-tooltip
                  class="item tipinfo"
                  effect="dark"
                  content="人头尺寸大小"
                  placement="right"
                >
                  <i class="el-icon-question" style="color:#ccc"></i>
                </el-tooltip>
                <el-form-item label="人头尺寸:" class="algosetfrom">
                  <el-slider
                    class="algoslider"
                    input-size="mini"
                    v-model="algoform.zoomscale"
                    :min="defalutConfig.zoomscalemin"
                    :max="defalutConfig.zoomscalemax"
                    :step="defalutConfig.zoomstep"
                    @change="senDataChange"
                    show-input
                    :show-tooltip="false"
                  >
                  </el-slider>
                </el-form-item>
              </div>
              <div>
                <el-tooltip
                  class="item tipinfo"
                  effect="dark"
                  content="敏感度越高则人越容易被检出,同时也容易出现吴检！"
                  placement="right"
                >
                  <i class="el-icon-question"  style="color:#ccc"></i>
                </el-tooltip>
                <el-form-item label="敏感度:">
                  <el-slider
                    class="algoslider"
                    input-size="mini"
                    v-model="algoform.sensitivity1"
                    @change="senDataChange"
                    :min="0"
                    :max="100"
                    :step="1"
                    show-input
                    :show-tooltip="false"
                  >
                  </el-slider>
                </el-form-item>
              </div>
              <div class="topset">
                <el-button type="text" @click="advclick">高级</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import roicontent from "./roi.vue";
import advancedSet from "./advancedSet.vue";
export default {
  components: {
    roicontent,
    advancedSet,
  },
  data() {
    return {
      checked: false,
      doorLine: 1,
      shape: "rect",
      disabled:false,
      advvisbale: false,
      shapevisible: false,
      roiimg: "",
      drawtype: "react",
      linevisible: false,
      todoorvisible: false,
      headersize: "",
      Sensibility: "",
      active:'',
      roidata:[{roi:{}}],
      algconfigData:{},
      algoform: {
        zoomscale: 3, //人头尺寸 [0.5,4] step=0.01 alg:x100 表示传入算法时，该值要*100
        zoomscalemin: 0.5, //最小人头尺寸 [0,1000] step=5
        zoomscalemax: 8, //最大人头尺寸 [0,1000] step=5
        sensitivity1: 20, //敏感度1 [0,100] step=1
        sensitivity2: 40, //敏感度2 [0,100] step=1
        sensitivity3: 20, //敏感度3 [0,100] step=1
        displaymode: 1, //模式选择 0:录像 1：经典 2：调试 3：展示
        tracethreshold: 3, //轨迹跟踪阀值 [1,5] step=0.1  alg:x100
        preframenum: 30, //轨迹预测帧数 [1,100] step=1
        trackmotionthreshold: 1, //轨迹移动阀值  [0,10] step=0.1 alg:x100
        trackshapethreshold: 0.5, //轨迹形态阀值  [0,1] step=0.1 alg:x100
        removesimilarity: 75, //去重相似度    [10,100] step=0.01 alg:x100
        removetime: 15, //去重时间     [0,1200] step=1
        facelum: 0.5, //人脸亮度     [0,1] step=0.01 alg:x100
        facequalitythreshold: 3.5, //人脸质量阀值   [0,5] step=0.1 alg:x100
        maxage: 70, //最大年龄    [1,100] step=1
        minage: 1, //最小年龄    [1,100] step=1
        genderthreshold: 0.5, //男女阀值     [0,1] step=0.01 alg:x100
        facecaptureinterval: 3, //人脸抓取间隔 [1,20] step=1
        incoefficient: 1, //走入参数 [0.1,10] step=0.01 alg:x100
        outcoefficient: 1, //走出参数 [0.1,10] step=0.01 alg:x100
      },
      defalutConfig: {
        zoomstep: 0.1,
        zoomscalemin: 0.5, //最小人头尺寸 [0,1000] step=5
        zoomscalemax: 8, //最大人头尺寸 [0,1000] step=5
      },
    };
  },
  methods: {
    senDataChange() {
      this.saveConfig('config',this.algoform)
    },
    advclick() {
      this.advvisbale = true;
    },
    /**
     * @description: 设置ROI绘制图形及类型
     * @param {*} val 图形类型
     * @param {*} type 绘制类型
     * @return {*}
     */
    selectShape(val,type) {
      this.$refs.rois.setDrawType(val,type);
      this.active = type;
    },
    headeDataChange() {},
    closeadvancedModal() {
      this.advvisbale = false;
    },
   /**
    * @description: 刷新
    * @param {*}
    * @return {*}
    */    
   refresh(){
     this.getConfig('refresh')
   },
    /**
     * @description: 获取配置参数
     * @param {*}
     * @return {*}
     */    
    getConfig(type){
      this.$api.getAlgo().then(res => {
        this.algconfigData = res;
        this.algoform = res.scene.config.json.face;
        this.roidata = res.scene.rois
        if(type == 'refresh'){
          this.$refs.rois.resetRoi();
          this.$refs.rois.capImg();
        }
      })
    },
    /**
     * @description: 保存算法配置
     * @param {*} data 保存数据
     * @return {*}
     */
    saveConfig(type,data){
      this.disabled = true;
      let info = "";
      if(type == 'config') {
         this.algconfigData.scene.config.json.face = data;
         info = "参数配置成功！"
      } else if(type == 'roi') {
          info = "标定配置成功！"
      }
      this.$api.setAlgo(this.algconfigData).then(res => {
        if(res.success) {
          this.getConfig('refresh');
          // this.algconfigData.scene.config = this.algoform;
          this.$message({
              message: info,
              type: 'success'
          });
        }
      })
    },
    imgload(){
      console.log('============loadingsuccess========')
      this.disabled = false;
    },
    /**
     * @description: 保存ROI设置
     * @param {*}
     * @return {*}
     */    
    saveRoi(){
      this.$refs.rois.saveRoi()
    },
    resetRoi(){
      this.$refs.rois.resetRoi()
      this.disabled = false;
    },
  },
  created(){
    this.getConfig()
  }
};
</script>

<style scoped>
.algobox {
  margin-top: 10px;
}
.video-box {
  text-align: left;
}
.leftbox {
  float: left;
  width: 860px;
}
.rightbox {
  width: 335px;
  float: left;
  margin-left: 10px;
}
.video-play {
  height: 500px;
  background: #333;
}
.video-box .video-title {
  height: 40px;
  line-height: 40px;
  border: 1px solid rgba(134, 132, 132, 0.5);
  padding-left: 20px;
  background: rgba(142, 228, 251,1);
}
.about-set {
  text-align: left;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  border: 1px solid rgba(134, 132, 132, 0.5);
}
.set-box .header {
  height: 40px;
  line-height: 40px;
  background: rgba(142, 228, 251,1);
  text-align: left;
  padding-left: 10px;
  width: 100%;
}
.set-content {
  position: relative;
}
.setbtn-box .title {
  font-size: 14px;
  color: #409eff;
  padding-left: 10px;
}
.tipinfo {
  float: left;
  padding-top: 10px;
  width: 20px;
}
.algosetfromitem {
  position: relative;
  float: left;
}

.algoslider {
  float: left;
  width: 245px;
}
.topset {
  text-align: right;
  color: #000;
}
.isactive{
  background: #409eff;
  color: #fff;
}
</style>