摄像机管理

ZZJ

2022-03-29 658915facb9ec5a5ad83abceb4d64dccac15e631

 src/views/hashrate/CameraManage/CameraRules/index.vue

@@ -42,35 +42,92 @@

      <!-- 绘制区域canvas -->
      <div class="right">
        <div class="title">绘制区域</div>
        <div class="button draw" @click="drawBaseImg">绘制区域</div>
        <polygon-canvas
          class="cavas"
          ref="canvas"
          v-if="showCanvas"
          v-loading="loading"
          element-loading-text="刷新中，请稍等..."
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :isShowDrawArrow="false"
          :disabled="false"
          :snapshot_url="Camera.baseImg"
          :canvasDataShow="Camera.canvasData"
          :currentCameraId="Camera.cameraId"
          :loading="Camera.loading"
          :canvasWidth="canvasWidth"
          :canvasHeight="canvasHeight"
          @fromCanvas="getCanvasData"
          @changeLoading="changeLoading"
          @refresh="refresh"
        ></polygon-canvas>
        <div class="draw-box" v-if="!TreeDataPool.multiple">
          <div class="title">绘制区域</div>
          <div class="button draw" @click="drawBaseImg">绘制区域</div>
          <polygon-canvas
            class="cavas"
            ref="canvas"
            v-if="showCanvas"
            v-loading="loading"
            element-loading-text="刷新中，请稍等..."
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :isShowDrawArrow="false"
            :disabled="false"
            :snapshot_url="Camera.baseImg"
            :canvasDataShow="Camera.canvasData"
            :currentCameraId="Camera.cameraId"
            :loading="Camera.loading"
            :canvasWidth="canvasWidth"
            :canvasHeight="canvasHeight"
            @fromCanvas="getCanvasData"
            @changeLoading="changeLoading"
            @refresh="refresh"
          ></polygon-canvas>
        </div>

        <div class="draw-box" v-else>
          <div class="title">查看区域</div>
          <div class="img-box">
            <span class="camera-tip" v-show="swipercanvasData.length == 0"
              >暂无区域，请至少选择2个摄像机</span
            >
            <!-- swiper 展示 -->
            <swiper
              ref="swiper"
              :options="swiperOption"
              class="swiper-box-container2"
            >
              <swiper-slide
                v-for="(data, index) in swipercanvasData"
                :key="index"
              >
                <b
                  class="video-title"
                  style="font-size: 14px; margin-top: -10px"
                  >{{ data.name }}</b
                >
                <polygon-canvas
                  ref="canvas"
                  v-loading="loading"
                  element-loading-text="刷新中，请稍等..."
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  :divId="data.cameraId"
                  :isShowDrawArrow="true"
                  :isLink="true"
                  :disabled="false"
                  :loading="data.loading"
                  :snapshot_url="data.baseImg"
                  :canvasDataShow="data.canvasData"
                  :currentCameraId="data.cameraId"
                  @changeLoading="changeLoading"
                  @refresh="refresh2"
                ></polygon-canvas>
              </swiper-slide>
            </swiper>
            <div class="swiper-pre-border" v-show="swipercanvasData.length > 1">
              <div class="icon-btn" slot="button-prev">
                <i class="iconfont">&#xe618;</i>
              </div>
            </div>
            <div
              class="swiper-next-border"
              v-show="swipercanvasData.length > 1"
            >
              <div class="icon-btn" slot="button-next">
                <i class="iconfont">&#xe623;</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 独立场景区域 -->
    <div class="SeparateRules">
    <div class="SeparateRules" @click="selectMultiple(false)">
      <div class="title">独立场景</div>
      <div class="control">
        <i class="iconfont" @click="showSdkBox = true">&#xe650;</i>
        <i class="iconfont" @click="openSdkBox($event)">&#xe650;</i>
        <i class="iconfont">&#xe64e;</i>
        <i class="iconfont">&#xe64f;</i>
      </div>
@@ -84,16 +141,18 @@
        ></CameraBox>

        <!-- 场景区域 -->
        <div class="RuleArea">
        <div class="RuleArea" v-if="show">
          <template v-if="SeparateRules.length > 0">
            <RuleItem
              v-for="(item, index) in SeparateRules"
              :key="index"
              :rule="item"
              :id="'rule_' + index"
              @edit="editSeparateRules(item, index)"
              :ruleType="'separate'"
              @edit="editRules(item, index, 'separate')"
              @addSdk="addSdk('separate', index)"
              @backToOrigin="backToOrigin($event, item)"
              @backToOrigin="backToOrigin('separate', index)"
              @editSdk="editSdk($event, 'separate', index)"
            ></RuleItem>
          </template>

@@ -105,12 +164,49 @@
      </div>
    </div>

    <div class="linkageRule" @click="selectMultiple(true)">
      <div class="title">联动场景</div>
      <div class="control">
        <i class="iconfont" @click="showSdkBox = true">&#xe650;</i>
        <i class="iconfont">&#xe64e;</i>
        <i class="iconfont">&#xe64f;</i>
      </div>
      <template v-if="linkageRule.length > 0">
        <div class="content" v-for="(item, index) in linkageRule" :key="index">
          <!-- 摄像机 -->
          <LinkageCameraBox
            :cameras="item.cameraIds"
            @addLinkageRule="addLinkageRule"
          ></LinkageCameraBox>
          <div class="Anchor" :id="'linkage_camera' + index"></div>

          <!-- 场景区域 -->
          <div class="RuleArea" v-if="show">
            <RuleItem
              :ruleType="'linkage'"
              :rule="item"
              @edit="editRules(item, index, 'linkage')"
              @addSdk="addSdk('linkage', index)"
              @backToOrigin="backToOrigin('linkage', index)"
              @editSdk="editSdk($event, 'linkage', index, item.Cameras)"
              :id="'linkage_' + index"
            ></RuleItem>
          </div>
        </div>
      </template>

      <div class="empty" @click="addLinkageRule" v-else>
        <img src="/images/hashrate/联动场景空页面.png" alt="" />
        <div class="des">暂无联动场景</div>
      </div>
    </div>

    <!-- 添加场景弹窗 -->
    <AddRuleBox
      :type="ruleType"
      :editData="editData"
      v-if="showAddBox"
      @close="showAddBox = false"
      @close="closeAddBox"
      @save="getNewRule"
    ></AddRuleBox>

@@ -118,147 +214,18 @@

    <SdkSettingBox
      v-if="showSdkSettingBox"
      @close="showSdkSettingBox = false"
      @close="closeSettingBox"
      @getNewSdk="getNewSdk"
      :Cameras="[Camera]"
      @getEditSdk="getEditSdk"
      :editSdk="editSdkObj.sdk"
      :linkEditCamera="
        ruleType === 'linkage' && editSdkObj ? editSdkObj.cameras : null
      "
      :Cameras="ruleType === 'linkage' ? Carmeras : [Camera]"
    ></SdkSettingBox>

    <!-- 遮罩层 -->
    <div class="mask" v-if="showAddBox || showSdkSettingBox"></div>

    <div class="bottom" style="display: none">
      <div class="devide"></div>
      <div class="bottom-right">
        <div class="draw-and-time-box">
          <div class="draw-box">
            <div class="draw-box-title">
              <b style="font-size: 14px">绘制区域</b>
              <span
                class="el-dropdown-link"
                @click="drawBaseImg"
                style="position: relative; top: 5px; cursor: pointer"
              >
                <i class="iconfont iconbianji1" style="font-size: 28px"></i>
              </span>
            </div>
            <div style="width: 590px; height: 16px">
              <!--  <b style="font-size: 14px">{{
                Camera.camearInfo.alias
                  ? Camera.camearInfo.alias
                  : Camera.camearInfo.name
              }}</b> -->
            </div>
            <div class="img-box">
              <template v-if="TreeDataPool.treeActiveName == 'camera'">
                <polygon-canvas
                  class="cavas"
                  ref="canvas"
                  v-if="showCanvas"
                  v-loading="loading"
                  element-loading-text="刷新中，请稍等..."
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  :isShowDrawArrow="false"
                  :disabled="false"
                  :snapshot_url="Camera.baseImg"
                  :canvasDataShow="Camera.canvasData"
                  :currentCameraId="Camera.cameraId"
                  :loading="Camera.loading"
                  :canvasWidth="canvasWidth"
                  :canvasHeight="canvasHeight"
                  @fromCanvas="getCanvasData"
                  @changeLoading="changeLoading"
                  @refresh="refresh"
                ></polygon-canvas>
              </template>
              <template v-else>
                <div style="width: 100%" v-loading="getStackFileLoading">
                  <swiper
                    ref="swiper"
                    :auto-update="true"
                    :options="canvasSwiperOption"
                    @slideChange="swiperSlideChange"
                    class="swiper-box-container2"
                    style="width: 100%"
                  >
                    <swiper-slide
                      v-for="(data, index) in swipercanvasData"
                      :key="index"
                    >
                      <div>
                        <b
                          class="video-title"
                          style="font-size: 14px; margin-top: -10px"
                          >{{ data.name }}</b
                        >
                        <polygon-canvas
                          class="cavas"
                          ref="canvas"
                          v-if="showCanvas"
                          v-loading="loading"
                          element-loading-text="刷新中，请稍等..."
                          element-loading-background="rgba(0, 0, 0, 0.8)"
                          :isShowDrawArrow="false"
                          :isShowRefresh="false"
                          :sourceType="data.type"
                          :disabled="false"
                          :snapshot_url="data.baseImg"
                          :canvasDataShow="Camera.canvasData"
                          :currentCameraId="data.stackId"
                          :loading="data.loading"
                          :canvasWidth="canvasWidth"
                          :canvasHeight="canvasHeight"
                          @fromCanvas="getCanvasData"
                          @changeLoading="changeLoading"
                        ></polygon-canvas>
                      </div>
                    </swiper-slide>
                  </swiper>
                  <div
                    class="swiper-local-prev"
                    v-show="swipercanvasData.length > 1"
                    @click="prevClick"
                  >
                    <div class="icon-btn" slot="button-prev">
                      <i class="iconfont iconzuo"></i>
                    </div>
                  </div>
                  <div
                    class="swiper-local-next"
                    v-show="swipercanvasData.length > 1"
                    @click="nextClick"
                  >
                    <div class="icon-btn" slot="button-next">
                      <i class="iconfont iconyou1"></i>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div style="float: left; width: calc(10% - 90px); height: 100%"></div>
          <div
            class="time-box"
            style="
              width: calc(90% + 90px - 576px);
              overflow-x: auto;
              overflow-y: hidden;
            "
          >
            <p style="text-align: left; padding: 10px; box-sizing: border-box">
              <b style="font-size: 14px">时间段</b>
            </p>
            <time-slider ref="timeSlider" :type="'sep'" />
          </div>
        </div>

        <scene-rule
          :seletedCameras="[Camera]"
          :tableRuleList="Camera.rules"
          :onSaveScene="saveSceneRule"
          @delete-rule="delScenRule"
        ></scene-rule>
      </div>
    </div>
  </div>
</template>

@@ -268,6 +235,7 @@
import { savePolygon } from "@/api/polygon";

import { pasteRules } from "@/api/task";
import { getCameraSceneRule } from "@/api/scene";

import { saveCameraScene, getLinkSceneRule } from "@/api/scene";

@@ -275,13 +243,12 @@
import { findAllFileByStackId } from "@/api/localVedio";
import VideoRuleData from "@/Pool/VideoRuleData";

import TimeSlider from "./components/TimeSlider";
import polygonCanvas from "@/components/canvas";
import Sysinfo from "@/components/subComponents/SystemInfo";
import SceneRule from "./components/SceneRule";
import SlideScene from "./components/scene/SlideScene";
import HashrateCard from "@/views/hashrate/CameraManage/CameraRules/components/HashrateCard";
import CameraBox from "@/views/hashrate/CameraManage/CameraRules/components/CameraBox";
import LinkageCameraBox from "@/views/hashrate/CameraManage/CameraRules/components/LinkageCameraBox";
import RuleItem from "@/views/hashrate/CameraManage/CameraRules/components/RuleItem";
import AddRuleBox from "@/views/hashrate/CameraManage/CameraRules/components/AddRuleBox";
import SdkBox from "@/views/hashrate/CameraManage/CameraRules/components/SdkBox";
@@ -289,10 +256,8 @@

export default {
  components: {
    TimeSlider,
    polygonCanvas,
    Sysinfo,
    SceneRule,
    SlideScene,
    HashrateCard,
    CameraBox,
@@ -300,6 +265,7 @@
    AddRuleBox,
    SdkBox,
    SdkSettingBox,
    LinkageCameraBox,
  },
  directives: {
    focus: {
@@ -320,6 +286,7 @@
  },
  data() {
    return {
      show: true,
      loading: false,
      Camera: new VideoRuleData(),
      Carmeras: [],
@@ -337,12 +304,28 @@
        },
      },
      plumbIns: null,
      plumbIns2: null,
      showAddBox: false,
      ruleType: "",
      showSdkBox: false,
      showSdkSettingBox: false,
      editData: {},
      addData: {},
      editSdkObj: {},
      connectArr: [],
      swipercanvasData: [],
      swiperOption: {
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
        navigation: {
          nextEl: ".swiper-pre-border",
          prevEl: ".swiper-next-border",
        },
      },

      // swiperOption: {
      //   slidesPerView: 5,
      //   spaceBetween: 8,
@@ -357,6 +340,7 @@
      // },
      tableRuleList: [],
      SeparateRules: [], //独立场景
      linkageRule: [], //联动场景
      cameraId: "",
      showSysInfo: false,
      showCanvas: true,
@@ -364,7 +348,6 @@
      canvasHeight: 320,
      stackId: "",
      swiperIndex: 0,
      swipercanvasData: [],
      stackFilesPage: 1,
      stackFilesSize: 5,
    };
@@ -376,6 +359,7 @@
  },
  mounted() {
    this.PollData.statistics();
    this.TaskMange.findAllSdk({ installed: true });
  },
  destroyed() {
    document.querySelector("html").style["min-width"] = "1280px";
@@ -395,6 +379,12 @@
          }
        }
      },
    },
    Carmeras: {
      handler(newVal, oldVal) {
        this.setSwiperData();
      },
      deep: true,
    },
  },
  methods: {
@@ -468,9 +458,6 @@
          this.getStackFileLoading = false;
        });
    },
    swiperSlideChange() {
      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
    },

    drawBaseImg() {
      if (Array.isArray(this.$refs.canvas)) {
@@ -489,11 +476,43 @@
        //this.Camera.getCameraTask();
      });
    },
    setSwiperData() {
      let swipers = [];
      let carmeras = this.Carmeras;
      for (let i = 0; i < carmeras.length; i++) {
        swipers = swipers.concat({
          cameraId: carmeras[i].cameraId,
          name: carmeras[i].camearInfo.name,
          baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined,
          canvasData: carmeras[i].canvasData,
          loading: carmeras[i].loading,
        });
      }
      this.swipercanvasData = swipers;
    },
    refresh(url) {
      this.Camera.baseImg = url;
    },
    refresh2(url, id) {
      this.swipercanvasData.forEach((data) => {
        if (data.cameraId == id) {
          data.baseImg = url;
        }
      });
    },

    // 初始化摄像机信息，父组件调用
    async initCameraData(id) {
      if (!id) {
        return;
      }

      console.log("init");

      this.plumbIns.deleteEveryConnection();
      this.connectArr.forEach((item) => {
        item.deleteEveryConnection();
      });
      //获取独立场景
      let newCamera = new VideoRuleData();
      if (id && id !== "") {
@@ -504,12 +523,10 @@

      this.Camera = newCamera;
      this.SeparateRules = this.Camera.rules;

      this.$nextTick(() => {
        this.connectLine();
      });

      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
      this.showSysInfo = true;
      // 判断正在执行实时或者轮询任务
      this.PollData.CameraList.forEach((element) => {
@@ -526,36 +543,33 @@
    showRules(id) {
      let rules = [];

      //多选摄像机模式
      if (this.selectedCameraIds.length && this.TreeDataPool.multiple) {
        getLinkSceneRule({ cameraIds: this.selectedCameraIds })
          .then((rsp) => {
            if (rsp && rsp.success) {
              rules = rsp.data;
              // 统一规则编辑的数据结构
              for (let i = 0; i < rules.length; i++) {
                rules[i].group_rules = rules[i].rules;
              }
      getLinkSceneRule({ cameraIds: [id] })
        .then((rsp) => {
          if (rsp && rsp.success) {
            rules = rsp.data;
            // 统一规则编辑的数据结构
            for (let i = 0; i < rules.length; i++) {
              rules[i].group_rules = rules[i].rules;
            }
          })
          .catch(() => {});

        //单选摄像机模式
      } else if (id) {
        getLinkSceneRule({ cameraIds: [id] })
          .then((rsp) => {
            if (rsp && rsp.success) {
              rules = rsp.data;
              // 统一规则编辑的数据结构
              for (let i = 0; i < rules.length; i++) {
                rules[i].group_rules = rules[i].rules;
              }
            this.linkageRule = rules;

              this.$set(this.Camera, "rules", this.Camera.rules.concat(rules));
            }
          })
          .catch(() => {});
      }
            this.$set(this.Camera, "rules", this.Camera.rules.concat(rules));

            this.$nextTick(() => {
              this.connectLine2();
            });

            this.linkageRule.forEach((rule) => {
              rule.Cameras = [];
              rule.cameraIds.forEach((id) => {
                let newCamera = new VideoRuleData(id);
                rule.Cameras.push(newCamera);
              });
            });
          }
        })
        .catch(() => {});
    },

    saveSceneRule(groupRule) {
@@ -597,7 +611,6 @@
        val = -1;
      }
      if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
        debugger;
        changeRunType({
          camera_ids: [this.Camera.cameraId],
          run_type: val,
@@ -621,7 +634,6 @@
    //实时、轮询切换
    changePoll(row) {
      //判断是新增还是更新
      debugger;
      if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
          if (row.value) {
@@ -629,7 +641,6 @@
          } else {
            this.Camera.dealWay = false;
          }
          debugger;
          changeRunType({
            camera_ids: [this.Camera.cameraId],
            run_type: this.Camera.dealWay ? 1 : 0,
@@ -649,7 +660,6 @@
        } else {
          if (this.Camera.dealWay) {
            this.Camera.dealWay = false;
            debugger;
            changeRunType({
              camera_ids: [this.Camera.cameraId],
              run_type: this.Camera.dealWay ? 1 : 0,
@@ -739,47 +749,132 @@
      }
    },

    connectLine2() {
      this.connectArr.forEach((item) => {
        item.deleteEveryConnection();
      });

      for (let index = 0; index < this.linkageRule.length; index++) {
        const plumbIns = jsPlumb.getInstance();

        plumbIns.connect({
          // 对应上述基本概念
          source: `linkage_camera${index}`,
          target: `linkage_${index}`,
          anchor: ["Left", "Right"],
          connector: ["Straight"],
          endpoints: [["Blank", { cssClass: "sourcePoint" }], "Blank"],
          overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
          // 添加样式
          paintStyle: { stroke: "#0065FF", strokeWidth: 2 }, // connector
          endpointStyle: {
            fill: "#fff",
            outlineStroke: "#0065FF",
          }, // endpoint
        });

        this.connectArr.push(plumbIns);
      }
    },

    //添加独立场景
    addSeparateRule() {
      this.ruleType = "separate";
      this.showAddBox = true;
    },

    addLinkageRule() {
      if (this.Carmeras.length < 2) {
        this.$message({
          message: "请至少选择两台摄像机",
          type: "warning",
        });
        return;
      }
      this.ruleType = "linkage";
      this.showAddBox = true;
    },

    //回填新的独立场景
    getNewRule(newRule) {
      //新增场景
      if (newRule.action === "add") {
        this.SeparateRules.push(newRule.data);
        newRule.data.rules = [];
        newRule.data.cameraIds = [this.Camera.cameraId];
        newRule.data.enable = true;
        //独立场景
        if (this.ruleType == "separate") {
          this.SeparateRules.push(newRule.data);
          this.$nextTick(() => {
            this.connectLine();
          });
        } else {
          //联动场景
          let arr = [this.Camera.cameraId];
          this.Carmeras.forEach((item) => {
            if (item.cameraId != this.Camera.cameraId) {
              arr.push(item.cameraId);
            }
          });
          newRule.data.cameraIds = arr;
          this.linkageRule.push(newRule.data);
          this.$nextTick(() => {
            this.connectLine2();
          });
        }

        this.showAddBox = false;
        this.$nextTick(() => {
          this.connectLine();
        });

        //编辑场景
      } else if (newRule.action === "edit") {
        this.SeparateRules[newRule.data.index].alarm_level =
          newRule.data.alarm_level;
        this.SeparateRules[newRule.data.index].scene_name =
          newRule.data.scene_name;
        this.SeparateRules[newRule.data.index].desc = newRule.data.desc;
        this.SeparateRules[newRule.data.index].template_id =
          newRule.data.template_id;
        this.SeparateRules[newRule.data.index].time_rule_id =
          newRule.data.time_rule_id;
        this.SeparateRules[newRule.data.index].voiceId = newRule.data.voiceId;
        //独立场景
        if (this.ruleType == "separate") {
          this.SeparateRules[newRule.data.index].alarm_level =
            newRule.data.alarm_level;
          this.SeparateRules[newRule.data.index].scene_name =
            newRule.data.scene_name;
          this.SeparateRules[newRule.data.index].desc = newRule.data.desc;
          this.SeparateRules[newRule.data.index].template_id =
            newRule.data.template_id;
          this.SeparateRules[newRule.data.index].time_rule_id =
            newRule.data.time_rule_id;
          this.SeparateRules[newRule.data.index].voiceId = newRule.data.voiceId;
        } else {
          //联动场景
          console.log(this.linkageRule[newRule.data.index]);

          this.linkageRule[newRule.data.index].alarm_level =
            newRule.data.alarm_level;
          this.linkageRule[newRule.data.index].scene_name =
            newRule.data.scene_name;
          this.linkageRule[newRule.data.index].desc = newRule.data.desc;
          this.linkageRule[newRule.data.index].template_id =
            newRule.data.template_id;
          this.linkageRule[newRule.data.index].time_rule_id =
            newRule.data.time_rule_id;
          this.linkageRule[newRule.data.index].voiceId = newRule.data.voiceId;
        }

        this.showAddBox = false;
      }
      this.editData = {};
    },

    //修改独立场景
    editSeparateRules(item, index) {
    editRules(item, index, type) {
      this.ruleType == type;
      this.editData = {
        type: "separate",
        type,
        rule: item,
        index,
      };
      this.addSeparateRule();
      this.showAddBox = true;
    },

    //添加算法
    addSdk(type, index) {
      this.editSdkObj = {};
      this.ruleType = type;
      this.addData = {
        type,
        index,
@@ -790,19 +885,135 @@

    //添加算法回调
    getNewSdk(newRule) {
      //独立场景
      if (this.addData.type === "separate") {
        if (this.SeparateRules[this.addData.index].rules.length > 0) {
          newRule.rule_with_pre = "&&";
          newRule.is_save_anyhow = true;
        }
        this.SeparateRules[this.addData.index].rules.push(newRule);
      }

      //联动场景
      else {
        if (this.linkageRule[this.addData.index].rules.length > 0) {
          newRule.rule_with_pre = "&&";
          newRule.is_save_anyhow = true;
        }
        this.linkageRule[this.addData.index].rules.push(newRule);
      }

      this.addData = {};
      this.showSdkSettingBox = false;
      this.TaskMange.findAllSdk({ installed: true });

      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },

    backToOrigin(e, item) {
      e = item;
      console.log(e);
      this.$forceUpdate();
    //取消修改
    async backToOrigin(type, index) {
      if (type === "separate") {
        const rsp = await getCameraSceneRule({
          cameraId: this.Camera.cameraId,
        });
        if (rsp && rsp.success) {
          let rules = rsp.data.rules ? rsp.data.rules : [];
          if (rules[index]) {
            this.SeparateRules[index] = rules[index];
          } else {
            this.SeparateRules.splice(index, 1);
          }
        }
        this.$forceUpdate();
        this.connectLine();
      } else {
        getLinkSceneRule({ cameraIds: [this.Camera.cameraId] })
          .then((rsp) => {
            if (rsp && rsp.success) {
              let rules = rsp.data;
              console.log(rules);
              if (rules[index]) {
                console.log(1111);
                this.linkageRule[index] = rules[index];
                this.linkageRule.group_rules = this.linkageRule.rules;
              } else {
                console.log(2222);
                this.linkageRule.splice(index, 1);
              }
              this.$forceUpdate();
              this.connectLine2();
            }
            console.log("失败");
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 编辑算法
    editSdk(sdkIndex, type, ruleIndex, Cameras) {
      this.addData = {};
      this.ruleType = type;
      if (type === "separate") {
        this.editSdkObj = {
          ruleIndex,
          sdkIndex,
          type,
          sdk: this.SeparateRules[ruleIndex].rules[sdkIndex],
        };
      } else {
        this.editSdkObj = {
          ruleIndex,
          sdkIndex,
          type,
          cameras: Cameras,
          sdk: this.linkageRule[ruleIndex].rules[sdkIndex],
        };
      }

      this.showSdkBox = false;
      this.showSdkSettingBox = true;
    },

    getEditSdk(newRule) {
      console.log(newRule);
      if (this.editSdkObj.type === "separate") {
        this.SeparateRules[this.editSdkObj.ruleIndex].rules[
          this.editSdkObj.sdkIndex
        ] = newRule;
      } else {
        this.linkageRule[this.editSdkObj.ruleIndex].rules[
          this.editSdkObj.sdkIndex
        ] = newRule;
      }
      this.editSdkObj = {};
      this.showSdkSettingBox = false;
    },

    closeAddBox() {
      this.showAddBox = false;
      this.editData = {};
    },

    closeSettingBox() {
      this.showSdkSettingBox = false;
      this.editSdkObj = {};
    },

    openSdkBox(e) {
      e.stopPropagation();
      this.showSdkBox = true;
    },

    selectMultiple(val) {
      if (!val) {
        this.Carmeras = [];
      }
      this.TreeDataPool.multiple = val;
    },
  },
};
@@ -956,6 +1167,73 @@
    }
  }

  .linkageRule {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    margin: 24px 0;
    background: rgba($color: #fff, $alpha: 0.9);

    .control {
      position: absolute;
      display: flex;
      justify-content: end;
      top: 20px;
      right: 20px;

      i {
        margin-left: 10px;
        font-size: 24px;
        color: #0065ff;
        cursor: pointer;

        &:hover {
          color: rgb(0, 51, 255);
        }
      }
    }

    .content {
      position: relative;
      display: flex;
      margin-top: 10px;

      .Anchor {
        position: absolute;
        left: 232px;
        top: 100px;
      }
    }

    .empty {
      width: 1516px;
      height: 198px;
      border: 1px solid #c0c5cc;
      border-radius: 5px;
      text-align: center;
      background: #eff4f9;
      img {
        margin-top: 14px;
        width: 250px;
        height: 150px;
      }

      .des {
        margin-top: 2px;
        color: #666;
      }
    }

    ::v-deep .sourcePoint {
      margin-top: -4px;
      margin-left: -6px;
      width: 4px !important;
      height: 4px !important;
      border-radius: 50%;
      border: 2px solid #0065ff;
    }
  }

  .mask {
    position: absolute;
    top: 0;
@@ -966,5 +1244,46 @@
    opacity: 0.2;
    z-index: 1;
  }

  .swiper-box-container2 {
    width: 568px;
  }

  .img-box {
    position: relative;

    .swiper-pre-border ::v-deep {
      position: absolute;
      bottom: 146px;
      left: 10px;
      cursor: pointer;
      z-index: 1;

      i {
        font-size: 32px;
        color: rgb(229, 229, 229);
      }
    }

    .swiper-next-border ::v-deep {
      position: absolute;
      bottom: 146px;
      right: 10px;
      cursor: pointer;
      z-index: 1;

      i {
        font-size: 32px;
        color: rgb(229, 229, 229);
      }
    }

    .swiper-button-disabled ::v-deep {
      cursor: not-allowed;
      i {
        color: rgb(245, 245, 245);
      }
    }
  }
}
</style>