HIYL-localization-web/src/views/videoCommunication/components/SettingsDialog.vue

<template>
  <el-dialog
    title="设置"
    :visible.sync="visible"
    width="600px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-tabs
      v-model="activeTab"
      :tab-position="'left'"
      class="settings-tabs"
    >
      <!-- 视频设置 -->
      <el-tab-pane name="video">
        <span slot="label"><i class="el-icon-video-camera"></i> 视频</span>
        <el-form
          :model="videoConfig"
          label-width="140px"
          class="settings-form"
        >
          <el-form-item label="摄像头/工作站">
            <el-select
              v-model="videoConfig.camera"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                label="Integrated Camera"
                value="Integrated Camera"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="采集卡">
            <el-select
              v-model="videoConfig.captureCard"
              placeholder="请选择"
              style="width: 240px"
            />
          </el-form-item>

          <el-form-item label="网络调控策略">
            <el-select
              v-model="videoConfig.networkStrategy"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option label="弱网下流畅度优先" value="smooth" />
            </el-select>
          </el-form-item>

          <el-form-item label="摄像头分辨率">
            <el-select
              v-model="videoConfig.cameraResolution"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option label="480P" value="480P" />
            </el-select>
          </el-form-item>

          <el-form-item label="采集卡分辨率">
            <el-select
              v-model="videoConfig.captureResolution"
              placeholder="请选择"
              style="width: 240px"
            />
          </el-form-item>

          <el-form-item label="采集卡帧率">
            <el-select
              v-model="videoConfig.captureFps"
              placeholder="请选择"
              style="width: 240px"
            />
          </el-form-item>

          <el-form-item label="采集卡码率(2-8M)">
            <el-input
              v-model="videoConfig.captureBitrate"
              style="width: 240px"
            />
            <i class="el-icon-edit edit-icon" style="margin-left: 10px"></i>
          </el-form-item>
          <el-form-item label="视频镜像">
            <el-radio-group v-model="videoConfig.mirror">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 音频设置 -->
      <el-tab-pane name="audio">
        <span slot="label"><i class="el-icon-microphone"></i> 音频</span>
        <el-form
          :model="audioConfig"
          label-width="140px"
          class="settings-form"
        >
          <el-form-item label="麦克风">
            <el-select
              v-model="audioConfig.mic"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                label="麦克风阵列 (适用于数字麦克风的英特尔® 智音)"
                value="mic-array"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="麦克风测试">
            <el-slider 
              v-model="micTestPercent" 
              class="progress-slider"
            />
          </el-form-item>
          <el-form-item label="扬声器">
            <el-select
              v-model="audioConfig.speaker"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                label="扬声器 (Realtek(R) Audio)"
                value="realtek-speaker"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="扬声器测试">
            <el-slider 
              v-model="speakerTestPercent" 
              class="progress-slider"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
export default {
  name: "SettingsDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    videoConfig: {
      type: Object,
      default: () => ({
        camera: "Integrated Camera",
        captureCard: "",
        networkStrategy: "smooth",
        cameraResolution: "480P",
        captureResolution: "",
        captureFps: "",
        captureBitrate: "",
        mirror: false,
      }),
    },
    audioConfig: {
      type: Object,
      default: () => ({
        mic: "mic-array",
        speaker: "realtek-speaker",
      }),
    },
  },
  data() {
    return {
      activeTab: "video",
      micTestPercent: 0,
      speakerTestPercent: 0,
    };
  },
  watch: {
    visible(val) {
      if (val) {
        // 打开弹窗时初始化测试进度条
        this.micTestPercent = 60;
        this.speakerTestPercent = 60;
      }
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.settings-tabs {
  height: 350px;
}

.settings-tabs ::v-deep .el-tabs__header {
  border-right: 1px solid #e4e7ed;
}

.settings-tabs ::v-deep .el-tabs__item {
  text-align: left;
  width: 80px;
}

.settings-form {
  padding: 10px;
}

.edit-icon {
  margin-left: 5px;
  cursor: pointer;
}

/* 可拖动进度条滑块样式 */
.progress-slider {
  width: 240px;
}

.progress-slider ::v-deep .el-slider__track {
  background-color: #e0e0e0;
}

.progress-slider ::v-deep .el-slider__fill {
  background-color: #0f796c;
}

.progress-slider ::v-deep .el-slider__thumb {
  border-color: #0f796c;
}
</style>