Initial commit: Shop Database Flask Application
Flask backend with Vue 3 frontend for shop floor machine management. Includes database schema export for MySQL shopdb_flask database. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
589
frontend/src/components/ShopFloorMap.vue
Normal file
589
frontend/src/components/ShopFloorMap.vue
Normal file
@@ -0,0 +1,589 @@
|
||||
<template>
|
||||
<div class="shopfloor-map">
|
||||
<div class="map-controls" v-if="!pickerMode">
|
||||
<div class="filters">
|
||||
<select v-model="filters.machinetype" @change="applyFilters">
|
||||
<option value="">All Types</option>
|
||||
<option v-for="t in machinetypes" :key="t.machinetypeid" :value="t.machinetypeid">
|
||||
{{ t.machinetype }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<select v-model="filters.businessunit" @change="applyFilters">
|
||||
<option value="">All Business Units</option>
|
||||
<option v-for="bu in businessunits" :key="bu.businessunitid" :value="bu.businessunitid">
|
||||
{{ bu.businessunit }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<select v-model="filters.status" @change="applyFilters">
|
||||
<option value="">All Statuses</option>
|
||||
<option v-for="s in statuses" :key="s.statusid" :value="s.statusid">
|
||||
{{ s.status }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
v-model="filters.search"
|
||||
placeholder="Search..."
|
||||
@input="debounceSearch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<span
|
||||
v-for="t in visibleTypes"
|
||||
:key="t.machinetypeid"
|
||||
class="legend-item"
|
||||
>
|
||||
<span class="legend-dot" :style="{ background: getTypeColor(t.machinetype) }"></span>
|
||||
{{ t.machinetype }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="picker-controls" v-if="pickerMode">
|
||||
<span class="picker-message">Click on the map to set location</span>
|
||||
<span v-if="pickedPosition" class="picker-coords">
|
||||
Position: {{ pickedPosition.left }}, {{ pickedPosition.top }}
|
||||
</span>
|
||||
<button class="btn btn-secondary btn-sm" @click="clearPosition">Clear</button>
|
||||
</div>
|
||||
|
||||
<div ref="mapContainer" class="map-container" :class="{ 'picker-active': pickerMode }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
|
||||
import L from 'leaflet'
|
||||
import 'leaflet/dist/leaflet.css'
|
||||
|
||||
const props = defineProps({
|
||||
machines: { type: Array, default: () => [] },
|
||||
machinetypes: { type: Array, default: () => [] },
|
||||
businessunits: { type: Array, default: () => [] },
|
||||
statuses: { type: Array, default: () => [] },
|
||||
theme: { type: String, default: 'dark' },
|
||||
pickerMode: { type: Boolean, default: false },
|
||||
initialPosition: { type: Object, default: null } // { left, top }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['markerClick', 'positionPicked'])
|
||||
|
||||
const mapContainer = ref(null)
|
||||
let map = null
|
||||
let imageOverlay = null
|
||||
const markers = ref([])
|
||||
const pickedPosition = ref(null)
|
||||
let pickerMarker = null
|
||||
|
||||
const filters = ref({
|
||||
machinetype: '',
|
||||
businessunit: '',
|
||||
status: '',
|
||||
search: ''
|
||||
})
|
||||
|
||||
// Map dimensions (matching old system)
|
||||
const MAP_WIDTH = 3300
|
||||
const MAP_HEIGHT = 2550
|
||||
const bounds = [[0, 0], [MAP_HEIGHT, MAP_WIDTH]]
|
||||
|
||||
// Type colors - distinct colors for each machine type
|
||||
const typeColors = {
|
||||
// Machining
|
||||
'Mill': '#F44336', // Red
|
||||
'Lathe': '#E91E63', // Pink
|
||||
'Grinder': '#2196F3', // Blue
|
||||
'Broach': '#00BCD4', // Cyan
|
||||
'Hobbing': '#009688', // Teal
|
||||
'Turn': '#FF5722', // Deep Orange (Mill Turn, Vertical Turn)
|
||||
|
||||
// Inspection & Measurement
|
||||
'CMM': '#9C27B0', // Purple
|
||||
'Measuring': '#7B1FA2', // Dark Purple
|
||||
'Eddy': '#673AB7', // Deep Purple
|
||||
'Inspection': '#8BC34A', // Light Green
|
||||
|
||||
// Heat Treatment & Processing
|
||||
'Furnace': '#FF9800', // Orange
|
||||
'Wash': '#4CAF50', // Green
|
||||
'Wax': '#FFEB3B', // Yellow
|
||||
|
||||
// Automation
|
||||
'Robot': '#3F51B5', // Indigo
|
||||
'Deburr': '#5C6BC0', // Indigo Light
|
||||
|
||||
// Welding
|
||||
'Welder': '#795548', // Brown
|
||||
|
||||
// IT/Network
|
||||
'PC': '#607D8B', // Blue Grey
|
||||
'Printer': '#78909C', // Blue Grey Light
|
||||
'Switch': '#546E7A', // Blue Grey Dark
|
||||
'Access Point': '#455A64', // Blue Grey Darker
|
||||
'IDF': '#37474F', // Blue Grey Very Dark
|
||||
|
||||
// Other
|
||||
'Saw': '#8D6E63', // Brown Light
|
||||
'Press': '#A1887F', // Brown Lighter
|
||||
'EDM': '#00ACC1', // Cyan Dark
|
||||
'Drill': '#26A69A', // Teal Light
|
||||
'CNC': '#66BB6A', // Green Light
|
||||
'Assembly': '#CDDC39', // Lime
|
||||
'Other': '#BDBDBD' // Grey
|
||||
}
|
||||
|
||||
function getTypeColor(typeName) {
|
||||
if (!typeName) return '#BDBDBD'
|
||||
for (const [key, color] of Object.entries(typeColors)) {
|
||||
if (typeName.toLowerCase().includes(key.toLowerCase())) {
|
||||
return color
|
||||
}
|
||||
}
|
||||
return '#BDBDBD' // Grey for unknown types
|
||||
}
|
||||
|
||||
// Get unique visible types from machines
|
||||
const visibleTypes = computed(() => {
|
||||
const typeIds = new Set(props.machines.map(m => m.machinetypeid))
|
||||
return props.machinetypes.filter(t => typeIds.has(t.machinetypeid))
|
||||
})
|
||||
|
||||
function initMap() {
|
||||
if (!mapContainer.value) return
|
||||
|
||||
map = L.map(mapContainer.value, {
|
||||
crs: L.CRS.Simple,
|
||||
minZoom: -4,
|
||||
maxZoom: 2
|
||||
})
|
||||
|
||||
const blueprintUrl = props.theme === 'light'
|
||||
? '/static/images/sitemap2025-light.png'
|
||||
: '/static/images/sitemap2025-dark.png'
|
||||
|
||||
imageOverlay = L.imageOverlay(blueprintUrl, bounds)
|
||||
imageOverlay.addTo(map)
|
||||
|
||||
// Set initial view
|
||||
const initialZoom = -1
|
||||
map.setView([MAP_HEIGHT / 2, MAP_WIDTH / 2], initialZoom)
|
||||
map.setMaxBounds(bounds)
|
||||
|
||||
// Picker mode: click to set position
|
||||
if (props.pickerMode) {
|
||||
map.on('click', handleMapClick)
|
||||
|
||||
// Show initial position if provided
|
||||
if (props.initialPosition) {
|
||||
setPickerPosition(props.initialPosition.left, props.initialPosition.top)
|
||||
}
|
||||
} else {
|
||||
renderMarkers()
|
||||
}
|
||||
}
|
||||
|
||||
function handleMapClick(e) {
|
||||
if (!props.pickerMode) return
|
||||
|
||||
const leafletY = e.latlng.lat
|
||||
const leafletX = e.latlng.lng
|
||||
|
||||
// Convert back to database coordinates
|
||||
const dbLeft = Math.round(leafletX)
|
||||
const dbTop = Math.round(MAP_HEIGHT - leafletY)
|
||||
|
||||
setPickerPosition(dbLeft, dbTop)
|
||||
}
|
||||
|
||||
function setPickerPosition(left, top) {
|
||||
// Remove old picker marker
|
||||
if (pickerMarker) {
|
||||
pickerMarker.remove()
|
||||
}
|
||||
|
||||
pickedPosition.value = { left, top }
|
||||
|
||||
// Convert to Leaflet coordinates
|
||||
const leafletY = MAP_HEIGHT - top
|
||||
const leafletX = left
|
||||
|
||||
const icon = L.divIcon({
|
||||
html: `<div class="picker-marker-dot"></div>`,
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8],
|
||||
className: 'picker-marker'
|
||||
})
|
||||
|
||||
pickerMarker = L.marker([leafletY, leafletX], { icon, draggable: true })
|
||||
pickerMarker.addTo(map)
|
||||
|
||||
// Allow dragging to fine-tune position
|
||||
pickerMarker.on('dragend', () => {
|
||||
const pos = pickerMarker.getLatLng()
|
||||
const newLeft = Math.round(pos.lng)
|
||||
const newTop = Math.round(MAP_HEIGHT - pos.lat)
|
||||
pickedPosition.value = { left: newLeft, top: newTop }
|
||||
emit('positionPicked', pickedPosition.value)
|
||||
})
|
||||
|
||||
emit('positionPicked', pickedPosition.value)
|
||||
}
|
||||
|
||||
function clearPosition() {
|
||||
if (pickerMarker) {
|
||||
pickerMarker.remove()
|
||||
pickerMarker = null
|
||||
}
|
||||
pickedPosition.value = null
|
||||
emit('positionPicked', null)
|
||||
}
|
||||
|
||||
// Get the detail page route based on machine category
|
||||
// Extensible for future addon types (network, cameras, etc.)
|
||||
function getDetailRoute(machine) {
|
||||
const category = machine.category?.toLowerCase() || ''
|
||||
const routeMap = {
|
||||
'equipment': '/machines',
|
||||
'pc': '/pcs',
|
||||
'printer': '/printers',
|
||||
// Future addon routes can be added here:
|
||||
// 'network': '/network',
|
||||
// 'camera': '/cameras',
|
||||
}
|
||||
const basePath = routeMap[category] || '/machines'
|
||||
return `${basePath}/${machine.machineid}`
|
||||
}
|
||||
|
||||
function renderMarkers() {
|
||||
// Clear existing markers
|
||||
markers.value.forEach(m => m.marker.remove())
|
||||
markers.value = []
|
||||
|
||||
props.machines.forEach(machine => {
|
||||
if (machine.mapleft == null || machine.maptop == null) return
|
||||
|
||||
// Transform coordinates (database Y is top-down, Leaflet is bottom-up)
|
||||
const leafletY = MAP_HEIGHT - machine.maptop
|
||||
const leafletX = machine.mapleft
|
||||
|
||||
const typeName = machine.machinetype || ''
|
||||
const color = getTypeColor(typeName)
|
||||
|
||||
const icon = L.divIcon({
|
||||
html: `<div class="machine-marker-dot" style="background: ${color};"></div>`,
|
||||
iconSize: [24, 24],
|
||||
iconAnchor: [12, 12],
|
||||
popupAnchor: [0, -12],
|
||||
className: 'machine-marker'
|
||||
})
|
||||
|
||||
const marker = L.marker([leafletY, leafletX], { icon })
|
||||
|
||||
// Display name for tooltips and popups
|
||||
const displayName = machine.alias || machine.machinenumber || 'Unknown'
|
||||
const detailRoute = getDetailRoute(machine)
|
||||
const category = machine.category?.toLowerCase() || ''
|
||||
|
||||
// Build tooltip content based on category
|
||||
let tooltipLines = [`<strong>${displayName}</strong>`]
|
||||
|
||||
// Don't show "LocationOnly" as machine type
|
||||
if (typeName && typeName.toLowerCase() !== 'locationonly') {
|
||||
tooltipLines.push(`<span style="color: #888;">${typeName}</span>`)
|
||||
}
|
||||
|
||||
// Add vendor and model if available
|
||||
if (machine.vendor) {
|
||||
tooltipLines.push(`<span style="color: #aaa;">${machine.vendor}${machine.model ? ' ' + machine.model : ''}</span>`)
|
||||
} else if (machine.model) {
|
||||
tooltipLines.push(`<span style="color: #aaa;">${machine.model}</span>`)
|
||||
}
|
||||
|
||||
// Category-specific info
|
||||
if (category === 'printer') {
|
||||
// Printers: show IP and hostname
|
||||
if (machine.ipaddress) {
|
||||
tooltipLines.push(`<span style="color: #8cf;">IP: ${machine.ipaddress}</span>`)
|
||||
}
|
||||
if (machine.hostname) {
|
||||
tooltipLines.push(`<span style="color: #8cf;">${machine.hostname}</span>`)
|
||||
}
|
||||
} else {
|
||||
// Equipment/PC: show connected PC if available
|
||||
if (machine.connected_pc) {
|
||||
tooltipLines.push(`<span style="color: #fc8;">PC: ${machine.connected_pc}</span>`)
|
||||
}
|
||||
}
|
||||
|
||||
// Business unit
|
||||
if (machine.businessunit) {
|
||||
tooltipLines.push(`<span style="color: #ccc;">${machine.businessunit}</span>`)
|
||||
}
|
||||
|
||||
const tooltipContent = tooltipLines.join('<br>')
|
||||
marker.bindTooltip(tooltipContent, {
|
||||
direction: 'top',
|
||||
offset: [0, -12],
|
||||
className: 'marker-tooltip'
|
||||
})
|
||||
|
||||
// Click popup (detailed info)
|
||||
const popupContent = `
|
||||
<div class="marker-popup">
|
||||
<strong>${displayName}</strong>
|
||||
<div class="popup-details">
|
||||
<div><span class="label">Number:</span> ${machine.machinenumber || '-'}</div>
|
||||
<div><span class="label">Type:</span> ${typeName || '-'}</div>
|
||||
<div><span class="label">Category:</span> ${machine.category || '-'}</div>
|
||||
<div><span class="label">Status:</span> ${machine.status || '-'}</div>
|
||||
<div><span class="label">Vendor:</span> ${machine.vendor || '-'}</div>
|
||||
<div><span class="label">Model:</span> ${machine.model || '-'}</div>
|
||||
</div>
|
||||
<a href="${detailRoute}" class="popup-link">View Details</a>
|
||||
</div>
|
||||
`
|
||||
|
||||
marker.bindPopup(popupContent)
|
||||
marker.on('click', () => emit('markerClick', machine))
|
||||
|
||||
marker.addTo(map)
|
||||
|
||||
markers.value.push({
|
||||
marker,
|
||||
machine,
|
||||
searchData: `${machine.machinenumber} ${machine.alias} ${typeName} ${machine.vendor} ${machine.model} ${machine.serialnumber} ${machine.businessunit}`.toLowerCase()
|
||||
})
|
||||
})
|
||||
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const searchTerm = filters.value.search.toLowerCase()
|
||||
|
||||
markers.value.forEach(({ marker, machine, searchData }) => {
|
||||
let visible = true
|
||||
|
||||
if (filters.value.machinetype && machine.machinetypeid !== filters.value.machinetype) {
|
||||
visible = false
|
||||
}
|
||||
if (filters.value.businessunit && machine.businessunitid !== filters.value.businessunit) {
|
||||
visible = false
|
||||
}
|
||||
if (filters.value.status && machine.statusid !== filters.value.status) {
|
||||
visible = false
|
||||
}
|
||||
if (searchTerm && !searchData.includes(searchTerm)) {
|
||||
visible = false
|
||||
}
|
||||
|
||||
marker.setOpacity(visible ? 1 : 0.15)
|
||||
})
|
||||
}
|
||||
|
||||
let searchTimeout = null
|
||||
function debounceSearch() {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(applyFilters, 300)
|
||||
}
|
||||
|
||||
watch(() => props.machines, () => {
|
||||
if (map) renderMarkers()
|
||||
}, { deep: true })
|
||||
|
||||
watch(() => props.theme, (newTheme) => {
|
||||
if (imageOverlay && map) {
|
||||
const blueprintUrl = newTheme === 'light'
|
||||
? '/static/images/sitemap2025-light.png'
|
||||
: '/static/images/sitemap2025-dark.png'
|
||||
imageOverlay.setUrl(blueprintUrl)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (map) {
|
||||
map.remove()
|
||||
map = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shopfloor-map {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filters select,
|
||||
.filters input {
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 1.125rem;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.filters input {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.filters input::placeholder {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.125rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-card);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.map-container {
|
||||
flex: 1;
|
||||
min-height: 600px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.map-container.picker-active {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.picker-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
padding: 1rem;
|
||||
background: var(--warning);
|
||||
border-bottom: 1px solid var(--warning);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.picker-message {
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.picker-coords {
|
||||
font-family: monospace;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
:deep(.marker-popup) {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
:deep(.marker-popup strong) {
|
||||
display: block;
|
||||
margin-bottom: 0.625rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
:deep(.popup-details) {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
:deep(.popup-details .label) {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.popup-link) {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
color: #1976d2;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.popup-link:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
:deep(.machine-marker) {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
:deep(.machine-marker-dot) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--border);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
:deep(.picker-marker-dot) {
|
||||
background: #ff0000;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--border);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
:deep(.marker-tooltip) {
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 14px 18px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.7;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
:deep(.marker-tooltip::before) {
|
||||
border-top-color: rgba(0, 0, 0, 0.92);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user