android-cloud-H5/pages/rtcEngine/components/CloudGroupDropdown.vue

<template>
  <div class="group-dropdown pt-2 pb-2">
    <!-- 设备分组下拉 -->
    <Dropdown key="deviceList" v-model="activeGroup" :isActvie="true" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :list="groupList" :prop="{value: 'id'}" :dropdownMenuStyle="{ left: '0', top: '30px' }" :activeStyle="activeStyle">
      <!-- 触发下拉 -->
      <div class="menu-trigger"><div class="device-trigger-ex">{{ groupList.find(g => g.id === activeGroup).label }}</div><van-icon class="icon-arrow rotate-down" name="play" color="#fff" size="10" /></div>
    </Dropdown>

    <!-- 清晰度下拉 -->
    <Dropdown key="definition" ref="definitionDropdown" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :dropdownMenuStyle="{ left: '0', top: '30px' }">
      <!-- 触发下拉 -->
      <div class="menu-trigger">
        <div class="definition-trigger-ex">
          <span>{{ activeDefinition }}</span>
          <!-- 0-50ms绿色；51-200ms黄色；201-999ms红色；最多显示999ms；变色部分为延迟变色 -->
          <span class="definition-val" :class="{success: latency < 51, warning: latency > 50 && latency < 201, danger: latency > 200}">{{ latency }}ms</span>
        </div>
        <van-icon class="icon-arrow rotate-down" name="play" color="#fff" size="10" />
      </div>

      <!-- 清晰度下拉 -->
      <div slot="dropdown-menu">
        <DropdownMenu :activeValue="activeDefinition" :list="definitionList" :isActvie="true"  :activeStyle="activeStyle" @change="selectFeatures" />
      </div>
    </Dropdown>
  </div>
</template>

<script>
/**
 * 云机分组下拉框
*/
// 引入自定义下拉项目组件
import DropdownMenu from './DropdownMenu.vue'

export default {
  name: 'CloudGroupDropdown',
  components: {
    DropdownMenu,
  },
  props: {
    // 拉流渲染引擎实例
    engine: {
      type: Object,
      default: () => ({})
    },
    // 网络延迟
    latency: {
      type: Number,
      default: 0,
    },
    // 选中的设备分组id 默认-1, 代表全部设备
    activeGroupId: {
      type: Number,
      default: -1,
    },
    // 设备分组下拉菜单数据
    groupList: {
      type: Array,
      default: () => []
    },
    // 清晰度默认值
    definitionValue: {
      type: String,
      default: ()=> localStorage.getItem('definitionValue') ?? '自动',
    },
    // 清晰度选项列表
    definitionList: {
      type: Array,
      default: () => [{
        label: '自动',
        value: '720P',
        bitrate: 2800, // 码率
        fps: 30, // 帧率
        width: 720, // 宽度
        height: 1280, // 高度
      }, {
        label: '高清',
        value: '720P',
        bitrate: 2800, // 码率
        fps: 30, // 帧率
        width: 720, // 宽度
        height: 1280, // 高度
      }, {
        label: '标清',
        value: '540P',
        bitrate: 1500, // 码率
        fps: 25, // 帧率
        width: 540, // 宽度
        height: 960, // 高度
      }, {
        label: '流畅',
        value: '360P',
        bitrate: 1000, // 码率
        fps: 20, // 帧率
        width: 360, // 宽度
        height: 640, // 高度
      }]
    },
  },
  data() {
    return {
      // 高亮项样式
      activeStyle: {
        color: '#FEAE4D',
      },
      activeDefinition: this.definitionValue, // 当前选中的清晰度
    }
  },
  computed: {
    // 选中的设备分组id
    activeGroup: {
      get() {
        return this.activeGroupId;
      },
      set(val) {
        this.$emit("update:activeGroupId", val);
      }
    },
  },
  methods: {
    // 选择清晰度
    selectFeatures(item) {
      // 更新清晰度值
      this.activeDefinition = item.label;
      localStorage.setItem('definitionValue', item.label);
      // 设置码率
      this.setBitrate(item);
      // 关闭清晰度下拉框
      this.$refs.definitionDropdown.visible = false;
    },
    // 设置码率
    setBitrate({width, height, fps, bitrate, label}) {
      // 设置码率和是否允许自动
      this.engine?.setCustomBitrate(bitrate, label === '自动');
  
      // 设置编码器分辨率和帧率
      this.engine?.setEncoderSize({
        width,
        height,
        fps,
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.group-dropdown{
  display: flex;
  justify-content: space-around;
}

.menu-trigger{
  background-color: #5C5C5C;
  box-shadow: 0px 0px 30px 0px #1E2022;
  border-radius: 14px;
  padding: 6px 15px;
  display:  inline-block;
  font-weight: 400;
  font-size: 12px;
  color: #F9F9F9;

  // 设备分组触发下拉
  .device-trigger-ex{
    display: inline-block;
    text-align: left;
    width: 88px;
  }

  // 清晰度触发下拉
  .definition-trigger-ex{
    display: inline-flex;
    justify-content: space-between;
    width: 94px;

    // 0-50ms绿色；51-200ms黄色；201-999ms红色；最多显示999ms；变色部分为延迟变色
    .definition-val{
      &.danger{
        color: #FF2627;
      }
      &.warning{
        color: #FF9800;
      }
      &.success{
        color: #44E2B1;
      }
    }
  }


  .icon-arrow{
    transition: transform 0.2s ease;

    &.rotate-down{
      transform: rotate(90deg);
    }

    &.rotate-up{
      transform: rotate(0270deg);
    }
  }
}
</style>