系统设置自适应

ZZJ

2022-06-28 2cb264ec2b7c7dd9798d1821927104fad35bd063

 src/pages/cameraAccess/components/SceneRule.vue

@@ -1,8 +1,13 @@
<template>
  <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"
      <b style="font-size: 14px; line-height: 18px">场景</b>
      <el-button
        type="primary"
        size="mini"
        @click="handleCreate"
        style="margin-left: 90%"
        v-show="!editScene && TreeDataPool.selectedNode.type !== 'MENU'"
        >+ 添加场景</el-button
      >
    </div>
@@ -11,10 +16,19 @@
      <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-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>
@@ -23,7 +37,11 @@
            </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"
@@ -35,19 +53,42 @@
        </div>
        <div class="right">
          <el-form-item label="场景描述">
            <el-input v-model="sceneForm.desc" type="textarea" size="mini"></el-input>
            <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
              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"
                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>
@@ -61,9 +102,11 @@
        @sdkNameChange="getSceneName"
      ></scene-editor>

      <el-form-item style="width: 60%;min-width: 1048px;">
      <el-form-item style="width: 60%; min-width: 1048px">
        <el-button size="mini" @click="editScene = false">取消</el-button>
        <el-button type="primary" size="mini" @click="saveSceneRule">保存</el-button>
        <el-button type="primary" size="mini" @click="saveSceneRule"
          >保存</el-button
        >
      </el-form-item>
    </el-form>

@@ -73,19 +116,42 @@
        <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"></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">
          <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"></el-table-column>
          <el-table-column label="描述" prop="desc" align="center" min-width="120"></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>
@@ -103,13 +169,27 @@
          </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>
              <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="删除" :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;"
                  style="font-size: 28px; color: red"
                  @click="handleDelScene(scope.row)"
                ></i>
              </el-tooltip>
@@ -122,65 +202,65 @@
</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",
  components: {
    SceneEditor
    SceneEditor,
  },
  props: {
    seletedCameras: {
      type: Array,
      default: () => {
        return []
      }
        return [];
      },
    },
    tableRuleList: {
      type: Array,
      default: () => {
        return []
      }
        return [];
      },
    },
    onSaveScene: {
      type: Function,
      default: () => false
      default: () => false,
    },
    linkRule: {
      type: Boolean,
      default: false
    }
      default: false,
    },
  },
  filters: {
    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
    })
      this.togglePlay = true;
    });
  },
  data() {
    return {
@@ -194,7 +274,7 @@
        template_id: "",
        time_rule_id: "",
        voice: {},
        voiceId: ""
        voiceId: "",
      },
      templateSdks: [],
      templateRules: "",
@@ -202,53 +282,55 @@
      sceneNameStore: [],
      eventAudio: new Audio(),
      soundList: [],
      togglePlay: true
    }
      togglePlay: true,
    };
  },
  methods: {
    getSoundById(id) {
      if (id) {
        let sound = this.soundList.find((item) => item.id == id)
        return sound.name
        let sound = this.soundList.find((item) => item.id == id);
        return sound.name;
      } else {
        return ""
        return "";
      }
    },
    getSounds() {
      let _this = this
      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)
            _this.soundList = [{ id: "", name: "空", path: "" }].concat(
              res.data
            );
          }
        })
        .catch((e) => console.log(e))
        .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.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
          message: "请先选择一个声音!",
        });
        return false;
      }
      debugger
      this.eventAudio.src = this.soundPath
      debugger;
      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;
      }
      // this.togglePlay = !this.togglePlay
    },
@@ -256,19 +338,19 @@
      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
            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)
      this.sceneNameStore.push(sdk_name);

      if (!this.sceneForm.scene_name.trim()) {
        this.sceneForm.scene_name = sdk_name
        this.sceneForm.scene_name = sdk_name;
      }
      // }else if(this.sceneForm.scene_name == store[store.length-2]){
      //   //场景名称取的是上一次传过来的算法名称，则须更新为最新传来的算法名
@@ -284,18 +366,18 @@
        template_id: "",
        time_rule_id: "",
        voice: {},
        voiceId: ""
      }
      this.$refs.sceneEditor.cleanRule()
      this.$refs.sceneEditor.getSdkConnection()
        voiceId: "",
      };
      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
          message: "请选择至少2个摄像机!",
        });
        return false;
      } else if (
        !this.linkRule &&
        this.TreeDataPool.treeActiveName != "dataStack" &&
@@ -303,117 +385,126 @@
      ) {
        this.$notify({
          type: "warning",
          message: `请选择1个摄像机!`
        })
        return false
      } else if (this.TreeDataPool.treeActiveName == "dataStack" && !this.DataStackPool.selectedDir.id) {
          message: `请选择1个摄像机!`,
        });
        return false;
      } else if (
        this.TreeDataPool.treeActiveName == "dataStack" &&
        !this.DataStackPool.selectedDir.id
      ) {
        this.$notify({
          type: "warning",
          message: `请先选择数据栈文件夹!`
        })
        return false
          message: `请先选择数据栈文件夹!`,
        });
        return false;
      }
      this.editScene = true
      this.cleanForm()
      this.editScene = true;
      this.cleanForm();

      //初始化场景名称
      var pattern = /^场景\s*\d+\s*$/
      var tempArr = []
      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 = JSON.parse(JSON.stringify(scene))
      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.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
          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: "场景名不能为空"
        })
        return false
          message: "场景名不能为空",
        });
        return false;
      } else if (!this.sceneForm.alarm_level) {
        this.$notify({
          type: "warning",
          message: "事件等级不能为空"
        })
        return false
          message: "事件等级不能为空",
        });
        return false;
      } else if (!this.sceneForm.time_rule_id) {
        this.$notify({
          type: "warning",
          message: "时间段不能为空"
        })
        return false
          message: "时间段不能为空",
        });
        return false;
      }
      return true
      return true;
    },
    saveSceneRule() {
      if (!this.validateForm()) {
        return
        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();
      if (!editorResp) {
        return;
      }
      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"
        confirmButtonClass: "comfirm-class-sure",
      })
        .then(() => {
          deleteCameraScene(groupRule.id).then((res) => {
            this.$emit("delete-rule")
            this.$emit("delete-rule");
            if (res && res.success) {
              this.$notify({
                type: "success",
                message: "删除成功"
              })
              _this.$root.$children[0].$children[0].querySearchAsync("camera")
                message: "删除成功",
              });
              _this.$root.$children[0].$children[0].querySearchAsync("camera");
            } else {
              this.$notify({
                type: "error",
                message: "删除失败！"
              })
                message: "删除失败！",
              });
            }
          })
          });
        })
        .catch(() => {})
        .catch(() => {});
    },
    cellStyle(obj) {
      if (obj.column.label == "策略" || obj.column.label == "事件声音") {
        return "text-align:left;padding-left:8px;"
        return "text-align:left;padding-left:8px;";
      }
    }
  }
}
    },
  },
};
</script>

<style lang="scss">
@@ -481,5 +572,8 @@
      }
    }
  }
  .el-table th.el-table__cell > .cell {
    padding-right: 0;
  }
}
</style>