88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import WindTurbine from './icons/WindTurbine.vue'
|
|
|
|
interface Turbine {
|
|
id: number
|
|
turbineNo: string
|
|
status: 0 | 1 | 2 // 0 待施工 1 施工中 2 已完成
|
|
lat?: number
|
|
lng?: number
|
|
}
|
|
|
|
const props = defineProps<{ modelValue: Turbine }>()
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', v: Turbine): void
|
|
(e: 'map'): void
|
|
}>()
|
|
|
|
const turbine = computed({
|
|
get: () => props.modelValue,
|
|
set: v => emit('update:modelValue', v)
|
|
})
|
|
|
|
/* 状态文字 & 颜色 */
|
|
const statusTextMap = { 0: '待施工', 1: '施工中', 2: '已完成' }
|
|
const statusColorMap = { 0: '#FF7D00', 1: '#165DFF', 2: '#00B42A' }
|
|
|
|
/* 点击循环切换 */
|
|
function toggleStatus() {
|
|
const next = ((turbine.value.status + 1) % 3) as 0 | 1 | 2
|
|
turbine.value = { ...turbine.value, status: next }
|
|
}
|
|
|
|
function updateNo(val: string) {
|
|
turbine.value = { ...turbine.value, turbineNo: val }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="turbine-card">
|
|
<!-- 可点击的状态标签 -->
|
|
<div class="status-tag" :style="{ backgroundColor: statusColorMap[turbine.status] }" @click="toggleStatus">
|
|
{{ statusTextMap[turbine.status] }}
|
|
</div>
|
|
|
|
<!-- 风机图标 -->
|
|
<WindTurbine />
|
|
|
|
<!-- 机组编号输入框 -->
|
|
<a-input :model-value="turbine.turbineNo" @update:model-value="updateNo" size="small" class="turbine-input"
|
|
placeholder="编号" />
|
|
|
|
<!-- 地图选点按钮 -->
|
|
<a-button size="mini" @click="$emit('map')">
|
|
<template #icon><icon-location /></template>
|
|
</a-button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.turbine-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 12px 8px;
|
|
border: 1px solid var(--color-border-2);
|
|
border-radius: 4px;
|
|
background: var(--color-bg-2);
|
|
}
|
|
|
|
.status-tag {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
padding: 2px 4px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.turbine-input {
|
|
margin-top: 8px;
|
|
text-align: center;
|
|
}
|
|
</style> |