1

lzhe

2024-04-18 c8b13a66194137b0ab2e3bed0ade70ebc167fcb9

1

 src/views/mdc/station-live.vue

@@ -16,20 +16,20 @@
            <div class="content-machine-box">
                <div class="content-machine-img"><img src="./station.png" alt=""></div>
                <div class="content-machine-detail">
                    <div class="content-machine-name">461</div>
                    <div class="content-machine-name">{{stationForm.machineName}}</div>
                    <el-form :model="stationForm" ref="dialogForm" label-width="80px" label-position="center" style="width: 100%;">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="工位编号">{{stationForm.test}}</el-form-item>
                                <el-form-item label="工位编号">{{stationForm.code}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="机器品牌">{{stationForm.test}}</el-form-item>
                                <el-form-item label="机器品牌">{{stationForm.machineBrand}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="机器编号">{{stationForm.test}}</el-form-item>
                                <el-form-item label="机器编号">{{stationForm.machineCode}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="机器名称">{{stationForm.test}}</el-form-item>
                                <el-form-item label="机器名称">{{stationForm.machineName}}</el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
@@ -37,24 +37,77 @@
            </div>
            <div class="collect-info-panel">
                <div class="fact-analysis-realtim">
                    <div class="fact-analysis-card">
                        <div class="card-name" style="background-color: rgb(127, 192, 192);">设备状态</div>
                    <div class="fact-analysis-card" v-for="item in dmpList">
                        <div class="card-name" style="background-color: rgb(127, 192, 192);">{{item.description}}</div>
                        <div class="card-value" style="background-color: rgba(127, 192, 192, 0.14);"></div>
                    </div>
                </div>
            </div>
            <el-tabs type="border-card" class="demo-tabs">
                <el-tab-pane label="工位数据">
                    <div class="wcs-main">
                        <div><div id="wcs-left" style="width: 100%;height:400px;"></div></div>
                        <div><div id="wcs-right" style="width: 100%;height:400px;"></div></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="机器履历">234</el-tab-pane>
             </el-tabs>
        </div>
    </div>
    <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import * as echarts from 'echarts';
import saveDialog from './add-station-status'
    export default {
        name: "state-feedback",
        data(){
            return {
                wcsOption: {  
                    title: {  
                        text: '用时分布情况',   
                        left: 'left',
                        textStyle: {
                            fontSize:14
                        }
                    },  
                    grid: {
                        top: 0,
                    },
                    tooltip: {  
                        trigger: 'item',  
                        //formatter: '{a} <br/>{b} : {c} ({d}%)'  
                        formatter: '{a} 0分钟'
                    },  
                    legend: {  
                        orient: 'vertical',  
                        bottom: 'bottom',  
                        data: ['调试', '离线', '待机', '报告', '报警', '运行']  
                    },  
                    series: [  
                        {  
                            top: -30,
                            name: '用时:',  
                            type: 'pie',  
                            radius: '55%',  
                            center: ['30%', '50%'],  
                            data: [],  
                            emphasis: {  
                                itemStyle: {  
                                    shadowBlur: 10,  
                                    shadowOffsetX: 0,  
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                                }  
                            }  
                        }  
                    ]  
                },
                dmpList: [],
                stationForm: {
                    test: ""
                    code: "",
                    machineBrand: "",
                    machineCode: "",
                    machineName: ""
                },
                dialog: {
                    save: false
@@ -86,11 +139,100 @@
        },
        mounted(){
            this.getTreeList();
            this.getwcsL();  //左侧图表
        },
        components: {
            saveDialog
        },
        methods: {
            getwcsL() {
                this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> {
                    if(res.code == 200) {
                        var myChart = echarts.init(document.getElementById('wcs-left')); 
                        res.data.forEach(item=> {
                            item.value=20;
                            item.itemStyle = {color: item.color}
                        })
                        this.wcsOption.series[0].data = res.data;
                        myChart.setOption(this.wcsOption);
                        console.log(this.wcsOption,9991);
                    }
                })
            },
            getwcsR() {
                var obj = {
                    date: String(this.newDate()),
                    humanFeedback: true,
                    workstationId: this.lastLevelId
                }
                this.$HTTP.post(`/api/blade-mdc/status-record/equipment-efficiency`,obj).then(res=> {
                    if(res.code == 200) {
                        console.log(res.data,98988)
                        var myChart = echarts.init(document.getElementById('wcs-right')); 
                        // res.data.forEach(item=> {
                        //     item.value=20;
                        //     item.itemStyle = {color: item.color}
                        // })
                        // this.wcsOption.series[0].data = res.data;
                        // myChart.setOption(this.wcsOption);
                        // console.log(this.wcsOption,9991);
                        var option = {
                            title: {  
                                text: '设备效率指标', // 图表标题  
                                left: 'left',
                                textStyle: {
                                    fontSize:14
                                }
                            },
                          tooltip: {
                            trigger: 'item'
                          },
                          legend: {
                            orient: 'vertical',
                            bottom: 'bottom', // 图例组件离容器左侧的距离
                            data: ['报警率', '稼动率', '运行率'] // 图例数据  
                          },
                          series: [
                            {
                              name: 'Access From',
                              type: 'pie',
                              radius: ['30%', '50%'],
                              avoidLabelOverlap: false,
                              label: {
                                show: false,
                                position: 'center'
                              },
                              emphasis: {
                                label: {
                                  show: true,
                                  fontSize: 40,
                                  fontWeight: 'bold'
                                }
                              },
                              labelLine: {
                                show: false
                              },
                              data: [
                                {value: 0, name: '报警率'}, // 报警率数据  
                                {value: 0, name: '稼动率'}, // 稼动率数据  
                                {value: 0, name: '运行率'}
                              ]
                            }
                          ]
                        };  
						  
                        // 使用刚指定的配置项和数据显示图表。  
                        myChart.setOption(option);
                    }
                })
            },
            newDate() {
                var date = new Date();  
                var year = date.getFullYear();  
                var month = (1 + date.getMonth()).toString().padStart(2, '0'); // JavaScript中月份是从0开始的，所以我们需要加1  
                var day = date.getDate().toString().padStart(2, '0'); // getDate()返回的是当前月的日数，不需要加1  
                return year + '-' + month + '-' + day;
            },
            addfeedbackSuccess() {
                this.getlist();
            },
@@ -100,24 +242,20 @@
            handleNodeClick(data) {
                if(data.code) {
                    this.lastLevelId = data.id;
                    var obj = {
                        workstationId: this.lastLevelId,
                    }
                    if(this.searchData.feedBackStatus.length != 0) {
                        obj.feedBackStatus = this.searchData.feedBackStatus;
                    }
                    if(this.searchData.endDate) {
                        obj.endDate = this.searchData.endDate;
                    }
                    if(this.searchData.startDate) {
                        obj.startDate = this.searchData.startDate;
                    }
                    this.$HTTP.post("/api/blade-cps/workstation-wcs-feedback/page?current=1&size=15",obj).then(res=> {
                    this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
                        if(res.code == 200) {
                            this.searchDataList = res.data.records;
                            this.stationForm = res.data;
                            this.getdmp(this.lastLevelId,this.stationForm.machineId);
                        }
                    })
                }
            },
            getdmp(lastLevelId,machineId) {
                this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
                    if(res.code == 200) {
                        this.dmpList = res.data;
                    }
                })
            },
            getLastLevelIds(tree) {  
                if (tree.length === 0) return ""; // 如果没有根节点，返回空 
@@ -187,7 +325,9 @@
                            this.$nextTick(()=> {
                                this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                                this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                                //以下是初始化数据
                                this.getlist();  //渲染反馈列表
                                this.getwcsR();  //右侧图标
                            })
                            
                        }
@@ -197,7 +337,8 @@
            getlist() {
                this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
                    if(res.code == 200) {
                        console.log(res.data,234)
                        this.stationForm = res.data;
                        this.getdmp(this.lastLevelId,this.stationForm.machineId);
                    }
                })
            }
@@ -296,4 +437,10 @@
    overflow: hidden;
    word-break: break-all;
}
.wcs-main {
    display: flex;
}
.wcs-main > div {
    width: 50%;
}
</style>