HHECS.Web/src/views/main/components/DeviceMonitor.vue

<template>
  <el-container class="device-monitor">
    <el-aside width="225px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t("main.monitor.overview") }}</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">
        <div slot="header" class="clearfix">
          <span>{{ $t("main.monitor.deviceOverview") }}</span>
        </div>
        <div class="device-info">
          <el-divider
            v-if="srmList.length > 0"
            content-position="center"
            style="width: 100vw"
            >{{ $t("main.monitor.stacker") }}</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">{{
            $t("main.monitor.station")
          }}</el-divider>
          <el-tag
            v-for="item in stationList"
            :key="item.name"
            :type="getTagTypePort(item)"
            effect="dark"
            class="tag-item"
          >
            {{ item.name.replace("StationMonitor", "") }}
          </el-tag>
          <el-divider v-if="rgvList.length > 0" content-position="center">{{
            $t("main.monitor.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">{{
            $t("main.monitor.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>
        </div>
      </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);
    // 移除窗口大小变化事件监听
    window.removeEventListener("resize", this.setDeviceInfoHeight);
  },
  mounted() {
    // console.log(this.$dict);
    // 初始化高度
    this.setDeviceInfoHeight();
    // 监听窗口大小变化事件
    window.addEventListener("resize", this.setDeviceInfoHeight);
  },
  methods: {
    //开始刷新数据
    start() {
      this.isCurrentTab = true;
      if (this.isOpenServer) {
        this.loadData();
        this.interval = setInterval(() => {
          this.loadData();
        }, 3000);
      }
    },
    //加载数据
    loadData() {
      getOverviews().then((response) => {
        // console.log(response);
        this.overyviewsList = response.data;
      });
      getSRMInfo().then((response) => {
        this.srmList = response.data;
      });
      //是否存在rgv
      if (window.appConfig.isExistRGV) {
        getRGVInfo().then((response) => {
          this.rgvList = response.data;
        });
      }
      //是否存在crgv
      if (window.appConfig.isExistCRGV) {
        getCRGVInfo().then((response) => {
          this.crgvList = response.data;
        });
      }
      getStationMonitorInfo().then((response) => {
        this.stationList = response.data;
      });
      this.$refs.map.updateData(this.srmList, this.rgvList, this.stationList);
    },
    //停止刷新数据
    stop() {
      this.isCurrentTab = false;
      clearInterval(this.interval);
    },
    getTagType(item) {
      if (item.totalError == "True") {
        return "danger"; // 报警
      } else {
        if (item.operationModel == "5") {
          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.stationError == "1") {
        return "danger"; // 报警
      } else {
        if (item.stationMonitorAutomation == "1") {
          if (item.stationMonitorOccupied == "1") {
            return ""; // 正常
          } else {
            return "success"; // 报警
          }
        } else {
          return "warning"; // 非自动
        }
      }
    },
    // ... existing code ...
    setDeviceInfoHeight() {
      const deviceInfoElement = this.$el.querySelector(".device-info");
      if (deviceInfoElement) {
        // 计算 70% 的视口高度
        const height = window.innerHeight * 0.52;
        deviceInfoElement.style.maxHeight = `${height}px`;
      }
    },
  },
};
</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 {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap; // 允许元素换行
  //   max-height: 70vh; // 设置最大高度，超出显示滚动条
  overflow-y: auto; // 超出最大高度时显示纵向滚动条
}
</style>
<style>
.device-monitor {
  .el-card__body {
    width: 225px;
  }
}
</style>