ECS5 / ECS5.0Web · Files

<template>
  <el-container class="device-monitor">
    <el-aside width="225px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>概览</span>
        </div>
        <div class="container">
          <div v-for="(item, index) in overyviewsList" :key="item.code" class="text item">
            <div :style="index==0?'background-color:#1E9FFF':index==1?'background-color:#009688':index==2?'background-color:#FFB800':'background-color:#1E9FFF'">
              <el-row>
                <el-col :span="14">
                  {{item.name }}
                </el-col>
                <el-col :span="10">
                  <!-- <br/> -->
                  <span>{{item.description }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card device-info" >
        <div slot="header" class="clearfix">
          <span>设备概览</span>
        </div>
        <el-divider v-if="srmList.length > 0" content-position="center" style="width:100vw">堆垛机</el-divider>
        <el-tag
          v-for="item in srmList"
          :key="item.name"
          :type="getTagType(item)"
          effect="dark"
          class="tag-item">
          {{ item.name }}
        </el-tag>
        <el-divider v-if="stationList.length > 0" content-position="center">站台</el-divider>
        <el-tag
          v-for="item in stationList"
          :key="item.name"
          :type="getTagTypePort(item)"
          effect="dark"
          class="tag-item">
          {{ item.name }}
        </el-tag>
        <el-divider v-if="rgvList.length > 0" content-position="center">RGV</el-divider>
        <el-tag
          v-for="item in rgvList"
          :key="item.name"
          :type="getTagType(item)"
          effect="dark"
          class="tag-item">
          {{ item.name }}
        </el-tag>
        <el-divider v-if="crgvList.length > 0" content-position="center">CRGV</el-divider>
        <el-tag
          v-for="item in crgvList"
          :key="item.name"
          :type="getTagTypePort(item)"
          effect="dark"
          class="tag-item">
          {{ item.name }}
        </el-tag>
      </el-card>
    </el-aside>
    <el-main >
      <map-module ref="map" />
    </el-main>
  </el-container>
</template>

<script>
import { getCRGVInfo, getOverviews, getRGVInfo, getSRMInfo, getStationMonitorInfo } from '@/api/main';
import MapModule from '@/components/MapModule';
export default {
  name: "DeviceMonitor",
  components: {
    MapModule
  },
  data() {
    return {
      //详情列表
      overyviewsList: [],
      //堆垛机列表
      srmList: [],
      //站台列表
      stationList: [],
      //rgv列表
      rgvList: [],
      //crgv列表
      crgvList: [],      
      interval: null,
      isCurrentTab: false,
      isOpenServer: false,
    };
  },
  props: {
    // 定义接收的 startDeal 变量
    startDeal: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // 监听 startDeal 变量的变化
    startDeal(newValue, oldValue) {
      // console.log('处理状态发生变化:', newValue);
      this.isOpenServer = newValue;
      if(this.isCurrentTab){
        if(newValue){
          this.start();
        }else{
          this.stop();
        }
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  mounted() {
    // console.log(this.$dict);
  },
  methods: {
    //开始刷新数据
    start(){
      this.isCurrentTab = true;
      if(this.isOpenServer) {
        // this.srmList = window.srmData;
        // this.rgvList = window.rgvData;
        // this.stationList = window.stationData;
        // // console.log(this.srmList, this.rgvList, this.stationList)
        // this.$refs.map.updateData(this.srmList, this.rgvList, this.stationList);

        this.interval = setInterval(() => {
          getOverviews().then(response => {
            // console.log(response);
            this.overyviewsList = response.data;
          });
          getSRMInfo().then(response => {
            this.srmList = response.data;
          });
          getRGVInfo().then(response => {
            this.rgvList = response.data;
          });
          getCRGVInfo().then(response => {
            this.crgvList = response.data;
          });
          getStationMonitorInfo().then(response => {
            this.stationList = response.data;
          });
          this.$refs.map.updateData(this.srmList, this.rgvList, this.stationList);
        }, 3000)
      };
    },
    //停止刷新数据
    stop(){
      this.isCurrentTab = false;
      clearInterval(this.interval)
    },

    getTagType(item) {
      if (item.operationModel == "5") {
        if (item.totalError == "True") {
          return 'danger'; // 报警
        } else {
          if (item.fork1TaskExcuteStatus == "2" || item.fork1TaskExcuteStatus == "3") {
            return''; // 正常
          } else if (item.fork1TaskExcuteStatus == "1") {
            return 'success'; // 待机
          } else {
            return 'danger'; // 报警
          }
        }
      } else {
        return 'warning'; // 非自动
      }
    },

    getTagTypePort(item) {
      if (item.stationMonitorAutomation == "1") {
        if (item.stationError == "1") {
          return 'danger'; // 报警
        } else {
          if (item.stationMonitorOccupied == "1") {
            return''; // 正常
          } else {
            return 'success'; // 报警
          }
        }
      } else {
        return 'warning'; // 非自动
      }
    }
  },
};
</script>

<style lang="scss" scoped>
  .container {
      width: 100%;
  }

  .text {
    font-size: 14px;
    color:white;
  }

  .text span {
    font-size: 16px;
    font-weight: bolder;
  }

  .item {
    border: 1px black solid;
    text-align: center;
    width: 100%;
    line-height: 3vh;
    margin-bottom: 5px;
  }

  .clearfix {
    height: 14px;
    font-size: 14px;
    color: #409EFF;
  }

  .tag-item {
    margin: 0px 5px 5px 0px;
  }

  .device-info {
    display: flex;
    flex-wrap: wrap; // 允许元素换行
    max-height: 70vh; // 设置最大高度，超出显示滚动条
    overflow-y: auto; // 超出最大高度时显示纵向滚动条
  }
</style>

<style>
.device-monitor {
  .el-card__body{
    width: 225px;
  }
}
</style>