Skip to content

Commit b9cdb68

Browse files
cocaine-codercocaine-coder
committed
update
1 parent c398d65 commit b9cdb68

File tree

1 file changed

+53
-67
lines changed

1 file changed

+53
-67
lines changed

‎geojson-editor/src/components/features/Measurer.vue

Lines changed: 53 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,61 @@
11
<template>
2-
<div class="measure-control">
3-
<fieldset>
4-
<legend>
5-
<div class="form-check">
6-
<label class="form-check-label" for="ck-measure">测量</label>
7-
<input id="ck-measure" type="checkbox" v-model="measureEnable">
8-
</div>
9-
</legend>
10-
11-
<div class="measure-properties">
12-
<RadioButton class="measure-properties-tabs" :radios="tabs" v-model:value="currentTab"></RadioButton>
13-
14-
<div class="measure-properties-controls visible" v-show="currentTab === 'visible'">
15-
<div>面线段方向</div>
16-
<input type="checkbox" v-model="direction">
17-
<div>面线距离</div>
18-
<input type="checkbox" v-model="polygonLine">
19-
<div>面线段距离</div>
20-
<input type="checkbox" v-model="polygonLineSegment">
21-
<div>线段距离</div>
22-
<input type="checkbox" v-model="lineSegment">
23-
</div>
2+
<ExtendPannel title="测量" position="top-left" :onToggle="handleToggle">
3+
<div class="measure-properties">
4+
<RadioButton class="measure-properties-tabs" :radios="tabs" v-model:value="currentTab"></RadioButton>
5+
6+
<div class="measure-properties-controls visible" v-show="currentTab === 'visible'">
7+
<div>面线段方向</div>
8+
<input type="checkbox" v-model="direction">
9+
<div>面线距离</div>
10+
<input type="checkbox" v-model="polygonLine">
11+
<div>面线段距离</div>
12+
<input type="checkbox" v-model="polygonLineSegment">
13+
<div>线段距离</div>
14+
<input type="checkbox" v-model="lineSegment">
15+
</div>
2416

25-
<div class="measure-properties-controls" v-show="currentTab === 'units'">
26-
<div>
27-
面积
28-
</div>
29-
<select v-model="areaUnit">
30-
<option value="M2">平方米</option>
31-
<option value="KM2">平方千米</option>
32-
<option value="MU">亩</option>
33-
<option value="M2KM2">自动</option>
34-
</select>
35-
36-
<div>
37-
长度
38-
</div>
39-
<select v-model="lengthUnit">
40-
<option value="M">米</option>
41-
<option value="KM">千米</option>
42-
<option value="MKM">自动</option>
43-
</select>
17+
<div class="measure-properties-controls" v-show="currentTab === 'units'">
18+
<div>
19+
面积
4420
</div>
45-
46-
<div class="measure-properties-controls precision" v-show="currentTab === 'precision'">
47-
<div>米</div>
48-
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[0]" :min="0" step="1">
49-
<div>千米</div>
50-
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[1]" :min="0" step="1">
51-
<div>平方米</div>
52-
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[2]" :min="0" step="1">
53-
<div> 平方千米</div>
54-
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[3]" :min="0" step="1">
55-
<div>亩</div>
56-
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[4]" :min="0" step="1">
21+
<select v-model="areaUnit">
22+
<option value="M2">平方米</option>
23+
<option value="KM2">平方千米</option>
24+
<option value="MU">亩</option>
25+
<option value="M2KM2">自动</option>
26+
</select>
27+
28+
<div>
29+
长度
5730
</div>
31+
<select v-model="lengthUnit">
32+
<option value="M">米</option>
33+
<option value="KM">千米</option>
34+
<option value="MKM">自动</option>
35+
</select>
36+
</div>
37+
38+
<div class="measure-properties-controls precision" v-show="currentTab === 'precision'">
39+
<div>米</div>
40+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[0]" :min="0" step="1">
41+
<div>千米</div>
42+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[1]" :min="0" step="1">
43+
<div>平方米</div>
44+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[2]" :min="0" step="1">
45+
<div> 平方千米</div>
46+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[3]" :min="0" step="1">
47+
<div>亩</div>
48+
<input type="number" @keydown="e => e.preventDefault()" v-model="precisions[4]" :min="0" step="1">
5849
</div>
59-
</fieldset>
60-
</div>
50+
</div>
51+
</ExtendPannel>
6152
</template>
6253

6354
<script lang="ts" setup>
6455
import { ref, watch } from 'vue';
6556
import { MeasureManager, Units } from '../../../../packages/maplugin-core';
6657
import RadioButton from '../base/RadioButton.vue';
58+
import ExtendPannel from '../base/ExtendPannel.vue';
6759
6860
const tabs: Record<"visible" | "units" | "precision", string> = {
6961
'visible': "显示",
@@ -79,10 +71,10 @@ const props = defineProps<{
7971
props.measureManager.setVisible(false);
8072
props.measureManager.setDirectionSymbol('>', '<')
8173
82-
const measureEnable = ref(false);
83-
watch(measureEnable, a => {
84-
props.measureManager.setVisible(a);
85-
});
74+
75+
function handleToggle(active: boolean) {
76+
props.measureManager.setVisible(active);
77+
}
8678
8779
const direction = ref(true);
8880
watch(direction, a => {
@@ -130,14 +122,6 @@ watch(precisions, a => {
130122
</script>
131123

132124
<style scoped>
133-
.measure-control {
134-
background: var(--color-bg);
135-
color: var(--color-word);
136-
font-size: var(--size-word);
137-
padding: 8px;
138-
border-radius: 6px;
139-
width: 200px;
140-
}
141125
142126
.form-check {
143127
display: flex;
@@ -156,6 +140,8 @@ watch(precisions, a => {
156140
display: flex;
157141
flex-direction: column;
158142
gap: 8px;
143+
width: 146px;
144+
color: var(--color-word);
159145
}
160146
161147
.measure-properties-tabs {

0 commit comments

Comments
 (0)