<template>
|
<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')"
|
>
|
<i class="el-icon-edit"></i>
|
编辑
|
</span>
|
<span v-else class="add-btn" @click="handleTabsEdit('', 'lock')">
|
<i class="el-icon-lock"></i>
|
锁定
|
</span>
|
</div>
|
<div class="el-tabs-add">
|
<span class="add-btn" @click="handleTabsEdit('', 'add')">
|
<i class="iconfont iconhebingxingzhuang"></i>
|
新增
|
</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>
|
<multi-range-slider
|
:timeData="JSON.parse(item.time_rule)"
|
:mainId="`${item.id}_${type}`"
|
:itemId="item.id"
|
:itemName="item.name"
|
:edit="editSlider"
|
@range-update="updateTimeRule"
|
></multi-range-slider>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<div class="TimeSlider" v-else>
|
<div class="title">时间段</div>
|
<div class="close iconfont" @click="close()"></div>
|
|
<div class="swiperArea">
|
<swiper :options="swiperOption">
|
<swiper-slide
|
v-for="item in VideoManageData.TimeRules"
|
:key="item.id"
|
:class="{ active: activeTabObj.id === item.id }"
|
>
|
<div
|
class="tab"
|
@click="chooseTab(item)"
|
@dblclick="chooseEdit(item)"
|
>
|
{{ item.name }}
|
</div>
|
<div class="iconfont del" @click="handleTabsEdit(item.id, 'remove')">
|

|
</div>
|
</swiper-slide>
|
</swiper>
|
<div class="swiper-pre-border">
|
<div class="icon-btn" slot="button-prev">
|
<i class="iconfont"></i>
|
</div>
|
</div>
|
<div class="swiper-next-border">
|
<div class="icon-btn" slot="button-next">
|
<i class="iconfont"></i>
|
</div>
|
</div>
|
</div>
|
<div class="control">
|
<div class="button editBtn" @click="edit = !edit">
|
{{ edit ? "锁定" : "编辑" }}
|
</div>
|
<div class="button addBtn" @click="handleTabsEdit('', 'add')">
|
新增时间段
|
</div>
|
</div>
|
|
<div class="sliderArea" v-if="activeTabObj">
|
<TimeSliderItem
|
v-for="(item, index) in activeTabObj.time_rule"
|
:key="index"
|
:Timedata="item"
|
v-model="item.time_range"
|
:day="item.day - 1"
|
:edit="edit"
|
>
|
</TimeSliderItem>
|
</div>
|
|
<div class="btns">
|
<div class="cancelBtn button" @click="close">取消</div>
|
<div class="confirmBtn button" @click="save">确定</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";
|
|
export default {
|
name: "TimeSlider",
|
components: {
|
MultiRangeSlider,
|
TimeSliderItem,
|
},
|
props: {
|
type: {
|
default: "",
|
type: String,
|
},
|
},
|
data() {
|
return {
|
activeTabObj: {},
|
edit: false,
|
|
editSlider: false,
|
activeTab: "",
|
activeIndex: 0,
|
cavasLength: 800,
|
allDay: [
|
{ day: 1, time_range: [{ start: "00:00", end: "24:00" }] },
|
{ day: 2, time_range: [{ start: "00:00", end: "24:00" }] },
|
{ day: 3, time_range: [{ start: "00:00", end: "24:00" }] },
|
{ 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" }] },
|
],
|
isAdding: false,
|
swiperOption: {
|
slidesPerView: 6,
|
spaceBetween: 0,
|
pagination: {
|
el: ".swiper-pagination",
|
clickable: true,
|
},
|
navigation: {
|
nextEl: ".swiper-next-border",
|
prevEl: ".swiper-pre-border",
|
},
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
observeParents: true, //修改swiper的父元素时，自动初始化swiper
|
},
|
};
|
},
|
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),
|
};
|
},
|
methods: {
|
chooseTab(data) {
|
this.activeTabObj = {};
|
|
this.$nextTick(() => {
|
this.activeTabObj = {
|
id: data.id,
|
name: data.name,
|
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;
|
}
|
});
|
console.log("aaa");
|
console.log(repeat);
|
if (repeat) {
|
this.$notify({
|
message: "名称不能重复",
|
type: "warning",
|
});
|
return;
|
}
|
|
this.activeTabObj.name = value;
|
this.save();
|
})
|
.catch(() => {});
|
},
|
|
handleTabsEdit(tabId, action) {
|
let tabs = this.VideoManageData.TimeRules;
|
if (action === "add") {
|
if (this.isAdding) {
|
return;
|
} else {
|
this.isAdding = true;
|
let newRule = {
|
id: "",
|
name: "时间段" + this.VideoManageData.TimeRules.length,
|
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 = {};
|
this.activeTabObj = {
|
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.isAdding = false;
|
})
|
.catch(() => {
|
this.$notify({
|
type: "warning",
|
message: rsp.msg,
|
});
|
this.isAdding = false;
|
});
|
}
|
}
|
if (action === "remove") {
|
if (this.VideoManageData.TimeRules.length == 1) {
|
this.$notify({
|
title: "警告",
|
message: "此时间段正在使用中，无法删除！",
|
type: "warning",
|
});
|
|
return;
|
}
|
|
this.$confirm("此操作将删除该规则, 所关联的任务将会失效，是否继续?", {
|
center: true,
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
})
|
.then(() => {
|
deleteTimeRule({ id: tabId }).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.VideoManageData.getTimeRule();
|
// this.VideoManageData.TimeRules.splice(2, 1)
|
this.activeTab = this.VideoManageData.TimeRules[0].id;
|
this.$notify({
|
type: "success",
|
message: "删除成功!",
|
});
|
}
|
});
|
})
|
.catch(() => {});
|
}
|
if (action == "edit") {
|
this.editSlider = true;
|
}
|
if (action == "lock") {
|
this.editSlider = false;
|
}
|
},
|
windowSizeChange() {
|
let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth;
|
this.cavasLength = timeSlideWidth;
|
console.log("时间组件宽度：", timeSlideWidth);
|
},
|
updateTimeRule(rule) {
|
saveTimeRule(rule)
|
.then(async (rsp) => {
|
if (rsp && rsp.success) {
|
await this.VideoManageData.getTimeRule();
|
this.isAdding = false;
|
this.activeTab = rsp.data.id;
|
} else {
|
this.isAdding = false;
|
}
|
})
|
.catch(() => {
|
this.isAdding = false;
|
});
|
},
|
tabClick(item) {
|
if (this.activeTab === item.id) {
|
this.$prompt("", "修改名称", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputValue: item.name,
|
inputPattern: /^[\S]{1,16}$/,
|
inputErrorMessage: "名称不能包含空格",
|
})
|
.then(({ value }) => {
|
this.updateTimeRule({
|
id: item.id,
|
name: value,
|
time_rule: JSON.parse(item.time_rule),
|
});
|
this.$notify({
|
type: "success",
|
message: "时间规则名称修改成功",
|
});
|
})
|
.catch(() => {});
|
}
|
},
|
close() {
|
this.$emit("close");
|
},
|
save() {
|
saveTimeRule(this.activeTabObj)
|
.then(async (rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功",
|
});
|
await this.VideoManageData.getTimeRule();
|
}
|
this.isAdding = false;
|
})
|
.catch(() => {
|
this.isAdding = false;
|
});
|
},
|
},
|
};
|
</script>
|
<style lang='scss' scoped>
|
.TimeSlider {
|
position: relative;
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
margin-top: -430px;
|
margin-left: -400px;
|
width: 800px;
|
height: 860px;
|
background-color: #fff;
|
z-index: 2;
|
|
.title {
|
box-sizing: border-box;
|
padding: 20px;
|
height: 64px;
|
border-bottom: 1px solid #e9ebee;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 12px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.control {
|
box-sizing: border-box;
|
padding: 0 20px;
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
line-height: 32px;
|
font-size: 14px;
|
|
.editBtn {
|
margin-right: 10px;
|
width: 60px;
|
height: 32px;
|
color: #fff;
|
background: #0064ff;
|
}
|
|
.addBtn {
|
box-sizing: border-box;
|
width: 102px;
|
height: 32px;
|
color: #0064ff;
|
border: 1px solid #0064ff;
|
}
|
}
|
|
.swiperArea {
|
position: relative;
|
margin: 20px 60px;
|
|
.swiper-slide {
|
display: flex;
|
align-items: center;
|
height: 46px;
|
border-bottom: 1px solid #e9ebee;
|
|
&.active {
|
.tab {
|
color: #0064ff;
|
}
|
border-bottom: 2px solid #0064ff;
|
}
|
|
.tab {
|
margin: 0 12px 0 24px;
|
font-size: 14px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.iconfont {
|
font-size: 12px;
|
color: #dbdbdb;
|
}
|
}
|
|
.swiper-pre-border {
|
position: absolute;
|
padding-bottom: 13px;
|
padding-right: 18px;
|
top: 16px;
|
left: -34px;
|
cursor: pointer;
|
border-bottom: 1px solid #e9ebee;
|
|
i {
|
font-size: 16px;
|
color: rgb(229, 229, 229);
|
}
|
}
|
|
.swiper-next-border {
|
position: absolute;
|
top: 16px;
|
right: -34px;
|
padding-bottom: 13px;
|
padding-left: 18px;
|
cursor: pointer;
|
border-bottom: 1px solid #e9ebee;
|
|
i {
|
font-size: 16px;
|
color: rgb(229, 229, 229);
|
}
|
}
|
|
.swiper-button-disabled {
|
cursor: not-allowed;
|
i {
|
color: rgb(245, 245, 245);
|
}
|
}
|
|
.del {
|
cursor: pointer;
|
}
|
}
|
|
.btns {
|
position: absolute;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 72px;
|
border-top: 1px solid #e9ebee;
|
text-align: center;
|
line-height: 32px;
|
|
.cancelBtn {
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0064ff;
|
font-size: 14px;
|
color: #0064ff;
|
}
|
|
.confirmBtn {
|
margin-left: 10px;
|
margin-right: 20px;
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0064ff;
|
font-size: 14px;
|
color: #fff;
|
background-color: #0064ff;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
</style>
|
