接入视频流

wangyawei

2025-04-18 2d90fa3dc99fced159d0bc76939fd9b88e6aafe1

 src/components/tools/SlopeAnalysis.vue

@@ -1,39 +1,35 @@
<template>
  <div class="terrain-settings">
    <el-form :model="form" label-width="80px">
      <el-form-item label="等高线">
        <el-switch
          v-model="form.contourLines"
          inline-prompt
          active-text="开"
          inactive-text="关"
        ></el-switch>
        <el-color-picker v-model="form.color" style="margin-left: 10px" />
      </el-form-item>

      <!-- 间距滑块（根据等高线开关控制显示） -->
      <el-form-item label="间距" v-if="form.contourLines">
        <el-slider v-model="form.spacing" :min="20" :max="500"></el-slider>
      </el-form-item>

      <!-- 线宽滑块（根据等高线开关控制显示） -->
      <el-form-item label="线宽" v-if="form.contourLines">
        <el-slider v-model="form.lineWidth" :min="1" :max="10"></el-slider>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end">
      <el-button @click="handleDraw">绘制区域</el-button>
    </div>
  </div>
  <!-- 坡度分析 -->
  <el-form :model="form" label-width="80px" class="terrain-settings">
    <!-- 地表渲染 -->
    <el-form-item label="地表渲染">
      <el-radio-group v-model="form.terrainRender">
        <el-radio :label="0">无</el-radio>
        <el-radio :label="1">坡度</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 等高线开关 -->
    <el-form-item label="等高线">
      <el-switch
        v-model="form.contourLines"
        inline-prompt
        active-text="开"
        inactive-text="关"
      ></el-switch>
      <el-color-picker v-model="form.color" style="margin-left: 10px" />
    </el-form-item>

    <!-- 间距滑块（根据等高线开关控制显示） -->
    <el-form-item label="间距" v-if="form.contourLines">
      <el-slider v-model="form.spacing" :min="20" :max="500"></el-slider>
    </el-form-item>

    <!-- 线宽滑块（根据等高线开关控制显示） -->
    <el-form-item label="线宽" v-if="form.contourLines">
      <el-slider v-model="form.lineWidth" :min="1" :max="10"></el-slider>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, watch } from "vue";
import { reactive, watch, defineEmits } from "vue";

// 定义 props 和 emit
const props = defineProps({
@@ -46,9 +42,8 @@

// 初始化 form 数据
const form = reactive({
  terrainRender: 0,
  contourLines: false,
  color: "",
  color: "red",
  spacing: 50,
  lineWidth: 5,
});
@@ -61,6 +56,10 @@
  },
  { deep: true } // 深度监听
);
const handleDraw = () => {
  console.log("绘制区域");
  emit("draw");
};
</script>

<style lang="less" scoped>
@@ -76,15 +75,6 @@
.setting-item {
  margin-bottom: 20px;
  display: flex;
}

/deep/ .el-slider__bar {
  background-color: #009688;
  border-color: #009688;
}

/deep/ .el-slider__button {
  border-color: rgb(0, 150, 136);
}

/deep/ .el-switch.is-checked .el-switch__core {