traffic-laser/src/views/graphic/setting.vue

<template>
  <ui-confirm title="设置" ok-text="保存" :func="handler" v-if="!trackMode">
    <template v-slot:content>
      <div class="setting-layout">
        <div>
          <p>
            <span>默认单车道宽度</span>
            <span>单位： mm</span>
          </p>
          <ui-input
            :modelValue="data.singleRoadWidth * 1000"
            @update:modelValue="(val) => (data.singleRoadWidth = val / 1000)"
            width="100%"
          >
            <template v-slot:icon>
              <ui-icon
                type="measure"
                ctrl
                @click="setSceneSingleRoadWidth"
                class="measure_icon"
              />
            </template>
          </ui-input>
        </div>
        <div>
          <p>
            <span>默认隔离带宽度</span>
            <span>单位： mm</span>
          </p>
          <ui-input
            :modelValue="data.roadQuarantineWidth * 1000"
            @update:modelValue="(val) => (data.roadQuarantineWidth = val / 1000)"
            width="100%"
          >
            <template v-slot:icon>
              <ui-icon
                type="measure"
                ctrl
                @click="setSceneRoadQuarantineWidth"
                class="measure_icon"
              />
            </template>
          </ui-input>
        </div>
        <div>
          <p>
            <span>基本线宽 b</span>
            <span>单位： mm</span>
          </p>
          <div class="select-boxs">
            <span
              v-for="option in lineWidthOption"
              :key="option.value"
              :class="{ active: option.value === data.lineWidth }"
              @click="data.lineWidth = option.value"
            >
              {{ option.label }}
            </span>
          </div>
        </div>
      </div>
    </template>
  </ui-confirm>
</template>
<script setup lang="ts">
import UiConfirm from "@/components/base/components/dialog/Confirm.vue";
import UiInput from "@/components/base/components/input/index.vue";
import { ref } from "vue";
import UiIcon from "@/components/base/components/icon/index.vue";
import { trackMeasureWidth, trackMode } from "@/views/scene/trackMeasureWidth";
import { drawRef } from "@/hook/useGraphic";
import UiButton from "@/components/base/components/button/index.vue";

const props = defineProps<{ close?: () => void }>();

const data = ref({ ...drawRef.value.uiControl.getDefaultSetting() });
const lineWidthOption = [
  { label: 2, value: 2 },
  { label: 1.4, value: 1.4 },
  { label: 1, value: 1 },
  { label: 0.7, value: 0.7 },
  { label: 0.5, value: 0.5 },
  { label: 0.35, value: 0.35 },
];

console.log(data);

const setSceneSingleRoadWidth = async () => {
  const width = await trackMeasureWidth();
  if (width !== null) {
    data.value.singleRoadWidth = width;
  }
};

const setSceneRoadQuarantineWidth = async () => {
  data.value.roadQuarantineWidth = await trackMeasureWidth();
};

const handler = (label) => {
  if (label === "ok") {
    drawRef.value.uiControl.setDefaultSetting({ ...data.value });
  }
  props.close && props.close();
};
</script>

<style lang="scss" scoped>
.setting-layout {
  width: 440px;

  > div {
    margin-bottom: 24px;

    p {
      margin-bottom: 14px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }
  }
}

.select-boxs {
  display: flex;
  gap: 8px;
  span {
    flex: 1;
    text-align: center;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    &.active {
      background: rgba(47, 143, 255, 0.5);
    }
  }
}

.measure_icon {
  padding: 10px;
}
</style>