应用设置

gaoshp

2024-04-17 ca3903e09980b98a1a46af0c339e9ca00fa04ccd

应用设置

 src/components/scFormTable/index.vue

@@ -3,8 +3,8 @@
 * @version: 1.3
 * @Author: sakuya
 * @Date: 2023å¹´2月9日12:32:26
 * @LastEditors: sakuya
 * @LastEditTime: 2023å¹´2月17日10:41:47
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-17 22:09:27
-->

<template>
@@ -12,112 +12,146 @@
        <el-table :data="data" ref="table" border stripe>
            <el-table-column type="index" width="50" fixed="left">
                <template #header>
                    <el-button v-if="!hideAdd" type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd"></el-button>
                    <el-button v-if="!hideAdd" type="primary" icon="el-icon-plus" size="small" circle
                        @click="rowAdd"></el-button>
                </template>
                <template #default="scope">
                    <div :class="['sc-form-table-handle', {'sc-form-table-handle-delete':!hideDelete}]">
                        <span>{{scope.$index + 1}}</span>
                        <el-button v-if="!hideDelete" type="danger" icon="el-icon-delete" size="small" plain circle @click="rowDel(scope.row, scope.$index)"></el-button>
                    <div :class="['sc-form-table-handle', { 'sc-form-table-handle-delete': !hideDelete }]">
                        <span>{{ scope.$index + 1 }}</span>
                        <el-popconfirm v-if="!scope.row.isSet" title="确定删除吗？"
                            @confirm="rowDel(scope.row, scope.$index)">
                            <template #reference>
                                <el-button v-if="!hideDelete" type="danger" icon="el-icon-delete" size="small" plain
                                    circle></el-button>
                                <!-- <el-button text type="primary" size="small">删除</el-button> -->
                            </template>
                        </el-popconfirm>

                    </div>
                </template>
            </el-table-column>
            <el-table-column label="" width="50" v-if="dragSort">
                <template #default>
                    <div class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></div>
                    <div class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;" /></div>
                </template>
            </el-table-column>
            <slot></slot>
            <template #empty>
                {{placeholder}}
                {{ placeholder }}
            </template>
        </el-table>
    </div>
</template>

<script>
    import Sortable from 'sortablejs'
import Sortable from 'sortablejs'

    export default {
        props: {
            modelValue: { type: Array, default: () => [] },
            addTemplate: { type: Object, default: () => {} },
            placeholder: { type: String, default: "暂无数据" },
            dragSort: { type: Boolean, default: false },
            hideAdd: { type: Boolean, default: false },
            hideDelete: { type: Boolean, default: false }
        },
        data(){
            return {
                data: []
            }
        },
        mounted(){
export default {
    props: {
        modelValue: { type: Array, default: () => [] },
        addTemplate: { type: Object, default: () => { } },
        placeholder: { type: String, default: "暂无数据" },
        dragSort: { type: Boolean, default: false },
        hideAdd: { type: Boolean, default: false },
        hideDelete: { type: Boolean, default: false }
    },
    data() {
        return {
            data: []
        }
    },
    mounted() {
        this.data = this.modelValue
        if (this.dragSort) {
            this.rowDrop()
        }
    },
    watch: {
        modelValue() {
            this.data = this.modelValue
            if(this.dragSort){
                this.rowDrop()
            }
        },
        watch:{
            modelValue(){
                this.data = this.modelValue
        data: {
            handler() {
                this.$emit('update:modelValue', this.data);
            },
            data: {
                handler(){
                    this.$emit('update:modelValue', this.data);
                },
                deep: true
            }
        },
        methods: {
            rowDrop(){
                const _this = this
                const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
                Sortable.create(tbody, {
                    handle: ".move",
                    animation: 300,
                    ghostClass: "ghost",
                    onEnd({ newIndex, oldIndex }) {
                        _this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0])
                        const newArray = _this.data.slice(0)
                        const tmpHeight = _this.$refs.scFormTable.offsetHeight
                        _this.$refs.scFormTable.style.setProperty('height', tmpHeight + 'px')
                        _this.data = []
                        _this.$nextTick(() => {
                            _this.data = newArray
                            _this.$nextTick(() => {
                                _this.$refs.scFormTable.style.removeProperty('height')
                            })
            deep: true
        }
    },
    methods: {
        rowDrop() {
            const _this = this
            const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
            Sortable.create(tbody, {
                handle: ".move",
                animation: 300,
                ghostClass: "ghost",
                onEnd({ newIndex, oldIndex }) {

                    _this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0])
                    const newArray = _this.data.slice(0)
                    const tmpHeight = _this.$refs.scFormTable.offsetHeight
                    _this.$refs.scFormTable.style.setProperty('height', tmpHeight + 'px')
                    _this.data = []
                    _this.$nextTick(() => {
                        _this.data = newArray
                        _this.$nextTick(() => {
                            _this.$emit('rowDrop', newArray)
                            _this.$refs.scFormTable.style.removeProperty('height')
                        })
                    }
                })
            },
            rowAdd(){
                const temp = JSON.parse(JSON.stringify(this.addTemplate))
                this.data.push(temp)
            },
            rowDel(row, index){
                this.data.splice(index, 1)
            },
            //插入行
            pushRow(row){
                const temp = row || JSON.parse(JSON.stringify(this.addTemplate))
                this.data.push(temp)
            },
            //根据index删除
            deleteRow(index){
                this.data.splice(index, 1)
            }

                    })
                }
            })
        },
        rowAdd() {
            const temp = JSON.parse(JSON.stringify(this.addTemplate))
            this.data.push(temp)
        },
        rowDel(row, index) {
            this.$emit('delRow', row)
            this.data.splice(index, 1)
        },
        //插入行
        pushRow(row) {
            const temp = row || JSON.parse(JSON.stringify(this.addTemplate))
            this.data.push(temp)
        },
        //根据index删除
        deleteRow(index) {
            this.data.splice(index, 1)
        }
    }
}
</script>

<style scoped>
    .sc-form-table {width: 100%;}
    .sc-form-table .sc-form-table-handle {text-align: center;}
    .sc-form-table .sc-form-table-handle span {display: inline-block;}
    .sc-form-table .sc-form-table-handle button {display: none;}
    .sc-form-table .hover-row .sc-form-table-handle-delete span {display: none;}
    .sc-form-table .hover-row .sc-form-table-handle-delete button {display: inline-block;}
    .sc-form-table .move {text-align: center;font-size: 14px;margin-top: 3px;}
.sc-form-table {
    width: 100%;
}

.sc-form-table .sc-form-table-handle {
    text-align: center;
}

.sc-form-table .sc-form-table-handle span {
    display: inline-block;
}

.sc-form-table .sc-form-table-handle button {
    display: none;
}

.sc-form-table .hover-row .sc-form-table-handle-delete span {
    display: none;
}

.sc-form-table .hover-row .sc-form-table-handle-delete button {
    display: inline-block;
}

.sc-form-table .move {
    text-align: center;
    font-size: 14px;
    margin-top: 3px;
}
</style>

 src/views/mdc/configComp/Board.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-15 23:58:36
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-17 00:38:24
 * @LastEditTime: 2024-04-17 00:45:20
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/configComp/Board.vue
-->
<template>
@@ -111,7 +111,6 @@
    },
    methods: {
        init() {
            console.log('>>>>>>normalId')
            this.$HTTP.get('/api/blade-system/param-biz/detail?paramKey=mdc_chosen_groups').then(re => {
                this.id = re.data.id
                let chosen = []
@@ -119,12 +118,12 @@
                try {
                    chosen = JSON.parse(re.data.paramValue).map(v => v.groupId)
                    normalId = JSON.parse(re.data.paramValue).find(v => v.isDefault).groupId
                    console.log('>>>>>>normalId', normalId)
                } catch (error) {

                }
                Promise.all([
                    this.$HTTP.get('/api/blade-system/dict/dictionary?code=group_tag').then(res => {
                        this.dicts = []
                        this.dicts.push(...res.data.map(({ dictKey, dictValue }) => ({
                            dictKey, dictValue
                        })))
@@ -203,6 +202,7 @@
                item?.children.forEach(v => {
                    if (groupId == v.groupId) {
                        v.isDefault = true
                        v.isSelect = true
                    } else {
                        v.isDefault = 0
                    }

 src/views/mdc/configComp/Efficiency.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,227 @@
<!--
 * @Date: 2024-04-17 22:17:37
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-17 23:06:48
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/configComp/Efficiency.vue
-->
<template>
    <el-main>
        <el-row>
            <el-col>
                <el-card style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            ç”¨æ—¶åˆ†æžï¼ˆç”¨æ—¶åˆ†å¸ƒï¼‰
                        </div>
                    </template>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次内休息时间
                        </el-col>
                        <el-col :span="4">
                            <el-switch @change="save" :active-value="1" :inactive-value="0"
                                v-model="mdc_open_type.TIME_USED_ANALYSIS" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次对外时间（包括班次内未定义时间）
                        </el-col>
                        <el-col :span="4">
                            <el-switch @change="save(true)" :active-value="1" :inactive-value="0"
                                v-model="mdc_open_shift.TIME_USED_ANALYSIS" />
                        </el-col>
                    </el-row>
                </el-card>
                <el-card style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            æ•ˆçŽ‡åˆ†æž
                        </div>
                    </template>
                    <el-row>
                        <el-col style="font-weight: blod;font-size: 14px">运行率</el-col>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次内休息时间
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_type.RUNNING" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次对外时间（包括班次内未定义时间）
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_shift.RUNNING" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col style="font-weight: blod;font-size: 14px">报警率</el-col>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次内休息时间
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_type.ALARM" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次对外时间（包括班次内未定义时间）
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_shift.ALARM" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col style="font-weight: blod;font-size: 14px">稼动率</el-col>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次内休息时间
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_type.OEE" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次对外时间（包括班次内未定义时间）
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_shift.OEE" />
                        </el-col>
                    </el-row>
                </el-card>
                <el-card style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            äº§é‡ç»Ÿè®¡
                        </div>
                    </template>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次内休息时间
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_type.OUT_PUT" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次对外时间（包括班次内未定义时间）
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_shift.OUT_PUT" />
                        </el-col>
                    </el-row>
                </el-card>
                <el-card style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            æŠ¥è­¦ç»Ÿè®¡
                        </div>
                    </template>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次内休息时间
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_type.ALARM_ANALYSIS" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18" style="display: flex;align-items: center">
                            æŽ’除班次对外时间（包括班次内未定义时间）
                        </el-col>
                        <el-col :span="4">
                            <el-switch :active-value="1" :inactive-value="0" v-model="mdc_open_shift.ALARM_ANALYSIS" />
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
export default {
    data() {
        return {
            mdc_open_typeId: '',
            mdc_open_type: {
                TIME_USED_ANALYSIS: 0,
                RUNNING: 0,
                ALARM: 0,
                OEE: 0,
                OUT_PUT: 0,
                ALARM_ANALYSIS: 0,
            },
            mdc_open_shiftId: '',
            mdc_open_shift: {
                TIME_USED_ANALYSIS: 0,
                RUNNING: 0,
                ALARM: 0,
                OEE: 0,
                OUT_PUT: 0,
                ALARM_ANALYSIS: 0,
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.get('/api/blade-system/param/detail?paramKey=mdc_open_shift').then(res => {
                if (res.code === 200) {
                    this.mdc_open_shiftId = res.data.id
                    JSON.parse(res.data.paramValue).forEach(v => {
                        this.mdc_open_shift[v.type] = v.open
                    })
                }
            })
            this.$HTTP.get('/api/blade-system/param/detail?paramKey=mdc_open_type').then(res => {
                if (res.code === 200) {
                    this.mdc_open_typeId = res.data.id
                    JSON.parse(res.data.paramValue).forEach(v => {
                        this.mdc_open_type[v.type] = v.open
                    })
                }
            })
        },
        save(flag) {
            let data = {

            }
            if (flag) {
                data.paramKey = 'mdc_open_shift'
                data.id = this.mdc_open_shiftId
                let paramValue = Object.keys(this.mdc_open_shift).map(v => {
                    return {
                        type: v,
                        open: this.mdc_open_shift[v]
                    }
                })
                data.paramValue = JSON.stringify(paramValue)
            } else {
                data.paramKey = 'mdc_open_type'
                data.id = this.mdc_open_typeId
                let paramValue = Object.keys(this.mdc_open_type).map(v => {
                    return {
                        type: v,
                        open: this.mdc_open_type[v]
                    }
                })
                data.paramValue = JSON.stringify(paramValue)
            }
            this.$HTTP.post('/api/blade-system/param/submit', data).then(res => {
                if (res.code == 200) {
                    this.$message.success(`操作成功`)
                    this.init()
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped></style>

 src/views/mdc/configComp/Status.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,232 @@
<!--
 * @Date: 2024-04-17 18:53:45
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-17 22:14:18
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/configComp/Status.vue
-->
<template>
    <el-main>
        <el-row>
            <scFormTable ref="table" size="small" v-model="data" stripe hideAdd hideDelete dragSort @rowDrop="save">
                <el-table-column label="工位/机器状态" prop="name"></el-table-column>
                <el-table-column label="编号" prop="code"></el-table-column>
                <el-table-column label="颜色" prop="color"></el-table-column>
                <el-table-column label="颜色" prop="color">
                    <template #default="scope">
                        <el-color-picker v-model="scope.row.color" @change="update(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="绩效时间" prop="rps">
                    <template #default="scope">
                        <el-select v-model="scope.row.rps" style="width: 100%;" @change="update(scope.row)">
                            <el-option v-for="(item, index) in options.rps" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="计划内外" prop="isPlan">
                    <template #default="scope">
                        <el-select v-model="scope.row.isPlan" style="width: 100%;" @change="update(scope.row)">
                            <el-option v-for="(item, index) in options.isPlan" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </scFormTable>
        </el-row>
        <el-row style="margin-top: 20px;">
            <scFormTable ref="table1" v-model="Tabledata" stripe @delRow="remove" :addTemplate="addTemplate" dragSort>
                <el-table-column label="人工反馈状态" prop="name">
                    <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="编号" prop="code">
                    <template #default="scope">
                        <el-input v-show="!scope.row.code" v-model="scope.row.code"></el-input>
                        <span>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="颜色" prop="color"></el-table-column>
                <el-table-column label="颜色" prop="color">
                    <template #default="scope">
                        <el-color-picker v-model="scope.row.color" />
                    </template>
                </el-table-column>
                <el-table-column label="计划内外" prop="state">
                    <template #default="scope">
                        <el-select v-model="scope.row.isPlan" style="width: 200px;">
                            <el-option v-for="(item, index) in options.isPlan" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="state">
                    <template #default="scope">
                        <el-button v-show="scope.row.isNew" @click="add(scope.row)">保存</el-button>
                    </template>
                </el-table-column>
            </scFormTable>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>效率计算公式说明</span>
                        </div>
                    </template>
                    <p>稼动率：计划内状态时长/采集状态总时长</p>
                    <p>根据采集的数据状态划分到相应的绩效时间，通过绩效时间的持续时长，并依照如下公式进行效率计算:</p>

                    <p>运行率：T1 /（T1+T2+T3+T4+T5+T6）</p>
                    <p>报警率：T4 /（T1+T2+T3+T4+T5+T6）</p>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>绩效时间与对应色值说明</span>
                        </div>
                    </template>
                    <p><img style="width: 100%;" src="./configuration.23a90729.png" alt="" srcset=""></p>
                </el-card>
            </el-col>
        </el-row>


    </el-main>
</template>

<script>
export default {
    data() {
        return {
            options: {
                rps: [
                    {
                        label: 'T1',
                        value: 1
                    },
                    {
                        label: 'T2',
                        value: 2
                    },
                    {
                        label: 'T3',
                        value: 3
                    },
                    {
                        label: 'T4',
                        value: 4
                    },
                    {
                        label: 'T5',
                        value: 5
                    },
                    {
                        label: 'T6',
                        value: 6
                    }
                ],
                isPlan: [
                    {
                        label: '计划内',
                        value: 0
                    },
                    {
                        label: '计划外',
                        value: 1
                    },
                ]
            },
            data: [],
            Tabledata: [],
            addTemplate: {
                name: '人工状态',
                code: '',
                color: '#FFFFFF',
                rps: 1,
                isPlan: 0,
                type: 4,
                isNew: true
            }
        }
    },
    watch: {
        data: {
            handler() {

            },
            deep: true
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.$HTTP.get('/api/blade-cps/global_wcs/wcs-achievements').then(res => {
                if (res.code === 200) {
                    this.data = res.data.filter(v => v.type === 1)
                    this.Tabledata = res.data.filter(v => v.type === 4)
                }
            })
        },
        save() {
            this.$HTTP.post('/api/blade-cps/global_wcs/update-wcs-seq', this.data.map(v => v.code)).then(res => {
                if (res.code == 200) {
                    this.$message.success(`操作成功`)
                    this.getList()
                }
            })
        },
        update(row) {
            console.log(row)
            let data = {
                code: row.code,
                color: row.color,
                isPlan: row.isPlan,
                name: row.name,
                rps: row.rps
            }
            this.$HTTP.post('/api/blade-cps/global_wcs/update-wcs-achievements', data).then(res => {
                if (res.code == 200) {
                    this.$message.success(`操作成功`)
                    this.getList()
                }
            })
        },
        add(row) {
            if (!row.code || !row.color || !row.name) {
                return this.$message.warning('状态名称、编号、颜色必填'); (`操作成功`)
            }
            let data = {
                code: row.code,
                color: row.color,
                isPlan: row.isPlan,
                name: row.name,
                rps: row.rps,
                type: 4,
            }
            this.$HTTP.post('/api/blade-cps/global_wcs/add-wcs-achievements', data).then(res => {
                if (res.code == 200) {
                    this.$message.success(`操作成功`)
                    this.getList()
                }
            })
        },
        remove(row) {
            this.$HTTP.delete(`/api/blade-cps/global_wcs/delete-wcs-achievements/${row.code}`).then(res => {
                if (res.code == 200) {
                    this.$message.success(`操作成功`)
                    this.getList()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>

 src/views/mdc/configuration.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-16 00:00:46
 * @LastEditTime: 2024-04-17 23:35:22
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/configuration.vue
 * åº”用设置
-->
@@ -13,13 +13,43 @@
                    <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.rps" :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="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>
@@ -28,15 +58,52 @@

<script>
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 {
            radio: ''
            Tabledata: [],
            addTemplate: {
                collectType: '',
                dataTypeDesc: '',
                id: null,
                parameter: {
                    value: 0
                },
                usageCode: '',
                usageName: '',
                isEdit: false,
            }
        }
    },
    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
                }
            })
        },
        edit(row) {
            row.isEdit = true
        },
        add(row) {
            // /api/blade-cps/workstation-wcs-usage
            // collectType
            // usageCode
            // usageName

        }
    }
}
</script>


 src/views/setting/task/logs.vue

@@ -9,12 +9,13 @@

<template>
    <el-container>
        <el-main  style="padding:0 20px;">
        <el-main style="padding:0 20px;">
            <scTable ref="table" :data="data" stripe>
                <el-table-column label="执行时间" prop="time" width="200"></el-table-column>
                <el-table-column label="执行结果" prop="state" width="100">
                    <template #default="scope">
                        <span v-if="scope.row.state==200" style="color: #67C23A;"><el-icon><el-icon-success-filled /></el-icon></span>
                        <span v-if="scope.row.state == 200"
                            style="color: #67C23A;"><el-icon><el-icon-success-filled /></el-icon></span>
                        <span v-else style="color: #F56C6C;"><el-icon><el-icon-circle-close-filled /></el-icon></span>
                    </template>
                </el-table-column>
@@ -28,18 +29,20 @@
    </el-container>

    <el-drawer title="日志" v-model="logsVisible" :size="500" direction="rtl" destroy-on-close>
        <el-main  style="padding:0 20px 20px 20px;">
            <pre style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">{{demoLog}}</pre>
        <el-main style="padding:0 20px 20px 20px;">
            <pre
                style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">
            {{ demoLog }}</pre>
        </el-main>
    </el-drawer>
</template>

<script>
    export default {
        data() {
            return {
                logsVisible: false,
                demoLog: `2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[124]-[Thread-308]
export default {
    data() {
        return {
            logsVisible: false,
            demoLog: `2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[124]-[Thread-308]
----------- xxl-job job execute start -----------
----------- Param:
2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[31]-[Thread-308] aqshMasterDataSendHandler start
@@ -54,55 +57,54 @@
----------- xxl-job job callback finish.

[Load Log Finish]`,
                data: [
                    {
                        time: "2021-07-07 00:00:00",
                        state: "500",
                        logs: ""
                    },
                    {
                        time: "2021-07-06 00:00:00",
                        state: "200",
                        logs: ""
                    },
                    {
                        time: "2021-07-05 00:00:00",
                        state: "200",
                        logs: ""
                    },
                    {
                        time: "2021-07-04 00:00:00",
                        state: "200",
                        logs: ""
                    },
                    {
                        time: "2021-07-03 00:00:00",
                        state: "200",
                        logs: ""
                    },
                    {
                        time: "2021-07-02 00:00:00",
                        state: "200",
                        logs: ""
                    },
                    {
                        time: "2021-07-01 00:00:00",
                        state: "200",
                        logs: ""
                    }
                ]
            }
        },
        mounted() {
            data: [
                {
                    time: "2021-07-07 00:00:00",
                    state: "500",
                    logs: ""
                },
                {
                    time: "2021-07-06 00:00:00",
                    state: "200",
                    logs: ""
                },
                {
                    time: "2021-07-05 00:00:00",
                    state: "200",
                    logs: ""
                },
                {
                    time: "2021-07-04 00:00:00",
                    state: "200",
                    logs: ""
                },
                {
                    time: "2021-07-03 00:00:00",
                    state: "200",
                    logs: ""
                },
                {
                    time: "2021-07-02 00:00:00",
                    state: "200",
                    logs: ""
                },
                {
                    time: "2021-07-01 00:00:00",
                    state: "200",
                    logs: ""
                }
            ]
        }
    },
    mounted() {

        },
        methods: {
            show(){
                this.logsVisible = true;
            }
    },
    methods: {
        show() {
            this.logsVisible = true;
        }
    }
}
</script>

<style>
</style>
<style></style>