摄像机管理

ZZJ

2022-03-29 658915facb9ec5a5ad83abceb4d64dccac15e631

摄像机管理

 src/components/giantTree/index.vue

@@ -315,7 +315,6 @@
    itemCheck(evt, treeId, treeNode) {
      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;
      debugger;
      // 多选
      // this.ztreeObj.checkNode(treeNode, true, false, false);
      let checkedNodes = this.ztreeObj.getCheckedNodes(true);

 src/components/subComponents/VueCron.vue

@@ -1,7 +1,12 @@
<template>
  <div>
    <b style="padding-right:30px;">定时重启:</b>
    <el-select v-model="every" placeholder="请选择" size="small" @change="changeEvery">
    <b style="padding-right: 30px">定时重启:</b>
    <el-select
      v-model="every"
      placeholder="请选择"
      size="small"
      @change="changeEvery"
    >
      <el-option label="关闭" value="never"></el-option>
      <el-option label="每天" value="day"></el-option>
      <el-option label="每周" value="week"></el-option>
@@ -16,7 +21,12 @@
      style="margin-left: 20px"
      @change="updateExpression"
    >
      <el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value"></el-option>
      <el-option
        v-for="item in days"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>

    <el-select
@@ -39,7 +49,7 @@
    <el-time-picker
      v-show="every !== 'never'"
      v-model="time"
      :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
      :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
      value-format="HH:mm"
      format="HH:mm"
      placeholder="任意时间点"
@@ -54,7 +64,8 @@
      size="small"
      style="margin-left: 20px"
      @click="save"
    >保存</el-button>
      >保存</el-button
    >
  </div>
</template>

@@ -64,21 +75,21 @@
  props: ["expression"],
  computed: {
    days: () => {
      let arr = []
      let arr = [];
      for (let i = 1; i < 32; i++) {
        arr.push({
          label: i + "日",
          value: i + ""
        })
          value: i + "",
        });
      }

      return arr
    }
      return arr;
    },
  },
  watch: {
    expression: function () {
      this.resolveExp()
    }
      this.resolveExp();
    },
  },
  data() {
    return {
@@ -90,13 +101,13 @@
        hour: "*",
        day: "*",
        month: "*",
        week: "*"
        week: "*",
      },
      cronText: ""
    }
      cronText: "",
    };
  },
  mounted() {
    this.resolveExp()
    this.resolveExp();
  },
  methods: {
    resolveExp() {
@@ -106,22 +117,22 @@
        let arr = this.expression.split(" ");
        if (arr.length >= 5) {
          //6 位以上是合法表达式
          this.cronValueObj.min = arr[0]
          this.cronValueObj.hour = arr[1]
          this.cronValueObj.day = arr[2]
          this.cronValueObj.min = arr[0];
          this.cronValueObj.hour = arr[1];
          this.cronValueObj.day = arr[2];
          // this.cronValueObj.month = arr[3],
          this.cronValueObj.month = "*"
          this.cronValueObj.week = arr[4]
          this.cronValueObj.month = "*";
          this.cronValueObj.week = arr[4];
        }

        if (this.cronValueObj.week != "*") {
          this.every = "week"
          this.every = "week";
        } else if (this.cronValueObj.day != "*") {
          this.every = "month"
          this.every = "month";
        } else {
          this.every = "day"
          this.every = "day";
        }
        this.time = this.cronValueObj.hour + ":" + this.cronValueObj.min
        this.time = this.cronValueObj.hour + ":" + this.cronValueObj.min;
      } else {
        //没有传入的表达式 则还原
        this.clearCron();
@@ -130,45 +141,45 @@
    changeEvery() {
      this.saveBtn = true;
      if (this.every === "never") {
        this.cronText = ""
        return
        this.cronText = "";
        return;
      }
      if (this.every === "month") {
        this.cronValueObj.week = "*"
        this.cronValueObj.day = "1"
        this.cronValueObj.week = "*";
        this.cronValueObj.day = "1";
        if (!this.time.length) {
          this.time = "00:00"
          this.time = "00:00";
        }
      }
      if (this.every === "week") {
        this.cronValueObj.day = "*"
        this.cronValueObj.week = "1"
        this.cronValueObj.day = "*";
        this.cronValueObj.week = "1";
        if (!this.time.length) {
          this.time = "00:00"
          this.time = "00:00";
        }
      }
      if (this.every === "day") {
        this.cronValueObj.day = "*"
        this.cronValueObj.week = "*"
        this.cronValueObj.day = "*";
        this.cronValueObj.week = "*";
      }
      this.updateExpression()
      this.updateExpression();
    },
    updateExpression() {
      this.saveBtn = true;
      if (this.time.length) {
        let arr = this.time.split(":");
        this.cronValueObj.hour = arr[0]
        this.cronValueObj.min = arr[1]
        this.cronValueObj.hour = arr[0];
        this.cronValueObj.min = arr[1];
      }
      this.crontabValueString()
      this.crontabValueString();
    },
    clearCron() {
      this.cronValueObj.second = "*"
      this.cronValueObj.min = "*"
      this.cronValueObj.hour = "*"
      this.cronValueObj.day = "*"
      this.cronValueObj.month = "*"
      this.cronValueObj.week = "*"
      this.cronValueObj.second = "*";
      this.cronValueObj.min = "*";
      this.cronValueObj.hour = "*";
      this.cronValueObj.day = "*";
      this.cronValueObj.month = "*";
      this.cronValueObj.week = "*";
    },
    crontabValueString: function () {
      let obj = this.cronValueObj;
@@ -181,14 +192,13 @@
        " " +
        obj.month +
        " " +
        obj.week
        obj.week;
    },
    save() {
      debugger
      this.$emit("update", this.cronText)
    }
  }
}
      this.$emit("update", this.cronText);
    },
  },
};
</script>

<style lang="scss">

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

@@ -19,14 +19,14 @@
          <div class="label">处理方式:</div>
          <div
            class="button pollingBtn"
            :class="{ active: camera.analytics && !camera.dealWay }"
            :class="{ active: !camera.dealWay }"
            @click="changePoll(false)"
          >
            轮询
          </div>
          <div
            class="button realtimeBtn"
            :class="{ active: camera.analytics && camera.dealWay }"
            :class="{ active: camera.dealWay }"
            @click="changePoll(true)"
          >
            实时
@@ -108,6 +108,10 @@

    //实时、轮询切换
    changePoll(row) {
      if (!this.camera.analytics) {
        return;
      }

      //判断是新增还是更新
      if (this.camera.cameraId && this.camera.cameraId !== undefined) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
@@ -116,7 +120,6 @@
          } else {
            this.camera.dealWay = false;
          }
          debugger;
          changeRunType({
            camera_ids: [this.camera.cameraId],
            run_type: this.camera.dealWay ? 1 : 0,

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

New file
@@ -0,0 +1,335 @@
<template>
  <div class="CameraBox">
    <div v-if="cameras">
      <div v-for="(camera, index) in cameraArr" :key="index" class="boxItem">
        <div class="header">
          <i class="iconfont">&#xe646;</i>
          <div class="name">{{ camera.cameraName }}</div>
          <el-switch
            v-model="camera.analytics"
            @change="pollEnable($event, index)"
            active-color="#D4E3FA"
            inactive-color="#E9EBEE"
            :width="56"
          >
          </el-switch>
        </div>

        <div class="body">
          <div class="row">
            <div class="label">处理方式:</div>
            <div
              class="button pollingBtn"
              :class="{ active: !camera.dealWay }"
              @click="changePoll(false, index)"
            >
              轮询
            </div>
            <div
              class="button realtimeBtn"
              :class="{ active: camera.dealWay }"
              @click="changePoll(true, index)"
            >
              实时
            </div>
          </div>
          <div class="row">
            <div class="label">分辨率:</div>
            <div
              class="data"
              v-if="camera.camearInfo.resolution_width != undefined"
            >
              {{
                camera.camearInfo.resolution_width == 0 ||
                camera.camearInfo.resolution_height == 0
                  ? "本机分辨率"
                  : `${camera.camearInfo.resolution_width} * ${camera.camearInfo.resolution_height}`
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="button addModel">添加到模板</div>
        <div class="button addRule" @click="addRule">添加新场景</div>
      </div>
    </div>

    <div class="empty" v-else>暂未获得摄像机信息</div>
  </div>
</template>

<script>
import { changeRunType } from "@/api/pollConfig";
import VideoRuleData from "@/Pool/VideoRuleData";

export default {
  props: {
    cameras: {
      type: Array,
    },
  },
  created() {
    this.getCameraInfo();
  },

  data() {
    return {
      cameraArr: [],
    };
  },
  methods: {
    //是否进行视频分析处理
    pollEnable(row, index) {
      let val = 0;
      if (row) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
          this.cameraArr[index].dealWay = true;
          val = 1;
        } else {
          this.cameraArr[index].dealWay = false;
          val = 0;
        }
      } else {
        this.cameraArr[index].dealWay = false;
        val = -1;
      }
      if (
        this.cameraArr[index].cameraId &&
        this.cameraArr[index].cameraId !== undefined
      ) {
        changeRunType({
          camera_ids: [this.cameraArr[index].cameraId],
          run_type: val,
        }).then((rsp) => {
          if (rsp && rsp.success) {
            this.$notify({
              type: "success",
              message: "配置成功",
            });
          } else {
            this.$notify({
              type: "error",
              message: "配置失败",
            });
          }
          this.TreeDataPool.fetchTreeData();
        });
      }
      //    this.PollData.statisticTaskInfo();
    },

    //实时、轮询切换
    changePoll(row, index) {
      if (!this.cameraArr[index].analytics) {
        return;
      }

      //判断是新增还是更新
      if (
        this.cameraArr[index].cameraId &&
        this.cameraArr[index].cameraId !== undefined
      ) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
          if (row) {
            this.cameraArr[index].dealWay = true;
          } else {
            this.cameraArr[index].dealWay = false;
          }
          changeRunType({
            camera_ids: [this.cameraArr[index].cameraId],
            run_type: this.cameraArr[index].dealWay ? 1 : 0,
          }).then((rsp) => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "配置成功",
              });
            } else {
              this.$notify({
                type: "error",
                message: "配置失败",
              });
            }
          });
        } else {
          if (this.cameraArr[index].dealWay) {
            this.cameraArr[index].dealWay = false;
            changeRunType({
              camera_ids: [this.cameraArr[index].cameraId],
              run_type: this.cameraArr[index].dealWay ? 1 : 0,
            }).then((rsp) => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "配置成功",
                });
              } else {
                this.$notify({
                  type: "error",
                  message: "配置失败",
                });
              }
            });
          }
        }
        this.TreeDataPool.fetchTreeData();
        //    this.PollData.statisticTaskInfo();
      }
    },

    // 显示新增弹窗
    addRule() {
      this.$emit("addLinkageRule");
    },

    getCameraInfo() {
      this.cameras.forEach((id) => {
        let newCamera = new VideoRuleData(id);
        this.cameraArr.push(newCamera);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.CameraBox {
  margin-bottom: 20px;
  width: 236px;
  border-radius: 5px;
  background-color: #fff;
  filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));

  .boxItem {
    height: 156px;
  }

  .header {
    display: flex;
    box-sizing: border-box;
    padding: 0 10px;
    height: 44px;
    background: #f0f5fa;
    align-items: center;

    i {
      font-size: 18px;
      margin-right: 6px;
      color: #0065ff;
    }

    .name {
      width: 136px;
      font-size: 14px;
      color: #5f5f5f;
    }

    .el-switch ::v-deep {
      height: 24px;
      .el-switch__core {
        height: 24px;
        border-radius: 16px;
      }
      .el-switch__core::after {
        margin-top: 2px;
        margin-left: 3px;
        width: 16px;
        height: 16px;
        background: #999999;
      }
    }
    .el-switch.is-checked ::v-deep {
      .el-switch__core::after {
        margin-left: -20px;

        background-color: #0065ff;
      }
    }
  }

  .body {
    box-sizing: border-box;
    padding: 0 10px 20px 10px;
    .row {
      margin-top: 20px;
      display: flex;
      align-items: center;

      .label {
        width: 70px;
        font-size: 12px;
        color: #666;
      }

      .button {
        position: relative;
        width: 73px;
        height: 24px;
        text-align: center;
        border: 1px solid #c0c5cc;
        font-size: 12px;
        color: #999;
        border-radius: 5px;
        line-height: 24px;

        &.pollingBtn {
          &.active {
            z-index: 1;
            background: #ff6a00;
            border: 1px solid #ff6a00;
            color: #fff;
          }
        }

        &.realtimeBtn {
          margin-left: -5px;
          background-color: #fff;

          &.active {
            z-index: 1;
            background: #0065ff;
            border: 1px solid #0065ff;
            color: #fff;
          }
        }
      }
    }
  }

  .footer {
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    border-top: 1px solid #e9ebee;

    .addModel {
      margin-right: 10px;
      width: 102px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border: 1px solid #0065ff;
      color: #0065ff;
    }

    .addRule {
      width: 102px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border: 1px solid #0065ff;
      background-color: #0065ff;
      color: #fff;
    }
  }
}

.empty {
  box-sizing: border-box;
  padding-top: 80px;
  text-align: center;
  color: #ccc;
}
</style>

 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>
@@ -76,7 +90,7 @@
      <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 +100,17 @@

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

export default {
  props: {
    rule: {},
    ruleType: {},
  },
  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 +147,6 @@
        },
      ],
      showAddBox: false,
      originRule: {},
    };
  },
  computed: {
@@ -173,8 +187,57 @@
    edit() {
      this.$emit("edit");
    },
    delSdk(index) {
      this.rule.rules.splice(index, 1);

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

      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.rule.cameraId];
        saveCameraScene(this.rule).then((rsp) => {
          if (rsp && rsp.success) {
            this.$notify({
              type: "success",
              message: "策略保存成功！",
            });
          }
        });
      } else {
        saveLinkScene(this.rule)
          .then((rsp) => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "任务保存成功！",
              });
            } else {
              this.$notify({
                type: "error",
                message: rsp.data,
              });
            }
          })
          .catch((err) => {
            this.$message({
              type: "error",
              message: "保存失败！",
            });
          });
      }
    },
    update() {
      this.$forceUpdate();
    },
  },
};
@@ -376,5 +439,10 @@
    margin: 10px 0 10px 20px;
    border-right: 1px solid #e9ebee;
  }

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

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

@@ -323,7 +323,6 @@
        });
        return false;
      }
      debugger;
      this.eventAudio.src = this.soundPath;
      if (this.togglePlay) {
        this.eventAudio.play();

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

@@ -20,9 +20,6 @@
<script>
import bus from "@/plugin/bus";
export default {
  mounted() {
    this.TaskMange.findAllSdk({ installed: true });
  },
  methods: {
    close() {
      this.$emit("close");

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

@@ -61,14 +61,14 @@
              <el-input
                class="range-min"
                v-model="arg.min"
                @input="forceUpdate"
                @input="rangeInput(arg)"
                @blur="validateArgVal(arg, $event)"
              ></el-input>
              <span class="devide"></span>
              <el-input
                class="range-max"
                v-model="arg.max"
                @input="forceUpdate"
                @input="rangeInput(arg)"
                @blur="validateArgVal(arg, $event)"
              ></el-input>
              <span class="font">{{ arg.unit }}</span>
@@ -206,7 +206,9 @@

    <div class="btns">
      <div class="cancelBtn button" @click="close">取消</div>
      <div class="confirmBtn button" @click="save">添加</div>
      <div class="confirmBtn button" @click="save">
        {{ editSdk ? "保存" : "添加" }}
      </div>
    </div>
  </div>
</template>
@@ -224,14 +226,18 @@
      type: Boolean,
      default: false,
    },
    isLinkRule: {
      type: Boolean,
      default: false,

    editSdk: {},

    linkEditCamera: {},
  },
  computed: {
    isLinkRule() {
      return this.Cameras.length > 1;
    },
  },
  created() {
    this.initOption();
    this.initPolygon();
  },
  data() {
    return {
@@ -251,6 +257,10 @@
    };
  },
  methods: {
    rangeInput(arg) {
      arg.sdk_arg_value = arg.min + "|" + arg.max;
      this.$forceUpdate();
    },
    selectPolygonOption(rule) {
      rule.polygon_id = rule.polygonObj.polygonId
        ? rule.polygonObj.polygonId
@@ -258,14 +268,37 @@
      rule.camera_id = rule.polygonObj.cameraId
        ? rule.polygonObj.cameraId
        : rule.camera_id;
      rule.group_id = this.group_id;
    },
    close() {
      this.$emit("close");
    },
    initOption() {
      let sdkItem = this.$store.state.newSdk;
      sdkItem.argDef = JSON.parse(sdkItem.argDef);
      this.initPolygon();
      let sdkItem = null;
      if (this.editSdk) {
        this.TaskMange.list1.forEach((item) => {
          if (item.id === this.editSdk.sdk_id) {
            sdkItem = item;
          }
        });

        if (typeof sdkItem.argDef === "string") {
          sdkItem.argDef = JSON.parse(sdkItem.argDef);
        }

        this.sdkItem = sdkItem;
        this.sdkItem.sdk_set = JSON.parse(JSON.stringify(this.editSdk.sdk_set));
        this.sdkItem.polygon_id = this.editSdk.polygon_id;

        this.editRule();
        return;
      } else {
        sdkItem = this.$store.state.newSdk;
      }
      console.log(typeof sdkItem.argDef);
      if (typeof sdkItem.argDef === "string") {
        sdkItem.argDef = JSON.parse(sdkItem.argDef);
      }
      //取出默认参数
      sdkItem.defaultArg = sdkItem.argDef.filter(
        (arg) => !arg.config.isOptional
@@ -304,25 +337,157 @@
      this.sdkItem = sdkItem;
    },
    initPolygon() {
      let polygon = [];
      let cameras = [...this.Cameras];
      let cameras = [];
      if (this.linkEditCamera) {
        cameras = this.linkEditCamera;
      } else {
        cameras = [...this.Cameras];
      }

      for (let i = 0; i < cameras.length; i++) {
        let polyOpt = cameras[i].polygonData.map((p) => {
          return {
            defence_state: p.defence_state,
            polygonId: p.id,
            name: this.isLinkRule
              ? cameras[i].cameraName + ":" + p.name
              : p.name,
            name:
              this.isLinkRule || this.linkEditCamera
                ? cameras[i].cameraName + ":" + p.name
                : p.name,

            cameraId: cameras[i].cameraId,
          };
        });
        polygon = polygon.concat(polyOpt);

        this.allPolygonData = polygon;
        this.allPolygonData = this.allPolygonData.concat(polyOpt);
      }

      this.$forceUpdate();
    },

    editRule() {
      let tempObj = {};

      // 填充区域选项列表
      this.allPolygonData.forEach((p) => {
        if (p.polygonId === this.sdkItem.polygon_id) {
          this.sdkItem.polygonObj = p;
        }
      });

      if (!this.sdkItem.polygonObj) {
        this.sdkItem.polygonObj = {
          cameraId: this.sdkItem.camera_id,
          defence_state: 1,
          name: "未知区域",
          polygonId: this.sdkItem.polygon_id,
        };
      }

      // 设置区域
      this.selectPolygonOption(this.sdkItem);

      //算法对象,算法参数配置数组,(用于数据处理的)默认参数数组, 可选参数数组, 已配置的可选参数数组, (用于去重判断)存放可选参数名的数组
      let argDef = [],
        defaultArg = [],
        optionalArg = [],
        optArg = [],
        optNames = [];

      argDef = this.sdkItem.argDef;

      defaultArg = argDef.filter((arg) => !arg.config.isOptional);
      optionalArg = argDef.filter((arg) => arg.config.isOptional);

      this.sdkItem.sdk_set.forEach((arg) => {
        let optItem = optionalArg.find((oarg) => {
          if (oarg.sort == arg.sort) {
            return oarg;
          }
        });
        if (optItem) {
          //if (optItem.operators.length > 1) {
          optItem.operator = arg.operator;
          //this.selOperator(optItem)
          //}

          //赋值
          optItem.sdk_arg_value = arg.sdk_arg_value;
          //if(arg.sdk_arg_value.indexOf(',')>0){
          //判断是否是多选值类型的参数
          let isMultiOne = optionalArg.find(
            (oarg) => oarg.sort == optItem.sort && optItem.config.isMulti
          );
          if (isMultiOne) {
            optItem.sdk_arg_value = arg.sdk_arg_value.split(",");
          }

          if (optItem.type == "option") {
            this.setOptArgValueOptions(optItem);
          }
          if (optItem.alias == "bForceSend") {
          }
          //在push之前,需要判断是否配置了这个可选项  在sdk_set配置数组里,

          optArg.push(optItem);
        } else {
          defaultArg.forEach((d) => {
            if (d.sort == arg.sort) {
              if (arg.sdk_arg_value.indexOf("|") > 0) {
                //区间值
                d.min = arg.sdk_arg_value.split("|")[0];
                d.max = arg.sdk_arg_value.split("|")[1];
                d.operator = "range";
                //} else if(arg.sdk_arg_value.indexOf(',') > 0){
              } else if (arg.operator_type == "option") {
                //多选类型的值
                d.sdk_arg_value = arg.sdk_arg_value.split(",");
                this.setOptArgValueOptions(d);
              } else {
                d.sdk_arg_value = arg.sdk_arg_value;
              }
              d.operator = arg.operator;
            }
          });
        }
      });
      optNames = optionalArg.map((arg) => ({
        name: arg.name,
        sort: arg.sort,
        isSelected: false,
      }));

      tempObj = {
        polygonObj: this.sdkItem.polygonObj,
        rule_with_pre: this.sdkItem.rule_with_pre,
        is_save_anyhow: this.sdkItem.is_save_anyhow,
        isSpread: true,
        argDef,
        initAddOptional: false,
        optionalArg,
        optArg,
        defaultArg,
        optNames,
        isAddable: true,
        camera_id: this.sdkItem.camera_id,
        polygon_id: this.sdkItem.polygon_id,
        sdk_id: this.editSdk.sdk_id,
        rule_with_pre: this.editSdk.rule_with_pre,
        is_save_anyhow: this.editSdk.is_save_anyhow,
        icon_blob: this.editSdk.icon_blob,
      };
      //回显是否显示添加可选参数
      tempObj.initAddOptional =
        tempObj.optArg.length == 0 && tempObj.optionalArg.length > 0
          ? true
          : false;
      //回显是否显示可选参数添加按钮
      if (tempObj.optArg.length < tempObj.optionalArg.length) {
        tempObj.isAddable = true;
      } else {
        tempObj.isAddable = false;
      }

      this.sdkItem = tempObj;
      this.$forceUpdate();
    },

    validateArgVal(sdkArgItem, e) {
@@ -645,9 +810,8 @@
      console.log(this.sdkItem);

      let tempObj = {
        sdk_id: this.sdkItem.id,
        sdk_id: this.editSdk ? this.sdkItem.sdk_id : this.sdkItem.id,
        camera_id: this.sdkItem.camera_id,
        group_id: "",
        is_save_anyhow: this.sdkItem.is_save_anyhow,
        polygon_id: this.sdkItem.polygon_id,
        rule_with_pre: this.sdkItem.rule_with_pre,
@@ -763,7 +927,11 @@
      tempObj.sdk_set = defaultArgs.concat(optArgs);
      tempObj.icon_blob = this.$store.state.newSdk.iconBlob;

      this.$emit("getNewSdk", tempObj);
      if (this.editSdk) {
        this.$emit("getEditSdk", tempObj);
      } else {
        this.$emit("getNewSdk", tempObj);
      }
    },
  },
  watch: {

 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>

 src/views/hashrate/CameraManage/index.vue

@@ -49,6 +49,7 @@
import CameraLeft from "@/components/CameraLeft";
import CameraInfo from "./CameraInfo";
import CameraRules from "./CameraRules";
import VideoRuleData from "@/Pool/VideoRuleData";

import bus from "@/plugin/bus";
export default {
@@ -84,6 +85,10 @@

  watch: {
    "TreeDataPool.selectedNode": function (node) {
      if (this.TreeDataPool.multiple) {
        return;
      }

      if (this.activeTab == "信息维护") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.cameraInfo.selectCamera(node);
@@ -95,7 +100,15 @@
    "TreeDataPool.selectedNodes": {
      handler(nodes) {
        if (this.activeTab == "场景配置") {
          // this.$refs.sepRule.initCameraData();
          //  this.$refs.sepRule.initCameraData(nodes[nodes.length - 1]);
          let CameraArr = [];

          nodes.forEach((id) => {
            let newCamera = new VideoRuleData(id);
            CameraArr.push(newCamera);
          });

          this.$refs.sepRule.Carmeras = CameraArr;
        }
      },
      deep: true,

 src/views/manageCenter/index.vue

New file
@@ -0,0 +1,10 @@
<template>
  <div class="manageCenter">管理中心</div>
</template>

<script>
export default {};
</script>

<style>
</style>

 src/views/search/components/giantTree/index.vue

@@ -315,7 +315,6 @@
    itemCheck(evt, treeId, treeNode) {
      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;
      debugger;
      // 多选
      // this.ztreeObj.checkNode(treeNode, true, false, false);
      let checkedNodes = this.ztreeObj.getCheckedNodes(true);

 src/views/search/components/treeMenu/jsTree/tree.vue

@@ -26,7 +26,11 @@
      >
        <template slot-scope="_">
          <slot :vm="_.vm" :model="_.model">
            <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
            <i
              :class="_.vm.themeIconClasses"
              role="presentation"
              v-if="!_.model.loading"
            ></i>
            <span v-html="_.model[textFieldName]"></span>
          </slot>
        </template>
@@ -48,7 +52,7 @@
    data: { type: Array },
    size: {
      type: String,
      validator: value => ["large", "small"].indexOf(value) > -1
      validator: (value) => ["large", "small"].indexOf(value) > -1,
    },
    showCheckbox: { type: Boolean, default: false },
    wholeRow: { type: Boolean, default: false },
@@ -64,18 +68,18 @@
      type: Object,
      default: function () {
        return {};
      }
      },
    },
    async: { type: Function },
    loadingText: { type: String, default: "Loading..." },
    draggable: { type: Boolean, default: false },
    dragOverBackgroundColor: { type: String, default: "#C9FDC9" },
    klass: String
    klass: String,
  },
  data() {
    return {
      draggedItem: undefined,
      draggedElm: undefined
      draggedElm: undefined,
    };
  },
  computed: {
@@ -85,7 +89,7 @@
        { "tree-default": !this.size },
        { [`tree-default-${this.size}`]: !!this.size },
        { "tree-checkbox-selection": !!this.showCheckbox },
        { [this.klass]: !!this.klass }
        { [this.klass]: !!this.klass },
      ];
    },
    containerClasses() {
@@ -93,7 +97,7 @@
        { "tree-container-ul": true },
        { "tree-children": true },
        { "tree-wholerow-ul": !!this.wholeRow },
        { "tree-no-dots": !!this.noDots }
        { "tree-no-dots": !!this.noDots },
      ];
    },
    sizeHeight() {
@@ -105,7 +109,7 @@
        default:
          return ITEM_HEIGHT_DEFAULT;
      }
    }
    },
  },
  methods: {
    initializeData(items) {
@@ -154,13 +158,13 @@
      let self = this;
      node.addBefore = function (data, selectedNode) {
        let newItem = self.initializeDataItem(data);
        let index = selectedNode.parentItem.findIndex(t => t.id === node.id);
        let index = selectedNode.parentItem.findIndex((t) => t.id === node.id);
        selectedNode.parentItem.splice(index, 0, newItem);
      };
      node.addAfter = function (data, selectedNode) {
        let newItem = self.initializeDataItem(data);
        let index =
          selectedNode.parentItem.findIndex(t => t.id === node.id) + 1;
          selectedNode.parentItem.findIndex((t) => t.id === node.id) + 1;
        selectedNode.parentItem.splice(index, 0, newItem);
      };
      node.addChild = function (data) {
@@ -170,13 +174,13 @@
      };
      node.openChildren = function () {
        node.opened = true;
        self.handleRecursionNodeChildren(node, node => {
        self.handleRecursionNodeChildren(node, (node) => {
          node.opened = true;
        });
      };
      node.closeChildren = function () {
        node.opened = false;
        self.handleRecursionNodeChildren(node, node => {
        self.handleRecursionNodeChildren(node, (node) => {
          node.opened = false;
        });
      };
@@ -223,14 +227,14 @@
      this.$emit("item-click", oriNode, oriItem, e);
    },
    handleSingleSelectItems(oriNode, oriItem) {
      this.handleRecursionNodeChilds(this, node => {
      this.handleRecursionNodeChilds(this, (node) => {
        if (node.model) node.model.selected = false;
      });
      oriNode.model.selected = true;
    },
    handleBatchSelectItems(oriNode, oriItem) {
      console.log('oriNode, oriItem', oriNode, oriItem)
      this.handleRecursionNodeChilds(oriNode, node => {
      console.log("oriNode, oriItem", oriNode, oriItem);
      this.handleRecursionNodeChilds(oriNode, (node) => {
        if (!!node.model) {
          if (!!node.model.disabled) return;
          node.model.selected = oriNode.model.selected;
@@ -251,18 +255,17 @@
      var self = this;
      if (this.async) {
        if (oriParent[0].loading) {
          this.async(oriNode, data => {
          this.async(oriNode, (data) => {
            if (data.length > 0) {
              for (let i in data) {
                if (!data[i].isLeaf) {
                  if (typeof data[i][self.childrenFieldName] !== "object") {
                    data[i][self.childrenFieldName] = [
                      self.initializeLoading()
                      self.initializeLoading(),
                    ];
                  }
                }
                var dataItem = self.initializeDataItem(data[i]);
                debugger
                self.$set(oriParent, i, dataItem);
              }
            } else {
@@ -280,7 +283,7 @@
      this.draggedItem = {
        item: oriItem,
        parentItem: oriNode.parentItem,
        index: oriNode.parentItem.findIndex(t => t.id === oriItem.id)
        index: oriNode.parentItem.findIndex((t) => t.id === oriItem.id),
      };

      this.$emit("item-drag-start", oriNode, oriItem, e);
@@ -312,7 +315,7 @@
          this.draggedItem.item === oriItem ||
          (oriItem[this.childrenFieldName] &&
            oriItem[this.childrenFieldName].findIndex(
              t => t.id === this.draggedItem.item.id
              (t) => t.id === this.draggedItem.item.id
            ) !== -1)
        ) {
          return;
@@ -329,7 +332,7 @@
        });
        this.$emit("item-drop", oriNode, oriItem, draggedItem.item, e);
      }
    }
    },
  },
  created() {
    this.initializeData(this.data);
@@ -341,8 +344,8 @@
    }
  },
  components: {
    TreeItem
  }
    TreeItem,
  },
};
</script>
<style lang="less">