修复编辑场景,取消后数据仍然联动的bug

zhangzengfei

2022-03-23 127c6dd281c62acfa5c654f54d113532c6be0928

修复编辑场景,取消后数据仍然联动的bug

 src/pages/cameraAccess/components/SceneRule.vue

@@ -2,13 +2,9 @@
  <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:90%"
        v-show="!editScene"
      >+ 添加场景</el-button>
      <el-button type="primary" size="mini" @click="handleCreate" style="margin-left:90%" v-show="!editScene"
        >+ 添加场景</el-button
      >
    </div>

    <el-form ref="form" label-width="80px" v-show="editScene">
@@ -18,12 +14,7 @@
            <el-input v-model="sceneForm.scene_name" size="mini" maxlength="15"></el-input>
          </el-form-item>
          <el-form-item label="事件等级">
            <el-select
              v-model="sceneForm.alarm_level"
              placeholder="请选择"
              size="mini"
              style="width:250px"
            >
            <el-select v-model="sceneForm.alarm_level" placeholder="请选择" size="mini" style="width:250px">
              <el-option label="一级" :value="1"></el-option>
              <el-option label="二级" :value="2"></el-option>
              <el-option label="三级" :value="3"></el-option>
@@ -47,30 +38,16 @@
            <el-input v-model="sceneForm.desc" type="textarea" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="事件声音">
            <el-select
              v-model="sceneForm.voice"
              placeholder="空"
              size="small"
              value-key="id"
              @change="selSound"
            >
            <el-select v-model="sceneForm.voice" placeholder="空" size="small" value-key="id" @change="selSound">
              <el-option v-for="item in soundList" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
            <span
              @click="togglePlayer"
              style="cursor:pointer; margin-left:20px"
              v-show="sceneForm.voiceId.length"
            >
            <span @click="togglePlayer" style="cursor:pointer; margin-left:20px" v-show="sceneForm.voiceId.length">
              <i
                v-if="togglePlay"
                class="el-icon-video-play"
                style="font-size:26px; vertical-align:middle; color:#409eff"
              ></i>
              <i
                v-else
                class="el-icon-video-pause"
                style="font-size:26px; vertical-align:middle; color:#409eff"
              ></i>
              <i v-else class="el-icon-video-pause" style="font-size:26px; vertical-align:middle; color:#409eff"></i>
            </span>
          </el-form-item>
        </div>
@@ -98,7 +75,7 @@
          border
          style="width:100%"
          :cell-style="cellStyle"
          :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
          :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
        >
          <el-table-column label="序号" type="index" align="center"></el-table-column>
          <el-table-column label="场景名称" prop="scene_name" align="center" show-overflow-tooltip></el-table-column>
@@ -121,24 +98,15 @@
          </el-table-column>
          <el-table-column label="事件等级" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.alarm_level | alarmLevel }}</span>
              <span>{{ scope.row.alarm_level | alarmLevel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tooltip content="编辑" :hide-after="700" placement="top" popper-class="atooltip">
                <i
                  class="iconfont iconbianji1 btn-icon"
                  style="font-size: 28px;"
                  @click="handleEdit(scope.row)"
                ></i>
                <i class="iconfont iconbianji1 btn-icon" style="font-size: 28px;" @click="handleEdit(scope.row)"></i>
              </el-tooltip>
              <el-tooltip
                content="删除"
                :hide-after="700"
                placement="top"
                popper-class="atooltipgroup_"
              >
              <el-tooltip content="删除" :hide-after="700" placement="top" popper-class="atooltipgroup_">
                <i
                  class="iconfont iconshanchu4 btn-icon"
                  style="font-size: 28px; color:red;"
@@ -154,13 +122,10 @@
</template>

<script>
import {
  saveCameraScene,
  deleteCameraScene
} from '@/api/scene'
import RuleEditor from "@/components/subComponents/RuleEditor";
import SceneEditor from "./scene/Editor";
import { getSoundList } from "@/api/event";
import { saveCameraScene, deleteCameraScene } from "@/api/scene"
import RuleEditor from "@/components/subComponents/RuleEditor"
import SceneEditor from "./scene/Editor"
import { getSoundList } from "@/api/event"

export default {
  name: "SceneRuleEditor",
@@ -193,26 +158,26 @@
    alarmLevel(level) {
      switch (level) {
        case 1:
          return "一级";
          return "一级"
        case 2:
          return "二级";
          return "二级"
        case 3:
          return "三级";
          return "三级"
        case 4:
          return "四级";
          return "四级"
        case 5:
          return "五级";
          return "五级"
      }
    }
  },
  watch: {
    tableRuleList(n, o) {
      this.editScene = false;
      this.editScene = false
    }
  },
  mounted() {
    // window.addEventListener('resize', this.windowSizeChange)
    this.getSounds();
    this.getSounds()
    this.eventAudio.addEventListener("ended", () => {
      this.togglePlay = true
    })
@@ -243,27 +208,27 @@
  methods: {
    getSoundById(id) {
      if (id) {
        let sound = this.soundList.find(item => item.id == id);
        let sound = this.soundList.find((item) => item.id == id)
        return sound.name
      } else {
        return ''
        return ""
      }
    },
    getSounds() {
      let _this = this;
      getSoundList().then(res => {
        if (res.success) {
          //_this.soundList = [{ id: "", name: "空", path: "" }].concat(res.data.list)
          _this.soundList = [{ id: "", name: "空", path: "" }].concat(res.data)
        }
      }).catch(
        e => console.log(e)
      )
      let _this = this
      getSoundList()
        .then((res) => {
          if (res.success) {
            //_this.soundList = [{ id: "", name: "空", path: "" }].concat(res.data.list)
            _this.soundList = [{ id: "", name: "空", path: "" }].concat(res.data)
          }
        })
        .catch((e) => console.log(e))
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.sceneForm.voiceId = sound.id;
      this.togglePlay = true;
      this.soundPath = sound.path
      this.sceneForm.voiceId = sound.id
      this.togglePlay = true
      this.eventAudio.pause()
      this.$forceUpdate()
      // this.eventAudio.
@@ -271,15 +236,15 @@
    togglePlayer() {
      if (!this.soundPath) {
        this.$notify({
          type: 'info',
          message: '请先选择一个声音!'
          type: "info",
          message: "请先选择一个声音!"
        })
        return false;
        return false
      }
      debugger
      this.eventAudio.src = this.soundPath;
      this.eventAudio.src = this.soundPath
      if (this.togglePlay) {
        this.eventAudio.play();
        this.eventAudio.play()
        this.togglePlay = false
      } else {
        this.eventAudio.pause()
@@ -291,13 +256,13 @@
      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];
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
          }
        }
      }
      return arr;
      return arr
    },
    getSceneName(sdk_name) {
      this.sceneNameStore.push(sdk_name)
@@ -320,85 +285,87 @@
        time_rule_id: "",
        voice: {},
        voiceId: ""
      };
      this.$refs.sceneEditor.cleanRule();
      this.$refs.sceneEditor.getSdkConnection();
      }
      this.$refs.sceneEditor.cleanRule()
      this.$refs.sceneEditor.getSdkConnection()
    },
    handleCreate() {
      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) {
        })
        return false
      } 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) {
        })
        return false
      } else if (this.TreeDataPool.treeActiveName == "dataStack" && !this.DataStackPool.selectedDir.id) {
        this.$notify({
          type: "warning",
          message: `请先选择数据栈文件夹!`
        });
        return false;
        })
        return false
      }
      this.editScene = true;
      this.cleanForm();
      this.editScene = true
      this.cleanForm()

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

      var pattern = /^场景\s*\d+\s*$/
      var tempArr = []
      this.tableRuleList.forEach((scene) => {
        if (pattern.test(scene.scene_name)) {
          tempArr.push(Number(scene.scene_name.substring(2).trim()));
          tempArr.push(Number(scene.scene_name.substring(2).trim()))
        }
      });
      let latest = tempArr.length > 0 ? this.bubbleSort(tempArr)[tempArr.length - 1] + 1 : 1;
      })
      let latest = tempArr.length > 0 ? this.bubbleSort(tempArr)[tempArr.length - 1] + 1 : 1

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

      this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id
    },
    handleEdit(scene) {
      this.sceneForm = scene;
      this.sceneForm.voice = this.soundList.find(o => o.id === scene.voiceId);
      this.sceneForm = JSON.parse(JSON.stringify(scene))
      // this.originSceneInfo = JSON.parse(JSON.stringify(scene));
      this.sceneForm.voice = this.soundList.find((o) => o.id === scene.voiceId)

      this.editScene = true;
      let selectedTpl = {};
      this.editScene = true
      let selectedTpl = {}
      this.sceneTemplates.forEach((t) => {
        if (t.id == this.sceneForm.template_id) {
          selectedTpl = t
        }
      })
      this.templateSdks = selectedTpl.sdks;
      this.templateSdks = selectedTpl.sdks

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

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

    validateForm() {
      if (!this.sceneForm.scene_name.trim()) {
        this.$notify({
          type: 'warning',
          message: '场景名不能为空'
        });
          type: "warning",
          message: "场景名不能为空"
        })
        return false
      } else if (!this.sceneForm.alarm_level) {
        this.$notify({
          type: 'warning',
          message: '事件等级不能为空'
        });
          type: "warning",
          message: "事件等级不能为空"
        })
        return false
      } else if (!this.sceneForm.time_rule_id) {
        this.$notify({
          type: 'warning',
          message: '时间段不能为空'
        });
          type: "warning",
          message: "时间段不能为空"
        })
        return false
      }
      return true
@@ -407,42 +374,42 @@
      if (!this.validateForm()) {
        return
      }
      let editorResp = this.$refs.sceneEditor.submitRule();
      this.sceneForm.rules = editorResp.rules;
      this.sceneForm.id = editorResp.id;
      this.sceneForm.group_text = editorResp.text;
      let editorResp = this.$refs.sceneEditor.submitRule()
      this.sceneForm.rules = editorResp.rules
      this.sceneForm.id = editorResp.id
      this.sceneForm.group_text = editorResp.text

      this.onSaveScene(this.sceneForm);
      this.onSaveScene(this.sceneForm)
    },
    handleDelScene(groupRule) {
      let _this = this;
      let _this = this
      this.$confirm("提示：删除后，该条规则将失效，是否删除？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
      })
        .then(() => {
          deleteCameraScene(groupRule.id).then(res => {
            this.$emit("delete-rule");
          deleteCameraScene(groupRule.id).then((res) => {
            this.$emit("delete-rule")
            if (res && res.success) {
              this.$notify({
                type: "success",
                message: "删除成功"
              });
              _this.$root.$children[0].$children[0].querySearchAsync('camera')
              })
              _this.$root.$children[0].$children[0].querySearchAsync("camera")
            } else {
              this.$notify({
                type: "error",
                message: "删除失败！"
              });
              })
            }
          });
          })
        })
        .catch(() => { });
        .catch(() => {})
    },
    cellStyle(obj) {
      if (obj.column.label == '策略' || obj.column.label == '事件声音') {
        return 'text-align:left;padding-left:8px;'
      if (obj.column.label == "策略" || obj.column.label == "事件声音") {
        return "text-align:left;padding-left:8px;"
      }
    }
  }
@@ -515,4 +482,4 @@
    }
  }
}
</style>
</style>