工位数据点

gaoshp

2024-10-05 0d4c393c1afa90a9e6f209c0995976a07133bfbe

工位数据点

 src/views/console/workstation/Coll.vue

ÎļþÒÑɾ³ý

 src/views/console/workstation/CollDialog.vue

@@ -1,11 +1,19 @@
<template>
    <el-dialog title="数据点" v-model="visible" :width="'100%'" destroy-on-close @closed="$emit('closed')">
        <el-select v-model="type" placeholder="Select" size="small" style="width: 240px" @change="changeType">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
    <el-dialog title="数据点" v-model="visible" :width="'80%'" destroy-on-close @closed="$emit('closed')">
        <p style="margin-bottom: 14px;">
            <span style="margin-right: 8px;">类型</span>
            <el-select v-model="type" placeholder="Select" size="small" style="width: 240px" @change="changeType">
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </p>

        <scFormTable v-show="type" ref="table1" v-model="tabledata" stripe hideDelete :hideAdd="!type"
            :addTemplate="addTemplate">
            <el-table-column 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>
                </template>
                <template #default="scope">
                    <el-select v-model="scope.row[item.prop]" placeholder="Select" size="small"
                        v-if="scope.row.status && item.type === 'option'">
@@ -19,12 +27,12 @@
                </template>
            </el-table-column>

            <el-table-column label="操作" prop="state" width="120">
            <el-table-column label="操作" prop="state" width="200">
                <template #default="scope">
                    <el-button-group>
                        <el-button text type="primary" size="small">编辑</el-button>
                        <el-button text type="primary">复制</el-button>
                        <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="del(scope.row)">
                        <el-button text type="primary" size="small" @click="table_edit(scope.row)">编辑</el-button>
                        <!-- <el-button text type="primary" size="small">复制</el-button> -->
                        <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="del(scope.$index)">
                            <template #reference>
                                <el-button text type="primary" size="small">删除</el-button>
                            </template>
@@ -42,8 +50,6 @@
</template>

<script>
import deepmerge from 'deepmerge'
import http from "@/utils/request"
export default {
    emits: ['success', 'closed'],
    props: {
@@ -75,13 +81,19 @@
    },
    methods: {
        changeType(val) {
            console.log(val)
            console.log(JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull))
            try {
                this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
            } catch (error) {
            this.$confirm(`切换类型将删除所有已配置数据点`, '提示', {
                type: 'warning'
            }).then(() => {
                try {
                    this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
                    this.table = []
                } catch (error) {
                    this.cols = []
                }
            }).catch(() => {

            }
            })

        },
        //显示
        open(mode = 'add', params) {
@@ -106,22 +118,51 @@
        },
        getList(params) {
            this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
                // res.data.records = res?.data?.records.map(v => {
                //     return {
                //         ...v,
                //         statusName: v.status ? '启用' : '禁用'
                //     }
                // })
                try {
                    this.cols = JSON.parse(res.data.dpHead)
                    console.log(this.cols, 'cols')
                } catch (error) {
                    this.cols = []
                }
                try {
                    this.tabledata = JSON.parse(res.data.dpConfig).map(v => {
                        v.status = null
                        return v
                    }) || [];
                } catch (error) {
                    this.tabledata = []
                }
                this.type = res.data.type
                this.tabledata = res.data.dpConfig || [];

                // return res
            })
        },
        table_edit(row) {
            row.status = '1'
        },
        del(index) {
            this.tabledata.splice(index, 1)
        },
        //表单提交方法
        submit() {
            console.log(this.tabledata)
            let isRequiredKey = this.cols.filter(v => v.isRequired).map(v => v.prop)
            let flag = this.tabledata.every(item => {
                return isRequiredKey.every(v => {
                    return item[v] !== undefined && item[v] !== null && item[v] !== ''
                })
            })
            if (!flag) {
                return this.$message.warning('请校验必填项')
            }
            let len = [...new Set(this.tabledata.map(v => v.dpName))].length
            if (len != this.tabledata.length) {
                return this.$message.warning('数据点名称不能重复')
            }
            this.$HTTP.put('/api/blade-cps/workstation/saveDatapoints', {
                dpConfig: JSON.stringify(this.tabledata),
                dpConfig: JSON.stringify(this.tabledata.map(v => {
                    delete v.status
                    return v
                })),
                workstationId: this.params.id,
                type: this.type
            }).then(res => {
@@ -130,6 +171,9 @@
                        workstationId: this.params.id,
                    })
                }
            }).finally(() => {
                this.visible = false
                this.$emit('success')
            })
        },


 src/views/console/workstation/CollTable.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
<!--
 * @Date: 2024-10-05 09:51:45
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-10-05 20:40:36
 * @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">
                <template #default="scope">
                    <span>{{ scope.row[item.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

export default {
    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)
                } 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>

 src/views/console/workstation/index.vue

@@ -153,65 +153,9 @@
                                                                size="small">数据点编辑</el-button>
                                                        </el-header>
                                                        <el-main>
                                                            <el-table :data="list" height="200px"
                                                                @selection-change="handleSelectionChange">
                                                                <el-table-column type="selection" width="55"
                                                                    v-if="editFlag" />
                                                                <el-table-column label="采集变量名称" prop="name"
                                                                    width="120" />
                                                                <el-table-column label="工位变量名称" prop="dataItem"
                                                                    width="120">
                                                                    <template #default="scope">
                                                                        <el-input :disabled="!editFlag"
                                                                            v-model="scope.row.dataItem"></el-input>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="数据标签" prop="description"
                                                                    width="150">
                                                                    <template #default="scope">
                                                                        <el-select :disabled="!editFlag"
                                                                            v-model="scope.row.description">
                                                                            <el-option
                                                                                v-for="item in workstation_param_type"
                                                                                :key="item.dictKey"
                                                                                :label="item.dictValue"
                                                                                :value="item.dictKey - 0" />
                                                                        </el-select>
                                                                        <!-- {{ dmp_data_type.find(v => v.dictKey == scope.row.wcsDataType)?.dictValue }} -->
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="数据类别" prop="wcsDataType"
                                                                    width="150">
                                                                    <template #default="scope">
                                                                        <el-select disabled
                                                                            v-model="scope.row.wcsDataType">
                                                                            <el-option v-for="item in dmp_data_type"
                                                                                :key="item.dictKey"
                                                                                :label="item.dictValue"
                                                                                :value="item.dictKey - 0" />
                                                                        </el-select>
                                                                        <!-- {{ dmp_data_type.find(v => v.dictKey == scope.row.wcsDataType)?.dictValue }} -->
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="大屏" prop="bigScreen">
                                                                    <template #default="scope">
                                                                        <el-checkbox :disabled="!editFlag"
                                                                            v-model="scope.row.bigScreen" />
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="实时数据" prop="realTimeData">
                                                                    <template #default="scope">
                                                                        <el-checkbox :disabled="!editFlag"
                                                                            v-model="scope.row.realTimeData" />
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column label="过程参数" prop="processParameter">
                                                                    <template #default="scope">
                                                                        <el-checkbox :disabled="!editFlag"
                                                                            v-model="scope.row.processParameter" />
                                                                    </template>
                                                                </el-table-column>
                                                            </el-table>
                                                            <!-- <el-table :data="list" height="200px">
                                                            </el-table> -->
                                                            <CollTable ref="collTable" :info="previewData"></CollTable>
                                                        </el-main>
                                                    </el-container>
                                                </el-tab-pane>
@@ -394,7 +338,7 @@
            </el-tabs>
        </el-card>
        <Dialog ref="dialog" @success="success" :option="{ types, status, group }"></Dialog>
        <CollDialog ref="CollDialog" @success="success" :option="{ previewData }"></CollDialog>
        <CollDialog ref="CollDialog" @success="successColl" :option="{ previewData }"></CollDialog>
    </el-main>
</template>

@@ -402,12 +346,14 @@
import pmsPng from '@/assets/pms.png'
import Dialog from './Dialog.vue'
import CollDialog from './CollDialog.vue'
import CollTable from './CollTable.vue'
import machinePng from '@/assets/machine.png'
export default {
    name: 'system',
    components: {
        Dialog,
        CollDialog
        CollDialog,
        CollTable
    },
    data() {
        return {
@@ -518,6 +464,9 @@
        // æ•°æ®ç‚¹ç¼–辑
        editCollection() {
            this.$refs.CollDialog.open('edit', this.previewData)
        },
        successColl() {
            this.$refs.collTable.refresh()
        },
        handleSelectionChange(val) {
            val.forEach(v => {
@@ -671,7 +620,13 @@
            }
            console.log(data, '>>>>>>>>>>>')
            this.$HTTP.get(`/api/blade-cps/workstation/listDmpVariablesByMachineId?machineId=${data.machineId}`).then(res => {
                this.list = res?.data?.dmpVariablesVOList
                this.list = res?.data
                // Object.keys(this.basic).forEach(key => {
                //     this.basic[key] = res?.data?.[key] || '-'
                // })
            })
            this.$HTTP.get(`/api/blade-cps/workstation/listDmpVariablesByWorkstationId?workstationId=${data.id}`).then(res => {
                // this.list = res?.data?.dmpVariablesVOList
                Object.keys(this.basic).forEach(key => {
                    this.basic[key] = res?.data?.[key] || '-'
                })