index.vue
2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script lang="ts" setup>
import { Description, useDescription } from '/@/components/Description';
import { descSchema } from './config';
import type { PropType } from 'vue';
import { ref } from 'vue';
import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
import edgeInstancePng from '/@/assets/images/edgeInstance.png';
import { Image } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { syncEdge } from '/@/api/edgeManage/edgeInstance';
import { useI18n } from '/@/hooks/web/useI18n';
// import { useGo } from '/@/hooks/web/usePage';
const props = defineProps({
recordData: {
type: Object as PropType<EdgeInstanceItemType>,
default: () => {},
},
});
defineEmits(['register']);
const { t } = useI18n();
const CS = {
'max-width': '600px',
'word-break': 'break-all',
overflow: 'hidden',
display: '-webkit-box',
'-webkit-line-clamp': 2,
'-webkit-box-orient': 'vertical',
};
const { createMessage } = useMessage();
// const go = useGo();
const loadStatus = ref(false);
const [register] = useDescription({
layout: 'vertical',
schema: descSchema(),
column: 5,
});
const handleEventIsSyncEdge = async () => {
loadStatus.value = true;
try {
if (!props.recordData?.id?.id) return;
await syncEdge(props.recordData?.id?.id);
createMessage.success(t('edge.instance.message.syncSuccess'));
} finally {
loadStatus.value = false;
}
};
// const handleEventIsOpenEdgeDevice = () => {
// go('/edge/edge_device/' + props.recordData?.id?.id);
// };
</script>
<template>
<a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<a-col class="gutter-row" :span="3">
<div class="!flex flex-col justify-between items-center">
<div><Image :src="edgeInstancePng" :width="180" /></div>
<div class="!flex flex-col mt-3 justify-between">
<span style="color: #1d2129" class="truncate font-bold">{{ recordData?.name }}</span>
<span style="color: #3d3d3d">
{{ t('edge.instance.text.edgeDetail') }}
</span>
</div>
</div>
</a-col>
<a-col class="gutter-row" :span="21">
<div class="!flex flex-col justify-between">
<Description v-if="recordData" @register="register" :data="recordData" :contentStyle="CS" />
<div class="!flex mt-3">
<a-button
:disabled="!recordData.active"
:loading="loadStatus"
type="primary"
@click="handleEventIsSyncEdge"
>
{{ t('edge.instance.action.syncEdge') }}
</a-button>
<!-- <a-button class="ml-4" type="primary" @click="handleEventIsOpenEdgeDevice"
>边缘设备</a-button
> -->
</div>
</div>
</a-col>
</a-row>
</template>
<style lang="less" scoped>
:deep(.ant-image-img) {
height: 157px;
}
</style>