update

gaoshp

2024-09-04 dd92e38d80b52e570104c629335af6889a35bc26

update

 src/views/mdc/realtime-status/index.vue

@@ -1,8 +1,8 @@
<!--
 * @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>
@@ -13,12 +13,15 @@
              <el-radio-button label="标签视图" value="标签视图" />
            </el-radio-group>
            <span class="setSpan">
                <el-icon class="setIcon"><Setting /></el-icon>
                <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}">
            <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>
@@ -26,15 +29,20 @@
                  <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-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>
                <el-icon>
                    <ArrowLeft />
                </el-icon>
              </div>
              <div class="status-next" @click="next">
                  <el-icon><ArrowRight /></el-icon>
                <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;">
@@ -42,8 +50,11 @@
                          <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 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;">
@@ -63,8 +74,10 @@
                        </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 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>
@@ -73,7 +86,9 @@
                  <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 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>
@@ -262,7 +277,7 @@
                    workStationGroupIdList: this.workStationGroupIdList
                }
                this.timestatus = [];
                this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=${this.size}`,obj).then(res=> {
            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)
@@ -416,25 +431,30 @@
        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;
@@ -446,15 +466,18 @@
        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;
@@ -469,9 +492,12 @@
        box-sizing: border-box;
        position: relative;
    }
    .status-content-cardBox:hover .status-next,.status-content-cardBox:hover .status-prev {

.status-content-cardBox:hover .status-next,
.status-content-cardBox:hover .status-prev {
        display: block;
    }

    .status-content-cardp {
        height: 50%;
        min-height: 170px;
@@ -479,6 +505,7 @@
        padding: 4px;
        box-sizing: border-box;
    }

    .status-card-box {
        height: 100%;
        border: 1px solid;
@@ -486,16 +513,19 @@
        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;
@@ -505,21 +535,25 @@
        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;
@@ -532,20 +566,24 @@
        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;
@@ -553,12 +591,14 @@
        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;
@@ -569,22 +609,28 @@
        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 {

.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 {

.status-next,
.status-prev {
        position: absolute;
        top: 50%;
        font-size: 36px;
@@ -599,31 +645,39 @@
        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{

.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;
@@ -633,14 +687,17 @@
        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);
    }