摄像机管理

ZZJ

2022-04-12 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22

 src/components/subComponents/MultiRangeSlider.vue

@@ -1,6 +1,8 @@
<template>
  <div class="timeRangeSliderBox">
    <canvas :id="mainId" :ref="mainId" width="700px" height="260px">抱歉,您的浏览器不支持canvas!请更换浏览器</canvas>
    <canvas :id="mainId" :ref="mainId" width="700px" height="260px"
      >抱歉,您的浏览器不支持canvas!请更换浏览器</canvas
    >
    <canvas
      :id="`${mainId}Dummy`"
      :ref="`${mainId}Dummy`"
@@ -11,8 +13,13 @@
      @mousedown="mouseDown($event)"
      @mousemove="mousemove($event)"
      @mouseup="mouseup($event)"
    >抱歉,您的浏览器不支持canvas!请更换浏览器</canvas>
    <div class="popup-box" :style="`top:${popPos.y + 10}px;left:${popPos.x - 70}px`" v-if="isPopup">
      >抱歉,您的浏览器不支持canvas!请更换浏览器</canvas
    >
    <div
      class="popup-box"
      :style="`top:${popPos.y + 10}px;left:${popPos.x - 70}px`"
      v-if="isPopup"
    >
      <div>
        <b>开始时间:</b>
        <input
@@ -37,7 +44,7 @@
        <b>:</b>
        <input v-model="changeTime.endMin" type="number" placeholder="分" />
      </div>
      <div style="margin-top:5px;">
      <div style="margin-top: 5px">
        <el-button @click="deleteRange">删除</el-button>
        <el-button @click="cancalPop">取消</el-button>
        <el-button @click="timeAck">确定</el-button>
@@ -49,7 +56,6 @@
<script>
export default {
  mounted() {

    this.initMain();
    this.initMainDummy();
  },
@@ -71,43 +77,43 @@
      isPopup: false,
      popPos: {
        x: "",
        y: ""
        y: "",
      },
      changeTime: {
        startHour: "",
        startMin: "",
        endHour: "",
        endMin: ""
        endMin: "",
      },
      rangeArrBackup: "",
      styleClass: {
        weekTextColor: "",
        minutePerColor: "#cdcdcd",
        minutePerTextColor: "#808080"
      }
        minutePerTextColor: "#808080",
      },
    };
  },
  props: {
    timeData: {
      default: () => { },
      type: Array
      default: () => {},
      type: Array,
    },
    mainId: {
      type: String,
      default: ""
      default: "",
    },
    itemId: {
      type: String,
      default: ""
      default: "",
    },
    itemName: {
      type: String,
      default: ""
      default: "",
    },
    edit: {
      type: Boolean,
      default: false
    }
      default: false,
    },
  },
  watch: {
    changeTime: {
@@ -131,24 +137,27 @@
        }

        if (newVal.startMin > 60) {
          newVal.startMin = 0
          newVal.startMin = 0;
        }
        if (newVal.startMin < 0) {
          newVal.startMin = 60
          newVal.startMin = 60;
        }
        if (newVal.endMin > 60) {
          newVal.endMin = 0
          newVal.endMin = 0;
        }
        if (newVal.endMin < 0) {
          newVal.endMin = 0
          newVal.endMin = 0;
        }

        if (parseInt(newVal.startHour) == parseInt(newVal.endHour) && parseInt(newVal.startMin) > parseInt(newVal.endMin)) {
          newVal.startMin = 0
        if (
          parseInt(newVal.startHour) == parseInt(newVal.endHour) &&
          parseInt(newVal.startMin) > parseInt(newVal.endMin)
        ) {
          newVal.startMin = 0;
        }
      },
      deep: true
    }
      deep: true,
    },
  },
  methods: {
    timeAck() {
@@ -157,14 +166,24 @@
      let perM = perH / 60;

      let tempRangeInfo = this.rangeArr[rangeInfo.ownedIndex].rangeInfo;
      tempRangeInfo.maxX = this.changeTime.endHour * perH + this.changeTime.endMin * perM + 50.5;
      tempRangeInfo.minX = this.changeTime.startHour * perH + this.changeTime.startMin * perM + 50.5;
      tempRangeInfo.maxX =
        this.changeTime.endHour * perH + this.changeTime.endMin * perM + 50.5;
      tempRangeInfo.minX =
        this.changeTime.startHour * perH +
        this.changeTime.startMin * perM +
        50.5;
      tempRangeInfo.width = tempRangeInfo.maxX - tempRangeInfo.minX;
      for (let i = 0; i < this.gridArr.length; i++) {
        let num = 0;
        for (let j = 0; j < this.rangeArr.length; j++) {
          if (this.gridArr[i].posIndex === this.rangeArr[j].rangeInfo.posIndex) {
            this.gridArr[i].rangeList.splice(num, 1, this.rangeArr[j].rangeInfo);
          if (
            this.gridArr[i].posIndex === this.rangeArr[j].rangeInfo.posIndex
          ) {
            this.gridArr[i].rangeList.splice(
              num,
              1,
              this.rangeArr[j].rangeInfo
            );
            num++;
          }
        }
@@ -310,9 +329,11 @@
          return;
        }
        this.actRange.rangeInfo.minX = tempMinxX;
        this.actRange.rangeInfo.maxX = tempMinxX + this.actRange.rangeInfo.width;
        this.actRange.rangeInfo.maxX =
          tempMinxX + this.actRange.rangeInfo.width;
        this.currentPointX = e.offsetX;
        let tempRangeList = this.gridArr[this.actRange.rangeInfo.posIndex].rangeList;
        let tempRangeList =
          this.gridArr[this.actRange.rangeInfo.posIndex].rangeList;
        this.redraw();
        // console.log("move-ed");
      } else if (
@@ -327,17 +348,17 @@
          if (
            this.actRange.rangeInfo.minX <= limit.limitLeft ||
            this.actRange.rangeInfo.minX + this.actRange.rangeInfo.width >=
            limit.limitRight
              limit.limitRight
          ) {
            return;
          }
          let tempX
          let tempX;
          if (this.x < 50) {
            tempX = 50
            tempX = 50;
          } else if (this.x > 650) {
            tempX = 650
            tempX = 650;
          } else {
            tempX = this.x
            tempX = this.x;
          }
          let temp = tempX - this.currentPointX > 0 ? true : false;
          let newWith = 0;
@@ -366,8 +387,8 @@
              width: 10,
              height: 14,
              posIndex: this.actGrid.posIndex,
              ownedIndex: 0
            }
              ownedIndex: 0,
            },
          };
          let actRangeIndex = 0;
          for (let i = 0; i < tempRangeList.length; i++) {
@@ -395,9 +416,8 @@
              }
            }
          }
          this.actGrid.rangeList = this.gridArr[
            this.actGrid.posIndex
          ].rangeList;
          this.actGrid.rangeList =
            this.gridArr[this.actGrid.posIndex].rangeList;
          this.actRange = this.rangeArr[this.actRangeIndex];
          this.isCreate = true;
        }
@@ -412,7 +432,7 @@
        if (
          (this.actRange.rangeInfo.minX <= limit.limitLeft ||
            this.actRange.rangeInfo.minX + this.actRange.rangeInfo.width >=
            limit.limitRight) &&
              limit.limitRight) &&
          this.noLimit > 5
        ) {
          this.isResizeRight = false;
@@ -441,7 +461,8 @@
            return;
          }
          this.actRange.rangeInfo.maxX = this.x > 650 ? 650 : this.x;
          this.actRange.rangeInfo.width = this.actRange.rangeInfo.maxX - this.actRange.rangeInfo.minX;
          this.actRange.rangeInfo.width =
            this.actRange.rangeInfo.maxX - this.actRange.rangeInfo.minX;
          this.noLimit++;
          this.redraw();
          return;
@@ -486,7 +507,7 @@
      let behind = this.rangeArr[this.actRangeIndex + 1];
      let obj = {
        limitLeft: 50,
        limitRight: 650
        limitRight: 650,
      };
      if (before === undefined && behind === undefined) {
        return obj;
@@ -579,7 +600,7 @@
          width: 600,
          height: 14,
          posIndex: i,
          rangeList: []
          rangeList: [],
        };
        this.gridArr.push(tempGrid);
        let timePer = 600 / 24;
@@ -629,7 +650,7 @@
            width: diffRange,
            height: 14,
            posIndex: i,
            ownedIndex: this.rangeArr.length
            ownedIndex: this.rangeArr.length,
          };
          rang[j].rangeInfo = rangeInfo;
          this.gridArr[i].rangeList.push(rangeInfo);
@@ -655,10 +676,10 @@
        minuteEnd = minuteEnd < 10 ? "0" + minuteEnd : minuteEnd;
        let textStart = `${hourStart < 10 ? "0" + hourStart : hourStart}:${
          minutetStart === 60 ? "00" : minutetStart
          }`;
        }`;
        let textEnd = `${hourEnd < 10 ? "0" + hourEnd : hourEnd}:${
          minuteEnd === 60 ? "00" : minuteEnd
          }`;
        }`;
        let startPointX = rangeInfo.minX - 14;
        let startPointY = rangeInfo.maxY + 10;
        let endPointX = rangeInfo.maxX - 13;
@@ -684,7 +705,7 @@
          day: i + 1,
          time_range: (() => {
            let range = [];
            this.rangeArr.forEach(item => {
            this.rangeArr.forEach((item) => {
              if (item.rangeInfo.posIndex === i) {
                let rangeInfo = item.rangeInfo;
                let hourStart = parseInt((rangeInfo.minX - 50.5) / (600 / 24));
@@ -702,23 +723,23 @@
                minuteEnd = minuteEnd < 10 ? "0" + minuteEnd : minuteEnd;
                range.push({
                  start: hourStart + ":" + minutetStart,
                  end: hourEnd + ":" + minuteEnd
                  end: hourEnd + ":" + minuteEnd,
                });
              }
            });
            return range;
          })()
          })(),
        });
      }

      let obj = {
        id: this.itemId,
        name: this.itemName,
        time_rule: timeRule
        timeRule: timeRule,
      };
      this.$emit("range-update", obj);
    }
  }
    },
  },
};
</script>