优化联动规则加载场景列表的操作

zhangzengfei

2021-06-11 fa7044f3ccc9a91bc2bc117d1a06f650d86554f2

 src/pages/cameraAccess/components/SceneRule.vue

@@ -46,9 +46,36 @@
          <el-form-item label="场景描述">
            <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-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"
            >
              <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>
            </span>
          </el-form-item>
        </div>
      </div>
      

      <scene-editor
        ref="sceneEditor"
        :isLinkRule="linkRule"
@@ -69,36 +96,35 @@
        <el-table
          :data="tableRuleList"
          border
          style="width: 100%"
          style="width:100%"
          :cell-style="cellStyle"
          :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
        >
          <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
          <el-table-column
            label="场景名称"
            prop="scene_name"
            width="120"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <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>
          <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="desc" align="center" min-width="150"></el-table-column>
          <el-table-column label="时间段" prop="time_name" align="center"></el-table-column>
          <el-table-column label="描述" prop="desc" align="center" min-width="120"></el-table-column>
          <!-- <el-table-column label="状态" align="center" width="90">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.defence_state" @change="updateDefence(scope.row)"></el-switch>
            </template>
          </el-table-column>-->
          <el-table-column label="事件等级" align="center" width="120">
          <el-table-column label="事件声音" align="center">
            <template slot-scope="scope">
              <span>{{ getSoundById(scope.row.voiceId) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="事件等级" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.alarm_level | alarmLevel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="100">
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tooltip content="编辑" :hide-after="700" placement="top" popper-class="atooltip">
                <i
@@ -107,7 +133,12 @@
                  @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;"
@@ -130,6 +161,7 @@
} from '@/api/scene'
import RuleEditor from "@/components/subComponents/RuleEditor";
import SceneEditor from "./scene/Editor";
import { getSoundList } from "@/api/event";

export default {
  name: "SceneRuleEditor",
@@ -181,7 +213,10 @@
  },
  mounted() {
    // window.addEventListener('resize', this.windowSizeChange)
    
    this.getSounds();
    this.eventAudio.addEventListener("ended", () => {
      this.togglePlay = true
    })
  },
  data() {
    return {
@@ -194,14 +229,62 @@
        desc: "",
        template_id: "",
        time_rule_id: "",
        voice: {},
        voiceId: ""
      },
      templateSdks: [],
      templateRules: "",
      ruleList: [],
      sceneNameStore: []
      sceneNameStore: [],
      eventAudio: new Audio(),
      soundList: [],
      togglePlay: true
    }
  },
  methods: {
    getSoundById(id){
      if(id){
        let sound = this.soundList.find(item=>item.id == id);
        return sound.name
      }else{
        return ''
      }
    },
    getSounds() {
      getSoundList().then(res => {
        if (res.success) {
          this.soundList = [{ id: "", name: "空", path: "" }].concat(res.data.list)
        }
      }).catch(
        e => console.log(e)
      )
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.sceneForm.voiceId = sound.id;
      this.togglePlay = true;
      this.eventAudio.pause()
      this.$forceUpdate()
      // this.eventAudio.
    },
    togglePlayer() {
      if (!this.soundPath) {
        this.$notify({
          type: 'info',
          message: '请先选择一个声音!'
        })
        return false;
      }
      this.eventAudio.src = this.soundPath;
      if (this.togglePlay) {
        this.eventAudio.play();
        this.togglePlay = false
      } else {
        this.eventAudio.pause()
        this.togglePlay = true
      }
      // this.togglePlay = !this.togglePlay
    },
    bubbleSort(arr) {
      for (var i = arr.length - 1; i > 0; i--) {
        for (var j = 0; j < i; j++) {
@@ -233,12 +316,13 @@
        desc: "",
        template_id: "",
        time_rule_id: "",
        voice: {},
        voiceId: ""
      };
      this.$refs.sceneEditor.cleanRule();
      this.$refs.sceneEditor.getSdkConnection();
    },
    handleCreate() {

      console.log(this.DataStackPool.selectedDir.id, this.TreeDataPool.treeActiveName == 'dataStack')
      if (this.linkRule && this.TreeDataPool.selectedNodes.length < 2) {
        this.$notify({
          type: "warning",
@@ -260,7 +344,6 @@
      }
      this.editScene = true;
      this.cleanForm();
      console.log(this.tableRuleList)

      //初始化场景名称
      var pattern = /^场景\s*\d+\s*$/;
@@ -279,8 +362,9 @@

    },
    handleEdit(scene) {

      this.sceneForm = scene;
      this.sceneForm.voice = this.soundList.find(o => o.id === scene.voiceId);

      this.editScene = true;
      let selectedTpl = {};
      this.sceneTemplates.forEach((t) => {
@@ -295,24 +379,7 @@

    },

    selectTemplate() {
      let selectedTpl = {};
      this.sceneTemplates.forEach((t) => {
        if (t.id == this.sceneForm.template_id) {
          selectedTpl = t;
        }
      })

      // 设置默认参数, 时间规则取第一个
      this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
      this.sceneForm.scene_name = selectedTpl.name;
      this.sceneForm.desc = selectedTpl.desc;

      this.templateSdks = selectedTpl.sdks;
      this.templateRules = selectedTpl.rules;
    },
    validateForm() {

      if (!this.sceneForm.scene_name.trim()) {
        this.$notify({
          type: 'warning',
@@ -335,7 +402,6 @@
      return true
    },
    saveSceneRule() {

      if (!this.validateForm()) {
        return
      }
@@ -343,6 +409,7 @@
      this.sceneForm.rules = editorResp.rules;
      this.sceneForm.id = editorResp.id;
      this.sceneForm.group_text = editorResp.text;

      this.onSaveScene(this.sceneForm);
    },
    handleDelScene(groupRule) {
@@ -372,7 +439,7 @@
        .catch(() => { });
    },
    cellStyle(obj) {
      if (obj.column.label == '策略') {
      if (obj.column.label == '策略'||obj.column.label == '事件声音') {
        return 'text-align:left;padding-left:8px;'
      }
    }
@@ -409,7 +476,7 @@
        }
      }
      textarea {
        height: 143px;
        height: 92px;
      }
    }
    .right {
@@ -440,8 +507,8 @@
    }
    .cell {
      padding-left: 0 !important;
      i{
        outline: none!important;
      i {
        outline: none !important;
      }
    }
  }