调整摄像机接入页面

zhangzengfei

2020-07-30 d6bf6c38fe15510aac8e56569ca0450fb8656c89

 src/pages/cameraAccess/components/SceneRule.vue

File was renamed from src/components/camera/SceneRule.vue
@@ -2,16 +2,22 @@
  <div class="scene-edit-container">
    <div class="scene-title">
      <b style="font-size: 14px; line-height: 18px;">场景</b>
      <el-button type="primary" size="mini" @click="handleCreate" style="margin-left:87%" v-show='!editScene'>+ 添加场景</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="handleCreate"
        style="margin-left:87%"
        v-show="!editScene"
      >+ 添加场景</el-button>
    </div>

    <el-form ref="form" label-width="80px"  v-show="editScene">
    <el-form ref="form" label-width="80px" v-show="editScene">
      <div class="flex-form">
        <div class="left">
          <el-form-item label="场景名称">
            <el-input v-model="sceneForm.scene_name" size="mini" maxlength="15"></el-input>
          </el-form-item>
          <el-form-item label="事件等级" >
          <el-form-item label="事件等级">
            <el-select
              v-model="sceneForm.alarm_level"
              placeholder="请选择"
@@ -26,12 +32,7 @@
            </el-select>
          </el-form-item>
          <el-form-item label="时间段">
            <el-select
              v-model="sceneForm.time_rule_id"
              placeholder="请选择"
              size="mini"
              
            >
            <el-select v-model="sceneForm.time_rule_id" placeholder="请选择" size="mini">
              <el-option
                v-for="item in VideoManageData.TimeRules"
                :key="item.id"
@@ -48,8 +49,8 @@
        </div>
      </div>
      <!-- <el-row>
        <el-col :span="8"> -->
          <!-- <el-form-item label="场景模板">
      <el-col :span="8">-->
      <!-- <el-form-item label="场景模板">
            <el-select
              v-model="sceneForm.template_id"
              placeholder="请选择"
@@ -64,8 +65,8 @@
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
        <!-- </el-col>
      </el-form-item>-->
      <!-- </el-col>
        <el-col :span="8">
          <el-form-item label="时间段">
            <el-select
@@ -83,7 +84,7 @@
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
      </el-row>-->
      <!-- <el-row>
        <el-col :span="8">
          <el-form-item label="场景名称">
@@ -95,7 +96,7 @@
            <el-input v-model="sceneForm.desc" type="textarea" size="mini" style="width:200px;height:180px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
      </el-row>-->
      <!-- <el-row>
        <el-col :span="8">
          <el-form-item label="事件等级">
@@ -113,7 +114,7 @@
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
      </el-row>-->

      <scene-editor
        ref="sceneEditor"
@@ -147,14 +148,12 @@
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="策略" prop="group_text" align="center" min-width="350px" >
          <el-table-column label="策略" prop="group_text" align="center" min-width="350px">
            <template slot-scope="scope">
              <span v-html="scope.row.group_text"></span>
            </template>
          </el-table-column>
          <el-table-column label="时间段" prop="time_name" align="center" width="100">

          </el-table-column>
          <el-table-column label="时间段" prop="time_name" align="center" width="100"></el-table-column>
          <el-table-column label="描述" prop="desc" align="center" min-width="150"></el-table-column>
          <!-- <el-table-column label="状态" align="center" width="90">
            <template slot-scope="scope">
@@ -198,7 +197,7 @@
  deleteCameraScene
} from '@/api/scene'
import RuleEditor from "@/components/subComponents/RuleEditor";
import SceneEditor from "@/components/scene/Editor";
import SceneEditor from "./scene/Editor";

export default {
  name: "SceneRuleEditor",
@@ -271,22 +270,22 @@
    }
  },
  methods: {
    bubbleSort(arr){
      for(var i = arr.length-1;i > 0 ; i--){
          for(var j = 0; j < i; j++){
              if(arr[j]>arr[j+1]){
                  let temp = arr[j];
                  arr[j]= arr[j+1];
                  arr[j+1] = temp
              }
    bubbleSort(arr) {
      for (var i = arr.length - 1; i > 0; i--) {
        for (var j = 0; j < i; j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp
          }
        }
      }
      return arr;
    },
    getSceneName(sdk_name){
    getSceneName(sdk_name) {
      this.sceneNameStore.push(sdk_name)

      if(!this.sceneForm.scene_name.trim()){
      if (!this.sceneForm.scene_name.trim()) {
        this.sceneForm.scene_name = sdk_name
      }
      // }else if(this.sceneForm.scene_name == store[store.length-2]){
@@ -306,21 +305,21 @@
      this.$refs.sceneEditor.cleanRule();
    },
    handleCreate() {
      debugger
      console.log(this.DataStackPool.selectedDir.id,this.TreeDataPool.treeActiveName=='dataStack')

      console.log(this.DataStackPool.selectedDir.id, this.TreeDataPool.treeActiveName == 'dataStack')
      if (this.linkRule && this.TreeDataPool.selectedNodes.length < 2) {
        this.$notify({
          type: "warning",
          message: "请选择至少2个摄像机!"
        });
        return false;
      }else if(!this.linkRule && this.TreeDataPool.treeActiveName != 'dataStack' && this.TreeDataPool.selectedNodes.length < 1){
      } else if (!this.linkRule && this.TreeDataPool.treeActiveName != 'dataStack' && this.TreeDataPool.selectedNodes.length < 1) {
        this.$notify({
          type: "warning",
          message: `请选择1个摄像机!`
        });
        return false;
      }else if(this.TreeDataPool.treeActiveName=='dataStack' && !this.DataStackPool.selectedDir.id){
      } else if (this.TreeDataPool.treeActiveName == 'dataStack' && !this.DataStackPool.selectedDir.id) {
        this.$notify({
          type: "warning",
          message: `请先选择数据栈文件夹!`
@@ -330,25 +329,25 @@
      this.editScene = true;
      this.cleanForm();
      console.log(this.tableRuleList)
   

      //初始化场景名称
      var pattern = /^场景\s*\d+\s*$/;
      var tempArr = [];
      this.tableRuleList.forEach(scene=>{
        debugger
        if(pattern.test(scene.scene_name)){
      this.tableRuleList.forEach(scene => {

        if (pattern.test(scene.scene_name)) {
          tempArr.push(Number(scene.scene_name.substring(2).trim()));
        }
      });
      let latest = tempArr.length>0? this.bubbleSort(tempArr)[tempArr.length-1]+1 : 1;
  
      this.sceneForm.scene_name = '场景'+latest;
      let latest = tempArr.length > 0 ? this.bubbleSort(tempArr)[tempArr.length - 1] + 1 : 1;

      this.sceneForm.scene_name = '场景' + latest;
      //初始化时间段
      this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
      

    },
    handleEdit(scene) {
      debugger

      this.sceneForm = scene;
      this.editScene = true;
      let selectedTpl = {};
@@ -358,10 +357,10 @@
        }
      })
      this.templateSdks = selectedTpl.sdks;
      debugger

      this.templateRules = JSON.stringify(scene.rules);
      this.$refs.sceneEditor.editHandle(this.templateRules);
      

    },
    updateTemplates() {
      getAllTemplate().then(rsp => {
@@ -386,21 +385,21 @@
      this.templateSdks = selectedTpl.sdks;
      this.templateRules = selectedTpl.rules;
    },
    validateForm(){
      debugger
      if(!this.sceneForm.scene_name.trim()){
    validateForm() {

      if (!this.sceneForm.scene_name.trim()) {
        this.$notify({
          type: 'warning',
          message: '场景名不能为空'
        });
        return false
      }else if(!this.sceneForm.alarm_level){
      } else if (!this.sceneForm.alarm_level) {
        this.$notify({
          type: 'warning',
          message: '事件等级不能为空'
        });
        return false
      }else if(!this.sceneForm.time_rule_id){
      } else if (!this.sceneForm.time_rule_id) {
        this.$notify({
          type: 'warning',
          message: '时间段不能为空'
@@ -410,8 +409,8 @@
      return true
    },
    saveSceneRule() {
      debugger
      if(!this.validateForm()){

      if (!this.validateForm()) {
        return
      }
      let editorResp = this.$refs.sceneEditor.submitRule();
@@ -445,8 +444,8 @@
        })
        .catch(() => { });
    },
    cellStyle(obj){
      if(obj.column.label=='策略'){
    cellStyle(obj) {
      if (obj.column.label == '策略') {
        return 'text-align:left;padding-left:8px;'
      }
    }
@@ -460,32 +459,33 @@
    height: 30px;
    text-align: left;
    margin: 10px 0px;
    
  }
  .flex-form{
  .flex-form {
    display: flex;
    width: 80%;
    padding-left: 25px;
    .left,.right{
    .left,
    .right {
      width: 43.3%;
      min-width: 550px;
      .el-form-item{
      .el-form-item {
        margin-bottom: 16px;
      }
      .el-form-item__label{
      .el-form-item__label {
        text-align: left;
      }
      .el-form-item__content{
      .el-form-item__content {
        text-align: left;
        .el-input,.el-select{
        .el-input,
        .el-select {
          width: 400px !important;
        }
      }
      textarea{
      textarea {
        height: 143px;
      }
    }
    .right{
    .right {
      padding-top: 6px;
    }
  }
@@ -495,9 +495,8 @@
      padding: 0px;
      box-sizing: border-box;
    }
    .el-form-item{
    .el-form-item {
      width: calc(100% - 30px);
      
    }
    .el-input__inner {
      border: 0px !important;
@@ -512,8 +511,8 @@
    span {
      cursor: pointer;
    }
    .cell{
      padding-left: 0!important;
    .cell {
      padding-left: 0 !important;
    }
  }
}