gb18186

ZZJ

2022-07-27 88078aa63c669cffc2d91e1269d460436427d09d

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

@@ -6,7 +6,7 @@
          <!-- 场景及规则 -->
          <div class="left-top-left">
            <div class="title">场景</div>
            <slide-scene :sceneData="Camera.rules"></slide-scene>
            <slide-scene :sceneData="Camera.allSceneRule"></slide-scene>
          </div>

          <!-- 算力信息进度条 -->
@@ -25,6 +25,7 @@
            :InValidCount="`${PollData.RealTimeInvalid}`"
            :RunningCount="`${PollData.RealTimeRun}`"
            :NoDeal="`${PollData.RealTimeNoDeal}`"
            image="realTime (2).png"
          ></HashrateCard>

          <!-- 轮询算力信息 -->
@@ -36,6 +37,7 @@
            :InValidCount="`${PollData.PollInvalid}`"
            :RunningCount="`${PollData.PollRun}`"
            :NoDeal="`${PollData.PollNoDeal}`"
            image="polling.png"
          ></HashrateCard>
        </div>
      </div>
@@ -56,7 +58,7 @@
            :disabled="false"
            :snapshot_url="Camera.baseImg"
            :canvasDataShow="Camera.canvasData"
            :currentCameraId="Camera.cameraId"
            :currentCamera="Camera"
            :loading="Camera.loading"
            :canvasWidth="canvasWidth"
            :canvasHeight="canvasHeight"
@@ -82,24 +84,24 @@
                v-for="(data, index) in swipercanvasData"
                :key="index"
              >
                <b
                <!--  <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"
                  :divId="data.camera.cameraId"
                  :isShowDrawArrow="true"
                  :isLink="true"
                  :disabled="false"
                  :loading="data.loading"
                  :snapshot_url="data.baseImg"
                  :canvasDataShow="data.canvasData"
                  :currentCameraId="data.cameraId"
                  :currentCamera="data.camera"
                  @changeLoading="changeLoading"
                  @refresh="refresh2"
                ></polygon-canvas>
@@ -127,9 +129,30 @@
    <div class="SeparateRules" @click="selectMultiple(false)">
      <div class="title">独立场景</div>
      <div class="control">
        <i class="iconfont" @click="openSdkBox($event)">&#xe650;</i>
        <i class="iconfont">&#xe64e;</i>
        <i class="iconfont">&#xe64f;</i>
        <el-tooltip
          class="item"
          effect="dark"
          content="算法事件"
          placement="top"
        >
          <i class="iconfont" @click="openSdkBox($event)">&#xe650;</i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="数据流传"
          placement="top"
        >
          <i class="iconfont">&#xe64e;</i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="模板助手"
          placement="top"
        >
          <i class="iconfont">&#xe64f;</i>
        </el-tooltip>
      </div>

      <div class="content">
@@ -149,15 +172,17 @@
              :rule="item"
              :id="'rule_' + index"
              :ruleType="'separate'"
              :cameraId="Camera.cameraId"
              @edit="editRules(item, index, 'separate')"
              @addSdk="addSdk('separate', index)"
              @backToOrigin="backToOrigin('separate', index)"
              @editSdk="editSdk($event, 'separate', index)"
              @deletRule="deletRule('separate', index)"
            ></RuleItem>
          </template>

          <div class="empty" v-else>
            <img src="/images/hashrate/独立场景空页面.png" alt="" />
            <img src="/images/hashrate/s_empty.png" alt="" />
            <div class="des">暂无独立场景</div>
          </div>
        </div>
@@ -167,16 +192,39 @@
    <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>
        <el-tooltip
          class="item"
          effect="dark"
          content="算法事件"
          placement="top"
        >
          <i class="iconfont" @click="showSdkBox = true">&#xe650;</i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="数据流传"
          placement="top"
        >
          <i class="iconfont">&#xe64e;</i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="模板助手"
          placement="top"
        >
          <i class="iconfont">&#xe64f;</i>
        </el-tooltip>
      </div>
      <template v-if="linkageRule.length > 0">
        <div class="content" v-for="(item, index) in linkageRule" :key="index">
          <!-- 摄像机 -->
          <LinkageCameraBox
            :cameras="item.cameraIds"
            @addLinkageRule="addLinkageRule"
            @addLinkageRule="
              addLinkageRule(item.cameraIds, item.camera_polygons)
            "
          ></LinkageCameraBox>
          <div class="Anchor" :id="'linkage_camera' + index"></div>

@@ -187,17 +235,36 @@
              :rule="item"
              @edit="editRules(item, index, 'linkage')"
              @addSdk="addSdk('linkage', index)"
              @backToOrigin="backToOrigin('linkage', index)"
              @editSdk="editSdk($event, 'linkage', index, item.Cameras)"
              @backToOrigin="backToOrigin('linkage', index, item.cameraIds)"
              @editSdk="editSdk($event, 'linkage', index)"
              @deletRule="deletRule('linkage', index)"
              :id="'linkage_' + index"
            ></RuleItem>
          </div>
        </div>
      </template>

      <div class="empty" @click="addLinkageRule" v-else>
        <img src="/images/hashrate/联动场景空页面.png" alt="" />
      <div
        class="empty"
        v-if="linkageRule.length <= 0 && !TreeDataPool.multiple"
      >
        <img src="/images/hashrate/l_empty.png" alt="" />
        <div class="des">暂无联动场景</div>
      </div>

      <div
        class="newCameraArea"
        v-if="linkageRule.length <= 0 && TreeDataPool.multiple"
      >
        <LinkageCameraBox
          :cameras="CarmerasId"
          @addLinkageRule="addLinkageRule(CarmerasId)"
        ></LinkageCameraBox>

        <div class="empty">
          <img src="/images/hashrate/l_empty.png" alt="" />
          <div class="des">暂无联动场景</div>
        </div>
      </div>
    </div>

@@ -219,9 +286,9 @@
      @getEditSdk="getEditSdk"
      :editSdk="editSdkObj.sdk"
      :linkEditCamera="
        ruleType === 'linkage' && editSdkObj ? editSdkObj.cameras : null
        ruleType === 'linkage' && editSdkObj ? editSdkObj.camera_polygons : null
      "
      :Cameras="ruleType === 'linkage' ? Carmeras : [Camera]"
      :Cameras="ruleType === 'linkage' ? addData.cameras : [Camera]"
    ></SdkSettingBox>

    <!-- 遮罩层 -->
@@ -283,6 +350,13 @@
    selectedCameraIds() {
      return this.TreeDataPool.selectedNodes;
    },
    CarmerasId() {
      let arr = [];
      this.Carmeras.forEach((item) => {
        arr.push(item.cameraId);
      });
      return arr;
    },
  },
  data() {
    return {
@@ -325,6 +399,9 @@
          prevEl: ".swiper-next-border",
        },
      },
      showNewLinkage: false,
      newLinkageIds: [],
      newLinkPlg: null,

      // swiperOption: {
      //   slidesPerView: 5,
@@ -342,7 +419,7 @@
      SeparateRules: [], //独立场景
      linkageRule: [], //联动场景
      cameraId: "",
      showSysInfo: false,
      showSysInfo: true,
      showCanvas: true,
      canvasWidth: 568,
      canvasHeight: 320,
@@ -358,8 +435,8 @@
    this.plumbIns = jsPlumb.getInstance();
  },
  mounted() {
    this.PollData.statistics();
    this.TaskMange.findAllSdk({ installed: true });
    // this.PollData.statistics();
    this.TaskMange.findAllSdk();
  },
  destroyed() {
    document.querySelector("html").style["min-width"] = "1280px";
@@ -468,6 +545,7 @@
        this.$refs.canvas.showModal();
      }
    },

    getCanvasData(data) {
      let polyon = { ...data };
      polyon.camera_id = this.Camera.cameraId;
@@ -481,8 +559,12 @@
      let carmeras = this.Carmeras;
      for (let i = 0; i < carmeras.length; i++) {
        swipers = swipers.concat({
          cameraId: carmeras[i].cameraId,
          name: carmeras[i].camearInfo.name,
          camera: {
            cameraId: carmeras[i].cameraId,
            cameraName: carmeras[i].cameraName,
            type: carmeras[i].type,
            rtsp: carmeras[i].rtsp,
          },
          baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined,
          canvasData: carmeras[i].canvasData,
          loading: carmeras[i].loading,
@@ -491,6 +573,7 @@
      this.swipercanvasData = swipers;
    },
    refresh(url) {
      console.log(url);
      this.Camera.baseImg = url;
    },
    refresh2(url, id) {
@@ -507,8 +590,6 @@
        return;
      }

      console.log("init");

      this.plumbIns.deleteEveryConnection();
      this.connectArr.forEach((item) => {
        item.deleteEveryConnection();
@@ -523,6 +604,7 @@

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

      this.$nextTick(() => {
        this.connectLine();
      });
@@ -534,38 +616,27 @@
          this.runType = element.run_type;
        }
      });

      // 获取混合场景
      this.showRules(id);
    },

    // 获取混合场景
    showRules(id) {
      if (!id) {
        return;
      }
      if (typeof id === "string") {
        id = [id];
      }
      let rules = [];

      getLinkSceneRule({ cameraIds: [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;
            }
            rules = rsp.data.rules;

            this.linkageRule = rules;

            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);
              });
            });
          }
        })
@@ -783,16 +854,20 @@
      this.showAddBox = true;
    },

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

    //回填新的独立场景
@@ -810,13 +885,10 @@
          });
        } else {
          //联动场景
          let arr = [this.Camera.cameraId];
          this.Carmeras.forEach((item) => {
            if (item.cameraId != this.Camera.cameraId) {
              arr.push(item.cameraId);
            }
          });
          newRule.data.cameraIds = arr;
          if (this.newLinkPlg) {
            newRule.data.camera_polygons = this.newLinkPlg;
          }
          newRule.data.cameraIds = this.newLinkageIds;
          this.linkageRule.push(newRule.data);
          this.$nextTick(() => {
            this.connectLine2();
@@ -856,6 +928,7 @@
        }

        this.showAddBox = false;
        this.$forceUpdate();
      }
      this.editData = {};
    },
@@ -879,6 +952,35 @@
        type,
        index,
      };
      if (this.addData.type === "linkage") {
        this.addData.cameras = [];
        if (
          this.linkageRule[index].camera_polygons &&
          this.linkageRule[index].camera_polygons.length > 0
        ) {
          this.linkageRule[index].camera_polygons.forEach((camera) => {
            this.addData.cameras.push({
              polygonData: camera.polygon,
              cameraName: camera.camera_name,
              cameraId: camera.camera_id,
            });
          });
        } else {
          this.linkageRule[index].camera_polygons = [];
          this.Carmeras.forEach((camera) => {
            this.addData.cameras.push({
              polygonData: camera.polygonData,
              cameraName: camera.cameraName,
              cameraId: camera.cameraId,
            });
            this.linkageRule[index].camera_polygons.push({
              polygon: camera.polygonData,
              camera_name: camera.cameraName,
              camera_id: camera.cameraId,
            });
          });
        }
      }
      this.showSdkBox = false;
      this.showSdkSettingBox = true;
    },
@@ -891,6 +993,7 @@
          newRule.rule_with_pre = "&&";
          newRule.is_save_anyhow = true;
        }

        this.SeparateRules[this.addData.index].rules.push(newRule);
      }

@@ -914,13 +1017,16 @@
    },

    //取消修改
    async backToOrigin(type, index) {
    async backToOrigin(type, index, ids) {
      if (type === "separate") {
        const rsp = await getCameraSceneRule({
          cameraId: this.Camera.cameraId,
        });
        if (rsp && rsp.success) {
          let rules = rsp.data.rules ? rsp.data.rules : [];
          rules.forEach((item) => {
            item.cameraIds = rsp.data.cameraInfo.id;
          });
          if (rules[index]) {
            this.SeparateRules[index] = rules[index];
          } else {
@@ -930,32 +1036,24 @@
        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();
        getLinkSceneRule({ cameraIds: ids }).then((rsp) => {
          if (rsp && rsp.success) {
            let rules = rsp.data.rules ? rsp.data.rules : [];
            if (rules[index]) {
              this.linkageRule[index] = rules[index];
            } else {
              this.linkageRule.splice(index, 1);
            }
            console.log("失败");
          })
          .catch((err) => {
            console.log(err);
          });
            this.$forceUpdate();
            this.connectLine2();
          }
          console.log("失败");
        });
      }
    },

    // 编辑算法
    editSdk(sdkIndex, type, ruleIndex, Cameras) {
    editSdk(sdkIndex, type, ruleIndex) {
      this.addData = {};
      this.ruleType = type;
      if (type === "separate") {
@@ -970,13 +1068,21 @@
          ruleIndex,
          sdkIndex,
          type,
          cameras: Cameras,
          camera_polygons: this.linkageRule[ruleIndex].camera_polygons,
          sdk: this.linkageRule[ruleIndex].rules[sdkIndex],
        };
      }

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

    deletRule(type, index) {
      if (type === "separate") {
        this.SeparateRules.splice(index, 1);
      } else {
        this.linkageRule.splice(index, 1);
      }
    },

    getEditSdk(newRule) {
@@ -1116,7 +1222,7 @@
    .control {
      position: absolute;
      display: flex;
      justify-content: end;
      justify-content: flex-end;
      top: 20px;
      right: 20px;

@@ -1177,7 +1283,7 @@
    .control {
      position: absolute;
      display: flex;
      justify-content: end;
      justify-content: flex-end;
      top: 20px;
      right: 20px;

@@ -1224,6 +1330,29 @@
      }
    }

    .newCameraArea {
      display: flex;
      .empty {
        margin-left: 60px;
        width: 1220px;
        height: 198px;
        border: 1px solid #c0c5cc;
        border-radius: 5px;
        text-align: center;
        background: #f0f5fa;
        img {
          margin-top: 14px;
          width: 250px;
          height: 150px;
        }

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

    ::v-deep .sourcePoint {
      margin-top: -4px;
      margin-left: -6px;
@@ -1246,6 +1375,8 @@
  }

  .swiper-box-container2 {
    margin: 0;
    margin-top: -13px;
    width: 568px;
  }

@@ -1268,7 +1399,7 @@
    .swiper-next-border ::v-deep {
      position: absolute;
      bottom: 146px;
      right: 10px;
      right: 58px;
      cursor: pointer;
      z-index: 1;