1

lzhe

2024-04-19 dd3bb0fcffc294ac9094c17aafbc73c8b6a73eed

1

 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>

 src/views/mdc/realtime-status/station.png

 src/views/mdc/state-feedback.vue

 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)
                    }
                })
            },