index.vue

<template>
  <div class="box">
    <div>
      <el-table
        :data="taskInfo.mtasks[0].scenes"
        highlight-current-row
        style="width: 80%;float:left"
        height="25vh"
        @cell-click="handleCurrentChange"
        v-loading="loading"
      >
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column align="center" label="预置位编号" width="120">
          <template slot-scope="scope">
            <div>{{ setpositionnum(scope.row.position_num) }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="预设位置配置" width="120">
          <template slot-scope="scope">
            <div class="yzw-setbox">
              <span class="icon el-icon-delete" @click="resetRoi(scope.row)"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="时间设置" width="160">
          <template slot-scope="scope">
            <div class="yzw-setbox">
              <setTimer
                ref="settimer"
                :runtime="scope.row.runtime"
                :runindex="scope.$index"
                @timerchange="submitTimer(scope.row, $event)"
              ></setTimer>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="参数设置">
          <template slot-scope="scope">
            <div class="table-set">
              <el-tooltip
                class="item"
                effect="dark"
                :content="taskInfo.param_status == 0 ? '运行中' : '下发中'"
                placement="top"
              >
                <span @click="setParam(scope.row, scope.$index)">参数设置</span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="taskInfo.roi_status == 0 ? '运行中' : '下发中'"
                placement="top"
              >
                <span @click="setArea(scope.row, scope.$index)">区域设置</span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="
                  taskInfo.calibration_status == 0 ? '运行中' : '下发中'
                "
                placement="top"
              >
                <span @click="setDemarcate(scope.row, scope.$index)">标定设置</span>
              </el-tooltip>
              <!-- <span @click="setTimer(scope.row, scope.$index)">时间设置</span> -->
              <el-tooltip
                class="item"
                effect="dark"
                content="删除场景"
                placement="top"
              >
                <span v-if="scope.$index!=taskInfo.mtasks[0].scenes.length - 1" @click="delsounces(scope.row, scope.$index)" class="el-icon-remove"></span>
              </el-tooltip>
                <el-tooltip
                class="item"
                effect="dark"
                content="增加场景"
                placement="top"
              >
                <span @click="addsounces()" class="el-icon-circle-plus"></span>
              </el-tooltip>
            </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" @change="suspends"></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" :subtaskid="subtaskid"></handleparam>
    </div>
    <div class="yt-box">
      <ytconfig ref="yt" @subpostion="submitPosion" @deleteytconfig="deleteytconfig" :vchan="vchan"></ytconfig>
    </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";
import handleparam from "./handleparam";
import setTimer from "./setTimer";
export default {
  data() {
    return {
      timer: 0,
      user_unid: "",
      loading: false,
      polling_state: false,
      timersel: 0,
      timerDialog: false,
      curindex: 0,
      timerscenes: null,
      currentRow: null,
      taskInfo: {
        mtasks: [
          {
            scenes: []
          }
        ]
      },
      switchstate: false
    };
  },
  props: ["taskid", "subtaskid", "playurl", "vchan", "subtaskdata"],
  components: {
    areas,
    demarcate,
    parameter,
    ytconfig,
    handleparam,
    setTimer
  },
  methods: {
    setParam(scenesdata, index) {
      if (this.checkpollstate()) {
        this.curindex = index;
        this.$refs.parameter.init(scenesdata, this.taskInfo);
      }
    },
    setArea(roidata, index) {
      if (this.checkpollstate()) {
        this.curindex = index;
        this.$refs.areas.showModal(roidata, this.taskInfo);
      }
    },
    setDemarcate(scenesdata, index) {
      if (this.checkpollstate()) {
        this.curindex = index;
        console.log("scenesdata", scenesdata);
        this.$refs.demarcate.showModal(scenesdata, this.taskInfo);
      }
    },
    handleparam(type) {
      if (type == "upload") {
        this.$refs.handleparam.show(type, this.subtaskid, this.subtaskdata);
      } else {
        this.$api.task.exportParams(this.subtaskid).then(res => {
          if (res.ecode == 200) {
            location.href = res.enote;
            let sunbtaskname = this.subtaskdata.subtask_name;
            this.$logs.oplogs(res,'serv_scene',`任务导出,任务名称：${sunbtaskname}`);
          }
        });
      }
    },
    setsounces() {
      if (this.checkpollstate()) {
        this.$refs.yt.openyt(this.currentRow);
        this.getSipSetting();
      }
    },
    //增加场景
    addsounces(){
      let scensinit = JSON.parse(JSON.stringify(this.taskInfo.mtasks[0].scenes[0])); 
      scensinit.config = {}
      scensinit.rois = "";
      scensinit.runtime = -1
      scensinit.scene_unid = this.uuid()
      scensinit.position_name = 1
      scensinit.position_num = -1  
      this.taskInfo.mtasks[0].scenes.push(scensinit)
    },
    //删除场景
    delsounces(row,index){
      this.taskInfo.mtasks[0].scenes.splice(index,1)
    },
    getSipSetting: function() {
      if (this.dev_unid) {
        this.$api.device.sipSet(this.dev_unid, this.user_unid).then(res => {
          if (!res.ecode) {
            console.log("获取sip配置返回:", JSON.stringify(res));
            document
              .getElementById("VionVideo")
              .PtzRegistDev(
                res.sip_serv_ip,
                res.sip_unid,
                res.sip_password,
                res.sip_serv_id
              );
          } else {
            this.$message({
              message: "获取播放地址失败,请前往配置sip服务!!请重试!",
              type: "error"
            });
          }
        });
      } else {
        console.log("运维ID获取失败");
        this.$message({
          type: "warning",
          message: "运维ID获取失败"
        });
      }
    },
    TaskParams(subid) {
      this.loading = true;
      this.$api.task.getTaskParams(this.taskid, subid).then(res => {
        this.taskInfo = res;
        this.switchstate = res.alternate_status == "1" ? true : false;
        this.loading = false;
        this.$forceUpdate();
      });
    },
    setTimer(data) {
      this.timerscenes = data;
      this.polling_state = data.pollingState;
      this.$store.commit("setocxstate", 0);
      this.timerDialog = true;
      this.timer = data.runtime;
    },
    resetRoi(row) {
      var that = this;
      this.$store.commit("setocxstate", 0);
      this.$confirm("删除参数设置，区域设置，标定设置信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.taskInfo.mtasks[0].scenes.map(ele => {
            if (ele.scene_unid == row.scene_unid) {
              ele.config = {};
              if (ele.rois) {
                ele.rois[0].roi =
                  '<?xml version="1.0" encoding="UTF-8" ?><roi><flow_roi><flow_type></flow_type><flow_region><polygon_point_count>0</polygon_point_count></flow_region></flow_roi><plate_detect_region><detect_polygon><polygon_point_count>0</polygon_point_count></detect_polygon></plate_detect_region><lane_line><line_count>0</line_count></lane_line><lanes><lane_count>0</lane_count></lanes><lights><light_count>0</light_count></lights><no_stop_region><region_count>0</region_count></no_stop_region><pedestrian_detection_region><region_count>0</region_count></pedestrian_detection_region><median_lines><lane_count>0</lane_count></median_lines><pedestrian_density_region><region_count>0</region_count></pedestrian_density_region><foreign_detection_region><region_count>0</region_count></foreign_detection_region><test_result_region><region_count>0</region_count></test_result_region></roi>';
              }
              ele.runtime = 0;
            }
          });
          let sunbtaskname = this.subtaskdata.subtask_name;
          that.subRoi(that.taskInfo.mtasks,`任务${sunbtaskname}删除参数设置，区域设置，标定设置信息`);
        })
        .catch(() => {
          this.$store.commit("setocxstate", 1);
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    setpositionnum(index) {
      return index == -1 ? "未设置" : index;
    },
    handleTimerClose() {
      this.timerDialog = false;
      this.$store.commit("setocxstate", 1);
    },
    handleCurrentChange(val) {
      // if (val.algo_type == 3) {
        this.currentRow = val;
        this.$api.task
          .switchScene(this.taskid, this.subtaskid, val.scene_unid)
          .then(res => {
            console.log(res);
          });
      // }
    },
    suspends() {
      if (this.subtaskid) {
        let _s = this.switchstate ? 1 : 0;
        this.$api.task
          .suspendAlternate(this.taskid, this.subtaskid, _s)
          .then(res => {
            let stautus = _s == 1?"开启":"关闭";
            this.$logs.oplogs(res,'serv_scene', `${this.subtaskdata.subtask_name}${stautus}轮询播放`);
          });
      }
    },
    checkpollstate() {
      let state = false;
      if (this.switchstate) {
        this.$message({
          message: "请先关闭轮循再进行操作！",
          type: "warning"
        });
        state = false;
      } else {
        state = true;
      }
      return state;
    },
    submitPosion(positionnum) {
      this.taskInfo.mtasks[0].scenes.map(ele => {
        if (ele.scene_unid == this.currentRow.scene_unid) {
          ele.position_num = positionnum;
        }
      });
       let sunbtaskname = this.subtaskdata.subtask_name;
      this.subRoi(this.taskInfo.mtasks,`设置${sunbtaskname}预置位`);
    },
    deleteytconfig(positionnum) {
      this.taskInfo.mtasks[0].scenes.map(ele => {
        if (ele.scene_unid == this.currentRow.scene_unid) {
          ele.position_num = -1;
        }
      });
       let sunbtaskname = this.subtaskdata.subtask_name;
      this.subRoi(this.taskInfo.mtasks,`删除预置位${positionnum}`);
    },
    submitTimer(item, stimer) {
      this.taskInfo.mtasks[0].scenes.map(ele => {
        if (ele.scene_unid == item.scene_unid) {
          ele.runtime = stimer;
        }
      });
      this.subRoi(this.taskInfo.mtasks,'设置预置位运行时间');
    },
    subRoi(mdata,info) {
      let data = {
        subtask_id: this.subtaskid,
        mtasks: mdata
      };
      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);
          this.TaskParams(this.subtaskid);
        }
        this.$logs.oplogs(res,'serv_scene', info);
      });
    },
    showview() {
      let routeData = this.$router.resolve({
        name: "show",
        query: {
          taskid: this.taskid,
          subtaskid: this.subtaskid,
          playurl: this.playurl ? this.playurl.rtsp_url : ""
        }
      });
      localStorage.setItem("showulr", JSON.stringify(this.playurl));
      setTimeout(() => {
        window.open(routeData.href, "_blank");
      }, 0);
    },
    submit: function(xml, type) {
      let sunbtaskname = this.subtaskdata.subtask_name;
      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
          }
        ];
        postObj.conf_type = "rois";
      } else if (type == "config") {
        postObj.mtasks[0].scenes[this.curindex].config = {
          xml: xml
        };
        postObj.conf_type = "paramsconfig";
      } else if (type == "calibration") {
        console.log(xml);
        postObj.mtasks[0].scenes[this.curindex].calibration = {
          calibration: xml
        };
        postObj.conf_type = "calibration";
      }
      let pnum = postObj.mtasks[0].scenes[this.curindex].position_num;
      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.roi_status = 1;
                this.taskInfo.mtasks[0].scenes[this.curindex].rois = [
                  {
                    roi: xml
                  }
                ];
                this.$logs.oplogs(m,'serv_scene',`修改了任务:${sunbtaskname},预置位编号${pnum}的区域配置`);
                break;
              case "calibration":
                this.taskInfo.calibration_status = 1;
                this.taskInfo.mtasks[0].scenes[this.curindex].calibration = {
                  calibration: xml
                };
                this.$logs.oplogs(m,'serv_scene',`修改了任务:${sunbtaskname},预置位编号${pnum}的标定`);
                break;
              case "config":
                this.taskInfo.param_status = 1;
                this.taskInfo.mtasks[0].scenes[this.curindex].config = {
                  xml: xml
                };
                this.$logs.oplogs(m,'serv_scene',`修改了任务:${sunbtaskname},预置位编号${pnum}的参数设置`);
                break;
              default:
                break;
            }
          } else {
            this.$message({
              message: m.enote,
              type: "error"
            });
          }
        });
    }
  },
  created() {
    this.user_unid = window.sessionStorage.getItem("user_unid");
  },
  watch: {
    // subtaskid(val) {
    //   this.loading = true;
    //   this.$api.task.getTaskParams(this.taskid, val).then(res => {
    //     this.taskInfo = res;
    //     this.switchstate = res.alternate_status == 1 ? true : false;
    //     this.loading = false;
    //     this.$forceUpdate();
    //   });
    // }
  }
};
</script>
<style lang="scss" 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: 19%;
  float: right;
  height: 25vh;
  @include background_color(hometabletr_bg);
}

.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: 40px;
  line-height: 40px;
  text-align: center;
  @include background_color(setheader_bg);
}

.set-item {
  height: 3vh;
  line-height: 3vh;
  min-height: 30px;
  padding: 0 10px;
  color: #555555;
  @include  font-colr(options_color);
  margin-top: 1vh;
  cursor: pointer;

  .set-icon {
    display: inline-block;
    float: right;
    line-height: 3vh;
    font-size: 20px;
    @include font-colr(task_icon_color);
  }

  .set-icon:hover {
    color: #3BB7FF!important;
  }
}

.upload-box {
  margin-right: 20px;
}

.yt-box {
}

.settimertype, .sel-box {
  display: flex;
  margin-bottom: 10px;

  .title {
    line-height: 30px;
    padding-right: 10px;
  }
}
</style>