traffic-laser/src/views/graphic/geos/roadEdge.vue

<template>
  <GeoTeleport :menus="menus" class="geo-teleport-use" :active="active" />
  <GeoTeleport :menus="childMenus" v-if="childMenus" class="type-geo" />
  {{ showChange }}
  <VRange
    v-if="showChange"
    :max="100"
    :min="10"
    :step="1"
    unit="mm"
    v-model:value="(lineWidthMenu[2].desc as number)"
  />
</template>

<script setup lang="ts">
import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
import { drawRef, FocusVector } from "@/hook/useGraphic";
import { computed, reactive, ref, toRaw, UnwrapRef, watchEffect } from "vue";
import { dataService } from "@/graphic/Service/DataService";
import { UITypeExtend } from "@/views/graphic/menus";
import VectorStyle from "@/graphic/enum/VectorStyle";
import VectorWeight from "@/graphic/enum/VectorWeight";
import VRange from "@/components/vrange/index.vue";

const props = defineProps<{ geo: FocusVector }>();
const vector = computed(() => dataService.getGeo(props.geo.type, props.geo.vectorId));
const style = ref(vector.value.style || VectorStyle.SingleSolidLine);

const clickHandlerFactory = (key) => {
  return () => drawRef.value.uiControl.updateVectorForSelectUI(key);
};

const showChange = ref(false);
const lineTypeMenu = reactive([
  {
    key: VectorStyle.SingleSolidLine,
    icon: "line_sf",
    text: "单实线",
    onClick: () => {
      clickHandlerFactory(VectorStyle.SingleSolidLine)();
      style.value = VectorStyle.SingleSolidLine;
    },
  },
  {
    key: VectorStyle.SingleDashedLine,
    icon: "line_sd",
    text: "单虚线",
    onClick: () => {
      clickHandlerFactory(VectorStyle.SingleDashedLine)();
      style.value = VectorStyle.SingleDashedLine;
    },
  },
  {
    key: VectorStyle.PointDrawLine,
    icon: "line_dot",
    text: "点画线",
    onClick: () => {
      clickHandlerFactory(VectorStyle.PointDrawLine)();
      style.value = VectorStyle.PointDrawLine;
    },
  },
  {
    key: VectorStyle.RoadSide,
    icon: "l_thin",
    text: "路缘线",
    onClick: () => {
      clickHandlerFactory(VectorStyle.RoadSide)();
      style.value = VectorStyle.RoadSide;
    },
  },
]);

const lineWidthMenu = reactive([
  {
    key: VectorWeight.Bold,
    icon: "l_thick",
    text: "宽度",
    onClick: () => {
      clickHandlerFactory(VectorWeight.Thinning)();
      menus.value[1] = lineWidthMenu[1];
    },
  },
  {
    key: VectorWeight.Thinning,
    icon: "l_thin",
    text: "宽度",
    onClick: () => {
      clickHandlerFactory(VectorWeight.Bold)();
      menus.value[1] = lineWidthMenu[0];
    },
  },
  {
    key: "setRoadEdageWidth",
    icon: "l_thin",
    text: "宽度",
    desc: 0,
    onClick: () => {
      showChange.value = !showChange.value;
    },
  },
]);
const childMenus = ref<UnwrapRef<typeof menus>>();
const menus = ref([
  {
    key: UITypeExtend.lineType,
    text: computed(() => lineTypeMenu.find((item) => item.key === style.value).text),
    icon: computed(() => lineTypeMenu.find((item) => item.key === style.value).icon),
    onClick() {
      childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu;
    },
  },
  vector.value?.weight === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
]);

watchEffect(() => {
  if (style.value === VectorStyle.RoadSide) {
    menus.value[1] = lineWidthMenu[2];
    lineWidthMenu[2].desc = vector.value.roadSide.width;
  } else {
    showChange.value = false;
  }
});
watchEffect(() => {
  if (style.value === VectorStyle.RoadSide) {
    vector.value.setRoadSideWidth(lineWidthMenu[2].desc);
  }
});

const active = computed(() =>
  toRaw(childMenus.value) === lineTypeMenu
    ? menus.value[0]
    : toRaw(childMenus.value) === lineWidthMenu
    ? menus.value[1]
    : null
);
</script>

<style scoped lang="scss">
.color {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.icon {
  font-size: 16px;
}

.geo-input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
}

.type-geo {
  margin-bottom: 74px;
}
</style>

<style lang="scss">
.select-floating.select-float.dire-top {
  margin-top: -10px;
}
</style>