1

lzhe

2024-06-05 fc15f2e904fade9e1505bad70b29829d7d99c124

 src/views/mdc/configuration.vue

@@ -1,21 +1,165 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-09 22:15:27
 * @LastEditTime: 2024-04-18 00:00:27
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/configuration.vue
 * 应用设置
-->
<template>
    <div>
        应用设置
    </div>
    <el-main>
        <el-card shadow="never">
            <el-tabs :tab-position="'left'" class="demo-tabs">
                <el-tab-pane label="实时看板查询组设置">
                    <Board />
                </el-tab-pane>
                <el-tab-pane label="状态和绩效时间设置">
                    <Status />
                </el-tab-pane>
                <el-tab-pane label="效率统计设置">
                    <Efficiency />
                </el-tab-pane>
                <el-tab-pane label="采集数据标签设置">
                    <scFormTable ref="table1" v-model="Tabledata" stripe hideDelete :addTemplate="addTemplate">
                        <el-table-column label="数据标签" prop="usageName">
                            <template #default="scope">
                                <el-input v-if="scope.row.isEdit" v-model="scope.row.usageName"></el-input>
                                <span v-else>{{ scope.row.usageName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="数据标签标识" prop="usageCode">
                            <template #default="scope">
                                <el-input v-if="scope.row.isEdit" v-model="scope.row.usageCode"></el-input>
                                <span v-else>{{ scope.row.usageCode }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="计算方法" prop="dataTypeDesc">
                            <template #default="scope">
                                <el-select v-if="scope.row.isEdit" v-model="scope.row.collectType" style="width: 100%;"
                                    @change="update(scope.row)">
                                    <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <span v-else>{{ scope.row.dataTypeDesc }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="脉冲计数倍率" prop="value">
                            <template #default="scope">
                                <el-input-number v-if="scope.row.isEdit && scope.row.collectType == 9" :min="1"
                                    :max="10" />
                                <span>{{ scope?.row?.parameter?.value }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" prop="state">
                            <template #default="scope">
                                <el-button v-show="!scope.row.id || scope.row.isEdit"
                                    @click="add(scope.row)">保存</el-button>
                                <el-button v-show="!scope.row.isEdit" @click="edit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </scFormTable>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-main>
</template>

<script>
    export default {
        
import Board from './configComp/Board.vue'
import Status from './configComp/Status.vue'
import Efficiency from './configComp/Efficiency.vue'
export default {
    components: {
        Board,
        Status,
        Efficiency
    },
    data() {
        return {
            Tabledata: [],
            addTemplate: {
                collectType: '',
                dataTypeDesc: '',
                id: null,
                parameter: {
                    value: ''
                },
                usageCode: '',
                usageName: '',
                isEdit: true,
            },
            options: [{
                label: '差值计算',
                value: 8
            }, {
                label: '脉冲计算',
                value: 9
            }]
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.$HTTP.get('/api/blade-cps/workstation-wcs-usage/list').then(res => {
                if (res.code === 200) {
                    this.Tabledata = res.data.map(item => {
                        return {
                            ...item,
                            parameter: item.parameter ? JSON.parse(item.parameter) : null
                        }
                    })
                }
            })
        },
        edit(row) {
            row.isEdit = true
        },
        update(row) {
            row.dataTypeDesc = this.options.find(item => item.value === row.collectType)?.label
            if (row.collectType === 9) {
                row.parameter = { value: 0 }
            } else {
                row.parameter = null
            }
        },
        add(row) {
            let url = '/api/blade-cps/workstation-wcs-usage'
            let data = {
                ...row
            }
            if (row.id) {
                try {
                    delete data.isEdit
                } catch (error) {

                }
                if (data.parameter) data.parameter = JSON.stringify(row.parameter)
                this.$HTTP.post(url, data).then(res => {
                    if (res.code === 200) {
                        this.getList()
                    }
                })
            } else {
                this.$HTTP.post(url, data).then(res => {
                    if (res.code === 200) {
                        this.getList()
                    }
                })
            }
            // 
            // collectType
            // usageCode
            // usageName

        }
    }
}
</script>

<style lang="scss" scoped>

.label {
    display: flex;
    align-items: center;
}
</style>