<script setup lang="ts">
|
import type { EquVO } from '#/api/eims/equ/model';
|
|
import { onMounted, ref } from 'vue';
|
import { useRoute } from 'vue-router';
|
|
import { Page, useVbenDrawer } from '@vben/common-ui';
|
|
import { HomeTwoTone, RightOutlined } from '@ant-design/icons-vue';
|
import { Badge, Card, Descriptions, DescriptionsItem, Divider, Image, ImagePreviewGroup, TabPane, Tabs, Tag } from 'ant-design-vue';
|
|
import { getEqu } from '#/api/eims/equ';
|
import equDrawer from '#/views/eims/equ/equ-drawer.vue';
|
|
const route = useRoute();
|
const equId = route.params.equId as string;
|
|
const equVo = ref<EquVO>();
|
|
onMounted(async () => {
|
await loadData();
|
});
|
|
async function loadData() {
|
equVo.value = await getEqu(equId);
|
}
|
|
const [EquDrawer, equDrawerApi] = useVbenDrawer({
|
connectedComponent: equDrawer
|
});
|
|
async function handleEdit() {
|
equDrawerApi.setData({ id: equId, typeDisable: true });
|
equDrawerApi.open();
|
}
|
</script>
|
|
<template>
|
<Page :auto-content-height="true" :padding="false" class="p-0" content-class="flex w-full gap-[8px]">
|
<div class="w-full h-fit p-4">
|
<Card class="w-full rounded-b-none overflow-hidden">
|
<div class="flex gap-[8px]">
|
<div class="w-1/4 min-w-56">
|
<div class="flex w-full h-8 justify-between items-center">
|
<span class="font-bold text-lg">{{ equVo?.equName }} </span>
|
<span class="text-gray-400">2025年度 <RightOutlined /> </span>
|
</div>
|
<Tag v-if="!equVo?.status" class="mt-2">其它</Tag>
|
<Tag v-else-if="equVo?.status === '0'" class="mt-2" color="cyan">试用</Tag>
|
<Tag v-else-if="equVo?.status === '1'" class="mt-2" color="green">入固</Tag>
|
<Tag v-else-if="equVo?.status === '2'" class="mt-2" color="orange">迁移</Tag>
|
<Tag v-else-if="equVo?.status === '3'" class="mt-2" color="red">报废</Tag>
|
<Divider class="my-4" type="horizontal" />
|
<HomeTwoTone />
|
<span class="ml-2 text-gray-500">{{ equVo?.location }}</span>
|
</div>
|
|
<div class="w-3/4 min-w-[640px] flex align-center justify-around">
|
<Divider class="h-full" type="vertical" />
|
<div class="flex w-1/4 h-full cursor-pointer items-center justify-center rounded-sm hover:bg-gray-100"
|
style="background: #f2f6fe">
|
<Image :preview="false" :width="40" src="/src/assets/logo.png" />
|
<div class="flex flex-col ml-6 mr-2">
|
<span class="text-xl font-bold">100%</span>
|
<span class="mt-5 text-gray-500">设备健康度</span>
|
</div>
|
</div>
|
<div class="flex w-1/4 h-full cursor-pointer items-center justify-center rounded-sm hover:bg-gray-100"
|
style="background: #fcf8ee">
|
<Image :preview="false" :width="40" src="/src/assets/logo.png" />
|
<div class="flex flex-col ml-6 mr-2">
|
<span class="text-xl font-bold">86.6h</span>
|
<span class="mt-5 text-gray-500">平均故障时间</span>
|
</div>
|
</div>
|
<div class="flex w-1/4 h-full cursor-pointer items-center justify-center rounded-sm hover:bg-gray-100"
|
style="background: #ecf5de">
|
<Image :preview="false" :width="40" src="/src/assets/logo.png" />
|
<div class="flex flex-col ml-6 mr-2">
|
<span class="text-xl font-bold">0元</span>
|
<span class="mt-5 text-gray-500">维保总费用</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</Card>
|
<Card class="w-full rounded-t-none mt-2">
|
<Tabs>
|
<TabPane key="1" tab="基本信息">
|
<Descriptions bordered title="基本信息">
|
<template #extra>
|
<a-button type="primary" @click="handleEdit">编辑</a-button>
|
</template>
|
<DescriptionsItem label="使用状况">
|
<Badge status="processing" text="在用" />
|
</DescriptionsItem>
|
<DescriptionsItem label="设备名称">{{ equVo?.equName }}</DescriptionsItem>
|
<DescriptionsItem label="设备编码">{{ equVo?.equCode }}</DescriptionsItem>
|
<DescriptionsItem label="设备类型">{{ equVo?.equTypeName }}</DescriptionsItem>
|
<DescriptionsItem label="资产编号">{{ equVo?.assetNo }}</DescriptionsItem>
|
<DescriptionsItem label="额定功率">{{ equVo?.ratedPower }}</DescriptionsItem>
|
<DescriptionsItem label="铭牌信息">{{ equVo?.plateInfo }}</DescriptionsItem>
|
<DescriptionsItem label="所在位置">{{ equVo?.location }}</DescriptionsItem>
|
<DescriptionsItem label="制造商">{{ equVo?.madeIn }}</DescriptionsItem>
|
<DescriptionsItem label="使用年限">{{ equVo?.serviceLife }}</DescriptionsItem>
|
<DescriptionsItem label="使用部门">{{ equVo?.deptName }}</DescriptionsItem>
|
<DescriptionsItem label="责任人">{{ equVo?.respPersonName }}</DescriptionsItem>
|
<DescriptionsItem label="联系电话">{{ equVo?.contactPhone }}</DescriptionsItem>
|
<DescriptionsItem label="采购日期">{{ equVo?.purchaseDate }}</DescriptionsItem>
|
<DescriptionsItem label="试用日期">{{ equVo?.trialDate }}</DescriptionsItem>
|
<DescriptionsItem label="使用日期">{{ equVo?.deployDate }}</DescriptionsItem>
|
<DescriptionsItem label="计验日期">{{ equVo?.planAcceptDate }}</DescriptionsItem>
|
<DescriptionsItem label="实验日期">{{ equVo?.actualAcceptDate }}</DescriptionsItem>
|
</Descriptions>
|
<Descriptions class="mt-3" size="small" title="设备图片">
|
<DescriptionsItem>
|
<ImagePreviewGroup>
|
<Image :width="200"
|
src="https://shlanpu.cn/uploads/images/202404/ebb24dc0610cf8e83a19fb0f568bf530.png" />
|
<Image :width="200"
|
src="https://shlanpu.cn/uploads/images/202404/c2212b8fc38bdd20e9d1cf79da40698d.jpg" />
|
</ImagePreviewGroup>
|
</DescriptionsItem>
|
</Descriptions>
|
</TabPane>
|
<TabPane key="2" tab="维修">Content of Tab Pane 2</TabPane>
|
<TabPane key="3" tab="保养">Content of Tab Pane 3</TabPane>
|
<TabPane key="4" tab="点检">Content of Tab Pane 3</TabPane>
|
<TabPane key="5" tab="备件">Content of Tab Pane 3</TabPane>
|
<TabPane key="5" tab="附件">Content of Tab Pane 3</TabPane>
|
<TabPane key="6" tab="设备履历">Content of Tab Pane 3</TabPane>
|
<TabPane key="7" tab="试产记录">Content of Tab Pane 3</TabPane>
|
<TabPane key="8" tab="状态记录">Content of Tab Pane 3</TabPane>
|
</Tabs>
|
</Card>
|
</div>
|
<EquDrawer @reload="loadData" />
|
</Page>
|
</template>
|
|
<style scoped></style>
|
