From 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 12 四月 2022 17:50:21 +0800
Subject: [PATCH] 摄像机管理
---
src/components/subComponents/MultiRangeSlider.vue | 127 ++++++++++++++++++++++++-----------------
1 files changed, 74 insertions(+), 53 deletions(-)
diff --git a/src/components/subComponents/MultiRangeSlider.vue b/src/components/subComponents/MultiRangeSlider.vue
index 5bab8e5..36a2cfc 100644
--- a/src/components/subComponents/MultiRangeSlider.vue
+++ b/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>
--
Gitblit v1.8.0