index.vue

<template>
  <div class="box">
    <div>
      <el-table
        :data="taskInfo.mtasks[0].scenes"
        border
        stripe
        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> -->
            </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"></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) {
      this.$refs.handleparam.show(type);
    },
    setsounces() {
      if (this.checkpollstate()) {
        this.$refs.yt.openyt(this.currentRow);
        this.getSipSetting();
      }
    },
    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(() => {
          debugger;
          that.taskInfo.mtasks[0].scenes.map(ele => {
            if (ele.scene_unid == row.scene_unid) {
              ele.config = {};
              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;
            }
          });
          that.subRoi(that.taskInfo.mtasks);
        })
        .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 => {
            console.log(res);
          });
      }
    },
    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;
        }
      });
      this.subRoi(this.taskInfo.mtasks);
    },
    deleteytconfig(positionnum) {
      this.taskInfo.mtasks[0].scenes.map(ele => {
        if (ele.scene_unid == this.currentRow.scene_unid) {
          ele.position_num = -1;
        }
      });
      this.subRoi(this.taskInfo.mtasks);
    },
    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) {
      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);
        }
      });
    },
    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
          }
        ];
        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";
      }
      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
                  }
                ];
                break;
              case "calibration":
                this.taskInfo.calibration_status = 1;
                this.taskInfo.mtasks[0].scenes[this.curindex].calibration = {
                  calibration: xml
                };
                break;
              case "config":
                this.taskInfo.param_status = 1;
                this.taskInfo.mtasks[0].scenes[this.curindex].calibration = {
                  calibration: xml
                };
                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="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 30px
  line-height 30px
  text-align center
  background #ACC1FF
}
.set-item{
  height 3vh
  line-height 3vh
  min-height 30px
  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>