Showing
6 changed files
with
98 additions
and
59 deletions
... | ... | @@ -48,46 +48,49 @@ |
48 | 48 | @cancel="handleCancel" |
49 | 49 | centered |
50 | 50 | > |
51 | - <div> | |
52 | - <Form :label-col="labelCol" :colon="false" :rules="rules" :model="positionState"> | |
53 | - <Row :gutter="20" class="mt-4"> | |
54 | - <Col :span="20"> | |
55 | - <FormItem label="搜索位置"> | |
56 | - <AutoComplete | |
57 | - v-model:value="positionState.address" | |
58 | - :options="dataSource" | |
59 | - style="width: 100%" | |
60 | - placeholder="搜索位置" | |
61 | - @search="debounceSearch" | |
62 | - @select="handleSelect" | |
63 | - backfill | |
64 | - /> | |
65 | - </FormItem> | |
66 | - </Col> | |
67 | - </Row> | |
68 | - <Row :gutter="20" class=""> | |
69 | - <Col :span="10"> | |
70 | - <FormItem label="经度" name="longitude"> | |
71 | - <Input | |
72 | - @blur="redirectPosition" | |
73 | - @change="redirectPosition" | |
74 | - v-model:value="positionState.longitude" | |
75 | - /> | |
76 | - </FormItem> | |
77 | - </Col> | |
78 | - <Col :span="10"> | |
79 | - <FormItem label="纬度" name="latitude"> | |
80 | - <Input | |
81 | - @blur="redirectPosition" | |
82 | - @change="redirectPosition" | |
83 | - v-model:value="positionState.latitude" | |
84 | - /> | |
85 | - </FormItem> | |
86 | - </Col> | |
87 | - </Row> | |
88 | - </Form> | |
89 | - <div ref="wrapRef" style="height: 300px; width: 90%" class="ml-6"></div> | |
90 | - </div> | |
51 | + <div> | |
52 | + | |
53 | + <Spin :spinning="spinning"> | |
54 | + <Form :label-col="labelCol" :colon="false" :rules="rules" :model="positionState"> | |
55 | + <Row :gutter="20" class="mt-4"> | |
56 | + <Col :span="20"> | |
57 | + <FormItem label="搜索位置"> | |
58 | + <AutoComplete | |
59 | + v-model:value="positionState.address" | |
60 | + :options="dataSource" | |
61 | + style="width: 100%" | |
62 | + placeholder="搜索位置" | |
63 | + @search="debounceSearch" | |
64 | + @select="handleSelect" | |
65 | + backfill | |
66 | + /> | |
67 | + </FormItem> | |
68 | + </Col> | |
69 | + </Row> | |
70 | + <Row :gutter="20" class=""> | |
71 | + <Col :span="10"> | |
72 | + <FormItem label="经度" name="longitude"> | |
73 | + <Input | |
74 | + @blur="redirectPosition" | |
75 | + @change="redirectPosition" | |
76 | + v-model:value="positionState.longitude" | |
77 | + /> | |
78 | + </FormItem> | |
79 | + </Col> | |
80 | + <Col :span="10"> | |
81 | + <FormItem label="纬度" name="latitude"> | |
82 | + <Input | |
83 | + @blur="redirectPosition" | |
84 | + @change="redirectPosition" | |
85 | + v-model:value="positionState.latitude" | |
86 | + /> | |
87 | + </FormItem> | |
88 | + </Col> | |
89 | + </Row> | |
90 | + </Form> | |
91 | + <div ref="wrapRef" style="height: 300px; width: 90%" class="ml-6"></div> | |
92 | + </div> | |
93 | + </Spin> | |
91 | 94 | </Modal> |
92 | 95 | <DeptDrawer @register="registerModal" @success="handleSuccess" /> |
93 | 96 | </div> |
... | ... | @@ -97,7 +100,7 @@ |
97 | 100 | import { BasicForm, useForm } from '/@/components/Form'; |
98 | 101 | import { step1Schemas } from '../../config/data'; |
99 | 102 | import { useScript } from '/@/hooks/web/useScript'; |
100 | - import { Input, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue'; | |
103 | + import { Input, message, Modal, Form, Row, Col, AutoComplete, Spin } from 'ant-design-vue'; | |
101 | 104 | import { EnvironmentTwoTone } from '@ant-design/icons-vue'; |
102 | 105 | import { upload } from '/@/api/oss/ossFileUploader'; |
103 | 106 | import { BAI_DU_MAP_URL } from '/@/utils/fnUtils'; |
... | ... | @@ -113,6 +116,7 @@ |
113 | 116 | import { toRaw } from 'vue'; |
114 | 117 | import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue'; |
115 | 118 | import { buildUUID } from '/@/utils/uuid'; |
119 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
116 | 120 | |
117 | 121 | export default defineComponent({ |
118 | 122 | components: { |
... | ... | @@ -126,6 +130,7 @@ |
126 | 130 | Row, |
127 | 131 | Col, |
128 | 132 | DeptDrawer, |
133 | + Spin, | |
129 | 134 | }, |
130 | 135 | props: { |
131 | 136 | isUpdate: { |
... | ... | @@ -134,6 +139,7 @@ |
134 | 139 | }, |
135 | 140 | emits: ['next'], |
136 | 141 | setup(props, { emit }) { |
142 | + const { createMessage } = useMessage(); | |
137 | 143 | const orgData: any = reactive({ |
138 | 144 | treeData: [], |
139 | 145 | }); |
... | ... | @@ -220,17 +226,41 @@ |
220 | 226 | }; |
221 | 227 | |
222 | 228 | // 地图的弹框 |
229 | + const spinning = ref<boolean>(false); | |
223 | 230 | const visible = ref(false); |
224 | - const selectPosition = () => { | |
231 | + const selectPosition = async () => { | |
225 | 232 | visible.value = true; |
226 | 233 | if (!positionState.longitude) { |
227 | - positionState.longitude = '104.05326410962411'; | |
228 | - positionState.latitude = '30.54855093076791'; | |
229 | - | |
230 | - // 根据经纬度获取详细位置 | |
231 | - if (positionState.longitude && positionState.latitude) { | |
232 | - var pt = new BMap.Point(positionState.longitude, positionState.latitude); | |
233 | - getAddrByPoint(pt); | |
234 | + let getLocalCity = new BMap.LocalCity(); | |
235 | + let getLocation = new BMap.Geolocation(); | |
236 | + const userAgent = navigator.userAgent; | |
237 | + try { | |
238 | + spinning.value = true; | |
239 | + if ( | |
240 | + (userAgent.indexOf('Chrome') > -1 || userAgent.indexOf('WebKit') > -1) && | |
241 | + userAgent.indexOf('Edg') == -1 | |
242 | + ) { | |
243 | + //判断是否是谷歌 或则是谷歌的内核 '104.05326410962411'; '30.54855093076791'; | |
244 | + await getLocalCity.get(function (res) { | |
245 | + positionState.longitude = res?.center.lng || '104.05326410962411'; | |
246 | + positionState.latitude = res?.center.lat || '30.54855093076791'; | |
247 | + var pt = new BMap.Point(positionState.longitude, positionState.latitude); | |
248 | + getAddrByPoint(pt); | |
249 | + }); | |
250 | + } else { | |
251 | + await getLocation.getCurrentPosition(function (res) { | |
252 | + console.log(res, res); | |
253 | + positionState.longitude = res?.longitude || '104.05326410962411'; | |
254 | + positionState.latitude = res?.latitude || '30.54855093076791'; | |
255 | + var pt = new BMap.Point(positionState.longitude, positionState.latitude); | |
256 | + getAddrByPoint(pt); | |
257 | + }); | |
258 | + } | |
259 | + } catch (err) { | |
260 | + console.log(err, 'err'); | |
261 | + createMessage.error('获取定位失败'); | |
262 | + } finally { | |
263 | + spinning.value = false; | |
234 | 264 | } |
235 | 265 | initMap(positionState.longitude, positionState.latitude); |
236 | 266 | } else { |
... | ... | @@ -488,6 +518,7 @@ |
488 | 518 | handleSuccess, |
489 | 519 | handleTreeOrg, |
490 | 520 | devicePositionState, |
521 | + spinning, | |
491 | 522 | }; |
492 | 523 | }, |
493 | 524 | }); | ... | ... |
src/views/device/profiles/components/CategoryList.vue
renamed from
src/views/device/profiles/components/CateforyList.vue
... | ... | @@ -28,6 +28,7 @@ |
28 | 28 | searchInfo: { |
29 | 29 | status: 1, |
30 | 30 | }, |
31 | + resizeHeightOffset: 50, | |
31 | 32 | useSearchForm: true, |
32 | 33 | showTableSetting: false, |
33 | 34 | bordered: true, |
... | ... | @@ -69,12 +70,16 @@ |
69 | 70 | <BasicTable @register="registerTable"> |
70 | 71 | <template #name="{ record }"> |
71 | 72 | <span>{{ record.name }}</span> |
72 | - <ExclamationCircleOutlined @click.stop="handleOpenListDrawer(record)" class="ml-1" /> | |
73 | + <ExclamationCircleOutlined | |
74 | + style="color: #377dff" | |
75 | + @click.stop="handleOpenListDrawer(record)" | |
76 | + class="ml-1" | |
77 | + /> | |
73 | 78 | </template> |
74 | 79 | <template #action="{ record }"> |
75 | - <Button type="link" :disabled="categoryId === record.id" @click="handleChecked(record)" | |
76 | - >选择</Button | |
77 | - > | |
80 | + <Button type="link" :disabled="categoryId === record.id" @click="handleChecked(record)">{{ | |
81 | + categoryId === record.id ? '已选择' : '选择' | |
82 | + }}</Button> | |
78 | 83 | </template> |
79 | 84 | </BasicTable> |
80 | 85 | </BasicDrawer> | ... | ... |
src/views/device/profiles/components/CategoryListDrawer.vue
renamed from
src/views/device/profiles/components/CateforyListDrawer.vue
... | ... | @@ -16,13 +16,13 @@ |
16 | 16 | </div> |
17 | 17 | </template> |
18 | 18 | </BasicForm> |
19 | - <CateforyList | |
19 | + <CategoryList | |
20 | 20 | @register="registerDrawer" |
21 | 21 | @handleOpenListDrawer="handleOpenListDrawer" |
22 | 22 | @handleSelectCategory="handleSelectCategory" |
23 | 23 | @handleClose="handleClose" |
24 | 24 | /> |
25 | - <CateforyListDrawer @register="registerListDrawer" :cateforyListInfo="cateforyListInfo" /> | |
25 | + <CategoryListDrawer @register="registerListDrawer" :cateforyListInfo="cateforyListInfo" /> | |
26 | 26 | </div> |
27 | 27 | </template> |
28 | 28 | <script lang="ts" setup> |
... | ... | @@ -33,8 +33,8 @@ |
33 | 33 | import { buildUUID } from '/@/utils/uuid'; |
34 | 34 | import { Input, Button } from 'ant-design-vue'; |
35 | 35 | import { useDrawer } from '/@/components/Drawer'; |
36 | - import CateforyList from '../components/CateforyList.vue'; | |
37 | - import CateforyListDrawer from '../components/CateforyListDrawer.vue'; | |
36 | + import CategoryList from '../components/CategoryList.vue'; | |
37 | + import CategoryListDrawer from '../components/CategoryListDrawer.vue'; | |
38 | 38 | |
39 | 39 | const emits = defineEmits(['next', 'emitDeviceType']); |
40 | 40 | const props = defineProps({ | ... | ... |