修复场景无法编辑的bug

zhangzengfei

2022-08-04 a6119509e09abadc65f020f594ae446883567bd5

 src/views/hashrate/CameraManage/CameraRules/components/AddRuleBox.vue

@@ -1,8 +1,7 @@
<template>
  <div class="AddBox">
    <div class="title">
      {{ editData.type ? "修改" : "添加"
      }}{{ type === "separate" ? "独立" : "联动" }}场景
      {{ editData.type ? "修改" : "添加" }}{{ editData.type === "separate" ? "独立" : "联动" }}场景
    </div>

    <div class="close iconfont" @click="close">&#xe60f;</div>
@@ -10,36 +9,19 @@
    <el-form :model="ruleForm" :rules="rules" ref="form">
      <div class="label">场景名称</div>
      <el-form-item prop="scene_name">
        <el-input
          class="h32"
          v-model="ruleForm.scene_name"
          placeholder="请输入"
        ></el-input>
        <el-input class="h32" v-model="ruleForm.scene_name" placeholder="请输入"></el-input>
      </el-form-item>

      <div class="label">事件等级</div>
      <el-form-item>
        <el-select
          class="h32"
          v-model="ruleForm.alarm_level"
          placeholder="请选择"
        >
          <el-option
            v-for="item in eventLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        <el-select class="h32" v-model="ruleForm.alarm_level" placeholder="请选择">
          <el-option v-for="item in eventLevel" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <div class="label">时间段</div>
      <el-form-item prop="time_rule_id">
        <el-select
          class="h32 left"
          v-model="ruleForm.time_rule_id"
          placeholder="请选择"
        >
        <el-select class="h32 left" v-model="ruleForm.time_rule_id" placeholder="请选择">
          <el-option
            v-for="item in VideoManageData.TimeRules"
            :key="item.id"
@@ -53,28 +35,13 @@

      <div class="label">场景描述</div>
      <el-form-item>
        <el-input
          class="h32"
          v-model="ruleForm.desc"
          type="textarea"
        ></el-input>
        <el-input class="h32" v-model="ruleForm.desc" type="textarea"></el-input>
      </el-form-item>

      <div class="label">事件声音</div>
      <el-form-item>
        <el-select
          v-model="ruleForm.voice"
          placeholder="请选择"
          value-key="id"
          @change="selSound"
          class="h32 left"
        >
          <el-option
            v-for="item in soundList"
            :key="item.id"
            :label="item.name"
            :value="item"
          ></el-option>
        <el-select v-model="ruleForm.voice" placeholder="请选择" value-key="id" @change="selSound" class="h32 left">
          <el-option v-for="item in soundList" :key="item.id" :label="item.name" :value="item"></el-option>
        </el-select>
        <span @click="togglePlayer" v-show="ruleForm.voiceId.length">
          <i v-if="togglePlay" class="iconfont">&#xe628;</i>
@@ -88,32 +55,29 @@
      <div class="cancelBtn button" @click="close">取消</div>
    </div>

    <TimeSlider
      v-if="showTimeSlider"
      @close="showTimeSlider = false"
    ></TimeSlider>
    <TimeSlider v-if="showTimeSlider" @close="showTimeSlider = false"></TimeSlider>
  </div>
</template>

<script>
import { getSoundList } from "@/api/event";
import TimeSlider from "@/views/hashrate/CameraManage/CameraRules/components/TimeSlider";
import { getSoundList } from "@/api/event"
import TimeSlider from "@/views/hashrate/CameraManage/CameraRules/components/TimeSlider"

export default {
  props: {
    type: {
      type: String,
      type: String
    },
    editData: {},
    editData: {}
  },
  components: {
    TimeSlider,
    TimeSlider
  },
  mounted() {
    this.getSounds();
    this.getSounds()
    this.eventAudio.addEventListener("ended", () => {
      this.togglePlay = true;
    });
      this.togglePlay = true
    })
  },
  data() {
    return {
@@ -124,44 +88,40 @@
        template_id: "",
        time_rule_id: "",
        voice: {},
        voiceId: "",
        voiceId: ""
      },
      eventLevel: [
        {
          label: "一级",
          value: 1,
          value: 1
        },
        {
          label: "二级",
          value: 2,
          value: 2
        },
        {
          label: "三级",
          value: 3,
          value: 3
        },
        {
          label: "四级",
          value: 4,
          value: 4
        },
        {
          label: "五级",
          value: 5,
        },
          value: 5
        }
      ],
      rules: {
        scene_name: [
          { required: true, message: "请输入场景名称", trigger: "blur" },
        ],
        time_rule_id: [
          { required: true, message: "请选择时间段", trigger: "blur" },
        ],
        scene_name: [{ required: true, message: "请输入场景名称", trigger: "blur" }],
        time_rule_id: [{ required: true, message: "请选择时间段", trigger: "blur" }]
      },
      soundPath: "",
      togglePlay: true,
      eventAudio: new Audio(),
      soundList: [],
      showTimeSlider: false,
    };
      showTimeSlider: false
    }
  },

  methods: {
@@ -175,72 +135,70 @@
        time_rule_id: this.editData.rule.time_rule_id,
        voice: this.editData.rule.voice,
        voiceId: this.editData.rule.voiceId,
        index: this.editData.index,
      };
        index: this.editData.index
      }
      this.soundList.forEach((item) => {
        if (item.id == this.editData.rule.voiceId) {
          this.ruleForm.voiceId = item.id;
          this.ruleForm.voice = item;
          this.ruleForm.voiceId = item.id
          this.ruleForm.voice = item
        }
      });
      })
    },
    getSounds() {
      let _this = this;
      let _this = this
      getSoundList()
        .then((res) => {
          if (res.success) {
            _this.soundList = [{ id: "", name: "空", path: "" }].concat(
              res.data.voices
            );
            _this.soundList = [{ id: "", name: "空", path: "" }].concat(res.data.voices)
            if (_this.editData.type) {
              _this.initEditData();
              _this.initEditData()
            }
          }
        })
        .catch((e) => console.log(e));
        .catch((e) => console.log(e))
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.ruleForm.voiceId = sound.id;
      this.togglePlay = true;
      this.eventAudio.pause();
      this.$forceUpdate();
      this.soundPath = sound.path
      this.ruleForm.voiceId = sound.id
      this.togglePlay = true
      this.eventAudio.pause()
      this.$forceUpdate()
      // this.eventAudio.
    },
    togglePlayer() {
      if (!this.soundPath) {
        this.$notify({
          type: "info",
          message: "请先选择一个声音!",
        });
        return false;
          message: "请先选择一个声音!"
        })
        return false
      }
      this.eventAudio.src = this.soundPath;
      this.eventAudio.src = this.soundPath
      if (this.togglePlay) {
        this.eventAudio.play();
        this.togglePlay = false;
        this.eventAudio.play()
        this.togglePlay = false
      } else {
        this.eventAudio.pause();
        this.togglePlay = true;
        this.eventAudio.pause()
        this.togglePlay = true
      }
    },
    close() {
      this.$emit("close");
      this.$emit("close")
    },
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$emit("save", {
            action: this.editData.type ? "edit" : "add",
            data: this.ruleForm,
          });
            data: this.ruleForm
          })
        } else {
          return false;
          return false
        }
      });
    },
  },
};
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -328,4 +286,4 @@
    }
  }
}
</style>
</style>