chenzhen2 2 лет назад
Родитель
Сommit
c75938ac54

+ 217 - 0
src/views/envmonitor/components/ManualWork/LeaveDailog.vue

@@ -0,0 +1,217 @@
+<template>
+  <van-dialog
+    v-model:show="isShowLeaveDailog"
+    class="dialog-width"
+    :show-confirm-button="false"
+    :show-cancel-button="false"
+  >
+    <div class="air-dialog-content">
+      <div class="dialog-top">
+        <img
+          class="img-yellow"
+          v-if="leaveDetail.img"
+          :src="parseImgUrl('page-officehome', leaveDetail.img)"
+          alt=""
+        />
+      </div>
+      <div class="leave-title">工作辛苦了!</div>
+      <div class="leave-popup-body">
+        <div
+          class="body-item"
+          v-for="(item, idx) in leaveDetail.textObj"
+          :key="idx"
+        >
+          <van-icon
+            name="passed"
+            style="color: #07c160; margin-right: 8px"
+            v-if="item.status === 'ok'"
+          />
+          <span class="text-status" v-if="item.status === 'go'"></span>
+          <span class="text-status grey" v-if="item.status === 'grey'"></span>
+          <span>{{ item.text }}</span>
+        </div>
+      </div>
+      <div class="dialog-btns" @click="closeDailog">
+        <span>隐藏</span>
+      </div>
+    </div>
+  </van-dialog>
+</template>
+    
+    <script lang="ts">
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { Loading, Dialog, Toast } from "vant";
+import { parseImgUrl } from "@/utils";
+
+export default defineComponent({
+  props: {
+    isShowLeaveDailog: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  components: {
+    VanLoading: Loading,
+    [Dialog.Component.name]: Dialog.Component,
+  },
+  setup(props, contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      isShowLeaveDailog: props.isShowLeaveDailog,
+      leaveDetail: {
+        // img: parseImgUrl("ipdImages", "icon-handshake.svg"),
+        textObj: [
+          {
+            text: "已为您取消当前的预约时间",
+            status: "ok",
+          },
+          {
+            text: "系统将自动调整设备状态",
+            status: "ok",
+          },
+          {
+            text: "感谢您的预约使用",
+            status: "ok",
+          },
+        ],
+      },
+      closeDailog() {
+        contx.emit("closeDailog");
+      },
+    });
+    watch(
+      props,
+      (newProps: any) => {
+        proxyData.isShowLeaveDailog = newProps.isShowLeaveDailog;
+      },
+      {
+        deep: false,
+        immediate: true,
+      }
+    );
+    onMounted(() => {});
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.dialog-width {
+  width: 300px !important;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+}
+.leave-popup-body {
+  display: flex;
+  flex-direction: column;
+  margin-left: 36px;
+  margin-top: 20px;
+  margin-right: 10px;
+
+  &.air-popup-body {
+    flex-direction: row;
+    margin: 0;
+    justify-content: center;
+  }
+
+  .body-item {
+    padding-top: 10px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 21px;
+    color: #c4c4c4;
+
+    .text-status {
+      width: 16px;
+      height: 16px;
+      background: #f0da21;
+      border-radius: 100%;
+      display: inline-block;
+      margin-right: 16px;
+
+      &.grey {
+        background: #f3f3f3;
+      }
+    }
+  }
+}
+
+.air-dialog-content {
+  position: relative;
+  width: 100%;
+  height: 360px;
+
+  .dialog-top {
+    position: relative;
+    height: 70px;
+    background: #f3f3f3;
+
+    .img-yellow {
+      background: #ffe823;
+    }
+
+    img {
+      box-sizing: border-box;
+      border-radius: 50%;
+      position: absolute;
+      left: 50%;
+      width: 70px;
+      height: 70px;
+      padding: 17px;
+      transform: translateX(-50%);
+      top: 15px;
+    }
+  }
+
+  .leave-title {
+    display: block;
+    text-align: center;
+    font-family: Black Han Sans;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 17px;
+    line-height: 21px;
+    margin-top: 20px;
+    padding-top: 14px;
+    align-items: center;
+    text-align: center;
+  }
+}
+
+.dialog-btns {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  text-align: center;
+  margin: 0 auto;
+  width: 88px;
+  height: 46px;
+  line-height: 1;
+  color: #4d5262;
+  background: #ffffff;
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 15px rgba(0, 0, 0, 0.15);
+  border-radius: 25px;
+  cursor: pointer;
+
+  span {
+    height: 46px;
+    line-height: 46px;
+    display: inline-block;
+  }
+}
+</style>
+    

+ 666 - 0
src/views/envmonitor/components/ManualWork/WorkConfig.vue

@@ -0,0 +1,666 @@
+<template>
+  <div class="scene-config">
+    <!--开放办公区-->
+    <div class="time-box" :class="timerText.classColor">
+      <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" />
+      <div class="time-text">
+        <span>{{ timerText.text }}</span>
+        <span>{{ timerText.timer }}</span>
+      </div>
+      <div
+        class="time-btn"
+        :class="timerText.showDel ? 'time-btn-small' : ''"
+        @click="triggerWork"
+      >
+        <span> {{ timerText.btnText }}</span>
+      </div>
+    </div>
+    <div class="time-del" v-if="timerText.showDel" @click="myLeaving">
+      <img :src="parseImgUrl('page-officehome', 'goOffWork.svg')" alt="" />
+      <div class="del-text">
+        <span>我要</span>
+        <span>离开</span>
+      </div>
+    </div>
+  </div>
+  <!--加班点击我要离开触发-->
+  <leave-dailog
+    :isShowLeaveDailog="isShowLeaveDailog"
+    v-if="isShowLeaveDailog"
+    @closeDailog="closeLeavDailog"
+  >
+  </leave-dailog>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watch,
+  getCurrentInstance,
+} from "vue";
+import { useRouter } from "vue-router";
+import {
+  formatDate,
+  formatDateStr,
+  formateTimeContinuous,
+  formatTimerStr,
+  getRelNowTime,
+  getWeekDate,
+  parseImgUrl,
+} from "@/utils";
+import { UserActionTypes } from "@/store/modules/user/action-types";
+import { useStore } from "@/store";
+import { saveBatchCustomScene } from "@/apis/envmonitor";
+// import { Dialog } from "vant";
+import LeaveDailog from "@/views/envmonitor/components/ManualWork/LeaveDailog.vue";
+
+export default defineComponent({
+  props: {
+    scenarioArr: {
+      type: Array,
+      default: () => [],
+    },
+    workkArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    LeaveDailog,
+  },
+  setup(props, contx) {
+    const proxyGlobal: any = getCurrentInstance();
+    let router: any = useRouter();
+    let timerText: any = {
+      text: "",
+      timer: "", // 工作时间
+      btnText: "",
+      showDel: false, // 是否展示我要离开按钮
+      classColor: "grey",
+    };
+    let text: any = "";
+    const store = useStore();
+    const delTimeArr: any = [];
+    let customSceneList: any = [];
+    let workkArr: any = [];
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      leaveBtnFlag: false,
+      scenarioArr: props.scenarioArr,
+      workkArr: props.workkArr,
+      forcedOverTimeFlag: false, // 强制加班标记 false:不需要强制加班
+      onSubmit(values: any) {
+        router.push({ path: "/choice-project" });
+      },
+      // 触发加班按钮
+      triggerWork() {
+        contx.emit("triggerWork");
+      },
+      timerText: timerText,
+      text: text,
+      // 处理时间和第二天和未来连续的问题
+      formateTimeContinuous(
+        index: any = 1,
+        startTime: any,
+        endTime: any,
+        type: any = 1
+      ) {
+        let data: any = proxyData.workkArr;
+        proxyData.text = "";
+        return formateTimeContinuous(
+          index,
+          startTime,
+          endTime,
+          type,
+          data,
+          proxyData
+        );
+      },
+      // 判断当前时间在不在加班时间里面
+      beforeWorkTime(data: any, nowTime: any) {
+        let flag: any = true; // 是否在所有加班时间之前
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].startTime < nowTime) {
+            flag = false;
+          }
+        }
+        return flag;
+      },
+      // 当前时间是否在所有加班时间之后
+      afterWorkTime(data: any, nowTime: any) {
+        let flag: any = true; // 是否在所有加班时间之前
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].endTime > nowTime) {
+            flag = false;
+          }
+        }
+        return flag;
+      },
+      // 查询时间段的范围
+      checkWorkTime(data: any, nowTime: any) {
+        let obj: any = {
+          type: 0, // type=1 当前时间在所有加班时间之前 type=2 当前时间在所有加班时间后 type=3 当前时间在某段加班时间 type=4 当前时间在加班之外,在某一段中间
+          startTime: 0,
+          endTime: 0,
+        };
+        if (proxyData.beforeWorkTime(data, nowTime)) {
+          obj.type = 1;
+        } else if (proxyData.afterWorkTime(data, nowTime)) {
+          obj.type = 2;
+        } else {
+          let flag = true;
+          for (let i = 0; i < data.length; i++) {
+            if (nowTime >= data[i].startTime && nowTime <= data[i].endTime) {
+              obj.startTime = data[i].startTime;
+              obj.endTime = data[i].endTime;
+              obj.type = 3;
+              flag = false;
+              break;
+            }
+          }
+          if (flag) {
+            obj.type = 4;
+          }
+        }
+        return obj;
+      },
+      // 格式化日期
+      delTimeArr: delTimeArr,
+      customSceneList: customSceneList, // 当前日期的加班
+      formateWorkTime() {
+        // debugger;
+        let data: any = proxyData.workkArr;
+        let nowDate: any = formatDate("YYYY-MM-DD");
+        for (let i = 0; i < data.length; i++) {
+          let date: any = formatDateStr(data[i].date);
+          let cusStartTime: any = data[i].cusStartTime;
+          let cusEndTime: any = data[i].cusEndTime;
+          let customSceneList: any = data[i]?.customSceneList ?? [];
+          let nowTime: any = getRelNowTime();
+          let week: any = getWeekDate(new Date(date).getDay());
+          if (date === nowDate) {
+            // isActive = true;
+            week = "今天";
+          }
+          // console.log("nowTime===" + nowTime);
+          if (date === nowDate) {
+            proxyData.customSceneList = customSceneList;
+            // debugger
+            // 1.当天没有服务定制时间和加班时间
+            /**a.未来有服务定制和加班**/
+            // 2.当天有服务定制时间无加班时间
+            // 当天在服务定制之内+加班+和未来的时间连续
+            // a.在服务定制之内
+            // b.已过了服务定制和1相同处理
+            // 3.当天有服务定制和加班时间
+            // a.在服务定制之内,并和加班时间不连着
+            // b.在服务定制之内,并和加班连续
+            // c.在加班时间之内,并和后面加班时间连续
+            // d.在加班时间之内,并且和后面加班不连续
+            // e.不在服务定制之内,也不在加班时间内,但是当天和未来都有预约时间
+            /**f.不在服务定制之内,也不在加班时间内,但是当天没有预约时间,未来有预约加班 */
+
+            let startTime: any = "";
+            let endTime: any = "";
+            if ((!cusStartTime || !cusEndTime) && !customSceneList.length) {
+              // 查找最近的一段预约数据
+              let btnObj: any = proxyData.formateTimeContinuous(
+                0,
+                startTime,
+                endTime,
+                2
+              );
+              if (btnObj && btnObj.text) {
+                proxyData.timerText.text = `已预约(${btnObj.text})`;
+                proxyData.timerText.timer =
+                  formatTimerStr(btnObj.startTime) +
+                  "~" +
+                  formatTimerStr(btnObj.endTime);
+              } else {
+                proxyData.timerText.text = "请选择工作时间段";
+                proxyData.timerText.timer = "将自动开启办公服务";
+              }
+              proxyData.timerText.classColor = "grey";
+              proxyData.timerText.btnText = "预约时间";
+              proxyData.timerText.showDel = false;
+              proxyData.forcedOverTimeFlag = true;
+            } else if (cusStartTime && cusEndTime && !customSceneList.length) {
+              if (nowTime >= cusStartTime && nowTime <= cusEndTime) {
+                proxyData.timerText.text = "工作时间";
+                proxyData.timerText.timer =
+                  formatTimerStr(cusStartTime) +
+                  "~" +
+                  formatTimerStr(cusEndTime);
+                proxyData.timerText.classColor = "yellow";
+                proxyData.timerText.btnText = "预约延时";
+                proxyData.timerText.showDel = false;
+                proxyData.forcedOverTimeFlag = false;
+              } else {
+                let btnObj: any = proxyData.formateTimeContinuous(
+                  0,
+                  startTime,
+                  endTime,
+                  2
+                );
+                if (btnObj && btnObj.text) {
+                  proxyData.timerText.text = `已预约(${btnObj.text})`;
+                  proxyData.timerText.timer =
+                    formatTimerStr(btnObj.startTime) +
+                    "~" +
+                    formatTimerStr(btnObj.endTime);
+                } else {
+                  proxyData.timerText.text = "请选择工作时间段";
+                  proxyData.timerText.timer = "将自动开启办公服务";
+                }
+                proxyData.timerText.classColor = "grey";
+                proxyData.timerText.btnText = "预约时间";
+                proxyData.timerText.showDel = false;
+                proxyData.forcedOverTimeFlag = true;
+              }
+            } else {
+              if (
+                cusStartTime &&
+                cusEndTime &&
+                nowTime >= cusStartTime &&
+                nowTime <= cusEndTime
+              ) {
+                // debugger
+                startTime = cusStartTime;
+                endTime = cusEndTime;
+                customSceneList.map((item: any) => {
+                  if (endTime === item.startTime) {
+                    endTime = item.endTime;
+                  }
+                });
+                /**
+                 * 需要补加上和未来时间连续的问题
+                 */
+
+                let btnObj: any = proxyData.formateTimeContinuous(
+                  1,
+                  startTime,
+                  endTime,
+                  1
+                );
+                proxyData.timerText.text = `工作时间`;
+                proxyData.timerText.timer =
+                  formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
+                if (btnObj && btnObj.text) {
+                  proxyData.timerText.text = `工作时间(今日~${btnObj.text})`;
+                  proxyData.timerText.timer =
+                    formatTimerStr(btnObj.startTime) +
+                    "~" +
+                    formatTimerStr(btnObj.endTime);
+                }
+                proxyData.timerText.classColor = "yellow";
+                proxyData.timerText.btnText = "预约延时";
+                proxyData.timerText.showDel = false;
+                proxyData.forcedOverTimeFlag = false;
+              } else {
+                let obj: any = proxyData.checkWorkTime(
+                  customSceneList,
+                  nowTime
+                );
+                if (obj.type === 3) {
+                  startTime = obj.startTime;
+                  endTime = obj.endTime;
+                  customSceneList.map((item: any) => {
+                    let oldTimeStart: any = startTime;
+                    let oldTimeEnd: any = endTime;
+                    // debugger
+                    if (
+                      startTime === item.startTime &&
+                      endTime === item.endTime
+                    ) {
+                      // proxyData.delTimeArr.push(item);
+                    } // 点击我要离开的时候需要删除的数据
+                    if (oldTimeEnd === item.startTime) {
+                      endTime = item.endTime;
+                      // proxyData.delTimeArr.push(item);
+                    }
+                  });
+                  if (cusStartTime && cusEndTime && nowTime < cusStartTime) {
+                    // 在服务定制时间之前的时候需要处理连续时间的问题
+                    if (endTime === cusStartTime) {
+                      endTime = cusEndTime;
+                    }
+                    customSceneList.map((item: any) => {
+                      if (endTime === item.startTime) {
+                        endTime = item.endTime;
+                      }
+                    });
+                  }
+                  /**
+                   * 需要补加上和未来时间连续的问题
+                   */
+                  let btnObj: any = proxyData.formateTimeContinuous(
+                    1,
+                    startTime,
+                    endTime,
+                    1
+                  );
+                  // debugger
+                  proxyData.timerText.text = `工作时间`;
+                  proxyData.timerText.timer =
+                    formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
+                  if (btnObj && btnObj.text) {
+                    proxyData.timerText.text = `工作时间~${btnObj.text}`;
+                    proxyData.timerText.timer =
+                      formatTimerStr(btnObj.startTime) +
+                      "~" +
+                      formatTimerStr(btnObj.endTime);
+                  }
+                  proxyData.timerText.classColor = "yellow";
+                  proxyData.timerText.btnText = "预约延时";
+                  proxyData.timerText.showDel = true;
+                  proxyData.forcedOverTimeFlag = false;
+                } else {
+                  let btnObj: any = proxyData.formateTimeContinuous(
+                    0,
+                    startTime,
+                    endTime,
+                    2
+                  );
+                  if (
+                    btnObj &&
+                    btnObj.text &&
+                    btnObj.startTime &&
+                    btnObj.endTime
+                  ) {
+                    proxyData.timerText.text = `已预约(${btnObj.text})`;
+                    proxyData.timerText.timer =
+                      formatTimerStr(btnObj.startTime) +
+                      "~" +
+                      formatTimerStr(btnObj.endTime);
+                  } else {
+                    proxyData.timerText.text = "请选择工作时间段";
+                    proxyData.timerText.timer = "将自动开启办公服务";
+                  }
+                  proxyData.timerText.classColor = "grey";
+                  proxyData.timerText.btnText = "预约时间";
+                  proxyData.timerText.showDel = false;
+                  proxyData.forcedOverTimeFlag = true;
+                }
+              }
+            }
+            // debugger
+            // 记录开灯标记
+            contx.emit("setForceOverTimeFlag", proxyData.forcedOverTimeFlag);
+          }
+        }
+      },
+      // 时间拼接
+      timeJoin(customSceneList: any, nowTime: any) {
+        let startTime: any = 0;
+        let endTime: any = 0;
+        let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
+        if (obj.type === 3) {
+          startTime = obj.startTime;
+          endTime = obj.endTime;
+          customSceneList.map((item: any) => {
+            let oldTimeStart: any = startTime;
+            let oldTimeEnd: any = endTime;
+            // debugger
+            if (startTime === item.startTime && endTime === item.endTime) {
+              // proxyData.delTimeArr.push(item);
+            } // 点击我要离开的时候需要删除的数据
+            if (oldTimeEnd === item.startTime) {
+              endTime = item.endTime;
+              // proxyData.delTimeArr.push(item);
+            }
+          });
+
+          /**
+           * 需要补加上和未来时间连续的问题
+           */
+          proxyData.timerText.text = "工作时间";
+          proxyData.timerText.timer =
+            formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
+          proxyData.timerText.classColor = "yellow";
+          proxyData.timerText.btnText = "预约延时";
+          proxyData.timerText.showDel = true;
+          proxyData.forcedOverTimeFlag = false;
+        } else {
+          customSceneList.map((item: any) => {
+            if (nowTime < item.startTime) {
+              let oldTimeStart: any = startTime;
+              let oldTimeEnd: any = endTime;
+              if (item.startTime < startTime) {
+                startTime = item.startTime;
+                endTime = item.endTime;
+              } else if (endTime === item.startTime) {
+                endTime = item.endTime;
+              }
+            }
+          });
+          /**
+           *需要补加上和未来时间连续的问题
+           */
+          if (startTime && endTime) {
+            proxyData.timerText.text = "已预约(今日)";
+            proxyData.timerText.timer =
+              formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
+            proxyData.timerText.classColor = "grey";
+            proxyData.timerText.btnText = "预约时间";
+            proxyData.timerText.showDel = false;
+            proxyData.forcedOverTimeFlag = true;
+          } else {
+            proxyData.timerText.text = "请选择工作时间段";
+            proxyData.timerText.timer = "将自动开启办公服务";
+            proxyData.timerText.classColor = "grey";
+            proxyData.timerText.btnText = "预约时间";
+            proxyData.timerText.showDel = false;
+            proxyData.forcedOverTimeFlag = true;
+          }
+        }
+      },
+      // 格式化需要删除的数据
+      formatDataDel() {
+        proxyData.delTimeArr = [];
+        let customSceneList: any = proxyData.customSceneList;
+        let nowTime: any = getRelNowTime();
+        let startTime: any = 0;
+        let endTime: any = 0;
+        let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
+        if (obj.type === 3) {
+          startTime = obj.startTime;
+          endTime = obj.endTime;
+          customSceneList.map((item: any) => {
+            let oldTimeEnd: any = endTime;
+            if (startTime === item.startTime && endTime === item.endTime) {
+              item.type = 1;
+              proxyData.delTimeArr.push(item);
+            } // 点击我要离开的时候需要删除的数据
+            if (oldTimeEnd === item.startTime) {
+              endTime = item.endTime;
+              item.type = 1;
+              proxyData.delTimeArr.push(item);
+            }
+          });
+        }
+      },
+      // 我要离开
+      myLeaving() {
+        proxyData.formatDataDel();
+        // console.log("删除了=====");
+        // console.log(proxyData.delTimeArr);
+        proxyData.leaveBtnFlag = true;
+        // 取消加班
+        proxyData.saveBatchCustomScene();
+      },
+      // 取消加班记录
+      saveBatchCustomScene() {
+        // proxyGlobal.proxy.$loadingStart(0);
+        proxyData.openLeavDailog();
+        saveBatchCustomScene(proxyData.delTimeArr)
+          .then((res) => {
+            proxyData.leaveBtnFlag = false;
+            // console.log(res);
+            // proxyGlobal.proxy.$loadinngEnd();
+          })
+          .catch(() => {
+            proxyData.leaveBtnFlag = false;
+            // proxyGlobal.proxy.$loadinngEnd();
+          });
+      },
+      isShowLeaveDailog: false,
+      openLeavDailog() {
+        proxyData.isShowLeaveDailog = true;
+      },
+      closeLeavDailog() {
+        proxyData.isShowLeaveDailog = false;
+      },
+    });
+    watch(
+      props,
+      (newProps: any) => {
+        proxyData.scenarioArr = newProps.scenarioArr;
+        proxyData.workkArr = newProps.workkArr;
+        if (proxyData.workkArr && proxyData.workkArr.length) {
+          proxyData.formateWorkTime();
+        }
+      },
+      {
+        deep: true,
+        immediate: true,
+      }
+    );
+    onMounted(() => {
+      // proxyData.formateWorkTime();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/comMedia.scss";
+.scene-config {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 15px;
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
+  border-radius: 25px;
+  .grey {
+    background: rgba(159, 183, 205, 0.15) !important;
+  }
+  .yellow {
+    background: rgba(206, 159, 39, 0.4);
+  }
+  .time-box {
+    position: relative;
+    // width: 69%;
+    flex: 2.4;
+    height: 100%;
+    line-height: 70px;
+    background: rgba(206, 159, 39, 0.4);
+    // opacity: 0.4;
+    border-radius: 16px;
+    img {
+      display: inline-block;
+      vertical-align: middle;
+      width: 20px;
+      height: 20px;
+      margin-left: 10px;
+    }
+    .time-text {
+      display: inline-block;
+      vertical-align: middle;
+      padding-left: 10px;
+      span {
+        display: block;
+        &:nth-child(1) {
+          font-family: "Montserrat";
+          font-style: normal;
+          font-weight: 500;
+          font-size: 12px;
+          line-height: 20px;
+          color: #4d5262;
+        }
+        &:nth-child(2) {
+          font-family: "Montserrat";
+          padding-top: 5px;
+          font-style: normal;
+          font-weight: 500;
+          font-size: 15px;
+          line-height: 20px;
+          color: #1f2429;
+        }
+      }
+    }
+    .time-btn {
+      position: absolute;
+      // padding-top: 9px;
+      right: 4px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-block;
+      width: 98px;
+      // width: 64px;
+      height: 58px;
+      line-height: 20px;
+      background: #ffffff;
+      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
+        0px 4px 10px rgba(0, 0, 0, 0.07);
+      border-radius: 12px;
+      span {
+        position: absolute;
+        padding: 0 4px;
+        width: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        display: block;
+        font-size: 13px;
+        // line-height: 16px;
+        text-align: center;
+        color: #000000;
+      }
+    }
+    .time-btn-small {
+      width: 45px;
+    }
+  }
+
+  .time-del {
+    // width: 27%;
+    padding-top: 14px;
+    flex: 1;
+    margin-left: 10px;
+    background: #f1f4f8;
+    border-radius: 16px;
+    text-align: center;
+    img {
+      display: inline-block;
+      vertical-align: middle;
+      width: 20px;
+      height: 20px;
+      // margin-left: 10px;
+    }
+    .del-text {
+      display: inline-block;
+      vertical-align: middle;
+      padding-left: 10px;
+      //   padding-top: 9px;
+      span {
+        display: block;
+        font-size: 13px;
+        line-height: 20px;
+        text-align: center;
+        color: #000000;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+</style>

Разница между файлами не показана из-за своего большого размера
+ 1334 - 0
src/views/envmonitor/components/ManualWork/index.vue


+ 32 - 12
src/views/envmonitor/index.vue

@@ -10,13 +10,12 @@
     }"
   >
     <div class="main-left">
-      <div class="left-top">
-        <div
-          class="logo-box"
+      <div class="left-top" 
           @touchstart="gtouchstart($event)"
           @touchmove="gtouchmove()"
-          @touchend="showDeleteButton"
-        >
+          @touchend="showDeleteButton">
+        <div
+          class="logo-box">
           <img class="logo-icon" v-if="logImg" :src="logImg" alt="" />
           <img
             class="logo-icon"
@@ -137,11 +136,11 @@
       <div
         class="work-btn"
         v-if="
-          (roomType === '开放' && isWork && controlMode !== 1) ||
+          (roomType === '开放' && isWork) ||
           (roomType === '会议室' && scenarioArr && scenarioArr.length)
         "
       >
-        <!-- {{roomType}} -->
+        <!--自动控制的加班 start-->
         <work-config
           v-if="roomType === '开放' && isWork && controlMode !== 1"
           :scenarioArr="scenarioArr"
@@ -149,6 +148,16 @@
           @triggerWork="triggerWork"
           @setForceOverTimeFlag="setForceOverTimeFlag"
         ></work-config>
+
+        <!--手动控制的加班 start-->
+        <manual-work
+          v-if="roomType === '开放' && isWork && controlMode === 1"
+          :scenarioArr="scenarioArr"
+          :workkArr="workkArr"
+          @triggerWork="triggerWork"
+          @setForceOverTimeFlag="setForceOverTimeFlag"
+        ></manual-work>
+
         <scenario-config
           v-if="roomType === '会议室' && scenarioArr && scenarioArr.length"
           :activeType="activeType"
@@ -221,12 +230,22 @@
       teleport="#app"
     >
       <work-overtime
-        v-if="isShowWork"
+        v-if="isShowWork && controlMode !== 1"
         :spaceInfo="spaceInfo"
         @closeWork="closeWork"
         :projectId="projectId"
         :workkArr="workkArr"
       ></work-overtime>
+
+      <!--加班手动控制 start-->
+      <manual-overtime
+        v-if="isShowWork && controlMode === 1"
+        :spaceInfo="spaceInfo"
+        @closeWork="closeWork"
+        :projectId="projectId"
+        :workkArr="workkArr"
+      >
+      </manual-overtime>
     </van-popup>
     <!--会议室场景-->
     <van-popup
@@ -292,8 +311,10 @@ import {
   getCurrentInstance,
 } from "vue";
 import WorkOvertime from "./components/workOvertime/index.vue";
+import ManualOvertime from "./components/ManualWork/index.vue";
 import Contact from "./components/Contact/index.vue";
 import WorkConfig from "./components/workOvertime/WorkConfig.vue";
+import ManualWork from "./components/ManualWork/WorkConfig.vue";
 import ScenarioConfig from "./components/Scenario/ScenarioConfig.vue";
 import MapBox from "@/views/envmonitor/components/Map/MapBox.vue";
 import Header from "@/components/header/Index.vue";
@@ -352,11 +373,13 @@ export default defineComponent({
     NavBar,
     Air,
     ManualIndex,
+    ManualOvertime,
     Light,
     Curtain,
     TimeBox,
     WorkOvertime,
     WorkConfig,
+    ManualWork,
     ScenarioConfig,
     Detail,
     Contact,
@@ -1595,9 +1618,6 @@ export default defineComponent({
           if (item.sceneType === "OVERTIME") {
             proxyData.isWork = true;
           }
-          // if (item.sceneType === "DISCUSSING" || item.) {
-          //   proxyData.isMetting = true;
-          // }
         });
       },
       /**
@@ -1810,7 +1830,7 @@ export default defineComponent({
         proxyData.timeOutEvent = setTimeout(function () {
           proxyData.touchNumber = 1;
           proxyData.longPress();
-        }, 400); //这里设置定时器,定义长按500毫秒触发长按事件
+        }, 500); //这里设置定时器,定义长按500毫秒触发长按事件
         return false;
       },
       //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件

+ 29 - 45
src/views/mapDataNew/sichuan.vue

@@ -17,26 +17,9 @@
         <van-icon name="minus" color="#1989fa" />
       </div>
     </div>
-    <div class="canvas-box" style="overflow: hidden" id="canvasBox">
+    <div class="canvas-box"  id="canvasBox">
       <canvas id="myCanvas" class="canvas-dom" style="boder: 1px solid red">
-        <img
-          :style="{
-            left: item.devicePoint[0].left,
-            top: item.devicePoint[0].top,
-          }"
-          style="
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            z-index: 999;
-            left: 20px;
-            top: 20px;
-          "
-          :src="parseImgUrl('map-icon', 'device.svg')"
-          alt=""
-          :key="index"
-          v-for="(item, index) in spaceList"
-        />
+        
       </canvas>
     </div>
   </div>
@@ -263,7 +246,7 @@ export default defineComponent({
               // alert("我被点了!");
               // console.log("我被点了!")
               iconFlag = true;
-              alert(`我被点了设备图标!${index}`);
+              console.log(`我被点了设备图标!${index}`);
             }
           });
           if (iconFlag) {
@@ -281,7 +264,7 @@ export default defineComponent({
           let flag = proxyData.queryPtInPolygon(dot, coordinates);
           // console.log(flag);
           if (flag) {
-            alert("点击了区域");
+            console.log("点击了区域"+item.localName);
             break;
           }
         }
@@ -357,27 +340,6 @@ export default defineComponent({
         });
         console.log(proxyData.spaceList);
       },
-      /**
-       * 获取地图信息
-       */
-      getMapInfo() {
-        let params: any = {
-          projectId: "Pj1101080259",
-          floorId: "Fl11010802593241ec348ecb4148806b9034c8957454",
-        };
-        getMapInfo(params)
-          .then((res) => {
-            // debugger
-            let resData: any = res;
-            let data: any = resData?.data ?? null;
-            proxyData.width = data.width;
-            proxyData.height = data.height;
-            proxyData.spaceList = data.spaceList;
-            proxyData.setSpaceColor();
-            proxyData.initCanvas();
-          })
-          .catch(() => {});
-      },
       // 数据格式化
       formSpaceData() {
         proxyData.spaceList = JSON.parse(proxyData.copySpaceArr);
@@ -1308,6 +1270,28 @@ export default defineComponent({
         proxyData.copySpaceArr = JSON.stringify(spaceList);
         proxyData.formSpaceData();
       },
+
+       /**
+       * 获取地图信息
+       */
+       getMapInfo() {
+        let params: any = {
+          projectId: "Pj1101080259",
+          floorId: "Fl11010802593241ec348ecb4148806b9034c8957454",
+        };
+        getMapInfo(params)
+          .then((res) => {
+            // debugger
+            let resData: any = res;
+            let data: any = resData?.data ?? null;
+            proxyData.width = data.width;
+            proxyData.height = data.height;
+            proxyData.spaceList = data.spaceList;
+            proxyData.setSpaceColor();
+            proxyData.initCanvas();
+          })
+          .catch(() => {});
+      },
     });
     nextTick(() => {
       proxyData.bindEvent();
@@ -1327,13 +1311,13 @@ export default defineComponent({
 .canvas-box {
   width: 100%;
   height: calc(100% - 80px);
-  overflow-x: hidden;
-  overflow-y: hidden;
+  // overflow-x: hidden;
+  // overflow-y: hidden;
 }
 .com-upload {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  // overflow: hidden;
 }
 .space-search {
   position: fixed;