From dd3bb0fcffc294ac9094c17aafbc73c8b6a73eed Mon Sep 17 00:00:00 2001
From: lzhe <181968431@qq.com>
Date: 星期五, 19 四月 2024 23:53:55 +0800
Subject: [PATCH] 1
---
src/views/mdc/realtime-status/index.vue | 285 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
src/views/mdc/state-feedback.vue | 2
src/views/mdc/realtime-status/station.png | 0
src/views/mdc/station-live.vue | 3
4 files changed, 280 insertions(+), 10 deletions(-)
diff --git a/src/views/mdc/realtime-status/index.vue b/src/views/mdc/realtime-status/index.vue
index ed15ce9..2fd524a 100644
--- a/src/views/mdc/realtime-status/index.vue
+++ b/src/views/mdc/realtime-status/index.vue
@@ -6,19 +6,288 @@
瀹炴椂鐪嬫澘
-->
<template>
- <el-main>
- <el-card shadow="never">
- 鏁堢巼鍒嗘瀽
- </el-card>
- </el-main>
+ <div class="realtime-main">
+ <div>
+ <el-radio-group v-model="station">
+ <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">
+ <li v-for="item in devicestatus">
+ <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>
+ <div class="status-content-cardBox">
+ <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>
+ </div>
+ <div class="status-card-machine" style="border-color: rgb(89, 89, 89);">
+ <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">461</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"><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>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
+ 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 {
+ devicestatus: [],
+ timestatus: [],
+ station: "鐘舵�佽鍥�"
+ }
+ },
+ mounted() {
+ this.getdevicestatus(); //鑾峰彇椤堕儴title
+ this.gettimestatus(); //鑾峰彇鏈哄櫒
+ },
+ methods: {
+ goSet() {
+ this.$router.push('/mdc/configuration')
+ },
+ gettimestatus() {
+ var obj = {
+ deviceStatus: [],
+ workStationGroupIdList: []
+ }
+ this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=1&size=9`,obj).then(res=> {
+ if(res.code == 200) {
+ this.timestatus = res.data.records;
+ }
+ })
+ },
+ getdevicestatus() {
+ this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res=> {
+ if(res.code == 200) {
+ res.data[0].color = "#73D13D";
+ res.data[1].color = "#370C0D";
+ res.data[2].color = "#FFC53D";
+ res.data[3].color = "#595959";
+ res.data[4].color = "#40A9FF";
+ 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 lang="scss" scoped>
-
+<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;
+ }
+ .status-content-cardp {
+ min-width: 266px;
+ 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: #3b8e8e;
+ 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;
+ }
</style>
\ No newline at end of file
diff --git a/src/views/mdc/realtime-status/station.png b/src/views/mdc/realtime-status/station.png
new file mode 100644
index 0000000..c44b787
--- /dev/null
+++ b/src/views/mdc/realtime-status/station.png
Binary files differ
diff --git a/src/views/mdc/state-feedback.vue b/src/views/mdc/state-feedback.vue
index 50961c8..5816b01 100644
--- a/src/views/mdc/state-feedback.vue
+++ b/src/views/mdc/state-feedback.vue
@@ -59,7 +59,7 @@
</template>
<script>
import { useTransitionFallthroughEmits } from 'element-plus';
-import saveDialog from './add-feedback'
+ import saveDialog from './add-feedback'
export default {
name: "state-feedback",
data(){
diff --git a/src/views/mdc/station-live.vue b/src/views/mdc/station-live.vue
index 4e223a1..ea9c12c 100644
--- a/src/views/mdc/station-live.vue
+++ b/src/views/mdc/station-live.vue
@@ -416,15 +416,16 @@
}
this.$HTTP.post(`/api/blade-mdc/status-record/equipment-efficiency`,obj).then(res=> {
if(res.code == 200) {
- console.log(res.data,98988)
var myChart = echarts.init(document.getElementById('wcs-right'));
res.data.forEach(item=> {
+ item.value = (Number(item.value)*100).toFixed(2);
if(item.name == "杩愯鐜�") item.itemStyle = {color: '#73d13d'};
if(item.name == "鎶ヨ鐜�") item.itemStyle = {color: '#ff4d4f'};
if(item.name == "绋煎姩鐜�") item.itemStyle = {color: '#40a9ff'};
})
this.wcsOptionR.series[0].data = res.data;
myChart.setOption(this.wcsOptionR);
+ console.log(res.data)
}
})
},
--
Gitblit v1.9.3