From e5cdf3af17609b49138cec3e8fb200752365f651 Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期五, 01 十一月 2024 14:58:12 +0800 Subject: [PATCH] 1 --- src/views/mdc/realtime-status/index.vue | 149 +++++++++++++------------------------------------ 1 files changed, 39 insertions(+), 110 deletions(-) diff --git a/src/views/mdc/realtime-status/index.vue b/src/views/mdc/realtime-status/index.vue index ae05939..ecc298c 100644 --- a/src/views/mdc/realtime-status/index.vue +++ b/src/views/mdc/realtime-status/index.vue @@ -1,7 +1,7 @@ <!-- * @Date: 2024-04-09 22:11:21 * @LastEditors: lzhe lzhe@example.com - * @LastEditTime: 2024-10-22 20:56:44 + * @LastEditTime: 2024-10-31 17:27:54 * @FilePath: /cps-web/src/views/mdc/realtime-status/index.vue 瀹炴椂鐪嬫澘 --> @@ -53,8 +53,7 @@ <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 class="status-card-detail-time" :style="{ 'color': item.statusStyle }">{{ item.time }} </div> </div> </div> @@ -82,12 +81,11 @@ </div> <el-dialog :title="titleMap" v-model="visible" :width="740"> <div class="dialogstyle"> - <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' }"> - {{ item.code }}</div> - </div> + <el-table :data="timestatus[clickIndex].properties" style="width: 100%" border> + <el-table-column prop="name" label="鏁版嵁鐐�"></el-table-column> + <el-table-column prop="code" label="鍊�"></el-table-column> + <el-table-column prop="moment" label="閲囬泦鏃堕棿"></el-table-column> + </el-table> </div> </el-dialog> </div> @@ -145,49 +143,6 @@ } }) }, - setIntervalTime() { - function addTime(timeStr) { - var increaseByMilliseconds = 10 * 1000; // 10绉掕浆鎹负姣 - // 瑙f瀽鏃堕棿瀛楃涓蹭负澶╂暟銆佸皬鏃躲�佸垎閽熷拰绉� - if (timeStr != undefined && timeStr != "--") { - var parts = timeStr.match(/(\d+)澶�(\d+)鏃�(\d+)鍒�(\d+)绉�/); - 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); - // 澧炲姞鏃堕棿 - 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 => { @@ -198,7 +153,7 @@ this.gettimestatus(); //鏌ヨ鍒楄〃 }, getstationlabelList() { - this.$HTTP.get("/api/blade-cps/group/get-mdc-group").then(res => { + this.$HTTP.get("/api/smis/group/get-mdc-group").then(res => { if (res.code == 200) { this.stationlabelList = res.data; if (res.data.length != 0) { @@ -253,13 +208,13 @@ } }, goSet() { - this.$router.push('/mdc/configuration'); //鍒嗘瀽璁剧疆 + this.$router.push('/mdc/configuration?isShowSearch=1'); //鍒嗘瀽璁剧疆 }, 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 => { + this.$HTTP.get(`/api/smis/global_wcs/list?code=&name=`).then(res => { if (res.code == 200) { this.allwcs = res.data; this.getdevicestatus(); //鑾峰彇椤堕儴title/鍏蜂綋鏁版嵁 @@ -290,7 +245,7 @@ workStationGroupIdList: this.workStationGroupIdList } this.timestatus = []; - this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current || 0}&size=${this.size || 6}`, obj).then(res => { + this.$HTTP.post(`/api/smis/workstation/real-time-status?current=${this.current || 0}&size=${this.size || 6}`, obj).then(res => { if (res.code == 200) { var ids = []; res.data.records.forEach(item => { @@ -298,20 +253,6 @@ item.avatar = station; } 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; @@ -329,10 +270,7 @@ 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閲� @@ -345,7 +283,6 @@ var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss'); 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 => { @@ -356,8 +293,9 @@ }) } else { if (item.time == undefined || item.time == "--") { - var diffTime = "--"; - item.time = diffTime; + item.time = "--"; + item.statusName = "鏈煡"; + item.statusStyle = '#ccc'; } } item.properties.forEach((item1, index1) => { @@ -365,57 +303,46 @@ 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; + item1.moment = that.timestampChangeTime(eventData.data[item1.key].t); //鏃堕棿鎴宠浆鍖栨垚鏃ユ湡 } }) if (Object.keys(eventData.data).length == 0) { //ws娌℃湁data鏁版嵁锛岀粰榛樿鍊� item1.code = ""; - item1.color = "#E4A512"; + item1.moment = ""; }; } 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.code = v[0].alarmNo; - } - } else { - item1.name = v.code; - item1.code = v.msg; - } - } - } else { - if (eventData.data[item1.key]) { - item1.code = eventData.data[item1.key].v; - } + if(eventData.data[item1.key]) { + item1.code = eventData.data[item1.key].v; + item1.moment = that.timestampChangeTime(eventData.data[item1.key].t); //鏃堕棿鎴宠浆鍖栨垚鏃ユ湡 + }else { + item1.code = ""; + item1.moment = ""; } - that.allwcs.forEach(item2 => { - if (item2.name == "鎶ヨ") { - item1.color = item2.color; - } - }) } + }) } }); }; - // var len = res.data.records.length; - // intervalId = setInterval(function() { - // if (num === len) { - // clearInterval(intervalId); - // that.timestatus = res.data.records; //绛夋墍鏈塻ocket鍥炴潵浠ュ悗璧嬪�� - // } - // }, 500); } }) }, + timestampChangeTime(timestamp) { //鏃堕棿鎴宠浆鎹㈡垚鏃堕棿 + var date = new Date(timestamp); + //鎻愬彇骞存湀鏃ュ皬鏃跺垎閽熺 + var year = date.getFullYear(); + var month = date.getMonth() + 1; // 鏈堜唤浠�0寮�濮嬶紝鎵�浠ヨ鍔�1 + var day = date.getDate(); + var hours = date.getHours(); + var minutes = date.getMinutes(); + var seconds = date.getSeconds(); + // 鏍煎紡鍖栨棩鏈熷瓧绗︿覆 + var formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; + return formattedDate; + }, getdevicestatus() { - this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res => { + this.$HTTP.get(`/api/mdc/work-station-analysis/device-status-statistics`).then(res => { if (res.code == 200) { res.data.forEach(item => { item.active = false; @@ -631,6 +558,7 @@ display: flex; align-items: center; justify-content: center; + cursor: pointer; } .status-card-bottom-detail, @@ -639,6 +567,7 @@ display: flex; align-items: center; justify-content: center; + cursor: pointer; } .status-card-bottom-icon { -- Gitblit v1.9.3