|
@@ -1,126 +1,133 @@
|
|
|
-import {uiType, UIType, graphicState} from "@/hook/useGraphic";
|
|
|
-import {
|
|
|
- findMenuByAttr,
|
|
|
- generateByMenus as generateByMenusRaw,
|
|
|
- generateMixMenus as generateMixMenusRaw
|
|
|
-} from '@/utils/menus'
|
|
|
-import Message from "@/components/base/components/message/message.vue";
|
|
|
-import RoadStructure from '@/graphic/enum/RoadStructure'
|
|
|
-import RoadTemplate from '@/graphic/enum/RoadTemplate'
|
|
|
-import {computed} from "vue";
|
|
|
-import { mount } from '@/components/base/utils/componentHelper'
|
|
|
-import Setting from "@/views/graphic/setting.vue";
|
|
|
+import { uiType, UIType, graphicState } from '@/hook/useGraphic';
|
|
|
+import { findMenuByAttr, generateByMenus as generateByMenusRaw, generateMixMenus as generateMixMenusRaw } from '@/utils/menus';
|
|
|
+import Message from '@/components/base/components/message/message.vue';
|
|
|
+import RoadStructure from '@/graphic/enum/RoadStructure';
|
|
|
+import RoadTemplate from '@/graphic/enum/RoadTemplate';
|
|
|
+import { computed } from 'vue';
|
|
|
+import { mount } from '@/components/base/utils/componentHelper';
|
|
|
+import Setting from '@/views/graphic/setting.vue';
|
|
|
|
|
|
export enum Mode {
|
|
|
Road,
|
|
|
- Photo
|
|
|
+ Photo,
|
|
|
}
|
|
|
|
|
|
export const UITypeExtend = {
|
|
|
- structure: "structure",
|
|
|
- template: "template",
|
|
|
- measure: "measure",
|
|
|
- road: "__road",
|
|
|
- image: "__image",
|
|
|
- line: "__line",
|
|
|
- photo: "photo",
|
|
|
- setup: "setup",
|
|
|
- lineType: "lineType",
|
|
|
- width: "width",
|
|
|
- lock: "lock",
|
|
|
- basemap: "Basemap"
|
|
|
-}
|
|
|
+ structure: 'structure',
|
|
|
+ template: 'template',
|
|
|
+ measure: 'measure',
|
|
|
+ road: '__road',
|
|
|
+ image: '__image',
|
|
|
+ line: '__line',
|
|
|
+ photo: 'photo',
|
|
|
+ setup: 'setup',
|
|
|
+ lineType: 'lineType',
|
|
|
+ width: 'width',
|
|
|
+ lock: 'lock',
|
|
|
+ basemap: 'Basemap',
|
|
|
+};
|
|
|
|
|
|
export type MenuRaw = {
|
|
|
- key: string,
|
|
|
- text: string,
|
|
|
- onClick?: (data: MenuRaw) => void,
|
|
|
- icon?: string,
|
|
|
- children?: MenusRaw
|
|
|
- extend?: MenusRaw
|
|
|
-}
|
|
|
-export type MenusRaw = Array<MenuRaw>
|
|
|
-
|
|
|
+ key: string;
|
|
|
+ text: string;
|
|
|
+ onClick?: (data: MenuRaw) => void;
|
|
|
+ icon?: string;
|
|
|
+ children?: MenusRaw;
|
|
|
+ extend?: MenusRaw;
|
|
|
+};
|
|
|
+export type MenusRaw = Array<MenuRaw>;
|
|
|
|
|
|
export const structureMenusRaw = [
|
|
|
- { key: RoadStructure.BranchRoad, icon: "jg_zl-1", text: "支路" },
|
|
|
- { key: RoadStructure.NarrowRoad, icon: "jg_zl", text: "窄路" },
|
|
|
- { key: RoadStructure.ShoulderRoad, icon: "jg_lj", text: "路肩" },
|
|
|
- { key: RoadStructure.ZebraCrossing, icon: "jg_bmx", text: "斑马线" },
|
|
|
- { key: RoadStructure.Bridge, icon: "jg_q", text: "桥" },
|
|
|
- { key: RoadStructure.Tunnel, icon: "jg_sd", text: "隧道" },
|
|
|
- { key: RoadStructure.Sidewalk, icon: "jg_rxd", text: "人行道" },
|
|
|
- { key: RoadStructure.ConstructionSection, icon: "jg_sgld", text: "施工路段" },
|
|
|
- { key: RoadStructure.Downhill, icon: "jg_road_u", text: "下坡" },
|
|
|
- { key: RoadStructure.Uphill, icon: "jg_sp", text: "上坡" },
|
|
|
- { key: RoadStructure.RoadsideGutter, icon: "jg_lpsg", text: "路边水沟" },
|
|
|
- { key: RoadStructure.RoadsAndRails, icon: "jg_dltlpjk", text: "道路与铁..." },
|
|
|
- { key: RoadStructure.FireHydrantWell, icon: "jg_xfsj", text: "消火栓井" },
|
|
|
- { key: RoadStructure.Gullies, icon: "jg_ysk", text: "雨水口" },
|
|
|
- { key: RoadStructure.RoadPotholes, icon: "jg_lmak", text: "路面凹坑" },
|
|
|
- { key: RoadStructure.ProtrudingRoad, icon: "jg_lmtcbf", text: "路面凸出..." },
|
|
|
- { key: RoadStructure.WaterOnTheRoad, icon: "jg_lmjs", text: "路面积水" },
|
|
|
-]
|
|
|
+ { key: RoadStructure.BranchRoad, icon: 'jg_zl-1', text: '支路' },
|
|
|
+ { key: RoadStructure.NarrowRoad, icon: 'jg_zl', text: '窄路' },
|
|
|
+ { key: RoadStructure.ShoulderRoad, icon: 'jg_lj', text: '路肩' },
|
|
|
+ { key: RoadStructure.ZebraCrossing, icon: 'jg_bmx', text: '斑马线' },
|
|
|
+ { key: RoadStructure.Bridge, icon: 'jg_q', text: '桥' },
|
|
|
+ { key: RoadStructure.Tunnel, icon: 'jg_sd', text: '隧道' },
|
|
|
+ { key: RoadStructure.Sidewalk, icon: 'jg_rxd', text: '人行道' },
|
|
|
+ { key: RoadStructure.ConstructionSection, icon: 'jg_sgld', text: '施工路段' },
|
|
|
+ { key: RoadStructure.Downhill, icon: 'jg_road_u', text: '下坡' },
|
|
|
+ { key: RoadStructure.Uphill, icon: 'jg_sp', text: '上坡' },
|
|
|
+ { key: RoadStructure.RoadsideGutter, icon: 'jg_lpsg', text: '路边水沟' },
|
|
|
+ { key: RoadStructure.RoadsAndRails, icon: 'jg_dltlpjk', text: '道路与铁...' },
|
|
|
+ { key: RoadStructure.FireHydrantWell, icon: 'jg_xfsj', text: '消火栓井' },
|
|
|
+ { key: RoadStructure.Gullies, icon: 'jg_ysk', text: '雨水口' },
|
|
|
+ { key: RoadStructure.RoadPotholes, icon: 'jg_lmak', text: '路面凹坑' },
|
|
|
+ { key: RoadStructure.ProtrudingRoad, icon: 'jg_lmtcbf', text: '路面凸出...' },
|
|
|
+ { key: RoadStructure.WaterOnTheRoad, icon: 'jg_lmjs', text: '路面积水' },
|
|
|
+];
|
|
|
|
|
|
export const templateMenusRaw = [
|
|
|
- { key: RoadTemplate.SBend, icon: "mb_sxwl", text: "s型弯路" },
|
|
|
- { key: RoadTemplate.TJunction, icon: "mb_dzlk", text: "丁字路口" },
|
|
|
- { key: RoadTemplate.FiveForks, icon: "mb_wclk", text: "五岔路口" },
|
|
|
- { key: RoadTemplate.ExitRamp, icon: "mb_ckzd", text: "出口匝道" },
|
|
|
- { key: RoadTemplate.Crossroads, icon: "mb_szlk", text: "十字路口" },
|
|
|
- { key: RoadTemplate.NationalHighwayShoulder, icon: "mb_gdlj", text: "国道(路肩)" },
|
|
|
- { key: RoadTemplate.IndoorSection, icon: "mb_snld", text: "室内路段" },
|
|
|
- { key: RoadTemplate.Bend, icon: "mb_wd", text: "弯道" },
|
|
|
- { key: RoadTemplate.SharpCurve, icon: "mb_jzwd", text: "急转弯道" },
|
|
|
- { key: RoadTemplate.SixForkIntersection, icon: "mb_lclk", text: "六岔路口" },
|
|
|
- { key: RoadTemplate.WideNarrowRoad, icon: "mb_kbzld", text: "宽变窄路段" },
|
|
|
- { key: RoadTemplate.Corner, icon: "mb_zjwd", text: "直角弯道" },
|
|
|
- { key: RoadTemplate.ImportSmashedRoad, icon: "mb_jkzd", text: "进口匝道" },
|
|
|
- { key: RoadTemplate.HighSpeedTollBooth, icon: "mb_gssfz", text: "高速收费站" },
|
|
|
- { key: RoadTemplate.HighSpeedHarbor, icon: "mb_gsgw", text: "高速港湾" },
|
|
|
- { key: RoadTemplate.HighwaySection, icon: "mb_gsld", text: "高速路段" }
|
|
|
-]
|
|
|
+ { key: RoadTemplate.SBend, icon: 'mb_sxwl', text: 's型弯路' },
|
|
|
+ { key: RoadTemplate.TJunction, icon: 'mb_dzlk', text: '丁字路口' },
|
|
|
+ { key: RoadTemplate.FiveForks, icon: 'mb_wclk', text: '五岔路口' },
|
|
|
+ { key: RoadTemplate.ExitRamp, icon: 'mb_ckzd', text: '出口匝道' },
|
|
|
+ { key: RoadTemplate.Crossroads, icon: 'mb_szlk', text: '十字路口' },
|
|
|
+ { key: RoadTemplate.NationalHighwayShoulder, icon: 'mb_gdlj', text: '国道(路肩)' },
|
|
|
+ { key: RoadTemplate.IndoorSection, icon: 'mb_snld', text: '室内路段' },
|
|
|
+ { key: RoadTemplate.Bend, icon: 'mb_wd', text: '弯道' },
|
|
|
+ { key: RoadTemplate.SharpCurve, icon: 'mb_jzwd', text: '急转弯道' },
|
|
|
+ { key: RoadTemplate.SixForkIntersection, icon: 'mb_lclk', text: '六岔路口' },
|
|
|
+ { key: RoadTemplate.WideNarrowRoad, icon: 'mb_kbzld', text: '宽变窄路段' },
|
|
|
+ { key: RoadTemplate.Corner, icon: 'mb_zjwd', text: '直角弯道' },
|
|
|
+ { key: RoadTemplate.ImportSmashedRoad, icon: 'mb_jkzd', text: '进口匝道' },
|
|
|
+ { key: RoadTemplate.HighSpeedTollBooth, icon: 'mb_gssfz', text: '高速收费站' },
|
|
|
+ { key: RoadTemplate.HighSpeedHarbor, icon: 'mb_gsgw', text: '高速港湾' },
|
|
|
+ { key: RoadTemplate.HighwaySection, icon: 'mb_gsld', text: '高速路段' },
|
|
|
+];
|
|
|
|
|
|
export const measureMenusRaw = [
|
|
|
{
|
|
|
key: UIType.BaseLine,
|
|
|
- icon: "line",
|
|
|
- text: "基准线",
|
|
|
- disabled: computed(() => graphicState.value.existsBaseLine)
|
|
|
+ icon: 'line',
|
|
|
+ text: '基准线',
|
|
|
+ disabled: computed(() => graphicState.value.existsBaseLine),
|
|
|
+ },
|
|
|
+ { key: UIType.BasePoint, text: '基准点', icon: 'point' },
|
|
|
+ {
|
|
|
+ key: UIType.NormalLocationMode,
|
|
|
+ text: '自由测量',
|
|
|
+ icon: 'measure_f',
|
|
|
+ onClick(data) {
|
|
|
+ if (graphicState.value.canAllLocationMode) {
|
|
|
+ uiType.change(data.key);
|
|
|
+ } else {
|
|
|
+ Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
- { key: UIType.BasePoint, text: "基准点", icon: "point", },
|
|
|
- { key: UIType.NormalLocationMode, text: "自由测量", icon: "measure_f" },
|
|
|
{
|
|
|
key: UIType.AngleLocationMode,
|
|
|
- text: "直角定位法",
|
|
|
- icon: "measure_r",
|
|
|
+ text: '直角定位法',
|
|
|
+ icon: 'measure_r',
|
|
|
onClick(data) {
|
|
|
+ console.error(graphicState.value.canAllLocationMode);
|
|
|
if (graphicState.value.canAllLocationMode) {
|
|
|
- uiType.change(data.key)
|
|
|
+ uiType.change(data.key);
|
|
|
} else {
|
|
|
- Message.success({ msg: "请添加基准线及基准点后再执行此操作", time: 3000 })
|
|
|
+ Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
key: UIType.AllLocationMode,
|
|
|
- text: "综合定位法",
|
|
|
- icon: "measure_c",
|
|
|
+ text: '综合定位法',
|
|
|
+ icon: 'measure_c',
|
|
|
onClick(data) {
|
|
|
if (graphicState.value.canAllLocationMode) {
|
|
|
- uiType.change(data.key)
|
|
|
+ uiType.change(data.key);
|
|
|
} else {
|
|
|
- Message.success({ msg: "请添加基准线及基准点后再执行此操作", time: 3000 })
|
|
|
+ Message.success({ msg: '请添加基准线及基准点后再执行此操作', time: 3000 });
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
-]
|
|
|
+];
|
|
|
|
|
|
export const mainMenusRaw: MenusRaw = [
|
|
|
{
|
|
|
key: UIType.Line,
|
|
|
- text: "画线",
|
|
|
- icon: "line_d",
|
|
|
+ text: '画线',
|
|
|
+ icon: 'line_d',
|
|
|
// children: [
|
|
|
// {
|
|
|
// key: UIType.Line,
|
|
@@ -136,100 +143,85 @@ export const mainMenusRaw: MenusRaw = [
|
|
|
},
|
|
|
{
|
|
|
key: UITypeExtend.road,
|
|
|
- text: "道路",
|
|
|
- icon: "road",
|
|
|
+ text: '道路',
|
|
|
+ icon: 'road',
|
|
|
children: [
|
|
|
- { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "" },
|
|
|
- { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "" },
|
|
|
- { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "" },
|
|
|
- { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "" },
|
|
|
- { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "" },
|
|
|
- { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "" },
|
|
|
- { key: UIType.CurveRoad, icon: "road_wl", text: "" },
|
|
|
- { key: UITypeExtend.structure, icon: "r_template", text: "道路结构", extend: structureMenusRaw },
|
|
|
- { key: UITypeExtend.template, icon: "r_structure", text: "道路模板", extend: templateMenusRaw },
|
|
|
- ]
|
|
|
- }, {
|
|
|
+ { key: UIType.OneEdgeOneLanRoad, icon: 'road_ss', text: '' },
|
|
|
+ { key: UIType.OneEdgeTwoLanRoad, icon: 'road_sd', text: '' },
|
|
|
+ { key: UIType.OneEdgeThreeLanRoad, icon: 'road_st', text: '' },
|
|
|
+ { key: UIType.TwoEdgeOneLanRoad, icon: 'road_ds', text: '' },
|
|
|
+ { key: UIType.TwoEdgeTwoLanRoad, icon: 'road_dd', text: '' },
|
|
|
+ { key: UIType.TwoEdgeThreeLanRoad, icon: 'road_dt', text: '' },
|
|
|
+ { key: UIType.CurveRoad, icon: 'road_wl', text: '' },
|
|
|
+ { key: UITypeExtend.structure, icon: 'r_template', text: '道路结构', extend: structureMenusRaw },
|
|
|
+ { key: UITypeExtend.template, icon: 'r_structure', text: '道路模板', extend: templateMenusRaw },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
key: UITypeExtend.image,
|
|
|
- text: "图例",
|
|
|
- icon: "road",
|
|
|
+ text: '图例',
|
|
|
+ icon: 'road',
|
|
|
// children: [
|
|
|
// { key: UIType.BusPlane, text: "客车平面图" }
|
|
|
// ]
|
|
|
},
|
|
|
{
|
|
|
key: UITypeExtend.measure,
|
|
|
- text: "测量",
|
|
|
+ text: '测量',
|
|
|
children: measureMenusRaw,
|
|
|
- icon: "measure"
|
|
|
+ icon: 'measure',
|
|
|
},
|
|
|
- { key: UIType.Text, text: "文字", icon: "text" },
|
|
|
- { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
|
|
|
+ { key: UIType.Text, text: '文字', icon: 'text' },
|
|
|
+ { key: UIType.Magnifier, text: '放大镜', icon: 'magnify_g' },
|
|
|
|
|
|
// { key: UITypeExtend.photo, text: "照片库" },
|
|
|
{
|
|
|
key: UITypeExtend.setup,
|
|
|
- icon: "setting",
|
|
|
- text: "设置",
|
|
|
+ icon: 'setting',
|
|
|
+ text: '设置',
|
|
|
onClick() {
|
|
|
- const { destroy } = mount(
|
|
|
- Setting,
|
|
|
- {
|
|
|
- props: {
|
|
|
- close() {
|
|
|
- destroy();
|
|
|
- }
|
|
|
- }
|
|
|
- } as any
|
|
|
- )
|
|
|
- }
|
|
|
+ const { destroy } = mount(Setting, {
|
|
|
+ props: {
|
|
|
+ close() {
|
|
|
+ destroy();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ } as any);
|
|
|
+ },
|
|
|
},
|
|
|
];
|
|
|
|
|
|
export const photoMenusRaw: MenusRaw = [
|
|
|
- { key: UIType.Text, text: "文字", icon: "text" },
|
|
|
- { key: UIType.Circle, text: "圈出", icon: "circle" },
|
|
|
- { key: UIType.SingleArrow, text: "箭头", icon: "arrows" },
|
|
|
- { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
|
|
|
-]
|
|
|
-
|
|
|
+ { key: UIType.Text, text: '文字', icon: 'text' },
|
|
|
+ { key: UIType.Circle, text: '圈出', icon: 'circle' },
|
|
|
+ { key: UIType.SingleArrow, text: '箭头', icon: 'arrows' },
|
|
|
+ { key: UIType.Magnifier, text: '放大镜', icon: 'magnify_g' },
|
|
|
+];
|
|
|
|
|
|
export const headActionMenuRaw = [
|
|
|
- { key: UIType.GoBack, text: "回退", icon: "backout" },
|
|
|
- { key: UIType.GoAhead, text: "前进", icon: "redo" },
|
|
|
- { key: UIType.Clear, text: "清除", icon: "reset" },
|
|
|
- { key: UIType.BackImageChange, text: "底图开关", icon: "map" },
|
|
|
-]
|
|
|
-
|
|
|
-export const focusMenuRaw : { [key in string]: MenusRaw } = {
|
|
|
-}
|
|
|
+ { key: UIType.GoBack, text: '回退', icon: 'backout' },
|
|
|
+ { key: UIType.GoAhead, text: '前进', icon: 'redo' },
|
|
|
+ { key: UIType.Clear, text: '清除', icon: 'reset' },
|
|
|
+ { key: UIType.BackImageChange, text: '底图开关', icon: 'map' },
|
|
|
+];
|
|
|
|
|
|
+export const focusMenuRaw: { [key in string]: MenusRaw } = {};
|
|
|
|
|
|
-export const generateByMenus = <T extends MenuRaw>(
|
|
|
- generateFn: (men: MenuRaw) => T,
|
|
|
- mainMenus: MenusRaw = mainMenusRaw
|
|
|
-) => generateByMenusRaw(generateFn, mainMenus);
|
|
|
+export const generateByMenus = <T extends MenuRaw>(generateFn: (men: MenuRaw) => T, mainMenus: MenusRaw = mainMenusRaw) => generateByMenusRaw(generateFn, mainMenus);
|
|
|
|
|
|
-export const findMainMenuByAttr = (
|
|
|
- value: MenusRaw,
|
|
|
- attr = "extend" as const,
|
|
|
- mainMenus = mainMenusRaw,
|
|
|
-) => findMenuByAttr(value, attr, mainMenus)
|
|
|
+export const findMainMenuByAttr = (value: MenusRaw, attr = 'extend' as const, mainMenus = mainMenusRaw) => findMenuByAttr(value, attr, mainMenus);
|
|
|
|
|
|
-export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(
|
|
|
- childKey: K,
|
|
|
- generateFn: (men: MenuRaw) => T,
|
|
|
- mainMenus: MenusRaw = mainMenusRaw
|
|
|
-) => generateMixMenusRaw(
|
|
|
- childKey,
|
|
|
- generateFn,
|
|
|
- mainMenus,
|
|
|
- menu => {
|
|
|
+export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(childKey: K, generateFn: (men: MenuRaw) => T, mainMenus: MenusRaw = mainMenusRaw) =>
|
|
|
+ generateMixMenusRaw(
|
|
|
+ childKey,
|
|
|
+ generateFn,
|
|
|
+ mainMenus,
|
|
|
+ (menu) => {
|
|
|
if (menu.onClick) {
|
|
|
- menu.onClick(menu)
|
|
|
+ menu.onClick(menu);
|
|
|
} else {
|
|
|
- uiType.change(menu.key as any)
|
|
|
+ uiType.change(menu.key as any);
|
|
|
}
|
|
|
},
|
|
|
- () => uiType.current
|
|
|
-);
|
|
|
+ () => uiType.current
|
|
|
+ );
|