index.vue

<template>
  <div class="box">
    <div>
      <el-table
        :data="taskInfo.mtasks[0].scenes"
        border
        stripe
        style="width: 80%;float:left">
        <el-table-column
          label="序号"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="预置位编号"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          label="预设位置配置"
          width="180">
          <template>
            <div class="yzw-setbox">
              <span class="icon el-icon-folder-add"></span>
              <span class="icon el-icon-delete"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="参数设置">
          <template slot-scope="scope">
            <div class="table-set">
              <span @click="setParam(scope.row)">参数设置</span>
              <span @click="setArea(scope.row)">区域设置</span>
              <span @click="setDemarcate(scope.row)">标定设置</span>
              <span @click="setTimer(scope.row)">时间设置</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="setting-box">
        <div class="set-header ">基础操作</div>
        <div class="set-item">场景添加 <span class="set-icon  el-icon-circle-plus"></span> </div>
        <div class="set-item">轮询播放 <span class="set-icon">
          <el-switch
            :width="25"
            v-model="switchstate"
          >
            </el-switch>
          </span> 
        </div>
        <div class="set-item" @click="handleparam('upload')">配置导入  <span class="set-icon el-icon-download"></span> </div>
        <div class="set-item" @click="handleparam('export')">配置导出  <span class="set-icon el-icon-upload"></span> </div>
        <div class="set-item" @click="showview()">效果展示  <span class="set-icon el-icon-s-help"></span> </div>
      </div>
      <handleparam ref="handleparam"></handleparam>
    </div>
    <div class="yt-box">
        <ytconfig></ytconfig>
      </div>
    <div>
      <parameter ref="parameter"></parameter>
    </div>
    <div>
        <areas ref="areas"></areas>
    </div>
    <div>
        <demarcate  ref="demarcate"></demarcate>
    </div>
    <div>
        <el-dialog
          title="时间设置"
          :visible.sync="timerDialog"
          width="18%"
          top="15%"
          :before-close="handleTimerClose">
          <div class="settimertype">
              <span class="title">时间长度:</span>
              <div class="timer-sel">
                <el-select v-model="timersel" placeholder="请选择">
                  <el-option
                    label="下拉选择"
                    :value="0">
                  </el-option>
                  <el-option
                    label="自定义"
                    :value="1">
                  </el-option>
                </el-select>
              </div>
          </div>
          <div class="sel-box" v-show ="timersel == 0">
             <span class="title">长度选择:</span>
              <div class="timer-sel">
                <el-select v-model="timer" placeholder="请选择">
                  <el-option
                    v-for="item in timeroptions"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </div>
          </div>
          <div class="sel-box" v-show ="timersel == 1">
             <span class="title">时间长度:</span>
              <div class="timer-sel">
               <el-input v-model="timer" style="padding-right:23px"></el-input>
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleTimerClose">取 消</el-button>
            <el-button type="primary" @click="submitTimer">确 定</el-button>
          </span>
        </el-dialog>
    </div>
  </div>
</template>
<script>
import areas from './area'
import demarcate from './demarcate'
import parameter from './parameter'
import ytconfig from './ytconfig'
import handleparam from './handleparam'
export default {
  data(){
    return{
      timer:0,
      timersel:0,
      timerDialog:false,
      timeroptions:[30,40,50,60,100],
      timerscenes:null,
      taskInfo:{
        mtasks:[{
          scenes:[]
        }]
      },
    switchstate:true,
  }
  },
  props:['taskid','subtaskid','playurl'],
  components:{
    areas,
    demarcate,
    parameter,
    ytconfig,
    handleparam
  },
  methods: {
     setParam(){
       this.$refs.parameter.init(this.taskInfo)
      },
      setArea(roidata){
        this.$refs.areas.showModal(roidata,this.taskInfo)
      },
      setDemarcate(){
        this.$refs.demarcate.showModal(this.taskInfo);
      },
      handleparam(type){
        this.$refs.handleparam.show(type)
      },
      getTaskParams(){
        this.$api.task.getTaskParams(this.taskid,this.subtaskid).then(data => {
          this.taskInfo = data
        })
      },
      setTimer(data){
        this.timerscenes = data;
        this.$store.commit('setocxstate',0)
        this.timerDialog = true;
      },
      handleTimerClose(){
        this.timerDialog = false;
        this.$store.commit('setocxstate',1)
      },
      submitTimer(item){
        item.time_interval = this.timer
        let data = {
          subtask_id: this.subtaskid,
          mtasks: mtasks
        }
        this.$api.task.editRoi(this.taskid, this.subtaskid, data).then(res => {
          if(res.code == 200) {
            this.$message({
                message: '设置成功！' ,
                type: 'success'
            });
           this.$store.commit('setocxstate',1)
          }
        });
      },
      showview(){
        this.$router.push({
          name:'show',
          params:{
            taskid:this.taskid,
            subtaskid:this.subtaskid,
            playurl:this.playurl
          }
        })
        
      },
      submit: function(xml,type) {
				let postObj = {
						subtask_id: this.subtaskid,
						mtasks: [{
							mtask_unid: this.taskInfo.mtasks[0].mtask_unid,
							// type: 0,
							// priority: 0,
							scenes: [{
								scene_unid: this.taskInfo.mtasks[0].scenes[0].scene_unid,
								play_urls: {
									rtsp: this.vchanUrl
								},
								// algo_args: {}
							}]
						}]
					}
					if (type == 'roi') {
						postObj.mtasks[0].scenes[0].rois = [
							{
								roi: xml
							}
						]
					} else if (type == 'config') {
						postObj.mtasks[0].scenes[0].config = {
							xml : xml
						}
					} else if (type == 'calibration'){
						console.log(xml)
						postObj.mtasks[0].scenes[0].calibration = {
							calibration : xml
						}
          }
          this.$api.task.editRoi(this.taskid,this.subtaskid,postObj,{
            headers: {
						  'authorization': localStorage.getItem('atoken')
              },
            }
          ).then( m => {
            if (m.ecode == '200') {
               this.$message({
                message: '设置成功！' ,
                type: 'success'
              });
              switch (type) {
                case 'roi':
                  this.taskInfo.mtasks[0].scenes[0].rois = [{
                    roi: xml
                  }]
                  break;
                case 'calibration':
                  this.taskInfo.mtasks[0].scenes[0].calibration = {
                    calibration:  xml
                  }
                  break;
                default:
                  break;
              }
            }
          })
			},
  },
  watch: {
    subtaskid(val){
      this.$api.task.getTaskParams(this.taskid,val).then(res => {
        this.taskInfo = res;
        console.log(res.data)
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
.box{
  position relative
}
.yzw-setbox{
  .icon {
    font-size 16px
    padding 0 10px
    cursor pointer
  }
  .icon:first-child{
    color #6783E3
  }
  .icon:last-child{
    color red
  }
}

.setting-box{
  width 18%;
  float right
}
.table-set span{
    padding 0 10px
    cursor pointer
    color #666666
    border-right 1px solid #E5E5E5
}
.table-set span:last-child{
  border-right 0
}
.table-set span:hover{
  color #3BB7FF
}
.set-header{
  height 3vh
  line-height 3vh
  text-align center
  background #ACC1FF
}
.set-item{
  height 3vh
  line-height 3vh
  padding:0 10px
  color #555555
  margin-top 1vh
  cursor pointer
  .set-icon{
    display inline-block
    float right 
    line-height 3vh
    font-size 20px
    color #CCCCCC
  }
  .set-icon:hover{
    color #3BB7FF
  }
}
.upload-box {
  margin-right 20px
}
.yt-box{
  position absolute
  top 0
  left 0
  right 0
  margin auto
  color #333
  z-index 100
}
.settimertype,.sel-box{
  display flex
  margin-bottom 10px
  .title {
    line-height 30px;
    padding-right 10px
  }
}
</style>