ScanInfo.vue
4.91 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<template>
<page-layout title="物料编码：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
<a-card style="margin-top: 24px" :bordered="false" title="基础信息">
<detail-list>
<detail-list-item term="终端客户">广东富华工程装备制造有限公司</detail-list-item>
<detail-list-item term="项目名称">铲斗焊接生产线</detail-list-item>
<detail-list-item term="区域（工位）名称">机器人焊接区域</detail-list-item>
<detail-list-item term="柜体名称">CP1主控制柜</detail-list-item>
<detail-list-item term="工作令号">4052-2022-010051-10</detail-list-item>
<detail-list-item term="电气成套料号">20200103781</detail-list-item>
<detail-list-item term="电气图号">2403-0000-0022-0015</detail-list-item>
</detail-list>
<detail-list title="供电参数">
<detail-list-item term="设备功率:">80KW</detail-list-item>
<detail-list-item term="输入电压">380V</detail-list-item>
<detail-list-item term="频率">50HZ</detail-list-item>
</detail-list>
<a-card type="inner" title="设计与生产记录">
<detail-list title="" size="small">
<detail-list-item term="检验工程师：">林东东</detail-list-item>
<detail-list-item term="完成时间">2022-09-23</detail-list-item>
</detail-list>
</a-card>
</a-card>
<a-card style="margin-top: 24px" :bordered="false" title="附件">
<a-card type="inner" title="区域电气图纸">
<a-row>
<!-- 预览区域 -->
<template>
<div v-for="(fileDetail,index) in dataSource[0].fileDetails" :key="index">
<div style="float: left;width:95px;height:95px;margin-right: 10px;margin: 0 8px 8px 0;">
<div
style="width: 80%;height: 80%;position: relative;padding:3px;border: 1px solid #d9d9d9;border-radius: 4px;">
<img style="width: 100%;float: left;" :src="fileDetail.imgUrl" :preview="dataSource[0].key">
</div>
</div>
</div>
</template>
</a-row>
<a-divider style="margin: 16px 0" />
<detail-list title="使用说明书" size="small" :col="1">
<detail-list-item term="附件"><a>xxxx使用说明书</a></detail-list-item>
</detail-list>
<a-divider style="margin: 16px 0" />
<detail-list title="维修与保养手册" size="small" :col="2">
<detail-list-item term="附件"><a>xxxx维修与保养手册</a></detail-list-item>
</detail-list>
</a-card>
</a-card>
</page-layout>
</template>
<script>
import { mixinDevice } from '@/utils/mixin.js'
import PageLayout from '@/components/page/PageLayout'
import DetailList from '@/components/tools/DetailList'
import ARow from 'ant-design-vue/es/grid/Row'
const DetailListItem = DetailList.Item
export default {
name: "ScanInfo",
components: {
PageLayout,
DetailList,
DetailListItem,
ARow
},
mixins: [mixinDevice],
data () {
return {
activeTabKey: '1',
id:'',
dataSource: [{
key:0,
fileDetails:[
{
imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666521095&t=f336b053c0ea47c636242c4b35b423f1"
},
{
imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
}
]
},{
key:1,
fileDetails:[
{
imgUrl:"https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg"
},
{
imgUrl:"https://static.jeecg.com/upload/test/1_1588149743473.jpg"
}
]
}
],
}
},
created(){
var params = {};
location.search.substr(1).split('&').forEach( function(item){
var s = item.split('=');
params[s[0]]=s[1];
});
localStorage.setItem('id',params.id);
this.id=params.id;
} ,
}
</script>
<style lang="less" scoped>
.detail-layout {
margin-left: 44px;
}
.text {
color: rgba(0, 0, 0, .45);
}
.heading {
color: rgba(0, 0, 0, .85);
font-size: 20px;
}
.no-data {
color: rgba(0, 0, 0, .25);
text-align: center;
line-height: 64px;
font-size: 16px;
i {
font-size: 24px;
margin-right: 16px;
position: relative;
top: 3px;
}
}
.mobile {
.detail-layout {
margin-left: unset;
}
.text {
}
.status-list {
text-align: left;
}
}
.table-operator {
margin-bottom: 10px
}
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
width: 10px !important;
}
.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
background-color: #1890FF !important;
}
</style>