联动场景传参

ZZJ

2022-06-22 01b516a3c3304c966d413b768d2e3078bf83b61c

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

@@ -30,7 +30,11 @@
            :key="index"
          >
            <div class="relation" v-if="item.rule_with_pre">
              <el-select v-model="item.rule_with_pre" placeholder="选关系">
              <el-select
                v-model="item.rule_with_pre"
                placeholder="选关系"
                @change="update"
              >
                <el-option
                  v-for="item in sdkConnects"
                  :value="item.value"
@@ -39,14 +43,24 @@
                  :key="item.id"
                ></el-option>
              </el-select>
              <div>
                <el-checkbox
                  v-show="
                    item.rule_with_pre == '=>' || item.rule_with_pre == '!=>'
                  "
                  v-model="item.is_save_anyhow"
                  @change="update"
                  >保存过程数据</el-checkbox
                >
              </div>
            </div>
            <div class="imgBox">
              <img :src="item.icon_blob" alt="" />
              <div class="mask">
                <div class="mask_del">
                  <i class="iconfont">&#xe63b;</i>
                  <i class="iconfont" @click="delSdk(index)">&#xe63b;</i>
                </div>
                <div class="mask_edit">
                <div class="mask_edit" @click="editSdk(index)">
                  <i class="iconfont">&#xe638;</i>
                </div>
              </div>
@@ -66,17 +80,18 @@
        <div class="empty" @dragover="dragover($event)" @drop="drop" v-else>
          <img src="/images/hashrate/未配置算法空页面.png" alt="" />
          <div class="des">
            暂未配置策略，点击上方操作面板按钮，从操作面板拖到算法到此处，即可配置
            暂未配置策略，点击上方操作面板按钮，从操作面板拖动算法到此处，即可配置
          </div>
        </div>
      </div>
    </div>
    <div class="control">
      <div class="title">场景操作</div>
      <span class="close iconfont" @click="deleteRule">&#xe60f;</span>
      <div class="content">
        <div class="btns">
          <div class="button cancel" @click="backToOrigin">取消</div>
          <div class="button submit">保存</div>
          <div class="button submit" @click="save">保存</div>
        </div>
      </div>
    </div>
@@ -86,16 +101,18 @@

<script>
import bus from "@/plugin/bus";
import { logout } from "@/api/login";
import { saveLinkScene, saveCameraScene, deleteCameraScene } from "@/api/scene";

export default {
  props: {
    rule: {},
    ruleType: {},
    cameraId: {},
  },
  created() {
    this.originRule = JSON.parse(JSON.stringify(this.rule));
    this.getSdkConnection();
    bus.$on("addSdk", () => {
      if (this.rule.rules.length < 4) {
      if (this.rule.rules && this.rule.rules.length < 4) {
        this.showAddBox = true;
      }
    });
@@ -132,7 +149,6 @@
        },
      ],
      showAddBox: false,
      originRule: {},
    };
  },
  computed: {
@@ -173,8 +189,70 @@
    edit() {
      this.$emit("edit");
    },
    delSdk(index) {
      this.rule.rules.splice(index, 1);

      if (this.rule.rules[index]) {
        this.rule.rules[index].rule_with_pre = "";
      }

      this.update();

      console.log(this.rule.rules);
    },
    backToOrigin() {
      this.$emit("backToOrigin", this.originRule);
      this.$emit("backToOrigin");
    },
    editSdk(index) {
      this.$emit("editSdk", index);
    },
    save() {
      if (this.ruleType === "separate") {
        this.rule.cameraIds = [this.cameraId];
        saveCameraScene(this.rule).then((rsp) => {
          if (rsp && rsp.success) {
            this.$notify({
              type: "success",
              message: "策略保存成功！",
            });
            this.backToOrigin();
          }
        });
      } else {
        delete this.rule.camera_polygons;
        saveLinkScene(this.rule).then((rsp) => {
          if (rsp && rsp.success) {
            this.$notify({
              type: "success",
              message: "任务保存成功！",
            });
            this.backToOrigin();
          } else {
            this.$notify({
              type: "error",
              message: rsp.data,
            });
          }
        });
      }
    },
    async deleteRule() {
      if (!this.rule.id) {
        console.log("87878");
        this.backToOrigin();
        return;
      }
      const res = await deleteCameraScene(this.rule.id);
      if (res && res.success) {
        this.$notify({
          type: "success",
          message: "删除成功",
        });
        this.$emit("deletRule");
      }
    },
    update() {
      this.$forceUpdate();
    },
  },
};
@@ -324,7 +402,17 @@
  }

  .control {
    position: relative;
    width: 128px;

    .close {
      position: absolute;
      top: 12px;
      right: 15px;
      font-size: 12px;
      color: #e34d59;
      cursor: pointer;
    }

    .btns {
      display: flex;
@@ -376,5 +464,10 @@
    margin: 10px 0 10px 20px;
    border-right: 1px solid #e9ebee;
  }

  .el-checkbox {
    margin-top: 5px;
    margin-left: 10px;
  }
}
</style>