From dd92e38d80b52e570104c629335af6889a35bc26 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期三, 04 九月 2024 22:12:13 +0800
Subject: [PATCH] update
---
src/views/mdc/realtime-status/index.vue | 1309 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 683 insertions(+), 626 deletions(-)
diff --git a/src/views/mdc/realtime-status/index.vue b/src/views/mdc/realtime-status/index.vue
index da5b03b..904247d 100644
--- a/src/views/mdc/realtime-status/index.vue
+++ b/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(); //鑾峰彇棰滆壊==銆嬭幏鍙栭《閮╰itle==銆嬭缃嚑琛屽嚑鍒�==銆媤s
- },
- 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; // 绉掕浆鎹负姣
- // 鍒涘缓涓�涓狹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=> {
- 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(); //鑾峰彇棰滆壊==銆嬭幏鍙栭《閮╰itle==銆嬭缃嚑琛屽嚑鍒�==銆媤s
+ },
+ 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); // 娉ㄦ剰锛歞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=${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;
- //鍙戦�亀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(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; // 绉掕浆鎹负姣
+ // 鍒涘缓涓�涓狹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 => {
+ 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); // 娉ㄦ剰锛歞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 || 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;
+ //鍙戦�亀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 (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; //绛夋墍鏈塻ocket鍥炴潵浠ュ悗璧嬪��
- // }
- // }, 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; //绛夋墍鏈塻ocket鍥炴潵浠ュ悗璧嬪��
+ // }
+ // }, 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>
\ No newline at end of file
--
Gitblit v1.9.3