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

zhangzengfei

2021-06-11 fa7044f3ccc9a91bc2bc117d1a06f650d86554f2

 src/pages/cameraAccess/components/SceneRule.vue

@@ -6,7 +6,7 @@
        type="primary"
        size="mini"
        @click="handleCreate"
        style="margin-left:87%"
        style="margin-left:90%"
        v-show="!editScene"
      >+ 添加场景</el-button>
    </div>
@@ -46,75 +46,35 @@
          <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>
      <!-- <el-row>
      <el-col :span="8">-->
      <!-- <el-form-item label="场景模板">
            <el-select
              v-model="sceneForm.template_id"
              placeholder="请选择"
              @change="selectTemplate"
              size="mini"
              style="width:200px"
            >
              <el-option
                v-for="item in sceneTemplates"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
      </el-form-item>-->
      <!-- </el-col>
        <el-col :span="8">
          <el-form-item label="时间段">
            <el-select
              v-model="sceneForm.time_rule_id"
              placeholder="请选择"
              size="mini"
              style="width:200px"
            >
              <el-option
                v-for="item in VideoManageData.TimeRules"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!-- <el-row>
        <el-col :span="8">
          <el-form-item label="场景名称">
            <el-input v-model="sceneForm.scene_name" size="mini" style="width:200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="场景描述">
            <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-col :span="8">
          <el-form-item label="事件等级">
            <el-select
              v-model="sceneForm.alarm_level"
              placeholder="请选择"
              size="mini"
              style="width:200px"
            >
              <el-option label="一级" :value="1"></el-option>
              <el-option label="二级" :value="2"></el-option>
              <el-option label="三级" :value="3"></el-option>
              <el-option label="四级" :value="4"></el-option>
              <el-option label="五级" :value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>-->

      <scene-editor
        ref="sceneEditor"
@@ -136,45 +96,49 @@
        <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="编辑" placement="top" popper-class="atooltip">
              <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>
              </el-tooltip>
              <el-tooltip content="删除" 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;"
@@ -197,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",
@@ -248,7 +213,10 @@
  },
  mounted() {
    // window.addEventListener('resize', this.windowSizeChange)
    
    this.getSounds();
    this.eventAudio.addEventListener("ended", () => {
      this.togglePlay = true
    })
  },
  data() {
    return {
@@ -261,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++) {
@@ -300,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",
@@ -327,7 +344,6 @@
      }
      this.editScene = true;
      this.cleanForm();
      console.log(this.tableRuleList)

      //初始化场景名称
      var pattern = /^场景\s*\d+\s*$/;
@@ -346,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) => {
@@ -362,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',
@@ -402,7 +402,6 @@
      return true
    },
    saveSceneRule() {

      if (!this.validateForm()) {
        return
      }
@@ -410,9 +409,11 @@
      this.sceneForm.rules = editorResp.rules;
      this.sceneForm.id = editorResp.id;
      this.sceneForm.group_text = editorResp.text;

      this.onSaveScene(this.sceneForm);
    },
    handleDelScene(groupRule) {
      let _this = this;
      this.$confirm("提示：删除后，该条规则将失效，是否删除？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -426,7 +427,7 @@
                type: "success",
                message: "删除成功"
              });

              _this.$root.$children[0].$children[0].querySearchAsync('camera')
            } else {
              this.$notify({
                type: "error",
@@ -438,7 +439,7 @@
        .catch(() => { });
    },
    cellStyle(obj) {
      if (obj.column.label == '策略') {
      if (obj.column.label == '策略'||obj.column.label == '事件声音') {
        return 'text-align:left;padding-left:8px;'
      }
    }
@@ -475,7 +476,7 @@
        }
      }
      textarea {
        height: 143px;
        height: 92px;
      }
    }
    .right {
@@ -506,6 +507,9 @@
    }
    .cell {
      padding-left: 0 !important;
      i {
        outline: none !important;
      }
    }
  }
}