From c746783c4f570f9bdbe2d62b22bda22308b0dfba Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期一, 05 十二月 2022 15:27:35 +0800
Subject: [PATCH] 修复断流数据展示的内容
---
src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue | 248 +++++++++++++++++++++++++------------------------
1 files changed, 126 insertions(+), 122 deletions(-)
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue b/src/views/hashrate/CameraManage/CameraRules/components/TimeSlider.vue
index 166d1cc..3b0863a 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,7 +44,7 @@
:key="item.id"
:class="{ active: activeTabObj.id === item.id }"
>
- <div class="tab" @click="chooseTab(item)">
+ <div class="tab" @click="chooseTab(item)" @dblclick="chooseEdit(item)">
{{ item.name }}
</div>
<div class="iconfont del" @click="handleTabsEdit(item.id, 'remove')">
@@ -79,7 +64,7 @@
</div>
</div>
<div class="control">
- <div class="button editBtn" @click="edit = !edit">
+ <div class="button editBtn" @click="editOrSave">
{{ edit ? "閿佸畾" : "缂栬緫" }}
</div>
<div class="button addBtn" @click="handleTabsEdit('', 'add')">
@@ -99,29 +84,29 @@
</TimeSliderItem>
</div>
- <div class="btns">
+ <!-- <div class="btns">
<div class="cancelBtn button" @click="close">鍙栨秷</div>
<div class="confirmBtn button" @click="save">纭畾</div>
- </div>
+ </div> -->
</div>
</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 {
@@ -139,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: {
@@ -147,82 +132,102 @@
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: "鍙栨秷"
+ })
+ .then(({ value }) => {
+ let repeat = false
+ this.VideoManageData.TimeRules.forEach((item) => {
+ if (item.name === value) {
+ repeat = true
+ }
+ })
+ if (repeat) {
+ this.$notify({
+ message: "鍚嶇О涓嶈兘閲嶅",
+ type: "warning"
+ })
+ return
+ }
+
+ this.activeTabObj.name = value
+ this.save()
+ })
+ .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
+ this.edit = true
})
.catch(() => {
this.$notify({
type: "warning",
- message: rsp.msg,
- });
- this.isAdding = false;
- });
+ message: rsp.msg
+ })
+ this.isAdding = false
+ })
}
}
if (action === "remove") {
@@ -230,61 +235,57 @@
this.$notify({
title: "璀﹀憡",
message: "姝ゆ椂闂存姝ｅ湪浣跨敤涓紝鏃犳硶鍒犻櫎锛�",
- type: "warning",
- });
+ type: "warning"
+ })
- return;
+ return
}
- this.$confirm(
- "姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヨ鍒�, 鎵�鍏宠仈鐨勪换鍔″皢浼氬け鏁堬紝鏄惁缁х画?",
- {
- center: true,
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- }
- )
+ this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ヨ鍒�, 鎵�鍏宠仈鐨勪换鍔″皢浼氬け鏁堬紝鏄惁缁х画?", {
+ center: true,
+ confirmButtonText: "纭畾",
+ 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
},
updateTimeRule(rule) {
saveTimeRule(rule)
.then(async (rsp) => {
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) {
@@ -293,24 +294,24 @@
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)
@@ -318,24 +319,28 @@
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.$notify({
- type: "warning",
- message: rsp.msg,
- });
- this.isAdding = false;
- });
+ this.isAdding = false
+ })
},
- },
-};
+ editOrSave() {
+ this.edit = !this.edit
+ // console.log(this.edit, "this.edit")
+ if (!this.edit) {
+ // 閿佸畾
+ this.save()
+ }
+ }
+ }
+}
</script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
.TimeSlider {
position: relative;
position: fixed;
@@ -371,7 +376,7 @@
padding: 0 20px;
margin-top: 20px;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
text-align: center;
line-height: 32px;
font-size: 14px;
@@ -427,7 +432,7 @@
position: absolute;
padding-bottom: 13px;
padding-right: 18px;
- top: 16px;
+ top: 12px;
left: -34px;
cursor: pointer;
border-bottom: 1px solid #e9ebee;
@@ -440,7 +445,7 @@
.swiper-next-border {
position: absolute;
- top: 16px;
+ top: 12px;
right: -34px;
padding-bottom: 13px;
padding-left: 18px;
@@ -468,7 +473,7 @@
.btns {
position: absolute;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
align-items: center;
left: 0;
right: 0;
@@ -500,5 +505,4 @@
}
</style>
-<style lang="scss">
-</style>
\ No newline at end of file
+<style lang="scss"></style>
--
Gitblit v1.8.0