feat: 监控添加清晰度切换功能

pages/feature/recordList.vue

@@ -384,36 +384,36 @@
 
 <style lang="scss" scoped>
   .search {
-    padding: 32rpx;
     width: 686rpx !important;
+    padding: 32rpx;
   }
 
   .button {
-    display: flex;
-    align-items: center;
     position: fixed;
     bottom: calc(env(safe-area-inset-bottom) + 20rpx);
+    display: flex;
+    align-items: center;
     font-weight: bold;
 
     .button-reset {
-      margin-left: 50rpx;
       width: 300rpx;
       height: 88rpx;
-      background-color: #df282d;
+      margin-left: 50rpx;
+      line-height: 88rpx;
       color: white;
       text-align: center;
-      line-height: 88rpx;
+      background-color: #df282d;
       border-radius: 44rpx;
     }
 
     .button-create {
-      margin-left: 50rpx;
       width: 300rpx;
       height: 88rpx;
-      background-color: #63b8af;
+      margin-left: 50rpx;
+      line-height: 88rpx;
       color: white;
       text-align: center;
-      line-height: 88rpx;
+      background-color: #63b8af;
       border-radius: 44rpx;
     }
   }
@@ -421,29 +421,29 @@
   .item {
     display: flex;
     align-items: center;
-    background-color: #ffffff;
-    height: 120rpx;
     width: 750rpx;
+    height: 120rpx;
+    background-color: #ffffff;
 
     .item-left {
-      margin-left: 32rpx;
       width: 80rpx;
       height: 80rpx;
+      margin-left: 32rpx;
     }
 
     .item-right {
+      width: 574rpx;
       margin-right: 32rpx;
       margin-left: 32rpx;
-      width: 574rpx;
 
       .item-right-top {
         max-width: 400rpx;
-        font-size: 32rpx;
-        font-weight: bold;
         padding-bottom: 6rpx;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-size: 32rpx;
+        font-weight: bold;
+        white-space: nowrap;
       }
 
       .item-right-bottom {
@@ -467,9 +467,9 @@
   }
 
   .empty-list-text {
-    text-align: center;
     font-size: 32rpx;
     color: #999999;
+    text-align: center;
   }
 
   .status {

pages/p2p/p2pPlayer.vue

@@ -11,7 +11,7 @@
       :acceptPlayerEvents="true"
       soundMode="speaker"
       sceneType="live"
-      streamQuality="high"
+      :streamQuality="range[index].value"
       :minCache="0.2"
       :maxCache="0.8"
       :fill="true"
@@ -19,6 +19,25 @@
       @playsuccess="handlePlaySuccess"
     >
     </iot-p2p-player-with-mjpg>
+    <view
+      v-if="buttonInfo"
+      :style="{
+        top: buttonInfo.bottom + 15 + 'px'
+      }"
+      class="bg-[rgba(0,0,0,0.35)] rounded-full px-2 py-1.5 fixed right-32"
+    >
+      <picker :value="index" mode="selector" :range="range" range-key="name" @change="changeEvent">
+        <up-icon
+          :label="range[index].name"
+          color="#ffffff"
+          label-color="#ffffff"
+          labelPos="left"
+          name="arrow-down-fill"
+          size="32rpx"
+          space="16rpx"
+        ></up-icon>
+      </picker>
+    </view>
     <image
       v-if="!isVideoLoaded"
       src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
@@ -109,6 +128,15 @@
   const $bluetooth = useBluetoothStore()
   const $basic = useBasicStore()
 
+  const buttonInfo = ref(null)
+
+  const index = ref(1)
+  const range = ref([
+    { name: '标清', value: 'standard' },
+    { name: '高清', value: 'high' },
+    { name: '超清', value: 'super' }
+  ])
+
   const deviceInfo = ref()
   const xp2pInfo = ref()
 
@@ -118,6 +146,8 @@
   const isVideoLoaded = ref(false)
 
   onMounted(async () => {
+    buttonInfo.value = await $basic.getButtonInfo()
+
     const { code, data, message } = await getP2pInfo({
       request_method: 'GET',
       request_uri: '/api/v1/tencentYun/getDeviceDetailData',
@@ -146,6 +176,10 @@
     }
   })
 
+  const changeEvent = e => {
+    index.value = e.detail.value
+  }
+
   const handleScreenshot = () => {
     const page = getCurrentPages().pop()
     const player = page.selectComponent('#playerRef')