index.vue

<template>
  <div >
    <div class="">
      <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>时间设置</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"
            active-color="#13ce66"
            inactive-color="#ff4949">
            </el-switch>
          </span> 
        </div>
        <div class="set-item" @click="exportparam">配置导入  <span class="set-icon el-icon-download"></span> </div>
        <div class="set-item" @click="uploadparam">配置导出  <span class="set-icon el-icon-upload"></span> </div>
        <div class="set-item" @click="uploadparam">效果展示  <span class="set-icon el-icon-s-help"></span> </div>
      </div>
    </div>
    <div>
      <parameter ref="parameter"></parameter>
    </div>
    <div>
        <areas ref="areas"></areas>
    </div>
    <div>
        <demarcate  ref="demarcate"></demarcate>
    </div>
    <div>

    </div>
  </div>
</template>
<script>
import areas from './area'
import demarcate from './demarcate'
import parameter from './parameter'
import ytconfig from './ytconfig'
export default {
  data(){
    return{
    taskInfo:{
      mtasks:[{
        scenes:[]
      }]
    },
    switchstate:true,
  }
  },
  props:['taskid','subtaskid'],
  components:{
    areas,
    demarcate,
    parameter,
    ytconfig
  },
  methods: {
     setParam(){
       this.$refs.parameter.init(this.taskInfo)
      },
      setArea(roidata){
        this.$refs.areas.showModal(roidata,this.taskInfo)
      },
      setDemarcate(){
        this.$refs.demarcate.showModal(this.taskInfo);
      },
      exportparam(){

      },
      uploadparam(){

      },
      getTaskParams(){
        this.$api.task.getTaskParams(this.taskid,this.subtaskid).then(data => {
          this.taskInfo = data
          console.log(res.data)
        })
      },
      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>
.yzw-setbox{
  .icon {
    font-size 16px
    padding 0 10px
  }
}
.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
  }
}
.upload-box {
  margin-right 20px
}

</style>