Industrial-image-management-system---web/src/components/TurbineGrid/index.vue

<template>
    <div class="turbine-grid-container">
        <div class="turbine-grid">
            <div v-for="turbine in turbines" :key="turbine.id" class="turbine-card"
                :class="getStatusClass(turbine.status)">
                <div class="turbine-status-badge" :class="`status-${turbine.status}`">
                    {{ getStatusText(turbine.status) }}
                </div>

                <div class="turbine-icon">
                    <img src="/static/images/wind-turbine-icon.svg" alt="风机图标" class="turbine-image" />
                </div>

                <div class="turbine-info">
                    <div class="turbine-number">
                        <a-input v-model="turbine.turbineNo" size="small" class="turbine-input" placeholder="请输入机组编号"
                            @change="handleTurbineNoChange(turbine)" />
                    </div>
                </div>

                <div class="turbine-actions">
                    <a-button type="text" size="mini" @click="openMapModal(turbine)" title="地图选点">
                        <template #icon><icon-location /></template>
                    </a-button>
                    <a-button type="text" size="mini" @click="editTurbine(turbine)" title="编辑">
                        <template #icon><icon-edit /></template>
                    </a-button>
                </div>
            </div>
        </div>

        <!-- 添加新机组按钮 -->
        <div v-if="showAddButton" class="turbine-card add-turbine-card" @click="addTurbine">
            <div class="add-icon">
                <icon-plus />
            </div>
            <div class="add-text">添加机组</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Message } from '@arco-design/web-vue'

interface Turbine {
    id: number
    turbineNo: string
    status: 0 | 1 | 2 // 0: 待施工, 1: 施工中, 2: 已完成
    lat?: number
    lng?: number
}

interface Props {
    turbines: Turbine[]
    showAddButton?: boolean
}

interface Emits {
    (e: 'update:turbines', turbines: Turbine[]): void
    (e: 'turbine-change', turbine: Turbine): void
    (e: 'add-turbine'): void
}

const props = withDefaults(defineProps<Props>(), {
    showAddButton: false
})

const emit = defineEmits<Emits>()

const getStatusText = (status: number) => {
    const statusMap = {
        0: '待施工',
        1: '施工中',
        2: '已完成'
    }
    return statusMap[status] || '未知状态'
}

const getStatusClass = (status: number) => {
    return `status-${status}`
}

const handleTurbineNoChange = (turbine: Turbine) => {
    emit('turbine-change', turbine)
    emit('update:turbines', props.turbines)
}

const openMapModal = (turbine: Turbine) => {
    Message.info(`地图选点功能待开发，当前机组编号：${turbine.turbineNo}`)
}

const editTurbine = (turbine: Turbine) => {
    // 可以打开编辑弹窗
    Message.info(`编辑机组：${turbine.turbineNo}`)
}

const addTurbine = () => {
    emit('add-turbine')
}
</script>

<style scoped>
.turbine-grid-container {
    padding: 16px;
}

.turbine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.turbine-card {
    position: relative;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.turbine-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.turbine-card.status-0 {
    border-left: 4px solid #ff7d00;
}

.turbine-card.status-1 {
    border-left: 4px solid #165dff;
}

.turbine-card.status-2 {
    border-left: 4px solid #00b42a;
}

.turbine-status-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: white;
}

.turbine-status-badge.status-0 {
    background-color: #ff7d00;
}

.turbine-status-badge.status-1 {
    background-color: #165dff;
}

.turbine-status-badge.status-2 {
    background-color: #00b42a;
}

.turbine-icon {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.turbine-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.turbine-info {
    text-align: center;
    margin-bottom: 12px;
}

.turbine-input {
    text-align: center;
    font-weight: 500;
}

.turbine-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.add-turbine-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d9d9d9;
    background-color: #fafafa;
    color: #666;
    min-height: 200px;
}

.add-turbine-card:hover {
    border-color: #165dff;
    color: #165dff;
    background-color: #f0f7ff;
}

.add-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.add-text {
    font-size: 14px;
}

@media (max-width: 768px) {
    .turbine-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .turbine-card {
        padding: 12px;
    }

    .turbine-image {
        width: 60px;
        height: 60px;
    }
}
</style>