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"
@@ -92,14 +94,14 @@
                  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">
@@ -159,7 +182,7 @@
          </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>
@@ -169,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>

@@ -189,7 +235,7 @@
              :rule="item"
              @edit="editRules(item, index, 'linkage')"
              @addSdk="addSdk('linkage', index)"
              @backToOrigin="backToOrigin('linkage', index)"
              @backToOrigin="backToOrigin('linkage', index, item.cameraIds)"
              @editSdk="editSdk($event, 'linkage', index)"
              @deletRule="deletRule('linkage', index)"
              :id="'linkage_' + index"
@@ -198,9 +244,27 @@
        </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>

@@ -224,7 +288,7 @@
      :linkEditCamera="
        ruleType === 'linkage' && editSdkObj ? editSdkObj.camera_polygons : null
      "
      :Cameras="ruleType === 'linkage' ? Carmeras : [Camera]"
      :Cameras="ruleType === 'linkage' ? addData.cameras : [Camera]"
    ></SdkSettingBox>

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

      // swiperOption: {
      //   slidesPerView: 5,
@@ -471,6 +545,7 @@
        this.$refs.canvas.showModal();
      }
    },

    getCanvasData(data) {
      let polyon = { ...data };
      polyon.camera_id = this.Camera.cameraId;
@@ -484,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,
@@ -494,6 +573,7 @@
      this.swipercanvasData = swipers;
    },
    refresh(url) {
      console.log(url);
      this.Camera.baseImg = url;
    },
    refresh2(url, id) {
@@ -509,8 +589,6 @@
      if (!id) {
        return;
      }

      console.log("init");

      this.plumbIns.deleteEveryConnection();
      this.connectArr.forEach((item) => {
@@ -538,29 +616,24 @@
          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.rules;
            // 统一规则编辑的数据结构
            for (let i = 0; i < rules.length; i++) {
              rules[i].group_rules = rules[i].rules;
            }

            this.linkageRule = rules;

            console.log(this.linkageRule);

            this.$set(this.Camera, "rules", this.Camera.rules.concat(rules));

            this.$nextTick(() => {
              this.connectLine2();
@@ -781,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;
    },

    //回填新的独立场景
@@ -808,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();
@@ -854,6 +928,7 @@
        }

        this.showAddBox = false;
        this.$forceUpdate();
      }
      this.editData = {};
    },
@@ -877,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;
    },
@@ -889,6 +993,7 @@
          newRule.rule_with_pre = "&&";
          newRule.is_save_anyhow = true;
        }

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

@@ -912,7 +1017,7 @@
    },

    //取消修改
    async backToOrigin(type, index) {
    async backToOrigin(type, index, ids) {
      if (type === "separate") {
        const rsp = await getCameraSceneRule({
          cameraId: this.Camera.cameraId,
@@ -931,12 +1036,11 @@
        this.$forceUpdate();
        this.connectLine();
      } else {
        getLinkSceneRule({ cameraIds: [this.Camera.cameraId] }).then((rsp) => {
        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];
              this.linkageRule.group_rules = this.linkageRule.rules;
            } else {
              this.linkageRule.splice(index, 1);
            }
@@ -1118,7 +1222,7 @@
    .control {
      position: absolute;
      display: flex;
      justify-content: end;
      justify-content: flex-end;
      top: 20px;
      right: 20px;

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

@@ -1226,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;