1

lzhe

2024-11-10 64a2f963b8811331676d8752689a8b9462763d4f

1

 src/utils/tool.js

@@ -2,7 +2,7 @@
 * @Descripttion: å·¥å…·é›†
 * @version: 1.2
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-01 14:57:42
 * @LastEditTime: 2024-11-10 18:49:52
 */

import CryptoJS from 'crypto-js';
@@ -18,7 +18,7 @@

console.log(hostname,port,pathname)
if (process.env.NODE_ENV=='development') {
    //var path = "120.46.212.231:85";  //如果是本地联调，写成120.46.212.231:85，发版写成hostname+":"+port;
    //var path = "120.46.212.231:86";  //如果是本地联调，写成120.46.212.231:86，发版写成hostname+":"+port;
    var path = hostname+":"+port;
} else {
    var path = hostname+":"+port;

 src/views/mdc/components/StationLiveItem.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,133 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-10 13:22:12
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
    <div>
        <div id="pie1" style="width: 100%;height:200px;"></div>
        <div id="pie2" style="width: 100%;height:200px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        getwcsRData: {
            default: [],
            type: Array
        }
    },
    components: {
        
    },
    data() {
        return {
            option: {
                title: {
                    text: '开机运行率',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        // è‡ªå®šä¹‰tooltip内容，如果悬停在“其他”上，则返回空字符串
                        if (params.name === '运行率') {
                            return params.name + ' : ' + ' (' + params.percent + '%)';
                        } else {
                            return '';
                        }
                    }
                },
                graphic: {
                    type: 'text',
                    enterFrom: {
                        style: { opacity: 0 }// æ·¡å…¥
                    },
                    enterAnimation: {
                    duration: 1300//动画时长
                    },
                    left: 'center',
                    top: 'middle',
                    style: {
                        text: [
                            '开机运行率',
                            '88.00%'
                        ].join('\n'),
                        textAlign: 'center',
                        textVerticalAlign: 'middle',
                        fontSize: 12,
                        fontWeight: 'bold',
                        fill: '#44CD96' // æ–‡å­—颜色
                    }
                },
                series: [
                    {
                        radius: ['40%', '65%'],
                        center: ['50%', '50%'],
                        name: '数据来源',
                        type: 'pie',
                        // data: [
                        //     { value: 80, name: '运行率', itemStyle: { color: '#44CD96' } },
                        //     { value: 20, name: '其他', itemStyle: { color: '#ADB0AF' } }
                        // ],
                        label: {  //outside注释
                            show: false,
                            // formatter: function(params) {
                            //   if(params.name == '运行率') {
                            //     return params.name + ':' + params.percent + '%';
                            //   }else {
                            //     return ''
                            //   }
                            // }
                        },
                        emphasis: {  //hover关闭高亮状态
                            disabled: true,
                        }
                    }
                ]
            }
        }
    },
    methods: {
        query() {
            this.getwcsRData.forEach(item=> {
                if(item.name == '运行率') {
                    var option = JSON.parse(JSON.stringify(this.option));
                    option.title.text = "开机运行率";
                    option.graphic.style.text = ['开机运行率',item.value + '%'].join('\n');
                    option.series[0].data = [
                        { value: item.value, name: '运行率', itemStyle: { color: item.itemStyle.color }},
                        { value: (100 - item.value), name: '其他', itemStyle: { color: '#ADB0AF' }}
                    ]
                    var myChartPie1 = echarts.init(document.getElementById('pie1'));
                    myChartPie1.setOption(option);
                }
                if(item.name == '稼动率') {
                    var option = JSON.parse(JSON.stringify(this.option));
                    option.title.text = "稼动率";
                    option.graphic.style.text = ['稼动率',item.value + '%'].join('\n');
                    option.series[0].data = [
                        { value: item.value, name: '稼动率', itemStyle: { color: item.itemStyle.color }},
                        { value: (100 - item.value), name: '其他', itemStyle: { color: '#ADB0AF' }}
                    ]
                    var myChartPie2 = echarts.init(document.getElementById('pie2'));
                    myChartPie2.setOption(option);
                }
            })
        }
    },
    watch: {
        getwcsRData() {
            this.query();
        }
    },
    mounted() {
        
    }
}
</script>

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

 src/views/mdc/components/StationLiveSpeed.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,183 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-10 18:35:10
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
    <div class="speed">
        <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>
    <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;">
            <div v-if="item.dpName != 'SpindleLoad' && item.dpName != 'SpindleRate' && item.dpName != 'FeedRate'">
                <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>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        dmpList: {
            default: [],
            type: Array,
        }
    },
    watch: {
        dmpList() {
            this.query();
        }
    },
    components: {
        
    },
    data() {
        return {
            input: '',
            option: {
                graphic: {
                    type: 'text',
                    enterFrom: {
                        style: { opacity: 0 }// æ·¡å…¥
                    },
                    enterAnimation: {
                    duration: 1300//动画时长
                    },
                    left: 'center',
                    top: 'bottom',
                    style: {
                        text: [
                            '主轴倍率100.00%',
                        ].join('\n'),
                        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: {
        query() {
            if(this.dmpList.length == 0) return;
            var a,b,c;
            this.dmpList.forEach(item=> {
                if(item.dpName == "SpindleLoad") {
                    a = item.codeName;
                }else if(item.dpName == "SpindleRate") {
                    b = item.codeName;
                }else if(item.dpName == "FeedRate") {
                    c = item.codeName;
                }
            })
            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'));
            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}];
            myChartA.setOption(optionA);
            myChartB.setOption(optionB);
            myChartC.setOption(optionC);
        }
    },
    mounted() {
        this.showCharts(0,0,0);
    }
}
</script>

<style scoped>
.speed {
    display: flex;
    justify-content: center;
}
.speed > div {
    flex: 1;
}
.dataHr {
    background-color: #48ACF8;
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 12px;
}
.inlineDiv {
    display: inline-block;
    width: 70px;
    text-align: left;
}
.inlineInput {
    width: calc(100% - 76px);
    margin-left: 6px;
}
</style>

 src/views/mdc/components/speenBaseInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-10 18:34:55
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
    <el-row>
        <el-col :span="24" class="stationFormDataImg"><img :src="stationFormData.avatar" alt=""></el-col>
        <el-col :span="24" class="stationFormData">工位编号: {{stationFormData.code}}</el-col>
        <el-col :span="24" class="stationFormData">机器品牌: {{stationFormData.machineBrand}}</el-col>
        <el-col :span="24" class="stationFormData">机器编号: {{stationFormData.machineCode}}</el-col>
        <el-col :span="24" class="stationFormData">机器名称: {{stationFormData.machineName}}</el-col>
        <el-col :span="24" class="stationFormData">完工件数：{{stationFormData.Output}}</el-col>
        <el-col :span="24" class="stationFormData">机床状态：{{stationFormData.DeviceStatus}}</el-col>
    </el-row>
</template>

<script>
import station from "../station.png";
export default {
    props: {
        stationFormData: {
            default: {},
            type: Object,
        },
        dmpList: {
            default: [],
            type: Array,
        }
    },
    components: {
        
    },
    watch: {
        stationFormData() {
            this.query();
        },
        dmpList() {
            this.setDmpList();
        }
    },
    data() {
        return {
        }
    },
    methods: {
        setDmpList() {
            if(this.dmpList.length == 0) return;
            this.dmpList.forEach(item=> {
                if(item.dpName == "DeviceStatus") {
                    this.stationFormData.DeviceStatus = item.codeName;
                }
                if(item.dpName == "Output") {
                    this.stationFormData.Output = item.codeName;
                }
            })
        },
        query() {
            //console.log(this.stationFormData,1)
        }
    },
    mounted() {
        
    }
}
</script>

<style scoped>
.stationFormData {
    padding-left: 12px;
    line-height: 24px;
    border-bottom: 1px solid #eee;
}
.stationFormDataImg {
    margin-bottom: 12px;
}
.stationFormDataImg img{
    width: 100%;
    height: 150px;
}
</style>

 src/views/mdc/station-live.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-08 18:26:10
 * @LastEditTime: 2024-11-10 18:49:17
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -13,7 +13,42 @@
            <MYTree v-model="treeChecked" @loaded="query"></MYTree>
        </div>
        <div class="aposcope-right">
            <div class="content-machine-box">
            <div class="content-machine-box" style="min-height: 450px;">
                <div class="content-one content-border">
                    <div style="text-align: center;margin-bottom: 12px;margin-top:12px;">
                        <el-date-picker v-model="wcsDate" type="date" @change="wcschangedate" value-format="YYYY-MM-DD" size="small" />
                    </div>
                    <stationLiveItem :getwcsRData="getwcsRData"></stationLiveItem>
                </div>
                <div class="content-two content-border">
                    <tationLiveSpeed :dmpList="dmpList"></tationLiveSpeed>
                </div>
                <div class="content-three content-border">
                    <speenBaseInfo :stationFormData="stationForm" :dmpList="dmpList"></speenBaseInfo>
                </div>
            </div>
            <div class="dataHr"></div>
            <div class="content-zhou-box">
                <div class="zhou-one content-zhou-border">
                    <div><div id="wcs-left" style="width: 100%;height:300px;"></div></div>
                </div>
                <div class="zhou-two content-zhou-border">
                    <el-table :data="tableData2" style="width: 100%;height:300px;">
                        <el-table-column prop="test" label="è½´"></el-table-column>
                        <el-table-column prop="test" label="坐标"></el-table-column>
                        <el-table-column prop="test" label="扭矩"></el-table-column>
                    </el-table>
                </div>
                <div class="zhou-three content-zhou-border">
                    <el-table :data="alarmtableData" style="width: 100%;height:300px;">
                        <el-table-column prop="alarmCode" label="报警号"></el-table-column>
                        <el-table-column prop="alarmMsg" label="报警内容"></el-table-column>
                        <el-table-column prop="alarmTime" label="报警时间"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div>------------------------------------</div>
            <!-- <div class="content-machine-box">
                <div class="content-machine-img"><img :src="stationForm.avatar" alt=""></div>
                <div class="content-machine-detail">
                    <div class="content-machine-name">{{stationForm.machineName}}</div>
@@ -34,13 +69,10 @@
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="collect-info-panel">
            </div> -->
            <!-- <div class="collect-info-panel">
                <div class="fact-analysis-realtim">
                    <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-if="dmpList.length == 0">
                        <!-- <div class="wimi-empty-img" style="width: 150px; height: 150px;">
                            <img src="./quesheng.bd026700.png" style="height: auto; width: 100%;">
                        </div> -->
                        <div class="empty-description">
                            <div>暂无数据</div>
                        </div>
@@ -51,17 +83,14 @@
                    </div>
                </div>
            </div>
			
            <el-tabs type="border-card" class="demo-tabs">
                <el-tab-pane label="工位数据">
                    <div style="text-align: right;margin-bottom: 14px;">
                        <el-date-picker v-model="wcsDate" type="date" @change="wcschangedate" value-format="YYYY-MM-DD" size="small" />
                    </div>
                    <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="机器履历">
                    <div class="alarm-title">报警信息履历</div>
@@ -81,8 +110,7 @@
                        :total="alarmtotal">
                    </el-pagination>
                </el-tab-pane>
             </el-tabs>

             </el-tabs> -->
             <div class="bottom-panel content-panel">
                <div class="panel-title">班次状态记录</div>
                <div class="panel-content bottom-panel-chart">
@@ -132,10 +160,17 @@
    import * as echarts from 'echarts';
    import saveDialog from './add-station-status';
    import MYTree from './MYTree.vue';
    import stationLiveItem from './components/StationLiveItem';  //饼状图
    import tationLiveSpeed from './components/StationLiveSpeed';  //speed
    import speenBaseInfo from './components/speenBaseInfo';  //speenBaseInfo
    export default {
        name: "state-feedback",
        data(){
            return {
                getwcsRData: [],
                tableData1: [],
                tableData2: [],
                tableData3: [],
                treeChecked: [],
                achievements: [],
                collectionstatus: [],
@@ -151,9 +186,6 @@
                            fontSize:14
                        }
                    },  
                    grid: {
                        top: 0,
                    },
                    tooltip: {  
                        trigger: 'item',  
                        //formatter: '{a} <br/>{b} : {c} ({d}%)'  
@@ -162,15 +194,14 @@
                    legend: {  
                        orient: 'vertical',  
                        bottom: 'bottom',  
                        data: ['调试', '离线', '待机', '报告', '报警', '运行']  
                        data: ['调试', '离线', '待机', '报告', '报警', '运行']
                    },  
                    series: [  
                        {  
                            top: -30,
                        {
                            name: '用时:',  
                            type: 'pie',  
                            radius: '55%',  
                            center: ['40%', '50%'],  
                            center: ['50%', '50%'],  
                            data: [],  
                            itemStyle: {
                                borderRadius: 10,
@@ -296,7 +327,7 @@
            }
        },
        created(){
			
		
        },
        watch: {
            treeChecked() {
@@ -305,9 +336,10 @@
        },
        mounted(){
            this.newDate();  //获取当前日期
            this.getachievements();
        },
        components: {
            saveDialog,MYTree
            saveDialog,MYTree,stationLiveItem,tationLiveSpeed,speenBaseInfo
        },
        methods: {
            table_edit(){
@@ -613,15 +645,16 @@
                }
                this.$HTTP.post(`/api/mdc/status-record/equipment-efficiency`,obj).then(res=> {
                    if(res.code == 200) {
                        var myChart = echarts.init(document.getElementById('wcs-right')); 
                        //var myChart = echarts.init(document.getElementById('wcs-right')); 
                        res.data.forEach(item=> {
                            item.value = (Number(item.value)*100).toFixed(2);
                            if(item.name == "运行率") item.itemStyle = {color: '#73d13d'};
                            if(item.name == "报警率") item.itemStyle = {color: '#ff4d4f'};
                            if(item.name == "稼动率") item.itemStyle = {color: '#40a9ff'};
                        })
                        this.wcsOptionR.series[0].data = res.data;	
                        myChart.setOption(this.wcsOptionR);
                        //this.wcsOptionR.series[0].data = res.data;
                        this.getwcsRData = res.data;  //新图形
                        //myChart.setOption(this.wcsOptionR);
                    }
                })
            },
@@ -664,53 +697,55 @@
                            workstationIdList: this.treeChecked
                        }
                        if(res.data.dpConfig == null || res.data.dpConfig.length == 0) return;  //没值不用循环

                        if(this.$TOOL.socket.websocket == null) {  //没有建立先建立
                            this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN")); 
                        }
                        this.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                        var intervalId123 = setInterval(function () {
                            if (that.$TOOL.socket.websocket.readyState == 1) {
                                clearInterval(intervalId123);
                                that.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                            }
                        }, 500);
                        this.$TOOL.socket.websocket.onmessage = function(event) {  
                            var JSONData = JSON.parse(res.data.dpConfig);
                            var SpindleLoad = JSONData.some(obj => obj.dpName === 'SpindleLoad'); //判断是否有主轴负载(SpindleLoad)；
                            var SpindleRate = JSONData.some(obj => obj.dpName === 'SpindleRate'); //判断是否有主轴倍率(SpindleRate)；
                            var FeedRate = JSONData.some(obj => obj.dpName === 'FeedRate'); //判断是否有进给倍率(FeedRate)；
                            if(!SpindleLoad) JSONData.push({dpName: "SpindleLoad",dpLabel: "主轴负载"});
                            if(!SpindleRate) JSONData.push({dpName: "SpindleRate",dpLabel: "主轴倍率"});
                            if(!FeedRate) JSONData.push({dpName: "FeedRate",dpLabel: "进给倍率"});
                            var eventData = JSON.parse(event.data);
                            if(Object.keys(eventData.data).length == 0) return;
                            JSONData.forEach((item,index)=> {  //第一步把v放到code里
                                if(item.dpName == "DeviceStatus") {  //机器状态
                                    if(eventData.data[item.dpName]) {
                                        item.code = eventData.data[item.dpName].v;
                                    }
									
                                    setTimeout(()=> {
                                        console.log(that.allwcs,888)
                                    },5000)
                                    that.allwcs.forEach((item1)=> {
                                        if(item.code == item1.code) {
                                            item.codeName = item1.name;    //第二步把v的code和运行对应
                                            item.color = item1.color;
                                        }
                                    })
                                }else {
                                    if(item.dpName == 'Alarm') {  //报警
                                        if(eventData.data[item.dpName]) {
                                            var v = JSON.parse(eventData.data[item.dpName].v);
                                            if(Array.isArray(v)) {  //如果是数组，不赋值
                                                if(v.length == 0) {
                                                    JSONData.splice(index,1);
                                                }else {
                                                    item.codeName = v[0].msg;
                                                }
                                            }else {
                                                item.codeName = v.msg;
                                            }
                                            item.codeName = eventData.data[item.dpName].v;
                                        }
                                    }else {
                                        if(eventData.data[item.dpName]) {
                                            item.codeName = eventData.data[item.dpName].v;
                                        }else {
                                            item.codeName = "";
                                        }else {  //ws没有的情况
                                            if(item.dpName == "SpindleLoad" || item.dpName == "SpindleRate" || item.dpName == "FeedRate") {
                                                item.codeName = 0;
                                            }else {
                                                item.codeName = "";
                                            }
                                        }
                                    }
                                    that.allwcs.forEach((item1)=> {
                                        if(item.code == item1.code) {
                                            item.color = item1.color;
                                        }else {
                                            item.color = "#7FC0C0";
                                        }
                                    })
                                }
                            });
                            that.dmpList = JSONData;
@@ -803,15 +838,43 @@
    color: #fff;
    border-radius: 2px 2px 0 0;
}
.content-machine-box {
.content-machine-box,.content-zhou-box {
    display: flex;
    align-items: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    background-color: rgba(59, 142, 142, .06);
    border-radius: 2px;
    border: 1px solid #ccc;
}
.content-border {
    height: 100%;
}
.content-zhou-border {
    height: 100%;
}
.content-one {
    width: 25%;
}
.content-two,.zhou-three {
    flex: 1;
}
.content-two {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    min-height: 450px;
}
.content-three {
    width: 25%;
}
.zhou-one {
    width: 28%;
}
.zhou-two {
    width:28%;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}
.content-machine-img {
    margin: 14px;
@@ -1016,4 +1079,16 @@
    display: inline-block;
    border-bottom: 1px solid #eee;
}
.dataHr {
    background-color: #48ACF8;
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 12px;
}
</style>