国标摄像机信息接口

ZZJ

2022-06-10 58bf48cea61c6c5b4381a4b8ff5b4a39eb4671eb

 src/pages/cameraAccess/components/LinkageRule.vue

@@ -20,14 +20,14 @@
    </div>-->
    <div class="top">
      <p class="task-css">
        <b style="font-size: 14px; line-height: 18px;">场景</b>
        <b style="font-size: 14px; line-height: 18px">场景</b>
      </p>
      <div class="clearfix">
        <slide-scene :sceneData="tableRuleList"></slide-scene>
        <div class="top-right">
          <sysinfo
            v-if="showSysInfo"
            style="margin-top: -10px;"
            style="margin-top: -10px"
            :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
            :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
          />
@@ -45,11 +45,19 @@
      <div class="bottom-right">
        <div class="draw-and-time-box">
          <div class="draw-box">
            <p style="text-align:left;padding: 10px 0px 0px 0px;box-sizing: border-box;">
            <p
              style="
                text-align: left;
                padding: 10px 0px 0px 0px;
                box-sizing: border-box;
              "
            >
              <b style="font-size: 14px">查看区域</b>
            </p>
            <div class="img-box">
              <span class="camera-tip" v-show="swipercanvasData.length == 0 ">暂无区域，请至少选择2个摄像机</span>
              <span class="camera-tip" v-show="swipercanvasData.length == 0"
                >暂无区域，请至少选择2个摄像机</span
              >
              <!-- swiper 展示 -->
              <swiper
                ref="swiper"
@@ -57,8 +65,15 @@
                @slideChange="swiperSlideChange"
                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>
                <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"
@@ -78,24 +93,34 @@
                  ></polygon-canvas>
                </swiper-slide>
              </swiper>
              <div class="swiper-local-prev" v-show="swipercanvasData.length>1">
              <div
                class="swiper-local-prev"
                v-show="swipercanvasData.length > 1"
              >
                <div class="icon-btn" slot="button-prev">
                  <i class="iconfont iconzuo"></i>
                </div>
              </div>
              <div class="swiper-local-next" v-show="swipercanvasData.length>1">
              <div
                class="swiper-local-next"
                v-show="swipercanvasData.length > 1"
              >
                <div class="icon-btn" slot="button-next">
                  <i class="iconfont iconyou1"></i>
                </div>
              </div>
            </div>
          </div>
          <div style="float:left;width:calc(10% - 90px);height:100%;"></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"
            style="
              width: calc(90% + 90px - 576px);
              overflow-x: auto;
              overflow-y: hidden;
            "
          >
            <p style="text-align:left;padding: 10px;box-sizing: border-box">
            <p style="text-align: left; padding: 10px; box-sizing: border-box">
              <b style="font-size: 14px">时间规则</b>
            </p>
            <time-slider ref="timeSlider" :type="'link'" />
@@ -117,10 +142,7 @@
</template>

<script>
import {
  saveLinkScene,
  getLinkSceneRule,
} from '@/api/scene'
import { saveLinkScene, getLinkSceneRule } from "@/api/scene";

import VideoRuleData from "@/Pool/VideoRuleData";
import polygonCanvas from "@/components/canvas";
@@ -136,19 +158,18 @@
    polygonCanvas,
    SceneRule,
    Sysinfo,
    SlideScene
    SlideScene,
  },
  computed: {
    selectedCameraIds() {
      return this.TreeDataPool.selectedNodes;
    }
    },
  },
  data() {
    return {
      loading: false,
      loadingRuleList: false,
      Carmeras: [],
      Camera: new VideoRuleData(),
      tasksTable: {},
      swipercanvasData: [],
      seqNumber: 0,
@@ -158,27 +179,27 @@
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction"
          type: "fraction",
        },
        navigation: {
          nextEl: ".swiper-local-next",
          prevEl: ".swiper-local-prev"
        }
          prevEl: ".swiper-local-prev",
        },
      },
      swiperTaskOption: {
        slidesPerView: 4,
        // spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
          clickable: true,
        },
        navigation: {
          nextEl: ".next-border",
          prevEl: ".pre-border"
        }
          prevEl: ".pre-border",
        },
      },
      showSysInfo: false,
      requestSeq: ""
      requestSeq: "",
    };
  },
  watch: {
@@ -186,26 +207,32 @@
      handler(newVal, oldVal) {
        this.setSwiperData();
      },
      deep: true
    }
      deep: true,
    },
  },

  methods: {
    swiperSlideChange() {
      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
    },
    initCameraData() {
    initCameraData(type) {
      this.$nextTick(() => {
        this.Carmeras = [];
        this.showSysInfo = true;

        this.selectedCameraIds.forEach(cid => {
          this.Carmeras.push(new VideoRuleData(cid));
        });
        if (type === 1) {
          this.selectedCameraIds.forEach((cid) => {
            this.Carmeras.push(new VideoRuleData(cid, true));
          });
        } else {
          this.selectedCameraIds.forEach((cid) => {
            this.Carmeras.push(new VideoRuleData(cid));
          });
        }

        this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
        this.showRules();
      })
      });
    },
    setSwiperData() {
      let swipers = [];
@@ -222,16 +249,15 @@
      this.swipercanvasData = swipers;
    },
    refresh(url, id) {
      this.swipercanvasData.forEach(data => {
      this.swipercanvasData.forEach((data) => {
        if (data.cameraId == id) {
          data.baseImg = url;
        }
      })
      });
      //this.Camera.baseImg = url
    },
    getCanvasData() { },
    getCanvasData() {},
    newUid() {

      let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
      let originChar = "0123456789abcdef";
      let len = originChar.length;
@@ -247,11 +273,10 @@
        let seq = this.newUid();
        this.requestSeq = seq;

        getLinkSceneRule({ cameraIds: this.selectedCameraIds }).then(
          rsp => {
        getLinkSceneRule({ cameraIds: this.selectedCameraIds })
          .then((rsp) => {
            this.loadingRuleList = false;
            if (rsp && rsp.success && seq === this.requestSeq) {

              this.tableRuleList = rsp.data;

              // 统一规则编辑的数据结构
@@ -260,52 +285,54 @@
              }
            }
            // this.TreeDataPool.fetchTreeData();
          }
        ).catch(() => {
          this.loadingRuleList = false;
        });
          })
          .catch(() => {
            this.loadingRuleList = false;
          });
      }
    },

    saveSceneRule(groupRule) {
      const payload = { ...groupRule }
      const payload = { ...groupRule };
      if (!payload.rules) {
        this.$message({
          type: "warning",
          message: "规则参数有误"
          message: "规则参数有误",
        });

        return
        return;
      }

      payload.cameraIds = this.selectedCameraIds;

      saveLinkScene(payload).then(rsp => {
        if (rsp && rsp.success) {
          //this.Camera.update();
          this.initCameraData();
          // this.showRules();
          this.$notify({
            type: "success",
            message: "任务保存成功！"
          });
        } else {
          this.$notify({
      saveLinkScene(payload)
        .then((rsp) => {
          if (rsp && rsp.success) {
            //this.Camera.update();
            this.initCameraData();
            // this.showRules();
            this.$notify({
              type: "success",
              message: "任务保存成功！",
            });
          } else {
            this.$notify({
              type: "error",
              message: rsp.data,
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: rsp.data
            message: "保存失败！",
          });
        }
      }).catch(err => {
        this.$message({
          type: "error",
          message: "保存失败！"
        });
      });
    },
    changeLoading(params) {
      this.loading = params
    }
  }
      this.loading = params;
    },
  },
};
</script>
<style lang="scss">