fix: 效果图更改

src/assets/taiguv1/svg/Curtain_card_active_icon.svg

@@ -1,11 +1,9 @@
-<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M3.58094 18.0639V20.9999H2.25781V2.96875" stroke="#001428" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M20.4438 18.0639V20.9999H21.767V2.96875" stroke="#001428" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M3.58105 5.94336H20.4436" stroke="#8E0003" stroke-width="0.8" stroke-miterlimit="10"/>
-<path id="Vector_4" d="M3.58105 9.60352H20.4436" stroke="#8E0003" stroke-width="0.8" stroke-miterlimit="10"/>
-<path id="Vector_5" d="M3.58105 13.0801H20.4436" stroke="#8E0003" stroke-width="0.8" stroke-miterlimit="10"/>
-<path id="Vector_6" d="M3.58105 3.29688V16.673H20.4436V3.29688" stroke="#8E0003" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_7" d="M23.0514 0.84375H0.973633V2.96847H23.0514V0.84375Z" stroke="#001428" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.58094 22.0639V24.9999H5.25781V6.96875" stroke="#001428" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.4438 22.0639V24.9999H24.767V6.96875" stroke="#001428" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58105 9.94336H23.4436" stroke="#8E0003" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M6.58105 13.6035H23.4436" stroke="#8E0003" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M6.58105 17.0801H23.4436" stroke="#8E0003" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M6.58105 7.29688V20.673H23.4436V7.29688" stroke="#8E0003" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.0514 4.84375H3.97363V6.96847H26.0514V4.84375Z" stroke="#001428" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/assets/taiguv1/svg/add_icon.svg

@@ -0,0 +1,7 @@
+<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M12.75 0.533203C5.70978 0.533203 0 6.24299 0 13.2832C0 20.3234 5.70978 26.0332 12.75 26.0332C19.7902 26.0332 25.5 20.3234 25.5 13.2832C25.5 6.24299 19.7902 0.533203 12.75 0.533203ZM12.75 24.9245C6.31956 24.9245 1.1087 19.7136 1.1087 13.2832C1.1087 6.85277 6.31956 1.6419 12.75 1.6419C19.1804 1.6419 24.3913 6.85277 24.3913 13.2832C24.3913 19.7136 19.1804 24.9245 12.75 24.9245Z" fill="#001428"/>
+<path id="Vector_2" d="M6.48486 13.5469H19.0131" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12.75 7.2832V19.8115" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/add_icon_active.svg

@@ -0,0 +1,7 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M12.75 0C5.70978 0 0 5.70978 0 12.75C0 19.7902 5.70978 25.5 12.75 25.5C19.7902 25.5 25.5 19.7902 25.5 12.75C25.5 5.70978 19.7902 0 12.75 0ZM12.75 24.3913C6.31956 24.3913 1.1087 19.1804 1.1087 12.75C1.1087 6.31956 6.31956 1.1087 12.75 1.1087C19.1804 1.1087 24.3913 6.31956 24.3913 12.75C24.3913 19.1804 19.1804 24.3913 12.75 24.3913Z" fill="#001428"/>
+<path id="Vector_2" d="M6.48486 13.0137H19.0131" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12.75 6.75V19.2783" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/air_icon_close.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M21.9233 15.8661V12.4046C21.9233 11.9456 21.7409 11.5053 21.4164 11.1808C21.0918 10.8562 20.6515 10.6738 20.1925 10.6738H9.80792C9.34888 10.6738 8.90866 10.8562 8.58407 11.1808C8.2595 11.5053 8.07715 11.9456 8.07715 12.4046V15.8661" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5192 3.75H5.48077C4.52489 3.75 3.75 4.52489 3.75 5.48077V14.1346C3.75 15.0905 4.52489 15.8654 5.48077 15.8654H24.5192C25.4751 15.8654 26.25 15.0905 26.25 14.1346V5.48077C26.25 4.52489 25.4751 3.75 24.5192 3.75Z" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.21094 24.5183H7.38401C8.72225 24.5183 9.80709 23.4335 9.80709 22.0953V20.1914" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.7885 24.5183H22.6155C21.2772 24.5183 20.1924 23.4335 20.1924 22.0953V20.1914" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 26.2491V20.1914" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/air_icon_open.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9233 15.8661V12.4046C21.9233 11.9456 21.7409 11.5053 21.4164 11.1808C21.0918 10.8562 20.6515 10.6738 20.1925 10.6738H9.80792C9.34888 10.6738 8.90866 10.8562 8.58407 11.1808C8.2595 11.5053 8.07715 11.9456 8.07715 12.4046V15.8661" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5192 3.75H5.48077C4.52489 3.75 3.75 4.52489 3.75 5.48077V14.1346C3.75 15.0905 4.52489 15.8654 5.48077 15.8654H24.5192C25.4751 15.8654 26.25 15.0905 26.25 14.1346V5.48077C26.25 4.52489 25.4751 3.75 24.5192 3.75Z" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.21094 24.5183H7.38401C8.72225 24.5183 9.80709 23.4335 9.80709 22.0953V20.1914" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.7885 24.5183H22.6155C21.2772 24.5183 20.1924 23.4335 20.1924 22.0953V20.1914" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 26.2491V20.1914" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/taiguv1/svg/auto_icon.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M12.75 0.304688C5.70978 0.304688 0 6.01447 0 13.0547C0 20.0949 5.70978 25.8047 12.75 25.8047C19.7902 25.8047 25.5 20.0949 25.5 13.0547C25.5 6.01447 19.7902 0.304688 12.75 0.304688ZM12.75 24.696C6.31956 24.696 1.1087 19.4851 1.1087 13.0547C1.1087 6.62425 6.31956 1.41338 12.75 1.41338C19.1804 1.41338 24.3913 6.62425 24.3913 13.0547C24.3913 19.4851 19.1804 24.696 12.75 24.696Z" fill="#001428"/>
+<path id="Vector_2" d="M7.80469 18.8195L12.7495 7.28906L17.6943 18.8195M9.3236 15.5267H16.1643" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/auto_icon_active.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M12.75 0C5.70978 0 0 5.70978 0 12.75C0 19.7902 5.70978 25.5 12.75 25.5C19.7902 25.5 25.5 19.7902 25.5 12.75C25.5 5.70978 19.7902 0 12.75 0ZM12.75 24.3913C6.31956 24.3913 1.1087 19.1804 1.1087 12.75C1.1087 6.31956 6.31956 1.1087 12.75 1.1087C19.1804 1.1087 24.3913 6.31956 24.3913 12.75C24.3913 19.1804 19.1804 24.3913 12.75 24.3913Z" fill="#001428"/>
+<path id="Vector_2" d="M7.80469 18.5148L12.7495 6.98438L17.6943 18.5148M9.3236 15.222H16.1643" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/lamp_close_p_icon.svg

@@ -0,0 +1,8 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M23.0848 27.9141C23.0848 30.7225 20.8088 32.9991 18.0004 32.9991C15.192 32.9991 12.916 30.7225 12.916 27.9141" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5419 11.8322C20.5419 13.7958 21.6744 15.585 23.4479 16.4278C27.7422 18.4675 30.7114 22.8451 30.7114 27.9158H5.28809C5.28809 22.8451 8.25724 18.4675 12.5515 16.4278C14.3244 15.5856 15.4575 13.7945 15.4575 11.8322V10.6281C15.4575 9.22426 16.5958 8.08594 17.9997 8.08594C19.4036 8.08594 20.5419 9.22426 20.5419 10.6281V11.8322Z" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 3V8.08504" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.916 3H23.0848" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/minus_icon.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 48097606">
+<path id="Vector" d="M12.75 0.457031C5.70978 0.457031 0 6.16681 0 13.207C0 20.2472 5.70978 25.957 12.75 25.957C19.7902 25.957 25.5 20.2472 25.5 13.207C25.5 6.16681 19.7902 0.457031 12.75 0.457031ZM12.75 24.8483C6.31956 24.8483 1.1087 19.6375 1.1087 13.207C1.1087 6.7766 6.31956 1.56573 12.75 1.56573C19.1804 1.56573 24.3913 6.7766 24.3913 13.207C24.3913 19.6375 19.1804 24.8483 12.75 24.8483Z" fill="#001428"/>
+<path id="Vector_2" d="M6.49805 13.207H19.0152" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/minus_icon_active.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 48097606">
+<path id="Vector" d="M12.75 0C5.70978 0 0 5.70978 0 12.75C0 19.7902 5.70978 25.5 12.75 25.5C19.7902 25.5 25.5 19.7902 25.5 12.75C25.5 5.70978 19.7902 0 12.75 0ZM12.75 24.3913C6.31956 24.3913 1.1087 19.1804 1.1087 12.75C1.1087 6.31956 6.31956 1.1087 12.75 1.1087C19.1804 1.1087 24.3913 6.31956 24.3913 12.75C24.3913 19.1804 19.1804 24.3913 12.75 24.3913Z" fill="#001428"/>
+<path id="Vector_2" d="M6.49805 12.75H19.0152" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/taiguv1/svg/stop_active_icon.svg

@@ -1,7 +1,7 @@
-<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 48097606">
-<path id="Vector" d="M8.5 0.333984C3.80652 0.333984 0 4.14051 0 8.83398C0 13.5275 3.80652 17.334 8.5 17.334C13.1935 17.334 17 13.5275 17 8.83398C17 4.14051 13.1935 0.333984 8.5 0.333984ZM8.5 16.5949C4.21304 16.5949 0.73913 13.1209 0.73913 8.83398C0.73913 4.54703 4.21304 1.07311 8.5 1.07311C12.787 1.07311 16.2609 4.54703 16.2609 8.83398C16.2609 13.1209 12.787 16.5949 8.5 16.5949Z" fill="#001428"/>
-<path id="Vector_2" d="M7 5.33398L7 12.334" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M10 5.33398L10 12.334" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M12.75 0.224609C5.70978 0.224609 0 5.93439 0 12.9746C0 20.0148 5.70978 25.7246 12.75 25.7246C19.7902 25.7246 25.5 20.0148 25.5 12.9746C25.5 5.93439 19.7902 0.224609 12.75 0.224609ZM12.75 24.6159C6.31956 24.6159 1.1087 19.405 1.1087 12.9746C1.1087 6.54417 6.31956 1.33331 12.75 1.33331C19.1804 1.33331 24.3913 6.54417 24.3913 12.9746C24.3913 19.405 19.1804 24.6159 12.75 24.6159Z" fill="#001428"/>
+<path id="Vector_2" d="M10.5 7.72461L10.5 18.2246" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M15 7.72461L15 18.2246" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>

src/assets/taiguv1/svg/stop_icon.svg

@@ -1,7 +1,7 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 48097606">
-<path id="Vector" d="M8.5 0C3.80652 0 0 3.80652 0 8.5C0 13.1935 3.80652 17 8.5 17C13.1935 17 17 13.1935 17 8.5C17 3.80652 13.1935 0 8.5 0ZM8.5 16.2609C4.21304 16.2609 0.73913 12.787 0.73913 8.5C0.73913 4.21304 4.21304 0.73913 8.5 0.73913C12.787 0.73913 16.2609 4.21304 16.2609 8.5C16.2609 12.787 12.787 16.2609 8.5 16.2609Z" fill="#001428"/>
-<path id="Vector_2" d="M7 5L7 12" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M10 5L10 12" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M12.75 0C5.70978 0 0 5.70978 0 12.75C0 19.7902 5.70978 25.5 12.75 25.5C19.7902 25.5 25.5 19.7902 25.5 12.75C25.5 5.70978 19.7902 0 12.75 0ZM12.75 24.3913C6.31956 24.3913 1.1087 19.1804 1.1087 12.75C1.1087 6.31956 6.31956 1.1087 12.75 1.1087C19.1804 1.1087 24.3913 6.31956 24.3913 12.75C24.3913 19.1804 19.1804 24.3913 12.75 24.3913Z" fill="#001428"/>
+<path id="Vector_2" d="M10.5 7.5L10.5 18" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M15 7.5L15 18" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>

src/components/slider/Slider copy.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="slider-container" ref="slider-container">
+    <div class="slider-track">
+      <span class="slider-internalValue-text">{{ min }}</span>
+      <div
+        class="slider-progress"
+        :style="{ width: `${progressWidth}%` }"
+        @touchstart="startDrag"
+        @touchmove="onDrag"
+        @touchend="endDrag">
+        <span class="slider-progress-line"></span>
+      </div>
+      <span
+        v-if="isFollow"
+        class="slider-internal-text"
+        :style="{ left: isFollow && progressWidth < 86 ? `calc(${progressWidth}% + 10px)` : 'auto', color: maxColor }"
+        >{{ showValue ? internalValue : max }}<sup class="slider-internal-text-suffix">{{ suffix }}</sup> </span
+      >
+      <span
+        class="slider-max-text"
+        :style="{color: maxColor }"
+        >{{ max }}</span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineModel, defineProps, onMounted, ref, useTemplateRef, watch } from 'vue'
+
+const emit = defineEmits(['onEnd', 'onStart'])
+const props = defineProps({
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  isFollow: {
+    type: Boolean,
+    default: false
+  },
+  suffix: {
+    type: String,
+    default: ''
+  },
+  showValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const model = defineModel()
+watch(
+  () => model.value,
+  newValue => {
+    if (newValue) {
+      internalValue.value = newValue
+    }
+  }
+)
+const internalValue = ref(model.value || props.min)
+const isDragging = ref(false)
+let animationFrameId = null
+const sliderContainer = useTemplateRef('slider-container')
+const progressWidth = computed(() => {
+  const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
+  return `${Math.max(percentage, 10)}`
+})
+
+// const computedTrackBackground = computed(() => {
+//   const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
+//   return `linear-gradient(to right, #ff4d4f ${percentage}%, #e0e0e0 ${percentage}%)`
+// })
+
+const maxColor = computed(() => {
+  const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
+  return percentage >= 95 ? 'rgba(255, 255, 255, 0.6)' : 'rgb(116, 128, 141)'
+})
+
+const startDrag = event => {
+  isDragging.value = true
+  emit('onStart', internalValue.value)
+}
+
+const onDrag = event => {
+  if (!isDragging.value) return
+
+  const touch = event.touches[0]
+
+  const sliderRect = sliderContainer.value.getBoundingClientRect()
+
+  const offsetX = touch.clientX - sliderRect.left
+  //   console.log(touch, sliderRect, offsetX)
+  // 计算百分比并确保在 0 到 1 之间
+  const percentage = Math.min(Math.max(offsetX / sliderRect.width, 0), 1)
+  const newValue = Math.round(percentage * (props.max - props.min) + props.min)
+
+  // 更新 internalValue
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+  animationFrameId = requestAnimationFrame(() => {
+    model.value = internalValue.value = newValue
+    // emit('update:modelValue', internalValue.value) // 确保使用正确的事件名称
+  })
+}
+const endDrag = () => {
+  isDragging.value = false
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+  emit('onEnd')
+}
+
+onMounted(() => {
+  // 这里可以添加初始化逻辑
+})
+</script>
+
+<style scoped lang="scss">
+@mixin text-middle($left: auto, $right: auto) {
+  position: absolute;
+  top: 50%;
+  left: $left;
+  right: $right;
+  transform: translate(0, -50%);
+  font-size: 11px;
+  z-index: 6;
+  color: rgba(255, 255, 255, 0.6);
+  pointer-events: none;
+}
+
+.slider {
+  &-container {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+
+    height: 100%;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.6);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+  &-track {
+    position: absolute;
+    box-sizing: border-box;
+    width: calc(100% - 4px);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    /* padding: 2px; */
+    height: 100%; /* 设置轨道高度为 20px */
+    border-radius: 10px; /* 圆角 */
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+  &-progress {
+    display: flex;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0 6px;
+    font-size: 11px;
+    position: absolute;
+    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%);
+    left: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    min-width: 4px;
+    height: calc(100% - 4px);
+    border-radius: 10px;
+    position: relative;
+    min-width: 30px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    &-line {
+      position: absolute;
+      height: 12px;
+      width: 2px;
+      background: rgba(255, 255, 255, 0.8);
+      position: absolute;
+      right: 6px;
+      transform: translate(-50%, 0);
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+  }
+  &-internalValue-text {
+    @include text-middle(6px, auto);
+  }
+  &-max-text {
+    @include text-middle(auto, 10px);
+    color: rgb(116, 128, 141);
+  }
+  &-internal-text{
+    @include text-middle(auto, 10px);
+    color: #001428;
+    font-family: Jost;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 300;
+    &-suffix {
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 15px;
+    }
+  }
+}
+</style>

src/hooks/useDeviceControl.js

@@ -12,6 +12,9 @@ const COMMAND_MAPPINGS = {
   },
   curtain: {
     isOpen: () => ({ code: 'EquipOffSet', value: val => (val ? 1 : 0) })
+  },
+  audio: {
+    isOpen: item => ({ code: item.inCloudSetCode, value: val => (val ? 1 : 0) })
   }
 }
 
@@ -37,6 +40,7 @@ const assemblyCommand = type => (commandVal, command, data) => {
 const assemblyAirCommand = assemblyCommand('air')
 const assemblyLampCommand = assemblyCommand('lamp')
 const assemblyCurtainCommand = assemblyCommand('curtain')
+const assemblyAudioCommand = assemblyCommand('audio')
 
 // 初始化下发指令
 const initDeviceCommand = data => {
@@ -91,6 +95,7 @@ export default function useDeviceControl() {
     assemblyAirCommand,
     assemblyLampCommand,
     assemblyCurtainCommand,
+    assemblyAudioCommand,
     sendCommands,
     initDeviceCommand
   }

src/store/modules/taiguv1/index.js

@@ -1,6 +1,7 @@
 const state = {
   airSwtichStatus: {},
-  lampSwitchStatus: {}
+  lampSwitchStatus: {},
+  audioSwitchStatus:{}
 }
 
 const mutations = {
@@ -11,6 +12,10 @@ const mutations = {
   SET_LAMP_STATUS: (state, lamp) => {
     let { id, status } = lamp
     state.lampSwitchStatus[id] = status
+  },
+  SET_AUDIO_STATUS:(state,audio)=>{
+    let {id,status} = audio
+    state.audioSwitchStatus[id] = status
   }
 }
 
@@ -38,6 +43,12 @@ const actions = {
         }
       }, 1000 * 5)
     })(lamp)
+  },
+  setAudioStatus({commit,state},audio){
+    commit('SET_AUDIO_STATUS', audio);
+    // (function(){
+
+    // })(audio)
   }
 }
 

src/views/envmonitor/taiguv1/components/Air/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="volumn-box" :class="airData.isOpen ? 'active' : ''">
+  <div class="volumn-box" :class="airData.isOpen ? 'activeShow' : ''">
     <div>
       <div class="top">
         <img :src="parseImgUrl('taiguv1/envmonitor', airData.isOpen ? 'active/air-con.svg' : 'air-con.svg')" alt="" />
@@ -23,8 +23,7 @@
           <div class="status">{{ airData.isOpen ? '已开启' : '已关闭' }}</div>
         </div>
         <div class="temp" v-if="airData.isOpen">
-          {{ airData.tempSet }}
-          <sup>℃</sup>
+          {{ airData.tempSet || 16}}<sup>℃</sup>
         </div>
       </div>
       <!--温度⏭️-->
@@ -48,14 +47,14 @@
           <div class="text">风量调节</div>
         </div>
         <div class="volume-right">
-          <div class="control-item" :ref="setRef" @click.prevent.stop="handle('minus')">
-            <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'minus.svg')" />
+          <div class="control-item" :ref="setRef" data-type="minus" @click.prevent.stop="handle('minus')">
+            <img class="icon" :src="buttonStates.minus ? MinusIconActive : MinusIcon" />
           </div>
-          <div class="control-item" :ref="setRef" @click.prevent.stop="handle('plus')">
-            <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'plus.svg')" />
+          <div class="control-item" :ref="setRef" data-type="plus" @click.prevent.stop="handle('plus')">
+            <img class="icon" :src="buttonStates.plus ? AddIconActive : AddIcon" />
           </div>
-          <div class="control-item" :class="airData.isAutoGear ? 'active' : ''" @click.prevent.stop="handle('auto')">
-            A
+          <div class="control-item"   @click.prevent.stop="handle('auto')">
+            <img class="icon" :src="airData.isAutoGear ? AutoIconActive : AutoIcon" />
           </div>
         </div>
       </div>
@@ -64,6 +63,13 @@
 </template>
 
 <script setup>
+import AddIcon from '@/assets/taiguv1/svg/add_icon.svg'
+import AddIconActive from '@/assets/taiguv1/svg/add_icon_active.svg'
+import AutoIcon from '@/assets/taiguv1/svg/auto_icon.svg'
+import AutoIconActive from '@/assets/taiguv1/svg/auto_icon_active.svg'
+import MinusIcon from '@/assets/taiguv1/svg/minus_icon.svg'
+import MinusIconActive from '@/assets/taiguv1/svg/minus_icon_active.svg'
+
 import FilterIcon from '@/assets/taiguv1/svg/filter_icon.svg'
 import Slider from '@/components/slider/Slider.vue'
 import SwitchButton from '@/components/switch-button/SwitchButton.vue'
@@ -164,6 +170,11 @@ const allAirStatus = computed(() => store.state.taiguv1.airSwtichStatus)
 
 const emit = defineEmits(['getStatus'])
 
+const buttonStates = ref({
+  minus: false,
+  plus: false
+})
+
 onMounted(() => {
   nextTick(() => {
     nextTick(() => {
@@ -174,15 +185,18 @@ onMounted(() => {
   })
 })
 
-// 添加 touchstart 处理函数
 const handleTouchStart = event => {
   const button = event.currentTarget
+  const type = button.dataset.type
   button.classList.add('active')
+  buttonStates.value[type] = true
+  
   setTimeout(() => {
     button.classList.remove('active')
+    buttonStates.value[type] = false
   }, 200)
 }
-// 添加 onUnmounted 钩子
+
 onUnmounted(() => {
   controlBtn.value.forEach(button => {
     button.removeEventListener('touchstart', handleTouchStart)
@@ -203,16 +217,13 @@ const handle = type => {
     }
     airData.value.isAutoGear = false
   } else if (type === 'auto') {
+    airData.value.gear = 4
     airData.value.isAutoGear = true
   }
   setAirStatus('gear')
 }
 
 const setAirStatus = type => {
-  // if (type == 'isOpen') {
-  //   airData.value.lastSwitchStatus = airData.value.isOpen
-  // }
-  // console.log(airData.isOpen, 'airData.isOpen')
   if (type == 'isOpen') {
     store.dispatch('taiguv1/setAirStatus', {
       id: 'all',
@@ -273,23 +284,17 @@ const searchMore = () => {
   }
   .bottom {
     width: 100%;
-    // margin-top: 18vh;
-    // margin-top: 109px;
     .air-info {
       display: flex;
       justify-content: space-between;
       align-items: end;
       .temp {
-        //styleName: En/H2;
-        width: 60px;
-        // text-align: right;
         font-family: Jost;
         font-size: 20px;
         font-weight: 300;
         line-height: 28px;
         color: rgba(0, 20, 40, 1);
         sup {
-          //styleName: En/Body XS;
           font-family: Jost;
           font-size: 11px;
           font-weight: 400;
@@ -299,7 +304,6 @@ const searchMore = () => {
       }
     }
     .text {
-      //styleName: Chi/Body Large;
       font-family: PingFang SC;
       font-size: 16px;
       font-weight: 300;
@@ -312,7 +316,6 @@ const searchMore = () => {
       padding-bottom: 2px;
     }
     .status {
-      //styleName: Chi/Body XS;
       font-family: PingFang SC;
       font-size: 11px;
       font-weight: 400;
@@ -335,7 +338,7 @@ const searchMore = () => {
     border: none;
   }
 }
-.active {
+.activeShow {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
@@ -359,7 +362,6 @@ const searchMore = () => {
       height: 3.33vh;
       line-height: 1;
       span {
-        //styleName: En/Body Small;
         display: inline-block;
         margin-right: 5px;
         font-family: Jost;
@@ -375,7 +377,6 @@ const searchMore = () => {
       }
     }
     .text {
-      //styleName: Chi/Body XS;
       font-family: PingFang SC;
       font-size: 11px;
       font-weight: 400;
@@ -391,52 +392,11 @@ const searchMore = () => {
     .control-item {
       width: 36px;
       height: 36px;
-      background: rgba(255, 255, 255, 0.4);
-      // backdrop-filter: blur(15px);
-      border-radius: 50%;
       text-align: center;
       .icon {
-        width: 20px;
-        height: 20px;
         margin-top: 8px;
       }
-      &:nth-child(3) {
-        font-family: Jost;
-        font-size: 16px;
-        font-weight: 300;
-        line-height: 36px;
-        text-align: center;
-        color: rgba(0, 20, 40, 1);
-      }
-      &.active {
-        background: #fff;
-        box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
-      }
-      // &:active,
-      // &:focus {
-      //   background: #fff;
-      //   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
-      // }
     }
   }
 }
 </style>
-<style lang="scss">
-// .volumn-box {
-//   .van-loading__spinner {
-//     color: $elActiveColor !important;
-//   }
-
-//   .van-switch__loading {
-//     top: 0;
-//     left: 0;
-//     width: 100%;
-//     height: 100%;
-//     line-height: 1;
-//   }
-
-//   .van-switch--disabled {
-//     opacity: 0.5;
-//   }
-// }
-</style>

src/views/envmonitor/taiguv1/components/Curtain/CurtainMore.vue

@@ -57,7 +57,7 @@
 
 <script setup>
 import { httpSetEnv } from '@/apis/taiguv1';
-import curtainIcon from '@/assets/taiguv1/svg/curtain_icon.svg';
+import curtainIcon from '@/assets/taiguv1/svg/Curtain_card_active_icon.svg';
 import DownActiveIcon from '@/assets/taiguv1/svg/down_active_icon.svg';
 import DownUnActiveIcon from '@/assets/taiguv1/svg/down_icon.svg';
 import StopActiveIcon from '@/assets/taiguv1/svg/stop_active_icon.svg';
@@ -251,15 +251,15 @@ watch(
                 align-items: center;
                 .control {
                     display: flex;
-                    width: 24px;
-                    height: 24px;
+                    width: 36px;
+                    height: 36px;
                     justify-content: center;
                     align-items: center;
                     margin-left: 10px;
-                    img{
-                        width: 17px;
-                        height: 17px; 
-                    }
+                    // img{
+                    //     width: 17px;
+                    //     height: 17px; 
+                    // }
                    
                 }
             }

src/views/envmonitor/taiguv1/components/Curtain/index.vue

@@ -216,12 +216,12 @@ onMounted(() => { });
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                width: 24px;
-                height: 24px;
-                img {
-                    width: 17px;
-                    height: 17px;
-                }
+                width: 36px;
+                height: 36px;
+                // img {
+                //     width: 17px;
+                //     height: 17px;
+                // }
             }
         }
     }

src/views/envmonitor/taiguv1/components/Lamp/LightMore.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import lampCloseIcon from '@/assets/taiguv1/svg/lamp_close_icon.svg'
+import lampCloseIcon from '@/assets/taiguv1/svg/lamp_close_p_icon.svg'
 import lampOpenIcon from '@/assets/taiguv1/svg/lamp_open_p_icon.svg'
 import LampSlider from '@/components/lamp-slider/LampSlider.vue'
 import Slider from '@/components/slider/Slider.vue'

src/views/envmonitor/taiguv1/components/Lamp/index.vue

@@ -26,7 +26,7 @@
         </div>
 
         <div class="bottom-right" v-if="lampData.isOpen">
-          {{ lampData.brightValue }}
+          {{ lampData.brightValue||0 }} <sup>%</sup>
         </div>
       </div>
 
@@ -41,10 +41,10 @@
 import FilterIcon from '@/assets/taiguv1/svg/filter_icon.svg'
 import Slider from '@/components/slider/Slider.vue'
 import SwitchButton from '@/components/switch-button/SwitchButton.vue'
-import { parseImgUrl } from '@/utils'
-import { ref, watch, computed } from 'vue'
-import { useStore } from '@/store'
 import useDeviceControl from '@/hooks/useDeviceControl'
+import { useStore } from '@/store'
+import { parseImgUrl } from '@/utils'
+import { computed, ref, watch } from 'vue'
 const min = 0
 const max = 100
 const emit = defineEmits(['getStatus', 'showMore'])
@@ -87,7 +87,6 @@ watch(
     if (!newVal) {
       return
     }
-    console.log('props.lampStaus')
     compareStatus(newVal)
   },
   { deep: true } // 添加深度监听

src/views/envmonitor/taiguv1/components/Screen/index.vue

@@ -4,7 +4,7 @@
       <img :src="parseImgUrl('taiguv1/envmonitor', 'active/screen_cast.svg')" alt="" />
       <div class="top-right">
         <div class="title">投屏</div>
-        <div class="status">关闭</div>
+        <div class="status">切换音频源</div>
       </div>
     </div>
     <div class="bottom">
@@ -15,7 +15,7 @@
         无线投屏
       </div>
       <div class="btn" :class="type == '3' ? 'btn-active' : ''" @click="checkMode('3')">
-        Team Room
+        Teams
       </div>
     </div>
   </div>

src/views/envmonitor/taiguv1/components/Volumn/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="volumn-box" :class="isOpen ? 'active' : ''">
+  <div class="volumn-box" :class="audioData.isOpen ? 'active' : ''">
     <div class="top">
-      <img :src="isOpen ? speakerIcon : speakerCloseIcon" alt="" />
-      <!-- <div class="top-right"> -->
-        <!-- <Switch @change="getvolumnStatus" class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" /> -->
-        <SwitchButton @change="getvolumnStatus" v-model="isOpen" />
-      <!-- </div> -->
+      <img :src="audioData.isOpen ? speakerIcon : speakerCloseIcon" alt="" />
+        <SwitchButton 
+         :loading="allAudioStatus.all?.loading"
+        @change="setAudioStatus('isOpen')" 
+        v-model="audioData.isOpen" />
     </div>
     <div class="bottom">
       <div class="volumn-info">
         <div class="left">
-          <div class="text">音量</div>
-          <div class="status">{{ isOpen ? '播放中' : '已关闭' }}</div>
+          <div class="text">音响</div>
+          <div class="status">{{ audioData.isOpen ? '电脑音频 播放中' : '已静音' }}</div>
         </div>
-        <div class="temp" v-if="isOpen">{{ volumnValue }}</div>
+        <div class="temp" v-if="audioData.isOpen">{{ audioData.volumnValue || 0 }}</div>
       </div>
 
-      <div class="volumn-slider" v-if="isOpen">
-        <Slider v-model="volumnValue" ></Slider>
+      <div class="volumn-slider" v-if="audioData.isOpen">
+        <Slider v-model="audioData.volumnValue" ></Slider>
       </div>
     </div>
   </div>
@@ -28,14 +28,83 @@ import speakerCloseIcon from '@/assets/taiguv1/svg/speaker_close_icon.svg'
 import speakerIcon from '@/assets/taiguv1/svg/speaker_icon.svg'
 import Slider from '@/components/slider/Slider.vue'
 import SwitchButton from '@/components/switch-button/SwitchButton.vue'
-import { ref } from 'vue'
+import useDeviceControl from '@/hooks/useDeviceControl'
+import { useStore } from '@/store'
+import { computed, ref, watch } from 'vue'
+
+const store = useStore()
+
+
 const emit = defineEmits(['getStatus'])
-const isOpen = ref(false)
+const props = defineProps({
+  audioStatus: {
+    type: Object,
+    default: () => {}
+  },
+  equipList: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+const allAudioStatus = computed(() => store.state.taiguv1.audioSwitchStatus)
 
-const volumnValue = ref(0)
+const audioData = ref({
+  isOpen: false,
+  volumnValue: 0
+})
 
-const getvolumnStatus = () => {
-  emit('getStatus', isOpen.value)
+watch(
+  () => props.audioStatus,
+  (newVal, oldVal) => {
+    if (!newVal) {
+      return
+    }
+    compareStatus(newVal)
+  },
+  { deep: true } // 添加深度监听
+)
+const deviceControl = useDeviceControl()
+const setAudioStatus = type => {
+    if (type == 'isOpen') {
+    store.dispatch('taiguv1/setAudioStatus', {
+      id: 'all',
+      status: {
+        loading: true,
+        lastSwitchStatus: audioData.value.isOpen
+      }
+    })
+  }
+  const params = deviceControl.assemblyAudioCommand(audioData.value[type], type, props.equipList)
+  deviceControl.sendCommands(params)
+}
+const compareStatus = data => {
+  if (allAudioStatus.value.all) {
+    if (allAudioStatus.value.all.lastSwitchStatus == data.isOpen) {
+      store.dispatch('taiguv1/setAudioStatus', {
+        id: 'all',
+        status: {
+          loading: false,
+          lastSwitchStatus: data.isOpen
+        }
+      })
+      audioData.value = {
+        ...data,
+        isOpen: data.isOpen
+      }
+    } else {
+        audioData.value = {
+        ...data,
+        isOpen: allAudioStatus.value.all.lastSwitchStatus
+      }
+    }
+  } else {
+    audioData.value = {
+      ...data,
+      isOpen: data.isOpen
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>

src/views/envmonitor/taiguv1/index.vue

@@ -14,7 +14,7 @@
       <div class="metting-info">
         <img class="logo" :src="roomInfo.icon" />
         <div class="name">{{ roomInfo.name }}</div>
-        <div class="location">{{ roomInfo.location }}</div>
+        <div class="location">38F</div>
       </div>
       <div class="language-box">
         <div
@@ -110,7 +110,7 @@
       </div>
       <!--空调-->
       <div class="box" v-if="spaceDevice.MIDS">
-        <Volumn></Volumn>
+        <Volumn :audioStatus="audioStatus"  :equipList="audioEquipList"></Volumn>
       </div>
       <div class="box" v-if="spaceDevice.lamps">
         <Lamp :equipList="lampEquipList" @showMore="showMore" :lampStatus="lampStatus"></Lamp>
@@ -144,7 +144,6 @@
 </template>
 
 <script setup>
-import { useStore } from '@/store'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import AirMore from './components/Air/AirMore.vue'
@@ -158,7 +157,7 @@ import Volumn from './components/Volumn/index.vue'
 import { ENV_CONFIG, lanageArr, roomSourceData } from './const'
 const boxLine = require('@/assets/taiguv1/svg/box_line.png')
 // import "vue3-video-play/dist/style.css";
-import { httpGetByMeetingId, HttpGetSpaceInfo, httpSetEnv, queryAirStatus, queryLampStatus } from '@/apis/taiguv1'
+import { httpGetByMeetingId, HttpGetSpaceInfo, queryAirStatus, queryAudioStatus, queryLampStatus } from '@/apis/taiguv1'
 import useDeviceControl from '@/hooks/useDeviceControl'
 const type = ref('zh')
 const route = useRoute()
@@ -192,6 +191,9 @@ const airStatus = ref({
 })
 const airEquipList = ref([])
 
+const audioStatus =ref({})
+const audioEquipList =ref([])
+
 const isPopup = ref(false)
 
 const popupType = ref(null)
@@ -237,7 +239,6 @@ const getSpaceInfo = () => {
         projectId
       }
     }).then(res => {
-      console.log('空间信息', res)
       if (res.result === 'success') {
         let [spaceInfo] = res.content
         let { temperature, co2, pm25, TVOC, humidity } = spaceInfo || {}
@@ -347,7 +348,6 @@ const changeMode = type => {
   if (modeType.value == 3) {
     spaceDevice.value.custom = true
   }
-  console.log(spaceDevice.value, 111)
   // 切换模式重新下发指令
   sendCommand()
 }
@@ -385,6 +385,12 @@ const getDeviceStatus = () => {
         updateLampStatus(res.content)
       }
     })
+    // 音频状态
+    queryAudioStatus(params).then(res => {
+      if (res.result == 'success') {
+        updateAudioStatus(res.data)
+      }
+    })
   }, 1000 * 2)
 
   deviceStatusPolling.start()
@@ -401,7 +407,7 @@ const updateAirStatus = data => {
   let { runStatus, gear, tempSet, maxTempSet, minTempSet, isAutoGear, equipList = [] } = data || {}
   airStatus.value = {
     runStatus,
-    gear,
+    gear:gear||0,
     tempSet,
     maxTempSet,
     minTempSet,
@@ -420,7 +426,7 @@ const updateLampStatus = data => {
   lampStatus.value = {
     brightValue: brightLamp?.brightValue,
     colorTempValue: brightLamp?.colorTempValue,
-    lampStatusText: arr.length == 0 ? '全部关闭' : arr.length < data.length ? '部分开启' : '全部开启'
+    lampStatusText: arr.length == 0 ? '已关闭' : arr.length < data.length ? '已部分开启' : '已开启'
   }
   if (brightLamp) {
     lampStatus.value.isOpen = true
@@ -429,6 +435,16 @@ const updateLampStatus = data => {
   }
   lampEquipList.value = data
 }
+const updateAudioStatus = data => {
+    let { equipList = [] } = data || {}
+    let obj = equipList[0] || {}
+    audioStatus.value = {
+       isOpen: obj.inCloudSet== 1,
+       lastSwitchStatus: audioStatus.value.lastSwitchStatus,
+       switchLoading: audioStatus.value.switchLoading
+    }
+    audioEquipList.value = equipList
+}
 
 // 打开左弹框
 const showMore = (type, showStatus) => {
@@ -653,7 +669,7 @@ const createPollingTask = (callback, interval = 3000) => {
   }
   .mode-box {
     margin-left: 40px;
-    margin-top: 32vh;
+    margin-top: 162px;
     display: flex;
     align-items: center;
     .item {