addTpl.vue

<template>
  <div class="add-template">
    <el-dialog title="新建算法模板" :visible.sync="dialogVisable" class="detail-modal" width="65%">
      <div class="tpl-tbody">
        <ul class="input-warp">
          <li hidden>
            <span>业务类型</span>
            <span>
              <el-select
                v-model="tplType"
                placeholder="业务类型"
                class="algo-header-left"
                @change="typeChangeHandle"
              >
                <el-option value="jiaotong" label="交通算法"></el-option>
                <el-option value="zongzhi" label="城市综合治理算法"></el-option>
                <el-option value="shequ" label="社区管理算法"></el-option>
                <el-option value="renlian" label="人脸识别算法"></el-option>
                <el-option value="yuyi" label="语义分析算法"></el-option>
                <el-option value="wenben" label="文本识别算法"></el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span>模板名称</span>
            <span>
              <el-input v-model="tplName" placeholder="请输入模板名称"></el-input>
            </span>
          </li>
        </ul>
        <!-- <div class="tpl-group-warp">
                    <h5>算法库</h5>
                    <ul class="tpl-group">
                        <li v-for="(item, index) in algoBase" :key="index">
                            <div class="algo-item scrollbar" @click="algoClickHandle">
                                <span v-for="(algoItem, algoIndex) in item.list" :key="algoIndex" :title="algoItem.algid">{{ algoItem.algid }}</span>
                            </div>
                            <p>
                                <i>{{ item.name }}</i>
                                <b></b>
                            </p>
                        </li>
                    </ul>
        </div>-->

        <div class="tpl-group-warp">
          <ul class>
            <li class="selitem">
              <el-select v-model="bp1" placeholder="视频检测算法" filterable @change="showsfmodal('bp1')">
                <el-option value="spsf" label="视频检测算法">视频检测算法</el-option>
                <el-option value="sbsf" label="图像识别算法">图像识别算法</el-option>
                <el-option value="xwsf" label="行为分析算法">行为分析算法</el-option>
                <el-option value="yysf" label="应用算分">应用算分</el-option>
              </el-select>
            </li>
            <li>
              <i class="el-icon-d-arrow-right"></i>
            </li>
            <li class="selitem">
              <el-select v-model="bp2" placeholder="图像识别算法" filterable @change="showsfmodal('bp2')">
                <el-option value="spsf" label="视频检测算法">视频检测算法</el-option>
                <el-option value="sbsf" label="图像识别算法">图像识别算法</el-option>
                <el-option value="xwsf" label="行为分析算法">行为分析算法</el-option>
                <el-option value="yysf" label="应用算分">应用算分</el-option>
              </el-select>
            </li>
            <li>
              <i class="el-icon-d-arrow-right"></i>
            </li>
            <li class="selitem">
              <el-select v-model="bp3" placeholder="行为分析算法" filterable @change="showsfmodal('bp3')">
                <el-option value="spsf" label="视频检测算法">视频检测算法</el-option>
                <el-option value="sbsf" label="图像识别算法">图像识别算法</el-option>
                <el-option value="xwsf" label="行为分析算法">行为分析算法</el-option>
                <el-option value="yysf" label="应用算分">应用算分</el-option>
              </el-select>
            </li>
            <li>
              <i class="el-icon-d-arrow-right"></i>
            </li>
            <li class="selitem">
              <el-select v-model="bp4" placeholder="应用算法" filterable @change="showsfmodal('bp4')">
                <el-option value="spsf" label="视频检测算法">视频检测算法</el-option>
                <el-option value="sbsf" label="图像识别算法">图像识别算法</el-option>
                <el-option value="xwsf" label="行为分析算法">行为分析算法</el-option>
                <el-option value="yysf" label="应用算分">应用算分</el-option>
              </el-select>
            </li>
          </ul>
        </div>
        <div class="sfcontentbox">
          <div class="item">
            <div v-for="(item,index) in sfmodal1" :key="index" class="sfflitem">{{item}}</div>
          </div>
          <div class="item">
            <div v-for="(item,index) in sfmodal2" :key="index" class="sfflitem">{{item}}</div>
          </div>
          <div class="item">
            <div v-for="(item,index) in sfmodal3" :key="index" class="sfflitem">{{item}}</div>
          </div>
          <div class="item">
            <div v-for="(item,index) in sfmodal4" :key="index" class="sfflitem">{{item}}</div>
          </div>
        </div>
        <!-- /tpl-group-warp -->
      </div>
      <!-- /tpl-tbody -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideModal">关 闭</el-button>
        <el-button type="primary" @click="saveTpl">保 存</el-button>
      </span>
      <el-dialog width="40%" :title="sftitle" :visible.sync="innerVisible" append-to-body>
        <div class="sfxzbox">
          <div class="title">镜像算法</div>
          <div class="jxbox">
            <div>
                  <div v-for="(zimte,zindex) in zmfl" :key="zindex" class="flbox">
                    <div class="lesm">{{zimte}}</div>
                      <el-checkbox-group v-model="checkList">
                        <el-col :span="8"  v-for="(item,index) in sfzl"   :key="index">    
                        <el-checkbox
                        :value="item.sfname"
                        :label="item.sfname"
                        v-if="item.sfly =='vionimage' && item.szm == zimte"
                        ></el-checkbox>
                      </el-col>
                    </el-checkbox-group>
                </div>
            </div>
          </div>
          <div class="title">插件算法</div>
          <div class="cjbox">
            <el-checkbox-group v-model="checkList">
                <el-col :span="4"  v-for="(item,index) in sfzl" :key="index">
                    <el-checkbox
                        :value="item.sfname"
                        :label="item.sfname"
                        v-if="item.sfly !='vionimage'"
                    ></el-checkbox>
                </el-col>
            </el-checkbox-group>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="hideSFModal">关 闭</el-button>
          <el-button type="primary" @click="saveSF">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {zongzhi,jiaotong,shequ,renlian,yuyi,wenben} from './algotype'
export default {
  data() {
    return {
      dialogVisable: false,
      hasDialog: true,
      innerVisible: false,
      sftitle: "",
      tplType: "",
      bp1: "",
      bp2: "",
      bp3: "",
      bp4: "",
      sfmodal1: [],
      sfmodal2: [],
      sfmodal3: [],
      sfmodal4: [],
      algoFileType: "traffic",
      tplName: "",
      curmodel: [],
      checkList: [],
      sfzl: [],
      spjcsf:[],
      txsbsf:[],
      // zmfl:["A","B","C","D","E","F","G","H","I","J","k","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
      zmfl:["B","C","D","F","G","H","J","L","M","P","R","S","W","X","Y","Z"]
    };
  },
  methods: {
    tplInit: function(tpl_type) {
      this.dialogVisable = true;
      let flag = this.tplType === tpl_type;
      this.tplType = tpl_type;
      this.algoFileType = "traffic";
    },
    editInit(data){
        this.dialogVisable = true;
        this.bp1=data.bp1;
        this.bp2 = data.bp2;
        this.bp3 = data.bp3;
        this.bp4 =data.bp4;
        this.sfmodal1 = data.sfmodal1;
        this.sfmodal2 = data.sfmodal2;
        this.sfmodal3 = data.sfmodal3;
        this.sfmodal4 = data.sfmodal4;
        console.log(data)
    },
    typeChangeHandle() {},
    showsfmodal(val) {
      let obj = {
        spsf: "视频检测算法",
        sbsf: "识别算法",
        xwsf: "行为算法",
        yysf: "应用算法"
      };
      this.curmodel = val;
      this.innerVisible = true;
      this.checkList = [];
      if (val == "bp1") {
        this.sftitle = obj[this.bp1];
        this.cursf = this.bp1;
      }
      if (val == "bp2") {
        this.sftitle = obj[this.bp2];
        this.cursf = this.bp2;
      }
      if (val == "bp3") {
        this.sftitle = obj[this.bp3];
        this.cursf = this.bp3;
      }
      if (val == "bp4") {
        this.sftitle = obj[this.bp4];
        this.cursf = this.bp4;
      }
      if (this.cursf == "spsf") {
        this.sfzl = this.spjcsf;
        this.zmfl = ["B","C","D","F","G","H","J","L","M","P","R","S","W","X","Y","Z"]
      }
      if (this.cursf == "sbsf") {
        this.sfzl = this.txsbsf;
        this.zmfl =  ["B","C","H","R","W","Z"]
      }
      if (this.cursf == "xwsf") {
        this.sfzl = [];
      }
      if (this.cursf == "yysf") {
        this.sfzl = [];
      }
    },
    hideModal() {
      this.dialogVisable = false;
    },
    hideSFModal() {
      this.innerVisible = false;
    },
    saveTpl() {
      if (this.tplName != "") {
        this.dialogVisable = false;
        let data = {
          tplname: this.tplName,
          create_dt: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          tid: new Date().getTime(),
          sfmodal1: this.sfmodal1,
          sfmodal2: this.sfmodal2,
          sfmodal3: this.sfmodal3,
          sfmodal4: this.sfmodal4,
          bp1:this.bp1,
          bp2:this.bp2,
          bp3: this.bp3,
          bp4: this.bp4
        };
        debugger;
        let tplData = localStorage.getItem("tplData");
        if (tplData) {
          tplData = JSON.parse(tplData);
          tplData.push(data);
          localStorage.setItem("tplData", JSON.stringify(tplData));
        } else {
          var e = [];
          e.push(data);
          localStorage.setItem("tplData", JSON.stringify(e));
        }
        setTimeout(() => {
          this.$emit("refresh");
        }, 300);
      } else {
        this.$message({
          message: "模板名称不能为空！",
          type: "error"
        });
      }
    },
    saveSF() {
      this.innerVisible = false;
      if (this.curmodel == "bp1") this.sfmodal1 = this.checkList;
      if (this.curmodel == "bp2") this.sfmodal2 = this.checkList;
      if (this.curmodel == "bp3") this.sfmodal3 = this.checkList;
      if (this.curmodel == "bp4") this.sfmodal4 = this.checkList;
    }
  },
  created(){
    var jt = JSON.parse(JSON.stringify(jiaotong));
		var zz = JSON.parse(JSON.stringify(zongzhi));
		var sq = JSON.parse(JSON.stringify(shequ));
		var rl =  JSON.parse(JSON.stringify(renlian));
		var wb =  JSON.parse(JSON.stringify(wenben));
        var yy = JSON.parse(JSON.stringify(yuyi));
        var t = [];
        var tData = localStorage.getItem("plugData")?localStorage.getItem("plugData"):"[]";
         var p = JSON.parse(tData)
        t = t.concat(jt,zz,sq,rl,wb,yy,p);
        t.map(ele => {
         if(ele.sflb == "视频检测算法") {
             this.spjcsf.push(ele);
            
         }
         if(ele.sflb == "图像识别算法") {
             this.txsbsf.push(ele);
            
         }
        })
        
  }
};
</script>
<style lang="stylus" scoped>
.detail-modal {
  width: 100%;
}

.tpl-tbody {
  position: relative;
  overflow: hidden;
}

.input-warp {
  overflow: hidden;
}

.input-warp li {
  float: left;
  width: 33%;
  height: 36px;
  line-height: 36px;
  overflow: hidden;
}

.input-warp li span {
  float: left;
  padding-right: 2%;
}

.input-warp li span:last-child {
  padding-right: 0;
}

.tpl-group-warp {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.tpl-group-warp ul {
  display: flex;
  margin-top: 10px;
}

.tpl-group-warp ul li {
  list-style: none;
  width: 93px;
  text-align: center;
  line-height: 30px;
}

.tpl-group-warp ul .selitem {
  width: 200px;
  list-style: none;
}

.sfcontentbox {
  display: flex;
  margin-top: 10px;

  .item {
    width: 197px;
    height: 300px;
    margin-right: 100px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    overflow auto;
  }
}

.sfxzbox {
  height 400px;
  overflow auto
  .title {
    width: 90px;
    font-size: 16px;
    border-bottom: 2px solid #acabab;
    padding: 0 0 5px 5px;
    margin-bottom: 10px;
  }
}

.jxbox {
  margin-bottom: 30px;
}

.cjbox {
  margin-top: 10px;
}

.sfflitem {
  width: 130px;
  margin: 10px auto;
  padding: 5px 10px;
  text-align: center;
  border: 1px solid #ccc;
}
.flbox{
  overflow hidden
}
.lesm{
  height 30px
  line-height 30px
  background #f0f0f0
  padding-left 1px
}
</style>