index.vue

<template>
  <div class="box">
    <div>
      <el-table
        :data="taskInfo.mtasks[0].scenes"
        border
        stripe
        style="width: 80%;float:left"
        height="25vh"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </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, scope.$index)">参数设置</span>
              <span @click="setArea(scope.row, scope.$index)">区域设置</span>
              <span @click="setDemarcate(scope.row, scope.$index)">标定设置</span>
              <span @click="setTimer(scope.row, scope.$index)">时间设置</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="setting-box">
        <div class="set-header ">基础操作</div>
        <div class="set-item" @click="setsounces">
          场景配置 <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 ref="yt"></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,
      curindex: 0,
      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(scenesdata, index) {
      this.curindex = index;
      this.$refs.parameter.init(scenesdata);
    },
    setArea(roidata, index) {
      this.curindex = index;
      this.$refs.areas.showModal(roidata, this.taskInfo);
    },
    setDemarcate(scenesdata, index) {
      this.curindex = index;
      this.$refs.demarcate.showModal(scenesdata);
    },
    handleparam(type) {
      this.$refs.handleparam.show(type);
    },
    setsounces() {
      this.$refs.yt.openyt();
    },
    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) {
      this.taskInfo.mtasks[0].time_interval = this.timer;
      let data = {
        subtask_id: this.subtaskid,
        mtasks: this.taskInfo.mtasks
      };
      this.$api.task.editRoi(this.taskid, this.subtaskid, data).then(res => {
        if (res.ecode == 200) {
          this.timerDialog = false;
          this.$message({
            message: res.enote,
            type: "success"
          });
          this.$store.commit("setocxstate", 1);
        }
      });
    },
    showview() {
      let routeData = this.$router.resolve({
         name: "show",
          query: {
          taskid: this.taskid,
          subtaskid: this.subtaskid,
          playurl: this.playurl
        }
        });
        window.open(routeData.href, '_blank');
    },
    submit: function(xml, type) {
      let postObj = {
        subtask_id: this.subtaskid,
        mtasks: [
          {
            mtask_unid: this.taskInfo.mtasks[0].mtask_unid,
            // type: 0,
            // priority: 0,
            scenes: this.taskInfo.mtasks[0].scenes
          }
        ]
      };
      if (type == "roi") {
        postObj.mtasks[0].scenes[this.curindex].rois = [
          {
            roi: xml
          }
        ];
      } else if (type == "config") {
        postObj.mtasks[0].scenes[this.curindex].config = {
          xml: xml
        };
      } else if (type == "calibration") {
        console.log(xml);
        postObj.mtasks[0].scenes[this.curindex].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[this.curindex].rois = [
                  {
                    roi: xml
                  }
                ];
                break;
              case "calibration":
                this.taskInfo.mtasks[0].scenes[this.curindex].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{

}
.settimertype,.sel-box{
  display flex
  margin-bottom 10px
  .title {
    line-height 30px;
    padding-right 10px
  }
}
</style>