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', | ... | ... |