소스 검색

fix:调光调色

chenzhen2 1 년 전
부모
커밋
b78db0ddd5

+ 1 - 0
.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     ecmaVersion: 2020
   },
   rules: {
+    "vue/no-use-v-if-with-v-for": "off",
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     '@typescript-eslint/ban-types': 'off',

BIN
public/images/page-officehome/lamp_close.png


BIN
public/images/page-officehome/lamp_open.png


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 4 - 0
public/images/page-officehome/lightColorControl.svg


+ 2 - 1
src/apis/envmonitor.ts

@@ -42,7 +42,8 @@ export const changeTempHttp = (params: any) => {
 }
 // 查询灯的状态(优先查采集的状态)
 export const getLampHttp = (params: any) => {
-  return https({ timeout: 1000 }).request<RootObject<any>>(`${duoduoenvService}light/status/query?spaceId=${params.spaceId}`, Method.GET, undefined, ContentType.json)
+  return https({ timeout: 2000 }).request<RootObject<any>>(`${duoduoenvService}light/status/query?spaceId=${params.spaceId}`, Method.GET, undefined, ContentType.json)
+  // return https({ timeout: 20000 }).request<RootObject<any>>(`${testApi}light/status/query?spaceId=${params.spaceId}`, Method.GET, undefined, ContentType.json)
 }
 
 // 批量操作 灯

+ 420 - 0
src/views/envmonitor/components/Light/LightTemp.vue

@@ -0,0 +1,420 @@
+<template>
+  <div class="light-temp">
+    <div class="light-tep-top">
+      <span>氛围灯</span>
+      <!-- <Switch
+        v-model="lampSw"
+        inactive-color="rgba(196, 196, 196, 0.4)"
+        class="switch-btn"
+      /> -->
+    </div>
+    <div class="bright-box" v-if="lightData.bright">
+      <div class="bight-text">
+        <span>亮度</span>
+        <span>{{ lightData.brightValueRate }}%</span>
+      </div>
+      <div class="light-control">
+        <div class="bight-slider" id="sliderId1">
+          <div class="item-now" :style="{ width: itemWidth }"></div>
+          <div class="slider-bar" id="handId1"></div>
+        </div>
+      </div>
+    </div>
+    <div class="bright-box" v-if="lightData.colorTemperature">
+      <div class="bight-text">
+        <span>色温</span>
+        <span>{{ lightData.colorTempValueRate }}%</span>
+      </div>
+      <div class="light-control">
+        <div class="bight-slider temp-slider" id="sliderId2">
+          <div class="slider-bar" id="handId2"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+    
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  nextTick,
+} from "vue";
+import { Switch, Dialog, Toast } from "vant";
+import { swiper } from "@/utils/swiper";
+import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
+import { parseImgUrl, setQueryConfig } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  props: {
+    lightData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: { Switch },
+  setup(props, contx) {
+    const propsVal = props;
+    let timeTemp: any = null;
+    let timeColor: any = null;
+    const proxyData = reactive({
+      lampSw: false,
+      itemWidth: "0%",
+      lightData: props.lightData,
+      swiperIinit: false,
+      // 状态控制调整
+      setSpaceContrl(data: any) {
+        setSpaceCondtioners(data).then((res: any) => {});
+      },
+      timeTemp: timeTemp,
+      timeTempNum: 0,
+      timeColor: timeColor,
+      timeColorNum: 0,
+      // 改变当前空间设置的值
+      changContrlVal(type: any) {
+        let data: any = [];
+        if (type == 1) {
+          data = [
+            {
+              id: proxyData.lightData.id,
+              code: "bright",
+              value: proxyData.lightData.brightValue,
+            },
+          ];
+          if(proxyData.timeTempNum==2){
+            proxyData.setSpaceContrl(data);
+          }
+        } else if (type == 2) {
+          data = [
+            {
+              id: proxyData.lightData.id,
+              code: "colorTemperature",
+              value: proxyData.lightData.colorTempValue,
+            },
+          ];
+          if(proxyData.timeColorNum==2){
+            proxyData.setSpaceContrl(data);
+          }
+        }
+      },
+
+      // 定时控制
+      setTimeContrl(type: any) {
+        if (type == 1) {
+          clearInterval(proxyData.timeTemp);
+          proxyData.timeTemp = setInterval(() => {
+            if (proxyData.timeTempNum >= 2) {
+              proxyData.timeTempNum = 0;
+            }
+            proxyData.timeTempNum++;
+          }, 1000);
+        } else if (type == 2) {
+          clearInterval(proxyData.timeColor);
+          proxyData.timeColor = setInterval(() => {
+            if (proxyData.timeColorNum >= 2) {
+              proxyData.timeColorNum = 0;
+            }
+            proxyData.timeColorNum++;
+          }, 1000);
+        }
+      },
+      // 设置调节滚动条的最大值和最小值
+      setLightDataMax() {
+        proxyData.lightData.brightMaxValue = proxyData.lightData.brightMaxValue
+          ? proxyData.lightData.brightMaxValue
+          : 100;
+        proxyData.lightData.colorTempMaxValue = proxyData.lightData
+          .colorTempMaxValue
+          ? proxyData.lightData.colorTempMaxValue
+          : 100;
+      },
+      // 计算滚动条样式的值
+      setBarValue(type: any, sliderWidth: any, left: any, barWidth: any) {
+        proxyData.setLightDataMax();
+        if (type == 1) {
+          //  亮度
+          let bright: any =
+            proxyData.lightData.brightMaxValue / (sliderWidth - barWidth);
+          let rate: any = 100 / proxyData.lightData.brightMaxValue;
+          proxyData.lightData.brightValueRate = left * bright * rate;
+          proxyData.lightData.brightValueRate = Math.floor(
+            proxyData.lightData.brightValueRate
+          );
+          let width: any =
+            proxyData.lightData.brightValueRate > 98
+              ? 98
+              : proxyData.lightData.brightValueRate;
+          proxyData.lightData.brightValue =
+            proxyData.lightData.brightValueRate * rate;
+          proxyData.itemWidth = width + "%";
+        } else if (type == 2) {
+          // 色温
+          let colorVal: any =
+            proxyData.lightData.colorTempMaxValue / (sliderWidth - barWidth);
+          let rate: any = 100 / proxyData.lightData.colorTempMaxValue;
+          proxyData.lightData.colorTempValueRate = left * colorVal * rate;
+          proxyData.lightData.colorTempValueRate = Math.floor(
+            proxyData.lightData.colorTempValueRate
+          );
+          proxyData.lightData.colorTempValue =
+            proxyData.lightData.colorTempValueRate * rate;
+        }
+      },
+      // 根据当前值设置页面的位置
+      getDefaultVal(type: any, sliderWidth: any, barWidth: any, handBox: any) {
+        // console.log("调用了----");
+        let left: any = "";
+        if (type == 1) {
+          proxyData.lightData.brightValue =
+            proxyData.lightData.brightValue || 0;
+          if (
+            proxyData.lightData.brightValue > proxyData.lightData.brightMaxValue
+          ) {
+            proxyData.lightData.brightValue =
+              proxyData.lightData.brightMaxValue;
+          }
+          let bright: any =
+            proxyData.lightData.brightMaxValue / (sliderWidth - barWidth);
+          let rate: any = 100 / proxyData.lightData.brightMaxValue;
+          // debugger;
+          left = proxyData.lightData.brightValue / rate / bright / rate;
+          proxyData.lightData.brightValueRate = Math.floor(
+            proxyData.lightData.brightValue / rate
+          );
+          let width: any =
+            proxyData.lightData.brightValue / rate > 98
+              ? 98
+              : proxyData.lightData.brightValue / rate;
+          proxyData.itemWidth = width + "%";
+        } else if (type == 2) {
+          proxyData.lightData.colorTempValue =
+            proxyData.lightData.colorTempValue || 0;
+          if (
+            proxyData.lightData.colorTempValue >
+            proxyData.lightData.colorTempMaxValue
+          ) {
+            proxyData.lightData.colorTempValue =
+              proxyData.lightData.colorTempMaxValue;
+          }
+          let colorVal: any =
+            proxyData.lightData.colorTempMaxValue / (sliderWidth - barWidth);
+          let rate: any = 100 / proxyData.lightData.colorTempMaxValue;
+          left = proxyData.lightData.colorTempValue / rate / colorVal / rate;
+          proxyData.lightData.colorTempValueRate = Math.floor(
+            proxyData.lightData.colorTempValue / rate
+          );
+        }
+        handBox.style.left = left + "px";
+      },
+      //亮度滑块滑动
+      endBoxSwiper() {
+        proxyData.swiperIinit = true;
+        let handBox: any = document.querySelector("#handId1");
+        let sliderBox: any = document.querySelector("#sliderId1");
+        let isMove: any = false;
+        let barLeft: any = 0;
+        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
+        let barWidth: any = handBox ? handBox.offsetWidth : 20;
+        if (!handBox) {
+          return;
+        }
+        proxyData.getDefaultVal(1, sliderWidth, barWidth, handBox);
+
+        handBox.addEventListener("touchstart", function (e: any) {
+          barLeft = isNaN(parseInt(handBox.style.left))
+            ? 0
+            : parseInt(handBox.style.left);
+          isMove = true;
+          proxyData.setTimeContrl(1)
+        });
+        handBox.addEventListener("touchend", function (e: any) {
+          isMove = false;
+          clearInterval(proxyData.timeTemp)
+        });
+
+        swiper(handBox, {
+          swipeLeft: function (e: any) {
+            if (isMove) {
+              barLeft = Math.abs(barLeft);
+              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
+              let left: any = barLeft - moveRealX;
+              left = left < 0 ? 0 : left;
+              // debugger
+              handBox.style.left = left + "px";
+              proxyData.setBarValue(1, sliderWidth, left, barWidth);
+              proxyData.changContrlVal(1)
+            }
+          },
+          swipeRight: function (e: any) {
+            // debugger;
+            if (isMove) {
+              barLeft = Math.abs(barLeft);
+              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
+              let left: any = barLeft + moveRealX;
+              left =
+                left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
+              handBox.style.left = left + "px";
+              proxyData.setBarValue(1, sliderWidth, left, barWidth);
+              proxyData.changContrlVal(1)
+            }
+          },
+        });
+      },
+      // 色温滑块滑动
+      tempBoxSwiper() {
+        proxyData.swiperIinit = true;
+        let handBox: any = document.querySelector("#handId2");
+        let sliderBox: any = document.querySelector("#sliderId2");
+        let isMove: any = false;
+        let barLeft: any = 0;
+        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
+        let barWidth: any = handBox ? handBox.offsetWidth : 20;
+        if (!handBox) {
+          return;
+        }
+        proxyData.getDefaultVal(2, sliderWidth, barWidth, handBox);
+        handBox.addEventListener("touchstart", function (e: any) {
+          barLeft = isNaN(parseInt(handBox.style.left))
+            ? 0
+            : parseInt(handBox.style.left);
+          isMove = true;
+          proxyData.setTimeContrl(2)
+        });
+        handBox.addEventListener("touchend", function (e: any) {
+          isMove = false;
+          clearInterval(proxyData.timeColor)
+        });
+
+        swiper(handBox, {
+          swipeLeft: function (e: any) {
+            if (isMove) {
+              barLeft = Math.abs(barLeft);
+              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
+              let left: any = barLeft - moveRealX;
+              left = left < 0 ? 0 : left;
+              // debugger
+              handBox.style.left = left + "px";
+              proxyData.setBarValue(2, sliderWidth, left, barWidth);
+              proxyData.changContrlVal(2)
+            }
+          },
+          swipeRight: function (e: any) {
+            // debugger;
+            if (isMove) {
+              barLeft = Math.abs(barLeft);
+              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
+              let left: any = barLeft + moveRealX;
+              left =
+                left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
+              handBox.style.left = left + "px";
+              proxyData.setBarValue(2, sliderWidth, left, barWidth);
+              proxyData.changContrlVal(2)
+            }
+          },
+        });
+      },
+      // 初始化滑动
+      async barSwiperInit() {
+        nextTick(() => {
+          proxyData.endBoxSwiper();
+          proxyData.tempBoxSwiper();
+        });
+      },
+    });
+
+    watch(props, (newProps: any) => {});
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      proxyData.barSwiperInit();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.light-temp {
+  padding: 10px;
+  .light-tep-top {
+    display: flex;
+    padding-bottom: 60px;
+    line-height: 31px;
+    justify-content: space-between;
+    span {
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 22px;
+
+      color: #000000;
+    }
+  }
+  .bright-box {
+    margin-bottom: 60px;
+    .bight-text {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 15px;
+      span {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: #1b2129;
+      }
+    }
+    .light-control {
+      .bight-slider {
+        position: relative;
+        display: flex;
+        height: 32px;
+        flex: 1;
+        background: #e8ecf0;
+        border-radius: 25px;
+        .item-now {
+          background: #ffe399;
+          border-radius: 25px 0 0 25px;
+        }
+
+        .slider-bar {
+          position: absolute;
+          width: 38px;
+          height: 38px;
+          background: #f6f9fe;
+          left: 0;
+          bottom: -2px;
+          z-index: 333;
+          border-radius: 50%;
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06),
+            0px 0px 8px rgba(0, 0, 0, 0.1);
+        }
+      }
+      .temp-slider {
+        background: linear-gradient(
+          90deg,
+          #ffc079 0%,
+          #ffe7d1 43.1%,
+          #f1efff 74.36%,
+          #c8d6ff 100%
+        );
+      }
+    }
+
+    .light-control-padding {
+      padding-top: 35px;
+      padding-bottom: 15px;
+    }
+  }
+}
+</style>
+    

+ 161 - 51
src/views/envmonitor/components/Light/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="light" v-if="lampList && lampList.length">
+    <!--如果有子设备-->
     <div class="light-top">
       <div class="light-desc">
         <p class="light-title">
@@ -10,38 +11,77 @@
         </p>
       </div>
       <div class="light-right">
-        <!-- <img :src="lightImg" alt="" />
-        <Switch
-          v-if="!showFlag"
-          :disabled="!userIsControl"
-          v-model="lampSw"
-          @click="eqChange('allLamp', '', 0)"
-          inactive-color="rgba(196, 196, 196, 0.4)"
-          class="switch-btn"
-        /> -->
-        <div class="switch-box">
-          <span class="switch-item">全开</span>
-          <span class="switch-item">全关</span>
+        <div class="switch-box" v-if="isShowChildLight">
+          <span class="switch-item" @click="eqChange('allLamp', true, 0)"
+            >全开</span
+          >
+          <span class="switch-item" @click="eqChange('allLamp', false, 0)"
+            >全关</span
+          >
         </div>
+        <img :src="lightImg" alt="" v-if="!isShowChildLight" />
       </div>
     </div>
-    <!--灯控制按钮-->
-    <div class="light-control" v-for="(item, index) in lampList" :key="item.id">
-      <div class="control-title">
-        {{ item.localName }}
+
+    <div class="light-main-control" v-if="!isShowChildLight">
+      <div class="main-color">
+        <img
+          :src="lightColorImg"
+          @click="showLightColorCtrol(lampList[0])"
+          alt=""
+        />
       </div>
       <Switch
-        active-color="$elActiveColor"
+        v-if="!showFlag"
         :disabled="!userIsControl"
-        v-model="item.switch"
-        @click="eqChange('main', item, index)"
-        inactive-color="rgba(196, 196, 196, 0.2)"
+        v-model="lampSw"
+        @click="eqChange('allLamp', '', 0)"
+        inactive-color="rgba(196, 196, 196, 0.4)"
         class="switch-btn"
       />
     </div>
-    <div class="show-all" @click.stop="showAll" v-if="isShowChildLight">
+    <!--灯控制按钮-->
+    <div class="light-box" v-if="isShowChildLight">
+      <template v-for="(item, index) in lampList" :key="item.id">
+        <div
+          class="light-control"
+          @click="showLightColorCtrol(item, $event)"
+          v-if="(!showFlag && index < 2) || showFlag"
+        >
+          <div class="control-top">
+            <img :src="lightImg" alt="" />
+            <Switch
+              active-color="$elActiveColor"
+              :disabled="!userIsControl"
+              v-model="item.switch"
+              size="14px"
+              @click.stop="eqChange('main', item, index)"
+              inactive-color="rgba(196, 196, 196, 0.2)"
+              class="child-switch"
+            />
+          </div>
+          <div class="control-bottom">
+            <div class="control-title">
+              {{ item.localName }}
+            </div>
+            <img
+              v-if="item.bright || item.colorTemperature"
+              :style="{ opacity: item.switch ? '1' : '0.3' }"
+              :src="lightColorImg"
+              alt=""
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div
+      class="show-all"
+      v-if="lampList && lampList.length > 2"
+      @click.stop="showAll"
+    >
       <van-icon :name="lightIcon" class="light-icon" />
-      <span>显示全部</span>
+      <span @click="showAll">展开更多</span>
     </div>
   </div>
 </template>
@@ -114,13 +154,21 @@ export default defineComponent({
       lampList: lampList,
       lightsStatusTimer: lightsStatusTimer,
       startCheckLightsTime: 0,
-      lightImg: parseImgUrl("page-officehome", "lamp_close_v2.png"),
+      lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
+      lightImg: parseImgUrl("page-officehome", "lamp_close.png"),
       lampSw: false, // 主灯开关
       // 点击展示所有的登录
       showAll() {
         proxyData.showFlag = !proxyData.showFlag;
         proxyData.lightIcon = "arrow-down";
       },
+      // 点击展示调色和调温弹窗
+      showLightColorCtrol(item: any, e: any = null) {
+        console.log(e.target)
+        if (item.switch) {
+          contx.emit("showLightColorCtrol", item);
+        }
+      },
       // 检查设备是否执行空间服务时间
       checkDeviceIsExeSpaceTime(deviceAll: any = []) {
         if (proxyData.controlMode !== 1) {
@@ -173,8 +221,8 @@ export default defineComponent({
                 proxyData.lampSw = lampOpen; // 主灯开关
                 proxyData.lampList = content;
                 proxyData.lightImg = proxyData.lampSw
-                  ? parseImgUrl("page-officehome", "lamp_open_v2.png")
-                  : parseImgUrl("page-officehome", "lamp_close_v2.png");
+                  ? parseImgUrl("page-officehome", "lamp_open.png")
+                  : parseImgUrl("page-officehome", "lamp_close.png");
               }
             }
             console.log("执行了----====");
@@ -192,6 +240,10 @@ export default defineComponent({
             let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
               proxyData.lampList
             );
+            if (item !== "") {
+              proxyData.lampSw = item;
+            }
+
             if (
               proxyData.forceOverTimeFlag &&
               proxyData.lampSw &&
@@ -476,12 +528,38 @@ export default defineComponent({
   margin: 15px 0px;
 }
 
-.light-top {
+.light-main {
   padding-left: 20px;
   padding-bottom: 10px;
   padding-top: 10px;
+}
+
+.light-top {
+  padding-left: 20px;
+  // padding-bottom: 10px;
+  padding-top: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+.light-main-control {
+  padding-bottom: 15px;
+  padding-left: 20px;
+  padding-right: 15px;
   display: flex;
   justify-content: space-between;
+  .main-color {
+    width: 36px;
+    height: 36px;
+    // line-height: 36px;
+    text-align: center;
+    border-radius: 50%;
+    background: #f7f9fa;
+    img {
+      width: 20px;
+      height: 20px;
+      margin-top: 8px;
+    }
+  }
 }
 
 .light-desc {
@@ -518,7 +596,7 @@ export default defineComponent({
 
   img {
     //width: 98px;
-    height: 120px;
+    height: 100px;
   }
 
   .switch-btn {
@@ -553,40 +631,72 @@ export default defineComponent({
 }
 
 .show-all {
-  font-family: PingFang SC;
-  //display: none;
+  font-family: "PingFang SC";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 17px;
+  padding-bottom: 15px;
+  padding-top: 5px;
+  color: #cccccc;
+  text-align: center;
   .light-icon {
     font-size: 12px;
     padding-right: 10px;
   }
-
-  padding-top: 28px;
-  padding-bottom: 22px;
-  font-size: 14px;
-  line-height: 16px;
-  color: #c4c4c4;
-  margin: 0px 5px;
 }
 
+.light-box {
+  padding: 0 12px;
+  font-size: 0;
+}
 .light-control {
-  display: flex;
-  width: 50%;
-  height: 148px;
-  justify-content: space-between;
-  padding: 10px 15px 10px 28px;
-  border-top: 1px solid rgba(196, 196, 196, 0.4);
+  display: inline-block;
+  width: 49%;
+  vertical-align: middle;
+  background: #f7f9fa;
+  border-radius: 16px;
+  margin-bottom: 12px;
+  // margin-left: 2%;
 
-  .control-title {
-    flex: 1 110px;
-    font-weight: 500;
-    font-family: PingFang SC;
-    font-size: 16px;
-    line-height: 30px;
-    color: #4d5262;
+  &:nth-child(2n - 1) {
+    margin-right: 2%;
+  }
+  .control-top {
+    display: flex;
+    padding-right: 16px;
+    padding-bottom: 12px;
+    justify-content: space-between;
+    img {
+      width: 80px;
+      height: 70px;
+      vertical-align: middle;
+    }
+    .child-switch {
+      margin-top: 16px;
+      display: inline-block;
+      vertical-align: middle;
+    }
   }
 
-  .switch-btn {
-    margin-top: 5px;
+  .control-bottom {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 16px;
+    padding-left: 18px;
+    padding-bottom: 15px;
+    .control-title {
+      font-weight: 500;
+      font-family: PingFang SC;
+      font-size: 16px;
+      line-height: 20px;
+      color: #4d5262;
+    }
+    img {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
   }
 }
 </style>

+ 24 - 1
src/views/envmonitor/index.vue

@@ -213,6 +213,7 @@
         :controlMode="controlMode"
         :seviceEquipmentList="seviceEquipmentList"
         @triggerWork="triggerWork"
+        @showLightColorCtrol="showLightColorCtrol"
         id="lightId"
         key="lightId"
         :userIsControl="userIsControl"
@@ -306,6 +307,19 @@
       v-if="isShowContact"
       @closeDailog="closeContactDailog"
     ></contact>
+
+    <!--灯灯调光和调色温-->
+    <van-popup
+      v-model:show="isLightColorFlag"
+      position="right"
+      :close-on-click-overlay="true"
+      class="popup-content"
+      teleport="#app"
+    >
+      <div>
+        <light-temp :lightData="lightData" v-if="isLightColorFlag"></light-temp>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -340,6 +354,7 @@ import NavBar from "@/views/envmonitor/NavBar.vue";
 import ScenarioDailog from "@/views/envmonitor/components/Scenario/scenarioDailog.vue";
 import Detail from "@/views/envmonitor/detail.vue";
 import ComMap from "@/views/envmonitor/components/Map/index.vue";
+import LightTemp from "@/views/envmonitor/components/Light/LightTemp.vue";
 import { Icon, Popup, Dialog, Toast } from "vant";
 import { useRouter, useRoute } from "vue-router";
 import {
@@ -382,7 +397,7 @@ export default defineComponent({
     MapBox,
     ComMap,
     ScenarioDailog,
-    // Scenario,
+    LightTemp,
     Header,
     Comheader,
     NavBar,
@@ -450,6 +465,7 @@ export default defineComponent({
     let intervalTimer: any = null;
     const workInfo: any = {};
     const userInfo: any = getUserInfo();
+    let lightData: any = {};
     let spaceTimer: any = null;
     let listSen: any = [
       {
@@ -787,6 +803,13 @@ export default defineComponent({
       showContact() {
         proxyData.isShowContact = true;
       },
+      isLightColorFlag: false,
+      lightData: lightData,
+      //  展示调光,调温弹窗
+      showLightColorCtrol(lightData: any) {
+        proxyData.isLightColorFlag = true;
+        proxyData.lightData = lightData;
+      },
       closeContactDailog() {
         proxyData.isShowContact = false;
       },

+ 2 - 2
vue.config.js

@@ -116,8 +116,8 @@ module.exports = {
       },
       '/sgipad/test/': {
         // target: 'https://duoduoenv.sagacloud.cn',
-        // target: 'http://192.168.0.13:52009',
-        target: 'http://192.168.4.54:52009',
+        target: 'http://192.168.88.6:52009',    // 永琪
+        // target: 'http://192.168.4.54:52009', // 小静
         // target: 'http://192.168.16.168:52015',
         changeOrigin: true,
         pathRewrite: {