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
| <!--
| * @Date: 2024-10-05 09:51:45
| * @LastEditors: gaoshp
| * @LastEditTime: 2024-10-27 14:03:19
| * @FilePath: /cps-web/src/views/console/workstation/CollTable.vue
| -->
| <template>
| <div>
| <el-table :data="tabledata">
| <el-table-column width="200" v-for="item in cols" :key="item.prop" :prop="item.prop" :label="item.label">
| <template #header="scope">
| <span v-show="item.isRequired" style="color: red;">*</span>
| <span>{{ scope.column.label }}</span>
| <el-tooltip class="box-item" effect="dark" placement="top-start">
| <template #content>
| <p v-html="item.describe"></p>
| </template>
| <el-icon v-show="item.describe"><el-icon-question-filled /></el-icon>
| </el-tooltip>
|
| </template>
| <template #default="scope">
| <el-select disabled v-model="scope.row[item.prop]" placeholder="" size="small"
| v-if="item.type === 'option'">
| <el-option v-for="item in item.options" :key="item.value || item" :label="item.label || item"
| :value="item.value || item" />
| </el-select>
| <el-switch disabled size="small" v-model="scope.row[item.prop]"
| v-else-if="item.type === 'boolean'" />
| <span v-else>{{ scope.row[item.prop] }}</span>
| </template>
| </el-table-column>
| </el-table>
| </div>
| </template>
|
| <script>
| import addOptions from './addOptions'
| export default {
| mixins: [addOptions],
| props: {
| info: {
| type: Object,
| default() {
| return {}
| }
| }
| },
| watch: {
| info: {
| handler() {
| this.getList({
| workstationId: this.info.id,
| })
| },
| deep: true,
| immediate: true
| }
| },
| data() {
| return {
| cols: [],
| tabledata: []
| }
| },
| methods: {
| refresh() {
| this.getList({
| workstationId: this.info.id,
| })
| },
| getList(params) {
| this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
| try {
| this.cols = JSON.parse(res.data.dpHead)
| this.addOptions(this.cols)
| // if (this.cols.filter(v => v.prop === 'isProcessParam').length === 0) {
| // this.cols.unshift(
| // {
| // label: "过程参数",
| // prop: "isProcessParam",
| // isRequired: true,
| // type: 'boolean',
| // }
| // )
| // }
| // if (this.cols.filter(v => v.prop === 'dpLabel').length === 0) {
| // this.cols.unshift(
| // {
| // label: "显示名称",
| // prop: "dpLabel",
| // isRequired: true,
| // }
| // )
| // }
| // if (this.cols.filter(v => v.prop === 'dpCategory').length === 0) {
| // this.cols.unshift(
| // {
| // label: "点位分类",
| // prop: "dpCategory",
| // isRequired: true,
| // type: 'option',
| // options: [{
| // label: '程序名',
| // value: 'ProgName'
| // }, {
| // label: '程序内容',
| // value: 'ProgContent'
| // }, {
| // label: '刀具号',
| // value: 'ToolNo'
| // }, {
| // label: '状态',
| // value: 'DeviceStatus'
| // }, {
| // label: '产量',
| // value: 'Output'
| // }, {
| // label: '告警',
| // value: 'Alarm'
| // }, {
| // label: '其他',
| // value: 'Other'
| // }]
| // }
| // )
| // }
| } catch (error) {
| this.cols = []
| }
| try {
| this.tabledata = JSON.parse(res.data.dpConfig).map(v => {
| v.status = null
| return v
| }) || [];
| } catch (error) {
| this.tabledata = []
| }
| })
| },
| }
| }
| </script>
|
| <style lang="scss" scoped></style>
|
|
