控制轮询

ZZJ

2022-07-15 a3f357e8a60443b74b64c7479113c68eb35ce1f5

 src/pages/cameraAccess/components/TimeSlider.vue

@@ -2,7 +2,11 @@
  <div class="sub-time-box">

    <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>

@@ -18,9 +22,20 @@
        </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}`"

@@ -35,19 +50,19 @@
</template>



<script>

import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider"

import { saveTimeRule, deleteTimeRule } from "@/api/timeRule"

import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider";

import { saveTimeRule, deleteTimeRule } from "@/api/timeRule";



export default {

  name: "TimeSlider",

  components: {

    MultiRangeSlider

    MultiRangeSlider,

  },

  props: {

    type: {

      default: "",

      type: String

    }

      type: String,

    },

  },

  data() {

    return {

@@ -62,29 +77,62 @@
        { 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

    }

      isAdding: false,

    };

  },

  mounted() {

    // window.addEventListener('resize', this.windowSizeChange)

  },

  methods: {

    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

          let newRule = {

            id: "",

            name: "时间段" + this.VideoManageData.TimeRules.length,

            time_rule: this.allDay

          this.isAdding = true;

          let name = "时间段1";



          for (

            let index = this.VideoManageData.TimeRules.length;

            index > 0;

            index--

          ) {

            const sliceIndex =

              this.VideoManageData.TimeRules[index - 1].name.indexOf("时间段");



            if (sliceIndex != -1) {

              const number = +this.VideoManageData.TimeRules[

                index - 1

              ].name.slice(sliceIndex + 3);



              console.log(number);

              console.log(typeof number);

              console.log(typeof NaN);



              if (

                typeof number === "number" &&

                !Number.isNaN(number) &&

                number != 0

              ) {

                console.log("--------------");



                name = "时间段" + (number + 1);



                break;

              }

            }

          }



          this.updateTimeRule(newRule)

          let newRule = {

            id: "",

            name: name,

            time_rule: this.allDay,

          };



          this.updateTimeRule(newRule);

        }

      }

      if (action === "remove") {

@@ -92,60 +140,66 @@
          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) => {

              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) => {

          if (rsp && rsp.success) {

            await this.VideoManageData.getTimeRule()

            this.isAdding = false

            await this.VideoManageData.getTimeRule();

            this.isAdding = false;

            this.$nextTick(() => {

              this.activeTab = this.VideoManageData.TimeRules[this.VideoManageData.TimeRuleSum - 1].id

            })

              this.activeTab =

                this.VideoManageData.TimeRules[

                  this.VideoManageData.TimeRuleSum - 1

                ].id;

            });

          } else {

            this.isAdding = false

            this.isAdding = false;

          }

        })

        .catch(() => {

          this.isAdding = false

        })

          this.isAdding = false;

        });

    },

    tabClick(item) {

      if (this.activeTab === item.id) {

@@ -154,24 +208,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(() => {});

      }

    }

  }

}

    },

  },

};

</script>

<style lang="scss">

.sub-time-box {