Commit b5dad34f47264032bdcac24ed3e42ad2c5a48c24
1 parent
72de60dc
巡检功能测试中
Showing
6 changed files
with
189 additions
and
293 deletions
src/components/inspection/AddInspectionItem.vue
| 1 | <template> | 1 | <template> |
| 2 | - <el-dialog | ||
| 3 | - :title="$t('inspectionItemManage.addTitle')" | ||
| 4 | - :visible.sync="visible" | ||
| 5 | - width="50%" | ||
| 6 | - @close="handleClose" | ||
| 7 | - > | 2 | + <el-dialog :title="$t('inspectionItemManage.addTitle')" :visible.sync="visible" width="40%" @close="handleClose"> |
| 8 | <el-form ref="form" :model="formData" :rules="rules" label-width="120px"> | 3 | <el-form ref="form" :model="formData" :rules="rules" label-width="120px"> |
| 9 | <el-form-item :label="$t('inspectionItemManage.itemNameLabel')" prop="itemName"> | 4 | <el-form-item :label="$t('inspectionItemManage.itemNameLabel')" prop="itemName"> |
| 10 | - <el-input | ||
| 11 | - v-model="formData.itemName" | ||
| 12 | - :placeholder="$t('inspectionItemManage.requiredItem')" | ||
| 13 | - /> | 5 | + <el-input v-model="formData.itemName" :placeholder="$t('inspectionItemManage.requiredItem')" /> |
| 14 | </el-form-item> | 6 | </el-form-item> |
| 15 | <el-form-item :label="$t('inspectionItemManage.remarkLabel')" prop="remark"> | 7 | <el-form-item :label="$t('inspectionItemManage.remarkLabel')" prop="remark"> |
| 16 | - <el-input | ||
| 17 | - v-model="formData.remark" | ||
| 18 | - type="textarea" | ||
| 19 | - :rows="4" | ||
| 20 | - :placeholder="$t('inspectionItemManage.requiredRemark')" | ||
| 21 | - /> | 8 | + <el-input v-model="formData.remark" type="textarea" :rows="4" |
| 9 | + :placeholder="$t('inspectionItemManage.requiredRemark')" /> | ||
| 22 | </el-form-item> | 10 | </el-form-item> |
| 23 | </el-form> | 11 | </el-form> |
| 24 | - | 12 | + |
| 25 | <span slot="footer" class="dialog-footer"> | 13 | <span slot="footer" class="dialog-footer"> |
| 26 | <el-button @click="visible = false"> | 14 | <el-button @click="visible = false"> |
| 27 | {{ $t('inspectionItemManage.cancel') }} | 15 | {{ $t('inspectionItemManage.cancel') }} |
src/components/inspection/addInspectionPoint.vue
| 1 | <template> | 1 | <template> |
| 2 | - <el-dialog | ||
| 3 | - :title="$t('addInspectionPoint.title')" | ||
| 4 | - :visible.sync="dialogVisible" | ||
| 5 | - width="80%" | ||
| 6 | - top="5vh" | ||
| 7 | - @close="resetForm" | ||
| 8 | - > | ||
| 9 | - <el-form | ||
| 10 | - ref="addForm" | ||
| 11 | - :model="addInspectionPointInfo" | ||
| 12 | - :rules="rules" | ||
| 13 | - label-width="120px" | ||
| 14 | - label-position="right" | ||
| 15 | - > | 2 | + <el-dialog :title="$t('addInspectionPoint.title')" :visible.sync="dialogVisible" width="60%" top="5vh" |
| 3 | + @close="resetForm"> | ||
| 4 | + <el-form ref="addForm" :model="addInspectionPointInfo" :rules="rules" label-width="120px" label-position="right"> | ||
| 16 | <el-row :gutter="20"> | 5 | <el-row :gutter="20"> |
| 17 | <el-col :span="12"> | 6 | <el-col :span="12"> |
| 18 | <el-form-item :label="$t('addInspectionPoint.inspectionName')" prop="inspectionName"> | 7 | <el-form-item :label="$t('addInspectionPoint.inspectionName')" prop="inspectionName"> |
| 19 | - <el-input | ||
| 20 | - v-model="addInspectionPointInfo.inspectionName" | ||
| 21 | - :placeholder="$t('addInspectionPoint.placeholder.inspectionName')" | ||
| 22 | - clearable | ||
| 23 | - /> | 8 | + <el-input v-model="addInspectionPointInfo.inspectionName" |
| 9 | + :placeholder="$t('addInspectionPoint.placeholder.inspectionName')" clearable /> | ||
| 24 | </el-form-item> | 10 | </el-form-item> |
| 25 | </el-col> | 11 | </el-col> |
| 26 | <el-col :span="12"> | 12 | <el-col :span="12"> |
| 27 | <el-form-item :label="$t('addInspectionPoint.pointObjType')" prop="pointObjType"> | 13 | <el-form-item :label="$t('addInspectionPoint.pointObjType')" prop="pointObjType"> |
| 28 | - <el-select | ||
| 29 | - v-model="addInspectionPointInfo.pointObjType" | ||
| 30 | - :placeholder="$t('addInspectionPoint.placeholder.pointObjType')" | ||
| 31 | - style="width: 100%;" | ||
| 32 | - @change="_pointObjTypeChange" | ||
| 33 | - > | ||
| 34 | - <el-option | ||
| 35 | - v-for="item in addInspectionPointInfo.pointObjTypes" | ||
| 36 | - :key="item.statusCd" | ||
| 37 | - :label="item.name" | ||
| 38 | - :value="item.statusCd" | ||
| 39 | - /> | 14 | + <el-select v-model="addInspectionPointInfo.pointObjType" |
| 15 | + :placeholder="$t('addInspectionPoint.placeholder.pointObjType')" style="width: 100%;" | ||
| 16 | + @change="_pointObjTypeChange"> | ||
| 17 | + <el-option v-for="item in addInspectionPointInfo.pointObjTypes" :key="item.statusCd" :label="item.name" | ||
| 18 | + :value="item.statusCd" /> | ||
| 40 | </el-select> | 19 | </el-select> |
| 41 | </el-form-item> | 20 | </el-form-item> |
| 42 | </el-col> | 21 | </el-col> |
| @@ -45,11 +24,8 @@ | @@ -45,11 +24,8 @@ | ||
| 45 | <el-row :gutter="20" v-if="addInspectionPointInfo.pointObjType === '2002'"> | 24 | <el-row :gutter="20" v-if="addInspectionPointInfo.pointObjType === '2002'"> |
| 46 | <el-col :span="12"> | 25 | <el-col :span="12"> |
| 47 | <el-form-item :label="$t('addInspectionPoint.pointObjName')" prop="pointObjName"> | 26 | <el-form-item :label="$t('addInspectionPoint.pointObjName')" prop="pointObjName"> |
| 48 | - <el-input | ||
| 49 | - v-model="addInspectionPointInfo.pointObjName" | ||
| 50 | - :placeholder="$t('addInspectionPoint.placeholder.pointObjName')" | ||
| 51 | - clearable | ||
| 52 | - /> | 27 | + <el-input v-model="addInspectionPointInfo.pointObjName" |
| 28 | + :placeholder="$t('addInspectionPoint.placeholder.pointObjName')" clearable /> | ||
| 53 | </el-form-item> | 29 | </el-form-item> |
| 54 | </el-col> | 30 | </el-col> |
| 55 | </el-row> | 31 | </el-row> |
| @@ -57,11 +33,7 @@ | @@ -57,11 +33,7 @@ | ||
| 57 | <el-row :gutter="20" v-if="addInspectionPointInfo.pointObjType === '1001'"> | 33 | <el-row :gutter="20" v-if="addInspectionPointInfo.pointObjType === '1001'"> |
| 58 | <el-col :span="24"> | 34 | <el-col :span="24"> |
| 59 | <el-form-item :label="$t('addInspectionPoint.machine')" prop="pointObjId"> | 35 | <el-form-item :label="$t('addInspectionPoint.machine')" prop="pointObjId"> |
| 60 | - <machine-select2 | ||
| 61 | - ref="machineSelect" | ||
| 62 | - :parent-modal="true" | ||
| 63 | - @notify="handleMachineSelect" | ||
| 64 | - /> | 36 | + <machine-select2 ref="machineSelect" :parent-modal="true" @notify="handleMachineSelect" /> |
| 65 | <div class="tip-text">{{ $t('addInspectionPoint.tip.addMachine') }}</div> | 37 | <div class="tip-text">{{ $t('addInspectionPoint.tip.addMachine') }}</div> |
| 66 | </el-form-item> | 38 | </el-form-item> |
| 67 | </el-col> | 39 | </el-col> |
| @@ -70,27 +42,17 @@ | @@ -70,27 +42,17 @@ | ||
| 70 | <el-row :gutter="20"> | 42 | <el-row :gutter="20"> |
| 71 | <el-col :span="12"> | 43 | <el-col :span="12"> |
| 72 | <el-form-item :label="$t('addInspectionPoint.itemId')" prop="itemId"> | 44 | <el-form-item :label="$t('addInspectionPoint.itemId')" prop="itemId"> |
| 73 | - <el-select | ||
| 74 | - v-model="addInspectionPointInfo.itemId" | ||
| 75 | - :placeholder="$t('addInspectionPoint.placeholder.itemId')" | ||
| 76 | - style="width: 100%;" | ||
| 77 | - > | ||
| 78 | - <el-option | ||
| 79 | - v-for="item in addInspectionPointInfo.items" | ||
| 80 | - :key="item.itemId" | ||
| 81 | - :label="item.itemName" | ||
| 82 | - :value="item.itemId" | ||
| 83 | - /> | 45 | + <el-select v-model="addInspectionPointInfo.itemId" |
| 46 | + :placeholder="$t('addInspectionPoint.placeholder.itemId')" style="width: 100%;"> | ||
| 47 | + <el-option v-for="item in addInspectionPointInfo.items" :key="item.itemId" :label="item.itemName" | ||
| 48 | + :value="item.itemId" /> | ||
| 84 | </el-select> | 49 | </el-select> |
| 85 | </el-form-item> | 50 | </el-form-item> |
| 86 | </el-col> | 51 | </el-col> |
| 87 | <el-col :span="12"> | 52 | <el-col :span="12"> |
| 88 | <el-form-item :label="$t('addInspectionPoint.nfcCode')"> | 53 | <el-form-item :label="$t('addInspectionPoint.nfcCode')"> |
| 89 | - <el-input | ||
| 90 | - v-model="addInspectionPointInfo.nfcCode" | ||
| 91 | - :placeholder="$t('addInspectionPoint.placeholder.nfcCode')" | ||
| 92 | - clearable | ||
| 93 | - /> | 54 | + <el-input v-model="addInspectionPointInfo.nfcCode" |
| 55 | + :placeholder="$t('addInspectionPoint.placeholder.nfcCode')" clearable /> | ||
| 94 | </el-form-item> | 56 | </el-form-item> |
| 95 | </el-col> | 57 | </el-col> |
| 96 | </el-row> | 58 | </el-row> |
| @@ -98,20 +60,14 @@ | @@ -98,20 +60,14 @@ | ||
| 98 | <el-row :gutter="20"> | 60 | <el-row :gutter="20"> |
| 99 | <el-col :span="12"> | 61 | <el-col :span="12"> |
| 100 | <el-form-item :label="$t('addInspectionPoint.lng')"> | 62 | <el-form-item :label="$t('addInspectionPoint.lng')"> |
| 101 | - <el-input | ||
| 102 | - v-model="addInspectionPointInfo.lng" | ||
| 103 | - :placeholder="$t('addInspectionPoint.placeholder.lng')" | ||
| 104 | - disabled | ||
| 105 | - /> | 63 | + <el-input v-model="addInspectionPointInfo.lng" :placeholder="$t('addInspectionPoint.placeholder.lng')" |
| 64 | + disabled /> | ||
| 106 | </el-form-item> | 65 | </el-form-item> |
| 107 | </el-col> | 66 | </el-col> |
| 108 | <el-col :span="12"> | 67 | <el-col :span="12"> |
| 109 | <el-form-item :label="$t('addInspectionPoint.lat')"> | 68 | <el-form-item :label="$t('addInspectionPoint.lat')"> |
| 110 | - <el-input | ||
| 111 | - v-model="addInspectionPointInfo.lat" | ||
| 112 | - :placeholder="$t('addInspectionPoint.placeholder.lat')" | ||
| 113 | - disabled | ||
| 114 | - /> | 69 | + <el-input v-model="addInspectionPointInfo.lat" :placeholder="$t('addInspectionPoint.placeholder.lat')" |
| 70 | + disabled /> | ||
| 115 | </el-form-item> | 71 | </el-form-item> |
| 116 | </el-col> | 72 | </el-col> |
| 117 | </el-row> | 73 | </el-row> |
| @@ -119,19 +75,15 @@ | @@ -119,19 +75,15 @@ | ||
| 119 | <el-row :gutter="20"> | 75 | <el-row :gutter="20"> |
| 120 | <el-col :span="24"> | 76 | <el-col :span="24"> |
| 121 | <el-form-item :label="$t('addInspectionPoint.remark')"> | 77 | <el-form-item :label="$t('addInspectionPoint.remark')"> |
| 122 | - <el-input | ||
| 123 | - v-model="addInspectionPointInfo.remark" | ||
| 124 | - type="textarea" | ||
| 125 | - :rows="3" | ||
| 126 | - :placeholder="$t('addInspectionPoint.placeholder.remark')" | ||
| 127 | - /> | 78 | + <el-input v-model="addInspectionPointInfo.remark" type="textarea" :rows="3" |
| 79 | + :placeholder="$t('addInspectionPoint.placeholder.remark')" /> | ||
| 128 | </el-form-item> | 80 | </el-form-item> |
| 129 | </el-col> | 81 | </el-col> |
| 130 | </el-row> | 82 | </el-row> |
| 131 | 83 | ||
| 132 | <el-row :gutter="20"> | 84 | <el-row :gutter="20"> |
| 133 | <el-col :span="24"> | 85 | <el-col :span="24"> |
| 134 | - <div id="addInspectionPointMap" style="width: 100%; height: 300px;"></div> | 86 | + <select-map-pos ref="selectMapPos" @position-change="handlePositionChange" /> |
| 135 | </el-col> | 87 | </el-col> |
| 136 | </el-row> | 88 | </el-row> |
| 137 | </el-form> | 89 | </el-form> |
| @@ -149,18 +101,21 @@ import { listInspectionItems } from '@/api/inspection/inspectionPointApi' | @@ -149,18 +101,21 @@ import { listInspectionItems } from '@/api/inspection/inspectionPointApi' | ||
| 149 | import { getDict } from '@/api/community/communityApi' | 101 | import { getDict } from '@/api/community/communityApi' |
| 150 | import { getCommunityId } from '@/api/community/communityApi' | 102 | import { getCommunityId } from '@/api/community/communityApi' |
| 151 | import MachineSelect2 from '@/components/inspection/machineSelect2' | 103 | import MachineSelect2 from '@/components/inspection/machineSelect2' |
| 104 | +import SelectMapPos from '@/components/inspection/selectMapPos' | ||
| 105 | + | ||
| 152 | 106 | ||
| 153 | export default { | 107 | export default { |
| 154 | name: 'AddInspectionPoint', | 108 | name: 'AddInspectionPoint', |
| 155 | components: { | 109 | components: { |
| 156 | - MachineSelect2 | 110 | + MachineSelect2, |
| 111 | + SelectMapPos | ||
| 157 | }, | 112 | }, |
| 158 | data() { | 113 | data() { |
| 159 | return { | 114 | return { |
| 160 | dialogVisible: false, | 115 | dialogVisible: false, |
| 161 | addInspectionPointInfo: { | 116 | addInspectionPointInfo: { |
| 162 | inspectionName: '', | 117 | inspectionName: '', |
| 163 | - pointObjId: '', | 118 | + pointObjId: '-1', |
| 164 | pointObjType: '', | 119 | pointObjType: '', |
| 165 | pointObjTypes: [], | 120 | pointObjTypes: [], |
| 166 | pointObjName: '', | 121 | pointObjName: '', |
| @@ -208,7 +163,7 @@ export default { | @@ -208,7 +163,7 @@ export default { | ||
| 208 | this._listAddInspectionItems() | 163 | this._listAddInspectionItems() |
| 209 | }) | 164 | }) |
| 210 | }, | 165 | }, |
| 211 | - | 166 | + |
| 212 | async getDictData() { | 167 | async getDictData() { |
| 213 | try { | 168 | try { |
| 214 | const data = await getDict('inspection_point', 'point_obj_type') | 169 | const data = await getDict('inspection_point', 'point_obj_type') |
| @@ -217,7 +172,7 @@ export default { | @@ -217,7 +172,7 @@ export default { | ||
| 217 | console.error('获取字典数据失败:', error) | 172 | console.error('获取字典数据失败:', error) |
| 218 | } | 173 | } |
| 219 | }, | 174 | }, |
| 220 | - | 175 | + |
| 221 | async _listAddInspectionItems() { | 176 | async _listAddInspectionItems() { |
| 222 | try { | 177 | try { |
| 223 | const params = { | 178 | const params = { |
| @@ -225,55 +180,59 @@ export default { | @@ -225,55 +180,59 @@ export default { | ||
| 225 | page: 1, | 180 | page: 1, |
| 226 | row: 100 | 181 | row: 100 |
| 227 | } | 182 | } |
| 228 | - | 183 | + |
| 229 | const response = await listInspectionItems(params) | 184 | const response = await listInspectionItems(params) |
| 230 | this.addInspectionPointInfo.items = response.data | 185 | this.addInspectionPointInfo.items = response.data |
| 231 | } catch (error) { | 186 | } catch (error) { |
| 232 | console.error('获取巡检项目失败:', error) | 187 | console.error('获取巡检项目失败:', error) |
| 233 | } | 188 | } |
| 234 | }, | 189 | }, |
| 235 | - | 190 | + |
| 236 | initMap() { | 191 | initMap() { |
| 237 | // 这里简化了地图初始化，实际项目中需要根据地图API实现 | 192 | // 这里简化了地图初始化，实际项目中需要根据地图API实现 |
| 238 | - console.log('初始化地图...') | 193 | + setTimeout(() => { |
| 194 | + this.$refs.selectMapPos.initMap({}) | ||
| 195 | + }, 1000) | ||
| 239 | }, | 196 | }, |
| 240 | - | 197 | + |
| 241 | _pointObjTypeChange() { | 198 | _pointObjTypeChange() { |
| 242 | this.addInspectionPointInfo.pointObjId = '' | 199 | this.addInspectionPointInfo.pointObjId = '' |
| 243 | this.addInspectionPointInfo.pointObjName = '' | 200 | this.addInspectionPointInfo.pointObjName = '' |
| 244 | - | 201 | + |
| 245 | if (this.addInspectionPointInfo.pointObjType === '1001') { | 202 | if (this.addInspectionPointInfo.pointObjType === '1001') { |
| 246 | this.$refs.machineSelect.clearMachine() | 203 | this.$refs.machineSelect.clearMachine() |
| 247 | } | 204 | } |
| 248 | }, | 205 | }, |
| 249 | - | 206 | + |
| 250 | handleMachineSelect(data) { | 207 | handleMachineSelect(data) { |
| 251 | if (data && data.machineId && data.machineName) { | 208 | if (data && data.machineId && data.machineName) { |
| 252 | this.addInspectionPointInfo.pointObjId = data.machineId | 209 | this.addInspectionPointInfo.pointObjId = data.machineId |
| 253 | this.addInspectionPointInfo.pointObjName = data.machineName | 210 | this.addInspectionPointInfo.pointObjName = data.machineName |
| 254 | } | 211 | } |
| 255 | }, | 212 | }, |
| 256 | - | 213 | + |
| 257 | saveInspectionPointInfo() { | 214 | saveInspectionPointInfo() { |
| 258 | this.$refs.addForm.validate(async valid => { | 215 | this.$refs.addForm.validate(async valid => { |
| 259 | if (!valid) return | 216 | if (!valid) return |
| 260 | - | 217 | + if (this.addInspectionPointInfo.pointObjType == '2002') { |
| 218 | + this.addInspectionPointInfo.pointObjId = '-1' | ||
| 219 | + } | ||
| 261 | // 特殊验证 | 220 | // 特殊验证 |
| 262 | if (this.addInspectionPointInfo.pointObjType === '1001' && !this.addInspectionPointInfo.pointObjId) { | 221 | if (this.addInspectionPointInfo.pointObjType === '1001' && !this.addInspectionPointInfo.pointObjId) { |
| 263 | this.$message.error(this.$t('addInspectionPoint.rules.machineRequired')) | 222 | this.$message.error(this.$t('addInspectionPoint.rules.machineRequired')) |
| 264 | return | 223 | return |
| 265 | } | 224 | } |
| 266 | - | 225 | + |
| 267 | if (this.addInspectionPointInfo.pointObjType === '2002' && !this.addInspectionPointInfo.pointObjName) { | 226 | if (this.addInspectionPointInfo.pointObjType === '2002' && !this.addInspectionPointInfo.pointObjName) { |
| 268 | this.$message.error(this.$t('addInspectionPoint.rules.locationRequired')) | 227 | this.$message.error(this.$t('addInspectionPoint.rules.locationRequired')) |
| 269 | return | 228 | return |
| 270 | } | 229 | } |
| 271 | - | 230 | + |
| 272 | try { | 231 | try { |
| 273 | this.addInspectionPointInfo.communityId = this.communityId | 232 | this.addInspectionPointInfo.communityId = this.communityId |
| 274 | - | 233 | + |
| 275 | const response = await saveInspectionPoint(this.addInspectionPointInfo) | 234 | const response = await saveInspectionPoint(this.addInspectionPointInfo) |
| 276 | - | 235 | + |
| 277 | if (response.code === 0) { | 236 | if (response.code === 0) { |
| 278 | this.$message.success(this.$t('addInspectionPoint.saveSuccess')) | 237 | this.$message.success(this.$t('addInspectionPoint.saveSuccess')) |
| 279 | this.dialogVisible = false | 238 | this.dialogVisible = false |
| @@ -287,11 +246,11 @@ export default { | @@ -287,11 +246,11 @@ export default { | ||
| 287 | } | 246 | } |
| 288 | }) | 247 | }) |
| 289 | }, | 248 | }, |
| 290 | - | 249 | + |
| 291 | resetForm() { | 250 | resetForm() { |
| 292 | this.addInspectionPointInfo = { | 251 | this.addInspectionPointInfo = { |
| 293 | inspectionName: '', | 252 | inspectionName: '', |
| 294 | - pointObjId: '', | 253 | + pointObjId: '-1', |
| 295 | pointObjType: '', | 254 | pointObjType: '', |
| 296 | pointObjName: '', | 255 | pointObjName: '', |
| 297 | remark: '', | 256 | remark: '', |
| @@ -302,14 +261,18 @@ export default { | @@ -302,14 +261,18 @@ export default { | ||
| 302 | lat: '', | 261 | lat: '', |
| 303 | communityId: '' | 262 | communityId: '' |
| 304 | } | 263 | } |
| 305 | - | 264 | + |
| 306 | if (this.$refs.addForm) { | 265 | if (this.$refs.addForm) { |
| 307 | this.$refs.addForm.resetFields() | 266 | this.$refs.addForm.resetFields() |
| 308 | } | 267 | } |
| 309 | - | 268 | + |
| 310 | if (this.$refs.machineSelect) { | 269 | if (this.$refs.machineSelect) { |
| 311 | this.$refs.machineSelect.clearMachine() | 270 | this.$refs.machineSelect.clearMachine() |
| 312 | } | 271 | } |
| 272 | + }, | ||
| 273 | + handlePositionChange(data) { | ||
| 274 | + this.addInspectionPointInfo.lng = data.lng | ||
| 275 | + this.addInspectionPointInfo.lat = data.lat | ||
| 313 | } | 276 | } |
| 314 | }, | 277 | }, |
| 315 | created() { | 278 | created() { |
src/components/inspection/editInspectionPoint.vue
| 1 | <template> | 1 | <template> |
| 2 | - <el-dialog | ||
| 3 | - :title="$t('editInspectionPoint.title')" | ||
| 4 | - :visible.sync="dialogVisible" | ||
| 5 | - width="80%" | ||
| 6 | - top="5vh" | ||
| 7 | - @close="resetForm" | ||
| 8 | - > | ||
| 9 | - <el-form | ||
| 10 | - ref="editForm" | ||
| 11 | - :model="editInspectionPointInfo" | ||
| 12 | - :rules="rules" | ||
| 13 | - label-width="120px" | ||
| 14 | - label-position="right" | ||
| 15 | - > | 2 | + <el-dialog :title="$t('editInspectionPoint.title')" :visible.sync="dialogVisible" width="60%" top="5vh" |
| 3 | + @close="resetForm"> | ||
| 4 | + <el-form ref="editForm" :model="editInspectionPointInfo" :rules="rules" label-width="120px" label-position="right"> | ||
| 16 | <el-row :gutter="20"> | 5 | <el-row :gutter="20"> |
| 17 | <el-col :span="12"> | 6 | <el-col :span="12"> |
| 18 | <el-form-item :label="$t('editInspectionPoint.inspectionName')" prop="inspectionName"> | 7 | <el-form-item :label="$t('editInspectionPoint.inspectionName')" prop="inspectionName"> |
| 19 | - <el-input | ||
| 20 | - v-model="editInspectionPointInfo.inspectionName" | ||
| 21 | - :placeholder="$t('editInspectionPoint.placeholder.inspectionName')" | ||
| 22 | - clearable | ||
| 23 | - /> | 8 | + <el-input v-model="editInspectionPointInfo.inspectionName" |
| 9 | + :placeholder="$t('editInspectionPoint.placeholder.inspectionName')" clearable /> | ||
| 24 | </el-form-item> | 10 | </el-form-item> |
| 25 | </el-col> | 11 | </el-col> |
| 26 | <el-col :span="12"> | 12 | <el-col :span="12"> |
| 27 | <el-form-item :label="$t('editInspectionPoint.pointObjType')" prop="pointObjType"> | 13 | <el-form-item :label="$t('editInspectionPoint.pointObjType')" prop="pointObjType"> |
| 28 | - <el-select | ||
| 29 | - v-model="editInspectionPointInfo.pointObjType" | ||
| 30 | - :placeholder="$t('editInspectionPoint.placeholder.pointObjType')" | ||
| 31 | - style="width: 100%;" | ||
| 32 | - @change="_pointObjTypeChange" | ||
| 33 | - disabled | ||
| 34 | - > | ||
| 35 | - <el-option | ||
| 36 | - v-for="item in editInspectionPointInfo.pointObjTypes" | ||
| 37 | - :key="item.statusCd" | ||
| 38 | - :label="item.name" | ||
| 39 | - :value="item.statusCd" | ||
| 40 | - /> | 14 | + <el-select v-model="editInspectionPointInfo.pointObjType" |
| 15 | + :placeholder="$t('editInspectionPoint.placeholder.pointObjType')" style="width: 100%;" | ||
| 16 | + @change="_pointObjTypeChange" disabled> | ||
| 17 | + <el-option v-for="item in editInspectionPointInfo.pointObjTypes" :key="item.statusCd" :label="item.name" | ||
| 18 | + :value="item.statusCd" /> | ||
| 41 | </el-select> | 19 | </el-select> |
| 42 | </el-form-item> | 20 | </el-form-item> |
| 43 | </el-col> | 21 | </el-col> |
| @@ -46,11 +24,8 @@ | @@ -46,11 +24,8 @@ | ||
| 46 | <el-row :gutter="20" v-if="editInspectionPointInfo.pointObjType === '2002'"> | 24 | <el-row :gutter="20" v-if="editInspectionPointInfo.pointObjType === '2002'"> |
| 47 | <el-col :span="12"> | 25 | <el-col :span="12"> |
| 48 | <el-form-item :label="$t('editInspectionPoint.pointObjName')" prop="pointObjName"> | 26 | <el-form-item :label="$t('editInspectionPoint.pointObjName')" prop="pointObjName"> |
| 49 | - <el-input | ||
| 50 | - v-model="editInspectionPointInfo.pointObjName" | ||
| 51 | - :placeholder="$t('editInspectionPoint.placeholder.pointObjName')" | ||
| 52 | - clearable | ||
| 53 | - /> | 27 | + <el-input v-model="editInspectionPointInfo.pointObjName" |
| 28 | + :placeholder="$t('editInspectionPoint.placeholder.pointObjName')" clearable /> | ||
| 54 | </el-form-item> | 29 | </el-form-item> |
| 55 | </el-col> | 30 | </el-col> |
| 56 | </el-row> | 31 | </el-row> |
| @@ -58,11 +33,7 @@ | @@ -58,11 +33,7 @@ | ||
| 58 | <el-row :gutter="20" v-if="editInspectionPointInfo.pointObjType === '1001'"> | 33 | <el-row :gutter="20" v-if="editInspectionPointInfo.pointObjType === '1001'"> |
| 59 | <el-col :span="24"> | 34 | <el-col :span="24"> |
| 60 | <el-form-item :label="$t('editInspectionPoint.machine')" prop="pointObjId"> | 35 | <el-form-item :label="$t('editInspectionPoint.machine')" prop="pointObjId"> |
| 61 | - <machine-select2 | ||
| 62 | - ref="machineSelect" | ||
| 63 | - :parent-modal="true" | ||
| 64 | - @notify="handleMachineSelect" | ||
| 65 | - /> | 36 | + <machine-select2 ref="machineSelect" :parent-modal="true" @notify="handleMachineSelect" /> |
| 66 | </el-form-item> | 37 | </el-form-item> |
| 67 | </el-col> | 38 | </el-col> |
| 68 | </el-row> | 39 | </el-row> |
| @@ -70,27 +41,17 @@ | @@ -70,27 +41,17 @@ | ||
| 70 | <el-row :gutter="20"> | 41 | <el-row :gutter="20"> |
| 71 | <el-col :span="12"> | 42 | <el-col :span="12"> |
| 72 | <el-form-item :label="$t('editInspectionPoint.itemId')" prop="itemId"> | 43 | <el-form-item :label="$t('editInspectionPoint.itemId')" prop="itemId"> |
| 73 | - <el-select | ||
| 74 | - v-model="editInspectionPointInfo.itemId" | ||
| 75 | - :placeholder="$t('editInspectionPoint.placeholder.itemId')" | ||
| 76 | - style="width: 100%;" | ||
| 77 | - > | ||
| 78 | - <el-option | ||
| 79 | - v-for="item in editInspectionPointInfo.items" | ||
| 80 | - :key="item.itemId" | ||
| 81 | - :label="item.itemName" | ||
| 82 | - :value="item.itemId" | ||
| 83 | - /> | 44 | + <el-select v-model="editInspectionPointInfo.itemId" |
| 45 | + :placeholder="$t('editInspectionPoint.placeholder.itemId')" style="width: 100%;"> | ||
| 46 | + <el-option v-for="item in editInspectionPointInfo.items" :key="item.itemId" :label="item.itemName" | ||
| 47 | + :value="item.itemId" /> | ||
| 84 | </el-select> | 48 | </el-select> |
| 85 | </el-form-item> | 49 | </el-form-item> |
| 86 | </el-col> | 50 | </el-col> |
| 87 | <el-col :span="12"> | 51 | <el-col :span="12"> |
| 88 | <el-form-item :label="$t('editInspectionPoint.nfcCode')"> | 52 | <el-form-item :label="$t('editInspectionPoint.nfcCode')"> |
| 89 | - <el-input | ||
| 90 | - v-model="editInspectionPointInfo.nfcCode" | ||
| 91 | - :placeholder="$t('editInspectionPoint.placeholder.nfcCode')" | ||
| 92 | - clearable | ||
| 93 | - /> | 53 | + <el-input v-model="editInspectionPointInfo.nfcCode" |
| 54 | + :placeholder="$t('editInspectionPoint.placeholder.nfcCode')" clearable /> | ||
| 94 | </el-form-item> | 55 | </el-form-item> |
| 95 | </el-col> | 56 | </el-col> |
| 96 | </el-row> | 57 | </el-row> |
| @@ -98,20 +59,14 @@ | @@ -98,20 +59,14 @@ | ||
| 98 | <el-row :gutter="20"> | 59 | <el-row :gutter="20"> |
| 99 | <el-col :span="12"> | 60 | <el-col :span="12"> |
| 100 | <el-form-item :label="$t('editInspectionPoint.lng')"> | 61 | <el-form-item :label="$t('editInspectionPoint.lng')"> |
| 101 | - <el-input | ||
| 102 | - v-model="editInspectionPointInfo.lng" | ||
| 103 | - :placeholder="$t('editInspectionPoint.placeholder.lng')" | ||
| 104 | - disabled | ||
| 105 | - /> | 62 | + <el-input v-model="editInspectionPointInfo.lng" :placeholder="$t('editInspectionPoint.placeholder.lng')" |
| 63 | + disabled /> | ||
| 106 | </el-form-item> | 64 | </el-form-item> |
| 107 | </el-col> | 65 | </el-col> |
| 108 | <el-col :span="12"> | 66 | <el-col :span="12"> |
| 109 | <el-form-item :label="$t('editInspectionPoint.lat')"> | 67 | <el-form-item :label="$t('editInspectionPoint.lat')"> |
| 110 | - <el-input | ||
| 111 | - v-model="editInspectionPointInfo.lat" | ||
| 112 | - :placeholder="$t('editInspectionPoint.placeholder.lat')" | ||
| 113 | - disabled | ||
| 114 | - /> | 68 | + <el-input v-model="editInspectionPointInfo.lat" :placeholder="$t('editInspectionPoint.placeholder.lat')" |
| 69 | + disabled /> | ||
| 115 | </el-form-item> | 70 | </el-form-item> |
| 116 | </el-col> | 71 | </el-col> |
| 117 | </el-row> | 72 | </el-row> |
| @@ -119,24 +74,16 @@ | @@ -119,24 +74,16 @@ | ||
| 119 | <el-row :gutter="20"> | 74 | <el-row :gutter="20"> |
| 120 | <el-col :span="24"> | 75 | <el-col :span="24"> |
| 121 | <el-form-item :label="$t('editInspectionPoint.remark')"> | 76 | <el-form-item :label="$t('editInspectionPoint.remark')"> |
| 122 | - <el-input | ||
| 123 | - v-model="editInspectionPointInfo.remark" | ||
| 124 | - type="textarea" | ||
| 125 | - :rows="3" | ||
| 126 | - :placeholder="$t('editInspectionPoint.placeholder.remark')" | ||
| 127 | - /> | 77 | + <el-input v-model="editInspectionPointInfo.remark" type="textarea" :rows="3" |
| 78 | + :placeholder="$t('editInspectionPoint.placeholder.remark')" /> | ||
| 128 | </el-form-item> | 79 | </el-form-item> |
| 129 | </el-col> | 80 | </el-col> |
| 130 | </el-row> | 81 | </el-row> |
| 131 | 82 | ||
| 132 | <el-row :gutter="20"> | 83 | <el-row :gutter="20"> |
| 133 | <el-col :span="24"> | 84 | <el-col :span="24"> |
| 134 | - <select-map-pos | ||
| 135 | - ref="mapSelector" | ||
| 136 | - :element-id="'editInspectionPointMap'" | ||
| 137 | - :init-data="editInspectionPointInfo" | ||
| 138 | - @position-change="handlePositionChange" | ||
| 139 | - /> | 85 | + <select-map-pos ref="selectMapPos" @position-change="handlePositionChange" /> |
| 86 | + | ||
| 140 | </el-col> | 87 | </el-col> |
| 141 | </el-row> | 88 | </el-row> |
| 142 | </el-form> | 89 | </el-form> |
| @@ -208,14 +155,14 @@ export default { | @@ -208,14 +155,14 @@ export default { | ||
| 208 | open(inspectionPoint) { | 155 | open(inspectionPoint) { |
| 209 | this.dialogVisible = true | 156 | this.dialogVisible = true |
| 210 | this.resetForm() | 157 | this.resetForm() |
| 211 | - | 158 | + |
| 212 | this.$nextTick(() => { | 159 | this.$nextTick(() => { |
| 213 | this.getDictData() | 160 | this.getDictData() |
| 214 | this._listEditInspectionItems() | 161 | this._listEditInspectionItems() |
| 215 | - | 162 | + |
| 216 | // 填充表单数据 | 163 | // 填充表单数据 |
| 217 | Object.assign(this.editInspectionPointInfo, inspectionPoint) | 164 | Object.assign(this.editInspectionPointInfo, inspectionPoint) |
| 218 | - | 165 | + |
| 219 | // 设置设备选择器（如果是设备类型） | 166 | // 设置设备选择器（如果是设备类型） |
| 220 | if (inspectionPoint.pointObjType === '1001') { | 167 | if (inspectionPoint.pointObjType === '1001') { |
| 221 | this.$nextTick(() => { | 168 | this.$nextTick(() => { |
| @@ -228,8 +175,11 @@ export default { | @@ -228,8 +175,11 @@ export default { | ||
| 228 | }) | 175 | }) |
| 229 | } | 176 | } |
| 230 | }) | 177 | }) |
| 178 | + setTimeout(() => { | ||
| 179 | + this.$refs.selectMapPos.initMap({}) | ||
| 180 | + }, 1000) | ||
| 231 | }, | 181 | }, |
| 232 | - | 182 | + |
| 233 | async getDictData() { | 183 | async getDictData() { |
| 234 | try { | 184 | try { |
| 235 | const data = await getDict('inspection_point', 'point_obj_type') | 185 | const data = await getDict('inspection_point', 'point_obj_type') |
| @@ -238,7 +188,7 @@ export default { | @@ -238,7 +188,7 @@ export default { | ||
| 238 | console.error('获取字典数据失败:', error) | 188 | console.error('获取字典数据失败:', error) |
| 239 | } | 189 | } |
| 240 | }, | 190 | }, |
| 241 | - | 191 | + |
| 242 | async _listEditInspectionItems() { | 192 | async _listEditInspectionItems() { |
| 243 | try { | 193 | try { |
| 244 | const params = { | 194 | const params = { |
| @@ -246,55 +196,55 @@ export default { | @@ -246,55 +196,55 @@ export default { | ||
| 246 | page: 1, | 196 | page: 1, |
| 247 | row: 100 | 197 | row: 100 |
| 248 | } | 198 | } |
| 249 | - | 199 | + |
| 250 | const response = await listInspectionItems(params) | 200 | const response = await listInspectionItems(params) |
| 251 | this.editInspectionPointInfo.items = response.data | 201 | this.editInspectionPointInfo.items = response.data |
| 252 | } catch (error) { | 202 | } catch (error) { |
| 253 | console.error('获取巡检项目失败:', error) | 203 | console.error('获取巡检项目失败:', error) |
| 254 | } | 204 | } |
| 255 | }, | 205 | }, |
| 256 | - | 206 | + |
| 257 | _pointObjTypeChange() { | 207 | _pointObjTypeChange() { |
| 258 | this.editInspectionPointInfo.pointObjId = '' | 208 | this.editInspectionPointInfo.pointObjId = '' |
| 259 | this.editInspectionPointInfo.pointObjName = '' | 209 | this.editInspectionPointInfo.pointObjName = '' |
| 260 | - | 210 | + |
| 261 | if (this.editInspectionPointInfo.pointObjType === '1001') { | 211 | if (this.editInspectionPointInfo.pointObjType === '1001') { |
| 262 | this.$refs.machineSelect.clearMachine() | 212 | this.$refs.machineSelect.clearMachine() |
| 263 | } | 213 | } |
| 264 | }, | 214 | }, |
| 265 | - | 215 | + |
| 266 | handleMachineSelect(data) { | 216 | handleMachineSelect(data) { |
| 267 | if (data && data.machineId && data.machineName) { | 217 | if (data && data.machineId && data.machineName) { |
| 268 | this.editInspectionPointInfo.pointObjId = data.machineId | 218 | this.editInspectionPointInfo.pointObjId = data.machineId |
| 269 | this.editInspectionPointInfo.pointObjName = data.machineName | 219 | this.editInspectionPointInfo.pointObjName = data.machineName |
| 270 | } | 220 | } |
| 271 | }, | 221 | }, |
| 272 | - | 222 | + |
| 273 | handlePositionChange(position) { | 223 | handlePositionChange(position) { |
| 274 | this.editInspectionPointInfo.lat = position.lat | 224 | this.editInspectionPointInfo.lat = position.lat |
| 275 | this.editInspectionPointInfo.lng = position.lng | 225 | this.editInspectionPointInfo.lng = position.lng |
| 276 | }, | 226 | }, |
| 277 | - | 227 | + |
| 278 | updateInspectionPoint() { | 228 | updateInspectionPoint() { |
| 279 | this.$refs.editForm.validate(async valid => { | 229 | this.$refs.editForm.validate(async valid => { |
| 280 | if (!valid) return | 230 | if (!valid) return |
| 281 | - | 231 | + |
| 282 | // 特殊验证 | 232 | // 特殊验证 |
| 283 | if (this.editInspectionPointInfo.pointObjType === '1001' && !this.editInspectionPointInfo.pointObjId) { | 233 | if (this.editInspectionPointInfo.pointObjType === '1001' && !this.editInspectionPointInfo.pointObjId) { |
| 284 | this.$message.error(this.$t('editInspectionPoint.rules.machineRequired')) | 234 | this.$message.error(this.$t('editInspectionPoint.rules.machineRequired')) |
| 285 | return | 235 | return |
| 286 | } | 236 | } |
| 287 | - | 237 | + |
| 288 | if (this.editInspectionPointInfo.pointObjType === '2002' && !this.editInspectionPointInfo.pointObjName) { | 238 | if (this.editInspectionPointInfo.pointObjType === '2002' && !this.editInspectionPointInfo.pointObjName) { |
| 289 | this.$message.error(this.$t('editInspectionPoint.rules.locationRequired')) | 239 | this.$message.error(this.$t('editInspectionPoint.rules.locationRequired')) |
| 290 | return | 240 | return |
| 291 | } | 241 | } |
| 292 | - | 242 | + |
| 293 | try { | 243 | try { |
| 294 | this.editInspectionPointInfo.communityId = this.communityId | 244 | this.editInspectionPointInfo.communityId = this.communityId |
| 295 | - | 245 | + |
| 296 | const response = await updateInspectionPoint(this.editInspectionPointInfo) | 246 | const response = await updateInspectionPoint(this.editInspectionPointInfo) |
| 297 | - | 247 | + |
| 298 | if (response.code === 0) { | 248 | if (response.code === 0) { |
| 299 | this.$message.success(this.$t('editInspectionPoint.updateSuccess')) | 249 | this.$message.success(this.$t('editInspectionPoint.updateSuccess')) |
| 300 | this.dialogVisible = false | 250 | this.dialogVisible = false |
| @@ -308,7 +258,7 @@ export default { | @@ -308,7 +258,7 @@ export default { | ||
| 308 | } | 258 | } |
| 309 | }) | 259 | }) |
| 310 | }, | 260 | }, |
| 311 | - | 261 | + |
| 312 | resetForm() { | 262 | resetForm() { |
| 313 | this.editInspectionPointInfo = { | 263 | this.editInspectionPointInfo = { |
| 314 | inspectionId: '', | 264 | inspectionId: '', |
| @@ -324,15 +274,15 @@ export default { | @@ -324,15 +274,15 @@ export default { | ||
| 324 | lat: '', | 274 | lat: '', |
| 325 | communityId: '' | 275 | communityId: '' |
| 326 | } | 276 | } |
| 327 | - | 277 | + |
| 328 | if (this.$refs.editForm) { | 278 | if (this.$refs.editForm) { |
| 329 | this.$refs.editForm.resetFields() | 279 | this.$refs.editForm.resetFields() |
| 330 | } | 280 | } |
| 331 | - | 281 | + |
| 332 | if (this.$refs.machineSelect) { | 282 | if (this.$refs.machineSelect) { |
| 333 | this.$refs.machineSelect.clearMachine() | 283 | this.$refs.machineSelect.clearMachine() |
| 334 | } | 284 | } |
| 335 | - | 285 | + |
| 336 | if (this.$refs.mapSelector) { | 286 | if (this.$refs.mapSelector) { |
| 337 | this.$refs.mapSelector.updatePosition(39.916527, 116.397128) | 287 | this.$refs.mapSelector.updatePosition(39.916527, 116.397128) |
| 338 | } | 288 | } |
src/components/inspection/selectMapPos.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="select-map-pos-container"> | 2 | <div class="select-map-pos-container"> |
| 3 | - <div :id="elementId" style="width: 100%; height: 100%;"></div> | 3 | + <div id="selectMap" style="width: 100%; height: 100%;"></div> |
| 4 | </div> | 4 | </div> |
| 5 | </template> | 5 | </template> |
| 6 | 6 | ||
| @@ -19,76 +19,89 @@ export default { | @@ -19,76 +19,89 @@ export default { | ||
| 19 | default: () => ({}) | 19 | default: () => ({}) |
| 20 | } | 20 | } |
| 21 | }, | 21 | }, |
| 22 | + | ||
| 22 | data() { | 23 | data() { |
| 23 | return { | 24 | return { |
| 24 | map: null, | 25 | map: null, |
| 25 | marker: null, | 26 | marker: null, |
| 26 | - communityId: '' | 27 | + communityId: '', |
| 28 | + mapData: { | ||
| 29 | + lat: 0, | ||
| 30 | + lng: 0 | ||
| 31 | + } | ||
| 27 | } | 32 | } |
| 28 | }, | 33 | }, |
| 29 | mounted() { | 34 | mounted() { |
| 30 | this.communityId = getCommunityId() | 35 | this.communityId = getCommunityId() |
| 31 | - this.$nextTick(() => { | ||
| 32 | - this.initMap(this.initData) | ||
| 33 | - }) | 36 | + |
| 34 | }, | 37 | }, |
| 35 | methods: { | 38 | methods: { |
| 36 | - initMap(data) { | 39 | + initMap(_data) { |
| 37 | // 清除现有地图 | 40 | // 清除现有地图 |
| 38 | - if (this.map) { | ||
| 39 | - this.map.destroy() | ||
| 40 | - this.map = null | ||
| 41 | - this.marker = null | ||
| 42 | - } | ||
| 43 | - | ||
| 44 | - // 设置默认中心点 | ||
| 45 | - let center = new TMap.LatLng(39.916527, 116.397128) | ||
| 46 | - let zoom = 13 | ||
| 47 | - | ||
| 48 | - // 如果有初始数据，使用初始位置 | ||
| 49 | - if (data.lat && data.lng) { | ||
| 50 | - center = new TMap.LatLng(data.lat, data.lng) | ||
| 51 | - zoom = 16 | 41 | + let _lng = 116.397128; |
| 42 | + let _lat = 39.916527; | ||
| 43 | + | ||
| 44 | + if (_data.lng) { | ||
| 45 | + _lng = _data.lng; | ||
| 52 | } | 46 | } |
| 53 | 47 | ||
| 54 | - let TMap = window.TMap | ||
| 55 | - | ||
| 56 | - // 创建地图实例 | ||
| 57 | - this.map = new TMap.Map(document.getElementById(this.elementId), { | ||
| 58 | - center: center, | ||
| 59 | - zoom: zoom, | ||
| 60 | - baseMap: { | ||
| 61 | - type: 'vector', | ||
| 62 | - features: ['base', 'building2d', 'point'] | 48 | + if (_data.lat) { |
| 49 | + _lat = _data.lat; | ||
| 50 | + } | ||
| 51 | + try { | ||
| 52 | + if (this.map) { | ||
| 53 | + this.map.destroy(); | ||
| 63 | } | 54 | } |
| 64 | - }) | ||
| 65 | - | ||
| 66 | - // 添加初始标记（如果有） | ||
| 67 | - if (data.lat && data.lng) { | ||
| 68 | - this.addMarker(new TMap.LatLng(data.lat, data.lng)) | 55 | + } catch (e) { |
| 56 | + console.log(e) | ||
| 69 | } | 57 | } |
| 70 | - | ||
| 71 | - // 添加点击事件 | ||
| 72 | - this.map.on('click', this.handleMapClick) | ||
| 73 | - }, | ||
| 74 | - | ||
| 75 | - handleMapClick(event) { | ||
| 76 | - // 更新标记位置 | ||
| 77 | - this.addMarker(event.latLng) | ||
| 78 | - | ||
| 79 | - // 通知父组件位置变化 | ||
| 80 | - this.$emit('position-change', { | ||
| 81 | - lat: event.latLng.lat, | ||
| 82 | - lng: event.latLng.lng | ||
| 83 | - }) | 58 | + |
| 59 | + | ||
| 60 | + let addMap = new window.TMap.Map('selectMap', { | ||
| 61 | + center: new window.TMap.LatLng(_lat, _lng), | ||
| 62 | + zoom: 13 | ||
| 63 | + }); | ||
| 64 | + // $that.addMapInfo.addMap = addMap; | ||
| 65 | + let marker; | ||
| 66 | + //添加监听事件 获取鼠标点击事件 | ||
| 67 | + let _this = this | ||
| 68 | + addMap.on('click', function (event) { | ||
| 69 | + console.log(event) | ||
| 70 | + if (!marker) { | ||
| 71 | + marker = new window.TMap.MultiMarker({ | ||
| 72 | + styleId: "marker", | ||
| 73 | + position: event.latLng, | ||
| 74 | + map: addMap, | ||
| 75 | + id: "1", | ||
| 76 | + }); | ||
| 77 | + } | ||
| 78 | + console.log(event) | ||
| 79 | + //marker.setPosition(event.latLng); | ||
| 80 | + _this.$emit('position-change', { | ||
| 81 | + lat: event.latLng.lat, | ||
| 82 | + lng: event.latLng.lng | ||
| 83 | + }) | ||
| 84 | + | ||
| 85 | + marker.updateGeometries([ | ||
| 86 | + { | ||
| 87 | + "styleId": "marker", | ||
| 88 | + "id": "1", | ||
| 89 | + "position": event.latLng, | ||
| 90 | + } | ||
| 91 | + ]) | ||
| 92 | + }); | ||
| 93 | + //为地图注册click事件获取鼠标点击出的经纬度坐标 | ||
| 94 | + | ||
| 95 | + this.map = addMap; | ||
| 84 | }, | 96 | }, |
| 85 | - | 97 | + |
| 98 | + | ||
| 86 | addMarker(position) { | 99 | addMarker(position) { |
| 87 | // 清除现有标记 | 100 | // 清除现有标记 |
| 88 | if (this.marker) { | 101 | if (this.marker) { |
| 89 | this.marker.setMap(null) | 102 | this.marker.setMap(null) |
| 90 | } | 103 | } |
| 91 | - | 104 | + |
| 92 | // 创建新标记 | 105 | // 创建新标记 |
| 93 | let TMap = window.TMap | 106 | let TMap = window.TMap |
| 94 | 107 | ||
| @@ -108,34 +121,19 @@ export default { | @@ -108,34 +121,19 @@ export default { | ||
| 108 | position: position | 121 | position: position |
| 109 | }] | 122 | }] |
| 110 | }) | 123 | }) |
| 111 | - | 124 | + |
| 112 | // 移动地图中心到标记位置 | 125 | // 移动地图中心到标记位置 |
| 113 | this.map.setCenter(position) | 126 | this.map.setCenter(position) |
| 114 | this.map.setZoom(16) | 127 | this.map.setZoom(16) |
| 115 | }, | 128 | }, |
| 116 | - | 129 | + |
| 117 | updatePosition(lat, lng) { | 130 | updatePosition(lat, lng) { |
| 118 | if (!this.map) return | 131 | if (!this.map) return |
| 119 | - let TMap = window.TMap | ||
| 120 | 132 | ||
| 121 | - const position = new TMap.LatLng(lat, lng) | 133 | + const position = new window.TMap.LatLng(lat, lng) |
| 122 | this.addMarker(position) | 134 | this.addMarker(position) |
| 123 | } | 135 | } |
| 124 | }, | 136 | }, |
| 125 | - watch: { | ||
| 126 | - initData: { | ||
| 127 | - deep: true, | ||
| 128 | - handler(newVal) { | ||
| 129 | - if (newVal.element && newVal.element !== this.elementId) { | ||
| 130 | - this.elementId = newVal.element | ||
| 131 | - } | ||
| 132 | - | ||
| 133 | - if (this.map) { | ||
| 134 | - this.initMap(newVal) | ||
| 135 | - } | ||
| 136 | - } | ||
| 137 | - } | ||
| 138 | - }, | ||
| 139 | beforeDestroy() { | 137 | beforeDestroy() { |
| 140 | // 组件销毁时清除地图实例 | 138 | // 组件销毁时清除地图实例 |
| 141 | if (this.map) { | 139 | if (this.map) { |
src/views/dev/mappingList.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="mapping-container"> | 2 | + <div class="mapping-container "> |
| 3 | <div class="menu-group-wrapper"> | 3 | <div class="menu-group-wrapper"> |
| 4 | <div class="group-content"> | 4 | <div class="group-content"> |
| 5 | <el-menu :default-active="searchForm.domain" class="group-menu" @select="handleDomain"> | 5 | <el-menu :default-active="searchForm.domain" class="group-menu" @select="handleDomain"> |
| @@ -179,7 +179,7 @@ export default { | @@ -179,7 +179,7 @@ export default { | ||
| 179 | 179 | ||
| 180 | <style lang="scss" scoped> | 180 | <style lang="scss" scoped> |
| 181 | .mapping-container { | 181 | .mapping-container { |
| 182 | - padding: 0; | 182 | + padding: 15px; |
| 183 | margin: 0; | 183 | margin: 0; |
| 184 | display: flex; | 184 | display: flex; |
| 185 | background-color: #f0f2f5; | 185 | background-color: #f0f2f5; |
src/views/inspection/inspectionPointList.vue
| @@ -8,10 +8,10 @@ | @@ -8,10 +8,10 @@ | ||
| 8 | <el-input :placeholder="$t('inspectionPoint.placeholder.inspectionName')" | 8 | <el-input :placeholder="$t('inspectionPoint.placeholder.inspectionName')" |
| 9 | v-model="inspectionPointInfo.conditions.inspectionName" clearable /> | 9 | v-model="inspectionPointInfo.conditions.inspectionName" clearable /> |
| 10 | </div> | 10 | </div> |
| 11 | - <el-button type="primary" class="margin-left-xs" size="small" @click="_queryInspectionPointMethod()"> | 11 | + <el-button type="text" class="margin-left-xs" size="small" @click="_queryInspectionPointMethod()"> |
| 12 | {{ $t('common.search') }} | 12 | {{ $t('common.search') }} |
| 13 | </el-button> | 13 | </el-button> |
| 14 | - <el-button type="primary" class="margin-left-xs" size="small" @click="_openAddInspectionPointModal()"> | 14 | + <el-button type="text" class="margin-left-xs" size="small" @click="_openAddInspectionPointModal()"> |
| 15 | {{ $t('common.add') }} | 15 | {{ $t('common.add') }} |
| 16 | </el-button> | 16 | </el-button> |
| 17 | </div> | 17 | </div> |
| @@ -118,10 +118,10 @@ | @@ -118,10 +118,10 @@ | ||
| 118 | </el-col> | 118 | </el-col> |
| 119 | </el-row> | 119 | </el-row> |
| 120 | <!-- 模态框组件 --> | 120 | <!-- 模态框组件 --> |
| 121 | - <add-inspection-point ref="addInspectionPoint" /> | ||
| 122 | - <edit-inspection-point ref="editInspectionPoint" /> | ||
| 123 | - <delete-inspection-point ref="deleteInspectionPoint" /> | ||
| 124 | - <inspection-point-qr-code ref="inspectionPointQrCode" /> | 121 | + <add-inspection-point ref="addInspectionPoint" @success="_listInspectionPoints"/> |
| 122 | + <edit-inspection-point ref="editInspectionPoint" @success="_listInspectionPoints"/> | ||
| 123 | + <delete-inspection-point ref="deleteInspectionPoint" @success="_listInspectionPoints"/> | ||
| 124 | + <inspection-point-qr-code ref="inspectionPointQrCode" @success="_listInspectionPoints"/> | ||
| 125 | </div> | 125 | </div> |
| 126 | </template> | 126 | </template> |
| 127 | 127 | ||
| @@ -257,9 +257,7 @@ export default { | @@ -257,9 +257,7 @@ export default { | ||
| 257 | } | 257 | } |
| 258 | 258 | ||
| 259 | .vc-org { | 259 | .vc-org { |
| 260 | - border: 1px solid #ebeef5; | ||
| 261 | - border-radius: 4px; | ||
| 262 | - padding: 10px; | 260 | + padding: 5px; |
| 263 | max-height: 600px; | 261 | max-height: 600px; |
| 264 | overflow-y: auto; | 262 | overflow-y: auto; |
| 265 | } | 263 | } |
| @@ -285,8 +283,8 @@ export default { | @@ -285,8 +283,8 @@ export default { | ||
| 285 | } | 283 | } |
| 286 | 284 | ||
| 287 | .point-list li.active { | 285 | .point-list li.active { |
| 288 | - background-color: #ecf5ff; | ||
| 289 | - color: #409eff; | 286 | + background-color: #409eff; |
| 287 | + color: #ecf5ff; | ||
| 290 | font-weight: bold; | 288 | font-weight: bold; |
| 291 | } | 289 | } |
| 292 | 290 | ||
| @@ -301,6 +299,5 @@ export default { | @@ -301,6 +299,5 @@ export default { | ||
| 301 | .col-form-label { | 299 | .col-form-label { |
| 302 | display: inline-block; | 300 | display: inline-block; |
| 303 | margin-right: 10px; | 301 | margin-right: 10px; |
| 304 | - font-weight: bold; | ||
| 305 | } | 302 | } |
| 306 | </style> | 303 | </style> |
| 307 | \ No newline at end of file | 304 | \ No newline at end of file |