1

lzhe

2024-05-19 f3e57aff6030b629e5387fcbb43507fe4a4a2da4

1

 src/utils/request.js

@@ -156,7 +156,6 @@
     */
    postJ: function (url, data = {}, config = {}) {
        return new Promise((resolve, reject) => {
            console.log(qsStringify(data))
            axios({
                method: 'post',
                url: url,

 src/utils/tool.js

@@ -114,6 +114,36 @@
    }
}

/* socket */
tool.socket = {
    url:'ws://116.63.155.153:83/ws/info',
    websocket: null,
    connectToWebSocket(token) {  //建立链接
        this.websocket = new WebSocket(this.url + "?access_token=" + token);  
    },
    sendDataToWebSocket(data) {  //发送
        if(!data) return;   //没有入参不发送
        if (this.websocket.readyState === this.websocket.OPEN) {    
            this.websocket.send(JSON.stringify(data));  
        } 
        // this.websocket.onmessage = function(event) {  
        //     // 当从服务器收到消息时  
        //     console.error("WebSocket Error: ", event.data);  
        // };  
	  
        // this.websocket.onerror = function(error) {  
        //     // 当WebSocket连接发生错误时  
        //     console.error("WebSocket Error: ", error);  
        // };  
	  
        // this.websocket.onclose = function(event) {  
        //     // 当WebSocket连接关闭时  
        //     console.log("WebSocket is closed now.");  
        //     // 可以在这里重试连接或其他逻辑...  
        // };
        return this;
    }
}
/* Fullscreen */
tool.screen = function (element) {
    var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);

 src/views/login/components/passwordForm.vue

@@ -18,9 +18,11 @@
</template>

<script>
//import io from 'socket.io-client';
export default {
    data() {
        return {
            socket: null,  
            userType: 'admin',
            form: {
                user: "admin",
@@ -52,7 +54,7 @@
    mounted() {
        //this.$HTTP.get('/api/blade-sync/outer-app-config/appStatus')
    },
    methods: {
    methods: {  
        async login() {
            var validate = await this.$refs.loginForm.validate().catch(() => { })
            if (!validate) { return false }

 src/views/login/index.vue

@@ -65,7 +65,6 @@
            this.$store.commit("clearViewTags")
            this.$store.commit("clearKeepLive")
            this.$store.commit("clearIframeList")
            console.log('%c SCUI %c Gitee: https://gitee.com/lolicode/scui', 'background:#666;color:#fff;border-radius:3px;', '')
        },
        methods: {
            configDark(){

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

@@ -43,7 +43,7 @@
                              <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: #ccc;">---</div>
                                <div class="status-card-detail-time" :style="{'color': item.statusStyle}">{{item.time}}</div>
                            </div>
                        </div>
                        <div class="status-card-machine" style="border-color: #ccc;">
@@ -72,8 +72,8 @@
          <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.namecolor}">{{item.name}}</div>
                          <div class="card-value" :style="{'background-color': item.statuscolor}">{{item.statusName}}</div>
                          <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>
@@ -81,6 +81,7 @@
</template>

<script>
    import moment from 'moment';
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -92,6 +93,7 @@
        },
        data() {
            return {
                allwcs: [],
                statusStyle: "#ccc",
                titleMap: "",
                visible: false,
@@ -110,8 +112,45 @@
        mounted() {
            this.getdevicestatus();  //获取顶部title
            this.getstationlabelList();  //获取标签视图下的list
            this.setIntervalTime();   //十秒增加时间
        },
        methods: {
            setIntervalTime() {
                function addTime(timeStr) {
                    var increaseByMilliseconds = 10 * 1000; // 10秒转换为毫秒  
                    // 解析时间字符串为天数、小时、分钟和秒  
                    if(timeStr != undefined) {
                        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=> {
@@ -140,7 +179,7 @@
                this.gettimestatus();  //查询列表
            },
            showvisible(item) {
                if(item.properties == null) {
                if(item.properties == null || item.properties.length == 0) {
                    this.$message({
                      message: '请配置采集项',
                      type: 'warning'
@@ -148,16 +187,6 @@
                    return;
                }
                var visibleList = JSON.parse(JSON.stringify(item.properties));
                visibleList.forEach(item=> {
                    if(item.statusName) {
                        item.namecolor = "#ccc";
                        item.statuscolor = "rgba(89, 89, 89, 0.14)";
                    }else {
                        item.namecolor = "rgb(127, 192, 192)";
                        item.statuscolor = "rgba(127, 192, 192, 0.14)";
                    }
        			
                })
                this.titleMap = "实时数据(" + item.code + ")";
                this.visibleList = visibleList;
                this.visible = true;
@@ -186,17 +215,44 @@
            gostatus(item) {
                this.$router.push('/mdc/station-live?code='+item.id);
            },
            getprocess() {  //颜色状态
                this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> {
                    if(res.code == 200) {
                        this.allwcs = res.data;
                        this.gettimestatus();
                    }
                })
            },
            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=9`,obj).then(res=> {
                    if(res.code == 200) {
                        var records = JSON.parse(JSON.stringify(res.data.records));
                        records.forEach(item=> {
                        var ids = [];
                        res.data.records.forEach(item=> {
                            item.statusName = "未知";
                            item.statusStyle = '#ccc';
                            ids.push(item.id);
                            if(item.properties != null) {
                                item.properties.forEach(item1=> {
                                    this.devicestatus.forEach(item2=> {
@@ -210,8 +266,71 @@
                            }
                            
                        })
                        this.timestatus = records;
                        this.total = res.data.total;	
                        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(eventData.data.DeviceStatus != undefined) {
                                var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
                                var diffTime = that.changeTime(time);  //转换成差值（时分秒）
                            }else {
                                var diffTime = "--";
                            }
                            if(res.data.records.length == 0) return;  //没值不用循环
                            res.data.records.forEach(item=> {  //第一步把v放到code里
                                if(eventData.id == item.id) {
                                    if(item.properties == null) {
                                        item.properties = [];
                                        return;
                                    }
                                    item.time = diffTime;
                                    item.properties.forEach(item1=> {
                                        if(item1.key == "DeviceStatus") {  //机器状态
                                            //item1.code = eventData.data[item1.key].v;
                                            if(item1.value == "2") {
                                                item1.color = "#73D13D";
                                                item1.code = "运行";
                                            }else {
                                                item1.color = "#75C0C0";
                                            }
                                        }else {
                                            if(item1.key == 'Alarm') {  //报警
                                                var v = JSON.parse(eventData.data[item1.key].v);
                                                item1.name = v.code;
                                                item1.code = v.msg;
                                                item1.color = "#370C0D";
                                            }else {
                                                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);
                    }
                })
            },
@@ -232,7 +351,7 @@
                        res.data[3].icon = "Warning";
                        res.data[4].icon = "Odometer";
                        this.devicestatus = res.data;
                        this.gettimestatus();  //获取机器
                        this.getprocess(); //获取颜色，获取机器
                    }
                })
            }
@@ -468,4 +587,10 @@
        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>

 src/views/mdc/station-live.vue

@@ -46,8 +46,8 @@
                        </div>
                    </div>
                    <div class="fact-analysis-card" v-for="item in dmpList" v-if="dmpList.length != 0">
                        <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 class="card-name" :style="{'background-color': item.color}">{{item.description}}</div>
                        <div :class="{'card-value': true,'card-value-bg1':item.name != 'Alarm','card-value-bg2':item.name == 'Alarm'}">{{item.codeName}}</div>
                    </div>
                </div>
            </div>
@@ -645,10 +645,50 @@
                }
            },
            getdmp(lastLevelId,machineId) {
                console.log(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;
                        //console.log(this.dmpList,111)
                        this.dmpList = [];
                        var that = this;
                        //发送websocket
                        var obj = {
                            type: "realTimeData",
                            workstationIdList: [lastLevelId]
                        }
                        if(this.$TOOL.socket.websocket == null) {  //没有建立先建立
                            this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN")); 
                        }
                        this.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                        this.$TOOL.socket.websocket.onmessage = function(event) {  
                            if(res.data.length == 0) return;  //没值不用循环
                            res.data.forEach(item=> {  //第一步把v放到code里
                                var eventData = JSON.parse(event.data);
                                if(item.name == "DeviceStatus") {  //机器状态
                                    item.code = eventData.data[item.name].v;
                                    that.allwcs.forEach(item1=> {
                                        if(item.code == item1.code) {
                                            item.codeName = item1.name;    //第二步把v的code和运行对应
                                            if(item.code == "2") {
                                                item.color = "#73D13D";
                                            }else {
                                                item.color = "#75C0C0";
                                            }
                                        }
                                    })
                                }else {
                                    if(item.name == 'Alarm') {  //报警
                                        var v = JSON.parse(eventData.data[item.name].v);
                                        item.description = v.code;
                                        item.codeName = v.msg;
                                        item.color = "#370C0D";
                                    }else {
                                        item.codeName = eventData.data[item.name].v;
                                        item.color = "#75C0C0";
                                    }
                                }
                            });
                            that.dmpList = res.data;
                        };
                    }
                })
            },
@@ -864,6 +904,13 @@
    padding: 0 8px;
    overflow: hidden;
    word-break: break-all;
    line-height: 68px;
}
.card-value-bg1 {
    background-color: rgba(115, 209, 61, 0.14);
}
.card-value-bg2 {
    background-color: rgba(55, 12, 13, 0.14);
}
.wcs-main {
    display: flex;