From 638f3c0cfbf1ace8847dadf5c7b3215f371e9ba8 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 22 十月 2024 22:34:05 +0800
Subject: [PATCH] update some bug
---
src/views/mdc/realtime-status/index.vue | 136 ++++++++++++++++++++++++--------------------
1 files changed, 74 insertions(+), 62 deletions(-)
diff --git a/src/views/mdc/realtime-status/index.vue b/src/views/mdc/realtime-status/index.vue
index 0acd826..ae05939 100644
--- a/src/views/mdc/realtime-status/index.vue
+++ b/src/views/mdc/realtime-status/index.vue
@@ -1,8 +1,8 @@
<!--
* @Date: 2024-04-09 22:11:21
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-09-06 14:13:16
- * @FilePath: /mdc/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
+ * @LastEditTime: 2024-10-22 20:56:44
+ * @FilePath: /cps-web/src/views/mdc/realtime-status/index.vue
瀹炴椂鐪嬫澘
-->
<template>
@@ -16,7 +16,7 @@
<el-icon class="setIcon">
<Setting />
</el-icon>
- <span class="setBtn" @click="goSet">璁剧疆</span>
+ <span class="setBtn" @click="goSet">鍒嗘瀽璁剧疆</span>
</span>
</div>
<ul class="status-view-box" v-if="station == '鐘舵�佽鍥�'">
@@ -44,11 +44,12 @@
<ArrowRight />
</el-icon>
</div>
- <div class="status-content-cardp" v-for="item in timestatus" :style="{ 'width': (100 / column) + '%' }">
+ <div class="status-content-cardp" v-for="(item, index) 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-name" :title="item.name">{{ item.name }}</div>
<div class="status-card-detail-status">
<div class="status-card-detail-point" :style="{ 'background-color': item.statusStyle }">
</div>{{ item.statusName }}
@@ -59,22 +60,19 @@
</div>
<div class="status-card-machine" style="border-color: #ccc;">
<div class="status-card-machine-img">
- <img src="./station.png" width="68" height="68">
+ <img :src="item.avatar" 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
+ <div class="status-card-bottom-realtime" @click="showvisible(item, index)"><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>
@@ -84,7 +82,7 @@
</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="realtime-analysis-card" v-for="item in timestatus[clickIndex].properties">
<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' }">
@@ -96,6 +94,7 @@
</template>
<script>
+import station from "./station1.jpg";
import moment from 'moment';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
let icons = []
@@ -108,6 +107,8 @@
},
data() {
return {
+ station: station,
+ clickIndex: 0,
allwcs: [],
statusStyle: "#ccc",
titleMap: "",
@@ -127,9 +128,8 @@
}
},
mounted() {
- this.deviceStatus = [...this.$route.query.currentTag];
+ this.deviceStatus = this.$route.query.currentTag ? [...this.$route.query.currentTag] : [];
this.getstationlabelList(); //鑾峰彇鏍囩瑙嗗浘涓嬬殑list
- this.setIntervalTime(); //鍗佺澧炲姞鏃堕棿
this.getprocess(); //鑾峰彇棰滆壊==銆嬭幏鍙栭《閮╰itle==銆嬭缃嚑琛屽嚑鍒�==銆媤s
},
methods: {
@@ -151,10 +151,17 @@
// 瑙ｆ瀽鏃堕棿瀛楃涓蹭负澶╂暟銆佸皬鏃躲�佸垎閽熷拰绉�
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; // 绉掕浆鎹负姣
+ if(parts == null) {
+ var days = 0; // 澶╂暟杞崲涓烘绉�
+ var hours = 0; // 灏忔椂杞崲涓烘绉�
+ var minutes = 0; // 鍒嗛挓杞崲涓烘绉�
+ var seconds = 0; // 绉掕浆鎹负姣
+ }else {
+ 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; // 绉掕浆鎹负姣
+ }
// 鍒涘缓涓�涓狹oment.js鐨勬寔缁椂闂村璞�
var duration = moment.duration(days + hours + minutes + seconds);
// 澧炲姞鏃堕棿
@@ -194,11 +201,18 @@
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;
+ if (res.data.length != 0) {
+ this.stationlabel = res.data[0].groupName;
+ }
}
})
},
changestatus(name) {
+ if (this.stationlabelList.length == 0) {
+ this.station = "鐘舵�佽鍥�";
+ this.$message.error('鏈�夊畾瀹炴椂鐪嬫澘鏌ヨ缁勶紝璇峰埌"鍒嗘瀽璁剧疆 -> 瀹炴椂鐪嬫澘鏌ヨ缁勮缃�"涓�夋嫨宸ヤ綅缁�');
+ return;
+ }
this.station = name;
if (this.station == '鐘舵�佽鍥�') {
this.workStationGroupIdList = [];
@@ -208,17 +222,15 @@
}
this.gettimestatus(); //鏌ヨ鍒楄〃
},
- showvisible(item) {
- if (item.properties == null || item.properties.length == 0) {
+ showvisible(item, index) {
+ if(item.properties.length == 0) {
this.$message({
- message: '璇烽厤缃噰闆嗛」',
+ message: '璇ュ伐浣嶆病鏈夐厤缃暟鎹偣',
type: 'warning'
});
return;
}
- var visibleList = JSON.parse(JSON.stringify(item.properties));
- this.titleMap = "瀹炴椂鏁版嵁(" + item.code + ")";
- this.visibleList = visibleList;
+ this.clickIndex = index;
this.visible = true;
},
searchstatus(item, index) {
@@ -241,7 +253,7 @@
}
},
goSet() {
- this.$router.push('/mdc/configuration');
+ this.$router.push('/mdc/configuration'); //鍒嗘瀽璁剧疆
},
gostatus(item) {
this.$router.push('/mdc/station-live?code=' + item.id);
@@ -255,12 +267,12 @@
}
})
},
- changeTime(time) {
+ changeTime(time,diffTime) {
// 浣跨敤Moment.js瑙ｆ瀽杩欎袱涓棩鏈熷瓧绗︿覆
var date1 = moment(time);
- var date2 = moment(moment().format('YYYY-MM-DD HH:mm:ss'));
+ var date2 = moment(diffTime);
// 璁＄畻涓や釜鏃ユ湡涔嬮棿鐨勫樊寮傦紙姣锛�
- var differenceInMilliseconds = date2.diff(date1); // 娉ㄦ剰锛歞ate2 - date1 缁欏嚭姝ｆ暟宸紓
+ var differenceInMilliseconds = date1.diff(date2); // 娉ㄦ剰锛歞ate1 - date2 缁欏嚭姝ｆ暟宸紓
// 浣跨敤duration瀵硅薄灏嗗樊寮傝浆鎹负鏇存槗浜庡鐞嗙殑鍗曚綅
var duration = moment.duration(differenceInMilliseconds);
// 鎻愬彇澶╂暟銆佸皬鏃舵暟銆佸垎閽熸暟鍜岀鏁�
@@ -278,11 +290,13 @@
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 => {
+ this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current || 0}&size=${this.size || 6}`, obj).then(res => {
if (res.code == 200) {
var ids = [];
- console.log(this.allwcs, res.data)
res.data.records.forEach(item => {
+ if(item.avatar == "") {
+ item.avatar = station;
+ }
ids.push(item.id);
if (item.properties != null && item.properties.length != 0) {
item.properties.forEach(item1 => {
@@ -315,10 +329,10 @@
that.$TOOL.socket.sendDataToWebSocket(obj); //鍙戦��
}
}, 500);
- var num = 0;
+ //var num = 0;
var intervalId;
this.$TOOL.socket.websocket.onmessage = function (event) {
- num++;
+ //num++;
var eventData = JSON.parse(event.data);
if (that.timestatus.length == 0) return; //娌″�间笉鐢ㄥ惊鐜�
that.timestatus.forEach((item, index) => { //绗竴姝ユ妸v鏀惧埌code閲�
@@ -329,7 +343,10 @@
}
if (eventData.data.DeviceStatus) {
var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
- var diffTime = that.changeTime(time); //杞崲鎴愬樊鍊硷紙鏃跺垎绉掞級
+ var preT = moment(eventData.data.DeviceStatus.preT).format('YYYY-MM-DD HH:mm:ss');
+ var diffTime = that.changeTime(time,preT); //杞崲鎴愬樊鍊硷紙鏃跺垎绉掞級
+ //that.setIntervalTime(); //鍗佺澧炲姞鏃堕棿
+ var diffTime = diffTime;
item.time = diffTime;
that.allwcs.forEach(item1 => {
if (item1.code == eventData.data.DeviceStatus.v) {
@@ -345,48 +362,43 @@
}
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";
- }
+ that.allwcs.forEach(item2 => {
+ if(eventData.data.DeviceStatus && item2.code == eventData.data.DeviceStatus.v) {
+ item1.value = item2.code;
+ item1.color = item2.color;
+ item1.code = item2.name;
+ }
+ })
+ if (Object.keys(eventData.data).length == 0) { //ws娌℃湁data鏁版嵁锛岀粰榛樿鍊�
+ item1.code = "";
+ item1.color = "#E4A512";
+ };
} else {
if (item1.key == 'Alarm') { //鎶ヨ
if (eventData.data[item1.key]) {
+ if(eventData.data[item1.key].v == "") return;
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;
- }
- })
+ item1.code = v[0].alarmNo;
}
} 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";
}
}
+ that.allwcs.forEach(item2 => {
+ if (item2.name == "鎶ヨ") {
+ item1.color = item2.color;
+ }
+ })
}
})
}
@@ -412,7 +424,7 @@
item.color = item1.color;
}
})
- if(this.$route.query.currentTag == item.status) {
+ if (this.$route.query.currentTag == item.status) {
item.active = true;
}
})
@@ -425,7 +437,7 @@
}
})
}
- }
+ },
}
</script>
@@ -534,7 +546,7 @@
font-weight: 700;
font-size: 16px;
color: #333;
- width: 33%;
+ max-width: 37%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -550,12 +562,12 @@
width: 12px;
height: 12px;
border-radius: 6px;
- margin-right: 8px;
+ margin-right: 2px;
}
.status-card-detail-time {
line-height: 12px;
- margin-left: 16px;
+ margin-left: 2px;
}
.status-card-machine {
--
Gitblit v1.9.3