kavehhn/mbmanager-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Utm Convert

Browse Source 
FIX: Features data not saving and not loading
This commit is contained in:
kavehhn
2025-05-10 20:48:03 +03:30
parent abddf06a28
commit 8bae1d064a
6 changed files with 272 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+17
View File
@@ -29,6 +29,8 @@
"photoswipe": "^5.4.4",
"primeicons": "^7.0.0",
"primevue": "^4.2.4",
"usng.js": "^0.4.5",
"utm-latlng": "^1.0.8",
"v-mapbox": "^5.1.0",
"vue": "^3.4.34",
"vue-cookies": "^1.8.3",
@@ -4794,12 +4796,27 @@
"punycode": "^2.1.0"
}
},
"node_modules/usng.js": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/usng.js/-/usng.js-0.4.5.tgz",
"integrity": "sha512-JTJcFFDy/JqA5iiU8DqMOV5gJiL3ZdXH0hCKYaRMDbbredhFna5Ok4C1YDFU07mTGAgm+5FzHaaOzQnO/3BzWQ==",
"license": "MIT",
"bin": {
"usng-cli": "bin/cli.js"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true
},
"node_modules/utm-latlng": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/utm-latlng/-/utm-latlng-1.0.8.tgz",
"integrity": "sha512-jQ5l1BNTzNgas7jXOIh0jU0m5PU5LtmjYvRiLwR4iymYYAhEhQ6N0MGCnLjv5iO958b9tLMMSmzdbIIhLtXqCg==",
"license": "MIT"
},
"node_modules/v-mapbox": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/v-mapbox/-/v-mapbox-5.1.0.tgz",
package.json
+2
View File
@@ -29,6 +29,8 @@
"photoswipe": "^5.4.4",
"primeicons": "^7.0.0",
"primevue": "^4.2.4",
"usng.js": "^0.4.5",
"utm-latlng": "^1.0.8",
"v-mapbox": "^5.1.0",
"vue": "^3.4.34",
"vue-cookies": "^1.8.3",
src/utm.js
+78
View File
@@ -0,0 +1,78 @@
// Converts UTM coordinates to latitude and longitude
const a = 6378137.0; // WGS84 Major axis
const eccSquared = 0.00669438; // WGS84 eccentricity squared
const k0 = 0.9996; // Scale factor
function UTMtoLatLon(UTMEasting, UTMNorthing, UTMZoneNumber, Hemisphere) {
const e1 = (1 - Math.sqrt(1 - eccSquared)) / (1 + Math.sqrt(1 - eccSquared));
let x = UTMEasting - 500000.0;
let y = UTMNorthing;
if (Hemisphere === 'S') {
y -= 10000000.0;
}
const LongOrigin = (UTMZoneNumber - 1) * 6 - 180 + 3;
const eccPrimeSquared = eccSquared / (1 - eccSquared);
const M = y / k0;
const mu = M / (a * (1 - eccSquared / 4 - (3 * eccSquared ** 2) / 64 - (5 * eccSquared ** 3) / 256));
let phi1Rad = mu + ((3 * e1) / 2 - (27 * e1 ** 3) / 32) * Math.sin(2 * mu) + ((21 * e1 ** 2) / 16 - (55 * e1 ** 4) / 32) * Math.sin(4 * mu) + ((151 * e1 ** 3) / 96) * Math.sin(6 * mu);
const N1 = a / Math.sqrt(1 - eccSquared * Math.sin(phi1Rad) ** 2);
const T1 = Math.tan(phi1Rad) ** 2;
const C1 = eccPrimeSquared * Math.cos(phi1Rad) ** 2;
const R1 = (a * (1 - eccSquared)) / Math.pow(1 - eccSquared * Math.sin(phi1Rad) ** 2, 1.5);
const D = x / (N1 * k0);
let lat = phi1Rad - ((N1 * Math.tan(phi1Rad)) / R1) * (D ** 2 / 2 - ((5 + 3 * T1 + 10 * C1 - 4 * C1 ** 2 - 9 * eccPrimeSquared) * D ** 4) / 24 + ((61 + 90 * T1 + 298 * C1 + 45 * T1 ** 2 - 252 * eccPrimeSquared - 3 * C1 ** 2) * D ** 6) / 720);
lat *= 180 / Math.PI;
let lon = (D - ((1 + 2 * T1 + C1) * D ** 3) / 6 + ((5 - 2 * C1 + 28 * T1 - 3 * C1 ** 2 + 8 * eccPrimeSquared + 24 * T1 ** 2) * D ** 5) / 120) / Math.cos(phi1Rad);
lon = LongOrigin + (lon * 180) / Math.PI;
return { latitude: lat, longitude: lon };
}
// Converts latitude and longitude to UTM coordinates
function LatLontoUTM(lat, lon) {
const LatRad = (lat * Math.PI) / 180.0;
const LongRad = (lon * Math.PI) / 180.0;
const ZoneNumber = Math.floor((lon + 180) / 6) + 1;
const LongOrigin = (ZoneNumber - 1) * 6 - 180 + 3;
const LongOriginRad = (LongOrigin * Math.PI) / 180.0;
const eccPrimeSquared = eccSquared / (1 - eccSquared);
const N = a / Math.sqrt(1 - eccSquared * Math.sin(LatRad) ** 2);
const T = Math.tan(LatRad) ** 2;
const C = eccPrimeSquared * Math.cos(LatRad) ** 2;
const A = Math.cos(LatRad) * (LongRad - LongOriginRad);
const M =
a *
((1 - eccSquared / 4 - (3 * eccSquared ** 2) / 64 - (5 * eccSquared ** 3) / 256) * LatRad -
((3 * eccSquared) / 8 + (3 * eccSquared ** 2) / 32 + (45 * eccSquared ** 3) / 1024) * Math.sin(2 * LatRad) +
((15 * eccSquared ** 2) / 256 + (45 * eccSquared ** 3) / 1024) * Math.sin(4 * LatRad) -
((35 * eccSquared ** 3) / 3072) * Math.sin(6 * LatRad));
let UTMEasting = k0 * N * (A + ((1 - T + C) * A ** 3) / 6 + ((5 - 18 * T + T ** 2 + 72 * C - 58 * eccPrimeSquared) * A ** 5) / 120) + 500000.0;
let UTMNorthing = k0 * (M + N * Math.tan(LatRad) * (A ** 2 / 2 + ((5 - T + 9 * C + 4 * C ** 2) * A ** 4) / 24 + ((61 - 58 * T + T ** 2 + 600 * C - 330 * eccPrimeSquared) * A ** 6) / 720));
const Hemisphere = lat < 0 ? 'S' : 'N';
if (lat < 0) {
UTMNorthing += 10000000.0;
}
return {
easting: UTMEasting,
northing: UTMNorthing,
zoneNumber: ZoneNumber,
hemisphere: Hemisphere
};
}
// Exporting functions as a module
export { UTMtoLatLon, LatLontoUTM };
src/views/pages/Belonging/CreateBelonging.vue
+92 -19
View File
@@ -47,7 +47,6 @@ const route = useRoute();
const router = useRouter();
const mapKey = 'web.79abbab4970e401781f434da3e41cfa6';
const serviceKey = 'service.11d860f52c434bd29e5f84d0a0a41108';
const mapRef = ref();
const transactions = ref([]);
const stockData = ref({});
@@ -118,6 +117,7 @@ onBeforeMount(async () => {
if (route.name === 'edit-belonging') {
editMode.value = true;
belonging.value = await BelongingService.getBelonging(route.params.belongingId);
featuresValues.value = extractFeaturesValues(belonging.value.features);
transactions.value = await TransactionService.getTransactionsByBelongingId(route.params.belongingId);
stockData.value = await TransactionService.getStockByBelongingId(route.params.belongingId);
mainImageUrlsWithData.value = fillImagesArray(belonging.value?.mainImageUrls || []);
@@ -126,6 +126,67 @@ onBeforeMount(async () => {
});
const showTransactionDialog = ref(false);
import { UTMtoLatLon, LatLontoUTM } from '@/utm';
const easting = ref();
const northing = ref();
const zone = ref();
const lat = ref();
const long = ref();
const convertUTMtoLatLng = () => {
if (easting.value && northing.value && zone.value) {
try {
const result = UTMtoLatLon(
Number(easting.value),
Number(northing.value),
Number(zone.value),
'N' // Change to 'S' if in Southern Hemisphere
);
lat.value = result.latitude;
long.value = result.longitude;
console.log(lat.value, long.value);
searchLocation(lat.value, long.value);
} catch (error) {
console.error('Error converting UTM to Lat/Lng:', error);
}
}
};
// Watch nationalGeoCode to split and convert to Lat/Lng
watch(
() => belonging.value.nationalGeoCode,
(newCode) => {
if (newCode && newCode.length === 15) {
easting.value = newCode.substring(0, 6); // First 6 digits for easting
northing.value = newCode.substring(6, 13); // Next 6 digits for northing
zone.value = newCode.substring(13, 15); // Last 2 digits for zone
// Convert to Lat/Lng after splitting
convertUTMtoLatLng();
}
}
);
const mapRef = ref();
const searchLocation = (lat, lon) => {
if (mapRef.value) {
mapRef.value.searchByCoordinates(lat, lon);
}
};
watch(
() => belonging.value.category,
(newCategory) => {
if (editMode.value && newCategory) {
selectedCategory.value = categories.value.find((x) => x._id === newCategory);
if (selectedCategory.value) {
features.value = selectedCategory.value.features;
}
}
}
);
const fillImagesArray = (imageUrls) => {
const images = [];
for (let url of imageUrls) {
@@ -161,12 +222,36 @@ const handleSelectCategory = ($event) => {
}
};
const extractFeatures = (featuresValues) => {
const features = [];
for (const [key, value] of Object.entries(featuresValues)) {
features.push({
definition: key,
value: value
});
}
return features;
};
const extractFeaturesValues = (features) => {
const featuresValues = {};
for (let feature of features) {
featuresValues[feature.definition] = feature.value;
}
return featuresValues;
};
const saveBelonging = async () => {
let status = 'failed';
console.log(belonging);
if (belonging?.value._id?.trim()) {
belonging.value.mainImageUrls = mainImageUrlsWithData.value.map((x) => x.url);
belonging.value.documentUrls = documentUrlsWithData.value.map((x) => x.url);
belonging.value.features = extractFeatures(featuresValues.value);
status = await BelongingService.updateBelonging(belonging.value._id, belonging.value);
} else {
status = await BelongingService.createBelonging(belonging.value);
@@ -181,23 +266,6 @@ const saveBelonging = async () => {
await router.push('/belonging/list-belongings');
};
watch(
() => mapRef.value?.state.map,
(nv, ol) => {
if (ol) return;
setTimeout(() => {
mapRef.value?.state.map?.setMapType('standard-night');
if (mapRef.value?.state.mapType) mapRef.value.state.mapType = 'standard-night';
}, 2000);
setTimeout(() => {
mapRef.value?.search({
term: 'ولی عصر',
coords: [51.36281969540723, 35.69672648316882]
});
}, 3000);
}
);
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
type: { value: null, matchMode: FilterMatchMode.EQUALS },
@@ -336,7 +404,7 @@ const formatDate = (dateString) => {
</div>
<div class="my-10">
<label class="text-lg"> موقعیت دارایی </label>
<MapComponent v-model="belonging.location.coordinates" />
<MapComponent ref="mapRef" v-model="belonging.location.coordinates" />
<!-- <MapIrComponent />-->
</div>
@@ -447,6 +515,11 @@ const formatDate = (dateString) => {
<label class="text-lg"> برچسب ها </label>
<KiwiChips v-model="belonging.tags" class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
</div>
<div class="my-8">
<label class="text-lg"> شناسه ملی جغرافیایی </label>
<InputText v-model="belonging.nationalGeoCode" class="w-full" placeholder="شناسه 14 رقمی سند" />
</div>
</div>
</div>
src/views/pages/Belonging/TransactionDialog.vue
+62 -6
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, reactive } from 'vue';
import { ref, reactive, watch, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { TransactionService } from '@/service/TransactionService';
@@ -11,6 +11,14 @@ const props = defineProps({
belongingId: {
type: String,
required: true
},
editMode: {
type: Boolean,
default: false
},
transactionData: {
type: Object,
default: null
}
});
@@ -23,7 +31,8 @@ const transaction = reactive({
status: 'pending',
value: null,
description: '',
date: new Date().toISOString()
date: new Date().toISOString(),
_id: null
});
const typeOptions = [
@@ -43,6 +52,43 @@ const errors = reactive({
value: ''
});
// Watch for changes in editMode and transactionData
watch(
() => props.transactionData,
(newValue) => {
if (newValue && props.editMode) {
// Load transaction data for editing
Object.assign(transaction, {
type: newValue.type || 'deposit',
status: newValue.status || 'pending',
value: newValue.value || null,
description: newValue.description || '',
date: newValue.date || new Date().toISOString(),
_id: newValue._id || null
});
}
},
{ immediate: true }
);
// Reset form when dialog opens
watch(
() => props.visible,
(isVisible) => {
if (isVisible && !props.editMode) {
// Reset form for create mode
Object.assign(transaction, {
type: 'deposit',
status: 'pending',
value: null,
description: '',
date: new Date().toISOString(),
_id: null
});
}
}
);
const validateForm = () => {
let isValid = true;
@@ -78,9 +124,19 @@ const saveTransaction = async () => {
try {
transaction.belongingId = props.belongingId;
const result = await TransactionService.createTransaction(transaction);
let result;
if (props.editMode && transaction._id) {
// Update existing transaction
result = await TransactionService.updateTransaction(transaction._id, transaction);
} else {
// Create new transaction
result = await TransactionService.createTransaction(transaction);
}
if (result === 'success') {
toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
const message = props.editMode ? 'تراکنش با موفقیت بروزرسانی شد' : 'تراکنش با موفقیت ثبت شد';
toast.add({ severity: 'success', summary: 'موفق', detail: message, life: 3000 });
emit('saved');
closeDialog();
} else {
@@ -98,7 +154,7 @@ const closeDialog = () => {
</script>
<template>
<Dialog v-model:visible="props.visible" :modal="true" :closable="true" :style="{ width: '450px' }" header="افزایش یا کاهش موجودی" @update:visible="closeDialog">
<Dialog v-model:visible="props.visible" :modal="true" :closable="true" :style="{ width: '450px' }" :header="props.editMode ? 'ویرایش تراکنش' : 'افزایش یا کاهش موجودی'" @update:visible="closeDialog">
<div class="p-fluid">
<div class="field mb-4">
<label class="font-bold mb-2 block">نوع تراکنش</label>
@@ -127,7 +183,7 @@ const closeDialog = () => {
<template #footer>
<div class="flex justify-end gap-2">
<Button label="انصراف" icon="pi pi-times" class="p-button-text" @click="closeDialog" />
<Button label="ذخیره" icon="pi pi-check" @click="saveTransaction" />
<Button :label="props.editMode ? 'بروزرسانی' : 'ذخیره'" icon="pi pi-check" @click="saveTransaction" />
</div>
</template>
</Dialog>
src/views/uikit/MapComponent.vue
+21 -2
View File
@@ -40,21 +40,40 @@ const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
lon: {
type: Number
},
lat: {
type: Number
}
});
const emit = defineEmits(['update:modelValue']);
// Map configuration
const zoom = ref(13);
const zoom = ref(12);
const center = ref([31.3183, 48.6706]);
const attribution = ref('© OpenStreetMap contributors');
const attribution = ref('Nilgoon Team');
const marker = ref([...props.modelValue]);
const map = ref(null);
// Search functionality
const searchQuery = ref('');
const searchByCoordinates = (lat, lon) => {
if (lat && lon) {
center.value = [parseFloat(lat), parseFloat(lon)];
zoom.value = 10;
marker.value = [parseFloat(lat), parseFloat(lon)];
emit('update:modelValue', marker.value);
}
};
defineExpose({
searchByCoordinates
});
const handleSearch = async () => {
if (!searchQuery.value) return;