anxiaoxia 3 ماه پیش
والد
کامیت
c01bdf8f5d

+ 38 - 2
src/components/slider/Slider.vue

@@ -11,9 +11,24 @@
         <span class="slider-progress-line"></span>
       </div>
       <span
+        v-if="isFollow && showValue && suffixNormal"
+        class="slider-internal-text"
+        :style="{ left: isFollow && progressWidth < 86 ? `calc(${progressWidth}% + 10px)` : 'auto', color: followColor }"
+        >{{ showValue ? internalValue : max }}{{ suffix }} 
+        </span
+      >
+      <span
+        v-if="isFollow && showValue && !suffixNormal"
+        class="slider-internal-text"
+        :style="{ left: isFollow && progressWidth < 86 ? `calc(${progressWidth}% + 10px)` : 'auto', color: followColor }"
+        >{{ showValue ? internalValue : max }}<sup class="slider-internal-text-suffix">{{ suffix }}</sup> 
+        </span
+      >
+      <span
+        v-else
         class="slider-max-text"
-        :style="{ left: isFollow && progressWidth < 86 ? `calc(${progressWidth}% + 10px)` : 'auto', color: maxColor }"
-        >{{ showValue ? internalValue : max }}{{ suffix }}</span
+        :style="{color: maxColor }"
+        >{{ max }}</span
       >
     </div>
   </div>
@@ -36,6 +51,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  suffixNormal: {
+    type: Boolean,
+    default: false
+  },
   suffix: {
     type: String,
     default: ''
@@ -69,6 +88,10 @@ const progressWidth = computed(() => {
 //   return `linear-gradient(to right, #ff4d4f ${percentage}%, #e0e0e0 ${percentage}%)`
 // })
 
+const followColor = computed(() => {
+  const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
+  return percentage >= 95 ? 'rgba(255, 255, 255, 0.6)' : 'var(--Blue, #001428)'
+})
 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)'
@@ -186,5 +209,18 @@ onMounted(() => {
     @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>

+ 2 - 21
src/components/slider/Slider copy.vue

@@ -11,15 +11,9 @@
         <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
+        :style="{ left: isFollow && progressWidth < 86 ? `calc(${progressWidth}% + 10px)` : 'auto', color: maxColor }"
+        >{{ showValue ? internalValue : max }}{{ suffix }}</span
       >
     </div>
   </div>
@@ -192,18 +186,5 @@ onMounted(() => {
     @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>

+ 7 - 1
src/hooks/useDeviceControl.js

@@ -15,7 +15,11 @@ const COMMAND_MAPPINGS = {
   },
   audio: {
     isOpen: item => ({ code: item.inCloudSetCode, value: val => (val ? 1 : 0) })
-  }
+  },
+  screen: {
+    runStatus: item => ({ code: item.inCloudSetCode, value: val => val })
+  },
+
 }
 
 const assemblyCommand = type => (commandVal, command, data) => {
@@ -41,6 +45,7 @@ const assemblyAirCommand = assemblyCommand('air')
 const assemblyLampCommand = assemblyCommand('lamp')
 const assemblyCurtainCommand = assemblyCommand('curtain')
 const assemblyAudioCommand = assemblyCommand('audio')
+const assemblyScreenCommand = assemblyCommand('screen')
 
 // 初始化下发指令
 const initDeviceCommand = data => {
@@ -96,6 +101,7 @@ export default function useDeviceControl() {
     assemblyLampCommand,
     assemblyCurtainCommand,
     assemblyAudioCommand,
+    assemblyScreenCommand,
     sendCommands,
     initDeviceCommand
   }

+ 70 - 35
src/store/modules/taiguv1/index.js

@@ -1,60 +1,95 @@
 const state = {
   airSwtichStatus: {},
   lampSwitchStatus: {},
-  audioSwitchStatus:{}
-}
+  audioSwitchStatus: {},
+  screenSwitchStatus:{}
+};
 
 const mutations = {
   SET_AIES_TATUS: (state, air) => {
-    let { id, status } = air
-    state.airSwtichStatus[id] = status
+    let { id, status } = air;
+    state.airSwtichStatus[id] = status;
   },
   SET_LAMP_STATUS: (state, lamp) => {
-    let { id, status } = lamp
-    state.lampSwitchStatus[id] = status
+    let { id, status } = lamp;
+    state.lampSwitchStatus[id] = status;
   },
-  SET_AUDIO_STATUS:(state,audio)=>{
-    let {id,status} = audio
-    state.audioSwitchStatus[id] = status
-  }
-}
+  SET_AUDIO_STATUS: (state, audio) => {
+    let { id, status } = audio;
+    state.audioSwitchStatus[id] = status;
+  },
+  SET_SCREEN_STATUS: (state, audio) => {
+    let { id, status } = audio;
+    state.screenSwitchStatus[id] = status;
+  },
+};
 
 const actions = {
   setAirStatus({ commit, state }, air) {
-    commit('SET_AIES_TATUS', air)
-    ;(function (airData) {
+    commit("SET_AIES_TATUS", air);
+    (function (airData) {
       setTimeout(() => {
-        if (state.airSwtichStatus[airData.id] && state.airSwtichStatus[airData.id].loading == true) {
-          airData.status.loading = false
-          airData.status.lastSwitchStatus = null
-          commit('SET_AIES_TATUS', airData)
+        if (
+          state.airSwtichStatus[airData.id] &&
+          state.airSwtichStatus[airData.id].loading == true
+        ) {
+          airData.status.loading = false;
+          airData.status.lastSwitchStatus = null;
+          commit("SET_AIES_TATUS", airData);
         }
-      }, 1000 * 15)
-    })(air)
+      }, 1000 * 15);
+    })(air);
   },
   setLampStatus({ commit, state }, lamp) {
-    commit('SET_LAMP_STATUS', lamp)
-    ;(function (lampData) {
+    commit("SET_LAMP_STATUS", lamp);
+    (function (lampData) {
       setTimeout(() => {
-        if (state.lampSwitchStatus[lampData.id] && state.lampSwitchStatus[lampData.id].loading == true) {
-          lampData.status.loading = false
-          lampData.status.lastSwitchStatus = null
-          commit('SET_LAMP_STATUS', lampData)
+        if (
+          state.lampSwitchStatus[lampData.id] &&
+          state.lampSwitchStatus[lampData.id].loading == true
+        ) {
+          lampData.status.loading = false;
+          lampData.status.lastSwitchStatus = null;
+          commit("SET_LAMP_STATUS", lampData);
         }
-      }, 1000 * 5)
-    })(lamp)
+      }, 1000 * 5);
+    })(lamp);
   },
-  setAudioStatus({commit,state},audio){
-    commit('SET_AUDIO_STATUS', audio);
-    // (function(){
-
-    // })(audio)
+  setAudioStatus({ commit, state }, audio) {
+    commit("SET_AUDIO_STATUS", audio);
+    (function (audioData) {
+      setTimeout(() => {
+        if (
+          state.audioSwitchStatus[audioData.id] &&
+          state.audioSwitchStatus[audioData.id].loading == true
+        ) {
+            audioData.status.loading = false;
+            audioData.status.lastSwitchStatus = null;
+          commit("SET_AUDIO_STATUS", audioData);
+        }
+      }, 1000 * 5);
+    })(audio);
+  },
+  setScreenStatus({ commit, state }, screen) {
+    commit("SET_SCREEN_STATUS", screen);
+    (function (screenData) {
+      setTimeout(() => {
+        if (
+          state.screenSwitchStatus[screenData.id] &&
+          state.screenSwitchStatus[screenData.id].loading == true
+        ) {
+            screenData.status.loading = false;
+            screenData.status.lastSwitchStatus = null;
+          commit("SET_SCREEN_STATUS", screenData);
+        }
+      }, 1000 * 5);
+    })(screen);
   }
-}
+};
 
 export default {
   namespaced: true,
   state,
   mutations,
-  actions
-}
+  actions,
+};

+ 37 - 1
src/utils/https.ts

@@ -1,7 +1,6 @@
 import networkConfig from '@/config/default/net.config'
 import { getToken } from '@/utils/cookies'
 import HttpClient, { HttpClientConfig } from 'axios-mapper'
-import { getUserInfo, setQueryConfig } from './index'
 
 export const https = (configobj: any = { timeout: '' }) => {
   // debugger
@@ -33,6 +32,43 @@ export const https = (configobj: any = { timeout: '' }) => {
     },
     function (error) {}
   )
+
+  https.httpClient.interceptors.response.use(function (response) {
+
+    console.log('response===sucecess')
+    return response
+  }, function (error) {
+    // 获取错误状态码
+    const status = error.response?.status
+
+    // 根据不同状态码处理不同的错误情况
+    switch (status) {
+      case 400:
+        console.error('请求参数错误')
+        break
+      case 401:
+        console.error('未授权,请重新登录')
+        // 可以在这里处理登录失效的逻辑
+        break
+      case 403:
+        console.error('拒绝访问')
+        break
+      case 404:
+        console.error('请求错误,未找到该资源')
+        break
+      case 500:
+        console.error('服务器端出错')
+        break
+      default:
+        console.error('连接错误')
+    }
+    
+    // 可以在这里添加统一的错误提示
+    // 比如使用 Element UI 的 Message 组件或其他提示组件
+    // Message.error(error.response?.data?.message || '系统错误')
+    
+    return Promise.reject(error)
+  })
   // https.httpClient.interceptors.response.use(function (response) {
   //   return response
   // }, function (error) {

+ 8 - 4
src/views/envmonitor/taiguv1/components/Air/AirMore.vue

@@ -240,7 +240,7 @@ const props = defineProps({
         }
     }
 })
-const airEquipList = ref([])
+const airEquipList = ref(props.airList||[])
 const airData = ref(props.status)
 const airSwitchStatus = computed(() => {
     let statusText = ''
@@ -390,10 +390,14 @@ const handle = (type, data, all) => {
 
 onMounted(() => {
     nextTick(() => {
-        controlBtn.value.forEach(button => {
-            button.addEventListener('touchstart', handleTouchStart)
+        nextTick(() => {
+            controlBtn.value.forEach(button => {
+                button.addEventListener('touchstart', handleTouchStart)
+            })
         })
-    })
+    }
+    )
+
 })
 
 // 添加 touchstart 处理函数

+ 1 - 1
src/views/envmonitor/taiguv1/components/Curtain/index.vue

@@ -199,7 +199,7 @@ onMounted(() => { });
         .status {
             //styleName: Chi/Body XS;
             height: 15px;
-            margin-bottom: 10px;
+            margin-bottom: 8px;
             color: var(--Grey, #74808d);
             font-family: "PingFang SC";
             font-size: 11px;

+ 3 - 2
src/views/envmonitor/taiguv1/components/Lamp/LightMore.vue

@@ -23,6 +23,7 @@
           v-model="lampData.brightValue"
           isFollow
           showValue
+          suffixNormal
           suffix="%"
           @onEnd="setLampStatus('brightValue')" />
       </div>
@@ -31,7 +32,7 @@
       </div>
     </div>
 
-    <div class="divider">
+    <div class="divider" v-if="lampData.isOpen">
       <img src="@/assets/svg/line.svg" alt="" />
     </div>
 
@@ -89,7 +90,7 @@ const setRef = el => {
   }
 }
 
-const lampList = ref([])
+const lampList = ref(props.equipList||[])
 const lampData = ref(props.lampStatus)
 
 const allLampStatus = computed(() => store.state.taiguv1.lampSwitchStatus)

+ 223 - 193
src/views/envmonitor/taiguv1/components/Lamp/index.vue

@@ -1,40 +1,64 @@
 <template>
-  <div class="volumn-box" :class="lampData.isOpen ? 'active' : ''">
-    <div>
-      <div class="top">
-        <img :src="parseImgUrl('taiguv1/envmonitor', lampData.isOpen ? 'active/lamp.svg' : 'lamp.svg')" alt="" />
-        <div class="top-right">
-          <SwitchButton
-            :loading="allLampStatus.all?.loading"
-            @click.stop
-            v-model="lampData.isOpen"
-            @change="setLampStatus('isOpen')" />
+    <div
+        class="volumn-box"
+        :class="lampData.isOpen ? 'active' : ''"
+    >
+        <div>
+            <div class="top">
+                <img
+                    :src="parseImgUrl('taiguv1/envmonitor', lampData.isOpen ? 'active/lamp.svg' : 'lamp.svg')"
+                    alt=""
+                />
+                <div class="top-right">
+                    <SwitchButton
+                        :loading="allLampStatus.all?.loading"
+                        @click.stop
+                        v-model="lampData.isOpen"
+                        @change="setLampStatus('isOpen')"
+                    />
+                </div>
+            </div>
+            <div class="filter-box">
+                <div
+                    class="filter-item"
+                    @click="searchMore"
+                >
+                    <img
+                        :src="FilterIcon"
+                        alt=""
+                    />
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="filter-box">
-        <div class="filter-item" @click="searchMore">
-          <img :src="FilterIcon" alt="" />
-        </div>
-      </div>
-    </div>
 
-    <div class="bottom">
-      <div class="bottom-box">
-        <div class="bottom-left">
-          <div class="text">光照</div>
-          <div class="status">{{ lampData.lampStatusText }}</div>
-        </div>
+        <div class="bottom">
+            <div class="bottom-box">
+                <div class="bottom-left">
+                    <div class="text">光照</div>
+                    <div class="status">{{ lampData.lampStatusText || '已关闭'}}</div>
+                </div>
 
-        <div class="bottom-right" v-if="lampData.isOpen">
-          {{ lampData.brightValue||0 }} <sup>%</sup>
-        </div>
-      </div>
+                <div
+                    class="bottom-right"
+                    v-if="lampData.isOpen"
+                >
+                    {{ lampData.brightValue||0 }} <sup>%</sup>
+                </div>
+            </div>
 
-      <div class="lamp-slider" v-if="lampData.isOpen">
-        <Slider v-model="lampData.brightValue" :min="min" :max="max" @onEnd="setLampStatus('bright')"></Slider>
-      </div>
+            <div
+                class="lamp-slider"
+                v-if="lampData.isOpen"
+            >
+                <Slider
+                    v-model="lampData.brightValue"
+                    :min="min"
+                    :max="max"
+                    @onEnd="setLampStatus('bright')"
+                ></Slider>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
@@ -51,21 +75,21 @@ const emit = defineEmits(['getStatus', 'showMore'])
 
 // 接收父组件传递的开关状态
 const props = defineProps({
-  lampStatus: {
-    type: Object,
-    default: () => {
-      return {
-        isOpen: false,
-        brightValue: 0
-      }
-    }
-  },
-  equipList: {
-    type: Array,
-    default: () => {
-      return []
+    lampStatus: {
+        type: Object,
+        default: () => {
+            return {
+                isOpen: false,
+                brightValue: 0
+            }
+        }
+    },
+    equipList: {
+        type: Array,
+        default: () => {
+            return []
+        }
     }
-  }
 })
 
 const store = useStore()
@@ -73,182 +97,188 @@ const deviceControl = useDeviceControl()
 const allLampStatus = computed(() => store.state.taiguv1.lampSwitchStatus)
 
 const searchMore = () => {
-  emit('showMore', 'lamp', true)
+    emit('showMore', 'lamp', true)
 }
 
 const lampData = ref({
-  isOpen: false,
-  brightValue: 0
+    isOpen: false,
+    brightValue: 0
 })
 
 watch(
-  () => props.lampStatus,
-  (newVal, oldVal) => {
-    if (!newVal) {
-      return
-    }
-    compareStatus(newVal)
-  },
-  { deep: true } // 添加深度监听
+    () => props.lampStatus,
+    (newVal, oldVal) => {
+        if (!newVal) {
+            return
+        }
+        compareStatus(newVal)
+    },
+    { deep: true } // 添加深度监听
 )
 
 const compareStatus = data => {
-  if (allLampStatus.value.all) {
-    if (allLampStatus.value.all.lastSwitchStatus == data.isOpen) {
-      store.dispatch('taiguv1/setLampStatus', {
-        id: 'all',
-        status: {
-          loading: false,
-          lastSwitchStatus: data.isOpen
+    if (allLampStatus.value.all) {
+        if (allLampStatus.value.all.lastSwitchStatus == data.isOpen) {
+            store.dispatch('taiguv1/setLampStatus', {
+                id: 'all',
+                status: {
+                    loading: false,
+                    lastSwitchStatus: data.isOpen
+                }
+            })
+            lampData.value = {
+                ...data,
+                isOpen: data.isOpen
+            }
+        } else {
+            lampData.value = {
+                ...data,
+                isOpen: allLampStatus.value.all.lastSwitchStatus
+            }
         }
-      })
-      lampData.value = {
-        ...data,
-        isOpen: data.isOpen
-      }
     } else {
-      lampData.value = {
-        ...data,
-        isOpen: allLampStatus.value.all.lastSwitchStatus
-      }
-    }
-  } else {
-    lampData.value = {
-      ...data,
-      isOpen: data.isOpen
+        lampData.value = {
+            ...data,
+            isOpen: data.isOpen
+        }
     }
-  }
-  emit('getStatus', lampData.value.isOpen)
+    emit('getStatus', lampData.value.isOpen)
 }
 
 const setLampStatus = type => {
-  if (type == 'isOpen') {
-    store.dispatch('taiguv1/setLampStatus', {
-      id: 'all',
-      status: {
-        loading: true,
-        lastSwitchStatus: lampData.value.isOpen
-      }
-    })
-  }
-  const params = deviceControl.assemblyLampCommand(lampData.value[type], type, props.equipList)
-  deviceControl.sendCommands(params)
+    if (type == 'isOpen') {
+        store.dispatch('taiguv1/setLampStatus', {
+            id: 'all',
+            status: {
+                loading: true,
+                lastSwitchStatus: lampData.value.isOpen
+            }
+        })
+    }
+    const params = deviceControl.assemblyLampCommand(lampData.value[type], type, props.equipList)
+    deviceControl.sendCommands(params)
 
-  emit('getStatus', lampData.value.isOpen)
+    emit('getStatus', lampData.value.isOpen)
 }
 </script>
 <style lang="scss" scoped>
 .volumn-box {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 16px;
-  width: 100%;
-  height: 100%;
-  border-radius: 24px 24px 44px 24px;
-  background-color: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(40px);
-  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
-  .top {
+    box-sizing: border-box;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-    align-items: center;
-    img {
-      width: 30px;
-      height: 30px;
-    }
-  }
-  .filter-box {
-    margin-top: 10px;
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    .filter-item {
-      display: flex;
-      width: 36px;
-      height: 36px;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-      flex-shrink: 0;
-      border-radius: 60px;
-      background: var(--White-White-40, rgba(255, 255, 255, 0.4));
-    }
-  }
-  .bottom {
-    .bottom-box {
-      flex: 1;
-      display: flex;
-      justify-content: space-between;
-    }
-    .text {
-      width: 100%;
-      //styleName: Chi/Body Large;
-      font-family: PingFang SC;
-      font-size: 16px;
-      font-weight: 300;
-      line-height: 22px;
-      letter-spacing: 0.02em;
-      text-align: left;
-      text-underline-position: from-font;
-      text-decoration-skip-ink: none;
-      color: rgba(255, 255, 255, 1);
-      padding-bottom: 2px;
-    }
-    .status {
-      width: 100%;
-      //styleName: Chi/Body XS;
-      font-family: PingFang SC;
-      font-size: 11px;
-      font-weight: 400;
-      line-height: 14px;
-      letter-spacing: 0.02em;
-      color: rgba(255, 255, 255, 0.4);
+    padding: 16px;
+    width: 100%;
+    height: 100%;
+    border-radius: 24px 24px 44px 24px;
+    background-color: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(40px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+    .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        img {
+            width: 30px;
+            height: 30px;
+        }
     }
-    .bottom-right {
-      text-align: center;
-      font-size: 20px;
-      width: 50px;
-      height: 30px;
-      // color: var(--Blue, #001428);
-      align-self: end;
-      line-height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: end;
+    .filter-box {
+        margin-top: 10px;
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        .filter-item {
+            display: flex;
+            width: 36px;
+            height: 36px;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            flex-shrink: 0;
+            border-radius: 60px;
+            background: var(--White-White-40, rgba(255, 255, 255, 0.4));
+        }
     }
-    .lamp-slider {
-      margin-top: 8px;
-      background: rgba(255, 255, 255, 0.6);
-      width: 100%;
-      height: 34px;
-      border-radius: 12px;
+    .bottom {
+        .bottom-box {
+            margin-bottom: 8px;
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+        }
+        .text {
+            width: 100%;
+            //styleName: Chi/Body Large;
+            font-family: PingFang SC;
+            font-size: 16px;
+            font-weight: 300;
+            line-height: 22px;
+            letter-spacing: 0.02em;
+            text-align: left;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+            color: rgba(255, 255, 255, 1);
+            padding-bottom: 2px;
+        }
+        .status {
+            width: 100%;
+            //styleName: Chi/Body XS;
+            font-family: PingFang SC;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 14px;
+            letter-spacing: 0.02em;
+            color: rgba(255, 255, 255, 0.4);
+        }
+        .bottom-right {
+            text-align: center;
+            color: var(--Blue, #001428);
+            /* En/H2 */
+            font-family: Jost;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 300;
+            line-height: normal;
+            width: 50px;
+            height: 30px;
+            // color: var(--Blue, #001428);
+            align-self: end;
+            line-height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: end;
+        }
+        .lamp-slider {
+            background: rgba(255, 255, 255, 0.6);
+            width: 100%;
+            height: 34px;
+            border-radius: 12px;
+        }
     }
-  }
-  // .switch-btn {
-  //     // margin-top: 0;
-  //     // width: 50px !important;
-  //     // height: 28px !important;
-  //     // border: none;
-  // }
+    // .switch-btn {
+    //     // margin-top: 0;
+    //     // width: 50px !important;
+    //     // height: 28px !important;
+    //     // border: none;
+    // }
 }
 .active {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(40px);
-  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(40px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
 
-  .bottom {
-    .text {
-      color: rgba(0, 20, 40, 1);
-    }
-    .status {
-      color: rgba(116, 128, 141, 1);
-    }
-    .bottom-right {
-      font-family: Jost;
-      color: rgba(0, 20, 40, 1);
+    .bottom {
+        .text {
+            color: rgba(0, 20, 40, 1);
+        }
+        .status {
+            color: rgba(116, 128, 141, 1);
+        }
+        .bottom-right {
+            font-family: Jost;
+            color: rgba(0, 20, 40, 1);
+        }
     }
-  }
 }
 </style>

+ 158 - 124
src/views/envmonitor/taiguv1/components/Screen/index.vue

@@ -1,142 +1,176 @@
 <template>
-  <div class="screen-box active">
-    <div class="top">
-      <img :src="parseImgUrl('taiguv1/envmonitor', 'active/screen_cast.svg')" alt="" />
-      <div class="top-right">
-        <div class="title">投屏</div>
-        <div class="status">切换音频源</div>
-      </div>
+    <div class="screen-box active">
+        <div class="top">
+            <img
+                :src="parseImgUrl('taiguv1/envmonitor', 'active/screen_cast.svg')"
+                alt=""
+            />
+            <div class="top-right">
+                <div class="title">投屏</div>
+                <div class="status">切换视频源</div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div
+                class="btn"
+                :class="screenData.runStatus == 1 ? 'btn-active' : ''"
+                @click="setScreenStatus('runStatus',1)"
+            >
+                有线投屏
+            </div>
+            <div
+                class="btn"
+                :class="screenData.runStatus == 2 ? 'btn-active' : ''"
+                @click="setScreenStatus('runStatus',2)"
+            >
+                无线投屏
+            </div>
+            <div
+                class="btn"
+                :class="screenData.runStatus == 3 ? 'btn-active' : ''"
+                @click="setScreenStatus('runStatus',3)"
+            >
+                Teams Room
+            </div>
+        </div>
     </div>
-    <div class="bottom">
-      <div class="btn" :class="type == 1 ? 'btn-active' : ''" @click="checkMode(1)">
-        有线投屏
-      </div>
-      <div class="btn" :class="type == '2' ? 'btn-active' : ''" @click="checkMode('2')">
-        无线投屏
-      </div>
-      <div class="btn" :class="type == '3' ? 'btn-active' : ''" @click="checkMode('3')">
-        Teams
-      </div>
-    </div>
-  </div>
 </template>
 
-<script>
+<script setup>
+import useDeviceControl from '@/hooks/useDeviceControl';
+import { useStore } from '@/store';
 import { parseImgUrl } from "@/utils";
-import { Dialog, Loading, Switch } from "vant";
-import {
-    defineComponent,
-    onBeforeUnmount,
-    onMounted,
-    reactive,
-    toRefs
-} from "vue";
+import { computed, ref, watch } from 'vue';
+
+const store = useStore()
+
 
-export default defineComponent({
-  components: {
-    Switch,
-    [Dialog.Component.name]: Dialog.Component,
-    Loading,
-  },
-  props: {
-    modeType: {
-      type: String,
-      default: '1',
+const emit = defineEmits(['getStatus'])
+const props = defineProps({
+    screenStatus: {
+        type: Object,
+        default: () => { }
     },
-  },
-  setup(props, contx) {
-    const proxyData = reactive({
-      parseImgUrl: parseImgUrl,
-      type: 1,
-      checkMode(type) {
-        proxyData.type = type;
-      },
-    });
-    onBeforeUnmount(() => {});
-    onMounted(() => {});
+    equipList: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+const allScreenStatus = computed(() => store.state.taiguv1.screenSwitchStatus)
+const screenData = ref({
+    runStatus: 1
+})
+watch(
+    () => props.screenStatus,
+    (newVal, oldVal) => {
+        if (!newVal) {
+            return
+        }
+        screenData.value = {...newVal}
+    },
+    { deep: true } // 添加深度监听
+)
+const deviceControl = useDeviceControl()
+
+const setScreenStatus = (type, value) => {
+    if (type == 'isOpen') {
+        store.dispatch('taiguv1/setScreenStatus', {
+            id: 'all',
+            status: {
+                loading: true,
+                lastSwitchStatus: screenData.value.isOpen
+            }
+        })
+    }
+    screenData.value.runStatus = value
+    const equipListFirst = props.equipList[0]
+    equipListFirst.inCloudSet = value
+     console.log(equipListFirst,'equipListFirst');
+     
+    const params = deviceControl.assemblyScreenCommand(screenData.value[type], type, equipListFirst)
+    deviceControl.sendCommands(params)
+}
+
 
-    return {
-      ...toRefs(proxyData),
-    };
-  },
-});
 </script>
 <style lang="scss" scoped>
 .screen-box {
-  box-sizing: border-box;
-  padding: 16px;
-  width: 100%;
-  height: 100%;
-  border-radius: 24px 24px 44px 24px;
-  background-color: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(40px);
-  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
-  .top {
-    display: flex;
-    img {
-      width: 30px;
-      height: 30px;
-      margin-right: 8px;
-    }
-    .top-right {
-      .title {
-        //styleName: Chi/Body Large;
-        font-family: PingFang SC;
-        font-size: 16px;
-        font-weight: 300;
-        line-height: 22px;
-        letter-spacing: 0.02em;
-        color: rgba(255, 255, 255, 1);
-        margin-bottom: 2px;
-      }
-      .status {
-        //styleName: Chi/Body XS;
-        font-family: PingFang SC;
-        font-size: 11px;
-        font-weight: 400;
-        line-height: 15.4px;
-        letter-spacing: 0.02em;
-        color: rgba(255, 255, 255, 0.4);
-      }
-    }
-  }
-  .bottom {
-    margin-top: 9px;
-    .btn {
-      box-sizing: border-box;
-      margin-bottom: 5px;
-      width: 128px;
-      border-radius: 60px;
-      height: 40px;
-      text-align: center;
-      font-family: PingFang SC;
-      font-size: 12px;
-      line-height: 40px;
-      font-weight: 400;
-      letter-spacing: 0.02em;
-      color: rgba(116, 128, 141, 1);
-      background: rgba(255, 255, 255, 0.4);
+    box-sizing: border-box;
+    padding: 16px;
+    width: 100%;
+    height: 100%;
+    border-radius: 24px 24px 44px 24px;
+    background-color: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(40px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+    .top {
+        display: flex;
+        img {
+            width: 30px;
+            height: 30px;
+            margin-right: 8px;
+        }
+        .top-right {
+            .title {
+                //styleName: Chi/Body Large;
+                font-family: PingFang SC;
+                font-size: 16px;
+                font-weight: 300;
+                line-height: 22px;
+                letter-spacing: 0.02em;
+                color: rgba(255, 255, 255, 1);
+                margin-bottom: 2px;
+            }
+            .status {
+                //styleName: Chi/Body XS;
+                font-family: PingFang SC;
+                font-size: 11px;
+                font-weight: 400;
+                line-height: 15.4px;
+                letter-spacing: 0.02em;
+                color: rgba(255, 255, 255, 0.4);
+            }
+        }
     }
-    .btn-active {
-      background: rgba(255, 255, 255, 0.8);
-      color: rgba(0, 20, 40, 1);
-      backdrop-filter: blur(20px);
+    .bottom {
+        margin-top: 9px;
+        .btn {
+            box-sizing: border-box;
+            margin-bottom: 5px;
+            width: 128px;
+            border-radius: 60px;
+            height: 40px;
+            text-align: center;
+            font-family: PingFang SC;
+            font-size: 12px;
+            line-height: 40px;
+            font-weight: 400;
+            letter-spacing: 0.02em;
+            color: rgba(116, 128, 141, 1);
+            background: rgba(255, 255, 255, 0.4);
+        }
+        .btn-active {
+            background: rgba(255, 255, 255, 0.8);
+            color: rgba(0, 20, 40, 1);
+            backdrop-filter: blur(20px);
+        }
     }
-  }
 }
 .active {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(40px);
-  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
-  .top {
-    .top-right {
-      .title {
-        color: rgba(0, 20, 40, 1);
-      }
-      .status {
-        color: rgba(116, 128, 141, 1);
-      }
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(40px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+    .top {
+        .top-right {
+            .title {
+                color: rgba(0, 20, 40, 1);
+            }
+            .status {
+                color: rgba(116, 128, 141, 1);
+            }
+        }
     }
-  }
 }
 </style>

+ 5 - 4
src/views/envmonitor/taiguv1/components/Volumn/index.vue

@@ -11,13 +11,13 @@
       <div class="volumn-info">
         <div class="left">
           <div class="text">音响</div>
-          <div class="status">{{ audioData.isOpen ? '电脑音频 播放中' : '已静音' }}</div>
+          <div class="status">{{ audioData.isOpen ? `${audioData.onlineStatus? audioData.onlineStatus : '电脑音频'} 播放中` : '已静音' }}</div>
         </div>
-        <div class="temp" v-if="audioData.isOpen">{{ audioData.volumnValue || 0 }}</div>
+        <div class="temp" v-if="audioData.isOpen">{{ audioData.runStatus || 0 }}</div>
       </div>
 
       <div class="volumn-slider" v-if="audioData.isOpen">
-        <Slider v-model="audioData.volumnValue" ></Slider>
+        <Slider v-model="audioData.runStatus" ></Slider>
       </div>
     </div>
   </div>
@@ -52,7 +52,8 @@ const allAudioStatus = computed(() => store.state.taiguv1.audioSwitchStatus)
 
 const audioData = ref({
   isOpen: false,
-  volumnValue: 0
+  onlineStatus:'电脑音频',
+  runStatus:0
 })
 
 watch(

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 692 - 591
src/views/envmonitor/taiguv1/index.vue


+ 79 - 46
src/views/error/index.vue

@@ -1,52 +1,85 @@
 <template>
-  <div class="error">
-    <div>无法获取到mac地址</div>
-    <p>
-      <span> 1.请检查WIFI功能是否打开了 </span>
-      <span> 2.打开WIFI功能,重启平板 </span>
-    </p>
-  </div>
+    <div class="error-page">
+        <div class="error-content">
+            <!-- <img
+                src="@/assets/error.png"
+                alt="error"
+                class="error-img"
+            /> -->
+            <h2>页面加载失败</h2>
+            <p>抱歉,页面暂时无法访问</p>
+            <div class="btn-group">
+                <button
+                    class="reload-btn"
+                    @click="reloadPage"
+                >重新加载</button>
+            </div>
+        </div>
+    </div>
 </template>
   
-  <script lang="ts">
-import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
-import Header from "@/components/header/Comheader.vue";
-import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import axios from "axios";
-
-export default defineComponent({
-  components: {},
-  setup() {
-    const route: any = useRoute();
-    const proxyData = reactive({});
-    onMounted(() => {});
-    return {
-      ...toRefs(proxyData),
-    };
-  },
-});
+<script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+const reloadPage = () => {
+    // 获取上一个路由路径
+    const previousPath = sessionStorage.getItem('previousPath') || '/'
+    // 跳转回上一个页面
+    router.replace(previousPath)
+}
 </script>
-<style lang="scss" scoped>
-.error {
-  padding-top: 100px;
-//   text-align: center;
-  div {
-    padding: 30px;
-    font-size: 34px;
-    padding-left: 32%;
-    color: red;
-  }
-  p {
-    padding-left: 30%;
-    text-align: left;
-    span {
-      display: block;
-      padding: 20px;
-      font-size: 24px;
+
+ <style lang="scss" scoped>
+.error-page {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f5f5f5;
+
+    .error-content {
+        text-align: center;
+
+        .error-img {
+            width: 200px;
+            margin-bottom: 24px;
+        }
+
+        h2 {
+            font-size: 24px;
+            color: #333;
+            margin-bottom: 16px;
+        }
+
+        p {
+            font-size: 16px;
+            color: #666;
+            margin-bottom: 32px;
+        }
+
+        .btn-group {
+            .reload-btn {
+                padding: 12px 24px;
+                font-size: 16px;
+                color: #fff;
+                background: #409eff;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                transition: all 0.3s;
+
+                &:hover {
+                    background: #66b1ff;
+                }
+
+                &:active {
+                    background: #3a8ee6;
+                }
+            }
+        }
     }
-  }
 }
-</style>
-  
-
-  
+</style>