1

李喆(开发组)

2025-03-10 6a5601d66119d7d47685264f61c4d529b30e72e4

1

 src/config/route.js

@@ -1,8 +1,8 @@
/*
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-05-24 11:25:26
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-10-09 09:58:40
 * @LastEditors: æŽå–†(开发组) lzhe@yxqiche.com
 * @LastEditTime: 2025-03-10 13:57:44
 * @FilePath: /src/config/route.js
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -132,7 +132,19 @@
            type: 'menu',
            hidden: true
        }
    }
    },
    {
        name: "大屏",
        path: "/mdc/forLargeScreen",
        component: "mdc/forLargeScreen",
        meta: {
            icon: "el-icon-menu",
            title: "大屏",
            type: 'menu',
            hidden: true
        }
    },
    
]

//const routes = []

 src/views/mdc/components/StationLiveSpeed.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-12 20:39:04
 * @LastEditors: æŽå–†(开发组) lzhe@yxqiche.com
 * @LastEditTime: 2025-03-10 13:56:39
 * @FilePath: /cps-web/src/views/mdc/components/StationLiveSpeed.vue
-->
<template>

 src/views/mdc/forLargeScreen.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,112 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: æŽå–†(开发组) lzhe@yxqiche.com
 * @LastEditTime: 2025-03-10 14:06:28
 * @FilePath: /cps-web/src/views/mdc/components/StationLiveSpeed.vue
-->
<template>
    <div class="speed">
        <div ref="c" style="width: 30%;height:200px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            speedChartName: '主轴负载',
            isspeed: false,
            input: '',
            option: {
                graphic: {
                    type: 'text',
                    enterFrom: {
                        style: { opacity: 0 }// æ·¡å…¥
                    },
                    enterAnimation: {
                        duration: 1300//动画时长
                    },
                    left: 'center',
                    top: 'bottom',
                    style: {
                        textAlign: 'center',
                        textVerticalAlign: 'middle',
                        fontSize: 12,
                        fontWeight: 'bold',
                        fill: '#333' // æ–‡å­—颜色
                    }
                },
                series: [
                    {
                        type: 'gauge',
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [
                                    [0.3, '#67e0e3'],
                                    [0.7, '#37a2da'],
                                    [1, '#fd666d']
                                ]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {  //刻度
                            splitNumber: 5,
                            distance: -10,  //刻度与轴线的距离
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: -14,  //刻度距离表盘的距离
                            length: 10,
                            lineStyle: {
                                color: '#fff',
                                width: 2  //每个锯齿线宽
                            }
                        },
                        axisLabel: {  //表盘内刻度
                            color: 'inherit',
                            distance: 20,  //刻度距离表盘的距离
                            fontSize: 12
                        },
                        detail: {
                            show: false
                        }
                    }
                ]
            }
        }
    },
    methods: {
        showCharts(a, b, c) {
            var myChartA = echarts.init(this.$refs.c);
            var optionA = JSON.parse(JSON.stringify(this.option));
            optionA.graphic.style.text = [this.speedChartName + a + '%',].join('\n');
            optionA.series[0].data = [{ value: a }];
            myChartA.setOption(optionA);
        }
    },
    mounted() {
        this.showCharts(0, 0, 0);  //调用，三个参数，0-100之间，只传第一个就行
    }
}
</script>

<style scoped>
.speed {
    display: flex;
    justify-content: center;
}

.speed>div {
    flex: 1;
}

</style>