wvp/web_src/src/components/createConfig.vue

<template>
  <div id="aiConfig w-full" style="width:100%">
    <div class="page-header">
      <div class="page-title">
        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="toBack" ></el-button>
        <el-divider direction="vertical"></el-divider>
        创建ai配置:
        <el-select v-model="aiTypeVal" @change="getNowAiLib" placeholder="请选择">
        <el-option
          v-for="item in aiTypeArr"
          :key="item.val"
          :label="item.text"
          :value="item.val"
          :disabled="item.disabled">
        </el-option>
      </el-select>
      </div>
      <div class="page-header-btn">
      </div>
    </div>

    <el-container v-loading="isLoading" style="min-height: 82vh;flex-direction: column;" >
      <el-card  class="box-card mt-5">
        <div slot="header" class="card-header flex space-between align-center" >
          <span>输入配置对应参数</span>
        </div>
        <div class="box-center">
          <div class="line">
            <div class="label">检测类型</div>
            <div class="input">
              <el-select v-model="triggerType" placeholder="请选择" no-data-text="无法加载类型库">
                <el-option
                  v-for="item in triggerTypeArr"
                  :key="item.val"
                  :label="item.text"
                  :value="item.val"
                  :disabled="aiTypeVal===aiTypes.fire && (item.val !== triggerTypes.unlimited)">
                </el-option>
              </el-select>
              <el-tooltip class="item" effect="dark" content="创建新数据库" placement="left-start">
                <el-button icon="el-icon-plus" size="mini" style="font-size: 20px; color: #000;" type="text" @click="toAddLibrary" ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="line" v-if="triggerType !== triggerTypes.unlimited ">
            <div class="label">图形库</div>
            <div class="input">
              <el-select v-model="libraryId" placeholder="请选择" no-data-text="暂时没有算法库">
                <el-option
                  v-for="item in nowAiLib"
                  :key="item.libraryId"
                  :label="item.libraryName"
                  :value="item.libraryId"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
              <el-tooltip class="item" effect="dark" content="创建新数据库" placement="left-start">
                <el-button icon="el-icon-plus" size="mini" style="font-size: 20px; color: #000;" type="text" @click="toAddLibrary" ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="line">
            <div class="label">数据刷新时间</div>
            <div class="input">
              <el-input-number v-model="refreshTime" controls-position="right" :min="10" :max="9999"></el-input-number>
              <span class="ml-3.5">/秒</span>
            </div>
          </div>
          <div class="line">
            <div class="label">配置名称</div>
            <div class="input">
              <el-input placeholder="该配置展示给其他界面的名称" v-model="configName"/>
            </div>
          </div>

          <div class="line">
            <div class="label">检测阈值</div>
            <div class="input">
              <el-input-number v-model="score" controls-position="right" :min="1" :step="0.1" :max="99"></el-input-number>
              <span class="ml-3.5">%</span>
            </div>
          </div>

          <div class="line">
            <div class="label">资源获取地址</div>
            <div class="input">
              <el-input placeholder="使用默认地址" v-model="resourcePath"/>
            </div>
          </div>

          <div class="line">
            <div class="label">多媒体数据上传地址</div>
            <div class="input">
              <el-input placeholder="使用默认地址" v-model="uploadUrl"/>
            </div>
          </div>

          <div class="line">
            <div class="label">回调数据地址</div>
            <div class="input">
              <el-input placeholder="默认不启用" v-model="pushUrl"/>
            </div>
          </div>

        </div>
        <el-divider></el-divider>
        <el-button-group>
          <el-button @click="init">重置</el-button>
          <el-button @click="submitData" type="primary">确认添加</el-button>
        </el-button-group>
      </el-card>
    </el-container>
  </div>
</template>

<script>
import handle from "@/until/handle";
import {toNumber} from "@/until/typeTool";
import aiMap from "@/map/ai";

export default {
  name: "createConfig",
  data(){
    return {
      aiTypes: aiMap.aiTypes,
      aiTypeArr: aiMap.getAITypeArr(),
      triggerTypes: aiMap.triggerTypes,
      triggerTypeArr: aiMap.getTriggerTypeArr(),
      aiTypeVal: 0,
      arithmetic: this.$route.params.arithmetic,
      isLoading:false,
      aiLibList: [],
      nowAiLib: [],
      configName: '',
      libraryId: 0,
      triggerType: 1,
      refreshTime: 60,
      score: 75.5,
      resourcePath: "",
      uploadUrl: "",
      pushUrl: "",
      errorTip: "",
    }
  },
  mounted() {
    // console.log('******************');
    this.init();
    this.loadAiLib();
  },
  methods:{
    toArithmetic: aiMap.toArithmetic,
    toTriggerType: aiMap.toTriggerType,
    init(){
      this.arithmetic = this.$route.params.arithmetic || this.aiTypeArr[0].val;
      this.arithmetic = toNumber(this.arithmetic);
      this.aiTypeVal = this.arithmetic;
      this.libraryId = 0;
      this.configName= '';
      this.libraryId= 0;
      this.triggerType= 1;
      this.refreshTime= 60;
      this.score= 75.5;
      this.resourcePath= "";
      this.uploadUrl= "";
      this.pushUrl= "";
      this.errorTip= "";
      // console.log(this.aiTypeVal);
    },
    toBack(){
      this.$router.back();
      if (this.deviceId === "" ) {
        this.beforeUrl = "/deviceList"
      }
    },
    async loadAiLib(){
      this.isLoading = true;
      let that = this;
      let [err,res] = await handle(this.$axios({
        method: 'get',
        url: `/api/device/query/aiLibrary`
      }))
      this.isLoading = false;
      if (err){
        console.error(err)
        that.$message({
          showClose: true,
          message: err,
          type: 'error'
        });
        return;
      }
      let data = res.data;
      if(data.code === 0 ){
        that.aiLibList = data.data;
      }else{
        console.log(res);
        console.error("未知的返回结果!")
      }
    },
    toAiData(num){
      num=toNumber(num);
      console.log(this.aiLibList);
      let key = Object.keys(this.aiLibList).find(key=>toNumber(this.aiLibList[key].libraryId)===num);
      return key?this.aiLibList[key]:false;
    },
    getNowAiLib(){
      this.nowAiLib = this.aiLibList.filter(aiLib=>toNumber(aiLib.libraryId)===toNumber(this.aiTypeVal));
      this.libraryId = 0;
      this.triggerType = this.triggerTypes.unlimited;
      console.log("------");
      console.log(this.nowAiLib);
    },
    toAddLibrary(){

    },
    // 构建数据结构体
    async submitData(){
      if(!this.arithmetic){return this.$message.warning('未选择算法')}
      if(!this.triggerType){return this.$message.warning('未选择触发类型')}
      if(this.triggerType!==this.triggerTypes.unlimited && !this.libraryId){return this.$message.warning('未选择对应的数据库')}
      let data = {};
      data.configName = this.configName;
      data.arithmetic = this.aiTypeVal;
      data.triggerType = this.triggerType;
      data.score = this.score;
      data.refreshTime = this.refreshTime;
      data.resourcePath = this.resourcePath;
      data.uploadUrl = this.uploadUrl;
      data.pushUrl = this.pushUrl;
      this.isLoading = true;
      let [err,res] = handle(this.$axios({
        method: 'post',
        url: '/api/device/query/addAiConfig',
        data:data
      }));
      this.isLoading = false;
      if(err){
        console.error(err)
        this.$message({
          showClose: true,
          message: err,
          type: 'error'
        });
        return;
      }
      console.log(res);
      this.$message.success("创建成功!!!");
      this.init();
    }
  }
}
</script>

<style scoped>

.box-center{
  width:100%;
  height: auto;
}
.box-center{
  width: 100%;
  height: auto;
  padding: 10px 5px;
  box-sizing: border-box;
}
.box-center .line{
  width: 100%;
  height: 35px;
  display: flex;
  margin-bottom: 10px;
}
.box-center .line .label{
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-center .line .input{
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 8px;
  border-left: 1px solid grey;
}
</style>