添加场景的 时间段的添加编辑删除 加请求字段devid

ZZJ

2022-09-27 f2ef9272ed076bdca33d21b39bcc671e576553b3

添加场景的 时间段的添加编辑删除 加请求字段devid

 src/scripts/httpRequest.ts

@@ -26,6 +26,10 @@
        config.data.devId = sessionStorage.getItem("cameraDevId")
      }

      if (config.url === "/saas/api-s/cameraTimerule/save") {
        config.data.devId = sessionStorage.getItem("cameraDevId")
      }

      //后门
      if (config.url === "/saas/api-d/device/userClusterInfo") {
        config.data.clusterId = ""

 src/store/index.js

@@ -1,21 +1,25 @@
import Vue from "vue";
import Vuex from "vuex";
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    productPay: {},
    newSdk: {},
    devId: ""
  },
  mutations: {
    addProductPay(state, productPay) {
      state.productPay = productPay;
      state.productPay = productPay
    },
    setNewSdk(state, sdk) {
      state.newSdk = sdk;
      state.newSdk = sdk
    },
    setDevId(state, devId) {
      state.devId = devId
    }
  },
  actions: {},
  modules: {},
});
  modules: {}
})

 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自己或子元素时，自动初始化swiper
        observeParents: 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),
    };
      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>
<style lang="scss"></style>

 src/views/hashrate/CameraManage/CameraRules/index.vue

@@ -532,6 +532,7 @@

    // 初始化摄像机信息，父组件调用
    async initCameraData(id, devId) {
      this.$store.commit("setDevId", devId)
      devId ? false : (devId = "")
      getAllTimeRule(devId).then((rsp) => {
        this.VideoManageData.TimeRules = rsp.data.timeRules