From f3e57aff6030b629e5387fcbb43507fe4a4a2da4 Mon Sep 17 00:00:00 2001
From: lzhe <181968431@qq.com>
Date: 星期日, 19 五月 2024 00:30:56 +0800
Subject: [PATCH] 1
---
src/utils/request.js | 1
src/views/mdc/realtime-status/index.vue | 163 ++++++++++++++++++++++++++++---
src/views/login/index.vue | 1
src/utils/tool.js | 30 ++++++
src/views/login/components/passwordForm.vue | 4
src/views/mdc/station-live.vue | 55 ++++++++++
6 files changed, 228 insertions(+), 26 deletions(-)
diff --git a/src/utils/request.js b/src/utils/request.js
index 9beddba..558221f 100644
--- a/src/utils/request.js
+++ b/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,
diff --git a/src/utils/tool.js b/src/utils/tool.js
index 710f402..5313762 100644
--- a/src/utils/tool.js
+++ b/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) {
+ // // 褰揥ebSocket杩炴帴鍙戠敓閿欒鏃�
+ // console.error("WebSocket Error: ", error);
+ // };
+
+ // this.websocket.onclose = function(event) {
+ // // 褰揥ebSocket杩炴帴鍏抽棴鏃�
+ // console.log("WebSocket is closed now.");
+ // // 鍙互鍦ㄨ繖閲岄噸璇曡繛鎺ユ垨鍏朵粬閫昏緫...
+ // };
+ return this;
+ }
+}
/* Fullscreen */
tool.screen = function (element) {
var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
diff --git a/src/views/login/components/passwordForm.vue b/src/views/login/components/passwordForm.vue
index 4bd9d3a..fd366da 100644
--- a/src/views/login/components/passwordForm.vue
+++ b/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 }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 25d2ef2..3cc1203 100644
--- a/src/views/login/index.vue
+++ b/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(){
diff --git a/src/views/mdc/realtime-status/index.vue b/src/views/mdc/realtime-status/index.vue
index 3aa324f..ec686cb 100644
--- a/src/views/mdc/realtime-status/index.vue
+++ b/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; // 绉掕浆鎹负姣
+ // 鍒涘缓涓�涓狹oment.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); // 娉ㄦ剰锛歞ate2 - 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()鏂规硶鑾峰彇绉掓暟
+ // 杈撳嚭缁撴灉锛堜娇鐢∕ath.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;
+ //鍙戦�亀ebsocket
+ 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; //绛夋墍鏈塻ocket鍥炴潵浠ュ悗璧嬪��
+ }
+ }, 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>
\ No newline at end of file
diff --git a/src/views/mdc/station-live.vue b/src/views/mdc/station-live.vue
index 5256404..fd2b8c0 100644
--- a/src/views/mdc/station-live.vue
+++ b/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;
+ //鍙戦�亀ebsocket
+ 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鐨刢ode鍜岃繍琛屽搴�
+ 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;
--
Gitblit v1.9.3