fix: 会议室场景页面功能实现

package-lock.json

@@ -13973,6 +13973,30 @@
         }
       }
     },
+    "postcss-pxtorem": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz",
+      "integrity": "sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==",
+      "requires": {
+        "postcss": "^7.0.27"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",

package.json

@@ -33,6 +33,7 @@
     "lib-flexible": "^0.3.2",
     "log4js": "^6.3.0",
     "path-to-regexp": "^6.2.0",
+    "postcss-pxtorem": "^5.1.1",
     "qrcode.vue": "^3.3.3",
     "reflect-metadata": "^0.1.13",
     "tinymce": "5.6.2",

src/apis/envmonitor.ts

@@ -163,13 +163,6 @@ export const getSpaceTemp = () => {
 }
 
 /**
- * 获取加班记录
- */
-export const getWorkTimeList = (params: any) => {
-  return https().request<any>(`${duoduoenvService}customScene/queryCustomAndScence?${params}`)
-}
-
-/**
  * 
  * @param params 查询场景配置
  * @returns 
@@ -186,30 +179,38 @@ export const queryCustomAndScence = (params: any) => {
 }
 
 /**
+ * 添加(取消)加班记录
+ * @param params
+ */
+export const saveBatchCustomScene = (data: any) => {
+  return post(`${duoduoenvService}customScene/saveBatchCustomScene?${comParams}`, data)
+}
+
+/**
  *  查询默认位置
  */
- export const getDefaultLocation = (params: any) => {
+export const getDefaultLocation = (params: any) => {
   return https().request<any>(`${testApi}padSpace/getDefaultLocation?${comParams}&${params}`, Method.GET, undefined, ContentType.json)
 }
 
 /**
  * 查询空间列表
  */
- export const getPadSpaceList = (params: any) => {
+export const getPadSpaceList = (params: any) => {
   return https().request<any>(`${testApi}padSpace/getPadSpaceList?${comParams}&${params}`, Method.GET, undefined, ContentType.json)
 }
 
 /**
  * 设置成办公空间
  */
- export const saveWorkSpace = (params: any) => {
+export const saveWorkSpace = (params: any) => {
   return https().request<any>(`${testApi}padSpace/saveWorkSpace?${comParams}`, Method.POST, params, ContentType.json)
 }
 
 /**
  * 查询平板下面的办公空间
  */
- export const queryWorkSpace = (params: any) => {
+export const queryWorkSpace = (params: any) => {
   return https().request<any>(`${testApi}padSpace/queryWorkSpace?${comParams}`, Method.POST, params, ContentType.json)
 }
 

src/main.ts

@@ -10,7 +10,18 @@ import { Toast, Icon, Tab, Tabs, Loading, Popup } from 'vant'
 import '@/permission'
 
 const app = createApp(App)
+const loadingStart = (duration: any = 0) => {
+  Toast.loading({
+    duration: duration, // 持续展示 toast
+    forbidClick: true
+  })
+}
+const loadinngEnd = () => {
+  Toast.clear()
+}
 app.config.globalProperties.$toast = Toast
+app.config.globalProperties.$loadingStart = loadingStart
+app.config.globalProperties.$loadinngEnd = loadinngEnd
 app
   .use(Toast).use(Icon)
   .use(Tabs)

src/views/envmonitor/components/Scenario/ScenarioConfig.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="scene-config">
+    <template v-for="(item, index) in scenarioArr" :key="'scene' + index">
+      <div
+        class="scene-item"
+        @click="handleScene(item)"
+        :style="{
+          flex:
+            scenarioArr.length &&
+            scenarioArr.length == 2 &&
+            item.sceneType === activeType
+              ? 2
+              : 1,
+        }"
+        :class="item.sceneType === activeType ? 'scene-active' : ''"
+      >
+        <img :src="item.img" alt="" />
+        <span>{{ item.sceneName }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { useRouter } from "vue-router";
+import { getUserInfo, parseImgUrl } from "@/utils";
+import { UserActionTypes } from "@/store/modules/user/action-types";
+import { useStore } from "@/store";
+import { switchoverSceneHttp } from "@/apis/envmonitor";
+
+export default defineComponent({
+  props: {
+    projectId: {
+      type: String,
+      default: () => "",
+    },
+    spaceId: {
+      type: String,
+      default: () => "",
+    },
+    scenarioArr: {
+      type: Array,
+      default: () => [],
+    },
+    activeType: {
+      type: String,
+      default: () => "",
+    },
+  },
+  setup(props, contx) {
+    let router: any = useRouter();
+    const store = useStore();
+    let scenarioImgArr: any = {
+      DISCUSSING: parseImgUrl("ipdImages", "taolun.svg"),
+      PROJECTING: parseImgUrl("ipdImages", "touying.svg"),
+      ADJOURNMENT: parseImgUrl("ipdImages", "sanhui.svg"),
+    };
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      scenarioArr: props.scenarioArr,
+      scenarioImgArr: scenarioImgArr,
+      activeType: "DISCUSSING",
+      onSubmit(values: any) {
+        router.push({ path: "/choice-project" });
+      },
+      formatScenarioImg() {
+        // debugger
+        proxyData.scenarioArr.map((item: any) => {
+          item.img = proxyData.scenarioImgArr[item.sceneType];
+        });
+      },
+      // 切换场景
+      handleScene(item: any) {
+        // 展示场景详情页面
+        proxyData.activeType = item.sceneType;
+        const userInfo: any = getUserInfo();
+        const params = {
+          spaceId: props.spaceId,
+          projectId: props.projectId,
+          type: item.sceneType,
+          pubname: userInfo.pubname,
+        };
+
+        item.loading = true;
+        contx.emit("setHeadScene", item);
+        // switchoverSceneHttp(params).then(res => {
+
+        //   contx.emit('setHeadScene', item)
+        // }).catch(() => {
+        //   contx.emit('setHeadScene', item)
+        //   // contx.emit('timerSpaceInfo')
+        // })
+      },
+    });
+    watch(
+      props,
+      (newProps: any) => {
+        proxyData.scenarioArr = newProps.scenarioArr;
+        proxyData.formatScenarioImg();
+        proxyData.activeType = newProps.activeType;
+      },
+      {
+        deep: false,
+        immediate: true,
+      }
+    );
+    onMounted(() => {});
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.scene-config {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 20px;
+  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;
+  .scene-item {
+    flex: 1;
+    line-height: 58px;
+    background: rgba(159, 183, 205, 0.15);
+    border-radius: 16px;
+    margin-left: 10px;
+    text-align: center;
+    &:nth-child(1) {
+      margin-left: 0;
+    }
+    img {
+      display: inline-block;
+      vertical-align: middle;
+      width: 20px;
+      height: 20px;
+      margin-right: 5px;
+    }
+  }
+  .scene-active {
+    background: $elActive4;
+  }
+}
+</style>
+<style lang="scss">
+</style>

src/views/envmonitor/components/Scenario/scenarioDailog.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="scene-dailog">
+    <div class="title">{{secenaroStatus.localName}}</div>
+    <div class="dailog-content">
+      <img :src="parseImgUrl('ipdImages', 'taolun-big.svg')" />
+      <span class="status-text1"> 切换至 <i>讨论</i> 场景 </span>
+      <span class="status-text2"> 已为您切换至适宜讨论的环境 </span>
+    </div>
+    <div class="dailog-btn" @click="closeDailog">我知道了</div>
+  </div>
+</template>
+  
+  <script lang="ts">
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { parseImgUrl } from "@/utils";
+
+export default defineComponent({
+  props: {
+    projectId: {
+      type: String,
+      default: () => "",
+    },
+    scenarioArr: {
+      type: Array,
+      default: () => [],
+    },
+    activeType: {
+      type: String,
+      default: () => "",
+    },
+    secenaroStatus: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup(props,contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      secenaroStatus: props.secenaroStatus,
+      closeDailog(){
+        contx.emit("closeDailog");
+      }
+    });
+    watch(
+      props,
+      (newProps: any) => {
+        proxyData.secenaroStatus = newProps.secenaroStatus;
+      },
+      {
+        deep: false,
+        immediate: true,
+      }
+    );
+    onMounted(() => {});
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  <style lang="scss" scoped>
+.scene-dailog {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .title {
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 31px;
+    color: #000000;
+  }
+  .dailog-content {
+    position: absolute;
+    // top: 50%;
+    top:19vh;
+    left: 50%;
+    transform: translate(-50%);
+    width: 100%;
+    text-align: center;
+    img {
+      width: 100px;
+      height: 100px;
+      margin: 0 auto;
+    }
+    span {
+      display: block;
+      text-align: center;
+    }
+    .status-text1 {
+      padding-top: 28px;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 28px;
+      line-height: 39px;
+      color: #646c73;
+      i {
+        display: inline-block;
+        font-style: normal;
+        padding-left: 5px;
+        padding-right: 5px;
+        color: #000000;
+      }
+    }
+    .status-text2 {
+      padding-top: 10px;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 22px;
+      line-height: 31px;
+      color: #646c73;
+    }
+  }
+  .dailog-btn {
+    position: absolute;
+    bottom: 38px;
+    width: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background: #ffffff;
+    border: 1px solid #c3c7cb;
+    border-radius: 25px;
+  }
+}
+</style>
+  <style lang="scss">
+</style>
+  

src/views/envmonitor/components/ScenarioConfig.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="scene-config">
-    <div
-      class="scene-item"
-      :key="'scene' + index"
-      @click="checkScenario(item)"
-      :style="{flex: scenarioArr.length && scenarioArr.length == 2 && item.id === activeId? 2 : 1,}"
-      :class="item.id === activeId ? 'scene-active' : ''"
-      v-for="(item, index) in scenarioArr">
-      <img :src="item.img" alt="" />
-      <span>{{ item.name }}</span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  reactive,
-  toRefs,
-  onBeforeMount,
-  onMounted,
-  ref,
-  watch
-} from "vue";
-import { useRouter } from "vue-router";
-import { parseImgUrl } from "@/utils";
-import { UserActionTypes } from "@/store/modules/user/action-types";
-import { useStore } from "@/store";
-
-export default defineComponent({
-  props: {
-    projectId: {
-      type: String,
-      default: () => ''
-    }
-  },
-  setup(props) {
-    let router: any = useRouter();
-    const store = useStore();
-    const scenarioArr: any = [
-      {
-        id: 1,
-        name: "讨论",
-        img: parseImgUrl("ipdImages", "taolun.svg"),
-      },
-      {
-        id: 2,
-        name: "投影",
-        img: parseImgUrl("ipdImages", "touying.svg"),
-      },
-      // {
-      //   id: 3,
-      //   name: "散会",
-      //   img: parseImgUrl("ipdImages", "sanhui.svg"),
-      // },
-    ];
-    const proxyData = reactive({
-      parseImgUrl: parseImgUrl,
-      scenarioArr: scenarioArr,
-      activeId: 1,
-      onSubmit(values: any) {
-        router.push({ path: "/choice-project" });
-      },
-      checkScenario(item: any) {
-        proxyData.activeId = item.id;
-      },
-    });
-    watch(
-        props,
-        (newProps: any) => {
-          proxyData.scenarioArr = newProps.scenarioArr
-          // if (newProps.spaceId) {   // 空间id改变的重新获取值调用接口
-          //
-          // }
-        }
-    )
-    return {
-      ...toRefs(proxyData),
-    };
-  },
-});
-</script>
-<style lang="scss" scoped>
-.scene-config {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: 20px;
-  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;
-  .scene-item {
-    flex: 1;
-    line-height: 58px;
-    background: rgba(159, 183, 205, 0.15);
-    border-radius: 16px;
-    margin-left: 10px;
-    text-align: center;
-    &:nth-child(1) {
-      margin-left: 0;
-    }
-    img {
-      display: inline-block;
-      vertical-align: middle;
-      width: 20px;
-      height: 20px;
-      margin-right: 5px;
-    }
-  }
-  .scene-active {
-    background: $elActive4;
-  }
-}
-</style>
-<style lang="scss">
-
-</style>

src/views/envmonitor/components/workOvertime/WorkConfig.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="scene-config">
     <!--开放办公区-->
-    <div class="time-box">
+    <div class="time-box" :class="timerText.classColor">
       <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" />
       <div class="time-text">
         <span>{{ timerText.text }}</span>
@@ -15,7 +15,7 @@
         <span> {{ timerText.btnText }}</span>
       </div>
     </div>
-    <div class="time-del" v-if="timerText.showDel">
+    <div class="time-del" v-if="timerText.showDel" @click="myLeaving">
       <img :src="parseImgUrl('page-officehome', 'goOffWork.svg')" alt="" />
       <div class="del-text">
         <span>我要</span>
@@ -34,6 +34,7 @@ import {
   onMounted,
   ref,
   watch,
+  getCurrentInstance,
 } from "vue";
 import { useRouter } from "vue-router";
 import {
@@ -45,6 +46,7 @@ import {
 } from "@/utils";
 import { UserActionTypes } from "@/store/modules/user/action-types";
 import { useStore } from "@/store";
+import { saveBatchCustomScene } from "@/apis/envmonitor";
 
 export default defineComponent({
   props: {
@@ -58,6 +60,7 @@ export default defineComponent({
     },
   },
   setup(props, contx) {
+    const proxyGlobal: any = getCurrentInstance();
     let router: any = useRouter();
     let timerText: any = {
       text: "",
@@ -67,8 +70,11 @@ export default defineComponent({
       classColor: "grey",
     };
     const store = useStore();
+    const delTimeArr: any = [];
+    let customSceneList: any = [];
     const proxyData = reactive({
       parseImgUrl: parseImgUrl,
+      leaveBtnFlag: false,
       scenarioArr: props.scenarioArr,
       workkArr: props.workkArr,
       forcedOverTimeFlag: false, // 强制加班标记 false:不需要强制加班
@@ -131,6 +137,8 @@ export default defineComponent({
         return obj;
       },
       // 格式化日期
+      delTimeArr: delTimeArr,
+      customSceneList: customSceneList, // 当前日期的加班
       formateWorkTime() {
         // debugger;
         let data: any = proxyData.workkArr;
@@ -141,9 +149,9 @@ export default defineComponent({
           let cusEndTime: any = data[i].cusEndTime;
           let customSceneList: any = data[i]?.customSceneList ?? [];
           let nowTime: any = getRelNowTime();
-          console.log("nowTime===" + nowTime);
-          let delTimeArr: any = [];
+          // console.log("nowTime===" + nowTime);
           if (date === nowDate) {
+            proxyData.customSceneList = customSceneList;
             // 1.当天没有服务定制时间和加班时间
             /**a.未来有服务定制和加班**/
             // 2.当天有服务定制时间无加班时间
@@ -186,31 +194,55 @@ export default defineComponent({
                 proxyData.timerText.showDel = false;
                 proxyData.forcedOverTimeFlag = true;
               }
-            } else if (cusStartTime && cusEndTime && customSceneList.length) {
-              if (nowTime < cusStartTime || nowTime > cusEndTime) {
-                // 在服务定制时间之前
+            } else {
+              if (
+                cusStartTime &&
+                cusEndTime &&
+                nowTime >= cusStartTime &&
+                nowTime <= cusEndTime
+              ) {
+                // debugger
+                startTime = cusStartTime;
+                endTime = cusEndTime;
+                customSceneList.map((item: any) => {
+                  if (endTime === item.startTime) {
+                    endTime = item.endTime;
+                  }
+                });
+                /**
+                 * 需要补加上和未来时间连续的问题
+                 */
+                proxyData.timerText.text = "工作时间";
+                proxyData.timerText.timer =
+                  formatTimerStr(startTime) + "~" + formatTimerStr(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
                     ) {
-                      delTimeArr.push(item);
+                      // proxyData.delTimeArr.push(item);
                     } // 点击我要离开的时候需要删除的数据
                     if (oldTimeEnd === item.startTime) {
                       endTime = item.endTime;
+                      // proxyData.delTimeArr.push(item);
                     }
                   });
-                  if (nowTime < cusEndTime) {
+                  if (cusStartTime && cusEndTime && nowTime < cusStartTime) {
                     // 在服务定制时间之前的时候需要处理连续时间的问题
                     if (endTime === cusStartTime) {
                       endTime = cusEndTime;
@@ -227,7 +259,7 @@ export default defineComponent({
                   proxyData.timerText.text = "工作时间";
                   proxyData.timerText.timer =
                     formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
-                  proxyData.timerText.classColor = "grey";
+                  proxyData.timerText.classColor = "yellow";
                   proxyData.timerText.btnText = "预约延时";
                   proxyData.timerText.showDel = true;
                   proxyData.forcedOverTimeFlag = false;
@@ -247,37 +279,141 @@ export default defineComponent({
                   /**
                    *需要补加上和未来时间连续的问题
                    */
-                  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 if (nowTime >= cusStartTime && nowTime <= cusEndTime) {
-                startTime = cusStartTime;
-                endTime = cusEndTime;
-                customSceneList.map((item: any) => {
-                  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;
                   }
-                });
-                /**
-                 * 需要补加上和未来时间连续的问题
-                 */
-                proxyData.timerText.text = "工作时间";
-                proxyData.timerText.timer =
-                  formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
-                proxyData.timerText.classColor = "grey";
-                proxyData.timerText.btnText = "预约延时";
-                proxyData.timerText.showDel = true;
-                proxyData.forcedOverTimeFlag = false;
+                }
               }
             }
           }
         }
       },
+      // 时间拼接
+      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);
+        saveBatchCustomScene(proxyData.delTimeArr)
+          .then((res) => {
+            proxyData.leaveBtnFlag = false;
+            console.log(res);
+            proxyGlobal.proxy.$loadinngEnd();
+          })
+          .catch(() => {
+            proxyData.leaveBtnFlag = false;
+            proxyGlobal.proxy.$loadinngEnd();
+          });
+      },
     });
     watch(
       props,
@@ -304,7 +440,7 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding: 20px;
+  padding: 15px;
   width: 100%;
   height: 100%;
   background: #ffffff;
@@ -314,14 +450,14 @@ export default defineComponent({
     background: rgba(159, 183, 205, 0.15) !important;
   }
   .yellow {
-    background: #ffe723;
+    background: rgba(206, 159, 39, 0.4);
   }
   .time-box {
     position: relative;
     // width: 69%;
     flex: 2.4;
     height: 100%;
-    line-height: 58px;
+    line-height: 70px;
     background: rgba(206, 159, 39, 0.4);
     // opacity: 0.4;
     border-radius: 16px;
@@ -343,15 +479,16 @@ export default defineComponent({
           font-style: normal;
           font-weight: 500;
           font-size: 12px;
-          line-height: 15px;
+          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: 18px;
+          line-height: 20px;
           color: #1f2429;
         }
       }
@@ -391,17 +528,18 @@ export default defineComponent({
 
   .time-del {
     // width: 27%;
-    padding-top: 13px;
+    padding-top: 18px;
     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;
+      // margin-left: 10px;
     }
     .del-text {
       display: inline-block;
@@ -411,7 +549,7 @@ export default defineComponent({
       span {
         display: block;
         font-size: 13px;
-        line-height: 16px;
+        line-height: 18px;
         text-align: center;
         color: #000000;
       }

src/views/envmonitor/components/workOvertime/index.vue

@@ -128,9 +128,17 @@ export default defineComponent({
         let addTimeEl: any = document.querySelector("#addTimeId");
         proxyData.screenInfo.screenWidth = addTimeEl.offsetWidth;
       },
+      // 获取当前位置
+      getNowIndex() {
+        let nowIndex: any = 0;
+        if (proxyData.nowData.week === "今天") {
+          nowIndex = getNowTime()[1];
+        }
+        return nowIndex;
+      },
       // 获取当前位置的坐标
       getNowPerstion(timerArr: any) {
-        let nowIndex: any = getNowTime()[1];
+        let nowIndex: any = proxyData.getNowIndex();
         let obj: any = {
           nowIndex: nowIndex,
           len: 4,
@@ -154,6 +162,9 @@ export default defineComponent({
             if (item.formatTimer === cusStartTime) {
               console.log("index===", index);
               obj.len = index - nowIndex;
+              if (obj.len > 4) {
+                obj.len = 4;
+              }
             }
           });
         }
@@ -164,17 +175,12 @@ export default defineComponent({
         let sliderList: any = document.querySelector("#sliderListId");
         let slidersWrapper: any = document.querySelector("#slidersWrapperId");
         sliderList.style.width =
-          slidersWrapper.offsetWidth * timerArr.length - 15 + "px";
+          slidersWrapper.offsetWidth * timerArr.length + "px";
         let index: any = proxyData.getNowPerstion(timerArr).nowIndex;
         let len: any = proxyData.getNowPerstion(timerArr).len;
         let sliderLeft: any = slidersWrapper.offsetWidth * index;
         sliderList.style.left = -sliderLeft + "px";
         proxyData.setOptionnalPerstion(index, len);
-        proxyData.setPastTime(getNowTime()[1]);
-        // 已经被选择的时间
-        proxyData.setCheckTimeStyle();
-        // 固定服务时间
-        proxyData.setServiceTimerStyle();
       },
       sliderSwiper() {
         // 获取当前时间的下标
@@ -237,6 +243,24 @@ export default defineComponent({
         }
         proxyData.formBtn = flag;
       },
+      cancelRemoveListener() {
+        let endBox: any = document.querySelector("#endBoxId");
+        endBox.removeEventListener("touchstart", function (e: any) {}, false);
+        endBox.removeEventListener("touchend", function (e: any) {}, false);
+        endBox.removeEventListener("touchmove", function (e: any) {}, false);
+        let sliderList: any = document.querySelector("#sliderListId");
+        sliderList.removeEventListener(
+          "touchstart",
+          function (e: any) {},
+          false
+        );
+        sliderList.removeEventListener("touchend", function (e: any) {}, false);
+        sliderList.removeEventListener(
+          "touchmove",
+          function (e: any) {},
+          false
+        );
+      },
       /**
        * 日历滑动
        */
@@ -275,8 +299,12 @@ export default defineComponent({
             let index: any = Math.ceil(
               sliderBtnWidth / sliderBoxEl.offsetWidth
             );
+            if (proxyData.startIndex + index >= proxyData.timerArr.length - 1) {
+              index = proxyData.timerArr.length - 1 - proxyData.startIndex;
+            }
             sliderBtnEl.style.width = sliderBoxEl.offsetWidth * index + "px";
             sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
+
             proxyData.setOptionnalPerstion(proxyData.startIndex, index);
             isMove = false;
             // 判断按钮是否可以点击(如果选择的时候包含服务定制时间,则不可点击)
@@ -371,7 +399,6 @@ export default defineComponent({
           },
         });
       },
-
       cancelSliderBoxColor() {
         let sliderBoxArr: any = document.querySelectorAll(".slider-box");
         for (let i = 0; i < sliderBoxArr.length; i++) {
@@ -390,19 +417,15 @@ export default defineComponent({
        * 设置可选日期的位置
        */
       setOptionnalPerstion(index: any, len: any = 1) {
+        let sliderList: any = document.querySelector("#sliderListId");
         proxyData.startIndex = index;
         proxyData.startLen = len;
         proxyData.endIndex = proxyData.startIndex + len;
         let slidersWrapper: any = document.querySelector("#slidersWrapperId");
-        let left: any = slidersWrapper.offsetWidth * index;
         let sliderBtnEl: any = document.querySelector("#sliderBtnId");
         let endEnd: any = document.querySelector("#endBoxId");
-        sliderBtnEl.style.left = left + "px";
-        sliderBtnEl.style.width =
-          slidersWrapper.offsetWidth * len + endEnd.offsetWidth / 2 - 4 + "px";
-        sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
         let sliderBoxArr: any = document.querySelectorAll(".slider-box");
-        let parseIndex: any = getNowTime()[1];
+        let parseIndex = proxyData.getNowIndex();
         for (let i = 0; i < sliderBoxArr.length; i++) {
           if (i >= parseIndex) {
             sliderBoxArr[i].style.background = "transparent";
@@ -414,6 +437,27 @@ export default defineComponent({
             index + i
           ].style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2)), url(${bg})`;
         }
+        sliderBtnEl.style.width =
+          slidersWrapper.offsetWidth * len +
+          (len * 1) / 2 +
+          endEnd.offsetWidth / 2 -
+          7 +
+          "px";
+        sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
+        let left: any = slidersWrapper.offsetWidth * index;
+        if (document.body.clientWidth >= 960) {
+          left = left - (index * 1) / 2;
+        }
+        // alert(left)
+        // alert( slidersWrapper.offsetWidth)
+        // let sliderLeft: any = isNaN(parseInt(sliderList.style.left))
+        //   ? 0
+        //   : parseInt(sliderList.style.left);
+        // sliderLeft = Math.abs(sliderLeft);
+        // if (sliderLeft > proxyData.screenInfo.screenWidth) {
+        //   left = left - 5;
+        // }
+        sliderBtnEl.style.left = left + "px";
         // // 已被选择的时间
         proxyData.setCheckTimeStyle();
         // // 固定服务时间（空间服务时间）
@@ -514,7 +558,7 @@ export default defineComponent({
         }
         // 按钮的状态
         proxyData.formBtn = false;
-        let nowIndex: any = getNowTime()[1];
+        let nowIndex: any = proxyData.getNowIndex();
         if (index < nowIndex) {
           // 过去的时间不可选择
           // 过去的时间不可选择
@@ -556,7 +600,6 @@ export default defineComponent({
       // },
       setWorkTimeList() {
         let data: any = proxyData.workkArr;
-        proxyData.myTimeArr = data;
         proxyData.dateArr = [];
         let nowDate: any = formatDate("YYYY-MM-DD");
         for (let i = 0; i < data.length; i++) {
@@ -616,16 +659,19 @@ export default defineComponent({
             }
           });
           // 是否在固定区域时间
-          timerArr.map((item: any) => {
-            if (
-              item.formatTimer >= cusStartTime &&
-              item.formatTimer < cusEndTime
-            ) {
-              item.isServiceTime = true;
-            } else {
-              item.isServiceTime = false;
-            }
-          });
+          if (cusStartTime && cusEndTime) {
+            timerArr.map((item: any) => {
+              if (
+                item.formatTimer >= cusStartTime &&
+                item.formatTimer < cusEndTime
+              ) {
+                item.isServiceTime = true;
+              } else {
+                item.isServiceTime = false;
+              }
+            });
+          }
+
           proxyData.dateArr.push({
             date: date,
             isActive: isActive,
@@ -639,29 +685,48 @@ export default defineComponent({
             timerArr: timerArr,
           });
         }
-        proxyData.dateArr.map((item: any, index: any) => {
-          if (item.week === "今天") {
-            // proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
-            // proxyData.nowData = proxyData.dateArr[index];
-            proxyData.checkDate(item, index);
-            return;
-          }
+        if (!(proxyData.nowData && proxyData.nowData.length)) {
+          proxyData.dateArr.map((item: any, index: any) => {
+            if (item.week === "今天") {
+              proxyData.checkDate(item, index);
+              return;
+            }
+          });
+        }
+      },
+      clearTimerBoxStyle() {
+        proxyData.dateArr.map((elItem: any) => {
+          elItem.isActive = false;
         });
+        let timerArr: any = proxyData.nowTimerArr;
+        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
+        for (let i = 0; i < timerArr.length; i++) {
+          sliderBoxArr[i].style.background = `transparent`;
+        }
+        // 切换日期的时候取消绑定
+        // proxyData.cancelRemoveListener();
       },
       /**
        * 切换日期
        */
       checkDate(item: any, index: any) {
-        proxyData.dateArr.map((elItem: any) => {
-          elItem.isActive = false;
-        });
+        proxyData.clearTimerBoxStyle();
         item.isActive = true;
         proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
         proxyData.nowData = proxyData.dateArr[index];
         // dom元素宽高调整
         nextTick(() => {
           proxyData.setOptionnalTime(proxyData.nowTimerArr);
-          proxyData.changeEl();
+          console.log(item);
+          let index: any = proxyData.getNowIndex();
+          proxyData.setPastTime(index);
+          // // 已经被选择的时间
+          proxyData.setCheckTimeStyle();
+          // // 固定服务时间
+          proxyData.setServiceTimerStyle();
+          if (proxyData.nowData.week === "今天") {
+            proxyData.changeEl();
+          }
         });
       },
       /**
@@ -899,10 +964,10 @@ export default defineComponent({
           addTimeArr.map((item: any) => {
             let realTime: any = getRelNowTime();
             if (realTime >= item.startTime && realTime <= item.endTime) {
-              item.type==='2'
+              item.type === "2";
             }
           });
-          let formTimeArr:any=addTimeArr.concat(delTimerArr)
+          let formTimeArr: any = addTimeArr.concat(delTimerArr);
           // return formTimeArr;
         } else {
           return [];
@@ -918,7 +983,7 @@ export default defineComponent({
       triggerDelTime() {
         let formTimeArr: any = proxyData.formateDelTimer();
         if (formTimeArr && formTimeArr.length) {
-          console.log(formTimeArr)
+          console.log(formTimeArr);
           alert("确定删除当前时间吗?");
         }
       },
@@ -1047,16 +1112,12 @@ export default defineComponent({
       //border-bottom: 1px solid #ECEFF4;
       &:nth-child(2n + 1) {
         border-left: 1px solid #eceff4;
-
-        .label {
-          //border-left: 1px solid #ECEFF4;
-        }
       }
 
       .sliders {
         position: relative;
-        width: 36px;
-        //width: 100%;
+        // width: 36px;
+        width: 100%;
         height: 100%;
 
         .label {
@@ -1097,7 +1158,7 @@ export default defineComponent({
         width: 3px;
         top: 0;
         height: 100px;
-        left: 0;
+        left: 0px;
         //left: 176px;
         background: #04b49c;
       }
@@ -1107,8 +1168,8 @@ export default defineComponent({
         top: 0;
         width: 20px;
         height: 100px;
-        right: -3px;
-        // z-index: 444;
+        right: -5px;
+        z-index: 999;
         //left: 286px;
 
         .end {

src/views/envmonitor/index.vue

@@ -42,6 +42,7 @@
             ]"
             :class="index == 1 ? 'env-color' : ''"
             :key="'env' + index"
+            @click="handleDetail(item)"
             v-for="(item, index) in envlist"
           >
             <div>
@@ -83,17 +84,17 @@
       <div class="work-btn">
         <!-- {{roomType}} -->
         <work-config
-          v-if="
-            roomType === '开放' &&
-            scenarioArr &&
-            scenarioArr.length &&
-            scenarioArr[0].sceneType === 'OVERTIME'
-          "
+          v-if="roomType === '开放' && isWork"
           :scenarioArr="scenarioArr"
           :workkArr="workkArr"
           @triggerWork="triggerWork"
         ></work-config>
-        <scenario-config v-if="roomType === '会议室'"></scenario-config>
+        <scenario-config
+          v-if="roomType === '会议室' && scenarioArr && scenarioArr.length"
+          :activeType="activeType"
+          :scenarioArr="scenarioArr"
+          @setHeadScene="setHeadScene"
+        ></scenario-config>
       </div>
       <!--加班end-->
       <Air
@@ -132,9 +133,33 @@
       class="popup-content"
       teleport="#app"
     >
-    <work-overtime v-if="isShowWork" 
-    :projectId="projectId"
-    :workkArr="workkArr"></work-overtime>
+      <work-overtime
+        v-if="isShowWork"
+        :projectId="projectId"
+        :workkArr="workkArr"
+      ></work-overtime>
+    </van-popup>
+    <van-popup
+      v-model:show="isShowMetting"
+      position="right"
+      :close-on-click-overlay="false"
+      class="popup-content"
+      teleport="#app"
+    >
+      <scenario-dailog
+        :secenaroStatus="secenaroStatus"
+        @closeDailog="closeDailog"
+      >
+      </scenario-dailog>
+    </van-popup>
+    <van-popup
+      v-model:show="isShowDetail"
+      position="right"
+      :close-on-click-overlay="true"
+      class="popup-content"
+      teleport="#app"
+    >
+      <detail :query="detailQuery" v-if="isShowDetail"></detail>
     </van-popup>
   </div>
 </template>
@@ -150,15 +175,20 @@ import {
   nextTick,
   onBeforeUnmount,
 } from "vue";
+import WorkOvertime from "./components/workOvertime/index.vue";
+import WorkConfig from "./components/workOvertime/WorkConfig.vue";
+import ScenarioConfig from "./components/Scenario/ScenarioConfig.vue";
 import MapBox from "@/views/envmonitor/MapBox.vue";
 import Header from "@/components/header/Index.vue";
 import Comheader from "@/components/header/Comheader.vue";
-import Scenario from "@/views/envmonitor/components/Scenario.vue";
+import Scenario from "@/views/envmonitor/components/Scenario/Scenario.vue";
 import Air from "@/views/envmonitor/components/Air.vue";
 import Light from "@/views/envmonitor/components/Light.vue";
 import Curtain from "@/views/envmonitor/components/Curtain.vue";
 import TimeBox from "@/views/envmonitor/TimeBox.vue";
 import NavBar from "@/views/envmonitor/NavBar.vue";
+import ScenarioDailog from "@/views/envmonitor/components/Scenario/scenarioDailog.vue";
+import Detail from "@/views/envmonitor/detail.vue";
 import { Icon, Popup, Dialog, Toast } from "vant";
 import { useRouter, useRoute } from "vue-router";
 import {
@@ -189,13 +219,11 @@ import {
 import { store } from "@/store";
 import { SpaceInfoModel } from "@/model/userModel";
 import { getWorkType } from "@/utils/mapIcon";
-import WorkOvertime from "./components/workOvertime/index.vue";
-import WorkConfig from "./components/workOvertime/WorkConfig.vue";
-import ScenarioConfig from "./components/ScenarioConfig.vue";
 
 export default defineComponent({
   components: {
     MapBox,
+    ScenarioDailog,
     Scenario,
     Header,
     Comheader,
@@ -207,6 +235,7 @@ export default defineComponent({
     WorkOvertime,
     WorkConfig,
     ScenarioConfig,
+    Detail,
     [Dialog.Component.name]: Dialog.Component,
     VanPopup: Popup,
     VanIcon: Icon,
@@ -217,6 +246,7 @@ export default defineComponent({
     const document: any = window.document;
     const screenHeight: any = document.body.clientHeight;
     const outWeather: any = {};
+    const secenaroStatus: any = {};
     // 空间数据（包括空间下的设备的状态）
     const officeData: any = {};
     let spaceEqFlagObj: SpaceInfoModel = {
@@ -225,6 +255,7 @@ export default defineComponent({
       hasLamp: false, //有无灯具
     };
     const popList: any = [];
+    const detailQuery: any = {};
     // 空间类型
     let spaceInfo: any = {};
     const projectId: string = store.state.user.projectId;
@@ -381,9 +412,11 @@ export default defineComponent({
     let realEevList: any = []; // 解决v-if报错的问题临时使用
     let workkArr: any = [];
     let spaceData: any = [];
+    let secenTimer: any = {};
     const proxyData = reactive({
       parseImgUrl: parseImgUrl,
       isShowWork: false,
+      isShowMetting: false,
       localName: "",
       airTemp: "",
       userIsControl: false,
@@ -582,23 +615,10 @@ export default defineComponent({
         proxyData.headerInfo.headScene = "";
         // 切换空间的时候先清除定时器
         proxyData.clearTimerSpaceInfo();
-        proxyData.init();
+        // proxyData.init();
         // 判断用户是否有可控制权限
         proxyData.checkUserSpace();
       },
-      /**
-       *
-       * @param item
-       */
-      handleDetail(item: any) {
-        router.push({
-          path: "/envmonitor-detail",
-          query: {
-            funcid: item.funcid,
-            spaceId: proxyData.spaceInfo.spaceId,
-          },
-        });
-      },
       // 获取公司信息
       async getCompanyInfo() {
         const res: any = await getCompanyInfo({ companyId: Keys.companyKey });
@@ -952,6 +972,7 @@ export default defineComponent({
           }
         }
       },
+      activeType: "", // 当前会议室场景
       // 获取会议室场景（如果是会议室的才调此接口）
       getPageMeetingSceneHttp() {
         const params: { spaceId: string } = {
@@ -966,21 +987,7 @@ export default defineComponent({
             if (resSen === "OFFWORK") {
               resSen = "ADJOURNMENT";
             }
-            let filterArr: any = [];
-            proxyData.listSen.map((item: any) => {
-              if (item.code === resSen) {
-                filterArr.push(item);
-              }
-            });
-            // console.log('filterArr===')
-            // console.log(filterArr)
-            // debugger
-            // // 根据code 获取场景的名字
-            proxyData.headerInfo.headScene =
-              filterArr[0] && filterArr[0].name
-                ? filterArr[0].name
-                : "全关模式";
-            proxyData.vanPopupIndex = resSen ? resSen : "";
+            proxyData.activeType = resSen;
             // 定时调空间数据
             proxyData.timerSpaceInfo();
           })
@@ -988,15 +995,34 @@ export default defineComponent({
             proxyData.timerSpaceInfo();
           });
       },
+      // 切换场景的状态
+      secenaroStatus: secenaroStatus,
       // 设置场景名称
-      setHeadScene(headScene: any, data: any) {
-        // console.log('场景刷新===')
-        proxyData.headerInfo.headScene = headScene;
-        proxyData.sceneDetail = data;
-        proxyData.setHeadSceneAirTemp();
-        // 隐藏当前弹窗
-        proxyData.showScenario = false;
-        proxyData.showSecenDetailDalig = true;
+      setHeadScene(item: any) {
+        proxyData.isShowMetting = true;
+        proxyData.secenaroStatus = {
+          localName: proxyData.officeData.localName,
+          loding: item.loading,
+          lofingText: "正在切换至",
+          sceneName: item.sceneName,
+        };
+      },
+      closeDailog() {
+        proxyData.isShowMetting = false;
+      },
+      isShowDetail: false,
+      detailQuery: detailQuery,
+      handleDetail(item: any) {
+        proxyData.isShowDetail = true;
+        proxyData.detailQuery.funcid = item.funcid;
+        proxyData.detailQuery.spaceId = proxyData.spaceInfo.spaceId;
+        // router.push({
+        //   path: '/envmonitor-detail',
+        //   query: {
+        //     funcid: item.funcid,
+        //     spaceId: proxyData.spaceInfo.spaceId
+        //   }
+        // })
       },
       // 获取空调设备温度
       updateAirTemp(airTemp: any) {
@@ -1310,32 +1336,6 @@ export default defineComponent({
         proxyData.isBottom = true;
       },
       /**
-       * 切换导航滑动页面
-       */
-      changeNav(item: any) {
-        if (item.code === "switchSpace") {
-          proxyData.triggerCheckSpace();
-        } else if (item.code === "mySpace") {
-          // 查看常驻空间
-          proxyData.getPermanentSpace();
-        } else {
-          nextTick(() => {
-            let activeNav: any = proxyData.setNarTop();
-            let envContentEle: any = document.getElementById("envContent");
-            activeNav.map((navItem: any, index: any) => {
-              if (index === 0) {
-                envContentEle.scrollTop = 0;
-                return;
-              }
-              if (item.code === navItem.code) {
-                envContentEle.scrollTop = navItem.top;
-                return;
-              }
-            });
-          });
-        }
-      },
-      /**
        * 加载loading
        */
       loadingStart() {
@@ -1351,218 +1351,6 @@ export default defineComponent({
       loadinngEnd() {
         Toast.clear();
       },
-      /**
-       *  获取常驻空间
-       */
-      getPermanentSpace() {
-        proxyData.loadingStart();
-        getPermanentSpace()
-          .then((res) => {
-            // debugger
-            let resResult: any = res;
-            if (resResult.result === "success") {
-              proxyData.spaceInfo = resResult.data;
-              // 判断用户控制权限
-              proxyData.getUserControlAuth();
-              proxyData.init();
-              nextTick(() => {
-                // proxyData.mapRef.init(proxyData.spaceInfo)
-              });
-            }
-            proxyData.loadinngEnd();
-          })
-          .catch(() => {
-            proxyData.loadinngEnd();
-          });
-      },
-      /**
-       * 判断当前用户是否设置过常驻空间
-       */
-      checkPermanetSpace() {
-        getPermanentSpace()
-          .then((res) => {
-            let resResult: any = res ? res : {};
-            if (resResult.result === "success") {
-              if (resResult.data && resResult.data.isPermanent) {
-                proxyData.navList[3].noShow = true;
-              } else {
-                proxyData.navList[3].noShow = false;
-              }
-            }
-            proxyData.loadinngEnd();
-          })
-          .catch(() => {
-            proxyData.loadinngEnd();
-          });
-      },
-      /**
-       * 设置导航的id
-       */
-      setNarTop() {
-        let navHeight: any = document.getElementById("nav").offsetHeight;
-        let activeNav: any = proxyData.navList.filter(
-          (item: any, index: any) => {
-            if (item.noShow && index < 3) {
-              return item;
-            }
-          }
-        );
-        activeNav.map((item: any) => {
-          let id: any = item.id;
-          if (id) {
-            let cardEle = document.getElementById(id);
-            if (cardEle) {
-              let cartHeight = cardEle.offsetHeight;
-              item.cartHeight = cartHeight;
-              let top: any =
-                cardEle.offsetTop -
-                screenHeight / 2 +
-                cartHeight / 2 +
-                navHeight / 2;
-              item.top = top;
-            }
-          }
-        });
-        return activeNav;
-      },
-      /**
-       * 获取竖着的方向
-       */
-      envScrollTop() {
-        let envContentEle: any = document.getElementById("envContent");
-        envContentEle.addEventListener("scroll", () => {
-          if (!proxyData.isBottom) {
-            let scrollTop = envContentEle.scrollTop;
-            let activeNav: any = proxyData.setNarTop();
-            activeNav.map((item: any, index: any) => {
-              if (index > 0) {
-                if (
-                  scrollTop <= item.top &&
-                  scrollTop > activeNav[index - 1].top
-                ) {
-                  proxyData.childRef.setActiveCode(item.code);
-                }
-              } else {
-                if (scrollTop <= item.top) {
-                  proxyData.childRef.setActiveCode(item.code);
-                }
-              }
-            });
-          }
-        });
-      },
-      /**
-       * 设备滑动效果
-       */
-      envmonitorMove() {
-        let ele: any = document.getElementById("envContent");
-        let houseEle: any = document.getElementById("houseDes");
-        let houseImgEle: any = document.getElementById("house");
-        let top: number = 0;
-        let nowTop: number = 0;
-        let temp: number = 0;
-        const tempMove: number = 60;
-        let houseHeight: number = 0;
-        let houseImgHeight: number = 0;
-        let beginY: any,
-          endY: any,
-          moveY: any = 0;
-        ele.addEventListener("touchstart", function (event: any) {
-          event.stopPropagation();
-          houseHeight = houseEle.offsetHeight;
-          // console.log('houseHeight===')
-          // console.log(houseHeight)
-          houseImgHeight = houseImgEle.offsetHeight;
-          beginY = event.targetTouches[0].pageY;
-          top = parseInt(ele.style.top) ? parseInt(ele.style.top) : 0;
-          temp = 0.01;
-        });
-        ele.addEventListener("touchmove", function (event: any) {
-          event.stopPropagation();
-          nowTop = parseInt(ele.style.top) ? parseInt(ele.style.top) : 0;
-          endY = event.targetTouches[0].pageY;
-          moveY = endY - beginY;
-          temp = temp + 0.01;
-          if (moveY > 0) {
-            // 向下
-            proxyData.opacityV = 1 - temp <= 0 ? 0 : 1 - temp;
-            if (moveY > tempMove) {
-              proxyData.hideTopImg = true;
-              proxyData.mapOpacity = 1 + temp >= 1 ? 1 : 1 + temp;
-            } else {
-              proxyData.hideTopImg = false;
-            }
-            if (proxyData.hideTopImg) {
-              ele.style.top = moveY + (245 - 50) + "px";
-            } else {
-              ele.style.top = moveY + "px";
-            }
-          } else {
-            //  向上
-            if (nowTop <= 0) {
-              // 滑动顶部后不让再滑动
-              ele.style.top = 0 + "px";
-            } else {
-              if (Math.abs(top + moveY) <= 256) {
-                proxyData.hideTopImg = false;
-                proxyData.opacityV = temp <= 1 ? temp : 1;
-                proxyData.mapOpacity = 1 - temp <= 0 ? 0 : 1 - temp;
-                ele.style.top = top + moveY - 256 + "px";
-              } else {
-                proxyData.hideTopImg = true;
-                proxyData.mapOpacity = temp <= 1 ? temp : 1;
-                ele.style.top = top + moveY + "px";
-              }
-              if (Math.abs(moveY) > houseHeight) {
-                proxyData.mapOpacity = 0;
-                proxyData.isBottom = false;
-              }
-            }
-          }
-        });
-        ele.addEventListener("touchend", function (event: any) {
-          if (moveY === 0) {
-            return;
-          }
-          event.stopPropagation();
-          if (moveY > 0) {
-            // 向下
-            if (moveY > tempMove) {
-              proxyData.hideTopImg = true;
-            } else {
-              proxyData.hideTopImg = false;
-            }
-          } else {
-            //向上
-            if (Math.abs(moveY) > tempMove) {
-              proxyData.hideTopImg = false;
-            } else {
-              proxyData.hideTopImg = true;
-            }
-          }
-          if (proxyData.hideTopImg) {
-            proxyData.opacityV = 0;
-            proxyData.mapOpacity = 1;
-            ele.style.top = screenHeight - houseHeight + "px";
-            proxyData.isBottom = true;
-          } else {
-            proxyData.opacityV = 1;
-            proxyData.mapOpacity = 0;
-            if (nowTop <= 0) {
-              // 页面滚动
-              ele.style.top = 0 + "px";
-            } else {
-              ele.style.top = 0 + "px";
-            }
-            proxyData.isBottom = false;
-          }
-        });
-      },
-      // 关闭提示弹窗
-      closeTip() {
-        proxyData.showSpaceTip = false;
-        clearInterval(proxyData.intervalTimer);
-      },
       // 清除定时器
       clearTimerSpaceInfo() {
         if (proxyData.spaceTimer) {
@@ -1578,6 +1366,19 @@ export default defineComponent({
           proxyData.getSpaceInfo();
         }, 2000);
       },
+      isWork: false,
+      isMetting: false,
+      // 判断对应的办公室的场景展示
+      checkIsSpaceScene() {
+        proxyData.scenarioArr.map((item: any) => {
+          if (item.sceneType === "OVERTIME") {
+            proxyData.isWork = true;
+          }
+          // if (item.sceneType === "DISCUSSING" || item.) {
+          //   proxyData.isMetting = true;
+          // }
+        });
+      },
       /**
        * 获取场景列表
        */
@@ -1591,22 +1392,32 @@ export default defineComponent({
           let resData: any = res;
           let data: any = resData?.data ?? [];
           proxyData.scenarioArr = data;
+          proxyData.checkIsSpaceScene();
         });
       },
       /**
        *查询空间加班记录
        */
       workkArr: workkArr,
+      secenTimer: secenTimer,
+      queryCustomAndScenceTimer(timer: any = 5000) {
+        if (proxyData.secenTimer) {
+          clearTimeout(proxyData.secenTimer);
+          proxyData.secenTimer = null;
+        }
+        proxyData.secenTimer = setTimeout(() => {
+          proxyData.queryCustomAndScence();
+        }, timer);
+      },
       queryCustomAndScence() {
         let params: any = {
           spaceId: proxyData.spaceInfo.spaceId,
-          // userId:proxyData.userInfo.userId,
-          // projectId:proxyData.userInfo.projectId
         };
         let str: any = setQueryConfig(params);
         queryCustomAndScence(str).then((res) => {
           let resData: any = res?.data ?? [];
           proxyData.workkArr = resData;
+          proxyData.queryCustomAndScenceTimer(5000);
         });
       },
       // 格式化当前页面展示的时间
@@ -1619,7 +1430,7 @@ export default defineComponent({
         // 获取场景配置
         proxyData.querySpaceSceneConfig();
         // 查询加班记录
-        proxyData.queryCustomAndScence();
+        proxyData.queryCustomAndScenceTimer(0);
         proxyData.timerSpaceInfo();
         // 获取空间下的设备信息
         proxyData.getEquipments();
@@ -1725,14 +1536,15 @@ export default defineComponent({
   box-sizing: border-box;
   padding: 3.33vh 20px 0 20px;
   font-size: 0;
-  background: linear-gradient(0deg, rgba(69, 33, 0, 0.2), rgba(69, 33, 0, 0.2)) ,url($bg) no-repeat;
+  background: linear-gradient(0deg, rgba(69, 33, 0, 0.2), rgba(69, 33, 0, 0.2)),
+    url($bg) no-repeat;
   background-size: 100% 100%;
 
   .main-left {
     // padding-left: 20px;
     display: inline-block;
     //width: 54%;
-   
+
     .left-top {
       width: 100%;
       overflow: hidden;

src/views/envmonitor/index1.vue

@@ -233,7 +233,7 @@ import { defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted, nextT
 import MapBox from '@/views/envmonitor/MapBox.vue'
 import Header from '@/components/header/Index.vue'
 import Comheader from '@/components/header/Comheader.vue'
-import Scenario from '@/views/envmonitor/components/Scenario.vue'
+import Scenario from '@/views/envmonitor/components/Scenario/Scenario.vue'
 import Air from '@/views/envmonitor/components/Air.vue'
 import Light from '@/views/envmonitor/components/Light.vue'
 import Curtain from '@/views/envmonitor/components/Curtain.vue'

src/views/envmonitor/mySpace/index.vue

@@ -47,6 +47,12 @@ export default defineComponent({
         })
       },
       /**
+       * 结束
+       */
+       loadinngEnd() {
+        Toast.clear()
+      },
+      /**
        *  获取常驻空间
        */
       getPermanentSpace() {
@@ -65,12 +71,6 @@ export default defineComponent({
         })
       },
       /**
-       * 结束
-       */
-      loadinngEnd() {
-        Toast.clear()
-      },
-      /**
        * 取消默认空间
        * @param id
        */

vue.config.js

@@ -37,32 +37,34 @@ module.exports = {
   outputDir,
   lintOnSave,
   transpileDependencies,
-  css: {
-    loaderOptions: {
-      postcss: {
-        plugins: [
-          require('postcss-px2rem-exclude')({
-            'remUnit':98,  //设计稿是750,那么这里的设置就是填750/10=75
-            'propList': ['*', '!border'],
-            'exclude': /node_modules|folder_name/i   // 解决UI库px转rem问题 配置忽略node包
-          })
-        ]
-      }
-    },
-  },
   // css: {
   //   loaderOptions: {
   //     postcss: {
   //       plugins: [
-  //         require('postcss-pxtorem')({ // 把px单位换算成rem单位
-  //           rootValue: 98, // vant官方使用的是37.5
-  //           selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
-  //           propList: ['*']
+  //         require('postcss-px2rem-exclude')({
+  //           'remUnit':98,  //设计稿是750,那么这里的设置就是填750/10=75
+  //           'propList': ['*', '!border','!border-left','!border-right'],
+  //           'exclude': /node_modules|folder_name/i   // 解决UI库px转rem问题 配置忽略node包
   //         })
   //       ]
   //     }
-  //   }
+  //   },
   // },
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [
+          require('postcss-pxtorem')({ // 把px单位换算成rem单位
+            rootValue: 98, // vant官方使用的是37.5
+            minPixelValue:4,
+            unitPrecision:3,
+            // selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
+            propList: ['*']
+          })
+        ]
+      }
+    }
+  },
   devServer: {
     hot: true,
     port: devPort,