1

lzhe

2024-04-21 1d53e27dc2226aa198de7bf64ef1e2501f76d780

1

 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>

 src/views/mdc/station-live.vue

@@ -297,7 +297,7 @@
        },
        mounted(){
            this.newDate();  //获取当前日期
            this.getTreeList();
            this.getTreeList(this.$route.query.code);
        },
        components: {
            saveDialog
@@ -347,7 +347,6 @@
                            item.temdata = "00:00:00";
                            item.perdata = "0";
                        })
                        console.log(res.data,980)
                        this.recordData = res.data;
                    }
                })
@@ -425,7 +424,6 @@
                        })
                        this.wcsOptionR.series[0].data = res.data;    
                        myChart.setOption(this.wcsOptionR);
                        console.log(res.data)
                    }
                })
            },
@@ -460,6 +458,7 @@
                this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
                    if(res.code == 200) {
                        this.dmpList = res.data;
                        console.log(this.dmpList,1)
                    }
                })
            },
@@ -518,7 +517,7 @@
                })
                return tree;
            },
            getTreeList(flag) {
            getTreeList(id) {
                var obj = {
                    groupCategory: 1,
                    groupType: "group_workstation"
@@ -529,10 +528,14 @@
                            var treeDisabled = this.addTreeDisable(res.data);
                            this.tableData = this.buildTree(treeDisabled);  //从扁平化变为树状结构
                            this.$nextTick(()=> {
                                if(id) {
                                    this.lastLevelId = id;  //指定id
                                }else {
                                this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                                }
                                this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                                //以下是初始化数据
                                this.getlist();  //渲染反馈列表
                                this.getlist();  //渲染详情和(状态list)
                                this.getwcsLcolor();  //左侧图表
                                this.getwcsR();  //右侧图标
                                this.getachievements();  //班次状态记录采集状态