From 1d53e27dc2226aa198de7bf64ef1e2501f76d780 Mon Sep 17 00:00:00 2001
From: lzhe <181968431@qq.com>
Date: 星期日, 21 四月 2024 00:46:23 +0800
Subject: [PATCH] 1
---
src/views/mdc/realtime-status/index.vue | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 161 insertions(+), 14 deletions(-)
diff --git a/src/views/mdc/realtime-status/index.vue b/src/views/mdc/realtime-status/index.vue
index 2fd524a..7d582d6 100644
--- a/src/views/mdc/realtime-status/index.vue
+++ b/src/views/mdc/realtime-status/index.vue
@@ -8,7 +8,7 @@
<template>
<div class="realtime-main">
<div>
- <el-radio-group v-model="station">
+ <el-radio-group v-model="station" @change="changestatus">
<el-radio-button label="鐘舵�佽鍥�" value="鐘舵�佽鍥�" />
<el-radio-button label="鏍囩瑙嗗浘" value="鏍囩瑙嗗浘" />
</el-radio-group>
@@ -18,7 +18,7 @@
</span>
</div>
<ul class="status-view-box">
- <li v-for="item in devicestatus">
+ <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>
@@ -27,14 +27,20 @@
</li>
</ul>
<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: 33.3333%; height: 50%;">
<div class="status-card-box" style="border-color: rgb(89, 89, 89);">
<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: rgb(89, 89, 89);"></div>绂荤嚎
- <div class="status-card-detail-time" style="color: rgb(89, 89, 89);">1澶�10鏃�21鍒�45绉�</div>
+ <div class="status-card-detail-point" style="background-color: rgb(89, 89, 89);"></div>{{item.statusName}}
+ <div class="status-card-detail-time" style="color: rgb(89, 89, 89);">---</div>
</div>
</div>
<div class="status-card-machine" style="border-color: rgb(89, 89, 89);">
@@ -44,7 +50,7 @@
<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">461</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>
@@ -54,12 +60,20 @@
</div>
</div>
<div class="status-card-bottom">
- <div class="status-card-bottom-realtime"><i class="iconfont saber-xiangqing status-card-bottom-icon"></i> 瀹炴椂鏁版嵁</div>
- <div class="status-card-bottom-detail"><i class="iconfont saber-shuju status-card-bottom-icon"></i> 宸ヤ綅璇︽儏</div>
+ <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.namecolor}">{{item.name}}</div>
+ <div class="card-value" :style="{'background-color': item.statuscolor}">{{item.statusName}}</div>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
@@ -75,33 +89,107 @@
},
data() {
return {
+ titleMap: "",
+ visible: false,
+ visibleList: [],
devicestatus: [],
timestatus: [],
- station: "鐘舵�佽鍥�"
+ station: "鐘舵�佽鍥�",
+ current: "1",
+ total: 0,
+ deviceStatus: [],
+ workStationGroupIdList: []
}
},
mounted() {
this.getdevicestatus(); //鑾峰彇椤堕儴title
- this.gettimestatus(); //鑾峰彇鏈哄櫒
},
methods: {
+ changestatus(name) {
+ console.log(name)
+ },
+ showvisible(item) {
+ if(item.properties == null) {
+ this.$message({
+ message: '璇烽厤缃噰闆嗛」',
+ type: 'warning'
+ });
+ return;
+ }
+ var visibleList = JSON.parse(JSON.stringify(item.properties));
+ visibleList.forEach(item=> {
+ if(item.statusName) {
+ item.namecolor = "rgb(89, 89, 89)";
+ 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;
+ console.log(this.visibleList)
+ },
+ searchstatus(item,index) {
+ console.log(item)
+ 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.total/9 - this.current) < 0) return;
+ this.current = Number(this.current) + 1;
+ this.gettimestatus();
+ },
goSet() {
- this.$router.push('/mdc/configuration')
+ this.$router.push('/mdc/configuration');
+ },
+ gostatus(item) {
+ this.$router.push('/mdc/station-live?code='+item.id);
},
gettimestatus() {
var obj = {
- deviceStatus: [],
- workStationGroupIdList: []
+ deviceStatus: this.deviceStatus,
+ workStationGroupIdList: this.workStationGroupIdList
}
- this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=1&size=9`,obj).then(res=> {
+ this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=9`,obj).then(res=> {
if(res.code == 200) {
- this.timestatus = res.data.records;
+ var records = JSON.parse(JSON.stringify(res.data.records));
+ records.forEach(item=> {
+ item.statusName = "鏈煡";
+ if(item.properties != null) {
+ item.properties.forEach(item1=> {
+ this.devicestatus.forEach(item2=> {
+ if(item2.status == item1.value) {
+ item.statusName = item2.statusName;
+ item1.statusName = item2.statusName;
+ }
+ })
+ })
+ }
+
+ })
+ this.timestatus = records;
+ this.total = res.data.total;
}
})
},
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;
+ })
res.data[0].color = "#73D13D";
res.data[1].color = "#370C0D";
res.data[2].color = "#FFC53D";
@@ -113,6 +201,7 @@
res.data[3].icon = "Warning";
res.data[4].icon = "Odometer";
this.devicestatus = res.data;
+ this.gettimestatus(); //鑾峰彇鏈哄櫒
}
})
}
@@ -177,6 +266,10 @@
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 {
min-width: 266px;
@@ -290,4 +383,58 @@
.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;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3