1

lzhe

2024-06-21 09d6b450139b5e77e09cd73a789b395fb88e9432

1

 src/views/home/widgets/components/mdcEquipmentRun.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,315 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-21 01:45:18
 * @FilePath: /CPSnew/smart-web/src/views/home/widgets/components/mdcDeviceStatus.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-card shadow="hover" header="设备稼动率排名" style="height: 100%;" class="running">
        <div class="running-icon">
            <el-icon><RefreshLeft /></el-icon>
            <el-icon @click="showSearch"><Filter /></el-icon>
        </div>
        <div class="no-list">{{oeeTitle}}</div>
        <div :id="'equipment'" style="height:160px;"></div>

        <div class="advance-box" v-show="isSearch">
            <div class="advance-header">筛选
                <el-icon @click="isSearch = false"><Close /></el-icon>
            </div>
            <div class="advance-content">
                <div>
                    <div>
                        <div class="advance-title">选择工位</div>
                        <el-tree-select
                            multiple
                            show-checkbox
                            default-expand-all
                            size="small"
                            @change = "parentIdChange"
                            v-model="search.workStationIdList"
                            clearable
                            node-key="id"
                            placeholder="上级菜单"
                            ref="parentTree"
                            :data="parentData"
                            :props="{ label: 'title' }"
                            style="width:80%;"
                            :render-after-expand="false" />
                    </div>
                    <div>
                        <div class="advance-title">选择需要排名的时间</div>
                        <el-select v-model="search.timeLevel" size="small" style="width:80%;">
                            <template #prefix><span style="margin-right: 6px;color: #409eff;">近N小时</span></template>
                            <el-option v-for="item in timeLevelList" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </div>
                    <div>
                        <div class="advance-title">选择设备排名</div>
                        <el-select v-model="search.top" size="small" style="width:80%;">
                            <template #prefix><span style="margin-right: 6px;color: #409eff;" placeholder="所有">设备TOP</span></template>
                            <el-option v-for="item in topList" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </div>
                </div>
            </div>
            <div style="width: 100%;text-align: right;margin-right: 12px;margin-top: 12px;">
                <el-button type="primary" @click="serchSubmit">筛选</el-button>
            </div>
        </div>
    </el-card>

</template>

<script>
    import * as echarts from 'echarts';
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        title: "设备稼动率排名",
        icon: "el-icon-data-line",
        description: "快速查看设备稼动率",
        data() {
            return {
                oeeTitle: "",
                parentData: {},
                list: [],
                timeLevelList: [],
                topList: [],
                search: {
                    workStationIdList: [],
                    timeLevel: "",
                    top: ""
                },
                isSearch: false,
                timeLevel: "",
                top: "",
                apiResource: {
                    workStationIdList: []
                },
                cardData: {},
                option: {  
                    grid: {
                        top: '0',
                        bottom: '0',
                        containLabel: true
                    },
                    yAxis: {  
                        type: 'category',  
                        data: [],  
                        axisLine: {  
                            show: false // éšè—y轴轴线  
                        },  
                        axisTick: {  
                            show: false // éšè—y轴刻度线  
                        },
                        splitLine: {  
                            show: false // éšè—y轴网格线  
                        }
                    },  
                    xAxis: {  
                        type: 'value',  
                        axisLabel: {  
                        show: false // éšè—x轴数据标签  
                        }  
                    },  
                    series: [  
                        {  
                        data: [3.96, 3.95, 3.93, 3.91, 3.91, 3.9, 3.85],  
                        type: 'bar',  
                        label: {  
                            show: true, // æ˜¾ç¤ºæ ‡ç­¾  
                            position: 'right', // æ ‡ç­¾ä½ç½®è®¾ç½®ä¸ºæŸ±å­çš„右侧  
                            formatter: function(params) {  
                            // è¿”回数据值和您想要添加的字符串的组合  
                            return params.value + '%'; // ä¾‹å¦‚，返回 '3.96 æ–‡å­—'  
                            }  
                        }  
                        }  
                    ]  
                    },
            }
        },
        components: {...ElementPlusIconsVue},
        mounted() {
            this.getParentData();
            var arr = [];
            for(var i=1;i<=30;i++) {
                this.timeLevelList.push({value:i,label:i});
                this.topList.push({value:i,label:i});
            }
        },
        methods: {
            showSearch() {
                this.search.timeLevel = this.timeLevel;
                this.search.top = this.top;
                this.isSearch = true;
            },
            serchSubmit() {
                this.apiResource = this.search;
                this.getRunData();
            },
            setCurrentKey(v) {
                if (this.firstWorkKey) return
                if (v.isWorkstation) {
                    this.firstWorkKey = v.id
                }
            },
            formatData(data, current) {
                let newData = []
                if (!current) {
                    newData = data.filter(item => item.parentId == 0).map(v => {
                        //if (!v.isWorkstation) v.disabled = true
                        v.children = this.formatData(data, v).sort((a, b) => {
                            return b.sort - a.sort
                        })
                        this.setCurrentKey(v)
                        return v
                    })
                } else {
                    let res = data.filter(v => v.parentId == current.id)
                    res = res.map(item => {
                        //if (!item.isWorkstation) item.disabled = true
                        item.children = this.formatData(data, item).sort((a, b) => {
                            return b.sort - a.sort
                        })
                        this.setCurrentKey(item)
                        return item
                    })
                    return res
                }
                return newData
            },
            getParentData() {
                this.$HTTP.post('/api/blade-cps/group/groupWorkstation/type', {
                    groupCategory: 1,
                    groupType: "group_workstation"
                }).then(({ code, data }) => {
                    if (code === 200) {
                        this.data = this.formatData(data)
                        this.$nextTick(() => {
                            this.parentData = this.data;
                            this.getList();
                        })
                    }
                })
            },
            parentIdChange(val) {
                // var $parentId = this.$refs.parentTree.getCurrentNode().title;
                // this.formAddMenu.$parentId = $parentId;
            },
            getList() {
                this.cardData = this.$CONFIG.DEFAULT_GRID.data;
                this.cardData.forEach(item=> {
                    if(item.cardKey == "mdcEquipmentRun") {
                        this.getRunData();
                    }
                })
            },
            getRunData() {
                var ids = this.extractLastLevelIds(this.parentData); 
                var obj = {
                    timeLevel: 24,
                    top: 7,
                    workStationIdList: ids
                }
                this.$HTTP.post(`/api/blade-visual/status/oee-top`,obj).then(res=> {
                    if(res.code == 200) {
                        this.isSearch = false;
                        var recordDom = document.getElementById('equipment');
                        if(res.data.categories.length == 0) return;
                        this.option.yAxis.data = res.data.categories;
                        this.option.series[0].data = res.data.series[0].data;
                        this.oeeTitle = res.data.series[0].name;
                        var myChart = echarts.init(recordDom);
                        myChart.setOption(this.option);
                    }
                })
            },
            goPage(item) {
				
            },
            extractLastLevelIds(items, result = []) {  //递归获取children最后一级的id的数组
              items.forEach(item => {  
                // å¦‚果当前项有id属性且没有children或children为空数组  
                if (item.id && (!item.children || item.children.length === 0)) {  
                  result.push(item.id);  
                }  
			  
                // å¦‚果当前项有children属性且是数组，则递归调用collectIds  
                if (Array.isArray(item.children)) {  
                  this.extractLastLevelIds(item.children, result);  
                }  
              });  
			  
              // è¿”回收集到的id数组  
              return result;  
            },
        },
    }
</script>
<style scoped>
    .running /deep/ .el-card__body {
        padding: 12px 12px 12px;
    }
    .running {
        position: relative;
    }
    .running-icon {
        position: absolute;
        right: 0;
        top: 15px;
    }
    .running-icon i {
        font-size: 16px;
        cursor: pointer;
        margin-right: 15px;
    }
    .no-list {
        display: flex;
        justify-content: center;
        font-weight: 500;
        font-size: 14px;
        color: #666;
        align-items: center;
    }
    .advance-box{
        width: 330px;
        height: 100%;
        padding: 15px 16px;
        border-radius: 2px;
        box-sizing: border-box;
        border: 1px solid #ebeef5;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #fff;
    }
    .advance-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 16px;
        color: #333;
    }
    .advance-header i {
        cursor: pointer;
    }
    .advance-content {
        height: calc(100% - 54px);
        overflow: auto;
    }
    .advance-title {
        margin: 20px 0 12px;
        font-weight: 400;
        font-size: 14px;
        color: #666;
    }
</style>

 src/views/home/widgets/components/mdcRunning.vue

@@ -10,7 +10,7 @@
    <el-card shadow="hover" header="设备运行时长排名" style="height: 100%;" class="running">
        <div class="running-icon">
            <el-icon><RefreshLeft /></el-icon>
            <el-icon @click="isSearch = true"><Filter /></el-icon>
            <el-icon @click="showSearch"><Filter /></el-icon>
        </div>
        <div class="no-list">设备运行时长{{timeLevel}}小时内前{{top}}名</div>
        <div :id="'running'" style="height:160px;"></div>
@@ -145,8 +145,14 @@
            }
        },
        methods: {
            showSearch() {
                this.search.timeLevel = this.timeLevel;
                this.search.top = this.top;
                this.isSearch = true;
            },
            serchSubmit() {

                this.apiResource = this.search;
                this.getRunData();
            },
            setCurrentKey(v) {
                if (this.firstWorkKey) return
@@ -212,6 +218,7 @@
            getRunData() {
                this.$HTTP.post(`/api/blade-visual/status/running-top`,this.apiResource).then(res=> {
                    if(res.code == 200) {
                        this.isSearch = false;
                        var recordDom = document.getElementById('running');
                        if(res.data.categories.length == 0) return;
                        this.option.yAxis.data = res.data.categories;

 src/views/home/widgets/index.vue

@@ -111,6 +111,7 @@
            this.getWorkbenchCarList();
        },
        mounted() {
            console.log(this.allComps,this.element,this.grid.layout)
            this.$emit('on-mounted')
        },
        computed: {