From da4f50e1008b815067cf47352747bf6d23b8b043 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期四, 27 一月 2022 13:58:54 +0800
Subject: [PATCH] bug修复
---
src/pages/cameraAccess/components/TimeSlider.vue | 481 ++++++++++++++++++++++++++++-------------------------
1 files changed, 256 insertions(+), 225 deletions(-)
diff --git a/src/pages/cameraAccess/components/TimeSlider.vue b/src/pages/cameraAccess/components/TimeSlider.vue
index c3b4a8e..14cc70b 100644
--- a/src/pages/cameraAccess/components/TimeSlider.vue
+++ b/src/pages/cameraAccess/components/TimeSlider.vue
@@ -1,226 +1,257 @@
-<template>
- <div class="sub-time-box">
- <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>
-</template>
-
-<script>
-import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider";
-import { saveTimeRule, deleteTimeRule } from "@/api/timeRule";
-
-export default {
- name: "TimeSlider",
- components: {
- MultiRangeSlider
- },
- props: {
- type: {
- default: "",
- type: String
- }
- },
- data() {
- return {
- 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" }] }
- ]
- };
- },
- mounted() {
- // window.addEventListener('resize', this.windowSizeChange)
- },
- methods: {
- handleTabsEdit(tabId, action) {
- let tabs = this.VideoManageData.TimeRules;
- if (action === "add") {
- let newRule = {
- id: "",
- name: "鏃堕棿娈�" + this.VideoManageData.TimeRules.length,
- time_rule: this.allDay
- };
- this.updateTimeRule(newRule);
- }
- if (action === "remove") {
- 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(rsp => {
- if (rsp && rsp.success) {
- this.VideoManageData.getTimeRule();
- this.activeTab = rsp.data.id;
- }
- });
- },
- 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(() => { });
- }
- }
- }
-};
-</script>
-<style lang='scss'>
-.sub-time-box {
- padding-right: 30px;
- position: relative;
- /* height: calc(100% - 32px);
- width: 100%;
- padding: 5px; */
- /* box-sizing: border-box; */
- /* border-right: 1px solid #ccc;
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc; */
- .btn-control {
- position: absolute;
- margin-top: -27px;
- top: 0;
- right: 30px;
- display: flex;
- i {
- font-size: 16px;
- }
- }
- .el-tabs__item {
- border-right-color: #e2e2e2 !important;
- border-left-color: #e2e2e2 !important;
- border-top-color: #e2e2e2 !important;
- }
- .el-tab-pane {
- height: calc(100% - 50px);
- }
- // .el-tabs__new-tab {
- // margin: 15px 19px 9px 10px;
- // }
- .el-tabs {
- height: 100%;
- }
-
- .el-tabs__header {
- margin: 0px !important;
- height: 45px !important;
- border-top: 1px solid #e2e2e2 !important;
- border-bottom: 1px solid #e2e2e2 !important;
- background-color: #fff !important;
- .is-active {
- border-bottom-color: #fff !important;
- }
- .el-tabs__item {
- line-height: 45px !important;
- }
- }
- .el-tabs__content {
- overflow: auto !important;
- height: calc(100% - 51px) !important;
- padding: 13px 0px !important;
- }
- .el-tabs__new-tab {
- visibility: hidden;
- // width: 130px;
- }
- // .el-tabs-add {
- // position: relative;
- // display: flex;
- // width: 70px;
- // top: 32px;
- // left: 88%;
- // z-index: 1;
- // }
- // .el-tabs-edit {
- // position: relative;
- // display: -webkit-box;
- // display: -ms-flexbox;
- // display: flex;
- // width: 70px;
- // top: 47px;
- // left: 79%;
- // z-index: 1;
- // }
-}
+<template>
+ <div class="sub-time-box">
+ <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>
+</template>
+
+<script>
+import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider";
+import { saveTimeRule, deleteTimeRule } from "@/api/timeRule";
+
+export default {
+ name: "TimeSlider",
+ components: {
+ MultiRangeSlider,
+ },
+ props: {
+ type: {
+ default: "",
+ type: String,
+ },
+ },
+ data() {
+ return {
+ 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" }] },
+ ],
+ };
+ },
+ mounted() {
+ // window.addEventListener('resize', this.windowSizeChange)
+ },
+ methods: {
+ handleTabsEdit(tabId, action) {
+ let tabs = this.VideoManageData.TimeRules;
+ if (action === "add") {
+ let newRule = {
+ id: "",
+ name: "鏃堕棿娈�" + this.VideoManageData.TimeRules.length,
+ time_rule: this.allDay,
+ };
+ this.updateTimeRule(newRule);
+ }
+ if (action === "remove") {
+ console.log();
+
+ 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((rsp) => {
+ if (rsp && rsp.success) {
+ this.VideoManageData.getTimeRule();
+ this.activeTab = rsp.data.id;
+ }
+ });
+ },
+ 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(() => {});
+ }
+ },
+ },
+};
+</script>
+<style lang='scss'>
+.sub-time-box {
+ padding-right: 30px;
+ position: relative;
+ /* height: calc(100% - 32px);
+ width: 100%;
+ padding: 5px; */
+ /* box-sizing: border-box; */
+ /* border-right: 1px solid #ccc;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #ccc; */
+ .btn-control {
+ position: absolute;
+ margin-top: -27px;
+ top: 0;
+ right: 30px;
+ display: flex;
+ i {
+ font-size: 16px;
+ }
+ }
+ .el-tabs__item {
+ border-right-color: #e2e2e2 !important;
+ border-left-color: #e2e2e2 !important;
+ border-top-color: #e2e2e2 !important;
+ }
+ .el-tab-pane {
+ height: calc(100% - 50px);
+ }
+ // .el-tabs__new-tab {
+ // margin: 15px 19px 9px 10px;
+ // }
+ .el-tabs {
+ height: 100%;
+ }
+
+ .el-tabs__header {
+ margin: 0px !important;
+ height: 45px !important;
+ border-top: 1px solid #e2e2e2 !important;
+ border-bottom: 1px solid #e2e2e2 !important;
+ background-color: #fff !important;
+ .is-active {
+ border-bottom-color: #fff !important;
+ }
+ .el-tabs__item {
+ line-height: 45px !important;
+ }
+ }
+ .el-tabs__content {
+ overflow: auto !important;
+ height: calc(100% - 51px) !important;
+ padding: 13px 0px !important;
+ }
+ .el-tabs__new-tab {
+ visibility: hidden;
+ // width: 130px;
+ }
+ // .el-tabs-add {
+ // position: relative;
+ // display: flex;
+ // width: 70px;
+ // top: 32px;
+ // left: 88%;
+ // z-index: 1;
+ // }
+ // .el-tabs-edit {
+ // position: relative;
+ // display: -webkit-box;
+ // display: -ms-flexbox;
+ // display: flex;
+ // width: 70px;
+ // top: 47px;
+ // left: 79%;
+ // z-index: 1;
+ // }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0