修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/cameraAccess/components/LinkageRule.vue

@@ -1,17 +1,13 @@
<template>
  <div class="s-linkage-rules">
    <div class="top">
    <!-- <div class="top">
      <p style="text-align:left;margin-bottom: 14px;">
        <b style="font-size: 14px;line-height: 18px;">已选算法</b>
        <b style="font-size: 14px;line-height: 18px;">场景</b>
      </p>

      <div class="clearfix">
      <div class="clearfix" style="min-width:1570px;">
        <div class="slide-scene">
          <span class="task-tip" v-if="tableRuleList.length == 0 ">暂无算法，请在独立规则中选择算法</span>
          <slide-scene :sceneData="tableRuleList"></slide-scene>
        </div>
        <!-- <slide-scene :sceneData="Camera.rules"></slide-scene> -->
        <!-- 系统信息 -->
        <div class="top-right">
          <sysinfo
            v-if="showSysInfo"
@@ -21,18 +17,47 @@
          />
        </div>
      </div>
    </div>-->
    <div class="top">
      <p class="task-css">
        <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"
            :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
            :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
          />
          <!-- <sysinfo
            :showRealPoll="cameraType === 'camera'"
            :ShowLocalVedio="cameraType === 'dataStack'"
            v-if="showSysInfo"
            style="margin-top:-10px"
          />-->
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="devide"></div>
      <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"
@@ -40,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"
@@ -57,27 +89,38 @@
                    :currentCameraId="data.cameraId"
                    @changeLoading="changeLoading"
                    @fromCanvas="getCanvasData"
                    @refresh="refresh"
                  ></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'" />
@@ -91,6 +134,7 @@
          :tableRuleList="tableRuleList"
          :onSaveScene="saveSceneRule"
          @delete-rule="showRules"
          v-loading="loadingRuleList"
        ></scene-rule>
      </div>
    </div>
@@ -98,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";
@@ -117,32 +158,18 @@
    polygonCanvas,
    SceneRule,
    Sysinfo,
    SlideScene
    SlideScene,
  },
  computed: {
    selectedCameraIds() {
      let ids = [];
      if (this.TreeDataPool.treeActiveName == 'dataStack') {
        if (this.TreeDataPool.checkedLocalVedio.length > 0) {
          ids = this.TreeDataPool.checkedLocalVedio.map(i => {
            return i.id;
          })

        }
      } else {
        if (this.TreeDataPool.selectedNodes.length > 0) {
          ids = this.TreeDataPool.selectedNodes;
        }
      }

      return ids;
    }
      return this.TreeDataPool.selectedNodes;
    },
  },
  data() {
    return {
      loading: false,
      loadingRuleList: false,
      Carmeras: [],
      Camera: new VideoRuleData(),
      tasksTable: {},
      swipercanvasData: [],
      seqNumber: 0,
@@ -152,26 +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
      showSysInfo: false,
      requestSeq: "",
    };
  },
  watch: {
@@ -179,31 +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.loading = false;
        this.showSysInfo = true
        if (this.TreeDataPool.treeActiveName == 'dataStack') {
          this.TreeDataPool.checkedLocalVedio.forEach(camera => {
            this.Carmeras.push(new VideoRuleData(camera.id));
        this.showSysInfo = true;

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

        this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
        this.showRules();
      })
      });
    },
    setSwiperData() {
      let swipers = [];
@@ -219,15 +248,35 @@
      }
      this.swipercanvasData = swipers;
    },
    getCanvasData() { },
    refresh(url, id) {
      this.swipercanvasData.forEach((data) => {
        if (data.cameraId == id) {
          data.baseImg = url;
        }
      });
      //this.Camera.baseImg = url
    },
    getCanvasData() {},
    newUid() {
      let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
      let originChar = "0123456789abcdef";
      let len = originChar.length;
      return originStr.replace(/x/g, function (match) {
        return originChar.charAt(Math.floor(Math.random() * len));
      });
    },
    showRules() {
      this.tableRuleList = [];

      if (this.selectedCameraIds.length > 0) {
        getLinkSceneRule({ cameraIds: this.selectedCameraIds }).then(
          rsp => {
            if (rsp && rsp.success) {
        this.loadingRuleList = true;
        let seq = this.newUid();
        this.requestSeq = seq;

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

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

    },

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

        return;
      }

      payload.cameraIds = this.selectedCameraIds;

      saveLinkScene(payload).then(rsp => {
        if (rsp && rsp.success) {
          //this.Camera.update();
          this.initCameraData();
          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: "保存失败！" + err.data
        });
      });
    },
    changeLoading(params) {
      this.loading = params
    }
  }
      this.loading = params;
    },
  },
};
</script>
<style lang="scss">
.s-linkage-rules {
  width: 100%;
  //height: 100%;
  padding: 13px 0 20px;
  //padding: 13px 0 20px;
  position: relative;
  .devide{
  .devide {
    height: 10px;
    background: #E9EBF2;
    background: #e9ebf2;
  }
  .top {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    top: 0;
    .swiper-box {
      height: 100%;
      float: left;
      width: 48%;
      width: 46%;
      margin-top: -10px;
      position: relative;
    }
    .swiper-container {
      position: initial;
      min-width: 472px;
      width: 80%;

      // height: 124px;
      width: 86%;
    }
    .swiper-slide {
      position: relative;
@@ -339,10 +398,6 @@
          backdrop-filter: blur(1px) brightness(100%);
          display: none;
        }

        // @media screen and(max-width: 1280px) {
        //   max-width: 110px;
        // }
        @media screen and(max-width: 1440px) {
          max-width: 110px;
        }
@@ -386,8 +441,14 @@
      float: right;
      width: 54%;
      height: 144px;
      .card-box{
        width: 54%!important;
      .card-box {
        width: 54% !important;
      }
      .eCharts-box {
        width: 45%;
        canvas {
          width: 98% !important;
        }
      }
    }
    .task-css {
@@ -398,7 +459,7 @@

  .bottom {
    width: 100%;
    
    margin-bottom: 20px;
    .bottom-side {
      height: 100%;
      width: 250px;
@@ -551,13 +612,6 @@
  }
  .add-btn:hover {
    color: #2249b4;
  }
  .task-tip {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #cccccc;
    margin-top: 10%;
    margin-left: 38%;
  }
}
</style>