1

lzhe

2024-11-12 ce2904335f4a1bc1e538c194bdd3ced484b672f5

1

 src/views/mdc/components/StationLiveSpeed.vue

@@ -1,24 +1,26 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-12 20:34:19
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
 * @LastEditTime: 2024-11-12 20:39:04
 * @FilePath: /cps-web/src/views/mdc/components/StationLiveSpeed.vue
-->
<template>
    <div class="speed" v-if="isspeed">
        <div id="c" style="width: 30%;height:200px;"></div>
        <div id="d" style="width: 30%;height:200px;"></div>
        <div id="e" style="width: 30%;height:200px;"></div>
    <div class="speed">
        <div ref="c" style="width: 30%;height:200px;"></div>
        <div ref="d" style="width: 30%;height:200px;"></div>
        <div ref="e" style="width: 30%;height:200px;"></div>
    </div>
    <div class="dataHr">加工数据</div>
    <el-row :gutter="20" style="padding-right: 12px;padding-left: 12px;">
        <!-- 主轴负载(SpindleLoad),主轴倍率(SpindleRate),进给倍率(FeedRate) 不在这里展示 -->
        <el-col :span="12" v-for="item in dmpList" style="margin-bottom: 12px;" v-show="item.dpName != 'SpindleLoad' && item.dpName != 'SpindleRate' && item.dpName != 'FeedRate'">
        <el-col :span="12" v-for="item in dmpList" style="margin-bottom: 12px;"
            v-show="item.dpName != 'SpindleLoad' && item.dpName != 'SpindleRate' && item.dpName != 'FeedRate'">
            <div>
                <div class="inlineDiv">{{item.dpLabel}}</div>
                <el-input v-model="item.codeName" :disabled="true" class="inlineInput" :title="item.codeName"></el-input>
                <div class="inlineDiv">{{ item.dpLabel }}</div>
                <el-input v-model="item.codeName" :disabled="true" class="inlineInput"
                    :title="item.codeName"></el-input>
            </div>
            

        </el-col>
    </el-row>
</template>
@@ -38,7 +40,7 @@
        }
    },
    components: {
        

    },
    data() {
        return {
@@ -51,7 +53,7 @@
                        style: { opacity: 0 }// 淡入
                    },
                    enterAnimation: {
                    duration: 1300//动画时长
                        duration: 1300//动画时长
                    },
                    left: 'center',
                    top: 'bottom',
@@ -81,7 +83,7 @@
                        },
                        pointer: {
                            itemStyle: {
                            color: 'auto'
                                color: 'auto'
                            }
                        },
                        axisTick: {  //刻度
@@ -96,8 +98,8 @@
                            distance: -14,  //刻度距离表盘的距离
                            length: 10,
                            lineStyle: {
                            color: '#fff',
                            width: 2  //每个锯齿线宽
                                color: '#fff',
                                width: 2  //每个锯齿线宽
                            }
                        },
                        axisLabel: {  //表盘内刻度
@@ -110,7 +112,7 @@
                        }
                    }
                ]
                }
            }
        }
    },
    methods: {
@@ -128,30 +130,26 @@
            // })
            // this.showCharts(a,b,c);
        },
        showCharts(a,b,c) {
            var myChartA = echarts.init(document.getElementById('c'));
            var myChartB = echarts.init(document.getElementById('d'));
            var myChartC = echarts.init(document.getElementById('e'));
        showCharts(a, b, c) {
            var myChartA = echarts.init(this.$refs.c);
            var myChartB = echarts.init(this.$refs.d);
            var myChartC = echarts.init(this.$refs.e);
            var optionA = JSON.parse(JSON.stringify(this.option));
            var optionB = JSON.parse(JSON.stringify(this.option));
            var optionC = JSON.parse(JSON.stringify(this.option));
            optionA.graphic.style.text= ['主轴负载'+a+'%',].join('\n');
            optionB.graphic.style.text= ['主轴倍率'+b+'%',].join('\n');
            optionC.graphic.style.text= ['给进倍率'+c+'%',].join('\n');
            optionA.series[0].data = [{value: a}];
            optionB.series[0].data = [{value: b}];
            optionC.series[0].data = [{value: c}];
            optionA.graphic.style.text = ['主轴负载' + a + '%',].join('\n');
            optionB.graphic.style.text = ['主轴倍率' + b + '%',].join('\n');
            optionC.graphic.style.text = ['给进倍率' + c + '%',].join('\n');
            optionA.series[0].data = [{ value: a }];
            optionB.series[0].data = [{ value: b }];
            optionC.series[0].data = [{ value: c }];
            myChartA.setOption(optionA);
            myChartB.setOption(optionB);
            myChartC.setOption(optionC);
        }
    },
    mounted() {
        this.isspeed = true;
        this.$nextTick(()=> {
            this.showCharts(0,0,0);
        })
        
        this.showCharts(0, 0, 0);
    }
}
</script>
@@ -161,9 +159,11 @@
    display: flex;
    justify-content: center;
}
.speed > div {

.speed>div {
    flex: 1;
}

.dataHr {
    background-color: #48ACF8;
    height: 30px;
@@ -176,11 +176,13 @@
    margin-top: 12px;
    margin-bottom: 12px;
}

.inlineDiv {
    display: inline-block;
    width: 70px;
    text-align: left;
}

.inlineInput {
    width: calc(100% - 76px);
    margin-left: 6px;