Showing
7 changed files
with
73 additions
and
12 deletions
... | ... | @@ -145,6 +145,8 @@ |
145 | 145 | // !!!此处需要删除地图的属性,否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded |
146 | 146 | Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map'); |
147 | 147 | Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker'); |
148 | + Reflect.deleteProperty(DeviceStep1Ref.value.devicePositionState, 'map'); | |
149 | + Reflect.deleteProperty(DeviceStep1Ref.value.devicePositionState, 'marker'); | |
148 | 150 | setModalProps({ |
149 | 151 | confirmLoading: true, |
150 | 152 | }); |
... | ... | @@ -156,7 +158,7 @@ |
156 | 158 | customerId: currentDeviceData.customerId, |
157 | 159 | deviceInfo: { |
158 | 160 | avatar: DeviceStep1Ref.value?.devicePic, |
159 | - ...DeviceStep1Ref.value?.positionState, | |
161 | + ...DeviceStep1Ref.value?.devicePositionState, | |
160 | 162 | }, |
161 | 163 | }; |
162 | 164 | validateNameLength(stepRecord.name); |
... | ... | @@ -168,7 +170,7 @@ |
168 | 170 | sn: stepRecord.name, |
169 | 171 | deviceInfo: { |
170 | 172 | avatar: DeviceStep1Ref.value?.devicePic, |
171 | - ...DeviceStep1Ref.value?.positionState, | |
173 | + ...DeviceStep1Ref.value?.devicePositionState, | |
172 | 174 | }, |
173 | 175 | deviceToken: |
174 | 176 | unref(current) === 0 || !unref(stepState).addAgree | ... | ... |
... | ... | @@ -46,7 +46,7 @@ |
46 | 46 | </div> |
47 | 47 | </template> |
48 | 48 | <template #deviceAddress> |
49 | - <Input disabled v-model:value="positionState.address"> | |
49 | + <Input disabled v-model:value="devicePositionState.address"> | |
50 | 50 | <template #addonAfter> |
51 | 51 | <EnvironmentTwoTone @click="selectPosition" /> |
52 | 52 | </template> |
... | ... | @@ -128,6 +128,7 @@ |
128 | 128 | import { useDrawer } from '/@/components/Drawer'; |
129 | 129 | import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue'; |
130 | 130 | import { TaskTypeEnum } from '/@/views/task/center/config'; |
131 | + import { toRaw } from 'vue'; | |
131 | 132 | |
132 | 133 | export default defineComponent({ |
133 | 134 | components: { |
... | ... | @@ -239,8 +240,14 @@ |
239 | 240 | const selectPosition = () => { |
240 | 241 | visible.value = true; |
241 | 242 | if (!positionState.longitude) { |
242 | - positionState.longitude = '104.04666605565338'; | |
243 | - positionState.latitude = '30.543516387560476'; | |
243 | + positionState.longitude = '104.05326410962411'; | |
244 | + positionState.latitude = '30.54855093076791'; | |
245 | + | |
246 | + // 根据经纬度获取详细位置 | |
247 | + if (positionState.longitude && positionState.latitude) { | |
248 | + var pt = new BMap.Point(positionState.longitude, positionState.latitude); | |
249 | + getAddrByPoint(pt); | |
250 | + } | |
244 | 251 | initMap(positionState.longitude, positionState.latitude); |
245 | 252 | } else { |
246 | 253 | initMap(positionState.longitude, positionState.latitude); |
... | ... | @@ -261,6 +268,15 @@ |
261 | 268 | map: null, |
262 | 269 | marker: null, |
263 | 270 | }); |
271 | + | |
272 | + const devicePositionState = ref({ | |
273 | + longitude: '', | |
274 | + latitude: '', | |
275 | + address: '', | |
276 | + map: null, | |
277 | + marker: null, | |
278 | + }); | |
279 | + | |
264 | 280 | /** |
265 | 281 | * 逆地址解析函数(根据坐标点获取详细地址) |
266 | 282 | * @param {Object} point 百度地图坐标点,必传 |
... | ... | @@ -371,6 +387,7 @@ |
371 | 387 | // 确定选择的位置 |
372 | 388 | const handleOk = () => { |
373 | 389 | visible.value = false; |
390 | + devicePositionState.value = { ...toRaw(positionState) }; | |
374 | 391 | }; |
375 | 392 | // 取消选择位置 |
376 | 393 | const handleCancel = () => { |
... | ... | @@ -385,6 +402,7 @@ |
385 | 402 | positionState.longitude = deviceInfo.longitude; |
386 | 403 | positionState.latitude = deviceInfo.latitude; |
387 | 404 | positionState.address = deviceInfo.address; |
405 | + devicePositionState.value = { ...toRaw(positionState) }; | |
388 | 406 | devicePic.value = deviceInfo.avatar; |
389 | 407 | setFieldsValue({ |
390 | 408 | ...data, |
... | ... | @@ -418,11 +436,13 @@ |
418 | 436 | function parentResetDevicePic(deviceInfo) { |
419 | 437 | devicePic.value = deviceInfo.avatar; |
420 | 438 | } |
439 | + | |
421 | 440 | // 父组件重置位置 |
422 | 441 | function parentResetPositionState() { |
423 | 442 | for (let key in positionState) { |
424 | 443 | positionState[key] = ''; |
425 | 444 | } |
445 | + devicePositionState.value = { ...toRaw(positionState) }; | |
426 | 446 | } |
427 | 447 | // 禁用设备类型 |
428 | 448 | function disabledDeviceType(disabled: boolean) { |
... | ... | @@ -474,6 +494,7 @@ |
474 | 494 | handleOpenOrgDrawer, |
475 | 495 | handleSuccess, |
476 | 496 | handleTreeOrg, |
497 | + devicePositionState, | |
477 | 498 | }; |
478 | 499 | }, |
479 | 500 | }); | ... | ... |
... | ... | @@ -16,8 +16,8 @@ |
16 | 16 | <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12"> |
17 | 17 | <!-- <AppLogo class="-enter-x" /> --> |
18 | 18 | <div style="display: flex; margin-top: 10px"> |
19 | - <img v-if="defaultLogo" :src="defaultLogo" style="width: 48px; height: 48px" /> | |
20 | - <img style="width: 48px; height: 48px" v-else src="/src/assets/images/logo.png" /> | |
19 | + <img v-if="defaultLogo" :src="defaultLogo" class="h-12" /> | |
20 | + <img class="h-12" v-else src="/src/assets/images/logo.png" /> | |
21 | 21 | <div |
22 | 22 | class="ml-2 truncate md:opacity-100" |
23 | 23 | style=" | ... | ... |
... | ... | @@ -24,8 +24,9 @@ |
24 | 24 | :customRequest="customUploadIconPic" |
25 | 25 | :before-upload="beforeUploadIconPic" |
26 | 26 | > |
27 | - <div v-if="iconPic"> | |
27 | + <div v-if="iconPic" class="relative"> | |
28 | 28 | <img :src="iconPic" class="m-auto fill-img" /> |
29 | + <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" /> | |
29 | 30 | <div style="background-color: #ccc; margin-top: 20px">重新上传</div> |
30 | 31 | </div> |
31 | 32 | <div v-else> |
... | ... | @@ -81,7 +82,7 @@ |
81 | 82 | import { useMessage } from '/@/hooks/web/useMessage'; |
82 | 83 | import type { FileItem } from '/@/components/Upload/src/typing'; |
83 | 84 | import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index'; |
84 | - import { PlusOutlined } from '@ant-design/icons-vue'; | |
85 | + import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'; | |
85 | 86 | import { useUserStore } from '/@/store/modules/user'; |
86 | 87 | import { createLocalStorage } from '/@/utils/cache/index'; |
87 | 88 | import { Authority } from '/@/components/Authority'; |
... | ... | @@ -100,6 +101,7 @@ |
100 | 101 | ContentUploadText, |
101 | 102 | Spin, |
102 | 103 | CustomUploadComp, |
104 | + CloseCircleOutlined, | |
103 | 105 | }, |
104 | 106 | setup() { |
105 | 107 | const loading = ref(false); |
... | ... | @@ -188,6 +190,11 @@ |
188 | 190 | storage.set('platformInfo', newFieldValue); |
189 | 191 | } |
190 | 192 | |
193 | + // 删除浏览器ico图标 | |
194 | + const handleDelete = () => { | |
195 | + iconPic.value = ''; | |
196 | + }; | |
197 | + | |
191 | 198 | onMounted(async () => { |
192 | 199 | const res = await getPlatForm(); |
193 | 200 | setFieldsValue(res); |
... | ... | @@ -227,6 +234,7 @@ |
227 | 234 | handleResetInfo, |
228 | 235 | handleSetBgImgUrl, |
229 | 236 | handleSetLogoImgUrl, |
237 | + handleDelete, | |
230 | 238 | }; |
231 | 239 | }, |
232 | 240 | }); |
... | ... | @@ -251,4 +259,12 @@ |
251 | 259 | width: 100%; |
252 | 260 | height: 100%; |
253 | 261 | } |
262 | + | |
263 | + .icon-delete { | |
264 | + top: -13px; | |
265 | + right: -13px; | |
266 | + color: rgb(146, 145, 145); | |
267 | + font-size: 1rem; | |
268 | + z-index: 9999; | |
269 | + } | |
254 | 270 | </style> | ... | ... |
1 | 1 | <script setup name="CustomUploadComp" lang="ts"> |
2 | - import { PlusOutlined } from '@ant-design/icons-vue'; | |
2 | + import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'; | |
3 | 3 | import { Upload, Spin } from 'ant-design-vue'; |
4 | 4 | import { ref, watchEffect } from 'vue'; |
5 | 5 | import { useUpload } from './hooks/useUploadFile.hook'; |
... | ... | @@ -40,6 +40,12 @@ |
40 | 40 | } |
41 | 41 | }; |
42 | 42 | |
43 | + // 删除图片 | |
44 | + const handleDelete = () => { | |
45 | + uploadImgUrl.value = ''; | |
46 | + emit('setImg', uploadImgUrl.value); | |
47 | + }; | |
48 | + | |
43 | 49 | watchEffect(() => { |
44 | 50 | init(); |
45 | 51 | }); |
... | ... | @@ -59,7 +65,10 @@ |
59 | 65 | :customRequest="customUpload" |
60 | 66 | :before-upload="beforeUploadVerify" |
61 | 67 | > |
62 | - <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" /> | |
68 | + <div v-if="uploadImgUrl" class="w-full h-full modal-div relative"> | |
69 | + <img class="fill-img" :src="uploadImgUrl" alt="avatar" /> | |
70 | + <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" /> | |
71 | + </div> | |
63 | 72 | <div v-else> |
64 | 73 | <Spin v-if="uploadLoading" tip="正在上传中..." /> |
65 | 74 | <PlusOutlined v-else /> |
... | ... | @@ -74,4 +83,12 @@ |
74 | 83 | width: 100%; |
75 | 84 | height: 100%; |
76 | 85 | } |
86 | + | |
87 | + .icon-delete { | |
88 | + top: -13px; | |
89 | + right: -13px; | |
90 | + color: rgb(146, 145, 145); | |
91 | + font-size: 1rem; | |
92 | + z-index: 9999; | |
93 | + } | |
77 | 94 | </style> | ... | ... |
... | ... | @@ -34,6 +34,12 @@ |
34 | 34 | }, |
35 | 35 | }, |
36 | 36 | { |
37 | + field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, | |
38 | + label: '显示设备名称', | |
39 | + component: 'Checkbox', | |
40 | + defaultValue: option.showDeviceName, | |
41 | + }, | |
42 | + { | |
37 | 43 | field: ComponentConfigFieldEnum.SHOW_TIME, |
38 | 44 | label: '显示时间', |
39 | 45 | component: 'Checkbox', | ... | ... |