update

gaoshp

2024-09-04 dd92e38d80b52e570104c629335af6889a35bc26

update

 src/views/mdc/realtime-status/index.vue

@@ -1,647 +1,704 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-20 23:24:02
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
 * @LastEditors: gaosp
 * @LastEditTime: 2024-09-04 22:11:55
 * @FilePath: /mdc/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
 实时看板
-->
<template>
    <div class="realtime-main">
        <div>
            <el-radio-group v-model="station" @change="changestatus">
              <el-radio-button label="状态视图" value="状态视图" />
              <el-radio-button label="标签视图" value="标签视图" />
            </el-radio-group>
            <span class="setSpan">
                <el-icon class="setIcon"><Setting /></el-icon>
                <span class="setBtn" @click="goSet">设置</span>
            </span>
          </div>
          <ul class="status-view-box" v-if="station == '状态视图'">
              <li v-for="(item,index) in devicestatus" @click="searchstatus(item,index)" :class="{'active': item.active}">
                  <el-icon :style="{'color': item.color}">
                      <component :is='item.icon'></component>
                  </el-icon>
                  <span>{{item.statusName}}</span>
                  <span class="view-box-num">{{item.deviceNum}}</span>
              </li>
          </ul>
          <el-radio-group v-model="stationlabel" @change="changestationlabel" v-if="station == '标签视图'" style="margin-top:8px;">
              <el-radio-button v-for="item in stationlabelList" :label="item.groupName" :value="item.groupId" />
            </el-radio-group>
          <div class="status-content-cardBox">
              <div class="status-prev" @click="prev">
                  <el-icon><ArrowLeft /></el-icon>
              </div>
              <div class="status-next" @click="next">
                  <el-icon><ArrowRight /></el-icon>
              </div>
              <div class="status-content-cardp" v-for="item in timestatus" :style="{'width': (100/column) + '%'}">
                  <div class="status-card-box" style="border-color: #ccc;">
                      <div class="status-card-top">
                          <div class="status-card-detail">
                              <div title="461" class="status-card-detail-name">{{item.code}}</div>
                              <div class="status-card-detail-status">
                                  <div class="status-card-detail-point" :style="{'background-color': item.statusStyle}"></div>{{item.statusName}}
                                <div class="status-card-detail-time" :style="{'color': item.statusStyle}">{{item.time}}</div>
                            </div>
                        </div>
                        <div class="status-card-machine" style="border-color: #ccc;">
                            <div class="status-card-machine-img">
                                <img src="./station.png" width="68" height="68">
                            </div>
                            <div class="status-card-machine-mesg">
                                <div class="status-card-machine-mesg-form">
                                    <div class="status-card-machine-mesg-label">工位编号</div>
                                    <div class="status-card-machine-mesg-value">{{item.code}}</div>
                                </div>
                                <div class="status-card-machine-mesg-form">
                                    <div class="status-card-machine-mesg-label">工单</div>
                                    <div class="status-card-machine-mesg-value">-</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="status-card-bottom">
                        <div class="status-card-bottom-realtime" @click="showvisible(item)"><i class="iconfont saber-xiangqing status-card-bottom-icon"></i> 实时数据</div>
                        <div class="status-card-bottom-detail" @click="gostatus(item)"><i class="iconfont saber-shuju status-card-bottom-icon"></i> 工位详情</div>
                    </div>
                </div>
            </div>
          </div>
          <el-dialog :title="titleMap" v-model="visible" :width="740">
                  <div class="dialogstyle">
                      <div class="realtime-analysis-card" v-for="item in visibleList">
                          <div class="card-name" :style="{'background-color': item.color}">{{item.name}}</div>
                          <div class="card-value" :class="{'card-value': true,'card-value-bg1':item.key != 'Alarm','card-value-bg2':item.key == 'Alarm'}">{{item.code}}</div>
                      </div>
                  </div>
          </el-dialog>
    </div>
    <div class="realtime-main">
        <div>
            <el-radio-group v-model="station" @change="changestatus">
                <el-radio-button label="状态视图" value="状态视图" />
                <el-radio-button label="标签视图" value="标签视图" />
            </el-radio-group>
            <span class="setSpan">
                <el-icon class="setIcon">
                    <Setting />
                </el-icon>
                <span class="setBtn" @click="goSet">设置</span>
            </span>
        </div>
        <ul class="status-view-box" v-if="station == '状态视图'">
            <li v-for="(item, index) in devicestatus" @click="searchstatus(item, index)"
                :class="{ 'active': item.active }">
                <el-icon :style="{ 'color': item.color }">
                    <component :is='item.icon'></component>
                </el-icon>
                <span>{{ item.statusName }}</span>
                <span class="view-box-num">{{ item.deviceNum }}</span>
            </li>
        </ul>
        <el-radio-group v-model="stationlabel" @change="changestationlabel" v-if="station == '标签视图'"
            style="margin-top:8px;">
            <el-radio-button v-for="item in stationlabelList" :label="item.groupName" :value="item.groupId" />
        </el-radio-group>
        <div class="status-content-cardBox">
            <div class="status-prev" @click="prev">
                <el-icon>
                    <ArrowLeft />
                </el-icon>
            </div>
            <div class="status-next" @click="next">
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="status-content-cardp" v-for="item in timestatus" :style="{ 'width': (100 / column) + '%' }">
                <div class="status-card-box" style="border-color: #ccc;">
                    <div class="status-card-top">
                        <div class="status-card-detail">
                            <div title="461" class="status-card-detail-name">{{ item.code }}</div>
                            <div class="status-card-detail-status">
                                <div class="status-card-detail-point" :style="{ 'background-color': item.statusStyle }">
                                </div>{{ item.statusName }}
                                <div class="status-card-detail-time" :style="{ 'color': item.statusStyle }">{{ item.time
                                    }}
                                </div>
                            </div>
                        </div>
                        <div class="status-card-machine" style="border-color: #ccc;">
                            <div class="status-card-machine-img">
                                <img src="./station.png" width="68" height="68">
                            </div>
                            <div class="status-card-machine-mesg">
                                <div class="status-card-machine-mesg-form">
                                    <div class="status-card-machine-mesg-label">工位编号</div>
                                    <div class="status-card-machine-mesg-value">{{ item.code }}</div>
                                </div>
                                <div class="status-card-machine-mesg-form">
                                    <div class="status-card-machine-mesg-label">工单</div>
                                    <div class="status-card-machine-mesg-value">-</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="status-card-bottom">
                        <div class="status-card-bottom-realtime" @click="showvisible(item)"><i
                                class="iconfont saber-xiangqing status-card-bottom-icon"></i> 实时数据</div>
                        <div class="status-card-bottom-detail" @click="gostatus(item)"><i
                                class="iconfont saber-shuju status-card-bottom-icon"></i> 工位详情</div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="titleMap" v-model="visible" :width="740">
            <div class="dialogstyle">
                <div class="realtime-analysis-card" v-for="item in visibleList">
                    <div class="card-name" :style="{ 'background-color': item.color }">{{ item.name }}</div>
                    <div class="card-value"
                        :class="{ 'card-value': true, 'card-value-bg1': item.key != 'Alarm', 'card-value-bg2': item.key == 'Alarm' }">
                        {{ item.code }}</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment';
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        components: {
            ...ElementPlusIconsVue
        },
        data() {
            return {
                allwcs: [],
                statusStyle: "#ccc",
                titleMap: "",
                visible: false,
                visibleList: [],
                devicestatus: [],
                timestatus: [],
                station: "状态视图",
                stationlabel: "",
                stationlabelList: [],
                current: "1",
                size: "9",
                total: 0,
                workStationGroupIdList: [],
                line: "",
                column: ""
            }
        },
        mounted() {
            this.getstationlabelList();  //获取标签视图下的list
            this.setIntervalTime();   //十秒增加时间
            this.getprocess(); //获取颜色==》获取顶部title==》设置几行几列==》ws
        },
        methods: {
            getSetting() {
                this.$HTTP.get(`/api/blade-system/param/detail?paramKey=mdc.realtime.setting`).then(res=> {
                    if(res.code == 200) {
                        var paramValue = JSON.parse(res.data.paramValue);
                        this.line = paramValue.line==0?1:paramValue.line;
                        this.column = paramValue.column;
                        this.current = "1";
                        this.size = this.line * this.column;
                        this.gettimestatus();  //ws
                    }
                })
            },
            setIntervalTime() {
                function addTime(timeStr) {
                    var increaseByMilliseconds = 10 * 1000; // 10秒转换为毫秒  
                    // 解析时间字符串为天数、小时、分钟和秒  
                    if(timeStr != undefined && timeStr != "--") {
                        var parts = timeStr.match(/(\d+)天(\d+)时(\d+)分(\d+)秒/);  
                        var days = parseInt(parts[1], 10) * 24 * 60 * 60 * 1000; // 天数转换为毫秒  
                        var hours = parseInt(parts[2], 10) * 60 * 60 * 1000; // 小时转换为毫秒  
                        var minutes = parseInt(parts[3], 10) * 60 * 1000; // 分钟转换为毫秒  
                        var seconds = parseInt(parts[4], 10) * 1000; // 秒转换为毫秒    
                        // 创建一个Moment.js的持续时间对象  
                        var duration = moment.duration(days + hours + minutes + seconds);  
                        // 增加时间  
                        duration.add(increaseByMilliseconds); // 增加10秒  
                        // 将持续时间转换回天数、小时、分钟和秒（注意这里可能不完全精确，因为天数可能不是整数）  
                        var totalMilliseconds = duration.asMilliseconds();  
                        var totalDays = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));  
                        var remainingMilliseconds = totalMilliseconds % (1000 * 60 * 60 * 24);  
                        var totalHours = Math.floor(remainingMilliseconds / (1000 * 60 * 60));  
                        remainingMilliseconds %= (1000 * 60 * 60);  
                        var totalMinutes = Math.floor(remainingMilliseconds / (1000 * 60));  
                        remainingMilliseconds %= (1000 * 60);  
                        var totalSeconds = Math.floor(remainingMilliseconds / 1000); 
                        return `${totalDays}天${totalHours}时${totalMinutes}分${totalSeconds}秒`;
                    }else {
                        return timeStr;
                    }
                }  
                setInterval(()=> {
                    if(this.timestatus.length !=0) {
                        this.timestatus.forEach(item=> {
                            item.time = addTime(item.time);
                        })
                    }
                },1000*10)
            },
            changestationlabel(name) {
                this.stationlabel = name;
                this.stationlabelList.forEach(item=> {
                    if(item.groupName == name) {
                        this.workStationGroupIdList = [item.groupId];
                    }
                })
                this.gettimestatus();  //查询列表
            },
            getstationlabelList() {
                this.$HTTP.get("/api/blade-cps/group/get-mdc-group").then(res=> {
                    if(res.code == 200) {
                        this.stationlabelList = res.data;
                        this.stationlabel = res.data[0].groupName;
                    }
                })
            },
            changestatus(name) {
                this.station = name;
                if(this.station == '状态视图') {
                    this.workStationGroupIdList = [];
                }else {
                    this.stationlabel = this.stationlabelList[0].groupName;
                    this.workStationGroupIdList = [this.stationlabelList[0].groupId];
import moment from 'moment';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
let icons = []
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    icons.push(key)
}
export default {
    components: {
        ...ElementPlusIconsVue
    },
    data() {
        return {
            allwcs: [],
            statusStyle: "#ccc",
            titleMap: "",
            visible: false,
            visibleList: [],
            devicestatus: [],
            timestatus: [],
            station: "状态视图",
            stationlabel: "",
            stationlabelList: [],
            current: "1",
            size: "9",
            total: 0,
            workStationGroupIdList: [],
            line: "",
            column: ""
        }
    },
    mounted() {
        this.getstationlabelList();  //获取标签视图下的list
        this.setIntervalTime();   //十秒增加时间
        this.getprocess(); //获取颜色==》获取顶部title==》设置几行几列==》ws
    },
    methods: {
        getSetting() {
            this.$HTTP.get(`/api/blade-system/param/detail?paramKey=mdc.realtime.setting`).then(res => {
                if (res.code == 200) {
                    var paramValue = JSON.parse(res.data.paramValue);
                    this.line = paramValue.line == 0 ? 1 : paramValue.line;
                    this.column = paramValue.column;
                    this.current = "1";
                    this.size = this.line * this.column;
                    this.gettimestatus();  //ws
                }
                this.gettimestatus();  //查询列表
            },
            showvisible(item) {
                if(item.properties == null || item.properties.length == 0) {
                    this.$message({
                      message: '请配置采集项',
                      type: 'warning'
                    });
                    return;
                }
                var visibleList = JSON.parse(JSON.stringify(item.properties));
                this.titleMap = "实时数据(" + item.code + ")";
                this.visibleList = visibleList;
                this.visible = true;
            },
            searchstatus(item,index) {
                this.devicestatus.forEach(item=> {
                    item.active = false;
                })
                this.devicestatus[index].active = true;
                this.deviceStatus = [item.status];
                this.gettimestatus();
            },
            prev() {
                if(this.current == "1") return;
                this.current = this.current - 1;
                this.gettimestatus();
            },
            next() {
                if((this.current * this.line) < this.total/this.column) {
                    this.current = Number(this.current) + 1;
                    this.gettimestatus();
                }
            },
            goSet() {
                this.$router.push('/mdc/configuration');
            },
            gostatus(item) {
                this.$router.push('/mdc/station-live?code='+item.id);
            },
            getprocess() {  //颜色状态
                this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> {
                    if(res.code == 200) {
                        this.allwcs = res.data;
                        this.getdevicestatus();  //获取顶部title/具体数据
                        this.getSetting();   //获取几行几列
                    }
                })
            },
            changeTime(time) {
                // 使用Moment.js解析这两个日期字符串  
                var date1 = moment(time);  
                var date2 = moment(moment().format('YYYY-MM-DD HH:mm:ss'));  
                // 计算两个日期之间的差异（毫秒）  
                var differenceInMilliseconds = date2.diff(date1); // 注意：date2 - date1 给出正数差异  
                // 使用duration对象将差异转换为更易于处理的单位  
                var duration = moment.duration(differenceInMilliseconds);  
                // 提取天数、小时数、分钟数和秒数  
                var differenceInDays = duration.asDays();  
                var differenceInHours = duration.hours(); // 直接使用hours()方法获取小时数  
                var differenceInMinutes = duration.minutes(); // 直接使用minutes()方法获取分钟数  
                var differenceInSeconds = duration.seconds(); // 直接使用seconds()方法获取秒数  
                // 输出结果（使用Math.floor确保整数）  
                return Math.floor(differenceInDays) + "天" + Math.floor(differenceInHours) + "时" + Math.floor(differenceInMinutes) + "分" + Math.floor(differenceInSeconds) + "秒";
            },
            gettimestatus() {
                var that = this;
                var obj = {
                    deviceStatus: this.deviceStatus,
                    workStationGroupIdList: this.workStationGroupIdList
                }
                this.timestatus = [];
                this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=${this.size}`,obj).then(res=> {
                    if(res.code == 200) {
                        var ids = [];
                        console.log(this.allwcs,res.data)
                        res.data.records.forEach(item=> {
                            ids.push(item.id);
                            if(item.properties != null && item.properties.length!=0) {
                                item.properties.forEach(item1=> {
                                    if(item1.key == "DeviceStatus") {
                                        this.allwcs.forEach(item2=> {
                                            if(item2.code == item1.value) {
                                                item1.color = item2.color;
                                            }
                                        })
                                    }
                                })
                            }else {
                                item.statusName = "未知";
                                item.statusStyle = '#ccc';
                            }
                        })
                        this.timestatus = res.data.records;
                        this.total = res.data.total;
                        //发送websocket
                        var obj = {
                            type: "realTimeData",
                            workstationIdList: ids
                        }
                        if(this.$TOOL.socket.websocket == null) {  //没有建立先建立
                            this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN")); 
                        }
                        var intervalId123 = setInterval(function() { 
                            if (that.$TOOL.socket.websocket.readyState == 1) {  
                                clearInterval(intervalId123);  
                                that.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                            }  
                        }, 500);
                        var num = 0;
                        var intervalId;
                        this.$TOOL.socket.websocket.onmessage = function(event) { 
                            num ++;
                            var eventData = JSON.parse(event.data);
                            if(that.timestatus.length == 0) return;  //没值不用循环
                            that.timestatus.forEach((item,index)=> {  //第一步把v放到code里
                                if(eventData.id == item.id) {
                                    if(item.properties == null) {
                                        item.properties = [];
                                        return;
                                    }
                                    if(eventData.data.DeviceStatus) {
                                        var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
                                        var diffTime = that.changeTime(time);  //转换成差值（时分秒）
                                        item.time = diffTime;
                                        that.allwcs.forEach(item1=> {
                                            if(item1.code == eventData.data.DeviceStatus.v) {
                                                item.statusName = item1.name;
                                                item.statusStyle = item1.color;
                                            }
                                        })
                                    }else{
                                        if(item.time == undefined || item.time == "--") {
                                            var diffTime = "--";
                                            item.time = diffTime;
            })
        },
        setIntervalTime() {
            function addTime(timeStr) {
                var increaseByMilliseconds = 10 * 1000; // 10秒转换为毫秒  
                // 解析时间字符串为天数、小时、分钟和秒  
                if (timeStr != undefined && timeStr != "--") {
                    var parts = timeStr.match(/(\d+)天(\d+)时(\d+)分(\d+)秒/);
                    var days = parseInt(parts[1], 10) * 24 * 60 * 60 * 1000; // 天数转换为毫秒  
                    var hours = parseInt(parts[2], 10) * 60 * 60 * 1000; // 小时转换为毫秒  
                    var minutes = parseInt(parts[3], 10) * 60 * 1000; // 分钟转换为毫秒  
                    var seconds = parseInt(parts[4], 10) * 1000; // 秒转换为毫秒    
                    // 创建一个Moment.js的持续时间对象  
                    var duration = moment.duration(days + hours + minutes + seconds);
                    // 增加时间  
                    duration.add(increaseByMilliseconds); // 增加10秒  
                    // 将持续时间转换回天数、小时、分钟和秒（注意这里可能不完全精确，因为天数可能不是整数）  
                    var totalMilliseconds = duration.asMilliseconds();
                    var totalDays = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
                    var remainingMilliseconds = totalMilliseconds % (1000 * 60 * 60 * 24);
                    var totalHours = Math.floor(remainingMilliseconds / (1000 * 60 * 60));
                    remainingMilliseconds %= (1000 * 60 * 60);
                    var totalMinutes = Math.floor(remainingMilliseconds / (1000 * 60));
                    remainingMilliseconds %= (1000 * 60);
                    var totalSeconds = Math.floor(remainingMilliseconds / 1000);
                    return `${totalDays}天${totalHours}时${totalMinutes}分${totalSeconds}秒`;
                } else {
                    return timeStr;
                }
            }
            setInterval(() => {
                if (this.timestatus.length != 0) {
                    this.timestatus.forEach(item => {
                        item.time = addTime(item.time);
                    })
                }
            }, 1000 * 10)
        },
        changestationlabel(name) {
            this.stationlabel = name;
            this.stationlabelList.forEach(item => {
                if (item.groupName == name) {
                    this.workStationGroupIdList = [item.groupId];
                }
            })
            this.gettimestatus();  //查询列表
        },
        getstationlabelList() {
            this.$HTTP.get("/api/blade-cps/group/get-mdc-group").then(res => {
                if (res.code == 200) {
                    this.stationlabelList = res.data;
                    this.stationlabel = res.data[0].groupName;
                }
            })
        },
        changestatus(name) {
            this.station = name;
            if (this.station == '状态视图') {
                this.workStationGroupIdList = [];
            } else {
                this.stationlabel = this.stationlabelList[0].groupName;
                this.workStationGroupIdList = [this.stationlabelList[0].groupId];
            }
            this.gettimestatus();  //查询列表
        },
        showvisible(item) {
            if (item.properties == null || item.properties.length == 0) {
                this.$message({
                    message: '请配置采集项',
                    type: 'warning'
                });
                return;
            }
            var visibleList = JSON.parse(JSON.stringify(item.properties));
            this.titleMap = "实时数据(" + item.code + ")";
            this.visibleList = visibleList;
            this.visible = true;
        },
        searchstatus(item, index) {
            this.devicestatus.forEach(item => {
                item.active = false;
            })
            this.devicestatus[index].active = true;
            this.deviceStatus = [item.status];
            this.gettimestatus();
        },
        prev() {
            if (this.current == "1") return;
            this.current = this.current - 1;
            this.gettimestatus();
        },
        next() {
            if ((this.current * this.line) < this.total / this.column) {
                this.current = Number(this.current) + 1;
                this.gettimestatus();
            }
        },
        goSet() {
            this.$router.push('/mdc/configuration');
        },
        gostatus(item) {
            this.$router.push('/mdc/station-live?code=' + item.id);
        },
        getprocess() {  //颜色状态
            this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res => {
                if (res.code == 200) {
                    this.allwcs = res.data;
                    this.getdevicestatus();  //获取顶部title/具体数据
                    this.getSetting();   //获取几行几列
                }
            })
        },
        changeTime(time) {
            // 使用Moment.js解析这两个日期字符串  
            var date1 = moment(time);
            var date2 = moment(moment().format('YYYY-MM-DD HH:mm:ss'));
            // 计算两个日期之间的差异（毫秒）  
            var differenceInMilliseconds = date2.diff(date1); // 注意：date2 - date1 给出正数差异  
            // 使用duration对象将差异转换为更易于处理的单位  
            var duration = moment.duration(differenceInMilliseconds);
            // 提取天数、小时数、分钟数和秒数  
            var differenceInDays = duration.asDays();
            var differenceInHours = duration.hours(); // 直接使用hours()方法获取小时数  
            var differenceInMinutes = duration.minutes(); // 直接使用minutes()方法获取分钟数  
            var differenceInSeconds = duration.seconds(); // 直接使用seconds()方法获取秒数  
            // 输出结果（使用Math.floor确保整数）  
            return Math.floor(differenceInDays) + "天" + Math.floor(differenceInHours) + "时" + Math.floor(differenceInMinutes) + "分" + Math.floor(differenceInSeconds) + "秒";
        },
        gettimestatus() {
            var that = this;
            var obj = {
                deviceStatus: this.deviceStatus,
                workStationGroupIdList: this.workStationGroupIdList
            }
            this.timestatus = [];
            this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current || 0}&size=${this.size || 0}`, obj).then(res => {
                if (res.code == 200) {
                    var ids = [];
                    console.log(this.allwcs, res.data)
                    res.data.records.forEach(item => {
                        ids.push(item.id);
                        if (item.properties != null && item.properties.length != 0) {
                            item.properties.forEach(item1 => {
                                if (item1.key == "DeviceStatus") {
                                    this.allwcs.forEach(item2 => {
                                        if (item2.code == item1.value) {
                                            item1.color = item2.color;
                                        }
                                    })
                                }
                            })
                        } else {
                            item.statusName = "未知";
                            item.statusStyle = '#ccc';
                        }
                    })
                    this.timestatus = res.data.records;
                    this.total = res.data.total;
                    //发送websocket
                    var obj = {
                        type: "realTimeData",
                        workstationIdList: ids
                    }
                    if (this.$TOOL.socket.websocket == null) {  //没有建立先建立
                        this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN"));
                    }
                    var intervalId123 = setInterval(function () {
                        if (that.$TOOL.socket.websocket.readyState == 1) {
                            clearInterval(intervalId123);
                            that.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                        }
                    }, 500);
                    var num = 0;
                    var intervalId;
                    this.$TOOL.socket.websocket.onmessage = function (event) {
                        num++;
                        var eventData = JSON.parse(event.data);
                        if (that.timestatus.length == 0) return;  //没值不用循环
                        that.timestatus.forEach((item, index) => {  //第一步把v放到code里
                            if (eventData.id == item.id) {
                                if (item.properties == null) {
                                    item.properties = [];
                                    return;
                                }
                                if (eventData.data.DeviceStatus) {
                                    var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
                                    var diffTime = that.changeTime(time);  //转换成差值（时分秒）
                                    item.time = diffTime;
                                    that.allwcs.forEach(item1 => {
                                        if (item1.code == eventData.data.DeviceStatus.v) {
                                            item.statusName = item1.name;
                                            item.statusStyle = item1.color;
                                        }
                                    })
                                } else {
                                    if (item.time == undefined || item.time == "--") {
                                        var diffTime = "--";
                                        item.time = diffTime;
                                    }
                                    item.properties.forEach((item1,index1)=> {
                                        if(item1.key == "DeviceStatus") {  //机器状态
                                            if(item1.value == "2") {
                                                that.allwcs.forEach(item2=> {
                                                    if(item2.code == item1.value) {
                                                        item1.color = item2.color;
                                                        item1.code = item2.name;
                                                    }
                                                })
                                            }else {
                                                item1.color = "#75C0C0";
                                            }
                                        }else {
                                            if(item1.key == 'Alarm') {  //报警
                                                if(eventData.data[item1.key]) {
                                                    var v = JSON.parse(eventData.data[item1.key].v);
                                                    if(Array.isArray(v)) {  //如果是数组，不赋值
                                                        if(v.length == 0) {
                                                            res.data.records[index].properties.splice(index1,1);
                                                        }else {
                                                            item1.name = v[0].code;
                                                            item1.code = v[0].msg;
                                                            that.allwcs.forEach(item2=> {
                                                                if(item2.name == "报警") {
                                                                    item1.color = item2.color;
                                                                }
                                                            })
                                                        }
                                                    }else {
                                                        item1.name = v.code;
                                                        item1.code = v.msg;
                                                        that.allwcs.forEach(item2=> {
                                                            if(item2.name == "报警") {
                                }
                                item.properties.forEach((item1, index1) => {
                                    if (item1.key == "DeviceStatus") {  //机器状态
                                        if (item1.value == "2") {
                                            that.allwcs.forEach(item2 => {
                                                if (item2.code == item1.value) {
                                                    item1.color = item2.color;
                                                    item1.code = item2.name;
                                                }
                                            })
                                        } else {
                                            item1.color = "#75C0C0";
                                        }
                                    } else {
                                        if (item1.key == 'Alarm') {  //报警
                                            if (eventData.data[item1.key]) {
                                                var v = JSON.parse(eventData.data[item1.key].v);
                                                if (Array.isArray(v)) {  //如果是数组，不赋值
                                                    if (v.length == 0) {
                                                        res.data.records[index].properties.splice(index1, 1);
                                                    } else {
                                                        item1.name = v[0].code;
                                                        item1.code = v[0].msg;
                                                        that.allwcs.forEach(item2 => {
                                                            if (item2.name == "报警") {
                                                                item1.color = item2.color;
                                                            }
                                                        })
                                                    }
                                                } else {
                                                    item1.name = v.code;
                                                    item1.code = v.msg;
                                                    that.allwcs.forEach(item2 => {
                                                        if (item2.name == "报警") {
                                                            item1.color = item2.color;
                                                        }
                                                    })
                                                }
                                            }else {
                                                if(eventData.data[item1.key]) {
                                                    item1.code = eventData.data[item1.key].v;
                                                    item1.color = "#75C0C0";
                                                }
                                            }
                                        }
                                    })
                                }
                            });
                        };
                        // var len = res.data.records.length;
                        // intervalId = setInterval(function() {  
                        //     if (num === len) {  
                        //         clearInterval(intervalId);  
                        //         that.timestatus = res.data.records;  //等所有socket回来以后赋值
                        //     }  
                        // }, 500);
                    }
                })
            },
            getdevicestatus() {
                this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res=> {
                    if(res.code == 200) {
                        res.data.forEach(item=> {
                            item.active = false;
                            this.allwcs.forEach(item1=> {
                                if(item.status == item1.code) {
                                    item.color = item1.color;
                                }
                            })
                                            }
                                        } else {
                                            if (eventData.data[item1.key]) {
                                                item1.code = eventData.data[item1.key].v;
                                                item1.color = "#75C0C0";
                                            }
                                        }
                                    }
                                })
                            }
                        });
                    };
                    // var len = res.data.records.length;
                    // intervalId = setInterval(function() {  
                    //     if (num === len) {  
                    //         clearInterval(intervalId);  
                    //         that.timestatus = res.data.records;  //等所有socket回来以后赋值
                    //     }  
                    // }, 500);
                }
            })
        },
        getdevicestatus() {
            this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                        item.active = false;
                        this.allwcs.forEach(item1 => {
                            if (item.status == item1.code) {
                                item.color = item1.color;
                            }
                        })
                        res.data[0].icon = "Position";
                        res.data[1].icon = "Loading";
                        res.data[2].icon = "Clock";
                        res.data[3].icon = "Warning";
                        res.data[4].icon = "Odometer";
                        this.devicestatus = res.data;
                    }
                })
            }
        }
    }
                    })
                    res.data[0].icon = "Position";
                    res.data[1].icon = "Loading";
                    res.data[2].icon = "Clock";
                    res.data[3].icon = "Warning";
                    res.data[4].icon = "Odometer";
                    this.devicestatus = res.data;
                }
            })
        }
    }
}
</script>

<style scoped>
    .realtime-main {
        background-color: #fff;
        margin:8px;
        padding: 8px;
    }
    .setSpan {
        vertical-align: sub;
        font-size: 14px;
    }
    .setBtn {
        margin-left:2px;
        color: #409eff;
        margin-left:8px;
        cursor: pointer;
    }
    .setIcon {
        color: #409eff;
        margin-left: 15px;
        vertical-align: -2px;
    }
    .status-view-box {
        display: flex;
        padding: 8px 0 0;
    }
    .status-view-box li {
        list-style: none;
        border-radius: 2px;
        background: #f6f6f6;
        cursor: pointer;
        padding: 13px 37px 13px 17px;
        margin: 0 8px;
        flex-direction: row;
        display: flex;
        align-items: center;
    }
    .status-view-box li i {
        margin-right:6px;
        font-size: 14px;
        font-weight: bold;
    }
    .view-box-num {
        font-size: 25px;
        margin-left:6px;
    }
    .status-content-cardBox {
        display: flex;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        align-content: flex-start;
        height: 100%;
        width: 100%;
        padding: 4px;
        box-sizing: border-box;
        position: relative;
    }
    .status-content-cardBox:hover .status-next,.status-content-cardBox:hover .status-prev {
        display: block;
    }
    .status-content-cardp {
        height: 50%;
        min-height: 170px;
        margin: 0;
        padding: 4px;
        box-sizing: border-box;
    }
    .status-card-box {
        height: 100%;
        border: 1px solid;
        font-size: 14px;
        box-sizing: border-box;
        border-radius: 2px;
    }
    .status-card-top {
        height: calc(100% - 45px);
        padding: 12px;
        box-sizing: border-box;
    }
    .status-card-detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .status-card-detail-name {
        font-weight: 700;
        font-size: 16px;
        color: #333;
        width: 33%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .status-card-detail-status {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .status-card-detail-point {
        width: 12px;
        height: 12px;
        border-radius: 6px;
        margin-right: 8px;
    }
    .status-card-detail-time {
        line-height: 12px;
        margin-left: 16px;
    }
    .status-card-machine {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding-top: 12px;
    }
    .status-card-machine-img {
        width: 68px;
        height: 68px;
        border-radius: 2px;
    }
    .status-card-machine-mesg {
        padding-left: 16px;
    }
    .status-card-machine-mesg-form {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 8px 0;
    }
    .status-card-machine-mesg-label {
        font-weight: 400;
        font-size: 12px;
        text-align: left;
        color: #666;
        width: 70px;
    }
    .status-card-machine-mesg-value {
        font-weight: 400;
        font-size: 12px;
        text-align: left;
        color: #333;
    }
    .status-card-bottom {
        font-weight: 700;
        font-size: 14px;
        color: #409eff;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-top: 1px solid #e1e1e2;
        padding: 12px 0;
    }
    .status-card-bottom-realtime {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .status-card-bottom-detail, .status-card-bottom-realtime {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .status-card-bottom-icon {
        margin-right: 8px;
    }
    .status-next,.status-prev {
        position: absolute;
        top: 50%;
        font-size: 36px;
        font-weight: 700;
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        background: hsla(0,0%,100%,.7);
        border-radius: 2px;
        cursor: pointer;
        display: none;
        z-index: 99;
    }
    .status-next {
        right: 0;
    }
    .status-prev {
        left: 0;
    }
    .active {
        border: 1px solid #317d7b!important
    }
    .realtime-analysis-card {
        border-radius: 2px;
        margin: 8px;
        height: 88px;
        display: flex;
    }
    .realtime-analysis-card .card-name, .realtime-analysis-card .card-value{
        display: flex;
        align-items: center;
    }
    .realtime-analysis-card .card-name {
        width: 98px;
        height: 88px;
        justify-content: center;
        color: #fff;
    }
    .realtime-analysis-card .card-value {
        min-width: 118px;
        max-width: 396px;
        height: 100%;
        padding: 0 8px;
        overflow: hidden;
        word-break: break-all;
        box-sizing: border-box;
    }
    .dialogstyle {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    .card-value-bg1 {
        background-color: rgba(115, 209, 61, 0.14);
    }
    .card-value-bg2 {
        background-color: rgba(55, 12, 13, 0.14);
    }
.realtime-main {
    background-color: #fff;
    margin: 8px;
    padding: 8px;
}

.setSpan {
    vertical-align: sub;
    font-size: 14px;
}

.setBtn {
    margin-left: 2px;
    color: #409eff;
    margin-left: 8px;
    cursor: pointer;
}

.setIcon {
    color: #409eff;
    margin-left: 15px;
    vertical-align: -2px;
}

.status-view-box {
    display: flex;
    padding: 8px 0 0;
}

.status-view-box li {
    list-style: none;
    border-radius: 2px;
    background: #f6f6f6;
    cursor: pointer;
    padding: 13px 37px 13px 17px;
    margin: 0 8px;
    flex-direction: row;
    display: flex;
    align-items: center;
}

.status-view-box li i {
    margin-right: 6px;
    font-size: 14px;
    font-weight: bold;
}

.view-box-num {
    font-size: 25px;
    margin-left: 6px;
}

.status-content-cardBox {
    display: flex;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    height: 100%;
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    position: relative;
}

.status-content-cardBox:hover .status-next,
.status-content-cardBox:hover .status-prev {
    display: block;
}

.status-content-cardp {
    height: 50%;
    min-height: 170px;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
}

.status-card-box {
    height: 100%;
    border: 1px solid;
    font-size: 14px;
    box-sizing: border-box;
    border-radius: 2px;
}

.status-card-top {
    height: calc(100% - 45px);
    padding: 12px;
    box-sizing: border-box;
}

.status-card-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-card-detail-name {
    font-weight: 700;
    font-size: 16px;
    color: #333;
    width: 33%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.status-card-detail-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.status-card-detail-point {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    margin-right: 8px;
}

.status-card-detail-time {
    line-height: 12px;
    margin-left: 16px;
}

.status-card-machine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-top: 12px;
}

.status-card-machine-img {
    width: 68px;
    height: 68px;
    border-radius: 2px;
}

.status-card-machine-mesg {
    padding-left: 16px;
}

.status-card-machine-mesg-form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
}

.status-card-machine-mesg-label {
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    color: #666;
    width: 70px;
}

.status-card-machine-mesg-value {
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    color: #333;
}

.status-card-bottom {
    font-weight: 700;
    font-size: 14px;
    color: #409eff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid #e1e1e2;
    padding: 12px 0;
}

.status-card-bottom-realtime {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-card-bottom-detail,
.status-card-bottom-realtime {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-card-bottom-icon {
    margin-right: 8px;
}

.status-next,
.status-prev {
    position: absolute;
    top: 50%;
    font-size: 36px;
    font-weight: 700;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    background: hsla(0, 0%, 100%, .7);
    border-radius: 2px;
    cursor: pointer;
    display: none;
    z-index: 99;
}

.status-next {
    right: 0;
}

.status-prev {
    left: 0;
}

.active {
    border: 1px solid #317d7b !important
}

.realtime-analysis-card {
    border-radius: 2px;
    margin: 8px;
    height: 88px;
    display: flex;
}

.realtime-analysis-card .card-name,
.realtime-analysis-card .card-value {
    display: flex;
    align-items: center;
}

.realtime-analysis-card .card-name {
    width: 98px;
    height: 88px;
    justify-content: center;
    color: #fff;
}

.realtime-analysis-card .card-value {
    min-width: 118px;
    max-width: 396px;
    height: 100%;
    padding: 0 8px;
    overflow: hidden;
    word-break: break-all;
    box-sizing: border-box;
}

.dialogstyle {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.card-value-bg1 {
    background-color: rgba(115, 209, 61, 0.14);
}

.card-value-bg2 {
    background-color: rgba(55, 12, 13, 0.14);
}
</style>