From f2ef9272ed076bdca33d21b39bcc671e576553b3 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期二, 27 九月 2022 11:30:04 +0800
Subject: [PATCH] 添加场景的 时间段的添加编辑删除 加请求字段devid
---
src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue | 218 ++++++++++++++++++++++++------------------------------
1 files changed, 97 insertions(+), 121 deletions(-)
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue b/src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue
index 5d4415e..abc0e5f 100644
--- a/src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue
@@ -2,11 +2,7 @@
<div class="sub-time-box" v-if="false">
<div class="btn-control">
<div class="el-tabs-edit">
- <span
- v-if="!editSlider"
- class="add-btn"
- @click="handleTabsEdit('', 'edit')"
- >
+ <span v-if="!editSlider" class="add-btn" @click="handleTabsEdit('', 'edit')">
<i class="el-icon-edit"></i>
缂栬緫
</span>
@@ -22,20 +18,9 @@
</span>
</div>
</div>
- <el-tabs
- v-model="activeTab"
- type="border-card"
- editable
- @edit="handleTabsEdit"
- >
- <el-tab-pane
- v-for="item in VideoManageData.TimeRules"
- :key="item.id"
- :name="item.id"
- >
- <span slot="label" @click="tabClick(item)" style="width: 100px">{{
- item.name
- }}</span>
+ <el-tabs v-model="activeTab" type="border-card" editable @edit="handleTabsEdit">
+ <el-tab-pane v-for="item in VideoManageData.TimeRules" :key="item.id" :name="item.id">
+ <span slot="label" @click="tabClick(item)" style="width: 100px">{{ item.name }}</span>
<multi-range-slider
:timeData="JSON.parse(item.time_rule)"
:mainId="`${item.id}_${type}`"
@@ -59,11 +44,7 @@
:key="item.id"
:class="{ active: activeTabObj.id === item.id }"
>
- <div
- class="tab"
- @click="chooseTab(item)"
- @dblclick="chooseEdit(item)"
- >
+ <div class="tab" @click="chooseTab(item)" @dblclick="chooseEdit(item)">
{{ item.name }}
</div>
<div class="iconfont del" @click="handleTabsEdit(item.id, 'remove')">
@@ -111,21 +92,21 @@
</template>
<script>
-import TimeSliderItem from "@/views/hashrate/CameraManage/CameraRules/components/TimeSliderItem";
-import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider";
-import { saveTimeRule, deleteTimeRule } from "@/api/timeRule";
+import TimeSliderItem from "@/views/hashrate/CameraManage/CameraRules/components/TimeSliderItem"
+import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider"
+import { saveTimeRule, deleteTimeRule } from "@/api/timeRule"
export default {
name: "TimeSlider",
components: {
MultiRangeSlider,
- TimeSliderItem,
+ TimeSliderItem
},
props: {
type: {
default: "",
- type: String,
- },
+ type: String
+ }
},
data() {
return {
@@ -143,7 +124,7 @@
{ day: 4, time_range: [{ start: "00:00", end: "24:00" }] },
{ day: 5, time_range: [{ start: "00:00", end: "24:00" }] },
{ day: 6, time_range: [{ start: "00:00", end: "24:00" }] },
- { day: 7, time_range: [{ start: "00:00", end: "24:00" }] },
+ { day: 7, time_range: [{ start: "00:00", end: "24:00" }] }
],
isAdding: false,
swiperOption: {
@@ -151,109 +132,103 @@
spaceBetween: 0,
pagination: {
el: ".swiper-pagination",
- clickable: true,
+ clickable: true
},
navigation: {
nextEl: ".swiper-next-border",
- prevEl: ".swiper-pre-border",
+ prevEl: ".swiper-pre-border"
},
observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- observeParents: true, //淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- },
- };
+ observeParents: true //淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ }
+ }
},
created() {
this.activeTabObj = this.VideoManageData.TimeRules && {
id: this.VideoManageData.TimeRules[0].id,
name: this.VideoManageData.TimeRules[0].name,
- time_rule: JSON.parse(this.VideoManageData.TimeRules[0].time_rule),
- };
+ time_rule: JSON.parse(this.VideoManageData.TimeRules[0].time_rule)
+ }
},
methods: {
chooseTab(data) {
- this.activeTabObj = {};
+ this.activeTabObj = {}
this.$nextTick(() => {
this.activeTabObj = {
id: data.id,
name: data.name,
- time_rule: JSON.parse(data.time_rule),
- };
- });
+ time_rule: JSON.parse(data.time_rule)
+ }
+ })
},
chooseEdit(data) {
this.$prompt("璇疯緭鍏ユ柊鐨勬椂闂存鍚嶇О", "鎻愮ず", {
confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
+ cancelButtonText: "鍙栨秷"
})
.then(({ value }) => {
- let repeat = false;
+ let repeat = false
this.VideoManageData.TimeRules.forEach((item) => {
if (item.name === value) {
- repeat = true;
+ repeat = true
}
- });
- console.log("aaa");
- console.log(repeat);
+ })
+ console.log("aaa")
+ console.log(repeat)
if (repeat) {
this.$notify({
message: "鍚嶇О涓嶈兘閲嶅",
- type: "warning",
- });
- return;
+ type: "warning"
+ })
+ return
}
- this.activeTabObj.name = value;
- this.save();
+ this.activeTabObj.name = value
+ this.save()
})
- .catch(() => {});
+ .catch(() => {})
},
handleTabsEdit(tabId, action) {
- let tabs = this.VideoManageData.TimeRules;
+ let tabs = this.VideoManageData.TimeRules
if (action === "add") {
if (this.isAdding) {
- return;
+ return
} else {
- this.isAdding = true;
+ this.isAdding = true
let newRule = {
id: "",
name: "鏃堕棿娈�" + this.VideoManageData.TimeRules.length,
- time_rule: this.allDay,
- };
- this.activeTabObj = {};
+ time_rule: this.allDay
+ }
+ this.activeTabObj = {}
saveTimeRule(newRule)
.then(async (rsp) => {
if (rsp && rsp.success) {
this.$notify({
type: "success",
- message: "鏂板鎴愬姛",
- });
- await this.VideoManageData.getTimeRule();
- this.activeTabObj = {};
+ message: "鏂板鎴愬姛"
+ })
+ await this.VideoManageData.getTimeRule()
+ this.activeTabObj = {}
this.activeTabObj = {
- id: this.VideoManageData.TimeRules[
- this.VideoManageData.TimeRules.length - 1
- ].id,
- name: this.VideoManageData.TimeRules[
- this.VideoManageData.TimeRules.length - 1
- ].name,
+ id: this.VideoManageData.TimeRules[this.VideoManageData.TimeRules.length - 1].id,
+ name: this.VideoManageData.TimeRules[this.VideoManageData.TimeRules.length - 1].name,
time_rule: JSON.parse(
- this.VideoManageData.TimeRules[
- this.VideoManageData.TimeRules.length - 1
- ].time_rule
- ),
- };
+ this.VideoManageData.TimeRules[this.VideoManageData.TimeRules.length - 1].time_rule
+ )
+ }
}
- this.isAdding = false;
+ this.isAdding = false
})
.catch(() => {
this.$notify({
type: "warning",
- message: rsp.msg,
- });
- this.isAdding = false;
- });
+ message: rsp.msg
+ })
+ this.isAdding = false
+ })
}
}
if (action === "remove") {
@@ -261,58 +236,59 @@
this.$notify({
title: "璀﹀憡",
message: "姝ゆ椂闂存姝ｅ湪浣跨敤涓紝鏃犳硶鍒犻櫎锛�",
- type: "warning",
- });
+ type: "warning"
+ })
- return;
+ return
}
this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ヨ鍒�, 鎵�鍏宠仈鐨勪换鍔″皢浼氬け鏁堬紝鏄惁缁х画?", {
center: true,
confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
+ cancelButtonText: "鍙栨秷"
})
.then(() => {
- deleteTimeRule({ id: tabId }).then((rsp) => {
+ deleteTimeRule({ id: tabId, devId: this.$store.state.devId }).then((rsp) => {
if (rsp && rsp.success) {
- this.VideoManageData.getTimeRule();
+ this.VideoManageData.getTimeRule()
// this.VideoManageData.TimeRules.splice(2, 1)
- this.activeTab = this.VideoManageData.TimeRules[0].id;
+ this.activeTab = this.VideoManageData.TimeRules[0].id
this.$notify({
type: "success",
- message: "鍒犻櫎鎴愬姛!",
- });
+ message: "鍒犻櫎鎴愬姛!"
+ })
}
- });
+ })
})
- .catch(() => {});
+ .catch(() => {})
}
if (action == "edit") {
- this.editSlider = true;
+ this.editSlider = true
}
if (action == "lock") {
- this.editSlider = false;
+ this.editSlider = false
}
},
windowSizeChange() {
- let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth;
- this.cavasLength = timeSlideWidth;
- console.log("鏃堕棿缁勪欢瀹藉害锛�", timeSlideWidth);
+ let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth
+ this.cavasLength = timeSlideWidth
+ console.log("鏃堕棿缁勪欢瀹藉害锛�", timeSlideWidth)
},
updateTimeRule(rule) {
saveTimeRule(rule)
.then(async (rsp) => {
+ console.log(rsp, "rrr1333331rrrrrrrrrrrrr")
if (rsp && rsp.success) {
- await this.VideoManageData.getTimeRule();
- this.isAdding = false;
- this.activeTab = rsp.data.id;
+ await this.VideoManageData.getTimeRule()
+ this.isAdding = false
+ this.activeTab = rsp.data.id
} else {
- this.isAdding = false;
+ this.isAdding = false
}
})
.catch(() => {
- this.isAdding = false;
- });
+ this.isAdding = false
+ })
},
tabClick(item) {
if (this.activeTab === item.id) {
@@ -321,45 +297,46 @@
cancelButtonText: "鍙栨秷",
inputValue: item.name,
inputPattern: /^[\S]{1,16}$/,
- inputErrorMessage: "鍚嶇О涓嶈兘鍖呭惈绌烘牸",
+ inputErrorMessage: "鍚嶇О涓嶈兘鍖呭惈绌烘牸"
})
.then(({ value }) => {
this.updateTimeRule({
id: item.id,
name: value,
- time_rule: JSON.parse(item.time_rule),
- });
+ time_rule: JSON.parse(item.time_rule)
+ })
this.$notify({
type: "success",
- message: "鏃堕棿瑙勫垯鍚嶇О淇敼鎴愬姛",
- });
+ message: "鏃堕棿瑙勫垯鍚嶇О淇敼鎴愬姛"
+ })
})
- .catch(() => {});
+ .catch(() => {})
}
},
close() {
- this.$emit("close");
+ this.$emit("close")
},
save() {
saveTimeRule(this.activeTabObj)
.then(async (rsp) => {
+ console.log(rsp, "rrr112222rrrrrrrrrrrrr")
if (rsp && rsp.success) {
this.$notify({
type: "success",
- message: "淇濆瓨鎴愬姛",
- });
- await this.VideoManageData.getTimeRule();
+ message: "淇濆瓨鎴愬姛"
+ })
+ await this.VideoManageData.getTimeRule()
}
- this.isAdding = false;
+ this.isAdding = false
})
.catch(() => {
- this.isAdding = false;
- });
- },
- },
-};
+ this.isAdding = false
+ })
+ }
+ }
+}
</script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
.TimeSlider {
position: relative;
position: fixed;
@@ -524,5 +501,4 @@
}
</style>
-<style lang="scss">
-</style>
\ No newline at end of file
+<style lang="scss"></style>
--
Gitblit v1.8.0