| | |
|---|
| | | <!-- |
|---|
| | | * @Date: 2024-10-05 09:51:45 |
|---|
| | | * @LastEditors: gaoshp |
|---|
| | | * @LastEditTime: 2024-10-07 00:32:44 |
|---|
| | | * @LastEditors: lzhe lzhe@example.com |
|---|
| | | * @LastEditTime: 2024-10-10 10:45:03 |
|---|
| | | * @FilePath: /cps-web/src/views/console/workstation/CollTable.vue |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <el-table :data="tabledata" height="200px"> |
|---|
| | | <el-table-column v-for="item in cols" :key="item.prop" :prop="item.prop" :label="item.label" width="120"> |
|---|
| | | <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"> |
|---|
| | | <span>{{ scope.row[item.prop] }}</span> |
|---|
| | | <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> |
|---|
| | |
|---|
| | | this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => { |
|---|
| | | try { |
|---|
| | | this.cols = JSON.parse(res.data.dpHead) |
|---|
| | | if (this.cols.filter(v => v.prop === 'dplabel').length === 0) { |
|---|
| | | 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", |
|---|
| | | 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: 'DeviceStatus' |
|---|
| | | }, { |
|---|
| | | label: '产量', |
|---|
| | | value: 'Output' |
|---|
| | | }, { |
|---|
| | | label: '告警', |
|---|
| | | value: 'Alarm' |
|---|
| | | }, { |
|---|
| | | label: '其他', |
|---|
| | | value: 'Other' |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | } catch (error) { |
|---|
| | | this.cols = [] |
|---|
| | | } |
|---|
