设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

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

@@ -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>
@@ -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(item.cameraIds)"
            @addLinkageRule="
              addLinkageRule(item.cameraIds, item.camera_polygons)
            "
          ></LinkageCameraBox>
          <div class="Anchor" :id="'linkage_camera' + index"></div>

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

@@ -216,7 +262,7 @@
        ></LinkageCameraBox>

        <div class="empty">
          <img src="/images/hashrate/联动场景空页面.png" alt="" />
          <img src="/images/hashrate/l_empty.png" alt="" />
          <div class="des">暂无联动场景</div>
        </div>
      </div>
@@ -242,7 +288,7 @@
      :linkEditCamera="
        ruleType === 'linkage' && editSdkObj ? editSdkObj.camera_polygons : null
      "
      :Cameras="ruleType === 'linkage' ? Carmeras : [Camera]"
      :Cameras="ruleType === 'linkage' ? addData.cameras : [Camera]"
    ></SdkSettingBox>

    <!-- 遮罩层 -->
@@ -355,6 +401,7 @@
      },
      showNewLinkage: false,
      newLinkageIds: [],
      newLinkPlg: null,

      // swiperOption: {
      //   slidesPerView: 5,
@@ -543,8 +590,6 @@
        return;
      }

      console.log("init");

      this.plumbIns.deleteEveryConnection();
      this.connectArr.forEach((item) => {
        item.deleteEveryConnection();
@@ -587,10 +632,6 @@
        .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;

@@ -813,7 +854,9 @@
      this.showAddBox = true;
    },

    addLinkageRule(ids) {
    addLinkageRule(ids, camera_polygons) {
      console.log(7979);
      console.log(camera_polygons);
      if (ids.length < 2) {
        this.$message({
          message: "请至少选择两台摄像机",
@@ -824,6 +867,7 @@
      this.newLinkageIds = ids;
      this.ruleType = "linkage";
      this.showAddBox = true;
      this.newLinkPlg = camera_polygons;
    },

    //回填新的独立场景
@@ -841,6 +885,9 @@
          });
        } else {
          //联动场景
          if (this.newLinkPlg) {
            newRule.data.camera_polygons = this.newLinkPlg;
          }
          newRule.data.cameraIds = this.newLinkageIds;
          this.linkageRule.push(newRule.data);
          this.$nextTick(() => {
@@ -905,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;
    },
@@ -917,6 +993,7 @@
          newRule.rule_with_pre = "&&";
          newRule.is_save_anyhow = true;
        }

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

@@ -964,7 +1041,6 @@
            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);
            }
@@ -1146,7 +1222,7 @@
    .control {
      position: absolute;
      display: flex;
      justify-content: end;
      justify-content: flex-end;
      top: 20px;
      right: 20px;

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